/* ============================================================
   Hero Section
   Figma: ARCHITEX-FUN / node 22888:192
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */
html {
  background: #1e1e1e;
}

body {
  background: #fff;
}

body:not(.page-start) section:not(.hero) {
  opacity: 0;
}

body:not(.intro-start) .intro * {
  opacity: 0;
  transform: translateY(20px);
}


body.is-loading {
  background: #1e1e1e;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #1e1e1e;

  opacity: 1;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
}


html,
body {
  overflow-x: hidden;
  width: 100%;
}

.fade-in,
.hero__bg-img,
.campaign-popup__inner {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}


/* ============================================================
   Campaign Popup Animation
   ============================================================ */

.campaign-popup {
  position: fixed;
  inset: 0;
  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .35s cubic-bezier(.22, .61, .36, 1),
    visibility .35s;

  will-change: opacity;
}

.campaign-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---- backdrop ---- */

.campaign-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);

  opacity: 0;
  transition: opacity .35s cubic-bezier(.22, .61, .36, 1);
}

.campaign-popup.is-open .campaign-popup__backdrop {
  opacity: 1;
}

/* ---- inner（カード本体） ---- */

.campaign-popup__inner {
  position: relative;
  z-index: 1;

  /* ★ 左右24pxずつの余白 = 合計48px引く */
  width: calc(100vw - 48px);
  max-width: 430px;
  padding: 0 24px;
  border-radius: 16px;
  overflow: hidden;

  transform: translateY(26px) scale(.94);
  opacity: 0;

  transition:
    transform .38s cubic-bezier(.22, .61, .36, 1),
    opacity .38s cubic-bezier(.22, .61, .36, 1);

  will-change: transform, opacity;
}

.campaign-popup.is-open .campaign-popup__inner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---- closing ---- */

.campaign-popup.is-closing {
  opacity: 0;
}

.campaign-popup.is-closing .campaign-popup__inner {
  transform: translateY(16px) scale(.96);
  opacity: 0;
}

/* ---- 画像 ---- */

.campaign-popup__img {
  display: block;
  width: 100%;
  height: auto;

  /* 画像自体にも角丸（念のため） */
  border-radius: 16px;
}

/* ---- ×ボタン（既存モーダルと同じスタイル） ---- */

.campaign-popup__close {
  position: absolute;
  /* ★ 右上に配置 */
  top: 12px;
  right: 36px;
  z-index: 2;

  /* ★ 既存モーダル .modal__close と同じサイズ・スタイル */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  border: none;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background .2s ease;
}

.campaign-popup__close:hover {
  background: rgba(0, 0, 0, .55);
}

.campaign-popup__close svg {
  stroke: #fff;
}


/* ---- Container ----
   display: grid で .hero__bg と .hero__inner を
   同一セル (grid-area: 1/1) に重ねる。position: absolute 不要。 */


/* =========================================================
   Hero Section
========================================================= */

.hero {
  display: grid;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  color: #fff;
}

/* layer overlap */

.hero__bg,
.hero__inner {
  grid-area: 1 / 1;
}

/* ------------------------------
     Background
  ------------------------------ */

.hero__bg {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.hero__bg-img {

  opacity: 0;

  transform: scale(1.04);

  transition:
    opacity 1.2s ease,
    transform 2.4s cubic-bezier(.22, .61, .36, 1);

}

.hero.is-visible .hero__bg-img {

  opacity: 1;
  transform: scale(1);

}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .12);
  opacity: 0;
  transition: opacity .8s ease;
}

.hero.is-visible .hero__overlay {

  opacity: 1;

}


/* ------------------------------
     Content
  ------------------------------ */

.hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 3rem;
  margin-bottom: 3rem;

  min-height: 400px;
}


/* ------------------------------
     Logo
  ------------------------------ */

.hero__header {
  align-self: flex-start;
  padding-left: clamp(14px, 4.1vw, 18px);
  line-height: 0;
}

