@charset "utf-8";
.u-pb10 {
  padding-bottom: 10px;
}
.u-pb15 {
  padding-bottom: 15px;
}
.u-pb20 {
  padding-bottom: clamp(10px, var(--px-20), 20px);
}
.u-pb30 {
  padding-bottom: clamp(15px, var(--px-30), 30px);
}
.u-pb40 {
  padding-bottom: clamp(20px, var(--px-40), 40px);
}
.u-pb50 {
  padding-bottom: clamp(25px, var(--px-50), 50px);
}
.u-pb60 {
  padding-bottom: clamp(30px, var(--px-60), 60px);
}
.u-pb70 {
  padding-bottom: clamp(30px, var(--px-70), 70px);
}
.u-pb80 {
  padding-bottom: clamp(40px, var(--px-80), 80px);
}
.u-pb90 {
  padding-bottom: clamp(40px, var(--px-90), 90px);
}
.u-pb100 {
  padding-bottom: clamp(50px, var(--px-100), 100px);
}
.u-pb120 {
  padding-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb10 {
  margin-bottom: 10px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-mb20 {
  margin-bottom: clamp(10px, var(--px-20), 20px);
}
.u-mb30 {
  margin-bottom: clamp(15px, var(--px-30), 30px);
}
.u-mb40 {
  margin-bottom: clamp(20px, var(--px-40), 40px);
}
.u-mb50 {
  margin-bottom: clamp(25px, var(--px-50), 50px);
}
.u-mb60 {
  margin-bottom: clamp(30px, var(--px-60), 60px);
}
.u-mt60 {
  margin-top: clamp(30px, var(--px-60), 60px);
}
.u-mb70 {
  margin-bottom: clamp(30px, var(--px-70), 70px);
}
.u-mb80 {
  margin-bottom: clamp(40px, var(--px-80), 80px);
}
.u-mb90 {
  margin-bottom: clamp(40px, var(--px-90), 90px);
}
.u-mb100 {
  margin-bottom: clamp(50px, var(--px-100), 100px);
}
.u-mb120 {
  margin-bottom: clamp(50px, var(--px-120), 120px);
}
.u-mb180 {
  margin-bottom: clamp(90px, var(--px-180), 180px);
}
.u-max800 {
  max-width: 800px;
  margin-inline: auto;
}
.u-gap20 {
  gap: 20px;
}
/* ============================================================
   下層レイアウト（サイドバー付き）
   ・PC: メイン800px + 左サイドバー（row-reverse で main を右に）
   ・820px: サイドバーがメインの下へ回り込み
   ・680px: SPデザイン
============================================================ */
.p-cavity {
  background: #1a355e;
}
.l-sub {
  display: flex;
  flex-direction: row-reverse; /* DOM: main→side を 表示: side(左)+main(右) に */
  align-items: flex-start;
  gap: clamp(30px, 6.25vw, 90px);
  max-width: 1180px;
  width: 92%;
  margin-inline: auto;
  padding-block: clamp(40px, 5.5vw, 80px);
}
.l-sub__main {
  width: min(800px, 100%);
  flex: 1 1 auto;
  min-width: 0;
}
.l-sub__side {
  width: clamp(220px, 23vw, 280px);
  flex: 0 0 auto;
}
@media screen and (max-width: 820px) {
  .l-sub {
    flex-direction: column;
    width: 90%;
  }
  .l-sub__main {
    width: 100%;
  }
  .l-sub__side {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---- セクション間の余白 ---- */
.p-sec {
  margin-bottom: clamp(50px, 6.25vw, 90px);
}
.p-sec:last-child {
  margin-bottom: 0;
}
.p-cavity__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-cavity__main p + p {
  margin-top: 1em;
}

/* ============================================================
   c-mv : 下層共通メインビジュアル（白もやは CSS）
============================================================ */
.c-mv {
  position: relative;
  height: clamp(280px, 31.9vw, 460px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.c-mv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.55) 32%,
    rgba(255, 255, 255, 0) 70%
  );
}
.c-mv__inner {
  position: relative;
  padding: 0 0 clamp(30px, 4vw, 50px) clamp(20px, 5.5vw, 80px);
}
.c-mv__ja {
  display: block;
  width: clamp(220px, 26vw, 375px);
  color: #113b7a;
  font-size: clamp(24px, 2.22vw, 32px);
  letter-spacing: 0.1em;
  line-height: 1.2;
  padding-bottom: clamp(10px, 1vw, 14px);
  border-bottom: 1px solid rgba(17, 59, 122, 0.5);
}
.c-mv__en {
  display: block;
  color: #113b7a;
  font-size: clamp(15px, 1.39vw, 20px);
  letter-spacing: 0.14em;
  margin-top: clamp(8px, 0.8vw, 12px);
}

/* ============================================================
   見出しコンポーネント
============================================================ */
/* c-ttl : 帯見出し（紺地＋斜めハッチ＋白左ボーダー） */
.c-ttl {
  position: relative;
  z-index: 0;
  background: #113b7a;
  border-left: 2px solid #fff;
  color: #fff;
  font-size: clamp(16px, 1.667vw, 24px);
  letter-spacing: 0.08em;
  line-height: 1.35;
  padding: clamp(12px, 1.3vw, 16px) clamp(16px, 2.2vw, 32px);
  margin-bottom: clamp(24px, 2.8vw, 40px);
}
.c-ttl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.13) 0 1px,
    transparent 1px 7px
  );
}

