/* ============================================================
   IDS コーポレートサイト トップ ― v4
   ・書体と部品を corporate_shibata の流儀に寄せる（Noto Sans JP / Inter、丸ボタン、角丸カード）
   ・格子を「表」ではなく余白で区切る。アイコンは課題入口だけ
   ・写真を背景・面として使い、セクションごとにリズムを変える
   ・キーカラー 赤=IDS / 黄=お客様、1pxのルール、89pxのタイルグリッド、黄金比は継続
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --band:#F4F5F7;
  --mist:#EEF0F3;
  --tile:#EFF3F8;          /* ヒーローのタイル。線(--grid-line)より薄い、やや青寄りのグレー */
  --grid-line:#E6E9ED;
  --line:#E4E7EB;
  --ink:#23262B;
  --ink-soft:#3A3E45;
  --gray:#8A9096;

  --red:#E50012;
  --red-deep:#B8000E;
  --pale:#FBEEEE;
  --yellow:#FFC400;
  --yellow-pale:#FFF6DC;
  --gold:#9A6500;

  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en:"Inter",var(--jp);

  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;
  --tile-size:89px;
  --wrap:1403px; --pad:34px;
  --r:0;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-sweep:cubic-bezier(.62,0,.38,1);
  --sweep-dur:15s;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
section{padding:var(--s6) 0;}
.band{background:var(--band);}
.en{font-family:var(--en);}
figure{margin:0;}

/* --- 見出し --- */
.eyebrow{
  font-family:var(--en);font-weight:700;letter-spacing:.14em;font-size:12px;
  color:var(--gray);text-transform:uppercase;display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red);display:inline-block;}
h1,h2,h3,h4{line-height:1.4;font-weight:700;letter-spacing:.01em;color:var(--ink);}
h2{font-size:clamp(26px,3.1vw,38px);font-weight:900;margin:.5rem 0 0;}
h2 .rd{color:var(--red);}
.lead{color:#52565c;font-size:16px;line-height:1.85;max-width:44em;margin-top:var(--s2);}
.head{margin-bottom:var(--s4);}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4);}

/* --- 1px ルール（赤が右へ抜けて左から戻る） --- */
.rule{position:relative;height:1px;overflow:hidden;}
.rule--ry{background:linear-gradient(90deg,var(--red) 0,var(--red) 34%,var(--yellow) 100%);}
.rule--rg{background:linear-gradient(90deg,var(--red) 0,var(--red) 13%,var(--line) 38%,var(--line) 100%);}
.rule i{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,transparent 0,var(--red) 3.5%,var(--red) 8.5%,transparent 13%);will-change:transform;}
.rule i:nth-child(1){animation:sweepA var(--sweep-dur) var(--ease-sweep) infinite;}
.rule i:nth-child(2){animation:sweepB var(--sweep-dur) var(--ease-sweep) infinite;}
@keyframes sweepA{0%{transform:translateX(0);}27%,100%{transform:translateX(100%);}}
@keyframes sweepB{0%{transform:translateX(-100%);}27%,100%{transform:translateX(0);}}
.rule.d1 i{animation-delay:-4s;}
.rule.d2 i{animation-delay:-8s;}

/* --- タイルグリッド（ヒーローのみ） --- */
.tiles{
  position:absolute;top:0;bottom:0;
  --cw:calc(min(var(--wrap),100%) - var(--pad)*2);
  left:calc(50% - var(--cw)/2 - var(--tile-size)*12);
  width:calc(var(--cw) + var(--tile-size)*24);
  display:grid;grid-template-columns:repeat(auto-fill,var(--tile-size));grid-auto-rows:var(--tile-size);
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);
}
.tile{position:relative;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);perspective:360px;}
/* 裏返る面：opacity 1=グレー／0=白。演出は ids.js（右上からパタパタ→ランダムにグレー→赤い線が走る） */
.tile i{position:absolute;inset:0;background:var(--tile);opacity:1;will-change:transform,opacity;}
.tiles.is-static .tile i{opacity:0;}

/* --- ボタン：丸ボタン、塗りが左から右へ --- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.55em;isolation:isolate;overflow:hidden;
  font-weight:700;font-size:15px;padding:.85em 1.6em;border-radius:999px;border:2px solid transparent;
  transition:color .38s var(--ease-sweep),border-color .38s var(--ease-sweep),background-size .38s var(--ease-sweep),transform .15s ease;
  /* ホバーの塗り：別レイヤー（::before の scaleX）だと角丸の端に1px前後の隙間が出るため、ボタン自身の背景を左から伸ばす */
  background-image:linear-gradient(var(--btn-sweep,transparent),var(--btn-sweep,transparent));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;background-origin:border-box;   /* 枠線(2px)の下まで塗る */
}
.btn:hover{background-size:100% 100%;}
.btn:hover{transform:translateY(-1px);}
.btn .arr{transition:transform .38s var(--ease-sweep);}
.btn:hover .arr{transform:translateX(3px);}
.btn-primary{background-color:var(--red);color:#fff;box-shadow:0 6px 18px rgba(229,0,18,.22);--btn-sweep:var(--red-deep);}
.btn-ghost{background-color:#fff;color:var(--ink);border-color:var(--line);--btn-sweep:var(--ink);}
.btn-ghost:hover{color:#fff;border-color:var(--ink);}
.btn-onink{background-color:#fff;color:var(--ink);--btn-sweep:var(--yellow);}
.btn-line{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.55);--btn-sweep:rgba(255,255,255,.12);}
.btn-sm{padding:.62em 1.2em;font-size:14px;}

/* --- テキストリンク：色と下線が左から右へ --- */
.lx{
  position:relative;display:inline-block;padding-bottom:4px;white-space:nowrap;font-weight:500;font-size:14.5px;
  background-image:linear-gradient(90deg,var(--red) 50%,var(--ink) 50%);background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .38s var(--ease-sweep);
}
.lx::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);}
.lx::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease-sweep);}
.lx:hover{background-position:0 0;}
.lx:hover::after{transform:scaleX(1);}

/* --- 注記チップ（プロトタイプ用） --- */
.chk,.dummy{font-family:var(--en);font-size:10px;font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:999px;display:inline-block;vertical-align:middle;white-space:nowrap;}
.chk{color:var(--gold);background:var(--yellow-pale);border:1px solid var(--yellow);}
.dummy{color:var(--red);border:1px solid var(--red);}

/* ============================================================
   ヘッダー
   ============================================================ */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);}
.nav{display:flex;align-items:center;gap:var(--s4);max-width:var(--wrap);margin:0 auto;padding:10px var(--pad);min-height:100px;transition:min-height .3s var(--ease);}
header.is-scrolled .nav{min-height:62px;}
.logo-img{height:42px;width:auto;transition:height .3s var(--ease);}
header.is-scrolled .logo-img{height:28px;}
.nav-links{display:flex;gap:var(--s3);margin-right:auto;}
.nav-links a{display:flex;flex-direction:column;line-height:1.2;padding:.3em .1em;}
.nav-links .ja{font-size:14.5px;font-weight:700;white-space:nowrap;transition:color .3s var(--ease-sweep);}
.nav-links .en{font-family:var(--en);font-size:10px;letter-spacing:.08em;color:var(--gray);font-weight:700;margin-top:.15em;transition:color .3s var(--ease-sweep);}
.nav-links a:hover .ja,.nav-links a:hover .en,.nav-links a.on .ja,.nav-links a.on .en{color:var(--red);}
.nav-cta{display:flex;gap:.6rem;flex:none;}

/* ============================================================
   01 HERO
   ============================================================ */
.hero{position:relative;padding:var(--s6) 0 var(--s6);overflow:hidden;}
.hero .wrap{position:relative;}
.hero-2{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:center;}
.kick{display:inline-flex;align-items:center;gap:.6em;font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--gray);margin-bottom:var(--s3);}
.kick .mark{width:15px;height:15px;}
.hero h1{font-size:clamp(30px,4.2vw,56px);font-weight:900;line-height:1.3;}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .05em;}
.hero-sub{margin-top:var(--s4);font-size:16.5px;line-height:1.95;color:#52565c;max-width:36em;}
.hero-actions{margin-top:var(--s4);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;}
.hero-badges{margin-top:var(--s4);display:flex;gap:var(--s1);flex-wrap:wrap;}
.badge{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line);background:#fff;padding:6px 12px;border-radius:999px;}
.badge.on{border-color:var(--yellow);background:var(--yellow-pale);color:var(--gold);}
.hero-fig{text-align:center;}
.anniv{display:block;margin:0 auto;max-width:305px;}
.anniv-cap{margin-top:var(--s2);font-size:13.5px;color:var(--ink-soft);}
.anniv-cap em{font-style:normal;color:var(--red);font-weight:700;}

/* ============================================================
   02 PROOF ＋ CLIENTS
   ============================================================ */
.proof{padding:0;}
.proof-grid{display:grid;grid-template-columns:repeat(5,1fr);max-width:var(--wrap);margin:0 auto;padding:var(--s4) var(--pad);gap:var(--s3);}
.proof-item{padding-left:var(--s3);border-left:1px solid var(--line);}
.proof-item:first-child{border-left:0;padding-left:0;}
.proof-num{font-family:var(--en);font-weight:800;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
.proof-num .u{font-family:var(--jp);font-size:14px;font-weight:700;margin-left:3px;color:var(--ink-soft);}
.proof-label{font-size:13.5px;font-weight:500;margin-top:6px;}
.proof-src{font-family:var(--en);font-size:11px;color:var(--gray);margin-top:2px;}
.clients{padding:var(--s4) 0 var(--s5);}
.clients-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);}
.clients-note{font-size:12.5px;color:var(--gray);display:flex;gap:8px;align-items:center;}
.client-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--s1);}
.client-grid li{aspect-ratio:230/130;display:flex;align-items:center;justify-content:center;padding:8px;}
.client-grid img{width:auto;height:auto;max-width:100%;max-height:100%;filter:grayscale(1);opacity:.7;transition:filter .3s var(--ease-sweep),opacity .3s var(--ease-sweep);}
.client-grid li:hover img{filter:none;opacity:1;}

/* ============================================================
   03 VISION（背景写真：赤・黄の糸）
   ============================================================ */
.vision{position:relative;text-align:center;overflow:hidden;background:#fff url(bg-network.jpg) center/cover no-repeat;}
.vision::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.88));}
.vision .wrap{position:relative;}
.vision .quote{font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.5;margin-top:var(--s2);}
.vision .quote .hl{color:var(--red);}
.vision .role{max-width:38em;margin:var(--s3) auto 0;color:#52565c;font-size:15.5px;}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:900px;margin:var(--s5) auto 0;}
.pillar{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);}
.pillar h3{font-size:19px;font-weight:900;}
.pillar p{font-size:13.5px;color:#52565c;margin-top:6px;line-height:1.8;}

/* ============================================================
   04 ENTRY BY NEED（アイコンはここだけ）
   ============================================================ */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.ico{width:28px;height:28px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--gold);}
