@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap')

/* CSS Document */
article, aside, section, nav, header, footer { display: block; }
* { margin: 0; padding: 0; font-size: 100%;}
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
	position: relative;
	z-index: 0;
	color: #333;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: 700;
	line-height: 1.1;
	background-color: #fff;
	background-image: url(images/bg_1.png);
}
img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #4d7272;
	text-decoration: none;
	transition: .2s;
	&:hover {
		color: #d0b968;
	}
	img {
		transition: .2s;
	}
	&:hover:not(.roll) img {
		opacity: .5;
		transition: .2s;
	}
}
a.btn {
	display: inline-block;
	min-width: min(20vw, 8rem);
	padding: max(0.5vw, 5px);
	color: #fff;
	font-weight: 700;
	text-align: center;
	background-color: #4d7272;
	&:hover {
		color: #fff;
		background-color: #d0b968;
	}
}

.nolink {
    color: #000;
    pointer-events: none;
    text-decoration: none;
}

/*///////////////////////////////////////////////////////////////
	common class
/////////////////////////////////////////////////////////////////*/
/* mobile display none */
.mdn { display: none; }
.mdnbr br { display: none; } 
br.nbr { display: none; }
/* mobile display visible */
.mdv { display: block; }
.mdvbr br { display: inline; }

