@charset "utf-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('../apps/font-awesome/css/font-awesome.min.css');
/*--京base.css--*/
:root {
    --base_color0: #222;
    --base_color1: #0F98BB;
    --base_color2: #3566cd;
    --base_color3: #616161;
    --base_color4: #006172;
    --base_color5: #fb7d95;
    --base_color6: #c40026;
}

/*##########モバイルファースト##########*/

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
    outline-offset: -2px;
}

/*##########SP##########*/
html{
    font-size:3.6vw;
    overflow-y: initial;
}

body{
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    position: relative;
    color: #222;
}

button,
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="submit"],
input[type="email"]{
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-appearance: none;
    appearance: none;
}

select{
    font-family: 'Noto Sans JP', sans-serif;
}

img{
    vertical-align:bottom;
    max-width:100%;
    height:auto;
}

a{
    color: var(--base_color2);
}

#container{
    width:100%;
    position: relative;
}

header{
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
}

    header > .box_inner{
        box-sizing: border-box;
        height: 17vw;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 0.25rem solid var(--base_color1);
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 0 4vw;
    }

        header > .box_inner .site_title{
            width: 16rem;
        }

            header > .box_inner .site_title a{
                display: block;
                transition: .3s all ease;
            }

            header > .box_inner .site_title a:hover{
                filter: brightness(1.2);
            }

        header > .box_inner .btn_goto_input{
            display: none;
        }

            header > .box_inner .btn_goto_input a{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: var(--base_color3);
                text-decoration: none;
            }

                header > .box_inner .btn_goto_input a .icon{
                    width: 2.25rem;
                    transition: .3s all ease;
                }

                header > .box_inner .btn_goto_input a:hover .icon{
                    transform: translateY(-0.25rem);
                }

                header > .box_inner .btn_goto_input a .lbl{
                    font-size: 0.9em;
                    font-weight: 500;
                    position: relative;
                }

                header > .box_inner .btn_goto_input a .lbl::after{
                    content: "";
                    display: block;
                    width: 100%;
                    border-bottom: 2px solid var(--base_color1);
                    position: absolute;
                    bottom: -0.2em;
                    left: 0;
                    transition: .3s all ease;
                    opacity: 0;
                }

                header > .box_inner .btn_goto_input a:hover .lbl::after{
                    opacity: 1;
                }