.needs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.need{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3) var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .3s var(--ease-sweep),transform .2s ease,box-shadow .3s ease;
}
.need:hover{border-color:var(--yellow);transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,38,43,.06);}
.need h3{font-size:18px;font-weight:900;line-height:1.5;}
.need p{font-size:14px;color:#52565c;flex:1;}
.need .more{font-size:13.5px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:.4em;}
.need .more .arr{transition:transform .3s var(--ease-sweep);}
.need:hover .more .arr{transform:translateX(4px);}

/* ============================================================
   05 SERVICES
   ============================================================ */
.svc-lbl{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s3);font-size:18px;font-weight:900;}
.svc-lbl:first-of-type{margin-top:var(--s4);}
.svc-lbl .bg{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;padding:4px 12px;border-radius:999px;}
.svc-lbl .basic{background:var(--ink);color:#fff;}
.svc-lbl .applied{background:var(--yellow);color:var(--ink);}
.svc-lbl .sub{font-size:13px;font-weight:400;color:var(--gray);margin-left:auto;}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.stp{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .3s var(--ease-sweep),transform .2s ease,box-shadow .3s ease;
}
.stp:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,38,43,.06);}
.stp h3{font-size:17px;font-weight:900;line-height:1.5;}
.stp h3 small{display:block;font-family:var(--en);font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--gray);margin-top:3px;}
.stp p{font-size:14px;color:#52565c;flex:1;}
.stp .more{font-size:13.5px;font-weight:700;color:var(--red);}

/* AI-READY の段：上段お客様（黄）・下段IDS（赤） */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);}
.step{display:flex;flex-direction:column;gap:var(--s1);}
.step-head{background:var(--band);padding:var(--s2) var(--s3);}
.step.now .step-head{background:var(--band);}
.step-no{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gray);display:block;}
.step.now .step-no{color:var(--red);}
.step.goal .step-no{color:var(--gold);}
.step-state{font-size:14px;font-weight:700;margin-top:4px;line-height:1.5;}
.scard{
  display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);padding:var(--s2) var(--s3);flex:1;
  transition:border-color .3s var(--ease-sweep),box-shadow .3s ease;
}
.scard:hover{box-shadow:0 10px 26px rgba(35,38,43,.06);}
.scard b{font-size:14px;font-weight:700;line-height:1.5;display:block;}
.scard span{font-size:12px;color:var(--gray);display:block;margin-top:3px;}
.steps-cap{font-size:12.5px;color:var(--gray);margin-top:var(--s2);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;}

.brand-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s5);}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s2);}
.brand-card h3{font-family:var(--en);font-size:22px;font-weight:800;}
.brand-card p{font-size:14px;color:#52565c;flex:1;}
.products{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-top:var(--s3);}
.products .lbl{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gray);}
.products img{height:30px;width:auto;opacity:.85;}

/* ============================================================
   06 CASES
   ============================================================ */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);}
.case .meta{font-family:var(--en);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--gray);}
.case .meta b{color:var(--red);}
.case h3{font-size:17px;font-weight:900;line-height:1.6;flex:1;}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);padding-top:var(--s2);border-top:1px solid var(--line);}
.nums b{display:block;font-family:var(--en);font-size:20px;font-weight:800;color:var(--red);line-height:1.1;letter-spacing:-.01em;}
.nums span{display:block;font-size:11px;color:var(--gray);margin-top:3px;line-height:1.5;}
.case .nometric{padding-top:var(--s2);border-top:1px solid var(--line);font-size:12px;color:var(--gray);}

/* ============================================================
   07 ABOUT / WHY IDS（写真＋体制図＋認定）
   ============================================================ */
.about{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center;}
.about-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about p{color:#52565c;font-size:15.5px;margin-top:var(--s2);}
.why-grid{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s4);margin-top:var(--s5);align-items:stretch;}
.diagram{background:var(--ink);border-radius:var(--r);padding:var(--s4);position:relative;overflow:hidden;color:#fff;}
.diagram::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:var(--s3) var(--s3);}
.dg{position:relative;}
.dg-title{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--yellow);padding-bottom:var(--s2);border-bottom:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:var(--s2);}
.dg-box{margin-top:var(--s3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--red);padding:var(--s2) var(--s3);}
.dg-box.vn{border-left-color:var(--yellow);}
.dg-co{font-size:15px;font-weight:700;color:#fff;}
.dg-co small{display:block;font-family:var(--en);font-size:11px;font-weight:500;color:#9aa3ad;margin-top:3px;letter-spacing:.04em;}
.dg-role{font-size:12.5px;color:#c4ccd4;margin-top:6px;}
.dg-conn{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;}
.dg-conn .ln{flex:1;height:1px;background:rgba(255,255,255,.22);}
.dg-conn .lb{font-size:11.5px;font-weight:700;color:var(--yellow);}
.dg-vn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.dg-vn .dg-box{margin-top:0;}
.dg-base{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid rgba(255,255,255,.15);display:flex;gap:6px;flex-wrap:wrap;}
.dg-chip{font-family:var(--en);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#dfe5ea;border:1px solid rgba(255,255,255,.22);padding:4px 10px;border-radius:999px;}
figcaption.cap{font-size:12px;color:var(--gray);margin-top:var(--s2);line-height:1.7;}
.creds{display:flex;flex-direction:column;gap:var(--s2);}
.cred-photo{border-radius:var(--r);overflow:hidden;}
.cred-photo img{width:100%;height:auto;display:block;}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);}
.badges li{background:#fff;border:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:70px;}
.badges li.wide{grid-column:1/-1;}
.badges img{max-height:50px;max-width:100%;width:auto;height:auto;}

/* ============================================================
   08 VOICE
   ============================================================ */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.voice-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s3);position:relative;}
.voice-card::before{content:'“';position:absolute;top:10px;left:18px;font-family:var(--en);font-size:56px;font-weight:800;color:var(--red);opacity:.18;line-height:1;}
.voice-card blockquote{font-size:15.5px;font-weight:500;line-height:1.85;flex:1;}
.voice-meta{padding-top:var(--s2);border-top:1px solid var(--line);font-size:13px;}
.voice-meta b{display:block;font-weight:700;}
.voice-meta small{display:block;color:var(--gray);font-size:12px;margin-top:2px;}

/* ============================================================
   09 NEWS & KNOWLEDGE
   ============================================================ */
.know-cols{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);}
.know-col h3{font-size:16px;font-weight:900;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding-bottom:var(--s2);}
.news a{display:grid;grid-template-columns:96px 84px 1fr;gap:var(--s2);align-items:center;padding:var(--s2) 0;border-top:1px solid var(--line);transition:padding-left .3s var(--ease-sweep);}
.news a:last-child{border-bottom:1px solid var(--line);}
.news a:hover{padding-left:6px;}
.news .date{font-family:var(--en);font-weight:600;font-size:13.5px;color:var(--gray);}
.news .cat{font-size:11px;font-weight:700;padding:3px 0;border-radius:999px;text-align:center;background:var(--pale);color:var(--red);}
.news .cat.sem{background:var(--yellow-pale);color:var(--gold);}
.news .cat.gray{background:var(--band);color:var(--ink-soft);}
.news .ttl{font-size:14.5px;line-height:1.7;transition:color .3s var(--ease-sweep);}
.news a:hover .ttl{color:var(--red);}

/* ============================================================
   10 RECRUIT（写真を面で使う）
   ============================================================ */
.recruit{position:relative;overflow:hidden;padding:0;}
.rc-2{display:grid;grid-template-columns:1fr 1.618fr;min-height:560px;}
.rc-photo{position:relative;}
.rc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rc-photo figcaption{position:absolute;left:var(--s3);bottom:var(--s3);background:rgba(35,38,43,.75);color:#fff;font-size:11.5px;padding:6px 12px;border-radius:999px;display:flex;gap:8px;align-items:center;}
.rc-body{padding:var(--s6) var(--s5);display:flex;flex-direction:column;justify-content:center;}
.rc-body h2{margin-top:.5rem;}
.rc-text{color:#52565c;font-size:15.5px;margin-top:var(--s3);max-width:40em;}
.rc-pos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4);}
.rc-p{background:#fff;border:1px solid var(--line);padding:var(--s2) var(--s3);}
.rc-p b{font-size:14.5px;font-weight:700;display:block;}
.rc-p span{font-size:12.5px;color:var(--gray);display:block;margin-top:2px;}
.rc-actions{margin-top:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}

/* ============================================================
   11 CTA（IDSのサインを背景に）
   ============================================================ */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:var(--s7) 0;background:var(--ink) url(photo-sign.jpg) center 40%/cover no-repeat;}
