@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 900;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Black-subset.woff") format("woff2"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Black-subset.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 700;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Bold-subset.woff") format("woff2"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Bold-subset.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 500;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Medium-subset.woff") format("woff"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Medium-subset.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 400;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Regular-subset.woff") format("woff2"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Regular-subset.woff") format("woff");
    /*font-display: swap;*/
}

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 300;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Light-subset.woff") format("wof2f"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Light-subset.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 100;
    src: url("/contract/common/font/Noto_Sans_JP/NotoSansJP-Thin-subset.woff") format("woff2"), url("/contract/common//font/Noto_Sans_JP/NotoSansJP-Thin-subset.woff") format("woff");
    font-display: swap;
}


:root {
    --parts_bg: rgb(130 215 220 / 1);
    --main: rgb(80 185 191 / 1);
    --note: rgb(231 64 105 / 1);
    --claim_btn: rgb(245 150 190 / 1);

    /* 基準となるフォントサイズ */
    --base-font-size: 16;
    /* remに変換する処理 */
    --px-to-rem: calc(1rem / var(--base-font-size));
}

html {
    font-size: initial;
}

body {
    font-size: 93.75%;
    font-family: 'NotoSansJP', sans-serif;
}

/* 共通
---------------------------------------------------------- */

/*h2見出し*/
.h2_basic03 {
    margin: 48px 0 24px 0;
    padding: 8px;
    color: rgb(255, 255, 255);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    background: var(--main);
}

/*h3見出し*/
.h3_basic03 {
    font-size: 1.25rem;
    font-weight: 500;
    display: flex;
    padding: 8px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: left;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    -moz-font-feature-settings: "palt";
    color: var(--main);
}

.h3_basic03::before {
    content: "■";
}

.h3_basic04 {
    color: rgb(51, 51, 51);
    margin: 24px 0;
    padding: 8px;
    font-size: calc(21 * var(--px-to-rem));
    border-top: 1px solid rgb(204, 204, 204);
    border-bottom: 1px solid rgb(204, 204, 204);
}

.pdf {
    padding-right: 18px;
    background: url(/contract/common/img/img_pdf.svg) 100% 40% no-repeat;
    background-size: 16px 16px;
}

.section {
    margin: 0 0 24px;
}

.section-area {
    margin-block-end: 64px;
}


.bor_box {
    padding-block: 24px;
    padding-inline: 24px;
    border: 1px solid var(--main);
}

.normal {
    font-weight: normal;
}

.pageTop_con a {
    background: none !important;
}

small {
    font-size: calc(14 * var(--px-to-rem));
}

p {
    font-size: 18px;
    line-height: 1.5;
    text-align: justify;
    margin-bottom: 1em;
}

.txt_p_inline_30 {
    padding-inline: 30px;
}

.txt_u {
    text-decoration: underline;
}

.p_txt {
    color: var(--note);
}

.txt_bgY {
    background: rgb(255 250 130 / 1);
}

.bor_no {
    border: none;
}

/* header
---------------------------------------------------------- */
.header {
    width: 100%;
    max-width: 930px;
    margin-inline: auto;
    padding-block: min(4vw, 16px);
    padding-inline: min(2vw, 16px);
    border-image: linear-gradient(var(--parts_bg) 0 0) fill 0 / /0 100lvi;

    a {
        width: fit-content;
        max-width: 352px;
        height: auto;
        display: block;
    }

    img {
        width: 100%;
        height: auto;
    }
}

.catch {
    margin-block: 0 0.7em;
    padding-block: 0;
    font-size: calc(12 * var(--px-to-rem));
}

.breadcrumb_list {
    width: 100%;
    max-width: 930px;
    margin-inline: auto;
    font-size: calc(12 * var(--px-to-rem));

    >li {
        margin-inline-end: 12px;
        display: inline;
        position: relative;

        &:not(:last-child)::after {
            content: '';
            display: block;
            width: 4px;
            height: 4px;
            border-top: 1px solid rgb(23 152 160 / 1);
            border-right: 1px solid rgb(23 152 160 / 1);
            position: absolute;
            top: 50%;
            right: -8px;
            translate: 0 -50%;
            rotate: 45deg;
        }
    }

}

