/* =========================================================
   LEARNING EDGE 採用サイト DEMO 1 （力強い・編集的）
   ラーニングエッジ株式会社 採用サイト
   2026-07-18 改定: 小島さんFB反映
   - 配色: 白基調×チャコール（leverages.jp/recruit 実測値ベース・クール）
   - 書体: 日本語 Noto Sans JP／英字 Satoshi（legaseed 実測と同じ）
   - 図形: 写真・カード・番号ノードは直角（角丸なし）。ボタンのみピル型
   - 写真: 日本人モデルのフリー素材（ぱくたそ・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{
  /* 2026-09-07 改修: 緑寄りチャコール → 紺ベース（小島さん依頼③）
     コーポレートサイト learningedge.jp の紺は #00184d（実測）。
     「ここまで濃くしなくてよい」との指示にあわせて一段明るい紺にしている。 */
  --ink:#16294d;       /* 主色ネイビー（背景・図形・ボタン） */
  --ink-d:#0e1c38;     /* 濃い紺（フッター） */
  --text:#0d1526;      /* 本文・見出しの黒（参考: career.datumstudio.jp は #000019） */
  --gray:#454f5e;      /* 説明文（旧 #6b7680 から濃くした・小島さん依頼②） */
  --line:#e7e7e7;
  --soft:#f6f6f6;
  --ghost:#f0efeb;
  --accent:#fe733d;    /* アクセント橙（最小限の使用） */
  --white:#fff;
  /* 旧変数の互換マッピング */
  --navy:#16294d;
  --navy-2:#24395f;
  --blue:#16294d;
  --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(--text);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(--text)}
.logo-mark{
  font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  background:var(--ink);color:var(--white);width:40px;height:40px;
  display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.4);
}
.scrolled .logo-mark{border-color:var(--ink)}
.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(--text)}
.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(--text);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(--text)}

.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-le-hero.jpg");background-position:50% 45%;
  animation:kenburns 18s var(--ease) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
/* 2026-09-07 ①パターンA（明るさ調整版 v2・小島さん 9/7 21:12 の指示）
   ・写真は明るいまま（brightness 1.02）
   ・暗幕は横方向に差をつけない＝どの人も同じ明るさ。顔の帯（上から32%〜58%）には暗幕をかけない
   ・文字は顔にかからない下側へ寄せる */
.hero-bg{filter:saturate(.98) brightness(1.02)}
.hero-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,19,38,.62) 0%,rgba(10,19,38,.54) 7%,rgba(10,19,38,.22) 16%,rgba(10,19,38,0) 23%,
    rgba(10,19,38,0) 55%,rgba(10,19,38,.46) 57.5%,rgba(10,19,38,.56) 60%,rgba(10,19,38,.60) 66%,rgba(10,19,38,.66) 78%,rgba(10,19,38,.74) 100%)}
.hero-catch,.hero-lead,.hero-lead2,.hero-en{text-shadow:0 2px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.38)}
/* 写真の上に白いまま乗るヘッダー（PCのみ・スクロール前）は薄い影で読めるようにする */
@media(min-width:1025px){
  body:not(.header-solid) .site-header:not(.scrolled) .gnav a,
  body:not(.header-solid) .site-header:not(.scrolled) .logo{text-shadow:0 1px 6px rgba(0,0,0,.45)}
}
/* 文字ブロックを下寄せ（顔の帯を避ける） */
.hero{align-items:flex-end}
.hero-content{padding-bottom:48px}
.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-photo .movie-img{display:block;aspect-ratio:16/9;background:var(--ink) center/cover;background-image:url("../img/scene-movie.jpg");filter:saturate(.92)}
.concept-body .lead{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;line-height:1.7;margin-bottom:1em;color:var(--text)}
.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(--text)}
.digest-text p{color:var(--gray)}
.digest-img{aspect-ratio:16/9;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(--text);line-height:1}
.stat-row em{font-style:normal;font-weight:700;color:var(--text);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-le-seminar-room.jpg") center/cover}
.message::after{content:"";position:absolute;inset:0;background:rgba(10,19,38,.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}

/* =========================================================
   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(10,19,38,.5);transition:background .35s}
.guide-card:hover::after{background:rgba(10,19,38,.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(--text)}

/* =========================================================
   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)}
/* 遷移するカード（トップ）だけホバーする。インタビューページの一覧はリンクではないので反応させない */
a.member-card:hover{border-color:var(--ink)}
.member-photo{display:block;aspect-ratio:9/16;background:var(--ink) center/cover;filter:saturate(.92)}
.member-info{display:block;padding:20px}
.member-name{font-weight:700;font-size:1.05rem;display:flex;flex-direction:column;color:var(--text)}
.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(--text);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(--text);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(--text);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-addr{font-size:.82rem;line-height:1.9;margin-top:1em}
.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(--text);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(10,19,38,.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(--text)}
.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(--text)}
.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(--text);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)}
/* リンクではないカードなので、ホバー時の枠線変化は付けない（2026-08-04 修正②） */
.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(--text);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 h3{font-size:1.15rem;font-weight:700;color:var(--text);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(--text);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(--text);line-height:1.7}
.faq-q .mk{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;color:var(--text);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 .picon{width:44px;height:44px;background:var(--soft);display:grid;place-items:center;font-size:1.2rem;color:var(--text);margin-bottom:12px}
.perk h4{font-size:1rem;font-weight:700;color:var(--text);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(--text)}
.day-row h4{font-weight:700;color:var(--text);margin-bottom:.2em}
.day-row p{color:var(--gray);font-size:.9rem}

/* インタビュー詳細（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(--text);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(--text);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(--text)}
.tag{display:inline-block;font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--text);border:1px solid var(--ink);padding:4px 12px}

/* レスポンシブ（下層ページ） */
@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}
}
@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}
}
@media(max-width:480px){
  .col-cards,.value-list,.perk-grid,.col-cards.c4,.col-cards.c2{grid-template-columns:1fr}
}

