/* ==========================================================================
   Layout — ヘッダー / SPメニュー / フッター
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   Figma実測（PC 1440px）:
     ヘッダー高さ 128 / 背景は透明 / 左右の余白 40
     ロゴ 100×96.7  ナビ 16px SemiBold・項目間40  ボタン 160×48・枠線1px・角丸24
   SP（375px）:
     高さ 80 / 背景白 / 左右24 / ロゴ 49.6×48 / ハンバーガー 幅40・2本線
   -------------------------------------------------------------------------- */

.l-header {
  /* 画面上部に固定。固定した分の高さは body の padding で確保する */
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  /* 中身と同じく最大1600pxで中央寄せ（サイドマージンは40px系） */
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--header-px);
  /* 背景は敷かない。代わりに下の ::before の「もや」で文字を読みやすくする
     （参考サイトと同じ。PC・SPとも背景なし） */
  background: transparent;
  /* ロゴとハンバーガーは currentColor を参照するので、
     この color を切り替えるだけで白抜きに変わる */
  color: var(--c-text);
  /* 出てくるときはゆっくり（0.9秒）。参考サイトの実測値に合わせている */
  transition: opacity 0.9s cubic-bezier(0.26, 0.06, 0, 1),
              translate 0.9s cubic-bezier(0.26, 0.06, 0, 1),
              background-color 0.3s var(--ease),
              color var(--dur) var(--ease);
}

body {
  padding-top: var(--header-h);
}

/* 下へスクロールしたとき。画面外まで飛ばさず、少し上へ引きながら消える
   （参考サイトの実測値：30px・消えるのは0.6秒、動きは1秒） */
.l-header.is-hidden {
  opacity: 0;
  translate: 0 -30px;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.36, 0.04, 0.23, 1),
              translate 1s cubic-bezier(0.43, 0.05, 0.17, 1);
}

/*
 * ヘッダーの「もや」。
 * ヘッダーのすぐ上に見えない板を置き、その影だけを下に落としている。
 * 板そのものは画面外に逃がしてあるので境目ができず、
 * 上ほど明るく下に向かって自然に消える（参考サイトと同じ手法。PC・SP共通）。
 */
.l-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  translate: 0 -100%;
  box-shadow: 0 0 200px 100px rgb(239 239 239 / 0.7);
  transition: opacity 0.3s cubic-bezier(0.26, 0.06, 0, 1);
}

/* SPメニューを開いている間は、後ろの濃紺を邪魔しないよう消す */
body.is-menu-open .l-header::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .l-header {
    transition: none;
  }
}

/* SPメニューを開いている間：
   ヘッダーの背景を透かして、後ろの濃紺（#204765）を見せる。
   Figmaの menu フレームでもヘッダー帯には塗りがなく、ロゴと×が白になっている。 */
body.is-menu-open .l-header {
  background: transparent;
  color: var(--c-bg);
}

.l-header__logo {
  flex-shrink: 0;
  width: var(--logo-w);
  line-height: 0;
}

.l-header__logo svg,
.l-header__logo img {
  width: 100%;
  height: auto;
}

/* --- グローバルナビ（PCのみ） --- */

.l-header__nav {
  display: none;
}

.l-header__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

/* Figma実測: Shippori Mincho B1 Bold 16px / 行送り1.0 */
.l-header__link {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* --- ボタン ---
   Figma実測: 160×48 / 枠線1px / 角丸24（＝pill）/
   Shippori Mincho B1 SemiBold 16px / 左右パディング32 */

/* 枠線は border ではなく内側の box-shadow で描く。
   Figmaの枠線はフレームのサイズに含まれない（160×48 が枠線込みの外形）が、
   CSSの border は box-sizing: border-box でも「指定サイズ＋枠線」ではなく
   内容量から算出される幅に加算されるため、自動幅の要素だと2px太ってしまう。
   inset の box-shadow なら角丸に追従しつつレイアウトに影響しない。 */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  /* Figma実測: 160×48 に対して文字16px → 上下16px・左右32px */
  padding: 16px 32px;
  box-shadow: inset 0 0 0 1px currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--ff-serif);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-btn:hover {
  opacity: 1;
  background: var(--c-text);
  color: var(--c-bg);
}

