/* =========================================================
   PERIODONTAL
========================================================= */

.periodontal-main {
    background: #fff;
    color: #303a35;
}

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

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

.periodontal-main .section {
    padding: 70px 0;
}

.periodontal-main .section--gray {
    background: #f5f7f5;
}


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

.periodontal-main .breadcrumb {
    border-bottom: 1px solid #e2e7e4;
    background: #fff;
}

.periodontal-main .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 14px 0;
    list-style: none;
    color: #818a85;
    font-size: 11px;
}

.periodontal-main .breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 7px;
    color: #b4bbb7;
}

.periodontal-main .breadcrumb a {
    color: #65716a;
    text-decoration: none;
}


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

.periodontal-main .section-en {
    margin: 0 0 10px;
    color: #718a7c;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .22em;
}

.periodontal-main .section-heading {
    width: 100%;
    margin-bottom: 48px;
}

.periodontal-main .section-heading h2,
.periodontal-main .periodontal-intro h2,
.periodontal-main .periodontal-image-text h2,
.periodontal-main .blue-radical-lead h2,
.periodontal-main .periodontal-closing h2,
.periodontal-main .periodontal-reservation h2 {
    margin: 0;
    color: #29372f;
    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .025em;
}

.periodontal-main .section-heading__lead {
    max-width: 900px;
    margin: 20px 0 0;
    color: #5d6962;
    font-size: 15px;
    line-height: 2;
}


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

.periodontal-intro {
    padding-top: 80px !important;
}

.periodontal-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 65px;
    align-items: center;
}

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

.periodontal-intro__content h2 {
    margin-bottom: 27px !important;
}

.periodontal-intro__content > p:not(.section-en) {
    width: 100%;
    margin: 0 0 18px;
    color: #59655e;
    font-size: 16px;
    line-height: 2.1;
}

.periodontal-intro__content > p:last-child {
    margin-bottom: 0;
}

.periodontal-intro__image img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}


/* =========================================================
   BLUE RADICAL LEAD
========================================================= */

.blue-radical-lead {
    padding: 70px 0;
    background: #163b4b;
    color: #fff;
}

.blue-radical-lead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
    gap: 65px;
    align-items: center;
}

.blue-radical-lead .section-en {
    color: #79d7e5;
}

.blue-radical-lead__sub {
    margin: 0 0 8px;
    color: #b7e7ed;
    font-size: 13px;
    font-weight: 600;
}

.periodontal-main .blue-radical-lead h2 {
    margin-bottom: 25px;
    color: #fff;
}

.blue-radical-lead__content > p:not(.section-en):not(.blue-radical-lead__sub) {
    margin: 0 0 17px;
    color: #e1ebee;
    font-size: 15px;
    line-height: 2.05;
}

.blue-radical-lead__image img {
    display: block;
    width: 100%;
    height: 490px;
    object-fit: cover;
}


/* =========================================================
   SYMPTOMS
========================================================= */

.symptom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #dbe2de;
    border: 1px solid #dbe2de;
}

.symptom-item {
    position: relative;
    padding: 21px 25px 21px 55px;
    background: #fff;
    color: #46554d;
    font-size: 15px;
    line-height: 1.7;
}

.symptom-item::before {
    content: "✓";
    position: absolute;
    top: 20px;
    left: 25px;
    color: #537463;
    font-weight: 700;
}


/* =========================================================
   IMAGE + TEXT
========================================================= */

.periodontal-image-text {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 65px;
    align-items: center;
}

.periodontal-image-text--reverse .periodontal-image-text__image {
    order: 2;
}

.periodontal-image-text--reverse .periodontal-image-text__content {
    order: 1;
}

.periodontal-image-text__image img {
    display: block;
    width: 100%;
    /*height: 470px;
    object-fit: cover;*/
}

.periodontal-image-text__content h2 {
    margin-bottom: 25px;
}

.periodontal-image-text__content > p:not(.section-en) {
    margin: 0 0 18px;
    color: #5d6962;
    font-size: 15px;
    line-height: 2.1;
}

.periodontal-image-text__content > p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PROGRESSION
========================================================= */

.progression-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.progression-card {
    border: 1px solid #dfe5e1;
    background: #fff;
}

.progression-card__image {
    overflow: hidden;
    background: #f2f5f3;
}

.progression-card__image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.progression-card__content {
    padding: 25px 22px 28px;
}

.progression-card__content > span {
    display: block;
    margin-bottom: 12px;
    color: #83988c;
    font-size: 26px;
}