.hero__logo {
  height: clamp(28px, 8.1vw, 34px);
  width: auto;
  aspect-ratio: 108.23 / 40;
  object-fit: contain;

  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.hero__logo.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------
     Catch Copy
  ------------------------------ */

.hero__catch {
  margin-top: 40px;

  display: flex;
  flex-direction: column;
  gap: 16px;

  align-items: center;
  text-align: center;

  width: 100%;
}

.hero__catch span {

  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity .5s ease,
    transform .5s ease;

  display: inline-block;

}

.hero__catch span.is-visible {

  opacity: 1;
  transform: translateY(0);

}



/* animation target */

.hero__catch-main,
.hero__catch-en,
.hero__catch-sub,
.hero__catch-target {
  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity .5s ease,
    transform .5s ease;
}

.hero__catch-main.is-visible,
.hero__catch-en.is-visible,
.hero__catch-sub.is-visible,
.hero__catch-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* main title */

.hero__catch-main {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;

  font-size: clamp(40px, 12.2vw, 50px);
  line-height: 1;

  letter-spacing: -0.25em;
  font-feature-settings: 'palt' 1;
}


/* english */

.hero__catch-en {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;

  font-size: clamp(15px, 4.6vw, 19px);
  line-height: 1;

  letter-spacing: 0.2em;
}


/* sub */

.hero__catch-sub {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;

  font-size: clamp(40px, 12.2vw, 50px);
  line-height: 1;

  font-feature-settings: 'palt' 1;
  opacity: 1;
}

.hero__catch-sub span {
  transform: translateY(12px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}

.hero__catch-sub span.is-visible {

  opacity: 1;
  transform: translateY(0);

}


/* target */

.hero__catch-target {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;

  font-size: clamp(20px, 5vw, 24px);
  line-height: 1;

  font-feature-settings: 'palt' 1;
  opacity: 1;
}

.hero__catch-target span {
  transform: translateY(12px);

  transition:
    opacity .6s ease,
    transform .6s ease;

}

.hero__catch-target span.is-visible {

  opacity: 1;
  transform: translateY(0);

}




/* ------------------------------
     About Button
  ------------------------------ */

.hero__about-btn {
  position: absolute;

  right: 0;
  bottom: -2rem;

  background: #005040;

  padding: 12px;

  border-radius: 8px 0 0 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  cursor: pointer;

  transform: translateX(40px);
  opacity: 0;

  transition:
    transform .7s cubic-bezier(.22, .61, .36, 1),
    opacity .7s;
}

.hero__about-btn.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.hero__about-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;

  font-size: 14px;
  line-height: 1.038;

  color: #fff;

  letter-spacing: 0.2em;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}








/* ============================================================
   Intro Section
   Figma: ARCHITEX-FUN / node 22673:3051
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */

/* ---- Container ---- */
.intro {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 6.1vw, 26px);
  /* gap-24px at 393px */
}

/* ---- Catch (title + description) ---- */
.intro-catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 7.4vw, 32px);
}

.intro-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}

/* Subtitle row: [line] どのようなご相談でも [line] */
.intro-title__row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 14px);
  width: 100%;
  justify-content: center;
}

/* Decorative lines (CSS gradient, maintainable) */
/* Figma: Line 107/108 — width 80px at 393px */
.intro-title__line {
  display: block;
  flex: 0 0 clamp(50px, 20.4vw, 85px);
  height: 1px;
}

