/* ==========================================================================
   components.css — 全ページで使い回す部品
   ヘッダ、フッタ、検索、ボタン、検索のオーバーレイ、アイコン、白い面（.card）。
   sp（〜767px）を基準に書き、tablet / desktop / wide で上書きする（DESIGN.md 8章）
   下層ページはこのファイルまでを読めばヘッダとフッタが組める。
   トップ固有のもの（ヒーロー、カードの2カラム、視差、写真行）は top.css にある。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. アイコン
   Remixicon 4.9.0 のパスを <symbol> として body 先頭のスプライトに置き、
   各所から <use href="#icon-xxx"> で引く。CDN は使わない（DESIGN.md 4.7）。
   塗り（fill）のアイコンなので、線の太さの指定は持たない。
   -------------------------------------------------------------------------- */

/* スプライト本体。定義だけを持ち、描画されない */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. 文字の装飾
   -------------------------------------------------------------------------- */

.accent {
  color: var(--color-accent-default);
}

/* --------------------------------------------------------------------------
   3. 検索フォームとボタン
   DESIGN.md 4.10：入力欄は1つ。種類を選ばせない。
   修正10：375px幅で placeholder「住所・町名・郵便番号など」が途中で切れていた。
   列間・ボタンの左右余白・入力欄の左右余白を詰め、SPでは文字サイズを床の14pxに落として
   全文を1行に収める。高さ46pxは変えないのでタッチ対象44pxは保つ。
   -------------------------------------------------------------------------- */

.search {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--top-control-h);
  padding: 0 var(--space-12);
  font-size: var(--size-min-sp);
  line-height: var(--leading-body);
  color: var(--top-text);
  background-color: var(--color-bg-surface);
  border: var(--stroke-control) solid var(--top-input-border);
  border-radius: var(--top-control-radius);
}

.search__input::placeholder {
  color: var(--top-input-border);
  opacity: 1;
}

.search__input:focus-visible,
.search__submit:focus-visible {
  outline-offset: 0;
}

.search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--top-control-h);
  padding: 0 var(--space-8);
  font-size: var(--size-min-sp);
  font-weight: var(--weight-h3);
  color: var(--color-text-inverse);
  background-color: var(--color-accent-default);
  border: 0;
  border-radius: var(--top-control-radius);
  cursor: pointer;
  white-space: nowrap;
  /* 修正10：transition を :hover の中に書くと、離れるときに効かず色が瞬時に戻る。
     平常時の宣言として持たせ、入るときも離れるときも同じ時間で変える。 */
  transition: background-color 0.12s linear;
}

.search__submit:hover {
  background-color: var(--color-accent-deep);
}

.search__icon {
  flex: 0 0 auto;
}

/* 修正14：SP専用の「場所を調べる」ボタン。ヘッダとヒーローの2箇所に置き、
   どちらからも検索のオーバーレイを開く。768px以上では消す。 */
.btn-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 0;
  font-weight: var(--weight-h3);
  color: var(--color-text-inverse);
  background-color: var(--color-accent-default);
  border: 0;
  border-radius: var(--top-control-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s linear;
}

.btn-open:hover {
  background-color: var(--color-accent-deep);
}

/* カンプ spv4_fv：x254〜399（幅146）・y20〜65（高さ46） */
.btn-open--header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 146px;
  height: 46px;
  /* 修正18：カンプ実測は1文字13.7px。DESIGN.md 3.4 の最小（14px）を当てる */
  font-size: var(--size-min-sp);
  /* 修正18：カンプ実測。文字の左端まで20px、円の右端からボタンの右端まで14px */
  padding: 0 14px 0 20px;
  gap: 10px;
}

/* カンプ実測：円は直径22px。ri-arrow-right-circle-line は円がviewBoxの83.33%
   （実測 20/24）しかないため、フレームは22 / 0.8333 = 26.4px にする。
   SPヘッダの検索トグルとPCヘッダ・PCヒーローの検索送信ボタンは、いずれも円22pxで揃うため
   ここにまとめる（PC専用の別ルールは持たない） */
