@charset "utf-8";
/* CSS Document */

/*
BODY
*/
body{
	background: url(../images/bg.jpg) no-repeat right bottom / cover fixed;
	text-align: center;
	margin: 0;
	font-family: 'Candara', 'Javanese Text', 'Cambria Math', 'serif';
}

/*
LOADING
*/
#loading{
	background-color: #AEAEAE;
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	align-items: center;
	#loading_screen{
		position: fixed; 
		inset: 0;
		z-index: 97;
		translate: 0% 100vh;
	}
	#loadindText{
		font-size: max(2rem, 30%);
	}
}

/*
PAGETOPBTN
*/
.pageTopBtn{
	width: 90px;
	height: 90px;
	position: fixed;
	bottom: 40px;
	right: 40px;
	z-index: 999;
	opacity: 0;
	border-radius: 50%;
	background-image: url(../images/pagetop.png);
	cursor: pointer;
}

/*
HEAD_SEQ
*/
.head_content{
	position: relative;
	margin-bottom: 15rem;
	.sliderWrap{
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		#back{
			position: absolute;
			top: calc(50% - 35px);
			left: 0;
			width: 35px;
			height: 70px;
			cursor: pointer;
			border-radius: 0 10% 10% 0;
			background-color: rgba(20,20,20,.7);
			.back_btn{
				display: block;
				position: relative;
				top: 33%;
				left: 33%;
				width: 66%;
				height: 33%;
				border-top: 3px solid #CCC;
				border-right: 3px solid #CCC;
				rotate: 225deg;
			}
		}
		#next{
			position: absolute;
			top: calc(50% - 35px);
			right: 0;
			width: 35px;
			height: 70px;
			cursor: pointer;
			border-radius: 0 10% 10% 0;
			background-color: rgba(20,20,20,.7);
			.next_btn{
				display: block;
				position: relative;
				top: 33%;
				right: 0;
				width: 66%;
				height: 33%;
				border-top: 3px solid #CCC;
				border-right: 3px solid #CCC;
				rotate: 45deg;
			}
		}
	}
}

/*
SLIDERWRAP
*/
.sliderWrap{
	img{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
	.img_start{
		opacity: 1;
	}
}

/*
COMMON
*/
h1{
	font-size: 10vw;
	max-width: 35rem;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: 1;
	color: azure;
}
h2{
	font-size: min(7vw, 3rem);
	text-shadow: 4px 4px 12px #888;
	padding: .5rem;
}
h3{
	font-size: min(5vw, 1.5rem);
	margin-bottom: 1rem;
	padding: 2rem 0 1rem;
	border-bottom: 3px dotted #333;
}
p{
	margin: 12px;
}
/*
HEADER
*/
header img{
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
input[type='button']{
	cursor: pointer;
}

/*
FADEIN
*/
.fadeIn{
	opacity: 0;
}
/*
SHOW
*/
.show{
	opacity: 1;
	transition: 500ms;
}
.unShow{
	opacity: 0;
	visibility: hidden;
	transition: 500ms;
}
/*
MENU_BAR
*/
/*
.menu_bar{
	#menu_open{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 30px;
		right: 30px;
		z-index: 99;
		width: 4rem;
		height: 4rem;
		outline: 1px solid #333;
		border-radius: 50%;
		background-color: #EEE;
		cursor: pointer;
		.menuOpen_btn{
			width: 2rem;
			height: 4px;
			border-radius: 5px;
			background-color: black;	
		}
	}
}
*/
/*
MENU_BAR
*/
.menu_bar{
	#menu_open{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 30px;
		right: 30px;
		z-index: 99;
		width: 4rem;
		height: 4rem;
		outline: 1px solid #333;
		border-radius: 50%;
		background-color: #EEE;
		cursor: pointer;
	}
	.menuOpen_btn{
		width: 2rem;
		height: 4px;
		border-radius: 5px;
		background-color: black;
	}
	.menu_Opening{
		.menuOpen_btn {
			width: 2.5rem;
			height: 4px;
			border-radius: 5px;
			background-color: black;
			rotate: 45deg;
		}
	}
} 
.menu_bar #menu_open:hover{
	background-color: #DDF;
	transition: 1300ms;
}