/* footer周り
---------------------------------------------------------- */
#ft_menu {
    font-size: calc(13 * var(--px-to-rem));
}

.site_info02 small {
    font-size: calc(12 * var(--px-to-rem));

}


/* contract/index
---------------------------------------------------------- */

/*冒頭目次 ページ内リンク*/
article#webpage {
    .In-page {
        width: 100%;
        max-width: 800px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-block: 0 40px;
        margin-inline: auto;
        padding-inline-start: 0;

        li a {
            width: 100%;
            color: var(--main);
            height: 100%;
            text-align: center;
            box-sizing: border-box;
            border: solid 1px var(--main);
            text-decoration: none;
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;

            &::before {
                content: "";
                position: absolute;
                width: 50px;
                height: 100%;
                background: var(--main);
                top: 0;
                left: 0px;
            }

            &::after {
                content: "";
                display: block;
                position: absolute;
                bottom: 4px;
                left: 30px;
                margin: auto;
                width: 10px;
                height: 10px;
                border-top: 3px solid #FFF;
                border-right: 3px solid #FFF;
                translate: -50% 0;
                transition-duration: 0.3s;
            }

            &:hover {
                @media(any-hover) {
                    color: var(--main);

                    &::after {
                        bottom: -8px;
                    }
                }
            }
        }
    }
}

.In-page {
    li {
        width: 100%;
        padding-block: 0;
        padding-inline: 0;
        display: block;
        font-size: calc(19 * var(--px-to-rem));
        font-weight: bold;
        line-height: 1.4;
        border: none;
        position: relative;
        transition: all 0.3s ease;
    }
}


/*ボタン*/
#content .btn {
    width: 100%;
    max-width: 500px;
    margin-block: 24px;
    margin-inline: auto;

    a {
        padding-block: 24px;
        padding-inline: 16px;
        color: var(--main);
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
        font-size: calc(20 * var(--px-to-rem));
        font-feature-settings: "palt";
        font-weight: 700;
        letter-spacing: 0.07em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        border: 1px solid var(--main);
        border-radius: 8px;
        box-shadow: 0 4px 0px var(--main);
        background: rgb(255 255 255 / 1);
        transition: all ease 0.3s;
        position: relative;

        &::after {
            content: url(/contract/common/img/ico_arrow03_hover_pc.png);
            display: block;
            position: absolute;
            top: 50%;
            right: 4%;
            rotate: 90deg;
            translate: 0 -50%;
        }

        &:not(.arr_b) {
            &::after {
                rotate: 0deg;
            }
        }

        * {
            transition: all ease 0.3s;
        }

        &:hover {
            @media (any-hover: hover) {
                color: rgb(255 255 255 / 1);
                background: var(--main);

                * {
                    color: rgb(255 255 255 / 1);
                }

                &::after {
                    content: url(/contract/common/img/ico_arrow03_pc.png);
                }
            }
        }
    }
}



/*ボタン 横並び指定*/
#content .btn_col2 {
    margin-block: 40px 60px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 24px;

    .btn a {
        padding-block: 0.8em;
    }
}


/*section 書面（郵送）での請求をご希望の方*/
.step_box {
    margin-block: 0;
    margin-inline: auto;
    padding-inline-start: 3em;
    padding-inline: 24px;
    border: 1px solid var(--main);
    box-sizing: border-box;
    position: relative;

    &::after {
        content: url(/contract/common/img/img_arrow01.png);
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 100%;
    }

    &:not(:first-of-type) {
        margin-block-start: 80px;
    }

    &:nth-child(3 of .step_box)::after {
        display: none;
    }



    >h3 {
        width: fit-content;
        margin-block: 0 20px;
        margin-inline: auto;
        padding: 10px;
        font-size: calc(32 * var(--px-to-rem));
        display: grid;
        grid-template-columns: max-content auto;
        align-items: center;
        gap: 0 1em;
        justify-items: center;
    }

}

