/* ============================================================
   ホームレック — スタイルシート
   Brand: Warm Orange (#E87B3A) × Cream White
   Aesthetic: Warm / Family / Trustworthy / Modern Japanese
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@700;900&display=swap');

/* ===========================
   1. CSS Variables / Reset
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-brand:       #E87B3A;
  --c-brand-dark:  #C4601F;
  --c-brand-light: #FFF0E6;
  --c-brand-pale:  #FDF6EE;
  --c-text:        #1A1A1A;
  --c-text-sub:    #555555;
  --c-text-muted:  #888888;
  --c-bg:          #F7F4F0;
  --c-bg-warm:     #FDF6EE;
  --c-bg-raised:   #FFFFFF;
  --c-border:      #E8DDD4;
  --c-border-light:#F0EAE3;
  --header-h:      110px;
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     22px;
  --radius-xl:     32px;
  --shadow-sm:     0 2px 8px rgba(232,123,58,.08);
  --shadow-md:     0 6px 24px rgba(0,0,0,.09);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.13);
  --shadow-brand:  0 8px 32px rgba(232,123,58,.28);
  --font:          'Noto Sans JP', sans-serif;
  --font-display:  'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --container:     1360px;
  --space-section: clamp(64px, 8vw, 100px);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg-raised);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ===========================
   2. Buttons
=========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  transition: all .22s ease;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--c-brand);
  color: #fff;
  border: 2px solid var(--c-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background: var(--c-brand-dark);
  border-color: var(--c-brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(232,123,58,.38);
}

.btn-outline {
  background: transparent;
  color: var(--c-brand);
  border: 2px solid var(--c-brand);
}
.btn-outline:hover {
  background: var(--c-brand-light);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 10px 22px;
  font-size: 14px;
}

/* ===========================
   3. Section Common
=========================== */
.section {
  padding: var(--space-section) 0;
}

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-brand);
  background: var(--c-brand-light);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.section-label,
.interlude-label {
  display: none !important;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 900;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.3;
}

.section-title-left {
  text-align: left;
}

.section-desc {
  font-size: 16px;
  color: var(--c-text-sub);
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  line-height: 1.8;
}

/* ===========================
   4. Header
=========================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border-light);
  z-index: 1000;
  transition: box-shadow .2s;
}
#header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 100%;
  column-gap: 24px;
  max-width: min(1760px, calc(100vw - 12px));
  padding-left: 24px;
  padding-right: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-text);
}
.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--c-brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-icon svg { width: 18px; height: 18px; fill: white; }

.logo-img {
  height: 120px;
  width: auto;
  display: block;
  object-fit: contain;
}

.header-nav {
  display: contents;
}
.nav-links {
  display: flex;
  gap: 40px;
  justify-self: center;
}
.nav-links a {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text-sub);
  transition: color .15s;
}
.nav-links a:hover { color: var(--c-brand); }

.header-btns {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-self: end;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: all .25s;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  padding: 24px;
  z-index: 999;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-md);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-light);
  color: var(--c-text);
}
.mobile-nav-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* ===========================
   5. Hero
=========================== */
#hero {
  padding-top: var(--header-h);
  background:
    linear-gradient(160deg, rgba(255,255,255,.45) 0%, rgba(253,246,238,.50) 100%),
    url('image/家族の幸せなひととき.png') center / cover no-repeat;
  overflow: hidden;
  position: relative;
}

#hero {
  background-position: center, right top;
  background-size: auto, 50% auto;
}

#hero > .container {
  max-width: min(1680px, calc(100vw - 20px));
  padding-left: 16px;
  padding-right: 16px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  min-height: 480px;
  padding: 28px 0 32px;
}

/* Phone mockups (left side) */
.hero-phones {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -150px;
  isolation: isolate;
}

.phone-mockup {
  position: absolute;
  width: 230px;
  background: #1A1A1A;
  border-radius: 28px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
  will-change: transform;
  animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% { transform: var(--phone-transform); }
  50% { transform: var(--phone-float-transform, var(--phone-transform)); }
}

.phone-screen {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  height: 390px;
  display: flex;
  flex-direction: column;
}

/* Instagram-like UI */
.phone-ig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.ig-logo {
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.5px;
}
.ig-icon-row { display: flex; gap: 10px; }
.ig-icon { width: 18px; height: 18px; }

