/* ==========================================================================
   しーたLabo ／ ポートフォリオ 共通スタイル

   設計方針
   - 白地に統一し、指し色は深い青緑を1色だけ。ロゴが黒一色なので、
     サイト側で色を増やさない。色を持つのは「作品そのもの」だけにする。
   - 各作品にパレット帯を添える。並べて見たとき配色が次々に変わり、
     「案件ごとに作り分けている」ことが画面で伝わる。
   - 制作物はすべて架空の企業・店舗を題材にしたサンプル。
     受注実績ではないことを、隠さず明記する。
   - トップは厳選6点、全件は works.html。同じカード部品を両方で使う。
   ========================================================================== */

:root{
  /* グレーは中立ではなく、わずかに青緑へ寄せている。地全体が指し色と同じ空気になる */
  --paper:#ffffff;
  --sunk:#f3f8f7;
  --card:#ffffff;
  --ink:#101514;
  --ink-2:#3a4342;
  --muted:#5f6b69;
  --faint:#8e9a98;
  --line:#e0eae8;
  --line-2:#c2d0cd;

  --accent:#0d8a7d;        /* 明るい青緑：罫・番号・バッジ */
  --accent-ink:#096056;    /* 濃い青緑：白地の上の文字、面で使う地色 */
  --accent-deep:#07463f;
  --accent-soft:#e9f5f3;

  --max:1180px;
  --gut:clamp(20px,5vw,44px);
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --disp:"Poppins","Noto Sans JP",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:400;
  line-height:1.95;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent-soft)}
[hidden]{display:none !important}

/* キーボードだけで操作する人が、ナビを飛ばして本文へ行けるようにする */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent-ink);color:#fff;padding:12px 20px;text-decoration:none;font-size:.85rem;
}
.skip:focus{left:0}

.wrap{width:min(100% - (var(--gut) * 2),var(--max));margin-inline:auto}
.sec{padding:clamp(64px,8vw,116px) 0}
.sec--line{border-top:1px solid var(--line)}
.sec--sunk{background:var(--sunk);border-top:1px solid var(--line)}

h1,h2,h3{margin:0;font-weight:500;line-height:1.5;text-wrap:balance;letter-spacing:.03em}
h2{font-size:clamp(1.32rem,2.7vw,1.9rem)}
h3{font-size:1.05rem}
p{margin:0;max-width:38em}
.lead{color:var(--muted);font-size:clamp(.94rem,1.3vw,1.02rem);line-height:2.1;font-weight:300}
.note{color:var(--faint);font-size:.79rem;line-height:1.85}

.lbl{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--disp);font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink);
}
.lbl::before{content:"";width:26px;height:3px;background:var(--accent);flex:none}
.head{margin-bottom:clamp(36px,4.6vw,58px);display:flex;flex-direction:column;gap:.7rem}

/* 2文以上のリードを、1文ずつ行として立てる。桁が足りない画面では自然に折り返す */
.lead-lines{max-width:none}
.lead-lines span{display:block}