/*ol、ulタグ*/
.ol_txt01 {
    width: fit-content;
    margin-block-end: 16px;
    margin-inline: auto;
    list-style-type: decimal;

    li {
        color: var(--main);
        font-size: calc(17 * var(--px-to-rem));
        font-weight: 500;
        letter-spacing: 0.05em;

        &:not(:last-of-type) {
            margin-block-end: 8px;
        }
    }

    &:has(ol) {
        font-size: calc(18 * var(--px-to-rem));

        ol {
            margin-block-end: 26px;
            margin-inline-start: 0;
            list-style: none;
        }

        a {
            width: fit-content;
            display: grid;
            grid-template-columns: 68px auto;
            align-items: center;
            gap: 0 4px;
        }

        img {
            width: 100%;
            max-width: 70px;
            /* max-width: 70px; */
            display: block;
        }
    }
}

.ol_txt02 {
    list-style-type: none;
    padding-left: 48px;

    li {
        font-size: calc(17 * var(--px-to-rem));
        letter-spacing: 0.05em;
        padding-block-end: 4px;
    }
}

article#webpage .pdf_list li a {
    color: rgb(17 17 204 / 1);
}


.pdf_list {
    width: fit-content;
    margin-block-end: 40px;
    margin-inline: auto;

    li {
        font-size: calc(18 * var(--px-to-rem));
        letter-spacing: 0.05em;

    }
}

/* 中黒リスト */
.ul_disc {
    list-style: disc;
    padding-inline-start: 1.3em;
    font-size: calc(18 * var(--px-to-rem));

    li {
        margin-block-end: 0.6em;
    }
}

/* ①とかのリスト */
.ol_circle_num {
    counter-reset: count;
    font-size: calc(18 * var(--px-to-rem));
    padding-inline-start: 3em;

    .count {
        margin-block-end: 0.7em;
        position: relative;

        &::before {
            content: counter(count);
            counter-increment: count;
            border: 1px solid rgb(0 0 0 /1);
            height: calc(26 * var(--px-to-rem));
            aspect-ratio: 1/1;
            display: grid;
            align-items: center;
            justify-content: center;
            line-height: 1;
            position: absolute;
            top: 0;
            left: -2em;
            border-radius: 100%;
        }

    }
}

/* 1. 2. 3. などのリスト */
.ol_basic {
    list-style: decimal;
    font-size: 1.1rem;
    margin: 0;
    padding-inline-start: 2em;

    li {
        margin-block-end: 10px;
        counter-increment: num_count;
        position: relative;
    }
}


/*その他のお問い合わせ お客さまサービスセンター*/
#content {
    .inquiry_support01 {
        h4 {
            font-size: calc(19 * var(--px-to-rem));
            letter-spacing: 0.05em;
            color: rgb(0 0 0 /1);
        }

        .business_hours {
            text-align: center;
            margin-block: 0;
            margin-inline: 0;
            padding-block: 6px;
            padding-inline: 6px;
            border: 1px solid var(--main);
            border-top: none;
        }

    }

    .tel-attention {
        text-align: center;
    }
}

.tel-attention {
    color: var(--note);
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    padding-block: 20px;
    padding-inline: 20px;
    padding: 20px;
    border: 1px solid var(--note);
    border-radius: 0px;
}

.inquiry_support01 {
    margin-block: 10px 30px;

    .service_tel {
        padding-block: 6px;
        padding-inline: 6px;
        font-size: calc(30 * var(--px-to-rem));
        letter-spacing: 0.05em;
        text-align: center;
        font-weight: bold;
        border: 1px solid var(--main);
    }
}

/*その他の細かい調整*/

.br-728 {
    display: none;
}

#content .caption {
    margin-block: 20px 0;
    margin-inline: 0;
    text-align: center;
}


#content .txt {
    text-align: center;
}

/* contract/insurance_claim.html
    ---------------------------------------------------------- */

