@charset "UTF-8";
/* ==========================================================================
   インテリア相談室 — style.css（フェーズ2 / v1）

   タイポグラフィの方針
     和文 = Zen Kaku Gothic New 400（太字は使わない）
     欧文 = Jost 300/400（Futura系ジオメトリック。小さく・字間を広く・細く）
     約物は YakuHanJP で半角詰め（読み込めない環境では palt でほぼ同じ効果）

   レイアウトの方針
     左端は1本。全セクションで .l-wrap から始まる
     セクションの上下余白は1種類だけ
     リズムは「地色」と「写真の大きさ」でつくる。位置ではつくらない

   色・余白は必ず下の :root 変数を経由すること（直書き禁止）
   ========================================================================== */

:root{
  /* ---- 色 ---- */
  --bg:#efece0;            /* 生成り（ページの地）*/
  --bg-2:#4d3128;          /* フッターの地 */
  --footer-ink:#f4f1e4;    /* フッターの文字 */
  --on-dark:#f4f1e4;       /* 濃い地にのせる文字（白のかわり）*/
  --footer-logo-w:1;       /* フッターのロゴ 0=濃い 1=白 */
  --surface:#fffefa;       /* 白（章の切り替え用） */
  --text:#000000;          /* 黒。淡い地に対して、輪郭をはっきりさせる */
  /* 下の2つは --text から自動で作る */
  --text-72:color-mix(in srgb, var(--text) 86%, transparent);
  --text-52:color-mix(in srgb, var(--text) 70%, transparent);
  /* 罫線。色は持たせない（線は「大事なところ」ではないため）*/
  --border:#3a3632;
  /* 枠（箱・丸）と、仕切りの線。仕切りはすべて --rule-soft の1色にそろえる */
  --rule:color-mix(in srgb, var(--border) 42%, transparent);
  --rule-soft:color-mix(in srgb, var(--border) 20%, transparent);
  --brand:#5e1803;         /* リンク・ボタン（サイトの赤）*/
  --brand-hover:#3f1002;
  --on-brand:#5e1803;      /* 申し込みの面にのせる文字 */
  /* 下の2つは --on-brand から自動で作る */
  --on-brand-72:color-mix(in srgb, var(--on-brand) 74%, transparent);
  --rule-brand:color-mix(in srgb, var(--on-brand) 32%, transparent);
  --accent:#5e1803;        /* 小さな英字ラベル（パイプ）*/
  --accent-light:color-mix(in srgb, var(--accent) 45%, transparent);
  /* About your feelings のブロック。面の色と、そこにのせる文字の色 */
  --tint:#fcfbf8;          /* About のブロックの地 */
  --tint-ink:#5e1803;      /* パイプ */
  /* 下の3つは --tint-ink から自動で作る。色を変えるときは --tint-ink だけ直せばよい */
  --tint-ink-72:color-mix(in srgb, var(--tint-ink) 86%, transparent);
  --tint-ink-52:color-mix(in srgb, var(--tint-ink) 56%, transparent);
  --tint-rule:color-mix(in srgb, var(--tint-ink) 20%, transparent);
  /* プランのブロック。地の色と、そこに載せるひと色 */
  --bg-warm:#d6e0e1;       /* プランの地（水色）*/
  --plan-ink:#5e1803;      /* プランの色（赤）*/
  --price-bg:#f5f2e7;      /* 料金の枠の地（うすいベージュ）*/
  --plan-panel:#f7f4ea;    /* プランの面（水色の地にのせる、淡いベージュ）*/
  --value-bg:#f9f7ee;      /* 大切にしていることの箱（もう少し明るいベージュ）*/
  --case-bg:#fbf8f0;       /* 事例1件ぶんの面（地よりすこし明るいアイボリー）*/
  /* 申し込みの面。ナビの青とは別にしておく */
  --cta-bg:#d6e0e1;
  --hl:#cfdfe2;            /* 強調の下敷き（水色）*/
  --hl-warm:#dcc3ac;       /* お客さまの声：マーカーの色（赤茶をベージュに寄せた色）*/
  --hl-voice:color-mix(in srgb, var(--hl-warm) 72%, transparent);
  /* 章ごとの地の色 */
  --find-bg:#efece0;       /* 整理していくこと（ベージュ）*/
  --find-ink:#5e1803;      /* 整理していくことの文字 */
  --voice-bg:#d6e0e1;      /* お客さまの声（ファーストビューと同じ）*/
  --voice-ink:#5e1803;     /* お客さまの声：強調（引用・ラベル）*/
  --voice-body:#000000;    /* お客さまの声：本文 */
  --voice-box-bg:#f5f2e7;  /* 相談の前 / あと の枠（うすいベージュ）*/
  --journal-bg:#fffefa;    /* 読みもの（白）*/
  --feature-ink:#1a1a1a;   /* Our Works / Our Journal の大きな英字（黒）*/
  /* ヘッダー（ファーストビューを過ぎたあと）*/
  --header-bg:#efece0;
  --header-ink:#5e1803;
  /* ファーストビュー。色の面と、そこに載せる対比の文字色 */
  --hero-bg:#d6e0e1;       /* 淡いブルーグレー */
  --hero-ink:#5e1803;      /* パイプ */

  /* ---- 書体 ---- */
  --font-jp:YakuHanJP,"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:"Jost","Futura","Century Gothic","Zen Kaku Gothic New",sans-serif;
  /* ファーストビューの英字だけ別の書体 */
  --font-hero:"Outfit","Jost","Century Gothic",sans-serif;

  /* ---- 文字サイズ ---- */
  /* 段階をむやみに増やさない。スマホでは 34 / 24 / 21 / 17 / 15 / 13.5 / 12 の7段階 */
  --fs-catch:clamp(19px,3.2vw,28px);   /* ページの顔になる和文 */
  --fs-h2:clamp(18px,2.2vw,24px);      /* セクションの見出し（和文） */
  --fs-h3:17px;                        /* 小見出し（和文） */
  --fs-en-sec:clamp(12px,1.2vw,14px);  /* セクションの英字ラベル */
  --fs-body:13px;
  --fs-sm:12.5px;
  /* セクションの見出しは欧文。大きくするのは意味を担う欧文と数字だけ、という方針 */
  --fs-en-mid:clamp(21px,2.6vw,28px);
  --fs-en-nav:11px;
  --fs-en-label:12px;
  --fs-en-head:16px;

  /* ---- 字間・行間 ---- */
  --ls-catch:.06em;   /* 細いウエイトで大きくするので、詰めずに広げる */
  --ls-jp:.03em;
  --ls-en:.22em;
  --lh-catch:1.8;
  --lh-body:1.9;

  /* ---- 余白・幅 ---- */
  /* 器は2段だけ。ワイド＝並べるもの／ミドル＝読ませるもの */
  --page:min(1400px, 96vw);
  --page-mid:min(1080px, 96vw);
  /* ワイドとミドルの、片側の差。並べるものを右へはみ出させるのに使う */
  --page-gap:calc((var(--page) - var(--page-mid)) / 2);
  --gutter:clamp(14px,5vw,48px);
  --sec:clamp(96px,9.8vw,136px);      /* セクションの上下余白（1種類だけ） */
  --head-gap:clamp(42px,4.8vw,64px);/* 見出し → 中身 */
  --measure:32em;                   /* 本文の折り返し（1行32文字前後） */
  --measure-read:46em;              /* 長文を読むページの本文幅（特商法・プライバシーなど）*/
  /* 詳細ページ（読みもの・事例）で共通の、本文と写真の横幅。
     ここを1つ変えれば、文章も写真も同じ左右ラインのまま動く */
  --doc-w:620px;
  /* セクションの中の、読ませるかたまりの幅。ABOUTの本文と同じにそろえる */
  --doc-mid:728px;
  --price-w:920px;   /* 料金だけは、判断に関わる情報なので少し広く */
  /* プラン詳細の器は2種類。情報が少ないところは中央に集め、多いところは横幅を使う */
  --sec-narrow:700px;    /* 情報が少ないセクションの外側（区切り線）の幅 */
  --sec-wide:1060px;     /* 情報が多いセクションの外側（区切り線）の幅 */
  /* 外側の中に置く「文章のかたまり」の幅。
     文字は左ぞろえのまま、かたまりごと中央に置くための内側の幅 */
  --txt-wide:700px;      /* 本文が続くもの（WHAT WE DO / FLOW）*/
  --txt-narrow:620px;    /* --sec-narrow の中の文章幅 */
  --txt-short:520px;     /* 1〜2行の項目が並ぶもの（RECOMMENDED / 料金の箇条書き）*/
  --pvoice-w:900px;      /* お客さまの声：生成りの面の幅 */
  --doc-w-tall:520px;               /* 縦長写真だけ、背が高くなりすぎないよう内側に */
  --doc-h2-top:clamp(48px,5.2vw,76px);  /* 中見出しの上（広め）*/
  --doc-h2-bot:clamp(18px,2vw,26px);    /* 中見出しの下（上より短め）*/
  --doc-h3-top:clamp(38px,4.2vw,60px);
  --doc-h3-bot:clamp(14px,1.6vw,20px);
  /* 写真まわりの余白。ここだけで決めて、写真ごとの個別指定はしない */
  --doc-fig-top:clamp(34px,3.8vw,52px);   /* 本文 → 写真 */
  --doc-fig-bot:clamp(22px,2.4vw,32px);   /* 写真 → その説明の文章 */
  --doc-cap-gap:.85em;                    /* 写真 → キャプション */
  --header-h:clamp(84px,10.4vw,150px);
  /* ---- ブロックとブロックの余白（ここだけで調整する）---- */
  --col-pt:clamp(70px,5vw,74px);          /* プランの列の、上の余白 */
  --col-pb:clamp(70px,4.4vw,72px);        /* プランの列の、下の余白 */
  --col-split:0px;                        /* 列と列のあいだ（縦に積むとき）*/
  --col-gap-head:clamp(50px,5.6vw,80px);  /* 頭 → 説明文 */
  --col-gap-price:clamp(46px,3.4vw,50px); /* 説明文 → 料金 */
  --col-gap-foot:clamp(46px,3.8vw,54px);  /* 料金 → リンク */
  --prose-p:1.2em;
  /* 小見出しの上下。上を広く、下を詰めて、節の切り替わりを見せる */                        /* 記事：段落と段落 */
  --prose-h2:2.6em;                       /* 記事：大見出しの上 */
  --prose-h3:3.6em;                         /* 記事：小見出しの上 */
  --prose-h3b:.7em;                       /* 記事：小見出しの下 */
  --h3-out:clamp(12px,1.6vw,26px);        /* 記事：小見出しの帯が左に出る幅 */
  /* ---- ABOUTの導入（写真＋見出し＋本文）---- */
  --intro-fig:350px;                      /* 写真の幅（導入の2カラム。全ページ共通）*/
  --intro-ratio:3 / 4;                    /* 写真の比率（横 / 縦）*/
  --intro-gap:clamp(34px,5vw,72px);      /* 写真と文章のあいだ */
  --intro-catch:clamp(17px,1.7vw,24.5px); /* 見出しの大きさ */
  --intro-catch-lh:1.9;                   /* 見出しの行間 */
  --intro-catch-ls:.06em;                 /* 見出しの字間 */
  --intro-gap-body:clamp(34px,3.8vw,54px);
  --intro-gap-catch:clamp(10px,1.4vw,20px);/* 見出し → 本文 */
  --aboutlead-size:clamp(13.5px,1.05vw,14.5px);  /* 本文の大きさ */
  --aboutlead-lh:2.05;                    /* 本文の行間 */
  --aboutlead-gap:0.7em;                  /* 段落と段落 */
  /* ---- 下層セクションの見出し ---- */
  --sec-en:clamp(13px,1.25vw,18px);       /* 英字ラベルの大きさ */
  --sec-en-big:clamp(22px,2.8vw,36px);    /* 章見出しの英字（大きいほう）*/
  --sec-jp-label:clamp(15px,1.4vw,18px);  /* 章見出しの和文（英字の上に小さく）*/
  --sec-h2:var(--fs-h2);                  /* 和文の見出し。.c-h2 と同じ大きさにそろえる */
  --sec-head-gap:clamp(42px,5.6vw,84px);    /* 見出し → 中身 */
  --measure-sec:56em;                     /* 中身の本文の折り返し */
  --team-fig:224px;                       /* 顔写真の幅 */
  --hero-inset:clamp(10px,1.4vw,20px); /* 写真のまわりに残す地の幅 */
  /* 最初の画像の高さ。写真がすべて縦位置なので、高めに取って全体を見せる */
  --hero-h:clamp(560px,100svh,1040px);
}

@media (max-width:767px){
  :root{ --lh-body:1.9; }
}

/* --------------------------------------------------------------------------
   1. リセットと土台
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 断ち落とし（100vw）でも横スクロールが出ないように */
body{overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-jp);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:var(--ls-jp);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
  text-spacing-trim:space-first;
}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,dt{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
::selection{background:var(--accent-light)}

/* --------------------------------------------------------------------------
   2. レイアウトの器
   -------------------------------------------------------------------------- */
.l-wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
/* 読ませるところの器。左右とも、ワイドより var(--page-gap) だけ内側に入る */
.l-wrap--mid{max-width:var(--page-mid)}
.l-sec{padding-block:var(--sec)}
.l-sec--bg{background:var(--bg)}
.l-sec--surface{background:var(--surface)}
/* 生成りの章のあとに続くところ。白に近いアイボリーで、章の切り替わりを示す */
.l-sec--soft{background:var(--case-bg)}
/* 地はベージュ。読ませるところは黒で、赤は小さいラベルと項目名だけに使う */
.l-sec--find{background:var(--find-bg);color:var(--text)}
.l-sec--find .c-en{color:var(--find-ink)}
.l-sec--find .c-h2,
.l-sec--find .c-catch,
.l-sec--find .c-body{color:var(--text)}
.l-sec--find .c-head .c-body{color:var(--text-72)}
.l-sec--find .c-find__en{color:var(--find-ink);
  border-top-color:color-mix(in srgb, var(--find-ink) 30%, transparent)}
.l-sec--find .c-find__jp{color:var(--text-72)}
.l-sec--find .c-ph{
  background:color-mix(in srgb, var(--find-ink) 12%, transparent);
  border-color:color-mix(in srgb, var(--find-ink) 30%, transparent);
  color:color-mix(in srgb, var(--find-ink) 60%, transparent)}
.l-sec--voice{background:var(--voice-bg);color:var(--voice-body)}
/* この面の中では、列の色をまとめて --voice-ink（赤）に差し替える */
.l-sec--voice .c-cols{--plan-ink:var(--voice-ink)}
/* 目を引かせたいところだけ赤。読ませるところは黒 */
.l-sec--voice .c-en,
.l-sec--voice .c-col__pull{color:var(--voice-ink)}
.l-sec--voice .c-h2{color:var(--voice-body)}
.l-sec--voice .c-col__rest{color:color-mix(in srgb, var(--voice-body) 72%, transparent)}
.l-sec--voice .c-col__change dd{color:var(--voice-body)}
.l-sec--voice .c-col__change dt{color:color-mix(in srgb, var(--voice-body) 64%, transparent)}
.l-sec--voice .c-col__change > div + div dt{color:var(--voice-ink)}
.l-sec--voice .c-arrow{color:var(--voice-body)}
.l-sec--voice .c-arrow span{border-color:color-mix(in srgb, var(--voice-body) 30%, transparent)}
.l-sec--voice .c-arrow:hover span{background:var(--voice-body);color:var(--voice-bg);
  border-color:var(--voice-body)}
/* お名前の行は塗りつぶして白ヌキに */
.l-sec--voice .c-col__verb{
  background:var(--voice-ink);color:var(--on-dark);border:1px solid var(--voice-ink);
}
.l-sec--voice .c-col__change{background:var(--voice-box-bg)}
.l-sec--journal{background:var(--journal-bg)}
.l-sec--brand{background:var(--cta-bg);color:var(--on-brand)}
/* スマホでは1画面近く使ってしまうので、上下だけ少し詰める（左右と中身はそのまま）*/
@media (max-width:719px){
  .l-sec--brand{padding-block:calc(var(--sec) * .87)}
}
/* 色の面。1ページに1箇所だけ（角は他と同じで直線的なまま）*/
.l-sec--tint{background:var(--tint);color:var(--tint-ink)}
.l-sec--tint .c-en{color:var(--tint-ink-72)}
.l-sec--tint .c-catch,.l-sec--tint .c-h2,.l-sec--tint .c-h3{color:var(--tint-ink)}
.l-sec--tint .c-body,.l-sec--tint .c-small{color:var(--tint-ink)}
.l-sec--tint .c-head .c-body{color:var(--tint-ink-72)}
.l-sec--tight{padding-block:calc(var(--sec) * .62)}
/* 記事本文のあとに続く RELATED / OTHER CASES。上を広く取って、本文の終わりを示す */
.l-sec--after-article{padding-top:clamp(112px,11.5vw,180px)}

/* --------------------------------------------------------------------------
   3. タイポグラフィの部品
   -------------------------------------------------------------------------- */
/* 欧文ラベル（セクションの頭）*/
/* セクションの見出し。英字を大きく、和文（.c-h2）はその下に小さく添える */
.c-en{
  font-family:var(--font-en);font-weight:400;
  font-size:var(--sec-en);letter-spacing:.2em;
  text-transform:uppercase;line-height:1.7;color:var(--accent);
}
.l-sec--brand .c-en{color:var(--on-brand-72)}
/* 欧文の中見出し（VOICE OF CUSTOMERS のような使い方）*/
.c-en--head{font-size:var(--fs-en-head);letter-spacing:.24em;color:var(--text-52)}
.l-sec--brand .c-en--head{color:var(--on-brand-72)}
/* 数字（料金・日付）*/
.c-num{font-family:var(--font-en);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.c-catch{
  font-size:var(--fs-catch);font-weight:400;
  line-height:var(--lh-catch);letter-spacing:var(--ls-catch);
}
.c-h2{font-size:var(--fs-h2);font-weight:500;line-height:1.8;letter-spacing:.06em}
.c-h3{font-size:var(--fs-h3);font-weight:500;line-height:1.8;letter-spacing:var(--ls-jp)}
.c-sub{font-size:var(--fs-h3);font-weight:500;color:var(--accent);line-height:1.8;margin-top:.8em}
.c-body{font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--measure)}
.c-body + .c-body{margin-top:1.2em}
.c-body--wide{max-width:40em}
.c-body--mid{max-width:58em;margin-inline:auto;text-align:center}
.c-small{font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:38em}
.c-small--center{max-width:40em;margin-inline:auto;text-align:center;text-wrap:balance}
.c-textlink{color:var(--brand);border-bottom:1px solid var(--accent-light)}
.c-textlink:hover{border-bottom-color:var(--brand)}
/* 送信完了。メッセージ・補足・戻る導線をひとまとまりに置く */
.p-done{
  max-width:38em;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.p-done__lead{font-size:clamp(15px,1.8vw,19px);line-height:2;letter-spacing:.05em}
.p-done__note{
  margin-top:clamp(20px,2.4vw,30px);max-width:34em;
  font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);
}
.p-done .p-done__back{align-self:center;margin-top:clamp(30px,3.4vw,46px)}
/* 完了画面は、上の水色の面から続けて読めるよう、上の余白を詰める */
.l-sec--done{padding-block:calc(var(--sec) * .46) calc(var(--sec) * .72)}

/* 本文の流れに添える小さな補足。注意書きとして立たせない */
.c-note{
  margin-top:1.5em;font-size:var(--fs-sm);line-height:1.95;
  color:var(--text-52);max-width:38em;
}

/* セクションの頭（全セクションで同じ形）*/
.c-head{margin-bottom:var(--head-gap)}
/* 下層ページは見出しを中央に置く。TOPは左ぞろえのまま */
body:not(.is-home) .c-head{text-align:center}
body:not(.is-home) .c-head .c-body{max-width:36em;margin-inline:auto}
/* 整理していくことの説明は、PCで1行に収まる幅にする */
body:not(.is-home) .l-sec--find .c-head .c-body{max-width:50em}
.c-head .c-body{margin-top:1.1em;color:var(--text-72)}

/* ---- 章見出しの組み。上に日本語を小さく、下に英字を大きく置く。
        HTMLの順番は変えずにCSSで並べ替える ---- */
.c-head,
.p-feature__head{display:flex;flex-direction:column}
/* 和文はサイズをひとつに固定して、どの章でも同じ大きさにそろえる */
.c-head > .c-h2, .c-head > .c-catch,
.p-feature__head > .c-h2, .p-feature__head > .c-catch{order:1;
  font-size:var(--sec-jp-label);font-weight:500;letter-spacing:.08em;line-height:1.9;
  color:var(--text-72)}
/* 小さく置くので、もとの改行はなくして1行にする（画面が狭いときは自然に折り返す）*/
.c-head > .c-h2 br, .c-head > .c-catch br,
.p-feature__head > .c-h2 br, .p-feature__head > .c-catch br{display:none}
.c-head > .c-en,
.p-feature__head > .c-en{order:2;margin-top:.5em;margin-bottom:0;
  font-size:var(--sec-en-big);font-weight:300;letter-spacing:.12em;line-height:1.3}
.c-head > .c-body,.c-head > .c-small,
.p-feature__head > .c-body,.p-feature__head > .c-small{order:3;
  margin-top:clamp(18px,2.2vw,28px)}

/* お申し込みの章は、長いよびかけの文が見出しなので、これまでどおり
   小さな英字ラベル → 大きな和文 の並びのままにする */
.p-feature--cta .p-feature__head{display:block}
.p-feature--cta .p-feature__head > .c-en{
  font-size:var(--sec-en);font-weight:400;letter-spacing:.2em;margin-bottom:.9em}

/* リンク（行動の名前をつける）*/
.c-link{
  display:inline-block;margin-top:2em;
  font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;letter-spacing:.06em;
  color:var(--brand);padding-bottom:.35em;border-bottom:1px solid var(--accent-light);
  transition:border-color .2s ease;
}
.c-link::after{content:" →";font-family:var(--font-en);letter-spacing:0}
.c-link:hover{border-bottom-color:var(--brand-hover);color:var(--brand-hover)}
.l-sec--brand .c-link{color:var(--on-brand);border-bottom-color:var(--rule-brand)}
.l-sec--brand .c-link:hover{border-bottom-color:var(--on-brand)}

/* ボタン（1ページに1つだけ）*/
.c-btn{
  display:inline-block;margin-top:2.2em;border-radius:999px;
  font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;
  padding:1.05em 2.4em;border:1px solid var(--brand);color:var(--brand);
  transition:background-color .2s ease,color .2s ease;
}
.c-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--bg)}
.l-sec--brand .c-btn{border-color:var(--rule-brand);color:var(--on-brand)}
.l-sec--brand .c-btn:hover{background:var(--on-brand);color:var(--cta-bg)}
/* 塗りつぶしのボタン。申し込みの面でいちばん押してほしいものに使う */
.c-btn--fill,
.l-sec--brand .c-btn--fill{
  background:var(--brand);border-color:var(--brand);color:var(--on-dark);
}
.c-btn--fill:hover,
.l-sec--brand .c-btn--fill:hover{
  background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-dark);
}

