@charset "utf-8";
/* ==================================================================
CSS information
style info : PAGE
================================================================== */


/* ----------------------------------------------------------------------------------------------------------------
COMMON
---------------------------------------------------------------------------------------------------------------- */

.-baseControl { background: rgba(255,0,0,0.0); }
.-baseControl { display: block; width: 100vw; height: 100%; top: 0; margin-top: 0; }
.swiper-button-prev.-baseControl { left: inherit; right: 50%; margin-right: calc(275/550*100%); }
.swiper-button-next.-baseControl { left: 50%; right: 0; margin-left: calc(275/550*100%); }
.-baseControl::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
.swiper-button-prev.-baseControl::after { background: url("../img/btn_prev.png") top calc(254/750*100vw) right calc(40/750*100vw) no-repeat; background-size: calc(34/750*100vw); }
.swiper-button-next.-baseControl::after { background: url("../img/btn_next.png") top calc(254/750*100vw) left calc(40/750*100vw) no-repeat; background-size: calc(34/750*100vw); }
.swiper-button-disabled.-baseControl { opacity: 0.5; }

@media screen and (min-width: 641px) {
	.-baseControl {}
	.swiper-button-prev.-baseControl {}
	.swiper-button-next.-baseControl {}
	.-baseControl::after { transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transform-origin: center center; }
	.swiper-button-prev.-baseControl::after { background-position: center right calc(35/1920*100%); background-size: calc(22/1920*100%); }
	.swiper-button-next.-baseControl::after { background-position: center left calc(35/1920*100%); background-size: calc(22/1920*100%); }
	.-baseControl:hover::after { background-size: calc(32/1920*100%); }
}




/* ----------------------------------------------------------------------------------------------------------------
#toppage
---------------------------------------------------------------------------------------------------------------- */
#toppage { background: #fff; }
@media screen and (min-width: 641px) {
}
@media screen and (min-width: 1921px) {
}


/* .secHero
---------------------------------------------------------------------------------------------------------------- */
#toppage .secHero { background: #df839f; }
#toppage .secHero__visual { position: relative; }

#toppage .secHero__logo { width: calc(571/750*100%); position: absolute; top: 0; left: 50%; margin-top: calc(417/750*100%); margin-left: calc(-285/750*100%); transform-origin: center center; z-index: 3; }

#toppage .secHero__monan { width: calc(458/750*100%); position: absolute; top: 0; right: 0; margin-top: calc(150/750*100%); margin-right: calc(123/750*100%); z-index: 2; }
#toppage .secHero__monan__image {}
#toppage .secHero__monan__text { width: calc(287/458*100%); position: absolute; top: 0; left: 0; margin-top: calc(34/458*100%); margin-left: calc(278/458*100%); transform-origin: left bottom; }

@media screen and (min-width: 641px) {
	#toppage .secHero { overflow: hidden; }
	#toppage .secHero img { max-width: none; width: 100%; }
	#toppage .secHero__visual {}
	
	#toppage .secHero__logo { width: calc(571/1920*100%); left: 50%; margin-top: calc(152/1920*100%); margin-left: calc(-799/1920*100%); }
	
	#toppage .secHero__monan { width: calc(653/1920*100%); margin-top: calc(137/1920*100%); margin-right: calc(230/1920*100%); }
	#toppage .secHero__monan__image {}
	#toppage .secHero__monan__text { width: calc(286/653*100%); margin-top: calc(41/653*100%); margin-left: calc(450/653*100%); }
}
@media screen and (min-width: 1921px) {
}



/* .secMovie
---------------------------------------------------------------------------------------------------------------- */
#toppage .secMovie { padding: calc(60/750*100%) 0 calc(100/750*100%); background: #df839f; }

#toppage .secMovie__heading { width: calc(650/750*100%); margin: 0 auto; }

#toppage .secMovie__btnOrder { width: 100%; margin-top: calc(50/750*100%); display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; }
#toppage .secMovie__btnOrder li { margin: 0 calc(27/750*100%); position: relative; padding-bottom: calc(20/750*100%); }
#toppage .secMovie__btnOrder li::before { content: ""; display: block; position: absolute; }
#toppage .secMovie__btnOrder li::before { background-color: #d14462; width: calc(100% + 14px); height: 4px; left: -7px; bottom: 0; border-radius: 4px; }
#toppage .secMovie__btnOrder li[data-order="n"] { width: calc(92/750*100%); }
#toppage .secMovie__btnOrder li[data-order="f"] { width: calc(120/750*100%); }
#toppage .secMovie__btnOrder li.active::before { background-color: #c20f35; }
#toppage .secMovie__btnOrder li.active img { filter: brightness(20%); }

