/*///////// ALL /////////*/

@charset "UTF-8";

/* KV */
#content{background:url("https://www.koeitecmoamerica.com/sw5/images/top/kv-bg.jpg") no-repeat center top; background-size: 100%;}

section a img{transition:all 0.5s;display:block;}
section a:hover img{ filter: brightness(120%);transform:scale(1.04);}

section p{font-family: 'Noto Serif JP', serif;}

section#kv{height: 145vw; position: relative; overflow: hidden; background:url("https://www.koeitecmoamerica.com/sw5/images/top/kv-chara.png") no-repeat center top; background-size: 120%;}
section#kv h1{text-align: center; position:absolute; top:0;  left: 50%; margin-left: calc(-517/1920*100vw); z-index: 2; width: calc(1034/1920*100vw);}
section#kv h3{text-align: center; position:absolute; top:calc(430/1920*100vw);  left: 50%; margin-left: calc(-390/1920*100vw); z-index: 2; width: calc(785/1920*100vw);}
section#kv .txt01 { position:absolute; top: 95vw; left: 50%; margin-left: calc(-957/1920*100vw); width: calc(1915/1920*100vw);  } /*section#kv .txt01 { position:absolute; top: 24vw; left: calc(20/1920*100vw); width: calc(176/1920*100vw);  }*/

section#kv ul.movie{ position:absolute; top: 70vw; right:0; z-index:10;} /*section#kv ul.movie{ position:absolute; top: calc(1270/1920*100vw); right:0; z-index:10;}*/
section#kv ul.movie li{width:calc(438/1920*100vw); margin-top: calc(20/1920*100vw);}
section#kv ul.movie li img{transform-origin: center right;}

section#kv .banner{ position:absolute; top: calc(1500/1920*100vw); right:calc(-50/1920*100vw); z-index:10; width:calc(666/1920*100vw); }
section#kv .banner img{transform-origin: center right;}

/* topic */

section#topics{z-index:10;margin-top:calc(-700/1920*100vw);}
section#topics .topics-inner {margin:0 auto 0;width:90vw;}
section#topics .swiper-slide{overflow:hidden;}
section#topics ul{margin:0 auto 0;}
section#topics ul a{color:#a69a19;}
section#topics ul li{width:calc(462/1920*100vw); background: rgba(0,0,0,0.9); border:1px solid #b20407; position: relative; position: relative;height:auto;}
section#topics ul li img{display:block;z-index:5;position:relative;}
section#topics ul li p{color: #fff; font-size:calc(24/1920*100vw); line-height:calc(40/1920*100vw);padding:calc(30/1920*100vw) calc(30/1920*100vw) calc(80/1920*100vw);　z-index:10;position:relative;}
section#topics ul li p.date{position:absolute;color: #a69a19; font-size:calc(24/1920*100vw);font-family: 'Lora', serif; text-align: right;width:100%;box-sizing: border-box;bottom:calc(-60/1920*100vw);background: none;}

section#topics .swiper-scrollbar{width:600px;left:50%;bottom:-4vw;transform:translate(-50%, 0);}
section#topics .swiper-scrollbar{background-color:#000;height:calc(8/1920*100vw);border-radius:0;}
section#topics .swiper-scrollbar-drag{background-color:#b20407;border-radius:0;}

section{position:relative;}
section h2{z-index: 10; position: relative;}

section#topics ul li.icon-new:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
	background:url("https://www.koeitecmoamerica.com/sw5/images/new.jpg") no-repeat center top; position: absolute; background-size:calc(83/1920*100vw) calc(28/1920*100vw); width:calc(83/1920*100vw); height:calc(28/1920*100vw);
	margin-left: 0;
}


/* story */

section#story{height:calc(1278/1920*100vw); margin-top:calc(380/1920*100vw);}

section#story .bgtxt{position: absolute; top:calc(-450/1920*100vw); left: calc(-85/1920*100vw); background-size:calc(850/1920*100vw) calc(850/1920*100vw); width:calc(850/1920*100vw); height:calc(850/1920*100vw);}
section#story .bg{position: absolute; top:calc(20/1920*100vw); left: 0; background-size:calc(1920/1920*100vw) calc(1333/1920*100vw); width:calc(1920/1920*100vw); height:calc(1333/1920*100vw);}