.u-right{display:flex;justify-content:flex-end}
/* 画面が狭いときだけ入る改行 */
.u-narrow{display:none}
@media (max-width:719px){.u-narrow{display:inline}}
.u-mt-1{margin-top:1em}.u-mt-2{margin-top:2em}.u-mt-3{margin-top:3em}
.u-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.p-header{
  position:fixed;inset-block-start:0;inset-inline-start:0;width:100%;z-index:50;
  background:transparent;
  transition:background-color .35s ease;
}
.p-header.is-solid{background:var(--header-bg)}
/* 色の面（下層ページの見出し）に重なっているあいだは、その面の文字色 */
.p-header:not(.is-solid) .p-nav__link,
.p-header:not(.is-solid) .p-header__apply,
.p-header:not(.is-solid) .p-hamburger{color:var(--hero-ink)}
/* 写真に重なっているあいだは白。地の上にいるときは、いつもの色 */
/* 写真の明るいところに来ても読めるよう、うすく沈める */
.p-header.is-over{background:linear-gradient(to bottom,
  rgba(18,16,14,.46) 0%, rgba(18,16,14,.24) 58%, rgba(18,16,14,0) 100%)}
.p-header.is-over .p-nav__link,
.p-header.is-over .p-header__apply,
.p-header.is-over .p-hamburger{color:var(--on-dark)}
.p-header.is-over .p-header__apply{border-color:color-mix(in srgb, var(--on-dark) 66%, transparent)}
.p-header.is-over .p-header__apply:hover{background:var(--on-dark);
  border-color:var(--on-dark);color:var(--accent)}
.p-header__in{
  position:relative;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--header-h);display:flex;align-items:center;justify-content:center;
}
/* ロゴの着地点（中身は空。動くロゴがここへ収まる）*/
/* ロゴの計測用スロット。中には非表示のコピーが入る（見えているのは .p-flogo）*/
.p-header__slot{position:absolute;inset-inline-start:var(--gutter);inset-block-start:50%;transform:translateY(-50%);visibility:hidden;width:clamp(88px,8.2vw,118px);aspect-ratio:1200/751}
.p-nav{display:none;gap:clamp(14px,2.1vw,28px)}
@media (min-width:940px){.p-nav{display:flex}}
.p-nav__link{
  font-family:var(--font-en);font-weight:400;font-size:var(--fs-en-nav);
  letter-spacing:.17em;text-transform:uppercase;color:var(--header-ink);
  transition:opacity .2s ease;
}
.p-nav__link:hover{opacity:.55}
.p-nav__link[aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:.2em}
.p-header__apply{
  position:absolute;inset-inline-end:var(--gutter);inset-block-start:50%;transform:translateY(-50%);
  font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;letter-spacing:.08em;
  color:var(--header-ink);border:1px solid currentColor;padding:.6em 1.1em;
  transition:background-color .2s ease,color .2s ease;
}
.p-header__apply:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--header-bg)}
@media (max-width:939px){.p-header__apply{display:none}}
/* 送信完了ページだけは、右上の「お申し込み」を出さない */
body.is-done .p-header__apply{display:none}

/* ハンバーガー */
.p-hamburger{
  position:absolute;inset-inline-end:var(--gutter);inset-block-start:50%;transform:translateY(-50%);
  appearance:none;background:none;border:0;padding:.4em;cursor:pointer;color:var(--header-ink);
}
@media (min-width:940px){.p-hamburger{display:none}}
.p-hamburger__bar{display:block;width:22px;height:1px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
.p-hamburger__bar + .p-hamburger__bar{margin-top:6px}
.p-hamburger[aria-expanded="true"] .p-hamburger__bar:nth-last-child(3){transform:translateY(7px) rotate(45deg)}
.p-hamburger[aria-expanded="true"] .p-hamburger__bar:nth-last-child(2){opacity:0}
.p-hamburger[aria-expanded="true"] .p-hamburger__bar:nth-last-child(1){transform:translateY(-7px) rotate(-45deg)}

/* SPのメニュー */
.p-drawer{
  position:fixed;inset:0;z-index:45;background:var(--header-bg);
  display:flex;flex-direction:column;justify-content:center;gap:1.4em;
  padding:var(--header-h) var(--gutter) var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.p-drawer.is-open{opacity:1;visibility:visible}
@media (min-width:940px){.p-drawer{display:none}}
.p-drawer a{font-family:var(--font-en);font-size:var(--fs-h3);letter-spacing:.2em;text-transform:uppercase;color:var(--header-ink)}
.p-drawer a .jp{display:block;font-family:var(--font-jp);font-size:var(--fs-en-label);letter-spacing:var(--ls-jp);color:var(--text-52);text-transform:none;margin-top:.3em}
body.is-nav-open{overflow:hidden}

/* --------------------------------------------------------------------------
   5. 動くロゴ（ヒーロー中央 → ヘッダー左上）
   -------------------------------------------------------------------------- */
.c-logo{position:relative;display:block;width:100%;aspect-ratio:1200/751}
.c-logo img{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:100%;object-fit:contain}
.c-logo .is-white{opacity:0}

/* ヒーロー中央 → ヘッダー左上へ移動するロゴ */
.p-flogo{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:210;
  width:102px;pointer-events:none;
  transition:transform var(--mo-logo,1.35s) var(--mo-ease-soft),
             width var(--mo-logo,1.35s) var(--mo-ease-soft);
}
.p-flogo.is-ready{pointer-events:auto;cursor:pointer}
.p-flogo:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:2px}
/* 中央でふわっと現れる。位置は transform で動かしているので、
   ここでは中の絵だけを透かす（少しだけ大きさも戻す）。
   --mo-ease は立ち上がりが速く、フェードには向かないので使わない。
   最初から最後まで均一に濃くなる曲線にして、じわっと出す */
.p-flogo .c-logo{
  opacity:0;transform:translateY(10px) scale(.94);
  transition:opacity var(--mo-logo-in,.9s) var(--mo-logo-ease,ease-in-out),
             transform var(--mo-logo-in,.9s) var(--mo-logo-ease,ease-in-out);
}
.p-flogo.is-shown .c-logo{opacity:1;transform:none}
.p-flogo .c-logo .is-white,.p-flogo .c-logo .is-dark{transition:opacity .5s ease}
.p-flogo .c-logo .is-white{filter:drop-shadow(0 1px 10px rgba(0,0,0,.45))}

/* オープニング（白い幕） */
.p-loader{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  transition:opacity 1.1s cubic-bezier(.16,.68,.3,1) .2s,
             visibility 1.1s cubic-bezier(.16,.68,.3,1) .2s;
}
.p-loader.is-done{opacity:0;visibility:hidden}

/* --------------------------------------------------------------------------
   6. ヒーロー
   -------------------------------------------------------------------------- */
/* 写真を画面の横いっぱいに置き、その上に文字を乗せる。ヘッダーは重ねない */
.p-hero{position:relative;background:var(--bg);padding:0}
.p-hero--over{padding-block-start:var(--header-h)}
.p-hero__frame{
  position:relative;overflow:hidden;
  height:clamp(560px, calc(100svh - var(--header-h)), 980px);
}
/* スマホは画面いっぱいにせず、横長の写真が広く見える高さにする。
   縦は全部入るので、横のどこを見せるかだけを決める（中央）*/
@media (max-width:719px){
  .p-hero__frame{height:620px}
  .p-hero__frame > img{object-position:50% 56%}
}
@media (min-width:720px){
  /* 画角は 16:9。画面が縦長のときは、少なくとも1画面ぶんは確保する */
  .p-hero__frame{height:max(calc(100svh - var(--header-h)), min(56.25vw, 1120px))}
}
.p-hero__frame > img{width:100%;height:100%;object-fit:cover;object-position:20% 56%}
/* 写真は3枚を重ねて置き、いま出ている1枚だけを見せる。
   切り替えは、ゆっくりした溶暗（--hero-fade）で */
.p-hero__shot{position:absolute;inset:0;opacity:0;
  transition:opacity var(--hero-fade) linear}
.p-hero__shot.is-on{opacity:1}
@media (prefers-reduced-motion: reduce){
  /* 動きを減らす設定の方には、1枚目だけを出す */
  .p-hero__shot{transition:none}
}
/* 文字が乗る上下を沈める */
.p-hero__frame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(18,16,14,.34) 0%, rgba(18,16,14,.14) 30%, rgba(18,16,14,0) 58%),
    linear-gradient(to bottom,
      rgba(18,16,14,.24) 0%, rgba(18,16,14,.02) 34%,
      rgba(18,16,14,.12) 64%, rgba(18,16,14,.42) 100%);
}
/* オープニングのロゴが最初に置かれる場所（中身は見えない）*/
.p-hero__slot{
  position:absolute;inset-inline-start:50%;inset-block-start:44%;transform:translate(-50%,-50%);
  visibility:hidden;width:min(52vw,270px);aspect-ratio:1200/751;z-index:2;
}
/* PCでは画面に対してロゴが小さくなり、オープニングの動きに気づきにくい。
   スマホと同じくらいの存在感になるよう、大きめに置く */
@media (min-width:940px){
  .p-hero__slot{width:min(30vw,440px)}
}
.p-hero__in{
  /* 文字は写真の上下の中心に置く */
  position:absolute;inset:var(--header-h) 0 0 0;z-index:2;
  color:var(--bg);                      /* 白ではなく生成り */
  display:flex;align-items:center;
  padding-inline:clamp(34px,9.6vw,150px) clamp(22px,3.8vw,56px);
  padding-block:clamp(24px,3.4vw,48px);
}
/* Scroll だけは、画面に見えている範囲の右下に残す */
.p-hero__scroll{
  position:absolute;right:clamp(22px,3.8vw,56px);left:auto;
  top:calc(100svh - var(--header-h) - clamp(56px,6vw,88px));
}
.p-hero__copy{width:100%}
.p-hero__copy{opacity:0;transform:translateY(16px);
  transition:opacity 1s ease .15s, transform 1s ease .15s}
.p-hero__copy.is-in{opacity:1;transform:none}
/* 大きな欧文。ページの中でいちばん大きい文字 */
.p-hero__en{
  font-family:var(--font-en);font-weight:300;text-transform:uppercase;
  font-family:var(--font-hero);
  font-size:clamp(22px,2.8vw,40px);letter-spacing:.18em;
  line-height:1.15;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.p-hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,40px);margin-top:clamp(22px,3.2vw,44px);
}
.p-hero__catch{
  font-size:clamp(16px,2.2vw,21px);font-weight:400;line-height:1.95;letter-spacing:.1em;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}
.p-hero__sub{
  margin-top:1.2em;font-size:var(--fs-sm);line-height:1.95;letter-spacing:.05em;
  color:color-mix(in srgb, var(--bg) 84%, transparent);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.p-hero__scroll{
  display:inline-flex;align-items:center;gap:1em;flex:none;
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.24em;
  text-transform:uppercase;color:color-mix(in srgb, var(--bg) 80%, transparent);
}
.p-hero__scroll span{
  display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--bg) 46%, transparent);
  font-size:var(--fs-en-label);
}
@media (max-width:719px){
  .p-hero__foot{flex-direction:column;align-items:flex-start}
  /* 文字が中央に来るので、写真の真ん中も少し沈める */
  .p-hero__frame::after{
    background:linear-gradient(to bottom,
      rgba(18,16,14,.40) 0%, rgba(18,16,14,.20) 24%,
      rgba(18,16,14,.40) 56%, rgba(18,16,14,.52) 100%);
  }
  .p-hero__scroll{right:clamp(20px,3.8vw,46px)}
}

/* --------------------------------------------------------------------------
   ファーストビュー・もう1つの形（band）
   生成りの地に写真を1枚。左端に縦書きの帯、右端に縦の英字。
   ロゴとナビは写真の外（地の上）にあるので、いつでも読める
   -------------------------------------------------------------------------- */
.p-hero--band{padding:0;background:var(--bg)}
.p-hero__stage{
  position:relative;
  padding-block:var(--header-h) clamp(24px,3.2vw,50px);
  padding-inline:var(--gutter);
}
.p-hero__band{
  position:relative;margin:0;overflow:hidden;
  margin-inline-start:clamp(30px,6.6vw,108px);
  margin-inline-end:clamp(26px,3.2vw,52px);
}
.p-hero__band > img{
  width:100%;
  height:clamp(300px, calc(100svh - var(--header-h) - clamp(96px,11vw,160px)), 660px);
  object-fit:cover;object-position:30% 56%;
}
.p-hero--band .p-hero__copy{position:absolute;inset:0;width:auto;pointer-events:none;z-index:2}
/* 縦書きの帯。右から左へ読む */
.p-hero__vt{
  position:absolute;margin:0;
  top:calc(var(--header-h) - clamp(10px,1.4vw,22px));
  left:calc(clamp(30px,6.6vw,108px) + clamp(14px,2.8vw,46px));
  display:flex;flex-direction:row-reverse;align-items:flex-start;
  gap:clamp(5px,.7vw,10px);
}
.p-hero__vt span{
  writing-mode:vertical-rl;
  /* 縦組みでは、横組み用の詰め（palt）を切らないと字が重なる */
  font-feature-settings:"palt" 0;
  text-spacing-trim:normal;
  /* 縦組みは約物用のYakuHanJPを外し、和文フォントを明示する */
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",
    "Noto Sans CJK JP","Noto Sans JP",sans-serif;
  background:var(--accent);color:var(--on-dark);
  padding:clamp(16px,1.8vw,26px) clamp(9px,1.05vw,14px);
  font-size:clamp(13.5px,1.4vw,16px);font-weight:400;
  letter-spacing:.12em;line-height:1.8;
}
.p-hero__vt span:last-child{margin-top:clamp(22px,3vw,50px)}
/* 右端に縦の英字 */
.p-hero__side{
  position:absolute;margin:0;
  right:0;left:auto;
  top:calc(var(--header-h) + clamp(56px,9vw,150px));
  writing-mode:vertical-rl;
  font-family:var(--font-en);font-size:var(--fs-en-label);
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-52);
}
/* 写真の下の一行 */
.p-hero__under{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2em clamp(20px,3vw,40px);
  margin-top:clamp(18px,2.2vw,30px);
  margin-inline-start:clamp(30px,6.6vw,108px);
  margin-inline-end:clamp(26px,3.2vw,52px);
}
.p-hero--band .p-hero__sub{margin:0;font-size:var(--fs-sm);color:var(--text-72);text-shadow:none}
.p-hero--band .p-hero__scroll{position:static;color:var(--text-52)}
.p-hero--band .p-hero__scroll span{border-color:var(--rule-soft);color:var(--text-52)}
@media (max-width:719px){
  .p-hero__stage{padding-inline:0}
  .p-hero__band{margin-inline-start:clamp(46px,14vw,64px);margin-inline-end:clamp(22px,6.4vw,30px)}
  .p-hero__vt{left:calc(clamp(46px,14vw,64px) + clamp(8px,2.4vw,14px))}
  .p-hero__under{margin-inline:var(--gutter);flex-direction:column;align-items:flex-start}
}

/* --------------------------------------------------------------------------
   写真を一面に敷く帯（TOP の About）
   -------------------------------------------------------------------------- */
.p-photoband{
  position:relative;overflow:hidden;color:var(--on-dark);
  padding-block:clamp(78px,10vw,146px);
}
.p-photoband__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
}
/* 写真ぜんたいに、薄い膜を一枚かけるだけ。左右で濃さを変えない */
.p-photoband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(14,17,20,.40);
}
.p-photoband .l-wrap{position:relative;z-index:2}
/* 写真の帯の中身は、中央にまとめて置く。本文だけは読みやすさのため左ぞろえ */
.p-photoband__body{max-width:40em;margin-inline:auto;text-align:center}
.p-photoband__body .c-head{text-align:center}
.p-photoband__body .c-body{max-width:32em;margin-inline:auto;text-align:start}
.p-photoband__body .c-arrow{align-self:center}
.p-photoband__body .u-mt-3{margin-top:clamp(30px,3.4vw,44px)}
.p-photoband .c-en{color:color-mix(in srgb, var(--on-dark) 82%, transparent)}
.p-photoband .c-catch,.p-photoband .c-body{
  color:var(--on-dark);text-shadow:0 1px 3px rgba(0,0,0,.34),0 2px 26px rgba(0,0,0,.5);
}
.p-photoband .c-arrow{color:var(--on-dark)}
.p-photoband .c-arrow span{border-color:color-mix(in srgb, var(--on-dark) 52%, transparent)}
.p-photoband .c-arrow:hover span{background:var(--on-dark);color:var(--text);border-color:var(--on-dark)}
@media (max-width:719px){
  .p-photoband::after{background:rgba(14,17,20,.46)}
}

/* --------------------------------------------------------------------------
   プラン詳細の冒頭に置く横長のビジュアル。
   水色の案内と、詳細説明のあいだのワンクッション。
   ヒーローにはせず、帯として横に長く見せる。2ページとも同じ形
   -------------------------------------------------------------------------- */
.p-planband{
  position:relative;overflow:hidden;color:var(--on-dark);
  display:flex;align-items:center;
  height:clamp(300px,27vw,400px);
}
.p-planband > .c-img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;background:none;
}
.p-planband > .c-img > img{width:100%;height:100%;object-fit:cover}
/* 写真の空気は残したいので、文字が乗る左側だけを少し沈める */
.p-planband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(20,17,14,.52) 0%, rgba(20,17,14,.37) 44%,
                    rgba(20,17,14,.13) 78%, rgba(20,17,14,.04) 100%),
    linear-gradient(to bottom, rgba(20,17,14,.14) 0%, rgba(20,17,14,0) 34%);
}
.p-planband .l-wrap{position:relative;z-index:2;width:100%}
.p-planband__body{max-width:34em}
.p-planband__catch{
  font-size:clamp(19px,2.5vw,29px);font-weight:400;
  line-height:1.9;letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 22px rgba(0,0,0,.42);
}
.p-planband__txt{
  margin-top:clamp(16px,1.9vw,24px);max-width:30em;
  font-size:var(--fs-body);line-height:2.05;letter-spacing:.04em;
  color:color-mix(in srgb, var(--on-dark) 90%, transparent);
  text-shadow:0 1px 3px rgba(0,0,0,.3),0 2px 18px rgba(0,0,0,.42);
}
@media (max-width:719px){
  .p-planband{height:auto;padding-block:clamp(52px,13vw,76px)}
  .p-planband::after{
    background:linear-gradient(to bottom, rgba(20,17,14,.50) 0%, rgba(20,17,14,.64) 100%);
  }
  .p-planband__body{max-width:none}
}

/* --------------------------------------------------------------------------
   下層ページの見出し。ファーストビューと同じ「色の面 ＋ 大きな欧文」でそろえる
   -------------------------------------------------------------------------- */
