@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
HOME
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ヘッダー
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/* ★がついているコメント部分は、TOP画のキャラ部分にh1.headingがかぶらないよう、1200px以下はスマホと同じようにTOP画下に来るよう修正したところです！ */

.home-header {
	background: #fff;
}

.home-header .image {
	/* TOP画の下の余白をなくすためheightをなしに */
	/* height: 71vw; */
	/* 可変時に画像が切れてしまったため、htmlでimage表示させるよう修正 */
	/* background: url("../img/home/header.jpg") center top no-repeat;
	background-size: cover; */
}

.home-header .text {
	background: #fff;
}

.home-header .logo {
	margin-bottom: 15px;
}

.home-header .heading {
	font-size: 5.4vw;
	line-height: 1.3;
	white-space: nowrap;
}

.home-header .show-left {
	display: table;
	margin-bottom: 10px;
	padding: 0 0.5em;
	background: var(--color_main);
	color: #fff;
}

.home-header .description {
	font-size: 1.3em;
}


@media (min-width: 480px) {
.home-header .heading {
	font-size: 2.6rem;
}
}

/* ★1200pxからスマホと同じような表示になるよう修正 */
/* @media (min-width: 768px) { */
@media (min-width: 1200px) {
.home-header {
	display: flex;
	/* TOP画の下の余白をなくすためheightをなしに */
	/* padding-bottom: 80px; */
	flex-flow: row-reverse;
	align-items: center;
}

.home-header .image {
	/* TOP画の下の余白をなくすためheightをなしに */
	/* height: 47vw;
	min-height: 600px;
	max-height: calc(100vh - 150px); */
	flex: 1;
}

.home-header .text {
	width: 34%;
	min-width: 300px;
}

.home-header .inner {
	padding: 0 12%;
/* ★ロゴが中央に来るよう修正 */
	display: flex;
	justify-content: center;
}

.home-header .logo {
	margin-bottom: 40px;
}

.home-header .heading {
	margin-bottom: 30px;
	/* ★TOP画のキャラ部分に文字がかぶらないよう値変更 */
	/* font-size: 2.4vw; */
	font-size: 2.0vw;
}

.home-header .show-left {
	margin-bottom: 15px;
}
.home-header .description {
	font-size: 1.2em;
}
}

/* ★TOP画のキャラ部分に文字がかぶらないよう値変更 */
/* @media (min-width: 1024px) {
.home-header .heading {
	font-size: 4.8rem;
}
} */
	
/* ★1200px未満はスマホと同じような表示になるよう修正 */
	@media (max-width: 1199px) {
		.home-header .text {
			display: flex;
			padding: 12px 0 40px;
			flex-flow: column;
			align-items: center;
		}
	
		.home-header .inner {
		/* ★ロゴが中央に来るよう修正 */
			display: flex;
			justify-content: center;
		}

		.home-header .logo {
			width: 55%;
		}

		.home-header .description {
			font-size: 1.1em;
		}
	}

	@media (max-width: 767.9px) {
		.home-header .text {
			display: flex;
			padding: 12px 0 40px;
			flex-flow: column;
			align-items: center;
		}
		
		.home-header .inner {
		/* ★ロゴが中央に来るよう修正 */
			display: flex;
			justify-content: center;
		}
		.home-header .logo {
			/* width: 250px; */
			width: 70%;
		}
		.home-header .description {
			font-size: 1.0em;
		}
				}
		
		
/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- LINE UP
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-lineup {
	padding: 0;
	text-align: center;
}

.home-lineup > *:nth-of-type(2n+1) {
	background: var(--color_main_light);
}

.home-lineup > *:nth-of-type(2n) {
	background: #fff;
}

.home-lineup-header {
	padding-top: 50px;
}

.home-lineup-header .soon {
	display: flex;
	width: 6.1em;
	height: 6.1em;
	margin: 0 auto 1.2em;
	border-radius: 50%;
	background: var(--color_main);
	color: #fff;
	font-weight: 700;
	font-size: 2.9rem;
	font-family: var(--font_english);
	line-height: 1.1;
	transform: rotate(-9deg);
	justify-content: center;
	align-items: center;
	/* 2nd LINE UPを表示させるまで、COMING SOON下の余白をなくしておく↓ */
	margin-bottom: -50px;
}

