@charset "utf-8";
/* common */
body{
	color: #180428;
	background-color: #ffffff;
	font-size: min(4.1vw, .15rem);
}

a:link {color: #180428;text-decoration: none;}
a:visited {color: #180428;text-decoration: none;}
a:hover{text-decoration: none; color: #9C22CC; transition: all .3s ease-out;}

.contents{
	position: relative;
	opacity: 0;
}
.contDisp{animation: fadeIn .5s ease-out .2s 1 normal forwards;}
@keyframes fadeIn {
	0%{opacity: 0;}
	100% { opacity: 1;}
}
.contentsS{
	position: relative;
	opacity: 0;
	transform: translateY(30px);
}
.contDispS{animation: fadeSlide .5s ease .4s 1 normal forwards;}
@keyframes fadeSlide {
	0%{opacity: 0;transform: translateY(30px);}
	100% { opacity: 1;transform: translateY(0);}
}

/* navigation */
#menu{
	position: fixed;
	top:0;
	left: 0;
	display: block;
	width: 100%;
	height: 44px;
	z-index: 2600;
	background-color: #ffffff;
}
#menu .totop{
	position: absolute;
	top:3px;
	left: 50%;
	transform: translateX(-50%);
	width: 38px;
	height: 38px;
	cursor: pointer;
}
.btn_menu .menu, .btn_menu .close{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: 3px;
	width: 38px;
	height: 38px;
	opacity: 0;
	cursor: pointer;
}
.btn_menu .menu{z-index: 2602;}
.btn_menu .close{z-index: 2601;}
.btn_menu.disp{animation: fadeInM .2s  ease-in 0s 1 normal forwards;}
.btn_menu .menu.disp{animation: fadeInM .2s  ease-in 0s 1 normal forwards;}
.btn_menu .close.disp{animation: fadeInM .2s  ease-in 0s 1 normal forwards;z-index: 2603;}
@keyframes fadeInM {
	0%{opacity: 0;}
	100% { opacity: 1;}
}
nav{
	position: fixed;
	top:0;
	left: 0;
	padding: 0;
	height: 100vh;
	height: 100lvh;
	width: 100%;
	background-color: rgba(24,4,40,0.97);
	display: none;
	overflow: hidden;
	z-index: 2500;
}
nav .navWrap{
	position: absolute;
	top:0;
	left:0;
	width: calc(100% + 20px);
	height: 100%;
	overflow-y: auto;
}
nav ul{
	position: absolute;
	top:50%;
	left: calc(50% - 10px);
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 345px;
}
nav ul li{
	position: relative;
	margin: 0 auto 40px auto;
}
nav ul li a{display: block;}

/* modal */
.opwin{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	display: none;
	z-index: 2800;
	overflow-y: auto;
	background-color: rgba(59,39,22,0.665);
}
.close_win {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
	overflow: hidden;
 }
.btn_win{
	position: absolute;
	top:-55px;
	right: -20px;
	display: block;
	width: 65px;
	height: 65px;
	background-image: url("../img/close.png");
	background-position: 50% 50%;
	background-size: 60% auto;
	background-repeat:no-repeat;
}
.modal{
	position: absolute;
	top:50%;
	left:50%;
	width: calc(100% - 20px);
	max-width: 620px;
	transform: translate(-50%, -50%);
}
.modal.topM{top: 30px;transform: translate(-50%, 0);padding-bottom: 30px;}

.wave{
	position: relative;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100% 100%;
	width: 100%;
	height: 40px;
}
.wave.down{transform: scale(1, -1);}
.wave{background-image: url("../img/waves.svg");}
.wave.purple{background-image: url("../img/waves_purple.svg");}
.wave.yellow{background-image: url("../img/waves_yellow.svg");}

h2{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 560px;
}

/* ヘッダー */
header {
	position: relative;
	margin: 44px auto 0 auto;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	width: 100%;
	height:0;
	padding-top: 117.65625%;
}

/* catch */
#catch  {
	position: relative;
	margin: 0 auto;
	padding: 30px 0 0 0;
	background-color: #180428;
}
#catch .catchTxt{
	position: relative;
	margin: 0 auto 30px auto;
	width: calc(100% - 60px);
	max-width: 600px;
	padding: 10px;
	border-radius: 15px;
	background-image:   url("../img/bg_catch01.png"), url("../img/bg_catch.jpg");
	background-position: 0 0, 50% 50%;
	background-size: auto 100%, 150px auto;
	background-repeat: no-repeat, repeat;
}
#catch .catchTxt p{
	position: relative;
	margin: 0 0 0 auto;
	width: 68%;
	line-height: 1.8em;
	paint-order: stroke;
	color: #ffffff;
	text-stroke: 4px #7f6bb9;
	-webkit-text-stroke: #7f6bb9 4px;
	font-size: 96%;
}
#catch .bg{
	position: relative;
	margin: 0 auto;
	background-image: url("../img/bg_story.png");
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
	width: 100%;
	height:0;
	padding-top: 20.625%;
}

/* about */
#about {
	position: relative;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
#about h2{padding-bottom: 20px;}
#about p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	line-height: 1.8em;
}
#about p.name{padding-top: 1em; padding-bottom: 40px; text-align: right;}