#toppage .secMovie__wrap { margin: calc(50/750*100%) auto 0; }
#toppage .secMovie__listWrap { width: calc(550/750*100%); overflow: visible; }
#toppage .secMv__item .item__btn { display: block; outline: none; }
#toppage .secMv__item .item__thumb { position: relative ;}
#toppage .secMv__item .item__thumb.iconNew::after { content: ""; display: block; position: absolute; top: 0; left: calc(-35/550*100%); margin-top: calc(-28/550*100%); 
	width: calc(231/550*100%); height: 0; padding-top: calc(229/550*100%); background: url(../../_img/movie/icon_new.png) center no-repeat; background-size: contain; }
#toppage .secMv__item .item__ttl { margin-top: calc(20/550*100%); }
#toppage .secMv__item .item__text { margin-top: calc(10/550*100%); font-size: calc(24/750*100vw); font-weight: bold; line-height: 1.61; color: #202020; font-feature-settings: normal; }
#toppage .secMv__item .item__text a { color: #fcff00; text-decoration: none; }

#toppage .secMv__item .item__cvhl { background: #d14462; color: #fff; padding: 0.4em 1em; margin-top: 1em; font-size: calc(22/750*100vw); font-weight: bold; line-height: 1; border-radius: 100px; }
#toppage .secMv__item .item__cvtext { margin-top: 0.3em; font-size: calc(22/750*100vw); line-height: 1.61; color: #202020; }

#toppage .secMv__item:not(.swiper-slide-visible){ opacity: 0.5; }
#toppage .secMv__item:not(.swiper-slide-visible) a { pointer-events: none; }

@media screen and (min-width: 641px) {
	#toppage .secMovie { padding: calc(50/1920*100%) 0 calc(100/1920*100%); }
	
	#toppage .secMovie__heading { width: calc(650/1920*100%); }

	#toppage .secMovie__btnOrder { margin-top: calc(40/1920*100%); }
	#toppage .secMovie__btnOrder li { margin: 0 calc(25/1920*100%); padding-bottom: calc(10/1920*100%); }
	#toppage .secMovie__btnOrder li::before { width: calc(100% + 4px); left: -2px; }
	#toppage .secMovie__btnOrder li[data-order="n"] { width: calc(64/1920*100%); }
	#toppage .secMovie__btnOrder li[data-order="f"] { width: calc(82/1920*100%); }
	
	#toppage .secMovie__btnOrder li { transition: transform 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s; }
	#toppage .secMovie__btnOrder li:not(.active) { cursor: pointer; }
	#toppage .secMovie__btnOrder li:not(.active):hover { transform: scale(1.1); }
	#toppage .secMovie__btnOrder li:not(.active):hover::before { background-color: #c20f35; }
	
	#toppage .secMovie__wrap { margin: calc(20/1920*100%) auto 0; }
	#toppage .secMovie__listWrap { width: calc(1720/1920*100%); }
	#toppage .secMv__item .item__thumb.iconNew::after { left: calc(-23/320*100%); margin-top: calc(-18/320*100%); width: calc(154/320*100%); height: 0; padding-top: calc(153/320*100%); }
	#toppage .secMv__item .item__ttl { margin-top: calc(20/320*100%); }
	#toppage .secMv__item .item__text { margin-top: calc(10/320*100%); font-size: calc(16/1920*100vw); letter-spacing: -0.02em; }
	#toppage .secMv__item .item__text a:hover { text-decoration: underline; }
	
	#toppage .secMv__item .item__cvhl { padding: 0.4em 1em 0.2em; font-size: calc(15/1920*100vw); }
	#toppage .secMv__item .item__cvtext { margin-top: 0.3em; font-size: calc(15/1920*100vw); }
	
	#toppage .secMv__item { transition: opacity 0.2s ease 0s; -webkit-transition: opacity 0.2s ease 0s; }
	
	#toppage .secMv__item .item__thumb { transition: transform 0.2s ease 0s, filter 0.2s ease 0s; -webkit-transition: transform 0.2s ease 0s, filter 0.2s ease 0s; transform-origin: center bottom; }
	#toppage .secMv__item .item__btn:hover .item__thumb { transform: scale(1.05); filter: brightness(110%); }
}
@media screen and (min-width: 1921px) {
	#toppage .secMovie { padding: 60px 0 100px; }
	#toppage .secMovie__heading { width: 650px; }
	#toppage .secMovie__btnOrder { margin-top: 40px; }
	#toppage .secMovie__btnOrder li { margin: 0 25px; padding-bottom: 10px; }
	#toppage .secMovie__btnOrder li[data-order="n"] { width: 64px; }
	#toppage .secMovie__btnOrder li[data-order="f"] { width: 82px; }
	
	#toppage .secMovie__wrap { margin: 20px auto 0; }
	#toppage .secMovie__listWrap { width: 1720px; }
	#toppage .secMv__item .item__text { font-size: 1.6rem; }
	#toppage .secMv__item .item__cvhl { font-size: 1.5rem; }
	#toppage .secMv__item .item__cvtext { font-size: 1.5rem; }
}


