/* ==========================================================================
   巻組工房 商品サイト — 見た目の正本
   2026-09-01 全面改訂（上田「B2B SaaS のエレガントなサイトとの差分を埋めて」）

   【この改訂で変えた考え方】
   旧版は「ブランド色を面で塗り、全部を白いカードに入れる」作りだった。
   結果、①どこを見ればいいか分からない ②本文の行が長すぎる ③色が常に主張する、の3つが起きていた。

   新しい原則は4つだけ:
     ① **色は面で塗らない。** 濃紺は"文字の色"として使い、面で塗るのはページに1〜2箇所（CTAとフッター）。
        黄は差し色 — 1画面に1つまで。
     ② **行長を決める。** 本文は 42em（日本語で1行 約41字）で止める。表と図だけが幅いっぱいを使える。
        34em(=33字)まで絞ったら「細い」と差し戻された(2026-09-03)。可読域は 35〜45字。
     ③ **枠線と影を減らす。** 区切りはヘアライン。影は"押せるもの"にだけ。
     ④ **余白で階層を作る。** 節の間 = 112px。見出しの上下の空きで、読む順番を作る。

   日本語の組版で効かせているもの:
     - font-feature-settings "palt"（見出しのみ）= 仮名の詰め。これだけで見出しの品が変わる。
     - letter-spacing は本文 .02em / 大見出し -.01em（大きい字は詰める）
     - line-height 1.9（欧文サイトの 1.5 をそのまま持ってくると日本語は詰まって見える）
   ========================================================================== */

:root{
  /* インク（濃紺は面ではなく文字の色として使う） */
  --ink:#14181f;
  --ink-2:#3d4552;
  --muted:#6d7480;
  --navy:#1c3156;
  --navy-2:#2b4a80;
  --navy-deep:#101c33;

  /* 紙（旧 #f0f0ec は灰色に寄りすぎていた。暖かい白へ） */
  --paper:#faf9f6;
  --surface:#ffffff;
  --surface-2:#f3f2ed;

  /* 線（色ではなく透明度で引く = どの背景でも馴染む） */
  --line:rgba(20,24,31,.10);
  --line-2:rgba(20,24,31,.06);

  /* 差し色。1画面に1つまで */
  --accent:#facd00;
  --ok:#1f7a5c;
  --warn:#9a6100;

  --measure:42em;      /* 本文の行長。16.5px で約41字 = 日本語の可読域(35〜45字)の真ん中。
                          34em(=33字)は短すぎて、1120px の器の中で本文だけが半分しか使わず
                          「細いところが細い」状態だった(2026-09-03 上田) */
  --wide:1040px;       /* 図・表・グリッドの幅。1120 だと本文(42em=693px)との差が開きすぎ、
                          ページが左に寄って見えた。1040 で 本文:図 = 約7:10 に収まる(2026-09-03 上田) */
  --r:10px;
  --lift:0 1px 1px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic Medium","Yu Gothic",
              -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.9; letter-spacing:.02em;
  font-feature-settings:"palt" 0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* 行頭禁則。既定(auto)のブラウザは小書き仮名と長音を行頭に置ける ＝
     「ソフトウ／ェア会社ではありません」のような割れ方をする(2026-09-02 本番の
     トップで実測)。strict は小書き仮名・長音符・‐ を行頭に置かせない。継承する
     ので、ここ1箇所で全ページの見出しと本文に効く。 */
  line-break:strict;
}
img,svg{max-width:100%; height:auto; display:block}
::selection{background:var(--accent); color:#221c00}
a{color:var(--navy-2); text-decoration:none; border-bottom:1px solid rgba(43,74,128,.28); transition:border-color .15s,color .15s}
a:hover{color:var(--navy); border-bottom-color:var(--navy)}
:focus-visible{outline:2px solid var(--navy-2); outline-offset:3px; border-radius:3px}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:10px 14px; border-radius:8px; border:1px solid var(--line)}

