/* ============================================================
   AddProduction リニューアル 共通スタイル (site.css)
   工程3 ワイヤープロトタイプ用。全ページ共通のテーマ変数・
   コンポーネント・モーション初期状態を集約。
   配色は POP に固定（2026-07-11 WARM廃止・トグル全廃。html[data-theme="pop"] は固定属性）。
   ============================================================ */

/* ===== テーマ変数（POP固定。:root は基礎値・下の pop ブロックが採用値） ===== */
:root{
  /* 既定 = WARM（クリーム＋テラコッタ骨太） */
  --accent-tx:#1B5CE6; /* 強調テキスト専用（2026-07-06 青系へ統一。背景/バーは--accentのまま） */
  --cream:#F6EEE6;
  --cream-deep:#EFE3D6;
  --ink:#2B2B2B;
  --accent:#E8703A;
  --accent-2:#F4A93C;
  --eco:#1FA98C;
  --eco-blue:#2E78C7;
  --pop-pink:#FF5BA0;
  --pop-purple:#8A6CFF;
  --paint-yellow:#F8F800; /* ポスター筆塗りハイライト（原画実測値・amber --accent-2 とは独立） */
  --white:#fff;
  --radius:18px;
  --shadow:0 14px 40px rgba(60,40,20,.12);
  --maxw:1180px;
}
html[data-theme="pop"]{
  /* POP = 白基調＋ビビッドマルチカラー */
  --accent-tx:#1B5CE6;
  --cream:#FFFFFF;
  --cream-deep:#FFF6EE;
  --ink:#262630;
  --accent:#FF6A2B;
  --accent-2:#FFC42E;
  --eco:#13C29B;
  --eco-blue:#2D8CFF;
  --paint-yellow:#F8F800;
  --radius:22px;
  --shadow:0 16px 44px rgba(60,40,20,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Kaku Gothic Antique","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  color:var(--ink);background:var(--cream);
  line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.en{font-family:"Montserrat",sans-serif;letter-spacing:.04em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
section{position:relative}
h2.sec-title{font-weight:900;font-size:clamp(28px,4vw,46px);line-height:1.3;margin-bottom:8px}
.en-sub{display:block;font-family:"Montserrat";font-size:14px;font-weight:700;color:var(--accent-tx);letter-spacing:.16em;margin-bottom:10px}
.accent{color:var(--accent-tx)}.eco{color:var(--eco)}
/* 不自然な位置での折返し対策（対応ブラウザのみ）：見出し=行長均等化＋和文フレーズ折り(auto-phrase)、本文=孤立行防止＋長語あふれ対策 */
h1,h2,h3,h4,summary{text-wrap:balance;word-break:auto-phrase}
p,li,dd,.faq .a{text-wrap:pretty;word-break:auto-phrase;overflow-wrap:break-word}
a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere}

/* ===== Header ===== */
header{position:fixed;inset:0 0 auto 0;z-index:100;transition:.4s;padding:18px 0}
header.scrolled{background:rgba(246,238,230,.92);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(60,40,20,.08);padding:10px 0}
.nav-inner{display:flex;align-items:center;gap:22px}
.logo{font-family:"Montserrat";font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}
.logo b{color:var(--accent-tx)}
nav.main{display:flex;gap:20px;margin-left:auto;align-items:center}/* メガメニュー(.has-mega)も含め全項目を縦中央で揃える */
nav.main a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;position:relative;padding:4px 0}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:.3s}
nav.main a:hover::after{width:100%}
nav.main a.sim{color:var(--eco)}
.head-cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:999px;text-decoration:none;transition:.25s;white-space:nowrap}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-ghost{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(232,112,58,.35)}
.btn-primary:hover{background:#d85f29;transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:17px}
/* バーガー基本形（見た目のみ）。モバイルの開閉挙動は下部「モバイルドロワー」
   ブロックに一本化した（Codex監修#2：旧 nav.main{display:none} 方式は撤去）。 */
.burger{display:none;flex-direction:column;gap:5px;margin-left:auto;cursor:pointer}
.burger span{width:26px;height:3px;background:var(--ink);border-radius:2px}

/* ===== Hero ===== */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:90px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(circle at 78% 22%,rgba(244,169,60,.45),transparent 45%),
  radial-gradient(circle at 15% 80%,rgba(31,169,140,.40),transparent 45%),
  linear-gradient(120deg,#FBF4EC,#F1E4D4)}
.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(232,112,58,.12) 1px,transparent 1px);background-size:22px 22px}
.hero h1{font-weight:900;font-size:clamp(34px,6.2vw,76px);line-height:1.18;letter-spacing:.01em}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block}
.hero .sub{margin:26px 0 38px;font-size:clamp(15px,1.6vw,19px);font-weight:500;max-width:540px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:"Montserrat";font-size:11px;letter-spacing:.2em;color:var(--ink);opacity:.6}
.scroll-cue::after{content:"";display:block;width:1px;height:42px;background:var(--ink);margin:8px auto 0;transform-origin:top;animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
/* ヒーロー背景動画placeholder（任意で .hero-bg.is-video-ph に付与） */
.hero-bg.is-video-ph::after{content:attr(data-ph);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(43,43,43,.28);font-weight:700;letter-spacing:.1em;text-align:center;padding:0 30px}

/* ===== サブページ用ページヘッダー（hero簡易版） ===== */
.page-hero{padding:160px 0 70px;position:relative;overflow:hidden}
.page-hero .crumb{font-family:"Montserrat";font-size:12px;font-weight:700;color:var(--accent-tx);letter-spacing:.12em;margin-bottom:14px}
.page-hero h1{font-weight:900;font-size:clamp(30px,5vw,58px);line-height:1.2}
.page-hero .lead{margin-top:18px;font-size:clamp(15px,1.6vw,18px);font-weight:500;max-width:640px;color:#555}

/* ===== Stats (カウントアップ) ===== */
.stats{background:var(--ink);color:#fff;padding:70px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat .num{font-family:"Montserrat";font-weight:800;font-size:clamp(34px,5vw,62px);color:var(--accent-2);line-height:1}
.stat .unit{font-size:18px;color:#fff;margin-left:2px}
.stat .label{margin-top:10px;font-size:14px;color:rgba(255,255,255,.75)}
@media(max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px}}

/* ===== Strength / One-stop ===== */
.strength{padding:110px 0 80px}
.strength .lead{max-width:620px;margin-top:18px;font-size:16px;color:#555}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:54px;position:relative}
.flow-step{background:var(--white);border-radius:var(--radius);padding:28px 22px;box-shadow:var(--shadow);position:relative;z-index:2;text-align:center;margin:0 8px}
.flow-step .step-no{font-family:"Montserrat";font-weight:800;font-size:13px;color:var(--accent-tx);letter-spacing:.1em}
.flow-step .step-ic{width:58px;height:58px;margin:12px auto 14px;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:26px}
.flow-step h4{font-size:18px;font-weight:900;margin-bottom:6px}
.flow-step p{font-size:13px;color:#666;line-height:1.6}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.why-card{background:linear-gradient(135deg,#fff,#FFF8F1);border:1px solid rgba(232,112,58,.18);border-radius:var(--radius);padding:32px 28px}
.why-card .why-ic{font-size:30px;margin-bottom:12px}
.why-card h4{font-size:19px;font-weight:900;margin-bottom:10px}
.why-card p{font-size:14px;color:#555}
.why-card .accent-line{width:38px;height:4px;background:var(--accent);border-radius:2px;margin-bottom:16px}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,1fr);gap:18px}.why{grid-template-columns:1fr}}

/* ===== Services ===== */
.services{padding:110px 0}
.svc-main{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:46px}
.svc-card{background:var(--white);border-radius:var(--radius);padding:38px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.35s;text-decoration:none;color:var(--ink);display:block}
.svc-card:hover{transform:translateY(-8px)}
.svc-hero-card{grid-row:span 2;background:linear-gradient(135deg,#fff,#FFF6EC);border:2px solid rgba(232,112,58,.25)}
.svc-tag{font-family:"Montserrat";font-size:12px;font-weight:700;color:var(--accent-tx);letter-spacing:.12em}
.svc-card h3{font-weight:900;font-size:clamp(22px,2.4vw,32px);margin:10px 0 14px}
.svc-card p{font-size:15px;color:#555}
.pillars{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill{background:rgba(31,169,140,.12);color:var(--eco);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px}
.svc-illust{position:absolute;right:-20px;bottom:-20px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--accent-2),var(--accent));opacity:.18}
.svc-sub h3{font-size:22px}
.go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700;color:var(--accent-tx)}
.go .en{font-size:13px}
@media(max-width:820px){.svc-main{grid-template-columns:1fr}.svc-hero-card{grid-row:auto}}

/* ===== Simulator CTA band ===== */
.sim-badge{display:inline-block;background:var(--accent-2);color:#3a2400;font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.sim-mock{background:rgba(255,255,255,.14);border-radius:16px;padding:22px;position:relative;backdrop-filter:blur(4px)}
.sim-mock .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.3);font-size:13px}
.sim-mock .row b{font-family:"Montserrat";font-size:18px}
.btn-white{background:#fff;color:var(--eco);margin-top:8px}
.btn-white:hover{transform:translateY(-2px)}

/* ===== Cases ===== */
.cases{padding:110px 0}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.case-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.35s;text-decoration:none;color:var(--ink)}
.case-card:hover{transform:translateY(-8px)}
.case-thumb{height:170px;background:linear-gradient(135deg,#cfe9e0,#a9d8c8);display:flex;align-items:center;justify-content:center;color:#3a7e6c;font-size:12px;font-weight:700}
.case-body{padding:22px}
.case-cat{font-size:12px;font-weight:700;color:var(--accent-tx)}
.case-card h4{font-size:17px;font-weight:700;margin:8px 0 12px;line-height:1.5}
.case-metrics{display:flex;gap:16px}
.case-metrics div{font-size:12px;color:#777}
.case-metrics b{display:block;font-family:"Montserrat";font-size:20px;color:var(--eco)}
@media(max-width:820px){.case-grid{grid-template-columns:1fr}}

/* ===== News ===== */
.news{padding:0 0 110px}
.news-list{margin-top:36px;border-top:1px solid rgba(43,43,43,.12)}
.news-item{display:flex;gap:22px;align-items:center;padding:20px 6px;border-bottom:1px solid rgba(43,43,43,.12);text-decoration:none;color:var(--ink);transition:.25s}
.news-item:hover{background:rgba(232,112,58,.05);padding-left:16px}
.news-item time{font-family:"Montserrat";font-size:13px;color:#999;min-width:96px}
.news-item .cat{font-size:11px;font-weight:700;color:#fff;background:var(--eco);padding:3px 10px;border-radius:999px;
  white-space:nowrap;flex-shrink:0}/* 全幅で縦折れ禁止（601-719pxでも発生していたためMQ外で恒久化） */
.news-item p{font-size:16px;font-weight:500}

/* ===== Footer ===== */
footer{background:var(--ink);color:#fff;padding:70px 0 40px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.15)}
.foot-top h4{font-family:"Montserrat";font-size:22px;font-weight:800;margin-bottom:14px}
.foot-top h4 b{color:var(--accent-tx)}
.foot-col h5{font-size:13px;color:var(--accent-2);margin-bottom:14px;letter-spacing:.1em}
.foot-col a{display:block;color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;padding:5px 0}
.foot-col a:hover{color:#fff}
.copy{text-align:center;font-size:12px;color:rgba(255,255,255,.5);margin-top:30px;font-family:"Montserrat"}
@media(max-width:760px){.foot-top{grid-template-columns:1fr}}

.section-pad{padding-block:0}
.tint{background:var(--cream-deep)}  /* セクション交互の薄い色背景 */

/* ===== テーマPOP：マルチカラー（[data-theme="pop"] 時のみ。WARMは元の単色デザイン） ===== */
[data-theme="pop"] header.scrolled{background:rgba(255,255,255,.93)}
[data-theme="pop"] .hero-bg{background:
  radial-gradient(circle at 80% 16%,rgba(255,196,46,.55),transparent 42%),
  radial-gradient(circle at 10% 78%,rgba(45,140,255,.42),transparent 46%),
  radial-gradient(circle at 52% 52%,rgba(255,91,160,.30),transparent 50%),
  linear-gradient(120deg,#FFFDFB,#FFF3E9)}
[data-theme="pop"] .orb-1{background:radial-gradient(circle,rgba(255,196,46,.6),transparent 70%)}
[data-theme="pop"] .orb-2{background:radial-gradient(circle,rgba(45,140,255,.5),transparent 70%)}
[data-theme="pop"] .orb-3{background:radial-gradient(circle,rgba(255,91,160,.5),transparent 70%)}
[data-theme="pop"] .stats{background:#23232E}
[data-theme="pop"] .stat:nth-child(1) .num{color:var(--accent-tx)}
[data-theme="pop"] .stat:nth-child(2) .num{color:var(--accent-2)}
[data-theme="pop"] .stat:nth-child(3) .num{color:var(--eco-blue)}
[data-theme="pop"] .stat:nth-child(4) .num{color:var(--pop-pink)}
[data-theme="pop"] .pill:nth-child(1){background:rgba(255,106,43,.14);color:var(--accent-tx)}
[data-theme="pop"] .pill:nth-child(2){background:rgba(45,140,255,.14);color:var(--eco-blue)}
[data-theme="pop"] .pill:nth-child(3){background:rgba(19,194,155,.16);color:var(--eco)}
[data-theme="pop"] .why-card:nth-child(1){border-color:rgba(255,106,43,.32);background:linear-gradient(135deg,#fff,#FFF3EC)}
[data-theme="pop"] .why-card:nth-child(1) .accent-line{background:var(--accent)}
[data-theme="pop"] .why-card:nth-child(2){border-color:rgba(45,140,255,.32);background:linear-gradient(135deg,#fff,#EEF5FF)}
[data-theme="pop"] .why-card:nth-child(2) .accent-line{background:var(--eco-blue)}
[data-theme="pop"] .why-card:nth-child(3){border-color:rgba(19,194,155,.32);background:linear-gradient(135deg,#fff,#EBFBF6)}
[data-theme="pop"] .why-card:nth-child(3) .accent-line{background:var(--eco)}
[data-theme="pop"] .flow-step:nth-child(2) .step-ic{background:linear-gradient(135deg,#FFB36B,var(--accent))}
[data-theme="pop"] .flow-step:nth-child(2) .step-no{color:var(--accent-tx)}
[data-theme="pop"] .flow-step:nth-child(3) .step-ic{background:linear-gradient(135deg,#FFD66B,var(--accent-2))}
[data-theme="pop"] .flow-step:nth-child(3) .step-no{color:#E0A100}
[data-theme="pop"] .flow-step:nth-child(4) .step-ic{background:linear-gradient(135deg,#6FB6FF,var(--eco-blue))}
[data-theme="pop"] .flow-step:nth-child(4) .step-no{color:var(--eco-blue)}
[data-theme="pop"] .flow-step:nth-child(5) .step-ic{background:linear-gradient(135deg,#5FE0C0,var(--eco))}
[data-theme="pop"] .flow-step:nth-child(5) .step-no{color:var(--eco)}
[data-theme="pop"] .news-item:nth-child(1) .cat{background:var(--accent)}
[data-theme="pop"] .news-item:nth-child(2) .cat{background:var(--eco-blue)}
[data-theme="pop"] .news-item:nth-child(3) .cat{background:var(--pop-pink)}
[data-theme="pop"] .case-card:nth-child(1) .case-thumb{background:linear-gradient(135deg,#FFE0C2,#FFB877);color:#9A5A22}
[data-theme="pop"] .case-card:nth-child(2) .case-thumb{background:linear-gradient(135deg,#CFE6FF,#94C4FF);color:#2A5C99}
[data-theme="pop"] .case-card:nth-child(3) .case-thumb{background:linear-gradient(135deg,#CFF3E8,#9FE6CF);color:#1F7E6C}
[data-theme="pop"] .btn-white{color:var(--eco-blue)}

/* テーマ切替ボタン（プロトタイプ用・本番では削除/管理画面化） */

/* ===== Motion enhancements (Vivoo寄せ) ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 8px rgba(232,112,58,.6)}
.orb{position:absolute;border-radius:50%;filter:blur(46px);z-index:-1;will-change:transform;pointer-events:none}
.orb-1{width:440px;height:440px;background:radial-gradient(circle,rgba(244,169,60,.55),transparent 70%);top:4%;right:6%}
.orb-2{width:380px;height:380px;background:radial-gradient(circle,rgba(31,169,140,.5),transparent 70%);bottom:2%;left:2%}
.orb-3{width:280px;height:280px;background:radial-gradient(circle,rgba(232,112,58,.4),transparent 70%);top:42%;left:40%}
.uline{position:relative;display:inline-block}
.uline::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:12px;background:var(--accent-2);opacity:.5;z-index:-1;transform:scaleX(0);transform-origin:left;border-radius:5px}
.uline.drawn::after{transform:scaleX(1);transition:transform .7s cubic-bezier(.7,0,.25,1)}
.ch{display:inline-block;will-change:transform}
.svc-main,.why,.case-grid,.flow{perspective:1100px}
.tilt{transform-style:preserve-3d;will-change:transform}
.flow::after{display:none}
.flow-line{position:absolute;top:62px;left:4%;right:4%;height:3px;z-index:0}
.flow-line span{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 20px);opacity:.5;transform:scaleX(0);transform-origin:left}
@media(max-width:900px){.flow-line{display:none}}

/* ===== 汎用：2カラム / プレースホルダ / FAQ / 最終CTA（サブページ共通） ===== */
.media-ph{border-radius:var(--radius);min-height:300px;background:linear-gradient(135deg,var(--cream-deep),#e6d6c4);display:flex;align-items:center;justify-content:center;color:#a98a72;font-weight:700;font-size:13px;text-align:center;padding:20px}

.faq{max-width:860px;margin-top:44px}
.faq details{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Montserrat";font-size:24px;color:var(--accent-tx);transition:.3s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 22px;color:#555;font-size:15px}

.cta-final{background:var(--ink);color:#fff;padding:90px 0;text-align:center;position:relative;overflow:hidden}
.cta-final h2{font-weight:900;font-size:clamp(26px,3.4vw,42px);line-height:1.45;position:relative}
.cta-final p{margin:18px 0 32px;color:rgba(255,255,255,.8);position:relative}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center;position:relative}
.tel{font-family:"Montserrat";font-weight:800;font-size:clamp(22px,3vw,30px);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.tel small{font-family:"Zen Kaku Gothic Antique";font-size:12px;font-weight:500;color:rgba(255,255,255,.6)}
.tel-ico{width:.85em;height:.85em;display:inline-flex}
.tel-ico svg{width:100%;height:100%}

/* セクション見出しの中央寄せ用 */
.sec-title.center{text-align:center}

/* ===== Paper Shaders 試算背景（GodRays）のマウント要素（paper-sim.jsが描画） ===== */
.paper-sim{position:absolute;inset:0;z-index:0;overflow:hidden}
.paper-sim canvas{width:100%!important;height:100%!important;display:block}
.paper-sim.blend{mix-blend-mode:screen;opacity:.85} /* 写真の上に光線を重ねる用（lp-solar） */

/* ===== Endless marquee（無限スクロール：テキスト帯＆ギャラリー） ===== */
.marquee{overflow:hidden;width:100%}
.marquee__track{display:inline-flex;width:max-content;will-change:transform;animation:marqueeX var(--mq,34s) linear infinite}
.marquee__track.-rev{animation-direction:reverse}
@keyframes marqueeX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* テキスト帯 */
.marquee-band{background:linear-gradient(90deg,#3E86E6,#5A6FF0);color:#fff;padding:38px 0;overflow:hidden;position:relative}
[data-theme="pop"] .marquee-band{background:linear-gradient(90deg,#2D8CFF,#6A5CF0)}
/* 塗りのトーンオントーン（背景より少し明るい同系色）・大きめ・全英語 */
.mq-item{font-family:"Montserrat",sans-serif;font-weight:800;font-size:clamp(36px,6vw,74px);letter-spacing:.01em;padding-right:.5em;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;color:rgba(255,255,255,.42)}
/* ギャラリー2段（逆方向に流れる） */
.gallery{padding:90px 0;overflow:hidden;position:relative}
.gallery .wrap{margin-bottom:46px}
.gallery .row{margin-bottom:18px}
.gallery .row:last-child{margin-bottom:0}
.g-card{flex:0 0 auto;width:300px;height:190px;margin-right:18px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--cream-deep),#dbe7e2);display:flex;align-items:center;justify-content:center;color:#7e9a92;font-size:12px;font-weight:700}
[data-theme="pop"] .g-card:nth-child(3n+1){background:linear-gradient(135deg,#FFE0C2,#FFB877);color:#9A5A22}
[data-theme="pop"] .g-card:nth-child(3n+2){background:linear-gradient(135deg,#CFE6FF,#94C4FF);color:#2A5C99}
[data-theme="pop"] .g-card:nth-child(3n+3){background:linear-gradient(135deg,#CFF3E8,#9FE6CF);color:#1F7E6C}
/* ブラシ装飾（自作・feTurbulenceで筆致のラフさ） */
.brush-svg{display:inline-block;vertical-align:middle;margin-left:.2em}
.marquee__track.is-off{animation-play-state:paused}        /* 画面外で停止（JSのIntersectionObserverが付与） */
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}
/* ※index.htmlのヒーローは min-height:112vh + align-items:center で「初期は渦を全面・波はフォールド下」に調整済（2026-05-31） */

/* ===== 共通：ブランドロゴ／ブランドグラデ／ブランドボタン（全ページ） ===== */
:root{--brand-grad:linear-gradient(95deg,#3E8FD0 0%,#6B46A8 34%,#B0379A 58%,#E8517E 78%,#F2814A 100%)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-img{height:clamp(40px,3.6vw,52px);width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2));transition:.3s}
header.scrolled .brand-img{height:clamp(34px,3vw,44px)}
.brand:hover .brand-img{filter:drop-shadow(0 0 12px rgba(176,55,154,.5))}
.brand-lockup{display:none;align-items:center;gap:11px}
.brand-mark{width:38px;height:38px;flex:0 0 auto}
.brand-word{font-family:"Montserrat";font-weight:800;font-size:22px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.btn-brand{background:var(--brand-grad);color:#fff;box-shadow:0 10px 26px rgba(176,55,154,.4);position:relative;overflow:hidden}
.btn-brand:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-glass{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ===== 共通：ダークなシェーダーページヒーロー（body.darkhero + .page-hero.shaded） ===== */
body.darkhero header:not(.scrolled){background:transparent;box-shadow:none}
.page-hero.shaded{background:#05070d;color:#fff;overflow:hidden}
.page-hero.shaded .hero-bg,.page-hero.shaded .orb{display:none}
.page-hero.shaded .shader-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.page-hero.shaded::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 50% 28%,transparent 42%,rgba(0,0,0,.5))}
.page-hero.shaded .wrap{position:relative;z-index:3}
.page-hero.shaded h1{color:#fff}
.page-hero.shaded .lead{color:rgba(255,255,255,.85)}

/* ===== ②カラフル背景（jiii寄り：明るいセクションに柔らかい面替え＋ブロブ装飾） ===== */
.tint{background:linear-gradient(135deg,#FFE6D2 0%,#FFDCEA 28%,#ECDCFF 60%,#D6EBFF 100%)}
[data-theme="pop"] .tint{background:linear-gradient(135deg,#FFE0C4 0%,#FFD4E6 30%,#E7D9FF 62%,#CFE7FF 100%)}
.message,.strength,.services,.cases,.gallery,.news{position:relative;overflow:hidden}
.message>.wrap,.strength>.wrap,.services>.wrap,.cases>.wrap,.gallery>.wrap,.news>.wrap{position:relative;z-index:1}
/* セクション装飾ブロブ（jiii寄り：彩度高め・はっきりめのブランド色） */
.message::before,.message::after,.strength::before,.strength::after,.services::before,.services::after,.cases::before,.cases::after,.gallery::before,.gallery::after,.news::before,.news::after{
  content:"";position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none;z-index:0}
.message::before{width:36vw;height:36vw;max-width:480px;max-height:480px;background:radial-gradient(circle,rgba(45,140,255,.50),transparent 70%);top:-10%;right:-4%}
.message::after{width:30vw;height:30vw;max-width:400px;max-height:400px;background:radial-gradient(circle,rgba(255,91,160,.42),transparent 70%);bottom:-12%;left:-6%}
.strength::before{width:34vw;height:34vw;max-width:440px;max-height:440px;background:radial-gradient(circle,rgba(138,108,255,.44),transparent 70%);top:-8%;left:-5%}
.strength::after{width:30vw;height:30vw;max-width:400px;max-height:400px;background:radial-gradient(circle,rgba(19,194,155,.42),transparent 70%);bottom:-10%;right:-4%}
.services::before{width:34vw;height:34vw;max-width:440px;max-height:440px;background:radial-gradient(circle,rgba(255,106,43,.46),transparent 70%);top:-9%;left:-6%}
.services::after{width:32vw;height:32vw;max-width:420px;max-height:420px;background:radial-gradient(circle,rgba(19,194,155,.44),transparent 70%);bottom:-11%;right:-5%}
.cases::before{width:36vw;height:36vw;max-width:460px;max-height:460px;background:radial-gradient(circle,rgba(255,91,160,.46),transparent 70%);top:-11%;right:4%}
.cases::after{width:30vw;height:30vw;max-width:400px;max-height:400px;background:radial-gradient(circle,rgba(45,140,255,.42),transparent 70%);bottom:-12%;left:-4%}
.gallery::before{width:32vw;height:32vw;max-width:420px;max-height:420px;background:radial-gradient(circle,rgba(138,108,255,.46),transparent 70%);top:-7%;left:-4%}
.gallery::after{width:28vw;height:28vw;max-width:380px;max-height:380px;background:radial-gradient(circle,rgba(255,106,43,.40),transparent 70%);bottom:-10%;right:-3%}
.news::before{width:30vw;height:30vw;max-width:400px;max-height:400px;background:radial-gradient(circle,rgba(6,182,212,.44),transparent 70%);bottom:-12%;left:28%}
.news::after{width:26vw;height:26vw;max-width:360px;max-height:360px;background:radial-gradient(circle,rgba(138,108,255,.38),transparent 70%);top:-8%;right:-3%}

/* ===== 工程4：アイコン(SVG)・アクセシビリティ・仕上げ ===== */
/* 絵文字アイコン廃止 → data-ico に site.js がLucide系SVGを注入 */
[data-ico]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
[data-ico] svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step-ic{color:#fff;font-size:0}
.step-ic svg{width:26px;height:26px}
.why-ic{color:var(--accent-tx);width:34px;height:34px;font-size:0}
.why-ic svg{width:34px;height:34px}
/* 強みカードのアイコンも3色に揃える（POP時） */
[data-theme="pop"] .why-card:nth-child(2) .why-ic{color:var(--eco-blue)}
[data-theme="pop"] .why-card:nth-child(3) .why-ic{color:var(--eco)}

/* キーボード操作のフォーカス可視化（WCAG） */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #1D6FD6;outline-offset:3px}
.btn{cursor:pointer}

/* 仕上げ：見出しの字間・本文のトーン微調整 */
h2.sec-title{letter-spacing:.01em}
.sec-title .en-sub{opacity:.95}

/* 登場アニメ初期状態（JSで解除）。biscom風にブラー→フォーカス */
.reveal{opacity:0;transform:translateY(52px) scale(.975);filter:blur(6px);will-change:transform,opacity,filter}
/* サブページ（darkhero）は移動量・ブラーを抑えてカードをキビキビ出す（indexは従来どおり除外） */
body.darkhero .reveal{transform:translateY(20px) scale(.99);filter:blur(2px)}
@media(prefers-reduced-motion:reduce){
  .reveal,body.darkhero .reveal{opacity:1;transform:none;filter:none}
  .scroll-cue::after{animation:none}
}

/* ===================================================================== */
/* ④ 固定イリデセント背景（aurora）＋ガラス＋グレイン                        */
/*    2026-07-06: TOP画像（猫ポスター）のパレットに統一                       */
/*    紙白 × 淡イエロー(#F8F800系) × 淡ブルー(#0050E0系) × 猫の温オレンジ      */
/* ===================================================================== */
.aurora{position:fixed;inset:-14vmax;z-index:-3;pointer-events:none;overflow:hidden;
  background:linear-gradient(135deg,#F5F8FD 0%,#FBFCFD 25%,#FCFCFC 49%,#FDF9F2 72%,#FCF8DE 100%)}
[data-theme="pop"] .aurora{background:linear-gradient(135deg,#F3F7FD 0%,#FBFCFD 25%,#FCFCFC 49%,#FDF7EC 72%,#FAF6D3 100%)}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(74px);opacity:.5;will-change:transform}
.aurora .a1{width:62vw;height:62vw;background:radial-gradient(circle,#F9F9F9,transparent 66%);top:-14%;left:-10%;animation:auf1 18s ease-in-out infinite}
.aurora .a2{width:54vw;height:54vw;background:radial-gradient(circle,#AECBF2,transparent 66%);top:4%;right:-12%;animation:auf2 22s ease-in-out infinite}
.aurora .a3{width:58vw;height:58vw;background:radial-gradient(circle,#F6ECA3,transparent 66%);bottom:-16%;right:2%;animation:auf3 20s ease-in-out infinite}
.aurora .a4{width:48vw;height:48vw;background:radial-gradient(circle,#BFDCF5,transparent 66%);bottom:-10%;left:-8%;animation:auf4 16s ease-in-out infinite}
/* カーソル追従（site.jsが --mx/--my をゆっくり更新）。各ブロブを別方向・別量に動かして“面”をモーフィング。色は不変。
   translate プロパティはキーフレームの transform(ドリフト/スケール)と合成される。 */
.aurora .a1{translate:calc(var(--mx,0)*1px) calc(var(--my,0)*1px)}
.aurora .a2{translate:calc(var(--mx,0)*-0.7px) calc(var(--my,0)*-0.5px)}
.aurora .a3{translate:calc(var(--mx,0)*0.55px) calc(var(--my,0)*-0.95px)}
.aurora .a4{translate:calc(var(--mx,0)*-1.1px) calc(var(--my,0)*0.7px)}
@keyframes auf1{0%{transform:translate(0,0) scale(1.04)}25%{transform:translate(7vw,5vh) scale(1.13)}50%{transform:translate(11vw,-3vh) scale(1.06)}75%{transform:translate(4vw,-8vh) scale(1.15)}100%{transform:translate(0,0) scale(1.04)}}
@keyframes auf2{0%{transform:translate(0,0) scale(1.06)}25%{transform:translate(-8vw,6vh) scale(1.12)}50%{transform:translate(-12vw,-2vh) scale(1.05)}75%{transform:translate(-3vw,9vh) scale(1.14)}100%{transform:translate(0,0) scale(1.06)}}
@keyframes auf3{0%{transform:translate(0,0) scale(1.05)}25%{transform:translate(-7vw,-6vh) scale(1.15)}50%{transform:translate(6vw,-10vh) scale(1.07)}75%{transform:translate(9vw,-3vh) scale(1.13)}100%{transform:translate(0,0) scale(1.05)}}
@keyframes auf4{0%{transform:translate(0,0) scale(1.03)}25%{transform:translate(8vw,-5vh) scale(1.12)}50%{transform:translate(2vw,8vh) scale(1.06)}75%{transform:translate(-6vw,4vh) scale(1.14)}100%{transform:translate(0,0) scale(1.03)}}
/* グレイン（質感）。jiiiのざらつきを再現 */
.aurora::after{content:"";position:absolute;inset:0;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
/* 明るいセクションを透明化して aurora を透かす（個別ブロブ・tint面は廃止） */
.idx .message,.idx .strength,.idx .services,.idx .cases,.idx .gallery,.idx .news{background:transparent}
.idx .tint{background:transparent}
.idx .message::before,.idx .message::after,.idx .strength::before,.idx .strength::after,
.idx .services::before,.idx .services::after,.idx .cases::before,.idx .cases::after,
.idx .gallery::before,.idx .gallery::after,.idx .news::before,.idx .news::after{display:none}

/* ダーク↔明 の境界は「波」で仕切る（フェード/別色の波帯は廃止）。
   ダークセクション自体の下端を波形にクリップ＝シェーダーの実色のまま波打ち、
   波の下は aurora が透ける（色の段差なし）。 */
.idx .idx-hero,[data-theme="pop"] .idx .idx-hero{background:var(--hero-dark)}
.idx .idx-hero,.idx .stats-split,.idx .sim-section{
  -webkit-clip-path:url(#waveBottom);clip-path:url(#waveBottom)}
.idx .message,.idx .strength,.idx .cases{position:relative}

/* リンク付きボックス：ホバーで内部が渦シェーダーに変わる演出 */
.card-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .5s ease;pointer-events:none;border-radius:inherit;display:block}
.svc-card>*:not(.card-fx):not(.svc-illust){position:relative;z-index:1}
.svc-card.fx-on .card-fx,.fx-btn.fx-on .card-fx{opacity:1}
/* 文字視認性のための控えめな暗scrim（canvasより上・本文より下） */
.svc-card.fx-on::after,.fx-btn.fx-on::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,26,.18),rgba(8,12,26,.34))}
.svc-card.fx-on .svc-illust{opacity:0}
.svc-card.fx-on,.svc-card.fx-on h3,.svc-card.fx-on p,.svc-card.fx-on .svc-tag,.svc-card.fx-on .go{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.svc-card.fx-on .go .en{color:#fff}
.svc-card.fx-on .pill{background:rgba(255,255,255,.20);color:#fff;border:1px solid rgba(255,255,255,.35)}
.svc-card.fx-on{border-color:rgba(255,255,255,.35)}
/* シミュCTAボタン */
.fx-btn{position:relative;overflow:hidden}
.fx-btn .btn-label{position:relative;z-index:1;transition:color .4s}
.fx-btn.fx-on .btn-label{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4)}
/* MESSAGE：ほぼ全画面の余白を持たせ、内容を縦中央に */
.idx .message{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0}
.idx .message>.wrap{width:100%}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}

/* ===== メッシュ背景（Paper Shaders）共有コンポーネント。実体は assets/mesh-bg.js が生成 ===== */
.mesh-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0e1c33}
.mesh-bg .mb{position:absolute;inset:0}
.mesh-bg .mb canvas{width:100%!important;height:100%!important;display:block}
.mesh-bg .mb-base{filter:contrast(1.22) saturate(1.08)} /* 境目をくっきり */
.mesh-bg .mb-glow{mix-blend-mode:screen;opacity:.42}
.mesh-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.26),rgba(5,7,13,.08) 38%,rgba(5,7,13,.2) 72%,rgba(5,7,13,.46)),
  radial-gradient(110% 85% at 50% 30%,transparent 42%,rgba(5,7,13,.34) 88%)}

/* ===================================================================== */
/* ⑤ 仕上げ：モバイル対応 / アクセシビリティ / タイポgrafi / コントラスト   */
/*    （追記ブロック。既存の色・装飾・デスクトップ表示は変更しない）        */
/* ===================================================================== */

/* --- アクセシビリティ：本文へスキップリンク（focus時のみ表示） --- */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:1000}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;overflow:visible;
  padding:12px 20px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);text-decoration:none;outline:3px solid var(--eco-blue);outline-offset:2px}

/* --- タイポグラフィ（見た目変更は保留：既存デザイン維持を優先） --- */
/* 英字ディスプレイ書体(Space Grotesk)の導入・見出し字詰め・msg-title行間は、
   index.html の見た目を変えるため一旦見送り。書体は後日コピー上で比較提案する。
   ※ 等幅数字(tabular-nums)だけは静止時不可視・カウントアップの揺れ防止の品質改善のため残す。 */
.num,.stat .num,.stat-row .num{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ===================================================================== */
/* モバイルドロワー（バーガーメニュー）                                    */
/*  契約：body.nav-open で nav.main / .head-cta を右からスライドインの      */
/*  全画面パネル化。閉時は画面外へ transform。背景オーバーレイ＋×アニメ。   */
/*  デスクトップ（>900px）では一切発動しない。                              */
/*  ※バーガー基本形(.burger / .burger span)はファイル上部に集約済み。       */
/* ===================================================================== */
@media(max-width:900px){
  /* バーガー表示（button.burger 化に対応：見た目はそのまま） */
  .burger{display:flex;background:transparent;border:none;padding:6px;z-index:1210;position:relative}
  .burger span{transition:transform .3s ease,opacity .25s ease}

  /* 通常時：nav と CTA は画面外の全画面パネルとして待機 */
  nav.main,.head-cta{
    display:flex !important;flex-direction:column;
    position:fixed;top:0;right:0;width:min(86vw,360px);
    margin:0;z-index:1200;
    transform:translateX(110%);transition:transform .42s cubic-bezier(.7,0,.25,1);
    -webkit-overflow-scrolling:touch}
  nav.main{
    height:100dvh;padding:96px 28px 24px;gap:6px;
    background:#0b1220;
    overflow-y:auto;align-items:stretch}
  .head-cta{
    height:auto;top:auto;bottom:0;
    padding:0 28px calc(28px + env(safe-area-inset-bottom)) 28px;
    background:#0b1220;gap:12px}

  /* ドロワー内リンク：縦積み・大きめタップ領域（48px+）・ダーク地で白文字 */
  nav.main a{
    color:#fff;font-size:18px;font-weight:700;
    min-height:52px;display:flex;align-items:center;
    padding:8px 4px;border-bottom:1px solid rgba(255,255,255,.12)}
  nav.main a::after{display:none}
  nav.main a.sim{color:#06b6d4}
  nav.main .mega-desc{display:none}/* 説明書きはドロワーでは冗長なので非表示（デスクトップのメガメニューでは表示・2026-07-09） */
  .head-cta .btn{width:100%;justify-content:center;min-height:50px;font-size:15px;white-space:normal}

  /* 開いた状態：パネルをスライドイン */
  body.nav-open nav.main,
  body.nav-open .head-cta{transform:translateX(0)}

  /* CTAはJS（site.js ドロワー契約）でnav内・最終リンク直下へ移動される。
     ドロワー内では固定パネルをやめ通常フローに（メニューと一緒にスクロール・覆いかぶさりゼロ／2026-07-11） */
  nav.main .head-cta{position:static;transform:none;width:auto;height:auto;
    padding:20px 0 calc(10px + env(safe-area-inset-bottom));margin:8px 0 0;
    background:none;flex-direction:column;gap:12px;z-index:auto;transition:none}
  body.nav-open{overflow:hidden}

  /* 背景オーバーレイ（パネルより下・本文より上） */
  body.nav-open::before{
    content:"";position:fixed;inset:0;z-index:1150;
    background:rgba(5,7,13,.55);backdrop-filter:blur(2px);
    animation:navOverlayIn .3s ease both}
  /* ヘッダー(z:100)がスタッキングコンテキストを作るため、内包されるドロワー(z:1200)がルート階層では100相当となり
     オーバーレイ(z:1150)に覆われ暗く+blurが掛かる不具合 → 開いている間だけヘッダーごと持ち上げる（2026-07-09） */
  /* さらに header.scrolled の backdrop-filter は fixed子孫（nav.main/.head-cta）のcontaining blockを
     ヘッダー自身に変えてしまい、スクロール後に開くとドロワーが崩れる（CTAが画面外 top:-62px 等）
     → 開いている間はヘッダーのblurを外す（2026-07-11） */
  body.nav-open header{z-index:1300;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* バーガー → ×（開時アニメ） */
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  /* ダークパネル(#0b1220)上では × を白く（inkだと1.24:1でほぼ不可視だった） */
  body.nav-open .burger span{background:#fff}
}
@keyframes navOverlayIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  nav.main,.head-cta{transition:none}
  body.nav-open::before{animation:none}
}

/* ===================================================================== */
/* スマートフォン最適化（スペーシングのみ。色・構造・装飾は不変）          */
/*  index.html 等のインライン@mediaに勝つため必要箇所のみ !important       */
/* ===================================================================== */
@media(max-width:600px){
  .wrap{padding-inline:16px}

  /* お知らせ：flex1行だとタグが圧縮されて縦折れするため2段グリッドに（日付|タイトル／タグ|・2026-07-09） */
  .news-item{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;
    gap:6px 14px;align-items:start;padding:16px 6px}
  .news-item time{grid-column:1;grid-row:1;min-width:0}
  .news-item .cat{grid-column:1;grid-row:2;justify-self:start;padding:3px 9px}
  .news-item p{grid-column:2;grid-row:1 / span 2;font-size:14.5px}

  /* 各セクションの縦paddingを圧縮 */
  .strength{padding:64px 0 48px}
  .services{padding:64px 0}
  .cases{padding:64px 0}
  .news{padding:0 0 64px}
  .stats{padding:48px 0}
  .gallery{padding:56px 0}
  .page-hero{padding:120px 0 48px}
  .cta-final{padding:60px 0}

  /* MESSAGE：全画面高をやめて圧縮 */
  .idx .message{min-height:auto !important;padding:64px 0 !important}

  /* ヒーロー（idx）：SVH基準にして余白圧縮、見出し読みやすく */
  .idx-hero{min-height:100svh !important}

  /* STATS（縦積み実績）の縦padding圧縮 */
  .stats-split{padding:64px 0 96px !important}

  /* シミュ見出しの抑え */
  .sim-h{line-height:1.24}

  /* ギャラリーカード：SPでは小さめ・比率固定 */
  .g-card{width:clamp(180px,62vw,240px);height:auto;aspect-ratio:16/10;margin-right:12px}

  /* マーキー文字の下限を縮小（はみ出し抑制） */
  .mq-item{font-size:clamp(30px,8vw,104px) !important}

  /* TOPへ戻るボタン：小さく・端に寄せる（虹色リング装飾はそのまま縮小） */
  .scrolltop{width:76px !important;height:76px !important;right:16px !important;bottom:16px !important}
  /* テーマ切替ボタンとの重なり回避（idxは左下にあるため位置は維持しつつ縮小） */

  /* simulator等：結果グリッドを1列に（共通フォールバック） */
  .result-grid{grid-template-columns:1fr}

  /* 見出し・本文の余白を少し詰める */
  h2.sec-title{line-height:1.34}
}

@media(max-width:400px){
  .wrap{padding-inline:14px}
  .scrolltop{width:72px !important;height:72px !important}
}

/* ===================================================================== */
/* 事業紹介メガメニュー（追記のみ／既存ルール・色・装飾は不変）            */
/*  契約：.has-mega（nav内ラッパ）/ .mega-caret（▼）/ .mega-panel        */
/*       （ドロップダウン）/ .mega-link（子リンク）。site.js と一致。       */
/* ===================================================================== */

/* --- デスクトップ（>900px）：ホバー/フォーカスで開く白カードのドロップ --- */
@media(min-width:901px){
  .has-mega{position:relative}

  /* ▼カレット：トリガー文字の右に小さく。:hover/:focus-within で反転 */
  .mega-caret{
    display:inline-block;margin-left:6px;font-size:.7em;line-height:1;
    transition:transform .25s ease;will-change:transform}
  .has-mega:hover .mega-caret,
  .has-mega:focus-within .mega-caret{transform:rotate(180deg)}

  /* パネル：白カード・2カラムグリッド。初期は不可視＆少し下にオフセット */
  /* ヘッダーバーと被らないよう下端より下げる（リンク下〜ヘッダー下=約29px＋小さなギャップ） */
  .mega-panel{
    position:absolute;top:calc(100% + 34px);left:0;min-width:520px;
    display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;
    padding:20px 24px;
    background:#fff;border-radius:16px;
    box-shadow:0 20px 50px rgba(40,30,20,.16);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:.25s;z-index:400}
  /* 透明ブリッジ：リンクとパネルの間の死角を埋め、ホバーが途切れないようにする */
  .has-mega::after{content:"";position:absolute;top:100%;left:0;width:100%;height:38px}

  /* 開く：hover と キーボードfocus(focus-within)の両対応 */
  .has-mega:hover .mega-panel,
  .has-mega:focus-within .mega-panel{
    opacity:1;visibility:visible;transform:translateY(0)}

  /* グループ見出し：小さめ・英字風（既存 .en / .en-sub のトーンに合わせる） */
  .mega-head{
    grid-column:1 / -1;
    font-family:"Montserrat",sans-serif;font-size:12px;font-weight:700;
    color:var(--accent-tx);letter-spacing:.16em;text-transform:uppercase;
    margin:6px 4px 2px;opacity:.95}
  .mega-head:first-child{margin-top:0}

  /* 子リンク：濃色文字・太字。ホバーで薄い面＋アクセント色 */
  .mega-link{
    display:block;padding:10px 12px;border-radius:10px;
    color:var(--ink);text-decoration:none;font-weight:700;
    transition:.2s}
  .mega-link:hover,
  .mega-link:focus-visible{background:rgba(0,0,0,.04);color:var(--accent-tx)}
  /* リンク内の補足説明：小さく薄い色 */
  .mega-link .mega-label{display:block}
  .mega-link .mega-desc{
    display:block;margin-top:2px;
    font-size:12px;font-weight:500;color:#888;letter-spacing:0}

  /* darkhero（ヒーロー上・ヘッダー白文字）でもパネルは白カードのまま可読。
     パネル内の文字は濃色トークンを明示し、ヘッダーの白文字継承を上書き。 */
  body.darkhero header:not(.scrolled) .mega-panel{
    background:#fff;box-shadow:0 20px 50px rgba(40,30,20,.16)}
  /* nav.main を入れて詳細度を上げ、ヘッダー白文字ルール(nav.main a)に勝たせる（トップ=未スクロール時に白消え防止） */
  body.darkhero header:not(.scrolled) nav.main .mega-link{color:var(--ink)}
  body.darkhero header:not(.scrolled) nav.main .mega-link:hover,
  body.darkhero header:not(.scrolled) nav.main .mega-link:focus-visible{color:var(--accent-tx)}
  body.darkhero header:not(.scrolled) .mega-link .mega-desc{color:#888}
  body.darkhero header:not(.scrolled) .mega-head{color:var(--accent-tx)}
  /* index は body.idx 経由で白文字ルール(.idx header:not(.scrolled) nav.main a)が当たるため、同等の上書きを .idx でも用意（白カードに白文字＝消え を防止） */
  .idx header:not(.scrolled) nav.main .mega-link{color:var(--ink)}
  .idx header:not(.scrolled) nav.main .mega-link:hover,
  .idx header:not(.scrolled) nav.main .mega-link:focus-visible{color:var(--accent-tx)}
  .idx header:not(.scrolled) nav.main .mega-link .mega-desc{color:#888}
  /* ホバー下線(::after)も、白カード上で白消えしないようトップ未スクロール時はアクセント色に */
  .idx header:not(.scrolled) nav.main .mega-link::after,
  body.darkhero header:not(.scrolled) nav.main .mega-link::after{background:var(--accent)}
}

/* --- モバイル（<=900px・ドロワー内）：インライン展開・ダーク地で白文字 --- */
@media(max-width:900px){
  /* パネルは静的に開いた状態でドロワーに積む（白カード装飾は外す） */
  .mega-panel{
    position:static;
    opacity:1 !important;visibility:visible !important;transform:none;
    display:block;min-width:0;
    background:transparent;box-shadow:none;border-radius:0;
    padding:4px 0 4px 12px}
  /* ドロワーがダーク地のため子リンクは白文字・下線リスト風 */
  .mega-link{
    display:block;color:#fff;text-decoration:none;font-weight:700;
    padding:10px 4px}
  .mega-link .mega-label{display:block}
  .mega-link .mega-desc{
    display:block;margin-top:2px;
    font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
  .mega-head{
    font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;
    color:var(--accent-2);letter-spacing:.14em;text-transform:uppercase;
    padding:8px 4px 2px}
  /* カレットはドロワーでは不要（常時展開のため非表示） */
  .mega-caret{display:none}
}

/* --- モーション配慮：transition を無効化 --- */
@media(prefers-reduced-motion:reduce){
  .mega-panel,.mega-caret{transition:none}
}

/* ===================================================================== */
/* ①世界観：サブページ(body.darkhero)を「aurora のみ」に統一（2026-06-01） */
/*  ・index(body.idx)には一切影響しない（スコープが body.darkhero のため）。 */
/*  ・ダーク渦シェーダーのヒーロー → aurora 上のクリーンな明るいヒーローへ。 */
/*  ・このブロックを丸ごと削除＋site.jsのaurora注入を外せば完全に元へ戻る＝可逆。*/
/*  ・aurora 本体(.aurora)は site.js が body.darkhero に注入（既存CSSを流用）。 */
/* ===================================================================== */
body.darkhero{background:transparent}
/* ヒーロー：ダークシェーダーを外し、aurora 上の明るいヒーローに */
body.darkhero .page-hero.shaded{background:transparent;color:var(--ink)}
body.darkhero .page-hero.shaded .shader-canvas{display:none}
body.darkhero .page-hero.shaded::after{display:none}
body.darkhero .page-hero.shaded h1{color:var(--ink)}
body.darkhero .page-hero.shaded .lead{color:#555}
/* 明るいセクションを透過させ aurora を透かす（index と同じ手法） */
body.darkhero .message,body.darkhero .strength,body.darkhero .services,
body.darkhero .cases,body.darkhero .gallery,body.darkhero .news{background:transparent}
body.darkhero .tint{background:transparent}
/* セクションごとの装飾ブロブを無効化（index と同様）。これが overflow:hidden で
   各セクション境界にクリップされ「背景が切れて次が出る」段差の原因だったため、
   サブページでは全面 aurora をシームレスに見せる。 */
body.darkhero .message::before,body.darkhero .message::after,
body.darkhero .strength::before,body.darkhero .strength::after,
body.darkhero .services::before,body.darkhero .services::after,
body.darkhero .cases::before,body.darkhero .cases::after,
body.darkhero .gallery::before,body.darkhero .gallery::after,
body.darkhero .news::before,body.darkhero .news::after{display:none}
/* ヘッダー：ヒーローが明るくなったので、未スクロール時も文字をダークに戻す */
body.darkhero header:not(.scrolled){background:transparent}
body.darkhero header:not(.scrolled) nav.main a{color:var(--ink)}
body.darkhero header:not(.scrolled) nav.main a::after{background:var(--accent)}
body.darkhero header:not(.scrolled) nav.main a.sim{color:var(--eco)}
body.darkhero header:not(.scrolled) .btn-ghost{border-color:var(--ink);color:var(--ink)}
body.darkhero header:not(.scrolled) .btn-ghost:hover{background:var(--ink);color:#fff}

/* ===================================================================== */
/* ③見出しディスプレイ書体の「試し」（可逆・商用可）                        */
/*  ・サブページの英字アクセント(.en-sub / .crumb.en)を Montserrat →        */
/*    Space Grotesk(OFL=商用利用可・既に読込済) に。和文は Zen Kaku のまま。  */
/*  ・index は対象外。気に入らなければこのブロック削除で即・元に戻る。        */
/* ===================================================================== */
body.darkhero .en-sub,
body.darkhero .crumb.en{font-family:"Space Grotesk","Montserrat",sans-serif}

/* ===================================================================== */
/* 可読性 微調整（2026-06-03・[[監修/見やすいホームページにするために]]準拠）  */
/*  デザイン・配色・レイアウトは不変。薄すぎる二次情報のコントラストと、      */
/*  小さすぎる補足だけを底上げ（読みやすさのみ。重要本文は元から#555で据置）。 */
/* ===================================================================== */
.case-metrics div{color:#6b6b6b}          /* #777→ 事例の削減率/回収年の視認性UP（AA寄り） */
.news-item time{color:#717171}            /* #999→ お知らせ日付を読みやすく */
.foot-col a{color:rgba(255,255,255,.9)}   /* フッターリンク（押せる要素）を明るく */
.foot-col a:hover{color:#fff}
.flow-step p{line-height:1.7}             /* 導入フロー説明の行間にゆとり */

/* ドロワー展開中の文字色強制（2026-07-09）：.idx/.darkhero の「ヘッダー透過時リンク色（ink）」が
   ダークパネル(#0b1220)へ漏れて黒地黒文字になるため、header の scrolled 両状態を明示して打ち勝つ */
@media(max-width:900px){
  body.nav-open header.scrolled nav.main a,
  body.nav-open header:not(.scrolled) nav.main a{color:#fff}
  body.nav-open header.scrolled nav.main a.sim,
  body.nav-open header:not(.scrolled) nav.main a.sim{color:#06b6d4}
  body.nav-open header.scrolled .head-cta .btn-ghost,
  body.nav-open header:not(.scrolled) .head-cta .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
  body.nav-open header.scrolled .head-cta .btn-ghost:hover,
  body.nav-open header:not(.scrolled) .head-cta .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
}

/* ===================================================================== */
/* paint-mark：見出しの筆塗りハイライト（2026-07-06・opt-in・.ulineと共存）    */
/*  使い方: <span class="accent paint-mark" data-paint="yellow|blue|orange|green">語句</span> */
/*  SVG本体は site.js が注入。スクロールで筆が塗り進む（reduced-motionは即塗り）*/
/* ===================================================================== */
.paint-mark{position:relative;display:inline-block}
.paint-mark .pm-svg{position:absolute;left:-.22em;bottom:-.1em;width:calc(100% + .44em);height:.92em;
  z-index:-1;transform:rotate(-1.4deg);pointer-events:none}/* z-index:-1 は .uline::after と同じ実証済みパターン */
@media(prefers-reduced-motion:reduce){.paint-mark .pm-reveal{stroke-dashoffset:0!important}}

/* ===================================================================== */
/* paint-field：Aurora上のペンキ背景（2026-07-08・site.jsが .aurora ページに生成） */
/*  z-index -2 ＝ aurora(-3) の上・本文(0〜)の下。横見切れは overflow:hidden で吸収 */
/* ===================================================================== */
.paint-field{position:absolute;top:0;left:0;width:100%;overflow:hidden;
  z-index:-2;pointer-events:none}
.paint-field .pf-splash{position:absolute;display:block;height:auto;will-change:transform}