/* ボタン。ロゴが幾何学的なので、角は落とさず直線で通す */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;text-decoration:none;cursor:pointer;
  font-family:var(--disp);font-size:.87rem;font-weight:600;letter-spacing:.06em;
  border:1px solid var(--accent-ink);transition:background .2s,color .2s;
}
.b--fill{background:var(--accent-ink);color:#fff}
.b--fill:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.b--line{background:transparent;color:var(--accent-ink)}
.b--line:hover{background:var(--accent-soft)}
.b::after{content:"→";transition:transform .2s}
.b:hover::after{transform:translateX(3px)}

/* ---------- ヘッダー ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr-in{display:flex;align-items:center;gap:22px;height:72px}
.mark{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.mark img{width:32px;height:32px;mix-blend-mode:multiply}
.mark-t{font-family:var(--disp);font-size:1.02rem;font-weight:500;letter-spacing:.04em;line-height:1}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-size:.84rem;text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover,.nav a.cur{color:var(--accent-ink)}
.nav a.cur{font-weight:500}
.brandbar{height:4px;background:linear-gradient(90deg,var(--accent-ink),var(--accent) 55%,#3fb7a4)}

/* スマートフォン用の開閉メニュー */
.navbtn{
  display:none;margin-left:auto;flex:none;width:46px;height:46px;padding:0;
  border:1px solid var(--line-2);background:var(--card);cursor:pointer;
  align-items:center;justify-content:center;gap:5px;flex-direction:column;
}
.navbtn span{display:block;width:19px;height:2px;background:var(--accent-ink);transition:transform .25s,opacity .2s}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.panel{display:none;border-top:1px solid var(--line);background:var(--card)}
.panel a{
  display:block;padding:16px 0;text-decoration:none;font-size:.92rem;
  color:var(--ink-2);border-bottom:1px solid var(--line);
}
.panel a:last-child{border-bottom:0}
@media (max-width:800px){
  .nav{display:none}
  .navbtn{display:flex}
  .panel.open{display:block}
}

/* ---------- 方眼の面 ----------
   ロゴが幾何学的なので、背景も直線の方眼で受ける。右奥に敷いてぼかし、
   余白ではなく「間」に見せる。トップのヒーローと一覧ページの見出し帯で共用 */
.gridbg{position:relative;overflow:hidden}
.gridbg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(52px,6vw,84px) clamp(52px,6vw,84px);
  -webkit-mask-image:radial-gradient(105% 78% at 88% 18%,#000 0%,transparent 66%);
  mask-image:radial-gradient(105% 78% at 88% 18%,#000 0%,transparent 66%);
}
.gridbg > .wrap{position:relative;z-index:1}

/* ---------- ヒーロー ---------- */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(48px,6vw,80px)}
.hero-in{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,4.6vw,64px);align-items:center}
.hero-logo{width:100%;max-width:430px;mix-blend-mode:multiply}
/* ロゴ下の線は、ロゴの文字の左端から右端までちょうどの長さにする。
   ロゴ画像は左右に約1.5%ずつ余白があるので、そのぶん内側に寄せる（--lw はロゴの表示幅） */
.hero-mark{--lw:min(100%,430px);display:block;position:relative;
  width:calc(var(--lw) * .97);margin-left:calc(var(--lw) * .015);
  height:3px;margin-top:clamp(20px,2.6vw,30px)}
.hero h1{font-size:clamp(1.34rem,3.2vw,2.15rem);font-weight:400;line-height:1.72;margin-bottom:1.3rem}
.hero h1 em{font-style:normal}
/* 見出しが語の途中で割れないよう、意味のまとまりごとに折り返させる。
   下線は句ごとに引く。同じ行に並んだ句どうしは隙間なく繋がって1本に見える */
.hero h1 .ph{display:inline-block;position:relative;padding-bottom:4px}
.hero .lead-lines{font-size:clamp(.88rem,1.15vw,.97rem);letter-spacing:.01em}
.hero-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.4vw,38px)}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:clamp(26px,4vw,36px)}
  .hero-logo{max-width:320px}
  .hero-mark{--lw:min(100%,320px)}
}

/* ---------- ロゴ下の線と見出しの下線（1本の糸） ----------
   線 … 深緑の実線。ロゴ下の線は要素そのもの、見出しの下線は ::after。
        見出しの下線は右へ1pxはみ出させ、隣の句の下線と重ねる（境目に白い隙間が出るのを防ぐ）
   光 … 線の上を流れる光の粒。ロゴ下の線も見出しの下線も ::before。
        背景の位置を動かすので線の外にはみ出さない */
.hero-mark{background:var(--accent)}
.hero h1 .ph::after{content:"";position:absolute;left:0;right:-1px;bottom:0;height:2px;background:var(--accent)}
.hero-mark::before,
.hero h1 .ph::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0)) no-repeat;
  background-size:100px 100%;background-position:-100px 0}
.hero-mark::before{top:0}
.hero h1 .ph::before{height:2px;right:-1px}

/* ---------- ヒーローの登場（開いたときに一度だけ） ----------
   1. ロゴと見出しの文字が現れる
   2. 線が、ロゴ下 →「白紙の段階から、」→「ていねいに紐解き、」→「確かな形へ。」と
      1本の糸のように渡っていく（最初は加速、中は等速、最後は減速）
   3. 光の粒は、線の先端の少し後ろ（24px）に乗って一緒に走る。
      先端に置くと白い背景に溶けて「線が薄れる」ように見えるため、先端は深緑のまま残す
   4. 各線の端に着くと、光はそのまま端から抜けていく。同じ行の次の句では光がつながって見える
   5. リード文とボタンが続く
   線は clip-path で左から見せる。光は線と 同じ長さ・同じ遅れ・同じ加減速 で動かすので、
   光と先端の距離は常に24pxに保たれる。JSは使わない */
