/* ==========================================================================
   LIORNA — Hero + Problem Intro / Case Study Intro
   Brand: Quiet Proof of Improvement
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --color-base:        #F8F4EE;  /* Warm Ivory */
  --color-base-sub:    #EEE3D8;  /* Linen Beige */
  --color-card:        #FFFDF9;  /* Soft Sand */
  --color-white:       #FFFDF9;  /* Milk White */
  --color-text:        #2F2B28;  /* Soft Charcoal */
  --color-text-sub:    #817770;  /* Greige */
  --color-main:        #5B514B; 
  --color-main-hover:  #403832;
  --color-accent:      #B77A6D;  /* Muted Coral */
  --color-border:      #D8CBC0;  /* Pale Taupe */
  --color-dark:        #262321;
  --problem-bg:        #F1E7DC;   /* Heroより一段だけ密度のあるベージュ */
  --problem-board:     #FFFDF9;   /* 紙の感触 */
  --problem-board-2:   #FBF6EF;  /* セル背景 */
  --problem-line:      rgba(91, 81, 75, 0.14);
  --problem-line-2:    rgba(91, 81, 75, 0.22);
  --clay-red:          #A9675D;   /* muted clay red */
  --clay-red-soft:     rgba(169, 103, 93, 0.10);
  --sage:              #8F9B88;

  /* Typography */
  --font-serif: "Noto Serif JP", "Shippori Mincho", "游明朝", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-en:    "Cormorant Garamond", "Noto Serif JP", serif;
  --font-num:   "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Font size tokens */
  --font-size-deco:      12px;   /* 装飾英字ラベル最小 */
  --font-size-caption:   12px;   /* キャプション・メタ情報 */
  --font-size-note:      14px;   /* 補足文・注釈 */
  --font-size-body-sm:   14px;   /* カード内本文・リスト最小 */
  --font-size-body:      16px;   /* 本文基準 */

  /* Spacing */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;
  --space-5xl: 120px;

  /* Layout */
  --max-width: 1200px;
  --side-pad-pc: 72px;
  --side-pad-sp: 24px;
  --header-h: 80px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  /* Phase 2: 追加トークン */
  --color-section-warm: #F3E9DE;
  --color-section-deep: #E7D6C8;
  --color-card-warm:   #FBF5EF;
  --color-text-light:  #A1948A;
  --color-accent-hover: #A76757;
  --color-accent-soft: #E8C9BE;
  --color-accent-bg:   #F6E7E1;
  --color-border-light: #E8DDD2;
  --shadow-soft:       0 18px 50px rgba(47, 42, 38, 0.08);
  --shadow-card:       0 12px 32px rgba(47, 42, 38, 0.06);
  --shadow-cta:        0 12px 28px rgba(90, 62, 53, 0.18);
  --dur-base: 240ms;
  --dur-slow: 500ms;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* 縦スクロールはブラウザのルートだけに任せる */
  overflow-y: auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 100%;
  overflow-x: clip; /* 横はみ出しのみ抑制。縦スクロールはhtmlに任せる */
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }

/* ---------- Utility ---------- */
.u-pc-only        { display: none; }
.u-sp-only        { display: inline; }
.u-pc-only-block  { display: none; }
.u-sp-only-block  { display: block; }

@media (min-width: 768px) {
  .u-pc-only        { display: inline; }
  .u-sp-only        { display: none; }
  .u-pc-only-block  { display: block; }
  .u-sp-only-block  { display: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(248, 243, 236, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
}


.site-header__inner {
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-pad-sp);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.site-header__nav { display: none; }

.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--color-main);
  border-radius: var(--radius-pill);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-main);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.site-header__cta:hover {
  background: var(--color-main);
  color: var(--color-base);
}

@media (min-width: 1024px) {
  /* header fixed 対応：main の先頭がヘッダーで隠れないように */

.site-header__inner { padding: 0 var(--side-pad-pc); }
  .site-header__nav { display: block; }
  .site-header__nav-list {
    display: flex;
    gap: 32px;
  }
  .site-header__nav-list a {
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--color-text);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease);
  }
  .site-header__nav-list a:hover { border-color: var(--color-main); }
  .site-header__cta { height: 44px; padding: 0 24px; font-size: 14px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  white-space: nowrap;
}
.button__arrow {
  font-size: 14px;
  transition: transform var(--dur-base) var(--ease);
}
.button:hover .button__arrow { transform: translateX(3px); }

.button--primary {
  background: var(--color-main);
  color: var(--color-base);
}
.button--primary:hover { background: var(--color-main-hover); }

.button--secondary {
  background: transparent;
  color: var(--color-main);
  border-color: var(--color-main);
}
.button--secondary:hover { background: var(--color-card); }

/* Text link */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-main);
}
.text-link__arrow { transition: transform var(--dur-base) var(--ease); }
.text-link:hover .text-link__arrow { transform: translateX(3px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-base);
  overflow-x: hidden; /* SPでfloatingがはみ出る場合の保険 */
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4xl) var(--side-pad-sp) var(--space-3xl);
  display: flex;
  flex-direction: column;
}

/* --- Copy --- */
.hero__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.hero__label-sep { color: var(--color-border); }

.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 6.5vw, 40px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.hero__lead {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  width: 100%;
}
.hero__actions .button { width: 100%; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hero__proof li {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Memo（改善メモ）
   ========================================================================== */
.memo {
  background: var(--color-white);
  border-left: 2px solid var(--color-accent);
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.memo__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.memo__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ==========================================================================
   Section base
   ========================================================================== */
.problem {
  position: relative;
  background: var(--problem-bg);
  padding: 80px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}

/* 紙感の極薄テクスチャ（CSSのみ） */
.problem::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255, 253, 249, 0.6), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(232, 221, 208, 0.5), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.problem__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.problem__header {
  max-width: 780px;
  margin-bottom: 40px;
}

.problem__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
  margin: 0;
}
.problem__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}

.problem__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.problem__lead {
  margin-top: 20px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 560px;
}

/* ==========================================================================
   Redline Pins (画面上に重なる赤入れ)
   ========================================================================== */
.redpin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  z-index: 6;
}
.redpin__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.18);
}
.redpin__num {
  position: relative;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
}

/* ==========================================================================
   User Flow Diagram (紙メモ風)
   ========================================================================== */
.flow {
  margin: 24px 0 0;
  padding: 18px 16px 20px;
  background: var(--problem-board-2);
  border: 1px solid var(--problem-line);
  border-radius: 4px;
  position: relative;
}
.flow::before {
  /* 用紙の左の罫線風アクセント */
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--clay-red);
  opacity: 0.35;
  border-radius: 2px;
}

/* ==========================================================================
   Right : Issue Summary (CTA Visibility診断 + Memo)
   ========================================================================== */
.diag {
  background: var(--color-white);
  border: 1px solid var(--problem-line);
  border-radius: 4px;
  padding: 18px 18px 16px;
}
.memo__sign {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  text-align: right;
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .problem {
    padding: 104px 0 112px;
  }
  .problem__title {
    font-size: clamp(34px, 4.4vw, 44px);
  }
  .problem__lead {
    font-size: 15px;
  }
  .board__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 28px;
  }
  .board__col {
    border-top: 0;
    padding: 0;
  }
  .board__col--summary { grid-column: 1 / span 2; }
  .issues {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .problem__doc-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--color-text-sub);
  }
  .problem__doc-id span:first-child {
    padding: 2px 8px;
    background: var(--color-white);
    border: 1px solid var(--problem-line);
    border-radius: var(--radius-pill);
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .problem {
    padding: 120px 0 128px;
  }
  .problem__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }
  .problem__title {
    font-size: clamp(38px, 3.4vw, 46px);
    line-height: 1.4;
  }
  .problem__lead {
    font-size: 15px;
    line-height: 2;
  }

  /* Board: 3カラムへ */
  .board__grid {
    grid-template-columns: 0.95fr 1fr 0.85fr;
    gap: 32px;
    padding: 36px 36px 40px;
  }
  .board__col--summary { grid-column: auto; }

  .board__col--mock,
  .board__col--notes {
    border-right: 1px dashed var(--problem-line);
    padding-right: 32px;
  }
  .board__col--notes { padding-left: 0; }
  .board__col--summary { padding-left: 0; }

  .phone {
    width: 220px;
  }

  .issues {
    margin-top: 48px;
  }
  .issues__title {
    font-size: 18px;
  }
  .issues__text {
    font-size: 14px;
  }

  .problem__next {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .problem__next-text {
    font-size: 18px;
    flex: 1;
  }
}

/* ==========================================================================
   ▼ Wide (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .board__grid {
    padding: 40px 44px 44px;
  }
  .phone { width: 240px; }
}


/* ==========================================================================
   ▼▼▼ PC Layout (>= 1024px) ▼▼▼
   ========================================================================== */
@media (min-width: 1024px) {

  body { font-size: 16px; }

  /* ---------- Hero ---------- */
  .hero__inner {
    padding: var(--space-5xl) var(--side-pad-pc) var(--space-4xl);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    min-height: calc(100vh - var(--header-h));
    align-items: center;
  }

  .hero__copy {
    grid-column: 1 / span 6;
  }
  .hero__visual {
    grid-column: 8 / span 5;
    margin-top: 0;
  }

  .hero__label {
    font-size: 12px;
    margin-bottom: 28px;
  }
  .hero__title {
    font-size: clamp(40px, 3.6vw, 60px);
    line-height: 1.28;
    letter-spacing: -0.02em;
    max-width: 680px;
  }
  .hero__lead {
    margin-top: 32px;
    font-size: 16px;
    line-height: 2.0;
    max-width: 540px;
  }
  .hero__sublead {
    margin-top: 16px;
    font-size: 14px;
    max-width: 540px;
  }
  .hero__actions {
    flex-direction: row;
    width: auto;
    margin-top: 40px;
    gap: 16px;
  }
  .hero__actions .button { width: auto; }

  .hero__proof {
    margin-top: 40px;
    gap: 10px;
  }
  .hero__proof li {
    font-size: 12px;
    padding: 7px 14px;
  }

  /* ---------- Hero Visual: Floating配置 ---------- */
  .hero__image-wrap {
    width: 100%;
    max-width: 460px;
    margin-left: auto; /* 右寄せ */
    aspect-ratio: 4 / 5;
  }

  .figma-card {
    position: absolute;
    top: 32px;
    left: -88px;
    width: 280px;
    margin: 0;
    z-index: 3;
    box-shadow: 0 8px 28px rgba(47, 45, 42, 0.08);
  }

  .memo--hero {
    position: absolute;
    bottom: 16px;
    left: -48px;
    width: 268px;
    margin: 0;
    z-index: 4;
    box-shadow: 0 8px 28px rgba(47, 45, 42, 0.06);
  }

  .sp-compare--hero {
    position: absolute;
    bottom: 72px;
    right: -32px;
    width: 200px;
    margin: 0;
    z-index: 3;
    box-shadow: 0 8px 28px rgba(47, 45, 42, 0.06);
  }


}

/* ==========================================================================
   ▼ Tablet調整 (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner {
    padding: var(--space-4xl) 40px var(--space-3xl);
  }
  .hero__title {
    font-size: 44px;
    line-height: 1.32;
  }
  .hero__actions {
    flex-direction: row;
    width: auto;
  }
  .hero__actions .button { width: auto; }
}

/* ==========================================================================
   ▼ Motion (後から付与しやすい構造)
   各要素に .is-revealed が付いた時にfade-inする想定
   ========================================================================== */
.hero__label,
.hero__title,
.hero__lead,
.hero__sublead,
.hero__actions,
.hero__proof,
.hero__image-wrap,
.figma-card,
.memo,
.sp-compare {
  /* JS追加なしでも初期表示は崩れない */
  opacity: 1;
  transform: none;
}

/* JS導入時はこちらを有効化:
.js-enabled .hero__label        { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-enabled .hero__title        { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: 80ms; }
.js-enabled .hero__lead         { transition-delay: 160ms; }
.js-enabled .hero__actions      { transition-delay: 280ms; }
.js-enabled .figma-card         { transition-delay: 360ms; }
.js-enabled .memo               { transition-delay: 440ms; }
.js-enabled .sp-compare         { transition-delay: 520ms; }
.js-enabled .is-revealed        { opacity: 1; transform: none; }
*/

/* ==========================================================================
   ▼ Print / motion-reduce
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Case Study Section
   "Improvement Story" — 編集的1件特集
   ========================================================================== */

/* このSection用の追加トークン */
:root {
  --case-bg:        #F0E8DA;   /* Heroより少し沈めたBeige */
  --case-paper:     #FFFDF9;   /* Featured内側の紙 */
  --case-paper-2:   #FBF6EE;   /* セル / 補助エリア */
  --case-line:      rgba(91, 70, 56, 0.14);
  --case-line-2:    rgba(91, 70, 56, 0.22);
}

/* ==========================================================================
   Section base
   ========================================================================== */
.case-section {
  position: relative;
  background: var(--case-bg);
  padding: 88px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}

.case-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255, 253, 249, 0.55), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(232, 221, 208, 0.5), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.case-section__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ==========================================================================
   Section Header
   ========================================================================== */
.case-section__header {
  max-width: 760px;
  margin-bottom: 40px;
}

.case-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
  margin: 0;
}
.case-section__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}

.case-section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.case-section__lead {
  margin-top: 20px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 620px;
}

/* ==========================================================================
   Featured Case
   ========================================================================== */
.featured {
  background: var(--case-paper);
  border: 1px solid var(--case-line);
  border-radius: 6px;
  padding: 28px 24px 28px;
  margin-bottom: 40px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 36px rgba(47, 45, 42, 0.05);
}

/* ==========================================================================
   Story Side
   ========================================================================== */
.story {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ==========================================================================
   Before / After Visual
   ========================================================================== */
.ba {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.memo--case .memo__sign {
  margin-top: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  text-align: right;
}
.case-section__cta-actions .button { width: 100%; }

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .case-section {
    padding: 112px 0 120px;
  }
  .case-section__title {
    font-size: clamp(34px, 4.4vw, 44px);
  }
  .case-section__lead { font-size: 15px; }

  .case-section__doc-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--color-text-sub);
  }
  .case-section__doc-id span:first-child {
    padding: 2px 8px;
    background: var(--color-white);
    border: 1px solid var(--case-line);
    border-radius: var(--radius-pill);
  }

  .featured {
    padding: 40px 36px 40px;
  }

  .featured__meta-row {
    grid-template-columns: 112px 1fr;
  }

  .ba {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .ba__item { flex: 1; }
  .memo--case {
    flex: 0 0 30%;
    align-self: center;
  }

  .other-cases__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .case-section__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .case-section__cta-actions {
    flex-shrink: 0;
    align-items: flex-end;
    gap: 14px;
  }
  .case-section__cta-actions .button { width: auto; }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .case-section {
    padding: 140px 0 152px;
  }
  .case-section__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }
  .case-section__title {
    font-size: clamp(38px, 3.4vw, 46px);
    line-height: 1.4;
  }
  .case-section__header {
    margin-bottom: 56px;
  }

  /* --- Featured --- */
  .featured {
    padding: 56px;
    margin-bottom: 56px;
  }
  .featured__head {
    padding-bottom: 32px;
    margin-bottom: 40px;
  }
  .featured__title {
    font-size: clamp(26px, 2.4vw, 32px);
  }

  /* Featured Body : 左Story / 右BA */
  .featured__body {
    display: grid;
    grid-template-columns: 0.95fr 1.1fr;
    gap: 56px;
    align-items: start;
  }
  .story { gap: 32px; }
  .story__heading { font-size: 20px; }

  /* BA Visualは 1fr 0.7fr 1fr の3列 */
  .ba {
    display: grid;
    grid-template-columns: 1fr 0.7fr 1fr;
    align-items: stretch;
    gap: 20px;
  }
  .ba__item { display: flex; flex-direction: column; gap: 16px; }
  .memo--case {
    align-self: center;
    margin: 0;
  }

  /* Proof */
  .proof {
    margin-top: 48px;
    padding-top: 36px;
    gap: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .proof__block--cta    { grid-column: 1 / span 2; }
  .proof__block--flow   { grid-column: 1 / span 2; }
  .proof__block--change { grid-column: 1 / span 2; }

  /* PCではテーブル表示、SPカードは非表示 */
  .cta-table   { display: table; }
  .cta-cards   { display: none; }

  .ig-flow {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 24px 28px;
    gap: 0;
    column-gap: 6px;
    row-gap: 12px;
  }
  .ig-flow::before {
    /* PCでは左罫線を非表示。横並びでは不要 */
    display: none;
  }
  .ig-flow__step {
    flex: 1;
    min-width: 0;
    grid-template-columns: 28px 1fr;
    padding: 12px 14px;
  }
  .ig-flow__arrow { padding: 0 4px; }

  .change-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 0;
  }
  .change-list__item { padding: 16px 0; }
  .change-list__item:nth-child(2) { padding-top: 16px; border-top: 0; }
  .change-list__item:nth-last-child(2) { border-bottom: 0; }

  .featured__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 32px;
  }

  /* Other Cases */
  .other-cases { margin: 80px 0 56px; }
  .other-cases__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .other-card__body { padding: 28px 28px 30px; }
  .other-card__title { font-size: 20px; }

  /* Section CTA */
  .case-section__cta {
    margin-top: 64px;
    padding-top: 48px;
  }
  .case-section__cta-lead {
    font-size: 22px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   ▼ Wide (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .featured { padding: 64px; }
  .ba__phone { width: 240px; }
}

/* ==========================================================================
   About / Philosophy
   "改善力を、人間味と相談感へ変える"
   ========================================================================== */

/* このSection用の追加トークン */
:root {
  --about-bg:        #F2EADC;
  --about-paper:     #FFFDF9;
  --about-line:      rgba(91, 70, 56, 0.14);
  --about-line-2:    rgba(91, 70, 56, 0.22);
}

.about {
  position: relative;
  background: var(--about-bg);
  padding: 96px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(255, 253, 249, 0.5), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(232, 221, 208, 0.4), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Service
   "どこを改善できるか" を提示する
   ========================================================================== */
:root {
  --svc-bg:       #F8F3EC;
  --svc-paper:    #FFFDF9;
  --svc-paper-2: #FBF6EE;
  --svc-line:    rgba(91, 70, 56, 0.14);
  --svc-line-2:  rgba(91, 70, 56, 0.22);
}

.service {
  position: relative;
  background: var(--svc-bg);
  padding: 96px 0 104px;
  color: var(--color-text);
  overflow: hidden;
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(255, 253, 249, 0.5), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(232, 221, 208, 0.4), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.service__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---------- Header ---------- */
.service__header {
  margin-bottom: 48px;
}
.service__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.service__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}
.service__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}
.service__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
  max-width: 560px;
}

/* ==========================================================================
   Service CTA
   ========================================================================== */
.service__cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px dashed var(--svc-line);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.service__cta-actions .button { width: 100%; }

/* ==========================================================================
   Final CTA
   "静かに相談行動へ変える"
   ========================================================================== */
:root {
  --final-bg:     #E8DDD0;
  --final-paper:  #FFFDF9;
  --final-line:   rgba(91, 70, 56, 0.18);
}
.final__actions .button { width: 100%; }

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {

  /* --- About --- */
  .about { padding: 120px 0; }
  .about__title { font-size: clamp(32px, 4.6vw, 40px); }
  .about__text p { font-size: 15px; }
  .about__statement p { font-size: 18px; }
  .about__note { max-width: 380px; }

  .principles__list {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--about-line);
  }
  .principle {
    padding: 28px 24px;
    border-right: 1px solid var(--about-line);
    border-bottom: 0;
  }
  .principle:last-child { border-right: 0; }
  .principle:first-child { padding-left: 0; }
  .principle:last-child { padding-right: 0; }

  /* --- Service --- */
  .service { padding: 120px 0 128px; }
  .service__title { 
    font-size: clamp(34px, 4.4vw, 44px); 
    margin: 0 0 22px;
  }
  .service__lead { font-size: 15px; }

  .service__doc-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--color-text-sub);
  }
  .service__doc-id span:first-child {
    padding: 2px 8px;
    background: var(--svc-paper);
    border: 1px solid var(--svc-line);
    border-radius: var(--radius-pill);
  }

  .areas__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .area {
    padding: 32px 28px;
    border-bottom: 1px dashed var(--svc-line);
    border-right: 1px dashed var(--svc-line);
  }
  .area:nth-child(2n) { border-right: 0; }
  .area:nth-last-child(-n+2) { border-bottom: 0; }
  .area:first-child { padding-left: 0; }
  .area:nth-child(2) { padding-right: 0; }
  .area:nth-child(3) { padding-left: 0; }
  .area:nth-child(4) { padding-right: 0; }

  /* Service Detail */
  .svc {
    grid-template-columns: 44px 1.1fr 1.4fr;
    gap: 32px;
    padding: 36px 0;
  }
  .svc__body {
    grid-column: 3;
    padding-top: 0;
  }
  .svc__num { font-size: 14px; padding-top: 6px; }
  .svc__title { font-size: 22px; }

  .service__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .service__cta-actions {
    flex-shrink: 0;
    align-items: flex-end;
    gap: 14px;
  }
  .service__cta-actions .button { width: auto; }

  /* --- Final CTA --- */
  .final { padding: 128px 0 120px; }
  .final__content { text-align: center; }
  .final__label { justify-content: center; }
  .final__title { font-size: clamp(34px, 4.6vw, 44px); }
  .final__lead { font-size: 15px; }

  .final__topics-wrap {
    margin-top: 20px;
    text-align: left;
  }
  .final__topics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 0;
    border-top: 1px solid var(--final-line);
  }
  .final__topic {
    padding: 18px 0;
  }
  /* 最後の行のborder-bottomを消す */
  .final__topic:nth-last-child(-n+2) { border-bottom: 0; }

  .final__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .final__actions .button { width: auto; min-width: 240px; }

  .final__partner {
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
  }
  .final__closing {
    text-align: center;
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {

  /* --- About : 2カラム --- */
  .about { padding: 152px 0; }
  .about__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }
  .about__grid {
    display: grid;
    grid-template-columns: 5fr 1fr 6fr;
    gap: 0;
    align-items: start;
  }
  .about__visual {
    grid-column: 1;
    position: relative;
  }
  .about__content {
    grid-column: 3;
    padding-top: 12px;
  }

  .about__image-wrap {
    max-width: none;
  }
  .about__note {
    position: absolute;
    bottom: -32px;
    right: -56px;
    margin: 0;
    width: 320px;
    z-index: 3;
  }

  .about__title { font-size: clamp(38px, 3.2vw, 44px); line-height: 1.45; }
  .about__text p { font-size: 15px; line-height: 2; }
  .about__statement { padding: 28px 32px; }
  .about__statement p { font-size: 20px; line-height: 1.85; }

  .principles { margin-top: 80px; }

  /* --- Service --- */
  .service { padding: 152px 0 160px; }
  .service__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }

  .service__header {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-bottom: 64px;
    align-items: end;
  }
  .service__header-meta {
    grid-column: 1 / span 12;
  }
  .service__header-grid {
    grid-column: 1 / span 12;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: end;
  }
  .service__title { font-size: clamp(38px, 3.4vw, 46px); line-height: 1.4; }
  .service__lead { font-size: 15px; }

  /* Areas : 4列 */
  .areas { margin-bottom: 80px; }
  .areas__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .area {
    padding: 36px 28px;
    border-right: 1px solid var(--svc-line);
    border-bottom: 0;
  }
  .area:last-child { border-right: 0; }
  .area:first-child { padding-left: 0; }
  .area:last-child { padding-right: 0; }
  /* nth-childリセット */
  .area:nth-child(2n) { border-right: 1px solid var(--svc-line); }
  .area:nth-child(4) { border-right: 0; padding-right: 0; }
  .area:nth-last-child(-n+2) { border-bottom: 0; }
  .area:nth-child(3) { padding-left: 28px; }

  .area__title { font-size: 19px; }

  /* Service Detail */
  .services { margin-bottom: 56px; }
  .svc {
    grid-template-columns: 60px 1.1fr 1.4fr;
    gap: 40px;
    padding: 44px 8px 44px 0;
  }
  .svc:hover {
    background: linear-gradient(
      to right,
      rgba(255, 253, 249, 0.6),
      transparent 70%
    );
    padding-left: 8px;
  }
  .svc__num { font-size: 14px; padding-top: 8px; }
  .svc__title { font-size: 24px; }
  .svc__sub { font-size: 14px; }
  .svc__text { font-size: 14px; line-height: 1.95; }

  /* Service CTA */
  .service__cta {
    margin-top: 48px;
    padding-top: 40px;
  }
  .service__cta-lead { font-size: 22px; line-height: 1.6; }

  /* --- Final CTA --- */
  .final { padding: 160px 0 140px; }
  .final__inner {
    width: min(1040px, calc(100% - var(--side-pad-pc) * 2));
  }
  .final__title { font-size: clamp(40px, 3.6vw, 48px); line-height: 1.5; }
  .final__lead {
    font-size: 15px;
    line-height: 2.05;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .final__topics-wrap {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .final__closing { font-size: 14px; }
}

/* ==========================================================================
   ▼ Wide (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .about__note {
    right: -72px;
    width: 340px;
  }
}

/* ==========================================================================
   SP Slimming Layer
   "情報を減らして、静かな信頼を強くする"
   767px以下で適用される削減・呼吸調整ルール
   ========================================================================== */

@media (max-width: 767px) {

  /* --- SP共通: data-sp-hide 属性で非表示 --- */
  [data-sp-hide] {
    display: none !important;
  }

  /* ==========================================================================
     Hero : 余白拡張 + 視覚要素削減後の整え
     ========================================================================== */
  .hero__inner {
    padding-top: 88px;
    padding-bottom: 80px;
  }
  .hero__title {
    font-size: clamp(30px, 7vw, 36px);
    line-height: 1.45;
    letter-spacing: 0;
  }
  .hero__lead {
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.95;
  }
  .hero__actions {
    margin-top: 36px;
  }
  /* Visual : 画像のみシンプルに */
  .hero__visual {
    margin-top: 56px;
  }
  .hero__image-wrap {
    max-width: 100%;
  }
  /* 改善メモ : 画像下に控えめに */
  .memo--hero {
    margin-top: 20px;
    max-width: 100%;
  }

  /* ==========================================================================
     Problem : 分析資料感を弱め、共感寄りに
     ========================================================================== */
  .problem {
    padding: 80px 0 88px;
  }
  .problem__header {
    margin-bottom: 32px;
  }
  .problem__title {
    font-size: clamp(26px, 6.4vw, 30px);
    line-height: 1.55;
  }
  .problem__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  /* Board : 余白を絞り、塗り感を弱める */
  .board {
    background: transparent;
    border: 1px solid var(--problem-line);
    box-shadow: none;
    border-radius: 4px;
  }
  .board__grid {
    padding: 20px 18px 24px;
    gap: 24px;
  }
  .board__col {
    padding: 16px 0;
  }
  .board__col-label {
    margin-bottom: 12px;
  }

  /* Phone : SPでは少し小さく */
  .phone {
    width: 220px;
  }

  /* Redline Notes : 02 までに */
  .redline-list__item {
    padding: 14px 0;
  }
  .redline-list__head {
    font-size: 14px;
  }
  .redline-list__text {
    font-size: 12px;
  }

  /* Issues bottom cards : 2枚並び、装飾削減 */
  .issues {
    margin-top: 32px;
    gap: 10px;
  }
  .issues__item {
    padding: 18px 18px 18px;
  }
  .issues__item::before {
    top: 18px;
    bottom: 18px;
  }
  .issues__title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .issues__text {
    font-size: 12px;
    margin-bottom: 0;
  }

  /* Next : 呼吸 */
  .problem__next {
    margin-top: 36px;
    padding-top: 28px;
    gap: 14px;
  }
  .problem__next-text {
    font-size: 14px;
    line-height: 1.85;
  }
  .problem__next-meta {
    display: none;
  }

  /* ==========================================================================
     Case Study : 「Before → メモ → After → 改善ポイント → 詳しく見る」のみ
     ========================================================================== */
  .case-section {
    padding: 80px 0 88px;
  }

  .case-section__header {
    margin-bottom: 32px;
  }
  .case-section__title {
    font-size: clamp(26px, 6.4vw, 30px);
    line-height: 1.55;
  }

  /* Featured : 装飾削減 */
  .featured {
    background: var(--case-paper);
    padding: 24px 20px 24px;
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 4px;
  }
  .featured__head {
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .featured__head-row {
    gap: 8px;
    margin-bottom: 14px;
  }
  .featured__case-num {
    padding: 3px 10px;
    font-size: 12px;
  }
  .featured__type,
  .featured__industry {
    font-size: 11px;
  }
  .featured__title {
    font-size: 20px;
    line-height: 1.55;
    margin-bottom: 0;
  }

  /* Body : 縦積みで Before → memo → After */
  .featured__body {
    gap: 24px;
  }
  .ba {
    gap: 24px;
  }
  .ba__item {
    gap: 12px;
  }
  .ba__caption {
    gap: 8px;
  }

  /* Phone : SPでは少し小さく */
  .ba__phone {
    width: 200px;
  }

  /* 改善メモ : 中央に静かに */
  .memo--case {
    padding: 18px 20px;
  }
  .memo--case .memo__text {
    font-size: 14px;
    line-height: 1.85;
  }
  .memo--case .memo__sign {
    display: none;
  }

  /* 改善ポイント : 1つだけ、シンプルに */
  .ba__points {
    gap: 8px;
  }
  .ba__points li {
    font-size: 14px;
  }

  /* Featured Footer : disclaimer + 詳しく見る */
  .featured__footer {
    margin-top: 24px;
    padding-top: 20px;
    gap: 14px;
  }
  .featured__disclaimer {
    font-size: 12px;
    line-height: 1.8;
  }

  /* Case Section CTA */
  .case-section__cta {
    margin-top: 36px;
    padding-top: 32px;
  }
  .case-section__cta-lead {
    font-size: 16px;
    line-height: 1.7;
  }

  /* ==========================================================================
     Quiet Bridge : Case → About の呼吸
     ========================================================================== */
  .quiet-bridge {
    background: var(--color-base);
    padding: 64px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
  .quiet-bridge__inner {
    width: min(560px, calc(100% - 48px));
    margin: 0 auto;
    text-align: center;
  }
  .quiet-bridge__text {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.85;
    letter-spacing: 0;
    color: var(--color-text);
  }

  /* ==========================================================================
     About : 思想短縮、人間味を残す
     ========================================================================== */
  .about {
    padding: 80px 0 88px;
  }
  .about__grid {
    gap: 32px;
  }
  .about__title {
    font-size: clamp(26px, 6.4vw, 30px);
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .about__text {
    gap: 16px;
    margin-bottom: 24px;
  }
  .about__text p {
    font-size: 14px;
    line-height: 1.95;
  }
  .about__statement {
    padding: 20px 22px;
    margin-bottom: 0;
  }
  .about__statement p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
  }

  /* Note 付箋 */
  .about__note {
    margin-top: -24px;
    padding: 18px 20px 18px;
  }
  .about__note-text {
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
  }

  /* Principles : 罫線維持、内部余白を絞る */
  .principles {
    margin-top: 40px;
  }
  .principle {
    padding: 22px 0;
  }
  .principle__title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .principle__text {
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
  }

  /* ==========================================================================
     Service : 悩み起点、本文短縮
     ========================================================================== */
  .service {
    padding: 80px 0 88px;
  }
  .service__header {
    margin-bottom: 32px;
  }
  .service__title {
    font-size: clamp(26px, 6.4vw, 30px);
    line-height: 1.55;
  }

  /* Areas : 各エリアの余白を絞る */
  .areas {
    margin-bottom: 40px;
  }
  .area {
    padding: 22px 0;
  }
  .area__title {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .area__text {
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
  }

  /* Services : 横長リストを縦に */
  .services {
    margin-bottom: 32px;
  }
  .svc {
    padding: 22px 0;
    gap: 10px 14px;
  }
  .svc__head-tag {
    padding: 2px 9px;
    font-size: 11px;
  }
  .svc__title {
    font-size: 17px;
    line-height: 1.5;
  }
  .svc__sub {
    font-size: 12px;
  }
  .svc__text {
    font-size: 14px;
    line-height: 1.85;
  }

  /* Service CTA */
  .service__cta {
    margin-top: 32px;
    padding-top: 28px;
  }
  .service__cta-lead {
    font-size: 16px;
    line-height: 1.7;
  }

  /* ==========================================================================
     Final CTA : 静かに余白を作る
     ========================================================================== */
  .final {
    padding: 96px 0 88px;
  }
  .final__title {
    font-size: clamp(26px, 6.4vw, 30px);
    line-height: 1.55;
    margin-bottom: 20px;
  }
  .final__lead {
    font-size: 14px;
    line-height: 1.95;
    margin-bottom: 36px;
  }

  /* Topics : 4項目だけ縦積み、罫線間隔広め */
  .final__topics-wrap {
    margin-bottom: 36px;
  }
  .final__topic {
    padding: 14px 0;
    gap: 10px;
  }
  .final__topic-text {
    font-size: 14px;
    line-height: 1.75;
  }

  /* Actions : 呼吸を作る */
  .final__actions {
    margin-bottom: 28px;
    gap: 10px;
  }

  /* Partner : 小さく、控えめに */
  .final__partner {
    padding: 12px 14px;
    margin-bottom: 28px;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .final__partner-text {
    font-size: 12px;
    line-height: 1.7;
  }

  /* Closing : シンプルに */
  .final__closing {
    padding-top: 24px;
    font-size: 12px;
    line-height: 1.85;
    text-align: center;
  }
}

/* ==========================================================================
   Tablet + PC : Quiet Bridge は SP のみ表示
   ========================================================================== */
@media (min-width: 768px) {
  .quiet-bridge {
    display: none;
  }
}

/* ==========================================================================
   Before Contact Section
   "相談する前の不安を、静かに減らす" — Final CTA直前
   ========================================================================== */

:root {
  --bc-bg:       #F4EDE3;
  --bc-paper:    #FFFDF9;
  --bc-paper-2:  #FBF6EE;
  --bc-line:     rgba(91, 70, 56, 0.14);
  --bc-line-2:   rgba(91, 70, 56, 0.22);
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .before-contact {
    padding: 120px 0 128px;
  }
  .before-contact__header {
    margin-bottom: 72px;
  }
  .before-contact__title {
    font-size: clamp(32px, 4.4vw, 40px);
  }
  .before-contact__lead { font-size: 15px; }

  /* Flow */
  .bc-flow {
    padding: 36px 36px 36px;
    margin-bottom: 80px;
  }
  .bc-flow__list {
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--bc-line);
    border-bottom: 1px solid var(--bc-line);
  }
  .bc-flow-step {
    padding: 24px 22px;
    border-bottom: 0;
    border-right: 1px solid var(--bc-line);
  }
  .bc-flow-step:last-child { border-right: 0; }
  .bc-flow-step:first-child { padding-left: 0; }
  .bc-flow-step:last-child  { padding-right: 0; }

  /* Fit : 2列 */
  .bc-fit {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 80px;
  }

  /* Fee : 4列 */
  .bc-fee__list {
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--bc-line);
    border-bottom: 1px solid var(--bc-line);
  }
  .bc-fee-item {
    padding: 24px 24px;
    border-bottom: 0;
    border-right: 1px solid var(--bc-line);
  }
  .bc-fee-item:nth-child(2n) { border-right: 0; }
  .bc-fee-item:nth-last-child(-n+2) { border-bottom: 0; }
  .bc-fee-item:first-child { padding-left: 0; }
  .bc-fee-item:nth-child(2) { padding-right: 0; }

  .bc-closing__text { font-size: 17px; }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .before-contact {
    padding: 144px 0 152px;
  }
  .before-contact__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }
  .before-contact__title {
    font-size: clamp(36px, 3.4vw, 44px);
    line-height: 1.5;
  }

  /* Flow : 4列横並びを維持 */
  .bc-flow {
    padding: 44px 48px;
  }

  /* Fit : 2列を維持 */
  .bc-fit {
    gap: 64px;
  }

  /* Fee : 4列横並び */
  .bc-fee__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .bc-fee-item {
    padding: 28px 28px;
    border-right: 1px solid var(--bc-line);
    border-bottom: 0;
  }
  .bc-fee-item:nth-child(2n) { border-right: 1px solid var(--bc-line); }
  .bc-fee-item:last-child { border-right: 0; }
  .bc-fee-item:nth-last-child(-n+2) { border-bottom: 0; }
  .bc-fee-item:first-child { padding-left: 0; }
  .bc-fee-item:nth-child(2) { padding-right: 28px; }
  .bc-fee-item:nth-child(3) { padding-left: 28px; }
  .bc-fee-item:last-child { padding-right: 0; }

  /* FAQ : 横スペースを活かす */
  .bc-faq__q { font-size: 16px; }
  .bc-faq__a { font-size: 14px; }
  .bc-faq__q,
  .bc-faq__a {
    max-width: 760px;
  }

  .bc-closing {
    padding: 40px 0 8px;
  }
  .bc-closing__text { font-size: 18px; }
}

/* ==========================================================================
   Target Split Section
   "主役を明確にしながら、副導線を整理する"
   ========================================================================== */

:root {
  --ts-bg:       #F8F3EC;
  --ts-paper:    #FFFDF9;
  --ts-line:     rgba(91, 70, 56, 0.14);
  --ts-line-2:   rgba(91, 70, 56, 0.22);
}
.ts-card--primary .ts-card__actions .button { width: 100%; }

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .target-split {
    padding: 112px 0 120px;
  }
  .target-split__header {
    margin-bottom: 64px;
  }
  .target-split__title {
    font-size: clamp(32px, 4.4vw, 40px);
  }
  .target-split__lead { font-size: 15px; }

  /* Grid : 横並びへ */
  .target-split__grid {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin-bottom: 48px;
  }

  /* 主導線 : 大きく取る */
  .ts-card--primary {
    flex: 1.4;
    padding-right: 40px;
  }
  /* 副導線 : 小さく */
  .ts-card--secondary {
    flex: 1;
    margin-left: 0;
  }

  /* Divider : 縦線へ */
  .target-split__divider {
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
    gap: 0;
  }
  .target-split__divider-line {
    width: 1px;
    height: 100%;
    flex: 1;
    background: var(--ts-line);
  }
  .target-split__divider-mark {
    padding: 14px 0;
    background: var(--ts-bg);
    writing-mode: horizontal-tb;
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .target-split {
    padding: 144px 0 152px;
  }
  .target-split__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }
  .target-split__title {
    font-size: clamp(36px, 3.4vw, 44px);
    line-height: 1.45;
  }

  /* 主導線 : さらに重みを出す */
  .ts-card--primary {
    flex: 1.5;
    padding-right: 56px;
  }
  .ts-card--primary .ts-card__title {
    font-size: clamp(26px, 2.4vw, 32px);
  }
  .ts-card--primary .ts-card__list li {
    font-size: 15px;
    line-height: 1.95;
  }
  .ts-card--primary .ts-card__bridge {
    font-size: 14px;
    padding: 18px 22px;
  }

  /* 副導線 : 軽さを維持 */
  .ts-card--secondary {
    flex: 0.9;
    padding: 32px 32px 28px;
  }
  .ts-card__title--sub {
    font-size: clamp(18px, 1.6vw, 21px);
  }

  /* Divider : 上品な縦線 */
  .target-split__divider {
    padding: 0 56px;
  }

  /* Primary CTA : 横並びのまま */
  .ts-card--primary .ts-card__actions {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .ts-card--primary .ts-card__actions .button {
    width: auto;
    min-width: 220px;
  }
}

/* ==========================================================================
   ▼▼▼ Wide (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .ts-card--primary { padding-right: 64px; }
  .target-split__divider { padding: 0 64px; }
}

/* ==========================================================================
   Concept Section
   "ブランド体験は、ひとつの画面だけでは決まりません"
   ========================================================================== */

.concept {
  position: relative;
  background: var(--color-white);
  padding: 88px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}
.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(248, 243, 236, 0.7), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.concept__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* Header */
.concept__header {
  max-width: 790px;
  margin-bottom: 56px;
}
.concept__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.concept__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(201, 130, 107, 0.12);
}

.concept__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
  color: var(--color-text);
}

.concept__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.concept__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   Tablet (>=768px) : Concept 3カラム化
   ========================================================================== */
@media (min-width: 768px) {
  .concept { padding: 120px 0; }
  .concept__title { font-size: clamp(34px, 4.4vw, 44px); }
  .concept__lead p { font-size: 15px; }
  .concept__header { margin-bottom: 64px; }

  .concept__steps {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .concept-step {
    flex: 1;
    padding: 32px 28px;
    border-right: 1px solid var(--color-border);
  }
  .concept-step:first-of-type { padding-left: 0; }
  .concept-step:last-of-type { padding-right: 0; border-right: 0; }

  .concept-step__arrow {
    flex: 0 0 auto;
    padding: 0 8px;
    align-self: center;
  }
  .concept-step__arrow svg {
    width: 28px;
    height: 12px;
    transform: none;
  }
}

@media (min-width: 1024px) {
  .concept { padding: 144px 0; }
  .concept__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }
  .concept__title { font-size: clamp(38px, 3.4vw, 46px); line-height: 1.45; }
}


/* ==========================================================================
   Problem Section (差し替え版)
   自己診断型6カード + ブリッジコピー
   ========================================================================== */

/* 既存のProblem CSSを活かしつつ、新要素を追加 */

.problem__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.problem__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}

.problem__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  margin-bottom: 48px;
}
.problem__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

/* 6 Problem Cards */
.problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 48px;
}

.problem-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 22px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  align-items: baseline;
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}
.problem-card:hover {
  border-color: rgba(91, 70, 56, 0.28);
  transform: translateY(-2px);
}

.problem-card__num {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--clay-red);
  padding-top: 2px;
}
.problem-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}

/* Bridge copy */
.problem__bridge {
  padding-top: 32px;
  border-top: 1px dashed var(--color-border);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0;
  max-width: 560px;
}

/* ==========================================================================
   Tablet : Problem 2col / 3col
   ========================================================================== */
@media (min-width: 768px) {
  .problem__lead p { font-size: 15px; }

  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .problem__bridge { font-size: 16px; }
}

@media (min-width: 1024px) {
  .problem-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .problem-card {
    padding: 28px 26px;
  }
  .problem-card__text { font-size: 15px; }
  .problem__bridge {
    font-size: 17px;
    max-width: 640px;
  }
}

/* ==========================================================================
   Brand Flow Section
   "Instagramから予約まで、ひとつのブランド体験として設計"
   ========================================================================== */

.brand-flow {
  position: relative;
  background: var(--color-card);
  padding: 88px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}
.brand-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255, 253, 249, 0.5), transparent 60%);
  pointer-events: none;
}

.brand-flow__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.brand-flow__header {
  max-width: 720px;
  margin-bottom: 56px;
}
.brand-flow__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.brand-flow__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(201, 130, 107, 0.12);
}
.brand-flow__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
}
.brand-flow__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brand-flow__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

@media (min-width: 768px) {
  .brand-flow { padding: 120px 0 128px; }
  .brand-flow__title { font-size: clamp(34px, 4.4vw, 44px); }
  .brand-flow__lead p { font-size: 15px; }
  .brand-flow__header { margin-bottom: 64px; }
}

@media (min-width: 1024px) {
  .brand-flow { padding: 144px 0 152px; }
  .brand-flow__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }
  .brand-flow__title { font-size: clamp(38px, 3.4vw, 46px); line-height: 1.45; }
}


/* ==========================================================================
   Case Study Section (差し替え版)
   ========================================================================== */

.case-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.case-section__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(201, 130, 107, 0.12);
}

.case-section__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 20px 0 0;
  max-width: 620px;
}

/* Featured Case */
.case-featured {
  margin-top: 48px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 28px 24px;
  box-shadow: 0 8px 28px rgba(47, 45, 42, 0.04);
}

.case-featured__head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}
.case-featured__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.case-featured__case-num {
  padding: 4px 12px;
  background: var(--color-main);
  color: var(--color-base);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.case-featured__type {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
.case-featured__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.case-featured__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 4 Phase blocks */
.case-phase {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.case-phase__item {
  padding: 22px;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  position: relative;
}
.case-phase__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
}
.case-phase__item--before .case-phase__tag {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
}
.case-phase__item--problem .case-phase__tag {
  background: rgba(176, 106, 91, 0.1);
  color: var(--clay-red);
}

.case-phase__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

/* Visual: Before / After phones */
.case-featured__visual {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.case-featured__before-img,
.case-featured__after-img {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.case-featured__img-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.case-featured__img-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.case-featured__img-tag--after {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--color-white);
}

.case-featured__phone {
  position: relative;
  width: 180px;
  background: #2F2D2A;
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(47, 45, 42, 0.10);
}
.case-featured__phone-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 10px;
  background: #1A1816;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.case-featured__phone-screen {
  position: relative;
  aspect-ratio: 9 / 17;
  background: var(--color-base);
  border-radius: 16px;
  overflow: hidden;
}
.case-featured__phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Tags */
.case-featured__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px dashed var(--color-border);
}
.case-featured__tags li {
  padding: 4px 10px;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-sub);
}

/* Footer */
.case-featured__footer {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.case-featured__footer-note {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}

@media (min-width: 768px) {
  .case-section__lead { font-size: 15px; }
  .case-featured { padding: 40px 36px; }
  .case-featured__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
  }
  .case-phase { grid-template-columns: 1fr 1fr; gap: 16px; }
  .case-featured__visual { gap: 28px; }
  .case-featured__phone { width: 200px; }
  .case-featured__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .case-featured { padding: 56px; }
  .case-featured__title { font-size: clamp(24px, 2.4vw, 30px); }
  .case-phase__text { font-size: 14px; }
  .case-featured__phone { width: 220px; }
}


/* ==========================================================================
   Service Section (差し替え版)
   ========================================================================== */

.service__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-accent);
}
.service__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(201, 130, 107, 0.12);
}

/* Service CTA */
.service__cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  justify-content: center;
}
/* ==========================================================================
   Phase 4 Lower Sections — Process / About / Trust / Final CTA
   ========================================================================== */

.process-lower,
.about-lower,
.trust-lower,
.final-cta {
  position: relative;
  overflow: hidden;
}

.process-lower__inner,
.about-lower__inner,
.trust-lower__inner,
.final-cta__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* ----------------------------------------------
   Process
   ---------------------------------------------- */
.process-lower {
  background: var(--color-base);
  padding: 88px 0 96px;
}

.process-lower__header {
  max-width: 720px;
  margin-bottom: 42px;
}

.process-lower__label,
.about-lower__label,
.trust-lower__label,
.final-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: capitalize;
  color: var(--clay-red);
  margin: 0 0 18px;
}

.process-lower__label-mark,
.about-lower__label-mark,
.trust-lower__label-mark,
.final-cta__label-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}

.process-lower__title,
.about-lower__title,
.trust-lower__title,
.final-cta__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

.process-lower__lead,
.about-lower__lead,
.trust-lower__lead,
.final-cta__lead {
  margin-top: 20px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.process-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.process-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 22px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.process-timeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clay-red-soft);
  color: var(--clay-red);
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.process-timeline__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 8px;
}

.process-timeline__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ----------------------------------------------
   About
   ---------------------------------------------- */
.about-lower {
  background: var(--problem-bg);
  padding: 96px 0 104px;
}

.about-lower::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255, 253, 249, 0.72), transparent 60%),
    radial-gradient(780px 520px at 100% 100%, rgba(232, 221, 208, 0.55), transparent 64%);
  pointer-events: none;
}

.about-lower__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.about-lower__content {
  max-width: 720px;
}

.about-lower__lead {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

/* ----------------------------------------------
   Trust
   ---------------------------------------------- */
.trust-lower {
  background: var(--color-base);
  padding: 96px 0 104px;
}

.trust-lower__header {
  max-width: 760px;
  margin-bottom: 40px;
}

.trust-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.trust-card {
  min-height: 188px;
  padding: 28px 24px 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.trust-card__num {
  font-family: var(--font-en);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--clay-red);
  margin-bottom: 24px;
}

.trust-card__num--text {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  min-height: 48px;
  display: flex;
  align-items: flex-end;
}

.trust-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 10px;
}

.trust-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* ----------------------------------------------
   Responsive
   ---------------------------------------------- */
@media (min-width: 768px) {
  .process-lower,
  .about-lower,
  .trust-lower {
    padding: 112px 0 120px;
  }

  .final-cta {
    padding: 112px 0 120px;
  }

  .process-lower__title,
  .about-lower__title,
  .trust-lower__title,
  .final-cta__title {
    font-size: clamp(36px, 4vw, 46px);
  }

  .process-lower__lead,
  .about-lower__lead,
  .trust-lower__lead,
  .final-cta__lead {
    font-size: 15px;
  }

  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .about-strengths {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .about-strengths__item {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 10px;
    min-height: 132px;
  }

  .trust-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .final-cta__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .final-cta__button {
    width: auto;
    min-width: 220px;
  }
}

@media (min-width: 1024px) {
  .process-lower__inner,
  .about-lower__inner,
  .trust-lower__inner,
  .final-cta__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc) * 2));
  }

  .process-lower {
    padding: 128px 0 136px;
  }

  .about-lower,
  .trust-lower {
    padding: 128px 0 136px;
  }

  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-timeline__item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 24px 26px;
  }

  .process-timeline__item::after {
    content: "";
    position: absolute;
    top: 50px;
    right: -18px;
    width: 20px;
    height: 1px;
    background: var(--problem-line-2);
  }

  .process-timeline__item:nth-child(3)::after,
  .process-timeline__item:nth-child(5)::after {
    display: none;
  }

  .about-lower__inner {
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
    gap: 64px;
  }

  .trust-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-card {
    padding: 30px 24px 28px;
  }
}


/* ==========================================================================
   Pre-launch micro polish — structure, SP readability, CTA / card tuning
   ========================================================================== */

/* html/body 両方に overflow を指定すると、環境によって二重スクロールバーの原因になるため削除 */
section {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.button {
  min-height: 52px;
  text-align: center;
}

/* Header: 6項目でも窮屈に見えないよう微調整 */
@media (min-width: 1024px) {
  .site-header__nav-list {
    gap: 24px;
  }
  .site-header__nav-list a {
    font-size: 12px;
  }
}

/* Hero: FV内でコピー・CTAを優先しつつ、右ビジュアルの落ちすぎを抑える */
@media (max-width: 767px) {
  .hero__inner {
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .hero__label {
    margin-bottom: 16px;
  }
  .hero__title {
    font-size: clamp(31px, 9.2vw, 38px);
    line-height: 1.34;
  }
  .hero__lead {
    margin-top: 20px;
    font-size: 14px;
    line-height: 2;
  }
  .hero__actions {
    margin-top: 24px;
    gap: 10px;
  }
  .hero__actions .button {
    width: 100%;
    min-height: 54px;
    white-space: normal;
  }
  .hero__proof {
    margin-top: 18px;
  }
  .hero__visual {
    margin-top: 30px;
  }
  .hero__image-wrap {
    aspect-ratio: 4 / 4.3;
  }
}

@media (min-width: 1024px) {
  .hero__inner {
    align-items: center;
    min-height: min(820px, calc(100vh - var(--header-h)));
    padding-top: 104px;
    padding-bottom: 104px;
  }
}

/* Section headings: 全体の視線誘導を少しだけ強める */
.concept__title,
.problem__title,
.brand-flow__title,
.case-section__title,
.service__title,
.process-lower__title,
.about-lower__title,
.trust-lower__title,
.final-cta__title {
  letter-spacing: -0.015em;
}

.concept__lead,
.problem__lead,
.brand-flow__lead,
.case-section__lead,
.service__lead,
.process-lower__lead,
.about-lower__lead,
.trust-lower__lead,
.final-cta__lead {
  line-height: 2.05;
}

@media (max-width: 767px) {
  .concept,
  .problem,
  .brand-flow,
  .case-section,
  .service,
  .process-lower,
  .about-lower,
  .trust-lower {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .concept__title,
  .problem__title,
  .brand-flow__title,
  .case-section__title,
  .service__title,
  .process-lower__title,
  .about-lower__title,
  .trust-lower__title,
  .final-cta__title {
    font-size: clamp(27px, 7.6vw, 34px);
    line-height: 1.48;
  }

  .concept__lead,
  .problem__lead,
  .brand-flow__lead,
  .case-section__lead,
  .service__lead,
  .process-lower__lead,
  .about-lower__lead,
  .trust-lower__lead,
  .final-cta__lead {
    font-size: 14px;
    line-height: 2.05;
  }
}

/* Cards: 見出しと本文の強弱、余白を微調整 */
.problem-card,
.bf-step,
.svc-card,
.process-timeline__item,
.trust-card,
.about-strengths__item {
  box-shadow: 0 10px 26px rgba(47, 45, 42, 0.035);
}

.contact-social__links {
  width: 220px;
  margin: 0 auto;
}

.problem-card__text,
.bf-step__text,
.svc-card__text,
.process-timeline__text,
.trust-card__text,
.about-strengths__text {
  line-height: 1.95;
}

.service__cta .button {
  min-width: 240px;
}

@media (max-width: 767px) {
  .service__cta {
    margin-top: 28px;
    padding-top: 24px;
  }
  .service__cta .button {
    width: 100%;
  }
}

/* Case Study: SPで長くなりすぎないよう、モックを2列に収める */
/* .case-featured__phone-screen::before,
.case-featured__phone-screen::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  z-index: 2;
  pointer-events: none;
}

.case-featured__phone-screen::before {
  top: 34px;
  height: 62px;
  border: 1px solid rgba(91, 70, 56, 0.14);
  border-radius: 4px;
  background:
    linear-gradient(var(--color-main), var(--color-main)) 10px 12px / 46% 7px no-repeat,
    linear-gradient(rgba(91,70,56,.22), rgba(91,70,56,.22)) 10px 28px / 72% 5px no-repeat,
    linear-gradient(rgba(91,70,56,.14), rgba(91,70,56,.14)) 10px 42px / 56% 5px no-repeat,
    rgba(255, 253, 249, 0.84);
}

.case-featured__phone-screen::after {
  bottom: 18px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-main);
  box-shadow: 0 -56px 0 rgba(91,70,56,.10), 0 -96px 0 rgba(91,70,56,.08);
  opacity: .9;
} */

.case-phase__item {
  border-color: rgba(91, 70, 56, 0.16);
}

@media (max-width: 767px) {
  .case-featured {
    padding: 24px 18px 26px;
  }
  .case-featured__body {
    gap: 24px;
  }
  .case-phase {
    gap: 16px;
  }
  .case-phase__item {
    padding: 18px 16px;
  }
  .case-phase__tag {
    margin-bottom: 8px;
  }
  .case-phase__text {
    font-size: 12.5px;
    line-height: 1.82;
  }
  .case-featured__visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  .case-featured__phone {
    width: min(128px, 100%);
    padding: 6px;
    border-radius: 18px;
  }
  .case-featured__phone-notch {
    top: 9px;
    width: 34px;
    height: 8px;
  }
  .case-featured__phone-screen {
    border-radius: 13px;
  }
  .case-featured__img-caption {
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
    text-align: center;
  }
  .case-featured__tags {
    margin-top: 22px;
    padding-top: 16px;
  }
  .case-featured__footer {
    margin-top: 22px;
    padding-top: 20px;
  }
  .case-featured__footer .button {
    width: 100%;
  }
}

/* About / Trust: 個人への相談しやすさと実務感を補強 */
.profile-card,
.trust-card {
  border-color: rgba(91, 70, 56, 0.20);
}

.trust-card__num {
  line-height: 1.15;
}

@media (max-width: 767px) {
  .about-lower__inner {
    gap: 28px;
  }
  .profile-card__text,
  .trust-card__text {
    font-size: 13.5px;
  }
  .trust-cards {
    gap: 16px;
  }
}
/* ==========================================================================
   Case Study List Page
   ========================================================================== */

.case-study-page {
  background: var(--color-base);
  color: var(--color-text);
  overflow-x: hidden;
}

.case-study-page > section {
  position: relative;
  overflow: hidden;
}

.cs-hero__inner,
.cs-intro__inner,
.cs-featured__inner,
.cs-list__inner,
.cs-final__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cs-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
  text-transform: capitalize;
}

.cs-section-label__mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}

.cs-section-label--center {
  justify-content: center;
}

/* Hero */
.cs-hero {
  padding: 88px 0 96px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(232,221,208,.45), transparent 62%),
    var(--color-base);
}

.cs-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.cs-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 7vw, 46px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}

.cs-hero__lead {
  margin-top: 24px;
  max-width: 660px;
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.cs-hero__actions {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-hero__actions .button {
  width: 100%;
}

.cs-hero__visual {
  position: relative;
  min-height: 320px;
}

.cs-board {
  background: var(--color-white);
  border: 1px solid var(--problem-line);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(47,45,42,.06);
  overflow: hidden;
}

.cs-board__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--color-card);
  border-bottom: 1px solid var(--problem-line);
}

.cs-board__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cs-board__dot--red { background: #E0A89A; }
.cs-board__dot--yellow { background: #D9C896; }
.cs-board__dot--green { background: #B8C8A6; }

.cs-board__title {
  margin-left: 8px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-text-sub);
}

.cs-board__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 22px;
  background: var(--problem-board);
}

.cs-board__note {
  min-height: 86px;
  padding: 16px;
  background: var(--problem-board-2);
  border: 1px solid var(--problem-line);
  border-radius: 4px;
}

.cs-board__note span {
  display: inline-flex;
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--clay-red);
}

.cs-board__note p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

.cs-board__note--after {
  background: rgba(143, 162, 138, 0.12);
  border-color: rgba(143, 162, 138, 0.35);
}

.cs-hero-phone {
  position: absolute;
  right: 8px;
  bottom: -28px;
  width: 116px;
  padding: 6px;
  border-radius: 18px;
  background: #2F2D2A;
  box-shadow: 0 16px 34px rgba(47,45,42,.14);
}

.cs-hero-phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 34px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: #1A1816;
  z-index: 2;
}

.cs-hero-phone__screen {
  aspect-ratio: 9 / 17;
  border-radius: 12px;
  background: var(--color-base);
  padding: 24px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-hero-phone__bar {
  display: block;
  height: 8px;
  background: var(--color-card);
  border: 1px solid var(--problem-line);
  border-radius: 2px;
}
.cs-hero-phone__bar--hero { height: 42px; }
.cs-hero-phone__bar--short { width: 68%; }
.cs-hero-phone__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-main);
  color: var(--color-base);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .12em;
}

.memo--cs-hero {
  margin-top: 18px;
}

/* Intro */
.cs-intro {
  padding: 88px 0 96px;
  background: var(--problem-bg);
}

.cs-intro::before,
.cs-featured::before,
.cs-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,.45), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgba(232,221,208,.4), transparent 60%);
  pointer-events: none;
}

.cs-intro__header {
  max-width: 760px;
  margin-bottom: 40px;
}

.cs-intro__title,
.cs-list__title,
.cs-final__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.5;
  margin: 0;
}

.cs-intro__lead,
.cs-list__lead {
  margin-top: 20px;
  max-width: 660px;
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.cs-viewpoints {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.cs-viewpoint-card {
  background: var(--color-white);
  border: 1px solid var(--problem-line);
  border-radius: 6px;
  padding: 24px;
}

.cs-viewpoint-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--problem-line);
}

.cs-viewpoint-card__num {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--clay-red);
}

.cs-viewpoint-card__en {
  padding: 3px 10px;
  border: 1px solid var(--problem-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-text-sub);
}

.cs-viewpoint-card__title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  margin: 0 0 12px;
}

.cs-viewpoint-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* Featured */
.cs-featured {
  padding: 96px 0 104px;
  background: var(--color-base);
}

.cs-featured__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.cs-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.cs-featured__meta span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  background: var(--color-white);
  border: 1px solid var(--problem-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--color-text-sub);
}

.cs-featured__meta span:first-child {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}

.cs-featured__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6.4vw, 40px);
  line-height: 1.48;
  margin: 0;
}

.cs-featured__lead {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  max-width: 650px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.cs-featured__points {
  margin-top: 28px;
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--problem-line);
  border-bottom: 1px solid var(--problem-line);
}

.cs-featured__points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}

.cs-featured__points li::before {
  content: "";
  position: absolute;
  top: .8em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176,106,91,.1);
}

.cs-featured__tags,
.cs-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-featured__tags {
  margin: 24px 0 30px;
}

.cs-featured__tags li,
.cs-case-card__tags li {
  padding: 5px 10px;
  background: var(--problem-board-2);
  border: 1px solid var(--problem-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--color-text-sub);
}

.cs-featured__visual {
  position: relative;
  padding: 0 0 52px;
}

.cs-featured__pc {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--problem-line);
  border-radius: 6px;
  background: var(--color-card);
  box-shadow: 0 18px 42px rgba(47,45,42,.08);
}

.cs-featured__pc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-featured__pc figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  background: rgba(255,253,249,.92);
  border: 1px solid var(--problem-line);
  border-radius: 3px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--color-text-sub);
}

.cs-featured__phone {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 118px;
  padding: 6px;
  border-radius: 18px;
  background: #2F2D2A;
  box-shadow: 0 16px 34px rgba(47,45,42,.14);
}

.cs-featured__phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 34px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: #1A1816;
  z-index: 2;
}

.cs-featured__phone-screen {
  aspect-ratio: 9 / 17;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-base);
}

.cs-featured__phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* List */
.cs-list {
  padding: 92px 0 104px;
  background: var(--problem-bg);
}

.cs-list__header {
  margin-bottom: 38px;
}

.cs-case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.cs-case-card {
  display: block;
  min-height: 100%;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--problem-line);
  border-radius: 6px;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.cs-case-card--active:hover {
  transform: translateY(-3px);
  border-color: var(--problem-line-2);
  box-shadow: 0 14px 34px rgba(47,45,42,.06);
}

.cs-case-card--soon {
  opacity: .72;
  background: rgba(255,253,249,.62);
}

.cs-case-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--problem-line);
}

.cs-case-card__label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--clay-red);
}

.cs-case-card__arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-base);
}

.cs-case-card__preparing {
  padding: 4px 10px;
  border: 1px solid var(--problem-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--color-text-sub);
}

.cs-case-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.cs-case-card__text {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin-bottom: 22px;
}

.cs-case-card__link {
  display: inline-flex;
  margin-top: 26px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--color-main);
}

/* Final */
.cs-final {
  padding: 92px 0 104px;
  background: var(--color-base-sub);
  border-top: 1px solid var(--problem-line-2);
  text-align: center;
}

.cs-final__lead {
  margin: 22px auto 0;
  max-width: 660px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.cs-final__actions {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}

.cs-final__actions .button {
  width: 100%;
}

/* Tablet / PC */
@media (min-width: 768px) {
  .cs-hero__actions,
  .cs-final__actions {
    flex-direction: row;
    align-items: center;
  }

  .cs-hero__actions .button,
  .cs-final__actions .button {
    width: auto;
  }

  .cs-board__body {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-board__note--wide {
    grid-column: span 2;
  }

  .cs-viewpoints {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-case-grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
  }
}

@media (min-width: 1024px) {
  .cs-hero {
    padding: 96px 0 112px;
  }

  .cs-hero__inner {
    grid-template-columns: 1.02fr .98fr;
    gap: 72px;
  }

  .cs-hero__title {
    font-size: clamp(42px, 4vw, 54px);
  }

  .memo--cs-hero {
    position: absolute;
    left: -28px;
    bottom: 18px;
    width: 260px;
    margin: 0;
    box-shadow: 0 10px 30px rgba(47,45,42,.06);
  }

  .cs-intro,
  .cs-list,
  .cs-final {
    padding-top: 112px;
    padding-bottom: 120px;
  }

  .cs-featured {
    padding-top: 120px;
    padding-bottom: 128px;
  }

  .cs-featured__inner {
    grid-template-columns: .96fr 1.04fr;
    gap: 72px;
  }
}

@media (max-width: 767px) {
  .case-study-page .button {
    min-height: 52px;
    white-space: normal;
  }

  .cs-hero,
  .cs-intro,
  .cs-featured,
  .cs-list,
  .cs-final {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .cs-hero__inner,
  .cs-intro__inner,
  .cs-featured__inner,
  .cs-list__inner,
  .cs-final__inner {
    width: min(100% - 40px, 1120px);
  }

  .cs-hero__visual {
    min-height: 360px;
  }

  .cs-hero-phone,
  .cs-featured__phone {
    width: 104px;
  }

  .cs-featured__visual {
    order: 2;
  }

  .cs-featured__content {
    order: 1;
  }

  .cs-featured__tags,
  .cs-case-card__tags {
    gap: 6px;
  }

  .cs-case-card {
    padding: 24px 22px;
  }
}


/* ==========================================================================
   Price Guide Section
   ========================================================================== */
.price-guide {
  position: relative;
  background: var(--color-base);
  padding: 96px 0 104px;
  color: var(--color-text);
  overflow: hidden;
}
.price-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255, 253, 249, 0.65), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(232, 221, 208, 0.45), transparent 62%);
  pointer-events: none;
}
.price-guide__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}
.price-guide__header {
  max-width: 760px;
  margin-bottom: 42px;
}
.price-guide__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
  text-transform: uppercase;
}
.price-guide__label-mark {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}
.price-guide__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 5.6vw, 42px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
}
.price-guide__lead {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}
.price-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
}
.price-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid rgba(91, 70, 56, 0.16);
  border-radius: 6px;
  padding: 26px 22px 24px;
  box-shadow: 0 10px 26px rgba(47, 45, 42, 0.035);
}
.price-card--featured {
  border-color: rgba(176, 106, 91, 0.36);
  background: linear-gradient(180deg, rgba(255, 253, 249, 1), rgba(251, 246, 238, 0.98));
}
.price-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(176, 106, 91, 0.10);
  border: 1px solid rgba(176, 106, 91, 0.22);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--clay-red);
}
.price-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.price-card__title {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(91, 70, 56, 0.12);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.price-card__price {
  font-family: var(--font-en);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-main);
  margin: 0 0 18px;
}
.price-card__fit {
  margin: 0;
  padding: 10px 12px;
  background: rgba(201, 130, 107, 0.075);
  border: 1px solid rgba(201, 130, 107, 0.18);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-main);
}
.price-guide__note {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.price-guide__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.price-guide__actions .button,
.service__cta--split .button {
  width: 100%;
}
@media (min-width: 768px) {
  .price-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .price-guide__actions,
  .service__cta--split {
    flex-direction: row;
    align-items: center;
  }
  .price-guide__actions .button,
  .service__cta--split .button {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .price-guide {
    padding: 120px 0 128px;
  }
  .price-guide__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }
  .price-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .price-card {
    padding: 28px 22px 26px;
  }
  .price-card__title {
    font-size: 19px;
  }
  .price-card__price {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .price-guide {
    padding: 84px 0 92px;
  }
  .price-guide__inner {
    width: min(100% - 48px, 560px);
  }
  .price-card__badge {
    position: static;
    margin-bottom: 14px;
  }
}


/* ==========================================================================
   Final micro adjustments — SEO / CTA / Price Guide
   ========================================================================== */
.service__lead {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-section__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px auto 0;
}

.case-section__actions .button {
  width: 100%;
}

@media (min-width: 768px) {
  .case-section__actions {
    flex-direction: row;
    align-items: center;
  }

  .case-section__actions .button {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .site-header__nav-list {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  body {
    overflow-x: clip;
  }

  .price-card__price {
    font-size: 28px;
    line-height: 1.15;
    word-break: keep-all;
  }

  .price-guide__actions .button,
  .service__cta--split .button,
  .case-section__actions .button {
    width: 100%;
    min-height: 52px;
  }
}


/* ==========================================================================
   Final consistency fixes — 3-page link/CTA/SP safety
   ========================================================================== */

.site-header__nav-list {
  flex-wrap: wrap;
  row-gap: 8px;
}

.case-section__actions,
.service__cta,
.price-guide__actions,
.final-cta__actions,
.cs-hero__actions,
.cs-final__actions,
.cd-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.price-card__price {
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  .button,
  .site-header__cta {
    min-height: 44px;
  }

  .case-section__actions .button,
  .service__cta .button,
  .price-guide__actions .button,
  .final-cta__actions .button,
  .cs-hero__actions .button,
  .cs-final__actions .button,
  .cd-final__actions .button {
    width: 100%;
  }

  .price-cards,
  .cs-case-list {
    grid-template-columns: 1fr !important;
  }

  .price-card,
  .cs-case-card,
  .cd-hero__image-wrap,
  .cd-before__pc,
  .cd-after__pc,
  .cd-sp-compare__board {
    max-width: 100%;
  }
}


/* ==========================================================================
   Phase 1 — Quiet Reveal & Micro-interactions
   ========================================================================== */

/* ── Hero 順番リビール ────────────────────────────────────── */
.js-enabled .js-hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 800ms var(--ease),
    transform 800ms var(--ease);
}

.js-enabled .js-hero-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── セクション見出し・カード表示 ───────────────────────────── */
.js-enabled .js-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 750ms var(--ease),
    transform 750ms var(--ease);
}

.js-enabled .js-reveal.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero 画像パララックス：hover scale との競合を抑制 ────── */
@media (min-width: 768px) {
  .hero__image-wrap:hover img {
    transform: scale(1.01); /* parallaxと競合するため控えめに */
  }
}

/* ── CTA ボタン hover 改善 ──────────────────────────────── */
.button--primary,
.button--secondary,
.site-header__cta {
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.button--primary:hover,
.button--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108, 81, 70, 0.18);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 81, 70, 0.10);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(108, 81, 70, 0.16);
}

/* 矢印ボタンの arrow は既存通り右へ */
.button--primary:hover .button__arrow {
  transform: translateX(3px);
}

/* final-cta 内ボタンも同様 */
.final-cta__actions .button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108, 81, 70, 0.18);
}

.final-cta__actions .button--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 81, 70, 0.10);
}

/* ── prefers-reduced-motion 対応 ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-hero-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .button--primary,
  .button--secondary,
  .site-header__cta {
    transition: none;
  }
}

/* ── SP：ファーストビューを空白に見せない ──────────────────── */
@media (max-width: 767px) {
  .js-enabled .js-hero-reveal {
    transition-duration: 600ms;
  }
}


/* ==========================================================================
   Phase 2-A — Case Study スクロール連動演出
   各カードをスクロールに応じて1枚ずつフェードアップ表示。
   Phase1 の js-stagger / js-reveal から完全に独立。
   ========================================================================== */

/* ── フェーズカード初期状態 ──────────────────────────────── */
.js-enabled .js-case-item {
  opacity: 0;
  transform: translateY(22px);
  /* border-left は width/style を固定して幅ブレを防ぐ */
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
  transition:
    opacity            600ms var(--ease),
    transform          600ms var(--ease),
    border-left-color  500ms var(--ease);
}

@media (min-width: 1024px) {
  .js-enabled .js-case-item {
    min-height: 320px;
  }
}

/* カード出現 */
.js-enabled .js-case-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 左アクセントライン色 */
.js-enabled .case-phase__item--before.is-active { border-left-color: rgba(138, 128, 118, 0.55); }
.js-enabled .case-phase__item--problem.is-active { border-left-color: var(--clay-red); }
.js-enabled .case-phase__item--design.is-active  { border-left-color: var(--color-main); }
.js-enabled .case-phase__item--after.is-active   { border-left-color: var(--sage); }

/* ── フェーズタグ：カード出現後に左からスライドイン ───────── */
.js-enabled .js-case-item .case-phase__tag {
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity   320ms var(--ease) 300ms,
    transform 320ms var(--ease) 300ms;
}
.js-enabled .js-case-item.is-active .case-phase__tag {
  opacity: 1;
  transform: translateX(0);
}

/* ── プログレスインジケーター ────────────────────────────── */
/* case-featured__body の外（grid非干渉）に置く前提 */
.case-phase-progress {
  display: flex;
  align-items: center;
  margin: 18px 0 22px;
}
.case-phase-progress__step {
  display: flex;
  align-items: center;
}
.case-phase-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  transition:
    background 350ms var(--ease),
    transform  280ms var(--ease);
}
.case-phase-progress__dot.is-active {
  transform: scale(1.35);
}
.case-phase-progress__dot--before.is-active  { background: rgba(138, 128, 118, 0.8); }
.case-phase-progress__dot--problem.is-active { background: var(--clay-red); }
.case-phase-progress__dot--design.is-active  { background: var(--color-main); }
.case-phase-progress__dot--after.is-active   { background: var(--sage); }

.case-phase-progress__line {
  width: 28px;
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.case-phase-progress__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.case-phase-progress__line.is-active::after {
  transform: scaleX(1);
}

/* ── Before / After スマホ対比演出 ──────────────────────── */
.js-enabled .js-case-before .case-featured__phone,
.js-enabled .js-case-after  .case-featured__phone {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity   600ms var(--ease),
    transform 600ms var(--ease);
}
.js-enabled .js-case-before.is-active .case-featured__phone {
  opacity: 0.78;   /* Before は少し落ち着いた印象 */
  transform: translateY(0);
}
.js-enabled .js-case-after.is-active .case-featured__phone {
  opacity: 1;
  transform: translateY(0);
  box-shadow:
    0 14px 32px rgba(47, 45, 42, 0.11),
    0 0 0 1px rgba(143, 162, 138, 0.18);
  /* After は 200ms 遅延で対比感を出す */
  transition:
    opacity    600ms var(--ease) 200ms,
    transform  600ms var(--ease) 200ms,
    box-shadow 600ms var(--ease) 200ms;
}

/* ── case-featured 枠：視野入りで border glow ────────────── */
.js-enabled .js-case-featured {
  transition:
    box-shadow   600ms var(--ease),
    border-color 600ms var(--ease);
}
.js-enabled .js-case-featured.is-case-visible {
  border-color: rgba(176, 106, 91, 0.22);
  box-shadow:
    0 8px 28px rgba(47, 45, 42, 0.06),
    0 0 0 1px rgba(200, 185, 170, 0.28);
}

/* ── SP ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* SP ではプログレス非表示 */
  .case-phase-progress { display: none; }

  .js-enabled .js-case-item {
    transition-duration: 450ms;
  }
  .js-enabled .js-case-item .case-phase__tag {
    transition-delay: 220ms;
  }

  /* SP：Before/Afterスマホモックは演出なし・通常表示 */
  .js-enabled .js-case-before .case-featured__phone,
  .js-enabled .js-case-after  .case-featured__phone {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-enabled .js-case-before.is-active .case-featured__phone {
    opacity: 1 !important;
  }
  .js-enabled .js-case-after.is-active .case-featured__phone {
    opacity: 1 !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-enabled .js-case-item,
  .js-enabled .js-case-item .case-phase__tag,
  .js-enabled .js-case-before .case-featured__phone,
  .js-enabled .js-case-after  .case-featured__phone,
  .case-phase-progress__dot,
  .case-phase-progress__line::after {
    transition: none !important;
    opacity:    1    !important;
    transform:  none !important;
  }
  .js-enabled .case-phase__item--before { border-left-color: rgba(138,128,118,0.55) !important; }
  .js-enabled .case-phase__item--problem { border-left-color: var(--clay-red) !important; }
  .js-enabled .case-phase__item--design  { border-left-color: var(--color-main) !important; }
  .js-enabled .case-phase__item--after   { border-left-color: var(--sage) !important; }
  .js-enabled .js-case-before .case-featured__phone { opacity: 0.78 !important; }
  .js-enabled .js-case-after  .case-featured__phone {
    opacity: 1 !important;
    box-shadow: 0 14px 32px rgba(47,45,42,0.11) !important;
  }
}

/* ==========================================================================
   service.html — Service Page Styles
   Phase 2-1 / LIORNA
   index.html の .service セクションとは独立した命名（svc-page / svc-hero 等）
   ========================================================================== */

/* ---------- Service Page 共通 ---------- */
.svc-page {
  background: var(--color-base);
  padding-top: var(--header-h);
}

/* ---------- Section Label（service.html 専用版） ---------- */
/* index.html の .problem__label / .brand-flow__label 等の命名と衝突しないよう独立管理 */
.svc-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.svc-label__mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
  flex-shrink: 0;
}
.svc-label--center {
  justify-content: center;
}

/* ---------- Breadcrumb ---------- */
.svc-breadcrumb {
  margin-bottom: 32px;
}
.svc-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-breadcrumb__list li {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.svc-breadcrumb__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border);
}
.svc-breadcrumb__list a {
  color: var(--color-text-sub);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.svc-breadcrumb__list a:hover {
  color: var(--color-main);
  border-color: var(--color-main);
}

/* ==========================================================================
   Service Hero
   ========================================================================== */
.svc-hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(232,221,208,.45), transparent 62%),
    var(--color-base);
}
.svc-hero__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6.5vw, 40px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 28px;
}
.svc-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin-bottom: 36px;
}
.svc-hero__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}
.svc-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-hero__actions .button {
  width: 100%;
}

/* ==========================================================================
   Service Overview
   ========================================================================== */
.svc-overview {
  padding: 80px 0 88px;
  background: var(--color-card);
}
.svc-overview__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-overview__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.svc-overview__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

.svc-overview-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-overview-card {
  padding: 28px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(47, 45, 42, 0.04);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.svc-overview-card:hover {
  border-color: rgba(108, 81, 70, 0.28);
  box-shadow: 0 4px 20px rgba(47, 45, 42, 0.08);
}
.svc-overview-card__num {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
  margin-bottom: 12px;
}
.svc-overview-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 12px;
}
.svc-overview-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 16px;
}
.svc-overview-card__fit {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-sub);
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}
.svc-overview-card__fit-label {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
  margin-bottom: 6px;
  vertical-align: baseline;
}
.svc-overview-card__link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-main);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.svc-overview-card__link:hover {
  border-color: var(--color-main);
}

/* ==========================================================================
   Service Detail（各サービスセクション）
   ========================================================================== */
.svc-detail {
  padding: 80px 0 88px;
  background: var(--color-base);
}
.svc-detail--alt {
  background: var(--problem-bg);
}
.svc-detail__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-detail__header {
  max-width: 720px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.svc-detail__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 10px;
}
.svc-detail__subtitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(15px, 2.5vw, 18px);
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;
}
.svc-detail__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.svc-detail__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}
.svc-detail__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}

/* Detail list */
.svc-detail__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.svc-detail__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--color-border);
}
.svc-detail__item-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  position: relative;
  padding-left: 16px;
}
.svc-detail__item-label::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--clay-red);
}
.svc-detail__item-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
  padding-left: 16px;
}

/* Detail内のmemo */
.svc-detail__memo {
  max-width: 640px;
}

/* ==========================================================================
   Scope
   ========================================================================== */
.svc-scope {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.svc-scope__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-scope__header {
  max-width: 680px;
  margin-bottom: 48px;
}
.svc-scope__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.svc-scope__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* SEO/MEO 補足 */
.svc-scope__note {
  margin-top: 24px;
  padding: 24px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--clay-red);
  border-radius: 3px;
}
.svc-scope__note-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  margin: 0 0 10px;
}
.svc-scope__note-text {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   Deliverables
   ========================================================================== */
.svc-deliverables {
  padding: 80px 0 88px;
  background: var(--problem-bg);
}
.svc-deliverables__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-deliverables__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.svc-deliverables__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.svc-deliverables__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}
.svc-deliverables__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-deliverables__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: start;
}
.svc-deliverables__num {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--clay-red);
  padding-top: 3px;
  line-height: 1;
}
.svc-deliverables__name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 4px;
}
.svc-deliverables__desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.svc-faq {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.svc-faq__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-faq__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.svc-faq__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

/* FAQ item */
.svc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  max-width: 860px;
}
.svc-faq__item {
  border-bottom: 1px dashed var(--color-border);
}
.svc-faq__question {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 18px;
}
.svc-faq__q-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--clay-red);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
}
.svc-faq__answer {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}
.svc-faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
}
.svc-faq__answer > div {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Case CTA
   ========================================================================== */
.svc-case-cta {
  padding: 72px 0 80px;
  background: var(--color-card);
  text-align: center;
}
.svc-case-cta__inner {
  width: min(640px, calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-case-cta__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 20px;
}
.svc-case-cta__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0 0 32px;
}
.svc-case-cta__actions {
  display: flex;
  justify-content: center;
}
.svc-case-cta__actions .button {
  min-width: 200px;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.svc-final {
  padding: 96px 0 100px;
  background: var(--color-base-sub);
  text-align: center;
}
.svc-final__inner {
  width: min(640px, calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.svc-final__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 24px;
}
.svc-final__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0 0 36px;
}
.svc-final__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 24px;
}
.svc-final__actions .button {
  width: 100%;
}
.svc-final__note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {

  /* Hero */
  .svc-hero {
    padding: 96px 0 104px;
  }
  .svc-hero__actions {
    flex-direction: row;
    gap: 16px;
  }
  .svc-hero__actions .button {
    width: auto;
  }

  /* Overview */
  .svc-overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Service Detail */
  .svc-detail__item {
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
  }
  .svc-detail__item-text {
    padding-left: 0;
  }

  /* Scope */
  .svc-scope__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Deliverables */
  .svc-deliverables__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--color-border);
  }
  .svc-deliverables__item {
    border-bottom: 1px dashed var(--color-border);
    border-right: 1px dashed var(--color-border);
  }
  .svc-deliverables__item:nth-child(2n) {
    border-right: 0;
  }

  /* Final */
  .svc-final__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .svc-final__actions .button {
    width: auto;
    min-width: 200px;
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {

  /* Hero */
  .svc-hero {
    padding: 120px 0 128px;
  }
  .svc-hero__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .svc-hero__title {
    font-size: 42px;
  }
  .svc-hero__lead p {
    font-size: 15px;
  }

  /* Overview */
  .svc-overview__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .svc-overview-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .svc-overview-card {
    border-radius: 0;
    border-right: 0;
  }
  .svc-overview-card:first-child {
    border-radius: 4px 0 0 4px;
  }
  .svc-overview-card:last-child {
    border-radius: 0 4px 4px 0;
    border-right: 1px solid var(--color-border);
  }

  /* Detail */
  .svc-detail {
    padding: 104px 0 112px;
  }
  .svc-detail__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .svc-detail__item-label {
    font-size: 15px;
  }
  .svc-detail__item-text {
    font-size: 14px;
    line-height: 1.9;
  }

  /* Scope */
  .svc-scope__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Deliverables */
  .svc-deliverables__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .svc-deliverables__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .svc-deliverables__item:nth-child(2n) {
    border-right: 1px dashed var(--color-border);
  }
  .svc-deliverables__item:nth-child(3n) {
    border-right: 0;
  }

  /* FAQ */
  .svc-faq__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .svc-faq__question {
    font-size: 16px;
  }
  .svc-faq__answer > div {
    font-size: 14px;
  }

  /* Case CTA / Final */
  .svc-case-cta__title {
    font-size: 30px;
  }
  .svc-final__title {
    font-size: 36px;
  }

  /* aria-current ナビスタイル */
  .site-header__nav-list a[aria-current="page"] {
    border-bottom-color: var(--color-main);
    color: var(--color-main);
  }
}

/* ==========================================================================
   prefers-reduced-motion 対応（service.html内追加なし、main.js の制御に依存）
   ========================================================================== */

/* ==========================================================================
   price.html — Price Page Styles
   Phase 2-2 / LIORNA
   index.html の .price-guide セクションとは独立した命名（price-page / price-hero 等）
   ========================================================================== */

/* ---------- Price Page 共通 ---------- */
.price-page {
  background: var(--color-base);
  padding-top: var(--header-h);
}

/* ---------- Section Label（price.html 専用版） ---------- */
.price-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.price-label__mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
  flex-shrink: 0;
}
.price-label--center {
  justify-content: center;
}

/* ---------- Breadcrumb ---------- */
.price-breadcrumb {
  margin-bottom: 32px;
}
.price-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.price-breadcrumb__list li {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.price-breadcrumb__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border);
}
.price-breadcrumb__list a {
  color: var(--color-text-sub);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.price-breadcrumb__list a:hover {
  color: var(--color-main);
  border-color: var(--color-main);
}

/* ==========================================================================
   Price Hero
   ========================================================================== */
.price-hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(232,221,208,.45), transparent 62%),
    var(--color-base);
}
.price-hero__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6.5vw, 40px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 28px;
}
.price-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin-bottom: 36px;
}
.price-hero__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}
.price-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price-hero__actions .button { width: 100%; }

/* ==========================================================================
   Plan Summary
   ========================================================================== */
.price-summary {
  padding: 80px 0 88px;
  background: var(--color-card);
}
.price-summary__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-summary__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.price-summary__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.price-summary__note {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}

/* Summary Cards */
.price-summary-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0; padding: 0;
  list-style: none;
}

.price-summary-card {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(47, 45, 42, 0.04);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.price-summary-card:hover {
  border-color: rgba(108, 81, 70, 0.28);
  box-shadow: 0 4px 20px rgba(47, 45, 42, 0.08);
}
.price-summary-card--featured {
  border-color: rgba(176, 106, 91, 0.35);
  box-shadow: 0 4px 20px rgba(47, 45, 42, 0.07);
}

.price-summary-card__badge {
  position: absolute;
  top: -1px; left: 20px;
  padding: 3px 12px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: 0 0 4px 4px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.price-summary-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--color-border);
}
.price-summary-card__plan-en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
}
.price-summary-card__price {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1;
}
.price-summary-card__price-unit {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-text-sub);
  margin-left: 2px;
}

.price-summary-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 10px;
}
.price-summary-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 14px;
}
.price-summary-card__fit {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0 0 16px;
  padding: 8px 12px;
  background: var(--color-card);
  border-radius: 2px;
}
.price-summary-card__link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-main);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.price-summary-card__link:hover { border-color: var(--color-main); }

/* ==========================================================================
   Plan Detail（各プランセクション）
   ========================================================================== */
.price-plan {
  padding: 72px 0 80px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.price-plan--alt {
  background: var(--problem-bg);
}
.price-plan--featured {
  position: relative;
}
.price-plan--featured::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--clay-red);
  opacity: 0.5;
}

.price-plan__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}

.price-plan__header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}
.price-plan__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.price-plan__recommended {
  display: inline-block;
  padding: 2px 10px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-left: 10px;
  vertical-align: middle;
}
.price-plan__price-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.price-plan__price {
  font-family: var(--font-en);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1;
}
.price-plan__price-unit {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-text-sub);
  margin-left: 2px;
}
.price-plan__period {
  font-family: var(--font-num,);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
}

/* Plan Body */
.price-plan__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.price-plan__col-title {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

/* Fit List */
.price-plan__col--fit {
  padding: 20px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--clay-red);
  border-radius: 3px;
}
.price-plan__fit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.price-plan__fit-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}
.price-plan__fit-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 1px;
  background: var(--clay-red);
}

/* Include List */
.price-plan__include-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  border-top: 1px dashed var(--color-border);
}
.price-plan__include-list li {
  padding: 10px 0 10px 18px;
  border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  position: relative;
}
.price-plan__include-list li:last-child { border-bottom: 0; }
.price-plan__include-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.6;
}

/* Note */
.price-plan__note {
  padding: 18px 20px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}
.price-plan__note-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
  margin: 0 0 10px;
}
.price-plan__note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.price-plan__note-list li {
  position: relative;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.price-plan__note-list li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: var(--color-text-sub);
  font-size: 11px;
}

/* ==========================================================================
   Compare Table
   ========================================================================== */
.price-compare {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.price-compare__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-compare__header {
  max-width: 640px;
  margin-bottom: 40px;
}
.price-compare__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

/* Scroll wrapper */
.price-compare__scroll-wrap {
  overflow: hidden;
}
.price-compare__scroll-note {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
  margin: 0 0 10px;
}
.price-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* Table */
.price-compare__table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
}
.price-compare__th {
  padding: 16px 14px;
  background: var(--color-card);
  border-bottom: 2px solid var(--color-border);
  text-align: center;
  vertical-align: bottom;
}
.price-compare__th--feature {
  text-align: left;
  width: 36%;
  min-width: 140px;
}
.price-compare__th--featured {
  background: rgba(176, 106, 91, 0.07);
  border-bottom-color: var(--clay-red);
}
.price-compare__th-plan {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  margin-bottom: 4px;
}
.price-compare__th-price {
  display: block;
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}

.price-compare__td {
  padding: 14px 12px;
  border-bottom: 1px dashed var(--color-border);
  text-align: center;
  font-size: 14px;
  color: var(--color-text-sub);
  vertical-align: middle;
}
tr:last-child .price-compare__td { border-bottom: 0; }
.price-compare__td--feature {
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text);
  padding-left: 14px;
}
.price-compare__td--featured {
  background: rgba(176, 106, 91, 0.04);
}
.price-compare__td--yes { color: var(--sage); font-weight: 500; }
.price-compare__td--partial { color: var(--color-text-sub); }
.price-compare__td--no { color: var(--color-border); }

/* Alternating row */
tbody tr:nth-child(even) .price-compare__td {
  background-color: rgba(232, 221, 208, 0.15);
}
tbody tr:nth-child(even) .price-compare__td--featured {
  background: rgba(176, 106, 91, 0.06);
}

.price-compare__legend {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--color-text-sub);
  letter-spacing: 0.04em;
  text-align: right;
}

/* ==========================================================================
   Option
   ========================================================================== */
.price-option {
  padding: 72px 0 80px;
  background: var(--problem-bg);
  border-top: 1px solid var(--color-border);
}
.price-option__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-option__header {
  max-width: 640px;
  margin-bottom: 40px;
}
.price-option__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 12px;
}
.price-option__lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

.price-option__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  margin: 0; padding: 0;
  list-style: none;
  max-width: 720px;
}
.price-option__item {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
}
.price-option__name {
  font-size: 14px;
  color: var(--color-text);
}
.price-option__price {
  font-size: 12px;
  color: var(--color-text-sub);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   Not Included
   ========================================================================== */
.price-not-included {
  padding: 72px 0 80px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.price-not-included__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-not-included__header {
  max-width: 680px;
  margin-bottom: 40px;
}
.price-not-included__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.price-not-included__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}
.price-not-included__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.price-not-included__list li {
  padding: 8px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Payment / Schedule
   ========================================================================== */
.price-payment {
  padding: 80px 0 88px;
  background: var(--problem-bg);
  border-top: 1px solid var(--color-border);
}
.price-payment__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-payment__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.price-payment__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.price-payment__note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.8;
}

/* Steps */
.price-payment__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  max-width: 720px;
}
.price-payment__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: start;
}
.price-payment__step:last-child { border-bottom: 0; }
.price-payment__step--monthly {
  opacity: 0.75;
}
.price-payment__step-num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  padding-top: 3px;
  line-height: 1;
}
.price-payment__step-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 4px;
}
.price-payment__step-text {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}

/* Billing */
.price-payment__billing {
  max-width: 480px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.price-payment__billing-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.price-payment__billing-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 14px;
}
.price-payment__billing-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: baseline;
}
.price-payment__billing-item:last-child { border-bottom: 0; }
.price-payment__billing-item dt {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
}
.price-payment__billing-item dd {
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
  font-weight: 500;
}
.price-payment__billing-note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.75;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.price-faq {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.price-faq__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-faq__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.price-faq__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}
.price-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  max-width: 860px;
}
.price-faq__item {
  border-bottom: 1px dashed var(--color-border);
}
.price-faq__question {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 18px;
}
.price-faq__q-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--clay-red);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
}
.price-faq__answer {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}
.price-faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 2px;
}
.price-faq__answer > div {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.price-final {
  padding: 96px 0 100px;
  background: var(--color-base-sub);
  text-align: center;
}
.price-final__inner {
  width: min(640px, calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.price-final__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 24px;
}
.price-final__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0 0 36px;
}
.price-final__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.price-final__actions .button { width: 100%; }
.price-final__note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.75;
}

/* ==========================================================================
   aria-current ナビスタイル（PCのみ）
   ========================================================================== */
@media (min-width: 1024px) {
  .site-header__nav-list a[aria-current="page"] {
    border-bottom-color: var(--color-main);
    color: var(--color-main);
  }
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {

  /* Hero */
  .price-hero {
    padding: 96px 0 104px;
  }
  .price-hero__actions {
    flex-direction: row;
    gap: 16px;
  }
  .price-hero__actions .button { width: auto; }

  /* Summary Cards */
  .price-summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Plan Detail */
  .price-plan__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
  }
  .price-plan__col--fit {
    grid-column: 1 / -1;
  }
  .price-plan__note {
    grid-column: 1 / -1;
  }

  /* Compare: hide scroll note */
  .price-compare__scroll-note { display: none; }

  /* Option: 2カラム */
  .price-option__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--color-border);
    gap: 0;
    max-width: none;
  }
  .price-option__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 16px;
    border-right: 1px dashed var(--color-border);
  }
  .price-option__item:nth-child(2n) { border-right: 0; }
  .price-option__price { white-space: normal; font-size: 12px; }

  /* Not Included */
  .price-not-included__list li {
    font-size: 14px;
  }

  /* Payment steps: 2カラム */
  .price-payment__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 0;
    gap: 0;
    max-width: none;
  }
  .price-payment__step {
    border-bottom: 1px dashed var(--color-border);
    border-right: 1px dashed var(--color-border);
    padding: 20px 20px 20px 0;
  }
  .price-payment__step:nth-child(2n) {
    border-right: 0;
    padding-left: 20px;
  }
  .price-payment__steps {
    border-top: 1px solid var(--color-border);
  }
  .price-payment__step:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  /* Final */
  .price-final__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .price-final__actions .button {
    width: auto;
    min-width: 200px;
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {

  /* Hero */
  .price-hero { padding: 120px 0 128px; }
  .price-hero__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Summary */
  .price-summary__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .price-summary-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .price-summary-card {
    border-radius: 0;
    border-right: 0;
  }
  .price-summary-card:first-child { border-radius: 4px 0 0 4px; }
  .price-summary-card:last-child {
    border-radius: 0 4px 4px 0;
    border-right: 1px solid var(--color-border);
  }

  /* Plan Detail */
  .price-plan__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .price-plan__body {
    grid-template-columns: 260px 1fr 1fr;
  }
  .price-plan__col--fit {
    grid-column: 1;
    grid-row: 1;
  }
  .price-plan__note {
    grid-column: 1 / -1;
  }

  /* Compare */
  .price-compare__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Option */
  .price-option__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .price-option__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .price-option__item:nth-child(2n) { border-right: 1px dashed var(--color-border); }
  .price-option__item:nth-child(3n) { border-right: 0; }

  /* Not Included */
  .price-not-included__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Payment */
  .price-payment__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* FAQ */
  .price-faq__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
}

/* ==========================================================================
   about.html — About Page Styles
   Phase 2-3 / LIORNA
   index.html の #about セクションとは独立した命名（about-page / about-hero 等）
   ========================================================================== */

/* ---------- About Page 共通 ---------- */
.about-page {
  background: var(--color-base);
  padding-top: var(--header-h);
}

/* ---------- Section Label（about.html 専用版） ---------- */
.about-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.about-label__mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
  flex-shrink: 0;
}
.about-label--center { justify-content: center; }

/* ---------- Breadcrumb ---------- */
.about-breadcrumb { margin-bottom: 32px; }
.about-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.about-breadcrumb__list li {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.about-breadcrumb__list li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border);
}
.about-breadcrumb__list a {
  color: var(--color-text-sub);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.about-breadcrumb__list a:hover {
  color: var(--color-main);
  border-color: var(--color-main);
}

/* ==========================================================================
   About Hero
   ========================================================================== */
.about-hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 100%, rgba(232,221,208,.45), transparent 62%),
    var(--color-base);
}
.about-hero__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6.5vw, 40px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 28px;
}
.about-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin-bottom: 36px;
}
.about-hero__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}
.about-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-hero__actions .button { width: 100%; }

/* ==========================================================================
   Profile
   ========================================================================== */
.about-profile {
  padding: 70px 0 80px;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
}
.about-profile__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}

/* SP：写真上・テキスト下の縦積み */
.about-profile__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 写真カラム */
.about-profile__visual {
  width: 100%;
  max-width: 320px;  /* SP時は中央寄せで上限幅 */
  margin: 0 auto;
}
.about-profile__photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  margin: 0;
  background: var(--color-base-sub);
  box-shadow:
    0 4px 24px rgba(47, 45, 42, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.about-profile__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.about-profile__photo-wrap:hover .about-profile__photo {
  transform: scale(1.02);
}

/* テキストカラム */
.about-profile__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Identity */
.about-profile__identity {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.about-profile__en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--clay-red);
  margin: 0 0 6px;
}
.about-profile__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.about-profile__role {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
  margin: 0;
}

/* Body */
.about-profile__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-profile__text {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}

/* Skills tags */
.about-profile__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
  padding-top: 20px;
  border-top: 1px dashed var(--color-border);
}
.about-profile__skills li {
  padding: 4px 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Why
   ========================================================================== */
.about-why {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.about-why__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-why__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.about-why__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}
.about-why__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 720px;
}
.about-why__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-why__lead p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}
.about-why__memo {
  /* .memo は既存スタイルを活用 */
}

/* ==========================================================================
   Strength
   ========================================================================== */
.about-strength {
  padding: 80px 0 88px;
  background: var(--problem-bg);
  border-top: 1px solid var(--color-border);
}
.about-strength__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-strength__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.about-strength__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

/* Strength Cards */
.about-strength-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0; padding: 0;
  list-style: none;
}
.about-strength-card {
  padding: 28px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(47, 45, 42, 0.04);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.about-strength-card:hover {
  border-color: rgba(108, 81, 70, 0.28);
  box-shadow: 0 4px 18px rgba(47, 45, 42, 0.08);
}
.about-strength-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.about-strength-card__num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.about-strength-card__en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  padding: 2px 8px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.about-strength-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 10px;
}
.about-strength-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   Work Style
   ========================================================================== */
.about-work-style {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.about-work-style__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-work-style__header {
  max-width: 720px;
  margin-bottom: 48px;
}
.about-work-style__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.about-work-style__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

/* Steps */
.about-work-style__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0; padding: 0;
  list-style: none;
  max-width: 720px;
}
.about-work-style__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: start;
}
.about-work-style__step:last-child { border-bottom: 0; }
.about-work-style__step-num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  padding-top: 3px;
  line-height: 1;
}
.about-work-style__step-title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 6px;
}
.about-work-style__step-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   Skills
   ========================================================================== */
.about-skills {
  padding: 80px 0 88px;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
}
.about-skills__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-skills__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.about-skills__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.about-skills__note {
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}

/* Skills Grid */
.about-skills__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.about-skills__col-title {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* Skills List */
.about-skills__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0; padding: 0;
  list-style: none;
  border-top: 1px dashed var(--color-border);
}
.about-skills__item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: baseline;
}
.about-skills__item:last-child { border-bottom: 0; }
.about-skills__item-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
}
.about-skills__item-note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Partner Work
   ========================================================================== */
.about-partner {
  padding: 80px 0 88px;
  background: var(--problem-bg);
  border-top: 1px solid var(--color-border);
}
.about-partner__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-partner__header {
  max-width: 720px;
  margin-bottom: 40px;
}
.about-partner__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 16px;
}
.about-partner__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
  max-width: 640px;
}

/* Partner List */
.about-partner__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  max-width: 640px;
}
.about-partner__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: baseline;
}
.about-partner__item:last-child { border-bottom: 0; }
.about-partner__item-en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.about-partner__item-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

.about-partner__memo {
  max-width: 640px;
}

/* ==========================================================================
   Trust
   ========================================================================== */
.about-trust {
  padding: 80px 0 88px;
  background: var(--color-base);
  border-top: 1px solid var(--color-border);
}
.about-trust__inner {
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-trust__header {
  max-width: 640px;
  margin-bottom: 48px;
}
.about-trust__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

/* Trust Cards */
.about-trust-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0; padding: 0;
  list-style: none;
}
.about-trust-card {
  padding: 24px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  border-left: 2px solid rgba(176, 106, 91, 0.35);
  box-shadow: 0 1px 8px rgba(47, 45, 42, 0.04);
}
.about-trust-card__num {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
  margin-bottom: 10px;
}
.about-trust-card__title {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 10px;
}
.about-trust-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   Case CTA
   ========================================================================== */
.about-case-cta {
  padding: 72px 0 80px;
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.about-case-cta__inner {
  width: min(640px, calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-case-cta__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 20px;
}
.about-case-cta__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0 0 32px;
}
.about-case-cta__actions {
  display: flex;
  justify-content: center;
}
.about-case-cta__actions .button { min-width: 200px; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.about-final {
  padding: 96px 0 100px;
  background: var(--color-base-sub);
  text-align: center;
}
.about-final__inner {
  width: min(640px, calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}
.about-final__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 24px;
}
.about-final__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0 0 36px;
}
.about-final__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.about-final__actions .button { width: 100%; }
.about-final__note {
  font-size: 12px;
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.75;
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {

  /* Hero */
  .about-hero { padding: 96px 0 104px; }
  .about-hero__actions { flex-direction: row; gap: 16px; }
  .about-hero__actions .button { width: auto; }

  /* Profile */
  .about-profile__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
  }
  .about-profile__visual {
    flex: 0 0 220px;
    max-width: 220px;
    margin: 0;
  }
  .about-profile__content {
    flex: 1;
    min-width: 0;
  }

  /* Strength Cards */
  .about-strength-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Work Style steps */
  .about-work-style__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 0;
    gap: 0;
    max-width: none;
  }
  .about-work-style__step {
    border-bottom: 1px dashed var(--color-border);
    border-right: 1px dashed var(--color-border);
    padding: 24px 20px 24px 0;
  }
  .about-work-style__step:nth-child(2n) {
    border-right: 0;
    padding-left: 20px;
  }
  .about-work-style__steps {
    border-top: 1px solid var(--color-border);
  }
  .about-work-style__step:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-border);
  }

  /* Skills */
  .about-skills__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
  }
  .about-skills__item {
    grid-template-columns: 140px 1fr;
  }

  /* Trust Cards */
  .about-trust-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Final */
  .about-final__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .about-final__actions .button {
    width: auto;
    min-width: 200px;
  }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {

  /* Hero */
  .about-hero { padding: 120px 0 128px; }
  .about-hero__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Profile */
  .about-profile__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .about-profile__visual {
    flex: 0 0 280px;
    max-width: 280px;
  }

  /* Why */
  .about-why__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Strength */
  .about-strength__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .about-strength-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .about-strength-card {
    border-radius: 0;
    border-right: 0;
  }
  .about-strength-card:first-child { border-radius: 4px 0 0 4px; }
  .about-strength-card:last-child {
    border-radius: 0 4px 4px 0;
    border-right: 1px solid var(--color-border);
  }

  /* Work Style */
  .about-work-style__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .about-work-style__steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .about-work-style__step:nth-child(2n) {
    border-right: 1px dashed var(--color-border);
    padding-left: 0;
  }
  .about-work-style__step:nth-child(3n) {
    border-right: 0;
  }
  .about-work-style__step:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--color-border);
  }
  /* 最終行のborder修正 */
  .about-work-style__step:last-child,
  .about-work-style__step:nth-last-child(2):nth-child(3n+2),
  .about-work-style__step:nth-last-child(3):nth-child(3n+1) {
    border-bottom: 0;
  }

  /* Skills */
  .about-skills__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .about-skills__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
  }
  .about-skills__item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .about-skills__item-name { font-size: 14px; }

  /* Partner */
  .about-partner__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }

  /* Trust */
  .about-trust__inner {
    width: min(var(--max-width), calc(100% - var(--side-pad-pc) * 2));
  }
  .about-trust-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .about-trust-card {
    border-radius: 0;
    border-left: 1px solid var(--color-border);
    border-right: 0;
    border-left-width: 1px;
  }
  .about-trust-card:first-child {
    border-left: 2px solid rgba(176, 106, 91, 0.35);
    border-radius: 4px 0 0 4px;
  }
  .about-trust-card:last-child {
    border-right: 1px solid var(--color-border);
    border-radius: 0 4px 4px 0;
  }

  /* aria-current ナビスタイル */
  .site-header__nav-list a[aria-current="page"] {
    border-bottom-color: var(--color-main);
    color: var(--color-main);
  }
}

/* ==========================================================================
   index.html Phase 3 — Summary Section Adjustments
   ========================================================================== */

/* ---------- Service Summary: svc-card の簡略化 ---------- */
/* scopeタグ・fitテキストを非表示（summary版では不要） */
.svc-card__scope { display: none; }

/* Service CTA — 中央ボタン1つ */
.service__cta {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  justify-content: center;
}
.service__cta .button { width: 100%; }
@media (min-width: 768px) {
  .service__cta .button { width: auto; }
}

/* ---------- Price Summary: price-card の price-unit ---------- */
.price-card__price-unit {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-text-sub);
  margin-left: 2px;
}

/* Price Guide Actions — 中央ボタン1つ */
.price-guide__actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.price-guide__actions .button { width: 100%; }
@media (min-width: 768px) {
  .price-guide__actions .button { width: auto; }
}

/* ---------- About Summary: about-lower__link ---------- */
.about-lower__link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* FAQ */
/* ── FAQ アコーディオン（details / summary） ── */
.trust-faq {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px dashed var(--color-border);
}
.trust-faq__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 4vw, 24px);
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 24px;
}

/* リスト */
.trust-faq__list {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

/* アイテム（details要素） */
.trust-faq__item {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
}

/* summary（質問行） */
.trust-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
  /* ユーザーエージェントのデフォルト余白リセット */
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
/* Chrome/Safari のデフォルト三角を非表示 */
.trust-faq__q::-webkit-details-marker { display: none; }
.trust-faq__q::marker { display: none; }

.trust-faq__q-text {
  flex: 1;
}

/* ＋ / ー アイコン */
.trust-faq__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
}
/* シェブロン：::before を1本の折れ線で表現 */
.trust-faq__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-text-sub);
  border-bottom: 1.5px solid var(--color-text-sub);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 240ms var(--ease);
}
/* 開いているとき：上向きに反転 */
.trust-faq__item[open] .trust-faq__icon::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

/* 回答エリア */
.trust-faq__a {
  padding: 0 22px 20px;
}
.trust-faq__a p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

/* FAQ下：Contactへの補助導線 */
.trust-faq__cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  max-width: 760px;
}
.trust-faq__cta-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.7;
}
.trust-faq__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-main);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.trust-faq__cta-link:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px) {
  .trust-faq        { margin-top: 40px; }
  .trust-faq__q     { padding: 17px 16px; font-size: 14px; }
  .trust-faq__a     { padding: 0 16px 18px; }
  .trust-faq__a p   { font-size: 14px; }
  .trust-faq__cta   {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
  }
}
@media (min-width: 768px) {
  .trust-faq__q     { font-size: 15px; }
  .trust-faq__q     { padding: 22px 24px; }
  .trust-faq__a     { padding: 0 24px 22px; }
}
@media (min-width: 1024px) {
  .trust-faq { max-width: none; }
}

/* ==========================================================================
   Phase 4 — Public readiness
   ========================================================================== */

/* profile.jpg 未配置時のプレースホルダー
   画像が存在しない場合でも about-profile__photo-wrap の
   aspect-ratio: 3/4 + background-color で枠が崩れない */
.about-profile__photo-wrap:not(:has(img[src])),
.about-profile__photo[src="images/profile.jpg"]:not([complete]) {
  /* imgが読み込めない場合でも背景色で枠を維持する */
}
/* 代替表示：broken imageアイコンを隠してbg色を見せる */
.about-profile__photo {
  /* broken imageを非表示にする代わりに背景を見せる */
  color: transparent; /* alt テキストを非表示 */
}

/* ==========================================================================
   Phase 5 — SP Hamburger Menu & Contact Form
   ========================================================================== */

/* ---------- Hamburger Button ---------- */
.site-header__menu-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease);
}
.site-header__menu-button:hover {
  border-color: var(--color-main);
}
.head-right {
  display: flex;
  gap: 24px;
}

.site-header__menu-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-main);
  border-radius: 1px;
  transition:
    transform var(--dur-base) var(--ease),
    opacity   var(--dur-base) var(--ease);
  transform-origin: center;
}

/* 開いた状態：×に変形 */
.site-header__menu-button.is-active .site-header__menu-bar:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}
.site-header__menu-button.is-active .site-header__menu-bar:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* PCではハンバーガーを非表示 */
@media (min-width: 1024px) {
  .site-header__menu-button { display: none; }

}

/* ---------- SP Menu Overlay ---------- */
.sp-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  /* オーバーレイ背景 */
  background: rgba(47, 45, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

/* 開いた状態 */
.sp-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- SP Menu Panel ---------- */
.sp-menu__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-white);
  padding: calc(var(--header-h) + 24px) 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(47, 45, 42, 0.10);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}

.sp-menu[aria-hidden="false"] .sp-menu__inner {
  transform: translateX(0);
}

/* ---------- SP Menu Nav ---------- */
.sp-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.sp-menu__link {
  display: block;
  padding: 18px 0;
  border-bottom: 1px dashed var(--color-border);
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--color-text);
  transition: color var(--dur-base) var(--ease), padding-left var(--dur-base) var(--ease);
}
.sp-menu__link:hover,
.sp-menu__link:focus-visible {
  color: var(--color-main);
  padding-left: 8px;
}

/* ---------- SP Menu CTA ---------- */
.sp-menu__cta {
  width: 100%;
  justify-content: center;
}

/* ---------- Body scroll lock ---------- */
/* SPメニュー表示中はbodyスクロールを止める。
   overflow-x: clip を維持しつつ、縦方向をhiddenにする方式。
   html の overflow-y: auto はそのまま維持する。 */
body.is-menu-open {
  overflow: hidden;
}

/* PCではis-menu-openを無視（念のため） */
@media (min-width: 1024px) {
  body.is-menu-open { overflow: initial; }
}

/* ==========================================================================
   Contact Form
   ========================================================================== */
.contact-form {
  margin-top: 40px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.contact-form__required {
  padding: 2px 7px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.contact-form__optional {
  min-width: 39px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-sub);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  background: var(--color-white);
  border: 1px solid rgba(108, 81, 70, 0.28);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 16px; /* SPでの読みやすさ・iOSの自動ズーム抑制 */
  line-height: 1.7;
  color: var(--color-text);
  caret-color: var(--color-main);
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--dur-base) var(--ease),
    border-color     var(--dur-base) var(--ease),
    box-shadow       var(--dur-base) var(--ease);
  box-sizing: border-box;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #6F665E;
  opacity: 0.78;
}
.contact-form__input:hover,
.contact-form__textarea:hover {
  border-color: rgba(108, 81, 70, 0.46);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  background: #FFFDF9;
  border-color: var(--color-main);
  box-shadow: 0 0 0 4px rgba(108, 81, 70, 0.14);
}

/* バリデーション */
.contact-form__input:user-invalid,
.contact-form__textarea:user-invalid,
.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"],
.contact-form__input.is-error,
.contact-form__textarea.is-error {
  border-color: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.14);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form__group.is-error .contact-form__error,
.contact-form__error.is-active {
  display: block;
}

.contact-form__privacy {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 24px;
  text-align: center;
}
.contact-form__privacy-link {
  color: var(--color-main);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.contact-form__privacy-link:hover { border-color: var(--color-main); }

.contact-form__submit {
  width: 100%;
  cursor: pointer;
}


@media (max-width: 767px) {
  .contact-form {
    margin-top: 32px;
  }

  .contact-form__fields {
    gap: 20px;
  }

  .contact-form__label {
    font-size: 14px;
  }

  .contact-form__input,
  .contact-form__textarea {
    min-height: 54px;
    padding: 15px 14px;
  }

  .contact-form__submit {
    border: 1px solid var(--about-bg);
    min-height: 54px;
  }
}

@media (min-width: 768px) {
  .contact-form__submit {
    border: 1px solid var(--about-bg);
    width: auto;
    min-width: 240px;
    display: flex;
    margin: 0 auto;
  }
}

/* ==========================================================================
   PHASE 2 — カラー・UIトーン改善 (Override)
   ========================================================================== */

/* ---- Header ---- */
.site-header {
  background: rgba(248, 244, 238, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-border-light);
}
.site-header__cta {
  background: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.site-header__cta:hover {
  background: var(--color-main-hover);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* ---- Buttons ---- */
.button { font-weight: 600; letter-spacing: 0.05em; }

.button--primary {
  background: var(--color-main);
  color: var(--color-white);
  border: 1px solid var(--color-main);
  box-shadow: var(--shadow-cta);
}
.button--primary:hover {
  background: var(--color-main-hover);
  border-color: var(--color-main-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(90, 62, 53, 0.22);
}
.button--secondary {
  background: rgba(255, 253, 249, 0.65);
  color: var(--color-main);
  border: 1.5px solid var(--color-border);
}
.button--secondary:hover {
  background: var(--color-white);
  border-color: var(--color-main);
  transform: translateY(-1px);
}

/* ---- Hero ---- */
.hero {
  background: linear-gradient(160deg, #F8F4EE 0%, #F3E9DE 55%, #EFE5DA 100%);
}

/* ---- Memo ---- */
.memo {
  background: var(--color-card);
  border-left: 2.5px solid var(--color-accent);
  border-top: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.memo__label { color: var(--color-accent); font-size: 12px; letter-spacing: 0.15em; }

/* ---- Problem Section ---- */
.problem { background: var(--color-section-warm); }
.problem::before {
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255,253,249,0.55), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(231,214,200,0.45), transparent 60%);
}

/* Problem cards (new style) */
.problem-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.problem-card:hover {
  border-color: var(--color-border);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

/* ---- Concept Section ---- */
.concept { background: var(--color-card); }
.concept::before {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(248,244,238,0.75), transparent 60%);
}

/* ---- Brand Flow ---- */
.brand-flow { background: var(--color-card-warm); }
.brand-flow::before {
  background:
    radial-gradient(1000px 500px at 0% 0%, rgba(255,253,249,0.6), transparent 60%);
}

/* ---- SP Menu ---- */
.sp-menu { background: rgba(43, 37, 34, 0.40); }
.sp-menu__inner {
  background: var(--color-white);
  box-shadow: -6px 0 32px rgba(43,37,34,0.12);
}
.sp-menu__link { border-bottom: 1px dashed var(--color-border-light); }
.sp-menu__link:hover, .sp-menu__link:focus-visible { color: var(--color-accent); }

/* ---- Flow Diagram ---- */
.flow {
  background: var(--color-card-warm);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
}
.flow::before { background: var(--color-accent); opacity: 0.4; }

/* ---- Diag ---- */
.diag {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.redpin__dot { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(184,121,104,0.18); }

/* ---- Contact Form ---- */
:root { --about-bg: var(--color-white); }
.contact-form__input,
.contact-form__textarea {
  background: rgba(255,253,249,0.96);
  border: 1.5px solid var(--color-border-light);
  border-radius: 8px;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-main);
  box-shadow: 0 0 0 4px rgba(90,62,53,0.12);
  background: var(--color-white);
}

/* ---- Case Study Page: Hero ---- */
.cs-hero {
  background: radial-gradient(900px 520px at 0% 0%, rgba(255, 253, 249, .55), transparent 62%), radial-gradient(900px 520px at 100% 100%, rgba(232, 221, 208, .45), transparent 62%), var(--color-base);
}

.color-accent {
  color: var(--color-accent);
}

/* Improvement Board */
.cs-board {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cs-board__head {
  background: var(--color-card-warm);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 12px 12px 0 0;
}
.cs-board__body { background: var(--color-card); }
.cs-board__note {
  background: var(--color-card-warm);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
}
.cs-board__note span { color: var(--color-accent); }
.cs-board__note--after {
  background: rgba(143,162,138,0.10);
  border-color: rgba(143,162,138,0.30);
}
.cs-hero-phone__bar {
  background: var(--color-card-warm);
  border: 1px solid var(--color-border-light);
}
.cs-hero-phone__cta { background: var(--color-main); color: var(--color-white); }

/* Intro */
.cs-intro { background: var(--color-section-warm); position: relative; }
.cs-intro::before {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,0.45), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgba(231,214,200,0.4), transparent 60%);
}

/* Viewpoint Cards */
.cs-viewpoint-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cs-viewpoint-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.cs-viewpoint-card__head { border-bottom: 1px solid var(--color-border-light); }
.cs-viewpoint-card__num { color: var(--color-accent); }

/* Featured */
.cs-featured { background: var(--color-base); }
.cs-featured__pc {
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.cs-featured__points {
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.cs-featured__points li::before { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(184,121,104,0.10); }
.cs-featured__meta span { background: var(--color-card); border-color: var(--color-border-light); }
.cs-featured__meta span:first-child { background: var(--color-main); border-color: var(--color-main); color: var(--color-white); }
.cs-featured__tags li, .cs-case-card__tags li { background: var(--color-card-warm); border-color: var(--color-border-light); }

/* Case List */
.cs-list { background: var(--color-section-warm); }

/* Case Cards */
.cs-case-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--shadow-card);
}
.cs-case-card--active:hover {
  transform: translateY(-4px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-soft);
}
.cs-case-card--soon { opacity: 0.68; background: rgba(255,253,249,0.55); }
.cs-case-card__head { border-bottom: 1px solid var(--color-border-light); }
.cs-case-card__label { color: var(--color-accent); }
.cs-case-card__arrow { background: var(--color-main); color: var(--color-white); }
.cs-case-card__link { color: var(--color-main); }

/* Final CTA */
.cs-final { background: var(--color-section-deep); border-top: 1px solid var(--color-border); }
.cs-final::before {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,253,249,0.30), transparent 60%),
    radial-gradient(900px 520px at 100% 100%, rgba(216,201,188,0.35), transparent 60%);
}

/* Section label override */
.cs-section-label { font-size: 12px; letter-spacing: 0.20em; font-weight: 600; }

/* Heading size upgrades */
.cs-hero__title { font-size: clamp(34px, 7vw, 40px); line-height: 1.32; }
.cs-intro__title, .cs-list__title, .cs-final__title { font-size: clamp(30px, 5vw, 40px); line-height: 1.42; }
.cs-featured__title { font-size: clamp(30px, 5.4vw, 40px); line-height: 1.45; }

/* PC */
@media (min-width: 1024px) {
  .button--primary { padding: 0 36px; }
  .button--secondary { padding: 0 32px; }
  .cs-case-card { padding: 36px; }
  .cs-viewpoint-card { padding: 32px; }
}
/* SP */
@media (max-width: 767px) {
  .button { height: 54px; }
  .cs-case-card { padding: 26px; border-radius: 14px; }
  .cs-viewpoint-card { padding: 22px; border-radius: 12px; }
}

/* ==========================================================================
   PHASE 3 — Hero Section 改善
   メインコピー強化・SP整理・ビジュアル整理
   ========================================================================== */

/* ---- Hero 背景グラデーション ---- */
.hero {
  background: linear-gradient(
    155deg,
    #F8F4EE 0%,
    #F3E9DE 52%,
    #EFE5DA 100%
  );
}

/* ---- Hero Inner: ヘッダー分の余白調整 ---- */
.hero__inner {
  padding-top: calc(var(--header-h) + var(--space-3xl));
  padding-bottom: var(--space-3xl);
}

/* ---- Hero Label: 上品・コンパクトに ---- */
.hero__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-light, #A1948A);
}
.hero__label-en {
  color: var(--color-text-light, #A1948A);
}
.hero__label-sep {
  color: var(--color-border);
  font-size: 12px;
}

/* ---- Hero Title: 主役・大きく ---- */
.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 7.5vw, 48px);
  line-height: 1.30;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
}

/* ---- Hero Lead: 落ち着いた本文 ---- */
.hero__lead {
  margin-top: 28px;
  font-size: 14px;
  line-height: 2.0;
  color: var(--color-text-sub);
  max-width: 520px;
}

/* ---- Hero Actions: CTA周辺に余白 ---- */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 36px;
  width: 100%;
}
.hero__actions .button { width: 100%; }
.memo--hero .memo__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 5px;
}
.memo--hero .memo__text {
  font-size: 12px;
  line-height: 1.75;
}

/* ==========================================================================
   PC (>=1024px): Hero レイアウト
   ========================================================================== */
@media (min-width: 1024px) {

  .hero__inner {
    padding: var(--space-5xl) var(--side-pad-pc) var(--space-4xl);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    min-height: calc(100vh - var(--header-h));
    align-items: center;
  }

  .hero__copy {
    grid-column: 1 / span 6;
    align-self: center;
  }
  .hero__visual {
    grid-column: 7 / span 6;
    margin-top: 0;
  }

  /* Label */
  .hero__label {
    font-size: 12px;
    letter-spacing: 0.20em;
    margin-bottom: 32px;
  }

  /* Title: PCではさらに大きく */
  .hero__title {
    font-size: clamp(44px, 3.8vw, 62px);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  /* Lead */
  .hero__lead {
    margin-top: 32px;
    font-size: 15px;
    line-height: 2.0;
    color: var(--color-text-sub);
    max-width: 500px;
  }

  /* CTA: 横並び */
  .hero__actions {
    flex-direction: row;
    width: auto;
    margin-top: 44px;
    gap: 16px;
  }
  .hero__actions .button { width: auto; min-width: 180px; }
  .hero__actions .button--primary { min-width: 200px; }

  /* 対応領域タグ: PCで表示 */
  .hero__proof--pc {
    display: flex;
    margin-top: 40px;
  }

  /* メイン画像: PC では縦長に */
  .hero__image-wrap {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    aspect-ratio: 4 / 5;
    border-radius: 14px;
  }

  /* FigmaカードPC: 画像左上に浮かせる */
  .hero__figma-card {
    display: block;
    position: absolute;
    top: 28px;
    left: -96px;
    width: 260px;
    margin: 0;
    z-index: 3;
    box-shadow: var(--shadow-soft, 0 18px 50px rgba(47, 42, 38, 0.08));
  }

  /* メモPC: 画像左下に浮かせる */
  .memo--hero {
    position: absolute;
    bottom: 20px;
    left: -56px;
    width: 256px;
    margin: 0;
    z-index: 4;
    box-shadow: 0 8px 28px rgba(47, 42, 38, 0.06);
    padding: 18px 20px;
  }
  .memo--hero .memo__label { font-size: 12px; }
  .memo--hero .memo__text { font-size: 12px; line-height: 1.8; }

  /* 赤入れピンPC: 右サイドに控えめに */
  .redline-pin--hero {
    display: inline-flex;
    position: absolute;
    top: 56%;
    right: 260px;
    z-index: 5;
    font-size: 11px;
  }
  .redline-pin--hero .redline-pin__dot {
    width: 8px;
    height: 8px;
  }
  .redline-pin--hero .redline-pin__line {
    width: 18px;
  }
  .redline-pin--hero .redline-pin__text {
    font-size: 12px;
    padding: 2px 7px;
  }

}

/* ==========================================================================
   Tablet (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner {
    padding: calc(var(--header-h) + 48px) 40px 56px;
  }
  .hero__title {
    font-size: 44px;
    line-height: 1.28;
  }
  .hero__lead { font-size: 15px; }
  .hero__actions {
    flex-direction: row;
    width: auto;
    gap: 14px;
  }
  .hero__actions .button { width: auto; }
  .hero__image-wrap { aspect-ratio: 16 / 9; border-radius: 12px; }
}


/* ==========================================================================
   PHASE 4 — Difference Section
   "ただ作るのではなく、予約までの流れを整える。"
   ========================================================================== */

.difference {
  position: relative;
  background: var(--color-section-deep, #E7D6C8);
  padding: 88px 0 96px;
  color: var(--color-text);
  overflow: hidden;
}

.difference::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 0% 0%, rgba(255, 253, 249, 0.40), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(216, 201, 188, 0.35), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.difference__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

/* --- Header --- */
.difference__header {
  max-width: 720px;
  margin-bottom: 48px;
}

.difference__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.20em;
  font-weight: 600;
  color: var(--color-accent, #B87968);
}
.difference__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #B87968);
  box-shadow: 0 0 0 4px rgba(184, 121, 104, 0.14);
}

.difference__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 20px;
}

.difference__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
  max-width: 640px;
}

/* --- Compare Layout: SP縦積み --- */
.difference__compare {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Columns --- */
.difference__col {
  padding: 32px 28px;
  border-radius: 16px;
}

.difference__col--normal {
  background: rgba(255, 253, 249, 0.55);
  border: 1px solid var(--color-border-light, #E8DDD2);
}

.difference__col--akane {
  background: var(--color-card, #FFFDF9);
  border: 1.5px solid var(--color-border, #D8C9BC);
  box-shadow: 0 12px 32px rgba(47, 42, 38, 0.07);
  margin-top: 16px;
}

.difference__col-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-light, #E8DDD2);
}

.difference__col--akane .difference__col-title {
  color: var(--color-main, #5A3E35);
  border-bottom-color: var(--color-border, #D8C9BC);
}

.difference__col-title-en {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-main, #5A3E35);
}

/* --- Lists --- */
.difference__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.difference__item {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
}

.difference__col--normal .difference__item {
  color: var(--color-text-sub);
  font-size: 14px;
}

/* Normal: 薄いバー */
.difference__col--normal .difference__item::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--color-text-light, #A1948A);
}

/* Akane: アクセントドット */
.difference__col--akane .difference__item::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 1px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent, #B87968);
  box-shadow: 0 0 0 3px rgba(184, 121, 104, 0.12);
}

/* --- Divider: SPでは横線 --- */
.difference__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin: 8px 0;
}
.difference__divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-border, #D8C9BC);
}
.difference__divider-mark {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
}

/* ==========================================================================
   PC (>=1024px): Difference — 横並び比較
   ========================================================================== */
@media (min-width: 1024px) {
  .difference {
    padding: 120px 0 128px;
  }
  .difference__inner {
    width: min(1120px, calc(100% - var(--side-pad-pc, 72px) * 2));
  }
  .difference__title {
    font-size: clamp(34px, 3.2vw, 42px);
  }
  .difference__lead { font-size: 15px; }
  .difference__header { margin-bottom: 56px; }

  /* 横並び */
  .difference__compare {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .difference__col {
    flex: 1;
    padding: 36px 32px;
    border-radius: 18px;
  }
  .difference__col--akane {
    margin-top: 0;
  }

  /* Divider: 縦線 */
  .difference__divider {
    flex-direction: column;
    align-items: center;
    padding: 0 36px;
    margin: 0;
  }
  .difference__divider-line {
    width: 1px;
    height: 100%;
    flex: 1;
    background: var(--color-border, #D8C9BC);
  }
  .difference__divider-mark {
    padding: 12px 0;
    writing-mode: horizontal-tb;
  }

  .difference__item { font-size: 14px; }
}

/* ==========================================================================
   Tablet (768px - 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .difference { padding: 96px 0 104px; }
  .difference__col { padding: 28px 24px; }
}

/* ==========================================================================
   PHASE 4 — Problem cards 具体的化に伴うサイズ調整
   ========================================================================== */
.problem-card__text {
  font-size: 14px;
  line-height: 1.85;
}

/* ==========================================================================
   PHASE 4 — Brand Flow title wrap
   ========================================================================== */
@media (max-width: 767px) {
  .brand-flow__title { font-size: clamp(24px, 6vw, 30px); line-height: 1.45; }
}

/* ==========================================================================
   PHASE 4 — Concept step titles 具体化
   ========================================================================== */
@media (min-width: 1024px) {
  .concept__title {
    font-size: clamp(34px, 3.4vw, 44px);
    line-height: 1.45;
  }
}


/* ==========================================================================
   PHASE 5 — Case Study / Concept Work 強化
   ========================================================================== */

/* ---- case-study.htmlのfeatured leadにCW注記 ---- */
.cs-featured__note-cw {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--color-card-warm, #FBF5EF);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-sub);
  font-family: var(--font-sans);
}

/* ---- Case Card: Concept Work Badge ---- */
.cs-case-card__cw-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--color-accent-bg, #F6E7E1);
  border: 1px solid var(--color-accent-soft, #E8C9BE);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-accent, #B87968);
  font-weight: 500;
}

/* ---- Case Card: 業種・課題ラベル ---- */
.cs-case-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  margin-top: 4px;
}
.cs-case-card__genre {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
}

.cs-case-card__challenge {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--color-card-warm, #FBF5EF);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-sub);
}
.cs-case-card__challenge-label {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-light, #A1948A);
  text-transform: uppercase;
}

/* ---- case-detail.html: CW Notice ---- */
.cd-cw-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 36px;
  padding: 16px 20px;
  background: var(--color-card-warm, #FBF5EF);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-left: 3px solid var(--color-accent, #B87968);
  border-radius: 10px;
}
.cd-cw-notice__tag {
  flex-shrink: 0;
  padding: 2px 10px;
  background: var(--color-accent-bg, #F6E7E1);
  border: 1px solid var(--color-accent-soft, #E8C9BE);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-accent, #B87968);
  font-weight: 600;
  margin-top: 2px;
  height: fit-content;
}
.cd-cw-notice__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}

/* SP対応 */
@media (max-width: 767px) {
  .cd-cw-notice { flex-direction: column; gap: 8px; padding: 14px 16px; }
  .cs-case-card__challenge { font-size: 12px; }
}

/* ==========================================================================
   PHASE 6 — 料金・問い合わせ導線改善
   ========================================================================== */

/* ---- price-guide-select (トップ価格帯: 選び方ガイド) ---- */
.price-guide-select {
  background: var(--color-section-warm, #F3E9DE);
  padding: 80px 0;
}
.price-guide-select__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}
.price-guide-select__header { margin-bottom: 48px; }
.price-guide-select__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 16px;
  line-height: 1.45;
}
.price-guide-select__lead {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.9;
}

/* ガイドカード */
.price-guide-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0; padding: 0;
}

.price-guide-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: var(--color-card, #FFFDF9);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card, 0 12px 32px rgba(47,42,38,0.06));
}
.price-guide-card--featured {
  border-color: var(--color-border, #D8C9BC);
  box-shadow: var(--shadow-soft, 0 18px 50px rgba(47,42,38,0.08));
}

.price-guide-card__situation-label {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-text-light, #A1948A);
  margin-bottom: 6px;
}
.price-guide-card__situation-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-sub);
  margin: 0;
}

.price-guide-card__arrow {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--color-accent, #B87968);
  font-weight: 400;
  flex-shrink: 0;
}

.price-guide-card__plan-en {
  display: block;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--color-accent, #B87968);
  margin-bottom: 5px;
}

.price__right {
  color: var(--color-text-sub, #B87968);
  font-family: var(--font-en);
  font-size: 12px;
}

.price-guide-card__plan-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
}
.price-guide-card--featured .price-guide-card__plan-name {
  color: var(--color-main, #5A3E35);
}
.price-guide-card__plan-price {
  font-family: var(--font-en);
  font-size: 24px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}
.price-guide-card__plan-link {
  font-size: 12px;
  color: var(--color-accent, #B87968);
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,121,104,0.3);
}
.price-guide-card__plan-link:hover { border-bottom-color: var(--color-accent); }

/* SP: 縦積み */
@media (max-width: 767px) {
  .price-guide-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 20px;
  }
  .price-guide-card__arrow { display: none; }
  .price-guide-select { padding: 60px 0; }
}

@media (min-width: 1024px) {
  .price-guide-select { padding: 104px 0; }
  .price-guide-card { gap: 32px; padding: 26px 32px; }
  .price-guide-card__situation-text { font-size: 14px; }
  .price-guide-card__plan-name { font-size: 15px; }
}

/* ---- price-plan__role ---- */
.price-plan__role {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
  max-width: 640px;
}

/* ---- price-consult (よくある相談例) ---- */
.price-consult {
  background: var(--color-section-warm, #F3E9DE);
  padding: 80px 0;
}
.price-consult__inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}
.price-consult__header { margin-bottom: 40px; }
.price-consult__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 14px;
  line-height: 1.5;
}
.price-consult__lead {
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.9;
  margin: 0;
}
.price-consult__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0; padding: 0;
}
.price-consult__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--color-card, #FFFDF9);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.75;
  box-shadow: var(--shadow-card);
}
.price-consult__icon {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent, #B87968);
  box-shadow: 0 0 0 3px rgba(184,121,104,0.14);
}
@media (min-width: 768px) {
  .price-consult__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .price-consult { padding: 104px 0; }
  .price-consult__item { font-size: 14px; }
}

/* ---- price-not-included note ---- */
.price-not-included__note {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-light, #A1948A);
  border-top: 1px solid var(--color-border-light, #E8DDD2);
  padding-top: 14px;
}

/* ---- price-guide (トップページ): 新商品カード ---- */
.price-card__plan-en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-accent, #B87968);
  display: block;
  margin-bottom: 4px;
}

/* ---- Contact form: selectスタイル ---- */
.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E7168' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.contact-form__select:focus {
  border-color: var(--color-main, #5A3E35);
  box-shadow: 0 0 0 4px rgba(90, 62, 53, 0.12);
}

/* ---- Contact form URL input ---- */
.contact-form__input[type="url"] {
  font-family: var(--font-sans);
  font-size: 16px;
}

/* SP フォーム余白 */
@media (max-width: 767px) {
  .contact-form__select { font-size: 16px; } /* iOS zoom 防止 */
  .contact-form__input, .contact-form__textarea { font-size: 16px; }
}


/* ==========================================================================
   Contact Section — 2カラムレイアウト・フォームカード化
   ========================================================================== */

/* ---- セクション背景：深めベージュグラデーション ---- */
.contact-section {
  position: relative;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 253, 249, 0.55), transparent 36%),
    linear-gradient(140deg, #EFE5DA 0%, #E7D6C8 100%);
  padding: 96px 0 104px;
  overflow: hidden;
}
.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 600px at 100% 100%, rgba(248, 244, 238, 0.30), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Inner: SPは縦積み ---- */
.contact-section__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ---- Label ---- */
.contact-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #B87968);
  margin: 0 0 20px;
}
.contact-section__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #B87968);
  box-shadow: 0 0 0 4px rgba(184, 121, 104, 0.14);
}

/* ---- 見出し ---- */
.contact-section__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.48;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0;
}

/* ---- リード ---- */
.contact-section__lead {
  margin-top: 22px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  max-width: 540px;
}

/* ---- 安心材料 ---- */
.contact-assurance {
  margin-top: 32px;
  padding: 22px 22px;
  background: rgba(255, 253, 249, 0.72);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-left: 3px solid var(--color-accent, #B87968);
  border-radius: 10px;
}
.contact-assurance__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-main, #5A3E35);
  margin: 0 0 12px;
}
.contact-assurance__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.contact-assurance__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.contact-assurance__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #B87968);
  opacity: 0.6;
}

/* ---- 送信後の流れ ---- */
.contact-flow-wrap {
  margin-top: 28px;
}
.contact-flow-wrap__label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-text-light, #A1948A);
  margin: 0 0 12px;
}
.contact-flow {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.contact-flow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  position: relative;
  text-align: center;
}
/* 矢印ライン */
.contact-flow__item:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -6px;
  top: 10px;
  font-size: 12px;
  color: var(--color-border, #D8C9BC);
}
.contact-flow__num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-accent, #B87968);
  font-weight: 600;
}
.contact-flow__text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-sub);
}

/* ---- Memo ---- */
.memo--contact {
  margin-top: 24px;
  padding: 14px 16px;
}
.memo--contact .memo__text {
  font-size: 12px;
  line-height: 1.8;
}

/* ---- フォームカード ---- */
.contact-section__form-wrap {
  width: 100%;
}

.contact-form {
  /* override: カード化 */
  margin: 0 !important;
  max-width: 100% !important;
  background: var(--color-white, #FFFDF9);
  border: 1px solid rgba(90, 62, 53, 0.10);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(47, 42, 38, 0.08);
  padding: 32px 28px 36px;
}

/* ---- 入力欄：背景と差別化 ---- */
.contact-form__input,
.contact-form__textarea {
  background: var(--color-base, #F8F4EE);
  border: 1.5px solid var(--color-border-light, #E8DDD2);
  border-radius: 8px;
}
.contact-form__input:hover,
.contact-form__textarea:hover {
  border-color: var(--color-border, #D8C9BC);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  background: var(--color-white, #FFFDF9);
  border-color: var(--color-main, #5A3E35);
  box-shadow: 0 0 0 4px rgba(90, 62, 53, 0.10);
}

/* ---- 送信ボタン ---- */
.contact-form__submit {
  background: var(--color-main, #5A3E35);
  color: var(--color-white, #FFFDF9);
  border: 1px solid var(--color-main, #5A3E35);
  box-shadow: 0 10px 26px rgba(90, 62, 53, 0.18);
  width: 100%;
  margin-top: 4px;
}
.contact-form__submit:hover {
  background: var(--color-main-hover, #493129);
  border-color: var(--color-main-hover, #493129);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(90, 62, 53, 0.22);
}

/* ---- 補足テキスト ---- */
.contact-form__supplement {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub);
  text-align: left;
}

.contact-form__group br {
  display: none;
}

/* ==========================================================================
   PC (>=1024px): 2カラム
   ========================================================================== */
@media (min-width: 1024px) {
  .contact-section {
    padding: 120px 0 128px;
  }
  .contact-section__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }
  .contact-section__copy {
    flex: 0 0 auto;
    width: 42%;
    max-width: 440px;
  }
  .contact-section__form-wrap {
    flex: 1 1 0;
    min-width: 0;
  }

  .contact-section__title {
    font-size: clamp(30px, 3.2vw, 40px);
    line-height: 1.45;
  }
  .contact-section__lead {
    font-size: 14px;
    max-width: none;
  }

  /* フォームカードのPC余白 */
  .contact-form {
    padding: 40px 40px 44px;
    border-radius: 24px;
  }
}

/* ==========================================================================
   SP (<=767px): 縦積み調整
   ========================================================================== */
@media (max-width: 767px) {
  .contact-section {
    padding: 72px 0 80px;
  }
  .contact-section__inner { gap: 40px; }
  .contact-section__title { font-size: clamp(26px, 7vw, 32px); }

  /* フォームカードSP */
  .contact-form {
    padding: 24px 20px 28px;
    border-radius: 16px;
  }
  .contact-form__fields { gap: 20px; }

  /* フォーム iOS zoom防止 */
  .contact-form__input,
  .contact-form__textarea,
  .contact-form__select { font-size: 16px; }

  .contact-assurance { padding: 18px 16px; }
  .contact-flow { gap: 0; }
  .contact-flow__text { font-size: 12px; }
}

/* ---- Problem: カード番号 ---- */
.problem-card__num {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---- Case Study: Viewpoint番号 ---- */
.cs-viewpoint-card__num {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---- Service: Overview番号 ---- */
.svc-overview-card__num {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---- Price Cards (トップページ): 価格 ---- */
.price-card__price {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.price-card__price-unit {
  font-family: var(--font-num);
  font-weight: 400;
}

/* ---- Price Summary Cards (price.html): 価格 ---- */
.price-summary-card__price {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.price-summary-card__price-unit {
  font-family: var(--font-num);
  font-weight: 400;
}

/* ---- Price Plan Detail: 価格 ---- */
.price-plan__price {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.price-plan__price-unit {
  font-family: var(--font-num);
  font-weight: 400;
}

/* ---- Price Guide Cards (選び方ガイド): 価格 ---- */
.price-guide-card__plan-price {
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- Contact Flow: 番号 01/02/03 ---- */
.contact-flow__num {
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   Service Scope — 対応できる制作領域 4カード構成
   ========================================================================== */

/* ---- カードグリッド ---- */
.svc-area-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

/* ---- カード ---- */
.svc-area-card {
  background: var(--color-card, #FFFDF9);
  border: 1px solid var(--color-border-light, #E8DDD2);
  border-radius: 18px;
  padding: 28px 28px 26px;
  box-shadow: var(--shadow-card, 0 12px 32px rgba(47,42,38,0.06));
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.svc-area-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft, 0 18px 50px rgba(47,42,38,0.08));
}

/* ---- Head: 番号 + 英字 ---- */
.svc-area-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-light, #E8DDD2);
}
.svc-area-card__num {
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--color-accent, #B87968);
}
.svc-area-card__en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-text-light, #A1948A);
}

/* ---- タイトル ---- */
.svc-area-card__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ---- 役割 ---- */
.svc-area-card__role {
  font-size: 12px;
  color: var(--color-accent, #B87968);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

/* ---- 対応内容リスト ---- */
.svc-area-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.svc-area-card__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
}
.svc-area-card__list li::before {
  content: "";
  position: absolute;
  top: 0.70em;
  left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-soft, #E8C9BE);
  border: 1px solid var(--color-accent, #B87968);
}

/* ---- 補足注記 ---- */
.svc-area-card__note {
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-light, #A1948A);
  padding-top: 14px;
  border-top: 1px solid var(--color-border-light, #E8DDD2);
  margin: 0;
}

/* ---- price-option__desc ---- */
.price-option__desc {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text-light, #A1948A);
  margin-top: 4px;
}
.price-option__price--highlight {
  color: var(--color-main, #5A3E35);
  font-family: var(--font-num);
  font-weight: 600;
}

/* ==========================================================================
   PC (>=1024px): 2カラム
   ========================================================================== */
@media (min-width: 1024px) {
  .svc-area-cards {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 56px;
  }
  .svc-area-card {
    padding: 32px 32px 30px;
  }
  .svc-area-card__title { font-size: 17px; }
}

/* ==========================================================================
   Tablet (768-1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-area-cards {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}


/* ==========================================================================
   HERO FINAL — ファーストビュー最終調整
   写真を主役に・装飾2点のみ・余白重視
   ========================================================================== */

/* ---- Hero 背景 ---- */
.hero {
  background: linear-gradient(
    155deg,
    #F8F4EE 0%,
    #F3E9DE 52%,
    #EFE5DA 100%
  );
}

/* ---- Hero Inner: SP縦積み ---- */
.hero__inner {
  display: flex;
  flex-direction: column;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: calc(var(--header-h, 64px) + 56px);
  padding-bottom: 64px;
  gap: 48px;
}

/* ---- SP: 写真デコは非表示 ---- */
@media (max-width: 767px) {
  .hero__visual-label,
  .hero__flow-chip {
    display: none;
  }
  .hero__image-wrap {
    border-radius: 16px;
    aspect-ratio: 4 / 3;
  }
  .hero__inner {
    padding-top: calc(var(--header-h, 64px) + 40px);
    padding-bottom: 52px;
    gap: 36px;
  }
}

/* ---- PC: 2カラム ---- */
@media (min-width: 1024px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 56px;
    padding-top: calc(var(--header-h, 64px) + 64px);
    padding-bottom: 80px;
    min-height: calc(100vh - var(--header-h, 64px));
  }
  .hero__copy {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .hero__visual {
    flex: 1 1 0;
    min-width: 0;
  }
  .hero__image-wrap {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    max-width: 520px;
    margin-left: auto;
  }
  .hero__visual-label {
    top: 24px;
    left: 24px;
    font-size: 12px;
  }
  .hero__flow-chip {
    left: 24px;
    bottom: 24px;
    padding: 11px 16px;
    gap: 6px;
  }
  .hero__flow-chip-item { font-size: 12px; }
  .hero__flow-chip-arrow { font-size: 12px; }
}

/* [削除: 旧Tablet Heroブロック - hero--bgで上書き済み] */

/* ---- Hero以外で使われている古い装飾クラスを確実にHero内では非表示 ---- */
.hero .figma-card,
.hero .memo--hero,
.hero .redline-pin--hero,
.hero .sp-compare--hero {
  display: none !important;
}


/* ==========================================================================
   HERO BG + HTML/CSS — 背景画像＋HTML実装版
   ========================================================================== */

/* ─────────────────────────────────────────────
   セクション本体
───────────────────────────────────────────── */
.hero--bg {
  position: relative;
  overflow: hidden;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  background: #F3EDE4; /* 画像読み込み前のフォールバック */
}

/* ─────────────────────────────────────────────
   左グラデーション（テキスト可読性）
   ::before で左→右にフェード
───────────────────────────────────────────── */
.hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    98deg,
    rgba(250, 246, 241, 0.97) 0%,
    rgba(250, 246, 241, 0.93) 30%,
    rgba(250, 246, 241, 0.72) 50%,
    rgba(250, 246, 241, 0.28) 70%,
    rgba(250, 246, 241, 0.00) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   ニュートラルオーバーレイ（色調整）
───────────────────────────────────────────── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(243, 241, 238, 0.10);
  z-index: 1;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Inner コンテナ
───────────────────────────────────────────── */
.hero--bg .hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: calc(var(--header-h, 80px) + 72px);
  padding-bottom: 48px;
  flex: 1;
  gap: 40px;
}

/* ─────────────────────────────────────────────
   左：コピーエリア
───────────────────────────────────────────── */
.hero--bg .hero__copy {
  position: relative;
  z-index: 4;
  max-width: 600px;
}

/* ─────────────────────────────────────────────
   英字ラベル
───────────────────────────────────────────── */
.hero--bg .hero__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text-light, #A1948A);
}
.hero--bg .hero__label-en { color: var(--color-text-light, #A1948A); }
.hero--bg .hero__label-sep { color: var(--color-border, #D8C9BC); font-size: 10px; }

/* ─────────────────────────────────────────────
   メインコピー
───────────────────────────────────────────── */
.hero--bg .hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 68px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--color-text, #2F2A26);
  margin: 0;
}

/* ─────────────────────────────────────────────
   筆記体装飾（Reservation Flow）
───────────────────────────────────────────── */
.hero__script {
  font-family: "Allura", var(--font-en);
  font-style: italic;
  font-size: clamp(44px, 5.5vw, 82px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(184, 121, 104, 0.20);
  margin: -8px 0 0 -4px;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   サブコピー
───────────────────────────────────────────── */
.hero--bg .hero__lead {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-sub, #7E7168);
  max-width: 520px;
}

/* ─────────────────────────────────────────────
   CTAボタン
───────────────────────────────────────────── */
.hero--bg .hero__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

/* ─────────────────────────────────────────────
   対応領域タグ
───────────────────────────────────────────── */
.hero--bg .hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.hero--bg .hero__proof li {
  padding: 5px 12px;
  background: rgba(255, 253, 249, 0.80);
  border: 1px solid rgba(90, 62, 53, 0.14);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub, #7E7168);
  backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────
   右エリア（PC: 背景画像部分のスペーサー）
───────────────────────────────────────────── */
.hero__right {
  position: relative;
  z-index: 3;
  pointer-events: none;
  display: none; /* SP: 非表示（背景画像のみ） */
}

/* ─────────────────────────────────────────────
   右上：円装飾素材
───────────────────────────────────────────── */
.hero__deco {
  position: absolute;
  top: -40px;
  right: -20px;
  width: clamp(160px, 16vw, 260px);
  opacity: 0.88;
  z-index: 2;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   フローチップ（Instagram → Google Map → HP → LINE）
───────────────────────────────────────────── */
.hero__flow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid rgba(90, 62, 53, 0.12);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 12px 36px rgba(47, 42, 38, 0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: absolute;
  bottom: 0;
  right: -20px;
  white-space: nowrap;
}

.hero__flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero__flow-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid #E5D6CC;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 249, 0.9);
  flex-shrink: 0;
}
.hero__flow-icon-wrap--goal {
  border-color: rgba(184, 121, 104, 0.35);
  background: rgba(246, 231, 225, 0.55);
}
.hero__flow-step--goal .hero__flow-icon {
  color: var(--color-main, #5A3E35);
}

.hero__flow-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-sub, #7E7168);
}
.hero__flow-step--goal .hero__flow-label {
  color: var(--color-main, #5A3E35);
  font-weight: 600;
}

.hero__flow-arrow {
  font-size: 14px;
  color: #B87968;
  font-weight: 400;
  margin-bottom: 18px; /* アイコンの中央に合わせる視覚調整 */
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   下部：白い曲線 + ロゴ情報
   .hero::after で曲線を描画
───────────────────────────────────────────── */
.hero--bg::after {
  content: "";
  position: absolute;
  left: -5%;
  bottom: 120px;
  width: 100%;
  height: 33%;
  background: rgba(255, 253, 249, 0.7);
  border-radius: 0 30% 0 0 / 80% 80% 0 0;
  z-index: 2;
  pointer-events: none;
}

.hero__bottom {
  position: relative;
  z-index: 4;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 0 32px 240px;
}

.hero__bottom-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.hero__bottom-logo {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero__bottom-logo-main {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--color-main, #5A3E35);
  text-transform: uppercase;
}
.hero__bottom-logo-sub {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-light, #A1948A);
}
.hero__bottom-desc {
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub, #7E7168);
  text-align: left;
}

.hero-bottom-info__divider {
  width: 1px;
  height: 42px;
  background: rgba(184, 121, 104, 0.45);
}

/* ─────────────────────────────────────────────
   アニメーション（js-hero-reveal）
───────────────────────────────────────────── */
.js-enabled .hero--bg .js-hero-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js-enabled .hero--bg .js-hero-reveal.is-active {
  opacity: 1;
  transform: none;
}
.js-enabled .hero--bg .hero__label.js-hero-reveal      { transition-delay:  60ms; }
.js-enabled .hero--bg .hero__title.js-hero-reveal       { transition-delay: 140ms; }
.js-enabled .hero--bg .hero__script.js-hero-reveal      { transition-delay: 220ms; }
.js-enabled .hero--bg .hero__lead.js-hero-reveal        { transition-delay: 300ms; }
.js-enabled .hero--bg .hero__actions.js-hero-reveal     { transition-delay: 380ms; }
.js-enabled .hero--bg .hero__proof.js-hero-reveal       { transition-delay: 460ms; }

/* ==========================================================================
   PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {

  .hero--bg {
    min-height: 880px;
  }
  .hero--bg .hero__inner {
    flex-direction: row;
    align-items: center;
    padding-top: 90px;
    padding-bottom: 80px;
    gap: 0;
    min-height: calc(100vh - var(--header-h, 80px));
    max-height: 980px;
  }

  /* 左: 50% */
  .hero--bg .hero__copy {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 40px;
  }

  .hero--bg .hero__title {
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.25;
  }

  .hero__script {
    padding: 0 0 0 180px;
    font-size: clamp(48px, 5vw, 86px);
    margin: -10px 0 0 -6px;
  }

  .hero--bg .hero__lead {
    font-size: 15px;
    max-width: 480px;
  }

  .hero--bg .hero__actions {
    flex-direction: row;
    gap: 16px;
    margin-top: 36px;
  }
  .hero--bg .hero__actions .button {
    min-width: 190px;
    width: auto;
  }

  /* 右スペーサー: 50%（背景画像が描画） */
  .hero__right {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;
    position: relative;
    min-height: 560px;
  }

  /* 下部ロゴ情報 */
  .hero__bottom-inner {
    display: flex;
  }
}

@media (min-width: 768px) {
  /* 曲線調整 */
  .hero--bg::after {
    bottom: -170px;
    width: 100%;
    height: 290px;
  }
}

/* ==========================================================================
   Tablet (768px〜1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  .hero--bg {
    min-height: 720px;
  }
  .hero--bg .hero__inner {
    flex-direction: row;
    align-items: center;
    padding-top: calc(var(--header-h, 80px) + 60px);
    padding-bottom: 64px;
    gap: 0;
  }
  .hero--bg .hero__copy {
    flex: 0 0 58%;
    max-width: 58%;
    padding-right: 24px;
  }
  .hero__right {
    display: block;
    flex: 1 1 0;
    min-height: 420px;
    position: relative;
  }
  .hero__deco {
    width: clamp(130px, 14vw, 200px);
    top: -20px; right: -10px;
  }
  .hero__flow {
    padding: 12px 14px;
    gap: 8px;
    right: -10px;
    bottom: 10px;
  }
  .hero__flow-icon-wrap { width: 40px; height: 40px; }
  .hero__flow-icon { width: 18px; height: 18px; }
  .hero__flow-label { font-size: 11px; }
  .hero--bg::after {
    bottom: -170px;
    width: 100%;
    height: 290px;
  }
}

/* ==========================================================================
   SP (<=767px)
   ========================================================================== */
@media (max-width: 767px) {

  .hero--bg {
    min-height: auto;
    padding-bottom: 0;
  }
  /* SP: グラデーションを上から薄く（全面に軽くかかる程度） */
  .hero--bg::before {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 241, 0.94) 0%,
      rgba(250, 246, 241, 0.82) 50%,
      rgba(250, 246, 241, 0.30) 100%
    );
  }
  .hero--bg::after { display: none; }

  .hero--bg .hero__inner {
    flex-direction: column;
    padding-top: calc(var(--header-h, 64px) + 40px);
    padding-bottom: 0;
    gap: 0;
    width: calc(100% - 40px);
  }

  .hero--bg .hero__copy {
    max-width: 100%;
    padding-right: 0;
  }

  .hero--bg .hero__title {
    font-size: clamp(36px, 9vw, 46px);
    line-height: 1.30;
  }

  .hero__script {
    font-size: clamp(34px, 8vw, 52px);
    margin: -6px 0 0 -2px;
  }

  .hero--bg .hero__lead {
    font-size: 14px;
    max-width: 100%;
  }

  .hero--bg .hero__actions {
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
  }

  .hero--bg .hero__proof li { font-size: 11px; padding: 4px 10px; }

  /* SP: 背景画像を下部に画像ブロックとして表示 */
  .hero__right { display: none; }

  /* SP用：画像エリアを hero__bottom の前に独立表示 */
  .hero__sp-image {
    display: block;
    width: 100%;
    margin-top: 36px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    max-height: 280px;
  }
  .hero__sp-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  .hero__bottom { padding: 0; }

  /* SP: 背景画像を右寄せに調整 */
  .hero__bg img {
     object-position: 82% center;
  }
}


/* ==========================================================================
   1280px以上：hero__title / hero__script の強制1行表示
   ========================================================================== */
@media (min-width: 1280px) {

  /* メインコピー：<br> 以外で折り返さない */
  .hero--bg .hero__title {
    white-space: nowrap;
  }

  /* 筆記体装飾：折り返さない */
  .hero__script {
    white-space: nowrap;
    overflow: visible;
  }

}

/* ── 筆記体：全幅nowrap ── */
.hero__script {
  white-space: nowrap;
  overflow: hidden;
}

/* ── SP専用エリア・SCROLL・曲線：デフォルト非表示 ── */
.hero__sp-visual  { display: none; }
.hero__scroll     { display: none; }
.hero__bottom-curve { display: none; }

/* ==========================================================================
   1024px以上（PC）：タイトルnowrap
   ========================================================================== */
@media (min-width: 1024px) {
  .hero--bg .hero__title { white-space: nowrap; }
}
@media (min-width: 1280px) {
  .hero--bg .hero__title { white-space: nowrap; }
  .hero__script          { white-space: nowrap; overflow: visible; }
}

/* ==========================================================================
   〜767px（SP）：縦積みレイアウト
   ========================================================================== */
@media (max-width: 767px) {

  /* 折り返し解除 */
  .hero__lead-nowrap { white-space: normal; }

  /* 背景切り替え */
  .hero__bg--pc { display: none; }
  .hero__bg--sp { display: block; }

  /* セクション */
  .hero--bg {
    min-height: auto;
    overflow: hidden;
    background: #F0EAE0;
  }

  /* オーバーレイ：上部のみ薄く */
  .hero--bg::before {
    background: linear-gradient(
      180deg,
      rgba(250, 246, 241, 0.90) 0%,
      rgba(250, 246, 241, 0.65) 40%,
      rgba(250, 246, 241, 0.15) 70%,
      rgba(250, 246, 241, 0.00) 100%
    );
  }
  .hero--bg::after { display: none; }

  /* Inner */
  .hero--bg .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--header-h, 80px) + 44px);
    padding-bottom: 32px;
    gap: 0;
    width: calc(100% - 44px);
    margin: 0 auto;
    min-height: auto;
    max-height: none;
  }

  /* コピーエリア */
  .hero--bg .hero__copy {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  /* 英字ラベル */
  .hero--bg .hero__label {
    font-size: 10px;
    letter-spacing: 0.15em;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }

  /* メインコピー */
  .hero--bg .hero__title {
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.32;
    white-space: normal;
  }

  /* 筆記体 */
  .hero__script {
    font-size: clamp(28px, 6.5vw, 40px);
    margin: -4px 0 0 0;
    overflow: hidden;
    color: rgba(184, 121, 104, 0.20);
  }

  /* サブコピー */
  .hero--bg .hero__lead {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.88;
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* CTA */
  .hero--bg .hero__actions {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }
  .hero--bg .hero__actions .button {
    width: 100%;
    min-width: auto;
  }

  /* タグ */
  .hero--bg .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
  }
  .hero--bg .hero__proof li {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* PC右エリア：非表示 */
  .hero__right { display: none !important; }

  /* SP Visual：表示 */
  .hero__sp-visual {
    display: block;
    position: relative;
    margin-top: 24px;
    width: 100%;
  }

  /* SP縦長画像（background-imageで表示） */
  .hero__sp-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    height: min(700px, 138vw);
    border-radius: 0;
    background-size: cover;
    background-position: 100% bottom;
    overflow: visible;
    border-radius: 16px 16px 0 0;
    background-image: url('../images/sp-hero-bg.png');
  }

  /* SP：Brand Flow Design 円装飾 → 左上に表示 */
  .hero__sp-deco {
    display: block;
    position: absolute;
    top: 150px;
    left: 16px;
    width: 160px;
    z-index: 3;
    pointer-events: none;
  }

  /* SP：横並びチップ非表示 */
  .hero__sp-flow--tablet { display: none !important; }

  /* SP：縦型カードチップ（右下） */
  .hero__sp-flow--sp {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 140px;
    background: rgba(255, 253, 249, 0.94);
    border: 1px solid rgba(90, 62, 53, 0.12);
    border-radius: 16px;
    padding: 14px 12px;
    box-shadow: 0 8px 28px rgba(47, 42, 38, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero__sp-flow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 0;
  }
  .hero__sp-flow-row--goal {
    background: rgba(246, 231, 225, 0.60);
    border-radius: 8px;
    padding: 5px 6px;
    margin: 0 -6px;
    width: calc(100% + 12px);
  }

  .hero__sp-flow-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #E5D6CC;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 249, 0.95);
    flex-shrink: 0;
  }
  .hero__sp-flow-icon--goal {
    border-color: rgba(184, 121, 104, 0.40);
    background: rgba(246, 231, 225, 0.75);
  }
  .hero__sp-flow-icon img { width: 14px; height: 14px; }

  .hero__sp-flow-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-sub, #7E7168);
    letter-spacing: 0.02em;
  }
  .hero__sp-flow-label--goal {
    color: var(--color-main, #5A3E35);
    font-weight: 600;
  }
  .hero__sp-flow-arrow--v {
    font-size: 11px;
    color: #B87968;
    line-height: 1;
    padding: 1px 0;
  }

  /* 下部エリア */
  .hero__bottom {
    position: relative;
    background: transparent;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }
  .hero__bottom-curve {
    display: block;
    position: relative;
    height: 60px;
    background: #FFFDF9;
    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
    margin: -24px 0 0;
    z-index: 1;
  }
  .hero__bottom-inner {
    position: relative;
    z-index: 2;
    background: #FFFDF9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 24px 0;
    text-align: center;
  }
  .hero__bottom-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero__bottom-logo-main {
    font-family: var(--font-en);
    font-size: 17px;
    letter-spacing: 0.22em;
    color: var(--color-main, #5A3E35);
    font-weight: 500;
  }
  .hero__bottom-logo-sub {
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: 0.13em;
    color: var(--color-text-light, #A1948A);
  }
  .hero-bottom-info__divider {
    display: block;
    width: 1px;
    height: 28px;
    background: var(--color-border-light, #E8DDD2);
    margin: 12px auto;
  }
  .hero__bottom-desc {
    font-size: 12px;
    line-height: 1.85;
    color: var(--color-text-sub, #7E7168);
    text-align: center;
    padding-bottom: 4px;
  }
  .hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 2;
    background: #FFFDF9;
    padding: 10px 0 28px;
  }
  .hero__scroll-arrow {
    font-size: 15px;
    color: var(--color-text-light, #A1948A);
    animation: scrollBounce 2s ease-in-out infinite;
  }
  .hero__scroll-text {
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--color-text-light, #A1948A);
  }

}

/* ==========================================================================
   768px〜1023px（iPad）：縦積み + 画像4:3 + 横並びフロー
   ※ max-width:767px ブロックの後に書いて確実に上書き
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* 折り返し解除 */
  .hero__lead-nowrap { white-space: normal; }

  /* 背景切り替え */
  .hero__bg--pc { display: none; }
  .hero__bg--sp { display: block; }

  /* セクション */
  .hero--bg {
    min-height: auto;
    overflow: hidden;
    background: #F0EAE0;
  }

  /* オーバーレイ：横方向グラデ */
  .hero--bg::before {
    background: linear-gradient(
      105deg,
      rgba(250, 246, 241, 0.92) 0%,
      rgba(250, 246, 241, 0.75) 35%,
      rgba(250, 246, 241, 0.30) 60%,
      rgba(250, 246, 241, 0.00) 100%
    );
  }
  .hero--bg::after { display: none; }

  /* Inner */
  .hero--bg .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--header-h, 80px) + 56px);
    padding-bottom: 36px;
    gap: 0;
    width: calc(100% - 64px);
    margin: 0 auto;
    min-height: auto;
    max-height: none;
  }

  /* コピーエリア：iPad では幅60% */
  .hero--bg .hero__copy {
    flex: none;
    width: 60%;
    max-width: 60%;
    padding-right: 0;
  }

  /* 英字ラベル */
  .hero--bg .hero__label {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 20px;
  }

  /* メインコピー */
  .hero--bg .hero__title {
    font-size: clamp(36px, 5.5vw, 52px);
    line-height: 1.30;
    white-space: normal;
  }

  /* 筆記体 */
  .hero__script {
    font-size: clamp(32px, 5vw, 48px);
    overflow: hidden;
  }

  /* サブコピー */
  .hero--bg .hero__lead {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.88;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* CTA：横並び */
  .hero--bg .hero__actions {
    flex-direction: row;
    gap: 16px;
    margin-top: 24px;
  }
  .hero--bg .hero__actions .button {
    width: auto;
    min-width: 160px;
    flex-shrink: 0;
  }

  /* タグ */
  .hero--bg .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
  }
  .hero--bg .hero__proof li {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* PC右エリア：非表示 */
  .hero__right { display: none !important; }

  /* SP Visual：表示 */
  .hero__sp-visual {
    display: block;
    position: relative;
    margin-top: 24px;
    width: 100%;
  }

  /* iPad画像（background-imageで表示、4:3） */
  .hero__sp-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background-image: url('../images/sp-hero-bg.png');
    background-size: cover;
    background-position: 65% 15%;
  }

  /* iPad：Brand Flow Design 円装飾 → 右上 */
  .hero__sp-deco {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    width: clamp(110px, 16vw, 190px);
    z-index: 3;
    pointer-events: none;
  }

  /* iPad：横並びフローチップ（画像下部中央） */
  .hero__sp-flow--sp     { display: none !important; }
  .hero__sp-flow--tablet {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(255, 253, 249, 0.94);
    border: 1px solid rgba(90, 62, 53, 0.12);
    border-radius: 18px;
    padding: 14px 20px;
    box-shadow: 0 8px 28px rgba(47, 42, 38, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero__sp-flow--tablet .hero__sp-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .hero__sp-flow--tablet .hero__sp-flow-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid #E5D6CC;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 249, 0.95);
  }
  .hero__sp-flow--tablet .hero__sp-flow-icon img { width: 19px; height: 19px; }
  .hero__sp-flow--tablet .hero__sp-flow-label    { font-size: 12px; }
  .hero__sp-flow-arrow--h {
    font-size: 13px;
    color: #B87968;
    margin-bottom: 18px;
    flex-shrink: 0;
  }

  /* 下部：白い曲線 + ロゴ（横並び） */
  .hero__bottom {
    position: relative;
    background: transparent;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }
  .hero__bottom-curve {
    display: block;
    height: 80px;
    background: #FFFDF9;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    margin: -36px 0 0;
    z-index: 1;
    position: relative;
  }
  .hero__bottom-inner {
    position: relative;
    z-index: 2;
    background: #FFFDF9;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 40px 16px;
    text-align: left;
  }
  .hero__bottom-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .hero__bottom-logo-main {
    font-family: var(--font-en);
    font-size: 18px;
    letter-spacing: 0.22em;
    color: var(--color-main, #5A3E35);
    font-weight: 500;
  }
  .hero__bottom-logo-sub {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0.13em;
    color: var(--color-text-light, #A1948A);
  }
  .hero-bottom-info__divider {
    display: block;
    width: 1px;
    height: 40px;
    background: var(--color-border-light, #E8DDD2);
    margin: 0 32px;
    flex-shrink: 0;
  }
  .hero__bottom-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--color-text-sub, #7E7168);
    text-align: left;
  }
  .hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 2;
    background: #FFFDF9;
    padding: 8px 0 28px;
  }
  .hero__scroll-arrow {
    font-size: 15px;
    color: var(--color-text-light, #A1948A);
    animation: scrollBounce 2s ease-in-out infinite;
  }
  .hero__scroll-text {
    font-family: var(--font-en);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--color-text-light, #A1948A);
  }

}

/* SCROLLアニメーション */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ==========================================================================
   375px以下：最小画面SP
   ========================================================================== */
@media (max-width: 400px) {
  .hero--bg .hero__inner { width: calc(100% - 36px); }
  .hero__sp-flow--sp {
    width: 118px;
    padding: 12px 10px;
    right: 12px;
    bottom: 12px;
  }
  .hero__sp-flow-icon { width: 28px; height: 28px; }
  .hero__sp-flow-icon img { width: 12px; height: 12px; }
  .hero__sp-flow-label { font-size: 11px; }
}

/* ==========================================================================
   Concept以降のmin-height過剰防止（1023px以下）
   ========================================================================== */
@media (max-width: 1023px) {
  .concept, .problem, .brand-flow, .difference, .case-section { min-height: auto; }
  .concept__inner, .problem__inner, .brand-flow__inner {
    padding-top: clamp(56px, 8vw, 88px);
    padding-bottom: clamp(56px, 8vw, 88px);
  }
}

/* ==========================================================================
   UI修正：Secondary Button / Hero Subtitle / Hero Text Link / SP Hide
   ========================================================================== */

/* ---- Secondary Button：静かなリンク寄りに ---- */
.button--secondary {
  background: transparent;
  color: var(--color-main);
  border: 1px solid var(--color-border-light);
  box-shadow: none;
}
.button--secondary:hover {
  background: var(--color-card);
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

/* ---- Hero Text Link（Secondary をテキストリンク化） ---- */
.hero__text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.hero__text-link:hover {
  color: var(--color-main);
  border-bottom-color: var(--color-border);
}

/* ---- SP非表示ユーティリティ ---- */
.u-sp-hide { display: block; }   /* PC: 表示 */

@media (max-width: 767px) {
  .u-sp-hide { display: none !important; }   /* SP: 非表示 */

  /* Hero subtitle SP */
  .hero__subtitle {
    font-size: 12px;
    margin-top: 12px;
  }

  /* Hero text link SP */
  .hero__text-link {
    font-size: 13px;
  }
}

/* ── FAQ Q/A マークアイコン（アコーディオン復元分） ── */
.trust-faq__q-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clay-red);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 1px;
}
.trust-faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 1px;
}

/* A マークと本文を横並びに */
.trust-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 22px 20px;
}
.trust-faq__a p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .trust-faq__a { padding: 0 24px 22px; }
}
@media (max-width: 767px) {
  .trust-faq__a { padding: 0 16px 18px; }
}

/* ==========================================================================
   FAQ アコーディオン共通スタイル
   price-faq / svc-faq（details/summary 方式）
   + trust-faq（index）のアニメーション追加
   ========================================================================== */

/* ── 緩やかな開閉アニメーション（全FAQ共通） ──
   details[open] の .answer をJS不要で滑らかに見せる
   content-visibility ではなく max-height + opacity を利用 */

/* trust-faq（index） ───────────────────────── */
.trust-faq__item .trust-faq__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.trust-faq__item[open] .trust-faq__a {
  max-height: 400px;   /* 回答の最大高さ想定値 */
  opacity: 1;
  transition:
    max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    320ms cubic-bezier(0.4, 0, 0.2, 1) 40ms;
}

/* ── price-faq（price.html）スタイル ── */
.price-faq__list {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-top: 32px;
}
.price-faq__item {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
}
.price-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.price-faq__question::-webkit-details-marker { display: none; }
.price-faq__question::marker               { display: none; }
.price-faq__q-text {
  flex: 1;
}
/* Q/A丸アイコン */
.price-faq__q-mark,
.price-faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-white);
}
.price-faq__q-mark { background: var(--clay-red); }
.price-faq__a-mark { background: var(--sage); margin-top: 1px; }

/* ＋アイコン */
.price-faq__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
}
.price-faq__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-text-sub);
  border-bottom: 1.5px solid var(--color-text-sub);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 240ms var(--ease);
}
.price-faq__item[open] .price-faq__icon::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

/* 回答エリア */
.price-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 22px 20px;
  transition:
    max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.price-faq__item[open] .price-faq__answer {
  max-height: 500px;
  opacity: 1;
  padding: 0 22px 20px;
  transition:
    max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    320ms cubic-bezier(0.4, 0, 0.2, 1) 40ms;
}
.price-faq__answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .price-faq__question { font-size: 15px; padding: 22px 24px; }
  .price-faq__answer   { padding: 0 24px; }
  .price-faq__item[open] .price-faq__answer { padding: 0 24px 22px; }
}
@media (max-width: 767px) {
  .price-faq__question { padding: 17px 16px; }
  .price-faq__answer   { padding: 0 16px; }
  .price-faq__item[open] .price-faq__answer { padding: 0 16px 18px; }
}

/* ── svc-faq（service.html）スタイル ── */
.svc-faq__list {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-top: 32px;
}
.svc-faq__item {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
}
.svc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.svc-faq__question::-webkit-details-marker { display: none; }
.svc-faq__question::marker               { display: none; }
.svc-faq__q-text { flex: 1; }

.svc-faq__q-mark,
.svc-faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-white);
}
.svc-faq__q-mark { background: var(--clay-red); }
.svc-faq__a-mark { background: var(--sage); margin-top: 1px; }

.svc-faq__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
}
.svc-faq__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-text-sub);
  border-bottom: 1.5px solid var(--color-text-sub);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 240ms var(--ease);
}
.svc-faq__item[open] .svc-faq__icon::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

.svc-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 22px 20px;
  transition:
    max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-faq__item[open] .svc-faq__answer {
  max-height: 500px;
  opacity: 1;
  padding: 0 22px 20px;
  transition:
    max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity    320ms cubic-bezier(0.4, 0, 0.2, 1) 40ms;
}
.svc-faq__answer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .svc-faq__question { font-size: 15px; padding: 22px 24px; }
  .svc-faq__answer   { padding: 0 24px; }
  .svc-faq__item[open] .svc-faq__answer { padding: 0 24px 22px; }
}
@media (max-width: 767px) {
  .svc-faq__question { padding: 17px 16px; }
  .svc-faq__answer   { padding: 0 16px; }
  .svc-faq__item[open] .svc-faq__answer { padding: 0 16px 18px; }
}


/* ===================================================
   Brand Story Section (index.html)
   =================================================== */
.brand-story {
  background: var(--color-section-warm);
  padding: var(--space-5xl) var(--side-pad-sp);
}
.brand-story__inner {
  max-width: 720px;
  margin: 0 auto;
}
.brand-story__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.brand-story__label-mark {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.brand-story__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
  letter-spacing: 0.04em;
}
.brand-story__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.brand-story__lead p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}
.brand-story__cta {
  margin-top: var(--space-2xl);
}
.brand-story__cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-soft);
  padding-bottom: 2px;
  transition: border-color 200ms, color 200ms;
}
.brand-story__cta a:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

@media (min-width: 768px) {
  .brand-story {
    padding: var(--space-5xl) var(--space-3xl);
  }
  .brand-story__lead p {
    font-size: 16px;
  }
}

/* ===================================================
   About Origin / Brand Story (about.html)
   =================================================== */
.about-origin {
  background: var(--color-section-warm);
  padding: var(--space-5xl) var(--side-pad-sp);
}
.about-origin__inner {
  max-width: 720px;
  margin: 0 auto;
}
.about-origin__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.about-origin__label-mark {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.about-origin__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
  letter-spacing: 0.04em;
}
.about-origin__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.about-origin__body p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

@media (min-width: 768px) {
  .about-origin {
    padding: var(--space-5xl) var(--space-3xl);
  }
  .about-origin__body p {
    font-size: 16px;
  }
}

/* ===================================================
   About P-MVV Section (about.html)
   Interactive watercolor philosophy map
   =================================================== */
.about-pmvv {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255, 253, 249, .86), transparent 62%),
    radial-gradient(780px 520px at 88% 18%, rgba(234, 220, 196, .20), transparent 66%),
    var(--color-base);
  padding: var(--space-5xl) var(--side-pad-sp);
}

.about-pmvv__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.about-pmvv__header {
  max-width: 620px;
  margin-bottom: 48px;
}

.about-pmvv__section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}

.about-pmvv__section-label-mark {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}

.about-pmvv__section-title {
  font-family: var(--font-serif);
  font-size: clamp(23px, 3.2vw, 34px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.about-pmvv__section-lead {
  margin-top: 18px;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
}

.pmvv-interactive {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.pmvv-interactive__bg {
  position: absolute;
  z-index: 0;
  top: -84px;
  right: -3vw;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: clamp(76px, 13vw, 178px);
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(90, 62, 53, .055);
  font-style: italic;
  pointer-events: none;
  white-space: nowrap;
}

.pmvv-diagram {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.pmvv-circle {
  position: absolute;
  width: 48%;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  isolation: isolate;
  opacity: .88;
  transition:
    transform 480ms cubic-bezier(.22, 1, .36, 1),
    opacity 420ms var(--ease),
    filter 420ms var(--ease);
}

.pmvv-circle__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .78;
  transition: opacity 420ms var(--ease);
}

.pmvv-circle__content {
  position: absolute;
  inset: 18% 15%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
}

.pmvv-circle__en {
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: .08em;
  color: rgba(176, 106, 91, .82);
}

.pmvv-circle__ja {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(47, 42, 38, .94);
}

.pmvv-circle__text {
  display: none;
  font-size: 11px;
  line-height: 1.9;
  color: rgba(90, 62, 53, .78);
}

.pmvv-circle--purpose {
  top: 0;
  left: 26%;
  z-index: 2;
}

.pmvv-circle--mission {
  top: 28%;
  left: 0;
  z-index: 2;
}

.pmvv-circle--vision {
  top: 28%;
  right: 0;
  z-index: 2;
}

.pmvv-circle--value {
  left: 26%;
  bottom: 0;
  z-index: 1;
}

.pmvv-circle:hover,
.pmvv-circle:focus-visible,
.pmvv-circle.is-active {
  opacity: 1;
  filter: drop-shadow(0 18px 34px rgba(47, 42, 38, .08));
}

.pmvv-circle:hover,
.pmvv-circle:focus-visible {
  transform: scale(1.035) translateY(-4px);
}

.pmvv-circle.is-active {
  transform: scale(1.055) translateY(-6px);
  z-index: 4;
}

.pmvv-circle.is-active .pmvv-circle__img {
  opacity: .94;
}

.pmvv-diagram.is-dimmed .pmvv-circle:not(.is-active) {
  opacity: .54;
}

.pmvv-diagram__center {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 21%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(255, 253, 249, .62);
  border: 1px solid rgba(255, 253, 249, .72);
  box-shadow: 0 12px 34px rgba(47, 42, 38, .045);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.pmvv-diagram__center span {
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(90, 62, 53, .72);
}

.pmvv-diagram__center small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(176, 106, 91, .64);
}

.pmvv-diagram__plant {
  position: absolute;
  z-index: 6;
  width: 72px;
  opacity: .42;
  pointer-events: none;
  filter: sepia(18%) saturate(74%) hue-rotate(356deg);
}

.pmvv-diagram__plant--left {
  left: -2%;
  top: 38%;
  transform: rotate(-16deg);
}

.pmvv-diagram__plant--right {
  right: -1%;
  top: 42%;
  transform: rotate(18deg);
}

.pmvv-panel {
  position: relative;
  z-index: 1;
  min-height: 520px;
  padding: 40px 28px 34px;
  border: 1px solid rgba(216, 201, 188, .74);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,0) 42%),
    rgba(255, 253, 249, .76);
  box-shadow: 0 24px 70px rgba(47, 42, 38, .065);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.pmvv-panel.is-changing {
  opacity: .22;
  transform: translateY(8px);
}

/* .pmvv-panel::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 36px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(234, 220, 196, .24);
  pointer-events: none;
} */

.pmvv-panel::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 40px;
  width: 82px;
  height: 120px;
  opacity: .34;
  background: url("../images/plant-line01.png") center / contain no-repeat;
  pointer-events: none;
}

.pmvv-panel__head {
  position: relative;
  z-index: 1;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(216, 201, 188, .68);
}

.pmvv-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--color-accent);
  margin-bottom: 18px;
}

.pmvv-panel__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}

.pmvv-panel__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
}

.pmvv-panel__lead {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2;
  color: var(--color-text);
}

.pmvv-panel__body {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  color: var(--color-text-sub);
}

.pmvv-panel__body p,
.pmvv-panel__body li {
  font-size: 14px;
  line-height: 2;
}

.pmvv-panel__body ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
}

.pmvv-panel__body li {
  position: relative;
  padding-left: 24px;
}

.pmvv-panel__body li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
}

.pmvv-panel__message {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 2;
  color: rgba(176, 106, 91, .92);
}

.pmvv-interactive__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 32px auto 0;
  padding: 12px 22px;
  border: 1px solid rgba(216, 201, 188, .62);
  border-radius: 999px;
  background: rgba(255, 253, 249, .36);
  font-size: 13px;
  color: var(--color-text-sub);
  text-align: center;
}

.pmvv-interactive__note-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(181, 164, 138, .38);
  color: var(--color-white);
  font-size: 13px;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .about-pmvv {
    padding: 132px var(--space-3xl) 126px;
  }

  .pmvv-interactive {
    grid-template-columns: minmax(390px, 1fr) minmax(360px, 520px);
    gap: 56px;
  }

  .pmvv-circle__text {
    display: block;
  }
}

@media (min-width: 1024px) {
  .pmvv-interactive {
    grid-template-columns: minmax(480px, 1fr) minmax(420px, 540px);
    gap: 56px;
  }
}

@media (max-width: 767px) {
  .about-pmvv__header {
    margin-bottom: 34px;
  }

  .pmvv-interactive__bg {
    top: -46px;
    right: -50px;
    font-size: 72px;
  }

  .pmvv-diagram {
    width: min(100%, 342px);
  }

  .pmvv-circle {
    width: 52%;
  }

  .pmvv-circle__content {
    inset: 20% 14%;
    gap: 4px;
  }

  .pmvv-circle__en {
    font-size: 13px;
  }

  .pmvv-circle__ja {
    font-size: 12px;
  }

  .pmvv-diagram__center {
    width: 30%;
  }

  .pmvv-diagram__center span {
    font-size: 15px;
  }

  .pmvv-diagram__center small {
    font-size: 10px;
  }

  .pmvv-diagram__plant {
    width: 48px;
    opacity: .34;
  }

  .pmvv-panel {
    min-height: auto;
    padding: 30px 22px 28px;
  }

  .pmvv-panel::before {
    width: 82px;
    height: 82px;
    top: 26px;
    right: 22px;
  }

  .pmvv-panel::after {
    width: 58px;
    height: 84px;
    top: 24px;
    right: 22px;
  }

  .pmvv-panel__lead {
    font-size: 15px;
  }

  .pmvv-interactive__note {
    align-items: flex-start;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pmvv-circle,
  .pmvv-panel {
    transition: none !important;
  }
}

/* ===================================================
   About Logo Story (about.html)
   =================================================== */
.about-logo-story {
  background: var(--color-section-deep);
  padding: var(--space-5xl) var(--side-pad-sp);
}
.about-logo-story__inner {
  max-width: 720px;
  margin: 0 auto;
}
.about-logo-story__header {
  margin-bottom: var(--space-2xl);
}
.about-logo-story__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.about-logo-story__label-mark {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.about-logo-story__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.about-logo-story__logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}
.about-logo-story__logo {
  max-width: 240px;
  width: 100%;
  height: auto;
  opacity: 0.85;
}
.about-logo-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.about-logo-story__body p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

@media (min-width: 768px) {
  .about-logo-story {
    padding: var(--space-5xl) var(--space-3xl);
  }
  .about-logo-story__body p {
    font-size: 16px;
  }
}

/* ===================================================
   Service Intro Section (service.html)
   =================================================== */
.svc-intro {
  background: var(--color-section-warm);
  padding: var(--space-5xl) var(--side-pad-sp);
}
.svc-intro__inner {
  max-width: 720px;
  margin: 0 auto;
}
.svc-intro__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en, "Cormorant Garamond"), serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}
.svc-intro__label-mark {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-accent);
}
.svc-intro__title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.5vw, 28px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-2xl);
  letter-spacing: 0.04em;
}
.svc-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.svc-intro__body p {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0;
}

@media (min-width: 768px) {
  .svc-intro {
    padding: var(--space-5xl) var(--space-3xl);
  }
  .svc-intro__body p {
    font-size: 16px;
  }
}

/* ===================================================
   Price Investment Note (price.html)
   =================================================== */
.price-investment {
  background: var(--color-section-warm);
  border-left: 3px solid var(--color-accent-soft);
  padding: var(--space-xl) var(--space-xl);
  margin-top: var(--space-xl);
  border-radius: 0 4px 4px 0;
}
.price-investment p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text-sub);
  margin: 0 0 var(--space-sm);
}
.price-investment p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .price-investment p {
    font-size: 15px;
  }
}

/* ==========================================================================
   Phase 3 — Design refinements + Parallax
   ========================================================================== */

/* ── memo カード refinement ─────────────────────────────── */
.memo {
  background: rgba(255, 253, 249, 0.88);
  border-left: 1.5px solid rgba(176, 106, 91, 0.60);
  border-top: 1px solid rgba(78, 52, 44, 0.09);
  border-right: 1px solid rgba(78, 52, 44, 0.09);
  border-bottom: 1px solid rgba(78, 52, 44, 0.09);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(47, 42, 38, 0.04);
  padding: 22px 26px;
}

.memo__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.memo__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--color-text);
}

/* ── problem-card refinement ───────────────────────────── */
.problem-card {
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid rgba(78, 52, 44, 0.10);
  border-left: 1.5px solid rgba(176, 106, 91, 0.35);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(47, 42, 38, 0.04);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.problem-card:hover {
  border-color: rgba(78, 52, 44, 0.18);
  border-left-color: rgba(176, 106, 91, 0.65);
  box-shadow: 0 12px 36px rgba(47, 42, 38, 0.07);
  transform: translateY(-2px);
}

/* ── prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
  }
}

/* ==========================================================================
   LIORNA — Card Texture Refinement
   Purpose: AI生成っぽい白カード感を減らし、分析資料・編集的な質感へ寄せる
   ========================================================================== */

/* ---------- 共通：カード系の過度な浮き感を抑える ---------- */
.problem-card,
.bf-step,
.case-featured,
.case-phase__item,
.svc-card,
.price-card,
.contact-assurance,
.contact-flow-wrap,
.memo {
  box-shadow: none;
}

/* ---------- Memo / Analysis Note ---------- */
.memo {
  background: rgba(255, 253, 249, 0.86);
  border: 1px solid rgba(78, 52, 44, 0.10);
  border-left: 1.5px solid rgba(176, 106, 91, 0.62);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(47, 42, 38, 0.035);
  padding: 22px 26px;
}

.memo__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.4;
  color: var(--clay-red);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.memo__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--color-text);
}

.memo__sign {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
}

/* Contact内のMemoだけは少し小さく、補足カードとして扱う */
.memo--contact {
  background: rgba(251, 246, 238, 0.78);
  padding: 16px 18px;
}

.memo--contact .memo__text {
  font-size: 12.5px;
  line-height: 1.85;
}

/* ---------- Problem Cards: Diagnosis Result ---------- */
.problem-card {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.92), rgba(251, 246, 238, 0.82));
  border: 1px solid rgba(78, 52, 44, 0.11);
  border-left: 1.5px solid rgba(176, 106, 91, 0.46);
  border-radius: 6px;
  padding: 24px 24px;
  transition:
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.problem-card:hover {
  border-color: rgba(78, 52, 44, 0.18);
  border-left-color: rgba(176, 106, 91, 0.72);
  transform: translateY(-2px);
  box-shadow: none;
}

.problem-card__num {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}

.problem-card__text {
  line-height: 1.95;
}

/* PC時は工程表として見せる */
@media (min-width: 768px) {
  .bf-step {
    border-right: 1px solid rgba(91, 70, 56, 0.13);
  }

  .bf-step:first-of-type {
    padding-left: 28px;
  }

  .bf-step::before {
    opacity: 1;
  }
}

/* ---------- Case Study: Case Proof ---------- */
.case-featured {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.94), rgba(251, 246, 238, 0.88));
  border: 1px solid rgba(91, 70, 56, 0.14);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 48px rgba(47, 42, 38, 0.045);
}

.case-featured__head {
  border-bottom: 1px dashed rgba(91, 70, 56, 0.16);
}

.case-featured__case-num {
  background: transparent;
  border: 1px solid rgba(176, 106, 91, 0.35);
  color: var(--clay-red);
}

.case-featured__type {
  letter-spacing: 0.06em;
}

.case-phase__item {
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(91, 70, 56, 0.13);
  border-left: 1.5px solid rgba(91, 70, 56, 0.18);
  border-radius: 5px;
}

.case-phase__item--problem {
  border-left-color: rgba(176, 106, 91, 0.62);
}

.case-phase__item--design {
  border-left-color: rgba(90, 62, 53, 0.58);
}

.case-phase__item--after {
  border-left-color: rgba(143, 162, 138, 0.70);
}

.case-phase__tag {
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.case-phase__text {
  line-height: 1.95;
}

/* ---------- Price Cards: Plan Sheet ---------- */
.price-card {
  background: rgba(255, 253, 249, 0.82);
  border: 1px solid rgba(78, 52, 44, 0.12);
  border-radius: 6px;
  box-shadow: none;
  transition:
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.price-card:hover {
  border-color: rgba(78, 52, 44, 0.20);
  transform: translateY(-2px);
}

.price-card--featured {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(246, 231, 225, 0.46));
  border-color: rgba(176, 106, 91, 0.38);
}

.price-card__badge {
  background: transparent;
  border-color: rgba(176, 106, 91, 0.30);
}

.price-card__plan-en {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
}

.price-card__title {
  border-bottom: 1px dashed rgba(91, 70, 56, 0.14);
}

.price-card__fit {
  background: rgba(251, 246, 238, 0.74);
  border-color: rgba(91, 70, 56, 0.11);
  color: var(--color-text-sub);
}

/* ---------- 補足カード：Contact Assurance / Flow ---------- */
.contact-assurance {
  background: rgba(255, 253, 249, 0.68);
  border: 1px solid rgba(78, 52, 44, 0.10);
  border-left: 1.5px solid rgba(176, 106, 91, 0.50);
  border-radius: 6px;
  padding: 22px 24px;
}

.contact-assurance__title {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.contact-flow-wrap {
  padding: 18px 18px;
  background: rgba(251, 246, 238, 0.54);
  border: 1px solid rgba(78, 52, 44, 0.09);
  border-radius: 6px;
}

.contact-flow-wrap__label {
  color: var(--clay-red);
}

/* ---------- CTA hover：跳ねずに、静かに反応 ---------- */
.button,
.site-header__cta {
  transition:
    background-color var(--dur-base) var(--ease),
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-main-hover);
  box-shadow: 0 8px 20px rgba(90, 62, 53, 0.14);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: rgba(255, 253, 249, 0.76);
  border-color: rgba(90, 62, 53, 0.70);
  box-shadow: 0 6px 16px rgba(90, 62, 53, 0.07);
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
  transform: translateX(3px);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: none;
}

/* SPではカードの余白を詰めすぎず、影も弱めたまま */
@media (max-width: 767px) {
  .memo {
    padding: 18px 20px;
  }

  .problem-card,
  .svc-card,
  .price-card,
  .case-phase__item {
    border-radius: 6px;
  }

  .button:hover,
  .button:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Problem → Diagnosis Card  (override)
   ========================================================================== */

/* グリッドレイアウトを上書き: 新構造に合わせて block に */
.problem-card {
  display: block;
  position: relative;
  padding: 24px 26px 22px 30px; /* 左に ::before のスペース確保 */
  background:
    linear-gradient(180deg,
      rgba(255, 253, 249, 0.94) 0%,
      rgba(251, 246, 238, 0.84) 100%);
  border: 1px solid rgba(91, 70, 56, 0.11);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 16px 38px rgba(47, 42, 38, 0.045);
  transition:
    border-color var(--dur-base, 240ms) var(--ease),
    transform    var(--dur-base, 240ms) var(--ease),
    box-shadow   var(--dur-base, 240ms) var(--ease);
  overflow: hidden;
}

/* 左アクセントライン（赤入れ感） */
.problem-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 2px;
  height: 44px;
  background: var(--clay-red, #B06A5B);
  opacity: 0.68;
  border-radius: 0 2px 2px 0;
}

.problem-card:hover {
  transform: translateY(-2px);
  border-color: rgba(176, 106, 91, 0.24);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 20px 44px rgba(47, 42, 38, 0.06);
}

/* ── ヘッド（番号 + ラベル） ── */
.problem-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.problem-card__num {
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--clay-red, #B06A5B);
  padding-top: 0;
}

.problem-card__label {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--color-text-sub);
  text-transform: uppercase;
  margin-left: 2px;
}

/* ── タイトル ── */
.problem-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 10px;
}

/* ── 本文 ── */
.problem-card__text {
  font-size: 13.5px;
  line-height: 1.88;
  color: var(--color-text-sub);
  margin: 0;
}

/* ── Issue欄 ── */
.problem-card__issue {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(91, 70, 56, 0.16);
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text);
}

.problem-card__issue span {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--clay-red, #B06A5B);
  text-transform: uppercase;
}

/* ── SP表示調整 ── */
@media (max-width: 767px) {
  .problem-card {
    padding: 20px 20px 18px 26px;
  }
  .problem-card__title  { font-size: 15px; }
  .problem-card__text   { font-size: 13px; }
}

/* ==========================================================================
   Problem Cards — 2×2グリッド修正 + 文字・ラベル強化
   ========================================================================== */

/* ── SP: 1列 ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .problem-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Tablet: 2列 ─────────────────────────────────────── */
@media (min-width: 768px) {
  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ── PC: 2×2（4枚均等） ─────────────────────────────── */
@media (min-width: 1024px) {
  .problem-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ── 文字・ラベル強化 ─────────────────────────────────── */

/* Diagnosisラベルを読みやすく */
.problem-card__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  opacity: 1;
}

/* 本文の色を少し濃く */
.problem-card__text {
  color: var(--color-text);
  opacity: 0.78;
}

/* Issue欄の文字を少し濃く */
.problem-card__issue {
  color: var(--color-text);
}

/* ==========================================================================
   Brand Flow — Flow Map redesign (override)
   ========================================================================== */

/* ── ol グリッド ─────────────────────────────────────── */
.brand-flow__steps {
  display: grid;
  grid-template-columns: 1fr auto 1.08fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin: 0 0 48px;
}

/* ── Step カード ────────────────────────────────────── */
.brand-flow-step {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(255, 253, 249, 0.92) 0%,
      rgba(251, 246, 238, 0.78) 100%);
  border: 1px solid rgba(91, 70, 56, 0.12);
  border-radius: 10px;
  padding: 30px 28px 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 16px 38px rgba(47, 42, 38, 0.04);
  transition:
    border-color var(--dur-base, 240ms) var(--ease),
    transform    var(--dur-base, 240ms) var(--ease),
    box-shadow   var(--dur-base, 240ms) var(--ease);
  /* 番号ラベルが list-style で邪魔しないように */
  list-style: none;
}

.brand-flow-step:hover {
  transform: translateY(-2px);
  border-color: rgba(176, 106, 91, 0.20);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 20px 44px rgba(47, 42, 38, 0.055);
}

/* Step 02: 判断の中心として少し強調 */
.brand-flow-step--main {
  border-color: rgba(176, 106, 91, 0.30);
  background:
    linear-gradient(180deg,
      rgba(255, 253, 249, 0.96) 0%,
      rgba(250, 241, 235, 0.88) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76) inset,
    0 22px 48px rgba(47, 42, 38, 0.055);
}

/* ── メタ（番号 + 役割） ──────────────────────────── */
.brand-flow-step__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.brand-flow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(176, 106, 91, 0.30);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--clay-red, #B06A5B);
  white-space: nowrap;
}

.brand-flow-step__role {
  font-family: var(--font-en);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: rgba(176, 106, 91, 0.72);
}

/* ── タイトル ────────────────────────────────────── */
.brand-flow-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 12px;
}

/* ── 本文 ────────────────────────────────────────── */
.brand-flow-step__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(47, 42, 38, 0.65);
  margin: 0;
}

/* ── 矢印（細い線 + 矢印ヘッド） ──────────────────── */
.brand-flow__arrow {
  list-style: none;
  position: relative;
  width: 40px;
  height: 1px;
  background: rgba(91, 70, 56, 0.20);
  flex-shrink: 0;
}

.brand-flow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(91, 70, 56, 0.36);
  border-right: 1px solid rgba(91, 70, 56, 0.36);
  transform: translateY(-50%) rotate(45deg);
}

/* ── SP: 縦並び ──────────────────────────────────── */
@media (max-width: 767px) {
  .brand-flow__steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .brand-flow-step {
    padding: 22px 22px 20px 22px;
  }

  .brand-flow-step__title { font-size: 16px; }
  .brand-flow-step__text  { font-size: 13px; }

  .brand-flow__arrow {
    /* 縦線 */
    width: 1px;
    height: 28px;
    background: rgba(91, 70, 56, 0.18);
    margin: 0 auto;
  }

  .brand-flow__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* ── Tablet ──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .brand-flow__steps {
    gap: 14px;
  }
  .brand-flow-step {
    padding: 24px 20px;
  }
  .brand-flow-step__title { font-size: 16px; }
  .brand-flow__arrow { width: 28px; }
}

/* ── PC ──────────────────────────────────────────── */
@media (min-width: 1024px) {
  .brand-flow__steps {
    gap: 24px;
  }
  .brand-flow-step__title { font-size: 20px; }
}

/* ==========================================================================
   Brand Flow — micro refinements
   ========================================================================== */

/* ── 修正1: 矢印を導線らしく ────────────────────────── */
.brand-flow__arrow {
  position: relative;
  width: 64px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(91, 70, 56, 0.08),
    rgba(176, 106, 91, 0.36)
  );
  flex-shrink: 0;
  list-style: none;
}

.brand-flow__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(176, 106, 91, 0.48);
  border-right: 1px solid rgba(176, 106, 91, 0.48);
  transform: translateY(-50%) rotate(45deg);
}

/* ── 修正2: Stepラベルの視認性UP ────────────────────── */
.brand-flow-step__role {
  color: rgba(176, 106, 91, 0.84);
  letter-spacing: 0.08em;
}

.brand-flow-step__num {
  border-color: rgba(176, 106, 91, 0.38);
  color: rgba(176, 106, 91, 0.90);
}

/* ── 修正3: 接続文をFlow Mapの締めとして ────────────── */
.brand-flow__note {
  margin-top: 40px;
  padding: 28px;
  border-top: 1px dashed rgba(91, 70, 56, 0.16);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.brand-flow__note span {
  color: var(--clay-red, #B06A5B);
}

@media (min-width: 768px) {
  .brand-flow__note { font-size: 17px; }
}

/* SP: 縦矢印 override */
@media (max-width: 767px) {
  .brand-flow__arrow {
    width: 1px;
    height: 28px;
    background: linear-gradient(
      180deg,
      rgba(91, 70, 56, 0.08),
      rgba(176, 106, 91, 0.36)
    );
    margin: 0 auto;
  }
  .brand-flow__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* ==========================================================================
   Brand Flow — Flow Map redesign v3 (理想デザイン対応)
   ========================================================================== */

/* ── ol グリッド ─────────────────────────────────────── */
.brand-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1.08fr auto 1fr;
  align-items: center;
  gap: 28px;
  margin-top: 64px;
  margin-bottom: 0;
}

/* ── 背面の導線ライン（PC）─────────────────────────── */
@media (min-width: 1024px) {
  .brand-flow__steps::before {
    content: "";
    position: absolute;
    left: -3%;
    right: -3%;
    top: 55%;
    border-top: 1px dashed rgba(176, 106, 91, 0.22);
    z-index: 0;
    pointer-events: none;
  }
  .brand-flow-step,
  .brand-flow__arrow {
    position: relative;
    z-index: 1;
  }
}

/* ── カード ──────────────────────────────────────────── */
.brand-flow-step {
  position: relative;
  min-height: 300px;
  background:
    linear-gradient(180deg,
      rgba(255, 253, 249, 0.94) 0%,
      rgba(251, 246, 238, 0.82) 100%);
  border: 1px solid rgba(91, 70, 56, 0.12);
  border-radius: 10px;
  padding: 28px 28px 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 18px 42px rgba(47, 42, 38, 0.045);
  overflow: hidden;
  transition:
    border-color var(--dur-base, 240ms) var(--ease),
    box-shadow   var(--dur-base, 240ms) var(--ease),
    transform    var(--dur-base, 240ms) var(--ease);
  list-style: none;
}

.brand-flow-step:hover {
  border-color: rgba(176, 106, 91, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 22px 48px rgba(47, 42, 38, 0.058);
  transform: translateY(-2px);
}

/* ── Step 02 主役強調（PC）────────────────────────── */
@media (min-width: 1024px) {
  .brand-flow-step--main {
    margin-top: -10px;
    border-color: rgba(176, 106, 91, 0.38);
    background:
      linear-gradient(180deg,
        rgba(255, 253, 249, 0.98) 0%,
        rgba(250, 241, 235, 0.90) 100%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.76) inset,
      0 24px 52px rgba(47, 42, 38, 0.06);
  }
  /* 上端のアクセントバー */
  .brand-flow-step--main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 72px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 0 0 999px 999px;
    background: rgba(176, 106, 91, 0.72);
  }
}

/* ── メタ（番号 + 英字ロール）──────────────────────── */
.brand-flow-step__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.brand-flow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(176, 106, 91, 0.38);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(176, 106, 91, 0.92);
  white-space: nowrap;
}

.brand-flow-step__role {
  font-family: var(--font-en);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: rgba(176, 106, 91, 0.84);
  line-height: 1;
}

/* ── 日本語ロール ────────────────────────────────── */
.brand-flow-step__ja-role {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--clay-red, #B06A5B);
  /* 小さな横線 */
  padding-bottom: 10px;
}

/* ── 右上アイコン ───────────────────────────────── */
.brand-flow-step__icon {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 36px;
  height: 36px;
  color: rgba(176, 106, 91, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-flow-step__icon svg {
  width: 100%;
  height: 100%;
}

/* ── タイトル ────────────────────────────────────── */
.brand-flow-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 14px;
  padding-bottom: 12px;
}

/* ── 本文 ────────────────────────────────────────── */
.brand-flow-step__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(47, 42, 38, 0.66);
  margin: 0;
}

/* ── 矢印 ────────────────────────────────────────── */
.brand-flow__arrow {
  position: relative;
  width: 58px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(91, 70, 56, 0.06),
    rgba(176, 106, 91, 0.42)
  );
  list-style: none;
  flex-shrink: 0;
  z-index: 1;
}

.brand-flow__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(176, 106, 91, 0.52);
  border-right: 1px solid rgba(176, 106, 91, 0.52);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Flow Design Note ────────────────────────────── */
.brand-flow__note {
  margin-top: 54px;
  padding: 34px;
  border-top: 1px dashed rgba(91, 70, 56, 0.16);
  text-align: center;
}

.brand-flow__note-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red, #B06A5B);
}

.brand-flow__note-label::before,
.brand-flow__note-label::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 1px;
  background: rgba(176, 106, 91, 0.26);
}

.brand-flow__note-text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

.brand-flow__note-text span {
  color: var(--clay-red, #B06A5B);
  border-bottom: 1px solid rgba(176, 106, 91, 0.38);
}

/* ── Tablet ──────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .brand-flow__steps {
    gap: 14px;
    margin-top: 48px;
  }
  .brand-flow-step {
    padding: 22px 20px;
    min-height: auto;
  }
  .brand-flow-step__title { font-size: 16px; }
  .brand-flow__arrow { width: 28px; }
  .brand-flow__note-text { font-size: 16px; }
}

/* ── SP ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .brand-flow__steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 40px;
  }
  .brand-flow__steps::before { display: none; }

  .brand-flow-step {
    width: 100%;
    min-height: auto;
    padding: 24px 22px 22px;
  }
  .brand-flow-step--main {
    margin-top: 0;
    border-color: rgba(176, 106, 91, 0.30);
  }
  .brand-flow-step--main::before { display: none; }

  .brand-flow-step__icon {
    width: 30px;
    height: 30px;
    top: 24px;
    right: 22px;
  }
  .brand-flow-step__title { font-size: 16px; }
  .brand-flow-step__text  { font-size: 13px; }

  .brand-flow__arrow {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg,
      rgba(91, 70, 56, 0.08),
      rgba(176, 106, 91, 0.36));
    margin: 0 auto;
  }
  .brand-flow__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%) rotate(135deg);
  }

  .brand-flow__note {
    text-align: left;
    margin-top: 36px;
    padding: 24px;
  }
  .brand-flow__note-label { gap: 10px; }
  .brand-flow__note-label::before,
  .brand-flow__note-label::after { width: 24px; }
  .brand-flow__note-text { font-size: 16px; }
}

/* ==========================================================================
   LIORNA — Editorial Redesign Patch
   目的：セクションごとの背景差・Service List化・コントラスト強化
   ========================================================================== */

/* ------------------------------------------------------------------
   1. セクション背景の波をつくる
   ------------------------------------------------------------------
   現状マップ（上から）:
     Hero             : 画像
     Concept          : --color-white  (#FFFDF9) ← 明るい白系のまま維持
     Problem          : --problem-bg   (#F3E9DE) ← ウォームベージュ 維持
     Brand Story      : --color-section-warm (#F3E9DE) ← Problem と同じで目立たない
     Brand Flow       : --color-card   (#FFFDF9) ← ほぼ Concept と同じ
     Difference       : --color-section-deep (#E7D6C8) ← 良い
     Case Study       : --case-bg      (#F0E8DA) ← Differenceより明るく戻りコントラスト崩れ
     Service          : --svc-bg       (#F8F3EC) ← Case と近似
     Price            : --color-base   (#F8F4EE) ← Service とほぼ同じ
     Process          : --color-base   (#F8F4EE)
     About            : --problem-bg   (#F3E9DE)
     Trust            : --color-base   (#F8F4EE)
     Contact          : linear-gradient(#EFE5DA→#E7D6C8)

   修正後：
     Concept          : 白系 (維持)
     Problem          : ウォームベージュ (維持)
     Brand Story      : 白系へ変更（Problem との分離）
     Brand Flow       : #EBE2D8（少し沈んだクレイ）
     Difference       : #E7D6C8 (維持)
     Case Study       : #DFD3C3（Differenceよりもう一段沈める）
     Service          : #F8F3EC (維持, Editorial Listで差別化)
     Price            : #FFFDF9（白系に戻してServiceと差を出す）
     Process          : #F3E9DE（About と統合した温かみ）
     About            : #F3E9DE (維持)
     Trust            : #EBE2D8（Brand Flow と同じトーンで締める）
     Contact          : linear-gradient (維持)
   ------------------------------------------------------------------ */

/* Brand Story：Problem (#F3E9DE) と被るため白系へ */
.brand-story {
  background: var(--color-white);
}
.brand-story__inner {
  padding-block: 0; /* .brand-story のpadding-blockに任せる */
}

/* Brand Flow：ウォームグレイジュで Concept(白) と差をつける */
.brand-flow {
  background: #EBE2D8;
}
.brand-flow::before {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255, 253, 249, 0.35), transparent 60%);
}

/* Case Study：Difference より少し沈めて "証拠感" を出す */
.case-section {
  background: #DFD3C3;
}
.case-section::before {
  background:
    radial-gradient(1000px 600px at 5% 0%, rgba(255, 253, 249, 0.30), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(216, 201, 188, 0.30), transparent 55%);
}

/* Price：白系に戻して Service(#F8F3EC) と差をつける */
.price-guide {
  background: var(--color-white);
}
.price-guide::before {
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(248, 243, 236, 0.50), transparent 60%);
}

/* Process：About と同じウォームベージュで統合した温かみ */
.process-lower {
  background: var(--problem-bg);
}

/* Trust：Brand Flow と同じクレイトーンで Contact 前の締め */
.trust-lower {
  background: #EBE2D8;
}

/* ------------------------------------------------------------------
   2. Service → Editorial Service List
   ------------------------------------------------------------------ */

/* service-list のコンテナは既存 svc-cards の margin を流用 */
.service-list {
  border-top: 1px solid rgba(91, 70, 56, 0.14);
  margin: 48px 0 40px;
}

.service-list__item {
  display: grid;
  grid-template-columns: 1fr; /* SP: 縦積み */
  gap: 16px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(91, 70, 56, 0.14);
  transition: background var(--dur-base) var(--ease);
}
.service-list__item:hover {
  background: rgba(255, 253, 249, 0.55);
}

.service-list__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.service-list__num {
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--clay-red);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.service-list__en {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(91, 70, 56, 0.48);
}

.service-list__body {
  display: grid;
  gap: 10px;
}

.service-list__body h3 {
  font-family: var(--font-serif);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.service-list__body p {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(47, 42, 38, 0.68);
  margin: 0;
}

.service-list__scope {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-sub);
  margin-top: 4px;
}
.service-list__scope span {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay-red);
  flex-shrink: 0;
}

.service-list__body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-main);
  text-decoration: none;
  margin-top: 6px;
  transition: color var(--dur-base) var(--ease), gap var(--dur-base) var(--ease);
}
.service-list__body a:hover {
  color: var(--clay-red);
  gap: 10px;
}

/* PC: 2列グリッド（meta左 / body右） */
@media (min-width: 768px) {
  .service-list__item {
    grid-template-columns: 200px 1fr;
    gap: 40px;
    padding: 34px 0;
  }
  .service-list__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 4px;
  }
}

@media (min-width: 1024px) {
  .service-list__item {
    grid-template-columns: 240px 1fr;
    gap: 56px;
  }
}

/* ------------------------------------------------------------------
   3. Case Study：余白・ラベル感の強調
   ------------------------------------------------------------------ */

/* ヘッダー内のリード文を少し暗くして "分析ボード感" を強調 */
.case-section__lead {
  color: rgba(47, 42, 38, 0.72);
}

/* Case フッターの注釈テキストを少し目立たせる */
.case-featured__footer-note {
  font-size: 13px;
  color: rgba(47, 42, 38, 0.58);
  background: rgba(91, 70, 56, 0.05);
  border-left: 2px solid rgba(91, 70, 56, 0.18);
  padding: 10px 14px;
  border-radius: 0 2px 2px 0;
  line-height: 1.8;
}

/* ------------------------------------------------------------------
   4. Brand Flow：導線マップ感の強調
   ------------------------------------------------------------------ */

/* Brand Flow の Flow Design Note をやや濃いボーダーで締める */
.brand-flow__note {
  background: rgba(91, 70, 56, 0.05);
  border: 1px solid rgba(91, 70, 56, 0.14);
}

/* ------------------------------------------------------------------
   5. Price Section：比較しやすさ強調
   ------------------------------------------------------------------ */

/* Price cards：白背景の上で少しだけ浮かせる */
.price-card {
  box-shadow: 0 4px 20px rgba(47, 42, 38, 0.06);
}
.price-card--featured {
  box-shadow: 0 8px 32px rgba(90, 62, 53, 0.12);
}

/* ------------------------------------------------------------------
   6. Trust：#EBE2D8 背景に合わせてカード色を少し調整
   ------------------------------------------------------------------ */

.trust-lower .trust-card {
  background: rgba(255, 253, 249, 0.80);
  border-color: rgba(91, 70, 56, 0.12);
}

/* ------------------------------------------------------------------
   7. セクション間余白の強弱
   ------------------------------------------------------------------ */

/* Case Study は重要セクションなので前後に余裕 */
.case-section {
  padding-block: 104px 120px;
}

/* Service は Editorial List なので少しコンパクトに */
.service {
  padding-block: 88px 96px;
}

/* Trust & FAQ は補足なので少し絞る */
.trust-lower {
  padding-block: 80px 88px;
}

/* ------------------------------------------------------------------
   8. CTA ボタン：hover 改善
   ------------------------------------------------------------------ */

.button--primary {
  transition:
    background var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.button--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* ------------------------------------------------------------------
   9. Problem セクション：Diagnosis メモ感を維持しつつ Service と差別化
      ─ 既存スタイルはほぼそのまま。ラベルのみ「Analysis」追記で印象強化
   ------------------------------------------------------------------ */

/* Problem の .problem__label に小さな補足ラベルを添えるため、
   既存の problem__label-mark に隣接する ::after を追加 */
.problem__label::after {
  content: "/ Analysis";
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(176, 106, 91, 0.52);
  margin-left: 6px;
}

/* ------------------------------------------------------------------
   10. Brand Story：白背景に合わせてボーダーを追加して境界を明確化
   ------------------------------------------------------------------ */

.brand-story {
  border-top: 1px solid rgba(91, 70, 56, 0.08);
  border-bottom: 1px solid rgba(91, 70, 56, 0.08);
}

/* ==========================================================================
   LIORNA — Fine-tuning Patch v2
   目的：背景連続の緩和・余白・Service Listと細部の可読性改善
   ========================================================================== */

/* ------------------------------------------------------------------
   A. セクション背景の連続感を緩和する
   ------------------------------------------------------------------
   前回：BrandFlow #EBE2D8 → Difference #E7D6C8 → Case #DFD3C3 の3段連続
   今回：BrandFlowを少し明るく #EFE7DC にして坂の傾きを緩める
   また Case Studyも少しだけ明るく #E6D9C9 にしてServiceとの段差を和らげる
   ------------------------------------------------------------------ */

/* Brand Flow：#EBE2D8 → #EFE7DC（少し明るく、Concept白系との差は維持） */
.brand-flow {
  background: #EFE7DC;
}
.brand-flow::before {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255, 253, 249, 0.30), transparent 60%);
}

/* Case Study：#DFD3C3 → #E6D9C9（Differenceより沈んだ存在感は維持、Serviceとの段差を緩和） */
.case-section {
  background: #E6D9C9;
}
.case-section::before {
  background:
    radial-gradient(1000px 600px at 5% 0%, rgba(255, 253, 249, 0.28), transparent 55%),
    radial-gradient(800px 500px at 100% 100%, rgba(216, 201, 188, 0.28), transparent 55%);
}

/* Process：About と同じ #F3E9DE で統合感が出すぎるので color-base に戻す */
.process-lower {
  background: var(--color-base);
}

/* ------------------------------------------------------------------
   B. Case Study ボード：内部padding を広げて「証拠カード」の余裕を作る
   ------------------------------------------------------------------ */

.case-featured {
  padding: 32px 28px 36px;
}

@media (min-width: 768px) {
  .case-featured {
    padding: 44px 44px 48px;
  }
}

@media (min-width: 1024px) {
  .case-featured {
    padding: 52px 56px 56px;
  }
}

/* ヘッダーとボディの余白も少し広げる */
.case-featured__head {
  padding-bottom: 28px;
  margin-bottom: 32px;
}

/* ------------------------------------------------------------------
   C. Service List の細部調整
   ------------------------------------------------------------------ */

/* 罫線を少し濃く（背景 #F8F3EC 上で見えやすく） */
.service-list {
  border-top-color: rgba(91, 70, 56, 0.18);
}
.service-list__item {
  border-bottom-color: rgba(91, 70, 56, 0.18);
}

/* 「詳しく見る →」を clay-red 系にして視認性向上 */
.service-list__body a {
  color: var(--clay-red);
  font-size: 13px;
}
.service-list__body a:hover {
  color: var(--color-main);
  gap: 12px;
}

/* Scope テキストを少し大きく（10px → 11px） */
.service-list__scope span {
  font-size: 11px;
}
.service-list__scope {
  font-size: 13px;
}

/* SP でのアイテム余白を少し広げて各項目の読みやすさを改善 */
@media (max-width: 767px) {
  .service-list__item {
    padding: 28px 0 26px;
    gap: 14px;
  }
  .service-list__num {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------------
   D. Brand Flow Note：新背景 #EFE7DC 上でも見えるように濃度調整
   ------------------------------------------------------------------ */

.brand-flow__note {
  background: rgba(91, 70, 56, 0.06);
  border-color: rgba(91, 70, 56, 0.18);
}

/* ------------------------------------------------------------------
   E. Contact：フォームと左コピーの見やすさを少し整える
   ------------------------------------------------------------------ */

/* フォームカードの角丸をやや小さくしてブランドトーンに合わせる */
.contact-form {
  border-radius: 16px;
}
@media (min-width: 1024px) {
  .contact-form {
    border-radius: 18px;
  }
}

/* 入力欄のフォーカスリングを少し繊細に */
.contact-form__input:focus,
.contact-form__textarea:focus {
  box-shadow: 0 0 0 3px rgba(90, 62, 53, 0.08);
  outline: none;
}

/* ------------------------------------------------------------------
   F. Case Study セクション padding を少し絞る
      （前回 104px/120px → 96px/108px に。広すぎる余白を適度に）
   ------------------------------------------------------------------ */

.case-section {
  padding-block: 96px 108px;
}

/* ------------------------------------------------------------------
   G. Trust + About の境界を補助する微細ボーダー
      （Process color-base → About #F3E9DE の切り替わりを補助）
   ------------------------------------------------------------------ */

.about-lower {
  border-top: 1px solid rgba(91, 70, 56, 0.07);
}

/* PC: Concept は横3列のまま。ただし各列の仕切りを薄く */
@media (min-width: 768px) {
  .concept__steps {
    border-top: 1px solid rgba(91, 70, 56, 0.12);
    border-bottom: 1px solid rgba(91, 70, 56, 0.12);
  }
  .concept-step {
    padding: 28px 24px;
    border-right: 1px solid rgba(91, 70, 56, 0.10);
    border-bottom: none;
  }
  .concept-step:first-of-type { padding-left: 0; }
  .concept-step:last-of-type  { border-right: none; padding-right: 0; }
}

/* Concept header の SP 余白を少し絞る */
@media (max-width: 767px) {
  .concept__header {
    margin-bottom: 32px;
  }
  .concept {
    padding-top: 64px;
    padding-bottom: 68px;
  }
}

/* ------------------------------------------------------------------
   B. Difference：LIORNA 側の各項目に役割ラベルを追加
      ─ HTML の data-label 属性を使い CSS で表示
   ------------------------------------------------------------------ */

/* Akane カラムのアイテムに data-label があれば小さなラベルを表示 */
.difference__col--akane .difference__item[data-label]::after {
  content: attr(data-label);
  display: block;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(176, 106, 91, 0.58);
  margin-top: 4px;
}

/* Akane カラムの各アイテムの縦間隔を少し広げる（ラベル分） */
.difference__col--akane .difference__list {
  gap: 18px;
}

/* Akane カラムのタイトルを少し強める */
.difference__col--akane .difference__col-title-en {
  font-size: 16px;
  letter-spacing: 0.16em;
}

/* Normal カラムはより控えめに */
.difference__col--normal .difference__item {
  font-size: 13px;
  opacity: 0.75;
}

/* ------------------------------------------------------------------
   C. Trust カード：SP での min-height を解除して軽くする
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .trust-card {
    min-height: unset;
    padding: 22px 20px 20px;
  }
  .trust-card__num--text {
    min-height: unset;
    font-size: 14px;
    margin-bottom: 10px;
  }
  .trust-card__title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .trust-card__text {
    font-size: 13px;
    line-height: 1.85;
  }
}

/* ------------------------------------------------------------------
   D. Service List SP：見出しの行間を少し引き締める
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .service-list__body h3 {
    font-size: 18px;
    line-height: 1.45;
  }
  .service-list__body p {
    font-size: 13px;
    line-height: 1.85;
  }
  .service-list__scope {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------
   E. Brand Flow SP：ステップカード間の矢印を少しコンパクトに
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .brand-flow__arrow {
    height: 22px;
  }
  .brand-flow {
    padding-top: 64px;
    padding-bottom: 68px;
  }
}

/* ------------------------------------------------------------------
   F. Difference SP：カラムの余白を少し絞る
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .difference {
    padding-top: 64px;
    padding-bottom: 68px;
  }
  .difference__col {
    padding: 24px 20px;
  }
  .difference__col--akane {
    margin-top: 12px;
  }
}

/* ==========================================================================
   LIORNA — Concept Board（Customer Decision Board）
   旧 concept__steps（3カラム導線）を置き換え
   ========================================================================== */

/* ---- ボード全体 ---- */
.concept-board {
  margin-top: 56px;
  border-top: 1px solid rgba(91, 70, 56, 0.16);
  border-bottom: 1px solid rgba(91, 70, 56, 0.16);
  padding: 30px 0 34px;
}

/* ---- ボードヘッダー ---- */
.concept-board__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.concept-board__label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
  text-transform: uppercase;
  flex-shrink: 0;
}

.concept-board__note {
  font-size: 13px;
  color: rgba(47, 42, 38, 0.52);
  margin: 0;
}

/* ---- 判断材料リスト ---- */
.concept-board__list {
  display: grid;
  grid-template-columns: 1fr;        /* SP: 縦積み */
  border-top: 1px solid rgba(91, 70, 56, 0.10);
  list-style: none;
  margin: 0;
  padding: 0;
}

.concept-board__list li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(91, 70, 56, 0.10);
}
.concept-board__list li:last-child {
  border-bottom: none;
}

.concept-board__en {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(91, 70, 56, 0.40);
  text-transform: uppercase;
}

.concept-board__list strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
}

.concept-board__list p {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(47, 42, 38, 0.58);
  margin: 0;
}

/* ---- 結論文 ---- */
.concept-board__conclusion {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed rgba(91, 70, 56, 0.14);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}

/* ================================================================
   Tablet (768px–1023px): 5列にするにはやや窮屈なので 3+2 グリッド
   ================================================================ */
@media (min-width: 768px) {
  .concept-board {
    margin-top: 64px;
    padding: 32px 0 38px;
  }

  .concept-board__list {
    grid-template-columns: repeat(3, 1fr);
    border-right: none;
  }

  .concept-board__list li {
    padding: 24px 20px 24px 0;
    border-bottom: none;
    border-right: 1px solid rgba(91, 70, 56, 0.10);
  }

  /* 3列目（3n）は右ボーダーなし */
  .concept-board__list li:nth-child(3n) {
    padding-right: 0;
  }

  /* 4列目・5列目は上ボーダーで区切る */
  .concept-board__list li:nth-child(n+4) {
    border-top: 1px solid rgba(91, 70, 56, 0.10);
    padding-top: 24px;
    margin-top: 0;
  }

  /* 5列目（最後）は右ボーダーなし（3列目ルールが効かない列） */
  .concept-board__list li:last-child {
    border-right: none;
    padding-right: 0;
  }

  .concept-board__list strong {
    font-size: 17px;
  }

  .concept-board__conclusion {
    font-size: 16px;
  }
}

/* ================================================================
   PC (1024px+): 5列横並び
   ================================================================ */
@media (min-width: 1024px) {
  .concept-board {
    margin-top: 72px;
    padding: 32px 0 40px;
  }

  .concept-board__list {
    grid-template-columns: repeat(5, 1fr);
  }

  .concept-board__list li {
    padding: 26px 22px 26px 0;
    border-bottom: none;
    border-right: 1px solid rgba(91, 70, 56, 0.10);
    border-top: none;   /* PC では上ボーダー不要 */
  }

  /* 4列目・5列目の tablet 用 border-top を PC では解除 */
  .concept-board__list li:nth-child(n+4) {
    border-top: none;
    padding-top: 26px;
  }

  .concept-board__list li:last-child {
    border-right: none;
    padding-right: 0;
  }

  .concept-board__conclusion {
    font-size: 17px;
  }
}

/* ================================================================
   SP (max 767px)
   ================================================================ */
@media (max-width: 767px) {
  .concept-board {
    margin-top: 40px;
    padding: 24px 0 28px;
  }

  .concept-board__head {
    display: block;
  }

  .concept-board__note {
    margin-top: 6px;
  }

  /* SP: block → listの縦積みはデフォルトのgrid:1fr が効く */
  .concept-board__list li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(91, 70, 56, 0.10);
  }
  .concept-board__list li:last-child {
    border-bottom: none;
  }

  .concept-board__list strong {
    font-size: 15px;
  }

  .concept-board__conclusion {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ==========================================================================
   LIORNA — About Section Refinement
   目的：about-strengthsカード廃止 → Focus List / profile-card → about-profile
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Focus List（旧 about-strengths カードの置き換え）
   ------------------------------------------------------------------ */

.about-focus {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid rgba(91, 70, 56, 0.14);
  border-bottom: 1px solid rgba(91, 70, 56, 0.14);
}

.about-focus__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(91, 70, 56, 0.10);
}
.about-focus__item:last-child {
  border-bottom: none;
}

.about-focus__item p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}

/* SP: 縦積み */
@media (max-width: 767px) {
  .about-focus {
    margin-top: 28px;
  }
  .about-focus__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }
  .about-focus__item p {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------
   2. Aboutリンクの余白調整
   ------------------------------------------------------------------ */

.about-lower__link {
  margin-top: 28px;
}

/* ------------------------------------------------------------------
   3. about-profile（旧 profile-card の置き換え）
   ------------------------------------------------------------------ */

.about-profile {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(251, 246, 238, 0.86));
  border: 1px solid rgba(91, 70, 56, 0.14);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 18px 42px rgba(47, 42, 38, 0.045);
}

/* ブランドエリア（上部） */
.about-profile__brand {
  min-height: 230px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 253, 249, 0.86), transparent 62%),
    rgba(248, 244, 238, 0.72);
  border-bottom: 1px solid rgba(91, 70, 56, 0.10);
  padding: 24px;
}

.about-profile__brand-name {
  font-family: var(--font-en);
  font-size: 28px;
  letter-spacing: 0.22em;
  color: rgba(91, 70, 56, 0.58);
  margin: 0;
  line-height: 1;
}

.about-profile__brand-sub {
  margin: 10px 0 0;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(91, 70, 56, 0.38);
  text-transform: uppercase;
}

/* 情報エリア（下部） */
.about-profile__body {
  padding: 28px 30px 32px;
}

.about-profile__name {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 6px;
}

.about-profile__role {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--clay-red);
  margin: 0 0 18px;
}

.about-profile__text {
  font-size: 14px;
  line-height: 1.95;
  color: rgba(47, 42, 38, 0.62);
  margin: 0;
}


/* SP: 横幅いっぱいに広がるのみ。上部ブランドエリアを少しコンパクトに */
@media (max-width: 767px) {
  .about-profile__brand {
    min-height: 130px;
  }
  .about-profile__brand-name {
    font-size: 24px;
  }
  .about-profile__body {
    padding: 22px 24px 26px;
  }
}

/* ==========================================================================
   LIORNA — Concept Board Fine-tuning
   目的：ラベル視認性・タイトル強化・結論文の締め感
   ========================================================================== */

/* 1. ボードラベルを少し強く */
.concept-board__label {
  font-weight: 500;
  letter-spacing: 0.18em;
}

/* ノートの alpha を少し上げる */
.concept-board__note {
  color: rgba(47, 42, 38, 0.62);
}

/* 2. 判断材料タイトルを読みやすく */
.concept-board__list strong {
  font-size: 18px;
  line-height: 1.65;
}

/* 本文はやや上げるだけ（強くしすぎない） */
.concept-board__list p {
  color: rgba(47, 42, 38, 0.66);
}

/* 3. 結論文：Conceptの締めとして印象付ける */
.concept-board__conclusion {
  margin-top: 32px;
  padding: 24px 28px 0;
  border-top: 1px dashed rgba(91, 70, 56, 0.16);
  font-size: 17px;
  line-height: 1.95;
}

/* 結論文の強調 span を clay-red に */
.concept-board__conclusion span {
  color: var(--clay-red);
}

/* 4. PC 5列リストの各項目余白を少し広げる */
@media (min-width: 1024px) {
  .concept-board__list li {
    padding: 28px 24px 28px 0;
  }
  /* 最終列（padding-right: 0）は維持 */
  .concept-board__list li:last-child {
    padding-right: 0;
  }
}

/* SP：結論文・タイトルの SP 向け調整 */
@media (max-width: 767px) {
  .concept-board__conclusion {
    padding: 22px 0 0;
    font-size: 16px;
  }
  .concept-board__list strong {
    font-size: 17px;
  }
}

/* 英字ラベルをやや濃く（数字なくなった分、役割を担う） */
.concept-board__en {
  color: rgba(91, 70, 56, 0.58);
  margin-bottom: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------------
   2. Problem：数字を非表示（Diagnosisを主役に）
   ------------------------------------------------------------------ */

.problem-card__num {
  display: none;
}

/* Diagnosis ラベルを少し強調して、数字の穴を埋める */
.problem-card__label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(176, 106, 91, 0.72);
}

/* problem-card__head の gap を詰める（数字消えた分） */
.problem-card__head {
  gap: 0;
  margin-bottom: 14px;
}

/* 新ラベル */
.about-focus__label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(176, 106, 91, 0.72);
  flex-shrink: 0;
}

/* grid の左カラム幅を新ラベルに合わせて調整 */
.about-focus__item {
  grid-template-columns: 120px 1fr;
}

/* SP では1カラムのまま（既存ルール継承） */

/* ------------------------------------------------------------------
   4. Contact：Analysis Note memo を非表示
      ─ Contactは行動の場。分析ラベルは余分な情報に見える
   ------------------------------------------------------------------ */

.memo--contact {
  display: none;
}

/* ------------------------------------------------------------------
   5. セクションラベル全体：統一感のある色に微調整
      ─ 現状 clay-red 系のまま維持。強すぎる箇所だけ alpha を下げる
   ------------------------------------------------------------------ */

/* Concept / Brand Story のラベルは少し控えめに */
.concept__label,
.brand-story__label {
  color: rgba(176, 106, 91, 0.78);
}

/* ==========================================================================
   LIORNA — Concept Board Grid Spacing Fix
   問題：PC 5列で各 li の padding-right: 0 のため中央列コンテンツが
         border-right（仕切り線）に接して右余白が消えていた
   修正：padding-right を 20px に設定し、最終列のみ 0 を維持
         Tablet 3列でも同様に修正
   ========================================================================== */

/* PC (1024px+): 右余白を確保 */
@media (min-width: 1024px) {
  .concept-board__list li {
    padding: 28px 20px 28px 0;
  }
  .concept-board__list li:nth-child(3n) {
    padding: 28px 20px 28px 0;
  }
  /* 最終列は右余白不要（グリッド端） */
  .concept-board__list li:last-child {
    padding-right: 0;
  }
}

/* Tablet (768px–1023px): 3+2列でも同様に修正 */
@media (min-width: 768px) and (max-width: 1023px) {
  .concept-board__list li {
    padding: 24px 18px 24px 0;
  }
  /* 3列目・最終列は右余白不要 */
  .concept-board__list li:nth-child(3n),
  .concept-board__list li:last-child {
    padding-right: 0;
  }
}
/* ==========================================================================
   LIORNA — Case Study Responsive Fix
   対象：iPad (768px–1023px) での case-phase / visual のレイアウト崩れ修正
   
   問題：
   ・case-featured__body が grid 1fr 1fr になる
   ・右列に phone 2枚（各200px + gap 28px = 428px）が収まらずオーバーフロー
   ・左列の phase カードが 141px 幅で日本語テキストが極端に窮屈
   
   修正：
   ・iPad では body を縦積みに戻す
   ・case-phase は 2×2 グリッドを維持（幅が十分あるため）
   ・visual はスマホ2枚を横並び・サイズ縮小
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* body を縦積みに変更（left/right 2列 → 上下積み） */
  .case-featured__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* phase は横幅が十分あるので 2×2 グリッドを維持 */
  .case-phase {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* phase item の幅が確保されるので padding も適切に */
  .case-phase__item {
    padding: 20px 18px;
  }

  .case-phase__text {
    font-size: 13.5px;
    line-height: 1.88;
  }

  /* visual: 縦積み body の下段に横並び2枚 */
  .case-featured__visual {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: nowrap;
  }

  /* スマホ画像サイズを iPad 幅に合わせて縮小 */
  .case-featured__phone {
    width: clamp(130px, 22vw, 170px);
  }
}

/* ==========================================================================
   LIORNA — Parallax Layer
   対象：brand-flow__deco / contact-section__deco
   ========================================================================== */

/* ---- will-change：パララックス対象全般 ---- */
[data-parallax] {
  will-change: transform;
}

/* SP では will-change を解除（消費電力・描画負荷を下げる） */
@media (max-width: 767px) {
  [data-parallax] {
    will-change: auto;
  }
}

/* ---- Brand Flow：背景装飾オーブ ---- */
.brand-flow__deco {
  position: absolute;
  top: -80px;
  right: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(215, 195, 175, 0.18) 0%,
    rgba(215, 195, 175, 0.06) 55%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  /* セクション内に収める */
  overflow: hidden;
}

/* brand-flow が position: relative を持つことを保証 */
.brand-flow {
  position: relative;
}

/* ---- Contact：背景装飾オーブ ---- */
.contact-section__deco {
  position: absolute;
  bottom: -60px;
  left: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(232, 215, 200, 0.22) 0%,
    rgba(232, 215, 200, 0.07) 55%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* contact-section が position: relative を持つことを保証（既に指定済みだが念のため） */
.contact-section {
  position: relative;
}

/* ---- SP：装飾オーブを縮小して負荷を下げる ---- */
@media (max-width: 767px) {
  .brand-flow__deco {
    width: 280px;
    height: 280px;
    top: -40px;
    right: -60px;
  }
  .contact-section__deco {
    width: 240px;
    height: 240px;
    bottom: -30px;
    left: -40px;
  }
}

/* ==========================================================================
   LIORNA — Parallax Overflow Fix
   原因：各セクションの overflow: hidden が translate3d をクリップして
         パララックスが視覚的に作動しなかった
   対応：overflow: hidden → overflow: clip に変更
         clip は要素の transform をクリッピングしないため parallax が機能する
         ただし -webkit- prefix が不要な現代ブラウザ向け（Safari 16+, Chrome 90+）
   ========================================================================== */

/* Hero：overflow: clip でクリッピング維持しつつ transform は通過させる */
.hero--bg {
  overflow: clip;
}

/* Brand Flow：同上 */
.brand-flow {
  overflow: clip;
}

/* Case Study セクション：同上 */
.case-section {
  overflow: clip;
}

/* Contact：同上 */
.contact-section {
  overflow: clip;
}

/* ------------------------------------------------------------------
   brand-flow__deco と contact-section__deco の視認性を上げる
   overflow: clip になったことで初期位置からはみ出た部分が見えるようになる
   オーブの opacity と色を少し調整して存在感を確認しやすくする
   ------------------------------------------------------------------ */

.brand-flow__deco {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(200, 178, 155, 0.22) 0%,
    rgba(200, 178, 155, 0.08) 50%,
    transparent 70%
  );
  /* overflow: clip に変更したため overflow: hidden を外す */
  overflow: visible;
}

.contact-section__deco {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(210, 185, 162, 0.26) 0%,
    rgba(210, 185, 162, 0.09) 50%,
    transparent 70%
  );
}
/* ==========================================================================
   Reference Motion Add-on — FV Slider / Loop / Blur BG / Reservation Map
   ========================================================================== */

:root {
  --section-bg-current: #F8F4EE;
}

body {
  position: relative;
  background: var(--section-bg-current);
}

.blur-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--section-bg-current);
  transition: background-color 900ms cubic-bezier(.4, 0, .2, 1);
}

/* FV image slider */
.hero__slider {
  --parallax-y: 0px;
  position: absolute;
  inset: -6% 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}

.hero__slider--pc { display: block; }
.hero__slider--sp { display: none; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 1400ms cubic-bezier(.4, 0, .2, 1),
    transform 5200ms cubic-bezier(.22, 1, .36, 1);
}

.hero__slide.is-active {
  opacity: 1;
  transform: scale(1.07);
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.hero__slide--crop-left img { object-position: 58% center; }
.hero__slide--crop-soft img { object-position: 72% center; filter: saturate(.96) brightness(1.02); }

@media (max-width: 767px) {
  .hero__slider--pc { display: none; }
  .hero__slider--sp { display: block; }
  .hero__slider { inset: -4% 0; }
  .hero__slide img { object-position: center 88%; }
  .hero__slide--crop-left img { object-position: 48% 82%; }
  .hero__slide--crop-soft img { object-position: 62% 86%; }
}

/* Loop text band */
.liorna-loop {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  background: rgba(255, 253, 249, .58);
  border-top: 1px solid rgba(216, 201, 188, .6);
  border-bottom: 1px solid rgba(216, 201, 188, .6);
  z-index: 1;
}

.liorna-loop__list {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.liorna-loop__list span {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(22px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: .08em;
  color: rgba(90, 62, 53, .24);
}

.liorna-loop__list span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(18px, 2.5vw, 36px));
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(184, 121, 104, .42);
  transform: translateY(-50%);
}

/* Reservation route interactive map */
.reservation-map {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  margin: 56px 0 32px;
  padding: clamp(22px, 3.5vw, 36px);
  background:
    linear-gradient(135deg, rgba(255,253,249,.86), rgba(251,245,239,.74));
  border: 1px solid rgba(216, 201, 188, .78);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(47, 42, 38, .07);
  position: relative;
  overflow: hidden;
}

.reservation-map::before {
  content: "Reservation Route";
  position: absolute;
  right: -12px;
  top: 10px;
  font-family: var(--font-en);
  font-size: clamp(34px, 7vw, 88px);
  line-height: 1;
  color: rgba(90, 62, 53, .055);
  pointer-events: none;
  white-space: nowrap;
}

.reservation-map__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.reservation-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.reservation-map__path {
  fill: none;
  stroke: rgba(184, 121, 104, .38);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
}

.reservation-map__node {
  color: var(--color-main);
  cursor: pointer;
  outline: none;
}

.reservation-map__node circle {
  fill: rgba(255, 253, 249, .92);
  stroke: rgba(90, 62, 53, .22);
  stroke-width: 1.4;
  filter: drop-shadow(0 12px 18px rgba(47, 42, 38, .08));
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 260ms var(--ease),
    stroke 260ms var(--ease),
    transform 260ms var(--ease);
}

.reservation-map__node text {
  font-family: var(--font-en);
  font-size: 21px;
  letter-spacing: .06em;
  fill: currentColor;
  pointer-events: none;
}

.reservation-map__node .reservation-map__small {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .08em;
  fill: var(--color-text-sub);
}

.reservation-map__node:hover circle,
.reservation-map__node:focus-visible circle,
.reservation-map__node.is-active circle {
  fill: #F0E4DD;
  stroke: rgba(184, 121, 104, .9);
  transform: scale(1.08);
}

.reservation-map__node--goal circle {
  fill: #E9E9E0;
}

.reservation-map__panel {
  position: relative;
  z-index: 1;
  padding: 24px 24px 22px;
  background: rgba(255, 253, 249, .78);
  border: 1px solid rgba(216, 201, 188, .72);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reservation-map__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--color-accent);
}

.reservation-map__title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.6;
  color: var(--color-text);
}

.reservation-map__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .liorna-loop { padding: 14px 0; }
  .reservation-map {
    grid-template-columns: 1fr;
    margin: 40px 0 24px;
    border-radius: 14px;
  }
  .reservation-map__svg { min-width: 620px; }
  .reservation-map__visual {
    overflow-x: auto;
    padding: 8px 4px 14px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .blur-bg {
    transition: none !important;
  }
}


/* ==========================================================================
   LIORNA — Layered Background Motion Refinement
   「固定背景色の切り替え」＋「半透明背景」＋「浮遊装飾」
   ========================================================================== */

:root {
  --liorna-bg-hero: #F6EFE6;
  --liorna-bg-concept: #F8F4EE;
  --liorna-bg-problem: #F1E5D8;
  --liorna-bg-story: #F8EFE7;
  --liorna-bg-flow: #F5E4DC;
  --liorna-bg-difference: #FFFDF9;
  --liorna-bg-case: #F7F1EA;
  --liorna-bg-service: #EFE2D6;
  --liorna-bg-price: #F8F4EE;
  --liorna-bg-process: #F3E8DE;
  --liorna-bg-about: #FFFDF9;
  --liorna-bg-trust: #F8F4EE;
  --liorna-bg-contact: #E6D2C4;
}

html {
  background: var(--section-bg-current, var(--liorna-bg-hero));
}

body {
  background: transparent !important;
  isolation: isolate;
}

.blur-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: var(--section-bg-current, var(--liorna-bg-hero));
  transition: background-color 1100ms cubic-bezier(.4, 0, .2, 1);
}

.blur-bg::before,
.blur-bg::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: .55;
  transition: opacity 900ms var(--ease), transform 1400ms var(--ease);
}

.blur-bg::before {
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  right: -8vw;
  top: 10vh;
  background: radial-gradient(circle, rgba(184, 121, 104, .16), rgba(184, 121, 104, 0) 68%);
}

.blur-bg::after {
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  left: -14vw;
  bottom: -12vh;
  background: radial-gradient(circle, rgba(143, 162, 138, .14), rgba(143, 162, 138, 0) 70%);
}

.main,
.site-header,
.sp-menu {
  position: relative;
}

.main { z-index: 1; }
.site-header,
.sp-menu { z-index: 100; }

.main > section,
.liorna-loop {
  position: relative;
  z-index: 1;
}

/* セクションそのものはベタ塗りを弱め、固定背景が透けるようにする */
.hero,
.concept,
.problem,
.brand-story,
.brand-flow,
.difference,
.case-section,
.service,
.price-guide,
.process-lower,
.about-lower,
.trust-lower,
.contact-section {
  background-color: transparent !important;
}

.concept { background: rgba(255, 253, 249, .28) !important; }
.problem { background: rgba(255, 253, 249, .16) !important; }
.brand-story { background: rgba(255, 253, 249, .18) !important; }
.brand-flow { background: rgba(255, 253, 249, .22) !important; }
.difference { background: rgba(255, 253, 249, .44) !important; }
.case-section { background: rgba(255, 253, 249, .22) !important; }
.service { background: rgba(255, 253, 249, .18) !important; }
.price-guide { background: rgba(255, 253, 249, .28) !important; }
.process-lower { background: rgba(255, 253, 249, .18) !important; }
.about-lower { background: rgba(255, 253, 249, .42) !important; }
.trust-lower { background: rgba(255, 253, 249, .20) !important; }
.contact-section { background: rgba(90, 62, 53, .06) !important; }

/* セクション内の中身を浮遊装飾より前面へ */
.concept > :not(.liorna-float),
.problem > :not(.liorna-float),
.brand-story > :not(.liorna-float),
.brand-flow > :not(.liorna-float),
.difference > :not(.liorna-float),
.case-section > :not(.liorna-float),
.service > :not(.liorna-float),
.price-guide > :not(.liorna-float),
.process-lower > :not(.liorna-float),
.about-lower > :not(.liorna-float),
.trust-lower > :not(.liorna-float),
.contact-section > :not(.liorna-float) {
  position: relative;
  z-index: 2;
}

/* 画像素材版：紙片カード風モチーフ
   --------------------------------------------------------------------------
   画像ファイルは仮パスです。実素材作成後、以下へ配置してください。
   images/motifs/paper-card.png
   images/motifs/ui-chip.png
   images/motifs/memo-fragment.png
   images/motifs/color-note.png
   images/motifs/layered-card.png
   images/motifs/photo-card.png
   ========================================================================== */
.liorna-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: 178px;
  height: auto;
  opacity: .96;
  filter: drop-shadow(0 18px 34px rgba(47, 42, 38, .10));
  transform-origin: 50% 50%;
  animation: liornaPaperFloatA 6.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.liorna-float__img {
  display: block;
  width: 60%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* 種類別のサイズ感。画像自体の比率に合わせて微調整 */
.liorna-float--paper { width: 168px; }
.liorna-float--ui { width: 166px; }
.liorna-float--memo { width: 168px; }
.liorna-float--color { width: 188px; }
.liorna-float--photo { width: 178px; }

/* セクション別配置 */
.liorna-float--concept-1 { top: 13%; right: 6%; animation-delay: .2s; }
.liorna-float--concept-2 { left: 5%; bottom: 11%; animation-delay: 1.0s; }

.liorna-float--problem-1 { top: 8%; right: 8%; animation-delay: .6s; }
.liorna-float--brand-2 { left: 5%; bottom: 14%; animation-delay: 1.5s; }

.liorna-float--case-1 { top: 8%; right: 7%; animation-delay: .9s; }

.liorna-float--service-1 { top: 12%; left: 0; animation-delay: .4s; }
.liorna-float--service-2 { right: 5%; bottom: 12%; animation-delay: 1.4s; }
.liorna-float--price-2 { left: 0; bottom: 11%; animation-delay: 1.25s; }

.liorna-float--contact-1 { top: 10%; right: 8%; width: 158px; animation-delay: .3s; }

/* 浮遊モチーフ：2パターン化
   A：右上へふわっと上がる標準パターン
   B：少し反対方向へ揺れる補助パターン
   どちらも 0% と 100% を同じ状態にして、ループ時のカクつきを防止。
*/
.liorna-float--concept-2,
.liorna-float--problem-2,
.liorna-float--brand-2,
.liorna-float--case-2,
.liorna-float--service-2,
.liorna-float--price-2,
.liorna-float--contact-1 {
  animation-name: liornaPaperFloatB;
  animation-duration: 7.6s;
}


@keyframes liornaPaperFloatA {
  0% {
    transform: translate3d(0, 8px, 0) rotate(-5deg);
  }
  50% {
    transform: translate3d(7px, -26px, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(0, 8px, 0) rotate(-5deg);
  }
}

@keyframes liornaPaperFloatB {
  0% {
    transform: translate3d(-4px, 7px, 0) rotate(4deg);
  }
  50% {
    transform: translate3d(5px, -22px, 0) rotate(-5deg);
  }
  100% {
    transform: translate3d(-4px, 7px, 0) rotate(4deg);
  }
}

@media (max-width: 767px) {
  .liorna-float {
    width: 118px;
    opacity: .94;
    filter: drop-shadow(0 12px 24px rgba(47, 42, 38, .09));
  }

  .liorna-float--paper,
  .liorna-float--ui,
  .liorna-float--memo { width: 116px; }

  .liorna-float--color,
  .liorna-float--layered,
  .liorna-float--photo { width: 126px; }

  .liorna-float--contact-1 { width: 112px; }

  .liorna-float--concept-1,
  .liorna-float--problem-1,
  .liorna-float--brand-1,
  .liorna-float--case-1,
  .liorna-float--service-1,
  .liorna-float--price-1,
  .liorna-float--contact-1 {
    top: 16px;
    right: 14px;
    left: auto;
  }

  .liorna-float--concept-2,
  .liorna-float--problem-2,
  .liorna-float--brand-2,
  .liorna-float--case-2,
  .liorna-float--service-2,
  .liorna-float--price-2 {
    left: 10px;
    bottom: 20px;
    top: auto;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liorna-float {
    animation: none !important;
  }
}

/* Hero下の接続をなめらかにする */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.liorna-loop {
  background: rgba(255, 253, 249, .44);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 767px) {

  .liorna-float {
    min-width: 70px;
    min-height: 30px;
    padding: 6px 12px;
    font-size: 10px;
    opacity: .68;
  }

  .liorna-float--concept-1,
  .liorna-float--problem-1,
  .liorna-float--brand-1,
  .liorna-float--case-1,
  .liorna-float--service-1,
  .liorna-float--price-1,
  .liorna-float--contact-1 {
    top: 18px;
    right: 18px;
    left: auto;
  }

  .liorna-float--concept-2,
  .liorna-float--problem-2,
  .liorna-float--brand-2,
  .liorna-float--case-2,
  .liorna-float--service-2,
  .liorna-float--price-2 {
    left: 10px;
    bottom: 28px;
    top: auto;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liorna-float {
    animation: none !important;
  }

  .blur-bg,
  .blur-bg::before,
  .blur-bg::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Contact position fix
   --------------------------------------------------------------------------
   原因：Reference Motion Add-on の
   .contact-section > :not(.liorna-float) が .contact-section__deco にも当たり、
   本来 absolute の装飾要素が relative 扱いになってレイアウト上の高さを持ち、
   .contact-section__inner を下へ押し下げていた。
   装飾要素は再度 absolute に戻し、本文だけを前面に出す。
   ========================================================================== */
.brand-flow__deco,
.contact-section__deco {
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none;
}

.contact-section__inner {
  position: relative;
  z-index: 2;
}

/* SPでは少し小さめにして、文字落ちを防ぐ */
@media (max-width: 767px) {
  .brand-flow-map__point,
  .brand-flow__point,
  .flow-map__point,
  .reservation-flow__point {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    gap: 3px;
  }

  .brand-flow-map__point span,
  .brand-flow__point span,
  .flow-map__point span,
  .reservation-flow__point span,
  .brand-flow-map__point strong,
  .brand-flow__point strong,
  .flow-map__point strong,
  .reservation-flow__point strong {
    max-width: 62px;
    font-size: 11px;
    letter-spacing: .03em;
    transform: scaleX(.88);
  }

  .brand-flow-map__point span:last-child,
  .brand-flow__point span:last-child,
  .flow-map__point span:last-child,
  .reservation-flow__point span:last-child,
  .brand-flow-map__point small,
  .brand-flow__point small,
  .flow-map__point small,
  .reservation-flow__point small {
    max-width: 60px;
    font-size: 9px;
  }
}


/* P-MVV copy fix: 正式文が長くなっても読みやすくする */
.pmvv-panel__lead {
  max-width: 92%;
}

@media (max-width: 767px) {
  .pmvv-panel__lead {
    max-width: none;
  }
}


/* P-MVV hover fix */
.pmvv-circle {
  pointer-events: auto;
}

.pmvv-circle__img,
.pmvv-circle__content {
  pointer-events: none;
}

.pmvv-panel {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.pmvv-panel.is-changing {
  opacity: .28;
  transform: translateY(8px);
}


/* ==========================================================================
   Production Support
   制作サポート実績：Case Studyを補足する小さめの実制作経験セクション
   ========================================================================== */

.production-support {
  position: relative;
  padding: 88px 0 96px;
  background: transparent;
  color: var(--color-text);
  overflow: hidden;
}

.production-support::before {
  content: "Support";
  position: absolute;
  right: -12px;
  top: 34px;
  font-family: var(--font-en);
  font-size: clamp(68px, 10vw, 132px);
  line-height: 1;
  color: rgba(90, 62, 53, .045);
  letter-spacing: .02em;
  pointer-events: none;
}


.production-support::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255, 253, 249, 0.34), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(232, 221, 208, 0.22), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.production-support__inner {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - var(--side-pad-sp) * 2));
  margin: 0 auto;
}

.production-support__header {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, .78fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}

.production-support__label {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--color-accent);
}

.production-support__label-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(184, 121, 104, .13);
}

.production-support__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: -.02em;
  color: var(--color-text);
}

.production-support__lead {
  max-width: 560px;
  font-size: 14px;
  line-height: 2.05;
  color: var(--color-text-sub);
}

.production-support__body {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.production-support__note {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 28px;
  border: 1px solid rgba(90, 62, 53, .14);
  background: rgba(255, 253, 249, .68);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .68) inset,
    0 18px 48px rgba(47, 42, 38, .055);
}

.production-support__note-title {
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--color-text);
}

.production-support__note-text {
  font-size: 13px;
  line-height: 2;
  color: var(--color-text-sub);
}

.production-support__list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(90, 62, 53, .16);
}

.production-support__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(90, 62, 53, .12);
}

.production-support__num {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--color-accent);
}

.production-support__type {
  margin-bottom: 6px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--color-text-sub);
}

.production-support__content h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text);
}

.production-support__content p:last-child {
  font-size: 13px;
  line-height: 1.95;
  color: var(--color-text-sub);
}

.production-support__caption {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed rgba(90, 62, 53, .16);
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub);
}

@media (min-width: 1024px) {
  .production-support__item {
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  }

  .production-support__item:hover {
    transform: translateX(6px);
    border-color: rgba(184, 121, 104, .24);
  }
}

@media (max-width: 1023px) {
  .production-support {
    padding: 84px 0 92px;
  }

  .production-support__header {
    display: block;
    margin-bottom: 34px;
  }

  .production-support__title {
    margin-top: 18px;
  }

  .production-support__lead {
    margin-top: 20px;
  }

  .production-support__body {
    grid-template-columns: 1fr;
  }

  .production-support__note {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767px) {
  .production-support {
    padding: 72px 0 80px;
  }

  .production-support::before {
    top: 24px;
    right: -32px;
    font-size: 76px;
  }

  .production-support__title {
    font-size: 28px;
  }

  .production-support__lead {
    font-size: 14px;
    line-height: 1.95;
  }

  .production-support__note {
    padding: 22px;
  }

  .production-support__note-title {
    font-size: 18px;
  }

  .production-support__item {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  .production-support__content h3 {
    font-size: 15px;
  }
}


/* ==========================================================================
   Top Page Header / SP Menu Fix
   - トップページ内アンカー導線用
   - CSS整理後の .main, .site-header, .sp-menu { position: relative; } 上書きを補正
   ========================================================================== */
#wpadminbar {
  display: none;
}

html {
  scroll-padding-top: calc(var(--header-h, 80px) + 18px);
  margin: 0 !important;
}

/* PC/SP共通：ヘッダーを確実に固定 */
.site-header {
  max-width: 1200px;
  top: 0;
  left: 12px;
  right: 12px;
  margin: 0 auto;
  margin-top: 8px;
  border-radius: 50px;
  position: fixed !important;
  z-index: 1000 !important;
  height: var(--header-h, 80px);
  background: rgba(248, 244, 238, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(216, 201, 188, 0.72);
}

.site-header__inner {
  position: relative;
  z-index: 2;
}

.head-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* SPでもCTAとメニューボタンが窮屈になりすぎないよう調整 */
@media (max-width: 767px) {
  .site-header__inner {
    padding-inline: 22px;
  }

  .site-header__logo-img {
    height: 32px;
  }

  .head-right {
    gap: 14px;
  }

  .site-header__cta {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
  }

  .site-header__menu-button {
    width: 44px;
    height: 44px;
  }
}

/* PCでは通常ナビ、SPではハンバーガー */
@media (min-width: 1024px) {
  .site-header__menu-button {
    display: none !important;
  }

  .sp-menu {
    display: none !important;
  }
}

/* SPメニュー：ヘッダー下に表示される上品なドロップダウン */
.sp-menu {
  position: fixed !important;
  top: var(--header-h, 95px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900 !important;
  background: rgba(43, 37, 34, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms var(--ease),
    visibility 260ms var(--ease);
}

.sp-menu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-menu__inner {
  position: absolute;
  top: 14px;
  right: 18px;
  bottom: auto;
  width: min(330px, calc(100vw - 36px));
  max-height: calc(100dvh - var(--header-h, 80px) - 28px);
  padding: 28px 28px 30px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(255, 253, 249, 0.91));
  border: 1px solid rgba(216, 201, 188, 0.86);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 22px 48px rgba(47, 42, 38, 0.14);
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  transform: translateY(-10px);
  opacity: 0;
  transition:
    transform 320ms var(--ease),
    opacity 260ms var(--ease);
}

.sp-menu[aria-hidden="false"] .sp-menu__inner {
  transform: translateY(0);
  opacity: 1;
}

.sp-menu__list {
  border-top: 1px solid rgba(216, 201, 188, 0.82);
}

.sp-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 2px;
  border-bottom: 1px dashed rgba(216, 201, 188, 0.86);
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  color: var(--color-text);
}

.sp-menu__link::after {
  content: "→";
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--color-accent);
  transform: translateX(-4px);
  opacity: 0.72;
  transition:
    transform var(--dur-base) var(--ease),
    opacity var(--dur-base) var(--ease);
}

.sp-menu__link:hover,
.sp-menu__link:focus-visible {
  color: var(--color-main);
  padding-left: 0;
}

.sp-menu__link:hover::after,
.sp-menu__link:focus-visible::after {
  transform: translateX(0);
  opacity: 1;
}

.sp-menu__cta {
  width: 100%;
  height: 48px;
  justify-content: center;
  box-shadow: none;
}

/* メニューOPEN時もヘッダーは前面に残し、閉じるボタンを押せるようにする */
body.is-menu-open {
  overflow: hidden;
}

body.is-menu-open .site-header {
  box-shadow: 0 8px 24px rgba(47, 42, 38, 0.08);
}

/* アンカー遷移時、固定ヘッダーに見出しが隠れにくいようにする */
.main > section {
  scroll-margin-top: calc(var(--header-h, 80px) + 18px);
}


/* ==========================================================================
   Contact Social Links
   フォーム送信を主役にしたまま、Instagram / About への補助導線を小さく置く
   ========================================================================== */

.contact-social {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed rgba(91, 70, 56, 0.16);
}

.contact-social__lead {
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--color-text-sub);
  text-align: center;
}

.contact-social__link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(91, 70, 56, 0.13);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.72);
  color: var(--color-text);
  transition:
    transform var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
}

.contact-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(184, 121, 104, 0.09);
  color: var(--color-accent);
}

.contact-social__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-social__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-social__title {
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.contact-social__text {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-sub);
}

.contact-social__arrow {
  font-size: 12px;
  color: var(--color-accent);
  transform: translateX(-2px);
  transition: transform var(--dur-base) var(--ease);
}

.contact-social__link:hover,
.contact-social__link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(184, 121, 104, 0.28);
  background: rgba(255, 253, 249, 0.92);
}

.contact-social__link:hover .contact-social__arrow,
.contact-social__link:focus-visible .contact-social__arrow {
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .contact-social {
    margin-top: 30px;
    padding-top: 24px;
  }
}

@media (max-width: 767px) {
  .contact-social__lead {
    font-size: 11px;
  }

  .contact-social__link {
    min-height: 56px;
    padding: 11px 12px;
    border-radius: 12px;
  }
}



/* ===== Case detail styles ===== */

/* ==========================================================================
   Case Detail Page
   "改善提案の思考過程を見せる" — 16セクション構成
   ========================================================================== */

:root {
  --cd-bg:       #F0E6D8;          /* case-bg に合わせて少し深め */
  --cd-paper:    #FFFDF9;
  --cd-paper-2:  #FBF5EF;
  --cd-line:     rgba(78, 52, 44, 0.14);   /* color-line と統一 */
  --cd-line-2:   rgba(78, 52, 44, 0.24);   /* color-line-strong と統一 */
}

.case-detail {
  background: var(--cd-bg);
  color: var(--color-text);
}

/* セクション共通の基本余白（個別セクションで上書き） */
.case-detail > section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

/* 共通 inner */
.cd-hero__inner,
.cd-overview__inner,
.cd-before__inner,
.cd-problem__inner,
.cd-analysis__inner,
.cd-direction__inner,
.cd-structure__inner,
.cd-sp-compare__inner,
.cd-cta-analysis__inner,
.cd-ig-flow__inner,
.cd-after__inner,
.cd-expected__inner,
.cd-process__inner,
.cd-reflection__inner,
.cd-type-note__inner,
.cd-final__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* 共通 Section Label */
.cd-section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--clay-red);
}
.cd-section-label__mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}
.cd-section-label--center {
  justify-content: center;
  display: inline-flex;
}

/* 背景ローテーション */
.cd-hero       { background: var(--color-base); }
.cd-overview   { background: var(--cd-bg); }
.cd-before     { background: var(--color-base); }
.cd-problem    { background: var(--cd-bg); }
.cd-analysis   { background: var(--color-base); }
.cd-direction  { background: var(--cd-bg); }
.cd-structure  { background: var(--color-base); }
.cd-sp-compare { background: var(--cd-bg); }
.cd-cta-analysis { background: var(--color-base); }
.cd-ig-flow    { background: var(--cd-bg); }
.cd-after      { background: var(--color-base); }
.cd-expected   { background: var(--cd-bg); }
.cd-process    { background: var(--color-base); }
.cd-reflection { background: var(--color-card); }
.cd-type-note  { background: var(--cd-bg); padding: 32px 0 !important; }
.cd-final      { background: #E8DDD0; border-top: 1px solid var(--cd-line-2); }

/* 共通テクスチャ */
.cd-hero::before,
.cd-analysis::before,
.cd-sp-compare::before,
.cd-after::before,
.cd-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(255, 253, 249, 0.45), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(232, 221, 208, 0.4), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   01. Case Hero
   ========================================================================== */
.cd-hero {
  padding: 56px 0 88px;
}

/* パンくず */
.cd-breadcrumb {
  margin-bottom: 32px;
}
.cd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
}
.cd-breadcrumb a {
  color: var(--color-text-sub);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.cd-breadcrumb a:hover { border-color: var(--color-text-sub); }
.cd-breadcrumb li[aria-current="page"] { color: var(--clay-red); }

.cd-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cd-hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.cd-hero__case-num {
  padding: 4px 12px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.cd-hero__type {
  padding: 4px 10px;
  border: 1px solid var(--cd-line-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
}
.cd-hero__industry {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
}

.cd-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6.4vw, 36px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 24px;
}

.cd-hero__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin: 0 0 14px;
}
.cd-hero__sub {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 28px;
}

.cd-hero__detail {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--cd-line);
}
.cd-hero__detail-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cd-line);
}
.cd-hero__detail-row:last-child { border-bottom: 0; }
.cd-hero__detail dt {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-hero__detail dd {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* Visual */
.cd-hero__visual {
  position: relative;
}
.cd-hero__image-wrap {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-card);
  border: 1px solid var(--cd-line);
}
.cd-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cd-hero__image-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid var(--cd-line);
  border-radius: 3px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
.cd-hero__image-caption-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 3px rgba(176, 106, 91, 0.16);
}

/* SP端末重ね */
.cd-hero__phone {
  position: absolute;
  right: 16px;
  bottom: -32px;
  width: 110px;
  background: #2F2D2A;
  border-radius: 16px;
  padding: 5px;
  z-index: 2;
  box-shadow: 0 12px 28px rgba(47, 45, 42, 0.12);
}
.cd-hero__phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 7px;
  background: #1A1816;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.cd-hero__phone-screen {
  position: relative;
  aspect-ratio: 9 / 17;
  background: var(--color-base);
  border-radius: 12px;
  overflow: hidden;
}
.cd-hero__phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.memo--cd-hero {
  margin-top: 16px;
  padding: 18px 20px;
}
.memo--cd-hero .memo__text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
}
.memo--cd-hero .memo__sign {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  text-align: right;
}

/* ==========================================================================
   02. Overview
   ========================================================================== */
.cd-overview__head {
  margin-bottom: 32px;
}
.cd-overview__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.5;
  margin: 0;
}

.cd-overview__list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border-top: 1px solid var(--cd-line);
}
.cd-overview__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--cd-line);
}
.cd-overview__item-num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  margin: 0 0 10px;
}
.cd-overview__item-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.cd-overview__item-text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   03. Before
   ========================================================================== */
.cd-before__head {
  margin-bottom: 36px;
  max-width: 720px;
}
.cd-before__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6.4vw, 32px);
  line-height: 1.5;
  margin: 0 0 20px;
}
.cd-before__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

.cd-before__visual {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 32px;
}

.cd-before__caption,
.cd-after__caption,
.cd-sp-compare__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cd-before__caption-tag,
.cd-after__tag,
.cd-sp-compare__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-after__tag,
.cd-sp-compare__tag--after {
  background: var(--clay-red);
  border-color: var(--clay-red);
  color: var(--color-white);
}
.cd-before__caption-text,
.cd-after__caption-text,
.cd-sp-compare__caption-text {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-sub);
}

/* PC frame */
.cd-before__pc,
.cd-after__pc {
  margin: 0;
}
.cd-before__pc-frame,
.cd-after__pc-frame {
  background: #2F2D2A;
  border-radius: 8px;
  padding: 10px 10px 12px;
  box-shadow: 0 12px 36px rgba(47, 45, 42, 0.08);
}
.cd-before__pc-bar,
.cd-after__pc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 8px;
}
.cd-before__pc-bar span,
.cd-after__pc-bar span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.cd-before__pc-screen,
.cd-after__pc-screen {
  position: relative;
  height: 560px;
  background: var(--color-base);
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 45, 42, 0.2) transparent;
}
.cd-before__pc-screen::-webkit-scrollbar,
.cd-after__pc-screen::-webkit-scrollbar {
  width: 4px;
}
.cd-before__pc-screen::-webkit-scrollbar-thumb,
.cd-after__pc-screen::-webkit-scrollbar-thumb {
  background: rgba(47, 45, 42, 0.18);
  border-radius: 2px;
}
.cd-before__pc-screen img,
.cd-after__pc-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
}

/* SP frame */
.cd-before__sp,
.cd-after__sp {
  margin: 0;
}
.cd-before__sp-phone,
.cd-after__sp-phone {
  position: relative;
  width: 220px;
  margin: 0 auto;
  background: #2F2D2A;
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 16px 36px rgba(47, 45, 42, 0.10);
}
.cd-before__sp-notch,
.cd-after__sp-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 12px;
  background: #1A1816;
  border-radius: var(--radius-pill);
  z-index: 4;
}
.cd-before__sp-screen,
.cd-after__sp-screen {
  position: relative;
  height: 480px;
  background: var(--color-base);
  border-radius: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cd-before__sp-screen::-webkit-scrollbar,
.cd-after__sp-screen::-webkit-scrollbar {
  display: none;
}
.cd-before__sp-screen img,
.cd-after__sp-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
}

/* Before points */
.cd-before__points {
  border-top: 1px dashed var(--cd-line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.cd-before__points li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text);
}
.cd-before__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--clay-red);
}

/* ==========================================================================
   04. Problem
   ========================================================================== */
.cd-problem {
  padding: 72px 0;
}
.cd-problem__quote {
  margin: 0 0 32px;
  padding: 24px 26px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-left: 2px solid var(--clay-red);
  border-radius: 3px;
}
.cd-problem__quote p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 12px;
  color: var(--color-text);
}
.cd-problem__quote p + p {
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.95;
  color: var(--color-text-sub);
}
.cd-problem__quote footer {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}

.cd-problem__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 5.2vw, 28px);
  line-height: 1.55;
  margin: 0;
  color: var(--color-text);
}

/* ==========================================================================
   05. Analysis (赤入れ + Figma Memo)
   ========================================================================== */
.cd-analysis__head {
  margin-bottom: 28px;
  max-width: 720px;
}
.cd-analysis__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0;
}

.cd-analysis__board {
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 36px rgba(47, 45, 42, 0.05);
}

.cd-analysis__tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--cd-paper-2);
  border-bottom: 1px dashed var(--cd-line);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-text-sub);
  flex-wrap: wrap;
}
.cd-analysis__tag {
  padding: 4px 10px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  letter-spacing: 0.06em;
}
.cd-analysis__tag--mute {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-sub);
}
.cd-analysis__tag-spacer { flex: 1; }
.cd-analysis__tag-date   { color: var(--color-text-sub); }

.cd-analysis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 24px 20px;
}

/* Visual */
.cd-analysis__visual {
  padding: 16px 0;
  border-bottom: 1px dashed var(--cd-line);
}
.cd-analysis__visual-label {
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-analysis__phone {
  position: relative;
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
  background: #2F2D2A;
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 16px 36px rgba(47, 45, 42, 0.10);
}
.cd-analysis__phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 12px;
  background: #1A1816;
  border-radius: var(--radius-pill);
  z-index: 4;
}
.cd-analysis__phone-screen {
  position: relative;
  aspect-ratio: 9 / 17;
  background: var(--color-base);
  border-radius: 18px;
  overflow: hidden;
}
.cd-analysis__phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 赤入れピン 4箇所 */
.redpin--cd1 { top: 10%; left: 12%; }
.redpin--cd2 { top: 36%; right: 14%; }
.redpin--cd3 { top: 60%; left: 16%; }
.redpin--cd4 { top: 84%; right: 18%; }

/* Analysis List */
.cd-analysis__list {
  padding: 20px 0 4px;
  margin: 0;
}
.cd-analysis-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--cd-line);
}
.cd-analysis-item:last-child { border-bottom: 0; }
.cd-analysis-item__num {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--clay-red);
}
.cd-analysis-item__head {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.cd-analysis-item__text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}

/* Figma Memo */
.cd-figma-memo {
  background: var(--color-white);
  border-top: 1px solid var(--cd-line);
  font-family: var(--font-sans);
}
.cd-figma-memo__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--cd-paper-2);
  border-bottom: 1px solid var(--cd-line);
}
.cd-figma-memo__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.cd-figma-memo__dot--red    { background: #E0A89A; }
.cd-figma-memo__dot--yellow { background: #D9C896; }
.cd-figma-memo__dot--green  { background: #B8C8A6; }
.cd-figma-memo__title {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
.cd-figma-memo__list {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.cd-figma-memo__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: baseline;
}
.cd-figma-memo__num {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--clay-red);
}
.cd-figma-memo__list p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   06. Direction
   ========================================================================== */
.cd-direction__head {
  margin-bottom: 32px;
}
.cd-direction__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0;
}

.cd-direction__list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--cd-line);
  margin: 0;
}
.cd-direction-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--cd-line);
}
.cd-direction-item__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin: 0 0 12px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.cd-direction-item__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.cd-direction-item__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   07. Structure
   ========================================================================== */
.cd-structure__head {
  margin-bottom: 32px;
}
.cd-structure__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0;
}

.cd-structure__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}
.cd-structure__col {
  padding: 24px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
}
.cd-structure__col-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  margin: 0 0 16px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-structure__col-tag--after {
  background: var(--clay-red);
  border-color: var(--clay-red);
  color: var(--color-white);
}

.cd-structure__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  position: relative;
}
.cd-structure__steps li {
  padding: 10px 14px;
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 3px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text);
  position: relative;
}
.cd-structure__steps li + li::before {
  content: "↓";
  position: absolute;
  top: -16px;
  left: 16px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.cd-structure__steps-goal {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--color-white) !important;
  font-weight: 500;
}
.cd-structure__steps-goal--ng {
  background: transparent !important;
  border: 1px dashed var(--clay-red) !important;
  color: var(--clay-red) !important;
}

.cd-structure__col-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--cd-line);
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

.memo--cd-structure {
  padding: 20px 22px;
}

/* ==========================================================================
   Bridge (中間呼吸)
   ========================================================================== */
.cd-bridge {
  background: var(--color-base);
  padding: 56px 0;
  border-top: 1px solid var(--cd-line);
  border-bottom: 1px solid var(--cd-line);
}
.cd-bridge__inner {
  width: min(640px, calc(100% - 48px));
  margin: 0 auto;
  text-align: center;
}
.cd-bridge__text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ==========================================================================
   08. SP Compare
   ========================================================================== */
.cd-sp-compare__head {
  margin-bottom: 32px;
}
.cd-sp-compare__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0;
}

.cd-sp-compare__board {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 28px;
}

.cd-sp-compare__item { margin: 0; }
.cd-sp-compare__phone {
  position: relative;
  width: 220px;
  max-width: 100%;
  margin: 0 auto;
  background: #2F2D2A;
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 16px 36px rgba(47, 45, 42, 0.10);
}
.cd-sp-compare__phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 12px;
  background: #1A1816;
  border-radius: var(--radius-pill);
  z-index: 4;
}
.cd-sp-compare__phone-screen {
  position: relative;
  height: 480px;
  background: var(--color-base);
  border-radius: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cd-sp-compare__phone-screen::-webkit-scrollbar {
  display: none;
}
.cd-sp-compare__phone-screen img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: initial;
}

.memo--cd-sp {
  padding: 20px 22px;
  align-self: center;
  margin: 0;
}
.memo--cd-sp .memo__sign {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  text-align: right;
}

.cd-sp-compare__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding-top: 28px;
  border-top: 1px dashed var(--cd-line);
}
.cd-sp-compare__points li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
}
.cd-sp-compare__points-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--clay-red);
  margin-top: 1px;
}
.cd-sp-compare__points p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   09. CTA Analysis
   ========================================================================== */
.cd-cta-analysis__head {
  margin-bottom: 28px;
  max-width: 720px;
}
.cd-cta-analysis__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0 0 18px;
}
.cd-cta-analysis__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

/* PC Table */
.cd-cta-table {
  display: none;
  width: 100%;
  border-collapse: collapse;
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
  overflow: hidden;
}
.cd-cta-table th,
.cd-cta-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px dashed var(--cd-line);
  vertical-align: top;
}
.cd-cta-table thead th {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
  background: var(--color-white);
  font-weight: 500;
  border-bottom: 1px solid var(--cd-line);
}
.cd-cta-table tbody th {
  font-weight: 500;
  color: var(--color-text);
  width: 20%;
  background: var(--color-white);
  border-right: 1px solid var(--cd-line);
}
.cd-cta-table tbody tr:last-child th,
.cd-cta-table tbody tr:last-child td { border-bottom: 0; }
.cd-cta-table__before { color: var(--color-text-sub); position: relative; }
.cd-cta-table__before::before {
  content: "Before";
  display: block;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--clay-red);
  margin-bottom: 4px;
}
.cd-cta-table__after { color: var(--color-text); position: relative; }
.cd-cta-table__after::before {
  content: "After";
  display: block;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--sage);
  margin-bottom: 4px;
}
.cd-cta-table__intent { color: var(--color-text-sub); font-size: 12px; }

/* SP Cards */
.cd-cta-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.cd-cta-card {
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
  padding: 16px 18px;
}
.cd-cta-card__place {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--cd-line);
}
.cd-cta-card__before,
.cd-cta-card__after {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.65;
}
.cd-cta-card__before { color: var(--color-text-sub); }
.cd-cta-card__after  { color: var(--color-text); }
.cd-cta-card__before span,
.cd-cta-card__after span {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding-top: 3px;
}
.cd-cta-card__before span { color: var(--clay-red); }
.cd-cta-card__after span  { color: var(--sage); }
.cd-cta-card__intent {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--cd-line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--color-text-sub);
}

/* 中間 Inline CTA */
.cd-mid-cta {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--cd-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.cd-mid-cta__text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   10. Instagram Flow
   ========================================================================== */
.cd-ig-flow__head {
  margin-bottom: 28px;
  max-width: 720px;
}
.cd-ig-flow__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0 0 18px;
}
.cd-ig-flow__lead {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

.cd-ig-flow__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px;
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
  position: relative;
}
.cd-ig-flow__list::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--clay-red);
  opacity: 0.35;
  border-radius: 2px;
}
.cd-ig-flow__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--cd-line);
  border-radius: 3px;
}
.cd-ig-flow__num {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--clay-red);
}
.cd-ig-flow__title-s {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}
.cd-ig-flow__sub {
  grid-column: 2;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-sub);
}
.cd-ig-flow__arrow {
  font-size: 13px;
  color: var(--color-text-sub);
  text-align: center;
  line-height: 1;
}
.cd-ig-flow__step--goal {
  background: var(--sage);
  border-color: var(--sage);
}
.cd-ig-flow__step--goal .cd-ig-flow__num   { color: var(--color-white); opacity: 0.85; }
.cd-ig-flow__step--goal .cd-ig-flow__title-s { color: var(--color-white); }
.cd-ig-flow__step--goal .cd-ig-flow__sub   { color: rgba(255, 253, 249, 0.85); }

.cd-ig-flow__note {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub);
}

/* ==========================================================================
   11. After
   ========================================================================== */
.cd-after__head {
  margin-bottom: 36px;
}
.cd-after__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.5;
  margin: 0;
}

.cd-after__visual {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 32px;
}

.cd-after__points {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--cd-line);
}
.cd-after__points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cd-line);
  align-items: baseline;
}
.cd-after__points-num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.cd-after__points p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   12. Expected Change
   ========================================================================== */
.cd-expected {
  padding: 72px 0;
}
.cd-expected__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.5;
  margin: 0 0 28px;
}

.cd-expected__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--cd-line);
}
.cd-expected__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cd-line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text);
  align-items: baseline;
}
.cd-expected__icon {
  width: 14px; height: 14px;
  margin-top: 5px;
  border: 1px solid var(--sage);
  border-radius: 50%;
  position: relative;
}
.cd-expected__icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sage);
}
.cd-expected__list p { margin: 0; }

/* ==========================================================================
   13. Process
   ========================================================================== */
.cd-process__head {
  margin-bottom: 32px;
}
.cd-process__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.5;
  margin: 0;
}

.cd-process__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--cd-line);
}
.cd-process-step {
  padding: 22px 0;
  border-bottom: 1px solid var(--cd-line);
  position: relative;
}
.cd-process-step__num {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
  margin: 0 0 8px;
  display: inline-block;
}
.cd-process-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 8px;
}
.cd-process-step__text {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   14. Reflection
   ========================================================================== */
.cd-reflection {
  padding: 96px 0;
}
.cd-reflection__inner {
  max-width: 760px;
}
.cd-reflection__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.55;
  margin: 0 0 28px;
}
.cd-reflection__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}
.cd-reflection__body p {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  margin: 0;
}
.cd-reflection__quote {
  margin: 0;
  padding: 24px 26px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-left: 2px solid var(--clay-red);
  border-radius: 3px;
}
.cd-reflection__quote p {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.85;
  margin: 0 0 12px;
  color: var(--color-text);
}
.cd-reflection__quote footer {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}

/* ==========================================================================
   15. Type Note
   ========================================================================== */
.cd-type-note__inner {
  max-width: 760px;
  text-align: center;
}
.cd-type-note__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  background: var(--color-white);
  border: 1px solid var(--cd-line-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-type-note__text {
  font-size: 11px;
  line-height: 1.95;
  color: var(--color-text-sub);
  margin: 0;
}

/* ==========================================================================
   16. Final CTA
   ========================================================================== */
.cd-final {
  padding: 104px 0 88px;
}
.cd-final__inner {
  max-width: 720px;
  text-align: center;
}
.cd-final__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.5;
  margin: 20px 0 24px;
}
.cd-final__lead {
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 36px;
}
.cd-final__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.cd-final__actions .button { width: 100%; }
.cd-final__partner {
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0 0 36px;
}
.cd-final__partner a {
  color: var(--color-main);
  border-bottom: 1px solid var(--color-main);
  padding-bottom: 1px;
}
.cd-final__back {
  padding-top: 28px;
  border-top: 1px dashed var(--cd-line-2);
  margin: 0;
}

/* ==========================================================================
   ▼▼▼ Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .case-detail > section {
    padding: 112px 0;
  }
  .cd-hero { padding: 64px 0 112px; }
  .cd-problem { padding: 96px 0; }
  .cd-expected { padding: 96px 0; }
  .cd-reflection { padding: 120px 0; }
  .cd-type-note { padding: 40px 0 !important; }
  .cd-final { padding: 128px 0 104px; }

  .cd-overview__list {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--cd-line);
  }
  .cd-overview__item {
    padding: 28px 24px;
    border-right: 1px solid var(--cd-line);
    border-bottom: 0;
  }
  .cd-overview__item:last-child { border-right: 0; }
  .cd-overview__item:first-child { padding-left: 0; }
  .cd-overview__item:last-child  { padding-right: 0; }

  .cd-before__visual {
    flex-direction: row;
    align-items: flex-end;
    gap: 28px;
  }
  .cd-before__pc { flex: 1.4; }
  .cd-before__sp { flex: 0 0 240px; }

  .cd-direction__list {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--cd-line);
  }
  .cd-direction-item {
    padding: 28px 24px;
    border-right: 1px solid var(--cd-line);
    border-bottom: 0;
  }
  .cd-direction-item:first-child { padding-left: 0; }
  .cd-direction-item:last-child  { padding-left: 0; }

  .cd-structure__grid {
    flex-direction: row;
  }
  .cd-structure__col { flex: 1; }

  .cd-sp-compare__board {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .cd-sp-compare__item { flex: 1; }
  .memo--cd-sp { flex: 0 0 30%; }

  .cd-sp-compare__points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 32px;
  }

  /* CTA Table を表示、Cardを非表示 */
  .cd-cta-table { display: table; }
  .cd-cta-cards { display: none; }

  .cd-after__visual {
    flex-direction: row;
    align-items: flex-end;
    gap: 28px;
  }
  .cd-after__pc { flex: 1.4; }
  .cd-after__sp { flex: 0 0 240px; }

  .cd-after__points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .cd-expected__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .cd-process__list {
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid var(--cd-line);
  }
  .cd-process-step {
    padding: 24px 18px;
    border-right: 1px solid var(--cd-line);
    border-bottom: 0;
  }
  .cd-process-step:last-child { border-right: 0; }
  .cd-process-step:first-child { padding-left: 0; }
  .cd-process-step:last-child  { padding-right: 0; }

  .cd-final__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .cd-final__actions .button { width: auto; min-width: 240px; }
}

/* ==========================================================================
   ▼▼▼ PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .case-detail > section {
    padding: 140px 0;
  }
  .cd-hero { padding: 64px 0 140px; }
  .cd-problem { padding: 112px 0; }
  .cd-expected { padding: 112px 0; }
  .cd-reflection { padding: 144px 0; }
  .cd-final { padding: 152px 0 120px; }

  .cd-hero__inner,
  .cd-overview__inner,
  .cd-before__inner,
  .cd-problem__inner,
  .cd-analysis__inner,
  .cd-direction__inner,
  .cd-structure__inner,
  .cd-sp-compare__inner,
  .cd-cta-analysis__inner,
  .cd-ig-flow__inner,
  .cd-after__inner,
  .cd-expected__inner,
  .cd-process__inner,
  .cd-final__inner,
  .cd-type-note__inner,
  .cd-reflection__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }

  /* Hero : 2カラム */
  .cd-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .cd-hero__title { font-size: clamp(34px, 3.4vw, 42px); }
  .cd-hero__lead { font-size: 15px; }

  .cd-hero__phone {
    width: 130px;
    right: 24px;
    bottom: -40px;
  }

  /* Analysis : 画像 + リスト 横並び */
  .cd-analysis__grid {
    grid-template-columns: 0.85fr 1fr;
    gap: 36px;
    padding: 32px 32px;
  }
  .cd-analysis__visual {
    border-bottom: 0;
    border-right: 1px dashed var(--cd-line);
    padding: 0 32px 0 0;
  }
  .cd-analysis__list {
    padding: 0;
  }

  /* SP Compare board PC layout : 1fr 0.7fr 1fr */
  .cd-sp-compare__board {
    display: grid;
    grid-template-columns: 1fr 0.7fr 1fr;
  }

  /* Instagram Flow : 横一列 */
  .cd-ig-flow__list {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 24px 28px;
    column-gap: 6px;
    row-gap: 12px;
  }
  .cd-ig-flow__list::before { display: none; }
  .cd-ig-flow__step {
    flex: 1;
    min-width: 0;
    grid-template-columns: 28px 1fr;
    padding: 12px 14px;
  }
  .cd-ig-flow__arrow { padding: 0 4px; }
}

/* ==========================================================================
   ▼ Wide (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .cd-analysis__phone,
  .cd-sp-compare__phone,
  .cd-before__sp-phone,
  .cd-after__sp-phone { width: 240px; }
}

/* ==========================================================================
   Case Detail - Brush Up Layer
   "本当に考えながら改善している" を支える分析UI群
   ========================================================================== */

/* ==========================================================================
   01-B. Improvement Brief
   ========================================================================== */
.cd-brief {
  background: var(--color-base);
  padding: 64px 0 88px;
  position: relative;
  border-top: 1px solid var(--cd-line);
}
.cd-brief__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* Doc帯 */
.cd-brief__doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-text-sub);
}
.cd-brief__doc-tag {
  padding: 4px 10px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  letter-spacing: 0.16em;
}
.cd-brief__doc-id {
  padding: 4px 10px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}
.cd-brief__doc-spacer { flex: 1; min-width: 12px; }
.cd-brief__doc-date {
  color: var(--color-text-sub);
}

.cd-brief__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 5.2vw, 28px);
  line-height: 1.55;
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}

.cd-brief__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cd-brief__block {
  padding: 22px 22px 24px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
  position: relative;
}
.cd-brief__block-label {
  margin: 0 0 14px;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--clay-red);
}
.cd-brief__block-title {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 12px;
  padding-left: 18px;
}
.cd-brief__theme-pin {
  position: absolute;
  left: 0; top: 14px;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.14);
}
.cd-brief__block-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--cd-line);
  font-size: 12px;
  line-height: 1.85;
  color: var(--color-text-sub);
}

/* 離脱ポイント */
.cd-brief__exits {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.cd-brief__exits li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--cd-line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text);
}
.cd-brief__exits li:first-child { border-top: 0; padding-top: 0; }
.cd-brief__exit-num {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--clay-red);
  padding-top: 2px;
  grid-row: 1 / span 2;
}
.cd-brief__exit-place {
  font-weight: 500;
  color: var(--color-text);
}
.cd-brief__exit-note {
  font-size: 11px;
  color: var(--color-text-sub);
  line-height: 1.7;
}

/* 観察リスト */
.cd-brief__observe {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.cd-brief__observe li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--cd-line);
  align-items: center;
  font-size: 12px;
}
.cd-brief__observe li:first-child { border-top: 0; padding-top: 0; }
.cd-brief__obs-key {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
}
.cd-brief__obs-val {
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.cd-brief__obs-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(176, 106, 91, 0.12);
  position: relative;
}
.cd-brief__obs-flag::after {
  content: "!";
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 500;
  color: var(--clay-red);
}

/* 手書き矢印 + メモ */
.cd-brief__handwrite {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 253, 249, 0.5);
  border: 1px dashed var(--cd-line);
  border-radius: 3px;
}
.cd-brief__handwrite-arrow {
  flex-shrink: 0;
  display: inline-block;
  width: 60px; height: 28px;
  color: var(--clay-red);
}
.cd-brief__handwrite-arrow svg {
  width: 100%; height: 100%;
}
.cd-brief__handwrite-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.75;
  color: var(--color-text);
}

/* ==========================================================================
   画面内ワイヤー (PC/SP共通)
   ========================================================================== */
.cd-wire {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--cd-paper);
}

/* PC: Hero / メニュー / Footer */
.cd-wire--pc {
  padding: 18px 22px 18px;
  gap: 10px;
}
.cd-wire__hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  flex-shrink: 0;
}
.cd-wire__hero-image {
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
  aspect-ratio: 4 / 3;
}
.cd-wire__hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.cd-wire__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cd-wire__card {
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
  height: 38px;
}
.cd-wire__menu {
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.cd-wire__menu--sp {
  grid-template-columns: 1fr;
}
.cd-wire__footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.cd-wire__cta-ghost {
  padding: 5px 14px;
  background: transparent;
  border: 1px dashed var(--clay-red);
  color: var(--clay-red);
  border-radius: var(--radius-pill);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-family: var(--font-en);
}

/* バー要素 */
.cd-wire__bar {
  height: 6px;
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 1px;
  flex-shrink: 0;
}
.cd-wire__bar--xl { width: 80%; height: 12px; }
.cd-wire__bar--lg { width: 100%; height: 12px; }
.cd-wire__bar--md { width: 70%; height: 8px; }
.cd-wire__bar--sm { width: 40%; height: 6px; }
.cd-wire__bar--gap { background: transparent; border: 0; }

/* SP: ワイヤー */
.cd-wire--sp,
.cd-wire--analysis {
  padding: 30px 12px 14px;
  gap: 7px;
}
.cd-wire__sp-hero {
  position: relative;
  height: 60px;
  background: var(--cd-paper-2);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-wire__sp-hero-text {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.cd-wire__sp-cta {
  margin-top: auto;
  background: var(--color-main);
  color: var(--color-base);
  border-radius: 2px;
  text-align: center;
  padding: 6px 0;
  font-size: 9px;
  letter-spacing: 0.06em;
}
.cd-wire__sp-cta--bottom {
  background: var(--clay-red);
}

/* ==========================================================================
   赤入れ (PC全体に貼る注釈付きピン)
   ========================================================================== */
.redmark {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.redmark__pin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.redmark__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.18);
}
.redmark__num {
  position: relative;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-white);
}
.redmark__label {
  padding: 3px 8px;
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid var(--cd-line);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap;
}

/* PC frame上の赤入れ配置 */
.redmark--pc1 { top: 8%;  left: 4%; }
.redmark--pc2 { top: 50%; left: 26%; }
.redmark--pc3 { bottom: 8%; right: 4%; }
.redmark--pc3 { flex-direction: row-reverse; }

/* SP離脱ゾーン */
.cd-exit-zone {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
}
.cd-exit-zone__line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--clay-red) 0 4px,
    transparent 4px 8px
  );
}
.cd-exit-zone__tag {
  padding: 2px 6px;
  background: rgba(176, 106, 91, 0.12);
  color: var(--clay-red);
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.cd-exit-zone--sp1 {
  top: 30%; right: 0;
  transform: translateX(100%);
}
.cd-exit-zone--sp2 {
  top: 70%; right: 0;
  transform: translateX(100%);
}

/* スクロール量メモ */
.cd-scroll-meta {
  position: absolute;
  top: 30px; right: -6px;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(100%);
  pointer-events: none;
  z-index: 5;
}
.cd-scroll-meta__line {
  width: 1px;
  height: 140px;
  background: repeating-linear-gradient(
    to bottom,
    var(--clay-red) 0 4px,
    transparent 4px 8px
  );
}
.cd-scroll-meta__text {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--clay-red);
  white-space: nowrap;
}

/* ==========================================================================
   Before補足要素
   ========================================================================== */
.cd-before__caption-mark {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  font-style: italic;
}
.cd-before__pc-url {
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 253, 249, 0.6);
  border-radius: 2px;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.cd-before__pc-arrow {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--clay-red);
}
.cd-before__sp-meta {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Analysis拡張: Improvement Arrows
   ========================================================================== */
.cd-arrow-board {
  margin-top: 24px;
  padding: 22px 24px 24px;
  background: var(--cd-paper-2);
  border-top: 1px dashed var(--cd-line);
}
.cd-arrow-board__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.cd-arrow-board__label-mark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay-red);
  box-shadow: 0 0 0 4px rgba(176, 106, 91, 0.12);
}
.cd-arrow-board__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.cd-arrow-board__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px dashed var(--cd-line);
}
.cd-arrow-board__item:first-child { border-top: 0; padding-top: 0; }
.cd-arrow-board__from {
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--clay-red);
  border-radius: 2px;
  font-size: 12px;
  color: var(--clay-red);
  align-self: start;
}
.cd-arrow-board__arrow {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-text-sub);
  padding-left: 4px;
}
.cd-arrow-board__to {
  padding: 6px 10px;
  background: var(--sage);
  color: var(--color-white);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  align-self: start;
}
.cd-arrow-board__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--cd-line);
  font-size: 11px;
  line-height: 1.7;
  color: var(--color-text-sub);
}

/* ==========================================================================
   感情曲線図 (CTA Analysis冒頭)
   ========================================================================== */
.cd-emotion {
  margin: 0 0 36px;
  padding: 24px 24px 22px;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: 4px;
}
.cd-emotion__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.cd-emotion__caption-label {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--clay-red);
}
.cd-emotion__caption-sub {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

.cd-emotion__chart {
  position: relative;
  padding: 12px 0 56px;
}
.cd-emotion__svg {
  width: 100%;
  height: 110px;
  display: block;
}
.cd-emotion__labels {
  position: absolute;
  inset: 12px 0 0;
  margin: 0;
  pointer-events: none;
}
.cd-emotion__label {
  position: absolute;
  left: var(--x);
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cd-emotion__label-tag {
  padding: 2px 8px;
  background: var(--clay-red);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.14em;
}
.cd-emotion__label-tag--mute {
  background: transparent;
  border: 1px solid var(--cd-line-2);
  color: var(--color-text-sub);
}
.cd-emotion__label-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: nowrap;
  max-width: 140px;
}
.cd-emotion__memo {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--cd-line);
  font-size: 11px;
  line-height: 1.8;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Tablet (>=768px)
   ========================================================================== */
@media (min-width: 768px) {
  .cd-brief { padding: 88px 0 112px; }
  .cd-brief__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .cd-brief__block--exits { grid-column: 1 / -1; }
  .cd-brief__exits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .cd-brief__exits li {
    border-top: 0;
    padding: 0;
    border-left: 1px dashed var(--cd-line);
    padding-left: 16px;
  }
  .cd-brief__exits li:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .cd-arrow-board__item {
    grid-template-columns: 1fr 32px 1fr;
    gap: 16px;
    align-items: center;
  }
  .cd-arrow-board__arrow {
    text-align: center;
    padding: 0;
  }

  .cd-emotion__label-text {
    font-size: 12px;
  }
}

/* ==========================================================================
   PC (>=1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .cd-brief { padding: 96px 0 128px; }
  .cd-brief__inner {
    width: min(1200px, calc(100% - var(--side-pad-pc) * 2));
  }
  .cd-brief__title { font-size: clamp(28px, 3vw, 34px); }
  .cd-brief__grid {
    grid-template-columns: 1.1fr 1.4fr 1fr;
    gap: 24px;
  }
  .cd-brief__block--exits { grid-column: auto; }
  .cd-brief__exits {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .cd-brief__exits li {
    border-left: 0;
    border-top: 1px dashed var(--cd-line);
    padding: 12px 0 12px 0;
  }
  .cd-brief__exits li:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .cd-brief__handwrite {
    margin-top: 32px;
    max-width: 560px;
  }

  /* 感情曲線図のSVG高さ拡大 */
  .cd-emotion__svg {
    height: 140px;
  }
  .cd-emotion__chart {
    padding: 16px 0 64px;
  }
}

/* ==========================================================================
   SP特別調整 (~767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* 赤入れラベルは長いものを省略 */
  .redmark--pc1 .redmark__label,
  .redmark--pc2 .redmark__label,
  .redmark--pc3 .redmark__label {
    display: none;
  }
  /* PCモック上の赤入れピンはピンのみ残す */

  /* 感情曲線ラベルが重ならないよう */
  .cd-emotion__label-text {
    font-size: 10px;
    line-height: 1.4;
    max-width: 80px;
  }
  .cd-emotion__svg { height: 90px; }
  .cd-emotion__chart { padding: 8px 0 60px; }

  /* SP離脱ゾーンタグはフレーム外見切れ防止 */
  .cd-exit-zone--sp1,
  .cd-exit-zone--sp2 {
    right: 8px;
    transform: none;
  }
  .cd-exit-zone__line { width: 16px; }

  /* スクロールメタはSPで非表示（密度過多のため） */
  .cd-scroll-meta { display: none; }

  /* 手書き矢印のSVGをコンパクトに */
  .cd-brief__handwrite {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cd-brief__handwrite-arrow {
    width: 50px; height: 22px;
  }

  /* 改善方向(Arrow Board)の縦積み調整 */
  .cd-arrow-board {
    padding: 18px 18px 20px;
  }
  .cd-arrow-board__from,
  .cd-arrow-board__to {
    font-size: 11px;
  }
}

/* ==========================================================================
   Prelaunch Micro Adjustments
   公開前チェック用：構造を変えず、SP表示・横スクロール・CTAだけ微修正
   ========================================================================== */

html,
body {
  overflow-x: hidden;
}

.case-detail {
  overflow-x: hidden;
}

.case-detail *,
.case-detail *::before,
.case-detail *::after {
  min-width: 0;
}

.case-detail > section {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.case-detail img,
.case-detail svg {
  max-width: 100%;
}

.cd-hero__image-caption,
.cd-before__caption,
.cd-after__caption,
.cd-sp-compare__caption {
  max-width: 100%;
  flex-wrap: wrap;
}

.cd-before__pc-frame,
.cd-after__pc-frame,
.cd-analysis__board,
.cd-brief__block,
.cd-structure__col,
.cd-arrow-board,
.cd-emotion,
.cd-ig-flow__list {
  max-width: 100%;
}

/* CTAを詳細ページ内でも押しやすく統一 */
.case-detail .button {
  min-height: 52px;
}

/* スマホモック・PCモックのはみ出し防止 */
.cd-hero__phone,
.cd-before__sp-phone,
.cd-after__sp-phone,
.cd-analysis__phone,
.cd-sp-compare__phone {
  max-width: 100%;
}

/* Final CTAの視認性を少しだけ補強 */
.cd-final__actions {
  align-items: center;
}

.cd-final__actions .button--primary {
  background: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}

/* ==========================================================================
   SP Prelaunch Adjustments
   ========================================================================== */
@media (max-width: 767px) {
  .case-detail > section {
    padding: 64px 0;
  }

  .cd-hero {
    padding: 32px 0 64px;
  }

  .cd-type-note {
    padding: 28px 0 !important;
  }

  .cd-hero__inner,
  .cd-brief__inner,
  .cd-overview__inner,
  .cd-before__inner,
  .cd-problem__inner,
  .cd-analysis__inner,
  .cd-direction__inner,
  .cd-structure__inner,
  .cd-sp-compare__inner,
  .cd-cta-analysis__inner,
  .cd-ig-flow__inner,
  .cd-after__inner,
  .cd-expected__inner,
  .cd-process__inner,
  .cd-reflection__inner,
  .cd-type-note__inner,
  .cd-final__inner {
    width: min(100% - 40px, 1200px);
  }

  .cd-breadcrumb {
    margin-bottom: 24px;
  }

  .cd-breadcrumb ol {
    row-gap: 4px;
    font-size: 10px;
    line-height: 1.6;
  }

  .cd-hero__grid {
    gap: 32px;
  }

  .cd-hero__title {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.45;
    margin-bottom: 20px;
  }

  .cd-hero__lead,
  .cd-before__lead,
  .cd-cta-analysis__lead,
  .cd-ig-flow__lead {
    font-size: 14px;
    line-height: 2;
  }

  .cd-hero__sub {
    font-size: 13px;
    line-height: 1.95;
    margin-bottom: 24px;
  }

  .cd-hero__detail-row {
    grid-template-columns: 62px 1fr;
    gap: 10px;
  }

  .cd-hero__image-caption {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    white-space: normal;
    line-height: 1.5;
  }

  .cd-hero__phone {
    width: 92px;
    right: 10px;
    bottom: -22px;
  }

  .memo--cd-hero {
    margin-top: 28px;
  }

  .cd-section-label {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.14em;
  }

  .cd-brief__doc-row {
    gap: 8px;
  }

  .cd-brief__doc-date,
  .cd-analysis__tag-date,
  .cd-before__caption-mark,
  .cd-before__pc-arrow {
    display: none;
  }

  .cd-brief__title,
  .cd-overview__title,
  .cd-before__title,
  .cd-analysis__title,
  .cd-direction__title,
  .cd-structure__title,
  .cd-sp-compare__title,
  .cd-cta-analysis__title,
  .cd-ig-flow__title,
  .cd-after__title,
  .cd-expected__title,
  .cd-process__title,
  .cd-reflection__title,
  .cd-final__title {
    line-height: 1.5;
  }

  .cd-before__visual,
  .cd-sp-compare__board {
    gap: 24px;
  }

  .cd-before__sp-phone,
  .cd-after__sp-phone,
  .cd-analysis__phone,
  .cd-sp-compare__phone {
    width: min(220px, 100%);
  }

  .cd-before__pc-frame,
  .cd-after__pc-frame {
    padding: 8px;
    border-radius: 6px;
  }

  .cd-analysis__grid {
    padding: 20px 18px;
  }

  .cd-analysis-item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 16px 0;
  }

  .cd-figma-memo__list {
    gap: 8px;
  }

  .cd-figma-memo__list li {
    grid-template-columns: 36px 1fr;
  }

  .cd-arrow-board__item {
    gap: 8px;
  }

  .cd-arrow-board__note {
    font-size: 10px;
  }

  .cd-sp-compare__points li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cd-sp-compare__points-tag {
    justify-content: flex-start;
    width: fit-content;
  }

  .cd-cta-card {
    padding: 15px 16px;
  }

  .cd-cta-card__before,
  .cd-cta-card__after {
    grid-template-columns: 52px 1fr;
  }

  .cd-emotion {
    padding: 20px 18px 18px;
  }

  .cd-emotion__label-text {
    white-space: normal;
  }

  .cd-final__actions {
    width: 100%;
    align-items: stretch;
  }

  .cd-final__actions .button,
  .cd-mid-cta .button {
    width: 100%;
    min-height: 50px;
    padding: 0 22px;
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }

  .cd-final__partner {
    font-size: 12px;
    line-height: 1.8;
  }
}

/* ==========================================================================
   Tablet / PC Micro Adjustments
   ========================================================================== */
@media (min-width: 768px) {
  .cd-final__actions {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .cd-hero__grid {
    align-items: center;
  }

  .cd-final__actions .button {
    min-width: 220px;
  }
}


/* ==========================================================================
   Final consistency fixes — Case Detail SP safety
   ========================================================================== */
.case-detail img,
.case-detail figure,
.case-detail [class*="__pc"],
.case-detail [class*="__phone"],
.case-detail [class*="__board"] {
  max-width: 100%;
}

.cd-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 767px) {
  .case-detail > section {
    padding-left: 0;
    padding-right: 0;
  }

  .cd-final__actions .button,
  .cd-final__actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .cd-hero__phone {
    right: 12px;
    width: 96px;
  }
}

/* ==========================================================================
   PHASE 2 — Case Detail トーン改善
   ========================================================================== */
.cd-overview   { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-problem    { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-direction  { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-sp-compare { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-ig-flow    { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-expected   { background: var(--color-section-warm, var(--color-section-warm)); }
.cd-type-note  { background: var(--color-section-deep, var(--color-section-deep)); }
.cd-final      { background: var(--color-section-deep, var(--color-section-deep)); border-top: 1px solid var(--color-border, var(--color-border)); }
.cd-reflection { background: var(--color-card-warm, var(--color-card-warm)); }

/* Section label */
.cd-section-label {
  color: var(--color-accent, var(--color-accent));
  font-weight: 600;
  letter-spacing: 0.20em;
}
.cd-section-label__mark {
  background: var(--color-accent, var(--color-accent));
  box-shadow: 0 0 0 4px rgba(184,121,104,0.14);
}

/* Hero case num tag */
.cd-hero__case-num {
  background: var(--color-accent, var(--color-accent));
  color: var(--color-white, #FFFDF9);
}

/* CD Hero title size up */
.cd-hero__title {
  font-size: clamp(30px, 6.4vw, 40px);
  line-height: 1.45;
}

/* ==========================================================================
   PHASE 5 — case-detail.css 追加スタイル
   ========================================================================== */

/* cd-cw-notice はstyle.cssに定義済み */

/* Expected note-pre */
.cd-expected__note-pre {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-light, #A1948A);
}

/* Type Note section: より目立つように */
.cd-type-note {
  background: var(--color-section-deep, var(--color-section-deep)) !important;
}
.cd-type-note__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--color-accent-bg, #F6E7E1);
  border: 1px solid var(--color-accent-soft, #E8C9BE);
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent, var(--color-accent));
  font-weight: 600;
  margin-bottom: 12px;
}
.cd-type-note__text {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text-sub);
  max-width: 720px;
}


/* ==========================================================================
   PUENA MOCK SCROLL — Before / After / SP Compare
   縦長スクリーンショットをモック内でスクロール表示
   ========================================================================== */

/* SP表示時にPC mockの高さを調整 */
@media (max-width: 767px) {
  .cd-before__pc-screen,
  .cd-after__pc-screen {
    height: 360px;
  }
  .cd-before__sp-screen,
  .cd-after__sp-screen,
  .cd-sp-compare__phone-screen {
    height: 400px;
  }
}

@media (max-width: 480px) {
  .cd-before__pc-screen,
  .cd-after__pc-screen {
    height: 300px;
  }
  .cd-before__sp-screen,
  .cd-after__sp-screen,
  .cd-sp-compare__phone-screen {
    height: 360px;
  }
}

/* ==========================================================================
   After SP モック — 固定LINEバー
   ========================================================================== */

/* phoneフレーム：overflow hidden でボタンをフレーム内に収める */
.cd-sp-compare__phone.cd-sp-compare__phone--with-line,
.cd-after__sp-phone.cd-after__sp-phone--with-line {
  overflow: hidden;
}

/* 固定LINEバー本体 */
.cd-mock-line-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #879C79;
  color: #fff;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 0px 0px 18px 18px;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  box-shadow: 0 -4px 12px rgba(47, 45, 42, 0.12);
}

/* screenのpadding-bottomを確保（ボタンの後ろにコンテンツが隠れないよう） */
.cd-sp-compare__phone--with-line .cd-sp-compare__phone-screen img,
.cd-after__sp-phone--with-line .cd-after__sp-screen img {
  padding-bottom: 0;
}

.cd-sp-compare__phone--with-line .cd-sp-compare__phone-screen,
.cd-after__sp-phone--with-line .cd-after__sp-screen {
  padding-bottom: 56px;
}

.cd-structure__steps li {
  display: flex; flex-direction: column; gap: 2px; 
} 
.cd-structure__step-en {
  font-family: var(--font-en); 
  font-size: 13px; 
  letter-spacing: 0.06em; 
  color: var(--color-text-sub); 
}

.cd-structure__step-en.white {
  color: #f5f1ef;
}

.cd-structure__step-ja {
  font-size: 13px; 
  line-height: 1.5; 
  color: var(--color-text); 
}

.cd-structure__step-ja.white {
  color: #ffffff;
}

/* ===== WordPress theme footer helpers ===== */
.site-footer { padding: 48px 24px; background: #f8f3ee; color: #4b4039; }
.site-footer__inner { max-width: 1120px; margin: 0 auto; }
.site-footer__logo { display: inline-block; margin-bottom: 18px; font-family: var(--font-serif, serif); letter-spacing: .08em; }
.site-footer__nav-list { display: flex; flex-wrap: wrap; gap: 12px 22px; list-style: none; padding: 0; margin: 0 0 18px; }
.site-footer__nav-list a { color: inherit; text-decoration: none; }
.site-footer__copy { margin: 0; font-size: 12px; opacity: .72; }

/* ==========================================================================
   LIORNA — Header Margin-top Offset Fix
   原因：margin-top: 8px 追加により、ヘッダー実下端が 8+80=88px になったが
         sp-menu の top と scroll-padding-top が 80px のままでずれていた
   ========================================================================== */

/* ------------------------------------------------------------------
   1. CSS 変数でオフセット量を一元管理
      header-margin = 8px、header-h = 80px → 実下端 = 88px
   ------------------------------------------------------------------ */
:root {
  --header-margin: 8px;
  --header-bottom: calc(var(--header-h, 80px) + var(--header-margin));
}

/* ------------------------------------------------------------------
   2. ヘッダー自体の top を 0 → 余白なし・margin-top で浮かせる
      （既存ルール維持。ここでは sp-menu と scroll-padding を合わせる）
   ------------------------------------------------------------------ */

/* SPメニュー：ヘッダー実下端に合わせる */
.sp-menu {
  top: var(--header-bottom) !important;
}

/* SPメニューの高さも実下端から計算し直す */
.sp-menu__inner {
  max-height: calc(100dvh - var(--header-bottom) - 28px);
}

/* ------------------------------------------------------------------
   3. スクロールオフセット修正
   ------------------------------------------------------------------ */
html {
  scroll-padding-top: calc(var(--header-bottom) + 18px);
}

.main > section {
  scroll-margin-top: calc(var(--header-bottom) + 18px);
}

/* ------------------------------------------------------------------
   4. SPメニュー開閉時のオーバーレイ：body が透けて見える問題を解消
      オーバーレイを body の後ろではなくヘッダーの下・コンテンツの前に置く
      → sp-menu の background を不透明に近い値に変更し、blur を強める
   ------------------------------------------------------------------ */
.sp-menu {
  background: rgba(30, 25, 22, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------
   5. ヘッダー下端とメニューパネルの隙間を埋める
      sp-menu__inner の top を 0 にし、ヘッダー直下からパネルを開始
   ------------------------------------------------------------------ */
.sp-menu__inner {
  top: 0;
  border-radius: 0 0 18px 18px;
}

@media (max-width: 1023px) {
  body.is-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 850;
    background: rgba(47, 42, 38, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
  }

  .sp-menu {
    z-index: 900 !important;
    background: rgba(47, 42, 38, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body.is-menu-open .site-header {
    z-index: 1000 !important;
    background: rgba(255, 253, 249, 0.94);
    border-color: rgba(216, 201, 188, 0.76);
    box-shadow: 0 12px 32px rgba(30, 25, 22, 0.16);
  }

  .sp-menu__inner {
    background:
      linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(255, 253, 249, 0.93));
    border-color: rgba(216, 201, 188, 0.88);
    box-shadow: 0 24px 56px rgba(30, 25, 22, 0.18);
  }
}


/* ==========================================================================
   LIORNA — Navigation Label Refinement
   ヘッダーは日本語で迷わせず、フッターは英語＋日本語でブランド感を残す
   ========================================================================== */

/* ---------- Header Navigation ---------- */
@media (min-width: 1024px) {
  .site-header__nav-list {
    gap: 24px;
    align-items: center;
  }

  .site-header__nav-list a.site-header__nav-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px 7px;
    border-bottom: 0;
    color: var(--color-text);
    line-height: 1.2;
  }

  .site-header__nav-list a.site-header__nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 1px;
    background: rgba(90, 62, 53, 0.42);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  }

  .site-header__nav-list a.site-header__nav-link:hover,
  .site-header__nav-list a.site-header__nav-link:focus-visible {
    border-color: transparent;
  }

  .site-header__nav-list a.site-header__nav-link:hover::after,
  .site-header__nav-list a.site-header__nav-link:focus-visible::after {
    transform: translateX(-50%) scaleX(1);
    background: var(--color-main);
  }

  .site-header__nav-en {
    display: block;
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.13em;
    color: var(--color-text-sub);
    text-transform: uppercase;
  }

  .site-header__nav-ja {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text);
    white-space: nowrap;
  }

  .site-header__nav-link:hover .site-header__nav-en,
  .site-header__nav-link:focus-visible .site-header__nav-en {
    color: var(--clay-red);
  }
}

/* 1024px付近で「LIORNAについて」が窮屈な場合の保険 */
@media (min-width: 1024px) and (max-width: 1120px) {
  .site-header__nav-list {
    gap: 18px;
  }

  .site-header__nav-ja {
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .site-header__nav-en {
    font-size: 9px;
  }
}

/* ---------- SP Menu Navigation ---------- */
.sp-menu__list {
  border-top-color: rgba(216, 201, 188, 0.76);
}

.sp-menu__link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(216, 201, 188, 0.86);
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: 0;
}

.sp-menu__link::after {
  content: "→";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--color-text-light);
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.sp-menu__link:hover,
.sp-menu__link:focus-visible {
  color: var(--color-main);
  padding-left: 4px;
}

.sp-menu__link:hover::after,
.sp-menu__link:focus-visible::after {
  color: var(--clay-red);
  transform: translateX(3px);
}

.sp-menu__link-en {
  display: block;
  grid-column: 1;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--clay-red);
  text-transform: uppercase;
}

.sp-menu__link-ja {
  display: block;
  grid-column: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--color-text);
}

/* ---------- Footer Navigation ---------- */
.site-footer {
  padding: 56px 24px 40px;
  background:
    radial-gradient(720px 320px at 0% 0%, rgba(255, 253, 249, 0.62), transparent 60%),
    var(--color-base);
  color: var(--color-text);
  border-top: 1px solid rgba(91, 70, 56, 0.12);
}

.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.site-footer__brand {
  margin-bottom: 28px;
}

.site-footer__logo {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-serif, serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.site-footer__tagline {
  margin: 0;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-text-sub);
}

.site-footer__nav-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  border-top: 1px solid rgba(91, 70, 56, 0.14);
}

.site-footer__nav-list li {
  border-bottom: 1px dashed rgba(91, 70, 56, 0.14);
}

.site-footer__nav-list a.site-footer__nav-link {
  display: grid;
  grid-template-columns: minmax(120px, 0.44fr) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease), padding-left var(--dur-base) var(--ease);
}

.site-footer__nav-list a.site-footer__nav-link:hover,
.site-footer__nav-list a.site-footer__nav-link:focus-visible {
  color: var(--color-main);
  padding-left: 4px;
}

.site-footer__nav-en {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--clay-red);
}

.site-footer__nav-ja {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}

.site-footer__copy {
  margin: 0;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
  opacity: 0.78;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    column-gap: 72px;
    row-gap: 28px;
    align-items: start;
  }
}

@media (min-width: 768px) {
  .site-footer {
    padding: 64px var(--side-pad-pc) 44px;
  }

  .site-footer__brand {
    margin-bottom: 0;
  }

  .site-footer__nav {
    grid-column: 2;
  }

  .site-footer__nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
    border-top: 0;
  }

  .site-footer__copy {
    grid-column: 1 / span 2;
    padding-top: 24px;
    border-top: 1px solid rgba(91, 70, 56, 0.12);
  }
}

@media (min-width: 1024px) {
  .site-footer__nav-list {
    column-gap: 48px;
  }

  .site-footer__nav-list a.site-footer__nav-link {
    grid-template-columns: 128px 1fr;
  }
}

/* ==========================================================================
   LIORNA FIX 2026-07-06: iPad Hero background layout
   - 768px〜1023pxでPC背景スライダーとSP用画像ブロックが二重表示されていたため、
     iPadではPC同様に背景画像1枚のFVとして表示する。
   - デザイン要素は変更せず、表示制御・背景位置・文字幅のみ調整。
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--bg {
    min-height: 760px;
    background: #F3EDE4;
  }

  /* iPadでは背景画像をFV全体の1枚背景として扱う */
  .hero__slider--pc {
    display: block !important;
  }
  .hero__slider--sp {
    display: none !important;
  }
  .hero__slider {
    inset: -4% 0;
  }
  .hero__slide img {
    object-fit: cover;
    object-position: 76% center;
  }

  /* 下に出ていたSP/Tablet専用の巨大画像ブロックを非表示 */
  .hero__sp-visual {
    display: none !important;
  }

  /* PC寄りの左右レイアウトに戻す */
  .hero--bg .hero__inner {
    flex-direction: row;
    align-items: center;
    width: min(1280px, calc(100% - 64px));
    padding-top: calc(var(--header-h, 80px) + 64px);
    padding-bottom: 80px;
    min-height: 760px;
    gap: 0;
  }

  .hero--bg .hero__copy {
    flex: 0 0 58%;
    max-width: 58%;
    padding-right: 32px;
  }

  /* iPad幅で「ブランドとして選ばれる。」が途中で割れないよう調整 */
  .hero--bg .hero__title {
    font-size: clamp(38px, 4.8vw, 46px);
    line-height: 1.32;
    white-space: normal;
  }

  .hero--bg .hero__lead {
    font-size: 14px;
    line-height: 1.9;
    max-width: 500px;
  }

  .hero--bg .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .hero--bg .hero__actions .button {
    width: auto;
    min-width: 180px;
  }

  /* 右側の装飾・フローはFV内に収める */
  .hero__right {
    display: block !important;
    flex: 0 0 42%;
    max-width: 42%;
    min-height: 460px;
    position: relative;
  }

  .hero__deco {
    top: 8px;
    right: 0;
    width: clamp(130px, 15vw, 180px);
  }

  .hero__flow {
    right: 0;
    bottom: 24px;
    padding: 12px 14px;
    gap: 8px;
    border-radius: 18px;
  }

  .hero__flow-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .hero__flow-img {
    width: 18px;
    height: 18px;
  }

  .hero__flow-label {
    font-size: 11px;
  }

  .hero__flow-arrow {
    font-size: 13px;
    margin-bottom: 18px;
  }

  /* iPadでは下部情報をFV直下に自然に重ねる */
  .hero__bottom {
    width: min(1280px, calc(100% - 64px));
    padding: 0 0 32px 0;
  }

  .hero__bottom-curve {
    display: none !important;
  }

  .hero__bottom-inner {
    background: transparent;
    justify-content: flex-start;
    padding: 0;
  }

  .hero__scroll {
    background: transparent;
    padding-bottom: 24px;
  }
}


/* ==========================================================================
   LIORNA FIX 2026-07-06: First View Responsive Refinement
   目的：FVの構成は維持したまま、PC / iPad / SPで背景画像・コピー・装飾の
         役割が重ならないように整理する。
   変更範囲：Hero周辺の表示制御・余白・文字サイズ・背景位置のみ。
   ========================================================================== */

/* 共通：FV内の重なり順と余白を安定化 */
.hero--bg {
  isolation: isolate;
}

.hero--bg .hero__inner,
.hero__bottom {
  box-sizing: border-box;
}

.hero--bg .hero__title {
  text-wrap: balance;
}

.hero--bg .hero__lead {
  text-wrap: pretty;
}

/* PC：背景画像を主役にしつつ、コピーは左で読みやすく固定 */
@media (min-width: 1280px) {
  .hero--bg {
    min-height: min(920px, 100svh);
  }

  .hero--bg .hero__inner {
    width: min(1280px, calc(100% - 96px));
    min-height: calc(100svh - var(--header-h, 80px));
    max-height: none;
    padding-top: calc(var(--header-h, 80px) + 48px);
    padding-bottom: 88px;
  }

  .hero--bg .hero__copy {
    flex: 0 0 52%;
    max-width: 52%;
    padding-right: 56px;
  }

  .hero--bg .hero__title {
    font-size: clamp(54px, 4.6vw, 68px);
    line-height: 1.28;
    white-space: nowrap;
  }

  .hero--bg .hero__lead {
    max-width: 520px;
  }

  .hero__right {
    flex: 0 0 48%;
    max-width: 48%;
    min-height: 540px;
  }

  .hero__slide img {
    object-position: 74% center;
  }

  .hero__flow {
    right: 8px;
    bottom: 56px;
  }

  .hero__deco {
    right: 16px;
    top: -8px;
  }

  .hero__bottom {
    width: min(1280px, calc(100% - 96px));
    padding-left: 180px;
    padding-bottom: 34px;
  }
}

/* PC小さめ〜横向きタブレット：コピーの折れ・装飾のはみ出しを抑える */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--bg {
    min-height: min(840px, 100svh);
  }

  .hero__slider--pc { display: block !important; }
  .hero__slider--sp { display: none !important; }
  .hero__sp-visual { display: none !important; }

  .hero--bg .hero__inner {
    width: min(1180px, calc(100% - 72px));
    min-height: calc(100svh - var(--header-h, 80px));
    max-height: none;
    padding-top: calc(var(--header-h, 80px) + 44px);
    padding-bottom: 80px;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .hero--bg .hero__copy {
    flex: 0 0 56%;
    max-width: 56%;
    padding-right: 40px;
  }

  .hero--bg .hero__title {
    font-size: clamp(44px, 4.6vw, 56px);
    line-height: 1.30;
    white-space: nowrap;
  }

  .hero--bg .hero__lead {
    max-width: 500px;
    font-size: 14px;
    line-height: 1.95;
  }

  .hero--bg .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .hero--bg .hero__actions .button {
    width: auto;
    min-width: 180px;
  }

  .hero__right {
    display: block !important;
    flex: 0 0 44%;
    max-width: 44%;
    min-height: 500px;
  }

  .hero__slide img {
    object-position: 77% center;
  }

  .hero__deco {
    top: 0;
    right: 0;
    width: clamp(140px, 15vw, 190px);
  }

  .hero__flow {
    right: 0;
    bottom: 42px;
    padding: 12px 14px;
    gap: 8px;
    border-radius: 18px;
  }

  .hero__flow-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .hero__flow-img {
    width: 18px;
    height: 18px;
  }

  .hero__flow-label {
    font-size: 11px;
  }

  .hero__flow-arrow {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .hero__bottom {
    width: min(1180px, calc(100% - 72px));
    padding-left: 120px;
    padding-bottom: 30px;
  }
}

/* iPad縦幅：背景画像は1枚に統一し、下の巨大画像ブロックは出さない */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero--bg {
    min-height: min(820px, 100svh);
    background: #F3EDE4;
    overflow: clip;
  }

  .hero__slider--pc { display: block !important; }
  .hero__slider--sp { display: none !important; }
  .hero__slider { inset: -4% 0; }
  .hero__slide img {
    object-fit: cover;
    object-position: 78% center;
  }

  .hero__sp-visual {
    display: none !important;
  }

  .hero--bg::before {
    background: linear-gradient(
      100deg,
      rgba(250, 246, 241, 0.96) 0%,
      rgba(250, 246, 241, 0.90) 34%,
      rgba(250, 246, 241, 0.60) 56%,
      rgba(250, 246, 241, 0.18) 78%,
      rgba(250, 246, 241, 0.00) 100%
    );
  }
  .hero--bg::after { display: none; }

  .hero--bg .hero__inner {
    flex-direction: row;
    align-items: center;
    width: min(960px, calc(100% - 64px));
    min-height: calc(100svh - var(--header-h, 80px));
    max-height: none;
    padding-top: calc(var(--header-h, 80px) + 48px);
    padding-bottom: 76px;
    gap: 0;
  }

  .hero--bg .hero__copy {
    flex: 0 0 64%;
    max-width: 64%;
    padding-right: 30px;
  }

  .hero--bg .hero__label {
    margin-bottom: 18px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .hero--bg .hero__title {
    font-size: clamp(36px, 5.2vw, 44px);
    line-height: 1.32;
    white-space: nowrap;
    text-wrap: initial;
  }

  .hero--bg .hero__lead {
    margin-top: 18px;
    max-width: 470px;
    font-size: 14px;
    line-height: 1.9;
  }

  .hero--bg .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
  }

  .hero--bg .hero__actions .button {
    width: auto;
    min-width: 168px;
    height: 50px;
    padding: 0 24px;
  }

  .hero__text-link {
    font-size: 13px;
  }

  .hero--bg .hero__proof {
    margin-top: 20px;
    gap: 7px;
  }

  .hero--bg .hero__proof li {
    font-size: 11px;
    padding: 4px 10px;
  }

  .hero__right {
    display: block !important;
    flex: 0 0 36%;
    max-width: 36%;
    min-height: 430px;
    position: relative;
  }

  .hero__deco {
    top: 12px;
    right: 0;
    width: clamp(120px, 15vw, 170px);
  }

  .hero__flow {
    right: 0;
    bottom: 42px;
    padding: 10px 12px;
    gap: 7px;
    border-radius: 17px;
  }

  .hero__flow-icon-wrap {
    width: 36px;
    height: 36px;
  }

  .hero__flow-img {
    width: 16px;
    height: 16px;
  }

  .hero__flow-label {
    font-size: 10px;
  }

  .hero__flow-arrow {
    font-size: 12px;
    margin-bottom: 17px;
  }

  .hero__bottom {
    width: min(960px, calc(100% - 64px));
    padding: 0 0 28px 0;
    background: transparent;
    overflow: visible;
  }

  .hero__bottom-curve {
    display: none !important;
  }

  .hero__bottom-inner {
    background: transparent;
    justify-content: flex-start;
    padding: 0;
    gap: 28px;
    text-align: left;
  }

  .hero-bottom-info__divider {
    margin: 0;
  }

  .hero__scroll {
    display: none;
  }
}

/* SP：コピー上部 + 画像ブロック下部の構成に整理。背景スライダーの二重表示を止める */
@media (max-width: 767px) {
  .hero--bg {
    min-height: auto;
    background: #F3EDE4;
    overflow: hidden;
  }

  .hero__slider {
    display: none !important;
  }

  .hero--bg::before,
  .hero--bg::after {
    display: none;
  }

  .hero--bg .hero__inner {
    width: min(100% - 40px, 520px);
    padding-top: calc(var(--header-h, 80px) + 36px);
    padding-bottom: 28px;
    min-height: auto;
    max-height: none;
    align-items: flex-start;
  }

  .hero--bg .hero__copy {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .hero--bg .hero__label {
    margin-bottom: 16px;
    gap: 5px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
  }

  .hero--bg .hero__title {
    font-size: clamp(31px, 8.7vw, 39px);
    line-height: 1.34;
    white-space: normal;
    text-wrap: balance;
  }

  .hero--bg .hero__lead {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.88;
    max-width: 100%;
  }

  .hero--bg .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
  }

  .hero--bg .hero__actions .button {
    width: 100%;
    min-width: 0;
    height: 50px;
  }

  .hero__text-link {
    align-self: center;
    font-size: 13px;
  }

  .hero--bg .hero__proof {
    margin-top: 18px;
    gap: 7px;
    overflow: visible;
  }

  .hero--bg .hero__proof li {
    font-size: 10.5px;
    padding: 4px 9px;
  }

  .hero__right {
    display: none !important;
  }

  .hero__sp-visual {
    display: block !important;
    position: relative;
    width: 100%;
    margin-top: 8px;
  }

  .hero__sp-img-wrap {
    position: relative;
    width: 100%;
    height: clamp(430px, 118vw, 620px);
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background-image: url('../images/sp-hero-bg.png');
    background-size: cover;
    background-position: 74% bottom;
  }

  .hero__sp-deco {
    display: block;
    position: absolute;
    top: clamp(48px, 18vw, 112px);
    left: 18px;
    width: clamp(116px, 34vw, 158px);
    z-index: 3;
    pointer-events: none;
  }

  .hero__sp-flow--tablet {
    display: none !important;
  }

  .hero__sp-flow--sp {
    display: flex !important;
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 128px;
    padding: 13px 12px;
    border-radius: 18px;
    background: rgba(255, 253, 249, 0.94);
    border: 1px solid rgba(90, 62, 53, 0.12);
    box-shadow: 0 10px 28px rgba(47, 42, 38, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .hero__bottom {
    width: 100%;
    padding: 0;
    background: transparent;
    overflow: hidden;
  }

  .hero__bottom-curve {
    display: block !important;
    height: 76px;
    margin: -34px 0 0;
    background: #FFFDF9;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    position: relative;
    z-index: 1;
  }

  .hero__bottom-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #FFFDF9;
    padding: 12px 22px 10px;
    text-align: center;
  }

  .hero-bottom-info__divider {
    width: 1px;
    height: 28px;
    margin: 12px auto;
  }

  .hero__bottom-desc {
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
  }

  .hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 2;
    background: #FFFDF9;
    padding: 8px 0 26px;
  }
}

@media (max-width: 400px) {
  .hero--bg .hero__inner {
    width: calc(100% - 32px);
  }

  .hero--bg .hero__title {
    font-size: clamp(29px, 8.5vw, 34px);
  }

  .hero__sp-img-wrap {
    height: clamp(400px, 122vw, 540px);
    background-position: 72% bottom;
  }

  .hero__sp-flow--sp {
    right: 12px;
    bottom: 14px;
    width: 118px;
  }
}


/* ==========================================================================
   LIORNA FIX 2026-07-06: Footer layout / navigation refinement
   - フッターナビの改行を抑え、PCでは横並び中心に整理
   - タブレット/スマホでは読みやすさを保ちながらコンパクト化
   - HTML構造は維持し、既存デザインのトーンを変えない
   ========================================================================== */
.site-footer {
  padding: clamp(44px, 5vw, 72px) var(--side-pad-sp) 34px;
  background:
    radial-gradient(760px 340px at 0% 0%, rgba(255, 253, 249, 0.68), transparent 62%),
    linear-gradient(180deg, rgba(248, 244, 238, 0.98), rgba(243, 235, 226, 0.92));
}

.site-footer__inner {
  width: min(1120px, 100%);
  max-width: 1120px;
  margin: 0 auto;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 24px;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  margin: 0;
  line-height: 1;
}

.site-footer__logo-img {
  width: auto;
  height: 30px;
  max-width: 144px;
}

.site-footer__tagline {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.site-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0 0 26px;
  border-top: 1px solid rgba(91, 70, 56, 0.14);
}

.site-footer__nav-list li {
  min-width: 0;
  border-bottom: 1px dashed rgba(91, 70, 56, 0.14);
}

.site-footer__nav-list a.site-footer__nav-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 11px 0;
  line-height: 1.25;
  white-space: nowrap;
}

.site-footer__nav-en,
.site-footer__nav-ja {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer__nav-en {
  font-size: 12px;
  letter-spacing: 0.11em;
}

.site-footer__nav-ja {
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.site-footer__copy {
  padding-top: 20px;
  border-top: 1px solid rgba(91, 70, 56, 0.12);
}

@media (min-width: 768px) {
  .site-footer {
    padding: 56px var(--side-pad-pc) 38px;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.2fr);
    column-gap: 44px;
    row-gap: 28px;
    align-items: start;
  }

  .site-footer__brand {
    grid-column: 1;
    margin: 0;
  }

  .site-footer__nav {
    grid-column: 2;
  }

  .site-footer__nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 0;
    margin-bottom: 0;
    border-top: 0;
  }

  .site-footer__nav-list a.site-footer__nav-link {
    min-height: 56px;
    padding: 10px 0;
  }

  .site-footer__copy {
    grid-column: 1 / -1;
    padding-top: 22px;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding: 62px var(--side-pad-pc) 40px;
  }

  .site-footer__inner {
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 2.28fr);
    column-gap: 64px;
  }

  .site-footer__logo-img {
    height: 32px;
    max-width: 156px;
  }

  .site-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 18px 28px;
  }

  .site-footer__nav-list li {
    border-bottom: 0;
  }

  .site-footer__nav-list a.site-footer__nav-link {
    min-height: auto;
    padding: 2px 0 8px;
  }

  .site-footer__nav-list a.site-footer__nav-link:hover,
  .site-footer__nav-list a.site-footer__nav-link:focus-visible {
    padding-left: 0;
    transform: translateY(-1px);
  }

  .site-footer__nav-en {
    font-size: 12px;
  }

  .site-footer__nav-ja {
    font-size: 11px;
  }

  .site-footer__copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
  }
}

@media (min-width: 1180px) {
  .site-footer__inner {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .site-footer__nav-list {
    gap: 18px 32px;
  }
}

@media (max-width: 430px) {
  .site-footer__nav-list {
    column-gap: 14px;
  }

  .site-footer__nav-list a.site-footer__nav-link {
    min-height: 54px;
  }

  .site-footer__nav-en {
    font-size: 11px;
    letter-spacing: 0.09em;
  }

  .site-footer__nav-ja {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
}


/* ==========================================================================
   Price Compare Responsive Refinement
   iPad / SP: price-compare__th の改行を抑え、比較表の列幅を確保
   ========================================================================== */

/* 見出し・価格は途中で折り返さない */
.price-compare__th,
.price-compare__th-plan,
.price-compare__th-price {
  white-space: nowrap;
}

/* プラン列の最小幅を確保 */
.price-compare__th:not(.price-compare__th--feature) {
  min-width: 124px;
}

/* iPad / Tablet：比較表を少し広げて見出し改行を抑える */
@media (min-width: 768px) and (max-width: 1023px) {
  .price-compare__inner {
    width: min(100% - 40px, 960px);
  }

  .price-compare__table {
    min-width: 760px;
  }

  .price-compare__th {
    padding: 16px 16px;
  }

  .price-compare__th--feature {
    width: 30%;
    min-width: 150px;
  }

  .price-compare__th-plan {
    font-size: 12px;
    letter-spacing: 0.10em;
  }

  .price-compare__th-price {
    font-size: 15px;
    letter-spacing: 0.03em;
  }
}

/* SP：横スクロール前提で列幅を確保し、見出しの改行を抑える */
@media (max-width: 767px) {
  .price-compare__inner {
    width: min(100% - 32px, 100%);
  }

  .price-compare__table {
    min-width: 690px;
  }

  .price-compare__th {
    padding: 14px 12px;
  }

  .price-compare__th--feature {
    width: 28%;
    min-width: 132px;
  }

  .price-compare__th:not(.price-compare__th--feature) {
    min-width: 118px;
  }

  .price-compare__th-plan {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .price-compare__th-price {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
}