/* 濃紺の背景に載せる白抜きバージョン（SPメニュー内で使う） */
.c-btn--invert:hover {
  background: var(--c-bg);
  color: var(--c-primary-dark);
}

/* ヘッダーのボタンはPC専用で --fs-nav が16pxまで伸びるが、
   SPメニューのボタンは375px時点で16px（デザイン実測 160×48・文字16px）。
   --fs-nav のSP値12pxを拾ってしまうため、ここで上書きする。 */
.l-spmenu .c-btn {
  font-size: 16px;
}

.l-header__cta {
  display: none;
}

/* --- ハンバーガーボタン（SPのみ） ---
   Figma実測: 線幅2px・長さ40px の線が2本、中心間12px（y=34 と y=46、ヘッダー中央は40）。
   開くと2本とも中心（y=40）に集まり、±15度 傾いて×になる。
   45度ではなく15度の浅い角度なのがこのデザインの特徴。 */

.l-header__toggle {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 40px;
  height: 14px; /* 上の線の上端33〜下の線の下端47 = 14px */
  color: inherit;
}

.l-header__toggle span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: top var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.l-header__toggle span:nth-child(1) { top: 0; }
.l-header__toggle span:nth-child(2) { top: 12px; }

/* 開いた状態：2本とも中央に重ねて、逆向きに15度ずつ回す */
body.is-menu-open .l-header__toggle span {
  top: 6px;
}

body.is-menu-open .l-header__toggle span:nth-child(1) {
  transform: rotate(-15deg);
}

body.is-menu-open .l-header__toggle span:nth-child(2) {
  transform: rotate(15deg);
}

/* --------------------------------------------------------------------------
   SP メニュー
   Figma実測（menu 375×812）:
     背景 #204765 / ナビ 24px・項目間48・x=24, y=120 起点
     お問い合わせボタン 160×48 @ 24,429 / メール 16px @ 27,517
   -------------------------------------------------------------------------- */

.l-spmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  /* 上の余白はヘッダー高さ + 40px＝ナビ枠の上端(y=120)。
     枠の内側2.5pxから文字が始まる分は .l-spmenu__list の padding で持つ。 */
  padding: calc(var(--header-h) + 40px) 24px 40px;
  background: var(--c-primary-dark);
  color: var(--c-bg);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* 閉じている状態。visibility も切ることでキーボード操作の対象から外す */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.l-spmenu.is-open {
  opacity: 1;
  visibility: visible;
}

/* Figma実測: ナビの枠は 222×269（y=120〜389）。
   中の文字は 6行×24px ＋ 間隔5×24px ＝ 264pxで、枠の上下に2.5pxずつ余分がある。
   その2.5pxを padding で持つことで、枠の高さが269px、
   1行目の文字が122.5px、最終行の下端が386.5pxとデザインどおりになる。 */
.l-spmenu__list {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 24pxの文字 + 24pxの間隔 = 48px間隔になる */
  padding-block: 2.5px;
}

/* フッターのナビと同じく、li をflexにしてリンクの幅を文字ぶんに収める。
   display:block のままだと行いっぱい（327px）がクリック範囲になってしまう。 */
.l-spmenu__list li {
  display: flex;
}

/* Figma実測: Shippori Mincho B1 SemiBold 24px / 行送り1.0
   display:block にしないと、リンクがインラインのままで親のli側の行送り（本文1.8）が
   効いてしまい、項目の高さが指定より大きくなって以降の要素が下にずれる。 */
.l-spmenu__link {
  display: block;
  font-family: var(--ff-serif);
  font-size: 24px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* Figma実測（menu 375×812）: ナビ末尾 y=389 → ボタン y=429（40px）
   → メール y=517（ボタン下端477から40px）→ タグライン y=549（16px）。
   画面下端に貼り付くのではなく、ナビからの固定の間隔で並ぶ。 */
.l-spmenu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ナビ枠の下端(389px)からボタン(429px)まで40px */
  margin-top: 40px;
}

