/* =========================================================
   下層ページ共通パーツ（SSAについて／静岡で働きたい方へ …）
   色・書体・余白のトークンは top.css 側が持っている。
   ページ固有の部品は about.css / recruit.css へ。
   ========================================================= */

/* 固定ヘッダーの分だけ手前で止める（トップの 02 から #business へ飛んでくる）*/
[id]{scroll-margin-top:92px;}

/* ---------- パンくず ---------- */
/* ヒーローの絵は配置済み要素なので、放置するとパンくずの上に乗ってしまう */
.breadcrumb{position:relative;z-index:1;
            display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
.breadcrumb a:hover{color:var(--blue-600);}
.breadcrumb em{font-style:normal;color:var(--ink);}
.breadcrumb i{font-style:normal;color:var(--blue-300);}

/* ---------- 下層ヒーロー ---------- */
/* 絵は --page-hero-img で各ページから差す */
.page-hero{position:relative;overflow:hidden;padding:26px 0 52px;min-height:520px;}
/* 絵はトップと同じ、文字の背後に敷くレイヤー。
   基準を画面幅ではなくコンテンツ幅に取るのもトップと揃える（構図がずれない） */
.page-hero__art{position:absolute;top:0;bottom:0;right:0;z-index:0;pointer-events:none;
                left:max(var(--gut),calc(50% - var(--container) / 2));
                display:flex;align-items:center;justify-content:flex-end;}
/* 絵の大きさはヒーローの高さで決め、右端に抜く。
   （幅基準の cover だと、画面を広げたときに絵だけが巨大化してしまう）*/
.page-hero__img{width:100%;height:100%;
                background:var(--page-hero-img) right center/auto 100% no-repeat;
                /* 絵の地色が #fdfdfd で、ページの白との境目が線に見える。
                   再圧縮で画質を落とさないよう、描画時に 255 まで持ち上げて消す */
                filter:brightness(1.008);}
.page-hero__inner{position:relative;z-index:1;padding-top:48px;max-width:640px;}
.page-hero h1{font-family:var(--font-en);font-size:clamp(46px,8.6vw,104px);font-weight:800;
              line-height:1;letter-spacing:var(--track-hero);color:var(--ink);white-space:nowrap;
              transform:scaleX(var(--cond-x));transform-origin:left center;}
.page-hero h1 em{font-style:normal;background:var(--grad-brand);
                 -webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero__jp{display:flex;align-items:center;gap:12px;margin-top:22px;
               font-size:19px;font-weight:700;letter-spacing:.16em;color:var(--ink);}
.page-hero__lead{margin-top:24px;font-size:14.5px;line-height:2;color:var(--muted);}

/* 下層はトップほど間を空けなくてよい。ここは sub.css なのでトップには効かない */
.section{padding:76px 0;}
.page-hero + .section{padding-top:68px;}

/* ---------- セクション見出し ---------- */
.sec-head{margin-bottom:32px;}
.sec-head h2{display:flex;align-items:center;gap:10px;margin-top:8px;
             font-size:28px;font-weight:700;line-height:1.5;color:var(--ink);}
.sec-head p{margin-top:14px;font-size:14px;line-height:2;color:var(--muted);max-width:62ch;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ac-green);flex:none;}

/* 素材待ちのプレースホルダ */
.ph{display:grid;place-items:center;align-content:center;gap:6px;width:100%;
    border:1px dashed var(--blue-300);border-radius:12px;background:var(--bg-tint);
    color:#6f89a2;font-size:12.5px;font-weight:700;text-align:center;line-height:1.8;padding:16px;}
.ph small{font-size:10.5px;font-weight:400;color:#8ba1b6;}
.ph--hero{height:84%;aspect-ratio:16/9;width:auto;margin-left:auto;}

/* 白地と色地を交互に並べるための修飾子 */
.section--soft{background:var(--bg-soft);}

/* トップではバナー帯の上は白地なので padding-top:0 でよいが、
   下層では直前が色地のことがあるので、その場合だけ余白を戻す */
.mission + .banners-section,
.schedule + .banners-section,
.section--soft + .banners-section{padding-top:76px;}

@media (max-width:1000px){
  .page-hero{padding:20px 0 200px;min-height:0;}
  .page-hero__inner{max-width:none;padding-top:22px;}
  /* 絵は狭い画面でも背景のまま。文字が読めるよう右下に逃がして薄くする */
  .page-hero__art{left:0;opacity:.55;}
  .page-hero__img{background-position:right bottom;background-size:auto 62%;}
  .ph--hero{height:auto;width:100%;margin-left:0;}
  /* 素材待ちの枠は薄くせず、下に空けてある 210px の帯へ収める（文字と重ねない） */
  .page-hero__art--ph{align-items:flex-end;opacity:1;}
  .page-hero__art--ph .ph--hero{height:186px;width:auto;aspect-ratio:16/9;margin:0 auto 12px;}
  .section{padding:56px 0;}
  .page-hero + .section{padding-top:52px;}
  .mission + .banners-section,
  .schedule + .banners-section,
  .section--soft + .banners-section{padding-top:56px;}
}
@media (max-width:600px){
  .sec-head h2{font-size:23px;}
}