/* story */
#story{
	position: relative;
	margin: 0 auto;
	background-color: #3c126c;
}
#story h2{padding-bottom: 20px;}
#story p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	text-align: center;
	color: #ffffff;
	line-height: 2em;
	padding-bottom:20px;
}

/* cast */
#cast{
	position: relative;
	margin: 0 auto;
	padding-bottom: 30px;
	background-color: #3c126c;
	background-image:   url("../img/bg_cast01.png"), url("../img/bg_cast.jpg");
	background-position: 0 0, 50% 50%;
	background-size: auto 50px, 50px auto;
	background-repeat: repeat, repeat;
}
#cast h2{margin: -39px auto 0 auto;}
#cast dl{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	width: calc(100% - 40px);
	max-width: 960px;
	border-radius: 15px;
	background-color: #ffffff;
	gap: 10px 1em;
}
#cast dl dt, #cast dl dd{
	position: relative;
	margin: 0;
	width: calc(50% - 0.5em);
}
#cast dl dt.margin, #cast dl dd.margin{margin: 1em 0 0 0;}
#cast dl dt::after{
	position: absolute;
	right: -1em;
	top:0;
	content: '：';
}
#cast dl dt{text-align: right;}
#cast ruby{margin: -0.5em auto 0 auto;}

/* music */
#music{
	position: relative;
	margin: 0 auto;
	padding: 30px 0;
	background-color: #fff1c0;
}
#music .btnArea{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 960px;
	padding: 25px 0 20px 0;
	border-top: solid 1px #180428;
	border-bottom: solid 1px #180428;
}
#music .btnArea .title{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 560px;
}
#music .btnArea .soon{
	position: relative;
	margin: 20px auto 0 auto;
	width: 100%;
	max-width: 560px;
}
#music .btnArea .play{
	position: absolute;
	bottom: 5px;
	right: 0;
	width: 13%;
	max-width: 63px;
}

/* gmas */
#gmas{
	position: relative;
	margin:  0 auto;
	width: 100%;
	background-color: #5C2D00;
}
#gmas img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	body{font-size: .18em;}
	
	/* navigation */
	#menu{height: 60px;}
	#menu .totop{
		top:5px;
		width: 50px;
		height: 50px;
	}
	.btn_menu .menu, .btn_menu .close{
		right: 5px;
		width: 50px;
		height: 50px;
	}

	/* modal */
	.btn_win{
		width: 70px;
		height: 70px;
	}

	.wave{height: 60px;}
	
	h2{max-width: 960px;}
	h2 img{
		position: relative;
		margin: 0 auto;
		width: 100%;
		max-width: 560px;
	}

	/* ヘッダー */
	header {margin: 60px auto 0 auto;}
	header #keyvisual {
		background-image: url("../img/main_pc.jpg");
		padding-top: 45.8333%;
	}

	/* catch */
	#catch  {padding: 50px 0 0 0;}
	#catch .catchTxt{
		margin: 0 auto 40px auto;
		padding: 40px 80px;
		border-radius: 20px;
		background-image:   url("../img/bg_catch01.png"), url("../img/bg_catch.jpg");
		background-size: auto 110%, 170px auto;
	}
	#catch .catchTxt p{
		margin: 0 auto;
		width: 90%;
		line-height: 1.8em;
		font-size: 100%;
		text-align: center;
	}
	#catch .bg{
		background-size: contain;
		padding-top: 132px;
	}
	#catch .bg::after{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		display: block;
		background: linear-gradient(0deg,#3c126c 33%, transparent 33%)
	}
	
	/* about */
	#about h2{padding-top: 30px; padding-bottom: 50px;}
	#about p.name{padding-top: 2em; padding-bottom: 30px;}
	
	/* story */
	#story h2{padding-bottom: 30px;}
	#story p{line-height: 2.2em;padding-bottom: 80px;}
	#story ruby[data-ruby]::before{top:.7em;}
	
	/* cast */
	#cast{
		background-size: auto 60px, 50px auto;
	}
	#cast h2{margin: 0 auto;}
	#cast dl{
		margin: 0 auto 50px auto;
		padding: 50px 0;
		border-radius: 20px;
		gap: 1em 1em;
	}
	#cast dl dt.margin, #cast dl dd.margin{margin: 1.5em 0 0 0;}
	#cast ruby{margin: 0 auto;}

	/* music */
	#music{padding: 60px 0;}
	#music .btnArea{padding: 35px 0 30px 0;}
	#music .btnArea .soon{margin: 30px auto 0 auto;}
	#music .btnArea .play{
		bottom: 10px;
		right: 10%;
	}
	
}


@media screen and (max-height: 450px) and (max-width: 640px)  {
	nav ul{
		top:50px;
		transform: translateX(-50%);
	}
	.modal{
		top:50px;
		transform: translateX(-50%);
	}
}
@media screen and (max-height: 350px) and (min-width: 641px)  {
	nav ul{
		top:70px;
		transform: translateX(-50%);
	}
	.modal{
		top:70px;
		transform: translateX(-50%);
	}
}