@import "section-bg.generated.css";

/* ========================================
   Base / Variables
======================================== */
:root {
  --main-color: #003087;
  --main-color-deep: #002870;
  --sub-color: #1a3a8f;
  --accent-yellow: #ffe347;
  --accent-yellow-2: #fff13f;
  --text-color: #222222;
  --text-dark: #111111;
  --bg-light: #e9f3ff;
  --bg-soft: #eff4fb;
  --bg-faq: #f5f9fe;
  --canvas-bg: #e4eaf3; /* body 外枠（LP内 --bg-soft と同色にしない） */
  --white: #ffffff;
  --max-width-container: 2000px;
  --max-width-frame: 1512px;
  --max-width-inner: 1312px;
  --max-width-narrow: 1140px;
  --font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-display: "Zen Maru Gothic", var(--font-sans);
  --font-en: "Barlow Condensed", sans-serif;
  --font-num: "Outfit", sans-serif;
  --font-cta-num: "Urbanist", var(--font-num);
  --bp-sp: 798px;

  /* SP 共通スケール（max-width: 798px で上書き） */
  --sp-space-xs: 10px;
  --sp-space-sm: 20px;
  --sp-space-md: 30px;
  --sp-space-lg: 40px;
  --sp-space-xl: 60px;
  --fs-h2: clamp(24px, 3.2vw, 36px);
  --sp-fs-title: 26px;
  --sp-fs-sub: 20px;
  --sp-fs-body: 15px;
  --sp-fs-body-lg: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-color);
  background: var(--canvas-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
dt {
  margin: 0;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: inherit;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-br-480 {
  display: none;
}

/* SP（798px以下）でのみ改行 */
.u-br-sp {
  display: none;
}

@media (max-width: 798px) {
  .u-br-sp {
    display: block;
  }
}

/* PC（799px以上）でのみ改行 */
.u-br-pc {
  display: none;
}

@media (min-width: 799px) {
  .u-br-pc {
    display: block;
  }
}

/* 1001px以上でのみ改行（1000px以下は改行なし） */
.u-br-min-1001 {
  display: none;
}

@media (min-width: 1001px) {
  .u-br-min-1001 {
    display: block;
  }
}

.wrapper {
  max-width: var(--max-width-container);
  margin: 0 auto;
  width: 100%;
  overflow-x: clip;
  background: var(--white);
}

.wrap {
  max-width: var(--max-width-inner);
  margin: 0 auto;
  width: 100%;
  padding-inline: 20px;
}

/* ========================================
   Main / SP order（ワイヤー 497:1417）
   PC は DOM 順（Figma PC）。SP のみ order で並び替え。
======================================== */
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

@media (max-width: 798px) {
  .header { order: 0; }
  .fv { order: 1; }
  .worry { order: 2; }
  .reason { order: 3; }
  .case { order: 4; }
  .doctor { order: 5; }
  .price { order: 6; }
  .flow { order: 7; }
  .faq { order: 8; }
  .about { order: 9; }
  .worry2 { order: 10; }
  .implant { order: 11; }
  .implant_diff { order: 12; }
  .implant_pros { order: 13; }
  .corp { order: 14; }
  .cta_section { order: 15; }
  .access { order: 16; }
}

/* ========================================
   Common components
======================================== */
.sec_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
}

.sec_head_en,
.sec_head_ja,
.sec_head_lead {
  position: relative;
  z-index: 1;
}

.sec_head_en_wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Figma 424:23 … 背面の大きな REASON（front を中心に back を重ねる） */
.sec_head_watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.sec_head_watermark_layer {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(56px, 12vw, 120px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.sec_head_watermark_layer--front {
  position: relative;
  display: block;
  color: #ebeef5;
}

/* back は front の中央に配置 */
.sec_head_watermark_layer--back {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  color: var(--white);
  transform: translate(-50%, -50%);
}

.sec_head_en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--main-color);
  text-transform: uppercase;
}

.sec_head_ja {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--main-color);
  letter-spacing: 0.03em;
}

.sec_head_num {
  display: inline-block;
  font-size: 1.6em;
  line-height: 1;
  position: relative;
}

.sec_head_num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 5px;
  background: var(--accent-yellow-2);
  z-index: -1;
}

.sec_head_lead {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.cta_pair {
  display: flex;
  gap: 40px;
  align-items: stretch;
  position: relative;
  padding-top: 14px;
}

.cta_tel,
.cta_web {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 5px;
  box-shadow: 4.38px 7.38px 0 0 rgba(0, 38, 108, 1);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.cta_tel {
  justify-content: center;
  padding: 20px 30px;
  background: var(--white);
  border: 5px solid var(--main-color);
}

.cta_web {
  justify-content: flex-start;
  padding: 31px 70px 22px 40px;
  background:
    linear-gradient(0deg, #ffe243 0%, #ffe365 100%) padding-box,
    linear-gradient(90deg, #003087 0%, #0a38e0 50%, #002a77 100%) border-box;
  border: 5px solid transparent;
}

.cta_badge {
  position: absolute;
  top: -17px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  background: transparent;
  border: none;
  font-size: clamp(16px, 2.5vw, 28px);
  font-weight: 900;
  line-height: 1;
}

.cta_badge_text {
  color: var(--white);
  -webkit-text-stroke: 7px var(--main-color);
  paint-order: stroke fill;
}

.cta_badge_cap {
  width: 23px;
  height: 31px;
  flex-shrink: 0;
  display: block;
}

.cta_badge_k {
  letter-spacing: -0.2143em;
}

.cta_tel_inner,
.cta_web_inner {
  display: flex;
  align-items: center;
}

.cta_tel_inner {
  justify-content: center;
  gap: 10px;
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 700;
  color: var(--main-color);
}

.cta_tel_inner img {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.cta_web_inner {
  justify-content: center;
  gap: 25px;
  flex: 1;
  min-width: 0;
}

.cta_web_icon,
.cta_web_inner > img:not(.cta_web_texts) {
  width: 68px;
  height: auto;
  flex-shrink: 0;
}

.cta_web_inner > img.cta_web_texts {
  display: block;
  width: min(328px, 100%);
  height: auto;
  flex-shrink: 1;
  min-width: 0;
}

.cta_web_arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cta_web_arrow img {
  width: 14px;
  height: auto;
}

.cta_pair--on-dark .cta_tel {
  border-color: var(--white);
}

/* ========================================
   Header
======================================== */
.header {
  background: var(--white);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0, 48, 135, 0.08);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 50px;
  max-width: none;
}

.header_logo {
  transition: opacity 0.2s ease;
}

.header_logo img {
  width: min(280px, 45vw);
  height: auto;
}

.header_actions {
  display: flex;
  align-items: center;
  gap: 19px;
}

.header_tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 260px;
  padding: 12px 24px;
  border: 1.5px solid var(--main-color);
  border-radius: 70px;
  background: var(--white);
  box-shadow: 0 7px 1px rgba(221, 221, 221, 0.85);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.header_tel_label,
.header_tel_num {
  transition: color 0.2s ease;
}

.header_tel_label {
  font-size: 14px;
  font-weight: 700;
  color: var(--main-color);
}

.header_tel_num {
  font-family: var(--font-num);
  font-size: 24px;
  font-weight: 800;
  color: var(--main-color);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.header_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 77px;
  border-radius: 70px;
  background: linear-gradient(90deg, #fff034 0%, #ffef27 50%, #ffee1b 100%);
  border: 2px solid var(--main-color);
  box-shadow: 0 7px 1px rgba(221, 221, 221, 0.85);
  font-size: 18px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.25;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* ========================================
   FV
======================================== */
.fv {
  width: 100%;
}

.fv_visual {
  width: 100%;
  line-height: 0;
}

.fv_visual picture,
.fv_visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   Worry
======================================== */
.worry {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 90px;
  padding: 60px 0 200px;
  background-color: var(--white);
  background-image: url("../img/worry_bg.webp");
  background-repeat: repeat;
  background-position: left top;
}

/* 右下デコ：コンテナ幅に合わせて100%表示 */
.worry_deco {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.worry > *:not(.worry_deco) {
  position: relative;
  z-index: 1;
}

.worry_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.worry_head {
  position: relative;
  width: min(1200px, 100%);
  text-align: center;
}

.worry_title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--main-color);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.45;
}

.worry_title_text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--accent-yellow), var(--accent-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: left bottom;
  padding-bottom: 0.02em;
}

.worry_title_lead,
.worry_title_em {
  font-family: var(--font-sans);
  font-weight: 600;
}

.worry_title_a {
  letter-spacing: -0.05em;
}

.worry_title_ri {
  letter-spacing: -0.09em;
}

.worry_title_nai {
  letter-spacing: 0.03em;
}

.worry_list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: var(--max-width-narrow);
}

.worry_row {
  display: flex;
  padding-left: 0;
}

.worry_row--offset80 {
  padding-left: 80px;
}

.worry_row--offset160 {
  padding-left: 160px;
}

.worry_row--offset240 {
  padding-left: 240px;
}

@media (max-width: 1199px) {
  .worry_row--offset80,
  .worry_row--offset160,
  .worry_row--offset240 {
    padding-left: 0;
  }

  .worry_list {
    align-items: center;
  }

  .worry_row {
    width: 100%;
    justify-content: center;
  }

  .worry_item {
    width: min(900px, 100%);
  }
}

.worry_item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(900px, 100%);
  border: 2px solid var(--main-color);
  border-radius: 7px;
  background: var(--white);
  overflow: hidden;
}

.worry_item_content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12.66px;
  min-width: 0;
  padding-left: 35px;
}

.worry_item_icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.worry_item_text {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 700;
  color: var(--main-color);
  line-height: 44.37px;
}

.worry_item_media {
  position: relative;
  width: 203px;
  height: 111px;
  flex-shrink: 0;
}

.worry_item_media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 1) 100%);
}

