/* ============================
   RASHICLE LP — style.css
   LiftKit Golden Ratio Token System
   ============================ */

/* ========================================
   GOLDEN RATIO TOKENS
   PHI = 1.618033988749895
   ======================================== */
:root {
  /* --- Typography Scale (base: 1rem = 18px × phi^n) --- */
  --fs-display1: 4.236rem;   /* 76.2px | phi^3   — Hero RASHICLE ロゴ */
  --fs-display2: 2.618rem;   /* 47.1px | phi^2   — Final CTA見出し */
  --fs-title1:   2.058rem;   /* 37.0px | phi^1.5 — セクション見出し */
  --fs-title2:   1.618rem;   /* 29.1px | phi^1   — VP formula、タグライン */
  --fs-title3:   1.272rem;   /* 22.9px | phi^0.5 — カード見出し */
  --fs-heading:  1.125rem;   /* 20.3px | phi^0.25— 中見出し */
  --fs-body:     1rem;       /* 18px   | base    — 本文 */
  --fs-callout:  0.889rem;   /* 16px   | 補助テキスト（body系を底上げ） */
  --fs-label:    0.722rem;   /* 13px   | ラベル */
  --fs-caption:  0.618rem;   /* 11.1px | 極小キャプション */

  /* --- Line Height (phi-based) --- */
  --lh-tight:   1.128;    /* phi^(1/4) — ロゴ・大見出し */
  --lh-normal:  1.272;    /* phi^(1/2) — 小見出し・カード */
  --lh-relaxed: 1.618;    /* phi       — 本文 */
  --lh-loose:   2.0;      /* キャッチコピー・リード文 */

  /* --- Spacing Scale (phi^n, base: 1rem = 16px) --- */
  --sp-2xs: 0.236rem;    /* 3.8px  | /phi^3 */
  --sp-xs:  0.382rem;    /* 6.1px  | /phi^2 */
  --sp-sm:  0.618rem;    /* 9.9px  | /phi   */
  --sp-md:  1rem;        /* 16px   | base   */
  --sp-lg:  1.618rem;    /* 25.9px | phi    */
  --sp-xl:  2.618rem;    /* 41.9px | phi^2  */
  --sp-2xl: 4.236rem;    /* 67.8px | phi^3  */
  --sp-3xl: 6.854rem;    /* 109.7px| phi^4  */

  /* --- Golden Ratio Layout --- */
  --ratio-major: 61.8%;
  --ratio-minor: 38.2%;
  --max-width: 1200px;

  /* --- Border Radius (phi-based) --- */
  --radius-sm: 0.382rem;   /* 6.1px */
  --radius-md: 0.618rem;   /* 9.9px */
  --radius-lg: 1rem;       /* 16px */

  /* --- Colors --- */
  --orange: #FF5500;
  --orange-deep: #D84800;
  --orange-fill: rgba(210, 65, 0, 0.35);
  --orange-fill-light: rgba(210, 65, 0, 0.2);
  --lavender: #B8A0D8;
  --lavender-light: #C4B0E0;
  --cream-bg: #FAF7F0;
  --cream-card: #F5F1E8;
  --cream-border: #EDE7DA;
  --text-dark: #1E1610;
  --text-body: #4A3F33;
  --text-muted: #8A7E70;
  --white: #FFFFFF;
  --dark-bg: #1A1610;

  /* --- Fonts --- */
  --font-logo: 'Nunito Sans', sans-serif;
  --font-heading: 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-en: 'DM Sans', sans-serif;

  /* --- Section Padding --- */
  --section-py: var(--sp-2xl);   /* ~68px */
  --section-px: 5rem;            /* 80px */
  --header-height: 4rem;         /* 64px */
}

/* ========================================
   RESET & BASE
   ======================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Responsive line breaks */
.sp-only { display: none; }
@media (max-width: 768px) { .sp-only { display: inline; } .pc-only { display: none; } }

html {
  font-size: 18px; /* 1rem = 18px (LiftKit base) */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 18px; /* base: 18px — 1rem = 18px */
  line-height: var(--lh-relaxed);
  color: var(--text-dark);
  background: var(--cream-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ========================================
   UTILITY
   ======================================== */
.inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

/* Accessibility: visually hidden but readable by screen readers / crawlers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sec-en {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--orange);
  margin-bottom: var(--sp-md);    /* 16px — ENラベル→見出し */
  text-align: center;
}

.sec-title {
  font-family: var(--font-heading);
  font-size: var(--fs-title1);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-lg);    /* 26px — 見出し→リード文 */
  text-align: center;
}

.sec-lead {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-xl);    /* 42px — リード文→コンテンツ */
  text-align: center;
}

.sec-lead:empty {
  margin-bottom: var(--sp-lg);    /* 26px — 空のリード文は詰める */
}

/* --- CTA Button --- */
.btn-cta {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  padding: var(--sp-lg) var(--sp-xl);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  background: var(--orange-deep);
}

.btn-cta--white {
  background: var(--white);
  color: var(--orange);
}

.btn-cta--white:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
}

