@charset "utf-8";
:root {
		--vw-rem: calc(1vw * 0.5208333333333333);
	--sp-vw-rem: calc(1vw * 2.666666666666667);
}

html {
  scroll-behavior: smooth;
  width: 100%;	
}


/* common */
.pc_display {
  display: inline !important;
}
.sp_display {
  display: none !important;
}
main {
  display: block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
  sans-serif;
	font-family: var(--familyMurecho);
  font-weight: normal;
  overflow: hidden;
	color: var(--colorBlack);
}
main img {
  max-width: 100%;
	height: auto;
	width: 100%;
}
section {
  display: block;
}
h1, h2 {
  margin-bottom: 0;
}
h2, h3 {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ",
  sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--colorBlack);
}
sup {
  font-size: 0.8em;
  position: relative;
  top: 0;
}

.inner {
	max-width: 100%;
  padding-inline: calc(6.589 * var(--vw-rem)) calc(6.667 * var(--vw-rem));
	@media screen and (max-width: 767px) {
		padding-inline: calc(0.7 * var(--sp-vw-rem));
	}
}

.sr-only {
	display: none;
}

/* parts */


@media screen and (min-width: 768px) and (max-width: 1100px) {
  .pc_display {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  /* common */
  .pc_display {
    display: none !important;
  }
  .sp_display {
    display: block !important;
  }

  /* parts */
  main {
    padding-top: 0;
  }
  #main_v {
  }
}

/* ======================
	common
==========================*/

@media (hover: hover) {
	main a:hover,
	main button:hover {
		cursor: pointer;
		opacity: 0.7;
	}
}

#tabeyomemanga {
	position: relative;
	.frameCorner {
		position: absolute;
		width: calc(3.298 * var(--vw-rem));
		z-index: 10;
	}
	.frameCorner__topLeft {
		left: calc(1.635 * var(--vw-rem));
		top: calc(1.834 * var(--vw-rem));
	}
	.frameCorner__topCenter {
		width: calc(6.82 * var(--vw-rem));
		top: calc(1.834 * var(--vw-rem));
		left: 50%;
		transform: translateX(-50%);
	}
	.frameCorner__topRight {
		right: calc(1.635 * var(--vw-rem));
		top: calc(1.834 * var(--vw-rem));
		transform: rotate(90deg);
	}
	.frameCorner__centerLeft {
		width: calc(6.82 * var(--vw-rem));
		top: 53.5%;
		left: calc(-2 * var(--vw-rem));
		transform: translateY(-50%) rotate(-90deg);
	}
	.frameCorner__centerRight {
		width: calc(6.82 * var(--vw-rem));
		top: 53.5%;
		right: calc(-2 * var(--vw-rem));
		transform: translateY(-50%) rotate(90deg);
	}
	.frameCorner__bottomLeft {
		left: calc(1.635 * var(--vw-rem));
		bottom: calc(1.834 * var(--vw-rem));
		transform: rotate(-90deg);
	}
	.frameCorner__bottomCenter {
		width: calc(6.82 * var(--vw-rem));
		bottom: calc(1.834 * var(--vw-rem));
		left: 50%;
		transform: translateX(-50%);
	}
	.frameCorner__bottomRight {
		right: calc(1.635 * var(--vw-rem));
		bottom: calc(1.834 * var(--vw-rem));
		transform: rotate(180deg);
	}
	@media screen and (max-width: 767px) {
		.frameCorner {
			width: calc(1.946 * var(--sp-vw-rem));
		}
		.frameCorner__topLeft {
			left: calc(0.6 * var(--sp-vw-rem));
			top: calc(0.454 * var(--sp-vw-rem));
		}
		.frameCorner__topCenter {
			width: calc(4.024 * var(--sp-vw-rem));
			top: 0;
			transform: translateX(-50%) rotate(180deg);
		}
		.frameCorner__topRight {
			right: calc(0.6 * var(--sp-vw-rem));
			top: calc(0.454 * var(--sp-vw-rem));
		}
		.frameCorner__centerLeft {
			width: calc(4.024 * var(--sp-vw-rem));
			top: 56.4%;
			left: calc(-1.3 * var(--sp-vw-rem));
		}
		.frameCorner__centerRight {
			width: calc(4.024 * var(--sp-vw-rem));
			top: 56.4%;
			right: calc(-1.3 * var(--sp-vw-rem));
		}
		.frameCorner__bottomLeft {
			left: calc(1 * var(--sp-vw-rem));
      bottom: calc(0.8 * var(--sp-vw-rem));
		}
		.frameCorner__bottomCenter {
			width: calc(4.024 * var(--sp-vw-rem));
		  bottom: calc(0.8 * var(--sp-vw-rem));
			left: 50%;
			transform: translateX(-50%) rotate(180deg);
		}
		.frameCorner__bottomRight {
			right: calc(1 * var(--sp-vw-rem));
      bottom: calc(0.8 * var(--sp-vw-rem));
		}
	}
}

.section__num {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	content: "";
}