.bg_1 {
	background-image: url(images/bg_1.png);
}
.bg_2 {
	background-color: #ffcad8;
	background-image: url(images/bg_2.jpg);
}
.bg_3 {
	background-image: url(images/bg_3.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg_4 {
	background-color: #ffcad8;
	background-image: url(images/bg_2.jpg);
}


.t_min { font-family: Century, 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; }

.t_sm {
	display: inline-block;
	font-size: 80%;
	line-height: 1.2;
}
.t_bold {
	font-weight: 700;
}
.t_strong {
	font-weight: 900;
}
.t_blc span:not(.t_pink) {
	display: inline-block;
}

.t_red { color: #cc0000; }
.t_pink { color: #e5429e; }
.t_blue { color: #4f7eae; }
.t_purple { color: #d348ec; }


h1 {
	display: flex;
	align-items: center;
	gap: 1vw;
	position: relative;
	width: 100%;
/*	margin-bottom: 80px;*/
	margin-bottom: min(10vw, 50px);
	padding-left: 2vw;
	color: #d0b968;
	font-size: clamp(3rem, 1.785rem + 6.08vw, 9rem);
	font-weight: 600;
	font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
	line-height: 1;
	
	&::before {
		position: absolute;
		top: min(16vw, 60px);
		left: 0;
		content: attr(data-h);
		display: block;
		width: min(27vw, 13rem);
		padding: 0.2vw 1vw;
		font-size: clamp(0.7rem, 0.599rem + 0.51vw, 1.2rem);
		font-weight: 400;
		text-align: center;
		color: #fff;
		background-color: #7bbdcb;
	}
	&::after {
		content: "";
		display: block;
		flex: 1;
		height: 17px;
		margin-top: 3vw;
		background-image: url(images/line_3.png);
		background-repeat: no-repeat;
		background-position: top left;
	}
}
h2 {
	position: relative;
	margin: 3vw 0;
	color: #d0b968;
	font-size: clamp(1.8rem, 1.557rem + 1.22vw, 3rem);
	font-weight: 800;
	text-align: center;
	&::after {
		content: attr(data-hs);
		display: block;
		margin-top: 0.5vw;
		font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
		color: #878377;
	}
}

/*
h3 {
	display: flex;
	flex-direction: column;
	gap: 0.5vw 1vw;
	margin-bottom: 1.5vw;
	padding: min(3vw, 20px);
	background-color: #ff1d58;
	background-image: url(images/h_bg_1.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	
	> p {
		color: #fff;
		font-size: clamp(1.1rem, 0.756rem + 1.72vw, 2.8rem);
		text-shadow: 0 0 1px #ff1d58, 0 0 2px #ff1d58, 0 0 3px #ff1d58, 0 0 4px #ff1d58, 0 0 5px #ff1d58;
	}
	> div {
		display: flex;
		flex-wrap: wrap;
		gap: 1vw;
		
		> span {
			display: inline-block;
			padding: 0.2rem 1rem;
			color: #ff1d58;
			font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
			text-align: center;
			border-radius: 50px;
			background-color: #fff;
			box-shadow: 0 0 3px 3px rgba(255,29,88,0.3);
		}
	}
}
.pro_content_other > h3 {
	background-color: #32415f;
	background-image: url(images/h_bg_2.jpg);
	
	> p {
		text-shadow: 0 0 1px #32415f, 0 0 2px #32415f, 0 0 3px #32415f, 0 0 4px #32415f, 0 0 5px #32415f;
	}
}*/
h4 {
	margin: 0.5vw 0;
	color: #878377;
	
	&::before, &::after {
		content: "▼";
	}
}

.box {
	position: relative;
	z-index: 2;
	width: min(90vw, 1600px);
	margin: min(8vw, 100px) auto;
	padding: min(4vw, 25px) 2vw;
	border: min(0.5vw, 2px) solid #645852;
	background-color: #fff;
	> h3 {
		position: relative;
		width: min(98%, 1000px);
		margin-bottom: 4vw;
		font-size: clamp(1.3rem, 0.753rem + 2.73vw, 4rem);
		font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
		font-weight: 900;
		color: #4f7eae;
		line-height: 1.3;
		text-align: center;
		&::before {
			content: attr(data-ht);
			padding: 0.05rem 1.5rem;
			font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
			font-weight: 400;
			line-height: 1;
			color: #fff;
			background-color: #e5429e;
		}
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: min(3vw, 35px);
			background-image: url(images/teaser/line_1.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
		}
	}
	> .anno {
		margin: 0;
		padding: 0;
		color: #333;
		background-color: #fff;
	}
}

.corner {
	position: relative;
	padding: min(10vw, 80px) 3vw;
}
.corner:has(h2) {
	padding: min(5vw, 50px) 3vw;
	
	> div {
		h3 {
			width: min(100%, 1000px);
			margin: 0 auto min(3vw, 30px);
			padding: 2vw 3vw;
			color: #4f7eae;
			font-size: clamp(1rem, 0.757rem + 1.22vw, 2.2rem);
			font-weight: 800;
			text-align: center;
			border: 2px solid #333;
		}
		
		> h3[data-set]::after {
			content: attr(data-set);
			display: block;
			width: min(25vw, 144px);
			margin: 1vw auto 0;
			padding: 0.3vw;
			color: #fff;
			font-size: clamp(0.7rem, 0.599rem + 0.51vw, 1.2rem);
			background-color: #333;
		}
	}
}
.cor {
	position: absolute;
	width: min(30vw, 215px);
	height: min(30vw, 215px);
}
.cor_tl {
	top: clamp(-16px, -2.2vw, -8px);
	left: clamp(-16px, -2.2vw, -8px);
}
.cor_tr {
	top: clamp(-16px, -2.2vw, -8px);
	right: clamp(-16px, -2.2vw, -8px);
	transform: rotate(90deg)
}
.cor_bl {
	bottom: clamp(-16px, -2.2vw, -8px);
	left: clamp(-16px, -2.2vw, -8px);
	transform: rotate(-90deg)
}
.cor_br {
	bottom: clamp(-16px, -2.2vw, -8px);
	right: clamp(-16px, -2.2vw, -8px);
	transform: rotate(180deg)
}
.cor2 {
	position: absolute;
	width: min(20vw, 113px);
	height: min(20vw, 113px);
}
.cor2_tl {
	top: 5px;
	left: 5px;
}
.cor2_tr {
	top: 5px;
	right: 5px;
	transform: rotate(90deg)
}
.cor2_bl {
	bottom: 5px;
	left: 5px;
	transform: rotate(-90deg)
}
.cor2_br {
	bottom: 5px;
	right: 5px;
	transform: rotate(180deg)
}
.cor3 {
	position: absolute;
/*	width: min(30vw, 215px);
	height: min(30vw, 215px);*/
	width: clamp(96px, 15vw, 215px);
	height: clamp(96px, 15vw, 215px);
}
.cor3_tl {
	top: 0;
	left: 0;
}
.cor3_tr {
	top: 0;
	right: 0;
	transform: rotate(90deg)
}
.cor3_bl {
	bottom: 0;
	left: 0;
	transform: rotate(-90deg)
}
.cor3_br {
	bottom: 0;
	right: 0;
	transform: rotate(180deg)
}

.line_2 {
	position: relative;
	&::before, &::after {
		position: relative;
		left: 0;
		content: "";
		display: block;
		width: 100%;
		height: min(2vw, 19px);
		background-image: url(images/line_2.png);
		background-repeat: repeat-x;
		background-size: contain;
	}
	&::before {
		top: min(3vw, 20px);
	}
	&::after {
		bottom: min(3vw, 20px);
	}
}

hr {
	display: block;
	border: 0;
	&.line_1 {
		width: 100%;
		height: min(7vw, 60px);
		background-color: #f1e8ec;
		background-image: url(images/bg_4.jpg);
		background-position: bottom left;
	}

	&.bdr_dash {
		width: 100%;
		border-top: min(1vw, 8px) dashed #fff;
	}
	&.hr_tri {
		width: 114px;
		height: 12px;
		margin: min(3vw, 60px) auto;
		background-image: url(images/hr_1.jpg);
		background-repeat: no-repeat;
		background-position: top left;
	}
}

dl:not(.chara_size) {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	gap: 1vw;
	
	> dt {
		display: inline-block;
		width: 100%;
		padding: 0.5rem 0 0;
		color: #333;
		font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
	}
	> dd {
		width: 100%;
		padding: min(1vw, 10px) 0;
		font-size: clamp(1.1rem, 0.918rem + 0.91vw, 2rem);
		font-weight: 900;
		line-height: 1.2;
		
		> dl {
			display: block;
			border: 0;
			> dt {
				padding: 0.2rem 0;
				color: #333;
				text-align: center;
				background-color: #fff;
				border: 2px solid #e5429e;
				border-radius: 30px;
			}
			> dd {
				width: 100%;
				padding: 0.5rem 0;
				font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
			}
		}
		
	}
	.t_sm {
		font-size: clamp(0.9rem, 0.859rem + 0.2vw, 1.1rem);
	}
}

.anno {
	font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
	font-weight: 500;
	line-height: 1.3;
}

.new {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		top: 2%;
		left: 2%;
		z-index: 1;
		display: block;
		width: clamp(8px, 1vw, 15px);
		height: clamp(8px, 1vw, 15px);
		background-color: #ff9900;
		border-radius: 15px;
		border: 2px solid #fff;
		box-sizing: content-box;
		animation: flash 3s ease infinite;
	}
}

/*///////////////////////////////////////////////////////////////
	Menu
/////////////////////////////////////////////////////////////////*/
#globalMenu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: min(2vw, 30px);
	width: 100%;
	height: 100px;
	padding-right: 3vw;
	background-image: url(images/menu_bg.png);
	background-repeat: no-repeat;
	background-position: top right;
	background-attachment: fixed;
	background-size: contain;
	background-color: transparent;
	> a {
/*		display: flex;
		justify-content: center;
		align-items: center;*/
		display: block;
		font-size: clamp(0.7rem, 0.719rem + 0.41vw, 1.2rem);
		transform: translateY(1.3vw);
			text-shadow:
			1px 0px 5px #fff,
			0px 1px 5px #fff,
			1px 1px 5px #fff,
			-1px 0px 5px #fff,
			0px -1px 5px #fff,
			-1px -1px 5px #fff;
	}
	> a.cs {
		color: #eee;
	}
}
.drawer-hamburger {
	background-color: #333 !important; 
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
	background-color: #fff !important;
}
.drawer-open .drawer-hamburger-icon {
  background-color: transparent !important;
}
.drawer-nav { 
	padding: 20px 0;
	background-color: #fff !important; 
}
ul.drawer-menu {
	text-align: center;
	width: 90%;
	margin: 0 auto;
}

ul.drawer-menu li a {
	display: inline-block;
	margin: 3px 0;
	padding: 8px 0;
	font-size: clamp(1.1rem, 1.019rem + 0.41vw, 1.5rem);
	font-weight: 700;
	color: #333;
}
/*///////////////////////////////////////////////////////////////
	TOP
/////////////////////////////////////////////////////////////////*/

#logoLink {
	display: block;
	position: absolute;
	top: 0.3%;
	left: 2%;
	z-index: 101;
    width: clamp(73px, 12vw, 150px);
}
#topMainImg {
	position: relative;
	width: 100%;
	background-color: #57d6e8;
	
	> .mdv > img, > .mdn > img {
		display: block;
		width: min(100%, 2500px);
		margin: 0 auto;
	}
}

#spArea {
	position: absolute;
	top: min(12%, 90px);
	left: 5%;
	display: flex;
	flex-direction: column;
	gap: 1vw;
	
	> div {
		width: min(30vw, 360px);
	}
	
	#countDown img {
		cursor: pointer;
		transition: .2s ease-in-out;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

#topInformation {
	width: 100%;
	padding: 0.1px;
	background-color: #cde7e7;
	background-image: url(images/bg_2.jpg);
	> .news_head {
		width: min(40vw, 348px);
		margin: min(5vw, 40px) auto 0;
	}

}
#news {
	width: min(90vw, 950px);
	height: 100px;
	margin: 0 auto min(3vw, 30px);
	padding: clamp(5px, 2vw, 20px);
	text-align: center;

	.news_inner > div {
	
		+ div {
			margin-top: 0.5rem;
		}
		time {
			width: min(18vw, 7rem);
			padding: 2px 0 1px;
			font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
			font-weight: 400;
			font-style: italic;
			text-align: center;
		}
		
		div {
			flex: 1;
			margin-top: 0.5rem;
			padding-bottom: 0.5rem;
			font-size: clamp(0.8rem, 0.699rem + 0.51vw, 1.3rem);
			font-weight: 600;
			border-bottom: 2px solid #999;
		}
	}
	
	a {
		color: #b0374f;
		
		&:hover {
			color: #32415f;
		}
	}
}
#topTopics {
	position: relative;
	min-height: 250px;
	padding: min(5vw, 15px) 1vw;
	background-color: #fff;
	
	> div:not(.cor2){
		display: flex;
		width: min(90vw, 1700px);
		margin: 3vw auto;
	}
	> div {
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 1vw;
		
		> a {
			display: block;
			width: min(95%, 700px);
		}
		
		> .top_topics_cs {
			display: none;
			align-self: stretch;
			justify-content: center;
			align-items: center;
			width: calc(33% - 1vw);
			color: #999;
			background-color: #eee;
		}
	}
}