/*保険金請求_ピンクボタン*/
#content .btn_claim {
    margin-block: 20px 50px;
    margin-inline: auto;

    a {
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
        padding-block: 24px;
        padding-inline: 24px;
        color: rgb(255 255 255 / 1);
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
        font-size: calc(20 * var(--px-to-rem));
        font-feature-settings: "palt";
        font-weight: 700;
        letter-spacing: 0.07em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        background-color: var(--claim_btn);
        border: 1px solid var(--claim_btn);
        border-radius: 8px;
        box-shadow: 0 4px 0px rgb(144 144 144 / 1);
        transition: all ease 0.3s;
        position: relative;

        &::after {
            content: url(/contract/common/img/ico_arrowpk_hover_pc.png);
            display: block;
            position: absolute;
            top: 50%;
            right: 6%;
            translate: 0 -50%;
        }

        &:hover {
            @media(any-hover) {
                background-color: rgb(255 255 255 / 1);
                color: var(--claim_btn);
                border: solid 1px var(--claim_btn);
                box-shadow: 0 4px 0px var(--claim_btn);

                &::after {
                    content: url(/contract/common/img/ico_arrowpk_pc.png);
                }
            }
        }
    }
}


/*小見出し*/
.section-area h3 {
    padding-block: 8px;
    padding-inline: 8px;
    font-size: calc(21 * var(--px-to-rem));
    font-weight: 500;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    letter-spacing: 0.05em;
    line-height: 1.2;
    border-top: 1px solid rgb(204 204 204 / 1);
    border-bottom: 1px solid rgb(204 204 204 / 1);

    &.bor_no {
        border: none;
    }
}


/*診療明細書・領収書*/
.flex_col2 {
    display: flex;
    gap: 0 16px;

    span {
        font-size: calc(15 * var(--px-to-rem));
    }

    img {
        width: 100%;
        height: 100%;
        max-width: 350px;
        max-height: 220px;
    }
}


/*赤枠wrap*/
.nopay_disease {
    width: 100%;
    border: 1px solid var(--note);

    .nopay_disease_inner {
        border-bottom: 1px solid var(--note);
        padding: 30px 24px;
    }
}

/* 共通レスポンシブ
    ---------------------------------------------------------- */
@media screen and (max-width: 767px) {

    #content {
        padding-inline: 4%;
    }


    p {
        margin-block: 0;
        margin-inline: 0;
        padding-block: 1em 0;
        padding-inline: 0;
        font-size: calc(16 * var(--px-to-rem));
        line-height: 1.5;
    }

    .txt_p_inline_30 {
        padding: 0;
    }

    #content .fs1 {
        /* font-size: calc(17px * var(--px-to-rem)); */
        font-size: 17px;
    }

    #content .h2_basic03 {
        font-size: calc(20 * var(--px-to-rem));
        text-align: center;
    }

    #content .h3_basic03 {
        font-size: calc(20 * var(--px-to-rem));
        text-align: left;
    }


    /* header
    ---------------------------------------------------------- */
    .header{
        padding-inline: 4%;
    }

    .header a {
        width: 72%;
        max-width: 290px;
    }


    #breadcrumb {
        margin-block-start: 12px;
    }

    /* footer周り
    ---------------------------------------------------------- */
    #site_info {
        padding: 16px 0 32px;
    }

    /* ol ulタグ
    ---------------------------------------------------------- */

    .ol_txt01 {
        margin-block: 20px 10px;
        padding-inline-start: 1em;

        &:has(ol) {
            width: 90%;
            margin-inline: auto;
        }

        ol {
            padding-left: 11%;
        }

        li {
            width: 100%;
            font-weight: 600;
        }
    }

    .ol_txt02 {
        padding-inline-start: 2em;
    }

    .ul_disc {
        font-size: calc(17 * var(--px-to-rem));
    }

    .ol_basic {
        padding-inline-start: 2em;
    }

    .ol_circle_num {
        padding-inline-start: 2em;
    }


    #content .btn_claim a {
        padding-block: 14px;
        padding-inline: 26px;
    }

}

@media screen and (max-width: 728px) {
    .ft_menu_inner01 .trigger {
        background: url(/contract/common/img/accordion02_close.png) no-repeat 100% center;

        &.active {
            background: url(/contract/common/img/accordion02_open.png) no-repeat 100% center;
        }
    }
}



/* 各ページレスポンシブ
    ---------------------------------------------------------- */