.btn-open--header .search__icon,
.search--header .search__icon,
.search--hero .search__icon {
  width: 26.4px;
  height: 26.4px;
  margin-inline: -2.2px;
}

/* カンプ spv4_fv：x106〜313（幅208）・y462〜527（高さ66） */
.btn-open--hero {
  /* インライン整形文脈だと margin: auto で中央に寄らないのでブロックレベルにする */
  display: flex;
  width: 208px;
  height: 66px;
  margin: var(--space-48) auto 0;
  /* 修正18：カンプ実測は1文字20.3px。DESIGN.md 3.4 の中見出しSP（20px）を当てる */
  font-size: var(--size-h2-sp);
  /* 修正18：カンプ実測。文字の左端まで26px、円の右端からボタンの右端まで20px */
  padding: 0 20px 0 26px;
  gap: 12px;
  /* 修正18：カンプの6文字は122px（1文字20.3px）。20pxのままだと117pxで4px足りないので詰める分を戻す */
  letter-spacing: 0.33px;
}

/* カンプ実測：円は直径29px。フレームは29 / 0.8333 = 34.8px にする（上記と同じ理由） */
.btn-open--hero .search__icon,
.search--menu .search__submit .search__icon {
  width: 34.8px;
  height: 34.8px;
  margin-inline: -2.9px;
}

/* --------------------------------------------------------------------------
   4. ヘッダ（本文の上に重ねる固定ヘッダ）
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 修正14：カンプ spv4_fv でロゴ（y28〜57）とボタン（y20〜65）の中心が42.5pxにある。
     中央そろえでその位置に来る高さは85px。 */
  height: 85px;
  padding: 0 20px;
  /* ぼかしだけでは文字の下地が足りないので、半透明の地は残す */
  background-color: rgba(255, 255, 255, 0.6);
  /* 修正3：スマートスクロール。下方向で隠し、上方向で戻す */
  transition: transform 0.24s ease;
  will-change: transform;
}

/* 修正4：Figmaの「背景のぼかし：プログレッシブ（開始50／終了0）」の近似。
   上端でぼかしが最も強く、下端でゼロになる勾配を、ぼかし量の異なる4層で階段状に作る。
   各層はグラデーションのマスクで上側だけを見せ、境目は半透明の区間でなだらかに消す。
   なお Figma のぼかし半径 50 は CSS の blur() では概ね半分の 25px に相当する（両者の定義が
   異なるための換算で、厳密な対応ではない）。最も強い層を blur(25px) としたのはこの換算による。 */
.header-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 1層目：ヘッダ全体に薄くかける */
.header-blur--1 {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 85%, rgba(0, 0, 0, 0) 100%);
}

/* 2層目：上75%まで */
.header-blur--2 {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0) 75%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0, 0, 0, 0) 75%);
}

/* 3層目：上50%まで */
.header-blur--3 {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0) 50%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0, 0, 0, 0) 50%);
}

/* 4層目：上25%まで。ここが最も強い */
.header-blur--4 {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0, 0, 0, 0) 25%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0, 0, 0, 0) 25%);
}

/* ぼかしの層より前にロゴ・検索・ボタンを置く */
.site-header__logo,
.site-header .search--header,
.btn-open--header {
  position: relative;
  z-index: 1;
}

/* backdrop-filter が効かない環境では地が透けすぎて文字が読めないので不透明度を上げ、
   4層すべてを畳んで消す */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background-color: rgba(255, 255, 255, 0.92);
  }

  .header-blur {
    display: none;
  }
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* 修正15：動きを減らす設定では、トランジションだけを止める。
   表示・非表示の規則は変えない（最上部でヘッダを出さないため）。 */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* 修正10：img の高さ（31px）がそのままリンクの当たり判定だった。
   縦に伸ばしてタッチ対象44pxを確保する。 */
.site-header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
}

/* カンプ spv4_fv：x20〜130（幅111・高さ30） */
.site-header__logo img {
  width: 111px;
  height: auto;
}

.search--header {
  display: none;
}

