/* ============================================================
   小田警備保障 ｜ Design Tokens
   スモークブルー4色 ＋ 紙の下地（V4 鉛筆）
   #284155 / #597594 / #edd8d2 / #d2dcdc
   ============================================================ */
:root{
  /* 面：紙 */
  --navy-900:#F4F7F7;
  --navy-850:#FFFFFF;
  --navy-800:#EDF2F2;
  --navy-750:#E5EBEB;
  --navy-700:#D2DCDC;
  --navy-600:#C0CFCF;

  /* 常に暗い部分（ヘッダー・ヒーロー・フッター） */
  --ink-900:#132029;
  --ink-800:#1B2E3E;
  --ink-700:#284155;

  /* アクセント（濃→淡） */
  --gold-300:#1B2E3E;
  --gold-400:#284155;
  --gold-500:#597594;
  --gold-600:#8CA3BC;

  /* 暗い面の上で使う淡い色 */
  --sand:#edd8d2;
  --sand-deep:#D9B9AF;
  --td:#EDF1F2;
  --td-sub:#B9C7CF;

  --text:#22313B;
  --text-soft:#4C5E69;
  --muted:#71838C;

  --line:rgba(19,32,41,.13);
  --line-gold:rgba(40,65,85,.24);

  --ff-jp:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --ff-serif:"Noto Serif JP","Hiragino Mincho ProN",serif;
  --ff-en:"Outfit","Noto Sans JP",sans-serif;

  --ease:cubic-bezier(.34,1.42,.4,1);
  --header-h:84px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  background:var(--navy-900);
  color:var(--text);
  font-family:var(--ff-jp);
  font-size:17px;
  line-height:1.95;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold-500);color:var(--navy-900)}

/* 背景の微細グリッド（全体） */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 100%);
}

.wrap{width:min(1240px,88%);margin-inline:auto;position:relative;z-index:1}
.section{padding:clamp(88px,9vw,148px) 0;position:relative}

/* ---------- 共通パーツ ---------- */
.sec-head{margin-bottom:clamp(40px,5vw,68px)}
.sec-label{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--ff-en);font-weight:300;font-size:12.5px;
  letter-spacing:.32em;color:var(--gold-500);text-transform:uppercase;margin-bottom:18px;
}
.sec-label::before{content:'';width:38px;height:1px;background:linear-gradient(90deg,var(--gold-600),var(--gold-400))}
.sec-title{
  font-family:var(--ff-serif);font-weight:600;
  font-size:clamp(27px,3.4vw,42px);line-height:1.55;letter-spacing:.05em;
}
.sec-title em{font-style:normal;color:var(--gold-400)}
.sec-lead{margin-top:22px;color:var(--text-soft);font-size:16.5px;max-width:62ch}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-gold) 30%,var(--line-gold) 70%,transparent)}

/* ---------- ボタン ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:19px 40px;font-size:16px;font-weight:500;letter-spacing:.1em;
  border:1px solid var(--gold-500);border-radius:16px;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn:hover{transform:translateY(-3px) rotate(-.4deg)}
.btn .arw{width:22px;height:1px;background:currentColor;position:relative;transition:width .45s var(--ease)}
.btn .arw::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arw{width:34px}

/* ゴールド塗り */
.btn-gold{background:linear-gradient(120deg,var(--gold-600),var(--gold-400) 55%,var(--gold-600));color:var(--navy-900);font-weight:700;border-color:transparent}
.btn-gold::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.75) 48%,transparent 76%);
  transform:translateX(-120%);transition:transform .85s var(--ease);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(237,216,210,.75)}
.btn-gold:hover::before{transform:translateX(120%)}

/* 枠線 → 塗り */
.btn-line{color:var(--gold-300)}
.btn-line::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.btn-line:hover{color:var(--navy-900);transform:translateY(-3px)}
.btn-line:hover::before{transform:scaleX(1)}

/* クリック波紋 */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .7s var(--ease) forwards;pointer-events:none;z-index:2}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ============================================================
   ヘッダー
   ============================================================ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));box-shadow:0 0 12px rgba(237,216,210,.7)}

.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),height .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.header.scrolled{height:70px;background:rgba(5,8,15,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line-gold)}
.header-inner{width:min(1440px,94%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo-mark{width:40px;height:44px;flex:none;position:relative}
.logo-mark svg{width:100%;height:100%;display:block}
.logo-mark-img{width:auto;height:40px}
.logo-mark-img img{height:100%;width:auto;display:block;border-radius:3px}
.logo-txt strong{display:block;font-family:var(--ff-en);font-size:9.5px;font-weight:300;letter-spacing:.06em;line-height:1.35;white-space:nowrap;color:var(--gold-500)}
.logo-txt span{display:block;font-family:var(--ff-serif);font-size:18px;font-weight:600;letter-spacing:.03em;white-space:nowrap}

.gnav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.gnav>li{position:relative}
.gnav>li>a{
  display:flex;align-items:center;gap:7px;padding:14px 17px;font-size:14.5px;font-weight:500;letter-spacing:.09em;position:relative;white-space:nowrap;
}
.gnav>li>a::after{
  content:'';position:absolute;left:17px;right:17px;bottom:8px;height:1px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.gnav>li:hover>a::after{transform:scaleX(1);transform-origin:left}
.gnav>li:hover>a{color:var(--gold-300)}
.gnav .caret{width:5px;height:5px;border-right:1px solid var(--gold-500);border-bottom:1px solid var(--gold-500);transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease)}
.gnav>li:hover .caret{transform:rotate(225deg) translateY(-2px)}

/* ドロップダウン */
.drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,14px);
  min-width:270px;padding:14px;opacity:0;visibility:hidden;
  background:rgba(8,13,26,.96);backdrop-filter:blur(18px);
  border:1px solid var(--line-gold);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.drop.wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gnav>li:hover .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:block;padding:11px 16px;font-size:14px;color:var(--text-soft);position:relative;transition:color .3s,background .3s,padding-left .3s}
.drop a::before{content:'';position:absolute;left:6px;top:50%;width:0;height:1px;background:var(--gold-400);transition:width .35s var(--ease)}
.drop a:hover{color:var(--gold-300);background:rgba(237,216,210,.07);padding-left:26px}
.drop a:hover::before{width:12px}

.head-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.tel-block{text-align:right;line-height:1.35;white-space:nowrap}
.tel-block .lb{font-family:var(--ff-en);font-size:9.5px;letter-spacing:.24em;color:var(--muted);white-space:nowrap}
.tel-block .no{font-family:var(--ff-en);font-size:21px;font-weight:400;letter-spacing:.05em;color:var(--gold-300);white-space:nowrap}
.btn-login{
  display:inline-flex;align-items:center;gap:10px;padding:13px 24px;font-size:13.5px;font-weight:500;letter-spacing:.1em;
  border:1px solid var(--line-gold);position:relative;overflow:hidden;color:var(--gold-300);white-space:nowrap;flex-shrink:0;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn-login svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4}
.btn-login::before{content:'';position:absolute;inset:0;background:var(--gold-500);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn-login:hover{color:var(--navy-900);border-color:var(--gold-400)}
.btn-login:hover::before{transform:translateY(0)}
.btn-login span{position:relative;z-index:1}

.burger{display:none;width:46px;height:46px;position:relative;flex:none}
.burger i{position:absolute;left:11px;width:24px;height:1.5px;background:var(--gold-300);transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px}
.burger i:nth-child(3){top:29px}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* モバイルメニュー */
.mnav{
  position:fixed;inset:0;z-index:99;background:rgba(5,8,15,.98);backdrop-filter:blur(10px);
  padding:calc(var(--header-h) + 24px) 7% 60px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
body.menu-open .mnav{opacity:1;visibility:visible}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;padding:20px 4px;font-family:var(--ff-serif);font-size:19px;letter-spacing:.1em;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:'+';color:var(--gold-500);font-size:20px;font-family:var(--ff-en)}
.mnav details[open] summary::after{content:'−'}
.mnav details ul{padding:0 4px 18px}
.mnav details ul a{display:block;padding:10px 0 10px 18px;font-size:15px;color:var(--text-soft);border-left:1px solid var(--line-gold)}
.mnav .m-single{display:block;padding:20px 4px;font-family:var(--ff-serif);font-size:19px;letter-spacing:.1em;border-bottom:1px solid var(--line)}
.mnav .m-cta{margin-top:34px;display:grid;gap:14px}
.mnav .m-cta .btn{width:100%}

/* ============================================================
   ヒーロー：レーダー
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 42%,rgba(30,48,79,.85),transparent 60%),
    radial-gradient(90% 80% at 12% 88%,rgba(20,32,56,.7),transparent 62%),
    linear-gradient(165deg,var(--ink-800) 0%,var(--ink-900) 55%,#0C1620 100%);
}
/* 斜めの光 */
.hero-diagonal{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-diagonal i{position:absolute;top:-30%;height:160%;width:1px;background:linear-gradient(180deg,transparent,var(--line-gold),transparent);transform:rotate(14deg);opacity:.55}
.hero-diagonal i:nth-child(1){left:22%}
.hero-diagonal i:nth-child(2){left:26%;opacity:.25}
.hero-diagonal i:nth-child(3){right:16%;opacity:.3}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(237,216,210,.10),transparent 68%);
  transform:translate(-50%,-50%);transition:left .8s var(--ease),top .8s var(--ease);left:70%;top:45%}

/* レーダー本体 */
.radar{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(96vh,860px);aspect-ratio:1;pointer-events:none;
}
.radar-core{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(30,48,79,.5) 0%,rgba(12,19,34,.25) 55%,transparent 72%)}
.ring{position:absolute;border:1px solid rgba(237,216,210,.16);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.ring.r1{width:26%;height:26%}
.ring.r2{width:48%;height:48%}
.ring.r3{width:70%;height:70%}
.ring.r4{width:92%;height:92%;border-color:rgba(237,216,210,.24)}
.ring.pulse{animation:ringPulse 4.5s var(--ease) infinite}
@keyframes ringPulse{
  0%{transform:translate(-50%,-50%) scale(.28);opacity:0}
  25%{opacity:.55}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.cross{position:absolute;top:50%;left:50%;background:rgba(237,216,210,.13)}
.cross.h{width:92%;height:1px;transform:translate(-50%,-50%)}
.cross.v{height:92%;width:1px;transform:translate(-50%,-50%)}
.cross.d1{width:92%;height:1px;transform:translate(-50%,-50%) rotate(45deg)}
.cross.d2{width:92%;height:1px;transform:translate(-50%,-50%) rotate(-45deg)}
.tick{position:absolute;top:50%;left:50%;width:46%;height:1px;transform-origin:0 50%;pointer-events:none}
.tick::after{content:'';position:absolute;right:0;width:10px;height:1px;background:rgba(237,216,210,.35)}

.sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(237,216,210,0) 0deg,
    rgba(237,216,210,0) 296deg,
    rgba(237,216,210,.03) 332deg,
    rgba(237,216,210,.09) 352deg,
    rgba(237,216,210,.20) 359.3deg,
    rgba(237,216,210,0) 360deg);
  animation:sweep 5.5s linear infinite;
  mask-image:radial-gradient(circle,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 52%,transparent 88%);
}
@keyframes sweep{to{transform:rotate(360deg)}}
.sweep-line{position:absolute;top:50%;left:50%;width:46%;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(237,216,210,.75),rgba(237,216,210,0));
  animation:sweep 5.5s linear infinite;box-shadow:0 0 12px rgba(237,216,210,.35)}

.blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold-300);
  box-shadow:0 0 0 0 rgba(237,216,210,.55);opacity:0;animation:blip 5.5s linear infinite}
.blip::after{content:attr(data-l);position:absolute;left:16px;top:-8px;white-space:nowrap;
  font-family:var(--ff-en);font-size:10px;letter-spacing:.2em;color:rgba(237,216,210,.85)}
@keyframes blip{
  0%,4%{opacity:0;box-shadow:0 0 0 0 rgba(237,216,210,.5)}
  6%{opacity:1}
  30%{opacity:.85;box-shadow:0 0 0 16px rgba(237,216,210,0)}
  70%{opacity:.25}
  100%{opacity:0}
}
.b1{top:31%;left:57%;animation-delay:.5s}
.b2{top:62%;left:38%;animation-delay:2.1s}
.b3{top:47%;left:73%;animation-delay:3.4s}
.b4{top:70%;left:62%;animation-delay:4.4s}

/* ヒーロー・コピー */
.hero-inner{position:relative;z-index:3;width:min(1440px,94%);margin-inline:auto;padding:calc(var(--header-h) + 30px) 0 40px}
.hero-side{
  position:absolute;left:-52px;top:30%;font-family:var(--ff-en);font-size:10.5px;font-weight:300;
  letter-spacing:.46em;color:var(--muted);writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
}
.hero-copy{max-width:760px}
.hero-tag{
  display:inline-flex;align-items:center;gap:12px;padding:9px 20px;margin-bottom:34px;
  border:1px solid var(--line-gold);font-family:var(--ff-en);font-size:11.5px;letter-spacing:.26em;color:var(--gold-300);
  background:rgba(237,216,210,.06);
}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:#5FD38A;box-shadow:0 0 0 0 rgba(95,211,138,.7);animation:live 2.4s infinite}
@keyframes live{70%{box-shadow:0 0 0 9px rgba(95,211,138,0)}100%{box-shadow:0 0 0 0 rgba(95,211,138,0)}}

.hero-h1{font-family:var(--ff-serif);font-weight:600;font-size:clamp(38px,6.2vw,82px);line-height:1.32;letter-spacing:.06em;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.hero-h1 .ln{display:block;overflow:hidden}
.hero-h1 .ln>span{display:block;transform:translateY(110%);opacity:0;animation:riseIn 1.15s var(--ease) forwards}
.hero-h1 .ln:nth-child(2)>span{animation-delay:.16s}
.hero-h1 .ln:nth-child(3)>span{animation-delay:.32s}
@keyframes riseIn{to{transform:translateY(0);opacity:1}}
.hero-h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold-600),var(--gold-300) 45%,var(--gold-500));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero-lead{margin-top:34px;font-size:17.5px;line-height:2.15;color:var(--text-soft);max-width:34em;
  opacity:0;animation:fadeUp 1s var(--ease) .62s forwards}
.hero-btns{margin-top:46px;display:flex;flex-wrap:wrap;gap:18px;opacity:0;animation:fadeUp 1s var(--ease) .78s forwards}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}

.hero-facts{
  margin-top:clamp(52px,7vh,92px);display:flex;flex-wrap:wrap;gap:22px clamp(24px,4vw,60px);position:relative;z-index:3;
  opacity:0;animation:fadeUp 1s var(--ease) .95s forwards;
}
.hero-facts div{padding-left:20px;border-left:1px solid var(--line-gold)}
.hero-facts .n{font-family:var(--ff-en);font-size:clamp(24px,2.6vw,34px);font-weight:300;color:var(--gold-300);line-height:1.2}
.hero-facts .n small{font-size:14px;letter-spacing:.1em;margin-left:3px}
.hero-facts .t{font-size:12.5px;letter-spacing:.14em;color:var(--muted)}

.scroll-cue{position:absolute;right:5%;bottom:40px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--ff-en);font-size:10px;letter-spacing:.34em;color:var(--muted);writing-mode:vertical-rl}
.scroll-cue::after{content:'';width:1px;height:70px;background:linear-gradient(180deg,var(--gold-500),transparent);position:relative}
.scroll-cue i{position:absolute;bottom:0;right:calc(50% - .5px);width:1px;height:70px;overflow:hidden}
.scroll-cue i::before{content:'';position:absolute;width:1px;height:24px;background:var(--gold-300);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-26px)}100%{transform:translateY(72px)}}

/* ============================================================
   スクロールリビール
   ============================================================ */
.rv{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}.rv-d5{transition-delay:.5s}.rv-d6{transition-delay:.6s}
.rv-d7{transition-delay:.7s}.rv-d8{transition-delay:.8s}

/* ============================================================
   お知らせ
   ============================================================ */
.news{background:linear-gradient(180deg,var(--navy-800),var(--navy-850));border-top:1px solid var(--line-gold)}
.news-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:grid;grid-template-columns:130px 118px 1fr auto;gap:20px;align-items:center;padding:22px 6px;transition:background .4s,padding-left .4s}
.news-list a:hover{background:rgba(237,216,210,.05);padding-left:18px}
.news-list time{font-family:var(--ff-en);font-size:14px;letter-spacing:.1em;color:var(--muted)}
.cat{display:inline-block;text-align:center;font-size:11.5px;letter-spacing:.14em;padding:5px 0;border:1px solid var(--line-gold);color:var(--gold-300)}
.cat.imp{background:rgba(237,216,210,.14)}
.news-list p{font-size:16px;transition:color .35s}
.news-list a:hover p{color:var(--gold-300)}
.news-list .arw2{width:18px;height:1px;background:var(--gold-500);position:relative;transition:width .4s var(--ease)}
.news-list .arw2::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--gold-500);border-right:1px solid var(--gold-500);transform:rotate(45deg)}
.news-list a:hover .arw2{width:30px}

