:root{
  --bg:#f4f5f7;
  --ink:#1a1c20;
  --sub:#5c6068;
  --line:#e2e4e8;
  --acc:#2a4f9e;
  --acc-d:#1e3b78;
  --pad:clamp(20px,5vw,80px);
  --max:1180px;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--jp);font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
p,figure{margin:0}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;word-break:auto-phrase}
[hidden]{display:none!important}
.ln{display:block}
.skip-link{position:absolute;z-index:100;top:-80px;left:20px;background:#fff;padding:8px 12px}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---- ヘッダー ---- */
.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:14px var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-size:20px;font-weight:700;letter-spacing:.02em;padding:10px 0;margin-right:auto}
.site-header .brand{display:inline-flex;align-items:center;gap:10px}
.site-header .brand img{height:30px;width:auto}
.site-nav{display:flex;gap:30px}
.site-nav a{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;padding:12px 0}
.site-nav small{font-size:13px;color:var(--acc);font-weight:700;letter-spacing:.06em}
.site-nav a:hover{color:var(--acc)}
.nav-contact{display:none!important}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border:0;border-radius:6px;background:var(--acc);color:#fff;font-size:16px;font-weight:700;letter-spacing:.04em;transition:background .2s}
.btn:hover{background:var(--acc-d)}
.btn-head{min-height:44px;padding:0 22px;font-size:15px}
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu-toggle span{width:22px;height:2px;background:var(--ink);transition:transform .25s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.text-link{display:inline-block;padding:8px 0;font-size:16px;font-weight:700;color:var(--acc);border-bottom:2px solid currentColor}
.text-link::after{content:" →"}

/* ---- FV：見出しと、全面の紙と粘土の絵 ---- */
.hero{position:relative;max-width:calc(var(--max) + 2*var(--pad));min-height:calc(100vh - 87px - 120px);min-height:calc(100svh - 87px - 120px);margin:0 auto;padding:clamp(56px,8vw,120px) var(--pad) clamp(56px,6vw,96px)}
.hero-copy{position:relative;z-index:1}
/* 見出しの1行目（12字まで）が左右の余白の内側に1行で収まる大きさにする */
.hero h1{font-size:28px;font-size:clamp(22px,min(6vw,calc((100vw - 2 * var(--pad)) / 12.4)),84px);line-height:1.3;letter-spacing:.01em}
.hero h1 .ln{width:fit-content;white-space:nowrap}
/* 1行目の「は半文字ぶん左へはみ出させて説明文の左端にそろえ、2行目は半文字ぶん右へずらす */
.hero h1 .ln:first-child{text-indent:-.5em}
.hero h1 .ln:nth-child(2){margin-left:.5em}
.hero-lead .hang{margin-left:-.5em}
.hero-lead{margin-top:32px;max-width:30em;font-size:clamp(17px,1.7vw,22px);color:var(--sub)}
.hero-lead span{display:inline-block;text-indent:0}
/* 何を頼めるかの行は濃く太く（キャッチコピーの次に目に入る） */
/* FV の説明文は一文だけ（事業の並びは事業内容に任せる）。PC 幅では1行に収める */
.hero-lead{color:var(--ink);max-width:none}
@media(min-width:961px){.hero-lead{font-size:clamp(16px,1.4vw,20px)}}
.hero-note{margin-top:14px;font-size:15px;color:var(--sub)}
.hero-act .btn{min-height:56px;padding:0 40px;font-size:17px}
.form .hp{display:none}
.hero-act{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
/* FV の右：考える（点が漂う）→ 点が集まって物の形になる → 粘土の絵で止まる → また点にほどける、を物を替えながら繰り返す（site.js）
   舞台は正方形。点が漂う範囲は舞台の外まで広げるので、canvas は舞台より一回り大きい。JS が動かない・動きを減らす設定では、お店の絵1枚だけ */
.hero-art{position:absolute;z-index:0;top:50%;right:calc(var(--pad) * .25);width:min(44vw,max(240px,calc(100svh - 220px)),640px);aspect-ratio:1;translate:0 -46%;pointer-events:none}
.art-still{width:100%;height:100%;object-fit:contain;transition:opacity .6s ease}
.hero-art.run .art-still{opacity:0}
.art-dots{position:absolute;left:-30%;top:-30%;width:160%;height:160%}
/* 点が漂う範囲は舞台の外まで広がるので、FV の横だけ切る（狭い画面で横スクロールが出ないように） */
.hero{overflow-x:clip}
/* 狭い画面：文字の下に、画面幅の舞台を置く */
@media(max-width:960px){.hero{padding-bottom:0}.hero-art{position:relative;top:auto;right:auto;translate:none;width:min(100%,480px);margin:28px auto 0}}
/* 入り：見出しは1行ずつ下からせり上がり、説明とボタンが後から出る。スクロールで FV を抜ける間は文字が薄れていく（--out は site.js が 0〜1 で入れる） */
.hero-copy{opacity:calc(1 - var(--out,0) * .75);transform:translateY(calc(var(--out,0) * -40px))}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .ln{clip-path:inset(0 0 -.2em 0);animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero h1 .ln:nth-child(2){animation-delay:.18s}
  .hero-lead,.hero-act,.hero-note{animation:fade-up .9s .55s cubic-bezier(.2,.7,.2,1) both}
  .hero-act{animation-delay:.7s}
  .hero-note{animation-delay:.85s}
}
@keyframes rise{from{transform:translateY(105%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 -.2em 0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- 節の共通 ---- */
.sec{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:clamp(64px,7vw,112px) var(--pad)}
.sec-label{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(28px,3.5vw,52px);font-size:16px;font-weight:700}
.sec-label span:first-child{font-size:14px;color:var(--acc);letter-spacing:.08em}
.sec h2{font-size:clamp(31px,3.6vw,48px);line-height:1.4}
.hero+.sec{position:relative}
/* 見出しを置かない節（進め方・事業概要）は、節の名前を見出しにする */
.sec h2.sec-label{font-size:16px;line-height:1.6}
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}

/* ---- 01 私たちについて ---- */
.about-text{display:grid;gap:20px;font-size:17px}

/* ---- 02 事業内容：画面と説明を左右交互に ---- */
.service-lead{max-width:34em;margin:-8px 0 40px;color:var(--sub)}
.rows{display:grid;gap:clamp(72px,9vw,128px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.row-flip .shot{order:2}
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,28,44,.08);background:#fff}
.shot-bar{display:flex;gap:6px;padding:9px 12px;background:#f1f2f4;border-bottom:1px solid var(--line)}
.shot-bar b{width:8px;height:8px;border-radius:50%;background:#cfd2d8}
.shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center top}
.row-no{font-size:14px;font-weight:700;color:var(--acc);letter-spacing:.08em}
.row-text h3{margin:6px 0 16px;font-size:clamp(24px,2.4vw,32px)}
.row-text>p:not(.row-no){color:#2e3036;font-size:17px}
.row-text ul{margin:22px 0 26px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
/* 藍は押せる所（ボタン・相談のリンク）だけに使い、タグは灰にして役割を分ける */
.row-text li{padding:4px 14px;border-radius:999px;background:#e6e8ec;color:#3d424b;font-size:14px;font-weight:500}
/* 事業内容を見終えた所の相談の入口。藍の地に白い文字はちかちかして読みにくかったので、白の地に黒い文字・藍はボタンだけ */
.ask-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:clamp(48px,6vw,80px);padding:clamp(28px,4vw,48px) clamp(24px,4vw,56px);border-radius:12px;background:#fff;color:var(--ink)}
.ask-panel>div{max-width:34em}
.ask-head{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.5}
.ask-panel p+p{margin-top:8px;color:rgba(255,255,255,.86);font-size:16px}
.btn-light{background:#fff;color:var(--acc-d)}
.btn-light:hover{background:#e8edf8}
.service-note{margin-top:48px;font-size:14px;color:var(--sub)}

/* ---- 03 事業概要 ---- */
.flow{margin:0;padding:0;list-style:none;counter-reset:fl;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px clamp(24px,3vw,48px)}
.flow li{counter-increment:fl;position:relative;padding:44px 0 0}
.flow li::before{content:counter(fl);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-size:13px;font-weight:700;line-height:28px;text-align:center}
.flow li:not(:last-child)::after{content:"";position:absolute;left:40px;right:12px;top:13px;height:2px;background:var(--line)}
.flow strong{font-size:18px}
.flow p{font-size:16px;color:var(--sub)}
.outline{margin:0;max-width:760px}
.outline div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:4px 16px;padding:12px 0}
.outline dt{font-size:15px;color:var(--sub);font-weight:500}
.outline dd{margin:0;font-size:16px}

/* ---- 04 お問い合わせ ---- */
.contact-lead{margin-top:24px;color:var(--sub)}
.after-label{margin-top:36px;font-size:15px;font-weight:700}
.after{margin:12px 0 0;padding:0;list-style:none;counter-reset:af;display:grid;gap:10px}
.after li{counter-increment:af;position:relative;padding-left:36px;font-size:16px}
.after li::before{content:counter(af);position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;font-weight:700;line-height:24px;text-align:center}
.form{position:relative;display:grid;gap:20px;padding:clamp(24px,3vw,40px);border-radius:12px;background:#fff}
.tags{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags legend{padding:0;margin-bottom:10px;font-size:15px;font-weight:500}
.tag{position:relative}
.tag input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tag span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid #c8cfdd;border-radius:6px;background:#fff;font-size:15px;transition:background .2s,color .2s,border-color .2s}
.tag input:checked+span{background:var(--acc);border-color:var(--acc);color:#fff}
.tag input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.form label:not(.tag){display:grid;gap:6px;font-size:15px;font-weight:500}
.form input:not([type=checkbox]),.form textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid #c8cfdd;border-radius:6px;background:#fff;color:var(--ink);font:400 16px/1.6 var(--jp)}
.form input:focus,.form textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:var(--acc)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hint{font-size:14px;color:var(--sub)}
.hint a{text-decoration:underline;text-underline-offset:3px}
.form .btn{justify-self:start;min-width:220px}
.form-msg{min-height:1.6em;font-size:15px;font-weight:500}

/* ---- フッター ---- */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding:40px var(--pad);border-top:1px solid var(--line)}
.site-footer .brand{margin-right:auto;display:inline-flex;align-items:center;gap:10px}
.site-footer .brand img{height:26px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-footer nav a{font-size:15px;padding:8px 0}
.site-footer small{font-size:14px;color:var(--sub)}

/* ---- プライバシー ---- */
.legal{max-width:760px;margin:0 auto;padding:96px var(--pad)}
.legal h1{font-size:clamp(28px,4vw,40px);margin-bottom:36px}
.legal p{font-size:15px;line-height:2;margin-bottom:1.2em}
.legal a{text-decoration:underline;display:inline-block;padding:8px 0}

@media(max-width:960px){
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px var(--pad) 20px;background:var(--bg);border-bottom:1px solid var(--line)}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
  .site-nav .nav-contact{display:flex!important}
  .menu-toggle{display:flex}
  .btn-head{display:none}
  .two-col,.row{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow li:nth-child(2n)::after{display:none}
  .row-flip .shot{order:0}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(22px,calc((100vw - 2 * var(--pad)) / 12.4),42px)}
  .hero{min-height:0}
  .hero-lead{font-size:16px}
  .hero-act .btn{min-height:52px;padding:0 28px;font-size:16px}
  .outline div{grid-template-columns:5.5em minmax(0,1fr)}
  .flow{grid-template-columns:1fr;gap:0}
  .flow li{padding:0 0 26px 44px}
  .flow li:not(:last-child)::after{left:13px;right:auto;top:34px;bottom:4px;width:2px;height:auto}
  .form-row{grid-template-columns:1fr}
  .form .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}
/* 見本の画面は載せない＝事業内容は文字の行だけ */
.rows{gap:0}
.row{grid-template-columns:1fr;padding:clamp(32px,4vw,48px) 0}
.row-text{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(24px,5vw,72px)}
.row-text{align-content:start}
.row-head{grid-column:1;grid-row:1/6}
.row-ico{display:block;width:auto;height:auto;max-width:132px;max-height:112px;margin:0 0 18px}
.row-text>p:not(.row-no),.row-text ul,.row-text .text-link{grid-column:2}
.row-text>p{grid-row:2}
.row-text ul{grid-row:3}
/* 事業ごとの相談のリンクは右寄せ（本人） */
.row-text .text-link{grid-row:4;justify-self:end}
.row-text>p.row-change{grid-row:1;margin-bottom:12px;font-size:17px;font-weight:700;color:var(--acc-d)}
.row-text ul{margin:18px 0 18px}
.row-text .text-link{justify-self:end;padding:12px 0}
/* 事業内容のコマ撮り：右の列に置き、画面に入ったら4コマを1回だけ進めて最後のコマで止まる（JS が無い時は最後のコマ） */
.row-text:has(.row-anim){grid-template-columns:minmax(0,4fr) minmax(0,8fr) minmax(0,3fr)}
.row-anim{grid-column:3;grid-row:1/6;align-self:start;justify-self:end;position:relative;width:100%;max-width:240px;aspect-ratio:1}
.row-anim img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.row-anim img.on{opacity:1}
@media(max-width:960px){.row-text{grid-template-columns:1fr}.row-text>*{grid-column:1!important;grid-row:auto!important}.row-text:has(.row-anim){grid-template-columns:1fr}.row-anim{justify-self:start;max-width:120px;margin-top:16px}}

/* ---- フッターは、ページの地 #f4f5f7 を少しだけ濃くした灰。ヘッダーは色を付けず地と同じ色に下の線1本（色を付けるとしょぼく見えた） ---- */
:root{--frame:#e7e9ec}
.site-footer{background:var(--frame);border-top:0}
/* PC 幅は FV の文字の固まりを、右の絵と同じく FV の高さの真ん中にそろえる（上の余白から積むと絵より下に寄って見えた） */
@media(min-width:961px){
  .hero{display:flex;align-items:center;padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(40px,4vw,64px)}
}