/* レイアウト: コンテナ・ヘッダー・パンくず・CONTACT・企業様・フッター（01-components §1, §16〜18）。
   ブレークポイント: 〜767 SP / 768〜1079 PC 縮小 / 1080〜 PC（04-frontend §1）。ヘッダーのナビ横並びだけ 1200〜。 */

.l-container {
  width: 100%;
  max-width: calc(var(--jn-container) + var(--jn-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--jn-gutter);
}
.l-container--wide { max-width: calc(var(--jn-container-wide) + var(--jn-gutter) * 2); }
.l-container--narrow { max-width: calc(var(--jn-container-narrow) + var(--jn-gutter) * 2); }
.l-page { padding-block: 40px var(--jn-section-py); }

/* ---------- ヘッダー（PC 1440×88 p16,20 / SP 375×61 p8,20） ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--jn-color-white);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--jn-header-h);
  padding: 8px 20px;
}
.site-header__logo { flex: none; display: block; }
.site-header__logo img { width: 121px; height: 45px; }

.gnav { display: none; }
.site-header__actions { display: none; }
.site-header__tools {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* SP キープ 44×45、枠 pink 1px、r8、V g4 p8
   Figma の文字 9px は UX 検収 M2（日本語 12px 以上）に合わせて 12px。収まるよう幅 44→52・左右 p6 */
.header-keep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 52px;
  height: 45px;
  padding: 8px 6px;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-primary);
  border-radius: var(--jn-radius-sm);
}
.header-keep__icon { width: 16px; height: 16px; }
.header-keep__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 12.6px;
  letter-spacing: var(--jn-ls-wide);
  color: var(--jn-color-text);
  white-space: nowrap;
}
.header-keep__count {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  border-radius: var(--jn-radius-pill);
  background: var(--jn-color-primary);
  color: var(--jn-color-white);
  font-family: var(--jn-font-latin);
  font-size: 8px;
  font-weight: 700;
  line-height: 11.2px;
  letter-spacing: var(--jn-ls-wide);
}

/* メニュー 28×28。押せる範囲は 44×44（見た目の位置は変えない） */
.header-menu {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px;
  padding: 0;
  background: none;
  border: 0;
}
.header-menu .jn-icon { width: 28px; height: 28px; }

@media (min-width: 768px) {
  .site-header__inner { padding: 16px 20px; }
  .site-header__logo img { width: 134px; height: 50px; }
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
  }
  .site-header__tools { margin-left: 20px; }
}

/* ナビ横並びは 1200 以上（ロゴ 154＋ナビ約 516＋40＋ボタン 420＋20 ≒ 1150 が収まる幅）。未満はメニューに収納 */
@media (min-width: 1200px) {
  .gnav {
    display: block;
    margin-left: auto;
    margin-right: 40px;
  }
  .gnav__list {
    display: flex;
    gap: 28px;
  }
  .gnav__list a {
    display: block;
    padding-block: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    color: var(--jn-color-navy);
    white-space: nowrap;
  }
  .gnav__list a:hover,
  .gnav__list .current-menu-item > a { color: var(--jn-color-primary); }
  .site-header__actions { margin-left: 0; }
  .site-header__tools { display: none; }
}

/* ---------- パンくず（34 高、pad 10/160、N400 12/14.4） ---------- */
.breadcrumb { background: var(--jn-color-white); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 4px;                /* 折り返し時の行間 12＝リンクのタップ拡張 6+6 が隣の行に重ならない */
  min-height: 34px;
  padding-block: 10px;
  font-size: 12px;
  line-height: 14.4px;
  color: var(--jn-color-text);
}
/* SP は左右 20（Figma SP の家アイコンの描画左端 x22＝箱 20。一覧・詳細・詳細検索とも同じ。全体の --jn-gutter 16 は変えない。pp2 single #3） */
@media (max-width: 767px) { .breadcrumb__list.l-container { padding-inline: calc(var(--jn-gutter, 16px) + 4px); } }
.breadcrumb__item { display: flex; align-items: center; gap: 4px; }
.breadcrumb__item + .breadcrumb__item::before { content: "｜"; }
.breadcrumb__home { width: 14px; height: 14px; flex: none; }
/* タップ領域 44px 以上（B1 検収 M1）。行高・並びは変えず、透明な ::before で広げる。
   上はヘッダーが重なるので、パンくず帯の上端（リンクの 10px 上＝padding-block）から下へ 44px 取る（帯 34 の下 10px は本文側に張り出す） */
