@charset "utf-8";
/* ==========================================================================
   BASE-CRAFT ／ 下層ページ共通スタイル
   contact.html（お問い合わせ）・news.html（お知らせ）・consult.html（個別相談）
   この3ページだけが読み込みます。トップと academy は各ファイル内に書いてあるので、
   ここを直してもトップには影響しません。

   直すときの決まりごと
   ・色と書体は :root の変数だけを直す。個々の指定に色をベタ書きしない。
   ・隠すCSSは必ず html.js の下に書く。JSが動かない環境でも全文が読めるようにするため。
   ・アニメを切っている人（prefers-reduced-motion）には動きを出さない。
   ========================================================================== */

:root{
  --navy:#172A46; --navy-deep:#15263E; --navy-ink:#15263E;
  /* 明るい地の層。上が軽く、下に行くほど沈む＝これが「土台」の表現 */
  --navy-mist:#ECE3D4;  /* 砂 */
  --navy-soft:#DFD3BE;  /* 粘土。いちばん深い明色面 */
  --orange:#D97745; --orange-deep:#8F421C; --orange-pale:#E9A87F;
  --white:#F5EFE5; --paper:#FBF8F4; --charcoal:#2F2A22; --gray:#5C5346; --gray-l:#625A4B;
  --rule:rgba(58,54,48,.18); --rule-d:rgba(245,239,229,.16);
  --f-en:"Outfit",sans-serif;
  --f-go:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  --e:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
/* 地に漆喰の素材を薄く敷く。平均色は生成りそのものなので、文字の見え方は変わらない */
body{margin:0;background:var(--white) url(texture-base.webp) 0 0/800px 800px repeat;color:var(--charcoal);
  font:400 16px/1.95 var(--f-go);letter-spacing:.03em;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100svh}
main{flex:1}
img{display:block;max-width:100%}
ul,ol,li,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--orange-pale);color:var(--navy)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.wrap{max-width:760px;margin:0 auto;padding:0 clamp(18px,5vw,32px)}
.wrap.wide{max-width:900px}
.wrap.wider{max-width:1140px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skiplink{position:absolute;left:12px;top:-80px;z-index:200;padding:12px 18px;border-radius:10px;
  background:var(--navy);color:#fff;font:700 14px/1 var(--f-go);transition:top .2s}
.skiplink:focus{top:12px}

/* ── ヘッダー ─────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:40;background:rgba(245,239,229,.94);
  backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--rule)}
.hd .in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:11px;min-height:44px}
.brand .bc{width:32px;height:27px;flex:0 0 auto;background:url(logo-mark.png) center/contain no-repeat}
.brand .wm{font:500 11px/1.2 var(--f-en);letter-spacing:.26em;color:var(--navy)}
.hd .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font:400 11.5px/1 var(--f-en);letter-spacing:.16em;color:var(--gray);transition:color .3s var(--e)}
.hd .back svg{width:13px;height:13px}
.hd .back:hover{color:var(--navy)}

/* ── ページ冒頭 ───────────────────────────────────────── */
.top{padding-top:clamp(40px,7vw,64px);padding-bottom:clamp(18px,3vw,26px)}
.top .kick{margin:0 0 18px;display:flex;align-items:center;gap:14px;
  font:400 11px/1 var(--f-en);letter-spacing:.32em;text-transform:uppercase;color:var(--orange-deep)}
.top .kick::before{content:"";width:34px;height:1px;background:var(--orange);flex:0 0 auto}
.top h1{margin:0 0 16px;font:900 clamp(25px,4.6vw,38px)/1.5 var(--f-go);color:var(--navy);
  word-break:keep-all;overflow-wrap:anywhere}
.top .lead{margin:0;font-size:14.5px;line-height:2.05;color:#2F2A22}

/* ── 見出しと本文 ─────────────────────────────────────── */
.sec{padding:clamp(30px,5vw,48px) 0}
.sec.mist{background:var(--navy-mist)}
.sec.ink{background:var(--navy-ink);color:rgba(245,239,229,.74)}
.sec.ink h2{color:var(--white)}
.h2{margin:0 0 8px;font:900 clamp(18px,2.4vw,23px)/1.6 var(--f-go);color:var(--navy)}
.h2 .no{display:block;margin-bottom:10px;font:400 12px/1 var(--f-en);letter-spacing:.18em;color:var(--orange-deep)}
.lead2{margin:0 0 20px;font-size:14px;line-height:2;color:var(--gray)}
.bd{font-size:15px;line-height:2;color:#2F2A22}
.bd p{margin:0 0 16px}
.bd p:last-child{margin-bottom:0}

/* ── ボタン ───────────────────────────────────────────── */
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;
  border-radius:999px;font:700 15px/1 var(--f-go);letter-spacing:.04em;cursor:pointer;
  border:1px solid var(--rule);color:var(--navy);background:var(--paper);
  transition:border-color .3s var(--e),background .3s var(--e),color .3s var(--e)}
.btn:hover{border-color:var(--orange-deep)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
/* 明るい地の塗りボタン。橙 #D97745 に白文字は 3.15:1 で読めないため弁柄を使う（7.09:1） */
.btn.fill{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.btn.fill:hover{background:var(--navy);border-color:var(--navy)}
/* LINEの緑に白文字は 2.26:1 で読めない。緑は枠として残し、文字は紺にする（12.6:1） */
.btn.line{background:var(--paper);border:1.5px solid #06C755;color:var(--navy)}
.btn.line:hover{background:#F0FAF3;border-color:#05A948}
.btn.copied{background:#1F6F4A;border-color:#1F6F4A;color:#fff}
@media(max-width:480px){.btn{width:100%}}

/* ── 箇条書き（チェック） ─────────────────────────────── */
.chks li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--rule);
  font-size:15px;line-height:1.95;color:#2F2A22}
.chks li:first-child{border-top:1px solid var(--rule)}
.chks li::before{content:"";position:absolute;left:3px;top:22px;width:11px;height:6px;
  border-left:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange);transform:rotate(-45deg)}

/* ── 定義リスト（概要・返信について） ─────────────────── */
.spec{border-top:1px solid var(--rule)}
.spec .r{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule)}
.spec dt{font:400 11.5px/2 var(--f-en);letter-spacing:.22em;text-transform:uppercase;color:var(--orange-deep)}
.spec dd{font-size:15px;line-height:1.95}
.spec dd a{border-bottom:1px solid var(--rule)}
@media(max-width:620px){.spec .r{grid-template-columns:1fr;gap:4px;padding:16px 0}}
/* 単独で置くリンク（文章の途中ではないもの）は、指で押せる高さを確保する */
.tap{display:inline-flex;align-items:center;min-height:46px}
.mail{font:500 clamp(15px,2vw,17px)/1.5 var(--f-en);color:var(--navy);border-bottom:1px solid var(--orange)}
.mail:hover{color:var(--orange-deep)}
.note{margin:22px 0 0;font-size:12.5px;line-height:1.95;color:var(--gray-l)}

/* ── 手順（当日の流れ） ───────────────────────────────── */
.steps{counter-reset:st}
.steps li{position:relative;counter-increment:st;padding:0 0 26px 54px}
.steps li::before{content:"0" counter(st);position:absolute;left:0;top:2px;
  font:400 12px/1 var(--f-en);letter-spacing:.14em;color:var(--orange-deep)}
.steps li::after{content:"";position:absolute;left:11px;top:22px;bottom:2px;width:1px;background:var(--rule)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 6px;font:700 16px/1.7 var(--f-go);color:var(--navy)}
.steps p{margin:0;font-size:14.5px;line-height:1.95;color:#2F2A22}

/* ── よくある質問 ─────────────────────────────────────── */
.qa{border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{position:relative;display:block;padding:18px 44px 18px 26px;cursor:pointer;
  font:700 15px/1.75 var(--f-go);color:var(--navy);list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";position:absolute;left:0;top:19px;font:400 13px/1.7 var(--f-en);color:var(--orange-deep)}
.qa summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:1.5px solid var(--gray);border-bottom:1.5px solid var(--gray);
  rotate:45deg;transition:rotate .3s var(--e)}
.qa details[open] summary::after{rotate:-135deg}
.qa .a{padding:0 8px 20px 26px;font-size:14.5px;line-height:2;color:#2F2A22}
.qa .a p{margin:0 0 12px}
.qa .a p:last-child{margin-bottom:0}

/* ── 締めの呼びかけ ───────────────────────────────────── */
.cta{background:var(--navy-ink);color:rgba(245,239,229,.74);padding:clamp(40px,6vw,64px) 0;text-align:center}
.cta h2{margin:0 0 14px;font:900 clamp(20px,3vw,27px)/1.6 var(--f-go);color:var(--white)}
.cta p{margin:0 0 26px;font-size:14.5px;line-height:2}
.cta .acts{justify-content:center}
.cta .btn{background:transparent;border-color:var(--rule-d);color:var(--white)}
.cta .btn:hover{border-color:var(--orange-pale)}
.cta .btn.fill{background:var(--white);border-color:var(--white);color:var(--navy-ink)}
.cta .btn.fill:hover{background:var(--orange-pale);border-color:var(--orange-pale)}

/* ── フッター ─────────────────────────────────────────── */
.ft{background:var(--navy-ink);color:rgba(245,239,229,.62);padding:40px 0;
  box-shadow:0 -1px 0 rgba(245,239,229,.08)}
.ft .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font:400 11.5px/1.9 var(--f-en);letter-spacing:.1em}
.ft nav{display:flex;gap:18px;flex-wrap:wrap}
/* 会社の公式SNS（Instagram / Threads） */
.ft .fsns a{border-bottom:1px solid rgba(245,239,229,.28)}
/* フッターのリンクは指で押せる高さ（44px）にする */
.ft a{display:inline-flex;align-items:center;min-height:44px;color:rgba(245,239,229,.8);transition:color .3s var(--e)}
.ft a:hover{color:var(--white)}

/* ── 出現アニメ（JSが動くときだけ隠す） ───────────────── */
html.js .rv{opacity:0;translate:0 18px;transition:opacity .9s var(--e),translate .9s var(--e)}
html.js .rv.on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;translate:0 0}
}

/* ==========================================================================
   ここから下は「LPとしての見せ方」。上の素のルールより後ろに置くこと。
   詳細度が同じなら後ろが勝つので、前に置くと打ち消されます。
   ========================================================================== */

/* ── ヒーロー ─────────────────────────────────────────── */
.lphero{position:relative;isolation:isolate;overflow:hidden;background:var(--white);
  min-height:clamp(430px,66vh,660px);display:flex;align-items:flex-end;
  padding:clamp(88px,14vh,140px) 0 clamp(60px,9vh,88px)}
.lphero .lph{position:absolute;inset:0;margin:0;z-index:-2}
.lphero .lph img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* クリームの幕。文字は左に並ぶので、左側だけを明るくする。
   全面を濃くすると、台座（＝土台）が白く飛んで消える。
   上端は透明にしない——追従ヘッダーが写真の上に座って読めなくなるため。 */
.lphero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(251,248,244,.30) 0%,rgba(251,248,244,0) 26%,rgba(245,239,229,0) 62%,rgba(245,239,229,.40) 100%),
    linear-gradient(90deg,rgba(251,248,244,.66) 0%,rgba(251,248,244,.46) 40%,rgba(251,248,244,.08) 66%,rgba(251,248,244,0) 80%)}
/* スマホは文字が画面いっぱいに広がるので、全体をもう少し明るく */
@media(max-width:760px){
  .lphero::after{background:linear-gradient(180deg,rgba(251,248,244,.40) 0%,rgba(245,239,229,.46) 40%,rgba(245,239,229,.66) 100%)}
}
.lphero .wrap{width:100%}
.lphero .kick{margin:0 0 20px;color:var(--orange-deep)}
.lphero .kick::before{background:var(--orange-deep)}
/* 句ごとに折り返す（.seg）。<br> だと、狭い画面で「、」だけが次の行に落ちる */
.lphero h1 .seg{display:inline-block;max-width:100%}
.lphero h1{margin:0 0 20px;color:var(--navy);
  font:900 clamp(22px,7.2vw,50px)/1.42 var(--f-go);word-break:keep-all;overflow-wrap:anywhere;
  text-shadow:none}
.lphero .lead{max-width:34em;color:var(--charcoal);
  font-size:clamp(14px,1.5vw,16px);line-height:2.1}
.lphero .acts{margin-top:clamp(26px,4vw,36px)}
/* 写真の上に置くので、半透明にすると下の暗さが透けて読めなくなる。不透明にする */
.lphero .btn{background:var(--paper);border-color:var(--rule);color:var(--navy)}
.lphero .btn:hover{border-color:var(--orange-deep)}
.lphero .btn.fill{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.lphero .btn.fill:hover{background:var(--navy);border-color:var(--navy)}
.lphero .scr{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:1;
  font:400 9.5px/1 var(--f-en);letter-spacing:.3em;color:var(--gray);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.lphero .scr i{width:1px;height:34px;background:linear-gradient(var(--gray),transparent);
  animation:scr 2.4s var(--e) infinite}
@keyframes scr{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:899px){.lphero .scr{display:none}}
/* ※ この指定は、.lphero h1 の元の指定（font の一括指定）より後ろに置くこと。
   前に置くと font の一括指定に大きさを消され、句が2行に割れる（2026-09-16 に実際に起きた） */
/* PC：文字の列は左の44%までに収める。
   写真は右半分に器や本を置いてあるので、列を広げると見出しの末尾が器に重なる
   （1440pxで「ています。」が器の上に乗っていた）。写真は横幅いっぱいに表示しているため、
   写真のほうを横にずらすことはできない。 */
@media(min-width:761px){
  .lphero .wrap{max-width:1200px}
  .lphero .wrap > *{max-width:min(520px,44vw)}
  /* いちばん長い句は11字（「積み上げてきたことを、」）。列の幅 44vw に12字ぶんの余裕で収める。
     ここを上げると、1100px前後で「を、」「す。」だけが次の行に落ちる */
  .lphero h1{font-size:clamp(26px,3.5vw,42px)}
}

/* ── 帯（写真の上に置く締めの呼びかけ） ───────────────── */
.band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-ink);
  color:rgba(245,239,229,.78);padding:clamp(54px,8vw,92px) 0;text-align:center}
.band .lph{position:absolute;inset:0;margin:0;z-index:-2}
.band .lph img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(21,38,62,.86)}
.band h2{margin:0 0 16px;color:var(--white);font:900 clamp(21px,3.2vw,30px)/1.6 var(--f-go)}
.band p{margin:0 0 28px;font-size:14.5px;line-height:2}
.band .acts{justify-content:center}
.band .btn{background:transparent;border-color:var(--rule-d);color:var(--white)}
.band .btn:hover{border-color:var(--orange-pale)}
/* 濃色面の上では、弁柄より生成りの方が強く出る（13.32:1） */
.band .btn.fill{background:var(--white);border-color:var(--white);color:var(--navy-ink)}
.band .btn.fill:hover{background:var(--orange-pale);border-color:var(--orange-pale)}

/* ── 見出しまわりを大きく ─────────────────────────────── */
.sec{padding:clamp(46px,7vw,88px) 0}
.h2{margin:0 0 14px;font:900 clamp(20px,2.9vw,29px)/1.58 var(--f-go)}
.h2 .no{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font:400 12px/1 var(--f-en);letter-spacing:.2em;color:var(--orange-deep)}
.h2 .no::after{content:"";height:1px;flex:1;max-width:76px;background:var(--rule)}
.sec.mist .h2 .no::after{background:rgba(58,54,48,.2)}

/* ── 写真（本文の中） ─────────────────────────────────── */
.ph{position:relative;margin:0;overflow:hidden;border-radius:16px;background:var(--navy-mist)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.wide{aspect-ratio:2400/1030}
.ph.tall{aspect-ratio:1200/1500}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.6vw,46px);align-items:center}
.split.rev > :first-child{order:2}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:24px}.split.rev > :first-child{order:0}}