#PV {
	display: grid;
	justify-items: center;

	.box {
		width: min(90vw, 1500px);
		margin-bottom: 4vw;
		
		> div:not(.anno) {
			margin-bottom: 0;
		}
		> .video_box {
			width: min(85vw, 1100px);
			margin: 0 auto;
			gap: 0.5vw;
			
			> video {
				width: 100%;
				height: auto;
			}
		}
	}
}

/*///////////////////////////////////////////////////////////////
	STORY
/////////////////////////////////////////////////////////////////*/
#story {
	padding-bottom: 0.1px;

	> div {
		width: min(90%, 820px);
		margin: 5vw auto;
		
		> p {
			font-size: clamp(0.9rem, 0.778rem + 0.61vw, 1.5rem);
			font-weight: 800;
			line-height: 1.6;
			text-shadow:
			1px 0px 5px #fff,
			0px 1px 5px #fff,
			1px 1px 5px #fff,
			-1px 0px 5px #fff,
			0px -1px 5px #fff,
			-1px -1px 5px #fff;
			
			+ p {
				margin-top: min(3rem, 3vw);
			}
			
		}
		
		> p.t_blc > span > span + span {
			margin-top: min(0.8vw, 5px);
		}
		
		> p.t_bdr_pk_bk {
			font-size: clamp(1.1rem, 0.837rem + 1.32vw, 2.4rem);
		}
	}
}
#concept {
	padding: 5vw 5vw 7vw;
	background-image: url(images/bg_5.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	
	#conceptMain {
		position: relative;
		display: grid;
		justify-items: center;
		width: min(90vw, 1300px);
		margin: 0 auto 3vw;
		padding: 5vw;
		border: 3px solid #862f00;
		background-color: #fff;
		box-shadow: min(2vw, 8px) min(2vw, 8px) 0 0 #d4b9c4;
		> div:not(.cor3) {
			display: grid;
			justify-items: center;
			> .mdv {
				width: min(70%, 700px);
			}
			> .mdn {
				width: min(100%, 860px);
			}
		}
		> p {
			width: min(100%, 950px);
			margin-top: min(4vw, 40px);
			font-size: clamp(0.9rem, 0.708rem + 0.96vw, 1.85rem);
			font-weight: 900;
			line-height: 1.5;
		}
	}
	#conceptPoint {
		width: min(90vw, 1300px);
		margin: 0 auto;
		box-shadow: min(2vw, 8px) min(2vw, 8px) 0 0 #d4b9c4;
		.point {
			display: flex;
			flex-direction: column;
			
			> div:first-child {
				padding: min(2vw,15px);
				color: #d0b968;
				font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
				font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
				font-weight: 800;
				text-align: center;
				background-color: #a52e45;
				background: linear-gradient(to bottom, #b0374f, #a52e45);
			}
			> div:last-child {
				padding: min(3vw, 30px);
				background-color: #fcfbf6;
				background: linear-gradient(to bottom, #fff, #f5eeea);
				> div {
					margin-bottom: min(2vw,15px);
					color: #4f7eae;
					font-size: clamp(0.9rem, 0.576rem + 1.62vw, 2.5rem);
					font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
					font-weight: 800;
					text-align: center;
				}
				> p {
					font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
					font-weight: 600;
					line-height: 1.3;
				}
			}
		}
	}
}

