/* So-Ai 歯科矯正 TOP — Figma node 182:1990 */

:root {
  --color-primary: #8e5572;
  --color-text: #636171;
  --color-accent: #eae0e5;
  --color-bg: #f5f2ed;
  --font-zen: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-noto: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-hanato: '花とちょうちょ', 'Zen Kurenaido', var(--font-zen);
}

@font-face {
  font-family: '花とちょうちょ';
  src:
    local('花とちょうちょ Regular'),
    local('花とちょうちょ'),
    local('Hanatotyoutyo'),
    local('hanatotyoutyo');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
}

.flow-arrow-down {
  width: 59px;
  height: 58px;
  flex-shrink: 0;
}

/* Page shell: full viewport width */
body > div {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

/* Site header: always full width (white bar edge-to-edge) */
body > div > div[class*='bg-white'][class*='px-[190px]'][class*='py-[18px]'][class*='w-[1536px]'] {
  align-self: stretch;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

[class*='Zen_Maru_Gothic'] {
  font-family: var(--font-zen) !important;
}

[class*='Noto_Sans'] {
  font-family: var(--font-noto) !important;
}

a[href^='tel:'] {
  text-decoration: none;
}

a[href^='tel:']:hover {
  opacity: 0.85;
}

/* Header nav — logo + global menu */
body > div > div[class*='bg-white'][class*='px-[190px]'][class*='py-[18px]'] a[href] {
  cursor: pointer;
}

body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] {
  position: relative;
  z-index: 3;
}

body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] a.site-header-nav-link,
body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] a[href] {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 3;
  line-height: normal;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] a.site-header-nav-link:hover,
body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] a[href]:hover {
  color: #8e5572;
  opacity: 0.9;
}

img {
  max-width: 100%;
}

/* TOP 症状別セクション: 左装飾イラスト（multiply の背面をクリームに固定） */
.top-main {
  position: relative;
  z-index: 1;
  isolation: isolate !important;
}

.top-main .top-symptom-section,
.top-main .symptom-section,
.wire-orthodontics-main .top-symptom-section {
  isolation: auto !important;
  overflow: visible !important;
  background-color: var(--color-bg);
  padding-top: 24px;
}

/* Anchor offset for header nav / footer links (index.html#symptom) */
.top-main .top-symptom-section .section-anchor,
.top-main .symptom-section .section-anchor,
.wire-orthodontics-main .top-symptom-section .section-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 32px;
}

.top-main .top-symptom-section .symptom-deco,
.top-main .symptom-section .symptom-deco,
.wire-orthodontics-main .top-symptom-section .symptom-deco {
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  background-color: var(--color-bg);
  left: -243px !important;
}

.top-main .top-symptom-section .symptom-deco img,
.top-main .symptom-section .symptom-deco img,
.wire-orthodontics-main .top-symptom-section .symptom-deco img {
  mix-blend-mode: multiply !important;
}

.top-main .top-symptom-section > :not(.symptom-deco),
.top-main .symptom-section > :not(.symptom-deco),
.wire-orthodontics-main .top-symptom-section > :not(.symptom-deco) {
  position: relative;
  z-index: 2;
}