/* =========================================================
   2026-08-04 修正 ③④⑤ 追加分
   ========================================================= */
/* セクション見出しの補足一文 */
.sec-note{color:var(--gray);font-size:.88rem;margin-top:.9em}

/* ---------------------------------------------------------
   左メニュー＋右コンテンツ（仕事を知る）
   --------------------------------------------------------- */
.doc-layout{display:grid;grid-template-columns:264px 1fr;gap:60px;align-items:start}
/* グリッド項目の既定 min-width:auto を切る（切らないと中の図がページ幅を押し広げる） */
.doc-main{min-width:0}
.doc-nav{position:sticky;top:calc(var(--header-h) + 24px);border:1px solid var(--line);background:#fff}
.doc-nav ul{list-style:none}
.doc-nav > ul > li{border-bottom:1px solid var(--line)}
.doc-nav > ul > li:last-child{border-bottom:0}
.doc-nav a{display:flex;align-items:center;gap:11px;padding:18px 22px;font-size:.93rem;font-weight:500;color:var(--gray);transition:color .25s}
.doc-nav a::before{content:"";width:6px;height:6px;background:var(--line);flex:0 0 auto;transition:background .25s}
.doc-nav a:hover{color:var(--text)}
.doc-nav a.is-current{color:var(--text);font-weight:700}
.doc-nav a.is-current::before{background:var(--ink)}
.doc-nav .sub{border-top:1px solid var(--line)}
.doc-nav .sub li{border-bottom:1px solid var(--line)}
.doc-nav .sub li:last-child{border-bottom:0}
.doc-nav .sub a{padding:13px 22px 13px 40px;font-size:.85rem}
.doc-nav .sub a::before{display:none}

.doc-block{scroll-margin-top:calc(var(--header-h) + 24px)}
.doc-block + .doc-block{margin-top:96px;padding-top:96px;border-top:1px solid var(--line)}
.doc-label{display:flex;align-items:center;gap:14px}
.doc-label .lb-en{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.32rem;letter-spacing:.04em;color:var(--text)}
.doc-label .lb-bar{width:1px;height:18px;background:var(--line)}
.doc-label .lb-ja{font-size:.86rem;font-weight:700;color:var(--gray)}
.doc-catch{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;line-height:1.5;letter-spacing:.01em;margin:.55em 0 .7em}
.doc-body p{color:var(--gray);margin-bottom:1.2em}
.doc-body p:last-child{margin-bottom:0}
.doc-sub{font-size:1.2rem;font-weight:700;color:var(--text);margin:52px 0 18px;scroll-margin-top:calc(var(--header-h) + 24px)}

/* 図版（職種一覧などの差し込み画像） */
.figure-wide{border:1px solid var(--line);background:#fff;padding:22px;margin:36px 0}
.figure-wide img{width:100%;height:auto}
.figure-cap{color:var(--gray);font-size:.8rem;margin-top:12px;text-align:center}

/* 帯写真（Benefit） */
.photo-band{position:relative;aspect-ratio:16/9;background:var(--ink) center/cover;filter:saturate(.92);margin:30px 0}
.photo-band .band-tag{position:absolute;left:0;top:0;background:var(--ink);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.04em;padding:7px 16px}

/* 定義リスト（制度名｜説明） */
.def-list{border-top:1px solid var(--line)}
.def-list .def-row{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:22px 2px;border-bottom:1px solid var(--line)}
.def-list dt{font-weight:700;color:var(--text)}
.def-list dd{color:var(--gray);font-size:.94rem}

/* ---------------------------------------------------------
   ブログ（一覧・記事）
   --------------------------------------------------------- */
.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(--text)}
.blog-tab.is-active{color:var(--text)}
.blog-tab.is-active::after{transform:none}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 26px}
.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(--text);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(--text);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(--text);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}

/* 記事本文 */
.article{max-width:820px;margin-inline:auto}
.article-eyecatch{aspect-ratio:16/9;background:var(--ink) center/cover;filter:saturate(.92);margin-bottom:36px}
.article-body h2{font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:700;color:var(--text);line-height:1.6;
  margin:56px 0 20px;padding-left:.6em;border-left:4px solid var(--ink);scroll-margin-top:calc(var(--header-h) + 24px)}
.article-body h3{font-size:1.1rem;font-weight:700;color:var(--text);margin:36px 0 14px}
.article-body p{color:var(--gray);margin-bottom:1.4em}
.article-body ul{color:var(--gray);margin:0 0 1.4em 1.3em}
.article-body li{margin-bottom:.5em}
.article-body .note{border:1px solid var(--line);background:var(--soft);padding:24px 26px;color:var(--gray);font-size:.92rem;margin-bottom:1.6em}

/* 目次 */
.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(--text);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(--text);text-decoration:underline}