@media screen and (max-width: 767px) {

    /* contract/index
    ---------------------------------------------------------- */

    /*冒頭目次 ページ内リンク*/
    article#webpage .In-page li a {
        text-align: left;
        padding-left: min(4vw, 20px);
        line-height: 1.3;
    }


    .In-page li {
        width: 100%;
        margin: 0;
        padding-inline-start: 50px;
        font-size: calc(17 * var(--px-to-rem));

        a &::after {
            bottom: 30px;
            width: 14px;
            height: 14px;
        }

    }


    /*ボタン 横並びを縦並びに変更*/
    #content {
        .btn_col2 {
            margin-block: 30px 60px;
            grid-template-columns: 1fr;
            gap: 26px 0;

            .btn {
                margin-block: 0;
                font-size: calc(18 * var(--px-to-rem));
                letter-spacing: -0.08em;

                a {
                    padding-block: 20px;
                    padding-inline: 26px;
                    font-size: calc(18 * var(--px-to-rem));
                    line-height: 1.3;
                }
            }

        }

        .btn {
            margin-block: 32px;

            a {
                padding-block: 20px;
                padding-inline: 26px;
                font-size: calc(18 * var(--px-to-rem));
                line-height: 1.3;
            }
        }
    }

    /*section 書面（郵送）での請求をご希望の方*/

    .bor_box {
        margin-block-start: 20px;
        padding-block: 10px;
        padding-inline: 20px;

    }

    .step_box {
        padding-block: 16px 10px;
        padding-inline: 20px;

        >h3 {
            width: fit-content;
            margin-block: 0;
            margin-inline: 0 auto;
            padding-block: 0 16px;
            padding-inline: 0;
            font-size: calc(20 * var(--px-to-rem));
            grid-template-columns: clamp(80px, 14vw, 110px) auto;
            gap: 0 0.5em;

            img {
                width: 100%;
                max-width: 110px;
            }
        }

        .ol_txt01 {
            padding-inline-start: 2em;
        }
    }


    /*その他のお問い合わせ お客さまサービスセンター*/
    #content {
        .inquiry_support01 {
            h4 {
                font-size: calc(17 * var(--px-to-rem));
                padding-block: 10px;
                padding-inline: 10px;
            }

            .business_hours {
                padding-block: 10px !important;
                padding-inline: 10px;
                text-align: left !important;
            }
        }

        .tel-attention {
            margin-block: 1em;
            margin-inline: 0;
            padding-block: 10px;
            padding-inline: 10px;
            font-size: calc(15 * var(--px-to-rem));
            text-align: left;
            font-weight: 600;
            box-sizing: border-box;

        }
    }


    .inquiry_support01 .service_tel {
        font-size: calc(25 * var(--px-to-rem));
    }


    /*その他の細かい調整*/

    #content {
        .caption {
            text-align: left;
        }

        .step_box .ol_txt01+.txt {
            text-align: center;
        }

        .txt {
            font-size: calc(18 * var(--px-to-rem));
            padding-block: 0;
            padding-inline: 0;
            text-align: left;
        }
    }

    .section-area h3 {
        font-size: calc(19 * var(--px-to-rem));
        text-align: center;
    }


    .pdf_list {
        margin-inline: 0 auto;
    }

    .br-728 {
        display: block;
    }


}


/* 緊急お知らせ
    ---------------------------------------------------------- */
.notice_area_contract {
    width: 100%;
    max-width: 930px;
    margin: 0 auto 40px;
    padding-block: 20px;
    padding-inline: 20px;
    color: rgb(255 56 140 / 1);
    border: solid 1px rgb(255 56 140 / 1);
    border-radius: 6px;
    box-sizing: border-box;

    .notice_area_list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        font-size: calc(16 * var(--px-to-rem));
        letter-spacing: 0.05em;
    }
}

article#webpage .notice_area_contract .notice_area_list li a {
    color: rgb(255 56 140 / 1);
}

@media screen and (max-width: 767px) {
    .notice_area_contract {
        width: 95%;
        margin: 24px auto;
        padding: 4%;

        ul {
            margin-block: 0;
            margin-inline: 0;
        }

        .notice_area_list li {
            display: block;
            text-align: left;
        }
    }
}