.cta::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,38,43,.9),rgba(35,38,43,.84));}
.cta .rule,.cta .cta-inner{position:relative;z-index:1;}
.cta .rule{position:absolute;top:0;left:0;right:0;}
.cta-inner{max-width:760px;margin:0 auto;padding:0 var(--pad);}
.cta h2{color:#fff;}
.cta p{color:#c7ccd3;margin-top:var(--s3);font-size:16px;}
.cta .row{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;}
.cta-tel{margin-top:var(--s4);font-family:var(--en);font-size:13px;color:#9aa3ad;}
.cta-tel a{color:#dfe5ea;border-bottom:1px solid rgba(255,255,255,.3);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:#c7ccd3;padding:var(--s6) 0 var(--s4);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid rgba(255,255,255,.14);}
.foot-brand .logo-img{height:34px;margin-bottom:var(--s3);}
.foot-co{font-size:13px;line-height:1.9;color:#aeb3bb;font-style:normal;}
.foot-vision{margin-top:var(--s3);padding-left:var(--s2);border-left:2px solid var(--yellow);font-size:13.5px;color:#fff;font-weight:500;}
.foot-col h4{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--yellow);margin-bottom:var(--s2);text-transform:uppercase;}
.foot-col a{display:block;font-size:13.5px;color:#c7ccd3;margin-bottom:9px;transition:color .3s var(--ease-sweep);}
.foot-col a:hover{color:#fff;}
/* .foot-col a.ext::after は削除（リンク文字に ↗ を含むため二重表示になっていた） */
.foot-legal{display:flex;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-legal a{font-size:12.5px;color:#aeb3bb;transition:color .3s var(--ease-sweep);}
.foot-legal a:hover{color:#fff;}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s3);font-size:12px;color:#8a9096;}

/* --- プロトタイプ用（納品時は削除） --- */
.sources{background:var(--band);padding:var(--s4) 0;font-size:12.5px;color:var(--ink-soft);}
.sources summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:8px;}
.sources summary::-webkit-details-marker{display:none;}
.sources summary::before{content:'＋';color:var(--red);}
.sources details[open] summary::before{content:'−';}
.sources dl{margin-top:var(--s3);display:grid;grid-template-columns:160px 1fr;gap:6px var(--s3);line-height:1.8;}
.sources dt{font-weight:700;}
.m-cta{display:none;}

/* --- 表示アニメーション（初期状態は visible。JSが動くときだけ待機させる） ---
   スクロールで該当箇所に来たらスライドフェードイン。
   [data-stagger] の直下要素は 110ms 刻みで順番に表示する。 */
:root{--ease-out:cubic-bezier(.16,.84,.3,1);}
.js-on .reveal,.js-on [data-stagger]>*{opacity:0;transform:translateY(32px);will-change:opacity,transform;}
.js-on .reveal[data-from="left"]{transform:translateX(-40px);}
.js-on .reveal[data-from="right"]{transform:translateX(40px);}
.js-on .reveal.is-in,.js-on [data-stagger]>.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);}
.js-on [data-stagger].is-in>*{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .js-on .reveal{opacity:1!important;transform:none!important;}
  .lx{color:var(--ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;}
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1180px){
  .nav-links{gap:var(--s2);}
  .nav-links .ja{font-size:13px;}
  .client-grid{grid-template-columns:repeat(6,1fr);}
  .steps{grid-template-columns:repeat(3,1fr);}
  .svc-grid,.needs-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  :root{--pad:21px;}
  section{padding:var(--s5) 0;}
  .nav-links{display:none;}
  .nav-cta .btn-ghost{display:none;}
  .tiles{left:0;width:100%;}
  .hero-2{grid-template-columns:1fr;gap:var(--s4);}
  .anniv{max-width:233px;}
  .proof-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--s3);}
  .proof-item{border-left:0;padding-left:0;}
  .client-grid{grid-template-columns:repeat(4,1fr);}
  .pillars{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .case-grid,.voice-grid{grid-template-columns:1fr;}
  .about,.why-grid,.know-cols,.brand-strip{grid-template-columns:1fr;gap:var(--s4);}
  .rc-2{grid-template-columns:1fr;}
  .rc-photo{aspect-ratio:1.618/1;}
  .rc-body{padding:var(--s5) var(--pad);}
  .rc-pos{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr 1fr;row-gap:var(--s4);}
  .foot-brand{grid-column:1/-1;}
  .sources dl{grid-template-columns:1fr;}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}   /* 下部ボタン（60px）とぴったり同じ高さ。ずれると最下部で隙間が線に見える */
  /* 画面上部では隠し、ヘッダーが小さくなる（is-scrolled）タイミングで下からスライドして出す。切替は ids.js */
  .m-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:120;padding-bottom:env(safe-area-inset-bottom);
    /* ヘッダー（スクロール後）と同じぼかし透過 */
    background:rgba(255,255,255,.55);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease-io),visibility 0s linear .45s;}
  .m-cta.is-on{transform:none;visibility:visible;transition:transform .45s var(--ease-io),visibility 0s;}
  body.is-menu-open .m-cta{transform:translateY(100%);visibility:hidden;}
  .m-cta a{display:flex;align-items:center;justify-content:center;height:60px;padding:0 8px;font-size:14px;font-weight:700;line-height:1.4;background:transparent;color:var(--ink);}
  .m-cta a.solid{background:rgba(229,0,18,.86);color:#fff;}
}
@media (max-width:640px){
  .svc-grid,.needs-grid,.steps,.client-grid,.badges{grid-template-columns:1fr;}
  .client-grid{grid-template-columns:repeat(3,1fr);}
  .news a{grid-template-columns:80px 1fr;}
  .news .cat{display:none;}
  .foot-top{grid-template-columns:1fr 1fr;column-gap:var(--s3);}
  .pcbr{display:none;}
}

/* ============================================================
   ② ローディング画面 ── 黄の■が現れ、赤の○が受け止める
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:9999;background:#fff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
  transition:transform .7s var(--ease-sweep),opacity .5s ease;
}
.loader.is-done{transform:translateY(-100%);opacity:0;pointer-events:none;}
.loader.is-hidden{display:none;}
.ld{width:84px;height:84px;}
.ld-sq,.ld-ci{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.ld-sq{stroke:var(--yellow);stroke-dasharray:104;stroke-dashoffset:104;animation:ldSq 1.8s var(--ease-out) infinite;}
.ld-ci{stroke:var(--red);stroke-dasharray:76;stroke-dashoffset:76;transform-origin:31px 17px;transform:rotate(-90deg);animation:ldCi 1.8s var(--ease-out) infinite;}
@keyframes ldSq{
  0%{stroke-dashoffset:104;opacity:1;}
  38%{stroke-dashoffset:0;opacity:1;}
  80%{stroke-dashoffset:0;opacity:1;}
  92%,100%{stroke-dashoffset:0;opacity:0;}
}
@keyframes ldCi{
  0%,24%{stroke-dashoffset:76;opacity:1;transform:rotate(-90deg) scale(.85);}
  62%{stroke-dashoffset:0;opacity:1;transform:rotate(-90deg) scale(1);}
  80%{stroke-dashoffset:0;opacity:1;transform:rotate(-90deg) scale(1);}
  92%,100%{stroke-dashoffset:0;opacity:0;transform:rotate(-90deg) scale(1);}
}
.ld-txt{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--gray);}
.ld-bar{width:84px;height:1px;background:var(--line);position:relative;overflow:hidden;}
.ld-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--red),var(--yellow));transform-origin:left;animation:ldBar 1.8s var(--ease-out) infinite;}
@keyframes ldBar{0%{transform:scaleX(0);}80%{transform:scaleX(1);}100%{transform:scaleX(1);opacity:0;}}
@media (prefers-reduced-motion:reduce){.loader{display:none;}}

/* ============================================================
   ③ 下層ページ 共通部品
   ============================================================ */
/* ページヘッド */
.page-hero{position:relative;padding:var(--s5) 0 var(--s5);background:var(--band);overflow:hidden;}
.page-hero.has-photo{color:#fff;background:var(--ink);min-height:420px;display:flex;align-items:flex-end;}
.page-hero.has-photo img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;}
.page-hero.has-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,38,43,.1),rgba(35,38,43,.75));}
.page-hero .wrap{position:relative;z-index:1;width:100%;}
.page-hero h1{font-size:clamp(28px,3.6vw,46px);font-weight:900;line-height:1.35;margin-top:.5rem;max-width:26em;}
.page-hero.has-photo h1,.page-hero.has-photo .lead{color:#fff;}
.page-hero.has-photo .lead{color:#dfe5ea;}
.page-hero .lead{max-width:46em;}
.page-hero .actions{margin-top:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}
.page-hero .tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3);}
.crumb{font-size:12.5px;color:var(--gray);display:flex;gap:.6em;flex-wrap:wrap;margin-bottom:var(--s3);}
.crumb a{transition:color .3s var(--ease-sweep);}
.crumb a:hover{color:var(--red);}
.page-hero.has-photo .crumb,.page-hero.has-photo .crumb a{color:#c7ccd3;}
.page-hero.has-photo .eyebrow{color:var(--yellow);}
.page-hero.has-photo .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.page-hero.has-photo .badge.on{background:rgba(255,196,0,.2);border-color:var(--yellow);color:var(--yellow);}

/* セクション内の見出し（h2＋リード） */
.sec-title{margin-bottom:var(--s4);}
.sec-title .lead{margin-top:var(--s2);}

/* 汎用グリッド */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.gphi{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center;}
.gphi.r{grid-template-columns:1.618fr 1fr;}

/* カード（角丸） */
.c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);}
.c h3{font-size:17px;font-weight:900;line-height:1.5;}
.c p{font-size:14px;color:#52565c;margin-top:8px;}
.c .num{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red);display:block;margin-bottom:6px;}
.c.pain{border-left:3px solid var(--yellow);}
.c.sol{border-left:3px solid var(--red);}
.c .links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:var(--s2);}
.c .links a{font-size:13.5px;font-weight:700;color:var(--red);}

/* 強調ブロック（リスク・結論） */
.callout{background:var(--ink);color:#fff;border-radius:var(--r);padding:var(--s4);position:relative;overflow:hidden;}
.callout::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);background-size:var(--s3) var(--s3);}
.callout>*{position:relative;}
.callout h2,.callout h3{color:#fff;}
.callout p{color:#c7ccd3;margin-top:var(--s2);font-size:15.5px;}
.callout.pale{background:var(--pale);color:var(--ink);}
.callout.pale::before{display:none;}
.callout.pale h2,.callout.pale h3{color:var(--ink);}
.callout.pale p{color:#52565c;}
.callout .big{font-family:var(--en);font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.02em;color:var(--red);}
.callout .big small{font-family:var(--jp);font-size:15px;font-weight:700;color:var(--ink);margin-left:.4em;letter-spacing:0;}

/* 手順（横並び・順番表示） */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.flow .st{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);}
.flow .st .no{font-family:var(--en);font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--red);}
.flow .st h3{font-size:17px;font-weight:900;margin-top:6px;}
.flow .st p{font-size:14px;color:#52565c;margin-top:8px;}
.flow .st .dur{display:inline-block;margin-top:var(--s2);font-size:12px;font-weight:700;color:var(--gold);background:var(--yellow-pale);padding:3px 10px;border-radius:999px;}
.flow .st:not(:last-child)::after{content:'→';position:absolute;right:-22px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:18px;}

/* チェックリスト */
.ck{display:grid;gap:10px;}
.ck li{position:relative;padding-left:28px;font-size:15px;line-height:1.75;}
.ck li::before{content:'';position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--red);}
.ck li::after{content:'';position:absolute;left:5px;top:.72em;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);}
.ck.y li::before{background:var(--yellow);}
.ck.y li::after{border-color:var(--ink);}

/* FAQ */
.faq{display:grid;gap:var(--s1);}
.faq details{background:#fff;border:1px solid var(--line);padding:0 var(--s3);}
.faq summary{cursor:pointer;list-style:none;padding:var(--s2) 0;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:'Q';font-family:var(--en);font-weight:800;color:var(--red);margin-right:.6em;}
.faq summary::after{content:'＋';color:var(--gray);font-weight:400;flex:none;}
.faq details[open] summary::after{content:'−';}
.faq .a{padding:0 0 var(--s3) 1.9em;font-size:14.5px;color:#52565c;}

/* 料金 */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.price .c .amt{font-family:var(--en);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--ink);margin-top:6px;}
.price .c .amt small{font-family:var(--jp);font-size:13px;font-weight:700;color:var(--gray);margin-left:.3em;}
.price .c ul{margin-top:var(--s2);display:grid;gap:5px;font-size:13.5px;color:#52565c;}
.price .c ul li::before{content:'・';color:var(--red);}

/* 数値（事例） */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.stats .c{text-align:center;padding:var(--s3) var(--s2);}
.stats b{display:block;font-family:var(--en);font-weight:800;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;color:var(--red);line-height:1.1;}
.stats span{display:block;font-size:12.5px;color:var(--gray);margin-top:6px;}

/* 事例一覧のフィルタ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s4);}
.filters button{font-family:var(--jp);font-size:13.5px;font-weight:700;padding:.5em 1.1em;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .3s var(--ease-sweep);}
.filters button:hover{border-color:var(--ink);color:var(--ink);}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.list-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:var(--s4);}
.list-pager button{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--jp);font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;}
.list-pager button:hover:not(:disabled){border-color:var(--ink);}
.list-pager button.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.list-pager button:disabled{opacity:.4;cursor:default;}
.list-pager .ellipsis{padding:0 2px;color:var(--gray);}
.case.is-hide{display:none;}
.case .thumb{aspect-ratio:1.618/1;overflow:hidden;background:var(--band);margin:-8px -8px var(--s2);}
.case .thumb img{width:100%;height:100%;object-fit:cover;}

/* 事例詳細：構成図 */
.arch{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1);align-items:stretch;}
.arch .n{background:var(--band);padding:var(--s2);font-size:13px;line-height:1.6;text-align:center;position:relative;}
.arch .n b{display:block;font-size:14px;font-weight:900;}
.arch .n.bad{background:var(--pale);}
.arch .n.good{background:var(--yellow-pale);}
.arch .n:not(:last-child)::after{content:'▶';position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:10px;}

/* 定義リスト（会社概要） */
.prof{border-top:1px solid var(--line);}
.prof div{display:grid;grid-template-columns:200px 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);}
.prof dt{font-weight:700;font-size:14.5px;}
.prof dd{font-size:14.5px;color:#3a3e45;}

/* サイトマップ */
.smap-sec{padding-top:var(--s4);padding-bottom:var(--s5);}
.smap-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s3);}
.smap-quick a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px var(--s2);border:1px solid var(--line);background:#fff;font-weight:700;text-align:center;transition:border-color .2s var(--ease),color .2s var(--ease);}
.smap-quick a:hover{border-color:var(--red);color:var(--red);}
.smap-card{border:1px solid var(--line);background:#fff;margin-bottom:var(--s3);padding:0;}
.smap-card h2{margin:0;font-size:16px;font-weight:900;line-height:1.4;background:var(--band);border-left:3px solid var(--red);padding:11px var(--s3);}
.smap-card h2 a:hover,.smap-card h3 a:hover,.smap-card li a:hover{color:var(--red);}
.smap-grid,.smap-split{display:grid;align-items:start;background:#fff;border-top:1px solid var(--line);}
.smap-main{grid-template-columns:repeat(4,minmax(0,1fr));}
.smap-side{grid-template-columns:1fr 1fr;}
.smap-split{grid-template-columns:1.45fr .85fr 1.1fr;border-top:none;}
.smap-grid > div{padding:16px var(--s3) 14px;}
.smap-grid > div + div,.smap-split > div + div{border-left:1px solid var(--line);}
.smap-split > div{min-width:0;}
.smap-grid h3{margin:0 0 8px;font-size:14.5px;font-weight:900;line-height:1.45;}
.smap-card ul{list-style:none;margin:0;padding:0;}
.smap-card li{font-size:14px;line-height:1.45;color:var(--ink-soft);}
.smap-card li > a{display:inline-block;padding:2px 0;}
.smap-card li ul{margin:0 0 2px .35rem;padding-left:.7rem;border-left:1px solid var(--line);}
.smap-card ul.smap-list{padding:16px var(--s3) 14px;}
.smap-duo{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s3);padding:16px var(--s3) 14px;}
.smap-card .smap-duo ul.smap-list{padding:0;}
@media (max-width:1100px){
  .smap-main{grid-template-columns:1fr 1fr;}
  .smap-main > div:nth-child(odd){border-left:none;}
  .smap-main > div:nth-child(n+3){border-top:1px solid var(--line);}
  .smap-split{grid-template-columns:1fr 1fr;}
  .smap-split > div:last-child{grid-column:1 / -1;border-left:none;border-top:1px solid var(--line);}
}
@media (max-width:720px){
  .smap-quick{grid-template-columns:1fr 1fr;}
  .smap-quick li:last-child:nth-child(odd){grid-column:1 / -1;}
  .smap-main,.smap-side,.smap-split{grid-template-columns:1fr;}
  .smap-grid > div,.smap-split > div{border-left:none;}
  .smap-grid > div + div,.smap-split > div + div{border-left:none;border-top:1px solid var(--line);}
  .smap-split > div:last-child{grid-column:auto;}
  .smap-duo{grid-template-columns:1fr;row-gap:0;}
}

/* 沿革 */
.tl{position:relative;padding-left:var(--s5);}
.tl::before{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--line);}
.tl li{position:relative;padding-bottom:var(--s4);}
.tl li::before{content:'';position:absolute;left:calc(-1 * var(--s5) + 13px);top:8px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--red);}
.tl li.y::before{border-color:var(--yellow);}
.tl .d{font-family:var(--en);font-weight:800;font-size:15px;color:var(--red);letter-spacing:.02em;}
.tl h3{font-size:16.5px;font-weight:900;margin-top:2px;}
.tl p{font-size:14px;color:#52565c;margin-top:4px;}

/* アクセス */
.access{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s4);}
.access .map{background:var(--band);border-radius:var(--r);min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:13px;border:1px dashed var(--line);}

