@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&display=swap');
/*
  font-family: 'Kaisei Decol', serif;
  font-family: 'M PLUS Rounded 1c', sans-serif;
*/

/* CSS Document */
article, aside, section, nav, header, footer { display: block; }
* { margin: 0; padding: 0; font-size: 100%;}
*, *:after, *::before { box-sizing: border-box; }
body {
	position: relative;
	z-index: 0;
	color: #787C95;
	font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	
/*	font-size: clamp(1.2rem, 0.937rem + 1.32vw, 2.5rem);*/
	font-weight: 400;
	line-height: 1.2;
	background-color: #fff;
	background: url(images/bg_1.jpg) fixed;
}
img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: #1879CB;
	text-decoration: none;
	transition: .2s;
}
a:hover {
	color: #F6FA00;
}
a img {
	transition: .2s;
}
a:hover:not(.roll):not(.menu_cs) img {
	opacity: .5;
	transition: .2s;
}

a.btn {
	position: relative;
	z-index: 0;
	display: inline-block;
	min-width: min(20vw, 6rem);
	padding: max(0.5vw, 5px);
	color: #fff;
	font-size: clamp(1rem, 0.939rem + 0.3vw, 1.3rem);
	font-weight: 700;
	text-align: center;
	background-color: #E95477;
	border-radius: 3px;
/*	&:hover {
		color: #E95477;
	}*/
	&::after {
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 0;
		height: 100%;
		background: #333;
		transition: .3s;
		border-radius: 3px;
	}
	&:hover::after {
		width: 100%;
	}
}

.nolink {
    color: #787C95;
    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);
}


.t_kai { font-family: Century, 'Kaisei Decol', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; }

