/*ベースCSS（スマホ向け） */
body { margin: 0; padding: 0; background-color: #ffe900;
	font-family: 'Noto Sans KR' , sans-serif;}
img { width: 100%; margin: 0;}

.pc { display: none;}
.sp { display: block;}

.clearfix::after { content: ""; display: block; clear: both;}

/*loding*/
.result {
    opacity: 0;
	overflow: hidden;
}
.loading {
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	/* 左右中央寄せ */
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

	/* 上下中央寄せ */
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	padding:0px;
	box-sizing: border-box;

	width: 100vw;
	height: auto;
	min-height: 100vh;  

	background-size: cover;
	background-position: center;
}

/*fadeInアニメーション*/
.fadeInAni { animation: 1s fadeIn forwards;}

@keyframes fadeInAni { /*animetion-nameで設定した値を書く*/
  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}




/* header*/
header { position: relative; width: 100%;}
header .nintendo {
	display: block;
	position: absolute;
	float: left;
	left: 0;
	top: 0;
	width: 50px;
	height: auto;
	z-index: 3;
}

header .pocketlogo {
	display: block;
	position: absolute;
	float: right;
	right: 5px;
	top: 15px;
	width: 120px;
	height: auto;
	z-index: 3;
}

/* section*/

#fixedover {/* 背景動画の上にコンテンツをのせる*/
	position: absolute;
	z-index: 1;
	top:0;
	opacity: 0;
	animation-delay: 1.5s;
}

section#movbg {/* 背景動画固定*/
	display: block;
	position: fixed;
	top: 0;
	
	width: 100%;
	height: 100vh;
    background-size: cover;
    text-align: center;
    overflow: hidden;
	
	z-index: -1;
	opacity: 0;
	animation-delay: 1.5s;
}

section#movbg video {
    margin: 0 auto;
    width: 100%;
}

section#main {
	position: relative;
	width: 100%;
	height: 130vh;/* movbgとあわせる*/
}

section#contents,section#fincLink {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 0 5px 0;
	text-align: center;
}





/* main内*/

section#main .copy {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 38%;
	width: 65%;
}

section#main h1 {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 21%;
	width: 80%;
}

section#main .trial {
	display: block;
	position: absolute;
	left: 0;
	right: 3%;
	margin: auto;
	top: 40%;
	width: 35%;
}

/* topのパッケージ周り*/
.top_package {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 0;
	
	background-image: url(../img/top_packagebg_sp.svg);
	background-size: cover;
	background-position: -1px center;
}

.top_package img {
	width: auto;
	height: auto;
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
	
}

.top_package .top_package_container {
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	
	width: 100%;
	margin-bottom: 30px;
}

/* topのパッケージ周り　パッケージ*/
.top_package .top_package_container .top_package_item01 {
	width: 33%;
	height: auto;
	padding-left: 2%;
}

.top_package .top_package_container .top_package_item01 img {
	width: 100%;
	height: auto;
}

/* topのパッケージ周り　価格*/
.top_package .top_package_container .top_package_item02 {
	width: 62%;
	height: auto;
	align-self: flex-end;
	padding-left: 1%;
	padding-right: 2%;
}

.top_package .top_package_container .top_package_item02 img {
	width: 100%;
	height: auto;
}

/* topのパッケージ周り　リンクボタン*/
.top_package .top_package_container .top_package_item03 {
	width: 96%;
	padding: 2%;
	height: auto;
}

.top_package .top_package_container .top_package_item03 ul,
.top_package .top_package_container .top_package_item03 ul li { margin: 0; padding: 0;}
.top_package .top_package_container .top_package_item03 ul li a { display: block; height: 100%; line-height: 75px; text-decoration: none;}

@media screen and  (min-width: 1280px) {
	.top_package .top_package_container .top_package_item03 ul li a {line-height:146px}
}