.worry_item_media--fade88::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 1) 100%);
}

.worry_item_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worry_message {
  width: 100%;
  max-width: var(--max-width-container);
  margin-inline: auto;
  background: var(--white);
}

.worry_message_inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.worry_message_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  padding-block: 40px;
  padding-inline: 20px;
}

.worry_message_title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--main-color);
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: left;
}

.worry_message_text {
  margin: 0;
  font-size: clamp(16px, 2vw, 29px);
  font-weight: 400;
  color: var(--main-color);
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-align: left;
}

.worry_message_media {
  position: relative;
  width: 500px;
  flex-shrink: 0;
  align-self: stretch;
  background: url("../img/worry_message_bg.webp") center / cover no-repeat;
}

.worry_message_media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 1) 100%);
}

.worry_cta {
  width: 100%;
}

/* ========================================
   Reason
======================================== */
.reason {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* 左上デコ：コンテナ幅に合わせて100%表示 */
.reason_deco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.reason > *:not(.reason_deco) {
  position: relative;
  z-index: 1;
}

.reason .wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.reason_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.reason_list > li {
  display: flex;
  width: 100%;
}

.reason_list > li:nth-child(odd) {
  justify-content: flex-start;
}

.reason_list > li:nth-child(even) {
  justify-content: flex-end;
}

.reason_card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
}

.reason_num {
  position: absolute;
  top: -15px;
  left: -13px;
  z-index: 2;
  font-family: var(--font-num);
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-yellow-2);
  -webkit-text-stroke: 5px var(--main-color);
  paint-order: stroke fill;
}

.reason_card--rev .reason_num {
  left: -13px;
}

.reason_card_title {
  background: var(--main-color);
  color: var(--white);
  font-size: clamp(20px, 2.4vw, 33px);
  font-weight: 800;
  padding: 16px 28px 16px 80px;
  border-radius: 10px 10px 0 0;
}

.reason_card--rev .reason_card_title {
  padding-left: 80px;
  padding-right: 28px;
  text-align: left;
}

.reason_card_body {
  display: flex;
  border: 1px solid var(--main-color);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--white);
}

.reason_card_fig {
  width: 280px;
  flex-shrink: 0;
}

.reason_card_fig picture {
  display: block;
  width: 100%;
  height: 100%;
}

.reason_card_fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 210px;
}

.reason_card_text {
  flex: 1;
  padding: 30px 28px;
  font-size: 24px;
  line-height: 35px;
  color: var(--text-color);
  display: flex;
  align-items: center;
}

/* ========================================
   Case
======================================== */
.case {
  padding: 60px 0 80px;
  background: var(--bg-light);
}

.case .wrap {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.case_heading {
  background: var(--main-color);
  color: var(--white);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 700;
  padding: 10px 12px;
  border-top: 5px solid var(--accent-yellow);
}

.case_list {
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
}

.case_card {
  background: var(--white);
  padding: 30px 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 5px 15px 2px rgba(0, 0, 0, 0.05);
}

.case_card_title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--main-color);
  letter-spacing: 0.04em;
}

.case_photos {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.case_photo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.case_photo img {
  border-radius: 10px;
  display: block;
}

.case_photo--after {
  z-index: 2;
}

.case_photo--after img {
  box-shadow: 15px 15px 4px rgba(0, 0, 0, 0.25);
}

.case_photo figcaption {
  position: absolute;
  left: 8px;
  bottom: 12px;
  z-index: 1;
  background: #828282;
  color: var(--white);
  font-family: var(--font-num);
  font-size: 18px;
  padding: 4px 20px;
  border-radius: 2px;
}

.case_photo--after figcaption {
  background: var(--main-color);
}

/* Figma 301:763 … absolute で写真の間中央に浮かせる */
.case_arrow {
  position: absolute;
  left: 267px; /* before 幅＝両写真の境目 */
  top: 50%;
  z-index: 3;
  width: 41px;
  height: 41px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.case_meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 10px;
}

.case_meta_row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: start;
}

.case_meta_row dt {
  margin: 0;
  padding: 15px 30px 15px 0;
  font-weight: 700;
  font-size: 25px;
  color: var(--main-color);
  display: flex;
  align-items: center;
  gap: 30px;
  line-height: 1.3;
}

.case_meta_row dt::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 1.5em;
  background-color: var(--main-color);
}

.case_meta_row dd {
  margin: 0;
  padding: 15px 30px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.5;
  color: #0b0b0b;
  display: flex;
  align-items: flex-start;
}

.case_note {
  font-size: 19px;
  font-weight: 300;
  color: #0b0b0b;
  line-height: 1.5;
  text-align: center;
}

/* ========================================
   Doctor
======================================== */
.doctor {
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doctor .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doctor_list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.doctor_profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.doctor_profile_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 40px clamp(24px, 4vw, 150px) 40px clamp(24px, 4vw, 50px);
}

.doctor_profile--rev .doctor_profile_text {
  padding: 40px clamp(24px, 4vw, 50px) 40px clamp(24px, 4vw, 150px);
}

.doctor_role {
  display: inline-flex;
  align-self: flex-start;
  background: var(--main-color);
  color: var(--white);
  font-size: 25px;
  font-weight: 700;
  padding: 0 12px;
}

.doctor_name {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--main-color);
  display: flex;
  align-items: center;
  gap: 20px;
}

.doctor_name_en {
  font-family: "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  color: var(--accent-yellow);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.doctor_history {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-dark);
}

.doctor_history ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 1.2em;
  list-style: disc;
}

.doctor_profile_media {
  position: relative;
  line-height: 0;
}

