/* ============================================================
   NFC-TS モック 共通スタイル（「側」の唯一の出どころ）
   mock-top.html / mock-*.html はすべてこの 1 本を読む。
   ここを直せば全ページが一斉に変わる。

   ・レイアウト／密度／セクション見出し = taniguchi.co.jp の作りに寄せる
   ・世界観（和紙・墨・朱・余白・書体・mono ラベル）= v2
   ★ スクロール駆動なし（100vh / rAF / getBoundingClientRect ゼロ。
     sticky はヘッダー固定のみ＝v2 と同じ一般的な用法）
   ============================================================ */
:root{
  --paper:#f4efe4;        /* 地：和紙の生成り（v2 のヒーロー面 #f2ecdf と同系） */
  --paper-2:#ece4d4;
  --card:#fffdf8;
  --ink:#211c16;          /* 墨（v2） */
  --ink-2:#5c554b;
  --ink-3:#8b8275;
  --hair:#ded4c0;
  --hair-2:#cbbfa6;
  --accent:#DB4C2A;       /* 朱（v2 と同じ実値） */
  --accent-deep:#B23A1C;
  --accent-wash:#fbeee8;
  --panel-2:#241f19;
  --panel-ink:#ece5d8;
  --panel-ink-2:#a79c8c;
  --panel-hair:#3a3128;
  --jp:"Zen Kaku Gothic New",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --lat:"IBM Plex Sans",sans-serif;
  --maxw:1180px;
  --pad:clamp(18px,4vw,40px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:var(--jp); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:50; background:rgba(244,239,228,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); }
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:58px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-anniv{ height:34px; width:auto; display:block; }
.brand-logo{ height:21px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:20px; }
.nav a{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em;
  color:var(--ink-2); text-transform:uppercase; transition:color .2s; }
.nav a:hover,.nav a.here{ color:var(--accent); }
.head-cta{ display:flex; align-items:center; gap:14px; }
.head-cta .login{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:background .2s,color .2s,border-color .2s; cursor:pointer; }
.btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn.on-accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.on-accent:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn.sm{ padding:9px 16px; font-size:11px; }
.menu-toggle{ display:none; }
#mobile-nav{ display:none; }

/* ============================================================
   KV（TOP のみ）— 写真が届くまでは絵なし。文字と朱だけで組む
   ============================================================ */
.kv{ background:var(--paper); }
.kv-inner{ max-width:var(--maxw); margin:0 auto; background:var(--paper);
  padding:clamp(30px,4vw,52px) clamp(22px,3.4vw,50px) clamp(28px,3.6vw,46px);
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,3.4vw,50px); align-items:center; }
.kv-main{ min-width:0; }
.kv-aside{ min-width:0; }
.kv .code{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase; }
.kv .ttl{ font-family:var(--jp); font-weight:900; font-size:clamp(28px,4.1vw,50px); line-height:1.2;
  letter-spacing:.01em; color:var(--ink); margin-top:16px; text-wrap:balance; }
.kv .ttl .em{ color:var(--accent); }
.kv .lead{ margin-top:16px; font-size:clamp(13px,1.35vw,15px); line-height:1.9; color:var(--ink-2); max-width:32em; }
.kv .lead b{ color:var(--ink); font-weight:700; }
.kv-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.kv-tel{ display:flex; align-items:center; gap:12px; margin-top:20px;
  border-top:1px solid var(--hair-2); padding-top:16px; flex-wrap:wrap; }
.kv-tel .tl{ font-family:var(--jp); font-weight:700; font-size:10.5px; line-height:1.35; color:#fff;
  background:var(--accent); padding:5px 9px; border-radius:2px; text-align:center; }
.kv-tel .tn{ font-family:var(--lat); font-weight:600; font-size:clamp(24px,3vw,36px);
  color:var(--accent); font-variant-numeric:tabular-nums; }
.kv-tel .th{ font-family:var(--jp); font-size:11.5px; color:var(--ink-3); }
/* 写真が入る場所（撮影待ち）。仮画像で埋めない */
.kv-slot{ margin-top:12px; border:1px dashed var(--hair-2); background:rgba(255,253,248,.5);
  padding:clamp(18px,2.4vw,26px); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.kv-slot .sk{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; border:1px solid var(--accent); padding:4px 8px; }
.kv-slot .sd{ font-size:12.5px; line-height:1.8; color:var(--ink-2); }

/* ============================================================
   下層ページの見出し帯
   ============================================================ */
.page-head{ background:var(--paper); border-top:5px solid var(--accent); border-bottom:1px solid var(--hair); }
.page-head-inner{ max-width:var(--maxw); margin:0 auto;
  padding:clamp(20px,2.6vw,32px) var(--pad) clamp(22px,3vw,36px); }
.crumb{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; flex-wrap:wrap; }
.crumb a:hover{ color:var(--accent); }
.crumb .sep{ color:var(--hair-2); }
.page-head .code{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase; margin-top:16px; }
.page-head h1{ font-family:var(--jp); font-weight:900; font-size:clamp(26px,3.6vw,42px);
  line-height:1.24; color:var(--ink); margin-top:10px; text-wrap:balance; }
.page-head .lead{ margin-top:14px; font-size:clamp(13.5px,1.4vw,15px); line-height:1.95;
  color:var(--ink-2); max-width:44em; }
.page-head .lead b{ color:var(--ink); font-weight:700; }

/* ============================================================
   2 カラム（左：常時ナビ ／ 右：本題）
   ============================================================ */
.shell{ display:grid; grid-template-columns:230px 1fr; gap:clamp(24px,3vw,48px);
  padding:clamp(30px,3.8vw,50px) 0 clamp(38px,4.6vw,66px); align-items:start; }
/* grid の子は既定が min-width:auto。横スクロールさせたい表が
   列そのものを押し広げてページ全体が横にはみ出すので、ここで止める */
.shell > *{ min-width:0; }
.side-blk + .side-blk{ margin-top:clamp(24px,2.8vw,34px); }
.side-h{ display:flex; align-items:center; gap:8px; font-family:var(--jp); font-weight:900;
  font-size:13.5px; color:var(--ink); padding-bottom:9px; border-bottom:1px solid var(--hair); }
.side-h::before{ content:""; width:3px; height:15px; background:var(--accent); flex:0 0 auto; }
.slinks{ display:flex; flex-direction:column; }
.slink{ display:flex; align-items:baseline; gap:9px; padding:10px 2px;
  border-bottom:1px solid var(--hair); font-size:12.5px; font-weight:700; transition:color .2s; }
.slink:hover,.slink.here{ color:var(--accent); }
.slink .lk{ font-family:var(--mono); font-size:9.5px; font-weight:600; color:var(--accent); letter-spacing:.08em; }
.slink .la{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.sbanner{ display:block; border:1px solid var(--hair); background:var(--card); overflow:hidden; }
.sbanner + .sbanner{ margin-top:11px; }
.sbanner .bh{ background:var(--accent); color:#fff; font-family:var(--jp); font-weight:900;
  font-size:12.5px; padding:9px 12px; }
.sbanner .bh.ink{ background:var(--ink); }
.sbanner .bb{ padding:11px 12px 12px; font-size:11.5px; line-height:1.75; color:var(--ink-2); }
.sbanner .bb b{ color:var(--ink); font-weight:700; }
.sbanner .bg{ display:block; margin-top:8px; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; }
.sbanner .bg::after{ content:" →"; }
.sbanner:hover .bb{ background:var(--accent-wash); }
.stel{ border:1px solid var(--hair); background:var(--card); padding:12px; text-align:center; }
.stel .k{ font-family:var(--jp); font-size:11px; font-weight:700; color:var(--ink-2); }
.stel .v{ font-family:var(--lat); font-weight:600; font-size:20px; color:var(--accent);
  margin-top:4px; font-variant-numeric:tabular-nums; display:block; }
.stel .h{ font-family:var(--jp); font-size:10.5px; color:var(--ink-3); margin-top:4px; }

/* ---------- 右メイン：セクションの型 ---------- */
.msec + .msec{ margin-top:clamp(34px,4.2vw,58px); }
.msec-h{ display:flex; align-items:baseline; gap:11px; padding-bottom:11px;
  border-bottom:1px solid var(--hair-2); margin-bottom:clamp(16px,2vw,24px); }
.msec-h::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent);
  flex:0 0 auto; align-self:center; }
