/* ============================================================
   MIKADUKI duki.jp Redesign Prototype v2
   真实品牌色版：藍系グラデ × 月牙白 × 活力イエロー
   参考: 提供 Figma 稿（弧線モチーフ／実写Hero／logo解構）
         cover-corp.com（余白・英文大標・マーキー）
         metoh.jp（企業信頼感）
   Brand colors (from mikaduki logo):
     深藍 #05237F ／ 藍 #004298 ／ 明藍 #0062B7 ／ 黄 #FFDB00
   ============================================================ */
:root{
  --b900:#05237F;
  --b700:#004298;
  --b500:#0062B7;
  --b100:#E9F1F9;
  --b050:#F4F8FC;
  --yellow:#FFDB00;
  --ink:#1A1A1A;
  --paper:#FFFFFF;
  --line:rgba(5,35,127,.12);
  --serif:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:2;font-weight:400;font-size:15.5px;
  -webkit-font-smoothing:antialiased;letter-spacing:.02em;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:1120px;margin:0 auto;padding:0 24px;position:relative}
.narrow{max-width:800px}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--yellow),#FFC400)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:1240px;margin:0 auto;padding:0 28px;height:72px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-img{height:30px;width:auto}
.gnav{display:flex;align-items:center;gap:32px}
.gnav a{
  font-size:12.5px;letter-spacing:.14em;color:var(--b900);
  padding:6px 0;position:relative;font-weight:500;
}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--yellow);transition:width .35s;
}
.gnav a:hover::after,.gnav a.active::after{width:100%}
.gnav .cta{border:1px solid var(--b900);padding:8px 22px;border-radius:2px;transition:.3s}
.gnav .cta:hover{background:var(--b900);color:#fff}
.gnav .cta::after{display:none}
.menu-btn{display:none}

/* ---------- Logo-derived decorations ---------- */
.arcs{position:absolute;pointer-events:none;z-index:0;will-change:transform}
.arcs.right{right:-220px;top:-120px;width:640px;height:640px;opacity:.9}
.arcs.left{left:-260px;bottom:-200px;width:560px;height:560px;opacity:.7}
.mk-icon{display:inline-flex;align-items:center;gap:0;height:22px;margin-bottom:14px}

/* ---------- Hero (index) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(135deg,#05237F 0%,#004298 48%,#0062B7 100%);
  color:#fff;
}
.hero .hero-arcs{position:absolute;right:-16vw;top:50%;transform:translateY(-50%);
  width:70vw;max-width:900px;height:auto;opacity:.85;animation:heroDrift 14s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:translateY(-52%) rotate(-2deg)}to{transform:translateY(-48%) rotate(2deg)}}
.hero .inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:130px 28px 90px}
.hero h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,4vw,50px);letter-spacing:.12em;line-height:1.9;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block;transform:translateY(110%);animation:riseUp 1s cubic-bezier(.22,.8,.3,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.18s}
@keyframes riseUp{to{transform:none}}
.hero .sub{
  margin-top:30px;font-size:clamp(13px,1.3vw,17px);letter-spacing:.3em;
  font-family:var(--serif);color:#fff;opacity:0;animation:fadeSub 1s .7s forwards;
  display:inline-block;position:relative;padding-bottom:10px;
}
.hero .sub::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--yellow);animation:underGrow .9s 1.1s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes fadeSub{to{opacity:1}}
@keyframes underGrow{to{width:100%}}
.hero .photo-note{position:absolute;right:28px;bottom:88px;z-index:2;font-size:10.5px;
  letter-spacing:.18em;color:rgba(255,255,255,.55)}
.scroll-hint{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:2;font-family:var(--en);font-size:11px;letter-spacing:.35em;
  color:rgba(255,255,255,.75);text-align:center;
}
.scroll-hint::after{
  content:"";display:block;width:1px;height:44px;margin:10px auto 0;
  background:linear-gradient(var(--yellow),transparent);animation:drip 2s infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);
  background:#fff;padding:16px 0}
.marquee.dark{background:var(--b900);border:none}
.marquee-track{display:inline-flex;gap:64px;padding-right:64px;
  animation:mq 28s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--en);font-size:20px;letter-spacing:.24em;color:var(--b700)}
.marquee.dark span{color:rgba(255,255,255,.85)}
.marquee span b{color:var(--yellow);font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:110px 0;position:relative;overflow:hidden}
.sec-head{margin-bottom:56px;position:relative;z-index:1}
.sec-head .en{
  font-family:var(--en);font-size:clamp(30px,3.6vw,46px);color:var(--b900);
  letter-spacing:.1em;line-height:1.1;
}
.sec-head .ja{
  margin-top:8px;font-size:13.5px;letter-spacing:.28em;color:var(--b500);
  font-weight:700;
}
.sec-head.center{text-align:center}
.sec-head .bar{width:56px;height:3px;background:var(--yellow);margin-top:22px}
.sec-head.center .bar{margin-left:auto;margin-right:auto}
.sec-head.center .mk-icon{justify-content:center;display:flex}
.lead{max-width:760px;font-size:15.5px;line-height:2.3;position:relative;z-index:1}
.lead.center{margin:0 auto;text-align:center}
.bg-soft{background:var(--b050)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--en);font-size:13px;letter-spacing:.22em;color:var(--b900);
  border:1px solid var(--b900);padding:14px 34px;border-radius:2px;
  position:relative;overflow:hidden;transition:color .35s;z-index:1;background:#fff;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--b900);
  transform:scaleX(0);transform-origin:right;transition:transform .35s;z-index:-1;
}
.btn:hover{color:#fff}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn.light{color:#fff;border-color:#fff;background:transparent}
.btn.light::before{background:var(--yellow)}
.btn.light:hover{color:var(--b900);border-color:var(--yellow)}

/* ---------- Brand strip ---------- */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.brand-cell{background:#fff;padding:38px 26px;transition:.35s;position:relative;top:0}
.brand-cell:hover{background:var(--b050);top:-4px;box-shadow:0 14px 30px rgba(5,35,127,.10)}
.brand-cell .bname{font-family:var(--en);font-size:17px;letter-spacing:.06em;
  color:var(--b900);font-weight:600;line-height:1.4}
.brand-cell .bjp{font-size:12px;color:var(--b500);letter-spacing:.1em;margin-top:2px}
.brand-cell p{font-size:13px;line-height:2;margin-top:12px;color:#4a4a4a}
.brand-cell::after{content:"";position:absolute;left:26px;bottom:24px;width:22px;height:3px;
  background:var(--yellow);transition:width .35s}
.brand-cell:hover::after{width:48px}

/* ---------- Service cards ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:36px 32px 42px;position:relative;transition:.35s;top:0;z-index:1}
.svc:hover{top:-6px;box-shadow:0 18px 40px rgba(5,35,127,.12);border-color:transparent}
.svc .num{font-family:var(--en);font-size:56px;line-height:1;min-height:0!important;margin-bottom:-6px;
  color:transparent;-webkit-text-stroke:1.5px var(--b500);transition:.35s}
.svc:hover .num{color:var(--yellow);-webkit-text-stroke:1.5px var(--yellow)}
.svc h3{font-family:var(--serif);font-size:19px;letter-spacing:.12em;color:var(--b900);
  margin:18px 0 14px;font-weight:600}
.svc{display:flex;flex-direction:column}
.svc p{font-size:14.5px;line-height:2.1;color:#3d3d3d;min-height:0;margin-bottom:26px}
.svc .btn{margin-top:auto;align-self:flex-start;padding:11px 26px;font-size:11px}

/* ---------- Numbers ---------- */
.numbers{background:linear-gradient(120deg,var(--b900),var(--b700));color:#fff}
.numbers::before{content:"";position:absolute;inset:0;opacity:.12;
  background:repeating-linear-gradient(115deg,transparent 0 26px,#fff 26px 27px);
  animation:stripeMove 22s linear infinite}
@keyframes stripeMove{to{background-position:520px 0}}
.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;position:relative;z-index:1}
.num-cell{text-align:center;padding:10px 6px;border-right:1px solid rgba(255,255,255,.16)}
.num-cell:last-child{border-right:none}
.num-cell .label{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.8)}
.num-cell .val{font-family:var(--en);font-size:clamp(30px,3.4vw,46px);color:var(--yellow);
  line-height:1.25;margin:10px 0 4px;font-weight:600}
.num-cell .unit{font-size:12.5px;letter-spacing:.1em}

/* ---------- History ---------- */
.timeline{position:relative;margin-top:20px;padding-left:22px;z-index:1}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--yellow),var(--b100))}
.tl-item{position:relative;padding:0 0 30px 26px}
.tl-item::before{content:"";position:absolute;left:-22px;top:12px;width:11px;height:11px;
  border-radius:50%;background:#fff;border:3px solid var(--b500);transition:.3s}
.tl-item:hover::before{background:var(--yellow);border-color:var(--b900);transform:scale(1.25)}
.tl-item .year{font-family:var(--en);font-size:22px;color:var(--b900);letter-spacing:.06em;font-weight:600}
.tl-item p{font-size:14.5px;color:#3d3d3d;margin-top:2px}

/* ---------- Generic blocks ---------- */
.block{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:44px 46px;margin-bottom:28px;position:relative;z-index:1;transition:.35s;top:0}
.block:hover{box-shadow:0 14px 34px rgba(5,35,127,.09);top:-3px}
.block h3{font-family:var(--serif);font-size:20px;color:var(--b900);letter-spacing:.1em;
  margin-bottom:6px;font-weight:600}
.block .sub-en{font-family:var(--en);font-size:12px;letter-spacing:.24em;color:var(--b500)}
.block p{font-size:14.5px;line-height:2.2;color:#383838;margin-top:14px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag{font-size:11.5px;border:1px solid var(--line);border-radius:999px;
  padding:4px 14px;color:var(--b900);background:var(--b050);transition:.3s}
.tag:hover{background:var(--yellow);border-color:var(--yellow)}
.feature-list{margin-top:18px;display:grid;gap:14px}
.feature-list li{position:relative;padding-left:24px;font-size:13.8px;line-height:2}
.feature-list li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:12px;
  border-radius:50%;background:var(--b500);
  box-shadow:5px 0 0 -3px var(--b700),9px 0 0 -5px var(--yellow)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* ---------- Tabs ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:44px}
.tab-btn{flex:1;text-align:center;padding:18px 10px;cursor:pointer;background:none;border:none;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.16em;color:#888;
  border-bottom:3px solid transparent;transition:.3s}
.tab-btn .ten{display:block;font-family:var(--en);font-size:11px;letter-spacing:.3em;margin-bottom:4px}
.tab-btn:hover{color:var(--b700)}
.tab-btn.active{color:var(--b900);border-bottom-color:var(--yellow)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadein .5s}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Sub-page hero ---------- */
.subhero{
  position:relative;padding:170px 0 96px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#05237F 0%,#004298 55%,#0062B7 100%);
}
.subhero .arcs{right:-180px;top:-160px;width:560px;height:560px;opacity:.8}
.subhero .en{font-family:var(--en);font-size:clamp(34px,5vw,58px);letter-spacing:.12em;line-height:1.2}
.subhero .ja{margin-top:10px;font-family:var(--serif);font-size:16px;letter-spacing:.3em;color:var(--yellow)}
.breadcrumb{margin-top:26px;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6)}

