/* ============================================================
   ページ骨格
   背景モザイク → 最初の画面（intro） → 本文カラム（.main-col）と
   PC 時の左右パネル → ヘッダー／フッター／固定 CTA。
   ============================================================ */

/* ------------------------------------------------------------
   背景：写真の敷き詰め（ゆっくり上へ流れ続ける）
   同じブロックを 2 つ縦に並べ、ちょうど 1 ブロック分動かして
   つなぎ目なくループさせる。
   ------------------------------------------------------------ */
.mosaic {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--y);
}
.mosaic-track { will-change: transform; }
/* JS が 1 ブロックを複製したあとにだけ流す（mosaic.js） */
.mosaic-track.is-looping { animation: mosaic-loop 90s linear infinite; }
@keyframes mosaic-loop { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.mosaic-block {
  display: grid;
  gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 31vw;
}
.tile { overflow: hidden; background: var(--tile-bg); }
.tile img { width: 100%; height: 100%; object-fit: cover; }

/* SP：3 列 */
.tile-1  { grid-column: 1 / 3; grid-row: 1 / 3; }
.tile-2  { grid-column: 3;     grid-row: 1; }
.tile-3  { grid-column: 1 / 3; grid-row: 3; }
.tile-4  { grid-column: 3;     grid-row: 2 / 4; }
.tile-5  { grid-column: 1 / 3; grid-row: 4 / 6; }
.tile-6  { grid-column: 3;     grid-row: 4; }
.tile-7  { grid-column: 3;     grid-row: 5 / 7; }
.tile-8  { grid-column: 1;     grid-row: 6; }
.tile-9  { grid-column: 2;     grid-row: 6; }
.tile-10 { grid-column: 1 / 3; grid-row: 7; }
.tile-11 { grid-column: 3;     grid-row: 7 / 9; }
.tile-12 { grid-column: 1 / 3; grid-row: 8 / 10; }
.tile-13 { grid-column: 3;     grid-row: 9; }
.tile-14 { grid-column: 1;     grid-row: 10; }
.tile-15 { grid-column: 2 / 4; grid-row: 10; }
.tile-16 { grid-column: 1 / 4; grid-row: 11; }

@media (min-width: 1080px) {
  /* PC：6 列。中央の 2 列を本文カラム幅に合わせ、
     写真がカラムの縁で途切れないようにする */
  .mosaic-block {
    grid-template-columns:
      1fr 1fr
      calc((var(--col) - var(--gap)) / 2) calc((var(--col) - var(--gap)) / 2)
      1fr 1fr;
    grid-auto-rows: max(11vw, 17vh);
  }
  .tile-1  { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-7  { grid-column: 1;     grid-row: 3 / 5; }
  .tile-8  { grid-column: 2;     grid-row: 3; }
  .tile-10 { grid-column: 2;     grid-row: 4; }
  .tile-12 { grid-column: 1 / 3; grid-row: 5 / 7; }
  .tile-2  { grid-column: 3;     grid-row: 1; }
  .tile-6  { grid-column: 4;     grid-row: 1; }
  .tile-5  { grid-column: 3 / 5; grid-row: 2 / 4; }
  .tile-11 { grid-column: 3;     grid-row: 4 / 6; }
  .tile-4  { grid-column: 4;     grid-row: 4 / 6; }
  .tile-16 { grid-column: 3 / 5; grid-row: 6; }
  .tile-3  { grid-column: 5 / 7; grid-row: 1; }
  .tile-9  { grid-column: 5 / 7; grid-row: 2 / 4; }
  .tile-13 { grid-column: 5;     grid-row: 4; }
  .tile-15 { grid-column: 6;     grid-row: 4; }
  .tile-14 { grid-column: 5 / 7; grid-row: 5 / 7; }
}

/* ------------------------------------------------------------
   最初の画面：背景の写真とキャッチコピーだけを見せる
   写真は暗くせず、キャッチだけ白地・黒枠のボックスに載せて読ませる。
   ------------------------------------------------------------ */
.intro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) 20px 120px;
}
.intro-body {
  width: min(100%, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
/* 枠：PC 左パネル（.pc-left-inner）と同じ見た目にそろえる。白地・黒 3px 枠・角丸 12px */
.intro-panel {
  /* キャッチの強調語の大きさ。社名はこの比率で決める（左パネルと同じ比率） */
  --catch-size: clamp(26px, 9.8vw, 76px);
  align-self: center;
  /* 余白は画面幅に合わせて伸ばす。上だけ下の半分にする */
  --pad: clamp(22px, 7.8vw, 36px);
  padding: calc(var(--pad) / 2) var(--pad) var(--pad);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
}
/* 社名：左パネルの .pc-corp と同じ見た目。キャッチとの間は左パネルより詰める */
.intro-corp { font-size: calc(var(--catch-size) * .32); font-weight: 900; letter-spacing: .04em; }
/* キャッチ：強調語は黄色のマーカー。
   文字サイズ＝強調語の大きさ。地の文（と・を・へ・。）はその 0.7 倍 */
.intro-catch {
  margin: 0px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--catch-size);
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
}
.intro-catch-line { display: block; font-size: .7em; white-space: nowrap; }
.intro-catch em {
  font-style: normal;
  font-size: 1.4286em;
  /* マーカーは文字の下端から少し浮かせる（72〜94% の帯） */
  background: linear-gradient(transparent 72%, var(--y) 72%, var(--y) 94%, transparent 94%);
}
.intro-catch em.no-marker { background: none; }

/* 右下の札：正社員募集中＋未経験者も大歓迎
   丸に収めると文字が小さくなるので、傾けた 2 段のラベルにして文字を大きく見せる */
.intro-badge {
  position: absolute;
  right: 16px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: rotate(-5deg);
  transform-origin: right bottom;
}
.intro-badge-main {
  /* 字形が下寄りなので、上を詰めて上下中央に見せる */
  padding: 3px 14px 7px;
  background: var(--y);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1.2;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.intro-badge-sub {
  /* 上のラベルに少し食い込ませて、1 枚の札に見せる */
  margin: -6px 12px 0 0;
  padding: 4px 12px 5px;
  background: var(--ink);
  color: var(--y);
  border-radius: 8px;
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (min-width: 1080px) {
  .intro-badge { right: 40px; bottom: 60px; }
  .intro-badge-main { font-size: 54px; padding: 5px 22px 11px; }
  .intro-badge-sub { font-size: 30px; margin-right: 20px; padding: 3px 12px 6px; }
}


/* ------------------------------------------------------------
   本文カラム（SP 1 カラム / PC は左右に固定パネル）
   ------------------------------------------------------------ */
.main-col {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  border-inline: var(--line) solid var(--ink);
  /* 黒線の外側に、背景の写真のすき間（--gap）と同じ幅の黄色の枠を回す。
     左右は写真のすき間と重なり、上は最初の画面の写真との境目に黄色の帯として見える */
  box-shadow: 0 0 0 var(--gap) var(--y);
}
.page { position: relative; z-index: 1; }
.pc-side { display: none; }

/* 固定CTAを置かないページでは、フッター下の逃げ（CTAの高さ分）をなくす */
/* 固定CTA（高さ約 84px）に本文の最後が隠れないぶんの逃げは、フッターの下の余白として取る。
   本文カラムの下に余白を取ると、フッター（黒）と固定CTAの間に白いすき間が見えるため。
   固定CTAのないページ（応募フォーム）は .main-col--no-cta で通常の余白に戻す */
.main-col--no-cta .footer { padding-bottom: 28px; }

@media (min-width: 1080px) {
  .page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr);
  }
  /* .page の中では真ん中の列に収まる。
     .page を持たないページ（entry.html）では margin: 0 auto のまま中央に置く */
  .page > .main-col { width: var(--col); margin: 0; }
  .pc-side {
    display: flex;
    align-self: start;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 48px clamp(24px, 3vw, 56px);
    align-items: center;
  }
  .pc-left { justify-content: flex-end; }
  .pc-right { justify-content: flex-start; }
  .menu-btn, .nav { display: none !important; }
}

/* PC：左パネル（キャッチコピー） */
.pc-left-inner {
  /* キャッチの強調語の大きさ。社名はこの比率で決める（最初の画面と同じ比率） */
  --catch-size: clamp(30px, 3.2vw, 54px);
  max-width: 440px;
  /* 余白は画面幅に合わせて伸ばす。上だけ下の半分にする */
  --pad: clamp(22px, 7.8vw, 36px);
  /* 「正社員募集中！」の札の上下の空き（上はキャッチとの間、下はパネルの枠まで）。同じ値にそろえる */
  --meta-gap: 28px;
  padding: calc(var(--pad) / 2) var(--pad) var(--meta-gap);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
}
.pc-corp { font-size: calc(var(--catch-size) * .4); font-weight: 900; letter-spacing: .04em; }
/* 最初の画面のキャッチ（.intro-catch）と同じ文字組。
   文字サイズ＝強調語の大きさ。地の文（と・を・へ・。）はその 0.7 倍 */
.pc-catch {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--catch-size);
  line-height: 1.3;
  letter-spacing: .01em;
}
.pc-catch-line { display: block; font-size: .7em; white-space: nowrap; }
.pc-catch em {
  font-style: normal;
  font-size: 1.4286em;
  /* マーカーは文字の下端から少し浮かせる（72〜94% の帯） */
  background: linear-gradient(transparent 72%, var(--y) 72%, var(--y) 94%, transparent 94%);
}
.pc-catch em.no-marker { background: none; }
.pc-meta { margin-top: var(--meta-gap); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }   /* 札はパネルの左右中央 */
.pc-meta span {
  font-size: calc(var(--catch-size) * .4);   /* 社名（.pc-corp）と同じ大きさ */
  font-weight: 900;
  padding: 3.5px 12px 4.5px;   /* 字形が下寄りなので上を詰める */
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;   /* ボタンと見分けるため、丸くしすぎない */
}
.pc-meta span:last-child { background: var(--ink); color: var(--y); }

