/* =========================================================================
   layout.css — HOMEの実寸レイアウト骨格（PC基準）
   ※ base.css は“無害ミニマム”のまま。見た目の指定は本ファイルで行う。
   ※ HTML想定クラス： .l-header, .p-hero, .after-hero, .section--service, .section--recruit, .cards, .card, .l-footer
   ========================================================================= */

/* -------------------- 共通コンテナ -------------------- */
/* 1330px上限（ヘッダー・ヒーロー用） */
.container-1330 {
  max-width: 1330px;
  margin-inline: auto;
}

/* 1000px上限（本文用）※左右20pxパディング → 実表示960px */
.container-1000 {
  max-width: 1000px;
  padding-inline: 20px;
  margin-inline: auto;
}

/* -------------------- ヘッダー -------------------- */
/* 高さ122px、ロゴ高さ63px想定 */
.l-header {
  height: 122px;
  display: flex;
  align-items: center;
}
.l-header .logo img { height: 63px; }

/* ==== Fixed Header (2段階) ==== */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  height: 120px;                     /* 先頭時 */
  background: rgba(255,255,255,1);   /* 先頭時：白100% */
  color: #0a0f1f; z-index: 10000;
  transition: height .2s ease, background-color .2s ease, background .2s ease;
}



.site-header__inner{
  height: 100%;
  max-width: 1330px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* ロゴ：先頭80px → スクロール後40px */
.logo img{ display:block; height: 80px; transition: height .2s ease; }

/* スクロール後（1pxでも下げたら） */
.site-header.is-scrolled{
  height: 64px;
  background: rgba(255,255,255,.85); /* 白85% */
}
.site-header.is-scrolled .logo img{ height: 40px; }


/* main の押し下げ量を状態で切替（アニメ付き） */
main{
  padding-top: 120px;              /* 先頭時はヘッダー高と同じだけ下げる */
  transition: padding-top .2s ease;
}
body.is-scrolled main{
  padding-top: 64px;               /* スクロール後は縮小後のヘッダー高 */
}
@media (max-width: 767px){
  /* SPでも仕様は同じ（必要なら値調整可） */
  main{
  padding-top: 120px;              /* 先頭時はヘッダー高と同じだけ下げる */
  transition: padding-top .2s ease;
}
body.is-scrolled main{
  padding-top: 64px;               /* スクロール後は縮小後のヘッダー高 */
}
}

/* ==== G-Nav Overlay ==== */
.gnav{
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease; z-index: 9999;
}
@media (max-width: 767px){ .gnav{ top:56px; } }
.gnav.is-open{ opacity:1; pointer-events:auto; }

.gnav__scrim{
  position: absolute; inset: 0;
  background: rgba(7,36,97,.86); /* 透け前提の濃紺 */
  clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
  transition: clip-path .30s ease;
}
.gnav.is-open .gnav__scrim{
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%);
}

.gnav__list{
  position: relative;
  width: min(920px, 92vw);
  margin: clamp(40px,10vh,120px) auto 0;
  list-style: none; padding: 0;
}
.gnav__list li{ opacity:0; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease; }
.gnav.is-open .gnav__list li{ opacity:1; transform:none; }
.gnav.is-open .gnav__list li:nth-child(1){ transition-delay:.15s }
.gnav.is-open .gnav__list li:nth-child(2){ transition-delay:.25s }
.gnav.is-open .gnav__list li:nth-child(3){ transition-delay:.35s }
.gnav.is-open .gnav__list li:nth-child(4){ transition-delay:.45s }
.gnav.is-open .gnav__list li:nth-child(5){ transition-delay:.55s }
.gnav.is-open .gnav__list li:nth-child(6){ transition-delay:.65s }