/*///////////////////////////////////////////////////////////////
	CHARACTER
/////////////////////////////////////////////////////////////////*/
#character {}
#charaSelect {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: min(3vw, 15px);
	width: 90%;
	margin: 0 auto;
	> span {
		display: flex;
		justify-content: center;
		gap: min(3vw, 15px);
	}
}

.chara_base {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3vw;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
	margin: min(7vw, 60px) 0 3vw;
	font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
	
	.chara_prof {
		position: absolute;
		top: 57vw;
		right: -13vw;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: min(60vw, 373px);
		height: min(60vw, 351px);
		background-image: url(images/character/prof_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		
		dl.chara_size {
			margin-right: min(3vw, 18px);
			color: #fff;
			text-align: center;
			font-weight: 400;
			> dt {
				display: inline-block;
				margin-bottom: min(1vw, 8px);
				padding: 0.2vw;
				min-width: 3rem;
				font-size: clamp(0.6rem, 0.58rem + 0.1vw, 0.7rem);
				background-color: #333;
			}
			> dd {
				margin-bottom: min(1vw, 8px);
				font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
			}
		}
	}
	.chara_img {
		width: min(90vw, 750px);
	}
	.chara_main {
		width: min(100%, 950px);
		.chara_text {
			position: relative;
			background-color: #878377;
			&::before, &::after {
				position: relative;
				left: 0;
				content: "";
				display: block;
				width: 100%;
				height: min(2vw, 19px);
				background-image: url(images/line_2_2.png);
				background-repeat: repeat-x;
				background-size: contain;
			}
			&::before {
				top: min(3vw, 20px);
			}
			&::after {
				bottom: min(3vw, 20px);
			}
			.chara_name {
				width: min(90%, 630px);
				margin: min(8vw, 80px) auto min(5vw, 30px);
				&::after {
					content: attr(data-name);
					display: block;
					margin-top: 0.5rem;
					font-size: clamp(0.8rem, 0.719rem + 0.41vw, 1.2rem);
					color: #fff;
				}
			}
			> p {
				width: min(90%, 630px);
				margin: 0 auto min(8vw, 100px);
				color: #fff;
				font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
				font-weight: 400;
				line-height: 1.6;
			}
		}
		.chara_btn_area {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: min(3vw, 30px);
			width: min(95%, 700px);
			margin: min(3vw, 30px) auto;
			padding: 0 2vw;
			.chara_cv {
				display: inline-block;
				padding: 0.8vw 2vw;
				color: #fff;
				font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
				border-radius: 50px;
				background-color: #d0b968;
			}
			.chara_cos {
				display: flex;
				gap: 1vw;
			}
			.sample_voice {
				display: flex;
				flex-direction: column;
				gap: 0.5vw;
				> div {
					display: flex;
					justify-content: center;
					gap: 0.5vw;
					> div:hover {
						opacity: 0.5;
						transition: 0.2s ease-in-out;
						cursor: pointer;
					}
				}
			}
		}
	}
}
#kikutaro .chara_name::before {
	content: "SAKAMOTO　KIKUTARO";
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2rem 1rem;
	color: #fff;
	font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
	font-weight: 400;
	background-color: #333;
}



