@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');*/
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500;700&family=M+PLUS+1:wght@100..900&display=swap');
/*
  font-family: 'Kaisei Decol', serif;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-family: "M PLUS 1", sans-serif;
*/
/*///////////////////////////////////////////////////////////////
	var
/////////////////////////////////////////////////////////////////*/
:root {
	--sp-1: min(1vw, 10px);
	--sp-2: min(2vw, 20px);
	--sp-3: min(3vw, 30px);
	--sp-4: min(4vw, 40px);
	--sp-5: min(5vw, 50px);
	--sp-6: min(6vw, 60px);
	--sp-7: min(7vw, 70px);
	--wd-1000: min(100%, 1000px);
	--wd-800: min(90vw, 800px);
	--wd-740: min(80vw, 740px);
	--color-red: #ee184b;
	--color-pink: #ff4d98;
	--color-sblue: #57a1b9;
	--color-yellow: #ffc343;
	--color-mgreen: #0fbdaf;
	--color-terracotta: #df5f4f;
	--color-brown: #68565a;
	--color-rgba-w: rgba(255,255,255,0.5);
	/*-- | 16px = 1rem | 20px = 1.25rem | 22px = 1.375rem | --*/
	--fontsize-xr: clamp(0.7rem, 0.591rem + 0.55vw, 1rem);
	--fontsize-r: clamp(0.8rem, 0.682rem + 0.59vw, 1.125rem);
	--fontsize-m: clamp(0.8rem, 0.591rem + 1.05vw, 1.375rem);
	--fontsize-ml: clamp(0.9rem, 0.778rem + 0.61vw, 1.5rem);
/*		--fontsize-l: clamp(0.9rem, 0.627rem + 1.37vw, 2.25rem);*/
	--fontsize-l: clamp(1rem, 0.636rem + 1.82vw, 2rem);
	--fontsize-xl: clamp(1.3rem, 0.955rem + 1.73vw, 2.25rem);
	--font-mincho: 'Kaisei Decol', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
	--font-gothic: 'M PLUS 1', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--shadow-spink-10:
		0px 0px 1px #f86383, 0px 0px 2px #f86383, 0px 0px 3px #f86383,
		0px 0px 4px #f86383, 0px 0px 5px #f86383, 0px 0px 6px #f86383,
		0px 0px 8px #f86383, 0px 0px 10px #f86383;
	--shadow-pink-10:
		1px 0px 10px var(--color-pink),
		0px 1px 10px var(--color-pink),
		1px 1px 10px var(--color-pink),
		-1px 0px 10px var(--color-pink),
		0px -1px 10px var(--color-pink),
		-1px -1px 10px var(--color-pink),
		0px 0px 10px var(--color-pink);
	--shadow-white-5: 
		0px 0px 1px #fff, 0px -1px 1px #fff, 1px -1px 1px #fff,
		1px 0px 1px #fff, 1px 1px 1px #fff, 0px 1px 1px #fff,
		-1px 1px 1px #fff, -1px 0px 1px #fff, -1px -1px 1px #fff,
		0px 0px 2px #fff, 0px -2px 2px #fff, 2px -2px 2px #fff,
		2px 0px 2px #fff, 2px 2px 2px #fff, 0px 2px 2px #fff,
		-2px 2px 2px #fff, -2px 0px 2px #fff, -2px -2px 2px #fff,
		0px 0px 3px #fff, 0px -3px 3px #fff, 3px -3px 3px #fff,
		3px 0px 3px #fff, 3px 3px 3px #fff, 0px 3px 3px #fff,
		-3px 3px 3px #fff, -3px 0px 3px #fff, -3px -3px 3px #fff;
	--shadow-brown: 
		0px 0px 1px var(--color-brown), 0px 0px 2px var(--color-brown), 0px 0px 3px var(--color-brown),
		0px 0px 4px var(--color-brown), 0px 0px 5px var(--color-brown), 0px 0px 6px var(--color-brown),
		0px 0px 8px var(--color-brown), 0px 0px 10px var(--color-brown);
}

