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

/*スクロールバー*/
*::-webkit-scrollbar{width:8px;height:8px;background:none}
*::-webkit-scrollbar-thumb{background-color:#ccc;transition:.2s}

html{height:100%;font-size:62.5%}
body{font-family:"Note Sans JP",sans-serif;font-size:0;color:#ffffff;line-height:1.4;height:100%}
img{width:100%;transition:.2s ease;-webkit-trasition:.2s ease}
strong{font-weight:bold}
em{font-style:italic}
a{text-decoration:none;color:#0092da;transition:.2s ease;-webkit-transition:.2s ease}
a:hover{color:#6ef}
@media screen and (min-width:900px){
a:hover img{opacity:0.7}
}
@media screen and (max-width:900px){
a:active img{transform:scale(0.9)}
}
.clearfix{*zoom:1}
.clearfix:after{content:"";display:block;clear:both}
.pcview{}
.spview{display:none}
.hidden{visibility:hidden}
.center{text-align:center}
.right{text-align:right}
.left{text-align:left}
.justify{text-align:justify}
.bold{font-weight:700}
.crimson{color:#f00}
.blue{color:#06f}
.yellow{color:#fc0}
.orange{color:#f70}
.viridian{color:#096}
.white{color:#fff}
.black{color:#000}
.gbase{color:#01598b}
.bs_blue{color:#00a0e9}
.bg_white{background-color:#fff}
.bg_black{background-color:#000}
.bg_gray{background-color:#ccc}
.bg_darkgray{background-color:#666}
.bg_red{background-color:#c00}
.bg_orange{background-color:#f90}
.bg_gbase{background-color:#01598b}
.back{display:block;width:70%;margin:auto;padding:1rem;text-align:center;font-size:1.8rem;font-weight:700;line-height:1;color:#fff;background-color:#333;border:solid 1px #333;border-radius:99rem}
.back:hover{background-color:#fff;color:#333}

@media screen and (max-width:900px){
.pcview{display:none}
.spview{display:block}
.back{;width:90%;font-size:4vw}
}

/*ヘッダー*/
#header{width:100%;background-color:#000;z-index:9999}
.mission_hover{display:none}

#menu_pc > div:nth-of-type(n+2) img,.spmenu li img{filter:brightness(0) saturate(100%) invert(67%) sepia(14%) saturate(331%) hue-rotate(170deg) brightness(97%) contrast(86%)}
#whats .current_whats30mm img,#story .current_story img,#mecha .current_mecha img,#lineup .current_lineup img,
#mission .pc_mission > img,#mission .mission_sp > img,#mission .current_mission img,#result .pc_mission > img,#result .mission_sp > img,#result .current_mission_result img,
#extra .current_extra img,#special .current_special img,#blog .current_blog img
{filter: brightness(0) saturate(100%) invert(48%) sepia(29%) saturate(5178%) hue-rotate(171deg) brightness(90%) contrast(101%) !important}

@media screen and (min-width:900px){
#header{position:relative;padding:13px 0 34px}
#menu_pc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:1260px;margin:auto}
#menu_pc > div{position:relative;padding:0 24px;background-size:contain;background-position:center;background-repeat:no-repeat}
#menu_pc > div:nth-of-type(n+3)::before{content:'';position:absolute;top:-2px;left:0;width:2px;height:calc(100% + 4px);background-color:#2c3237}
#menu_pc > div:last-of-type::after{content:'';position:absolute;top:-2px;left:100%;width:2px;height:calc(100% + 4px);background-color:#2c3237}
#menu_pc > div img{width:auto;height:31px}
#menu_pc .pc_ttl,#menu_pc .pc_lang{box-sizing:border-box;width:50%;margin-bottom:26px}
#menu_pc .pc_lang{display:flex;justify-content:flex-end;font-size:1.2rem;line-height:1}
#menu_pc .pc_lang span{position:relative;display:inline-block}
#menu_pc .pc_lang span::before{content:"";position:absolute;left:1em;top:.5em;width:2em;height:2em;background-image:url("../img/cmn/menu_lang.png");background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none}
#menu_pc .pc_lang span::after{content:"▼";position:absolute;right:1em;top:1em;font-size:1.2rem;line-height:1;color:#ffffff;pointer-events:none}
#menu_pc .pc_lang select{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;padding:1em 1em 1em 4em;color:#ffffff;background:linear-gradient(0deg,#444444 0,#111111 100%);outline:none;border:0;border-radius:1px}
#menu_pc .pc_lang option{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:#ffffff;background-color:#000000;outline:none;border:0;border-radius:0}
#menu_pc .pc_lang select:not([class]){border:1px solid #000}
#menu_pc .pc_lang option:not([class]){background-color:#000}
#menu_pc .pc_whats30mm{background-image:url("../img/cmn/menu_whats30mm_bg.png")}
#menu_pc .pc_story{background-image:url("../img/cmn/menu_story_bg.png")}
#menu_pc .pc_mechanics{background-image:url("../img/cmn/menu_mechanics_bg.png")}
#menu_pc .pc_mecha{background-image:url("../img/cmn/menu_mecha_bg.png")}
#menu_pc .pc_lineup{background-image:url("../img/cmn/menu_lineup_bg.png")}
#menu_pc .pc_extra{background-image:url("../img/cmn/menu_extra_bg.png")}
#menu_pc .pc_special{background-image:url("../img/cmn/menu_special_bg.png")}
#menu_pc .pc_blog{background-image:url("../img/cmn/menu_blog_bg.png")}
#menu_pc .pc_mission{padding:0 20px 0 10px;background-image:url("../img/cmn/menu_mission_bg.png")}
#menu_pc .current_mission{background-image:url('../img/cmn/menu_mission_now_bg.png')}
#menu_pc .current_mission_result{background-image:url('../img/cmn/menu_mission_result_bg.png')}
.mission_hover{position:absolute;top:100%;left:0;width:100%;padding:0 20px 10px 10px;background-color:#000}
.mission_hover a{display:block;margin-top:10px;background-size:contain;background-position:center;background-repeat:no-repeat}
.mission_arrow{
	position:absolute;right:5px;top:50%;transform:translateY(-50%);display:block;width:10px;height:10px;
	background-image:url("../img/cmn/menu_mission_arw.png");background-size:contain;background-position:center;background-repeat:no-repeat;
	transition:.2s ease;pointer-events:none
}
.pc_mission:hover .mission_arrow{transform-origin:center;transform:translateY(-50%) rotate(90deg)}
#menu_sp{display:none}
}

@media screen and (max-width:900px){
#header{position:sticky;-webkit-position:sticky;left:0;top:0}
#menu_pc{display:none}
#menu_sp{display:flex;justify-content:space-between;align-items:center;width:100%;height:14vw;padding:0 5vw;font-family:'ROBOTO',sans-serif;line-height:1}
#menu_sp > a{display:block;width:60vw}
#menu_sp > a img{width:100%;height:100%;object-fit:contain;object-position:left}
/*ハンバーガー*/
.btn-trigger,.btn-trigger span{display:inline-block;transition:all .5s;box-sizing:border-box}
.btn-trigger{position:relative;width:100%;aspect-ratio:1 / 1;cursor:pointer}
.btn-trigger span{position:absolute;left:10%;width:80%;height:4.76%;background-color:#fff;border-radius:99px}
.btn-trigger span:nth-of-type(1){top:20%}
.btn-trigger span:nth-of-type(2){top:50%;transform:translateY(-50%)}
.btn-trigger span:nth-of-type(3){bottom:20%}
/*クリック時*/
#btn01.active span:nth-of-type(1){
	top:50%;
	-webkit-transform:translateY(-50%) rotate(-45deg);
	transform:translateY(-50%) rotate(-45deg)
}
#btn01.active span:nth-of-type(2){opacity:0}
#btn01.active span:nth-of-type(3){
	top:50%;
	-webkit-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg)
}
#splang{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:block;width:10vw;height:10vw;background-color:#000;background-image:url("../img/cmn/menu_lang.png");background-size:75%;background-position:center;background-repeat:no-repeat;border:none;border-radius:0}
#splang option{font-size:3vw}
.menu-btn{width:10vw}
.menu-btn p{text-align:center;font-size:2vw;font-weight:900;transform:scaleX(1.8)}
.spmenu{position:absolute;display:none;left:0;top:100%;width:100%;background-color:#000}
.spmenu li{width:100%;padding:3vw 20vw;background-size:calc(100% - 40vw);background-position:center;background-repeat:no-repeat;border-top:solid 1px #98a6b5}
.spmenu li img{width:auto;margin:auto}
.spmenu .sp_what{background-image:url('../img/cmn/menu_whats30mm_sp_bg.png')}
.spmenu .sp_story{background-image:url('../img/cmn/menu_story_sp_bg.png')}
.spmenu .sp_mecha{background-image:url('../img/cmn/menu_mecha_sp_bg.png')}
.spmenu .sp_lineup{background-image:url('../img/cmn/menu_lineup_sp_bg.png')}
.spmenu .mission_sp{background-image:url('../img/cmn/menu_mission_sp_bg.png')}
.spmenu .current_mission{background-image:url('../img/cmn/menu_mission_sp_now_bg.png')}
.spmenu .current_mission_result{background-image:url('../img/cmn/menu_mission_sp_result_bg.png')}
.spmenu .sp_extra{background-image:url('../img/cmn/menu_extra_sp_bg.png')}
.spmenu .sp_special{background-image:url('../img/cmn/menu_special_sp_bg.png')}
.spmenu .sp_blog{background-image:url('../img/cmn/menu_blog_sp_bg.png')}
.shade{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0);transition:.5s ease;pointer-events:none;z-index:-1}
.shade.active{background-color:rgba(0,0,0,1);pointer-events:auto}
.mission_sp{position:relative;background-position:center 3vw !important}
.mission_sp span{position:absolute;right:10vw;top:5vw;transform-origin:center;transform:rotate(90deg);width:18px;height:26px;background-image:url('../img/cmn/menu_mission_arw.png');transition:.2s ease}
.mission_sp span.active{transform:rotate(-90deg)}
.mission_hover a{display:block;margin-top:3vw;background-size:contain;background-position:center;background-repeat:no-repeat}
.spmenu li.spmenu_close{text-align:center;font-size:5vw;font-weight:900;background-color:#98a6b5;cursor:pointer}
.spmenu li.spmenu_close img{filter:none}
}

/*LINK*/
.link > div{display:flex}
.link p{display:flex;flex-wrap:wrap;align-content:space-around;width:70%}
.link p img{width:80%}
@media screen and (min-width:900px){
.link{display:flex;width:1260px;margin:auto}
.link > div{width:19%}
.link > div:first-of-type div{width:22%}
.link > div:nth-of-type(2) div{width:25%}
.link > div:nth-of-type(3) div{width:30%}
.link > div:nth-of-type(4) div{width:25%}
    .link > div:nth-of-type(5) div{width:25%}
.link > div:last-of-type div{width:100%}
.link > div:last-of-type{align-items:center}
.link p{padding:5px 0 5px 10px}
}
@media screen and (max-width:900px){
.link > div{width:80vw;margin:0 10vw;padding:4vw 0}
.link > div:last-of-type{border:none}
.link > div:last-of-type div{width:100%;height:auto}
.link > div div{display:flex;justify-content:center;align-items:center;width:20vw;height:20vw}
.link > div:first-of-type div img{width:16vw}
.link > div:nth-of-type(2) div img{width:17vw}
.link > div:nth-of-type(4) div img{width:18vw}
    .link > div:nth-of-type(5) div{width:25%}
.link p{width:60vw;padding:2vw 0 2vw 5vw}
}

/*フッター*/
#footer{padding:1rem 0}
#footer.active{filter:brightness(10%);pointer-events:none}
#footer .copyright{width:100%;max-width:1260px;margin:auto;text-align:center;font-size:1rem}
#footer .copyright div{display:none;width:100%;padding-top:2em;box-sizing:border-box}
#footer #copyright{display:block;margin:auto;padding:2em;background:none;border:0}
#footer #copyright::before{content:'显示版权信息 ▼'}
#footer #copyright.active::before{content:'隐藏版权信息 ▲'}
@media screen and (min-width:900px){
	#footer{}
}
@media screen and (max-width:900px){
	#footer{}
}

/*背景*/
#main{position:relative;width:100%;background-color:#000;background-image:url("../img/cmn/bg.png");background-size:contain;background-position:center top;background-attachment:fixed;overflow:hidden}
#main.active{filter:brightness(10%);pointer-events:none}
@media screen and (max-width:900px){
#main{background-image:url("../img/cmn/sp_bg.png")}
}
.content{position:relative;width:100%;max-width:1260px;margin:auto}
.snsBlock{display:flex;justify-content:center;width:100%}
.snsBlock > div{width:fit-content}
@media screen and (min-width:900px){
	.snsBlock{margin-top:100px}
	#about .snsBlock{margin-top:0}
}
@media screen and (max-width:900px){
	.content{max-width:auto}
	.snsBlock{margin-top:10vw}
	#about .snsBlock{margin-top:0}
}

/*PAGE TOP*/
#btnPagetop{display:none;position:fixed;z-index:9999;cursor:pointer}
@media screen and (min-width:900px){
	#btnPagetop{width:77px;bottom:0;left:calc(50% + 650px)}
}
@media screen and (max-width:900px){
	#btnPagetop{width:15vw;bottom:1vw;right:1vw}
}