/* ==========================================================================
   GG紹介特集ページ — Figma Dev Mode 準拠
   基準幅: 1728px  Frame: 2030:96
   Dev Mode reference: https://figma.com/design/yjf45W2e5LAQniM9G9Jy0e
   ========================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  --gold: #a78c2f;
  --beige: #f7f6f5;
  --text: #333; /* Figma body text */
  --text-soft: #000;
  --white: #fff;
  --dark-cta: rgba(27, 27, 27, 0.9);
  --dark-panel: rgba(0, 0, 0, 0.7);
  --num-water: rgba(0, 0, 0, 0.2);
  --serif: "Noto Serif JP", serif;
  --sans: "Noto Sans JP", sans-serif;
  --display: "Cormorant", serif;
  --page-w: 1728px;
  --content-w: 1100px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--white);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent horizontal scrollbar on very wide screens where
     zoom-calculated width rounds up above viewport width. */
  overflow-x: clip;
}
img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font: inherit;
}

/* .sp-only: SPのみbr表示 */
.sp-only {
  display: none;
}
@media (max-width: 600px) {
  .sp-only {
    display: inline;
  }
}
.pc-only {
  display: inline;
}
@media (max-width: 600px) {
  .pc-only {
    display: none;
  }
}

/* ---------- HH_bland テーマの img 一律 width:100% を解除 ----------
   テーマ側の `img,picture,video,canvas,svg{width:100%}` によって
   SVG アイコン（.btn__arrow 等）や一部画像の幅が想定外に伸びるため、
   このテンプレ内ではリセットし、必要な要素だけ 100% を復元する。 */
.gg-tokushu-page img,
.gg-tokushu-page picture,
.gg-tokushu-page video,
.gg-tokushu-page canvas,
.gg-tokushu-page svg {
  width: auto;
  max-width: 100%;
}
.gg-tokushu-page .hero__bg,
.gg-tokushu-page .regret__photo-img,
.gg-tokushu-page .case__layer,
.gg-tokushu-page .point__image img,
.gg-tokushu-page .case__thumb img {
  width: 100%;
}

.page {
  /* 常に等倍（zoom:1）。旧 zoom: calc(100vw/1728) は解像度で縮小差が出るため廃止。
     幅は親 100%。SP（≤600）は下のメディアクエリで専用レイアウト。 */
  width: 100%;
  margin: 0;
  overflow-x: hidden;
  zoom: 1;
}