.btn-cta--outline {
  background: transparent;
  color: var(--orange);
  border: 1.5px solid var(--orange);
}

.btn-cta--outline:hover {
  background: var(--orange);
  color: var(--white);
}

.cta-note {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-top: var(--sp-sm);
  letter-spacing: 1px;
}

/* ========================================
   #0 HEADER
   ======================================== */
.header {
  background: var(--orange);
  padding: 0 var(--sp-xl);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s;
}

.header--transparent {
  background: rgba(255, 85, 0, 0.85);
}

.header__logo {
  font-family: var(--font-logo);
  font-size: var(--fs-heading);
  font-weight: 900;
  color: var(--white);
  letter-spacing: 2px;
}

.header__nav {
  display: flex;
  gap: var(--sp-lg);
  align-items: center;
}

.header__nav a {
  font-family: var(--font-body);
  font-size: var(--fs-callout);
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s;
}

.header__nav a:hover {
  color: var(--white);
}

.header__nav-cta {
  background: var(--white);
  color: var(--orange) !important;
  padding: var(--sp-xs) var(--sp-lg);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* ========================================
   #1 HERO
   ======================================== */
.hero {
  background: var(--orange);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--sp-2xl) var(--sp-xl);
}

/* --- Hero SVG (generated by hero-animation.js) --- */
.hero__svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* --- Hero Content --- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  font-family: var(--font-logo);
  font-size: var(--fs-display1);
  font-weight: 900;
  color: var(--white);
  letter-spacing: 5px;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-xs);
}

.hero__logo-ja {
  font-family: var(--font-body);
  font-size: var(--fs-title2);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 10px;
  margin-bottom: var(--sp-xl);
}

.hero__tagline {
  font-family: var(--font-heading);
  font-size: var(--fs-title2);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: var(--lh-loose);
  letter-spacing: 1px;
  margin-bottom: var(--sp-2xl);
}

.hero .cta-note {
  color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   #2 EMPATHY
   ======================================== */
.empathy {
  background: var(--white);
  padding: var(--section-py) var(--section-px);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.pain-card {
  background: var(--cream-bg);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-md);
  padding: var(--sp-xl) var(--sp-lg);
  position: relative;
  overflow: hidden;
}

.pain-card__enso {
  position: absolute;
  top: calc(-1 * var(--sp-lg));
  right: calc(-1 * var(--sp-lg));
  width: 100px; height: 100px;
  opacity: 0.06;
}

.pain-card__num {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: var(--sp-sm);
}

.pain-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-sm);
}

.pain-card__quote {
  font-size: var(--fs-callout);
  color: var(--orange-deep);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-md);
  min-height: calc(var(--fs-callout) * var(--lh-relaxed) * 2); /* 2行分確保 */
}

.pain-card__desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.empathy__close {
  text-align: center;
  margin-top: var(--sp-xl);
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}

/* ========================================
   #2.5 VOICE — あなたのことかもしれない
   ======================================== */
.voice {
  background: var(--cream-bg);
  padding: var(--section-py) var(--section-px);
}

.voice-list {
  max-width: 700px;
  margin: 0 auto;
}

.voice-item {
  font-size: var(--fs-title3);
  font-weight: 500;
  color: var(--text-dark);
  line-height: var(--lh-relaxed);
  padding: var(--sp-xl) 0;
  border-bottom: 1px solid var(--cream-border);
  padding-left: var(--sp-2xl);
  position: relative;
}

.voice-item::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: var(--sp-md);
  font-family: var(--font-en);
  font-size: var(--fs-display2);
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
}

.voice-item:last-child {
  border-bottom: none;
}

/* ========================================
   #3 BEFORE/AFTER
   ======================================== */
.ba {
  background: var(--cream-bg);
  padding: var(--section-py) var(--section-px);
  position: relative;
  overflow: hidden;
}

.ba__bg-ring {
  position: absolute;
  top: calc(-1 * var(--sp-3xl));
  right: calc(-1 * var(--sp-2xl));
  width: 450px; height: 450px;
  border-radius: 50%;
  border: 2px solid var(--lavender);
  opacity: 0.08;
  animation: drift-a 18s ease-in-out infinite;
  pointer-events: none;
}

.stats-row {
  display: flex;
  gap: var(--sp-2xl);
  margin-bottom: var(--sp-xl);
  position: relative;
  z-index: 1;
}

.stat__num {
  font-family: var(--font-en);
  font-size: var(--fs-display2);
  font-weight: 300;
  color: var(--orange);
  line-height: var(--lh-tight);
}

.stat__label {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-top: var(--sp-xs);
}

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  position: relative;
  z-index: 1;
}

.ba-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--sp-xl);
  border: 1px solid var(--cream-border);
}

.ba-card__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  min-height: 3em;
}

.ba-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ba-card__meta {
  font-size: var(--fs-callout);
  color: var(--text-muted);
}

.ba-card__meta strong {
  color: var(--text-dark);
  font-weight: 500;
}

.ba-card__label {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: var(--sp-2xs);
}

.ba-card__label--before { color: var(--text-muted); }
.ba-card__label--after { color: var(--orange); }