.t_sm {
	display: inline-block;
	font-size: 80%;
	line-height: 1.2;
}
.t_mid {
	font-weight: 500;
}
.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: #E95477; }
.t_blue { color: #1879CB; }
.t_green { color: #3CC3AB; }

hr.line_ribbon {
	border: 0;
	width: 90%;
	height: min(4vw, 33px);
	margin: 0 auto;
	background-image: url(images/line_ribbon.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

h1 {
	position: relative;
	display: grid;
	place-content: center;
	justify-items: center;
	width: 100%;
	height: min(17vw, 100px);
	padding-top: 1vw;
	color: #fff;
	font-size: clamp(1.4rem, 1.38rem + 0.1vw, 1.5rem);
	text-align: center;
	font-weight: 900;
	background-color: #9ea2b2;
	background-image: url(images/bg_3.jpg);
	&::after {
		content: "";
		display: block;
		width: 16px;
		height: 14px;
		margin-top: min(1vw, 8px);
		background: url(images/ic_arrow.png) no-repeat center center;
	}
}
h2 {
	position: relative;
	padding: min(5vw, 50px) 0 min(3vw, 30px);
	font-size: clamp(1.5rem, 1.297rem + 1.01vw, 2.5rem);
	font-family: 'Kaisei Decol', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
	font-weight: 400;
	text-align: center;
	&::after {
		content: attr(data-hs);
		display: block;
		margin-top: 5px;
		color: #C1963A;
		font-size: 0.75rem;
		font-weight: 700;
	}
	> span {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		&::before, &::after {
			content: "";
			position: relative;
			display: block;
			width: 10px;
			height: 9px;
			background: url(images/ic_wsq.jpg) top left no-repeat;
		}
	}
}
h3 {
	margin-bottom: min(3vw, 30px);
	color: #C1963A;
	font-size: clamp(1.1rem, 0.756rem + 1.72vw, 2.8rem);
	font-weight: 800;
	transform:rotate(0.03deg);
	text-align: center;
	> span {
		display: inline-block;
	}
	&::before {
		content: attr(data-tag);
		display: block;
		width: clamp(10.625rem, 8.979rem + 8.23vw, 18.75rem);
		margin: 0 auto min(1vw, 8px);
		padding: 0.1rem 0.5rem;
		color: #3CC3AB;
		font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
		font-weight: 500;
		border: 2px solid #3CC3AB;
	}
}

dl {
	transform:rotate(0.03deg);
	dt {
		display: inline-block;
		min-width: 6rem;
		padding: 0.2rem 1rem;
		color: #DE7AA7;
		font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
		font-weight: 800;
		text-align: center;
		background-color: #F6FA00;
		border-radius: 30px;
	}
	dd {
		padding: min(2vw, 15px) 0;
		font-size: clamp(0.9rem, 0.799rem + 0.51vw, 1.4rem);
		
		> dl {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			
			+ dl {
				margin-top: min(1vw, 8px);
			}
			
			dt {
				min-width: 9rem;
				padding: 0.1rem 0.5rem;
				color: #3CC3AB;
				font-size: clamp(0.7rem, 0.68rem + 0.1vw, 0.8rem);
				font-weight: 500;
				background-color: #fff;
				border: 2px solid #3CC3AB;
				border-radius: 0;
			}
			dd {
				padding: min(1vw, 8px) 0;
			}
		}
	}
	dd.type {
		padding-bottom: 0;
		+ dt {
			margin-top: min(0.5vw, 8px);
		}
	}

}

.flex {
	display: flex;
}
.box {
	border: 3px solid #C1963A;
	border-radius: 15px;
	box-shadow: min(0.5vw,5px) min(0.5vw,5px) 0 min(0.5vw, 2px) #e1c452;
}
.box_set {
	width: min(80vw, 1200px);
	margin: 0 auto;
	padding: min(4vw, 40px) min(3vw, 30px);
	.box_inner {
		flex-direction: column;
		gap: min(2vw, 15px);
		margin-bottom: min(2vw, 30px);
		.box_main {
			display: flex;
			flex-direction: column;
			align-items: center;
			> p {
				width: min(100%, 1000px);
				font-size: clamp(0.9rem, 0.738rem + 0.81vw, 1.7rem);
				transform:rotate(0.03deg);
			}
			> dl {
				display: grid;
				justify-items: center;
				width: min(50vw, 380px);
				width: clamp(180px, 50vw, 380px);
				margin: min(3vw, 30px) auto 0;
				padding: min(5vw, 30px) min(2vw, 20px) min(2vw, 20px);
				border: 2px solid #3CC3AB;
				border-radius: 5px;
				> dd {
					text-align: center;
				}
			}
		}
		.box_img > div:has(img) {
			width: min(100%, 500px);
			margin: 0 auto;
		}
	}
	.anno {
		padding: min(2vw, 15px);
		color: #fff;
		transform:rotate(0.03deg);
		background-color: #787c95;
		> a {
			color: #F6FA00;
		}
	}
}

.lace_t, .lace_b {
	position: relative;
	padding: 0;
}
.lace_t::before {
	top: max(-1.7vw, -14px);
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: min(100%, 1500px);
	height: min(1.8vw, 14px);
	background-image: url(images/deco_lace.png);
	background-repeat: repeat-x;
	background-size: contain;
}
.lace_b::after {
	bottom: max(-1.7vw, -14px);
	transform: scale(1, -1);
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: min(100%, 1500px);
	height: min(1.8vw, 14px);
	background-image: url(images/deco_lace.png);
	background-repeat: repeat-x;
	background-size: contain;
}

.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: center;
	align-items: center;
	gap: min(2vw, 30px);
	width: 100%;
	height: 90px;
	padding: 0 1vw;
	background-color: #fff;
	border-bottom: 4px solid #C1963A;
	> a {
		display: block;
		font-size: clamp(0.7rem, 0.719rem + 0.41vw, 1.2rem);
			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.menu_cs {
		opacity: 0.3;
	}
}
.drawer-hamburger {
	background-color: #C1963A !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: #C1963A !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: #fff;
}
/*///////////////////////////////////////////////////////////////
	TOP
/////////////////////////////////////////////////////////////////*/
#wrapper {
	width: min(90vw, 1300px);
	margin: 0 auto;
	padding: 0.03px;
	background-color: #fff;
}

#mainImg {
	position: relative;
	
	#brandLink {
		display: block;
		position: absolute;
		top: 1.5vw;
		left: 2%;
		z-index: 1;
	    width: clamp(73px, 12vw, 150px);
	}
}

#information {
	padding: 0.03px;
}
#news {
	position: relative;
	width: min(90%, 770px);
	margin: min(4vw, 40px) auto;
	
	.news_inner {
		width: 100%;
		height: clamp(90px, 6vw, 200px);
		
		> section {
			display: flex;
			align-items: flex-start;
			gap: min(2vw, 15px);
			
			+ section {
				margin-top: min(2vw, 15px);
			}
		}
	}
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left; 0;
		z-index: 1;
		width: 100%;
		height: 1.5vw;
		background: linear-gradient(to bottom, transparent, #fff);
	}
}

