@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500;700&family=M+PLUS+1:wght@100..900&display=swap');
/*	font-family: Century, 'Kaisei Decol', '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;	*/

/* 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: #000;
	font-family: Arial, 'M PLUS 1', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: 700;
	line-height: 1.1;
	background-color: #fff;
}
img:not(.nrs) {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
	text-decoration: none;
}
a.btn {
	display: inine-block;
	padding: 0 0.8rem;
	color: #fff;
	background-color: #32415f;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	transition: .2s;
}
a.btn:hover {
	background-color: #62e1d8;
}
a img {
	transition: .2s;
}
a:hover:not(.roll) img {
	opacity: .5;
	transition: .2s;
}

.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-color: #fff;
	background-image: url(images/bg_1.jpg);
	background-position: center, center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg_2 {
	background-color: #eee;
	background: url(images/bg_2.gif);
}
.bg_4 {
	background-color: #ffcad8;
	background-image: url(images/bg_4.gif);
}

.t_font_k {
	font-family: "Kaisei Decol", '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}
.t_s {
	display: inline-block;
	font-size: 80%;
	font-weight: 700;
	line-height: 1.1;
}
.t_bold {
	font-weight: 700;
}
.t_strong {
	font-weight: 900;
}
.t_blc span:not(.t_ubdr_red):not(.t_bg_red) {
	display: inline-block;
}

.t_red { color: #cc0000; }
.t_pink { color: #ff00ba; }
.t_blue { color: #007cf0; }
.t_bdr_pk_bk {
	color: #fff;
	font-weight: 900;
	text-shadow:
	1px 0px 1px #ff00ba, 0px 1px 1px #ff00ba, 1px 1px 1px #ff00ba, -1px 0px 1px #ff00ba, 0px -1px 1px #ff00ba, -1px -1px 1px #ff00ba,	
	2px 0px 2px #ff00ba, 0px 2px 2px #ff00ba, 2px 2px 2px #ff00ba, -2px 0px 2px #ff00ba, 0px -2px 2px #ff00ba, -2px -2px 2px #ff00ba,	
	3px 0px 3px #ff00ba, 0px 3px 3px #ff00ba, 3px 3px 3px #ff00ba, -3px 0px 3px #ff00ba, 0px -3px 3px #ff00ba, -3px -3px 3px #ff00ba,	
	4px 0px 1px #000, 0px 4px 1px #000, 4px 4px 1px #000, -4px 0px 1px #000, 0px -4px 1px #000, -4px -4px 1px #000,	
	4px 1px 1px #000, 1px 4px 1px #000, 4px 4px 1px #000, -4px 1px 1px #000,
	1px -4px 1px #000, -4px -4px 1px #000,	
	4px 2px 1px #000, 2px 4px 1px #000, 4px 4px 1px #000, -4px 2px 1px #000,
	2px -4px 1px #000, -4px -4px 1px #000,	
	4px 3px 1px #000, 3px 4px 1px #000, 4px 4px 1px #000, -4px 3px 1px #000, 3px -4px 1px #000, -4px -4px 1px #000,	
	5px 0px 0px #000, 0px 5px 0px #000, 5px 5px 0px #000,
	5px 1px 1px #000, 1px 5px 1px #000, 5px 5px 1px #000,
	5px 2px 2px #000, 2px 5px 2px #000, 5px 5px 2px #000,
	5px 3px 3px #000, 3px 5px 3px #000, 5px 5px 3px #000,
	5px 4px 4px #000, 4px 5px 4px #000, 5px 5px 4px #000,	
	6px 0px 0px #000, 0px 6px 0px #000, 6px 6px 0px #000,
	6px 1px 1px #000, 1px 6px 1px #000, 6px 6px 1px #000,
	6px 2px 2px #000, 2px 6px 2px #000, 6px 6px 2px #000,
	6px 3px 3px #000, 3px 6px 3px #000, 6px 6px 3px #000,
	6px 4px 4px #000, 4px 6px 4px #000, 6px 6px 4px #000,
	6px 5px 5px #000, 5px 6px 5px #000, 6px 6px 5px #000,	
	0px 0px 1px #ff00ba, 0px 0px 2px #ff00ba, 0px 0px 3px #ff00ba, 0px 0px 4px #000, 0px 0px 5px #000;
}
.t_ubdr_red {
	border-width: 0 0 min(0.7vw, 5px);
	border-style: solid;
	border-color: #ff1d58;
}
.t_bg_red {
	display: inline-block;
	padding: 0 0.4rem;
	color: #fff;
	background-color: #ff1d58;
}

.box {
	padding: 2vw;
	border-color: #ff1d58;
	border-width: min(0.8vw, 5px);
	border-style: solid;
	border-radius: min(3vw, 30px);
	box-shadow: min(1vw, 7px) min(1vw, 7px) 0 0 #000;
	background-color: #fff;
}

hr {
	display: block;
	border: 0;

	&.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;
	}
}

h1 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: min(15vw, 80px);
	color: #32415f;
	text-align: center;
	background-color: #eee;
	background: url(images/bg_2.gif);
	
	> p {
		position: relative;
		padding: min(1vw,15px) 5vw;
		font-size: clamp(1.3rem, 1.158rem + 0.71vw, 2rem);
		
		&::before, &::after {
			content: "";
			position: absolute;
			width: min(2.3vw, 26px);
			height: 100%;
			background-image: url(images/ic_h_tri_1.gif);
			background-repeat: no-repeat;
			background-position: top left;
			background-size: contain;
		}
		&::before {
			top: 0;
			left: 0;
		}
		&::after {
			bottom: 0;
			right: 0;
			transform: rotate(180deg);
		}
	}
	&.bt {
		border-top: 5px solid #32415f;
	}
}
h2 {
	margin: 3vw 0;
	color: #fff;
	font-size: clamp(1rem, 0.899rem + 0.51vw, 1.5rem);
	text-align: center;
	
	> span {
		display: inline-block;
		min-width: min(40vw, 13rem);
		max-width: 90vw;
		padding: 0.3rem 1rem;
		background-color: #ff00ba;
		box-shadow: 4px 4px 0 0 #ccc;
	}
}
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: #ff00ba;
	
	&::before, &::after {
		content: "▼";
	}
}

dl {
	> dt {
		display: inline-block;
		min-width: 7rem;
		padding: 0.2rem 0.5rem;
		color: #fff;
		font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
		background-color: #ff1d58;
	}
	> dd {
		padding: min(1vw, 10px) 0;
		font-size: clamp(0.8rem, 0.658rem + 0.71vw, 1.5rem);
		line-height: 1.3;
	}
}

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


/*///////////////////////////////////////////////////////////////
	MENU