/*///////////////////////////////////////////////////////////////
	SAMPLE
/////////////////////////////////////////////////////////////////*/
#sample > section {
}

.sample_base {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5vw 2vw;
	width: min(80vw, 1400px);
	margin: 20px auto 20px;
}
.sample_base .mimg,
.sample_base .mmv {
	position: relative;
	width: calc(50% - 2vw);
	max-width: 300px;
	border: 2px solid #5e4e56;
}
.sample_base > a > img {
	display: block;
}
.sample_base > a > .thumb_notes {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1vw;
	width: 100%;
	height: min(22%, 40px);
	padding: 0 min(1vw, 10px);
	background-color: #fff;
}
.sample_base > a.st > .thumb_notes::after {
	content: "サンプルテキストあり";
	color: #5e4e56;
	font-size: clamp(0.5rem, 0.419rem + 0.41vw, 0.9rem);
	font-weight: 700;
}
.sample_base > a > .thumb_notes > span.snum {
	display: block;
	color: #e15699;
	font-size: clamp(0.7rem, 0.538rem + 0.81vw, 1.5rem);
	font-weight: 700;
	line-height: 1;
}

#anime {
	padding: 0 3vw min(5vw, 50px);
	> h2 {
		margin: 0 0 3vw;
	}
}

/*///////////////////////////////////////////////////////////////
	DOWNLOAD
/////////////////////////////////////////////////////////////////*/
#download {
	padding-bottom: 3vw;
	
	> section {
		padding: 0 1vw;
		font-size: clamp(0.8rem, 0.597rem + 1.01vw, 1.8rem);
		line-height: 1.6;
		
		> div {
			display: grid;
			justify-items: center;
			
			> section {
				width: min(90vw, 900px);
				
				.trial_dl_link {
					margin-bottom: 1vw;
					
					a {
						display: block;
						padding: min(2vw, 8px);
						color: #007cf0;
						font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
						border-color: #007cf0;
						border-width: min(0.8vw, 3px);
						border-style: solid;
						background-color: #fff;
						
						&:hover {
							color: #fff;
							background-color: #007cf0;
							transition: .2s ease-in-out;
						}
						
						+ a {
							margin-top: min(2vw, 8px);
						}
					}
				}
			}
		}
	}
}

/*///////////////////////////////////////////////////////////////
	PRODUCT
/////////////////////////////////////////////////////////////////*/
#product {
	> section {
		display: grid;
		justify-items: center;
		
		> section, > div:not(.cor):not(.cor2) {
			width: min(85%, 1300px);
			> p {
				margin-top: min(3vw, 30px);
				font-size: clamp(0.8rem, 0.516rem + 1.42vw, 2.2rem);
				font-weight: 900;
				line-height: 1.6;
			}
			> dl {
				margin: 2vw 0;
			}
			h3 + dl {
				margin-top: min(3vw, 30px);
			}
		}
		> p {
			width: min(90%, 1000px);
			margin-bottom: 3vw;
			font-size: clamp(0.8rem, 0.557rem + 1.22vw, 2rem);
			line-height: 1.3;
		}
	}
	> section.corner {
		> div:has(h3){
			display: grid;
			justify-items: center;
			
			> * {
				max-width: 1000px;
				margin: 0 auto;
			}
		}
		& ~ section.corner:not(#spec) {
			margin-top: 3vw;
		}
		&:last-child {
			margin-bottom: 3vw;
		}
	}
	
	> section.box > div:not(.cor):not(.cor2) {
		width: 100%;
	}
	a.btn {
		font-size: clamp(0.8rem, 0.557rem + 1.22vw, 2rem);
	}
}
#outline {
	padding-bottom: min(50vw, 50px);
}
#spec {
	padding: 0 3vw min(5vw, 50px);
}
.spec_list .sub {
	display: inline-block;
	font-size: clamp(0.7rem, 0.538rem + 0.81vw, 1.5rem);
}
	