.ba-card__before,
.ba-card__after {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
  padding: var(--sp-sm) 0;
  min-height: 7em;
}

.ba-card__before {
  color: var(--text-muted);
  border-bottom: 1px solid var(--cream-border);
}

.ba-card__after { color: var(--text-dark); }

.ba-card__point {
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
  border-left: 3px solid var(--orange);
  font-size: var(--fs-callout);
  color: var(--text-body);
  min-height: 4.5em;
  font-weight: 400;
  line-height: var(--lh-relaxed);
}

.ba-card__point-label {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--orange);
  display: block;
  margin-bottom: var(--sp-2xs);
}

/* ========================================
   #4 VALUE PROPOSITION
   ======================================== */
.vp {
  background: var(--white);
  padding: var(--section-py) var(--section-px);
}

/* VP Statement */
.vp__statement {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--sp-xl);
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-loose);
}

.vp__statement p {
  margin-bottom: var(--sp-lg);
}

.vp__statement p:last-child {
  margin-bottom: 0;
}

/* Perspective Cards */
.perspective-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

.perspective-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-md);
  padding: var(--sp-xl) var(--sp-xl);
}

.perspective-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: var(--sp-md);
}

.perspective-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.perspective-card__desc {
  font-size: var(--fs-callout);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}

.vp__concept {
  text-align: center;
  padding: var(--sp-xl);
  background: var(--cream-bg);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-xl);
  position: relative;
  overflow: hidden;
}

.vp__concept-ring {
  position: absolute;
  width: 300px; height: 300px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--lavender);
  opacity: 0.1;
}

.vp__formula {
  font-family: var(--font-heading);
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-sm);
  position: relative;
  z-index: 1;
}

.vp__formula span {
  color: var(--orange);
  font-family: var(--font-logo);
  font-weight: 900;
}

.vp__desc {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  position: relative;
  z-index: 1;
}

.strength-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

.strength-item {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-lg);
  background: var(--cream-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream-border);
}

.strength-item--wide { grid-column: span 2; }

.strength-item__num {
  font-family: var(--font-en);
  font-size: var(--fs-title2);
  font-weight: 300;
  color: var(--orange);
  flex-shrink: 0;
  width: 2.25rem;
}

.strength-item__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-xs);
}

.strength-item__desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* --- Competition Table --- */
.comp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-xl);
  font-size: var(--fs-callout);
}

.comp-table th,
.comp-table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--cream-border);
}

.comp-table th {
  font-weight: 600;
  color: var(--text-dark);
  background: var(--cream-bg);
  font-size: var(--fs-callout);
}

.comp-table td { color: var(--text-body); }

.comp-table tr:last-child {
  background: rgba(255, 85, 0, 0.04);
  font-weight: 500;
}

.comp-table tr:last-child td { color: var(--orange); }

/* SP Card version (hidden on desktop) */
.comp-cards {
  display: none;
}

.comp-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-md);
}

.comp-card--highlight {
  border-color: var(--orange);
  border-width: 2px;
}

.comp-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.comp-card--highlight .comp-card__name {
  color: var(--orange);
}

.comp-card__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-xs) var(--sp-md);
}

.comp-card__list dt {
  font-size: var(--fs-callout);
  font-weight: 600;
  color: var(--text-muted);
}

.comp-card__list dd {
  font-size: var(--fs-callout);
  color: var(--text-body);
}

.comp-card--highlight .comp-card__list dd {
  color: var(--orange);
  font-weight: 500;
}

/* ========================================
   #4.5 FOUNDER — サービス開発者の想い
   ======================================== */
.founder {
  background: var(--white);
  padding: var(--section-py) var(--section-px);
}

.founder__photo {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.founder__photo img {
  width: 100%;
  max-width: 720px;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin: 0 auto;
}

.founder__profile {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.founder__name {
  font-family: var(--font-heading);
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-2xs);
}

.founder__role {
  font-size: var(--fs-callout);
  color: var(--text-muted);
}

.founder__message {
  max-width: 780px;
  margin: 0 auto;
}

.founder__message p {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-md);
}

.founder__message p:last-child {
  margin-bottom: var(--sp-lg);
}

.founder__message strong {
  color: var(--orange-deep);
  font-weight: 700;
}

.founder__cta {
  text-align: center;
}

.founder__link {
  display: inline-block;
  font-size: var(--fs-callout);
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.5px;
  transition: opacity 0.3s;
}

.founder__link:hover {
  opacity: 0.7;
}

/* ========================================
   #5 TRUST
   ======================================== */
.trust {
  background: var(--cream-bg);
  padding: var(--section-py) var(--section-px);
}

.trust__il-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}

.trust__il-item {
  padding: var(--sp-lg);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream-border);
}

.trust__il-label {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: var(--sp-xs);
  text-align: center;
}

.trust__il-title {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-xs);
  text-align: center;
}

.trust__il-desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* Company Block */
.trust__company {
  display: flex;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-2xl);
}

.trust__company-photo {
  flex-shrink: 0;
}

