body{
    line-height: 1em;
    overflow-x: hidden;
}
.bg{
    padding: 50px 0;
    width: 100%;
}
.title{
    margin-bottom: 67px;
    margin-left: calc(50% - 293px);
}
.content{
    margin-left: calc(50% - 512px);
}
#bg1{
    height: 100vh;
}
#logo{
    margin-left: calc(50% - 426px);
    margin-top: 88px;
}
#form_checked{
    opacity: 0;
}
#token.disabled{
    opacity: .5;
    pointer-events: none;
}
#token:empty:after{
    content: '確認コード発行';
}
#token:not(:empty)::before{
    content: '再発行(';
}
#token:not(:empty)::after{
    content: 's後)';
}
#content4{
    margin-left: calc(50% - 512px);
    width: 1024px;
}
#content4 .carousel-inner{
    text-align: center;
}
#content4 .carousel-inner img{
    height: 800px;
}
#content4 > a{
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    height: 100%;
}
#content4 a{
    background-position: center center;
    background-repeat: no-repeat;
}
#content5{
    height: 720px;
    margin-left: calc(50% - 290px);
    position: relative;
    padding: 10px 20px;
    width: 580px;
}
#content5 iframe{
    position: absolute;
    /* height: 100% !important; */
    /* width: 100% !important; */
}
#twitter{
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}
#footer_line > img{
    margin: auto;
}
#footer_download > a{
    display: inline-block;
}
#ok{
    position: absolute;
    left: 36%;
    width: 28%;
    bottom: 5%;
}
#social{
    position: absolute;
    right: 20px;
    top: 20px;
}
#social > a{
    margin-bottom: 20px;
}
#social a:hover > img.unchose{
    display: none !important;
}
#social a:not(:hover) > img.chosen{
    display: none !important;
}
#footer_links{
    padding-bottom: 30px;
}



@media all and (min-width:1024px) {
body .mobile{
    display: none !important;
}
.zoom-vw{
    zoom: 1 !important;
}
#arrow{
    bottom: 30px;
    position: fixed;
    right: calc(124vh / 10.8);
    height: calc(90vh / 10.8);
    z-index: 999;
}
#board{
    height: calc(615vh / 10.8);
    padding: calc(58vh / 10.8) calc(53vh / 10.8);
    margin-left: calc(50% - calc(338vh / 10.8));
    margin-top: calc(60vh / 10.8);
    width: calc(676vh / 10.8);
}
#number{
    margin-bottom: calc(88vh / 10.8);
    text-align: center;
}
#number img{
    display: inline-block;
    height: calc(31vh / 10.8);
    margin: 0 1px;
}
#board_prev{
    margin-bottom: calc(14vh / 10.8);
}
#board_prev div{
    text-align: right;
}
#board_prev > img:first-child{
    height: calc(218vh / 10.8);
    width: calc(218vh / 10.8);
}
#board_prev a img{
    width: calc(310vh / 10.8);
}
#board_prev a:first-child{
    margin-bottom: calc(13vh / 10.8);
}
#board_check{
    margin-bottom: calc(7vh / 10.8);
}
#board #under{
    height: calc(140vh / 10.8);
    margin-top: calc(20vh / 10.8);
}
#checkbox{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto auto;
}
#checkbox, #checked{
    height: calc(19vh / 10.8);
    width: calc(23vh / 10.8);
}
#agree{
    margin-left: calc(10vh / 10.8);
}
#agree img{
    height: calc(17vh / 10.8);
}
#board input{
    background-color: transparent;
    background-size: 100% 100%;
    background-position: left center;
    border: none;
    font-size: 1rem;
    height: calc(52vh / 10.8);
    margin-right: calc(15vh / 10.8);
    padding: 0 .5rem;
    outline: none;
    width: calc(70% - calc(15vh / 10.8));
}
#board button{
    background-color: transparent;
    background-size: 100% 100%;
    border: none;
    color: black;
    font-weight: bolder;
    height: calc(52vh / 10.8);
    outline: none;
    text-align: center;
    width: 30%;
}
#board_email{
    margin-bottom: calc(6vh / 10.8);
    margin-top: calc(38vh / 10.8);
}
#board_hint img{
    height: calc(43vh / 10.8);
}
#board_code{
    margin-top: calc(6vh / 10.8);
}
#content4_left{
    margin-left: -10%;
}
#content4_right{
    margin-right: -10%;
}
#content5{
    margin-bottom: 100px;
}
#footer_download{
    margin-right: 29px;
    text-align: right;
}
#footer_download > a{
    margin: 27px;
}
#footer_download > a img{
    height: 70px;
}
#footer_line > img{
    width: calc(100% - 112px);
}
#footer_links a{
    margin: 28px 33px;
}
}