.p-pagehead{
  background:var(--hero-bg);color:var(--hero-ink);text-align:center;
  padding-block:calc(var(--header-h) + clamp(22px,2.6vw,36px)) clamp(32px,4vw,54px);
}
.p-pagehead__en{
  font-family:var(--font-en);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.2vw,29px);letter-spacing:.3em;line-height:1.3;
}
.p-pagehead__jp{
  margin-top:clamp(12px,1.5vw,20px);
  font-size:clamp(15px,1.5vw,19px);font-weight:400;
  line-height:1.85;letter-spacing:.08em;
}
/* 添える小さい文字も、見出しの下に中央で置く */
.p-pagehead__lead{
  margin:clamp(16px,2vw,24px) auto 0;max-width:45em;
  font-size:var(--fs-sm);line-height:2.1;letter-spacing:.04em;
  color:color-mix(in srgb, var(--hero-ink) 82%, transparent);
}
/* 記事・事例は、日付とカテゴリが先に来る */
.p-pagehead__meta{
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.16em;
  text-transform:uppercase;line-height:1.7;
  color:color-mix(in srgb, var(--hero-ink) 74%, transparent);
}
/* 記事ページ：カテゴリ ｜ 執筆者 ｜ 公開日。
   タイトルの下に、一覧カードと同じ大きさ・同じ並べ方で静かに置く */
.p-pagehead__meta--jrn{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.2em .5em;margin-top:clamp(14px,1.8vw,22px);
  font-size:13px;line-height:1.8;text-transform:none;letter-spacing:.1em;
}
.p-pagehead__meta--jrn .jp{font-family:var(--font-jp);letter-spacing:.08em}
.p-pagehead__meta--jrn .sep{color:color-mix(in srgb, var(--hero-ink) 40%, transparent)}
.p-pagehead--article .p-pagehead__jp{
  margin-top:clamp(12px,1.5vw,20px);max-width:32em;margin-inline:auto;
  font-size:clamp(18px,2.1vw,24px);line-height:1.8;
}

/* パンくず */
.c-breadcrumb{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.12em;color:var(--text-52);margin-bottom:2em}
.p-pagehead .c-breadcrumb{color:color-mix(in srgb, var(--hero-ink) 66%, transparent);
  margin-bottom:clamp(18px,2.2vw,28px)}
.p-pagehead .c-breadcrumb li + li::before{color:color-mix(in srgb, var(--hero-ink) 40%, transparent)}
.c-breadcrumb li{display:inline}
.c-breadcrumb li + li::before{content:"/";margin:0 .6em;color:var(--rule)}
.c-breadcrumb .jp{font-family:var(--font-jp);letter-spacing:var(--ls-jp)}

/* --------------------------------------------------------------------------
   7. 画像プレースホルダ（写真が入るまでの仮置き）
   -------------------------------------------------------------------------- */
.c-ph{
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color:var(--text-52);
  font-family:var(--font-en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:1em;
}
.c-ph--round{border-radius:50%}
.c-ph .jp{font-family:var(--font-jp);font-size:var(--fs-en-label);letter-spacing:var(--ls-jp);text-transform:none;display:block;margin-top:.5em}
.c-ph--wide{aspect-ratio:16/9}
.c-ph--slide{aspect-ratio:16/9}
.c-ph--card{aspect-ratio:16/10}
.c-ph--sq{aspect-ratio:1/1}
.c-ph--tall{aspect-ratio:3/4}
.c-ph--round{aspect-ratio:1/1;border-radius:50%;width:88px}

/* 写真。プレースホルダとまったく同じ形をとる（差し替えても崩れない） */
/* 写真の下地。読み込み前や、縦横比が合わないときに見える色。
   濃い茶色だと「仮画像」に見えてしまうので、地に近い淡い色にしておく */
.c-img{display:block;overflow:hidden;
  background:color-mix(in srgb, var(--border) 8%, var(--bg))}
.c-img > img{width:100%;height:100%;object-fit:cover;display:block}
.c-img--wide{aspect-ratio:3/2}
.c-img--slide{aspect-ratio:16/9}
.c-img--card{aspect-ratio:16/10}
.c-img--sq{aspect-ratio:1/1}
.c-img--tall{aspect-ratio:3/4}
.c-img--round{aspect-ratio:1/1;border-radius:50%;width:88px;flex:none}
/* 断ち落とし（幅いっぱい）で見せる帯 */
.c-band{margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw}
.c-band .c-img{aspect-ratio:16/9}
/* 列の中に入ったときは、断ち落としをやめて列の幅に収める */
.p-feature__body .c-band,.c-col .c-band{margin-inline:0;width:auto;max-width:100%}
@media (max-width:719px){.c-band .c-img{aspect-ratio:4/3}}

/* --------------------------------------------------------------------------
   8. プラン（TOP・SERVICE で共通。01/02 で同じ形。色だけ変える）
   -------------------------------------------------------------------------- */
.p-plan__ph{margin-bottom:clamp(26px,3.4vw,44px)}
.p-plan__grid{display:grid;gap:clamp(26px,3.4vw,44px)}
@media (min-width:900px){.p-plan__grid{grid-template-columns:minmax(0,1fr) 292px;gap:clamp(32px,4vw,56px)}}
.p-plan__main{min-width:0}
.p-plan__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1em;margin-bottom:.9em}
.p-plan__label .no{font-family:var(--font-en);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.p-plan__label .verb{font-size:var(--fs-sm);font-weight:500;letter-spacing:.08em}
.p-plan__main .c-h2{margin-bottom:.8em}

.c-inclist{margin-top:1.9em;border-top:1px solid var(--rule-soft)}
.c-inclist li{padding:.95em 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm);line-height:1.95;max-width:var(--measure)}

.c-pricebox{border:1px solid var(--rule);background:var(--surface);padding:clamp(20px,2.6vw,28px)}
.l-sec--surface .c-pricebox{background:var(--bg)}
.c-pricebox__row + .c-pricebox__row{margin-top:1.2em;padding-top:1.2em;border-top:1px solid var(--rule-soft)}
.c-pricebox__label{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-52);margin-bottom:.4em}
.c-pricebox__value{font-family:var(--font-en);font-size:clamp(23px,2.8vw,27px);font-weight:400;letter-spacing:.02em;line-height:1.3;font-variant-numeric:tabular-nums}
.c-pricebox__value .tax{font-family:var(--font-jp);font-size:var(--fs-en-label);color:var(--text-72);margin-left:.6em;letter-spacing:var(--ls-jp)}
.c-pricebox__note{font-size:var(--fs-sm);color:var(--text-72);line-height:1.85;margin-top:.4em}

/* --------------------------------------------------------------------------
   9. カード（事例・記事。均等・オフセットなし）
   -------------------------------------------------------------------------- */
.p-cards{display:grid;gap:clamp(26px,3.2vw,38px) clamp(20px,2.6vw,30px)}
/* 3列の一覧。件数が3の倍数でないときも、最後の行が中央にそろう。
   グリッドではなく折り返しで組むことで、6件・9件と増えてもそのまま使える */
.p-cards--3{
  --card-gap-x:clamp(22px,2.8vw,40px);
  --card-gap-y:clamp(46px,5.2vw,76px);
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:var(--card-gap-y) var(--card-gap-x);
}
.p-cards--3 > li{flex:0 1 100%}
@media (min-width:640px){
  .p-cards--3 > li{flex:0 1 calc((100% - var(--card-gap-x)) / 2)}
}
@media (min-width:1000px){
  .p-cards--3{max-width:1040px;margin-inline:auto}
  .p-cards--3 > li{flex:0 1 calc((100% - var(--card-gap-x) * 2) / 3)}
}
@media (min-width:640px){.p-cards--2{grid-template-columns:repeat(2,1fr)}}
.p-card{display:block}
.p-card__meta{display:flex;flex-wrap:wrap;gap:.3em 1.1em;align-items:baseline;margin:1.15em 0 .6em}
.p-card__tag{font-size:13px;letter-spacing:.06em;color:var(--accent)}
.p-card__date{font-family:var(--font-en);font-size:13px;letter-spacing:.1em;
  color:color-mix(in srgb, var(--text) 78%, transparent)}
/* 読みものカード：カテゴリと執筆者を、それぞれ枠で囲って切り分ける。
   日付はタイトルの下に置いて、右に寄せる */
.p-card__meta--jrn{gap:.5em .55em;align-items:center;margin:1.15em 0 0}
.p-card__meta--jrn .p-card__tag,
.p-card__meta--jrn .p-card__by{
  font-family:var(--font-jp);font-size:12px;letter-spacing:.08em;line-height:1;
  color:var(--accent);
  border:1px solid var(--accent-light);border-radius:999px;padding:.38em .95em;
}
.p-card__date--under{
  display:block;text-align:right;margin-top:.7em;
  font-family:var(--font-en);font-size:12.5px;letter-spacing:.12em;
}
.p-card__meta--jrn + .p-card__title{margin-top:.75em}
.p-card__title{font-size:var(--fs-body);font-weight:500;line-height:1.95;letter-spacing:var(--ls-jp)}
.p-card:hover .p-card__title{color:var(--brand)}

/* リスト形式（レビューなど）*/
.p-list{border-top:1px solid var(--rule-soft)}
.p-list a{display:grid;gap:.4em 20px;align-items:center;padding:1.3em 0;border-bottom:1px solid var(--rule-soft)}
@media (min-width:600px){.p-list a{grid-template-columns:88px 8.5em minmax(0,1fr);gap:24px}}
.p-list .c-ph,.p-list .c-img{width:100%}
@media (min-width:600px){.p-list .c-ph,.p-list .c-img{width:88px}}
.p-list__meta{display:flex;flex-direction:column;gap:.15em}
.p-list__title{font-size:var(--fs-h3);font-weight:500;line-height:1.8}
.p-list a:hover .p-list__title{color:var(--brand)}

/* --------------------------------------------------------------------------
   10. お客さまの声
   -------------------------------------------------------------------------- */
.c-quote{max-width:30em}
.c-quote p{font-size:clamp(17.5px,2.2vw,21px);line-height:1.95;letter-spacing:.04em}
/* 相談の前と、あと のあとに置く引用。ここはお客さまの言葉が主役 */
.p-ba + .c-quote{max-width:34em;margin-inline:auto;
  margin-top:clamp(42px,4.8vw,76px)}
.p-ba + .c-quote p{font-size:clamp(18px,2.4vw,24px);line-height:2}
.p-ba + .c-quote cite{text-align:center}
.c-quote cite{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--text-52);margin-top:1.5em}
.c-voicelist{margin-top:clamp(34px,4.2vw,52px);border-top:1px solid var(--rule-soft)}
.c-voicelist li{padding:1.2em 0;border-bottom:1px solid var(--rule-soft);display:grid;gap:.25em 1em}
@media (min-width:680px){.c-voicelist li{grid-template-columns:15em minmax(0,1fr);gap:1.5em}}
.c-voicelist .who{font-size:var(--fs-sm);color:var(--accent)}
.c-voicelist .txt{font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:38em}

/* --------------------------------------------------------------------------
   11. 比較表・仕様表
   -------------------------------------------------------------------------- */
.c-scroll{overflow-x:auto}
/* 比較表も、トップのプランと同じ線でひとまとまりに見せる */
.c-scroll--plan{--col-rule:color-mix(in srgb, var(--plan-ink) 22%, transparent);
  border-block:1px solid var(--col-rule);padding-block:clamp(26px,3vw,40px)}
.c-table--plan th:nth-child(3),
.c-table--plan td:nth-child(3){border-inline-start:1px solid var(--col-rule)}
.c-table{border-collapse:collapse;width:100%;min-width:620px;font-size:var(--fs-sm);line-height:1.9}
.c-table th,.c-table td{text-align:left;vertical-align:top;padding:1em .9em;
  border-bottom:1px solid var(--rule-soft)}
.c-table thead th{
  font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;letter-spacing:var(--ls-jp);
  color:var(--accent);padding-block:0 1.4em;vertical-align:bottom;
  border-bottom:1px solid var(--rule-soft);
}
.c-table thead th .c-planhd__name{font-size:15px;margin-top:.7em}
.c-table tbody th{font-weight:500;white-space:nowrap;width:9em;color:var(--text-72);font-size:var(--fs-sm)}
.c-table tbody tr:last-child th,.c-table tbody tr:last-child td{border-bottom:0}
.c-table .num{font-family:var(--font-en);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:16px}
.c-table .yes{color:var(--brand);font-size:16px;text-align:center}
.c-table .no{color:var(--text-52);text-align:center}
/* プランの列は中央に */
.c-table thead th:not(:first-child){text-align:center}
.c-table thead th .c-planhd{display:inline-block;text-align:center}
/* 見比べる表なので、中の文字もすべて中央にそろえる */
.c-table--plan th,
.c-table--plan td{text-align:center;vertical-align:middle}
.c-table--plan tbody th{color:var(--text-72)}
.c-table--plan td{max-width:22em}

/* 定義リスト（料金内訳など）*/
.c-deftable{border-top:1px solid var(--rule-soft)}
.c-deftable > div{display:grid;gap:.2em .9em;padding:.95em 0;border-bottom:1px solid var(--rule-soft)}
@media (min-width:600px){.c-deftable > div{grid-template-columns:11em minmax(0,1fr);gap:1.4em}}
.c-deftable dt{font-size:var(--fs-sm);color:var(--text-72)}
.c-deftable dd{font-size:var(--fs-sm);line-height:1.9}
/* 事例の「この事例について」。表というより、基本情報を静かに確認するところ */
.c-deftable--soft{max-width:var(--doc-w);margin-inline:auto;
  border-top-color:color-mix(in srgb, var(--border) 12%, transparent)}
.c-deftable--soft > div{padding:1.45em 0;
  border-bottom-color:color-mix(in srgb, var(--border) 12%, transparent)}
.c-deftable--soft dt{color:var(--text-52);letter-spacing:.06em}
.c-deftable--soft dd{line-height:2.1}
@media (min-width:600px){
  .c-deftable--soft > div{grid-template-columns:8.5em minmax(0,1fr);gap:1.7em}
}

/* --------------------------------------------------------------------------
   12. 流れ（番号つき）
   -------------------------------------------------------------------------- */
.c-steps{counter-reset:step;border-top:1px solid var(--rule-soft)}
.c-steps > li{counter-increment:step;display:grid;gap:.4em 1.2em;padding:1.5em 0;border-bottom:1px solid var(--rule-soft)}
@media (min-width:700px){
  .c-steps > li{grid-template-columns:3em minmax(0,1fr)}
  .c-steps > li::before{grid-column:1;grid-row:1 / 3}
  .c-steps > li .st{grid-column:2;grid-row:1}
  .c-steps > li .sd{grid-column:2;grid-row:2}
}
.c-steps > li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-en);font-size:14px;letter-spacing:.1em;color:var(--accent);line-height:1.9;
}
.c-steps .st{font-size:var(--fs-h3);font-weight:500;line-height:1.8}
.c-steps .st .dur{font-family:var(--font-en);font-size:12px;letter-spacing:.12em;color:var(--text-52);margin-left:.9em}
.c-steps .sd{font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:38em}
/* 広く使う流れでは、中の文章も列の幅にまかせる */
.c-steps--wide .sl{max-width:none}
/* ひとことの行。ステップ名の次に、いちばん先に目に入る */
.c-steps .sl{font-size:var(--fs-body);line-height:1.95;letter-spacing:.03em;max-width:38em}
.c-steps--lead .sd{margin-top:.5em;color:var(--text-52)}
/* 補足の中に、見出しつきの項目を並べるとき（お支払いのタイミングなど）*/
.c-steps .sd p + p{margin-top:1.1em}
.c-steps .sd .lb{font-weight:500;color:var(--text-72)}
.c-steps .sd ul{margin:.4em 0 0;padding:0;list-style:none}
.c-steps .sd ul li{position:relative;padding-left:1.1em;margin-top:.4em}
.c-steps .sd ul li::before{content:"—";position:absolute;left:0;color:var(--accent)}
@media (min-width:700px){
  .c-steps--lead > li{grid-template-columns:7em minmax(0,1fr);grid-template-rows:auto auto auto}
  .c-steps--lead > li::before{grid-row:1 / 4}
  .c-steps--lead > li .sl{grid-column:2;grid-row:2}
  .c-steps--lead > li .sd{grid-column:2;grid-row:3}
}
/* 番号は「何番目か」を示すための印。STEP と添えて、見出しと取りちがえないように */
.c-steps--lead{border-top-width:1px;max-width:42em;margin-inline:auto}
/* お申し込みの流れは本文が長いので、PCだけ少し広く使う */
@media (min-width:900px){.c-steps--wide{max-width:var(--sec-wide)}}
/* 線は外側の幅いっぱい、STEPの中身はその内側の中央に */
.c-steps--wide{--inset:max(0px, (100% - var(--txt-wide)) / 2)}
.c-steps--wide > li{padding-inline:var(--inset)}
/* ひとつのSTEPが、ひとまとまりに見える間隔に */
.c-steps--lead > li{padding-block:clamp(30px,3.2vw,46px)}
.c-steps--lead > li::before{content:"STEP " counter(step,decimal-leading-zero);
  font-size:15px;letter-spacing:.14em}
.c-steps--lead .st{font-size:clamp(19px,2.2vw,25px);letter-spacing:.04em}
.c-steps--lead .sl{margin-top:.75em;color:var(--text)}
.c-steps--lead .sd{margin-top:.7em;font-size:var(--fs-sm);line-height:1.9}
/* 器は広く、1行の長さは読みやすいところで止める */
.c-steps--wide .sd{max-width:none}
@media (max-width:699px){
  /* スマホは縦に長くなるので、間だけ詰める。文字の大きさは変えない */
  .c-steps--lead > li{gap:.25em 1.2em}
  .c-steps--lead .sl{margin-top:.5em}
  .c-steps--lead .sd{margin-top:.5em;line-height:1.75}
  /* 1カラムで項目が続くので、項目の頭の前を広く、項目の中は近く。
     同じ間隔が続いて単調に見えるのを防ぐ */
  .c-steps--lead > li{padding-top:34px;padding-bottom:24px}
  .p-does > li{padding-top:32px;padding-bottom:22px;gap:.3em}
  .c-checklist--roomy li{padding-top:20px;padding-bottom:15px}
}

/* --------------------------------------------------------------------------
   13. 開閉式（③念のため確認すること）
   -------------------------------------------------------------------------- */
.c-acc{border-top:1px solid var(--rule-soft)}
.c-acc details{border-bottom:1px solid var(--rule-soft)}
.c-acc summary{
  cursor:pointer;list-style:none;padding:1.25em 0;
  font-size:var(--fs-h3);font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:1em;
}
.c-acc summary::-webkit-details-marker{display:none}
.c-acc summary::after{
  content:"+";font-family:var(--font-en);font-size:15px;color:var(--accent);line-height:1;
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.c-acc summary:hover{color:var(--brand)}
.c-acc summary:hover::after{background:var(--accent);color:var(--on-dark);border-color:var(--accent)}
.c-acc details[open] summary::after{content:"−"}
.c-acc__body{padding-bottom:1.6em;font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:38em}
.c-acc__body p + p{margin-top:.9em}
.c-acc__body ul{margin-top:.6em}
.c-acc__body li{position:relative;padding-left:1.1em;margin-bottom:.4em}
.c-acc__body li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* --------------------------------------------------------------------------
   14. 箇条書き
   -------------------------------------------------------------------------- */
.c-marks{max-width:var(--measure)}
.c-marks li{position:relative;padding-left:1.2em;margin-bottom:.7em;font-size:var(--fs-body);line-height:1.95}
.c-marks li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.c-checklist{border-top:1px solid var(--rule-soft);max-width:40em}
.c-checklist li{padding:.9em 0;border-bottom:1px solid var(--rule-soft);font-size:var(--fs-sm);line-height:1.95;padding-left:1.4em;position:relative}
/* 詳細ページの「こんな方に」は、1項目ずつゆったり読ませる */
.c-checklist--roomy{max-width:var(--sec-wide);margin-inline:auto;
  --inset:max(0px, (100% - var(--txt-short)) / 2)}
.c-checklist--roomy li{padding-block:clamp(18px,2vw,26px);
  padding-left:calc(var(--inset) + 1.4em);padding-right:var(--inset);
  font-size:var(--fs-body);line-height:2}
.c-checklist.c-checklist--roomy li::before{left:var(--inset)}
.c-checklist li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-family:var(--font-en)}

/* --------------------------------------------------------------------------
   15. メンバー
   -------------------------------------------------------------------------- */
.c-member{margin-top:clamp(36px,4.6vw,60px);padding-top:clamp(26px,3.2vw,38px);border-top:1px solid var(--rule-soft);display:grid;gap:20px}
@media (min-width:620px){.c-member{grid-template-columns:88px minmax(0,1fr);gap:28px;align-items:start}}
.c-member__name{font-family:var(--font-en);font-size:18px;letter-spacing:.1em;line-height:1.4}
.c-member__role{font-size:var(--fs-en-label);font-weight:500;letter-spacing:.1em;color:var(--accent);margin:.5em 0 .9em}
.c-member__bio{font-size:var(--fs-sm);line-height:1.95;max-width:34em}
.c-member__soon{font-size:var(--fs-sm);color:var(--text-52);margin-top:1.2em}