.menu_bar .menuOpen_btn::before{
	content: "";
	display: inherit;
	position: absolute;
	top: 18px;
	left: auto;
	width: 2rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
}
.menu_bar .menuOpen_btn::after{
	content: "";
	display: inherit;
	position: absolute;
	bottom: 18px;
	left: auto;
	width: 2rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
}
/*メニューバー表示中*/
.menu_bar .menu_Opening .menuOpen_btn::before{
	content: "";
	display: inherit;
	position: absolute;
	top: 0;
	left: auto;
	width: 2.5rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
	rotate: 90deg;
}
.menu_bar .menu_Opening .menuOpen_btn::after{
	visibility: hidden;
}
/*
疑似クラス
*/
/*
#menu_open:hover{
			background-color: #DDF;
			transition: 1300ms;
}
*/
/*メニューバー表示中*/
/*
.menu_bar .menu_Opening .menuOpen_btn{
		width: 2.5rem;
		height: 4px;
		border-radius: 5px;
		background-color: black;
		rotate: 45deg;	
}
.menuOpen_btn::before{
	content: "";
	display: inherit;
	position: absolute;
	top: 18px;
	left: auto;
	width: 2rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
}
.menuOpen_btn::after{
	content: "";
	display: inherit;
	position: absolute;
	bottom: 18px;
	left: auto;
	width: 2rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
}
.menu_Opening .menuOpen_btn::before{
	content: "";
	display: inherit;
	position: absolute;
	top: 0;
	left: auto;
	width: 2.5rem;
	height: 4px;
	border-radius: 5px;
	background-color: black;
	rotate: 90deg;
}
.menu_Opening .menuOpen_btn::after{
	visibility: hidden;
}
*/
/*
MENU_PANEL
*/
#menu_panel{
	opacity: 0;
}

/*
MENU_CONTENT
*/
.menu_content{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9;
	width: 300px;
	height: 100vh;
	visibility: hidden;
	background-image: linear-gradient(180deg, rgba(250,250,255,.7) 30%, rgba(200,210,255,.8) 50%, rgba(150,160,255,.8) 75%, rgba(100,110,255,.9) 100%);
	li{
		margin: 2rem 0;
		padding: 10px 0;
		font-size: 2rem; 
		color: black;		
	}
}
.menu_content li:first-child{
	margin-top: 7.5rem;
}
.menu_content li:hover{
	color: #DC2EF4;
	text-decoration: underline;
	transition: color 500ms;
}
/*
CONCEPTSEQ
*/
.conceptSec{
	position: relative;
	z-index: -1;
	margin-bottom: 15rem;
	img{
		width: 100%;
		max-height: 40rem;
		object-fit: cover;
		object-position: 7rem 50%;
	}
	.conceptText{
		position: absolute;
		top: 50%;
		left: min(30%, 500px);
		translate: -50% -50%;
		width: 60vw;
		max-width: 580px;
		padding: 2rem;
		background-color: azure;
		h2{
			margin: .5rem 0;
		}
		p{
			font-size: min(2vw, 1.2rem); 
			max-width: 480px;
			margin: 0 auto;
			padding: 10px;
			line-height: 1.5;
		}
	}
}