/*///////////////////////////////////////////////////////////////*/
/* 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: var(--color-brown);
	font-family: 'M PLUS 1', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	background-image: linear-gradient(to bottom, #f1e369, #fbdb83, #ffd693, #ffd1b1, #ffcec2, #ffcbd1);
	background-position: 0% 0%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: auto;
}

img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	color: var(--color-sblue);
	text-decoration: none;
	transition: .2s;
	
	&:hover {
		color: var(--color-yellow);
	}
}
a.btn {
	display: inline-block;
	min-width: 4rem;
	padding: 0.5rem 1rem;
	color: #fff;
	font-weight: 800;
	text-align: center;
	line-height: 1;
	background-color: var(--color-red);
	text-decoration: none;
	transition: .2s;
}
a.btn:hover {
	background-color: var(--color-yellow);
}
a img {
	transition: .2s;
}
a:hover:not(.roll):not(.menu_cs) img {
	opacity: .5;
	transition: .2s;
}

.nolink {
    color: var(--color-brown);
    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; }

.t_sm {
	display: inline-block;
	font-size: 80%;
	line-height: 1.1;
}
.t_bold {
	font-weight: 800;
}
.t_strong {
	font-weight: 900;
}
.t_blc span:not([class]) {
	display: inline-block;
}
.t_red {
	color: var(--color-red);
}
.t_pink {
	color: var(--color-pink);
}
.t_blue {
	color: var(--color-sblue);
}

h1 {
	width: 100%;
	height: min(50vh, 110px);
	margin: 1vw 0 var(--sp-1);
	background: url(images/h2_bg.jpg) 50% 0% no-repeat;
	
	> p {
		position: relative;
		margin: min(20%, 55px) 0 0;
		font-family: var(--font-mincho);
		font-weight: 500;
		font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.188rem);
		text-align: center;
		&::after {
			content: "";
			display: block;
			width: 3rem;
			height: min(1vw, 5px);
			margin: 5px auto 0;
			background-color: var(--color-red);
		}
	}
}

h2 {
	position: relative;
	margin: min(8vw, 50px) 0 var(--sp-3);
	padding: var(--sp-1) var(--sp-3);
	text-align: center;
	font-size: var(--fontsize-ml);
	font-family: var(--font-mincho);
	border: 2px solid #68565a;
	border-radius: 30px;
	box-shadow: 0 min(1vw, 5px) 0 0 var(--color-yellow);
	&::before {
		content: attr(data-t);
		position: absolute;
		top: calc( min(5vw, 1.5rem) * -1);
		left: 0;
		right: 0;
		display: block;
		margin: 0 auto;
		color: var(--color-terracotta);
		font-size: var(--fontsize-xr);
		font-family: var(--font-gothic);
		font-weight: 800;
	}
}

h3 {
	color: var(--color-sblue);
	font-size: var(--fontsize-xl);
	font-weight: 800;
	text-align: center;
	span:not([class]) {
		display: inline-block;
	}
}
h3[data-t] {
	&::after {
		content: attr(data-t);
		display: inline-block;
		padding: 0.2rem 0.5rem;
		color: #fff;
		font-size: var(--fontsize-r);
		font-weight: 700;
		background-color: var(--color-mgreen);
	}
}

dl {
	> dt {
		display: inline-block;
		min-width: 7rem;
		padding: 0.2rem 1rem;
		color: #fff;
		font-size: var(--fontsize-xr);
		text-align: center;
		background-color: var(--color-terracotta);
		border-radius: 30px;
	}
	> dd {
		padding: var(--sp-2) 0;
		font-size: var(--fontsize-m);
	}
	> dd.pro_type {
		> dl {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: var(--sp-1);
			> dt {
				width: min(calc(35% - var(--sp-1)), 180px);
				padding: 0.1rem 0.5rem;
				color: var(--color-terracotta);
				font-size: clamp(0.6rem, 0.491rem + 0.55vw, 0.9rem);
				background-color: #fff;
				border-radius: 0;
				border: 1px solid var(--color-terracotta);
			}
			> dd {
				flex: 1;
				padding: 0;
			}
			
			+ dl {
				margin-top: var(--sp-2);
			}
		}
	}
}

hr.line_ribbon {
	display: block;
	width: 100%;
	height: min(12vw, 58px);
	margin-bottom: var(--sp-5);
	border: 0;
	background: url(images/ic_ribbon.png) no-repeat 50% 50%;
	background-size: contain;
}
hr.line_stripe {
	position: relative;
	display: block;
	width: var(--wd-800);
	height: 10px;
	margin: var(--sp-3) 0 var(--sp-1);
	border: 0;
	background: url(images/line_stripe.png) #d6bc85;
}
hr.line_dot {
	width: 100%;
	margin: var(--sp-3) 0;
	border: 0;
	border-top: 3px dotted #ccc;
}

#wrapper {
	width: var(--wd-1000);
	margin: 0 auto;
	
	> * {
/*	border: 1px solid lightgreen;*/
		display: grid;
		justify-items: center;
		width: 100%;
	}
	
	.wd-800 {
		width: var(--wd-800);
		background-color: #fff;
	}
	
	.wd-740 {
/*	border: 1px solid #0ff;*/
		width: var(--wd-740);
	}
	
	.anno {
		width: var(--wd-740);
		padding: var(--sp-2);
		font-size: var(--fontsize-xr);
		border: 2px dashed var(--color-brown);
	}
}