.phone-post-img {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.post-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.phone-post-img-1 { background: linear-gradient(135deg, #D4A574 0%, #E8C49A 35%, #F5DEC0 60%, #C4956A 100%); }
.phone-post-img-2 { background: linear-gradient(145deg, #8FB4A8 0%, #B8D4C8 40%, #E8F0EC 70%, #7AA090 100%); }
.phone-post-img-3 { background: linear-gradient(125deg, #B8A090 0%, #D4C0B0 40%, #EAD8C8 65%, #A08870 100%); }

.room-sketch {
  position: absolute;
  inset: 0;
  opacity: .18;
}

.phone-post-actions {
  padding: 8px 12px 4px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.post-action-icon {
  width: 20px;
  height: 20px;
  opacity: .7;
}

.phone-post-caption {
  padding: 2px 12px 10px;
  font-size: 8px;
  line-height: 1.5;
  color: #333;
}
.caption-name {
  font-weight: 700;
  margin-right: 4px;
}

.phone-mockup-back {
  left: 118px;
  top: 50%;
  --phone-transform: translateY(-56%) rotate(-9deg) scale(.84);
  --phone-float-transform: translateY(-59%) rotate(-8deg) scale(.84);
  --phone-hover-transform: translateY(-58%) rotate(-8deg) scale(1.02);
  transform: var(--phone-transform);
  z-index: 1;
  opacity: 1;
  animation-delay: -.8s;
}
.phone-mockup-front {
  z-index: 3;
  top: 50%;
  --phone-transform: translateY(-50%) scale(1.06);
  --phone-float-transform: translateY(-53%) scale(1.08);
  --phone-hover-transform: translateY(-52%) scale(1.28);
  transform: var(--phone-transform);
  left: 50%;
  margin-left: -115px;
  animation-delay: -1.8s;
}
.phone-mockup-right {
  right: 118px;
  top: 50%;
  --phone-transform: translateY(-44%) rotate(9deg) scale(.84);
  --phone-float-transform: translateY(-47%) rotate(8deg) scale(.84);
  --phone-hover-transform: translateY(-46%) rotate(8deg) scale(1.02);
  transform: var(--phone-transform);
  z-index: 2;
  opacity: 1;
  animation-delay: -1.2s;
}
.phone-mockup:hover {
  animation: none;
  transform: var(--phone-hover-transform, var(--phone-transform));
  box-shadow: 0 28px 64px rgba(0,0,0,.28);
  filter: saturate(1.06);
  z-index: 12;
}

.hero-bg-circle {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,123,58,.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Hero text (right side) */
.hero-text {
  padding-left: 0;
  margin-left: -186px;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-brand-light);
  color: var(--c-brand);
  font-size: 15px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.hero-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.7); }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 900;
  line-height: 1.28;
  color: var(--c-text);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}
.hero-headline .accent { color: var(--c-brand); }

.hero-sub {
  font-size: 15px;
  color: var(--c-text-sub);
  margin-bottom: 28px;
  line-height: 1.8;
}

/* Flow steps */
.hero-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.flow-step-icon {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: var(--c-brand-light);
  border: 2px solid var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  overflow: hidden;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.flow-step-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-sub);
  white-space: nowrap;
  letter-spacing: .04em;
}
.flow-arrow {
  color: var(--c-brand);
  font-size: 20px;
  margin-bottom: 32px;
  opacity: .6;
}

.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===========================
   6. Problems Section
=========================== */
#problems {
  background: var(--c-bg-warm);
}

.problems-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.problem-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 18px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.problem-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-brand);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.problem-card:hover::before { transform: scaleX(1); }
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.problem-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
}
.problem-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
}

/* ===========================
   7. Features Section
=========================== */
#features {
  background: #fff;
}

.features-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  margin-top: 48px;
  align-items: start;
}

.features-layout.features-layout--full {
  display: block;
}

.features-layout.features-layout--full .features-grid {
  grid-template-columns: repeat(3, 1fr);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.feature-card {
  background: var(--c-bg-warm);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  border: 1px solid var(--c-border-light);
  border-top: 3px solid transparent;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-brand);
  border-top-color: var(--c-brand);
}

.feature-screen {
  height: 110px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Mock UI for each feature screen */
.screen-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  width: 100%;
}
.msg-bubble {
  height: 14px;
  border-radius: 10px;
  background: var(--c-brand-light);
}
.msg-bubble.right {
  background: #E3F2FD;
  align-self: flex-end;
  width: 60%;
}
.msg-bubble.left { width: 75%; }
.msg-bubble.short { width: 45%; }

.screen-sns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  width: 100%;
  height: 100%;
}
.sns-thumb {
  border-radius: 4px;
  background: linear-gradient(135deg, #F5DEC0, #E8C49A);
}
.sns-thumb:nth-child(2) { background: linear-gradient(135deg, #C8DED8, #A8C4BC); }
.sns-thumb:nth-child(3) { background: linear-gradient(135deg, #D4C8F0, #B8A8E0); }
.sns-thumb:nth-child(4) { background: linear-gradient(135deg, #F0D4C8, #E0B8A8); }

.screen-ai {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  width: 100%;
}
.ai-line {
  height: 10px;
  border-radius: 5px;
  background: var(--c-brand-light);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.ai-line:nth-child(1) { width: 100%; animation-delay: 0s; }
.ai-line:nth-child(2) { width: 85%; animation-delay: .2s; }
.ai-line:nth-child(3) { width: 95%; animation-delay: .4s; }
.ai-line:nth-child(4) { width: 70%; animation-delay: .6s; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--c-brand);
  background: var(--c-brand-light);
  padding: 3px 8px;
  border-radius: 50px;
  margin-top: 4px;
}

.screen-point {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  width: 100%;
}
.point-big {
  font-size: 28px;
  font-weight: 900;
  color: var(--c-brand);
  line-height: 1;
}
.point-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--c-text-sub);
}
.point-bar {
  width: 80%;
  height: 6px;
  background: var(--c-border);
  border-radius: 3px;
  overflow: hidden;
}
.point-bar-fill {
  height: 100%;
  background: var(--c-brand);
  border-radius: 3px;
  width: 72%;
}

.screen-gift {
  display: flex;
  gap: 6px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.gift-item {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--c-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--c-border);
}

.screen-analytics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  width: 100%;
}
.analytics-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.analytics-label {
  font-size: 8px;
  color: var(--c-text-sub);
  width: 24px;
  flex-shrink: 0;
}
.analytics-bar {
  flex: 1;
  height: 8px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}
.analytics-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--c-brand);
}

.feature-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}
.feature-desc {
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.6;
}

/* Right sidebar */
.features-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.features-sidebar.is-detached {
  display: none;
}

.sidebar-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

.sidebar-box-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--c-text);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--c-brand);
  display: inline-block;
}

/* Flow steps vertical */
.flow-steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flow-step-v {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.flow-step-v-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.flow-step-v-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flow-step-v-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--c-border);
  margin: 4px 0;
}
.flow-step-v:last-child .flow-step-v-line { display: none; }
.flow-step-v-content {
  padding-bottom: 16px;
}
.flow-step-v-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
  margin-top: 6px;
}
.flow-step-v-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  margin-top: 2px;
}