.doctor_profile_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
}

.doctor_quotes {
  position: absolute;
  left: 0;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor_profile--rev .doctor_quotes {
  left: 0;
}

.doctor_quotes p {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(0, 37, 105, 0.8);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  padding: 10px 30px;
  line-height: 1.5;
}

.doctor_message {
  background: linear-gradient(159deg, #002d7f 0%, #002361 100%);
  padding: 80px 0;
}

.doctor_message_inner {
  display: flex;
  flex-direction: column;
  gap: 34px;
  color: var(--white);
}

.doctor_message_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.doctor_message_head p {
  font-size: 30px;
}

.doctor_message_head h3 {
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.doctor_message_head::after {
  content: "";
  width: 94px;
  height: 6px;
  background: var(--accent-yellow-2);
}

.doctor_message_list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.doctor_message_list h4 {
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 10px;
}

.doctor_message_list p {
  font-size: 19px;
  font-weight: 500;
  line-height: 35px;
}

/* ========================================
   Price
======================================== */
.price {
  padding: 100px 0;
  background: linear-gradient(180deg, rgba(0, 48, 135, 0.95) 0%, rgba(0, 48, 135, 0.8) 100%);
  color: var(--white);
}

.price_inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.price_intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
}

.price_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
}

.price_title_line {
  flex: 1;
  height: 0;
  border-top: 2px solid var(--white);
  min-width: 40px;
}

.price_title_text {
  flex-shrink: 0;
}

.price_lead,
.price_note {
  font-size: 20px;
  line-height: 1.5;
  color: #111;
}

.price_lead {
  color: var(--white);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.price_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 31px;
  padding: 50px;
  background: var(--white);
  color: #111;
}

.price_panel--breakdown {
  background:
    var(--white)
    url("../img/price_panel--breakdown_bg.webp") right top / cover no-repeat;
}

.price_panel--fees {
  gap: 70px;
  border: 1px solid #5e3f1d;
}

.price_panel_deco {
  position: absolute;
  left: -63px;
  top: -29px;
  z-index: 0;
  width: min(1520px, 140%);
  max-width: none;
  height: auto;
  pointer-events: none;
  opacity: 0.35;
}

.price_panel > *:not(.price_panel_deco) {
  position: relative;
  z-index: 1;
}

.price_sub {
  align-self: flex-start;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--main-color);
  font-style: italic;
  line-height: 1.5;
  border-bottom: 5px solid var(--accent-yellow);
}

.price_breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.price_breakdown_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 32px) / 3);
  min-height: 150px;
  padding: 16px 24px;
  background: var(--white);
  color: var(--main-color);
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.5;
  border: 1.6px solid var(--main-color);
}

.price_breakdown_num {
  position: absolute;
  top: -15px;
  left: -11px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--main-color);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.price_highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.price_highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 36px;
  background:
    linear-gradient(180deg, rgba(0, 48, 135, 0.2) 0%, rgba(0, 187, 255, 0.2) 100%),
    var(--main-color);
  color: var(--white);
}

.price_highlight_label {
  color: var(--accent-yellow);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.price_highlight_value {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.price_highlight_value strong {
  font-size: clamp(36px, 5vw, 53px);
  font-weight: 700;
  line-height: 1.2;
}

.price_highlight_unit {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 4px;
}

.price_blocks {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.price_block {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d9d9d9;
  table-layout: fixed;
}

.price_block_cat {
  width: 250px;
  padding: 22px 30px;
  background: var(--main-color);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  vertical-align: middle;
  border: 1px solid #d9d9d9;
  box-shadow: inset 0 3px 0 var(--accent-yellow);
}

.price_block tbody th:not(.price_block_cat),
.price_block td {
  padding: 22px 30px;
  font-size: 20px;
  color: #0b0b0b;
  border: 1px solid #e3e3e3;
  background: var(--white);
  vertical-align: middle;
}

.price_block tbody th:not(.price_block_cat) {
  width: 410px;
  font-weight: 500;
  text-align: left;
}

.price_block td {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.price_examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 31px;
  align-items: start;
}

.price_example {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d9d9d9;
  table-layout: fixed;
}

.price_example thead th {
  padding: 15px 30px;
  background: #01479b;
  color: var(--white);
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  border: none;
  box-shadow: inset 0 3px 0 var(--accent-yellow);
}

.price_example tbody th,
.price_example tbody td {
  padding: 22px 30px;
  font-size: 20px;
  font-weight: 500;
  color: #0b0b0b;
  border: 1px solid #e3e3e3;
  background: var(--white);
  vertical-align: middle;
}

.price_example tbody th {
  width: 67%;
  text-align: left;
}

.price_example tbody td {
  width: 33%;
  text-align: right;
  white-space: nowrap;
}

.price_example tbody .price_example_total th,
.price_example tbody .price_example_total td {
  background: #f3f3f3;
  font-weight: 700;
}

.price_loan {
  display: flex;
  flex-direction: column;
  border: 1px solid #d9d9d9;
}

.price_loan_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 30px;
  background: var(--main-color);
  border-top: 3px solid var(--accent-yellow);
}

.price_loan_title {
  margin: 0;
  color: var(--white);
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.price_loan_note {
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}

.price_loan_cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
  background: var(--white);
}

.price_loan_cards > li {
  min-width: 0;
}

.price_loan_card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 250px;
  height: 100%;
  background: var(--white);
  border: 0.67px solid #eef2ff;
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.price_loan_card_bar {
  flex-shrink: 0;
  width: 100%;
  height: 10px;
  background: var(--loan-accent);
}

.price_loan_card--aplus {
  --loan-accent: #6e917c;
}

.price_loan_card--epos {
  --loan-accent: #45a1b0;
}

.price_loan_card_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 20px 24px;
}

.price_loan_card_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.price_loan_card_brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.price_loan_card_brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.price_loan_card_brand img.price_loan_card_logo--epos {
  width: 111px;
  height: 40px;
}

.price_loan_label {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0b0b0b;
  line-height: 24px;
}

.price_loan_times {
  margin: 0;
  flex-shrink: 0;
  padding: 6px 22px;
  background: #f5f6f8;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  color: #4a5565;
  line-height: 16px;
}

.price_loan_pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.price_loan_pay_label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0b0b0b;
  line-height: 20px;
  text-align: center;
}

.price_loan_amount {
  margin: 5px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: var(--loan-accent);
}

.price_loan_amount strong {
  font-size: clamp(48px, 6vw, 71px);
  font-weight: 700;
  line-height: 1;
}

.price_loan_amount span {
  font-size: 39px;
  font-weight: 700;
  line-height: 1.3;
}

.price_loan_first {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding: 12px 16px;
  background: #f5f6f8;
  border-radius: 5px;
}

.price_loan_first_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--loan-accent);
  line-height: 20px;
}

.price_loan_first_label img {
  width: 16px;
  height: 16px;
}

.price_loan_first em {
  font-style: normal;
  color: #0b0b0b;
  font-size: 22px;
  font-weight: 500;
  line-height: 20px;
}

.price_deduction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  padding: 50px;
  background: var(--main-color) url("../img/price_deduction_bg.webp") repeat;
  color: var(--white);
}

.price_deduction_title {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  border-bottom: 2px solid var(--white);
  padding-bottom: 5px;
}

.price_deduction_text {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--white);
}

.price_formula {
  margin: 0;
  width: 100%;
  background: var(--white);
  color: var(--main-color);
  text-align: center;
  padding: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 2.2;
  border: 1px solid var(--white);
}

.price_formula span {
  font-size: clamp(12px, 2.4vw, 18px);
  font-weight: 400;
}

.price_link_wrap {
  margin: 0;
  align-self: flex-end;
}