/* ============================================================
   サービス
   ============================================================ */
.services{background:var(--navy-900);position:relative}
.services::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.svc{
  position:relative;padding:44px 32px 40px;background:var(--navy-850);overflow:hidden;
  transition:transform .6s var(--ease),background .6s var(--ease);
}
.svc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);
  background:linear-gradient(160deg,rgba(237,216,210,.14),transparent 55%)}
.svc::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.svc:hover{background:var(--navy-750);z-index:2}
.svc:hover::before{opacity:1}
.svc:hover::after{transform:scaleX(1)}
.svc-no{font-family:var(--ff-en);font-size:11px;letter-spacing:.28em;color:var(--gold-600);position:relative;z-index:1}
.svc-ico{width:56px;height:56px;margin:20px 0 24px;position:relative;z-index:1;
  transition:transform .7s var(--ease)}
.svc-ico svg{width:100%;height:100%;stroke:var(--gold-400);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .svc-ico{transform:translateY(-6px) scale(1.06)}
.svc h3{font-family:var(--ff-serif);font-size:20px;font-weight:600;letter-spacing:.08em;margin-bottom:14px;position:relative;z-index:1}
.svc p{font-size:14.5px;line-height:1.95;color:var(--muted);position:relative;z-index:1}
.svc .badge{display:inline-block;margin-top:18px;font-family:var(--ff-en);font-size:10.5px;letter-spacing:.18em;
  padding:4px 12px;border:1px solid var(--line-gold);border-radius:999px;color:var(--gold-400);position:relative;z-index:1}

/* ============================================================
   実績・数値
   ============================================================ */
.stats{position:relative;background:
  linear-gradient(180deg,var(--navy-900),var(--navy-850) 40%,var(--navy-900));overflow:hidden}
.stats-radar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1100px;aspect-ratio:1;opacity:.4;pointer-events:none}
.stat-grid{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;position:relative;padding:22px 20px;z-index:1;
  width:100vw;left:50%;transform:translateX(-50%)}
.stat-flourish{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.stat-flourish .fl-bar{width:48px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px)}
.stat-flourish .fl-bar.sm{height:110px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.stat-flourish .fl-bar.md{height:200px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.stat-flourish .fl-bar.lg{height:270px;background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.32)}
.stat-flourish .fl-band{flex:1;height:28px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}

/* ボタンを押すと波紋→長方形→帯に電流 */
.stat-grid.wave-active .fl-bar{animation:barPulse .55s ease-out both}
.stat-grid.wave-active .fl-bar.lg{animation-delay:0s}
.stat-grid.wave-active .fl-bar.md{animation-delay:.13s}
.stat-grid.wave-active .fl-bar.sm{animation-delay:.26s}
@keyframes barPulse{
  0%{filter:brightness(1);box-shadow:none}
  40%{filter:brightness(2);box-shadow:0 0 20px 5px rgba(255,255,255,.4)}
  100%{filter:brightness(1);box-shadow:none}
}
.stat-flourish .fl-band::after{content:'';position:absolute;top:0;bottom:0;width:44%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.stat-flourish.left .fl-band::after{right:-44%}
.stat-flourish.right .fl-band::after{left:-44%}
.stat-grid.wave-active .stat-flourish.left .fl-band::after{animation:currentFlowLeft .6s ease-out .4s both}
.stat-grid.wave-active .stat-flourish.right .fl-band::after{animation:currentFlowRight .6s ease-out .4s both}
@keyframes currentFlowLeft{0%{right:-44%;opacity:0}15%{opacity:1}85%{opacity:1}100%{right:100%;opacity:0}}
@keyframes currentFlowRight{0%{left:-44%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.tr-button{transition:transform .15s ease}
.tr-button:active{transform:scale(.92)}
.tr-button::before{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(201,168,158,.7);pointer-events:none}
.stat-grid.wave-active .tr-button::before{animation:btnRipple .7s ease-out}
.stat-grid.wave-active .tr-button{animation:btnFlash .5s ease-out}
@keyframes btnRipple{
  0%{box-shadow:0 0 0 0 rgba(201,168,158,.7)}
  100%{box-shadow:0 0 0 26px rgba(201,168,158,0)}
}
@keyframes btnFlash{
  0%{filter:brightness(1)}
  30%{filter:brightness(1.6)}
  100%{filter:brightness(1)}
}
.stat{padding:34px 34px 50px;display:flex;align-items:center;justify-content:center;position:relative;z-index:0}
.stat::after{content:'';position:absolute;left:0;right:0;top:-60px;bottom:-24px;z-index:-1;
  background:rgba(255,255,255,.24);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.32);
  clip-path:polygon(32.5% 0,67.5% 0,67.5% 60px,100% 60px,100% calc(100% - 24px),85% calc(100% - 24px),85% 100%,15% 100%,15% calc(100% - 24px),0 calc(100% - 24px),0 60px,32.5% 60px)}
.stat.stat.stat{background:transparent!important;border:none!important;backdrop-filter:none!important}
.stat .tr-cap-top{position:absolute;left:50%;top:-96px;transform:translateX(-50%);width:100px;height:56px;border-radius:50% 50% 0 0/64% 64% 0 0;background:var(--gold-400);z-index:3}
.stat .tr-cap-brim{position:absolute;left:50%;top:-48px;transform:translateX(-50%);width:114px;height:14px;border-radius:5px;background:var(--gold-500);z-index:3}
.stat .tr-cap-band{position:absolute;left:50%;top:-58px;transform:translateX(-50%);width:100px;height:5px;background:var(--gold-600);z-index:4}
.stat .tr-antenna{position:absolute;top:-112px;right:14px;width:8px;height:110px;background:var(--gold-500);transform:rotate(-12deg);transform-origin:bottom center;z-index:1}
.stat .tr-antenna::after{content:'';position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:var(--gold-500)}
.stat .tr-dot{position:absolute;top:16px;left:16px;width:9px;height:9px;border-radius:50%;background:#f2a33c;box-shadow:0 0 4px rgba(242,163,60,.6);z-index:2}
.stat .tr-dot.tr-dot2{top:34px}
.stat .tr-button{position:relative;width:200px;height:200px;max-width:100%;aspect-ratio:1;border-radius:50%;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;text-align:center;padding:0;
  background:var(--sand);border:6px solid #f6ded8;box-shadow:0 10px 22px rgba(0,0,0,.28)}
.stat .lb.lb{font-family:var(--ff-en);font-size:10.5px;letter-spacing:.24em;color:#4a2e26!important}
.stat .val{font-family:var(--ff-en);font-weight:200;font-size:clamp(34px,4vw,52px);line-height:1;margin-top:8px}
.stat .val .count.count{font-family:var(--ff-en);font-weight:700;font-size:1.05em;letter-spacing:.03em;
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#4a2e26!important;color:#4a2e26!important}
.stat .val small{font-size:.34em;letter-spacing:.06em;margin-left:5px;-webkit-text-fill-color:#6b4a3f}
.stat .cap{margin-top:8px;font-size:12px;letter-spacing:.06em;color:#6b4a3f}

/* 導入事例 */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
.case{position:relative;border:1px solid var(--line);background:var(--navy-850);overflow:hidden;transition:transform .6s var(--ease),border-color .6s var(--ease)}
.case:hover{transform:translateY(-8px);border-color:var(--line-gold)}
.case-img{height:190px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-600),var(--navy-800))}
.case-img::before{content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(237,216,210,.10) 0 2px,transparent 2px 26px)}
.case-img .tagline{position:absolute;left:22px;bottom:18px;font-family:var(--ff-serif);font-size:22px;letter-spacing:.1em;color:rgba(255,255,255,.9)}
.case-img .kind{position:absolute;right:0;top:0;background:var(--gold-500);color:var(--navy-900);font-size:11.5px;font-weight:700;letter-spacing:.14em;padding:7px 14px}
.case-img-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.case-body{padding:28px 26px 32px}
.case-body h4{font-family:var(--ff-serif);font-size:18px;font-weight:600;line-height:1.6;margin-bottom:12px}
.case-body p{font-size:14.5px;color:var(--muted);line-height:1.9}
.case-meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:16px;font-size:12.5px;color:var(--gold-500);letter-spacing:.1em}

/* エリア */
.area{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.area li{padding:9px 20px;border:1px solid var(--line);font-size:14px;letter-spacing:.1em;color:var(--text-soft);
  transition:border-color .4s,color .4s,background .4s}
.area li:hover{border-color:var(--gold-500);color:var(--gold-300);background:rgba(237,216,210,.07)}

/* ============================================================
   流れ
   ============================================================ */
.flow{background:var(--navy-850)}
.flow-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:step}
.step{position:relative;padding:0 20px;text-align:center}
.step:not(:last-child)::before{content:'';position:absolute;top:37px;left:50%;width:100%;height:1px;background:var(--line-gold)}
.step .num{position:relative;z-index:1;width:74px;height:74px;margin:0 auto 24px;display:grid;place-items:center;
  border:1px solid var(--line-gold);border-radius:50%;background:var(--navy-850);
  font-family:var(--ff-en);font-size:22px;font-weight:300;color:var(--gold-300);
  transition:background .5s var(--ease),transform .5s var(--ease),box-shadow .5s}
.step:hover .num{background:var(--gold-500);color:var(--navy-900);transform:scale(1.08);box-shadow:0 0 34px -6px rgba(237,216,210,.6)}
.step h4{font-family:var(--ff-serif);font-size:17px;font-weight:600;letter-spacing:.07em;margin-bottom:10px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.9}

/* ============================================================
   採用
   ============================================================ */
.recruit{position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--navy-900) 0%,var(--navy-700) 48%,var(--navy-900) 100%)}
.recruit::before{content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(122deg,rgba(237,216,210,.07) 0 1px,transparent 1px 34px)}
.recruit-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,88px);align-items:center}
.rec-points{display:grid;gap:2px;background:var(--line-gold);border:1px solid var(--line-gold)}
.rec-point{background:rgba(5,8,15,.72);padding:28px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  transition:background .5s,transform .5s var(--ease)}
.rec-point:hover{background:rgba(237,216,210,.10);transform:translateX(8px)}
.rec-point .ic{width:44px;height:44px;stroke:var(--gold-400);fill:none;stroke-width:1.1}
.rec-point strong{display:block;font-family:var(--ff-serif);font-size:18px;letter-spacing:.06em;margin-bottom:4px}
.rec-point span{font-size:14px;color:var(--muted)}

/* ============================================================
   お問い合わせ
   ============================================================ */
.contact{background:var(--navy-900)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-gold);border:1px solid var(--line-gold)}
.cta-card{background:var(--navy-850);padding:clamp(36px,4.4vw,58px);position:relative;overflow:hidden;transition:background .55s}
.cta-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(237,216,210,.16),transparent 62%);opacity:0;transition:opacity .55s}
.cta-card:hover{background:var(--navy-750)}
.cta-card:hover::before{opacity:1}
.cta-card .ttl{font-family:var(--ff-serif);font-size:22px;font-weight:600;letter-spacing:.08em;margin-bottom:12px;position:relative}
.cta-card p{font-size:14.5px;color:var(--muted);margin-bottom:28px;position:relative}
.cta-tel{font-family:var(--ff-en);font-weight:300;font-size:clamp(34px,4vw,48px);letter-spacing:.03em;color:var(--gold-300);line-height:1.1;position:relative;display:block}
.cta-note{margin-top:14px;font-size:13px;color:var(--muted);letter-spacing:.08em;position:relative}

/* 社員ログイン */
.login-band{border:1px solid var(--line-gold);border-radius:20px;background:
  linear-gradient(120deg,rgba(30,48,79,.65),rgba(5,8,15,.9));padding:clamp(32px,4vw,50px);
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;margin-top:70px;position:relative;overflow:hidden}
.login-band::before{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border:1px solid var(--line-gold);border-radius:50%}
.login-band::after{content:'';position:absolute;right:10px;top:10px;width:140px;height:140px;border:1px solid rgba(237,216,210,.14);border-radius:50%}
.login-roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.login-roles li{font-size:12.5px;letter-spacing:.1em;padding:6px 14px;border:1px solid var(--line);color:var(--text-soft)}

/* ============================================================
   フッター
   ============================================================ */
