@charset "UTF-8";
@font-face { font-family: "MyYuGothicM"; font-weight: normal; src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); }
@font-face { font-family: "MyYuGothicM"; font-weight: bold; src: local("YuGothic-Bold"), local("Yu Gothic"); }
@font-face {font-family: Meiryo;src: local('Meiryo'), local('メイリオ');}
/*********************************************
content:1280px
**********************************************/
/* basic */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", MyYuGothicM, Meiryo, sans-serif; letter-spacing: 0.09em; background: #000 url(../img/result_bg_pc_01.jpg) center top no-repeat; color: #fff; position: relative; }

/* font */
/* link */
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; }
/*********************************************
common color
**********************************************/
/* color */
/* background-color */
/* border-color */
/*********************************************
templete
**********************************************/
/*----- header -----*/
header {}

/*----- layout -----*/
#wrapper { }
#main_contents {}
/*********************************************
common parts
**********************************************/
/*----- box -----*/

/*----- background -----*/

/*----- parts -----*/

/*----- btn -----*/

/*----- youtube -----*/
.youtube { position: relative; width: 100%; padding-top: 62.06%; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

/*********************************************
page
**********************************************/
/*----- sub -----*/
#list .header_logo{text-align:center;}
#header_zoids .header_logo{padding:1px 0;}

#list header{max-width:1174px;min-width:1032px;width:100%;position:relative;margin:5px auto 67px;padding:0 20px;;}
#list header nav{position:absolute;right:20px;top:38px;}
#list header nav a{display:block;}
#list .slides {width:820px;margin:0 auto;}
#list .slides .slide {padding:10px;position:relative;}
#list .slides .slide .inner{height:500px;border:#fff 4px solid;padding:30px 29px 36px 27px;background:url(../img/slide_bg.png) center center repeat;position:relative;}
#list .slides .slide:after,
#list .slides .slide:before,
#list .slides .slide .inner:after,
#list .slides .slide .inner:before{content:"";width:63px;height:49px;position:absolute;z-index:10;}

#list .slides .slide:before{background:url(../img/slide_corner_lt.png) left top no-repeat;left:0;top:0;}
#list .slides .slide:after{background:url(../img/slide_corner_rt.png) left top no-repeat;right:0;top:0;}

#list .slides .slide .inner:before{background:url(../img/slide_corner_lb.png) left top no-repeat;left:-14px;bottom:-14px;}
#list .slides .slide .inner:after{background:url(../img/slide_corner_rb.png) left top no-repeat;right:-14px;bottom:-14px;}

#list .slides .slide .content{float:right;width:385px;height:425px;position:relative;}
#list .slides .slide .fig{float:left;width:346px;}
#list .slides .slide .title{margin:0 0 15px;padding-top:2px;}
#list .slides .slide .title img{height:110px;width:auto;}

#list .slides .slide .txt{height:210px;position: relative;font-size:18px;line-height:2em;letter-spacing:0;}
#list #slide_character .title img{height:93px;width:auto;}

#list #slide_character .txt{height:227px;height:295px;}
#list #slide_zoids .title img{height:128px;width:auto;}
#list #slide_zoids .txt{height:192px;}

#list .slides .slide .btn{position:absolute;bottom:0;left:0;}

#list #slide_zoids .slide .fig{margin-top:34px;}

/*暫定対応*/
#list .slides .slide .inner{height:606px;}
#list .slides .slide .content{height:531px;}
#list .slides .slide .txt{font-size:16px;overflow-y: auto;}
#list #slide_character .txt{height:333px;}
#list #slide_zoids .txt{height:298px;}

#list #slide_character .slide .fig{margin-top:48px;}
#list #slide_zoids .slide .fig{margin-top:82px;}


#list .list_thumb {margin:90px auto 0;width:992px;}
#list .list_thumb li{width:160px;border:2px solid #fff;float:left;margin-left:48px;margin-bottom:41px;-moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden;cursor:pointer;}
#list .list_thumb li:hover{filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;}
#list .list_thumb li:nth-child(5n-4){margin-left:0;}
#list .list_thumb li figure{border-bottom:2px solid #fff;background:url(../img/list_thumb_bg_off.png) left top repeat;}
#list .list_thumb li.current figure{background:url(../img/list_thumb_bg_on.jpg) left top no-repeat;background-size:cover;}
#list .list_thumb li img{width:100%;height:auto;display:block;}

#list .list_link{margin:10px auto 60px;width:245px;}
#list .list_link li:first-child{margin:0 0 15px;}
#list .list_link img{width:100%;height:auto;}

/*----- footer -----*/
footer { width: 100%;}
footer nav{width:950px;margin:30px auto;}

footer nav li img{width:100%;height:auto;}
footer nav li.bnr_01{text-align:center;width:685px;margin:0 auto 30px;}
footer nav li.bnr_02{float:left;width:453px;}
footer nav li.bnr_03{float:right;width:453px;}
#copy { line-height:65px;font-size:17px;text-align: center;background:#fff;color:#333;font-weight:bold; }
#copy small{font-size:100%;}
/* back to top */
#pagetop { position: fixed; bottom: 30px; right: 30px; display: block;z-index:100;}
#pagetop img{width:100%;height:auto}
#pagetop:hover { opacity: 0.7; }




/*----- rayout -----*/

/*********************************************
content:960px
**********************************************/
@media screen and (max-width: 1079px) {
/*----- rayout -----*/
#list header{width:100%;padding:0 4vw;margin:2vw auto 9vw;min-width:auto;}
#list .header_logo {text-align:left;}
#list .header_logo img {width:auto;height:10vw;}
#list header nav{right: 4.933%;top: 3.5vw;}
#list header nav img {width:auto;height:4.67vw;}
#list .slides {width: 86%;}
#list .slides .slide .inner{height:108.8vw;padding:0 6vw;}
#list #slide_character.slides .slide .inner{height:114.8vw;}
#list .slides .slide .content{float:none;width:100%;height:55vw;}
#list .slides .slide .fig{float:none;width:100%;text-align:center;margin-top:0 !important;}
#list .slides .slide .fig img{width:auto;height:48.933vw;margin:0 auto;}
#list #slide_character.slides .slide .fig img{height:54.933vw;padding:4vw 0;}
#list #slide_zoids .slide .fig{margin:0;}
#list .slides .slide .title{margin:0 0 2.3vw;padding-top:0;}



#list .slides .slide .title img{height:14.667vw;width:auto;}
#list #slide_character .title img {height: 12.4vw;}
#list #slide_zoids .title img {height: 17.067vw;}
#list .slides .slide .txt{font-size:2.93vw;height:24vw;}
#list #slide_character .txt {height: 28vw}
#list #slide_zoids .txt {height: 23.5vw}

#list .slides .slide .btn{position:relative;text-align:center;}
#list .slides .slide .btn img{margin:4vw auto 0;height:9.0667vw;width:auto;}

#list .list_thumb {margin:6.67vw auto 0;width:86%;width : -webkit-calc(86% - 20px) ;width : calc(86% - 20px) ;}
#list .list_thumb li,
#list .list_thumb li:nth-child(5n-4){width:30.449%;margin:0 0 4vw 4.3265%;height: auto;display: block;}
#list .list_thumb li:nth-child(3n-2){margin-left:0;}


#list .list_link{margin:3.4vw auto 8vw;width:60%;}
#list .list_link li:first-child{margin:0 0 2vw;}

footer nav{width:90.9333%;margin:4vw auto 5.8vw;}
footer nav li{float:none !important;width:100% !important;}
footer nav li.bnr_01{margin-bottom:3vw;}
footer nav li.bnr_02{margin-bottom:3vw;}
footer nav li.bnr_03{}
footer nav li img{width:100%;height:auto;}
}
@media screen and (min-width: 1000px) {
.only_pc { display: block; }
.no_pc { display: none; }

}
/*********************************************
content:iPad
**********************************************/
@media screen and (max-width: 999px) {
/*----- basic -----*/
body {background-size: 180%;}
/*----- rayout -----*/

}
@media screen and (max-width: 999px) and (min-width: 768px) {
.only_pad { display: block; }
.no_pad { display: none; }
}
@media screen and (min-width: 768px) {
.no_sp { display: none; }
}

/*********************************************
content:smart phone
**********************************************/
@media screen and (max-width: 749px) {
#list .slides .slide:after,
#list .slides .slide:before,
#list .slides .slide .inner:after,
#list .slides .slide .inner:before{content:"";width:8.4vw;height:6.53vw;background-size:cover;}
#list .slides .slide {padding:1.3334vw;}
#list .slides .slide .inner{border-width:0.533vw;}
#list .slides .slide .inner:before{left:-1.8667vw;bottom:-1.8667vw;}
#list .slides .slide .inner:after{right:-1.8667vw;bottom:-1.8667vw;}

#list .list_thumb{width:86%;width : -webkit-calc(86% - 2.667vw) ;width : calc(86% - 2.667vw) ;}
/*#list .list_thumb li,#list .list_thumb li figure{border-width:0.26667vw;}*/
#list .list_thumb li,#list .list_thumb li figure{border-width:2px;}
#copy { line-height:13.3334vw;font-size:2.266vw;text-align: center;background:#fff;color:#333;font-weight:bold; }
}

@media screen and (max-width: 749px) {
.only_sp { display: block; }
.no_sp { display: none; }
}

/*********************************************
content:iphone
**********************************************/
@media screen and (max-width: 479px) {
/*----- basic -----*/
#list .slides .slide .txt{font-size:12px;}
/*#list .list_thumb li,#list .list_thumb li figure{border-width:1px;}*/
#pagetop { right: 5%;width: 16%;}
}
@media screen and (min-width: 480px) {
}
/*********************************************
content:small iphone
**********************************************/
@media screen and (max-width: 374px) {
#list .slides .slide .txt{font-size:11px;}
}


/*********************************************
loading
**********************************************/
#loading-bg, .loader:after { background: #000; }
#loading { position: absolute; left: 50%; top: 50%; margin: -3em 0 0 -3em; }
#loading-bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 10000; }
.loader { font-size: 10px; margin: 0 auto; text-indent: -9999em; width: 6em; height: 6em; border-radius: 50%; background: #fff; background: -moz-linear-gradient(left, #fff 10%, rgba(255,255,255, 0) 42%); background: -webkit-linear-gradient(left, #fff 10%, rgba(255,255,255, 0) 42%); background: -o-linear-gradient(left, #fff 10%, rgba(255,255,255, 0) 42%); background: -ms-linear-gradient(left, #fff 10%, rgba(255,255,255, 0) 42%); background: linear-gradient(to right, #fff 10%, rgba(255,255,255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
.loader:before { width: 50%; height: 50%; background: #fff; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; }
.loader:after { width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
@-webkit-keyframes load3 { 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes load3 { 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}