.price_link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  padding-bottom: 4px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.price_link img {
  width: 26px;
  height: 26px;
}

/* ========================================
   Flow
======================================== */
.flow {
  padding: 100px 0;
}

.flow .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}

.sec_head--flow {
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: 1200px;
}

.sec_head--flow .sec_head_en_wrap {
  justify-content: flex-start;
}

.sec_head--flow .sec_head_watermark {
  left: 0;
  transform: translate(0, -50%);
}

.sec_head--flow .sec_head_watermark_layer--front {
  color: #ebeef5;
}

.sec_head--flow .sec_head_en {
  font-size: clamp(32px, 6vw, 56px);
}

.sec_head--flow .sec_head_ja {
  line-height: 1.3;
}

.sec_head--flow .sec_head_lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 24.7px;
}

.flow_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow_list::before {
  content: "";
  position: absolute;
  left: 104px;
  top: 73px;
  bottom: 37px;
  z-index: 0;
  width: 5px;
  background: var(--main-color);
}

.flow_item {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 50px;
  position: relative;
  padding: 0 50px;
}

.flow_icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  margin-top: 18px;
  padding: 10px 15px;
  box-sizing: border-box;
}

.flow_icon img:not(.flow_num) {
  width: auto;
  max-width: 65px;
  height: auto;
  max-height: 73px;
  object-fit: contain;
}

.flow_icon .flow_num {
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: auto;
  max-width: none;
  max-height: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.flow_main {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 970px;
  min-width: 0;
}

.flow_body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  text-align: center;
}

.flow_body h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 35px);
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.3;
}

.flow_body p {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  color: #111;
  line-height: 36px;
}

.flow_arrow {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--main-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ========================================
   FAQ（Common: faq_dl）
======================================== */
.faq {
  padding: 110px 0 50px; /* 下半分: 続く about（白）と接合 */
}

.faq .wrap {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

#faq .faq_dl {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
}

#faq .faq_dl .inner {
  border: 3px solid rgba(0, 48, 135, 0.1);
  background: var(--white);
}

#faq .faq_dl dt {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 28px 30px 28px 30px;
  background: var(--bg-faq);
  border-bottom: 1px solid rgba(85, 85, 85, 0.36);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#faq .faq_dl dt:focus {
  outline: none;
}

#faq .faq_dl dt:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: -2px;
}

#faq .faq_dl dt::before {
  content: "Q.";
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.3;
}

#faq .faq_dl .btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 8px;
}

#faq .faq_dl .btn span {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

#faq .faq_dl .btn span::before {
  content: none;
}

#faq .faq_dl .btn span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

#faq .faq_dl dt.highlight .btn span::after {
  transform: rotate(-135deg);
}

#faq .faq_dl dd {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  transition: grid-template-rows 0.35s ease;
}

#faq .faq_dl dt.highlight + dd {
  grid-template-rows: 1fr;
}

#faq .faq_dl dd > .faq_a {
  overflow: hidden;
  min-height: 0;
}

#faq .faq_dl dd > .faq_a > .faq_a_body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 28px 30px;
  font-size: clamp(16px, 2vw, 25px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-dark);
}

#faq .faq_dl dd > .faq_a > .faq_a_body > span {
  min-width: 0;
  flex: 1;
}

#faq .faq_dl dd > .faq_a > .faq_a_body::before {
  content: "A.";
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}

#faq .faq_dl dd a {
  color: #3971b1;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.faq_more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px 50px;
  border: 1px solid #0b0b0b;
  background: transparent;
  font-family: inherit;
  font-size: 25px;
  font-weight: 500;
  color: var(--main-color);
  text-align: center;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq_stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq_more_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease, margin-top 0.45s ease;
  margin-top: 0;
}

.faq_more_panel.is-open {
  grid-template-rows: 1fr;
  margin-top: 30px;
}

.faq_more_panel_inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.faq_more_panel.is-open .faq_more_panel_inner {
  opacity: 1;
}

.faq_more_panel .faq_dl {
  margin: 0;
}

/* ========================================
   About / Worry2 / Implant
======================================== */
.about {
  /* 上下とも半分: 前 faq / 後 worry2（いずれも白）と接合 */
  padding: 40px 0 40px;
}

.about_inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about_text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 18px;
  line-height: 1.8;
  color: var(--main-color);
}

.about_catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.5;
}

.about_catch span {
  display: inline-block;
  padding: 4px 12px;
  background: var(--main-color);
  color: var(--white);
  line-height: 1.5;
}

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

.worry2 {
  padding: 40px 0 80px; /* 上半分: 前 about（白）と接合 */
}

.worry2 .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.worry2_title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.worry2_em {
  color: var(--main-color);
}

.worry2_em > span {
  position: relative;
  display: inline-block;
  padding-top: 0.28em;
}

.worry2_em > span::before {
  content: "";
  position: absolute;
  top: 0.02em;
  left: 50%;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--main-color);
  transform: translateX(-50%);
}

.worry2_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 100%;
}

.worry2_list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  color: var(--main-color);
}

.worry2_avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 7px solid var(--main-color);
  overflow: hidden;
  display: block;
}

.worry2_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.implant,
.implant_pros {
  padding: 100px 0;
  background: var(--bg-soft);
}

.implant_diff {
  padding: 60px 0;
  background: var(--white);
}

.implant .wrap,
.implant_diff .wrap,
.implant_pros .wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.diff_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.implant_heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--main-color);
  text-align: center;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 30px;
}

.implant_heading::before,
.implant_heading::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--main-color);
}

.implant_block {
  position: relative;
  background: var(--white);
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.implant_intro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  padding: 40px 0;
}

.implant_intro_head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
}

.implant_intro_head,
.implant_en {
  text-align: center;
}

.implant_en {
  margin: 0;
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 400;
  color: var(--main-color);
  line-height: 1.2;
}

.implant_sub {
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 3vw, 40px);
  color: #7a8fb6;
  font-weight: 600;
  line-height: 1.3;
}

.implant_lead_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.implant_lead_frame {
  position: relative;
  z-index: 1;
  padding: 4px;
  border: 3px solid #d9d9d9;
  overflow: visible;
}

.implant_lead_frame .implant_lead,
.implant_lead {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 30px 160px;
  border: 3px solid #d9d9d9;
  text-align: center;
  font-size: clamp(22px, 2.8vw, 35px);
  font-weight: 600;
  color: var(--main-color);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.implant_lead_sub {
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 500;
  color: #4e6a9e;
}

.implant_lead_em {
  display: inline-block;
}

.implant_lead_mark {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.implant_lead_mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  z-index: -1;
  height: 15px;
  background: #e4ecff;
}

.implant_lead_frame .implant_deco {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-55%);
  width: 102px;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.implant_block .implant_label {
  display: inline-flex;
  align-self: flex-start;
  background: var(--main-color);
  color: var(--white);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  padding: 0 10px;
  line-height: 1.5;
}

.implant_label {
  display: inline-flex;
  align-self: flex-start;
  background: var(--main-color);
  color: var(--white);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  padding: 0 14px;
  line-height: 1.4;
}

.implant_body {
  display: flex;
  flex-direction: column;
  gap: 1.7em;
  padding: 0 10px;
}

.implant_body p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  letter-spacing: 0.04em;
}

.implant_body strong,
.implant_strong {
  font-weight: 700;
  color: var(--main-color);
}

.implant_strong {
  font-weight: 600;
}

.diff_card {
  border: 3px solid var(--main-color);
  display: flex;
  flex-direction: column;
}

.diff_card h3 {
  text-align: center;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--main-color);
  padding: 0 20px;
  border-bottom: 2px dashed var(--main-color);
}

.diff_card_body {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 30px clamp(20px, 6vw, 100px);
}