@keyframes hero-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hero-logo{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hero-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tip{from{background-position:-124px 0}to{background-position:calc(100% - 24px) 0}}
@keyframes tip-exit{from{background-position:calc(100% - 24px) 0}to{background-position:calc(100% + 100px) 0}}
.hero-logo{animation:hero-logo .85s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .ph{animation:hero-up .5s cubic-bezier(.2,.7,.2,1) both}
.hero h1 .ph:nth-child(1){animation-delay:.1s}
.hero h1 .ph:nth-child(2){animation-delay:.2s}
.hero h1 .ph:nth-child(3){animation-delay:.3s}
/* 線：ロゴ下 .25〜.95s → 1本目 .95〜1.42s → 2本目 1.42〜1.95s → 3本目 1.95〜2.31s（約600px/秒） */
.hero-mark{animation:hero-draw .7s cubic-bezier(.4,0,1,1) .25s both}
.hero h1 .ph:nth-child(1)::after{animation:hero-draw .47s linear .95s both}
.hero h1 .ph:nth-child(2)::after{animation:hero-draw .53s linear 1.42s both}
.hero h1 .ph:nth-child(3)::after{animation:hero-draw .36s cubic-bezier(0,0,.2,1) 1.95s both}
/* 光：線と同じ動きで先端の少し後ろを走り、端に着いたら約0.2秒で抜けていく。
   その後は8秒おきに、光だけが同じ道順で流れる */
.hero-mark::before{animation:tip .7s cubic-bezier(.4,0,1,1) .25s both, tip-exit .2s linear .95s forwards, glint-0 8s linear 7.3s infinite}
.hero h1 .ph:nth-child(1)::before{animation:tip .47s linear .95s both, tip-exit .2s linear 1.42s forwards, glint-1 8s linear 7.3s infinite}
.hero h1 .ph:nth-child(2)::before{animation:tip .53s linear 1.42s both, tip-exit .2s linear 1.95s forwards, glint-2 8s linear 7.3s infinite}
.hero h1 .ph:nth-child(3)::before{animation:tip .36s cubic-bezier(0,0,.2,1) 1.95s both, tip-exit .3s ease-out 2.31s forwards, glint-3 8s linear 7.3s infinite}
.hero .lead{animation:hero-up .6s ease 1.4s both}
.hero-act{animation:hero-up .6s ease 1.6s both}

/* ---------- 繰り返しの光 ----------
   線を引き終えて約5秒後（7.3s）から、8秒おきに光だけが同じ道順で流れる。
   4本とも同じ8秒周期で、各線の光は「前の線の光が右端に届いた瞬間」に始まるよう割合を決めてある。
   光の幅は100px、速さは約600px/秒（パソコン幅の線の長さ 417/283/316/213px から計算）。 */
@keyframes glint-0{0%{background-position:-100px 0}10.8%,100%{background-position:calc(100% + 100px) 0}}
@keyframes glint-1{0%,8.7%{background-position:-100px 0}16.7%,100%{background-position:calc(100% + 100px) 0}}
@keyframes glint-2{0%,14.6%{background-position:-100px 0}23.3%,100%{background-position:calc(100% + 100px) 0}}
@keyframes glint-3{0%,21.2%{background-position:-100px 0}27.7%,100%{background-position:calc(100% + 100px) 0}}

@media (prefers-reduced-motion:reduce){
  .hero-logo,.hero-mark,.hero h1 .ph,.hero h1 .ph:nth-child(n)::after,
  .hero .lead,.hero-act{animation:none;opacity:1;transform:none;clip-path:none}
  .hero-mark::before,.hero h1 .ph:nth-child(n)::before{display:none}
}

/* ---------- 一覧ページの見出し帯 ---------- */
.pg{padding:clamp(44px,6vw,76px) 0 clamp(30px,3.8vw,48px)}
.pg h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;margin-top:.6rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.pg h1 small{font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--accent-ink)}
.pg .lead{margin-top:.9rem}

/* ---------- ソリューション ----------
   6項目（2026-09-30 に「AI活用・業務自動化」を追加）。
   パソコンは 3列×2段、タブレットは 2列×3段、スマートフォンは 1列。どの幅でも空きマスが出ない */
.able{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.able-c{background:var(--card);padding:clamp(24px,3vw,32px) clamp(20px,2.5vw,28px);display:flex;flex-direction:column;gap:.6rem}
@media (max-width:900px){
  .able{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .able{grid-template-columns:1fr}
}
.able-c h3{font-size:.98rem;font-weight:500}
.able-c h3 .en{display:block;margin-top:.3rem;font-family:var(--disp);font-size:.68rem;font-weight:600;letter-spacing:.1em;color:var(--faint)}
.able-c p{font-size:.85rem;line-height:1.95;color:var(--muted);max-width:none;font-weight:300}

/* ---------- 作品カード（トップ・一覧で共用） ---------- */
.disclaim{
  margin-bottom:clamp(28px,3.6vw,42px);padding:1rem 1.3rem;
  border:1px solid var(--line-2);border-left:3px solid var(--accent);background:var(--card);
}
.disclaim p{font-size:.86rem;line-height:1.95;max-width:52em;color:var(--ink-2)}
.disclaim b{font-weight:700}

/* 絞り込み。JSが動くときだけ出すので、無効でも全件見える */
.filters{display:none;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,36px)}
.chip{
  font:inherit;font-size:.82rem;letter-spacing:.04em;cursor:pointer;
  padding:9px 18px;border:1px solid var(--line-2);background:var(--card);color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed="true"]{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.chip small{font-family:var(--disp);font-size:.9em;opacity:.7;margin-left:.4em}
.empty{display:none;padding:2rem 0;color:var(--faint);font-size:.9rem}

.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(26px,3.2vw,40px)}
/* トップの厳選6点。3列固定にして、最後の行が伸びないようにする */
.sel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,34px)}
@media (max-width:1000px){ .sel{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .sel{grid-template-columns:1fr} }

.work{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,transform .25s}
.work::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:2}
.work:hover{border-color:var(--line-2);box-shadow:0 12px 34px rgba(9,96,86,.10);transform:translateY(-3px)}
.work:hover::before{transform:scaleX(1)}
.shot{position:relative;overflow:hidden;aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--sunk)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.work:hover .shot img{transform:scale(1.02)}