/* ── 札（カード） ─────────────────────────────────────── */
.card{transition:translate .5s var(--e),border-color .5s var(--e),box-shadow .5s var(--e)}
@media(hover:hover){.card:hover{translate:0 -4px;border-color:var(--orange-pale);
  box-shadow:0 20px 44px -30px rgba(58,54,48,.55)}}

/* ── 数字の帯 ─────────────────────────────────────────── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,26px)}
@media(max-width:620px){.figs{grid-template-columns:1fr}}
.figs .f{padding:clamp(18px,2.6vw,24px) 0;border-top:1px solid var(--rule)}
.figs .f b{display:block;font:400 clamp(26px,4vw,38px)/1.2 var(--f-en);color:var(--navy);letter-spacing:.02em}
.figs .f b i{font-style:normal;font-size:.42em;letter-spacing:.1em;margin-left:6px;color:var(--gray)}
.figs .f span{display:block;margin-top:8px;font-size:13px;line-height:1.8;color:var(--gray)}

/* ── スマホの下に出る申し込みの帯 ─────────────────────── */
.fixcta{display:none}
@media(max-width:860px){
  html.js .fixcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,248,244,.94);backdrop-filter:blur(12px);
    box-shadow:0 -1px 0 var(--rule),0 -10px 30px -18px rgba(58,54,48,.35);
    translate:0 130%;transition:translate .55s var(--e)}
  html.js .fixcta.on{translate:0 0}
  html.js .fixcta .btn{width:100%;min-height:50px}
}

