@charset "UTF-8";

#wrapper{
}
h2{
	text-align: center;
	margin-bottom:1.8rem;
}

/* header
======================================================= */
#upper{
	height:15px;
	padding:5px 0 ;
	line-height:1;
	color: #ffdae9;
	text-align:left;
	font-size:0.68rem;
	background: #ab3a54;
}
#header{
	width:100%;
	margin:0 0 ;
	padding:0;
	background:#ab3a54;
	background-size: 100%;
}


#mainArea{
	position:relative;
	width: 100%;
	min-width:1600px;
	background:url(../images/index/main.jpg) no-repeat center top;
	margin:0 auto 1.5rem;
	padding:0 ;
	box-sizing: border-box;
	z-index:1;
	overflow:hidden;
}


#mainArea > .inner{
	position:relative;
	width:740px;
	margin: auto;
}

/* //////////////////////////////////// */
/* z-index設定: girls-imgArea(2) > subImgArea(3) > contentArea(4) > logoArea(5) > btnArea(6) */
 #logoArea{
	position:relative;
	width:80%;
	max-width:740px;
	height:auto;
	margin:0 auto 10px;
	padding-top:30px;
	text-align: center;
	z-index:5;
}
 #logoArea img {
	width:100%;
}
/* //////////////////////////////////// */
.subImgArea{
	position:relative;
	width:100%;
	text-align:center;
	margin:0 auto 2rem;
	z-index:3;
}
.subImgArea img{
	display: block;
	width:100%;
	max-width:540px;
	margin:auto;
	height:auto;
}

/* //////////////////////////////////// */
.girls-imgArea{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	max-width:1920px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	pointer-events:none;
	z-index:2;
}
.girls-imgArea img{
	display: block;
	width:100%;
}

.girls-imgArea .img_left{
	position:absolute;
	top:30px;
	left:0;
	width:700px;
	max-width:100%;
	height:auto;
}
.girls-imgArea .img_right{
	position:absolute;
	top:30px;
	right:0;
	width:700px;
	max-width:100%;
	height:auto;
}

#contentArea{
	position:relative;
	z-index:4;
}

/* //////////////////////////////////// */


 #btnArea{
	position:relative;
	display: flex;
	gap:1rem;
	margin:0 auto 1.2rem;
	z-index:6;
}

 #btnArea .enter{
	margin-bottom:1rem;
}
 #btnArea .exit{
}


/*注意事項*/
#caution{
	width:50%;
	padding:20px;
	margin:0 auto 3rem;
	border-radius: 4px;
}

#caution .inner{
	padding: 0 ;
	text-align:left;
	font-size:0.7rem;
	line-height:1.5;
	color:#484848;
}
	#caution img{
		width:20%;
		height:auto;
	}

/* //////////////////////////////////// */
#contentArea {
	width:100%;
	margin:auto;
	background:rgba(255,255,255,0.8);
	padding: 2.4rem ;
}

.concept {
	color: #e974c6;
	text-indent: 0.2rem;
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight:800;
	line-height: 1.8;
	font-size: 0.7rem;
}
.concept h2{
	font-size: 1rem;
	margin-bottom: 1.2rem;
}

/* //////////////////////////////////// */
footer #navi ul{
	display: none;
}

/*  グループリンク
======================================================================*/
#groupLink{
	width:600px;
	margin:0 auto 25px;
}
#groupLink ul{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
	width:100%;
}

#groupLink ul li{
	margin:0 0 15px 0;
	margin-left:auto;
}



/* 
   ####################################################################
   ####################################################################
   ####################################################################
*/

/* link */

#linkArea{
	width:980px;
	margin:0 auto 30px;
}

#linkArea a{
	color:#ffeca6;
}
/**/
/**/
#linkArea #linkSystem{
	margin:0 0 20px;
}

#linkArea #linkSystem section.section{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:960px;
	margin: 0 auto 1rem;

}

/**/
#linkArea #linkText{
	margin:0 0 20px;
}
#linkArea #linkText p{
	margin:0 0 10px 0;
	font-size:11px;
	line-height:1.4;
}
#linkArea #linkText p a{
	font-size:11px;
}


#linkArea #linkSystem .box{
	width:auto;
	max-width:100%;
	border: none;
	padding:0;
	margin:0 5px 10px;
}

/*リンクバナーサイズ別*/
#linkArea table td,#linkArea table td img,#linkArea table td a{
	width:auto;
	height: auto;
	padding:0 !important;
	margin:0 !important;
	line-height: 1 !important;
}
#linkArea .box0{ /*その他*/
}
#linkArea .box1{ /*88x31*/
}
#linkArea .box2{ /*200x40*/
}

