@charset "utf-8";

/*swiper*/
.detail_slide {
	width: 100%;
	height: auto;
	touch-action: pan-y;
	overflow: hidden;
	cursor: ew-resize;
}

.detail_slide .swiper-wrapper {
	display: flex;
}

.detail_slide .swiper-slide {
	height: auto;
	padding: 0 2.5%;
	transition: .6s ease;
}

.detail_slide .swiper-slide.swiper-slide-prev {
	scale: .8;
	transform-origin: right center;
	filter: brightness(50%);
}

.detail_slide .swiper-slide.swiper-slide-next {
	scale: .8;
	transform-origin: left center;
	filter: brightness(50%);
}

.detail_slide .item {
	height: 100%;
	padding: 0 0 10%;
	border-radius: 30px;
	background: var(--gray);
}

.detail_slide .image {
	position: relative;
}

.detail_slide .image:after {
	content: '';
	width: 20%;
	padding: 24% 0 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,40%);
	z-index: 10;
}

.detail_slide .image[data-num='1']:after {
	background-image: url("/_assets/images/top/def_num_01.svg");
}

.detail_slide .image[data-num='2']:after {
	background-image: url("/_assets/images/top/def_num_02.svg");
}

.detail_slide .image[data-num='3']:after {
	background-image: url("/_assets/images/top/def_num_03.svg");
}

.detail_slide .image img {
	border-radius: 30px 30px 0 0;
}

.detail_slide .image + * {
	margin-top: 12.5%;
}

.detail_slide .text {
	color: var(--white);
	font-size: 18rem;
	font-weight: 900;
	line-height: 1.75;
	text-align: center;
	letter-spacing: .1em;
}

.detail_slide + * {
	margin: 10% 0 0;
}

/*desc_box*/
.l-desc_box {
	font-family: var(--font_dela);
	text-align: center;
	padding: 40px 0 20px;
	position: relative;
}

.l-desc_box .inner {
	width: calc(100% - (30px * 2));
	margin: 0 auto;
	padding: 15px 0;
	background: var(--gray);
	box-shadow: 0 5px 0 0 rgba(0,0,0,.3);
	border-radius: 30px;
	position: relative;
	z-index: 10;
}

.l-desc_box .inner:after {
	content: '';
	width: 6%;
	padding: 4% 0 0;
	background: var(--gray);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-90%);
}