/* PC（601px 以上）: テキスト主体ブロックのみ最大幅 1728px で中央寄せ */
@media (min-width: 601px) {
  .intro,
  .points-title,
  .cases-header {
    max-width: var(--page-w);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   HERO  — 2030:45 / 1728 × 1206
   content: gap 24px / center / image bg + overlay 20%
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 1206px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.hero__title {
  /* 101:29 */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 54px;
  letter-spacing: 0.96px;
  color: var(--white);
  text-shadow: 0 4px 10px #000;
  text-align: center;
  white-space: nowrap;
}
.hero__logo {
  /* 105:39 / 842 × 194 */
  width: 842px;
  height: 194px;
  object-fit: contain;
  max-width: 100%;
}

/* ==========================================================================
   INTRO (section1)  — 2030:95 / 850 × 389
   padding 40px 20px  /  gap 48  /  center
   ========================================================================== */
.intro {
  background: var(--white);
  padding: 40px 20px;
  margin-top: 73px; /* Figma y=1279 - hero.end=1206 => 73 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.intro__title {
  /* 101:27  Noto Serif JP Medium 48 */
  font-family: var(--serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  max-width: 810px;
  letter-spacing: 0;
}
.intro__body {
  /* 14:10  Noto Serif JP Light 18 / 32 */
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 32px;
  max-width: 810px;
}

/* ==========================================================================
   REGRET (sebtion2)  — 2030:97 / 1728 × 557
   bg rgba(0,0,0,0.7)  flex row  gap 100  align-center  overflow hidden
   photo 864 × 557 ・ text 601 wide
   ========================================================================== */
.regret {
  background: var(--dark-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  min-height: 557px;
  overflow: hidden;
  padding: 0 82px;
  margin-top: 135px; /* Figma y=1803 - intro.end=1668 */
}
.regret__photo-wrap {
  width: 864px;
  height: 557px;
  flex-shrink: 0;
  overflow: hidden;
}
/* regret-photo.png は 864×532 にクロップ済の写真のみの画像
   （Figma 2035:100 マスクグループ内 koukai3 の可視部分）。 */
.regret__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.regret__text {
  /* 2035:106  601 × 384 */
  width: 601px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 87px 0;
}
.regret__heading {
  position: relative;
}
.regret__title {
  /* 14:11  Noto Serif JP SemiBold 36 */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.44;
  color: var(--white);
}
.regret__rule {
  /* 14:22  90 × 1 white */
  display: block;
  position: absolute;
  right: 46px;
  top: 29px;
  width: 90px;
  height: 1px;
  background: var(--white);
}
.regret__list {
  /* 78:22  Noto Sans JP Medium 16 / 35 */
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 35px;
  color: var(--white);
}
.regret__list p {
  position: relative;
}
.regret__list p::before {
  content: "・";
  margin-right: 0;
}
.regret__caption {
  /* 14:17  Noto Serif JP SemiBold 24 / 49 */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 49px;
  color: var(--white);
}

/* ==========================================================================
   POINTS TITLE  — 2043:113 / 1727 × 355
   padding 62px 20px  /  gap 10
   ========================================================================== */
.points-title {
  min-height: 355px;
  padding: 62px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.points-title__sub {
  /* 2043:111  Noto Serif JP Regular 24 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 64px;
}
.points-title__main {
  /* 2043:110  Noto Serif JP Medium 48 */
  font-family: var(--serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 64px;
}

/* ==========================================================================
   POINTS (sention3)  — 2035:109 / 1727 × 1753
   bg #f7f6f5  padding 138px 290px  vertical gap 104
   content: text 497 + image 550  (gap 40)
   ========================================================================== */
.points {
  background: var(--beige);
  padding: 138px 290px;
  display: flex;
  flex-direction: column;
  gap: 104px;
}
.point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 423px;
  overflow: visible;
}
.point__text {
  /* 497 × 316 */
  width: 497px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* point.01〜03 ラベル（SP と同系統・PC でもテキスト列先頭に表示） */
.point__text::before {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  color: #929292;
  text-align: left;
  margin-bottom: 10px;
}
.point:nth-child(1) .point__text::before {
  content: "point.01";
}
.point:nth-child(2) .point__text::before {
  content: "point.02";
}
.point:nth-child(3) .point__text::before {
  content: "point.03";
}
.point__heading {
  /* Noto Serif JP Regular 28 / 44 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 44px;
  color: var(--text);
}
.point__line {
  /* 55 × 2  gold */
  display: block;
  width: 55px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.point__body {
  /* Noto Sans JP DemiLight 16 / 24  justify */
  font-family: var(--sans);
  font-weight: 350;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  text-align: justify;
}

/* ---- point image containers (base = white canvas 550 × 423) ---- */
.point__image {
  width: 550px;
  height: 423px;
  flex-shrink: 0;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.point__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Point 01 — image 550 × 341 anchored top:43 (inside white 423) */
.point:nth-child(1) .point__image img {
  top: 43px;
  height: 341px;
}

/* Point 02 — image bleeds to fill 550 × 423 (mask覆い) */
.point__image--bleed img {
  top: 0;
  height: 100%;
}

/* Point 03 — inset image 484 × 220 centered (Figma top:101 left:33) */
.point__image--inset img {
  top: 101px;
  /*left: 33px;*/
  width: 484px;
  height: 220px;
  object-fit: contain;
}

/* ==========================================================================
   CTA DARK  — 2073:114 & 2073:115 / 1728 × 284
   bg rgba(27,27,27,0.9)  padding 56px 20px  gap 24
   text 24 / 43  center white 588max
   ========================================================================== */
.cta-dark {
  background: var(--dark-cta);
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  overflow: hidden;
}
.cta-dark__text {
  /* Noto Serif JP Medium 24 / 43 */
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 43px;
  color: var(--white);
  max-width: 588px;
}
.cta-dark--mt {
  margin-top: 120px;
}

/* ---------- Button  340 × 63  radius 6px  bg #a78c2f ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 340px;
  height: 63px;
  padding: 0 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
  opacity: 0.85;
}
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}
.btn__arrow {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  flex-shrink: 0;
}

/* ==========================================================================
   CASES HEADER  — 2073:113 / 1728 × 398
   padding 60px 20px  gap 37
   title 54  letter-spacing 16.2px   lead 16 / 24 center
   ========================================================================== */
.cases-header {
  padding: 60px 20px;
  min-height: 398px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 37px;
  text-align: center;
}
.cases-header__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 16.2px;
  color: var(--text);
}
.cases-header__lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  max-width: var(--content-w);
  color: var(--text);
}

/* ==========================================================================
   CASES  — 2073:112 / 4件 vertical gap 120
   case height 816/815/815/802 ・ image 1080 × 700  (62.5% of 1728)
   ========================================================================== */
.cases {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.case {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.case--left {
  min-height: 816px;
}
.case--right {
  min-height: 815px;
}
.case:last-child {
  min-height: 802px;
}

/* ---- Case photo 1080 × 700 ---- */
.case__photo {
  position: absolute;
  top: 0;
  width: 62.5%; /* 1080 / 1728 */
  height: 700px;
  overflow: hidden;
  background: #eee; /* fade 中の背景抜け防止 */
}
.case--left .case__photo {
  left: 0;
}
.case--right .case__photo {
  right: 0;
}

/* Auto-slide layers — 複数画像を重ねて opacity でフェード切替 */
.case__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
  will-change: opacity;
}
.case__layer.is-active {
  opacity: 1;
}

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

/* ---- Case detail (text overlay) ---- */
.case__detail {
  position: absolute;
  top: 138px;
  z-index: 2;
}
.case__detail--right {
  left: 53%; /* approx Figma x=916 (53% of 1728) */
  width: 582px;
}
.case__detail--left {
  left: 13.2%; /* approx Figma x=228 (13.2% of 1728) */
  width: 637px;
}

/* Case number — Cormorant Regular 150  rgba(0,0,0,0.2) center  line-height 38 */
.case__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 150px;
  line-height: 38px;
  color: var(--num-water);
  text-align: center;
  position: absolute;
  top: 0;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.case__num--right {
  right: 20px;
}
.case__num--left {
  left: 54px;
}

/* Vertical gold line — 8 × 216  (Figma vector stroke-4 x2) */
.case__gold-line {
  position: absolute;
  top: 0;
  left: 600px;
  width: 8px;
  height: 216px;
  background: var(--gold);
}
.case__gold-line--right {
  right: 0;
}
.case__gold-line--left {
  left: 0;
}

/* Text cards (white) */
.case__card {
  background: var(--white);
  position: relative;
  box-shadow: 0 0 0 0 transparent; /* hook for elevation if needed */
}
.case__detail--right .case__card--title {
  width: 522px;
  margin-top: 95px;
  padding: 10px 26px;
}
.case__detail--right .case__card--body {
  width: 522px;
  margin-top: 27px;
  padding: 15px 27px;
}
.case__detail--left .case__card--title {
  width: 605px;
  margin-top: 92px;
  padding: 13px 26px;
}
.case__detail--left .case__card--body {
  width: 605px;
  margin-top: 27px;
  padding: 15px 27px;
}
.case__card--offset {
  margin-left: 32px;
}

.case__title {
  /* Noto Serif JP Regular 42 / 62 */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 62px;
  color: var(--text);
}
.case__body {
  /* Noto Sans JP DemiLight 16 / 32 justify */
  font-family: var(--sans);
  font-weight: 350;
  font-size: 16px;
  line-height: 32px;
  color: var(--text);
  text-align: justify;
}

/* Thumbnails 439 × 86 ・ thumb 133 × 86  gap 20 */
.case__thumbs {
  position: absolute;
  display: flex;
  gap: 20px;
  z-index: 3;
}
.case__thumbs--center {
  left: 18.5%;
  top: 730px;
} /* case 01 — Figma x=320 of 1728 */
.case__thumbs--right {
  left: 55.9%;
  top: 725px;
} /* case 02 / 04 */
.case__thumbs--narrow {
  left: 18.1%;
  top: 720px;
} /* case 03 (2 thumbs) */

.case__thumb {
  width: 133px;
  height: 86px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.case__thumb:hover {
  transform: translateY(-2px);
}
.case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__thumb.is-active {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
.case__thumb:not(.is-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* ==========================================================================
   SHOWROOM  — 2073:124 / 1728 × 833
   padding 40px 20px  gap 40  title 38 center
   image 800 × 450 (337:22 fill image — Figma MCPが URL非公開)
   ========================================================================== */
.showroom {
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  margin-top: 120px;
}
.showroom__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.45;
  color: var(--text);
}
.showroom__video-wrap {
  width: 800px;
  height: 450px;
  max-width: 100%;
  background: linear-gradient(135deg, #e9e5dc 0%, #cfc8b7 100%);
  position: relative;
  overflow: hidden;
}
.showroom__video-wrap::before {
  content: "桜木展示場 外観写真";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.2em;
}
.showroom__video-wrap img,
.showroom__video-wrap video,
.showroom__video-wrap iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.showroom__desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}

/* ==========================================================================
   SECTION DIVIDER — 306:57 (width 1100 horizontal line)
   ========================================================================== */
.section-divider {
  width: var(--content-w);
  max-width: calc(100% - 40px);
  margin: 75px auto;
  border: none;
  border-top: 1px solid var(--text);
}

/* ==========================================================================
   ACCESS  — 2073:125 / 1728 × 916
   padding 48px 20px  min-h 916  justify space-between
   ========================================================================== */
.access {
  padding: 48px 20px;
  min-height: 916px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 32px;
}
.access__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.45;
  color: var(--text);
}
.access__desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  max-width: var(--content-w);
  color: var(--text);
}
.access__tel {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.access__tel a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.access__map {
  width: 956px;
  max-width: 100%;
}
.access__map img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   RESPONSIVE 構成
   -------------------------------------------------------------------------
   >600px : PC (1728 design) を .page に指定した zoom で比例スケール。
            タブレット・PC・大画面すべて同一レイアウトで崩さずに表示する。
            中間ブレークポイント（1600/1440/1280/1024/768）は撤廃。
   ≤600px : Figma SP (375 design / 1:13 iPhone 16) にレイアウト変更。
   ========================================================================== */

/* ==========================================================================
   ≤600 : Figma SP（375デザイン）1:1 ポート
   ・すべての寸法を `calc(X * 100vw / 375)` で比例スケール
   ・regret を BG写真 + 暗色オーバーレイ + 白文字の縦長レイアウトに差し替え
   ・points に point.0X ラベル (::before) を付与
   ・case を 番号→タイトル→画像→サムネ→本文 の縦並びに再配置
   ========================================================================== */
@media (max-width: 600px) {
  /* ----- .page : PC zoom を解除してビューポート幅いっぱい ----- */
  .page {
    width: 100%;
    zoom: 1;
  }

  /* ----- Hero  (2030:45 SP: 375×599) ----- */
  .hero {
    height: calc(599 * 100vw / 375);
    gap: calc(16 * 100vw / 375);
  }
  .hero__title {
    /* 249:36 : 26 / 42 / +0.78 */
    font-size: calc(26 * 100vw / 375);
    line-height: calc(42 * 100vw / 375);
    letter-spacing: calc(0.78 * 100vw / 375);
    white-space: normal;
    max-width: calc(324 * 100vw / 375);
  }
  .hero__logo {
    /* 249:35 : 334 × 77 */
    width: calc(334 * 100vw / 375);
    height: calc(77 * 100vw / 375);
    object-fit: contain;
  }

  /* ----- Intro (2030:95 SP : title 32/52, body 15/30) ----- */
  .intro {
    margin-top: 0;
    padding: calc(100 * 100vw / 375) calc(20 * 100vw / 375)
      calc(60 * 100vw / 375);
    gap: calc(24 * 100vw / 375);
  }
  .intro__title {
    /* 249:43 : 32 / 52 / +0.96 */
    font-size: calc(32 * 100vw / 375);
    line-height: calc(52 * 100vw / 375);
    letter-spacing: calc(0.96 * 100vw / 375);
    font-weight: 600;
    max-width: calc(324 * 100vw / 375);
  }
  .intro__body {
    /* 249:46 : 15 / 30 */
    font-size: calc(15 * 100vw / 375);
    line-height: calc(30 * 100vw / 375);
    max-width: calc(334 * 100vw / 375);
  }

  /* ----- Regret (2030:97 SP : BG写真+暗色overlay+白文字 / 375×760) ----- */
  .regret {
    position: relative;
    display: block;
    flex-direction: unset;
    padding: 0;
    margin-top: 0;
    min-height: calc(760 * 100vw / 375);
    gap: 0;
    background: transparent;
    overflow: hidden;
  }
  .regret::before {
    /* 249:51 : 暗色オーバーレイ */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 27, 0.8);
    z-index: 1;
    pointer-events: none;
  }
  .regret__photo-wrap {
    /* 249:48 BG layer */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .regret__photo-wrap picture,
  .regret__photo-wrap picture img,
  .regret__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .regret__text {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: calc(102 * 100vw / 375) calc(50 * 100vw / 375)
      calc(80 * 100vw / 375);
    gap: calc(40 * 100vw / 375);
    align-items: center;
    text-align: center;
  }
  .regret__heading {
    width: 100%;
    text-align: center;
  }
  .regret__title {
    /* 249:53 : 26 SemiBold white */
    font-size: calc(26 * 100vw / 375);
    line-height: 1.45;
    text-align: center;
  }
  .regret__rule {
    /* 249:54 : 57 × 1px (gold or white) */
    position: static;
    display: block;
    margin: calc(12 * 100vw / 375) auto 0;
    width: calc(57 * 100vw / 375);
    height: 1px;
    background: var(--gold);
  }
  .regret__list {
    /* 249:60-64 : 15 / 26 white */
    font-size: calc(15 * 100vw / 375);
    line-height: calc(26 * 100vw / 375);
    text-align: left;
    width: calc(270 * 100vw / 375);
    margin: 0 auto;
  }
  .regret__list p {
    padding-left: calc(20 * 100vw / 375);
    margin-bottom: calc(6 * 100vw / 375);
  }
  /* Figma 249:56-59 : ●8×8 white ellipse bullet */
  .regret__list p::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(10 * 100vw / 375);
    width: calc(8 * 100vw / 375);
    height: calc(8 * 100vw / 375);
    background: #fff;
    border-radius: 50%;
    margin-right: 0;
  }
  .regret__caption {
    /* 249:83 : 18 Bold / 34 white */
    font-size: calc(18 * 100vw / 375);
    line-height: calc(34 * 100vw / 375);
    font-weight: 700;
    text-align: center;
    width: calc(263 * 100vw / 375);
    margin: 0 auto;
  }

  /* ----- Points title (2043:113 SP : 26 SemiBold 4行組) ----- */
  .points-title {
    min-height: auto;
    padding: calc(60 * 100vw / 375) calc(20 * 100vw / 375);
    gap: 0;
  }
  .points-title__sub,
  .points-title__main {
    font-size: calc(26 * 100vw / 375);
    line-height: calc(45 * 100vw / 375);
    font-family: var(--serif);
    font-weight: 600;
  }

  /* ----- Points (2035:109 SP : bg #f7f6f5 / 3 points 縦積み + point.XX label) ----- */
  .points {
    background: var(--beige);
    padding: calc(24 * 100vw / 375) 0 calc(50 * 100vw / 375);
    gap: calc(80 * 100vw / 375);
  }
  .point {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: calc(22 * 100vw / 375);
    padding: 0 calc(22 * 100vw / 375);
  }
  /* point.0X ラベル (249:91/100/111) — ベースは .point__text::before、SP で寸法・中央寄せ */
  .point__text::before {
    font-size: calc(28 * 100vw / 375);
    line-height: calc(38 * 100vw / 375);
    margin-bottom: calc(10 * 100vw / 375);
    text-align: center;
  }

  .point__text {
    width: 100%;
    max-width: calc(330 * 100vw / 375);
    align-items: center;
    text-align: center;
    gap: calc(22 * 100vw / 375);
  }
  .point__heading {
    /* 20 Medium / 32 */
    font-size: calc(20 * 100vw / 375);
    line-height: calc(32 * 100vw / 375);
    font-weight: 500;
    text-align: center;
  }
  .point__line {
    /* SP : 65 × 1px gold */
    width: calc(65 * 100vw / 375);
    height: 1px;
    background: var(--gold);
    margin: 0 auto;
  }
  .point__body {
    /* 15 / 26 justify */
    font-size: calc(15 * 100vw / 375);
    line-height: calc(26 * 100vw / 375);
    text-align: justify;
    font-weight: 400;
  }
  /* ポイント3画像コンテナ (共通 : 白カード 349×268 ±) */
  .point__image {
    width: calc(349 * 100vw / 375);
    max-width: 100%;
    height: calc(268 * 100vw / 375);
    position: relative;
    background: var(--white);
    overflow: hidden;
  }
  .point__image img {
    position: absolute;
    max-width: none;
  }

  /* Point 01 (Figma 2120:25) : 画像 350×218 を白カード内 y=26 に配置
     → 上下に白マージン（上26 / 下24）
     NOTE: `inset: auto` を個別 top/left の後に書くと shorthand が
     それらを全部 auto に上書きしてしまうため必ず個別プロパティで解除する */
  .point:nth-child(1) .point__image img {
    top: calc(26 * 100vw / 375);
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: calc(218 * 100vw / 375);
    object-fit: cover;
    object-position: center;
  }

  /* Point 02 (Figma 2120:46) : 画像 440×278 をマスク領域 349×268 に bleed
     → 画像が枠より大きく、(-45, -4) オフセットで中央部のみ見える */
  .point__image--bleed img {
    top: calc(-4 * 100vw / 375);
    right: auto;
    bottom: auto;
    left: calc(-45 * 100vw / 9000);
    width: calc(440 * 100vw / 375);
    height: calc(278 * 100vw / 375);
    object-fit: cover;
  }

  /* Point 03 (Figma 2120:54) : 画像 307×140 を白カード内 (21, 64) に配置
     → 上下左右に白マージン（上64 / 下65 / 左右21） */
  .point__image--inset img {
    top: calc(64 * 100vw / 375);
    right: auto;
    bottom: auto;
    left: calc(21 * 100vw / 8145);
    width: calc(307 * 100vw / 375);
    height: calc(140 * 100vw / 375);
    object-fit: contain;
  }

  /* ----- CTA (2123:59 / 2123:171 SP : 375×303 / 312 ) ----- */
  .cta-dark {
    padding: calc(56 * 100vw / 375) calc(10 * 100vw / 375);
    gap: calc(24 * 100vw / 375);
  }
  .cta-dark__text {
    /* 18 SemiBold / 38 */
    font-size: calc(18 * 100vw / 375);
    line-height: calc(38 * 100vw / 375);
    max-width: calc(340 * 100vw / 375);
    font-weight: 600;
  }
  .btn {
    min-width: calc(340 * 100vw / 375);
    height: calc(63 * 100vw / 375);
    font-size: calc(16 * 100vw / 375);
    padding: 0 calc(28 * 100vw / 375);
  }
  .btn__arrow {
    right: calc(28 * 100vw / 375);
  }
  .cta-dark--mt {
    margin-top: 0;
  }

  /* ----- Cases header (281:40 / 281:41 SP) ----- */
  .cases-header {
    min-height: auto;
    padding: calc(70 * 100vw / 375) calc(22 * 100vw / 375)
      calc(30 * 100vw / 375);
    gap: calc(30 * 100vw / 375);
  }
  .cases-header__title {
    /* 36 Medium */
    font-size: calc(36 * 100vw / 375);
    line-height: 1.3;
    letter-spacing: calc(6 * 100vw / 375);
    font-weight: 500;
  }
  .cases-header__lead {
    /* 15 / 26 justify 330 */
    font-size: calc(15 * 100vw / 375);
    line-height: calc(26 * 100vw / 375);
    text-align: justify;
    max-width: calc(330 * 100vw / 375);
  }

  /* ----- Cases (SP : Figma 1:13 事例 01-04 に厳密準拠) ---------------
     Figma SP case 01 ( y=5088〜5715 相対 / height 627 ):
       y=0    : 「01」 100 Cormorant #d7d7d7  右寄せ (x=223, w=81)
       y=8    : 縦ゴールドバー 8×127  右端 (x=318)
       y=56   : タイトル文字 22 Medium 2行 / 42 line (x=23, 241×84)
       y=59   : 白 rect 236×35 (x=74)  ← 1行目下の白帯
       y=101  : 白 rect 161×39 (x=23)  ← 2行目下の白帯
       y=119  : 画像 376×244 (x=0)  ← 全幅・タイトル下端に 21px かぶる
       y=383  : サムネ 89×58 × 3個 (x=44/143/242)
       y=471  : 本文 330×156 (x=23)
     → 絶対配置ではなく、要素ごとに natural flow で組み上げ、
       相対マージンで Figma の重なり（タイトル line2 と画像の -21px）を再現。
  ------------------------------------------------------------------- */
  .cases {
    gap: calc(60 * 100vw / 5000);
  }

  .case {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto !important;
    overflow: visible;
    padding: calc(40 * 100vw / 375) 0 calc(28 * 100vw / 375);
  }
  /* .case__detail の子要素を .case 直下のフレックスアイテムとして扱う */
  .case__detail {
    display: contents;
    position: static;
    top: auto;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* ── 番号 01-04 : 100 Cormorant #d7d7d7  right-align w/ gold-line ── */
  .case__num {
    order: 1;
    position: static;
    display: block;
    width: 100%;
    font-family: var(--display);
    font-size: calc(100 * 100vw / 375);
    line-height: 1;
    color: #d7d7d7;
    text-align: right;
    padding-right: calc(62 * 100vw / 375); /* 空きとゴールドバー分 */
    margin: 0;
  }
  .case__num--right,
  .case__num--left {
    right: auto;
    left: auto;
  }

  /* 縦ゴールドバー : 8×127 (case03 のみ 156) 番号脇に絶対配置 */
  .case__gold-line {
    position: absolute;
    top: calc(48 * 100vw / 375);
    right: calc(43 * 100vw / 375); /* Figma 318+8=326 / 375-326=49 ≒43 */
    width: calc(8 * 100vw / 375);
    height: calc(127 * 100vw / 375);
    background: var(--gold);
    display: block;
    z-index: 4; /* 最前面に表示 */
    left: auto;
  }
  .case:nth-of-type(3) .case__gold-line {
    height: calc(156 * 100vw / 375);
  }

  /* ── タイトルカード : 白背景 2枚の帯風 + テキスト ── */
  .case__card {
    position: static;
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  .case__card--title {
    order: 2;
    position: relative; /* z-index 有効化用 */
    z-index: 3; /* photo(1) より必ず上 */
    width: calc(330 * 100vw / 375) !important;
    margin: calc(-16 * 100vw / 375) 0 0 !important; /* 番号下端と重ねる */
    padding: 0 !important;
    text-align: left;
    align-self: flex-start;
    margin-left: calc(23 * 100vw / 375) !important;
    pointer-events: none; /* 下の画像/サムネのタップを阻害しない */
  }
  .case__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: calc(22 * 100vw / 375);
    line-height: calc(42 * 100vw / 375);
    color: var(--text);
    /* Figma rect 51/52 の「文字下に白帯」を box-decoration-break で各行に再現 */
    display: inline;
    background-color: var(--white);
    padding: calc(4 * 100vw / 375) calc(12 * 100vw / 375);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    pointer-events: auto;
  }

  /* ── メイン写真 : 376×244 フルブリード / タイトル line2 と 21px 重ねる ── */
  .case__photo {
    order: 3;
    position: relative; /* layer 絶対配置の基準として必須 */
    top: auto;
    left: auto !important;
    right: auto !important;
    width: 100%;
    max-width: none;
    height: calc(244 * 100vw / 375);
    margin-top: calc(
      -21 * 100vw / 375
    ); /* Figma image y=119 / title end y=140 → -21 */
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    z-index: 1; /* title(3) と gold-line(4) より下 */
  }

  /* ── サムネ : 89×58 × 3個 (or 2個 case03) 横並び中央 ── */
  .case__thumbs {
    order: 4;
    position: static;
    top: auto !important;
    left: auto !important;
    display: flex;
    justify-content: center;
    gap: calc(10 * 100vw / 375);
    margin: calc(24 * 100vw / 375) 0 calc(28 * 100vw / 375);
  }
  .case__thumb {
    width: calc(89 * 100vw / 375);
    height: calc(58 * 100vw / 375);
  }
  .case__thumb.is-active {
    outline-width: calc(3 * 100vw / 375);
  }
  .case__thumbs--center,
  .case__thumbs--right,
  .case__thumbs--narrow {
    left: auto;
    top: auto;
  }

  /* ── 本文 : 16 / 32 justify / 330 幅 ── */
  .case__card--body {
    order: 5;
    width: calc(330 * 100vw / 375) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent;
    align-self: center;
    text-align: justify;
  }
  .case__body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: calc(15 * 100vw / 375);
    line-height: calc(26 * 100vw / 375);
    text-align: justify;
  }

  /* ----- Showroom (2132:184 SP : py 40 px 20 / title 24) ----- */
  .showroom {
    margin-top: 0;
    padding: calc(40 * 100vw / 375) calc(20 * 100vw / 375);
    gap: calc(29 * 100vw / 375);
  }
  .showroom__title {
    font-size: calc(24 * 100vw / 375);
    line-height: 1.45;
  }
  .showroom__video-wrap {
    width: calc(346 * 100vw / 375);
    height: calc(195 * 100vw / 375);
    max-width: 100%;
  }
  .showroom__video-wrap::before {
    font-size: calc(13 * 100vw / 375);
  }
  .showroom__desc {
    font-size: calc(16 * 100vw / 375);
    line-height: calc(24 * 100vw / 375);
    text-align: justify;
    max-width: calc(336 * 100vw / 375);
  }

  /* ----- Divider (2132:180 SP : 336 幅) ----- */
  .section-divider {
    width: calc(336 * 100vw / 375);
    max-width: calc(336 * 100vw / 375);
    margin: 0 auto;
    border-top-color: var(--text);
  }

  /* ----- Access (2132:188 SP : py 48 px 20 / title 24) ----- */
  .access {
    padding: calc(48 * 100vw / 375) calc(20 * 100vw / 375);
    min-height: auto;
    gap: calc(20 * 100vw / 375);
  }
  .access__title {
    font-size: calc(24 * 100vw / 375);
    line-height: 1.45;
  }
  .access__desc {
    font-size: calc(16 * 100vw / 375);
    line-height: calc(24 * 100vw / 375);
    text-align: justify;
    max-width: calc(346 * 100vw / 375);
  }
  .access__tel {
    font-size: calc(16 * 100vw / 375);
    line-height: calc(24 * 100vw / 375);
    max-width: calc(308 * 100vw / 375);
  }
  .access__map {
    width: calc(340 * 100vw / 375);
    max-width: 100%;
    aspect-ratio: 340 / 182;
  }
  .access__map img,
  .access__map picture,
  .access__map picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}