/* =========================================================
   SURGICAL ORTHODONTIC
   外科矯正（骨切り）

   DESIGN RULE
   ---------------------------------------------------------
   ・lower-hero / h1 は common.css
   ・ページ上部のみ「文章 + 画像」の2カラム
   ・画像等がない通常文章は1カラム
   ・意味のない max-width で本文を狭めない
   ・強制改行を前提にしない
========================================================= */


/* =========================================================
   BASE
========================================================= */

.surgical-page {
    background: #ffffff;
    color: #292e2b;
}

.surgical-page .container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.surgical-page .section-en {
    margin: 0 0 10px;
    color: #70897d;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.22em;
}

.surgical-page .section-head {
    width: 100%;
    margin: 0 0 42px;
}

.surgical-page .section-head h2 {
    margin: 0;
    color: #252c28;
    font-size: 31px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.035em;
}

.surgical-page .section-lead {
    width: 100%;
    margin: 20px 0 0;
    color: #59625d;
    font-size: 15px;
    line-height: 2.05;
}

.surgical-page .wide-text {
    width: 100%;
}

.surgical-page .wide-text p {
    width: 100%;
    margin: 0 0 20px;
    color: #56605a;
    font-size: 15px;
    line-height: 2.1;
}

.surgical-page .wide-text p:last-child {
    margin-bottom: 0;
}

.surgical-page strong {
    color: #304b3d;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.surgical-page .breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid #e5e8e6;
}

.surgical-page .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 14px 0;
    list-style: none;
    color: #818985;
    font-size: 11px;
}

.surgical-page .breadcrumb li {
    margin: 0;
    padding: 0;
}

.surgical-page .breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 7px;
    color: #b6bbb8;
}

.surgical-page .breadcrumb a {
    color: #66716b;
    text-decoration: none;
}


/* =========================================================
   INTRO
   LEFT TEXT / RIGHT IMAGE
========================================================= */

.surgical-intro {
    padding: 70px 0;
}

.surgical-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(360px, 0.8fr);
    gap: 70px;
    align-items: center;
}

.surgical-intro__content {
    min-width: 0;
}

.surgical-intro__content h2 {
    margin: 0;
    color: #252c28;
    font-size: 35px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.025em;
}

.surgical-intro__text {
    width: 100%;
    margin-top: 30px;
}

.surgical-intro__text p {
    width: 100%;
    margin: 0 0 18px;
    color: #56605a;
    font-size: 15px;
    line-height: 2.05;
}

.surgical-intro__text p:last-child {
    margin-bottom: 0;
}

.surgical-intro__image {
    width: 100%;
}

.surgical-intro__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}


/* =========================================================
   WHAT
========================================================= */

.surgical-what {
    padding: 70px 0;
    background: #edf2ef;
}


/* =========================================================
   CONCERNS
========================================================= */

.surgical-concerns {
    padding: 70px 0;
}

.concern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #d7ded9;
    border-left: 1px solid #d7ded9;
}

.concern-card {
    min-height: 260px;
    padding: 30px;
    border-right: 1px solid #d7ded9;
    border-bottom: 1px solid #d7ded9;
}

.concern-card__number {
    display: block;
    margin: 0 0 34px;
    color: #93a49b;
    font-size: 24px;
    line-height: 1;
}

