/* ==========================================================
   site-company.css
   全ページ共通パーツ（ヘッダー / SPメニュー /
   コンテナ幅 / セクション余白 / 見出し / ボタン / クイックリンク /
   リンク共通挙動）

   ※このファイルはサイト全体で読み込む共通CSSです。
     ページ固有のデザイン（hero, values, message 等）は
     各ページの <style> 側に書き、ここには追記しないでください。
   ========================================================== */

:root {
  /* レイアウト基準値 */
  --container-max: 1280px;   /* サイト共通の基本幅 */
  --container-pad: 20px;     /* コンテナ左右の最低余白（ページ側で上書き可） */

  /* セクション共通の縦余白（PC / SP） */
  --section-pad-y-pc: 70px;
  --section-pad-y-pc-bottom: 80px;
  --section-pad-y-sp: 48px;
  --section-pad-y-sp-bottom: 55px;

  /* ヘッダー・ナビで使う色 */
  --color-nav-link: #6487ae;
  --color-nav-border: #d1dcec;
  --color-header-btn-bg: #648bb2;
  --color-navy: #173c57;

  /* 共通ホバー時の透明度 */
  --hover-fade: .7;
  --transition-base: .3s;
}

/* ==========================================================

/* ==========================================================
   1. リンク共通ユーティリティ
   これまで各パーツごとに書いていた
     a:link.xxx, a:active.xxx, a:visited.xxx { color:#fff!important; text-decoration:none!important; }
     a:hover.xxx { text-decoration:none!important; }
   をやめて、装飾なしリンクにしたい要素には
   class="u-link-plain" を付けるだけで済むようにする。
   文字色は各コンポーネントのクラス側（color:）で指定する。

   ========================================================== */
.u-link-plain,
.u-link-plain:link,
.u-link-plain:active,
.u-link-plain:visited {
  color: inherit;
  text-decoration: none !important;
}
.u-link-plain:hover {
  color: inherit;
  text-decoration: none !important;
}

/* ホバーでうっすら薄くするだけの共通挙動 */
.u-hover-fade {
  transition: opacity var(--transition-base);
}
.u-hover-fade:hover {
  opacity: var(--hover-fade);
}

/* ==========================================================
   2. コンテナ幅（基本幅1280px）
   背景は各セクション側で画面幅いっぱいに伸ばし、
   中身だけをこのクラスで1280pxに収める。

   .l-container       … 左右に余白を持たせて収める（例:ヘッダー内、hero-copyなど）
   .l-container--flush… 親要素（.l-section等）側で左右paddingを既に持っている場合に使う
                          （左右余白の二重取りを防ぐ）
   幅を1280px以外にしたい場合は、要素側で --container-max だけ上書きすればよい。
     例）.numbers-inner{ --container-max:800px; }
   ========================================================== */
.l-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-left: auto;
  margin-right: auto;
}