/* Figma実測 153×16。フッターのメールと同じ理由で幅を明示する。
   このメニューは768px未満でしか出ないため固定値でよい（コンテナは327px）。 */
.l-spmenu__mail {
  margin-top: 40px;
  width: 153px;
  white-space: nowrap;
  font-size: 16px;
  line-height: var(--lh-tight);
}

/* Figma実測: Gen Interface JP Regular 10px / 行送り1.25 / 3行 / 幅215
   実際に描画される最長行は213.97pxなので、215pxを指定しても折り返さない。 */
.l-spmenu__tagline {
  margin-top: 16px;
  width: 215px;
  font-size: 10px;
  /* Figmaは行送りを整数に丸める。10px × 1.25 = 12.5 → 13px となり、
     3行で39pxになる（倍率1.25のままだと37.5pxで1.5px足りない）。 */
  line-height: 13px;
  /* 改行位置は <br> で決めている。1行目は箱幅ぎりぎり（余裕1px程度）で、
     端末の書体差で FURNITURE だけが次行へ落ちるため、自動の折り返しは止める。 */
  white-space: nowrap;
}

/* メニューを開いている間は背面のスクロールを止める */
body.is-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   768px以上：ナビとCTAを出し、ハンバーガーとSPメニューを隠す
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {


  .l-header__cta {
    display: block;
  }

  /* ナビはロゴとボタンの中間ではなく、画面の中央に揃っている。
     Figma実測（1440px）: ナビ 404〜1036 → 中心720 = 画面幅の中央。 */
  .l-header__nav {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* PCではロゴが上下中央ではなく、上から30px（ヘッダー高128に対して23.4%）に置かれている。
     Figmaの実測値に合わせる。SPは上下中央のままでよい。 */
  .l-header__logo {
    align-self: flex-start;
    margin-top: calc(var(--header-h) * 0.234375);
  }

  .l-header__toggle,
  .l-spmenu {
    display: none;
  }
}

/* ==========================================================================
   Footer
   Figma: PC = Frame 136（1440×1526）/ SP = Component 5（375×1479）
   以下の数値はすべて実測値。SPを基準に書き、768px以上でPCの値へ補間する。
   ========================================================================== */

.l-footer {
  background: var(--c-primary-dark);
  color: var(--c-bg);
}

/* --------------------------------------------------------------------------
   お問い合わせ誘導ブロック
   -------------------------------------------------------------------------- */

.l-footer__cta {
  /* 上 SP80 → PC160 / 下 SP80 → PC120 */
  padding-block: clamp(80px, calc(80px + 80 * (100vw - 768px) / 672), 160px)
                 clamp(80px, calc(80px + 40 * (100vw - 768px) / 672), 120px);
}

.l-footer__cta-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-section-title); /* SP24 → PC48 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); /* 明朝の見出しと同じ -2%（PC 48px / SP 24px とも） */
}

.l-footer__cta-text {
  /* 見出しからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  font-size: var(--fs-body);
  /* 行送りは倍率だと丸め誤差が出るため、実測の行間をそのままpxで指定する
     （SP: 100px÷4行=25px / PC: 112px÷4行=28px） */
  line-height: clamp(25px, calc(25px + 3 * (100vw - 768px) / 672), 28px);
}

