@charset "utf-8";

/* 共通アイテム */
.deco-top-part {
	margin-left: auto;
	/* 20px-60px */
	padding-top: clamp(1.25rem, 0.643rem + 2.59vw, 3.75rem);
}
@media (min-width: 835px) {
	.deco-top-part {
		/* 530px-1200px(min835px-max1900px) */
		width: clamp(33.125rem, 0.293rem + 62.91vw, 75rem);
	}
}
@media (max-width: 834.98px) {
	.deco-top-part {
		width: 85.3%;
		max-width: 570px;
	}
}

/* 共通コンテンツ */
.lower-wrap {
	max-width: 1400px;
	margin: 0 auto;
	/*100px-200px */
	padding-bottom: clamp(6.25rem, 4.713rem + 6.56vw, 12.5rem);
}
@media (min-width: 1401px) {
	.lower-wrap {
		padding-top: clamp(0.625rem, 0.135rem + 0.94vw, 1.25rem);
	}
}
@media (min-width: 835px)  {
	.lower-wrap {
		width: 88%;
	}
}
@media (min-width: 835px) and (max-width: 1400px)  {
	.lower-wrap {
		padding-top: 10px;
	}
}
@media (max-width: 834.98px) {
	.lower-wrap {
		width: 92%;
		padding-top: 30px;
	}
}


/* イントロ＆あらすじ */
.intro-story-strong {
	color: #3fafe7;
}
.intro-copy {
	margin: 0 calc(50% - 50vw);
}
@media (min-width: 835px) {
	.intro-copy {
		width: 80vw;
	}
}
@media (max-width: 834.98px) {
	.intro-copy {
		width: 100vw;
	}
}
@media (min-width: 835px) {
	.intro-media {
		display: flex;
		justify-content: space-between;
		/* 30px-50px */
		gap: clamp(1.875rem, 0.895rem + 1.88vw, 3.125rem);
	/* 20px-40px */
	padding-top: clamp(1.25rem, 0.27rem + 1.88vw, 2.5rem);
	}
}
.intro-media-text-wrap {
	font-size: var(--font-size-m);
	line-height: 2.8;
}
@media (min-width: 835px) {
	.intro-media-text-wrap {
		max-width: 600px;
	}
}
@media (max-width: 834.98px) {
	.intro-media-text-wrap {
		/* 10px-20px */
		padding-top: clamp(0.625rem, 0.115rem + 2.17vw, 1.25rem);
	}
}
@media (min-width: 835px) {
	.intro-media-text-paragraph {
		padding-top: 1.8em;
	}
}
.intro-media-text-large {
	font-size: var(--font-size-xl);
	font-weight: 700;
}
@media (min-width: 835px) {
	.intro-media-img {
		min-width: 400px;
	}
}
@media (max-width: 834.98px) {
	.intro-media-img {
		/* 5px-10px */
		padding: clamp(0.313rem, 0.058rem + 1.09vw, 0.625rem) 0;
	}
}
.deco-intro-story {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	/* 35px-120px */
	padding: clamp(2.188rem, 0.881rem + 5.57vw, 7.5rem) 0;
}
.intro-story .inner-content-heading {
	text-align: center;
}
.story-text-wrap {
	line-height: 2.8;
}
@media (min-width: 835px)  {
	.story-text-wrap {
		font-size: var(--font-size-l);
		text-align: center;
	}
}
@media (max-width: 834.98px) {
	.story-text-wrap {
		font-size: var(--font-size-m);
	}
}



/* キャスト＆スタッフ */
.cast-staff-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 2em;
	max-width: 1200px;
	margin: 0 auto;
	font-size: var(--font-size-lss);
}
@media (min-width: 835px)  {
	.cast-staff-list {
		column-gap: 2%;
		transform: translateX(10%);
	}
}
@media (max-width: 834.98px) {
	.cast-staff-list {
		column-gap: 4%;
	}
}
@media (min-width: 835px)  {
	.cast-staff-list-item {
		width: 22%;
	}
}
@media (max-width: 834.98px) {
	.cast-staff-list-item {
		width: 48%;
	}
}
.cast-staff-list-role {
	color: #3fafe7;
	font-size: var(--font-size-m);
}
.cast-staff-list-name-supple {
	display: inline-block;
	font-size: var(--font-size-s);
}
.cast-staff-list-name-long {
	font-size: var(--font-size-l);
}