.msec-h h2{ font-family:var(--jp); font-weight:900; font-size:clamp(18px,2.1vw,23px); color:var(--ink); }
.msec-h .sub{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--ink-3);
  text-transform:uppercase; margin-left:auto; flex:0 0 auto; }
.msec-lede{ font-size:13.5px; line-height:1.9; color:var(--ink-2); margin:-4px 0 18px; }
.msec-lede b{ color:var(--ink); font-weight:700; }
.prose p{ font-size:13.5px; line-height:2; color:var(--ink-2); }
.prose p + p{ margin-top:13px; }
.prose b{ color:var(--ink); font-weight:700; }

/* 3 ステップ（3 つちょうど） */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.step{ background:var(--card); border:1px solid var(--hair); padding:clamp(14px,1.7vw,20px);
  display:flex; flex-direction:column; }
.step .sk{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  color:var(--accent); text-transform:uppercase; }
.step .sk::after{ content:""; display:block; width:28px; height:2px; background:var(--accent); margin-top:9px; }
.step .st{ font-family:var(--jp); font-weight:900; font-size:15.5px; color:var(--ink); margin:12px 0 7px; line-height:1.4; }
.step .sd{ font-size:12.5px; line-height:1.8; color:var(--ink-2); }
.step .sd b{ color:var(--ink); font-weight:700; }

/* 管理画面（一覧）のキャプチャ + 凡例 (2026-08-31 追加)。
   ★凡例の語は画面のラベルと一字一句そろえること。ここを言い換えると、
     お客様が実物を見た時に対応が取れなくなる。 */
.lotshot{ margin-top:clamp(20px,2.6vw,30px); }
.lotshot h3{ font-family:var(--jp); font-weight:900; font-size:15.5px; color:var(--ink); margin:0 0 12px; }
.lotshot figure{ margin:0; }
.lotshot img{ display:block; width:100%; height:auto; border:1px solid var(--hair);
  border-radius:8px; background:var(--card); }
.lotshot figcaption{ font-size:11.5px; line-height:1.7; color:var(--ink-2); margin-top:8px; }
.lotshot .lead{ font-size:12.5px; line-height:1.8; color:var(--ink-2); margin:16px 0 10px; }
.lotshot .lead b{ color:var(--ink); font-weight:700; }
.lotshot ul{ margin:0; padding-left:1.15em; }
.lotshot li{ font-size:12.5px; line-height:1.8; color:var(--ink-2); margin-bottom:5px; }
.lotshot li b{ color:var(--ink); font-weight:700; }
.lotshot .legend{ margin-top:16px; border-top:1px solid var(--hair); padding-top:13px; }
.lotshot .legend .lt{ font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; color:var(--ink-2); margin-bottom:9px; }
.lotshot .legend dl{ margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:5px clamp(10px,1.4vw,18px); }
.lotshot .legend dt{ font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.lotshot .legend dd{ font-size:12px; line-height:1.7; color:var(--ink-2); margin:0; }
@media (max-width:640px){
  .lotshot .legend dl{ grid-template-columns:1fr; gap:2px; }
  .lotshot .legend dd{ margin:0 0 7px; }
}
.inline-go{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-family:var(--jp); font-weight:700; font-size:13px; color:var(--accent); }
.inline-go::after{ content:"→"; font-family:var(--mono); }
.inline-go:hover{ color:var(--accent-deep); text-decoration:underline; }

/* 値の 3 枚（3 つちょうど） */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.val{ background:var(--card); border:1px solid var(--hair); padding:clamp(14px,1.7vw,20px); }
.val .vk{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.val .vt{ font-family:var(--jp); font-weight:900; font-size:15px; color:var(--ink); margin:10px 0 7px; line-height:1.4; }
.val .vd{ font-size:12.5px; line-height:1.8; color:var(--ink-2); }

/* 2 枚（Lite / Business） */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,20px); }
.dside{ background:var(--card); border:1px solid var(--hair); padding:clamp(15px,1.9vw,22px); }
/* ★ 2026-09-08: Lite / Business の頭に絵を置く。
   2枚は元画像の余白が違う（A=左右115px / B=左右27px）ので、幅ではなく
   **高さを揃える**。幅で揃えると B だけカードが小さく見える。 */
.dside .dfig{ margin:0 0 14px; display:flex; align-items:flex-end; justify-content:center;
  min-height:132px; }
.dside .dfig img{ display:block; width:auto; height:132px; max-width:100%; }
@media (min-width:901px){ .dside .dfig img{ height:150px; } .dside .dfig{ min-height:150px; } }
.dside .tag{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.dside .tag .b{ color:var(--accent); }
.dside .role{ font-family:var(--jp); font-weight:900; font-size:clamp(18px,2.1vw,21px); color:var(--ink); margin:7px 0 4px; }
.dside .rsub{ font-size:12px; color:var(--ink-3); margin-bottom:13px; }
.dside ul{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.dside li{ font-size:13px; line-height:1.6; color:var(--ink-2); padding-left:16px; position:relative; }
.dside li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:1px; background:var(--accent); }
.dside li b{ color:var(--ink); font-weight:700; }
/* 料金ページ「初期費用 0 円 / 月額 0 円」の数字。2026-09-01 追加。
   ★ intro.html の .cost-item は intro.html 内でしか定義されていないので流用できない。 */
.dside .zero{ font-family:var(--lat); font-weight:600; font-size:clamp(34px,4.6vw,46px);
  color:var(--accent); line-height:1.05; margin:8px 0 6px; }

/* 入口の 3 枚 */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.door{ background:var(--card); border:1px solid var(--hair); padding:clamp(15px,1.9vw,22px);
  display:flex; flex-direction:column; transition:border-color .2s,background .2s; }
.door:hover{ border-color:var(--accent); background:var(--accent-wash); }
.door .dk{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.door .dt{ font-family:var(--jp); font-weight:900; font-size:16px; color:var(--ink); margin:9px 0 6px; }
.door .dd{ font-size:12.5px; line-height:1.8; color:var(--ink-2); flex:1; }
.door .dg{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase; margin-top:12px; }
.door .dg::after{ content:" →"; }

/* 事例カード（下層で使う横長のブロック） */
.case{ background:var(--card); border:1px solid var(--hair); padding:clamp(18px,2.2vw,28px); }
.case + .case{ margin-top:clamp(14px,1.7vw,20px); }
.case .ck{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  color:#fff; background:var(--ink); padding:3px 8px; border-radius:2px; display:inline-block; }
.case .ct{ font-family:var(--jp); font-weight:900; font-size:clamp(17px,2vw,21px); color:var(--ink); margin:12px 0 6px; line-height:1.4; }
.case .cw{ font-size:12px; color:var(--ink-3); }
.case .cd{ font-size:13.5px; line-height:2; color:var(--ink-2); margin-top:13px; }
.case .cd b{ color:var(--ink); font-weight:700; }
.case ul{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:15px;
  border-top:1px solid var(--hair); padding-top:15px; }
.case li{ font-size:13px; line-height:1.7; color:var(--ink-2); padding-left:17px; position:relative; }
.case li::before{ content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--accent); }
.case li b{ color:var(--ink); font-weight:700; }

/* 文化を敬い */
.story{ background:var(--paper-2); border:1px solid var(--hair); padding:clamp(20px,2.6vw,34px);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(18px,2.6vw,36px); align-items:center; }
.story h2{ font-family:var(--jp); font-weight:900; font-size:clamp(19px,2.3vw,26px); line-height:1.4; color:var(--ink); }
.story .since{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--accent);
  text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-top:13px; }
.story .since::before{ content:""; width:36px; height:1px; background:var(--accent); }
.story p{ font-size:13.5px; line-height:2; color:var(--ink-2); }
.story p b{ color:var(--ink); font-weight:700; }

/* お問い合わせ */
.contact{ background:var(--ink); color:var(--paper); padding:clamp(22px,2.8vw,38px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,2.8vw,38px); align-items:center; }
.contact .code{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase; }
.contact h2{ font-family:var(--jp); font-weight:900; font-size:clamp(21px,2.6vw,30px); line-height:1.3; margin-top:10px; }
.contact h2 .em{ color:var(--accent); }
.contact p{ margin-top:12px; font-size:13.5px; line-height:1.9; color:var(--panel-ink-2); }
.contact .acts{ margin-top:18px; display:flex; flex-wrap:wrap; gap:12px; }
.contact .btn.ghost{ color:var(--paper); border-color:var(--panel-hair); }
.contact .btn.ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cinfo{ display:flex; flex-direction:column; gap:12px; }
.cinfo .ci{ border-top:1px solid var(--panel-hair); padding-top:10px; }
.cinfo .cl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; color:var(--panel-ink-2); text-transform:uppercase; }
.cinfo .cv{ font-family:var(--jp); font-size:14.5px; font-weight:700; margin-top:5px; }
.cinfo .cv.tel{ font-family:var(--lat); font-size:22px; color:var(--accent); font-variant-numeric:tabular-nums; }