.footer{background:var(--ink-900);border-top:1px solid var(--line-gold);padding-top:clamp(64px,7vw,96px)}
.f-top{display:grid;grid-template-columns:1.15fr 2.6fr;gap:clamp(34px,5vw,70px);padding-bottom:60px}
.f-brand p{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:2}
.f-map{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.f-map h5{font-family:var(--ff-en);font-size:11px;letter-spacing:.24em;color:var(--gold-500);padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.f-map li a{display:block;padding:6px 0;font-size:13px;color:var(--muted);transition:color .3s,transform .3s}
.f-map li a:hover{color:var(--gold-300);transform:translateX(5px)}
.f-bottom{border-top:1px solid var(--line);padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.f-bottom .links{display:flex;gap:26px;font-size:13px;color:var(--muted)}
.f-bottom .links a:hover{color:var(--gold-300)}
.f-bottom .cr{font-family:var(--ff-en);font-size:11.5px;letter-spacing:.16em;color:#5C6B84}

/* 追従CTA（モバイル） */
.sticky-cta{display:none}
@media (max-width:900px){ br.pc{display:none} }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1180px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr 1fr}
  .flow-grid{grid-template-columns:repeat(3,1fr);row-gap:48px}
  .step:nth-child(3)::before{display:none}
  .f-map{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1380px){
  .gnav,.head-actions .tel-block{display:none}
  .burger{display:block}
  .radar{right:-34%;opacity:.42}
  .hero-side{display:none}
  .blip::after{display:none}
}
@media (max-width:860px){
  :root{--header-h:68px}
  body{font-size:16px}
  .news-grid{grid-template-columns:1fr}
  .news-list a{grid-template-columns:1fr auto;row-gap:6px;padding:20px 4px}
  .news-list time{grid-column:1}
  .cat{grid-column:2;grid-row:1;width:110px}
  .news-list p{grid-column:1/-1}
  .news-list .arw2{display:none}
  .recruit-inner,.cta-grid,.f-top{grid-template-columns:1fr}
  .login-band{grid-template-columns:1fr}
  .hero-facts{margin-top:46px;gap:20px 28px}
  .hero-facts .n{font-size:26px}
  .scroll-cue{display:none}
  .hero{min-height:auto;padding:104px 0 84px}
  .hero .radar{top:34%;right:-46%;opacity:.3}
  .hero-h1{font-size:clamp(34px,9vw,52px)}
  .btn{width:100%;padding:18px 26px}
  .hero-btns{gap:14px}
  .btn-login span{display:none}
  .btn-login{padding:12px 14px}
}
@media (max-width:640px){
  .svc-grid,.case-grid,.flow-grid,.f-map{grid-template-columns:1fr}
  .stat{padding:32px 26px 46px}
  .stat::after{top:-38px;bottom:-14px;clip-path:polygon(32.5% 0,67.5% 0,67.5% 38px,100% 38px,100% calc(100% - 14px),85% calc(100% - 14px),85% 100%,15% 100%,15% calc(100% - 14px),0 calc(100% - 14px),0 38px,32.5% 38px)}
  .stat .tr-cap-top{top:-62px;width:64px;height:36px}
  .stat .tr-cap-brim{top:-32px;width:74px;height:10px}
  .stat .tr-cap-band{top:-38px;width:64px;height:4px}
  .stat .tr-antenna{top:-72px;right:8px;width:6px;height:70px}
  .stat .tr-antenna::after{width:12px;height:12px;top:-13px}
  .stat .tr-button{width:150px;height:150px}
  .stat{padding:26px 26px 40px}
  .stat-flourish{gap:10px}
  .stat-flourish .fl-bar{width:24px}
  .stat-flourish .fl-bar.sm{height:56px}
  .stat-flourish .fl-bar.md{height:100px}
  .stat-flourish .fl-bar.lg{height:136px}
  .stat-flourish .fl-band{width:32px;height:16px}
  .step::before{display:none}
  .sticky-cta{display:grid;position:fixed;bottom:0;left:0;width:100%;z-index:90;grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line-gold)}
  .sticky-cta a{padding:16px 8px;text-align:center;font-size:14px;font-weight:700;letter-spacing:.08em}
  .sticky-cta .t{background:var(--navy-750);color:var(--gold-300)}
  .sticky-cta .m{background:linear-gradient(120deg,var(--gold-600),var(--gold-400));color:var(--navy-900)}
  .footer{padding-bottom:60px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   下層ページ共通
   ============================================================ */
.page-hero{
  position:relative;padding:calc(var(--header-h) + 92px) 0 78px;overflow:hidden;
  background:
    radial-gradient(110% 130% at 82% 30%,rgba(30,48,79,.8),transparent 62%),
    linear-gradient(160deg,var(--navy-850),var(--navy-900) 70%);
  border-bottom:1px solid var(--line-gold);
}
.page-hero .radar{right:-10%;width:min(70vh,600px);opacity:.5}
.page-hero .crumb{font-family:var(--ff-en);font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:22px}
.page-hero .crumb a:hover{color:var(--gold-300)}
.page-hero .crumb span{margin:0 10px;color:var(--gold-600)}
.page-hero .en{font-family:var(--ff-en);font-weight:200;font-size:12px;letter-spacing:.34em;color:var(--gold-500);display:block;margin-bottom:14px}
.page-hero h1{font-family:var(--ff-serif);font-weight:600;font-size:clamp(30px,4.6vw,52px);letter-spacing:.08em;line-height:1.4}
.page-hero p{margin-top:20px;color:var(--text-soft);max-width:56ch;font-size:16px}

/* ページ内リンク（アンカーナビ） */
.anchors{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:0}
.anchors a{flex:1 1 auto;text-align:center;padding:16px 20px;background:var(--navy-850);font-size:14px;letter-spacing:.06em;
  color:#241E1B;transition:background .4s,color .4s;white-space:nowrap}
.anchors a:hover{background:rgba(237,216,210,.35);color:#8a5a2e}

/* 汎用ブロック */
.block{margin-bottom:clamp(64px,7vw,110px);--gold-300:#3D5570;--gold-400:#4A6485}
.block:last-child{margin-bottom:0}
.h3{font-family:var(--ff-serif);font-size:clamp(21px,2.4vw,28px);font-weight:600;letter-spacing:.07em;margin-bottom:26px;padding-left:20px;position:relative}
.h3::before{content:'';position:absolute;left:0;top:.28em;bottom:.28em;width:3px;background:linear-gradient(180deg,var(--gold-300),var(--gold-600))}
.p{color:var(--text-soft);margin-bottom:20px}
.p:last-child{margin-bottom:0}

/* 定義テーブル */
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:20px 18px;text-align:left;vertical-align:top;font-size:15.5px}
.tbl th{width:230px;color:var(--gold-400);font-weight:500;letter-spacing:.08em;background:rgba(255,255,255,.02)}
.tbl td{color:var(--text-soft)}

/* 沿革 */
.history{border-left:1px solid var(--line-gold);padding-left:34px}
.history li{position:relative;padding-bottom:34px}
.history li::before{content:'';position:absolute;left:-40px;top:11px;width:11px;height:11px;border-radius:50%;
  background:var(--navy-900);border:1px solid var(--gold-500);transition:background .4s,transform .4s}
.history li:hover::before{background:var(--gold-400);transform:scale(1.25)}
.history .y{font-family:var(--ff-en);font-size:17px;letter-spacing:.1em;color:var(--gold-300);margin-bottom:4px}
.history p{color:var(--text-soft);font-size:15.5px}

/* 組織図 */
.org{display:grid;gap:16px;justify-items:center}
.org .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;width:100%}
.org .box{border:1px solid var(--line-gold);background:rgba(30,48,79,.35);padding:16px 30px;text-align:center;
  font-size:15px;letter-spacing:.08em;min-width:180px;transition:background .4s,transform .4s}
.org .box:hover{background:rgba(237,216,210,.14);transform:translateY(-4px)}
.org .box.top{background:linear-gradient(120deg,var(--gold-600),var(--gold-400));color:var(--navy-900);font-weight:700;border-color:transparent}
.org .bar{width:1px;height:26px;background:var(--line-gold)}

/* カードグリッド汎用 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:18px;background:var(--navy-850);padding:32px 28px;transition:border-color .5s,transform .5s var(--ease),background .5s,box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.card:hover{border-color:var(--line-gold);transform:translateY(-6px);background:var(--navy-750)}
.card h4{font-family:var(--ff-serif);font-size:18px;font-weight:600;letter-spacing:.06em;margin-bottom:12px}
.card p{font-size:14.5px;color:var(--muted)}
.card .k{font-family:var(--ff-en);font-size:11px;letter-spacing:.24em;color:var(--gold-600);margin-bottom:14px}

/* 業務内容 詳細 */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center;
  border:1px solid var(--line);border-radius:20px;background:var(--navy-850);margin-bottom:26px;overflow:hidden}
.detail:nth-child(even) .detail-visual{order:2}
.detail-visual{aspect-ratio:4/3;position:relative;background:linear-gradient(150deg,var(--navy-600),var(--navy-800));overflow:hidden}
.detail-visual-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.detail-visual::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(118deg,rgba(237,216,210,.10) 0 2px,transparent 2px 24px)}
.detail-visual svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;stroke:var(--gold-400);fill:none;stroke-width:1;opacity:.9}
.detail-body{padding:36px 40px 40px}
.detail-body .k{font-family:var(--ff-en);font-size:11px;letter-spacing:.26em;color:var(--gold-600)}
.detail-body h3{font-family:var(--ff-serif);font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:.07em;margin:12px 0 16px}
.detail-body p{color:var(--text-soft);font-size:15.5px;margin-bottom:20px}
.detail-body ul{display:grid;gap:9px}
.detail-body li{position:relative;padding-left:22px;font-size:14.5px;color:var(--muted)}
.detail-body li::before{content:'';position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--gold-500)}

/* FAQ */
.faq details{border:1px solid var(--line);background:var(--navy-850);margin-bottom:12px;transition:border-color .4s}
.faq details[open]{border-color:var(--line-gold)}
.faq summary{list-style:none;cursor:pointer;padding:22px 56px 22px 26px;position:relative;font-size:16px;font-weight:500;letter-spacing:.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';font-family:var(--ff-en);color:var(--gold-400);margin-right:14px;font-size:15px}
.faq summary::after{content:'';position:absolute;right:26px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--gold-500);border-bottom:1px solid var(--gold-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 26px 26px 62px;color:var(--text-soft);font-size:15px;border-top:1px solid var(--line);padding-top:22px;margin:0 26px 26px}

/* フォーム */
.form{display:grid;gap:24px;max-width:860px}
.form .row{display:grid;gap:9px}
.form .row.two{grid-template-columns:1fr 1fr;gap:20px}
.form label{font-size:14.5px;letter-spacing:.08em;color:var(--text-soft)}
.form label .req{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.1em;padding:3px 9px;
  background:rgba(237,216,210,.16);border:1px solid var(--line-gold);color:var(--gold-300)}
.form input,.form select,.form textarea{
  width:100%;padding:15px 18px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-family:inherit;font-size:16px;transition:border-color .35s,background .35s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold-500);background:rgba(237,216,210,.06)}
.form textarea{min-height:170px;resize:vertical}
.form .note{font-size:13.5px;color:var(--muted)}
.form .submit{justify-self:start;margin-top:8px}

/* ギャラリー */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal{aspect-ratio:4/3;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(150deg,var(--navy-600),var(--navy-800));transition:transform .6s var(--ease),border-color .6s}
.gal::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(120deg,rgba(237,216,210,.10) 0 2px,transparent 2px 22px)}
.gal span{position:absolute;left:16px;bottom:14px;font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.85)}
.gal-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-photo-full{background:#FBF7F0}
.gal-photo-full img{object-fit:contain;background:#FBF7F0}
.gal:hover{transform:scale(1.03);border-color:var(--line-gold);z-index:2}

/* 社員の声 */
.voice{display:grid;grid-template-columns:180px 1fr;gap:30px;border:1px solid var(--line);border-radius:18px;background:var(--navy-850);
  padding:32px;margin-bottom:18px;transition:border-color .5s}
.voice:hover{border-color:var(--line-gold)}
.voice .ph{aspect-ratio:1;border-radius:50%;background:linear-gradient(150deg,var(--navy-600),var(--navy-800));
  display:grid;place-items:center;font-family:var(--ff-serif);font-size:34px;color:var(--gold-400);border:1px solid var(--line-gold)}
.voice h4{font-family:var(--ff-serif);font-size:19px;font-weight:600;margin-bottom:6px}
.voice .meta{font-size:13px;color:var(--gold-500);letter-spacing:.1em;margin-bottom:16px}
.voice p{color:var(--text-soft);font-size:15px}

/* 一日の流れ */
.day li{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--line)}
.day .t{font-family:var(--ff-en);font-size:19px;color:var(--gold-300);letter-spacing:.06em}
.day strong{display:block;font-family:var(--ff-serif);font-size:17px;font-weight:600;margin-bottom:6px}
.day span{font-size:14.5px;color:var(--muted)}

/* 規約・本文 */
.legal h3{font-family:var(--ff-serif);font-size:19px;font-weight:600;margin:36px 0 14px;color:var(--gold-300)}
.legal p,.legal li{color:var(--text-soft);font-size:15.5px}
.legal ol{padding-left:1.4em;margin:10px 0}
.legal ol li{list-style:decimal;padding:4px 0}

/* サイトマップ */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.smap h4{font-family:var(--ff-en);font-size:12px;letter-spacing:.24em;color:var(--gold-500);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.smap a{display:block;padding:8px 0 8px 18px;font-size:14.5px;color:var(--text-soft);position:relative;transition:color .3s,transform .3s}
.smap a::before{content:'';position:absolute;left:0;top:1.1em;width:8px;height:1px;background:var(--gold-600)}
.smap a:hover{color:var(--gold-300);transform:translateX(4px)}

/* ============================================================
   ログイン画面
   ============================================================ */
.login-page{min-height:100svh;display:grid;place-items:center;padding:120px 5% 80px;position:relative;overflow:hidden;
  background:radial-gradient(90% 80% at 50% 20%,rgba(40,65,85,.75),transparent 60%),linear-gradient(160deg,var(--ink-800),var(--ink-900))}
.login-card{width:min(520px,100%);border:1px solid var(--line-gold);background:rgba(8,13,26,.86);
  backdrop-filter:blur(10px);padding:clamp(34px,4vw,52px);position:relative;z-index:2}
.login-card .lc-head{text-align:center;margin-bottom:34px}
.login-card .lc-head .en{font-family:var(--ff-en);font-size:11px;letter-spacing:.32em;color:var(--gold-500)}
.login-card .lc-head h1{font-family:var(--ff-serif);font-size:26px;font-weight:600;letter-spacing:.1em;margin-top:10px}
.login-card .lc-head p{font-size:14px;color:var(--muted);margin-top:12px}
.role-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:26px}
.role-pick a{border:1px solid var(--line);padding:14px 10px;text-align:center;font-size:14px;letter-spacing:.06em;
  color:var(--text-soft);transition:border-color .4s,background .4s,color .4s}
.role-pick a:hover{border-color:var(--gold-500);background:rgba(237,216,210,.1);color:var(--gold-300)}
.login-foot{text-align:center;margin-top:26px;font-size:13px;color:var(--muted)}
.login-foot a{color:var(--gold-400)}

/* ============================================================
   管理画面（デモ）
   ============================================================ */
body.app{background:var(--navy-900)}
.app-wrap{display:grid;grid-template-columns:264px 1fr;min-height:100svh}
.side{background:var(--ink-900);border-right:1px solid var(--line-gold);padding:26px 0;position:sticky;top:0;height:100svh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:12px;padding:0 24px 24px;border-bottom:1px solid var(--line);margin-bottom:18px}
.side .brand svg{width:32px;height:36px}
.side .brand strong{font-family:var(--ff-serif);font-size:16px;letter-spacing:.12em}
.side .brand span{display:block;font-family:var(--ff-en);font-size:8.5px;letter-spacing:.3em;color:var(--gold-500)}
.side .role{margin:0 24px 20px;padding:12px 14px;border:1px solid var(--line-gold);background:rgba(237,216,210,.08);
  font-size:12.5px;letter-spacing:.1em;color:var(--gold-300);text-align:center}
.side nav a{display:flex;align-items:center;gap:12px;padding:12px 24px;font-size:14.5px;color:var(--text-soft);
  border-left:2px solid transparent;transition:background .3s,color .3s,border-color .3s}
.side nav a:hover{background:rgba(237,216,210,.07);color:var(--gold-300)}
.side nav a.on{background:rgba(237,216,210,.13);color:var(--gold-300);border-left-color:var(--gold-400)}
.side nav a .d{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.side .out{margin:22px 24px 0;padding-top:18px;border-top:1px solid var(--line)}

.main{padding:34px clamp(20px,3vw,44px) 60px;min-width:0}
.app-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:32px}
.app-head h1{font-family:var(--ff-serif);font-size:26px;font-weight:600;letter-spacing:.08em}
.app-head .sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.app-head .who{text-align:right;font-size:13px;color:var(--muted)}
.app-head .who strong{display:block;font-size:15px;color:var(--text);letter-spacing:.06em}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px}
.kpi{border:1px solid var(--line);background:var(--navy-850);padding:22px 24px;position:relative;overflow:hidden;
  transition:border-color .5s,transform .5s var(--ease)}