/* c-dttl : 中央寄せ＋下線見出し */
.c-dttl {
  text-align: center;
  color: #fff;
  font-size: clamp(18px, 1.667vw, 24px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  padding-bottom: clamp(16px, 1.6vw, 22px);
  margin-bottom: clamp(24px, 2.8vw, 35px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

/* c-bttl : グレー縦バー付き小見出し */
.c-bttl {
  color: #fff;
  font-size: clamp(16px, 1.389vw, 20px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding-left: clamp(12px, 1.1vw, 16px);
  border-left: 5px solid #d9d9d9;
  margin-bottom: clamp(18px, 2vw, 28px);
}

/* c-tri-ttl : 三角アイコン付き見出し */
.c-tri-ttl {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  color: #fff;
  font-size: clamp(18px, 1.667vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.c-tri-ttl::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 17px;
  border-color: transparent transparent transparent #fff;
}

/* ============================================================
   c-textimg : テキスト＋画像の2カラム
============================================================ */
.c-textimg {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  align-items: flex-start;
}
.c-textimg--reverse {
  flex-direction: row-reverse;
}
.c-textimg__body {
  flex: 1 1 auto;
  min-width: 0;
}
.c-textimg__img {
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 290px);
  margin: 0;
}
.c-textimg__img--wide {
  width: clamp(210px, 27vw, 310px);
}
.c-textimg__img img {
  width: 100%;
  display: block;
}
.c-textimg__img--cap figcaption {
  text-align: center;
  margin-top: 12px;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.6;
}
/* ============================================================
   c-imgimg : 画像の2カラム
============================================================ */
.c-imgimg {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  margin-bottom: clamp(20px, 2.8vw, 40px);
}
/* ============================================================
   c-merit : 半透明ネイビーのメリットリスト
============================================================ */
.c-merit {
  background: rgba(37, 85, 133, 0.7);
  padding: clamp(18px, 2vw, 26px) clamp(22px, 2.6vw, 36px)
    clamp(18px, 2vw, 26px) clamp(40px, 4vw, 54px);
}
.c-merit li {
  list-style: disc;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.95;
}
.c-merit li::marker {
  font-size: 0.9em;
}

/* ============================================================
   c-price : 料金行（グレーラベル＋価格＋下線）
============================================================ */
.c-price {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.c-price__name {
  background: #535353;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.4;
  display: flex;
  align-items: center;
  padding: clamp(6px, 0.7vw, 10px) 5%;
  width: 50%;
}
.c-price__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  color: #fff;
  font-size: clamp(18px, 1.667vw, 24px);
  padding: clamp(4px, 0.4vw, 6px) clamp(10px, 1.5vw, 22px);
}
.c-price__value small {
  font-size: clamp(12px, 1.25vw, 18px);
}

/* ============================================================
   c-frame : 二重枠＋中央タイトル（▼…▼）のボックス
============================================================ */
.c-frame {
  position: relative;
  border: 1px solid #fff;
  padding: clamp(34px, 4vw, 55px) clamp(20px, 3vw, 42px) clamp(30px, 4vw, 50px);
}
.c-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #fff;
  pointer-events: none;
}
.c-frame__ttl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  background: #1a355e;
  padding: 0 clamp(12px, 1.4vw, 20px);
  white-space: nowrap;
  color: #fff;
  font-size: clamp(16px, 1.667vw, 24px);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.c-frame__ttl::before,
.c-frame__ttl::after {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 9px 0 9px;
  border-color: #fff transparent transparent transparent;
}
.c-frame__btn {
  text-align: center;
  margin-top: clamp(24px, 3vw, 40px);
}

/* c-note : 太字の注記 */
.c-note {
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

/* c-webbtn : WEB予約ボタン */
.c-webbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(285px, 80%);
  background: #113b7a;
  border: 1px solid #898989;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.05em;
  padding: clamp(12px, 1.3vw, 16px) clamp(20px, 2.4vw, 34px);
}
.c-webbtn::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #fff transparent;
}

/* ============================================================
   c-imgs（画像グリッド行）
============================================================ */
.p-imgs2,
.p-imgs3,
.p-imgs4 {
  display: grid;
  align-items: start;
}
.p-imgs2 {
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 30px);
}
.p-imgs3 {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
.p-imgs4 {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}
.p-imgs2 img,
.p-imgs3 img,
.p-imgs4 img {
  width: 100%;
  display: block;
}

/* ============================================================
   c-flow : 治療の流れ
============================================================ */
.c-flow__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.c-flow__badge {
  flex: 0 0 auto;
  width: clamp(56px, 4.86vw, 70px);
  height: clamp(56px, 4.86vw, 70px);
  /* 左上→右下の対角線で2トーンに分割した斜めタブ */
  background: linear-gradient(45deg, #2f5f9c 0 50%, #4585c4 50% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.c-flow__badge small {
  font-size: clamp(12px, 1.1vw, 16px);
  color: rgba(246, 246, 246, 0.75);
  letter-spacing: 0.1em;
}
.c-flow__badge b {
  font-weight: 500;
  font-size: clamp(20px, 1.94vw, 28px);
  margin-top: 4px;
}
.c-flow__ttl {
  color: #fff;
  font-size: clamp(20px, 1.94vw, 28px);
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.c-flow__body {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  align-items: flex-start;
}
.c-flow__text {
  flex: 1 1 auto;
  min-width: 0;
}
.c-flow__img {
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 290px);
  margin: 0;
}
.c-flow__img img {
  width: 100%;
  display: block;
}
.c-flow__arrow {
  display: block;
  width: 0;
  height: 0;
  margin: clamp(16px, 1.8vw, 24px) auto;
  border-style: solid;
  border-width: 18px 12px 0 12px;
  border-color: #4082ca transparent transparent transparent;
}

/* ============================================================
   c-side : 下層共通サイドバー（診療案内）
============================================================ */
.c-side__group {
  margin-bottom: clamp(20px, 2vw, 28px);
}
.c-side__group:last-child {
  margin-bottom: 0;
}
.c-side__ttl {
  background: #f5f5f5;
  color: #113b7a;
  border-left: 10px solid #4082ca;
  font-size: clamp(16px, 1.389vw, 20px);
  letter-spacing: 0.05em;
  line-height: 1.3;
  padding: clamp(9px, 1vw, 13px) clamp(14px, 1.4vw, 20px);
  margin-bottom: 8px;
}
.c-side__link {
  position: relative;
  display: block;
  color: #fff;
  font-size: clamp(14px, 1.11vw, 16px);
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: clamp(9px, 1vw, 13px) 30px clamp(9px, 1vw, 13px) 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.c-side__link::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
.c-side__link.is-current {
  opacity: 0.55;
}

/* ============================================================
   SP（680px）
============================================================ */
@media screen and (max-width: 680px) {
  .c-textimg,
  .c-textimg--reverse,
  .c-flow__body {
    flex-direction: column;
  }
  .c-textimg__img,
  .c-textimg__img--wide,
  .c-flow__img {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  .p-imgs3,
  .p-imgs4 {
    grid-template-columns: 1fr 1fr;
  }
  .c-price {
    flex-direction: column;
  }
  .c-price__value {
    margin-left: 0;
    padding-inline: 0;
  }
  /* 枠タイトルは重ねず、通常フローで中央配置 */
  .c-frame {
    padding-top: clamp(26px, 7vw, 40px);
  }
  .c-frame__ttl {
    position: static;
    transform: none;
    background: none;
    padding: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
    margin-bottom: clamp(16px, 4vw, 24px);
  }
}

/* ============================================================
   ホワイトニング（page-whitening）: 追加コンポーネント
============================================================ */
.p-whitening {
  background: #1a355e;
}
.p-whitening__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-whitening__main p + p {
  margin-top: 1em;
}

/* c-hero : 全幅の大きな画像 */
.c-hero {
  margin: 0 0 clamp(40px, 5vw, 60px);
}
.c-hero img {
  width: 100%;
  display: block;
}

/* テキスト+画像の大きめ画像 / 右寄せ注記 */
.c-textimg__img--lg {
  width: clamp(220px, 29vw, 335px);
}
.u-tc-right {
  text-align: right;
}

/* c-bullets : 中黒リスト（common.css の list-style:none を戻す） */
.c-bullets li {
  list-style: disc;
  margin-left: 1.35em;
  line-height: 1.9;
  font-size: clamp(15px, 1.25vw, 18px);
}

/* c-linkbar : 紺地ハッチ＋枠の中央CTAバナー（▶） */
.c-linkbar {
  display: flex;
  justify-content: center;
}
.c-linkbar__link {
  position: relative;
  z-index: 0;
  display: block;
  width: min(600px, 100%);
  box-sizing: border-box;
  text-align: center;
  background: #113b7a;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.08em;
  padding: clamp(14px, 1.6vw, 20px) clamp(34px, 4vw, 54px);
}
.c-linkbar__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.12) 0 1px,
    transparent 1px 7px
  );
}
.c-linkbar__link::after {
  content: "";
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/* c-notebar : 枠付きの補足バンド */
.c-notebar {
  width: min(474px, 100%);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: clamp(8px, 1vw, 12px) 10px;
  text-align: center;
}

/* c-infobox : 半透明ブルーの情報ボックス */
.c-infobox {
  background: rgba(37, 85, 133, 0.5);
  padding: clamp(18px, 2vw, 26px) clamp(24px, 2.8vw, 40px);
}
.c-infobox .c-bullets li {
  line-height: 2;
}

/* c-box : 一重枠のコンテナ */
.c-box {
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: clamp(24px, 3.5vw, 50px) clamp(20px, 3vw, 42px);
}
.c-box__ttl {
  color: #fff;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: clamp(18px, 2vw, 28px);
}

/* c-course : 自費クリーニングのコース比較 */
.c-course-wrap {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  align-items: flex-start;
}
.c-course {
  flex: 1 1 0;
  min-width: 0;
}
.c-course__head {
  text-align: center;
  color: #113b7a;
  font-size: clamp(15px, 1.389vw, 20px);
  letter-spacing: 0.08em;
  padding: clamp(10px, 1.1vw, 14px);
}
.c-course__head--std {
  background: #fff;
}
.c-course__head--special {
  background: #fff;
}
.c-course__body {
  padding-top: clamp(16px, 1.8vw, 24px);
}
.c-course__spec {
  margin: 0;
}
.c-course__row {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: flex-start;
  margin-bottom: clamp(8px, 1vw, 12px);
}
.c-course__tag {
  flex: 0 0 auto;
  align-self: flex-start;
  background: rgba(64, 130, 202, 0.32);
  color: #fff;
  font-size: clamp(13px, 1.11vw, 15px);
  line-height: 1.6;
  padding: 2px 10px;
  white-space: nowrap;
}
.c-course__val {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: 1.7;
}
.c-course__notes {
  margin-top: clamp(14px, 1.6vw, 22px);
}
.c-course__notes li {
  font-size: clamp(13px, 1.11vw, 15px);
  line-height: 1.8;
}

/* c-band : 中央ヘッダーバンド */
.c-band {
  width: min(650px, 100%);
  box-sizing: border-box;
  margin-inline: auto;
  background: #113b7a;
  color: #fff;
  text-align: center;
  font-size: clamp(15px, 1.389vw, 20px);
  letter-spacing: 0.08em;
  padding: clamp(10px, 1.1vw, 14px);
}
.c-band.c-band--white {
  background: #fff;
  color: #113b7a;
}
/* c-qa : よくある質問 */
.c-qa-ttl {
  text-align: center;
  color: #fff;
  font-size: clamp(18px, 1.667vw, 24px);
  letter-spacing: 0.06em;
  padding-bottom: clamp(14px, 1.4vw, 20px);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
.c-qa__item {
  margin-top: clamp(18px, 2vw, 28px);
}
.c-qa__q {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  background: #3a6ea5;
  color: #fff;
  font-size: clamp(16px, 1.389vw, 20px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  padding: clamp(10px, 1.2vw, 16px) clamp(14px, 1.6vw, 24px);
}
.c-qa__num {
  flex: 0 0 auto;
  font-weight: 700;
}
.c-qa__a {
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 24px) 0;
}

/* c-risk : 治療の説明・リスクボックス */
.c-risk {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  line-height: 1.8;
}
.c-risk:last-child {
  margin-bottom: 0;
}
.c-risk b {
  font-weight: 700;
}
.c-risk p + p {
  margin-top: 0.4em;
}

/* 料金ラベルを中央寄せ・固定幅（ホワイトニング） */
.p-whitening .c-price__name {
  width: 60%;
  justify-content: center;
  text-align: center;
}

/* ---- ホワイトニング SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-textimg__img--lg {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  .c-course-wrap {
    flex-direction: column;
  }
  .c-course {
    width: 100%;
  }
  .p-whitening .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .c-qa__q {
    flex-wrap: nowrap;
  }
}

/* ============================================================
   インビザライン（page-invisalign）: 追加コンポーネント
============================================================ */
.p-invisalign {
  background: #1a355e;
}
.p-invisalign__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-invisalign__main p + p {
  margin-top: 1em;
}
/* 料金ラベルを中央寄せ・固定幅 */
.p-invisalign .c-price__name {
  width: 60%;
  justify-content: center;
  text-align: center;
}

/* u-tac : 中央寄せ */
.u-tac {
  text-align: center;
}

/* c-dblttl : 中央寄せ＋二重下線見出し */
.c-dblttl {
  text-align: center;
  color: #fff;
  font-size: clamp(18px, var(--px-24), 24px);
  letter-spacing: 0.08em;
  line-height: 1.45;
  padding-bottom: clamp(14px, 1.5vw, 20px);
  margin-bottom: clamp(24px, 2.8vw, 36px);
  border-bottom: 4px double rgba(255, 255, 255, 0.7);
}

/* c-capcards : 写真＋キャプションの4カード */
.c-capcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
}
.c-capcards__item {
  margin: 0;
}
.c-capcards__item img {
  width: 100%;
  display: block;
}
.c-capcards figcaption {
  margin-top: clamp(8px, 1vw, 12px);
  text-align: center;
  color: #fff;
  font-size: clamp(13px, 1.11vw, 15px);
  line-height: 1.5;
}

/* c-hero--md : 中央寄せの中サイズ画像 */
.c-hero--md {
  width: min(650px, 100%);
  margin-inline: auto;
}

/* c-loanbar : デンタルローン帯（角ブラケット＋影） */
.c-loanbar {
  position: relative;
  background: #16336e;
  box-shadow: 10px 10px 0 rgba(170, 170, 170, 0.55);
  padding: clamp(20px, 2.6vw, 34px) clamp(16px, 2vw, 30px);
  text-align: center;
}
.c-loanbar::before,
.c-loanbar::after {
  content: "";
  position: absolute;
  width: clamp(30px, 3.2vw, 46px);
  height: clamp(30px, 3.2vw, 46px);
}
.c-loanbar::before {
  top: 10px;
  left: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.c-loanbar::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.c-loanbar__txt {
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0.12em;
  line-height: 1.4;
}

/* c-loanlinks : リンクバナー2枚（画像） */
.c-loanlinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
}
.c-loanlinks__item {
  display: block;
}
.c-loanlinks__item img {
  width: 100%;
  display: block;
}

/* ---- インビザライン SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-capcards {
    grid-template-columns: 1fr 1fr;
  }
  .c-loanlinks {
    grid-template-columns: 1fr;
  }
  .p-invisalign .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ============================================================
   審美修復治療（page-cosmetic）: 追加コンポーネント
============================================================ */
.p-cosmetic {
  background: #1a355e;
}
.p-cosmetic__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-cosmetic__main p + p {
  margin-top: 1em;
}
/* 料金ラベルを中央寄せ・固定幅 */
.p-cosmetic .c-price__name {
  width: 60%;
  justify-content: center;
  text-align: center;
}

/* c-capcards--2 : 2列（症例ビフォーアフター） */
.c-capcards--2 {
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 30px);
}

/* c-barttl : 左バー付きセクション見出し（c-bttl より大きめ） */
.c-barttl {
  color: #fff;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding-left: clamp(12px, 1.1vw, 16px);
  border-left: 5px solid #d9d9d9;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.c-barttl-bdnone {
  border-left: none;
  padding-left: 0;
}
/* c-linkbtns : 紺地ハッチ＋▶ のリンクボタン2連 */
.c-linkbtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 40px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.c-linkbtns__item {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #113b7a;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  padding: clamp(14px, 1.6vw, 20px) 20px;
}
.c-linkbtns__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.12) 0 1px,
    transparent 1px 7px
  );
}
.c-linkbtns__item::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/* ---- 審美修復治療 SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-linkbtns {
    grid-template-columns: 1fr;
  }
  .p-cosmetic .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ============================================================
   院長・スタッフ紹介（page-staff）: 追加コンポーネント
============================================================ */
.p-staff {
  position: relative;
  overflow: hidden;
  background: #1a355e;
}
/* 斜めパネルの背景装飾（院長エリア背面）。画像ではなく clip-path で描画 */
.p-staff > * {
  position: relative;
  z-index: 1;
}
.p-staff::before,
.p-staff::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
.p-staff::before {
  top: clamp(300px, 33vw, 520px);
  height: clamp(760px, 82vw, 1180px);
  background: #21426f;
  clip-path: polygon(0 14%, 100% 0, 100% 60%, 0 46%);
}
.p-staff::after {
  top: clamp(560px, 62vw, 980px);
  height: clamp(520px, 60vw, 900px);
  background: #142a4e;
  clip-path: polygon(0 40%, 100% 58%, 62% 100%, 0 100%);
}
.p-staff__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-staff__main p + p {
  margin-top: 1em;
}