/* 登場人物 */
.characters.lower-wrap {
	max-width: 1600px;
}
.characters .inner-content-heading {
	color: #3fafe7;
}
.characters-list {
	display: grid;
	justify-content: center;
	/* 10px-35px */
	column-gap: clamp(0.625rem, 0.241rem + 1.64vw, 2.188rem);
	/* 50px-130px */
	row-gap: clamp(3.125rem, 1.895rem + 5.25vw, 8.125rem);
	margin: 0 auto;
}
@media (min-width: 835px) {
	.characters-list {
		/* 300px-500px */
		grid-template-columns: repeat(auto-fill, clamp(18.75rem, 8.95rem + 18.78vw, 31.25rem));
	}
}
@media (max-width: 834.98px) {
	.characters-list {
		grid-template-columns: 1fr;
	}
}
.characters-list-item-wrap {
	display: flex;
	justify-content: space-between;
}
@media (min-width: 835px)  {
	.characters-list-item {
		width: 48.5%;
	}
}
@media (max-width: 834.98px) {
	.characters-list-img {
		width: 39%;
	}
}
@media (max-width: 834.98px) {
	.characters-list-desc {
		width: 59%;
	}
}
.characters-list-desc-title-supple {
	padding-top: 1em;
	font-size: var(--font-size-s);
}
@media (min-width: 835px)  {
	.characters-list-desc-title-supple {
		padding-top: 1em;
	}
}
@media (max-width: 834.98px) {
	.characters-list-desc-title-supple {
		padding-top: .6em;
	}
}
.characters-list-desc-title-name {
	font-size: var(--font-size-ls);
	font-weight: 700;
}
.characters-list-desc-text-wrap {
	font-size: var(--font-size-m);
}
@media (min-width: 835px)  {
	.characters-list-desc-text-wrap {
		padding:  1.5em 0;
	}
}
@media (max-width: 834.98px) {
	.characters-list-desc-text-wrap {
		padding:  .8em 0;
	}
}
.characters-list-desc-text {
	padding-top: .5em;
}
.characters-list-desc-label-list {
	display: flex;
	flex-wrap: wrap;
	color: #3fafe7;
	font-size: var(--font-size-s);
	letter-spacing: .01em;
}
@media (min-width: 835px)  {
	.characters-list-desc-label-list {
		gap: .8em;
	}
}
@media (max-width: 834.98px) {
	.characters-list-desc-label-list {
		gap: .2em .9em;
	}
}
.characters-list-desc-label-list-item {
	display: inline-flex;
	align-items: center;
}
@media (max-width: 834.98px) {
	.characters-list-desc-label-list-item {
		column-gap: -.1em;
	}
}
.characters-list-desc-label-list-item-captain {
	width: 100%;
}
.characters-list-desc-label-list-item-grade .characters-list-desc-label-list-icon {
	padding-right: .2em;
}
.characters-list-desc-label-list-item-instrument .characters-list-desc-label-list-icon {
	margin-right: -.1em;
}


/* 	音楽 */
.music	.inner-content-img {
	max-width: 500px;
}
.inner-content-desc-index-list .inner-content-desc-index-title:nth-of-type(n + 2) {
	padding-top: 1em;
}
.inner-content-desc-index {
	padding-left: 1.8em;
	text-indent: -1.8em;
}



/* 映像 */
.trailers-video-title {
	padding-top: .5em;
	font-size: var(--font-size-l);
	text-align: center;
}
.trailers .inner-content-row {
	flex-wrap: wrap;
	justify-content: space-between;
}