section#story h2{width:calc(563/1920*100vw); padding-left: calc(90/1920*100vw) ; padding-top: calc(0/1920*100vw) ;}
section#story .txt{width:calc(1160/1920*100vw); position: absolute; right: 0; z-index: 10; top: calc(600/1920*100vw);}
section#story .chara{width:calc(1579/1920*100vw); position: absolute; left: calc(65/1920*100vw); top: calc(-90/1920*100vw); z-index: 10;}
section#story p.btn{width:calc(400/1920*100vw);left:  calc(90/1920*100vw); top: calc(210/1920*100vw); z-index: 20; }

/* system */

section#system{height:calc(1300/1920*100vw); margin-top:calc(360/1920*100vw);}
section#system h2{width:calc(652/1920*100vw); position: absolute; top:calc(0/1920*100vw); right:calc(90/1920*100vw);}
section#system .txt{width:calc(789/1920*100vw); position: absolute; left: 0; z-index: 10; top: calc(450/1920*100vw);}

section#system .bgtxt{position: absolute; top:calc(-430/1920*100vw); left: calc(1193/1920*100vw); background-size:calc(850/1920*100vw) calc(850/1920*100vw); width:calc(850/1920*100vw); height:calc(850/1920*100vw);}

section#system .bg-movie{-webkit-mask: url('https://www.koeitecmoamerica.com/sw5/images/top/system_moviemask.png');mask: url('https://www.koeitecmoamerica.com/sw5/images/top/system_moviemask.png');-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: contain;mask-position: center;-webkit-mask-position: center;}
section#system .bg-movie video{display:block;width:100%;}
section#system p.btn{width:calc(400/1920*100vw);right:  calc(90/1920*100vw); top: calc(210/1920*100vw);}



/* character */

section#character{height:calc(1278/1920*100vw); margin-top:calc(280/1920*100vw);}
/* section#character::before{content: ""; background:url("../images/top/character_bgtxt.png") no-repeat center top; position: absolute; top:calc(-360/1920*100vw); left: calc(-85/1920*100vw); background-size:calc(850/1920*100vw) calc(850/1920*100vw); width:calc(850/1920*100vw); height:calc(850/1920*100vw);}
section#character::after{content: ""; background:url("../images/top/character_bg.png") no-repeat center top; position: absolute; top:calc(-30/1920*100vw); left: 0; background-size:calc(1920/1920*100vw) calc(1443/1920*100vw); width:calc(1920/1920*100vw); height:calc(1443/1920*100vw);} */
section#character .bgtxt{position: absolute; top:calc(-360/1920*100vw); left: calc(-85/1920*100vw); background-size:calc(850/1920*100vw) calc(850/1920*100vw); width:calc(850/1920*100vw); height:calc(850/1920*100vw);}
section#character .bg{position: absolute; top:calc(-30/1920*100vw); left: 0; background-size:calc(1920/1920*100vw) calc(1443/1920*100vw); width:calc(1920/1920*100vw); height:calc(1443/1920*100vw);}

section#character h2{width:calc(937/1920*100vw); padding-left: calc(90/1920*100vw) ; padding-top: 0;}
section#character h2.new:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(-180/1920*100vw);
    left: 0;
    z-index: 11;
	background:url("https://www.koeitecmoamerica.com/sw5/images/new2.png") no-repeat center top; position: absolute; background-size:calc(167/1920*100vw) calc(165/1920*100vw); width:calc(167/1920*100vw); height:calc(165/1920*100vw);
	margin-left: 0;
}
section#character .txt{width:calc(817/1920*100vw); position: absolute; right: 0; z-index: 10; top: calc(650/1920*100vw);}
section#character p.btn{width:calc(475/1920*100vw); left:  calc(90/1920*100vw); top: calc(200/1920*100vw);} /* section#character p.btn{width:calc(400/1920*100vw);left:  calc(90/1920*100vw); top: calc(200/1920*100vw);} */

/* products */