/* 認証一覧 */
.certs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);}
.certs .c{display:flex;gap:var(--s2);align-items:center;}
.certs .c b{font-size:14.5px;display:block;}
.certs .c span{font-family:var(--en);font-size:12px;color:var(--gray);}
.certs .c img{max-height:44px;width:auto;}

/* ニュース一覧 */
.tabs{display:flex;gap:8px;margin-bottom:var(--s3);}
.tabs a{font-size:14px;font-weight:700;padding:.5em 1.2em;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);transition:all .3s var(--ease-sweep);}
.tabs a.on,.tabs a:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.news-list a{display:grid;grid-template-columns:110px 96px 1fr 24px;gap:var(--s2);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line);transition:padding-left .3s var(--ease-sweep);}
.news-list a:last-child{border-bottom:1px solid var(--line);}
.news-list a:hover{padding-left:6px;}
.news-list .date{font-family:var(--en);font-weight:600;font-size:14px;color:var(--gray);}
.news-list .cat{font-size:11.5px;font-weight:700;padding:3px 0;border-radius:999px;text-align:center;background:var(--pale);color:var(--red);}
.news-list .cat.sem{background:var(--yellow-pale);color:var(--gold);}
.news-list .cat.gray{background:var(--band);color:var(--ink-soft);}
.news-list .ttl{font-size:15px;line-height:1.7;transition:color .3s var(--ease-sweep);}
.news-list a:hover .ttl{color:var(--red);}
.news-list .go{color:var(--red);font-weight:700;}

/* クレド */
.credo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);}
.credo-grid .c{padding:var(--s3) var(--s2);}
.credo-grid .cn{font-family:var(--en);font-weight:800;font-size:22px;color:var(--gray);line-height:1;}
.credo-grid .cn.red{color:var(--red);}
.credo-grid h3{font-size:15.5px;margin-top:8px;}
.credo-grid p{font-size:12.5px;margin-top:6px;}

/* フォーム */
.form{display:grid;gap:var(--s3);max-width:760px;}
.form label{display:block;font-weight:700;font-size:14.5px;margin-bottom:6px;}
.form label .req{font-size:11px;font-weight:700;color:#fff;background:var(--red);padding:2px 8px;border-radius:999px;margin-left:.6em;vertical-align:middle;}
.form label .opt{font-size:11px;font-weight:700;color:var(--gray);background:var(--band);padding:2px 8px;border-radius:999px;margin-left:.6em;vertical-align:middle;}
.form input,.form select,.form textarea{width:100%;font-family:var(--jp);font-size:15px;padding:.8em 1em;border:1px solid var(--line);background:#fff;transition:border-color .3s var(--ease-sweep),box-shadow .3s ease;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,0,18,.12);}
.form textarea{min-height:160px;resize:vertical;}
.form .agree{font-size:14px;display:flex;gap:10px;align-items:flex-start;}
.form .agree input{width:18px;height:18px;margin-top:4px;}
.form-side{background:var(--band);border-radius:var(--r);padding:var(--s3);font-size:14px;}
.form-side b{display:block;font-size:15px;margin-bottom:6px;}
.form-side .tel{font-family:var(--en);font-weight:800;font-size:24px;color:var(--ink);}

/* ページ内 CTA 帯（淡） */
.cta-soft{background:var(--band);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;}
.cta-soft h2{font-size:clamp(22px,2.6vw,32px);}
.cta-soft p{color:#52565c;margin-top:var(--s2);}
.cta-soft .row{margin-top:var(--s4);display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;}

/* 関連リンク */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);}
.rel a{background:#fff;border:1px solid var(--line);padding:var(--s2) var(--s3);display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14.5px;transition:border-color .3s var(--ease-sweep);}
.rel a:hover{border-color:var(--red);}
.rel a span{color:var(--red);}

/* 現在地ナビ */
.nav-links a.on .ja,.nav-links a.on .en{color:var(--red);}

@media (max-width:1180px){
  .credo-grid{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  .g2,.g3,.g4,.gphi,.gphi.r,.flow,.price,.access,.certs{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .arch{grid-template-columns:1fr;}
  .arch .n:not(:last-child)::after{content:'▼';right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%);}
  .flow .st:not(:last-child)::after{display:none;}
  .prof div{grid-template-columns:1fr;gap:4px;}
  .news-list a{grid-template-columns:90px 1fr;}
  .news-list .cat,.news-list .go{display:none;}
  .credo-grid{grid-template-columns:repeat(2,1fr);}
  .page-hero.has-photo{min-height:340px;}
}
@media (max-width:640px){
  .stats,.credo-grid{grid-template-columns:1fr;}
}

/* ============================================================
   カードのホバー：外周を時計回りになぞって赤に変わる
   ::before が 上→右、::after が 下→左 を描く。離すと逆順で戻る
   ============================================================ */
.need,.stp,.scard,.case,.voice-card,.pillar,.brand-card,.rc-p,.c,.flow .st,.rel a,.faq details{position:relative;}
.need::before,.need::after,.stp::before,.stp::after,.scard::before,.scard::after,.case::before,.case::after,
.voice-card::after,.pillar::before,.pillar::after,.brand-card::before,.brand-card::after,.rc-p::before,.rc-p::after,
.c::before,.c::after,.flow .st::before,.rel a::before,.rel a::after,.faq details::before,.faq details::after{
  content:'';position:absolute;width:0;height:0;pointer-events:none;z-index:2;
  transition:width .2s var(--ease-sweep) .2s,height .2s var(--ease-sweep) 0s;
}
.need::before,.stp::before,.scard::before,.case::before,.pillar::before,.brand-card::before,.rc-p::before,.c::before,.flow .st::before,.rel a::before,.faq details::before{
  top:-1px;left:-1px;border-top:1px solid var(--red);border-right:1px solid var(--red);
}
.need::after,.stp::after,.scard::after,.case::after,.voice-card::after,.pillar::after,.brand-card::after,.rc-p::after,.c::after,.rel a::after,.faq details::after{
  bottom:-1px;right:-1px;border-bottom:1px solid var(--red);border-left:1px solid var(--red);
}
.need:hover::before,.stp:hover::before,.scard:hover::before,.case:hover::before,.pillar:hover::before,.brand-card:hover::before,.rc-p:hover::before,.c:hover::before,.flow .st:hover::before,.rel a:hover::before,.faq details:hover::before{
  width:calc(100% + 2px);height:calc(100% + 2px);
  transition:width .2s var(--ease-sweep) 0s,height .2s var(--ease-sweep) .2s;
}
.need:hover::after,.stp:hover::after,.scard:hover::after,.case:hover::after,.voice-card:hover::after,.pillar:hover::after,.brand-card:hover::after,.rc-p:hover::after,.c:hover::after,.rel a:hover::after,.faq details:hover::after{
  width:calc(100% + 2px);height:calc(100% + 2px);
  transition:width .2s var(--ease-sweep) .4s,height .2s var(--ease-sweep) .6s;
}
/* なぞる効果に置き換えるので、従来の border-color 変化と持ち上がりは外す */
.need:hover,.stp:hover,.scard:hover,.rel a:hover{border-color:var(--line);transform:none;box-shadow:none;}
.flow .st:not(:last-child)::after{width:auto;height:auto;border:0;}
.voice-card::before{content:'“';}

/* ============================================================
   APPLIED のステップ図：矢羽根（シェブロン）で流れを見せる
   ============================================================ */
.steps{gap:var(--s3) 6px;align-items:start;}
.step{gap:0;}
.step-head{
  --notch:18px;
  position:relative;background:var(--yellow-pale);padding:var(--s2) calc(var(--s3) + var(--notch)) var(--s2) calc(var(--s3) + var(--notch));
  min-height:112px;display:flex;flex-direction:column;justify-content:center;border:0;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% 50%,calc(100% - var(--notch)) 100%,0 100%,var(--notch) 50%);
}
.step:first-child .step-head{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% 50%,calc(100% - var(--notch)) 100%,0 100%);padding-left:var(--s3);}
.step.now .step-head{background:var(--band);}
.step.goal .step-head{background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--notch) 50%);padding-right:var(--s3);}
.step-head .n{
  position:absolute;right:calc(var(--notch) + 8px);top:6px;font-family:var(--en);font-weight:800;font-size:40px;line-height:1;
  color:var(--ink);opacity:.1;letter-spacing:-.04em;
}
.step.goal .step-head .n{opacity:.22;right:10px;}
.step-no{font-family:var(--en);font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;}
.step.now .step-no{color:var(--gray);}
.step.goal .step-no{color:var(--ink);}
.step-state{font-size:14.5px;font-weight:900;margin-top:4px;line-height:1.45;}
/* 矢羽根から IDS の支援カードへ落ちる線 */
.step .scard:first-of-type{margin-top:22px;}
.step .scard:first-of-type::before{
  content:'';position:absolute;left:50%;top:-22px;width:2px;height:22px;background:var(--red);
  transform:translateX(-50%);border:0;transition:none;z-index:1;
}
.step .scard:first-of-type:hover::before{width:2px;height:22px;}
.step .scard+.scard{margin-top:6px;}
.steps-cap{font-family:var(--en);font-weight:700;letter-spacing:.06em;}
@media (max-width:980px){
  .step-head{clip-path:none!important;padding:var(--s2) var(--s3)!important;min-height:0;}
  .step-head .n{right:12px;}
}

/* ============================================================
   メインイメージの順番表示
   背景の格子 → 社名 → 30周年ロゴ → キャッチ → リード → ボタン
   文字は1文字ずつフェードイン。JSが動くときだけ待機させる。
   ============================================================ */