/////////////////////////////////////////////////////////////////*/
.drawer-hamburger {
	background-color: #ff0054 !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: #ff0054 !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
/////////////////////////////////////////////////////////////////*/
#topWrapper {
	position: relative;
}
#topMainImgArea {
	position: relative;
	z-index: 0;
}
#topMainImg {
	position: relative;
	width: min(100%, 1500px);
	margin: 0 auto;
}
#logoLink {
	display: block;
	position: absolute;
	top: 2%;
	left: 2%;
    width: clamp(73px, 12vw, 150px);
}
#topLogoDate {
	position: absolute;
	top: 33%;
	left: 2%;
	width: min(50%, 690px)
}

#topInformation {
	width: 100%;
	padding: 0.1px;
	background-color: rgba(255,255,255,0.5);
	background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,1));
}
#news {
	width: min(90vw, 950px);
	height: 100px;
	margin: 3vw auto;
	padding: clamp(13px, 2vw, 20px);
	background-color: #f4eef2;

	.news_inner > div {
		display: flex;
		align-items: flex-start;
		gap: 1vw;
	
		+ 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;
			color: #fff;
			text-align: center;
			background-color: #32415f;
		}
		
		div {
			flex: 1;
			font-size: clamp(0.8rem, 0.699rem + 0.51vw, 1.3rem);
			font-weight: 600;
		}
	}
	
	a {
		color: #ff00ba;
		
		&:hover {
			color: #32415f;
		}
	}
}
#topTopics {
	padding: 0.1px;
	background-color: #62e1d8;
	
	> div {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 1vw;
		width: min(90vw, 1700px);
		margin: 3vw auto;
		
		> a {
			display: block;
			width: min(100%, 700px);
		}
		
		> .top_topics_cs {
			display: none;
			align-self: stretch;
			justify-content: center;
			align-items: center;
			width: calc(33% - 1vw);
			color: #62e1d8;
			background-color: #fff;
			border-radius: 1vw;
		}
	}
}

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

	> div {
		width: min(90%, 1200px);
		margin: 5vw auto;
		
		> p {
			font-size: clamp(0.9rem, 0.718rem + 0.91vw, 1.8rem);
			line-height: 1.3;
			
			+ 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);
		}
	}
}