.kpi:hover{border-color:var(--line-gold);transform:translateY(-4px)}
.kpi .lb{font-family:var(--ff-en);font-size:10.5px;letter-spacing:.2em;color:var(--gold-600);margin-bottom:10px}
.kpi .v{font-family:var(--ff-en);font-weight:200;font-size:34px;line-height:1.1;color:var(--gold-300)}
.kpi .v small{font-size:14px;margin-left:4px;color:var(--gold-500)}
.kpi .d{font-size:12.5px;color:var(--muted);margin-top:8px}
.kpi .d .up{color:#5FD38A}.kpi .d .dn{color:#E08A7A}

.panels{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-bottom:24px}
.panel{border:1px solid var(--line);background:var(--navy-850)}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.panel-h h2{font-family:var(--ff-serif);font-size:17px;font-weight:600;letter-spacing:.07em}
.panel-h a{font-size:12.5px;color:var(--gold-400);letter-spacing:.08em}
.panel-b{padding:22px 24px}

.dtbl{width:100%;border-collapse:collapse;font-size:14px}
.dtbl th{text-align:left;padding:10px 12px;font-size:11.5px;letter-spacing:.14em;color:var(--gold-600);
  border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap}
.dtbl td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text-soft);white-space:nowrap}
.dtbl tr:hover td{background:rgba(237,216,210,.05)}
.pill{display:inline-block;padding:3px 11px;font-size:11.5px;letter-spacing:.08em;border:1px solid var(--line-gold);color:var(--gold-300)}
.pill.ok{border-color:rgba(95,211,138,.5);color:#5FD38A}
.pill.wait{border-color:rgba(224,138,122,.5);color:#E08A7A}

/* 簡易バーチャート */
.chart{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.chart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.chart .bar i{width:100%;background:linear-gradient(180deg,var(--gold-400),rgba(237,216,210,.18));display:block;
  animation:grow 1.1s var(--ease) both;transform-origin:bottom}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.chart .bar span{font-family:var(--ff-en);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}

/* ドーナツ風 */
.donut{width:150px;height:150px;border-radius:50%;margin:6px auto 16px;position:relative;
  background:conic-gradient(var(--gold-400) 0 68%,rgba(255,255,255,.08) 68% 100%)}
.donut::after{content:'';position:absolute;inset:22px;border-radius:50%;background:var(--navy-850)}
.donut b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-en);font-weight:300;font-size:26px;color:var(--gold-300);z-index:1}

.legend{display:grid;gap:9px;font-size:13px;color:var(--text-soft)}
.legend div{display:flex;align-items:center;gap:10px}
.legend i{width:10px;height:10px;flex:none}

@media (max-width:1180px){
  .cards,.cards.c4{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .smap{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .app-wrap{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line-gold)}
  .side nav{display:flex;flex-wrap:wrap;gap:2px;padding:0 16px}
  .side nav a{border-left:none;border-bottom:2px solid transparent;padding:10px 14px}
  .side nav a.on{border-left-color:transparent;border-bottom-color:var(--gold-400)}
}
@media (max-width:860px){
  .detail,.detail:nth-child(even) .detail-visual{grid-template-columns:1fr;order:0}
  .cards,.cards.c2,.cards.c4,.smap{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .voice{grid-template-columns:1fr}
  .voice .ph{width:120px}
  .form .row.two{grid-template-columns:1fr}
  .tbl th{width:auto;display:block;border-bottom:none;padding-bottom:6px}
  .tbl td{display:block;padding-top:0}
  .kpis{grid-template-columns:1fr}
  .anchors a{flex:1 1 46%}
  .page-hero .radar{opacity:.28;right:-40%}
  .day li{grid-template-columns:80px 1fr;gap:16px}
}

/* ============================================================
   はたらくを知る（インタラクティブ・コンテンツ）
   ============================================================ */
.drop.wide3{min-width:820px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.drop .dhead{grid-column:1/-1;padding:8px 16px 6px;font-family:var(--ff-en);font-size:10px;
  letter-spacing:.22em;color:var(--gold-600);border-bottom:1px solid var(--line);margin-bottom:4px}

/* コンテンツ一覧（ハブ） */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.hub a{position:relative;background:var(--navy-850);padding:34px 30px 32px;overflow:hidden;
  transition:background .55s var(--ease),transform .55s var(--ease)}
.hub a::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .55s;
  background:linear-gradient(155deg,rgba(237,216,210,.16),transparent 58%)}
.hub a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-300));transition:transform .55s var(--ease)}
.hub a:hover{background:var(--navy-750);z-index:2}
.hub a:hover::before{opacity:1}
.hub a:hover::after{transform:scaleX(1)}
.hub .ico{display:block;width:52px;height:52px;margin-bottom:20px;position:relative;z-index:1;transition:transform .6s var(--ease)}
.hub .ico svg{width:100%;height:100%;stroke:var(--gold-400);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.hub a:hover .ico{transform:translateY(-5px) scale(1.06)}
.hub h3{font-family:var(--ff-serif);font-size:19px;font-weight:600;letter-spacing:.06em;margin-bottom:10px;position:relative;z-index:1}
.hub p{font-size:14px;color:var(--muted);line-height:1.9;position:relative;z-index:1}
.hub .tag{display:inline-block;margin-bottom:14px;font-family:var(--ff-en);font-size:10px;letter-spacing:.2em;
  padding:4px 11px;border:1px solid var(--line-gold);color:var(--gold-400);position:relative;z-index:1}

/* 質問チップ（診断・シミュレーター共通） */
.qset{display:grid;gap:30px}
.qbox{border:1px solid var(--line);border-radius:16px;background:var(--navy-850);padding:28px 30px;transition:border-color .5s}
.qbox:hover{border-color:var(--line-gold)}
.qbox .qt{font-size:16.5px;font-weight:500;letter-spacing:.04em;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.qbox .qt i{font-family:var(--ff-en);font-size:12px;letter-spacing:.14em;color:var(--gold-600);font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{display:inline-block;padding:13px 24px;border:1px solid var(--line);font-size:15px;letter-spacing:.04em;
  color:var(--text-soft);cursor:pointer;transition:all .35s var(--ease);user-select:none}
.chips label:hover{border-color:var(--gold-600);color:var(--gold-300)}
.chips input:checked + label{background:linear-gradient(120deg,var(--gold-600),var(--gold-400));
  border-color:transparent;color:var(--navy-900);font-weight:700;box-shadow:0 10px 26px -12px rgba(237,216,210,.8)}

/* 結果パネル */
.result{border:1px solid var(--line-gold);background:linear-gradient(135deg,rgba(30,48,79,.6),rgba(5,8,15,.9));
  padding:clamp(30px,4vw,46px);position:relative;overflow:hidden}
.result::before{content:'';position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;border:1px solid var(--line-gold)}
.result .rl{font-family:var(--ff-en);font-size:11px;letter-spacing:.26em;color:var(--gold-500);margin-bottom:16px}
.result .big{font-family:var(--ff-en);font-weight:200;line-height:1;
  font-size:clamp(46px,7vw,84px);background:linear-gradient(150deg,var(--gold-300),var(--gold-600));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.result .big small{font-size:.3em;letter-spacing:.06em;margin-left:8px;-webkit-text-fill-color:var(--gold-500)}
.result .sub{margin-top:12px;color:var(--text-soft);font-size:15px}
.res-2col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;position:relative;z-index:1}
.res-2col .mid{font-family:var(--ff-en);font-weight:200;font-size:clamp(30px,3.6vw,44px);color:var(--gold-300);line-height:1}
.res-2col .mid small{font-size:.34em;color:var(--gold-500);margin-left:6px}

/* 内訳バー */
.stack{display:flex;height:16px;margin:26px 0 16px;border:1px solid var(--line-gold);position:relative;z-index:1;overflow:hidden}
.stack i{display:block;transition:width .9s var(--ease)}
.stack .s1{background:linear-gradient(180deg,var(--gold-300),var(--gold-500))}
.stack .s2{background:rgba(237,216,210,.6)}
.stack .s3{background:rgba(237,216,210,.34)}
.stack .s4{background:rgba(255,255,255,.16)}
.stack-legend{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:var(--text-soft);position:relative;z-index:1}
.stack-legend div{display:flex;align-items:center;gap:9px}
.stack-legend em{font-style:normal;color:var(--muted);margin-left:4px}
.stack-legend i{width:12px;height:12px;flex:none}

/* ロードマップ */
.career-road{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:14px}
.career-road .rs{position:relative;padding:0 14px;text-align:center}
.career-road .rs:not(:last-child)::before{content:'';position:absolute;top:26px;left:50%;width:100%;height:1px;
  background:linear-gradient(90deg,var(--gold-600),var(--line-gold))}
.career-road .dot{position:relative;z-index:1;width:54px;height:54px;margin:0 auto 20px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy-900);border:1px solid var(--gold-500);font-family:var(--ff-en);font-size:15px;color:var(--gold-300);
  transition:all .5s var(--ease)}
.career-road .rs:hover .dot{background:var(--gold-500);color:var(--navy-900);transform:scale(1.1);box-shadow:0 0 30px -6px rgba(237,216,210,.7)}
.career-road h4{font-family:var(--ff-serif);font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:.05em}
.career-road .amt{font-family:var(--ff-en);font-size:20px;color:var(--gold-300);margin-bottom:8px}
.career-road p{font-size:13px;color:var(--muted);line-height:1.85}

/* クイズ */
.quiz{border:1px solid var(--line-gold);background:var(--navy-850);position:relative;overflow:hidden}
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid var(--line)}
.quiz-head .n{font-family:var(--ff-en);font-size:13px;letter-spacing:.16em;color:var(--gold-500)}
.quiz-head .sc{font-family:var(--ff-en);font-size:13px;letter-spacing:.14em;color:var(--text-soft)}
.qprog{height:3px;background:rgba(255,255,255,.07)}
.qprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-600),var(--gold-300));transition:width .5s var(--ease)}
.quiz-body{padding:clamp(28px,4vw,44px)}
.quiz-q{font-family:var(--ff-serif);font-size:clamp(19px,2.4vw,25px);font-weight:600;line-height:1.7;letter-spacing:.04em;margin-bottom:28px}
.quiz-opts{display:grid;gap:12px}
.qopt{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  text-align:left;font-size:16px;color:var(--text-soft);cursor:pointer;transition:all .35s var(--ease);width:100%}
.qopt .mk{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--line-gold);border-radius:50%;
  font-family:var(--ff-en);font-size:13px;color:var(--gold-400);transition:all .35s}