.date {
	background-color: #1879CB;
	border-radius: 5px;
	transform:rotate(0.03deg);
	
	> time {
		display: grid;
		place-content: center;
		gap: 0.1vw;
		width: min(13vw,80px);
		height: min(13vw,80px);
		font-weight: 800;
		color: #fff;
		text-align: center;
		line-height: 1;
		
		.month {
			font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
		}
		.day {
			font-size: clamp(1.1rem, 0.938rem + 0.81vw, 1.9rem);
		}
		.year {
			font-size: clamp(0.6rem, 0.58rem + 0.1vw, 0.7rem);
			font-weight: 400;
		}
	}
}
.news_box {
	flex: 1;
	min-height: min(16vw,80px);
	margin-top: 2px;
	margin-right: 5px;
	padding: min(2vw, 15px);
	font-size: clamp(0.8rem, 0.719rem + 0.41vw, 1.2rem);
	font-weight: 500;
	box-shadow: 2px 2px 5px 0px #aaa;
	
	> p {
		transform:rotate(0.03deg);

		a {
			color: #E95477;
			&::after {
				content: "-";
				margin: 0 0.3rem;
				color: #787C95;
			}
		}
	}
}
#topics {
	width: min(90%, 950px);
	margin: min(4vw, 40px) auto min(5vw, 50px);
	> div {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 1vw;
		
		> * {
			
		}
	}
}


/*///////////////////////////////////////////////////////////////
	STORY
/////////////////////////////////////////////////////////////////*/
#story {
	.story_inner {
		padding: min(7vw, 70px) 0 min(4vw, 40px);
		background-color: #dcf0ff;
		background-image: url(images/story_bg.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		
		> p {
			width: min(80vw, 740px);
			margin: 0 auto;
			font-size: clamp(0.9rem, 0.738rem + 0.81vw, 1.7rem);
			line-height: 1.5;
			transform:rotate(0.03deg);
			text-shadow:
			0px 0px 1px #fff,
			1px 0px 1px #fff,0px 1px 1px #fff,
			1px 1px 1px #fff,-1px 0px 1px #fff,
			0px -1px 1px #fff,-1px -1px 1px #fff,
			0px 0px 2px #fff,
			2px 0px 2px #fff,0px 2px 2px #fff,
			2px 2px 2px #fff,-2px 0px 2px #fff,
			0px -2px 2px #fff,-2px -2px 2px #fff,
			0px 0px 3px #fff,
			3px 0px 3px #fff,0px 3px 3px #fff,
			3px 3px 3px #fff,-3px 0px 3px #fff,
			0px -3px 3px #fff,-3px -3px 3px #fff,
			0px 0px 4px #fff,
			4px 0px 4px #fff,0px 4px 4px #fff,
			4px 4px 4px #fff,-4px 0px 4px #fff,
			0px -4px 4px #fff,-4px -4px 4px #fff,
			0px 0px 5px #fff,
			5px 0px 5px #fff,0px 5px 5px #fff,
			5px 5px 5px #fff,-5px 0px 5px #fff,
			0px -5px 5px #fff,-5px -5px 5px #fff;
			
			+ p {
				margin-top: min(4vw, 40px);
			}
		}
	}
}
#concept {
	position: relative;
	padding: 0.03px;
}
#conceptHead {
	width: min(50vw, 480px);
	margin: 0 auto min(5vw, 50px);
	padding: 0.03px;
	
	&::before, &::after {
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: min(26vw, 360px);
		height: min(26vw, 360px);
		background-position: top left;
		background-repeat: no-repeat;
		background-size: contain;
	}
	&::before {
		left: -3vw;
		background-image: url(images/concept_chara_chloe.png);
	}
	&::after {
		right: -3vw;
		background-image: url(images/concept_chara_mashiro.png);
	}
	
	> div {
		margin-top: min(3vw, 30px);
	}
}
.scopy {
	display: grid;
	place-content: center;
	width: 100%;
	padding: 0 min(2vw, 15px);
	background-color: #fff7df;
	background: linear-gradient(to right, #ffbccd 0%, #fff7df 35%, #fff7df 65%, #ffbccd 100%);
	
	> div {
		height: min(12vw, 117px);
		
		> img {
			width: auto;
			max-height: 100%;
		}
	}
	
	+ div {
		margin-top: min(1vw, 8px);
	}
}

#conceptPoint {
	margin: clamp(1.625rem, 0.941rem + 3.42vw, 5rem) 0;
	> section {
		display: grid;
		justify-items: center;
		position: relative;
		width: min(80vw, 1050px);
		margin: 0 auto;
		padding: min(6vw, 60px) min(6vw, 60px) min(3vw, 30px);
		> div {
			position: absolute;
			top: calc( clamp(1.125rem, 0.847rem + 1.39vw, 2.5rem) * -1);
			left: auto;
			right: auto;
			width: clamp(12rem, 9.114rem + 14.43vw, 26.25rem);
			padding: min(2vw, 12px) 1rem;
			color: #fff;
			font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
			font-weight: 800;
			text-align: center;
			background-color: #C1963A;
			border-radius: 40px;
		}
		> p {
			color: #C1963A;
			font-size: clamp(0.9rem, 0.718rem + 0.91vw, 1.8rem);
			line-height: 1.4;
			transform:rotate(0.03deg);
		}
		> p.t_sm {
			margin-top: min(2vw, 15px);
			font-size: clamp(0.7rem, 0.659rem + 0.2vw, 0.9rem);;
		}
		+ section {
			margin-top: clamp(1.625rem, 1.195rem + 2.15vw, 3.75rem);
		}
	}
}