/* --------------------------------------------------------------------------
   16. 読み物本文（特商法・プライバシー・記事）
   -------------------------------------------------------------------------- */
.c-prose{max-width:40em}
/* 法務系の長文ページ。左に寄せず、読みやすい幅で中央に置く */

/* 特商法ページの冒頭に置く、省略事項のご案内。
   警告のようには見せず、本文より一段だけ静かに */
.c-legalnote{
  margin:0 0 clamp(34px,4vw,56px);padding:0;
  font-size:var(--fs-sm);line-height:2.05;letter-spacing:.02em;
  color:var(--text-72);
}
.c-prose--legal{max-width:var(--measure-read);margin-inline:auto}
.c-prose--legal p,.c-prose--legal li{line-height:2.05}
.c-prose h2{font-size:var(--fs-h2);font-weight:400;line-height:1.7;letter-spacing:.04em;
  margin:var(--doc-h2-top) 0 var(--doc-h2-bot);padding-top:1em;
  border-top:1px solid var(--rule-soft)}
.c-prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.c-prose h3{font-size:var(--fs-h3);font-weight:500;margin:var(--doc-h3-top) 0 var(--doc-h3-bot)}
/* 記事・事例の小見出しの「赤い帯」。今は使っていないが、戻せるように残す
   （.c-prose--pill を .is-article .c-prose に戻せば復活する）*/
.c-prose--pill h3{
  display:inline-block;
  background:var(--brand);color:var(--on-dark);font-weight:500;
  border-radius:0 999px 999px 0;
  margin-inline-start:calc(-1 * var(--h3-out));
  padding-block:.55em;
  padding-inline:var(--h3-out) 1.9em;
  line-height:1.7;letter-spacing:.04em;
}
/* 帯の中では、太字を重ねない（白ヌキだけで十分に立つ）*/
.c-prose--pill h3 strong{font-weight:inherit}
.c-prose p{font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:var(--prose-p)}
.c-prose ul,.c-prose ol{margin-bottom:1.2em}
.c-prose li{position:relative;padding-left:1.2em;margin-bottom:.5em;font-size:var(--fs-body);line-height:1.95}
.c-prose li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.c-prose dl{margin-bottom:1.4em;border-top:1px solid var(--rule-soft)}
.c-prose dt{font-size:var(--fs-sm);color:var(--text-72);padding-top:1.3em}
.c-prose dd{font-size:var(--fs-body);line-height:2.05;padding-bottom:1.3em;border-bottom:1px solid var(--rule-soft)}
/* 内容の中の段落・箇条書きは、詰まらないように間を空ける */
.c-prose dd > p + p,.c-prose dd > ul,.c-prose dd > ol{margin-top:.7em}
.c-prose dd > ul,.c-prose dd > ol{margin-bottom:0}
.c-prose dd li{margin-bottom:.3em}
.c-prose dd .c-note{margin-top:.9em;font-size:var(--fs-sm);color:var(--text-52);max-width:none}
@media (min-width:640px){
  /* 項目名の列は固定気味に。内容の列に幅を回す */
  .c-prose dl{display:grid;grid-template-columns:13em minmax(0,1fr);column-gap:clamp(20px,2.4vw,36px)}
  /* 横に並ぶので、項目名と内容の1行目の高さをそろえる。
     縦に積むスマホでは、内容が項目名のすぐ下に来るよう上の余白は付けない */
  .c-prose dt{border-bottom:1px solid var(--rule-soft);padding-bottom:1.3em;line-height:2.05}
  .c-prose dd{padding-top:1.3em}
}
.c-prose a{color:var(--brand);border-bottom:1px solid var(--accent-light)}
/* 強調は、文字を大きくせずに水色の下敷きで。
   文字の上から3割ほどは空けて、下にわずかにはみ出す高さにする */
.c-prose strong{
  font-weight:500;
  background:linear-gradient(transparent 35%, var(--hl) 35%, var(--hl) 88%, transparent 88%);
  padding-inline:.18em;
}
/* 見出しの中の強調には敷かない */
.c-prose h3 strong,
.c-prose h2 strong{background:none;padding-inline:0}
.c-prose .note{font-size:var(--fs-sm);color:var(--text-72)}
/* 短い行を続けて置く段落（自分への問いかけ、いただいた声） */
.lines{line-height:2.25}
.lines--soft{color:var(--text-72)}
/* 言い切りの一行。前後を空けて、そこだけ立ち止まれるように */
.c-prose .mark{
  font-size:clamp(16px,1.9vw,20px);font-weight:500;line-height:2;letter-spacing:.04em;
  margin-block:clamp(26px,2.8vw,38px);
}
/* 「そのとき、」のように、次の行へ続く書き出し */
.c-prose .lead-in{margin-bottom:0}
.c-prose figure{margin:2.2em 0}
/* 縦位置の写真が高くなりすぎないように、高さで止める（左端はそろえたまま）*/
.c-prose figure img{width:auto;max-width:100%;max-height:620px}
/* 記事本文（読みもの・事例）の写真だけは、文章と同じ左右ラインにそろえる。
   縦写真でも横幅を本文に合わせるので、高さの頭打ちは外す */
.p-doc.c-prose figure img{width:100%;height:auto;max-height:none}
.c-prose figcaption{font-size:var(--fs-sm);color:var(--text-52);line-height:1.9;margin-top:.9em}
/* 記事の中に差し込む、お客さまの言葉。左に細い線を引いて本文と見分ける */
.c-prose .c-quote{
  margin:2.2em 0;padding:.15em 0 .15em clamp(18px,2.2vw,30px);
  border-inline-start:1px solid var(--accent-light);
}
.c-prose .c-quote p{
  margin-bottom:0;font-size:var(--fs-body);line-height:2.1;letter-spacing:.04em;color:var(--text);
}
.c-prose .c-quote p + p{margin-top:1.2em}

/* --------------------------------------------------------------------------
   17. フォーム埋め込み
   -------------------------------------------------------------------------- */
.c-embed{
  margin-top:clamp(26px,3vw,40px);max-width:var(--doc-mid);margin-inline:auto;
  border:1px solid var(--rule-soft);background:var(--surface);
  padding:clamp(18px,2.4vw,28px);
}
.l-sec--surface .c-embed{background:var(--bg)}
.c-embed__note{font-size:var(--fs-sm);color:var(--text-72)}
.c-embed iframe{width:100%;border:0;display:block}
.c-todo{
  border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  padding:1.1em 1.3em;font-size:var(--fs-sm);
  line-height:1.9;color:var(--text-72);max-width:38em;margin-top:1.4em;
}
/* 枠の中に入るときは、上の余白をつくらない（空の箱に見せない）*/
.c-embed > .c-todo{margin:0;max-width:none}
/* スマホでは、枠の内側の余白と線をなくしてフォームの幅をかせぐ。
   Googleフォーム側にも余白があるため、二重に狭くなっていた */
@media (max-width:719px){
  .c-embed{padding-inline:0;border-inline:0}
  .c-embed__note{padding-inline:4px}
}
/* 昔の記事につける注記。本文と読み分けられるよう、地色を敷いて先頭に置く */
.c-note--past{
  background:var(--bg-warm-soft,var(--price-bg));
  padding:1em 1.2em;margin-bottom:2.4em;
  font-size:var(--fs-sm);line-height:1.9;color:var(--text-72);
}
/* お申し込みページ：フォームが下にあるので、冒頭から飛べるようにする */
.p-pagehead__jump{margin-top:clamp(22px,2.6vw,32px)}
.c-todo b{color:var(--brand);font-weight:500}

/* --------------------------------------------------------------------------
   18. フッター
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   フッター
     「もう一度ブランドを説明する場所」ではなく、
     必要なページへ移動するためのナビゲーションだけを置く場所。
     地の色はサイトの最後を締めるブラウンのまま。
   -------------------------------------------------------------------------- */
.p-footer{
  background:var(--bg-2);color:var(--footer-ink);
  border-top:1px solid color-mix(in srgb, var(--footer-ink) 22%, transparent);
  padding-block:clamp(38px,4.4vw,62px) clamp(22px,2.4vw,30px);
}
/* スマホは2列。1段目 MENU ｜ SERVICE、2段目 CONTACT ｜ INSTAGRAM */
.p-footer__nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,4vw,32px) clamp(18px,5vw,34px);
  align-items:start;
}
@media (min-width:760px){
  /* PCは4列。4つとも同じ高さから始めて、横方向のリズムをそろえる */
  .p-footer__nav{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(26px,3.2vw,44px) clamp(24px,3.4vw,56px);
  }
}
.p-footer__col{display:grid;gap:.7em;align-content:start;text-align:start}
/* 見出しは英字。リンクとの大きさの差はつけず、字間と色で区別する */
.p-footer__ct{
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.22em;
  text-transform:uppercase;line-height:1.7;margin-bottom:.35em;
  color:color-mix(in srgb, var(--footer-ink) 62%, transparent);
}
.p-footer__col a{font-size:var(--fs-sm);line-height:1.75;
  transition:opacity .2s ease}
.p-footer__col a:hover{opacity:.62}
/* 長いサービス名は、列の幅に入りきらないあいだだけ短い名前に差し替える。
   4列がそれぞれ1行で収まる幅（1430px以上）になったら、正式名称に戻る */
.p-footer__col a .sm{display:none}
@media (max-width:1429px){
  .p-footer__col a .lg{display:none}
  .p-footer__col a .sm{display:inline}
}
/* いちばん下の行。左に法務リンク、右に著作権表示 */
.p-footer__foot{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.7em 2em;
  margin-top:clamp(24px,2.6vw,34px);padding-top:1.15em;
  border-top:1px solid color-mix(in srgb, var(--footer-ink) 18%, transparent);
}
/* 主要な導線より一段小さく・控えめに。でも読めないほど薄くはしない */
.p-footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2em .7em;
  font-size:var(--fs-en-label);line-height:1.9;
  color:color-mix(in srgb, var(--footer-ink) 62%, transparent);
}
.p-footer__legal a{color:inherit;border-bottom:1px solid transparent}
.p-footer__legal a:hover{color:var(--footer-ink);
  border-bottom-color:color-mix(in srgb, var(--footer-ink) 40%, transparent)}
.p-footer__legal .sep{color:color-mix(in srgb, var(--footer-ink) 34%, transparent)}
.p-footer__cp{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.1em;
  line-height:1.9;   /* 左の法務リンクと同じ行送り。上下位置をそろえる */
  color:color-mix(in srgb, var(--footer-ink) 62%, transparent);margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .p-hero__copy{opacity:1;transform:none}
  .p-loader{display:none}
}

/* --------------------------------------------------------------------------
   14. 設計書のセクション用の部品
   -------------------------------------------------------------------------- */
/* 独立して置く短い言葉（「これ、好きかも」など）*/
/* 短いひとことを丸く囲む。サイトの中で唯一の丸い形 */
.c-murmur{display:flex;flex-direction:column;align-items:flex-start;gap:.6em;
  margin-block:clamp(26px,3.4vw,40px)}
.c-murmur--center{align-items:center;text-align:center}
.c-murmur li{
  display:inline-block;border-radius:999px;
  padding:.5em 1.5em;color:var(--tint-ink);background:var(--bg);
  /* 面の色を地と同じにしても囲みが消えないよう、うすい枠を添える */
  border:1px solid color-mix(in srgb, var(--tint-ink) 20%, transparent);
  font-size:clamp(15px,1.9vw,18px);font-weight:400;line-height:1.7;letter-spacing:.05em;
}

/* 「好き」を整理する5項目 */
/* 5つの観点。幅をいっぱいに使って横1列に並べる */
.c-find{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  margin-inline-end:calc(-1 * var(--gutter));padding-inline-end:var(--gutter)}
.c-find::-webkit-scrollbar{display:none}
.c-find li{flex:0 0 min(58vw,240px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:.9em}

@media (min-width:900px){
  .c-find{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;
    margin-inline-end:0;padding-inline-end:0}
  .c-find li{flex:none}
}
/* 提案資料そのものを見せる形。スライドなので大きめに、3列で */
@media (min-width:760px){
  .c-find.c-find--doc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(22px,2.8vw,40px);overflow:visible;margin-inline-end:0;padding-inline-end:0}
  .c-find.c-find--doc li{flex:none}
}
@media (max-width:759px){
  .c-find.c-find--doc li{flex:0 0 min(84vw,420px)}
}
.c-find .c-ph,.c-find .c-img{width:100%}
.c-find__en{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);line-height:1.6;
  padding-top:.9em;border-top:1px solid var(--rule)}
.c-find__jp{font-size:var(--fs-sm);color:var(--text-72);line-height:1.8;margin-top:-.5em}

/* 相談前 → 相談後 */
.c-change{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:clamp(28px,3.4vw,42px)}
@media (min-width:720px){.c-change{grid-template-columns:1fr 1fr}}
.c-change li{background:var(--bg);padding:clamp(16px,2.2vw,22px)}
.l-sec--bg .c-change li{background:var(--surface)}
.l-sec--find .c-change li{background:var(--surface)}
.c-change__label{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-52);margin-bottom:.5em;display:block}
.c-change li.is-after .c-change__label{color:var(--brand)}
.c-change__txt{font-size:var(--fs-sm);line-height:1.9}

/* 申し込みまでの短い流れ（CTAの中に置く）*/
.c-miniflow{display:flex;flex-wrap:wrap;gap:.5em 1.1em;margin-top:2em;
  font-size:var(--fs-sm);color:var(--on-brand-72);line-height:1.9}
.c-miniflow li{display:flex;align-items:baseline;gap:1.1em}
.c-miniflow li + li::before{content:"→";font-family:var(--font-en);color:var(--rule-brand)}

/* 事例カードのテーマ（どうしてこの部屋になったのか）*/
.p-card__theme{display:block;font-size:var(--fs-sm);color:var(--text-72);line-height:1.9;margin-top:.55em}
/* --------------------------------------------------------------------------
   事例の一覧（WORKS）。1件を横長のブロックで、左右を交互に
   -------------------------------------------------------------------------- */
/* 事例の中はまとまって見せ、事例と事例のあいだで呼吸を入れる。
   1件ぶんは、ごく淡い面でひとまとまりに見せる（線でも影でもなく、面の色だけ）*/
.p-caselist{
  display:grid;gap:clamp(26px,3vw,44px);
  max-width:1116px;margin:clamp(34px,4vw,56px) auto 0;
}
.p-case{
  background:var(--case-bg);
  padding:clamp(26px,3.4vw,48px);
}
.p-case__inner{display:grid;gap:clamp(24px,3vw,40px);align-items:start}
.p-case__body{display:flex;flex-direction:column}
@media (min-width:880px){
  .p-case__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:clamp(30px,3.4vw,52px)}
  /* 1件おきに、写真と文章を入れ替える */
  .p-case--rev .p-case__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .p-case--rev .p-case__body{order:2}
  .p-case--rev .p-case__media{order:1}
  /* ラベルの箱の上端を、写真の上端にそろえる。
     ラベルの高さはどの事例でも同じなので、悩みタイトルの位置も自然にそろう */
  .p-case__body{margin-top:0}
}
@media (max-width:879px){
  /* スマホは 文章 → 写真 の順 */
  .p-case__body{order:1}
  .p-case__media{order:2}
}

/* 写真の横スライド。次の1枚が少しだけ見えて「まだある」と分かるように。
   PCはつかんで左右に動かせる。トラックパッドの横スクロールもそのまま効く */
.p-case__track{
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.p-case__track.is-drag{cursor:grabbing;user-select:none}
.p-case__track.is-drag img{pointer-events:none}
@media (hover:none){.p-case__track{cursor:auto}}
.p-case__track::-webkit-scrollbar{display:none}
.p-case__track > ul{display:flex;gap:clamp(8px,1vw,14px)}
/* 次の1枚がどれだけ見えるか。全事例ここ1か所で決める（10〜15%のあいだ）*/
.p-case__track{--peek:12%}
.p-case__track > ul > li{flex:0 0 calc(100% - var(--peek));scroll-snap-align:start}
.c-img--case{aspect-ratio:3/2}
/* 好み整理の事例だけは、お部屋の写真ではなく資料を並べる。
   資料の端が切れないよう、もとの比率（16:9）のまま全体を見せる */
.p-case--doc .c-img--case{aspect-ratio:16/9;background:var(--surface)}
/* 他の方のお部屋の写真が主になる資料は、枠いっぱいに広げず小さく置く */
.c-img--inset{display:grid;place-items:center;padding:clamp(14px,2.8vw,40px)}
.c-img--inset > img{width:auto;height:100%;max-width:100%;object-fit:contain}

/* 見せ方が違う理由が自然に分かるように、小さくプラン名を出す */
.p-case__plan{
  /* 文章ブロックが縦の flex なので、指定しないと横いっぱいに伸びてしまう */
  display:inline-block;align-self:flex-start;
  margin-bottom:clamp(18px,2.15vw,27px);
  font-family:var(--font-en);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--plan-ink);color:var(--on-dark);border:0;
  border-radius:999px;padding:.55em 1.15em .48em;
}

/* 送りの印は控えめに。線も矢印も小さく */
.p-case__cnav{
  display:flex;align-items:center;
  margin-top:clamp(12px,1.4vw,18px);
}
.p-case__dots{display:flex;align-items:center;gap:.65em}
.p-case__dots i{
  width:5px;height:5px;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb, var(--text) 15%, transparent);
  transition:background-color .25s ease,transform .25s ease;
}
.p-case__dots i.is-on{background:var(--accent);transform:scale(1.25)}

.p-case__head{display:block}
.p-case__theme{
  font-size:clamp(17px,2vw,22px);font-weight:500;
  line-height:1.85;letter-spacing:.04em;color:var(--text);
}
.p-case__title{
  margin-top:.86em;font-size:var(--fs-body);font-weight:500;
  line-height:1.95;letter-spacing:.03em;color:var(--text);
}
.p-case__lead{
  margin-top:.45em;font-size:var(--fs-sm);line-height:1.95;
  color:var(--text-72);max-width:32em;
}
/* 説明のない事例も、1行ぶんの場所だけ取っておく（段数をそろえるため）*/
.p-case__lead:empty{min-height:calc(var(--fs-sm) * 1.95)}
.p-case__meta{
  display:flex;flex-wrap:wrap;gap:.5em .55em;align-items:center;
  margin-top:clamp(15px,1.7vw,22px);
}
/* 事例の分類は、ひとつずつ枠で囲む。つなげて読めてしまうのを防ぐ */
.p-case__meta .p-card__tag{
  font-size:12px;letter-spacing:.08em;line-height:1;
  border:1px solid var(--accent-light);border-radius:999px;padding:.38em .95em;
}
/* 次へ進む導線なので、文章ブロックの中で右に寄せる。
   .c-arrow より後ろに書かれているので、クラスを2つ重ねて上書きする */
.p-case__body .p-case__more{
  display:flex;width:fit-content;margin-inline-start:auto;
  margin-top:clamp(17px,2vw,25px);gap:.55em;font-size:var(--fs-sm);
}
.p-case__more span{width:36px;height:36px}
.p-case__head:hover .p-case__theme{color:var(--brand)}

/* 事例のカード。まず「悩み」、つぎに事例の説明、さいごに小さくタグと日付 */
.p-card--case .p-card__theme{
  margin-top:1.2em;font-size:clamp(15px,1.55vw,17px);font-weight:500;
  line-height:1.85;letter-spacing:.03em;color:var(--text);
}
.p-card--case .p-card__title{
  margin-top:.75em;font-size:var(--fs-sm);font-weight:400;
  line-height:1.95;color:var(--text-72);
}
.p-card--case .p-card__meta{margin:1.1em 0 0}
.p-card--case .p-card__tag{
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:999px;padding:.25em .9em;line-height:1.7;
}
.p-card--case:hover .p-card__theme{color:var(--brand)}
.p-card--case:hover .p-card__title{color:var(--text-72)}

/* --------------------------------------------------------------------------
   トップの導入。中央ぞろえのコピー ＋ 写真3枚を大きさと高さを変えて散らす
   （現行サイトと同じ置き方）
   -------------------------------------------------------------------------- */
.l-sec--lead{padding-block:clamp(66px,8.4vw,116px) clamp(72px,9.4vw,132px)}