.intro-title__line--l {
  background: linear-gradient(to right, transparent, #165a4a);
}

.intro-title__line--r {
  background: linear-gradient(to left, transparent, #165a4a);
}

/* "どのようなご相談でも" — Figma: Noto Serif JP Medium 16px / tracking 1.28px */
.intro-title__sub {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(14px, 4.1vw, 17px);
  line-height: 1.4;
  color: #165a4a;
  letter-spacing: 0.08em;
  /* 1.28px / 16px */
  white-space: nowrap;
}

/* "大歓迎です" — Figma: Noto Serif JP Medium 32px / tracking 2.56px */
.intro-title__main {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1.4;
  color: #165a4a;
  letter-spacing: 0.08em;
  /* 2.56px / 32px */
}

/* Description — Figma: Noto Serif JP Regular 14px / tracking 1.12px / left-24px */
.intro-catch__desc {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.6;
  color: #292520;
  letter-spacing: 0.08em;
  /* 1.12px / 14px */
  font-feature-settings: 'palt' 1;
  padding-inline: clamp(22px, 6.1vw, 26px);
  /* left-24px at 393px */
  width: 100%;
}

/* ---- Worries (pill list + illustration + photos) ---- */
/* Figma: px-16px, flex-col, gap-26px */
.intro-worries {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 6.6vw, 28px);
  margin-bottom: 3rem;
}

/* Wrap: list in flow (sets height), illustration absolute */
.intro-worries__wrap {
  position: relative;
}

/* Illustration — Figma: left 191/361=52.9%, size 210/361=58.2%, circular, scaleX(-1) */
.intro-worries__illust {
  position: absolute;
  left: 52.9%;
  top: clamp(10px, 3.8vw, 18px);
  width: 58.2%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  z-index: 0;
  transform-style: flat;
  opacity: 0;

  /* 初期位置（右側） */
  transform: scaleX(-1) translateX(0px);

  transition:
    transform .8s cubic-bezier(.22, .61, .36, 1),
    opacity .6s ease;
}

.intro-worries__illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-worries__illust.is-visible {
  opacity: 1;

}


/* Worry pill list — Figma: absolute left-0 top-0 w-337px (93.4% of 361px wrap) */
.intro-worries__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 93.4%;
  padding-bottom: clamp(14px, 3.8vw, 18px);
  margin-left: 1rem;
}

/* Pill — Figma: bg #f0f0f0, py-8px px-16px, border-radius 56px */
/* Noto Serif JP Medium 12px / tracking 0.96px */
.intro-worry {
  display: inline-flex;
  align-items: center;
  max-width: max-content;
  background: #f0f0f0;
  padding: 8px 16px;
  border-radius: 56px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #282623;
  letter-spacing: 0.04em;
  font-feature-settings: 'palt' 1;
}

/* Photos — 親コンテナ幅に収める（PC幅で右にはみ出し防止） */
/* mask は Figma 外部 URL のため非表示の原因になることがあるため削除 */
.intro-photos {
  display: flex;
  height: 115px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transform: translateX(60px);

  transition:
    transform .8s cubic-bezier(.22, .61, .36, 1),
    opacity .8s cubic-bezier(.22, .61, .36, 1);
}

.intro-photo {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Referral Benefits Section
   Figma: ARCHITEX-FUN / node 22650:2207
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */

/* ---- Container ---- */
.referral {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 6.1vw, 26px);
  /* gap-24px at 393px */
}

/* ---- Section title ---- */
/* Figma: px-16px, center, Noto Serif JP Medium 32px */
.referral__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(14px, 4.1vw, 18px);
}

.referral__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1.4;
  color: #165a4a;
  font-feature-settings: 'palt' 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tab navigation ---- */