/* ── 出現の動き（LP用） ───────────────────────────────── */
html.js .stg > *{opacity:0;translate:0 20px;
  transition:opacity .9s var(--e),translate .9s var(--e)}
html.js .stg.on > *{opacity:1;translate:0 0}
html.js .stg.on > *:nth-child(1){transition-delay:.04s}
html.js .stg.on > *:nth-child(2){transition-delay:.13s}
html.js .stg.on > *:nth-child(3){transition-delay:.22s}
html.js .stg.on > *:nth-child(4){transition-delay:.31s}
html.js .stg.on > *:nth-child(5){transition-delay:.40s}
html.js .stg.on > *:nth-child(6){transition-delay:.49s}
/* 写真は横に開く。.rv の「下から浮かぶ」は打ち消す */
html.js .ph.rv{opacity:1;translate:0 0;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--e)}
html.js .ph.rv.on{clip-path:inset(0 0 0 0)}
/* ヒーローの写真はゆっくり引く */
html.js .lphero .lph img{scale:1.08;transition:scale 2.2s var(--e)}
html.js .lphero.on .lph img{scale:1}
@media (prefers-reduced-motion:reduce){
  html.js .stg > *{opacity:1;translate:0 0}
  html.js .ph.rv{clip-path:none}
  html.js .lphero .lph img{scale:1}
  .lphero .scr i{animation:none}
}

/* ── 3枚並びの窓口カード ──────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,22px)}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.rc{display:flex;flex-direction:column;padding:clamp(22px,3vw,30px);
  border:1px solid var(--rule);border-radius:16px;background:var(--paper)}
.rc .no{font:400 12px/1 var(--f-en);letter-spacing:.2em;color:var(--orange-deep)}
.rc h3{margin:14px 0 10px;font:900 clamp(17px,1.9vw,20px)/1.6 var(--f-go);color:var(--navy);
  word-break:keep-all;overflow-wrap:anywhere}
.rc p{margin:0 0 20px;font-size:14px;line-height:1.95;color:#2F2A22}
.rc .acts{margin-top:auto;flex-direction:column;align-items:stretch;gap:10px}
.rc .btn{width:100%;min-height:50px;font-size:14px;padding:0 16px}

/* ヒーローは全面なので、.rv の「薄くして下げる」は当てない */
html.js .lphero.rv{opacity:1;translate:0 0}