/* c-doc-name : 短い縦バー付きの氏名見出し */
.c-doc-name {
  position: relative;
  color: #fff;
  font-size: clamp(18px, 1.667vw, 24px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding-left: clamp(20px, 2vw, 28px);
  margin: clamp(16px, 1.8vw, 22px) 0 clamp(16px, 1.8vw, 24px);
}
.c-doc-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(8px, 1vw, 15px);
  height: 1.6em;
  background: #4082ca;
}

/* c-tag : 見出しラベル（ピル） */
.c-tag {
  display: inline-block;
  background: #3a6ea5;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.06em;
  line-height: 1.3;
  padding: clamp(4px, 0.6vw, 7px) clamp(16px, 1.8vw, 26px);
}

/* c-prof : ラベル＋本文のプロフィール小ブロック */
.c-prof {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.c-prof__txt {
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* c-doc-sep : ドクター情報の区切り線 */
.c-doc-sep {
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
  margin: clamp(30px, 4vw, 55px) 0;
}

/* c-doc-photo : ドクター写真（全幅） */
.c-doc-photo {
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.c-doc-photo img {
  width: 100%;
  display: block;
}

/* c-qahead : Q&A セクション見出し */
.c-qahead {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.6vw, 24px);
  padding-bottom: clamp(14px, 1.5vw, 20px);
  margin-bottom: clamp(28px, 3.2vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
.c-qahead__en {
  font-family: "Cinzel", serif;
  color: #fff;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: 0.04em;
}
.c-qahead__ja {
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0.08em;
}

/* c-capcards--3 : 3列（スタッフ写真＋氏名） */
.c-capcards--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.c-capcards--3 .c-capcards__item img {
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

/* ---- スタッフ紹介 SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-capcards--3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   医院紹介（page-clinic）: 追加コンポーネント
============================================================ */
.p-clinic {
  background: #1a355e;
}
.p-clinic__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-clinic__main p + p {
  margin-top: 1em;
}

/* c-whitebox : 白地のテキストボックス（本文は濃紺） */
.c-whitebox {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #23375c;
  padding: clamp(24px, 3vw, 42px) clamp(20px, 3vw, 44px);
}
.c-whitebox p {
  color: #23375c;
}
.c-whitebox__ttl {
  color: #1a355e;
  font-size: clamp(18px, var(--px-24), 24px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  padding-bottom: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 4px double #b7c2d6;
}
/* 白ボックス右下の水色の三角装飾 */
.c-whitebox--deco::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 clamp(90px, 12vw, 150px) clamp(160px, 22vw, 280px);
  border-color: transparent transparent rgba(64, 130, 202, 0.28) transparent;
  pointer-events: none;
}
.c-whitebox__inner {
  position: relative;
  z-index: 1;
}

/* c-mid-ttl : 左寄せ＋短い下線の見出し */
.c-mid-ttl {
  display: inline-block;
  color: #fff;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  padding-bottom: clamp(6px, 0.8vw, 10px);
  margin-bottom: clamp(16px, 1.8vw, 24px);
  border-bottom: 2px solid #4082ca;
}

/* c-line-ttl : 下線＋半幅アクセントのセクション見出し */
.c-line-ttl {
  position: relative;
  color: #fff;
  font-size: clamp(24px, var(--px-36), 36px);
  letter-spacing: 0.08em;
  line-height: 1.2;
  padding-bottom: clamp(14px, 1.5vw, 20px);
  margin-bottom: clamp(24px, 2.8vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
.c-line-ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: min(400px, 50%);
  height: 3px;
  background: #4082ca;
}

/* c-facility : 院内写真の行（ラベル＋説明＋画像） */
.c-facility {
  display: flex;
  gap: clamp(16px, 2.2vw, 30px);
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 30px);
}
.c-facility + .c-facility {
  margin-top: clamp(12px, 1.4vw, 18px);
}
.c-facility__body {
  flex: 1 1 auto;
  min-width: 0;
}
.c-facility__label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: clamp(15px, 1.39vw, 20px);
  letter-spacing: 0.06em;
  margin-bottom: clamp(8px, 1vw, 12px);
}
.c-facility__label::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 1.5em;
  background: #4082ca;
}
.c-facility__img {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 250px);
  margin: 0;
}
.c-facility__img img {
  width: 100%;
  display: block;
}

/* c-equip-grid : 設備・機材の3列グリッド（画像＋キャプション） */
.c-equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 30px);
  align-items: start;
}
.c-equip-grid figure {
  margin: 0;
}
.c-equip-grid img {
  width: 100%;
  display: block;
}
.c-equip-grid figcaption {
  margin-top: clamp(8px, 1vw, 12px);
  text-align: center;
  color: #fff;
  font-size: clamp(13px, 1.11vw, 15px);
  line-height: 1.5;
}