/* --------------------------------------------------------------------------
   5. 検索のオーバーレイ（SP専用）
   修正14：中身は閉じる×印・検索欄・検索ボタンの3つだけ。ロゴとタグラインは置かない。
   開閉はフェードイン・フェードアウトさせる（修正8。意匠判断が DESIGN.md 0.6 に優越する）。
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background-color: var(--top-menu-bg);
  /* 修正8：hidden 属性ではなく opacity と visibility で開閉する。
     visibility が hidden の間はメニュー内の要素がフォーカスを受けない。 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu.is-open {
    transition: none;
  }
}

.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/menu-bg.jpg");
  background-position: center;
  background-size: cover;
  opacity: 0.18;
}

/* カンプ overlay_v2：字面はx368〜395・y24〜51（28×28）、中心はx381.5・y37.5。
   ri-close-line は字面が viewBox の53.03%（実測 12.728/24）しかないため、
   字面28pxを出すにはフレームを52.8px（28 / 0.5303）にする必要がある。
   フレームがそのまま当たり判定になり44pxを超えるため、::before の拡張は不要。
   中心をカンプ位置に保つため top/right をフレーム拡大分だけ引く
   （right: 420 - 381.5 - 52.8/2 = 12.1、top: 37.5 - 52.8/2 = 11.1）。 */
.menu__close {
  position: absolute;
  top: 11.1px;
  right: 12.1px;
  /* 修正5：.menu__body も z-index:1 で、DOM順が後のため閉じるボタンを覆っていた。
     クリックが .menu__body に吸われて閉じられなかったので、こちらを上に置く。 */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52.8px;
  height: 52.8px;
  padding: 0;
  color: var(--color-text-inverse);
  background: none;
  border: 0;
  cursor: pointer;
}

/* カンプ overlay_v2：検索欄 x35〜384（350×43）・y284〜326、
   検索ボタン x106〜313（208×66）・y345〜410。左右余白35px、上余白284px。 */
.menu__body {
  position: relative;
  z-index: 1;
  padding: 284px 35px 40px;
  text-align: center;
}

