/**
 * Styles for the Tooth Extraction Page (抜歯)
 * Figma Node: 4412:28878
 *
 * Implements pixel-accurate margins, paddings, typography, and layout hierarchies from Figma,
 * proportionally scaling between 1025px and 1800px using vw (based on 1920px canvas),
 * matching other sub-pages in this theme, and adapting gracefully to tablet and mobile.
 */

/* ==========================================================================
   Page Layout & Container
   ========================================================================== */
.extraction-page-main {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.extraction-page-main .sub-mv {
    position: relative;
    width: 100%;
    margin-top: 170px;
    padding: 0;
}

.extraction-page-main .sub-mv-heading-card {
    min-width: 480px;
    max-width: calc(100% - 140px);
}

.extraction-page-body {
    background-color: #faf9f6;
    padding-top: 80px;
    padding-bottom: 120px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.extraction-page-container {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Common Card Base (1520px wide white cards) */
.extraction-card {
    width: 1520px;
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 30px;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

/* Full-Width Breakout Sections (Section 3 Cases, Section 5 Flow) */
.extraction-breakout-card {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-color: #ffffff;
    border-radius: 80px;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}

/* Wave Background Elements */
.extraction-wave-decor {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    min-width: 1920px;
    pointer-events: none;
    z-index: 1;
}

.extraction-wave-decor--01 {
    top: -80px;
    height: 940px;
}

.extraction-wave-decor--02 {
    top: 3600px;
    height: 855px;
}

.extraction-wave-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Common Section Headings & Leaf Decor
   ========================================================================== */
.extraction-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    position: relative;
}

.extraction-heading--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 32px;
}

.extraction-heading-decor {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
}

.extraction-heading-leaf {
    width: 20px;
    height: 20px;
    background-color: #2faa87;
    border-radius: 30px 2px 30px 2px;
    flex-shrink: 0;
    display: inline-block;
}

.extraction-heading-title {
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 500;
    color: #63574d;
    line-height: 1.38;
    letter-spacing: 0.96px;
    margin: 0;
}

/* Utility Colors & Text */
.text-green {
    color: #2faa87 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.extraction-lead-spacer {
    height: 16px;
    margin: 0;
}

/* ==========================================================================
   Section 1: 抜歯はゴールではなく、未来のための選択です。 (Lead Section)
   ========================================================================== */
.extraction-lead-section {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.extraction-lead-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.extraction-lead-title {
    font-size: 32px;
    color: #63574d;
    margin: 0;
    line-height: 1.38;
}

.extraction-lead-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ==========================================================================
   Section 2: 歯を抜くべきか、残すべきかでお悩みの方へ (Worries Card)
   ========================================================================== */
.extraction-worries-card {
    padding: 48px 118px 56px;
    margin-bottom: 80px;
}

.extraction-worries-inner {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-worries-circles {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px 0 48px;
    width: 100%;
}

.extraction-worry-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-worry-circle {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

.extraction-worry-circle-text {
    font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-worries-lead {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
}

.extraction-worries-lead p {
    margin: 0 0 4px;
}

/* ==========================================================================
   Section 3: 抜歯が必要になる主なケース (5 Cases Section)
   ========================================================================== */
.extraction-cases-section {
    padding: 88px 0;
    margin-bottom: -103px;
    position: relative;
    z-index: 3;
}

.extraction-cases-inner {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.extraction-cases-grid {
    display: flex;
    justify-content: space-between;
    gap: 26px;
    width: 1520px;
    max-width: 100%;
    margin-top: 60px;
    position: relative;
    box-sizing: border-box;
}

.extraction-case-card {
    position: relative;
    width: 283px;
    height: 265px;
    background-color: #c6efe3;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.02);
}

.extraction-case-circle {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 5.8px solid #c6efe3;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.03);
}

.extraction-case-icon {
    max-width: 76px;
    max-height: 52px;
    object-fit: contain;
}

.extraction-case-name {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
}

.extraction-case-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   Section 4: 当院が大切にしていること (Philosophy Section with BG Image)
   Figma Node: 4412:29172 (Background), 4412:29202 (Content)
   ========================================================================== */
.extraction-philosophy-section {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 218px 0 202px;
    margin-bottom: -115px;
    overflow: hidden;
    z-index: 2;
    background-color: #faf9f6;
}

.extraction-philosophy-bg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.extraction-philosophy-bg-img {
    position: absolute;
    width: 121.08%;
    height: 124.28%;
    left: -4.24%;
    top: -19.75%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.24;
    filter: blur(6.5px);
    display: block;
}

.extraction-philosophy-inner {
    position: relative;
    z-index: 2;
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.extraction-philosophy-circles-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 40px;
}

.extraction-philosophy-circles {
    display: flex;
    justify-content: space-between;
    width: 1280px;
    max-width: 100%;
    gap: 48px;
}

.extraction-philosophy-circle-item {
    width: 333px;
    height: 333px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 99px 48px 98px 49px;
    gap: 31px;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.04);
}

.extraction-philosophy-circle-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #2faa87;
    letter-spacing: 1px;
    line-height: 1.6;
    margin: 0;
}

.extraction-philosophy-circle-sub {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    letter-spacing: 0.5px;
    line-height: 1.6;
    margin: 0;
}

.extraction-philosophy-arrows {
    position: relative;
    width: 1280px;
    height: 60px;
    margin: -10px 0;
    pointer-events: none;
}

.extraction-philosophy-arrow {
    position: absolute;
    top: 50%;
}

.extraction-philosophy-arrow--left {
    left: calc(50% - 287px);
    transform: translate(-50%, -50%) rotate(55.53deg);
}

.extraction-philosophy-arrow--center {
    left: 50%;
    transform: translate(-50%, -50%) rotate(90.71deg);
}

.extraction-philosophy-arrow--right {
    left: calc(50% + 283px);
    transform: translate(-50%, -50%) rotate(124.47deg);
}

.extraction-arrow-img {
    display: block;
    width: 81px;
    height: auto;
}

.extraction-philosophy-capsule {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 1000px;
    width: 998px;
    height: 323px;
    max-width: 100%;
    padding: 48px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 36px;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2;
}

.extraction-capsule-head-main {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    color: #575757;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 1.2px;
}

.extraction-capsule-head-strong {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2faa87;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 1.2px;
}

.extraction-philosophy-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    width: 100%;
}

.extraction-philosophy-pill {
    height: 48px;
    border-radius: 1000px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #575757;
    letter-spacing: 0.5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}

.extraction-pill--01 {
    width: 320px;
}

.extraction-pill--02 {
    width: 224px;
}

.extraction-pill--03 {
    width: 278px;
}

.extraction-philosophy-capsule-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: center;
}

.extraction-philosophy-capsule-text p {
    margin: 0 0 4px;
}

/* ==========================================================================
   Section 5: 抜歯の流れ (Flow Section)
   ========================================================================== */
.extraction-flow-section {
    padding: 73px 0 88px;
    position: relative;
    z-index: 3;
}

.extraction-flow-inner {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-flow-steps-wrap {
    position: relative;
    width: 1280px;
    max-width: 100%;
    margin-top: 50px;
}

.extraction-flow-line-wrap {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
}

.extraction-flow-line-img {
    width: 100%;
    height: auto;
    display: block;
}

.extraction-flow-steps-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.extraction-flow-step {
    position: relative;
    width: 250px;
    height: 240px;
    background-color: #f1f1f1;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    box-sizing: border-box;
    text-align: center;
}

.extraction-step-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Infant", serif;
    font-size: 48px;
    font-weight: 600;
    color: #63574d;
    letter-spacing: 2.4px;
    line-height: 1;
}

.extraction-step-name {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 16px 0 12px;
}

.extraction-step-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.54px;
    text-align: left;
    margin: 0;
}

/* ==========================================================================
   Section 6: 抜歯後に放置すると起こるリスク (Risks Section - Transparent)
   ========================================================================== */
.extraction-risks-section {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto 80px;
    position: relative;
    z-index: 2;
}

.extraction-risks-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-risks-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-risks-lead {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0 0 40px;
}

.extraction-risks-circles {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

.extraction-risk-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-risk-circle {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

.extraction-risk-circle-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-risks-footer-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
}

.extraction-heading--options {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
}

.extraction-heading--options .extraction-heading-decor {
    height: 56px;
    display: flex;
    align-items: flex-start;
    margin-top: -12px;
}

.extraction-heading--options .extraction-heading-leaf {
    width: 20px;
    height: 20px;
    background-color: #2faa87;
    border-radius: 30px 2px 30px 2px;
    display: block;
}

/* ==========================================================================
   Section 7: 抜歯後の治療選択肢 (Options Section - White Card with 3 Grey Cards)
   Figma Node: 4412:29035
   ========================================================================== */
.extraction-options-section {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto 80px;
    background-color: #ffffff;
    border-radius: 80px;
    padding: 88px 0;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

.extraction-options-inner {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* Option 1: Wide Card (1280px) */
.extraction-option-wide-card {
    background-color: #f3f3f3;
    border-radius: 30px;
    width: 1280px;
    max-width: 100%;
    height: auto;
    min-height: 530px;
    padding: 64px 55px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
}

.extraction-option-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px;
    width: 100%;
}

.extraction-option-heading {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.extraction-option-num {
    font-family: "Shippori Mincho", serif;
    font-size: 32px;
    font-weight: 500;
    color: #2faa87;
    line-height: 1.3;
    letter-spacing: 0.96px;
}

.extraction-option-title {
    font-family: "Shippori Mincho", serif;
    font-size: 32px;
    font-weight: 500;
    color: #63574d;
    line-height: 1.3;
    letter-spacing: 0.96px;
    margin: 0;
}

.extraction-option-lead {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
}

.extraction-option-body-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    height: auto;
    min-height: 330px;
}

.extraction-option-img-col {
    width: 530px;
    height: 330px;
    border-radius: 30px;
    overflow: hidden;
    flex-shrink: 0;
}

.extraction-option-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.extraction-option-info-col {
    width: 584px;
    height: auto;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    align-items: flex-start;
    box-sizing: border-box;
}

.extraction-option-info-col .extraction-detail-btn {
    margin-top: auto;
}

.extraction-option-boxes-row {
    display: flex;
    gap: 24px;
    width: 100%;
}

.extraction-option-badge-box {
    width: 280px;
    border-radius: 15px;
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.extraction-option-wide-card .extraction-option-badge-box {
    height: auto;
    min-height: 181px;
    padding: 26px 24px 22px;
    gap: 18px;
}

.extraction-badge-box--white {
    background-color: #ffffff;
}

.extraction-badge-box--mint {
    background-color: #dcf7ef;
}

.extraction-badge-box--lightgreen {
    background-color: #e7f4cb;
}

.extraction-badge-box-label {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2faa87;
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.extraction-badge-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.extraction-badge-box-list li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #575757;
    line-height: 1.5;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.extraction-badge-box-list li .bullet {
    color: #575757;
    font-size: 10px;
    line-height: 1.6;
    flex-shrink: 0;
}

/* Detail Button (Dark Brown Capsule with Right Arrow) */
.extraction-detail-btn {
    width: 320px;
    height: 59px;
    border-radius: 53.23px;
    background-color: #63574d;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    text-decoration: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.96px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
}

.extraction-detail-btn:hover {
    background-color: #52473e;
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.extraction-btn-arrow {
    width: 22px;
    height: 22px;
    display: block;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.extraction-detail-btn:hover .extraction-btn-arrow {
    transform: rotate(90deg) translateX(-3px);
}

/* Option 2 & 3: Split Row (630px each) */
.extraction-options-split-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 1280px;
    max-width: 100%;
}

.extraction-option-split-card {
    background-color: #f3f3f3;
    border-radius: 30px;
    width: 630px;
    max-width: calc(50% - 10px);
    height: auto;
    min-height: 670px;
    padding: 64px 33px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.extraction-split-card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    flex: 1 1 auto;
}

.extraction-split-img-col {
    width: 250px;
    height: 330px;
    border-radius: 30px;
    overflow: hidden;
    flex-shrink: 0;
}

.extraction-split-info-col {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.extraction-split-info-col .extraction-option-badge-box {
    width: 280px;
    height: auto;
    padding: 24px 20px;
    gap: 16px;
}

.extraction-option-split-card:first-child .extraction-split-info-col .extraction-badge-box--white {
    height: auto;
    min-height: 146px;
}

.extraction-option-split-card:last-child .extraction-split-info-col .extraction-badge-box--white {
    height: auto;
    min-height: 181px;
}

.extraction-split-info-col .extraction-badge-box--white .extraction-badge-box-list li {
    white-space: nowrap;
}

.extraction-split-info-col .extraction-badge-box--lightgreen .extraction-badge-box-list li {
    white-space: normal;
    word-break: break-word;
}

.extraction-option-split-card .extraction-detail-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* ==========================================================================
   Section 8: 「歯の移植」という選択肢 (Autotransplantation Section - 1520px Card)
   Figma Node: 4412:28976
   ========================================================================== */
.extraction-transplant-section {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto 80px;
    background-color: #ffffff;
    border-radius: 80px;
    padding: 88px 0;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

.extraction-transplant-inner {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.extraction-transplant-quotes {
    font-family: "Shippori Mincho", serif;
    font-size: 29px;
    font-weight: 500;
    color: #2faa87;
    line-height: 1.38;
    letter-spacing: 0.87px;
    text-align: center;
    margin: 0;
}

.extraction-transplant-quotes p {
    margin: 0;
}

.extraction-transplant-quotes p:first-child {
    margin-bottom: 4px;
}

.extraction-transplant-lead {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-align: center;
    margin: 0;
}

.extraction-transplant-lead p {
    margin: 0;
}

.extraction-transplant-cards-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.extraction-transplant-row--top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    gap: 30px;
}

.extraction-transplant-row--bottom {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 55px;
    width: 100%;
}

.extraction-transplant-card {
    width: 380px;
    height: auto;
    min-height: 410px;
    background-color: #dcf7ef;
    border-radius: 30px;
    padding: 38px 21px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
}

.extraction-transplant-card-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.extraction-transplant-feat-label {
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 500;
    color: #2faa87;
    letter-spacing: 0.96px;
    line-height: 1.42;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.feat-num {
    font-size: 32px;
    line-height: 1;
}

.extraction-transplant-feat-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 1.2px;
    margin: 0;
    height: auto;
    min-height: 76px;
}

.extraction-transplant-card-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(47, 170, 135, 0.4);
}

.extraction-transplant-feat-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.54px;
    margin: 0;
    text-align: justify;
}

/* ==========================================================================
   Section 9: このような方はご相談ください (Checklist Card)
   Figma Node: 4412:28949
   ========================================================================== */
.extraction-checklist-card {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto 80px;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 48px 0;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

.extraction-checklist-inner {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.extraction-checklist-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extraction-checklist-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 0 0 48px;
}

.extraction-checklist-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

.extraction-checklist-item {
    width: 333px;
    height: auto;
    min-height: 100px;
    background-color: #c6efe3;
    border-radius: 11px;
    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
}

.extraction-checklist-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.extraction-checklist-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.extraction-checklist-note {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.extraction-checklist-note p {
    margin: 0 0 4px;
}

/* ==========================================================================
   Section 10: 抜歯でよくあるご質問 (FAQ Accordion Card)
   ========================================================================== */
.extraction-faq-card {
    padding: 80px;
    margin-bottom: 80px;
}

.extraction-faq-inner {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
}

.extraction-faq-title-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
}

.extraction-faq-title-bar {
    width: 4px;
    height: 58px;
    background-color: #2faa87;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}

.extraction-faq-title {
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 500;
    color: #63574d;
    line-height: 1.38;
    letter-spacing: 0.96px;
    margin: 0;
}

.extraction-faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.extraction-faq-item {
    border-bottom: 1px solid rgba(99, 87, 77, 0.2);
    padding: 32px 0;
    box-sizing: border-box;
}

.extraction-faq-item:first-child {
    border-top: 1px solid rgba(99, 87, 77, 0.2);
}

.extraction-faq-question-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 20px;
}

.extraction-faq-q-row {
    display: flex;
    align-items: center;
    gap: 36px;
}

.extraction-faq-q-badge {
    font-family: "Outfit", sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #63574d;
    text-transform: uppercase;
    letter-spacing: 1.9px;
    flex-shrink: 0;
    width: 32px;
}

.extraction-faq-question-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 19px;
    color: #575757;
    letter-spacing: 0.96px;
    font-weight: 500;
    line-height: 1.6;
}

.extraction-faq-toggle-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #8fc31f;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.extraction-faq-toggle-icon::before,
.extraction-faq-toggle-icon::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.extraction-faq-toggle-icon::before {
    width: 18px;
    height: 2px;
}

.extraction-faq-toggle-icon::after {
    width: 2px;
    height: 18px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.extraction-faq-item.is-open .extraction-faq-toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.extraction-faq-answer-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.extraction-faq-answer-inner {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    padding-top: 24px;
    padding-bottom: 8px;
}

.extraction-faq-a-badge {
    font-family: "Outfit", sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #2faa87;
    text-transform: uppercase;
    letter-spacing: 1.9px;
    flex-shrink: 0;
    width: 32px;
}

.extraction-faq-answer-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    margin: 0;
    padding-top: 6px;
}

/* ==========================================================================
   Section 11: まずはお気軽にご相談ください (Consult CTA Card)
   Figma Node: 4412:28913
   ========================================================================== */
.extraction-consult-card {
    width: 1520px;
    max-width: 100%;
    margin: 0 auto 80px;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 48px 118px;
    box-sizing: border-box;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.02);
}

.extraction-consult-inner {
    width: 1284px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.extraction-consult-img-col {
    width: 600px;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.extraction-consult-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

.extraction-consult-text-col {
    width: 600px;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    box-sizing: border-box;
}

.extraction-consult-bullets {
    list-style: none;
    padding: 0 0 0 30px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.extraction-consult-bullets li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2faa87;
    line-height: 1.6;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.extraction-consult-bullets li .bullet {
    color: #2faa87;
    font-size: 10px;
    line-height: 1;
}

.extraction-consult-desc {
    padding-left: 30px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    color: #575757;
    line-height: 1.6;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

.extraction-consult-desc p {
    margin: 0 0 4px;
}


/* ==========================================================================
   Responsive Scaling (1025px - 1800px) - vw proportionally
   ========================================================================== */
@media (max-width: 1800px) {
    .extraction-page-main .sub-mv {
        margin-top: calc(170 * 100vw / 1920);
    }

    .extraction-page-main .sub-mv-heading-card {
        min-width: calc(480 * 100vw / 1920);
        max-width: calc(100% - calc(140 * 100vw / 1920));
    }

    .extraction-page-body {
        padding-top: calc(80 * 100vw / 1920);
        padding-bottom: calc(120 * 100vw / 1920);
    }

    .extraction-page-container,
    .extraction-card,
    .extraction-cases-inner,
    .extraction-flow-inner,
    .extraction-risks-section,
    .extraction-options-section,
    .extraction-transplant-section {
        width: calc(1520 * 100vw / 1920);
    }

    .extraction-card {
        border-radius: calc(30 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-breakout-card {
        border-radius: calc(80 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-lead-section,
    .extraction-worries-inner,
    .extraction-philosophy-inner,
    .extraction-flow-steps-wrap,
    .extraction-options-inner,
    .extraction-options-split-row,
    .extraction-transplant-inner,
    .extraction-checklist-inner,
    .extraction-consult-inner {
        width: calc(1280 * 100vw / 1920);
    }

    /* Common Headings */
    .extraction-heading {
        min-height: calc(56 * 100vw / 1920);
        gap: calc(8 * 100vw / 1920);
    }

    .extraction-heading--center {
        gap: calc(16 * 100vw / 1920);
        margin-bottom: calc(32 * 100vw / 1920);
    }

    .extraction-heading-decor {
        height: calc(56 * 100vw / 1920);
    }

    .extraction-heading-leaf {
        width: calc(20 * 100vw / 1920);
        height: calc(20 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920) calc(2 * 100vw / 1920) calc(30 * 100vw / 1920) calc(2 * 100vw / 1920);
    }

    .extraction-heading-title {
        font-size: 1.667vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    /* Wave Background Elements */
    .extraction-wave-decor {
        min-width: 100vw;
    }

    .extraction-wave-decor--01 {
        top: calc(-80 * 100vw / 1920);
        height: calc(940 * 100vw / 1920);
    }

    .extraction-wave-decor--02 {
        top: calc(3600 * 100vw / 1920);
        height: calc(855 * 100vw / 1920);
    }

    /* Section 1: Lead */
    .extraction-lead-section {
        margin: 0 auto calc(60 * 100vw / 1920);
    }

    .extraction-lead-inner {
        gap: calc(48 * 100vw / 1920);
    }

    .extraction-lead-title {
        font-size: 1.667vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-lead-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-lead-spacer {
        height: calc(16 * 100vw / 1920);
        margin: 0 0 calc(4 * 100vw / 1920);
    }

    /* Section 2: Worries */
    .extraction-worries-card {
        padding: calc(48 * 100vw / 1920) calc(118 * 100vw / 1920) calc(56 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-worries-circles {
        gap: calc(40 * 100vw / 1920);
        margin: calc(40 * 100vw / 1920) 0 calc(48 * 100vw / 1920);
    }

    .extraction-worry-circle {
        width: calc(230 * 100vw / 1920);
        height: calc(230 * 100vw / 1920);
        padding: calc(24 * 100vw / 1920);
        border-width: calc(5.8 * 100vw / 1920);
    }

    .extraction-worry-circle-text {
        font-size: calc(18 * 100vw / 1920);
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-worries-lead {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-worries-lead p {
        margin: 0 0 calc(4 * 100vw / 1920);
    }

    /* Section 3: Cases */
    .extraction-cases-section {
        padding: calc(88 * 100vw / 1920) 0;
        margin-bottom: calc(-103 * 100vw / 1920);
    }

    .extraction-cases-grid {
        width: 100%;
        gap: calc(26 * 100vw / 1920);
        margin-top: calc(60 * 100vw / 1920);
    }

    .extraction-case-card {
        width: calc(283 * 100vw / 1920);
        height: calc(265 * 100vw / 1920);
        padding: calc(60 * 100vw / 1920) calc(20 * 100vw / 1920) calc(20 * 100vw / 1920);
        border-radius: calc(20 * 100vw / 1920);
    }

    .extraction-case-circle {
        width: calc(118 * 100vw / 1920);
        height: calc(118 * 100vw / 1920);
        top: calc(-50 * 100vw / 1920);
        border-width: calc(5.8 * 100vw / 1920);
    }

    .extraction-case-icon {
        max-width: calc(76 * 100vw / 1920);
        max-height: calc(52 * 100vw / 1920);
    }

    .extraction-case-name {
        font-size: 1.042vw;
        margin-bottom: calc(12 * 100vw / 1920);
        letter-spacing: calc(1 * 100vw / 1920);
    }

    .extraction-case-desc {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    /* Section 4: Philosophy */
    .extraction-philosophy-section {
        padding: calc(218 * 100vw / 1920) 0 calc(202 * 100vw / 1920);
        margin-bottom: calc(-115 * 100vw / 1920);
    }

    .extraction-philosophy-inner {
        gap: calc(48 * 100vw / 1920);
    }

    .extraction-philosophy-circles-wrap {
        gap: calc(40 * 100vw / 1920);
    }

    .extraction-philosophy-circles {
        width: 100%;
        gap: calc(48 * 100vw / 1920);
        margin-bottom: calc(40 * 100vw / 1920);
    }

    .extraction-philosophy-circle-item {
        width: calc(333 * 100vw / 1920);
        height: calc(333 * 100vw / 1920);
        border-width: calc(5.8 * 100vw / 1920);
        gap: 1.615vw;
        padding: 5.156vw 2.5vw 5.104vw 2.552vw;
    }

    .extraction-philosophy-icon-wrap {
        width: calc(116 * 100vw / 1920);
        height: calc(116 * 100vw / 1920);
    }

    .extraction-philosophy-icon {
        max-width: calc(100 * 100vw / 1920);
        max-height: calc(84 * 100vw / 1920);
    }

    .extraction-philosophy-circle-title {
        font-size: 1.042vw;
        letter-spacing: calc(1 * 100vw / 1920);
        white-space: nowrap;
    }

    .extraction-philosophy-circle-sub {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        white-space: nowrap;
    }

    .extraction-philosophy-arrows {
        width: calc(1280 * 100vw / 1920);
        height: 3.125vw;
        margin: calc(-10 * 100vw / 1920) 0;
    }

    .extraction-philosophy-arrow--left {
        left: calc(50% - 287 * 100vw / 1920);
    }

    .extraction-philosophy-arrow--right {
        left: calc(50% + 283 * 100vw / 1920);
    }

    .extraction-arrow-img {
        width: calc(81 * 100vw / 1920);
    }

    .extraction-philosophy-capsule {
        width: 51.979vw;
        min-width: calc(998 * 100vw / 1920);
        height: 16.823vw;
        min-height: calc(323 * 100vw / 1920);
        padding: calc(48 * 100vw / 1920) calc(40 * 100vw / 1920);
        border-radius: 52.083vw;
        gap: calc(36 * 100vw / 1920);
    }

    .extraction-capsule-head-main {
        font-size: 1.25vw;
        letter-spacing: calc(1.2 * 100vw / 1920);
    }

    .extraction-capsule-head-strong {
        font-size: 1.25vw;
        letter-spacing: calc(1.2 * 100vw / 1920);
    }

    .extraction-philosophy-pills {
        gap: 0.677vw;
        margin: 0;
    }

    .extraction-philosophy-pill {
        font-size: 0.938vw;
        height: 2.5vw;
        padding: 0 calc(20 * 100vw / 1920);
        border-radius: 52.083vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        white-space: nowrap;
        box-sizing: border-box;
    }

    .extraction-pill--01 {
        width: 16.667vw;
        min-width: calc(320 * 100vw / 1920);
    }

    .extraction-pill--02 {
        width: 11.667vw;
        min-width: calc(224 * 100vw / 1920);
    }

    .extraction-pill--03 {
        width: 14.479vw;
        min-width: calc(278 * 100vw / 1920);
    }

    .extraction-philosophy-capsule-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-philosophy-capsule-text p {
        margin: 0 0 calc(4 * 100vw / 1920);
    }

    /* Section 5: Flow */
    .extraction-flow-section {
        padding: calc(73 * 100vw / 1920) 0 calc(88 * 100vw / 1920);
    }

    .extraction-flow-steps-wrap {
        margin-top: calc(50 * 100vw / 1920);
    }

    .extraction-flow-line-wrap {
        width: calc(1200 * 100vw / 1920);
        top: calc(120 * 100vw / 1920);
    }

    .extraction-flow-step {
        width: calc(250 * 100vw / 1920);
        height: calc(240 * 100vw / 1920);
        padding: calc(44 * 100vw / 1920) calc(20 * 100vw / 1920) calc(24 * 100vw / 1920);
        border-radius: 1.562vw;
    }

    .extraction-step-badge {
        font-size: 2.5vw;
        top: -0.469vw;
        letter-spacing: calc(2.4 * 100vw / 1920);
    }

    .extraction-step-name {
        font-size: 0.938vw;
        margin-bottom: calc(12 * 100vw / 1920);
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-step-desc {
        font-size: 0.938vw;
        letter-spacing: calc(0.54 * 100vw / 1920);
    }

    /* Section 6: Risks */
    .extraction-risks-section {
        padding: 0;
        margin: 0 auto calc(80 * 100vw / 1920);
    }

    .extraction-risks-lead {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        margin: 0 0 calc(40 * 100vw / 1920);
    }

    .extraction-risks-circles {
        gap: 1.042vw;
        margin: calc(44 * 100vw / 1920) 0 calc(40 * 100vw / 1920);
    }

    .extraction-risk-circle {
        width: calc(230 * 100vw / 1920);
        height: calc(230 * 100vw / 1920);
        padding: 1.25vw;
        border-width: calc(5.8 * 100vw / 1920);
    }

    .extraction-risk-circle-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-risks-footer-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    /* Section 7: Options */
    .extraction-heading--options {
        gap: calc(8 * 100vw / 1920);
    }

    .extraction-heading--options .extraction-heading-decor {
        height: calc(56 * 100vw / 1920);
        margin-top: -0.625vw;
    }

    .extraction-heading--options .extraction-heading-leaf {
        width: calc(20 * 100vw / 1920);
        height: calc(20 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920) calc(2 * 100vw / 1920) calc(30 * 100vw / 1920) calc(2 * 100vw / 1920);
    }

    .extraction-options-section {
        width: calc(1520 * 100vw / 1920);
        border-radius: calc(80 * 100vw / 1920);
        padding: calc(88 * 100vw / 1920) 0;
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-options-inner {
        gap: calc(48 * 100vw / 1920);
    }

    .extraction-option-wide-card {
        width: calc(1280 * 100vw / 1920);
        height: auto;
        min-height: calc(530 * 100vw / 1920);
        padding: calc(64 * 100vw / 1920) calc(55 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
        gap: calc(40 * 100vw / 1920);
    }

    .extraction-option-header-row {
        gap: calc(58 * 100vw / 1920);
    }

    .extraction-option-heading {
        gap: calc(4 * 100vw / 1920);
    }

    .extraction-option-body-row {
        gap: calc(50 * 100vw / 1920);
        height: auto;
        min-height: calc(330 * 100vw / 1920);
    }

    .extraction-option-boxes-row {
        gap: calc(24 * 100vw / 1920);
    }

    .extraction-option-img-col {
        width: calc(530 * 100vw / 1920);
        height: calc(330 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
    }

    .extraction-option-info-col {
        width: calc(584 * 100vw / 1920);
        height: auto;
        min-height: calc(330 * 100vw / 1920);
        gap: calc(32 * 100vw / 1920);
    }

    .extraction-option-num {
        font-size: 1.667vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-option-title {
        font-size: 1.667vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-option-lead {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-option-badge-box {
        width: calc(280 * 100vw / 1920);
        padding: calc(32 * 100vw / 1920) calc(24 * 100vw / 1920);
        border-radius: calc(15 * 100vw / 1920);
        gap: calc(24 * 100vw / 1920);
    }

    .extraction-option-wide-card .extraction-option-badge-box {
        height: auto;
        min-height: calc(181 * 100vw / 1920);
    }

    .extraction-badge-box-label {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-badge-box-list {
        gap: calc(15 * 100vw / 1920);
    }

    .extraction-badge-box-list li {
        font-size: 0.885vw;
        gap: calc(8 * 100vw / 1920);
        letter-spacing: calc(0.3 * 100vw / 1920);
    }

    .extraction-badge-box-list li .bullet {
        font-size: 0.521vw;
    }

    .extraction-detail-btn {
        width: calc(320 * 100vw / 1920);
        height: calc(59 * 100vw / 1920);
        font-size: 0.99vw;
        border-radius: calc(53.23 * 100vw / 1920);
        gap: calc(17 * 100vw / 1920);
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-btn-arrow {
        width: calc(22 * 100vw / 1920);
        height: calc(22 * 100vw / 1920);
    }

    .extraction-options-split-row {
        width: calc(1280 * 100vw / 1920);
        gap: calc(20 * 100vw / 1920);
    }

    .extraction-option-split-card {
        width: calc(630 * 100vw / 1920);
        height: auto;
        min-height: calc(670 * 100vw / 1920);
        max-width: none;
        padding: calc(64 * 100vw / 1920) calc(33 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
        gap: calc(40 * 100vw / 1920);
    }

    .extraction-split-card-body {
        gap: calc(24 * 100vw / 1920);
    }

    .extraction-split-img-col {
        width: calc(250 * 100vw / 1920);
        height: calc(330 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
    }

    .extraction-split-info-col {
        width: calc(280 * 100vw / 1920);
        gap: calc(16 * 100vw / 1920);
    }

    .extraction-split-info-col .extraction-option-badge-box {
        width: calc(280 * 100vw / 1920);
        height: auto;
        padding: calc(24 * 100vw / 1920) calc(20 * 100vw / 1920);
        gap: calc(16 * 100vw / 1920);
    }

    .extraction-option-split-card:first-child .extraction-split-info-col .extraction-badge-box--white {
        height: auto;
        min-height: calc(146 * 100vw / 1920);
    }

    .extraction-option-split-card:last-child .extraction-split-info-col .extraction-badge-box--white {
        height: auto;
        min-height: calc(181 * 100vw / 1920);
    }

    /* Section 8: Transplant */
    .extraction-transplant-section {
        width: calc(1520 * 100vw / 1920);
        border-radius: calc(80 * 100vw / 1920);
        padding: calc(88 * 100vw / 1920) 0;
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-transplant-inner {
        width: calc(1280 * 100vw / 1920);
        gap: calc(48 * 100vw / 1920);
    }

    .extraction-transplant-quotes {
        font-size: 1.51vw;
        letter-spacing: calc(0.87 * 100vw / 1920);
        margin: 0;
    }

    .extraction-transplant-lead {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        margin: 0;
    }

    .extraction-transplant-cards-wrap {
        gap: calc(40 * 100vw / 1920);
    }

    .extraction-transplant-row--top {
        gap: calc(30 * 100vw / 1920);
        align-items: stretch;
    }

    .extraction-transplant-row--bottom {
        gap: calc(55 * 100vw / 1920);
        align-items: stretch;
    }

    .extraction-transplant-card {
        width: calc(380 * 100vw / 1920);
        height: auto;
        min-height: calc(410 * 100vw / 1920);
        padding: calc(38 * 100vw / 1920) calc(21 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
        gap: calc(24 * 100vw / 1920);
    }

    .extraction-transplant-card-head {
        gap: calc(16 * 100vw / 1920);
    }

    .extraction-transplant-feat-label {
        font-size: 0.938vw;
        gap: calc(4 * 100vw / 1920);
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-transplant-feat-label .feat-num {
        font-size: 1.667vw;
    }

    .extraction-transplant-feat-title {
        font-size: 1.25vw;
        height: auto;
        min-height: calc(76 * 100vw / 1920);
        letter-spacing: calc(1.2 * 100vw / 1920);
    }

    .extraction-transplant-card-divider {
        height: 1px;
    }

    .extraction-transplant-feat-desc {
        font-size: 0.938vw;
        letter-spacing: calc(0.54 * 100vw / 1920);
    }

    /* Section 9: Checklist */
    .extraction-checklist-card {
        width: calc(1520 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
        padding: calc(48 * 100vw / 1920) 0;
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-checklist-inner {
        width: calc(1280 * 100vw / 1920);
        gap: calc(40 * 100vw / 1920);
    }

    .extraction-checklist-grid {
        gap: calc(15 * 100vw / 1920);
        margin: 0 0 calc(48 * 100vw / 1920);
    }

    .extraction-checklist-row {
        gap: calc(14 * 100vw / 1920);
        align-items: stretch;
    }

    .extraction-checklist-item {
        width: calc(333 * 100vw / 1920);
        height: auto;
        min-height: calc(100 * 100vw / 1920);
        padding: 0 calc(14 * 100vw / 1920);
        border-radius: calc(11 * 100vw / 1920);
        gap: calc(14 * 100vw / 1920);
    }

    .extraction-checklist-icon {
        width: calc(24 * 100vw / 1920);
        height: calc(24 * 100vw / 1920);
    }

    .extraction-checklist-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-checklist-note {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        max-width: calc(1100 * 100vw / 1920);
    }

    .extraction-checklist-note p {
        margin: 0 0 calc(4 * 100vw / 1920);
    }

    /* Section 10: FAQ */
    .extraction-faq-card {
        padding: calc(80 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-faq-inner {
        width: calc(1100 * 100vw / 1920);
        max-width: 100%;
    }

    .extraction-faq-title-row {
        gap: 1.25vw;
        margin-bottom: calc(48 * 100vw / 1920);
    }

    .extraction-faq-title-bar {
        width: calc(4 * 100vw / 1920);
        height: 3.021vw;
        border-radius: calc(2 * 100vw / 1920);
    }

    .extraction-faq-title {
        font-size: 1.667vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-faq-item {
        padding: calc(32 * 100vw / 1920) 0;
    }

    .extraction-faq-question-btn {
        gap: calc(20 * 100vw / 1920);
    }

    .extraction-faq-q-row {
        gap: 1.875vw;
    }

    .extraction-faq-q-badge,
    .extraction-faq-a-badge {
        font-size: 1.979vw;
        width: calc(32 * 100vw / 1920);
        letter-spacing: calc(1.9 * 100vw / 1920);
    }

    .extraction-faq-question-text {
        font-size: 0.99vw;
        letter-spacing: calc(0.96 * 100vw / 1920);
    }

    .extraction-faq-toggle-icon {
        width: 2.188vw;
        height: 2.188vw;
    }

    .extraction-faq-toggle-icon::before {
        width: calc(18 * 100vw / 1920);
        height: calc(2 * 100vw / 1920);
    }

    .extraction-faq-toggle-icon::after {
        width: calc(2 * 100vw / 1920);
        height: calc(18 * 100vw / 1920);
    }

    .extraction-faq-answer-inner {
        gap: 1.875vw;
        padding-top: 1.25vw;
        padding-bottom: calc(8 * 100vw / 1920);
    }

    .extraction-faq-answer-text {
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
        padding-top: calc(6 * 100vw / 1920);
    }

    /* Section 11: Consult */
    .extraction-consult-card {
        width: calc(1520 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
        padding: calc(48 * 100vw / 1920) calc(118 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .extraction-consult-inner {
        width: calc(1284 * 100vw / 1920);
    }

    .extraction-consult-img-col {
        width: calc(600 * 100vw / 1920);
        height: calc(400 * 100vw / 1920);
        border-radius: calc(20 * 100vw / 1920);
    }

    .extraction-consult-text-col {
        width: calc(600 * 100vw / 1920);
        padding-top: calc(40 * 100vw / 1920);
        gap: calc(48 * 100vw / 1920);
    }

    .extraction-consult-bullets {
        padding-left: calc(30 * 100vw / 1920);
        gap: calc(16 * 100vw / 1920);
        margin: 0;
    }

    .extraction-consult-bullets li {
        font-size: 0.938vw;
        gap: calc(8 * 100vw / 1920);
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-consult-bullets li .bullet {
        font-size: 0.521vw;
    }

    .extraction-consult-desc {
        padding-left: calc(30 * 100vw / 1920);
        font-size: 0.938vw;
        letter-spacing: calc(0.5 * 100vw / 1920);
    }

    .extraction-consult-desc p {
        margin: 0 0 calc(4 * 100vw / 1920);
    }

    /* ベースの px 指定を vw に換算（1800px 以下は完全比例） */
    .extraction-option-wide-card .extraction-option-badge-box {
        padding: 1.354vw 1.25vw 1.146vw;
        gap: 0.938vw;
    }

    .extraction-detail-btn:hover .extraction-btn-arrow {
        transform: rotate(90deg) translateX(-0.156vw);
    }

    .extraction-transplant-quotes p:first-child {
        margin-bottom: 0.208vw;
    }

    .feat-num {
        font-size: 1.667vw;
    }

}

/* ==========================================================================
   Tablet Devices (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* 1800px 以下を完全比例（vw）にしたため、タブレット以下は従来の値を維持する */
    .extraction-philosophy-pills {
        margin: calc(28 * 100vw / 1920) 0 calc(32 * 100vw / 1920);
    }

    .extraction-philosophy-capsule {
        height: auto;
    }

    .extraction-risks-section {
        padding: calc(80 * 100vw / 1920) 0;
    }

    .extraction-option-wide-card .extraction-option-badge-box {
        padding: 26px 24px 22px;
        gap: 18px;
    }

    .extraction-detail-btn:hover .extraction-btn-arrow {
        transform: rotate(90deg) translateX(-3px);
    }

    .extraction-transplant-quotes p:first-child {
        margin-bottom: 4px;
    }

    .feat-num {
        font-size: 32px;
    }

    .extraction-heading-title {
        font-size: calc(14.84px + 0.894vw);
    }

    .extraction-lead-title {
        font-size: calc(14.84px + 0.894vw);
    }

    .extraction-lead-text {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-worries-lead {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-case-name {
        font-size: calc(10.35px + 0.503vw);
    }

    .extraction-case-desc {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-philosophy-circle-item {
        gap: calc(16 * 100vw / 1920);
    }

    .extraction-philosophy-circle-title {
        font-size: calc(10.35px + 0.503vw);
    }

    .extraction-philosophy-circle-sub {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-philosophy-arrows {
        height: calc(70 * 100vw / 1920);
    }

    .extraction-capsule-head-main {
        font-size: calc(11.13px + 0.67vw);
    }

    .extraction-capsule-head-strong {
        font-size: calc(11.13px + 0.67vw);
    }

    .extraction-philosophy-pill {
        font-size: calc(9.42px + 0.447vw);
        height: calc(52 * 100vw / 1920);
        border-radius: calc(30 * 100vw / 1920);
    }

    .extraction-pill--01 {
        width: auto;
    }

    .extraction-pill--02 {
        width: auto;
    }

    .extraction-pill--03 {
        width: auto;
    }

    .extraction-philosophy-capsule-text {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-flow-step {
        border-radius: calc(20 * 100vw / 1920);
    }

    .extraction-step-badge {
        font-size: calc(22.26px + 1.341vw);
        top: calc(-16 * 100vw / 1920);
    }

    .extraction-step-name {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-step-desc {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-risks-lead {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-risk-circle {
        padding: calc(20 * 100vw / 1920);
    }

    .extraction-risk-circle-text {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-risks-footer-text {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-heading--options .extraction-heading-decor {
        margin-top: calc(2 * 100vw / 1920);
    }

    .extraction-option-num {
        font-size: calc(14.84px + 0.894vw);
    }

    .extraction-option-title {
        font-size: calc(14.84px + 0.894vw);
    }

    .extraction-option-lead {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-badge-box-label {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-badge-box-list li {
        font-size: calc(8.8px + 0.42vw);
    }

    .extraction-badge-box-list li .bullet {
        font-size: calc(6.78px + 0.168vw);
    }

    .extraction-detail-btn {
        font-size: calc(10.42px + 0.447vw);
        width: 100%;
        max-width: 300px;
        height: 54px;
        gap: 12px;
        border-radius: 50px;
        letter-spacing: 0.96px;
    }

    .extraction-btn-arrow {
        width: 20px;
        height: 20px;
    }

    .extraction-transplant-quotes {
        font-size: calc(13.98px + 0.782vw);
    }

    .extraction-transplant-lead {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-transplant-feat-label {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-transplant-feat-label .feat-num {
        font-size: calc(14.84px + 0.894vw);
    }

    .extraction-transplant-feat-title {
        font-size: calc(11.13px + 0.67vw);
    }

    .extraction-transplant-feat-desc {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-checklist-text {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-checklist-note {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-faq-q-badge, .extraction-faq-a-badge {
        font-size: calc(16.55px + 1.117vw);
    }

    .extraction-consult-bullets li {
        font-size: calc(9.42px + 0.447vw);
    }

    .extraction-consult-bullets li .bullet {
        font-size: calc(6.78px + 0.168vw);
    }

    .extraction-consult-desc {
        font-size: calc(9.42px + 0.447vw);
    }


    .extraction-page-container,
    .extraction-card,
    .extraction-cases-inner,
    .extraction-flow-inner,
    .extraction-risks-section,
    .extraction-options-section,
    .extraction-transplant-section {
        width: 100%;
        max-width: calc(100% - 40px);
    }

    .extraction-worries-card,
    .extraction-checklist-card,
    .extraction-consult-card {
        padding: 40px 30px;
    }

    .extraction-lead-section,
    .extraction-worries-inner,
    .extraction-philosophy-inner,
    .extraction-flow-steps-wrap,
    .extraction-options-inner,
    .extraction-options-split-row,
    .extraction-transplant-inner,
    .extraction-checklist-inner,
    .extraction-consult-inner,
    .extraction-faq-inner {
        width: 100%;
    }

    /* Section 3 Cases: Wrap into 2 or 3 rows */
    .extraction-cases-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 60px 24px;
        margin-top: 60px;
    }

    .extraction-case-card {
        width: 280px;
        height: 250px;
    }

    .extraction-case-circle {
        width: 100px;
        height: 100px;
        top: -45px;
        border-width: 5px;
    }

    /* Philosophy: Wrap circles */
    .extraction-philosophy-circles {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .extraction-philosophy-circle-item {
        width: 280px;
        height: 280px;
        padding: 40px 24px;
    }

    .extraction-philosophy-section {
        padding: 80px 24px 140px;
        margin-bottom: -60px;
        box-sizing: border-box;
    }

    .extraction-philosophy-circle-title,
    .extraction-philosophy-circle-sub,
    .extraction-philosophy-pill {
        white-space: normal;
    }

    .extraction-philosophy-arrows {
        display: none;
    }

    .extraction-philosophy-capsule {
        width: 100%;
        min-width: 0;
        min-height: 0;
        border-radius: 40px;
        padding: 40px 24px;
    }

    .extraction-philosophy-pills {
        flex-direction: column;
        gap: 12px;
    }

    .extraction-pill--01,
    .extraction-pill--02,
    .extraction-pill--03 {
        width: 100%;
        max-width: 340px;
    }

    /* Flow: 2x2 grid */
    .extraction-flow-line-wrap {
        display: none;
    }

    .extraction-flow-steps-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px 24px;
    }

    .extraction-flow-step {
        width: calc(50% - 16px);
        max-width: 320px;
        height: 220px;
    }

    /* Risks: 2x3 or 3x2 grid */
    .extraction-risks-circles {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .extraction-worry-circle,
    .extraction-risk-circle {
        width: 190px;
        height: 190px;
    }

    .extraction-worry-circle-text {
        font-size: 16px;
    }

    /* Options: Stack */
    .extraction-option-wide-card {
        height: auto;
        padding: 40px 30px;
        margin-bottom: 30px;
    }

    .extraction-option-body-row {
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .extraction-option-img-col {
        width: 100%;
        max-width: 530px;
        height: auto;
        aspect-ratio: 530 / 330;
    }

    .extraction-option-info-col {
        width: 100%;
        height: auto;
        gap: 24px;
        align-items: center;
    }

    .extraction-option-wide-card .extraction-option-badge-box {
        height: auto;
    }

    .extraction-option-boxes-row {
        justify-content: center;
    }

    .extraction-options-split-row {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .extraction-option-split-card {
        width: 100%;
        max-width: 620px;
        height: auto;
        padding: 40px 30px;
    }

    .extraction-split-info-col .extraction-badge-box--white {
        height: auto;
    }

    .extraction-split-card-body {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .extraction-split-img-col {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 250 / 330;
    }

    .extraction-split-info-col {
        width: 100%;
        max-width: 320px;
    }

    .extraction-split-info-col .extraction-option-badge-box {
        width: 100%;
    }

    /* Transplant: Grid */
    .extraction-transplant-section {
        padding: 60px 30px;
        border-radius: 40px;
    }

    .extraction-transplant-row--top,
    .extraction-transplant-row--bottom {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .extraction-transplant-card {
        width: calc(50% - 16px);
        max-width: 380px;
        height: auto;
        min-height: 380px;
    }

    /* Checklist */
    .extraction-checklist-row {
        flex-wrap: wrap;
    }

    .extraction-checklist-item {
        width: calc(50% - 12px);
        min-width: 280px;
    }

    /* Consult */
    .extraction-consult-inner {
        flex-direction: column;
        gap: 40px;
    }

    .extraction-consult-img-col {
        width: 100%;
        max-width: 500px;
        height: auto;
        aspect-ratio: 600 / 400;
    }

    .extraction-consult-text-col {
        width: 100%;
    }

    /* Section 10: FAQ */
    .extraction-faq-card {
        padding: 40px 24px;
        margin-bottom: 50px;
    }

    .extraction-faq-inner {
        width: 100%;
    }

    .extraction-faq-title-row {
        gap: 20px;
        margin-bottom: 32px;
    }

    .extraction-faq-title-bar {
        width: 4px;
        height: 40px;
    }

    .extraction-faq-title {
        font-size: 26px;
    }

    .extraction-faq-item {
        padding: 24px 0;
    }

    .extraction-faq-q-row {
        gap: 20px;
    }

    .extraction-faq-q-badge {
        font-size: 28px;
        width: 24px;
    }

    .extraction-faq-question-text {
        font-size: 17px;
    }

    .extraction-faq-toggle-icon {
        width: 36px;
        height: 36px;
    }

    .extraction-faq-toggle-icon::before {
        width: 16px;
        height: 2px;
    }

    .extraction-faq-toggle-icon::after {
        width: 2px;
        height: 16px;
    }

    .extraction-faq-answer-inner {
        gap: 20px;
        padding-top: 16px;
    }

    .extraction-faq-a-badge {
        font-size: 28px;
        width: 24px;
    }

    .extraction-faq-answer-text {
        font-size: 16px;
    }
}

/* ==========================================================================
   Mobile Devices (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Layout & Containers */
    .extraction-page-main .sub-mv {
        margin-top: 90px;
    }

    .extraction-page-main .sub-mv-heading-card {
        min-width: 0;
        max-width: 100%;
    }

    .extraction-page-body {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .extraction-page-container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* Wave Background Elements - Hide on mobile to avoid horizontal scroll and visual clutter */
    .extraction-wave-decor {
        display: none;
    }

    /* Cards Common */
    .extraction-card,
    .extraction-breakout-card,
    .extraction-options-section,
    .extraction-transplant-section,
    .extraction-checklist-card,
    .extraction-faq-card,
    .extraction-consult-card {
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        padding: 32px 16px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    /* Headings */
    .extraction-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-bottom: 24px;
        min-height: auto;
        text-align: center;
    }

    .extraction-heading-decor {
        height: auto;
        display: flex;
        justify-content: center;
    }

    .extraction-heading-leaf {
        width: 16px;
        height: 16px;
        border-radius: 20px 2px 20px 2px;
        background-color: #2faa87;
    }

    .extraction-heading-title {
        font-family: "Shippori Mincho", serif;
        font-size: 20px;
        font-weight: 500;
        color: #63574d;
        line-height: 1.4;
        letter-spacing: 0.5px;
        word-break: break-word;
        margin: 0;
    }

    /* Common Typography */
    .extraction-lead-text,
    .extraction-worries-lead,
    .extraction-case-desc,
    .extraction-philosophy-circle-sub,
    .extraction-philosophy-capsule-text,
    .extraction-step-desc,
    .extraction-risks-lead,
    .extraction-risk-circle-text,
    .extraction-risks-footer-text,
    .extraction-option-lead,
    .extraction-transplant-lead,
    .extraction-transplant-feat-desc,
    .extraction-checklist-text,
    .extraction-checklist-note,
    .extraction-consult-bullets li,
    .extraction-consult-desc {
        font-size: 14px;
        line-height: 1.7;
    }

    /* ==========================================================================
       Section 1: Lead Section
       ========================================================================== */
    .extraction-lead-section {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 36px;
    }

    .extraction-lead-inner {
        gap: 16px;
        width: 100%;
    }

    .extraction-lead-title {
        font-size: 22px;
        line-height: 1.4;
    }

    .extraction-lead-text {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }

    /* ==========================================================================
       Section 2: Worries Card (お悩み)
       ========================================================================== */
    .extraction-worries-card {
        padding: 32px 16px;
        margin-bottom: 40px;
    }

    .extraction-worries-inner {
        width: 100%;
    }

    .extraction-worries-circles {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 6px;
        margin: 24px auto;
        max-width: 330px;
        width: 100%;
    }

    .extraction-worry-circle-item {
        width: auto;
    }

    .extraction-worry-circle {
        width: 162px;
        height: 162px;
        border-radius: 50%;
        background-color: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 4px;
        box-sizing: border-box;
    }

    .extraction-worry-circle-text {
        font-size: 15px;
        font-weight: 600;
        color: #2faa87;
        line-height: 1.45;
        letter-spacing: 0.3px;
    }

    .extraction-worries-lead {
        text-align: left;
        margin-top: 8px;
    }

    .extraction-worries-lead p {
        margin: 0 0 6px;
    }

    /* ==========================================================================
       Section 3: Cases Section (抜歯が必要になる主なケース)
       ========================================================================== */
    .extraction-cases-section {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 40px 16px;
        margin-bottom: 40px;
    }

    .extraction-cases-inner {
        width: 100%;
    }

    .extraction-cases-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        gap: clamp(40px, 12.821vw, 56px);
        margin-top: 36px;
        margin-top: clamp(32px, 9.231vw, 44px);
        width: 100%;
    }

    .extraction-case-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        background-color: #dcf7ef;
        border-radius: 16px;
        position: relative;
        padding: 50px 16px 20px;
        padding: clamp(42px, 12.821vw, 54px) 16px clamp(16px, 5.128vw, 22px);
        box-sizing: border-box;
        text-align: center;
    }

    .extraction-case-circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #ffffff;
        border: 3.5px solid #b7ede0;
        position: absolute;
        top: -35px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.04);
    }

    .extraction-case-icon {
        width: 44px;
        height: 44px;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
    }

    .extraction-case-name {
        font-size: 17px;
        font-weight: 600;
        color: #2faa87;
        margin: 0 0 4px;
        line-height: 1.35;
    }

    .extraction-case-desc {
        font-size: 13.5px;
        color: #575757;
        line-height: 1.45;
        margin: 0;
    }

    /* ==========================================================================
       Section 4: Philosophy Section (当院が大切にしていること)
       ========================================================================== */
    .extraction-philosophy-section {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 32px 16px;
        margin-bottom: 40px;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

    .extraction-philosophy-bg-wrap {
        display: none;
    }

    .extraction-philosophy-inner {
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .extraction-philosophy-circles-wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .extraction-philosophy-circles {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .extraction-philosophy-circle-item {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        border-radius: 16px;
        background-color: #faf9f6;
        border: 1px solid #e8e6df;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 18px 16px;
        gap: 8px;
        box-sizing: border-box;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.03);
    }

    .extraction-philosophy-circle-title {
        font-size: 17px;
        font-weight: 600;
        color: #2faa87;
        margin: 0;
        line-height: 1.4;
    }

    .extraction-philosophy-circle-sub {
        font-size: 14px;
        color: #575757;
        margin: 0;
        line-height: 1.4;
    }

    .extraction-philosophy-arrows {
        display: none;
    }

    .extraction-philosophy-capsule {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        border-radius: 20px;
        background-color: #ffffff;
        border: 2px solid #b7ede0;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.04);
        padding: 28px 16px;
        margin-top: 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .extraction-philosophy-capsule-head {
        text-align: center;
    }

    .extraction-capsule-head-main {
        font-size: 18px;
        font-weight: 500;
        color: #575757;
        line-height: 1.4;
        margin: 0 0 4px;
    }

    .extraction-capsule-head-strong {
        font-size: 20px;
        font-weight: 600;
        color: #2faa87;
        line-height: 1.4;
        margin: 0;
    }

    .extraction-philosophy-pills {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .extraction-philosophy-pill {
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    .extraction-pill--01 {
        background-color: #f1f1f1;
        color: #575757;
    }

    .extraction-pill--02 {
        background-color: #e7f4cb;
        color: #575757;
    }

    .extraction-pill--03 {
        background-color: #dcf7ef;
        color: #2faa87;
    }

    .extraction-philosophy-capsule-text {
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .extraction-philosophy-capsule-text p {
        margin: 0 0 4px;
    }

    /* ==========================================================================
       Section 5: Flow Section (抜歯の流れ)
       ========================================================================== */
    .extraction-flow-section {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background-color: #ffffff;
        border-radius: 20px;
        padding: 32px 16px;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    .extraction-flow-inner {
        width: 100%;
    }

    .extraction-flow-steps-wrap {
        margin-top: 36px;
        width: 100%;
    }

    .extraction-flow-steps-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
    }

    .extraction-flow-step {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        background-color: #f3f3f3;
        border-radius: 16px;
        padding: 28px 16px 18px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }

    .extraction-step-badge {
        font-family: "Cormorant Infant", serif;
        font-size: 36px;
        font-weight: 600;
        color: #63574d;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        line-height: 1;
        box-shadow: none;
    }

    .extraction-step-name {
        font-size: 16px;
        font-weight: 600;
        color: #2faa87;
        margin: 0 0 8px;
        line-height: 1.4;
    }

    .extraction-step-desc {
        font-size: 14px;
        color: #575757;
        line-height: 1.6;
        margin: 0;
    }

    .extraction-flow-guide-arrows {
        display: none;
    }

    /* ==========================================================================
       Section 6: Risks Section (放置するリスク)
       ========================================================================== */
    .extraction-risks-section {
        width: 100%;
        max-width: 100%;
        margin-bottom: 40px;
    }

    .extraction-risks-inner {
        width: 100%;
    }

    .extraction-risks-lead {
        font-size: 15px;
        text-align: center;
        margin: 0 0 24px;
    }

    .extraction-risks-circles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 340px;
        margin: 0 auto 24px;
    }

    .extraction-risk-circle-item {
        width: 100%;
    }

    .extraction-risk-circle {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 160px;
        border-radius: 50%;
        background-color: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .extraction-risk-circle-text {
        font-size: 13.5px;
        font-weight: 600;
        color: #575757;
        line-height: 1.4;
    }

    .extraction-risks-footer-text {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        margin: 0;
    }

    /* ==========================================================================
       Section 7: Options Section (治療選択肢)
       ========================================================================== */
    .extraction-options-section {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 32px 16px;
        margin-bottom: 40px;
    }

    .extraction-options-inner {
        gap: 24px;
        width: 100%;
    }

    .extraction-heading--options {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 0;
    }

    .extraction-heading--options .extraction-heading-decor {
        height: auto;
        margin-top: -4px;
    }

    .extraction-heading--options .extraction-heading-leaf {
        width: 16px;
        height: 16px;
        border-radius: 20px 2px 20px 2px;
    }

    .extraction-option-wide-card {
        width: 100%;
        height: auto;
        padding: 28px 16px;
        border-radius: 16px;
        background-color: #f3f3f3;
        margin-bottom: 0;
        box-sizing: border-box;
        gap: 20px;
    }

    .extraction-option-header-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        width: 100%;
    }

    .extraction-option-num {
        font-size: 24px;
    }

    .extraction-option-title {
        font-size: 24px;
    }

    .extraction-option-lead {
        font-size: 14px;
    }

    .extraction-option-body-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        height: auto;
        width: 100%;
    }

    .extraction-option-img-col {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 14px;
    }

    .extraction-option-info-col {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .extraction-option-boxes-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .extraction-option-badge-box {
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 20px 16px;
        border-radius: 12px;
        gap: 14px;
    }

    .extraction-badge-box-label {
        font-size: 16px;
    }

    .extraction-badge-box-list {
        gap: 10px;
    }

    .extraction-badge-box-list li {
        font-size: 14px;
        gap: 6px;
    }

    .extraction-options-split-row {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .extraction-option-split-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 28px 16px;
        border-radius: 16px;
        background-color: #f3f3f3;
        box-sizing: border-box;
        gap: 20px;
    }

    .extraction-split-card-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin-bottom: 0;
    }

    .extraction-split-img-col {
        width: 100%;
        max-width: 100%;
        /* height: auto; */
        /* aspect-ratio: 16 / 10; */
        border-radius: 14px;
    }

    .extraction-split-info-col {
        width: 100%;
        max-width: 100%;
        gap: 12px;
    }

    .extraction-split-info-col .extraction-option-badge-box,
    .extraction-option-split-card .extraction-split-info-col .extraction-badge-box--white,
    .extraction-option-split-card:first-child .extraction-split-info-col .extraction-badge-box--white,
    .extraction-option-split-card:last-child .extraction-split-info-col .extraction-badge-box--white,
    .extraction-option-split-card .extraction-split-info-col .extraction-badge-box--lightgreen {
        width: 100%;
        height: auto !important;
        min-height: auto !important;
        padding: 20px 16px;
        border-radius: 12px;
    }

    .extraction-split-info-col .extraction-badge-box--white .extraction-badge-box-list li,
    .extraction-split-info-col .extraction-badge-box--lightgreen .extraction-badge-box-list li {
        white-space: normal;
        word-break: break-word;
    }

    .extraction-detail-btn {
        width: 100%;
        max-width: 280px;
        height: 50px;
        font-size: 16px;
        line-height: 1;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        align-self: center;
        margin: 0 auto;
    }

    .extraction-detail-btn span {
        display: inline-block;
        line-height: 1;
    }

    .extraction-btn-arrow {
        width: 18px;
        height: 18px;
        display: block;
        transform: rotate(90deg);
        flex-shrink: 0;
        margin: 0;
    }

    /* ==========================================================================
       Section 8: Transplant Section (歯の移植)
       ========================================================================== */
    .extraction-transplant-section {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 40px 16px;
        margin-bottom: 40px;
    }

    .extraction-transplant-inner {
        gap: 20px;
        width: 100%;
    }

    .extraction-transplant-quotes {
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
        margin: 0;
    }

    .extraction-transplant-lead {
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
        margin: 0;
    }

    .extraction-transplant-lead br {
        display: none;
    }

    .extraction-transplant-cards-wrap {
        gap: 14px;
        width: 100%;
    }

    .extraction-transplant-row--top,
    .extraction-transplant-row--bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .extraction-transplant-card {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        padding: 24px 16px;
        border-radius: 14px;
        gap: 12px;
        box-sizing: border-box;
    }

    .extraction-transplant-card-head {
        gap: 4px;
    }

    .extraction-transplant-feat-label {
        font-size: 15px;
    }

    .extraction-transplant-feat-title {
        font-size: 18px;
        min-height: auto;
    }

    .extraction-transplant-feat-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    /* ==========================================================================
       Section 9: Checklist Section (チェックリスト)
       ========================================================================== */
    .extraction-checklist-card {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 40px 16px;
        margin-bottom: 40px;
    }

    .extraction-checklist-inner {
        gap: 20px;
        width: 100%;
    }

    .extraction-checklist-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        width: 100%;
    }

    .extraction-checklist-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .extraction-checklist-item {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        padding: 14px 12px;
        gap: 10px;
        border-radius: 12px;
        box-sizing: border-box;
    }

    .extraction-checklist-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .extraction-checklist-text {
        font-size: 14px;
        line-height: 1.5;
    }

    .extraction-checklist-note {
        width: 100%;
        max-width: 100%;
        font-size: 13.5px;
        line-height: 1.7;
        margin-top: 16px;
        text-align: left;
    }

    /* ==========================================================================
       Section 10: FAQ Section
       ========================================================================== */
    .extraction-faq-card {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 32px 16px;
        margin-bottom: 40px;
    }

    .extraction-faq-inner {
        width: 100%;
    }

    .extraction-faq-title-row {
        gap: 12px;
        margin-bottom: 24px;
    }

    .extraction-faq-title-bar {
        height: 28px;
        width: 3px;
    }

    .extraction-faq-title {
        font-size: 20px;
    }

    .extraction-faq-item {
        padding: 16px 0;
    }

    .extraction-faq-question-btn {
        align-items: flex-start;
    }

    .extraction-faq-q-row {
        align-items: flex-start;
        gap: 12px;
    }

    .extraction-faq-q-badge,
    .extraction-faq-a-badge {
        font-size: 22px;
        width: 20px;
        line-height: 1.2;
        flex-shrink: 0;
    }

    .extraction-faq-question-text {
        font-size: 15px;
        line-height: 1.5;
    }

    .extraction-faq-toggle-icon {
        width: 32px;
        height: 32px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .extraction-faq-toggle-icon::before {
        width: 12px;
    }

    .extraction-faq-toggle-icon::after {
        height: 12px;
    }

    .extraction-faq-answer-inner {
        gap: 12px;
        padding-top: 12px;
    }

    .extraction-faq-answer-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /* ==========================================================================
       Section 11: Consult Section (ご相談)
       ========================================================================== */
    .extraction-consult-card {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 40px 16px;
        margin-bottom: 40px;
    }

    .extraction-consult-inner {
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .extraction-consult-img-col {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
    }

    .extraction-consult-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .extraction-consult-text-col {
        width: 100%;
        padding-top: 0;
        gap: 20px;
    }

    .extraction-consult-bullets {
        padding-left: 0;
        gap: 10px;
    }

    .extraction-consult-bullets li {
        font-size: 15px;
        font-weight: 600;
        color: #2faa87;
    }

    .extraction-consult-desc {
        padding-left: 0;
        font-size: 14px;
        line-height: 1.7;
    }

    /* 1800px 以下の vw 指定が SP で極端に小さくならないよう px に戻す */
    .extraction-lead-spacer {
        height: 16px;
    }

    .extraction-option-heading {
        gap: 4px;
    }

    .extraction-option-badge-box {
        gap: 16px;
    }

    .extraction-split-info-col .extraction-option-badge-box {
        gap: 16px;
    }

    .extraction-transplant-feat-label {
        gap: 4px;
    }

    .extraction-checklist-note p {
        margin: 0 0 4px;
    }

    .extraction-faq-title-bar {
        border-radius: 2px;
    }

    .extraction-faq-question-btn {
        gap: 16px;
    }

    .extraction-faq-answer-inner {
        padding-bottom: 8px;
    }

    .extraction-faq-answer-text {
        padding-top: 6px;
    }

    .extraction-consult-bullets li {
        gap: 8px;
    }

    .extraction-consult-desc p {
        margin: 0 0 4px;
    }
}