.pal{display:flex;height:6px}
.pal span{flex:1}

.work-b{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:.65rem;flex:1}
.work-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.work-n{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--accent-ink)}
.work-kind{font-size:.7rem;letter-spacing:.1em;color:var(--accent-ink);background:var(--accent-soft);padding:3px 10px}
.work h3{font-size:1.08rem;font-weight:500;line-height:1.55}
.work-ind{font-size:.79rem;color:var(--faint);letter-spacing:.04em}
/* トップの厳選カードにだけ付く、「どの提供内容の実例か」の一行 */
.work-sol{font-size:.74rem;letter-spacing:.04em;color:var(--faint);padding-top:.2rem;border-top:1px dashed var(--line-2)}
.work-sol b{color:var(--accent-ink);font-weight:500}
.work p{font-size:.855rem;line-height:1.9;color:var(--muted);max-width:none;font-weight:300;flex:1}
.go{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:.35rem;
  font-family:var(--disp);font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--accent-ink);
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;transition:border-color .2s,color .2s;
}
.go::after{content:"↗";font-size:.9em;transition:transform .2s}
.go:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.go:hover::after{transform:translate(2px,-2px)}
.more{display:flex;justify-content:center;margin-top:clamp(34px,4vw,52px)}

/* ---------- 進め方 ---------- */
.flow{border-top:1px solid var(--line-2)}
.fc{
  display:grid;grid-template-columns:3rem 12.5rem 1fr;gap:clamp(12px,2.2vw,28px);
  align-items:start;padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
}
.fc b{font-family:var(--disp);font-size:1.12rem;font-weight:600;letter-spacing:.06em;color:var(--accent);line-height:1.6}
.fc h3{font-size:1rem;font-weight:500;line-height:1.6}
.fc p{font-size:.87rem;line-height:1.95;color:var(--muted);max-width:44em;font-weight:300}
@media (max-width:820px){
  .fc{grid-template-columns:2.6rem 1fr;row-gap:.35rem}
  .fc p{grid-column:2}
}