.trust__company-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trust__company-name {
  font-family: var(--font-heading);
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-xs);
}

.trust__company-mission {
  font-size: var(--fs-body);
  color: var(--text-body);
  font-style: italic;
  margin-bottom: var(--sp-lg);
}

.trust__company-bullets li {
  font-size: var(--fs-callout);
  color: var(--text-body);
  padding: var(--sp-xs) 0;
  padding-left: var(--sp-lg);
  position: relative;
  line-height: var(--lh-relaxed);
}

.trust__company-bullets li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* --- Coach Cards --- */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
}

.coach-card { text-align: center; }

.coach-card__photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--cream-card);
  margin: 0 auto var(--sp-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px dashed var(--cream-border);
  font-size: var(--fs-callout);
  color: var(--text-muted);
  font-family: var(--font-en);
}

.coach-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.coach-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-2xs);
}

.coach-card__role {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-bottom: var(--sp-xs);
}

.coach-card__desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* ========================================
   #6 PLANS
   ======================================== */
.plans {
  background: var(--white);
  padding: var(--section-py) var(--section-px);
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  max-width: 900px;
  margin: 0 auto;
}

.plan-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-xl);
  display: flex;
  flex-direction: column;
}

.plan-card--recommended {
  border-color: var(--orange);
  border-width: 2px;
  position: relative;
}

.plan-card--recommended::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: calc(-1 * var(--sp-sm));
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: 9999px;
}

.plan-card__name {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--orange);
  margin-bottom: var(--sp-xs);
}

.plan-card__price {
  font-family: var(--font-en);
  font-size: var(--fs-display2);
  font-weight: 300;
  color: var(--text-dark);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2xs);
}

.plan-card__price-note {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-bottom: var(--sp-lg);
}

.plan-card__desc {
  font-size: var(--fs-callout);
  color: var(--text-body);
  margin-bottom: var(--sp-lg);
  line-height: var(--lh-relaxed);
}

.plan-card__features {
  margin-bottom: var(--sp-lg);
  flex-grow: 1;
}

.plan-card__features li {
  font-size: var(--fs-callout);
  color: var(--text-body);
  padding: var(--sp-xs) 0;
  padding-left: var(--sp-lg);
  position: relative;
  line-height: var(--lh-relaxed);
}

.plan-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--sp-xs) + 0.5em);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.3;
}

.plan-cta { display: block; text-align: center; }

.plans__note {
  text-align: center;
  margin-top: var(--sp-xl);
}

.plans__note p {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-bottom: var(--sp-2xs);
}

/* ========================================
   #7 FLOW
   ======================================== */
.flow {
  background: var(--cream-bg);
  padding: var(--section-py) var(--section-px);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  justify-content: center;
}

.flow-step {
  text-align: center;
  padding: var(--sp-lg) var(--sp-md);
  position: relative;
}

.flow-step::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--sp-xs));
  top: 2.25rem;
  width: var(--sp-md);
  height: 2px;
  background: var(--cream-border);
}

.flow-step:last-child::after { display: none; }

.flow-step__num {
  font-family: var(--font-en);
  font-size: var(--fs-title1);
  font-weight: 300;
  color: var(--orange);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-sm);
}

.flow-step__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-xs);
}

.flow-step__emotion {
  font-size: var(--fs-callout);
  color: var(--orange);
  font-weight: 500;
  margin-bottom: var(--sp-xs);
}

.flow-step__desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* ========================================
   #8 FAQ
   ======================================== */
.faq {
  background: var(--white);
  padding: var(--section-py) var(--section-px);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--cream-border);
}

.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-lg) 0;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-dark);
}

.faq-item__icon {
  font-size: var(--fs-title3);
  color: var(--text-muted);
  font-weight: 300;
  transition: transform 0.3s;
  flex-shrink: 0;
  margin-left: var(--sp-md);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  font-size: var(--fs-callout);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}

.faq-item__a-inner {
  padding: 0 0 var(--sp-lg);
}

.faq-item.is-open .faq-item__a {
  max-height: 500px;
}

/* ========================================
   #8.5 法人問い合わせ
   ======================================== */
.corporate-cta {
  padding: var(--sp-xl) var(--section-px);
  background: var(--cream-bg);
}

.corporate-cta__block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl);
  padding: var(--sp-lg) var(--sp-xl);
  border: 1px solid var(--cream-border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.corporate-cta__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-2xs);
}

.corporate-cta__desc {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

.corporate-cta__btn {
  flex-shrink: 0;
  display: inline-block;
  padding: var(--sp-sm) var(--sp-lg);
  border: 2px solid var(--orange);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-callout);
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}

.corporate-cta__btn:hover {
  background: var(--orange);
  color: var(--white);
  animation: none;
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.3); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(255, 85, 0, 0); }
}

.corporate-cta__btn {
  animation: cta-pulse 2.5s ease-in-out infinite;
}

/* ========================================
   #9 FINAL CTA
   ======================================== */
