/* =================================================================
   ロイヤル建材  ショールーム見積もり  —  style.css
   Figma node: 2-1502   Canvas: 1920px   Content: 1811px   Pad: 55px
   ================================================================= */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', sans-serif; background: #fff; color: #000; overflow-x: hidden; min-width: 320px; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; }
ul   { list-style: none; }

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --c-gold:       #b58d61;
  --c-teal:       #80a5ae;
  --c-teal-bg:    #e2edef;
  --c-cta-bg:     #f0f7f8;
  --pad-x:        55px;
  --max-w:        1811px;
}

.page { max-width: 1920px; margin: 0 auto; overflow: hidden; }


/* =================================================================
   HEADER
   ================================================================= */
.hd__logo-row {
  display: flex; justify-content: center; align-items: center;
  padding: 16px 0 14px; background: #fff;
}
.hd__logo-link { display: flex; }
.hd__logo { height: 44px; width: auto; object-fit: contain; }

/* 导航栏与 index 一致：597×119，间隙 75px，两侧留白 */
.hd__tabs {
  display: flex;
  gap: 18px;
  padding: 0 var(--pad-x);
  background: #fff;
}
.hd__tab {
  flex: 0 0 584px;
  width: 584px;
  height: 119px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: 10px clamp(8px, 1vw, 16px);
  cursor: pointer;
  transition: opacity .15s;
  text-decoration: none;
  border: none;
  border-radius: 8px;
}
.hd__tab:hover { opacity: .88; }
.hd__tab--active  { background: var(--c-teal); }
.hd__tab--outline { background: #fff; border: 5px solid var(--c-teal); }
.hd__tab-icon {
  width: clamp(28px, 2.5vw, 49px);
  height: clamp(28px, 2.5vw, 49px);
  object-fit: contain;
  flex-shrink: 0;
}
.hd__tab-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 36px);
  letter-spacing: .04em;
  white-space: nowrap;
}
.hd__tab--active  .hd__tab-text { color: #fff; }
.hd__tab--outline .hd__tab-text { color: var(--c-teal); }


/* =================================================================
   PAGE TAB CARDS — 与 index 一致 597×119，间隙 75px
   ================================================================= */
.pg-tabs {
  display: flex;
  gap: clamp(12px, 3vw, 75px);
  width: 100%;
  max-width: calc(var(--max-w) + (var(--pad-x) * 2));
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 50px;
}
.pg-tab {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 119px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: 10px clamp(8px, 1vw, 16px);
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s;
  border-radius: 8px;
}
.pg-tab--outline {
  background: #fff;
  border: 5px solid var(--c-teal);
}
.pg-tab--outline:hover { opacity: .85; }
.pg-tab--filled {
  background: var(--c-teal);
  border: 5px solid var(--c-teal);
  cursor: default;
}
.pg-tab__icon-wrap { flex-shrink: 0; width: clamp(28px, 2.5vw, 49px); height: clamp(28px, 2.5vw, 49px); }
.pg-tab__icon { width: 100%; height: 100%; object-fit: contain; }
.pg-tab__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 36px);
  letter-spacing: .04em;
  white-space: nowrap;
}
.pg-tab__label--teal  { color: var(--c-teal); }
.pg-tab__label--white { color: #fff; }


/* =================================================================
   HERO BANNER   「ショールーム見積もり」
   Figma: h:887  top half bg:#80a5ae  bottom bg:#e2edef
   截图还原:
   ① 黄色タイトル  ② 白サブコピー  ③ [手+バッジ] [カード1] [+] [カード2]  ④ キャプション
   ================================================================= */
.hero-sr {
  
  padding: 0 var(--pad-x);
  overflow: hidden;
}
.hero-sr__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--c-teal);
}

/* ① 黄色タイトル */
.hero-sr__title {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700;
  font-size: clamp(32px, 5.25vw, 100px);
  color: #fdff7c; letter-spacing: .05em;
  text-align: center;
  padding-top: clamp(20px, 2.1vw, 40px);
  line-height: 1.2; white-space: nowrap;
}

/* ② サブコピー */
.hero-sr__sub {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700;
  font-size: clamp(14px, 2.5vw, 48px);
  color: #fff; letter-spacing: .06em;
  text-align: center;
  margin-top: clamp(8px, 0.8vw, 16px);
  line-height: 1.5;
}