section#products{background:url("https://www.koeitecmoamerica.com/sw5/images/top/products_bg01.png") no-repeat center top; background-size: 100% 100%; padding-bottom:calc(50/1920*100vw); margin-top: calc(230/1920*100vw);}
section#products::before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/products_bg02.png") no-repeat center top; position: absolute; top:0; left:calc(-50/1920*100vw); background-size:calc(1011/1920*100vw) calc(852/1920*100vw); width:calc(1101/1920*100vw); height:calc(852/1920*100vw);}
section#products::after{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/products_bg03.png") no-repeat center top; position: absolute; bottom:calc(-300/1920*100vw); right:0; background-size:calc(1559/1920*100vw) calc(832/1920*100vw); width:calc(1559/1920*100vw); height:calc(832/1920*100vw);}
section#products h2{width:calc(705/1920*100vw); margin:0 auto; padding-top:calc(180/1920*100vw);}
section#products p{text-align: center; color: #fff; z-index: 10; position: relative; }
section#products p.notice{ font-size:calc(24/1920*100vw);}
section#products p.banner{width:calc(1454/1920*100vw); margin:0 auto; padding:calc(20/1920*100vw) 0 calc(20/1920*100vw) ;}
section#products p.btn{width:calc(500/1920*100vw); margin:calc(60/1920*100vw) auto calc(60/1920*100vw); }
section#products dl{display: flex; width:calc(900/1920*100vw);flex-wrap: wrap; font-size:calc(30/1920*100vw); margin: calc(70/1920*100vw) auto 0; padding-left: calc(225/1920*100vw);}
section#products dl dt{width:calc(231/1920*100vw); color: #fff; text-align: center; font-family: 'Lora', serif; margin-bottom:calc(50/1920*100vw);}
section#products dl dt p{ background: #000;}
section#products dl dd{color: #fff;font-family: 'Noto Serif JP', serif; width:calc(600/1920*100vw); padding-left:calc(40/1920*100vw);margin-bottom:calc(40/1920*100vw);line-height:calc(50/1920*100vw); }





/*----------------SP--------------*/

@media screen and (max-width:768px){

#content{background:url("https://www.koeitecmoamerica.com/sw5/images/top/kv-sp.png") no-repeat center top; background-size: 100%;}
section#kv{height: 197vw; background: none;} /* section#kv{height: 200vw;} */
section#kv h1{width:calc(550/768*100vw); margin-left: calc(-270/768*100vw); top: calc(20/768*100vw); left: 50%;}

section#kv h3{top:calc(240/768*100vw);  left: 50%; margin-left: calc(-230/768*100vw); z-index: 2; width: calc(460/768*100vw);}
section#kv .txt01 { position:absolute; top: 117vw; left: 50%; margin-left: calc(-375/768*100vw); width: calc(750/768*100vw);  } /*section#kv .txt01 { position:absolute; top: 37vw; left: calc(20/768*100vw); width: calc(100/768*100vw);  }*/

section#kv ul.movie{ position:absolute; top: 160vw; left:calc(160/768*100vw); z-index:10; display: flex;} /*section#kv ul.movie{ position:absolute; top: calc(1370/768*100vw); right:calc(50/768*100vw); z-index:10; display: flex;}*/
section#kv ul.movie li{width:calc(430/768*100vw); margin:calc(10/768*100vw);}

section#kv .banner{ position:absolute; top: calc(1290/768*100vw); right:auto; left:50%; margin:calc(-310/768*100vw); z-index:10; width:calc(620/768*100vw); }
section#kv .banner img{transition: opacity 0.3s ease-out;}

/* section#topics{z-index:10;}
section#topics ul{margin:0 calc(40/768*100vw); flex-wrap: wrap;}
section#topics ul li{width:calc(440/768*100vw); height:calc(480/768*100vw);  background: rgba(0,0,0,0.9); border:1px solid #b20407; padding:calc(30/768*100vw); position: relative; margin:calc(20/768*100vw); position: relative;}
section#topics ul li img{position: absolute; top:0; left: 0; }
section#topics ul li p{position: absolute; top:calc(318/768*100vw); color: #fff; font-size:calc(24/768*100vw); line-height:calc(40/768*100vw);width:calc(360/768*100vw);}
section#topics ul li p.date{color: #a69a19; font-size:calc(22/768*100vw); position: absolute; top:calc(480/768*100vw); right:calc(30/768*100vw);font-family: 'Lora', serif; text-align: right;} */

/* topic */

section#topics{margin-top:-14vw;}
section#topics .topics-inner {width:70vw;}
section#topics ul{margin:0 auto 0;}
section#topics ul li{width:calc(462/1920*100vw); background: rgba(0,0,0,0.9); border:1px solid #b20407; position: relative; position: relative;height:auto;}
section#topics ul li img{display:block;}
section#topics ul li p{color: #fff; font-size:3.5vw; line-height:1.8;padding:4vw 4vw 8vw}
section#topics ul li p.date{font-size:3vw;bottom:2vw;padding:0 4vw;}

section#topics .swiper-scrollbar{width:80%;left:50%;bottom:-12vw;transform:translate(-50%, 0);}
section#topics .swiper-scrollbar{background-color:#000;height:3vw;border-radius:0;}
section#topics .swiper-scrollbar-drag{background-color:#b20407;border-radius:0;}

section{position:relative;}
section h2{z-index: 10; position: relative;}

	
section#topics ul li.icon-new:before {
    background-size:calc(83/768*100vw) calc(28/768*100vw); width:calc(83/768*100vw); height:calc(28/768*100vw);
}