/* 左に「赤い帯の見出し＋本文」、右に写真1枚 */
.p-lead{display:grid;gap:clamp(34px,4.4vw,56px);align-items:center}
@media (min-width:820px){
  .p-lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.6vw,92px)}
}
.p-lead__catch{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(7px,.9vw,12px)}
.p-lead__catch span{
  background:var(--accent);color:var(--on-dark);
  padding:clamp(9px,1.05vw,14px) clamp(14px,1.7vw,24px);
  font-size:clamp(16px,1.9vw,21px);font-weight:500;
  line-height:1.5;letter-spacing:.08em;
}
.p-lead__txt{
  margin-top:clamp(24px,3vw,42px);
  font-size:var(--fs-body);line-height:2.15;letter-spacing:.04em;color:var(--text-72);
}
.p-lead__fig{margin:0}
.c-img--lead{aspect-ratio:4/5}
@media (max-width:819px){
  /* 狭い画面では、文章が先。写真は小さく右寄せにして、文字の斜め下に置く */
  .p-lead{gap:clamp(22px,4vw,32px)}
  .p-lead__fig{width:70%;margin-inline-start:auto}
}

/* 文字の横に写真を置くセクション（下層ページで使用）*/
.p-split{display:grid;gap:clamp(26px,3.6vw,44px);align-items:center}
.p-split__body{min-width:0}
.p-split__body > .c-body{max-width:30em}
/* 半分の幅に収まるよう、見出しは少しだけ小さく */
.p-split__body .c-catch{font-size:var(--fs-h2);line-height:1.8}
.p-split__fig{margin:0}
.p-split__fig .c-img{aspect-ratio:4/5}
@media (min-width:900px){
  .p-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,72px)}
  /* 写真を右に */
  .p-split--right .p-split__fig{order:2}
  /* 写真を左に（DOM順のまま）*/
}
/* スマホ・タブレット：写真は小さく、見出しの斜め上に置く */
@media (max-width:899px){
  /* 積んだときは 文字 → 写真。写真は右寄せで小さめ */
  .p-split{grid-template-columns:minmax(0,1fr);gap:0}
  .p-split__body{order:1}
  .p-split__fig{order:2;width:58%;margin-inline-start:auto;
    margin-top:clamp(22px,4vw,34px)}
  .p-split__fig .c-img{aspect-ratio:4/5}
}




/* --------------------------------------------------------------------------
   小見出しに縦線を添える読みもの（ABOUTのOUR ORIGIN）
   -------------------------------------------------------------------------- */
/* 記事以外の文章ページは、小見出しに縦線を添える
   （記事・事例は赤い帯のままなので、body の印で分ける）*/
/* 文章ページの小見出しは、左に細い縦線を添える */
.c-prose h3{
  position:relative;padding-inline-start:clamp(14px,1.4vw,20px);
  line-height:1.75;letter-spacing:.06em;
  margin:var(--doc-h3-top) 0 var(--doc-h3-bot);
}
.c-prose h3:first-child{margin-top:0}
.c-prose h3::before{
  content:"";position:absolute;inset-block:.18em;inset-inline-start:0;
  width:2px;background:var(--brand);
}


/* --------------------------------------------------------------------------
   プランの名前。比較表とお渡しするもので、同じ形にそろえる
   -------------------------------------------------------------------------- */
.c-planhd{display:block}
/* プラン名は、BEFORE / AFTER と同じように塗りつぶして白ヌキに */
.c-planhd__verb{
  display:inline-block;background:var(--plan-ink);
  border:1px solid var(--plan-ink);border-radius:999px;
  padding:.3em 1.1em;font-size:var(--fs-sm);font-weight:500;letter-spacing:.05em;
  line-height:1.6;color:var(--on-dark);white-space:nowrap;
}
.c-planhd__name{
  display:block;margin-top:.8em;
  font-size:var(--fs-h3);font-weight:500;line-height:1.75;letter-spacing:.04em;color:var(--text);
}

/* --------------------------------------------------------------------------
   迷っていませんか（SERVICE）。一覧ではなく、読みものとして
   -------------------------------------------------------------------------- */
/* スマホでだけ改行したいところ */
.u-sp{display:none}
@media (max-width:559px){.u-sp{display:inline}}
/* 画面が広いときだけ入れる改行 */
.u-pc{display:none}
@media (min-width:620px){.u-pc{display:inline}}

/* 悩みの共感が主役の節。見出しの下は、しっかり呼吸をおく */
.p-askset{padding-bottom:clamp(28px,3.4vw,48px)}

/* 文章が主役、写真は雰囲気を支えるだけ。左右を入れ替えて単調にしない */
.p-askblk{display:grid;gap:clamp(24px,3.4vw,40px);align-items:center}
@media (min-width:820px){
  /* 文章の列を広く、写真の列を狭く。左右を入れ替えるときは列幅も入れ替える */
  .p-askblk{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(40px,5vw,80px)}
  .p-askblk--rev{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
  .p-askblk--rev .p-askblk__body{order:2}
  .p-askblk--rev .p-askblk__fig{order:1}
  /* 文字数の少ない1つ目は、少しだけ内側に寄せて重心をとる */
  .p-askblk:first-child .p-askblk__body{padding-inline-start:clamp(20px,4.4vw,64px)}
  .p-askblk__fig{max-width:390px;justify-self:end}
  .p-askblk--rev .p-askblk__fig{justify-self:start}
}
.p-askblk + .p-askblk{margin-top:clamp(60px,7.4vw,116px)}
.p-askblk__fig{margin:0}
.p-askblk__fig .c-img{aspect-ratio:4/3}
.p-askblk:first-child .p-askblk__fig .c-img{aspect-ratio:3/2}
.p-askblk__body > p{margin:0}
.p-askblk__big{
  font-size:clamp(17px,2.4vw,22px);font-weight:400;line-height:2.05;letter-spacing:.05em;
}
.p-askblk__sm{
  margin-top:1.2em;font-size:var(--fs-body);line-height:2.15;letter-spacing:.04em;
  color:var(--text-72);text-wrap:pretty;
}
/* 気づきのポイント。細い線ではさんで、ここだけ少し立ち止まれるように */
.p-askset__mark{
  margin-top:clamp(80px,9vw,134px);margin-inline:auto;
  max-width:44em;text-align:center;
  padding:clamp(40px,4.8vw,66px) clamp(22px,3vw,40px);
  background:color-mix(in srgb, var(--value-bg) 32%, transparent);
  font-size:clamp(15px,1.9vw,18px);line-height:2.1;letter-spacing:.05em;
  color:var(--text);
}
.p-askset__mark::before,
.p-askset__mark::after{
  content:"";display:block;width:42px;height:1px;
  background:var(--rule);margin-inline:auto;
}
.p-askset__mark::before{margin-bottom:clamp(20px,2.4vw,32px)}
.p-askset__mark::after{margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:819px){
  /* スマホは 写真 → 文章 の順。写真は画面の端まで寄せて、左右交互に */
  /* 内側の余白ぶんと、l-wrap の外側 2vw ぶんを戻して、画面の端にぴったり付ける */
  .p-askblk__fig{order:1;width:91%;
    margin-inline:calc(-1 * var(--gutter) - 2vw) auto}
  .p-askblk__body{order:2}
  .p-askblk--rev .p-askblk__fig{margin-inline:auto calc(-1 * var(--gutter) - 2vw)}
  /* 余白と字の大きさは、スマホで実機を見ながら決めたもの */
  .l-sec--ask .c-head{margin-bottom:60px}
  .p-askblk{gap:42px}
  .p-askblk + .p-askblk{margin-top:52px}
  .p-askblk__big{font-size:17.5px;line-height:1.9}
  /* .p-askblk__body > p{margin:0} より強い書き方にしないと効かない */
  .p-askblk__body > .p-askblk__sm{margin-top:10px;font-size:12.5px}
  /* PCのために入れた改行は、スマホでは消して折り返しに任せる */
  .p-askblk__big br,
  .p-askblk__sm br{display:none}
}

/* --------------------------------------------------------------------------
   セッション側の資料。小さく3枚、ラベルを添えて
   -------------------------------------------------------------------------- */
/* セッションの資料。フルサポートと同じ横3枚だが、全体を細くして軽く見せる */
.p-planblk__shots--sm figure{margin:0}
.p-planblk__shots--sm .cap{
  display:block;margin-top:.7em;
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-52);line-height:1.6;
}
.p-planblk__note{
  margin-top:clamp(16px,1.8vw,24px);
  font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);
  max-width:34em;margin-inline:auto;
}

/* --------------------------------------------------------------------------
   整理していくこと（SERVICE）。5枚を同じ強さで並べない
   -------------------------------------------------------------------------- */
.p-find2{display:grid;gap:clamp(26px,3.4vw,44px);margin-top:clamp(34px,4.2vw,60px)}
.p-find2__sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px)}
@media (min-width:880px){
  .p-find2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:clamp(40px,5vw,86px);align-items:start}
  /* 右の4枚は、少し下げて置く。そろえないことで誌面らしく */
  .p-find2__sub{margin-top:clamp(40px,5.4vw,92px)}
}
.p-find2__item{margin:0}
.p-find2__cap{margin-top:.9em;line-height:1.7}
.p-find2__cap .en{
  display:block;font-family:var(--font-en);font-size:var(--fs-en-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--find-ink);
}
.p-find2__cap .jp{display:block;font-size:var(--fs-sm);color:var(--text-72);margin-top:.25em}
.p-find2__lead .p-find2__cap .en{font-size:var(--fs-en-mid);letter-spacing:.1em;text-transform:none}


/* --------------------------------------------------------------------------
   整理していくこと（SERVICE）。主役は5つの視点。資料は添えるだけ
   -------------------------------------------------------------------------- */
/* 右に並ぶのが実際の資料であることを、小さく添える */
.p-find3__note{
  max-width:46em;margin:clamp(30px,3.6vw,48px) auto 0;text-align:end;
  font-size:var(--fs-en-label);letter-spacing:.08em;color:var(--text-52);line-height:1.8;
}
.p-find3__note + .p-find3{margin-top:.9em}
.p-find3{
  margin-top:clamp(34px,4.2vw,56px);
  border-top:1px solid color-mix(in srgb, var(--find-ink) 26%, transparent);
  max-width:46em;margin-inline:auto;
}
.p-find3 > li{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(100px,22vw,170px);
  gap:clamp(18px,3vw,56px);
  padding-block:clamp(20px,2.4vw,32px);
  border-bottom:1px solid color-mix(in srgb, var(--find-ink) 16%, transparent);
}
.p-find3 .en{
  font-family:var(--font-en);font-weight:300;
  font-size:var(--fs-en-mid);letter-spacing:.1em;line-height:1.35;color:var(--find-ink);
}
.p-find3 .jp{margin-top:.55em;font-size:var(--fs-sm);color:var(--text-72);line-height:1.8}
.p-find3__shot{width:100%}
/* スマホでは横並びをやめて、資料を幅いっぱいに。
   100px のままだと中身が読めず、空の枠のように見えるため */
@media (max-width:639px){
  .p-find3 > li{grid-template-columns:minmax(0,1fr);gap:clamp(14px,3.4vw,20px)}
  .p-find3__shot{width:100%}
}

/* 他のお宅の写真は、参考として見える程度に。大きく出すときはぼかす */

/* --------------------------------------------------------------------------
   お客さまの言葉を主役にした、相談の前と、あと（VOICE）
   -------------------------------------------------------------------------- */
.p-vstory{max-width:54em;margin-inline:auto;text-align:start}
/* BEFORE / AFTER は、赤く塗りつぶして白ヌキに（お名前の行と同じ考え方）*/
.p-vstory__label{
  display:inline-block;
  background:var(--voice-ink);border:1px solid var(--voice-ink);
  border-radius:999px;padding:.45em 1.5em .4em;
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark);line-height:1.6;
}
.p-vstory__sm{
  margin-top:.7em;font-size:var(--fs-sm);line-height:2.05;letter-spacing:.04em;
  color:var(--text-72);
}
.p-vstory__arrow{
  display:block;font-family:var(--font-en);font-size:18px;line-height:1;
  color:var(--voice-ink);margin-block:clamp(15px,1.7vw,22px);
  padding-inline-start:.15em;
}
.p-vstory__quote{margin:0}
.p-vstory__quote p{
  /* お客さまの言葉は、TOPの引用（.c-col__pull）と同じ太さでそろえる */
  font-size:clamp(17px,2.6vw,29px);font-weight:500;line-height:1.95;letter-spacing:.05em;
}
.p-vstory__quote cite{
  display:block;margin-top:1.15em;font-style:normal;
  font-size:var(--fs-en-label);letter-spacing:.1em;color:var(--text-52);line-height:1.8;
}
.p-vstory__after .p-vstory__sm{color:var(--text)}
/* 下の一覧と「すべて読む」も、引用ブロックと左右をそろえる */
/* 細かい情報なので、本文ブロックより少し内側に置く */
.p-vstory ~ .c-voicelist,
.p-vstory ~ .u-right{max-width:50em;margin-inline:auto}

/* --------------------------------------------------------------------------
   2つのプラン（SERVICE）。同じ形にそろえず、進む距離のちがいを見せる
     A＝セッション ：文章だけ。細く、中央に
     B＝フルサポート：3つの言葉と資料の写真を足して、幅も情報量も多く
   -------------------------------------------------------------------------- */
/* 2つのプランは、それぞれ独立した大きな面。囲み枠も角丸も使わない */
.p-planblk{
  background:var(--plan-panel);
  text-align:center;margin-inline:auto;
  padding:clamp(52px,6vw,88px) clamp(26px,4.2vw,76px);
}
.p-planblk + .p-planblk{margin-top:clamp(44px,5.4vw,80px)}
/* スマホは、水色の地と枠の内側をどちらも詰めて、文章の幅をかせぐ */
@media (max-width:819px){
  .l-sec--warm .l-wrap{padding-inline:7px}
  .p-planblk{padding-inline:24px;padding-block:58px}
}
/* 2つのプランは同じ幅・同じ組み方。ちがうのは中身の量だけ */
.p-planblk--a,
.p-planblk--b{max-width:70em}
.p-planblk__lead,
.p-planblk__body{max-width:36em;margin-inline:auto}
.p-planblk__en{
  font-family:var(--font-en);font-weight:300;
  font-size:var(--fs-en-mid);letter-spacing:.1em;line-height:1.35;color:var(--plan-ink);
}
.p-planblk__verb{
  display:inline-block;margin-top:1.5em;border-radius:999px;
  padding:.45em 1.5em;font-size:var(--fs-sm);font-weight:500;letter-spacing:.06em;line-height:1.7;
}
/* トップのプラン列（.c-col__verb--solid）と同じ、塗りつぶしの白ヌキにそろえる */
.p-planblk__verb--light,
.p-planblk__verb--solid{
  background:var(--plan-ink);border:1px solid var(--plan-ink);color:var(--on-dark);
}
.p-planblk__goal{
  margin-top:clamp(32px,3.6vw,50px);
  font-size:clamp(20px,2.6vw,30px);font-weight:500;line-height:1.8;letter-spacing:.05em;
}
.p-planblk__lead{
  margin-top:1.7em;font-size:var(--fs-body);line-height:2;color:var(--text);
}
.p-planblk__body{
  margin-top:1.6em;font-size:var(--fs-sm);line-height:2;color:var(--text-72);
}
/* 残す・足す・変える。フルサポートだけの3語 */
.p-planblk__three{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.6vw,24px);margin-top:clamp(34px,3.8vw,52px);
}
.p-planblk__three li{
  /* プランの面（--plan-panel）とほぼ同じ色だと枠が見えないので、白に近い面を使う */
  background:var(--surface);color:var(--plan-ink);
  padding:clamp(14px,1.6vw,20px) clamp(20px,2.4vw,32px);
  font-size:clamp(15px,1.7vw,19px);font-weight:500;letter-spacing:.06em;line-height:1.6;
}
/* 資料の写真 */
.p-planblk__shots{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(38px,4.2vw,58px);
}
@media (max-width:619px){
  /* スマホで3枚並べると小さすぎるので、横にスライドして見せる */
  .p-planblk__shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .p-planblk__shots > *{flex:0 0 74%;scroll-snap-align:start}
}
.p-planblk__price{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.4em .9em;margin-top:clamp(40px,4.6vw,64px);
}
.p-planblk__price .nm{font-size:var(--fs-sm);color:var(--text-72);width:100%}
.p-planblk__price .c-num{font-size:var(--fs-en-mid);font-weight:300;color:var(--plan-ink)}
.p-planblk__price .tax{font-size:var(--fs-en-label);color:var(--text-52)}
.p-planblk__foot{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,32px)}

.p-docshot{display:block}
.p-docshot__cap{margin-top:.9em;font-size:var(--fs-en-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-52)}
.p-docshot__jp{font-size:var(--fs-sm);color:var(--text-72);line-height:1.8}

/* --------------------------------------------------------------------------
   実際にお渡しするもの（SERVICE）
   -------------------------------------------------------------------------- */
.p-deliver{margin-top:clamp(56px,6.4vw,96px);
  padding-top:clamp(40px,4.6vw,64px);
  border-top:1px solid color-mix(in srgb, var(--find-ink) 24%, transparent)}
/* 単独のセクションとして置くときは、線も上の余白もいらない */
.p-deliver--sec{margin-top:0;padding-top:0;border-top:0}
.p-deliver--sec .p-deliver__h{color:var(--text)}
.p-deliver__h{text-align:center;color:var(--find-ink)}
.p-deliver__grid{display:grid;gap:clamp(40px,4.6vw,68px);margin-top:clamp(38px,4.4vw,60px)}
.p-deliver__grid--ruled{
  --col-rule:color-mix(in srgb, var(--plan-ink) 22%, transparent);
  border-block:1px solid var(--col-rule);
  padding-block:clamp(38px,4.4vw,62px);
}
@media (min-width:880px){
  /* 成果物を見比べる場所なので、左右の面積をそろえる。
     写真のかたまりを下にそろえると、上の見出しも自然に並ぶ */
  .p-deliver__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;align-items:stretch}
  /* トップのプランと同じ、赤みのある細い線で仕切る */
  .p-deliver__grid--ruled > .p-deliver__col{padding-inline:clamp(28px,3.8vw,58px)}
  .p-deliver__grid--ruled > .p-deliver__col:first-child{padding-inline-start:0}
  .p-deliver__grid--ruled > .p-deliver__col:last-child{padding-inline-end:0;
    border-inline-start:1px solid var(--col-rule)}
  .p-deliver__col{display:flex;flex-direction:column}
  /* 縦積みの中身も、横方向は中央にそろえる */
  .p-deliver__col > *{align-self:center}
  .p-deliver__col .p-deliver__shots{align-self:stretch;
    margin-top:auto;padding-top:clamp(22px,2.6vw,34px)}
}
.p-deliver__name{font-size:var(--fs-h3);font-weight:500;line-height:1.8;
  letter-spacing:.04em;margin-bottom:1em}
/* 左右に2つの柱が並ぶので、中身も中央にそろえる */
.p-deliver__col{text-align:center}
.p-deliver__col .c-planhd{display:block;margin-bottom:clamp(22px,2.6vw,32px)}
.p-deliver__col .c-small{max-width:30em;margin-inline:auto}
.p-deliver__col .c-marks{max-width:none;display:inline-block;text-align:start}
.p-deliver__shots{display:grid;gap:clamp(10px,1.4vw,18px);margin-top:clamp(22px,2.6vw,34px);
  max-width:82%;margin-inline:auto}
@media (min-width:560px){.p-deliver__shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.p-deliver__shots--one{grid-template-columns:minmax(0,1fr)!important;max-width:85%}

/* --------------------------------------------------------------------------
   相談の前と、あと（VOICE）。枠で囲わず、言葉そのものを見せる
   -------------------------------------------------------------------------- */
.p-ba{display:grid;gap:clamp(22px,3vw,36px);align-items:center;
  max-width:52em;margin-inline:auto}
@media (min-width:720px){
  .p-ba{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:clamp(24px,3.4vw,52px)}
}
.p-ba__label{
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:1.1em;
}
.p-ba__col li{font-size:var(--fs-body);line-height:2;letter-spacing:.03em}
.p-ba__col li + li{margin-top:.5em}
.p-ba__col--before{color:var(--text-52)}
.p-ba__col--before .p-ba__label{color:var(--text-52)}
.p-ba__col--after{font-weight:500}
.p-ba__col--after .p-ba__label{color:var(--voice-ink)}
.p-ba__arrow{
  font-family:var(--font-en);font-size:20px;color:var(--voice-ink);
  justify-self:center;line-height:1;
}
@media (max-width:719px){
  .p-ba__arrow{transform:rotate(90deg)}
}

/* --------------------------------------------------------------------------
   19. 線で仕切った2カラム（プラン／お客さまの声で共通）
        柔らかいベージュの地に、線と赤系ひと色だけ。
        2つのプランの差は「色」ではなく「塗りの重さ」で出す
        （線だけのボタン ／ 塗りつぶしのボタン）
   -------------------------------------------------------------------------- */
.l-sec--warm{background:var(--bg-warm);color:var(--text);
  padding-top:calc(var(--sec) * 1.25)}
/* 章のあいだに挟む水色の面は、上の余白をふつうに戻す */
.l-sec--warm.l-sec--tight{padding-top:var(--sec)}
.l-sec--warm .c-en{color:var(--plan-ink)}

.c-cols{
  --col-rule:color-mix(in srgb, var(--plan-ink) 22%, transparent);
  display:grid;border-block:1px solid var(--col-rule);
}
@media (min-width:880px){
  .c-cols{grid-template-columns:1fr 1fr;border-inline-end:1px solid var(--col-rule)}
  .c-cols > li{border-inline-start:1px solid var(--col-rule)}
}
@media (max-width:879px){
  /* 縦に積むときは、列と列のあいだをあけられるようにしておく */
  .c-cols{gap:var(--col-split)}
  .c-cols > li + li{border-block-start:1px solid var(--col-rule)}
}

.c-col{
  position:relative;display:flex;flex-direction:column;
  padding:var(--col-pt) clamp(28px,3.8vw,58px) var(--col-pb);
}
/* 左端の縦組みラベル（縦組みなので物理プロパティで置く） */
.c-col__side{
  position:absolute;top:clamp(30px,3.6vw,46px);left:clamp(8px,1.2vw,16px);
  writing-mode:vertical-rl;
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--plan-ink);opacity:.5;
}

