/* LP以外のページ（特商法・法人・入稿・実績）の共通スタイル。
   ヒーローの3Dを持たない静的ページなので index.html とは分ける。
   見出しは明朝＝ブランドが漢字2文字（瞬交）になったことに合わせている。 */

*, *::before, *::after { box-sizing: border-box; }
:root { --ink:#f7f7f8; --dim:#9a9aa2; --faint:#63636c; --line:#26262b; --bg:#000; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.95;
}
/* 黒地でUAの既定色（青／紫の visited）は読めない。本文中のリンクは白で統一し、
   例外（.back・フッター・ボタン）は各自の指定が上書きする */
a { color:#fff; }
.wrap { max-width:940px; margin:0 auto; padding:calc(62px + 7vh) clamp(20px,6vw,40px) 18vh; }

.skip {
  position:fixed; top:8px; left:8px; z-index:100;
  padding:12px 20px; border-radius:999px;
  background:#fff; color:#000; font-size:13px; font-weight:700; text-decoration:none;
  transform:translateY(-160%); transition:transform .2s ease;
}
.skip:focus { transform:none; }

/* ---------- ヘッダー ----------
   index.html と同じ「画面上部に貼りつくガラス帯」。サブページでも
   スクロール中ずっとブランドと購入導線が見えるようにする。
   位置固定なので、本文側（.wrap）は帯のぶんだけ余白を持つ */
header.top {
  position:fixed; inset:0 0 auto 0; z-index:30;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  /* ⚠ 寸法は index.html の header と1:1で揃える（padding / ロゴ高 / ナビ / ボタン）。
     片方だけ触るとページを跨いだときにヘッダーの高さが跳ねる */
  padding:18px clamp(16px,4vw,48px);
  /* ガラスの厚み。⚠ index.html の header[data-solid="1"] と同じ値にすること */
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(8,8,10,.55);
  -webkit-backdrop-filter:blur(26px) saturate(1.9);
  backdrop-filter:blur(26px) saturate(1.9);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 34px rgba(0,0,0,.45);
}
.mark { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; }
.mark img { display:block; width:auto; height:26px; }
.mark-en { font-size:8px; letter-spacing:.42em; color:var(--dim); text-indent:.42em; line-height:1; }
.head-nav { display:flex; gap:clamp(14px,2.2vw,34px); margin-left:auto; }
.head-nav a { position:relative; color:rgba(255,255,255,.82); text-decoration:none;
              font-size:12px; letter-spacing:.18em; padding:8px 2px; transition:color .2s ease; }
/* 下線が伸びるホバー。index の .nav a::after と同じ */
.head-nav a::after {
  content:''; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.8,.24,1);
}
.head-nav a:hover::after, .head-nav a:focus-visible::after { transform:scaleX(1); }
.head-nav a:hover { color:#fff; }
.head-nav a:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:4px; }
.head-cta {
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:0 26px; margin-left:auto;
  color:#fff; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.18em;
  border:1px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(255,255,255,.05);
  transition:border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.head-nav ~ .head-cta { margin-left:0; }
/* 下から白が上がってくるホバー。index の .pill::before と同じ */
.head-cta::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:#fff; transform:translateY(101%);
  transition:transform .44s cubic-bezier(.22,.8,.24,1);
}
.head-cta:hover { color:#000; border-color:#fff; }
.head-cta:hover::before { transform:translateY(0); }
.head-cta .arrow { width:18px; height:1px; background:currentColor; transition:width .38s cubic-bezier(.22,.8,.24,1); }
.head-cta:hover .arrow { width:30px; }
.head-cta:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.back { color:var(--dim); font-size:12px; letter-spacing:.12em; text-decoration:none; white-space:nowrap; }
.back:hover { color:#fff; }
@media (max-width:720px){ .head-nav { display:none; } .head-cta { padding:0 18px; font-size:11px; } }
/* スマホは固定ヘッダーの backdrop-filter がスクロールの負荷になる。軽くする */
@media (max-width:820px){
  header.top {
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    backdrop-filter:blur(14px) saturate(1.6);
  }
}
@media (prefers-reduced-motion: reduce){ .head-cta::before, .head-nav a::after, .head-cta .arrow { transition:none; } }

/* ---------- 見出し ---------- */
.eyebrow { margin:0 0 14px; font-size:11px; letter-spacing:.3em; color:var(--faint); }
h1 { margin:0 0 18px; font-size:clamp(26px,3.8vw,44px); line-height:1.4; font-weight:600;
     letter-spacing:.07em; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
h2 { margin:9vh 0 24px; font-size:clamp(20px,2.4vw,28px); line-height:1.5; font-weight:600;
     letter-spacing:.06em; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
h3 { margin:0 0 12px; font-size:16px; font-weight:700; line-height:1.6; }
.lead { color:var(--dim); font-size:15px; margin:0 0 2vh; max-width:44em; }
p { margin:0 0 16px; } p:last-child { margin:0; }
strong { color:var(--ink); font-weight:600; }
.sub { color:var(--dim); font-size:13px; }
.note { margin:26px 0 0; font-size:12px; color:var(--faint); line-height:1.9; }

/* ---------- 定義リスト（特商法・仕様表） ---------- */
dl { margin:0; border-top:1px solid var(--line); }
.row { display:grid; grid-template-columns:minmax(150px,232px) minmax(0,1fr);
       gap:clamp(12px,3vw,36px); padding:26px 0; border-bottom:1px solid var(--line); align-items:start; }
dt { color:var(--dim); font-size:13px; letter-spacing:.04em; }
dd { margin:0; font-size:14px; }
dd ul { margin:0 0 12px; padding-left:1.15em; } dd li { margin:0 0 6px; }

/* ---------- 表 ---------- */
.tbl { width:100%; border-collapse:collapse; margin:0 0 20px; }
.tbl th, .tbl td { text-align:left; padding:14px 20px 14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.tbl th { color:var(--dim); font-size:12px; font-weight:400; letter-spacing:.08em; white-space:nowrap; }
.tbl td.num { font-variant-numeric:tabular-nums; }

/* ---------- カード / 手順 ---------- */
.cards { display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.card { background:#0c0c0e; border:1px solid var(--line); border-radius:12px; padding:26px 24px; }
.card p { color:var(--dim); font-size:13.5px; }
.steps-n { list-style:none; margin:0; padding:0; counter-reset:s; }
.steps-n li { position:relative; padding:0 0 26px 62px; border-bottom:1px solid var(--line); margin:0 0 26px; }
.steps-n li:last-child { border-bottom:0; margin:0; padding-bottom:0; }
.steps-n li::before {
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:2px; font-size:13px; letter-spacing:.12em; color:var(--faint);
}
.steps-n p { color:var(--dim); font-size:13.5px; margin:0; }

/* ---------- ボタン ---------- */
.actions { display:flex; flex-wrap:wrap; gap:14px; margin:5vh 0 0; }
.btn, .btn-o {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 30px; border-radius:999px; text-decoration:none;
  font-size:14px; font-weight:700; letter-spacing:.04em;
}
.btn { background:#fff; color:#000; }
.btn:hover { transform:translateY(-2px); }
.btn-o { color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-o:hover { background:#fff; color:#000; }
.btn, .btn-o { transition:transform .3s cubic-bezier(.22,.8,.24,1), background .25s ease, color .25s ease; }
.btn:focus-visible, .btn-o:focus-visible { outline:3px solid #fff; outline-offset:4px; }

/* ---------- 図版 ---------- */
figure { margin:0 0 12px; }
figure img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:12px; background:#000; }
figcaption { margin-top:10px; font-size:12px; color:var(--faint); line-height:1.8; }

/* ---------- フッター ----------
   スラッシュ区切りの1行リンクをやめ、ブランド + 3列ナビ + 事業者表記の2段組にする。
   index.html も同じ構造（クラス名も同じ）で持つ。変えるときは両方揃えること */
footer.foot { margin-top:12vh; padding-top:6vh; border-top:1px solid var(--line); }
.foot-grid { display:flex; justify-content:space-between; gap:40px clamp(32px,6vw,96px); flex-wrap:wrap; }
.foot-brand { display:flex; flex-direction:column; gap:14px; }
.foot-brand .mark { align-items:flex-start; }
.foot-tag { margin:0; color:var(--faint); font-size:12px; letter-spacing:.06em;
            font-family:"Hiragino Mincho ProN","Yu Mincho",serif; }
.foot-nav { display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap; }
.foot-nav h3 { margin:0 0 14px; font-size:10px; font-weight:600; letter-spacing:.3em; color:var(--faint); }
.foot-nav ul { list-style:none; margin:0; padding:0; }
.foot-nav li { margin:0 0 10px; }
.foot-nav a { color:var(--dim); text-decoration:none; font-size:13px; letter-spacing:.04em;
              transition:color .2s ease; }
.foot-nav a:hover { color:#fff; }
.foot-nav a:focus-visible { outline:2px solid #fff; outline-offset:3px; border-radius:4px; }
.foot-bottom { margin-top:6vh; padding:22px 0 0; border-top:1px solid var(--line);
               display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap;
               color:var(--faint); font-size:12px; line-height:1.9; }
.foot-bottom p { margin:0; }
.foot-bottom a { color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); }
.foot-bottom a:hover { color:#fff; border-bottom-color:rgba(255,255,255,.6); }
.foot-bottom a:focus-visible { outline:2px solid #fff; outline-offset:3px; border-radius:3px; }
@media (max-width:600px){ .foot-grid { flex-direction:column; } }

@media (max-width:680px){
  .row { grid-template-columns:minmax(0,1fr); gap:8px; }
  .actions .btn, .actions .btn-o { width:100%; }
}
/* ---------- ファイル選択 ----------
   ブラウザ既定の input[type=file] は「選択されていません」を勝手に描き、
   狭い画面では「選択さ...いません」と省略されてしまう。
   ネイティブは隠してラベルをボタンに見せ、ファイル名は自前で出す。
   ⚠ 折り返せるようにしておくこと（省略が起きるのは1行に押し込むから） */
.filefield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.4);
  font-size: 12px; letter-spacing: .1em; font-family: inherit; white-space: nowrap;
}
.file-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); }
.file-native:focus-visible + .file-btn { outline: 2px solid #fff; outline-offset: 2px; }
.file-name { font-size: 12.5px; line-height: 1.7; color: #9a9aa2; min-width: 0; overflow-wrap: anywhere; }
.file-name[data-has="1"] { color: #f7f7f8; }

/* ---------- カーソル ----------
   ⚠ index.html のインライン定義と同じ値。cursor.js が両方で使われるので、
   片方だけ変えるとページを跨いだ瞬間にカーソルの見た目が変わる */
html.has-cursor, html.has-cursor a, html.has-cursor button,
html.has-cursor input, html.has-cursor select, html.has-cursor textarea,
html.has-cursor label { cursor:none; }
.cur-ring, .cur-dot, .cur-label {
  position:fixed; top:0; left:0; z-index:200; pointer-events:none;
  opacity:0; will-change:transform; mix-blend-mode:difference;
}
.cur-ring { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.7); }
.cur-dot { width:5px; height:5px; border-radius:50%; background:#fff; transition:opacity .2s ease; }
.cur-label { color:#fff; font-size:10px; letter-spacing:.18em; font-weight:600;
             transition:opacity .22s ease; white-space:nowrap; }
.cur-label[data-on="1"] { opacity:1; }

/* ページ間のクロスフェード（View Transitions 対応ブラウザのみ。他は無視される） */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

@media (prefers-reduced-motion: reduce){
  .btn, .btn-o { transition:none; }
  @view-transition { navigation: none; }
}


/* ── ヘッダーの2タブ（お問い合わせ／ご注文）─────────────────────
   ⚠ どのページにも同じ形で出す。以前はページごとに .pill と .head-cta が
   別々にあり、行き先も文言も揃っていなかった。
   「相談したい人」と「買う人」で行き先が違うので、1つのボタンに畳まない。 */
.cta-tabs {
  margin-left: auto; display: inline-flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 3px; gap: 3px;
  background: rgba(255,255,255,.04);
}
.cta-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 18px; border-radius: 999px;
  color: var(--ink-dim, #b9b9c0); text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-indent: .08em;
  transition: color .2s ease, background .2s ease;
}
.cta-tabs a:hover { color: #fff; background: rgba(255,255,255,.09); }
.cta-tabs a.on { background: #fff; color: #08080a; }
.cta-tabs a.on:hover { background: #f2f2f4; }
.cta-tabs a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta-tabs .arrow { width: 14px; height: 1px; background: currentColor; flex: none; }
/* 現在地はリンクにしない。押しても何も起きないタブがあると迷う */
.cta-tabs a[aria-current] { pointer-events: none; }
@media (max-width: 860px) { .cta-tabs a { padding: 0 13px; font-size: 11px; letter-spacing: .04em; } }
@media (max-width: 620px) { .cta-tabs .arrow { display: none; } }

/* bot よけの見えない欄。⚠ display:none にしない。多くの bot は
   display:none の欄を埋めないので、罠として機能しなくなる。
   画面外へ出して、フォーカスも読み上げも当たらないようにする。 */
.hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}