@charset "utf-8";


body {
    background: #fff;
    color: #333;

    font-family:"Noto Sans JP",
        "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
        "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic",
        "メイリオ", Meiryo,
        Helvetica,sans-serif;

    font-size: 16px;
    *font-size: small;
    *font: x-small;
    line-height: 1.4em;

}

img {
    image-rendering: -webkit-optimize-contrast;
}

#wrapper{
    position: relative;
    visibility: hidden;
    opacity: 0;
}


body.loaded #wrapper{
   visibility: visible;
    opacity: 1;
    transition-duration: 400ms;
    transition-timing-function: linear;
    transition-property: opacity;
}

.d_sentence{
    position: relative;
}


@media print,screen and (min-width: 769px) {

    .sp{
        display: none !important;
    }
    body{
/*        overflow: hidden;*/

        -webkit-text-size-adjust: 100%;
        -webkit-touch-callout: none;
        -webkit-user-select:none;
    }


    #wrapper{
        min-width: 1000px;
        height: 100vh;
        overflow: hidden;
    }

    header{
        position: fixed;
        left: 0;
        top: 0;
        height: 65px;
        width: 100%;
        min-width: 1000px;
/*        background-color: rgba(255,0,0,0.2);*/
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items:center;
        z-index: 10;
        transform:translateY(-100px);
        transition-timing-function: ease;
        transition-property: transform;
        transition-duration: 400ms;
    }

    body.openingComplete header{
        transform:translateY(0px);
    }

    header .logo a{


/*        background-color: #fff;*/

        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(../img/hd_logo.png);
        -webkit-background-size: calc(180px * 0.75) calc(60px * 0.75);
        background-size: calc(180px * 0.75) calc(60px * 0.75);
        background-repeat: no-repeat;
        background-position: center center;
        width:180px;
        height:60px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .entry a{
        text-decoration: none;
        color: #fff;
        position: absolute;
        right: 0px;
        top: 0px;
        background-color: #000;
        width: 150px;
        height: 65px;
        overflow: hidden;
        text-align: center;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items:center ;
        align-items:center ;
    }
    header .entry a span{
        font-size: 13px;
        line-height: 1em;
    }
    header .entry a span img{
        margin-top: 8px;
        width: 40px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    header .menu .gnavi{
        position: relative;
        height: 40px;
/*        background-color: #f00;*/
    }

    header .menu .gnavi .current{
        position: absolute;
        left: 0;
        bottom: -1px;
    }
    header .menu .gnavi .current > span{
        display: block;
        width: 12px;
        height: 12px;
        margin-left: -6px;
        margin-top: -6px;
    }
    header .menu .gnavi .current > span > span{
        display: block;
        width: 12px;
        height: 12px;
        background-color: #17702a;
        animation-name: currentAnime;
        animation-duration: 2000ms;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        transform-origin: center center;
    }


    @keyframes currentAnime{
        0%{
            transform:scale(1) rotate(0deg);
        }
        25%{
            transform:scale(1.3) rotate(0deg);
        }
        50%{
            transform:scale(1.3) rotate(180deg);
        }
        75%{
            transform:scale(1) rotate(180deg);
        }
        100%{
            transform:scale(1) rotate(180deg);
        }
    }
    header .menu .gnavi .bar{
        position: absolute;
        left: 32px;
        top: 34px;
        height: 1px;
        width: 480px;
        background-color: #fff;
        overflow: hidden;

    }
    header .menu .gnavi .bar .now{
        display: block;
        height: 1px;
        width: 0;
        background-color: #1d6f2e;
        position: absolute;
        left: 0;
        top: 0;
    }
    header .menu .gnavi .bar .next{
        display: block;
        height: 1px;
        width: 100px;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    header .menu .gnavi .bar .next span{
        display: block;
        height: 1px;
        background-color: #1d6f2e;
        position: absolute;
        left: 0;
        top: 0;
        animation-name:barnext;
        animation-iteration-count: infinite;
        animation-duration:1500ms;
        animation-timing-function: ease-in-out;
    }


    @keyframes barnext{
        0%{
            width: 0px;
            left: 0;
        }
        33%{
            width: 100%;
            left: 0;
        }
        66%{
            width: 0%;
            left: 100%;
        }
        100%{
            width: 0%;
            left: 100%;
        }
    }


    header .menu ul{
        position: relative;
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
    }
    header .menu ul li{
        position: relative;
        margin-left: 25px;
        margin-right: 25px;
    }
    header .menu ul li a{
        text-decoration: none;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../img/hd_menu_current.png);
        background-repeat: no-repeat;
        background-position: center 30px;
    }



/*
    header .menu ul li a.active, header .menu ul li a:hover{
        background-image: url(../img/hd_menu_current_active.png);
    }
*/

    header .menu ul li a span{
       display: block;
        background-repeat: no-repeat;
        background-position: center top;
        text-indent: -9999px;
        width: 100%;
        height: 100%;
    }




    header .menu ul li#mn_top{
        width: 22px;
    }
    header .menu ul li#mn_top span{
        background-image: url(../img/hd_menu_0.png);
    }

    header .menu ul li#mn_statement{
        width: 66px;
    }
    header .menu ul li#mn_statement span{
        background-image: url(../img/hd_menu_1.png);
    }

    header .menu ul li#mn_rules{
        width: 62px;
    }
    header .menu ul li#mn_rules span{
        background-image: url(../img/hd_menu_2.png);
    }

    header .menu ul li#mn_uniqueness{
        width: 102px;
    }
    header .menu ul li#mn_uniqueness span{
        background-image: url(../img/hd_menu_3.png);
    }

    header .menu ul li#mn_message{
        width: 58px;
    }
    header .menu ul li#mn_message span{
        background-image: url(../img/hd_menu_4.png);
    }

    header .menu ul li#mn_entry{
        width: 33px;
    }
    header .menu ul li#mn_entry span{
        background-image: url(../img/hd_menu_5.png);
    }



    .contents{
        position: relative;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        width: 9999999px;
    }
    .contents .content{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .contents .content .inner{
        position: relative;
    }

    .content .scrollicon{
        width: 100px;
        height: 100px;
        background-image: url(../img/scroll_line.png);
        background-repeat: no-repeat;
        width: 16px;
        height: 106px;
        position: relative;
        transition-property: opacity;
        transition-duration: 400ms;
        transition-timing-function: ease;
    }
    .content.hideScrollIcon .scrollicon{
        opacity:0 !important;
    }

    .content .scrollicon span{
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        background-image: url(../img/scroll_text.png);
        width: 9px;
        height: 51px;
        text-indent: -9999px;
        overflow: hidden;
        animation-duration:1500ms;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-name: scrollicon;
    }


    @keyframes scrollicon{
        0%{
            transform:translateY(0px);
            opacity:0;
        }
        50%{
            opacity:1;
            transform:translateY(40px);
        }
        100%{
            transform:translateY(40px);
            opacity:0;
        }
    }


}