div.anno {
	width: min(90vw, 1300px);
	margin: 2vw auto;
	padding: min(2vw, 15px);
	color: #fff;
	background-color: #878377;
	
	> a {
		color: #ffff00;
		&:hover {
			color: #d0b968;
		}
	}
}
.spec_list {
	display: flex;
	flex-direction: column;
	gap: 0 1vw;
}

.pro_content {
/*	margin-top: 4vw;*/
	
	> div {
		display: flex;
		flex-direction: column;
		gap: min(3vw, 30px);
	}
	.content_outline {
		> p {
			margin-bottom: 2vw;
			padding: 0 1vw;
			font-size: clamp(0.8rem, 0.557rem + 1.22vw, 2rem);
			font-weight: 900;
			line-height: 1.6;
		}
		
		> dl {
			margin-left: 2vw;
		}
	}
	.content_img {
		display: grid;
		justify-items: center;
		
		> figure {
			max-width: 80vw;
		}
		
		> div {
			margin-top: 1vw;
			font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
			text-align: center;
			line-height: 1.3;
			
			> p > span {
				margin-left: 0.5rem;
			}
		}
	}
	
	.anno {
		width: 100%;
		margin-top: min(3vw, 15px);
	}
}

#themeSong {
	
	h5 {
		margin: 0.5vw 0;
		font-weight: 800;
		color: #ff1d58;
		font-size: clamp(1.1rem, 0.958rem + 0.71vw, 1.8rem);
	}
	
	.audio_box {
		display: flex;
		gap: 1vw;
		width: min(85vw, 1000px);
		margin: 0 auto;
		padding: 10px;
		border: 3px solid #ccc;
		border-radius: 5px;
		
		figure {
			width: 20%;
			max-width: 150px;
			
			img {
				display: block;
			}
		}
		
		div + p {
			font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
			background-image:
		    repeating-linear-gradient(
		      45deg, #eee, #eee 10%,
		      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
		      background-size: 5px 5px;
		   );
		}
		
		.t_blc > span {
			margin-right: 1rem;
		}
	}
	.player_box {
		width: 95%;
	}

}

input#lyric_btn {
	display: none;
	
	+ label {
		display: block;
		height: 1.5rem;
		line-height: 1.5rem;
		margin-top: 8px;
		padding: 0.1rem 0.5rem;
		font-size: 0;
		color: #007cf0;
		border: 2px solid #007cf0;
		background-color: #fff;
		cursor: pointer;
		
		&::before {
			content: "歌詞を表示";
			font-size: 0.7rem;
			line-height: 0.7rem;
		}
		+ p {
			max-width: 550px;
			height: 0;
			padding: 0 5px;
			font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
			white-space: pre;
			white-space: pre-line;
			overflow: hidden;
			opacity: 0;
			transition: .1s;
			background-color: #fff;
		}
		
	}
	
	&:checked + label {
		&::before {
			content: "歌詞を非表示";
		}
		+ p {
			height: auto;
			padding: 5px;
			opacity: 1;
			transition: .3s;
		}
	}
	
	+ label:hover, &:checked + label {
		color: #fff;
		background-color: #007cf0;
	}


}

#shopBonus, #oriBonus {

	> div:not(.anno) {	
/*		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		margin-top: 3vw;
		margin-bottom: 3vw;*/
		gap: 5vw 2vw;
		
		> section {
			width: min(75vw, 500px);
			text-align: center;
		}
	}
	
	.shop_name {
		width: 80%;
		margin: 0 auto min(2vw, 30px);
		padding: min(2vw, 10px) 1rem;
		color: #fff;
		font-size: clamp(1.1rem, 0.918rem + 0.91vw, 2rem);
		background-color: #ff00ba;
		box-shadow: 4px 4px 0 0 #ccc;

		&::after {
			content: "様";
			margin-left: 1rem;
			font-size: clamp(0.7rem, 0.578rem + 0.61vw, 1.3rem);
			font-weight: 500;
		}
	}
	
	.shop_img {
		width: min(100%, 500px);
		margin: 0 auto;
	}
	
	.shop_item {
		margin: min(3vw, 20px) 0;
		font-size: clamp(1.1rem, 0.918rem + 0.91vw, 2rem);
	}
	.shop_item_text {
		padding: min(3vw, 20px) 0.5vw;
		color: #32415f;
		font-size: clamp(0.8rem, 0.699rem + 0.51vw, 1.3rem);
		font-weight: 500;
		line-height: 1.3;
		border-width: 2px 0;
		border-color: #32415f;
		border-style: dotted;
	}
	
	.shop_link {
		margin-top: 1vw;
	
		h4 {
			margin: min(3vw, 20px) 0 min(2vw, 8px);
			font-size: clamp(0.8rem, 0.699rem + 0.51vw, 1.3rem);
		}
	
		&:has(a.site_top_link) > *:nth-child(n+2) {
			display: none;
		}
	}	
}