@media(max-width:1024px){
  .doc-layout{grid-template-columns:1fr;gap:36px}
  .doc-nav{position:static}
  .blog-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}
}
@media(max-width:768px){
  .doc-block + .doc-block{margin-top:64px;padding-top:64px}
  .def-list .def-row{grid-template-columns:1fr;gap:6px;padding:18px 2px}
  .photo-band{aspect-ratio:16/9}
  /* 図は縮むと文字が読めないので、横スクロールで見せる */
  .figure-wide{padding:14px;overflow-x:auto}
  .figure-wide img{min-width:640px}
  /* 2026-09-18 職種一覧の図だけは縦並びのSP版に差し替えたので、横スクロールをやめて画面幅に収める */
  .figure-jobmap{overflow-x:visible}
  .figure-jobmap img{min-width:0;width:100%}
  .blog-tab{padding:13px 16px;font-size:.9rem}
}
@media(max-width:520px){
  .blog-grid{grid-template-columns:1fr}
}

/* =========================================================
   募集ポジション一覧（中途採用・⑦）／新卒の卒年切替（⑥）
   2026-08-10 追加
   ========================================================= */
/* 絞り込みタブの件数（数字はJSが入れるので手で書かない） */
.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(--text)}
.job-count{color:var(--gray);font-size:.86rem;margin:-32px 0 28px}

/* 職種カード（.blog-grid の3列に並ぶ） */
.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(--text);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(--text);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(--text)}
.job-more::after{content:"→";font-family:"Satoshi","Helvetica Neue",Arial,sans-serif}

/* 新卒の卒年切替ボタン（ファーストビュー内） */
.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(--text);border-color:#fff}

/* =========================================================
   2026-08-13 FB反映: インタビュー詳細のファーストビュー刷新
   （一覧と同じ縦型4:5の写真＋プロフィール＋キャッチコピーの大きな文字）
   ========================================================= */
.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(--text)}
.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(--text);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.4rem,2.9vw,2.35rem);font-weight:700;line-height:1.55;letter-spacing:.02em;color:var(--text)}
.itv-hero-copy small{display:block;font-size:.76rem;font-weight:400;letter-spacing:0;color:var(--gray);margin-top:1.4em;line-height:1.7}
@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}
}

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

/* ============================================================
   2026-08-20 インタビュー記事の本文流し込みに合わせた調整
   （原稿の見出しが長い＝最長51字のため、見出しを2段にして文字量を受け止める）
   ============================================================ */

/* ファーストビュー: 氏名の下のローマ字表記 */
.itv-hero-profile .ihp-romaji{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;color:var(--gray);margin:-.45em 0 .9em}

/* ファーストビュー: キャッチコピー（長め＝30〜40字を想定した大きさ） */
.itv-hero-copy{font-size:clamp(1.28rem,1.75vw,1.6rem);line-height:1.75;letter-spacing:.01em}

/* 本文の見出し: 大見出し（h2-main）＋説明行（h2-sub）の2段 */
.article-body h2{font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.55}
.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;letter-spacing:.01em}

@media(max-width:480px){
  .itv-hero-copy{font-size:1.22rem;line-height:1.75}
  .article-body h2{font-size:1.18rem}
  .article-body h2 .h2-sub{font-size:.78em}
}

/* ============================================================
   2026-09-03 文言FIX反映（HP文言【一次作業用_0901】）
   ============================================================ */

/* トップFV: サブコピー②（①より一段小さく・行間を詰める） */
.hero-lead2{margin-top:.9em;font-size:clamp(.88rem,1.35vw,1rem);font-weight:400;
  line-height:1.95;color:rgba(255,255,255,.88);max-width:34em}

/* メッセージ: 2段落目（問いかけ） */
.message-body-sub{margin-top:1.1em;font-size:clamp(1.05rem,2.3vw,1.5rem)}

@media(max-width:480px){
  .hero-lead2 br{display:none}
}

/* 新卒募集「こんな人と働きたい」: 一言キャッチを本文と区別する */
.info-card .ic-sub{font-weight:700;color:var(--text);margin-bottom:.5em}