/* ---------- よくあるご質問 ---------- */
.faq{border-top:1px solid var(--line-2);max-width:52rem}
.q{border-bottom:1px solid var(--line-2);background:var(--card)}
.q summary{
  list-style:none;cursor:pointer;padding:20px clamp(16px,2.2vw,24px);
  display:flex;align-items:flex-start;gap:.9rem;font-size:.95rem;font-weight:500;line-height:1.75;
}
.q summary::-webkit-details-marker{display:none}
.q summary::before{content:"Q";font-family:var(--disp);font-weight:600;color:var(--accent);flex:none;line-height:1.75}
.q summary::after{
  content:"";flex:none;margin-left:auto;width:11px;height:11px;margin-top:.55em;
  border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(45deg);transition:transform .25s;
}
.q[open] summary::after{transform:rotate(-135deg)}
.q summary:hover{background:var(--accent-soft)}
.q-a{padding:0 clamp(16px,2.2vw,24px) 22px calc(clamp(16px,2.2vw,24px) + 1.9rem)}
.q-a p{font-size:.875rem;line-height:2;color:var(--muted);font-weight:300;max-width:44em}
.q-a p + p{margin-top:.8rem}

/* ---------- プロフィール ---------- */
.prof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:start}
.prof-txt{display:flex;flex-direction:column;gap:1.15rem}
.dl{margin:0;border-top:1px solid var(--line)}
.dl div{display:grid;grid-template-columns:7em 1fr;border-bottom:1px solid var(--line)}
.dl dt{padding:14px 0;font-size:.8rem;color:var(--faint);letter-spacing:.06em}
.dl dd{margin:0;padding:14px 0;font-size:.89rem;line-height:1.9}
@media (max-width:820px){
  .prof{grid-template-columns:1fr}
  .dl div{grid-template-columns:6em 1fr}
}

/* ---------- 連絡 ---------- */
.cta{background:var(--accent-ink);color:#fff;padding:clamp(48px,6vw,84px) 0 clamp(58px,7.5vw,96px)}
.cta .lbl{color:rgba(255,255,255,.86)}
.cta .lbl::before{background:rgba(255,255,255,.65)}
.cta h2{font-size:clamp(1.3rem,2.8vw,1.9rem);color:#fff}
.cta .lead{color:rgba(255,255,255,.82)}
.cta-in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
.cta-txt{display:flex;flex-direction:column;gap:1.1rem}
.cta-alt{margin-top:.4rem;font-size:.84rem;color:rgba(255,255,255,.7);line-height:1.9}
.cta-alt a{font-family:var(--disp);color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.cta-alt a:hover{border-bottom-color:#fff}
@media (max-width:860px){ .cta-in{grid-template-columns:1fr} }

/* 一覧ページ下部の、トップの問い合わせへ戻す帯 */
.band{background:var(--accent-ink);color:#fff;padding:clamp(44px,5.6vw,72px) 0}
.band-in{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);align-items:center;justify-content:space-between}
.band h2{color:#fff;font-size:clamp(1.2rem,2.4vw,1.6rem)}
.band p{color:rgba(255,255,255,.8);font-size:.92rem;margin-top:.5rem;font-weight:300}
.band .b{border-color:#fff;background:#fff;color:var(--accent-ink)}
.band .b:hover{background:transparent;color:#fff;border-color:#fff}

.form{display:flex;flex-direction:column;gap:1rem}
.f-row{display:flex;flex-direction:column;gap:.45rem}
.f-row label{font-size:.83rem;font-weight:500;color:rgba(255,255,255,.94);display:flex;align-items:center;gap:.6rem}
.req{font-size:.63rem;letter-spacing:.08em;background:#fff;color:var(--accent-ink);padding:2px 7px;font-weight:700}
.opt{font-size:.63rem;letter-spacing:.08em;border:1px solid rgba(255,255,255,.4);padding:1px 7px;color:rgba(255,255,255,.8)}
.form input,.form textarea,.form select{
  width:100%;padding:13px 15px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.93rem;line-height:1.7;
}
.form textarea{min-height:130px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.45)}
.form select{color:#fff}
.form select option{color:#111316;background:#fff}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 36px;border:1px solid #fff;background:#fff;color:var(--accent-ink);
  font-family:var(--disp);font-size:.9rem;font-weight:600;letter-spacing:.06em;text-decoration:none;
  cursor:pointer;transition:background .2s,color .2s;
}
.btn:hover{background:transparent;color:#fff}
.f-note{font-size:.76rem;color:rgba(255,255,255,.6);line-height:1.85}

/* ---------- フッター ---------- */
.ftr{border-top:1px solid var(--line);padding:38px 0 46px}
.ftr-in{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}
.ftr .note{max-width:46em}
.ftr-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.8rem}
.ftr-nav a{text-decoration:none;color:var(--muted)}
.ftr-nav a:hover{color:var(--accent-ink)}

/* ---------- 出現 ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .work:hover{transform:none}
  .work:hover .shot img{transform:none}
}