.qopt:hover:not(:disabled){border-color:var(--gold-500);background:rgba(237,216,210,.08);color:var(--text);transform:translateX(5px)}
.qopt.correct{border-color:#5FD38A;background:rgba(95,211,138,.12);color:#DFF6E7}
.qopt.correct .mk{border-color:#5FD38A;color:#5FD38A}
.qopt.wrong{border-color:#E08A7A;background:rgba(224,138,122,.1);color:#F6DCD7}
.qopt.wrong .mk{border-color:#E08A7A;color:#E08A7A}
.qopt:disabled{cursor:default}
.qfb{margin-top:24px;padding:22px 24px;border-left:2px solid var(--gold-500);background:rgba(237,216,210,.07);
  font-size:15px;color:var(--text-soft);line-height:1.95;display:none}
.qfb.show{display:block;animation:fadeUp .5s var(--ease)}
.qfb b{color:var(--gold-300);display:block;margin-bottom:6px;font-size:15px;letter-spacing:.06em}
.quiz-foot{padding:0 clamp(28px,4vw,44px) clamp(28px,4vw,44px);display:flex;justify-content:flex-end;gap:14px}
.quiz-final{text-align:center;padding:clamp(34px,5vw,60px)}
.quiz-final .sc{font-family:var(--ff-en);font-weight:200;font-size:clamp(50px,8vw,90px);line-height:1;
  background:linear-gradient(150deg,var(--gold-300),var(--gold-600));-webkit-background-clip:text;background-clip:text;color:transparent}
.quiz-final .sc small{font-size:.3em;-webkit-text-fill-color:var(--gold-500)}
.quiz-final h3{font-family:var(--ff-serif);font-size:clamp(20px,2.6vw,28px);font-weight:600;margin:20px 0 14px;letter-spacing:.06em}
.quiz-final p{color:var(--text-soft);max-width:52ch;margin:0 auto 30px}
.mode-tabs{display:flex;gap:2px;background:var(--line);border:1px solid var(--line);margin-bottom:30px}
.mode-tabs button{flex:1;padding:17px 14px;background:var(--navy-850);font-size:15px;letter-spacing:.05em;color:var(--muted);
  transition:all .4s var(--ease)}
.mode-tabs button.on{background:linear-gradient(120deg,var(--gold-600),var(--gold-400));color:var(--navy-900);font-weight:700}

/* イラスト（仕事紹介） */
.illust{border:none;background:transparent;
  padding:0;position:relative;overflow:hidden}
.illust::before{content:none}
.illust svg{width:100%;height:auto;display:block;position:relative;z-index:1}
.sec-ink .gd-step .pfig.pfig{background:transparent!important;color:var(--td)!important;
  border-color:transparent!important;padding:0!important}
.gd-step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center;margin-bottom:26px}
.gd-step:nth-child(even) .illust{order:2}
.gd-step .tx .k{font-family:var(--ff-en);font-size:11px;letter-spacing:.24em;color:var(--gold-600);margin-bottom:12px}
.gd-step .tx h3{font-family:var(--ff-serif);font-size:clamp(20px,2.5vw,26px);font-weight:600;letter-spacing:.06em;margin-bottom:14px}
.gd-step .tx p{color:var(--text-soft);font-size:15.5px}

/* 合図アニメ */
.signal{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,50px);align-items:center}
.sig-tabs{display:grid;gap:10px}
.sig-tabs button{text-align:left;padding:20px 24px;border:1px solid var(--line);background:var(--navy-850);
  transition:all .4s var(--ease)}
.sig-tabs button strong{display:block;font-family:var(--ff-serif);font-size:18px;font-weight:600;margin-bottom:6px}
.sig-tabs button span{font-size:14px;color:var(--muted)}
.sig-tabs button.on{border-color:var(--gold-500);background:rgba(237,216,210,.1)}
.sig-tabs button.on strong{color:var(--gold-300)}
.arm{transform-origin:var(--ox,0px) var(--oy,0px)}
.sig-stop .arm-r{animation:armStop 2.4s var(--ease) infinite}
.sig-slow .arm-r{animation:armSlow 1.4s var(--ease) infinite}
.sig-go .arm-r{animation:armGo 1.6s var(--ease) infinite}
@keyframes armStop{0%,100%{transform:rotate(4deg)}18%,82%{transform:rotate(-92deg)}}
@keyframes armSlow{0%,100%{transform:rotate(28deg)}50%{transform:rotate(2deg)}}
@keyframes armGo{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-88deg)}}
.guardsvg .arm-r{transform-origin:136px 96px}
.sig-stop .flag,.sig-slow .flag{fill:#D64B3C}
.sig-go .flag{fill:#F2F5FA}
.sig-go .arm-r{animation-duration:1.2s}
.tool{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;border:1px solid var(--line);
  background:var(--navy-850);padding:22px 24px;transition:border-color .5s,transform .5s var(--ease)}
.tool:hover{border-color:var(--line-gold);transform:translateY(-4px)}
.tool svg{width:100%;height:auto;stroke:var(--gold-400);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tool strong{display:block;font-family:var(--ff-serif);font-size:16.5px;font-weight:600;margin-bottom:4px}
.tool span{font-size:13.5px;color:var(--muted)}

/* 道路アニメ */
.road-anim{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--navy-800)}
.road-anim svg{width:100%;height:auto;display:block}
/* 車：停止線で待機→合図が変わったら発車、を交互に繰り返す */
.ra-car{animation:raCarLeft 7s linear infinite}
.ra-car2{animation:raCarRight 7s linear infinite}
@keyframes raCarLeft{
  0%,48%{transform:translateX(90px);opacity:1}
  50%{transform:translateX(90px);opacity:1}
  90%{transform:translateX(750px);opacity:1}
  94%{transform:translateX(750px);opacity:0}
  94.1%{transform:translateX(90px);opacity:0}
  100%{transform:translateX(90px);opacity:1}
}
@keyframes raCarRight{
  0%{transform:translateX(600px);opacity:1}
  2%{transform:translateX(600px);opacity:1}
  40%{transform:translateX(-60px);opacity:1}
  44%{transform:translateX(-60px);opacity:0}
  44.1%{transform:translateX(600px);opacity:0}
  50%,100%{transform:translateX(600px);opacity:1}
}
/* 誘導員の合図：停止と進めを同じ7秒サイクルでクロスフェード */
.ra-lstop{animation:raFlagOff 7s linear infinite}
.ra-lgo{animation:raFlagOn 7s linear infinite}
.ra-rgo{animation:raFlagOff 7s linear infinite}
.ra-rstop{animation:raFlagOn 7s linear infinite}
@keyframes raFlagOff{0%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes raFlagOn{0%,46%{opacity:0}50%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ra-car,.ra-car2,.ra-lstop,.ra-lgo,.ra-rgo,.ra-rstop{animation:none!important}
  .ra-lstop,.ra-rgo{opacity:1}
  .ra-lgo,.ra-rstop{opacity:0}
}
/* 撤収シーン：足元のコーンを持ち上げて、積み重ねた山まで運ぶ */
.pack-cone{animation:conePack 2.6s ease-in-out infinite}
@keyframes conePack{
  0%,14%{transform:translate(0,0) scale(1);opacity:1}
  48%{transform:translate(88px,-16px) scale(.92);opacity:1}
  60%{transform:translate(126px,10px) scale(.68);opacity:0}
  60.1%{transform:translate(0,0) scale(1);opacity:0}
  86%,100%{transform:translate(0,0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){.pack-cone{animation:none!important}}

/* 診断結果カード */
.diag-res{display:none}
.diag-res.show{display:block;animation:fadeUp .7s var(--ease)}
.type-card{border:1px solid var(--line-gold);background:linear-gradient(135deg,rgba(30,48,79,.65),rgba(5,8,15,.9));
  padding:clamp(32px,4.5vw,54px);text-align:center;position:relative;overflow:hidden}
.type-card .tico{width:88px;height:88px;margin:0 auto 22px}
.type-card .tico svg{width:100%;height:100%;stroke:var(--gold-400);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.type-card .tl{font-family:var(--ff-en);font-size:11px;letter-spacing:.28em;color:var(--gold-500)}
.type-card h3{font-family:var(--ff-serif);font-size:clamp(24px,3.4vw,38px);font-weight:600;letter-spacing:.08em;margin:14px 0 18px}
.type-card p{color:var(--text-soft);max-width:56ch;margin:0 auto}
.type-tags{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:24px}
.type-tags span{font-size:13px;padding:7px 16px;border:1px solid var(--line-gold);color:var(--gold-300)}

/* 数字インフォ */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line-gold)}
.fig{background:rgba(8,13,26,.8);padding:36px 22px;text-align:center}
.fig .v{font-family:var(--ff-en);font-weight:200;font-size:clamp(34px,4vw,52px);line-height:1;color:var(--gold-300)}
.fig .v small{font-size:.34em;color:var(--gold-500);margin-left:4px}
.fig .c{margin-top:12px;font-size:13.5px;color:var(--text-soft);letter-spacing:.08em}

@media (max-width:1180px){
  .hub{grid-template-columns:repeat(2,1fr)}
  .career-road{grid-template-columns:repeat(3,1fr);row-gap:44px}
  .career-road .rs:nth-child(3)::before{display:none}
  .figs{grid-template-columns:repeat(2,1fr)}
  .drop.wide3{min-width:600px;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hub,.career-road,.figs{grid-template-columns:1fr}
  .career-road .rs::before{display:none}
  .res-2col,.gd-step,.signal{grid-template-columns:1fr}
  .gd-step:nth-child(even) .illust{order:0}
  .quiz-foot{justify-content:stretch}
  .quiz-foot .btn{width:100%}
  .mode-tabs{flex-direction:column}
}

@media (max-width:860px){ .qe-grid{grid-template-columns:1fr!important} .access-grid{grid-template-columns:1fr!important} }

/* ============================================================
   新デザイン 上書き層（V4 鉛筆・スモークブルー）
   ここから下が、暗いままにしておく部分と、明るい紙面に合わせる調整です
   ============================================================ */

/* --- 紙の下地 --- */
body::before{
  background-image:
    linear-gradient(rgba(40,65,85,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,65,85,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 92% 76% at 50% 26%,#000 26%,transparent 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
::selection{background:var(--ink-700);color:#fff}

/* --- ボタン --- */
.btn-gold{background:var(--ink-700);color:var(--sand);font-weight:600;border-color:var(--ink-700)}
.btn-gold:hover{background:var(--ink-800);box-shadow:0 18px 40px -22px rgba(19,32,41,.55)}
.btn-line{color:var(--gold-400)}
.btn-line:hover{color:#fff}
.ripple{background:rgba(237,216,210,.5)}

/* --- ヘッダー：常に暗い面の上に乗る --- */
.header{color:var(--td)}
.header.scrolled{background:rgba(19,32,41,.90);border-bottom-color:rgba(237,216,210,.22)}
.header .logo-txt strong{color:var(--sand)}
.header .logo-txt span{color:var(--td)}
.header .gnav .caret{color:var(--sand)}
.header .gnav>li>a{color:var(--td)}
.header .gnav>li:hover>a{color:var(--sand)}
.header .gnav>li>a::after{background:var(--sand)}
.header .caret{border-color:var(--sand)}
.header .tel-block .lb{color:var(--td-sub)}
.header .tel-block .no{color:var(--sand)}
.btn-login{color:var(--sand);border-color:rgba(237,216,210,.38)}
.btn-login::before{background:var(--sand)}
.btn-login:hover{color:var(--ink-900);border-color:var(--sand)}
.burger i{background:var(--sand)}
.progress{background:linear-gradient(90deg,var(--ink-700),var(--sand))}

.drop{background:rgba(19,32,41,.96);border-color:rgba(237,216,210,.22)}
.drop a{color:var(--td-sub)}
.drop a:hover{color:var(--sand);background:rgba(237,216,210,.08)}
.drop a::before{background:var(--sand)}

.mnav{background:rgba(19,32,41,.985);color:var(--td)}
.mnav details{border-bottom-color:rgba(237,216,210,.16)}
.mnav summary::after{color:var(--sand)}
.mnav a{color:var(--td-sub)}
.mnav .m-single{color:var(--td)}
.mnav .btn-line{color:var(--sand);border-color:rgba(237,216,210,.45)}

/* --- ヒーロー／ページ見出し：暗い帯 --- */
.hero,.page-hero,.login-page{background:var(--ink-900);color:var(--td)}
.hero .hero-h1,.page-hero h1{color:var(--td)}
.hero .hero-lead,.page-hero p{color:var(--td-sub)}
.hero .hero-side,.hero .scroll-cue,.hero-facts .t{color:rgba(185,199,207,.75)}
.hero-tag{color:var(--sand);border-color:rgba(237,216,210,.34);background:rgba(237,216,210,.07)}
.hero-h1 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--sand)}
.hero-facts div{border-left-color:rgba(237,216,210,.28)}
.hero-facts .n{color:var(--sand)}
.hero .btn-line,.page-hero .btn-line{color:var(--sand);border-color:rgba(237,216,210,.5)}
.hero .btn-line:hover,.page-hero .btn-line:hover{color:var(--ink-900)}
.hero .btn-line::before,.page-hero .btn-line::before{background:var(--sand)}
.scroll-cue::after{background:linear-gradient(180deg,var(--sand),transparent)}
.scroll-cue i::before{background:var(--sand)}
.page-hero .crumb,.page-hero .crumb a{color:rgba(185,199,207,.8)}
.page-hero .en{color:var(--sand)}
.blip{background:var(--sand)}

/* --- フッター --- */
.footer{background:var(--ink-900);color:var(--td-sub);border-top:none}
.footer h5{color:var(--sand)}
.footer a{color:var(--td-sub)}
.footer a:hover{color:var(--sand)}
.footer .logo-txt strong{color:var(--sand)}
.footer .logo-txt span{color:var(--td)}
.footer .f-brand p{color:rgba(185,199,207,.72)}
.footer .cr,.footer .f-bottom{color:rgba(185,199,207,.6);border-top-color:rgba(237,216,210,.14)}
.sticky-cta .t{background:var(--ink-800);color:var(--td)}
.sticky-cta .m{background:var(--sand);color:var(--ink-900)}

/* --- 明るい紙面に合わせる調整 --- */
.tbl th{background:rgba(40,65,85,.045);color:var(--gold-400)}
.dtbl td{border-bottom-color:rgba(19,32,41,.09)}
.form input,.form select,.form textarea{background:#fff;border-color:var(--line);color:var(--text)}
.qprog{background:rgba(19,32,41,.09)}
.qopt{background:#fff}
.qopt:hover{background:var(--navy-800)}
.stack .s4{background:rgba(40,65,85,.18)}
.donut{background:conic-gradient(var(--gold-400) 0 68%,rgba(19,32,41,.10) 68% 100%)}
.gal span,.case-img .tagline{color:var(--ink-800);text-shadow:0 1px 10px rgba(244,247,247,.9)}
.case-img::before{display:none}
.case-img .kind{background:var(--ink-700);color:var(--sand)}
.card,.svc,.cta-card,.panel,.qbox,.type-card,.voice,.box,.login-card,.news-list li{background:#fff}
.chart,.smap{background:#fff}

/* ============================================================
   トップページの動き（V4より移植）
   1 信号機ローディング／2 道路と車のライト／3 LED矢印板
   4 無線ログ／5 地図の点灯／6 タイムライン／7 コーンの揺れ
   ============================================================ */

/* 1) 信号機ローディング  青 → 黄 → 赤 → 青（青で停止） */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink-900);
  display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{display:grid;justify-items:center}
.signal-box{display:flex;flex-direction:column;gap:14px;padding:20px 16px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(237,216,210,.22)}
.signal-box i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.10);
  transition:background .25s linear,box-shadow .25s linear;display:block}
.signal-box.s-red    i:nth-child(1){background:#D45B4C;box-shadow:0 0 26px 4px rgba(212,91,76,.55)}
.signal-box.s-yellow i:nth-child(2){background:#E0B453;box-shadow:0 0 26px 4px rgba(224,180,83,.55)}
.signal-box.s-green  i:nth-child(3){background:#4FA98A;box-shadow:0 0 26px 4px rgba(79,169,138,.55)}
#loader .lb{margin-top:22px;font-family:var(--ff-en);font-size:11px;letter-spacing:.34em;
  color:var(--sand);text-align:center}

/* 2) 道路と、手前へ流れる車のライト */
.road{position:absolute;left:0;bottom:0;width:100%;height:46%;overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%),linear-gradient(90deg,transparent 4%,#000 44%);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%),linear-gradient(90deg,transparent 4%,#000 44%);
  mask-composite:intersect;-webkit-mask-composite:source-in}
.road svg{position:absolute;inset:0;width:100%;height:100%}
.road .lane{stroke:rgba(210,220,220,.22);stroke-width:1.2;fill:none}
.road .edge{stroke:rgba(210,220,220,.42);stroke-width:1.8;fill:none}
.road .dash{stroke:rgba(237,216,210,.52);stroke-width:3;stroke-dasharray:20 30;fill:none;
  animation:dashmove 5s linear infinite}
.road .tarmac{fill:rgba(255,255,255,.03)}
@keyframes dashmove{to{stroke-dashoffset:-84}}
.car{position:absolute;left:50%;bottom:0;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 0 12px 4px rgba(237,216,210,.55);
  transform-origin:center;animation:drive 9s linear infinite}
.car.b{background:rgba(237,216,210,.85);box-shadow:0 0 10px 3px rgba(217,185,175,.5)}
@keyframes drive{
  0%{transform:translate(var(--dx),var(--dy)) scale(.25);opacity:0}
  12%{opacity:.9}
  85%{opacity:.85}
  100%{transform:translate(0,0) scale(2.6);opacity:0}
}

/* 3) LED矢印板 */
.arrowband{background:var(--ink-900);padding:14px 0;overflow:hidden;
  border-block:1px solid rgba(237,216,210,.16)}
.arrows{display:flex;gap:10px;justify-content:center;align-items:center}
.arrows span{width:16px;height:16px;flex:none;opacity:.18;transition:opacity .1s linear}
.arrows span svg{width:100%;height:100%;fill:var(--sand)}
.arrows span.lit{opacity:1;filter:drop-shadow(0 0 6px rgba(237,216,210,.6))}
.arrowband .cap{text-align:center;margin-top:8px;font-family:var(--ff-en);font-size:10px;
  letter-spacing:.3em;color:rgba(237,216,210,.55)}

/* 4) 無線ログ */
.radio-wrap{display:grid;grid-template-columns:1fr 420px;gap:clamp(28px,5vw,60px);align-items:center}
.radio{background:var(--ink-900);border:1px solid rgba(237,216,210,.22);overflow:hidden}
.radio-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
  border-bottom:1px solid rgba(237,216,210,.16);font-family:var(--ff-en);font-size:10.5px;
  letter-spacing:.2em;color:var(--sand)}
.radio-h .dot{display:flex;align-items:center;gap:8px}
.radio-h .dot i{width:7px;height:7px;border-radius:50%;background:#5FD38A;animation:live 2.6s infinite}
.radio-b{height:246px;overflow:hidden;padding:14px 18px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:9px}
.radio-b .ln{display:grid;grid-template-columns:56px 1fr;gap:12px;font-size:13.5px;align-items:baseline;
  animation:lineIn .5s var(--ease)}
.radio-b .ln .t{font-family:var(--ff-en);font-size:12px;color:var(--sand);letter-spacing:.06em}
.radio-b .ln .m{color:var(--td-sub)}
.radio-b .ln .m b{color:var(--td);font-weight:500}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.radio-f{padding:10px 18px;border-top:1px solid rgba(237,216,210,.12);
  font-size:11.5px;color:rgba(185,199,207,.7)}

/* 5) 対応エリアの地図（順に点灯） */
.map-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
.areamap{position:relative;border:1px solid rgba(40,65,85,.14);background:#fff;padding:18px}
.areamap svg{width:100%;height:auto;display:block}
.areamap .st{stroke:rgba(89,117,148,.28);fill:none;stroke-width:1.4}
.areamap .st2{stroke:rgba(89,117,148,.16);fill:none;stroke-width:1}
.areamap .blk{fill:rgba(210,220,220,.5)}
.areamap .pt{fill:var(--gold-500);opacity:.25;transition:opacity .4s,fill .4s}
.areamap .pt.on{opacity:1;fill:var(--ink-700)}
.areamap .halo{fill:none;stroke:var(--ink-700);stroke-width:1.5;opacity:0}
.areamap .halo.on{animation:halo 1.4s var(--ease)}
@keyframes halo{0%{r:4;opacity:.8}100%{r:26;opacity:0}}
.map-label{position:absolute;left:18px;bottom:14px;font-family:var(--ff-en);font-size:10px;
  letter-spacing:.22em;color:var(--gold-500)}

/* 6) 一日の流れ（スクロールで線が伸びる） */
.tl{position:relative;margin-top:34px;padding-left:32px}
.tl::before{content:'';position:absolute;left:-25px;top:6px;bottom:6px;width:1px;background:rgba(40,65,85,.2)}
.tl .fillbar{position:absolute;left:-25px;top:6px;width:1px;height:0;background:var(--gold-500);
  transition:height .18s linear}
.tl li{position:relative;padding-bottom:26px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-32px;top:9px;width:15px;height:15px;border-radius:50%;
  background:var(--navy-900);border:1px solid rgba(40,65,85,.3);transition:all .5s var(--ease)}
.tl li.on::before{background:var(--gold-500);border-color:var(--gold-500);box-shadow:0 0 0 5px rgba(89,117,148,.16)}
.tl .time{font-family:var(--ff-en);font-size:17px;color:var(--gold-500);letter-spacing:.06em}
.tl h4{font-family:var(--ff-serif);font-size:17px;font-weight:600;margin:2px 0 6px;letter-spacing:.04em}
.tl p{font-size:14.5px;color:var(--text-soft)}

/* 7) コーン（軽く揺れる） */
.cones{display:flex;gap:22px;align-items:flex-end;justify-content:center;margin-top:8px}
.cone{width:56px;height:auto;transform-origin:50% 100%}
.cone svg{width:100%;height:auto}
.cone.sway{animation:sway 3.4s var(--ease) infinite}
.cone:nth-child(2).sway{animation-delay:.35s}
.cone:nth-child(3).sway{animation-delay:.7s}
.cone:nth-child(4).sway{animation-delay:1.05s}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}

@media (max-width:900px){
  .radio-wrap,.map-wrap{grid-template-columns:1fr}
  .radio-b{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .road .dash,.car,.cone.sway{animation:none!important}
  #loader{display:none}
}

/* ============================================================
   読みやすさの調整（明るい紙面での文字色・残っていた濃い箱）
   ============================================================ */

/* 補助テキストが薄すぎたので濃くする */
:root{ --muted:#5A6C76; --gold-600:#6E88A3; }

/* 明るい面に残っていた濃い箱を、白い面に */
.rec-point{background:#fff}
.login-card{background:#fff}
.result{background:linear-gradient(135deg,var(--navy-750),var(--navy-800))}
.type-card{background:linear-gradient(135deg,var(--navy-750),var(--navy-800))}
.fig{background:#fff}
.cta-card,.qbox{background:#fff}
.login-page .login-card h1,.login-card h1{color:var(--text)}
.login-page{background:var(--ink-900)}
.login-band h1,.login-band .en{color:var(--td)}

/* 状態を示す色（白地でも読める濃さに） */
.up,.pill.ok,.ok{color:#2E7D5B}
.dn,.pill.wait,.wait{color:#B04A38}
.tbl th,.dtbl th,.toolbar label,.mgroup{color:#4E657C}

/* 小さい注記が薄くなりすぎないように */
.note,.cap{color:var(--muted)}
.sec-lead,.p,.detail-body p,.card p,.svc p{color:#43555F}
.kpi .d .up{color:#2E7D5B}
.kpi .d .dn{color:#B04A38}

/* 暗い面の上の文字は、明るい側の調整に巻き込まれないようにする */
.header .drop a,.drop a{color:var(--td-sub)}
.drop a:hover{color:var(--sand)}
.hero small,.hero .cap,.hero .note,
.page-hero small,.page-hero .cap,
.footer small,.footer .cap,.footer .cr,
.band-dark small,.band-dark .cap,#radio small,#radio .cap{color:var(--td-sub)}
.hero-facts .t,.hero-facts small{color:rgba(185,199,207,.85)}
.mnav details ul a{color:var(--td-sub);border-left-color:rgba(237,216,210,.22)}
.mnav summary{color:var(--td)}
.footer .f-map a,.footer ul a{color:var(--td-sub)}
.footer .f-map a:hover,.footer ul a:hover{color:var(--sand)}

/* ============================================================
   4色の帯（V4のリズムを全ページへ）
   白 #fff ／ 淡いブルーグレー #d2dcdc ／ サンド #edd8d2 ／ 濃紺 #284155
   ============================================================ */
.band-white{background:#fff}
.band-light{background:var(--navy-700)}
.band-sand{background:var(--sand)}
.band-deep{background:var(--ink-700);color:var(--td)}

/* 淡い帯・サンドの帯の上では、カードを白く浮かせる */
.band-light .card,.band-light .svc,.band-light .cta-card,.band-light .panel,
.band-light .qbox,.band-light .type-card,.band-light .voice,.band-light .box,
.band-light .news-list li,.band-light .stat,.band-light .rec-point,.band-light .tool,
.band-light .case,.band-light .pcl-card,.band-light .hub li,
.band-sand .card,.band-sand .svc,.band-sand .cta-card,.band-sand .panel,
.band-sand .qbox,.band-sand .box,.band-sand .stat,.band-sand .tool,
.band-sand .case,.band-sand .hub li{background:#fff}
.band-light .form input,.band-light .form select,.band-light .form textarea,
.band-sand .form input,.band-sand .form select,.band-sand .form textarea{background:#fff}
.band-light .tbl,.band-sand .tbl{background:#fff}
.band-light .detail-visual,.band-sand .detail-visual{background:rgba(255,255,255,.55)}
.band-light .case-img.pfig::after{background:linear-gradient(transparent,rgba(228,236,236,.94) 72%)}
.band-sand .case-img.pfig::after{background:linear-gradient(transparent,rgba(245,229,224,.94) 72%)}

/* 帯どうしの継ぎ目に線は要らない */


/* 濃紺の帯 */
.band-deep .sec-title,.band-deep h2,.band-deep h3,.band-deep h4{color:var(--td)}
.band-deep .sec-lead,.band-deep p,.band-deep li{color:var(--td-sub)}
.band-deep .sec-label{color:var(--sand)}
.band-deep .card,.band-deep .box{background:rgba(255,255,255,.06);border-color:rgba(237,216,210,.2)}
/* 淡い帯・サンドの帯の上では、補助テキストをもう一段濃く */
.band-light p,.band-light li,.band-light span,.band-light td,.band-sand p,.band-sand li,.band-sand span,.band-sand td{color:#3E515C}
.band-light .sec-lead,.band-sand .sec-lead,.band-light .cap,.band-sand .cap{color:#43555F}
.band-light .sec-label,.band-sand .sec-label{color:#4A6480}

/* 帯どうしの境目に線を出さない */
.section + .section{border-top:none}
.rule{background:linear-gradient(90deg,transparent,rgba(40,65,85,.14) 30%,rgba(40,65,85,.14) 70%,transparent)}

/* ============================================================
   帯の境目をなくす（上下を隣の色へ溶かす）
   ============================================================ */
.hero,.page-hero{position:relative}

.hero .hero-inner,.page-hero .wrap{position:relative;z-index:5}
.hero .hero-guard{z-index:5}
.arrowband{border-block:none;position:relative}


.sticky-cta{box-shadow:0 -18px 40px -24px rgba(19,32,41,.5)}

/* 社員ログインの帯（濃紺のパネル） */
.login-band{background:linear-gradient(120deg,var(--ink-700),var(--ink-900));border-color:rgba(237,216,210,.24)}
.login-band h1,.login-band h2,.login-band h3,.login-band .en,.login-band strong{color:var(--td)}
.login-band p,.login-band span,.login-band li{color:var(--td-sub)}
.login-band .role,.login-band .login-roles a{color:var(--sand);border-color:rgba(237,216,210,.35)}
.login-band .role:hover,.login-band .login-roles a:hover{background:rgba(237,216,210,.12);color:var(--sand)}
.login-band .btn-gold{background:var(--sand);color:var(--ink-900);border-color:var(--sand)}
.login-band .btn-gold:hover{background:#F6E7E2}

/* ============================================================
   ずらして重なる色面（横一直線の境目をつくらない）
   ============================================================ */
body{background:var(--navy-900)}
.section.has-blk{position:relative;background:none!important}
.section.has-blk > .wrap,.section.has-blk > div{position:relative;z-index:1}
.blk{position:absolute;z-index:0;pointer-events:none;display:block}

/* 左に大きく寄せた淡いブルーグレー（上へはみ出す） */
.blk-a{left:0;width:min(66%,900px);top:-8%;height:84%;background:var(--navy-700)}
.blk-a::after{content:'';position:absolute;right:-32px;bottom:-40px;width:min(38%,300px);height:46%;
  background:rgba(255,255,255,.72)}

/* 右に寄せた白い面＋サンドの角枠 */
.blk-b{right:0;width:min(58%,780px);top:10%;height:92%;background:#fff}
.blk-b::before{content:'';position:absolute;left:-34px;top:-34px;width:min(46%,220px);height:210px;
  border-left:2px solid var(--sand-deep);border-top:2px solid var(--sand-deep)}

/* 右に寄せたサンド */
.blk-c{right:0;width:min(60%,820px);top:-6%;height:80%;background:var(--sand)}
.blk-c::after{content:'';position:absolute;left:-40px;bottom:-56px;width:min(40%,320px);height:52%;
  background:var(--navy-700)}

/* 左に寄せた白 */
.blk-d{left:0;width:min(54%,740px);top:14%;height:82%;background:#fff}
.blk-d::after{content:'';position:absolute;right:-46px;top:-52px;width:min(36%,280px);height:44%;
  background:var(--navy-700)}

/* 濃い面は斜めに切る */
.sec-diag{position:relative;background:none!important;color:var(--td)}
.sec-diag::before{content:'';position:absolute;inset:-70px 0 -70px 0;z-index:0;
  background:linear-gradient(115deg,var(--ink-700),var(--ink-900) 62%);
  clip-path:polygon(0 84px,100% 0,100% calc(100% - 84px),0 100%)}
.sec-diag > .wrap,.sec-diag > div{position:relative;z-index:1}

/* ヒーローの下端を斜めに抜く */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:112px;z-index:4;
  pointer-events:none;background:var(--navy-900);
  clip-path:polygon(0 100%,100% 6px,100% 100%)}
.page-hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:76px;z-index:4;
  pointer-events:none;background:var(--navy-900);
  clip-path:polygon(0 100%,100% 4px,100% 100%)}

/* フッターの上端も斜めに */
.footer{position:relative;background:var(--ink-900);margin-top:-1px}
.footer::before{content:'';position:absolute;left:0;right:0;top:-70px;height:72px;
  background:var(--ink-900);clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.arrowband{position:relative;z-index:2}

@media (max-width:860px){
  .blk-a,.blk-b,.blk-c,.blk-d{width:88%!important;height:70%!important}
  .blk-a::after,.blk-b::before,.blk-c::after,.blk-d::after{display:none}
}
/* 色面がヒーローの上に乗らないようにする */
.hero,.page-hero,.login-page,.arrowband{position:relative;z-index:3}
.section.has-blk,.sec-diag{z-index:1}
.anchors{position:relative;z-index:3;background:#fff}
.anchors + *,.wrap > .anchors{z-index:3}
.anchor-wrap{z-index:4}

/* ============================================================
   崩し（MORI のポスターを参考に）
   半透明の面／細い罫線とドット／またぐ枠線／手描きの線
   ============================================================ */

/* 1) 面を半透明にして、重なりを見せる */
.blk-a{background:rgba(210,220,220,.82)}
.blk-a::after{background:rgba(255,255,255,.62)}
.blk-b{background:rgba(255,255,255,.86)}
.blk-c{background:rgba(237,216,210,.78)}
.blk-c::after{background:rgba(210,220,220,.7)}
.blk-d{background:rgba(255,255,255,.9)}
.blk-d::after{background:rgba(210,220,220,.72)}

/* 2) 細い罫線とドット（不揃いに走らせる） */
.net{position:absolute;inset:-40px 0;z-index:0;pointer-events:none;opacity:.9;
  background-image:
    linear-gradient(90deg,rgba(40,65,85,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,65,85,.08) 1px,transparent 1px),
    linear-gradient(180deg,rgba(40,65,85,.10) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(89,117,148,.5) 1.7px,transparent 2px);
  background-size:27.3% 100%, 9.1% 100%, 100% 37%, 27.3% 37%;
  background-position:6% 0, 3% 0, 0 12%, 6% 12%}
.sec-diag .net{opacity:.5;
  background-image:
    linear-gradient(90deg,rgba(237,216,210,.16) 1px,transparent 1px),
    linear-gradient(180deg,rgba(237,216,210,.12) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(237,216,210,.5) 1.7px,transparent 2px);
  background-size:27.3% 100%, 100% 37%, 27.3% 37%;
  background-position:6% 0, 0 12%, 6% 12%}

/* 3) 面をまたぐ細い枠線 */
.oline{position:absolute;z-index:0;pointer-events:none;
  right:6%;top:-38px;width:min(30%,340px);height:min(52%,300px);
  border:1px solid rgba(40,65,85,.35)}
.oline::after{content:'';position:absolute;left:-46%;bottom:-44px;width:52%;height:46%;
  border:1px solid rgba(212,91,76,.35)}

/* 4) 手描きの線（鉛筆フィルタを流用） */
.scribble{position:absolute;left:2%;top:6%;width:min(26%,300px);height:130px;z-index:0;
  pointer-events:none;opacity:.5;
  background:no-repeat center/contain
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130'%3E%3Cellipse cx='150' cy='65' rx='140' ry='52' fill='none' stroke='%23597594' stroke-width='1.4'/%3E%3Cellipse cx='150' cy='66' rx='132' ry='46' fill='none' stroke='%23597594' stroke-width='1' opacity='.7'/%3E%3C/svg%3E")}

/* 5) 図版を縦の短冊で切ってずらす（MORIの絵の切り方） */
.pfig.sliced{position:relative}
.pfig.sliced .pcl-svg{
  -webkit-mask-image:linear-gradient(90deg,#000 0 7%,transparent 7% 19%,#000 19% 76%,transparent 76% 89%,#000 89% 100%);
  mask-image:linear-gradient(90deg,#000 0 7%,transparent 7% 19%,#000 19% 76%,transparent 76% 89%,#000 89% 100%)}
.pfig.sliced .pcl-shift{position:absolute;left:0;top:0;width:100%;height:auto;
  transform:translateY(15px);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 7%,#000 7% 19%,transparent 19% 76%,#000 76% 89%,transparent 89% 100%);
  mask-image:linear-gradient(90deg,transparent 0 7%,#000 7% 19%,transparent 19% 76%,#000 76% 89%,transparent 89% 100%)}

/* 6) 図版の上に薄い縦の面を重ねる */
.veil{position:absolute;inset:0;z-index:2;pointer-events:none}
.veil i{position:absolute;background:rgba(255,255,255,.34)}
.veil i:nth-child(1){left:8%;width:11%;top:-6%;bottom:22%}
.veil i:nth-child(2){left:33%;width:9%;top:14%;bottom:-8%}
.veil i:nth-child(3){left:58%;width:13%;top:-10%;bottom:34%}
.veil i:nth-child(4){left:79%;width:8%;top:26%;bottom:-4%;background:rgba(237,216,210,.34)}
.sec-diag .veil i{background:rgba(237,216,210,.14)}

@media (max-width:860px){
  .oline,.scribble{display:none}
  .net{opacity:.55}
  .pfig.sliced .pcl-svg,.pfig.sliced .pcl-shift{-webkit-mask-image:none;mask-image:none}
  .pfig.sliced .pcl-shift{display:none}
}

/* ============================================================
   濃い色を主役に戻す（MORI のポスターの比率）
   画面の大半が #1B2E3E / #284155、そこへ #d2dcdc と #edd8d2 を差す
   ============================================================ */
:root{
  --paper-deep:#1B2E3E;
  --paper-mid:#284155;
  --paper-pale:#d2dcdc;
  --paper-sand:#edd8d2;
}
body{background:var(--paper-deep);color:var(--td)}
body::before{background-image:
  linear-gradient(rgba(237,216,210,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(237,216,210,.05) 1px,transparent 1px)}
body::after{opacity:.3}

/* --- セクションの面（すべて不透明・べた） --- */
.section.sec-ink,.section.sec-mid,.section.sec-pale,.section.sec-sand,.section.sec-white{
  position:relative;background:none}
.sec-ink::before,.sec-mid::before,.sec-pale::before,.sec-sand::before,.sec-white::before{
  content:'';position:absolute;inset:-80px 0;z-index:0}
.sec-ink::before{background:var(--paper-deep)}
.sec-mid::before{background:var(--paper-mid)}
.sec-pale::before{background:var(--paper-pale)}
.sec-sand::before{background:var(--paper-sand)}
.sec-white::before{background:#fff}
.sec-ink > *,.sec-mid > *,.sec-pale > *,.sec-sand > *,.sec-white > *{position:relative;z-index:1}

/* 上下を斜めに切る（向きを交互に） */
.cut-a::before{clip-path:polygon(0 80px,100% 0,100% calc(100% - 80px),0 100%)}
.cut-b::before{clip-path:polygon(0 0,100% 80px,100% 100%,0 calc(100% - 80px))}
.section{margin-block:-40px;padding-block:clamp(112px,11vw,180px)}

/* --- 濃い面の上の文字 --- */
.sec-ink,.sec-mid{color:var(--td)}
.sec-ink .sec-title,.sec-mid .sec-title,.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,.sec-ink h5,
.sec-mid h1,.sec-mid h2,.sec-mid h3,.sec-mid h4,.sec-mid h5{color:var(--td)}
.sec-ink .sec-title em,.sec-mid .sec-title em{color:var(--sand)}
.sec-ink .sec-label,.sec-mid .sec-label{color:var(--sand)}
.sec-ink .sec-label::before,.sec-mid .sec-label::before{background:linear-gradient(90deg,rgba(237,216,210,.3),var(--sand))}
.sec-ink p,.sec-ink li,.sec-ink td,.sec-ink span,.sec-ink .sec-lead,.sec-ink .p,
.sec-mid p,.sec-mid li,.sec-mid td,.sec-mid span,.sec-mid .sec-lead,.sec-mid .p{color:var(--td-sub)}
.sec-ink .card,.sec-ink .svc,.sec-ink .box,.sec-ink .panel,.sec-ink .stat,.sec-ink .tool,
.sec-ink .cta-card,.sec-ink .qbox,.sec-ink .voice,.sec-ink .news-list li,.sec-ink .type-card,
.sec-ink .rec-point,.sec-ink .hub li,.sec-ink .case,.sec-ink .pcl-card,
.sec-mid .card,.sec-mid .svc,.sec-mid .box,.sec-mid .panel,.sec-mid .stat,.sec-mid .tool,
.sec-mid .cta-card,.sec-mid .qbox,.sec-mid .voice,.sec-mid .news-list li,.sec-mid .type-card,
.sec-mid .rec-point,.sec-mid .hub li,.sec-mid .case,.sec-mid .pcl-card{
  background:rgba(255,255,255,.055);border-color:rgba(237,216,210,.18)}
.sec-ink .card h4,.sec-mid .card h4,.sec-ink .svc h4,.sec-mid .svc h4{color:var(--td)}
.sec-ink .tbl th,.sec-mid .tbl th{background:rgba(255,255,255,.05);color:var(--sand)}
.sec-ink .tbl td,.sec-mid .tbl td,.sec-ink .tbl,.sec-mid .tbl{border-color:rgba(237,216,210,.16);color:var(--td-sub)}
.sec-ink .btn-line,.sec-mid .btn-line{color:var(--sand);border-color:rgba(237,216,210,.45)}
.sec-ink .btn-line::before,.sec-mid .btn-line::before{background:var(--sand)}
.sec-ink .btn-line:hover,.sec-mid .btn-line:hover{color:var(--ink-900)}
.sec-ink .btn-gold,.sec-mid .btn-gold{background:var(--sand);color:var(--ink-900);border-color:var(--sand)}
.sec-ink .rule,.sec-mid .rule{background:linear-gradient(90deg,transparent,rgba(237,216,210,.28) 30%,rgba(237,216,210,.28) 70%,transparent)}
.sec-ink .pfig,.sec-mid .pfig{color:var(--td)}
.sec-ink .net,.sec-mid .net{opacity:.5;
  background-image:
    linear-gradient(90deg,rgba(237,216,210,.16) 1px,transparent 1px),
    linear-gradient(180deg,rgba(237,216,210,.11) 1px,transparent 1px),
    radial-gradient(circle at 0 0,rgba(237,216,210,.5) 1.7px,transparent 2px);
  background-size:27.3% 100%, 100% 37%, 27.3% 37%;
  background-position:6% 0, 0 12%, 6% 12%}
.sec-ink .veil i,.sec-mid .veil i{background:rgba(237,216,210,.13)}
.sec-ink .oline,.sec-mid .oline{border-color:rgba(237,216,210,.34)}
.sec-ink .oline::after,.sec-mid .oline::after{border-color:rgba(237,216,210,.22)}
.sec-ink .form input,.sec-ink .form select,.sec-ink .form textarea,
.sec-mid .form input,.sec-mid .form select,.sec-mid .form textarea{
  background:rgba(255,255,255,.06);border-color:rgba(237,216,210,.2);color:var(--td)}

/* --- 明るい面の上の文字 --- */
.sec-pale,.sec-sand,.sec-white{color:var(--text)}
.sec-pale .card,.sec-pale .svc,.sec-pale .box,.sec-pale .panel,.sec-pale .stat,.sec-pale .tool,
.sec-pale .cta-card,.sec-pale .qbox,.sec-pale .voice,.sec-pale .news-list li,.sec-pale .case,
.sec-pale .rec-point,.sec-pale .hub li,.sec-pale .type-card,.sec-pale .pcl-card,
.sec-sand .card,.sec-sand .svc,.sec-sand .box,.sec-sand .panel,.sec-sand .stat,.sec-sand .tool,
.sec-sand .cta-card,.sec-sand .qbox,.sec-sand .voice,.sec-sand .news-list li,.sec-sand .case,
.sec-sand .hub li,.sec-sand .pcl-card{background:#fff}
.sec-pale .tbl,.sec-sand .tbl,.sec-pale .form input,.sec-sand .form input,
.sec-pale .form select,.sec-sand .form select,.sec-pale .form textarea,.sec-sand .form textarea{background:#fff}
.sec-white .card,.sec-white .svc,.sec-white .stat,.sec-white .case{background:#fff}

/* --- 面をまたぐ小さな面（崩し） --- */
.chip{position:absolute;z-index:0;pointer-events:none}
.chip-pale{left:0;width:min(26%,300px);top:-60px;height:150px;background:var(--paper-pale)}
.chip-sand{right:8%;width:min(20%,240px);bottom:-56px;height:140px;background:var(--paper-sand)}
.chip-mid{right:0;width:min(30%,340px);top:-52px;height:130px;background:var(--paper-mid)}
.chip-white{left:9%;width:min(18%,210px);bottom:-50px;height:126px;background:#fff}

/* ヒーロー・フッターも同じ濃さで揃える */
.hero,.page-hero,.login-page{background:var(--paper-deep)}
.hero::after,.page-hero::after{background:var(--paper-deep)}
.footer::before{display:none}
.footer{background:var(--ink-900)}
.arrowband{background:var(--ink-900)}

/* ============================================================
   面の色に合わせて、文字と箱の色を決め切る
   ============================================================ */
/* 濃い面：文字は明るく */
.sec-ink,.sec-ink p,.sec-ink li,.sec-ink td,.sec-ink span,.sec-ink small,.sec-ink dd,.sec-ink dt,
.sec-mid,.sec-mid p,.sec-mid li,.sec-mid td,.sec-mid span,.sec-mid small,.sec-mid dd,.sec-mid dt{
  color:var(--td-sub)!important}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,.sec-ink h5,.sec-ink strong,.sec-ink b,
.sec-ink .sec-title,.sec-ink .val,.sec-ink .num,.sec-ink .v,
.sec-mid h1,.sec-mid h2,.sec-mid h3,.sec-mid h4,.sec-mid h5,.sec-mid strong,.sec-mid b,
.sec-mid .sec-title,.sec-mid .val,.sec-mid .num,.sec-mid .v{color:var(--td)!important}
.sec-ink .sec-label,.sec-mid .sec-label,.sec-ink .k,.sec-mid .k,.sec-ink em,.sec-mid em,
.sec-ink .en,.sec-mid .en,.sec-ink .time,.sec-mid .time,.sec-ink th,.sec-mid th,
.sec-ink .cta-tel,.sec-mid .cta-tel,.sec-ink .lb,.sec-mid .lb{color:var(--sand)!important}
.sec-ink a:not(.btn):not(.btn-gold),.sec-mid a:not(.btn):not(.btn-gold){color:var(--td)!important}
.sec-ink a:not(.btn):hover,.sec-mid a:not(.btn):hover{color:var(--sand)!important}
[style*="navy-700),var(--navy-800)"],[style*="navy-700),var(--navy-800)"] h1,[style*="navy-700),var(--navy-800)"] h2,
[style*="navy-700),var(--navy-800)"] h3,[style*="navy-700),var(--navy-800)"] h4,[style*="navy-700),var(--navy-800)"] h5,
[style*="navy-700),var(--navy-800)"] p,[style*="navy-700),var(--navy-800)"] li,[style*="navy-700),var(--navy-800)"] span,
[style*="navy-700),var(--navy-800)"] td,[style*="navy-700),var(--navy-800)"] em,[style*="navy-700),var(--navy-800)"] strong{
  color:var(--ink-900)!important;--gold-300:#3D5570;--gold-400:#4A6485}
[style*="navy-700),var(--navy-800)"] em,[style*="navy-700),var(--navy-800)"] strong{color:var(--gold-300)!important}
[style*="navy-700),var(--navy-800)"] .btn-line{color:var(--gold-300)!important;border-color:var(--gold-300)!important}
.sec-ink .btn-gold,.sec-mid .btn-gold{color:var(--ink-900)!important}
.sec-ink .req,.sec-mid .req{background:var(--sand);color:var(--ink-900)!important}

/* 濃い面：白かった箱を沈める */
.sec-ink .detail,.sec-mid .detail,
.sec-ink .quiz,.sec-mid .quiz,
.sec-ink .fig,.sec-mid .fig,
.sec-ink .smap,.sec-mid .smap,
.sec-ink .road-anim,.sec-mid .road-anim,
.sec-ink .qopt,.sec-mid .qopt,
.sec-ink details,.sec-mid details{background:rgba(255,255,255,.055)!important;
  border-color:rgba(237,216,210,.18)!important}
.sec-ink .dot,.sec-mid .dot,.sec-ink .num,.sec-mid .num{background:rgba(237,216,210,.16)!important}
.sec-ink .s2,.sec-mid .s2{background:rgba(237,216,210,.3)!important}
.sec-ink .smap .blk,.sec-mid .smap .blk{fill:rgba(237,216,210,.18)}
.sec-ink .smap .st,.sec-mid .smap .st{stroke:rgba(237,216,210,.3)}
.sec-ink .smap .st2,.sec-mid .smap .st2{stroke:rgba(237,216,210,.16)}
.sec-ink .smap .pt,.sec-mid .smap .pt{fill:var(--sand)}
.sec-ink .smap .halo,.sec-mid .smap .halo{stroke:var(--sand)}
.sec-ink .map-label,.sec-mid .map-label{color:var(--sand)!important}
.sec-ink .tl li::before,.sec-mid .tl li::before{background:var(--ink-900);border-color:rgba(237,216,210,.4)}
.sec-ink .tl li.on::before,.sec-mid .tl li.on::before{background:var(--sand);border-color:var(--sand)}
.sec-ink .tl::before,.sec-mid .tl::before{background:rgba(237,216,210,.2)}
.sec-ink .tl .fillbar,.sec-mid .tl .fillbar{background:var(--sand)}
.sec-ink .case-img.pfig::after,.sec-mid .case-img.pfig::after{
  background:linear-gradient(transparent,rgba(27,46,62,.94) 72%)}
.sec-ink .gal.pfig::after,.sec-mid .gal.pfig::after{
  background:linear-gradient(transparent,rgba(27,46,62,.92) 76%)}
.sec-ink .gal span,.sec-mid .gal span,.sec-ink .case-img .tagline,.sec-mid .case-img .tagline{
  color:var(--td)!important;text-shadow:0 1px 10px rgba(19,32,41,.9)}

/* 明るい面：文字は濃く */
.sec-pale,.sec-pale p,.sec-pale li,.sec-pale td,.sec-pale span,.sec-pale small,
.sec-sand,.sec-sand p,.sec-sand li,.sec-sand td,.sec-sand span,.sec-sand small,
.sec-white,.sec-white p,.sec-white li,.sec-white td,.sec-white span,.sec-white small{color:#3E515C!important}
.sec-pale h1,.sec-pale h2,.sec-pale h3,.sec-pale h4,.sec-pale h5,.sec-pale strong,.sec-pale b,
.sec-sand h1,.sec-sand h2,.sec-sand h3,.sec-sand h4,.sec-sand h5,.sec-sand strong,.sec-sand b,
.sec-white h1,.sec-white h2,.sec-white h3,.sec-white h4,.sec-white h5,.sec-white strong,.sec-white b,
.sec-pale .sec-title,.sec-sand .sec-title,.sec-white .sec-title,
.sec-pale a:not(.btn),.sec-sand a:not(.btn),.sec-white a:not(.btn){color:var(--ink-800)!important}
.sec-pale .sec-label,.sec-sand .sec-label,.sec-white .sec-label,
.sec-pale .k,.sec-sand .k,.sec-white .k,.sec-pale .en,.sec-sand .en,.sec-white .en{color:#4A6480!important}
.sec-pale .btn-gold,.sec-sand .btn-gold,.sec-white .btn-gold{background:var(--ink-700);color:var(--sand)!important}
.sec-pale .pfig,.sec-sand .pfig,.sec-white .pfig{color:var(--ink-700)}
.sec-ink .hub li,.sec-mid .hub li,
.sec-ink .sig-tabs button,.sec-mid .sig-tabs button,
.sec-ink .tabs button,.sec-mid .tabs button,
.sec-ink .qopt,.sec-mid .qopt,
.sec-ink .mode-tabs button,.sec-mid .mode-tabs button,
.sec-ink .chips span,.sec-mid .chips span{
  background:rgba(255,255,255,.06)!important;border-color:rgba(237,216,210,.2)!important}
.sec-ink .hub li *,.sec-mid .hub li *,
.sec-ink .qopt,.sec-mid .qopt,.sec-ink .qopt *,.sec-mid .qopt *,
.sec-ink .sig-tabs button span,.sec-mid .sig-tabs button span{color:var(--td-sub)!important}
.sec-ink .hub li h4,.sec-mid .hub li h4,.sec-ink .hub li strong,.sec-mid .hub li strong,
.sec-ink .sig-tabs button strong,.sec-mid .sig-tabs button strong{color:var(--td)!important}
.sec-ink .sig-tabs button.on,.sec-mid .sig-tabs button.on,
.sec-ink .tabs button.on,.sec-mid .tabs button.on{background:var(--sand)!important}
.sec-ink .sig-tabs button.on *,.sec-mid .sig-tabs button.on *,
.sec-ink .tabs button.on,.sec-mid .tabs button.on{color:var(--ink-900)!important}
.sec-ink .req,.sec-mid .req{background:var(--sand)!important;color:var(--ink-900)!important}
.sec-ink .hub a,.sec-mid .hub a,.sec-ink .hub > *,.sec-mid .hub > *{
  background:rgba(255,255,255,.06)!important;border-color:rgba(237,216,210,.2)!important}
.sec-ink .hub a *,.sec-mid .hub a *{color:var(--td-sub)!important}
.sec-ink .hub a h3,.sec-mid .hub a h3,.sec-ink .hub a h4,.sec-mid .hub a h4{color:var(--td)!important}
.sec-ink .hub a .tag,.sec-mid .hub a .tag,.sec-ink .hub .ico svg,.sec-mid .hub .ico svg{color:var(--sand)!important;stroke:var(--sand)}
.sec-ink .mode-tabs button,.sec-mid .mode-tabs button,
.sec-ink .quiz-head button,.sec-mid .quiz-head button,
.sec-ink button:not(.btn):not(.burger),.sec-mid button:not(.btn):not(.burger){color:var(--td-sub)!important}
.sec-ink button.on,.sec-mid button.on{color:var(--ink-900)!important}

/* ============================================================
   MORI のポスターの色と作り
   焦茶を一枚の紙にして、長方形の面をずらして重ねる
   #332C28 / #5E4941 / #8391A0 / #E3DCD0 / #E2B9B3
   ============================================================ */
:root{
  --paper-deep:#332C28;   /* 主役の紙 */
  --paper-mid:#5E4941;    /* 中間の茶 */
  --paper-pale:#8391A0;   /* 青灰 */
  --paper-sand:#E3DCD0;   /* クリーム */
  --paper-pink:#E2B9B3;   /* ピンク */
  --dotc:#8FBBD4;         /* 小さな水色の点 */
  --ink-900:#241E1B;
  --ink-800:#332C28;
  --ink-700:#5E4941;
  --sand:#E3DCD0;
  --sand-deep:#C9BCA9;
  --td:#EDE7DC;
  --td-sub:#BCB2A6;
  --line-gold:rgba(227,220,208,.24);
  --line:rgba(227,220,208,.14);
}
body{background:var(--paper-deep);color:var(--td)}
body::before{background-image:
  linear-gradient(rgba(227,220,208,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(227,220,208,.045) 1px,transparent 1px)}

/* 斜めはやめる。セクションは面を持たない */
.section{margin-block:0;padding-block:clamp(96px,10vw,164px);position:relative;background:none}
.sec-ink::before,.sec-mid::before,.sec-pale::before,.sec-sand::before,.sec-white::before{display:none}
.cut-a::before,.cut-b::before{clip-path:none}
.sec-diag::before{display:none}
.sec-diag{background:none}
.hero::after,.page-hero::after{display:none}
.footer::before{display:none}

/* --- 長方形の面（ずらして重ねる） --- */
.plane{position:absolute;z-index:0;pointer-events:none;background:var(--paper-mid)}
.pl-brown{left:0;width:min(62%,860px);top:-90px;bottom:22%}
.pl-brown.pl-r{left:auto;right:0;width:min(56%,780px);top:16%;bottom:-110px}
.pl-brown.pl-wide{left:6%;width:min(80%,1120px);top:-60px;bottom:34%}
.pl-brown.pl-tall{top:-40px;bottom:-140px;width:min(46%,640px)}

.chip{position:absolute;z-index:0;pointer-events:none}
.chip-cream{right:9%;top:-46px;width:min(15%,180px);height:230px;background:var(--paper-sand);opacity:.9}
.chip-cream.chip-r{right:auto;left:5%;bottom:-52px;top:auto}
.chip-pink{left:14%;bottom:-48px;width:min(17%,200px);height:210px;background:var(--paper-pink);opacity:.92}
.chip-pink.chip-r{left:auto;right:6%;bottom:auto;top:-40px}
.chip-blue{right:20%;bottom:-40px;width:min(12%,150px);height:260px;background:var(--paper-pale);opacity:.85}

/* --- 縦書きのラベル（ポスター左の縦組み） --- */
.vlabel{position:absolute;left:2.2%;top:12%;z-index:1;writing-mode:vertical-rl;
  font-family:var(--ff-en);font-size:11px;letter-spacing:.42em;
  color:rgba(237,231,220,.5);pointer-events:none}

/* --- 罫線と点は、ページ全体に一枚で通す --- */
.netfix{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(237,231,220,.13) 1px,transparent 1px),
    linear-gradient(180deg,rgba(237,231,220,.09) 1px,transparent 1px),
    radial-gradient(circle at 0 0,var(--dotc) 1.9px,transparent 2.2px);
  background-size:19.4% 100%, 100% 23.7%, 19.4% 23.7%;
  background-position:7% 0, 0 9%, 7% 9%;
  opacity:.55}
.net{display:none}

/* 面の上のカードは沈める */
.sec-ink .card,.sec-ink .svc,.sec-ink .box,.sec-ink .panel,.sec-ink .stat,.sec-ink .tool,
.sec-ink .cta-card,.sec-ink .qbox,.sec-ink .voice,.sec-ink .news-list li,.sec-ink .type-card,
.sec-ink .rec-point,.sec-ink .hub li,.sec-ink .case,.sec-ink .pcl-card,.sec-ink .detail,
.sec-ink .quiz,.sec-ink .fig,.sec-ink .smap,.sec-ink .road-anim,.sec-ink .qopt,.sec-ink details,
.sec-ink .hub a{background:rgba(237,231,220,.055)!important;border-color:rgba(237,231,220,.16)!important}

/* ヒーロー・フッター・ヘッダー */
.hero,.page-hero,.login-page{background:var(--ink-900)}
.footer{background:var(--ink-900)}
.arrowband{background:var(--ink-900)}
.header.scrolled{background:rgba(36,30,27,.92)}
.drop,.mnav{background:rgba(36,30,27,.97)}
.sticky-cta .t{background:var(--paper-mid)}
.sticky-cta .m{background:var(--paper-pink);color:var(--ink-900)}
.btn-gold{background:var(--paper-sand);color:var(--ink-900);border-color:var(--paper-sand)}
.tagline i,.radio-h .dot i{background:var(--dotc)}

@media (max-width:860px){
  .plane{width:92%!important;left:4%!important;right:auto!important}
  .chip{display:none}
  .vlabel{display:none}
  .netfix{opacity:.35}
}
/* 地図・図版の枠を、紙の色に合わせる */
.sec-ink .areamap{background:var(--paper-sand)!important;border-color:rgba(36,30,27,.2)!important}
.areamap .blk{fill:rgba(94,73,65,.16)}
.areamap .st{stroke:rgba(94,73,65,.34)}
.areamap .st2{stroke:rgba(94,73,65,.18)}
.areamap .pt{fill:#5E4941}
.areamap .pt.on{fill:#241E1B}
.areamap .halo{stroke:#241E1B}
.map-label{color:#5E4941!important}
.sec-ink .radio{background:rgba(36,30,27,.85)!important;border-color:rgba(227,220,208,.22)!important}
.sec-ink .case-img.pfig::after{background:linear-gradient(transparent,rgba(51,44,40,.94) 72%)}
.sec-ink .gal.pfig::after{background:linear-gradient(transparent,rgba(51,44,40,.92) 76%)}
.pfig .veil i{background:rgba(227,220,208,.16)}
.pfig .veil i:nth-child(4){background:rgba(226,185,179,.2)}
.hero-tag,.tagline{border-color:rgba(227,220,208,.3);background:rgba(227,220,208,.06)}
.hero-h1 em,.hero-facts .n,.sec-title em{color:var(--paper-pink)}
.blip{background:var(--paper-sand)}
.arrows span svg{fill:var(--paper-sand)}
.case-img .kind{background:var(--paper-sand);color:var(--ink-900)!important}

/* ============================================================
   1) 色の抜けを直す（残っていた青系トークンを茶系へ）
   ============================================================ */
:root{
  --gold-300:#F1EAE0;
  --gold-400:#E3DCD0;
  --gold-500:#C9BCA9;
  --gold-600:#597594;
  --sand:#E3DCD0;
  --sand-deep:#C9BCA9;
  --text:#EDE7DC;
  --text-soft:#BCB2A6;
  --muted:#5A6C76;
  --line:rgba(227,220,208,.14);
  --line-gold:rgba(227,220,208,.24);
  --baton-red:#E0483A;
}
.pcl-steps li i{background:var(--sand-deep)}
.sec-label{color:var(--sand-deep)}
.sec-title em{color:var(--paper-pink)}
.pfig,.sec-ink .pfig,.sec-mid .pfig,.detail-visual.pfig{color:var(--td)}
.sec-ink .areamap,.areamap{background:var(--paper-sand)!important}
.areamap .pt{fill:#5E4941}.areamap .pt.on{fill:#241E1B}
.sig-name{color:var(--sand)}
.hub .ico svg,.svc-ico svg,.tool svg,.type-card .tico svg,.rec-point .ic{stroke:var(--sand-deep)}
.detail-visual svg{stroke:var(--sand-deep)}
.progress{background:linear-gradient(90deg,var(--paper-mid),var(--baton-red))}

/* ============================================================
   2) 警棒のアンダーバー（持ち手は黒、赤いライトが伸びる）
   ============================================================ */
.gnav>li>a,.drop a,.footer .f-map a,.mnav details ul a,.anchors a{position:relative}
.gnav>li>a::before,.drop a::before,.footer .f-map a::before,.anchors a::before{
  content:'';position:absolute;left:var(--bx,17px);bottom:6px;width:16px;height:9px;border-radius:2px;
  background:linear-gradient(180deg,#3A312C,#100D0C 60%);
  box-shadow:inset 0 1px 0 rgba(227,220,208,.25);opacity:0;
  transition:opacity .32s ease-out;z-index:1}
.gnav>li>a::after,.drop a::after,.footer .f-map a::after,.anchors a::after{
  content:'';position:absolute;left:calc(var(--bx,17px) + 15px);right:var(--bx,17px);bottom:8px;height:5px;
  border-radius:0 3px 3px 0;background:linear-gradient(90deg,#A8261A,#CE3527 45%,#E14E3C);
  box-shadow:0 0 5px rgba(206,53,39,.75),0 0 12px rgba(206,53,39,.35);
  transform:scaleX(0);transform-origin:left;width:auto;
  transition:transform .32s ease-out;z-index:1}
.gnav>li:hover>a::after,.drop a:hover::after,.footer .f-map a:hover::after,.anchors a:hover::after{transform:scaleX(1)}
.gnav>li:hover>a::before,.drop a:hover::before,.footer .f-map a:hover::before,.anchors a:hover::before{opacity:1}
.drop a{--bx:16px}
.drop a::before,.drop a::after{bottom:6px}
.drop a:hover{padding-left:16px;background:rgba(227,220,208,.07)}
.drop a::before{width:0}   /* ドロップは線だけ細く */
.footer .f-map a{--bx:0px;display:inline-block}
.footer .f-map a::before,.footer .f-map a::after{bottom:-2px}
.anchors a{--bx:14px}
@media (prefers-reduced-motion:reduce){
  .gnav>li>a::after,.drop a::after,.footer .f-map a::after,.anchors a::after{transition:none}
}

/* ============================================================
   3) 切られた写真（背景の色 → 写真 → 罫線と点 → 本文）
   ============================================================ */
.psplit{position:absolute;z-index:0;pointer-events:none;overflow:visible;opacity:0;
  transition:opacity .9s var(--ease)}
.psplit.ready{opacity:.52}
.ps-img{position:absolute;inset:0;display:block;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:saturate(.72) contrast(1.04)}
.ps-veil{position:absolute;inset:0;display:block}
.ps-veil i{position:absolute;top:0;bottom:0;background:rgba(227,220,208,.16)}
.ps-veil i:nth-child(1){left:16%;width:7%}
.ps-veil i:nth-child(2){left:45%;width:5%;background:rgba(227,220,208,.1)}
.ps-veil i:nth-child(3){left:76%;width:8%;background:rgba(226,185,179,.14)}

/* 置き場所（セクションごとに大きさと位置を変える） */
.ph-a{left:0;width:min(48%,700px);top:-90px;height:min(74%,620px)}
.ph-b{right:0;width:min(45%,660px);top:4%;height:min(72%,600px)}
.ph-c{right:0;width:min(50%,740px);bottom:-100px;height:min(70%,580px)}
.ph-d{left:0;width:min(42%,620px);bottom:-70px;height:min(66%,540px)}

/* 本文は写真より前、罫線より前 */
.section > .wrap,.section > div{position:relative;z-index:2}
.netfix{z-index:1}
.header,.mnav,.drop,.sticky-cta{z-index:100}

@media (max-width:860px){
  .psplit{display:none}
  .gnav>li>a::before{display:none}
}
/* 写真の上でも本文が読めるよう、カードは濃く沈める */
.sec-ink .card,.sec-ink .svc,.sec-ink .box,.sec-ink .panel,.sec-ink .stat,.sec-ink .tool,
.sec-ink .cta-card,.sec-ink .qbox,.sec-ink .voice,.sec-ink .news-list li,.sec-ink .type-card,
.sec-ink .rec-point,.sec-ink .hub li,.sec-ink .hub a,.sec-ink .case,.sec-ink .pcl-card,
.sec-ink .detail,.sec-ink .quiz,.sec-ink .fig,.sec-ink .road-anim,.sec-ink .qopt,.sec-ink details{
  background:rgba(32,27,24,.66)!important;backdrop-filter:blur(2px);
  border-color:rgba(227,220,208,.16)!important}
/* 見出し・本文の直下にも薄い敷きを入れて、写真に負けないようにする */
.sec-ink .sec-head,.sec-ink .block > h2,.sec-ink .block > .p{position:relative}
/* 図版は、ポスターの淡い短冊のようにクリーム色の板に載せる */
.sec-ink .detail-visual.pfig,.sec-ink .case-img.pfig,.sec-ink .gal.pfig,
.sec-ink .road-anim,.sec-ink .sigbox,.sec-ink .gd-step .pfig,
.sec-ink .dress-wrap > [data-fig],.sec-ink .pcl-card{
  background:var(--paper-sand)!important;color:#3A302B!important;
  border-color:rgba(58,48,43,.18)!important;backdrop-filter:none}
.sec-ink .gd-step .pfig,.sec-ink .dress-wrap > [data-fig]{padding:14px}
.sec-ink .case-img.pfig::after{background:linear-gradient(transparent,rgba(227,220,208,.94) 72%)}
.sec-ink .gal.pfig::after{background:linear-gradient(transparent,rgba(227,220,208,.92) 76%)}
.sec-ink .gal span,.sec-ink .case-img .tagline{color:#3A302B!important;text-shadow:none}
.sec-ink .pcl-card h4,.sec-ink .pcl-card p{color:#3A302B!important}
.pfig .veil i{background:rgba(255,255,255,.34)}
.pfig .veil i:nth-child(4){background:rgba(226,185,179,.34)}
.map-label{color:#6B564C!important}

/* ============================================================
   警棒のアンダーバー（作り直し）
   持ち手とライトの寸法を1か所で決めて、どこでもズレないようにする
     --bx … 左端の位置    --bb … 下からの位置
     --bw … 持ち手の幅    --bh … 持ち手の高さ    --lh … ライトの高さ
   ============================================================ */
.gnav>li>a,.drop a,.footer .f-map a,.footer .f-map li a,.anchors a,
.mnav details ul a,.mnav .m-single,.smap a,.sitemap a{
  --bx:17px; --bb:7px; --bw:15px; --bh:9px; --lh:5px;
  position:relative}

/* 持ち手（黒） */
.gnav>li>a::before,.drop a::before,.footer .f-map a::before,.anchors a::before,
.mnav details ul a::before,.mnav .m-single::before,.smap a::before{
  content:'';position:absolute;left:var(--bx);bottom:var(--bb);
  width:var(--bw);height:var(--bh);border-radius:2px;top:auto;right:auto;
  background:linear-gradient(180deg,#3A312C,#100D0C 60%);
  box-shadow:inset 0 1px 0 rgba(227,220,208,.25);
  opacity:0;transform:none;transition:opacity .32s ease-out;z-index:1}

/* ライト（赤）── 持ち手の右端からぴったり伸びる */
.gnav>li>a::after,.drop a::after,.footer .f-map a::after,.anchors a::after,
.mnav details ul a::after,.mnav .m-single::after,.smap a::after{
  content:'';position:absolute;
  left:calc(var(--bx) + var(--bw) - 1px);
  right:var(--bx);
  bottom:calc(var(--bb) + (var(--bh) - var(--lh)) / 2);
  height:var(--lh);width:auto;top:auto;
  border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#A8261A,#CE3527 45%,#E14E3C);
  box-shadow:0 0 5px rgba(206,53,39,.75),0 0 12px rgba(206,53,39,.35);
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s ease-out;z-index:1}

.gnav>li:hover>a::before,.drop a:hover::before,.footer .f-map a:hover::before,
.anchors a:hover::before,.mnav details ul a:hover::before,.mnav .m-single:hover::before,
.smap a:hover::before{opacity:1}
.gnav>li:hover>a::after,.drop a:hover::after,.footer .f-map a:hover::after,
.anchors a:hover::after,.mnav details ul a:hover::after,.mnav .m-single:hover::after,
.smap a:hover::after{transform:scaleX(1)}

/* 場所ごとの位置あわせ */
.drop a{--bx:16px;--bb:5px}
.drop a:hover{padding-left:16px;background:rgba(227,220,208,.07)}
.footer .f-map a,.footer .f-map li a{--bx:0px;--bb:-3px;display:inline-block}
.smap a{--bx:0px;--bb:-3px;display:inline-block}
.anchors a{--bx:14px;--bb:6px}
.mnav details ul a{--bx:18px;--bb:4px}
.mnav .m-single{--bx:4px;--bb:6px}

@media (prefers-reduced-motion:reduce){
  .gnav>li>a::after,.drop a::after,.footer .f-map a::after,.anchors a::after,
  .mnav details ul a::after,.smap a::after{transition:none}
}

/* ============================================================
   中身を見せるための図版・写真は切らない
   （業務内容・導入事例・ギャラリー・図解など）
   窓に切るのは、背景として敷いている装飾の写真だけにする
   ============================================================ */
.pfig.sliced .pcl-svg,.pfig .pcl-shift{-webkit-mask-image:none!important;mask-image:none!important}
.pfig .pcl-shift{display:none!important}
.pfig .veil{display:none!important}

/* ============================================================
   背景の写真が、ゆっくり淡く光る
   点滅ではなく、明るさがゆらぐ程度
   ============================================================ */
@keyframes psGlow{
  0%,100%{filter:saturate(.68) contrast(1.02) brightness(.90)}
  50%    {filter:saturate(.80) contrast(1.07) brightness(1.10)}
}
@keyframes psHalo{
  0%,100%{opacity:.10}
  50%    {opacity:.26}
}
.ps-img{animation:psGlow 9s ease-in-out infinite}
.psplit::after{content:'';position:absolute;inset:-8%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 50%,rgba(227,220,208,.5),transparent 66%);
  opacity:.14;animation:psHalo 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .ps-img,.psplit::after{animation:none}
}

/* ============================================================
   トップの一枚目を、他の背景と同じ作りに合わせる
   ── レーダーと道路は「細い線画」まで落として、
      主役は 焦茶の面 ＋ 窓から見える写真 にする
   ============================================================ */
.hero,.page-hero{background:var(--paper-deep);overflow:hidden}

/* レーダー：技術図面のような細い線に */
.radar{opacity:.5;filter:none}
.radar .ring{border-color:rgba(227,220,208,.16)}
.radar .cross{background:rgba(227,220,208,.10)}
.radar .tick::after{background:rgba(227,220,208,.22)}
.radar .radar-core{background:rgba(227,220,208,.22);box-shadow:0 0 18px rgba(227,220,208,.25)}
.sweep{background:conic-gradient(from 0deg,
  rgba(227,220,208,0) 0deg,rgba(227,220,208,0) 300deg,
  rgba(227,220,208,.03) 336deg,rgba(227,220,208,.07) 354deg,
  rgba(227,220,208,.13) 359.4deg,rgba(227,220,208,0) 360deg)}
.sweep-line{background:linear-gradient(90deg,rgba(227,220,208,.45),rgba(227,220,208,0));
  box-shadow:0 0 10px rgba(227,220,208,.2)}
.blip{background:var(--paper-sand);box-shadow:0 0 0 0 rgba(227,220,208,.4)}
.blip::after{color:rgba(227,220,208,.7)}

/* 道路：白線だけを細く残す */
.road{opacity:.5}
.road .tarmac{fill:rgba(227,220,208,.02)}
.road .edge{stroke:rgba(227,220,208,.24)}
.road .lane{stroke:rgba(227,220,208,.12)}
.road .dash{stroke:rgba(227,220,208,.34)}
.car{background:rgba(240,232,222,.85);box-shadow:0 0 10px 3px rgba(227,220,208,.4)}
.car.b{background:rgba(226,185,179,.8);box-shadow:0 0 9px 3px rgba(226,185,179,.35)}

/* 一枚目に置く面・写真・小片 */
.hero .plane,.page-hero .plane{z-index:1}
.hero .psplit,.page-hero .psplit{z-index:2}
.hero .chip,.page-hero .chip{z-index:1}
.hero-plane{top:-60px;bottom:-60px;width:min(52%,760px)}
.ph-hero{right:0;width:min(46%,680px);top:8%;height:min(78%,640px)}
.ph-hero .ps-img{background-size:contain;background-position:50% 50%;background-repeat:no-repeat}
.hero-chip{right:5%;top:16%;width:min(13%,160px);height:210px}
.hero-chip2{left:auto;right:26%;bottom:-70px;width:min(11%,140px);height:180px}
.hero .hero-vlabel{display:none}
.page-hero .hero-vlabel{left:2%;top:22%;z-index:3}
.hero-guard{z-index:4;filter:drop-shadow(0 26px 60px rgba(20,16,14,.55))}
.hero-inner,.page-hero .wrap{z-index:5}

/* 一枚目にも罫線と点を通す（他のセクションと同じ） */
.hero::before,.page-hero::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.45;
  background-image:
    linear-gradient(90deg,rgba(237,231,220,.13) 1px,transparent 1px),
    linear-gradient(180deg,rgba(237,231,220,.09) 1px,transparent 1px),
    radial-gradient(circle at 0 0,var(--dotc) 1.9px,transparent 2.2px);
  background-size:19.4% 100%, 100% 23.7%, 19.4% 23.7%;
  background-position:7% 0, 0 9%, 7% 9%}

@media (max-width:1180px){.ph-hero{width:52%}}
@media (max-width:860px){
  .hero-plane,.ph-hero,.hero-chip,.hero-chip2,.hero-vlabel{display:none}
  .radar{opacity:.35}
}

/* 中くらいの画面でヘッダーが2行に折り返さないように */
@media (max-width:1400px){
  .gnav>li>a{padding:12px 11px;font-size:13.5px}
  .tel-block .no{font-size:18px}
  .btn-login{padding:11px 16px;font-size:12.5px}
  .logo-txt span{font-size:17px;letter-spacing:.03em}
}
@media (max-width:1180px){
  .gnav>li>a{padding:11px 8px;font-size:12.5px;letter-spacing:.04em}
  .tel-block{display:none}
  .logo-txt span{font-size:16px}
}
@media (max-width:1000px){
  .gnav,.btn-login{display:none}
  .burger{display:block}
}