.home-lineup01-slide,
.home-lineup02-slide {
	max-width: 771px;
}

.swiper-button-prev,
.swiper-button-next {
	color: var(--color_main);
}

.swiper-button-prev {
	left: 1%;
}

.swiper-button-next {
	right: 1%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 30px;
}

@media (max-width: 767.9px) {
	.swiper-button-prev {
		left: -5px;
	}

	.swiper-button-next {
		right: -5px;
	}

	.swiper-button-prev::after,
	.swiper-button-next::after {
		font-size: 22px;
	}
}
	
.home-lineup .image {
	display: flex;
	max-width: 980px;
	margin: 0 auto -15px;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
}

.home-lineup .img {
	max-width: 21%;
	margin: 0 2% 15px;
}

.home-lineup-mascot .img {
	margin-bottom: 9px;
	max-width: 18%;
}

.home-lineup-puppet .img {
	margin-right: 1.4%;
	margin-left: 1.4%;
}

.home-lineup-cushion .heading {
	margin: 2.8em 0 1.7em;
	font-size: 1.4rem;
}

.home-lineup-cushion .img {
	max-width: 100%;
}

.home-lineup-cushion figcaption {
	display: flex;
	width: 2.6em;
	height: 2.6em;
	margin: 0 45px;
	border-radius: 50%;
	background: #fff;
	color: var(--color_main);
	font-weight: 700;
	font-size: 1.5rem;
	justify-content: center;
	align-items: center;
}

.home-lineup-big .img {
	margin-right: 1.8%;
	margin-left: 1.8%;
}

.home-lineup-hand .img {
	margin-right: 1.9%;
	margin-left: 1.9%;
}

.home-lineup-finger .img {
	margin-right: 3%;
	margin-left: 3%;
	margin-bottom: 9px;
	max-width: 17%;
}

@media (min-width: 768px) {
.home-lineup-header {
	padding-top: 85px;
}

.home-lineup-header .soon {
	font-size: 5.1rem;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	font-size: 40px;
}

.home-lineup .image {
	margin-bottom: -25px;
}

.home-lineup .img {
	margin-bottom: 25px;
}

.home-lineup-cushion .heading {
	font-size: 2.2rem;
}

.home-lineup-cushion .image {
	justify-content: space-between;
}

.home-lineup-cushion figure {
	width: 47%;
}

.home-lineup-cushion figcaption {
	margin: 0.4em auto 0;
	font-size: 2.4rem;
}
}

