/* layout.css
   l-container / l-section / ヘッダー（PC・SP）/ ドロワー / フッター / SP追従CTA（l-sticky-cta）

   ページ側でクラスを付けて切り替えるもの（:has 疑似クラスは古い Safari・Firefox で効かないため、クラスで切り替える）
     l-section--compact        下層ページの本文セクションの余白（見出しの帯 c-page-head の直後の本文と、送信完了ページの本文）
     l-section--divider        白地のセクションが続くとき、境目に区切り線を引く
     l-section--before-divider  その直前のセクションに付ける（下余白を区切り線の上下にそろえる）
     body.l-has-sticky         追従CTA（l-sticky-cta）を置くページの body に付ける（フッターが隠れない下余白）

   左右の余白は max(既定の余白, env(safe-area-inset-*)) にして、
   viewport-fit=cover の端末（ノッチつきの横向きなど）で内容が隠れないようにする */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: max(var(--container-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--container-pad), env(safe-area-inset-right, 0px));
}

.l-section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--c-white);
}

.l-section--paper {
  --card-bg: var(--c-white);
  --card-alt: var(--c-paper);
  background: var(--c-paper);
}

/* 下層ページの本文セクション：見出しの帯（c-page-head）のすぐ下に続く本文と、送信完了ページの本文に付ける。
   標準（上下 120px）より詰めて、上 64px・下 96px にする（SP は上 40px・下 64px）。
   l-section に並べて付ける：<section class="l-section l-section--compact">。紙色（--paper）と組み合わせてもよい。
   区切り線の余白（--divider の上、--before-divider の下）と一緒に付けたときは、あとに書いてある区切り線の余白が優先される */
.l-section--compact {
  padding-top: 64px;
  padding-bottom: 96px;
}

@media (max-width: 767.98px) {
  .l-section--compact {
    padding-top: 40px;
    padding-bottom: 64px;
  }
}

/* 区切り線つきセクション：白地のセクションが続くときに、境目へコンテナ幅の1pxの線を引く。
   線の上下の余白をそろえるため、このセクションの上余白と、直前のセクションの下余白を
   --section-pad-divider（PC 88px / SP 56px）にする。
   直前のセクションには、HTML 側で l-section--before-divider を付ける（:has 疑似クラスは古い Safari・Firefox で効かないため、クラスで切り替える）。
   使い方：<section class="l-section l-section--before-divider"> → <section class="l-section l-section--divider"> */
.l-section--divider {
  padding-top: var(--section-pad-divider);
}

.l-section--before-divider {
  padding-bottom: var(--section-pad-divider);
}

.l-section--divider > .l-container {
  position: relative;
}

.l-section--divider > .l-container::before {
  content: "";
  position: absolute;
  top: calc(var(--section-pad-divider) * -1);
  left: max(var(--container-pad), env(safe-area-inset-left, 0px));
  right: max(var(--container-pad), env(safe-area-inset-right, 0px));
  height: 1px;
  background: var(--c-line-soft);
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-ink);
}

/* 幅はコンテナ（1200px）にそろえる。1100〜1199pxは余白を24pxにして7項目を収める */
.l-header__inner {
  --header-pad: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: max(var(--header-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--header-pad), env(safe-area-inset-right, 0px));
}

.l-header__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
}

.l-header__logo img {
  width: auto;
  height: 26px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.l-header__nav {
  margin-left: auto;
}

/* 項目の間は、1100pxで16px から 1280px以上で28px へ滑らかに広げる */
.l-header__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, calc(16px + (100vw - 1100px) / 15), 28px);
}

.l-header__link {
  position: relative;
  display: block;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
}

/* hover と現在地は下に2pxの朱線。現在地は aria-current="page"（詳細ページの親項目は aria-current="true"） */
.l-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s;
}

.l-header__link:hover::after,
.l-header__link[aria-current="page"]::after,
.l-header__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.l-header__cta {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
}

.l-header__cta .c-button {
  padding-inline: 14px;
}

/* ボタンの文言：PCは「無料AI検索診断」、SPは「無料診断」 */
.l-header__label-sp {
  display: none;
}

/* ハンバーガー（PCでは非表示） */
.l-header__toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-content: center;
  gap: 6px;
}

.l-header__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 1px;
}

@media (min-width: 1200px) {
  .l-header__inner {
    --header-pad: var(--container-pad);
  }
}

@media (min-width: 1280px) {
  .l-header__inner {
    gap: 20px;
  }

  .l-header__cta .c-button {
    padding-inline: 18px;
  }
}

@media (max-width: 1099.98px) {
  .l-header__inner {
    --header-pad: var(--container-pad);
    gap: 8px;
  }

  .l-header__logo {
    /* 右側のボタン類をページごとに外しても、ハンバーガーが右端に残るようにする */
    margin-right: auto;
  }

  .l-header__logo img {
    height: 22px;
  }

  .l-header__nav,
  .l-header__cta .l-header__contact {
    display: none;
  }

  .l-header__cta .c-button {
    padding-inline: 14px;
    font-size: 13px;
  }

  .l-header__label-pc {
    display: none;
  }

  .l-header__label-sp {
    display: inline;
  }

  .l-header__toggle {
    display: grid;
  }
}

.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .3s ease, visibility 0s linear .3s;
}

.l-drawer.is-open {
  visibility: visible;
  transform: none;
  transition: transform .3s ease, visibility 0s;
}