/* story */

section#story{height:calc(1000/768*100vw); margin-top:calc(300/768*100vw);}
/* section#story::before{ top:calc(-300/768*100vw); left: auto; right: calc(-10/768*100vw); background-size:calc(450/768*100vw) calc(450/768*100vw); width:calc(450/768*100vw); height:calc(450/768*100vw);}
section#story::after{content: ""; background:url("../images/top/story_bg-sp.png") no-repeat center top; position: absolute; top:calc(50/768*100vw); left: 0; background-size:calc(768/768*100vw) calc(947/768*100vw); width:calc(768/768*100vw); height:calc(947/768*100vw);} */
section#story .bgtxt{top:calc(-300/768*100vw); left: auto; right: calc(-10/768*100vw); background-size:calc(450/768*100vw) calc(450/768*100vw); width:calc(450/768*100vw); height:calc(450/768*100vw);}
section#story .bg{width:100%;height:auto;top:calc(130/768*100vw);}

section#story h2{width:calc(400/768*100vw); padding-left: calc(90/1920*100vw) ; padding-top: 0;}
section#story .txt{width:calc(840/768*100vw); position: absolute; right: 0; z-index: 10; top: calc(690/768*100vw);} /* section#story .txt{width:calc(553/768*100vw); position: absolute; right: 0; z-index: 10; top: calc(630/768*100vw);} */
section#story .chara{width:calc(768/768*100vw); position: absolute; left: auto; right: 0; top: calc(-10/768*100vw); z-index: 10;}
section#story img.story-txt {width: calc(840/768*100vw);}
section#story p.btn{width:calc(270/768*100vw); font-size:calc(34/768*100vw); left:  calc(90/1920*100vw); top: calc(100/768*100vw);}

/* system */

section#system{height:calc(1000/768*100vw); margin-top:calc(380/768*100vw);}
section#system .bgtxt{top:calc(-300/768*100vw); right:auto; left:calc(-80/768*100vw); background-size:calc(450/768*100vw) calc(450/768*100vw); width:calc(450/768*100vw); height:calc(450/768*100vw);z-index:0;}
section#system .bg-wrap{position:relative;z-index:1;}
section#system .bg{width:100%;height:auto;}
section#system h2{width:calc(450/768*100vw); position: absolute; top:calc(-100/768*100vw); right:calc(90/1920*100vw);}
section#system .txt{width:calc(620/768*100vw); position: absolute; left: 0; z-index: 10; top: calc(520/768*100vw);}
section#system .bg-movie{-webkit-mask: url('https://www.koeitecmoamerica.com/sw5/images/top/system_moviemask-sp.png');mask: url('https://www.koeitecmoamerica.com/sw5/images/top/system_moviemask-sp.png');-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-size: contain;mask-position: center;-webkit-mask-position: center;}
section#system .bg-movie video{display:block;width:100%;}
section#system p.btn{width:calc(270/768*100vw); font-size:calc(34/768*100vw); right:  calc(90/1920*100vw); top: calc(0/768*100vw);}


/* character */