.new {
	position: relative;

	&::after {
		--new-size: min(2vw, 5px);
		content: "";
		position: absolute;
		top: min(0.5vw, 3px);
		left: min(0.5vw, 3px);
		z-index: 1;
		display: block;
		width: var(--new-size);
		height: var(--new-size);
		background-color: #ff7847;
		border-radius: 30px;
		border: 2px solid #fff;
		box-sizing: content-box;
		animation: flash 3s ease infinite;
	}
}
/*///////////////////////////////////////////////////////////////
	MENU
////////////////////////////////////////////////////////////////*/
.drawer-hamburger {
	background-color: var(--color-terracotta) !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: var(--color-terracotta) !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.059rem + 0.2vw, 1.3rem);
	font-weight: 700;
	color: #fff;
}
/*///////////////////////////////////////////////////
	TOP
///////////////////////////////////////////////////*/
#topImg_area {
	position: relative;
	
	#topImg {
		position: relative;
	
		a#linkAnim {
			position: absolute;
			top: 1.8%;
			left: 2%;
			width: min(20%, 100px);
		}
	}
	
	&::before, &::after {
		content: "";
		position: absolute;
		z-index: 2;
		width: min(20%, 173px);
		height: min(10%, 50px);
		background-repeat: no-repeat;
		background-size: contain;
	}
	&::before {
		top: 32%;
		left: 0;
		background-image: url(images/ic_clowd_left.png);
		background-position: 0 0;
	}
	&::after {
		top: 25%;
		right: 0;
		background-image: url(images/ic_clowd_right.png);
		background-position: 0 0;
	}
	
	#topCopy {
		position: absolute;
		top: 52%;
		left: 0%;
		width: min(60%, 500px);
		transform: rotate(-8deg);
	}
	#topReleaseStatus {
		position: absolute;
		top: 40%;
		right: 0;
		width: min(34%, 282px);
	}
}

#information {
	> .wd-800 {
		display: grid;
		justify-items: center;
		gap: var(--sp-3);
		padding: var(--sp-3) 0;
		background-color: var(--color-sblue);
		> div {
			width: var(--wd-740);
		}
	}
	
	#news {
		height: 5rem;
		padding: var(--sp-2);
		background-color: #fffbf2;
		
		#newsInner {
			> div {
				font-size: var(--fontsize-r);
				text-align: center;
				
				+ div {
					margin-top: var(--sp-1);
				}
				
				> time {
					display: block;
					color: var(--color-red);
					font-family: Century, serif;
				}
				
				> p {
					text-align: left;
					line-height: 1.5;
				}
			}
		}
		
		a {
			position: relative;
			display: inline-block;
			min-width: 4rem;
			padding: 0.2rem 0.5rem;
			margin: 0 1.3rem 0 0;
			color: #fff;
			font-weight: 500;
			text-align: center;
			line-height: 1;
			background-color: var(--color-red);
			text-decoration: none;
			transition: .2s;
			&::after {
				content: "-";
				position: absolute;
				top: 0;
				right: -1.2rem;
				height: 100%;
				padding: 0 0.3rem;
				color: var(--color-brown);
				background-color: #fffbf2;
			}
		}
		a:hover {
			background-color: var(--color-yellow);
		}
		a.btn {
			margin-right: 0.5rem;
			padding: 0.2rem 0.5rem;
			font-weight: 500;
			&::after {
				content: none;
			}
		}
	}
	#topics {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		gap: var(--sp-2);
		background-color: var(--color-sblue);
		
		> div {
			display: none;
		}
	}
}


