:root{
  /* ===== 配色：ネイビー／白／ライトグレー ＋ CTAオレンジ（社長指定） ===== */
  --ink:#0E1B33;        /* ネイビー(主) */
  --ink-2:#16264A;      /* ネイビー副 */
  --ink-3:#26385A;      /* ネイビー明 */
  --paper:#FFFFFF;      /* 白 */
  --paper-2:#F5F7FA;    /* ごく淡いグレー */
  --grey:#EEF2F7;       /* ライトグレー */
  --grey-2:#E3E9F1;     /* ライトグレー濃 */
  --line:#E2E8F1;       /* 罫線 */
  --cta:#F26A1B;        /* CTAオレンジ */
  --cta-2:#FF7E33;      /* CTA hover */
  --text:#0E1B33;
  --muted:#5B6A82;      /* 補助テキスト */
  --shadow:0 10px 34px rgba(14,27,51,.10);
  --shadow-sm:0 3px 14px rgba(14,27,51,.07);
  --radius:14px;
  --maxw:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:where(section,[id]){scroll-margin-top:150px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:6px}
::selection{background:rgba(242,106,27,.22)}
/* 数値は等幅数字で桁揃え（B2Bの価格・数量・営業日の視認性）。欧文はbodyスタックでInterに統一 */
.qp-value,.price-figure,.proof-num,.fv-trust .t b,.pn b,.badge{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 英字ラベル（Categories/Featured等）はInterで少し字間を締める */
.sec-eyebrow,.feat-card .s-eye,.news-tag{letter-spacing:.08em}
body{
  /* 欧文→Inter, 和文→Noto Sans JP を自動振り分け。webフォント不達時は各OSの高品質フォントへ堅牢にフォールバック */
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);background:var(--paper);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:76px 0}
.sec-head{margin-bottom:38px}
.sec-head.center{text-align:center}
.sec-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--cta);text-transform:uppercase;margin-bottom:8px}
.sec-eyebrow.light{color:#8fa6cf}
.sec-title{font-size:clamp(23px,3.1vw,32px);font-weight:900;letter-spacing:.01em;line-height:1.35}
.sec-title.light{color:#fff}
.sec-lead{margin-top:12px;color:var(--muted);font-size:15.5px}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;border-radius:11px;padding:13px 24px;transition:.18s;cursor:pointer;border:1px solid transparent;font-family:inherit;line-height:1.2}
.btn-cta{background:var(--cta);color:#fff;box-shadow:var(--shadow-sm)}
.btn-cta:hover{background:var(--cta-2);transform:translateY(-1px)}
.btn-navy{background:var(--ink);color:#fff}
.btn-navy:hover{background:var(--ink-2);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cta);color:var(--cta)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost-light:hover{border-color:var(--cta);color:var(--cta)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(0) scale(.985)}
.btn .arw{display:inline-block;transition:transform .22s ease}
.btn:hover .arw{transform:translateX(4px)}
/* 光沢スイープは廃止。B2Bの実務サイトでは"売り込み"の記号として品位を下げ、
   同時に .btn-cta の overflow:hidden がフォーカスリングを削る副作用もあった。 */

/* ================= ① 対象者別リンクバー ================= */
.audience{background:var(--ink);color:#cdd8ea;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.audience .container{display:flex;flex-wrap:nowrap;align-items:center;gap:0;padding-top:0;padding-bottom:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.audience .container::-webkit-scrollbar{display:none}
.audience .aud-label{font-weight:700;color:#8fa6cf;padding:9px 12px 9px 0;font-size:11.5px;white-space:nowrap;flex:0 0 auto}
.audience a{display:inline-flex;align-items:center;gap:5px;color:#cdd8ea;padding:9px 12px;transition:.18s;border-left:1px solid rgba(255,255,255,.08);font-size:12px;white-space:nowrap;flex:0 0 auto}
.audience a:hover{color:#fff;background:rgba(255,255,255,.05)}
.audience a .ico{font-size:13px;opacity:.9}

/* ================= ② ヘッダー（ロゴ・検索・メインナビ・CTA） ================= */
header.site{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s ease,background .3s ease}
header.site.condensed{box-shadow:0 6px 22px rgba(14,27,51,.09);background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(10px)}
.head-main{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px;transition:padding .3s ease}
header.site.condensed .head-main{padding:9px 24px}
header.site.condensed .brand .mark{transform:scale(.9)}
header.site.condensed .brand .tag{opacity:0;max-height:0}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:21px;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.brand .mark{width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:19px;transition:transform .3s ease}
.brand .mark b{color:var(--cta);font-weight:900}
.brand .tag{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:1px;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;max-height:20px}
/* 検索 */
.head-search{flex:1;max-width:420px;position:relative}
.head-search input{width:100%;border:1px solid var(--grey-2);background:var(--paper-2);border-radius:10px;padding:11px 44px 11px 16px;font-size:14px;font-family:inherit;color:var(--ink);transition:.18s}
.head-search input:focus{outline:none;border-color:var(--cta);background:#fff}
.head-search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;border:none;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px}
/* 右アイコン＋CTA */
.head-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.head-icons{display:flex;gap:6px}
.icon-link{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--ink);position:relative;transition:.18s}
.icon-link:hover{background:var(--grey)}
.icon-link .lb{position:absolute;bottom:3px;font-size:8.5px;color:var(--muted)}
.icon-link .badge{position:absolute;top:5px;right:6px;background:var(--cta);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px}
.head-cta{display:flex;gap:9px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px}
.hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
/* メインナビ（大きく整理） */
.head-nav{border-top:1px solid var(--line);background:#fff}
.head-nav .container{display:flex;gap:2px;padding:0 24px}
.head-nav a{position:relative;padding:15px 20px;font-weight:700;font-size:15px;color:var(--ink);transition:.18s;display:flex;align-items:center;gap:7px}
.head-nav a:hover{color:var(--cta)}
.head-nav a::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:3px;background:var(--cta);transform:scaleX(0);transition:transform .2s;border-radius:3px 3px 0 0}
.head-nav a:hover::after{transform:scaleX(1)}
.head-nav a .navico{font-size:16px}
.head-nav .nav-spacer{flex:1}
.head-nav .nav-pill{color:var(--cta);font-weight:800}

/* ================= ③ FV ================= */
.fv{position:relative;background:linear-gradient(180deg,var(--paper-2),#fff);overflow:hidden;padding:64px 0 60px}
.fv::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;mask-image:radial-gradient(820px 460px at 82% 8%,#000,transparent 76%)}
.fv .container{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.fv-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:800;color:var(--ink-2);margin-bottom:20px;box-shadow:var(--shadow-sm)}
.fv-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cta)}
.fv h1{font-size:clamp(28px,4.3vw,46px);font-weight:900;line-height:1.3;letter-spacing:.005em}
.fv h1 .u{background:linear-gradient(transparent 62%,rgba(242,106,27,.22) 0)}
.fv-sub{margin-top:18px;font-size:clamp(14.5px,1.6vw,17px);color:#38465e;font-weight:500}
.fv-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.fv-trust{margin-top:24px;display:flex;gap:24px;flex-wrap:wrap}
.fv-trust .t b{display:block;font-size:16px;font-weight:900;color:var(--ink)}
.fv-trust .t span{font-size:12px;color:var(--muted)}
/* FV右：AI見積カード（v4.0の差別化視覚を継承・アクセントはCTAオレンジ） */
.quote-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.quote-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cta)}
.quote-head{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.quote-badge{font-weight:800;font-size:15px;color:var(--ink)}
.quote-badge .spark{color:var(--cta)}
.quote-sub{font-size:12px;color:var(--muted)}
.quote-body{padding:20px}
.quote-row{margin-bottom:15px}
.quote-row>label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}
.quote-seg{display:flex;gap:8px;flex-wrap:wrap}
.qseg{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
.qseg:hover{border-color:var(--cta)}
.qseg.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.qseg:active{transform:scale(.95)}
.quote-result{margin-top:4px;padding:15px;border-radius:12px;background:var(--paper-2);border:1px dashed var(--grey-2)}
.quote-price{display:flex;align-items:baseline;gap:8px}
.qp-label{font-size:12px;color:var(--muted);font-weight:700}
.qp-value{font-size:29px;font-weight:900;color:var(--cta);letter-spacing:.01em;display:inline-block}
.qp-value.bump{animation:qpBump .32s ease}
@keyframes qpBump{0%{transform:scale(1)}42%{transform:scale(1.13)}100%{transform:scale(1)}}
.qp-unit{font-size:12.5px;color:var(--muted)}
.quote-note{margin-top:8px;font-size:11px;color:#8592a6}
.quote-cta{display:flex;margin-top:15px;width:100%}

/* ================= ④ FV直下：目的別導線カード（対象者別） ================= */
.purpose{background:#fff;padding-top:0;margin-top:-30px;position:relative;z-index:5}
.purpose-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.purpose-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 14px;text-align:center;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.purpose-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cta)}
.purpose-card .p-ico{width:48px;height:48px;border-radius:12px;background:var(--grey);display:grid;place-items:center;font-size:24px;transition:transform .3s ease,background .3s ease}
.purpose-card:hover .p-ico{transform:translateY(-3px) scale(1.06);background:#FCE6D6}
.purpose-card h3{font-size:14px;font-weight:800;line-height:1.4}
.purpose-card p{font-size:11.5px;color:var(--muted);line-height:1.5}
.purpose-card .go{margin-top:auto;font-size:12px;font-weight:800;color:var(--cta)}

.sec-note-pre{max-width:60ch;margin:14px auto 0;font-size:13.5px;line-height:1.85;color:#41506A;
  background:rgba(43,181,177,.08);border:1px solid rgba(43,181,177,.26);border-radius:12px;padding:12px 16px}
/* ================= ⑤ 商品カテゴリ（Department） ================= */
.dept{background:var(--paper-2)}
/* ★7カテゴリ（安全靴を履物と小物に分割）に対応。
   3列だと 3+3+1 で最後の行に1枚だけ残る。4列にして1枚目（空調服＝feature）を
   2枠幅にすると 2+1+1 ／ 1+1+1+1 でちょうど2行に収まる。
   カテゴリを増減したらこの前提が崩れるので、枚数を変えたら必ず全幅で見ること。 */
.dept-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dept-grid .dept-card.feature{grid-column:span 2}
.dept-card{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);background:#fff;transition:.22s;min-height:168px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.dept-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--cta)}
.dept-card .d-ico{position:absolute;top:18px;right:20px;font-size:34px;opacity:.92;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.dept-card:hover .d-ico{transform:scale(1.14) rotate(-6deg)}
.dept-card .d-tag{position:absolute;top:18px;left:20px;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;color:#fff}
.d-tag.summer{background:var(--cta)}
.d-tag.winter{background:var(--ink)}
/* 在庫を持たないカテゴリの状態表示。夏/冬バッジ（訴求）とは役割が違うため彩度を落とす。
   商品が入って order_only から外れると、この要素自体が出力されなくなる。 */
.d-tag.order{background:rgba(15,23,42,.62);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-weight:700;letter-spacing:.02em}
.dept-card h3{font-size:19px;font-weight:800;margin-bottom:4px}
.dept-card p{font-size:13px;color:var(--muted)}
.dept-card .go{margin-top:12px;font-size:13px;font-weight:800;color:var(--cta);display:inline-block;transition:transform .22s ease}
.dept-card:hover .go{transform:translateX(4px)}
.dept-card.feature{background:linear-gradient(150deg,var(--ink),var(--ink-2));color:#fff;border-color:var(--ink)}
.dept-card.feature p{color:#c3cfe2}
.dept-card.feature h3{color:#fff}

/* ================= Featured（季節ピックアップ） ================= */
.featured .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.feat-card{border-radius:18px;padding:34px;color:#fff;position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;display:block}
.feat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feat-card::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.feat-card:hover::after{left:130%}
.feat-card:hover .s-go{transform:translateX(4px)}
.feat-card.summer{background:linear-gradient(135deg,#C7551A,#F26A1B)}
.feat-card.winter{background:linear-gradient(135deg,#16264A,#26385A)}
.feat-card .s-eye{font-size:12px;font-weight:800;letter-spacing:.1em;opacity:.92}
.feat-card h3{font-size:clamp(21px,2.5vw,27px);font-weight:900;margin:9px 0 8px}
.feat-card p{font-size:14px;opacity:.94;max-width:36ch}
.feat-card .s-go{margin-top:16px;display:inline-block;font-weight:800;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px;transition:transform .22s ease}

/* ================= ⑥ 名入れ・刺繍（差別化） ================= */
.naire{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.naire::before{content:"";position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(680px 380px at 18% 8%,#000,transparent 72%)}
.naire .container{position:relative;z-index:2}
.naire-lead{color:#c3cfe2;max-width:62ch;margin-top:12px;font-size:15.5px}
.naire-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-top:42px}
.naire-visual{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px}
.nv-tabs{display:flex;gap:8px;margin-bottom:16px}
.nv-tab{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.06);color:#c3cfe2;border:1px solid rgba(255,255,255,.14);transition:.18s}
.nv-tab.active{background:#fff;color:var(--ink);border-color:#fff}
.nv-stage{background:#0A1526;border-radius:14px;height:220px;display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.garment{width:180px;height:180px;border-radius:12px;position:relative;background:linear-gradient(160deg,#2A3A57,#1B2841)}
.garment .pocket{position:absolute;left:24px;top:28px;width:64px;height:78px;border:2px solid rgba(255,255,255,.16);border-radius:6px}
.stitch-logo{position:absolute;right:18px;top:34px}
.stitch-logo text{font-family:"Inter","Noto Sans JP",sans-serif;font-weight:800;font-size:21px;fill:none;stroke:var(--cta);stroke-width:1.1;stroke-dasharray:2 2.2}
.print-logo{position:absolute;right:18px;top:34px}
.print-logo text{font-family:"Inter","Noto Sans JP",sans-serif;font-weight:800;font-size:21px;fill:#7FA6E8}
/* 名入れの"描かれる"演出：クリップで左→右にリベール */
.motion .nv-stage .stitch-logo,.motion .nv-stage .print-logo{clip-path:inset(0 100% 0 0)}
.motion .nv-stage.drawn .stitch-logo,.motion .nv-stage.drawn .print-logo{clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.22,.61,.36,1)}
.nv-caption{margin-top:13px;font-size:12px;color:#9fb0c9;text-align:center}
.naire-points{display:flex;flex-direction:column;gap:13px}
.np-item{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:17px 19px}
.np-item .np-ico{font-size:25px;flex:0 0 32px}
.np-item h4{font-size:15.5px;font-weight:800;margin-bottom:3px}
.np-item p{font-size:13px;color:#c3cfe2}
.naire-actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* ================= 法人注文 ================= */
.biz .biz-inner{background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;box-shadow:var(--shadow-sm);position:relative}
.biz-inner::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:4px;background:var(--cta)}
.biz-text h2{font-size:clamp(21px,2.7vw,29px);font-weight:900;line-height:1.35}
.biz-text p{margin-top:13px;color:var(--muted);font-size:15px}
.biz-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.biz-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.biz-list .b{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px}
.biz-list .b .bi{font-size:22px}
.biz-list .b b{display:block;font-size:14.5px;font-weight:800;margin:6px 0 3px}
.biz-list .b span{font-size:12.5px;color:var(--muted)}

/* ================= 料金・納期 ================= */
.price{background:var(--paper-2)}
/* repeat(3,1fr) は minmax(auto,1fr)。本文の min-content でトラックが膨らみ、
   オレンジ枠の中央カードが版面中心からずれていた（実測10.5px）。 */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:940px;margin:0 auto}
.price-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;transition:.2s}
.price-card.featured{border-color:var(--cta);box-shadow:0 8px 26px rgba(242,106,27,.14);position:relative}
.price-card.featured::before{content:"名入れ";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--cta);color:#fff;font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px}
.price-card h3{font-size:15px;font-weight:700;color:var(--muted)}
.price-figure{font-size:26px;font-weight:900;color:var(--ink);margin:9px 0 7px}
.price-desc{font-size:13px;color:var(--muted);max-width:26ch;margin-inline:auto}
.price-note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:940px;margin:26px auto 0}
.price-note-grid .pn{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.price-note-grid .pn b{display:block;font-size:15px;font-weight:900;color:var(--ink)}
.price-note-grid .pn span{font-size:12px;color:var(--muted)}
.price-fine{text-align:center;margin-top:22px;font-size:12px;color:#8592a6}

/* ================= FAQ ================= */
.faq .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
/* ★FAQは <details open> でサーバー出力し、JSが動いたときだけ閉じる。
   JS無効・JS最適化プラグインによる未実行・CSP遮断・印刷のいずれでも、
   送料・納期・掛け払い・返品といった確定事実が必ず読める（失敗の方向が安全側）。 */
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff}
.faq-q{list-style:none;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--ink);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;border-radius:12px}
.faq-q::-webkit-details-marker{display:none}
.faq-q .plus{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--grey);color:var(--ink);
  position:relative;transition:background-color .2s,color .2s,transform .24s cubic-bezier(.22,.61,.36,1)}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;
  border-radius:2px;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:12px;height:2px}
.faq-q .plus::after{width:2px;height:12px;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.faq-item[open] .plus{background:var(--cta);color:#0B1D3A;transform:rotate(180deg)}
.faq-item[open] .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{display:grid;grid-template-rows:1fr;color:var(--muted);font-size:14px}
.faq-a>p{overflow:hidden;min-height:0;padding:0 22px 18px;margin:0}
@media(prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-a{animation:wfFaqOpen 260ms cubic-bezier(.22,.61,.36,1)}
  @keyframes wfFaqOpen{from{grid-template-rows:0fr;opacity:.4}to{grid-template-rows:1fr;opacity:1}}
}

/* ================= 検証可能な事実バー ================= */
.proof{background:var(--ink);color:#fff;padding:56px 0}
.proof-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.proof-item{padding:12px;border-right:1px solid rgba(255,255,255,.12)}
.proof-item:last-child{border-right:none}
.proof-num{display:block;font-size:clamp(19px,2.3vw,25px);font-weight:900;color:#fff}
.proof-num .o{color:var(--cta)}
.proof-lb{display:block;font-size:12.5px;color:#a9b7cd;margin-top:6px}
.proof-item a{color:#a9b7cd;text-decoration:underline;text-underline-offset:3px}

/* ================= お知らせ（News） ================= */
.news .news-inner{max-width:820px;margin:0 auto;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.news-row{display:flex;gap:18px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.news-row:last-child{border-bottom:none}
.news-date{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.news-tag{font-size:11px;font-weight:800;color:#fff;background:var(--ink);padding:3px 10px;border-radius:999px;white-space:nowrap}
.news-txt{font-size:14px;color:var(--ink)}

/* ================= 最終CTA ================= */
.final{background:linear-gradient(150deg,var(--ink),var(--ink-2));color:#fff;text-align:center;position:relative;overflow:hidden}
.final h2{font-size:clamp(23px,3.1vw,33px);font-weight:900}
.final p{margin-top:12px;color:#c3cfe2;font-size:15.5px}
.final .cta-row{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final .contact-line{margin-top:20px;font-size:13.5px;color:#a9b7cd}

/* ================= フッター ================= */
.site-foot{background:var(--ink);color:#c3cfe2;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:30px}
.foot-col h5{font-size:13px;font-weight:800;color:#fff;margin-bottom:13px;letter-spacing:.03em}
.foot-col li{margin-bottom:9px}
.foot-col a{color:#a9b7cd;font-size:14px;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-col p{font-size:13.5px;color:#a9b7cd;margin-bottom:6px}
.brand-col .brand{color:#fff;margin-bottom:12px}
.brand-col .brand .mark{background:#fff;color:var(--ink)}
.brand-col .brand .mark b{color:var(--cta)}
.foot-legal{font-size:12px;color:#8595ad;line-height:1.9}
.foot-pay{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.foot-pay span{font-size:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:4px 9px;border-radius:6px;color:#c3cfe2}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:20px 0;text-align:center}
.foot-bottom p{font-size:12.5px;color:#8595ad}

/* ================= SP ドロワー ================= */
.drawer-mask{position:fixed;inset:0;background:rgba(14,27,51,.5);z-index:1100;opacity:0;visibility:hidden;transition:.3s}
.drawer-mask.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);background:#fff;z-index:1200;transform:translateX(100%);transition:transform .3s ease;padding:22px;overflow-y:auto;box-shadow:-10px 0 40px rgba(14,27,51,.2)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-close{background:none;border:none;font-size:28px;cursor:pointer;color:var(--ink);line-height:1}
.drawer .dsec{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.08em;margin:16px 0 4px}
.drawer nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600}
.drawer .btn{display:flex;margin-top:16px;width:100%}

/* ================= モーション体系 ================= */
/* スクロールリベール：.motion時のみ初期非表示（描画前にhtml.motion付与＝FOUCなし）。
   reduced-motionユーザーには.motionが付かない＝常に表示。 */
/* ★初期非表示は「JSが実際に走った（.js-ok）」ときだけ成立させる。
   .motion は head で同期付与されるが、解除は defer JS に依存していたため、
   JS最適化プラグイン・キャッシュ不整合・例外のいずれかで納期・送料などの確定事実が
   永久に消える構造だった（実際に事故が起きている）。条件を非対称から対称へ戻す。 */
/* ★FV（.fv-copy）とFeatured（.feat-card）は初期非表示にしない。
   FVはGSAPが子要素しか触らないため親を戻す経路が無く、Featuredはスライド送りで
   不透明度が戻らない。ここに初期非表示を掛けると「JSが正常に動いたときだけ消える」
   という最悪の失敗（正常系だけが壊れる）になる。 */
.motion.js-ok .quote-card,.motion.js-ok .purpose-card,.motion.js-ok .dept-card,
.motion.js-ok .np-item,.motion.js-ok .biz-list .b,.motion.js-ok .price-card,
.motion.js-ok .pn,.motion.js-ok .faq-item,.motion.js-ok .news-row,.motion.js-ok .sec-head{opacity:0;transform:translateY(20px)}
.motion .is-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
/* ★CSSウォッチドッグ：JSが動いても演出が発火しなかった場合に備え、
   6秒後にCSSだけで確実に表示へ戻す（JSの保険がすべて失敗しても情報は残る）。 */
@keyframes wfRescue{to{opacity:1;transform:none}}
/* ウォッチドッグ。GSAPがインラインstyleで制御する要素まで forwards で固定すると
   演出そのものを壊すため、対象は「JSが表示に戻す責任を負う」要素だけに限定し、
   復帰後は animation を無効化する（.is-in が付いた時点で役目は終わり）。 */
.motion.js-ok .quote-card,.motion.js-ok .purpose-card,.motion.js-ok .dept-card,
.motion.js-ok .np-item,.motion.js-ok .biz-list .b,.motion.js-ok .price-card,
.motion.js-ok .pn,.motion.js-ok .faq-item,.motion.js-ok .news-row,.motion.js-ok .sec-head,
.motion.js-ok .flow-step,.motion.js-ok .flow .fn,.motion.js-ok .company .cf{
  animation:wfRescue 1ms linear 6s forwards}
.motion.js-ok .is-in{animation:none!important}
/* 戻るボタン */
.to-top{position:fixed;right:20px;bottom:22px;width:48px;height:48px;border-radius:13px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,background .2s ease;z-index:900;border:none;cursor:pointer}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--cta);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .nv-stage .stitch-logo,.nv-stage .print-logo{clip-path:none!important}
}

/* ================= Featured Swiperカルーセル ================= */
.feat-swiper-wrap{position:relative}
.feat-swiper{max-width:var(--maxw);margin:0 auto;padding:6px 24px 4px}
.feat-swiper .swiper-slide{height:auto}
.feat-swiper .feat-card{height:100%;min-height:210px;display:flex;flex-direction:column;justify-content:flex-end}
.feat-card.custom{background:linear-gradient(135deg,#0E1B33,#3a2a12)}
.feat-card.custom .s-eye{color:#f6c48a}
.feat-card.biz{background:linear-gradient(135deg,#16264A,#0E1B33)}
.feat-card.spring{background:linear-gradient(135deg,#26385A,#3d5a7a)}
.feat-pager{display:flex;justify-content:center;gap:8px;margin-top:18px}
.feat-pager .swiper-pagination-bullet{width:9px;height:9px;background:var(--grey-2);opacity:1;border-radius:999px;transition:.2s}
.feat-pager .swiper-pagination-bullet-active{background:var(--cta);width:26px}
/* ================= 流れる帯（Splide marquee） ================= */
.marquee-sec{background:var(--ink);padding:14px 0;overflow:hidden}
.marquee .splide__track{overflow:hidden}
.marquee .splide__slide{width:auto;display:flex;align-items:center;color:#cdd8ea;font-weight:700;font-size:14px;letter-spacing:.02em}
.marquee .splide__slide::before{content:"◆";color:var(--cta);font-size:10px;margin:0 20px;opacity:.85}
/* ================= MicroModal（法人相談） ================= */
.modal{display:none}
.modal.is-open{display:block}
.modal__overlay{position:fixed;inset:0;background:rgba(14,27,51,.55);display:flex;justify-content:center;align-items:center;z-index:1300;padding:20px}
.modal__container{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:34px;box-shadow:var(--shadow);position:relative}
.modal__container::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;border-radius:18px 18px 0 0;background:var(--cta)}
.modal__title{font-size:20px;font-weight:900;color:var(--ink);margin-bottom:6px}
.modal__sub{font-size:13.5px;color:var(--muted);margin-bottom:18px}
.modal__close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.modal__row{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.modal__row .mi{width:42px;height:42px;border-radius:11px;background:var(--grey);display:grid;place-items:center;font-size:20px;flex:0 0 42px}
.modal__row b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.modal__row span{font-size:12.5px;color:var(--muted)}
.modal__actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.modal__actions .btn{flex:1;min-width:150px}
@keyframes mmFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mmSlideIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.micromodal-slide.is-open .modal__overlay{animation:mmFadeIn .2s}
.micromodal-slide.is-open .modal__container{animation:mmSlideIn .28s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.micromodal-slide .modal__overlay,.micromodal-slide .modal__container{animation:none!important}}

/* ==================================================================
   ★ v5.3 カラーテーマ刷新（kobe-wu.ac.jp の明るく多色で楽しい世界観へ）
   - ネイビー支配を脱し、ティール基調＋カテゴリ多色＋白基調。CTAはオレンジ維持。
   - ✦スパークル／多色タイル／リッチなロールオーバーで"楽しさ"を細部まで。
   - 元の値はvarで上書き。以降のルールが後勝ちで適用される。
   ================================================================== */
:root{
  --ink:#25324A;            /* テキスト用スレート（旧#0E1B33より軽い） */
  --ink-2:#33445f;
  --ink-3:#465a76;
  --teal:#0EA5B7;           /* ★新プライマリ（kobe-wuのティール） */
  --teal-d:#0B7E8C;
  --teal-l:#E7F7F9;
  --cta:#FF6A00;            /* CTAオレンジ（公式UIキット #FF6A00 に統一） */
  --cta-2:#FF8534;
  --muted:#5E6E86;
  --line:#E4EAF0;
  --paper-2:#F4F8FA;
  --grey:#EAF1F4;
  --grey-2:#DCE6EC;
  /* カテゴリ多色（明るく楽しい） */
  --c-kucho:#F2762B; --c-kucho-d:#C74E10;      /* 空調服=夏コーラル */
  --c-sagyo:#0EA5B7; --c-sagyo-d:#0A6F7C;      /* 作業服=ティール */
  --c-tsunagi:#8B5CF6; --c-tsunagi-d:#6D3FD6;  /* つなぎ=バイオレット */
  --c-anzen:#1FAE79; --c-anzen-d:#158055;      /* 安全靴=グリーン */
  --c-hakui:#38A9E4; --c-hakui-d:#1F7FB8;      /* 白衣=スカイ */
  --c-bohan:#3B6FE0; --c-bohan-d:#274FB0;      /* 防寒=ブルー */
  --shadow:0 14px 40px rgba(37,50,74,.12);
  --shadow-sm:0 4px 16px rgba(37,50,74,.08);
}
/* --- 上部：対象者バーをティールに（明るいアクセント） --- */
.audience{background:linear-gradient(90deg,var(--teal),var(--teal-d));border-bottom:none;color:#eafcff}
.audience .aud-label{color:#c3eff5}
.audience a{color:#eafcff;border-left-color:rgba(255,255,255,.18)}
.audience a:hover{background:rgba(255,255,255,.14);color:#fff}
/* --- ロゴマークをティールに --- */
.brand .mark{background:linear-gradient(135deg,var(--teal),var(--teal-d))}
/* --- ナビ下線・ホバーをティールに（CTAはオレンジ維持） --- */
.head-nav a::after{background:var(--teal)}
.head-nav a:hover{color:var(--teal-d)}
.head-nav .nav-pill{color:var(--cta)}
/* --- セクション見出し：✦スパークル＋ティール（楽しさの記号） --- */
.sec-eyebrow{color:var(--teal);font-size:14px;letter-spacing:.16em}
.sec-eyebrow::before{content:"✦ ";color:var(--cta)}
.sec-eyebrow.light{color:#7fe3ee}
.sec-eyebrow.light::before{color:#ffd08a}
.sec-title{color:var(--ink)}
/* --- FVアクセントをティール／オレンジのポップに --- */
.fv{background:linear-gradient(100deg,rgba(255,255,255,.97) 30%,rgba(255,255,255,.70) 56%,rgba(231,247,249,.42) 100%),url("../img/fv.jpg?v=73") right center/cover}
.fv-badge{color:var(--teal-d)}
.fv-badge .dot{background:var(--teal)}
.quote-card::after{background:linear-gradient(90deg,var(--teal),var(--cta))}
/* ★白文字×#0EA5B7＝2.96:1／×#2BB5B1＝2.52:1 でいずれもAA不合格だった。
   下層ページと同じ #0E6E6A（白文字で6.1:1）に統一する。 */
.qseg.active{background:#0E6E6A;border-color:#0E6E6A;color:#fff}
.qseg:hover{border-color:var(--teal)}
.quote-badge .spark{color:var(--teal)}
/* --- 目的別カード：アイコン多色＋楽しいロールオーバー --- */
.purpose-card{transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .25s}
.purpose-card:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 16px 36px rgba(14,165,183,.16)}
.purpose-grid .purpose-card:nth-child(1) .p-ico{background:#FDEBDD}
.purpose-grid .purpose-card:nth-child(2) .p-ico{background:#E4F6EE}
.purpose-grid .purpose-card:nth-child(3) .p-ico{background:#F0E9FE}
.purpose-grid .purpose-card:nth-child(4) .p-ico{background:#E7F7F9}
.purpose-grid .purpose-card:nth-child(5) .p-ico{background:#E6F1FD}
.purpose-grid .purpose-card:nth-child(6) .p-ico{background:#FCE7DA}
.purpose-card:hover .p-ico{transform:translateY(-4px) scale(1.12) rotate(-5deg)}
.purpose-card .go{color:var(--teal-d)}
/* --- ★商品カテゴリ：多色タイル＋リッチ・ロールオーバー（kobe-wuのFeaturedタイル翻訳） --- */
.dept-grid .dept-card{color:#fff;border:none;min-height:196px;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
.dept-grid .dept-card h3,.dept-grid .dept-card p{color:#fff}
.dept-grid .dept-card .go{color:#fff;opacity:.96}
.dept-grid .dept-card .d-ico{opacity:.96;filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}
.dept-grid .dept-card::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .3s ease;pointer-events:none}
.dept-grid .dept-card:hover::before{background:rgba(255,255,255,.10)}
.dept-grid .dept-card:hover{transform:translateY(-7px);box-shadow:0 22px 46px rgba(37,50,74,.24)}
.dept-grid .dept-card:hover .d-ico{transform:scale(1.22) rotate(-8deg)}
.dept .d-tag.summer,.dept .d-tag.winter{background:rgba(255,255,255,.24)}
.dept .d-tag.order{background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.62)}
/* PC(ホバー可)のみ説明文を隠して"ロールオーバーで開く"演出。タッチ端末では常時表示 */
@media (hover:hover) and (min-width:961px){
  .dept-grid .dept-card p{max-height:0;overflow:hidden;opacity:0;transform:translateY(6px);transition:max-height .35s ease,opacity .3s ease,transform .3s ease}
  .dept-grid .dept-card:hover p{max-height:64px;opacity:.96;transform:none}
}
/* --- Featuredカルーセル：多色に再着色 --- */
/* Featured各スライド：カテゴリ色スクリム×写真（全て別カット・重複なし） */
.feat-card.summer{background:linear-gradient(135deg,rgba(242,118,43,.78),rgba(199,78,16,.88)),url("../img/feat-summer.jpg") center 15%/cover}
.feat-card.winter{background:linear-gradient(135deg,rgba(59,111,224,.80),rgba(39,79,176,.90)),url("../img/feat-winter.jpg") center 18%/cover}
.feat-card.custom{background:linear-gradient(135deg,rgba(139,92,246,.80),rgba(109,63,214,.90)),url("../img/feat-custom.jpg") center/cover}
.feat-card.custom .s-eye{color:#fff}
.feat-card.biz{background:linear-gradient(135deg,rgba(14,165,183,.80),rgba(10,111,124,.90)),url("../img/feat-biz.jpg") center/cover}
.feat-card.spring{background:linear-gradient(135deg,rgba(31,174,121,.80),rgba(21,128,85,.90)),url("../img/feat-spring.jpg") center/cover}
.feat-pager .swiper-pagination-bullet-active{background:var(--teal)}
/* --- 流れる帯：ティール地 --- */
.marquee-sec{background:linear-gradient(90deg,var(--teal-d),var(--teal))}
.marquee .splide__slide{color:#eafcff}
.marquee .splide__slide::before{color:#ffd08a}
/* --- 名入れ：ネイビー→ディープティール（重さ軽減。stage内は暗色維持） --- */
.naire{background:linear-gradient(150deg,rgba(12,102,117,.90),rgba(10,72,84,.93)),url("../img/naire.jpg") center 20%/cover}
.nv-tab.active{color:var(--teal-d)}
.np-item .np-ico{color:#9fe8f0}
/* --- 事実バー・最終CTA・フッター：軽やかに --- */
.proof{background:linear-gradient(90deg,var(--teal),var(--teal-d))}
.proof-num .o{color:#ffd08a}
.proof-item a{color:#d7f6fa}
/* 最終CTA：編集的写真を全面背景＋ティール/インクの暗幕でアートに（テキスト可読性確保） */
.final{background:linear-gradient(115deg,rgba(11,110,124,.86),rgba(15,30,40,.80)),url("../img/final-cta.jpg") center 20%/cover}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 12% 18%,rgba(10,22,38,.45),transparent 58%);pointer-events:none}
.final .container{position:relative;z-index:2}
.final p{color:#eef7f9}
.final .contact-line{color:#cfe6ea}
.site-foot{background:#123842}
.foot-pay span{background:rgba(255,255,255,.10)}
/* --- ボタン・カード：ホバーで色付き影（弾む楽しさ） --- */
.btn-cta:hover{box-shadow:0 12px 28px rgba(242,106,27,.36)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-d)}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--teal)}
.news-tag{background:var(--teal)}
.faq-item.open .faq-q .plus{background:var(--teal)}
/* --- 戻るボタン：ティール --- */
.to-top{background:var(--teal-d)}
.to-top:hover{background:var(--cta)}
/* --- ✦の微光アニメ（reduced-motionで停止） --- */
@keyframes tw{0%,100%{opacity:1}50%{opacity:.4}}
.motion .sec-eyebrow::before{animation:tw 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sec-eyebrow::before{animation:none!important}}

/* ================= レスポンシブ ================= */
@media(max-width:1040px){
  .head-search{max-width:280px}
  .purpose-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .audience{display:none}
  .head-nav{display:none}
  .head-search{display:none}
  .hamburger{display:flex}
  .head-cta .btn:not(.btn-cta){display:none}
  .fv .container{grid-template-columns:1fr;gap:32px}
  .fv-stage{order:2}
  .dept-grid{grid-template-columns:1fr 1fr}
  .dept-grid .dept-card.feature{grid-column:1/-1}   /* 2列時は feature を全幅に */
  .naire-grid{grid-template-columns:1fr}
  .biz .biz-inner{grid-template-columns:1fr;padding:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  section{padding:54px 0}
  .purpose{margin-top:0;padding-top:44px}
  .purpose-grid{grid-template-columns:1fr 1fr}
  .dept-grid{grid-template-columns:1fr}
  .dept-grid .dept-card.feature{grid-column:auto}   /* 1列時は span を解除 */
  .featured .feat-grid{grid-template-columns:1fr}
  .price-grid,.price-note-grid{grid-template-columns:1fr}
  .proof-bar{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(2){border-right:none}
  .biz-list{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .news-row{flex-wrap:wrap;gap:8px}
}

/* ==================================================================
   ★ v5.3.1 実機コントラスト修正（2026-07-03 反復修正フェーズ）
   社長の実機指摘に対応：①Featuredカルーセルの文字沈み ②白背景の法人ボタン馴染み
   ③名入れ・④最終CTAの暗背景でボタン/文字が沈む。原則コントラストと可読性の是正。
   ================================================================== */
/* (A) Featuredカードはreveal対象から外す（Swiperスライド送りで文字が透明のまま残る事故を解消） */
.motion .feat-card{opacity:1!important;transform:none!important}
/* (B) button要素にテーマ既定スタイルが被さり色が消える問題を是正（クラス通りの見た目を強制） */
button.btn{background-image:none;-webkit-appearance:none;appearance:none}
button.btn-cta{background:var(--cta)!important;color:#fff!important;border-color:transparent!important}
button.btn-cta:hover{background:var(--cta-2)!important}
button.btn-ghost{background:#fff!important;color:var(--ink)!important}
button.btn-ghost-light{background:rgba(255,255,255,.12)!important;color:#fff!important}
/* (C) 暗背景・写真背景用ゴーストボタンを高コントラスト化（名入れ／最終CTA） */
.btn-ghost-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.85);color:#fff;font-weight:800}
.btn-ghost-light:hover{background:var(--cta);border-color:var(--cta);color:#fff}
/* (D) 白背景(法人)のゴーストボタンをティールで明確化 */
.biz .btn-ghost{border-color:var(--teal);color:var(--teal-d)}
.biz .btn-ghost:hover{background:var(--teal);border-color:var(--teal);color:#fff}
/* (E) 暗背景上のCTA(オレンジ)を沈ませない影 */
.naire .btn-cta,.final .btn-cta{box-shadow:0 8px 24px rgba(0,0,0,.30)}
/* (F) 最終CTA見出し・本文の黒沈み対策（写真背景でも白が締まる） */
.final h2,.final p,.final .contact-line{text-shadow:0 2px 14px rgba(0,0,0,.40)}

/* ==================================================================
   ★ v5.4 FV刷新（2026-07-03 反復修正②：kobe-wu流の"魅せるヒーロー"へ）
   - 背景写真を主役化（白スクリムを緩め写真を見せる）／Ken Burnsでゆっくりズーム
   - コピーを順次フェードアップ（JS側FVタイムライン）／AI見積カードを浮上＋微浮遊
   - スクロール誘導・余白・ボタン細部・グラデを調整（プロ設計×ユーザー目線）
   ================================================================== */
/* レイヤー：写真(fv-bg)→グリッド(::before)→scrim(::after)→内容(container) */
.fv{padding:clamp(54px,6.5vw,92px) 0 clamp(60px,7.5vw,104px);isolation:isolate;background:linear-gradient(180deg,var(--paper-2),#fff)}
.fv-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.fv-bg::before{content:"";position:absolute;inset:-5%;
  background:url("../img/fv.jpg?v=73") center 28%/cover;
  animation:fvKen 26s ease-in-out infinite alternate;will-change:transform;transform:scale(1.04)}
@keyframes fvKen{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.13) translate(-1.6%,-1.2%)}}
/* 前面scrim：左は白でコピー可読、右は写真が映える斜めグラデ */
.fv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.50) 58%,rgba(231,247,249,.18) 100%)}
.fv::before{z-index:1;opacity:.28}
.fv .container{position:relative;z-index:2}
/* コピー：余白・字面・アクセント */
.fv-badge{background:rgba(255,255,255,.86);backdrop-filter:blur(4px)}
.fv-badge .dot{animation:fvDot 2.2s ease-in-out infinite}
@keyframes fvDot{0%,100%{box-shadow:0 0 0 0 rgba(242,106,27,.5)}50%{box-shadow:0 0 0 5px rgba(242,106,27,0)}}
.fv h1{letter-spacing:.01em}
.fv-sub{color:#31415a}
.fv-actions{margin-top:30px;gap:14px}
/* CTA：グラデ＋厚みのある影で"押したくなる"存在感 */
.fv-actions .btn-cta{background:linear-gradient(135deg,var(--cta-2),var(--cta));box-shadow:0 10px 26px rgba(242,106,27,.32)}
.fv-actions .btn-cta:hover{box-shadow:0 14px 32px rgba(242,106,27,.42)}
.fv-actions .btn-ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(4px);border-color:var(--teal);color:var(--teal-d)}
.fv-actions .btn-ghost:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
/* trust：区切り線で上品に */
.fv-trust{margin-top:26px;gap:0}
.fv-trust .t{padding:0 20px;border-left:2px solid var(--teal)}
.fv-trust .t:first-child{padding-left:0;border-left:none}
/* AI見積カード：奥行きのある影で浮遊感 */
.quote-card{box-shadow:0 24px 60px rgba(14,27,51,.16),0 4px 14px rgba(14,27,51,.08)}
/* スクロール誘導 */
.fv-scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.24em;color:var(--teal-d);font-weight:800}
.fv-scroll .bar{width:1.5px;height:38px;background:rgba(11,126,140,.25);position:relative;overflow:hidden;border-radius:2px}
.fv-scroll .bar::after{content:"";position:absolute;top:-40px;left:0;width:1.5px;height:40px;background:var(--teal-d);animation:fvScroll 1.9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes fvScroll{0%{top:-40px}55%,100%{top:38px}}
/* GSAP制御時はFVコピーを初期表示に（fromで演出）。GSAP不達でも確実に見える。
   初期非表示側と同じ詳細度（.motion.js-ok）に揃え、打ち消しが必ず勝つようにする。 */
.motion .fv-copy,.motion .quote-card,
.motion.js-ok .fv-copy,.motion.js-ok .quote-card{opacity:1;transform:none}
@media (max-width:960px){
  .fv-scroll{display:none}
  .fv::after{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.82) 58%,rgba(231,247,249,.32))}
  .fv-trust .t{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  .fv-bg::before{animation:none;transform:scale(1.04)}
  .fv-scroll .bar::after,.fv-badge .dot{animation:none}
}

/* ==================================================================
   ★ v5.4.1 CTAボタン確実化（2026-07-03 反復修正③）
   本番(Lightning)でテーマCSSがworkful-top.cssより後に読まれ btn色が打ち消される件へ：
   ①front-page.phpでworkful-top.cssをwp_head()後へ移動（本丸）②要素+クラスで詳細度を上げ確実化（保険）
   ※FVのグラデ/ゴースト(.fv-actions .btn-*=詳細度0,2,0)は下記(0,1,1)より強く維持される
   ================================================================== */
a.btn-cta,button.btn-cta{background:var(--cta);color:#fff;border-color:transparent}
a.btn-cta:hover,button.btn-cta:hover{background:var(--cta-2);color:#fff}
a.btn-ghost,button.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
a.btn-ghost:hover,button.btn-ghost:hover{border-color:var(--cta);color:var(--cta)}
a.btn-ghost-light,button.btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.85);font-weight:800}
a.btn-ghost-light:hover,button.btn-ghost-light:hover{background:var(--cta);border-color:var(--cta);color:#fff}
a.btn-navy,button.btn-navy{background:var(--ink);color:#fff}

/* ==================================================================
   ★ v5.6 公式デザインシステム(WORKFUL UI KIT)へ全面統一（2026-07-03）
   公式カラー #FF6A00 / #2BB5B1 / #081D3A / #F3E7D6 に統一 ＋ ロゴW ＋ 波線/ベージュ/バッジ装飾
   ================================================================== */
:root{
  --teal:#2BB5B1; --teal-d:#1E8F8B; --teal-l:#E6F6F5;   /* 公式ティール */
  --ink:#0B1D3A; --ink-2:#122A4F; --ink-3:#1F3A63;      /* 公式ネイビー */
  --text:#1F232B;                                        /* 公式ダーク（本文） */
  --cta:#FF6A00; --cta-2:#FF8534;                        /* 公式オレンジ */
  --sand:#F3E7D6; --sand-d:#EADBC4;                      /* 公式ベージュ（ウォームニュートラル） */
  --c-sagyo:#2BB5B1; --c-sagyo-d:#1E8F8B;                /* 作業服タイル=公式ティール */
}
/* --- ロゴ W マーク（UIキット準拠：背景なし・ネイビーW＋右上オレンジドット） --- */
.brand .mark{background:none!important;box-shadow:none;width:40px;height:38px;border-radius:0;display:grid;place-items:center;transition:transform .3s ease}
.brand .mark svg{width:40px;height:34px;display:block;overflow:visible}
.brand .mark .wf-w{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.brand .mark .wf-dot{fill:var(--cta)}
.brand-col .brand .mark{background:none!important}
.brand-col .brand .mark .wf-w{stroke:#fff}      /* フッター暗背景では白W */
/* --- ベージュのアクセント（中立セクションに温かみ） --- */
.price{background:linear-gradient(180deg,var(--sand),#fff)}
/* --- 波線ディバイダー（公式Wave。セクション境界を柔らかく） --- */
.wave-sep{display:block;width:100%;height:38px;line-height:0;background:var(--paper-2)}
.wave-sep svg{display:block;width:100%;height:100%}
/* --- 公式バッジ（New/Popular/Pro） --- */
.wf-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.02em;vertical-align:middle}
.wf-badge.popular{background:#FFE6D1;color:var(--cta)}
.wf-badge.new{background:var(--teal-l);color:var(--teal-d)}
/* --- セクション見出しeyebrowのスパークルを公式トーンに --- */
.sec-eyebrow{color:var(--teal-d)}

/* ==================================================================
   ★ v5.7 アート&ストーリー（2026-07-03 反復修正⑥）
   社長「FV〜フッターがのっぺり。参考=神戸女子大。グラデ/透かし/被せ/アクセントで
   変化を付け、サイト全体にストーリーとアートを」。HTMLは不変・CSSのみ。
   セクション毎に背景トーンを変え(明↔濃のリズム)＋半透明blob＋大英語ウォーターマーク
   ＋曲線シェイプ＋ドット透かしで奥行きと楽しさを付与。
   ================================================================== */
/* 装飾の土台（中身を前面へ／blob・WMを持つ節はクリップ） */
.dept,.featured,.biz,.price,.faq{position:relative;overflow:hidden}
.purpose,.news{position:relative}
.purpose>.container,.dept>.container,.featured>.container,.biz>.container,.price>.container,.faq>.container,.news>.container{position:relative;z-index:2}
/* ① 背景トーンのストーリー（白→淡ティール→ベージュ→…の波） */
.purpose{background:linear-gradient(180deg,#ffffff 0%,#EFF9FA 100%)}
.dept{background:linear-gradient(165deg,#E7F5F6 0%,#F6FBFC 60%,#ffffff 100%)}
.featured{background:linear-gradient(180deg,#ffffff 0%,#FBF3E8 100%)}
.biz{background:linear-gradient(180deg,#FBF3E8 0%,#ffffff 100%)}
.price{background:linear-gradient(180deg,#F7EFE1 0%,#ffffff 100%)}
.faq{background:linear-gradient(180deg,#F1F8F9 0%,#ffffff 100%)}
.news{background:linear-gradient(180deg,#ffffff 0%,#EFF9FA 100%)}
/* ② 大きな半透明blob（円）で奥行き・アート感 */
.dept::after{content:"";position:absolute;top:-140px;right:-130px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(43,181,177,.18),transparent 70%);z-index:0;pointer-events:none}
.featured::before{content:"";position:absolute;bottom:-160px;left:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.12),transparent 70%);z-index:0;pointer-events:none}
.biz::after{content:"";position:absolute;top:-110px;left:-90px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(43,181,177,.14),transparent 70%);z-index:0;pointer-events:none}
.price::before{content:"";position:absolute;bottom:-130px;right:-110px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.10),transparent 70%);z-index:0;pointer-events:none}
.faq::before{content:"";position:absolute;top:30px;right:-140px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(11,29,58,.05),transparent 70%);z-index:0;pointer-events:none}
/* ③ 大きな英語ウォーターマーク（薄く／アートの記号） */
.dept .sec-head,.featured .sec-head,.price .sec-head{position:relative}
.dept .sec-head::after,.featured .sec-head::after,.price .sec-head::after{
  position:absolute;left:50%;top:-0.5em;transform:translateX(-50%);font-family:"Inter",sans-serif;
  font-weight:800;letter-spacing:.03em;white-space:nowrap;line-height:1;font-size:clamp(54px,11vw,150px);
  color:rgba(11,29,58,.045);z-index:0;pointer-events:none}
.dept .sec-head::after{content:"WORKWEAR"}
.featured .sec-head::after{content:"FEATURED"}
.price .sec-head::after{content:"PRICING"}
/* ④ ドット透かし（featured右上） */
.featured::after{content:"";position:absolute;top:26px;right:28px;width:120px;height:120px;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,29,58,.12) 1.4px,transparent 1.6px);background-size:14px 14px;opacity:.55}
/* ⑤ 曲線シェイプ：濃色セクションの上端を大きな円弧に（神戸女子大の切り取り） */
.naire{border-radius:56% 56% 0 0/72px 72px 0 0}
.final{border-radius:54% 54% 0 0/60px 60px 0 0}
/* SPでは装飾を控えめに */
@media(max-width:640px){
  .dept::after,.featured::before,.biz::after,.price::before,.faq::before{width:230px;height:230px}
  .dept .sec-head::after,.featured .sec-head::after,.price .sec-head::after{font-size:clamp(38px,15vw,72px)}
  .naire,.final{border-radius:50% 50% 0 0/40px 40px 0 0}
}

/* ==================================================================
   ★ v5.8 曲線トランジション＆微修正（2026-07-03 反復修正⑦）
   社長：①円弧の白い余白が不格好→色が完全に埋まる「重なりの波」に作り直し多用
   ②料金「名入れ加工」カードがオレンジの塊でバグに見える→blob干渉を除去し正常化
   ③目的別カード前の余白不足→余白追加
   ================================================================== */
/* ① border-radius方式(白余白が出る)を廃止。曲線は塗り潰しSVG(.curve)で表現し色を完全に埋める */
.naire,.final{border-radius:0}
.curve{display:block;width:100%;height:clamp(48px,6vw,84px);line-height:0;position:relative;z-index:1;margin-bottom:-1px;overflow:hidden}
.curve svg{display:block;width:100%;height:100%}
/* ② 料金：blobがカードを覆う不具合を除去＋カードを確実に前面・白地に */
.price::before{display:none!important}
.price-card{position:relative;z-index:2;background:#fff}
.price-card.featured{background:#fff}
/* 予防：全セクションのカードをblobより前面に固定 */
.purpose-card,.dept-card,.feat-card,.biz-list .b,.pn,.faq-item,.news-row{position:relative;z-index:2}
/* ③ 目的別カード(purpose)前に余白（FVとの詰まり解消） */
.purpose{margin-top:0;padding-top:clamp(40px,5vw,64px)}

/* ==================================================================
   ★ v5.9 日本語の改行を意味単位に（2026-07-03 反復修正⑧）
   社長「法人決裁者が読む→日本語の意味の途中で改行されると読みづらい」。
   word-break:keep-all＝約物(・、。等)でのみ改行し、連続する語(バッテリー等)の
   途中では折らない。line-break:strictで禁則強化、text-wrap:balanceで見出しの行長を均等化。
   ================================================================== */
.fv h1,.fv-sub,.fv-trust .t,.sec-title,.sec-lead,.feat-card h3,.feat-card p,
.dept-card h3,.dept-card p,.purpose-card h3,.purpose-card p,.biz-text h2,.biz-text p,
.biz-list .b b,.biz-list .b span,.np-item h4,.np-item p,.price-card h3,.price-desc,
.pn b,.pn span,.naire-lead,.faq-q,.faq-a p,.news-txt,.modal__title,.modal__sub,
.final h2,.final p,.quote-note,.quote-sub{
  word-break:keep-all;line-break:strict;
}
/* 見出しは行長も均等化（対応ブラウザ／非対応は通常折り返し） */
.fv h1,.sec-title,.biz-text h2,.feat-card h3,.final h2{text-wrap:balance}

/* ==================================================================
   ★ v6.0 精度向上（2026-07-03 反復修正⑨）
   ①名入れ刺繍プレビューの質感を上げ刺繍を中央に大きく②ポイントカードの視認性
   ③Featuredカルーセルの見切れを左右フェードで上品に。CSSのみ。
   ================================================================== */
/* ① 名入れ：ステージ・布の質感、刺繍を中央に大きく美しく */
.naire-visual{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-shadow:0 22px 54px rgba(0,0,0,.28)}
.nv-stage{background:radial-gradient(120% 100% at 50% 0%,#123249 0%,#0a1a2b 72%);border-color:rgba(43,181,177,.32);box-shadow:inset 0 2px 34px rgba(0,0,0,.42)}
.garment{width:200px;height:200px;background:linear-gradient(160deg,#254060,#16273d);box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
.garment .pocket{border-color:rgba(255,255,255,.22)}
.nv-stage .stitch-logo,.nv-stage .print-logo{left:50%;right:auto;top:52%;transform:translate(-50%,-50%)}
.stitch-logo{width:150px}.print-logo{width:150px}
.stitch-logo text,.print-logo text{font-size:26px}
.stitch-logo text{stroke-width:1.3;filter:drop-shadow(0 0 7px rgba(255,106,0,.45))}
.motion .nv-stage .stitch-logo,.motion .nv-stage .print-logo{clip-path:inset(0 100% 0 0)}
.motion .nv-stage.drawn .stitch-logo,.motion .nv-stage.drawn .print-logo{clip-path:inset(0 0 0 0)}
/* ② ポイントカードを背景に溶けさせない */
.np-item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.np-item h4{color:#fff}
.np-item p{color:#cfe0e6}
/* ③ Featured：カルーセルの見切れを左右フェードで上品に */
.feat-swiper{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%)}

/* ==================================================================
   ★ v6.1 修正（2026-07-03 反復修正⑩）
   ①名入れ加工カードのオレンジ塊＝section用.featured::before/afterがprice-card.featuredに
     漏れる誤爆を是正（width等の漏れを打ち消し正常な小バッジに）②カルーセルの白い縁(mask)除去
   ================================================================== */
.price-card.featured{overflow:visible}
.price-card.featured::before{width:auto!important;height:auto!important;top:-11px!important;bottom:auto!important;left:50%!important;right:auto!important;background:var(--cta)!important;border-radius:999px!important;z-index:3;pointer-events:none}
.price-card.featured::after{content:none!important;display:none!important}
.feat-swiper{-webkit-mask-image:none!important;mask-image:none!important}

/* ==================================================================
   ★ v6.2 グラデ追加（2026-07-03 社長要望）
   ①対象者バー②流れる帯 をブランドのティール→オレンジのリッチグラデに
   ③FV背景写真を下にいくほどフェード（下端が明るく次セクションへ自然に繋がる）
   ================================================================== */
.audience{background:linear-gradient(100deg,#0B7E8C 0%,#2BB5B1 46%,#22A79F 68%,#E9772F 126%)}
.marquee-sec{background:linear-gradient(100deg,#0B7E8C 0%,#2BB5B1 50%,#22A79F 72%,#E9772F 128%)}
.fv-bg::before{-webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.12) 100%)}

/* ==================================================================
   ★ v6.3 公式ロゴ実装（2026-07-03）
   GPT Image生成の確定ロゴ(Wマーク＋オレンジドット)を透過PNGで実装。
   ヘッダー/ドロワー=ネイビーW、フッター(暗背景)=白W。CSS背景でパス解決。
   ================================================================== */
.brand .mark{background:url("../img/logo-w.png") center/contain no-repeat!important;width:42px;height:38px;border-radius:0}
header.site .brand .mark{width:44px;height:40px}
.brand-col .brand .mark{background-image:url("../img/logo-w-white.png")!important}
.brand .mark svg{display:none}

/* ==================================================================
   ★ v6.4 グラデは濃淡のみ・色を混ぜない（2026-07-03 社長要望）
   対象者バー・流れる帯の「ティール→オレンジ」混合を廃止し、ティール単色の濃淡グラデに。
   ================================================================== */
.audience{background:linear-gradient(100deg,#0B7E8C 0%,#2BB5B1 55%,#3AC3BD 100%)}
.marquee-sec{background:linear-gradient(100deg,#0B7E8C 0%,#2BB5B1 55%,#3AC3BD 100%)}

/* ===== v6.5 モバイル最適化(統合版) 2026-07-03 ===== */
html,body{overflow-x:hidden;max-width:100%}
@media (max-width:760px){
  *{box-sizing:border-box;min-width:0}
  img,svg{max-width:100%;height:auto}
  .container{width:100% !important;max-width:100% !important}
  .fv-grid{grid-template-columns:1fr !important;gap:26px}
  .fv-copy h1{font-size:30px}
  .fv-card,.fv-quote{max-width:100% !important;width:100% !important}
  .fv-cta-row{flex-direction:column}
  .fv-cta-row .btn{width:100% !important;flex:1 1 100% !important}
  .qp-cta{white-space:normal !important;width:100% !important;line-height:1.3;text-align:center}
  .naire{overflow-x:clip}
  .naire-grid{grid-template-columns:1fr !important;gap:22px}
  .naire-visual{width:100% !important;max-width:100% !important;margin:0 !important;padding:16px !important;overflow:hidden !important}
  .nv-stage{width:100% !important;max-width:100% !important;overflow:hidden !important}
  .garment{position:relative !important;left:auto !important;right:auto !important;inset:auto !important;margin:0 auto !important;width:min(220px,62vw) !important;max-width:100% !important}
  .stitch-logo,.print-logo{position:absolute !important;left:50% !important;right:auto !important;top:50% !important;transform:translate(-50%,-50%) !important;max-width:74% !important;height:auto !important}
  .pocket{right:16% !important}
}
@media (max-width:480px){ .fv-copy h1{font-size:26px} }
/* v6.5 ここまで */

/* ==================================================================
   ★★ v7.0 監査・再設計 反映層（2026-07-10）★★
   9レンズ監査→統合→8ペルソナ→再設計→4審査→最終仕様 の実装。
   既存ルールは保持し、本層が後勝ちで上書き・新コンポーネントを追加する。
   原則：ブランドトークン(--ink/--cta/--teal/--sand)・単色諧調・motion基盤は不変。
   ================================================================== */

/* --- スキップリンク（a11y） --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:800}
.skip-link:focus{left:0}

/* --- ★CTAコントラスト是正：濃紺文字×オレンジ地（AA 5.85:1・社長承認）--- */
/* 既存の白文字!important群より後勝ち＋高詳細度で確実化 */
.btn-cta,a.btn-cta,button.btn-cta,
.fv-actions .btn-cta,.naire .btn-cta,.final .btn-cta,.quote-cta{color:var(--ink)!important}
.btn-cta:hover,a.btn-cta:hover,button.btn-cta:hover{color:var(--ink)!important}
/* オレンジCTA上でフォーカスリングが埋もれないよう二重リング化 */
.btn-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px rgba(255,255,255,.7)}

/* --- 見出しeyebrow・免責のコントラスト是正（AA 4.5:1＋可読サイズ） --- */
.sec-eyebrow:not(.light){color:#0E6E6A}
.quote-note{font-size:12px!important;color:#3F4D63!important;line-height:1.6}
.price-fine,.price-cta-note{color:#41506A}

/* ================= ① 確定事実シグナル帯（旧audience再定義） ================= */
.audience .aud-label{color:#eafcff;opacity:.9}
.aud-sig{display:inline-flex;align-items:center;gap:6px;color:#eafcff;padding:9px 14px;border-left:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.aud-sig .ico{font-size:13px;opacity:.95}
@media(max-width:960px){.audience{display:block!important}.aud-sig{font-size:12px;padding:8px 11px}}

/* ================= ③ アンカージャンプナビ（新設） ================= */
.jumpnav{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(11,29,58,.04)}
.jumpnav .container{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-top:0;padding-bottom:0}
.jumpnav .container::-webkit-scrollbar{display:none}
.jumpnav a{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;font-size:13.5px;font-weight:800;color:var(--ink);white-space:nowrap;flex:0 0 auto;border-radius:9px;transition:.16s}
.jumpnav a:hover{color:var(--teal-d);background:var(--teal-l)}
.jumpnav a span{font-size:15px}
.jumpnav .jump-spacer{flex:1;min-width:8px}
.jumpnav .jump-cta{color:var(--ink);background:var(--cta);border-radius:10px;padding:10px 18px}
.jumpnav .jump-cta:hover{background:var(--cta-2);color:var(--ink)}
@media(max-width:640px){.jumpnav .jump-spacer{display:none}.jumpnav a{padding:11px 12px;font-size:13px}}

/* ================= ④ FV 微調整（H1案C／AI概算カード誠実化） ================= */
/* AI概算カード：捏造¥を撤去し、選択内容の要約＋内訳フレームを表示 */
.quote-label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}
.quote-summary{font-size:16px;font-weight:900;color:var(--ink);text-align:center;padding:2px 0 10px;letter-spacing:.01em}
.quote-breakdown{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 7px;font-size:12.5px;font-weight:800;color:var(--muted);padding-bottom:2px}
.quote-breakdown .op{color:var(--teal-d);font-weight:900}
.quote-breakdown .op.eq{color:var(--ink)}
.quote-breakdown .tot{color:var(--cta-2);font-weight:900}
.quote-breakdown small{font-weight:600;font-size:10px;color:#8592a6}
/* FV CTAは縦積み時に窮屈にならないよう調整（モバイル死セレクタ是正の一環） */
@media(max-width:640px){
  .fv-actions{flex-direction:column;gap:10px}
  .fv-actions .btn{width:100%;min-height:50px}
}

/* ================= ⑤ 商品カテゴリ：写真の"覆い" ================= */
/* ★カードの写真と色相は CSS の位置（nth-child）ではなく、PHP側のカテゴリ配列から
   style 属性で出すようになった（workful_pages_cat_bg）。
   位置で固定していたときは、カードを1枚挿入・並べ替えると以降が全部別カテゴリの写真になり、
   7枚目を足すと背景の無いカードが1枚できていた。カテゴリの順序変更を安全にするための変更。
   多色の6色相は 2026-07-13 の社長決裁どおり維持し、値は配列の scrim が持つ。 */
/* 写真上の白文字を締める影＋下部の暗がりで可読性確保 */
.dept-grid .dept-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,16,32,.42) 100%);z-index:0;pointer-events:none}
.dept-grid .dept-card h3,.dept-grid .dept-card p{text-shadow:0 1px 10px rgba(4,12,26,.55)}
/* テキストのみ相対配置でスクリムより前面へ（.d-ico/.d-tagのabsoluteは打ち消さない） */
.dept-grid .dept-card h3,.dept-grid .dept-card p,.dept-grid .dept-card .go{position:relative;z-index:1}
.dept-grid .dept-card .d-ico,.dept-grid .dept-card .d-tag{z-index:2}
/* 説明文の hover隠しを廃止（初回描画から常時表示＝情報欠落解消） */
@media (hover:hover) and (min-width:961px){
  .dept-grid .dept-card p{max-height:none!important;opacity:1!important;transform:none!important;overflow:visible!important}
}

/* ================= ⑦ 運営会社について（新設・旧proof吸収） ================= */
.company{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.company .sec-title.light,.company .sec-eyebrow.light{position:relative;z-index:1}
.company-lead{max-width:70ch;margin:0 auto 26px;text-align:center;color:#dbe6f5;font-size:16px;line-height:1.9}
.company-lead strong{color:#fff}
.company-facts{max-width:760px;margin:0 auto 30px;display:grid;gap:10px}
.company-facts .cf{display:flex;gap:14px;align-items:baseline;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 18px}
.company-facts .cf-k{flex:0 0 92px;font-size:12px;font-weight:800;color:#8fb0d6;letter-spacing:.02em}
.company-facts .cf-v{font-size:14px;color:#eaf1fb;line-height:1.6}
.company-facts .cf-v a{color:#9fe0ea;text-decoration:underline;text-underline-offset:3px}
.company .proof-bar{max-width:940px;margin:0 auto}
.company-cta{text-align:center;margin-top:30px}
@media(max-width:640px){.company-facts .cf{flex-direction:column;gap:3px}.company-facts .cf-k{flex:none}}

/* ================= ⑩ ご注文の流れ＋不安先回り（新設） ================= */
.flow{background:linear-gradient(180deg,#ffffff 0%,#F1F8F9 100%);position:relative;overflow:hidden}
.flow>.container{position:relative;z-index:2}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:fs;list-style:none;margin:0 0 30px}
.flow-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px 22px;position:relative;box-shadow:var(--shadow-sm)}
.flow-step .fs-no{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--teal-l);color:var(--teal-d);font-weight:900;font-size:18px;margin-bottom:12px}
.flow-step h3{font-size:16px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.flow-step p{font-size:13px;color:var(--muted);line-height:1.7}
.flow-step:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:34px;color:var(--teal);font-weight:900;font-size:18px;z-index:3}
.flow-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.flow-notes .fn{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.flow-notes .fn-ico{font-size:22px;flex:0 0 30px;line-height:1.3}
.flow-notes .fn b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:4px}
.flow-notes .fn span{font-size:12.5px;color:var(--muted);line-height:1.7}
.flow-secure{margin-top:24px;text-align:center;font-size:12.5px;color:#5a6b84;display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){.flow-steps{grid-template-columns:1fr 1fr}.flow-step:not(:last-child)::after{display:none}.flow-notes{grid-template-columns:1fr}}
@media(max-width:520px){.flow-steps{grid-template-columns:1fr}}

/* ================= ⑥ 料金：概算CTA行 ================= */
.price-cta-row{max-width:940px;margin:26px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.price-cta-note{font-size:12.5px;color:#41506A;font-weight:600}

/* ================= 料金カード「名入れ」バッジの誤爆再発防止（section .featured干渉の打ち消しを継続保証） ================= */
.price-card.featured{overflow:visible}
.price-card.featured::after{content:none!important;display:none!important}

/* ================= フッター：見出しをh2化（.foot-h）・タグライン ================= */
.foot-col .foot-h{font-size:13px;font-weight:800;color:#fff;margin-bottom:13px;letter-spacing:.03em}
.foot-tagline{color:#9fe0ea;font-weight:700;font-size:13px;margin-bottom:6px}

/* ================= モバイル追従CTAバー（新設・≤960pxのみ） ================= */
.mobilecta{display:none}
@media(max-width:960px){
  .mobilecta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;
    background:rgba(255,255,255,.97);backdrop-filter:saturate(150%) blur(8px);
    border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(11,29,58,.12);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;
    transform:translateY(120%);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .mobilecta.show{transform:none}
  .mc-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:48px;border-radius:11px;font-size:11.5px;font-weight:800;color:var(--ink);
    background:var(--grey);border:1px solid var(--line);cursor:pointer;font-family:inherit;line-height:1.2}
  .mc-item .mc-ico{font-size:17px}
  .mc-item.mc-main{flex:1.4 1 0;background:var(--cta);border-color:transparent;color:var(--ink)}
  .to-top{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ================= タップ領域44px（a11y） ================= */
.qseg{min-height:44px}
.nv-tab{min-height:44px}
.modal__close{width:44px;height:44px;display:grid;place-items:center}
.drawer-close{width:44px;height:44px;display:grid;place-items:center}
.faq-q{min-height:52px}
/* 名入れタブはbutton化：見た目を旧divに合わせる */
.nv-tab{font-family:inherit;-webkit-appearance:none;appearance:none}

/* ================= モーダル：入力テンプレ案内 ================= */
.modal__hint{font-size:12px;color:var(--muted);background:var(--paper-2);border:1px dashed var(--grey-2);border-radius:10px;padding:11px 13px;margin:14px 0 4px;line-height:1.7}

/* ================= 装飾の間引き（バランス案：負荷の高い数点のみ停止） ================= */
/* FVバッジのドット無限グロー（box-shadowアニメ＝コンポジット負荷）を停止。点(色)は残す */
.fv-badge .dot{animation:none!important}
/* 見積カードの常時浮遊はJSで撤去済み。ここでも保険 */
.quote-card{animation:none}

/* ================= 新セクション要素のreveal初期非表示（FOUCフラッシュ防止） ================= */
.motion.js-ok .flow-step,.motion.js-ok .flow .fn,.motion.js-ok .company .cf{opacity:0;transform:translateY(20px)}

/* ================= モバイル：費用一覧など横溢れの保険 ================= */
@media(max-width:760px){
  .flow-secure{font-size:12px}
  .company-lead{font-size:14.5px}
  .jumpnav a{scroll-snap-align:start}
}
/* ==================================================================
   ★ v7.0.1 出荷パッチ（実装後 再監査の反映 2026-07-13）
   ①CTA文字色を変数の多層再定義に依存させず濃紺直指定でAA確定
   ②暗背景ゴーストボタンhoverの白×橙(2.87:1)を是正 ③追従CTAのフッター被り回避 ④免責13px
   ================================================================== */
/* ① #0B1D3A × #FF6A00 = 5.85:1（AA通過）。var(--ink)は複数層で再定義され監査でも誤読が起きたため直指定で確定 */
.btn-cta,a.btn-cta,button.btn-cta,
.fv-actions .btn-cta,.naire .btn-cta,.final .btn-cta,.quote-cta,
.btn-cta:hover,a.btn-cta:hover,button.btn-cta:hover,
.jumpnav .jump-cta,.jumpnav .jump-cta:hover,.mc-item.mc-main{color:#0B1D3A!important}
/* ② 暗背景ゴーストボタンのhoverは白文字を避け濃紺文字に（naire/final/company） */
.btn-ghost-light:hover,a.btn-ghost-light:hover,button.btn-ghost-light:hover{color:#0B1D3A!important}
/* ③ モバイル追従CTAがフッター（会社情報・登録番号行）を覆わないよう本文下部に余白を確保 */
@media(max-width:960px){body.workful-front{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* ④ 免責は13px以上（景表法の明瞭表示配慮） */
.quote-note{font-size:13px!important}
.price-fine,.price-cta-note{font-size:13px}

/* ==================================================================
   ★ v7.0.2 実機フィードバック反映（2026-07-13 社長指摘3点）
   ①カテゴリのアイコンはみ出し（上部で個別是正済） ②Featured WINTERの文字同化 ③つなぎ曲線の不統一
   ================================================================== */
/* ② セクション背景を単色化し、上下の.curve色と厳密一致させて“つなぎ”の統一感を出す
   （曲線の色はfront-page.php側で: 白↔ベージュ↔白↔紺／teal↔ベージュ↔白／白↔ディープティール に一致） */
.dept{background:#ffffff!important}
.featured{background:#FBF3E8!important}
.price{background:#ffffff!important}
.biz{background:#FBF3E8!important}
.news{background:#ffffff!important}
/* ③ Featured：白文字が写真と同化しないよう全カードに可読性の影。WINTERは覆いを濃紺寄りブルーへ深める */
.feat-card h3,.feat-card p,.feat-card .s-eye,.feat-card .s-go{text-shadow:0 2px 12px rgba(3,10,28,.5)}
.feat-card.winter{background:linear-gradient(135deg,rgba(23,48,112,.9),rgba(14,32,78,.95)),url("../img/feat-winter.jpg") center 18%/cover}

/* ==================================================================
   ★ v7.0.3 FV DRMフック実装（2026-07-13）
   H1を2行ブロック（フック＋検索語回収）／CTA直下の安心マイクロコピー
   ================================================================== */
/* 2行H1：フック(1行目)＋SEO/メカニズム回収(2行目)。語中改行させない＋行長を均等化 */
.fv h1{font-size:clamp(26px,3.3vw,38px);line-height:1.34}
.fv-h1__hook,.fv-h1__seo{display:block;word-break:keep-all;line-break:strict;text-wrap:balance}
.fv-h1__seo{margin-top:.34em}
/* CTA直下の安心マイクロコピー（連絡先不要・営業電話なし） */
.fv-cta-note{margin-top:12px;font-size:13px;color:#41506A;font-weight:600;max-width:46ch;line-height:1.65}
@media(max-width:760px){.fv-cta-note{font-size:12.5px}}

/* ==================================================================
   ★ v7.0.4 円弧つなぎのグラデ復活（2026-07-13 社長指摘）
   曲線の塗りをSVGグラデ化（front-page.php側）＋写真背景セクション(名入れ/最終CTA)の
   端を隣接する曲線色へフェードさせ、継ぎ目（グラデ欠け）を解消する。
   ================================================================== */
/* 名入れ：写真テールを下端で #0A4854（名入れ→法人 曲線の上端色）へ溶かす */
.naire{background:
  linear-gradient(180deg,transparent 80%,#0A4854 100%),
  linear-gradient(150deg,rgba(12,102,117,.9),rgba(10,72,84,.93)),
  url("../img/naire.jpg") center 20%/cover !important}
/* 最終CTA：写真ヘッドを上端で #0f3d45（お知らせ→最終CTA 曲線の下端色）から溶かす */
.final{background:
  linear-gradient(180deg,#0f3d45 0%,transparent 18%),
  linear-gradient(115deg,rgba(11,110,124,.86),rgba(15,30,40,.8)),
  url("../img/final-cta.jpg") center 20%/cover !important}

/* ==================================================================
   ★ v7.0.5 Featured「法人(biz)」カードの文字消え対策（2026-07-14 社長指摘）
   feat-biz.jpg が明るい/未転送でも白文字が読めるよう、ティール覆いを高不透明の濃ティールへ深める
   （WINTERと同種の是正。summer/custom/springは十分暗いため対象外）
   ================================================================== */
.feat-card.biz{background:linear-gradient(135deg,rgba(12,102,117,.92),rgba(8,58,69,.97)),url("../img/feat-biz.jpg") center/cover}

/* ==================================================================
   ★ v7.1 FV刷新（2026-07-14 社長要望・実機フィードバック）
   ①fv2画像へ ②スクリム(透過)・グリッド線を撤去し写真を全面に ③グローでコピーを読ませる
   ④コピー問いかけ型(PHP) ⑤見積カードをFV直後の別セクションへ移設 ⑥CTA太字潰れ是正
   ＋Featured左下のオレンジ装飾ブロブ撤去
   ================================================================== */
/* ① スクリム・グリッド撤去（写真を全面に） */
.fv::after{display:none!important}
.fv::before{display:none!important}
/* ② ヒーローを fv2 に。下端のみ緩やかにフェードし人物の足元は見せる */
.fv-bg::before{
  inset:0!important;transform:none!important;animation:none!important; /* Ken Burnsズームを外し頭上の見切れを防ぐ＝全高表示 */
  background-image:url("../img/fv2.jpg?v=75")!important;background-position:4% 18%!important;background-size:cover!important;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,.4) 100%)!important;
  mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,.4) 100%)!important}
/* ③ FVを1カラム（コピーのみ・見積カードは別セクションへ）＋縦センター。人物を右へ寄せコピーと重ねない */
.fv{min-height:min(86vh,680px);display:flex;align-items:center}
.fv>.container{display:block!important;width:100%}
.fv-copy{max-width:min(620px,94%)}
/* ④ グロー：明るい写真上で濃紺コピーを白ハローで浮かせて読ませる（スクリムの代替） */
.fv h1,.fv-sub,.fv-cta-note,.fv-trust .t b,.fv-trust .t span{
  text-shadow:0 0 22px rgba(255,255,255,.96),0 0 7px rgba(255,255,255,.98),0 1px 2px rgba(255,255,255,.92)}
.fv-badge{box-shadow:0 8px 22px rgba(11,29,58,.16)}
/* ⑤ CTAの太字潰れ対策（ウェイト700＋わずかに字間） */
.btn-cta{font-weight:700;letter-spacing:.02em}
/* ⑥ 装飾ブロブを撤去（単色化後に浮くため）：オレンジ(featured)＋青/ティール(dept/biz)＋紺(faq) */
.featured::before,.dept::after,.biz::after,.faq::before{display:none!important}
/* ⑦ AI概算見積もりセクション（FV直後・じっくりコピーを読ませてから） */
.quote-sec{position:relative;overflow:hidden;isolation:isolate;background:#F4F8FA url(../img/quote-poster.jpg?v=77) center/cover no-repeat}
.quote-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.quote-sec::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(244,248,250,.90) 0%,rgba(244,248,250,.64) 20%,rgba(238,246,248,.40) 48%,rgba(230,246,245,.40) 100%)}
.quote-sec>.container{position:relative;z-index:2}
.quote-sec .quote-card{max-width:560px;margin:0 auto;background:rgba(255,255,255,.72);backdrop-filter:blur(13px) saturate(1.08);-webkit-backdrop-filter:blur(13px) saturate(1.08);border-color:rgba(255,255,255,.6)}
.quote-sec .quote-head{background:rgba(255,255,255,.32)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.quote-sec .quote-card{background:rgba(255,255,255,.92)}}
@media(max-width:759px){.quote-bgvideo{display:none}}
@media(prefers-reduced-motion:reduce){.quote-bgvideo{display:none}}
/* ⑧ モバイル：画像を左の壁側へ寄せ、コピーを明るい面に載せて可読性を確保（スクリムなし方針を維持） */
@media(max-width:760px){
  .fv-bg::before{background-position:26% 26%!important}
  .fv-copy{max-width:100%}
  .fv{min-height:auto}
  /* 下部チップは写真上でも締まるよう、グローを少し強める */
  .fv-trust .t b,.fv-trust .t span,.fv-cta-note{text-shadow:0 0 10px rgba(255,255,255,1),0 0 20px rgba(255,255,255,.95),0 1px 2px rgba(255,255,255,.95)}
}

/* v7.0 ここまで */

/* ==================================================================
   ★ v7.2.1 FV人物位置調整＋スマホ・グローバルヘッダー刷新（2026-07-14 社長指摘）
   ① PC等倍でH1/サブが左の人物に被る → 背景を container幅基準で左寄せし右をクリップ、
      被写体を右3分割へ送る（構図もルールオブサーズで安定）。倍率固定で画面幅に依らず堅牢。
      ※1920px/1280px の実描画で重なりゼロ・全身表示を確認。
   ② SPヘッダー崩れ（大型CTAが折返し→ハンバーガーが画面外）を是正。
      上部バーを「ロゴ｜コンパクト見積CTA｜メニュー」の1行へ最小化し、
      カート/マイページはドロワーへ集約。320px幅でも収まる（実測 total=299px, 余白21px）。
   ================================================================== */
/* ① FV：被写体を右へ（PC/タブレット。モバイルは③で従来フレーミングへ戻す） */
.fv-bg::before{left:0!important;right:auto!important;width:126%!important;
  background-size:cover!important;background-position:left 15%!important}
/* CTAの「無料」+「見積もり」間に出る .btn の gap を全幅で解消（span化に伴う保険） */
.head-cta .btn-cta{gap:0}

/* ② スマホ・グローバルヘッダー（1行・最小構成） */
@media(max-width:960px){
  .head-main{padding:11px 16px;gap:10px;flex-wrap:nowrap}
  .head-actions{gap:8px;flex-wrap:nowrap}
  .head-icons{display:none}                 /* カート/マイページはドロワーへ集約 */
  .head-cta .btn-cta{padding:11px 16px;font-size:14px;border-radius:10px;
    white-space:nowrap;min-height:42px;line-height:1;box-shadow:0 6px 16px rgba(242,106,27,.26)}
  .hamburger{padding:0;width:46px;height:42px;border:1px solid var(--line);border-radius:10px;
    align-items:center;justify-content:center;gap:5px;margin-left:0}
  .hamburger span{width:22px}
  /* jumpnav：右端フェードでスクロール可能を上品に示唆（見切れを“意図的”に見せる） */
  .jumpnav .container{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
@media(max-width:560px){
  .head-main{padding:10px 14px;gap:8px}
  .brand{font-size:18px;gap:8px}
  .brand .tag{display:none}                 /* 「作業服・空調服の専門店」は小画面で省略 */
  header.site .brand .mark{width:38px;height:34px}
  .head-cta .btn-cta .cta-pre{display:none} /* 「無料」を省き「見積もり」に（省スペース） */
  .head-cta .btn-cta{padding:11px 15px;font-size:13.5px}
}
@media(max-width:360px){
  .brand{font-size:16.5px}
  .head-cta .btn-cta{padding:10px 13px;font-size:13px}
}
/* ③ FVモバイルは従来の全面カバー＋左寄り(26% 26%)を維持（①のクリップを解除） */
@media(max-width:760px){
  .fv-bg::before{left:0!important;right:0!important;width:auto!important;
    background-size:cover!important;background-position:26% 26%!important}
}
/* v7.2.1 ここまで */

/* ==================================================================
   ★ v7.3 ご注文の流れ：各ステップに実写を追加（2026-07-15 社長要望）
   テキストのみで味気なく、特にSPで離脱要因 → 各ステップに 3:2 の実写を載せ、
   視覚リズムと安心感（実在の人・工房・梱包）を付与。番号バッジは画像下端に浮かせる。
   ※接続の「→」が消えないよう overflow:hidden は使わず画像上端を角丸でクリップ。
   ================================================================== */
.flow-step{padding:0;display:flex;flex-direction:column}
/* 遅延読み込み中に「白い空箱」に見えないよう、ブランド色の面をプレースホルダにする */
.flow-step .fs-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:15px 15px 0 0;background:linear-gradient(135deg,var(--paper-2),var(--teal-l))}
.flow-step .fs-body{padding:16px 20px 20px}
/* 番号バッジ：画像の下端に重ねる白フチの浮遊チップ（プロ設計のリズム） */
.flow-step .fs-no{margin:-35px 0 12px;position:relative;z-index:2;
  border:2px solid #fff;box-shadow:0 6px 16px rgba(14,27,51,.20)}
/* PC4列時の接続矢印を画像帯の縦中央あたりへ */
.flow-step:not(:last-child)::after{top:82px}
@media(max-width:900px){ .flow-step .fs-no{margin-top:-33px} }
/* v7.3 ここまで */

/* ==================================================================
   ★ v7.4 名入れプレビューの実写化＋料金・納期にビジュアル追加（2026-07-16 社長要望）
   ① 名入れ：CSS擬似ユニフォーム＋"WORKFUL"文字を廃し、刺繍/プリントの実写マクロをタブで出し分け。
      同一ロゴ・同一生地・同一構図のため、タブ切替が「糸の立体 vs 平滑なプリント」の比較として機能する。
      ステージを 3:2 にして写真を全て見せる（従来の固定220pxより高くなり、右の4点カラムと高さが揃う）。
   ② 料金・納期：ビジュアル皆無で離脱要因だったため、見出し直下に帯状の実写を追加。
   ※演出はフェイルセーフ設計：.drawn が付かなくても画像は必ず見える（animationで実現）。
   ================================================================== */
/* ① 名入れステージ＝実写 */
/* 読み込み前に「黒い穴」に見えていたため、明るいブランド面から立ち上げる */
.nv-stage{height:auto;aspect-ratio:3/2;display:block;padding:0;overflow:hidden;
  background:linear-gradient(135deg,#123249,#0E2A3E)}
.nv-stage .nv-photo{background:linear-gradient(135deg,#16324A,#0F2739)}
.nv-stage .nv-photo{width:100%;height:100%;object-fit:cover;display:block}
/* 「描かれる」演出：初期状態は素の表示（＝万一発火しなくても見える）、.drawn付与時のみワイプ */
.motion .nv-stage.drawn .nv-photo{animation:nvWipe .9s cubic-bezier(.22,.61,.36,1)}
@keyframes nvWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){ .motion .nv-stage.drawn .nv-photo{animation:none} }

/* ② 料金・納期のビジュアル（PCは帯／SPは背が出すぎないよう4:3へ） */
.price-visual{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center 58%;
  display:block;border-radius:16px;margin:0 0 26px;box-shadow:var(--shadow-sm)}
@media(max-width:760px){ .price-visual{aspect-ratio:4/3;margin-bottom:20px} }
/* v7.4 ここまで */

/* ==================================================================
   ★ v7.5 スクロール演出体系（2026-07-16 社長要望：下へ進むほど発見があるTOPへ）
   従来は全要素が同一のフェードアップ＋個別発火で単調だった。
   セクションごとに意味のある固有の動きを与え、グリッドはカスケードでリズムを作る。
   ※実装はJS（workful-top.js v7.5）。ここでは擬似要素・進捗バーなどCSS側の受け皿のみ。
   ================================================================== */
/* ① スクロール進捗バー（JSが body 直下に生成。ヘッダーより前面・ドロワーより背面） */
.scroll-prog{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1001;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-d) 45%,var(--cta) 100%)}
/* ② ご注文の流れ：接続矢印を順に灯す（--fa は JS が 0→1）。
      .motion が無い＝reduced-motion／GSAP不達では既定値1で最初から見える＝フェイルセーフ */
.flow-step:not(:last-child)::after{opacity:var(--fa,1)}
.motion .flow-step{--fa:0}
@media (prefers-reduced-motion:reduce){ .scroll-prog{display:none} }
/* v7.5 ここまで */

/* ==================================================================
   ★ v7.6 磨き込み（2026-07-27）
   ① 絵文字アイコンを全廃し、ブランド統一のラインアイコン体系へ
      （公式UIキット「2px @24px」準拠。OS依存のカラー絵文字が
        ブランド4色と衝突し、B2Bの信頼感を損ねていたのを是正）
   ② 納期・送料の数値カウントアップを廃止（JS）＝確定事実（7営業日／3営業日／
      11,000円）の途中値が一瞬でも表示される状態を根絶し、線の演出へ置換
   ③ 写真上テキストのコントラスト是正（FV信頼チップ／Featured夏／カテゴリ説明）
   ④ 細部の仕上げ（登録番号の字面バランス・戻るボタンの出現位置 等）
   ================================================================== */

/* --- ① アイコン体系（サイズは既存のfont-size指定をそのまま活かす＝1em基準） --- */
.wf-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:block;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic-fill,.ic-fill *{fill:currentColor;stroke:none}
/* 確定事実シグナル帯 */
.audience .aud-sig .ico{font-size:15px;display:inline-flex;opacity:1}
/* ヘッダー：検索・カート・マイページ */
.head-search button{display:grid;place-items:center;font-size:17px;padding:0}
.head-search button .ic{stroke-width:2.2}
.icon-link{font-size:21px}
.icon-link .ic{stroke-width:1.9}
/* メインナビ（ラインアイコンはティールで、ブランドの体系に載せる） */
.head-nav a .navico{font-size:19px;display:inline-flex;color:var(--teal-d);transition:color .18s}
.head-nav a:hover .navico{color:var(--cta)}
/* ジャンプナビ */
.jumpnav a>span{font-size:17px;display:inline-flex;color:var(--teal-d)}
.jumpnav .jump-cta>span{color:inherit}
/* 商品カテゴリタイル（写真上：白の線画＋わずかな影で沈ませない） */
.dept-card .d-ico{font-size:30px;display:block}
.dept-grid .dept-card .d-ico{filter:drop-shadow(0 2px 8px rgba(4,12,26,.45))}
.dept-card .d-ico .ic{stroke-width:1.75}
/* 名入れ4点／法人4点／流れの補足／モーダル／追従CTA */
.np-item .np-ico{font-size:24px;display:flex;align-items:center;justify-content:center;height:26px}
/* 白カード内の補助アイコンは淡ティールのチップに載せる（線画は面積が軽く沈むため） */
.biz-list .b .bi,.flow-notes .fn-ico{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;
  border-radius:10px;background:var(--teal-l);color:var(--teal-d);font-size:21px}
.biz-list .b .bi{margin-bottom:10px}
.flow-secure>span:first-child{display:inline-flex;font-size:16px;color:var(--teal-d)}
.modal__row .mi{font-size:20px;color:var(--teal-d)}
.mc-item .mc-ico{font-size:19px;display:flex}
.quote-badge .spark{display:inline-flex;font-size:14px;vertical-align:-.14em;margin-right:2px}

/* --- ② 納期・送料：数値は書き換えず、下線が引かれて視線が集まる演出に --- */
/* b を inline-block にする＝下線を文字幅に合わせるため。説明文は必ず次行に置く */
.price-note-grid .pn b{display:inline-block;position:relative;padding-bottom:2px}
.price-note-grid .pn span{display:block;margin-top:6px}
.price-note-grid .pn b::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  border-radius:2px;background:var(--teal);transform:scaleX(1);transform-origin:0 50%}
.motion .price-note-grid .pn b::after{transform:scaleX(0);
  transition:transform .62s cubic-bezier(.22,.61,.36,1) .12s}
.motion .price-note-grid .pn.pn-in b::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.price-note-grid .pn b::after{transform:scaleX(1)!important;transition:none!important}}

/* --- ③ 写真上テキストのコントラスト是正 --- */
/* FV信頼チップの説明文：明るいコンクリート背景でも読み切れる濃度に */
.fv-trust .t span{color:#37465F;font-size:12.5px;font-weight:600}
/* Featured「夏」：白文字とのコントラスト確保（色相=コーラルは維持し明度のみ深める。winter/bizと同種の是正） */
.feat-card.summer{background:linear-gradient(135deg,rgba(206,86,20,.88),rgba(158,56,8,.94)),url("../img/feat-summer.jpg") center 15%/cover}
/* カテゴリタイル：下部の暗がりを強めて説明文（13px白）を締める */
.dept-grid .dept-card::after{background:linear-gradient(180deg,transparent 34%,rgba(6,16,32,.54) 100%)}
/* AI概算セクション：動画背景の上のリード文を濃く */
.quote-sec .sec-lead{color:#33425A;font-weight:500}

/* --- ④ 細部の仕上げ --- */
/* 適格請求書番号は13桁で他3項目より字面が大きくなりすぎるため、専用サイズで整える */
.company .proof-item:first-child .proof-num{font-size:clamp(16px,1.9vw,20px);letter-spacing:.01em}
/* 戻るボタンはFVと見積セクションを抜けてから（重なりノイズの解消。JS側の閾値と対） */
.to-top{right:22px}
/* フッターのブランドマークが表示されていなかったのを是正。
   原因＝v5.6の `.brand-col .brand .mark{background:none!important}`（詳細度0,3,0）が
   v6.3の `.brand .mark{background:url(...) center/contain no-repeat!important}`（0,2,0）に勝ち、
   後段で background-image だけ復活したため size/position/repeat が初期値のまま＝
   365pxの原画像の左上（透明部分）だけが40px枠に出て、マークが消えて見えていた。 */
.brand-col .brand .mark{width:40px;height:36px;flex:0 0 40px}
.site-foot .brand .mark,.brand-col .brand .mark{
  background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}

/* --- ⑤ 長文がカードから溢れて読めなくなるのを根絶 ---
   v5.9の word-break:keep-all（意味の途中で改行しない）は維持しつつ、
   句読点のない長文がSPで枠外へ流れて欠ける事故（例:「…必要がありませ|ん。」）を防ぐ。
   overflow-wrap:break-word ＝ 行に収まらない時だけ折る＝通常の改行位置は変わらない。 */
.fv h1,.fv-sub,.fv-trust .t,.sec-title,.sec-lead,.feat-card h3,.feat-card p,
.dept-card h3,.dept-card p,.biz-text h2,.biz-text p,.biz-list .b b,.biz-list .b span,
.np-item h4,.np-item p,.price-card h3,.price-desc,.pn b,.pn span,.naire-lead,
.faq-q,.faq-a p,.news-txt,.modal__title,.modal__sub,.final h2,.final p,
.quote-note,.quote-sub,.quote-summary,.flow-step h3,.flow-step p,
.flow-notes .fn b,.flow-notes .fn span,.company-lead,.company-facts .cf-v,
.mc-item,.jumpnav a,.aud-sig{overflow-wrap:break-word}
/* FAQの質問文は句読点のない長い疑問文が多く、keep-all だと flex 内で縮まず末尾が欠ける。
   ここだけ通常の日本語折り返し（禁則は line-break:strict で維持）に戻す。 */
.faq-q{word-break:normal}
/* SP：適格請求書番号は13桁で2カラムに収まらないため、専用に縮小 */
@media(max-width:640px){.company .proof-item:first-child .proof-num{font-size:14.5px}}
@media(max-width:400px){.company .proof-item:first-child .proof-num{font-size:13px;letter-spacing:-.01em}}
/* SPの確定事実バーも右端をフェード＝横に続きがあることを上品に示す（jumpnavと同じ作法） */
@media(max-width:960px){
  .audience .container{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
}
/* v7.6 ここまで */


/* ==================================================================
   ★ 印刷（トップページ）
   紙に残すべきは「何をいくらの条件で、いつ届けてくれる会社か」。
   演出・ナビ・装飾は落とし、確定事実と事業者情報を必ず出す。
   ================================================================== */
@media print{
  .audience,.jumpnav,.head-search,.head-actions,.head-nav,.fv-scroll,.mobilecta,.to-top,
  .drawer,.drawer-mask,.curve,.feat-swiper-wrap,.quote-bgvideo,.scroll-prog{display:none!important}
  header.site{position:static!important;box-shadow:none!important}
  body.workful-front{background:#fff!important;padding-bottom:0!important}
  .motion .fv-copy,.motion .quote-card,.motion.js-ok *{opacity:1!important;transform:none!important;animation:none!important}
  .faq-a{grid-template-rows:1fr!important}
  .faq-a>p{overflow:visible!important}
  .naire,.final,.company{background:#fff!important;color:#111!important}
  .naire *,.final *,.company *{color:#111!important;text-shadow:none!important}
  .dept-card,.feat-card{background:#fff!important;color:#111!important;border:1px solid #ccc!important}
  .dept-card *,.feat-card *{color:#111!important;text-shadow:none!important}
  section{padding:14px 0!important;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555}
  .site-foot{background:#fff!important;color:#111!important;border-top:1px solid #999}
  .site-foot *{color:#111!important}
}
/* Windowsハイコントラスト：色だけに頼っている状態表示を、境界線でも伝える */
@media (forced-colors: active){
  .qseg.active,.qseg[aria-checked="true"]{outline:3px solid CanvasText;outline-offset:-3px}
  .faq-item[open] .plus{outline:2px solid CanvasText}
  .btn{border:1px solid CanvasText}
}

/* ==================================================================
   ★ v7.7 ビジュアルの規律（2026-07-29）
   世界水準に足りなかったのは装飾ではなく規律。
   ①見出しと数字の跳躍 ②余白のリズム ③3カラムの整列 を入れる。
   ================================================================== */
:root{
  --sp-xl:clamp(72px,7vw,112px);
  --sp-lg:clamp(56px,5.5vw,88px);
  --sp-md:clamp(40px,4vw,64px);
}
/* ① タイポグラフィ：見出し／リード／本文の比率を立てる（従来は1.16〜1.45で平坦だった） */
.sec-title{font-size:clamp(26px,3.6vw,40px);font-weight:900;line-height:1.32;letter-spacing:.005em}
.sec-lead{font-size:clamp(14.5px,1.2vw,16px);line-height:1.9;max-width:36em;margin-inline:auto}
.dept-card h3{font-size:clamp(17px,1.5vw,20px)}
.feat-card h3{font-size:clamp(20px,2.2vw,26px)}
/* 数字は本文と同格ではなく、主役として立てる */
.pn b,.proof-num,.price-figure,.fv-trust .t b{letter-spacing:-.01em}
.pn b{font-size:clamp(17px,1.7vw,21px)}
.price-figure{font-size:clamp(24px,2.6vw,30px)}
.proof-num{font-size:clamp(20px,2.4vw,27px)}

/* ② 縦リズム：主役セクションだけ大きく取り、それ以外は締める */
section{padding:var(--sp-lg) 0}
section.quote-sec,section.price,section.final{padding:var(--sp-xl) 0}
.sec-head{margin-bottom:clamp(28px,3.2vw,44px)}

/* ③ SP：FVの信頼チップが追従CTAに隠れる／バッジが1文字だけ折り返す問題 */
@media(max-width:640px){
  .fv-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .fv-trust .t{padding:0;border-left:none}
  .fv-trust .t:last-child{grid-column:1/-1}
  .fv-badge{font-size:11.5px;padding:6px 12px;line-height:1.5;text-align:left}
}
@media(max-width:960px){
  body.workful-front{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
/* v7.7 ここまで */


/* ==================================================================
   ★ 参考額（案B・社長承認 2026-07-30）
   下層 /quote/ の .wf-q-amount と同じ設計言語。トップは白背景カードの上に
   置くため、面ではなく"下線と数字の大きさ"で主役性を作る。
   ================================================================== */
.quote-amount{display:grid;gap:2px;margin:14px 0 10px;padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,106,0,.10),rgba(255,133,52,.05));
  border:1px solid rgba(255,106,0,.26)}
.quote-amount .qa-lb{font-size:11.5px;font-weight:700;color:#B4531A;letter-spacing:.02em}
.quote-amount .qa-num{font-size:clamp(28px,3.4vw,38px);font-weight:900;color:var(--ink);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.quote-amount .qa-num small{font-size:.44em;font-weight:800;margin-left:3px}
.quote-amount .qa-sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.quote-note a{color:var(--teal-d);font-weight:700;text-underline-offset:3px}
@media(prefers-color-scheme:dark){
  .quote-amount .qa-lb{color:#C7621F}
}
@media(forced-colors:active){
  .quote-amount{border:1px solid CanvasText;background:Canvas}
}


/* 在庫を持たないカテゴリの案内。断定文と視覚的に切り分け、注記として読ませる。 */
.wf-order-only{margin-top:10px;padding:12px 14px;border-radius:10px;
  background:rgba(14,110,106,.06);border-left:3px solid rgba(14,110,106,.45);
  font-size:14px;line-height:1.85}
@media(forced-colors:active){ .wf-order-only{border:1px solid CanvasText} }


/* ==================================================================
   ★ 7カテゴリ化（2026-07-30）にともなうカードの安全策
   4列時はカード幅が271pxまで下がるため、本文が折り返してカード高さを超え、
   見出しが上へ押し出されて左上のバッジ（position:absolute）に潜り込む事故が起きた。
   ①バッジのあるカードは見出しの上に余白を確保する
   ②高さの下限を少し上げ、行揃え（align-items:stretch）で潰れないようにする
   ================================================================== */
/* カードは justify-content:flex-end（下寄せ）なので、見出しに margin-top を足しても
   位置は下がらず、コンテンツ全体が上へ伸びてバッジに潜り込むだけだった。
   コンテンツ領域そのものをバッジの下端（18px+約24px）より下から始める。
   下寄せのため、バッジの無いカードでも見た目は変わらない。 */
.dept-grid .dept-card{min-height:208px;padding-top:52px}