#orthodontics #page-header {
    background     : url(../../img/orthodontics/page-header-bg1.jpg) no-repeat center;
    background-size: cover;
    height         : 250px;
    width          : 100%;
    margin         : 0 0 0;

    @media screen and (max-width: 768px) {
        height: 50vw;
        width : 100%;
        margin: 0 0 0;
    }
}

/* ページメニュー */
ul.p-pagemenu {
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    justify-content: center;
    margin-inline  : 0 !important;

    @media screen and (max-width: 768px) {
        flex-direction: column;
    }
}

#service-content .kamoku ul li {
    width: 24%;

    @media screen and (max-width: 768px) {
        width: 100%;
    }
}

#orthodontics #page-header h2 {
    padding: 65px 0;
}

#orthodontics nav:not(.fixed) {
    @media screen and (min-width: 769px) {
        top: -30px;
    }
}

#orthodontics a.btn {
    display        : block;
    width          : 350px;
    padding        : 10px;
    border         : 1px solid #ccc;
    text-align     : center;
    text-decoration: none;
    margin         : 20px 0;
}

/* 矯正治療の流れ */
ul.p-list--flow {
    background-color: #fff4f5;
    padding         : 1rem;
    margin-bottom   : 1rem;
}

ul.p-list--flow li {
    list-style : auto;
    margin-left: 1.5em;
    font-size  : 0.95em;
}

ul.p-list--flow li:not(:last-child) {
    margin-bottom: 0.25em;
}

/* 矯正料金表 */
#orthodontics p.zeikomi {
    text-align: right;
}

#orthodontics .p-table--price {
    white-space    : nowrap;
    width          : 100%;
    border-collapse: collapse;
    margin         : 0 0 40px;
}

#orthodontics .p-table--price th {
    text-align    : center;
    padding       : 10px;
    border        : 1px solid #000;
    background    : #e7acb2;
    vertical-align: middle;
    width         : 50%;
    color         : #fff;
}

#orthodontics .p-table--price td {
    text-align    : center;
    padding       : 10px;
    border        : 1px solid #000;
    vertical-align: middle;
}

#orthodontics .p-table--price td.notes {
    border-bottom: 0;
    border-left  : 0;
    border-right : 0;
    text-align   : left;
    padding      : 0;
}

#orthodontics .asterisk-list {
    display     : inline-block;
    text-indent : -1em;
    padding-left: 1em;
}

/* 矯正料金表 スマホ対応 */
@media screen and (max-width: 768px) {
    #orthodontics .p-table--price p.zeikomi {
        text-align: right;
    }

    #orthodontics .p-table--price {
        width          : 100%;
        margin         : 0 0 40px;
        border-collapse: collapse;
        white-space    : normal;
    }

    #orthodontics .p-table--price th {
        text-align    : center;
        padding       : 5px;
        border        : 1px solid #000;
        background    : #e7acb2;
        vertical-align: middle;
        font-size     : 14px;
        line-height   : 1.4;
        color         : #fff;
        width         : 40%;
        font-weight   : normal;
    }

    #orthodontics .p-table--price td {
        text-align    : center;
        padding       : 5px;
        border        : 1px solid #000;
        vertical-align: middle;
        font-size     : 14px;
        line-height   : 1.4;
    }
}

/* 矯正治療のリスクについて */
#orthodontics .risks {
    border-color: #2390c4;
    background  : #2390c4;

    @media screen and (max-width: 768px) {
        border-radius: 10px;
    }
}

#orthodontics .risks p.trigger {
    display        : flex;
    justify-content: center;
    align-items    : center;
    gap            : 1rem;
    flex-direction : column;
    line-height    : 1;
    font-weight    : bold;
    cursor         : pointer;
    transition     : all .6s ease-in-out;
    color          : white;
    font-size      : 1.6rem;
}

#orthodontics .risks p.trigger br {
    @media screen and (min-width: 769px) {
        display: none;
    }
}

#orthodontics .risks p.trigger:hover {
    opacity: .8;
}

#orthodontics .risks p.trigger small {
    display        : inline-flex;
    justify-content: center;
    align-items    : center;
    gap            : .5rem;
    padding        : .7rem 2rem;
    box-sizing     : border-box;
    color          : #2390c4;
    background     : white;
    border-radius  : 9999px;
    overflow       : hidden;
    margin-inline  : auto;
    font-size      : 1rem;
    transition     : all .6s ease-in-out;
}

#orthodontics .risks p.trigger small::after {
    content              : "";
    width                : 10px;
    aspect-ratio         : 1/1;
    display              : block;
    transform            : translateY(2px);
    -webkit-mask-image   : url(../img/service/arrow.svg);
    mask-image           : url(../img/service/arrow.svg);
    -webkit-mask-position: center;
    -webkit-mask-size    : contain;
    -webkit-mask-repeat  : no-repeat;
    mask-position        : center;
    mask-size            : contain;
    mask-repeat          : no-repeat;
    background           : #2390c4;
}

#orthodontics .risks ul {
    width        : 80%;
    margin-inline: 10%;
    height       : auto;
    max-height   : 0;
    transition   : all .6s ease-in-out;
    overflow     : hidden;
    counter-reset: risks 0;
}

#orthodontics .risks ul li::before {
    counter-increment: risks 1;
    content          : counter(risks, decimal-leading-zero) ".";
    color            : #2390c4;
    font-weight      : bold;
}

#orthodontics .risks ul li {
    display      : grid;
    grid-template: auto / auto 1fr;
    gap          : 0 .5rem;
    place-content: start start;
    place-items  : start start;
    padding-block: 1rem;
    border-top   : 1px dashed #ccc;
}


#orthodontics .risks.active {
    background: white;
}