/* Pricing box */
.price-box {
  background: var(--c-brand);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  color: #fff;
  margin-bottom: 16px;
}
.price-initial {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.price-initial-label {
  font-size: 12px;
  font-weight: 700;
  opacity: .85;
}
.price-initial-value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}
.price-initial-unit {
  font-size: 14px;
  font-weight: 700;
  opacity: .85;
}

.price-monthly-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.price-monthly-item {
  background: rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
}
.price-monthly-tag {
  font-size: 10px;
  font-weight: 700;
  opacity: .8;
  margin-bottom: 2px;
}
.price-monthly-value {
  font-size: 16px;
  font-weight: 900;
}
.price-monthly-unit {
  font-size: 10px;
  opacity: .8;
}

.price-note {
  font-size: 12px;
  color: var(--c-text-sub);
  margin-top: 10px;
  line-height: 1.6;
}

.detail-section {
  background: #fff;
}

.detail-section .sidebar-box {
  max-width: 960px;
  margin: 40px auto 0;
}

.homerec-flow-section {
  background: #F8FBFF;
}

.homerec-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: stretch;
}

.homerec-flow-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  position: relative;
}

.homerec-flow-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.homerec-flow-step {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-text-sub);
  text-transform: uppercase;
  line-height: 1;
}

.homerec-flow-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  color: var(--c-brand);
  letter-spacing: -.06em;
  line-height: 1;
}

.homerec-flow-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--c-brand-light);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  margin-bottom: 4px;
}

.homerec-flow-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.homerec-flow-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.35;
}

.homerec-flow-desc {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.75;
}

.homerec-flow-arrow {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(232, 123, 58, .22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  z-index: 2;
}

.homerec-flow-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.homerec-flow-card:last-child .homerec-flow-arrow {
  display: none;
}
.price-support-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-brand-light);
  color: var(--c-brand);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid var(--c-brand);
  margin-bottom: 8px;
}

/* ===========================
   8. Reasons Section
=========================== */
#reasons {
  background: var(--c-bg-warm);
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.reason-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-light);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.reason-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.reason-card:hover::after { transform: scaleX(1); }
.reason-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.reason-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .12;
  position: absolute;
  top: 10px;
  right: 14px;
  line-height: 1;
}
.reason-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 30px;
  border: 2px solid var(--c-brand);
}
.reason-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 10px;
  line-height: 1.45;
}
.reason-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.7;
}

/* ===========================
   9. Cases Section
=========================== */
#cases {
  background: #fff;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.case-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-border-light);
  transition: all .25s ease;
}
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.case-img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.case-img-1 { background: linear-gradient(145deg, #C8A882 0%, #DEC0A0 40%, #F0D8C0 70%, #B89070 100%); }
.case-img-2 { background: linear-gradient(125deg, #8FA880 0%, #B0C8A0 40%, #D0E4C0 70%, #78988A 100%); }
.case-img-3 { background: linear-gradient(155deg, #9898B8 0%, #B8B8D8 40%, #D8D8F0 70%, #8080A8 100%); }

.case-house-svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: .25;
  width: 160px;
}

.case-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--c-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 50px;
}

.case-result {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.case-result-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--c-text-sub);
}
.case-result-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--c-brand);
  line-height: 1.2;
}

.case-body {
  padding: 20px 22px 24px;
  background: #fff;
}
.case-company {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-brand);
  margin-bottom: 6px;
  letter-spacing: .05em;
}
.case-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.case-desc {
  font-size: 12px;
  color: var(--c-text-sub);
  line-height: 1.7;
}

/* ===========================
   10. FAQ Section
=========================== */
#faq {
  background: var(--c-bg);
}

.faq-list {
  max-width: 920px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-light);
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item.open {
  box-shadow: var(--shadow-sm);
  border-color: var(--c-brand);
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.faq-q:hover { background: var(--c-brand-pale); }

.faq-q-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-q-text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}
.faq-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c-brand);
  color: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  transition: all .25s;
  line-height: 1;
}
.faq-item.open .faq-toggle {
  background: var(--c-brand);
  color: #fff;
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-a { max-height: 300px; }
.faq-a-inner {
  display: flex;
  gap: 16px;
  padding: 0 24px 20px;
}
.faq-a-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-bg-warm);
  border: 2px solid var(--c-border);
  color: var(--c-brand);
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-a-text {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.75;
}

/* ===========================
   11. CTA Bottom
=========================== */
#cta-bottom {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 45%, rgba(255,255,255,.74) 60%, rgba(255,255,255,0) 72%),
    url('image/CTA-back.png');
  background-position: left top, right center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, auto 100%;
  padding: clamp(28px, 3.6vw, 44px) 0;
  position: relative;
  overflow: hidden;
}
#cta-bottom::before {
  content: none;
}

.cta-bottom-inner {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  grid-template-areas:
    "title"
    "actions"
    "note";
  row-gap: 14px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  min-height: 210px;
  position: relative;
}

.cta-bottom-text {
  display: contents;
}

.cta-bottom-cheer {
  position: absolute;
  left: clamp(-28px, -1vw, 0px);
  bottom: 0;
  width: clamp(148px, 19vw, 260px);
  height: auto;
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: .95;
}