.final-cta {
  background: var(--orange);
  padding: var(--sp-3xl) var(--section-px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Final CTA SVG (generated by hero-animation.js) */

.final-cta__main {
  font-family: var(--font-heading);
  font-size: var(--fs-display2);
  font-weight: 700;
  color: var(--white);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-lg);
  position: relative;
  z-index: 1;
}

.final-cta__sub {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-xs);
  position: relative;
  z-index: 1;
}

.final-cta__accent {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-xl);
  position: relative;
  z-index: 1;
}

.final-cta .cta-note {
  color: rgba(255, 255, 255, 0.38);
}

/* ========================================
   #10 FOOTER
   ======================================== */
.footer {
  background: var(--dark-bg);
  padding: var(--sp-2xl) var(--section-px) var(--sp-xl);
  color: #888;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-xl);
}

.footer__logo {
  font-family: var(--font-logo);
  font-size: var(--fs-body);
  font-weight: 900;
  color: #ccc;
  letter-spacing: 2px;
}

.footer__nav {
  display: flex;
  gap: var(--sp-lg);
}

.footer__nav a {
  font-size: var(--fs-callout);
  color: #777;
}

.footer__divider {
  border: none;
  border-top: 1px solid #333;
  margin-bottom: var(--sp-lg);
}

.footer__copy {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  color: #555;
  text-align: center;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes drift-a {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  33% { transform: translate(-50%, -50%) translate(10px, -14px); }
  66% { transform: translate(-50%, -50%) translate(-6px, 8px); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  33% { transform: translate(-50%, -50%) translate(-12px, 10px); }
  66% { transform: translate(-50%, -50%) translate(8px, -12px); }
}

@keyframes drift-c {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(6px, -10px); }
}

@keyframes dot-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(3px, -6px); opacity: 0.8; }
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.fade-in {
  opacity: 0;
  transform: translateY(var(--sp-lg));
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   RESPONSIVE — Tablet (768-1024px)
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --section-py: var(--sp-2xl);
    --section-px: var(--sp-xl);
    --fs-display1: 3.236rem;
    --fs-display2: 2.058rem;
    --fs-title1: 1.618rem;
  }

  .hero__ring--1 { width: 500px; height: 500px; }
  .hero__ring--2 { width: 400px; height: 400px; }
  .hero__fill--1 { width: 450px; height: 450px; }
  .hero__fill--2 { width: 350px; height: 350px; }

  .perspective-grid { grid-template-columns: 1fr; }
  .strength-grid { grid-template-columns: 1fr; }
  .strength-item--wide { grid-column: span 1; }
  .trust__company { flex-direction: column; }
  .trust__company-photo { width: 100% !important; height: 200px !important; }
  .coach-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-steps { grid-template-columns: repeat(3, 1fr); }
  .flow-step:nth-child(3)::after { display: none; }
}

/* ========================================
   RESPONSIVE — Mobile (-767px)
   ======================================== */
@media (max-width: 768px) {
  :root {
    --section-py: var(--sp-2xl);
    --section-px: var(--sp-lg);
    --fs-display1: 2.618rem;
    --fs-display2: 1.618rem;
    --fs-title1: 1.272rem;
    --fs-title2: 1.125rem;
  }

  .header { padding: 0 var(--sp-lg); }
  .header__nav a:not(.header__nav-cta) { display: none; }

  .hero { padding: var(--sp-2xl) var(--sp-lg); min-height: 90vh; }
  .hero__logo { letter-spacing: 3px; }
  .hero__logo-ja { letter-spacing: 6px; margin-bottom: var(--sp-xl); }
  .hero__tagline { margin-bottom: var(--sp-xl); }
  .hero__ring--3 { display: none; }
  .hero__fill--3 { display: none; }

  .pain-grid { grid-template-columns: 1fr; }
  .perspective-grid { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .comp-table-wrap { display: none; }
  .comp-cards { display: block; }
  .stats-row { flex-wrap: wrap; gap: var(--sp-xl); }
  .trust__company { flex-direction: column; }
  .trust__company-photo { width: 100% !important; height: 200px !important; }
  .trust__il-grid { grid-template-columns: 1fr; }
  .coach-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
  .plan-grid { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }

  .corporate-cta { padding-left: var(--sp-sm); padding-right: var(--sp-sm); }
  .corporate-cta__block { flex-direction: column; text-align: center; padding: var(--sp-md); }
  .corporate-cta__btn { width: 100%; text-align: center; }

  .final-cta { padding: var(--sp-2xl) var(--sp-lg); }
  .footer { padding: var(--sp-xl) var(--sp-lg); }
  .footer__top { flex-direction: column; gap: var(--sp-md); }
  .footer__nav { flex-wrap: wrap; gap: var(--sp-md); }

  .inner { padding: 0 var(--sp-xl); }
}

/* ========================================
   PREFERS-REDUCED-MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }

  html { scroll-behavior: auto; }
}

/* ========================================
   IMAGE PLACEHOLDERS
   ======================================== */
.placeholder-img {
  background: var(--cream-card);
  border: 2px dashed var(--cream-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-callout);
  font-family: var(--font-en);
  text-align: center;
  line-height: var(--lh-normal);
}

/* ========================================
   CONTACT FORM
   ======================================== */
.form-page {
  background: var(--cream-bg);
  padding: var(--sp-3xl) var(--section-px);
  min-height: calc(100vh - var(--header-height));
}

.form-intro {
  text-align: center;
  margin-bottom: var(--sp-2xl);
}

.form-intro .sec-lead {
  margin-bottom: 0;
}

.form-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  padding: var(--sp-2xl) var(--sp-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream-border);
}

