@charset "UTF-8";
/* ==========================================================================
   layout — ページ骨格 / ヘッダー / フッター
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ全体（カンバス 1440 基準）
   -------------------------------------------------------------------------- */
.l-page {
  position: relative;
  width: 100%;
  /* FV はカンバス上端から 144px。margin だと相殺してヘッダーの絶対位置が
     ずれるため、padding で確保する */
  padding-top: 144px;
  overflow-x: clip;
}

/* TAB: ヘッダーは通常フローの静的バー（h71）のため上余白は不要 */
@media (max-width: 1023px) {
  .l-page { padding-top: 0; }
}

/* SP: ヘッダーは FV 上に透過配置。写真上端はカンバス 61px */
@media (max-width: 767px) {
  .l-page { padding-top: 61px; }
}

/* セクション共通のセンタリング */
.l-container {
  width: var(--container);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   ヘッダー（0:432）— FV 上に絶対配置 / top:32px・幅 1370px
   ロゴ・ナビ・CTA の間は、ナビの左右に均等な余白を配分する。
   -------------------------------------------------------------------------- */
.l-header {
  position: absolute;
  top: var(--header-top);
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  width: var(--header-w);
  height: var(--header-h);
  margin-left: calc(var(--header-w) / -2);
}

.l-header__logo {
  flex-shrink: 0;
  width: auto;
  font-family: var(--font-logo);
  font-size: 22px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}

.l-header__nav {
  display: flex;
  flex: 0 1 754px;
  gap: 0;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
}

/* 1440px 未満（流動域）はナビ領域を縮め、5項目の均等幅を維持する */
@media (max-width: 1439px) {
  .l-header__nav {
    flex: 0 1 754px;
    gap: 0;
  }
}

.l-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 10px; /* カンプ: CTA 右端 1360px（ヘッダー幅 1370px） */
  margin-left: 0;
}

.l-header__cta {
  flex-shrink: 0;
}

/* ハンバーガー（TAB/SP のみ表示） */
.l-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 12px;
}

.c-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28.8px;
  height: 28.8px;
  overflow: hidden;
}

.c-hamburger span {
  display: block;
  width: 27px;
  height: 2px;
  background-color: #8b8bad;
}

/* --------------------------------------------------------------------------
   ヘッダー TAB（0:2190）— 静的バー h70 + border-bottom / ナビはドロワーへ
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .l-header {
    position: static;
    z-index: 10;
    justify-content: space-between;
    width: 100%;
    height: 71px; /* 70px + border-bottom 1px */
    padding-left: 40px;
    margin-left: 0;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }

  .l-header__logo {
    width: auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading-sub);
  }

  /* ナビはドロワーへ集約（カンプ TAB/SP ともヘッダー内ナビなし） */
  .l-header__nav {
    display: none;
  }

  /* カンプ: LINE ボタンとハンバーガーは右端に密着（0:2192） */
  .l-header__actions {
    margin-right: 0;
  }

  .l-header__menu {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   ヘッダー SP（0:1260）— FV 上に透過配置 h60 / LINE は 42px 角アイコン
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .l-header {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    padding-left: 20px;
    background-color: transparent;
    border-bottom: 0;
  }

  .l-header__logo {
    font-size: 22px;
    font-weight: 400;
    color: #000;
  }

  /* カンプ: LINE 290–332px / ハンバーガー 342–370.8px（右余白 19.2px） */
  .l-header__actions {
    gap: 10px;
    margin-right: 19.2px;
  }

  /* CTA のサイズ指定は component.css（.c-btn-line と同ファイル）側 */
  .l-header__cta {
    margin-top: 2px; /* カンプ: top 10px（h60 の中央は 9px） */
  }

  .l-header__menu {
    width: 28.8px;
    height: 28.8px;
    padding: 0;
    margin-top: 0.8px; /* カンプ: 中心 top calc(50% + 0.4px) */
    filter: drop-shadow(0 4.8px 6px rgba(0, 0, 0, 0.25));
  }
}

/* --------------------------------------------------------------------------
   ドロワー（0:1395）— SP/TAB のナビ。背景は FV 写真 + 白 40% オーバーレイ
   -------------------------------------------------------------------------- */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-drawer[data-open="true"] {
  visibility: visible;
  opacity: 1;
}

.l-drawer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.l-drawer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-drawer__bg::after {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.4);
  content: "";
}

/* 閉じるボタン（ハンバーガーの ×。SP_header 内 左 342px・中央） */
.l-drawer__close {
  position: absolute;
  top: 30px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28.8px;
  height: 28.8px;
  padding: 0;
  transform: translateY(-50%);
  filter: drop-shadow(0 4.8px 6px rgba(0, 0, 0, 0.25));
}

.l-drawer__close span {
  position: absolute;
  width: 27px;
  height: 2px;
  background-color: #8b8bad;
}

.l-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.l-drawer__close span:nth-child(2) { transform: rotate(-45deg); }

.l-drawer__logo {
  margin-top: 88px;
  font-family: var(--font-logo);
  font-size: 40px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
}

.l-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 348px;
  max-width: calc(100% - 46px);
  margin-top: 41px; /* カンプ: LOGO 下端 155px → ナビ上端 196px */
  padding-bottom: 60px;
}

.l-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.l-drawer__nav .c-nav__ja {
  color: var(--color-text);
}

.l-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   フッター（0:644）
   -------------------------------------------------------------------------- */
.l-footer {
  padding: 70px 120px;
  background-color: var(--color-footer);
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 541px;
}

.l-footer__logo {
  font-family: var(--font-logo);
  font-size: 40px;
  font-weight: 400;
  color: #fff;
}

.l-footer__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* 事業者情報：カンプの書体は Cinzel（欧文書体・確認事項#6） */
.l-footer__row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  font-family: var(--font-cinzel);
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: #fff;
}

.l-footer__row--area {
  gap: 13px;
  align-items: center;
}

.l-footer__row dt {
  white-space: nowrap;
}

.l-footer__row dd {
  margin: 0;
}

.l-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
}

.l-footer__nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  width: 795px;
}

/* --------------------------------------------------------------------------
   フッター — TAB（I0:2510;19:2177）: 全要素を中央揃えの縦積みへ
   ※背景色が TAB のみ #7db7d2（PC/SP は #7ab2d3・確認事項#20）
   ※ロゴ書体も TAB は Cinzel 40px / SP は Shippori Mincho 32px（確認事項#21）
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .l-footer {
    padding: 96px 19px;
    background-color: #7db7d2;
  }

  .l-footer__inner {
    gap: 40px;
    align-items: center;
    width: min(500px, 100%);
    margin-inline: auto;
  }

  .l-footer__brand {
    gap: 40px;
    align-items: center;
    width: 100%;
  }

  .l-footer__logo {
    font-family: var(--font-cinzel);
    line-height: 24px;
  }

  .l-footer__info {
    gap: 20px;
    align-items: center;
  }

  .l-footer__row,
  .l-footer__row--area {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .l-footer__row dt {
    line-height: 16px;
  }

  .l-footer__row--area dt {
    line-height: 25.6px;
  }

  .l-footer__row dd {
    line-height: 24px;
  }

  .l-footer__row--area dd {
    font-size: 14px;
  }

  .l-footer__bar {
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    height: auto;
  }

  .l-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(348px, 100%);
  }
}

/* --------------------------------------------------------------------------
   フッター — SP（0:167）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .l-footer {
    background-color: var(--color-footer);
  }

  .l-footer__inner {
    width: min(351px, 100%);
  }

  .l-footer__logo {
    font-family: var(--font-logo);
    font-size: 32px;
    line-height: normal;
  }
}