.note{ font-family:var(--mono); font-size:10px; line-height:1.9; color:var(--ink-3);
  letter-spacing:.02em; border-top:1px solid var(--hair); padding-top:11px; margin-top:16px; }
.note b{ color:var(--ink-2); }
/* 内部メモ（公開時には消す面）。実ページの本文と見分けがつくようにする */
.devnote{ font-family:var(--mono); font-size:10px; line-height:1.95; color:#6d6459;
  background:repeating-linear-gradient(135deg,#f7f1df,#f7f1df 9px,#f2ead4 9px,#f2ead4 18px);
  border:1px dashed var(--hair-2); padding:14px 16px; margin-top:18px; }
.devnote b{ color:var(--accent-deep); }
.devnote .dn-h{ display:inline-block; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ink); padding:3px 8px; margin-bottom:9px; }

/* ---------- footer ---------- */
.site-foot{ background:var(--panel-2); color:var(--panel-ink-2); border-top:1px solid var(--panel-hair);
  padding:clamp(38px,4.6vw,58px) 0 32px; }
/* ★2026-08-27: 3列 → 4列。「Company」の下に商品 (寄せ書き色紙・Lite・Business) と
   ツールの入口 (PCで編集) が混ざっていたため、商品を別の列に切り出した。
   ブランド列が広いので 1.5fr は据え置き。狭い画面は下の 2列 → 1列 に落ちる。 */
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(20px,2.8vw,36px); }
.foot-brand .bt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--panel-ink-2); text-transform:uppercase; margin-top:6px; }
.foot-brand .addr{ font-size:13px; line-height:1.9; color:var(--panel-ink-2); margin-top:16px; }
.foot-brand .addr a:hover{ color:var(--panel-ink); }
.foot-logo{ height:26px; width:auto; display:block; margin-bottom:2px; }
.foot-anniv{ height:44px; width:auto; display:block; margin-top:22px; opacity:.82; }
.foot-col h4{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--panel-ink-2); text-transform:uppercase; margin-bottom:14px; }
.foot-col a{ display:block; font-size:13px; color:var(--panel-ink-2); padding:5px 0; transition:color .2s; }
.foot-col a:hover{ color:var(--panel-ink); }
.foot-bot{ margin-top:clamp(28px,3.6vw,42px); padding-top:18px; border-top:1px solid var(--panel-hair);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--panel-ink-2); }
.foot-bot .links a:hover{ color:var(--panel-ink); }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .kv-inner{ grid-template-columns:1fr; gap:26px; }
  /* 1 カラムに。本題が先、ナビは下 */
  .shell{ grid-template-columns:1fr; gap:clamp(32px,4.6vw,44px); }
  .shell .side{ order:2; }
  .shell .main{ order:1; }
  .side-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.8vw,30px); align-items:start; }
  .side-blk + .side-blk{ margin-top:0; }
  .story{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  /* 3 つのものは 1 列に落とす（2 列だと 1 枚余る） */
  .steps,.vals,.doors{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .nav,.head-cta .login,.head-cta .btn{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:1px solid var(--hair); background:transparent; cursor:pointer; }
  .menu-toggle span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink); text-transform:uppercase; }
  #mobile-nav{ display:none; border-top:1px solid var(--hair); background:var(--paper); }
  #mobile-nav.open{ display:block; }
  #mobile-nav a{ display:block; padding:14px var(--pad); border-bottom:1px solid var(--hair);
    font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--ink-2); text-transform:uppercase; }
  .side-inner{ grid-template-columns:1fr; }
  .duo{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   フォーム（contact）— 側の書体・罫・朱をそのまま使う
   ============================================================ */
.formwrap{ background:var(--card); border:1px solid var(--hair); padding:clamp(18px,2.4vw,30px); }
.frow + .frow{ margin-top:clamp(16px,2vw,22px); }
.flabel{ display:flex; align-items:center; gap:9px; font-family:var(--jp); font-weight:700;
  font-size:13px; color:var(--ink); margin-bottom:8px; }
.req{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em;
  color:#fff; background:var(--accent); padding:2px 6px; border-radius:2px; text-transform:uppercase; }
.finput,.fselect,.ftextarea{ width:100%; font-family:var(--jp); font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair-2); padding:11px 12px; border-radius:2px; }
.finput::placeholder,.ftextarea::placeholder{ color:#b3a992; }
.finput:focus,.fselect:focus,.ftextarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.ftextarea{ resize:vertical; min-height:130px; line-height:1.8; }
.fchecks{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px 14px; }
.fcheck{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.6; color:var(--ink-2); }
.fcheck input{ margin-top:3px; accent-color:var(--accent); flex:0 0 auto; }
.fagree{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13px; color:var(--ink-2);
  border-top:1px solid var(--hair); margin-top:clamp(16px,2vw,22px); padding-top:clamp(16px,2vw,22px); }
.fagree input{ accent-color:var(--accent); }
.fagree a{ color:var(--accent); text-decoration:underline; }
.fsubmit{ margin-top:clamp(16px,2vw,22px); }
/* 送信結果の帯。既定は display:none で、JS が success / error を足した時だけ出る。
   色は本番 style.css の .form-message と同じ系統（緑＝成功／赤＝失敗）。 */
.form-message{ margin-top:14px; padding:14px 16px; border-radius:3px;
  font-family:var(--jp); font-size:13px; line-height:1.8; display:none; }
.form-message.success{ display:block; background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
.form-message.error{ display:block; background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
/* 送信中は押せないことを見た目でも伝える */
#submitBtn[disabled]{ opacity:.6; cursor:not-allowed; }
/* 必須未入力の赤枠は JS が inline style で当てる。フォーカス時はそちらを優先させない */
.finput[aria-invalid="true"], .fselect[aria-invalid="true"], .ftextarea[aria-invalid="true"]{ background:#fffafa; }
/* 連絡先・営業時間などの一覧 */
.info{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,18px); }
.info .i{ background:var(--card); border:1px solid var(--hair); padding:clamp(14px,1.7vw,18px); }
/* 5 項目を 2 列に置くと 3 行目に空きマスが出るので、5 番目だけ横長にして埋める */
.info .i:nth-child(5){ grid-column:1 / -1; }
.info .ik{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.13em;
  color:var(--accent); text-transform:uppercase; }
.info .iv{ font-family:var(--jp); font-size:14px; font-weight:700; color:var(--ink); margin-top:8px; line-height:1.7; }
.info .iv a:hover{ color:var(--accent); }
.info .is{ font-size:12px; color:var(--ink-3); margin-top:5px; line-height:1.7; }
.info .i.tel .iv{ font-family:var(--lat); font-size:22px; color:var(--accent); font-variant-numeric:tabular-nums; }
/* 手順（4 つ） */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.3vw,16px); }
.flow .f{ background:var(--card); border:1px solid var(--hair); padding:clamp(13px,1.6vw,18px); }
.flow .fn{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.1em; }
.flow .fn::after{ content:""; display:block; width:24px; height:2px; background:var(--accent); margin-top:8px; }
.flow .ft{ font-family:var(--jp); font-weight:900; font-size:13.5px; color:var(--ink); margin:11px 0 6px; line-height:1.4; }
.flow .fd{ font-size:12px; line-height:1.75; color:var(--ink-2); }
/* 価格表（pricing 用） */
.ptable{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--hair);
  font-variant-numeric:tabular-nums; }
.ptable th,.ptable td{ border:1px solid var(--hair); padding:11px 13px; font-size:13px; text-align:right; }
.ptable thead th{ background:var(--paper-2); font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase; }
.ptable tbody th{ text-align:left; font-family:var(--jp); font-weight:700; color:var(--ink); }
.ptable td{ font-family:var(--lat); font-weight:600; color:var(--ink-2); }
.tablescroll{ overflow-x:auto; }
@media (max-width:760px){
  .fchecks{ grid-template-columns:1fr; }
  .info{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){ .flow{ grid-template-columns:1fr; } }

/* ============================================================
   1 商品を主役に据える面（寄せ書き色紙）— グリッドではなく主役の席
   ============================================================ */
.feature{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(18px,2.4vw,32px); align-items:stretch; }
/* 写真がまだ無い面は 1 カラム。仮画像でも「撮影待ち」の枠でも埋めない。
   ★ 写真が用意できたら solo を外し、.fbody の前に画像の div を戻せば 2 カラムに復帰する。 */
.feature.solo{ grid-template-columns:1fr; }
.fbody{ background:var(--card); border:1px solid var(--hair); padding:clamp(16px,2vw,24px);
  display:flex; flex-direction:column; }
.fbody .fd{ font-size:13.5px; line-height:2; color:var(--ink-2); }
.fbody .fd b{ color:var(--ink); font-weight:700; }
.specrow{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px);
  border-top:1px solid var(--hair); margin-top:16px; padding-top:15px; }
.specrow .sp .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  color:var(--ink-3); text-transform:uppercase; }
.specrow .sp .v{ font-family:var(--jp); font-size:14.5px; font-weight:700; color:var(--ink); margin-top:5px; }
.fbody .facts{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:15px;
  border-top:1px solid var(--hair); padding-top:15px; }