/*///////////////////////////////////////////////////
	STORY
///////////////////////////////////////////////////*/
#story {
	position: relative;
	&::before {
		content: "";
		position: absolute;
		top: clamp(20rem, 19.091rem + 4.55vw, 22.5rem);
		left: min(5%, 20px);
		z-index: 0;
		display: block;
		width: min(50%, 480px);
		height: min(30%, 294px);
		transform: rotate(-8deg);
		background-image: url(images/story_bg_img.png);
		background-position: 0% 0%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	&::after {
		content: "";
		position: absolute;
		z-index: 2;
		width: min(20%, 173px);
		height: min(10%, 50px);
		top: 60%;
		right: 0;
		background-image: url(images/ic_clowd_right.png);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
	}
	
	section {
		display: grid;
		justify-items: center;
		gap: var(--sp-4);
		
		> p {
			text-align: center;
			z-index: 1;
			width: min(80vw, 600px);
			font-size: var(--fontsize-m);
			line-height: 1.8;
			text-shadow: var(--shadow-white-5);
			span:not([class]) {
				display: inline-block;
			}
		}
		> p:first-of-type {
			margin-bottom: var(--sp-5);
		}
	}
}

#concept {
	#conceptHead {
		position: relative;
		padding: var(--sp-3) 0;
		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 0;
			display: block;
			width: var(--wd-800);
			height: 100%;
			margin: 0 auto;
			background-color: #fff;
		}
		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			display: block;
			width: var(--wd-800);
			height: 84%;
			margin: 0 auto;
			background: url(images/concept_head_bg.jpg) #ffe9f2;
		}
		
		.concept_head_img {
			position: relative;
			z-index: 2;
		}
	}
	#conceptPoint {
		display: grid;
		justify-items: center;
		> div {
			display: grid;
			place-content: center;
			width: var(--wd-800);
			padding: var(--sp-3);
			background-color: #fcebd0;
			background: linear-gradient(to bottom, #fffeed, #fff, #fcebd0);
			> p {
				width: var(--wd-740);
				color: #fff;
				font-size: var(--fontsize-l);
				font-weight: 700;
				text-align: center;
				text-shadow: var(--shadow-spink-10);
			}
			> p + span.t_sm {
				display: block;
				margin-top: var(--sp-2);
				font-size: var(--fontsize-xr);
				text-align: center;
			}
		}
	}
}