#dlStore {
	dl {
		margin-left: 0;
	}
	
	a {
		margin-top: 1vw;
	}
}
#dlLimitedBonus {
	width: 80%;
	margin: 0 auto 0.5vw;
	padding: 1vw;
	font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
	
	> b {
		display: inline-block;
		margin-bottom: min(1vw, 8px);
	}
}


/*///////////////////////////////////////////////////////////////
	Special
/////////////////////////////////////////////////////////////////*/
#special {
	display: grid;
	justify-items: center;
	
	> section, > div {
		width: min(90vw, 1500px);
	}
	
	> .pro_content > div {
		display: grid;
		justify-items: center;
		margin-bottom: 1vw;
	}
	
	#spCountDown > div {
		display: flex;
		justify-content: center;
	}
	.voice_play_btn {
		position: relative;
		display: flex;
		gap: 0.5vw;
		width: min(100%, 300px);
		padding: max(0.8vw, 8px);
		border: 2px solid #999;
		border-radius: 5px;
		cursor: pointer;
		transition: .2s ease-in-out;
		
		&:hover {
			opacity: 0.5;
		}
		
		&::before {
			content: "";
			display: block;
			width: 13px;
			height: 15px;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
			background-color: #333;
		}
	}
	
}

/*///////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////*/

#footer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: max(1vw, 8px);
	width: 100%;
	margin-top: 1vw;
	padding: max(0.7vw, 10px) 1vw;
	background-color: #333;
	
	#footerSNS {
		display: flex;
		align-items: center;
		gap: max(0.5vw, 5px);
	}
	
	footer {
		color: #fff;
		font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
		font-weight: 400;
	}
}

@media(667px <= width < 960px){
/*	Tablet -- 667px ~ 959px	*/

	h1 {
		&::before {
			top: 11vw;
			width: 20vw;
		}
	}
	
	dl:not(.chara_size) {
		flex-direction: row;
		> dt {
			width: min(16vw, 9rem);
			padding: 0.2rem 0.5rem;
			text-align: right;
		}
		> dd {
			width: calc(100% - min(16vw, 9rem) - 1vw);
		}
	}
	/*/////////// ■TOP■ ///////////*/
	#topTopics {
		> div {
			flex-direction: row;
			
			> a {
				width: calc(50% - 1vw);
			}
		}
	}
	/*/////////// ■CHARACTER■ ///////////*/
	#charaSelect {
		flex-direction: row;
		> span {
			width: auto;
			margin: 0;
		}
	}
	.chara_base {
		flex-direction: row;
		align-items: flex-start;
		min-height: min(70vw, 670px);
		
		.chara_prof {
			top: 35vw;
			right: -8vw;
			width: min(35vw, 373px);
			height: min(35vw, 351px);
		}
		
		.chara_img {
			order: 2;
			width: 45%;
		}
		.chara_main {
			order: 1;
			width: 55%;
			
			.sample_voice {
				flex-direction: row;
				
			}
		}
	}
	/*/////////// ■SAMPLE■ ///////////*/
	.sample_base {
		gap: 2vw;
	}
	.sample_base .mimg,
	.sample_base .mmv {
		width: calc(33% - 2vw);
	}
	/*/////////// ■PRODUCT■ ///////////*/
	.pro_header_point {
		width: 80vw;
		
		> div > div {
			font-size: clamp(1rem, 0.939rem + 0.3vw, 1.3rem);
		}
	}
	.pro_content_other > div:not(.anno) {
		flex-direction: row;
		align-items: flex-start;
		padding: 0 1vw;
		
		> section {
		}
	}
	#shopBonus > div:not(.anno) {
/*		flex-direction: row;
		align-items: flex-start;
		padding: 0 1vw;*/
		
		> section {
			width: calc(50% - 1vw);
		}
	}
	
}/*	Tablet -- end */