/* PC：右パネル（ページ内ナビ） */
.pc-nav {
  width: min(100%, 300px);
  padding: 8px 20px 20px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.pc-nav-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }

/* PC 幅が狭いとき（1080〜1279px）は左右パネルの余白と文字を詰める */
@media (min-width: 1080px) and (max-width: 1279px) {
  .pc-side { padding: 40px 14px; }
  .pc-left-inner { padding: 20px 18px 22px; }
  .pc-nav { padding: 6px 14px 16px; }
  .pc-nav .nav-link { font-size: 15px; }
}

/* ------------------------------------------------------------
   ヘッダー・ハンバーガーメニュー
   ------------------------------------------------------------ */
/* 最初の画面（背景写真）も含めて、常に画面の最上部に貼り付ける。
   .main-col の外に出してあり、幅は本文カラムではなく画面いっぱいに取る */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
.header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px 0 16px;
  background: var(--paper);
  border-bottom: var(--line) solid var(--ink);
}
.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.logo .corp { font-size: 11px; font-weight: 700; }
.logo .name { font-family: var(--f-display); font-weight: 900; font-size: 23px; letter-spacing: .04em; }
.logo .tag {
  font-size: 12px;
  font-weight: 900;
  padding: 3px 6px 4px;   /* 字形が下寄りなので上を詰める */
  background: var(--y);
  border: 2px solid var(--ink);
  border-radius: 4px;
}

.menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 5px;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--y);
  transition: transform .2s, opacity .2s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow: auto;
  padding: 4px 20px 20px;
  background: var(--y);
  border-bottom: var(--line) solid var(--ink);
  display: flex;
  flex-direction: column;
}
.nav-sub { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }

.nav-link {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 2px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  text-decoration: none;
  transition: padding-left .15s;
}
.nav-link::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-top: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  transform: rotate(45deg);
}
/* 表示中のセクション（PC 右ナビ。JS が付け外しする） */
.nav-link.is-current { padding-left: 16px; }
.nav-link.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  background: var(--y);
  border: 2px solid var(--ink);
}

/* ------------------------------------------------------------
   セクション
   ------------------------------------------------------------ */
.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 64px 20px 56px;
  background: var(--paper);
  border-top: var(--line) solid var(--ink);
}
/* 白と黄色のセクションを交互に並べる。黄色のセクションでは、
   見出し札をはじめ黄色を使う部品を白に反転させ、背景に溶けないようにする */
.sec--alt { background: var(--y); }
.sec--alt .plate,
.sec--alt .day > li::before,
.sec--alt .block > h4::before,
.sec--alt .carousel-btn { background-color: var(--paper); }

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.footer {
  padding: 28px 20px calc(28px + 92px + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.7;
}
.footer-name {
  margin-bottom: 4px;
  color: var(--y);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .04em;
}
/* コーポレートサイトへのリンク。選考の流れの「こちらの応募フォーム」（.text-link）と同じ下線で、文字と下線は白 */
.footer-link { display: inline-block; margin-top: 16px; color: var(--paper); }

/* ------------------------------------------------------------
   固定の応募ボタン
   最初の画面（intro）にいる間は画面外へ逃がす。
   .is-intro は JS が <html> に付け外しする。
   ------------------------------------------------------------ */
.cta-fixed {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: var(--col);
  transform: translate(-50%, 0);
  transition: opacity .3s ease, visibility 0s;
  /* 上下の見た目の余白をそろえる。下はボタンの厚み（--btn-depth: 7px）のぶん多めに取る */
  padding: 12px 14px calc(12px + 7px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-bottom: 0;
}
.cta-fixed .btn { min-height: 50px; font-size: 15px; }
.is-intro .cta-fixed { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }

/* SP 表示（575px 以下）：本文カラムと固定 CTA を画面幅いっぱいに広げ、
   左右に背景の写真を出さない。縦罫線も消す */
@media (max-width: 575px) {
  .main-col, .cta-fixed { max-width: none; border-inline: 0; }
}

/* 固定ヘッダーの下に本文が潜り込まないよう、最初のセクションを下げる */
.main-col > .sec:first-child { padding-top: var(--header-h); }

/* ------------------------------------------------------------
   アニメーションを減らす設定への配慮
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mosaic-track { animation: none; }
  .nav-link,
  .menu-btn span,
  .cta-fixed { transition: none; }
}