/*///////////////////////////////////////////////////
	CHARACTER
///////////////////////////////////////////////////*/
#character {
	position: relative;
	section {
		display: grid;
		justify-items: center;
		gap: var(--sp-2);
	}
	.chara_box {
		display: grid;
		justify-items: center;
		padding-bottom: var(--sp-4);
	
		.chara_prof {
			display: grid;
			gap: var(--sp-3);
			width: var(--wd-740);
			margin-top: var(--sp-3);
			
			.chara_text {
				display: grid;
				gap: var(--sp-2);
				> p {
					font-size: var(--fontsize-m);
					line-height: 1.5;
					span:not([class]) {
						display: inline-block;
					}
				}
			}
			.chara_costume {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: var(--sp-2);
				> a {
					width: min(calc(50% - calc(var(--sp-2) / 2)), 120px);
				}
			}
			.sample_voice {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: var(--sp-2);
				> div {
					display: flex;
					justify-content: center;
					gap: var(--sp-2);
					> div {
						transition: .2s ease-in-out;
						&:hover {
							opacity: .5;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
}

/*///////////////////////////////////////////////////
	GRAPHIC
///////////////////////////////////////////////////*/
#graphic {
	position: relative;
	> section {
		display: grid;
		justify-items: center;
		gap: var(--sp-2);
		padding-bottom: var(--sp-5);
		
		> section {
			display: grid;
			justify-items: center;
		}
		
		#cg {
			> h2 {
				margin-top: var(--sp-3);
			}
		}
	}
		
	.sample_base {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--sp-2);
		width: var(--wd-740);
		margin-top: var(--sp-1);
	}
	a.mimg, a.mmv {
		position: relative;
		display: block;
		width: min( calc( 50% - calc( var(--sp-2) / 2)), 240px);
		&::before {
			content: attr(data-num);
			position: absolute;
			bottom: 3%;
			left: 3%;
			z-index: 1;
			display: block;
			color: #fff;
			font-size: var(--fontsize-ml);
			line-height: 1;
			text-shadow: var(--shadow-brown);
		}
	}
}
/*///////////////////////////////////////////////////
	PRODUCT
///////////////////////////////////////////////////*/
#product {
	position: relative;
	display: grid;
	justify-items: center;
	
	> section {
		display: grid;
		justify-items: center;
		gap: var(--sp-2);
	}
	
	dl.dl_style {
		width: var(--wd-740);
	}
	
	#spec dl dd.pro_type dl dd {
		font-size: var(--fontsize-r);
	}
	
	.pro_content {
		display: grid;
		justify-items: center;
		
		.pro_content_img {
			margin-bottom: var(--sp-3);
		}
				
		> h3 {
			margin-bottom: var(--sp-3);
		}
		> p {
			margin-bottom: var(--sp-3);
			font-size: var(--fontsize-m);
			text-align: center;
			line-height: 1.5;
		}
		
		.pro_content_outline {
			width: min(100%, 650px);
			margin-bottom: var(--sp-3);
			font-size: var(--fontsize-r);
			text-align: center;
			border-width: 0 2px 2px;
			border-style: solid;
			border-color: var(--color-red);
			
			> div:first-child {
				padding: var(--sp-1) 0;
				color: #fff;
				background-color: var(--color-red);
			}
			> div:last-child  {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 0.2rem 1rem;
				padding: var(--sp-2);
			}
		}
	}
	
	#tapestry {
		.pro_content_img {
			width: min(60vw, 400px);
		}
	}
	#epBonus {
		padding-top: var(--sp-4);
		.pro_content {
			.pro_content_outline {
				> div:last-child {
					font-size: var(--fontsize-l);
				}
			}
		}
	}
	
	#shopBonus {
		.pro_content {
			gap: var(--sp-5);
		}
		.sbonus_box {
			display: grid;
			justify-items: center;
			border-top: 3px dotted #ccc;
			padding-top: var(--sp-3);
			text-align: center;
			> h3::after {
				content: "様";
				margin-left: 0.5rem;
				font-size: var(--fontsize-r);
				font-weight: 500;
			}
			.sbonus_img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: var(--sp-1);
				width: 100%;
				margin: var(--sp-3) 0;
				> div {
					width: min(70vw, 365px);
				}
			}
			.sbonus_item {
				color: var(--color-terracotta);
				font-size: var(--fontsize-l);
				font-weight: 700;
				> span {
					display: block;
				}
			}
			> a.btn {
				margin-top: var(--sp-3);
				font-size: var(--fontsize-ml);
			}
			.pro_content_outline {
				margin: var(--sp-3) 0 0;
				
				> div > p {				
					span {
						display: inline-block;
					}
					+ p {
						margin-top: var(--sp-1);
					}
				}
			}
		}
		.sbonus_box:last-of-type {
			padding-bottom: var(--sp-4);
			border-bottom: 3px dotted #ccc;
		}
		div.anno {
			margin-top: var(--sp-1);
		}
	}
	#dlStore {
		> h2 {
			margin-bottom: var(--sp-1);
		}
		.pro_content {
			> .dle_price {
				margin-bottom: var(--sp-3);
				font-size: var(--fontsize-l);
				font-weight: 800;
				> span {
					font-size: var(--fontsize-r);
					font-weight: 500;
				}
			}
			> a.btn {
				margin-bottom: var(--sp-3);
				span {
					display: inline-block;
				}
			}
			> hr.line_dot {
				margin-top: var(--sp-1);
			}
		}
		.pro_content_outline {
			> div:last-child {
				display: block;
				ul {
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: center;
					gap: 0 0.5rem;
					
					li {
						list-style-type: none;
						&::before {
							content: "■";
						}
					}
				}
			}
		}
	}
}