.cta-bottom-text .section-title {
  grid-area: title;
  text-align: center;
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.42;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
.cta-bottom-note {
  grid-area: note;
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-bottom-actions {
  grid-area: actions;
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ===========================
   12. Footer
=========================== */
#footer {
  background: #fff;
  color: rgba(0,0,0,.65);
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
}

.footer-layout {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 32px;
}

.footer-brand {
  min-width: 0;
}

.footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.footer-logo-img {
  height: 84px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-tagline {
  font-size: 15px;
  color: #000;
  margin-bottom: 8px;
}

.footer-company {
  font-size: 15px;
  color: #000;
  margin-bottom: 12px;
}

.footer-company strong {
  color: #000;
}

.footer-tel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-tel-icon {
  height: 18px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.footer-tel-number {
  font-size: 20px;
  font-weight: 800;
  color: #000;
  letter-spacing: .02em;
  line-height: 1;
}

.footer-address {
  font-size: 15px;
  line-height: 2;
  color: #000;
  font-style: normal;
  margin-bottom: 14px;
}

.footer-sns {
  display: flex;
  gap: 10px;
}
.footer-sns a {
  display: inline-block;
  transition: opacity .15s;
}

.footer-sns a:hover {
  opacity: .7;
}

.footer-sns img {
  height: 32px;
  width: auto;
  display: block;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-nav a {
  font-size: 14px;
  color: #000;
  transition: color .15s;
  line-height: 2.2;
  display: inline-block;
  white-space: nowrap;
}

.footer-nav a:hover {
  opacity: .6;
}

.footer-privacy-icon {
  display: flex;
  justify-content: center;
  padding-block: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.footer-privacy-icon img {
  height: 80px;
  width: auto;
  display: block;
  opacity: .85;
}

.footer-privacy-icon a::after,
.footer-sns a::after {
  display: none;
}

.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-block: 14px;
}

.footer-bottom p {
  font-size: 15px;
  color: #000;
  text-align: center;
}

/* ===========================
   13. Responsive
=========================== */
@media (max-width: 1023px) {
  .problems-grid { grid-template-columns: repeat(3, 1fr); }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .features-layout { grid-template-columns: 1fr; }
  .features-layout.features-layout--full .features-grid { grid-template-columns: repeat(2, 1fr); }
  .features-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-layout { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .homerec-flow-steps { grid-template-columns: repeat(2, 1fr); }
  .homerec-flow-card:nth-child(2n) .homerec-flow-arrow { display: none; }
  .homerec-flow-card:last-child .homerec-flow-arrow { display: none; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }

  .nav-links, .header-btns { display: none; }
  .hamburger { display: flex; }
  .header-inner {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  #hero > .container {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 48px;
    min-height: auto;
  }
  .hero-phones { height: 240px; order: -1; left: -32px; }
  .phone-mockup { width: 130px; }
  .phone-screen { height: 220px; }
  .hero-text {
    padding-left: 0;
    margin-left: 0;
  }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }

  .problems-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .features-layout.features-layout--full .features-grid { grid-template-columns: 1fr; }
  .features-sidebar { display: flex; flex-direction: column; }
  .reasons-grid { grid-template-columns: 1fr 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  #cta-bottom {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 52%, rgba(255,255,255,.72) 100%),
      url('image/CTA-back.png');
    background-position: center top, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, cover;
  }
  .cta-bottom-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "actions"
      "note";
    min-height: auto;
    row-gap: 12px;
  }
  .cta-bottom-cheer {
    width: 112px;
    left: 0;
    opacity: .72;
  }
  .cta-bottom-text .section-title { text-align: center; }
  .cta-bottom-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .footer-layout { grid-template-columns: 1fr; gap: 24px; }
  .homerec-flow-steps { grid-template-columns: 1fr; gap: 14px; }
  .homerec-flow-arrow { display: none; }
}

@media (max-width: 479px) {
  .problems-grid { grid-template-columns: 1fr 1fr; }
  .reasons-grid { grid-template-columns: 1fr; }
  .hero-flow { gap: 8px; }
  .flow-step-icon { width: 72px; height: 72px; font-size: 24px; padding: 10px; }
  .flow-step-label { font-size: 15px; }
  .flow-arrow { font-size: 14px; margin-bottom: 24px; }
}

/* ===========================
   14. Scroll Animations
=========================== */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   15. Compliance Note Box
=========================== */
.compliance-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid transparent; /* animated via ::before */
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 40px;
  max-width: 1040px;
  margin-inline: auto;
  overflow: hidden;
}

.compliance-note-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  margin-top: 2px;
}

.compliance-note-body {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.75;
}

.compliance-note-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
}

/* ===========================
   16. Legacy overrides (kept for CTA)
=========================== */
#about { background: #fff; }
.cta-bottom-actions .btn + .btn { margin-top: 0; }

/* ================================================
   17. Features sidebar — mini-points / plain-list
   (formerly in HTML <style> block)
================================================ */
.mini-points {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.mini-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--c-border);
}
.mini-point-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.mini-point-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-sub);
}
.plain-list {
  display: grid;
  gap: 18px;
}
.plain-item {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border-light);
}
.plain-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.plain-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: 6px;
}
.plain-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
}

/* ================================================
   18. REDESIGNED MIDDLE SECTIONS
================================================ */