/* ③ カードエリア  bg:#e2edef */
.hero-sr__body {
  display: flex;
  align-items: center;          /* 截图: 所有元素垂直居中对齐 */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(10px, 2.2vw, 42px);
  background: var(--c-teal-bg);
  margin-top: clamp(16px, 1.5vw, 26px);
  padding: clamp(24px, 3vw, 50px) clamp(10px, 2.8vw, 55px);
  min-height: clamp(260px, 29vw, 560px);
  overflow: hidden;
}

/* 左ブロック: バッジ + 手の画像 */
.hero-sr__left {
  position: relative;
  flex-shrink: 0;
  /* 与 index 左侧手图模块一致：贴左并允许溢出 */
  width: clamp(80px, 29vw, 559px);
  align-self: stretch;
  /* 缩放时裁切手图，防止溢出 */
  overflow: hidden;
  margin-left: calc(-1 * var(--pad-x));
  /* 让绝对定位的手图有可见高度 */
  min-height: clamp(200px, 26vw, 520px);
}

/* 最短3分バッジ — 截图: 左上角, 手机图之上 */
.hero-sr__badge {
  position: absolute;
  /* 与 index 一致：徽章在手机左侧偏上 */
  left: 19%;
  top: 14%;
  width: clamp(60px, 11vw, 140px);
  height: clamp(60px, 11vw, 140px);
  z-index: 2;
}
.hero-sr__badge-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
.hero-sr__badge-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-align: center;
}
.hero-sr__badge-s {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(11px, 1.7vw, 32px); letter-spacing: .1em; line-height: 1.3;
}
.hero-sr__badge-l {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(14px, 2.5vw, 48px); letter-spacing: .1em; line-height: 1.1;
}

/* 手の画像 — 截图: 正常持手机姿势 */
.hero-sr__hand {
  position: absolute;
  width: 100%;
  height: 147%;
  left: 0%;
  top: -28%;
  /*transform: scaleY(-1) rotate(180deg);*/
  max-width: none;
  object-fit: contain;
  z-index: 1;
  display: block;
}

/* カード  (Figma: bg:white border:10px teal rounded:20px  w:524 h:375) */
.hero-sr__card {
  background: #fff;
  border: clamp(4px, 0.52vw, 10px) solid var(--c-teal);
  border-radius: clamp(8px, 1.04vw, 20px);
  flex: 1 1 clamp(240px, 25vw, 490px);
  min-width: 240px;
  width: auto;
  /* 截图: カード縦横比ほぼ正方形 */
  aspect-ratio: 524 / 375;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(12px, 1.5vw, 28px);
  gap: clamp(10px, 1.5vw, 24px);
}
.hero-sr__card-img {
  width: clamp(70px, 10.5vw, 200px);
  height: clamp(70px, 10.5vw, 200px);
  object-fit: contain;
}
.hero-sr__card-txt {
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 500;
  font-size: clamp(13px, 1.9vw, 36px);
  color: #000; letter-spacing: .05em;
  text-align: center; line-height: 1.55; white-space: nowrap;
}

/* + 記号  (Figma: size:67) */
.hero-sr__plus {
  flex: 0 0 auto;
  width: clamp(20px, 3.3vw, 64px);
  height: clamp(20px, 3.3vw, 64px);
  display: flex; align-items: center; justify-content: center;
}
.hero-sr__plus-img { width: 100%; height: 100%; object-fit: contain; }

/* ④ キャプション — 截图: 黒字, テキスト中央, bg:#e2edef内 */
.hero-sr__caption {
  background: var(--c-teal-bg);
  font-family: 'Zen Maru Gothic', sans-serif; font-weight: 700;
  font-size: clamp(11px, 1.5vw, 28px);
  color: #000; letter-spacing: .04em;
  text-align: center; line-height: 1.75;
  padding: clamp(14px, 1.5vw, 28px) var(--pad-x) clamp(20px, 2.5vw, 48px);
}


/* =================================================================
   SECTION HEADER  (bg:#80a5ae h:81)
   ================================================================= */
.sr-sec-hd {
  background: var(--c-teal);
  display: flex; align-items: center;
  min-height: clamp(52px, 4.2vw, 81px);
  padding: 10px 20px;
  margin-bottom: clamp(20px, 1.5vw, 29px);
}
.sr-sec-hd__title {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(16px, 1.67vw, 32px);
  color: #fff; letter-spacing: .02em; line-height: 1.3;
}


/* =================================================================
   ショールーム資料のご準備
   ================================================================= */