/* ---------- Table ---------- */
.def-table{width:100%;border-collapse:collapse;background:#fff;position:relative;z-index:1}
.def-table th,.def-table td{border:1px solid var(--line);padding:18px 24px;font-size:14.5px;
  text-align:left;vertical-align:top;line-height:2}
.def-table th{width:220px;background:var(--b050);font-family:var(--serif);
  color:var(--b900);letter-spacing:.14em;font-weight:600}

/* ---------- CTA ---------- */
.cta-band{background:linear-gradient(120deg,var(--b900) 0%,var(--b700) 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band .arcs{left:-200px;bottom:-260px;width:520px;height:520px;opacity:.5}
.cta-band h2{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);letter-spacing:.2em;font-weight:600}
.cta-band p{margin:18px 0 34px;font-size:13.5px;letter-spacing:.12em;color:rgba(255,255,255,.85)}

/* ---------- Footer ---------- */
.site-footer{background:var(--b900);color:rgba(255,255,255,.88);padding:70px 0 34px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-logo-img{height:34px;width:auto}
.foot-addr{margin-top:20px;font-size:12.5px;line-height:2.2;color:rgba(255,255,255,.65)}
.foot-nav{display:flex;gap:36px;font-size:12px;letter-spacing:.16em}
.foot-nav a{position:relative}
.foot-nav a:hover{color:var(--yellow)}
.copyright{margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);text-align:center}

/* ---------- Brand guide page ---------- */
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.swatch{border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.swatch .chip{height:110px}
.swatch .meta{padding:14px 16px;font-size:12px;line-height:1.9;background:#fff}
.swatch .meta b{font-family:var(--en);font-size:14px;letter-spacing:.06em;color:var(--b900)}
.logo-stage{background:#fff;border:1px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;padding:56px 30px}
.logo-stage.dark{background:linear-gradient(120deg,var(--b900),var(--b700))}
.logo-stage img{max-height:150px;width:auto}
.rule-list li{font-size:13.5px;padding-left:22px;position:relative;margin-bottom:10px}
.rule-list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--yellow)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

/* ============================================================
   v2.2 Enhancement layer — 交互・過渡・タイポグラフィのみ
   （配色は v2 のまま、一切変更しない）
   ============================================================ */

/* --- Typography refinement --- */
body{text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,.sec-head .ja,.subhero .ja,.hero h1{font-feature-settings:"palt"}
.sec-head .en,.subhero .en,.num-cell .val,.tl-item .year{font-variant-numeric:tabular-nums}
.hero h1,.sec-head .en,.subhero .en,.cta-band h2{text-wrap:balance}
.lead,.block p,.svc p{text-wrap:pretty}
::selection{background:var(--yellow);color:var(--b900)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:2px}

/* --- Page enter / leave transition --- */
body{animation:pageIn .6s ease both}
@keyframes pageIn{from{opacity:0}}
body.leaving{opacity:0;transition:opacity .28s ease}

/* --- Header: hide on scroll down, reappear on scroll up --- */
.site-header{transition:transform .45s var(--ease),box-shadow .45s ease}
.site-header.hide{transform:translateY(-100%)}
.site-header.scrolled{box-shadow:0 8px 28px rgba(5,35,127,.08)}

/* --- Reveal: softer curve + blur-in + sibling stagger (JS sets delay) --- */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  filter:blur(5px);transition-delay:var(--rd,0s)}
.reveal.on{filter:none}

/* --- Section heading: bar grows & label slides when revealed --- */
.sec-head .bar{transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .35s}
.sec-head.center .bar{transform-origin:center}
.sec-head.on .bar,.sec-head:not(.reveal) .bar{transform:none}

/* --- Timeline: line draws in, dots pop --- */
.timeline::before{transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease)}
.timeline.drawn::before{transform:none}
.tl-item::before{transition:transform .3s var(--ease),background .3s,border-color .3s}

/* --- Buttons: Monad-style pill + trailing arrow nudge (colors unchanged) --- */
.btn{border-radius:999px;padding:14px 36px}
.btn .arr{display:inline-block;transition:transform .35s var(--ease);font-family:var(--sans)}
.btn:hover .arr{transform:translateX(5px)}
.svc .btn{border-radius:999px}
.gnav .cta{border-radius:999px}
.to-top{border-radius:50%}

/* --- Cards: smoother spring-like lift --- */
.brand-cell,.svc,.block{transition:all .45s var(--ease)}

/* --- Numbers: cells rise slightly on hover --- */
.num-cell{transition:transform .4s var(--ease)}
.num-cell:hover{transform:translateY(-4px)}

/* --- Table: row highlight --- */
.def-table tr{transition:background .25s}
.def-table tr:hover td{background:var(--b050)}

/* --- Sub-page hero: entrance choreography --- */
.subhero .en,.subhero .ja,.subhero .breadcrumb{opacity:0;transform:translateY(18px);
  animation:subIn .9s var(--ease) forwards}
.subhero .ja{animation-delay:.15s}
.subhero .breadcrumb{animation-delay:.3s}
@keyframes subIn{to{opacity:1;transform:none}}

/* --- Hero: arcs follow the cursor softly (JS sets --mx/--my) --- */
.hero .hero-arcs{translate:var(--mx,0px) var(--my,0px);
  transition:translate 1.2s var(--ease)}

/* --- Back to top --- */
.to-top{
  position:fixed;right:26px;bottom:26px;z-index:150;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--b900);background:rgba(255,255,255,.92);
  color:var(--b900);font-size:16px;cursor:pointer;backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s var(--ease),background .3s,color .3s;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--b900);color:#fff}

/* ============================================================
   v2.3 Editorial layout — 文字量の多いページの構造的レイアウト
   （cover-corp 式：左スティッキー章見出し＋スキャナブル定義行）
   ============================================================ */

/* --- 非対称イントロ（キャッチコピー × 本文） --- */
.intro-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(36px,5vw,70px);align-items:start}
.catch{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);color:var(--b900);
  letter-spacing:.06em;line-height:2;font-weight:600}
