@charset "utf-8";


/* =========================================================
   ファーストビュー（基本＝PCデザイン）
========================================================= */

.fv-inner {
  width: 100%;
  background-image: url("../images/fv-pc.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  padding-bottom: 15px;
}

/* 上部：ロゴ＋コピー */
h1 {
  color: #000;
  font-family: "Shippori Mincho";
  font-size: 1.0rem;
  font-style: normal;
  line-height: normal;
  padding: 14px 1.9% 0;
}

.fv-logo img {
  display: block;
  height: 98px;
  width: auto;
  padding-left: 0.7%;
}

/* メインエリア */
.fv-main {
  position: relative;
  top: 2%;
}

/* 金のリボン */
.fv-ribbon {
  background: linear-gradient(90deg,
    rgba(191, 154, 84, 0.90) 0%,
    rgba(221, 189, 116, 0.90) 25%,
    rgba(192, 162, 102, 0.90) 50%,
    rgba(221, 189, 116, 0.90) 75%,
    rgba(161, 136, 56, 0.90) 100%);
  padding: 10px;
  color: #F5F5F5;
  font-size: 3.2rem;
  line-height: normal;
  margin-top: 57px;
  letter-spacing: 2px;
  text-align: start;
  max-width: 640px;
}

.fv-ribbon span {
  color: #F5F5F5;
  font-size: 2.4rem;
  font-style: normal;
  line-height: normal;
}

/* メインコピー */
.fv-main-copy {
  color: #175899;
  text-shadow: 0 4px 6px #FFF;
  font-family: "Shippori Mincho";
  font-size: 6.4rem;
  line-height: normal;
  margin-top: 67px;
  padding-left: 1.4%;
  white-space: nowrap;
}

/* サブコピー（PC） */
.fv-sub-copy-summary {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 50px;
}

.fv-sub-copy {
  padding: 10px 20px;
  background: rgba(255, 254, 254, 0.90);
  color: var(--black, #091B2C);
  font-size: 2.4rem;
  line-height: normal;
  letter-spacing: 0.1em;
}

.fv-sub-copy span {
  color: var(--blue, #5B89D0);
  font-family: "Shippori Mincho";
  font-size: 3.2rem;
  line-height: normal;
}

/* features（PC） */
.fv-features {
  position: absolute;
  right: 4%;
  bottom: -2%;
  width: 45%;
  max-width: 742px;
}

.fv-features img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP用サブコピーはPCでは非表示 */
.fv-sub-copy-summary-sp {
  display: none;
}

@media (min-width: 1920px) {
	.fv-features img {
		width:68%;
	}
	.fv-features {
		right:31%;
	}
}

/* =========================================================
  484px〜1024px：PC背景 + 縮小（タブレット設計）
========================================================= */

@media screen and (min-width: 484px) and (max-width: 1024px) {

  .spbr {
    display: block;
  }

  /* メインエリア */
  .fv-main {
    position: relative;
    top: 2%;
  }

  /* 金のリボン */
  .fv-ribbon {
    padding: 5px 10px;
    font-size: 1.6rem;
    margin-top: 60px;
    letter-spacing: 0.1px;
    max-width: 296px;
  }

  .fv-ribbon span {
    font-size: 1.4rem;
  }

  /* メインコピー */
  .fv-main-copy {
    font-size: 3.2rem;
    margin-top: 21px;
    padding-left: 1.4%;
    white-space: nowrap;
  }

  /* サブコピー切替：SP用を表示、PC用を非表示 */
  .fv-sub-copy-summary {
    display: none;
  }

  .fv-sub-copy-summary-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    background: rgba(255, 254, 254, 0.90);
    max-width: 400px;
  }

  .fv-sub-copy-sp {
    padding: 3px;
    color: #091B2C;
    font-size: 1.6rem;
    line-height: normal;
    letter-spacing: 0.1em;
  }

  .fv-sub-copy-sp span {
    color: var(--blue, #5B89D0);
    font-size: 2.0rem;
    line-height: normal;
  }

  .fv-sub-copy-sp img {
    max-width: 40px;
  }

  /* featuresはPC配置のまま */
  .fv-features {
    right: 4%;
    bottom: 10px;
    width: 45%;
    max-width: 742px;
    left: auto;
    transform: none;
  }
}


/* =========================================================
  スマホ：〜483px（SP背景 + aspect-ratio）
========================================================= */

@media screen and (max-width: 483px) {

  .fv-inner {
    position: relative;
    width: 100%;
    background-image: url("../images/fv-sp.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    aspect-ratio: 375 / 616;
    height: auto;

    padding-bottom: 0;
    overflow: hidden;
  }

  .fv-main {
    position: static;
    margin-top: 40px;
    top: auto;
  }

  .spbr {
    display: block;
  }

  /* 上部：ロゴ＋コピー */
  h1 {
    color: #F5F5F5;
    font-size: 0.8rem;
    padding: 14px 1.9% 0;
  }

  .fv-logo img {
    display: block;
    height: 32px;
    width: auto;
    padding-left: 0.7%;
    margin-top: 10px;
  }

  /* 金のリボン */
  .fv-ribbon {
    padding: 5px 10px;
    font-size: 1.6rem;
    margin-top: 60px;
    letter-spacing: 0.1px;
    max-width: 296px;
  }

  .fv-ribbon span {
    font-size: 1.4rem;
  }

  /* メインコピー */
  .fv-main-copy {
    font-size: 2.4rem;
    margin-top: 21px;
    padding-left: 1.4%;
    white-space: nowrap;
  }

  /* サブコピー：SP用表示 */
  .fv-sub-copy-summary {
    display: none;
  }

  .fv-sub-copy-summary-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    background: rgba(255, 254, 254, 0.90);
    max-width: 285px;
  }

  .fv-sub-copy-sp {
    padding: 3px;
    color: #091B2C;
    font-size: 1.2rem;
    line-height: normal;
    letter-spacing: 0.1em;
  }

  .fv-sub-copy-sp span {
    color: var(--blue, #5B89D0);
    font-size: 1.4rem;
    line-height: normal;
  }

  .fv-sub-copy-sp img {
    max-width: 40px;
  }

  /* features：SP配置（中央固定） */
  .fv-features {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;

    width: 100%;
    max-width: 375px;

    right: auto;
    top: auto;
  }

  .fv-features img {
    display: block;
    width: 100%;
    height: auto;
  }
}



/* ===== 海外でも認定されている実績のある医院です ===== */
.overseas {
    width: 100%;
    background-image: url("../images/overseas-track-record.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}

.overseas-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 40px;
}

.overseas-text {
    max-width: 816px;
}

/* 見出し */
.overseas-title {
    color: #091B2C;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    font-family: "Shippori Mincho";
    font-size: 3.6rem;
    font-style: normal;
    line-height: normal;
}

.overseas-title span {
    color: #C2A95C;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    font-family: "Shippori Mincho";
    font-size: 3.6rem;
    font-style: normal;
    line-height: normal;
}

/* 見出しの下のライン */
.overseas-title-line {
    width: 88%;
    height: 1px;
    background-color: #C2A95C;
    margin-bottom: 24px;
    margin-top: 10px;
}

/* テキスト部分 */
.overseas-lead,
.overseas-body {
    margin: 0 0 8px;
    font-size: 1.6rem;
    line-height: normal;
    color: #091B2C;
}

.overseas-link {
    color: #2b5aa8;
    text-decoration: underline;
}

.overseas-lead span {
    color: #5B89D0;
}

.overseas-body span {
    color: #175899;
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .overseas {
        background-image: url("../images/overseas-track-record-sp.png");
    }

    .overseas-inner {
        width: 100%;
        padding: 40px 5.9%;
        background: linear-gradient(to right,
                rgba(255, 255, 255, 25%) 0%,
                rgba(255, 255, 255, 16%) 45%,
                rgba(255, 255, 255, 0.0) 100%);
    }

    .overseas-text {
        width: 100%;
        margin: 0 auto;
		background-color: #ffffffde;
    }

    /* 見出し */
    .overseas-title {
        font-size: 2.4rem;
        text-align: center;
    }

    .overseas-title span {
        font-size: 2.4rem;
    }

    /* 見出しの下のライン */
    .overseas-title-line {
        width: 88%;
        height: 1px;
        background-color: #C2A95C;
        margin-bottom: 24px;
        margin-top: 10px;
    }

    /* テキスト部分 */
    .overseas-lead,
    .overseas-body {
        margin: 0 0 8px;
        font-size: 1.6rem;
        line-height: normal;
        color: #091B2C;
    }

    .overseas-link {
        color: #2b5aa8;
        text-decoration: underline;
    }

    .overseas-lead span {
        color: #5B89D0;
    }

    .overseas-body span {
        color: #175899;
    }

}

/* ===== ノーベルバイオケア認定 ===== */
.nobel {
  width: 100%;
  padding: 90px 0;
  background-color: #F8FCFF;

  background-image: url(../images/professional-doctor.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;

  /* ここが重要：背景画像(1440×670)が100%表示される最低高さを確保 */
  min-height: 46.53vw; /* 670 / 1440 * 100 */
}

.nobel-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.nobel-text {
    margin: 0 auto;
    background: rgba(255, 254, 254, 0.50);
    max-width: 860px;
    padding: 20px 0;
}

/* 上部テキスト */
.nobel-lead {
    margin: 0 0 12px;
    color: #091B2C;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 2.4rem;
    font-style: normal;
    line-height: normal;
}

.nobel-main {
    color: #091B2C;
    text-align: center;
    font-size: 3.6rem;
    font-style: normal;
    line-height: normal;
}

.nobel-main span {
    color: #C2A95C;
}

/* 「プロフェッショナルな医師が在籍」下に金色帯 */
.nobel-sub {
    position: relative;
    margin: 0 0 32px;
    padding: 0 4px;
    font-size: 3.6rem;
    line-height: normal;
    color: #1a2640;
    z-index: 1;
    text-align: center;
}

.nobel-sub span {
    color: var(--black, #091B2C);
    font-size: 3.6rem;
    font-style: normal;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(194, 169, 92, 0.50);
    text-decoration-thickness: 50%;
    text-underline-offset: -35%;
    text-underline-position: from-font;
}

/* 白いパネル部分 */
.nobel-panel {
    background: rgba(255, 255, 255, 0.94);
    padding: 32px 48px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
    max-width: 673px;
    margin: 0 auto;
}

/* チェック付きリスト */
.nobel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nobel-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
    font-size: 2.8rem;
    line-height: 1.9;
    color: #091B2C;
}

/* check.png をアイコンとして表示 */
.nobel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 24px;
    height: 24px;
    background-image: url("../images/check.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 4px;
}

/* 最後の行だけ余白なし */
.nobel-list li:last-child {
    margin-bottom: 0;
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .nobel {
        padding: 65px 0;
        width: 100%;
    }

    .nobel-inner {
        max-width: 370px;
        padding: 0 2px;
    }

    .nobel-text {
        max-width: 370px;
    }

    /* 上部テキスト */
    .nobel-lead {
        margin: 0 0 12px;
        font-size: 1.5rem;
        line-height: normal;
    }

    .nobel-main {
        font-size: 2.0rem;
    }

    .nobel-main span {
        color: #C2A95C;
        font-size: 2.0rem;
    }

    /* 「プロフェッショナルな医師が在籍」下に金色帯 */
    .nobel-sub {
        font-size: 2.0rem;
    }

    .nobel-sub span {
        font-size: 2.0rem;
    }

    /* 白いパネル部分 */
    .nobel-panel {
        padding: 20px;
        max-width: 341px;
    }

    .nobel-list li {
        padding-left: 20px;
        font-size: 1.6rem;
    }

    /* check.png をアイコンとして表示 */
    .nobel-list li::before {
        top: 0.;
        width: 18px;
        height: 18px;
        margin-top: 0px;
    }

    /* 最後の行だけ余白なし */
    .nobel-list li:last-child {
        margin-bottom: 0;
    }
}

/* =========================
   クリニックの強みセクション
   ========================= */
.clinic-strengths {
    width: 100%;
    background: linear-gradient(180deg, #F8FCFF 5.9%, #FFF 95.13%);
    /* 新しい背景 */
    padding: 60px 0;
}

.clinic-strengths-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 0 20px;
}

.clinic-strength {
    border: 1px solid var(--navy, #175899);
    background: #F8FCFF;
    box-shadow: 0 4px 4px 0 rgba(23, 88, 153, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding: 20px;
}

.clinic-strength-image {
    width: 100%;
    object-fit: cover;
}


.clinic-strength h3 {
    color: #175899;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 20px;
    font-style: normal;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(194, 169, 92, 0.50);
    text-decoration-thickness: 5%;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    margin: 20px 0;
}

.clinic-strength p {
    color: #000;
    font-size: 1.6rem;
    font-style: normal;
    line-height: 23px;
    /* 143.75% */
    text-align: start;
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .clinic-strengths {
        width: 100%;
        padding: 20px 4.5%;
    }

    .clinic-strengths-inner {
        max-width: 362px;
        display: block;
        padding: 0;
    }

    .clinic-strength {
        gap: 0;
        padding: 20px;
        margin-bottom: 40px;
    }

    .clinic-strength-image {
        height: auto;
    }

}

/* =========================
   東京以外からの来院セクション
   ========================= */
.outside-tokyo {
    width: 100%;
    background: url(../images/outside-tokyo-back.png) no-repeat top center / 100%, #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 60px 1.8%;
    position: relative;
}

.outside-tokyo-inner {
    background: rgba(228, 237, 245, 0.42);
}

/* タイトル */
.outside-tokyo-title {
    background: linear-gradient(90deg, rgba(191, 154, 84, 0.90) 0%, rgba(221, 189, 116, 0.90) 25%, rgba(192, 162, 102, 0.90) 50%, rgba(221, 189, 116, 0.90) 75%, rgba(161, 136, 56, 0.90) 100%);
    color: #F5F5F5;
    font-size: 3.2rem;
    font-style: normal;
    line-height: normal;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 2px 10px;
    text-align: center;
}

.outside-tokyo-title span {
    font-size: 4.0rem;
}

/* コンテンツ部分 */
.outside-tokyo-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outside-tokyo-left {
    /* flex: 1; */
    padding-left: 50px;
}

.outside-tokyo-left img {
    max-width: 387px;
    height: auto;
}

/* .outside-tokyo-right {
    flex: 2;
} */

.outside-tokyo-subtitle-pc {
    color: #000;
    text-align: center;
    font-size: 3.2rem;
    font-style: normal;
    line-height: normal;
    margin-bottom: 40px;
}

.outside-tokyo-subtitle-pc span {
    color: #C2A95C;
}

.details-box {
    display: grid;
    grid-template-columns: 7.8em 1fr;
    max-width: 540px;
    margin: 20px auto;
}

.details-box dt {
    font-size: 2.0rem;
    background: #175899;
    color: #fff;
    text-align: center;
}

.details-box dt i {
    font-size: 3.2rem;
}

.details-box dd {
    position: relative;
    color: #091B2C;
    text-align: start;
    font-size: 2.4rem;
    font-style: normal;
    line-height: normal;
    background: #FFFEFE;
    padding-left: 1.5em;
    padding-right: 1em;
    white-space: nowrap;
}

.details-box dd:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    aspect-ratio: 1/2;
    left: -1px;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 1px 100%, 0 100%);
    background-color: #175899;
}


.outside-tokyo-bottom {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-right: 50px;
}

.outside-tokyo-bottom img {
    max-width: 100%;
    height: auto;
}

.outside-tokyo-sp {
    display: none;
}

.outside-tokyo-subtitle-sp {
    display: none;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .outside-tokyo {
        width: 100%;
        background-image: url("../images/outside-tokyo-back-sp.png");
        padding: 36px 1.8%;
    }

    /* タイトル */
    .outside-tokyo-title {
        font-size: 2.4rem;
        max-width: 570px;
        width: 100%;
    }

    .outside-tokyo-title span {
        font-size: 3.6rem;
    }

    /* コンテンツ部分 */
    .outside-tokyo-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .outside-tokyo-sp {
        display: block;
    }

    .outside-tokyo-sp img {
        display: block;
        margin: 0 auto;
    }

    .outside-tokyo-left {
        display: none;
    }

    .outside-tokyo-right {
        margin-top: 30px;
    }

    .outside-tokyo-subtitle-pc {
        display: none;
    }

    .outside-tokyo-subtitle-sp {
        display: block;
    }

    .outside-tokyo-subtitle-sp {
        color: #000;
        text-align: center;
        font-style: normal;
        line-height: normal;
        font-size: 2.4rem;
        margin-bottom: 5px;
    }

    .outside-tokyo-subtitle-sp span {
        font-size: 3.2rem;
        color: #C2A95C;
    }

    .details-box {
        display: grid;
        grid-template-columns: 3.8em 1fr;
        max-width: 341px;
        margin: 20px auto;
    }

    .details-box dt {
        font-size: 1.3rem;
        background: #175899;
        color: #fff;
        text-align: center;
    }

    .details-box dt i {
        font-size: 2.0rem;
    }

    .details-box dd {
        position: relative;
        color: #091B2C;
        text-align: start;
        font-size: 2.0rem;
        font-style: normal;
        line-height: normal;
        background: #FFFEFE;
        padding-left: 1.5em;
        padding-right: 1em;
        white-space: nowrap;
    }

    .details-box dd:before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        aspect-ratio: 1/2;
        left: -1px;
        top: 0;
        clip-path: polygon(0 0, 100% 0, 1px 100%, 0 100%);
        background-color: #175899;
    }


    .outside-tokyo-bottom {
        display: none;
    }

}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .outside-tokyo {
        width: 100%;
        background-image: url("../images/outside-tokyo-back-sp.png");
        padding: 36px 1.8%;
    }

    /* タイトル */
    .outside-tokyo-title {
        font-size: 1.6rem;
        max-width: 340px;
        width: 100%;
    }

    .outside-tokyo-title span {
        font-size: 2.4rem;
    }

    /* コンテンツ部分 */
    .outside-tokyo-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .outside-tokyo-sp {
        display: block;
    }

    .outside-tokyo-sp img {
        display: block;
        margin: 0 auto;
    }

    .outside-tokyo-left {
        display: none;
    }

    .outside-tokyo-right {
        margin-top: 30px;
    }

    .outside-tokyo-subtitle-pc {
        display: none;
    }

    .outside-tokyo-subtitle-sp {
        display: block;
    }

    .outside-tokyo-subtitle-sp {
        color: #000;
        text-align: center;
        font-style: normal;
        line-height: normal;
        font-size: 2.0rem;
        margin-bottom: 5px;
    }

    .outside-tokyo-subtitle-sp span {
        font-size: 2.4rem;
        color: #C2A95C;
    }

    .details-box {
        display: grid;
        grid-template-columns: 3.8em 1fr;
        max-width: 341px;
        margin: 20px auto;
    }

    .details-box dt {
        font-size: 1.3rem;
        background: #175899;
        color: #fff;
        text-align: center;
    }

    .details-box dt i {
        font-size: 2.0rem;
    }

    .details-box dd {
        position: relative;
        color: #091B2C;
        text-align: start;
        font-size: 1.5rem;
        font-style: normal;
        line-height: normal;
        background: #FFFEFE;
        padding-left: 1.5em;
        padding-right: 1em;
        white-space: nowrap;
    }

    .details-box dd:before {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        aspect-ratio: 1/2;
        left: -1px;
        top: 0;
        clip-path: polygon(0 0, 100% 0, 1px 100%, 0 100%);
        background-color: #175899;
    }


    .outside-tokyo-bottom {
        display: none;
    }


}

/* ===== 外科+歯周病+麻酔全てに精通したドクターによる総合インプラント治療 ===== */
.comprehensive-implant {
    background: url(../images/comprehensive-implant-back-pc.png) no-repeat top center / 100%, #fff;
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    font-family: "Shippori Mincho", serif;
    color: #333;
}

.comprehensive-implant-image-sp {
    display: none;
}

.comprehensive-implant-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.comprehensive-implant-unit h2 {
    color: #FFFEFE;
    font-size: 3.2rem;
    font-style: normal;
    line-height: normal;
    white-space: nowrap;
}

.comprehensive-implant-unit h2 span {
    font-size: 4.0rem;
}

.comprehensive-implant-image-pc {
    display: flex;
    justify-content: center;
}

.comprehensive-implant-image-pc img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.comprehensive-implant-text {
    display: flex;
    padding: 40px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    background: #FFF;
    margin-top: 60px;
    max-width: 740px;
    width: 100%;
}

.comprehensive-text {
    color: #000;
    font-size: 1.6rem;
}

.comprehensive-text .blue-line {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(139, 193, 248, 0.40);
    text-decoration-thickness: 40%;
    text-underline-offset: -30%;
    text-underline-position: from-font;
}

.comprehensive-text .yellow-line {
    font-size: 2.0rem;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(221, 189, 116, 0.40);
    text-decoration-thickness: 40%;
    text-underline-offset: -30%;
    text-underline-position: from-font;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .comprehensive-implant {
        background: url(../images/comprehensive-implant-back-sp.png) no-repeat top center / 100%, #fff;
        padding: 46px 2.9%;
    }

    .comprehensive-implant-image-sp {
        display: block;
        max-width: 350px;
        margin: 0 auto;
    }

    .comprehensive-implant-image-pc {
        display: none;
    }

    .comprehensive-implant-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        padding: 0 4.5%;
    }

    .comprehensive-implant-unit h2 {
        font-size: 3.2rem;
    }

    .comprehensive-implant-unit h2 span {
        font-size: 4.0rem;
    }

    .comprehensive-implant-text {
        margin: 5px auto;
        max-width: 570px;
        width: 100%;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {

    .comprehensive-implant {
        background: url(../images/comprehensive-implant-back-sp.png) no-repeat top center / 100%, #fff;
        padding: 46px 2.9%;
    }

    .comprehensive-implant-image-sp {
        display: block;
        max-width: 350px;
        margin: 0 auto;
    }

    .comprehensive-implant-image-pc {
        display: none;
    }

    .comprehensive-implant-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        padding: 0 4.5%;
    }

    .comprehensive-implant-unit h2 {
        font-size: 2.0rem;
    }

    .comprehensive-implant-unit h2 span {
        font-size: 2.4rem;
    }

    .comprehensive-implant-text {
        margin: 5px auto;
        max-width: 570px;
        width: 100%;
    }


}
/* ===== 歯周病専門医による「歯を守る」インプラント治療 ===== */
.periodontist-assisted-implants {
    background-image: url(../images/periodontist-back-pc.png);
    width: 100%;
    padding: 60px 0%;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

.periodontist-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    max-width: 1360px;
    margin: 0 auto;
    gap: 30px;
}



.periodontist-img-sponly {
    display: none;
}

.periodontist-title {
    color: #FFFEFE;
    font-size: 4.0rem;
    line-height: normal;
}

.underline-dot {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 10.5%;
    /* 4.2px */
    text-underline-offset: 25%;
    /* 10px */
    text-underline-position: from-font;
}

.gold-grd {
    background: radial-gradient(50% 50% at 50% 50%, #BF9A54 0%, rgba(221, 189, 116, 0.95) 25%, #C0A266 50%, #DDBD74 75%, #A18838 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6.4rem;
    line-height: normal;
}

.periodontist-text {
    color: #091B2C;
    font-size: 1.6rem;
    line-height: 30px;
    background: rgba(255, 254, 254, 0.80);
    padding: 15px;
    margin-top: 20px;
}

.periodontist-text span {
    color: #175899;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .periodontist-assisted-implants {
        background-image: url(../images/periodontist-back-sp.png);
        padding: 60px 4.2%;
    }

    .periodontist-unit {
        display: block;
    }

    .periodontist-img-sponly {
        display: block;
    }

    .periodontist-img-sponly img {
        margin: 0 auto;
    }

    .periodontist-img-pconly {
        display: none;
    }


    .periodontist-title {
        font-size: 3.2rem;
        text-align: center;
        margin-bottom: 25px;
    }


    .gold-grd {
        font-size: 4.0rem;
    }

    .periodontist-text {
        line-height: 1.5;
        max-width: 570px;
        margin: 25px auto 0;
    }
}


/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .periodontist-assisted-implants {
        background-image: url(../images/periodontist-back-sp.png);
        padding: 60px 4.2%;
    }

    .periodontist-unit {
        display: block;
    }

    .periodontist-img-sponly {
        display: block;
    }

    .periodontist-img-sponly img {
        margin: 0 auto;
    }

    .periodontist-img-pconly {
        display: none;
    }


    .periodontist-title {
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 25px;
    }


    .gold-grd {
        font-size: 3.2rem;
    }

    .periodontist-text {
        line-height: 1.5;
        max-width: 570px;
        margin: 25px auto 0;
    }

}
/* ===== 数字で見る当院のインプラント治療 ===== */
.achievement-block {
    background: url(../images/achivebg.png) no-repeat top center / 100%;
    padding-top: max(5.714vw, 74px);
    padding-bottom: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 100px 9.3% 30px;
}

.achievement-header h2 {
    color: #091B2C;
    font-size: 4.8rem;
    line-height: normal;
}

.achievement-header h2 span {
    color: #C2A95C;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    font-size: 6.4rem;
    line-height: normal;
}

.achievement-header p {
    color: #091B2C;
    font-size: 3.6rem;
    line-height: normal;
    margin-top: 18px;
    letter-spacing: 3px;
}

.achievement-header .blue-grd {
    background: radial-gradient(50% 50% at 50% 50%, #D7DEE5 0%, #175899 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4.0rem;
    line-height: normal;
}

.achievement-header .highlight::before,
.achievement-header .highlight::after {
    content: "―";
}

/* 数字ブロック */
.achievement-stats.new-style {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 60px;
}

.stat-box {
    background: linear-gradient(324deg, #F5F5F5 14.59%, #F3F9FF 85.41%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    padding: 40px 30px;
    width: 30%;
    text-align: center;
}

.stat-label {
    font-size: 2.4rem;
    background: #175899;
    color: #fff;
    padding: 15px 0;
    margin-bottom: 20px;
}

.icon-circle {
    margin: 0 auto 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circle img {
    width: 125px;
    height: 125px;
    object-fit: contain;
}

.stat-number .count {
    background: radial-gradient(50% 50% at 50% 50%, #A49463 0%, #C2A95C 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6.4rem;
    line-height: normal;
    letter-spacing: 3px;
}

.stat-number .unit {
    color: #000;
    font-size: 2.4rem;
    line-height: normal;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .achievement-block {
        padding: 85px 4.5%;
    }

    .achievement-header h2 {
        font-size: 3.2rem;
    }

    .achievement-header h2 span {
        font-size: 4.0rem;
    }

    .achievement-header p {
        font-size: 2.4rem;
        margin-top: 10px;
        letter-spacing: 2px;
    }

    .achievement-header .blue-grd {
        font-size: 3.0rem;
    }

    /* 数字ブロック */
    .achievement-stats.new-style {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .stat-box {
        background: linear-gradient(324deg, #F5F5F5 14.59%, #F3F9FF 85.41%);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 8px;
        width: 30%;
        text-align: center;
    }

    .stat-label {
        font-size: 1.6rem;
        padding: 2px 0;
        margin-bottom: 20px;
    }


    .icon-circle img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .stat-number .count {
        background: radial-gradient(50% 50% at 50% 50%, #A49463 0%, #C2A95C 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 3.0rem;
        line-height: normal;
        letter-spacing: 1.5px;
    }

    .stat-number .unit {
        color: #000;
        font-size: 1.6rem;
        line-height: normal;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .achievement-block {
        background: url(../images/achivebg.png) no-repeat top center / 100%;
        padding-top: max(5.714vw, 74px);
        padding-bottom: 20px;
        padding: 30px 4.6%;
    }

    .achievement-header h2 {
        font-size: 2.0rem;
    }

    .achievement-header h2 span {
        font-size: 2.4rem;
    }

    .achievement-header p {
        font-size: 1.6rem;
        margin-top: 10px;
        letter-spacing: 2px;
    }

    .achievement-header .blue-grd {
        font-size: 2.0rem;
    }

    .achievement-header .highlight::before,
    .achievement-header .highlight::after {
        content: "―";
    }

    /* 数字ブロック */
    .achievement-stats.new-style {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 20px;
    }

    .stat-box {
        background: linear-gradient(324deg, #F5F5F5 14.59%, #F3F9FF 85.41%);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 8px;
        width: 30%;
        text-align: center;
    }

    .stat-label {
        font-size: 0.7rem;
        padding: 2px 0;
        margin-bottom: 20px;
    }


    .icon-circle img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .stat-number .count {
        background: radial-gradient(50% 50% at 50% 50%, #A49463 0%, #C2A95C 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.6rem;
        line-height: normal;
        letter-spacing: 1.5px;
    }

    .stat-number .unit {
        color: #000;
        font-size: 0.7rem;
        line-height: normal;
    }
}


/* =========================
   選ばれる理由セクション
   ========================= */

.reasons {
    background-image: url("../images/reasons-back-pc.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 80px 0px 120px;
}


/* ---- セクションヘッダー ---- */

.reasons__title {
    font-size: 4.0rem;
    line-height: 1.7;
    color: #175899;
    margin-bottom: 24px;
    text-align: center;
}

.reasons__title span {
    font-size: 3.2rem;
}

.reasons__title .gold-grd {
    background: radial-gradient(50% 50% at 50% 50%, #BF9A54 0%, rgba(221, 189, 116, 0.95) 25%, #C0A266 50%, #DDBD74 75%, #A18838 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho";
    font-size: 6.4rem;
    line-height: normal;
}

.reasons__lead {
    color: #091B2C;
    font-size: 1.6rem;
    line-height: 30px;
    /* 187.5% */
    text-align: start;
    margin: 60px auto;
    max-width: 992px;
}

/* ---- 各理由ブロック ---- */

.reasons__list {
    display: flex;
    flex-direction: column;
}

.reasons__item {
    background: rgba(228, 237, 245, 0.40);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 32px 40px;
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}

.reasons__body {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 画像・テキストの基本位置 */
.reasons__text {
    flex: 1;
}

.reasons__image-pc {
    flex: 0 0 415px;
}

.reasons__image-sp {
    display: none;
}

.reasons__image-pc img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- h3（理由タイトル） ---- */

.reasons__subtitle {
    color: #091B2C;
    font-size: 2.4rem;
    line-height: 30px;
    /* 125% */
    letter-spacing: 0.96px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-color: #AD8C4E;
    text-decoration-thickness: 5%;
    /* 1.2px */
    text-underline-offset: 60%;
    /* 14.4px */
    text-underline-position: from-font;
    margin-bottom: 40px;
}

.reasons__text p {
    color: #000;
    font-size: 1.6rem;
    line-height: 26px;
    /* 162.5% */
    letter-spacing: 0.32px;
}

.reasons__text p span {
    color: #175899;
}

/* ---- 画像とテキストが逆のパターン ---- */

.reasons__item--reverse .reasons__body {
    flex-direction: row-reverse;
}

.reasons__item--reverse {
    background-color: #FFF;
}

.reasons__item-wrap--blue {
    background: rgba(228, 237, 245, 0.40);
    padding: 40px 0;
}

.reasons__item-wrap--white {
    background-color: #fff;
    /* 白の背景 */
    padding: 40px 0;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .reasons {
        background-image: url("../images/reasons-back-sp.png");
        padding: 45px 2%;
    }


    /* ---- セクションヘッダー ---- */

    .reasons__title {
        font-size: 3.2rem;
        margin-bottom: 40px;
    }

    .reasons__title span {
        font-size: 2.0rem;
    }

    .reasons__title .gold-grd {
        font-size: 4.0rem;
    }

    .reasons__lead {
        margin: 0 auto;
        max-width: 600px;
        line-height: 1.5;
    }


    /* ---- 各理由ブロック ---- */

    .reasons__list {
        display: flex;
        flex-direction: column;
    }

    .reasons__item {
        padding: 20px 25px;
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
    }

    .reasons__body {
        display: block;
        align-items: center;
        gap: 12px;
    }

    /* 画像・テキストの基本位置 */
    .reasons__text {
        flex: 1;
    }

    .reasons__image-pc {
        display: none;
    }

    .reasons__image-sp {
        display: block;
        flex: 0 0 415px;
    }

    .reasons__image-sp img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* ---- h3（理由タイトル） ---- */

    .reasons__subtitle {
        font-size: 2.0rem;
        text-underline-offset: 26%;
        margin: 20px 0;
        text-align: center;
    }

    .reasons__text p {
        color: #000;
        font-size: 1.6rem;
        line-height: 26px;
        /* 162.5% */
        letter-spacing: 0.32px;
    }

    .reasons__text p span {
        color: #175899;
    }

    /* ---- 画像とテキストが逆のパターン ---- */

    .reasons__item--reverse .reasons__body {
        flex-direction: row-reverse;
    }

    .reasons__item--reverse {
        background-color: #FFF;
    }

    .reasons__item-wrap--blue {
        background: rgba(228, 237, 245, 0.40);
        padding: 40px 0;
    }

    .reasons__item-wrap--white {
        background-color: #fff;
        /* 白の背景 */
        padding: 40px 0;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .reasons {
        background-image: url("../images/reasons-back-sp.png");
        padding: 45px 2%;
    }


    /* ---- セクションヘッダー ---- */

    .reasons__title {
        font-size: 1.6rem;
        margin-bottom: 40px;
    }

    .reasons__title span {
        font-size: 1.3rem;
    }

    .reasons__title .gold-grd {
        font-size: 3.2rem;
    }

    .reasons__lead {
        margin: 0 auto;
        max-width: 570px;
        line-height: 1.5;
        padding: 0 4.5%;
    }

    /* ---- 各理由ブロック ---- */

    .reasons__list {
        display: flex;
        flex-direction: column;
    }

    .reasons__item {
        padding: 20px 25px;
        max-width: 360px;
        width: 100%;
        margin: 0 auto;
    }

    .reasons__body {
        display: block;
        align-items: center;
        gap: 12px;
    }

    /* 画像・テキストの基本位置 */
    .reasons__text {
        flex: 1;
    }

    .reasons__image-pc {
        display: none;
    }

    .reasons__image-sp {
        display: block;
        flex: 0 0 415px;
    }

    .reasons__image-sp img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* ---- h3（理由タイトル） ---- */

    .reasons__subtitle {
        font-size: 2.0rem;
        text-underline-offset: 26%;
        margin: 20px 0;
        text-align: center;
    }

    .reasons__text p {
        color: #000;
        font-size: 1.6rem;
        line-height: 26px;
        /* 162.5% */
        letter-spacing: 0.32px;
    }

    .reasons__text p span {
        color: #175899;
    }

    /* ---- 画像とテキストが逆のパターン ---- */

    .reasons__item--reverse .reasons__body {
        flex-direction: row-reverse;
    }

    .reasons__item--reverse {
        background-color: #FFF;
    }

    .reasons__item-wrap--blue {
        background: rgba(228, 237, 245, 0.40);
        padding: 40px 0;
    }

    .reasons__item-wrap--white {
        background-color: #fff;
        /* 白の背景 */
        padding: 40px 0;
    }
}

/* =========================
   取り組みセクション
   ========================= */
.twocol {
    background-image: linear-gradient(to right, rgba(6, 116, 189, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(6, 116, 189, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 60px 0;
}

.dreamttl {
    color: #175899;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 4.0rem;
    font-style: normal;
    line-height: normal;
}

.dreamttl span {
    background: radial-gradient(50% 50% at 50% 50%, #BF9A54 0%, rgba(221, 189, 116, 0.95) 25%, #C0A266 50%, #DDBD74 75%, #A18838 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho";
    font-size: 6.4rem;
    font-style: normal;
    line-height: normal;
}

.twocol-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    background-size: 20px 20px;
    max-width: 1200px;
    margin: 70px auto;
}

.twocol-box {
    background-color: #E4EDF5;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    width: 48%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.twocol-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.twocol-header.pink {
    color: #fff;
}

.twocol-number {
    background-color: #175899;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.1;
    padding-top: 15px;
}

.twocol-number span {
    display: block;
    font-size: 2.8rem;
}

.twocol-title {
    color: #C2A95C;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
    font-size: 2.0rem;
    font-style: normal;
    line-height: normal;
    border-bottom: 2px solid var(--color-ttl);
    padding-bottom: 5px;
}

.twocol-title span {
    font-size: 1.6rem;
}

.txtimg img {
    margin: 0 auto;
    width: 80%;
}

.txtimg p {
    margin: 30px 0;
    color: #091B2C;
    font-size: 1.6rem;
    line-height: 30px;
    /* 187.5% */
    letter-spacing: 0.32px;
}

.simple-check-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 500px;
}

.simple-check-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 12px;
    color: #175899;
    font-size: 1.6rem;
    letter-spacing: 0.32px;
}

.simple-check-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #C2A95C;
    font-size: 0.8em;
    top: 0.15em;
}

.bottomflex {
    display: flex;
}

.twocol-section .twocol-box:nth-of-type(3) .bottomflex .txtimg {
    width: 50%;
}

.bottomtxt {
    width: 50%;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .twocol {
        padding: 60px 4.6%;
    }

    .dreamttl {
        font-size: 3.2rem;
    }

    .dreamttl span {
        font-size: 4.0rem;
    }

    .twocol-section {
        max-width: 580px;
        margin: 70px auto;
    }

    .twocol-box {
        width: 100%;
    }

    .twocol-header {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 15px;
    }

    .twocol-header.pink {
        color: #fff;
    }

    .twocol-number {
        width: 50px;
        height: 50px;
        padding-top: 12px;
        font-size: 1.0rem
    }

    .twocol-number span {
        font-size: 1.6rem;
    }

    .spbr {
        display: none;
    }

    .twocol-title {
        color: #C2A95C;
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
        font-size: 2.4rem;
        font-style: normal;
        line-height: normal;
        border-bottom: 2px solid var(--color-ttl);
        padding-bottom: 5px;
    }

    .twocol-title span {
        font-size: 1.6rem;
    }

    .txtimg img {
        margin: 0 auto;
        width: 80%;
    }

    .txtimg p {
        margin: 30px 0;
        color: #091B2C;
        font-size: 1.6rem;
        line-height: 30px;
        /* 187.5% */
        letter-spacing: 0.32px;
    }

    .simple-check-list {
        list-style: none;
        padding: 0;
        margin: 30px auto;
        max-width: 500px;
    }

    .simple-check-list li {
        position: relative;
        padding-left: 1.5em;
        margin-bottom: 12px;
        color: #175899;
        font-size: 1.6rem;
        letter-spacing: 0.32px;
    }

    .simple-check-list li::before {
        content: "●";
        position: absolute;
        left: 0;
        color: #C2A95C;
        font-size: 0.8em;
        top: 0.15em;
    }

    .bottomflex {
        display: flex;
    }

    .twocol-section .twocol-box:nth-of-type(3) .bottomflex .txtimg {
        width: 50%;
    }

    .bottomtxt {
        width: 50%;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {

    .twocol {
        padding: 60px 4.6%;
    }

    .dreamttl {
        font-size: 2.0rem;
    }

    .dreamttl span {
        font-size: 3.2rem;
    }

    .twocol-section {
        max-width: 340px;
        margin: 70px auto;
    }

    .twocol-box {
        width: 100%;
    }

    .twocol-header {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 15px;
    }

    .twocol-header.pink {
        color: #fff;
    }

    .twocol-number {
        width: 50px;
        height: 50px;
        padding-top: 12px;
        font-size: 1.0rem
    }

    .twocol-number span {
        font-size: 1.6rem;
    }

    .twocol-title {
        color: #C2A95C;
        text-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
        font-size: 1.6rem;
        font-style: normal;
        line-height: normal;
        border-bottom: 2px solid var(--color-ttl);
        padding-bottom: 5px;
    }

    .twocol-title span {
        font-size: 1.0rem;
    }

    .txtimg img {
        margin: 0 auto;
        width: 80%;
    }

    .txtimg p {
        margin: 30px 0;
        color: #091B2C;
        font-size: 1.6rem;
        line-height: 30px;
        /* 187.5% */
        letter-spacing: 0.32px;
    }

    .simple-check-list {
        list-style: none;
        padding: 0;
        margin: 30px auto;
        max-width: 500px;
    }

    .simple-check-list li {
        position: relative;
        padding-left: 1.5em;
        margin-bottom: 12px;
        color: #175899;
        font-size: 1.6rem;
        letter-spacing: 0.32px;
    }

    .simple-check-list li::before {
        content: "●";
        position: absolute;
        left: 0;
        color: #C2A95C;
        font-size: 0.8em;
        top: 0.15em;
    }

    .bottomflex {
        display: flex;
    }

    .twocol-section .twocol-box:nth-of-type(3) .bottomflex .txtimg {
        width: 50%;
    }

    .bottomtxt {
        width: 50%;
    }
}

/* =========================
   ご予約・無料相談 CTA
   ========================= */

.cta {
    background: rgba(219, 202, 149, 0.46);
    padding: 80px 20px 100px;
}

.cta__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* 見出し */
.cta__label {
    display: inline-block;
    background: #fff;
    padding: 2px 80px;
    font-size: 2.4rem;
    letter-spacing: 0.08em;
    margin-bottom: 24px;
}

.cta__label span {
    font-size: 2.0rem;
}

.cta__title {
    font-size: 4.8rem;
    color: #175899;
    letter-spacing: 0.1em;
    margin-bottom: 60px;
}

.cta__title span {
    color: #091B2C;
    text-align: center;
    font-size: 3.6rem;
    font-style: normal;
    line-height: normal;
}

/* カードレイアウト */
.cta__cards {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* 共通カード */
.cta-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 420px;
    height: 230px;
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
}

/* 電話カード（白） */
.cta-card--tel {
    background: #fff;
    border: 1px solid var(--gold, #C2A95C);
    box-shadow: 0 2px 11px 0 #C2A95C;
}

/* WEB予約カード（グラデーション） */
.cta-card--web {
    border: 1px solid var(--gold, #C2A95C);
    background: linear-gradient(180deg, #C2A95C 0%, #FFFCF2 100%);
    box-shadow: 0 2px 11px 0 #C2A95C;
}

/* アイコン */
.cta-card__icon img {
    width: 44px;
    height: auto;
    margin-bottom: 24px;
}

/* テキスト */
.cta-card__label {
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.cta-card__tel {
    font-size: 3.2rem;
    color: #175899;
}

.cta-card__desc {
    font-size: 3.2rem;
    color: #175899;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .cta {
        padding: 50px 4.5%;
    }

    .cta__inner {
        max-width: 570px;
    }

    /* 見出し */
    .cta__label {
        padding: 2px 5px;
        font-size: 1.6rem;
        margin-bottom: 10px;
        width: 100%;
    }

    .cta__label span {
        font-size: 1.4rem;
    }

    .cta__title {
        font-size: 3.2rem;
        letter-spacing: 0.07em;
        margin-bottom: 40px;
    }

    .cta__title span {
        font-size: 2.4rem;
    }

    /* カードレイアウト */
    .cta__cards {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: nowrap;

    }

    /* 共通カード */
    .cta-card {
        max-width: 400px;
        height: auto;
        padding: 32px 19px;
    }

    /* アイコン */
    .cta-card__icon img {
        max-width: 30px;
        height: auto;
        margin-bottom: 5px;
    }

    /* テキスト */
    .cta-card__label {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .cta-card__tel {
        font-size: 2.0rem;
    }

    .cta-card__desc {
        font-size: 2.0rem;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .cta {
        padding: 50px 4.5%;
    }

    .cta__inner {
        max-width: 340px;
    }

    /* 見出し */
    .cta__label {
        padding: 2px 5px;
        font-size: 1.6rem;
        margin-bottom: 10px;
        width: 100%;
    }

    .cta__label span {
        font-size: 1.4rem;
    }

    .cta__title {
        font-size: 2.4rem;
        letter-spacing: 0.07em;
        margin-bottom: 40px;
    }

    .cta__title span {
        font-size: 2.0rem;
    }

    /* カードレイアウト */
    .cta__cards {
        gap: 20px;
    }

    /* 共通カード */
    .cta-card {
        max-width: 285px;
        height: auto;
        padding: 32px 19px;
    }

    /* アイコン */
    .cta-card__icon img {
        max-width: 30px;
        height: auto;
        margin-bottom: 5px;
    }

    /* テキスト */
    .cta-card__label {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .cta-card__tel {
        font-size: 2.0rem;
    }

    .cta-card__desc {
        font-size: 2.0rem;
    }
}

/* =========================
   「オールオン4」という選択肢
   ========================= */

.choice {
    background: url(../images/choices-back.png) no-repeat top center / 100%, #fff;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    padding: 90px 20px 120px;
}

.choice__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.choice__title {
    color: #175899;
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Shippori Mincho";
    font-size: 4.0rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.6px;
}

.choice__title span {
    background: radial-gradient(50% 40% at 50% 50%, #D7DEE5 0%, #175899 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6.4rem;
    letter-spacing: 2.56px;
}

/* 「オールオン4とは？」ラベル */
.choice__label {
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 2px;
    margin-top: 54px;
    color: #fff;
    font-size: 3.2rem;
    letter-spacing: 0.18em;
    background: linear-gradient(90deg,
            #a18838 2.01%,
            #ba9e51 26.96%,
            #ddbd74 49.04%,
            #a18838 99.91%);
    transform: rotate(-3.564deg);
    transform-origin: left center;
}

/* リード文 */
.choice__lead {
    font-size: 3.6rem;
    line-height: 1.7;
    color: #091B2C;
    margin-bottom: 40px;
    letter-spacing: -1px;
    text-align: center;
}

.choice__lead .choice__em {
    color: #175899;
    font-size: 4.8rem;
}

/* 下の説明ボックス */
.choice__box {
    max-width: 1122px;
    background: #E4EDF5;
    padding: 30px;
    margin: 30px auto;
    box-shadow: 0 4px 4px 0 rgba(195, 200, 205, 0.36);
}

.choice__box p {
    color: #000;
    font-size: 2.0rem;
    font-style: normal;
    line-height: 30px;
    letter-spacing: 0.8px;
}

.choice__box p span {
    color: #091B2C;
    font-size: 2.0rem;
    line-height: 30px;
    letter-spacing: 0.8px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(139, 193, 248, 0.40);
    text-decoration-thickness: 40%;
    text-underline-offset: -20%;
    text-underline-position: from-font;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .choice {
        padding: 90px 4.5% 70px;
        background-size: cover;
    }

    .choice__inner {
        max-width: 570px;
    }

    .choice__title {
        font-size: 3.2rem;
    }

    .choice__title span {
        font-size: 4.0rem;
    }

    /* 「オールオン4とは？」ラベル */
    .choice__label {
        margin-top: 40px;
        font-size: 2.0rem;
    }

    /* リード文 */
    .choice__lead {
        font-size: 2.0rem;
    }

    .choice__lead .choice__em {
        color: #175899;
        font-size: 3.0rem;
    }

    .choice__lead .choice__size {
        font-size: 2.4rem;
    }

    /* 下の説明ボックス */
    .choice__box {
        max-width: 570px;
        background: #E4EDF5;
        padding: 30px;
        margin: 0 auto;
    }

    .choice__box p {
        font-size: 1.6rem;
    }

    .choice__box p span {
        font-size: 1.6rem;
    }

}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .choice {
        background: url(../images/choices-back-sp.png) no-repeat top center / 100%, #fff;
        padding: 90px 4.5% 70px;
        background-size: cover;
    }

    .choice__inner {
        max-width: 570px;
    }

    .choice__title {
        font-size: 2.0rem;
    }

    .choice__title span {
        font-size: 3.2rem;
    }

    /* 「オールオン4とは？」ラベル */
    .choice__label {
        margin-top: 20px;
        font-size: 1.6rem;
    }

    /* リード文 */
    .choice__lead {
        font-size: 1.6rem;
    }

    .choice__lead .choice__em {
        color: #175899;
        font-size: 2.4rem;
    }

    .choice__lead .choice__size {
        font-size: 2.0rem;
    }

    /* 下の説明ボックス */
    .choice__box {
        max-width: 570px;
        background: #E4EDF5;
        padding: 30px;
        margin: 0 auto;
    }

    .choice__box p {
        font-size: 1.6rem;
    }

    .choice__box p span {
        font-size: 1.6rem;
    }
}

/* =========================
   どんなことでお悩みですか？
   ========================= */

.problem-section {
    text-align: center;
    padding: 0;
    /* background-color: #f4f4f4; */
}

.problem-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* 他の要素より前面に表示 */
}

/* 見出し */
.problem-ttlbloc {
    background-color: #2F69A4;
    position: relative;
    padding: 80px 0;

}

.problem-ttlbloc::after {
    content: "";
    position: absolute;
    bottom: -58px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 60px solid #2F69A4;
}

.problem-section h2 {
    font-size: 4.0rem;
    color: #FFFEFE;
    line-height: 1.4;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
    margin: 0 0 30px 0;
}

.problemspan {
    font-size: 6.4rem;
    color: #C2A95C;
}

.problem-ttlbloc p {
    color: #E4EDF5;
    text-align: center;
    font-size: 2.0rem;
    line-height: normal;
    letter-spacing: 0.8px;
}

.problem-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    margin: 10rem auto;
    max-width: 1176px;
}

.problem-item {
    background-color: #fff;
    padding: 0 0 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* ホバー時のスタイル */
.problem-item:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 30, 197, 0.11);
    z-index: 1;
}

.problem-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
	position: relative;
}

.problembox {
    width: 100%;
}

.problembox h3 {
    color: #997962;
    font-size: 25px;
    margin: 10px 0 20px;
    position: relative;
}


.problem-item img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 15px;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .problem-section h2 {
        font-size: 3.2rem;
    }

    .problemspan {
        font-size: 4.0rem;
    }

    .problemspan1 {
        font-size: 2rem;
    }

    .problem-ttlbloc {
        padding: 40px 10px;
    }

    .problem-ttlbloc::after {
        content: "";
        position: absolute;
        bottom: -28px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid #2F69A4;
    }

    .problem-ttlbloc p {
        text-align: left;
        font-size: 1.6rem;
        margin: 0 auto;
        padding: 0 15%;
    }

    .problem-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3%;
        padding: 0 14.4% 145px;
    }

    .problembox h3 {
        font-size: 2.4rem;
        padding: 0 5px;
    }

    .problem-item {
        padding: 0;
    }

    .problem-item p {
        font-size: 0.8rem;
    }

    .problem-item img {
        margin-bottom: 0;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .problem-section h2 {
        font-size: 1.5rem;
    }

    .problemspan {
        font-size: 3.2rem;
    }

    .problemspan1 {
        font-size: 2rem;
    }

    .problem-ttlbloc {
        padding: 40px 10px;
    }

    .problem-ttlbloc::after {
        content: "";
        position: absolute;
        bottom: -29px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 30px solid #2F69A4;
    }

    .problem-ttlbloc p {
        text-align: left;
        font-size: 1.6rem;
        margin: 0 auto;
        padding: 0 5%;
    }

    .problem-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 3%;
        padding: 0 6.4%;
    }

    .problembox h3 {
        font-size: 1.0rem;
        padding: 0 5px;
    }

    .problem-item {
        padding: 0;
    }

    .problem-item p {
        font-size: 0.8rem;
    }

    .problem-item img {
        margin-bottom: 0;
    }
}





/* =========================
   東京の患者様へ理想を叶える
   ========================= */
.beforeafter {
    background-color: #f7fafd;
    background-image: url("../images/top-case-background.png");
    background-size: cover;
    padding: 80px 0;
}

.beforeafter__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 40px;
}

/* ------- 左カラム：ドクター写真＋縦書きキャッチ ------- */
.beforeafter__left {
    flex: 0 0 32%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beforeafter__doctor {
    width: 100%;
    max-width: 360px;
    border-radius: 24px;
    overflow: hidden;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); */
}

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

/* 縦書きキャッチコピー */
.beforeafter__catch {
    position: absolute;
    left: 49px;
    bottom: -13%;
    writing-mode: vertical-rl;
    font-family: "Noto Serif JP", serif;
    font-size: 3rem;
    font-weight: 500;
    color: #175899;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

.beforeafter__catch span {
    display: block;
    margin-bottom: 8px;
    font-size: 3.6rem;
}

.beforeafter__catch span:last-child {
    color: #7fb3e4;
}

/* ------- 右カラム：見出し＋症例グリッド ------- */
.beforeafter__right {
    flex: 1;
}


/* 症例グリッド */
.beforeafter__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
	margin: 40px 0 150px;
}

/* 症例カード */
.case {
    background: #ffffff;
    border-radius: 2px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #175899;
}

/* 症例ラベル */
.case__label {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 12px;
}

.case__label-num {
    background: #175899;
    color: #ffffff;
    padding: 4px 10px;
    font-weight: 400;
    font-family: "Shippori Mincho", serif;
    font-size: 1.4rem;
}

.case__label-text {
    background: #e0f0ff;
    color: #175899;
    padding: 4px 10px;
    font-size: 1.4rem;
}

/* BEFORE / AFTER 画像 */
.case__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.case__img {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

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

/* BEFORE / AFTER バッジ */
.case__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.0rem;
    letter-spacing: 0.12em;
    padding: 2px 8px;
    border-radius: 2px;
    background: #175899;
    color: #ffffff;
}

.case__badge--after {
    left: auto;
    right: 6px;
}

/* 説明文 */
.case__desc {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #555555;
}

/* ボタン全体のラッパー（中央寄せ） */
.beforeafter__btn-wrap {
    margin-top: 40px;
    text-align: center;
}


/* ===== ブレイクポイント：960px以下はsp画像に切り替え ===== */
@media (max-width: 960px) {
    .beforeafter__inner {
        flex-direction: column;
    }

    .beforeafter__left {
        flex-basis: auto;
    }

    .beforeafter__catch {
        left: 8px;
        bottom: 8px;
        font-size: 22px;
    }
}
/* ===== ブレイクポイント：640px-768px切り替え ===== */
@media screen and (min-width: 640px) and (max-width: 960px) {
  .beforeafter__catch {
    display: none;
  }
}

/* ===== ブレイクポイント：640px以下はsp画像に切り替え ===== */
@media (max-width: 640px) {
    .beforeafter {
        padding: 56px 0;
    }

    .beforeafter__title {
        font-size: 24px;
    }

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

    .beforeafter__catch {
        display: none;
    }
}

.wp-pagenavi a,
.wp-pagenavi span {
    border: none !important;
    padding: 10px !important;
    margin-inline: 10px !important;
}


/* =========================
   東京の患者様へ理想を叶える
   ========================= */
.implant-achievements {
    background: linear-gradient(180deg, #F7FAFD 0%, #E4EDF5 100%);
    padding: 100px 8.1%;
}

.implanta-chievements-title {
    color: #175899;
    text-align: start;
    font-size: 4.0rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.6px;
}

.implanta-chievements-title span {
    font-size: 3.2rem;
}

.implanta-chievements-title .highlight {
    background: radial-gradient(50% 50% at 50% 50%, #BF9A54 0%, #DDBD74 25%, #C0A266 50%, #DDBD74 75%, #A18838 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6.4rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 2.56px;
}

.implanta-chievements-lead {
    color: #091B2C;
    text-align: start;
    font-size: 2.0rem;
    line-height: 32px;
    letter-spacing: 0.8px;
    margin: 50px auto 0;
    max-width: 970px;
    background-color: rgba(255,255,255,0.7);
    padding: 20px;
}

.achievement-summary {
    margin-top: 60px;
}

.achievement-item {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 37px;
    margin-bottom: 30px;
    padding: 20px 30px;
    background: var(--white, #FFFEFE);
}

.achievement-item--reversed {
    flex-direction: row;
}

.achievement-text {
    width: 50%;
    background: #FFF;
    box-shadow: 2px 4px 4px 0 rgba(148, 148, 148, 0.15);
    padding: 10px;
}

.achievement-text h3 {
    color: #A18838;
    font-size: 2.4rem;
    font-style: normal;
    line-height: 30px;
    letter-spacing: 0.96px;
}

.achievement-text h3 span {
    font-size: 2.0rem;
}

.achievement-text-sub {
    color: #A18838;
    font-size: 2.0rem;
    line-height: 30px;
    letter-spacing: 0.8px;
}

.achievement-text-content {
    font-size: 1.6rem;
    color: #091B2C;
    line-height: 1.6;
}

.price-and-treatment {
    margin-top: 20px;
}


.achievement-image img {
    max-width: 498px;
}

.golden-line {
    width: 100%;
    height: 0.5px;
    background: #C2A95C;
    margin: 20px 0;
}

.price-and-treatment p {
    position: relative;
    padding-left: 30px;
    color: #000;
    text-align: start;
    font-size: 2.0rem;
    line-height: normal;
    letter-spacing: 0.8px;
}

.price-and-treatment .treatment-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #C2A95C;
}

.annotation {
    color: #8C8C8C;
    text-align: start;
    font-size: 1.0rem;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.44px;
    margin-top: 20px;
}

/* ===== ブレイクポイント：768-1024切り替え ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .implant-achievements {
        background: linear-gradient(180deg, #F7FAFD 0%, #E4EDF5 100%);
        padding: 45px 7.5%;
    }

    .implanta-chievements-title {
        font-size: 3.0rem;
    }

    .implanta-chievements-title span {
        font-size: 2.4rem;
    }

    .implanta-chievements-title .highlight {
        font-size: 4.0rem;
    }

    .implanta-chievements-lead {
        font-size: 1.6rem;
        line-height: 28px;
        letter-spacing: 0.5px;
        max-width: 750px;
    }

    .achievement-summary {
        margin-top: 60px;
    }

    .achievement-item {
        display: block;
        margin-bottom: 30px;
        padding: 20px 7px;
    }


    .achievement-text {
        width: 100%;
        padding: 20px 10px 40px;
    }

    .achievement-text h3 {
        font-size: 2.4rem;
        text-align: center;
    }

    .achievement-text h3 span {
        font-size: 2.0rem;
    }

    .achievement-text-sub {
        font-size: 2.0rem;
        line-height: 1.6;
        text-align: center;
    }

    .achievement-text-content {
        font-size: 1.6rem;
        color: #091B2C;
        line-height: 1.6;
        margin-top: 10px;
    }

    .achievement-image img {
        width: 100%;
        margin: 0 auto;
    }

    .price-and-treatment p {
        font-size: 1.6rem;
        margin-top: 10px;
        padding-left: 22px;
    }

    .price-and-treatment .treatment-text::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #C2A95C;
    }

    .annotation {
        color: #8C8C8C;
        text-align: start;
        font-size: 1.0rem;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.44px;
        margin-top: 20px;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .implant-achievements {
        background: linear-gradient(180deg, #F7FAFD 0%, #E4EDF5 100%);
        padding: 45px 4.5%;
    }

    .implanta-chievements-title {
        font-size: 2.0rem;
		text-align:center;
    }

    .implanta-chievements-title span {
        font-size: 1.6rem;
    }

    .implanta-chievements-title .highlight {
        font-size: 3.2rem;
    }

    .implanta-chievements-lead {
        font-size: 1.6rem;
        line-height: 28px;
        letter-spacing: 0.5px;
        max-width: 540px;
    }

    .achievement-summary {
        margin-top: 60px;
    }

    .achievement-item {
        display: block;
        margin-bottom: 30px;
        padding: 20px 7px;
    }


    .achievement-text {
        width: 100%;
        padding: 20px 10px 40px;
    }

    .achievement-text h3 {
        font-size: 2.0rem;
    }

    .achievement-text h3 span {
        font-size: 1.5rem;
    }

    .achievement-text-sub {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .achievement-text-content {
        font-size: 1.6rem;
        color: #091B2C;
        line-height: 1.6;
        margin-top: 10px;
    }

    .achievement-image img {
        width: 100%;
        margin: 0 auto;
    }

    .price-and-treatment p {
        font-size: 1.4rem;
        margin-top: 10px;
        padding-left: 22px;
    }

    .price-and-treatment .treatment-text::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #C2A95C;
    }

    .annotation {
        color: #8C8C8C;
        text-align: start;
        font-size: 1.0rem;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.44px;
        margin-top: 20px;
    }
}

/* =========================
   安心・安全・長持ちする
   インプラント治療のための体制
   ========================= */
.system-structure {
    background: url(../images/system-back-pc.png) no-repeat top center / 100%, #fff;
    background-size: cover;
    padding: 100px 7%;
}

.system-structure h2 {
    color: #175899;
    font-size: 3.6rem;
    line-height: normal;
    background: rgba(255, 254, 254, 0.70);
    max-width: 625px;
    padding: 10px;
    text-align: center;
}

.gold-line {
    color: #175899;
    font-size: 4.8rem;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(194, 169, 92, 0.50);
    text-decoration-thickness: 40%;
    /* 19.2px */
    text-underline-offset: -20%;
    /* -9.6px */
    text-underline-position: from-font;
}

/* システムコンテンツの配置 */
.system-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 44px;
}

.system-content-inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.60) 5.9%, rgba(255, 255, 255, 0.60) 95.13%);
    padding: 40px;
}

.system-item {
    border: 1px solid var(--navy, #175899);
    background: #F8FCFF;
    box-shadow: 0 4px 4px 0 rgba(23, 88, 153, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding: 20px;
    max-width: 362px;
}

.system-image {
    width: 100%;
    object-fit: cover;
}


.system-text h3 {
    color: #175899;
    text-align: center;
    font-family: "Shippori Mincho";
    font-size: 20px;
    font-style: normal;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(194, 169, 92, 0.50);
    text-decoration-thickness: 5%;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    margin: 20px 0;
}

.system-text p {
    color: #000;
    font-size: 1.6rem;
    font-style: normal;
    line-height: 23px;
    /* 143.75% */
    text-align: start;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .system-structure {
        padding: 90px 4.5% 40px;
		background-size: contain;
    }

    .system-content-inner {
        gap: 10px;
        padding: 40px 5px;
    }
}

/* ===== ブレイクポイント：769px以下はsp画像に切り替え ===== */
@media screen and (max-width: 768px) {
    .system-structure {
        background: url(../images/system-back-sp.png) no-repeat top center / 100%, #fff;
        background-size: cover;
        padding: 90px 3.5% 40px;
    }

    .system-structure h2 {
        font-size: 2.0rem;
        max-width: 340px;
        margin: 0 auto;
    }

    .gold-line {
        font-size: 3.2rem;
    }

    /* システムコンテンツの配置 */
    .system-content {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 44px;
    }

    .system-content-inner {
        margin: 0 auto;
        display: block;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        background: linear-gradient(180deg, rgba(248, 252, 255, 0.60) 5.9%, rgba(255, 255, 255, 0.60) 95.13%);
        padding: 0;
    }

    .system-item {
        border: 1px solid var(--navy, #175899);
        background: #F8FCFF;
        box-shadow: 0 4px 4px 0 rgba(23, 88, 153, 0.25);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
        padding: 20px;
        max-width: 362px;
        margin-bottom: 40px;
    }

    .system-image {
        width: 100%;
        object-fit: cover;
    }


    .system-text h3 {
        font-size: 2.0rem;
    }

    .system-text p {
        color: #000;
        font-size: 1.6rem;
        font-style: normal;
        line-height: 23px;
        /* 143.75% */
        text-align: start;
    }
}

/* =========================
   動画で見る
   中央ファーストデンタルクリニック
   ========================= */

.youtube {
    background-color: #dbe3ed;
    padding: 100px 9.3%;
}

.youtube__title {
    font-size: 4.8rem;
    text-align: center;
    color: #175899;
}

.youtube__text {
    font-size: 1.6rem;
    text-align: center;
    margin: 60px auto;
}

.youtube__title span {
    background: radial-gradient(50% 50% at 50% 50%, #BF9A54 0%, rgba(221, 189, 116, 0.95) 25%, #C0A266 50%, #DDBD74 75%, #A18838 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho";
    font-size: 6.4rem;
    line-height: normal;
}

.youtube-wrapper {
    display: flex;
    gap: 20px;
    max-width: 1220px;
    margin: 0 auto;
}

.youtube-item {
    flex: 1;
    position: relative;
    padding-top: 30.25%;
}

.youtube-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .youtube__title {
        font-size: 3.2rem;
        text-align: center;
        color: #175899;
    }

    .youtube__title span {
        font-size: 4.0rem;
    }

    .youtube__text {
        font-size: 1.6rem;
        margin: 40px auto;
    }

}

/* ===== ブレイクポイント：769px以下は1columnに切り替え ===== */

@media (max-width: 768px) {

    .youtube {
        padding: 30px 4.6%;
    }

    .youtube__title {
        font-size: 2.0rem;
        text-align: center;
        color: #175899;
    }

    .youtube__title span {
        font-size: 2.4rem;
    }

    .youtube__text {
        font-size: 1.6rem;
        text-align: start;
        margin: 40px auto;
    }

    .youtube-wrapper {
        flex-direction: column;
    }


    .youtube-item {
        padding-top: 52.25%;
    }
}