.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 8px;
  height: 64px;
  padding-left: max(var(--container-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--container-pad), env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--c-ink);
}

.l-drawer__logo {
  display: block;
  min-width: 0;
}

.l-drawer__logo img {
  width: auto;
  height: 22px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.l-drawer__close {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.l-drawer__close::before,
.l-drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  margin: -1px 0 0 -12px;
  background: var(--c-ink);
  border-radius: 1px;
}

.l-drawer__close::before {
  transform: rotate(45deg);
}

.l-drawer__close::after {
  transform: rotate(-45deg);
}

.l-drawer__nav {
  flex: none;
  padding: 8px max(var(--container-pad), env(safe-area-inset-right, 0px)) 0 max(var(--container-pad), env(safe-area-inset-left, 0px));
}

.l-drawer__link {
  position: relative;
  display: block;
  padding: 18px 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-soft);
}

.l-drawer__link:hover {
  color: var(--c-accent-text);
}

/* 現在地（aria-current="page"。詳細ページの親項目は aria-current="true"）：朱の文字・太字と、左の朱の線。
   ヘッダー（PC）の下線と同じ考え方で、朱を現在地の目印にする。小さい朱の文字なので --c-accent-text を使う。
   線は文字の左（ドロワーの左余白の中）に置くので、文字の位置は動かない */
.l-drawer__link[aria-current="page"],
.l-drawer__link[aria-current="true"] {
  font-weight: 700;
  color: var(--c-accent-text);
}

.l-drawer__link[aria-current="page"]::before,
.l-drawer__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -14px;
  width: 3px;
  background: var(--c-accent);
}

.l-drawer__actions {
  display: grid;
  gap: 12px;
  flex: none;
  padding: 28px max(var(--container-pad), env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(var(--container-pad), env(safe-area-inset-left, 0px));
}

.l-drawer__actions .c-button {
  width: 100%;
}

/* ドロワーを開いている間は背面のスクロールを止める */
html.is-drawer-open {
  overflow: hidden;
}

@media (min-width: 1100px) {
  .l-drawer {
    display: none;
  }
}

.l-footer {
  padding-top: 72px;
  background: var(--c-dark-2);
  color: var(--c-on-dark-2);
}

.l-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr);
  gap: 48px;
  padding-bottom: 72px;
}

.l-footer__logo {
  display: inline-block;
}

.l-footer__logo img {
  width: auto;
  height: 24px;
}

.l-footer__company {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-on-dark);
}

.l-footer__address {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.7;
}

.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 48px;
}

.l-footer__heading {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-on-dark);
}

.l-footer__list {
  display: grid;
  gap: 4px;
}

.l-footer__link {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-on-dark-2);
  text-decoration: none;
  transition: color .2s;
}

.l-footer__link:hover {
  color: var(--c-on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.l-footer__bottom {
  padding-block: 24px;
  border-top: 1px solid var(--c-line-dark);
}

.l-footer__copy {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
}

/* タブレット・SP：ロゴ（①）を上に置き、②〜④をその下に並べる */
@media (max-width: 1099.98px) {
  .l-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .l-footer__nav {
    gap: 32px 24px;
  }
}

@media (max-width: 767.98px) {
  .l-footer {
    padding-top: 56px;
  }

  .l-footer__grid {
    padding-bottom: 48px;
  }

  .l-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  /* 2列の最後に1つだけ並ぶ列は、長いリンク名が収まるよう横いっぱいに使う */
  .l-footer__col--wide {
    grid-column: 1 / -1;
  }
}

/* l-sticky-cta：SP追従CTA（767px以下だけ表示）
   診断・送信完了ページのように出さないページでは、この要素ごと置かない */
.l-sticky-cta {
  display: none;
}

@media (max-width: 767.98px) {
  .l-sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--c-white);
    border-top: 1px solid var(--c-ink);
  }

  .l-sticky-cta .c-button {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    padding-inline: 8px;
  }

  /* フッターが追従CTAに隠れないよう、同じ高さの余白を body の下に取る。
     追従CTAを置くページだけ <body class="l-has-sticky"> にする（:has 疑似クラスは古い Safari・Firefox で効かないため、クラスで切り替える）。
     追従CTAを置かないページ（診断・送信完了）は、クラスも l-sticky-cta も付けない */
  body.l-has-sticky {
    padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  }

  /* キーボード（Tab キー）で選んだ項目が、画面の下に固定された追従バーの下に隠れないようにする。
     ページのスクロール領域の下端に、バーの実際の高さ（上下の余白 10px + ボタン 48px + 上の線 1px = 69px。
     iPhone ではホームバーの分も）の余白を取り、選んだ項目をバーの上までスクロールさせる。
     html に付ける（body に付けても、ページのスクロールには効かない）。追従バーの高さを変えたら、ここも同じ値にする */
  html {
    scroll-padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  }
}

/* 強制カラー（Windowsのハイコントラスト）では背景色が消えるので、線として描いている部分に文字色を指定する */
@media (forced-colors: active) {
  .l-header__toggle-bar,
  .l-drawer__close::before,
  .l-drawer__close::after,
  .l-header__link::after,   /* 現在地・hover の下線（::after の背景で描いている） */
  .l-drawer__link[aria-current="page"]::before,   /* ドロワーの現在地の左の線 */
  .l-drawer__link[aria-current="true"]::before {
    background-color: CanvasText;
  }
}