.nw{display:inline-block}
.catch em{font-style:normal;
  background:linear-gradient(transparent 70%,rgba(255,219,0,.55) 70% 94%,transparent 94%)}
.lead-in{font-size:16px;line-height:2.3;color:#2e2e2e}
.lead-in+.lead-in{margin-top:1.6em}

/* --- 章グリッド：左スティッキー見出し＋右コンテンツ --- */
.ed-grid{display:grid;grid-template-columns:272px 1fr;gap:clamp(40px,5vw,76px);align-items:start}
.ed-side{position:sticky;top:112px;z-index:1}
.ed-side .ed-num{font-family:var(--en);font-size:62px;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--b500);margin-bottom:16px}
.ed-side .en{font-family:var(--en);font-size:clamp(23px,2.3vw,30px);color:var(--b900);
  letter-spacing:.08em;line-height:1.2}
.ed-side .ja{margin-top:8px;font-size:12.5px;letter-spacing:.22em;color:var(--b500);font-weight:700}
.ed-side .bar{width:44px;height:3px;background:var(--yellow);margin-top:18px}
.ed-body{min-width:0}

/* --- スキャナブル定義行（block の羅列を置き換える） --- */
.row-list{border-top:1px solid var(--line)}
.row-item{display:grid;grid-template-columns:56px 240px 1fr;gap:28px;
  padding:30px 14px 30px 18px;border-bottom:1px solid var(--line);
  position:relative;transition:background .35s,padding-left .35s var(--ease)}