/* FAQ accordion — Figma node 185:1766 */
.faq-accordion-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq-accordion__trigger {
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.faq-accordion-item--open {
  justify-content: center;
}

/* Panel open/close — CSS grid (iOS で height JS アニメより軽い) */
.faq-accordion__panel {
  width: 100%;
  overflow: hidden;
  contain: layout style;
}

@supports (grid-template-rows: 0fr) {
  .faq-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-accordion-item--open .faq-accordion__panel {
    grid-template-rows: 1fr;
  }

  .faq-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
}

@supports not (grid-template-rows: 0fr) {
  .faq-accordion__panel {
    max-height: 0;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-accordion-item--open .faq-accordion__panel {
    max-height: 600px;
  }

  .faq-accordion__panel-inner {
    box-sizing: border-box;
  }
}

.faq-accordion__panel-inner > div {
  opacity: 1;
  transform: none;
}

.faq-accordion__question {
  align-items: center;
}

.faq-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* + → − icon morph */
.faq-accordion__icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.faq-accordion__icon-line {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
  transform: translateZ(0);
}

.faq-accordion__icon-line--v {
  transform-origin: center;
}

.faq-accordion-item--open .faq-accordion__icon-line--v {
  transform: scaleY(0);
  opacity: 0;
}

.faq-accordion__q,
.faq-accordion__panel-inner > div > p:first-child {
  font-family: var(--font-zen);
  line-height: 80px !important;
  font-size: 60px !important;
  flex-shrink: 0;
  color: rgba(142, 85, 114, 0.2);
  transition: color 0.35s ease;
}

.faq-accordion-item--featured .faq-accordion__q {
  color: #eae0e5;
}

.faq-accordion-item--featured.faq-accordion-item--open .faq-accordion__q {
  color: rgba(142, 85, 114, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__panel {
    transition: none !important;
  }

  .faq-accordion__icon-line,
  .faq-accordion__q {
    transition: none;
  }
}

.faq-reduced-motion .faq-accordion__panel {
  transition: none !important;
}

/* SP / tablet — 開閉時の gap を TOP FAQ と同じく滑らかに */
@media (max-width: 1024px) {
  [data-faq].faq-accordion-item {
    gap: 0 !important;
    justify-content: flex-start !important;
    transition: gap 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-faq].faq-accordion-item.faq-accordion-item--open {
    gap: 20.161px !important;
  }

  [data-faq] .faq-accordion__trigger .faq-accordion__question {
    align-items: center !important;
  }

  [data-faq] .faq-accordion__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
  }

  [data-faq] .faq-accordion__trigger .faq-accordion__question .faq-accordion__q {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [data-faq] .faq-accordion__panel-inner {
    padding-top: 0;
  }
}

/* Medical info — clinic table rows (Figma node 225:9244) */
.medical-info-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.medical-info-page > :not(.medical-info-bg-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.medical-info-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.medical-info-fv-bg {
  pointer-events: none !important;
  z-index: 0 !important;
}

.medical-info-fv-bg img {
  object-fit: cover;
  object-position: center top;
}

.medical-info-intro-section,
.medical-info-facility-section {
  overflow: visible !important;
}

.medical-info-facility-row {
  justify-content: center;
}

/* 施設紹介カード写真 — 円形クリップ（mask-intersect / Tailwind 寸法競合を避ける） */
.medical-info-facility-photo {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 300px !important;
  height: 300px !important;
  min-width: 300px !important;
  min-height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background-color: #f5f2ed;
}

.medical-info-facility-photo__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  .medical-info-facility-photo {
    width: 174.731px !important;
    height: 174.731px !important;
    min-width: 174.731px !important;
    min-height: 174.731px !important;
    max-width: 174.731px !important;
    max-height: 174.731px !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 1025px) {
  .medical-info-facility-row {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 40px !important;
  }

  .medical-info-facility-row > * {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }
}

@media (max-width: 1024px) {
  .medical-info-facility-row {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .medical-info-facility-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-content: center !important;
    gap: 40px !important;
  }

  .medical-info-facility-row > * {
    flex: 0 0 calc((100% - 80px) / 3) !important;
    width: calc((100% - 80px) / 3) !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .medical-info-facility-photo {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin-inline: auto !important;
  }
}

.medical-info-table {
  align-items: stretch;
}

.medical-info-row > div[class*='flex-[1_0_0]']:first-child {
  flex: 0 0 165px !important;
  width: 165px;
  max-width: 165px;
}

.medical-info-row > div[class*='flex-[1_0_0]']:last-child {
  flex: 1 1 0% !important;
  min-width: 0;
}

.medical-info-fv-bg img {
  object-fit: cover;
  object-position: center top;
}

/* Medical info — watercolor multiply backgrounds + section icons */
.medical-info-main {
  isolation: auto !important;
  overflow: visible !important;
}

.medical-info-main > .absolute {
  z-index: 0 !important;
  pointer-events: none !important;
}

.medical-info-main > :not(.absolute) {
  position: relative;
  z-index: 2;
}

.medical-info-bg-deco {
  pointer-events: none;
  z-index: 0;
}

.medical-info-bg-deco img {
  mix-blend-mode: multiply !important;
}

.medical-info-section {
  overflow: visible !important;
}

/* アクセス — Google Maps embed (Figma 1080×388, rounded 10px) */
.medical-info-map,
.access-map {
  width: 100%;
  max-width: 1080px;
  height: 388px;
  min-height: 388px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: #e5e3df;
}

.medical-info-map iframe,
.access-map iframe {
  display: block;
  width: 100%;
  height: 388px;
  min-height: 388px;
  border: 0;
}

.medical-info-access-section {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Figma: blur(5px) + opacity 80% on section watercolor decos */
.medical-info-deco {
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.medical-info-deco img {
  opacity: 0.8;
  object-fit: cover;
}

/* 診療時間 — Figma image 88: warm watercolor + clock */
.medical-info-hours-section > .medical-info-deco::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 68% 64% at 36% 44%,
    rgba(255, 208, 120, 0.78) 0%,
    rgba(255, 186, 148, 0.62) 26%,
    rgba(250, 196, 205, 0.42) 50%,
    rgba(245, 242, 237, 0) 72%
  );
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.medical-info-hours-section > .medical-info-deco img {
  position: relative;
  z-index: 1;
  opacity: 0.92;
}

.faq-accordion__answer-rich {
  flex: 1 0 0;
  min-width: 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 1.8px;
  color: var(--p, #636171);
}

/* Figma export: col-1 row-1 overlay in inline-grid (BEFORE/AFTER labels etc.) */
.inline-grid > .col-1.row-1 {
  grid-column: 1;
  grid-row: 1;
}

/* Figma export: decorative sticky backgrounds must not overlap following sections */
[class*='absolute'][class*='bottom-0'][class*='pointer-events-none'] [class*='sticky'] {
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
}

/* Adult orthodontics — Figma node 235:3787 */
.adult-orthodontics-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.adult-orthodontics-fv-deco {
  pointer-events: none;
  z-index: 0;
}

.adult-orthodontics-page > .adult-orthodontics-fv-deco--orange {
  position: absolute !important;
}

.adult-orthodontics-page > :not(.adult-orthodontics-fv-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.adult-orthodontics-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.adult-orthodontics-fv-bg {
  pointer-events: none;
  z-index: 0;
}

.adult-orthodontics-fv-bg-sticky {
  pointer-events: none !important;
}

.adult-orthodontics-fv-bg-sticky > img {
  object-fit: cover;
  object-position: center top;
}

.adult-orthodontics-page [class*='mix-blend-multiply'],
.adult-orthodontics-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.adult-orthodontics-page [class*='mix-blend-multiply'] img:not([class*='mix-blend-multiply']),
.adult-orthodontics-main [class*='mix-blend-multiply'] img:not([class*='mix-blend-multiply']) {
  mix-blend-mode: normal !important;
}

.adult-orthodontics-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
}

.adult-orthodontics-main > :not(.adult-orthodontics-fv-bg):not(.adult-orthodontics-fv-deco):not(.adult-orthodontics-faq-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.adult-orthodontics-main > .adult-orthodontics-fv-deco--pink {
  position: absolute !important;
}

.adult-orthodontics-main > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.adult-orthodontics-main img[class*='mix-blend-multiply'] {
  mix-blend-mode: multiply !important;
}

/* Figma mask export is invisible in browsers — use circular photo frames instead */
.adult-orthodontics-photo-frame {
  position: relative !important;
  width: 300px !important;
  height: 300px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  isolation: isolate;
}

.adult-orthodontics-photo-frame > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  pointer-events: none;
}

.adult-orthodontics-photo-frame > .adult-orthodontics-photo-crop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  max-width: none;
}

/* Figma の left/top/width/height クロップを活かす（100% 強制で潰さない） */
.adult-orthodontics-photo-frame > .adult-orthodontics-photo-crop > img {
  position: absolute !important;
  max-width: none !important;
  pointer-events: none;
  object-fit: fill;
}

/* size-full / inset-0 の写真は円を cover で埋める */
.adult-orthodontics-photo-frame > .adult-orthodontics-photo-crop > img[class*='inset-0'],
.adult-orthodontics-photo-frame > .adult-orthodontics-photo-crop > img[class*='size-full'] {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.adult-orthodontics-photo-frame > .absolute.overflow-hidden {
  inset: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* メリット円形 — Figma クロップ（PC / TB 共通。SP は responsive 側で再指定） */
.adult-orthodontics-photo-frame img[src*='956fdb5b'] {
  inset: auto !important;
  left: -78.91% !important;
  top: 0.29% !important;
  width: 179% !important;
  height: 118.48% !important;
  object-fit: fill !important;
}

.adult-orthodontics-photo-frame img[src*='034d2b01'] {
  inset: auto !important;
  left: -60.81% !important;
  top: -46.52% !important;
  width: 246% !important;
  height: 146.98% !important;
  object-fit: fill !important;
}

.adult-orthodontics-photo-frame img[src*='daa93fe9'],
.adult-orthodontics-photo-frame img[src*='acbddfb0'] {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

.adult-orthodontics-photo-frame img[src*='68a3c12a'] {
  inset: auto !important;
  left: -79.94% !important;
  top: -65.83% !important;
  width: 250% !important;
  height: 165.74% !important;
  object-fit: fill !important;
}

.adult-orthodontics-faq-section {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
  flex: none !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 1080px !important;
}

.adult-orthodontics-commitment-section {
  flex: none !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 1080px !important;
}

.adult-orthodontics-wire-section {
  flex: none !important;
  align-self: stretch !important;
}

.adult-orthodontics-faq-deco {
  pointer-events: none;
  z-index: 0;
}

.adult-orthodontics-faq-section > :not(.adult-orthodontics-faq-deco) {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .adult-orthodontics-card-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .adult-orthodontics-card-row > * {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .adult-orthodontics-card > div[class*='gap-[10px_40px]'],
  .adult-orthodontics-card-row > * > div[class*='gap-[10px_40px]'] {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .adult-orthodontics-card > div[class*='gap-[10px_40px]'] > p,
  .adult-orthodontics-card > div[class*='flex-col'] > p,
  .adult-orthodontics-card-row > * > div[class*='gap-[10px_40px]'] > p,
  .adult-orthodontics-card-row > * > div[class*='flex-col'] > p {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: auto !important;
  }

  .adult-orthodontics-card[class*='gap-[40px_0px]'],
  .adult-orthodontics-card-row > [class*='gap-[40px_0px]'] {
    flex-direction: column !important;
    align-items: center !important;
  }

  .adult-orthodontics-wire-section {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .adult-orthodontics-wire-section > [class*='flex-[1_0_0]'] {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  .adult-orthodontics-card-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }

  .adult-orthodontics-card {
    width: 100% !important;
    max-width: 360px !important;
  }

  .adult-orthodontics-wire-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }

  .adult-orthodontics-wire-section > * {
    width: 100% !important;
    max-width: 720px;
  }

  .adult-orthodontics-fv-bg {
    left: 50% !important;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
  }

  .adult-orthodontics-fv-bg-sticky {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .adult-orthodontics-fv-deco--pink {
    left: -72vw !important;
    top: -8vw !important;
    transform: scale(0.55);
    transform-origin: center center;
  }

  .adult-orthodontics-fv-deco--orange {
    right: -28vw !important;
    top: 8vw !important;
    transform: scale(0.5);
    transform-origin: center center;
  }
}

/* Wire orthodontics — Figma node 235:3521 */
.wire-orthodontics-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.wire-orthodontics-fv-bg {
  pointer-events: none;
  z-index: 0;
  width: 1500px;
  margin-left: -750px;
}

.wire-orthodontics-fv-bg-sticky {
  pointer-events: none !important;
}

.wire-phase-num {
  position: relative;
}

.wire-phase-num__img {
  object-fit: contain;
  object-position: center;
}

.wire-orthodontics-page > :not(.wire-orthodontics-fv-bg):not(.wire-orthodontics-hero-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.wire-orthodontics-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.wire-orthodontics-main {
  isolation: auto !important;
  overflow: visible !important;
}

.wire-orthodontics-page [class*='mix-blend-multiply'],
.wire-orthodontics-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.wire-orthodontics-page [class*='mix-blend-multiply'] img:not([class*='mix-blend-multiply']),
.wire-orthodontics-main [class*='mix-blend-multiply'] img:not([class*='mix-blend-multiply']) {
  mix-blend-mode: normal !important;
}

.wire-symptom-section,
.wire-orthodontics-faq-section,
.wire-orthodontics-main .symptom-section,
.wire-orthodontics-main .top-symptom-section {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
}

.wire-orthodontics-main .symptom-section .symptom-deco,
.wire-orthodontics-main .top-symptom-section .symptom-deco {
  pointer-events: none;
  z-index: 0;
  /* wire-orthodontics-main の section gap は 200px（TOPページは 300px）のため、
     共通の top-[-250px] のままだと前セクションの CTA ボタンに重なってしまう */
  top: -180px !important;
}

.wire-orthodontics-main .symptom-section .symptom-deco img,
.wire-orthodontics-main .top-symptom-section .symptom-deco img {
  mix-blend-mode: multiply !important;
}

.wire-orthodontics-deco,
.wire-orthodontics-faq-deco {
  pointer-events: none;
  z-index: 0;
}

.wire-symptom-section > :not(.wire-orthodontics-deco),
.wire-orthodontics-faq-section > :not(.wire-orthodontics-faq-deco),
.wire-orthodontics-main .symptom-section > :not(.symptom-deco),
.wire-orthodontics-main .top-symptom-section > :not(.symptom-deco) {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .wire-orthodontics-card-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .wire-orthodontics-card-row > * {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .wire-orthodontics-card > div[class*='gap-[10px_40px]'],
  .wire-orthodontics-card-row > * > div[class*='gap-[10px_40px]'] {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .wire-orthodontics-card > div[class*='gap-[10px_40px]'] > p,
  .wire-orthodontics-card > div[class*='flex-col'] > p,
  .wire-orthodontics-card-row > * > div[class*='gap-[10px_40px]'] > p,
  .wire-orthodontics-card-row > * > div[class*='flex-col'] > p {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: auto !important;
  }

  .wire-orthodontics-card[class*='gap-[40px_0px]'],
  .wire-orthodontics-card-row > [class*='gap-[40px_0px]'] {
    flex-direction: column !important;
    align-items: center !important;
  }

  .wire-orthodontics-flow-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wire-orthodontics-flow-card > :first-child {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  .wire-orthodontics-flow-card > :last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  .wire-orthodontics-card-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }

  .wire-orthodontics-card {
    width: 100% !important;
    max-width: 360px !important;
  }

  .wire-orthodontics-flow-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .wire-orthodontics-flow-card > * {
    width: 100% !important;
    max-width: 720px;
  }

  .wire-orthodontics-fv-bg {
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    left: 50% !important;
  }

  .wire-orthodontics-fv-bg-sticky {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* First visit — Figma node 224:7942 */
.first-visit-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.first-visit-page > :not(.first-visit-bg-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.first-visit-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.first-visit-main {
  isolation: auto !important;
  overflow: visible !important;
}

.first-visit-main > .absolute,
.first-visit-fv-wrap {
  z-index: 0 !important;
  pointer-events: none !important;
}

.first-visit-main > :not(.absolute) {
  position: relative;
  z-index: 2;
}

.first-visit-fv-bg {
  pointer-events: none !important;
  z-index: 0 !important;
}

.first-visit-fv-bg img {
  object-fit: cover;
  object-position: center top;
}

.first-visit-bg-deco {
  pointer-events: none;
  z-index: 0;
}

.first-visit-phase-num {
  position: relative;
}

.first-visit-phase-num__img {
  object-fit: contain;
  object-position: center;
}

.first-visit-intro-section,
.first-visit-reasons-section,
.first-visit-flow-section,
.first-visit-faq-section,
.first-visit-risks-section {
  width: 100%;
  overflow: visible !important;
}

.first-visit-faq-deco {
  pointer-events: none;
  z-index: 0;
}

.first-visit-risks-panel {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1081px) {
  .first-visit-flow-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .first-visit-flow-card > :first-child {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  .first-visit-flow-card > :last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .first-visit-risks-panel {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .first-visit-risks-panel > * {
    flex: 1 1 0% !important;
    min-width: 300px !important;
    max-width: calc(50% - 50px);
  }
}

@media (max-width: 1024px) {
  .first-visit-flow-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .first-visit-flow-card > * {
    width: 100% !important;
    max-width: 720px;
  }

  .first-visit-risks-panel {
    flex-direction: column !important;
    gap: 40px !important;
    padding-inline: 24px !important;
    padding-block: 40px !important;
  }

  .first-visit-fv-bg {
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    left: 50% !important;
  }
}

/* Orthodontist — Figma node 225:11770 */
.orthodontist-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.orthodontist-page > :not(.orthodontist-bg-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.orthodontist-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.orthodontist-main {
  isolation: auto !important;
  overflow: visible !important;
}

.orthodontist-main > .absolute,
.orthodontist-fv-wrap {
  z-index: 0 !important;
  pointer-events: none !important;
}

.orthodontist-main > :not(.absolute) {
  position: relative;
  z-index: 2;
}

.orthodontist-fv-bg {
  pointer-events: none !important;
  z-index: 0 !important;
}

.orthodontist-fv-bg img {
  object-fit: cover;
  object-position: center top;
}

.orthodontist-bg-deco {
  pointer-events: none;
  z-index: 0;
}

/* SP/TB 用 blob — PC では非表示 */
.orthodontist-deco {
  display: none;
}

.orthodontist-intro-section,
.orthodontist-doctor-section,
.orthodontist-mft-section,
.orthodontist-philosophy-section {
  width: 100%;
  overflow: visible !important;
}

.orthodontist-intro-heading {
  text-shadow: 0 1px 12px rgba(99, 97, 113, 0.35);
}

.orthodontist-doctor-section {
  position: relative;
}

.orthodontist-doctor-bg {
  pointer-events: none;
  z-index: 0;
}

.orthodontist-doctor-heading,
.orthodontist-doctor-panel,
.orthodontist-doctor-notice {
  position: relative;
  z-index: 1;
}

.orthodontist-doctor-panel,
.orthodontist-doctor-notice {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1081px) {
  .orthodontist-flow-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .orthodontist-flow-card > :first-child {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  .orthodontist-flow-card > :last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  .orthodontist-flow-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .orthodontist-flow-card > * {
    width: 100% !important;
    max-width: 720px;
  }

  .orthodontist-doctor-bg {
    position: relative !important;
    top: 0 !important;
    height: 240px !important;
    margin-bottom: 24px;
  }

  .orthodontist-doctor-heading {
    padding-bottom: 24px !important;
  }

  .orthodontist-fv-bg {
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    left: 50% !important;
  }
}

/* Equipment — Figma node 225:14837 */
.equipment-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.equipment-page > :not(.equipment-bg-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.equipment-page > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.equipment-main {
  isolation: auto !important;
  overflow: visible !important;
}

.equipment-main > .absolute,
.equipment-fv-wrap {
  z-index: 0 !important;
  pointer-events: none !important;
}

.equipment-main > :not(.absolute) {
  position: relative;
  z-index: 2;
}

.equipment-fv-bg {
  pointer-events: none !important;
  z-index: 0 !important;
}

.equipment-fv-bg img {
  object-fit: cover;
  object-position: center top;
}

.equipment-bg-deco {
  pointer-events: none;
  z-index: 0;
}

.equipment-hygiene-section {
  width: 100%;
  overflow: visible !important;
}

.equipment-card-inner {
  flex-direction: column !important;
  align-items: center !important;
  width: 100%;
}

.equipment-card-inner > p {
  width: 100%;
}

.equipment-grid-row {
  justify-content: center;
}

@media (min-width: 1025px) {
  .equipment-grid-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 80px !important;
  }

  .equipment-grid-row > * {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }
}

@media (max-width: 1024px) {
  .equipment-grid-row {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (min-width: 1081px) {
  .equipment-flow-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .equipment-flow-card > :first-child {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  .equipment-flow-card > :last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  .equipment-flow-card {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .equipment-flow-card > * {
    width: 100% !important;
    max-width: 720px;
  }

  .equipment-fv-bg {
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    left: 50% !important;
  }
}

/* Children orthodontics — Figma node 235:5496 */
.children-orthodontics-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.children-orthodontics-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 200px !important;
}

.children-checklist-section {
  position: relative;
  overflow: visible !important;
  width: 100%;
  max-width: 1080px;
  box-sizing: border-box;
  /* absolute image 83 ends ~811px from section top — reserve space below white box */
  padding-bottom: 220px;
}

.children-checklist-section > :not([class*='absolute']) {
  position: relative;
  z-index: 1;
}

.children-checklist-section > [class*='bg-[rgba'] {
  width: 100%;
  box-sizing: border-box;
}

.children-orthodontics-fv-bg,
.children-orthodontics-deco,
.children-orthodontics-fv-plane {
  pointer-events: none;
  z-index: 0;
}

.children-orthodontics-fv-plane {
  position: absolute !important;
  z-index: 3 !important;
  top: 258.21px !important;
  left: 1020px !important;
  width: 136px !important;
  height: 83px !important;
}

.children-orthodontics-main > .children-orthodontics-fv-title {
  position: relative;
  z-index: 4 !important;
}

.children-intro-section {
  position: relative;
  overflow: visible !important;
}

.children-intro-section > :not(.children-orthodontics-fv-sun) {
  position: relative;
  z-index: 1;
}

.children-orthodontics-fv-sun {
  position: absolute !important;
  z-index: 0;
  pointer-events: none;
  flex: none !important;
  width: 460px !important;
  height: 444px !important;
  max-width: none !important;
}

.children-orthodontics-main > :not(.children-orthodontics-fv-bg):not(.children-orthodontics-deco):not(.children-orthodontics-fv-plane):not(.absolute) {
  position: relative;
  z-index: 1;
}

.children-orthodontics-main > .absolute:not(.children-orthodontics-fv-plane) {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

/* multiply 水彩 — Figma は外側ラッパーに mix-blend-multiply */
.children-orthodontics-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.children-orthodontics-main [class*='mix-blend-multiply'] img:not([class*='mix-blend-multiply']) {
  mix-blend-mode: normal !important;
}

.children-orthodontics-main img[class*='mix-blend-multiply'] {
  mix-blend-mode: multiply !important;
}

/* Heart-shaped photo frames — mask-composite breaks in browsers; use clip-path */
.children-heart-frame {
  flex-shrink: 0;
  overflow: hidden !important;
  position: relative;
  clip-path: path(
    'M156.716 269.479C142.239 269.479 139.1 300 109.195 300C79.2911 300 36.8702 221.974 20.0936 179.567C3.3085 137.151 -10.3538 87.4357 10.7591 40.9865C31.872 -5.46265 87.0982 -1.84141 99.861 2.21702C112.624 6.27545 141.382 15.4152 156.716 15.4152C172.05 15.4152 200.818 6.27545 213.572 2.21702C226.326 -1.84141 281.561 -5.46265 302.674 40.9865C323.787 87.4357 310.124 137.16 293.339 179.567C276.554 221.974 234.142 300 204.237 300C174.333 300 171.193 269.479 156.716 269.479Z'
  );
}

.children-banner-frame {
  flex-shrink: 0;
  overflow: hidden !important;
  position: relative;
  border-radius: 10px;
}

.children-heart-frame [style*='mask-image'],
.children-banner-frame [style*='mask-image'] {
  -webkit-mask: none !important;
  mask: none !important;
}

/* マスク無効時 — 最前面レイヤーのみ表示（Figma 複数レイヤー export 対策） */
.children-heart-frame > [style*='mask-image']:not(:last-of-type) {
  display: none !important;
}

.children-heart-frame > [style*='mask-image']:last-of-type img:not(:last-of-type) {
  display: none !important;
}

.children-heart-frame > [style*='mask-image']:only-child,
.children-banner-frame > [style*='mask-image']:only-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.children-heart-frame > .children-heart-photo-crop {
  position: absolute !important;
  margin: 0 !important;
  max-width: none !important;
}

.children-heart-frame > .children-heart-photo-crop img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.children-phase-num__img {
  object-fit: contain;
  object-position: center;
}

/* Case card placeholders — images not ready yet */
.children-case-row [class*='bg-white'][class*='h-[150px]'] {
  background-color: #fff;
}

.children-reasons-section {
  position: relative;
  z-index: 3;
  overflow: visible !important;
  width: 100%;
  padding-bottom: 40px;
}

.children-reasons-section > [class*='absolute'] {
  pointer-events: none;
  z-index: 0;
}

.children-reasons-section > :not([class*='absolute']) {
  position: relative;
  z-index: 1;
}

.children-case-section {
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: visible !important;
}

.children-case-section::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: #f5f2ed;
  top: -160px;
  left: -420px;
  right: -420px;
  bottom: -40px;
}

.children-case-section > .absolute,
.children-case-section > [class*='absolute'],
.children-case-section-bg {
  pointer-events: none;
  z-index: 1 !important;
  background-color: transparent !important;
}

.children-case-section-bg img {
  opacity: 0.45 !important;
}

.children-case-section > :not(.absolute):not([class*='absolute']) {
  position: relative;
  z-index: 2 !important;
}

.children-case-section [class*='from-[#693851]'][class*='rounded-[100px]'] {
  position: relative;
  z-index: 10 !important;
}

.children-case-row {
  position: relative;
  z-index: 3 !important;
}

.children-case-card {
  position: relative;
  z-index: 3 !important;
  width: 300px;
  max-width: 300px;
  flex-shrink: 0;
  gap: 12px !important;
}

.children-case-card [class*='leading-[0]'] {
  line-height: normal !important;
}

.children-case-card [class*='leading-[0]'] p {
  line-height: 1.5 !important;
}

.children-case-card [class*='h-[60px]'][class*='text-[#8e5572]'] {
  height: auto !important;
  min-height: 36px;
}

.children-case-card [class*='rounded-[86'] {
  position: relative;
  z-index: 10 !important;
}

.top-phase-num {
  position: relative;
}

.top-phase-num__img {
  object-fit: contain;
  object-position: center;
}

.children-heart-frame > [style*='mask-image']:only-child img,
.children-banner-frame > [style*='mask-image']:only-child img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.children-price-section {
  position: relative;
  isolation: isolate;
  z-index: 1;
  overflow: visible !important;
}

.children-price-section::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-bg);
  top: -80px;
  left: -420px;
  right: -420px;
  bottom: -80px;
}

.children-price-section-bg,
.children-price-section-deco {
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  background-color: transparent !important;
}

.children-price-section-bg img {
  mix-blend-mode: normal !important;
}

.children-price-section > :not(.children-price-section-deco):not(.children-price-section-bg) {
  position: relative;
  z-index: 2;
}

.children-faq-section {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
}

.children-faq-deco {
  pointer-events: none;
  z-index: 0;
}

.children-faq-section > :not(.children-orthodontics-deco):not(.children-faq-deco) {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  /* 白カード・見出しを人物より背面に */
  .children-checklist-section > :not([class*='absolute']) {
    z-index: 0 !important;
  }

  /* チェックリスト右の人物を最前面に（不透明部分がカード縁に重なるよう左へ） */
  .children-checklist-section > [class*='h-[538px]'][class*='w-[759px]'],
  .children-checklist-section > [class*='left-[620px]'][class*='h-[538px]'] {
    left: 540px !important;
    z-index: 10 !important;
    pointer-events: none;
  }

  .children-checklist-section > [class*='h-[538px]'][class*='w-[759px]'] img,
  .children-checklist-section > [class*='left-[620px]'][class*='h-[538px]'] img {
    position: relative;
    z-index: 10;
  }

  /* FAQ背景を少し左へ */
  .children-faq-section > .children-faq-deco {
    left: 50% !important;
    right: auto !important;
    transform: translateX(calc(-50% - 140px)) !important;
  }
}

/* FAQ page — Figma node 236:4391 */
.faq-page {
  isolation: auto !important;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.faq-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
}

.faq-main > div[class*='h-[200px]'] {
  position: relative;
  z-index: 2;
}

.faq-fv-bg,
.faq-deco,
.faq-main > div[class*='absolute'][class*='bottom-0'][class*='pointer-events-none'] {
  pointer-events: none;
  z-index: 0;
}

.faq-main > .faq-deco-char,
.faq-main > div[class*='absolute'][class*='h-[538px]'][class*='w-[759px]'] {
  pointer-events: none;
  z-index: 1;
}

.faq-main > :not(.faq-fv-bg):not(.faq-deco):not([class*='absolute']) {
  position: relative;
}

.faq-section,
.faq-main > div[class*='gap-[60px]'][class*='flex-col'][class*='items-center'][class*='shrink-0'][class*='w-full'] {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
}

.faq-section > :not(.faq-deco),
.faq-main > div[class*='gap-[60px]'] > :not([class*='absolute']) {
  position: relative;
  z-index: 1;
}

.faq-section .cursor-pointer,
.faq-main > div[class*='gap-[60px]'] .cursor-pointer {
  position: relative;
  z-index: 2;
}

.faq-section > .faq-deco,
.faq-main > div[class*='gap-[60px]'] > div[class*='absolute'] {
  pointer-events: none;
  z-index: 0;
}

.faq-section-first,
.faq-main > div[class*='h-[200px]'] + div[class*='gap-[60px]'] {
  z-index: 2;
}

/* お支払いセクションの下に、その他セクションの装飾が重ならないよう前面に */
.faq-section-payment {
  z-index: 2;
}

.faq-section-other {
  z-index: 1;
}

/* セマンティッククラス欠落時のみ（footer は faq-main 外のため nth-last-child(2/1) で特定） */
.faq-main > div[class*='gap-[60px]'][class*='flex-col']:nth-last-child(2):not([class*='faq-section-']) {
  z-index: 2;
}

.faq-main > div[class*='gap-[60px]'][class*='flex-col']:nth-last-child(1):not([class*='faq-section-']) {
  z-index: 1;
}

.faq-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.faq-main [class*='mix-blend-multiply'] img {
  mix-blend-mode: normal !important;
}

.faq-fv-bg-sticky {
  pointer-events: none !important;
}

/* 当院限定プラン — title + price steps */
.children-clinic-plan-section .h-\[59px\].overflow-clip {
  width: 120px;
  height: 59px;
  overflow: hidden;
  position: relative;
}

.children-clinic-plan-section .h-\[59px\].overflow-clip > div {
  position: absolute;
}

.children-clinic-plan-section .h-\[59px\].overflow-clip > div:first-child {
  inset: 55.08% 0 0 51.13%;
}

.children-clinic-plan-section .h-\[59px\].overflow-clip > div:last-child {
  inset: 0 56.31% 0 0;
}

.children-clinic-plan-section .h-\[59px\].overflow-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.children-clinic-plan-list .h-\[23px\][class*='w-[28px]'] {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 23px;
}

.children-clinic-plan-list .h-\[23px\][class*='w-[28px]'] > div:first-child {
  position: absolute;
  inset: 0 19% 0 0;
  border-radius: 5px;
  background-color: #eae0e5;
}

.children-clinic-plan-list .h-\[23px\][class*='w-[28px]'] img {
  position: absolute;
  left: 7px;
  top: 5px;
  width: 16px !important;
  height: 12px !important;
  max-width: none;
  display: block;
}

.children-clinic-plan-list p {
  white-space: nowrap;
}

/* 子ども矯正 — ツーバイフォー（2×4）写真 */
.children-2x4-photo-wrap {
  position: relative;
  display: block;
  width: 313px;
  height: 300px;
  margin-inline: auto;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}

.children-2x4-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 1025px) {
  .children-treatment-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left;
  }

  .children-treatment-card > .children-heart-frame,
  .children-treatment-card > [class*='inline-grid']:first-child {
    flex: 0 0 313px !important;
    width: 313px !important;
    max-width: 313px !important;
  }

  .children-treatment-card > [class*='flex-col']:last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .children-phase-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .children-phase-row > :not(.children-orthodontics-fv-sun) {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: 460px !important;
  }

  .children-case-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .children-case-row > * {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
  }

  .children-case-row [class*='h-[150px]'] {
    height: 150px !important;
  }

  .children-case-card [class*='flex-col'][class*='gap-[5px]'] > [class*='inline-grid']:first-child,
  .children-case-card [class*='flex-col'][class*='gap-[5px]'] > [class*='inline-grid']:last-child {
    display: inline-grid !important;
  }

  .children-case-card [class*='flex-col'][class*='gap-[5px]'] [class*='h-[33px]'],
  .children-case-card [class*='flex-col'][class*='gap-[5px]'] [class*='leading-[28px]'] {
    display: revert !important;
  }

  .children-case-card [class*='h-[150px]'][class*='bg-white'] {
    overflow: hidden !important;
  }

  .children-case-card [class*='h-[150px]'] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .children-split-section {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .children-split-section > * {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .children-checklist {
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .children-checklist > * {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: 440px !important;
  }

  .children-clinic-plan-section {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .children-clinic-plan-section > :first-child {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: 500px !important;
    min-width: 300px !important;
  }

  .children-clinic-plan-list {
    flex: 0 0 auto !important;
    width: max(280px, min-content) !important;
    min-width: 262px !important;
  }
}

@media (max-width: 1024px) {
  /* 症例 — SP/タブレット: BEFORE 非表示・AFTER 写真1枚・高さ縮小 */
  .children-case-row [class*='h-[150px]'] {
    height: 110px !important;
  }

  .children-case-card [class*='flex-col'][class*='gap-[5px]'] > [class*='inline-grid']:first-child {
    display: none !important;
  }

  .children-case-card [class*='flex-col'][class*='gap-[5px]'] [class*='h-[33px]'],
  .children-case-card [class*='flex-col'][class*='gap-[5px]'] [class*='leading-[28px]'] {
    display: none !important;
  }

  .children-case-card [class*='flex-col'][class*='gap-[5px]'] > [class*='inline-grid']:last-child {
    display: block !important;
  }

  .children-treatment-card,
  .children-phase-row,
  .children-case-row,
  .children-split-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .children-treatment-card > *:not(.children-heart-frame):not(.children-2x4-photo-wrap):not(.children-banner-frame),
  .children-phase-row > :not(.children-orthodontics-fv-sun):not(.children-heart-frame):not(.children-banner-frame),
  .children-case-row > *:not(.children-case-card),
  .children-split-section > *:not(.children-heart-frame):not(.children-banner-frame) {
    width: 100% !important;
    max-width: 720px !important;
  }

  .children-checklist {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .children-checklist > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .children-checklist-section {
    padding-bottom: 80px;
  }

  .children-checklist-section > [class*='bg-[rgba'] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .children-clinic-plan-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }

  .children-clinic-plan-list {
    width: 100% !important;
    max-width: 360px !important;
  }
}

/* News page — Figma node 713:4915 */
body > div.news-page[class*='bg-[#f5f2ed]'] {
  isolation: auto !important;
  overflow-x: visible !important;
}

.news-page {
  position: relative;
  overflow: visible !important;
}

.news-fv-bg,
.news-deco {
  pointer-events: none;
  z-index: 0;
}

.news-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.news-list-section {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
  width: 100%;
  max-width: 1080px;
}

.news-list-section > :not(.news-deco) {
  position: relative;
  z-index: 1;
}

.news-main [class*='mix-blend-multiply'],
.news-list-section [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.news-main [class*='mix-blend-multiply'] img,
.news-list-section [class*='mix-blend-multiply'] img {
  mix-blend-mode: normal !important;
}

.news-page .h-\[59px\].overflow-clip {
  width: 120px;
  height: 59px;
  overflow: hidden;
  position: relative;
}

.news-page .h-\[59px\].overflow-clip > div {
  position: absolute;
}

.news-page .h-\[59px\].overflow-clip > div:first-child {
  inset: 55.08% 0 0 51.13%;
}

.news-page .h-\[59px\].overflow-clip > div:last-child {
  inset: 0 56.31% 0 0;
}

.news-page .h-\[59px\].overflow-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.news-card-list {
  width: 100% !important;
  max-width: 1080px !important;
  align-items: stretch !important;
}

.news-card-row {
  width: 100% !important;
  max-width: 1080px !important;
}

.news-card-row > [class*='absolute'][class*='inset-0'] {
  align-items: stretch !important;
  width: 100% !important;
}

.news-card-list [class*='bg-white'][class*='drop-shadow'] {
  width: 100% !important;
  max-width: 1080px !important;
  min-width: 0 !important;
  align-self: stretch !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  box-sizing: border-box;
}

.news-card-list [class*='bg-white'][class*='drop-shadow'] > p:first-child {
  flex: 0 0 116px !important;
  width: 116px !important;
}

.news-card-list [class*='bg-white'][class*='drop-shadow'] > p:last-child {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
}

.news-pagination {
  justify-content: center !important;
  width: 100%;
}

@media (max-width: 1024px) {
  .news-card-list [class*='bg-white'][class*='drop-shadow'] {
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    gap: 12px !important;
    padding-block: 24px !important;
  }

  .news-card-list [class*='bg-white'][class*='drop-shadow'] > p:first-child {
    flex: none !important;
    width: auto !important;
  }

  .news-card-row {
    height: auto !important;
    min-height: 100px;
  }
}

/* Blog page — Figma node 714:5847 */
body > div.blog-page[class*='bg-[#f5f2ed]'] {
  isolation: auto !important;
  overflow-x: visible !important;
}

.blog-page {
  position: relative;
  overflow: visible !important;
}

.blog-fv-bg,
.blog-deco {
  pointer-events: none;
  z-index: 0;
}

.blog-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.blog-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.blog-main [class*='mix-blend-multiply'] img {
  mix-blend-mode: normal !important;
}

.blog-main [class*='flex-col'][class*='gap-px'] [class*='text-white'],
.blog-main [class*='flex-col'][class*='gap-px'] [class*='text-white'] p,
.blog-main [class*='text-[40px]'][class*='text-white'],
.blog-main [class*='text-[40px]'][class*='text-white'] p {
  color: #fff !important;
}

.blog-page .h-\[59px\].overflow-clip {
  width: 120px;
  height: 59px;
  overflow: hidden;
  position: relative;
}

.blog-page .h-\[59px\].overflow-clip > div {
  position: absolute;
}

.blog-page .h-\[59px\].overflow-clip > div:first-child {
  inset: 55.08% 0 0 51.13%;
}

.blog-page .h-\[59px\].overflow-clip > div:last-child {
  inset: 0 56.31% 0 0;
}

.blog-page .h-\[59px\].overflow-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.blog-pagination {
  justify-content: center !important;
  width: 100%;
}

.blog-card {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-detail-article .soai-back-button {
  align-self: center;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* PC: ブログ詳細・症例詳細の白パネルを 1080px に固定 */
@media (min-width: 1200px) {
  .blog-detail-article,
  .case-detail-article {
    width: 1080px !important;
    max-width: 1080px !important;
    box-sizing: border-box !important;
  }

  .blog-detail-article > [class*='flex-col'][class*='gap-[60px]'],
  .case-detail-article > [class*='flex-col'][class*='gap-[60px]'] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.blog-detail-article .blog-detail-dates {
  color: #636171 !important;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 350 !important;
  line-height: 28px !important;
  letter-spacing: 1.4px !important;
}

.blog-detail-article .blog-detail-title {
  color: var(--p, #636171) !important;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif !important;
  font-size: 24px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  letter-spacing: 1.2px !important;
}

.soai-entry-content {
  width: 100%;
}

.soai-entry-content > * + * {
  margin-top: 1.25rem;
}

.soai-entry-content h2,
.soai-entry-content h3,
.soai-entry-content h4 {
  color: #636171;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.soai-entry-content h2 {
  color: #8e5572;
  font-size: 1.5rem;
}

.soai-entry-content h3 {
  font-size: 1.25rem;
}

.soai-entry-content a {
  color: #8e5572;
  text-decoration: underline;
}

.soai-entry-content ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.soai-entry-content ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.soai-entry-content img {
  border-radius: 10px;
  height: auto;
  max-width: 100%;
}

.soai-entry-content table {
  border-collapse: collapse;
  width: 100%;
}

.soai-entry-content th,
.soai-entry-content td {
  border: 1px solid #b3b3b3;
  padding: 13.5px;
}

.soai-entry-content th {
  background: #8e5572;
  color: #fff;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Blog / Case detail — PC heading / table (Figma 714:6297)
   ------------------------------------------------------------------------- */
.blog-detail-article .soai-entry-content h2,
.case-detail-article .soai-entry-content h2 {
  color: #636171;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 2.4px;
  line-height: 28px;
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  margin-block: 30px;
}

.blog-detail-article .soai-entry-content h3,
.case-detail-article .soai-entry-content h3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  margin-block: 30px;
  margin-inline: 0;
  padding: 16px 30px;
  background: rgba(234, 224, 229, 0.3);
  border-left: 5px solid #8e5572;
  color: #636171;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 2.2px;
  line-height: 28px;
}

.blog-detail-article .soai-entry-content h4,
.case-detail-article .soai-entry-content h4 {
  color: #8e5572;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 28px;
  background: none;
  border: none;
  padding: 0;
  margin-block: 30px;
}

/* 見出し上下30pxと隣接要素の margin-top が重ならないようにする */
.blog-detail-article .soai-entry-content > * + h2,
.blog-detail-article .soai-entry-content > * + h3,
.blog-detail-article .soai-entry-content > * + h4,
.case-detail-article .soai-entry-content > * + h2,
.case-detail-article .soai-entry-content > * + h3,
.case-detail-article .soai-entry-content > * + h4 {
  margin-top: 30px;
}

.blog-detail-article .soai-entry-content h2 + *,
.blog-detail-article .soai-entry-content h3 + *,
.blog-detail-article .soai-entry-content h4 + *,
.case-detail-article .soai-entry-content h2 + *,
.case-detail-article .soai-entry-content h3 + *,
.case-detail-article .soai-entry-content h4 + * {
  margin-top: 0;
}

.blog-detail-article .soai-entry-content blockquote,
.case-detail-article .soai-entry-content blockquote {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 16px 0 16px 30px;
  border-left: 5px solid #b3b3b3;
  color: #636171;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 350;
  letter-spacing: 1.8px;
  line-height: 28px;
}

.blog-detail-article .soai-entry-content blockquote p,
.case-detail-article .soai-entry-content blockquote p {
  margin: 0;
}

.blog-detail-article .soai-entry-content table,
.case-detail-article .soai-entry-content table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #b3b3b3;
  table-layout: auto;
}

.blog-detail-article .soai-entry-content th,
.blog-detail-article .soai-entry-content td,
.case-detail-article .soai-entry-content th,
.case-detail-article .soai-entry-content td {
  border: 1px solid #b3b3b3;
  padding: 13.5px;
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  font-size: 16px;
  line-height: normal;
  vertical-align: middle;
}

.blog-detail-article .soai-entry-content th,
.case-detail-article .soai-entry-content th {
  background: #8e5572;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.blog-detail-article .soai-entry-content td,
.case-detail-article .soai-entry-content td {
  background: #fff;
  color: #636171;
  font-weight: 400;
  text-align: left;
}

/* thead なしでも先頭行をヘッダー扱いにする */
.blog-detail-article .soai-entry-content table:not(:has(thead)) > tr:first-child > td,
.blog-detail-article .soai-entry-content table:not(:has(thead)) > tbody > tr:first-child > td,
.blog-detail-article .soai-entry-content table thead td,
.case-detail-article .soai-entry-content table:not(:has(thead)) > tr:first-child > td,
.case-detail-article .soai-entry-content table:not(:has(thead)) > tbody > tr:first-child > td,
.case-detail-article .soai-entry-content table thead td {
  background: #8e5572;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

/* データ行の3列目以降（数値）は右寄せ */
.blog-detail-article .soai-entry-content table:has(thead) tbody td:nth-child(n + 3),
.blog-detail-article .soai-entry-content table:not(:has(thead)) > tr:not(:first-child) > td:nth-child(n + 3),
.blog-detail-article .soai-entry-content table:not(:has(thead)) > tbody > tr:not(:first-child) > td:nth-child(n + 3),
.case-detail-article .soai-entry-content table:has(thead) tbody td:nth-child(n + 3),
.case-detail-article .soai-entry-content table:not(:has(thead)) > tr:not(:first-child) > td:nth-child(n + 3),
.case-detail-article .soai-entry-content table:not(:has(thead)) > tbody > tr:not(:first-child) > td:nth-child(n + 3) {
  text-align: right;
}

/* Cases page — Figma node 715:5405 */
body > div.cases-page[class*='bg-[#f5f2ed]'] {
  isolation: auto !important;
  overflow-x: visible !important;
}

.cases-page {
  position: relative;
  overflow: visible !important;
}

.cases-fv-bg,
.cases-deco {
  pointer-events: none;
  z-index: 0;
}

.cases-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.cases-page > [class*='mix-blend-multiply'],
.cases-main [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.cases-page > [class*='mix-blend-multiply'] img,
.cases-main [class*='mix-blend-multiply'] img,
.cases-deco img[class*='mix-blend-multiply'] {
  mix-blend-mode: multiply !important;
}

.cases-page .h-\[59px\].overflow-clip {
  width: 120px;
  height: 59px;
  overflow: hidden;
  position: relative;
}

.cases-page .h-\[59px\].overflow-clip > div {
  position: absolute;
}

.cases-page .h-\[59px\].overflow-clip > div:first-child {
  inset: 55.08% 0 0 51.13%;
}

.cases-page .h-\[59px\].overflow-clip > div:last-child {
  inset: 0 56.31% 0 0;
}

.cases-page .h-\[59px\].overflow-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.case-card {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* 症例カード BEFORE/AFTER（TOP・各矯正ページの teaser 含む共通） */
.case-card__ba {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 5px;
  width: 300px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.case-card__ba--teaser {
  gap: 5px;
  height: 305px;
  border-radius: 20px;
}

.case-card__ba-item {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 auto;
}

.case-card__ba-frame {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: #e8e8e8;
}

.case-card__ba--teaser .case-card__ba-frame {
  height: 150px;
}

.case-card__ba-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.case-card__ba-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  height: 33px;
  padding: 0 18px;
  box-sizing: border-box;
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 28px;
  white-space: nowrap;
  border-radius: 0 0 20px 0;
}

.case-card__ba-badge--before {
  background: #8e5572;
  color: #fff;
  border-top-left-radius: 20px;
}

.case-card__ba-badge--after {
  background: #fffdf4;
  color: #8e5572;
}

.case-card__ba--teaser .case-card__ba-badge--after {
  border-top-left-radius: 0;
}

/* Activity room — Figma node 225:13963 */
body > div.activity-room-page[class*='bg-[#f5f2ed]'] {
  isolation: auto !important;
  overflow-x: visible !important;
}

@media (max-width: 767px) {
  body > div.activity-room-page[class*='bg-[#f5f2ed]'],
  .activity-room-page {
    overflow-x: hidden !important;
  }
}

.activity-room-page {
  position: relative;
  overflow: visible !important;
}

.activity-room-main {
  isolation: auto !important;
  overflow: visible !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 200px !important;
}

.activity-room-fv-bg,
.activity-room-deco:not(.activity-room-deco-butterfly):not(.activity-room-deco-rabbit) {
  pointer-events: none;
  z-index: 0;
}

.activity-room-fv-bg-sticky {
  pointer-events: none !important;
}

/* SP のみ改行（activity-room.css で display:block） */
.activity-room-title-br,
.activity-room-sp-br {
  display: none;
}

.activity-room-main > :not(.activity-room-fv-bg):not(.activity-room-deco):not(.absolute) {
  position: relative;
  z-index: 1;
}

.activity-room-main > .absolute {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.activity-room-page > .activity-room-deco {
  position: absolute !important;
  pointer-events: none;
  z-index: 0;
}

.activity-room-main [class*='mix-blend-multiply'],
.activity-room-faq-section [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.activity-room-main [class*='mix-blend-multiply'] img,
.activity-room-faq-section [class*='mix-blend-multiply'] img {
  mix-blend-mode: normal !important;
}

.activity-room-phase-num__img {
  display: block;
}

.activity-room-effects-section,
.activity-room-faq-section {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
}

.activity-room-effects-panel {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

.activity-room-effects-panel .activity-room-deco-butterfly,
.activity-room-effects-panel .activity-room-deco-rabbit {
  position: absolute !important;
  z-index: 10 !important;
  pointer-events: none;
}

.activity-room-effects-section .activity-room-deco-tree-effects {
  top: -115px !important;
  left: -104px !important;
  z-index: 0 !important;
}

.activity-room-effects-section > :not(.activity-room-deco) {
  position: relative;
  z-index: 1;
}

.activity-room-faq-section > :not(.activity-room-deco) {
  position: relative;
  z-index: 1;
}

@media (min-width: 1025px) {
  .activity-room-effects-section > .absolute:has(img[src*='deco-leaf-green']) {
    display: none !important;
  }

  .activity-room-faq-section {
    overflow: visible !important;
    padding-top: 84px !important;
  }

  .activity-room-faq-section > .activity-room-faq-blur {
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
  }

  .activity-room-faq-section > .activity-room-faq-blur img {
    object-fit: contain !important;
  }
}

.activity-room-page .h-\[59px\].overflow-clip {
  width: 120px;
  height: 59px;
  overflow: hidden;
  position: relative;
}

.activity-room-page .h-\[59px\].overflow-clip > div {
  position: absolute;
}

.activity-room-page .h-\[59px\].overflow-clip > div:first-child {
  inset: 55.08% 0 0 51.13%;
}

.activity-room-page .h-\[59px\].overflow-clip > div:last-child {
  inset: 0 56.31% 0 0;
}

.activity-room-page .h-\[59px\].overflow-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.activity-room-card > [class*='inline-grid']:first-child,
.activity-room-card > .activity-room-mask-photo {
  width: 300px !important;
  height: 300px !important;
  overflow: hidden !important;
  flex: 0 0 300px !important;
}

.activity-room-effects-panel > [class*='inline-grid']:first-child,
.activity-room-effects-panel > .activity-room-mask-photo {
  width: 450px !important;
  height: 520px !important;
  overflow: hidden !important;
  flex: 0 0 450px !important;
}

/* アクティビティルーム — カード写真（mask-intersect はブラウザで非表示になる） */
.activity-room-mask-photo {
  position: relative !important;
  flex-shrink: 0;
  background-color: #fff;
}

.activity-room-mask-photo--circle {
  border-radius: 50% !important;
  -webkit-mask-image: url('../assets/images/shape-circle-mask-300.svg');
  mask-image: url('../assets/images/shape-circle-mask-300.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.activity-room-mask-photo--heart {
  -webkit-mask-image: url('../assets/images/shape-circle-white5.svg');
  mask-image: url('../assets/images/shape-circle-white5.svg');
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.activity-room-mask-photo--panel {
  border-radius: 16px;
}

.activity-room-mask-photo [style*='mask-image'],
.activity-room-mask-photo .mask-alpha {
  -webkit-mask: none !important;
  mask: none !important;
}

.activity-room-mask-photo__img {
  max-width: none !important;
  object-fit: cover !important;
}

@media (min-width: 1025px) {
  .activity-room-card {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left;
  }

  .activity-room-card > [class*='inline-grid']:first-child,
  .activity-room-card > .activity-room-mask-photo:first-child {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }

  .activity-room-card > [class*='flex-col']:last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .activity-room-dual-section {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .activity-room-dual-section > * {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .activity-room-effects-panel {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .activity-room-effects-panel > [class*='inline-grid']:first-child,
  .activity-room-effects-panel > .activity-room-mask-photo:first-child {
    flex: 0 0 450px !important;
    width: 450px !important;
    max-width: 450px !important;
  }

  .activity-room-effects-panel > [class*='flex-col']:last-child {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: none !important;
  }
}

@media (max-width: 1024px) {
  .activity-room-card,
  .activity-room-dual-section,
  .activity-room-effects-panel {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .activity-room-card > *,
  .activity-room-dual-section > *,
  .activity-room-effects-panel > * {
    width: 100% !important;
    max-width: 720px !important;
  }

  .activity-room-card > [class*='inline-grid']:first-child,
  .activity-room-card > .activity-room-mask-photo:first-child,
  .activity-room-effects-panel > [class*='inline-grid']:first-child,
  .activity-room-effects-panel > .activity-room-mask-photo:first-child {
    margin-inline: auto;
  }
}

/* ===== Responsive — site-wide ===== */

/* Clip decorative absolute layers; keep content within viewport */
body > div[class*='bg-[#f5f2ed]']:has(.children-orthodontics-main) {
  isolation: auto !important;
}

body > div[class*='bg-[#f5f2ed]'] {
  overflow-x: clip;
  max-width: 100%;
}

/* TOP page shell — Figma main/footer: 1080px centered in 1536px canvas */
.top-main,
.top-footer {
  width: 100% !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.top-main > div {
  overflow: visible !important;
}

/* Content shells — preserve Figma max widths on desktop */
[class*='max-w-[1080px]'] {
  max-width: 1080px !important;
  box-sizing: border-box;
}

[class*='max-w-[840px]'] {
  max-width: 840px !important;
  box-sizing: border-box;
}

[class*='max-w-[750px]'] {
  max-width: 750px !important;
  box-sizing: border-box;
}

[class*='max-w-[500px]'] {
  max-width: 500px !important;
  box-sizing: border-box;
}

[class*='max-w-[404px]'] {
  max-width: 404px !important;
  box-sizing: border-box;
}

[class*='w-[1080px]']:not([class*='max-w-']) {
  width: 100% !important;
  max-width: 1080px !important;
  box-sizing: border-box;
}

[class*='w-[909px]']:not([class*='max-w-']),
[class*='w-[866px]']:not([class*='max-w-']),
[class*='w-[840px]']:not([class*='max-w-']),
[class*='w-[750px]']:not([class*='max-w-']) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 1536px) {
  [class*='w-[1536px]'] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  [class*='px-[190px]'] {
    padding-left: clamp(16px, 5vw, 190px) !important;
    padding-right: clamp(16px, 5vw, 190px) !important;
  }

  [class*='px-[180px]'] {
    padding-left: clamp(16px, 4vw, 180px) !important;
    padding-right: clamp(16px, 4vw, 180px) !important;
  }
}

/* 狭い PC（1025–1199px）— 1080px シェルが端に張り付くのを防ぐ（全ページ共通・左右 60px） */
@media (min-width: 1025px) and (max-width: 1199px) {
  .top-main,
  .top-footer,
  [class*='-main'][class*='max-w-[1080px]'],
  [class*='-main'][class*='gap-[200px]'],
  [class*='-main'][class*='gap-[60px]'],
  .site-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 60px !important;
    box-sizing: border-box !important;
  }

  .top-main > :not(.absolute),
  [class*='-main'][class*='max-w-[1080px]'] > :not(.absolute),
  [class*='-main'][class*='gap-[200px]'] > :not(.absolute),
  [class*='-main'][class*='gap-[60px]'] > :not(.absolute) {
    box-sizing: border-box !important;
  }
}

@media (max-width: 1080px) {
  [class*='max-w-[1080px]'],
  [class*='max-w-[840px]'],
  [class*='max-w-[750px]'],
  [class*='max-w-[500px]'],
  [class*='max-w-[404px]'] {
    max-width: 100% !important;
  }

  [class*='w-[1080px]'] {
    max-width: 100% !important;
  }

  [class*='min-w-[300px]'],
  [class*='min-w-[375px]'] {
    min-width: 0 !important;
  }

  [class*='flex-[1_0_0]'] {
    min-width: 0 !important;
  }

  [class*='inline-grid'] {
    max-width: 100% !important;
  }
}

@media (max-width: 1024px) {
  /* Header: stack logo + nav */
  body > div > div[class*='bg-white'][class*='px-[190px]'] > div[class*='gap-[60px]'] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  body > div > div[class*='bg-white'][class*='px-[190px]'] > div[class*='gap-[60px]'] > a[class*='w-[280px]'],
  body > div > div[class*='bg-white'][class*='px-[190px]'] > div[class*='gap-[60px]'] > [class*='w-[280px]']:first-child {
    width: min(280px, 100%) !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='flex-[1_0_0]'][class*='items-end'] {
    width: 100% !important;
    align-items: center !important;
  }

  body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[12px]'][class*='justify-end'] {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  body > div > div[class*='bg-white'][class*='px-[190px]'] div[class*='gap-[23px]'] {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }

  [class*='text-[18px]'][class*='whitespace-nowrap'] {
    font-size: 14px !important;
    white-space: normal !important;
  }

  a[href^='tel:'] {
    font-size: clamp(18px, 5vw, 28px) !important;
  }

  [class*='text-[46px]'] {
    font-size: clamp(24px, 6vw, 46px) !important;
  }

  [class*='text-[38px]'] {
    font-size: clamp(22px, 5.5vw, 38px) !important;
  }

  [class*='text-[28px]'] {
    font-size: clamp(18px, 4.5vw, 28px) !important;
  }
}

@media (max-width: 768px) {
  [class*='text-[60px]'] {
    font-size: clamp(28px, 8vw, 60px) !important;
    line-height: 1.2 !important;
  }

  [class*='text-[50px]'],
  [class*='text-[42px]'] {
    font-size: clamp(24px, 7vw, 42px) !important;
    line-height: 1.25 !important;
  }

  [class*='leading-[80px]'] {
    line-height: 1.2 !important;
  }

  [class*='leading-[62px]'] {
    line-height: 1.25 !important;
  }

  [class*='leading-[52px]'] {
    line-height: 1.3 !important;
  }

  /* FAQ accordion */
  .faq-accordion__q,
  .faq-accordion__panel-inner > div > p:first-child {
    line-height: 1.1 !important;
    font-size: clamp(28px, 9vw, 60px) !important;
  }

  .faq-accordion__answer-rich {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  /* Medical info table */
  .medical-info-row {
    flex-direction: column !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .medical-info-row > div[class*='flex-[1_0_0]']:first-child {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .medical-info-row > div[class*='flex-[1_0_0]']:last-child {
    flex: none !important;
    width: 100% !important;
    border-radius: 0 0 10px 10px !important;
  }

  .medical-info-section[class*='flex-wrap'] {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Medical hours table: allow horizontal scroll on narrow screens */
  [class*='bg-[rgba(255,255,255,0.9)]'][class*='overflow-clip'] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer sitemap */
  [class*='gap-[36px]'][class*='whitespace-nowrap'] {
    white-space: normal !important;
    justify-content: center !important;
    text-align: center;
  }

  /* Floating reservation CTA — pin to bottom-right on mobile */
  .reservation-btn,
  [class*='absolute'][class*='size-[150px]'][class*='top-[153px]'][class*='left-[1336px]'] {
    position: fixed !important;
    width: 80px !important;
    height: 80px !important;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 16px !important;
    z-index: 50;
  }
}

/* Net reservation CTA — Figma: 50px from right of 1536px canvas, top 153px */
@media (min-width: 1025px) {
  .reservation-btn,
  [class*='absolute'][class*='left-[1336px]'][class*='size-[150px]'][class*='top-[153px]'] {
    position: fixed !important;
    top: 153px !important;
    left: auto !important;
    right: max(12px, calc((100vw - min(100vw, 1536px)) / 2 + 50px)) !important;
    bottom: auto !important;
    width: 150px !important;
    height: 150px !important;
    z-index: 100;
  }
}

/* TOP — 大人の矯正セクション：大人の矯正ページMVと同じ3層構成 */
.top-adult-section [class*='gap-[40px]'][class*='items-start'] > div:first-child {
  overflow: visible !important;
}

/* 女性・ピンク・オレンジを同じ円形マスクでクリップ */
.top-adult-fv-mask {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: -60px !important;
  top: -250px !important;
  width: 1200px !important;
  height: 1200px !important;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 40%,
    #000 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 40%,
    #000 58%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.top-adult-fv-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.top-adult-fv-bg > img {
  object-fit: cover;
  object-position: center top;
}

.top-adult-fv-deco {
  pointer-events: none;
  z-index: 0;
}

.top-adult-fv-deco--pink {
  left: -293.82px !important;
  top: -141px !important;
  transform: scale(0.82);
  transform-origin: 40% 25%;
}

.top-adult-fv-deco--orange {
  right: -220px !important;
  top: 187px !important;
  transform: scale(0.94);
  transform-origin: 60% 30%;
}

.top-adult-section [class*='mix-blend-multiply'] {
  overflow: visible;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

.top-adult-section [class*='mix-blend-multiply'] img {
  mix-blend-mode: normal !important;
}

/* TOP — 子どもの矯正セクション（Figma 225:10693） */
.top-children-section {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.top-children-section > [class*='absolute'] {
  pointer-events: none;
  z-index: 0;
}

.top-children-section > :not([class*='absolute']) {
  position: relative;
  z-index: 1;
}

.top-children-plane {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none;
}

/* TOP — 子どもの矯正 歯型写真（mask-alpha 非対応のため SVG マスクに置換） */
.top-children-tooth-photo {
  position: relative;
  display: block;
  width: 240px;
  height: 229.714px;
  margin-inline: auto;
  flex-shrink: 0;
  overflow: hidden;
  -webkit-mask-image: url('../assets/images/shape-tooth-mask.svg');
  mask-image: url('../assets/images/shape-tooth-mask.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: #fff;
}

/* 変換漏れの 229px 直置き img も歯型サイズに統一 */
.top-children-section [class*='flex-col'][class*='gap-[11px]'] > [class*='h-[229.714px]'] {
  position: relative;
  width: 240px !important;
  height: 229.714px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  -webkit-mask-image: url('../assets/images/shape-tooth-mask.svg');
  mask-image: url('../assets/images/shape-tooth-mask.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: #fff;
}

.top-children-section [class*='flex-col'][class*='gap-[11px]'] > [class*='h-[229.714px]'] > img {
  object-fit: cover;
}

.top-children-tooth-photo__img {
  object-fit: cover;
  object-position: var(--obj-x, 50%) var(--obj-y, 50%);
}

/* TOP — 大人の矯正セクション（Figma 225:10710） */
.top-adult-section {
  position: relative;
  z-index: 2 !important;
  isolation: isolate !important;
  background-color: var(--color-bg, #f5f2ed);
}

/* 背景画像はそのまま、見出し以降のコンテンツと下のセクションを下げる */
.top-adult-section > :not(.top-adult-fv-mask):nth-child(2) {
  margin-top: 60px;
}

.top-adult-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-bg, #f5f2ed);
  z-index: 0;
  pointer-events: none;
}

.top-adult-section > .top-adult-fv-mask,
.top-adult-section > [class*='absolute']:not(.top-adult-fv-deco) {
  pointer-events: none;
  z-index: 0;
}

.top-adult-section > :not(.top-adult-fv-mask):not([class*='absolute']) {
  position: relative;
  z-index: 1;
}

.top-adult-section [class*='gap-[40px]'][class*='items-start'] {
  position: relative;
  z-index: 1;
}

.top-adult-section [class*='gap-[40px]'][class*='items-start'] .top-adult-mask-photo,
.top-adult-section [class*='gap-[40px]'][class*='items-start'] .top-adult-round-photo {
  position: relative;
  z-index: 3 !important;
}

/* 大人の矯正カード写真 — 円形クリップ（mask-intersect はブラウザで非表示になる） */
.top-adult-section .top-adult-mask-photo,
.top-adult-section .top-adult-round-photo {
  position: relative !important;
  z-index: 3 !important;
  flex-shrink: 0;
  background-color: #fff;
}

.top-adult-section .top-adult-mask-photo {
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.top-adult-section .top-adult-mask-photo [style*='mask-image'],
.top-adult-section .top-adult-mask-photo .mask-alpha {
  -webkit-mask: none !important;
  mask: none !important;
}

/* Figma mask-position 288px 144px / 858×572 — 円形フレーム内の切り抜き */
.top-adult-section .top-adult-mask-photo__img {
  width: 858px !important;
  height: 572px !important;
  left: -288px !important;
  top: -144px !important;
  max-width: none !important;
  object-fit: cover !important;
}

.top-adult-section .top-adult-round-photo {
  overflow: hidden;
}

/* TOP — 当院の矯正治療カード写真（mask-alpha 非対応のため円形クリップ） */
.top-treatment-section .top-treatment-photo {
  flex-shrink: 0;
  background-color: #fff;
}

.top-treatment-section .top-treatment-photo__img {
  max-width: none !important;
  object-fit: cover !important;
}

/* TOP page sections — decorative layering (all breakpoints) */
.top-concept-section,
.top-director-section,
.top-case-section,
.top-price-section,
.top-faq-section,
.top-knowledge-section {
  position: relative;
  isolation: isolate;
}

.top-case-section {
  z-index: 2;
}

.top-faq-section {
  z-index: 2;
}

.top-price-section {
  z-index: 1;
}

.top-concept-section > .absolute,
.top-concept-section > [class*='absolute'],
.top-director-section > .absolute,
.top-case-section > .absolute,
.top-case-section > [class*='absolute'],
.top-price-section > .absolute,
.top-price-section > [class*='absolute'],
.top-faq-section > .absolute,
.top-faq-section > [class*='absolute'],
.top-knowledge-section > .absolute,
.top-knowledge-section > [class*='absolute'] {
  pointer-events: none;
  z-index: 0;
}

.top-faq-section [class*='sticky'][class*='pointer-events-auto'] {
  pointer-events: none !important;
}

.top-price-section > .absolute,
.top-price-section > [class*='absolute'] {
  z-index: -1 !important;
}

.top-concept-section > :not(.absolute):not([class*='absolute']),
.top-director-section > :not(.absolute),
.top-case-section > :not(.absolute),
.top-price-section > :not(.absolute),
.top-faq-section > :not(.absolute),
.top-knowledge-section > :not(.absolute) {
  position: relative;
  z-index: 1;
}

.top-case-section [class*='from-[#693851]'][class*='rounded-[100px]'],
.top-case-btn,
.top-faq-cta {
  position: relative;
  z-index: 10;
}

a.site-cta-link {
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.top-case-section [class*='bg-white'][class*='h-[150px]'] {
  background-color: #fff;
}

.top-treatment-section {
  position: relative;
  z-index: 2;
}

.top-news-item {
  border-bottom: 1px solid #b3b3b3;
  box-sizing: border-box;
  width: 100%;
}

/* PC: restore Figma horizontal layouts */
@media (min-width: 1025px) {
  /* 装飾ブロブの横はみ出しでページが右に寄る／見切れるのを防ぐ。
     縦方向の滲み出しは維持（overflow-x: clip は y の visible を潰さない） */
  body > div[class*='bg-[#f5f2ed]'] {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* お知らせは FV 滲み出しより前面（Figma 225:10683） */
  .top-main {
    z-index: 2 !important;
  }

  .top-news-section {
    position: relative !important;
    z-index: 2 !important;
  }

  /* TOP — 子どもの矯正 / 大人の矯正：セクション内・カード間余白 */
  .top-children-section,
  .top-adult-section {
    gap: 80px !important;
  }

  .top-children-section [class*='flex-wrap'][class*='gap-[40px_0px]'] {
    gap: 40px !important;
  }

  .top-adult-section [class*='flex-wrap'][class*='gap-[40px]'][class*='items-start'] {
    gap: 60px !important;
  }

  .top-adult-section > :not(.top-adult-fv-mask):nth-child(2) {
    margin-top: 100px !important;
  }

  .top-news-section {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .top-news-section > * {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: 540px !important;
  }

  .top-concept-section,
  .top-price-section {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 60px !important;
    overflow: visible !important;
  }

  .top-concept-section > :not(.absolute):not([class*='absolute']),
  .top-price-section > :not(.absolute) {
    flex: 1 0 0 !important;
    width: auto !important;
  }

  .top-treatment-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-treatment-card > div[class*='inline-grid'],
  .top-treatment-card > .top-treatment-photo {
    flex: none !important;
    margin-inline: 0;
  }

  .top-treatment-card > div[class*='flex-col'][class*='gap-[30px]'] {
    flex: 1 0 0 !important;
    width: auto !important;
    max-width: none !important;
    align-items: flex-start !important;
  }

  .top-treatment-card div[class*='gap-[30px]'][class*='items-center'][class*='justify-center'] {
    flex-direction: row !important;
    text-align: left;
  }

  .top-treatment-card div[class*='text-[28px]'] {
    text-align: left;
  }
}

/* Mobile / tablet: vertical stacks */
@media (max-width: 1024px) {
  .top-news-section,
  .top-concept-section,
  .top-price-section {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
  }

  .top-news-section > *,
  .top-concept-section > :not(.absolute):not([class*='absolute']),
  .top-price-section > :not(.absolute) {
    flex: none !important;
    width: 100% !important;
    max-width: 720px;
  }

  .top-concept-section {
    padding-bottom: clamp(120px, 22vw, 280px);
  }

  .top-treatment-section {
    margin-top: clamp(-200px, -22vw, -80px);
    padding-top: clamp(80px, 14vw, 180px);
  }

  .top-treatment-card {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .top-treatment-card > div[class*='inline-grid'],
  .top-treatment-card > .top-treatment-photo {
    flex: none !important;
    margin-inline: auto;
  }

  .top-treatment-card > div[class*='flex-col'][class*='gap-[30px]'] {
    flex: none !important;
    width: 100% !important;
    max-width: 720px;
    align-items: center !important;
  }

  .top-treatment-card div[class*='gap-[30px]'][class*='items-center'][class*='justify-center'] {
    flex-direction: column !important;
    text-align: center;
  }

  .top-treatment-card div[class*='text-[28px]'] {
    text-align: center;
  }

  .top-adult-fv-mask {
    left: 50% !important;
    width: 88vw !important;
    max-width: 88vw !important;
    height: auto !important;
    margin-left: -44vw !important;
    top: -230px !important;
  }

  .top-adult-fv-mask,
  .top-adult-fv-bg > img {
    aspect-ratio: 1;
  }

  .top-adult-fv-deco--pink {
    left: calc(-28vw - 50%) !important;
    top: calc(-8vw + 30px) !important;
    transform: scale(0.48);
    transform-origin: center center;
  }

  .top-adult-fv-deco--orange {
    right: calc(-50% - 14vw) !important;
    top: calc(8vw + 30px) !important;
    transform: scale(0.51);
    transform-origin: center center;
  }

  .top-director-section [class*='pb-[350px]'] {
    height: auto !important;
    padding-bottom: 24px !important;
  }

  .top-director-section .absolute[class*='h-[555px]'] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 1080px;
    height: auto !important;
    aspect-ratio: 1080 / 555;
    margin: 0 auto 40px;
  }

  .top-calendar-section {
    padding-left: clamp(16px, 5vw, 107px) !important;
    padding-right: clamp(16px, 5vw, 107px) !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  .top-calendar-section .bg-\[#f7f4f4\] {
    overflow-x: hidden !important;
    width: 100% !important;
  }

}

/* TOP — 診療時間・受付：医院情報 Frame 240 電話行（PC） */
@media (min-width: 768px) {
  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] {
    container-type: inline-size;
    container-name: top-clinic-info-pc;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] [class*='text-[26px]'][class*='text-[#8e5572]'],
  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] [class*='text-[26px]'][class*='text-[#8e5572]'] p {
    line-height: normal !important;
  }

  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] [class*='gap-[10px]'][class*='py-[15px]'] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] a[href^='tel:'][class*='text-[50px]'],
  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] a[href^='tel:'] p {
    line-height: 1 !important;
  }

  .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] [class*='gap-[10px]'][class*='py-[15px]'] > [class*='pt-[10px]'] {
    padding-top: 0 !important;
    align-items: center !important;
  }

  @container top-clinic-info-pc (max-width: 420px) {
    .top-calendar-section [class*='gap-[42px]'] > [class*='h-[170px]'] [class*='gap-[10px]'][class*='py-[15px]'] {
      zoom: 0.798;
    }
  }
}

/* Footer sitemap links */
.site-footer-link {
  cursor: pointer;
  color: inherit;
}

.top-footer .site-footer-link p,
.site-footer .site-footer-link p {
  pointer-events: none;
}

/* Footer — 200px space from content above to map (Figma pt-[200px]) */
.site-footer,
.top-footer {
  padding-top: 200px !important;
  box-sizing: border-box;
}

/* Cancel parent flex row-gap so total spacing = padding-top only */
[class*='gap-[60px]'] > .site-footer,
[class*='gap-[60px]'] > .top-footer {
  margin-top: -60px !important;
}

[class*='gap-[39px]'] > .site-footer,
[class*='gap-[39px]'] > .top-footer {
  margin-top: -39px !important;
}

[class*='gap-[200px]'] > .site-footer,
[class*='gap-[200px]'] > .top-footer {
  margin-top: -200px !important;
}

/* Footer logo block — Figma 840px centered in 1080px footer */
.site-footer [class*='max-w-[840px]'] {
  max-width: 840px !important;
  width: 100% !important;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Footer SNS icons — single horizontal row */
.site-footer-sns-row {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.site-footer-sns-item {
  display: block;
  flex-shrink: 0;
}

.site-footer-sns-item > div {
  position: relative;
}

@media (max-width: 480px) {
  [class*='px-[190px]'] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [class*='gap-[300px]'] {
    gap: 80px !important;
  }

  [class*='gap-[200px]'] {
    gap: 60px !important;
  }

  [class*='gap-[60px]'] > .site-footer,
  [class*='gap-[60px]'] > .top-footer {
    margin-top: -32px !important;
  }

  [class*='gap-[200px]'] > .site-footer,
  [class*='gap-[200px]'] > .top-footer {
    margin-top: -60px !important;
  }

  [class*='gap-[60px]'] {
    gap: 32px !important;
  }
}

/* Price page — 当院限定プラン list */
.price-clinic-plan-list p {
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .price-clinic-plan-section {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .price-clinic-plan-section > :first-child {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: 500px !important;
    min-width: 300px !important;
  }

  .price-clinic-plan-list {
    flex: 0 0 auto !important;
    width: max(280px, min-content) !important;
    min-width: 262px !important;
  }
}

@media (max-width: 1024px) {
  .price-clinic-plan-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }

  .price-clinic-plan-list {
    width: fit-content !important;
    max-width: 360px !important;
    align-items: flex-start !important;
    margin-inline: auto !important;
  }

  .price-clinic-plan-list [class*='gap-[13px]'] {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }

  .price-clinic-plan-list p {
    white-space: normal;
  }
}

/* Price page — マウスピース矯正（インビザライン）支払いカード */
.price-payment-section {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

.price-payment-block {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

.price-payment-card {
  position: relative;
  z-index: 1;
  min-height: 202px;
  padding-right: 300px !important;
  padding-bottom: 48px !important;
  align-items: flex-start !important;
  isolation: isolate;
  overflow: visible !important;
}

.price-payment-card > p,
.price-payment-card > div:not(.price-payment-visual) {
  position: relative;
  z-index: 1;
  max-width: 620px;
  width: 100%;
}

.price-payment-card > p:first-of-type {
  text-align: left;
}

.price-payment-visual {
  position: absolute !important;
  right: 16px !important;
  top: -24px !important;
  width: 300px !important;
  height: 290px !important;
  z-index: 5 !important;
  pointer-events: none;
  overflow: visible !important;
}

.price-invisalign-photo {
  position: absolute !important;
  right: 16px !important;
  top: -86px !important;
  z-index: 1 !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f5f2ed;
}

.price-invisalign-photo img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 210% !important;
  height: 210% !important;
  max-width: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover;
  object-position: 50% 68%;
  display: block !important;
}

.price-payment-deco-cards {
  position: absolute !important;
  z-index: 3 !important;
  overflow: visible !important;
}

.price-payment-deco-card--front {
  z-index: 1;
}

.price-payment-deco-card--back {
  z-index: 2;
}

.price-payment-note {
  position: relative;
  z-index: 2;
  width: 100%;
}

.price-payment-note p {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .price-payment-card {
    min-height: 0;
    padding-right: 40px !important;
    align-items: flex-start !important;
  }

  .price-payment-card > p,
  .price-payment-card > div:not(.price-payment-visual) {
    max-width: 100%;
  }

  .price-payment-visual {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 200px !important;
    height: 200px !important;
    order: -1;
    margin: 0 auto 20px;
  }

  .price-invisalign-photo {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0;
    z-index: 2 !important;
  }

  .price-payment-deco-cards {
    display: none;
  }
}

/* Mobile hamburger menu toggle — hidden on PC by default; shown only in
   css/responsive/header.css under max-width: 1024px. Keeping this rule
   unscoped guarantees the PC layout is never affected regardless of
   stylesheet load order. */
.site-header-hamburger {
  display: none;
}