@charset "utf-8";
/* スマホ横向きCSS */
@media screen and (min-width:1px) and (max-width:768px) {
    /* 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########## */
@media screen and (min-width:1px) and (max-width:479px) {
    html{
        font-size: 3.6vw;
    }

    body {
        min-width:initial;
        min-width:auto;
        overflow-y: scroll;
    }

    #container{
        min-width:initial;
        min-width:auto;
    }

    /*----------header----------*/
    header{}

        header > .box_inner,
        .small_header header > .box_inner{
            justify-content:flex-start;
            height: 16vw;
            min-width: auto;
            min-width: initial;
            padding: 0 0 0 3vw;
        }

        header > .box_inner .ku_logo_site_title a{
            align-items: center;
        }

            header > .box_inner .ku_logo_site_title .ku_logo,
            .small_header header > .box_inner .ku_logo_site_title .ku_logo {
                width: 9vw;
                margin-right: 2vw;
            }

            header > .box_inner .ku_logo_site_title .site_title{
                gap: 0;
                align-items: flex-start;
                flex-direction: column;
            }

            header > .box_inner .ku_logo_site_title .site_title .lbl_ja,
            .small_header header > .box_inner .ku_logo_site_title .site_title .lbl_ja{
                width: calc(8vw / 56 * 240);
            }

            header > .box_inner .ku_logo_site_title .site_title .lbl_en,
            .small_header header > .box_inner .ku_logo_site_title .site_title .lbl_en{
                width: calc(8vw / 56 * 328);
            }

        header > .box_inner .navs{
            display: none;
        }
    
    /*----------contents----------*/
    .contents{
        padding-top: 16vw;
        padding-bottom: 3em;
        background: url(../shared/bg_home_catch.png) no-repeat;
        background-size: 96rem 52rem;
        background-position: top center;
    }

    .access_box{
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        margin-top: 1rem;
        background: url(../shared/bg_access.png) center top / 96rem 10rem;
    }

    .access_box .box_header{
        padding-right: 0;
        border-right: none;
    }

    .access_box .box_header h2 a{
        padding-right: 3.25rem;
    }

    .access_box .box_header h2 a::before{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: calc(50% - 1rem);
        right: 0;
    }

    .access_box .box_header h2 a::after{
        position: absolute;
        top: calc(50% - 0.5rem);
        right: 0.5rem;
    }

    .access_box .box_header h2 a:hover::after{
        right: 0;
    }

    .access_box .box_inner{
        padding-left: 0;
    }

    .access_box .box_header h2 .lbl_en{
        font-size: 2.5rem;
    }

    /*-----footer-----*/
    footer{}

    footer > .box_header ul li a{
        padding: 0.8rem 0;
        line-height: 1.5;
        font-size: 0.9rem;
    }

    footer > .box_inner{
        padding: 2rem 0;
    }

    footer > .box_inner .f_site_title{
        width: 12rem;
    }

    footer > .box_footer{
        padding: 0 0 2rem 0;
        line-height: 1.5;
        margin: 0 5vw;
    }
    

    .nav_oc,
    .small_header .nav_oc{
        display: block;
        width: 16vw;
        height: 16vw;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
    }

        .menu-trigger{
            width: 100%;
            height: 100%;
            padding: 0;
            border: none;
            background: rgba(255,255,255,0);
            cursor: pointer;
            outline: none;
            position: relative;
            transition: .3s all ease;
        }

        .menu-trigger:hover{

        }

            .menu-trigger span {
                display: inline-block;
                transition: all .4s;
                box-sizing: border-box;
                background-color: #333;
                position: absolute;
                width: 5vw;
                left: 5.5vw;
                height: 1px;
            }

            .menu-trigger span:nth-of-type(1) {
                top: 5.7vw;
            }

            .menu-trigger span:nth-of-type(2) {
                top: calc(8vw - 1px);
            }
            .menu-trigger span:nth-of-type(3) {
                bottom: 5.7vw;
            }

            .menu-trigger.active span{
                background-color: #333;
            }

            .menu-trigger.active span:nth-of-type(1) {
                -webkit-transform: translateY(2.1vw) rotate(-315deg);
                transform: translateY(2.1vw) rotate(-315deg);
            }

            .menu-trigger.active span:nth-of-type(2) {
                opacity: 0;
            }

            .menu-trigger.active span:nth-of-type(3) {
                -webkit-transform: translateY(-2.3vw) rotate(315deg);
                transform: translateY(-2.3vw) rotate(315deg);
            }

    .side_nav{
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        width: 100%;
        height: 100%;
        transition: .3s all ease;
        background: rgba(255,255,255,0);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20vw;
    }

    .side_nav.active{
        z-index: 9;
        opacity: 1;
    }

        .side_nav .side_global_nav{
            box-sizing: border-box;
            width: 100%;
            padding: 0 5vw;
        }

            .side_nav .side_global_nav > ul{
                width: 100%;
            }
                .side_nav .side_global_nav > ul > li{
                    margin-bottom: 0.5rem;
                }
    
                .side_nav .side_global_nav > ul > li:last-child{
                    margin-bottom: 0;
                }
    
                .side_nav .side_global_nav > ul > li a{
                    background: #fff;
                    display: block;
                    color: #333;
                    text-decoration: none;
                    padding: 1rem;
                    font-weight: 500;
                    border-radius: 3px;
                    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
                }


    /*ページトップ*/
    .pagetop{
        width:14vw;
        height:14vw;
        bottom:12vw;
        right:4vw;
    }
    
    /*ヘッダ固定によるアンカーずれ対応*/
    *[id^="anc_"]{
        padding-top: 17vw;
        margin-top:-17vw;
    }


    /*改行のPC,SPでの表示切替*/
    br.pc,
    img.pc,
    span.pc{
        display:none;
    }

    br.sp,
    img.sp,
    span.sp{
        display:inline;
    }

	
}