@charset "utf-8";
/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
	display: block;
	width: calc(100% - 20px);
	border: solid 10px #1d2088;
	background-color: #1d2088;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
	height: 0;
	width: 100%;
	padding-top: 72.1%;
	overflow: hidden;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 0;
}
header #keyvisual .logo{
	position: absolute;
	top:3%;
	left: 50%;
	transform: translateX(-50%);
	width: 55%;
}
header #keyvisual .catch{
	position: absolute;
	top:60%;
	left: 50%;
	transform: translateX(-50%);
	width: 82%;
}
header #keyvisual .chara{
	position: absolute;
	bottom:0;
	left: 50%;
	transform: translateX(-50%);
	width: 42%;
	max-width: 822px;
}
header #keyvisual img{margin: 0 auto;}

.bgWrap{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100%;
	clip-path: inset(0);
}
.bg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#banner .bg, #lead .bg{background-image: url("../img/bg01.jpg");}
#list01 .bg, #lead .bg.onlinebg{background-image: url("../img/bg02.jpg");}
#list02 .bg, #lead .bg.nazobg{background-image: url("../img/bg03.jpg");}
#lastsection .bg{background-image: url("../img/bg04.jpg");}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	padding-bottom: 40px;
}
#banner h2{
	position: relative;
	margin: 0 auto;
	padding: 5px 0;
	z-index: 10;
}
#banner h2 img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}
#banner ul{position: relative;}
#banner ul li{
	position: relative;
	margin: 0;
	width: 50%;
}
#banner ul li.w100{width: 100%;}
#banner ul li:nth-child(1) a{background-color:  #c2292e;}
#banner ul li:nth-child(2) a{background-color:  #e097b5;}
#banner ul li:nth-child(3) a{background-color:  #0c7cc4;}
#banner ul li:nth-child(4) a{background-color:  #0a9166;}
#banner ul li:nth-child(5) a{background-color:  #1e2085;}
#banner a{
	position: relative;
	margin: 0 auto;
	display: block;
	width:100%;
	text-align: right;
	padding-bottom: 1.4%;
}
#banner a span{
	position: relative;
	display: inline-block;
	width: auto;
	padding: 2% 2em 0 0;
	line-height: 1em;
	font-size: min(4vw, 160%);
}
#banner ul li:nth-child(2) a span, #banner ul li:nth-child(3) a span, #banner ul li:nth-child(4) a span{padding: 2.5% 2em 0 0;}
#banner a:hover{color: #fbde55;}
#banner a span::after{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	content: '';
	display: block;
	width: 2em;
	height: 100%;
	background-image: url("../img/arrow.png");
	background-position: calc(100% - 10px) 100%;
	background-repeat: no-repeat;
	background-size:  1em auto;
}
#banner a .badge{
	position: absolute;
	top: -1.5%;
	left: 0;
	width: 29.5%;
}
#banner ul li:nth-child(1) a .badge{top: 1%;left: 0.5%;width: 20%;}
#banner ul li img{width: 100%; max-width: 100%;}
#banner .bannerWrap{
	position: relative;
	margin: 0 auto;
	padding-bottom: 60px;
	background-image: url("../img/bg_right.png");
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size:  50% auto;
	z-index: 99;
}
#banner .bannerWrap .chara{
	position: absolute;
	bottom:-1%;
	left: 3px;
	width: 15%;
	z-index: 100;
}

/* cm */
#cm {
	position: relative;
	margin: -15px auto 0 auto;
	z-index: 100;
}

/* about */
#about {
	position: relative;
	margin: 0 auto;
}
#about #aboutBtn{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 100;
	cursor: pointer;
}
#about .aboutWrap {
	position: relative;
	margin: -15% auto 0 auto;
	width: calc(100% - 70px);
	padding: 60px 20px 20px 20px;
	background-color: #ffffff;
	text-align: center;
	border: solid 3px #1d2088;
}
#about .aboutWrap p{
	position: relative;
	padding-bottom: 1.4em;
	font-size: min(4.2vw, 120%);
	line-height: 1.7em;
}
#about .aboutWrap p.fontSmall{font-size: min(3.2vw, 80%);}
#about .aboutWrap p.strong{font-size: min(5vw, 130%);line-height: 1.7em;}