.form-error-banner {
  border-color: var(--orange);
  background: rgba(255, 85, 0, 0.05);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-xl);
  text-align: center;
  color: var(--orange-deep);
  font-weight: 500;
}

.form-group {
  margin-bottom: var(--sp-xl);
}

.form-group:last-of-type {
  margin-bottom: var(--sp-lg);
}

.form-label {
  display: block;
  font-size: var(--fs-callout);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.form-required {
  display: inline-block;
  font-size: var(--fs-label);
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--white);
  background: var(--orange);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--sp-xs);
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

.form-col {
  min-width: 0;
}

.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-dark);
  background: var(--white);
  padding: var(--sp-md);
  border: 1.5px solid var(--cream-border);
  border-radius: var(--radius-sm);
  line-height: var(--lh-relaxed);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.12);
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--orange);
  background: rgba(255, 85, 0, 0.04);
}

.form-textarea {
  resize: vertical;
  min-height: 180px;
}

.form-error {
  margin-top: var(--sp-xs);
  font-size: var(--fs-callout);
  color: var(--orange-deep);
  font-weight: 500;
}

.form-radio-wrap {
  display: flex;
  gap: var(--sp-lg);
}

.form-radio-label {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--fs-callout);
  cursor: pointer;
}

.form-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.form-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--orange);
  flex-shrink: 0;
  cursor: pointer;
}

.form-checkbox-label {
  font-size: var(--fs-callout);
  color: var(--text-body);
  cursor: pointer;
  line-height: var(--lh-relaxed);
}

.form-checkbox-label a {
  color: var(--orange);
  text-decoration: underline;
}

.form-checkbox-label a:hover {
  color: var(--orange-deep);
}

.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

.form-recaptcha-note {
  margin-top: var(--sp-lg);
  font-size: var(--fs-label);
  color: var(--text-muted);
  text-align: center;
  line-height: var(--lh-relaxed);
}

.form-recaptcha-note a {
  color: var(--text-muted);
  text-decoration: underline;
}

/* --- Confirm画面 --- */
.form-confirm-table {
  margin: 0 0 var(--sp-xl) 0;
}

.form-confirm-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--cream-border);
}

.form-confirm-row:first-child {
  border-top: 1px solid var(--cream-border);
}

.form-confirm-label {
  font-size: var(--fs-callout);
  font-weight: 700;
  color: var(--text-dark);
}

.form-confirm-value {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  word-break: break-word;
}

.form-confirm-message {
  white-space: pre-wrap;
}

/* --- Thanks画面 --- */
.form-thanks {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--sp-2xl) var(--sp-xl);
}

.form-thanks .form-actions {
  margin-top: var(--sp-2xl);
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .form-page {
    padding: var(--sp-2xl) var(--sp-lg);
  }

  .form-card {
    padding: var(--sp-xl) var(--sp-lg);
  }

  .form-row-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }

  .form-confirm-row {
    grid-template-columns: 1fr;
    gap: var(--sp-2xs);
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn-cta {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   260410 打ち合わせ反映 — 追加セクション CSS
   ======================================== */

/* Header: CAREER COACHING ラベル */
.header__tag {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--orange);
  text-transform: uppercase;
  margin-left: var(--sp-sm);
  white-space: nowrap;
}

/* Hero: サブコピー */
.hero__sub-en {
  font-family: var(--font-en);
  font-size: var(--fs-callout);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
}

.hero__sub {
  font-family: var(--font-heading);
  font-size: var(--fs-title3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: var(--sp-lg);
  letter-spacing: 0.05em;
}

/* ========================================
   FOR YOU — ターゲット明示
   ======================================== */
.for-you {
  background: var(--white);
  padding: var(--section-py) 0;
}

.for-you__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-xl) auto 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.for-you__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.for-you__check {
  flex-shrink: 0;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15em;
  border: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  position: relative;
}

.for-you__check::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 10px;
  border: solid var(--orange);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.for-you__marker {
  background-image: linear-gradient(transparent 60%, rgba(255, 220, 80, 0.4) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.5s ease;
}

.for-you__item.marked .for-you__marker {
  background-size: 100% 100%;
}

.for-you__close {
  text-align: center;
  margin-top: var(--sp-xl);
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--text-dark);
}

/* ========================================
   CONSULT — こんなお悩みに対応します
   ======================================== */
.consult {
  background: var(--cream-bg);
  padding: var(--section-py) 0;
}

.consult__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}

.consult__item {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  border: 1px solid var(--cream-border);
}

/* ========================================
   METHOD — コーチングメソッド
   ======================================== */
.method {
  background: var(--white);
  padding: var(--section-py) 0;
}