.js-on .hero .tiles{opacity:0;transition:opacity 1.4s ease;}
.js-on .hero .tiles.is-on{opacity:1;}
.js-on .hero [data-hero]{opacity:0;}
.js-on .hero [data-hero].is-on{opacity:1;}
.js-on .hero [data-hero="logo"]{transform:translateY(18px) scale(.96);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.js-on .hero [data-hero="actions"],.js-on .hero [data-hero="badges"]{transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.js-on .hero [data-hero].is-on{transform:none;}
/* 1文字ずつ：親は即座に表示し、文字だけ遅延で出す */
.js-on .hero [data-hero="kick"],.js-on .hero [data-hero="h1"],.js-on .hero [data-hero="lead"]{transition:none;}
.js-on .hero .ch{opacity:0;transition:opacity .45s ease;}
.js-on .hero [data-hero].is-on .ch{opacity:1;}

/* 1文字ずつ分割しても社名行の字間が開かないように */
.hero .kick{gap:0;}
.hero .kick .mark{margin-right:.6em;}

/* ============================================================
   アニメーションの緩急
   --ease-io  : 入りゆっくり → 中盤速く → 終わりゆっくり
   --ease-back: 少し行き過ぎて戻る（数字やロゴのポップ）
   ============================================================ */
:root{--ease-io:cubic-bezier(.76,0,.24,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--ease-soft:cubic-bezier(.22,1,.36,1);}

/* --- ローディングの退場：マークが縮んで消え、幕が上へ抜ける --- */
.loader{transition:clip-path .85s var(--ease-io);clip-path:inset(0 0 0 0);}
.loader.is-done{transform:none;opacity:1;clip-path:inset(0 0 100% 0);}
.loader .ld,.loader .ld-bar,.loader .ld-txt{transition:transform .45s var(--ease-io),opacity .35s ease;}
.loader.is-done .ld{transform:scale(.6);opacity:0;}
.loader.is-done .ld-bar,.loader.is-done .ld-txt{opacity:0;transform:translateY(6px);}

/* --- 格子：最初から全面グレーで表示（白への切替は ids.js） --- */
.js-on .hero .tiles{opacity:1;transition:none;}

/* --- 文字：下から起き上がりつつ、ぼかしが解けて像を結ぶ --- */
.js-on .hero .ch{
  display:inline-block;white-space:pre;
  opacity:0;transform:translateY(.55em) rotateX(55deg);filter:blur(6px);transform-origin:50% 100%;
  transition:opacity .55s var(--ease-io),transform .8s var(--ease-io),filter .6s var(--ease-io);
}
.js-on .hero [data-hero].is-on .ch{opacity:1;transform:none;filter:blur(0);}
.js-on .hero h1{perspective:600px;}

/* --- 30周年ロゴ：弧を描き、数字が少し行き過ぎて収まる --- */
.js-on .hero [data-hero="logo"]{transform:none;transition:opacity .3s ease;}
.js-on .anniv .arc{stroke-dasharray:740;stroke-dashoffset:740;transition:stroke-dashoffset 1.5s var(--ease-io) .1s;}
.js-on .anniv .p0{transform-origin:110px 301px;transform:scale(0);transition:transform .5s var(--ease-back) .05s;}
.js-on .anniv .p1{transform-origin:250px 301px;transform:scale(0);transition:transform .6s var(--ease-back) 1.45s;}
.js-on .anniv .big{transform-origin:180px 180px;transform:scale(.55);opacity:0;transition:transform .9s var(--ease-back) .7s,opacity .4s ease .7s;}
.js-on .anniv .th{transform-origin:266px 110px;transform:scale(0);opacity:0;transition:transform .5s var(--ease-back) 1.35s,opacity .3s ease 1.35s;}
.js-on .anniv .yr{opacity:0;transform:translateY(8px);transition:opacity .5s ease 1.2s,transform .6s var(--ease-io) 1.2s;}
.js-on .hero [data-hero="logo"].is-on .arc{stroke-dashoffset:0;}
.js-on .hero [data-hero="logo"].is-on .p0,.js-on .hero [data-hero="logo"].is-on .p1,.js-on .hero [data-hero="logo"].is-on .th{transform:scale(1);opacity:1;}
.js-on .hero [data-hero="logo"].is-on .big{transform:scale(1);opacity:1;}
.js-on .hero [data-hero="logo"].is-on .yr{opacity:1;transform:none;}
.js-on .hero .anniv-cap{opacity:0;transition:opacity .6s ease 1.7s;}
.js-on .hero [data-hero="logo"].is-on .anniv-cap{opacity:1;}
.js-on .hero [data-hero="actions"],.js-on .hero [data-hero="badges"]{transform:translateY(24px);transition:opacity .7s var(--ease-io),transform .9s var(--ease-io);}

/* --- スクロール表示：緩急のある立ち上がり＋見出しはマスクで下から --- */
.js-on .reveal,.js-on [data-stagger]>*{transform:translateY(44px);}
.js-on .reveal.is-in,.js-on [data-stagger]>.is-in,.js-on [data-stagger].is-in>*{
  transition:opacity .9s var(--ease-io),transform 1s var(--ease-io),clip-path 1s var(--ease-io);
}
.js-on .reveal[data-from="left"]{transform:translateX(-64px);}
.js-on .reveal[data-from="right"]{transform:translateX(64px);}
/* 見出しは行の下から起き上がる */
.js-on .reveal h1,.js-on .reveal h2,.js-on .reveal.quote{clip-path:inset(0 0 100% 0);transform:translateY(.4em);transition:clip-path .9s var(--ease-io) .1s,transform .9s var(--ease-io) .1s;}
.js-on .reveal.is-in h1,.js-on .reveal.is-in h2,.js-on .reveal.quote.is-in{clip-path:inset(0 0 -10% 0);transform:none;}
/* 写真は左からワイプしつつ、わずかにズームが収まる */
.js-on figure.reveal img,.js-on .rc-photo img{clip-path:inset(0 100% 0 0);transform:scale(1.1);transition:clip-path 1.1s var(--ease-io),transform 1.4s var(--ease-soft);}
.js-on figure.reveal.is-in img,.js-on .rc-photo.is-in img{clip-path:inset(0 0 0 0);transform:scale(1);}
.js-on figure.reveal{transform:none;}
.js-on figure.reveal[data-from]{transform:none;}
/* 矢羽根のステップは流れの向きに合わせて左から */
.js-on .steps>*{transform:translateX(-40px);}
.js-on .steps .scard:first-of-type::before{transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform .5s var(--ease-io) .5s;}
.js-on .steps.is-in .scard:first-of-type::before{transform:translateX(-50%) scaleY(1);}
/* ニュース行は左から差し込む */
.js-on .news-list>*,.js-on .news>*{transform:translateX(-28px);}
/* 実績数値は少し弾んで止まる */
.js-on .proof-grid>.is-in{transition:opacity .6s var(--ease-io),transform .9s var(--ease-back);}
/* 取引先ロゴは波で */
.js-on .client-grid.reveal{opacity:1;transform:none;}
.js-on .client-grid.reveal>li{opacity:0;transform:scale(.8);transition:opacity .6s var(--ease-io),transform .7s var(--ease-back);}
.js-on .client-grid.reveal.is-in>li{opacity:1;transform:none;}
.js-on .client-grid.reveal.is-in>li:nth-child(n){transition-delay:calc(var(--i,0) * 45ms);}
@media (prefers-reduced-motion:reduce){
  .js-on .hero .tiles .tile,.js-on .hero .ch,.js-on .anniv *,.js-on .client-grid.reveal>li{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;stroke-dashoffset:0!important;}
}

/* 待機中の要素が横方向にはみ出さないように（clip はスクロール領域を作らない） */
main{overflow-x:clip;}

/* ===== IA 準拠版で追加した部品 ===== */
.svc-grid.svc-5{grid-template-columns:repeat(5,1fr);}
.is-hide{display:none!important;}
.tabs a{cursor:pointer;}
.brand-strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
@media (max-width:1100px){.svc-grid.svc-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.svc-grid.svc-5,.brand-strip{grid-template-columns:1fr;}}
.prof dd a{color:var(--red);text-decoration:underline;}
.g1{display:grid;grid-template-columns:1fr;gap:var(--s3);}

/* ===== クレド：01 主体性 … の一覧＋オンマウスで本文をゆっくり表示 ===== */
.credo-intro-h{font-size:28px;font-weight:900;letter-spacing:.02em;}
.credo-intro p{margin-top:var(--s2);}
.credo-intro p:first-child{margin-top:0;}
.credo{margin-top:var(--s5);}
.credo-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1);list-style:none;margin:0;padding:0;}
.credo-tab{
  display:flex;align-items:baseline;gap:.6em;padding:var(--s2) var(--s3);background:#fff;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;position:relative;transition:color .5s var(--ease-io),background .5s var(--ease-io);
}
.credo-tab .cn{font-family:var(--en);font-weight:800;font-size:20px;line-height:1;color:var(--gray);transition:color .5s var(--ease-io);}
.credo-tab .ct{font-size:16px;font-weight:900;}
.credo-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.credo-tab.is-on .cn{color:var(--yellow);}
.credo-tab:hover:not(.is-on) .cn{color:var(--red);}
.credo-stage{display:grid;margin-top:var(--s3);}
.credo-panel{
  grid-area:1/1;position:relative;background:#fff;border:1px solid var(--line);padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 89px + var(--s3));
  opacity:0;visibility:hidden;transform:translateY(13px);
  transition:opacity .35s var(--ease-io),transform .35s var(--ease-io),visibility 0s .35s;
}
.credo-panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 1.1s var(--ease-io) .1s,transform 1.1s var(--ease-io) .1s,visibility 0s 0s;}
.credo-panel>*{opacity:0;transform:translateY(21px);transition:opacity .3s var(--ease-io),transform .3s var(--ease-io);}
.credo-panel.is-on>*{opacity:1;transform:none;transition:opacity 1.2s var(--ease-io),transform 1.2s var(--ease-io);}
.credo-panel.is-on>.credo-no{transition-delay:.15s;}
.credo-panel.is-on>h3{transition-delay:.35s;}
.credo-panel.is-on>.credo-txt{transition-delay:.6s;}
.credo-panel.is-on>.credo-desc{transition-delay:.95s;}
.credo-no{position:absolute;left:var(--s5);top:var(--s5);font-family:var(--en);font-weight:800;font-size:72px;line-height:.9;letter-spacing:-.04em;color:var(--red);}
.credo-no::after{content:'';display:block;width:34px;height:3px;background:var(--yellow);margin-top:13px;}
.credo-panel h3{font-size:34px;font-weight:900;letter-spacing:.02em;line-height:1.2;}
.credo-txt{margin-top:var(--s3);font-size:21px;font-weight:900;line-height:1.75;letter-spacing:.01em;}
.credo-desc{margin-top:var(--s3);font-size:15px;line-height:2;color:#3a3e45;max-width:46em;}
/* 表示時に赤線が外周をゆっくり一周（右回り：上→右→下→左） */
.credo-panel::before,.credo-panel::after{content:'';position:absolute;width:0;height:0;pointer-events:none;z-index:2;transition:none;}
.credo-panel::before{top:-1px;left:-1px;border-top:1px solid var(--red);border-right:1px solid var(--red);}
.credo-panel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--red);border-left:1px solid var(--red);}
.credo-panel.is-on::before{width:calc(100% + 2px);height:calc(100% + 2px);transition:width .55s var(--ease-io) .2s,height .55s var(--ease-io) .75s;}
.credo-panel.is-on::after{width:calc(100% + 2px);height:calc(100% + 2px);transition:width .55s var(--ease-io) 1.3s,height .55s var(--ease-io) 1.85s;}
@media (max-width:1100px){.credo-nav{grid-template-columns:repeat(3,1fr);}.credo-panel{padding:var(--s4);}.credo-no{position:static;font-size:48px;}.credo-no::after{margin-bottom:var(--s2);}}
@media (max-width:720px){.credo-nav{grid-template-columns:repeat(2,1fr);}.credo-tab{padding:var(--s2);}.credo-panel h3{font-size:26px;}.credo-txt{font-size:17px;}}

