:root {
  --hero-desktop-height: 68vh;
  --hero-mobile-aspect: 9/16;
  --fade-duration: 900ms;
  --fade-ease: cubic-bezier(.3,0,.2,1);
  --brand-color: #0b6fa4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; color: #665952; font-size: 18px; overflow-x: hidden; }

.topbar {
  display: flex; justify-content: center; gap: 8px;
  padding: 8px; background: #f6fbff; font-size: 14px;
}
.topbar a { color: var(--brand-color); font-weight: 700; }

.hero {
  position: relative; width: 100%; overflow: hidden; background: #000;
}
@media (min-width:768px) {
  .hero { height: var(--hero-desktop-height); min-height: 730px; }
}
@media (max-width:767px) {
  .hero { aspect-ratio: var(--hero-mobile-aspect); min-height: 520px; }
}

.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity var(--fade-duration) var(--fade-ease);
}
.hero__slide.is-active { opacity: 1; }

.hero__slide--lower {
  object-position: center 12%; /* ← この1枚だけ下方向にずらす */
}

/* ========================================
   ヒーロー画像の表示位置調整
   PC / SP で個別に変更可能
   ======================================== */

/* ---------- PC ---------- */
@media (min-width: 768px){

  /* hero01.jpg */
  .hero__slide--01{
    object-position: center 10%;
  }

  /* hero02.jpg */
  .hero__slide--02{
    object-position: center 40%;
  }

  /* hero03.jpg */
  .hero__slide--03{
    object-position: center 10%;
  }

}


/* ---------- スマホ ---------- */
@media (max-width: 767px){

  /* hero01.jpg */
  .hero__slide--01{
    object-position: 45% 10%;
  }

  /* hero02.jpg */
  .hero__slide--02{
    object-position: 52% 55%;
  }

  /* hero03.jpg */
  .hero__slide--03{
    object-position: center 40%;
  }

}



.hero__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; text-align: center;
}
.hero__catch {
  color: #fff; font-size: clamp(1.6rem, 2.8vw, 3rem);
  font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.hero__control {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35); border: none; color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font-size: 28px; z-index: 3;
}
.hero__control--prev { left: 14px; }
.hero__control--next { right: 14px; }
.hero__control:hover { background: rgba(0,0,0,.5); }

.clinic-info {
  max-width: 1000px; margin: 40px auto; padding: 0 20px;
  line-height: 1.8;
}

/* ===== Hero Badges ===== */
:root{
  --badge-max-w: var(--nav-max-w, 1200px);  /* ナビと同じ最大幅で右端を揃える */
  --badge-gap-pc: 16px;
  --badge-gap-sp: 12px;
  --badge-size-pc: 200px;
  --badge-size-sp: 150px;
  --badge-bg: rgba(84,178,0,.7); /* #54B200 の 70% 透過 */
  --badge-ring: #fff;
}

/* コンテナ：ヒーロー中央付近・ナビと同じ幅に合わせる */
.hero-badges{
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6; /* ナビ(5)より前面に。必要なら調整 */
  pointer-events: none; /* バッジ自体はクリック無効（必要なければ外してOK） */
}

/* 内側は1200pxセンターにし、右寄せで“メニュー右端”と揃える */
.hero-badges__inner{
  width: min(var(--badge-max-w), calc(100% - 24px));
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;   /* 右寄せ */
  gap: var(--badge-gap-pc);
  padding-right: var(--nav-pad-x, 16px); /* ナビの右パディングとそろえる */
}

/* 円バッジ */
.badge{
  width: var(--badge-size-pc);
  height: var(--badge-size-pc);
  border-radius: 9999px;
  background: var(--badge-bg);
  border: 3px solid var(--badge-ring);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  pointer-events: auto; /* クリック可能にしたいなら残す */
}
.badge__text{
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  font-size: 26px;          /* PCの文字サイズ */
  letter-spacing: .01em;
  padding: 0 10px;          /* 文字が長いときの逃げ */
}

/* --- スマホ：下部に2つ並べ、下にバナー用の余白も確保 --- */
@media (max-width: 959.98px){
  .hero-badges{
    top: auto;
    bottom: 112px;           /* 画面下からの距離 */
    transform: none;
  }
  .hero-badges__inner{
    justify-content: center;      /* スマホは中央寄せ */
    gap: var(--badge-gap-sp);
    padding-right: 0;             /* 右パディングは不要 */
  }
  .badge{
    width: var(--badge-size-sp);
    height: var(--badge-size-sp);
    border-width: 2.5px;
  }
  .badge__text{
    font-size: 20px;              /* スマホの文字サイズ */
    padding: 0 8px;
  }
  /* ヒーローの下にスペース（バナー用余白） */
  .hero{ margin-bottom: 20px;
	overflow: visible;}
}

/* 画面が極端に低い場合のフェールセーフ（重なり過多を防ぐ） */
@media (max-height: 560px) and (min-width: 960px){
  .hero-badges{ top: 56%; }
}

/* ===== Hero Catch Copy ===== */
:root{
  --catch-max-w: var(--nav-max-w, 1200px);
  --catch-left-pad: var(--nav-pad-x, 16px); /* メニューと同じ左余白に揃える */
  --catch-bottom-pc: 24px;   /* PCで下からの距離 */
  --catch-shadow-1: 0 0 6px rgba(255,255,255,.95);
  --catch-shadow-2: 0 0 16px rgba(255,255,255,.75);
  --catch-shadow-3: 0 0 28px rgba(255,255,255,.55);
}

.hero-catch{
  position: absolute;
  inset-inline: 0;
  bottom: var(--catch-bottom-pc);
  z-index: 7; /* バッジ等より前に出したい場合は数字を上げる */
  pointer-events: none; /* 文字上でクリック不可に（必要なら外す） */
}

.hero-catch__inner{
  width: min(var(--catch-max-w), calc(100% - 24px));
  margin-inline: auto;
  padding-left: var(--catch-left-pad);   /* ← メニュー左端と文頭を揃えるキモ */
  display: flex;
  flex-direction: column;
  align-items: flex-start;               /* 左寄せ */
}

/* メイン行 */
.catch__lead{
  margin: 0 0 6px;
  line-height: 1.15;
  pointer-events: auto;
}
.catch__lead-main {
  color: #E5006C;
  font-weight: 800;
	text-shadow:
  0 0 6px rgba(255,255,255,1),
  0 0 12px rgba(255,255,255,1),
  0 0 24px rgba(255,255,255,1),
  0 0 48px rgba(255,255,255,1),
  0 0 96px rgba(255,255,255,1),
  0 0 128px rgba(255,255,255,0.9),
  0 0 160px rgba(255,255,255,0.8);


}


/* サブ行 */
.catch__sub{
  margin: 0;
  color: #52B200;                         /* 指定グリーン */
  font-weight: 700;
  line-height: 1.25;
	font-size: 26px;
  text-shadow:
  0 0 6px rgba(255,255,255,1),
  0 0 12px rgba(255,255,255,1),
  0 0 24px rgba(255,255,255,1),
  0 0 48px rgba(255,255,255,1),
  0 0 96px rgba(255,255,255,1),
  0 0 128px rgba(255,255,255,0.9),
  0 0 160px rgba(255,255,255,0.8);

  pointer-events: auto;
}

/* サイズユーティリティ（メイン行内で使い分け可能） */
.u-lg{ font-size: clamp(32px, 4.2vw, 50px); }
.u-sm{ font-size: clamp(18px, 2.1vw, 24px); }

/* スマホ：下部中央・読みやすいサイズへ */
@media (max-width: 959.98px){
  .hero-catch{
    bottom: 20px; /* バッジや下部余白と干渉する場合は調整 */
  }
  .hero-catch__inner{
    padding-left: 0;
    display: grid;
    place-items: center;
    text-align: center;
    width: min(94%, 680px);
  }
  .u-lg{ font-size: clamp(27px, 5.2vw, 31px); }
  .u-sm{ font-size: clamp(14px, 4.2vw, 18px); }
  .catch__sub{ font-size: clamp(20px, 5.2vw, 28px); }
}

/* --- PCレイアウト --- */
.hero-banner {
  position: absolute;
  right: 12%;                 /* メニュー右端と揃える基準 */
  bottom: 3%;                 /* キャッチコピーとバランスを取る位置。調整可 */
  z-index: 8;                  /* キャッチコピーよりやや上 */
  max-width: 400px;            /* バナー画像幅 */
}

.hero-banner__link {
  display: inline-block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-banner__link:hover {
  transform: translateY(-3px);
}

@media (max-width: 959.98px){
  .hero-banner img {
	  display: none;
  }
}

/* ===== スマホ専用バナー ===== */
.sp-banner {
  display: none; /* PCでは非表示 */
}

@media (max-width: 959.98px){
  .sp-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto 32px; /* メイン画像との間に余白を確保 */
    width: 90%;             /* 画面幅の9割に */
    max-width: 640px;
  }
  .sp-banner__link {
    display: block;
    width: 100%;
  }
  .sp-banner img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
}

/* ===== PC版：2バナー横並び ===== */
.hero-banner--pc {
  position: absolute;
  right: 8%;               /* 位置を少し内側に */
  bottom: 4%;              /* 下からの距離を少し増やしてゆとり */
  z-index: 8;
  max-width: 860px;        /* 2バナー全体の幅（従来より拡大） */
}

.hero-banner__group {
  display: flex;
  gap: 20px;               /* バナー間の余白 */
  justify-content: flex-end;
  align-items: center;
}

.hero-banner__link {
  display: inline-block;
  width: 100%;
  max-width: 260px;        /* ← 各バナーをやや大きめに */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-banner__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.hero-banner__link img {
  width: 100%;
  height: auto;
}

/* --- スマホでは非表示 --- */
@media (max-width: 959.98px){
  .hero-banner--pc {
    display: none;
  }
}



/* ===== News Section ===== */
:root{
  --news-bg: #FFF0F8;
  --news-max-w: var(--nav-max-w, 1200px); /* ナビと同じ最大幅 */
  --news-pad-y: 36px;
  --news-gap-y: 14px;
}

.news{
  background: var(--news-bg);
  padding: var(--news-pad-y) 0;
}
.news__inner{
  width: min(960px, calc(100% - 48px));
  margin-inline: auto;
}

/* 見出し：左揃え＋右に小さめで NEWS */
.news__heading{
  display: flex;
  align-items: baseline;
  gap: .6em;
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  margin-bottom: 14px;
}
.news__heading-en{
  font-size: .7em; /* ← 小さめに */
  letter-spacing: .06em;
  opacity: .75;
	color: #52B200;
}

/* 一覧 */
.news__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--news-gap-y);
}

/* PC：日付＋タイトルを横並び */
.news__item{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 4px;
}

/* 日付（見出しの左辺と自然にそろう） */
.news__date{
  color: #E6006D;              /* 指定色 */
  font-weight: 700;
  white-space: nowrap;
  min-width: 8.5em;            /* 例：'YYYY.MM.DD'幅の安定化 */
}

/* タイトル */
.news__title{
  color: #665952;
  text-decoration: none;
  border-bottom: none;
  transition: border-color .2s ease, color .2s ease;
}
.news__title:hover,
.news__title:focus{
  color: #52B200;
  border-bottom-color: currentColor;
  outline: none;
}