.concern-card h3 {
    margin: 0 0 14px;
    color: #2d3b33;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}

.concern-card p {
    margin: 0;
    color: #616b65;
    font-size: 13px;
    line-height: 2;
}

.diagnosis-message {
    width: 100%;
    margin-top: 35px;
    padding: 30px 35px;
    background: #f5f3ef;
    border-left: 3px solid #738b7e;
}

.diagnosis-message strong {
    display: block;
    margin-bottom: 10px;
    color: #30483b;
    font-size: 16px;
    line-height: 1.8;
}

.diagnosis-message p {
    margin: 0;
    color: #626b66;
    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   DIFFERENCE
========================================================= */

.surgical-difference {
    padding: 70px 0;
    background: #f5f3ef;
}

.difference-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.difference-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.difference-table th,
.difference-table td {
    padding: 20px 22px;
    border: 1px solid #d8d7d2;
    font-size: 13px;
    line-height: 1.75;
    text-align: left;
    vertical-align: top;
}

.difference-table thead th {
    background: #30483b;
    color: #ffffff;
    font-weight: 500;
}

.difference-table thead th:first-child {
    background: #263b31;
}

.difference-table tbody th {
    width: 23%;
    background: #ffffff;
    color: #34423b;
    font-weight: 600;
}

.difference-table tbody td {
    background: #ffffff;
    color: #5b645f;
}

.difference-table tbody td:last-child {
    background: #edf3f0;
}


/* =========================================================
   SURGERY METHODS
========================================================= */

.surgery-types {
    padding: 70px 0;
}

.surgery-method {
    width: 100%;
    padding: 42px 0;
    border-top: 1px solid #d7ded9;
}

.surgery-method:last-child {
    border-bottom: 1px solid #d7ded9;
}

.surgery-method__head {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.surgery-method__number {
    flex: 0 0 auto;
    color: #91a299;
    font-size: 37px;
    line-height: 1;
}

.surgery-method__en {
    margin: 0 0 7px;
    color: #81938a;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.surgery-method h3 {
    margin: 0;
    color: #29372f;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.55;
}

.surgery-method__target {
    margin: 24px 0 18px;
    color: #527060;
    font-size: 13px;
    font-weight: 600;
}

.surgery-method__text {
    width: 100%;
}

.surgery-method__text p {
    width: 100%;
    margin: 0 0 14px;
    color: #606963;
    font-size: 14px;
    line-height: 2;
}

.surgery-method__text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   OCCLUSION
========================================================= */

.surgical-occlusion {
    padding: 70px 0;
    background: #263d33;
}

.surgical-occlusion .section-en {
    color: #afc1b7;
}

.surgical-occlusion .section-head h2 {
    color: #ffffff;
}

.occlusion-text {
    width: 100%;
}

.occlusion-text p {
    width: 100%;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 2.1;
}

.occlusion-text p:last-child {
    margin-bottom: 0;
}

.occlusion-message {
    width: 100%;
    margin-top: 38px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.occlusion-message span {
    display: block;
    margin-bottom: 9px;
    color: #a9beb3;
    font-size: 9px;
    letter-spacing: 0.22em;
}

.occlusion-message strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    line-height: 2;
}


/* =========================================================
   DOCTOR
========================================================= */

.surgical-doctor {
    padding: 70px 0;
    background: #edf2ef;
}

.doctor-box {
    width: 100%;
    padding: 45px 50px;
    background: #ffffff;
}

.doctor-box__position {
    margin: 0 0 7px;
    color: #71877b;
    font-size: 12px;
}

.doctor-box h3 {
    margin: 0;
    color: #28352e;
    font-size: 29px;
    font-weight: 500;
    line-height: 1.5;
}

.doctor-box__en {
    margin: 5px 0 0;
    color: #8b9992;
    font-size: 9px;
    letter-spacing: 0.2em;
}

.doctor-box__text {
    width: 100%;
    margin-top: 28px;
}

.doctor-box__text p {
    width: 100%;
    margin: 0 0 15px;
    color: #59635d;
    font-size: 14px;
    line-height: 2;
}

.doctor-box__text p:last-child {
    margin-bottom: 0;
}

.doctor-record {
    width: 100%;
    margin-top: 30px;
    padding: 24px 28px;
    background: #f3f6f4;
}

.doctor-record span {
    display: block;
    margin-bottom: 7px;
    color: #7e9187;
    font-size: 8px;
    letter-spacing: 0.2em;
}

.doctor-record strong {
    display: block;
    color: #33463c;
    font-size: 15px;
}

.doctor-record p {
    margin: 8px 0 0;
    color: #606a64;
    font-size: 13px;
}

.doctor-record b {
    margin-left: 8px;
    color: #30483b;
    font-size: 22px;
    font-weight: 500;
}

/* 経歴（チームページの経歴と同じ並び：年／内容） */
.doctor-career {
    width: 100%;
    margin-top: 30px;
}

.doctor-career > span {
    display: block;
    margin-bottom: 7px;
    color: #7e9187;
    font-size: 8px;
    letter-spacing: 0.2em;
}

.doctor-career > strong {
    display: block;
    margin-bottom: 10px;
    color: #33463c;
    font-size: 15px;
}

.doctor-career dl {
    margin: 0;
    border-top: 1px solid #dde5e0;
}

.doctor-career dl > div {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 11px 0;
    border-bottom: 1px solid #dde5e0;
}

.doctor-career dt {
    color: #71877b;
    font-family: "Times New Roman", serif;
    font-size: 13px;
}

.doctor-career dd {
    margin: 0;
    color: #59635d;
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   FLOW
========================================================= */

.surgical-flow {
    padding: 70px 0;
}

.flow-list {
    width: 100%;
    border-top: 1px solid #d7ded9;
}

.flow-item {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 25px;
    width: 100%;
    padding: 34px 0;
    border-bottom: 1px solid #d7ded9;
}

.flow-item__number {
    color: #8fa198;
    font-size: 27px;
    line-height: 1;
}

.flow-item__en {
    margin: 0 0 7px;
    color: #82958b;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.flow-item h3 {
    margin: 0 0 13px;
    color: #2e3a34;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.6;
}

.flow-item div > p:last-child {
    width: 100%;
    margin: 0;
    color: #5e6762;
    font-size: 13px;
    line-height: 2;
}


/* =========================================================
   DOWNTIME
========================================================= */

.surgical-downtime {
    padding: 70px 0;
    background: #f5f3ef;
}

.downtime-main {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 35px;
}

.downtime-main > span {
    color: #687a70;
    font-size: 12px;
}

.downtime-main strong {
    color: #30483b;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;
}

.downtime-main b {
    color: #809087;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
}


/* =========================================================
   PRICE
========================================================= */

.surgical-price {
    padding: 70px 0;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.price-card {
    border: 1px solid #d9dfdc;
    background: #ffffff;
}

.price-card h3 {
    margin: 0;
    padding: 20px 24px;
    background: #edf2ef;
    color: #304039;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

.price-card dl {
    margin: 0;
}

.price-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 24px;
    border-bottom: 1px solid #e4e7e5;
}

.price-card dl > div:last-child {
    border-bottom: 0;
}

.price-card dt,
.price-card dd {
    margin: 0;
    color: #5c6660;
    font-size: 13px;
}

.price-card dd {
    font-weight: 500;
    text-align: right;
}

.price-card .price-card__total {
    padding-top: 18px;
    padding-bottom: 18px;
    background: #30483b;
}

.price-card .price-card__total dt,
.price-card .price-card__total dd {
    color: #ffffff;
}

.price-card .price-card__total dd {
    font-size: 18px;
}

.price-note {
    margin: 22px 0 0;
    color: #7b837f;
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   RISK
========================================================= */

.surgical-risk {
    padding: 70px 0;
    background: #f5f3ef;
}

.risk-list {
    width: 100%;
    background: #ffffff;
    padding: 20px 38px;
}

.risk-list > div {
    position: relative;
    width: 100%;
    padding: 16px 0 16px 28px;
    border-bottom: 1px solid #e0e2df;
    color: #59615d;
    font-size: 13px;
    line-height: 1.9;
}

.risk-list > div:last-child {
    border-bottom: 0;
}

.risk-list > div::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #88785e;
}


/* =========================================================
   FAQ
========================================================= */

.surgical-faq {
    padding: 70px 0;
    background: #edf2ef;
}

.faq-list {
    width: 100%;
}

.faq-item {
    width: 100%;
    border-top: 1px solid #cbd6d0;
}

.faq-item:last-child {
    border-bottom: 1px solid #cbd6d0;
}

.faq-item h3 {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 15px;
    width: 100%;
    margin: 0;
    padding: 27px 0 18px;
    color: #29342e;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
}

.faq-item h3 span {
    color: #557565;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.faq-item__answer {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 15px;
    width: 100%;
    padding: 0 0 30px;
}

.faq-item__answer > span {
    color: #9c7b48;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.faq-item__answer p {
    width: 100%;
    margin: 0;
    color: #59615d;
    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   CONSULTATION
========================================================= */

.surgical-consultation {
    padding: 70px 0;
}

.consultation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
    margin-top: 35px;
}

.consultation-actions a {
    text-decoration: none;
}

.consultation-tel {
    padding: 22px 25px;
    border: 1px solid #bdcac3;
}

.consultation-tel > span {
    display: block;
    margin-bottom: 5px;
    color: #819188;
    font-size: 8px;
    letter-spacing: 0.18em;
}

.consultation-tel strong {
    display: block;
    color: #30483b;
    font-size: 23px;
    font-weight: 500;
}

.consultation-tel small {
    display: block;
    margin-top: 4px;
    color: #7a847f;
    font-size: 10px;
}

.consultation-mail {
    position: relative;
    padding: 22px 60px 22px 25px;
    background: #30483b;
}

.consultation-mail > span {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 8px;
    letter-spacing: 0.18em;
}

.consultation-mail strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
}

.consultation-mail b {
    position: absolute;
    top: 50%;
    right: 25px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    transform: translateY(-50%);
}

.reservation-box {
    width: 100%;
    margin-top: 55px;
    padding-top: 35px;
    border-top: 1px solid #dce2df;
}

.reservation-box__en {
    margin: 0 0 6px;
    color: #71867b;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.reservation-box h3 {
    margin: 0 0 22px;
    color: #29372f;
    font-size: 22px;
    font-weight: 500;
}

.reservation-box__iframe {
    width: 580px;
    max-width: 100%;
}

.reservation-box__iframe iframe {
    display: block;
    width: 100%;
    height: 210px;
    border: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .surgical-page .container {
        width: calc(100% - 36px);
    }


    /* =====================================================
       COMMON
    ====================================================== */

    .surgical-page .section-head {
        margin-bottom: 30px;
    }

    .surgical-page .section-head h2 {
        font-size: 24px;
        line-height: 1.6;
    }

    .surgical-page .section-lead {
        margin-top: 16px;
        font-size: 14px;
        line-height: 2;
    }

    .surgical-page .wide-text p {
        font-size: 14px;
        line-height: 2;
    }


    /* =====================================================
       INTRO
    ====================================================== */

    .surgical-intro {
        padding: 45px 0;
    }

    .surgical-intro__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .surgical-intro__content h2 {
        font-size: 25px;
        line-height: 1.6;
    }

    .surgical-intro__text {
        margin-top: 24px;
    }

    .surgical-intro__text p {
        font-size: 14px;
        line-height: 2;
    }

    .surgical-intro__image {
        width: 100%;
    }

    .surgical-intro__image img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }


    /* =====================================================
       WHAT
    ====================================================== */

    .surgical-what {
        padding: 50px 0;
    }


    /* =====================================================
       CONCERNS
    ====================================================== */

    .surgical-concerns {
        padding: 50px 0;
    }

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

    .concern-card {
        min-height: 0;
        padding: 25px 22px;
    }

    .concern-card__number {
        margin-bottom: 20px;
        font-size: 21px;
    }

    .diagnosis-message {
        padding: 23px 20px;
    }


    /* =====================================================
       DIFFERENCE
    ====================================================== */

    .surgical-difference {
        padding: 50px 0;
    }

    .difference-table th,
    .difference-table td {
        padding: 15px;
        font-size: 12px;
    }


    /* =====================================================
       SURGERY METHODS
    ====================================================== */

    .surgery-types {
        padding: 50px 0;
    }

    .surgery-method {
        padding: 30px 0;
    }

    .surgery-method__head {
        gap: 15px;
    }

    .surgery-method__number {
        font-size: 24px;
    }

    .surgery-method h3 {
        font-size: 19px;
    }

    .surgery-method__target {
        margin-top: 20px;
    }

    .surgery-method__text p {
        font-size: 13px;
    }


    /* =====================================================
       OCCLUSION
    ====================================================== */

    .surgical-occlusion {
        padding: 50px 0;
    }

    .occlusion-text p {
        font-size: 14px;
        line-height: 2;
    }

    .occlusion-message strong {
        font-size: 14px;
    }


    /* =====================================================
       DOCTOR
    ====================================================== */

    .surgical-doctor {
        padding: 50px 0;
    }

    .doctor-box {
        padding: 30px 22px;
    }

    .doctor-box h3 {
        font-size: 24px;
    }

    .doctor-record {
        padding: 22px 20px;
    }


    /* =====================================================
       FLOW
    ====================================================== */

    .surgical-flow {
        padding: 50px 0;
    }

    .flow-item {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 12px;
        padding: 28px 0;
    }

    .flow-item__number {
        font-size: 21px;
    }

    .flow-item h3 {
        font-size: 17px;
    }


    /* =====================================================
       DOWNTIME
    ====================================================== */

    .surgical-downtime {
        padding: 50px 0;
    }

    .downtime-main {
        gap: 10px;
        margin-bottom: 28px;
    }

    .downtime-main strong {
        font-size: 60px;
    }


    /* =====================================================
       PRICE
    ====================================================== */

    .surgical-price {
        padding: 50px 0;
    }

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

    .price-card dl > div {
        padding: 13px 18px;
    }


    /* =====================================================
       RISK
    ====================================================== */

    .surgical-risk {
        padding: 50px 0;
    }

    .risk-list {
        padding: 15px 20px;
    }

    .risk-list > div {
        padding-left: 25px;
    }


    /* =====================================================
       FAQ
    ====================================================== */

    .surgical-faq {
        padding: 50px 0;
    }

    .faq-item h3,
    .faq-item__answer {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 10px;
    }

    .faq-item h3 {
        font-size: 14px;
    }

    .faq-item__answer p {
        font-size: 13px;
    }


    /* =====================================================
       CONSULTATION
    ====================================================== */

    .surgical-consultation {
        padding: 50px 0;
    }

    .consultation-actions {
        grid-template-columns: 1fr;
    }

    .reservation-box {
        margin-top: 40px;
    }

    .reservation-box__iframe {
        width: 100%;
    }

    .reservation-box__iframe iframe {
        height: 240px;
    }

}


/* =========================================================
   SURGERY METHOD IMAGE
========================================================= */

.surgery-method__image {
    width: 100%;
    margin: 25px 0 30px;
}

.surgery-method__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   DOCTOR IMAGE
========================================================= */

.doctor-box {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

.doctor-box__image {
    width: 100%;
}

.doctor-box__image img {
    display: block;
    width: 100%;
    height: auto;
}

.doctor-box__content {
    min-width: 0;
}

/* =========================================================
   FLOW IMAGE
========================================================= */

.flow-item__content {
    min-width: 0;
    width: 100%;
}

.flow-item__image {
    width: 100%;
    margin: 22px 0 24px;
}

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

@media (max-width: 767px) {
    .flow-item__image {
        margin: 18px 0 20px;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .surgery-method__image {
        margin: 20px 0 25px;
    }

    .doctor-box {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .doctor-box__image {
        width: 100%;
    }

    .surgical-flow__image {
        margin-bottom: 35px;
    }
}

/* =========================================================
   SURGICAL YOUTUBE
========================================================= */

.surgical-intro__image.surgical-video {
    width: 100%;
    height: auto;
}

.surgical-video__button {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #111;
    cursor: pointer;
    appearance: none;
}

.surgical-video__button img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.surgical-video__button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .12);
    transition: background .3s ease;
}

.surgical-video__button:hover::after {
    background: rgba(0, 0, 0, .2);
}

.surgical-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 82px;
    height: 82px;
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
}

.surgical-video__play svg {
    display: block;
    width: 100%;
    height: 100%;
}

.surgical-video__play circle {
    fill: rgba(255, 255, 255, .92);
    stroke: rgba(255, 255, 255, .4);
    stroke-width: 1;
}

.surgical-video__play path {
    fill: #80633c;
}

.surgical-video__button:hover .surgical-video__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.surgical-video__label {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #fff;
    line-height: 1.3;
}

.surgical-video__label small {
    margin-bottom: 3px;
    font-size: 10px;
    letter-spacing: .18em;
}

.surgical-video__label strong {
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .surgical-video__button {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .surgical-video__play {
        width: 60px;
        height: 60px;
    }

    .surgical-video__label {
        right: 14px;
        bottom: 12px;
    }

    .surgical-video__label small {
        font-size: 9px;
    }

    .surgical-video__label strong {
        font-size: 12px;
    }
}

/* =========================================================
   YOUTUBE MODAL
========================================================= */

.youtube-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
}

.youtube-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.youtube-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .86);
}

.youtube-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
}