@media all and (max-width:1023px) {
body .pc{
    display: none !important;
}
.zoom-vh{
    zoom: 1 !important;
}
.bg{
    padding: 20px 0;
    width: 100%;
}
.title{
    margin-bottom: 20px;
    margin-left: 20%;
    width: 60%;
}
.content{
    margin-left: 10%;
    width: 80%;
}
#social{
    right: 10px;
    top: 10px;
}
#social > a{
    margin-bottom: 10px;
}
#social img{
    width: calc(50vh / 13.36);
}
#logo{
    margin-left: calc(50% - 14.11vh);
    margin-top: 5vh;
    height: 33.38vh;
}
#arrow{
    bottom: 15px;
    position: fixed;
    right: calc(29vh / 13.36);
    height: calc(90vh / 13.36);
    z-index: 999;
}
#board{
    height: calc(615vh / 13.36);
    padding: calc(58vh / 13.36) calc(53vh / 13.36);
    margin-left: calc(50% - calc(338vh / 13.36));
    margin-top: calc(60vh / 13.36);
    width: calc(676vh / 13.36);
}
#number{
    margin-bottom: calc(88vh / 13.36);
    text-align: center;
}
#number img{
    display: inline-block;
    height: calc(31vh / 13.36);
    margin: 0 1px;
}
#board_prev{
    margin-bottom: calc(14vh / 13.36);
}
#board_prev div{
    text-align: right;
}
#board_prev > img:first-child{
    height: calc(218vh / 13.36);
    width: calc(218vh / 13.36);
}
#board_prev a img{
    width: calc(310vh / 13.36);
}
#board_prev a:first-child{
    margin-bottom: calc(13vh / 13.36);
}
#board_check{
    margin-bottom: calc(7vh / 13.36);
}
#board #under{
    height: calc(140vh / 13.36);
    margin-top: calc(20vh / 13.36);
}
#checkbox{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto auto;
}
#checkbox, #checked{
    height: calc(19vh / 13.36);
    width: calc(23vh / 13.36);
}
#agree{
    margin-left: calc(10vh / 13.36);
}
#agree img{
    height: calc(20vh / 13.36);
}
#board input{
    background-color: transparent;
    background-size: 100% 100%;
    background-position: left center;
    border: none;
    font-size: 1rem;
    height: calc(52vh / 13.36);
    padding: 0 .5rem;
    margin-right: calc(15vh / 13.36);
    outline: none;
    width: 65%;
}
#board button{
    background-color: transparent;
    background-size: 100% 100%;
    border: none;
    color: black;
    font-weight: bolder;
    height: calc(52vh / 13.36);
    outline: none;
    padding: 0;
    text-align: center;
    width: calc(35% + calc(15vh / 13.36));
}
#board_email{
    margin-bottom: calc(6vh / 13.36);
    margin-top: calc(38vh / 13.36);
}
#board_hint img{
    height: calc(43vh / 13.36);
}
#board_code{
    margin-top: calc(6vh / 13.36);
}
#content4{
    margin-left: 0;
    width: 100%;
}
#content4 .carousel-inner img{
    height: 80vw;
}
#content5{
    height: 52.87vh;
    margin-left: calc(50% - 21.34vh);
    margin-bottom: 5vh;
    margin-top: 5vh;
    padding: 1vh 1.5vh;
    width: 42.68vh;
}
#footer_download{
    text-align: center;
}
#footer_download > a{
    margin: 11px 15px;
}
#footer_download img{
    max-width: 35vw;
}
#footer_line > img{
    width: calc(100% - 17px);
}
#footer_links{
    margin: auto;
    width: 90%;
}
#footer_links a > img{
    margin: 19px 22px;
    max-width: 100%;
    height: 15px;
}
#footer_links a:first-child{
    text-align: center;
}
#footer_links a:last-child{
    text-align: center;
}
}



@media all and (min-width:150vh) and (max-height:400px) {
#wide{
    background-color: black;
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 999999;
    opacity: 1;
}
}