/* =========================================================
   KOYO証券株式会社 採用サイト ご提案デモ（デモ1ベース）
   ※ご提案用デモ。レイアウト・配色はデモ1を踏襲、文言のみKOYO証券向けに調整。
   - 配色: 白基調×チャコール（デモ1と同一）
   - 書体: 日本語 Noto Sans JP／英字 Satoshi（デモ1と同一）
   - 図形: 写真・カード・番号ノードは直角（角丸なし）。ボタンのみピル型
   - 写真: 日本人モデルのフリー素材（img/ にセルフホスト・イメージ画像）
   ========================================================= */
/* ---- Satoshi（セルフホスト・fontshare配布のwoff2） ---- */
@font-face{font-family:"Satoshi";src:url("../../fonts/Satoshi-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../../fonts/Satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../../fonts/Satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#1f3134;       /* 主色チャコール（実測） */
  --ink-d:#141f22;
  --gray:#6b7680;
  --line:#e7e7e7;
  --soft:#f6f6f6;
  --ghost:#f0efeb;
  --accent:#fe733d;    /* アクセント橙（最小限の使用） */
  --white:#fff;
  /* 旧変数の互換マッピング */
  --navy:#1f3134;
  --navy-2:#2b3c40;
  --blue:#1f3134;
  --orange:#fe733d;
  --orange-d:#e2622f;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--ink);background:var(--white);line-height:1.9;
  font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
mark{background:none;color:inherit;padding:0 .05em;box-shadow:inset 0 -.42em 0 rgba(254,115,61,.28)}
.container{width:min(1120px,90%);margin-inline:auto}
.center{text-align:center}
.en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif}

/* ---- section head ---- */
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-en{
  font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.16em;
  color:var(--gray);font-size:.8rem;text-transform:uppercase;display:inline-block;
}
.sec-en small{font-size:.7em;text-transform:none;letter-spacing:0}
.sec-en.light{color:rgba(255,255,255,.75)}
.sec-ja{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:700;line-height:1.45;margin-top:.4em;letter-spacing:.01em}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;transition:background .3s,box-shadow .3s;
}
.site-header.scrolled{background:var(--white);box-shadow:0 1px 0 var(--line)}
.header-inner{width:min(1280px,94%);margin-inline:auto;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:12px;color:var(--white);transition:color .3s}
.scrolled .logo{color:var(--ink)}
.logo-mark{display:block;height:34px;width:auto;flex:0 0 auto}
.logo-type{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:.06em;line-height:1.1;display:flex;flex-direction:column}
.logo-type small{font-size:.5em;letter-spacing:.3em;font-weight:500;color:currentColor;opacity:.6}
.logo-type.light{color:var(--white)}

.gnav{margin-left:auto}
.gnav ul{display:flex;gap:26px;list-style:none}
.gnav a{
  color:var(--white);font-size:.86rem;font-weight:500;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .3s;
}
.scrolled .gnav a{color:var(--ink)}
.gnav a span{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.08em;color:currentColor;opacity:.55;text-transform:uppercase}
.gnav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:currentColor;transition:width .3s}
.gnav a:hover::after{width:100%}

.btn-entry{
  background:var(--white);color:var(--ink);font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;
  letter-spacing:.08em;padding:11px 28px;border-radius:999px;font-size:.85rem;flex:0 0 auto;
  border:1px solid var(--white);transition:background .25s,color .25s;
}
.btn-entry:hover{background:transparent;color:var(--white)}
.scrolled .btn-entry{background:var(--ink);color:#fff;border-color:var(--ink)}
.scrolled .btn-entry:hover{background:#fff;color:var(--ink)}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;width:34px;height:26px;justify-content:center;flex:0 0 auto}
.hamburger span{display:block;height:2px;background:var(--white);transition:.3s}
.scrolled .hamburger span{background:var(--ink)}
.nav-open .hamburger span{background:var(--ink)}
.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .hamburger span:nth-child(2){opacity:0}
.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:center;overflow:hidden;color:var(--white)}
.hero-bg{
  position:absolute;inset:0;background:var(--ink) center/cover no-repeat;
  background-image:url("../../img/scene-hero.jpg");
  animation:kenburns 18s var(--ease) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero-overlay{position:absolute;inset:0;background:rgba(20,31,34,.56)}
.hero-content{position:relative;width:min(1120px,90%);margin-inline:auto}
.hero-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.85);font-size:clamp(.8rem,1.4vw,1rem);margin-bottom:.8em;text-transform:uppercase}
.hero-catch{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:700;line-height:1.15;letter-spacing:.02em}
.hero-lead{margin-top:1.4em;font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:400;line-height:2;max-width:34em}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:var(--white);font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.6rem;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:44px}
.hero-scroll span{writing-mode:vertical-rl}
.hero-scroll::after{content:"";position:absolute;bottom:0;width:1px;height:36px;background:rgba(255,255,255,.6);animation:scrolline 1.8s ease-in-out infinite}
@keyframes scrolline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   CONCEPT
   ========================================================= */