/*///////////////////////////////////////////////////////////////
	CHARACTER
/////////////////////////////////////////////////////////////////*/
#character {
	padding: 0.03px 0;
}
.chara_box {
	position: relative;
	width: 100%;
	padding-top: 0.03px;
	padding-bottom: min(8vw, 80px);
	
	.chara_name {
		position: relative;
		z-index: 0;
	}
	.chara_main {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 0;
		
		.chara_img {
			width: min(80vw, 470px);
		}
		.chara_prof {
			width: min(80vw, 750px);
			.chara_cos {
				display: flex;
				justify-content: center;
				gap: 0.5vw;
				margin-top: min(5vw, 50px);
				> a {
					width: min(calc(100% / 5), 115px);
				}
			}
			.chara_voice {
				display: grid;
				justify-items: center;
				margin-top: min(3vw, 30px);
				.sv_head {
					display: inline-block;
					min-width: 8rem;
					margin-bottom: min(2vw, 10px);
					padding: 0.1rem 0.5rem;
					color: #C1963A;
					font-size: clamp(0.7rem, 0.659rem + 0.2vw, 0.9rem);
					text-align: center;
					border: 1px solid #C1963A;
					border-radius: 30px;
				}
				.sample_voice {
					display: flex;
					justify-content: center;
					gap: min(1vw, 8px);
					.csvoice {
						display: grid;
						place-content: center;
						width: min(8vw, 50px);
						height: min(8vw, 50px);
						color: #C1963A;
						font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
						font-family: Century, serif;
						font-weight: bold;
						line-height: 1;
						border: 2px solid #C1963A;
						border-radius: 100%;
						transition: .2s ease-in-out;
						cursor: pointer;
						&:hover {
							color: #fff;
							background-color: #C1963A;
						}
					}
					.cs_h {
						color: #E95477;
					}
				}
			}
		}
	}
}
#touya {
	padding-bottom: min(5vw, 50px);
	> .chara_main {
		margin-top: min(5vw, 50px);
	}
}

.chara_text_box {
	padding: min(4vw, 40px);
	background-color: #fff;
	> p {
		position: relative;
		padding: 0 0.5rem 1vw;
		color: #C1963A;
		font-size: clamp(1rem, 0.858rem + 0.71vw, 1.7rem);
		font-weight: 500;
		line-height: clamp(2rem, 1.7rem + 1.5vw, 3.48rem);
		background-image:
			linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%),
		   linear-gradient(180deg, rgba(204,204,204, 0) 0%, rgba(204,204,204, 0) 95%, #ccc 95%, #ccc 100%);
		background-size: 8px 100%,100% clamp(2rem, 1.696rem + 1.52vw, 3.5rem);
		
		> span {
		transform:rotate(0.03deg);
		}
	}
	.chara_data {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: min(2vw, 15px);
		> div {
			display: inline-block;
			padding: 0.1rem 0.3rem;
			color: #fff;
			font-size: clamp(0.7rem, 0.599rem + 0.51vw, 1.2rem);
			transform:rotate(0.03deg);
			background-color: #1879CB;
			+ div {
				margin-top: min(1vw, 3px);
			}
		}
	}
}

