/* =========================================================
   ページ全体の共通レイアウト（採用LP：TRIVERA建設）
   組み立ては ../recruit/css/layout.css と同じ。色だけ TRIVERA にしている。
   違い：青いセクションの上の文字は白（緑の見本は黒）。
   ========================================================= */
/* ---------- 全体 ---------- */
body {
  font-size: var(--fz-body);
  line-height: 2;
  letter-spacing: .08em;
}

.note {
  font-size: var(--fz-note);
  line-height: 1.8;
  color: var(--ink-muted);
}

.note a {
  text-decoration: underline;
}

.sp-only {
  display: none;
}

/* 見出しを文節の切れ目で折り返す（対応ブラウザのみ） */
h1,
h2,
h3 {
  word-break: auto-phrase;
}

/* ---------- 共通セクション ---------- */
.section {
  padding-block: var(--section-space);
}

.section--dark {
  background: var(--blue);
  color: var(--white);
}

.section--dark .note {
  color: var(--blue-mist);
}

/* 青い背景の上の枠囲みは、白い面に黒い文字で読ませる */
.section--dark .kw--box {
  border-color: var(--ink);
  color: var(--ink);
}

.section--light {
  background: var(--bg-gray);
}

.section--white {
  background: var(--white);
}

.section_head {
  position: relative;
  margin-bottom: clamp(40px, 6vw, 72px);
  text-align: center;
}

.section_lead {
  max-width: 720px;
  margin: 24px auto 0;
}

.en-label {
  font-size: var(--fz-en-label);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--blue);
}

.section--dark .en-label {
  color: var(--white);
}

.en-label--line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.en-label--line::before {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}

.ttl-serif {
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
}

.section_head .ttl-serif::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--blue);
}

.section--dark .section_head .ttl-serif::after {
  background: var(--yellow);
}

/* ---------- ヘッダー・メニュー ---------- */
.header,
.header.is-scrolled,
body.is-menu-open .header {
  color: var(--ink);
}

body.is-menu-open .header {
  color: var(--white);
}

.header.is-scrolled {
  background: rgba(251, 251, 251, .92);
}

/* 中身（ロゴ・ボタン）は --content-max の幅に収める。背景は画面いっぱいのまま */
.header {
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
}

/* メニューが開く円の中心を、内側に寄ったメニューボタンの位置に合わせる */
.menu {
  --origin: calc(100% - max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter))) - 24px) calc(var(--header-h) / 2);
}

.header_logo_img {
  width: auto;
  height: 30px;
}

/* 白いロゴはメニューを開いたとき（背景が青）だけ出す */
.header_logo_img--white,
body.is-menu-open .header_logo_img {
  display: none;
}

body.is-menu-open .header_logo_img--white {
  display: block;
}

.header_actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header_entry {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--color-cta);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background-color .3s;
}

@media (hover: hover) {
  .header_entry:hover { background: var(--color-cta-deep); }
}

.menu_list a {
  font-weight: 700;
}

.menu_list a span {
  color: var(--yellow);
}

/* ---------- 応募ボタンの色（黄色のボタンなので、白い文字を --ink に置き換える） ---------- */
/* 共通の .cta-btn は白い文字・白い丸の矢印。黄色の上の白は読めない（1.6:1）ので、ここで上書きする */
.cta-btn,
.cta-btn_note,
.cta-btn_tag {
  color: var(--ink);
}

.cta-btn_icon {
  background: var(--ink); /* 中の矢印は --color-cta（黄色） */
}

/* ---------- 応募ボタンの小さな添え字 ---------- */
.cta-btn_main small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
}

/* ---------- 追従する応募ボタン（テンプレートの .cv-fix を枠だけにして中に .cta-btn を入れる） ---------- */
.cv-fix {
  right: 20px;
  bottom: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-weight: inherit;
  letter-spacing: normal;
}

.cv-fix .cta-btn {
  min-width: 0;
  width: 300px;
  padding: 20px 12px 12px 16px;
}

.cv-fix .cta-btn_main {
  font-size: 15px;
}

/* ---------- 背景色が切り替わらないセクションのつなぎ目 ---------- */
/* 同じ色が続くと、前の下の余白と次の上の余白が重なって広く見える。
   後ろのセクションに .section--continue を付けると、2つ合わせて --section-space 1つ分になる。
   （白 #fff と基本の背景 #fbfbfb は見た目が同じなので、同じ色として扱う） */
.section--continue {
  padding-top: calc(var(--section-space) * .4);
}

.section:has(+ .section--continue) {
  padding-bottom: calc(var(--section-space) * .6);
}

/* ---------- 色が切り替わるつなぎ目は波にする ---------- */
/* 後ろのセクションに .wave.wave--top を付け、--wave-color に前のセクションの背景色を入れる。
   向きは1つおきに .wave--flip で左右反対にして、同じ形が続かないようにする。
   波の山の分だけ前の色が下に伸びて見えるので、前のセクションの下の余白は半分にする。
   （:where で強さを下げ、.company の padding-bottom: 0 などセクションごとの指定を優先する） */
:where(.section):has(+ .wave--top) {
  padding-bottom: calc(var(--section-space) * .5);
}

/* ---------- 大きな英字・写真の帯（共通） ---------- */
/* 写真の帯は --content-max の幅まで（広い画面では中央）。
   高さと流れる英字の大きさも、vw ではなく写真の幅（--band-w）を物差しにする */
.photo-band {
  --band-w: min(100vw, var(--content-max));
  max-width: var(--content-max);
  height: clamp(260px, calc(var(--band-w) * .32), 460px);
  margin-inline: auto;
  overflow: hidden;
}

.photo-band_img {
  position: absolute;
  inset: 0;
}

/* 見せたいものが写真の下のほうにあるときは、下寄せで切り抜く（例：机の上の図面） */
.photo-band_img--bottom {
  object-position: 50% 90%;
}

.photo-band_loop,
.hero_loop {
  position: absolute;
  inset-inline: 0;
  bottom: 8%;
  z-index: 2;
}

.photo-band_loop {
  --loop-fz: clamp(64px, calc(var(--band-w) * .1), 144px);
}

.cta-area {
  display: grid;
  justify-items: center;
  gap: 32px;
  padding-top: 32px;
  text-align: center;
}

.cta-area_lead {
  font-family: var(--font-serif);
  font-size: var(--fz-h3);
  font-weight: 700;
}

/* ---------- FOOTER ---------- */
.footer {
  padding: 40px 16px 120px; /* 最後のつなぎ目は波にせず、直線で切り替える */
  text-align: center;
  background: var(--blue-deep);
  color: var(--white);
}

.footer_logo img {
  width: auto;
  height: 30px;
  margin-inline: auto;
}

.footer_links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 12px 0;
  font-size: 14px;
}

.footer_links a {
  text-decoration: underline;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }

  .header_logo_img {
    height: 24px;
  }

  .header_actions {
    gap: 10px;
  }

  .header_entry {
    padding: 6px 14px;
    font-size: 13px;
  }

  .cv-fix {
    right: 20px;
    bottom: 12px;
    left: 20px;
  }

  .cv-fix .cta-btn {
    width: 100%;
  }
}