@charset "UTF-8";
/* CSS Document */

*{box-sizing:border-box}
body{font-family:"Noto Sans JP",sans-serif;font-size:0;color:#fff;line-height:1.4;height:100%;background-color:#000}
a{text-decoration:none;-webkit-transition:.2s ease;transition:.2s ease}
a img{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}
a img:hover{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:0.7}
strong{font-weight:bold}
em{font-style:italic}
h2{position:relative;margin:1em 0 0;padding-left:0.75em;font-family:'ROBOTO',sans-serif;font-weight:900;line-height:1}
h2::before{content:'';position:absolute;top:0;left:0;height:100%;width:0.25em;background-color:#f00}
#page{position:relative}
#main{}
#header{width:100%;text-align:center}
#header img{width:100%;max-width:1600px;margin:auto}
#footer{color:#fff;background-color:#333333}
#footer .bandai{display:flex;align-items:center;width:100%;margin:auto;padding:2em 0}
#footer .bandai div:first-of-type{padding-right:2em}
#footer .bandai img{width:100%}
#footer .copyright{border-top:solid 1px #3c3c3c}
#footer .copyright div{width:100%;margin:auto}
#btnPagetop{display:none;position:fixed;cursor:pointer;z-index:999}
#btnPagetop img{width:100%}
.hidden{visibility:hidden}
.content{margin:auto}
.format,.corse,.search{display:flex;flex-wrap:wrap;font-family:'Roboto',sans-serif;line-height:1}
.format a,.corse a{display:block;text-align:center;color:#fff;border:solid 1px #fff;cursor:pointer}
.format a:hover,.corse a:hover{color:#000;background-color:#fff}
.format a.current,.corse a.current{color:#000;background-color:#fff;cursor:auto;pointer-events:none}
.search .input{display:flex;border:solid 1px #fff}
.search .input input{height:100%;text-align:center;color:#fff;background:none;border:0}
.search button{display:flex;justify-content:center;align-items:flex-end;height:100%;font-family:"Noto Sans Symbols 2",sans-serif;color:#000;background-color:#fff;border:0;cursor:pointer}
.list{display:flex;flex-wrap:wrap}
.list a{display:block}
.list a .photo{overflow:hidden}
.list a .photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.list a .data p{color:#fff}
.list a .data p.cos{margin-top:0;text-align:right;font-family:'Roboto',sans-serif;color:#999}
.nonble{display:flex;flex-wrap:wrap;justify-content:center;font-family:'Roboto',sans-serif;font-weight:700}
.nonble a{display:flex;justify-content:center;align-items:center;width:2em;height:2em;margin:0.5em;line-height:1;color:#fff;cursor:pointer}
.nonble a:hover{color:#000;background-color:#fff}
.nonble a.current{color:#000;background-color:#fff;cursor:auto;pointer-events:none}
.close_btn,.back_btn{position:relative;display:block;margin:3em auto 0;padding:0.5em 5em;color:#fff;font-family:'Roboto',sans-serif;line-height:1;background-color:#000;border:solid 1px #fff;cursor:pointer;transition:.2s ease}
.close_btn::after{content:'×';position:absolute;left:0.75em;top:50%;transform:translateY(-50%)}
.back_btn::after{content:'<';position:absolute;left:0.75em;top:50%;transform:translateY(-50%)}
.close_btn:hover,.back_btn:hover{color:#000;background-color:#fff}
.frame{display:flex;flex-wrap:wrap}
.frame_right{box-sizing:border-box}
.frame_right p{padding:1.5em 0}
.frame_right p.cos{padding-top:0;text-align:right;color:#999}
.frame_right p.cos,.frame_right p.ttl,.frame_right p.bld{border-bottom:solid 1px #999}
.frame_right p.ttl,.frame_right p.bld,.frame_right p.cmt{position:relative}
.frame_right p.ttl::before,.frame_right p.bld::before,.frame_right p.cmt::before{position:absolute;left:0;color:#999}
.frame_right p.ttl::before{content:'Title'}
.frame_right p.bld::before{content:'Builder'}
.frame_right p.cmt::before{content:'Comment'}
.slick,.slick_thum{width:100%}
.slick div{display:flex;align-items:center;width:100%;height:100%}
.slick div img{width:100%;object-position:center}
.slick_thum .slick-slide{position:relative;width:calc((100% - 20px)/5) !important;aspect-ratio:1/1;margin-right:5px;transition:.2s ease}
.slick_thum .slick-slide:last-of-type{margin:0}
.slick_thum .slick-slide.slick-current{opacity:1}
.slick_thum .slick-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.slick_box{position:relative}
.slick+.arrows button{position:absolute;aspect-ratio:1/1;font-family:'Roboto',sans-serif;font-weight:700;line-height:1;background-color:rgba(0,0,0,0.5)}
.slick+.arrows button.slick-next{right:0;}
.slick+.arrows button.slick-prev{left:0;}
.slick+.arrows button::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.slick+.arrows button.slick-next::before{content:'≫'}
.slick+.arrows button.slick-prev::before{content:'≪'}
.slick+.arrows .slick-arrow{z-index:30;}

@media screen and (min-width:900px){
	h2{font-size:60px}
	#footer{font-size:12px}
	#footer .bandai{max-width:1378px}
	#footer .bandai div:first-child{width:76px}
	#footer .copyright div{max-width:1378px;padding:2em 0}
	#btnPagetop{bottom:20px;right:20px;width:120px}
	.pcview{}
	.spview{display:none}
	.content{width:1378px;padding-bottom:100px}
	.menu > div{margin-top:24px;font-size:18px}
	.menu > div:first-of-type{margin-top:56px}
	.format div,.corse div,.search div:first-of-type{text-align:right}
	.format div,.format a,.corse div,.corse a,.search div:first-of-type{padding:14px 0}
	.format div,.corse div,.search div{width:86px}
	.format a,.corse a{width:296px;margin-left:27px}
	.search .input{width:942px;margin-left:27px}
	.search .input input{width:862px;height:100%;font-size:18px}
	.search button{width:80px;font-size:32px;line-height:0.8}
	.list{margin-top:78px}
	.list a{width:450px;margin:0 14px 62px 0}
	.list a:nth-of-type(3n){margin-right:0}
	.list a .photo{width:450px;height:450px}
	.list a .data{padding:10px}
	.list a .data p{margin-top:6px;font-size:14px}
	.nonble a,.close_btn,.back_btn{font-size:18px}
	.arrows{font-size:60px}
	.frame{margin-top:94px}
	.frame_left{width:920px}
	.frame_right{width:458px;padding-left:32px}
	.frame_right p{font-size:18px}
	.frame_right p.cmt{line-height:1.8}
	.frame_right p.ttl,.frame_right p.bld,.frame_right p.cmt{padding-left:75px}
	.frame_right p.ttl::before,.frame_right p.bld::before,.frame_right p.cmt::before{top:32px;font-size:12px}
/*	.slick_thum .slick-slide{opacity:0.7}
	.slick_thum .slick-slide:hover{opacity:1}*/
}
@media screen and (max-width:900px){
	h2{font-size:8vw}
	#footer{font-size:2vw}
	#footer .bandai{padding:2vw}
	#footer .bandai div:first-child{width:12vw;padding-right:3vw}
	#footer .copyright div{padding:2vw}
	#btnPagetop{bottom:0;right:0;width:15vw}
	.pcview{display:none}
	.spview{display:block}
	.content{width:100%;padding:0 3vw 10vw}
	.menu > div{margin-top:5vw;font-size:5vw}
	.format div,.corse div,.search div:first-of-type{text-align:center}
	.format div,.format a,.corse div,.corse a,.search div:first-of-type{padding:3vw 0}
	.format div,.corse div,.search div{width:100%}
	.format a,.corse a{width:100%;margin-top:2vw}
	.search .input{width:100%;margin-top:1vw}
	.search .input input{width:85%;height:100%;font-size:4vw}
	.search button{width:15%;aspect-ratio:1/1;font-size:8vw;line-height:1}
	.list{margin-top:10vw}
	.list a{width:100%;margin:0 0 10vw}
	.list a .photo{width:100%;aspect-ratio:1/1}
	.list a .data{padding:2vw}
	.list a .data p{margin-top:1vw;font-size:3vw}
	.nonble a,.close_btn,.back_btn{font-size:3vw}
	.frame{margin-top:5vw}
	.frame_left{width:100%}
	.frame_right{width:100%}
	.frame_right p{font-size:3vw}
	.frame_right p.cmt{line-height:1.8}
	.frame_right p.ttl,.frame_right p.bld,.frame_right p.cmt{padding-left:20%}
	.frame_right p.ttl::before,.frame_right p.bld::before,.frame_right p.cmt::before{top:4.8vw;font-size:2.5vw}
}