.diff_card_body p {
  flex: 1;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-dark);
}

.diff_card_body img {
  width: 209px;
  flex-shrink: 0;
}

.pros_box,
.cons_box {
  background: var(--white);
  border: 9px solid var(--main-color);
  padding: clamp(24px, 4vw, 60px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pros_box .implant_label,
.cons_box .implant_label {
  position: absolute;
  top: -35px;
  left: -9px;
}

.pros_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.pros_list li {
  border: 4px solid #f5f8ff;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.35);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}

.pros_body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pros_list h4 {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 43px;
  margin: 0;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--main-color);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.pros_list h4::before {
  content: "";
  flex-shrink: 0;
  width: 42px;
  height: 43px;
  padding: 0;
  background: url("../img/check.svg") center / contain no-repeat;
}

.pros_media {
  display: block;
  width: 100%;
  height: auto;
}

.pros_list p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-dark);
}

.cons_box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(22px, 2.8vw, 35px);
  font-weight: 700;
  color: var(--main-color);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cons_box li {
  position: relative;
  display: block;
  padding-left: 1em;
}

.cons_box li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.cons_box span {
  display: block;
  font-size: 0.7em;
  font-weight: 400;
}

/* ========================================
   Corp / CTA / Access / Footer
======================================== */
.corp {
  padding: 102px 0;
  background: linear-gradient(-65deg, #1b4680 0%, #002870 53%);
  color: var(--white);
}

.corp_box {
  border: 1px solid var(--white);
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.corp_box h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
}

.corp_box p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

.cta_section {
  padding: 100px 0 50px; /* 下半分: 続く access（白）と接合 */
  background: var(--white);
}

.cta_section_inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 0;
}

.cta_banner {
  margin: 0;
  width: 100%;
  line-height: 0;
}

.cta_banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1312 / 328;
  object-fit: cover;
}

.cta_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 41px 20px 48px;
  background: var(--main-color);
  border: 1px solid var(--main-color);
  color: var(--white);
}

.cta_panel_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.cta_panel_title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 900;
  color: #ffe347;
  line-height: 1.3;
}

.cta_panel_lead {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 500;
  line-height: 1.67;
  color: var(--white);
}

.cta_panel_tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.cta_panel_tel_label {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--white);
}

.cta_panel_tel_num {
  font-family: "Outfit", sans-serif;
  font-size: clamp(40px, 6vw, 69px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.017em;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.cta_panel_hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  width: fit-content;
  max-width: 100%;
}

.cta_panel_hours > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.cta_panel_hours dt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  padding: 4px 8px;
  background: var(--white);
  color: var(--main-color);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.cta_panel_hours dd {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  color: var(--white);
}

.cta_panel_web {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 11px;
  padding: 14px 48px 14px 28px;
  background: linear-gradient(90deg, #fff034 0%, #ffef27 50%, #ffee1b 100%);
  border: 3px solid var(--main-color);
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.cta_panel_web_icon {
  position: static;
  width: 64px;
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
}

.cta_panel_web_texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--main-color);
  text-align: left;
}

.cta_hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(700px, 100%);
}

.cta_hours > div,
.access_hours > div {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cta_hours dt,
.access_hours dt {
  width: 110px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sub-color);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.cta_hours dd,
.access_hours dd {
  font-size: 18px;
  font-weight: 500;
  color: var(--sub-color);
}

.access {
  padding: 35px 0 100px; /* 上半分: 前 cta（白）と接合 */
}

.access_inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.access_map {
  height: 100%;
}

.access_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 401px;
  border: 0;
  border-radius: 8px;
}

.access_info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.access_info h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--main-color);
}

.access_info > p {
  font-size: 18px;
  color: var(--main-color);
  line-height: 1.6;
}

.access_hours {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.access_note {
  background: #eef2f8;
  padding: 25px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sub-color);
  text-align: center;
}

.footer_top {
  background: #ebf6fe;
  padding: 50px 0;
}

.footer_top_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.footer_address {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--main-color);
  font-size: 16px;
  line-height: 1.6;
}

.footer_clinic {
  font-weight: 700;
  font-size: 18px;
}

.footer_bottom {
  background: #1a3a8f;
  color: var(--white);
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
}

.float_cta {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.float_cta.is-scrolled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.float_cta.is-scrolled.is-hidden-by-access {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.float_cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 24px 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  border: 3px solid var(--main-color);
  border-right: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.float_cta_web {
  background: var(--accent-yellow);
  color: var(--main-color);
}

.float_cta_tel,
.float_cta_top {
  background: var(--white);
  color: var(--main-color);
}

.float_cta_top {
  gap: 8px;
}

.float_cta_top img {
  width: 17px;
  height: 8px;
  flex-shrink: 0;
  writing-mode: horizontal-tb;
  transition: filter 0.2s ease;
}

.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: block;
  width: 81px;
  height: 81px;
  line-height: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.page_top img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   Interactive / Hover（ポインティングデバイスのみ）
======================================== */
@media (hover: hover) {
  .header_logo:hover {
    opacity: 0.85;
  }

  .header_tel:hover {
    background: var(--main-color);
    transform: translateY(-1px);
    box-shadow: 0 8px 2px rgba(221, 221, 221, 0.9);
  }

  .header_tel:hover .header_tel_label,
  .header_tel:hover .header_tel_num {
    color: var(--white);
  }

  .header_cta:hover {
    background: var(--main-color);
    color: var(--white);
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 2px rgba(221, 221, 221, 0.9);
  }

  .cta_tel:hover,
  .cta_web:hover {
    transform: translateY(-2px);
    box-shadow: 6px 10px 0 0 rgba(0, 38, 108, 1);
  }

  .cta_web:hover {
    filter: brightness(1.03);
  }

  .cta_web:hover .cta_web_arrow {
    transform: translate(3px, -50%);
  }

  .cta_tel:active,
  .cta_web:active,
  .header_tel:active,
  .header_cta:active,
  .cta_panel_web:active {
    transform: translateY(0);
  }

  .cta_panel_tel_num:hover {
    color: var(--accent-yellow);
  }

  .cta_panel_web:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(0, 38, 108, 0.35);
  }

  .price_link:hover {
    opacity: 0.85;
    border-bottom-color: var(--white);
  }

  #faq .faq_dl dt:hover {
    background: #eef4fb;
  }

  #faq .faq_dl dd a:hover {
    color: var(--main-color);
  }

  .faq_more:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--white);
  }

  .float_cta a:hover {
    background: var(--main-color);
    color: var(--white);
  }

  .float_cta_web:hover {
    color: var(--accent-yellow);
  }

  .float_cta_top:hover img {
    filter: brightness(0) invert(1);
  }

  .page_top:hover {
    transform: scale(1.05);
    opacity: 0.92;
  }
}

