/* 売らないセールス交渉術（uranai-sales.com）。直すのはこのファイルだけ。直したら全HTMLの style.css?v= を1つ上げる
   決まりの正本＝Vault 売らないセールス_阿部さん新規事業/17_デザインの方向性_2026-10-04.md（2026-10-04 作り直し）
   世界観「押さずに、見極める」。色は1色1役割。箱は「型の箱」と「出口」の2種類だけ。左に色の帯をつけない。 */
@layer reset, base, layout, components, pages;

:root {
  /* 色：1色1役割 */
  --bg: #FBF6EF;        /* 生成り＝紙 */
  --ink: #2B2420;       /* 墨＝文字・見出し・ボタン・出口 */
  --ink-sub: #6B5F55;   /* 墨の薄め＝注記・補足 */
  --red: #D23B29;       /* ブランドの赤＝ロゴの「ない」と「売らない」側の1語だけ */
  --rule: #D9CBB8;      /* 罫の色＝線だけ */
  --field: #FFFFFF;     /* 入力欄の中だけ */
  --dog: #C9372C; --dog-t: #FBECE9;   /* 犬の赤＝型の場所だけ */
  --cat: #2C5A8C; --cat-t: #E9F0F7;   /* 猫の青＝型の場所だけ。「猫型」の文字はどこでも青 */
  --font: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  /* 文字：明朝1書体・6段（比率1.25） */
  --fs-display: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);     /* 30→48 */
  --fs-h2: clamp(1.5625rem, 1.3rem + 1.05vw, 1.9375rem);   /* 25→31 */
  --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.5625rem);      /* 20→25 */
  --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);     /* 18→20 */
  --fs-body: 1rem;                                          /* 16 */
  --fs-note: .8125rem;                                      /* 13 */
  /* 余白：8の倍数・4段 */
  --s-sec: clamp(5rem, 3.6rem + 5.6vw, 8rem);      /* 80→128 */
  --s-block: clamp(2.5rem, 2.3rem + .8vw, 3rem);   /* 40→48 */
  --s-head: clamp(1rem, .8rem + .8vw, 1.5rem);     /* 16→24 */
  --s-p: 1rem;                                      /* 16 */
  --wide: 1080px;
  --read: 640px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--font); font-size: var(--fs-body); font-weight: 400;
    letter-spacing: .02em; line-height: 1.8;
    overflow-wrap: break-word; accent-color: var(--ink);
  }
  a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: .3em; transition: text-decoration-color .2s ease, color .2s ease; }
  a:hover { text-decoration-color: var(--red); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: 0; text-wrap: balance; word-break: auto-phrase; }
  h1 { font-size: var(--fs-display); line-height: 1.35; }
  h2 { font-size: var(--fs-h2); line-height: 1.45; }
  h3 { font-size: var(--fs-h3); line-height: 1.5; }
  h4 { font-size: var(--fs-lead); line-height: 1.7; }
  p { text-wrap: pretty; }
  strong { font-weight: 700; }
  li { list-style: none; }
  small { font-size: var(--fs-note); }
  /* 色の約束を、どのページでも同じ名前で使う */
  .u-red { color: var(--red); }
  .t-dog { color: var(--dog); font-style: normal; }
  .t-cat { color: var(--cat); font-style: normal; }
  .note { color: var(--ink-sub); font-size: var(--fs-note); line-height: 1.6; }
  .lead { font-size: var(--fs-lead); line-height: 1.7; }
  .num { font-family: var(--font); font-variant-numeric: lining-nums; }
  .sp-only { display: none; }
  @media (max-width: 767px) { .sp-only { display: inline; } .pc-only { display: none; } }
}

/* ============ 骨組み ============ */
@layer layout {
  .wrap { margin-inline: auto; max-inline-size: calc(var(--wide) + var(--gutter) * 2); padding-inline: var(--gutter); }
  .wrap--read { max-inline-size: calc(var(--read) + var(--gutter) * 2); }
  .site-main { padding-block-end: var(--s-sec); }
  .site-main:has(> .exit:last-child) { padding-block-end: 0; }

  /* 節：上に余白、見出しの上に1本の罫。地の色は変えない */
  .sec { padding-block-start: var(--s-sec); }
  .sec__grid { padding-block-start: var(--s-block); display: grid; gap: var(--s-head) 0; position: relative; }
  .sec__grid::before { background: var(--rule); block-size: 1px; content: ""; inset: 0 var(--gutter) auto; position: absolute; }
  .sec--first .sec__grid, .sec__grid--plain { padding-block-start: 0; }
  .sec--first .sec__grid::before, .sec__grid--plain::before { display: none; }
  .sec__head > * + * { margin-block-start: var(--s-head); }
  .sec__body { max-inline-size: var(--read); }
  .sec__body > * + * { margin-block-start: var(--s-p); }
  .sec__body > * + :is(h3, .rows, .compare, .flow, .faq, .quote, .bignum, .typebox, .feature, figure, .tlink, .btn-row) { margin-block-start: var(--s-block); }
  .sec__body > :is(h3) + * { margin-block-start: var(--s-head); }
  .sec__wide { grid-column: 1 / -1; }
  @media (min-width: 900px) {
    /* PC：見出しは左の4列、本文は右の7列 */
    .sec__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
    .sec__head { grid-column: 1 / 5; }
    .sec__body { grid-column: 6 / 13; }
    .sec__head h2 { position: sticky; inset-block-start: 7rem; }
  }
  /* 中央にまとめる節（型の箱など） */
  .sec--center .sec__grid { justify-items: center; text-align: center; }
  .sec--center .sec__grid > * { grid-column: 1 / -1; }
}