/* -------------------- ヒーロー -------------------- */
/* 背景：下→上 #f1ebef → #fff、全体高さ500px */
.p-hero {
  background: linear-gradient(0deg, #f1ebef 0%, #ffffff 100%);
  position: relative; 
  height: 500px; 
  overflow: hidden;
}

.p-hero .hero-inner {
  position: relative;
  height: 100%;
}

/* === 左スライダー本体（従来 .hero-left の置き換え） ================ */
.hero-left-slider{
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%;            /* ← 可変 */
  max-width: 1030px;      /* ← 上限 */
  height: 500px;          /* ← 固定 */
  border-top-right-radius: 20px;
  overflow: hidden;             /* 角丸からはみ出さない */
}

/* ベース：.slide は“枠”として全画面フィット（imgの時もdivの時も同じ） */
.hero-left-slider .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;                    /* ★必須 */
  transition: opacity .8s ease;  /* ★必須 */
}
/* 従来の <img class="slide"> 用：画像を枠いっぱいにcover */
.hero-left-slider img.slide{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ラッパを挟むスライド用：内側のIMGを枠いっぱいにcover */
.hero-left-slider .slide--has-inner > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* SPだけ：この1枚の“中身画像だけ”を縮小（枠は縮まない） */
@media (max-width: 767px){
  .hero-left-slider .slide--shrink-sp > img{
    transform: scale(1.3);
    transform-origin: center;
  }
}


.hero-left-slider .slide.is-active{ opacity: 1; }
/* 念のため：グローバルimgの max-width 影響を受けないよう保険 */
.hero-left-slider .slide { max-width: none; }


/* === 右リボン：右端ピタ＋縦中央＋比率維持で縮小 === */
.hero-ribbon{
  position: absolute;
  right: 0;                 /* 右端ピタ付け */
  top: 50%;
  transform: translateY(-50%);
  display: block;

  width: 480px;             /* 通常サイズ */
  height: auto;             /* ← これで歪まない（HTMLの height 属性を無効化） */
  max-width: 100%;          /* コンテナより狭い時は自動縮小（比率維持） */

  /* 保険：画像種別が変わっても安定させる */
  aspect-ratio: 16 / 7;     /* 480:210 ≒ 16:7 */
  object-fit: contain;
}

/* -------------------- セクション間の余白 -------------------- */
/* ヒーロー下 → 会社紹介（「どんな会社？」）まで 50px */
.after-hero { 
  margin-top: 50px; }

/* 会社紹介終端 → SERVICE背景開始まで 70px */
.before-service { margin-bottom: 70px; }

/* SERVICE背景ボックス（#203d8a の 5%） */
.section--service .service-bg {
  background: rgba(32, 61, 138, 0.05);
  /* ボックス自体は 1330px 上限 */
  max-width: 1330px;
  margin: 0 auto;
  /* 上50px余白ののちにオブジェクト開始、下はオブジェクト下限から30px */
  padding-top: 50px;
  padding-bottom: 30px;
}

/* SERVICE終端 → RECRUIT開始まで 70px */
.section--service { margin-bottom: 70px; }

/* RECRUIT終端 → フッター帯まで 70px */
.section--recruit { margin-bottom: 70px; }

/* -------------------- カードレイアウト（SERVICE/RECRUIT 共通） -------------------- */
/* PC：2カラム固定、カード 230x180、ガター20 */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 230px);
  gap: 20px;
  /* 本文幅 1000 の中で左寄せ開始（必要に応じて center に変更可） */
  justify-content: start;
}
.card {
  width: 230px;
  height: 180px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}

/* -------------------- フッター -------------------- */
/* フッター帯：高さ200、内側コンテンツ高さ150 */
.l-footer{
  position: relative;
  background: #203d8a;
  color: #fff;
  height: 200px;                 /* 基本高さ */
}
/* 上段：150px領域で中央寄せ */
.l-footer__upper{ height: 150px; }
.l-footer__inner{
  position: relative;
  height: 100%;
  max-width: 1000px;             /* PCは1000pxボックス */
  margin: 0 auto;
  display: flex;
  align-items: center;           /* 垂直中央 */
  justify-content: flex-start;
}

/* 左側：ロゴ(90) + コピー画像(最大230) / ロゴ右端から+50px */
.l-footer__left{
  display: flex;
  align-items: center;
  gap: 50px;                     /* ロゴ→コピーの距離 */
}
.l-footer__logo img{ 
  display:block; 
  width: 90px; 
  height:auto; 
}
.l-footer__copyimg{
  display:block;
  max-width: 230px;              /* 指定上限 */
  width: 100%;
  height: auto;
}

/* 右側：封筒 右端-60px／縦中央 */
.l-footer__mail{
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
}

