/* =====================================================================
   Header + section layouts + responsive rules
   ===================================================================== */

/* ---- Header --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 88px;              /* taller header w/ breathing room      */
  padding-block: var(--space-sm);
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo img, .site-logo svg { height: 52px; width: auto; }

/* header may use more width than content sections so the nav + CTAs never
   wrap to a second row */
.site-header .c-container { max-width: 1440px; }
/* desktop: nav and the CTA buttons sit on one row (CTAs to the right) */
.site-header__nav-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 32px);
}
.site-nav__list { flex-wrap: nowrap; }
.site-nav__link { white-space: nowrap; font-size: 0.9375rem; }
.site-header__actions { flex-wrap: nowrap; }
.site-header__actions .c-btn { white-space: nowrap; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 22px);
}
.site-nav__link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-2xs) 0;
}
.site-nav__link:hover { color: var(--color-brand-blue); text-decoration: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); }

.nav-toggle {
  display: none;
  width: var(--tap-min); height: var(--tap-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  align-items: center; justify-content: center;
}
.nav-toggle__bars { position: relative; width: 22px; height: 2px; background: var(--color-navy); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--color-navy);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }

/* SPでヘッダーの表示が畳まれた時だけ出す「契約者の方はこちら」への
   常時導線。デスクトップ/タブレットでは非表示（.site-header__nav-wrap 内の
   ものが既にある）。 */
.site-header__mypage-quicklink {
  display: none; align-items: center; gap: var(--space-2xs);
  color: var(--color-brand-blue); font-weight: 600; font-size: 0.8125rem;
  padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-brand-blue); border-radius: var(--radius-pill);
}
.site-header__mypage-quicklink svg { width: 16px; height: 16px; flex: none; }
.site-header__mypage-quicklink:hover { background: var(--color-brand-blue); color: #fff; text-decoration: none; }

/* ---- SP fixed CTA bar (replaces the header on phones) ----------------
   Hidden by default (tablet/desktop keep the normal header). At ≤768px the
   header's visible chrome collapses to nothing (rules further down) and
   this bar takes over as the persistent navigation + conversion surface. */
.mobile-cta { display: none; }

/* ---- Hero ----------------------------------------------------------- */
.hero { padding-top: clamp(28px, 4vw, 60px); padding-bottom: clamp(44px, 6vw, 92px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  /* left content aligns with the site container; the right image bleeds to
     the viewport's right edge (0px right gap). A slightly smaller left inset
     than the container keeps the headline on two lines like the reference. */
  padding-left: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter)));
  padding-right: 0;
}
.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.4;
  font-weight: 599;
  color: var(--color-brand-blue-bright);
  letter-spacing: 0.05em;
}
.hero__lead { margin-top: var(--space-lg); font-size: var(--fs-body-lg); }

/* ---- Hero: 健康維持/予防ケア/症状サポート/リラックスの4つの丸 -------- */
.hero__points { display: flex; gap: clamp(12px, 2vw, 20px); margin-top: var(--space-lg); list-style: none; padding: 0; flex-wrap: wrap; }
.hero__point { flex: none; }
.hero__point-circle {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(78px, 9vw, 96px); height: clamp(78px, 9vw, 96px); border-radius: 50%;
  background: var(--bg-blue); color: var(--color-navy);
  font-weight: 700; font-size: 0.8125rem; line-height: 1.3; padding: var(--space-2xs);
}
.hero__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
/* .c-btn--lp の width:75% は「親要素の75%」。ここは hero__body という
   半分カラムが親のため、他のCTA（01/02/03の下など、親が c-container 相当）
   と同じ75%でも見た目が狭くなってしまう。画面幅基準に揃えて統一する。 */
.hero__ctas .c-btn--lp { width: 75vw; max-width: 640px; }
.hero__media { overflow: hidden; }               /* no radius, no shadow  */
.hero__media img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; display: block; }
.hero__form-note { font-size: 0.72rem; color: var(--color-text-muted); margin: var(--space-2xs) 0 0; line-height: 1.65; }

/* Earliest-delivery-date result (郵便番号で最短お届け日を確認する) */
.hero__form-result:empty { display: none; }
.hero__result {
  margin-top: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-blue);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hero__result-ctas { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.hero__result-label { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--color-brand-blue); }