.camp .campWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 70px);
	padding: 20px;
	background-color: #ffffff;
	border: solid 3px #032183;
	box-shadow: 5px 5px 0px 0px #032183;
	text-align: center;
	z-index: 200;
}
.camp.soon .campWrap{padding: 60px 20px;}
.camp .campWrap::after{
	position: absolute;
	top: -40px;
	right: -15px;
	width: 100%;
	height: max(30%, 170px);
	content: '';
	display: block;
	background-image: url("../img/bg_ttl.png");
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
#lastsection .camp .campWrap::after{display: none;}
.camp h2{
	position: absolute;
	top: min(-12%, -50px);
	left: -15px;
	width: min(40%, 240px);
	z-index: 201;
}
#lastsection .camp h2{
	position: relative;
	top:auto;
	left: auto;
	margin: 0 auto 10px auto;
	width: 100%;
	max-width: 640px;
}
.camp .soon{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 520px;
	z-index: 203;
}
.camp .Img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	z-index: 202;
}
.camp .Txt{
	position: relative;
	margin: 20px auto 0 auto;
}

.lastL .wave{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform: scale(1, -1);
}
.lastL .wave #btmF{
	position: absolute;
	top:-3px;
	left: 0;
}

/* list01 */
#list01{
	position: relative;
	margin:0 auto;
	padding: 50px 0 90px 0;
	border-top: solid 6px #EBB200;
}
#list01.camp .campWrap{padding: min(17%, 160px) 20px 50px 20px;}
#list01 .btnArea{margin: 30px auto 0 auto;}
#list01 .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg01.png");
	background-position: 0 calc(100% - 15px);
	background-repeat: no-repeat;
	background-size: contain;
}
#list01 .chara{
	position: absolute;
	bottom:30px;
	left: 3px;
	width: 22%;
	z-index: 205;
}

/* list02 */
#list02{
	position: relative;
	margin:0 auto;
	padding: 30px 0 90px 0;
	background-color: #ffbbcc;
	border-top: solid 6px #d40025;
}
#list02 .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg02.png");
	background-position: 0 calc(100% - 15px);
	background-repeat: no-repeat;
	background-size: contain;
}
#list02 .chara{
	position: absolute;
	bottom: 15px;
	right: 3px;
	width: 22%;
	z-index: 205;
}

/* list03 */
#list03{
	position: relative;
	margin:0 auto;
	padding: 30px 0 90px 0;
	background-color: #91dcff;
	border-top: solid 6px #0b7cc4;
}
#list03 .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg03.png");
	background-position: 0 calc(100% - 15px);
	background-repeat: no-repeat;
	background-size: contain;
}
#list03 .chara{
	position: absolute;
	bottom: 60px;
	left: 5px;
	width: 22%;
	z-index: 205;
}