/* ===== 役員紹介：写真＋経歴を左右交互に ===== */
.officers{display:flex;flex-direction:column;gap:var(--s6);margin-top:var(--s2);}
.officer{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center;}
.officer:nth-child(even){grid-template-columns:1.618fr 1fr;}
.officer:nth-child(even) .officer-photo{order:2;}
.officer-photo{position:relative;margin:0 0 13px 13px;}
.officer:nth-child(even) .officer-photo{margin:0 13px 13px 0;}
.officer-photo::before{content:'';position:absolute;left:-13px;bottom:-13px;width:55%;height:55%;background:var(--yellow);z-index:0;}
.officer:nth-child(even) .officer-photo::before{left:auto;right:-13px;}
.officer-photo::after{content:'';position:absolute;right:-13px;top:-13px;width:34px;height:34px;border-radius:50%;border:4px solid var(--red);z-index:2;}
.officer:nth-child(even) .officer-photo::after{right:auto;left:-13px;}
.officer-photo img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:7/5;object-fit:cover;filter:grayscale(.15);transition:filter 1s var(--ease-io);}
.officer:hover .officer-photo img{filter:none;}
.officer-body h3{margin-top:8px;display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;}
.officer-body h3 .ja{font-size:34px;font-weight:900;letter-spacing:.04em;line-height:1.2;}
.officer-body h3 .en{font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--gray);}
.officer-body .born{margin-top:6px;font-size:13.5px;font-weight:700;color:var(--gold);}
.officer-body p:not(.born){margin-top:var(--s2);font-size:14.5px;line-height:1.95;color:#3a3e45;}
@media (max-width:900px){.officer{grid-template-columns:1fr;gap:var(--s4);}.officer:nth-child(even) .officer-photo{order:0;}.officer-body h3 .ja{font-size:28px;}}

/* ===== アクセス：Google マップ埋め込み ===== */
.access .map{border:1px solid var(--line);border-radius:0;background:var(--band);min-height:400px;display:block;padding:0;}
.access .map iframe{display:block;width:100%;height:100%;min-height:400px;border:0;filter:grayscale(.25);transition:filter .8s var(--ease-io);}
.access .map:hover iframe{filter:none;}
@media (max-width:720px){.access .map,.access .map iframe{min-height:280px;}}

/* ============================================================
   ヘッダー v2：1行ナビ＋下線スイープ＋メガメニュー＋モバイルドロワー
   高さ 89px → スクロール後 55px（フィボナッチ）
   ============================================================ */
header#hd{background:rgba(255,255,255,.96);}
#hd .nav{min-height:89px;padding:0 var(--pad);gap:var(--s5);transition:min-height .5s var(--ease-io);}
#hd.is-scrolled .nav{min-height:55px;}
#hd .logo-img{height:44px;transition:height .5s var(--ease-io);}
#hd.is-scrolled .logo-img{height:30px;}
#hd .brand{display:flex;align-items:center;flex:none;}
#hd .nav-links{display:flex;gap:0;margin-right:auto;align-self:stretch;}
#hd .ni{display:flex;align-items:stretch;}
#hd .ni>a{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 17px;line-height:1.1;position:relative;color:var(--ink);font-size:14.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;transition:color .4s var(--ease-io);}
#hd .ni>a small{font-family:var(--en);font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--gray);margin-top:5px;opacity:.85;transition:color .4s var(--ease-io),opacity .5s var(--ease-io),margin .5s var(--ease-io),max-height .5s var(--ease-io);max-height:12px;overflow:hidden;}
#hd.is-scrolled .ni>a small{opacity:0;max-height:0;margin-top:0;}
#hd .ni>a::after{content:'';position:absolute;left:17px;right:17px;bottom:18px;height:2px;background:linear-gradient(90deg,var(--yellow),var(--red));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-io);}
#hd.is-scrolled .ni>a::after{bottom:12px;}
#hd .ni:hover>a::after,#hd .ni:focus-within>a::after{transform:scaleX(1);}
#hd .ni>a.on{color:var(--red);}
#hd .ni>a.on::after{transform:scaleX(1);background:var(--red);}
#hd .ni>a.on small{color:var(--red);}
#hd .nav-cta{display:flex;align-items:center;gap:var(--s3);}
#hd .hd-dl{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink);position:relative;padding:4px 0;}
#hd .hd-dl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-io);}
#hd .hd-dl:hover::after{transform:scaleX(1);}
#hd .hd-contact{border-radius:0;padding:.7em 1.3em;}
/* メガメニュー */
#hd .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 21px 34px -21px rgba(35,38,43,.25);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .45s var(--ease-io),transform .45s var(--ease-io),visibility 0s .45s;z-index:90;}
#hd .ni.has-mega:hover .mega,#hd .ni.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease-io) .08s,transform .45s var(--ease-io) .08s,visibility 0s 0s;}
#hd .mega-in{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:var(--s5);padding-top:var(--s4);padding-bottom:var(--s4);}
#hd .mega-col h6{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:var(--s2);display:flex;align-items:center;gap:8px;}
#hd .mega-col h6 .bg{font-family:var(--en);font-size:9.5px;letter-spacing:.12em;padding:2px 8px;color:#fff;background:var(--ink);}
#hd .mega-col h6 .bg.applied{background:var(--red);}
#hd .mega-col>a{display:block;font-size:14px;font-weight:500;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink);position:relative;transition:padding-left .4s var(--ease-io),color .4s var(--ease-io);}
#hd .mega-col>a:hover{padding-left:8px;color:var(--red);}
#hd .mega-col>a small{display:block;font-size:11.5px;color:var(--gray);font-weight:400;margin-top:2px;}
#hd .mega-side{border-left:1px solid var(--line);padding-left:var(--s4);}
#hd .mega-side .mega-all{border:0;font-weight:700;color:var(--red);margin-top:var(--s2);}
#hd .mega-lead{font-size:19px;font-weight:900;line-height:1.5;margin-bottom:var(--s2);}
/* バーガー＆ドロワー */
#hd .hd-burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;padding:0;}
#hd .hd-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .5s var(--ease-io),opacity .3s,top .5s var(--ease-io);}
#hd .hd-burger span:nth-child(1){top:14px;}#hd .hd-burger span:nth-child(2){top:21px;}#hd .hd-burger span:nth-child(3){top:28px;}
#hd.is-open .hd-burger span:nth-child(1){top:21px;transform:rotate(45deg);background:var(--red);}
#hd.is-open .hd-burger span:nth-child(2){opacity:0;}
#hd.is-open .hd-burger span:nth-child(3){top:21px;transform:rotate(-45deg);background:var(--red);}
#hd .mnav{position:fixed;left:0;right:0;top:0;bottom:0;background:var(--ink);color:#fff;z-index:-1;padding:calc(89px + var(--s4)) var(--pad) var(--s5);overflow:auto;opacity:0;transform:translateY(-13px);transition:opacity .5s var(--ease-io),transform .5s var(--ease-io);}
#hd .mnav[hidden]{display:none;}
#hd.is-open .mnav{opacity:1;transform:none;}
#hd .mnav-list{list-style:none;margin:0;padding:0;}
#hd .mnav-list li{border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateX(-21px);transition:opacity .7s var(--ease-io),transform .7s var(--ease-io);}
#hd.is-open .mnav-list li{opacity:1;transform:none;}
#hd .mnav-list a{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) 0;color:#fff;font-size:22px;font-weight:900;}
#hd .mnav-list a small{font-family:var(--en);font-size:10px;letter-spacing:.14em;color:var(--yellow);}
#hd .mnav-list a.on{color:var(--yellow);}
#hd .mnav-sub{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);font-size:13px;}
#hd .mnav-sub a{color:rgba(255,255,255,.8);}
#hd .mnav-cta{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s2);margin-top:var(--s4);}
#hd .mnav-cta .btn{justify-content:center;width:100%;}
#hd .mnav-tel{margin-top:var(--s3);font-size:13px;color:rgba(255,255,255,.7);}
#hd .mnav-tel a{color:#fff;font-family:var(--en);font-weight:700;font-size:16px;}
@media (max-width:1180px){#hd .ni>a{padding:0 12px;font-size:13.5px;}#hd .ni>a::after{left:12px;right:12px;}}
@media (max-width:980px){
  #hd .nav-links{display:none;}
  #hd .hd-dl{display:none;}
  #hd .hd-burger{display:block;}
  #hd .nav{min-height:68px;gap:var(--s3);}
  #hd.is-scrolled .nav{min-height:55px;}
  #hd .mnav{padding-top:calc(68px + var(--s4));}
  body.is-menu-open{overflow:hidden;}
}
@media (max-width:640px){#hd .hd-contact{display:none;}}

/* ============================================================
   アイコン（自作 SVG スプライト）と画像の置き場
   ============================================================ */
.ico{width:44px;height:44px;display:block;flex:none;}
.ico-sm{width:28px;height:28px;}
.ico-xs{width:18px;height:18px;}
.stp .ico{margin-bottom:var(--s2);transition:transform .6s var(--ease-io);}
.stp:hover .ico{transform:translateY(-3px);}
.scard .ico{width:34px;height:34px;margin-bottom:8px;}
.pillar .ico{margin:0 auto var(--s2);}
.c .ico{margin-bottom:var(--s2);}
.rel-ico a{display:flex;align-items:center;gap:var(--s2);}
.rel-ico a .ico{margin:0;}
.rel-ico a span{margin-left:auto;}
.cs-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);counter-reset:cs;}
.cs-flow li{position:relative;background:#fff;border:1px solid var(--line);padding:var(--s3);}
.cs-flow li::before{counter-increment:cs;content:counter(cs,decimal-leading-zero);position:absolute;top:var(--s2);left:var(--s2);font-family:var(--en);font-weight:800;font-size:22px;color:var(--red);line-height:1;}
.cs-flow figure{margin:var(--s3) 0 var(--s2);}
.cs-flow img{display:block;width:100%;height:auto;}
.cs-flow .d{display:block;font-size:14.5px;font-weight:900;line-height:1.5;}
.cs-flow p{font-size:12.5px;color:#52565c;margin-top:6px;line-height:1.8;}
.voice-banner{margin:0 0 var(--s4);background:#fff;border:1px solid var(--line);padding:var(--s3) var(--s4);display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s4);align-items:center;}
.voice-banner img{display:block;width:100%;height:auto;}
.voice-banner figcaption{font-size:20px;font-weight:900;line-height:1.6;}
@media (max-width:1100px){.cs-flow{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.cs-flow{grid-template-columns:1fr 1fr;}.voice-banner{grid-template-columns:1fr;}}

/* data-from 付きの reveal が表示後に戻らない不具合の修正（詳細度の順序） */
.js-on .reveal.is-in[data-from="left"],.js-on .reveal.is-in[data-from="right"]{transform:none;}
.js-on .steps.is-in>*,.js-on .news-list.is-in>*,.js-on .news.is-in>*{transform:none;}

/* ============================================================
   トップ：クレド10（アイコン＋名称のみ、企業理念ページの該当項目へ）
   ============================================================ */
.credo10{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:1100px;margin:var(--s4) auto 0;}
.cr{position:relative;display:block;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:13px 13px 11px;color:var(--ink);text-decoration:none;}
.cr .ico{width:34px;height:34px;margin:0 0 10px;transition:transform .6s var(--ease-io);}
.cr-b{display:flex;align-items:baseline;gap:8px;}
.cr:hover .ico{transform:translateY(-3px);}
.cr .cn{font-family:var(--en);font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gray);line-height:1;transition:color .4s var(--ease-io);}
.cr b{font-size:15px;font-weight:900;line-height:1.3;white-space:nowrap;}
.cr .go{margin-left:auto;font-family:var(--en);font-weight:700;font-size:15px;line-height:1;color:var(--gray);opacity:.45;transform:translateX(-10px);transition:transform .55s var(--ease-io),opacity .45s var(--ease-io),color .45s var(--ease-io);}
.cr:hover .go{transform:none;opacity:1;color:var(--red);}
.cr:hover .cn{color:var(--red);}
/* 赤線が外周をなぞる（::before 上→右、::after 下→左） */
.cr::before,.cr::after,.voice-card::before,.scard::before{content:'';position:absolute;width:0;height:0;pointer-events:none;z-index:2;transition:width .2s var(--ease-sweep) .2s,height .2s var(--ease-sweep) 0s;}
.cr::before,.voice-card::before,.scard::before{top:-1px;left:-1px;border-top:1px solid var(--red);border-right:1px solid var(--red);font-size:0;opacity:1;background:none;transform:none;}
.cr::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--red);border-left:1px solid var(--red);}
.cr:hover::before,.voice-card:hover::before,.scard:hover::before{width:calc(100% + 2px);height:calc(100% + 2px);transition:width .2s var(--ease-sweep) 0s,height .2s var(--ease-sweep) .2s;}
.cr:hover::after{width:calc(100% + 2px);height:calc(100% + 2px);transition:width .2s var(--ease-sweep) .4s,height .2s var(--ease-sweep) .6s;}
/* お客様の声の引用符は blockquote 側に移す */
.voice-card blockquote{position:relative;}
.voice-card blockquote::before{content:'“';position:absolute;top:-22px;left:-2px;font-family:var(--en);font-size:56px;font-weight:800;color:var(--red);opacity:.18;line-height:1;pointer-events:none;}
/* 矢羽根→カードの縦線は専用要素に */
.step .scard:first-of-type{margin-top:0;}
.step .drop{display:block;width:2px;height:22px;background:var(--red);margin:0 auto;transform-origin:top;}
.js-on .steps .drop{transform:scaleY(0);transition:transform .5s var(--ease-io) .5s;}
.js-on .steps.is-in .drop{transform:scaleY(1);}
.js-on .steps .scard:first-of-type::before{transform:none;transition:width .2s var(--ease-sweep) .2s,height .2s var(--ease-sweep) 0s;}
.js-on .steps.is-in .scard:first-of-type::before{transform:none;}
.js-on .steps .scard:first-of-type:hover::before{transition:width .2s var(--ease-sweep) 0s,height .2s var(--ease-sweep) .2s;}
/* 採用：左＝旧採用サイト ABOUT IDS のコラージュ（back00.png）、右＝本文 */
.rc-2{grid-template-columns:1fr 1.3fr;}
.rc-art{margin:0;position:relative;background:var(--band);overflow:hidden;min-height:360px;}
.rc-art img{position:absolute;right:0;top:50%;height:90%;width:auto;max-width:none;transform:translateY(-50%);}
.js-on figure.rc-art.reveal img{transform:translateY(-50%) scale(1.1);}
.js-on figure.rc-art.reveal.is-in img{transform:translateY(-50%) scale(1);}
.rc-body{background:none;}
@media (max-width:1100px){.credo10{grid-template-columns:repeat(4,1fr);}}
@media (max-width:720px){.credo10{grid-template-columns:1fr 1fr;}.rc-art{min-height:260px;}.rc-art img{height:70%;right:8px;}}
/* 旧 connector ルール（詳細度が高い）を確実に上書き */
.steps .step .scard::before{left:-1px;top:-1px;width:0;height:0;background:none;border:0;border-top:1px solid var(--red);border-right:1px solid var(--red);transform:none;z-index:2;transition:width .2s var(--ease-sweep) .2s,height .2s var(--ease-sweep) 0s;}
.steps .step .scard:hover::before{width:calc(100% + 2px);height:calc(100% + 2px);transition:width .2s var(--ease-sweep) 0s,height .2s var(--ease-sweep) .2s;}

/* ⑤ スクロール後のヘッダーは少し透ける */
#hd.is-scrolled{background:rgba(255,255,255,.4);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);}
/* ⑥ キャッチの黄色帯は文字が出きってから左→右へ */
.js-on .hero h1 .hl{background-repeat:no-repeat;background-size:0% 100%;transition:background-size .9s var(--ease-io);}
.js-on .hero h1 .hl.is-on{background-size:100% 100%;}

/* ② APPLIED：カードの底辺を揃える（文字量差で段差が出ないように） */
.steps{align-items:stretch;}
.step{display:flex;flex-direction:column;}
.step .scard{flex:1 0 auto;}
.step .scard span{font-size:11.5px;letter-spacing:-.01em;}

/* ============================================================
   サービス詳細ページの図版（自作 SVG）
   ============================================================ */
.dgm{margin:0;}
.dgm svg{display:block;width:100%;height:auto;overflow:visible;}
.dgm text{font-family:var(--jp);fill:var(--ink);}
.dgm .t1{font-size:19px;font-weight:900;}
.dgm .t2{font-size:14px;fill:#52565c;}
.dgm .n{font-family:var(--en);font-size:12px;font-weight:800;letter-spacing:.12em;fill:var(--gray);}
.dgm .v{font-family:var(--en);font-size:19px;font-weight:800;fill:var(--ink);}
.dgm figcaption{margin-top:var(--s3);font-size:14.5px;color:#52565c;line-height:1.9;max-width:52em;}
.js-on .dgm.reveal svg{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease-io);}
.js-on .dgm.reveal.is-in svg{clip-path:inset(0 0 0 0);}
@media (max-width:820px){
  .dgm{overflow-x:auto;}
  .dgm svg{min-width:720px;}
}

/* 階段図：1段ずつ左→右にワイプ、矢印が出たら次の段へ（--i は段の番号） */
.dgm.stair{--wipe:.55s;--arrow:.25s;--beat:.8s;}
.dgm.stair .cover{display:none;fill:var(--paper);}
.js-on .dgm.stair svg{clip-path:none;}
.js-on .dgm.stair .cover{display:block;transform-box:fill-box;transform-origin:right center;transform:scaleX(1);}
.js-on .dgm.stair.is-in .cover{transform:scaleX(0);transition:transform var(--wipe) var(--ease-io);transition-delay:calc(var(--i) * var(--beat));}
.js-on .dgm.stair .riser{opacity:0;}
.js-on .dgm.stair.is-in .riser{opacity:1;transition:opacity var(--arrow) var(--ease-io);transition-delay:calc(var(--i) * var(--beat) - var(--arrow));}
@media (prefers-reduced-motion:reduce){.dgm.stair .cover{display:none!important;}.dgm.stair .riser{opacity:1!important;}}

/* ============================================================
   記事ページ（ナレッジ／ニュース・イベント）
   ============================================================ */
.art-hero{padding-bottom:var(--s4);}
.art-hero h1{max-width:22em;}
.art-hero .lead{max-width:40em;}
.art-meta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);}
.art-meta div{display:flex;align-items:baseline;gap:10px;}
.art-meta dt{font-family:var(--en);font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--gray);}
.art-meta dd{font-size:14px;font-weight:700;}
.art-meta dd a{color:var(--red);}
.article{max-width:40em;}
.article .lead{font-size:19px;font-weight:700;line-height:2;}
.article p{margin-top:var(--s3);font-size:15.5px;line-height:2.1;color:#3a3e45;}
.article h2{margin-top:var(--s5);font-size:24px;font-weight:900;line-height:1.5;padding-left:var(--s3);border-left:4px solid var(--red);}
.article h3{margin-top:var(--s4);font-size:18px;font-weight:900;}
.article ul{margin-top:var(--s3);}
.article .ck li{font-size:15px;}
.article strong{font-weight:900;}
@media (max-width:720px){.article h2{font-size:20px;}}

/* 記事の図版・サムネイル・出典 */
.art-fig{margin:0 0 var(--s4);max-width:900px;}
.art-fig img{display:block;width:100%;height:auto;}
.col-card .thumb{display:block;margin:calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3);overflow:hidden;}
.col-card .thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--ease-io);}
.col-card:hover .thumb img{transform:scale(1.04);}
.col-card h3{font-size:16px;line-height:1.6;}
.src-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;color:var(--gray);}
.src-note a{color:var(--red);}
.article .tbl{overflow-x:auto;margin-top:var(--s3);}
.article table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
.article th,.article td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;}
.article th{background:var(--band);font-weight:700;white-space:nowrap;}
.article small{font-size:12.5px;color:var(--gray);}
a.voice-card{color:inherit;text-decoration:none;}
a.voice-card:hover .voice-meta b{color:var(--red);}

