/* ACTIV LAB 共通スタイル（index.html と office-3d/ で共有）
   2026-09-13 index.html の <style> をそのまま移し、Office 3D 用の部品を足した */
:root{
  --paper:#FBFAF7; --paper2:#F1F0EA;
  --ink:#14202E; --ink2:#1D2B3C;
  --text:#38424F; --sub:#5F6874; --line:#E1DFD8;
  --accent:#1B4B77; --accent-h:#153C61; --accent-l:#8FBBE2;
  --onink:#D9DFE7; --onink-sub:#A2ADBB;
  --bar:56px;
  --sans:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','YuGothic','Noto Sans JP','Meiryo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 8px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--sans); background:var(--paper); color:var(--text);
  line-height:1.95; font-size:15px; font-weight:500;
  /* 語の途中で割らない。折り返してよい位置は本文に U+200B で入れてある（lp-build の zwsp.py） */
  word-break:keep-all; line-break:strict; overflow-wrap:normal;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.dark a:focus-visible,.dark button:focus-visible,footer a:focus-visible{outline-color:var(--accent-l)}
.wrap{--gut:22px;width:100%;max-width:1080px;margin:0 auto;padding:0 var(--gut)}
@media (max-width:344px){.wrap{--gut:16px}}
.nw{white-space:nowrap}
/* 見出しは <br> で改行位置を決めている。入りきらない幅だけ通常の折り返しに戻す */
h1,h2{word-break:normal}

/* ---------- 固定バー ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar); z-index:80;
  background:rgba(251,250,247,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.bar.on{border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(20,32,46,.05)}
.bar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;min-width:0;padding:10px 0;white-space:nowrap;flex-wrap:nowrap}
.logo b{font-size:16px;font-weight:800;letter-spacing:.14em;color:var(--ink)}
.logo span{font-size:10.5px;letter-spacing:.16em;color:var(--sub);font-weight:700}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 18px;border-radius:3px;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-decoration:none;white-space:nowrap;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  transition:background .2s,border-color .2s,color .2s;
  font-family:inherit;cursor:pointer;
}
.btn:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn.ghost{background:transparent;color:var(--accent);border-color:#C3CDD8}
.btn.ghost:hover{background:#EDF1F5;border-color:var(--accent)}
.btn.lg{height:50px;padding:0 26px;font-size:14px}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:#E6ECF2;border-color:#E6ECF2}

/* ---------- メニュー ---------- */
.gnav{display:flex;align-items:center;gap:28px}
.gnav ul{list-style:none;display:flex;gap:26px}
.gnav .nl{
  position:relative;display:inline-block;padding:10px 0;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--ink);text-decoration:none;
}
.gnav .nl::after{
  content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.gnav .nl:hover::after,.gnav .nl[aria-current="page"]::after{transform:scaleX(1)}
.gnav .nl[aria-current="page"]{color:var(--accent)}
.gnav .nl small{display:none}
.menu-btn{display:none}

@media (max-width:819px){
  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-11px;background:none;border:0;cursor:pointer;color:var(--ink);
  }
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{
    display:block;width:20px;height:1.5px;background:currentColor;border-radius:1px;
  }
  .menu-btn span{position:relative;transition:background .2s}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;transition:transform .26s}
  .menu-btn span::before{top:-6px}
  .menu-btn span::after{top:6px}
  .bar.open{background:var(--paper);border-bottom-color:var(--line)}
  .bar.open .menu-btn span{background:transparent}
  .bar.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
  .bar.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
  .gnav{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(20,32,46,.08);
    padding:4px 22px 24px;max-height:calc(100vh - var(--bar));max-height:calc(100svh - var(--bar));overflow:auto;
  }
  .bar.open .gnav{display:flex}
  .gnav ul{flex-direction:column;gap:0}
  .gnav li{border-bottom:1px solid var(--line)}
  .gnav .nl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:17px 0;font-size:14px}
  .gnav .nl::after{display:none}
  .gnav .nl small{display:inline;font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.02em;text-align:right}
  .gnav .btn{margin-top:20px;height:48px;font-size:14px}
}
@media (max-width:344px){.gnav{padding:4px 16px 22px}}