/* 7タブに対応するため横スクロール方式に変更 */
.referral-tabs {
  display: flex;
  /* padding なし：左右余白エリアまで全幅に拡張 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 1rem;
}

.referral-tabs::-webkit-scrollbar {
  display: none;
}

/* Base tab — 5等分 */
.referral-tab {
  flex: 1 1 0;
  /* 均等に伸びて5等分 */
  min-width: 0;
  /* flex子要素の縮小を許可 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 4px;
  border: 1px solid #ced1cf;
  background: #fff;
  color: #292520;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  font-feature-settings: 'palt' 1;
  margin-right: -1px;
  cursor: pointer;
}

/* Active tab — green bg */
.referral-tab--active {
  background: #165a4a;
  color: #fff;
  border-color: #165a4a;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

/* First tab: left rounded corners */
.referral-tab:first-child {
  border-radius: 12px 0 0 12px;
}

/* Last tab: right rounded corners, no negative margin */
.referral-tab:last-child {
  border-radius: 0 12px 12px 0;
  margin-right: 0;
}

/* ---- Benefit panel (tab contents) ---- */
.benefit-panel {
  display: none;
  flex-direction: column;
}

.benefit-panel.is-active {
  display: flex;
}

/* ---- Benefit card ---- */
.benefit {
  background: #fff;
  width: 100%;
}

/* Section bar — Figma: bg #717071, px-12px py-8px, letter-spacing 6.72px */
.benefit__header {
  background: #717071;
  padding: 8px 12px;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.48em;
  /* 6.72px / 14px */
}

.benefit__header--contract {
  background: #282623;
}

/* Card body — Figma: px-16px, item row h-41px */
.benefit__body {
  padding: clamp(12px, 3.6vw, 16px) clamp(14px, 4.1vw, 18px);
}

.benefit-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* "JCBギフトカード" — Figma: Noto Serif JP Medium 12px / color #282623 */
.benefit-item__name {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: #282623;
  white-space: nowrap;
  margin-right: 4px;
}

.benefit-item--campaign {
  margin-bottom: 8px;
}

.benefit-item__name--campaign {
  font-size: 20px;
  white-space: normal;
}

.benefit-item__amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
}

/* "10,000" — Figma: Noto Serif JP Bold 32px / tracking -1.6px / color #d80c18 */
.benefit-item__number {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1;
  color: #d80c18;
  letter-spacing: -0.05em;
  /* -1.6px / 32px */
}

/* "円分" — Figma: Noto Serif JP Bold 14px / color #d80c18 */
.benefit-item__unit {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #d80c18;
}

/* "選べるキャンペーン" などのキャプションテキスト */
.benefit-caption {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #717071;
  margin-top: 4px;
}

/* 「最大無料」などの大きいテキスト金額 */
.benefit-item__text-large {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(22px, 6.6vw, 28px);
  line-height: 1;
  color: #d80c18;
  white-space: nowrap;
  margin-left: auto;
}

/* テキストのみの契約内容 */
.benefit-item__text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #282623;
}

/* 「－」（特典なし） */
.benefit-item__none {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #b0b0b0;
}

/* ---- Benefit table (リフォーム・アパート建築 etc.) ---- */
.benefit-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.benefit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.benefit-row:last-child {
  border-bottom: none;
}

.benefit-row--header .benefit-row__range,
.benefit-row--header .benefit-row__header-label {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  color: #282623;
}

.benefit-row__header-label {
  flex-shrink: 0;
}

.benefit-row__range {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #282623;
  flex-shrink: 0;
}

.benefit-panel[data-panel="rent"] .benefit-row__range {
  font-size: 12px;
}

.benefit-row__reward {
  display: flex;
  align-items: baseline;
  gap: 3px;
  text-align: right;
}

/* 「商品券」「JCB」などのブランドラベル */
.benefit-row__reward-label {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  color: #282623;
}

/* 金額数字（大） */
.benefit-row__reward-num {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1;
  color: #d80c18;
  letter-spacing: -0.05em;
}

/* 「円分」 */
.benefit-row__reward-unit {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 14px;
  color: #d80c18;
}

/* 賃貸：テキスト型の特典表示 */
.benefit-row__reward-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  color: #282623;
  text-align: right;
}

/* ---- Applicable conditions ---- */
/* Figma: bg #f0f0f0, px-16px py-24px, flex-col gap-12px */
.conditions {
  background: #f0f0f0;
  padding: clamp(20px, 6.1vw, 26px) clamp(14px, 4.1vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "適用条件" — Figma: Noto Serif JP Medium 14px / tracking 1.12px / center */
.conditions__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1;
  letter-spacing: 0.08em;
  /* 1.12px / 14px */
  color: #282623;
  text-align: center;
  font-feature-settings: 'palt' 1;
}

/* Figma: list-disc, ms-18px (indent), mb-6px per item */
/* Noto Serif JP Regular 12px / line-height normal */
.conditions__list {
  list-style: disc;
  padding-left: 18px;
}

.conditions__list li {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #282623;
  margin-bottom: 6px;
}

.conditions__list li:last-child {
  margin-bottom: 0;
}

.conditions__list a {
  color: #165a4a;
  text-decoration: underline;
}

/* ============================================================
   FAQ Section
   Figma: ARCHITEX-FUN / node 22803:5189
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */

/* ---- Container ---- */
/* Figma: pt-24px pb-16px, gap-16px (between title and list) */
.qa {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 4.1vw, 18px);
  /* gap-16px at 393px */
  padding-top: clamp(20px, 6.1vw, 26px);
  /* pt-24px */
  padding-bottom: clamp(12px, 4.1vw, 18px);
  /* pb-16px */
}

/* ---- Section title ---- */
/* Figma: py-5px, center, Noto Serif JP Medium 32px, #165a4a */
.qa__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 5px;
}