section#character{height:calc(1100/768*100vw); margin-top:calc(200/1920*100vw);}
section#character .bgtxt{top:calc(-150/768*100vw); left:auto; right:calc(-40/768*100vw); background-size:calc(450/768*100vw) calc(450/768*100vw); width:calc(450/768*100vw); height:calc(450/768*100vw);}
section#character .bg{width:100%;height:auto;top:calc(170/768*100vw); }
section#character h2{width:calc(600/768*100vw); padding-left: calc(90/1920*100vw) ; padding-top: 0;}
section#character h2.new:before {
    top: calc(-180/768*100vw);
	background:url("https://www.koeitecmoamerica.com/sw5/images/new2.png") no-repeat center top; position: absolute; background-size:calc(150/768*100vw) calc(150/768*100vw); width:calc(150/768*100vw); height:calc(150/768*100vw);
	margin-left: 0;
}	
section#character .txt{width:calc(650/768*100vw); position: absolute; right: 0; z-index: 10; top: calc(650/768*100vw);}
section#character p.btn{width:calc(400/768*100vw); font-size:calc(34/768*100vw); left:  calc(90/1920*100vw); top: calc(90/768*100vw);} /* section#character p.btn{width:calc(340/768*100vw);left:  calc(90/1920*100vw); top: calc(120/768*100vw);} */

/* products */

section#products{background:url("https://www.koeitecmoamerica.com/sw5/images/top/products_bg01.png") no-repeat center top; background-size: 100% 100%; padding-bottom:calc(50/1920*100vw); margin-top: calc(230/1920*100vw);}
section#products h2{width:calc(400/768*100vw); margin:0 auto; padding-top:calc(130/768*100vw);}
section#products p{text-align: center; color: #fff; z-index: 10; position: relative; }
section#products p.notice{width:calc(620/768*100vw); margin:0 auto; font-size:calc(24/768*100vw);}
section#products p.banner{width:calc(620/768*100vw); margin:calc(20/768*100vw) auto; padding:calc(20/1920*100vw) 0 calc(20/1920*100vw) ;}
section#products p.btn{width:calc(340/768*100vw); margin:calc(50/768*100vw) auto calc(60/768*100vw);  font-size:calc(40/768*100vw);}
section#products dl{width:calc(620/768*100vw);flex-wrap: wrap; font-size:calc(30/768*100vw); margin: calc(70/768*100vw) auto 0; padding-left: 0;}
section#products dl dt{width:calc(200/768*100vw);  margin-bottom:calc(50/768*100vw);}
section#products dl dt p{ background: #000;}
section#products dl dd{color: #fff;font-family: 'Noto Serif JP', serif; width:calc(400/768*100vw); padding-left:calc(40/1920*100vw);margin-bottom:calc(40/1920*100vw);line-height:calc(50/768*100vw); }
section#products p.notice{ font-size:calc(20/768*100vw);}


.twitter{background:url("https://www.koeitecmoamerica.com/sw5/images/bg.jpg") no-repeat center ; display: flex; padding: calc(50/1920*100vw) calc(100/1920*100vw); justify-content: center; align-items: center;}
#notice p.txt04{width: calc(633/1920*100vw); padding-right: 0;}
#notice p.btn03{width: calc(827/1920*100vw);}
#notice p.btn03 img{transition: opacity 0.3s ease-out;}

}



/* 1400以上の時 */

@media screen and (min-width:1400px){
	
/* KV */
section#kv h1{width:753px; margin-left:-376px;}
section#kv h3{width:572px; top: 300px; margin-left:-286px;}
section#kv .txt01{width:1300px; top:1060px; margin-left:-650px;}
section#kv{height:1920px; background-size: 1600px;}
section#kv ul.movie li{width:319px; margin-top: 20px;}
section#kv .banner{width:536px; top:812px; right: -30px;}
section#kv ul.movie{top:680px;}
section#topics{margin-top:-660px;}	
.menu-button{width:112px;}
.language{width:157px;font-size:16px;line-height:40px;}	
.language img{width:21px;	margin-right:15px;}
.language ul.menu_second-level{top:30px;}
	
}


/* 1700以上の時 */

@media screen and (min-width:1900px){
section#kv{background:url("https://www.koeitecmoamerica.com/sw5/images/top/kv-chara2.png") no-repeat center top; background-size: 1920px;}
}