/*
CAMPAIGNSEQ
*/
.campaignSec{
	width: 95%;
	max-width: 1400px;
	height: 90vh;
	/*
	position: relative;
	z-index: -1;
	*/
	margin: 0 auto;
	box-sizing: border-box;
	.campaign_content{
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-rows: 10% 55% 10% 25%;
		grid-template-columns: 60% 3% 37%;
		border: 2px solid rgba(255, 255, 255, .6);
		background-color: rgba(255, 255, 255, .7);
		opacity: .9; 
		.camp1{
			grid-row: 1 / 2;
			grid-column: 1 / 2;
			font-size: 2rem;
			align-self: center;
		}
		.camp2{
			grid-row: 2 / 5;
			grid-column: 1 / 2;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.camp2_textContent{
				position: relative;
				top: -17.5%;
				left: 57.5%;
				width: 40%;
				height: 12.5%;
				display: block;
				border-radius: 50px;
				background-image: linear-gradient(165deg, rgba(250,250,250,.9) 10%,
				rgba(180,180,180,.9) 77%,
				rgba(120,120,120,.95) 90%,
				rgba(170,170,170,.95) 100%);
				.camp2_text{
				position: absolute;
				top: 51%;
				left: 50%;
				width: 100%;
				height: auto;
				font-size: min(3vw, 2rem);
				translate: -50% -50%;
				}
			}
		}
		.camp3{
			grid-row: 1 / 2;
			grid-column: 3 / 4;
			font-size: 1.75rem;
			align-self: center;
		}
		.camp4{
			grid-row: 2 / 3;
			grid-column: 3 / 4;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.camp4_textContent{
				position: relative;
				top: -17.5%;
				left: 57.5%;
				width: 40%;
				height: 13%;
				display: block;
				border-radius: 50px;
				background-image: linear-gradient(165deg, rgba(250,250,250,.9) 10%,
				rgba(180,180,180,.9) 77%,
				rgba(120,120,120,.95) 90%,
				rgba(170,170,170,.95) 100%);
				.camp4_text{
				position: absolute;
				top: 51%;
				left: 50%;
				width: 100%;
				height: auto;
				font-size: min(2vw, 1rem);
				translate: -50% -50%;
				}
			}
		}
		.camp5{
			grid-row: 3 / 4;
			grid-column: 3 / 4;
			font-size: 1.5rem;
			align-self: center;
		}
		.camp6{
			grid-row: 4 / 5;
			grid-column: 3 / 4;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.camp6_textContent{
				position: relative;
				top: -22%;
				left: 77.5%;
				width: 40%;
				height: 30%;
				display: block;
				translate: -50% -50%;
				border-radius: 50px;
				background-image: linear-gradient(165deg, rgba(250,250,250,.9) 10%,
				rgba(180,180,180,.9) 77%,
				rgba(120,120,120,.95) 90%,
				rgba(170,170,170,.95) 100%);
				.camp6_text{
				position: absolute;
				top: 51%;
				left: 50%;
				width: 100%;
				height: auto;
				font-size: min(2vw, 1rem);
				translate: -50% -50%;
				}
			}
		}
	}
	:is(.camp1,.camp3,.camp5) p{
		margin-top: 1rem;
	}
	:is(.camp2,.camp4,.camp6) img{
		width: 100%;
		height: 100%;
		opacity: 1;
	}
}

/*
FAVORITESEQ
*/
.favoriteSec{
	/*
	position: relative;
	z-index: -1;
	*/
	background-color: azure;
	margin: 15rem 0 15rem;
	padding: 3rem 0;
	.mainImage{
		width: 50%;
		margin: 0 auto 1rem;
		img{
			width: 100%;
			margin: 2rem 0 10px;
			object-fit: cover;
			aspect-ratio: 16 / 9;
		}
		.main_caption{
			font-size: min(6vw,2rem);
			margin: .5rem 0 0;
			color: transparent;
			background: linear-gradient(180deg, rgba(200,200,255,.6) 0%, rgba(180,180,255,.7) 20%, rgba(170,170,255,.7) 40%, rgba(140,140,255,.8) 65%, rgba(100,100,255,.9) 100%) text;
		}
	}
	.subImage{
		.subImageList{
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
			width: 60%;
			margin: 0 auto;
			li{
				display: inherit;
				width: 26%;
				margin: 10px;
			}
			img{
				display: inherit;
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
			}
		}
	}
}

/*
SEARCHSEQ
*/
.searchSec{
	background-color: azure;
	margin: 10rem 0 15rem;
	padding: 3rem 0;
	.search_content{
		display: flex;
		justify-content: center;
		background-color: lightcyan;
		margin-top: 2rem;
		padding: 1.5rem 0;
	}
}
.area_search,
.theme_search,
.play_search
{
	display: inherit;
	width: 30%;
	max-width: 250px;
	height: 650px;
	margin: 1rem;
	border-radius: 10px;
	box-shadow: 0 2px 7px 1px #07D;
	flex-direction: column;
	background-color: #FFF;
	h3{
		font-size: min(3.5vw, 25px);
	}
}
:is(.area_search,.theme_search,.play_search) label
{
	font-size: min(2vw, 20px);
	margin: 4px 0;
	padding: .5rem 0;
}
.area_search label .area_check,
.theme_search label .theme_check,
.play_search label .play_check{
	block-size: 1rem;
	inline-size: 1rem;
	margin: 0 .5rem 4px 0;
}
.area_search .area_searchBtnContent,
.theme_search .theme_searchBtnContent,
.play_search .play_searchBtnContent{
	width: 100%;
	height: 100%;
}
.area_search #area_searchBtn,
.theme_search #theme_searchBtn,
.play_search #play_searchBtn{
	position: relative;
	top: 30px;
	width: min(15vw, 120px);
	height: 40px;
	border-radius: 5px;
	box-shadow: 3px 3px 5px 2px #333;
}
.area_search #area_searchBtn:hover,
.theme_search #theme_searchBtn:hover,
.play_search #play_searchBtn:hover{
	background-color: #DDF;
	translate: 2px 5px;
	transition: 800ms;
}
.push_searchBtn{
	font-size: min(3vw, 1rem);
}
/*
check用class
*/
.checkOn{
	color: red;
	transition: 500ms;
}