#orthodontics .risks.active p.trigger {
    color        : #2390c4;
    margin-bottom: 1rem;
}

#orthodontics .risks.active p.trigger small {
    height       : 0;
    opacity      : 0;
    padding-block: 0;
}

#orthodontics .risks.active ul {
    max-height: 9999px;
}

#orthodontics .risks.active p.trigger small::after {
    transform: translateY(2px) rotate(90deg);
}

@media screen and (max-width: 768px) {
    #orthodontics .risks {
        border-color: #2390c4;
        background  : #2390c4;
    }

    #orthodontics .risks p.trigger {
        display        : flex;
        justify-content: center;
        align-items    : center;
        gap            : .4rem;
        flex-direction : column;
        line-height    : 1;
        font-weight    : bold;
        cursor         : pointer;
        transition     : all .6s ease-in-out;
        color          : white;
        font-size      : 1.3rem;
        text-align     : center;
        line-height    : 1.4;
    }

    #orthodontics .risks p.trigger:hover {
        opacity: .8;
    }

    #orthodontics .risks p.trigger small {
        display        : inline-flex;
        justify-content: center;
        align-items    : center;
        gap            : .5rem;
        padding        : .5rem 2rem;
        box-sizing     : border-box;
        color          : #2390c4;
        background     : white;
        border-radius  : 9999px;
        overflow       : hidden;
        margin-inline  : auto;
        font-size      : 1rem;
        transition     : all .6s ease-in-out;
    }

    #orthodontics .risks p.trigger small::after {
        content              : "";
        width                : 10px;
        aspect-ratio         : 1/1;
        display              : block;
        transform            : translateY(2px);
        -webkit-mask-image   : url(../img/service/arrow.svg);
        mask-image           : url(../img/service/arrow.svg);
        -webkit-mask-position: center;
        -webkit-mask-size    : contain;
        -webkit-mask-repeat  : no-repeat;
        mask-position        : center;
        mask-size            : contain;
        mask-repeat          : no-repeat;
        background           : #2390c4;
    }

    #orthodontics .risks ul {
        width        : 100%;
        margin-inline: 2%;
        height       : auto;
        max-height   : 0;
        transition   : all .6s ease-in-out;
        overflow     : hidden;
        counter-reset: risks 0;
    }

    #orthodontics .risks ul li::before {
        counter-increment: risks 1;
        content          : counter(risks, decimal-leading-zero) ".";
        color            : #2390c4;
        font-weight      : bold;
    }

    #orthodontics .risks ul li {
        display      : grid;
        grid-template: auto / auto 1fr;
        gap          : 0 .5rem;
        place-content: start start;
        place-items  : start start;
        padding-block: 1rem;
        border-top   : 1px dashed #ccc;
    }


    #orthodontics .risks.active {
        background: white;
    }

    #orthodontics .risks.active p.trigger {
        color        : #2390c4;
        margin-bottom: 1rem;
    }

    #orthodontics .risks.active p.trigger small {
        height       : 0;
        opacity      : 0;
        padding-block: 0;
    }

    #orthodontics .risks.active ul {
        max-height: 9999px;
    }

    #orthodontics .risks.active p.trigger small::after {
        transform: translateY(2px) rotate(90deg);
    }

    #orthodontics #service-content article table td.notes {
        border-bottom: 0;
        border-left  : 0;
        border-right : 0;
        text-align   : left;
        padding      : 0;
    }

    #orthodontics .asterisk-list {
        display     : inline-block;
        text-indent : -1em;
        padding-left: 1em;
    }

    #orthodontics .risks:not(.active) .outerbox {
        border: 0 !important;
    }

    #orthodontics .risks.active .outerbox {
        border    : 1px solid #555;
        box-sizing: border-box;
    }

    #orthodontics .risks:not(.active) .outerbox ul {
        padding-inline: 10px !important;
    }

    #orthodontics .risks.active .outerbox ul {
        padding   : 10px;
        box-sizing: border-box;
    }
}

/* 未承認医療機器の使用について */
#orthodontics .unapproved ul li {
    padding-block: 1rem;
    border-bottom: 1px dashed #ccc;
    display      : block;
    text-indent  : -1em;
    padding-left : 1em;
}

#orthodontics .unapproved ul li:last-of-type {
    border-bottom: 0;
}

#orthodontics .unapproved ul li::before {
    content: "・"
}

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

    #orthodontics .unapproved ul li {
        padding-block: 1rem;
        border-bottom: 1px dashed #ccc;
        display      : block;
        text-indent  : -1em;
        padding-left : 1em;
    }

    #orthodontics .unapproved ul li:last-of-type {
        border-bottom: 0;
    }

    #orthodontics .unapproved ul li::before {
        content: "・"
    }
}

/* 電話番号リンクボックス */
.p-tel-link-box {
    border       : 2px solid #7ecef4;
    width        : fit-content;
    margin-inline: auto;
    padding      : 1em 1.5em;
    font-size    : 26px;
    text-align   : center;
    font-family  : "FP-ヒラギノ明朝 ProN W3", "ＭＳ Ｐ明朝", "MS PMincho", serif;

    @media screen and (max-width: 768px) {
        font-size : 6.8vw;
        width     : 100%;
        padding   : 1em;
        box-sizing: border-box;
    }
}

.p-tel-link-box__tel {
    font-size   : 1.35em;
    margin-block: 4px 0px;
    color       : #7ecef4;
}

.p-tel-link-box__tel a {
    color: #7ecef4;
}

.p-tel-link-box__tel small {
    color       : #4b4b4b;
    font-size   : 0.6em;
    margin-right: 0.2em;
}

.p-tel-link-box__access {
    font-family: "Hiragino Kaku Gothic ProN", メイリオ, sans-serif;
    font-size  : 0.6em;
    line-height: 1.2;
}