.qa__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1.4;
  color: #165a4a;
  font-feature-settings: 'palt' 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Q&A list ---- */
/* Figma: flex-col, gap-8px */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each QA item: Q行 + A行 の縦積み */
.qa-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Q ボタン行 — クリックでアコーディオン開閉 */
.qa-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

/* "Q" / "A" ラベル — Figma: w-44px p-12px, Lexend Deca Bold 24px, #c2c1be */
.qa-item__label,
.qa-item__a-label {
  flex-shrink: 0;
  width: 44px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #c2c1be;
  letter-spacing: 0.08em;
}

/* Q テキスト */
.qa-item__text {
  flex: 1;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #282623;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
  text-align: left;
}

/* Chevron ラッパー */
.qa-item__chevron-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chevron SVG — 開閉アニメーション */
.qa-item__chevron {
  width: 24px;
  height: 24px;
  transition: transform 0.35s ease;
}

.qa-item.is-open .qa-item__chevron {
  transform: rotate(180deg);
}

/* A 行 — max-height で完全に閉じる */
.qa-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
  background: #fffaf2;
  /* Figma: bg-[#fffaf2] */
}

.qa-item.is-open .qa-item__a {
  max-height: 200px;
}

.qa-item__a-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 8px;
}

/* A テキスト */
.qa-item__a-text {
  flex: 1;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: #282623;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
}

/* A 行の右スペーサー（Q行のシェブロンと幅を揃える） */
.qa-item__a-spacer {
  flex-shrink: 0;
  width: 40px;
}

/* ============================================================
   Introduction Flow Section
   Figma: ARCHITEX-FUN / node 22803:5242
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */

/* ---- Container ---- */
/* Figma: flex-col gap-26px pt-24px */
.flow {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 6.6vw, 28px);
  /* gap-26px at 393px */
  padding-top: clamp(20px, 6.1vw, 26px);
  /* pt-24px */
}

/* ---- Section title ---- */
/* Figma: py-3px, center, Noto Serif JP Medium 32px, #165a4a */
.flow__title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 3px;
}

.flow__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1.4;
  color: #165a4a;
  font-feature-settings: 'palt' 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Cards area ---- */
/* Figma: gradient from #005040 → #00b692, py-16px, inner cards at 16px from edges */
/* outer bg-#f9f3ec is covered by the gradient; padding creates 16px green border */
.flow__cards {
  background: linear-gradient(to right, #005040, #00b692);
  padding: 16px;
}

/* ---- Steps list ---- */
/* Figma: flex-col, gap-8px */
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

/* ---- Each step card ---- */
/* Figma: bg-white, rounded-8px, h-80px, overflow-clip */
/* Content row: px-16px, h-53.33px, top-13.33px → padding-block: 13px */
.flow-step {
  background: #fff;
  border-radius: 8px;
  height: 72px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
}

/* Left side: icon + step label */
/* Figma: gap-8px, items-center */
.flow-step__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon wrapper: 64px × 64px */
/* Figma: img inset -1.56% (≈ -1px) to prevent edge clipping */
.flow-step__icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.flow-step__icon-wrap img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}

/* Horizontal flip for Step 1 & 3 */
/* Figma: -scale-y-100 rotate-180 = scaleX(-1) */
.flow-step__icon-wrap--flip {
  transform: scaleX(-1);
}

/* Step label — Figma: Libre Caslon Text Regular 20px, tracking -0.8px */
.flow-step__label {
  font-family: 'Libre Caslon Text', serif;
  font-weight: 400;
  font-size: clamp(17px, 5.1vw, 21px);
  /* 20px at 393px */
  line-height: 1.4;
  letter-spacing: -0.04em;
  /* -0.8px / 20px */
  white-space: nowrap;
  margin-right: 16px;
}

/* Step label color per step */
.flow-step__label--1 {
  color: #c2c1be;
}

/* Figma: theme/grey */
.flow-step__label--2 {
  color: #7b7c7c;
}

/* Figma: theme/grey-deep */
.flow-step__label--3 {
  color: #165a4a;
}

/* Figma: theme/blandcolor */