.concept{padding:120px 0}
.concept-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.concept-photo{position:relative;overflow:hidden}
.concept-video{position:relative;aspect-ratio:16/9;background:var(--ink)}
.concept-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.concept-body .lead{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;line-height:1.7;margin-bottom:1em;color:var(--ink)}
.concept-body p{color:var(--gray);margin-bottom:1.2em}

/* =========================================================
   DIGEST 01-05  （中央タイムライン＋スクロール連動ライン）
   ========================================================= */
.digest{padding:110px 0;background:var(--soft)}
.digest-timeline{position:relative;max-width:1000px;margin-inline:auto}

/* 中央の縦ライン：薄いトラック＋スクロールで下へ伸びる塗り */
.digest-rail{position:absolute;left:50%;top:60px;bottom:60px;width:2px;transform:translateX(-50%);
  background:var(--line)}
.digest-rail-fill{position:absolute;top:0;left:0;width:100%;height:0;
  background:var(--ink);transition:height .12s linear}

/* 各ステップ：text | node(中央) | visual の3カラム。reverseで左右入替 */
.digest-item{position:relative;display:grid;grid-template-columns:1fr 132px 1fr;
  grid-template-areas:"text node visual";column-gap:36px;align-items:center;padding:40px 0}
.digest-item.reverse{grid-template-areas:"visual node text"}
.digest-text{grid-area:text}
.digest-node{grid-area:node;display:flex;justify-content:center}
.digest-visual{grid-area:visual}

/* 番号ノード（中央ライン上に配置・ラインが到達すると点灯／直角） */
.digest-node span{position:relative;z-index:2;width:88px;height:88px;
  display:grid;place-items:center;background:var(--white);border:1px solid var(--line);
  font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:clamp(1.8rem,3.2vw,2.4rem);
  color:var(--gray);line-height:1;
  transition:color .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease)}
.digest-node.is-active span{border-color:var(--ink);color:#fff;background:var(--ink)}

.digest-text .digest-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.14em;color:var(--gray);font-size:.8rem;text-transform:uppercase;margin-bottom:.5em}
.digest-text h3{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;line-height:1.5;margin-bottom:.6em;color:var(--ink)}
.digest-text p{color:var(--gray)}
.digest-img{aspect-ratio:4/3;background:var(--ink) center/cover;filter:saturate(.92)}

/* stat row (03・visual側に配置) */
.digest-stats{display:flex;align-items:center}
.stat-row{list-style:none;display:flex;flex-wrap:wrap;gap:14px 30px}
.stat-row li{display:flex;align-items:baseline;gap:4px;flex-direction:row;flex-wrap:wrap}
.stat-row .num{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:clamp(2rem,4.4vw,3rem);color:var(--ink);line-height:1}
.stat-row em{font-style:normal;font-weight:700;color:var(--ink);font-size:1.1rem}
.stat-row small{display:block;width:100%;color:var(--gray);font-size:.75rem;margin-top:.2em}
.stat-row sup{color:var(--gray);font-size:.7em}

/* =========================================================
   MESSAGE
   ========================================================= */