/* c-hours : 診療時間テーブル（塗りパネル） */
.c-hours {
  background: #20406e;
  padding: clamp(16px, 2vw, 28px) clamp(14px, 2vw, 30px);
}
.c-hours__table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 1.25vw, 17px);
}
.c-hours__table th,
.c-hours__table td {
  padding: clamp(6px, 0.8vw, 10px) 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 500;
}
.c-hours__table tr:last-child th,
.c-hours__table tr:last-child td {
  border-bottom: 0;
}
.c-hours__label {
  white-space: nowrap;
}

/* c-reserve : 予約パネル（TEL＋WEB予約＋診療時間） */
.c-reserve__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 44px);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.c-reserve__tel {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: 0.04em;
}
.c-reserve__tel svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.c-reserve__tel a {
  color: #fff;
}
.c-reserve__note {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(13px, 1.11vw, 15px) !important;
  line-height: 1.7 !important;
}

/* c-linkbtns__single : 中央寄せの単独リンクボタン */
.c-linkbtns__single {
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 2vw, 24px);
}
.c-linkbtns__single .c-linkbtns__item {
  min-width: min(350px, 100%);
}

/* ============================================================
   レーザー治療 / 入れ歯 / 予防歯科
   （page-laser / page-denture / page-prevention）: ベース
============================================================ */
.p-laser,
.p-denture,
.p-prevention {
  background: #1a355e;
}
.p-laser__main p,
.p-denture__main p,
.p-prevention__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-laser__main p + p,
.p-denture__main p + p,
.p-prevention__main p + p {
  margin-top: 1em;
}