@layer components {
  /* ---------- ヘッダー ---------- */
  .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); position: sticky; inset-block-start: 0; z-index: 40; border-block-end: 1px solid transparent; }
  .site-header__inner { align-items: center; display: flex; gap: 1.5rem; justify-content: space-between; margin-inline: auto; max-inline-size: calc(var(--wide) + var(--gutter) * 2); padding: 1rem var(--gutter); }
  .site-logo { line-height: 0; }
  .site-logo a { display: inline-block; }
  .site-logo__img { inline-size: clamp(104px, 13vw, 152px); }
  .site-nav__list { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: flex-end; }
  .site-nav a { font-size: .9375rem; line-height: 1.5; text-decoration: none; }
  .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--red); }
  .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ink); }
  .site-nav__cta { display: none; }
  .nav-toggle { display: none; }
  .header-cta { align-items: center; background: var(--ink); border-radius: 999px; color: var(--bg); display: inline-flex; flex: none; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; min-block-size: 44px; padding-inline: 1.25rem; text-decoration: none; }
  .header-cta:hover { background: #000; color: var(--bg); }
  @media (min-width: 900px) {
    .site-nav { margin-inline-start: auto; }
    .header-cta { order: 3; }
    .site-nav__list li:nth-last-child(-n+2) { display: none; } /* 診断・相談はヘッダーのボタンとフッターで受ける */
  }
  @media (max-width: 899px) {
    .site-header__inner { gap: .5rem; padding-block: .625rem; }
    .header-cta { font-size: .8125rem; margin-inline-start: auto; padding-inline: 1rem; }
    .nav-toggle { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; justify-content: center; min-block-size: 44px; min-inline-size: 44px; padding: 0; }
    .nav-toggle__bar { background: var(--ink); block-size: 2px; display: block; inline-size: 22px; margin-inline: auto; transition: transform .25s ease, opacity .2s ease; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .site-nav { background: var(--bg); border-block: 1px solid var(--rule); inset-block-start: 100%; inset-inline: 0; opacity: 0; padding: .5rem var(--gutter) 1.5rem; position: absolute; transition: opacity .2s ease, visibility 0s linear .2s; visibility: hidden; }
    .site-nav.is-open { opacity: 1; transition: opacity .2s ease, visibility 0s; visibility: visible; }
    .site-nav__list { display: block; }
    .site-nav__list li { border-block-end: 1px solid var(--rule); }
    .site-nav a { align-items: center; display: flex; font-size: 1rem; min-block-size: 52px; }
  }

  /* ---------- パンくず ---------- */
  .crumb { margin-inline: auto; max-inline-size: calc(var(--wide) + var(--gutter) * 2); padding: .5rem var(--gutter) 0; }
  .crumb ol { color: var(--ink-sub); display: flex; flex-wrap: wrap; font-size: var(--fs-note); gap: 0 .5em; line-height: 1.8; }
  .crumb li + li::before { content: "／"; margin-inline-end: .5em; }
  .crumb a { color: var(--ink-sub); }

  /* ---------- ボタン（墨の丸ボタン1種類） ---------- */
  .btn { align-items: center; background: var(--ink); border: 0; border-radius: 999px; box-shadow: 0 4px 0 rgba(43,36,32,.22); color: var(--bg); cursor: pointer; display: inline-flex; font-size: 1.125rem; font-weight: 700; gap: .75rem; justify-content: center; letter-spacing: .08em; line-height: 1.3; min-block-size: 56px; padding: .875rem 2rem; text-align: center; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
  .btn::after { content: "›"; font-size: 1.3em; line-height: 1; }
  .btn:hover { background: #000; color: var(--bg); transform: translateY(-1px); }
  .btn:active { box-shadow: 0 1px 0 rgba(43,36,32,.22); transform: translateY(3px); }
  .btn--paper { background: var(--bg); box-shadow: 0 4px 0 rgba(0,0,0,.35); color: var(--ink); }
  .btn--paper:hover { background: #fff; color: var(--ink); }
  .btn--block { inline-size: 100%; }
  .btn-row { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
  .tlink { display: inline-block; font-weight: 700; text-decoration-color: var(--ink); }
  .tlink::after { content: " ›"; }
  @media (max-width: 599px) { .btn-row .btn { inline-size: 100%; } }

  /* ---------- 見出しの補助 ---------- */
  .kicker { color: var(--ink-sub); font-size: var(--fs-note); letter-spacing: .12em; }

  /* ---------- FV：左に一言、右にあべさんの顔（4:5） ---------- */
  .fv { padding-block: clamp(1.5rem, 4vw, 4rem) 0; }
  .fv__grid { align-items: center; display: grid; gap: var(--s-block); }
  .fv__copy > * + * { margin-block-start: var(--s-head); }
  .fv__copy > .btn-row { margin-block-start: var(--s-block); }
  .fv__title { font-size: var(--fs-display); line-height: 1.35; }
  .fv__photo { aspect-ratio: 4 / 5; max-block-size: 640px; overflow: hidden; }
  .fv__photo img { block-size: 100%; inline-size: 100%; object-fit: cover; }
  .fv__terms { border-block-start: 1px solid var(--rule); color: var(--ink-sub); font-size: .9375rem; padding-block-start: var(--s-p); }
  @media (min-width: 900px) {
    .fv__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
    .fv__copy { grid-column: 1 / 8; }
    .fv__photo { grid-column: 8 / 13; }
  }
  @media (max-width: 899px) {
    .fv__photo { aspect-ratio: 4 / 3; order: -1; }
  }

  /* ---------- 型の印（犬・猫の丸） ---------- */
  .mark { align-items: center; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); color: #fff; display: inline-flex; flex: none; font-size: 1.375rem; font-style: normal; font-weight: 700; block-size: 3.25rem; inline-size: 3.25rem; justify-content: center; line-height: 1; }
  .mark--dog { background: var(--dog); }
  .mark--cat { background: var(--cat); }
  .mark--s { block-size: 2.25rem; font-size: 1rem; inline-size: 2.25rem; }
  .marks { display: flex; gap: .625rem; justify-content: center; }

  /* ---------- 型の箱（STOCK-02）：1ページ1回・型の話の直後だけ ---------- */
  .typebox { background: linear-gradient(110deg, var(--dog-t) 0 50%, var(--cat-t) 50% 100%); border-radius: 24px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px rgba(43,36,32,.1); inline-size: 100%; max-inline-size: 720px; margin-inline: auto; padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
  .typebox__lbl { color: var(--ink-sub); display: block; font-size: var(--fs-note); font-weight: 700; letter-spacing: .14em; margin-block-start: 1rem; }
  .typebox__ttl { font-size: var(--fs-h2); font-weight: 700; line-height: 1.45; margin-block-start: .5rem; }
  .typebox__txt { line-height: 1.8; margin: 1rem auto 1.5rem; max-inline-size: 30em; }
  .typebox__note { color: var(--ink-sub); display: block; font-size: var(--fs-note); margin-block-start: 1.25rem; }
  @media (max-width: 599px) { .typebox { background: linear-gradient(160deg, var(--dog-t) 0 50%, var(--cat-t) 50% 100%); } .typebox .btn { inline-size: 100%; } }

  /* ---------- 型の比較：面の色はつけず、頭に印と型名、中身は罫線の行 ---------- */
  .compare { display: grid; gap: var(--s-block) 0; }
  .compare__col { min-inline-size: 0; }
  .compare__head { align-items: center; border-block-end: 1px solid var(--ink); display: flex; gap: .875rem; padding-block-end: 1rem; }
  .compare__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
  .compare__col--dog .compare__name { color: var(--dog); }
  .compare__col--cat .compare__name { color: var(--cat); }
  .compare__sub { color: var(--ink-sub); display: block; font-size: var(--fs-note); font-weight: 400; letter-spacing: .04em; margin-block-start: .25rem; }
  .compare li { border-block-end: 1px solid var(--rule); padding-block: .875rem; }
  @media (min-width: 600px) {
    .compare { gap: 0; grid-template-columns: 1fr 1fr; }
    .compare__col--dog { border-inline-end: 1px solid var(--rule); padding-inline-end: clamp(1rem, 3vw, 2rem); }
    .compare__col--cat { padding-inline-start: clamp(1rem, 3vw, 2rem); }
  }

  /* ---------- 列挙：罫線で区切った行・行頭に小さな墨の印 ---------- */
  .rows { border-block-start: 1px solid var(--rule); }
  .rows > li { border-block-end: 1px solid var(--rule); padding: 1rem 0 1rem 1.375rem; position: relative; }
  .rows > li::before { background: var(--ink); block-size: 6px; content: ""; inline-size: 6px; inset-block-start: calc(1rem + .9em - 3px); inset-inline-start: .25rem; position: absolute; transform: rotate(45deg); }
  .rows--lg > li { font-size: var(--fs-lead); line-height: 1.7; }
  .rows--lg > li::before { inset-block-start: calc(1rem + .85em - 3px); }
  .rows__ttl { display: block; font-weight: 700; }
  .rows__txt { color: var(--ink-sub); display: block; margin-block-start: .25rem; }
  .rows-group + .rows-group { margin-block-start: var(--s-block); }
  .rows-group > h3 { margin-block-end: var(--s-head); }

  /* ---------- 主役と脇 ---------- */
  .feature__main { border-block: 1px solid var(--ink); padding-block: var(--s-block); }
  .feature__main h3 { font-size: var(--fs-h3); }
  .feature__main > * + * { margin-block-start: var(--s-p); }
  .feature__side { margin-block-start: var(--s-head); }
  .feature__side > li { border-block-end: 1px solid var(--rule); display: grid; gap: .25rem 2rem; padding-block: 1.25rem; }
  .feature__side h3 { font-size: var(--fs-lead); }
  @media (min-width: 600px) { .feature__side > li { grid-template-columns: minmax(0, 15em) 1fr; } }

  /* ---------- あべさんの言葉：上下に細い罫・左に線を立てない ---------- */
  .quote { border-block: 1px solid var(--rule); font-size: var(--fs-lead); line-height: 1.8; padding-block: var(--s-head); }
  .quote cite { color: var(--ink-sub); display: block; font-size: .9375rem; font-style: normal; margin-block-start: .75rem; }
  .quote cite::before { content: "— "; }

  /* ---------- 数字：明朝の大きな数字＋説明（1ページに1つ） ---------- */
  .bignum__fig { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 .375rem; line-height: 1.1; }
  .bignum__fig strong { font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); font-weight: 700; letter-spacing: -.01em; }
  .bignum__fig span { font-size: var(--fs-h3); font-weight: 700; }
  .bignum__cap { color: var(--ink-sub); font-size: .9375rem; margin-block-start: .5rem; }

  /* ---------- 流れ：番号＋見出し＋1行 ---------- */
  .flow { border-block-start: 1px solid var(--rule); counter-reset: flow; }
  .flow > li { border-block-end: 1px solid var(--rule); counter-increment: flow; display: grid; gap: .25rem 1.25rem; grid-template-columns: 2.5rem 1fr; padding-block: 1.25rem; }
  .flow > li::before { content: counter(flow); font-size: var(--fs-h3); font-weight: 700; grid-row: span 2; line-height: 1.2; }
  .flow__ttl { font-size: var(--fs-lead); font-weight: 700; line-height: 1.5; }
  .flow__txt { color: var(--ink-sub); }

  /* ---------- FAQ：開閉式・罫線の行 ---------- */
  .faq { border-block-start: 1px solid var(--rule); }
  .faq details { border-block-end: 1px solid var(--rule); }
  .faq summary { cursor: pointer; display: flex; font-weight: 700; gap: 1rem; justify-content: space-between; list-style: none; padding-block: 1.125rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "＋"; flex: none; font-weight: 400; }
  .faq details[open] summary::after { content: "−"; }
  .faq details > p { color: var(--ink); padding-block-end: 1.25rem; }

  /* ---------- 写真：顔（4:5）と席（3:2）の2役。角は立てる ---------- */
  .photo { overflow: hidden; }
  .photo img { block-size: 100%; inline-size: 100%; object-fit: cover; }
  .photo--face { aspect-ratio: 4 / 5; }
  .photo--seat { aspect-ratio: 3 / 2; }
  .photo figcaption { color: var(--ink-sub); font-size: var(--fs-note); margin-block-start: .5rem; }

  /* ---------- 出口（CTA）：全幅の墨の面・ページの最後に1回 ---------- */
  .exit { background: var(--ink); color: var(--bg); margin-block-start: var(--s-sec); padding-block: var(--s-sec); text-align: center; }
  .exit + .exit { margin-block-start: 0; }
  .exit__face { block-size: 88px; border-radius: 50%; inline-size: 88px; margin-inline: auto; object-fit: cover; object-position: 50% 25%; }
  .exit h2 { color: var(--bg); margin-block-start: var(--s-head); }
  .exit p { margin-inline: auto; max-inline-size: 36em; }
  .exit > .wrap > * + * { margin-block-start: var(--s-head); }
  .exit .btn { margin-block-start: var(--s-block); }
  .exit__note { font-size: .9375rem; opacity: .8; }
  .exit a:not(.btn) { color: var(--bg); text-decoration-color: rgba(251,246,239,.4); }
  /* 途中に挟む出口（LPだけ） */
  .exit--mid { margin-block-start: var(--s-sec); padding-block: var(--s-block); }
  .exit--mid .btn { margin-block-start: var(--s-head); }

  /* ---------- フォーム ---------- */
  .form > * + * { margin-block-start: 1.5rem; }
  .form-field label { display: block; font-size: .9375rem; font-weight: 700; margin-block-end: .5rem; }
  .form-field input, .form-field textarea { background: var(--field); border: 1px solid var(--rule); border-radius: 0; color: var(--ink); font-size: 1rem; inline-size: 100%; line-height: 1.6; padding: .75rem .875rem; transition: border-color .15s ease; }
  .form-field input { min-block-size: 48px; }
  .form-field textarea { min-block-size: 176px; resize: vertical; }
  .form-field input:focus-visible, .form-field textarea:focus-visible { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0; }
  .form-field__hint { color: var(--ink-sub); display: block; font-size: var(--fs-note); font-weight: 400; margin-block-start: .25rem; }
  .form-agree { font-size: .9375rem; }
  .form-agree input { block-size: 1.125em; inline-size: 1.125em; margin-inline-end: .5em; vertical-align: -.15em; }
  .form-submit { margin-block-start: 2rem !important; }
  @media (max-width: 599px) { .form-submit .btn { inline-size: 100%; } }
  .hp { block-size: 1px; inline-size: 1px; left: -9999px; overflow: hidden; position: absolute; }

  /* ---------- 表（特商法・あべさんの経緯） ---------- */
  .deflist > div { border-block-end: 1px solid var(--rule); display: grid; gap: .25rem 2rem; padding-block: 1.125rem; }
  .deflist > div:first-child { border-block-start: 1px solid var(--rule); }
  .deflist dt { color: var(--ink-sub); font-size: .9375rem; font-weight: 700; }
  @media (min-width: 600px) { .deflist > div { grid-template-columns: 12em 1fr; } }

  /* ---------- フッター（生成りのまま・上に罫） ---------- */
  .site-footer { border-block-start: 1px solid var(--rule); color: var(--ink); padding-block: var(--s-block) 2rem; }
  .site-footer__grid { display: grid; gap: 2rem; margin-inline: auto; max-inline-size: calc(var(--wide) + var(--gutter) * 2); padding-inline: var(--gutter); }
  .site-footer__heading { font-size: var(--fs-lead); font-weight: 700; line-height: 1.5; }
  .site-footer__grid p + p { margin-block-start: .5rem; }
  .site-footer ul { margin-block-start: .75rem; }
  .site-footer li + li { margin-block-start: .375rem; }
  .site-footer li a { font-size: .9375rem; }
  .site-footer__copyright { color: var(--ink-sub); font-size: var(--fs-note); margin: var(--s-block) auto 0; max-inline-size: calc(var(--wide) + var(--gutter) * 2); padding-inline: var(--gutter); }
  .footer-legal a { font-size: var(--fs-note) !important; }
  @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .site-footer--lp { text-align: center; }
  .site-footer--lp .site-footer__copyright { margin-block-start: .75rem; }

  /* ---------- ブログ：一覧 ---------- */
  .post-list { border-block-start: 1px solid var(--rule); }
  .post-card { border-block-end: 1px solid var(--rule); display: grid; gap: 1rem 2rem; padding-block: var(--s-block); position: relative; }
  .post-card__thumb { aspect-ratio: 3 / 2; overflow: hidden; }
  .post-card__thumb img { block-size: 100%; inline-size: 100%; object-fit: cover; transition: transform .4s ease; }
  .post-card:hover .post-card__thumb img { transform: scale(1.03); }
  .post-card__cat, .post-card__date { color: var(--ink-sub); font-size: var(--fs-note); letter-spacing: .08em; }
  .post-card__title { font-size: var(--fs-h3); margin-block-start: .5rem; }
  .post-card__title a { text-decoration: none; }
  .post-card__title a::after { content: ""; inset: 0; position: absolute; }
  .post-card:hover .post-card__title a { text-decoration: underline; text-decoration-color: var(--red); }
  .post-card__date { margin-block-start: .5rem; }
  .post-card__excerpt { margin-block-start: .75rem; }
  .post-card__more { display: none; }
  @media (min-width: 700px) { .post-card { align-items: center; grid-template-columns: 16rem 1fr; } }

  /* ---------- ブログ：記事 ---------- */
  .entry__thumb { aspect-ratio: 3 / 2; margin-block-end: var(--s-block); overflow: hidden; }
  .entry__thumb img { block-size: 100%; inline-size: 100%; object-fit: cover; }
  .entry__cat { color: var(--ink-sub); font-size: var(--fs-note); letter-spacing: .12em; }
  .entry__cat a { color: inherit; text-decoration: none; }
  .entry__title { font-size: var(--fs-h2); line-height: 1.45; margin-block-start: .5rem; }
  .entry__date { color: var(--ink-sub); font-size: var(--fs-note); margin-block-start: .75rem; }
  .entry__lead { font-size: var(--fs-lead); line-height: 1.7; margin-block-start: var(--s-head); }
  .entry__lead p + p { margin-block-start: .5rem; }
  .entry-content { margin-block-start: var(--s-block); }
  .entry-content > * + * { margin-block-start: var(--s-p); }
  .entry-content h2 { border-block-start: 1px solid var(--rule); margin-block-start: var(--s-sec); padding-block-start: var(--s-block); }
  .entry-content h3 { margin-block-start: var(--s-block); }
  .entry-content h4 { margin-block-start: var(--s-block); }
  .entry-content :is(h2, h3, h4) + * { margin-block-start: var(--s-head); }
  .entry-content blockquote { border-block: 1px solid var(--rule); font-size: var(--fs-lead); line-height: 1.8; margin-block: var(--s-block); padding-block: var(--s-head); }
  .entry-content blockquote p + p { margin-block-start: .5rem; }
  .entry-content blockquote cite { color: var(--ink-sub); display: block; font-size: .9375rem; font-style: normal; margin-block-start: .75rem; }
  .entry-content blockquote cite::before { content: "— "; }
  .entry-content ul, .entry-content ol { border-block-start: 1px solid var(--rule); }
  .entry-content ul > li, .entry-content ol > li { border-block-end: 1px solid var(--rule); padding: .875rem 0 .875rem 1.375rem; position: relative; }
  .entry-content ul > li::before { background: var(--ink); block-size: 6px; content: ""; inline-size: 6px; inset-block-start: calc(.875rem + .9em - 3px); inset-inline-start: .25rem; position: absolute; transform: rotate(45deg); }
  .entry-content ol { counter-reset: ol; }
  .entry-content ol > li { counter-increment: ol; padding-inline-start: 2rem; }
  .entry-content ol > li::before { content: counter(ol) "."; font-weight: 700; inset-inline-start: 0; position: absolute; }
  .entry-content figure { margin-block: var(--s-block); }
  .entry-content figcaption { color: var(--ink-sub); font-size: var(--fs-note); margin-block-start: .5rem; }
  .entry-content hr { background: var(--rule); block-size: 1px; border: 0; margin-block: var(--s-block); }
  .table-scroll { margin-block: var(--s-block); overflow-x: auto; }
  .entry-content table { border-collapse: collapse; inline-size: 100%; min-inline-size: 480px; }
  .entry-content th, .entry-content td { border-block-end: 1px solid var(--rule); font-size: .9375rem; line-height: 1.7; padding: .875rem 1rem; text-align: start; vertical-align: top; }
  .entry-content thead th { border-block-end-color: var(--ink); font-weight: 700; }
  .entry-content tbody th { color: var(--ink-sub); font-weight: 700; white-space: nowrap; }
  .entry-content .typebox { margin-block: var(--s-sec) 0; }
  .entry__foot { border-block-start: 1px solid var(--rule); margin-block-start: var(--s-block); padding-block-start: 1.5rem; }
  .entry__back { color: var(--ink-sub); font-size: .9375rem; }
  .entry-nav { border-block: 1px solid var(--rule); display: grid; margin-block-start: var(--s-block); }
  .entry-nav__item { display: block; padding-block: 1.25rem; text-decoration: none; }
  .entry-nav__item + .entry-nav__item { border-block-start: 1px solid var(--rule); }
  .entry-nav__label { color: var(--ink-sub); font-size: var(--fs-note); letter-spacing: .1em; }
  .entry-nav__title { font-weight: 700; line-height: 1.7; margin-block-start: .25rem; }
  .entry-nav__item:hover .entry-nav__title { text-decoration: underline; text-decoration-color: var(--red); }
  @media (min-width: 640px) {
    .entry-nav { grid-template-columns: 1fr 1fr; }
    .entry-nav__item + .entry-nav__item { border-block-start: 0; border-inline-start: 1px solid var(--rule); padding-inline-start: 1.5rem; }
    .entry-nav__item--next { text-align: end; }
  }

  /* ---------- 法務の本文 ---------- */
  .legal > * + * { margin-block-start: var(--s-p); }
  .legal h2 { border-block-start: 1px solid var(--rule); font-size: var(--fs-h3); margin-block-start: var(--s-block); padding-block-start: var(--s-head); }
  .legal ul > li { padding-inline-start: 1.25em; position: relative; }
  .legal ul > li::before { content: "・"; inset-inline-start: 0; position: absolute; }
}

/* ============ ページだけの部品 ============ */
@layer pages {
  /* --- 診断 /shindan/ --- */
  .sd { padding-block: clamp(1.5rem, 4vw, 3.5rem) 0; }
  .sd-main { padding-block-end: 0; }
  .sd-intro, .sd-quizwrap { padding-block-end: var(--s-sec); }
  .sd-intro__grid { display: grid; gap: var(--s-block); }
  .sd-intro__copy > * + * { margin-block-start: var(--s-head); }
  .sd-facts { color: var(--ink-sub); display: flex; flex-wrap: wrap; font-size: .9375rem; gap: 0 1.25rem; }
  .sd-facts li { align-items: center; display: inline-flex; gap: .5rem; }
  .sd-facts li + li::before { background: var(--rule); block-size: 1em; content: ""; inline-size: 1px; margin-inline-end: 1.25rem; }
  .sd-types { border-block-start: 1px solid var(--rule); }
  .sd-types > li { align-items: start; border-block-end: 1px solid var(--rule); display: grid; gap: 0 1rem; grid-template-columns: auto 1fr; padding-block: 1.25rem; }
  .sd-types__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
  .sd-types p:last-child { color: var(--ink-sub); margin-block-start: .375rem; }
  .sd-intro__start > * + * { margin-block-start: var(--s-head); }
  @media (min-width: 900px) {
    .sd-intro__grid { align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
    .sd-intro__copy { grid-column: 1 / 7; }
    .sd-intro__side { grid-column: 8 / 13; }
  }
  /* 設問 */
  .sd-quiz { margin-inline: auto; max-inline-size: 760px; }
  .sd-prog { align-items: baseline; display: flex; justify-content: space-between; }
  .sd-prog__step { font-size: var(--fs-h3); font-weight: 700; }
  .sd-prog__step small { color: var(--ink-sub); font-size: .9375rem; font-weight: 400; }
  .sd-prog__bar { background: var(--rule); block-size: 4px; margin-block: .75rem var(--s-block); overflow: hidden; }
  .sd-prog__bar i { background: var(--ink); block-size: 100%; display: block; inline-size: 0; transition: inline-size .25s ease; }
  .sd-q { border: 0; margin: 0; padding: 0; }
  .sd-q__scene { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; padding: 0; text-wrap: balance; }
  .sd-q__ask { color: var(--ink-sub); margin-block-start: .5rem; }
  .sd-q__pair { border-block: 1px solid var(--rule); display: grid; gap: 0; margin-block-start: var(--s-block); }
  .sd-q__pair > p { padding-block: 1rem; }
  .sd-q__pair > p + p { border-block-start: 1px solid var(--rule); }
  .sd-q__pair b { color: var(--ink-sub); display: inline-block; font-size: .9375rem; inline-size: 1.75em; }
  .sd-q__pair span { font-size: var(--fs-lead); font-weight: 700; }
  .sd-scale { display: grid; gap: .5rem; margin-block-start: var(--s-head); }
  .sd-opt { cursor: pointer; display: block; position: relative; }
  .sd-opt input { block-size: 1px; inline-size: 1px; opacity: 0; position: absolute; }
  .sd-opt span { align-items: center; background: var(--field); border: 1px solid var(--rule); border-radius: 999px; display: flex; font-weight: 700; gap: .75rem; min-block-size: 56px; padding: .5rem 1.25rem; transition: border-color .12s ease, background .12s ease, color .12s ease; }
  .sd-opt span::before { block-size: 1.25rem; border: 2px solid var(--ink); border-radius: 50%; box-sizing: border-box; content: ""; flex: none; inline-size: 1.25rem; }
  .sd-opt:hover span { border-color: var(--ink); }
  .sd-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
  .sd-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .sd-opt input:checked + span::before { background: var(--bg); border-color: var(--bg); box-shadow: inset 0 0 0 4px var(--ink); }
  .sd-back { background: none; border: 0; color: var(--ink-sub); cursor: pointer; display: block; font-size: .9375rem; margin: var(--s-block) auto 0; min-block-size: 44px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .3em; }
  .sd-back::before { content: "‹ "; }
  @media (min-width: 760px) {
    .sd-q__pair { grid-template-columns: 1fr 1fr; }
    .sd-q__pair > p + p { border-block-start: 0; border-inline-start: 1px solid var(--rule); padding-inline-start: 1.5rem; }
    .sd-scale { gap: .5rem; grid-template-columns: repeat(5, 1fr); }
    .sd-opt span { border-radius: 16px; flex-direction: column; font-size: .9375rem; gap: .625rem; justify-content: flex-start; line-height: 1.4; min-block-size: 112px; padding: 1.5rem .5rem 1rem; text-align: center; }
  }
  /* 結果 */
  .sd-res { margin-inline: auto; max-inline-size: 760px; }
  .sd-res__lbl { color: var(--ink-sub); font-size: .9375rem; letter-spacing: .12em; }
  .sd-res__top { align-items: center; display: flex; gap: 1.25rem; margin-block-start: .75rem; }
  .sd-res__top .marks { justify-content: flex-start; }
  .sd-res__name { font-size: var(--fs-display); font-weight: 700; line-height: 1.2; }
  .sd-res__mix { color: var(--ink-sub); display: block; font-size: 1rem; font-weight: 400; margin-block-start: .375rem; }
  .sd-res__sub { font-size: var(--fs-lead); font-weight: 700; line-height: 1.7; margin-block-start: var(--s-head); }
  .sd-meter { margin-block-start: var(--s-block); }
  .sd-meter__nums { align-items: baseline; display: flex; justify-content: space-between; margin-block-end: .5rem; }
  .sd-meter__nums span { font-weight: 700; }
  .sd-meter__nums b { font-size: var(--fs-h2); margin-inline-start: .375rem; }
  .sd-meter__bar { block-size: 14px; display: flex; gap: 3px; position: relative; }
  .sd-meter__bar span { block-size: 100%; display: block; }
  .sd-meter__dog { background: var(--dog); border-radius: 999px 0 0 999px; }
  .sd-meter__cat { background: var(--cat); border-radius: 0 999px 999px 0; }
  .sd-meter__mid { background: var(--ink); inset-block: -5px; inline-size: 2px; inset-inline-start: 50%; opacity: .35; position: absolute; }
  .sd-meter__cap { color: var(--ink-sub); display: flex; font-size: var(--fs-note); justify-content: space-between; margin-block-start: .375rem; }
  .sd-read { margin-block-start: var(--s-sec); }
  .sd-read > section { border-block-start: 1px solid var(--rule); padding-block: var(--s-block) 0; }
  .sd-read > section + section { margin-block-start: var(--s-block); }
  .sd-read h2 { font-size: var(--fs-lead); }
  .sd-read h2 + * { margin-block-start: var(--s-head); }
  .sd-read__big { font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; }
  .sd-msg { font-size: var(--fs-lead); font-weight: 700; line-height: 1.8; margin-block-start: var(--s-sec); text-align: center; }
  .sd-acts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; margin-block-start: var(--s-head); }
  .sd-acts button { background: none; border: 0; cursor: pointer; font-size: .9375rem; min-block-size: 44px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .3em; }

  /* --- LP /sales/ --- */
  .page-lp .site-header .site-nav, .page-lp .nav-toggle { display: none; }
  .lp-float { background: color-mix(in srgb, var(--bg) 94%, transparent); border-block-start: 1px solid var(--rule); inset: auto 0 0; opacity: 0; padding: .625rem var(--gutter) calc(.625rem + env(safe-area-inset-bottom)); pointer-events: none; position: fixed; transform: translateY(100%); transition: transform .25s ease, opacity .25s ease; z-index: 50; }
  .lp-float.is-on { opacity: 1; pointer-events: auto; transform: none; }
  .lp-float .btn { inline-size: 100%; }
  @media (min-width: 768px) { .lp-float { display: none; } }
  .scene-talk { align-items: start; display: grid; gap: 1rem; grid-template-columns: 64px 1fr; }
  .scene-talk img { block-size: 64px; border-radius: 50%; inline-size: 64px; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============ 読み物ページの入れ物（ブログ・法務・404は本文をそのまま使い、この入れ物で新しい決まりに乗せる） ============ */
@layer layout {
  .section { padding-block-start: var(--s-sec); }
  .crumb + .section { padding-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .section-inner, .section-inner--narrow { margin-inline: auto; max-inline-size: calc(var(--read) + var(--gutter) * 2); padding-inline: var(--gutter); }
  .stack > * + * { margin-block-start: var(--s-p); }
  .stack > h1 + * { margin-block-start: var(--s-head); }
  .stack > * + .btn, .stack > * + p:has(> .btn) { margin-block-start: var(--s-block); }
  .page-title { margin-block-end: var(--s-block); }
  .legal-content > * + * { margin-block-start: var(--s-p); }
  .legal-content > h1 + * { margin-block-start: var(--s-block); }
  .legal-content h2 { border-block-start: 1px solid var(--rule); font-size: var(--fs-h3); margin-block-start: var(--s-block); padding-block-start: var(--s-head); }
  .legal-content ul > li { padding-inline-start: 1.25em; position: relative; }
  .legal-content ul > li::before { content: "・"; inset-inline-start: 0; position: absolute; }
  .tokusho-list > div { border-block-end: 1px solid var(--rule); display: grid; gap: .25rem 2rem; padding-block: 1.125rem; }
  .tokusho-list > div:first-child { border-block-start: 1px solid var(--rule); }
  .tokusho-list dt { color: var(--ink-sub); font-size: .9375rem; font-weight: 700; }
  @media (min-width: 600px) { .tokusho-list > div { grid-template-columns: 12em 1fr; } }
  .entry__foot { align-items: center; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: space-between; }
}
@layer components {
  .pagehead { padding-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .pagehead__inner { max-inline-size: 760px; }
  .pagehead__inner > * + * { margin-block-start: var(--s-head); }
  .pagehead__grid { align-items: end; display: grid; gap: var(--s-block); }
  @media (min-width: 900px) {
    .pagehead__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
    .pagehead__grid > .pagehead__inner { grid-column: 1 / 8; }
    .pagehead__grid > .photo { grid-column: 9 / 13; }
  }
  @media (max-width: 899px) { .pagehead__grid > .photo { aspect-ratio: 4 / 3; max-inline-size: 480px; } }
}
@layer components {
  /* 目次：箱にせず、罫線の間の文字リンク */
  .toc { border-block: 1px solid var(--rule); margin-block-start: var(--s-block) !important; padding-block: var(--s-head); }
  .toc ol { counter-reset: toc; display: grid; gap: .5rem 2rem; margin-block-start: .75rem; }
  .toc li { counter-increment: toc; }
  .toc li::before { color: var(--ink-sub); content: counter(toc) "　"; font-size: .9375rem; }
  @media (min-width: 600px) { .toc ol { grid-template-columns: 1fr 1fr; } }
  .sec--center h2 { margin-block-end: var(--s-head); }
}

/* ---------- ブログ記事の配色と装飾（2026-10-05） ---------- */
@layer pages {
  :root { --paper-alt: #F3EADF; --red-t: #FBE9E5; --mark: #F8D5CE; }

  /* 上・中・下で面を分ける：ヘッダーは白、本文は白いカード、フッターは一段濃い紙 */
  .site-header { background: color-mix(in srgb, #fff 94%, transparent); border-block-end: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(43,36,32,.05); }
  .site-footer { background: var(--ink); border-block-start: 0; color: var(--bg); }
  .site-footer a, .site-footer li a { color: var(--bg); text-decoration-color: rgba(251,246,239,.35); }
  .site-footer__heading { color: #fff; }
  .site-footer__copyright { color: rgba(251,246,239,.6); }
  /* 黒い出口（.exit）のすぐ下は、黒が続かないよう一段濃い紙に戻す */
  main:has(> .exit:last-child) + .site-footer { background: var(--paper-alt); color: var(--ink); }
  main:has(> .exit:last-child) + .site-footer :is(a, li a, .site-footer__heading) { color: var(--ink); }
  main:has(> .exit:last-child) + .site-footer .site-footer__copyright { color: var(--ink-sub); }

  .section-inner:has(> .entry) { max-inline-size: calc(780px + var(--gutter) * 2); }
  .entry { --pad: clamp(1.25rem, .6rem + 3.4vw, 3.5rem); background: #fff; border-radius: 20px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px rgba(43,36,32,.08); overflow: hidden; padding: 0 var(--pad) var(--pad); }
  .entry__thumb { margin: 0 calc(var(--pad) * -1) var(--s-block); }
  .entry__cat { background: var(--red); border-radius: 999px; color: #fff; display: inline-block; font-weight: 700; letter-spacing: .1em; padding: .25rem .9rem; }
  .entry__title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }
  .entry__lead { background: var(--bg); border-radius: 14px; padding: 1.25rem 1.5rem; }

  /* 見出し：h2は赤い面に白文字、h3は赤い丸＋下の罫 */
  .entry-content h2 { background: var(--red); border: 0; border-radius: 12px; box-shadow: 0 4px 0 rgba(160,40,25,.25); color: #fff; font-size: clamp(1.3125rem, 1.15rem + .7vw, 1.625rem); line-height: 1.5; margin-block-start: var(--s-sec); padding: 1rem 1.25rem 1rem 3rem; position: relative; }
  .entry-content h2::before { background: #fff; border-radius: 50%; block-size: .55em; content: ""; inline-size: .55em; inset-block-start: 1.55rem; inset-inline-start: 1.25rem; position: absolute; box-shadow: 0 0 0 4px rgba(255,255,255,.3); }
  .entry-content h2 + * { margin-block-start: var(--s-block); }
  .entry-content h3 { border-block-end: 2px dotted #E2B8AF; color: var(--ink); font-size: clamp(1.125rem, 1.02rem + .5vw, 1.3125rem); line-height: 1.55; padding: 0 0 .6rem 1.6rem; position: relative; }
  .entry-content h3::before { background: var(--red); border-radius: 50%; block-size: .7em; content: ""; inline-size: .7em; inset-block-start: .45em; inset-inline-start: 0; position: absolute; }

  .entry-content h3.is-dog { color: var(--dog); } .entry-content h3.is-dog::before { background: var(--dog); }
  .entry-content h3.is-cat { border-block-end-color: #A9C0D9; color: var(--cat); } .entry-content h3.is-cat::before { background: var(--cat); }
  .entry-content h3.is-cat + ul { background: var(--cat-t); } .entry-content h3.is-cat + ul > li::before { background: var(--cat); }
  .entry-content h3.is-dog + ul { background: var(--dog-t); }

  /* 本文の強調・リンク */
  .entry-content strong { background: linear-gradient(transparent 62%, var(--mark) 62%); }
  .entry-content a:not(.btn) { color: var(--red); text-decoration-color: color-mix(in srgb, var(--red) 45%, transparent); }

  /* リスト：淡い紙の面に入れる。印は赤 */
  .entry-content :is(ul, ol) { background: var(--bg); border: 0; border-radius: 14px; padding: .5rem 1.25rem; }
  .entry-content :is(ul, ol) > li { border-block-end: 1px dashed var(--rule); padding-inline-start: 1.6rem; }
  .entry-content :is(ul, ol) > li:last-child { border-block-end: 0; }
  .entry-content ul > li::before { background: var(--red); border-radius: 50%; block-size: 8px; inline-size: 8px; inset-block-start: calc(.875rem + .9em - 4px); transform: none; }
  .entry-content ol > li { padding-inline-start: 2.4rem; }
  .entry-content ol > li::before { align-items: center; background: var(--red); border-radius: 50%; block-size: 1.6rem; color: #fff; content: counter(ol); display: flex; font-size: .875rem; inline-size: 1.6rem; inset-block-start: .95rem; justify-content: center; }

  /* 引用：淡い面＋大きな赤い引用符（左の帯は使わない） */
  .entry-content blockquote { background: var(--red-t); border: 0; border-radius: 18px; padding: 2.25rem 1.5rem 1.5rem; position: relative; }
  .entry-content blockquote::before { color: var(--red); content: "“"; font-size: 4rem; inset-block-start: -.6rem; inset-inline-start: 1rem; line-height: 1; position: absolute; }
  .entry-content blockquote cite { color: var(--red); font-weight: 700; text-align: end; }

  /* 目次 */
  .entry-toc { background: var(--bg); border: 1px solid var(--rule); border-radius: 18px; padding: 1.5rem; }
  .entry-toc__ttl { color: var(--red); font-weight: 700; letter-spacing: .12em; }
  .entry-content .entry-toc ol { background: none; margin-block-start: .75rem; padding: 0; }
  .entry-content .entry-toc li { border-block-end: 1px dashed var(--rule); padding-block: .6rem; }
  .entry-content .entry-toc li::before { block-size: 1.4rem; font-size: .8125rem; inline-size: 1.4rem; inset-block-start: .7rem; }
  .entry-toc a { color: var(--ink) !important; text-decoration: none; }
  .entry-toc a:hover { color: var(--red) !important; }

  /* よくある質問：Qは赤、Aは青の丸 */
  .entry-faq h3 { border-block-end: 0; padding-inline-start: 2.6rem; }
  .entry-faq h3::before { align-items: center; block-size: 1.9rem; color: #fff; content: "Q"; display: flex; font-size: 1rem; inline-size: 1.9rem; inset-block-start: 0; justify-content: center; }
  .entry-faq h3 + p { background: var(--cat-t); border-radius: 14px; padding: 1rem 1.25rem 1rem 3.4rem; position: relative; }
  .entry-faq h3 + p::before { align-items: center; background: var(--cat); border-radius: 50%; block-size: 1.9rem; color: #fff; content: "A"; display: flex; font-weight: 700; inline-size: 1.9rem; inset-block-start: .95rem; inset-inline-start: .9rem; justify-content: center; position: absolute; }

  /* 最後の出口 */
  .entry-cta { background: linear-gradient(110deg, var(--dog-t) 0 50%, var(--cat-t) 50% 100%); border-radius: 24px; box-shadow: 0 1px 0 var(--rule), 0 18px 40px rgba(43,36,32,.1); margin-block-start: var(--s-sec) !important; padding: 2.5rem 1.5rem; text-align: center; }
  .entry-cta__ttl { font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; }
  .entry-cta p + p { margin-block-start: 1rem; }
  .entry-cta .btn { margin-block-start: .5rem; }
  @media (max-width: 599px) { .entry-cta { background: linear-gradient(160deg, var(--dog-t) 0 50%, var(--cat-t) 50% 100%); } }

  .entry__foot { border-block-start: 1px dashed var(--rule); }
  .entry-nav { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 1px 0 var(--rule); overflow: hidden; }
}

/* --- 診断 /shindan/（2026-10-05 v2：素の顔×仕事の顔・4分類）。@layer の外に置く＝下の層より優先 --- */
.sd2 { background:
    radial-gradient(60rem 40rem at -10% -10%, color-mix(in srgb, var(--dog-t) 85%, transparent), transparent 60%),
    radial-gradient(60rem 40rem at 110% 110%, color-mix(in srgb, var(--cat-t) 90%, transparent), transparent 60%),
    var(--bg); padding-block-end: 0; }
.dot { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; font-size: .8125rem; font-style: normal; font-weight: 700; block-size: 1.75rem; inline-size: 1.75rem; justify-content: center; line-height: 1; }
.dot--dog { background: var(--dog); } .dot--cat { background: var(--cat); }
.pair { display: inline-flex; } .pair .dot + .dot { margin-inline-start: -.35rem; box-shadow: 0 0 0 2px var(--bg); }
.pair--big .dot { block-size: 3.5rem; inline-size: 3.5rem; font-size: 1.375rem; } .pair--big .dot + .dot { margin-inline-start: -.6rem; box-shadow: 0 0 0 4px #fffdf9; }
/* 入口：1画面に収める・外へ出る道を置かない */
.page-shindan2 .header-cta { display: none; }
.page-shindan2 .site-header__inner { justify-content: center; }
.sd2-intro { display: grid; min-block-size: calc(100svh - var(--hdr, 72px)); padding: clamp(1rem, 4vw, 2.5rem) var(--gutter); place-items: center; }
.sd2-intro__in { display: flex; flex-direction: column; align-items: center; gap: clamp(.75rem, 2.4vh, 1.25rem); max-inline-size: 560px; text-align: center; inline-size: 100%; }
.sd2-intro__marks { margin-block-end: .25rem; }
.sd2-intro h1 { font-size: var(--fs-display); line-height: 1.3; }
.sd2-intro h1 em { font-style: normal; }
.sd2-intro__lead { font-size: var(--fs-lead); line-height: 1.8; }
.sd2-intro .sd-facts { justify-content: center; }
.sd2-intro__btn { margin-block-start: .5rem; max-inline-size: 420px; }
/* 設問：1画面に収めて動かさない */
.sd2-quiz { display: grid; min-block-size: calc(100svh - var(--hdr, 72px)); padding: clamp(.75rem, 3vw, 2.5rem) var(--gutter) 1rem; place-items: start center; }
.sd2-quiz__in { inline-size: 100%; max-inline-size: 760px; }
.sd2-head__ch { align-items: baseline; display: flex; font-size: .9375rem; font-weight: 700; justify-content: space-between; letter-spacing: .08em; }
.sd2-head__n { color: var(--ink-sub); font-weight: 400; letter-spacing: 0; }
.sd2-steps { display: grid; gap: 3px; grid-template-columns: repeat(20, 1fr); margin-block: .625rem clamp(1rem, 3vw, 1.75rem); }
.sd2-steps i { background: var(--rule); block-size: 4px; border-radius: 2px; transition: background .2s ease; }
.sd2-steps i.is-done { background: var(--ink); } .sd2-steps i.is-now { background: var(--ink-sub); }
.sd2-steps .gap { background: none; }
.sd2-card { background: rgba(255,255,255,.82); border: 0; border-radius: 28px; box-shadow: 0 1px 0 var(--rule), 0 24px 60px rgba(43,36,32,.09); margin: 0; padding: clamp(1.25rem, 4.5vw, 2.75rem) clamp(1rem, 4.5vw, 2.75rem) clamp(1.25rem, 4vw, 2.25rem); }
.sd2-scene { display: block; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); font-weight: 700; inline-size: 100%; line-height: 1.45; min-block-size: 2.9em; padding: 0; text-wrap: balance; }
.sd2-ask { color: var(--ink-sub); font-size: .875rem; margin-block-start: .25rem; }
.sd2-pair { column-gap: 1rem; display: grid; grid-template-columns: 1fr 1fr; margin-block-start: clamp(1rem, 3.5vw, 2rem); }
.sd2-pair p { display: flex; flex-direction: column; gap: .375rem; min-block-size: 4.6em; }
.sd2-pair__b { align-items: flex-end; text-align: end; }
.sd2-pair b { color: var(--ink-sub); font-size: .75rem; letter-spacing: .1em; }
.sd2-pair span { font-size: clamp(.9375rem, .85rem + .45vw, 1.1875rem); font-weight: 700; line-height: 1.55; }
.sd2-scale { align-items: start; border-block-start: 1px dashed var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: .75rem; padding-block-start: clamp(1rem, 3vw, 1.5rem); }
.sd2-opt { align-items: center; cursor: pointer; display: flex; flex-direction: column; gap: .5rem; min-block-size: 64px; position: relative; -webkit-tap-highlight-color: transparent; }
.sd2-opt input { block-size: 1px; inline-size: 1px; opacity: 0; position: absolute; }
.sd2-opt__c { background: var(--field); block-size: 2.25rem; border: 2px solid var(--ink); border-radius: 50%; inline-size: 2.25rem; transition: transform .12s ease, background .12s ease; }
.sd2-opt--l .sd2-opt__c { block-size: 3rem; inline-size: 3rem; }
.sd2-opt__t { color: var(--ink-sub); font-size: .75rem; line-height: 1.35; text-align: center; }
.sd2-opt:hover .sd2-opt__c { transform: scale(1.06); }
.sd2-opt input:focus-visible + .sd2-opt__c { outline: 2px solid var(--ink); outline-offset: 3px; }
.sd2-opt input:checked + .sd2-opt__c { background: var(--ink); box-shadow: inset 0 0 0 5px var(--field); }
.sd2-opt input:checked ~ .sd2-opt__t { color: var(--ink); font-weight: 700; }
.sd2-quiz .sd-back { margin-block-start: 1rem; }
.sd2-card.is-in { animation: sd2in .22s ease; }
@keyframes sd2in { from { opacity: .35; } to { opacity: 1; } }
@media (min-width: 760px) { .sd2-opt__t { font-size: .875rem; } .sd2-opt__c { block-size: 2.5rem; inline-size: 2.5rem; } .sd2-opt--l .sd2-opt__c { block-size: 3.5rem; inline-size: 3.5rem; } }
/* 結果 */
.sd2-resw { padding-block-start: clamp(1.5rem, 4vw, 3.5rem); }
.sd2-res { margin-inline: auto; max-inline-size: 760px; }
.sd2-hero { background: rgba(255,255,255,.82); border-radius: 28px; box-shadow: 0 1px 0 var(--rule), 0 24px 60px rgba(43,36,32,.09); padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 2.75rem); text-align: center; }
.sd2-hero__lbl { color: var(--ink-sub); font-size: .875rem; letter-spacing: .14em; margin-block-end: 1rem; }
.sd2-hero__name { font-size: var(--fs-display); font-weight: 700; letter-spacing: .06em; line-height: 1.2; margin-block-start: .75rem; }
.sd2-hero__face { color: var(--ink-sub); margin-block-start: .375rem; }
.sd2-hero__sub { font-size: var(--fs-lead); font-weight: 700; line-height: 1.7; margin-block-start: var(--s-head); text-wrap: balance; }
.sd2-meters { display: grid; gap: 1.5rem; margin-block-start: var(--s-block); }
.sd2-meter__top { align-items: baseline; display: flex; justify-content: space-between; margin-block-end: .5rem; }
.sd2-meter__lbl { font-weight: 700; letter-spacing: .06em; }
.sd2-meter__nums { font-size: .9375rem; } .sd2-meter__nums b { font-size: 1.25rem; margin-inline: .2rem .1rem; }
.sd2-meter__bar { block-size: 12px; display: flex; gap: 3px; }
.sd2-meter__bar span { block-size: 100%; display: block; }
.sd2-meter__bar .d { background: var(--dog); border-radius: 999px 0 0 999px; } .sd2-meter__bar .c { background: var(--cat); border-radius: 0 999px 999px 0; }
.sd2-meter__bar .d:only-child, .sd2-meter__bar .c:only-child { border-radius: 999px; }
.sd2-gap { background: rgba(255,255,255,.6); border-radius: 14px; font-weight: 700; line-height: 1.7; padding: .875rem 1.125rem; text-align: center; }
.sd2 .sd-read { display: grid; gap: 1rem; margin-block-start: var(--s-block); }
.sd2 .sd-read > section { background: rgba(255,255,255,.72); border: 0; border-radius: 22px; box-shadow: 0 1px 0 var(--rule); margin: 0; padding: clamp(1.25rem, 4vw, 2rem); }
.sd2 .sd-read > section + section { margin-block-start: 0; }
.sd2 .sd-read h2 { font-size: .9375rem; letter-spacing: .08em; color: var(--ink-sub); }
.sd2 .sd-read h2 + * { margin-block-start: .75rem; }
.sd2 .sd-msg { margin-block-start: var(--s-block); }
.sd2-reveal { line-height: 1.9; margin-block-start: var(--s-block); text-align: center; text-wrap: balance; }
.sd2-reveal b { font-weight: 700; }
.sd2-energy { line-height: 1.8; margin-block-start: var(--s-block); text-align: center; }

/* 2026-10-05 色の作り直し：赤と青を落ち着かせ、犬と猫のあいだをグラデでつなぐ（エネルギーのバランス） */
.page-shindan2 { --sd-dog: #C95B48; --sd-cat: #34609C; --sd-mid: #9A6E93; --sd-glass: rgba(255,255,255,.52); }
.page-shindan2 .t-dog { color: var(--sd-dog); } .page-shindan2 .t-cat { color: var(--sd-cat); }
.page-shindan2 .dot--dog { background: var(--sd-dog); } .page-shindan2 .dot--cat { background: var(--sd-cat); }
.page-shindan2 .pair--big .dot + .dot { box-shadow: 0 0 0 4px rgba(255,255,255,.7); }
.sd2 { background:
    radial-gradient(48rem 36rem at 8% 0%, rgba(201,91,72,.30), transparent 62%),
    radial-gradient(48rem 36rem at 92% 100%, rgba(52,96,156,.30), transparent 62%),
    linear-gradient(135deg, #F5DDD3 0%, #EFE5EA 50%, #D7E2F1 100%);
  background-attachment: fixed; }
.sd2-card, .sd2-hero, .sd2 .sd-read > section, .sd2-gap {
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  background: var(--sd-glass); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 20px 50px rgba(60,45,55,.10); }
.sd2-steps i.is-done { background: linear-gradient(90deg, var(--sd-dog), var(--sd-cat)); background-size: 2000% 100%; }
.sd2-opt input:checked + .sd2-opt__c { background: linear-gradient(135deg, var(--sd-dog), var(--sd-cat)); border-color: transparent; box-shadow: inset 0 0 0 5px rgba(255,255,255,.9), 0 0 0 2px var(--sd-mid); }
.page-shindan2 .btn { background: linear-gradient(110deg, var(--sd-dog), var(--sd-cat)); background: linear-gradient(110deg in oklch, var(--sd-dog), var(--sd-cat)); border-color: transparent; }
/* 型のカード：その人のバランスの色で染める（JSが --bal に猫の割合を入れる） */
.sd2-hero { background: linear-gradient(115deg, rgba(201,91,72,.38), rgba(255,255,255,.55) 50%, rgba(52,96,156,.38)) var(--bal, 50%) 0 / 260% 100% no-repeat, var(--sd-glass); }
/* メーター：2色の綱引きでなく、1本のグラデの上の「いる位置」 */
.sd2-meter__bar { background: linear-gradient(90deg, var(--sd-dog), var(--sd-cat)); background: linear-gradient(90deg in oklch, var(--sd-dog), var(--sd-cat)); block-size: 10px; border-radius: 999px; display: block; position: relative; }
.sd2-meter__pin { background: #fff; block-size: 22px; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 4px 12px rgba(43,36,32,.18); inline-size: 22px; inset-block-start: 50%; position: absolute; transform: translate(-50%, -50%); }
.sd2-meter__cap { color: var(--ink-sub); display: flex; font-size: var(--fs-note); justify-content: space-between; margin-block-start: .5rem; }
.sd2-scene { min-block-size: var(--scene-h, 2.9em); }
.sd2-pair p { min-block-size: var(--pair-h, 4.6em); }

/* /sales/：2026-10-13 本人依頼。無料60分面談を入口に、LINEの緑は相談CTAだけに使う。 */
@layer pages {
  .page-lp {
    --line-green: #087b39;
    --line-bright: #06c755;
    --lp-shadow: 0 18px 48px rgb(43 36 32 / .09);
    --lp-white: #fffdf9;
  }
  .page-lp .site-header { background: #fffdf9; border-block-end: 1px solid #e9e1d6; }
  .page-lp .header-cta--line { background: var(--line-green); border-radius: 10px; box-shadow: 0 3px 0 #055b2a; color: #fff; font-family: sans-serif; font-size: .8125rem; letter-spacing: 0; line-height: 1.5; padding: .5rem 1.1rem; text-align: center; }
  .page-lp .header-cta--line:hover { background: #065e2c; }
  .page-lp .header-cta--line strong { font-size: .9375rem; }
  .page-lp .btn--line { background: var(--line-green); border: 1px solid #05612d; border-radius: 12px; box-shadow: 0 4px 0 #055b2a, 0 8px 18px rgb(8 123 57 / .14); color: #fff; font-family: sans-serif; font-size: 1rem; gap: .6rem; letter-spacing: 0; min-block-size: 62px; padding: 1rem 1.25rem; }
  .page-lp .btn--line::after { content: '›'; margin-inline-start: .25rem; }
  .page-lp .btn--line:hover { background: #065e2c; color: #fff; }
  .page-lp .btn--line:active { box-shadow: 0 1px 0 #055b2a; }
  .page-lp .line-icon { flex: none; inline-size: 24px; block-size: 24px; }
  .page-lp :is(.header-cta--line, .btn--line):focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
  .lp-skip { background: #fff; color: var(--ink); inset: .5rem auto auto .5rem; padding: .75rem; position: fixed; transform: translateY(-180%); z-index: 100; }
  .lp-skip:focus-visible { transform: none; }
  .page-lp #content { scroll-margin-block-start: 100px; }
  .page-lp :is(#consultation, #form) { scroll-margin-block-start: 100px; }

  /* 白い誌面と写真の背後の面を重ね、冒頭に立体感をつくる。 */
  .page-lp .lp-hero { background: radial-gradient(ellipse at 88% 15%, #efe3d3 0, transparent 48%), linear-gradient(150deg, #fffdf9 55%, #f5eee3 100%); border-block-end: 1px solid #e9dfd0; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); }
  .page-lp .lp-hero .fv__grid { align-items: center; gap: 1.75rem 3.5rem; grid-template-areas: 'copy photo' 'action photo'; grid-template-columns: 1.25fr 1fr; }
  .page-lp .lp-hero .fv__copy { grid-area: copy; }
  .page-lp .lp-hero .kicker { color: var(--ink-sub); font-size: .875rem; letter-spacing: .08em; }
  .page-lp .lp-hero .fv__title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3rem); line-height: 1.5; letter-spacing: -.025em; text-wrap: initial; word-break: normal; }
  .lp-hero__em { color: var(--red); }
  .page-lp .lp-hero .lead { font-size: 1rem; line-height: 1.9; }
  .lp-hero__service { color: var(--ink-sub); font-size: .875rem; }
  .page-lp .lp-hero .fv__photo { align-self: stretch; aspect-ratio: auto; box-shadow: 16px 16px 0 #e5d9c8, var(--lp-shadow); grid-area: photo; max-block-size: none; min-block-size: 460px; order: initial; overflow: visible; position: relative; }
  .page-lp .lp-hero .fv__photo img { block-size: 100%; inline-size: 100%; object-fit: cover; object-position: 50% 26%; position: absolute; inset: 0; }
  .page-lp .lp-hero figcaption { background: linear-gradient(transparent, rgb(43 36 32 / .87)); color: #fff; inset: auto 0 0; padding: 3rem 1.5rem 1.25rem; position: absolute; }
  .page-lp .lp-hero figcaption span { display: block; font-size: .875rem; }
  .page-lp .lp-hero figcaption strong { display: block; font-size: 1.0625rem; margin-block-start: .25rem; }
  .lp-hero__action { grid-area: action; }
  .lp-hero__invitation { font-size: 1rem; }
  .lp-hero__invitation strong { font-size: 1.375rem; }
  .lp-hero__action > .btn { margin-block-start: .875rem; }
  .lp-hero__note { color: var(--ink-sub); font-size: .875rem; margin-block-start: .875rem; }
  .lp-email-link { color: var(--ink-sub); display: inline-flex; align-items: center; font-size: .8125rem; min-block-size: 44px; }

  .page-lp .sec { padding-block: clamp(3.5rem, 6vw, 5rem); }
  .page-lp .sec__grid { padding-block-start: 1.75rem; }
  .page-lp .sec__body { min-inline-size: 0; }
  .page-lp .sec__head h2 { position: static; }
  .page-lp .compare { background: #fffdf9; border: 1px solid #e5dcd0; box-shadow: 0 8px 28px rgb(43 36 32 / .05); padding: 1.5rem; }
  .page-lp .photo--seat { box-shadow: 12px 12px 0 #e6dac9; margin-block-end: 3rem; }
  .page-lp .feature__main { border-block-start: 0; padding-block-start: 0; }
  .page-lp .sec.lp-proof { background: var(--ink); color: #fffdf9; margin-block: 1.5rem 0; padding-block: clamp(3.5rem, 6vw, 5rem); }
  .page-lp .lp-proof .sec__grid { padding-block-start: 0; }
  .page-lp .lp-proof .sec__grid::before { display: none; }
  .page-lp .lp-proof :is(h2, .bignum__fig, .lead) { color: #fffdf9; }
  .page-lp .lp-proof .bignum__cap { color: #ded3c6; }
  .page-lp .lp-proof .lp-proof__intro { color: #ded3c6; margin-block-end: 1.75rem; }
  .page-lp .lp-proof .bignum { border-block: 1px solid #64574e; padding-block: 1.5rem; }
  .page-lp .lp-proof .bignum__fig { line-height: 1.2; }
  .page-lp .lp-proof .bignum__fig .num { font-size: clamp(3.5rem, 7vw, 5rem); }

  /* LINE登録特典のバナー。画像にせず、幅・拡大率に応じて文章を組み直す。 */
  .lp-consult { padding-block: 2rem; }
  .lp-consult__panel { align-items: center; background: #fffdf9; border: 1px solid #e3dbcf; border-radius: 20px; box-shadow: var(--lp-shadow); display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; padding: clamp(1.5rem, 4vw, 3rem); }
  .lp-consult__copy > * + * { margin-block-start: 1rem; }
  .lp-consult__eyebrow { color: var(--line-green); font-family: sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: .06em; }
  .lp-consult__copy h2 { font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2rem); }
  .lp-consult__copy > p:last-child { color: var(--ink-sub); font-size: .9375rem; }
  .lp-consult__action { min-inline-size: 0; text-align: center; }
  .lp-consult__offer { align-items: baseline; color: var(--ink); display: flex; gap: .4rem; justify-content: center; font-size: 1.125rem; }
  .lp-consult__offer strong { font-size: 3.5rem; line-height: 1.25; }
  .lp-consult__offer > span { color: var(--line-green); font-size: 1.5rem; font-weight: 700; margin-inline-start: .5rem; }
  .lp-consult__action .btn { inline-size: 100%; margin-block-start: 1rem; }
  .lp-consult__note { color: var(--ink-sub); font-size: .8125rem; margin-block-start: .875rem; }
  .lp-consult--final { background: #eee5d8; padding-block: clamp(3.5rem, 6vw, 5rem); }
  .lp-consult__steps { border-block-start: 1px solid var(--rule); display: grid; gap: 1.5rem; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block-start: 2rem; }
  .lp-consult__steps li { display: flex; gap: .875rem; }
  .lp-consult__steps li > span { color: var(--line-green); font-size: 1.5rem; line-height: 1.5; }
  .lp-consult__steps h3 { font-size: 1rem; line-height: 1.6; }
  .lp-consult__steps p { color: var(--ink-sub); font-size: .875rem; margin-block-start: .5rem; }
  .lp-consult__alternative { grid-column: 1 / -1; text-align: center; }
  .lp-consult__alternative a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-sub); font-size: .875rem; }
  .page-lp .lp-email { background: #fffdf9; }
  .page-lp .lp-email .sec__grid::before { display: none; }
  .page-lp .lp-email .sec__grid { padding-block-start: 0; }
  .page-lp .site-main { padding-block-end: 0; }
  .page-lp .lp-float { background: #fffdf9; box-shadow: 0 -6px 24px rgb(43 36 32 / .08); padding-block-start: .5rem; }
  .page-lp .lp-float p { color: var(--ink-sub); font-size: .75rem; margin-block-end: .4rem; text-align: center; }
  .page-lp .lp-float .btn { min-block-size: 52px; padding-block: .75rem; }

  @media (max-width: 899px) {
    .page-lp .lp-hero .fv__grid { grid-template-areas: 'copy' 'photo' 'action'; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .page-lp .lp-hero .fv__photo { box-shadow: 8px 8px 0 #e5d9c8; display: grid; grid-template-columns: 42% 58%; min-block-size: 0; block-size: 190px; }
    .page-lp .lp-hero .fv__photo img { position: static; inline-size: 100%; block-size: 190px; object-position: 50% 28%; }
    .page-lp .lp-hero figcaption { align-self: stretch; background: #ece2d4; color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 1.1rem; position: static; }
    .page-lp .lp-hero figcaption span { font-size: .8125rem; }
    .page-lp .lp-hero figcaption strong { font-size: 1rem; margin-block-start: .75rem; }
    .page-lp .lp-hero .fv__title { font-size: clamp(1.75rem, 5.1vw + .5rem, 2.5rem); line-height: 1.5; }
    .page-lp .lp-hero .fv__copy > * + * { margin-block-start: 1rem; }
    .lp-hero__action { text-align: center; }
    .lp-hero__action .btn { inline-size: 100%; }
    .lp-consult__panel { gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
    .lp-consult__copy { text-align: left; }
    .lp-consult__steps { grid-template-columns: minmax(0, 1fr); }
    .lp-consult__steps p { font-size: .9375rem; }
    .page-lp .compare { padding: 1.25rem; }
  }
  @media (max-width: 767px) {
    .page-lp { padding-block-end: calc(108px + env(safe-area-inset-bottom)); }
    .page-lp .lp-hero { padding-block: 1.5rem 2rem; }
    .page-lp .site-header__inner { gap: .75rem; }
    .page-lp .site-logo__img { inline-size: 110px; }
    .page-lp .header-cta--line { min-block-size: 48px; padding: .375rem .75rem; font-size: .6875rem; }
    .page-lp .header-cta--line strong { font-size: .75rem; }
    .page-lp .btn--line { font-size: .9375rem; padding-inline: .875rem; gap: .4rem; }
    .page-lp .sec { padding-block: 2.75rem; }
    .lp-consult { padding-block: 1.5rem; }
    .lp-consult__panel { padding: 1.5rem 1.25rem; border-radius: 16px; }
    .lp-consult__copy > p:last-child br { display: none; }
    .lp-consult__offer strong { font-size: 3rem; }
    .page-lp .lp-consult--final { padding-block: 3rem; }
  }
  @media (max-width: 360px) {
    .page-lp .btn--line { font-size: .8125rem; }
    .page-lp .lp-hero .fv__title { font-size: 1.75rem; }
    .page-lp .site-logo__img { inline-size: 100px; }
    .page-lp .header-cta--line { padding-inline: .6rem; }
  }
}

/* 2026-10-13 本人の画面確認：コピー→写真→LINEを短いFVにまとめる。 */
@layer pages {
  .page-lp { --line-green: #06c755; --line-ink: #fff; --line-label: #087b39; }
  .page-lp :is(.header-cta--line, .btn--line) { background: var(--line-green); color: var(--line-ink); box-shadow: 0 4px 0 #039b40, 0 10px 22px rgb(6 199 85 / .16); border-color: #05b64d; }
  .page-lp :is(.header-cta--line, .btn--line):hover { background: #05b94e; color: var(--line-ink); }
  .page-lp .btn--line:active { box-shadow: 0 1px 0 #039b40; }
  .page-lp .lp-consult__eyebrow, .page-lp .lp-consult__offer > span, .page-lp .lp-consult__steps li > span { color: var(--line-label); }
  .page-lp .lp-hero { padding-block: 2.5rem; }
  .page-lp .lp-hero .fv__grid { grid-template-columns: 1.15fr 1fr; gap: 1.5rem 3.5rem; }
  .page-lp .lp-hero .fv__title { font-size: clamp(2rem, 3.7vw, 3.125rem); line-height: 1.55; }
  .page-lp .lp-hero .fv__photo { min-block-size: 420px; }
  .page-lp .lp-hero .fv__photo picture { display: block; block-size: 100%; }
  .page-lp .lp-hero figcaption { padding: 2rem 1.25rem .75rem; }
  .page-lp .lp-hero figcaption strong { margin: 0; font-size: 1rem; text-align: end; }
  .page-lp .lp-hero__action { align-self: start; }
  .page-lp .lp-hero__action > .btn { min-block-size: 58px; margin-block-start: .5rem; }
  .page-lp .lp-hero__note { font-size: .8125rem; margin-block-start: .625rem; }

  /* 光は独立した飾りにして、文字・矢印・フォーカス枠を覆わない。 */
  .page-lp .btn--line[data-line-cta="hero"] { isolation: isolate; overflow: hidden; position: relative; }
  .page-lp .btn--line[data-line-cta="hero"] > :not(.lp-cta-shine) { position: relative; z-index: 1; }
  .lp-cta-shine { background: linear-gradient(110deg, transparent, rgb(255 255 255 / .52), transparent); block-size: 100%; inline-size: 32%; inset: 0 auto 0 -38%; pointer-events: none; position: absolute; transform: translateX(0) skewX(-18deg); z-index: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .lp-cta-shine { animation: lp-cta-shine 1.25s ease-out 1.1s 2; }
  }
  @keyframes lp-cta-shine { to { transform: translateX(470%) skewX(-18deg); } }

  .lp-concerns { display: grid; gap: .875rem; }
  .lp-concerns > li { align-items: center; background: linear-gradient(120deg, #fff, #fffaf3); border: 1px solid #e6dccd; border-radius: 12px; box-shadow: 0 3px 0 #e7decf, 0 10px 22px rgb(43 36 32 / .045); display: flex; gap: 1.125rem; min-block-size: 78px; padding: 1.125rem 1.25rem; }
  .lp-concerns__check { align-items: center; background: #f8eee7; border: 1px solid #dbc7b7; border-radius: 7px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #ddc7b6; block-size: 34px; color: var(--red); display: inline-flex; flex: none; inline-size: 34px; justify-content: center; }
  .lp-concerns > li > span:last-child { font-size: 1rem; font-weight: 600; line-height: 1.75; }

  @media (max-width: 899px) {
    .page-lp .lp-hero { padding-block: 1rem 1.5rem; }
    .page-lp .lp-hero .fv__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .page-lp .lp-hero .fv__title { font-size: clamp(1.7rem, 7.8vw, 2.25rem); line-height: 1.4; }
    .page-lp .lp-hero .fv__photo { block-size: clamp(180px, 31vh, 260px); block-size: clamp(180px, 31svh, 260px); display: block; min-block-size: 0; box-shadow: 7px 7px 0 #e5d9c8, 0 12px 30px rgb(43 36 32 / .09); }
    .page-lp .lp-hero .fv__photo img { position: static; inline-size: 100%; block-size: 100%; object-position: 50% 44%; }
    .page-lp .lp-hero figcaption { background: linear-gradient(transparent, rgb(43 36 32 / .65)); color: #fff; display: block; inset: auto 0 0; padding: 2rem 1rem .5rem; position: absolute; }
    .page-lp .lp-hero figcaption strong { font-size: .9375rem; margin: 0; }
    .page-lp .lp-hero__action { padding-block-start: .25rem; }
    .page-lp .lp-hero__invitation { font-size: .875rem; }
    .page-lp .lp-hero__invitation strong { font-size: 1.125rem; }
    .page-lp .lp-hero__action > .btn { min-block-size: 56px; }
    .lp-concerns > li { gap: .875rem; padding: 1rem; }
  }
}

/* 2026-10-13 全体の単調さへの再指摘。情報の役割に応じて組み方と面を変える。 */
@layer pages {
  .page-lp {
    --bg: #f4f7f6;
    --ink: #24383e;
    --ink-sub: #53646a;
    --rule: #d7e2df;
    --lp-white: #fff;
    --lp-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    --lp-shadow: 0 16px 40px rgb(34 63 65 / .08);
    color: #42545a;
    font-family: var(--lp-sans);
    line-height: 1.85;
  }
  .page-lp :is(h1, h2, h3, .lp-letter .quote) { font-family: var(--font); }
  .page-lp h2 { font-size: clamp(1.625rem, 1.2rem + 1.35vw, 2.125rem); line-height: 1.5; }
  .page-lp .site-header { background: #fff; border-color: #e2e9e6; }
  .page-lp .lp-hero { background: radial-gradient(ellipse at 98% 0, #edf5f1, transparent 52%), #fff; border-color: #e1eae6; }
  .page-lp .lp-hero .fv__photo { box-shadow: 12px 12px 0 #dce9e4, 0 18px 42px rgb(34 63 65 / .12); }
  .page-lp .sec { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
  .page-lp .sec__grid { padding-block-start: 0; }
  .page-lp .sec__grid::before { display: none; }
  .page-lp .sec__head h2 { color: var(--ink); }
  .page-lp .sec__body { max-inline-size: none; }

  /* 悩みと読み替え：読者の話を、白いチェック行から柔らかなメッセージへつなぐ。 */
  .page-lp .lp-problems { background: #f4f7f6; }
  .page-lp .lp-problems .sec__head h2 { color: #9d3d32; }
  .page-lp .lp-concerns > li { background: #fff; border-color: #dce5e1; box-shadow: 0 3px 0 #e0e8e4, 0 9px 24px rgb(34 63 65 / .05); }
  .lp-reframe { margin-block-start: 2rem; padding: 1.5rem 1.75rem; background: #fbeee9; border-radius: 14px; }
  .lp-reframe__lead { color: #953b30; font-size: 1.0625rem; line-height: 1.75; }
  .lp-reframe p + p { color: #635653; font-size: 1rem; margin-block-start: 1rem; }

  /* 目指す姿：相手を選ぶことを大きく、価格と継続をその脇に置く。 */
  .page-lp .lp-outcomes { background: #fff; }
  .page-lp .lp-outcomes .sec__grid { display: block; }
  .page-lp .lp-outcomes .sec__head { max-inline-size: 42rem; margin-block-end: 2rem; }
  .page-lp .lp-outcomes .sec__head h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
  .lp-outcomes-list { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem 2.5rem; }
  .lp-outcomes-list > li { min-inline-size: 0; padding: 1.5rem 0; }
  .lp-outcomes-list > li:first-child { align-content: center; background: #eef5f2; border: 1px solid #d8e6df; border-radius: 16px; grid-row: 1 / 3; padding: 2.25rem; }
  .lp-outcomes-list > li:not(:first-child) { border-block-end: 1px solid #dce5e1; }
  .lp-outcomes__label { color: #23624b; font-size: .875rem; font-weight: 700; margin-block-end: .75rem; }
  .lp-outcomes-list .rows__ttl { color: var(--ink); font-family: var(--font); font-size: 1.25rem; line-height: 1.65; }
  .lp-outcomes-list > li:first-child .rows__ttl { font-size: 1.625rem; }
  .lp-outcomes-list .rows__txt { line-height: 1.85; margin-block-start: .875rem; }

  /* 実績：写真・話す相手・数字を一つの場面にする。黒い長い文字面をやめる。 */
  .page-lp .sec.lp-proof { background: linear-gradient(120deg, #203940, #2c4d51); margin-block: 2rem; }
  .page-lp .lp-proof .sec__grid { grid-template-columns: 1fr 1.05fr; gap: 2.5rem 4rem; }
  .page-lp .lp-proof .sec__head { grid-column: auto; }
  .page-lp .lp-proof .sec__body { grid-column: auto; align-self: center; }
  .page-lp .lp-proof .sec__head h2 { color: #fff; font-size: clamp(1.875rem, 2.2vw, 2.5rem); }
  .lp-proof__photo { margin-block-start: 1.75rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; }
  .lp-proof__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 42% 40%; }
  .page-lp .lp-proof .sec__body > p { color: #e0ece9; }
  .page-lp .lp-proof .lp-proof__intro { color: #c6dfd6; font-size: 1rem; margin-block-end: 0; }
  .page-lp .lp-proof .bignum { border-color: #637c7f; padding-block: 1.25rem; margin-block-start: 1.5rem; }
  .page-lp .lp-proof .bignum__fig .num { color: #fff; font-size: clamp(4rem, 6vw, 5.25rem); }
  .page-lp .lp-proof .bignum__cap { color: #d7e7e1; font-size: .8125rem; }
  .page-lp .lp-proof .lead { font-size: 1rem; font-weight: 700; }

  /* 指導の流れ：写真と3つの順序。前後の節と同じ二列誌面を繰り返さない。 */
  .page-lp .lp-session { background: #fff; }
  .page-lp .lp-session .sec__grid { display: block; }
  .page-lp .lp-session .sec__head { margin-block-end: 2.25rem; }
  .page-lp .lp-session .sec__body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; }
  .page-lp .lp-session .photo--seat { aspect-ratio: 4 / 3; box-shadow: 10px 10px 0 #dceae4; border-radius: 8px; margin: 0; overflow: hidden; }
  .page-lp .lp-session .photo--seat img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .page-lp .lp-session .flow { margin: 0; }
  .page-lp .lp-session .flow li { padding: 0 0 1.75rem 3rem; margin-block-end: 1.5rem; border-block-end: 1px solid #d8e4df; }
  .page-lp .lp-session .flow li:last-child { border-block-end: 0; padding-block-end: 0; margin-block-end: 0; }
  .page-lp .lp-session .flow li::before { color: #23624b; font-size: 1.75rem; inset-block-start: 0; }
  .page-lp .lp-session .flow__ttl { color: #23554c; font-size: 1.125rem; }
  .page-lp .lp-session .flow__txt { font-size: 1rem; margin-block-start: .5rem; }

  /* 実際の返し：吹き出しの言葉を主役に、3つの判断をその下で短く示す。 */
  .page-lp .lp-example { background: #edf3f4; }
  .page-lp .lp-example .sec__grid { display: block; }
  .page-lp .lp-example .sec__head { margin-block-end: 2rem; }
  .page-lp .lp-example .sec__head h2 { color: #305969; }
  .page-lp .lp-example .scene-talk { grid-template-columns: 82px minmax(0, 1fr); gap: 1.5rem; }
  .page-lp .lp-example .scene-talk img { inline-size: 82px; block-size: 82px; box-shadow: 0 5px 18px rgb(40 64 69 / .12); }
  .page-lp .lp-example .quote { background: #fff; border: 1px solid #dbe6e8; border-radius: 18px; box-shadow: 0 16px 38px rgb(35 67 78 / .07); padding: 1.75rem 2rem; position: relative; font-size: 1.125rem; }
  .page-lp .lp-example .quote::before { content: ''; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 50%); inline-size: 16px; block-size: 22px; inset-inline-start: -15px; inset-block-start: 25px; position: absolute; }
  .page-lp .lp-example .quote cite { font-family: var(--lp-sans); text-align: end; font-size: .8125rem; }
  .lp-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .lp-principles li { padding: 1.25rem 0 0; border-block-start: 2px solid #8eacb2; }
  .lp-principles .rows__ttl { color: #2d5967; font-family: var(--lp-sans); font-size: 1rem; }
  .lp-principles .rows__txt { font-size: 1rem; }

  /* 特徴：1年間本人と話すことを主役に、他の約束は短い行として添える。 */
  .page-lp .lp-features { background: #fff; }
  .page-lp .lp-features .sec__grid { display: block; }
  .page-lp .lp-features .sec__head { margin-block-end: 2rem; }
  .page-lp .lp-features .feature { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; }
  .page-lp .lp-features .feature__main { border: 0; border-radius: 16px; background: #fbefe9; padding: 2rem; align-self: start; }
  .lp-features__duration { color: #a54334; display: block; font-size: 2.75rem; line-height: 1.3; margin-block-end: .5rem; }
  .page-lp .lp-features .feature__main h3 { font-size: 1.25rem; }
  .page-lp .lp-features .feature__main p { font-size: 1rem; }
  .page-lp .lp-features .feature__side { margin: 0; }
  .page-lp .lp-features .feature__side li { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding-block: 1.25rem; border-color: #dce6e2; }
  .page-lp .lp-features .feature__side li:first-child { padding-block-start: 0; }
  .page-lp .lp-features .feature__side h3 { font-size: 1.125rem; color: #365851; }
  .page-lp .lp-features .feature__side p { font-size: 1rem; }

  /* 向き不向き：色だけでなく、記号・面・線・大きさも分ける。 */
  .page-lp .lp-fit { background: #f4f7f6; }
  .page-lp .lp-fit .sec__grid { display: block; }
  .page-lp .lp-fit .sec__head { margin-block-end: 2rem; }
  .page-lp .lp-fit .sec__head p { max-inline-size: 40rem; }
  .page-lp .lp-fit .sec__body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start; }
  .page-lp .lp-fit .rows-group { margin: 0; padding: 2rem; border-radius: 16px; }
  .page-lp .lp-fit .lp-fit__yes { background: #e7f3ed; border: 1px solid #b9d8c8; box-shadow: 0 10px 28px rgb(27 88 63 / .07); }
  .page-lp .lp-fit .lp-fit__no { background: #f0f2f3; border: 1px dashed #aebac0; border-radius: 8px; }
  .page-lp .lp-fit h3 { display: flex; gap: .75rem; align-items: center; font-size: 1.3125rem; }
  .page-lp .lp-fit__yes h3 { color: #1e6246; }
  .page-lp .lp-fit__no h3 { color: #4f626c; font-size: 1.125rem; }
  .lp-fit__symbol { align-items: center; block-size: 30px; inline-size: 30px; border-radius: 50%; display: inline-flex; flex: none; font-family: sans-serif; justify-content: center; }
  .lp-fit__yes .lp-fit__symbol { background: #23674c; color: #fff; }
  .lp-fit__no .lp-fit__symbol { background: #d4dde1; color: #40555f; border-radius: 6px; }
  .page-lp .lp-fit .rows > li { border-color: #c7dcd1; padding: 1rem 0 1rem 1.8rem; }
  .page-lp .lp-fit__yes .rows > li::before { background: none; color: #23674c; content: '✓'; font-size: 1rem; block-size: auto; inline-size: auto; inset-block-start: 1rem; inset-inline-start: 0; transform: none; }
  .page-lp .lp-fit__no .rows > li { border-color: #d5dfe3; font-size: 1rem; }
  .page-lp .lp-fit__no .rows > li::before { background: #7e929c; inline-size: 9px; block-size: 2px; transform: none; inset-inline-start: 0; }

  /* FAQは白い行が開く。読み物の罫線と同じ扱いにしない。 */
  .page-lp .lp-questions .sec__grid { display: block; max-inline-size: 900px; }
  .page-lp .lp-questions .sec__head { margin-block-end: 2rem; }
  .page-lp .lp-questions .faq { border: 0; display: grid; gap: .75rem; }
  .page-lp .lp-questions .faq details { background: #fff; border: 1px solid #dce6e2; border-radius: 10px; padding-inline: 1.5rem; }
  .page-lp .lp-questions .faq details[open] { border-color: #9bbdb0; box-shadow: 0 6px 20px rgb(30 80 60 / .05); }
  .page-lp .lp-questions .faq summary { padding-block: 1.125rem; color: #2c5147; font-size: 1rem; }
  .page-lp .lp-questions .faq summary::after { color: #53756a; }
  .page-lp .lp-questions .faq details > p { border-block-start: 1px solid #e4ece8; padding-block: 1rem 1.25rem; color: #46595e; font-size: 1rem; }

  /* 本人の言葉は、最後の一枚の便箋としてまとめる。 */
  .page-lp .lp-letter { background: #fff; }
  .page-lp .lp-letter .sec__grid { display: block; max-inline-size: 960px; }
  .page-lp .lp-letter .sec__head { margin-block-end: 1.5rem; }
  .page-lp .lp-letter .quote { border: 1px solid #e6dcd3; border-radius: 16px; background: #fff7f1; padding: clamp(1.5rem, 4vw, 3rem); color: #844536; font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
  .page-lp .lp-letter .quote cite { color: #66564f; font-family: var(--lp-sans); font-size: .875rem; margin-block-start: 1.5rem; text-align: end; }

  /* 相談の出口は緑に統一。本文を読み終えたときに場所が分かるようにする。 */
  .page-lp .lp-consult--mid { padding-block: 2.5rem; }
  .page-lp .lp-consult__panel { background: #fff; border-color: #d3e3d9; box-shadow: 0 16px 34px rgb(37 77 54 / .09); }
  .page-lp .lp-consult__copy h2 { color: #24513d; }
  .page-lp .lp-consult__copy > p:last-child, .page-lp .lp-consult__steps p { font-size: 1rem; }
  .page-lp .lp-consult--final { background: #e8f4ed; }
  .page-lp .lp-email { background: #fff; }
  .page-lp .lp-email :is(input, textarea) { border-radius: 6px; border-color: #a7b9b2; }
  .page-lp .site-footer--lp { background: #24383e; color: #fff; }
  .page-lp .lp-float { background: #fff; border-color: #d5e2dc; }

  @media (max-width: 899px) {
    .page-lp .lp-hero .fv__photo { box-shadow: 7px 7px 0 #dce9e4, 0 12px 30px rgb(34 63 65 / .09); }
    .page-lp .lp-proof .sec__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .page-lp .lp-session .sec__body { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .page-lp .lp-features .feature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .page-lp .lp-fit .sec__body { grid-template-columns: minmax(0, 1fr); }
    .lp-outcomes-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0; }
    .lp-outcomes-list > li:first-child { grid-row: auto; padding: 1.75rem; margin-block-end: .75rem; }
    .lp-outcomes-list > li:not(:first-child) { padding-inline: .25rem; }
  }
  @media (max-width: 599px) {
    .page-lp .sec { padding-block: 3rem; }
    .page-lp .lp-problems .sec__grid { gap: 1.5rem; }
    .lp-reframe { padding: 1.25rem; }
    .lp-reframe__lead { font-size: 1rem; }
    .lp-outcomes-list > li:first-child .rows__ttl { font-size: 1.375rem; }
    .page-lp .sec.lp-proof { margin-block: 1.25rem; }
    .page-lp .lp-proof .sec__grid { gap: 1.75rem; }
    .page-lp .lp-proof .bignum__fig .num { font-size: 3.75rem; }
    .page-lp .lp-example .scene-talk { grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; }
    .page-lp .lp-example .scene-talk img { inline-size: 48px; block-size: 48px; }
    .page-lp .lp-example .quote { font-size: 1rem; padding: 1.25rem; }
    .lp-principles { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .lp-principles li { border-block-start-width: 1px; padding-block-start: .875rem; }
    .page-lp .lp-fit .rows-group { padding: 1.5rem; }
    .page-lp .lp-questions .faq details { padding-inline: 1.125rem; }
    .page-lp .lp-questions .faq summary { font-size: 1rem; }
    .page-lp .lp-letter .quote cite { text-align: start; line-height: 1.75; }
  }
}

/* 文字拡大でも行と部品が縮められるよう、内容の最小幅を明示する。 */
@layer pages {
  .page-lp .sec__grid > *, .page-lp .lp-concerns > li > span:last-child { min-inline-size: 0; }
  .page-lp :is(h2, h3) { overflow-wrap: anywhere; word-break: normal; }
  .page-lp .header-cta--line { flex: 0 1 auto; min-inline-size: 0; }
  .page-lp .header-cta--line > span { min-inline-size: 0; overflow-wrap: anywhere; }
  @media (max-width: 899px) { .page-lp .sec__grid { grid-template-columns: minmax(0, 1fr); } }
}
@layer pages {
  .page-lp .lp-session .flow li { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .875rem; padding-inline-start: 0; }
  .page-lp .lp-session :is(.flow__ttl, .flow__txt) { min-inline-size: 0; overflow-wrap: anywhere; }
  @media (max-width: 599px) { .page-lp .lp-proof .bignum__fig .num { font-size: clamp(2.25rem, 17vw, 3.75rem); } }
}

@layer pages { .page-lp .lp-session .flow__ttl { font-family: var(--lp-sans); } }