/*///////////////////////////////////////////////////////////////
	CHARACTER
/////////////////////////////////////////////////////////////////*/
#character {
	min-height: 800px;
}

#mama {
	position: relative;
	z-index: 0;
	min-height: 400px;
	
	&::before, &::after {
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: 100%;
		height: min(11vw, 200px);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	&::before {
		top: 0;
		left: 0;
		background-image: url(images/bg_3a.svg);
		background-position: top left;
	}
	&::after {
		bottom: 0;
		right: 0;
		background-image: url(images/bg_3b.svg);
		background-position: bottom right;
/*		border-bottom: 2vw solid #62e1d8;
		box-sizing: content-box;	*/
	}
}

#son {
	flex-direction: column;
	align-items: center;
	margin-top: -0.5px;
	background-color: #62e1d8;
	
	> .chara_prof_area {
		padding-top: min(7vw, 30px);
	}
	
	> hr.bdr_dash {
		margin-top: 4vw;
		margin-bottom: min(3vw, 30px);
	}
}
.chara_base {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	> div {
		position: relative;
		z-index: 2;
		display: flex;
		margin-top: clamp(3px, 1vw, 76px);
	}
}
.chara_img {
	justify-content: flex-end;
/*	width: min(40%, 780px);*/
	width: clamp(40%, 95vw, 780px);
	padding: 0 2vw;
	
	&::before {
		content: "";
		position: absolute;
		top: 3%;
		left: 3%;
		width: clamp(50px, 20vw, 160px);
		height: min(33%, 563px);
		background: url(images/character/copy_mama.png) no-repeat top left;
		background-size: contain;
	}
}
.chara_prof_area {
	flex-direction: column;
	align-items: center;
/*	width: min(60%, 1000px);*/
	width: clamp(60%, 90vw, 1000px);
	padding-right: 3vw;
	
	> table {
		width: clamp(260px, 80%, 450px);
		margin-bottom: min(5vw, 40px);
		border-collapse: collapse;
		border: 2px solid #ff1d58;
		box-shadow: 4px 4px 0 0 #000;
		
		tr {
			th, td {
				padding: min(1.5vw, 12px) min(2vw, 20px);
			}
			th {
				color: #fff;
				font-size: clamp(0.6rem, 0.519rem + 0.41vw, 1rem);
				font-weight: 500;
				background-color: #ff1d58;
			}
			td {
				color: #ff1d58;
				font-size: clamp(0.8rem, 0.739rem + 0.3vw, 1.1rem);
				text-align: center;
				border: 2px solid #ff1d58;
				background-color: #fff;
			}
			
			+ tr > th {
					border-top: 2px solid #fff;
			}
		}
	}
}

