@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; }
html { font-size: 62.5%; }
body { background: #002263; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; line-height: 1.8; font-feature-settings: "palt"; color: #838383; letter-spacing: .05em; margin: 0 !important; padding: 0 !important; font-feature-settings: "palt"; }
hr { display: none; }
ul { list-style: none; }
header, section, nav, article, footer { display: block; }
img { vertical-align: bottom; }
audio { width: 100%;}

.cen { text-align: center; }
.rig { text-align: right; }
.mini { font-size: smaller; }
.allcen { display: flex; justify-content: center; align-items: center; }
.none { opacity: .3; }
.m50 { margin-bottom: 50px !important;}
.cs { display: inline-block; color: #c0c0c0; padding: 0 0 1.5em 30px; background: url(../img/deco_time.png) no-repeat; }
.end { margin-bottom: 0 !important;}

/*リンク設定
----------------------------------------------*/
a { color: #0068bb; }
a:hover { color: #008cff; transition: 0.5s; text-decoration: none; }
a img:hover { opacity: .5; transition: .5s; }
.wop { background: url(../img/op.svg) no-repeat 100% 50%; background-size: .5em; padding-right: 1em; }

.btn { font-size: 1.6rem; text-align: center; display: block; width: 100%; max-width: 300px; margin: 0 auto .5em; border-radius: 100vh; padding: 10px 0; color: #fff; text-decoration: none; background: #ff7300 url(../img/op.svg) 90% 50% no-repeat; background-size: 18px;}
.btn:hover { background: #ffa04b url(../img/op.svg) 90% 50% no-repeat; background-size: 18px; opacity: .5s; color: #fff; }

/*おやくだち
----------------------------------------------*/
.coution { background: rgba(204,204,204,.5); padding: 3%; border: 1px solid #CCC; }
.strong { background: linear-gradient(transparent 60%, #ffdfe1 60%); padding: 0 .25em; }
.youtube { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 15px; }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

#loading { width: 100vw; height: 100vh; transition: all 1s; background-color: #bfdbf0; position: fixed; top: 0; left: 0; z-index: 99999; }
.spinner { width: 100px; height: 100px; margin: 200px auto; background-color: #36405f; border-radius: 100%; animation: sk-scaleout 1.0s infinite ease-in-out; }
@keyframes sk-scaleout {
  0% { transform: scale(0);}
	100% { transform: scale(1.0); opacity: 0; }
}
.loaded { opacity: 0; visibility: hidden; }

/*フッター
----------------------------------------------*/
footer { background: #000; width: 100%; text-align: center; padding: 25px 0 40px; color: #ddd; font-size: 12px; }
footer ul { display: flex; justify-content: center; align-items: center; margin: 15px 0; }
footer ul li { margin: 0 5px; }
footer ul li img { border: 1px solid #ddd; background: #ddd; }

/*----- フェードイン -----*/
.inviewfadeIn { opacity: 100; transform: translate(0, 100px); -webkit-transform: translate(0, 100px); transition: 1s; }
.fadeIn { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); }


/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
SP用タグ
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/

img { max-width: 100%; height: auto; }
.sp { display: none; }
@media screen and (max-width: 720px) {
	.sp { display: block; }
	.pc { display: none; }
	
	html { font-size: 50%;}
}



/*root
----------------------------------------------*/
:root{
	/* 色 */
	--color-dark: #36405f;
	--color-light: #fff;
	--color-light-bg: rgba(255,255,255,.9);
	--color-theme: #bfdbf0;
	--color-accent: #ffd9e5;

	--color-tokimeki: #a05587;

	/* サイズ */
	--width-base: 100%;
	--width-sp: 90%;
	--width-max: 1280px;
	--width-main: 960px;
	--width-small: 820px;
	--width-sub: 640px;

	/* 角丸 */
	--radius-base: 50px;

	/* 文字 */
	--font-size-small: 1.4rem;
	--font-size-medium: 1.6rem;
	--font-size-base: 1.8rem;
	--font-size-big: 2.4rem;

	--font-weight-base: 400;
	--font-weight-bold: 700;

	/* スペース */
	--space-base: 10px;
	--space-l: 50px;
}
/*--------------------------------------------*/

.wrapper {
	width: var(--width-base);
	max-width: var(--width-max);
	margin: 0 auto;
	background: var(--color-theme);
	color: var(--color-dark);
}

#concept {
	width: var(--width-base);
	max-width: var(--width-main);
	margin: var(--space-l) auto 0;
	font-size: var(--font-size-base);
	position: relative;
}
#concept > h2 {
	position: absolute;
	z-index: 1;
}
#concept > .body {
	max-width: 740px;
	margin: 0 0 0 auto;
	background: var(--color-light);
	padding: var(--space-l);
	box-sizing: border-box;
	border-radius: var(--radius-base) 0 0 0;
}
#concept > .body > p {
	text-align: justify;
	width: var(--width-base);
	max-width: var(--width-sub);
	margin-bottom: 1.5em;
}
#concept > .body > p:last-child {
	margin-bottom: 0;
	font-size: var(--font-size-small);
	border-top: 1px dotted var(--color-dark);
	padding-top: 1em;
}
#concept > .body > p > span {
	background: linear-gradient(transparent 60%, #fff978 60%);
}
#concept > .body > p > strong {
	font-weight: var(--font-weight-bold);
}
.color1,.color2,.color3,.color4 { padding: 0 .25em;}
.color1 { background: linear-gradient(transparent 60%, #bbeeff 60%) !important; }
.color2 { background: linear-gradient(transparent 60%, #ffdfe1 60%) !important; }
.color3 { background: linear-gradient(transparent 60%, #e1e1e1 60%) !important; }
.color4 { background: linear-gradient(transparent 60%, #d9ff86 60%) !important; }


#story {
	width: var(--width-base);
	height: 900px;
	background: url(../img/story_bg.webp) 50% no-repeat;
	background-size: cover;
	position: relative;
}
#story > .body {
	position: absolute;
	place-self: center;
	inset: 0;
	background: var(--color-light-bg);
	border-radius: var(--radius-base);
	width: var(--width-small);
	padding: var(--space-l);
	box-sizing: border-box;
}
#story > .body > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#story > .body > p {
	width: var(--width-sub);
	font-size: var(--font-size-base);
	margin: 0 auto 1.5em;
	text-align: justify;
}
#story > .body > p > strong {
	font-weight: var(--font-weight-bold);
	background: linear-gradient(transparent 60%, #ffdfe1 60%);
	padding: 0 .25em;
}

#keyword {
	background: var(--color-dark);
	padding: var(--space-l) 0;
	color: var(--color-light);
}
#keyword > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#keyword > dl {
	width: var(--width-sub);
	margin: 0 auto;
}
#keyword > dl > dt {
	text-align: center;
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-bold);
	display: flex;
	align-items: center;
	margin-bottom: .5em;
}
#keyword > dl > dt::before,
#keyword > dl > dt::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--color-light);
}
dt::before {
  margin-right: 1.5em;
}
dt::after {
  margin-left: 1.5em;
}
#keyword > dl > dd {
	font-size: var(--font-size-base);
	margin-bottom: 3em;
	text-align: justify;
}
#keyword > dl > dd > ul {
	display: flex;
	gap: var(--space-base);
	justify-content: center;
	margin-bottom: var(--space-base);
}
#keyword > dl > dd > ul > li > img {
	border-radius: 100vh;
}

#chara {
	padding: var(--space-l) 0;
}
#chara > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
.slider-container {
	width: var(--width-main);
	margin: 0 auto;
	display: flex;
	/*align-items: center;*/
	justify-content: center;
	/*height: 100vh;*/
	position: relative;
}
.arrow-btn {
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	z-index: 100;
	padding: 0;
}
.arrow-btn img {
	width: 40px;
	height: auto;
}
.left {
	left: -50px;
	top: 400px;
}
.right {
	right: -50px;
	top: 400px;
}
.content-wrapper {
	display: flex;
	width: 100%;
	max-width: 960px;
	/*align-items: flex-end;*/
	justify-content: center;
}
.char-image {
	flex: 0 0 50%;
	text-align: right;
}
.char-image img {
	/*height: 85vh;
	object-fit: contain;
	vertical-align: bottom;*/
}
.char-details {
	flex: 1;
}
.ruby {
	font-size: 1.8rem;
	margin-bottom: 0;
}
#name {
	font-size: 4rem;
	margin: 0;
	font-weight: var(--font-weight-bold);
}
.cv {
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.description {
	line-height: 1.8;
	max-width: 480px;
	margin-bottom: 1em;
	font-size: 1.8rem;
	text-align: justify;
}
.voice-container {
	margin-bottom: 20px;
}
.thumbnails {
	display: flex;
	gap: 5px;
	max-width: 480px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.thumb {
	width: 150px;
	height: 150px;
	object-fit: cover;
	cursor: pointer;
	border: 3px solid transparent;
	opacity: 0.7;
}
.thumb.active, .thumb:hover {
	opacity: 1;
	border-color: var(--color-dark);
}
@keyframes fadeIn { from
	{ opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
    .fade-in { animation: fadeIn 0.6s ease-out forwards;
	}

#track {
	padding: var(--space-l) 0;
}
#track > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#track > .body {
	background: var(--color-light-bg);
	border-radius: var(--radius-base);
	width: var(--width-small);
	padding: var(--space-l);
	box-sizing: border-box;
	margin: 0 auto;
}
#track > .body > dl {
	width: var(--width-sub);
	margin: 0 auto;
}
#track > .body > dl > dt {
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-bold);
	border-bottom: 1px solid var(--color-dark);
}
#track > .body > dl > dt > span {
	font-size: var(--font-size-base);
}
#track > .body > dl > dd {
	font-size: var(--font-size-medium);
	margin-bottom: 2em;
	text-align: justify;
}
#track > .body > p {
	font-size: var(--font-size-medium);
	text-align: center;
	margin-bottom: 2em;
}
.tokimekiplus {
	color: var(--color-tokimeki);
}
.tokimekiplus > dt {
	border-bottom: 1px solid var(--color-tokimeki) !important;
}