/* 一覧への導線 */
.news__more{
  margin-top: 18px;
  text-align: right;
}
.news__more a{
  font-weight: 700;
  text-decoration: none;
  border-bottom: none;
}

/* スマホ：日付とタイトルの間で改行（縦積み） */
@media (max-width: 959.98px){
  .news__item{
    grid-template-columns: 1fr;
  }
  .news__date{
    margin-bottom: 2px;  /* 改行間の余白 */
  }
}



/* ===== Concept Section ===== */
:root{
  --concept-max-w: var(--nav-max-w, 1200px);
  --concept-gap: clamp(20px, 3vw, 40px);
  --concept-pad-y: clamp(32px, 5vw, 64px);
  --concept-radius: 16px;
  --concept-green-bg: #DDF0CC; /* ずれた背景色（メイン画像用） */
  --concept-pink-bg:  #FFF0F8; /* ずれた背景色（3つの小画像用） */
  --concept-eyebrow:  #52B200; /* “Concept” の色 */
  --concept-title:    #E6006D; /* “当院のコンセプト” の色 */
}

.concept{
  background: #fff;
  padding: var(--concept-pad-y) 0;
}
.concept__inner{
  width: min(var(--concept-max-w), calc(100% - 24px));
  margin-inline: auto;
}

/* タイトル */
.concept__head{
  text-align: center;
  margin-bottom: clamp(20px, 4vw, 40px);
}
.concept__eyebrow{
  margin: 0 0 6px;
  color: var(--concept-eyebrow);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .08em;
}
.concept__title{
  margin: 0;
  color: var(--concept-title);
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .02em;
}

/* レイアウト：PCは左右2カラム、SPは縦積み */
.concept__body{
  display: grid;
  gap: var(--concept-gap);
}
@media (min-width: 960px){
  .concept__body{
    grid-template-columns: 1fr 1fr; /* 左：画像 / 右：テキスト */
    align-items: start;
  }
}

/* メイン画像（オフセット背景つき） */
.concept__visual{
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

/* 本文とサムネ */
.concept__content{
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
}
.concept__text{
  line-height: 1.9;
  font-size: clamp(18px, 1.8vw, 20px);
  color: #665952;
}

/* サムネ3つ横並び（SP/PCとも横並び） */
.concept__thumbs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.concept__thumb{
  position: relative;
}
.concept__thumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--concept-radius);
}

/* ずれ背景の共通（既存） */
.img-offset{ position: relative; }
.img-offset img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* 角丸が不要なら 0 に。少し丸めたいなら 12px などに */
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* === 見本画像に寄せた“左＆下に大きくはみ出す”プレート === */
:root{
  /* PCの緑プレート量（好みで微調整） */
  --visual-plate-left:  -48px;   /* 左にはみ出す量（マイナスで左へ） */
  --visual-plate-top:    200px;   /* 下方向へずらす量（＋で下へ） */
  --visual-plate-extra-w: -152px; /* 横方向の追加サイズ（右側へ延長） */
  --visual-plate-extra-h: -152px; /* 縦方向の追加サイズ（下側へ延長） */

  /* サムネ（ピンク）の軽いオフセット量 */
  --thumb-plate-shift-x: -8px;
  --thumb-plate-shift-y: 10px;
}

/* メイン画像：左＆下に大きい緑プレート */
.img-offset--green::before{
  content: "";
  position: absolute;
  z-index: 0;
  /* 画像より大きくして左下に見せる */
  width:  calc(100% + var(--visual-plate-extra-w));
  height: calc(100% + var(--visual-plate-extra-h));
  left:   var(--visual-plate-left);
  top:    var(--visual-plate-top);
  background: #DDF0CC;
  border-radius: 0; /* 見本の雰囲気に合わせて角丸なし（必要なら数値に変更） */
}

/* 3つの小画像：右下に少しピンクプレート（既存を軽く調整） */
.img-offset--pink::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: translate(var(--thumb-plate-shift-x), var(--thumb-plate-shift-y));
  background: #FFF0F8;
}

/* レイアウトの安全策：プレートがはみ出せるように */
.concept__visual{ overflow: visible; }

/* --- スマホ最適化：はみ出し量を控えめに --- */
@media (max-width: 959.98px){
  :root{
    --visual-plate-left:  -24px;
    --visual-plate-top:    56px;
    --visual-plate-extra-w: -84px;
    --visual-plate-extra-h: -36px;

    --thumb-plate-shift-x: -6px;
    --thumb-plate-shift-y: 8px;
  }
  .concept__visual{ max-width: 88%; margin-inline: auto; }
}