/* 修正14：検索欄と検索ボタンは横並びではなく縦積み。間は19px */
.search--menu {
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.search--menu .search__input {
  align-self: stretch;
  height: var(--top-control-h);
}

.search--menu .search__submit {
  width: 208px;
  height: 66px;
  /* 修正18：ヒーローのボタンと同じ中身にそろえる */
  font-size: var(--size-h2-sp);
  padding: 0 20px 0 26px;
  gap: 12px;
  letter-spacing: 0.33px;
}

/* --------------------------------------------------------------------------
   6. 白い面（カード）
   面の地・角丸・影・内側余白だけを持つ。中身の並べ方はページ側で足す。
   -------------------------------------------------------------------------- */

.card {
  padding: 55px 20px;
  background-color: var(--color-bg-surface);
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   7. フッタ
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 60px 20px 40px;
  background-color: var(--color-bg-surface);
  text-align: center;
}

.site-footer__logo {
  width: 265px;
  height: auto;
  margin: 0 auto;
}

.site-footer__tagline {
  margin-top: var(--space-24);
  font-size: var(--size-body-sp);
  font-weight: var(--weight-h3);
  line-height: var(--leading-heading);
}

/* 修正18：SPはタグラインを句点で2行に割る。PCは1行のまま（768px以上で消す）。 */
.site-footer__br {
  display: inline;
}

.site-footer__links {
  margin-top: var(--space-48);
}

/* 修正10：a の上下余白でタッチ対象を44px以上にしたぶん、li の余白は落とす。
   見た目の行間（24px）は 12px + 12px で保たれる。 */
.site-footer__links li + li {
  margin-top: 0;
}

.site-footer__links a {
  display: inline-block;
  padding: var(--space-12) 0;
  font-size: var(--size-body-sp);
  color: var(--color-primary-dark);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

.site-footer__copyright {
  margin-top: var(--space-48);
  font-size: var(--size-min-sp);
  line-height: var(--leading-body);
  color: var(--top-text-footer);
  text-align: left;
}

.site-footer__disclaimer {
  margin-top: var(--space-8);
  font-size: var(--size-min-sp);
  line-height: var(--leading-body);
  color: var(--top-text-footer);
  text-align: left;
}

/* ==========================================================================
   tablet（768〜1023px）
   ========================================================================== */

@media (min-width: 768px) {

  .site-header {
    height: 96px;
    padding: 0 var(--pad-tablet);
  }

  .site-header__logo img {
    width: 122px;
  }

  /* 768px以上は幅に余裕があるので、入力欄の文字を本文サイズへ戻す */
  .search__input {
    padding: 0 var(--space-16);
    font-size: var(--size-body-pc);
  }

  .search__submit {
    padding: 0 var(--space-12) 0 22px;
  }

  .search--header {
    display: flex;
    gap: 10px;
    width: min(560px, 60%);
  }

  .btn-open,
  .menu {
    display: none;
  }

  .card {
    padding: 48px 40px;
    background-color: var(--color-bg-surface);
    border-radius: var(--top-card-radius);
  }

  .site-footer__logo {
    width: 340px;
  }

  .site-footer__br {
    display: none;
  }

  .site-footer {
    padding: 40px var(--pad-tablet);
    background-color: var(--color-bg-surface);
    text-align: left;
  }

  /* 修正13：タグラインの下端と免責行の下端をそろえる。左右で段数が違うので
     上でそろえると下がばらつく。下端基準を使う。 */
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px 32px;
    max-width: var(--top-content-max);
    margin-inline: auto;
  }

  /* 修正13：カンプ footer_v4 でロゴとタグラインが横並びから縦積みに変わった */
  .site-footer__brand {
    display: block;
  }

  /* 縦積みで横幅を取り合わなくなったので、ロゴをカンプ実測の222pxに戻す */
  .site-footer__logo {
    width: 222px;
    margin: 0;
  }

  /* 34字1行を413pxに収める。palt は body で全体に効かせている。
     文字サイズは床の14pxのまま下げない。 */
  .site-footer__tagline {
    margin-top: 21px;
    font-size: var(--size-min-pc);
    line-height: 1.4;
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin-top: 0;
  }

  .site-footer__links li + li {
    margin-top: 0;
  }

  /* PCはポインタ操作なので、タッチ対象を稼ぐためのa上下余白は落とす。
     inline-block のままだと行ボックスにベースライン下の余りが出るので block にする */
  .site-footer__links a {
    display: block;
    padding: 0;
    font-size: var(--size-min-pc);
    line-height: 1.4;
    color: var(--top-text-footer);
  }

  .site-footer__meta {
    min-width: 0;
  }

  .site-footer__copyright {
    margin-top: 20px;
    font-size: var(--size-min-pc);
    line-height: 1.4;
  }

  .site-footer__disclaimer {
    margin-top: 0;
    font-size: var(--size-min-pc);
    line-height: 1.4;
  }
}

/* ==========================================================================
   desktop（1024〜1439px）
   ========================================================================== */

@media (min-width: 1024px) {

  .site-header {
    height: 118px;
    padding: 0 var(--pad-desktop);
  }

  .card {
    padding: 51px 60px;
  }
}

/* ==========================================================================
   wide（1440px〜）
   ========================================================================== */

@media (min-width: 1440px) {

  .card {
    padding: 51px 60px 60px;
  }

  /* 修正10：左170px・右88pxの非対称配置はカンプの意匠。1600pxではその実寸、
     それより狭いときは同じ比率（10.625% / 5.5%）で縮めて、brand と meta を
     1段に保つ。上下はカンプ実測（上40px・下43px、フッタ高181px）に合わせる。 */
  .site-footer {
    padding: 40px clamp(40px, 5.5vw, 88px) 40px clamp(88px, 10.625vw, 170px);
  }

  .site-footer__inner {
    flex-wrap: nowrap;
    column-gap: 0;
  }

  /* カンプ実測：左ブロックの左端170px、右ブロックの左端640px（差470px） */
  .site-footer__brand {
    flex: 0 0 470px;
  }
}