#cast {
	padding: var(--space-l) 0;
}
#cast > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#cast > p {
	text-align: center;
	font-size: var(--font-size-base);
	margin-bottom: calc(var(--space-l)/2);
}
#cast > .accordion-item {
	width: var(--width-small);
	margin: 0 auto calc(var(--space-base)*1.5);
	background: var(--color-light);
	border-radius: var(--radius-base);
	overflow: hidden;
}
#cast > .accordion-item > summary {
	list-style: none;
	padding: 20px 30px;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	color: var(--color-dark);
	font-size: var(--font-size-big);
}
#cast > .accordion-item > summary > p > span {
	font-size: var(--font-size-base);
}
summary::before {
	content: '+';
	margin-right: 1.9em;
	font-size: var(--font-size-big);
	color: var(--color-dark);
}
details[open] summary::before {
	content: '−';
}
#cast > .accordion-item > .content {
	width: var(--width-sub);
	margin: 0 auto;
	font-size: var(--font-size-medium);
	padding-bottom: var(--space-l);
}
#cast > .accordion-item > .content > dl > dt {
	font-weight: var(--font-weight-bold);
}
#cast > .accordion-item > .content > dl > dd {
	margin-bottom: 2em;
	text-align: justify;
}
#cast > .accordion-item > .content > dl > dd:last-child {
	margin-bottom: 0;
}