@media screen and (min-width: 769px) and (max-height: 550px) {

    body{
        overflow: auto;
    }
    #wrapper{
        height: 550px;
    }
}



@media only screen and (max-width: 768px) {

    body {
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust: 100%;
        -webkit-touch-callout: none;
        -webkit-user-select:none;
    }


    #wrapper{
       width: 100vw;
        overflow: hidden;
    }

    .pc{
        display: none!important;
    }

    img{
        width: 100%;
    }



    header{
/*        background-color: #fff;*/
        position: fixed;
        left: 0;
        top: 0;
        height: 50px;
        width: 100%;
/*        background-color: rgba(255,0,0,0.2);*/
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items: center;
        align-items:center;
        z-index: 10;
    }

    header .logo a{
        display: block;
        position: absolute;
        left: 5px;
        top: 5px;
        background-image: url(../img/hd_logo.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: calc(180px * 0.65);
        height:calc(60px * 0.65);
        text-indent: -9999px;
        overflow: hidden;
    }


    header .menubtn a{
        background-color: #009d4a;
        display: block;
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: url(../img/hd_menubtn.png);
        -webkit-background-size: cover;
        background-size: cover;
        width: 50px;
        height:50px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .closebtn a{
        display: block;
        position: fixed;
        right: 0px;
        top: 0px;
        background-image: url(../img/hd_menubtn_close.png);
        -webkit-background-size: cover;
        background-size: cover;
        width: 50px;
        height:50px;
        text-indent: -9999px;
        overflow: hidden;
        z-index: 2;
        display: none;
    }

    body.openMenu header .closebtn a{
        display: block;
    }

    header .entry a{
        text-decoration: none;
        color: #fff;
        position: absolute;
        right: 50px;
        top: 0px;
        background-color: #000;
        width: 120px;
        height: 50px;
        overflow: hidden;
        text-align: center;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;
        -ms-align-items:center ;
        align-items:center ;
    }



    header .entry a span{
        font-size: 10px;
        line-height: 1em;
    }
    header .entry a span img{
        margin-top: 4px;
        width: 26px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }




    header .menu{
        position: fixed;
        right: 0;
        top: 0;
        width: 0;
        height: 100vh;
        background-color: rgba(255,255,255,0.95);
        z-index: 1;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items:center;
        align-items:center ;
        overflow: auto;
        transition-duration: 250ms;
        transition-timing-function: ease-out;
        transition-property: width;

    }
    body.openMenu header .menu{
        width: 100vw;
    }

    header .menu ul li{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    header .menu ul li a{
        text-decoration: none;
        display: block;
        background-position: left center;
    }
    header .menu ul li a.active{
        background-image: url(../img/hd_menu_line_sp.png);
        background-repeat: no-repeat;
        -webkit-background-size: 10vw 1px;
        background-size: 10vw 1px;
    }
    header .menu ul li a span{
        font-weight: bold;
        color: #333;
        font-size: 13px;
        display: block;
        -webkit-background-size: cover;
        background-size:cover ;
        width: 70vw;
        height: calc(70vw / 440 * 60);
        margin-left: 14vw;
        padding-top: calc(70vw / 440 * 60);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


    header .menu ul li#mn_top span{
        background-image: url(../img/hd_menu_0_sp.png);
    }


    header .menu ul li#mn_statement span{
        background-image: url(../img/hd_menu_1_sp.png);
    }


    header .menu ul li#mn_rules span{
        background-image: url(../img/hd_menu_2_sp.png);
    }


    header .menu ul li#mn_uniqueness span{
        background-image: url(../img/hd_menu_3_sp.png);
    }


    header .menu ul li#mn_message span{
        background-image: url(../img/hd_menu_4_sp.png);
    }










    .contents{
        position: relative;
    }
    .contents .content{
        position: relative;
        overflow: hidden;
    }




}

@media only screen and (orientation:landscape){


    header .menu{
        display: block;
    }
}