.breadcrumb a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb a::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translateX(-50%);
}
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- CONTACT（PC 1440×392 / SP 375×450） ---------- */
.cta-contact {
  position: relative;
  overflow: hidden;
  padding: 68px 16px;
  background: var(--jn-color-secondary);
}
.cta-contact__cloud {
  position: absolute;
  pointer-events: none;
  display: none;
}
/* SP の雲 2 つ（大きい雲の形）: @235,19 178×56 / @-76,354 183×77 */
.cta-contact__cloud--1 { display: block; left: calc(50% + 47.5px); top: 19px; width: 178px; height: 56px; }
.cta-contact__cloud--2 { display: block; left: calc(50% - 263.5px); top: 354px; width: 183px; height: 77px; }

.cta-contact__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 343px;
  margin-inline: auto;
  padding: 28px 16px;
  background: var(--jn-color-white);
  border-radius: var(--jn-radius-lg);
}
.cta-contact__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-contact__en {
  font-family: var(--jn-font-display);
  font-size: var(--jn-fs-contact-en);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: var(--jn-ls-wide);
  color: var(--jn-color-navy);
}
.cta-contact__ja {
  font-size: var(--jn-fs-contact-ja);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--jn-ls-wide);
  color: var(--jn-color-contact);
}
.cta-contact__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

@media (min-width: 768px) {
  .cta-contact { padding: 60px var(--jn-gutter); }
  .cta-contact__cloud { display: block; }
  /* PC の雲 4 つ（1440 基準の座標を中央基準に換算） */
  .cta-contact__cloud--1 { left: calc(50% + 366px); top: 227px; width: 331px; height: 138px; }
  .cta-contact__cloud--2 { left: calc(50% - 852px); top: 34px; width: 330px; height: 138px; }
  .cta-contact__cloud--3 { left: calc(50% - 687px); top: 268px; width: 285px; height: 91px; }
  .cta-contact__cloud--4 { left: calc(50% + 547px); top: 30px; width: 285px; height: 91px; }
  .cta-contact__card {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(40px, 7vw, 100px);
    max-width: var(--jn-container);
    padding: 60px clamp(24px, 7vw, 100px);
  }
  .cta-contact__title { align-items: flex-start; }
  .cta-contact__en { padding-left: 4px; } /* 字の左端を Figma 238:72046 の描画（C 332・N 427〜428・T 473・C 553・T 595）に合わせる。中央寄せのカード内で +2 ずれる */
  .cta-contact__buttons { gap: 40px; }
}

/* ---------- 企業様（PC 1440×288 p60,160 / SP 375×398 p40,20） ---------- */
.cta-corp {
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
  background: var(--jn-color-corp-bg);
}
.cta-corp__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  max-width: var(--jn-container);
  margin-inline: auto;
}
.cta-corp__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 303px;
}
.cta-corp__text {
  width: 100%;
  font-size: 14px;
  line-height: 1.4;
  color: var(--jn-color-text-strong);
  text-align: center;
}
/* SP のボタンは 311 幅で本文列 303 より左右 4px はみ出す（Figma どおり） */
.cta-corp .c-btn-gloss { width: min(311px, calc(100% + 8px)); max-width: none; margin-inline: -4px; }
.cta-corp__people {
  width: 335px;
  max-width: 100%;
  height: auto;
}
.cta-corp__deco { position: absolute; pointer-events: none; }
/* SP の桜は PC の 3 点（枝・桜大・桜小）の組をそのまま 0.4771 倍して 13.8° 回した形（Figma「桜」group @297,227。
   枝の頂点 6 点で相似変換を解いた値。各要素は中心で回すので left/top は回転前の箱、右端は画面外へはみ出す） */