/* 商品 */
.goods-list-note-box {
	text-align: center;
}
.goods-list-note {
	display: inline-block;
	padding: 2em;
	font-size: var(--font-size-m);
	text-align: left;
	background: #f2f9fc;
}
.goods-list-note-text {
	padding-left: 1em;
	text-indent: -1em;
}
.goods-list {
  display: grid;
  justify-content: center;
	/* 10px-40px */
	column-gap: clamp(0.625rem, -0.227rem + 3.64vw, 2.5rem);
	/* 50px-90px */
	row-gap: clamp(3.125rem, 2.51rem + 2.62vw, 5.625rem);
	margin: 0 auto;
	/* 50px-90px */
	padding-top: clamp(3.125rem, 2.51rem + 2.62vw, 5.625rem);
}
@media (min-width: 835px) {
	.goods-list {
		/* 180px-350px */
		grid-template-columns: repeat(auto-fill, clamp(10.625rem, 5.511rem + 21.82vw, 21.875rem));
	}
}
@media (max-width: 834.98px) {
	.goods-list {
		grid-template-columns: 50% 50%;
	}
}
.goods-list-desc-title {
	padding: 1em 0 .5em;
	color: #3fafe7;
	font-size: var(--font-size-l);
	font-weight: 700;
}
@media (max-width: 834.98px) {
	.goods-list-desc-text-wrap {
		font-size: var(--font-size-m);
	}
}


/* 特別企画 */
.text-only-wrap {
	max-width: 900px;
	margin: 0 auto;
}
@media (min-width: 835px)  {
	.text-only-paragraph {
		font-size: var(--font-size-l);
	}
}
@media (max-width: 834.98px) {
	.text-only-paragraph {
		font-size: var(--font-size-m);
	}
}
.text-only-paragraph:nth-of-type(n+2) {
	padding-top: 2em;
}

/* 感想投稿キャンペーン */
.impression-text-box {
	max-width: 700px;
	margin: 3em auto;
	font-size: var(--font-size-m);
}
.impression-text-box:first-child, .impression-text:first-child {
	margin-top: 0;
}
.impression-text {
	margin: 2.5em 0;
}
.impression-text-note {
	margin-top: 1em;
}
.impression-img-list {
	display: grid;
	justify-content: center;
	/* 105px-280px */
	grid-template-columns: repeat(auto-fill, clamp(6.563rem, 2.561rem + 17.07vw, 17.5rem));
	/* 10px-35px */
	gap: clamp(0.625rem, 0.241rem + 1.64vw, 2.188rem);
}
.impression-img-download {
	text-align: center;
}
.impression-img-download-btn {
	display: inline-block;
	margin-top: 2em;
	padding: 1em 1.5em;
	border: 1px solid #01acc6;
	color: #01acc6;
	font-size: var(--font-size-m);
}

/* 対談 */
.interview-wrap {
	max-width: 1340px;
	margin: 0 auto;
}
@media (min-width: 1100px)  {
	.interview-wrap {
		background: #f2f9fc;
	}
}
@media (min-width: 835px)  {
	.interview-wrap {
		/* 40px-80px */
		padding: clamp(2.5rem, 0.54rem + 3.76vw, 5rem) 0;
	}
}
@media (max-width: 834.98px) {
	.interview-wrap {
		width: 95%;;
		padding-top: 20px;
	}
}
.interview-paragraph-wrap {
	max-width: 700px;
	margin: 0 auto;
	box-sizing: content-box;
	background: #fff;
}
@media (min-width: 835px)  {
	.interview-paragraph-wrap {
		/* 40px-80px, 80px-160px */
		padding: clamp(2.5rem, 0.54rem + 3.76vw, 5rem) clamp(5rem, 1.08rem + 7.51vw, 10rem);
	}
}
.interview-paragraph {
	line-height: 1.9;
	letter-spacing: 0;
}
.interview-paragraph:nth-of-type(n + 2) {
	/* 50px-80px */
	margin-top: clamp(3.125rem, 2.664rem + 1.97vw, 5rem);
}
@media (min-width: 835px)  {
	.interview-title,
	.interview-message {
		font-size: var(--font-size-lss);
	}
}
@media (max-width: 834.98px) {
	.interview-title,
	.interview-message {
		font-size: var(--font-size-l);
	}
}
.interview-img {
	/* 20px-30px */
	margin: clamp(1.25rem, 1.096rem + 0.66vw, 1.875rem) 0;
}
.interview-question, .interview-answer {
	font-size: var(--font-size-m);
}
.interview-question {
	color: #3fafe7;
}
@media (min-width: 835px)  {
	.interview-question {
		margin-top: 3em;
	}
}
@media (max-width: 834.98px) {
	.interview-question {
		margin-top: 2em;
	}
}
.interview-answer {
	margin-top: .7em;
}
.interview-answer-ishihara,
.interview-answer-ogawa {
	padding-right: 1em;
}
.interview-answer-ishihara {
	color: #f33f20;
}
.interview-answer-ogawa {
 color: #20a500;
}