.progression-card h3 {
    margin: 0 0 12px;
    color: #34473c;
    font-size: 17px;
}

.progression-card p {
    margin: 0;
    color: #66716b;
    font-size: 13px;
    line-height: 1.95;
}


/* =========================================================
   BLUE RADICAL SECTION
========================================================= */

.blue-radical-section {
    background: #173b4a;
    color: #fff;
}

.blue-radical-section .section-en {
    color: #77d5e2;
}

.blue-radical-section .section-heading h2 {
    color: #fff;
}

.blue-radical-section .section-heading__lead {
    color: #dce8eb;
}

.blue-radical-about {
    display: grid;
    grid-template-columns: minmax(400px, .9fr) minmax(0, 1.1fr);
    gap: 65px;
    align-items: center;
}

.blue-radical-about__image img {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.blue-radical-about__content h3 {
    margin: 0 0 22px;
    color: #fff;
    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.6;
}

.blue-radical-about__content p {
    margin: 0 0 17px;
    color: #dce8eb;
    font-size: 15px;
    line-height: 2.05;
}

.blue-radical-about__content p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   FEATURES
========================================================= */

.feature-list {
    border-top: 1px solid #d5ddd8;
}

.feature-item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid #d5ddd8;
}

.feature-item__number {
    color: #648070;
    font-size: 34px;
}

.feature-item h3 {
    margin: 0 0 10px;
    color: #33463b;
    font-size: 18px;
}

.feature-item p {
    margin: 0;
    color: #626e67;
    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   CANDIDATE
========================================================= */

.candidate-box {
    padding: 35px 40px;
    border: 1px solid #d9e1dc;
}

.candidate-box ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 45px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.candidate-box li {
    position: relative;
    padding: 17px 10px 17px 35px;
    border-bottom: 1px solid #e1e6e3;
    color: #48574f;
    font-size: 15px;
}

.candidate-box li::before {
    content: "✓";
    position: absolute;
    left: 5px;
    color: #527463;
    font-weight: 700;
}

.candidate-note {
    margin: 18px 0 0;
    color: #757f79;
    font-size: 11px;
    line-height: 1.9;
}


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

.treatment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #d8dfdb;
    border: 1px solid #d8dfdb;
}

.treatment-card {
    min-height: 260px;
    padding: 32px 28px;
    background: #fff;
}

.treatment-card > span {
    display: block;
    margin-bottom: 24px;
    color: #82968a;
    font-size: 28px;
}

.treatment-card h3 {
    margin: 0 0 13px;
    color: #33463b;
    font-size: 17px;
}

.treatment-card p {
    margin: 0;
    color: #66716b;
    font-size: 13px;
    line-height: 1.95;
}

.treatment-card--accent {
    background: #173b4a;
}

.treatment-card--accent > span {
    color: #72cfdd;
}

.treatment-card--accent h3 {
    color: #fff;
}

.treatment-card--accent p {
    color: #dce7ea;
}


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

.periodontal-flow {
    border-top: 1px solid #d8dfdb;
}

.flow-item {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    padding: 32px 0;
    border-bottom: 1px solid #d8dfdb;
}

.flow-item__number {
    color: #789083;
    font-size: 34px;
}

.flow-item__content h3 {
    margin: 0 0 10px;
    color: #33463b;
    font-size: 18px;
}

.flow-item__content p {
    margin: 0;
    color: #647068;
    font-size: 14px;
    line-height: 2;
}

.flow-item--blue {
    padding-right: 30px;
    padding-left: 30px;
    background: #eef6f7;
    border-bottom: 0;
}

.flow-item--blue .flow-item__number {
    color: #307b89;
}


/* =========================================================
   MAINTENANCE
========================================================= */

.periodontal-maintenance {
    background: #edf2ef;
}


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

.risk-box {
    padding: 35px 40px;
    border: 1px solid #dce2de;
    background: #fff;
}

.risk-box ul {
    margin: 0;
    padding: 0 0 0 22px;
}

.risk-box li {
    margin-bottom: 12px;
    color: #5d6862;
    font-size: 14px;
    line-height: 1.9;
}

.risk-box li:last-child {
    margin-bottom: 0;
}


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

.periodontal-faq {
    border-top: 1px solid #d9dfdb;
}

.periodontal-faq details {
    border-bottom: 1px solid #d9dfdb;
}