.hero__result-date { margin-top: var(--space-2xs); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); font-weight: 700; color: var(--color-navy); }
.hero__result-from { margin-top: var(--space-2xs); font-size: 0.875rem; color: var(--color-text-muted); }
.hero__result-cutoff { margin-top: var(--space-sm); font-size: 0.8125rem; color: var(--color-brand-blue); }
.hero__result-caveat { margin-top: var(--space-sm); font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.7; }
.hero__result--notice { color: var(--color-accent-ink); font-size: 0.875rem; line-height: 1.8; }

/* Date-check form */
.hero__form {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-blue);
  border-radius: var(--radius-md);
  max-width: none;                 /* match the CTA row width above        */
}
.hero__form-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: end; }
.field { display: grid; gap: var(--space-3xs); flex: 1 1 180px; }
.field label { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--color-navy); }
.field input {
  min-height: var(--tap-min);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ---- Two-column text/media (mission, o2pet, kodawari) --------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__body p + p { margin-top: var(--space-md); }

/* Mission quote — white card with quotation marks, blue text (design A) */
.quote {
  position: relative;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-white);
  border-radius: var(--radius-sm);   /* gentler rounding                 */
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-body);
  color: var(--color-brand-blue-bright);
  font-weight: 600;
  text-align: center;
  font-style: normal;
}
.quote::before,
.quote::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  opacity: 0.5;                       /* half the previous opacity        */
  font-size: 5.2rem;                  /* twice the previous size          */
  line-height: 0;                     /* anchor glyph centre on its point */
  color: var(--color-accent);        /* orange quotation marks           */
}
/* opening " top-left, closing " bottom-right — diagonal across the box */
.quote::before { content: "\201C"; left: var(--space-md); top: var(--space-lg); }
.quote::after  { content: "\201D"; right: var(--space-md); top: auto; bottom: var(--space-sm); }
/* Mission: bigger image (~1.35x, no radius), halved padding & side margins */
#mission { padding-block: var(--section-y); } /* 従来の2倍（section-y ÷ 2 → section-y） */
#mission > .c-container { padding-inline: calc(var(--gutter) / 2); }
#mission .split { grid-template-columns: 1fr 1fr; }
#mission .split__media { border-radius: 0; transform: translateX(24px); }  /* nudge right */
#mission-title { font-weight: 460; }   /* slightly heavier than before     */
.quote cite { display: block; margin-top: var(--space-sm); font-size: var(--fs-eyebrow); color: var(--color-text-muted); font-style: normal; }

/* effects heading: 2/3 size, ~70% weight */
#effects .c-heading__title { font-size: calc(var(--fs-h2) * 0.67); font-weight: 460; }

/* ---- Features grid (5 effects) -------------------------------------- */
/* 3 columns × 2 rows: items 1–4 fill the left two columns, item 5 (安心)
   spans both rows in the right column. */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
  align-items: stretch;
}
.features-grid > li:nth-child(1) { grid-column: 1; grid-row: 1; }
.features-grid > li:nth-child(2) { grid-column: 2; grid-row: 1; }
.features-grid > li:nth-child(3) { grid-column: 1; grid-row: 2; }
.features-grid > li:nth-child(4) { grid-column: 2; grid-row: 2; }
.features-grid > li:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
.features-grid > li { display: flex; }
/* reset the explicit 3×2 placement when stacking on narrow screens */
@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: var(--space-md); }
  .features-grid > li { grid-column: auto !important; grid-row: auto !important; border-right: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* WHAT'S O2PET: text column centered (見出し・下線・本文・CTAすべて中央揃え) */
#about .split__body { text-align: center; }
#about .c-heading__rule { margin-inline: auto; }

/* ---- O2pet 2-photo layout ------------------------------------------- */
.o2pet__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: stretch; }
.o2pet__media figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; }
.o2pet__media img { width: 100%; height: 100%; object-fit: cover; }   /* matched height & width */
.o2pet__ctas { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
/* .c-btn--lp の width:75% は「親要素の75%」。他のCTAは親が c-container（画面幅相当）
   なのでそのままでよいが、ここは split の半分カラムが親のため、同じ75%でも見た目が
   小さくなってしまう。画面幅基準に揃えて他のCTAと横幅を統一する。 */
.o2pet__ctas .c-btn--lp { width: 75vw; max-width: 640px; }

/* ---- Kodawari (3 points) -------------------------------------------- */
.kodawari { display: grid; gap: var(--space-3xl); margin-top: var(--space-2xl); }
/* wider, much shorter photos (approx. 1.6x width, half height) */
.kodawari .split { grid-template-columns: 1.5fr 0.9fr; }
.kodawari .split--reverse { grid-template-columns: 0.9fr 1.5fr; }
.kodawari .split__media img { aspect-ratio: 12 / 5; }  /* wide & short   */
.kodawari__num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  opacity: 0.4;

}
.kodawari__title { margin-top: var(--space-sm); font-size: var(--fs-h3); font-weight: 600; color: var(--color-brand-blue-bright); }
.kodawari__text { margin-top: var(--space-md); }
.kodawari__text mark {
  background: none; color: inherit; padding: 0 2px;
  background-image: linear-gradient(rgba(255, 149, 0, 0.175), rgba(255, 149, 0, 0.175));
  background-repeat: no-repeat; background-size: 100% 65%; background-position: 0 100%;
}
.kodawari__note { margin-top: var(--space-2xs); font-size: var(--fs-eyebrow); color: var(--color-text-muted); }