/* .secMonster
---------------------------------------------------------------------------------------------------------------- */
#toppage .secMonster { background: #a71826; overflow: hidden; }

#toppage .secMonster .videoArea { width: 100%; }
#toppage .secMonster .viA__player { position: relative; top: 0; left: 0; width: 100%; height: auto; opacity: 1; display: block; }

#toppage .secMons__list { width: 100%; padding: calc(5/750*100%) 0 calc(15/750*100%); display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; }
#toppage .secMons__list__item { width: calc(330/750*100%); height: 0; padding-top: calc(94/750*100%); margin: 0 calc(15/750*100%); text-indent: 101%; white-space: nowrap; overflow: hidden; 
	background-position: center; background-repeat: no-repeat; background-size: contain; }
#toppage .secMons__list__item.-mons1 { order: 1; background-image: url(../../_img/monster/mos1.png); }
#toppage .secMons__list__item.-mons2 { order: 3; background-image: url(../../_img/monster/mos2.png); margin-top: calc(10/750*100%); }
#toppage .secMons__list__item.-mons3 { order: 2; background-image: url(../../_img/monster/mos3.png); }
#toppage .secMons__list__item.-mons4 { order: 4; background-image: url(../../_img/monster/mos4.png); margin-top: calc(10/750*100%); }
#toppage .secMons__list__item.-mons5 { order: 5; background-image: url(../../_img/monster/mos5.png); margin-top: calc(10/750*100%); }
#toppage .secMons__list__item.-mons6 { order: 6; background-image: url(../../_img/monster/mos6.png); margin-top: calc(10/750*100%); }
#toppage .secMons__list__item.-mons7 { order: 7; background-image: url(../../_img/monster/mos7.png); margin-top: calc(10/750*100%); }

@media screen and (min-width: 641px) {
	#toppage .secMons__list { padding: 0 0 calc(10/1920*100%); }
	#toppage .secMons__list__item { width: calc(330/1920*100%); padding-top: calc(94/1920*100%); margin: 0 calc(10/1920*100%); }
	#toppage .secMons__list__item.-mons1 { order: 2; }
	#toppage .secMons__list__item.-mons2 { order: 1; margin-top: 0; margin-left: calc(300/1920*100%); }
	#toppage .secMons__list__item.-mons3 { order: 3; margin-right: calc(300/1920*100%); }
	#toppage .secMons__list__item.-mons4 { order: 4; margin-top: calc(10/1920*100%); }
	#toppage .secMons__list__item.-mons5 { order: 5; margin-top: calc(10/1920*100%); }
	#toppage .secMons__list__item.-mons6 { order: 6; margin-top: calc(10/1920*100%); }
	#toppage .secMons__list__item.-mons7 { order: 7; margin-top: calc(10/1920*100%); }
}
@media screen and (min-width: 1921px) {
	#toppage .secMons__list { padding: 0 0 10px; max-width: 1920px; margin-left: auto; margin-right: auto; }
	#toppage .secMons__list__item { width: 330px; padding-top: 94px; margin: 0 10px; }
}