#special {
	padding: var(--space-l) 0;
}
#special > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#special > .body {
	text-align: center;
	width: var(--width-small);
	margin: 0 auto;
}
#special > .body > h3 {
	font-size: 4rem;
	font-weight: var(--font-weight-bold);
	margin-bottom: calc(var(--space-base)*2.5);
}
#special > .body > p {
	font-size: var(--font-size-big);
	margin-bottom: calc(var(--space-base)*2.5);
}
.status-off {
	filter: grayscale(100%);
	transition: filter 0.3s ease; /* 滑らかに切り替え */
}
.status-on {
	filter: grayscale(0%);
	transition: filter 0.3s ease;
}


#bonus {
	padding: var(--space-l) 0;
}
#bonus > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#bonus > .body {
	background: var(--color-light-bg);
	border-radius: var(--radius-base);
	width: var(--width-small);
	padding: var(--space-l);
	box-sizing: border-box;
	margin: 0 auto;
}
#bonus > .body > h3 {
	text-align: center;
	font-size: var(--font-size-big);
}
#bonus > .body > p {
	text-align: center;
	font-size: var(--font-size-base);
	margin: 2em 0;
}
#bonus > .body > dl {
	width: var(--width-sub);
	margin: 0 auto;
}
#bonus > .body > dl > dt {
	font-size: var(--font-size-big);
	font-weight: var(--font-weight-bold);
	border-bottom: 1px solid var(--color-dark);
	margin-bottom: .5em;
}
#bonus > .body > dl > dd {
	font-size: var(--font-size-medium);
}
#bonus > .body > ul {
	width: var(--width-sub);
	margin: 0 auto;
	display: flex;
	gap: var(--space-base);
}
#bonus > .body > ul > li {
	width: var(--width-max);
}