.sr-section { padding: clamp(24px, 2.5vw, 48px) var(--pad-x); }
.sr-section__inner { max-width: var(--max-w); margin: 0 auto; }
.sr-section--send  { padding-bottom: clamp(16px, 2vw, 36px); }

.sr-prep-body {
  display: flex;
  gap: clamp(20px, 3vw, 56px);
  align-items: flex-start;
}

/* 画像コラージュ  (Figma: w:740 h:547) */
.sr-collage {
  position: relative;
  flex-shrink: 0;
  width: clamp(260px, 38.6vw, 740px);
  aspect-ratio: 740 / 547;
  overflow: hidden;
}
.sr-collage__main {
  position: absolute; left: 0; top: 0;
  width: 47.8%; height: calc(100% - 10.96%);  /* 60px/547 ≈ 10.96% */
  overflow: hidden;
}
.sr-collage__main img { width: 100%; height: 100%; object-fit: cover; }

.sr-collage__right {
  position: absolute; left: 47.8%; right: 0; top: 0;
  height: calc(100% - 10.96%);
  display: flex; flex-direction: column;
}
.sr-collage__tr,
.sr-collage__br { flex: 1; overflow: hidden; }
.sr-collage__tr img,
.sr-collage__br img { width: 100%; height: 100%; object-fit: cover; }

/* 番号バッジ */
.sr-collage__num {
  position: absolute;
  width: clamp(22px, 3.125vw, 60px); height: clamp(22px, 3.125vw, 60px);
  background: var(--c-teal); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(11px, 1.875vw, 36px); color: #fff;
  line-height: 1; z-index: 2;
  transform: translate(-50%, -50%);
}
/* バッジ1: left:147/740=19.9%  top:244/547=44.6% */
.sr-collage__num--1 { left: 19.9%; top: 44.6%; }
/* バッジ2: left:517/740=69.9%  top:107/547=19.6% */
.sr-collage__num--2 { left: 69.9%; top: 19.6%; }
/* バッジ3: left:517/740=69.9%  top:351/547=64.2% */
.sr-collage__num--3 { left: 69.9%; top: 60%; }

/* フッターバー */
.sr-collage__footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 10.96%;  /* 60/547 */
  min-height: 36px;
  background: var(--c-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(9px, 1.1vw, 21px); color: #fff;
  padding: 0 8px; text-align: center; letter-spacing: .02em;
}

/* 説明テキスト */
.sr-prep-desc {
  flex: 1;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.18vw, 22px);
  color: #000; line-height: 1.75;
  display: flex; flex-direction: column; gap: 1.2em;
  padding-top: 4px;
}


/* =================================================================
   ショールーム資料の送付
   ================================================================= */
.sr-send-body { padding: 0 0 clamp(12px, 2vw, 32px); }
.sr-send-desc {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.18vw, 22px);
  color: #000; line-height: 1.75;
}


/* =================================================================
   CTA バー 「入力へ進む」
   Figma: bg:#f0f7f8 h:170   ボタン bg:#80a5ae w:420 h:94
   截图2: 按钮宽度約420px，高度适中，文字清晰可读
   ================================================================= */