/* CTA row under the 3 commitments (design A) */
.kodawari-ctas {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-md); margin-top: var(--space-2xl);
}

/* ---- Rental plans (featured 12-month, contains the gift band) -------- */
.plan-feature {
  padding: clamp(20px, 3vw, 40px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);       /* halved via token              */
  margin-top: var(--space-2xl);
}
.plan-feature__row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.plan-feature__badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-eyebrow); font-weight: 700; color: var(--color-accent-ink);
}
.plan-feature__name { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--color-navy); margin-top: var(--space-sm); }
.plan-feature__regular { color: var(--color-text-muted); text-decoration: line-through; margin-top: var(--space-md); }
.plan-feature__price { font-size: var(--fs-price); font-weight: 800; color: var(--color-brand-blue); line-height: 1.1; }
.plan-feature__price small { font-size: 0.4em; font-weight: 700; }
.plan-feature__media { border-radius: var(--radius-md); overflow: hidden; }
.plan-feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plan-feature__cta { margin-top: var(--space-lg); }

/* ---- Gift block (special benefit) — 3 parts: title / photo / terms -- */
.gift {
  display: grid;
  grid-template-columns: 0.95fr 1fr 0.95fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(14px, 2vw, 28px) clamp(28px, 4vw, 56px);  /* half vertical */
  background: var(--bg-orange-tint);   /* warm band, no box border         */
  border-radius: var(--radius-lg);
  margin-top: var(--space-xl);
}
.gift__media { border-radius: var(--radius-md); overflow: hidden; background: var(--bg-blue); }
.gift__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gift__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; color: var(--color-navy); line-height: 1.6; }
.gift__title mark { background: transparent; color: var(--color-accent-ink); font-weight: 700; }
/* tag: outline only — orange text + border, no orange fill */
.gift__tag {
  display: inline-block;
  font-size: var(--fs-eyebrow); font-weight: 700;
  color: var(--color-accent-ink); background: transparent;
  border: 1.5px solid var(--color-accent);
  padding: 4px 14px; border-radius: var(--radius-btn);
  margin-bottom: var(--space-md);
}
.gift__terms { font-size: 0.875rem; color: var(--color-text); }
.gift__terms dt { font-weight: 700; color: var(--color-accent-ink); margin-top: var(--space-md); }
.gift__terms dt:first-child { margin-top: 0; }
.gift__terms dd { margin: var(--space-3xs) 0 0; }
.gift__list { display: grid; gap: var(--space-3xs); }
.gift__list li { position: relative; padding-left: 1.1em; }
.gift__list li::before { content: "・"; position: absolute; left: 0; color: var(--color-accent); }