.cta-corp__deco--branch,
.cta-corp__deco--flower-l,
.cta-corp__deco--flower-s { transform: rotate(13.8deg); }
.cta-corp__deco--branch { right: -11.9px; top: 241.9px; width: 67.3px; height: 67.3px; }
.cta-corp__deco--flower-l { right: -6.3px; top: 234.2px; width: 65.4px; height: 39.1px; }
.cta-corp__deco--flower-s { right: 43.9px; top: 254.6px; width: 28.6px; height: 26.2px; }

@media (min-width: 768px) {
  .cta-corp { padding: 60px var(--jn-gutter); }
  .cta-corp__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .cta-corp__body {
    align-items: flex-start;
    flex: 0 1 420px;
    max-width: 420px;
  }
  .cta-corp__text { text-align: left; }
  .cta-corp .c-btn-gloss { width: 380px; max-width: 100%; margin-inline: 0; }
  .cta-corp__people { flex: 0 1 626px; width: 626px; min-width: 0; }
  .cta-corp__deco--branch,
  .cta-corp__deco--flower-l,
  .cta-corp__deco--flower-s { right: auto; transform: none; }
  /* 1440 で Figma と同じ x=1349.4 / 1331 / 1311.8。広い画面は右端基準（中央基準のままだと 1920 で枝の切り口が画面内に見える。pp2 top-pc H2）。
     1440 未満は人物（右端 50%+560）との間 32 を保つ中央基準（右端基準だと 1280 で花が人物に重なる） */
  .cta-corp__deco--branch { left: max(calc(50% + 629.4px), calc(100% - 90.6px)); top: 39.6px; width: 141px; height: 141px; }
  .cta-corp__deco--flower-l { left: max(calc(50% + 611px), calc(100% - 109px)); top: 27.1px; width: 137px; height: 82px; }
  .cta-corp__deco--flower-s { left: max(calc(50% + 591.8px), calc(100% - 128.2px)); top: 85px; width: 60px; height: 55px; }
}

/* ---------- フッター（PC 1440×436 / SP 375×539） ---------- */
.site-footer {
  padding: 28px 16px 40px;
  background: var(--jn-color-navy);
  color: var(--jn-color-white);
}
.site-footer :focus-visible { outline-color: var(--jn-color-white); } /* 紺の地では既定の青（#0051B4）が見えない（pp2 chrome） */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: var(--jn-container);
  margin-inline: auto;
}
.site-footer__about {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.site-footer__title { font-size: 18px; font-weight: 700; line-height: 25.2px; }
.site-footer__text { font-size: 14px; line-height: 1.8; }
.site-footer__line {
  width: 100%;
  height: 2px;
  margin: -1px 0;               /* Figma の線は高さ 0 のベクター（1px 白 20%）が半画素で 2 行に描かれる（描画 178–179 が #345267）。2px・白 10% を上下 1px ずつはみ出させ、後続の位置は動かさない */
  background: var(--jn-color-footer-line);
}
.site-footer__logo img { width: 134px; height: 50px; }
.fnav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fnav__list a {
  display: block;
  padding: 13px 8px;            /* 見た目は変えずにタップ領域を 44px 前後に広げる */
  margin: -13px -8px;
  font-size: var(--jn-fs-footer-link);
  font-weight: 500;
  line-height: 1.4;
}
.fnav__list a:hover { text-decoration: underline; }
.site-footer__copy {
  font-family: var(--jn-font-display);
  font-size: var(--jn-fs-copyright); /* SP 10px・PC 12px は Figma どおり（ユーザー決定 9/30。以前は SP も最小 12px） */
  font-weight: 400; /* Figma は Lato 500。Lato に 500 は無いので 400（inc/assets.php） */
  line-height: 1.4;
}
.site-footer__copy small { font-size: inherit; }

@media (min-width: 768px) {
  .site-footer { padding: 60px var(--jn-gutter) 40px; }
  .site-footer__inner { gap: 40px; }
  .site-footer__logo img { width: 161px; height: 60px; }
  .fnav__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  /* 「｜」区切り（Figma は H g24 で「｜」を文字として置く） */
  .fnav__list li + li::before {
    content: "｜";
    padding-inline: 24px;
    font-size: var(--jn-fs-footer-link);
    line-height: 1.4;
    opacity: 1;
  }
  .fnav__list li { display: flex; align-items: center; }
}