/* ==========================================================================
   全 LP 共通: ヘッダー / ドロワー / フッター / 新規登録確認モーダル
   HTML は _includes/ の site-header.njk / site-footer.njk / signup-modal.njk
   Figma: Header 24198:12450 / Footer 24198:12467 / SP 24212:12445
   各 LP の style.css より後に読み込む
   ========================================================================== */

/* ---------- 下地 ---------- */
/* 各 LP の reset（bookkeeping-ai の img { width: 100% } / a:hover { opacity } など）を打ち消す。:where で詳細度を上げない */
:where(.header, .footer, .signup-modal) {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
}
:where(.header, .footer, .signup-modal) *,
:where(.header, .footer, .signup-modal) *::before,
:where(.header, .footer, .signup-modal) *::after { box-sizing: border-box; line-height: inherit; }
:where(.header, .footer, .signup-modal) :where(ul, p) { margin: 0; padding: 0; list-style: none; }
:where(.header, .footer, .signup-modal) a { color: inherit; text-decoration: none; }
:where(.header, .footer, .signup-modal) a:hover { opacity: 1; }
:where(.header, .footer) img { display: block; width: auto; max-width: 100%; height: auto; object-fit: initial; }
:where(.header, .signup-modal) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

@media (max-width: 768px) { .header .pc-only { display: none !important; } }
@media (min-width: 769px) { .header .sp-only, .drawer { display: none !important; } }


/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
/* PC グループナビ帯（TOP のみ） */
.header__group-nav { height: 30px; background: #f5f5f5; }
.header__group-list {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 22px;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: .05em;
  color: #313030;
}
.header__group-list li { display: flex; align-items: center; }
.header__group-list li + li::before { content: ""; width: 1px; height: 10px; margin: 0 10px; background: #cfcfcf; }
.header__group-list a:hover { text-decoration: underline; }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  padding-right: 14px;
}
.header__logo { display: flex; align-items: center; padding: 0 16px; }
.header__logo img { width: auto; height: 40px; object-fit: contain; object-position: left center; }
.header__right { display: flex; align-items: center; gap: 37px; }
.header__nav--pc { display: flex; align-items: center; }
.header__links { display: flex; align-items: center; gap: 28px; }
.header__links a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; line-height: 25.5px; letter-spacing: .2em;
  color: #005a46;
  transition: opacity .2s;
}
.header__links a:hover, .header__login:hover, .header__register:hover { opacity: .75; }
.header__icon--course { width: 26px; height: 19px; }
.header__icon--column { width: 19.6px; height: 18.7px; }
.header__icon--login { width: 24px; height: 25px; }
.header__actions { display: flex; align-items: center; gap: 9.5px; }
.header__login {
  display: inline-flex; align-items: center; justify-content: center; gap: 5.5px;
  width: 133px; height: 48px;
  border: 1.5px solid #d9d9d9;
  border-radius: 5px;
  font-size: 16.5px; letter-spacing: .1em;
  color: #005a46;
  transition: opacity .2s;
}
.header__register {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 198px; height: 48px;
  background: #d26500;
  border-radius: 5px;
  font-size: 19.86px; font-weight: 600; letter-spacing: .2em;
  color: #fff;
  transition: opacity .2s;
}
.header__register-arrow { width: 10px; height: 15.7px; }
.header__menu { display: flex; flex-direction: column; align-items: center; gap: 4.7px; padding: 0; }
.header__menu span {
  display: block; width: 19px; height: 2px; background: #005a46;
  transition: transform .3s, opacity .3s;
}
.header__menu.is-open span:nth-child(1) { transform: translateY(6.7px) rotate(-45deg); }
.header__menu.is-open span:nth-child(2) { opacity: 0; }
.header__menu.is-open span:nth-child(3) { transform: translateY(-6.7px) rotate(45deg); }