#linkArea .box3{ /*468x60*/
}

#linkArea .box4{ /*テキスト*/
}


/* ====================================================
   スマホ対応 (768px以下)
   ==================================================== */
@media screen and (max-width: 768px) {

	/* header */
	#upper{
		font-size:0.6rem;
		padding:3px 0;
	}

	/* mainArea */
	#mainArea{
		width:100%;
		min-width:100%;
		background-size: cover;
		background-position: center top;
	}

	#mainArea > .inner{
		width:95%;
		max-width:100%;
		padding:0 10px;
	}
	#mainArea > .inner .sp-area{
		position: relative;
		width:100%;
		aspect-ratio: 3 / 3.8;
		border:1px solid rgba(255,255,255,0)
	}
	/* logoArea */
	#logoArea{
		width:90%;
		max-width:100%;
		margin:0 auto 0px;
		padding-top:20px;
	}
	 #logoArea img {
		width:100%;
		max-width:100%;
		height:auto;
	}
	/* subImgArea */
	.subImgArea{
		top:18vh;
		width:90%;
		margin:0 auto 15.5rem;
	}
	.subImgArea img{
		width:100%;
		max-width:100%;
	}

	/* girls-imgArea - スマホでは中央寄せ50%:50%配置 */
	.girls-imgArea{
		/* top:20vh; */
		bottom:3vh;
		transform: translateY(-50%);
		width:100%;
		height:auto;
		display:flex;
		justify-content:center;
		align-items:flex-start;
		gap:0;
		margin:2rem 0;
		pointer-events:none;
		transform:none;
		left:auto;
		max-width:100%;
	}
	.girls-imgArea .img_left{
		position:relative;
		top:auto;
		left:auto;
		width:50%;
		max-width:50%;
		height:auto;
	}
	.girls-imgArea .img_right{
		position:relative;
		top:auto;
		right:auto;
		width:50%;
		max-width:50%;
		height:auto;
	}


	/* btnArea */
	#btnArea{
		gap:1rem;
		margin:-5vh auto 1rem;
	}

	#btnArea .enter{
		width:60%;
		max-width:200px;
		margin:0 auto 1rem;
	}
	#btnArea .exit{
		width:38%;
	}

	#btnArea .enter img{
		width:100%;
		height:auto;
	}

	/* caution */
	#caution{
		width:95%;
		padding:15px;
		margin:0 auto 2rem;
		align-items: center;
	}

	#caution .inner{
		max-width:76%;
		font-size:0.65rem;
		line-height:1.6;
	}

	#caution img{
		width:70px;
		height:70px;
	}

	/* contentArea */
	#contentArea{
		width:100%;
		padding:1.5rem 1rem;
	}

	.concept{
		font-size:0.65rem;
		line-height:1.7;
	}

	.concept h2{
		font-size:0.9rem;
		margin-bottom:1rem;
	}

	/* groupLink */
	#groupLink{
		width:95%;
		max-width:100%;
		margin:0 auto 20px;
	}

	#groupLink ul{
		justify-content:center;
	}

	#groupLink ul li{
		margin:0 5px 10px 5px;
		width:auto;
	}

	#groupLink ul li img{
		max-width:100%;
		height:auto;
	}

	/* linkArea */
	#linkArea{
		width:95%;
		max-width:100%;
		margin:0 auto 20px;
	}

	#linkArea h2{
		font-size:1.2rem;
		margin-bottom:1rem;
	}

	#linkArea #linkSystem section.section{
		width:100%;
		max-width:100%;
		justify-content:center;
	}

	#linkArea #linkSystem .box{
		margin:0 3px 8px;
	}

	#linkArea #linkText p{
		font-size:10px;
	}

	/* footer調整 */
	footer{
		padding-bottom:20px;
	}

	footer .flex{
		flex-direction:column;
		gap:1rem;
	}

	footer .logo{
		width:60%;
		max-width:200px;
		margin:0 auto;
	}

	footer .phones{
		flex-direction:column;
		gap:0.5rem;
		padding:1rem;
	}

	footer .phone{
		font-size:1.5rem;
	}
}

/* ====================================================
   タブレット対応 (769px〜1024px)
   ==================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

	#mainArea > .inner{
		width:90%;
		max-width:740px;
	}

	#linkArea{
		width:90%;
		max-width:980px;
	}

	#linkArea #linkSystem section.section{
		width:90%;
		max-width:960px;
	}

	#groupLink{
		width:90%;
		max-width:600px;
	}
}