/* ---- ABOUT: 3 Pillar Editorial Columns ---- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-border);
}
.pillar-card {
  padding: 56px 40px 52px;
  border-right: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
  transition: background .25s;
}
.pillar-card:last-child { border-right: none; }
.pillar-card:hover { background: rgba(253,246,238,.7); }
.pillar-bg-num {
  font-family: var(--font-display);
  font-size: 130px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .44;
  line-height: 1;
  position: absolute;
  top: 4px;
  right: 10px;
  letter-spacing: -.06em;
  user-select: none;
  pointer-events: none;
}
.pillar-icon-wrap {
  width: 124px;
  height: 124px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.pillar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.5;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.pillar-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.85;
  position: relative;
  z-index: 1;
}

/* ---- PROBLEMS: Dark Editorial ---- */
#problems {
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    url('image/素材/白木目.png') center/cover no-repeat;
  padding: var(--space-section) 0;
}
.prob-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.prob-header .section-label {
  background: #fff;
  color: var(--c-brand);
}
.prob-title {
  color: #111 !important;
  text-align: left;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.3;
}
.prob-sub {
  color: rgba(17,17,17,.76);
  font-size: 14px;
  line-height: 1.9;
  margin-top: 16px;
}
.prob-list {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.prob-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(17,17,17,.12);
}
.prob-item:first-child { border-top: 1px solid rgba(17,17,17,.12); }
.prob-cross {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(17,17,17,.16);
  color: var(--c-brand);
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.prob-text {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  line-height: 1.55;
}

/* ---- SOLUTION: Dramatic Split Panel ---- */
#solution {
  padding: 0;
  overflow: hidden;
}
.sol-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
}
.sol-before,
.sol-after {
  padding: clamp(52px, 7vw, 88px) clamp(36px, 5.5vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.sol-before {
  background: #EDE6DC;
  box-shadow: inset -1px 0 0 rgba(17,17,17,.08);
}
.sol-after  {
  background: var(--c-brand);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.14);
}
.sol-before::before,
.sol-after::before {
  position: absolute;
  top: clamp(12px, 3.2vw, 28px);
  left: clamp(36px, 5.5vw, 88px);
  transform: none;
  font-size: clamp(82px, 11vw, 168px);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.05em;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.sol-before::before {
  content: 'BEFORE';
  color: rgba(17,17,17,.18);
}
.sol-after::before {
  content: 'AFTER';
  color: rgba(255,255,255,.5);
  letter-spacing: 0.02em;
}
.sol-before h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  color: var(--c-text);
  line-height: 1.4;
  margin-top: 82px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.sol-after h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin-top: 82px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.sol-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  position: relative;
  z-index: 1;
}
.sol-before .sol-list li {
  font-size: 15px;
  color: var(--c-text-sub);
  padding-left: 22px;
  position: relative;
  line-height: 1.7;
}
.sol-before .sol-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--c-text-muted);
}
.sol-after .sol-list li {
  font-size: 15px;
  color: rgba(255,255,255,.9);
  padding-left: 26px;
  position: relative;
  line-height: 1.7;
}
.sol-after .sol-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,.75);
  font-weight: 700;
}

/* ---- CONCEPT: Large Editorial ---- */
#concept {
  background: var(--c-bg);
  padding: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}
#concept::before {
  content: 'CONCEPT';
  position: absolute;
  top: clamp(88px, 12vw, 132px);
  left: clamp(220px, 26vw, 380px);
  font-size: clamp(64px, 10.5vw, 148px);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-border);
  opacity: .84;
  letter-spacing: -.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.concept-intro {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.concept-big {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 900;
  color: var(--c-text);
  line-height: 1.55;
  text-align: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.concept-sub {
  font-size: 15px;
  color: var(--c-text-sub);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
  line-height: 1.9;
  position: relative;
  z-index: 1;
}
.concept-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--c-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.concept-principle {
  background: #fff;
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s;
}
.concept-principle:hover { background: var(--c-brand-pale); }
.principle-num {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 900;
  color: var(--c-brand);
  line-height: 1;
  letter-spacing: -.04em;
}
.concept-principle h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
}
.concept-principle p {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.9;
}

/* ---- STORY: Vertical Timeline + Sticky Aside ---- */
#story { background: #fff; }
.story-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.story-scenes {
  display: flex;
  flex-direction: column;
}
.story-scene {
  display: flex;
  gap: 24px;
  padding-bottom: 40px;
}
.story-scene:last-child { padding-bottom: 0; }
.scene-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 52px;
}
.scene-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #D76426;
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 28px rgba(215,100,38,.34);
}
.scene-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: var(--c-border);
  margin: 8px 0;
}
.story-scene:last-child .scene-line { display: none; }
.scene-content { padding-top: 10px; }
.scene-tag {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-brand);
  margin-bottom: 8px;
}
.scene-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  margin-bottom: 8px;
}
.scene-desc {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.9;
}
.story-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.story-aside-card {
  background: var(--c-brand);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
}
.story-aside-eyebrow {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}
.story-aside-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 20px;
}
.story-aside-body {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255,255,255,.85);
  margin-bottom: 20px;
}
.story-aside-note {
  background: rgba(0,0,0,.16);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 15px;
  color: rgba(255,255,255,.76);
  line-height: 1.8;
}

/* ---- FLOW: Connected Journey Steps ---- */
#flow { background: var(--c-bg-warm); }
.flow-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin-top: 48px;
}
.flow-journey::after {
  content: '';
  position: absolute;
  top: 43px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-brand) 10%, var(--c-brand) 90%, transparent);
  opacity: .22;
  pointer-events: none;
}
.flow-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
}
.flow-step-num {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #D76426;
  color: #D76426;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  transition: all .25s;
  box-shadow: 0 10px 24px rgba(215,100,38,.18);
}
.flow-step-item:hover .flow-step-num {
  background: #D76426;
  color: #fff;
  box-shadow: var(--shadow-brand);
  transform: scale(1.1);
}
.flow-step-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--c-brand);
  margin-bottom: 10px;
}
.flow-step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.flow-step-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
}

/* ---- TRUST: 2×2 Left-border Cards ---- */
#trust { background: var(--c-bg-warm); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.trust-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--c-border-light);
  border-left: 4px solid var(--c-brand);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: all .25s;
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.trust-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .56;
  line-height: 1;
  flex-shrink: 0;
  width: 52px;
  text-align: right;
}
.trust-body { flex: 1; }
.trust-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.trust-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  margin-bottom: 8px;
}
.trust-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
}

/* ================================================
   20. v2 REDESIGN — No-Card Editorial Sections
   (Story / Flow / Features / Trust / FAQ)
================================================ */