.method__flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

.method__step {
  flex: 1;
  max-width: 240px;
  min-height: 360px;
  text-align: center;
  padding: var(--sp-lg) var(--sp-md);
  background: var(--cream-bg);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.method__step-en {
  font-family: var(--font-en);
  font-size: var(--fs-title3);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: var(--sp-xs);
}

.method__step-ja {
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.method__step-copy {
  font-size: var(--fs-callout);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin-bottom: var(--sp-sm);
  min-height: 4.8em;
}

.method__step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.method__step-list li {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding-left: 1em;
  position: relative;
  margin-bottom: var(--sp-2xs);
}

.method__step-list li::before {
  content: '・';
  position: absolute;
  left: 0;
}

.method__step-desc {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.method__arrow {
  display: flex;
  align-items: center;
  padding-top: var(--sp-2xl);
  font-family: var(--font-en);
  font-size: var(--fs-title2);
  color: var(--orange);
  flex-shrink: 0;
}

.method__note {
  text-align: center;
  margin-top: var(--sp-xl);
  font-size: var(--fs-callout);
  color: var(--text-muted);
  font-style: italic;
}

/* ========================================
   EVIDENCE — 学術的根拠
   ======================================== */
.evidence {
  background: var(--cream-bg);
  padding: var(--section-py) 0;
}

.evidence__slider {
  position: relative;
  margin-top: var(--sp-xl);
  overflow: hidden;
}

.evidence__track {
  display: flex;
  transition: transform 0.4s ease;
}

.evidence__item {
  flex: 0 0 100%;
  display: flex;
  gap: var(--sp-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  min-height: 0;
}

.evidence__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.evidence__arrow {
  background: none;
  border: 2px solid var(--orange);
  color: var(--orange);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--fs-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.evidence__arrow:hover {
  background: var(--orange);
  color: var(--white);
}

.evidence__dots {
  display: flex;
  gap: var(--sp-sm);
}

.evidence__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream-border);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.evidence__dot.active {
  background: var(--orange);
}

.evidence__cover {
  flex-shrink: 0;
  flex-basis: 33.333%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.evidence__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.evidence__content {
  flex: 2;
}

.evidence__journal {
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-xs);
}

.evidence__title {
  font-size: var(--fs-callout);
  font-weight: 700;
  line-height: var(--lh-normal);
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.evidence__author {
  font-size: var(--fs-callout);
  color: var(--text-body);
  margin-bottom: var(--sp-sm);
}

.evidence__desc {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin-bottom: var(--sp-md);
}

.evidence__link {
  font-size: var(--fs-caption);
  color: var(--orange);
  text-decoration: none;
  font-weight: 500;
}

.evidence__link:hover {
  text-decoration: underline;
}

/* ========================================
   TRUST — ロゴ掲載
   ======================================== */
.trust__logos {
  margin-top: var(--sp-2xl);
  margin-bottom: var(--sp-2xl);
  padding: var(--sp-xl) 0;
  text-align: center;
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
}

.trust__logos-label {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-bottom: var(--sp-lg);
}

.trust__logos-img img {
  max-width: 100%;
  height: auto;
}

/* Coach: 専門領域タグ型 */
.coach-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}

.coach-tag-item {
  padding: var(--sp-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--orange);
}

.coach-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-callout);
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-fill-light);
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-sm);
}

.coach-tag-desc {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Trust: インフォグラフィック数字（カード内センター） */
.trust__il-num {
  font-family: var(--font-en);
  font-size: var(--fs-display2);
  font-weight: 300;
  line-height: 1;
  color: var(--orange);
  text-align: center;
  margin-bottom: var(--sp-sm);
}

.trust__il-num-unit {
  font-size: var(--fs-title2);
  font-weight: 400;
}

/* Trust: 繋がりテキスト */
.trust__bridge {
  text-align: center;
  margin-top: var(--sp-xl);
  font-size: var(--fs-callout);
  color: var(--text-muted);
  font-style: italic;
  line-height: var(--lh-relaxed);
}

/* ========================================
   VALUES — RASHICLE が大切にしていること
   ======================================== */
.values {
  background: var(--white);
  padding: var(--section-py) 0;
}

.values__list {
  margin-top: var(--sp-xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.values__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xl);
  padding: var(--sp-xl) 0;
  border-bottom: 1px solid var(--cream-border);
}

.values__item:last-child {
  border-bottom: none;
}

.values__item-num {
  font-family: var(--font-en);
  font-size: var(--fs-display2);
  font-weight: 300;
  line-height: 1;
  color: var(--orange);
  flex-shrink: 0;
  width: 3rem;
}

.values__item-body {
  flex: 1;
}

.values__item-en {
  font-family: var(--font-en);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: var(--sp-2xs);
}

.values__item-title {
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--sp-sm);
}

.values__item-desc {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* ========================================
   PLANS — 価格強調バナー
   ======================================== */
.plans__price-note {
  text-align: center;
  margin-bottom: var(--sp-xl);
}

.plans__price-note-old {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  margin-bottom: var(--sp-xs);
}

.plans__price-note-old span {
  text-decoration: line-through;
}

.plans__price-note-label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: var(--sp-2xs) var(--sp-sm);
  margin-bottom: var(--sp-xs);
}