.chara_other {
	display: flex;
	flex-direction: column;
	gap: min(4vw, 40px);
	width: min(80vw, 1200px);
	margin: min(5vw, 50px) auto;
	
	> section {
		flex: 1;
		.chara_other_name {
			display: grid;
			place-content: center;
		}
		.chara_text_box > p {
			font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
		}
	}
}

/*///////////////////////////////////////////////////////////////
	SAMPLE
/////////////////////////////////////////////////////////////////*/
#sample {
	padding: 0.03px;
}

.sample_base {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1.5vw 2vw;
	width: min(80vw, 1200px);
	margin: 0 auto min(6vw, 60px);
}
.sample_base .mimg,
.sample_base .mmv {
	position: relative;
	width: calc(50% - 1vw);
	max-width: 375px;
}
.sample_base > a > .thumb_base > img {
	display: block;
	width: 100%;
	height: auto;
}
.sample_base > a > .thumb_num {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: grid;
	place-content: center;
	width: 100%;
	height: min(4.6vw, 47.725px);
	padding-top: min(0.5vw, 9px);
	color: #e15699;
	font-family: Century, serif;
	font-size: clamp(0.8rem, 0.516rem + 1.42vw, 2.2rem);
	font-weight: 400;
	text-shadow:
	1px 0px 1px #fff,
	0px 1px 1px #fff,
	1px 1px 1px #fff,
	-1px 0px 1px #fff,
	0px -1px 1px #fff,
	-1px -1px 1px #fff,
	2px 0px 4px #fff,
	0px 2px 4px #fff,
	2px 2px 4px #fff,
	-2px 0px 4px #fff,
	0px -2px 4px #fff,
	-2px -2px 4px #fff;
}
.sample_base > a.st::after {
	content: "Sample Text";
	position: absolute;
	bottom: min(1.8vw, 19px);
	right: 0;
	display: inline-block;
	padding: min(0.3vw, 2px) 1.5vw;
	color: #fff;
	font-family: Century, serif;
	font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
	font-weight: normal;
	background-color: #3CC3AB;
}

/*///////////////////////////////////////////////////////////////
	PRODUCT
/////////////////////////////////////////////////////////////////*/
#product {
	padding: 0.03px 0 min(5vw, 50px);
}

#spec {
	dl > dd.type > dl > dd {
		font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
	}
}
#shopBonus {
	.box_inner {
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		
		.shop_box {
			display: grid;
			justify-items: center;
			flex: none;
			width: min(70vw, 550px);
			padding: min(4vw, 40px) min(3vw, 30px);
			text-align: center;
			transform:rotate(0.03deg);
			border-radius: 5px;
			background-color: #fff;
			.shop_name {
				margin-bottom: min(2vw, 20px);
				color: #C1963A;
				font-size: clamp(1.2rem, 0.977rem + 1.11vw, 2.3rem);
				font-weight: 500;
				&::after {
					content: "様";
					margin-left: 0.5rem;
					font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
				}
			}
			.shop_img {
				width: min(90%, 400px);
				margin-bottom: min(3vw, 30px);
			}
			.shop_item {
				margin-bottom: min(2vw, 20px);
				color: #1879CB;
				font-size: clamp(1rem, 0.737rem + 1.32vw, 2.3rem);
				font-weight: 800;
			}
			.shop_item_text {
				width: 90%;
				margin-bottom: min(3vw, 30px);
				font-size: clamp(0.7rem, 0.558rem + 0.71vw, 1.4rem);
			}
			> a.btn {
				width: min(100%, 400px);
				font-size: clamp(0.8rem, 0.618rem + 0.91vw, 1.7rem);
				+ a {
					margin-top: min(1vw, 5px);
				}
			}
		}
	}
}
#dlStore {
	.box_inner {
		gap: min(5vw, 30px);
		margin-bottom: min(5vw, 50px);
	}
	.box_inner:not(.flex) {
		width: 100%;
		margin-top: min(5vw, 30px);
	}
	dl {
		justify-items: start;
		max-width: 350px;
		margin-bottom: min(5vw, 30px);
		dt {
			justify-self: center;
			margin-bottom: min(1vw, 8px);
		}
		dd {
			padding: min(1vw, 8px) 0;
			&::before {
				content: "・";
			}
			+ dd {
				padding-top: 0;
			}
		}
	}
	.dl_price {
		margin-bottom: min(3vw, 20px);
		color: #787C95;
		font-size: clamp(1rem, 0.737rem + 1.32vw, 2.3rem);
		font-weight: 800;
		transform:rotate(0.03deg);
		
		&::before {
			content: attr(data-n);
			display: block;
			width: clamp(6.7rem, 6.335rem + 1.82vw, 8.5rem);
			margin-bottom: 0.2rem;
			padding: 0.1rem 0.5rem;
			font-size: clamp(0.7rem, 0.659rem + 0.2vw, 0.9rem);
			font-weight: 400;
			color: #fff;
			background-color: #1879CB;
		}
		> .t_sm {
			font-size: clamp(0.7rem, 0.659rem + 0.2vw, 0.9rem);
			font-weight: 400;
		}
	}
	a.btn {
		width: min(90%, 500px);
	}
	
	p + .dl_price {
		margin-top: min(3vw, 20px);
	}
}