/* ---- STORY: Magazine editorial with watermark ---- */
#story {
  background: #fff;
  position: relative;
  overflow: hidden;
}
#story::before {
  content: 'STORY';
  position: absolute;
  top: clamp(88px, 12vw, 132px);
  left: clamp(20px, 5vw, 72px);
  font-size: clamp(80px, 14vw, 190px);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-border);
  opacity: .78;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
}

.story-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.story-scenes-editorial { display: flex; flex-direction: column; }

.scene-ed {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-top: 1px solid var(--c-border-light);
}
.scene-ed:last-child { border-bottom: 1px solid var(--c-border-light); }

.scene-ed-num {
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .5;
  line-height: 1;
  letter-spacing: -.04em;
  user-select: none;
  margin-top: -6px;
}

.scene-ed-tag {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-brand);
  margin-bottom: 8px;
}

.scene-ed-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  margin-bottom: 10px;
}

.scene-ed-desc {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.9;
}

/* Story right — pure typography pull quote */
.story-pullquote {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 36px 0;
}

.pullquote-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--c-brand);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pullquote-label::after {
  content: '';
  display: block;
  height: 1px;
  flex: 1;
  background: var(--c-brand);
  opacity: .28;
}

.pullquote-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.55;
  color: var(--c-text);
  margin-bottom: 24px;
}

.pullquote-body {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.9;
  margin-bottom: 28px;
}

.pullquote-accent {
  display: block;
  padding: 14px 20px;
  border-left: 3px solid var(--c-brand);
  background: var(--c-brand-light);
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
}

/* ---- FLOW: Editorial chapters (4-quadrant grid lines) ---- */
#flow {
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
#flow::before {
  content: 'FLOW';
  position: absolute;
  top: clamp(88px, 12vw, 132px);
  left: clamp(20px, 5vw, 72px);
  font-size: clamp(80px, 14vw, 190px);
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--c-border);
  opacity: .8;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
}

.flow-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  position: relative;
  z-index: 1;
}

.flow-ed-item {
  padding: 40px 44px 40px 0;
  border-top: 1px solid var(--c-border-light);
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.flow-ed-item:hover { background: rgba(232,123,58,.025); }
.flow-ed-item:nth-child(2n) {
  padding-left: 44px;
  padding-right: 0;
  border-left: 1px solid var(--c-border-light);
}
.flow-ed-item:nth-child(3),
.flow-ed-item:nth-child(4) {
  border-bottom: 1px solid var(--c-border-light);
}

.flow-ed-num {
  display: block;
  font-family: var(--font-display);
  font-size: 108px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .46;
  line-height: 1;
  letter-spacing: -.06em;
  margin-top: -18px;
  margin-bottom: -38px;
  user-select: none;
  pointer-events: none;
}

.flow-ed-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--c-brand);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.flow-ed-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
  margin-top: 34px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.flow-ed-desc {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.85;
  position: relative;
  z-index: 1;
}

/* ---- FEATURES: Open grid (no card backgrounds) ---- */
#features {
  background: #fff;
  position: relative;
}

.features-open-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
}

.feature-open-item {
  padding: 40px 32px 36px;
  border-top: 1px solid var(--c-border-light);
  transition: background .2s;
  position: relative;
}
.feature-open-item:hover { background: var(--c-brand-pale); }
.feature-open-item:nth-child(n+4) { border-bottom: 1px solid var(--c-border-light); }
.feature-open-item:not(:nth-child(3n)) { border-right: 1px solid var(--c-border-light); }

.feature-open-icon {
  width: 118px;
  height: 118px;
  border-radius: 28px;
  background: var(--c-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 24px;
  overflow: hidden;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.feature-open-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 10px;
  line-height: 1.4;
}

.feature-open-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.9;
  max-width: 26em;
}

/* Features bottom — horizontal rule divides, 2 col prose */
.features-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--c-border-light);
}

.features-note-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-brand);
  display: inline-block;
}

.point-rule-list { display: flex; flex-direction: column; gap: 12px; }

.point-rule-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.8;
}

.point-rule-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-brand-light);
  color: var(--c-brand-dark);
  font-size: 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.effect-list { display: flex; flex-direction: column; gap: 18px; }

.effect-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 5px;
}

.effect-item-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
  padding-left: 12px;
  border-left: 2px solid var(--c-border);
}

/* ---- TRUST: Full 2×2 grid ruled lines, no card boxes ---- */
#trust {
  background: var(--c-bg-warm);
  position: relative;
  overflow: hidden;
}

.trust-editorial {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 56px;
  position: relative;
  z-index: 1;
}

.trust-ed-item {
  padding: 44px 40px;
  border-top: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.trust-ed-item:hover { background: rgba(255,255,255,.7); }
.trust-ed-item:nth-child(3),
.trust-ed-item:nth-child(4) { border-bottom: 1px solid var(--c-border); }
.trust-ed-item:nth-child(odd) { border-right: 1px solid var(--c-border); }

.trust-ed-bg-num {
  position: absolute;
  top: -12px;
  right: 12px;
  font-family: var(--font-display);
  font-size: 130px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: .42;
  line-height: 1;
  letter-spacing: -.04em;
  user-select: none;
  pointer-events: none;
}

.trust-ed-icon {
  width: 124px;
  height: 124px;
  margin-bottom: 24px;
}

.trust-ed-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.45;
  margin-bottom: 10px;
}

.trust-ed-desc {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.8;
  max-width: 28em;
}

/* ---- FAQ: Editorial separator-only accordion ---- */
#faq {
  background: #fff;
}

.faq-editorial {
  max-width: 880px;
  margin: 56px auto 0;
  position: relative;
  z-index: 1;
}

.faq-ed-item {
  border-top: 1px solid var(--c-border-light);
  overflow: visible;
}
.faq-ed-item:last-child { border-bottom: 1px solid var(--c-border-light); }