/* ===== 詳しくはこちらボタン ===== */
.concept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #FFC8E2;    /* 背景色 */
  color: #fff;                  /* 文字色 */
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 18px);
  padding: 12px 28px;
  border-radius: 9999px;        /* 丸みを強調 */
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 12px auto 8px;        /* 上下余白＋中央揃え */
}
.concept-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* 三角アイコン（白） */
.concept-btn__icon {
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* コンテナ内中央揃え */
.concept__content {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  justify-items: center; /* ← ボタンを中央に配置 */
  text-align: center;    /* テキストも中央寄せで自然に */
}


/* ===== Foundations Section ===== */
:root{
  --found-max-w: var(--nav-max-w, 1200px);
  --found-bg: #FFF0F8;
  --found-gap: clamp(42px, 6vw, 70px);
  --found-radius: 14px;
  --found-eyebrow: #52B200;
  --found-title:   #E5006C;

  --tag-green: #DDF0CC;
  --tag-pink:  #FFC8E2;

  --caption-bg: rgba(255,255,255,.85); /* 下部説明帯の半透明白 */
}

.foundations{
  background: var(--found-bg);
  padding: clamp(28px, 5vw, 60px) 0;
}
.foundations__inner{
  width: min(var(--found-max-w), calc(100% - 24px));
  margin-inline: auto;
}
.foundations__head{
  text-align: center;
  margin-bottom: clamp(18px, 4vw, 36px);
}
.foundations__eyebrow{
  margin: 0 0 6px;
  color: var(--found-eyebrow);
  font-weight: 800;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .08em;
}
.foundations__title{
  margin: 0;
  color: var(--found-title);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
}

@media (max-width: 959.98px) {
  .foundations__title {
    margin-bottom: 48px; /* ← スマホだけ余白を広げる */
  }
}

/* カードリスト */
.foundations__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--found-gap);
}
@media (min-width: 960px){
  .foundations__list{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* カード */
.foundations__card{ position: relative; }
.foundations__link{
  display: block;
  position: relative;
  overflow: visible;
  border-radius: var(--found-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: #fff; /* 画像ロード前の下地 */
  text-decoration: none; /* 共通ルールに加えて安全側 */
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.foundations__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* 画像 */
.foundations__figure{ margin: 0; line-height: 0; }
.foundations__figure img{
  width: 100%; height: auto; display: block;
}

/* 見出しリボン：画像より前面に、画像から少し“はみ出し＆ずれ” */
.foundations__tag{
  position: absolute;
  left: 0px;
  top: -20px;
  z-index: 2;              /* 画像より前面 */
  padding: 10px 14px 10px 42px; /* 左にアイコン分の余白 */
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 22px);
  color: #666666;
}
.foundations__tag--green{ background: var(--tag-green); }
.foundations__tag--pink { background: var(--tag-pink);  }

/* キラッアイコン（ダイヤ形） */
.foundations__sparkle{
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 14px rgba(255,255,255,.75);
}

/* 下部の説明帯（中央揃え）＋ 右端の三角形 */
.foundations__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0px;
  margin: 0 auto;
  width: min(100%);
  padding: 20px 44px 20px 14px; /* 右に三角形の余白 */
  text-align: center;
  font-weight: 800;
  color: #665952;
  background: var(--caption-bg);
  backdrop-filter: blur(2px); /* 読みやすさUP（対応ブラウザのみ） */
}

@media (min-width: 960px) {
  .foundations__caption {
    font-size: 25px; /* PC版を大きく */
  }
}



/* 三角形（右端）。カードの色に合わせて切替 */
.foundations__caption::after{
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  /* 色は data-accent で切替（currentColorを変更） */
}


/* SP：縦並び（1列） */
@media (max-width: 959.98px){
  .foundations__caption{
    width: min(100%);
    bottom: 0px;
    padding: 10px 40px 10px 12px;
    font-size: clamp(18px, 3.8vw, 20px);
  }
  .foundations__tag{
    transform: translate(-4px, -4px);
  }
}

/* テキスト色：共通 */
.foundations__caption{
  color: #666666;
}

/* 三角形色だけを data-accent で切替 */
.foundations__caption[data-accent="green"]{ --accent: #DDF0CC; }
.foundations__caption[data-accent="pink"] { --accent: #FFC8E2; }

/* 三角形（右端） */
.foundations__caption::after{
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 12px solid var(--accent, #DDF0CC);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* ===== 年齢別メニュー ===== */
:root {
  --age-bg: #FFF;
  --age-box-bg: #FFF0F8;
  --age-pink: #FFC8E2;
  --age-green: #DDF0CC;
  --age-title: #E5006C;
  --text-dark: #665952;
}

.age-menu {
  background: var(--age-bg);
  padding: clamp(12px, 4vw, 32px) 0;
}

/* 各ブロック全体 */
.age-block {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  width: 90%;
  margin-bottom: clamp(32px, 5vw, 64px);
}

.age-block--kids {
  margin-left: 0;
  margin-right: auto;
}

.age-block--teens {
  flex-direction: row-reverse;
  margin-right: 0;
  margin-left: auto;
}

/* --- 画像部分 --- */
.age-block__images {
  display: flex;
  width: 45%;
}
.age-block__images img {
  width: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* --- コンテンツ部 --- */
.age-block__content {
  width: 80%;
  background: var(--age-box-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(12px, 4vw, 24px);
}

.age-block__title {
  color: var(--age-title);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px);
  margin-bottom: 12px;
}

.age-block__desc {
  color: var(--text-dark);
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* --- ボタン部分 --- */
.age-block__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 700px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 0;
  font-size: clamp(14px, 1.8vw, 18px);
  transition: background 0.3s ease;
  width: 100%;
}

.btn--pink {
  background: var(--age-pink);
}

.btn--green {
  background: var(--age-green);
}

.btn--pink:hover {
  background: #ffb0d3;
}

.btn--green:hover {
  background: #c5e5a5;
}

/* --- 三角アイコン --- */
.triangle {
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* --- スマホ版 --- */
@media (max-width: 959.98px) {
  .age-block {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .age-block__images {
    width: 100%;
  }

  .age-block__content {
    width: 100%;
    background: none;
    padding: 0;
  }

  .age-block__buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 400px;
  }

  .btn {
    width: 100%;
  }
}
/* ===== スマホ表示の並び順と背景色の復活 ===== */
@media (max-width: 959.98px) {
  .age-block {
    flex-direction: column;    /* 縦並び */
    align-items: center;
    width: 100%;
  }
  /* 並び順：表題・説明・ボタンが先、写真が後ろ */
  .age-block__content { 
    order: 1; 
    width: 100%;
    background: var(--age-box-bg); /* ← スマホでも背景色を入れる */
    padding: 16px 14px 20px;       /* 余白は少し控えめに */
  }
  .age-block__images  { 
    order: 2; 
    width: 100%;
  }

  /* ボタンは2列×3行 */
  .age-block__buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 520px; /* 少し広めに */
    margin-top: 10px;
  }

  /* 画像は正方形で崩れないように */
  .age-block__images img {
    width: 50%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

/* ===== ボタン色の固定パターン（1〜6番） ===== */
/* 1: #FFC8E2, 2: #DDF0CC, 3: #DDF0CC, 4: #FFC8E2, 5: #FFC8E2, 6: #DDF0CC */
.age-block__buttons li:nth-child(1) .btn { background: #FFC8E2; }
.age-block__buttons li:nth-child(2) .btn { background: #DDF0CC; }
.age-block__buttons li:nth-child(3) .btn { background: #DDF0CC; }
.age-block__buttons li:nth-child(4) .btn { background: #FFC8E2; }
.age-block__buttons li:nth-child(5) .btn { background: #FFC8E2; }
.age-block__buttons li:nth-child(6) .btn { background: #DDF0CC; }

/* ホバー時の色の深み（任意） */
.age-block__buttons li:nth-child(1) .btn:hover,
.age-block__buttons li:nth-child(4) .btn:hover,
.age-block__buttons li:nth-child(5) .btn:hover { background: #ffb0d3; }

.age-block__buttons li:nth-child(2) .btn:hover,
.age-block__buttons li:nth-child(3) .btn:hover,
.age-block__buttons li:nth-child(6) .btn:hover { background: #c5e5a5; }

/* ===== ボタン色：PCは交互、SPは指定順 ===== */

/* PC：ピンク・グリーン交互 */
@media (min-width: 960px) {
  .age-block__buttons li:nth-child(odd)  .btn { background: #FFC8E2; }
  .age-block__buttons li:nth-child(even) .btn { background: #DDF0CC; }

  .age-block__buttons li:nth-child(odd)  .btn:hover { background: #ffb0d3; }
  .age-block__buttons li:nth-child(even) .btn:hover { background: #c5e5a5; }
}

/* SP：順番に #FFC8E2, #DDF0CC, #DDF0CC, #FFC8E2, #FFC8E2, #DDF0CC */
@media (max-width: 959.98px) {
  .age-block__buttons li:nth-child(1) .btn { background: #FFC8E2; }
  .age-block__buttons li:nth-child(2) .btn { background: #DDF0CC; }
  .age-block__buttons li:nth-child(3) .btn { background: #DDF0CC; }
  .age-block__buttons li:nth-child(4) .btn { background: #FFC8E2; }
  .age-block__buttons li:nth-child(5) .btn { background: #FFC8E2; }
  .age-block__buttons li:nth-child(6) .btn { background: #DDF0CC; }

  .age-block__buttons li:nth-child(1) .btn:hover,
  .age-block__buttons li:nth-child(4) .btn:hover,
  .age-block__buttons li:nth-child(5) .btn:hover { background: #ffb0d3; }

  .age-block__buttons li:nth-child(2) .btn:hover,
  .age-block__buttons li:nth-child(3) .btn:hover,
  .age-block__buttons li:nth-child(6) .btn:hover { background: #c5e5a5; }
}

/* ===== Features ===== */
:root{
  --features-bg: #FFF0F8;
  --features-max-w: var(--nav-max-w, 1200px);
  --features-eyebrow: #52B200;
  --features-title:   #E5006C;
  --features-text:    #665952;
}

.features{
  background: var(--features-bg);
  padding: clamp(36px, 6vw, 80px) 0;
}
.features__inner{
  width: min(var(--features-max-w), calc(100% - 24px));
  margin-inline: auto;
  text-align: center;
}

/* 見出し */
.features__head{ margin-bottom: clamp(24px, 4vw, 40px); }
.features__eyebrow{
  margin: 0 0 6px;
  color: var(--features-eyebrow);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .08em;
}
.features__title{
  margin: 0;
  color: var(--features-title);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
}

/* リスト（3カラム → 1カラム） */
.features__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 960px){
  .features__list{ grid-template-columns: repeat(3, 1fr); }
}

/* 吹き出し円画像 */
.feature-card__figure{ margin: 0; }
.features .bubble{
  position: relative;
  display: block;
  width: min(260px, 70%);
  aspect-ratio: 1/1;
  margin: 0 auto clamp(14px, 2vw, 18px);
  padding: 8px;                 /* 白い縁の太さ */
  background: #fff;             /* 円の縁の色 */
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: visible;            /* ↓ しっぽを出すため */
}
.bubble img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 1; /* ← 画像を前面に */
}
/* しっぽ（吹き出しの出っぱり） */
.features .bubble::after{
  content: "";
  position: absolute;
  left: 16%;                   /* 角度の見せ方はここで */
  bottom: 5px;                /* はみ出す量 */
  width: 45px; height: 45px;
  background: #fff;
  transform: rotate(80deg);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
	z-index: 0;
}

/* テキスト */
.feature-card__text{
  display: grid;
  gap: 6px;
  color: var(--features-text);
}
.feature-card__lead{
  line-height: 1.2;
  display: inline-flex;
  gap: .4em;
  justify-content: center;
  flex-wrap: wrap;
}
.hl{
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
}
.hl--green{ color: #52B200; }
.hl--pink { color: #E5006C; }
.feature-card__sub{
  font-size: clamp(14px, 1.8vw, 16px);
  opacity: .9;
}

/* セクション説明文（下部・中央） */
.features__desc{
  max-width: 920px;
  margin: clamp(22px, 4vw, 36px) auto 0;
  color: var(--features-text);
  line-height: 1.9;
  padding: 0 10px;
}

/* スマホ最適化 */
@media (max-width: 959.98px){
  .bubble{ width: min(240px, 80%); } /* モバイルは少し大きめに見せる */
}

.feature-card__lead {
  display: inline-block;      /* ← brが効くように */
  text-align: center;         /* ← 中央揃え */
  line-height: 1.4;           /* ← 行間のバランス */
  font-weight: 800;
  font-size: clamp(18px, 2vw, 24px);
}

/* 「0歳」「総合予防歯科」を大きく */
.feature-card__lead .hl {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
}

/* 「から始める」を小さくする */
.feature-card__lead {
  font-size: clamp(16px, 1.6vw, 20px); /* 通常文字サイズ */
}

/* 色付きテキスト */
.hl--green { color: #52B200; }
.hl--pink  { color: #E5006C; }

:root {
  --firstvisit-max-w: 1200px;
  --firstvisit-bg: #fff;
  --firstvisit-pink: #E5006C;
  --firstvisit-lightpink: #FFF0F8;
  --firstvisit-label-bg: #FFC8E2;
  --firstvisit-green: #52B200;
}

.firstvisit {
  background: var(--firstvisit-bg);
  padding: clamp(40px, 6vw, 80px) 0;
}

.firstvisit__inner {
  width: min(var(--firstvisit-max-w), calc(100% - 24px));
  margin-inline: auto;
  text-align: center;
}

/* 見出し */
.firstvisit__eyebrow {
  color: var(--firstvisit-green);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  margin-bottom: 6px;
}

.firstvisit__title {
  color: var(--firstvisit-pink);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  margin-bottom: clamp(24px, 4vw, 40px);
}

/* ポイント一覧 */
.firstvisit__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 0 auto clamp(40px, 5vw, 60px);
  padding: 0;
  justify-content: center;
}

.firstvisit__item {
  position: relative;
}

.firstvisit__point {
  background: var(--firstvisit-lightpink);
  padding: clamp(32px, 3vw, 48px) 10px clamp(28px, 3vw, 42px);
  color: var(--firstvisit-pink);
  font-weight: 800;
  position: relative;
}

/* 左上の小ラベル */
.firstvisit__label {
  position: absolute;
  top: -12px;
  left: 0px;
  background: var(--firstvisit-label-bg);
  color: var(--firstvisit-pink);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  padding: 6px 14px;
}

.firstvisit__keyword {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  color: var(--firstvisit-pink);
  margin: 0;
}

/* 下部説明文 */
.firstvisit__desc {
  font-size: clamp(16px, 1.8vw, 20px);
  color: #665952;
  line-height: 1.8;
}

/* --- スマホ版 --- */
@media (max-width: 959.98px) {
  .firstvisit__points {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .firstvisit__label {
    top: -10px;
    left: 0px;
  }
}

/* ===== 初めての方へセクション：詳しくはこちらボタン ===== */
.firstvisit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #FFC8E2;   /* ピンク背景 */
  color: #fff;                 /* 白文字 */
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 18px);
  padding: 12px 28px;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 24px auto 0;         /* 上に余白＋中央揃え */
}

.firstvisit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* 三角アイコン（白） */
.firstvisit-btn__icon {
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* コンテナ内中央揃え */
.firstvisit__inner {
  text-align: center; /* すでに指定済みだが再明示 */
}


:root {
  --treat-bg: #FFF0F8;
  --treat-pink: #E5006C;
  --treat-green: #52B200;
  --treat-btn: #FFC8E2;
  --treat-line: #46BA7C;
}

.treatments {
  background: var(--treat-bg);
  padding: clamp(40px, 6vw, 80px) 0;
}

.treatments__inner {
  width: min(1200px, calc(100% - 24px));
  margin-inline: auto;
  display: grid;
  gap: clamp(60px, 6vw, 100px);
}

/* ===== 共通ブロックレイアウト ===== */
.treatment-block {
  display: grid;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
}

.treatment-block--left {
  grid-template-columns: 1fr 1fr; /* 左：テキスト、右：画像 */
}

.treatment-block--right {
  grid-template-columns: 1fr 1fr; /* 左：画像、右：テキスト */
}

/* ===== テキストエリア ===== */
.treatment-block__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}

.treatment-block__subtitle {
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--treat-pink);
  line-height: 1.6;
}

.treatment-block__highlight {
  color: var(--treat-green);
  font-weight: 900;
}

.treatment-block__logo img {
  width: 240px;
  max-width: 80%;
  height: auto;
}

.treatment-block__text {
  line-height: 1.9;
  font-size: clamp(16px, 1.8vw, 18px);
  color: #665952;
}

/* ===== 詳しい内容リンク ===== */
.treatment-block__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--treat-pink);
  font-weight: 800;
  text-decoration: none;
  font-size: clamp(16px, 1.8vw, 18px);
  transition: color .3s ease;
}
.treatment-block__link:hover {
  color: var(--treat-green);
}

/* 白い三角形アイコン */
.link-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  background: var(--treat-pink);
  border-radius: 50%;
}
.link-icon .triangle {
  position: relative;
  left: -2px; /* ← この値で左右調整（右に寄るならマイナス） */
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ===== 点線 ===== */
.treatment-block__divider {
  border: none;
  border-top: 2px dotted var(--treat-line);
  margin: 12px 0;
}

/* ===== ボタン ===== */
.treatment-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--treat-btn);
  color: #fff;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 12px 28px;
  width: fit-content;
  transition: background .3s ease;
}

.treatment-block__btn:hover {
  background: #ffb3d0;
}

/* ボタン右の三角形 */
.btn-triangle {
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* ===== 画像 ===== */
.treatment-block__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== スマホ版 ===== */
@media (max-width: 959.98px) {
  .treatment-block--left,
  .treatment-block--right {
    grid-template-columns: 1fr;
  }
  .treatment-block__content {
	  align-items: center;
	  width: 100%;
    order: 1;
  }
  .treatment-block__image {
    order: 2;
  }
	.treatment-block__logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }
  .treatment-block__logo img {
	  display: block; 
    margin: 0 auto;
  }
  .treatment-block__subtitle,
  .treatment-block__text,
  .treatment-block__link,
  .treatment-block__btn {
    text-align: center;
    margin-inline: auto;
  }
  .treatment-block__btn {
    margin-top: 10px;
  }
}

.treatment-block__logo-text {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900;
  color: #E6006D;
  margin: 8px 0 16px;
  text-align: left;
}

@media (max-width: 959.98px) {
  .treatment-block__logo-text {
    text-align: center;
    font-size: clamp(24px, 4.5vw, 30px);
    margin-bottom: 16px;
  }
}

:root{
  --greeting-max-w: var(--nav-max-w, 1200px);
  --greeting-eyebrow: #52B200;
  --greeting-title:   #E6006D;
  --greeting-text:    #665952;
  --greeting-plate:   #FFF0F8;   /* 写真の“ずれ背景”色 */
}

/* セクション全体 */
.greeting{
  background: #fff;
  padding: clamp(40px, 6vw, 90px) 0;
}
.greeting__inner{
  width: min(var(--greeting-max-w), calc(100% - 24px));
  margin-inline: auto;
}

/* 見出し */
.greeting__head{ text-align: center; margin-bottom: clamp(22px, 4vw, 40px); }
.greeting__eyebrow{
  margin: 0 0 6px;
  color: var(--greeting-eyebrow);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .08em;
}
.greeting__title{
  margin: 0;
  color: var(--greeting-title);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
}

/* レイアウト */
.greeting__body{
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 960px){
  .greeting__body{
    grid-template-columns: 1fr 1fr; /* 左：写真 / 右：本文 */
    align-items: start;
  }
}

/* 写真：ずれ背景（大きめ） */
.greeting__photo{ position: relative; max-width: 760px; margin: 0 auto; }
.img-offset--plate-pink::before{
  content: "";
  position: absolute;
  z-index: 0;
  /* 画像より大きめの“プレート”を左下にずらす */
  width:  calc(54%);
  height: calc(54% + 80px);
  left:  -36px;
  top:    244px;
  background: var(--greeting-plate);
  border-radius: 0;
}
/* 本文 */
.greeting__content{ display: grid; gap: clamp(16px, 2.5vw, 22px); }
.greeting__text{
  color: var(--greeting-text);
  line-height: 1.9;
  font-size: clamp(18px, 1.8vw, 20px);
}

/* 氏名ブロック */
.greeting__name{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 14px;
}
.greeting__role{
  display: inline-grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 9999px;
  background: #E6006D;      /* 円（濃いピンク） */
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}
.greeting__names{ display: grid; gap: 4px; }

/* ボタン（既存の .treatment-block__btn を流用） */
.greeting__btn{ margin-top: 6px; }

/* 氏名を横並び（改行なし）に */
.greeting__names-inline {
  display: flex;
  align-items: baseline;
  gap: 12px; /* 日本語名と英語名の間隔 */
}

.greeting__jp {
  color: #E5006C;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
}

.greeting__en {
  color: #52B200;
  font-weight: 800;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .02em;
}
/* 画像ラッパー（画像の親） */
.greeting__photo {
  position: relative;
  max-width: 480px;           /* 任意 */
  margin: 0 auto;
  overflow: visible;          /* ← はみ出しOKに */
}

/* デフォルト＝PC用の数値 */
.greeting {                    /* セクションのルートに限定 */
  --plate-left: -56px;         /* 左へはみ出す量（−で左）   */
  --plate-top:  196px;         /* 下へずらす量（＋で下）      */
  --plate-w-extra: -140px;     /* 横サイズをさらに広げる量    */
  --plate-h-extra: -140px;     /* 縦サイズをさらに広げる量    */
  --plate-radius: 0px;         /* 角丸（0〜大きく）          */
  --plate-color: #FFF0F8;      /* 色                         */
}

/* 背景プレート本体 */
.greeting__photo::before{
  content: "";
  position: absolute;
  z-index: 0;                  /* 画像の後ろへ */
  width:  calc(100% + var(--plate-w-extra));
  height: calc(100% + var(--plate-h-extra));
  left:   var(--plate-left);
  top:    var(--plate-top);
  background: var(--plate-color);
  border-radius: var(--plate-radius);
}

/* 画像を前面に */
.greeting__photo img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ並び替え：表題 → 画像 → 文章 → 氏名 → ボタン */
@media (max-width: 959.98px){
	 .greeting{
    --plate-left: -18px;       /* スマホは控えめに */
    --plate-top:  66px;
    --plate-w-extra: -48px;
    --plate-h-extra: -48px;
	  }
  .greeting__body{ grid-template-columns: 1fr; }
  .greeting__photo{ order: 1; max-width: 86%; }
  .greeting__content{ order: 2; text-align: left; }
  .greeting__btn{ justify-self: start; }
}

/* =========================
   Greeting split layout（追加）
   ========================= */

/* 後半ブロック：左文章＋右画像（逆配置） */
.greeting__body--second{
  margin-top: clamp(36px, 3.8vw, 56px);
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  align-items: flex-start;
}

/* 左側文章（後半） */
.greeting__content--second{
  flex: 1 1 0;
}

/* 右側画像（後半） */
.greeting__photo--right{
  flex: 0 0 min(44%, 420px);
}

/* SP：縦積み（画像→文章 or 文章→画像はお好み。ここでは画像を先に） */
@media (max-width: 959.98px){
  .greeting__body--second{
    flex-direction: column;
  }
  .greeting__photo--right{
    width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================
   img-offset plate color（追加）
   ※既存の img-offset が疑似要素でプレートを作っている想定
   ========================= */
.img-offset--plate-mint{
  --img-plate: #DAECC9; /* ←プレート色をここで変更 */
}

/* もし既存 img-offset がCSS変数を見ていない場合に備えた“保険”：
   img-offsetのプレートが ::before で実装されているケースに対応 */
.img-offset--plate-mint::before{
  background: var(--img-plate, #DAECC9);
}
@media (min-width: 960px){

  .greeting__body--second .greeting__content{
    max-width: 55%;
    padding-right: 20px;
  }

}


:root{
  --recruit-bg: #FFF0F8;
  --recruit-max-w: var(--nav-max-w, 1200px);
  --recruit-eyebrow: #52B200;
  --recruit-title: #E5006C;
  --recruit-text: #665952;
  --recruit-btn-bg: #FFC8E2; /* 既存ボタンと同系 */
}

/* セクション全体 */
.recruit{
  background: var(--recruit-bg);
  padding: clamp(40px, 6vw, 80px) 0;
}
.recruit__inner{
  width: min(var(--recruit-max-w), calc(100% - 24px));
  margin-inline: auto;
}

/* 見出し */
.recruit__head{ text-align: center; margin-bottom: clamp(22px, 4vw, 40px); }
.recruit__eyebrow{
  margin: 0 0 6px;
  color: var(--recruit-eyebrow);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .08em;
}
.recruit__title{
  margin: 0;
  color: var(--recruit-title);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
}

/* 2カラム本体 */
.recruit__body{
  display: grid;
  gap: clamp(24px, 4vw, 40px);
}
@media (min-width: 960px){
  .recruit__body{ grid-template-columns: 1fr 1fr; align-items: center; }
}

/* 画像 */
.recruit__image{ margin: 0; order: 2; }
.recruit__image img{
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト */
.recruit__content{
  display: grid;
  align-content: start;
  gap: clamp(14px, 2vw, 20px);
	order: 1;
}
.recruit__text{
  color: var(--recruit-text);
  line-height: 1.9;
  font-size: clamp(16px, 1.8vw, 18px);
}

/* ボタン（縦並び） */
.recruit__buttons{
  display: grid;
  gap: 12px;
  width: min(640px, 100%);
}
.recruit__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--recruit-btn-bg);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  padding: 12px 20px;
  border-radius: 9999px;
  transition: background .25s ease;
  width: 100%;
}
.recruit__btn:hover{ background: #ffb3d0; }

/* 三角アイコン（白） */
.recruit__btn-tri{
  width: 0; height: 0;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* スマホ：順序を 表題 → 画像 → テキスト → ボタン に */
@media (max-width: 959.98px){
  .recruit__body{ grid-template-columns: 1fr; }
  .recruit__image{ order: 1; }
  .recruit__content{ order: 2; }
  .recruit__buttons{ width: 100%; }
  .recruit__text, .recruit__buttons{ text-align: center; }
}

:root{
  --clinic-max-w: var(--nav-max-w, 1200px);
  --clinic-text: #665952;
  --clinic-pink: #E5006C;
  --clinic-green: #52B200;
  --table-border: #e6e6e6;
  --table-head-bg: #fff;
}

/* セクション */
.clinic-basic{
  background: #fff;
  padding: clamp(36px, 6vw, 80px) 0;
  color: var(--clinic-text);
	clear: both;
	font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", "Meiryo", sans-serif;
	border-top: 1px solid #e5e5e5;
}
.clinic-basic__inner{
  width: min(var(--clinic-max-w), calc(100% - 24px));
  margin-inline: auto;
  display: grid;
  gap: clamp(18px, 4vw, 38px);
}

/* PC：左右2カラム */
@media (min-width: 960px){
  .clinic-basic__inner{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* 左カラム */
.clinic-basic__logo img{
  width: clamp(320px, 34vw, 540px);
  height: auto;
  display: block;
}
.clinic-basic__address{
  margin: 12px 0 10px;
  line-height: 1.8;
  font-size: clamp(16px, 2vw, 18px);
}
.clinic-basic__tel{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-weight: 800;
}
.clinic-basic__tel-icon{
  color: var(--clinic-green);
  display: inline-flex;
}
.clinic-basic__tel-link{
  color: var(--clinic-pink);
  font-size: clamp(20px, 2.4vw, 26px);
  text-decoration: none;
}

/* 右カラム：診療時間 */
.hours__title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--clinic-pink);
}

/* スクロール包み（SPで横スクロール許可） */
.hours__scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--table-border);
  border-radius: 10px;
  background: #fff;
}

/* 表本体 */
.hours__table{
  border-collapse: collapse;
  min-width: 560px;                  /* SPで詰まりすぎないよう確保 */
  width: 100%;
  font-size: clamp(14px, 1.8vw, 16px);
}
.hours__table th,
.hours__table td{
  border-bottom: 1px solid var(--table-border);
  padding: 12px 10px;
  text-align: center;
  white-space: nowrap;
}
.hours__table thead th{
  position: sticky;                  /* スクロール時ヘッダ固定（対応ブラウザ） */
  top: 0;
  background: var(--table-head-bg);
  font-weight: 800;
}
.hours__table tbody th{
  text-align: left;
  font-weight: 700;
  color: var(--clinic-green);
}
.hours__table td{ font-weight: 800; }
.hours__table td:nth-child(n+2){ color: var(--clinic-text); }

/* 注意文 */
.hours__note{
  margin: 10px 4px 0;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.8;
  opacity: .9;
}

/* SP：縦並び（順序はHTML通り：ロゴ→住所→電話→表→注意） */
@media (max-width: 959.98px){
  .clinic-basic__left,
  .clinic-basic__right{ width: 100%; }
  .clinic-basic__logo{ text-align: center; }
  .clinic-basic__logo img{ margin-inline: auto; }
  .clinic-basic__address,
  .clinic-basic__tel{ text-align: center; justify-content: center; }
}
/* まずはデフォルト＝PC：SP版は隠す */
.hours__mobile[hidden]{ display: none; }

/* SPでは横スクロールの表を非表示、代わりに簡易表を表示 */
@media (max-width: 959.98px){
  .hours__scroll{ display: none; }            /* ← これで横はみ出しの原因を解消 */
  .hours__mobile[hidden]{ display: block; }   /* ← SPで表示 */

  .hours-mobile{
    width: 100%;
	  max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;        /* 列幅を均等化 */
    font-size: clamp(14px, 3.8vw, 16px);
    background: #fff;
    border: 1px solid var(--table-border);
    border-radius: 10px;
    overflow: hidden;           /* 角丸を有効に */
	  box-sizing: border-box;
  }
  .hours-mobile thead th{
    background: #f9f9f9;
    font-weight: 800;
    text-align: center;
    padding: 10px 6px;
    border-bottom: 1px solid var(--table-border);
  }
  .hours-mobile th,
  .hours-mobile td{
    padding: 12px 6px;
    text-align: center;
    border-bottom: 1px solid var(--table-border);
    word-break: keep-all;
  }
  .hours-mobile tbody tr:last-child th,
  .hours-mobile tbody tr:last-child td{
    border-bottom: none;
  }
  .hours-mobile tbody th{
    width: 32%;
    text-align: left;
    padding-left: 10px;
    font-weight: 700;
    color: var(--clinic-green);   /* 「診療時間」「休憩時間」を緑に */
  }
}
.clinic-basic *,
.clinic-basic *::before,
.clinic-basic *::after {
  box-sizing: border-box;
}
.clinic-basic {
  overflow-x: hidden;
  padding-inline: clamp(12px, 4vw, 24px); /* ← 安全な左右余白を確保 */
}
@media (max-width: 400px) {
  .hours-mobile th,
  .hours-mobile td {
    padding: 8px 4px;
    font-size: 13px;
  }
}


/* 念のため：SP時にセクション全体で横スクロールを抑止 */
@media (max-width: 959.98px){
  .clinic-basic{ overflow-x: hidden; }
}

:root {
  --access-pink: #E5006C;
  --access-green: #52B200;
}

/* アクセスセクション全体 */
.access {
  background: #fff;
  text-align: center;
  padding: clamp(20px, 6vw, 40px) 0 0;
  overflow: hidden;
}

/* 見出し */
.access__inner {
  width: min(1200px, calc(100% - 24px));
  margin-inline: auto;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.access__subtitle {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  color: var(--access-green);
  margin-bottom: 4px;
}
.access__title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 900;
  color: var(--access-pink);
  line-height: 1.4;
}

/* Google Map */
.access__map {
  width: 100%;
  aspect-ratio: 24 / 9; /* 画面幅に応じて高さを調整 */
  overflow: hidden;
  position: relative;
}
.access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 959.98px){
  .access__map iframe {
  height: 120%;
}
}

/* ===== バナー群 ===== */
.banners {
  background-color: #fff;
  padding: clamp(40px, 5vw, 60px) 0;
}

.banners__inner {
  width: min(1200px, 90%);
  margin-inline: auto;
}

.banners__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列 */
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.banners__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時 */
.banners__item img:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ===== スマホ版 ===== */
@media (max-width: 959.98px) {
  .banners__list {
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列 */
    gap: 12px;
  }
}


/* ===== MyoKids v2 ===== */
:root{
  --myo-pink: #E6006D;
  --myo-green:#52B200;
}

.myokids2{
  position: relative;
  background:#FFF0F8;
  padding: clamp(40px, 6vw, 80px) 0;
  overflow: visible;          /* ← はみ出し要素のデザインを切らない */
  isolation: isolate;         /* stacking文脈を分離：他セクションへの影響を防ぐ */
}

.myokids2__inner{
  width: min(1200px, calc(100% - 24px));
  margin-inline: auto;
  position: relative;
}

.myokids2__title{
  text-align: center;
  line-height: 1.25;
  margin: 0 0 clamp(14px, 3vw, 24px);
}

/* 強弱：アクセントは大きく、その他は小さく */
.myo-accent{
  font-weight: 900;
  letter-spacing: .02em;
}
.myo-accent--pink{ color: var(--myo-pink); }
.myo-accent--green{ color: var(--myo-green); }

.myo-small{
  font-weight: 700;
  opacity: .9;
}

/* サイズ（PC/SPで程よい差を） */
@media (min-width: 960px){
  .myo-accent{ font-size: clamp(28px, 4.2vw, 56px); }
  .myo-small { font-size: clamp(16px, 1.6vw, 22px); }
}
@media (max-width: 959.98px){
  .myo-accent{ font-size: clamp(24px, 7vw, 40px); }
  .myo-small { font-size: clamp(18px, 4vw, 20px); }
}

.myokids2__text{
  width: min(980px, 100%);
  margin: 0 auto;
  color:#322C27;
  line-height: 1.9;
  font-size: clamp(18px, 1.9vw, 20px);
  text-align: left;
}
.myokids2__text p strong{
	color: #E6006D;
	
}

/* ===== Bubbles ===== */
.myokids2__bubbles{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;  /* ← 基準を本文ブロック内に */
  min-height: 0;       /* 高さは不要。完全に重ねる用 */
  pointer-events: none;/* 装飾はクリック無効（リンクを邪魔しない） */
}

.myokids2 .bubble{
  position: absolute;
  /* 位置はCSS変数から計算（PC/SPで切替） */
  left: var(--x, var(--x-pc, 50%));
  top:  var(--y, var(--y-pc, 0px));

  width: var(--size, 80px);
  height: var(--size, 80px);

  transform: translate(-50%, 0); /* leftを中央基準に */
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  z-index: -1;                  /* 文字より背面に（必要なら 0 に） */
  animation: myo-float var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}

.bubble img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* スマホでは、変数 --x と --y を SP値に差し替えるだけ */
@media (max-width: 959.98px){
  .bubble{ 
    --x: var(--x-sp);
    --y: var(--y-sp);
  }
}

/* ふわふわ上下＆微小な拡大縮小 */
@keyframes myo-float{
  0%   { transform: translate(-50%, 0)    scale(1);    }
  100% { transform: translate(-50%, -12%) scale(1.04); }
}

/* ちょっとランダム感（任意） */
.myokids2__bubbles .bubble:nth-child(2){ --dur: 6.5s; --delay: .3s; }
.myokids2__bubbles .bubble:nth-child(3){ --dur: 5.8s; --delay: .8s; }
.myokids2__bubbles .bubble:nth-child(4){ --dur: 7.2s; --delay: .2s; }

/* 動きを控える設定の尊重 */
@media (prefers-reduced-motion: reduce){
  .bubble{ animation: none; }
}

/* ボタン全体の配置 */
.myokids__btn-wrap {
  text-align: center;
  margin-top: clamp(40px, 6vw, 80px);
}

/* ボタンの見た目 */
.myokids__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #E6006D;
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.myokids__btn:hover {
  transform: translateY(-3px);
	color: #fff;
}

/* 右側の三角アイコン */
.myokids__btn-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: all 0.3s ease;
}

.myokids__btn:hover .myokids__btn-icon {
  transform: translateX(4px);
}

/* スマホ調整 */
@media (max-width: 959.98px) {
  .myokids__btn {
    width: 90%;
    font-size: 16px;
    padding: 12px 0;
  }
}

:root{
  --growth-max-w: 1200px;
  --growth-pink: #E6006D;
  --growth-green:#52B200;
  --growth-plate-bg: rgba(255,255,255,.86);
  --growth-hero-aspect-pc: 21/9; /* 画像の縦横比（PC） */
  --growth-hero-aspect-sp: 4/5;  /* 画像の縦横比（SP） */
}

/* セクション余白 */
.growth {
  background: #FFF0F8;
  padding: 0 0 clamp(36px, 5vw, 64px);
}

/* ===== ヒーロー：横幅いっぱい画像＋縦書きタイトル ===== */
.growth__hero{
  position: relative;
  width: 100%;
  overflow: clip; /* はみ出しをクリップ（他要素への影響なし） */
  margin-bottom: clamp(28px, 4vw, 40px);
}
.growth__hero-img{
  width: 100%;
  height: auto;
  aspect-ratio: var(--growth-hero-aspect-pc);
  object-fit: cover;
  display:block;
}
@media (max-width: 959.98px){
  .growth__hero-img{
    aspect-ratio: var(--growth-hero-aspect-sp);
  }
}

/* タイトルの半透明プレート */
.growth__title-plate{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.growth__title{
  pointer-events: auto;
  background: var(--growth-plate-bg);
  padding: clamp(18px, 3vw, 28px) clamp(22px, 3.2vw, 34px);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  writing-mode: vertical-rl;         /* 縦書き */
  text-orientation: mixed;
  display: inline-flex;
  gap: clamp(10px, 1.6vw, 16px);     /* 縦書きの“段間” */
}

/* 段ごとの文字サイズ（強弱） */
.growth__title .vline{
  display:block;
  font-weight: 900;
  line-height: 1.35;
  /* 基本は小さめ（弱） */
  font-size: clamp(14px, 1.8vw, 18px);
  color: #333;
}
/* 強調カラー（必要に応じて <span class="vline is-pink">… のように使い分け可） */
.growth__title .is-pink{ color: var(--growth-pink); font-size: clamp(18px, 2.2vw, 26px); }
.growth__title .is-green{ color: var(--growth-green); font-size: clamp(18px, 2.2vw, 26px); }

/* 今回は “お子様の” と “成長に寄り添う” を強くしたい場合の例：
   HTML側で <span class="vline is-pink">お子様の</span>
            <span class="vline is-green">成長に寄り添う</span>
            <span class="vline">歯医者</span> に変更すればOK */

/* ===== 3つの五角形カード ===== */
.growth__pentas{
  width: min(var(--growth-max-w), calc(100% - 24px));
  margin: 0 auto clamp(20px, 4vw, 32px);
  list-style: none;
  display: grid;
  gap: clamp(14px, 3vw, 24px);
}
@media (min-width: 960px){
  .growth__pentas{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 959.98px){
  .growth__pentas{ grid-template-columns: 1fr; }
}

.growth__vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
	position: static;          /* デフォルトに戻す */
  justify-self: center;      /* grid内で中央 */
  align-self: center;        /* grid内で中央 */
  background: rgba(255, 255, 255, 0.8);
  padding: 20px 10px;
  border-radius: 8px;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.8;
  color: #665952;
}

/* 色の指定 */
.growth__vertical .pink {
  color: #E6006D;
}

.growth__vertical .green {
  color: #52B200;
}

/* スマホ時（中央寄せなど調整） */
@media (max-width: 959.98px) {
  .growth__vertical {
    font-size: clamp(18px, 4vw, 22px);
  }
}


/* 五角形（長方形＋下三角） */
.growth .penta{
  position: relative;
  background: #FFF;
  color: var(--growth-pink);
  font-weight: 800;
  text-align: center;
  padding: clamp(18px, 3vw, 28px) clamp(12px, 2.5vw, 20px);
  padding-bottom: clamp(22px, 4vw, 34px);
  border-radius: 12px;
  font-size: clamp(16px, 2vw, 20px);
  margin-bottom: 18px;
}
.growth .penta::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -14px;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right:18px solid transparent;
  border-top: 14px solid #FFF;
}
.growth__penta-item{ overflow: visible; }


/* ===== 説明文 ===== */
.growth__text{
  width: min(var(--growth-max-w), calc(100% - 24px));
  margin: 0 auto;
  color: #665952;
  line-height: 1.9;
  font-size: clamp(18px, 1.9vw, 20px);
}

/* ===== 詳細ボタン ===== */
.growth__btn-wrap{
  text-align: center;
  margin: clamp(22px, 4.5vw, 40px) 0 0;
}
.growth__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFC8E2;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: clamp(16px, 2vw, 20px);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 18px rgba(255, 200, 226, .35);
}
.growth__btn:hover{
  background: #ffb3d0;
  transform: translateY(-2px);
}
.growth__btn-tri{
  width: 0; height: 0;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* スマホ微調整 */
@media (max-width: 959.98px){
  .growth__title{
    padding: 14px 18px;
    border-radius: 12px;
  }
  .penta{ padding-bottom: clamp(22px, 5vw, 30px); }
}

/* ===== 成長セクション：五角形カードに本文を追加 ===== */

/* 各カードを“縦フレックス”にして、本文の長さ差で崩れないようにする */
.growth__penta-item{
  height: 100%;
}
.growth__penta-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 clamp(10px, 1.5vw, 14px);
}

/* タイトル五角形（既存 .penta）の下に十分な余白を確保
   ※ ::after（三角）の高さぶんを見込んでズレ防止 */
.growth__penta-card .penta{
  margin-bottom: clamp(22px, 3vw, 28px);
}

/* 本文：読みやすい行間と適度な余白。長文でもOK */
.growth__penta-desc{
  margin: 0;
  padding: clamp(10px, 2vw, 14px);
  line-height: 1.85;
  font-size: clamp(14px, 1.8vw, 16px);
  color: #665952;
  background: #fff;                 /* 視認性UP（不要なら削除可） */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* PCで高さ揃えに近づけたいとき（任意）：
   グリッドの各セルに均等な最低高さを与えて見た目を整える */
@media (min-width: 960px){
  .growth__pentas{
    align-items: stretch;           /* 各列の高さを揃えやすく */
  }
  .growth__penta-card{
    /* 本文が短いカードでも底そろえに近づける */
    gap: clamp(10px, 1.2vw, 14px);
  }
}

/* ========== 口呼吸→鼻呼吸（見出し＋本文） ========== */
.growth-breathe{
  width: min(var(--growth-max-w), calc(100% - 24px));
  margin: clamp(26px, 4vw, 40px) auto;
  text-align: center;
}
.growth-breathe__title{
  font-weight: 900;
  color: #666; /* グレー */
  letter-spacing: .04em;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.35;
  margin: 0 0 clamp(10px, 1.6vw, 16px);
}
.growth-breathe__title .accent{
  color: var(--growth-pink); /* #E6006D */
}
.growth-breathe__lead{
  margin: 0 auto;
  color: #665952;
  line-height: 1.9;
  font-size: clamp(18px, 1.9vw, 20px);
  text-align: left;
  width: min(1200px, 100%);
}

/* ========== 無限マルチ写真マルquee（安定版） ========== */
.growth-marquee{
  --marquee-gap: 16px;
  --marquee-height: clamp(120px, 22vw, 200px);
  --marquee-speed-pc: 45s;  /* PCの速度（ゆっくり） */
  --marquee-speed-sp: 18s;  /* SPの速度（少し速め） */

  position: relative;
  width: 100%;
  margin: clamp(18px, 3vw, 28px) 0 clamp(28px, 5vw, 40px);
  overflow: hidden;

  /* 両端をふわっとフェード（任意） */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* ビューポート（外枠） */
.growth-marquee__viewport{
  width: 100%;
  overflow: hidden;
}

/* ラップ：ここにアニメーションをかける */
.growth-marquee__wrap{
  display: flex;
  width: max-content;        /* 中身の幅に合わせる */
  will-change: transform;
  animation: growth-marquee-scroll var(--marquee-speed-pc) linear infinite;
}

/* SPだけ速くする */
@media (max-width: 959.98px){
  .growth-marquee__wrap{
    animation-duration: var(--marquee-speed-sp);
  }
}

/* 1本分のトラック（これを2本並べる） */
.growth-marquee__track{
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
}

/* 各アイテム */
.growth-marquee__item{
  flex: 0 0 auto;
  height: var(--marquee-height);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.1);
}
.growth-marquee__item img{
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* アニメーション：wrap全体を「自分の幅の半分」だけ左へ */
@keyframes growth-marquee-scroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

/* 動きが苦手な人の環境設定に配慮 */
@media (prefers-reduced-motion: reduce){
  .growth-marquee__wrap{
    animation: none;
    transform: none;
  }
}
/* 1セット目と2セット目の間の隙間ダミー */
.growth-marquee__spacer{
  flex: 0 0 var(--marquee-gap); /* gap と同じ幅の空白 */
  height: var(--marquee-height);
}


/* ========== 左右2カラム（SPは縦） ========== */
.growth__cta-split{
  width: min(var(--growth-max-w), calc(100% - 24px));
  margin: 0 auto clamp(26px, 5vw, 48px);
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}
@media (min-width: 960px){
  .growth__cta-split{
    grid-template-columns: 1fr 1.1fr; /* 右の画像をやや大きく */
  }
}
.growth__cta-text{
  color: #665952;
  line-height: 1.9;
  font-size: clamp(18px, 1.9vw, 20px);
  padding: clamp(14px, 2.6vw, 22px);
}
.growth__cta-visual{
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.growth__cta-visual img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* SP時は縦並び */
@media (max-width: 959.98px){
  .growth__cta-split{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 959.98px){
  .growth-marquee{
    --marquee-speed: 15s;
  }
}
.growth__text p strong,.growth-breathe p strong{
	color: #E6006D;
}



/* ===== 五角形（四角＋下三角）の中に本文を入れる版 ===== */
.penta{
  position: relative;
  background: #FFF0F8;                 /* 本体の色 */
  color: #E6006D;                      /* 見出しの基本色 */
  text-align: center;
  border-radius: 12px;
  /* 下に三角が付く分、内側の下パディングを多めに確保 */
  padding: clamp(16px,2vw,20px) clamp(14px,2vw,18px) clamp(30px,3.2vw,38px);
}

/* 逆三角（五角形の先端） */
.penta::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -14px;                       /* 三角を箱の外へ */
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right:18px solid transparent;
  border-top: 14px solid #FFF0F8;      /* 本体と同じ色 */
}

/* 見出し（上部） */
.penta__title{
  display: block;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 24px);
  line-height: 1.25;
  margin: 0 0 clamp(10px,1.4vw,14px);
}

/* 本文（長さ可変） */
.penta__desc{
  margin: 0;
  color: #665952;                      /* 読みやすい濃色 */
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.85;
  text-align: left;                    /* 可読性重視で左寄せ（中央にしたければ center） */
  word-break: normal;
}

/* グリッド内で高さ差があってもOKだが、揃えたい時の軽い補助 */
.growth__pentas{ align-items: stretch; }

/* スマホ微調整（任意） */
@media (max-width: 959.98px){
  .penta{
    padding-bottom: clamp(34px, 6vw, 44px); /* SPはさらに余裕 */
  }
}


/* ===== Text Effects: stroke / outline / glow ===== */

/* 見出し向け：くっきり白フチ（WebKitはstroke、本来非対応には多重shadowでフォールバック） */
.text-stroke {
  /* まずは多重 text-shadow で白フチ */
  text-shadow:
    0 0 1px #fff,
    0 0 2px #fff,
    1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
    1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
  /* 対応ブラウザではstrokeを優先（レンダリングがシャープ） */
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill; /* stroke→塗りつぶし順 */
}

/* 見出しの太フチ版（必要に応じて使い分け） */
.text-stroke--lg {
  -webkit-text-stroke: 3px #fff;
  text-shadow:
    0 0 2px #fff,
    0 0 3px #fff,
    2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff;
}

/* 本文向け：やわらか発光（にじみ） */
.text-glow {
  text-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 14px rgba(255,255,255,.85),
    0 0 24px rgba(255,255,255,.75);
}

/* 文字色ハイライト（既存配色に合わせて） */
.em-pink  { color: #E6006D; font-weight: 900; }
.em-green { color: #52B200; font-weight: 900; }

/* 小さな文字でstrokeが強すぎるのを緩和（スマホ） */
@media (max-width: 959.98px){
  .text-stroke   { -webkit-text-stroke-width: 1.5px; }
  .text-stroke--lg{ -webkit-text-stroke-width: 2px; }
}

/* テキストを載せる親に付ける：背景をうっすら暗く/明るくしてコントラスト確保 */
.readability-scrim {
  position: relative;
}
.readability-scrim::before {
  content: "";
  position: absolute;
  inset: -8px;                     /* 少しはみ出して影を拾う */
  pointer-events: none;
  z-index: 0;
  /* 下→上へ薄くなる黒スクラム（明るい背景でも有効） */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 100%);
  border-radius: 12px;
  /* 画像の“細かい凹凸”をならす */
  backdrop-filter: blur(2px);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .readability-scrim::before { background: rgba(0,0,0,.18); } /* フォールバック */
}

/* ===== Reason Why ===== */
:root{
  /* 画像パスは必要に応じて差し替え */
  --reason-bg-pc: url("../img/reason-bg-pc.png"); /* PC用 横長 */
  --reason-bg-sp: url("../img/reason-bg-sp.png"); /* SP用 縦長 */
  --reason-blur: 6px;         /* ぼかし強さ（0で無効） */
  --reason-dim:  0.08;        /* 黒フチの濃さ（0〜1） */
  --reason-max-w: 1000px;     /* テキスト幅の上限 */
}

.reason-why{
  position: relative;
  isolation: isolate;         /* 疑似要素のレイヤを閉じ込める */
  padding: clamp(36px, 6vw, 80px) 0;
  overflow: clip;              /* はみ出し防止（デザインに合わせて可） */
}

/* 背景：擬似要素に敷いてブラー＆トーン */
.reason-why::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--reason-bg-pc);
  background-size: cover;
  background-position: center;
  filter: blur(var(--reason-blur));
  transform: scale(1.03);     /* ブラー時の縁にじみ対策 */
}
.reason-why::after{
  /* うっすら暗くして手前を読みやすく */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,var(--reason-dim));
}

/* SP は背景差し替え（縦長） */
@media (max-width: 959.98px){
  .reason-why::before{
    background-image: var(--reason-bg-sp);
    background-position: center top;
  }
}

/* 前面コンテンツ */
.reason-why__inner{
  position: relative;
  z-index: 1;
  width: min(var(--reason-max-w), calc(100% - 24px));
  margin-inline: auto;
  text-align: center;
}

/* タイトル */
.reason-why__title{
  margin: 0 0 clamp(16px, 3vw, 24px);
  color: #E6006D;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* 白透過パネル */
.reason-why__panel{
  margin: 0 auto;
  text-align: left;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(2px);      /* 対応ブラウザでさらに読みやすく */
  -webkit-backdrop-filter: blur(2px);
  border-radius: 14px;
  padding: clamp(16px, 3.2vw, 28px) clamp(16px, 3.2vw, 28px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  line-height: 1.9;
  color: #665952;
  font-size: clamp(18px, 1.9vw, 20px);
}
.reason-why__panel p{
  margin: 0;
}
.reason-why__panel p strong{
	color: #E5006C;
}

/* ===== Three Promises Section ===== */
:root{
  --promises-bg:#FFF;
  --promises-eyebrow:#52B200;
  --promises-title:#E5006C;
  --promises-pink:#FFC8E2;
  --promises-green:#DDF0CC;
  --promises-faint:#FFD0E9;
  --promises-max-w: var(--nav-max-w, 1200px);
}

.promises{
  background:var(--promises-bg);
  padding:clamp(28px,6vw,72px) 0;
}
.promises__inner{
  width:min(var(--promises-max-w),calc(100% - 24px));
  margin-inline:auto;
}
.promises__head{
  text-align:center;
  margin-bottom:clamp(18px,4.2vw,36px);
}
.promises__eyebrow{
  margin:0 0 6px;
  color:var(--promises-eyebrow);
  font-weight:800;
  font-size:clamp(13px,1.5vw,15px);
  letter-spacing:.08em;
}
.promises__title{
  margin:0;
  color:var(--promises-title);
  font-weight:900;
  font-size:clamp(22px,3.2vw,34px);
  letter-spacing:.02em;
}

/* Grid layout */
.promises__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(16px,2.8vw,28px);
}
@media (min-width:960px){
  .promises__list{ grid-template-columns:repeat(3,1fr); }
}

/* Card Base */
.promises__item{ position:relative; }
.promises-card{
  position:relative;
  display:block;
  aspect-ratio:5/3;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.promises-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

/* 固定背景画像 */
.promises-card--1{ background-image:url('../img/promise-1.jpg'); }
.promises-card--2{ background-image:url('../img/promise-2.jpg'); }
.promises-card--3{ background-image:url('../img/promise-3.jpg'); }

.promises-card__veil{
  position:absolute; inset:0px;
  backdrop-filter:blur(1px);
}
.promises-card__veil--pink { background: color-mix(in srgb, var(--promises-pink) 60%, transparent); }
.promises-card__veil--green{ background: color-mix(in srgb, var(--promises-green) 80%, transparent); }
.promises-card__veil--faint{ background: color-mix(in srgb, var(--promises-faint) 80%, transparent); }

.promises-card__content{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  align-content:start;
  gap:10px;
  padding:clamp(12px,2.6vw,16px);
  color:#665952;
}
.promises-card__title{
  margin:0;
  font-weight:800;
  font-size:clamp(16px,2.1vw,20px);
  color:#333;
}
.promises-card__text{
  margin:0;
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.7;
}

/* === 円形ボタンのベース === */
.promises-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
	margin-inline: auto;
}

/* ピンク円 */
.promises-btn--pink {
  background-color: #E5006C;
}

/* グリーン円 */
.promises-btn--green {
  background-color: #52B200;
}

/* 三角形アイコン（白） */
.promises-btn__tri {
  width: 0;
  height: 0;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
transform: translateX(2px);
}

/* ホバー時の軽い浮き上がり */
.promises-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

.promises-card:hover .promises-btn{
  transform:translateX(1px);
}

@media (max-width:959.98px){
  .promises-card{ aspect-ratio:9/5; }
  .promises-card__content{ align-content:start; }
	.promises-card__title{
  font-size:clamp(18px,2.1vw,22px);
}
}

.promises-card__title--pink {
  color: #E5006C;
}

.promises-card__title--green {
  color: #52B200;
}

/* ===== Services (診療内容) ===== */
:root{
  --svc-max-w: var(--nav-max-w, 1200px);
  --svc-band-pink: #FFC8E2;
  --svc-band-green:#DDF0CC;
  --svc-size-pc: 220px;     /* PCの円直径 */
  --svc-size-sp: 160px;     /* SPの円直径 */
}

/* セクション背景（フル幅画像 + ぼかし + 透過） */
.services{
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 7vw, 80px) 0;
  isolation: isolate; /* 重なり順の安定 */
}
.services__bg{
  position:absolute; inset:0;
  background: center/cover no-repeat;
  background-image: url('../img/services-bg.jpg'); /* ← 背景画像を差し替え */
  filter: blur(6px);               /* ぼかし */
  transform: scale(1.06);          /* ぼかしの端切れ対策 */
  z-index: -2;
}
.services__overlay{
  position:absolute; inset:0;
  background: rgba(255,255,255,.55); /* 透過の白を被せて可読性UP */
  z-index: -1;
}

.services__inner{
  width:min(var(--svc-max-w), calc(100% - 24px));
  margin-inline:auto;
}
.services__head{
  text-align:center;
  margin-bottom: clamp(20px, 4vw, 36px);
}
.services__title{
  margin:0;
  font-weight:900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing:.02em;
  color:#333;
}

/* -----------------------
   円形カードの並び
   PC: 4 / 4 / 3 （最後の3つは中央寄せ）
   SP: 2列並び、最後は1つ
------------------------ */
.services__list{
  display:flex; flex-wrap:wrap;
  gap: clamp(16px, 2.5vw, 28px);
  justify-content:center; /* 最終行を中央に */
  list-style:none; margin:0; padding:0;
}

/* 基本サイズ（PC） */
.services__item{
  flex: 0 0 calc((var(--svc-max-w) - 3 * clamp(16px, 2.5vw, 28px)) / 4); /* 4列相当の幅 */
  max-width: var(--svc-size-pc);
  display:flex; justify-content:center;
}

/* 9〜11番目は3列にしたい → 幅を33.333%相当に変更 */
.services__item:nth-child(n+9){
  flex-basis: calc((var(--svc-max-w) - 2 * clamp(16px, 2.5vw, 28px)) / 3);
}

/* スマホ：2列 + 最後1つ */
@media (max-width: 959.98px){
  .services__item{
    flex: 0 0 calc(50% - (clamp(16px, 2.5vw, 28px)/2));
    max-width: var(--svc-size-sp);
  }
}

/* 円形カード共通 */
.svc-card{
  position:relative;
  width: var(--svc-size-pc);
  height: var(--svc-size-pc);
  border-radius:50%;
  background: #ddd center/cover no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display:block;
  text-decoration:none;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}

/* SPサイズに合わせて直径縮小 */
@media (max-width:959.98px){
  .svc-card{ width: var(--svc-size-sp); height: var(--svc-size-sp); }
}

/* 背景画像（各科目）→ 実画像に差し替え */
.svc-card--1  { background-image:url('../img/serv-01.jpg'); } /* 歯科 */
.svc-card--2  { background-image:url('../img/serv-02.jpg'); } /* 歯周病治療 */
.svc-card--3  { background-image:url('../img/serv-03.jpg'); } /* 根管治療 */
.svc-card--4  { background-image:url('../img/serv-04.jpg'); } /* 小児歯科 */
.svc-card--5  { background-image:url('../img/serv-05.jpg'); } /* 予防処置 */
.svc-card--6  { background-image:url('../img/serv-06.jpg'); } /* 成人矯正 */
.svc-card--7  { background-image:url('../img/serv-07.jpg'); } /* 小児矯正 */
.svc-card--8  { background-image:url('../img/serv-08.jpg'); } /* 審美治療 */
.svc-card--9  { background-image:url('../img/serv-09.jpg'); } /* インプラント */
.svc-card--10 { background-image:url('../img/serv-10.jpg'); } /* 口腔外科 */
.svc-card--11 { background-image:url('../img/serv-11.jpg'); } /* ホワイトニング */
.svc-card--12 { background-image:url('../img/serv-12.jpg'); } /* 入れ歯 */
.svc-card--13 { background-image:url('../img/serv-13.jpg'); } /* 顎関節症 */

/* 下部帯ラベル（半円帯状） */
.svc-label{
  position:absolute;
  left:50%; bottom:0;
  transform: translateX(-50%);
  width: 88%;
  padding: 10px 12px 12px;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  color:#665952; font-weight:800; text-align:center;
  font-size: clamp(14px, 1.8vw, 16px);
  letter-spacing:.02em;
  background: var(--svc-band-pink); /* デフォルトはピンク */
  backdrop-filter: blur(1px);
}

/* ===== 帯の色ルール =====
  PC（≥960px）:
    ・最初の4つ: #E5006C, #52B200, #E5006C, #52B200
    ・次の4つ:   #52B200, #E5006C, #52B200, #E5006C
    ・最後の3つ: #E5006C, #52B200, #E5006C で対称感を維持
*/
@media (min-width:960px){
  .services__item:nth-child(1)  .svc-label,
  .services__item:nth-child(3)  .svc-label,
  .services__item:nth-child(6)  .svc-label,
  .services__item:nth-child(8)  .svc-label,
  .services__item:nth-child(9)  .svc-label,
  .services__item:nth-child(11) .svc-label { background: var(--svc-band-pink); }

  .services__item:nth-child(2)  .svc-label,
  .services__item:nth-child(4)  .svc-label,
  .services__item:nth-child(5)  .svc-label,
  .services__item:nth-child(7)  .svc-label,
  .services__item:nth-child(10) .svc-label,
  .services__item:nth-child(12) .svc-label { background: var(--svc-band-green); }
}

/* SP（<960px）:
   ご指定の「交互に見える」例をベースに
   1:E, 2:G, 3:G, 4:E, 5:E, 6:G, 7:G, 8:E, 9:E, 10:G, 11:E
*/
@media (max-width:959.98px){
  .services__item:nth-child(1)  .svc-label,
  .services__item:nth-child(4)  .svc-label,
  .services__item:nth-child(5)  .svc-label,
  .services__item:nth-child(8)  .svc-label,
  .services__item:nth-child(9)  .svc-label,
  .services__item:nth-child(12) .svc-label { background: var(--svc-band-pink); }

  .services__item:nth-child(2)  .svc-label,
  .services__item:nth-child(3)  .svc-label,
  .services__item:nth-child(6)  .svc-label,
  .services__item:nth-child(7)  .svc-label,
  .services__item:nth-child(10) .svc-label,
  .services__item:nth-child(11) .svc-label { background: var(--svc-band-green); }
}


.footer {
  background-color: #E6006D;
  color: #fff;
  text-align: center;
  padding: clamp(20px, 3vw, 30px) 0;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.03em;
}

.footer__inner {
  width: min(1200px, 90%);
  margin-inline: auto;
}

.footer__copy {
  display: inline-block;
  opacity: 0.9;
  font-family: "M PLUS Rounded 1c", "Rounded Mplus 1c Medium", sans-serif;
}

/* ========================================
   汎用：スマホのみ改行を挿入するクラス
   ======================================== */

/* デフォルト（PC時）：改行しない */
.br-sp {
  display: none;
}

/* スマホサイズのみ：改行表示 */
@media (max-width: 959.98px) {
  .br-sp {
    display: inline;
  }
}
/* PCのみ改行 */
.br-pc {
  display: inline;
}

@media (max-width: 959.98px) {
  .br-pc {
    display: none;
  }
}
@media (max-width: 959.98px){
  .footer{
    padding-bottom: 64px;
  }
}
/* ========================================
   LP共通：お悩みチェック（Vキッズ/トップ流用OK）
   ======================================== */

.lp-worrybox{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
  width: 100%;
}

.lp-worrybox__inner{
  border: 2px solid #E70670;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: clamp(16px, 2.6vw, 28px);
}

/* 見出し（枠内タイトル） */
.lp-worrybox__head{
  text-align: center;
  margin-bottom: clamp(14px, 2.2vw, 18px);
}

.lp-worrybox__title{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #E70670;
  font-size: clamp(18px, 2.2vw, 24px);
}

.lp-worrybox__sub{
  margin: 0;
  color: #665952;
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}

/* チェックリスト：PC 3列 / SP 2列 */
.lp-worrybox__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 959.98px){
	.lp-worrybox{
    width: 96%;
  }
  .lp-worrybox__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ========================================
   派生：SPでは1列（長文リスト向け）
   既存のVキッズ等には影響しない
   ======================================== */
@media (max-width: 959.98px){
  .lp-worrybox--sp1col .lp-worrybox__list{
    grid-template-columns: 1fr; /* ← SPは1列 */
  }
}

/* 1項目 */
.lp-worrybox__item{
  position: relative;
  padding: 12px 12px 12px 40px;
  border: 1px solid rgba(231,6,112,.22);
  border-radius: 12px;
  background: #FFF0F8;
  font-weight: 800;
  color: #665952;
  line-height: 1.35;
	display: flex;
  align-items: center;
}

/* チェックマーク（アイコン） */
.lp-worrybox__item::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: #E70670;
}

.lp-worrybox__item::after{
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 8px;
  height: 4px;
  transform: translateY(-50%) rotate(-45deg);
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

/* 説明文 */
.lp-worrybox__note{
  margin: clamp(14px, 2.4vw, 18px) 0 0;
  color: #665952;
  line-height: 1.85;
  font-size: clamp(17px, 1.7vw, 19px);
}

.lp-worrybox__note strong{
  color: #E5006C;
  font-weight: 900;
}

/* ========================================
   汎用CTAボタン
   ======================================== */

.btn_primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #E6006D;
  color: #fff;
  text-decoration: none;

  padding: 16px 28px;
  border-radius: 9999px; /* しっかり角丸 */
  font-weight: 800;
  letter-spacing: .05em;

  box-shadow: 0 8px 20px rgba(230,0,109,.28);
  transition: all .25s ease;
}

.btn_primary__text{
  font-size: 17px;
  line-height: 1;
}
@media (hover: hover){
  .btn_primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(230,0,109,.38);
    background: #F00078; /* 少し明るく */
  }
}

.btn_primary:focus-visible{
  outline: 3px solid rgba(230,0,109,.35);
  outline-offset: 4px;
}
/* 小さめ（本文中用） */
.btn_primary--sm{
  padding: 12px 22px;
}

.btn_primary--sm .btn_primary__text{
  font-size: 14px;
}

/* 大きめ（LP・CV直前用） */
.btn_primary--lg{
  padding: 20px 36px;
}

.btn_primary--lg .btn_primary__text{
  font-size: 18px;
}
.btn_center{
  display: flex;
  justify-content: center;
}

/* =========================
   Integrated Care Section（offset pattern）
   ========================= */

:root{
  --ic-max-w: var(--nav-max-w, 1200px);
  --ic-pad-y: clamp(44px, 6vw, 80px);
  --ic-title: #E5006C;
  --ic-text:  #665952;

  --ic-panel-bg: rgba(255,255,255,.82);
  --ic-panel-bd: rgba(255,255,255,.45);
  --ic-radius: 18px;

  --ic-gap: clamp(16px, 2.6vw, 30px);
  --ic-img-h: 280px;

  /* offset（ずれ四角）標準ズラし */
  --ic-offset-x: -14px;
  --ic-offset-y: 14px;

  /* ラベル帯の高さ */
  --ic-cta-h: 54px;

  /* SPだけ：カードを細くして見せる＆左端にくっつかない余白 */
  --ic-sp-card-max: 360px;
  --ic-sp-left-pad: 18px;
}

/* セクション全体：背景画像＋ぼかし */
.integrated-care{
  position: relative;
  padding: var(--ic-pad-y) 0;
  overflow: hidden;
}

/* 背景画像（指定URL） */
.integrated-care::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/bg_blur.jpg") center/cover no-repeat;
  transform: scale(1.06);
  filter: blur(10px);
  opacity: .95;
  z-index: 0;
}

/* ほんのり明るい膜で可読性UP */
.integrated-care::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  z-index: 0;
}

.integrated-care__inner{
  position: relative;
  z-index: 1;
  width: min(var(--ic-max-w), calc(100% - 24px));
  margin-inline: auto;
}

/* 見出し */
.integrated-care__head{
  text-align: center;
  margin-bottom: clamp(18px, 3.2vw, 30px);
}

.integrated-care__title{
  margin: 0;
  color: var(--ic-title);
  font-weight: 900;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.35;
  text-shadow: 0 10px 28px rgba(255,255,255,.55);
}

/* 本文（白背景の透け四角） */
.integrated-care__message{
  width: min(980px, 100%);
  margin: 0 auto clamp(22px, 3.2vw, 34px);
  padding: clamp(18px, 2.5vw, 26px) clamp(16px, 2.6vw, 28px);
  background: var(--ic-panel-bg);
  border: 1px solid var(--ic-panel-bd);
  border-radius: var(--ic-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ic-text);
  line-height: 1.9;
  text-align: center;
}

.integrated-care__message p{ margin: 0; }

/* 3カラム（PC） */
.integrated-care__cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ic-gap);
}

@media (min-width: 960px){
  .integrated-care__cards{
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

/* =========================
   Card（共通）
   ========================= */

.integrated-care__card{
  position: relative;

  /* カードごとに変えられる変数（デフォルト） */
  --ic-plate: rgba(255,200,226,.85);       /* ずれ四角色 */
  --ic-cta-bg: rgba(0,0,0,.55);            /* ラベル帯 背景 */
  --ic-cta-text: #fff;                     /* ラベル帯 文字 */
  --ic-arrow: rgba(255,255,255,.9);        /* 三角色 */

  /* 精密治療（左右分割）用 */
  --ic-cta-left-bg: rgba(0,0,0,.55);
  --ic-cta-left-text: #fff;
  --ic-cta-right-bg: rgba(255,255,255,.85);
  --ic-cta-right-text: #52B200;
}

/* ★画像コンテナ：ここを基準にラベルを重ねる */
.integrated-care__media{
  position: relative;  /* ←重要（absolute の基準） */
  width: 100%;
  display: block;
}

/* ずれ四角（背面） */
.integrated-care__offsetPlate{
  position: absolute;
  inset: 0;
  background: var(--ic-plate);
  transform: translate(var(--ic-offset-x), var(--ic-offset-y));
  z-index: 0;
}

/* 画像本体 */
.integrated-care__media img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--ic-img-h);
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  border-radius: 0; /* offset版なので角丸なし */
}

/* =========================
   CTA（画像の前面・下部に重ねる）
   ========================= */

.integrated-care__cta{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;       /* ★画像の下辺とラベルの下辺が一致 */
  z-index: 2;
  width: 100%;
}

/* ラベル帯リンク：背景も文字もクリック可能（写真は不可） */
.integrated-care__ctaLink{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  min-height: var(--ic-cta-h);
  padding: 12px 44px 12px 14px; /* 右に三角分の余白 */

  margin: 0;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .03em;

  background: var(--ic-cta-bg);
  color: var(--ic-cta-text);

  border-radius: 0;
}

/* クリックできる三角（右側） */
.integrated-care__ctaLink::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-left: 10px solid var(--ic-arrow);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.integrated-care__ctaLink:hover{
  opacity: .9;
}

/* 精密治療：左右分割 */
.integrated-care__cta--split{
  display: flex;
  width: 100%;
}

.integrated-care__cta--split .integrated-care__ctaLink{
  width: 100%;
  padding-right: 42px;
  min-height: var(--ic-cta-h);
}

/* 左側 */
.integrated-care__ctaLink--left{
  background: var(--ic-cta-left-bg);
  color: var(--ic-cta-left-text);
}

/* 右側 */
.integrated-care__ctaLink--right{
  background: var(--ic-cta-right-bg);
  color: var(--ic-cta-right-text);
}

/* 分割の境界線（見やすく） */
.integrated-care__cta--split .integrated-care__ctaLink--left{
  border-right: 1px solid rgba(255,255,255,.25);
}

/* =========================
   カード別カラー（ここを変えるだけで色調整可能）
   ========================= */

.integrated-care__card--prostho{
  --ic-plate: rgba(255,200,226,.85);
  --ic-cta-bg: rgba(229,0,108,.85);
  --ic-cta-text: #fff;
  --ic-arrow: rgba(255,255,255,.9);
}

/* =========================
   カード別カラー（HEX指定版）
   ========================= */

/* 矯正歯科：#52B200 */
.integrated-care__card--ortho{
  --ic-plate: #DBFFBD;            /* ずれ四角 */
  --ic-cta-bg: #52B200;           /* ラベル帯 背景 */
  --ic-cta-text: #ffffff;         /* ラベル帯 文字 */
  --ic-arrow: #ffffff;            /* 三角 */

  /* 精密治療用変数は未使用だが念のため定義 */
  --ic-cta-left-bg: #52B200;
  --ic-cta-left-text: #ffffff;
  --ic-cta-right-bg: #ffffff;
  --ic-cta-right-text: #52B200;
}

/* 精密治療：#E5006C */
.integrated-care__card--precision{
  --ic-plate: #FFCAE3;            /* ずれ四角 */

  /* 左右分割 */
  --ic-cta-left-bg: #E5006C;
  --ic-cta-left-text: #ffffff;

  --ic-cta-right-bg: #ffffff;
  --ic-cta-right-text: #E5006C;

  --ic-arrow: #ffffff;
}

/* =========================
   SP：要件反映
   ========================= */

@media (max-width: 959.98px){

  .integrated-care__message{ text-align: left; }

  :root{ --ic-img-h: 220px; }

  /* SPでは「カードの横幅を少し狭く」＋「左端にくっつかない」 */
  .integrated-care__cards{
    justify-items: center;
    padding-left: var(--ic-sp-left-pad);
	  gap: 32px;
  }

  .integrated-care__card{
    width: min(100%, var(--ic-sp-card-max));
  }

  /* SPだけ：ずれ四角の左はみ出し量を少し弱める（必要なら） */
  .integrated-care__offsetPlate{
    transform: translate(-10px, var(--ic-offset-y));
  }
}
/* =========================
   矯正歯科 hover対策
   ========================= */

.integrated-care__card--ortho .integrated-care__ctaLink:hover{
  opacity: 1;                 /* 透明にしない */
  background-color: #52B200;  /* 背景を固定 */
  color: #ffffff;             /* 文字色を固定 */
}

.integrated-care__card--ortho .integrated-care__ctaLink:hover::after{
  border-left-color: #ffffff; /* 三角も固定 */
}
.top-seo-heading{
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #888;
  margin: 10px 0 20px;
}