.l-footer__cta-list {
  /* 説明文からの間隔 SP40 → PC0（PCでは横並びになるため） */
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  /* ボタン間 SP16 → PC24 */
  gap: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

/* --- 大ボタン（560×88 / 角丸pill / 枠線1px） --- */

.c-btn-lg {
  display: flex;
  flex-direction: column; /* SPは補足が改行される */
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 20px 24px;
  box-shadow: inset 0 0 0 1px currentColor; /* 枠線は .c-btn と同じ理由で box-shadow */
  border-radius: var(--radius-pill);
  font-family: var(--ff-serif);
  font-weight: var(--fw-semibold);
  text-align: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-btn-lg:hover {
  opacity: 1;
  background: var(--c-bg);
  color: var(--c-primary-dark);
}

/* デザインでは2番目のボタンだけ77pxだったが、2026-08-13にクライアント確認のうえ
   75pxで統一。上下の余白20px＋文字ブロック35pxで、指定なしでも75pxになる。 */

/* 行送りはボタンによって違う（Figma実測）。
     補足なし「一般のお客様はこちら」 … 行送り1.0（16px）→ ボタン56px
     補足あり（2行になるもの）        … 行送り1.25（20px）＋補足15px＝35px → ボタン75px
   PCはどちらも1行組みで文字ブロック24px、ボタン88px。 */
.c-btn-lg__main {
  font-size: var(--fs-subhead); /* SP16 → PC24 */
  line-height: var(--lh-tight); /* 1行のボタン。SP16 / PC24 */
  white-space: nowrap; /* 見出しは語の途中で折らない */
}

/* 補足があるボタンだけ、1行目の行送りを125%にする。
   以前は1行目を16pxのままにして4pxの隙間で35pxを作っていたが、
   それだと1行目の文字が2px上に寄り、デザインと位置がずれていた。
   PCでは 24px のままになるよう clamp の上限をそろえてある。 */
.c-btn-lg:has(.c-btn-lg__sub) .c-btn-lg__main {
  line-height: clamp(20px, calc(20px + 4 * (100vw - 768px) / 672), 24px);
}

.c-btn-lg__sub {
  font-size: var(--fs-btn-sub); /* SP12 → PC16 */
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   区切り線（画面幅いっぱい・白の30%）
   -------------------------------------------------------------------------- */

/* 区切り線は本文ブロックの疑似要素として描く。
   hr要素として置くと1pxぶん場所を取り、下側の余白を119pxに削る必要が出てしまう。
   疑似要素なら場所を取らないので、上下とも設計値どおりの120pxで書ける。
   色はFigmaの「#FFFFFF・不透明度30%」をそのまま表したもの。 */
.l-footer__main::before {
  content: '';
  position: absolute;
  top: 0;
  /* 画面の左右いっぱいまで引く。
     中身は1600pxで頭打ちだが、この線だけは画面幅に関係なく端まで届かせる
     （2026-08-23クライアント指示）。
     中身が中央寄せなので、その中央から画面の半分ぶん外へ出すと端に一致する。 */
  inset-inline: calc(50% - 50vw);
  border-top: 1px solid rgb(255 255 255 / 0.3);
}

/* --------------------------------------------------------------------------
   ナビ・連絡先・ロゴ
   -------------------------------------------------------------------------- */

.l-footer__main {
  position: relative; /* ::before の区切り線の基準 */
  /* 上 SP80 → PC120 / 下 SP80 → PC254 */
  padding-block: clamp(80px, calc(80px + 40 * (100vw - 768px) / 672), 120px)
                 clamp(80px, calc(80px + 174 * (100vw - 768px) / 672), 254px);
}

.l-footer__list {
  display: flex;
  flex-direction: column;
  /* 項目間 SP16 → PC24（marginではなくgapで空けている） */
  gap: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

/* li をflexにすることで、中のリンクの幅が文字ぶんだけになる。
   （display:block のままだと行いっぱいに広がり、文字の右側の余白でも反応してしまう） */
.l-footer__list li {
  display: flex;
}

.l-footer__link {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-footer-nav); /* SP18 → PC32 */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* inline-block だと行ボックスのディセンダ分（約3px）が下に付き、
   次の住所ブロックがその分だけ下がってしまう。
   block + fit-content なら余白が出ず、クリック範囲も文字幅ぶんで収まる。 */
.l-footer__mail {
  display: block;
  /* 幅はFigmaの実測値（SP 230 / PC 612）を明示する。
     文字を並べた実寸はブラウザ側が0.66pxほど狭く出るため、fit-content だと
     デザインの数値と一致しない。描画位置は変わらず、右端に1px未満の余白が付くだけ。
     SPで612pxを固定するとコンテナ(327px)から溢れるので、必ず可変にすること。 */
  width: 230px;
  white-space: nowrap;
  /* ナビからの間隔 SP24 → PC48 */
  margin-top: clamp(24px, calc(24px + 24 * (100vw - 768px) / 672), 48px);
  font-size: var(--fs-footer-mail); /* SP24 → PC64 */
  line-height: var(--lh-tight);
  word-break: break-all;
}

.l-footer__address {
  /* メールからの間隔 SP24 → PC32 */
  margin-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 672), 32px);
  color: var(--c-line);
  font-size: var(--fs-small); /* SP12 → PC14 */
  font-style: normal;
  /* SP: 36px÷2行=18px / PC: 48px÷2行=24px */
  line-height: clamp(18px, calc(18px + 6 * (100vw - 768px) / 672), 24px);
}

/* 和文住所と英文住所の間隔。SP16 → PC8 と、広い画面ほど狭くなる */
.l-footer__address p + p {
  margin-top: clamp(8px, calc(16px - 8 * (100vw - 768px) / 672), 16px);
}

/* --- 規約系リンク（住所の下） ---
   ナビと同じ扱いにすると6項目のリズムが崩れるので、住所と同じ小さい文字にしている。
   このサイトは下線を使わないが、ここだけはフォームの同意文言と同じ理由で下線を付ける。
   周りが読み物の文字なので、下線が無いとリンクだと分からない。 */
.l-footer__legal {
  /* 住所からの間隔 SP16 → PC24 */
  margin-top: clamp(16px, calc(16px + 8 * (100vw - 768px) / 672), 24px);
}

.l-footer__legal-list {
  display: flex;
  /* SPの327px幅では2つ並べると収まらないことがあるため折り返しを許す */
  flex-wrap: wrap;
  gap: 8px 24px;
}

.l-footer__legal-link {
  color: var(--c-line); /* 住所と同じ明るさに落として、ナビより奥に見せる */
  font-size: var(--fs-small); /* SP12 → PC14 */
  line-height: clamp(18px, calc(18px + 6 * (100vw - 768px) / 672), 24px);
  text-decoration: underline;
  text-underline-offset: 0.2em; /* form.css の同意文言と同じ間隔 */
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center; /* SPはロゴタイプが中央 */
  margin-top: 64px;
}

.l-footer__logotype {
  width: clamp(160px, calc(160px + 40 * (100vw - 768px) / 672), 200px);
}

.l-footer__logotype svg {
  width: 100%;
  height: auto;
}

.l-footer__tagline {
  align-self: flex-end;
  /* SPはデザインの257pxを明示（実際に描画される最長行は256.77pxなので折り返さない）。
     PCはデザインが256pxで描画幅より狭く、固定すると文字が箱からはみ出るため auto のまま。 */
  width: 257px;
  /* 改行位置は <br> で決めている。1行目は箱幅と同寸（余裕ほぼ0）で、
     端末の書体差で FURNITURE だけが次行へ落ちるため、自動の折り返しは止める。 */
  white-space: nowrap;
  /* ロゴタイプからの間隔。Figma実測 SP39.92 → PC32.4 */
  margin-top: clamp(32.4px, calc(39.92px - 7.52 * (100vw - 768px) / 672), 39.92px);
  font-size: 12px;
  line-height: 1.25;
  text-align: right;
}

/* --------------------------------------------------------------------------
   768px以上：お問い合わせ誘導とフッター本体を2カラムにする
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* 左「見出し＋説明文」425 : 右「ボタン群」855（1440px時のコンテンツ幅1280の内訳） */
  .l-footer__cta {
    display: grid;
    /* 右列はボタンの幅そのもの（デザインの 560/1280 ＝ 43.75%）。
       左列は残り全部にして、狭い画面では文章が広く使えるようにする。
       デザイン(1440px)では文章が max-width:425px で止まるので、
       設計どおり「文章425 ／ 余白295 ／ ボタン560」の見え方は変わらない。 */
    grid-template-columns: 1fr calc(100% * 560 / 1280);
    column-gap: 40px;
    align-items: start;
  }

  /* 説明文は1行あたりの文字数が増えすぎないよう、実測値の425pxで止める */
  .l-footer__cta-text {
    max-width: 425px;
  }

  .l-footer__cta-list {
    margin-top: 0;
    justify-self: end;
    /* 3つのボタンの高さを揃える。補足が2行になるかは文言の長さで変わるため、
       揃えないと「3つ目だけ背が高い」状態になる（1200px前後）。
       デザイン(1440px)では3つとも88pxなので、この指定でも設計値は変わらない。 */
    display: grid;
    grid-auto-rows: 1fr;
    /* 右列がそのままボタンの幅（上の grid-template-columns 参照）。
       以前の min(100%, 560px) は1145pxより狭い画面で列いっぱいに広がり、
       900pxでは画面の62%をボタンが占めていた（設計は39%）。 */
    width: 100%;
  }

  .l-footer__cta-list .c-btn-lg {
    height: 100%; /* 揃えた行の高さいっぱいに広げる */
  }

  .c-btn-lg {
    flex-direction: row; /* PCは補足が同じ行に並ぶ */
    /* ただし幅が足りないときは補足だけ次の行へ送る。
       送らずに詰めると「物件オーナー様はこち／ら」のように
       語の途中で折れてしまう（900px前後で発生していた）。 */
    flex-wrap: wrap;
    align-content: center;
    min-height: 88px;
    padding: 32px;
  }

  /* 左に連絡先、右にロゴタイプ */
  .l-footer__main {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 40px;
  }

  /* ロゴタイプはデザイン上、下端揃えではなく上から187pxの位置にある
     （フッター基準で y=899、本文ブロックの開始が712）。
     下端揃えにすると左カラムの文字の高さに引きずられて数px下がるため、
     上からの距離で固定する。 */
  .l-footer__brand {
    align-items: flex-end;
    margin-top: clamp(64px, calc(64px + 123 * (100vw - 768px) / 672), 187px);
  }

  .l-footer__mail {
    width: clamp(230px, calc(230px + 382 * (100vw - 768px) / 672), 612px);
  }

  .l-footer__tagline {
    width: auto;
  }
}

/* ==========================================================================
   ローディング兼オープニング（全ページ）
   ネイビーの全画面にロゴ1つ。読み込みが終わったら消える。

   JSが無効な環境では消す手段がないので、.js が付いているときだけ表示する。
   ========================================================================== */

.l-loader {
  display: none;
}

.js .l-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  /* ヘッダー(100)・SPメニュー(90)より前。スキップリンク(1000)よりは後ろ */
  z-index: 200;
  background: var(--c-primary-dark); /* #204765 */
  color: var(--c-bg);
  /* 幕は上へ抜けて消える。時間を変えるときは main.js の SLIDE も合わせること */
  transition: transform 0.8s cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 0.8s;
}

.js .l-loader.is-done {
  transform: translateY(-100%);
  visibility: hidden;
}

/* サイト内の遷移（2回目以降・リロード以外）では、そもそも幕を出さない */
.loader-skip .l-loader {
  display: none;
}

/* 提供画像では画面幅の11.05%。SPで小さくなりすぎないよう下限を置く */
.l-loader__logo {
  display: block;
  width: clamp(112px, 11.05vw, 176px);
  animation: loader-logo 0.8s var(--ease) both;
}

.l-loader__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes loader-logo {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 出ている間は背後をスクロールさせない（幕を出さないページでは対象外） */
html:has(.l-loader:not(.is-done)):not(.loader-skip) {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .l-loader__logo { animation: none; }
  .js .l-loader { transition-duration: 0.01ms; }
}