/* ============================================================
   インプラント治療（page-implant）: 追加コンポーネント
============================================================ */
.p-implant {
  background: #1a355e;
}
.p-implant__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-implant__main p + p {
  margin-top: 1em;
}
.p-implant .c-price__name {
  width: 50%;
  justify-content: center;
  text-align: center;
}

/* c-casegrid : 症例写真のマルチカラム（マソンリー風） */
.c-casegrid {
  columns: 4;
  column-gap: clamp(8px, 1vw, 14px);
}
.c-casegrid img {
  width: 100%;
  display: block;
  margin-bottom: clamp(8px, 1vw, 14px);
  break-inside: avoid;
}

/* c-cap : 画像下の中央キャプション */
.c-cap {
  text-align: center;
  margin-top: clamp(10px, 1.2vw, 16px) !important;
}

/* ---- インプラント SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-casegrid {
    columns: 2;
  }
  .p-implant .c-price__name,
  .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ---- 医院紹介 SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-facility {
    flex-direction: column;
    align-items: stretch;
  }
  .c-facility__img {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
  }
  .c-equip-grid {
    grid-template-columns: 1fr 1fr;
  }
  .c-reserve__contact {
    gap: 16px;
  }
}

/* ============================================================
   歯周病・予防治療（page-perio）: 追加コンポーネント
============================================================ */
.p-medical {
  background: #1a355e;
}
.p-medical__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-medical__main p + p {
  margin-top: 1em;
}
.p-medical .c-price__name {
  width: 60%;
  justify-content: center;
  text-align: center;
}