/* listsoon */
#lastsection{position: relative;}
#listsoon{
	position: relative;
	margin:0 auto;
	padding: 30px 0 calc(50% + 120px) 0;
	border-top: solid 6px #047938;
}
#listsoon .bg01{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg03.png");
	background-position: 0 calc(100% - 15px);
	background-repeat: no-repeat;
	background-size: contain;
}
#listsoon p{
	position: relative;
	margin: 20px auto 0 auto;
	text-shadow: 
    #ffffff 2px 0px,  #ffffff -2px 0px,
    #ffffff 0px -2px, #ffffff 0px 2px,
    #ffffff 2px 2px , #ffffff -2px 2px,
    #ffffff 2px -2px, #ffffff -2px -2px,
    #ffffff 1px 2px,  #ffffff -1px 2px,
    #ffffff 1px -2px, #ffffff -1px -2px,
    #ffffff 2px 1px,  #ffffff -2px 1px,
    #ffffff 2px -1px, #ffffff -2px -1px;
	z-index: 100;
}
#listsoon .chara{
	position: absolute;
	bottom: 45px;
	left: 5px;
	width: 22%;
	z-index: 205;
}
#listsoon .chara1{
	position: absolute;
	bottom: 50px;
	right: 3px;
	width: 22%;
	z-index: 205;
}
#listsoon .soonWrap{position: relative;padding-bottom: 90px;}
#listsoon #btmBanner{
	position: relative;
	margin: -20px auto 20px auto;
	width: calc(100% - 40px);
}
#listsoon .campData{
	position: relative;
	margin: 0 auto;
	padding: 0 0 25px 0;
}
#listsoon .campData.margin{
	padding: 25px 0;
	border-top: solid 1px #CDCDCD;
}
#listsoon .campData .btnArea{
	margin: 10px auto 0 auto;
}
#listsoon .campData.boxSmall{padding: 25px 0;}
#listsoon .campData .paperImg{
	position: relative;
	margin: 10px auto -10px auto;
	width: 50%;
	max-width: 160px;
	border: solid 1px #1d2088;
}
#listsoon .campData.boxSmall .boxInner{
	position: relative;
	margin: 0 auto;
	font-size: 96%;
	line-height: 1.5em;
}
#listsoon .campData.boxSmall .boxInner p{margin: 0 auto;}
#listsoon .campData.boxSmall .Img{width: calc(100% - 30px);max-width: 640px; margin: 10px auto 20px auto;}
#listsoon .campData.boxSmall .btnArea{max-width: 300px;width: 70%;font-size: 90%;}