/* ========================================
   SP (max-width: 798px)
======================================== */
@media (max-width: 798px) {
  .wrap {
    padding-inline: var(--sp-space-sm);
  }

  .header {
    padding: 10px 0;
  }

  .header_inner {
    padding-inline: var(--sp-space-sm);
    gap: var(--sp-space-sm);
    justify-content: flex-start;
  }

  /* SPワイヤー: ヘッダーはロゴのみ */
  .header_actions {
    display: none;
  }

  .header_logo img {
    width: 200px;
  }

  .fv_visual picture,
  .fv_visual img {
    width: 100%;
    height: auto;
  }

  .footer_top_inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-space-md);
  }

  .worry {
    gap: 0;
    padding: var(--sp-space-lg) 0 0;
    overflow-x: clip;
  }

  .worry_inner {
    gap: var(--sp-space-lg);
    padding-bottom: var(--sp-space-lg);
  }

  .worry_title,
  .case_heading,
  .sec_head_ja,
  .price_title,
  .worry2_title,
  .implant_heading,
  .corp_box h2,
  .cta_panel_title,
  .access_info h2,
  .worry_message_title {
    font-size: var(--sp-fs-title);
  }

  .sec_head_en,
  .sec_head--flow .sec_head_en {
    font-size: 36px;
  }

  .sec_head_watermark_layer {
    font-size: 64px;
  }

  .worry_list {
    gap: var(--sp-space-sm);
  }

  .worry_item {
    width: 100%;
  }

  .worry_item_content {
    padding-left: var(--sp-space-sm);
    gap: 10px;
  }

  .worry_item_icon {
    width: 28px;
    height: 28px;
  }

  .worry_item_text {
    font-size: var(--sp-fs-body-lg);
    line-height: 1.4;
  }

  .worry_item_media {
    width: 110px;
    height: 72px;
  }

  /* 画像を背景にテキストオーバーレイ */
  .worry_message {
    overflow: hidden;
  }

  .worry_message_inner {
    position: relative;
    flex-direction: column;
  }

  .worry_message_body {
    position: relative;
    z-index: 1;
    gap: var(--sp-space-sm);
    padding-block: var(--sp-space-lg) 60px;
    padding-inline: var(--sp-space-sm);
  }

  .worry_message_text {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .worry_message_media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url("../img/worry_bg_sp.webp");
    background-position: top left;
  }

  .worry_message_media::before {
    content: none;
  }

  /* SP: CTAは後段の cta_section に任せる */
  .worry_cta {
    display: none;
  }

  .cta_pair {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .cta_tel {
    padding: 30px 24px 20px;
    max-width: 600px;
    width: 100%;
}

    .cta_web {
      padding: 30px 64px 20px 20px;
      max-width: 600px;
      width: 100%;
  }

  .cta_web_inner {
    gap: 12px;
  }

  .cta_web_inner > img:not(.cta_web_texts) {
    width: 48px;
  }

  .cta_web_inner > img.cta_web_texts {
    width: min(240px, 100%);
  }

  .cta_web_arrow {
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .reason {
    padding: var(--sp-space-lg) 0;
  }

  .reason .wrap {
    gap: var(--sp-space-lg);
  }

  .reason_list {
    gap: var(--sp-space-md);
  }

  .reason_list > li:nth-child(odd),
  .reason_list > li:nth-child(even) {
    justify-content: flex-start;
  }

  .reason_card {
    max-width: none;
  }

  .reason_num,
  .reason_card--rev .reason_num {
    top: -10px;
    left: -4px;
    font-size: 40px;
    -webkit-text-stroke: 3px var(--main-color);
  }

  .reason_card_title,
  .reason_card--rev .reason_card_title {
    font-size: var(--sp-fs-sub);
    padding: 12px var(--sp-space-sm) 12px 52px;
    line-height: 1.35;
  }

  .reason_card_body {
    flex-direction: column;
  }

  .reason_card--rev .reason_card_body {
    flex-direction: column-reverse;
  }

  .reason_card_fig {
    width: 100%;
  }

  .reason_card_text {
    font-size: var(--sp-fs-body-lg);
    line-height: 1.7;
    padding: var(--sp-space-md) var(--sp-space-sm);
  }

  .case {
    padding: var(--sp-space-lg) 0;
  }

  .case .wrap,
  .case_list {
    gap: var(--sp-space-md);
  }

  .case_card {
    padding: var(--sp-space-md) var(--sp-space-sm);
    gap: var(--sp-space-md);
  }

  .case_card_title {
    font-size: var(--sp-fs-sub);
  }

  .case_photos {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--sp-space-sm);
  }

  .case_photo {
    width: 78%;
  }

  .case_photo--after {
    width: 100%;
  }

  .case_photo img {
    width: 100%;
    height: auto;
  }

  .case_photo figcaption {
    font-size: 14px;
    padding: 3px 12px;
    bottom: 8px;
    left: 6px;
  }

  .case_arrow {
    position: static;
    left: auto;
    top: auto;
    width: 32px;
    height: 32px;
    transform: rotate(90deg);
    flex-shrink: 0;
  }

  .case_meta {
    grid-template-columns: 1fr;
  }

  .case_meta_row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .case_meta_row dt {
    font-size: var(--sp-fs-body-lg);
    gap: var(--sp-space-xs);
    padding: 0 0 12px;
  }

  .case_meta_row dd {
    padding: 0 0 12px 13px;
    font-size: var(--sp-fs-body);
  }

  .case_note {
    font-size: var(--sp-fs-body);
    text-align: left;
    padding-left: 13px;
  }

  .doctor {
    padding: var(--sp-space-lg) 0;
    gap: var(--sp-space-lg);
  }

  .doctor .wrap {
    gap: var(--sp-space-md);
  }

  .doctor_profile,
  .doctor_profile--rev {
    grid-template-columns: 1fr;
  }

  .doctor_profile_media {
    order: -1;
  }

  .doctor_profile_media img {
    min-height: 0;
    height: auto;
    aspect-ratio: 756 / 621;
    object-fit: cover;
  }

  .doctor_profile_text,
  .doctor_profile--rev .doctor_profile_text {
    padding: var(--sp-space-md) 0;
    gap: 10px;
  }

  .doctor_role {
    font-size: var(--sp-fs-body);
    padding: 2px 10px;
  }

  .doctor_name {
    font-size: var(--sp-fs-title);
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
  }

  .doctor_name_en {
    font-size: 14px;
  }

  .doctor_history {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .doctor_quotes {
    bottom: var(--sp-space-sm);
    gap: 6px;
  }

  .doctor_quotes p {
    font-size: 13px;
    padding: 6px 14px;
    line-height: 1.45;
  }

  .doctor_message {
    padding: var(--sp-space-lg) 0;
  }

  .doctor_message_inner {
    gap: var(--sp-space-md);
  }

  .doctor_message_head p {
    font-size: var(--sp-fs-body-lg);
  }

  .doctor_message_head h3 {
    font-size: var(--sp-fs-title);
    letter-spacing: 0.06em;
  }

  .doctor_message_head::after {
    width: 60px;
    height: 4px;
  }

  .doctor_message_list {
    gap: var(--sp-space-md);
  }

  .doctor_message_list h4 {
    font-size: var(--sp-fs-sub);
    margin-bottom: 8px;
  }

  .doctor_message_list p {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .price {
    padding: var(--sp-space-lg) 0;
  }

  .price_inner {
    gap: var(--sp-space-lg);
  }

  .price_intro {
    padding: 0;
    gap: var(--sp-space-sm);
  }

  .price_title {
    gap: var(--sp-space-sm);
  }

  .price_panel {
    padding: var(--sp-space-md) var(--sp-space-sm);
    gap: var(--sp-space-md);
  }

  .price_panel--fees {
    gap: var(--sp-space-md);
  }

  .price_panel_deco {
    display: none;
  }

  .price_lead {
    font-size: var(--sp-fs-body-lg);
    line-height: 1.7;
  }

  .price_note {
    font-size: var(--sp-fs-body);
  }

  .price_sub {
    font-size: var(--sp-fs-title);
  }

  .price_breakdown {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--sp-space-sm);
  }

  .price_breakdown_item {
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 14px var(--sp-space-sm) 14px 18px;
    text-align: left;
    font-size: var(--sp-fs-body-lg);
    line-height: 1.5;
  }

  .price_breakdown_item br {
    display: none;
  }

  .price_breakdown_num {
    position: static;
    top: auto;
    left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .price_breakdown_item:nth-child(5) {
    width: 100%;
  }

  .price_highlights {
    grid-template-columns: 1fr;
    gap: var(--sp-space-sm);
  }

  .price_highlight {
    padding: 14px var(--sp-space-sm);
    gap: 4px;
  }

  .price_highlight_label {
    font-size: var(--sp-fs-body-lg);
  }

  .price_highlight_value strong {
    font-size: 28px;
  }

  .price_highlight_unit {
    font-size: var(--sp-fs-body-lg);
    padding-bottom: 2px;
  }

  .price_blocks {
    gap: var(--sp-space-sm);
  }

  .price_block_cat {
    padding: 12px var(--sp-space-sm);
    font-size: var(--sp-fs-body-lg);
  }

  .price_block tbody th:not(.price_block_cat),
  .price_block td {
    padding: 10px var(--sp-space-sm);
    font-size: var(--sp-fs-body);
  }

  .price_block tbody th:not(.price_block_cat) {
    background-color: #f5f8ff;
  }

  .price_block td {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .price_examples {
    grid-template-columns: 1fr;
    gap: var(--sp-space-sm);
  }

  .price_example thead th {
    font-size: var(--sp-fs-sub);
    padding: 12px var(--sp-space-sm);
  }

  .price_example tbody th,
  .price_example tbody td {
    padding: 12px var(--sp-space-sm);
    font-size: var(--sp-fs-body);
  }

  .price_example tbody th {
    width: 55%;
    background-color: #f5f8ff;
  }

  .price_example tbody td {
    width: 45%;
  }

  .price_loan_cards {
    grid-template-columns: 1fr;
    gap: var(--sp-space-md);
  }

  .price_loan_head {
    padding: 14px var(--sp-space-sm);
    gap: 6px;
  }

  .price_loan_title {
    font-size: var(--sp-fs-sub);
  }

  .price_loan_note {
    font-size: 13px;
  }

  .price_loan_card {
    min-height: 0;
  }

  .price_loan_card_top {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .price_loan_card_brand {
    justify-content: center;
    flex-direction: column;
  }

  .price_loan_times {
    align-self: center;
  }

  .price_loan_label {
    font-size: var(--sp-fs-sub);
  }

  .price_loan_amount strong {
    font-size: 36px;
  }

  .price_loan_amount span {
    font-size: 20px;
  }

  .price_loan_card_brand img.price_loan_card_logo--epos {
    width: 88px;
    height: 32px;
  }

  .price_deduction {
    padding: var(--sp-space-md) var(--sp-space-sm);
    gap: var(--sp-space-sm);
  }

  .price_deduction_title {
    font-size: var(--sp-fs-title);
  }

  .price_deduction_text {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .price_formula {
    font-size: 14px;
    line-height: 1.8;
    padding: var(--sp-space-sm);
  }

  .price_formula span {
    font-size: 12px;
  }

  .price_link_wrap {
    align-self: stretch;
  }

  .price_link {
    font-size: 14px;
  }

  .flow {
    padding: var(--sp-space-lg) 0;
  }

  .flow .wrap {
    gap: var(--sp-space-lg);
  }

  .sec_head--flow {
    align-items: center;
    text-align: center;
  }

  .sec_head--flow .sec_head_en_wrap {
    justify-content: center;
  }

  .sec_head--flow .sec_head_watermark {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .sec_head--flow .sec_head_lead {
    font-size: 14px;
  }

  .flow_list {
    gap: var(--sp-space-sm);
  }

  /* アイコン 72px の中心（36px）− ライン半幅（2.5px） */
  .flow_list::before {
    left: 33.5px;
    top: 60px;
    bottom: 28px;
  }

  .flow_item {
    padding: 0;
    gap: var(--sp-space-sm);
  }

  .flow_icon {
    width: 72px;
    height: 72px;
    margin-top: 14px;
    padding: 8px 10px;
  }

  .flow_icon .flow_num {
    width: 30px;
    top: -8px;
  }

  .flow_icon img:not(.flow_num) {
    max-width: 40px;
    max-height: 44px;
  }

  .flow_body h3 {
    font-size: var(--sp-fs-sub);
  }

  .flow_body p {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .flow_arrow {
    width: 20px;
    height: 20px;
    align-self: center;
    margin-left: 0;
  }

  .flow_main {
    align-items: flex-start;
    gap: 12px;
  }

  .faq {
    padding: var(--sp-space-lg) 0 var(--sp-space-sm); /* 下半分: about と接合 */
  }

  .faq .wrap {
    gap: var(--sp-space-lg);
  }

  #faq .faq_dl {
    gap: var(--sp-space-sm);
  }

  .faq_more_panel.is-open {
    margin-top: var(--sp-space-sm);
  }

  #faq .faq_dl .inner {
    border-width: 2px;
  }

  #faq .faq_dl dt {
    gap: 10px;
    padding: var(--sp-space-sm);
    font-size: var(--sp-fs-body-lg);
  }

  #faq .faq_dl dt::before {
    font-size: 22px;
  }

  #faq .faq_dl .btn {
    margin-top: 4px;
  }

  #faq .faq_dl dd > .faq_a > .faq_a_body {
    gap: 10px;
    padding: var(--sp-space-sm);
    font-size: var(--sp-fs-body);
  }

  .faq_more {
    padding: var(--sp-space-sm) var(--sp-space-md);
    font-size: var(--sp-fs-body-lg);
  }

  #faq .faq_dl dd > .faq_a > .faq_a_body::before {
    font-size: 22px;
  }

  .about {
    /* 上下とも半分: faq / worry2 と接合 */
    padding: var(--sp-space-sm) 0;
  }

  .about_inner {
    gap: var(--sp-space-lg);
  }

  .about_grid,
  .access_inner {
    grid-template-columns: 1fr;
  }

  .about_grid {
    gap: var(--sp-space-md);
  }

  .about_catch {
    font-size: 18px;
  }

  .about_text {
    gap: var(--sp-space-sm);
    font-size: var(--sp-fs-body-lg);
  }

  .worry2 {
    padding: var(--sp-space-sm) 0 var(--sp-space-lg); /* 上半分: about と接合 */
  }

  .worry2 .wrap {
    gap: var(--sp-space-lg);
  }

  .worry2_title {
    font-size: 24px;
    line-height: 1.6;
  }

  .worry2_em > span {
    padding-top: 0.24em;
  }

  .worry2_em > span::before {
    width: 0.15em;
    height: 0.15em;
  }

  .worry2_list {
    grid-template-columns: repeat(2, auto);
    gap: var(--sp-space-md) 24px;
    width: fit-content;
    max-width: 100%;
  }

  .worry2_list li {
    gap: 12px;
    font-size: 18px;
  }

  .worry2_avatar {
    width: 120px;
    height: 120px;
    border-width: 5px;
  }

  .implant_block {
    padding: var(--sp-space-sm);
    gap: var(--sp-space-sm);
  }

  .implant,
  .implant_pros {
    padding: var(--sp-space-lg) 0;
  }

  .implant_diff {
    padding: var(--sp-space-md) 0;
  }

  .implant .wrap,
  .implant_diff .wrap,
  .implant_pros .wrap {
    gap: var(--sp-space-lg);
  }

  .implant_heading {
    gap: var(--sp-space-sm);
  }

  .implant_intro {
    gap: var(--sp-space-md);
    padding: var(--sp-space-sm) 0;
  }

  .implant_intro_head {
    gap: 12px;
  }

  .implant_en {
    font-size: 28px;
  }

  .implant_sub {
    font-size: var(--sp-fs-title);
  }

  .implant_lead_frame {
    border-width: 2px;
  }

  .implant_lead_frame .implant_lead,
  .implant_lead {
    padding: var(--sp-space-sm);
    border-width: 2px;
    font-size: var(--sp-fs-sub);
    line-height: 1.6;
  }

  .implant_lead_sub {
    font-size: var(--sp-fs-body-lg);
  }

  .implant_lead_mark::before {
    height: 10px;
  }

  .implant_deco {
    display: none;
  }

  .implant_block .implant_label,
  .implant_label {
    font-size: var(--sp-fs-sub);
    padding: 0 10px;
  }

  .implant_body {
    gap: var(--sp-space-sm);
    padding: 0;
  }

  .implant_body p {
    font-size: var(--sp-fs-body-lg);
  }

  .diff_list {
    gap: var(--sp-space-md);
  }

  .diff_card {
    border-width: 2px;
  }

  .diff_card h3 {
    font-size: var(--sp-fs-title);
    padding: 12px var(--sp-space-sm);
  }

  .diff_card_body {
    flex-direction: column;
    gap: var(--sp-space-sm);
    padding: var(--sp-space-sm);
  }

  .diff_card_body p {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .diff_card_body img {
    width: min(209px, 70%);
    margin-inline: auto;
  }

  .pros_box,
  .cons_box {
    border-width: 5px;
    padding: var(--sp-space-lg) var(--sp-space-sm) var(--sp-space-sm);
    gap: var(--sp-space-md);
  }

  .pros_box .implant_label,
  .cons_box .implant_label {
    top: -22px;
    left: -5px;
  }

  .pros_list {
    grid-template-columns: 1fr;
    gap: var(--sp-space-sm);
  }

  .pros_list li {
    border-width: 3px;
    padding: var(--sp-space-sm);
    gap: 12px;
  }

  .pros_list h4 {
    gap: 10px;
    min-height: 0;
    font-size: var(--sp-fs-body-lg);
  }

  .pros_list h4::before {
    width: 28px;
    height: 28px;
  }

  .pros_list p {
    font-size: var(--sp-fs-body);
  }

  .cons_box ul {
    font-size: var(--sp-fs-sub);
    gap: 10px;
  }

  .corp {
    padding: var(--sp-space-lg) 0;
  }

  .corp_box {
    padding: var(--sp-space-md) var(--sp-space-sm);
    gap: var(--sp-space-sm);
  }

  .corp_box p {
    font-size: var(--sp-fs-body);
    line-height: 1.8;
  }

  .cta_section {
    padding: var(--sp-space-lg) 0 var(--sp-space-sm); /* 下半分: access と接合 */
  }

  .cta_section_inner {
    gap: var(--sp-space-sm);
  }

  .cta_panel {
    padding: var(--sp-space-md) var(--sp-space-sm) var(--sp-space-lg);
    gap: var(--sp-space-sm);
  }

  .cta_panel_head {
    gap: 6px;
  }

  .cta_panel_lead {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .cta_panel_tel_label {
    font-size: var(--sp-fs-body-lg);
  }

  .cta_panel_tel_num {
    font-size: 40px;
  }

  .cta_panel_hours {
    width: 100%;
    gap: 8px;
  }

  .cta_panel_hours > div {
    align-items: flex-start;
    gap: 10px;
  }

  .cta_panel_hours dt {
    width: 72px;
    font-size: 12px;
    padding: 4px;
  }

  .cta_panel_hours dd {
    font-size: 13px;
    line-height: 1.6;
  }

  .cta_panel_web {
    width: 100%;
    max-width: 360px;
    margin-top: 4px;
    padding: 12px 20px;
    gap: 12px;
    border-width: 2px;
  }

  .cta_panel_web_icon {
    width: 52px;
  }

  .cta_panel_web_texts {
    font-size: 20px;
    gap: 2px;
  }

  .access {
    padding: var(--sp-space-sm) 0 var(--sp-space-lg); /* 上半分: cta と接合 */
  }

  .access_inner {
    gap: var(--sp-space-lg);
  }

  .access_map iframe {
    min-height: 240px;
    height: 240px;
  }

  .access_info {
    gap: var(--sp-space-sm);
  }

  .access_info > p {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .access_hours {
    gap: 10px;
  }

  .access_hours > div {
    align-items: flex-start;
    gap: 12px;
  }

  .access_hours dt {
    width: 72px;
    height: auto;
    min-height: 32px;
    padding: 4px 6px;
    font-size: 13px;
  }

  .access_hours dd {
    font-size: var(--sp-fs-body);
    line-height: 1.6;
  }

  .access_note {
    font-size: var(--sp-fs-body);
    padding: 12px var(--sp-space-sm);
  }

  .footer_top {
    padding: var(--sp-space-lg) 0;
  }

  .footer_top_inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-space-md);
  }

  .footer_top_inner img {
    width: min(280px, 100%);
    height: auto;
    margin-inline: auto;
  }

  .footer_address {
    font-size: var(--sp-fs-body);
    line-height: 1.7;
  }

  .footer_clinic {
    font-size: var(--sp-fs-body-lg);
  }

  .footer_bottom {
    padding: 14px var(--sp-space-sm);
    font-size: 12px;
  }

  .float_cta {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: row;
    gap: 0;
    z-index: 90;
    background: var(--white);
  }

  .float_cta a.float_cta_top {
    display: none;
  }

  .float_cta a {
    flex: 1;
    width: auto;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0));
    border: none;
    border-top: 2px solid var(--main-color);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: 0.06em;
    font-size: 15px;
    line-height: 1.3;
  }

  .float_cta a.float_cta_tel {
    border-left: 1px solid var(--main-color);
  }

  .page_top {
    right: 12px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0));
    width: 56px;
    height: 56px;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
}