/* 頭：中央ぞろえ */
.c-col__head{text-align:center;padding-inline:clamp(4px,1.4vw,20px)}
.c-col__en{
  font-family:var(--font-en);font-weight:300;
  font-size:var(--fs-en-mid);letter-spacing:.1em;line-height:1.35;color:var(--plan-ink);
}
/* 動詞のラベルはボタンの形にする。01は線だけ、02は塗りつぶし */
.c-col__verb{
  display:inline-block;margin-top:1.3em;border-radius:999px;
  padding:.45em 1.5em;font-size:var(--fs-sm);font-weight:500;letter-spacing:.06em;line-height:1.7;
}
/* 背景色つきの、丸みのある箱 */
.c-col__verb--light{border:1px solid var(--plan-ink);color:var(--plan-ink)}
.c-col__verb--solid{background:var(--plan-ink);color:var(--on-dark);border:1px solid var(--plan-ink)}
.c-col__dash{display:block;width:34px;height:1px;background:var(--col-rule);margin:2.8em auto 3.1em}
.c-col__name{font-size:clamp(19px,2vw,23px);font-weight:500;line-height:1.85;letter-spacing:.04em}
/* プランの説明は読ませるところなので黒。赤は英字・料金・ボタンだけにする */
.c-col__lead{margin-top:1.3em;font-size:var(--fs-body);line-height:1.9;color:var(--text);
  max-width:24em;margin-inline:auto}

/* 中身：左ぞろえに戻す */
.c-col__detail{display:flex;flex-direction:column;flex:1;margin-top:var(--col-gap-head)}
/* 頭は中央ぞろえなので、中身も列の幅いっぱいに置いて中心をそろえる */
.c-col__body{font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:none}

.c-col__inc{margin-top:1.8em;border-top:1px solid var(--col-rule)}
/* 料金のすぐ下に来るときは、線と文字がくっつかないように上下をひろげる */
.p-price .c-col__inc li{padding-block:clamp(14px,1.6vw,20px)}
.c-col__inc li{
  max-width:30em;padding:.9em 0 .9em 1.2em;border-bottom:1px solid var(--col-rule);position:relative;
  font-size:var(--fs-sm);line-height:1.9;color:var(--text-72);
}
/* 最後の項目の線と、料金の枠の線が重なるので消す */
.c-col__inc li:last-child{border-bottom:0}
.c-col__inc li::before{content:"—";position:absolute;left:0;color:var(--plan-ink);opacity:.6}

/* 料金の下に置く注釈。説明文より一段小さく、静かに */
.p-planblk__fine{
  margin-top:1.1em;font-size:11.5px;line-height:1.85;letter-spacing:.02em;
  color:var(--text-52);
}
.p-price__fine{
  max-width:var(--txt-short);margin:clamp(26px,3vw,38px) auto 0;
  font-size:12px;line-height:1.9;letter-spacing:.02em;color:var(--text-52);
}
.c-col__fine{
  margin-top:1.4em;font-size:11.5px;line-height:1.85;letter-spacing:.02em;
  color:color-mix(in srgb, var(--plan-ink) 62%, transparent);
}
.c-col__price{
  margin-top:var(--col-gap-price);padding:clamp(20px,2.6vw,30px);
  background:var(--price-bg);
}
.c-col__row + .c-col__row{margin-top:1.1em;padding-top:1.1em;
  border-top:1px solid color-mix(in srgb, var(--plan-ink) 18%, transparent)}
.c-col__label{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-72);margin-bottom:.35em}
.c-col__value{font-family:var(--font-en);font-size:var(--fs-en-mid);font-weight:300;
  letter-spacing:.02em;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--plan-ink)}
.c-col__value .tax{font-family:var(--font-jp);font-size:var(--fs-en-label);color:var(--text-52);
  margin-left:.6em;letter-spacing:var(--ls-jp)}
.c-col__note{font-size:var(--fs-sm);line-height:1.85;color:var(--text-72);margin-top:.35em}

/* プランのリンク。サイトのほかの導線と同じ丸矢印にそろえる */
.c-col__foot{margin-top:auto;padding-top:var(--col-gap-foot);display:flex}
@media (max-width:879px){
  /* 縦に積むときは右に置く */
  .c-col__foot{justify-content:flex-end}
}
.l-sec--warm .c-arrow{color:var(--plan-ink)}
.l-sec--warm .c-arrow span{border-color:color-mix(in srgb, var(--plan-ink) 40%, transparent)}
.l-sec--warm .c-arrow:hover span{background:var(--plan-ink);color:var(--bg-warm);
  border-color:var(--plan-ink)}

/* 下のボタンも、同じ「線だけ／塗りつぶし」の対で */
.c-col__btn{
  margin-top:auto;align-self:flex-start;margin-block-start:2.4em;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.08em;
  padding:.95em 2.1em;border-radius:999px;
  transition:background-color .2s ease,color .2s ease;
}
.c-col__btn--light{border:1px solid var(--plan-ink);color:var(--plan-ink)}
.c-col__btn--light:hover{background:var(--plan-ink);color:var(--bg-warm)}
.c-col__btn--solid{background:var(--plan-ink);color:var(--bg-warm);border:1px solid var(--plan-ink)}
.c-col__btn--solid:hover{background:transparent;color:var(--plan-ink)}

/* --------------------------------------------------------------------------
   お客さまの声（1件につき、引用ひとつだけ。4件を線で仕切って並べる）
   -------------------------------------------------------------------------- */
.c-says{
  --say-rule:color-mix(in srgb, var(--text) 20%, transparent);
  display:grid;border-block:1px solid var(--say-rule);
}
@media (min-width:820px){
  .c-says{grid-template-columns:1fr 1fr;border-inline-end:1px solid var(--say-rule)}
  .c-says > li{border-inline-start:1px solid var(--say-rule)}
  .c-says > li:nth-child(n+3){border-block-start:1px solid var(--say-rule)}
}
@media (max-width:819px){
  .c-says > li + li{border-block-start:1px solid var(--say-rule)}
}
.c-say{
  display:flex;flex-direction:column;
  padding:clamp(30px,3.6vw,54px) clamp(22px,2.8vw,42px);
}
.c-say__label{
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.2em;
  text-transform:uppercase;line-height:1.7;color:var(--accent);
}
/* このブロックで大きい文字はここだけ。カギカッコは版面の外へ出す */
.c-say__quote{
  flex:1;margin-top:1.5em;
  font-size:clamp(17px,2vw,21px);font-weight:400;line-height:1.9;letter-spacing:.04em;
  text-indent:-.55em;
}
.c-say__who{
  margin-top:2em;padding-top:1.35em;border-top:1px solid var(--say-rule);
  font-size:var(--fs-sm);line-height:1.85;color:var(--text-72);
}

/* --------------------------------------------------------------------------
   20. 左に見出し、右にカード。あいだを1本の線で仕切る
        （事例紹介 と 読みもの で共通）
   -------------------------------------------------------------------------- */
.p-feature{display:grid;gap:clamp(34px,4vw,52px);grid-template-columns:minmax(0,1fr)}
/* 横スライドが中にあるので、列がふくらまないように止める */
.p-feature > *{min-width:0}
@media (min-width:940px){
  .p-feature{grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:0}
  .p-feature__body{padding-inline-start:clamp(48px,5.4vw,88px)}
  .l-sec--brand .p-feature__body{border-inline-start:0}
  .p-feature__head{padding-inline-end:clamp(40px,4.6vw,76px)}
}
.p-feature__en{
  color:var(--feature-ink);
  font-family:var(--font-en);font-weight:300;
  font-size:clamp(32px,4.8vw,56px);letter-spacing:.06em;line-height:1.28;
}
.p-feature__jp{margin-top:1.7em;font-size:var(--fs-h3);font-weight:500;letter-spacing:.04em}
.p-feature__head .c-body{margin-top:2.4em;font-size:var(--fs-sm);line-height:2.05;color:var(--text-72)}
.p-feature__foot{
  display:flex;justify-content:flex-end;align-items:center;
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--rule-soft);
}

/* 丸い矢印つきのリンク */
.c-arrow{display:inline-flex;align-items:center;gap:1em;align-self:flex-start;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.08em;color:var(--text)}
.c-arrow span{
  display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--rule);font-family:var(--font-en);font-size:var(--fs-sm);line-height:1;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.c-arrow:hover span{background:var(--text);color:var(--bg);border-color:var(--text)}