#product {
	padding: var(--space-l) 0;
}
#product > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#product > .body {
	display: flex;
	justify-content: center;
	gap: 15px;
}
#product > .body > .box {
	width: 325px;
	height: fit-content;
	background: var(--color-light-bg);
	border-radius: var(--radius-base);
	box-sizing: border-box;
	overflow: hidden;
	padding-bottom: var(--space-l);
}
#product > .body > .box > h3 {
	background: var(--color-dark);
	color: var(--color-light);
	font-size: var(--font-size-big);
	text-align: center;
	padding: 15px;
}
#product > .body > .box > p {
	width: 250px;
	margin: 0 auto;
	text-align: center;
	font-size: var(--font-size-medium);
}
#product > .body > .box > p > span {
	font-size: 1.2rem;
}
#product > .body > .box > .price {
	width: 200px;
	height: 200px;
	background: var(--color-dark);
	font-size: 4rem;
	font-weight: var(--font-weight-bold);
	color: var(--color-light);
	border-radius: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto;
	text-align: center;
	line-height: .8;
}
#product > .body > .box > .price > p > span {
	font-size: 1.8rem;
}
#product > .body > .box > dl {
	font-size: 1.2rem;
	width: 250px;
	margin: 20px auto;
}
#product > .body > .box > dl > dt {
	text-align: center;
	border: 1px solid;
	margin-bottom: 10px;
}
#product > .body > .box > dl > dd {
	margin-bottom: 1em;
}
#product > .body > .tokimekiplus > h3,
#product > .body > .tokimekiplus > .price {
	background: var(--color-tokimeki);
}
#product > .body > .shienkansya > h3,
#product > .body > .shienkansya > .price {
	background: #c19c24;
}
#product > .body > .shienkansya {
	color: #c19c24;
}
#product > .body > .shienkansya > p {
	text-align: justify;
}

#staff {
	padding: var(--space-l) 0;
}
#staff > h2 {
	text-align: center;
	margin-bottom: calc(var(--space-l)/2);
}
#staff > h3 {
	text-align: center;
	font-size: var(--font-size-big);
	margin-bottom: calc(var(--space-base)*2.5);
}
#staff > dl {
	text-align: center;
}
#staff > dl > dt {
	font-size: var(--font-size-base);
}
#staff > dl > dd {
	font-size: var(--font-size-big);
	margin-bottom: 1.5em;
}