.gift-cta { display: flex; justify-content: center; margin-top: var(--space-lg); }
.gift-cta .c-btn--accent { color: #fff; }
.gift-cta .c-btn--accent:hover { color: #fff; }

/* 製品情報セクション下の「特典付き・レンタルはこちら」も文字色は白で統一 */
#product .kodawari-ctas .c-btn--accent { color: #fff; }
#product .kodawari-ctas .c-btn--accent:hover { color: #fff; }

/* 専用ケージについて — オレンジの特典ボックス(.gift)の完全に外側に置く
   独立ブロック。背景の写り込みを避けるため .gift とは別要素にしてある。 */
.cage-info { margin-top: var(--space-lg); padding-inline: clamp(28px, 4vw, 56px); font-size: 0.875rem; color: var(--color-text); }
.cage-info__title { font-weight: 700; color: var(--color-accent-ink); }
.cage-info__text { margin-top: var(--space-3xs); }
.cage-info__size { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: var(--space-2xs); }

/* ---- Other plans grid ----------------------------------------------- */
.plans-other-title { margin-top: var(--section-y-sm); }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--space-2xl);
}
/* thin grey vertical divider between plans (design A) */
.plans-grid > li + li { border-left: 1px solid var(--color-border); }

/* ---- O2PETはこんな子にぴったり ---------------------------------------- */
.fit-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg);
  margin-top: var(--space-2xl); max-width: 880px; margin-inline: auto;
}
.fit-list__item {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-lg); font-weight: 600; color: var(--color-navy); font-size: 1.0625rem; line-height: 1.6;
}
.fit-list__icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-tint-blue); color: var(--color-brand-blue); display: grid; place-items: center;
}
.fit-list__icon svg { width: 18px; height: 18px; }

/* ---- Cases: 3段の無限横スクロール カルーセル（背景演出。タップ不可） --- */
.cases-triggers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.cases-triggers .c-category-link--filled { flex: 1 1 200px; max-width: 260px; }

.carousel { display: grid; gap: calc(var(--space-md) / 2); margin-top: var(--space-2xl); }
.carousel__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.carousel__track { display: flex; gap: calc(var(--space-md) / 3); width: max-content; will-change: transform; }
.carousel__row--right .carousel__track { animation: carousel-right 55s linear infinite; }
.carousel__row--left .carousel__track { animation: carousel-left 55s linear infinite; }
.carousel__row:hover .carousel__track { animation-play-state: paused; }
@keyframes carousel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes carousel-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.carousel__item {
  flex: none; width: 180px; height: 180px; padding: 0; margin: 0;
  border: 0; border-radius: 0; overflow: hidden; background: var(--bg-blue);
}
.carousel__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Instagram埋め込み（利用事例セクション、カルーセルの下） --------
   ユーザー名・アイコン・いいね/コメント欄まで含めて見えるよう、
   Instagram公式の埋め込みウィジェット（instagram-media + embed.js）を
   そのまま使用している。ここでは並べ方だけ調整する。 */
.insta-embeds-title { text-align: center; font-size: var(--fs-h3); font-weight: 700; color: var(--color-navy); margin-top: var(--space-2xl); }
.insta-embeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); align-items: start; justify-items: center; }
.insta-embeds .instagram-media { width: 100% !important; }

/* ---- 埋め込み問い合わせフォーム（#contact-form）のカード幅 -----------
   .mp-card の初期値（620px）はSP/フォーム専用ページ向け。トップページ
   では他セクションの横幅に対して狭すぎるため、PC幅では広げる。 */
.contact-form-card { max-width: 620px; margin-inline: auto; }
@media (min-width: 769px) {
  .contact-form-card { max-width: 900px; }
}

/* お客様の声 モーダル — カテゴリボタンから開き、中は横スクロールで3件切替 */
.case-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--gutter); }
.case-modal[hidden] { display: none; }
.case-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 50, 0.55); border: 0; padding: 0; }
.case-modal__panel {
  position: relative; background: var(--bg-white); border-radius: var(--radius-lg);
  max-width: 480px; width: 100%; padding: clamp(20px, 3vw, 36px); max-height: 85vh;
  display: flex; flex-direction: column;
}
.case-modal__close {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 1;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border);
  background: var(--bg-white); font-size: 1.25rem; line-height: 1; color: var(--color-text-muted);
}
.case-modal__close:hover { color: var(--color-brand-blue); }

/* 横スクロールに気づきにくいとの声を受け、大きく分かりやすい矢印ボタンを
   トラックの左右に常設し、現在位置がわかるドットも添える（PC/SP共通）。 */
