@media (min-width: 769px) {
    .is-sp {
        display: none;
    }
}

@media (max-width: 768px) {
    .is-pc {
        display: none;
    }
}

.p-mouthpiece p.p-text:not(:last-child) {
    margin-bottom: 1.5em;
}

.p-text--sub {
    font-size: 0.9em;
}

.p-indent1 {
    display     : inline-block;
    padding-left: 1em;
    text-indent : -1em;
}

.p-text--small {
    font-size: 0.9em;
}

.p-text--large {
    font-size: 1.25em;
}

/* content-box */
.p-content-box {
    display        : flex;
    align-items    : flex-start;
    justify-content: center;
    gap            : 1em;
    margin-bottom  : 2em;

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

.p-content-box__left {
    width: 40%;

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

.p-content-box__right {
    width: 60%;

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

ul.p-pattern__list__check {
    margin: 30px 0;
}

ul.p-pattern__list__check li {
    background  : url(../img/perio/check.gif) no-repeat left;
    padding-left: 30px;
}

article p.p-text strong {
    background: -moz-linear-gradient(top, rgba(227, 249, 151, 0) 60%, rgba(227, 249, 151, 0.4) 60%, rgba(227, 249, 151, 0.4) 100%);
    background: -webkit-linear-gradient(top, rgba(227, 249, 151, 0) 60%, rgba(227, 249, 151, 0.4) 60%, rgba(227, 249, 151, 0.4) 100%);
    background: linear-gradient(to bottom, rgba(227, 249, 151, 0) 60%, rgba(227, 249, 151, 0.4) 60%, rgba(227, 249, 0, 151.4) 100%)
}

/* progress table */
table.progress {
    border-collapse: collapse;
    width          : 100%;
}

table.progress th,
table.progress td {
    padding: 10px;
    border : 1px solid #000;
}

table.progress th {
    text-align: center;
    background: #36AB94;
    color     : #fff;
}

table.progress th:first-child {
    width: 250px;

    @media screen and (max-width: 768px) {
        width: 35vw;
    }
}

table.progress p.title {
    text-align   : center;
    background   : #deb887;
    display      : block;
    padding      : 5px;
    border-radius: 20px;
}

table.progress img {
    width: 100%;
}

/* progress2 table */
/* progress をベースに左側のコラムを見出し行としてグリーンに */
table.progress2 td:first-child {
    background: #36AB94;
    color     : #fff;
    width     : 10em;
}

/* table head */
.p-table-head {
    position     : relative;
    padding-left : 1.5em;
    margin-bottom: 0.5em;
    font-size    : 1.15em !important;
    font-weight  : bold !important;
    line-height  : 1.8 !important;
}

.p-table-head::before {
    content      : "";
    position     : absolute;
    left         : 0;
    top          : 0.5em;
    width        : 1em;
    height       : 1em;
    background   : #36AB94;
    border-radius: 50%;
}

/* FAQボックス */
.p-answer__head {
    font-size    : 1.35em;
    font-weight  : 600;
    line-height  : 1.45;
    margin-bottom: 0.8em;

    @media (max-width: 767px) {
        font-size: 1.15em;
    }
}

.p-answer__text:not(:last-child) {
    margin-bottom: 0.8em;
}

.p-answer__box {
    background-color: rgb(255, 255, 255);
    padding         : 30px;
    margin-top      : 1.2em;
}

.p-answer__box ul {
    list-style : disc;
    margin-left: 1em;
}

.p-answer__box ul li:not(:last-child) {
    margin-bottom: 0.8em;
}


#service-content .button01 {
    text-align: center;
}

#service-content .button01 a {
    display    : inline-block;
    background : #fff;
    width      : 700px;
    height     : 37px;
    line-height: 37px;
    border     : 1px solid #E5E5E5;
    text-align : center;
    box-shadow : 0px 2px 0px 0px #f4f4f4;
    font-size  : 16px;
    margin-top : 30px;

    @media screen and (max-width: 768px) {
        display        : inline-flex;
        background     : #fff;
        width          : 100%;
        padding        : 10px;
        box-sizing     : border-box;
        line-height    : initial;
        border         : 1px solid #E5E5E5;
        text-align     : center;
        box-shadow     : 0px 2px 0px 0px #f4f4f4;
        font-size      : 16px;
        margin-top     : 30px;
        align-items    : center;
        justify-content: center;
    }
}



/* margin-top */
.mt_0 {
    margin-top: 0 !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt_20 {
    margin-top: 20px !important;
}

.mt_30 {
    margin-top: 30px !important;
}

.mt_40 {
    margin-top: 40px !important;
}

.mt_50 {
    margin-top: 50px !important;
}

.mt_60 {
    margin-top: 60px !important;

    @media screen and (max-width: 768px) {
        margin-top: 30px !important;
    }
}

.mt_90 {
    margin-top: 90px !important;

    @media screen and (max-width: 768px) {
        margin-top: 45px !important;
    }
}

/* margin-bottom */
.mb_0 {
    margin-bottom: 0 !important;
}

.mb_10 {
    margin-bottom: 10px !important;
}

.mb_20 {
    margin-bottom: 20px !important;
}

.mb_30 {
    margin-bottom: 30px !important;
}

.mb_40 {
    margin-bottom: 40px !important;
}

.mb_50 {
    margin-bottom: 50px !important;
}

.mb_60 {
    margin-bottom: 60px !important;

    @media screen and (max-width: 768px) {
        margin-bottom: 30px !important;
    }
}

.mb_90 {
    margin-bottom: 90px !important;

    @media screen and (max-width: 768px) {
        margin-bottom: 45px !important;
    }
}

.p-text-link {
    color          : #007bff;
    text-decoration: underline;
}

.p-center {
    width        : fit-content;
    margin-inline: auto;
}

.p-right {
    width      : fit-content;
    margin-left: auto;

    @media screen and (max-width: 768px) {
        margin-inline: auto;
    }
}

.p-left {
    width       : fit-content;
    margin-right: auto;

    @media screen and (max-width: 768px) {
        margin-inline: auto;
    }
}

.p-box-color {
    background-color: #f0f0f0;
    padding         : 1em;
    border-radius   : 5px;
}

.p-box-border {
    padding: 2rem;
    border : 1px solid #958f68;

    @media screen and (max-width: 768px) {
        padding: 1rem;
    }
}

/* 番号付きリスト */
ul.p-pattern__list__number {
    list-style   : none;
    counter-reset: number;
}

ul.p-pattern__list__number li {
    position     : relative;
    padding-left : 2em;
    margin-bottom: 1.2em;
    line-height  : 1.3em;
}

ul.p-pattern__list__number li::before {
    content          : counter(number);
    counter-increment: number;
    position         : absolute;
    left             : 0;
    top              : 0;
    width            : 1.5em;
    height           : 1.5em;
    line-height      : 1.5em;
    border-radius    : 50%;
    background       : #9BB4E0;
    color            : #fff;
    text-align       : center;
}

/* 治療の流れ 補足ボックス（mouthpiece_test.html 専用） */
.p-mouthpiece__supplement-wrap {
    margin-top: 2em;
    display   : flex;
    flex-direction: column;
    gap       : 1.2em;
}

.p-mouthpiece__supplement-block {
    background-color: #eaf7f4;
    border-top      : 4px solid #36AB94;
    padding         : 1.2em 1.5em;
    border-radius   : 0 0 4px 4px;

    @media screen and (max-width: 768px) {
        padding: 1em 1.2em;
    }
}

.p-mouthpiece__supplement-head {
    font-weight  : bold;
    font-size    : 1.35em;
    margin-bottom: 0.6em;
    color        : #1a6e5b;
}

.p-mouthpiece__supplement-text {
    line-height: 1.8;
    margin     : 0;
}