.youtube-modal__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.youtube-modal__player iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-modal__close {
    position: absolute;
    top: -48px;
    right: 0;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.youtube-modal__close span {
    position: absolute;
    top: 18px;
    left: 3px;
    width: 32px;
    height: 1px;
    background: #fff;
}

.youtube-modal__close span:first-child {
    transform: rotate(45deg);
}

.youtube-modal__close span:last-child {
    transform: rotate(-45deg);
}

body.youtube-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .surgical-video__play {
        width: 62px;
        height: 62px;
    }

    .surgical-video__label {
        right: 14px;
        bottom: 12px;
    }

    .surgical-video__label small {
        font-size: 9px;
    }

    .surgical-video__label strong {
        font-size: 12px;
    }

    .youtube-modal {
        padding: 20px;
    }

    .youtube-modal__dialog {
        width: 100%;
    }

    .youtube-modal__close {
        top: -44px;
    }
}


/* =========================================================
   SURGICAL METHODS
========================================================= */

.surgery-types {
    padding: 70px 0;
    background: #fff;
}

.surgery-types .section-head {
    margin-bottom: 60px;
}

.surgery-method {
    padding: 50px 0;
    border-top: 1px solid #ded8cf;
}

.surgery-method:last-child {
    border-bottom: 1px solid #ded8cf;
}