/*
FOOTSEQ
*/
.footerText{
	position: relative;
	width: min(100%, 550px);
	height: 550px;
	z-index: -1;
	margin: 0 auto 10rem;
	background-color: azure;
	h2{
		padding: 3.5rem 0 1rem;
	}
	address{
		position: absolute;
		top: 60%;
		left: 50%;
		translate: -50% -50%;
		width: 25rem;
		line-height: 1.2;
	}
	.incName{
		font-size: min(7vw, 2.5rem);
	}
	.incPoscode{
		font-size: min(6vw, 2rem);
	}
	.incAddress{
		font-size: min(6vw, 2rem);
	}
	.incPhone{
		font-size: min(7vw,2rem);
		letter-spacing: .05rem;
	}
	.incEmail{
	font-size: min(7vw,2rem);
	}
}
/*
FOOTERNAV
*/
.footerNav{
	display: flex;
	justify-content: space-evenly;
	margin: 15rem 0 10rem;
	a{
		display: inherit;
		width: 22%;
		height: 60px;
		border-radius: 5px;
		background-color: rgba(250, 250, 250, .9);
		cursor: pointer;
		p{
			display: inherit;
			align-self: center;
			margin: 0 auto;
			font-size: min(4vw, 1.5rem);
		}
	}
}

@media (max-width: 768px){
html{
	width: 100%;
}
.menu_bar #menu_open{
	top: 10px;
	right: 10px;
}
.pageTopBtn{
	right: 20px;
	bottom: 20px;
}
/*
@MEDIA CONCEPTSEQ
*/
.conceptSec{
	img{
		max-height: 30rem;
	}
	.conceptText{
		padding: .75rem;	
		p{ 
			max-width: 90%;
			margin-bottom: 1rem;
			padding: 0;
			line-height: 2;
		}
	}
}
/*
@MEDIA CAMPAINGNSEQ
*/
.campaignSec{
	width: 100%;
	height: auto;
	.campaign_content{
		display: block;
		.camp2{
			img{
				aspect-ratio: 16 / 9;
			}
			.camp2_textContent{
				height: max(30px, 4.5vw);
				top: -40px;
				left: 57.5%;
			}
		}
		.camp4{
			img{
				aspect-ratio: 16 / 9;
			}
		.camp4_textContent{
				height: max(30px, 4.5vw);
				top: -40px;
				left: 57.5%;
				.camp4_text{
					font-size: 3vw;
				}
			}
		}
		.camp6{
			img{
				aspect-ratio: 16 / 9;
			}
		.camp6_textContent{
			height: max(30px, 4.5vw);
			top: -23px;
			.camp6_text{
				font-size: 3vw;
				}
			}
		}
		:is(.camp1,.camp3,.camp5) p{
			padding: .75rem 0;
		}
	}
}
/*
@MEDIA FAVORITESEQ
*/
.favoriteSec{
	.mainImage{
		width: 80%;
	}
	.subImage .subImageList{
		width: 100%;
	}
} 
/*
@MEDIA FOOTSEQ
*/
.footSec{
	height: 450px;
	margin-bottom: 10rem;
	.footerText{
		max-height: 450px;
		address{
			top: 60%;
		}
	}
	.footerNav{
		flex-wrap: wrap;
		margin: 7rem 0 0;
		padding-bottom: 5rem;
		a{
			width: 40%;
			height: 90px;
			margin-bottom: 2rem;
		}
	}
}
}