/* アンサンブルコンテストってなあに？ */
.dir-special-whats-ensemble .deco-top-part {
	display: none;
}
.whats-ensemble {
	background-size: auto auto;
	background-color: rgba(255, 255, 221, 1);
	background-image: repeating-linear-gradient(90deg, transparent, transparent clamp(0.938rem, 0.707rem + 0.98vw, 1.875rem), rgba(255, 254, 158, 1) clamp(0.938rem, 0.707rem + 0.98vw, 1.875rem), rgba(255, 254, 158, 1) clamp(1.875rem, 1.414rem + 1.97vw, 3.75rem) );
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 500;
}
.whats-ensemble-heading-img {
	/* 20px-40px */
	padding: clamp(1.25rem, 0.943rem + 1.31vw, 2.5rem) 0;
	margin: 0 auto;
	text-align: center;
}
@media (min-width: 835px) {
	.whats-ensemble-heading-img {
		width: 42.5%;
		max-width: 700px;
		min-width: 500px;
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-heading-img {
		width: 88%;
		max-width: 500px;
	}
}
.whats-ensemble-intro {
	/* 35px-65px */
	padding: clamp(2.188rem, 1.726rem + 1.97vw, 4.063rem) 0;
	background: #288dbf;
}
.whats-ensemble-intro-text {
	color: #fff;
	text-align: center;
}
@media (min-width: 835px) {
	.whats-ensemble-intro-text {
		font-size: var(--font-size-ls);
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-intro-text {
		font-size: var(--font-size-l);
	}
}
.whats-ensemble-intro-text-strong {
	color: #fae63d;
}
.whats-ensemble-intro-img-list {
	display: flex;
	justify-content: center;
	
	gap: 30px;
	padding-top: 30px;
}
.whats-ensemble-intro-img {
	width: 10%;
	min-width: 70px;
	max-width: 100px;
}
.whats-ensemble-intro-img-text {
	padding-top: .3em;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}
@media (min-width: 835px) {
	.whats-ensemble-intro-img-text {
		font-size: var(--font-size-m);
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-intro-img-text {
		font-size: var(--font-size-s);
	}
}
.whats-ensemble-intro-img-text.whats-ensemble-intro-img-text-tuba {
	color: #b6e7ff;
}
.whats-ensemble-intro-img-text.whats-ensemble-intro-img-text-eupho {
	color: #fabf1b;
}
.conversation {
	background: #8bc7e4;
}
.quote-list {
	/* 60px-150px */
	padding: clamp(3.75rem, 2.367rem + 5.9vw, 9.375rem) 0;
	margin: 0 auto;
}
@media (min-width: 835px) {
	.quote-list {
		width: 60%;
		max-width: 935px;
	}
}
@media (max-width: 834.98px) {
	.quote-list {
		width: 92%;
		max-width: 600px;
	}
}
.quote {
	display: flex;
	/* 5px-25px */
	column-gap: clamp(0.313rem, 0.005rem + 1.31vw, 1.563rem);
}
.quote:nth-of-type(n+2) {
	/* 30px-70px */
	padding-top: clamp(1.875rem, 1.26rem + 2.62vw, 4.375rem);
}
.quote-img {
	width: 10%;
	min-width: 45px;
	max-width: 85px;
	padding-top: 5px;
}
.quote-text-wrap {
	width: 88%;
	max-width: 850px;
}
.quote-text {
	display: inline-block;
	position: relative;
	margin-left: 15px;
	/* 10px-25px */
	border-radius: clamp(0.625rem, 0.394rem + 0.98vw, 1.563rem);
	background: #fff;
}
@media (min-width: 835px)  {
	.quote-text {
		padding: 1.5em;
		font-size: var(--font-size-l);
	}
}
@media (max-width: 834.98px) {
	.quote-text {
		padding: 1em;
		font-size: var(--font-size-m);
	}
}
.quote-text-large {
	padding: 1em;
	font-size: var(--font-size-xl);
	font-weight: 700;
}
@media (min-width: 835px)  {
	.quote-text-large {
		font-size: var(--font-size-xl);
	}
}
@media (max-width: 834.98px) {
	.quote-text-large {
		font-size: var(--font-size-l);
	}
}
.quote-text:before {
	position: absolute;
	top: 0;
	z-index: 0;
	transform: translateY(110%);
	content: "";
}
@media (min-width: 835px)  {
	.quote-text:before {
		left: -23px;
		margin-top: -15px;
		border: 15px solid transparent;
		border-right: 15px solid #fff;
	}
}
@media (max-width: 834.98px) {
	.quote-text:before {
		left: -17px;
		transform: translateY(110%);
		margin-top: -10px;
		border: 10px solid transparent;
		border-right: 10px solid #fff;
	}
}
.quote-text-strong {
	color: #f06da7;
}
.whats-ensemble-result {
	/* 20px-40px */
	padding: clamp(1.25rem, 0.943rem + 1.31vw, 2.5rem) 0;
}
.whats-ensemble-result-heading {
	text-align: center;
}
@media (max-width: 834.98px) {
	.whats-ensemble-result-heading {
		max-width: 550px;
		margin: auto;
	}
}
@media (min-width: 835px)  {
	.whats-ensemble-result-heading img {
		aspect-ratio: 1100 / 536;
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-result-heading img {
		aspect-ratio: 834 / 996;
	}
}
.whats-ensemble-result-list-wrap {
	display: flex;
	/* 15px-40px */
	gap: clamp(0.938rem, 0.553rem + 1.64vw, 2.5rem);
	justify-content: center;
	margin: auto;
	padding-top: 40px;
}
.whats-ensemble-result-list {
	display: flex;
	flex-direction: column;
	/* 25px-60px */
	gap: clamp(1.563rem, 1.025rem + 2.3vw, 3.75rem);
	width: 48.5%;
}
.whats-ensemble-result-item {
	/* 10px-25px */
	border-radius: clamp(0.625rem, 0.394rem + 0.98vw, 1.563rem);
	background: #51b5e7;
}
@media (min-width: 835px)  {
	.whats-ensemble-result-item {
		padding: 1.5em;
		box-shadow: 0 0 0 3px #51b5e7 inset, 0 0 0 9px #FFF inset;
		font-size: var(--font-size-l);
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-result-item {
		padding: 1.25em;
		box-shadow: 0 0 0 1.5px #51b5e7 inset, 0 0 0 4px #FFF inset;
		font-size: var(--font-size-m);
	}
}
.whats-ensemble-result-item-text {
	color: #fef336;
}
.whats-ensemble-result-item-id {
	padding-top: 1.5em;
	color: #234c61;
	text-align: right;
}
@media (min-width: 835px)  {
	.whats-ensemble-result-item-id {
		font-size: var(--font-size-m);
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-result-item-id {
		font-size: var(--font-size-s);
	}
}
.whats-ensemble-content-wrap {
	/* 60px-150px */
	padding: clamp(3.75rem, 2.367rem + 5.9vw, 9.375rem) 0;
}
.whats-ensemble-content {
	margin: auto;
	/* 30px-90px, 20px-70px */
	padding: clamp(1.875rem, 0.953rem + 3.93vw, 5.625rem) clamp(1.25rem, 0.482rem + 3.28vw, 4.375rem);
	/* 10px-25px */
	border-radius: clamp(0.625rem, 0.394rem + 0.98vw, 1.563rem);
	background: #fff;
}
@media (min-width: 835px) {
	.whats-ensemble-content,
	.whats-ensemble-result-list-wrap {
		width: 70%;
		max-width: 880px;
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-content,
	.whats-ensemble-result-list-wrap {
		width: 92%;
		max-width: 600px;
	}
}
.whats-ensemble-collect-heading {
	text-align: center;
}
.whats-ensemble-collect-text {
	padding-top: 2em;
	line-height: 1.6;
}
@media (min-width: 835px) {
	.whats-ensemble-collect-text {
		font-size: var(--font-size-l);
	}
}
@media (max-width: 834.98px) {
	.whats-ensemble-collect-text {
		font-size: var(--font-size-m);
	}
}
.whats-ensemble-collect-text .indent-back {
	display: inline-block;
}
.whats-ensemble-collect-img {
	/* 170px-330px */
	width: clamp(10.625rem, 8.166rem + 10.49vw, 20.625rem);
	/* 30px-70px */
	padding: clamp(1.875rem, 1.26rem + 2.62vw, 4.375rem) 0;
	margin: auto;
	text-align: center;
}
.whats-ensemble-collect-btn-wrap {
	text-align: center;
}
.whats-ensemble-collect-btn-wrap .btn {
	background: #3fafe7;
	text-align: left;
}
@media (min-width: 835px) {
	.whats-ensemble-collect-btn-wrap .btn {
		font-size: var(--font-size-l);
	}
}
.whats-ensemble-collect-btn-wrap .whats-ensemble-collect-text {
	padding-top: 1.5em;
	color: #3fafe7;
}


/* シリーズ放送・配信情報 */
.series-onair-list  {
	display: grid;
	justify-content: center;
	/* 20px-30px */
	gap: clamp(1.25rem, 1.096rem + 0.66vw, 1.875rem);
}
@media (min-width: 835px) {
	.series-onair-list  {
		/* 740px-1200px */
		width: clamp(46.25rem, 23.709rem + 43.19vw, 75rem);
		margin: 0 auto;
	}
}
.onair-list {
	grid-template-columns: 1fr;
}
@media (min-width: 835px) {
	.streaming-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (max-width: 834.98px) {
	.streaming-list {
		grid-template-columns: 1fr 1fr;
	}
}
.onair-list-item-wrap {
	display: flex;
	/* 20px-30px */
	gap: clamp(1.25rem, 1.096rem + 0.66vw, 1.875rem);
	width: 100%;
}
@media (min-width: 835px) {
	.onair-list-item-wrap {
		justify-content: center;
	}
}
@media (max-width: 834.98px) {
	.onair-list-item-wrap {
		flex-direction: column;
	}
}
.onair-list-item {
	max-width: 362px;
}
@media (min-width: 835px) {
	.onair-list-item {
		width: 30%;
	}
}
@media (max-width: 834.98px) {
	.onair-list-item {
		width: 46%;
	}
}
.onair-list-link, .streaming-list-link  {
	display: inline-block;
	border: 1px solid #01acc6;
}
.onair-list-text {
	white-space: nowrap;
}
.onair-list-text-item {
	font-size: var(--font-size-l);
}
.onair-list-text-item:nth-of-type(n+2) {
	padding-top: 1em;
}
.onair-list-text-title {
	font-weight: 700;
}
.onair-list-text-supple {
	font-size: var(--font-size-m);
}