.message{padding:130px 0;background:var(--ink) center/cover;position:relative;color:var(--white);text-align:center}
.message::before{content:"";position:absolute;inset:0;background:url("../../img/scene-seminar-room.jpg") center/cover}
.message::after{content:"";position:absolute;inset:0;background:rgba(20,31,34,.85)}
.message .container{position:relative;z-index:1}
.message-body{font-size:clamp(1.2rem,3vw,2rem);font-weight:700;line-height:2;margin-top:.6em}
.message mark{box-shadow:inset 0 -.42em 0 rgba(254,115,61,.45);color:#fff}
.message-sub{color:rgba(255,255,255,.82);margin-top:1.3em;font-size:1rem;line-height:2;max-width:42em;margin-inline:auto}

/* =========================================================
   GUIDE CARDS
   ========================================================= */
.guide{padding:110px 0}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.guide-card{
  position:relative;aspect-ratio:16/9;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  background:var(--ink) center/cover;isolation:isolate;
}
.guide-card::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,31,34,.5);transition:background .35s}
.guide-card:hover::after{background:rgba(20,31,34,.68)}
.guide-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.8);font-size:.78rem;text-transform:uppercase}
.guide-ja{font-size:1.25rem;font-weight:700;margin-top:.15em}
.guide-arrow{position:absolute;top:22px;right:22px;width:40px;height:40px;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:.3s;font-family:"Satoshi","Helvetica Neue",Arial,sans-serif}
.guide-card:hover .guide-arrow{background:#fff;border-color:#fff;color:var(--ink)}

/* =========================================================
   MEMBER (interview cards)
   ========================================================= */
.member{padding:110px 0;background:var(--soft)}
.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:44px}
.member-card{background:#fff;overflow:hidden;transition:border-color .3s;border:1px solid var(--line)}
.member-card:hover{border-color:var(--ink)}
.member-photo{display:block;aspect-ratio:9/16;background:var(--ink) center/cover;filter:saturate(.92)}
.member .member-photo{aspect-ratio:4/5}
.member-info{display:block;padding:20px}
.member-name{font-weight:700;font-size:1.05rem;display:flex;flex-direction:column;color:var(--ink)}
.member-name small{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.1em;color:var(--gray);margin-top:2px}
.member-role{display:block;font-size:.75rem;color:var(--gray);font-weight:500;margin:.6em 0}
.member-copy{display:block;font-size:.9rem;color:var(--gray);line-height:1.7}
.btn-more{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--ink);color:var(--ink);font-weight:500;padding:14px 34px;border-radius:999px;transition:.3s}
.btn-more span{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.7rem;letter-spacing:.1em;color:var(--gray)}
.btn-more:hover{background:var(--ink);color:#fff}
.btn-more:hover span{color:rgba(255,255,255,.7)}

/* =========================================================
   ENTRY CTA
   ========================================================= */
.entry-cta{padding:110px 0;text-align:center;background:var(--ink);color:#fff}
.entry-cta h2{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:700;margin:.3em 0 .5em}
.entry-cta p{color:rgba(255,255,255,.8)}
.entry-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:2em}
.btn-entry-lg{background:#fff;color:var(--ink);font-weight:700;padding:17px 46px;border-radius:999px;border:1px solid #fff;transition:.3s;font-size:1rem}
.btn-entry-lg:hover{background:transparent;color:#fff}
.btn-entry-lg.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.btn-entry-lg.outline:hover{background:#fff;color:var(--ink);border-color:#fff}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink-d);color:rgba(255,255,255,.75);padding:64px 0 24px}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-addr{font-size:.82rem;line-height:1.9;margin-top:1em}
.footer-sns{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.82rem;color:rgba(255,255,255,.75);transition:color .2s}
.footer-sns:hover{color:#fff}
.footer-sns svg{width:18px;height:18px;flex:0 0 auto}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:12px 40px}
.footer-nav a{font-size:.86rem;transition:color .2s}
.footer-nav a:hover{color:#fff}
.copyright{text-align:center;font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-top:24px}

/* demo flag */
.demo-flag{position:fixed;left:14px;bottom:14px;z-index:200;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;padding:7px 14px;letter-spacing:.03em}

/* =========================================================
   Scroll fade-in
   ========================================================= */
.fade{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .gnav{position:fixed;inset:0 0 0 auto;width:min(320px,80%);background:#fff;flex-direction:column;
    padding:calc(var(--header-h) + 20px) 32px 40px;transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:-10px 0 40px -20px rgba(0,0,0,.3);margin-left:0}
  .nav-open .gnav{transform:none}
  .gnav ul{flex-direction:column;gap:0;width:100%}
  .gnav li{border-bottom:1px solid var(--line)}
  .gnav a{flex-direction:row;justify-content:space-between;color:var(--ink);padding:16px 4px;font-size:1rem}
  .gnav a::after{display:none}
  .hamburger{display:flex;margin-left:auto;order:3}
  .btn-entry{margin-left:0;order:2}
  .gnav{order:4}
  .header-inner{gap:14px}
  .concept-grid{grid-template-columns:1fr;gap:32px}
  .member-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  body{font-size:15px}
  .concept,.digest,.guide,.member,.entry-cta{padding:72px 0}
  .message{padding:88px 0}
  .digest-rail{left:31px;transform:none}
  .digest-item,.digest-item.reverse{grid-template-columns:62px 1fr;
    grid-template-areas:"node text" "node visual";column-gap:16px;row-gap:12px;align-items:start;padding:26px 0}
  .digest-node{justify-content:flex-start}
  .digest-node span{width:62px;height:62px;font-size:1.5rem}
  .digest-visual{margin-top:2px}
  .digest-stats{align-items:flex-start}
  .guide-grid{grid-template-columns:1fr 1fr;gap:12px}
  .guide-ja{font-size:1.05rem}
  .btn-entry{padding:9px 20px;font-size:.8rem}
  .footer-inner{flex-direction:column;gap:28px}
}
@media(max-width:480px){
  .member-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .hero-lead br{display:none}
}


/* =========================================================
   下層ページ共通コンポーネント（about / works / mission / environment / interview / recruit-new / recruit-mid）
   ※デモ用・文言/写真/数値はすべて仮
   ========================================================= */
/* ページ見出し帯（固定ヘッダーの白文字が乗る前提でチャコール） */
.page-head{position:relative;background:var(--ink) center/cover;color:#fff;overflow:hidden;
  padding:calc(var(--header-h) + 70px) 0 62px}
.page-head::before{content:"";position:absolute;inset:0;background:url("../../img/scene-docs.jpg") center/cover}
.page-head::after{content:"";position:absolute;inset:0;background:rgba(20,31,34,.78)}
.page-head .container{position:relative;z-index:1}
.breadcrumb{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.72);margin-bottom:1.3em}
.breadcrumb a{color:rgba(255,255,255,.72)}
.breadcrumb a:hover{color:#fff}
.breadcrumb i{font-style:normal;margin:0 .5em;color:rgba(255,255,255,.5)}
.page-head .ph-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.8);font-size:.9rem;text-transform:uppercase}
.page-head h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:700;line-height:1.25;margin:.2em 0 .35em}
.page-head .ph-lead{color:rgba(255,255,255,.85);max-width:40em;font-size:clamp(.95rem,1.5vw,1.08rem)}

/* 汎用セクション */
.section{padding:96px 0}
.section.soft{background:var(--soft)}
.section.navy{background:var(--ink);color:#fff}
.section.navy .sec-ja{color:#fff}
.section.navy .prose p{color:rgba(255,255,255,.82)}
.lead-lg{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;line-height:1.8;color:var(--ink)}
.prose p{color:var(--gray);margin-bottom:1.2em}
.prose p:last-child{margin-bottom:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col.text-first .tc-img{order:2}
.round-img{aspect-ratio:16/9;background:var(--ink) center/cover;filter:saturate(.92)}

/* 定義テーブル（会社概要・募集要項） */
.info-table{width:100%;border-top:1px solid var(--line)}
.info-table .row{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 4px;border-bottom:1px solid var(--line)}
.info-table .th{font-weight:700;color:var(--ink)}
.info-table .td{color:var(--gray)}
.info-table .td sup{color:var(--gray);font-size:.72em}

/* 沿革タイムライン */
.history{border-left:1px solid var(--line);margin-left:8px;max-width:760px}
.history .hrow{position:relative;padding:0 0 34px 30px}
.history .hrow:last-child{padding-bottom:0}
.history .hrow::before{content:"";position:absolute;left:-6px;top:8px;width:11px;height:11px;background:var(--ink)}
.history .hyear{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--ink);font-size:1.05rem}
.history .htext{color:var(--gray);margin-top:.2em}

/* 職種・特徴カード（en+タイトル+説明） */
.col-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.col-cards.c2{grid-template-columns:repeat(2,1fr)}
.col-cards.c4{grid-template-columns:repeat(4,1fr)}
.info-card{border:1px solid var(--line);background:#fff;padding:26px}
.info-card .ic-img{aspect-ratio:16/9;background:var(--ink) center/cover;margin-bottom:16px;filter:saturate(.92)}
.info-card .ic-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.12em;color:var(--gray);font-size:.72rem;text-transform:uppercase}
.info-card h3{font-size:1.16rem;font-weight:700;color:var(--ink);margin:.3em 0 .5em}
.info-card p{color:var(--gray);font-size:.9rem}

/* バリューカード（大きな番号） */
.value-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-card{border:1px solid var(--line);padding:30px;background:#fff}
.value-card .vnum{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:2.6rem;color:var(--gray);line-height:1}
.value-card .vnum-icon{height:26px;width:auto;display:block}
.value-card h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin:.35em 0 .4em}
.value-card p{color:var(--gray);font-size:.9rem}

/* 選考フロー */
.flow{counter-reset:flow;max-width:760px;margin-inline:auto}
.flow-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:22px;padding:0 0 30px}
.flow-step:last-child{padding-bottom:0}
.flow-step:not(:last-child)::before{content:"";position:absolute;left:31px;top:64px;bottom:2px;width:1px;background:var(--line)}
.flow-step .fnum{counter-increment:flow;width:64px;height:64px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.2rem}
.flow-step .fnum::after{content:counter(flow,decimal-leading-zero)}
.flow-step .fbody{padding-top:8px}
.flow-step h3{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.3em}
.flow-step p{color:var(--gray);font-size:.92rem}

/* FAQ */
.faq{max-width:820px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line);padding:22px 2px}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{display:flex;gap:14px;font-weight:700;color:var(--ink);line-height:1.7}
.faq-q .mk{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;color:var(--ink);font-weight:700;flex:0 0 auto}
.faq-a{display:flex;gap:14px;color:var(--gray);margin-top:.6em;font-size:.94rem}
.faq-a .mk{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;color:var(--gray);font-weight:700;flex:0 0 auto}

/* 福利厚生・制度グリッド */
.perk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.perk{border:1px solid var(--line);padding:24px;background:#fff}
.perk h4{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.3em}
.perk p{color:var(--gray);font-size:.86rem}

/* 1日の流れ */
.day{max-width:760px;margin-inline:auto}
.day-row{display:grid;grid-template-columns:110px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}
.day-row:last-child{border-bottom:0}
.day-time{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--ink)}
.day-row h4{font-weight:700;color:var(--ink);margin-bottom:.2em}
.day-row p{color:var(--gray);font-size:.9rem}

/* Instagram埋め込み */
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;justify-items:center;align-items:start}
.insta-grid .instagram-media{width:100% !important;max-width:360px !important;min-width:0 !important}

/* インタビュー詳細（Q&A） */
.qa{max-width:820px;margin-inline:auto}
.qa-profile{display:flex;align-items:center;gap:20px;background:var(--soft);padding:22px 26px;margin-bottom:40px}
.qa-profile .qa-photo{width:88px;height:88px;background:var(--ink) center/cover;flex:0 0 auto}
.qa-profile .qa-name{font-weight:700;color:var(--ink);font-size:1.1rem}
.qa-profile .qa-role{color:var(--gray);font-weight:500;font-size:.82rem;margin-top:.2em}
.qa-profile .qa-desc{color:var(--gray);font-size:.86rem;margin-top:.3em}
.qa-block{margin-bottom:32px}
.qa-q{font-size:1.12rem;font-weight:700;color:var(--ink);margin-bottom:.5em;padding-left:.7em;border-left:3px solid var(--ink)}
.qa-a{color:var(--gray)}

/* 補助ボタン */
.btn-fill{display:inline-block;background:var(--ink);color:#fff;font-weight:500;padding:15px 40px;border-radius:999px;border:1px solid var(--ink);transition:.3s}
.btn-fill:hover{background:#fff;color:var(--ink)}
.tag{display:inline-block;font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--ink);border:1px solid var(--ink);padding:4px 12px}

/* =========================================================
   募集要項タブ（新卒の年度切替／中途の職種絞り込み）
   ========================================================= */
/* 新卒：ファーストビュー内の年度切替ボタン */
.grad-switch{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-family:inherit;font-size:.95rem;font-weight:700;
  color:#fff;background:transparent;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:14px 32px;cursor:pointer;transition:.3s}
.grad-switch:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 中途：職種の絞り込みタブ */
.blog-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:46px}
.blog-tab{position:relative;border:0;background:none;font-family:inherit;font-size:.95rem;font-weight:700;
  color:var(--gray);padding:15px 24px;cursor:pointer;transition:color .25s}
.blog-tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .3s var(--ease)}
.blog-tab:hover{color:var(--ink)}
.blog-tab.is-active{color:var(--ink)}
.blog-tab.is-active::after{transform:none}
.blog-tab .cnt{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.72rem;font-weight:700;color:var(--gray);margin-left:7px}
.blog-tab.is-active .cnt{color:var(--ink)}
.job-count{color:var(--gray);font-size:.86rem;margin:-32px 0 28px}

/* 中途：職種カード（絞り込みタブに対応するグリッド） */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.job-card{display:block;border:1px solid var(--line);background:#fff;padding:26px 24px;transition:border-color .3s}
a.job-card:hover{border-color:var(--ink)}
.job-tag{display:inline-block;background:var(--soft);color:var(--gray);font-size:.71rem;font-weight:700;letter-spacing:.04em;padding:5px 10px}
.job-card h3{font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.5;margin:.7em 0 .45em}
.job-lead{color:var(--gray);font-size:.9rem;line-height:1.75}
.job-spec{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.job-spec .jrow{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:4px 0;font-size:.82rem}
.job-spec dt{color:var(--ink);font-weight:700}
.job-spec dd{color:var(--gray)}
.job-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.85rem;font-weight:700;color:var(--ink)}
.job-more::after{content:"→";font-family:"Satoshi","Helvetica Neue",Arial,sans-serif}
#requirements{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ブログ・お知らせ一覧 */
.blog-card{display:block}
.blog-thumb{aspect-ratio:16/9;background:var(--ink) center/cover;filter:saturate(.92);transition:opacity .3s}
.blog-card:hover .blog-thumb{opacity:.82}
.blog-meta{display:flex;align-items:center;gap:12px;margin-top:16px}
.blog-cat{font-size:.72rem;font-weight:700;color:var(--ink);border:1px solid var(--ink);padding:3px 11px;flex:0 0 auto}
.blog-date{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.78rem;letter-spacing:.06em;color:var(--gray)}
.blog-title{font-size:1.04rem;font-weight:700;line-height:1.7;color:var(--ink);margin-top:.5em}
.blog-card:hover .blog-title{color:var(--gray)}
.blog-empty{color:var(--gray);padding:40px 0}
.blog-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:72px;flex-wrap:wrap}
.blog-pager[hidden]{display:none}
.pager-nums{display:flex;gap:6px}
.pager-arrow,.pager-num{font-family:inherit;font-size:.9rem;font-weight:700;color:var(--gray);
  background:none;border:1px solid var(--line);min-width:44px;height:44px;padding:0 14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:color .25s,border-color .25s}
.pager-arrow:hover:not(:disabled),.pager-num:hover{color:var(--ink);border-color:var(--ink)}
.pager-num.is-current{color:#fff;background:var(--ink);border-color:var(--ink);cursor:default}
.pager-arrow:disabled{opacity:.35;cursor:default}

/* レスポンシブ（下層ページ） */
@media(max-width:900px){
  .col-cards,.value-list,.perk-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr;gap:28px}
  .two-col.text-first .tc-img{order:0}
  .blog-grid{grid-template-columns:1fr 1fr}
  .insta-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
}
@media(max-width:768px){
  .section{padding:64px 0}
  .page-head{padding:calc(var(--header-h) + 40px) 0 44px}
  .info-table .row{grid-template-columns:1fr;gap:4px;padding:16px 2px}
  .day-row{grid-template-columns:78px 1fr;gap:14px}
  .flow-step{grid-template-columns:52px 1fr;gap:16px}
  .flow-step .fnum{width:52px;height:52px;font-size:1.05rem}
  .flow-step:not(:last-child)::before{left:25px;top:52px}
  .blog-tab{padding:13px 16px;font-size:.9rem}
}
@media(max-width:480px){
  .col-cards,.value-list,.perk-grid,.col-cards.c4,.col-cards.c2{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
}

/* =========================================================
   インタビュー詳細ページ（ファーストビュー＋目次＋本文）
   ========================================================= */
/* 明るいファーストビューのページ用: ヘッダーをスクロール前から白背景・濃色文字にする */
body.header-solid .site-header{background:var(--white);box-shadow:0 1px 0 var(--line)}
body.header-solid .logo{color:var(--ink)}
body.header-solid .gnav a{color:var(--ink)}
body.header-solid .btn-entry{background:var(--ink);color:#fff;border-color:var(--ink)}
body.header-solid .btn-entry:hover{background:#fff;color:var(--ink)}
body.header-solid .hamburger span{background:var(--ink)}

/* ファーストビュー: 縦型写真＋キャッチコピー＋プロフィール */
.itv-hero{background:var(--soft);padding:calc(var(--header-h) + 44px) 0 56px}
.itv-hero .breadcrumb{color:var(--gray)}
.itv-hero .breadcrumb a{color:var(--gray)}
.itv-hero .breadcrumb a:hover{color:var(--ink)}
.itv-hero .breadcrumb i{color:#b8bec4}
.itv-hero-grid{display:grid;grid-template-columns:2.4fr 4.2fr 3fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:10px}
.itv-hero-photo{display:block;aspect-ratio:9/16;background:var(--ink) center/cover;filter:saturate(.92);min-width:0}
.itv-hero-profile{min-width:0}
.itv-hero-profile .ihp-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:.18em;font-size:.78rem;color:var(--gray);text-transform:uppercase}
.itv-hero-profile h1{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;line-height:1.35;margin:.3em 0 .7em}
.itv-hero-profile .ihp-dept{font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.7}
.itv-hero-profile .ihp-role{font-size:.85rem;color:var(--gray);margin-top:.35em;line-height:1.7}
.itv-hero-copy{min-width:0;font-size:clamp(1.22rem,1.75vw,1.55rem);font-weight:700;line-height:1.75;letter-spacing:.01em;color:var(--ink)}
@media(max-width:900px){
  .itv-hero-grid{grid-template-columns:minmax(0,240px) 1fr;gap:28px}
  .itv-hero-profile{grid-column:1 / -1;margin-top:6px}
}
@media(max-width:480px){
  .itv-hero-grid{grid-template-columns:1fr}
  .itv-hero-photo{max-width:240px}
  .itv-hero-copy{font-size:1.18rem;line-height:1.75}
}

/* 本文（目次・見出し・帯写真） */
.article{max-width:820px;margin-inline:auto}
.toc{border:1px solid var(--line);background:var(--soft);padding:28px 32px;margin-bottom:8px}
.toc-ttl{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.8em}
.toc ol{margin-left:1.3em;color:var(--gray)}
.toc li{margin-bottom:.55em;font-size:.94rem}
.toc li:last-child{margin-bottom:0}
.toc a:hover{color:var(--ink);text-decoration:underline}
.article-body h2{font-size:clamp(1.18rem,2.2vw,1.4rem);font-weight:700;color:var(--ink);line-height:1.55;
  margin:56px 0 20px;padding-left:.6em;border-left:4px solid var(--ink);scroll-margin-top:calc(var(--header-h) + 24px)}
.article-body h2 .h2-main{display:block}
.article-body h2 .h2-sub{display:block;margin-top:.5em;font-size:.72em;font-weight:500;color:var(--gray);line-height:1.75}
.article-body p{color:var(--gray);margin-bottom:1.4em}
.photo-band{aspect-ratio:16/9;background:var(--ink) center/cover;filter:saturate(.92);margin:30px 0}