/* ----- pc ----- */
@media screen and (min-width: 641px) {

	header {
		width: calc(100% - 40px);
		border: solid 20px #1d2088;
	}

	/* バナー */
	#banner{
		background-position: 0 0,60px 60px; 
		background-size: 120px 120px;
		padding-bottom: 120px;
	}
	#banner h2{padding: 30px 0 15px 0;}
	#banner .bannerWrap{
		margin: 0 auto;
		padding-bottom: 120px;
		background-position: 96% 100%;
		background-size: min(50%, 340px) auto;
	}
	#banner a{padding-bottom: 1%;}
	#banner a span{
		padding: 0.9% 3em 0 0;
		font-size: min(6vw, 160%);
	}
	#banner ul li:nth-child(2) a span, #banner ul li:nth-child(3) a span, #banner ul li:nth-child(4) a span, #banner ul li:nth-child(5) a span{padding: 2% 3em 0 0;}
	#banner a span::after{width: 3em; background-position: calc(100% - 0.5em - 10px) 100%;}
	#banner .bannerWrap .chara{
		bottom:-1%;
		left: 15px;
		width: min(16%, 138px);
	}
	
	/* cm */
	#cm {margin: -35px auto 0 auto;}
	
	/* about */
	#about{margin: 0 auto -30px auto;}
	#about .aboutWrap {
		margin: -100px auto 0 auto;
		padding: 120px 20px 40px 20px;
		max-width: 920px;
		border: solid 5px #1d2088;
	}
	#about .aboutWrap p{font-size: min(4vw, 126%);padding-bottom: 2em;line-height: 1.8em;}
	#about .aboutWrap p.fontSmall{font-size: min(3vw, 92%);}
	#about .aboutWrap p.strong{font-size: min(6vw, 160%);line-height: 1.8em;}

	.camp .campWrap{
		width: calc(100% - 80px);
		max-width: 960px;
		padding: 50px 0;
		border: solid 5px #032183;
		box-shadow: 6px 6px 0px 0px #032183;
	}
	.camp.soon .campWrap{padding: 100px 0;}
	.camp .campWrap::after{
		top: -65px;
		right: -80px;
		height: max(30%, 280px);
		background-image: url("../img/bg_ttl_pc.png");
	}
	.camp h2{
		top: min(-15%, -60px);
		left: -50px;
		width: min(40%, 240px);
	}
	.camp.soon p{
		font-size: 120%;
		line-height: 2em;
	}
	.camp .Img{
		width: calc(100% - 100px);
		max-width: 760px;
	}
	.camp .Txt{
		margin: 30px auto 0 auto;
		width: calc(100% - 100px);
		max-width: 760px;
		font-size: .18rem;
	}
	
	.lastL .wave svg{height: 80px; width: 100%;}
	.lastL .wave #btmF{top:-4px;}
	
	#banner .bg{background-image: url("../img/bg01_pc.jpg");}
	#list01 .bg{background-image: url("../img/bg02_pc.jpg");}
	#list02 .bg{background-image: url("../img/bg03_pc.jpg");}
	#listsoon .bg{background-image: url("../img/bg04_pc.jpg");}

	/* list01 */
	#list01{
		padding: 80px 0 120px 0;
		border-top: solid 15px #EBB200;
	}
	#list01.camp .campWrap{padding: 100px 0 50px 0;}
	#list01 .bg01{
		left: 50%;
		transform: translateX(-50%);
		max-width: 960px;
		background-image: url("../img/bg01_pc.png");
		background-position: 50% calc(100% - 15px);
	}
	#list01 .chara{
		bottom:60px;
		left: calc(50% - 540px);
		width: min(50%, 148px);
	}

	/* list02 */
	#list02{
		padding: 100px 0 120px 0;
		border-top: solid 15px #d40025;
	}
	#list02 .bg01{
		left: 50%;
		transform: translateX(-50%);
		max-width: 1010px;
		background-image: url("../img/bg02_pc.png");
		background-position: 50% calc(100% - 15px);
	}
	#list02 .chara{
		bottom:60px;
		right: calc(50% - 540px);
		width: min(50%, 148px);
	}

	/* list03 */
	#list03{
		padding: 100px 0 170px 0;
		border-top: solid 15px #0b7cc4;
	}
	#list03 .bg01{
		left: 50%;
		transform: translateX(-50%);
		max-width: 1050px;
		background-image: url("../img/bg03_pc.png");
		background-position: 50% calc(100% - 55px);
	}
	#list03 .chara{
		bottom:130px;
		left: calc(50% - 525px);
		width: min(50%, 148px);
	}
	
	/* listsoon */
	#listsoon{
		padding: 100px 0 calc(50% + 120px) 0;
		border-top: solid 15px #047938;
	}
	#listsoon .bg01{
		left: 50%;
		transform: translateX(-50%);
		max-width: 1050px;
		background-image: url("../img/bg03_pc.png");
		background-position: 50% calc(100% - 55px);
	}
	#listsoon p{font-size: 110%;}
	#listsoon p.fontSmall{font-size: 84%;}
	#listsoon .chara{
		bottom:130px;
		left: calc(50% - 525px);
		width: min(50%, 148px);
	}
	#listsoon .chara1{
		bottom:120px;
		right: calc(50% - 540px);
		width: min(50%, 148px);
	}
	
	#listsoon .campData{
		width: calc(100% - 60px);
		padding: 0 0 60px 0;
	}
	#listsoon .campData.margin{padding: 60px 0;}
	#listsoon .campData .btnArea{margin: 20px auto 0 auto;}
	#listsoon .campData.boxSmall{padding: 40px 0;}

}

/* ----- chara ----- */
@media screen and (min-width: 641px) and (max-width: 1100px) {
	#banner .bannerWrap .chara{bottom:-2%;}
	#list01 .chara{left: 5px;}
	#list02 .chara{right: 5px;}
	#listsoon .chara{left: 5px;}
	#listsoon .chara1{right: 5px;}
}
@media screen and (min-width: 400px) and (max-width: 640px) {
	#banner .bannerWrap .chara{bottom:-3%;}
}