/* Right side: title + description, right-aligned */
/* Figma: flex-col, gap-4px, items-end */
.flow-step__right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* Title — Figma: Noto Serif JP Medium 16px, line-height 18px, right */
.flow-step__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(14px, 4.1vw, 17px);
  /* 16px at 393px */
  line-height: 18px;
  color: #282623;
  text-align: right;
  font-feature-settings: 'palt' 1;
}

/* Step 3 title: red, SemiBold — Figma: #d80c18, Noto Serif JP SemiBold */
.flow-step__title--accent {
  color: #d80c18;
  font-weight: 600;
}

/* Description — Figma: Noto Serif JP Regular 12px, line-height 14px, right */
.flow-step__desc {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #282623;
  text-align: right;
  font-feature-settings: 'palt' 1;
}

/* ============================================================
   Form + Footer Section
   Figma: ARCHITEX-FUN / node 22678:4107
   Base design width: 393px
   Responsive range: 320px – 430px (fluid, no breakpoints)
   ============================================================ */

/* ---- Section outer (cream bg) ---- */
.form-section {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  background: #edf1f0;
  display: flex;
  flex-direction: column;
}

/* ---- Form content area ---- */
/* Figma: items-center, gap-32px, py-32px */
/* padding-inline ≈ (393-360)/2 = 16.5px → clamp to fluid */
.form-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 8.1vw, 34px);
  padding: clamp(26px, 8.1vw, 34px) clamp(14px, 4.2vw, 18px);
}

/* ---- Section title ---- */
/* Figma: left-aligned, Noto Serif JP Medium 32px, #165a4a */
.form-section__title {
  align-self: flex-start;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(26px, 8.1vw, 34px);
  line-height: 1.4;
  color: #165a4a;
  font-feature-settings: 'palt' 1;
}

/* ---- Form ---- */
/* Figma: flex-col, gap-32px (between the two group blocks) */
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 8.1vw, 34px);
  align-items: center;
}

/* ---- Form block (group header + items) ---- */
/* Figma: flex-col, gap-24px */
.form-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 6.1vw, 26px);
}

/* Block heading — Figma: Noto Serif JP Medium 14px, #292520, tracking 1.12px */
.form-block__heading {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.3;
  color: #292520;
  letter-spacing: 0.08em;
  /* 1.12px / 14px */
}

/* ---- Form items list ---- */
/* Figma: flex-col, gap-16px */
.form-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ---- Individual form item ---- */
/* Figma: flex-col, gap-8px */
.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* ---- Label row ---- */
/* Figma: gap-4px, items-center, Noto Serif JP Medium 12px, #282623, tracking 0.37px */
.form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #282623;
  letter-spacing: 0.031em;
  /* 0.3737px / 12px */
  white-space: nowrap;
  cursor: pointer;
}

/* Required asterisk — Figma: Noto Serif JP Bold 14px, #d80c18 */
.form-required {
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #d80c18;
}

/* ---- Validation error message ---- */
.form-error {
  font-size: 12px;
  line-height: 1.4;
  color: #d80c18;
  margin-top: -4px;
}

.form-input[aria-invalid="true"] {
  border-color: #d80c18;
  outline: none;
  box-shadow: 0 0 0 2px rgba(216, 12, 24, 0.15);
}

/* ---- Input / Textarea base ---- */
/* Figma: white bg, border rgba(41,37,32,0.16), border-radius 8px, p-16px */
/* Height: 16px padding + 44.849px line-height + 16px padding ≈ 77px */
.form-input {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(41, 37, 32, 0.16);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 14px;
  color: #282623;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  border-color: rgba(41, 37, 32, 0.4);
}

.form-input::placeholder {
  color: #b0b0b0;
}

/* Textarea */
textarea.form-input {
  height: 120px;
  resize: vertical;
  line-height: 1.6;
}

/* Single-line inputs: explicit height to match Figma */
input.form-input,
select.form-input {
  height: auto;
}



/* ============================================================
   Custom Select Box
   ============================================================ */

/* 元の <select> は視覚的に隠しつつDOMに残す
   display:none にするとrequiredバリデーションが無効になるため
   position:absolute + サイズ0 + opacity:0 で完全に隠す */
select.custom-select__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- ラッパー ---- */
.custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}