/*///////////////////////////////////////////////////
	FOOTER
///////////////////////////////////////////////////*/
#footer {
	margin: 0 auto;
	padding-top: var(--sp-5);

	.sns_link {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--sp-2);
/*		padding-top:  var(--sp-3);*/
		
		a.btn {
			font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
		}
	}
	> footer {
		padding: var(--sp-5) var(--sp-1) var(--sp-3);
		text-align: center;
		font-size: var(--fontsize-xr);
	}
}


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

	/*/////////// ■common class■ ///////////*/
	/*/////////// ■STORY■ ///////////*/
	#story {
		section {
			> p {}
		}
	}
	/*/////////// ■CHARACTER■ ///////////*/
	#character {
		.chara_box {
			.chara_prof {
				.chara_costume {
					> a {
						flex: 1;
						max-width: 120px;
					}
				}
			}
		}
	}
	
	
}/*	Tablet -- end */

@media(667px <= width){
/*	Tablet&PC -- 667px ~	*/
	
	
	/*/////////// ■Common Class■ ///////////*/
	dl > dd.pro_type {
		> dl {
			flex-direction: row;
			align-items: center;
			
			+ dl {
				margin-top: var(--sp-1);
			}
		}
	}
	
	/*/////////// ■TOP■ ///////////*/
	#information {
		#news {
			height: 10rem;
			#newsInner {
				> div {
					padding: 0 0 var(--sp-1);
					> time {
						margin-bottom: var(--sp-1);
					}
					> p {
						text-align: center;
						line-height: 1.8;
					}
				}
			}
		}
		#topics {
			flex-direction: row;
			> * {
				width: calc(50% - calc(var(--sp-2) / 2));
			}
		}
	}
	/*/////////// ■STORY■ ///////////*/
	#story {
		&::after {
			top: 67%;
		}
	}
	
	/*/////////// ■GRAPHIC■ ///////////*/
	#graphic {
		a.mimg {
			width: min( calc( 32.8% - calc( var(--sp-2) / 2)), 240px);
		}
	}
	/*/////////// ■PRODUCT■ ///////////*/
	#product {
		#shopBonus {
			.sbonus_box {
				.sbonus_img {
					flex-direction: row;
					> div {
						width: min(calc(50% - calc(var(--sp-1) / 2)), 365px);
					}
				}
			}
		}
		#dlStore {
			.pro_content_outline {
				> div:last-child {
					ul {
						flex-direction: row;
					}
				}
			}
		}
	}
	

}/*	Tablet&PC -- end */

@media(960px <= width){
/*	PC -- 960px ~	*/
	body {
		background-image: url(images/bg_cloud_left.png), url(images/bg_cloud_right.png), url(images/bg_sqdia.png), url(images/bg_dia.png),
		linear-gradient(to bottom, #f1e369, #fbdb83, #ffd693, #ffd1b1, #ffcec2, #ffcbd1);
		background-position: 0% 28%, 100% 10%, 50% 95%, 0% 0%, 0% 0%;
		background-attachment: fixed, fixed, fixed, fixed, fixed;
		background-repeat: no-repeat, no-repeat, repeat-x, repeat, repeat;
		background-size: 30vw, 30vw, auto, auto, auto;
	}
	/*/////////// ■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; }
	
	/*/////////// ■TOP■ ///////////*/
	#information {
		#topics {
			> div {
				display: block;
			}
		}
	}
	
	/*/////////// ■STORY■ ///////////*/
	#story {
		section {
			> p {
				text-align: center;
			}
		}
	}
	/*/////////// ■Footer■ ///////////*/
	#footer {
	}
}/*	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; }
}