.row-item::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--yellow);transition:height .4s var(--ease)}
.row-item:hover{background:var(--b050);padding-left:30px}
.row-item:hover::before{height:100%}
.row-item .r-num{font-family:var(--en);font-size:19px;color:var(--b500);
  letter-spacing:.04em;padding-top:4px}
.row-item .r-title{font-family:var(--serif);font-size:17.5px;color:var(--b900);
  font-weight:600;letter-spacing:.08em;line-height:1.9}
.row-item .r-text{font-size:14.5px;line-height:2.15;color:#3d3d3d}
.row-item .tag-row{margin-top:12px}

/* --- 引用・理念ブロック --- */
.pull{border-left:3px solid var(--yellow);background:var(--b050);
  padding:26px 30px;border-radius:0 4px 4px 0;margin-top:26px}
.pull .p-title{font-family:var(--serif);font-size:15.5px;color:var(--b900);
  font-weight:600;letter-spacing:.12em;margin-bottom:10px}
.pull p{font-size:14.5px;line-height:2.15;color:#3d3d3d}
.pull p+p{margin-top:12px}

/* --- 代表挨拶：手紙レイアウト --- */
.letter .open{font-family:var(--serif);font-size:clamp(18px,1.9vw,23px);color:var(--b900);
  letter-spacing:.14em;line-height:2.2;font-weight:600;margin-bottom:1.8em}
.letter p{font-size:15.5px;line-height:2.4;color:#333}
.letter p+p{margin-top:1.6em}
.letter .sign{margin-top:2.6em;text-align:right;font-family:var(--serif);color:var(--ink)}
.letter .sign .name{font-size:1.3em;letter-spacing:.22em}

/* --- 会社概要テーブル：横罫のみの上質スタイル --- */
.def-table,.def-table th,.def-table td{border-left:none;border-right:none}
.def-table{border-top:2px solid var(--b900)}
.def-table th{background:transparent;position:relative;padding-left:20px}
.def-table th::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:17px;background:var(--yellow)}
.def-table tr{transition:background .25s}
.def-table tr:hover th,.def-table tr:hover td{background:var(--b050)}

/* --- 方向つきリビール --- */
.reveal-l{opacity:0;transform:translateX(-40px);filter:blur(5px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--rd,0s)}
.reveal-r{opacity:0;transform:translateX(40px);filter:blur(5px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
  transition-delay:var(--rd,0s)}
.reveal-l.on,.reveal-r.on{opacity:1;transform:none;filter:none}


/* ============================================================
   v2.4 Imagery — 実写ビデオHero＋現行サイト写真素材の統合
   ============================================================ */
.hero .bgv,.subhero .bgv{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.hero .veil,.subhero .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(5,35,127,.90) 0%,rgba(0,66,152,.78) 55%,rgba(0,98,183,.62) 100%)}
.hero .hero-arcs,.subhero .arcs{z-index:1}
.hero .inner,.subhero .container{z-index:2}
.subhero{isolation:isolate}

.media{border-radius:6px;overflow:hidden;position:relative;background:var(--b050)}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.media:hover img{transform:scale(1.045)}
.media .cap{position:absolute;left:0;bottom:0;z-index:2;background:rgba(5,35,127,.82);
  color:#fff;font-size:11px;letter-spacing:.14em;padding:6px 14px;font-family:var(--en)}
/* 写真をブランドトーンに揃える藍の薄膜 */
.media.tone::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,rgba(5,35,127,.20),rgba(0,98,183,.06))}
/* 図版・スクリーンショット・ロゴ壁 ── 切り抜かず等比で完全表示 */
.media.fit{background:#fff;border:1px solid var(--line)}
.media.fit img{object-fit:contain;padding:18px;transition:none}
.media.fit:hover img{transform:none}
/* SVGイラストパネル（自作ブランド插画） */
.media.ill img{object-fit:cover}
/* 画像ロードのフェードイン */
.media img{opacity:0;transition:opacity .7s ease,transform .9s var(--ease)}
.media img.ok{opacity:1}
@media (prefers-reduced-motion: reduce){.media img{opacity:1}}

.img-frame{position:relative}
.img-frame::after{content:"";position:absolute;right:-14px;bottom:-14px;
  width:46%;height:46%;background:var(--b100);z-index:-1}
.img-frame .media{box-shadow:0 18px 44px rgba(5,35,127,.14)}

.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,5vw,70px);align-items:center}

