@font-face{font-family:'Noto Sans JP';src:url('assets/fonts/NotoSansJP.woff2?rev=56-701949') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/Manrope.woff2?rev=56-701949') format('woff2');font-weight:200 800;font-display:swap}
:root{--ink:#202d35;--paper:#f8f5ee;--orange:#bb4b27}body{font-family:Manrope,'Noto Sans JP',sans-serif;font-size:18px;background:#192630}.site-header,.site-header.light,.site-header.scrolled{height:88px;color:var(--ink);background:#f8f5ee!important;border-bottom:1px solid #202d3518!important;gap:28px}.site-header .brand{font-size:28px;font-weight:800;letter-spacing:-1.3px;gap:12px}.site-header .brand img{width:36px;height:40px;border-radius:0}.site-header nav{font-size:16px;font-weight:600;gap:25px}.header-entry{font-size:16px;font-weight:700;background:#22343f;padding:17px 22px}.header-entry:hover{background:#993c20}.scene-stage,#experience{background:#192630}.kv-head{left:7%;top:31%;width:68%;text-align:left;font-size:clamp(42px,5.2vw,78px);font-weight:800;line-height:1.5;letter-spacing:-.055em;text-shadow:0 2px 22px #13212e}.hero-description{position:absolute;left:7%;top:62%;font-size:21px;line-height:1.95;text-align:left;font-weight:500;color:#fff;text-shadow:0 2px 12px #13212e}.kv-scroll{width:48px;height:48px;font-size:24px}.scene-controls{left:28px;bottom:24px;gap:14px;background:#f8f5ee;color:#202d35!important;padding:7px 16px 7px 7px;border-radius:30px}.scene-controls button{width:40px;height:40px;font-size:16px}.scene-controls a{font-size:14px;letter-spacing:0;font-weight:650}#white-portal{left:-10%;top:0;width:120%;height:100%;border-radius:0;box-shadow:none;filter:none;background:#f8f5ee}#intro-heading{color:#202d35;font-size:25px}#intro-heading h2{font-size:38px;font-weight:750;letter-spacing:-.035em}#intro-copy p{font-size:25px;line-height:2;letter-spacing:0;color:#202d35}#intro-logo{font-family:Manrope,sans-serif;font-weight:800;color:#bb4b27}.chapter-layer{text-align:left}.chapter-layer::before{display:none}.chapter-title,.chapter-body{left:7%;width:58%;max-width:750px;padding:34px 40px;background:#f8f5ee;color:#202d35;border-left:5px solid #c85832;box-shadow:0 10px 50px #14212c10}.chapter-title>p{font-size:22px;font-weight:700;margin-bottom:20px;color:#aa4326;letter-spacing:.08em}.chapter-title h2{font-size:clamp(30px,3.3vw,50px);font-weight:750;letter-spacing:-.04em;line-height:1.6}.chapter-body>p{font-size:22px;line-height:1.85;letter-spacing:0;font-weight:500}#chapter-1 .chapter-title,#chapter-1 .chapter-body{background:#182c37;color:#fff}#chapter-1 .chapter-title>p{color:#ffb68b}.chapter-link{font-size:17px;font-weight:700;width:260px;padding:15px 20px;background:#a84024;bottom:28px;left:auto;right:7%;transform:none}.scene-dots{right:22px}.scene-dots a{background:#f8f5ee;border-color:#d7d9d7}.scene-dots a span{background:#22343f;width:5px;height:5px}.scene-dots a.active{border:2px solid #a84024}.scene-dots a.active span{background:#a84024}#final-layer>h2{font-weight:800;letter-spacing:-.04em;text-shadow:0 2px 20px #182c37}#final-layer>a{font-size:18px;background:#f8f5ee;color:#202d35;font-weight:700}.jobs{background:#f8f5ee}.jobs-heading h2{font-size:60px;font-weight:750;letter-spacing:-.04em}.jobs-heading>p{font-size:21px}.job-meta{font-size:18px;margin:23px 0 10px}.job-card h3{font-size:30px;font-weight:750;letter-spacing:-.035em}.job-image>span{display:none}.job-image img{filter:saturate(.85)}.entry{background:#f1aa80;color:#202d35}.entry>h2{font-weight:800}.entry>p:not(.eyebrow){font-size:20px;line-height:1.95}.entry-link{font-size:clamp(30px,4vw,56px);font-weight:750;letter-spacing:-.04em}.footer-brand{font-size:30px;font-weight:800}.footer-brand>span,footer small{font-size:14px;color:#45535a;letter-spacing:0}dialog h2{font-weight:750}dialog p,dialog label{font-size:17px}.preview-note{font-size:14px!important}.dialog-action{font-size:17px}.mobile-menu:not([hidden]){font-size:24px}.scene-layer a:focus-visible{outline:3px solid #ffb68b}
@media(max-width:1050px){.site-header nav{display:none}.menu-button{display:flex;flex-direction:column;gap:6px;background:none;width:32px}.menu-button span{width:24px;height:2px;background:var(--ink)}.mobile-menu:not([hidden]){position:fixed;inset:88px 0 0;z-index:35;background:var(--paper);padding:45px 8%;display:flex;flex-direction:column;gap:30px}.chapter-title,.chapter-body{width:74%}}
@media(max-width:650px){.site-header,.site-header.scrolled{height:76px;gap:12px;padding:0 5%}.site-header .brand{font-size:23px;gap:8px}.site-header .brand img{width:27px;height:31px}.header-entry{font-size:14px;padding:12px;gap:8px;min-width:0}.menu-button{width:26px;flex-shrink:0}.mobile-menu:not([hidden]){inset:76px 0 0}.kv-head{left:6%;top:19%;width:88%;font-size:clamp(27px,8.4vw,42px);line-height:1.6;letter-spacing:-.055em}.hero-description{left:6%;top:36%;font-size:16px;line-height:1.9;letter-spacing:-.025em}.kv-scroll{bottom:11%;right:7%}.scene-controls{left:5%;bottom:18px;padding:5px 12px 5px 5px;gap:8px}.scene-controls button{width:36px;height:36px}.scene-controls a{font-size:14px}#intro-heading{font-size:20px;left:6%;right:6%}#intro-heading h2{font-size:26px;line-height:1.8}#intro-copy p{font-size:19px;line-height:2;letter-spacing:-.035em}#intro-logo{font-size:62px}.chapter-title,.chapter-body{left:6%;width:88%;max-width:none;padding:26px 21px;top:48%;border-left-width:3px}.chapter-title>p{font-size:19px;margin-bottom:19px;letter-spacing:.04em}.chapter-title h2{font-size:clamp(24px,7vw,32px);line-height:1.65;letter-spacing:-.05em}.chapter-body>p{font-size:17px;line-height:1.9;letter-spacing:-.035em}.chapter-link{bottom:80px;right:6%;width:235px;font-size:16px;padding:12px 18px}.scene-dots{display:none}#final-layer>h2{font-size:38px}#final-layer>a{font-size:17px}.jobs-heading h2{font-size:42px;letter-spacing:-.04em}.jobs-heading>p{font-size:18px}.job-meta{font-size:17px}.job-card h3{font-size:25px}.entry>h2{font-size:39px}.entry>p:not(.eyebrow){font-size:17px;letter-spacing:-.035em}.entry-link{font-size:29px;gap:8px}.footer-brand{font-size:27px}dialog p,dialog label{font-size:16px}}
@media(prefers-reduced-motion:reduce){.kv-head,.hero-description{color:#202d35;text-shadow:none}.hero-description{margin:25px 0}.chapter-title,.chapter-body{padding:25px;width:auto;max-width:none}.chapter-body>p{font-size:18px}.chapter-title h2{font-size:28px}#intro-copy p{font-size:19px}#final-layer>h2{text-shadow:none}.scene-layer{color:#202d35}.scene-stage{padding-top:120px}}
.chapter-title h2{text-wrap:balance;word-break:auto-phrase;overflow-wrap:normal}
@media(max-width:650px){.chapter-title h2{font-size:24px;letter-spacing:-.055em}.chapter-title,.chapter-body{padding:25px 16px}.hero-description{font-size:16px}}
/* Photographic art direction: warm white, ink and a restrained vermilion. */
:root{--paper:#f6f5f0;--ink:#242623;--orange:#b63926}.site-header,.site-header.light,.site-header.scrolled{background:#f6f5f0!important}.site-header .brand img{display:none}.site-header .brand{font-size:30px;letter-spacing:-1.7px}.header-entry{background:transparent;color:#242623;border-bottom:1px solid #242623;padding:12px 0;min-width:136px}.header-entry:hover{background:transparent;color:#b63926}.hero-photograph{position:absolute;inset:88px 0 0 44%;overflow:hidden;transform-origin:80% 55%;will-change:transform}.hero-photograph img{width:100%;height:100%;object-fit:cover;object-position:57% center;filter:saturate(.62)}#kv-layer{background:#f6f5f0;color:#242623}.kv-head{top:27%;left:6%;width:88%;font-size:clamp(48px,5.8vw,88px);line-height:1.55;letter-spacing:-.065em;font-weight:750;text-shadow:none}.explode-line{width:max-content;background:#f6f5f0;padding:0 .18em 0 0}.hero-description{left:6%;top:auto;bottom:19%;font-size:18px;line-height:2;color:#242623;text-shadow:none;width:36%;letter-spacing:-.025em}.kv-scroll{background:#f6f5f0;color:#242623;border-color:#242623;right:4%;bottom:5%}.scene-controls{background:#f6f5f0;border-radius:0;padding:6px 12px 6px 0;left:6%}.scene-controls button{border:0;border-right:1px solid #b5b5af;border-radius:0;width:38px}.chapter-layer::before{display:block;background:linear-gradient(90deg,#f6f5f0 0%,#f6f5f0 47%,rgba(246,245,240,.92) 54%,transparent 74%)}#chapter-1::before{background:linear-gradient(90deg,#182c37 0%,#182c37 47%,rgba(24,44,55,.93) 54%,transparent 76%)}.chapter-title,.chapter-body,#chapter-1 .chapter-title,#chapter-1 .chapter-body{background:transparent;box-shadow:none;border:0;padding:0;left:6%;width:54%;max-width:720px}.chapter-title>p{color:#b63926;font-size:20px;margin-bottom:38px;font-weight:650;letter-spacing:0}.chapter-title h2{font-size:clamp(32px,3.6vw,55px);line-height:1.65;letter-spacing:-.05em}.chapter-body>p{font-size:23px;line-height:1.95}.chapter-link{background:#f6f5f0;color:#242623;border-bottom:1px solid #242623;right:6%;padding:14px 0;width:235px}.chapter-link b{border:0}.scene-dots a{background:transparent;border:0;border-radius:0}.scene-dots a.active{border:0}.scene-dots a span{background:#b63926}.scene-dots a.active span{width:16px;height:2px;border-radius:0}.entry{background:#e8e7df}.entry-link{color:#b63926}.job-card:hover .job-image{transform:none}.job-image img{filter:saturate(.6)}.jobs-heading h2 .orange{display:none}.jobs-heading{border-top:1px solid #242623;padding-top:30px}.job-grid{gap:80px 45px}.job-card:nth-child(even){padding-top:100px}.job-image{height:350px}.footer-brand{letter-spacing:-1.7px}
@media(max-width:650px){.site-header .brand{font-size:25px}.header-entry{min-width:0;font-size:13px}.hero-photograph{inset:76px 0 0 24%;height:61%}.kv-head{top:19%;left:6%;font-size:clamp(28px,8.8vw,39px);line-height:1.8;width:94%;letter-spacing:-.07em}.hero-description{width:88%;bottom:17%;font-size:16px;line-height:1.9}.kv-scroll{bottom:4%;width:42px;height:42px}.chapter-layer::before{background:linear-gradient(90deg,#f6f5f0f5,#f6f5f0ed 67%,#f6f5f09c)}#chapter-1::before{background:linear-gradient(90deg,#182c37fa,#182c37ed 67%,#182c37a8)}.chapter-title,.chapter-body{left:7%;width:86%;padding:0}.chapter-title>p{font-size:20px;margin-bottom:30px}.chapter-title h2{font-size:27px;letter-spacing:-.055em}.chapter-body>p{font-size:18px;line-height:1.95}.chapter-link{bottom:82px;width:220px;font-size:16px}.job-card:nth-child(even){padding-top:0}.job-image{height:300px}.job-grid{gap:50px}.jobs-heading{padding-top:20px}.entry-link{font-size:28px}}
@media(prefers-reduced-motion:reduce){.hero-photograph{position:relative!important;height:300px;width:100%!important;margin-bottom:28px}.hero-description{width:auto}.chapter-layer::before{display:none}.chapter-title,.chapter-body{width:auto}#chapter-1 .chapter-title,#chapter-1 .chapter-body{color:#242623}}
/* Preserve the approved first view. */
#kv-layer{background:transparent;color:white}.kv-head{left:7%;top:31%;width:68%;font-size:clamp(42px,5.2vw,78px);font-weight:800;line-height:1.5;letter-spacing:-.055em;text-shadow:0 2px 22px #13212e}.explode-line{width:auto;background:none;padding:0}.hero-description{left:7%;top:62%;bottom:auto;width:auto;font-size:21px;line-height:1.95;color:white;text-shadow:0 2px 12px #13212e}.kv-scroll{background:transparent;color:white;border-color:#ffffff66;right:10%;bottom:5%}
@media(max-width:650px){.kv-head{left:6%;top:19%;width:88%;font-size:clamp(27px,8.4vw,42px);line-height:1.6}.hero-description{left:6%;top:36%;font-size:16px;line-height:1.9}.kv-scroll{bottom:11%;right:7%}}
@media(prefers-reduced-motion:reduce){.kv-head,.hero-description{color:#202d35;text-shadow:none}}
/* Source site's actual palette: orange #FF8A00, yellow #FFB800, white, #333333. */
:root{--paper:#fff;--ink:#333;--orange:#ff8a00}body{color:#333;background:#333}.site-header,.site-header.light,.site-header.scrolled{background:#fff!important;color:#333}.header-entry{color:#333;border-color:#333}.header-entry:hover{color:#333;border-bottom-color:#ff8a00}.scene-stage,#experience{background:#333}.chapter-layer::before{background:linear-gradient(90deg,#fff 0%,#fff 47%,rgba(255,255,255,.94) 54%,transparent 74%)}#chapter-1::before{background:linear-gradient(90deg,#333 0%,#333 47%,rgba(51,51,51,.94) 54%,transparent 76%)}.chapter-title,.chapter-body{color:#333}.chapter-title>p{color:#333;border-top:4px solid #ff8a00;padding-top:16px;width:max-content}#chapter-1 .chapter-title>p{color:#fff;border-color:#ffb800}.chapter-link{background:#ffb800;color:#333;border:0;padding:14px 18px}.scene-controls{background:#fff;color:#333!important}.scene-dots a span,.scene-dots a.active span{background:#ff8a00}#white-portal{background:#fff}#intro-heading,#intro-copy p{color:#333}#intro-logo{color:#ff8a00}.jobs,footer{background:#fff}.entry{background:linear-gradient(180deg,#ff8a00,#ffb800);color:#333}.entry-link{color:#333}.footer-brand>span,footer small{color:#333}.jobs-heading{border-color:#333}.job-image>b{background:#fff;color:#333}.job-card:hover .job-image>b{background:#ffb800;color:#333}dialog{background:#fff;color:#333}.dialog-action,.submit{background:#333;color:#fff}#final-layer>a{background:#ffb800;color:#333}.kv-head,.hero-description{text-shadow:none}
@media(max-width:650px){.chapter-layer::before{background:linear-gradient(90deg,#fffffff7,#fffffff0 67%,#ffffffbd)}#chapter-1::before{background:linear-gradient(90deg,#333333fa,#333333f2 67%,#333333c9)}}
.site-header .brand{font-size:27px;letter-spacing:-1.4px;font-weight:800}#intro-logo{font-size:clamp(38px,7.5vw,115px)}
@media(max-width:650px){.site-header .brand{font-size:21px;letter-spacing:-1px}#intro-logo{font-size:43px}.hero-description{font-size:15px;letter-spacing:-.04em}}
/* Three open frames: the same motif as the first-view object. */
.site-header .brand img{display:block;width:44px;height:44px;border-radius:0;mix-blend-mode:normal;flex-shrink:0}.site-header .brand{gap:11px}.footer-brand{display:flex;align-items:center;gap:14px}.footer-brand>img{width:54px;height:54px}.footer-brand>.footer-wordmark{font:800 28px Manrope,sans-serif;letter-spacing:-1.4px;color:#333;margin:0}.footer-wordmark>span{display:block;font:400 14px 'Noto Sans JP',sans-serif;letter-spacing:0;margin-top:7px}
@media(max-width:650px){.site-header .brand img{width:32px;height:32px}.site-header .brand{gap:7px;font-size:19px}.site-header,.site-header.scrolled{gap:10px;padding-left:4%;padding-right:4%}.header-entry{font-size:12px}.footer-brand>.footer-wordmark{font-size:25px}}
/* Primary recruitment actions remain distinct from navigation. */
.header-entry{background:#ff8a00;color:#222;border:0;padding:17px 23px;font-size:16px;font-weight:800;min-width:158px;gap:24px}.header-entry:hover{background:#ffb800;color:#222}.header-entry>span{font-size:22px}.chapter-link{background:#ff8a00;color:#222;font-weight:800;min-height:58px;width:270px;padding:15px 22px;border:2px solid #fff;box-shadow:0 4px 16px #0002}.chapter-link:hover{background:#ffb800}.chapter-link b{font-size:23px}.entry-link{background:#333;color:#fff;border:0;padding:28px 32px;margin-top:40px;font-size:clamp(27px,3.5vw,48px)}.entry-link:hover{background:#222}#final-layer>a{background:#ff8a00;color:#222;border:2px solid #fff;padding:18px 30px;font-weight:800}.submit{background:#ff8a00;color:#222;font-weight:800}
@media(max-width:650px){.header-entry{font-size:13px;padding:12px 13px;min-width:0;gap:8px;min-height:46px}.header-entry>span{font-size:18px}.chapter-link{width:244px;min-height:54px;font-size:16px;padding:12px 18px}.entry-link{padding:22px 18px;font-size:25px}.site-header,.site-header.scrolled{gap:8px}.site-header .brand{font-size:18px;gap:5px}.site-header .brand img{width:28px;height:28px}}
/* Shared action alignment: normalize line boxes and center icons. */
.header-entry,.chapter-link,#final-layer>a,.entry-link,.submit,.dialog-action{display:flex;align-items:center;justify-content:space-between;line-height:1.4;text-align:left;box-sizing:border-box}.header-entry,.chapter-link,#final-layer>a{white-space:nowrap;flex-wrap:nowrap}.header-entry>span,.chapter-link>b,#final-layer>a>span,.entry-link>b{display:grid;place-items:center;flex:0 0 1.4em;width:1.4em;height:1.4em;line-height:1;margin:0;align-self:center}.entry-link{flex-wrap:nowrap;gap:16px;letter-spacing:-.035em}.submit{justify-content:center;text-align:center;min-height:56px}.dialog-action{justify-content:center;text-align:center}.chapter-link>span{line-height:1.4}.scene-controls button{display:grid;place-items:center;line-height:1;padding:0}
@media(max-width:360px){.site-header .brand{font-size:16px}.site-header .brand img{width:24px;height:24px}.header-entry{font-size:12px;padding:10px;gap:4px}.menu-button{width:24px}.entry-link{font-size:23px;padding:20px 14px}.hero-description{font-size:14px}.chapter-title h2{font-size:25px}}
/* White action labels require a deeper orange than the brand accent. */
.header-entry,.chapter-link,#final-layer>a,.submit{background:#ad4500;color:#fff}.header-entry:hover,.chapter-link:hover,#final-layer>a:hover,.submit:hover{background:#893600;color:#fff}.header-entry{font-weight:700}.chapter-link{font-weight:700}.entry-link{background:#333;color:#fff}.entry-link:hover{background:#222;color:#fff}
.entry-link{white-space:nowrap}.header-entry{flex-shrink:0}.header-entry>span{font-size:18px;flex-basis:20px;width:20px;height:20px}.entry-link>b{font-size:1em}
@media(max-width:650px){.entry-link{font-size:clamp(19px,5.5vw,25px);gap:8px}.entry>h2{font-size:clamp(30px,8.3vw,39px)}.header-entry{padding-left:10px;padding-right:10px}}
/* Recruitment CTA: original charcoal, orange and white only. */
.header-entry,.chapter-link,#final-layer>a,.submit{background:#333;color:#fff;border:2px solid #ff8a00}.header-entry:hover,.chapter-link:hover,#final-layer>a:hover,.submit:hover{background:#222;color:#fff;border-color:#ffb800}.header-entry{box-shadow:inset 4px 0 #ff8a00}.entry-link{background:#333;color:#fff;border:2px solid #333}.entry-link:hover{background:#222;color:#fff;border-color:#222}.chapter-link{box-shadow:0 4px 16px #0002}
@media(max-width:650px){
.site-header,.site-header.light,.site-header.scrolled{height:76px}
.mobile-menu:not([hidden]){top:76px}
.hero-description{right:6%;width:auto}
.chapter-title,.chapter-body{top:calc(76px + (100% - 220px)/2);max-height:calc(100% - 232px);overflow-y:auto;overscroll-behavior:contain;padding:4px 0}
.chapter-title h2{font-size:clamp(23px,6.6vw,29px)}
.chapter-body>p{font-size:17px;line-height:1.8}
.chapter-link{bottom:76px}
}
@media(max-height:600px) and (min-width:651px){
.chapter-title,.chapter-body{top:calc(88px + (100% - 180px)/2);max-height:calc(100% - 190px);overflow-y:auto}
.chapter-title h2{font-size:32px}.chapter-title>p{margin-bottom:15px}.chapter-body>p{font-size:18px;line-height:1.6}
}
.scene-controls{gap:0;padding:0;background:#fff}.scene-controls button{width:auto;min-width:96px;height:44px;padding:0 12px;border:0;border-right:1px solid #ccc;font-size:14px;line-height:1.4;white-space:nowrap}.scene-controls a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;letter-spacing:0}
@media(max-width:650px){.scene-controls{left:6%;bottom:16px}.scene-controls button{min-width:88px;padding:0 10px;font-size:13px}.scene-controls a{font-size:13px;padding:0 10px}}

/* ヘッダーのエントリーだけ色を分ける。
   元サイトは .header-nav-list-item-entry が #FF8A00 で、ナビの他ボタンと色が違う。
   文字色は元サイトと同じ白。
   直前のルールで付いていたオレンジの枠と内側の影は、同色のオレンジ地では見えず
   ホバー時にだけ輪郭が出てしまうので打ち消す。余白・形・矢印は触っていない。 */
.header-entry{
  background:#FF8A00;
  color:#fff;
  border:0;
  box-shadow:none;
}
.header-entry:hover{ background:#FFB800; color:#fff; }

/* ヘッダーが横に動く件。原因はスクロールバーの出入りで実効の画面幅が変わること。
   position:fixed + width:100% は「スクロールバーを含まない幅」に追従するため、
   バーが消えた瞬間に右端のボタンがその幅ぶん右へ飛ぶ。
   html だけに gutter を置いても body 側で overflow を書き換えられると効かないので、
   html と body の両方で領域を固定し、ヘッダー自体も vw ではなく 100% に揃える。 */
/* 撤去: html{ scrollbar-gutter:stable } — ビューポート幅を変えるため 3D 描画域に影響しうる */

/* 固定ヘッダーを width:100% で置くと、基準幅（スクロールバーを含むか否か）が
   変わった瞬間に右端が動く。左右の端を両方ピン留めすれば幅の計算自体が消える。 */
.site-header{
  left:0;
  right:0;
  width:auto;
  max-width:none;
}

/* position:fixed の要素に transform を付けると合成レイヤーに移るが、
   端末によってはスクロール中だけ位置がずれる原因になる。
   こちらで追加したものなので取り消す。 */
.site-header,
.site-header .header-entry,
.site-header .brand,
.site-header nav{
  transform:none;
  will-change:auto;
}

/* スマホで固定ヘッダーが横に動く件。
   横方向にわずかでもスクロールできる状態だと、position:fixed はレイアウト
   ビューポート基準で置かれるため、縦スクロールの慣性に引かれて左右にぶれる。
   横スクロールを成立させないことで構造的に止める。
   overflow-x:hidden は position:sticky（この中で2箇所使用）を壊すので clip を使う。
   clip 非対応の古い端末向けに hidden を先に書き、対応端末では clip で上書きする。 */
/* 撤去: html,body の overflow-x — ルートにクリップ文脈を作り sticky/canvas に影響しうる */
/* 固定ヘッダーは視覚ビューポートの端に貼り付ける */
.site-header{
  left:0;
  right:0;
  width:auto;
  max-width:100%;
}
/* Scroll-state classes must not change the header's geometry. */
.site-header,.site-header.light,.site-header.scrolled{height:88px;gap:28px;transition:none}
@media(max-width:900px){.site-header,.site-header.light,.site-header.scrolled{gap:20px}}
@media(max-width:650px){.site-header,.site-header.light,.site-header.scrolled{height:76px;gap:8px;padding:0 4%}}

/* Center the actual arrow geometry, independent of font metrics. */
.kv-scroll{display:grid;place-items:center;padding:0;line-height:1;font-size:0}
.kv-scroll>svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* Separate the entry action from the menu trigger. */
@media(max-width:1050px){.site-header .menu-button{margin-left:12px;flex-shrink:0}}
@media(max-width:360px){.site-header .brand{font-size:16px;gap:4px}.site-header .brand img{width:24px;height:24px}.site-header .header-entry{min-width:0;padding-left:9px;padding-right:9px;gap:4px;font-size:12px}.site-header .menu-button{margin-left:10px;width:24px}}

/* ============================================================
   MY PAGE ログイン（元サイトの #modalArea を踏襲）
   ============================================================ */
.header-mypage{
  background:#FFB800;            /* 元サイトの .header-nav-list-item-mypage と同色 */
  color:#222;
  border:0;
  font:inherit;
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  padding:17px 22px;
  min-width:116px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .3s cubic-bezier(.3,.26,.38,1);
}
.header-mypage:hover{ background:#FF8A00; color:#fff; }
@media (max-width:820px){ .header-mypage{ display:none; } }

.menu-mypage{
  display:block; width:100%; margin-top:18px;
  background:#FFB800; color:#222; border:0; font:inherit; font-weight:700;
  padding:16px; cursor:pointer;
}

/* 既存の dialog{} の共通スタイル（背景・余白・幅・max-height・暗幕）に乗せる。
   MY PAGE 固有の指定だけをここに書く。 */
#mypage-dialog{ width:min(440px,92vw); }
#mypage-dialog h2{ font-size:22px; margin:0 0 6px; }
.mypage-form{ display:block; }
.mypage-form .submit{
  width:100%; justify-content:center; margin-top:26px;
  background:#FF8A00; color:#fff; border:0; padding:16px; font-weight:700; cursor:pointer;
}
.mypage-form .submit:hover{ background:#FFB800; }
.mypage-signup{ margin:16px 0 0; font-size:12px; text-align:center; }
.mypage-signup a{ text-decoration:underline; }
.mypage-form .note{ margin:14px 0 0; font-size:11px; line-height:1.9; color:var(--muted); min-height:1em; }
@media (max-width:650px){ #mypage-dialog h2{ font-size:19px; } }

/* 職種ダイアログ内の「募集要項を見る」（下層ページへの導線） */
.dialog a.text-link{ display:inline-flex; align-items:center; gap:8px; }

/* ============================================================
   タップ領域の確保（見た目は変えず、当たり判定だけ 44x44 にする）
   ============================================================ */
/* ハンバーガー: 線の見た目はそのまま、押せる範囲を広げる */
.menu-button{
  min-width:44px;
  min-height:44px;
  justify-content:center;
}
/* 章のドット: 点の大きさは変えず、擬似要素で当たり判定だけ広げる */
.scene-dots a{ position:relative; }
.scene-dots a::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
}

/* ============================================================
   ボタンの体系を2段階に統一する
     主要導線（エントリー）  … #FF8A00
     それ以外のボタン        … #333 + 2px 枠（既存の体系）
   文字サイズと太さのばらつき（17/18/31px・700/750/800）もここで揃える。
   .entry-link だけは見出し相当の大きさなので寸法は保つ。
   ============================================================ */

/* 主要導線 */
.header-entry{
  background:#FF8A00;
  color:#fff;
  border:0;
  box-shadow:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
}
.header-entry:hover{ background:#FFB800; color:#fff; }

/* MY PAGE は副次導線なので他と同じ #333 に落とす */
.header-mypage{
  background:#333;
  color:#fff;
  border:2px solid #333;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  padding:15px 22px;
}
.header-mypage:hover{ background:#222; border-color:#222; color:#fff; }
.menu-mypage{
  background:#333; color:#fff; border:2px solid #333;
  font-size:14px; font-weight:700;
}

/* それ以外のボタン: 太さを 700 に揃える */
.chapter-link,
.submit,
#final-layer > a{
  font-weight:700;
}
.chapter-link,
#final-layer > a{
  font-size:16px;
}
.submit{ font-size:16px; }

/* エントリーセクションの大きいリンクは見出し相当。太さだけ揃える */
.entry-link{ font-weight:700; }

/* ============================================================
   ボタンの「形」を統一する
   これまで 枠0/2px、余白 13〜30px、矢印の有無と大きさ、並び方がばらばらだった。
   角丸なし・枠2px・同じ余白・同じ矢印サイズに揃える。
   .entry-link は見出し相当の大きさなので、余白と文字だけ別扱いにする。
   ============================================================ */
.header-entry,
.header-mypage,
.chapter-link,
.submit,
#final-layer > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 22px;
  min-height:54px;
  border-width:2px;
  border-style:solid;
  border-radius:0;
  box-sizing:border-box;
  line-height:1.4;
  text-align:left;
}
/* 主要導線だけ色で区別。枠は同じ太さで色だけ合わせる */
.header-entry{ border-color:#FF8A00; }
.header-entry:hover{ border-color:#FFB800; }
.header-mypage,
.chapter-link,
.submit,
#final-layer > a{ border-color:#333; }
.header-mypage:hover,
.chapter-link:hover,
.submit:hover,
#final-layer > a:hover{ border-color:#222; }

/* 送信は幅いっぱい・中央寄せのまま形だけ揃える */
.submit{ justify-content:center; gap:12px; }

/* 矢印の大きさを揃える */
.header-entry > span,
.chapter-link > b,
#final-layer > a > span{
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  font-size:16px;
  line-height:1;
}

/* 見出し相当の大きいリンクは余白だけ別。枠と並びは同じ体系に乗せる */
.entry-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:2px solid #333;
  border-radius:0;
  box-sizing:border-box;
  line-height:1.3;
  text-align:left;
}
.entry-link:hover{ border-color:#222; }
.entry-link > b{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:30px;
  line-height:1;
}

@media (max-width:650px){
  .header-entry,
  .header-mypage,
  .chapter-link,
  .submit,
  #final-layer > a{ padding:13px 16px; gap:12px; min-height:48px; }
  .entry-link > b{ width:34px; height:34px; font-size:24px; }
}

/* ============================================================
   モバイルでヘッダーが画面幅に収まらない問題の修正
   上の「ボタン形状統一」ブロックが max-width:650px の縮小指定より
   後ろにあるため上書きしてしまい、ヘッダー内の要素が合計478pxになり
   ハンバーガーボタンが画面外（left=434px / 390px幅）へ追い出されていた。
   結果モバイルメニューが開けなくなっていたので、ここで最終的に抑える。
   MY PAGE はモバイルメニュー内（.menu-mypage）に同じものがあるため、
   ヘッダー側は隠して重複をなくす。
   ============================================================ */
@media (max-width:650px){
  .site-header{ gap:10px; }
  .site-header .header-mypage{ display:none; }
  .site-header .header-entry{
    font-size:13px;
    padding:10px 12px;
    gap:6px;
    min-height:44px;
    min-width:0;
    flex:0 1 auto;
  }
  .site-header .header-entry > span{ flex:0 0 1em; width:1em; height:1em; }
  .site-header .menu-button{ margin-left:0; flex:0 0 44px; }
}
@media (max-width:380px){
  .site-header .header-entry{ font-size:12px; padding:10px 9px; gap:4px; }
}

/* ============================================================
   日本語の折り返し位置
   既定では文字単位で折れるため「…行いま / す。」のように語中で切れる。
   word-break:auto-phrase は文節境界で折る（Chrome 119+）。
   line-break:strict は長音符・小書き仮名が行頭に来るのを防ぐ。
   どちらも継承プロパティなので html に一度だけ指定する。
   未対応ブラウザは値を無視するだけで、従来どおりの表示になる。
   ============================================================ */
html{
  word-break:auto-phrase;
  line-break:strict;
}