/*///////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////*/
#snsLink {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(2vw, 8px);
	padding-bottom: min(5vw, 50px);
}
#footer {
	width: 100%;
	padding: 3vw 1vw 2vw;
	background-color: #DE7AA7;

	footer {
		text-align: center;
		color: #fff;
		font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
	}
}

@media(667px <= width < 960px){
/*	Tablet -- 667px ~ 959px	*/	
	
	/*/////////// ■Top■ ///////////*/
	#topics {
		> div {
			flex-direction: row;
			> * {
				width: calc(50% - 0.5vw);
			}
		}
	}
}/*	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; }
	
	.box_set {
		.box_inner {
			flex-direction: row;
			gap: min(3vw, 30px);
			> * {
				flex: 1;
			}
		}
	}
	dl {
		dd > dl {
			flex-direction: row;
			> dt {
				margin-right: 0.5rem;
			}
			> dd {
				padding: 0;
			}
		}
		dd.type + dt {
			margin-top: min(2vw, 15px);
		}
	}
	
	/*/////////// ■TOP■ ///////////*/
	#mainImg {
		margin-top: 90px;
	}
	
	#topics {
		> div {
			flex-direction: row;
			> * {
				width: calc(50% - 0.5vw);
			}
		}
	}
	/*/////////// ■STORY■ ///////////*/
	#story {
		.story_inner {
			> p {
				text-align: center;
			}		
		}
	}
	#conceptHead {
		width: min(50vw, 650px);
		
		&::before, &::after {
			width: min(22vw, 360px);
			height: min(22vw, 360px);
		}
		&::before {
			left: -3vw;
		}
		&::after {
			right: -3vw;
		}
		
		> div {
			margin-top: min(5vw, 50px);
		}
	}
	/*/////////// ■CHARACTER■ ///////////*/
	.chara_box {
		padding-bottom: min(2vw, 15px);
		.chara_name {
			/*position: absolute;
			top: 0;
			left: 0;*/
		}
		.chara_main {
			flex-direction: row;
			justify-content: center;
			align-items: flex-start;
			margin-right: min(5vw, 50px);
			.chara_img {
				margin-top: max(-13vw, -185px);
			}
			.chara_prof {
				flex: 1;
				margin: min(3vw, 50px) 0 min(3vw, 30px);
			}
		}
	}
	#touya {
		/*margin-bottom: min(3vw, 30px);*/
		.chara_main {
			margin: 0;
			.chara_prof {
				flex: none;
				width: min(80vw, 1050px);
			}
		}
	}
	.chara_other {
		flex-direction: row;
	}
	/*/////////// ■SAMPLE■ ///////////*/
	.sample_base {
		.mimg, .mmv {
			width: calc(100% / 3 - 2vw * 2 / 3);
		}
	}
	/*/////////// ■PRODUCT■ ///////////*/
	#product {
		#shopBonus {
			.box_inner {
				flex-direction: row;
				align-items: flex-start;
				gap: 2vw 3vw;
				.shop_box {
					width: calc(50% - 1.5vw);
				}
			}
		}
	}
	#dlStore {
		.box_inner:not(.flex) {
			width: 80%;
			margin: min(5vw, 50px) auto;
		}
	}
	
	/*/////////// ■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; }
}