.chara_deco {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.chara_deco a {
	display: block;
}

.chara_deco a:hover {
	transform: scale(1.2);
}

.l-desc_box .u-text {
	font-size: 18rem;
	line-height: 1.5;
}

.l-desc_box .u-text b {
	font-size: 24rem;
	font-weight: 400;
}





/*up_value*/
.l-up_value {
	color: var(--white);
	font-family: var(--font_dela);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	transform-origin: center bottom;
}

.l-up_value .title {
	font-size: 15rem;
	white-space: nowrap;
}

.l-up_value .unit {
	font-size: 26rem;
	white-space: nowrap;
}

.l-up_value .unit small {
	font-size: 8rem;
	font-weight: 700;
	display: block;
}

.l-up_value span {
	width: 12.5%;
	margin: 0 0 -.5em;
	display: block;
	transform: skewX(-10deg);
}

.l-up_value span[data-num='1'] {
	margin-inline: -.4em;
}

.l-up_value span.comma {
	width: 3.5%;
	margin: 0 0 -.75em;
}


/*outset*/
.l-outset {
	padding: 12.5% 0;
	background: url("/_assets/images/top/bg_01.svg") no-repeat bottom center / cover;
}

.l-outset .l-desc_box .inner {
	background-color: var(--white);
}

.l-outset .l-desc_box .inner:after {
	background-color: var(--white);
}

.l-outset .l-desc_box .inner .u-text b {
	color: var(--red);
}

.l-outset .l-desc_box .chara_deco:nth-of-type(1) {
	width: 10%;
	margin: .5% 0 0 1.5%;
	z-index: 0;
}

.l-outset .l-desc_box .chara_deco:nth-of-type(2) {
	width: 18%;
	margin: 0 0 -7% 7.5%;
	top: auto;
	bottom: 0;
}

.l-outset .l-desc_box .chara_deco:nth-of-type(3) {
	width: 17%;
	margin: 2.5% -1.5% 0 0;
	left: auto;
	right: 0;
}


/*menu*/
.l-menu_item {
	position: relative;
}

.l-menu_item:nth-child(n + 2) {
	margin-top: -10%;
}

.l-menu_item .inner {
	padding: 15% 0 27.5%;
	position: relative;
	z-index: 20;
}

.l-menu_item .text {
	font-family: var(--font_dela);
	font-size: 18rem;
	line-height: 1.25;
	text-align: center;
}

.l-menu_item .bg {
	margin: -5% 0 0;
	border-top: 10px solid var(--black);
	overflow: hidden;
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: skewY(-5deg) translateZ(0);
}

.l-menu_item:nth-child(even) .bg {
	transform: skewY(5deg);
}

.l-menu_item .number {
	margin: -11% 16% 0 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

.l-menu_item:nth-child(even) .number {
	margin: -10% 0 0 5%;
	right: auto;
	left: 0;
}

.l-menu_item .u-button > *:hover {
	position: relative;
	z-index: 20;
}

/*design*/
.l-menu_item.design .title {
	width: 77.5%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

.l-menu_item.design .title + * {
	margin-top: 5%;
}

.l-menu_item.design .bg {
	background: linear-gradient(to bottom, var(--blue_dark) 0%, #1435e8 100%);
}

.l-menu_item.design .bg .image {
	width: 110%;
	margin: 5% 0 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0) skewY(5deg);
}

.l-menu_item.design .chara_deco:nth-of-type(1) {
	width: 16%;
	margin: 2% 0 0 21%;
}

.l-menu_item.design .chara_deco:nth-of-type(2) {
	width: 20.5%;
	margin: 0 0 -2.5% 1.5%;
	top: auto;
	bottom: 0;
	transform: translate(0%,-100%);
}

.l-menu_item.design .chara_deco:nth-of-type(3) {
	width: 28%;
	margin: 0 0 0 6%;
	top: auto;
	bottom: 0;
	left: 100%;
	transform: translate(-100%,-100%);
}

/*dance*/
.l-menu_item.dance .title {
	width: 77.5%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

.l-menu_item.dance .title + * {
	margin-top: 5%;
}

.l-menu_item.dance .bg .image {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) skewY(-5deg);
}

.l-menu_item.dance .chara_deco:nth-of-type(1) {
	width: 37.5%;
	margin: -12% 0 0 59%;
}

.l-menu_item.dance .chara_deco:nth-of-type(2) {
	width: 30%;
	margin: 39% 0 0 -6%;
}

.l-menu_item.dance .chara_deco:nth-of-type(3) {
	width: 18%;
	margin: 48% 0 0 79%;
}

/*w chance*/
.l-menu_item.wchance {
	z-index: 20;
}

.l-menu_item.wchance .inner {
	padding-top: 10%;
}

.l-menu_item.wchance .title {
	width: 77.5%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

.l-menu_item.wchance .title + * {
	margin-top: 1.5%;
}

.l-menu_item.wchance .title + * + * {
	margin-top: 3%;
}

.l-menu_item.wchance .bg .image {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) skewY(-5deg);
}

.l-menu_item.wchance .chara_deco > * {
	position: absolute;
}

.l-menu_item.wchance .chara_deco:nth-of-type(1) {
	width: 45%;
	margin: 40% 0 0 0%;
}

.l-menu_item.wchance .chara_deco:nth-of-type(1) > *:nth-child(1) {
	width: 37%;
	margin: 0 0 0 5%;
}

.l-menu_item.wchance .chara_deco:nth-of-type(1) > *:nth-child(2) {
	width: 25%;
	margin: 38% 0 0 25%;
}

.l-menu_item.wchance .chara_deco:nth-of-type(2) {
	width: 45%;
	margin: 35% 0 0 0;
	left: auto;
	right: 0;
}

.l-menu_item.wchance .chara_deco:nth-of-type(2) > *:nth-child(1) {
	width: 53%;
	margin: 0 -3% 0 0%;
	right: 0;
}

.l-menu_item.wchance .chara_deco:nth-of-type(2) > *:nth-child(2) {
	width: 31%;
	margin: 37% 16% 0 0;
	right: 0;
}

/*event*/
.l-menu_item.event {
	z-index: 30;
}

.l-menu_item.event .title {
	width: 65.5%;
	margin: 0 auto;
	position: relative;
	z-index: 20;
}

.l-menu_item.event .title + * {
	margin-top: 5%;
}

.l-menu_item.event .bg {
	background: var(--blue_dark);
}

.l-menu_item.event .bg .image {
	width: 102%;
	margin: -4% 0 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0) skewY(-5deg);
}

.l-menu_item.event .number {
	margin: -13% 0 0 20%;
}

.l-menu_item.event .chara_deco:nth-of-type(1) {
	width: 15.5%;
	margin: 28% 0 0 7%;
}

.l-menu_item.event .chara_deco:nth-of-type(2) {
	width: 15.5%;
	margin: 30% 0 0 78%;
}

.l-menu_item.event .u-button +  .u-button {
	margin-top: 12.5%;
}

.l-menu_item.event .u-button .deco {
	width: 40%;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-55%);
}

/*comingsoon*/
.l-menu_item.comingsoon > *:not(.comingsoon_text) {
	filter: grayscale(100%) invert(40%) contrast(50%);
	pointer-events: none;
}

.l-menu_item.comingsoon .comingsoon_text {
	color: var(--white);
	font-family: var(--font_dela);
	font-size: 30rem;
	white-space: nowrap;
	text-shadow: 0 3px 0 rgba(0,0,0,.5);
	margin: -1em 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 50;
}

/*design*/
.l-design {
	background: var(--white);
	position: relative;
	z-index: 40;
}

.l-design:before {
	content: '';
	width: 100%;
	padding: 14.65% 0 0;
	background: url("/_assets/images/top/bg_06.svg") no-repeat center / 100% auto;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	translate: 0 -97.5%;
}

.l-design .main {
	padding: 10% 0 0;
	background: url("/_assets/images/top/design_02.webp") no-repeat top center / 90% auto;
	position: relative;
	z-index: 10;
}

.l-design .main .title {
	width: 80%;
	margin: 0 auto;
}

.l-design .main .image {
	width: 87.5%;
	margin: 2.5% auto 0;
}

.l-design .l-desc_box {
	margin: -7.5% 0 0;
	padding: 15% 0 22.5%;
	background: url("/_assets/images/top/bg_07.webp") no-repeat center bottom / 110% auto;
}

.l-design .l-desc_box .inner {
	background: var(--purple);
}

.l-design .l-desc_box .inner:after {
	background: var(--purple);
}

.l-design .l-desc_box .u-text {
	color: var(--white);
}

.l-design .detail {
	background: var(--purple_light);
	position: relative;
}

.l-design .detail:before,
.l-design .detail:after {
	content: '';
	width: 100%;
	padding: 14.65% 0 0;
	background: url("/_assets/images/top/bg_06_purple.svg") no-repeat center / 100% auto;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	translate: 0 -100%;
}

.l-design .detail:after {
	top: auto;
	bottom: 0;
	translate: 0 100%;
	scale: 1 -1;
}

.l-design .detail .u-title_hi > * {
	color: var(--purple);
}

.l-design .detail_slide .item {
	background: var(--purple);
}

.l-design .detail_slide .image[data-num='1']:after {
	background-image: url("/_assets/images/top/design_num_01.svg");
}

.l-design .detail_slide .image[data-num='2']:after {
	background-image: url("/_assets/images/top/design_num_02.svg");
}

.l-design .detail_slide .image[data-num='3']:after {
	background-image: url("/_assets/images/top/design_num_03.svg");
}

.l-design .cta {
	padding: 0 0 5%;
	position: relative;
	z-index: 20;
}

.l-design .cta .u-button.large.dl > * {
	color: var(--white);
	text-shadow: 0 3px 0 rgba(0,0,0,.5);
	background: linear-gradient(to bottom, #f2808a 0%, #e50014 35%, #e50014 100%);
	border-color: #8b0000;
}

.l-design .cta .u-button.large.up > * {
	color: var(--white);
	text-shadow: 0 3px 0 rgba(0,0,0,.5);
	background: linear-gradient(to bottom, #cb90c3 0%, #9b288b 35%, #9b288b 100%);
	border-color: #640c58;
}

.l-design .cta .u-button > *:before {
	background-image: url("/_assets/images/common/arrow_01_white.svg");
}

.l-design .cta .u-button .deco {
	color: var(--yellow);
	font-size: 16rem;
	margin: 0 0 0 .75em;
	position: absolute;
	top: 0;
	left: 0;
	rotate: -10deg;
}

.l-design .cta .u-button.mail {
	margin: 8% 0 0;
}

.l-design .cta .u-button.mail > *:before {
	width: 1.25em;
	background-image: url("/_assets/images/common/icon_mail_01.svg");
}

.l-design .cta .u-button.mail > * {
	background-color: var(--white);
}

.l-design .cta .chara_deco:nth-of-type(1) {
	width: 21.5%;
	margin: 5% 2.5% 0 0;
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	transform: translate(0,-100%);
}

.l-design .cta .chara_deco:nth-of-type(2) {
	width: 19.5%;
	margin: 43.5% 0 0 2.5%;
	position: absolute;
	top: 0;
}

.l-design .cta .arrow {
	width: 20%;
	margin: 0 auto;
	display: block;
}

.l-design .period {
	text-align: center;
	padding: 2% 0 3%;
}

.l-design .period h4 {
	font-size: 14rem;
	font-weight: 700;
}

.l-design .period h4 + * {
	margin-top: .25em;
}

.l-design .period h4:nth-of-type(n + 2) {
	margin-top: 1em;
}

.l-design .period p {
	color: var(--purple);
	font-size: 21rem;
	font-weight: 900;
}

.l-design .period p small {
	color: var(--black);
	font-size: 14rem;
	margin: 0 .1em;
	display: inline-block;
}

.shipping_address {

}

/*story*/
.l-story {
	padding: 20% 0 0;
	min-height: 600px;
	background: var(--blue_dark) url("/_assets/images/top/bg_08.webp") repeat-y center top / 100% auto;
}

.l-story .title {
	padding: 20% 0 0;
	background: url("/_assets/images/top/bg_09.webp") no-repeat center / 100% auto;
	position: relative;
}

.l-story .title > * {
	width: 72.5%;
	margin: 15% 0 0;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
}

.l-story .title + * {
	margin-top: 15%;
}

.l-story .title_sub {
	color: var(--white);
	font-family: var(--font_dela);
	font-size: 30rem;
	text-align: center;
}

.l-story .title_sub + * {
	margin-top: 7.5%;
}

.l-story .detail_slide .item {
	padding-bottom: 4%;
	background: var(--white);
}

.l-story .detail_slide .image:after {
	display: none;
}

.l-story .detail_slide .image + * {
	margin-top: 1em;
}

.l-story .detail_slide .text {
	color: var(--black);
	font-size: 15rem;
	font-weight: 500;
	text-align: left;
	padding: 0 1.5em;
}

.l-story .u-title_hi > * {
	color: var(--white);
}

.l-story .video {
	padding: 0 0 10%;
}

.l-story .video_title {
	position: relative;
}

.l-story .chara_deco:nth-of-type(1) {
	width: 16%;
	margin: -2.5% 0 0 7%;
}

.l-story .chara_deco:nth-of-type(2) {
	width: 13.75%;
	margin: -2.5% 0 0 78%;
}

.video_button {
	padding: 10% 0 35%;
	cursor: pointer;
	overflow: hidden;
	transform: translateZ(0);
}

.video_button .u-button {
	margin: 5% 0 0;
	display: block;
}

.video_button .note {
	color: var(--white);
	font-size: 13rem;
	text-align: center;
	letter-spacing: .05em;
	margin: 3% 0 0;
	opacity: .8;
}