@media(960px <= width){
/*	PC -- 960px ~	*/
	body {
	}
	/*/////////// ■common class■ ///////////*/
	
	/* mobile display none */
	.mdn { display: block; }
	.mdnbr br { display: inline; } 
	br.nbr { display: inline; }
	.mdnsp { display: inline; }
	/* mobile display visible */
	.mdv { display: none; }
	.mdvbr br { display: none; }
	
	h1 {
		&::before {
			top: max(8.5vw, 100px);
			width: 15vw;
		}
	}
	
	h3 {
		flex-direction: row;
		align-items: center;
		
		> div {
			flex-direction: row;
			align-items: center;
			
			> span {
				min-width: 7rem;
				padding-top: 0.3rem;
			}
		}
	}
	dl:not(.chara_size) {
		flex-direction: row;
		> dt {
			width: min(16vw, 9rem);
			padding: 0.2rem 0.5rem;
			text-align: right;
		}
		> dd {
			width: calc(100% - min(16vw, 9rem) - 1vw);
		}
	}
	
	/*/////////// ■TOP■ ///////////*/
	#topInformation {
	}
	#news {
		height: 200px;
	}
	
	#topTopics {		
		> div {
			flex-direction: row;
			
			> a {
				width: calc(33% - 1vw);
			}
			> .top_topics_cs {
				display: flex;
			}
		}
	}
	/*/////////// ■CountDown■ ///////////
	#spArea {
		position: absolute;
		top: 2vw;
		left: 2vw;
		flex-direction: row;
		gap: 1vw;
		
		> div {
			width: min(24vw, 360px);
		}
	}*/
	
	/*/////////// ■STORY■ ///////////*/
	#story > div > p {
		text-align: center;
	}
	#concept #conceptPoint {
		.point {
			flex-direction: row;
			
			> div:first-child {
				display: grid;
				place-content: center;
				width: 200px;
			}
			> div:last-child {
				flex: 1;
				> div {
					text-align: left;
				}
			}
		}
	}
	/*/////////// ■CARACTER■ ///////////*/
	#charaSelect {
		flex-direction: row;
		> span {
			width: auto;
			margin: 0;
		}
	}
	.chara_base {
		flex-direction: row;
		align-items: flex-start;
		
		.chara_prof {
			top: calc(18rem + 1vw);
			left: 40.5vw;
			width: min(25vw, 373px);
			height: min(25vw, 351px);
		}
		
		.chara_img {
			order: 2;
		}
		.chara_main {
			order: 1;
			margin-top: 5vw;
			.chara_btn_area {
				align-items: flex-start;
				.sample_voice {
					flex-direction: row;
					
				}
			}
		}
	}
	
	/*/////////// ■SAMPLE■ ///////////*/
	#sample {
		padding-bottom: 50px;
	}
	.sample_base {
		gap: 1vw 2vw;
	}
	.sample_base .mimg,
	.sample_base .mmv {
		width: calc(25% - 2vw);
	}
	/*/////////// ■PRODUCT■ ///////////*/
	#productHeader {
		background: none;
	}
	.pro_header_point {
		position: absolute;
		top: 65%;
		right: 2%;
		width: min(68%, 1100px);
		margin-top: 0;
		
		> div {
			flex-direction: row;
			
			> div {
				display: flex;
				align-items: center;
				font-size: clamp(0.6rem, 0.397rem + 1.01vw, 1.6rem);
				box-shadow: 0 0 13px 0 #ff79aa;
			}
		}
		
		> p {
			margin: min(0.5vw, 10px) 0 0;
			font-size: clamp(0.6rem, 0.559rem + 0.2vw, 0.8rem);
		}
	}
	
	.spec_list {
		flex-direction: row;
		
		> dl {

		}
	}
	.pro_content {
		> div {
			flex-direction: row;
		}
		.content_outline {
			width: calc(55% - 1vw);
		}
		.content_img {
			width: 45%;
			margin-top: 2vw;
		}
	}
	.pro_content_other > div:not(.anno) {
		align-items: flex-start;
	}
	
	
	#themeSong {
		.audio_box {
			gap: 15px;
			padding: 15px;	
			div + p {
				margin: 15px 0 0 0;
			}
		}		
		.player_box {
			margin: 8px 0;
		}		
	}
	
	input#lyric_btn {
	
		+ label {
			height: 2.3rem;
			margin-top: 15px;
			padding: 0.5rem 1rem;
			
			&::before {
				font-size: 1rem;
			}
			+ p {
				padding: 0 15px;
			}
		}
		
		&:checked + label + p {
			padding: 15px 15px;
		}
	}
	
	#special {
		.voice_play_btn {
			max-width: 200px;
		}
	}
	
	/*/////////// ■Footer■ ///////////*/
	#footer {
		flex-direction: row;
	}
}/*	PC -- end */


/*///////////////////////////////////////////////////////////////
	Animation
/////////////////////////////////////////////////////////////////*/
@-webkit-keyframes flash {
	from, 50%, to { opacity: 1; }
	 25%, 75% { opacity: 0.2; }
}
@keyframes flash {
	from, 50%, to { opacity: 1; }
	 25%, 75% { opacity: 0.2; }
}