/* 同じページの中へ飛ぶリンク。矢印を下向きにして、外部リンクと区別する */
.c-arrow--down span{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.c-arrow--down:hover span{transform:translateY(3px)}

/* 罫線を使わない形。見出しと中身は余白だけで分ける */

/* 見出しは中央に置き、中身はその下に1カラムで置く（上下に読ませる形）*/
.p-feature--sec .p-feature__head{text-align:center}
/* 情報が少ないセクションは、中央に集める */
.p-feature__body--narrow{width:100%;max-width:var(--sec-narrow);margin-inline:auto;
  --inset:max(0px, (100% - var(--txt-narrow)) / 2)}
.p-feature__body--narrow .c-acc > details > summary{padding-inline:var(--inset)}
.p-feature__body--narrow .c-acc__body{padding-inline:var(--inset)}
.p-feature--sec .p-feature__head .c-body,
.p-feature--sec .p-feature__head .c-small{max-width:44em;margin-inline:auto}
@media (min-width:940px){
  .p-feature--sec{display:block}
  .p-feature--sec .p-feature__head{padding-inline:0;
    margin-bottom:var(--sec-head-gap)}
  .p-feature--sec .p-feature__body{padding-inline-start:0}
  /* （お申し込みの面は .p-cta に作り直したので、ここでの2カラム指定はやめた）*/
  /* 文章のあいだに置く写真も、本文と同じ幅にそろえる */
  .p-feature--sec .p-feature__body > figure{max-width:var(--measure-sec);margin-inline:auto}
  /* 文章は中央に寄せて置く。表・カード・一覧は器の幅いっぱい */
  .p-feature--sec .p-feature__body > .c-body,
  .p-feature--sec .p-feature__body > .c-small,
  .p-feature--sec .p-feature__body > .c-prose{max-width:var(--measure-sec);margin-inline:auto}
  /* お申し込みは2カラムなので、列の幅いっぱいに置く */
  .p-feature--cta .p-feature__body > .c-body{max-width:none;margin-inline:0}
}

/* ---- 下層ページのセクション。見出しは左、中身は右。大きな欧文は使わない ---- */
.p-feature--sec .p-feature__head .c-en{margin-bottom:1em}
.p-feature--sec .p-feature__head .c-en:only-child{margin-bottom:0}
/* 見出しの列は幅が決まっているので、1文字だけ折り返さないよう少し小さく */
.p-feature--sec .p-feature__head .c-h2{font-size:var(--sec-jp-label);line-height:1.9}
.p-feature--sec .p-feature__head .c-body,
.p-feature--sec .p-feature__head .c-small{margin-top:1.4em;font-size:var(--fs-sm);
  line-height:1.95;color:var(--text-72)}
@media (min-width:940px){
  /* 中身が上端からそろうように、見出し側の余白をあわせる */
  .p-feature--sec .p-feature__body > *:first-child{margin-top:0}
}

/* 記事・事例は読ませるページなので、本文だけ14pxにする */
/* 長文を読ませるところ（記事・事例・特商法・プライバシー・相談室のこと）は
   本文を1段大きく。サイト全体でこの1か所だけで決める */
.is-article .c-prose p,
.is-article .c-prose li,
.is-article .c-prose dd,
.c-prose--legal p,
.c-prose--legal li,
.c-prose--legal dd,
.c-prose--bar p,
.c-prose--bar li{font-size:14px}

/* ---- ABOUTの導入。左に縦長の写真、右に見出しと本文 ---- */
.p-intro{display:grid;gap:clamp(26px,3.6vw,40px)}
@media (min-width:820px){
  .p-intro{grid-template-columns:minmax(0,var(--intro-fig)) minmax(0,1fr);
    gap:var(--intro-gap);align-items:center}
  /* 写真を右に置く形（列の幅も入れ替える）*/
  .p-intro--right{grid-template-columns:minmax(0,1fr) minmax(0,var(--intro-fig))}
  .p-intro--right .p-intro__fig{order:2}
}
.p-intro__fig{margin:0}
.p-intro__fig .c-img{aspect-ratio:var(--intro-ratio)}
/* ページごとの差。写真の大きさと形を少しずつ変える */
.p-intro--lg{--intro-fig:420px}
.p-intro--sm{--intro-fig:280px}
/* 基準（--intro-fig）と同じなので、いまは指定なし。
   プラン詳細だけ変えたくなったら、ここで上書きする */
.p-intro--plan{}
.p-intro--sq{--intro-ratio:1 / 1}
/* 写真を置かない導入。1カラムで中央にそろえる（お申し込み・お問い合わせ）。
   .p-intro{display:grid} より後に書くこと */
.p-intro--solo{display:block;text-align:center}
/* ページの顔になる見出しなので、導入の中では大きく置く */
.p-intro--solo .p-intro__catch{
  margin-top:0;
  font-size:var(--fs-catch);line-height:var(--lh-catch);letter-spacing:var(--ls-catch);
}
.p-intro--solo .p-introlead{
  max-width:44em;margin-inline:auto;
  margin-top:clamp(34px,4.2vw,58px);
}
/* フォームへ進むリンクは、本文からしっかり離して独立させる */
.p-intro--solo .p-pagehead__jump{margin-top:clamp(48px,5.6vw,82px)}
.p-intro--tall{--intro-ratio:2 / 3}
.p-intro--soft{--intro-ratio:4 / 5}
/* サービスの導入は、ページの主役なのでキャッチを一回り大きく */
.p-intro--hero{--intro-catch:clamp(19px,1.95vw,28px)}
.p-intro__catch{
  font-size:var(--intro-catch);font-weight:500;
  line-height:var(--intro-catch-lh);letter-spacing:var(--intro-catch-ls);
  margin-top:var(--intro-gap-catch);
}
.p-intro__body .p-aboutlead,
.p-intro__body .p-introlead{margin-top:var(--intro-gap-body)}
@media (max-width:819px){
  /* 縦に積むときは、かならず文字が上。写真は右寄せで小さめに置く
     （このサイトの決まり：2カラムを積んだら 文字 → 写真 の順）*/
  .p-intro__fig{order:2;width:58%;margin-inline-start:auto;
    margin-top:clamp(22px,4vw,34px)}
  /* プラン詳細の冒頭だけ、導入コピーとひとまとまりに見えるよう
     少し大きく、中央に置く（画面幅の6割ほど）*/
  .p-intro--plan .p-intro__fig{width:70%;margin-inline:auto}
}

/* ---- ABOUTの導入の本文 ---- */
/* 左寄せのまま、かたまりをページの中央に置く */
.p-aboutlead,
.p-introlead{
  font-size:var(--aboutlead-size);
  max-width:none;   /* 列の幅にまかせる */
}
.p-aboutlead p,
.p-introlead p{text-wrap:pretty;font-size:inherit;font-weight:400;line-height:var(--aboutlead-lh);letter-spacing:.05em}
/* 導入に添える小さな補足は、本文より一段小さく・薄く */
.p-introlead p.c-note{font-size:var(--fs-sm);line-height:1.95;color:var(--text-52)}
.p-aboutlead p + p,
.p-introlead p + p{margin-top:var(--aboutlead-gap)}

/* 顔写真はアーチ（上だけ半円）。幅は --team-fig でそろえる */
.c-img--arch{border-radius:999px 999px 0 0;aspect-ratio:3/4;max-width:var(--team-fig)}

/* 読みものへの小さな導線 */
.p-jlink{display:flex;flex-direction:column;align-items:center;gap:1.1em;text-align:center}
.p-jlink .c-arrow{align-self:center}
.p-jlink .c-small{margin:0}
/* 本文を読み終えたあとの、余韻としての導線。右寄せで小さく */
.p-jlink--right{
  align-items:flex-end;text-align:right;gap:.9em;
  max-width:var(--measure-sec);margin-inline:auto;
  margin-top:clamp(66px,7.4vw,116px);
  padding-top:clamp(28px,3.2vw,44px);
  border-top:1px solid color-mix(in srgb, var(--border) 12%, transparent);
}
.p-jlink--right .c-arrow{align-self:flex-end}
.p-jlink--right .c-small{max-width:32em}

/* ---- 相談室の3人。線で仕切った3カラム ---- */
.c-team{display:grid;gap:clamp(34px,4vw,48px)}
@media (min-width:760px){
  /* 3列の中身の幅をそろえる：どの列も左右の余白の合計を同じにする */
  .c-team{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .c-team__item{padding-inline:clamp(18px,2.2vw,32px)}
  .c-team__item:first-child{padding-inline:0 clamp(36px,4.4vw,64px)}
  .c-team__item:last-child{padding-inline:clamp(36px,4.4vw,64px) 0}
  .c-team__item + .c-team__item{border-inline-start:1px solid var(--rule-soft)}
}
.c-team__item{display:flex;flex-direction:column}
/* 1人のときは、写真を左に、文章を右に */
@media (min-width:620px){
  .c-team--one{grid-template-columns:minmax(0,1fr);
    max-width:calc(var(--team-fig) + 580px);margin-inline:auto}
  .c-team--one .c-team__item{display:grid;align-items:start;
    grid-template-columns:minmax(0,var(--team-fig)) minmax(0,1fr);
    gap:0 clamp(28px,3.8vw,60px);padding-inline:0;border:0}
  .c-team--one .c-team__item > .c-img{grid-column:1;grid-row:1 / span 20}
  .c-team--one .c-team__item > p{grid-column:2}
  .c-team--one .c-team__en{margin-top:0}
}
.c-team__item .c-img{max-width:none}
/* プロフィールの下に置く、ほかの発信先 */
.c-team__media{margin-top:2.4em;padding-top:1.7em;border-top:1px solid var(--rule-soft)}
.c-team__medialb{
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);line-height:1.6;
}
.c-team__media ul{list-style:none;margin:1.1em 0 0;padding:0}
.c-team__media li + li{margin-top:.95em}
.c-team__media a{font-size:var(--fs-sm);color:var(--brand);
  border-bottom:1px solid var(--accent-light);transition:border-color .2s ease}
.c-team__media a:hover{border-bottom-color:var(--brand)}
.c-team__media span{display:block;margin-top:.3em;
  font-size:var(--fs-sm);color:var(--text-52);line-height:1.9}
@media (min-width:620px){
  .c-team--one .c-team__item > .c-team__media{grid-column:2}
}
@media (max-width:619px){
  .c-team__media{order:6;text-align:left}
}
@media (max-width:619px){
  /* スマホは 写真 → 名前 → 経歴。写真と名前は中央に置く */
  .c-team--one .c-team__item{text-align:center}
  .c-team__item > .c-img{order:1;width:56%;margin-inline:auto;
    margin-bottom:clamp(22px,5vw,32px)}
  .c-team__en{order:2;margin-top:0}
  .c-team__jp{order:3}
  .c-team__role{order:4}
  .c-team__bio{order:5;text-align:left}
}
.c-team__en{margin-top:1.6em;font-family:var(--font-en);font-size:var(--fs-en-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.c-team__jp{margin-top:.7em;font-size:var(--fs-h3);font-weight:500;letter-spacing:.06em;line-height:1.6}
.c-team__role{margin-top:1em;padding-top:.9em;border-top:1px solid var(--rule-soft);
  font-size:14.5px;font-weight:500;line-height:1.85;color:var(--accent)}
.c-team__bio{margin-top:1.1em;font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:none}
.c-team__bio + .c-team__bio{margin-top:1em}

/* ---- 大切にしていること。線で仕切った2×2 ---- */
/* 4つを、うすいベージュの面で囲む */
.c-values{display:grid;gap:clamp(16px,2vw,24px)}
.c-values__item{background:var(--value-bg);padding:clamp(24px,3vw,38px)}
@media (min-width:820px){
  .c-values{grid-template-columns:1fr 1fr}
}
.c-values__en{font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.c-values__jp{font-size:var(--fs-h3);font-weight:500;line-height:1.8;letter-spacing:.04em}
.c-values__body{margin-top:1em;font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:30em}
.c-values__body + .c-values__body{margin-top:.9em}

/* 本文の下に、線を引いてリンクを右に置く（トップの申し込みと同じ考え方）*/
.c-linkfoot{display:flex;justify-content:flex-end;
  margin-top:clamp(26px,3.2vw,42px);padding-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--rule-soft)}

/* 本文のおわりに置くお名前 */
.c-sign{margin-top:clamp(26px,3vw,40px);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.1em;color:var(--text-72)}

/* このプランを受けるとどうなるか。まずこの一文が目に入るようにする */
/* このプランを受けるとどうなるか。中央に置いた器の中で、縦に読ませる */
.p-outcome{max-width:var(--sec-narrow);margin-inline:auto;text-align:start}
.p-outcome__txt{font-size:var(--fs-body);line-height:2.05;letter-spacing:.03em}
.p-outcome__txt + .p-outcome__txt{margin-top:1.4em}
.p-outcome__lead{
  max-width:none;margin:0 0 clamp(38px,4.6vw,64px);text-align:start;
  font-size:clamp(20px,2.7vw,32px);font-weight:400;
  line-height:1.95;letter-spacing:.05em;
}

/* このプランでしていること（セッション詳細）*/
.p-does{counter-reset:does;max-width:var(--sec-wide);margin-inline:auto;
  border-top:1px solid var(--rule-soft);
  /* 線は外側の幅いっぱい、文章はその内側の中央に */
  --inset:max(0px, (100% - var(--txt-wide)) / 2)}
.p-does > li{counter-increment:does;display:grid;gap:.5em 1.4em;
  padding-block:clamp(24px,2.8vw,36px);padding-inline:var(--inset);
  border-bottom:1px solid var(--rule-soft)}
@media (min-width:700px){
  .p-does > li{grid-template-columns:2.6em minmax(0,1fr)}
  .p-does > li::before{grid-row:1 / 3}
}
.p-does > li::before{
  content:counter(does,decimal-leading-zero);
  font-family:var(--font-en);font-size:14px;letter-spacing:.1em;
  color:var(--find-ink);line-height:1.9;
}
.p-does__ttl{font-size:clamp(16px,1.9vw,20px);font-weight:500;line-height:1.85;letter-spacing:.04em}
.p-does__txt{font-size:var(--fs-sm);line-height:2;color:var(--text-72);max-width:none}

/* お渡しするもの。資料は元の比率（16:9）のまま、端を切らずに見せる */
.p-docs{max-width:var(--sec-wide);margin-inline:auto}
.p-docs > li{display:flex;flex-direction:column}
/* 3枚のときは横1列。ひとまとまりに見えるよう、少しコンパクトに */
@media (min-width:820px){
  .p-docs--three{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2.2vw,30px)}
  .p-docs--three .p-docs__label{font-size:var(--fs-body);margin-top:.95em}
}
@media (min-width:560px) and (max-width:819px){
  .p-docs--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.p-docs .c-img,.p-docs .c-ph{background:var(--surface)}
.p-docs__label{
  margin-top:1.1em;font-size:var(--fs-h3);font-weight:500;
  line-height:1.8;letter-spacing:var(--ls-jp);
}
.p-docs .c-small{max-width:none;color:var(--text-72)}

/* 詳細ページのお客さまの声。
   左に「どんな方が、相談前に何で悩んでいたか」、右に「相談後の言葉」。
   枠も引用符も背景も足さず、余白と文字の大きさの差だけで2列に見せる */
/* この面だけ、器を少し広く使う */
/* プラン詳細のお客さまの声。
   水色の広い面の中に、文字と余白だけで組む。囲みもカードも使わない。
   いちばん大きいのはお客さまの言葉 */
/* 水色の面の中に、生成りの横長の面を一枚だけ敷く。
   カードにはしない（角丸なし・枠線なし・影なし）。
   読む順は プラン名 → どなたか → お客さまの言葉 → 補足 → もっと見る */
.p-pvoice{
  max-width:var(--pvoice-w);margin-inline:auto;text-align:center;
  background:var(--voice-box-bg);border-radius:0;border:0;box-shadow:none;
  padding:clamp(40px,5.2vw,78px) clamp(24px,5vw,86px);
}
/* プラン名。小さく静かに、いちばん上に */
.p-pvoice__plan{
  font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.12em;
  line-height:2;color:var(--voice-ink);text-wrap:balance;
}
/* お名前とご相談内容は同じ一行のまとまりに */
.p-pvoice__who{
  margin-top:.9em;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:baseline;gap:.2em 1em;
}
.p-pvoice__name{font-size:17px;font-weight:500;
  letter-spacing:.06em;line-height:1.85;color:var(--voice-body)}
.p-pvoice__room{
  font-size:var(--fs-sm);line-height:1.9;
  color:color-mix(in srgb, var(--voice-body) 68%, transparent);
}
/* お客さまの言葉。この面でいちばん目に入る大きさに */
.p-pvoice__quote{margin-top:clamp(26px,3.2vw,44px)}
.p-pvoice__quote p{
  max-width:22em;margin-inline:auto;
  font-size:clamp(21px,2.9vw,34px);font-weight:400;
  line-height:1.9;letter-spacing:.04em;color:var(--voice-ink);
}
.p-pvoice__note{
  margin-top:clamp(22px,2.6vw,34px);max-width:36em;margin-inline:auto;
  font-size:var(--fs-body);line-height:2.05;color:var(--voice-body);text-wrap:balance;
}
.p-pvoice__more{margin-top:clamp(32px,3.8vw,52px)}

/* 文章を2列に並べて、幅を使う */
.c-two{display:grid;gap:clamp(16px,2.2vw,30px)}
@media (min-width:820px){
  .c-two{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
}
.c-two > .c-body{max-width:none;margin-top:0}

/* ---- お客さまの声ページ ----
     プランのタグ・お名前・抜き出した一文をひとまとまりに。
     その下に本文を、読みやすい行の長さで置く。 ---- */
.p-letter{max-width:58em;margin-inline:auto;text-align:center}
/* 読む順は 引用 → プランとお名前 → 本文。
   いちばん大きいのは引用で、プランとお名前は小さく静かに添える */
.p-letter__head{display:flex;flex-direction:column;align-items:center;gap:1em}
.p-letter__plan{
  font-size:11px;font-weight:400;letter-spacing:.08em;padding:.42em 1.25em;
}
.p-letter__who{
  margin:0;font-size:16px;font-weight:500;
  line-height:1.8;letter-spacing:.06em;color:var(--text);
}
.p-letter__who .room{
  display:block;font-size:13px;font-weight:400;
  color:color-mix(in srgb, var(--text) 78%, transparent);
  margin-top:.45em;
}
/* 変化が伝わる一文。この面でいちばん大きい文字。前後はしっかり空ける */
.p-letter__pull{
  margin:clamp(36px,4.3vw,60px) auto 0;max-width:52em;
}
.p-letter__pull p{
  font-size:clamp(17.5px,2.3vw,24.5px);font-weight:400;
  line-height:2;letter-spacing:.04em;
}
/* 本文。行の長さをもう少し詰めて、行間と段落間をゆるめる */
.p-letter__body{
  max-width:50em;margin:clamp(34px,4vw,56px) auto 0;text-align:start;
}
.p-letter__body .c-body{max-width:none;line-height:2.15}
.p-letter__body .c-body + .c-body{margin-top:1.9em}
/* うっすら引く線。塗るのではなく、文字の下にわずかに残る程度にする */
/* リンクの下線に見えないよう、細い線ではなく
   文字の下半分に重なる薄い色面にする（蛍光ペンを薄く引いた感じ）。
   下に伸ばしすぎると文字から離れた「線」に見えてしまうので、
   文字にしっかり重ねて、足元でぴたりと止める。
   ※数値は行の高さ（文字の2倍）に対する割合。文字は上から約6%〜75%にある */
.p-letter__body mark{
  background:linear-gradient(transparent 30%, var(--hl-voice) 30%,
                             var(--hl-voice) 74%, transparent 74%);
  color:inherit;padding-inline:.2em;
}
/* 1件ずつの区切りは、余白が主で、線は添えるだけ。
   幅いっぱいには引かず、短い線を中央に置く */
.l-sec--joined{padding-block-start:0}
.l-sec--joined .p-letter{
  position:relative;padding-top:calc(var(--sec) * .62);
}
.l-sec--joined .p-letter::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:50%;
  transform:translateX(-50%);
  width:clamp(40px,5.6vw,68px);height:1px;
  background:color-mix(in srgb, var(--border) 13%, transparent);
}

/* この面ではプランの色を声の色に差し替える（トップと同じ考え方）*/
.l-sec--voice .p-letter__who{color:var(--voice-ink)}
.l-sec--voice .p-letter__who .room{color:color-mix(in srgb, var(--voice-ink) 72%, transparent)}
.l-sec--voice .p-letter__pull p{color:var(--voice-ink)}
.l-sec--voice .p-letter .c-body{color:color-mix(in srgb, var(--voice-body) 88%, transparent)}

/* プラン詳細の料金。トップの2カラムと同じ部品を使うための器 */
.c-plan{--col-rule:color-mix(in srgb, var(--plan-ink) 22%, transparent)}
/* 料金表に見せない。枠で囲わず、地になじむ面の上に静かに置く */
.c-plan--soft{--col-rule:color-mix(in srgb, var(--plan-ink) 14%, transparent);
  max-width:var(--price-w);margin-inline:auto}
.c-plan--soft .c-plan__price{
  background:none;padding:0;margin:0;
  display:grid;gap:clamp(22px,2.8vw,38px) clamp(26px,3.4vw,52px);
}
@media (min-width:680px){
  /* 3つの料金を見比べられるよう、横に余裕を持たせる */
  .c-plan--soft .c-plan__price{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(26px,3.2vw,44px) clamp(34px,4.6vw,78px)}
}
.c-plan--soft .c-col__row + .c-col__row{margin-top:0;padding-top:0;border-top:0}
/* 金額のない行（補足）は、横に並べず1行ぶん使う */
.c-plan--soft .c-col__row--note{grid-column:1 / -1}
/* 料金がひとつだけのときは、横に並べず縦にひとまとまりで置く。
   3列のうち1列だけ埋まって、左にぽつんと見えるのを防ぐ */
/* 料金とその下の補足を、同じ外側の幅にそろえる */
.p-price{max-width:var(--price-w);margin-inline:auto;
  --inset:max(0px, (100% - var(--txt-wide)) / 2)}
/* 金額の下にくる SUPPORT・説明・箇条書きは、
   3つの金額とおなじ重心になるよう、かたまりごと中央に置く */
.p-price .c-plan--soft .c-col__row--note{padding-inline:var(--inset)}
.p-price{--inset-short:max(0px, (100% - var(--txt-short)) / 2)}
.p-price .c-col__inc li{max-width:none;
  padding-left:calc(var(--inset-short) + 1.2em);padding-right:var(--inset-short)}
.p-price .c-col__inc li::before{left:var(--inset-short)}
/* SUPPORT の行は文字数が少ないので、かたまりの幅ぴったりで中央に置く */
.p-price .c-plan--soft:not(.c-plan--one) .c-plan__price > .c-col__row--note{
  justify-self:center;padding-inline:0}
/* 開閉式も、線は外側・文章は内側 */
.p-price .c-acc > details > summary{padding-inline:var(--inset)}
.p-price .c-acc__body{padding-inline:var(--inset)}
/* 料金 → 含まれるもの → 補足 → オプション を、余白でグループ分けする */
.p-price .c-acc{margin-top:clamp(48px,5.4vw,78px)}
/* 料金がひとつだけのプランは、中央に置いた1ブロックとして見せる */
/* もともと幅が狭いので、中の箇条書きは料金のラベルと同じ左端にそろえる */
.c-plan--one{max-width:640px;--inset-short:0px}
.c-plan--one .c-plan__price{display:block}
.c-plan--one .c-col__row + .c-col__row{margin-top:clamp(30px,3.4vw,42px)}
/* 金額。ページの中で、いちばん先に目に入ってよい数字 */
.c-plan--soft .c-col__value{font-size:clamp(28px,3.6vw,40px)}
.c-plan--one .c-col__value{font-size:clamp(32px,4.2vw,46px)}
.c-plan--soft .c-col__label{color:var(--text-52)}
/* 部屋サイズは和文なので、和文書体で少し大きく。価格との階層をはっきりさせる */
.c-plan--soft .c-plan__price > .c-col__row:not(.c-col__row--note) .c-col__label{
  font-family:var(--font-jp);font-size:var(--fs-sm);letter-spacing:.06em;
  text-transform:none;margin-bottom:.55em;color:var(--text-72);
}
.c-plan--soft .c-col__note{margin-top:.6em;line-height:1.95}
.c-plan--soft .c-col__inc{
  margin-top:clamp(44px,5vw,72px);padding-top:clamp(38px,4.2vw,56px);
  border-top:1px solid var(--col-rule);
}
.c-plan--soft .c-col__inc li{border-bottom:0;padding-block:.8em;line-height:2;max-width:none}
.c-plan .c-col__inc{margin-top:0}
.c-plan .c-col__inc li{max-width:none}
/* 幅があるので、料金の項目は横に並べる */
@media (min-width:760px){
  .c-plan .c-col__price{display:grid;gap:clamp(20px,2.6vw,40px) clamp(24px,3vw,48px);
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .c-plan .c-col__row + .c-col__row{margin-top:0;padding-top:0;border-top:0}
}
/* ---- 料金まわりの上書き（上の 760px 以上のルールで余白が 0 に戻るため）---- */
/* 線と文字がくっついて見えないよう、料金と箇条書きのあいだをしっかり空ける */
.p-price .c-plan .c-col__inc{
  margin-top:clamp(40px,4.4vw,62px);padding-top:clamp(14px,1.8vw,22px)}
/* 料金がひとつだけのプランは、Price / Included / Delivery を余白で分ける */
.p-price .c-plan--one .c-col__row + .c-col__row{margin-top:clamp(28px,3.4vw,44px)}
@media (min-width:760px){
  .p-price .c-plan--one .c-col__row + .c-col__row{margin-top:clamp(32px,3.6vw,48px)}
}

/* 列の中では、リストも幅いっぱいまで使う（1行ものなので読みづらくならない）*/
.p-feature__body .c-checklist,
.p-feature__body .c-marks,
.p-feature__body .c-inclist li{max-width:none}
/* 左寄せの情報ブロックのまま、かたまりをページの中央に寄せる */
.p-feature__body .c-checklist--roomy{max-width:var(--sec-wide);margin-inline:auto}
.p-feature--sec .p-feature__body > .c-small--center{max-width:var(--doc-mid);margin-inline:auto}
/* お申し込み前のご確認。行が長くなりすぎないよう、本文と同じ幅にしてページの中央へ */
.p-feature--sec .p-feature__body > .c-acc{max-width:var(--doc-mid);margin-inline:auto}

/* ---- 申し込みの面。左に言葉、右に行動。仕切り線は使わず、面の色で分ける ---- */
.p-cta{display:grid;gap:clamp(34px,4vw,60px)}
@media (min-width:940px){
  .p-cta{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    gap:clamp(44px,5vw,86px);align-items:center}
}
.p-cta .c-en{font-size:var(--sec-en);letter-spacing:.2em}
.p-cta__catch{margin-top:1.3em;font-size:clamp(22px,2.9vw,32px);font-weight:400;
  line-height:1.8;letter-spacing:.05em}
.p-cta__lead{margin-top:1.7em;font-size:var(--fs-body);line-height:2.05;
  color:var(--on-brand-72)}
/* 手順とボタンは、淡いベージュの面にまとめる。囲みでもカードでもない */
.p-cta__act{background:var(--price-bg);border-radius:0;border:0;box-shadow:none;
  padding:clamp(30px,3.6vw,52px) clamp(24px,3.2vw,48px)}
.p-ctaflow{display:grid;gap:0}
.p-ctaflow > li{display:flex;align-items:baseline;gap:1.2em;
  padding:.95em 0;border-bottom:1px solid color-mix(in srgb, var(--on-brand) 14%, transparent)}
.p-ctaflow > li:first-child{padding-top:0}
.p-ctaflow > li:last-child{border-bottom:0;padding-bottom:0}
.p-ctaflow__no{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;
  color:color-mix(in srgb, var(--on-brand) 52%, transparent);flex:none}
.p-ctaflow__t{font-size:var(--fs-sm);line-height:1.9;letter-spacing:.04em}
.p-cta__btn{display:block;margin-top:clamp(26px,3vw,38px);text-align:center;padding:1.15em 2em}
.p-cta__note{margin-top:1.3em;color:var(--on-brand-72);max-width:none;font-size:12.5px}
@media (max-width:939px){
  .p-cta__say{text-align:center}
  .p-cta__lead{text-align:start}
}
.p-feature--cta .p-feature__body > .c-body{max-width:44em}
@media (max-width:939px){
  .p-feature--cta .p-feature__head{text-align:center}
  /* 1カラムのときは、ボタンとその下の一文も中央に置く */
  .p-cta__foot{flex-direction:column;align-items:center;text-align:center}
  .p-cta__foot .c-small{max-width:none;text-wrap:balance}
}
.p-feature--cta .c-miniflow{margin-top:2.4em}
.p-cta__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4em clamp(24px,3vw,44px);
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--rule-brand);
}
.p-cta__foot .c-btn{margin-top:0;flex:none}
.p-cta__foot .c-small{margin:0;color:var(--on-brand-72);max-width:30em}
@media (min-width:940px){
}

/* ---- お客さまの声を、プランと同じ線の2カラムで（おひとりずつ）---- */
/* お客さまの言葉（引用）。この列でいちばん大きい文字 */
.c-col__pull{
  margin-top:2em;font-size:clamp(16px,1.9vw,19px);font-weight:500;
  line-height:1.95;letter-spacing:.05em;color:var(--text);
  max-width:26em;margin-inline:auto;
}
.c-col__rest{font-size:var(--fs-sm);line-height:1.95;color:var(--text-72);max-width:30em}
/* 料金の枠と同じ見せ方でそろえる（地の色も同じ --price-bg）*/
.c-col__change{margin-top:2.1em;padding:clamp(20px,2.4vw,28px);background:var(--price-bg)}
.c-col__change > div{display:grid;gap:.2em .9em;padding-block:.85em}
@media (min-width:520px){.c-col__change > div{grid-template-columns:6.5em minmax(0,1fr);gap:1.2em}}
.c-col__change > div + div{margin-top:.2em;padding-top:1.05em;
  border-top:1px solid color-mix(in srgb, var(--plan-ink) 18%, transparent)}
.c-col__change dt{font-size:var(--fs-sm);color:var(--text-52)}
.c-col__change > div + div dt{color:var(--plan-ink)}
.c-col__change dd{font-size:var(--fs-sm);line-height:1.9;max-width:27em}

/* ---- お客さまの声の列だけ、中身も中央ぞろえにする ---- */
.c-col--voice .c-col__rest{text-align:center;margin-inline:auto}
.c-col--voice .c-col__change > div{display:block;text-align:center}
/* 見出し（相談の前 / あと）は小さく、少し太く */
.c-col--voice .c-col__change dt{
  font-size:var(--fs-en-label);font-weight:500;letter-spacing:.1em;line-height:1.7;
}
.c-col--voice .c-col__change dd{margin-top:.75em;margin-inline:auto}
/* スマホでは枠が細く見えるので、列の余白ぶんだけ外へ広げる */
@media (max-width:719px){
  .c-col--voice .c-col__change{margin-inline:-18px}
}

/* --------------------------------------------------------------------------
   21. 横スライド（事例紹介）
        左端はページの左端にそろえ、右は画面の外へ流す
   -------------------------------------------------------------------------- */
.c-carousel__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.4em 2em;margin-bottom:var(--head-gap);
}
.c-carousel__top .c-head{margin-bottom:0}
.c-carousel__nav{display:flex;align-items:center;gap:1.2em;flex:none}
.p-feature__head .c-carousel__nav{margin-top:clamp(26px,3vw,40px);justify-content:flex-start}
.c-carousel__nav button{
  appearance:none;background:none;border:0;cursor:pointer;padding:.4em .2em;
  display:inline-flex;align-items:center;gap:.7em;color:var(--text);
  font-family:var(--font-en);font-size:var(--fs-en-label);letter-spacing:.16em;
  text-transform:uppercase;transition:opacity .2s ease;
}
.c-carousel__nav button:disabled{opacity:.28;cursor:default}
.c-carousel__nav button:not(:disabled):hover{opacity:.6}
.c-carousel__nav .bar{width:1px;height:15px;background:var(--rule);flex:none}

.c-carousel{
  --carousel-pad:max(var(--gutter), calc(50% - var(--page) / 2 + var(--gutter)));
  overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline-start:var(--carousel-pad);
  scrollbar-width:none;-ms-overflow-style:none;
}
.c-carousel::-webkit-scrollbar{display:none}
.c-carousel > ul{
  display:flex;gap:clamp(20px,2.6vw,30px);
  padding-inline-start:var(--carousel-pad);
}
/* 右端の余白。padding は scrollWidth に入らないので、空の要素でつくる */
.c-carousel > ul::after{content:"";flex:0 0 var(--carousel-pad)}
.c-carousel > ul > li{
  flex:0 0 clamp(230px,25vw,320px);scroll-snap-align:start;
}
@media (max-width:600px){.c-carousel > ul > li{flex-basis:min(76vw,300px)}}
.c-carousel__foot{margin-top:clamp(26px,3vw,38px)}

/* 列の中に置くとき。左は列の頭から、右は画面の外へ流す */
.c-carousel--incol{scroll-padding-inline-start:0;margin-inline-end:calc(-1 * var(--gutter))}
.c-carousel--incol > ul{padding-inline-start:0}
.c-carousel--incol > ul::after{flex-basis:var(--gutter)}
@media (min-width:940px){
  .c-carousel--incol{
    margin-inline-end:calc(-1 * max(var(--gutter), (100vw - var(--page)) / 2 + var(--gutter)));
  }
}

/* --------------------------------------------------------------------------
   詳細ページ（読みもの・事例）の入口
     固定ページの「水色の大きな見出し」は使わない。
     水色はヘッダーの高さぶんだけ残し、そこから白い面で記事が静かに始まる
   -------------------------------------------------------------------------- */
.p-topband{height:var(--header-h);background:var(--hero-bg)}
/* 入口から本文まで、地の色は切れ目なく白でつなぐ */
.p-artintro{background:var(--surface)}
.p-arthead{
  padding-top:clamp(34px,4.4vw,62px);text-align:center;
}
.p-arthead .c-breadcrumb{margin-bottom:clamp(20px,2.4vw,32px)}
.p-arthead__en{
  font-family:var(--font-en);font-size:var(--fs-en-label);
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  line-height:1.6;margin-bottom:clamp(14px,1.6vw,20px);
}
.p-arthead__title{
  max-width:30em;margin-inline:auto;
  font-size:clamp(19px,2.4vw,28px);font-weight:400;
  line-height:1.85;letter-spacing:.06em;
}
/* カテゴリ ｜ 執筆者 ｜ 公開日／プラン ｜ ご相談者 ｜ 日付。一覧カードと同じ大きさ */
.p-arthead__meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.2em .5em;margin-top:clamp(18px,2.2vw,28px);
  font-size:13px;line-height:1.9;letter-spacing:.08em;
  color:color-mix(in srgb, var(--text) 74%, transparent);
}
.p-arthead__meta .sep{color:color-mix(in srgb, var(--text) 32%, transparent)}
.p-arthead__meta .en{font-family:var(--font-en);letter-spacing:.1em}
/* 読みもの記事は、カテゴリと執筆者を一覧カードと同じ枠つきに。日付はその下の行 */
.p-arthead__meta--jrn{gap:.5em .55em;align-items:center}
.p-arthead__meta--jrn .jp{
  font-size:12px;letter-spacing:.08em;line-height:1;color:var(--accent);
  border:1px solid var(--accent-light);border-radius:999px;padding:.4em 1em;
}
.p-arthead__meta--jrn .en{flex:0 0 100%;margin-top:.45em;font-size:12.5px;letter-spacing:.12em}
.p-arthead__fig{margin:clamp(40px,5vw,68px) auto 0;max-width:var(--doc-w)}