/* 2026-09-03 トップの案内カード「一旦白紙」（写真なしの無地。ロゴ・外観が届いたら is-blank を外す） */
.guide-card.is-blank{background:#e9ecee;color:var(--text)}
.guide-card.is-blank::after{background:transparent}
.guide-card.is-blank:hover::after{background:rgba(13,21,38,.06)}
.guide-card.is-blank .guide-en{color:rgba(13,21,38,.55)}
.guide-card.is-blank .guide-arrow{border-color:rgba(13,21,38,.35)}
.guide-card.is-blank:hover .guide-arrow{background:var(--ink);border-color:var(--ink);color:#fff}
.def-list .def-dept{display:block;font-size:.8rem;font-weight:400;color:var(--gray);margin-top:.15em}


/* 2026-09-07 v2: 下寄せに合わせたヒーロー文字の寸法（顔の帯 y32〜58% を避けるため） */
.hero-catch{font-size:clamp(2rem,4vw,3.1rem);line-height:1.16}
.hero-lead{margin-top:.95em;line-height:1.8}
.hero-lead2{margin-top:.55em;line-height:1.72}
@media(max-width:900px){
  .hero-overlay{background:linear-gradient(180deg,
    rgba(10,19,38,.56) 0%,rgba(10,19,38,.34) 12%,rgba(10,19,38,.06) 22%,rgba(10,19,38,0) 30%,
    rgba(10,19,38,0) 44%,rgba(10,19,38,.34) 54%,rgba(10,19,38,.64) 68%,rgba(10,19,38,.70) 100%)}
}


/* ============================================================
   2026-09-07 22:00 小島さん指示（PCのみ・スマホは現状のまま）
   ・コピーを上（写真の壁の部分＝添付の赤丸あたり）へ
   ・小さめの文字は横幅を広げて行数を減らし、2列目の人の顔にかからない高さに収める
   ・入り切らない分は写真の下を切って、人物を下へずらす
   ============================================================ */
@media(min-width:901px){
  .hero{align-items:flex-start}
  .hero-bg{background-size:auto 118%;background-position:50% 0;transform-origin:50% 0}
  .hero-content{padding-top:calc(var(--header-h) + 10px);padding-bottom:0}
  /* 2026-09-09 小島さん指示: キャッチは1行に。サブコピーは1行だと長すぎて読みづらいので2行に戻す */
  .hero-catch br{display:none}
  .hero-lead br,.hero-lead2 br{display:none}
  .hero-lead{max-width:48em;margin-top:.8em}
  .hero-lead2{max-width:34em;margin-top:.5em}
  .hero-overlay{background:linear-gradient(180deg,
    rgba(10,19,38,.70) 0%,rgba(10,19,38,.66) 22%,rgba(10,19,38,.64) 31%,rgba(10,19,38,.54) 34%,
    rgba(10,19,38,.16) 36.5%,rgba(10,19,38,0) 38.5%,
    rgba(10,19,38,0) 86%,rgba(10,19,38,.22) 100%)}
}
/* 拡大表示にしたぶん、ケンバーンズの寄りを弱める（両端の人が切れすぎないように） */
@media(min-width:901px){
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
}


/* ============================================================
   2026-09-09 ⑤ロゴの入れ込み（小島さんからロゴデータを受領）
   ・ヘッダー左上: 「LE」の四角＋文字ロゴ → 本物のロゴ＋RECRUIT
   ・ミッションページ「企業ロゴマークのコンセプト」: 画像枠にロゴを表示
   ============================================================ */
.logo-img{height:34px;width:auto;display:block;flex:0 0 auto}
.logo-sub{font-family:"Satoshi","Helvetica Neue",Arial,sans-serif;font-weight:600;font-size:.55rem;
  letter-spacing:.3em;color:currentColor;opacity:.7;padding-bottom:2px}
@media(max-width:600px){
  .logo-img{height:28px}
  .logo-sub{font-size:.5rem;letter-spacing:.2em}
}
/* 写真の上に乗るスクロール前のヘッダーは、ロゴが沈まないよう白い下地を敷く */
body:not(.header-solid) .site-header:not(.scrolled) .logo-img{
  background:rgba(255,255,255,.92);border-radius:3px;padding:5px 9px;box-sizing:content-box;height:28px}

/* ミッションページのロゴ */
.logo-concept{display:grid;place-items:center;background:#fff;border:1px solid var(--line);padding:6%}
.logo-concept img{width:100%;height:auto;max-width:400px}


/* ============================================================
   2026-09-09 録画での修正依頼（小島さん）
   ・ヘッダーナビの英語ラベルを削除 → 1段になったぶんヘッダーを低く
   ・メニューとコンテンツの間の余白を詰める
   ============================================================ */
:root{--header-h:60px}
.gnav a{gap:0}
/* 下層ページの見出し帯の上下余白も詰める */
.page-head{padding:calc(var(--header-h) + 44px) 0 48px}
@media(max-width:900px){
  .page-head{padding:calc(var(--header-h) + 28px) 0 36px}
}

/* =====================================================================
   2026-09-14 写真FIX（シート『HP文言【入れ込み用_0913】』F列）
   ===================================================================== */
/* TOP CONCEPT（No.2）: 清水様の写真 */
.concept-photo .movie-img{background-image:url("../img/scene-le-shimizu.jpg");background-position:50% 40%}
/* 下層ページの見出し帯（No.11/24/29/35/42/50/57）。指定のないページは従来の scene-docs のまま */
.page-head.ph-works::before{background-image:url("../img/scene-le-seminar1.jpg")}
.page-head.ph-about::before{background-image:url("../img/scene-le-front.jpg")}
.page-head.ph-mission::before{background-image:url("../img/scene-le-front3.jpg")}
.page-head.ph-env::before{background-image:url("../img/scene-le-seminar-room.jpg")}
.page-head.ph-interview::before{background-image:url("../img/scene-le-itv-front.jpg")}
.page-head.ph-new::before{background-image:url("../img/scene-le-recruiter.jpg")}
.page-head.ph-mid::before{background-image:url("../img/scene-le-front2.jpg")}
/* 会社概要の代表写真（No.25）: 縦 9:16。横幅を抑えて縦に長くなりすぎないようにする */
.round-img.is-portrait{aspect-ratio:9/16;width:100%;max-width:340px;justify-self:center;align-self:center;background-position:50% 20%}
@media(max-width:900px){
  .round-img.is-portrait{max-width:240px;margin:0 auto}
}

/* =====================================================================
   2026-09-14 スマホ版の作り替え（小島さん 9/9 録画 2:43〜3:41 ＋ 9/13 依頼④⑤）
   ・TOP: 上に16:9の写真だけ／下は白背景・黒文字／スクロールアイコンは削除
   ・下層ページの見出し帯も同じ形（写真の上に文字を載せない）
   ・縦型の個人写真は1枚で画面が埋まらない大きさに
   ===================================================================== */
@media(max-width:900px){
  .hero{height:auto;min-height:0;display:block;overflow:visible;background:#fff;color:var(--text);padding-top:var(--header-h)}
  .hero-bg{position:relative;inset:auto;display:block;aspect-ratio:16/9;animation:none;transform:none;
    background-size:cover;background-position:50% 45%;filter:none}
  .hero-overlay{display:none}
  .hero-content{width:90%;margin-inline:auto;padding:30px 0 48px}
  .hero-catch,.hero-lead,.hero-lead2,.hero-en{text-shadow:none}
  .hero-en{color:var(--gray)}
  .hero-lead2{color:var(--gray)}
  .hero-scroll{display:none}

  .page-head{background:#fff;color:var(--text);padding:var(--header-h) 0 34px}
  .page-head::before{position:relative;inset:auto;display:block;aspect-ratio:16/9;margin-bottom:26px;background-size:cover}
  .page-head::after{display:none}
  .page-head .breadcrumb,.page-head .breadcrumb a{color:var(--gray)}
  .page-head .breadcrumb a:hover{color:var(--text)}
  .page-head .breadcrumb i{color:#b8bec4}
  .page-head .ph-en{color:var(--gray)}
  .page-head .ph-lead{color:var(--gray)}
  .page-head .grad-switch{color:var(--text);border-color:var(--text)}
  .page-head .grad-switch:hover{background:var(--text);color:#fff;border-color:var(--text)}
}
@media(max-width:480px){
  /* 個人写真カード: 1列（写真1枚で画面が埋まる）→ 2列 */
  .member-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .member-info{padding:12px 12px 14px}
  .member-role{font-size:.66rem;line-height:1.5}
  .member-name{font-size:.92rem}
  .member-name small{font-size:.62rem}
  .member-copy{font-size:.72rem}
  /* インタビュー詳細のFV写真・会社概要の代表写真 */
  .itv-hero-photo{max-width:180px}
  .round-img.is-portrait{max-width:200px}
}
@media(max-width:480px){
  /* 見出しの最後の1文字だけが次の行に落ちないように行を均等に割る */
  .sec-head.center .sec-ja{text-wrap:balance}
}


/* ============================================================
   2026-09-14 浅香さん依頼: フッターの社名テキストをロゴに
   ・濃紺の上ではロゴの灰色・紺が沈むので、ヘッダー（スクロール前）と同じ白い下地を敷く
   ============================================================ */
.footer-logo{gap:8px;align-items:flex-start}
.footer-logo-img{height:28px;width:auto;display:block;background:rgba(255,255,255,.92);border-radius:3px;padding:5px 9px;box-sizing:content-box}

/* 同日: メッセージを3行に（浅香さん依頼）。スマホで3行目が「…あると／いうこと」と割れないよう、「、」の後ろでだけ折り返す */
.message .nb{display:inline-block}



/* =====================================================================
   2026-09-18 コーポレートカラーFIX（小島さん 9/17「Cの薄い青のグラデーションでFIX」）
   9/15 の最終2案の比較モック `20260914-色パターン/_作業用/css/pattern-cg-gradient.css` を
   そのまま本体へ移したもの。戻すときはこの節（ここから末尾まで）を削除する。
   ===================================================================== */


/* ---- 1) 変数の差し替え ---- */
:root{
  --ink:#2e6db4;        /* 主色の青（エントリー帯・番号ノード・ボタン）白文字 5.3:1 */
  --ink-d:#1f5494;      /* 一段濃い青（フッター）白文字 7.6:1 */
  --soft:#ecf3fa;       /* 薄い青の帯（ダイジェスト・メンバー） */
  --navy:#2e6db4;
  --navy-2:#4a84c4;
  --blue:#2e6db4;
  /* 写真にかける暗幕の色（R,G,B） */
  --shade-rgb:14,42,82;   /* ファーストビューの暗幕（文字を読ませるため暗めの青） */
  --band-rgb:20,60,112;   /* 案内カード・下層見出し帯の暗幕（写真の上の白文字を今と同じくらい読ませる濃さ） */
  --msg-rgb:46,109,180;   /* メッセージ帯の暗幕（主色と同じ青） */
  --ink-rgb:13,21,38;     /* 白紙カードの文字・線（今のまま） */
  --blank:#e4edf6;        /* 白紙カードの地 */
}

/* ---- 2) 生の色指定があった箇所の上書き ---- */
.hero-overlay{
  background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.62) 0%,rgba(var(--shade-rgb),.54) 7%,rgba(var(--shade-rgb),.22) 16%,rgba(var(--shade-rgb),0) 23%,
    rgba(var(--shade-rgb),0) 55%,rgba(var(--shade-rgb),.46) 57.5%,rgba(var(--shade-rgb),.56) 60%,rgba(var(--shade-rgb),.60) 66%,rgba(var(--shade-rgb),.66) 78%,rgba(var(--shade-rgb),.74) 100%)}
@media(max-width:900px){
  .hero-overlay{background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.56) 0%,rgba(var(--shade-rgb),.34) 12%,rgba(var(--shade-rgb),.06) 22%,rgba(var(--shade-rgb),0) 30%,
    rgba(var(--shade-rgb),0) 44%,rgba(var(--shade-rgb),.34) 54%,rgba(var(--shade-rgb),.64) 68%,rgba(var(--shade-rgb),.70) 100%)}
}
@media(min-width:901px){
  .hero-overlay{background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.70) 0%,rgba(var(--shade-rgb),.66) 22%,rgba(var(--shade-rgb),.64) 31%,rgba(var(--shade-rgb),.54) 34%,
    rgba(var(--shade-rgb),.16) 36.5%,rgba(var(--shade-rgb),0) 38.5%,
    rgba(var(--shade-rgb),0) 86%,rgba(var(--shade-rgb),.22) 100%)}
}
.message::after{background:rgba(var(--msg-rgb),.92)}
.guide-card::after{background:rgba(var(--band-rgb),.6)}
.guide-card:hover::after{background:rgba(var(--band-rgb),.75)}
.page-head::after{background:rgba(var(--band-rgb),.82)}
.guide-card.is-blank{background:var(--blank)}
.guide-card.is-blank::after{background:transparent}
.guide-card.is-blank:hover::after{background:rgba(var(--ink-rgb),.06)}

/* ---- 3) 青い面に乗る半透明の白文字を読みやすく（4.5:1 以上） ---- */
.sec-en.light{color:rgba(255,255,255,.92)}
.entry-cta p{color:rgba(255,255,255,.94)}
.section.navy .prose p{color:rgba(255,255,255,.94)}
.site-footer{color:rgba(255,255,255,.86)}
.copyright{color:rgba(255,255,255,.72)}
.btn-entry-lg.outline{border-color:rgba(255,255,255,.9)}

/* ---- 4) Bと同じ場所にグラデーション（Cの色で） ---- */
:root{
  --ink-2:#4a84c4;
  --ink-d2:#2e6db4;
  --grad:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  --grad-x:linear-gradient(90deg,var(--ink) 0%,var(--ink-2) 100%);
  --grad-d:linear-gradient(180deg,var(--ink-d) 0%,var(--ink-d2) 100%);
}
.entry-cta{background:var(--grad)}
.site-footer{background:var(--grad-d)}
.message::after{background:linear-gradient(180deg,rgba(var(--band-rgb),.92) 0%,rgba(var(--msg-rgb),.92) 100%)}
.section.navy{background:var(--grad)}
.digest-rail-fill{background:var(--grad)}
.digest-node.is-active span{background:var(--grad);border-color:var(--ink)}
body.header-solid .btn-entry,
.scrolled .btn-entry{background:var(--grad-x);border-color:var(--ink)}
body.header-solid .btn-entry:hover,
.scrolled .btn-entry:hover{background:#fff}
.btn-fill{background:var(--grad-x)}
.btn-fill:hover{background:#fff}
.btn-more:hover{background:var(--grad-x)}


/* =====================================================================
   2026-09-18 カードの高さそろえ（小島さん 9/17 ③A・③B）
   ===================================================================== */
/* ③A 中途の募集ポジション: リード文が1行と3行で、下の「想定年収／勤務地／配属」が左右でずれる。
   一番長いリードに高さを合わせて、その下の項目をそろえる（スマホは1列なので対象外） */
@media(min-width:769px){
  .job-card{display:flex;flex-direction:column}
  .job-card .job-lead{flex:1 1 auto}
}
/* ③B 新卒「こんな人と働きたい」: 見出しとサブの行数差で本文の開始位置がずれる。
   どちらも2行ぶんの高さで固定してそろえる（スマホは1列なので対象外） */
@media(min-width:769px){
  .cards-even .info-card h3{line-height:1.5;min-height:3em}
  .cards-even .info-card .ic-sub{line-height:1.7;min-height:3.4em}
}

/* ③C インタビューカード: 部署名が2行になる人（角田さん）だけ名前の位置が下がるので、
   部署名を2行ぶんの高さで固定してそろえる（PC・スマホ共通） */
.member-role{line-height:1.5;min-height:3em}


/* =====================================================================
   2026-09-19 色を案③「掛け合わせ」に確定（全ページ）
   浅香さん 9/19 15:23「全体的な色テイストは、トップページがいい感じなので、
   これを他のページに展開しましょう」
   9/18 FIX の色から、青を1トーン濃くしたうえで大きい面にグラデーションをかけたもの。
   小さい要素（ボタン・数字）はグラデーションにせず単色で濃くする。
   元は `20260918-色パターン再調整/_作業用/css/pattern-gt-both.css`。
   戻すときはこの節（ここから末尾まで）を削除し、`img/jobmap-le*.svg` の
   #265994 を #2e6db4 に戻す（バックアップ: `_backup_20260919/`）。
   ===================================================================== */
:root{
  --ink:#265994;
  --ink-d:#184172;
  --navy:#265994;
  --navy-2:#3870ad;
  --blue:#265994;
  --soft:#e6eff9;
  --shade-rgb:10,32,63;
  --band-rgb:15,46,86;
  --msg-rgb:38,89,148;
  --blank:#dde8f4;

  --ink-2:#3870ad;
  --ink-d2:#265994;
  --grad:linear-gradient(180deg,#153f70 0%,#265994 52%,#3870ad 100%);
  --grad-x:linear-gradient(90deg,#153f70 0%,#265994 52%,#3870ad 100%);
  --grad-d:linear-gradient(180deg,#0e2f55 0%,#265994 100%);
}

.page-head::after{
  background:linear-gradient(180deg,rgba(var(--band-rgb),.92) 0%,rgba(var(--band-rgb),.86) 50%,rgba(var(--band-rgb),.80) 100%)}
.guide-card::after{
  background:linear-gradient(180deg,rgba(var(--band-rgb),.48) 0%,rgba(var(--band-rgb),.62) 55%,rgba(var(--band-rgb),.80) 100%)}
.guide-card:hover::after{
  background:linear-gradient(180deg,rgba(var(--band-rgb),.62) 0%,rgba(var(--band-rgb),.76) 55%,rgba(var(--band-rgb),.90) 100%)}
.message::after{
  background:linear-gradient(180deg,rgba(10,32,63,.94) 0%,rgba(38,89,148,.90) 60%,rgba(56,112,173,.88) 100%)}

@media(min-width:901px){
  .hero-overlay{background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.80) 0%,rgba(var(--shade-rgb),.74) 22%,rgba(var(--shade-rgb),.70) 31%,rgba(var(--shade-rgb),.58) 34%,
    rgba(var(--shade-rgb),.16) 36.5%,rgba(var(--shade-rgb),0) 38.5%,
    rgba(var(--shade-rgb),0) 82%,rgba(var(--shade-rgb),.34) 100%)}
}
@media(max-width:900px){
  .hero-overlay{background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.66) 0%,rgba(var(--shade-rgb),.42) 12%,rgba(var(--shade-rgb),.08) 22%,rgba(var(--shade-rgb),0) 30%,
    rgba(var(--shade-rgb),0) 44%,rgba(var(--shade-rgb),.42) 54%,rgba(var(--shade-rgb),.72) 68%,rgba(var(--shade-rgb),.82) 100%)}
}

/* ---- 小さい要素はグラデーションにしない（2026-09-18 富永さん指摘「ボタンと数字は濃くすればいい」） ----
   面が小さいと濃淡が出ず、にじんで見えるだけなので単色にする。
   グラデーションを残すのは大きい面（エントリー帯・フッター・メッセージ帯・見出し帯・ダイジェストの縦線）だけ。 */
.digest-node.is-active span{background:var(--ink);border-color:var(--ink)}
body.header-solid .btn-entry,
.scrolled .btn-entry{background:var(--ink);border-color:var(--ink)}
body.header-solid .btn-entry:hover,
.scrolled .btn-entry:hover{background:#fff}
.btn-fill{background:var(--ink)}
.btn-fill:hover{background:#fff}
.btn-more:hover{background:var(--ink);border-color:var(--ink)}
.flow-step .fnum{background:var(--ink)}

/* =========================================================
   2026-09-20 トップ画像の両端（浅香さん 9/20「案C＋Bの写真縮小なし」でFIX）
   横長の画面で写真の左右に地の紺が出ていたのを、写真を画面いっぱいに広げて解消する。
   あわせて拡大縮小（ケンバーンズ）を止めて静止させる（浅香さん「効果もいらないかも」）。
   スマホ（900px以下）は元から cover ＋ 静止なので変更なし。
   戻すときはこの節を削除する。
   ========================================================= */
@media(min-width:901px){
  .hero-bg{background-size:cover;animation:none;transform:none}
}

/* =========================================================
   2026-09-21 浅香さんの動画FB（9/20 21:18 録画・4分17秒）
   ① 下層ページの見出しとリード文を1サイズダウン
      「どのページも大きなメインのワードと、その後の小さいワードがある。
        これを1サイズ全部小さくできないか。MacBookのサイズだと文字で埋め尽くされてしまう」
   ② リード文の折り返しを本文幅いっぱいまで広げる
      「改行があんまりいいところでなっていない。右に広げてしまっていいんじゃないか」
   ③ トップのサブコピーを網掛け（暗幕）の中に収める
      「サイズ小さくして網掛けに入るように。横長くなってしまってもいい。
        上下で、もやってる部分とこの文字がちょうど見えるようにしたい」
   ④ トップの写真を上げて人物の体を広く見せる／SCROLL を消す
      「もう少し上げて、みんなの体をもう少し映る」「スクロールっていうボタンを消してしまった方がいい」
   戻すときはこの節を削除する（バックアップ: `_backup_20260921/`）。
   ========================================================= */

/* ①② 下層ページの見出し帯
   ★2026-09-21 富永さん指摘「タイトルをあと少し小さくコンパクトに」でもう1段下げた
     トップのキャッチ 49.6→44.8px／下層の見出し 52.8→41.6px（2026-09-21 富永さんが案3を選択） */
.page-head h1{font-size:clamp(1.65rem,3.95vw,2.6rem)}
.page-head .ph-lead{font-size:clamp(.9rem,1.35vw,1rem);max-width:none}

@media(min-width:901px){
  /* ③ サブコピーを1行に収め、暗幕の終わりを文字の下端に近づける
     ★暗幕の位置は画面の高さ（%）ではなく上からの距離（px）で決める（2026-09-21 レスポンシブ確認で変更）
       文字はヘッダーから固定の距離に並ぶので、%だと高さの低い画面（1280×720など）で暗幕が先に切れ、
       最終行の網掛けが .34 まで落ちていた。px にするとどの画面でも「文字の直下で消える」になる */
  .hero-lead2{max-width:none}
  .hero-overlay{background:linear-gradient(180deg,
    rgba(var(--shade-rgb),.80) 0,rgba(var(--shade-rgb),.74) 158px,rgba(var(--shade-rgb),.70) 213px,rgba(var(--shade-rgb),.58) 245px,
    rgba(var(--shade-rgb),.16) 265px,rgba(var(--shade-rgb),0) 280px,
    rgba(var(--shade-rgb),0) 82%,rgba(var(--shade-rgb),.34) 100%)}

  /* ④ 写真を上げて人物の体を広く出す（cover のまま位置だけ動かす） */
  .hero-bg{background-position:50% 22%}

  /* ③b サブコピーの最終行が網掛けの切れ目にかかっていたので行間を詰める
     （2026-09-21 富永さん指摘「最後の1行が絶妙に入りきってない」。
       最終行にかかる網掛けが 上.63→下.28 だったのを 上.70→下.60 に） */
  .hero-catch{font-size:clamp(2rem,4vw,2.8rem);line-height:1.08}
  .hero-lead{margin-top:.6em;line-height:1.5}
  .hero-lead2{margin-top:.3em;line-height:1.45}
}

/* ③c 幅の狭いPC（901〜1199px）ではサブコピーが1行に入りきらず「ここにあり／ます。」と割れるので、
      HTMLの2つ目の改行だけ生かして意味の切れ目で2行にする（2026-09-21 レスポンシブ確認で追加） */
@media(min-width:901px) and (max-width:1199px){
  .hero-lead2 br:nth-of-type(2){display:inline}
}

/* ④ SCROLL の表示を消す */
.hero-scroll{display:none}


/* =========================================================
   2026-09-21 浅香さん 13:17・13:20 の回答と追加調整
   ⑤ インタビューの水色は「案1のトーン」＝1トーン濃く（#e6eff9 → #d9e7f6）
      この色は全ページの薄い青の面（トップの数字の帯・メンバーの帯・.section.soft）にも連動する
   ⑥ 各ページのタイトルとリード文を「もう2サイズ小さく」（トップページはそのまま）
   ⑦ 仕事を知るの「経営者の挑戦に伴走し、人と企業の未来を動かす仕事だ。」は収まるなら1行に
      → 2つ目の改行を .br-narrow にして、1行に入りきらない幅のときだけ出す
   戻すときはこの節を削除し、works.html の br の class を外す（バックアップ: `_backup_20260921b/`）。
   ========================================================= */
:root{--soft:#d9e7f6}
/* ⑥ 下層のタイトル 41.6→36px／リード 16→15px（2案＝36/15と32/14を撮り比べ、32pxはページ内のセクション見出し38.4pxより
      明らかに小さくなりリード14pxも読みにくいので36/15を採用） */
.page-head h1{font-size:clamp(1.5rem,3.4vw,2.25rem)}
.page-head .ph-lead{font-size:clamp(.9rem,1.25vw,.9375rem)}   /* 最小14.4px＝スマホは元の大きさのまま */
.br-narrow{display:none}
@media(max-width:1023px){ .br-narrow{display:inline} }

/* =====================================================================
   2026-09-22 浅香さん 12:45 の依頼
   ① 下層のタイトル・リードを「もう1サイズ」小さく（36→32px／15→14.4px）。トップ・スマホはそのまま
      （スマホ幅では clamp の下限＝24px・14.4px に当たるので変わらない）
   ② スマホ版（900px以下）だけ、8ページのタイトルの下に「教育に本気で向き合う」と同じオレンジの線
      HTML側は各タイトルの中身を <span class="ttl-mark"> で包んだ（PCでは何も付かない）
   戻すときはこの節を削除し、span を外す（バックアップ: `_backup_20260922/`）
   ===================================================================== */
.page-head h1{font-size:clamp(1.5rem,3.4vw,2rem)}
.page-head .ph-lead{font-size:.9rem}
@media(max-width:900px){
  .ttl-mark{padding:0 .05em;box-shadow:inset 0 -.42em 0 rgba(254,115,61,.28);
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
}
/* 2026-09-22 小島さん9/21③: 仕事を知るの見出し写真をフロントロゴ2へ（セミナー風景①はトップの「働く環境」に移したため） */
.page-head.ph-works::before{background-image:url("../img/scene-le-frontlogo2.jpg")}

/* =====================================================================
   2026-09-23 浅香さん 9:56 の依頼【修正相談】スマホ版の余白改善
   スマホ（900px以下）だけ、メインコピー・リード文の下の余白を詰める（PCはそのまま）
   トップ: hero-content の下48px＋CONCEPTの上72px＝120px → 24px＋40px＝64px
   下層 : page-head の下34px＋次のセクションの上64px（インタビューは48px）＝98px → 20px＋32px＝52px
   戻すときはこの節を削除する（バックアップ: `_backup_20260923/`）
   ===================================================================== */
@media(max-width:900px){
  .hero-content{padding-bottom:24px}
  .hero + .concept{padding-top:40px}
  .page-head{padding-bottom:20px}
  .page-head + .section{padding-top:32px !important}   /* インタビューはHTMLに padding-top:48px が直書きのため !important */
}