@media (min-width: 799px) {
  .header_inner {
    padding-inline: 50px;
  }
}

/* 1000px以下〜SP手前: ヘッダーボタンをコンパクトに */
@media (max-width: 1000px) and (min-width: 799px) {
  .header_inner {
    padding-inline: 24px;
    gap: 12px;
  }

  .header_logo img {
    width: min(220px, 28vw);
  }

  .header_actions {
    gap: 10px;
  }

  .header_tel {
    width: 200px;
    padding: 8px 14px;
    box-shadow: 0 5px 1px rgba(221, 221, 221, 0.85);
  }

  .header_tel_label {
    font-size: 11px;
  }

  .header_tel_num {
    font-size: 18px;
  }

  .header_cta {
    width: 200px;
    height: 58px;
    font-size: 14px;
    box-shadow: 0 5px 1px rgba(221, 221, 221, 0.85);
  }
}

/* 1000px以下: 治療費テーブルを縦並び（フォントサイズは維持） */
@media (max-width: 1000px) {
  .worry2_list {
    grid-template-columns: repeat(2, auto);
    gap: 40px 24px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .price_block,
  .price_block tbody,
  .price_block tr,
  .price_block th,
  .price_block td {
    display: block;
    width: 100%;
  }

  .price_block {
    border: none;
  }

  .price_block_cat {
    width: 100%;
    border: 1px solid #d9d9d9;
  }

  .price_block tbody th:not(.price_block_cat),
  .price_block td {
    width: 100%;
    box-sizing: border-box;
  }

  .price_block td {
    text-align: left;
    border-top: none;
  }
}

/* 1080px以下: ABOUT を縦並び */
@media (max-width: 1080px) {
  .about_grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 480px) {
  .u-br-480 {
    display: block;
  }

  /* 奥歯1本 / 2本の料金例テーブル内を縦積み */
  #price .price_examples .price_example,
  #price .price_examples .price_example thead,
  #price .price_examples .price_example tbody,
  #price .price_examples .price_example tr,
  #price .price_examples .price_example th,
  #price .price_examples .price_example td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #price .price_examples .price_example tbody th {
    padding-bottom: 14px;
    border-bottom: none;
  }

  #price .price_examples .price_example tbody td {
    text-align: left;
    padding-top: 14px;
    padding-bottom: 14px;
    font-weight: 700;
    white-space: normal;
  }

  .price_loan_first {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}