/* --------------------------------------------------------------------------
   読みもの本文。中央の1本軸。文章より写真を少しだけ大きく
   -------------------------------------------------------------------------- */
.p-doc{max-width:var(--doc-w);margin-inline:auto}
.p-doc.c-prose{max-width:var(--doc-w)}
.p-doc > figure{margin-inline:auto;
  margin-top:var(--doc-fig-top);margin-bottom:var(--doc-fig-bot)}
.p-doc > figure figcaption{margin-top:var(--doc-cap-gap)}
/* 縦写真も本文と同じ幅にそろえる。内側に寄せたい場合は --doc-w-tall に戻す */
.p-doc > figure.is-tall{max-width:var(--doc-w)}
.p-doc > figure img{width:100%;max-height:none}
.p-doc > :first-child{margin-top:0;padding-top:0;border-top:0}
.p-doc h2{margin-top:var(--doc-h2-top);margin-bottom:var(--doc-h2-bot)}
.p-doc h3{margin-top:var(--doc-h3-top);margin-bottom:var(--doc-h3-bot)}

/* --------------------------------------------------------------------------
   事例詳細の本文。読みものと同じ中央1本軸。
   事例は写真が主役なので、写真の大きさに強弱をつけてリズムをつくる
     lg 900px（空間全体・提案資料）／ md 720px（章の代表写真）／ sm 580px（ディテール）
   文章そのものは旧記事のまま。並べ方だけを変えている
   -------------------------------------------------------------------------- */
.p-cs{max-width:var(--doc-w);margin-inline:auto}
.p-cs > * + *{margin-top:var(--doc-fig-top)}
/* 写真のすぐあとに続く本文は、その写真の説明として近づける
   （章が変わるとき＝見出しから始まるかたまりは、下の見出しルールが優先）*/
.p-cs > .p-cs__one + .p-cs__text:not([class*="--h"]),
.p-cs > .p-cs__pair + .p-cs__text:not([class*="--h"]),
.p-cs > .p-cs__grid + .p-cs__text:not([class*="--h"]){margin-top:var(--doc-fig-bot)}
.p-cs .c-prose{max-width:none}
/* かたまりの先頭に来た見出しは、かたまり側の余白にまかせる */
.p-cs .c-prose > :first-child{margin-top:0;padding-top:0;border-top:0}
.p-cs .p-cs__text{max-width:var(--doc-w);margin-inline:auto}
.p-cs .c-prose h2{margin-top:var(--doc-h2-top);margin-bottom:var(--doc-h2-bot)}
.p-cs .c-prose h3{margin-top:var(--doc-h3-top);margin-bottom:var(--doc-h3-bot)}
/* 章の区切り線。かたまりの幅に左右されないよう、1本の要素として置く */
.p-cs__rule{border-top:1px solid var(--rule-soft)}
.p-cs > * + .p-cs__rule{margin-top:var(--doc-h2-top)}
.p-cs > * + .p-cs__text--h2{margin-top:clamp(26px,2.8vw,38px)}
.p-cs > * + .p-cs__text--h3{margin-top:var(--doc-h3-top)}

.p-cs__fig{margin:0}
.p-cs__fig img{width:100%;height:auto;max-height:none}
.p-cs__fig figcaption{margin-top:var(--doc-cap-gap);font-size:var(--fs-sm);line-height:1.9;color:var(--text-52)}

.p-cs__one{margin-inline:auto;max-width:var(--doc-w)}
/* 縦写真も本文と同じ幅にそろえる。内側に寄せたい場合は --doc-w-tall に戻す */
.p-cs__one--tall{max-width:var(--doc-w)}

/* 続けて置かれていた写真（同じ場所の別角度など）だけ、横に並べる */
.p-cs__pair,.p-cs__grid{display:grid;gap:clamp(16px,2.2vw,28px)}
@media (min-width:720px){
  .p-cs__pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-cs__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.p-cs__foot{margin-top:clamp(56px,6vw,88px)}

/* --------------------------------------------------------------------------
   モーション
     スクロールしたときに、文字と写真が静かに立ち上がる。
     動きはすべて opacity と transform だけ。時間と曲線はここで一括管理する。
     動きを減らす設定の方には html.js-mo が付かないので、何も起きない
   -------------------------------------------------------------------------- */
:root{
  --mo-dur:1.05s;                         /* 立ち上がりの長さ。ゆっくり読ませる */
  --mo-dur-hero:1.2s;                     /* ファーストビューはさらにゆっくり */
  --mo-ease:cubic-bezier(.16,.68,.3,1);   /* ゆっくり始まり、最後は静かに止まる */
  --mo-shift:12px;                        /* 下から上がる量。小さく */
  --mo-logo:1.9s;                         /* ロゴが中央からヘッダーへ、ゆるっと戻る時間 */
  --mo-logo-in:1.8s;                      /* 中央でふわっと出るまでの時間 */
  --mo-logo-ease:cubic-bezier(.4,.05,.45,1); /* フェード用。均一にじわっと濃くなる */
  --mo-ease-soft:cubic-bezier(.45,.05,.25,1); /* ゆるやかに出て、ゆるやかに止まる */
  --mo-hover:.45s;
  --hero-fade:2.4s;      /* ファーストビューの写真が入れ替わる時間 */                        /* hover の長さ */
}
@media (max-width:719px){
  /* スマホは待たされる感じが出ないよう、動きをさらに小さく・速く */
  :root{--mo-dur:.85s;--mo-shift:8px}
}

.js-mo .p-pagehead__en,
.js-mo .p-pagehead__jp,
.js-mo .p-pagehead__promise,
.js-mo .p-pagehead__lead,
.js-mo .p-arthead__en,
.js-mo .p-arthead__title,
.js-mo .p-arthead__meta,
.js-mo .p-arthead__fig,
.js-mo .l-sec .c-en,
.js-mo .l-sec .c-h2,
.js-mo .l-sec .c-catch,
.js-mo .l-sec .c-head .c-body,
.js-mo .l-sec figure,
.js-mo .l-sec .c-band,
.js-mo .p-cards > li,
.js-mo .p-intro__fig,
.js-mo .p-intro__body,
.js-mo .p-cs > *,
.js-mo .p-doc > figure,
.js-mo .c-breadcrumb,
.js-mo .p-caselist > li,
.js-mo .c-voicelist,
.js-mo .p-find3__note,
.js-mo .p-doc > h2,
.js-mo .p-doc > h3,
.js-mo .p-doc > blockquote,
.js-mo .l-wrap > .c-small,
.js-mo .l-wrap > .c-body,
.js-mo .l-wrap > .u-right,
.js-mo .l-wrap--mid > .c-small,
.js-mo .l-wrap--mid > .u-right,
.js-mo .p-lead > div,
.js-mo .c-find > li,
.js-mo .c-cols > li,
.js-mo .p-find3 > li,
.js-mo .p-feature__head,
.js-mo .p-feature__foot,
.js-mo .c-carousel,
.js-mo .c-miniflow,
.js-mo .p-cta__say,
.js-mo .p-cta__act,
.js-mo .c-steps > li,
.js-mo .c-checklist,
.js-mo .c-marks,
.js-mo .c-acc,
.js-mo .c-deftable,
.js-mo .c-scroll,
.js-mo .c-embed,
.js-mo .p-planblk,
.js-mo .p-askblk,
.js-mo .p-vstory,
.js-mo .p-letter,
.js-mo .p-pvoice,
.js-mo .p-done,
.js-mo .c-prose--legal > h2,
.js-mo .c-prose--bar > h2,
.js-mo .p-planband__body,
.js-mo .p-whatwedo__logo,
.js-mo .p-whatwedo__lead,
.js-mo .p-whatwedo__catch,
.js-mo .p-whatwedo__body,
.js-mo .p-whatwedo__foot{
  opacity:0;transform:translateY(var(--mo-shift));
  transition:opacity var(--mo-dur) var(--mo-ease),
             transform var(--mo-dur) var(--mo-ease);
  will-change:opacity, transform;
}
/* 一度出たら、それ以降は動かさない（外すのは表示が終わってから）。
   上の隠す指定より必ず強くしたいので !important を付ける */
.js-mo .is-in{opacity:1!important;transform:none!important}
.js-mo .is-done{will-change:auto}

/* ---- ファーストビュー。行ごとに少しずつ時間をずらす ---- */
.js-mo .p-hero__copy{opacity:1;transform:none;transition:none}
.js-mo .p-hero__copy .p-hero__en,
.js-mo .p-hero__copy .p-hero__catch,
.js-mo .p-hero__copy .p-hero__vt span,
.js-mo .p-hero__copy .p-hero__side,
.js-mo .p-hero__scroll,
.js-mo .p-hero__under .p-hero__sub{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--mo-dur-hero) var(--mo-ease),
             transform var(--mo-dur-hero) var(--mo-ease);
}
.js-mo .p-hero__copy.is-in .p-hero__en,
.js-mo .p-hero__copy.is-in .p-hero__catch,
.js-mo .p-hero__copy.is-in .p-hero__vt span,
.js-mo .p-hero__copy.is-in .p-hero__side,
.js-mo .p-hero__copy.is-in .p-hero__scroll,
.js-mo .p-hero__copy.is-in ~ * .p-hero__sub,
.js-mo .p-hero__copy.is-in ~ .p-hero__scroll{opacity:1;transform:none}
.js-mo .p-hero__copy.is-in .p-hero__en{transition-delay:0ms}
.js-mo .p-hero__copy.is-in .p-hero__catch{transition-delay:190ms}
.js-mo .p-hero__copy.is-in .p-hero__vt span:first-child{transition-delay:0ms}
.js-mo .p-hero__copy.is-in .p-hero__vt span:last-child{transition-delay:190ms}
.js-mo .p-hero__copy.is-in .p-hero__side{transition-delay:380ms}
.js-mo .p-hero__copy.is-in ~ * .p-hero__sub{transition-delay:380ms}
.js-mo .p-hero__copy.is-in .p-hero__scroll,
.js-mo .p-hero__copy.is-in ~ .p-hero__scroll{transition-delay:560ms}

/* ---- hover（マウスのある画面だけ）---- */
@media (hover:hover){
  /* カードの写真だけ、ごくわずかに寄る。カードは浮かせない */
  .p-card .c-img > img,
  .p-case .c-img > img,
  .p-list a .c-img > img{transition:transform var(--mo-hover) var(--mo-ease)}
  .p-card:hover .c-img > img,
  .p-case__head:hover .c-img > img,
  .p-list a:hover .c-img > img{transform:scale(1.025)}
  /* 矢印は、丸い印だけが少し進む */
  .c-arrow span{transition:background-color .25s ease,color .25s ease,
    border-color .25s ease,transform .35s var(--mo-ease)}
  .c-arrow:hover span{transform:translateX(4px)}
  .c-link{transition:border-color .25s ease,color .25s ease}
}

/* ---- SPメニュー。地がふわっと出て、リンクが上から順に ---- */
.js-mo .p-drawer a{
  opacity:0;transform:translateY(8px);
  transition:opacity .42s var(--mo-ease),transform .42s var(--mo-ease);
}
.js-mo .p-drawer.is-open a{opacity:1;transform:none}
.js-mo .p-drawer.is-open a:nth-child(1){transition-delay:.06s}
.js-mo .p-drawer.is-open a:nth-child(2){transition-delay:.10s}
.js-mo .p-drawer.is-open a:nth-child(3){transition-delay:.14s}
.js-mo .p-drawer.is-open a:nth-child(4){transition-delay:.18s}
.js-mo .p-drawer.is-open a:nth-child(5){transition-delay:.22s}
.js-mo .p-drawer.is-open a:nth-child(6){transition-delay:.26s}
.js-mo .p-drawer.is-open a:nth-child(7){transition-delay:.30s}
.js-mo .p-drawer.is-open a:nth-child(8){transition-delay:.34s}
/* 閉じるときは待たせない */
.js-mo .p-drawer:not(.is-open) a{transition-duration:.15s;transition-delay:0s}

/* --------------------------------------------------------------------------
   TOP：このサイトは何をするところか
     世界観のすぐあとに、サービスの中身を言葉だけで伝える。
     写真は置かず、余白と文字の階層だけで見せる
   -------------------------------------------------------------------------- */
/* ロゴ → 小コピー → 見出し → 本文 → リンク を、中央に縦に積む。
   まとまりごとの間隔だけでリズムをつくり、線も囲みも使わない */
.p-whatwedo{max-width:1200px;margin-inline:auto;text-align:center}
.p-whatwedo__logo{display:flex;justify-content:center;margin:0}
.p-whatwedo__logo .c-logo{display:block;width:clamp(122px,11vw,150px)}
.p-whatwedo__logo .c-logo img{width:100%;height:auto;display:block}
/* 小コピー。見出しより一段弱く、字間だけ広げて添える */
.p-whatwedo__lead{
  margin-top:clamp(52px,6.6vw,96px);
  font-size:var(--fs-sm);line-height:1.9;letter-spacing:.14em;
  color:color-mix(in srgb, var(--text) 68%, transparent);text-wrap:balance;
}
/* このセクションの中心。小コピーとはっきり差をつける */
.p-whatwedo__catch{
  max-width:none;margin:clamp(14px,1.8vw,24px) auto 0;
  font-size:clamp(18px,2vw,24px);font-weight:400;
  line-height:1.95;letter-spacing:.05em;text-wrap:balance;
}
/* 本文は読みやすさを優先して左ぞろえのまま、かたまりを中央に置く */
.p-whatwedo__body{
  max-width:840px;margin:clamp(34px,4.2vw,58px) auto 0;text-align:start;
}
.p-whatwedo__body p{font-size:var(--fs-body);line-height:2.05;letter-spacing:.03em}
.p-whatwedo__body p + p{margin-top:1.3em}
.p-whatwedo__foot{
  display:flex;justify-content:center;margin-top:clamp(44px,5.2vw,74px);
}
.p-whatwedo__foot .c-arrow{align-self:center}
/* この章だけ、上下の余白を広めに取る */
.p-wwd-sec{padding-block:clamp(88px,10.5vw,158px)}

/* ===== お問い合わせフォーム ===============================================
   Googleフォームの埋め込みをやめ、サイトの中で完結させるための部品。
   送信先は contact.html の data-endpoint（Apps Script のWeb App）。
   ========================================================================= */
.c-form{max-width:var(--doc-mid);margin-inline:auto;text-align:left}
.c-form__row{margin-top:clamp(22px,2.6vw,32px);border:0;padding:0;min-inline-size:0}
.c-form > .c-form__row:first-child{margin-top:0}
.c-form__label{
  display:block;font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:var(--ls-jp);color:var(--text);margin-bottom:.8em;padding:0;
}
.c-form__label .req,
.c-form__choice .req{
  display:inline-block;font-family:var(--font-en);font-size:11px;letter-spacing:.12em;
  color:var(--accent);border:1px solid var(--accent-light);border-radius:999px;
  padding:.2em .7em;margin-left:.8em;vertical-align:.1em;
}
.c-form__input{
  width:100%;font-family:var(--font-jp);font-size:var(--fs-body);line-height:1.85;
  color:var(--text);background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:.95em 1.05em;transition:border-color .2s ease;
}
.l-sec--surface .c-form__input{background:var(--bg)}
.c-form__input:focus-visible{outline:0;border-color:var(--brand)}
.c-form__input--area{resize:vertical;min-height:11em}
.c-form__help{font-size:var(--fs-sm);color:var(--text-52);margin-top:.75em;line-height:1.85}
.c-form__choice{
  display:flex;gap:.75em;align-items:flex-start;cursor:pointer;
  font-size:var(--fs-body);line-height:1.85;margin-top:.65em;
}
.c-form__choice input{margin-top:.5em;accent-color:var(--brand);flex:none}
.c-form__note{font-size:var(--fs-sm);color:var(--text-72);line-height:1.95;margin-top:clamp(24px,2.8vw,34px)}
.c-form__msg{
  font-size:var(--fs-sm);line-height:1.95;color:var(--brand);
  border:1px solid var(--accent-light);padding:1.05em 1.25em;margin-top:1.5em;
}
.c-form__send{margin-top:clamp(18px,2.2vw,26px)}
.c-form__send .c-btn{margin-top:0;border:0;cursor:pointer;font-family:var(--font-jp)}
.c-form__send .c-btn[disabled]{opacity:.45;pointer-events:none}

/* プルダウン。ブラウザごとの見た目をそろえて、右に小さな▼を置く */
.c-form__input--select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.6em;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-52) 50%),
                   linear-gradient(135deg,var(--text-52) 50%,transparent 50%);
  background-position:calc(100% - 1.25em) calc(50% + 1px),calc(100% - 1em) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

/* 送信ボタンの直前に置く、お申し込み内容の最終確認（特定商取引法）*/
.c-form__confirm{
  margin-top:clamp(34px,4vw,52px);
  background:var(--price-bg);
  padding:clamp(22px,2.8vw,34px) clamp(20px,2.6vw,32px);
}
.c-form__confirm .ttl{
  font-family:var(--font-jp);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:var(--ls-jp);color:var(--text);margin-bottom:1.2em;
}
.c-form__confirm dl{margin:0;font-size:var(--fs-sm);line-height:1.95}
.c-form__confirm dt{
  font-family:var(--font-en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:1.4em;line-height:1.6;
}
.c-form__confirm dl > dt:first-child{margin-top:0}
.c-form__confirm dd{margin:.35em 0 0;color:var(--text-72)}
.c-form__confirm dd a{color:var(--brand);border-bottom:1px solid var(--accent-light)}
.c-form__confirm dd a:hover{border-bottom-color:var(--brand)}
.c-form__confirm .c-form__choice{
  margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--rule-soft);
}