.sr-cta {
  background: var(--c-cta-bg);
  display: flex; align-items: center; justify-content: center;
  /* 截图: 上下パディング均等、全体h≈170 */
  padding: clamp(32px, 4vw, 52px) var(--pad-x);
}
.sr-cta__btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 12px;
  background: var(--c-teal);
  /* 截图: 按钮相对较宽、高度适中 */
  width: clamp(260px, 21.875vw, 420px);
  height: clamp(60px, 4.9vw, 94px);
  padding: 0 24px;
  text-decoration: none;
  transition: background .2s;
  flex-shrink: 0;
}
.sr-cta__btn:hover { background: #6e959e; }
.sr-cta__btn-txt {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  /* 截图: 文字明显比16px大，约24px设计稿 */
  font-size: clamp(16px, 1.25vw, 24px);
  color: #fff; white-space: nowrap; letter-spacing: .08em;
}
.sr-cta__btn-arr {
  flex-shrink: 0;
  width: 14px; height: 14px;
  /* 截图中箭头为 ▶ 指向右方，无需旋转 */
  filter: brightness(0) invert(1);
  /*transform: rotate(90deg);*/
}


/* =================================================================
   Interior photo / Footer bg strip
   ================================================================= */
.sr-photo { width: 100%; overflow: hidden; }
.sr-photo__img { width: 100%; height: clamp(200px, 43.4vw, 833px); object-fit: cover; }

.sr-footer-bg { width: 100%; overflow: hidden; }
.sr-footer-bg__img { width: 100%; height: clamp(80px, 15.4vw, 295px); object-fit: cover; }


/* =================================================================
   CONTACT BAR
   ================================================================= */
.contact-bar { background: #fff; padding: 24px var(--pad-x); border-top: 1px solid #e8e8e8; }
.contact-bar__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(24px, 4vw, 80px);
}
.contact-bar__label {
  position: relative; display: flex; align-items: center;
  background: #1c1c1c; color: #fff;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(13px, 1.04vw, 18px); white-space: nowrap;
  padding: 16px 36px 16px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
}
.contact-bar__label::after {
  content: ''; position: absolute; right: -22px; top: 0;
  width: 0; height: 0;
  border-top: 27px solid transparent; border-bottom: 27px solid transparent;
  border-left: 22px solid #1c1c1c;
}
.contact-bar__phone { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.contact-bar__phone-link {
  display: flex; align-items: center; gap: 8px;
  color: #111; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1;
  transition: color .15s;
}
.contact-bar__phone-link:hover { color: var(--c-gold); }
.contact-bar__tel-icon { font-size: clamp(18px, 1.8vw, 34px); }
.contact-bar__tel-num  { font-size: clamp(22px, 2.8vw, 52px); letter-spacing: .02em; }
.contact-bar__hours {
  font-family: 'Noto Sans JP', sans-serif; font-size: clamp(11px, .83vw, 15px);
  color: #555; margin-top: 6px; padding-top: 5px;
  width: 100%; text-align: center;
}
.contact-bar__mail {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--c-gold); padding: 14px 20px;
  flex: 1; max-width: 440px; color: var(--c-gold);
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(13px, 1.04vw, 18px); white-space: nowrap;
  transition: background .15s; height: 60px;
}
.contact-bar__mail:hover { background: #fffaf5; }
.contact-bar__mail-icon { font-size: 17px; flex-shrink: 0; }
.contact-bar__mail-text { flex: 1; }
.contact-bar__mail-arr  { font-size: 11px; color: var(--c-gold); flex-shrink: 0; }


/* =================================================================
   FOOTER
   ================================================================= */
.footer__nav {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #f0ece5; padding: clamp(28px, 3vw, 52px) 0;
}
.footer__nav-col {
  padding: 0 clamp(24px, 4vw, 80px);
  display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 28px);
  border-right: 1px solid #ccc8c0;
}
.footer__nav-col:last-child { border-right: none; }
.footer__nav-col a {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400;
  font-size: clamp(13px, .94vw, 17px); color: #333; transition: color .15s;
}
.footer__nav-col a:hover { color: var(--c-gold); }

.footer__bottom { background: #fff; padding: clamp(24px, 3vw, 44px) var(--pad-x); border-top: 1px solid #e0ddd8; }
.footer__bottom-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 60px); flex-wrap: wrap;
}
.footer__brand { flex-shrink: 0; padding-right: clamp(20px, 3vw, 52px); border-right: 1px solid #d8d4ce; }
.footer__logo { height: clamp(40px, 5vw, 72px); width: auto; object-fit: contain; }
.footer__address {
  font-style: normal; font-family: 'Noto Sans JP', sans-serif; font-weight: 400;
  font-size: clamp(11px, .83vw, 15px); line-height: 1.9; color: #444;
}
.footer__address a { color: #444; }
.footer__address a:hover { color: var(--c-gold); }
.footer__vline { width: 1px; align-self: stretch; background: #d8d4ce; flex-shrink: 0; min-height: 60px; }
.footer__biz {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 400;
  font-size: clamp(11px, .83vw, 15px); line-height: 1.9; color: #444;
}
.footer__biz p + p { margin-top: 4px; }


/* =================================================================
   RESPONSIVE
   ================================================================= */

/* ≤ 1300px */
@media (max-width: 1300px) {
  :root { --pad-x: 40px; }
  .hero-sr__title { white-space: normal; }
  .sr-collage__footer { font-size: clamp(9px, 1.1vw, 16px); }
}

/* ≤ 1100px */
@media (max-width: 1100px) {
  :root { --pad-x: 28px; }
  .pg-tab__label { font-size: clamp(13px, 2.2vw, 28px); }
  .hero-sr__card { width: clamp(130px, 24vw, 440px); }
}

/* ≤ 900px — tablet */
@media (max-width: 900px) {
  :root { --pad-x: 20px; }
  .hd__tab-text { font-size: 14px; }
  .hd__tab { flex: 1; width: auto; min-width: 0; height: 48px; gap: 8px; }

  /* Page tabs */
  .pg-tab { flex: 1; width: auto; min-width: 0; height: 80px; flex-direction: column; gap: 5px; }
  .pg-tab__label { font-size: 15px; white-space: normal; text-align: center; }
  .pg-tab__icon-wrap { width: 28px; height: 28px; }

  /* Hero — wrap to 2 rows */
  .hero-sr__body { flex-wrap: wrap; padding: 20px 16px 24px; gap: 14px; }
  .hero-sr__left { width: clamp(200px, 50%, 380px); margin: 0 auto; }
  .hero-sr__card { width: calc(50% - 30px); aspect-ratio: unset; min-height: 180px; }
  .hero-sr__plus { order: 10; }

  /* Prep section */
  .sr-prep-body { flex-direction: column; align-items: center; }
  .sr-collage { width: min(100%, 460px); }

  /* Footer */
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .footer__nav-col:nth-child(2) { border-right: none; }
  .footer__nav-col:nth-child(3) { grid-column: span 2; border-right: none; border-top: 1px solid #ccc8c0; padding-top: 20px; }
  .contact-bar__inner { gap: 14px; }
  .contact-bar__mail { flex: none; }

  .pg-tabs{
    margin-bottom: 14px;
  }

}

/* ≤ 700px */
@media (max-width: 700px) {
  :root { --pad-x: 14px; }
  .hd__logo { height: 32px; }
  .hd__tab  { flex: 1; width: auto; min-width: 0; height: 42px; gap: 6px; padding: 0 8px; }
  .hd__tab-text { font-size: 12px; }
  .hd__tab-icon { width: 16px; height: 16px; }
  .hd__tab--outline { border-width: 1.5px; }

  /*.pg-tabs { padding: 0; }*/
  .pg-tab { flex: 1; width: auto; min-width: 0; height: 64px; padding: 6px 8px; gap: 4px; }
  .pg-tab--outline { border-width: 1.5px; }
  .pg-tab__label { font-size: 12px; }

  .hero-sr__title { font-size: clamp(24px, 7vw, 48px); }
  .hero-sr__sub   { font-size: clamp(12px, 3.5vw, 22px); }
  .hero-sr__body  { flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
  .hero-sr__left  { width: 100%; max-width: 320px; }
  .hero-sr__card  { width: 100%; max-width: 280px; aspect-ratio: unset; }
  .hero-sr__plus  { display: none; }
  .hero-sr__caption { font-size: clamp(10px, 2.5vw, 16px); padding: 14px 16px 24px; }

  .sr-collage { width: 100%; }
  .sr-collage__footer { font-size: clamp(9px, 2.5vw, 14px); white-space: normal; padding: 4px 8px; }

  .sr-cta { padding: 24px var(--pad-x); }
  .sr-cta__btn { width: min(100%, 360px); height: 60px; }
  .sr-cta__btn-txt { font-size: 17px; }

  .contact-bar__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .contact-bar__label { width: 100%; }
  .contact-bar__label::after { display: none; }
  .contact-bar__phone { width: 100%; align-items: center; }
  .contact-bar__mail  { width: 100%; max-width: 100%; height: auto; padding: 12px 16px; }

  .footer__nav { grid-template-columns: 1fr; }
  .footer__nav-col { border-right: none; border-bottom: 1px solid #ccc8c0; padding-bottom: 16px; }
  .footer__nav-col:last-child { border-bottom: none; }
  .footer__nav-col:nth-child(3) { grid-column: auto; border-top: none; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__brand { border-right: none; padding-right: 0; border-bottom: 1px solid #d8d4ce; padding-bottom: 14px; width: 100%; }
  .footer__vline { width: 100%; height: 1px; min-height: 0; }
}

/* ≤ 480px */
@media (max-width: 480px) {
  .hd__tabs { flex-direction: column; }
  .hd__tab  { flex: none; width: 100%; height: 44px; }
  .pg-tabs  { flex-direction: column; }
  .pg-tab   { flex: none; width: 100%; height: 44px; flex-direction: row; gap: 10px; }
  /*.pg-tab--outline { border-width: 2px 0; }*/
  .sr-prep-body { gap: 16px; }
}