.link__btn {
	max-width: calc(18.5 * var(--vw-rem));
	width: 100%;
	height: calc(5.5 * var(--vw-rem));
	background: var(--colorBlack);
	color: var(--colorWhite);
	font-size: calc(2.342 * var(--vw-rem));
	display: flex;
	align-items: center;
	position: relative;
	font-weight: 700;
	padding-left: calc(1 * var(--vw-rem));
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-image: url(../img/icon-btn-arrow.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	@media screen and (max-width: 767px) {
		padding-left: 1rem;
	}
}



/* animation */
.fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeup.active {
  opacity: 1;
  transform: translateY(0);
}

.scaleup {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.scaleup.active {
  transform: scale(1);
  opacity: 1;
}

.scale-bounce {
  transform: scale(0);
	opacity: 0;
  transition:
    transform 0.9s cubic-bezier(.25, 1.6, .5, 1),
    opacity 0.6s ease;
}

.scale-bounce.active {
  transform: scale(1);
  opacity: 1;
}

.gogogo-in {
  opacity: 0;
  transform: translateY(24px) scale(0.95);
}

.gogogo-in.active {
	-webkit-animation: gogogoIn 0.9s cubic-bezier(.25, 1.4, .5, 1) forwards;
  animation: gogogoIn 0.9s cubic-bezier(.25, 1.4, .5, 1) forwards;
}

@-webkit-keyframes gogogoIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
  }
  65% {
    transform: translateY(2px) scale(0.98);
  }
  80% {
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gogogoIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
  }
  65% {
    transform: translateY(2px) scale(0.98);
  }
  80% {
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mv__title {
  opacity: 0;
  transform: translateY(0px) scale(0.95);
}

.mv__title.active {
	-webkit-animation: mvTitle 0.6s cubic-bezier(.25, 1.4, .5, 1) forwards;
  animation: mvTitle 0.6s cubic-bezier(.25, 1.4, .5, 1) forwards;
}

@-webkit-keyframes mvTitle {
	0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
	10% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translateX(24px) translateY(12px) scale(1.08);
  }
  48% {
    transform: translateX(-4px) translateY(-4px) scale(0.97);
  }
  65% {
    transform: translateX(14px) translateY(6px) scale(1.05);
  }
	83% {
    transform: translateX(-2px) translateY(-2px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mvTitle {
	0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
	10% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  30% {
    opacity: 1;
    transform: translateX(24px) translateY(12px) scale(1.08);
  }
  48% {
    transform: translateX(-4px) translateY(-4px) scale(0.97);
  }
  65% {
    transform: translateX(14px) translateY(6px) scale(1.05);
  }
	83% {
    transform: translateX(-2px) translateY(-2px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media screen and (max-width: 767px) {
	@-webkit-keyframes mvTitle {
		0% {
			opacity: 0;
			transform: translateY(0) scale(1);
		}
		30% {
			opacity: 1;
			transform: translateX(14px) translateY(6px) scale(1.1);
		}
		48% {
			transform: translateX(-2px) translateY(-2px) scale(0.97);
		}
		65% {
			transform: translateX(7px) translateY(3px) scale(1.05);
		}
		83% {
			transform: translateX(-1px) translateY(-1px) scale(0.99);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
	@keyframes mvTitle {
		0% {
			opacity: 0;
			transform: translateY(0) scale(1);
		}
		30% {
			opacity: 1;
			transform: translateX(14px) translateY(6px) scale(1.1);
		}
		48% {
			transform: translateX(-2px) translateY(-2px) scale(0.97);
		}
		65% {
			transform: translateX(7px) translateY(3px) scale(1.05);
		}
		83% {
			transform: translateX(-1px) translateY(-1px) scale(0.99);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}
}

.rotate-in {
  opacity: 0;
  transform: rotateY(-135deg);
  transform-origin: center;
  backface-visibility: hidden;
}

.rotate-in.active {
  -webkit-animation: rotateYIn 0.7s ease-out forwards;
  animation: rotateYIn 0.7s ease-out forwards;
}

@-webkit-keyframes rotateYIn {
  0% {
    opacity: 0;
    transform: rotateY(-180deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes rotateYIn {
  0% {
    opacity: 0;
    transform: rotateY(-180deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.buruburu {
	-webkit-animation:buruburu 0.1s infinite linear alternate;
	animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
	0% {-webkit-transform:translate(-50%, 0) rotate(-2deg);}
	50% {-webkit-transform:translate(-50%, -1px) rotate(0deg);}
	100% {-webkit-transform:translate(-50%, 0)rotate(2deg);}
}

@keyframes buruburu {
	0% {transform:translate(-50%, 0) rotate(-2deg);}
	50% {transform:translate(-50%, -1px) rotate(0deg);}
	100% {transform:translate(-50%, 0)rotate(2deg);}
}

.mv__subTitle.buruburu {
	-webkit-animation:mvBuruburu 0.1s infinite linear alternate;
	animation: mvBuruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes mvBuruburu {
	0% {-webkit-transform:translate(0, 0) rotate(-1deg);}
	50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
	100% {-webkit-transform:translate(0, 0)rotate(1deg);}
}

@keyframes mvBuruburu {
	0% {transform:translate(0, 0) rotate(-1deg);}
	50% {transform:translate(0, -1px) rotate(0deg);}
	100% {transform:translate(0, 0)rotate(1deg);}
}


/* ======================
	mv
==========================*/
#mv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	.mv__hamburger {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
	.mvNav  {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
	.mv__left {
		background-image: url(../img/bg-mv.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		width: calc(95.933 * var(--vw-rem));
		height: calc(99.467 * var(--vw-rem));
		position: relative;
		padding-top: calc(21 * var(--vw-rem));
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			background-image: url(../img/img-turnover.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			width: calc(45 * var(--vw-rem));
			height: calc(38.863 * var(--vw-rem));
		}
		.mv__subTitle {
			max-width: calc(81 * var(--vw-rem));
			margin-inline: auto;
			padding-left: calc(2 * var(--vw-rem));
		}
		.mv__title {
			margin-top: calc(1.5 * var(--vw-rem));
			max-width: calc(89 * var(--vw-rem));
			margin-inline: auto;
			padding-left: calc(1.5 * var(--vw-rem));
		}
		.mv__text {
			font-size: calc(3.6 * var(--vw-rem));
			letter-spacing: 0.0155em;
			text-align: center;
			font-weight: 500;
			font-family: var(--familyMurecho);
			line-height: 1.5186;
			margin-top: calc(1.2 * var(--vw-rem));
			padding-left: calc(1 * var(--vw-rem));
		}
	}
	.mv__right {
		padding: calc(5 * var(--vw-rem)) calc(8.8 * var(--vw-rem)) 0 calc(4.13 * var(--vw-rem));
		.mv__toc {
			font-size: calc(8.062 * var(--vw-rem));
			font-weight: 900;
			font-family: var(--familyMPLUS1);
			position: relative;
			line-height: 1;
			padding-bottom: calc(0.8 * var(--vw-rem));
			display: block;
			color: var(--colorBlack);
			&:nth-child(2) {
				margin-top: calc(1.5 * var(--vw-rem));
			}
			&:nth-last-child(1) {
				margin-top: calc(2 * var(--vw-rem));
			}
			&::after {
				content: "";
				height: calc(0.4 * var(--vw-rem));
				background: var(--colorBlack);
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		.mv__creatorList {
			display: grid;
			grid-template-columns: 1fr 1fr;
			margin-top: calc(3 * var(--vw-rem));
			.mv__creatorItem {
				display: grid;
				grid-template-columns: 33% auto;
				.mv__creatorImg {
					border: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
					border-right: none;
					border-bottom: none;
					display: flex;
					justify-content: center;
				}
				.mv__creatorName {
					font-size: calc(6.3 * var(--vw-rem));
					line-height: 1.102;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 700;
					border: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
					font-family: var(--familyMurecho);
					border-right: none;
					border-bottom: none;
				}
				&:nth-child(even) {
					.mv__creatorName {
						border-right: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
					}
				}
				&:nth-child(2) {
					.mv__creatorName {
						font-size: calc(4.08 * var(--vw-rem));
					}
				}
				&:nth-child(5) {
					.mv__creatorName {
						font-size: calc(4.8 * var(--vw-rem));
					}
				}
				&:nth-child(6) {
					.mv__creatorName {
						font-size: calc(6.482 * var(--vw-rem));
					}
				}
				&:nth-child(7),
				&:nth-child(8) {
					.mv__creatorImg {
						border-bottom: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
					}
					.mv__creatorName {
						border-bottom: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
					}
				}
			}
		}
	}
	@media screen and (max-width: 767px) {
		grid-template-columns: 1fr;
		.mv__hamburger {
			display: flex;
			opacity: 1;
			visibility: visible;
			width: calc(4.8 * var(--sp-vw-rem));
			height: calc(4.8 * var(--sp-vw-rem));
			flex-direction: column;
			justify-content: space-between;
			cursor: pointer;
			z-index: 101;
			position: fixed;
			right: calc(2.2 * var(--sp-vw-rem));
			top: calc(0.9 * var(--sp-vw-rem));
			background: var(--colorWhite);
			padding: calc(1.5 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem));
			border-radius: 50%;
			border: calc(0.15 * var(--sp-vw-rem)) solid var(--colorBlack);
			span {
				display: block;
				height: calc(0.13 * var(--sp-vw-rem));
				background: var(--colorBlack);
				transition: transform 0.3s, opacity 0.3s;
			}
			&.is-open {
				border: none;
				span {
					&:nth-child(1) {
						transform: translateY(calc(0.85 * var(--sp-vw-rem))) rotate(45deg);
					}
					&:nth-child(2) {
						opacity: 0;
					}
					&:nth-child(3) {
						transform: translateY(calc(-0.85 * var(--sp-vw-rem))) rotate(-45deg);
					}
				}
			}
		}
		.mvNav {
			position: fixed;
			opacity: 1;
			visibility: visible;
			top: calc(0.7 * var(--sp-vw-rem));
			right: calc(1.89 * var(--sp-vw-rem));
			width: calc(22.7 * var(--sp-vw-rem));
			height: calc(35.3 * var(--sp-vw-rem));
			background: #fff;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s, visibility 0.3s;
			z-index: 100;
			padding: calc(5.5 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem)) calc(1.5 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem));
			display: flex;
			flex-direction: row-reverse;
			&.is-open {
				opacity: 1;
				visibility: visible; 
			}
			.mvNav__text {
				font-size: calc(2.472 * var(--sp-vw-rem));
				letter-spacing: 0.0125em;
				color: var(--colorWhite);
				background: var(--colorBlack);
				writing-mode: vertical-lr;
				height: auto;
				align-self: flex-start;
				font-family: var(--familyMPLUS1);
				line-height: 1.3;
				margin-left: calc(0.5 * var(--sp-vw-rem));
				font-weight: 900;
				clip-path: polygon(0 6%, 100% 6%, 100% 100%, 0% 100%);
				position: relative;
				top: calc(-0.2 * var(--sp-vw-rem));
			}
			.mvNavList {
				display: flex;
				flex-direction: row-reverse;
				.mvNavList__item {
					border-right: calc(0.164 * var(--sp-vw-rem)) solid var(--colorBlack);
					width: fit-content;
					&:nth-last-child(1) {
						border-left: calc(0.164 * var(--sp-vw-rem)) solid var(--colorBlack);
					}
					a {
						font-size: calc(3.183 * var(--sp-vw-rem));
						font-weight: 900;
						font-family: var(--familyMPLUS1);
						letter-spacing: -0.016em;
						writing-mode: vertical-lr;
						padding-block: calc(0.1 * var(--sp-vw-rem));
						color: var(--colorBlack);
						display: flex;
						align-items: center;
						span {
							writing-mode: horizontal-tb;
							font-size: calc(1.797 * var(--sp-vw-rem));
							letter-spacing: 0.03em;
							line-height: 1;
						}
					}
				}
			}
		}
		.mv__left {
			width: 100vw;
			height: calc(100vw + calc(1.5 * var(--sp-vw-rem)));
			padding-top: calc(6 * var(--sp-vw-rem));
			&::before {
				width: calc(11 * var(--sp-vw-rem));
				height: calc(9.6 * var(--sp-vw-rem));
				background-image: url(../img/img-turnover_sp.png);
			}
			.mv__subTitle {
				max-width: calc(32.8 * var(--sp-vw-rem));
				margin-inline: auto;
				padding-left: calc(0 * var(--sp-vw-rem));
			}
			.mv__title {
				margin-top: calc(-1 * var(--sp-vw-rem));
				margin-inline: auto;
				padding-inline: calc(0.5 * var(--sp-vw-rem)) calc(0.8 * var(--sp-vw-rem));
				max-width: 100%;
			}
			.mv__text {
				font-size: calc(1.8 * var(--sp-vw-rem));
				letter-spacing: 0.0127em;
				margin-top: 0;
				padding-left: 0;
				line-height: 1.5;
			}
		}
		.mv__right {
			display: none;
		}
	}
}

@media screen and (max-width: 767px)  {
	body.is-header-visible {
		#mv {
			.mv__hamburger ,
			.mvNav {
				position: absolute;
			}
		} 
	}
}

/* ======================
	product
==========================*/
.product__genre {
	max-width: calc(35 * var(--vw-rem));
	width: 100%;
}
.product__name {
	font-size: calc(3.467 * var(--vw-rem));
	line-height: 1.3;
	letter-spacing: 0.025em;
	font-weight: 700;
	font-family: var(--familyMurecho);
	margin-top: calc(1.5 * var(--vw-rem));
}

.product__text {
	font-size: calc(2.807 * var(--vw-rem));
	font-family: var(--familyMurecho);
	line-height: 1.5;
	margin-top: calc(2.733 * var(--vw-rem));
	max-width: calc(69.33 * var(--vw-rem));
}

.product__detailWrap {
	margin-top: calc(2 * var(--vw-rem));
}

.product__detail {
	font-size: calc(1.867 * var(--vw-rem));
	font-family: var(--familyMurecho);
	line-height: 1.3;
	letter-spacing: 0.0316em;
	padding-left: 1em;  
  text-indent: -1em;
}

.openBtn {
	cursor: pointer;
	border: none;
}

.modal {
	background: var(--colorWhite);
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: 0.3s ease-out;
	visibility: hidden;
	z-index: 5;
}

.modal.modalOpen {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

@media screen and (max-width: 767px) {
	.product__genre {
		max-width: calc(16 * var(--sp-vw-rem));
	}
	.product__name {
		font-size: calc(1.8 * var(--sp-vw-rem));
		letter-spacing: 0.017em;
		line-height: 1.2;
		margin-top: calc(0.7 * var(--sp-vw-rem));
	}

	.product__text {
		font-size: calc(1.645 * var(--sp-vw-rem));
		margin-top: calc(1.6 * var(--sp-vw-rem));
		max-width: 100%;
	}

	.product__detailWrap {
		margin-top: calc(1.8 * var(--sp-vw-rem));
	}

	.product__detail {
		font-size: calc(1.4 * var(--sp-vw-rem));
		letter-spacing: 0;
		line-height: 1.5;
	}
}

#product {
	padding-block: calc(13.8 * var(--vw-rem)) calc(9.9 * var(--vw-rem));
	.product__wrap {
		display: flex;
		gap: calc(2 * var(--vw-rem));
		.product__title {
			font-size: calc(16 * var(--vw-rem));
			font-weight: 900;
			writing-mode: vertical-rl;
			border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
			position: relative;
			font-family: var(--familyMPLUS1);
			line-height: 1;
			padding: calc(7.5 * var(--vw-rem)) calc(2 * var(--vw-rem)) calc(6.5 * var(--vw-rem));
			letter-spacing: -0.04em;
			height: fit-content;
			.section__num {
				 background-image: url(../img/img-section-num_01.png);
				 width: calc(25.367 * var(--vw-rem));
				 height: calc(22.762 * var(--vw-rem));
				 position: absolute;
				 top: calc(-14 * var(--vw-rem));
				 transform: translateX(-50%);
				 left: 50%;
			}
			.product__titleEffect {
				position: absolute;
				bottom: calc(-12 * var(--vw-rem));
				left: 50%;
				transform: translateX(-50%) scale(0);
				width: calc(29.2 * var(--vw-rem));
				height: calc(16.839 * var(--vw-rem));
				&.active {
					transform: translateX(-50%) scale(1);
				}
			}
		}
		.product__content {
			width: 100%;
			display: grid;
			gap: calc(1.2 * var(--vw-rem));
			.product__column {
				display: grid;
				grid-template-columns: 1fr 1fr;
				position: relative;
				.productLeft {
					position: relative;
					padding: calc(3 * var(--vw-rem)) calc(2.4 * var(--vw-rem)) calc(1.7 * var(--vw-rem));
					clip-path: polygon(0 0, 100% 0, 83% 100%, 0% 100%);
					z-index: 0;
					background: var(--colorWhite);
					margin-right: calc(-5 * var(--vw-rem));
					border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
					border-right: none;
					&::after {
						content: "";
						position: absolute;
						right: calc(13.8 * var(--vw-rem));
						top: 48%;
						transform: rotate(14.2deg) translateY(-50%);
						width: calc(1.758 * var(--vw-rem));
						height: calc(57 * var(--vw-rem));
						background: var(--colorBlack);
					}
					.productLeft__top {
						display: flex;
						gap: calc(3.2 * var(--vw-rem));
						.productLeft__img {
							max-width: calc(27.8 * var(--vw-rem));
							width: 100%;
							gap: calc(3.5 * var(--vw-rem));
							margin-top: calc(1 * var(--vw-rem));
						}
						.productLeft__head {
							.link__btn {
								height: calc(7.4 * var(--vw-rem));
								max-width: calc(24.6 * var(--vw-rem));
								font-size: calc(3.122 * var(--vw-rem));
								margin-top: calc(4.5 * var(--vw-rem));
								padding-left: calc(2 * var(--vw-rem));
								&::after {
									width: calc(3.477 * var(--vw-rem));
									height: calc(3.477 * var(--vw-rem));
									right: calc(1 * var(--vw-rem));
								}
							}
						}
					}
				}

				.productModal {
					padding: calc(4 * var(--vw-rem)) calc(5 * var(--vw-rem)) calc(4 * var(--vw-rem)) calc(9.5 * var(--vw-rem));
					display: grid;
					grid-template-columns: calc(36.3 * var(--vw-rem)) auto;
					gap: calc(7.8 * var(--vw-rem));
					width: calc(153.3 * var(--vw-rem));
					border: calc(1.867 * var(--vw-rem)) solid var(--colorBlack);
					.modalCloseBtn {
						position: absolute;
						right: calc(6 * var(--vw-rem));
						top: calc(3.5 * var(--vw-rem));
						background: unset;
						border: none;
						width: calc(7.5 * var(--vw-rem));
						height: calc(7.5 * var(--vw-rem));
						padding: 0;
					}
					.productModal__textarea {
						.product__btnColumn {
							display: flex;
							gap: calc(5.8 * var(--vw-rem));
							margin-top: calc(4.5 * var(--vw-rem));
							.link__btn {
								max-width: fit-content;
								padding-right: calc(7.4 * var(--vw-rem));
								font-size: calc(3.122 * var(--vw-rem));
								height: calc(7.423 * var(--vw-rem));
								&::after {
									width: calc(3.477 * var(--vw-rem));
									height: calc(3.477 * var(--vw-rem));
									right: calc(1 * var(--vw-rem));
								}
								&::before {
									content: "";
									height: calc(0.1 * var(--vw-rem));
									width: calc(100% - calc(7.4 * var(--vw-rem)));
									background: var(--colorWhite);
									position: absolute;
									bottom: calc(0.8 * var(--vw-rem));
								}
							}
						}
						.product__detailWrap {
							margin-top: calc(3.2 * var(--vw-rem));
						}
					}
				}

				.productRight {
					position: relative;
					padding: calc(5.5 * var(--vw-rem)) calc(4 * var(--vw-rem)) calc(4.7 * var(--vw-rem));
					clip-path: polygon(17% 0, 100% 0, 100% 100%, 0% 100%);
					z-index: 0;
					background: var(--colorWhite);
					margin-left: calc(-7.2 * var(--vw-rem));
					border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
					border-left: none;
					&::after {
						content: "";
						position: absolute;
						left: calc(-0.2 * var(--vw-rem));
						top: 48%;
						transform: rotate(14.2deg) translateY(-50%);
						width: calc(1.758 * var(--vw-rem));
						height: calc(57 * var(--vw-rem));
						background: var(--colorBlack);
					}
				}
				.productSecret {
					background: var(--colorBlack);
					.productSecretText {
						font-size: calc(9.647 * var(--vw-rem));
						letter-spacing: -0.02em;
						color: var(--colorWhite);
						font-family: var(--familyDelaGothicOne);
						position: absolute;
						left: calc(6 * var(--vw-rem));
						top: calc(17.5 * var(--vw-rem));
						transform: rotate(-45deg);
						text-align: center;
						line-height: 1.018;
					}
					.productSecret__img {
						position: absolute;
						right: calc(7.5 * var(--vw-rem));
						bottom: calc(4 * var(--vw-rem));
						max-width: calc(20 * var(--vw-rem));
						width: 100%;
					}
				}
			}
			.product__lead {
				border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
				display: flex;
				justify-content: center;
				align-items: center;
				padding: calc(2 * var(--vw-rem)) calc(8 * var(--vw-rem)) calc(2 * var(--vw-rem)) calc(2 * var(--vw-rem)) ;
				gap: calc(1.5 * var(--vw-rem));
				position: relative;
				.product__leadTreat {
					max-width: calc(8.8 * var(--vw-rem));
					position: relative;
					top: calc(2 * var(--vw-rem));
					width: 100%;
				}
				.product__leadText {
					max-width: calc(119.2rem * var(--vw-rem));
					width: 100%;
				}
				.product__leadEffectLeft {
					position: absolute;
					width: calc(25.2 * var(--vw-rem));
					height: calc(12.4 * var(--vw-rem));
					left: calc(1 * var(--vw-rem));
          bottom: calc(-13 * var(--vw-rem));
				}
				.product__leadEffectRight {
					position: absolute;
					width: calc(9.5 * var(--vw-rem));
					height: calc(14.6 * var(--vw-rem));
					right: calc(-2 * var(--vw-rem));
          top: calc(-3 * var(--vw-rem));
				}
			}
		}
	}
	@media screen and (max-width: 767px) {
		padding-block: calc(7 * var(--sp-vw-rem)) 0;
		.product__wrap {
			display: grid;
			gap: calc(0.8 * var(--sp-vw-rem));
			.product__title {
				font-size: calc(8.215 * var(--sp-vw-rem));
				writing-mode: rl;
				padding: calc(2 * var(--sp-vw-rem)) calc(0 * var(--sp-vw-rem)) calc(2 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem));
				border: calc(0.8 * var(--sp-vw-rem)) solid var(--colorBlack);
				letter-spacing: 0;
				.section__num {
					width: calc(11.6 * var(--sp-vw-rem));
					height: calc(10.4 * var(--sp-vw-rem));
					background-image: url(../img/img-section-num_01_sp.png);
					top: calc(-7 * var(--sp-vw-rem));
					left: calc(4.8 * var(--sp-vw-rem));
				}
				.product__titleEffect  {
					width: calc(11.6 * var(--sp-vw-rem));
					top: calc(-4.8 * var(--sp-vw-rem));
					transform: scale(0);
					left: calc(21.5 * var(--sp-vw-rem));
					&.active {
						transform: scale(1);
					}
				}
			}
			.product__content {
				gap: calc(1 * var(--sp-vw-rem));
				.product__column {
					grid-template-columns: 1fr;
					.productLeft {
						border: calc(0.8 * var(--sp-vw-rem)) solid var(--colorBlack);
						padding: 0;
						margin-right: 0;
						clip-path: unset;
						padding: calc(1 * var(--sp-vw-rem)) calc(0.5 * var(--sp-vw-rem)) calc(5 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem));
						clip-path: polygon(0 0, 100% 0, 100% 85.4%, 0 100%);
						&::after {
							transform: translateX(-50%) rotate(82deg);
							width: calc(0.8 * var(--sp-vw-rem));
							height: calc(35 * var(--sp-vw-rem));
							left: 50%;
							top: unset;
							bottom: calc(-15.4 * var(--sp-vw-rem));
						}
						.productLeft__top {
							gap: calc(1.7 * var(--sp-vw-rem));
							.productLeft__img {
								max-width: calc(12.5 * var(--sp-vw-rem));
								margin-top: calc(0.2 * var(--sp-vw-rem));
							}
							.productLeft__head {
								.link__btn {
									font-size:calc(1.8 * var(--sp-vw-rem));
									height: calc(3.5 * var(--sp-vw-rem));
									margin-top: calc(1 * var(--sp-vw-rem));
									max-width: calc(14 * var(--sp-vw-rem));
									padding-left: calc(1 * var(--sp-vw-rem));
									&::after {
										width: calc(1.8 * var(--sp-vw-rem));
										height: calc(1.8 * var(--sp-vw-rem));
										right: calc(1 * var(--sp-vw-rem));
									}
								}
							}
						}
					}
					.productSecret {
						display: flex;
						.productSecretText {
							font-size: calc(4.471 * var(--sp-vw-rem));
							letter-spacing: -0.02em;
							transform: unset;
							position: unset;
							display: flex;
							transform: rotate(-7deg);
							text-align: start;
						}
						.productSecret__img {
							position: unset;
							max-width: calc(6.9 * var(--sp-vw-rem));
						}
					}
					.productModal {
						padding: calc(4 * var(--sp-vw-rem)) calc(0.5 * var(--sp-vw-rem));
						grid-template-columns: 1fr;
						width: calc(100vw - calc(1.4 * var(--sp-vw-rem)));
						border: calc(0.8 * var(--sp-vw-rem)) solid var(--colorBlack);
						gap: calc(0.8 * var(--sp-vw-rem));
						.modalCloseBtn {
							width: calc(3 * var(--sp-vw-rem));
							height: calc(3 * var(--sp-vw-rem));
							top: calc(1 * var(--sp-vw-rem));
							right: calc(1 * var(--sp-vw-rem));
						}
						.productModal__img {
							max-width: calc(16.1 * var(--sp-vw-rem));
							margin-inline: auto;
						}
						.productModal__textarea {
							.product__genre {
								margin-inline: auto;
							}
							.product__btnColumn {
								display: grid;
								gap: calc(2.4 * var(--sp-vw-rem));
								margin-top: calc(2 * var(--sp-vw-rem));
								.link__btn {
									font-size: calc(2.226 * var(--sp-vw-rem));
									height: calc(5.7 * var(--sp-vw-rem));
									max-width: calc(31 * var(--sp-vw-rem));
									margin-inline: auto;
									letter-spacing: 0;
									padding-right: 0;
									&:nth-child(1) {
										order: 2;
										font-size: calc(2.426 * var(--sp-vw-rem));
									}
									&::before {
										bottom: calc(0.8 * var(--sp-vw-rem));
										width: calc(100% - calc(7.4 * var(--sp-vw-rem)));
									}
									&::after {
										width: calc(2.7 * var(--sp-vw-rem));
										height: calc(2.7 * var(--sp-vw-rem));
										right: calc(1 * var(--sp-vw-rem));
									}
								}
							}
							.product__name {
								margin-top: calc(0.8 * var(--sp-vw-rem));
								text-align: center;
							}
							.product__detailWrap {
								margin-top: calc(2.4 * var(--sp-vw-rem));
								.product__detail {
									padding-left: 1.4em;
								}
							}
						}
					}
					.productRight {
						clip-path: none;
						margin-left: 0;
						padding: calc(3.4 * var(--sp-vw-rem)) calc(1.2 * var(--sp-vw-rem)) calc(1.8 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem));
						border: calc(0.8 * var(--sp-vw-rem)) solid var(--colorBlack);
						margin-top: calc(-3.5 * var(--sp-vw-rem));
						justify-content: space-between;
						clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
						&::after {
							left: 50%;
							transform: translateX(-50%) rotate(82deg);
							top: 0;
							width: calc(0.8 * var(--sp-vw-rem));
							height: calc(35 * var(--sp-vw-rem));
						}
					}
				}
				.product__lead {
					padding: 0 0 0 calc(1 * var(--sp-vw-rem));
					border: none;
					margin-top: calc(5.5 * var(--sp-vw-rem));
					.product__leadEffectLeft {
						width: calc(15.7 * var(--sp-vw-rem));
						height: calc(7.5 * var(--sp-vw-rem));
						top: calc(-6.5 * var(--sp-vw-rem));
						left: calc(1 * var(--sp-vw-rem));
					}
					.product__leadEffectRight {
						width: calc(4.4 * var(--sp-vw-rem));
						height: calc(6.7 * var(--sp-vw-rem));
						right: calc(4.5 * var(--sp-vw-rem));
						top: calc(-5 * var(--sp-vw-rem));
					}
					.product__leadTreat {
						display: none;
					}
				}
			}
		}	
	}
}


/* ======================
	creator
==========================*/
#creator {
	padding-block: calc(14.5 * var(--vw-rem)) calc(7.7 * var(--vw-rem));
	.inner {
		.creator__top {
			display: flex;
			position: relative;
			.section__num {
				content: "";
				background-image: url(../img/img-section-num_02.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				width: calc(33.6 * var(--vw-rem));
				height: calc(26.3 * var(--vw-rem));
				top: calc(-10 * var(--vw-rem));
				left: calc(13.2 * var(--vw-rem));
				z-index: 1;
			}
			.creator__topEffet {
				content: "";
				background-image: url(../img/img-creator-sound-effects_01.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				width: calc(52 * var(--vw-rem));
				height: calc(27 * var(--vw-rem));
				top: calc(-12 * var(--vw-rem));
				left: calc(23.8 * var(--vw-rem));
				z-index: 1;
			}
			.creator__title {
				font-size: calc(22.133 * var(--vw-rem));
				font-weight: 900;
				font-family: var(--familyMPLUS1);
				writing-mode: vertical-rl;
				line-height: 0.76;
				letter-spacing: -0.04em;
				border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
				border-right: none;
				position: relative;
				clip-path: polygon(0 0, 100% 0, 75.1% 100%, 0% 100%);
				padding: calc(14 * var(--vw-rem)) calc(11.8 * var(--vw-rem)) calc(2.8 * var(--vw-rem)) 0;
				.creator__titleEffect {
					width: calc(25 * var(--vw-rem));
					height: calc(25 * var(--vw-rem));
					bottom: calc(0 * var(--vw-rem));
					right: calc(9 * var(--vw-rem));
					position: absolute;
				}
				&::after {
					position: absolute;
					content: "";
					top: 50%;
					transform: translateY(-50%) rotate(7.4deg);
					width: calc(1.758 * var(--vw-rem));
					height: calc(88 * var(--vw-rem));
					background: var(--colorBlack);
					clip-path: polygon(0 0, 100% 0, 75.4% 100%, 0% 100%);
					right: calc(5.6 * var(--vw-rem));
				}
				.is-small {
					font-size: calc(12.4 * var(--vw-rem));
          letter-spacing: -0.08em;
				}
			}
			.creator__content {
				border: calc(1.758 * var(--vw-rem)) solid var(--colorBlack);
				border-left: none;
				padding: calc(2.5 * var(--vw-rem)) calc(4.3 * var(--vw-rem)) calc(2 * var(--vw-rem)) calc(16.3 * var(--vw-rem));
				width: 100%;
				margin-left: calc(-9 * var(--vw-rem));
				clip-path: polygon(8.2% 0, 100% 0, 100% 100%, 0% 100%);
				position: relative;
				&::before {
					content: "";
					position: absolute;
					left: calc(5.4 * var(--vw-rem));
					top: 50%;
					transform: translateY(-50%) rotate(7.4deg);
					width: calc(1.758 * var(--vw-rem));
					height: calc(88 * var(--vw-rem));
					background: var(--colorBlack);
				}
				.creator__contentEffect {
					content: "";
					width: calc(17 * var(--vw-rem));
					right: calc(9 * var(--vw-rem));
					bottom: 0;
					position: absolute;
				}
				.creatorList {
					display: grid;
					grid-template-columns: repeat(4,1fr);
					gap: calc(2.1 * var(--vw-rem)) calc(3.5 * var(--vw-rem));
					.creatorList__item {
						position: relative;
						max-width: calc(26.9 * var(--vw-rem));
						width: 100%;
						.creatorList__btn {
							background: none;
							border: none;
							width: 100%;
							padding: 0;
							.creatorList__img {
								display: flex;
								img {
									width: 100%;
								}
							}
							.creatorList__name {
								background: var(--colorBlack);
								color: var(--colorWhite);
								font-size: calc(2.396 * var(--vw-rem));
								letter-spacing: 0.027em;
								position: relative;
								display: flex;
								justify-content: center;
								align-items: center;
								padding-block: calc(0.5 * var(--vw-rem));
								font-weight: 600;
								height: calc(4.5 * var(--vw-rem));
								&::after {
									content: "";
									background-image: url(../img/icon-plus-white.svg);
									background-position: center;
									background-repeat: no-repeat;
									background-size: contain;
									width: calc(2.877 * var(--vw-rem));
									height: calc(2.877 * var(--vw-rem));
									position: absolute;
									right: calc(1.8 * var(--vw-rem));
									top: 50%;
									transform: translateY(-50%);
								}
							}
						}
					}
				}
				.creator__text {
					font-size: calc(2.667 * var(--vw-rem));
					letter-spacing: 0.025em;
					font-weight: 500;
					font-family: var(--familyMurecho);
					margin-top: calc(5.1 * var(--vw-rem));
					line-height: 1.71;
				}
			}
		}
		.creatorComics {
			margin-top: calc(3.6 * var(--vw-rem));
			position: relative;
			display: none;
			&.active {
				display: block;
			}
			.creatorcomicsList {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: calc(3.2 * var(--vw-rem)) calc(4 * var(--vw-rem));
				.creator__profile {
					background: var(--colorBlack);
					display: grid;
					grid-template-columns: auto calc(30.66 * var(--vw-rem));
					padding: calc(5.733 * var(--vw-rem)) calc(5.867 * var(--vw-rem)) calc(5.5 * var(--vw-rem)) calc(8.4 * var(--vw-rem));
					align-items: center;
					.creator__textarea {
						.creator__name {
							color: var(--colorWhite);
							font-size: calc(5.333 * var(--vw-rem));
							font-weight: 700;
							font-family: var(--familyMurecho);
							line-height: 1.102;
						}
						.creator__xWrap {
							display: flex;
							gap: calc(1.837 * var(--vw-rem));
							align-items: center;
							margin-top: calc(3 * var(--vw-rem));
							padding-left: calc(1 * var(--vw-rem));
							.creator__xIcon {
								width: calc(3.882 * var(--vw-rem));
								height: calc(3.967 * var(--vw-rem));
							}
							.creator__xName {
								font-size: calc(3 * var(--vw-rem));
								color: var(--colorWhite);
								font-weight: 700;
								font-family: var(--familyNotoSans);
								line-height: 1;
								margin-top: calc(-1 * var(--vw-rem));
							}
						}
					}
					.creator__icon {
						img {
							width: 100%;
						}
					}
				}
				.comicsList__item {
					border: calc(1.867 * var(--vw-rem)) solid var(--colorBlack);
					display: grid;
					grid-template-columns: calc(41.7 * var(--vw-rem)) calc(18.157 * var(--vw-rem));
					justify-content: space-between;
					background: var(--colorGray);
					padding: calc(3 * var(--vw-rem)) calc(8.5 * var(--vw-rem));
					min-height: calc(51 * var(--vw-rem));
					.comicsList__btn {
						background: var(--colorWhite);
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						&::after {
							position: absolute;
							content: "";
							right: calc(1 * var(--vw-rem));
							bottom: calc(1 * var(--vw-rem));
							background-image: url(../img/icon-plus.svg);
							background-position: center;
							background-repeat: no-repeat;
							background-size: contain;
							width: calc(3.667 * var(--vw-rem));
							height: calc(3.667 * var(--vw-rem));
						}
						img {
							width: calc(14.9 * var(--vw-rem));
						}
						&.is-single {
							img {
								width: calc(33 * var(--vw-rem));
							}
						}
					}
				}
				.comicsList__secret {
					background: var(--colorBlack);
					grid-template-columns: calc(41.7 * var(--vw-rem)) calc(19.3 * var(--vw-rem));
					padding: calc(2.6 * var(--vw-rem)) calc(9 * var(--vw-rem)) calc(3 * var(--vw-rem)) calc(8.5 * var(--vw-rem));
					.comicsList__secretTextWrap {
						background: #D9D9D9;
						width: calc(41.7 * var(--vw-rem));
						height: calc(41.7 * var(--vw-rem));
						position: relative;
						.comicsList__secretText {
							font-size: calc(7.623 * var(--vw-rem));
							color: var(--colorWhite);
							letter-spacing: 0.02em;
							font-family: var(--familyDelaGothicOne);
							transform: translateX(-50%) translateY(-50%) rotate(-25deg);
							position: absolute;
							left: 52%;
							top: 52%;
							line-height: 1.05;
							text-align: center;
							letter-spacing: -0.02em;
						}
					}
				}
			}
		}
		.comicsListmodal {
			width: calc(100vw - calc(13.256 * var(--vw-rem)));
			border: calc(1.867 * var(--vw-rem)) solid var(--colorBlack);
			padding: calc(8.2 * var(--vw-rem)) calc(28.2 * var(--vw-rem));
			background: var(--colorGray);
			.comicsListmodal__img {
				background: var(--colorWhite);
			}
			.modalCloseBtn {
				position: absolute;
				right: calc(5.5 * var(--vw-rem));
				top: calc(3.5 * var(--vw-rem));
				background: unset;
				border: none;
				width: calc(7.5 * var(--vw-rem));
				height: calc(7.5 * var(--vw-rem));
				padding: 0;
			}
		}
	}
	@media screen and (max-width: 767px) {
		padding-block: calc(2.8 * var(--sp-vw-rem)) 0;
		.inner {
			.creator__top {
				display: grid;
				gap: calc(1.6 * var(--sp-vw-rem));
				.section__num {
					background-image: url(../img/img-section-num_02_sp.png);
					width: calc(11.6 * var(--sp-vw-rem));
					height: calc(9.094 * var(--sp-vw-rem));
					left: calc(4.2 * var(--sp-vw-rem));
          top: calc(0.8 * var(--sp-vw-rem));
				}
				.creator__topEffet {
					width: calc(22.5 * var(--sp-vw-rem));
					height: calc(13 * var(--sp-vw-rem));
					top: calc(10.5 * var(--sp-vw-rem));
					left: calc(-1.5 * var(--sp-vw-rem));
					transform: scale(0) rotate(14deg);
					&.active {
						transform: scale(1) rotate(14deg);
					}
				}
				.creator__title {
					font-size: calc(7.78 * var(--sp-vw-rem));
					writing-mode: rl;
					padding: calc(1.2 * var(--sp-vw-rem)) 0 calc(6 * var(--sp-vw-rem)) calc(8.6 * var(--sp-vw-rem));
					clip-path: polygon(0 0, 100% 0, 100% 100%, 0 73%);
					border: calc(0.752 * var(--sp-vw-rem)) solid var(--colorBlack);
					border-right: calc(0.752 * var(--sp-vw-rem)) solid var(--colorBlack);
					border-bottom: none;
					line-height: 0.62;
					letter-spacing: 0;
					.is-small {
						font-size: calc(4.174 * var(--sp-vw-rem));
						letter-spacing: -0.0479em;
						padding-left: calc(0.6 * var(--sp-vw-rem));
					}
					.creator__titleEffect  {
						width: calc(10 * var(--sp-vw-rem));
						height: calc(10 * var(--sp-vw-rem));
						right: calc(-0.5 * var(--sp-vw-rem));
						top: calc(-0.8 * var(--sp-vw-rem));
					}
					&::after {
						transform: translateX(50%) rotate(97.5deg);
						top: unset;
						bottom: calc(-15.3 * var(--sp-vw-rem));
						right: 50%;
						width: calc(0.752 * var(--sp-vw-rem));
						height: calc(36 * var(--sp-vw-rem));
					}
				}
				.creator__content {
					border: calc(0.752 * var(--sp-vw-rem)) solid var(--colorBlack);
					border-left: calc(0.752 * var(--sp-vw-rem)) solid var(--colorBlack);
					border-top: none;
					padding: calc(6.3 * var(--sp-vw-rem)) calc(0.5 * var(--sp-vw-rem)) calc(1.3 * var(--sp-vw-rem));
					margin-left: 0;
					margin-top: calc(-5.2 * var(--sp-vw-rem));
					clip-path: none;
					clip-path: polygon(0 0, 100% 10.5%, 100% 100%, 0 100%);
					&::before {
						transform: translateX(-50%) rotate(97.5deg);
						top: calc(-15.4 * var(--sp-vw-rem));
						left: 50%;
						width: calc(0.752 * var(--sp-vw-rem));
						height: calc(36 * var(--sp-vw-rem));
					}
					.creator__contentEffect  {
						display: none;
					}
					.creatorList {
						gap: calc(1.3 * var(--sp-vw-rem)) calc(0.974 * var(--sp-vw-rem));
						.creatorList__item {
							max-width: 100%;
							.creatorList__btn {
								.creatorList__name {
									font-size: calc(1.292 * var(--sp-vw-rem));
									justify-content: flex-start;
									padding-left: calc(0.5 * var(--sp-vw-rem));
									letter-spacing: 0.019em;
									height: calc(3.6 * var(--sp-vw-rem));
									align-items: flex-start;
									text-align: start;
									padding-block: calc(0.3 * var(--sp-vw-rem)) calc(0.1 * var(--sp-vw-rem));
                  line-height: 1.3;
									&::after {
										content: "";
										width: calc(1.268 * var(--sp-vw-rem));
										height: calc(1.268 * var(--sp-vw-rem));
										right: calc(0.4 * var(--sp-vw-rem));
										transform: none;
										top: calc(0.5 * var(--sp-vw-rem));
									}
								}
							}
						}
					}
					.creator__text {
						font-size: calc(1.8 * var(--sp-vw-rem));
						margin-top: calc(1.2 * var(--sp-vw-rem));
						letter-spacing: 0.016em;
						line-height: 1.71;
					}
				}
			}
			.creatorComics {
				margin-top: calc(1.1 * var(--sp-vw-rem));
				&:nth-child(3) ,
				&:nth-child(6){
					.creatorcomicsList {
						.creator__profile {
							padding-left: calc(1.5 * var(--sp-vw-rem));
							.creator__textarea {
								.creator__xWrap {
									.creator__xName {
										font-size: calc(1.2 * var(--sp-vw-rem));
									}
								}
							}
						}
					}
				}
				&:nth-child(5) ,
				&:nth-child(7) ,
				&:nth-child(8) {
					.creatorcomicsList {
						.creator__profile {
							padding-left: calc(2 * var(--sp-vw-rem));
						}
					}
				}
				.creatorcomicsList {
					grid-template-columns: 1fr;
					gap: calc(1.1 * var(--sp-vw-rem));
					.creator__profile {
						padding: calc(2 * var(--sp-vw-rem)) calc(2.409 * var(--sp-vw-rem)) calc(2.2 * var(--sp-vw-rem)) calc(3.5 * var(--sp-vw-rem));
						grid-template-columns: auto calc(16 * var(--sp-vw-rem));
						.creator__textarea {
							.creator__name {
								font-size: calc(2.19 * var(--sp-vw-rem));
							}
							.creator__xWrap {
								margin-top: calc(1.2 * var(--sp-vw-rem));
								padding-left: calc(0.5 * var(--sp-vw-rem));
								gap: calc(0.754 * var(--sp-vw-rem));
								.creator__xIcon {
									width: calc(1.594 * var(--sp-vw-rem));
									height: calc(2 * var(--sp-vw-rem));
								}
								.creator__xName {
									font-size: calc(1.3 * var(--sp-vw-rem));
									margin-top: 0;
								}
							}
						}
					}
					.comicsList__item {
						grid-template-columns: calc(17.1 * var(--sp-vw-rem)) calc(7.443 * var(--sp-vw-rem));
						padding: calc(1 * var(--sp-vw-rem)) calc(3.5 * var(--sp-vw-rem));
						border: calc(0.75 * var(--sp-vw-rem)) solid var(--colorBlack);
						min-height: calc(20 * var(--sp-vw-rem));
						.comicsList__btn {
							padding: calc(0.5 * var(--sp-vw-rem)) calc(5 * var(--sp-vw-rem)) calc(0.5 * var(--sp-vw-rem)) calc(5.2 * var(--sp-vw-rem));
							img {
								width: 100%;
							}
							&::after {
								width: calc(1.5 * var(--sp-vw-rem));
								height: calc(1.5 * var(--sp-vw-rem));
								right: calc(0.5 * var(--sp-vw-rem));
								bottom: calc(0.7 * var(--sp-vw-rem));
							}
							&.is-single {
								padding-inline: calc(2.43 * var(--sp-vw-rem)) calc(2.42 * var(--sp-vw-rem)) ;
								img {
									width: 100%;
								}
							}
						}
					}
					.comicsList__secret {
						padding: calc(1.1 * var(--sp-vw-rem)) calc(3.7 * var(--sp-vw-rem)) calc(1.1 * var(--sp-vw-rem)) calc(3.5 * var(--sp-vw-rem));
						grid-template-columns: calc(17.1 * var(--sp-vw-rem)) calc(7.9 * var(--sp-vw-rem));
						.comicsList__secretTextWrap {
							width: calc(17.1 * var(--sp-vw-rem));
							height: calc(17.1 * var(--sp-vw-rem));
							.comicsList__secretText {
								font-size: calc(3.13 * var(--sp-vw-rem));
							}
						}
					}
				}
			}
			.comicsListmodal {
				padding: 0;
				border: calc(0.75 * var(--sp-vw-rem)) solid var(--colorBlack);
				width: calc(100vw - calc(1.4 * var(--sp-vw-rem)));
				top: calc(22 * var(--sp-vw-rem));
				.comicsListmodal__img {
					padding-top: calc(4 * var(--sp-vw-rem));
				}
				.modalCloseBtn {
					width: calc(3.1 * var(--sp-vw-rem));
					height: calc(3.1 * var(--sp-vw-rem));
					right: calc(1 * var(--sp-vw-rem));
					top: calc(1 * var(--sp-vw-rem));
				}
			}
		}
	}
}
/* ======================
	recipe
==========================*/
#recipe {
	background: var(--colorGray);
	padding-block: calc(18 * var(--vw-rem)) calc(12.4 * var(--vw-rem));
	.inner {
		padding-inline: calc(6.67 * var(--vw-rem)) calc(2.4 * var(--vw-rem));
		.recipe__wrap {
			position: relative;
			.recipeDetail {
				position: absolute;
				max-width: calc(64.1 * var(--vw-rem));
				width: 100%;
				.recipe__title {
					font-size: calc(14.789 * var(--vw-rem));
					font-weight: 900;
					letter-spacing: -0.05em;
					font-family: var(--familyMPLUS1);
					position: relative;
					line-height: 1;
					.recipe__titleEffect {
						position: absolute;
						right: calc(3 * var(--vw-rem));
            bottom: calc(2 * var(--vw-rem));
						width: calc(14.984 * var(--vw-rem));
						height: calc(12.5 * var(--vw-rem));
					}
					.section__num {
						background-image: url(../img/img-section-num_03.png);
						width: calc(24 * var(--vw-rem));
						height: calc(19 * var(--vw-rem));
						top: calc(-18.5 * var(--vw-rem));
            left: calc(8 * var(--vw-rem));
					}
					.is-small {
						font-size: calc(9.067 * var(--vw-rem));
						line-height: 0.89;
						letter-spacing: -0.27em;
						position: relative;
						left: calc(-1.5 * var(--vw-rem));
					}
				}
				.recipe__desc {
					font-weight: 500;
					letter-spacing: 0.025em;
					line-height: 1.71;
					font-size: calc(2.667 * var(--vw-rem));
					font-family: var(--familyMurecho);
					margin-top: calc(3 * var(--vw-rem));
				}
				.recipe__btnWrap {
					display: grid;
					gap: calc(3.73 * var(--vw-rem));
					margin-top: calc(5 * var(--vw-rem));
					.link__btn {
						max-width: calc(49.13 * var(--vw-rem));
						font-size: calc(3.813 * var(--vw-rem));
						font-family: var(--familyMurecho);
						height: calc(9.067 * var(--vw-rem));
						padding-left: calc(2 * var(--vw-rem));
						border: none;
						&::before {
							content: "";
							width: calc(100% - calc(10 * var(--vw-rem)));
							bottom: calc(2 * var(--vw-rem));
							height: calc(0.1 * var(--vw-rem));
							position: absolute;
							background: var(--colorWhite);
						}
						&::after {
							width: calc(4.247 * var(--vw-rem));
							height: calc(4.247 * var(--vw-rem));
							right: calc(2 * var(--vw-rem));
						}
					}
				}
			}
			.recipeList {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: calc(5.6 * var(--vw-rem));
				padding-left: calc(11.733 * var(--vw-rem));
				.recipeList__item {
					background: var(--colorWhite);
					border: calc(0.351 * var(--vw-rem)) solid var(--colorBlack);
					position: relative;
					padding: calc(4.8 * var(--vw-rem));
					min-height: calc(90.9 * var(--vw-rem));
					.recipeList__img {
						margin: calc(1.5 * var(--vw-rem)) calc(1 * var(--vw-rem)) 0;
						text-align: center;
					}
					&:nth-last-child(1),
					&:nth-last-child(2) {
						min-height: unset;
					}
					&:nth-child(6) {
						.recipeList__img {
							margin-inline: calc(2 * var(--vw-rem));
						}
						.recipeList__title {
							margin-top: calc(6.8 * var(--vw-rem));
						}
					}
					&:nth-last-child(1) {
						border: calc(1 * var(--vw-rem)) solid var(--colorBlack);
						padding-inline: calc(4 * var(--vw-rem)) calc(4.7 * var(--vw-rem));
						background-image: url(../img/bg-recipe-effects.png);
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
						.recipeList__img {
							margin: calc(7 * var(--vw-rem)) calc(1 * var(--vw-rem)) 0;
						}
						.recipeList__itemEffect {
							position: absolute;
							width: calc(49 * var(--vw-rem));
							top: calc(-7 * var(--vw-rem));
							left: calc(-5.5 * var(--vw-rem));
						}
						.recipeList__bubble--bottom {
							position: absolute;
							width: calc(35.4 * var(--vw-rem));
							height: calc(21.15 * var(--vw-rem));
							bottom: calc(-6.5 * var(--vw-rem));
							right: calc(-5.5 * var(--vw-rem));
						}
					}
					.recipeList__effect {
						position: absolute;
						top: calc(-7 * var(--vw-rem));
						left: calc(-6 * var(--vw-rem));
						width: calc(49 * var(--vw-rem));
					}
					.recipeList__step {
						content: "";
						position: absolute;
						top: calc(-2 * var(--vw-rem));
            left: calc(-5 * var(--vw-rem));
						max-width: calc(19.93 * var(--vw-rem));
						width: 100%;
						height: calc(16 * var(--vw-rem));
						display: flex;
					}
					.recipeList__title {
						font-size: calc(3.467 * var(--vw-rem));
						line-height: 1.3;
						letter-spacing: 0.025em;
						font-family: var(--familyMurecho);
						font-weight: 700;
						margin-top: calc(4.8 * var(--vw-rem));
						min-height: calc(8.5 * var(--vw-rem));
					}
					.recipeList__text {
						font-size: calc(2.8 * var(--vw-rem));
						line-height: 1.5;
						font-family: var(--familyMurecho);
						margin-top: calc(2.112 * var(--vw-rem));
					}

					.recipeList__complete {
						font-size: calc(3.467 * var(--vw-rem));
						font-weight: 700;
						letter-spacing: 0.025em;
						border: calc(0.267 * var(--vw-rem)) solid var(--colorBlack);
						height: calc(11.2 * var(--vw-rem));
						width: 100%;
						max-width: calc(42.5 * var(--vw-rem));
						display: flex;
						justify-content: center;
						align-items: center;
						background: var(--colorWhite);
						margin-top: calc(4.8 * var(--vw-rem));
					}
				}
			}
		}
	}
	@media screen and (max-width: 767px) {
		padding-block: calc(12.5 * var(--sp-vw-rem)) calc(6.5 * var(--sp-vw-rem));
		.inner {
			padding-inline: calc(1.3 * var(--sp-vw-rem));
			.recipe__wrap {
				.recipeDetail {
					max-width: 100%;
					position: unset;
					.recipe__title {
						font-size: calc(7.598 * var(--sp-vw-rem));
						letter-spacing: 0.005em;
						padding-left: calc(1 * var(--sp-vw-rem));
						.recipe__titleEffect {
							width: calc(9.6 * var(--sp-vw-rem));
							height: calc(8 * var(--sp-vw-rem));
							right: calc(1 * var(--sp-vw-rem));
							bottom: calc(-2 * var(--sp-vw-rem));
						}
						.is-small {
							font-size: calc(3.973 * var(--sp-vw-rem));
						}
						.section__num {
							background-image: url(../img/img-section-num_03_sp.png);
							width: calc(12 * var(--sp-vw-rem));
							height: calc(9.5 * var(--sp-vw-rem));
							top: calc(-9.5 * var(--sp-vw-rem));
							left: calc(6 * var(--sp-vw-rem));
						}
					}
					.recipe__desc {
						font-size: calc(1.8 * var(--sp-vw-rem));
						letter-spacing: 0.027em;
						line-height: 1.707;
						margin-top: calc(2.2 * var(--sp-vw-rem));
					}
					.recipe__btnWrap {
						margin-top: calc(3 * var(--sp-vw-rem));
						gap: calc(2.3 * var(--sp-vw-rem));
						padding-inline: calc(1.8 * var(--sp-vw-rem));
						.link__btn {
							font-size: calc(2.426 * var(--sp-vw-rem));
							height: calc(5.768 * var(--sp-vw-rem));
							padding-left: calc(1 * var(--sp-vw-rem));
							max-width: 100%;
							&::before {
								width: calc(100% - calc(6.5 * var(--sp-vw-rem)));
								bottom: calc(1 * var(--sp-vw-rem));
								height: calc(0.085 * var(--sp-vw-rem));
							}
							&::after {
								width: calc(2.7 * var(--sp-vw-rem));
								height: calc(2.7 * var(--sp-vw-rem));
								right: calc(1 * var(--sp-vw-rem));
							}
						}
					}
				}
				.recipeList {
					grid-template-columns: 1fr;
					padding: 0 calc(1.8 * var(--sp-vw-rem));
					margin-top: calc(4 * var(--sp-vw-rem));
					gap: calc(1.5 * var(--sp-vw-rem));
					li:nth-child(1) {
						display: none;
					}
					.recipeList__item {
						min-height: unset;
						padding: calc(4 * var(--sp-vw-rem)) calc(2.5 * var(--sp-vw-rem)) calc(2 * var(--sp-vw-rem));
						border: calc(0.351 * var(--sp-vw-rem)) solid var(--colorBlack);
						&:nth-child(4),
						&:nth-child(7) {
							padding-bottom: calc(3 * var(--sp-vw-rem));
						}
						&:nth-child(6)  {
							.recipeList__img {
								margin-inline: calc(1 * var(--sp-vw-rem));
							}
							.recipeList__title {
								margin-top: calc(1 * var(--sp-vw-rem));
							}
						}
						&:nth-last-child(1) {
							padding: calc(2 * var(--sp-vw-rem)) calc(2 * var(--sp-vw-rem)) calc(7.5 * var(--sp-vw-rem)) calc(2 * var(--sp-vw-rem));
							border: calc(1 * var(--sp-vw-rem)) solid var(--colorBlack);
							.recipeList__itemEffect {
								width: calc(29 * var(--sp-vw-rem));
								top: calc(-4 * var(--sp-vw-rem));
								left: calc(-4.5 * var(--sp-vw-rem));
							}
							.recipeList__img {
								padding-inline: 0;
								margin: calc(7 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem)) 0;
							}
							.recipeList__bubble--bottom {
								width: calc(20 * var(--sp-vw-rem));
								height: calc(12 * var(--sp-vw-rem));
								bottom: calc(-3 * var(--sp-vw-rem));
								right: calc(-3.5 * var(--sp-vw-rem));
							}
						}
						.recipeList__step {
							width: calc(11.6 * var(--sp-vw-rem));
							height: calc(9.3 * var(--sp-vw-rem));
							left: calc(-3 * var(--sp-vw-rem));
							top: calc(-1.5 * var(--sp-vw-rem));
							max-width: 100%;
						}
						.recipeList__img {
							margin: calc(1.5 * var(--sp-vw-rem)) calc(1 * var(--sp-vw-rem)) 0;
						}	
						.recipeList__title {
							font-size: calc(2.032 * var(--sp-vw-rem));
							margin-top: calc(0.8 * var(--sp-vw-rem));
							min-height: calc(5.75 * var(--sp-vw-rem));
						}
						.recipeList__text {
							font-size: calc(1.645 * var(--sp-vw-rem));
							margin-top: calc(0.8 * var(--sp-vw-rem));
						}
						.recipeList__complete {
							margin-top: calc(0.5 * var(--sp-vw-rem));
							font-size: calc(2.032 * var(--sp-vw-rem));
							height: calc(6.5 * var(--sp-vw-rem));
							max-width: 100%;
							border: calc(0.156 * var(--sp-vw-rem)) solid var(--colorBlack);
						}
					}
				}
			}
		}
	}
}