.contents{
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    padding-top: 20vw;
    padding-bottom: 7rem;
    background-image: url(../shared/bg_contents_bottom.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    min-height: calc(100vh - 110vw);
}

footer{
    position: relative;
    z-index: 1;
}

    footer > .box_inner{
        background: #f5f5f5;
        padding: 2em 0;
    }

        footer > .box_inner p{
            text-align: center;
            margin-bottom: 1em;
        }

        footer > .box_inner .contact_info{
            font-size: 0.9em;
            margin-top: 1em;
        }

            footer > .box_inner .contact_info dl{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

                footer > .box_inner .contact_info dl dt{
                    font-weight: 500;
                    margin-bottom: 0.2em;
                }

        footer > .box_inner .bns{}

            footer > .box_inner .bns ul{
                display: flex;
                justify-content: center;
                gap: 0.75rem;
                padding: 0 1.5rem;
            }

                footer > .box_inner .bns ul li{
                }

                    footer > .box_inner .bns ul li a{
                        display: block;
                        transition: .3s all ease;
                    }

                    footer > .box_inner .bns ul li a:hover{
                        filter: brightness(1.1);
                        box-shadow: 0 0 5px 1px rgba(0,0,0,0.1);
                    }

    footer > .box_footer{
        background: var(--base_color1);
        color: #fff;
        display: flex;
        justify-content: center;
        padding: 1em 0;
    }

        footer > .box_footer p{
            font-size: 0.9em;
        }

/*ページトップ*/
.pagetop{
    width:12vw;
    height:12vw;
    position:fixed;
    bottom:5vw;
    right:5vw;
    z-index:10;
    transform:translateY(100px);
    transition:.3s all ease;
    opacity:0;
}

.pagetop.show{
    transform:translateY(0);
    opacity:1;
}

    .pagetop a{
        display:flex;
        justify-content:center;
        align-items:center;
        transition:.5s all ease;
        width:100%;
        height:100%;
        background: var(--base_color1);
        text-decoration:none;
        color:#fff;
        box-sizing:border-box;
        padding-top:3vw;
    }

    .pagetop a:hover{
        transform:translateY(-5px);
        opacity:0.9;
    }

    .pagetop a:before{
        content:"";
        display:inline-block;
        width:5vw;
        height:5vw;
        box-sizing:border-box;
        border:3px solid #fff;
        border-right:none;
        border-bottom:none;
        transform:rotate(47deg) skewX(5deg);
    }

br.pc{
    display: none;
}

br.tab{
    display: none;
}

br.sp.tab{
    display: inline;
}

.mfp-close{
    top: -44px;
    font-size: 50px;
}

.mfp-close-btn-in .mfp-close{
    color: #fff;

}

.mfp-container{
    padding-left: 3vw;
    padding-right: 3vw;
}

.modal_window_box{
    box-sizing: border-box;
    background: #fff;
    border-radius: 1rem;
    height: 70vh;
    overflow-y: auto;
    padding: 2em 1em 1em 1em;
}

    .modal_window_box > .box_header{
        border-bottom: 1px solid rgba(0,0,0,0.2);
        margin-bottom: 1.5em;
        padding-bottom: 0.5em;
    }

        .modal_window_box > .box_header h3{
            font-weight: 500;
            font-size: 1.3em;
            text-align: center;
        }

    .modal_window_box > .box_inner{
        padding: 0 1em;
    }

        .modal_window_box > .box_inner ol{
            counter-reset: term_no 0;
            line-height: 1.5;
        }

            .modal_window_box > .box_inner ol li{
                margin-bottom: 1em;
                position: relative;
                padding-left: 1.5em;
            }

            .modal_window_box > .box_inner ol li::before{
                box-sizing: border-box;
                counter-increment: term_no 1;
                content: counter(term_no) ".";
                position: absolute;
                top: 0;
                left: 0;
            }



.content_title{
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

    .content_title h2{
        color: #1a1a1a;
        font-size: 1.5em;
        font-weight: 600;
    }



/*##########タブレット##########*/
@media (min-width: 768px) {
    html{
        font-size:2vw;
    }

    header > .box_inner{
        height: 6rem;
    }

        header > .box_inner .site_title{
            width: 19rem;
        }

    footer > .box_inner .bns ul li{
        width: 14rem;
    }

    footer > .box_inner .contact_info a{
        color: var(--base_color0);
        text-decoration: none;
        pointer-events: none;
    }

    .contents{
        padding-top: 8rem;
        background-position: right bottom;
        min-height: calc(100vh - 68vw);
    }

    .pagetop{
        width: 5rem;
        height: 5rem;
    }

    .pagetop a:before{
        width: 2rem;
        height: 2rem;
    }

    br.sp{
        display: none;
    }

    br.tab{
        display: inline;
    }

    br.sp.tab{
        display: inline;
    }


}

/*##########PC##########*/
@media (min-width: 1024px) {
    html{
        font-size:16px;
    }

    body{
        overflow-y: auto;
    }

    header > .box_inner .site_title{
        width: 20rem;
    }

    header > .box_inner .btn_goto_input a .icon{
        width: 2rem;
    }

    .contents{
        background-size: auto 10rem;
        padding-bottom: 12rem;
    }

    footer > .box_inner{
        padding: 3em 0;
    }

    footer > .box_inner .bns ul{
        gap: 1.5em;
    }

    footer > .box_inner .contact_info{
        margin-top: 1.5em;
        font-size: 1em;
    }

    .pagetop{
        width: 4rem;
        height: 4rem;
    }

        .pagetop a{
            padding-top: 1rem;
        }

        .pagetop a:before{
            width: 1.5rem;
            height: 1.5rem;
        }

    br.pc{
        display: inline;
    }

    br.tab{
        display: none;
    }

    br.tab.pc{
        display: inline;
    }

    .modal_window_box{
        padding: 2em;
    }

    .mfp-inline-holder .mfp-content{
        width: 70%;
    }

    
}