/* ---------- 共通 ---------- */
section{padding:0}
.pad{padding:74px 0}
.pad-s{padding:58px 0}
.tone{background:var(--paper2)}
.dark{background:var(--ink);color:var(--onink)}
.kicker{font-size:10.5px;font-weight:800;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
.dark .kicker{color:var(--accent-l)}
h2{font-size:clamp(21px, 6.2vw, 24px);font-weight:800;line-height:1.62;letter-spacing:.02em;color:var(--ink);margin:11px 0 0}
.dark h2{color:#fff}
.lead{font-size:14.5px;line-height:2.1;color:var(--text);margin-top:16px;max-width:34em}
.lead,.rows dd,.flow dd,.note,.work > span,.svc p,.prob p,.feat p{text-wrap:pretty}
.dark .lead{color:var(--onink)}
p+p{margin-top:15px}

/* ---------- ヒーロー ---------- */
.hero{padding:calc(var(--bar) + 46px) 0 8px}
.hero h1{
  font-size:clamp(23.5px, min(7.4vw, 5.6svh), 40px);
  font-weight:800; line-height:1.55; letter-spacing:.01em; color:var(--ink); margin:14px 0 0;
}
.hero h1 b{font-weight:800;color:var(--accent)}
/* 1行が12字ある見出し。スマホで4行に割れないよう小さめから始める */
.hero h1.h1-long{font-size:clamp(22px, min(6.6vw, 5.4svh), 34px)}
.hero .lead{font-size:15px;margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.shots{
  margin-top:44px; display:flex; justify-content:center; align-items:flex-end;
  gap:0; padding-bottom:6px;
}
.shots figure{
  width:31%; max-width:196px; border-radius:9px; overflow:hidden; clip-path:inset(0);
  box-shadow:0 12px 34px rgba(20,32,46,.17), 0 2px 6px rgba(20,32,46,.08);
  background:#fff;
}
.shots figure:nth-child(1){transform:rotate(-4deg) translateY(14px);margin-right:-1.2%;z-index:1}
.shots figure:nth-child(2){z-index:3;transform:translateY(-14px);width:33%;max-width:206px}
.shots figure:nth-child(3){transform:rotate(4deg) translateY(14px);margin-left:-1.2%;z-index:1}
.shots img{width:100%}
.shots-cap{text-align:center;font-size:11.5px;color:var(--sub);margin-top:20px;letter-spacing:.03em}
.hero-sample-preview{min-width:0}
.hero-sample-preview a{display:block;overflow:hidden;border:1px solid var(--line);background:#fff}
.hero-sample-preview img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-sample-preview .shots-cap{margin-top:14px}

/* ---------- サービスの入口 ---------- */
.svcs{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.svc{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:26px 22px 24px;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.svc::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.svc:hover{box-shadow:0 14px 30px rgba(20,32,46,.12);border-color:#C9D3DD}
.svc:hover::before{transform:scaleX(1)}
.svc .no{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums}
.svc .en{display:block;margin-top:12px;font-size:clamp(24px,7vw,30px);font-weight:800;letter-spacing:.07em;line-height:1.2;color:var(--ink)}
.svc .ja{display:block;margin-top:9px;font-size:14.5px;font-weight:800;line-height:1.7;color:var(--ink)}
.svc p{margin-top:12px;font-size:13.5px;line-height:2;color:var(--text)}
.svc .more{margin-top:auto;padding-top:18px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.svc .more span{border-bottom:1px solid #B9C7D6;padding-bottom:1px}

/* ---------- 罫線リスト ---------- */
.rows{margin-top:34px;border-top:1px solid var(--line)}
.rows > div{
  display:grid; grid-template-columns:minmax(0,1fr); gap:4px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.rows dt{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.7;min-width:0}
.rows dd{font-size:13.5px;line-height:2.05;color:var(--text);min-width:0}
.dark .rows{border-top-color:#2B3948}
.dark .rows > div{border-bottom-color:#2B3948}
.dark .rows dt{color:#fff}
.dark .rows dd{color:var(--onink)}

/* ---------- 流れ ---------- */
.flow{margin-top:34px;border-top:1px solid var(--line)}
.flow > div{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:2px 14px;
  padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.flow .no{font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.flow dt{font-size:15.5px;font-weight:800;color:var(--ink);min-width:0}
.flow dd{grid-column:2/-1;font-size:13.5px;line-height:2.05;color:var(--text);min-width:0}

/* ---------- 制作例 ---------- */
.works{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.work{min-width:0;text-decoration:none;display:block}
.work .ph{
  border-radius:7px;overflow:hidden;clip-path:inset(0);border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(20,32,46,.10); transition:transform .3s, box-shadow .3s;
}
.work:hover .ph{box-shadow:0 12px 28px rgba(20,32,46,.16);border-color:#C9D3DD}
.work .ph img{width:100%}
.work b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-top:13px;line-height:1.6}
.work > span{display:block;font-size:12px;color:var(--sub);margin-top:3px;line-height:1.7}
.work em{
  display:inline-block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent);
  margin-top:7px;letter-spacing:.03em;border-bottom:1px solid #B9C7D6;padding-bottom:1px;
}
.note{font-size:12px;line-height:1.95;color:var(--sub);margin-top:26px}
.dark .note{color:var(--onink-sub)}

/* ---------- 問い合わせ ---------- */
.form{margin-top:30px;display:grid;gap:22px}
.form fieldset{border:0;min-width:0}
.form legend,.form .lb{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--onink);margin-bottom:10px}
.form .req{margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--accent-l)}
.types{display:flex;flex-wrap:wrap;gap:8px}
.types label{position:relative;cursor:pointer}
.types input{position:absolute;opacity:0;width:1px;height:1px}
.types label > span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid #55636F;border-radius:3px;font-size:13px;font-weight:700;color:var(--onink);
  transition:background .2s,border-color .2s,color .2s;
}
.types label:hover > span{border-color:#8B96A3}
.types input:checked + span{background:#fff;border-color:#fff;color:var(--ink)}
.types input:focus-visible + span{outline:2px solid var(--accent-l);outline-offset:3px}
.form .two{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.form input[type=text],.form textarea{
  display:block;width:100%;font-family:inherit;font-size:16px;font-weight:500;line-height:1.7;color:#fff;
  background:#1B2837;border:1px solid #3F4D5B;border-radius:4px;padding:11px 14px;
  transition:border-color .2s,background .2s;
}
.form textarea{min-height:156px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#8B96A3}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent-l);outline-offset:1px;border-color:var(--accent-l);background:#1F2D3D}
.fnote{margin-top:12px;font-size:12px;line-height:1.95;color:var(--onink-sub)}
.fstat{font-size:13px;font-weight:700;color:var(--accent-l);min-height:1.9em}
.fstat:empty{min-height:0}
.mailbox{
  margin-top:34px;background:#22303F;border:1px solid #33414F;border-radius:6px;
  padding:24px 22px;
}
.mailbox .lbl{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--onink-sub)}
.mail{
  display:inline-block;margin-top:6px;padding:7px 0;font-size:clamp(17px,5.2vw,23px);font-weight:800;
  color:#fff;text-decoration:none;letter-spacing:.02em;word-break:break-all;line-height:1.55;
}
.mail:hover{color:var(--accent-l)}
.copy{
  margin-top:17px;height:40px;padding:0 17px;border-radius:3px;cursor:pointer;
  background:transparent;color:#fff;border:1px solid #55636F;
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  transition:background .2s,border-color .2s;
}
.copy:hover{background:#2E3D4C;border-color:#7B8794}

/* ---------- Office 3D：説明図 ---------- */
.planfig{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 12px 12px;box-shadow:0 12px 34px rgba(20,32,46,.08)}
.planfig svg{display:block;width:100%;height:auto}
.planfig figcaption{margin-top:6px;text-align:center;font-size:11.5px;color:var(--sub);letter-spacing:.03em}
.pf-floor{fill:#F4F3EE;stroke:#14202E;stroke-width:1.2;stroke-linejoin:round}
.pf-wall{fill:#E4E9EF;stroke:#14202E;stroke-width:1.1;stroke-linejoin:round}
.pf-line{fill:none;stroke:#14202E;stroke-width:1.2}
.pf-part{fill:rgba(143,187,226,.24);stroke:#1B4B77;stroke-width:1;stroke-linejoin:round}
.pf-top{fill:#fff;stroke:#1B4B77;stroke-width:1.1;stroke-linejoin:round}
.pf-side{fill:#C7D8EA;stroke:#1B4B77;stroke-width:1.1;stroke-linejoin:round}
.pf-desk{fill:#DCE7F2;stroke:#1B4B77;stroke-width:1.1}
.pf-tx{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.14em;fill:#5F6874}
.pf-f{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.js .planfig:not(.in) .pf-f{opacity:0;transform:translateY(-10px)}

/* ---------- Office 3D：困りごと ---------- */
.probs{list-style:none;margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.prob{min-width:0;background:#fff;border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:6px;padding:22px 20px 20px}
.prob b{display:block;font-size:15.5px;font-weight:800;line-height:1.7;color:var(--ink)}
.prob p{margin-top:8px;font-size:13.5px;line-height:2;color:var(--text)}

/* ---------- Office 3D：いただくもの→お渡しするもの ---------- */
.io{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.io > div{min-width:0;border:1px solid #33414F;border-radius:6px;padding:22px 20px;background:#1B2837}
.io .lbl{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--onink-sub)}
.io ul{list-style:none;margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.io li{font-size:13.5px;font-weight:700;line-height:1.6;color:#fff;border:1px solid #4A5866;border-radius:3px;padding:7px 12px}
.io .out{background:var(--accent);border-color:var(--accent)}
.io .out .lbl{color:#CFE0F0}
.io .out ul{margin-top:12px}
.io .out li{border-color:rgba(255,255,255,.5);font-size:14.5px}
#scenes .prob{border-top-color:var(--accent)}
.io .out p{margin-top:10px;font-size:16px;font-weight:800;line-height:1.75;color:#fff}

/* ---------- Office 3D：特長 ---------- */
.feats{list-style:none;margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.feat{min-width:0;padding:26px 0;border-bottom:1px solid var(--line)}
.feat .no{display:block;font-size:26px;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.feat b{display:block;margin-top:14px;font-size:16px;font-weight:800;line-height:1.7;color:var(--ink)}
.feat p{margin-top:6px;font-size:13.5px;line-height:2;color:var(--text)}

/* ---------- Office 3D：サンプル枠 ---------- */
.samples{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px}
.sample{min-width:0}
.sample:first-child{grid-column:1/-1}
.sample .ph{
  position:relative;aspect-ratio:4/3;overflow:hidden;clip-path:inset(0);
  border:1px solid var(--line);border-radius:8px;background-color:var(--paper2);
  background-image:linear-gradient(rgba(20,32,46,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,32,46,.055) 1px,transparent 1px);
  background-size:26px 26px;background-position:-1px -1px;
}
.sample:first-child .ph{aspect-ratio:21/9}
.sample .ph img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.sample .soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.sample .soon b{font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--ink)}
.sample .soon span{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--sub)}
.sample model-viewer{position:absolute;inset:0;z-index:1;width:100%;height:100%;background:#F3F2EE;--poster-color:transparent}
.sample .ph.has-model .soon{display:none}
.sample figcaption{margin-top:12px;display:flex;align-items:baseline;gap:12px}
.sample figcaption b{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
.sample figcaption span{font-size:13px;font-weight:700;color:var(--ink)}

/* ---------- Office 3D：ホワイトラベルの図 ---------- */
.doc{margin-top:34px}
.doc .sheet{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:0 14px 34px rgba(20,32,46,.10)}
.doc .top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.doc .slot{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent);border:1px dashed #9FB3C8;border-radius:3px;padding:6px 12px;white-space:nowrap}
.doc .top span:last-child{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--sub)}
.doc .view{
  margin-top:14px;aspect-ratio:16/10;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--sub);background-color:var(--paper2);
  background-image:linear-gradient(rgba(20,32,46,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(20,32,46,.055) 1px,transparent 1px);
  background-size:22px 22px;
}
.doc .bot{margin-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--sub)}
.doc figcaption{margin-top:12px;text-align:center;font-size:11.5px;color:var(--sub)}

/* ---------- Office 3D：最後の呼びかけ ---------- */
.cta{text-align:center}
.cta h2{font-size:clamp(23px,6.8vw,34px);line-height:1.55}
.cta .lead{margin-left:auto;margin-right:auto}
.cta .btn{margin-top:30px}
.cta .note{margin-top:22px}
.cta .note a{color:var(--onink);text-underline-offset:3px}

/* ---------- フッター ---------- */
footer{background:var(--ink);color:var(--onink-sub);padding:38px 0 40px;border-top:1px solid #2B3948}
.fbrand b{font-size:14.5px;font-weight:800;letter-spacing:.14em;color:#fff}
.fbrand span{display:block;font-size:12px;margin-top:6px;color:var(--onink-sub);line-height:1.9}
.flinks{margin-top:16px;display:flex;flex-wrap:wrap;gap:2px 22px}
.flinks a{display:inline-block;font-size:12.5px;color:var(--onink);text-decoration:none;border-bottom:1px solid #3C4A58;padding:11px 0 4px}
.flinks a:hover{color:#fff;border-bottom-color:var(--accent-l)}
.copyr{margin-top:26px;font-size:11px;color:#8B96A3;letter-spacing:.04em}

/* ---------- PCの2段組み ---------- */
@media (min-width:1024px){
  .cols{display:grid;grid-template-columns:minmax(0,19em) minmax(0,1fr);gap:0 58px;align-items:start}
  .cols .hd h2{margin-top:10px;font-size:24px;line-height:1.6}
  .cols .bd > .lead:first-child{margin-top:0}
  .cols .bd > .rows,.cols .bd > .flow,.cols .bd > .form,.cols .bd > .io,.cols .bd > .feats,.cols .bd > .probs{margin-top:26px}
  .cols .bd > .lead:first-child + .form{margin-top:30px}
}

/* ---------- 登場（JSが動く時だけ隠す） ---------- */
.js [data-rv]{opacity:0;transform:translateY(15px);backface-visibility:hidden;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.js [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.pf-f{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- PC ---------- */
@media (min-width:820px){
  body{font-size:15.5px}
  .wrap{--gut:34px}
  .pad{padding:104px 0}
  .pad-s{padding:80px 0}
  h2{font-size:29px}
  .hero{padding:calc(var(--bar) + 78px) 0 20px}
  .hero .inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;align-items:center}
  .hero h1{font-size:clamp(32px,3.2vw,42px)}
  .hero h1.h1-long{font-size:clamp(26px,2.55vw,36px)}
  .shots{margin-top:0;padding-bottom:0}
  .shots figure{max-width:none;width:33%}
  .shots figure:nth-child(2){width:36%}
  .shots-cap{margin-top:24px}
  .planfig{margin-top:0;padding:22px 18px 14px}
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .svc{padding:36px 34px 32px}
  .works{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
  .rows > div{grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:0 30px;padding:26px 0;align-items:baseline}
  .flow > div{grid-template-columns:44px minmax(0,13em) minmax(0,1fr);gap:0 20px;padding:24px 0}
  .flow dd{grid-column:3/-1}
  .form .two{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .mailbox{padding:30px 32px}
  .probs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .prob{padding:28px 26px 26px}
  .io{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .io > div{padding:28px 26px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:52px}
  .feat{padding:32px 0}
  .wl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center}
  .wl .doc{margin-top:0}
}
@media (max-width:819px){
  .works .work:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}
  /* サンプルはスマホだけ横に送る。本文の余白ぶん外へ出して、画面の端から端まで使う */
  .samples{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding:0 var(--gut) 10px;scroll-padding:0 var(--gut);
    scrollbar-width:none;
  }
  .samples::-webkit-scrollbar{display:none}
  .sample{flex:0 0 82%;scroll-snap-align:start}
  .sample:first-child .ph{aspect-ratio:4/3}
}

/* サンプルデザインを追加したページだけ、ナビの折り返しを避けて1024pxからメニュー化 */
@media (min-width:820px) and (max-width:1023px){
  body.al-nav-sample .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-11px;background:none;border:0;cursor:pointer;color:var(--ink);
  }
  body.al-nav-sample .menu-btn span,
  body.al-nav-sample .menu-btn span::before,
  body.al-nav-sample .menu-btn span::after{
    display:block;width:20px;height:1.5px;background:currentColor;border-radius:1px;
  }
  body.al-nav-sample .menu-btn span{position:relative;transition:background .2s}
  body.al-nav-sample .menu-btn span::before,
  body.al-nav-sample .menu-btn span::after{content:"";position:absolute;left:0;transition:transform .26s}
  body.al-nav-sample .menu-btn span::before{top:-6px}
  body.al-nav-sample .menu-btn span::after{top:6px}
  body.al-nav-sample .bar.open{background:var(--paper);border-bottom-color:var(--line)}
  body.al-nav-sample .bar.open .menu-btn span{background:transparent}
  body.al-nav-sample .bar.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
  body.al-nav-sample .bar.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
  body.al-nav-sample .gnav{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(20,32,46,.08);
    padding:4px 34px 24px;max-height:calc(100vh - var(--bar));max-height:calc(100svh - var(--bar));overflow:auto;
  }
  body.al-nav-sample .bar.open .gnav{display:flex}
  body.al-nav-sample .gnav ul{flex-direction:column;gap:0}
  body.al-nav-sample .gnav li{border-bottom:1px solid var(--line)}
  body.al-nav-sample .gnav .nl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:17px 0;font-size:14px}
  body.al-nav-sample .gnav .nl::after{display:none}
  body.al-nav-sample .gnav .nl small{display:inline;font-size:11.5px;font-weight:700;color:var(--sub);letter-spacing:.02em;text-align:right}
  body.al-nav-sample .gnav .btn{margin-top:20px;height:48px;font-size:14px}
}

/* ---------- サンプルデザイン ---------- */
.sample-design-list{margin-top:34px;display:grid;gap:12px}
.sample-design-card{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.sample-design-card-media{display:block;min-width:0;background:var(--paper2);overflow:hidden}
.sample-design-card-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.sample-design-card-media:hover img{transform:scale(1.025)}
.sample-design-card-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:34px 32px 32px}
.sample-design-card-category{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--accent)}
.sample-design-card h3{margin-top:11px;color:var(--ink);font-size:clamp(21px,3vw,29px);font-weight:800;line-height:1.55;letter-spacing:.02em;word-break:normal;overflow-wrap:anywhere}
.sample-design-card-description{margin-top:14px;color:var(--text);font-size:13.5px;line-height:2.05;text-wrap:pretty;word-break:normal;overflow-wrap:anywhere;max-width:100%}
.sample-design-card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;list-style:none}
.sample-design-card-tags li{padding:4px 9px;border:1px solid var(--line);border-radius:2px;color:var(--sub);font-size:11px;line-height:1.5;white-space:nowrap}
.sample-design-card-link{margin-top:24px;min-height:44px}
.sample-design-noscript{display:inline-flex;min-height:44px;align-items:center;margin-top:24px;color:var(--accent);font-weight:700}
.sample-design-noscript-list{display:flex;flex-wrap:wrap;gap:0 18px}
.sample-design-section .lead{word-break:normal;overflow-wrap:anywhere}
.about-brand-lead{word-break:normal;overflow-wrap:anywhere}
@media (max-width:819px){
  .sample-design-card{grid-template-columns:minmax(0,1fr)}
  .sample-design-card-media img{aspect-ratio:16/10}
  .sample-design-card-body{padding:25px 22px 24px}
  .sample-design-card h3{font-size:clamp(21px,7vw,27px)}
}

/* ---------- 濃紺のヒーローと制作サンプルの見せ場（2026-09-20 トップ） ---------- */
.hero-dark{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--onink);
  padding:calc(var(--bar) + 38px) 0 44px;
}
.hero-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 440px at 82% 14%, rgba(143,187,226,.20), rgba(20,32,46,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(20,32,46,0) 38%);
}
.hero-dark .wrap{position:relative;z-index:1}
.hero-dark .kicker{color:var(--accent-l)}
.hero-dark h1{color:#fff}
.hero-dark h1 b{color:var(--accent-l)}
.hero-dark .lead{color:var(--onink)}
.hero-dark .btn:not(.ghost){background:#fff;border-color:#fff;color:var(--ink)}
.hero-dark .btn:not(.ghost):hover{background:#E4EAF1;border-color:#E4EAF1}
.hero-dark .btn.ghost{color:#fff;border-color:rgba(217,223,231,.5)}
.hero-dark .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* 上の固定バーは、濃紺の上にいる間だけ透かす */
body.al-hero-dark .bar:not(.on):not(.open){
  background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.al-hero-dark .bar:not(.on):not(.open) .logo b{color:#fff}
body.al-hero-dark .bar:not(.on):not(.open) .logo span{color:var(--onink-sub)}
body.al-hero-dark .bar:not(.on):not(.open) .menu-btn{color:#fff}
body.al-hero-dark .bar:not(.on):not(.open) .gnav .nl{color:#fff}
body.al-hero-dark .bar:not(.on):not(.open) .gnav .nl::after{background:var(--accent-l)}
body.al-hero-dark .bar:not(.on):not(.open) .gnav > .btn{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
body.al-hero-dark .bar:not(.on):not(.open) .gnav > .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
body.al-hero-dark .bar:not(.on):not(.open) a:focus-visible,
body.al-hero-dark .bar:not(.on):not(.open) button:focus-visible{outline-color:var(--accent-l)}

/* 制作サンプルの見せ場 */
.hero-show{min-width:0;margin-top:30px}
.hero-show-lbl{font-size:10.5px;font-weight:800;letter-spacing:.24em;color:var(--onink-sub);margin-bottom:11px}
.hero-show-frame{
  position:relative;display:block;aspect-ratio:16/10;
  border-radius:9px;overflow:hidden;clip-path:inset(0);
  background:#0E1822;border:1px solid rgba(217,223,231,.2);
  box-shadow:0 24px 54px rgba(0,0,0,.44);
}
.hero-show-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  opacity:0;transition:opacity .26s ease;
}
.hero-show-img.on{opacity:1}
.hero-show-open{
  position:absolute;right:11px;bottom:11px;z-index:2;
  display:inline-flex;align-items:center;height:31px;padding:0 15px;border-radius:999px;
  background:rgba(251,250,247,.95);color:var(--ink);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;
  transition:background .2s,color .2s;
}
.hero-show-frame:hover .hero-show-open{background:#fff}
.hero-show-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 11px;margin-top:15px;min-height:44px}
.hero-show-meta b{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-l)}
.hero-show-meta span{font-size:14.5px;font-weight:700;color:#fff;letter-spacing:.02em}
.hero-show-tabs{list-style:none;display:flex;gap:8px;margin-top:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.hero-show-tabs::-webkit-scrollbar{display:none}
.hero-show-tabs button{
  display:inline-flex;align-items:center;height:36px;padding:0 15px;
  background:transparent;border:1px solid rgba(217,223,231,.3);border-radius:999px;
  color:var(--onink);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.hero-show-tabs button:hover{border-color:rgba(255,255,255,.7);color:#fff}
.hero-show-tabs button[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink)}
@media (max-width:819px){
  .hero-show-tabs{
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding:2px var(--gut) 8px;scroll-padding:0 var(--gut);
  }
  /* 右にまだ業種が続いている間だけ、端を薄くして横に送れることを示す */
  .hero-show-tabs.has-more{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),rgba(0,0,0,.12));
            mask-image:linear-gradient(90deg,#000 calc(100% - 52px),rgba(0,0,0,.12));
  }
}
@media (max-width:819px){
  .hero-dark{padding:calc(var(--bar) + 26px) 0 40px}
  .hero-dark .lead{margin-top:12px;line-height:1.9}
  .hero-show{margin-top:26px}
  .hero-dark .hero-cta{margin-top:24px}
}
@media (min-width:820px){
  /* パソコンは画面1枚ぶん。中身は本文と同じ幅の中で中央にそろえる */
  .hero-dark{
    min-height:100svh;display:flex;align-items:center;
    padding:calc(var(--bar) + 28px) 0 34px;
  }
  .hero-dark > .wrap{width:100%}
  .hero-dark .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
  .hero-copy{order:1;max-width:100%}
  .hero-dark h1{margin-top:12px}
  .hero-dark h1 br{display:none}
  .hero-dark .lead{max-width:48em;margin:14px auto 0}
  .hero-dark .hero-cta{order:2;justify-content:center;margin-top:26px}
  .hero-show{order:3;width:100%;margin-top:32px}
  .hero-show-lbl{display:none}
  /* 画面の高さに合わせて幅を決める。はみ出さず、いつも中央 */
  .hero-show-frame{
    width:min(100%, calc((100svh - 512px) * 2.5));
    margin:0 auto;aspect-ratio:2.5 / 1;
  }
  .hero-show-img{object-position:50% 0}
  .hero-show-open{right:13px;bottom:13px}
  .hero-show-meta{justify-content:center;min-height:0;margin-top:14px}
  .hero-show-tabs{justify-content:center;flex-wrap:wrap;overflow:visible;margin-top:13px;row-gap:9px}
}



/* ---------- ヒーローの料金（2026-09-20） ---------- */
.hero-price{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-price > span{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:7px 13px;border:1px solid rgba(217,223,231,.3);border-radius:4px;
  font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.01em;
}
.hero-price b{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--accent-l)}
.hero-price em{font-style:normal}
.hero-price small{font-size:11px;font-weight:600;color:var(--onink-sub)}
@media (max-width:819px){
  .hero-price{gap:7px;margin-top:12px}
  .hero-price > span{font-size:12.5px;padding:6px 11px;gap:7px}
  .hero-price small{font-size:10.5px}
  .hero-dark{padding-top:calc(var(--bar) + 12px)}
  .hero-show-frame{aspect-ratio:16 / 9}
  .hero-show-meta{margin-top:12px;min-height:0}
  .hero-show-tabs{margin-top:2px}
  .hero-dark .lead{line-height:1.9}
  .hero-show{margin-top:16px}
  .hero-show-lbl{display:none}
  .hero-dark .hero-cta{margin-top:14px}
}
@media (min-width:820px){
  .hero-price{justify-content:center;margin-top:18px}
}

/* サービスが3つになった時、2列の最後の1枚を横いっぱいにして左に取り残さない */
@media (min-width:820px){.svcs > .svc:last-child:nth-child(odd){grid-column:1/-1}}
/* 料金の枠が狭い画面で折れる時は、金額や注記の途中ではなく項目の切れ目で折る */
.hero-price > span{flex-wrap:wrap}.hero-price b,.hero-price em,.hero-price small{white-space:nowrap}