.case-modal__body { display: flex; align-items: center; gap: var(--space-xs); flex: 1; min-height: 0; }
.case-modal__nav {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--bg-white);
  color: var(--color-brand-blue); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.12);
}
.case-modal__nav svg { width: 16px; height: 16px; }
.case-modal__nav:hover { background: var(--color-tint-blue); }
.case-modal__nav:disabled { opacity: 0.3; pointer-events: none; }
.case-modal__track {
  display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; gap: var(--space-lg); scrollbar-width: none;
}
.case-modal__track::-webkit-scrollbar { display: none; }
.case-modal__slide { flex: none; width: 100%; scroll-snap-align: center; overflow-y: auto; }
.case-modal__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.case-modal__name { font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-sm); }
.case-modal__text { font-size: 0.9375rem; line-height: 1.9; color: var(--color-text); white-space: pre-wrap; }
.case-modal__text mark {
  background: none; color: inherit;
  background-image: linear-gradient(rgba(255, 149, 0, 0.5), rgba(255, 149, 0, 0.5));
  background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 100%;
  padding-bottom: 1px;
}
.case-modal__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-sm); flex: none; }
.case-modal__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.case-modal__dots span[aria-current="true"] { background: var(--color-brand-blue); }
.case-modal__ctas { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); flex: none; }

/* ---- エビデンス（大学共同研究） ---------------------------------------- */
.evidence-badge {
  display: flex; width: fit-content; align-items: center; gap: var(--space-2xs);
  background: var(--color-navy); color: #fff; font-weight: 700; font-size: 0.875rem;
  padding: var(--space-2xs) var(--space-lg); border-radius: var(--radius-pill);
  margin: var(--space-md) auto 0;
}
.evidence-badge svg { width: 18px; height: 18px; }
.evidence-lead { text-align: center; color: var(--color-text); margin-top: var(--space-sm); }

.evidence-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); }
.evidence-stat { background: var(--bg-blue); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); text-align: center; }
.evidence-stat__head { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); font-weight: 700; color: var(--color-navy); }
.evidence-stat__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-white); color: var(--color-brand-blue); display: grid; place-items: center; flex: none; }
.evidence-stat__icon svg { width: 20px; height: 20px; }
.evidence-stat__chart { margin-top: var(--space-lg); }
.evidence-stat__axis { display: flex; justify-content: space-around; font-size: 0.75rem; color: var(--color-text-muted); margin-top: var(--space-2xs); }
.evidence-stat__pct { display: inline-block; margin-top: var(--space-md); font-size: 0.8125rem; font-weight: 700; color: var(--color-brand-blue); background: var(--bg-white); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-md); }
.evidence-stat__result { margin-top: var(--space-sm); font-size: 1.25rem; font-weight: 700; color: var(--color-navy); }
/* カード自体の余白（clamp(20px,3vw,32px)）に、さらに0.8倍を追加して
   合計で元の1.8倍の左右余白にする */
.evidence-stat__detail { margin-top: var(--space-sm); font-size: 0.8125rem; line-height: 1.7; color: var(--color-text); text-align: left; padding-inline: clamp(16px, 2.4vw, 25.6px); }
.evidence-stat__mascot { display: block; margin: var(--space-sm) auto 0; width: 52px; height: 52px; color: var(--color-brand-blue); }

.evidence-point { display: flex; align-items: center; gap: var(--space-md); background: var(--bg-orange-tint); border-radius: var(--radius-lg); padding: var(--space-lg) clamp(20px, 3vw, 32px); margin-top: var(--space-2xl); }
.evidence-point__badge {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-weight: 700; font-size: 0.6875rem; text-align: center;
}
.evidence-point__badge svg { width: 20px; height: 20px; }
.evidence-point__text { font-weight: 700; color: var(--color-accent-ink); font-size: 1.0625rem; line-height: 1.7; }

.evidence-notes { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); font-size: 0.525rem; color: var(--color-text-muted); line-height: 1.9; }
.evidence-notes ul { margin-top: var(--space-2xs); padding-left: 1.2em; }

/* ---- Product info --------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: var(--space-2xl);
}
.product__name {
  grid-column: 1 / -1;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
}
.product__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-blue);
}
.product__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--space-lg); }

/* ---- Product slider（濃縮器・ケージを横スライドで切替え） -----------
   利用事例モーダル（.case-modal__nav / __track / __dots）と同じ見た目・
   操作感で統一している。 */