.plans__price-note-new {
  font-size: var(--fs-heading);
  color: var(--text-dark);
}

.plans__price-note-new strong {
  color: var(--orange);
  font-weight: 700;
  font-size: var(--fs-title3);
}

/* ========================================
   COMP — 比較表（独立セクション化）
   ======================================== */
.comp {
  background: var(--cream-bg);
  padding: var(--section-py) 0;
}

/* ========================================
   260410 RESPONSIVE ADDITIONS
   ======================================== */
@media (max-width: 768px) {
  .header__tag {
    display: none;
  }

  .hero__sub {
    font-size: var(--fs-heading);
  }

  .hero__sub-en {
    font-size: var(--fs-label);
  }

  .consult__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
  }

  .method__flow {
    flex-direction: column;
    align-items: center;
  }

  .method {
    padding-left: 0;
    padding-right: 0;
  }

  .method .inner {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .method__step {
    max-width: 100%;
    width: 100%;
    min-height: auto;
    padding: var(--sp-lg) var(--sp-sm);
  }

  .method__step-copy {
    min-height: auto;
  }

  .method__arrow {
    padding-top: 0;
    transform: rotate(90deg);
    font-size: var(--fs-title3);
  }

  .evidence__item {
    flex-direction: column;
  }

  .evidence__cover {
    width: 100%;
    height: 80px;
  }

  .evidence__arrow {
    width: 2rem;
    height: 2rem;
    font-size: var(--fs-callout);
  }

  /* SP: コーチ紹介 幅拡大 */
  #coach .inner {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .coach-tags {
    grid-template-columns: 1fr;
  }

  /* SP: プラン 幅拡大 + カード内padding縮小 */
  .plans .inner {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .plan-card {
    padding: var(--sp-lg) var(--sp-md);
  }

  .coach-tag-item {
    padding: var(--sp-md) var(--sp-sm);
  }

  /* SP: 体験者の声 幅拡大 + カード内padding縮小 */
  .ba .inner {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .ba-card {
    padding: var(--sp-lg) var(--sp-md);
  }

  .values__item {
    gap: var(--sp-lg);
  }

  .values__item-num {
    font-size: var(--fs-title1);
    width: 2.5rem;
  }

  /* SP: マーカーアニメーションをオフ */
  .for-you__marker {
    background-image: none;
    transition: none;
  }

  /* SP: コンテンツ幅を画面いっぱいに */
  .inner {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
  }

  /* SP: ILロゴセンタリング */
  .trust__company-photo {
    text-align: center;
    width: 100% !important;
    height: auto !important;
  }

  .trust__company-name {
    font-size: var(--fs-body);
  }

  .trust__company-photo img {
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  /* SP: 丹羽写真を画面幅いっぱい */
  .founder__photo img {
    width: 100%;
    max-width: 100%;
  }

  /* SP: 比較表の巨大空白修正（desktop table を確実に非表示） */
  .comp-table-wrap {
    display: none !important;
  }

  /* SP: Trust セクション幅拡大 + 3要素カード1列化 */
  .trust .inner {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
  }

  .trust__il-grid {
    grid-template-columns: 1fr;
  }

  /* SP: プランカードCTAボタン */
  .plan-cta {
    font-size: var(--fs-callout);
    padding: var(--sp-sm) var(--sp-md);
  }

}

/* ========================================
   TERMS OF USE（同意ページ /terms-of-use/）
   ======================================== */
.tou-page {
  background: var(--cream-bg);
  padding: var(--sp-3xl) var(--section-px);
  min-height: calc(100vh - var(--header-height));
}

/* ページタイトル（白カード外） */
.tou-page-header {
  text-align: center;
  margin-bottom: var(--sp-2xl);
}

.tou-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-title1);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
}

/* 白カード */
.tou-content {
  background: var(--white);
  padding: var(--sp-2xl) var(--sp-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--cream-border);
  color: var(--text-body);
}

/* 文書タイトル（カード内 h2） */
.tou-doc-title {
  font-family: var(--font-heading);
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
  text-align: center;
  margin-bottom: var(--sp-xl);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--cream-border);
}

.tou-intro {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-xl);
}

.tou-section {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--cream-border);
}

.tou-section h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--text-dark);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-md);
}

.tou-section p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-md);
}

.tou-section ul {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: var(--sp-md);
}

.tou-section ul li {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-xs);
}

.tou-section ul li::marker {
  color: var(--orange);
}

/* 制定日（平文、装飾なし） */
.tou-revision {
  font-size: var(--fs-callout);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-md);
}

/* 問い合わせ窓口 */
.tou-contact {
  margin-top: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--cream-bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-callout);
}

.tou-contact a {
  color: var(--orange);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .tou-page {
    padding: var(--sp-xl) var(--sp-md);
  }
  .tou-content {
    padding: var(--sp-xl) var(--sp-md);
  }
}