.surgery-method__head {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 30px;
}

.surgery-method__number {
    display: block;
    flex: 0 0 auto;
    color: #9b835e;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
}

.surgery-method__en {
    margin: 0 0 5px;
    color: #9b835e;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .15em;
}

.surgery-method__head h3 {
    margin: 0;
    color: #292621;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
}

.surgery-method__grid {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    align-items: start;
    width: 100%;
}

.surgery-method__images {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.surgery-method__image {
    width: 100%;
    margin: 0;
    padding: 0;
}

.surgery-method__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.surgery-method__content {
    min-width: 0;
    padding: 0 0 0 48px;
}

.surgery-method__target {
    display: inline-block;
    margin: 0 0 24px;
    padding: 9px 14px;
    background: #f4f1ec;
    color: #675b4b;
    font-size: 13px;
    line-height: 1.6;
}

.surgery-method__text {
    margin: 0;
}

.surgery-method__text p {
    margin: 0 0 18px;
    color: #49453f;
    font-size: 15px;
    line-height: 2;
}

.surgery-method__text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .surgery-types {
        padding: 50px 0;
    }

    .surgery-types .section-head {
        margin-bottom: 40px;
    }

    .surgery-method {
        padding: 38px 0;
    }

    .surgery-method__head {
        gap: 14px;
        margin-bottom: 22px;
    }

    .surgery-method__number {
        font-size: 34px;
    }

    .surgery-method__head h3 {
        font-size: 21px;
    }

    .surgery-method__grid {
        display: block;
    }

    .surgery-method__images {
        gap: 12px;
    }

    .surgery-method__content {
        padding: 22px 0 0;
    }

    .surgery-method__target {
        margin-bottom: 18px;
        font-size: 12px;
    }

    .surgery-method__text p {
        margin-bottom: 14px;
        font-size: 14px;
        line-height: 1.9;
    }
}