@media (max-width: 767.9px) {
.home-lineup-cushion .image {
	flex-flow: column;
}

.home-lineup-cushion figure {
	display: flex;
	margin-bottom: 17px;
	align-items: center;
}

.home-lineup-cushion figure:nth-child(2n) {
	flex-flow: row-reverse;
}

.home-lineup-cushion .img {
	width: 196px;
	min-width: 40vw;
	margin: 0;
	flex: none;
}

.home-lineup-cushion figcaption {
	flex: none;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- ロゴ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-logo {
	position: relative;
	z-index: -1;
	height: 212px;
	background: var(--color_main_light);
}

.home-logo .img {
	position: fixed;
	top: 50vh;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
.home-logo {
	height: 400px;
}
}

@media (max-width: 767.9px) {
.home-logo .img {
	width: calc(326px - var(--padding) * 2);
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- MEMBER
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.home-member {
	padding: 0;
	text-align: center;
}

.home-member-header {
	--content-width: 920px;
	padding: 50px 0 0;
	background: #fff;
}

.home-member-ul {
	display: flex;
	margin: 0 -0.2em -0.6em;
	flex-flow: wrap;
	justify-content: center;
}

.home-member-li {
	min-width: 6em;
	margin: 0 0.2em 0.6em;
}

.home-member-li a {
	display: block;
	padding: 0.5em;
	border: 1.5px solid var(--color_main);
	border-radius: 25px;
	color: var(--color_main);
	font-weight: 700;
}

.home-member-li a:hover {
	background: var(--color_main);
	color: #fff;
}

.home-member section {
	position: relative;
	padding: 63px 0 0;
	background: #fff;
}

.home-member .item-container {
	max-width: calc(236px * 5 + 22px * 4 + var(--padding) * 2);
	padding-right: 0;
}

.home-member .item-ul {
	--item-width: 325px;
	--item-margin: 30px;
	display: flex;
	width: calc((100vw - var(--item-margin)) * 6);
	max-width: calc((var(--item-width) + var(--item-margin)) * 6);
	margin-bottom: 25px;
}

.home-member .item-li {
	display: flex;
	width: var(--item-width);
	max-width: calc(100vw - 50px);
	height: 445px;
	margin-right: var(--item-margin);
	padding: 25px 0;
	background-color: var(--color_main_light);
	flex: none;
	flex-flow: column;
	justify-content: flex-end;
	align-items: center;
	pointer-events: none;
	-ms-user-select: none;
	user-select: none;
}

.home-member01 .item-li {
	background: #eeefef;
}

.home-member02 .item-li {
	background: #f7eae4;
}

.home-member03 .item-li {
	background: #dfeaf8;
}

.home-member04 .item-li {
	background: #fadbd9;
}

.home-member05 .item-li {
	background: #fffdea;
}

.home-member06 .item-li {
	background: #e1d2e9;
}

.home-member07 .item-li {
	background: #e8e6f4;
}

.home-member08 .item-li {
	background: #fffbdb;
}

.home-member09 .item-li {
	background: #daedea;
}

.home-member10 .item-li {
	background: #e1efe2;
}

.home-member11 .item-li {
	background: #fbe0eb;
}

.home-member12 .item-li {
	background: #d5ecf3;
}

.home-member13 .item-li {
	background: #fdeef5;
}

.home-member14 .item-li {
	background: #fdeae5;
}

.home-member15 .item-li {
	background: #d4edfc;
}

.home-member16 .item-li {
	background: #fdebd1;
}

.home-member17 .item-li {
	background: #fef1d4;
}

.home-member18 .item-li {
	background: #ffed99;
}

.home-member19 .item-li {
	background: #fdf2f7;
}

.home-member20 .item-li {
	background: #f4f2f9;
}

.home-member21 .item-li {
	background: #ffe6ab;
}

.home-member22 .item-li {
	background: #f1f5da;
}

.home-member .item-image {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
}

.home-member .item-name {
	margin-bottom: 0.6em;
	font-weight: inherit;
	font-size: 1.8rem;
}

.home-member .item-month {
	display: inline-block;
	padding: 0.3em 0.9em;
	background: #fff;
	border-radius: 15px;
	font-weight: 700;
	font-size: 1.6rem;
}

.home-member .scroll-track {
	height: 5px;
	background: var(--color_main_light);
}

.home-member .scroll-thumb {
	display: block;
	height: 100%;
	background: var(--color_main);
	transform-origin: left center;
	transition: transform 0.1s ease-out;
}

@media (min-width: 768px) {
.home-member-header {
	padding-top: 70px;
}

.home-member .heading_section {
	margin-bottom: 50px;
}

.home-member section {
	padding: 68px 0 0;
}

.home-member .profile {
	margin-bottom: 60px;
}

.home-member .item-ul {
	--item-width: 236px;
	--item-margin: 22px;
	max-width: calc((var(--item-width) + var(--item-margin)) * 5);
	margin-bottom: 75px;
}

.home-member .item-li {
	height: 324px;
}

.home-member .item_profile {
	display: none;
}

.home-member .item-name {
	font-size: 1.4rem;
}

.home-member .item-month {
	font-size: 1.3rem;
}
}

@media (max-width: 767.9px) {
.home-member .heading_section {
	font-size: 3.5rem;
}

.home-member-ul {
	font-size: 1.2rem;
}

.home-member .profile {
	display: none;
}

.home-member .item-container {
	padding-left: 25px;
}

.home-member .item_profile {
	padding: 0;
}

.home-member .item_mascot img {
	width: 130px;
}

.home-member .item_puppet img {
	width: 200px;
}

.home-member .item_big img {
	width: 240px;
}

.home-member .item_hand img {
	width: 200px;
}

.home-member .item_finger img {
	width: 130px;
}

.home-member .scroll-track {
	margin-left: 25px;
}
}