@charset "UTF-8";

/*-------------------------
__page_style
-------------------------*/

#wrap{ background-color: #f0f5f5; width: 100%;height:100%;min-height:100vh;position: relative;}

#header{ width: 100%; background-color: #fff; border-bottom: 1px solid #ddd;}
#header #TopText{font-size:1em;text-align:left;padding:15px 30px 5px;}
#header .inner_box{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding:0 30px 30px; box-sizing: border-box;}
#header .inner_box .com_logo{ width: 201px; height: 30px;}
#header .inner_box .com_logo img{ width: 100%; height: auto;}
#header .inner_box .com_link a{ display: block; border-radius:6px; box-shadow:0px 2px 3px 2px rgba(51,51,51,0.3); font-size: 15px; line-height: 16px; text-decoration: none; image-rendering: -webkit-optimize-contrast; position: relative;}
#header .inner_box .com_link a span{display: inline-block; padding: 12px 56px 10px 12px; box-sizing: border-box; color: #004da0; font-weight: 700; text-align: center; vertical-align: middle;}
#header .inner_box .com_link a img{ position: absolute; top: -10px; right: 8px;}
@media only screen and (min-width: 1000px) {
#header .inner_box .com_link a{ transition: all 0.3s;}
#header .inner_box .com_link a:hover{ opacity:0.5;}
}
@media only screen and (max-width: 767px) {
#header #TopText{padding:10px 20px 5px;}
#header .inner_box{padding:0 20px 20px;}
#header .inner_box .com_logo{ width: 170px; margin-top: 10px;}
#header .inner_box .com_link a{ font-size: 13px; line-height: 14px;}
#header .inner_box .com_link a span{padding: 12px 56px 10px 12px;}
}
@media only screen and (max-width: 374px) {
#header .inner_box .com_logo{width:150px;}
#header .inner_box .com_link a span{padding:12px 36px 10px 6px;}
#header .inner_box .com_link a img{width:30px;height:30px;top:-5px;}
}

#content{ margin: auto; padding: 40px 0 217px; box-sizing: border-box; text-align: center; width: 100%; max-width: 1100px;}
#content .contents_inner{ background-color: #e2ecec; padding: 30px 0; box-sizing: border-box;}
#content .video_wrap{position:relative;max-width:800px;margin:auto;box-sizing:border-box;}
#content .video_wrap::before{content:"";display:block;padding-top:56.25%;/*16:9*/}
#content .video_wrap video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;}
#content .video_wrap .start_button{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0;}
h1.main_title{font-size: 25px; line-height: 1; font-weight: 700; text-align: left; color: #004D9E; border-bottom: solid 5px #004D9E; padding: 0 0 15px 0; position: relative; margin-bottom: 30px;}
/*h1.main_title::after { content: ""; width: 140px; height: 76px; background-image: url(/images/shop/character_01@2x.png); -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -2px; right: 18px;}*/
@media only screen and (max-width: 1024px) {
#content{padding:10% 10px 210px;}
}
@media only screen and (max-width: 767px) {
#content .contents_inner{ padding:0;}
#content .title{margin:0 0 15px;padding:10px;font-size:1.6em;}
#content{padding:15% 10px 210px;}
h1.main_title{font-size: 21px; padding: 0 0 10px 0; margin-bottom: 20px; border-bottom: solid 3px #004D9E;}
}
@media only screen and (max-width: 374px) {
#content{padding:5% 10px 0;}
}



#footer{ position: absolute; bottom: 0; width: 100%; height: 217px; box-sizing: border-box;}
#footer .inner_box{ position: relative; background-image: url("images/town.png"); background-size: auto; background-position: bottom; background-repeat: repeat-x;}
#footer .inner_box #copyright{ padding: 40px 0 90px; box-sizing: border-box;}
#footer .inner_box #copyright p{ font-size: 14px; margin-bottom: 7px; color: #666;}
#footer .inner_box #copyright em{ font-size: 14px;line-height:1.4;color: #666;}
#footer .inner_box .footer_illust{ width: 190px; height: auto; position: absolute; bottom: 0; right: 30px;}
#footer .inner_box .footer_illust img{ width: 100%; height: auto;}
@media only screen and (max-width: 900px) {
}
@media only screen and (max-width: 767px) {
#footer{ height: auto;}
#footer .inner_box #copyright{ padding: 40px 0 110px;}
#footer .inner_box #copyright p{ font-size: 12px; margin-bottom: 5px;}
#footer .inner_box #copyright em{ font-size: 12px;}
#footer .inner_box .footer_illust{ width: 160px; height: 87px; position: absolute; bottom: -90px; right: 0; left: 0; top: 0; margin: auto; padding: auto;}
#footer .inner_box .footer_illust img{ width: 100%; height: auto;}
}