/* =========================================================
   TREATMENT FLOW
========================================================= */

.flow-list {
    width: 100%;
}

.flow-item {
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    width: 100%;
    padding: 36px 0;
    border-top: 1px solid #ded8cf;
}

.flow-item:last-child {
    border-bottom: 1px solid #ded8cf;
}

.flow-item__image {
    width: 100%;
    margin: 0;
}

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

.flow-item__content {
    width: 100%;
    min-width: 0;
    padding-left: 48px;
}

.flow-item__number {
    display: block;
    margin: 0 0 12px;
    color: #9b835e;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
}

.flow-item__en {
    margin: 0 0 5px;
    color: #9b835e;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .15em;
}

.flow-item__content h3 {
    margin: 0 0 18px;
    color: #292621;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

.flow-item__content > p:last-child {
    margin: 0;
    color: #49453f;
    font-size: 15px;
    line-height: 2;
}

@media (max-width: 767px) {
    .flow-item {
        display: block;
        padding: 30px 0;
    }

    .flow-item__image {
        width: 100%;
        margin: 0 0 20px;
    }

    .flow-item__content {
        padding-left: 0;
    }

    .flow-item__number {
        margin-bottom: 10px;
        font-size: 34px;
    }

    .flow-item__content h3 {
        margin-bottom: 14px;
        font-size: 21px;
    }

    .flow-item__content > p:last-child {
        font-size: 14px;
        line-height: 1.9;
    }
}