.l-container--flush {
  width: min(100%, var(--container-max));
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================
   3. セクション共通の縦余白
   今まで個別にバラバラだった padding をここで統一。
   背景色・背景画像は各セクション固有クラス側で指定する。

   .l-section       … 標準の縦余白（PC 70/80、SP 48/55）
   .l-section--tight… CTA帯など、より小さい縦余白にしたい場合（全幅で48/55固定）
   ========================================================== */
.l-section {
  padding: var(--section-pad-y-pc) var(--container-pad) var(--section-pad-y-pc-bottom);
}
@media (max-width: 600px) {
  .l-section {
    padding: var(--section-pad-y-sp) var(--container-pad) var(--section-pad-y-sp-bottom);
  }
}

.l-section--tight {
  padding: var(--section-pad-y-sp) var(--container-pad) var(--section-pad-y-sp-bottom);
}

/* ==========================================================
   4. 見出し共通パーツ（英語ラベル＋日本語見出し）
   色違いは modifier クラスで切り替える。
   （white: 濃色背景用 / gray: 白背景で控えめに見せたい場合 /
     system: 制度紹介など小ぶりな見出しにしたい場合）
   ========================================================== */
.section-heading {
  text-align: center;
  margin-bottom: 42px;
}

.section-heading__en {
  margin: 0;
  color: #d0d1d2;
  font-size: clamp(40px, 5.1vw, 63px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .015em;
}

.section-heading h2 {
  margin: 3px 0 0;
  color: #777;
  font-weight: 400;
}

.section-heading--white .section-heading__en {
  color: #fff;
}
.section-heading--white h2 {
  color: #777;
}

.section-heading--gray .section-heading__en {
  color: #d6d8da;
}
.section-heading--gray h2 {
  color: #777;
}

.section-heading--system .section-heading__en {
  color: #777;
  font-size: 36px;
  letter-spacing: .08em;
}
.section-heading--system h2 {
  color: #888;
  font-size: 12px;
}

@media (max-width: 600px) {
  .section-heading {
    margin-bottom: 30px;
  }
  .section-heading__en {
    font-size: 40px;
  }
  .section-heading h2 {
    font-size: 12px;
  }
  .section-heading--system .section-heading__en {
    font-size: 24px;
  }
}

/* ==========================================================
   5. ボタン（ピル型CTAボタン）
   複数ページ・複数箇所で同じ見た目のボタンを使い回す想定。
   色を変えたい場合は要素側で --pill-button-bg / --pill-button-bg-hover を上書きする。
   ========================================================== */
.pill-button {
  min-width: 290px;
  min-height: 36px;
  padding: 7px 18px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #fff!important;
  background: var(--pill-button-bg, #4f89a7);
  line-height: 1.3;
  transition: transform .2s ease, background .2s ease;
  font-size: 1.2em;
}
.pill-button:hover {
  transform: translateY(-2px);
  background: var(--pill-button-bg-hover, #3f7794);
}
.pill-button span {
  font-size: 14px;
}
@media (max-width: 600px) {
  .pill-button {
    width: min(100%, 230px);
    min-width: 0;
    min-height: 32px;
  }
}


/* ---- CTA ---- */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
}
@media (max-width: 600px) {
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
}

/* ==========================================================
   6. 
   ========================================================== */




/* ==========================================================
   7. ヘッダー / PCナビ
   include/header/nav.txt から読み込まれるHTML用のスタイル。
   ========================================================== */
.head-wrapper {
  width: min(100%, var(--container-max));
  margin: 0 auto;
}

.pc-logo img,
.logo img {
  width: auto;
  height: 73px;
  padding-left: 5px;
}
@media (max-width: 939px) {
  .pc-logo img,
  .logo img {
    width: 8em;
    height: auto;
    padding: 0 10px;
  }
}

.logo {
  float: left;
}

.site-header {
  background: #fff;
  position: relative;
  z-index: 300;
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: 78px;
  padding: 0 5px;
  display: flex;
  align-items: center;
}
@media (max-width: 939px) {
  .site-header__inner {
    height: 0;
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list li {
  position: relative;
}

.site-nav__list li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--color-nav-border);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.site-nav__list a {
  display: block;
  padding: 0 15px;
  color: var(--color-nav-link)!important;
  font-size: 1em;
}

.site-header__btn {
  margin: 0 10px 0 auto;
  background: var(--color-header-btn-bg);
  color: #fff!important;
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 1em;
}
.site-header__btn.u-hover-fade:hover {
  opacity: .8; /* 他パーツと差をつける固有値のみ上書き */
}

/* ==========================================================
   8. SPナビ（ハンバーガー／フルスクリーンメニュー）
   ========================================================== */
.sp-menu-button,
.sp-menu {
  display: none;
}

@media (max-width: 939px) {
  .sp-menu-button {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1003;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .sp-menu-button span {
    display: block;
    width: 25px;
    height: 1px;
    background: var(--color-navy);
    transition: transform .35s ease, opacity .25s ease;
  }
  body.menu-open .sp-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .sp-menu-button span:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .sp-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .sp-menu {
    display: block;
    position: fixed;
    z-index: 1002;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: linear-gradient(135deg, #fff 0%, #f4f9fd 55%, #eef5fb 100%);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.menu-open .sp-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .sp-menu__inner {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 0;
  }

  .sp-menu__header {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  .sp-menu__header .logo {
    width: auto;
  }

  .sp-menu__close {
    display: flex;
    width: 48px;
    height: 48px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }
  .sp-menu__close span {
    position: absolute;
    display: block;
    width: 25px;
    height: 1px;
    background: var(--color-navy);
  }
  .sp-menu__close span:first-child {
    transform: rotate(45deg);
  }
  .sp-menu__close span:last-child {
    transform: rotate(-45deg);
  }

  .sp-menu__nav {
    margin-top: 55px;
    border-top: 1px solid rgba(23, 60, 87, .18);
  }
  .sp-menu__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 22px 15px 20px 15px;
    border-bottom: 1px solid rgba(23, 60, 87, .18);
    transition: padding-left .25s ease;
  }
  .sp-menu__item:hover {
    padding-left: 10px;
  }
  .sp-menu__en {
    grid-column: 1;
    grid-row: 1;
    color: #7d9aae;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .sp-menu__jp {
    grid-column: 1;
    grid-row: 2;
    margin-top: 4px;
    color: var(--color-navy);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: .08em;
  }
  .sp-menu__arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #4f89a7;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 300;
    transition: transform .25s ease;
  }
  .sp-menu__item:hover .sp-menu__arrow {
    transform: translateX(5px);
  }

  .sp-menu__bottom {
    margin-top: 40px;
  }
  .sp-menu__top-link {
    display: flex;
    min-height: 52px;
    padding: 0 18px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #6e95ab;
    border-radius: 3px;
    color: #315a70;
    font-size: 12px;
    letter-spacing: .06em;
  }
  .sp-menu__top-link span {
    font-size: 18px;
  }

  body.menu-open {
    overflow: hidden;
  }
}


/* ==========================================================
  9. 
   ========================================================== */