.svc .media{margin:-36px -32px 26px;border-radius:4px 4px 0 0;aspect-ratio:16/9}
.svc{overflow:hidden}

.gallery{display:grid;gap:16px}
.gallery.g2{grid-template-columns:repeat(2,1fr)}
.gallery.g3{grid-template-columns:repeat(3,1fr)}
.gallery.g4{grid-template-columns:repeat(4,1fr)}
.gallery .media{aspect-ratio:4/3}
.gallery.wide .media{aspect-ratio:16/10}
.gallery-note{margin-top:14px;font-size:12px;color:#888;letter-spacing:.08em}

.block .media.banner{margin:18px 0 6px;aspect-ratio:21/9}
.ed-body .media.banner{aspect-ratio:21/9;margin-bottom:34px}


/* ============================================================
   v2.9 Imagery interaction — ワイプ顕現・ライトボックス・月相・弧線描画
   ============================================================ */
/* --- 画像：ワイプ（拭き出し）顕現 --- */
.reveal .media,.reveal-l .media,.reveal-r .media{
  clip-path:inset(0 100% 0 0 round 6px);transition:clip-path 1.1s var(--ease) .15s}
.reveal.on .media,.reveal-l.on .media,.reveal-r.on .media{clip-path:inset(0 0 0 0 round 6px)}

/* --- ギャラリー：ホバーで拡大アイコン＋キャプション --- */
.gallery .media,.media.banner,.img-frame .media{cursor:zoom-in}
.gallery .media::before{
  content:"＋";position:absolute;right:10px;bottom:10px;width:30px;height:30px;
  border-radius:50%;background:rgba(5,35,127,.85);color:#fff;z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.gallery .media:hover::before{opacity:1;transform:none}
.media .cap{transform:translateY(100%);transition:transform .35s var(--ease)}
.media:hover .cap,.reveal.on .media .cap{transform:none}

/* --- ライトボックス --- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(2,9,28,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:88vw;max-height:82vh;border-radius:6px;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.95);transition:transform .35s var(--ease)}
.lb.open img{transform:none}
.lb .lb-x,.lb .lb-p,.lb .lb-n{
  position:absolute;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:.25s;
  font-family:var(--sans)}
.lb .lb-x:hover,.lb .lb-p:hover,.lb .lb-n:hover{background:var(--yellow);color:var(--b900);border-color:var(--yellow)}
.lb .lb-x{top:22px;right:24px}
.lb .lb-p{left:22px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:22px;top:50%;transform:translateY(-50%)}
.lb .lb-cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:12.5px;letter-spacing:.08em;max-width:80vw;text-align:center}

/* --- 沿革：月相ノード（新月牙→満月）＋ ホバー演出 --- */
.tl-item::before{display:none}
.tl-item{border-radius:10px;padding-right:18px;
  transition:background .4s var(--ease),padding-left .4s var(--ease),transform .4s var(--ease)}
.tl-item:hover{background:linear-gradient(90deg,var(--b050) 0%,rgba(244,248,252,0) 80%);
  padding-left:40px;transform:translateX(2px)}
.tl-item .year{position:relative;display:inline-block;
  transition:color .35s,letter-spacing .35s var(--ease)}
.tl-item .year::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;
  background:var(--yellow);transition:width .4s var(--ease)}
.tl-item:hover .year{color:var(--b500);letter-spacing:.12em}
.tl-item:hover .year::after{width:100%}
.tl-item p{transition:color .35s}
.tl-item:hover p{color:var(--ink)}
.tl-moon{position:absolute;left:-29px;top:7px;width:22px;height:22px;transition:transform .3s var(--ease)}
.tl-item:hover .tl-moon{transform:scale(1.3) rotate(-10deg)}
.tl-moon circle{fill:#fff;stroke:var(--b500);stroke-width:1.5}
.tl-moon path{fill:var(--yellow)}

/* --- 装飾弧線：ビューポート到達で描画 --- */
.draw-arc circle{stroke-dasharray:1;stroke-dashoffset:1;
  animation:arcDraw 1.9s var(--ease) forwards}
.draw-arc circle:nth-of-type(2){animation-delay:.3s}
.draw-arc circle:nth-of-type(3){animation-delay:.6s}
@keyframes arcDraw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion: reduce){
  .reveal .media,.reveal-l .media,.reveal-r .media{clip-path:none}
  .media .cap{transform:none}
  .draw-arc circle{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}


/* --- スクリーンショット素材：余白を切り落として拡大表示 --- */
.media.shot{background:#F4F6FA}
.media.shot img{object-fit:cover;transform:scale(1.1);object-position:center 32%}
.media.shot:hover img{transform:scale(1.14)}

/* --- セクション見出し（コンパクト＝ed-side と同格） --- */
.sec-head.compact .en{font-family:var(--en);font-size:clamp(23px,2.3vw,30px);letter-spacing:.08em;line-height:1.2}
.sec-head.compact .ja{margin-top:8px;font-size:12.5px;letter-spacing:.22em;color:var(--b500);font-weight:700}
.sec-head.compact .bar{width:44px;margin-top:18px}
/* 背景と一体化するフル幅図版 */
.media.plain{background:transparent;border:none;border-radius:0;cursor:default;
  transition:transform .55s var(--ease)}
.media.plain:hover{transform:translateY(-6px) scale(1.012)}
.media.plain img{padding:0}
.media.plain:hover img{transform:none}
/* ライトボックス対象外 */
.media.nolb{cursor:default}

/* --- パートナーロゴグリッド --- */
.partner-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:14px;margin-top:18px}
.pg-sub{font-family:var(--serif);font-size:16.5px;letter-spacing:.12em;color:var(--b900);
  margin-top:34px;padding-left:15px;position:relative}
.pg-sub::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;background:var(--yellow)}
.partner-grid .p-card{flex:0 0 calc(25% - 11.5px);min-width:0}
.p-card{background:#fff;border:1px solid var(--line);border-radius:10px;height:94px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.p-card:hover{border-color:var(--mist);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(5,35,127,.08)}
.p-card img{max-height:30px;max-width:68%;width:auto}
.p-card img.tall{max-height:40px}
.p-card svg{height:40px;max-width:86%}
.partner-note{margin-top:14px;font-size:11.5px;color:#8B8F9C;letter-spacing:.08em}
@media(max-width:960px){.partner-grid .p-card{flex-basis:calc(50% - 7px)}}


/* --- フッター：プライバシーマーク --- */
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:54px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.foot-bottom .copyright{margin:0;padding:0;border:none;text-align:right;flex:1}
.pmark{display:flex;align-items:center;gap:8px}
.pmark img{height:28px;width:auto}
.pmark span{font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.55)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .hero h1 .line span{transform:none}
  .hero .sub{opacity:1}
  .reveal,.reveal-l,.reveal-r{filter:none}
  .subhero .en,.subhero .ja,.subhero .breadcrumb{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:1fr}
  .svc p{min-height:0}
  .num-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .num-cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.16);padding:20px 6px}
  .two-col,.three-col,.swatch-grid{grid-template-columns:1fr}
  .gnav{display:none}
  .menu-btn{display:block;background:none;border:none;color:var(--b900);
    font-family:var(--en);letter-spacing:.2em;font-size:12px;cursor:pointer}
  .gnav.open{display:flex;position:fixed;inset:72px 0 auto 0;background:#fff;
    flex-direction:column;padding:30px;gap:22px;border-bottom:1px solid var(--line)}
  section{padding:72px 0}
  .block{padding:30px 24px}
  .def-table th{width:120px;padding:12px}
  .def-table td{padding:12px 16px}
  .hero .hero-arcs{right:-40vw;width:120vw;opacity:.5}
  .to-top{right:18px;bottom:18px}
  .intro-grid,.ed-grid{grid-template-columns:1fr;gap:30px}
  .ed-side{position:static}
  .ed-side .ed-num{font-size:44px}
  .row-item{grid-template-columns:1fr;gap:6px;padding:24px 10px 24px 14px}
  .about-grid{grid-template-columns:1fr}
  .gallery.g3,.gallery.g4{grid-template-columns:repeat(2,1fr)}
  .row-item .r-num{font-size:15px;padding-top:0}
  .foot-grid{flex-direction:column;gap:38px}
  .foot-nav{flex-direction:column;gap:16px}
  .foot-nav a{white-space:nowrap;writing-mode:horizontal-tb}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .foot-bottom .copyright{text-align:left;flex:none;width:100%;font-size:10.5px;
    line-height:2;padding-right:70px}
}