.faq-ed-q {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 20px;
  align-items: start;
  padding: 26px 0;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
  position: relative;
  z-index: 1;
  background: #fff;
}
.faq-ed-q:hover { opacity: .75; }

.faq-ed-q-label {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: var(--c-brand);
  opacity: 1;
  line-height: 1;
  margin-top: 2px;
  user-select: none;
}

.faq-ed-q-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.55;
  padding-top: 5px;
}

.faq-ed-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
}
.faq-ed-toggle svg {
  width: 14px;
  height: 14px;
  stroke: var(--c-brand);
  stroke-width: 2;
  fill: none;
  transition: transform .25s;
  stroke-linecap: round;
}
.faq-ed-item.open .faq-ed-toggle svg { transform: rotate(45deg); }

.faq-ed-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  position: relative;
  z-index: 0;
}
.faq-ed-item.open .faq-ed-a { max-height: 320px; }

.faq-ed-a-inner {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  padding-bottom: 30px;
}

.faq-ed-a-label {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: var(--c-text);
  opacity: .62;
  line-height: 1;
  margin-top: 2px;
  user-select: none;
}

.faq-ed-a-text {
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.9;
  padding-top: 4px;
}

/* ================================================
   19. Responsive for redesigned sections
================================================ */
@media (max-width: 1023px) {
  /* About */
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card { border-right: none; border-bottom: 1px solid var(--c-border); }
  .pillar-card:last-child { border-bottom: none; }

  /* Problems */
  .prob-inner { grid-template-columns: 1fr; gap: 40px; }
  .prob-title { font-size: clamp(26px, 5vw, 36px); }

  /* Concept */
  .concept-principles { grid-template-columns: 1fr; }

  /* Story */
  .story-editorial { grid-template-columns: 1fr; gap: 48px; }
  .story-pullquote { position: static; padding: 0; }

  /* Flow */
  .flow-editorial { grid-template-columns: 1fr; }
  .flow-ed-item { padding: 32px 0; border-left: none !important; }
  .flow-ed-item:nth-child(4) { border-bottom: 1px solid var(--c-border-light); }

  /* Features open grid */
  .features-open-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-open-item:nth-child(3n) { border-right: 1px solid var(--c-border-light); }
  .feature-open-item:nth-child(2n) { border-right: none; }
  .feature-open-item:nth-child(n+5) { border-bottom: 1px solid var(--c-border-light); }
  .feature-open-item:nth-child(n+4) { border-bottom: none; }
  .feature-open-item:nth-child(n+5) { border-bottom: 1px solid var(--c-border-light); }
  .features-notes { grid-template-columns: 1fr; gap: 40px; }

  /* Trust */
  .trust-editorial { grid-template-columns: 1fr; }
  .trust-ed-item { border-right: none !important; }
  .trust-ed-item:nth-child(2) { border-top: none; }
  .trust-ed-item:nth-child(4) { border-bottom: 1px solid var(--c-border); }
}

@media (max-width: 767px) {
  /* Solution */
  .sol-split { grid-template-columns: 1fr; }
  .sol-before, .sol-after { padding: 40px 24px; }

  /* Story */
  .scene-ed { grid-template-columns: 48px 1fr; gap: 16px; }
  .scene-ed-num { font-size: 52px; }

  /* Flow */
  .flow-ed-item { padding: 28px 0; }
  .flow-ed-num { font-size: 76px; margin-bottom: -18px; }

  /* About */
  .pillar-card { padding: 36px 28px 32px; }
  .pillar-icon-wrap { width: 96px; height: 96px; margin-bottom: 24px; }
  .pillar-title { font-size: 16px; }
  .pillar-desc { font-size: 15px; }

  /* Concept */
  .concept-principle { padding: 36px 28px; }

  /* Features */
  .features-open-grid { grid-template-columns: 1fr; }
  .feature-open-item { border-right: none !important; }
  .feature-open-item:nth-child(n) { border-bottom: none; }
  .feature-open-item:last-child { border-bottom: 1px solid var(--c-border-light); }
  .feature-open-icon { width: 92px; height: 92px; padding: 14px; margin-bottom: 20px; }
  .feature-open-title { font-size: 15px; }
  .feature-open-desc { font-size: 15px; }

  /* Trust */
  .trust-ed-item { padding: 32px 24px; }
  .trust-ed-icon { width: 96px; height: 96px; margin-bottom: 20px; }
  .trust-ed-title { font-size: 16px; }
  .trust-ed-desc { font-size: 12px; }
  .compliance-note-icon { width: 64px; height: 64px; }
}

@media (max-width: 479px) {
  .pillar-card { padding: 28px 20px; }
  .scene-ed { gap: 12px; }
  .flow-ed-item { padding: 24px 0; }
}

/* ================================================
   21. SIGNATURE ANIMATIONS & INTERACTIONS
   "かなりこだわってる" level polish
================================================ */

/* --- Scroll progress bar --- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-brand-dark), var(--c-brand), #F5A96A);
  z-index: 10000;
  width: 0%;
  pointer-events: none;
  transition: width .08s linear;
}

/* --- Floating watermark drift (gives living depth) --- */
@keyframes wm-drift-r {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  30%  { transform: translateY(-50%) translateX(-11px); }
  65%  { transform: translateY(-50%) translateX(8px); }
}
@keyframes wm-drift-l {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  35%  { transform: translateY(-50%) translateX(10px); }
  70%  { transform: translateY(-50%) translateX(-8px); }
}
@keyframes wm-drift-c {
  0%, 100% { transform: translate(-50%, -50%); }
  50%  { transform: translate(-50%, -50%) translateX(-14px); }
}
#story::before   { animation: wm-drift-r 22s ease-in-out infinite; }
#flow::before    { animation: wm-drift-l 26s ease-in-out infinite; }
#concept::before { animation: wm-drift-c 28s ease-in-out infinite; }