/* ============================================================
   ナレッジ記事（コラムデザイン案に準拠：目次・結論・FAQ・執筆者・サイドバー）
   ============================================================ */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13.5px;}
.byline .author-name{font-weight:900;}
.byline .meta-pair{display:flex;align-items:baseline;gap:8px;color:#52565c;}
.byline .lbl{font-family:var(--en);font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--gray);}
.eyecatch{max-width:none;}
.eye{display:block;width:100%;height:auto;border:1px solid var(--line);}
.eye-cat{font-family:var(--jp);font-size:34px;font-weight:900;fill:var(--ink);}
.eye-no{font-family:var(--en);font-size:96px;font-weight:800;fill:#E50012;opacity:.14;}
.col-card .thumb .eye{border:0;}
.col-layout{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:start;margin-top:var(--s4);}
.col-layout .article{max-width:none;}
.toc{background:var(--band);padding:var(--s3);margin-bottom:var(--s4);}
.toc summary{font-size:14px;font-weight:900;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::after{content:'▾';color:var(--gray);font-size:12px;}
.toc[open] summary::after{content:'▴';}
.toc ol{margin:var(--s2) 0 0;padding-left:1.3em;}
.toc li{margin-bottom:6px;line-height:1.7;}
.toc a{font-size:13.5px;color:var(--ink-soft);}
.toc a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.article .conclusion{background:var(--yellow-pale);border-left:4px solid var(--yellow);padding:var(--s3);font-weight:700;color:var(--ink);}
.article .conclusion strong{font-weight:900;}
.faq{padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.faq:first-of-type{border-top:1px solid var(--line);}
.faq h3{margin-top:0;font-size:16px;}
.faq p{margin-top:6px;color:#52565c;font-size:14.5px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5);}
.tags span{font-size:12px;font-weight:700;padding:5px 12px;background:var(--band);color:var(--ink-soft);}
.back-row{margin-top:var(--s4);}
.btn-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);}
.btn-back .arr{color:var(--red);transition:transform .5s var(--ease-io);display:inline-block;}
.btn-back:hover .arr{transform:translateX(-5px);}
.editor{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.editor .ed-label{font-family:var(--en);font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--gray);}
.editor .ed-name{margin-top:10px;font-size:17px;font-weight:900;}
.editor .ed-bio{margin-top:8px;font-size:14px;line-height:1.95;color:#52565c;}
.editor .ed-co{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--gray);}
.col-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:var(--s3);}
.side-block{border:1px solid var(--line);padding:var(--s3);background:#fff;}
.side-cta{background:var(--ink);color:#fff;border-color:var(--ink);}
.side-cta .sb-kicker{font-family:var(--en);font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--yellow);}
.side-cta .sb-head{margin-top:10px;font-size:18px;font-weight:900;line-height:1.55;}
.side-cta .sb-text{margin-top:8px;font-size:13px;color:rgba(255,255,255,.75);line-height:1.8;}
.side-cta .sb-link{display:block;margin-top:var(--s2);font-size:14px;font-weight:700;color:#fff;}
.side-cta .sb-link.ghost{color:var(--yellow);}
.side-cta .sb-link:hover{text-decoration:underline;text-underline-offset:4px;}
.side-block .sb-title{font-size:14px;font-weight:900;}
.side-block .rel-cat{margin-top:4px;font-size:11.5px;color:var(--gray);}
.rel-list{margin-top:var(--s2);}
.rel-item{display:block;padding:11px 0;border-top:1px solid var(--line);}
.rel-item .rel-date{display:block;font-family:var(--en);font-size:11px;font-weight:700;color:var(--gray);}
.rel-item .rel-title{display:block;margin-top:3px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink);}
.rel-item:hover .rel-title{color:var(--red);}
@media (max-width:980px){
  .col-layout{grid-template-columns:1fr;}
  .col-side{position:static;}
}

/* 記事の図版・サムネイル・出典 */
.art-fig{margin:0 0 var(--s4);max-width:900px;}
.art-fig img{display:block;width:100%;height:auto;}
.col-card .thumb{display:block;margin:calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3);overflow:hidden;}
.col-card .thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--ease-io);}
.col-card:hover .thumb img{transform:scale(1.04);}
.col-card h3{font-size:16px;line-height:1.6;}
.src-note{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;color:var(--gray);}
.src-note a{color:var(--red);}
.article .tbl{overflow-x:auto;margin-top:var(--s3);}
.article table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px;}
.article th,.article td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top;}
.article th{background:var(--band);font-weight:700;white-space:nowrap;}
.article small{font-size:12.5px;color:var(--gray);}
a.voice-card{color:inherit;text-decoration:none;}
a.voice-card:hover .voice-meta b{color:var(--red);}