/* ---------- Privacy policy (privacy.html) ---------- */
.policy{position:relative;z-index:1}
.policy-meta{display:flex;gap:28px;justify-content:flex-end;margin:10px 0 34px;
  font-size:12.5px;letter-spacing:.06em;color:#8B8F9C}
.policy p{font-size:14.5px;line-height:2.25;color:#2e2e2e}
.policy .policy-sec{margin-top:54px}
.policy h2{font-family:var(--serif);font-size:20px;letter-spacing:.1em;color:var(--b900);
  line-height:1.7;padding:0 0 14px 20px;margin-bottom:26px;position:relative;
  border-bottom:2px solid var(--b900)}
.policy h2::before{content:"";position:absolute;left:0;top:6px;width:4px;height:22px;
  background:var(--yellow)}
.policy h3{font-family:var(--serif);font-size:16px;letter-spacing:.08em;color:var(--b900);
  margin:34px 0 12px;padding-left:16px;position:relative}
.policy h3::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;background:var(--yellow)}
.policy ol.decl{list-style:none;counter-reset:pd;margin:26px 0 0}
.policy ol.decl li{counter-increment:pd;position:relative;padding:18px 4px 18px 54px;
  font-size:14.5px;line-height:2.1;color:#2e2e2e;border-bottom:1px solid var(--line)}
.policy ol.decl li::before{content:counter(pd);position:absolute;left:6px;top:20px;
  width:30px;height:30px;border:1px solid var(--b900);border-radius:50%;
  display:grid;place-items:center;font-family:var(--en);font-size:13px;color:var(--b900)}
.policy .sign{text-align:right;margin-top:30px;font-size:14.5px;line-height:2.2;color:#2e2e2e}
.policy .u-item{padding:16px 0;border-bottom:1px solid var(--line)}
.policy .u-item:first-of-type{border-top:1px solid var(--line)}
.policy .u-item b{display:block;font-size:14.5px;color:var(--b900);font-weight:700;margin-bottom:4px}
.policy .u-item p{margin:0}
.policy-box{background:var(--b050);border-top:2px solid var(--b900);padding:34px 30px;
  text-align:center;margin-top:60px}
.policy-box .bx-title{font-family:var(--serif);font-size:16.5px;letter-spacing:.08em;
  color:var(--b900);line-height:1.9;margin-bottom:16px}
.policy-box p{font-size:14.5px;line-height:2.1;color:#2e2e2e}
.policy-box a{color:var(--b500,#0062B7);text-decoration:underline}
@media(max-width:960px){
  .policy-meta{justify-content:flex-start;gap:16px}
  .policy h2{font-size:17.5px}
  .policy-box{padding:26px 18px}
}

/* ---------- Contact form embed (contactus.html) ---------- */
.form-note{max-width:800px;margin:34px auto 26px;font-size:12px;line-height:2;color:#777;
  text-align:left}
.form-embed{background:#fff;border:1px solid var(--line);border-top:2px solid var(--b900);
  padding:8px 0 0}
.form-embed iframe{display:block;width:100%;height:1120px;border:0}
@media(max-width:960px){
  .form-note{margin-top:26px}
  .form-embed iframe{height:1220px}
}