/* ---- 見出し（詰めて、大きく、余白で立てる） ---- */
h1,h2,h3,h4{
  font-feature-settings:"palt" 1;
  line-height:1.42; letter-spacing:-.005em; font-weight:700; color:var(--ink);
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   ヘッダー — 明るく、細く。色は面で塗らない。
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,249,246,.82); backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line-2);
}
.bar{display:flex; align-items:center; gap:28px; min-height:66px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:9px; border:0; margin-right:auto; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-ja{font-size:18px; font-weight:700; letter-spacing:.04em; font-feature-settings:"palt" 1}
.brand-en{font-size:9.5px; letter-spacing:.2em; color:var(--muted); font-weight:600}
.nav{display:flex; gap:26px; flex-wrap:wrap}
.nav a{
  color:var(--ink-2); font-size:14px; letter-spacing:.03em; border:0;
  padding:4px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.bar-actions{display:flex; gap:10px; align-items:center}

/* --------------------------------------------------------------------------
   ボタン — 角丸は控えめ。既定は「線」。黄は主役の1つだけ。
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:8px; border:1px solid transparent;
  font-size:14.5px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--accent); color:#231c00; border-color:var(--accent)}
.btn-y:hover{background:#ffd824; border-color:#ffd824; color:#231c00}
.btn-navy{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-navy:hover{background:#000; color:#fff; border-color:#000}
.btn-line{color:var(--ink); border-color:var(--line); background:transparent}
.btn-line:hover{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-ghost{color:var(--ink-2); border-color:var(--line)}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink)}
.btn-lg{padding:15px 28px; font-size:15.5px}

/* --------------------------------------------------------------------------
   本文 — 行長を止める。表・図・グリッドだけが幅いっぱいを使う。
   -------------------------------------------------------------------------- */
.breadcrumb{
  max-width:var(--wide); margin:0 auto; padding:22px 24px 0;
  font-size:12.5px; letter-spacing:.04em; color:var(--muted);
}
.breadcrumb a{color:var(--muted); border:0}
.breadcrumb a:hover{color:var(--ink)}
.content{max-width:var(--wide); margin:0 auto; padding:0 24px 104px}

.prose > h1, .prose > h2, .prose > h3, .prose > h4,
.prose > p, .prose > ul, .prose > ol, .prose > blockquote{max-width:var(--measure)}

.prose h1{font-size:42px; line-height:1.32; margin:40px 0 20px; letter-spacing:-.015em}
.prose h2{font-size:27px; margin:88px 0 18px; letter-spacing:-.01em; position:relative; padding-top:22px}
.prose h2::before{content:""; position:absolute; top:0; left:0; width:34px; height:3px; background:var(--accent)}
.prose h3{font-size:18.5px; margin:44px 0 10px}
.prose h4{font-size:16px; margin:28px 0 6px; color:var(--navy)}
.prose p{margin:0 0 1.35em}
.prose ul,.prose ol{padding-left:1.35em; margin:0 0 1.5em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--muted)}
.prose hr{border:0; border-top:1px solid var(--line); margin:72px 0; max-width:none}
.prose strong,.prose b{font-weight:700}
.prose blockquote{
  margin:0 0 1.5em; padding:2px 0 2px 22px; border-left:2px solid var(--accent);
  color:var(--ink-2); font-size:16px;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{
  background:var(--surface-2); border-radius:4px; padding:.12em .42em;
  font-size:.88em; letter-spacing:0;
}

.lead{font-size:20px; line-height:1.85; color:var(--ink-2); letter-spacing:.01em; margin-bottom:1.6em !important}
.note{color:var(--muted); font-size:14.5px}
.small{font-size:13.5px; color:var(--muted); line-height:1.8}
.center{text-align:center; max-width:none !important}

/* ---- 表 — 塗りをやめてヘアラインに。数字は等幅で揃える ---- */
.table-scroll{overflow-x:auto; margin:0 0 2em; max-width:none}
.prose table{
  border-collapse:collapse; width:100%; font-size:14.5px; line-height:1.75;
  font-variant-numeric:tabular-nums;
}
.prose th,.prose td{padding:14px 16px 14px 0; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top}
.prose th:last-child,.prose td:last-child{padding-right:0}
.prose thead th{
  background:transparent; color:var(--muted); font-weight:700;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:10px; white-space:nowrap;
}
.prose tbody tr:last-child td{border-bottom:1px solid var(--line)}
.prose tbody tr:hover td{background:rgba(20,24,31,.015)}

/* --------------------------------------------------------------------------
   カード — 既定は"枠のない区画"。影は押せるものだけ。
   -------------------------------------------------------------------------- */
.grid{display:grid; gap:1px; margin:0 0 2em; max-width:none; background:var(--line-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
/* 単体のカード = 本物のカード（面＋ヘアライン＋わずかな浮き）。
   グリッドの中のカード = 面を持たず、1px の隙間そのものが区切りになる（枠の二重取りを避ける）。 */
.card{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--lift); max-width:var(--measure);
}
.grid .card{background:var(--paper); border:0; border-radius:0; box-shadow:none; padding:30px 28px; max-width:none}
.sec-alt .card{background:var(--surface-2)}
.card h3{margin:0 0 10px; font-size:16.5px; line-height:1.55}
.card p{margin:0 0 .9em; font-size:15px; line-height:1.85; color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card .small{font-size:13px}
.card .tag{
  display:inline-block; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:4px;
  margin-left:8px; vertical-align:2px; letter-spacing:.06em;
}
.tag-live{background:rgba(31,122,92,.10); color:var(--ok)}
.tag-prep{background:rgba(154,97,0,.10); color:var(--warn)}
.card-link{border:0; color:inherit; display:block; transition:background .16s}
.card-link:hover{background:var(--surface); color:inherit}
.card-link .more{color:var(--navy-2); font-weight:700; font-size:13.5px; letter-spacing:.04em}
.card-link:hover .more{color:var(--navy)}

/* --------------------------------------------------------------------------
   ヒーロー — 紙の上に大きな文字。濃紺で塗らない。
   -------------------------------------------------------------------------- */
.hero{padding:112px 0 84px; border-bottom:1px solid var(--line-2)}
.hero .kicker{
  display:inline-block; font-size:11px; letter-spacing:.22em; font-weight:700;
  color:var(--muted); margin-bottom:26px;
}
.hero .kicker::before{content:""; display:inline-block; width:22px; height:2px; background:var(--accent); vertical-align:4px; margin-right:10px}
.hero h1{font-size:60px; line-height:1.28; letter-spacing:-.025em; margin:0 0 26px; max-width:15em}
.hero p{font-size:18px; line-height:1.9; color:var(--ink-2); max-width:38em; margin:0 0 34px}
.hero .btns{display:flex; gap:12px; flex-wrap:wrap}

/* ---- セクション（トップ用） ---- */
.sec{padding:104px 0}
.sec-alt{background:var(--surface-2)}
.sec > .wrap > h2{
  /* 20em だとトップで最長の見出し(22字)だけが折り返し、カタカナ語が
     「ソフト／ウェア」で割れる。24em にすると1行に収まる — トップの見出しは
     全部20字前後なので、これで全部1行になる(2026-09-02 実測)。 */
  font-size:30px; letter-spacing:-.015em; margin:0 0 10px; max-width:24em;
}
.sec .sub{color:var(--muted); margin:0 0 44px; font-size:15.5px; max-width:46em}
.sec-alt .grid{background:rgba(20,24,31,.08); border-color:rgba(20,24,31,.08)}
.sec-alt .card-link:hover{background:#fff}

/* ---- CTA 帯 — ページで唯一の"塗った面" ---- */
.cta-band{background:var(--navy-deep); color:#fff; padding:104px 0; text-align:center}
.cta-band h2{font-size:34px; color:#fff; margin:0 0 16px; letter-spacing:-.02em}
.cta-band p{color:#a9b6cc; margin:0 auto 30px; max-width:34em; font-size:16px}

/* ---- フッター ---- */
.site-footer{background:var(--navy-deep); color:#93a1b8; padding:0 0 34px; font-size:14px; border-top:1px solid rgba(255,255,255,.07)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-top:64px}
.foot-brand{font-size:16px; font-weight:700; color:#fff; margin:0 0 10px; letter-spacing:.04em}
.foot-note{color:#7d8ba3; font-size:13px; line-height:1.9}
.foot-h{font-weight:700; color:#fff; margin:0 0 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:7px 0}
.site-footer a{color:#93a1b8; border:0; font-size:13.5px}
.site-footer a:hover{color:#fff}
.foot-legal{
  margin-top:56px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
}
.foot-legal ul{display:flex; gap:22px; flex-wrap:wrap}
.copy{margin:0; color:#65718a; font-size:12px; letter-spacing:.04em}

/* --------------------------------------------------------------------------
   部品
   -------------------------------------------------------------------------- */
.pill{
  display:inline-block; border:1px solid var(--line); border-radius:6px;
  padding:5px 12px; font-size:12.5px; color:var(--ink-2); margin:0 6px 8px 0; letter-spacing:.03em;
}
.price-big{font-size:44px; font-weight:700; color:var(--ink); line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price-unit{font-size:14px; font-weight:400; color:var(--muted); letter-spacing:.02em; margin-left:4px}

.callout{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:24px 26px; margin:0 0 1.8em; max-width:var(--measure); box-shadow:var(--lift);
}
.callout.warn{border-color:rgba(250,205,0,.5); background:#fffdf4}
.callout p{margin:0 0 .8em; font-size:15.5px}
.callout p:last-child{margin-bottom:0}
.callout .h{font-weight:700; margin:0 0 8px; display:block; color:var(--ink); font-size:15.5px}

.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 2em; max-width:var(--measure)}
.steps li{counter-increment:s; position:relative; padding:0 0 30px 56px; margin:0}
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  width:34px; height:24px; display:flex; align-items:center; border-bottom:2px solid var(--accent);
}
.steps li::after{content:""; position:absolute; left:16px; top:34px; bottom:4px; width:1px; background:var(--line-2)}
.steps li:last-child::after{display:none}
.steps b{display:block; font-size:17px; margin-bottom:4px; line-height:1.5; letter-spacing:-.005em}

.check{list-style:none; padding:0; max-width:var(--measure)}
.check li{position:relative; padding-left:30px; margin:.7em 0}
.check li::before{content:"✓"; position:absolute; left:2px; top:0; color:var(--ok); font-weight:700}
.cross li::before{content:"✕"; color:#b04a3a; font-size:.9em; top:.05em}

.figure{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:22px; margin:0 0 2em; max-width:none; box-shadow:var(--lift);
}
.figure figcaption{font-size:12.5px; color:var(--muted); margin-top:14px; text-align:center; letter-spacing:.03em}

.nextnav{display:flex; gap:10px; flex-wrap:wrap; margin-top:72px; padding-top:32px; border-top:1px solid var(--line); max-width:none}

/* ---- フォーム ---- */
.prose form.card{max-width:var(--measure); padding:34px 32px; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--lift)}
input[type=text],input[type=email],input:not([type]),select,textarea{
  width:100%; padding:12px 14px; font-size:15.5px; font-family:inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; transition:border-color .15s, background .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--navy-2); background:#fff; outline:none}
label{font-size:14.5px}
fieldset{border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper)}
legend{font-size:13px; letter-spacing:.04em}

/* --------------------------------------------------------------------------
   画面が小さいとき
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .grid-3{grid-template-columns:1fr 1fr}
  .hero{padding:64px 0 52px}
  .hero h1{font-size:38px; letter-spacing:-.02em}
  .hero p{font-size:16.5px}
  .sec{padding:68px 0}
  /* 横1行のスクロールする列にする意図で overflow-x:auto を置いていたが、
     .nav の flex-wrap:wrap を解いていなかったので実際は2段に折り返し、
     390px 幅でヘッダーだけで 215px 使っていた(2026-09-02 実測)。nowrap で意図どおりに。
     スクロールバーは出さない(出ると2段より汚い)。 */
  .nav{order:3; width:100%; gap:18px; padding-bottom:10px;
       flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav > *{flex:0 0 auto}
  .bar{min-height:58px; padding-top:10px; gap:16px}
  .prose h1{font-size:31px}
  .prose h2{font-size:23px; margin-top:64px}
  .cta-band{padding:72px 0}
  .cta-band h2{font-size:26px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap,.content,.breadcrumb{padding-left:20px; padding-right:20px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:31px}
  .prose h1{font-size:26px}
  .price-big{font-size:34px}
  .grid .card{padding:26px 22px}
  .prose form.card{padding:26px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   トップのヒーロー図 — ページに1つだけ置く「製品の絵」。
   エレガントな B2B サイトに共通しているのは、文章の隣に**必ず1枚の強い絵**があること。
   ここは実画面ではなく、実画面の"読み方"を抽象化した図（DISCLOSURE 上、実画面は公開面に出せない）。
   -------------------------------------------------------------------------- */
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center}
.hero-figure{
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  padding:26px 24px; box-shadow:0 1px 2px rgba(20,24,31,.04), 0 18px 48px rgba(20,24,31,.09);
}
.hero-figure figcaption{margin-top:16px; font-size:12px; color:var(--muted); letter-spacing:.04em; text-align:center}
.hero-grid .hero p{margin-bottom:0}

/* 数字を見せる帯（実績ではなく"かたち"を数字で言う） */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); max-width:none}
.facts div{background:var(--paper); padding:30px 28px}
.facts .n{font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; display:block}
.facts .l{font-size:13px; color:var(--muted); margin-top:8px; display:block; line-height:1.7}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .facts{grid-template-columns:1fr}
}

/* ==========================================================================
   写真・図版（2026-09-01 追補・上田「画像がなさすぎでは？」）
   写真は巻組の自社物件（roopt/web の素材）と、巻組公式サイトの代表写真のみを使う。
   ========================================================================== */
.shot{border-radius:12px; overflow:hidden; background:var(--surface-2)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot-cap{font-size:12px; color:var(--muted); margin-top:10px; letter-spacing:.03em}

/* 写真の帯（3〜4枚を高さを揃えて並べる） */
.photos{display:grid; gap:12px; margin:0 0 2em; max-width:none}
.photos-3{grid-template-columns:repeat(3,1fr)}
.photos-4{grid-template-columns:repeat(4,1fr)}
.photos .shot{aspect-ratio:4/3}
.photos-tall .shot{aspect-ratio:3/4}

/* 大きな1枚（節の主役） */
.shot-wide{aspect-ratio:21/9; margin:0 0 2em; max-width:none}
.shot-hero{aspect-ratio:16/10}

/* 写真と文章の2段組 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin:0 0 2em; max-width:none}
.split-photo{grid-template-columns:1.15fr .85fr}
.split .shot{aspect-ratio:4/3}
.split h3{margin-top:0}
.split p:last-child{margin-bottom:0}

/* 人（丸く小さく） */
.person{display:flex; align-items:center; gap:16px; margin:0 0 1.4em}
.person img{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  object-position:68% 44%;   /* 顔の位置。写真を差し替えたらここを見る */
  flex:none; box-shadow:0 0 0 1px var(--line);
}
.person .who{font-size:14px; line-height:1.6}
.person .who b{display:block; font-size:15px}
.person .who span{color:var(--muted); font-size:13px}

/* 声（引用＋人） */
.voice{
  background:var(--surface); border:1px solid var(--line-2); border-radius:14px;
  padding:32px 34px; margin:0 0 2em; max-width:var(--measure); box-shadow:var(--lift);
}
.voice q{
  display:block; font-size:19px; line-height:1.85; letter-spacing:-.005em;
  quotes:"「" "」"; margin:0 0 22px; font-weight:600;
}
.voice .person{margin:0}

/* ブラウザの枠（自社で運用しているサイトを見せる） */
.frame{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--lift); margin:0 0 2em; max-width:none}
.frame-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--line-2)}
.frame-bar i{width:9px; height:9px; border-radius:50%; background:rgba(20,24,31,.16); display:block}
.frame-url{
  margin-left:10px; font-size:11.5px; color:var(--muted); background:#fff;
  border-radius:5px; padding:4px 12px; letter-spacing:.03em; border:1px solid var(--line-2);
}
.frame .shot{border-radius:0; aspect-ratio:16/9}

/* 社会的証明の帯 */
.users{
  display:flex; align-items:center; gap:14px 40px; flex-wrap:wrap; padding:26px 0;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); max-width:none;
}
.users .lbl{font-size:11px; letter-spacing:.14em; color:var(--muted); font-weight:700}
.users .u{font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--ink-2)}
.users .u span{font-size:12px; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:.02em}

/* 不安をひとつずつ外す（クロージングの要） */
.objections{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); max-width:none}
.objections div{background:var(--paper); padding:26px 28px}
.objections .q{font-weight:700; font-size:15.5px; margin:0 0 8px; color:var(--ink)}
/* 2026-09-14: 質問を「」で囲っていたのは、お客様の声を引く書き方だった名残。FAQ としては Q. の印にする */
.objections .q::before{content:"Q."; color:var(--navy-2); margin-right:8px; letter-spacing:.02em}
.objections .a{margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.85}
.sec-alt .objections div{background:var(--surface-2)}

@media (max-width:900px){
  .split,.split-photo{grid-template-columns:1fr; gap:28px}
  .photos-4{grid-template-columns:1fr 1fr}
  .objections{grid-template-columns:1fr}
  .voice{padding:26px 24px}
  .voice q{font-size:17px}
}
@media (max-width:600px){
  .photos-3,.photos-4{grid-template-columns:1fr 1fr}
  .shot-wide{aspect-ratio:16/9}
}

/* 枠の中に小さくサイトの姿を見せる（実運用しているサイトの紹介用） */
.mini{position:relative}
.mini .shot{aspect-ratio:16/9; border-radius:0}
.mini .over{position:absolute; left:0; right:0; bottom:0; padding:28px 26px 22px;
  background:linear-gradient(to top, rgba(10,14,20,.72), rgba(10,14,20,0)); color:#fff}
.mini .over b{display:block; font-size:19px; letter-spacing:-.01em; margin-bottom:4px}
.mini .over span{font-size:12.5px; color:rgba(255,255,255,.8)}
.mini .nav-mock{display:flex; gap:18px; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line-2);
  font-size:11.5px; color:var(--muted); letter-spacing:.04em}
.mini .nav-mock b{color:var(--ink); letter-spacing:.06em}

/* --------------------------------------------------------------------------
   ヘッダーの商品サブメニュー（2026-09-01・上田「5つのプロダクトをサブメニューっぽく」）
   JS は使わない（このサイトの CSP は script-src 'none'）。hover と :focus-within だけで開く。
   -------------------------------------------------------------------------- */
.nav-item{position:relative; display:flex; align-items:center}
.nav-item > a{display:inline-flex; align-items:center; gap:5px}
.caret{opacity:.55; transition:transform .18s}
.nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg); opacity:1}
.submenu{
  position:absolute; top:100%; left:-18px; z-index:60; min-width:344px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:12px;
  box-shadow:0 2px 6px rgba(20,24,31,.06), 0 20px 48px rgba(20,24,31,.13);
  padding:10px; margin-top:10px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease;
}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
.submenu a{
  display:block; padding:11px 14px; border-radius:8px; border:0; color:var(--ink);
  transition:background .14s;
}
.submenu a:hover{background:var(--surface-2); color:var(--ink)}
.submenu a b{display:block; font-size:14.5px; line-height:1.5; letter-spacing:.01em}
.submenu a span{display:block; font-size:12px; color:var(--muted); line-height:1.6; margin-top:1px}
.submenu-foot{
  margin-top:6px; padding-top:12px !important; border-top:1px solid var(--line-2) !important;
  border-radius:0 !important; font-size:13px; font-weight:700; color:var(--navy-2) !important;
}
.submenu-foot:hover{background:transparent !important}

@media (max-width:900px){
  /* 触って開く形は作らない。商品リンクはそのまま一覧へ飛ばす */
  .submenu{display:none}
  .caret{display:none}
}