/* 下段：ライン=下から50px / その10px下にコピーライト（=下40px） */
.l-footer__rule{
  position: absolute;
  left: 0; right: 0;
  bottom: 50px;
  height: 0.5px;
  background: rgba(255,255,255,0.7);
}
.l-footer__copyright{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;                  /* ラインの20px下 */
  margin: 0;
  font-size: 0.55em;              /* 級数0.55em */
  color: rgba(255,255,255,0.7);  /* 白70% */
  text-align: center;
}

/* ===== SP（左右置きを維持／左右16pxオフセット／封筒は非表示） ===== */
@media (max-width: 767px){
  .l-footer__inner{
    max-width: none;             /* ビューポート基準に切替 */
    width: 100%;
    padding: 0 16px;
    justify-content: space-between;
  }
  /* ロゴは潰さない */
  .l-footer__logo img { flex-shrink: 0; }
  .l-footer__left{ gap: 16px; }  /* 視覚バランス調整 */
  /* コピー画像は右に逃がす＆優先的に縮む */
  .l-footer__copyimg{ 
    margin-left: auto;         /* 右端側へ押し出す（ロゴは左） */
    flex-shrink: 1;            /* ロゴより先にこちらが縮む */
    max-width: 230px;          /* 上限は据え置き */
    width: min(230px, calc(100vw - 16px - 16px - 90px - 16px));
  /*  ↑ 画面幅 − 左16 − 右16 − ロゴ90 − ロゴとコピー間の最低16
        = SPでも左右16pxオフセットを維持しつつ、はみ出しを防ぐ */
    height: auto; 
  }
  .l-footer__copyright{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;                  /* ラインの20px下 */
  margin: 0 -10px;
  font-size: 0.55em;              /* 級数0.55em */
  color: rgba(255,255,255,0.7);  /* 白70% */
  text-align: center;
}
  .l-footer__mail{ display: none; }  /* SPは封筒非表示 */
}


/* -------------------- レスポンシブ（SP：1カラム固定） -------------------- */
@media (max-width: 767px) {
  /* 本文コンテンツは規定どおり1000上限→自然に縮む。カードは1列中央寄せ */
  .cards {
    grid-template-columns: 230px; /* 1カラム固定 */
    justify-content: center;
  }
  .p-hero .hero-inner {
    /* 右16px余白は維持、縦500はデザイン基準通り */
    height: 500px;
  }
}


/* ================== Canonical Containers ================== */
.container-1330 { 
  max-width: var(--container-outer, 1330px); 
  margin-inline: auto; 
}
.container-1000 { 
  max-width: var(--container-inner, 1000px); 
  margin-inline: auto; 
  /* PCは原則パディング0（セクション側で制御） */
  padding-inline: 0;
}

/* 1カラムページ共通ラッパ（CONTACT/POLICYなど） */
.l-single {
  max-width: var(--container-inner, 1000px);
  margin-inline: auto;
  padding-inline: 70px;          /* PC規定：左右70px */
}
@media (max-width: 767px){
  .l-single { padding-inline: var(--gutter-sp, 16px); } /* SPは16px */
}

/* PCの“左右50pxインセット”が必要な場面用 ユーティリティ */
.l-contentPad--pc50 { padding-inline: 50px; }
@media (max-width: 767px){
  .l-contentPad--pc50 { padding-inline: var(--gutter-sp, 16px); }
}

/* SERVICE/HOMEの2カラム切替（念のための正準化） */
@media (min-width: 768px){
  .svc-detail__grid,
  .home-about__grid{
    grid-template-columns: var(--col-left, 450px) auto !important;
  }
}
@media (max-width: 767px){
  .svc-detail__grid,
  .home-about__grid{
    grid-template-columns: 1fr !important;
  }
}

/* SP（≤767px）全体の基本ガター：16px
   ※ SERVICE側は .svc-row で既にやっているけど、
      layout由来のセクションにも効くよう“保険”で */
@media (max-width: 767px){
  .container-1000 { padding-inline: var(--gutter-sp, 16px); }
}

/* ヘッダー周りをトークンに寄せる（任意・将来対応） */
.site-header { z-index: var(--z-header, 100); }
.gnav        { z-index: calc(var(--z-header, 100) - 1); }