/* c-ba : 術前／術後の比較（ラベル付き2列） */
.c-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 30px);
  align-items: start;
}
.c-ba__item {
  margin: 0;
}
.c-ba__label {
  display: block;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 17px);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.c-ba__item img {
  width: 100%;
  display: block;
}
.c-ba__item img + img {
  margin-top: clamp(10px, 1.2vw, 16px);
}

/* c-numgrid : 番号付き症例グリッド（番号＋画像＋キャプション） */
.c-numgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px) clamp(10px, 1.2vw, 16px);
  align-items: start;
}
.c-numgrid__item {
  margin: 0;
}
.c-numgrid__num {
  display: block;
  color: #fff;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: clamp(8px, 1vw, 12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.c-numgrid__item img {
  width: 100%;
  display: block;
}
.c-numgrid__cap {
  margin-top: 8px;
  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.6 !important;
}

/* ---- 歯周病・予防治療 SP（680px） ---- */
@media screen and (max-width: 680px) {
  .c-numgrid {
    grid-template-columns: 1fr 1fr;
  }
  .p-medical .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ============================================================
   咬合再構成（page-occlusion）: ベース＋追加
============================================================ */
.p-occlusion {
  background: #1a355e;
}
.p-occlusion__main p {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
}
.p-occlusion__main p + p {
  margin-top: 1em;
}
.p-occlusion .c-price__name {
  width: 60%;
  justify-content: center;
  text-align: center;
}

/* c-dblttl のリード行（小さい上見出し） */
.c-dblttl__lead {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-bottom: 0.5em;
  opacity: 0.92;
}

/* p-imgs5 : 5列画像 */
.p-imgs5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.p-imgs5 img {
  width: 100%;
  display: block;
}

/* ---- 咬合再構成 SP（680px） ---- */
@media screen and (max-width: 680px) {
  .p-occlusion .c-price__name {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .p-imgs5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   レーザー治療（page-laser）: 追加コンポーネント
============================================================ */
/* c-meritcard : 番号＋見出し＋説明の枠付きカード（2列グリッド） */
.c-meritcard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
}
.c-meritcard__item {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 28px);
}
.c-meritcard__ttl {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  color: #fff;
  font-size: clamp(16px, 1.389vw, 20px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: clamp(10px, 1.2vw, 14px);
}
.c-meritcard__num {
  flex: 0 0 auto;
  font-family: "Cinzel", serif;
  font-size: 1.25em;
  color: #4082ca;
}
@media screen and (max-width: 680px) {
  .c-meritcard {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   入れ歯（page-denture）: 追加コンポーネント
============================================================ */
/* c-comptable : 3プラン比較表（SPは枠内で横スクロール） */
.c-comptable-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-comptable {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #20406e;
  color: #fff;
}
.c-comptable th,
.c-comptable td {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: clamp(10px, 1.2vw, 16px) clamp(8px, 1vw, 14px);
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}
.c-comptable thead th {
  background: #3a6ea5;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.02em;
}
.c-comptable thead th:first-child,
.c-comptable__row-th {
  background: #16305a;
  white-space: nowrap;
  font-weight: 500;
}
.c-comptable__strong {
  display: block;
  font-weight: 700;
}
.c-comptable__note {
  display: block;
  margin-top: 5px;
  font-size: 0.82em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.c-comptable__scroll-hint {
  display: none;
}
@media screen and (max-width: 680px) {
  .c-comptable__scroll-hint {
    display: block;
    text-align: right;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    opacity: 0.8;
  }
}
/* c-checklist : ✔付きチェックリスト（折り返し時はテキスト位置でぶら下げインデント） */
.c-checklist li {
  position: relative;
  padding-left: 1.7em; /* テキストの開始位置を右へ */
  line-height: 1.9;
}
.c-checklist li::before {
  content: "✔";
  position: absolute; /* ✔を左端に固定 */
  left: 0;
  top: 0;
  font-weight: 700;
  color: #fff;
}