.chara_prof_text {
	width: min(100%, 850px);
	margin: min(3vw, 40px) 0 min(5vw, 40px);
	font-size: clamp(0.8rem, 0.597rem + 1.01vw, 1.8rem);
	line-height: 1.6;
}
.chara_prof_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 850px);

	> div {
		display: flex;
	}
}
.chara_cos_sw {
	gap: 1vw;

	> div:hover {
		opacity: .5;
		transition: .2s ease-in-out;
		cursor: pointer;
	}
}
.sample_voice {
	flex-wrap: wrap;
	justify-content: center;
	gap: min(1.5vw, 10px);
	margin-top: 1.5vw;
	
	.csvoice {
		width: min(calc(50% - 0.5vw), 120px);
		padding: 0.3vw 0.5vw;
		padding: min(5vw, 5px);
		font-size: clamp(0.7rem, 0.639rem + 0.3vw, 1rem);
		text-align: center;
		border: min(0.7vw, 3px) solid #ff0273;
		border-radius: min(3vw, 8px);
		box-shadow: min(0.7vw, 3px) min(0.7vw, 3px) 0 0 #000;
		transition: .2s ease-in-out;
	
		&:nth-child(n+6) {
			color: #ff1d58;
		}
		
		&:hover {
			color: #fff;
			background-color: #ff0273;
			cursor: pointer;
		}
	}
}


/*///////////////////////////////////////////////////////////////
	SAMPLE
/////////////////////////////////////////////////////////////////*/
#sample > section {
	padding: 1vw 0 3vw;
}
#sample {
	> section > div {
		display: grid;
		grid-template-columns: repeat(auto-fill, min(calc(50% - 1vw), 500px));
		justify-content: space-between;
		gap: 2vw 1vw;
		width: min(90vw, 1700px);
		margin: 4vw auto 2vw;
		
		> a {
			position: relative;
			z-index: 0;
			
			&::before {
				content: attr(data-num);
				position: absolute;
				bottom: 11%;
				right: 0;
				z-index: 1;
				display: block;
				width: min(25%, 7rem);
				padding: min(2vw, 7px);
				color: #fff;
				font-size: clamp(0.8rem, 0.597rem + 1.01vw, 1.8rem);
				font-weight: 400;
				text-align: center;
				box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.3);
			}
		}
	}
}
.mimg {
	&::before {
		background-color: #ff1d58;
		background: linear-gradient(to right, #ff1d58, #ec003e);
	}
	&:hover::before {
		background: #f57f9e;
	}
}
.mmv {
	&::before {
		background-color: #62e1d8;
		background: linear-gradient(to right, #62e1d8, #39ccc7);
	}
	&:hover::before {
		background: #9ce5e3;
	}
}


/*///////////////////////////////////////////////////////////////
	DOWNLOAD
/////////////////////////////////////////////////////////////////*/

/*///////////////////////////////////////////////////////////////
	PRODUCT
/////////////////////////////////////////////////////////////////*/
#product {
	display: grid;
	justify-items: center;
	min-height: 100vh;
	
	> section, > div:not(#productHeader) {
		width: min(90vw, 1500px);
	}
	
	> div.anno {
		margin-top: 2vw;
		padding: min(2vw, 15px);
		border: 3px solid #ff67b9;
	}
}

#productHeader {
	position: relative;
	margin-bottom: 4vw;
	background
	
	.mdv {
		position: relative;
		z-index: 0;
	}
}
.pro_header_point {
	position: relative;
	z-index: 1;
	width: 90vw;
	margin: -25vw auto 0;
	
	> div {
		display: flex;
		flex-direction: column;
		gap: 1vw;
		
		> div {
			flex: 1;
			height: 9.5vw;
			padding: min(2vw, 18px) min(2vw, 12px);
			color: #a24e7e;
			font-size: clamp(0.8rem, 0.699rem + 0.51vw, 1.3rem);
			text-align: center;
			line-height: 1.3;
			border-radius: 1.3vw;
			background-color: #fff;
			box-shadow: 0 0 8px 0 #ff79aa;
		}
	}
	
	> p {
		margin: min(1vw, 8px) 0 1vw;
		font-size: clamp(0.6rem, 0.559rem + 0.2vw, 0.8rem);
		font-weight: 500;
		text-align: right;
	}
}

