/*=====================
共通
=======================*/

.col-bk{
    color:#1A1311;
}

.fs18{
    font-size: 18px !important;
}

.fs16{
    font-size: 16px !important;
}

.fs16{
    font-size: 14px !important;
}

.hp_mt7{
    margin-top: 7px;
}

.hp_mt12{
    margin-top: 12px;
}

.hp_mt40{
    margin-top: 40px;
}

.hp_mb60{
    margin-bottom: 60px;
}

._flex{
    display: flex !important;
}

._flex-center{
    justify-content: center;
}

.gap40{
    gap:40px;
}

.cont-wrap{

}

.c-link__btn-small.hp__btn{
    min-width: 140px;
}

.hp_arrow:after {
    content: "";
    width: 20px;
    height: 10px;
    display: inline-block;
    position: relative;
    top: 0.08em;
    margin: 0 0.3em;
    background: url(/cmn3/img/icon/ic_arrow_down.svg) no-repeat 50%;
    background-size: 15px 10px;
}

.c-box_blue{
    background-color: #f5f7fa;
}

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

.hp_panel dl dt{
    text-decoration: none;
}


/*=====================
パーツ
=======================*/
/* .hp_panel_link{
    border-radius: 8px;
    background: #fff;
    border: 2px solid #0072bc;
    -webkit-box-shadow: 0px 4px 0px #0072bc;
    box-shadow: 0px 4px 0px #0072bc;
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-decoration: none !important;

    &:active{
        box-shadow: 0px 0px 0px #0072bc;
        p{
            color:#0072bc !important;
        }
    }
} */


.hp_panel_inner{
    padding: 27px 31px 16px 52px;

}

.hp_panel_wrap{
    flex-wrap: wrap;
}

.panel_left{
    /* flex:2 */
    text-align: center;
}
.panel_right{
    flex:8;
}

.panel_img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 330px;
}

.hp_text-letter{
    letter-spacing: .1em;
}


@media (max-width: 767px) {
.hp_sp_fs12{
    font-size:1.4rem !important;
}

.panel_right{
    p{
        font-size:1.2rem !important;
    }
}

.hp_panel_inner{
    padding: 30px 23px 10px;
    }


.hp_panel_wrap{
    flex-direction: column;
}
}

.hp_panel_link{
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    width: fit-content;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;

    &:hover{
        background-position: center right 10px;
        box-shadow: 0 3px 25px rgba(0, 0, 0, 0.15);
        transition: background-position 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
        background-color: #e7f2fc;
    }

      &:active{
        p{
            color:#0072bc !important;
        }
    }
}

.hp_bg-gray{
    background-color: #f5f6f9 !important;
}


.hp_sub_ttl{
    font-size: 20px;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

.c-btn__modal-opt{
    /* margin: 10px 0 0;
    border: none;
    color: #0072BC;
    padding: 0;
    background:none;
    font-size: 14px; */

    /* &::after{
        content: "";
        width: 14px;
        height: 14px;
        display: inline-block;
        position: relative;
        top: 0.08em;
        margin: 0px 0.3em;
        background: url(/cmn3/img/icon/ic_expand.svg) 50% center / 14px 14px no-repeat;
    }

    &:hover{
        cursor: pointer;
        opacity:.7;
    } */


    display: inline-block;
    position: relative;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    line-height: 1.6;
    width: auto;
    border: 1px solid #0072bc;
    background: #0072bc url(/cmn3/img/icon/ic_expand-white.svg) no-repeat center right 14px;
    background-size: 14px 14px;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    font-family: inherit;
    color: #fff;
    padding: 8px 30px 10px 20px;
    background-position: center right 10px;
    font-size: 0.875em;
    max-width: 157px;

    &:hover {
        border-color: #005b97;
        background-color: #005b97;
        outline: 0;
    }
}

/* モーダル：開いている間は背面スクロールを無効化 */
html:has(.c-modal[aria-hidden="false"]),
body:has(.c-modal[aria-hidden="false"]) {
    overflow: hidden !important;
    height: 100%;
}

/* モーダル：PC幅でもビューポート内に収める */
.c-modal__overlay {
    overflow-y: auto;
}

.c-modal__body {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
}

.c-modal__container {
    margin-top: 50px;
}