/* --- Section title: line-by-line clip reveal --- */
.title-line {
  display: block;
  overflow: hidden;
  line-height: 1.42;
}
.title-line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.title-line:nth-child(2) .title-line-inner { transition-delay: .12s; }
.title-line:nth-child(3) .title-line-inner { transition-delay: .24s; }
.section-title.in-view .title-line-inner    { transform: translateY(0); }

/* Section label shimmer: removed */

/* --- Flow-ed-item: orange top-bar draws left→right on in-view --- */
.flow-ed-item { position: relative; overflow: hidden; }
.flow-ed-item::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 0;
  background: var(--c-brand);
  transition: width 1.15s cubic-bezier(.16, 1, .3, 1);
  z-index: 2;
}
.flow-ed-item.in-view::before { width: 100%; }

/* --- Scene-ed: orange accent tab expands on in-view --- */
.scene-ed { position: relative; }
.scene-ed::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 0;
  background: var(--c-brand);
  transition: width .75s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .35s;
}
.scene-ed.in-view::before { width: 52px; }

/* --- Feature icon: spring-lift on hover --- */
.feature-open-icon {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .22s, box-shadow .22s;
}
.feature-open-item:hover .feature-open-icon {
  transform: translateY(-6px) scale(1.12);
  background: var(--c-brand);
  box-shadow: 0 8px 20px rgba(232,123,58,.3);
}

/* --- Pillar card: bottom bar grows on hover --- */
.pillar-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--c-brand);
  transition: width .42s cubic-bezier(.16, 1, .3, 1);
}
.pillar-card:hover::after { width: 100%; }

/* --- Prob × : spring rotate on hover --- */
.prob-cross {
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .22s, border-color .22s;
}
.prob-item:hover .prob-cross {
  transform: scale(1.2) rotate(-12deg);
  background: rgba(232,123,58,.18);
  border-color: rgba(232,123,58,.55);
}

/* --- FAQ Q label: blooms when item opens --- */
.faq-ed-q-label {
  transition: opacity .3s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: center bottom;
}
.faq-ed-item.open .faq-ed-q-label {
  transform: scale(1.15);
}

/* --- Trust items: alternating slide-in direction --- */
.fade-from-left {
  opacity: 0;
  transform: translateX(-20px) translateY(10px);
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
}
.fade-from-right {
  opacity: 0;
  transform: translateX(20px) translateY(10px);
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
}
.fade-from-left.in-view,
.fade-from-right.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- Story pullquote: subtle entrance slide --- */
.story-pullquote {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .2s;
}
.story-pullquote.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* --- Pullquote accent bar: height grows on in-view --- */
.pullquote-label::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--c-brand);
  vertical-align: middle;
  margin-right: 0;
  transition: width .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .5s;
}
.story-pullquote.in-view .pullquote-label::before { width: 28px; margin-right: 10px; }

/* --- Concept principles: stagger + scale-up from slightly below --- */
.concept-principle {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
}
.concept-principle.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Compliance note: left border grows vertically --- */
.compliance-note {
  position: relative;
}
.compliance-note::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px;
  height: 0;
  background: var(--c-brand);
  transition: height .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: .1s;
}
.compliance-note.in-view::before { height: 100%; }

/* --- Problem items: stagger from right --- */
.prob-item {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.prob-item.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* --- Pillar grid: scale-in from slightly below --- */
.pillar-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1), background .25s;
}
.pillar-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Remove .fade-up from trust/prob/pillar/concept since now handled separately */
/* Use a no-op style for .fade-up on these to avoid double-init issues */

/* ================================================
   22. INTERLUDE — Dark visual break
   (between #concept and #story)
================================================ */
#interlude {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('image/素材/住宅街.png') center/cover no-repeat;
  padding: clamp(64px, 10vw, 112px) 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle warm glow at center */
#interlude::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 90vw);
  height: min(720px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,123,58,.07) 0%, transparent 66%);
  pointer-events: none;
}

/* Decorative top rule */
#interlude::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(36px, 5vw, 56px);
  background: linear-gradient(to bottom, transparent, rgba(232,123,58,.3));
  pointer-events: none;
}

.interlude-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.interlude-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .26em;
  color: var(--c-brand);
  margin-bottom: 36px;
  display: block;
}

.interlude-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 6.5vw, 84px);
  font-weight: 900;
  color: #fff;
  line-height: 1.26;
  letter-spacing: -.03em;
  margin-bottom: 44px;
}

.interlude-accent {
  color: var(--c-brand);
}

.interlude-divider {
  display: none;
}

.interlude-body {
  font-size: clamp(14px, 1.5vw, 16px);
  color: #fff;
  line-height: 2.1;
  letter-spacing: .01em;
}

/* Animation: staggered children enter on #interlude.in-view */
#interlude .interlude-label,
#interlude .interlude-headline,
#interlude .interlude-divider,
#interlude .interlude-body {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .82s cubic-bezier(.16, 1, .3, 1),
              transform .82s cubic-bezier(.16, 1, .3, 1);
}
#interlude .interlude-headline { transition-delay: .10s; }
#interlude .interlude-divider  { transition-delay: .28s; }
#interlude .interlude-body     { transition-delay: .42s; }

#interlude.in-view .interlude-label,
#interlude.in-view .interlude-headline,
#interlude.in-view .interlude-divider,
#interlude.in-view .interlude-body {
  opacity: 1;
  transform: translateY(0);
}

#interlude.in-view .interlude-body { opacity: 1; }

@media (max-width: 767px) {
  #interlude { padding: clamp(64px, 14vw, 100px) 20px; }
  .interlude-headline { letter-spacing: -.02em; }
}