.fbody .facts li{ font-size:12.5px; line-height:1.75; color:var(--ink-2); padding-left:16px; position:relative; }
.fbody .facts li::before{ content:""; position:absolute; left:0; top:.72em; width:8px; height:1px; background:var(--accent); }
.fbody .facts li b{ color:var(--ink); font-weight:700; }
.fbody .fgo{ margin-top:auto; padding-top:18px; }
/* 台紙の 2 枚 */
.boards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.5vw,20px); margin-top:clamp(12px,1.5vw,20px); }
.board{ background:var(--card); border:1px solid var(--hair); padding:clamp(15px,1.9vw,22px); }
.board .bk{ display:inline-block; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.1em; color:#fff; background:var(--accent); padding:3px 7px; border-radius:2px; text-transform:uppercase; }
/* ★ 商品名バッジの色は sbanner (.bh / .bh.ink) と同じ約束にする。
     既定の朱 = Lite ／ .ink の墨 = Business。片方だけ変えると
     サイドバーのバナーと色が食い違い、同じ商品が2色で出る。 */
.board .bk.ink{ background:var(--ink); }
.board .bn{ font-family:var(--jp); font-weight:900; font-size:15.5px; color:var(--ink); margin:11px 0 7px; line-height:1.4; }
.board .bd{ font-size:12.5px; line-height:1.85; color:var(--ink-2); }
.board .bd b{ color:var(--ink); font-weight:700; }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; } }
@media (max-width:640px){ .boards{ grid-template-columns:1fr; } }

/* ============================================================
   KV の絵 — スマホに映った受け取り画面のみ
   ★ 色紙は外した（1 商品に見えてしまうため。色紙は専用ページで紹介する）
   ★ 動きゼロ。背景画像なし
   ============================================================ */