.product-slider { margin-top: var(--space-2xl); }
.product-slider__body { display: flex; align-items: center; gap: var(--space-sm); }
.product-slider__nav {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--bg-white);
  color: var(--color-brand-blue); display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(20, 40, 70, 0.12);
}
.product-slider__nav svg { width: 16px; height: 16px; }
.product-slider__nav:hover { background: var(--color-tint-blue); }
.product-slider__nav:disabled { opacity: 0.3; pointer-events: none; }
.product-slider__track {
  display: flex; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.product-slider__track::-webkit-scrollbar { display: none; }
.product-slider__slide { flex: none; width: 100%; scroll-snap-align: center; }
.product-slider__slide .product { margin-top: 0; }
.product-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-lg); }
.product-slider__dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.product-slider__dots span[aria-current="true"] { background: var(--color-brand-blue); }

/* ---- FAQ layout ----------------------------------------------------- */
/* wider section: half the side margins so the white box is broader */
#faq { padding-block: calc(var(--section-y) / 2); }
#faq > .c-container { max-width: 1440px; padding-inline: calc(var(--gutter) / 2); }
/* inner white box holding the whole FAQ (title → answers) */
.faq-box {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 36px);   /* half the previous padding         */
}
.faq {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: var(--space-2xl);
}
.faq__cats { display: grid; gap: var(--space-sm); }
/* FAQ category buttons: left icon, chevron right, active left bar */
.faq__cats .c-category-link { justify-content: flex-start; gap: var(--space-sm); }
.faq__cats .c-category-link__icon { width: 22px; height: 22px; display: grid; place-items: center; }
.faq__cats .c-category-link__icon svg { width: 100%; height: 100%; }
.faq__cats .c-category-link__arrow { margin-left: auto; font-size: 1.1rem; }
/* keep the outer border colour unchanged on hover/active (only fill + left bar) */
.faq__cats .c-category-link:hover,
.faq__cats .c-category-link:focus-visible,
.faq__cats .c-category-link[aria-current="true"] { border-color: var(--color-border); }
.faq__cats .c-category-link[aria-current="true"] {
  background: var(--color-tint-blue);
  border-left: 4px solid var(--color-brand-blue);   /* only the left bar    */
  padding-left: calc(var(--space-md) - 3px);
}
/* clean rows inside the white box (no nested cards) */
/* WHAT'S O2PET: 見出しブロック全体は左揃えのままだが、アイボロー
   「WHAT'S O2PET」と、その下線だけは中央揃えにする（PC/SP共通）。 */
#about .c-heading__eyebrow { text-align: center; }
#about .c-heading__eyebrow::after { left: 50%; transform: translateX(-50%); }

.faq-box .c-faq__item { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
.faq-box .c-faq__item:last-child { border-bottom: 0; }
.faq-box .c-faq__item.is-open { background: var(--color-tint-blue); border-radius: var(--radius-sm); }
/* マイページ内よくある質問と同じ文字サイズに揃える */
.faq-box .c-faq__label { font-size: 0.875rem; line-height: 1.5; }
.faq-box .c-faq__answer { font-size: 0.875rem; line-height: 1.75; }

/* ---- Simple site footer (minimal — no design supplied) -------------- */
.site-footer {
  background: var(--bg-blue);            /* light blue                     */
  color: var(--color-text);
  padding-block: var(--space-2xl);
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border);
}
.site-footer a { color: var(--color-brand-blue); }
.site-footer a:hover { color: var(--color-navy); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); }
.site-footer__copy { font-size: 0.8125rem; color: var(--color-text-muted); }