.periodontal-faq summary {
    position: relative;
    padding: 25px 60px 25px 50px;
    color: #34473c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    cursor: pointer;
    list-style: none;
}

.periodontal-faq summary::-webkit-details-marker {
    display: none;
}

.periodontal-faq summary::before {
    content: "Q";
    position: absolute;
    top: 21px;
    left: 10px;
    color: #62806f;
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.periodontal-faq summary::after {
    content: "+";
    position: absolute;
    top: 21px;
    right: 15px;
    color: #668073;
    font-size: 22px;
    font-weight: 300;
}

.periodontal-faq details[open] summary::after {
    content: "−";
}

.periodontal-faq details > div {
    padding: 0 50px 25px;
}

.periodontal-faq details p {
    margin: 0;
    color: #626e67;
    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   CLOSING
========================================================= */

.periodontal-closing {
    padding: 65px 0;
    background: #405a4d;
}

.periodontal-closing .section-en {
    color: #b7cabf;
}

.periodontal-main .periodontal-closing h2 {
    margin-bottom: 25px;
    color: #fff;
}

.periodontal-closing__inner > p:not(.section-en) {
    width: 100%;
    margin: 0 0 17px;
    color: #e3ebe6;
    font-size: 15px;
    line-height: 2.1;
}


/* =========================================================
   RESERVATION
========================================================= */

.periodontal-reservation {
    padding: 55px 0;
    background: #fff;
}

.periodontal-reservation__grid {
    display: grid;
    grid-template-columns: 1fr 580px;
    gap: 55px;
    align-items: center;
}

.periodontal-reservation__content h2 {
    margin-bottom: 15px;
}

.periodontal-reservation__content > p:not(.section-en) {
    margin: 0;
    color: #606c65;
    font-size: 14px;
    line-height: 2;
}

.periodontal-reservation__frame {
    width: 100%;
}

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 960px) {

    .periodontal-intro__grid,
    .blue-radical-lead__inner,
    .blue-radical-about,
    .periodontal-image-text {
        gap: 35px;
    }

    .progression-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .treatment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .periodontal-reservation__grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 767px) {

    .periodontal-main .container {
        width: calc(100% - 36px);
    }

    .periodontal-main .section {
        padding: 50px 0;
    }

    .periodontal-main .section-heading {
        margin-bottom: 35px;
    }

    .periodontal-main .section-heading h2,
    .periodontal-main .periodontal-intro h2,
    .periodontal-main .periodontal-image-text h2,
    .periodontal-main .blue-radical-lead h2,
    .periodontal-main .periodontal-closing h2,
    .periodontal-main .periodontal-reservation h2 {
        font-size: 24px;
        line-height: 1.6;
    }


    /* INTRO */

    .periodontal-intro {
        padding-top: 55px !important;
    }

    .periodontal-intro__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .periodontal-intro__image {
        order: -1;
    }

    .periodontal-intro__image img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .periodontal-intro__content > p:not(.section-en) {
        font-size: 14px;
        line-height: 2;
    }


    /* BLUE RADICAL LEAD */

    .blue-radical-lead {
        padding: 50px 0;
    }

    .blue-radical-lead__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blue-radical-lead__image {
        order: -1;
    }

    .blue-radical-lead__image img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }


    /* SYMPTOMS */

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


    /* IMAGE TEXT */

    .periodontal-image-text {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .periodontal-image-text--reverse .periodontal-image-text__image,
    .periodontal-image-text--reverse .periodontal-image-text__content {
        order: initial;
    }

    .periodontal-image-text__image img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }


    /* PROGRESSION */

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


    /* BLUE RADICAL */

    .blue-radical-about {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blue-radical-about__image img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .blue-radical-about__content h3 {
        font-size: 21px;
    }


    /* FEATURE */

    .feature-item {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 10px;
        padding: 25px 0;
    }

    .feature-item__number {
        font-size: 27px;
    }


    /* CANDIDATE */

    .candidate-box {
        padding: 20px;
    }

    .candidate-box ul {
        grid-template-columns: 1fr;
    }


    /* TREATMENT */

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

    .treatment-card {
        min-height: 0;
    }


    /* FLOW */

    .flow-item {
        grid-template-columns: 65px minmax(0, 1fr);
        padding: 25px 0;
    }

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

    .flow-item--blue {
        padding: 25px 18px;
    }


    /* RISK */

    .risk-box {
        padding: 25px 20px;
    }


    /* FAQ */

    .periodontal-faq summary {
        padding: 22px 45px 22px 40px;
    }

    .periodontal-faq summary::before {
        left: 5px;
    }

    .periodontal-faq summary::after {
        right: 5px;
    }

    .periodontal-faq details > div {
        padding: 0 15px 23px 40px;
    }


    /* CLOSING */

    .periodontal-closing {
        padding: 50px 0;
    }


    /* RESERVATION */

    .periodontal-reservation {
        padding: 50px 0;
    }

    .periodontal-reservation__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .periodontal-reservation__frame iframe {
        width: 100%;
        height: 230px;
    }

}


/* =========================================================
   BLUE RADICAL
   MECHANISM
========================================================= */

.blue-mechanism {
    overflow: hidden;
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.mechanism-slider {
    position: relative;

    width: 100%;
}


/* =========================================================
   GRID

   PC：5列固定
========================================================= */

.mechanism-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: stretch;

    gap: 18px;

    width: 100%;
}


/* =========================================================
   CARD
========================================================= */

.mechanism-card {
    position: relative;

    min-width: 0;

    margin: 0;
    padding: 24px 16px 26px;

    background: #fff;

    border: 1px solid #e3ded5;

    box-sizing: border-box;
}


/* =========================================================
   NUMBER
========================================================= */

.mechanism-card__number {
    margin: 0 0 15px;

    color: #9a7949;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: .12em;
}


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

.mechanism-card__image {
    width: 100%;

    margin: 0 0 20px;
    padding: 0;
}

.mechanism-card__image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   TITLE
========================================================= */

.mechanism-card h3 {
    margin: 0 0 12px;

    color: #332c24;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;

    letter-spacing: .02em;
}


/* =========================================================
   TEXT
========================================================= */

.mechanism-card p {
    margin: 0;

    color: #5b554e;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}


/* =========================================================
   PC
   ARROW / DOTS HIDDEN
========================================================= */

.mechanism-slider__button {
    display: none;
}

.mechanism-slider__dots {
    display: none;
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       SLIDER
    ----------------------------------------------------- */

    .mechanism-slider {
        position: relative;
        width: 100%;
        padding: 0 38px;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       TRACK

       スマホでは1枚ずつ表示
    ----------------------------------------------------- */

    .mechanism-grid {
        display: flex;
        width: 100%;
        gap: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mechanism-grid::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------------------
       CARD
    ----------------------------------------------------- */

    .mechanism-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;

        margin: 0;
        padding: 22px 18px 25px;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       NUMBER
    ----------------------------------------------------- */

    .mechanism-card__number {
        margin-bottom: 14px;

        font-size: 12px;
    }


    /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */

    .mechanism-card__image {
        margin-bottom: 18px;
    }

    .mechanism-card__image img {
        width: 100%;
        height: auto;
    }


    /* -----------------------------------------------------
       TITLE
    ----------------------------------------------------- */

    .mechanism-card h3 {
        margin-bottom: 10px;

        font-size: 19px;
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    .mechanism-card p {
        font-size: 14px;
        line-height: 1.8;
    }


    /* -----------------------------------------------------
       PREV / NEXT BUTTON
    ----------------------------------------------------- */

    .mechanism-slider__button {
        position: absolute;

        top: 50%;

        z-index: 10;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 52px;

        margin: 0;
        padding: 0;

        border: 0;

        background: #84673e;

        color: #fff;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 30px;
        font-weight: 300;
        line-height: 1;

        cursor: pointer;

        transform: translateY(-50%);

        appearance: none;
        -webkit-appearance: none;
    }

    .mechanism-slider__button--prev {
        left: 0;
    }

    .mechanism-slider__button--next {
        right: 0;
    }


    /* -----------------------------------------------------
       DOTS
    ----------------------------------------------------- */

    .mechanism-slider__dots {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 9px;

        margin: 20px 0 0;
        padding: 0;
    }

    .mechanism-slider__dots button {
        display: block;

        width: 7px;
        height: 7px;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 50%;

        background: #d5cec4;

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
    }

    .mechanism-slider__dots button.is-active {
        background: #84673e;
    }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media (max-width: 390px) {

    .mechanism-slider {
        padding-right: 34px;
        padding-left: 34px;
    }

    .mechanism-slider__button {
        width: 30px;
        height: 48px;

        font-size: 27px;
    }

    .mechanism-card {
        padding: 20px 15px 23px;
    }

    .mechanism-card h3 {
        font-size: 18px;
    }

}