/* topのパッケージ周り　リンクボタン　ニンテンドーeショップ*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(1) {
	width: 100%;
	height: 60px;
	float: left;
	text-align: center;

	box-sizing: border-box;
	border-bottom: 1px solid #fff;

	background:url(../img/blankArrow.svg) right top /8% no-repeat, linear-gradient(to bottom right, #ff9d3e, #ff7d00);
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(1) img {
	width: auto;
	height: auto;
	-webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
	filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
}

/* topのパッケージ周り　リンクボタン　amazon　楽天ブックス*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(2),
.top_package .top_package_container .top_package_item03 ul li:nth-child(3) {
	width: 100%;
	height: 60px;
	float: left;
	text-align: center;
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(2) a {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 60px;
	color: #000;
	
	box-sizing: border-box;
	border-right: 1px solid #fff;
	
	background: url(../img/blankArrow.svg) right top /8% no-repeat,linear-gradient(to bottom right, #fbc25f, #f49c04);
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(3) a {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 60px;
	color: #fff;

	background: url(../img/blankArrow.svg) right top /15% no-repeat,linear-gradient(to bottom right, #cc2e2e, #bf0000);
}




section .sectionTitle_ab {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	height: auto;
	width: 40%;
}

section .sectionTitle {
	width: 40%;
	height: auto;
	margin-right: 0%;
	margin-right: 60%;
}




/* 概要周り*/
.readPv { width: 75%; height: auto;}
.overviewBox { width: 94%; padding: 0 3%;}
.overviewBox p { text-align: left; font-size: 0.85em; line-height: 1.8; margin: 20px 0; font-weight: bold; color: #333; font-feature-settings: "palt"; letter-spacing: 1px; }
.overviewBox p.left { width: 55%; margin: 0; padding-bottom: 30px;}
.joyconBg { background: url(../img/joyconBg.png) right bottom /53% no-repeat,#f0f0f0; margin: 0; padding: 0; line-height:0;}

/* トレーナー周り*/
section .trainerInner {
	position: relative;
}

section .trainerInner .trainerImg {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid #f0f0f0;
}

section .trainerInner .trainerImg img { width: 120%; height: auto; margin-top: 30px; margin-left: -9.5%;}

section .trainerInner .cheering {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 50%;
	z-index: 3;
	width: 50%;
	-webkit-filter: drop-shadow(0px 3px 8px rgba(0,0,0,.3));
	filter: drop-shadow(0px 3px 8px rgba(0,0,0,.3));
}


section .trainerInner .cheeringVoiceInner {
	display: block;
	position: absolute;
	width: 100%;
	height: 250px;
	left: 0;
	right: 0;
	margin: auto;
	top: 60%;
	z-index: 2;
	overflow: hidden;
}

section .trainerInner .cheeringVoiceInner .cheeringVoice01 {
	display: block;
	position: absolute;
	width: 60%;
	height: auto;
	left: 0;
	-webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	animation-duration: 1.0s; /* アニメーションの時間 */
	animation-delay: 0.5s; /* アニメーション開始時間 */
	animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}
section .trainerInner .cheeringVoiceInner .cheeringVoice02 {
	display: block;
	position: absolute;
	width: 60%;
	height: auto;
	left: 0;
	-webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	animation-duration: 1.0s; /* アニメーションの時間 */
	animation-delay: 1.0s; /* アニメーション開始時間 */
	animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}
section .trainerInner .cheeringVoiceInner .cheeringVoice03 {
	display: block;
	position: absolute;
	width: 60%;
	height: auto;
	right: 0;
	-webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	animation-duration: 1.0s; /* アニメーションの時間 */
	animation-delay: 1.0s; /* アニメーション開始時間 */
	animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}
section .trainerInner .cheeringVoiceInner .cheeringVoice04 {
	display: block;
	position: absolute;
	width: 60%;
	height: auto;
	right: 0;
	-webkit-filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	filter: drop-shadow(0px 1px 3px rgba(0,0,0,.3));
	animation-duration: 1.0s; /* アニメーションの時間 */
	animation-delay: 0.5s; /* アニメーション開始時間 */
	animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}
button#cheeringVoice {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	
	border: 0;
	border-radius: 0;
	background: none;
  
	animation-duration: 0.5s; /* アニメーションの時間 */
	animation-delay: 0s; /* アニメーション開始時間 */
	animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}

p.caution { text-align: right; font-size: 11px; color: #666; padding: 5px 5px 10px 0;}

.txtBox01 { width: 90%; margin: 0 auto; padding-bottom: 20px;}
.txtBox02 { width: 90%; margin: 0 auto; padding-bottom: 5px;}

h3.subTitle {
	clear: both;
	text-align: center;
	padding: 5px 0;
	background: linear-gradient(124deg, #379dd9, #56c1dd, #79c7b8, #75c4a2);
}




section#contents img {	vertical-align: bottom; line-height: 1.0em;}
section.border {border-bottom: 1px solid #999;}
section.graybg { background-color: #f0f0f0;}
section.whitebg { background-color: #fff;}



.moreBox { width: 85%; height: auto; padding: 0 7.5%;}
.moreBox p { text-align: center; font-size: 0.85em; line-height: 1.6; margin: 0 auto; padding: 10px 0; font-weight: bold; color: #333; font-feature-settings: "palt"; letter-spacing: 1px; }
.moreBox p.stretch { margin: 0 0 10px;}

.gamemodoBox { width: 100%; position: relative;}
.gamemodo01 { width: 100%;}
.gamemodo02 { width: 100%;}


section#fincLink .finc img {
	width: 100%;
	height: auto;
	border: none;
}

section#fincLink p.top {
	padding: 5% 5% 0;
	font-size: 1.0em;
	line-height: 1.0;
	color: #333;
}

section#fincLink p.under {
	margin: 0 5% 5%;
	font-size: 0.70em;
	line-height: 1.6;
	color: #666;
}

section#fincLink .shop-box{
width: 50%;
margin: 0 auto;
padding: 5% 0;
}

.footer_package img { width: 100%;}

.pcbg { background-image: none;}














/* 高さ667pxを超える場合 iPhone678+以降 */
@media screen and (min-height: 668px) {
	section#main { height: 130vh;/* movbgとあわせる*/}
	section#main .copy { top: 38%; width: 65%;}
	section#main h1 { top: 21%; width: 82%;}
	section#main .trial { top: 42%; width: 40%;}
}

/* 高さ736pxを超える場合 iPhoneX以降 */
@media screen and (min-height: 737px) {
	section#main { height: 110vh;/* movbgとあわせる*/}
	section#main .copy { top: 40%; width: 65%;}
	section#main h1 { top: 21%; width: 90%;}
	section#main .trial { top: 45%; width: 35%;}
}



@media (min-width: 667px) {
.pc { display: block;}
.sp { display: none;}
header { position: absolute; top:0;}
header .nintendo { width: 100px; height: auto;}
header .pocketlogo {width: 238px;height: 40px; margin-right: 2%;}







#fixedover {/* 背景動画の上にコンテンツをのせる*/
	position: relative;
}

section#movbg {/* 背景動画固定*/
	height: auto;
}

section#main {
	position: relative;
	height: auto;/* movbgとあわせる*/
	display: block;
	padding-top: 70%;

}



/* main内*/
section#main .copy { top: 40%; width: 40%; }
section#main h1 { top: 14%; width: 80%; }



/* topのパッケージ周り*/
.top_package {
	
	width: 100%;
	background-image: none;
	background-color: #fff;

}

.top_package .top_package_container {
	width: 660px;
	margin: 0 auto 30px;
}

/* topのパッケージ周り　パッケージ*/
.top_package .top_package_container .top_package_item01 {
	width: 18%;
	height: auto;
	padding-left: 0;
}

.top_package .top_package_container .top_package_item01 img {
	width: 100%;
	height: auto;
	margin-top: -40%;
}

/* topのパッケージ周り　価格*/
.top_package .top_package_container .top_package_item02 {
	width: 45%;
	height: auto;
	align-self:flex-end;
	padding-left: 1%;
	padding-right: 1%;
}

.top_package .top_package_container .top_package_item02 img {
	width: 100%;
	height: auto;
}

/* topのパッケージ周り　リンクボタン*/
.top_package .top_package_container .top_package_item03 {
	width: 35%;
	padding: 0;
	height: auto;
	align-self:flex-end;
}

/* topのパッケージ周り　リンクボタン　ニンテンドーeショップ*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(1) {
	height: 72px;
	line-height:72px;
	float: none;
	background:url(../img/blankArrow.svg) right top /12% no-repeat, linear-gradient(to bottom right, #ff9d3e, #ff7d00);
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(1) img {
	width: auto;
	height: auto;
	vertical-align:middle
	
}

/* topのパッケージ周り　リンクボタン　amazon　楽天ブックス*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(2),
.top_package .top_package_container .top_package_item03 ul li:nth-child(3) {
	width: 100%;
	height: 62px;
	float: none;
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(2) a {
	line-height: 62px;
	border-right: none;
	border-bottom: 1px solid #fff;
	background: url(../img/blankArrow.svg) right top /8% no-repeat,linear-gradient(to bottom right, #fbc25f, #f49c04);
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(3) a {
	line-height: 40px;
	background: url(../img/blankArrow.svg) right top /8% no-repeat,linear-gradient(to bottom right, #cc2e2e, #bf0000);
}

section#contents h2 {
display: block;
width: 75%;
margin: 0 auto;
padding: 3% 0 0;
}

.readPv { width: 50%; height: auto;}
.overviewBox { width: 70%; padding: 0; margin: 0 auto;}
.overviewBox h4 { width: 100%; height: auto; margin: 0 auto;}
.overviewBox p { text-align: left; width: 60%; font-size: 1.2em; line-height: 1.8; margin: 20px 0; font-weight: bold; color: #333; font-feature-settings: "palt"; letter-spacing: 1px; }
.overviewBox p.left { width: 60%; margin: 0; padding-bottom: 50px;}

.joyconBg {
	background:
	url(../img/joyconBg.png) right bottom /400px no-repeat,
	url(../img/pc_bg.png) top left /800px,
	#f0f0f0;
	margin: 0; padding: 0; line-height:0;
}

section .sectionTitle_ab { width: 30%; }
section .sectionTitle { width: 30%; margin-right: 70%; }

section .trainerInner .trainerImg {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-bottom: 1px solid #f0f0f0;
}
section .trainerInner .trainerImg img { width: 100%; height: auto; margin-top: 50px; margin-left: 0%;}
section .trainerInner .cheering { width: 30%; }
section .trainerInner .cheeringVoiceInner {
	width: 80%;
	height: 250px;
	top: 65%;
}
section .trainerInner .cheeringVoiceInner .cheeringVoice01 {
	width: 60%;
	height: auto;
	left: 3%;
}
section .trainerInner .cheeringVoiceInner .cheeringVoice02 {
	width: 60%;
	height: auto;
	left: 5%;
	bottom: 3%;
}
section .trainerInner .cheeringVoiceInner .cheeringVoice03 {
	width: 60%;
	height: auto;
	right: 3%;
}
section .trainerInner .cheeringVoiceInner .cheeringVoice04 {
	width: 60%;
	height: auto;
	right: 5%;
	bottom: 3%;
}

.gamemodo01 { width: 100%;}
.gamemodo01_left { float: left; width: 35%; margin: 0; padding: 0;}
.gamemodo01_right { float: right; width: 65%; margin: 0; padding: 0; }
.gamemodo01_left img { margin: 15px 0 0 0;}
.gamemodo01_right .sliderBox { width: 420px; margin: 15px auto 0;}

.myrepoBox {  margin: 10px auto 0;}
.txtBox01 { width: 75%; }
.txtBox02 { width: 75%; }
.subTitle img { width: 75%; height: auto;}

.moreBox { width: 90%; height: auto; padding: 0 5%; margin: 0 auto;}
.moreBox p { text-align: center; font-size: 1.1em; line-height: 1.6; margin: 0 auto; padding: 10px 0; font-weight: bold; color: #333; font-feature-settings: "palt"; letter-spacing: 1px; }
.moreBox p.stretch { margin: 0 0 10px;}

section#contents .shop-box,section#fincLink .shop-box{ display: flex;}
.footer_package img { width: 75%;}
.finclogo { margin: 0;}
.fincno1 { margin: 0 0 0 50px;}





}/*min-width: 769px */











@media (min-width: 980px) {

section#main {
	padding-top: 65%;
}

.top_package .top_package_container {
	width: 780px;
}

/* main内*/
section#main .copy { top: 38%; width: 360px; }
section#main h1 { top: 15%; width: 720px; }

/* topのパッケージ周り　リンクボタン　ニンテンドーeショップ*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(1) {
	height: 146px;
}
/* topのパッケージ周り　リンクボタン　amazon　楽天ブックス*/
.top_package .top_package_container .top_package_item03 ul li:nth-child(2),
.top_package .top_package_container .top_package_item03 ul li:nth-child(3) {
	height: 72px;
}
.top_package .top_package_container .top_package_item03 ul li:nth-child(2) a {
	line-height: 72px;
}

.top_package .top_package_container .top_package_item03 ul li:nth-child(3) a {
	line-height: 72px;
}

section#contents h2 { width: 760px; padding: 50px 0 0; }
.readPv { width: 480px; height: auto;}
.sliderBox { width: 980px; height: auto; margin: 0 auto;}
.myrepoBox {  margin: 20px auto 0;}
.overviewBox { width: 760px;}
.overviewBox p { width: 560px; }
.overviewBox p.left { width: 560px;}

.joyconBg {
	background:
	url(../img/joyconBg.png) right bottom /400px no-repeat,
	url(../img/pc_bg.png) top left /900px,
	#f0f0f0;
	margin: 0; padding: 0; line-height:0;
}

section .sectionTitle_ab { width: 15%; }
section .sectionTitle { width: 15%;	margin-right: 85%; }
section .trainerInner .trainerImg img { width: 980px; height: auto; margin-top: 0px; margin-left: 0%;}
section .trainerInner .cheering { width: 280px; height: 280px;top: 55%; }
section .trainerInner .cheeringVoiceInner { width: 800px; height: 320px; top: 60%; }
p.caution { text-align: right; font-size: 13px; color: #666; width: 980px; margin: 5px auto;}
.txtBox01,.txtBox02 { width:760px; height: auto; margin: 0 auto; padding: 0 0 50px;}
.subTitle img { width: 50%; height: auto;}

.gamemodo02 { width: 980px; height: auto; margin: 20px auto 0;}

.gamemodo01 { width: 980px; margin: 0 auto;}
.gamemodo01_right .sliderBox { width: 560px; margin: 15px auto 0;}

.moreBoxInner { width: 980px; height: auto; position: relative; margin: 0 auto; padding: 0 0 20px 0; }
.moreBoxInner_left {width: 50%; float: left; margin: 0; padding: 0;}
.moreBoxInner_right {width: 50%; float: right; margin: 0; padding: 0;}
.moreBoxInner .subTitle img { width: 75%; height: auto;}

section#contents .inner,section#fincLink .inner { width: 1024px; margin: 0 auto;}

}/*min-width: 980px */

@media (min-width: 1025px) {

/* main内*/
section#main .copy { top: 40%; width: 400px; }
section#main h1 { top: 15%; width: 900px; }
.overviewBox p { width: 560px; }
.overviewBox p.left { width: 560px;}

.joyconBg {
	background:
	url(../img/joyconBg_pc.png) right bottom /400px no-repeat,
	url(../img/pc_bg.png) top left /1000px,
	#f0f0f0;
	margin: 0; padding: 0; line-height:0;
}

.shop-boxOuter { padding: 50px 0;}
section#fincLink .shop-box{padding: 0;}
.footer_package img { width: 784px;}

}

@media (min-width: 1334px) {
section#main .copy { top: 45%; width: 450px; }
section#main h1 { top: 25%; width: 1100px; }
.overviewBox p { width: 760px; }
.overviewBox p.left { width: 760px;}
}

	
.msp {display:none}
@media screen and (min-width: 980px) {
	.msp {display:block}
}

.lang {position:absolute; top:40px; right:0}
.lang a {display:block; width:100px; height:30px;background-size:100px auto }
.lang a:hover { width:100px; height:30px; background-size:100px auto}
.lang1 {background:url(../img/lang1.png) no-repeat 0 0; }
.lang1:hover {background:url(../img/lang1_h.png) no-repeat 0 0;}
.lang1_on {background:url(../img/lang1_on.png) no-repeat 0 0; }
.lang2 { background:url(../img/lang2.png) no-repeat 0 0; }
.lang2:hover {background:url(../img/lang2_h.png) no-repeat 0 0;}
.lang2_on { background:url(../img/lang2_on.png) no-repeat 0 0;}
.lang3 {background:url(../img/lang3.png) no-repeat 0 0; }
.lang3:hover {background:url(../img/lang3_h.png) no-repeat 0 0;}
.lang3_on { background:url(../img/lang3_on.png) no-repeat 0 0; }

@media (min-width: 667px) {
	.lang {margin-right:2%; top:70px}
	.lang a {width:120px; height:40px; background-size:120px auto }
	.lang a:hover { width:120px; height:40px; background-size:120px auto}
}

.msp2 {display:block}
@media screen and (min-width: 980px) {
	.msp2 {display:none}
}