/* =====================================================================
   Responsive
   ===================================================================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .plans-grid { grid-template-columns: repeat(3, 1fr); }
  .faq { grid-template-columns: 200px 1fr; }
}

/* Below 1100px — collapse the header nav to a mobile menu (6 links + 2 CTAs
   need more room than a tablet has) */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .site-header__nav-wrap {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    padding: var(--space-md) var(--gutter) var(--space-lg);
    display: grid;
    gap: var(--space-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .site-header__nav-wrap.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { display: block; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
  .site-header__actions { flex-direction: column; align-items: stretch; }
  .site-header__actions .c-btn { width: 100%; }
}

/* Tablet portrait (≤ 768px) — this is the project's "SP" breakpoint:
   all smartphone-specific fixes below are scoped to this query so tablet/
   desktop keep the original layout untouched. */
@media (max-width: 768px) {
  .hero__grid { grid-template-columns: 1fr; padding-left: var(--gutter); padding-right: var(--gutter); }
  .split,
  #mission .split,
  .kodawari .split,
  .kodawari .split--reverse { grid-template-columns: 1fr; }
  #mission .split__media { transform: none; }   /* no right-nudge when stacked */
  .split--reverse .split__media { order: 0; } /* reading order first on mobile */
  .plan-feature__row { grid-template-columns: 1fr; }
  .plan-feature__media { order: -1; }
  .gift { grid-template-columns: 1fr; }
  .gift__media { order: -1; }
  .plans-grid { grid-template-columns: 1fr; }
  .plans-grid > li + li { border-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-lg); margin-top: var(--space-lg); }
  .product { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .c-spec__row { grid-template-columns: 1fr; gap: var(--space-3xs); border-bottom: 0; }   /* thin grey divider hidden on SP */
  .fit-list { grid-template-columns: 1fr; }
  .carousel__item { width: 130px; height: 130px; }
  .insta-embeds { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
  .evidence-stats { grid-template-columns: 1fr; }
  .evidence-point { flex-direction: column; text-align: center; }
  /* SPでは各ブロックの縦幅を抑えるため、結果テキストとマスコットを非表示にし
     パディングを半分にする（面積を使いすぎないように）。 */
  .evidence-stat { padding: clamp(10px, 1.5vw, 16px); }
  .evidence-stat__result,
  .evidence-stat__mascot { display: none; }
  .c-spec__label { font-size: var(--fs-eyebrow); }

  /* 保険についてのご案内: 文字サイズを全体的に約75%へ縮小し、使用する縦幅を抑える */
  .c-notice--insurance .c-notice__title { font-size: 0.9375rem; }
  .c-notice--insurance .c-notice__title svg { width: 16.5px; height: 16.5px; }
  .c-notice--insurance .c-notice__list { font-size: 0.585rem; }

  /* ---- Header: 固定(sticky/fixed)はしない。最初の表示位置に、ロゴ(左)と
     マイページ動線(右)だけを残した簡易バーとして静的に置く。ナビ本体と
     「今すぐ注文する」、ハンバーガーは下部固定バーが担うのでここでは隠す。
     以前ヘッダーの縦幅を完全に0にしていたため、FVタイトルが画面の一番上
     ギリギリまで詰まって見えていた（見た目が窮屈）。 */
  .site-header { position: static; border-bottom: 1px solid var(--color-border); }
  .site-header__inner { padding-block: var(--space-2xs); min-height: 0; }
  .site-header__inner > .nav-toggle { display: none; }
  .site-logo img, .site-logo svg { height: 36px; }
  /* .site-header__nav-wrap は ≤1100px のドロワー仕様のまま（トグルで開閉）
     ここは触らない — 以前ここを強制的に常時表示にした結果、下部固定バーの
     「メニュー」ボタンを押してもドロワー(ナビ本体)が開かなくなっていた。
     常時見せたいのは「契約者の方はこちら」だけなので、それは専用の別要素
     (.site-header__mypage-quicklink) として常時表示にする。 */
  .site-header__mypage-quicklink { display: inline-flex; margin-left: auto; }
  /* ドロワー本体は position: fixed で viewport 基準にする。.site-header が
     ここでは position: static のため、継承していた position: absolute;
     top: 100% だとページ最上部（ヘッダー直下＝FVのCTAボタンの位置）に
     固定されてしまい、スクロールした状態で下部固定バーの「メニュー」を
     押しても画面外か、CTAボタンの下に隠れて開いているように見えなかった。
     z-index も下部固定バー(90)より確実に高くする。 */
  .site-header__nav-wrap {
    position: fixed; left: var(--gutter); right: var(--gutter); top: 68px;
    z-index: 150; max-height: calc(100vh - 88px); overflow-y: auto;
  }
  .mobile-cta {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--bg-white);
    border-top: 1px solid var(--color-border);
  }
  .mobile-cta__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: var(--space-2xs) var(--space-3xs); min-height: 60px;
    color: var(--color-text); font-size: 0.6875rem; font-weight: 700;
    border: 0; background: none; text-align: center;
  }
  .mobile-cta__item:hover { text-decoration: none; }
  .mobile-cta__item + .mobile-cta__item { border-left: 1px solid var(--color-border); }
  .mobile-cta__icon { width: 22px; height: 22px; color: var(--color-brand-blue); }
  .mobile-cta__icon svg { width: 100%; height: 100%; }
  .mobile-cta__item--primary { background: var(--color-brand-blue); color: var(--color-white); }
  .mobile-cta__item--primary .mobile-cta__icon { color: var(--color-white); }
  body { padding-bottom: 60px; }   /* clears the fixed bar */

  /* ---- Hero: image moves below the title + lead copy, above the CTAs -- */
  .hero__grid { display: flex; flex-direction: column; }
  .hero__body { display: contents; }
  .hero__title { order: 1; }
  .hero__lead { order: 2; }
  .hero__media { order: 3; }
  .hero__points { order: 4; }
  .hero__ctas { order: 5; }
  .hero__form { order: 6; }

  /* ---- Mission (私たちの想い): sec2 image moves right under the title -- */
  #mission .split { display: flex; flex-direction: column; }
  #mission .split__body { display: contents; }
  #mission .c-heading { order: 1; }
  #mission .split__media { order: 2; }
  #mission .split__body > p { order: 3; }
  #mission .quote { order: 4; }

  /* ---- About (オーツーペットとは？): photos move right under the title -- */
  #about .split { display: flex; flex-direction: column; }
  #about .split__body { display: contents; }
  #about .c-heading { order: 1; }
  #about .o2pet__media { order: 2; }
  #about .split__body > p { order: 3; }
  #about .o2pet__ctas { order: 4; }

  /* ---- 5つの効果: bigger, heavier heading on SP ----------------------- */
  #effects .c-heading__title { font-size: calc(var(--fs-h2) * 0.67 * 1.5); font-weight: 552; }

  /* ---- こだわり 01〜03 photos: edge-to-edge, no side padding -----------
     !important is required: the figure carries an inline style="margin:0"
     in the markup, which otherwise wins over this external rule. */
  .kodawari .split__media {
    margin-inline: calc(-1 * var(--gutter)) !important;
    border-radius: 0;
  }

  /* ---- その他のプラン: swap the two vertical gaps ---------------------
     Old: big gap (space-2xl) above the plan cards, smaller gap (section-y-sm)
     above the "その他のプラン" heading. New: the opposite. */
  .plans-other-title { margin-top: var(--space-2xl); }
  .plans-grid { margin-top: var(--section-y-sm); }

  /* ---- ご契約前にご確認ください: smaller heading + notes -------------- */
  .notice-terms__title { font-size: calc(var(--fs-h3) * 0.7); }
  .notice-terms__list li { font-size: calc(0.85rem * 0.8); }

  /* ---- Title wipe-in (left→right) + plan-link underline wipe ----------
     A wide (~1× the element's own width), softly-feathered mask slides
     across the text. The transparent→opaque transition spans the whole
     visible box for most of the animation, so there is never a hard edge
     to see — it reads as a veil lifting, not a crop or a wipe. Values
     verified against saranosono.jp/about/'s own image reveal (duration,
     easing, mask formula) via getComputedStyle()/getAnimations() and
     adapted here for text (own-element opacity assist, no translateX,
     no compounding parent fade — see js/main.js initWipeReveal). */
  .reveal-wipe {
    mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 100%);
    mask-size: 220% 100%;
    -webkit-mask-size: 220% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 220% 0;
    -webkit-mask-position: 220% 0;
    opacity: 0.15;
  }
  .reveal-wipe.is-visible {
    /* マイナスのdelayでイージング前半の「ほぼ動いて見えない」区間を
       スキップし、スクロールしてからタイトルが見えるまでの体感の
       タイムラグを0.3秒縮める（duration/easingは変更しない）。 */
    animation: o2pet-text-wipe 1.6s cubic-bezier(0.65, 0.05, 0.36, 1) -0.3s forwards;
  }
  .underline-wipe::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.36, 1); }
  .underline-wipe.is-visible::after { transform: scaleX(1); }
}

/* Phone (≤ 480px) */
@media (max-width: 480px) {
  .c-btn { min-width: 0; width: 100%; }
  .o2pet__media { grid-template-columns: 1fr 1fr; } /* keep 2 photos side by side */
}