/* ---- トリガー（見た目上のinput） ---- */
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  width: 100%;
  background: #fff;
  border: 1px solid rgba(41, 37, 32, 0.16);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;

  transition: border-color 0.2s ease, border-radius 0.2s ease;
}

.custom-select__trigger:focus {
  outline: none;
  border-color: rgba(41, 37, 32, 0.4);
}

.custom-select.is-open .custom-select__trigger {
  border-color: rgba(41, 37, 32, 0.4);
}

/* ---- 表示値テキスト ---- */
.custom-select__value {
  flex: 1;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 14px;
  color: #282623;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select__value--placeholder {
  color: #b0b0b0;
}

/* ---- シェブロンアイコン ---- */
.custom-select__chevron {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(.22, .61, .36, 1);
}

.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
}

/* ---- ドロップダウン（fixed でbody基準に浮かせる） ---- */
.custom-select__dropdown {
  position: fixed;
  z-index: 500;

  list-style: none;
  margin: 0;
  padding: 4px 0;

  background: #fff;
  border: 1px solid rgba(41, 37, 32, 0.22);
  border-radius: 8px;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;

  transition:
    max-height 0.28s cubic-bezier(.22, .61, .36, 1),
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}

.custom-select__dropdown.is-open {
  max-height: 240px;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    max-height 0.28s cubic-bezier(.22, .61, .36, 1),
    opacity 0.2s ease,
    visibility 0s linear 0s;
}

/* スクロールバー */
.custom-select__dropdown::-webkit-scrollbar {
  width: 4px;
}

.custom-select__dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.custom-select__dropdown::-webkit-scrollbar-thumb {
  background: #ced1cf;
  border-radius: 4px;
}

/* ---- オプション ---- */
.custom-select__option {
  padding: 12px 16px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #282623;
  cursor: pointer;
  transition: background 0.15s ease;
}

.custom-select__option:hover {
  background: #f0f0f0;
}

.custom-select__option.is-selected {
  color: #165a4a;
  font-weight: 500;
  background: #f0f7f5;
}

/* プレースホルダーは選択不可として薄く */
.custom-select__option--placeholder {
  color: #b0b0b0;
  font-size: 13px;
  cursor: default;
  pointer-events: none;
}





/* Textarea: explicit height, no resize */
.form-input--textarea {
  height: 120px;
  resize: none;
  line-height: 1.6;
}

/* ---- Checkbox item ---- */
/* Figma: flex row, gap-4px, items-center */
.form-item--checkbox {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}

/* Custom checkbox — Figma: size-24px, rounded-4px, border rgba(41,37,32,0.16) */
.form-checkbox {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(41, 37, 32, 0.16);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.form-checkbox:checked {
  background: #165a4a;
  border-color: #165a4a;
}

.form-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Checkbox label text — Figma: Noto Serif JP Medium 12px, #282623 */
.form-checkbox-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #282623;
  letter-spacing: 0.031em;
  white-space: nowrap;
}

/* 個人情報取扱いテキスト */
.form-privacy-note {
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  line-height: 1.7;
  color: #6b6b6b;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.form-privacy-note a {
  color: #165a4a;
  text-decoration: underline;
}