.kv-stage{ position:relative; width:100%; max-width:520px; margin:0 auto; padding:8px 0 4px; }
.kv-phone{ position:relative; width:min(266px,62%); margin:0 auto; z-index:2; }
/* スマホの周りに散らすアプリのアイコン。名称はすべて本番サイトの実記述から */
.kv-chips{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.chip{ position:absolute; width:92px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.chip .ic{ width:54px; height:54px; border-radius:16px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(33,28,22,.20); }
.chip .ic svg{ width:26px; height:26px; fill:var(--paper); display:block; }
.chip.accent .ic{ background:var(--accent); }
.chip.accent .ic svg{ fill:#fff; }
.chip .lb{ font-family:var(--jp); font-weight:700; font-size:10.5px; line-height:1.4;
  color:var(--ink-2); text-align:center; letter-spacing:.01em; }
/* テンプレート 6 型。左右 3 つずつ、互い違いに置く */
.chip.c1{ left:-6%;  top:1%;  }
.chip.c2{ right:0%; top:13%; }
.chip.c3{ left:-8%;  top:33%; }
.chip.c4{ right:-1%; top:45%; }
.chip.c5{ left:-6%;  top:65%; }
.chip.c6{ right:0%; top:77%; }
@media (max-width:980px){
  .kv-stage{ max-width:none; }
  .kv-chips{ position:static; display:flex; flex-wrap:wrap; justify-content:center;
    gap:16px 20px; margin-top:22px; pointer-events:auto; }
  .chip{ position:static; }
  .chip.c1,.chip.c2,.chip.c3,.chip.c4,.chip.c5,.chip.c6{ left:auto; right:auto; top:auto; }
}
.ph-frame{ background:#0a0d12; border:1px solid #333a44; border-radius:30px; padding:6px;
  box-shadow:0 26px 54px rgba(33,28,22,.30); }
.ph-scr{ border-radius:24px; overflow:hidden; aspect-ratio:390/844; background:#f7f3e9; }
.ph-scr img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
/* 画面素材は撮影時にバージョン表記を切り落とし済み・枠と同じ比率なので等倍で収める
   (2026-09-09: 107% だと下端が理由なく 7% 欠けるため 100% に戻した) */
.ph-scr img.app-shot{ height:100%; object-position:top center; }
.kv-cap{ display:block; margin-top:16px; text-align:center; font-family:var(--jp);
  font-size:11.5px; font-weight:700; color:var(--ink-3); }
.kv-cap::before{ content:""; display:inline-block; width:14px; height:1px; background:var(--accent);
  vertical-align:middle; margin-right:7px; }
@media (max-width:980px){ .kv-stage{ margin:0 auto; } }

/* ============================================================
   商品別の専用ページへの受け渡し口
   ★ 実在するページにだけリンクする。準備中の枠は並べない。
   ★ テンプレートが増えたら <a class="lprow"> を 1 行足すだけ。
   ============================================================ */
.lprows{ display:flex; flex-direction:column; border-top:1px solid var(--ink); }
.lprow{ display:grid; grid-template-columns:minmax(150px,.9fr) 1.6fr auto;
  gap:clamp(12px,2vw,26px); align-items:center;
  padding:clamp(14px,1.8vw,20px) clamp(12px,1.6vw,18px);
  border-bottom:1px solid var(--hair); background:var(--card); transition:background .2s; }
.lprow:hover{ background:var(--accent-wash); }
.lprow .ln{ font-family:var(--jp); font-weight:900; font-size:clamp(15px,1.8vw,17px); color:var(--ink); line-height:1.4; }
.lprow .lk{ display:block; font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; margin-bottom:6px; }
.lprow .ld{ font-size:12.5px; line-height:1.8; color:var(--ink-2); }
.lprow .lg{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase; white-space:nowrap; }
.lprow .lg::after{ content:" →"; }
/* 商品の写真つきの行（左端にサムネイル）。写真の無い行は今までどおり */
.lprow.has-thumb{ grid-template-columns:84px minmax(150px,.9fr) 1.6fr auto; }
.lprow .lthumb{ width:84px; aspect-ratio:242/273; border-radius:4px; overflow:hidden;
  background:#fff; box-shadow:0 4px 12px rgba(15,25,45,.12); transform:rotate(-2deg); }
.lprow .lthumb img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .lprow{ grid-template-columns:1fr; gap:8px; }
  .lprow .lg{ margin-top:4px; }
  .lprow.has-thumb{ grid-template-columns:64px 1fr; column-gap:14px; }
  .lprow.has-thumb .lthumb{ width:64px; grid-row:span 3; align-self:start; }
}

/* ============================================================
   料金ページの型
   ============================================================ */
/* 3 プラン */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.plan{ background:var(--card); border:1px solid var(--hair); padding:clamp(15px,1.9vw,22px);
  display:flex; flex-direction:column; position:relative; }
.plan.reco{ border-color:var(--accent); }
.plan .pk{ position:absolute; top:-1px; right:-1px; font-family:var(--mono); font-size:9px;
  font-weight:600; letter-spacing:.1em; color:#fff; background:var(--ink); padding:4px 9px; text-transform:uppercase; }
.plan.reco .pk{ background:var(--accent); }
.plan .pt{ font-family:var(--jp); font-weight:900; font-size:17px; color:var(--ink); margin-bottom:7px; }
.plan .pdesc{ font-size:12px; line-height:1.75; color:var(--ink-2); min-height:3.5em; }
.plan .pprice{ border-top:1px solid var(--hair); margin-top:13px; padding-top:13px; }
.plan .pprice .u{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.plan .pprice .n{ font-family:var(--lat); font-weight:600; font-size:30px; color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1.2; margin-top:4px; }
.plan .pprice .s{ font-size:11px; color:var(--ink-3); margin-top:3px; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:7px; margin:14px 0 16px;
  border-top:1px solid var(--hair); padding-top:14px; }
.plan li{ font-size:12px; line-height:1.6; color:var(--ink-2); padding-left:16px; position:relative; }
.plan li::before{ content:""; position:absolute; left:0; top:.65em; width:8px; height:1px; background:var(--accent); }
.plan .pgo2{ margin-top:auto; }
/* 総額の考え方 */
.formula{ background:var(--paper-2); border:1px solid var(--hair); padding:clamp(15px,1.9vw,22px); }
.formula .ft2{ font-family:var(--jp); font-weight:900; font-size:14.5px; color:var(--ink); margin-bottom:14px; }
.formula .frow2{ display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; }
.formula .fi{ background:var(--card); border:1px solid var(--hair); padding:11px 14px; flex:1 1 150px; }
.formula .fi b{ display:block; font-family:var(--jp); font-weight:700; font-size:13px; color:var(--ink); }
.formula .fi small{ display:block; font-size:11px; color:var(--ink-3); margin-top:4px; }
.formula .fi.total{ background:var(--ink); border-color:var(--ink); flex:0 1 120px; }
.formula .fi.total b{ color:var(--paper); font-weight:900; font-size:15px; }
.formula .op{ display:flex; align-items:center; font-family:var(--lat); font-weight:600;
  font-size:18px; color:var(--accent); flex:0 0 auto; }
/* FAQ */
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--ink); }
.faq .qa{ border-bottom:1px solid var(--hair); padding:clamp(14px,1.8vw,18px) 2px; }
/* flex にすると本文中の <b> が別の flex item になって行が割れるので、block + 絶対配置にする */
.faq .q,.faq .a{ display:block; position:relative; padding-left:25px; }
.faq .q{ font-family:var(--jp); font-weight:900; font-size:14px; color:var(--ink); line-height:1.5; }
.faq .a{ font-size:12.5px; line-height:1.9; color:var(--ink-2); margin-top:9px; }
.faq .m{ position:absolute; left:0; top:0; font-family:var(--lat); font-weight:600; font-size:12px;
  color:var(--accent); line-height:1.6; }
.faq .a .m{ color:var(--ink-3); }
.faq b{ color:var(--ink); font-weight:700; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }

/* ============================================================
   アプリのバッジ（NFC-TS Lite）— markup は v2/index.html のものを流用
   ★ iOS は App Store の実 URL（id6781523229）へのリンク。2026-08-27 に 200 を実測。
     Android は未公開なので span のまま「開発中」
   ============================================================ */
.stores{ margin-top:20px; }
.stores .slabel{ font-family:var(--jp); font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:10px; }
.badges{ display:flex; flex-wrap:wrap; gap:11px; align-items:center; }
.badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 12px; border-radius:8px;
  border:1px solid #363c46; background:#0a0d12; position:relative; text-decoration:none; }
a.badge{ transition:border-color .15s, background .15s, transform .15s; }
a.badge:hover{ border-color:var(--accent); background:#12161d; transform:translateY(-1px); }
a.badge:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.badge svg{ width:19px; height:19px; color:#fff; flex:0 0 auto; }
.badge .bt2{ display:flex; flex-direction:column; line-height:1.15; }
.badge .bt2 small{ font-family:var(--lat); font-size:8px; letter-spacing:.02em; color:#c2c8d1; }
.badge .bt2 b{ font-family:var(--lat); font-size:14px; font-weight:600; color:#fff; }
.badge.soon{ opacity:.55; }
.badge .stag{ position:absolute; top:-8px; right:-2px; font-family:var(--mono); font-size:8.5px; font-weight:600;
  letter-spacing:.05em; color:#0a0d12; background:var(--accent); padding:1px 6px; border-radius:3px; }

/* ============================================================
   和紙の地紋（KV と下層の見出し帯）
   ★ CSS で描くので画像素材ゼロ。v2 の .ink が使っていた 56px 格子と同じ系統。
   ★ 実商品の柄を敷く案は、版下に「スマホでタッチ」の販促シールが焼き込まれていて
     背景でも見えてしまう（しかもタイルで繰り返す）ため見送り。
     シールの無い版下が用意できたら、ここの background-image を差し替える。
   ============================================================ */
.kv-inner,
.page-head-inner{
  background-image:
    linear-gradient(rgba(33,28,22,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,28,22,.055) 1px, transparent 1px),
    linear-gradient(45deg, rgba(33,28,22,.035) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(33,28,22,.035) 1px, transparent 1px);
  background-size:56px 56px, 56px 56px, 28px 28px, 28px 28px;
  background-position:-1px -1px;
}

/* ============================================================
   技術解説のたたみ（mock-nfc）
   ★ JS を足さない。<details>/<summary> のネイティブ開閉だけで動く。
     本番 nfc.html は独自 JS のアコーディオン。挙動は同じ（既定は閉）。
   ============================================================ */
.accs{ border-top:1px solid var(--hair); }
.acc{ border-bottom:1px solid var(--hair); background:var(--card); }
.acc + .acc{ border-top:0; }
.acc > summary{ list-style:none; cursor:pointer; display:grid;
  grid-template-columns:9px minmax(0,1fr) auto auto; align-items:center;
  gap:clamp(10px,1.4vw,16px); padding:clamp(14px,1.8vw,19px) clamp(13px,1.6vw,18px); }
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--hair-2); transition:background .2s; }
.acc[open] > summary::before,
.acc > summary:hover::before{ background:var(--accent); }
.acc > summary:hover .at{ color:var(--accent); }
/* ★2026-08-27: <span> から <h3> に変えた (見出し階層が h2 → h4 と飛んでいて、
   機械が文書の目次を作れなかったため)。見た目を変えないよう margin をゼロにする。
   h3 のブラウザ既定 margin が残ると、アコーディオンの行が縦に伸びる。 */
.acc .at{ display:block; margin:0; font-family:var(--jp); font-weight:900;
  font-size:clamp(15px,1.8vw,18px); color:var(--ink); line-height:1.45; transition:color .2s; }

/* 目に見せずに機械にだけ伝える (表の <caption> 用)。
   display:none だと読み上げ・抽出からも消えるので、位置で隠す。 */
.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.acc .al{ display:block; font-size:12.5px; line-height:1.7; color:var(--ink-2); margin-top:5px; }
.acc .ak{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-3); text-transform:uppercase; white-space:nowrap; }
.acc .ab{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--hair-2); padding:7px 11px; transition:border-color .2s,background .2s; }
.acc .ab::after{ content:"＋"; margin-left:7px; }
.acc[open] .ab::after{ content:"−"; }
.acc > summary:hover .ab{ border-color:var(--accent); background:var(--accent-wash); }
.acc .a2{ display:none; }
.acc[open] .a1{ display:none; }
.acc[open] .a2{ display:inline; }
.abody{ padding:0 clamp(13px,1.6vw,18px) clamp(16px,2.2vw,26px);
  /* 見出しの文字位置（丸＋隙間の分）に本文の左端を揃える */
  padding-left:calc(clamp(13px,1.6vw,18px) + 9px + clamp(10px,1.4vw,16px)); }
.abody > .msec-lede{ margin-top:0; }
.abody .note{ margin-bottom:0; }
/* 狭い画面：英字ラベルを落とし、ボタンを右端へ回す */
@media (max-width:760px){
  .acc > summary{ grid-template-columns:9px minmax(0,1fr) auto; }
  .acc .ak{ display:none; }
}
@media (max-width:480px){
  .acc > summary{ grid-template-columns:9px minmax(0,1fr); row-gap:12px; }
  .acc .ab{ grid-column:2; justify-self:start; }
}
/* 表の中で使う小さな印（例：標準採用）。狭い画面でも 2 行に割れない */
.tagpill{ display:inline-block; white-space:nowrap; font-family:var(--mono); font-size:9.5px;
  font-weight:600; letter-spacing:.08em; color:#fff; background:var(--accent);
  padding:2px 6px; border-radius:2px; vertical-align:1px; }
/* たたみの中の表は縮めずに横スクロールさせる（狭い画面で潰れないように） */
.abody .ptable{ min-width:560px; }

/* ============================================================
   mock-features で足したもの
   ============================================================ */
/* 課題 → 解決 の受け渡し行 */
.solve{ display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:clamp(14px,1.8vw,20px); font-family:var(--jp); font-weight:900;
  font-size:clamp(14px,1.7vw,16px); color:var(--accent); }
.solve::before,.solve::after{ content:""; height:1px; background:var(--hair-2); flex:1 1 auto; max-width:120px; }
/* ページ内アンカーの並び */
.anchors{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.6vw,30px); }
.anchors a{ font-family:var(--jp); font-size:12.5px; font-weight:700; color:var(--ink-2);
  background:var(--card); border:1px solid var(--hair); padding:8px 13px;
  transition:color .2s,border-color .2s,background .2s; }
.anchors a::before{ content:"↓"; font-family:var(--mono); color:var(--ink-3); margin-right:7px; }
.anchors a:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-wash); }
/* 見出しだけの板（.board から朱色バッジを外した形） */
.board.plain .bn{ margin-top:0; }
/* 箇条書き（仕様カードなど）。.fbody .facts と同じ見た目で、どこでも使える */
.factlist{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:11px; }
.factlist li{ font-size:12px; line-height:1.7; color:var(--ink-2); padding-left:14px; position:relative; }
.factlist li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--accent); }
/* 本文中のリンク */
.tlink{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.tlink:hover{ color:var(--accent-deep); }
/* アンカーの並びの下に来る節も、節どうしと同じ間を空ける */
.anchors + .msec{ margin-top:clamp(34px,4.2vw,58px); }
/* 手順カードの下につく分類（例：中〜大ロット向き） */
.ftag{ display:inline-block; margin-top:11px; font-family:var(--jp); font-size:11px; font-weight:700;
  color:var(--accent); border:1px solid var(--accent); padding:4px 9px; line-height:1.3; }
/* 分類ラベルが付くカードは、ラベルの高さを揃える（本文の長さが違っても下端で揃う） */
.flow .f{ display:flex; flex-direction:column; }
.flow .f .fd{ flex:1 1 auto; }

/* ============================================================
   mock-lite で足したもの
   ============================================================ */
/* 商品の 3 枚 */
.prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px); }
.prod{ background:var(--card); border:1px solid var(--hair); display:flex; flex-direction:column; }
.prod .pimg{ background:#fff; aspect-ratio:4/3; border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prod .pimg img{ width:100%; height:100%; object-fit:contain; padding:12px; }
/* 写真が用意できていない枠。仮画像では埋めない */
.prod .pimg.empty{ background:rgba(255,253,248,.6); border-bottom:1px dashed var(--hair-2); }
.prod .pimg.empty .ps{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.prod .pimg.empty .ps b{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; border:1px solid var(--accent); padding:4px 8px; }
.prod .pimg.empty .ps{ font-size:11.5px; color:var(--ink-3); }
.prod .pbody{ padding:clamp(13px,1.6vw,18px); display:flex; flex-direction:column; flex:1 1 auto; }
.prod .pbadge{ align-self:flex-start; font-family:var(--jp); font-size:10.5px; font-weight:700;
  color:#fff; background:var(--accent); padding:3px 8px; border-radius:2px; letter-spacing:.03em; }
.prod .pname{ font-family:var(--jp); font-weight:900; font-size:15px; color:var(--ink);
  margin:11px 0 7px; line-height:1.4; }
.prod .ptext{ font-size:12.5px; line-height:1.85; color:var(--ink-2); }
/* 手順カードに入るスマホ画面の枠（4 枚とも準備中） */
.phslot{ width:min(100%,104px); aspect-ratio:9/16; margin:0 auto clamp(11px,1.4vw,15px);
  border:1px dashed var(--hair-2); background:rgba(244,239,228,.7); border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:8px; }
.phslot span{ display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:10px; line-height:1.5; color:var(--ink-3); text-align:center; }
.phslot span b{ font-family:var(--jp); font-size:10px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.board .bn .em{ color:var(--accent); }
@media (max-width:900px){ .prods{ grid-template-columns:1fr; } }
/* 手順カードに入るアプリの実スクショ。
   2026-09-09: 枠が 9/16 (0.5625) で、実機で撮った画面 (1206/2622 = 0.46) と比が合わず
   cover で下が 25% 切れていた。枠を実機の比に合わせ、107% の拡大も外して等倍で収める
   (版番号 v1.0.1 は撮影時に切り落とし済みなので、枠外へ逃がす必要がなくなった)。 */
.phshot{ width:min(100%,104px); aspect-ratio:1206/2622; margin:0 auto clamp(11px,1.4vw,15px);
  border:1px solid #333a44; background:#0a0d12; border-radius:14px; padding:4px; overflow:hidden;
  box-shadow:0 10px 24px rgba(33,28,22,.16); }
.phshot img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:11px; }
/* 3 列のステップに実スクショが入る時は、枠を少し大きく取れる */
.step .phshot{ width:min(100%,132px); }
/* 色紙の柄（5 つ）。写真が用意できるまでは名前と一言だけ */
.patterns{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,14px); }
.pat{ background:var(--card); border:1px solid var(--hair); display:flex; flex-direction:column; }
.pat .pi{ background:#fff; border-bottom:1px solid var(--hair); overflow:hidden; }
.pat .pi img{ width:100%; height:auto; display:block; }
.pat .pb{ padding:clamp(12px,1.4vw,16px); }
.pat .pk{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase; }
.pat .pn{ font-family:var(--jp); font-weight:900; font-size:14.5px; color:var(--ink); margin:9px 0 6px; line-height:1.4; }
.pat .pd{ font-size:11.5px; line-height:1.8; color:var(--ink-2); }
@media (max-width:980px){ .patterns{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .patterns{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .patterns{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   ハニーポット（bot 対策）
   人には見せず、支援技術からも外す。display:none を使わないのは
   それを避ける bot がいるため。★この規則を消すと欄が画面に出る。
   ------------------------------------------------------------ */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ============================================================
   マスコット（タグ精霊）— 2026-08-27 追加
   ★index.html だけで使う。動画に出てくるキャラクターを右下に常駐させ、
     ときどき吹き出しでつぶやく。
   ・prefers-reduced-motion では浮遊を止める（酔いを防ぐ）
   ・980px 未満では出さない。狭い画面で本文と CTA を隠すため
   ・position:fixed だが z-index はヘッダー(50)より下。ナビを塞がない
   ============================================================ */
.mascot{ position:fixed; right:clamp(18px,2vw,32px); bottom:clamp(18px,2vw,28px);
  z-index:40; width:clamp(76px,6.4vw,100px); cursor:pointer; border:0; background:none;
  padding:0; -webkit-tap-highlight-color:transparent; }
.mascot img{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 14px rgba(33,28,22,.18));
  animation:mascot-float 4.5s ease-in-out infinite; }
.mascot img.open{ display:none; }
.mascot.talking img.closed{ display:none; }
.mascot.talking img.open{ display:block; }
@keyframes mascot-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* 吹き出し。マスコットの左に出す。
   ★position:absolute + right:100% だと親(マスコット)の幅が基準になり、
     幅が足りずに 1 文字ずつ折り返した（実画面で確認）。
     fixed で画面基準にし、幅を自前で決める。 */
/* ★2026-09-03: マスコットの「左」に出すと、先頭表示時に スマホ本体 / 外部リンクのアイコン /
   スマホ下のキャプション の 3 つに重なる（実測: 吹き出し x1073-1323 y636-702）。
   マスコットの「真上」・画面right寄せに移した。ここは紙地しか無い。 */
.mascot-bubble{ position:fixed; right:clamp(14px,1.4vw,20px);
  bottom:calc(clamp(18px,2vw,28px) + clamp(76px,6.4vw,100px) + 42px);
  width:max-content; max-width:158px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--hair); border-radius:14px; padding:10px 14px;
  font-family:var(--jp); font-size:12.5px; line-height:1.75; font-weight:500;
  box-shadow:0 6px 18px rgba(33,28,22,.12);
  opacity:0; transform:translateY(6px) scale(.96); transform-origin:82% 100%;
  transition:opacity .28s ease, transform .28s ease; pointer-events:none; }
.mascot.talking .mascot-bubble{ opacity:1; transform:translateY(0) scale(1); }
/* ★2026-09-03: 吹き出しは body 直下に作るので、子孫セレクタでは当たらない。
   表示は .on で切り替える（既存の .talking は口の開閉に使っている）。 */
.mascot-bubble.on{ opacity:1; transform:translateY(0) scale(1); }
.mascot-bubble::after{ content:""; position:absolute; right:32px; bottom:-7px;
  width:12px; height:12px; background:var(--card);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  transform:rotate(45deg); }

@media (prefers-reduced-motion:reduce){
  .mascot img{ animation:none; }
  .mascot-bubble{ transition:none; }
}
/* ★980px 未満では出さない。トップのヒーローは 980px でレイアウトが変わり、
     それ以下だとマスコットが本文や用途アイコンに重なる（実画面で確認）。 */
@media (max-width:980px){ .mascot{ display:none; } }

/* ── ヒーローの ISMS 認証マーク ──────────────────────────────
   2026-08-31 追加。app.nfc-ts.com のフッターに置いていたものを nfcts.jp の
   ヒーローへ移設 (素材は backup/app.nfc-ts.com/.../isms-cert.png と同一)。
   ★ロゴ画像の地色が白なので、生成りの版面に対して白カードを敷いて分離する。 */
/* ★2026-09-01: 320px は App Store バッジ (約118px) の 2.7 倍あり、生成りの地に
   白い箱が乗るため、ヒーローで CTA より目立っていた。180px に落とす。
   置き場所はヒーローのままで確定 (チームの判断)。
   ★ラベルは画像幅で折らない。280px に閉じ込めると「（ISMS）認/証取得」と
   不自然に割れる (スマホで実測)。ラベルだけ左カラム幅で流す。 */
.kv .isms{ margin-top:26px; }
.kv .isms-l{ margin:0 0 8px; font-family:var(--jp); font-size:11px; font-weight:600;
             letter-spacing:.06em; line-height:1.5; color:var(--ink3,#7b7268);
             max-width:34em; }
.kv .isms img{ display:block; width:100%; max-width:180px; height:auto; background:#fff;
               border:1px solid rgba(0,0,0,.09); border-radius:6px; padding:8px 11px; }
@media (max-width:760px){ .kv .isms{ margin-top:20px; }
                          .kv .isms img{ max-width:170px; } }

/* ===========================================================================
   2026-09-02 追加 — ファーストビューに絵を入れる
   
   ★ 直した理由（実測してから決めた）
     スマホの最初の画面が文字ブロック 7 つで、絵が 1 枚も入っていなかった。
     商品のスマホ写真は画面の高さ 1.1 個ぶん下、アイコン 6 つは 1.9 個ぶん下。
     右下の浮遊マスコットは「本文と CTA を隠さないため」640px 未満で非表示。
     → つまりスマホでは絵がゼロだった。「文字だけでハードルが高い」は正しい。

   ★ 足すより先に引いた
     電話・アプリバッジ・ISMS 認証マークをヒーローの外（.kv-sub）へ下ろした。
     消していない。場所を変えただけ。空いたところに絵を 1 枚入れている。

   ★ PC は変えていない
     PC には既にスマホのモックアップとアイコンが出ているので、
     .kv-hello は 900px 以上では出さない（絵が二重になる）。
   =========================================================================== */

.kv-hello{ display:none; }

/* --- スマホ・タブレット: 見出しの直後に絵を出す --- */
@media (max-width:900px){
  .kv-hello{
    display:flex; align-items:center; gap:14px;
    margin-top:18px;
    padding:14px 16px 14px 10px;
    background:rgba(255,253,248,.72);
    border:1px solid var(--hair-2);
    border-radius:14px;
  }
  .kv-hello-img{
    width:84px; height:auto; flex:0 0 auto;
    /* 元画像に余白があるので、少しはみ出させて実寸を稼ぐ */
    margin:-10px 0 -10px 0;
  }
  .kv-hello-t{
    margin:0; font-family:var(--jp);
    font-size:14px; line-height:1.7; font-weight:700; color:var(--ink-2);
  }
  .kv-hello-t b{ color:var(--accent); font-weight:900; }

  /* リード文は絵の下。長いので少し詰める */
  .kv .lead{ margin-top:14px; }
}

@media (max-width:400px){
  .kv-hello{ gap:10px; padding:12px 12px 12px 8px; }
  .kv-hello-img{ width:72px; }
  .kv-hello-t{ font-size:13px; }
}

/* --- アプリのダウンロード帯（ヒーロー直下）2026-09-02 --- */
/* ★ 他社のアプリ紹介ページと同じ型: ブランド色のベタ帯・中央揃え・罫線つきの見出し。
     もとはヒーローの中に 電話 / バッジ / ISMS が同居していて、
     スマホの最初の画面が文字で埋まっていた。 */
.appband{ background:var(--accent); color:#fff; }
.appband-in{
  max-width:var(--maxw); margin:0 auto; text-align:center;
  padding:clamp(24px,3.2vw,38px) clamp(22px,3.4vw,50px) clamp(26px,3.4vw,40px);
}
.appband-h{
  margin:0; font-family:var(--jp); font-weight:800;
  font-size:clamp(14px,1.5vw,17px); letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
/* 見出しの左右に細い罫線（.kv-cap::before と同じ考え方） */
.appband-h::before, .appband-h::after{
  content:""; display:block; width:clamp(24px,4vw,54px); height:1px;
  background:rgba(255,255,255,.55);
}
.appband-s{
  margin:8px 0 0; font-family:var(--jp);
  font-size:12.5px; line-height:1.8; color:rgba(255,255,255,.82);
}
.appband-s b{ color:#fff; font-weight:700; }
.appband .badges{ margin-top:16px; justify-content:center; }
.sp-br{ display:none; }

/* ★ 帯が朱なので、朱のままの「開発中」タグは地に沈んで読めない。
     帯の中だけ白地・朱文字に反転する（実際に描画を見て気づいた）。 */
.appband .badge .stag{ background:#fff; color:var(--accent-deep); }
/* .badge.soon の opacity:.55 も朱の上だと濁って壊れて見えるので少し上げる */
.appband .badge.soon{ opacity:.72; }

@media (max-width:640px){
  .appband-s{ font-size:12px; }
  .sp-br{ display:inline; }   /* スマホでは 2 行に折る */
  .appband .badges{ gap:10px; }
}

/* --- ISMS 認証（お問い合わせブロックの Tel / Form / Company の並び）2026-09-02 --- */
/* ★ 単独の帯にすると前後の箱の隙間に浮いて見えたので、会社情報の並びに入れた。
     背景が濃い（.contact は var(--ink)）ので、白のロゴ板がそのまま映える。 */
.cinfo .cv.cert{ display:flex; align-items:center; gap:12px; }
.cinfo .cv.cert img{
  display:block; width:112px; height:auto; flex:0 0 auto;
  background:#fff; border-radius:4px; padding:6px 8px;
}
.cinfo .cv.cert span{
  font-family:var(--jp); font-size:11px; font-weight:600; line-height:1.6;
  color:var(--panel-ink-2, #a79c8c);
}
@media (max-width:760px){
  .cinfo .cv.cert{ gap:10px; }
  .cinfo .cv.cert img{ width:96px; }
  .cinfo .cv.cert span{ font-size:10.5px; }
}

/* --- 3コマの流れ図（かざすと、何が起きるのか）2026-09-02 追加 --- */
.steps-fig{ margin:22px 0 6px; }
.steps-fig img{
  display:block; width:100%; height:auto;
  /* 透過 PNG/WebP なので、背景は用紙色のまま透ける。枠は付けない（囲むと図が硬くなる） */
}
@media (max-width:900px){
  /* 縦組みは背が高いので、左右に少し余白を入れて息をつかせる */
  .steps-fig{ margin:18px auto 10px; max-width:340px; }
  /* ★ 縦版の比率で場所を取る。<img> の width/height は横版のままなので、
       ここで上書きしないと読み込み前に横版の高さで場所取りしてガタつく */
  .steps-fig img{ aspect-ratio:800 / 1687; }
}
@media (min-width:901px){
  .steps-fig img{ aspect-ratio:1672 / 941; }
}

/* ============================================================
   KV のアイコン — 順に選ばれ、押しても選べる（2026-09-03 追加）
   ★ スクロール駆動なし。時間による巡回とクリックのみ。
   ★ prefers-reduced-motion では巡回を止める（JS 側で判定）
   ============================================================ */
.kv-chips{ pointer-events:none; }
.chip{ pointer-events:none; transition:transform .28s ease; }
.chip .ic{ transition:background .28s ease, box-shadow .28s ease, transform .28s ease; }
.chip .lb{ transition:color .28s ease; }
.chip[aria-selected="true"]{ transform:translateY(-3px); }
.chip[aria-selected="true"] .ic{ background:var(--accent);
  box-shadow:0 10px 24px rgba(219,76,42,.32); }
.chip[aria-selected="true"] .ic svg{ fill:#fff; }
.chip[aria-selected="true"] .lb{ color:var(--ink); }
/* 画面の入れ替え（重ねてクロスフェード） */
.ph-scr{ position:relative; }
.ph-scr img.app-shot{ position:absolute; inset:0; width:100%; opacity:0;
  transition:opacity .32s ease; }
.ph-scr img.app-shot.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .chip,.chip .ic,.chip .lb,.ph-scr img.app-shot{ transition:none; }
}

/* ISMS をヒーローの CTA 下に（PC のみ・小さく静かに）
   ★ 幅はボタン列に合わせる。罫線=ボタン2つ分(300px)／ロゴ=主ボタンと同じ(152px)。
     揃えないと罫線だけが 212px 長く伸びて、左の列が揃って見えない。 */
.kv-isms{ margin-top:30px; padding-top:20px; border-top:1px solid var(--hair);
  width:300px; max-width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.kv-isms img{ display:block; width:152px; height:auto;
  background:#fff; border:1px solid var(--hair); padding:7px; border-radius:3px; }
.kv-isms span{ font-family:var(--jp); font-size:10.5px; font-weight:600; line-height:1.65;
  color:var(--ink-3); letter-spacing:.01em; }
@media (max-width:760px){ .kv-isms{ display:none; } }