.spec_list {
	display: flex;
	flex-direction: column;
	gap: 0 1vw;
}

.pro_content {
	margin-top: 4vw;
	
	> div {
		display: flex;
		flex-direction: column;
		gap: 1vw;
	}
	.content_outline {
		> p {
			margin-bottom: 2vw;
			padding: 0 1vw;
			font-size: clamp(0.8rem, 0.597rem + 1.01vw, 1.8rem);
			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);
	}
}

.pro_content_other {

	> div:not(.anno) {	
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
/*		gap: 5vw 2vw;*/
		margin-top: 3vw;
		margin-bottom: 3vw;
		
		> section {
			text-align: center;
		}
	}
	
	h2 {
		margin: 0 0 2vw;
		font-size: clamp(1.1rem, 0.918rem + 0.91vw, 2rem);
		
		> span {
			padding: min(2vw, 10px) 2vw;
		}
		
		~ h2 {
			margin-top: 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);
		}
	}
}
#shopBonus {

	> 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 2vw;
	padding: 1vw;
	font-size: clamp(0.7rem, 0.619rem + 0.41vw, 1.1rem);
	border: 2px solid #000;
	
	> b {
		display: inline-block;
		margin-bottom: min(1vw, 8px);
	}
}


/*///////////////////////////////////////////////////////////////
	Footer
/////////////////////////////////////////////////////////////////*/
#footer {
	margin-top: 3vw;
	padding: 3vw 0 1vw;
	text-shadow: none;

	.sns_link {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}
	
	> footer {
		margin-top: 2vw;
		color: #999;
		text-align: center;
		font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
		font-weight: 400;
	}
}

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

	/*/////////// ■TOP■ ///////////*/
	#topTopics {		
		> div {
			flex-direction: row;
			
			> a {
				width: calc(50% - 1vw);
			}
		}
	}
	/*/////////// ■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; }
	
	h3 {
		flex-direction: row;
		align-items: center;
		
		> div {
			flex-direction: row;
			align-items: center;
			
			> span {
				min-width: 7rem;
				padding-top: 0.3rem;
			}
		}
	}
	
	/*/////////// ■TOP■ ///////////*/
	#logoLink {
		right: 2%;
		left: auto;
	}
	
	#topInformation {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		min-height: 20%;
	}
	#news {
		height: 120px;
	}
	
	#topTopics {		
		> div {
			flex-direction: row;
			
			> a {
				width: calc(33% - 1vw);
			}
			> .top_topics_cs {
				display: flex;
			}
		}
	}
	/*/////////// ■STORY■ ///////////*/
	#story > div > p {
		text-align: center;
	}
	/*/////////// ■CARACTER■ ///////////*/
	
	#mama > .chara_prof_area {
		padding-top: 11vw;
	}
	.chara_base {
		flex-direction: row;
		align-items: flex-start;
	}
	.chara_prof_text {
		text-align: center;
	}
	.csvoice {
	
	}
	/*/////////// ■SAMPLE■ ///////////*/
	#sample > section > div {
		grid-template-columns: repeat(auto-fill, min(calc(33% - 1vw), 500px));
	}
	/*/////////// ■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 {
			width: calc(50% - 0.5vw);

		}
	}
	.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;
	}
	/*/////////// ■Footer■ ///////////*/
	#footer {
	}
	#footer .sns_link {
	}
	#footer footer {
	}
}/*	PC -- end */