/* Drawer (SP) */
.drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 40px 0 0;
  background: rgba(255,255,255,.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__list { display: flex; flex-direction: column; gap: 15.3px; padding: 0 32px; }
.drawer__link {
  display: flex; align-items: center; gap: 15.3px;
  font-size: 13.5px; line-height: 23px; letter-spacing: .1em;
  color: #005a46;
  transition: opacity .2s;
}
.drawer__link:hover { opacity: .75; }
.drawer__icon--course { width: 21.6px; height: 16.2px; }
.drawer__icon--column { width: 18px; height: 18px; }
.drawer__icon--career { width: 18px; height: 21.6px; }
.drawer__icon--jobs { width: 19.8px; height: 17.1px; }
/* ドロワー下部のグループナビ（Figma 24212:12423 Group Navi_SP） */
.drawer__group { margin-top: 40px; padding: 24px 28px 32px; background: #f6f6f6; }
.drawer__group-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 10px;
  font-size: 12px; line-height: 18px; letter-spacing: .03em; color: #696969;
}
.drawer__group-list li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.drawer__group-list li:not(:last-child)::after { content: ""; width: 1px; height: 10px; background: #cfcfcf; }
.drawer__group-list a:hover { text-decoration: underline; }


/* ==========================================================================
   Footer（背景は TOP のみ #29393b、それ以外の LP は #032922）
   ========================================================================== */
/*
  各 LP の reset.css / style.css（body の font-size・line-height・text-rendering、
  * { margin; line-height }、a { transition }、li { list-style }、img { width } など）を受けないよう、
  フッター専用のリセットで一度すべてのプロパティを初期化し、必要な値だけを指定し直す。値は TOP の表示が基準。
*/
/* 1) フッター専用リセット
   - .footer は all: initial … body / html からの継承を断ち切る（全プロパティを CSS の初期値に）
   - 子孫は all: unset     … 各 LP の要素セレクタ（*, a, li, ul, img など）の指定をすべて打ち消し、
                              継承プロパティは .footer から、それ以外は初期値になる
   - 以降のルールは同じ詳細度でもこのリセットより後にあるので上書きできる */
.footer { all: initial; }
.footer *,
.footer *::before,
.footer *::after { all: unset; }
.footer,
.footer *,
.footer *::before,
.footer *::after { box-sizing: border-box; }
.footer {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  list-style: none;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* all: unset で消えるリンクのカーソル・フォーカス表示を戻す */
.footer a { cursor: pointer; }
.footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 2) 上段（リンク一覧 + SNS）: 13px / 300 / 22px / .1em / #e9e9e9 */
.footer,
.footer__main,
.footer__cols,
.footer__list,
.footer__list li,
.footer__list a,
.footer__sns,
.footer__sns li,
.footer__sns a {
  font-size: 13px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: .1em;
  color: #e9e9e9;
  white-space: nowrap;
}
.footer { display: block; width: 100%; }
.footer__main { display: block; padding: 32px 40px 81px; background: #032922; }
.footer--top .footer__main { background: #29393b; }
.footer__cols { display: flex; justify-content: center; align-items: flex-start; gap: 120px; }
.footer__list { display: flex; flex-direction: column; gap: 8px; }
.footer__list li { display: block; }
.footer__list a { display: inline; }
.footer__list a:hover { color: #fff; opacity: 1; text-decoration: none; }
.footer__sns { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 45px; }
.footer__sns li { display: block; }
.footer__sns a { display: block; transition: opacity .2s; }
.footer__sns a:hover { opacity: .8; }
.footer__sns img { display: block; max-width: 100%; height: auto; object-fit: initial; }
.footer__sns li:nth-child(1) img { width: 28px; }
.footer__sns li:nth-child(2) img { width: 33px; }

/* 3) 下段（グループナビ + コピーライト）: 12px / 400 / 16.8px / .05em / #313030 */
.footer__group,
.footer__group-row,
.footer__group-logo,
.footer__group-nav,
.footer__group-nav li,
.footer__group-nav a,
.footer__copy {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: .05em;
  color: #313030;
  white-space: nowrap;
}
.footer__group { display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 31px 32px 16px; background: #f6f6f6; }
.footer__group-row { display: flex; justify-content: center; align-items: center; gap: 18px; }
.footer__group-logo { display: block; flex-shrink: 0; }
.footer__group-logo:hover { opacity: 1; }
.footer__group-logo img { display: block; height: 31px; }
.footer__group-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer__group-nav li { display: block; }
.footer__group-nav a { display: inline; }
.footer__group-nav a:hover { text-decoration: underline; opacity: 1; }
.footer__copy { display: block; text-align: center; }


/* ==========================================================================
   新規登録確認モーダル
   ========================================================================== */
/* <dialog> を全画面に広げ、要素自身を半透明の背景にする（背景クリック判定を event.target === dialog で行うため） */
.signup-modal {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(23,24,24,.4);
}
.signup-modal:not([open]) { display: none; }
.signup-modal::backdrop { background: none; }
body:has(.signup-modal[open]) { overflow: hidden; }
.signup-modal__window {
  position: relative;
  width: 100%; max-width: 884px;
  padding: 40px 40px 44px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  color: #1d1d1d;
}
.signup-modal__close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px;
  color: #4a4f4e;
  font-size: 30px; line-height: 1; font-weight: 300;
}
.signup-modal__title { color: #e00000; font-size: 18px; font-weight: 700; line-height: 1.5; }
.signup-modal__text { margin-top: 24px; text-align: left; font-size: 14px; font-weight: 300; line-height: 1.7; }
.signup-modal__text + .signup-modal__text { margin-top: 20px; }
.signup-modal__buttons { display: flex; justify-content: center; gap: 18px; margin-top: 32px; }
.signup-modal__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 128px; height: 50px; padding: 0 30px;
  border-radius: 4px;
  font-size: 15px; font-weight: 700;
  transition: opacity .2s;
}
.signup-modal__button:hover { opacity: .8; }
.signup-modal__button--login { background: #ff7a00; color: #fff; }
.signup-modal__button--signup { background: #fff; color: #1d1d1d; border: 1px solid #b3b3b3; }
.signup-modal__note { margin-top: 20px; text-align: left; font-size: 12px; line-height: 1.7; color: #4f4f4f; }


/* ==========================================================================
   Tablet (769px – 1200px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1200px) {
  .footer__cols { gap: 80px; }
}


/* ==========================================================================
   SP (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Header（Figma 23976:47226: 高さ 51.4） */
  .header__inner { height: 52px; gap: 10px; padding-right: 15px; }
  .header__logo { padding: 0 0 0 8px; }
  .header__logo img { height: 24px; }
  .header__nav--pc { display: none; }
  .header__right { gap: 10px; }
  .header__actions { gap: 5px; }
  .header__login {
    width: 78px; height: 32px; gap: 3.3px;
    border-width: 1px; border-radius: 3.3px;
    font-size: 11px; letter-spacing: .05em;
  }
  .header__icon--login { width: 14.2px; height: 14.2px; }
  .header__register {
    width: 86px; height: 32px; gap: 5.4px;
    border-radius: 3.3px;
    font-size: 13px; letter-spacing: .1em;
  }
  .header__register-arrow { width: 5.4px; height: 8.5px; }
  .header__menu { gap: 5.4px; }
  .header__menu span { width: 18px; height: 1.8px; }

  /* Footer（Figma 24212:12445） */
  .footer__main { padding: 32px 16px 40px; }
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .footer__list, .footer__list li, .footer__list a { white-space: normal; }
  .footer__list:last-child { grid-column: 1 / -1; }
  .footer__sns { margin-top: 32px; }
  .footer__group { align-items: stretch; gap: 24px; padding: 24px 28px 32px; }
  .footer__group-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .footer__group-logo { align-self: center; }
  .footer__group-nav { gap: 16px 10px; }
  .footer__group-nav, .footer__group-nav li, .footer__group-nav a { color: #696969; font-weight: 500; line-height: 18px; letter-spacing: .03em; }
  .footer__copy { white-space: normal; }
  .footer__group-nav li:not(:last-child) { display: flex; align-items: center; gap: 10px; }
  .footer__group-nav li:not(:last-child)::after { content: ""; width: 1px; height: 10px; background: #cfcfcf; }

  /* 新規登録確認モーダル */
  .signup-modal__window { padding: 40px 20px 28px; }
  .signup-modal__title { font-size: 16px; }
  .signup-modal__text { font-size: 13px; }
  .signup-modal__buttons { flex-direction: column; gap: 10px; }
  .signup-modal__button { width: 100%; }
}