/* ---- Submit button ---- */
/* Figma: bg #165a4a, rounded-32.631px (pill), py-20.765px px-53.396px, w-361px */
.form-submit {
  width: 100%;
  max-width: 361px;
  background: #165a4a;
  border: none;
  border-radius: clamp(28px, 8.3vw, 35px);
  /* 32.631px at 393px */
  padding: clamp(18px, 5.3vw, 22px) clamp(46px, 13.6vw, 57px);
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.2em;
  /* 2.8px / 14px */
  font-feature-settings: 'palt' 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.form-submit:hover:not(:disabled) {
  opacity: 0.85;
}

.form-submit:disabled {
  background: #b0b0b0;
  opacity: 1;
  cursor: not-allowed;
}

/* ---- Footer ---- */
/* Figma: bg #292520, h-72px, items-center justify-center, overflow-clip */
.site-footer {
  width: 100%;
  background: #292520;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 8px;
}

/* "© ARCHITEX Group" — Figma: Noto Serif JP Regular 12px, white, center */
.site-footer__copy {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

/* ============================================================
   Floating CTA Button
   Figma: ARCHITEX-FUN / node 22693:5070
   画面下部に常時追従する固定ボタン
   ============================================================ */

/* ---- Fixed positioning ---- */
/* max-width で本文と同幅に揃える / safe-area で iPhone ホームバー対応 */
.float-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 430px;
  margin-inline: auto;
  z-index: 100;
  /* モーダル(200)より下 */

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px 16px;
  /* iOS ホームバー分を safe-area-inset-bottom で加算 */
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(to right, #005040, #00b692);
  text-decoration: none;
  cursor: pointer;

  opacity: 0;
  transform: translateY(120%);
  /* ←画面下 */

  transition:
    transform .6s cubic-bezier(.22, .61, .36, 1),
    opacity .6s;
}

.float-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}


.float-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Button text ---- */
/* Figma: Noto Serif JP Medium 16px, white, tracking 3.2px */
.float-btn__text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(14px, 4.1vw, 17px);
  /* 16px at 393px */
  line-height: 1;
  color: #fff;
  letter-spacing: 0.2em;
  /* 3.2px / 16px */
  font-feature-settings: 'palt' 1;
  white-space: nowrap;
}

/* ============================================================
   Smooth Scroll Animation
   ============================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  filter: blur(0);

  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1),
    filter .45s cubic-bezier(.22, .61, .36, 1);

  will-change: opacity, transform, filter;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}




/* ============================================================
   Modal (アーキテックスとは？)
   ============================================================ */

/* ---- Overlay ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  padding: 64px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal[hidden] {
  display: none;
}

/* 開くアニメーション */
.modal.is-open .modal__inner {
  animation: modalSlideIn 0.3s ease-out both;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 閉じるアニメーション */
.modal.is-closing .modal__inner {
  animation: modalSlideOut 0.25s ease-in both;
}

@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* backdropのフェード */
.modal.is-closing .modal__backdrop {
  animation: backdropFadeOut 0.25s ease-in both;
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ---- Backdrop ---- */
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}

/* ---- Modal card ---- */
.modal__inner {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 393px;
  max-height: 90vh;
  margin-inline: auto;
  /* 水平中央揃え */
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0 32px;
  position: relative;
  z-index: 1;
}

/* ---- Close button（白カード右上） ---- */
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  color: #292520;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}

.modal__close:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* ---- Header (title + desc) ---- */
.modal__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: clamp(16px, 5vw, 28px);
}

.modal__title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #165a4a;
  font-feature-settings: 'palt' 1;
}

.modal__desc {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #292520;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
}

/* ---- Image grid (2 columns × 3 rows) ---- */
.modal__grid {
  display: flex;
  flex-wrap: wrap;
}

.modal__card {
  position: relative;
  width: 50%;
  height: 146px;
  overflow: hidden;
}

/* リンクあり / なし どちらも画像を全面に敷く */
.modal__card-link,
.modal__card-media {
  display: block;
  position: absolute;
  inset: 0;
}

.modal__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.modal__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* 左上テキスト */
.modal__card-desc {
  position: absolute;
  top: 17px;
  left: 15px;
  right: 15px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
  pointer-events: none;
}

/* 右下ラベル + アイコン */
.modal__card-label {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  pointer-events: none;
}

.modal__card-label-text {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.08em;
  font-feature-settings: 'palt' 1;
  white-space: nowrap;
}

.modal__card-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- CTA button（緑ボタン） ---- */
.modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  background: #165a4a;
  color: #fff;
  border-radius: 33px;
  padding: 16px 24px;
  margin-inline: clamp(16px, 5vw, 28px);
  margin-top: 8px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-feature-settings: 'palt' 1;
  text-decoration: none;
  white-space: nowrap;
}

.modal__btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ============================================================
   Page Loading
   ============================================================ */

.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #1e1e1e;

  opacity: 1;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
}

.loading.is-hide {
  opacity: 0;
  pointer-events: none;
}

.loading__logo {
  width: 160px;
  height: 60px;
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
  opacity: 0;
  transform: translateY(10px);
  animation: loadingLogo .8s ease forwards;
}

@keyframes loadingLogo {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html,
body {
  overflow-x: hidden;
}