/* ============================================================
   ナレッジ記事（コラムデザイン案に準拠：目次・結論・FAQ・執筆者・サイドバー）
   ============================================================ */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13.5px;}
.byline .author-name{font-weight:900;}
.byline .meta-pair{display:flex;align-items:baseline;gap:8px;color:#52565c;}
.byline .lbl{font-family:var(--en);font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--gray);}
.eyecatch{max-width:none;}
.eye{display:block;width:100%;height:auto;border:1px solid var(--line);}
.eye-cat{font-family:var(--jp);font-size:34px;font-weight:900;fill:var(--ink);}
.eye-no{font-family:var(--en);font-size:96px;font-weight:800;fill:#E50012;opacity:.14;}
.col-card .thumb .eye{border:0;}
.col-layout{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:start;margin-top:var(--s4);}
.col-layout .article{max-width:none;}
.toc{background:var(--band);padding:var(--s3);margin-bottom:var(--s4);}
.toc summary{font-size:14px;font-weight:900;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::after{content:'▾';color:var(--gray);font-size:12px;}
.toc[open] summary::after{content:'▴';}
.toc ol{margin:var(--s2) 0 0;padding-left:1.3em;}
.toc li{margin-bottom:6px;line-height:1.7;}
.toc a{font-size:13.5px;color:var(--ink-soft);}
.toc a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.article .conclusion{background:var(--yellow-pale);border-left:4px solid var(--yellow);padding:var(--s3);font-weight:700;color:var(--ink);}
.article .conclusion strong{font-weight:900;}
.faq{padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.faq:first-of-type{border-top:1px solid var(--line);}
.faq h3{margin-top:0;font-size:16px;}
.faq p{margin-top:6px;color:#52565c;font-size:14.5px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5);}
.tags span{font-size:12px;font-weight:700;padding:5px 12px;background:var(--band);color:var(--ink-soft);}
.back-row{margin-top:var(--s4);}
.btn-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);}
.btn-back .arr{color:var(--red);transition:transform .5s var(--ease-io);display:inline-block;}
.btn-back:hover .arr{transform:translateX(-5px);}
.editor{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);}
.editor .ed-label{font-family:var(--en);font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--gray);}
.editor .ed-name{margin-top:10px;font-size:17px;font-weight:900;}
.editor .ed-bio{margin-top:8px;font-size:14px;line-height:1.95;color:#52565c;}
.editor .ed-co{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--gray);}
.col-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:var(--s3);}
.side-block{border:1px solid var(--line);padding:var(--s3);background:#fff;}
.side-cta{background:var(--ink);color:#fff;border-color:var(--ink);}
.side-cta .sb-kicker{font-family:var(--en);font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--yellow);}
.side-cta .sb-head{margin-top:10px;font-size:18px;font-weight:900;line-height:1.55;}
.side-cta .sb-text{margin-top:8px;font-size:13px;color:rgba(255,255,255,.75);line-height:1.8;}
.side-cta .sb-link{display:block;margin-top:var(--s2);font-size:14px;font-weight:700;color:#fff;}
.side-cta .sb-link.ghost{color:var(--yellow);}
.side-cta .sb-link:hover{text-decoration:underline;text-underline-offset:4px;}
.side-block .sb-title{font-size:14px;font-weight:900;}
.side-block .rel-cat{margin-top:4px;font-size:11.5px;color:var(--gray);}
.rel-list{margin-top:var(--s2);}
.rel-item{display:block;padding:11px 0;border-top:1px solid var(--line);}
.rel-item .rel-date{display:block;font-family:var(--en);font-size:11px;font-weight:700;color:var(--gray);}
.rel-item .rel-title{display:block;margin-top:3px;font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink);}
.rel-item:hover .rel-title{color:var(--red);}
@media (max-width:980px){
  .col-layout{grid-template-columns:1fr;}
  .col-side{position:static;}
}

/* 実績数値のドラムロール */
.proof-num .dgt{display:inline-block;height:var(--face);overflow:hidden;vertical-align:baseline;line-height:1;}
.proof-num .reel{display:block;will-change:transform;}
.proof-num .reel span{display:block;height:var(--face);line-height:var(--face);font-variant-numeric:tabular-nums;}
.proof-num .sep{display:inline-block;}
/* 数字を大きく。単位は数字のベースライン（見える文字の下端）に合わせる */
.proof-num{--face:.78em;font-size:clamp(34px,3.4vw,50px);display:flex;align-items:baseline;gap:.12em;line-height:1;}
.proof-num .u{font-size:14px;line-height:1;align-self:baseline;margin-left:0;}
.proof-num .u .cnt{font-size:inherit;}

/* ===== 2026-10-20 事業・サービス メガメニュー（課題別4カテゴリ） ===== */
#hd .mega-in--svc{grid-template-columns:repeat(4,1fr);gap:var(--s4);}
#hd .mega-in--svc .mega-col h6 a{color:var(--ink);font-size:14px;font-weight:900;letter-spacing:.02em;transition:color .3s var(--ease-io);}
#hd .mega-in--svc .mega-col h6 a:hover{color:var(--red);}
#hd .mega-in--svc .mega-col h6 .bg{background:var(--red);}
#hd .mega-in--svc .mega-col>a.ext{font-weight:700;}
#hd .mega-in--svc .mega-foot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s2);display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);flex-wrap:wrap;text-align:right;}
#hd .mega-in--svc .mega-foot .mega-extra{margin-right:auto;display:flex;gap:var(--s3);flex-wrap:wrap;}
#hd .mega-in--svc .mega-foot .mega-extra a{font-size:14px;font-weight:700;}
#hd .mega-in--svc .mega-foot .mega-all{font-weight:700;color:var(--red);font-size:14px;}

/* ===== 2026-10-20 QA指摘の修正 ===== */
/* H-1: backdrop-filter があると #mnav(position:fixed)がヘッダー内に閉じ込められるため、メニューを開いている間は外す */
#hd.is-open,#hd.is-open.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;}
/* M-1: ナビを隠す幅でも、お問い合わせ・ハンバーガーを右端に寄せる */
#hd .nav-cta{margin-left:auto;}
/* M-5: 見出しで1〜2文字だけ次の行に送られるのを防ぐ */
h1,h2,h3,.stp-card h3{word-break:auto-phrase;text-wrap:balance;}

/* ===== 会社概要：グループ体制（左＝3社を縦に／右＝写真と認定ロゴ） ===== */
.group-2{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:var(--s4);align-items:stretch;}
.group-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2);}
.group-co{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--s3);align-content:center;}   /* 右の写真＋ロゴと下端を揃える */
.group-co--vn{border-left:3px solid var(--yellow);}
.group-tag{grid-row:1 / span 3;align-self:start;min-width:7.5em;text-align:center;padding:4px 10px;border-radius:999px;background:var(--band);font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.group-co.sol .group-tag{background:var(--pale,#FDECEE);color:var(--red);}
.group-co--vn .group-tag{background:var(--yellow-pale);}
.group-co h3{grid-column:2;}
.group-co .group-meta{grid-column:2;margin-top:2px;font-family:var(--en);font-size:12.5px;font-weight:600;color:var(--gray);}
.group-co p:not(.group-meta){grid-column:2;margin-top:6px;}
@media (max-width:980px){
  .group-2{grid-template-columns:1fr;}
  .group-2 .creds{max-width:520px;}
}
@media (max-width:640px){
  .group-co{grid-template-columns:1fr;}
  .group-tag{grid-row:auto;justify-self:start;min-width:0;margin-bottom:8px;}
  .group-co h3,.group-co .group-meta,.group-co p:not(.group-meta){grid-column:1;}
}

/* ===== 役員紹介：顧問は役員と別枠（区切り線で分ける） ===== */
.advisor{padding-top:0;}
.advisor>.wrap{border-top:1px solid var(--line);padding-top:var(--s6);}
@media (max-width:980px){.advisor>.wrap{padding-top:var(--s5);}}

/* ===== 文章7：写真3 の2カラム（採用ページ「Why service」など） ===== */
.gphi.gphi--73{grid-template-columns:minmax(0,7fr) minmax(0,3fr);}
.gphi.gphi--73 .lead{max-width:none;}   /* 文章は7割の列いっぱいに */
@media (max-width:980px){.gphi.gphi--73{grid-template-columns:1fr;}.gphi.gphi--73 figure{max-width:240px;}}

/* ===== 関連リンクのボタン（.rel）：スマホでは縦1列に ===== */
@media (max-width:640px){
  .rel{grid-template-columns:1fr;gap:var(--s1);}
  .rel a{padding:14px var(--s2);}
}

/* ===== フッター：リンクをグループ単位で見せる（見出し h5 ＋ リンク）。列の中に複数グループを縦に積む ===== */
.foot-col h5{font-size:12.5px;font-weight:900;letter-spacing:.06em;color:#fff;margin:0 0 var(--s2);padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-grp+.foot-grp{margin-top:var(--s4);}

/* ===== 方針・規約ページ（プライバシーポリシー／Cookieポリシー／情報セキュリティ基本方針） ===== */
.article.policy{max-width:52em;}
.policy h2{font-size:20px;}
.policy h3{font-size:16px;margin-top:var(--s3);}
.policy p{font-size:15px;line-height:2;}
.policy .policy-sign{text-align:right;}
.policy .tbl table{min-width:0;}
.policy .tbl table.policy-wide{min-width:760px;}               /* 5列の表はスマホで横スクロール */
.policy th{white-space:normal;}
.policy .tbl th:first-child,.policy .tbl td:first-child{width:46%;}
.policy .tbl table.policy-wide th:first-child,.policy .tbl table.policy-wide td:first-child{width:auto;}
.policy-dl{margin-top:var(--s2);}
.policy-dl dt{margin-top:var(--s2);font-weight:700;}
.policy-dl dd{margin:4px 0 0 1.2em;font-size:15px;line-height:1.9;color:#3a3e45;}
.policy-ul{list-style:none;margin-top:var(--s2);}
.policy-ul li{position:relative;padding-left:1.1em;margin-top:6px;font-size:15px;line-height:1.9;color:#3a3e45;}
.policy-ul li::before{content:'';position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--red);}
.policy-addr{margin-top:var(--s2);padding:var(--s3);background:var(--band);border-left:4px solid var(--red);}
.policy-addr p{margin-top:0;}
.policy-ol{list-style:none;counter-reset:pol;margin-top:var(--s3);}
.policy-ol>li{counter-increment:pol;position:relative;padding:var(--s3) 0 var(--s3) 3.2em;border-top:1px solid var(--line);}
.policy-ol>li:last-child{border-bottom:1px solid var(--line);}
.policy-ol>li::before{content:counter(pol,decimal-leading-zero);position:absolute;left:0;top:var(--s3);font-family:var(--en);font-size:22px;font-weight:800;color:var(--red);line-height:1.3;}
.policy-ol h2{margin-top:0;padding-left:0;border-left:0;font-size:18px;}
.policy-ol p{margin-top:8px;}