@media all and (min-width: 751px) {
	.SP {
		display: none !important;
	}
}

@media screen and (max-width: 750px) {
	.PC {
		display: none !important;
	}
}

.mfp-wrap .close-modal-btn {
	display: none;
}

body {
	font-style: normal;
	font-weight: 400;
	font-optical-sizing: auto;
}

:where(img) {
	width: 100%;
	height: auto;
	vertical-align: top;
}

@keyframes fade-in {
	0% {
		visibility: visible;
		opacity: 0;
	}
	100% {
		visibility: visible;
		opacity: 1;
	}
}

@keyframes zoom-out {
	0% {
		transform: scale(var(--anim-zoom-from, 1.2));
	}
	100% {
		transform: scale(1);
	}
}

@keyframes slide-in-up {
	0% {
		transform: translateY(var(--anim-slide-y-from, 40px));
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes clip-left-to-right {
	0% {
		visibility: visible;
		clip-path: inset(0 100% 0 0);
	}
	100% {
		visibility: visible;
		clip-path: inset(0);
	}
}

@keyframes clip-top-to-bottom {
	0% {
		visibility: visible;
		clip-path: inset(0 0 100% 0);
	}
	100% {
		visibility: visible;
		clip-path: inset(0);
	}
}

.l-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
}

@media screen and (min-width: 751px) {
	.l-header {
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width: 750px) {
	.l-header {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		row-gap: 4.8vw;
	}
}

@media screen and (min-width: 751px) {
	.l-header__left {
		margin-top: 19px;
		margin-left: 20px;
	}
}

@media screen and (max-width: 750px) {
	.l-header__left {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		margin-top: 3.2vw;
		margin-left: 3.2vw;
	}
}

.l-header__logo-itoen {
	display: block;
}

@media screen and (min-width: 751px) {
	.l-header__logo-itoen {
		width: 174px;
	}
}

@media screen and (max-width: 750px) {
	.l-header__logo-itoen {
		width: 22.93333vw;
	}
}

@media screen and (min-width: 751px) {
	.l-header__header-logo {
		width: 334px;
		margin-top: 10px;
	}
}

@media screen and (max-width: 750px) {
	.l-header__header-logo {
		grid-row: 2 / 3;
		grid-column: 1 / 3;
		justify-self: center;
		width: 45.6vw;
	}
}

@media screen and (min-width: 751px) {
	.l-header__right {
		margin-top: 17px;
		margin-right: 23px;
	}
}

@media screen and (max-width: 750px) {
	.l-header__right {
		grid-row: 1 / 2;
		grid-column: 2 / 3;
		justify-self: end;
		margin-top: 2.93333vw;
		margin-right: 2.93333vw;
	}
}

.tpl-footer {
	color: #3b2d28;
	background-color: #fff9f0;
}

.tpl-footer :is(ul.footer-link li a, .copyright) {
	color: inherit;
}

.tpl-footer ul.footer-link li a::before {
	border-color: currentColor;
}

@media screen and (max-width: 750px) {
	.tpl-footer ul.footer-link li {
		border-color: #e0e0e0;
	}
}

.c-btn {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 700;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 133.33333%;
	color: #fff;
	text-decoration: none;
	background-color: #313131;
	border-radius: 9999px;
	transition: background-color 300ms ease-out;
}

@media screen and (min-width: 751px) {
	.c-btn {
		min-height: 72px;
		padding: 10px 60px 10px 40px;
		font-size: 16px;
	}
}

@media screen and (max-width: 750px) {
	.c-btn {
		gap: 2.66667vw;
		min-height: 61px;
		padding: 2.13333vw 13.33333vw 2.13333vw 10.66667vw;
		font-size: 3.73333vw;
	}
}

@media (hover: hover) and (pointer: fine) {
	.c-btn:hover {
		background-color: #646464;
	}
}

.c-btn__label {
	text-align: center;
}

@media screen and (min-width: 751px) {
	.c-btn__text--small {
		font-size: 15px;
	}
}

@media screen and (max-width: 750px) {
	.c-btn__text--small {
		font-size: 3.46667vw;
	}
}

@media screen and (min-width: 751px) {
	.c-btn__text--large {
		font-size: 18px;
	}
}

@media screen and (max-width: 750px) {
	.c-btn__text--large {
		font-size: 4vw;
	}
}

.c-btn__icon {
	position: absolute;
	display: block;
	margin: auto;
}

@media screen and (min-width: 751px) {
	.c-btn__icon {
		inset: 0 20px 0 auto;
		width: 31px;
		height: 31px;
	}
}

@media screen and (max-width: 750px) {
	.c-btn__icon {
		inset: 0 5.33333vw 0 auto;
		width: 6.93333vw;
		height: 6.93333vw;
	}
}

.c-icon-heart {
	width: var(--heart-size);
	height: var(--heart-size);
}

@media screen and (min-width: 751px) {
	.c-icon-heart {
		--heart-size: 28px;
	}
}

@media screen and (max-width: 750px) {
	.c-icon-heart {
		--heart-size: 5.6vw;
	}
}

.p-video-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: #eee;
}

.p-video-thumb > img {
	transition: opacity 300ms ease-out;
}

.p-video-thumb::before {
	content: none;
}

@media screen and (min-width: 751px) {
	.p-video-thumb {
		border-radius: 25px;
	}
}

@media screen and (max-width: 750px) {
	.p-video-thumb {
		border-radius: 2.66667vw;
	}
}

@media (hover: hover) and (pointer: fine) {
	.p-video-thumb:hover > img {
		opacity: 0.7;
	}
}

.p-video-thumb__play {
	position: absolute;
	inset: 0;
	display: block;
	aspect-ratio: 1;
	margin: auto;
	background-color: #fff;
	border-radius: 9999px;
	opacity: 0.8;
}

.p-video-thumb__play::before {
	position: absolute;
	inset: 0;
	width: 30%;
	aspect-ratio: 1;
	margin: auto;
	content: "";
	background-color: #c35b1c;
	clip-path: polygon(10% 0, 10% 100%, 100% 50%);
	translate: 10%;
}

@media screen and (min-width: 751px) {
	.p-video-thumb__play {
		width: 88px;
	}
}

@media screen and (max-width: 750px) {
	.p-video-thumb__play {
		width: 12vw;
	}
}

.p-mugicha-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 133.33333%;
	color: #fff;
	text-decoration: none;
	background-color: #ce924c;
	border-radius: 9999px;
	transition: background-color 300ms ease-out;
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 700;
}

@media screen and (min-width: 751px) {
	.p-mugicha-btn {
		width: 194px;
		height: 47px;
		padding-right: 11px;
		padding-left: 20px;
		font-size: 12px;
	}
}

@media screen and (max-width: 750px) {
	.p-mugicha-btn {
		width: 44.8vw;
		height: 10.13333vw;
		padding-right: 2.66667vw;
		padding-left: 3.73333vw;
		font-size: 2.93333vw;
	}
}

@media (hover: hover) and (pointer: fine) {
	.p-mugicha-btn:hover {
		background-color: #b57932;
	}
}

@media screen and (min-width: 751px) {
	.p-mugicha-btn__icon {
		width: 23px;
	}
}

@media screen and (max-width: 750px) {
	.p-mugicha-btn__icon {
		width: 5.33333vw;
	}
}

@keyframes hero-char {
	0% {
		transform: translateY(var(--anim-y-from, 0));
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	40% {
		transform: translateY(var(--anim-y-top, -20px));
		animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes hero-heart-enter {
	0% {
		visibility: visible;
		transform: scale(0);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	40% {
		visibility: visible;
		transform: scale(1.3);
		animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	}
	100% {
		visibility: visible;
		transform: translateY(0);
	}
}

.p-sec-hero {
	position: relative;
	overflow: hidden;
	background-color: #efe3ca;
}

.p-sec-hero.js-hero-anime :is(
.p-sec-hero__kv,
.p-hero-title__char,
.c-icon-heart
) {
	visibility: hidden;
}

.p-sec-hero.js-hero-anime.is-start .p-sec-hero__kv {
	--anim-slide-y-from: 20px;
	--anim-zoom-from: 1.05;
	animation: fade-in 600ms ease-out both, zoom-out 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__text {
	animation: fade-in 400ms ease-out both, slide-in-up 800ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
	animation-delay: 300ms;
}

@media screen and (min-width: 751px) {
	.p-sec-hero.js-hero-anime.is-start .p-hero-title__text {
		--anim-slide-y-from: 20px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-hero.js-hero-anime.is-start .p-hero-title__text {
		--anim-slide-y-from: 5.33333vw;
	}
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__char:nth-child(1), .p-sec-hero.js-hero-anime.is-start .p-hero-title__char:nth-child(2) {
	animation-delay: 200ms;
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__char:nth-child(3) {
	animation-delay: 600ms;
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__char:nth-child(4), .p-sec-hero.js-hero-anime.is-start .p-hero-title__char:nth-child(5) {
	animation-delay: 1000ms;
}

@media screen and (min-width: 751px) {
	.p-sec-hero.js-hero-anime.is-start .p-hero-title__char {
		--anim-y-from: 20px;
		--anim-y-top: -5px;
		animation: fade-in 400ms ease-out both,
 hero-char 800ms ease-out both;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-hero.js-hero-anime.is-start .p-hero-title__char {
		animation: fade-in 400ms ease-out both, slide-in-up 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
}

.p-sec-hero.js-hero-anime.is-start :is(
.p-hero-title__heart-01,
.p-hero-title__heart-02
) {
	animation: hero-heart-enter 800ms ease-out both;
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__heart-01 {
	animation-delay: 200ms;
}

.p-sec-hero.js-hero-anime.is-start .p-hero-title__heart-02 {
	animation-delay: 1000ms;
}

.p-sec-hero__kv {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.p-sec-hero__kv img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1599.9px) {
	.p-sec-hero__kv {
		aspect-ratio: 1200 / 564;
	}
}

@media screen and (min-width: 1600px) {
	.p-sec-hero__kv {
		height: 752px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-hero__kv {
		height: 127.46667vw;
	}
	.p-sec-hero__kv img {
		object-position: center bottom;
	}
}

.p-sec-hero__inner {
	position: absolute;
	inset: 0;
	margin: auto;
}

@media screen and (min-width: 751px) {
	.p-sec-hero__inner {
		max-width: 1600px;
	}
}

.p-hero-title {
	position: absolute;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

@media screen and (min-width: 751px) {
	.p-hero-title {
		top: 47.51773%;
		row-gap: 18px;
		width: 14.83333%;
	}
}

@media screen and (max-width: 750px) {
	.p-hero-title {
		bottom: 11.73333vw;
		row-gap: 8vw;
		width: 11.2vw;
	}
}

.p-hero-title__hearts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
}

@media screen and (min-width: 751px) {
	.p-hero-title__hearts {
		column-gap: 24.61538%;
		width: 36.51685%;
	}
}

@media screen and (max-width: 750px) {
	.p-hero-title__hearts {
		column-gap: 2.13333vw;
		justify-content: space-between;
	}
}

@media screen and (min-width: 751px) {
	.p-hero-title__heart {
		--heart-size: 100%;
	}
}

@media screen and (max-width: 750px) {
	.p-hero-title__heart {
		--heart-size: 4.53333vw;
	}
}

.p-hero-title__text {
	display: flex;
}

@media screen and (min-width: 751px) {
	.p-hero-title__text {
		width: 100%;
	}
}

@media screen and (max-width: 750px) {
	.p-hero-title__text {
		flex-direction: column;
		width: 6.93333vw;
	}
}

.p-hero-title__char {
	aspect-ratio: 1;
	overflow: hidden;
}

@media screen and (min-width: 751px) {
	.p-hero-title__char {
		width: 20%;
	}
	.p-hero-title__char img {
		width: 500%;
	}
	.p-hero-title__char:nth-child(2) img {
		margin-left: -100%;
	}
	.p-hero-title__char:nth-child(3) img {
		margin-left: -200%;
	}
	.p-hero-title__char:nth-child(4) img {
		margin-left: -300%;
	}
	.p-hero-title__char:nth-child(5) img {
		margin-left: -400%;
	}
}

@media screen and (max-width: 750px) {
	.p-hero-title__char {
		height: 7.46667vw;
	}
	.p-hero-title__char:nth-child(2) img {
		margin-top: -7.46667vw;
	}
	.p-hero-title__char:nth-child(3) img {
		margin-top: -14.93333vw;
	}
	.p-hero-title__char:nth-child(4) img {
		margin-top: -22.4vw;
	}
	.p-hero-title__char:nth-child(5) img {
		margin-top: -29.86667vw;
	}
}

.p-catch-copy {
	position: relative;
}

.p-catch-copy__copy {
	display: block;
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-catch-copy__copy {
		width: 797px;
	}
}

@media screen and (max-width: 750px) {
	.p-catch-copy__copy {
		width: 79.73333vw;
		translate: 1.5%;
	}
}

.p-scroll-sign {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-scroll-sign {
		gap: 5px;
		width: 48px;
		margin-top: 26px;
	}
}

@media screen and (max-width: 750px) {
	.p-scroll-sign {
		gap: 1.33333vw;
		width: 14.13333vw;
		margin-top: 8.53333vw;
	}
}

.p-scroll-sign__label {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 400;
	color: #3b2d28;
	text-align: center;
}

@media screen and (min-width: 751px) {
	.p-scroll-sign__label {
		font-size: 12px;
	}
}

@media screen and (max-width: 750px) {
	.p-scroll-sign__label {
		font-size: 3.2vw;
	}
}

@media screen and (min-width: 751px) {
	.p-scroll-sign__arrow {
		width: 12px;
	}
}

@media screen and (max-width: 750px) {
	.p-scroll-sign__arrow {
		width: 3.2vw;
	}
}

.p-kuromamemugicha-logo {
	margin-inline: auto;
	transform: translateZ(0);
}

@media screen and (min-width: 751px) {
	.p-kuromamemugicha-logo {
		width: 426px;
		margin-top: 8px;
	}
}

@media screen and (max-width: 750px) {
	.p-kuromamemugicha-logo {
		width: 45.86667vw;
		margin-top: 12.8vw;
	}
}

.p-kuromamemugicha-logo__image {
	display: block;
}

@media screen and (min-width: 751px) {
	.p-kuromamemugicha-logo__image {
		translate: -3.2%;
	}
}

.p-main-contents {
	position: relative;
	background-color: #f7ead4;
	clip-path: inset(0);
}

.js-hero-anime + .p-main-contents .p-catch-copy {
	visibility: hidden;
}

.js-hero-anime.is-start + .p-main-contents .p-catch-copy {
	animation: fade-in 400ms ease-out both, slide-in-up 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
	animation-delay: 1200ms;
}

@media screen and (min-width: 751px) {
	.js-hero-anime.is-start + .p-main-contents .p-catch-copy {
		--anim-slide-y-from: 20px;
	}
}

@media screen and (max-width: 750px) {
	.js-hero-anime.is-start + .p-main-contents .p-catch-copy {
		--anim-slide-y-from: 5.33333vw;
	}
}

.p-contents-container {
	position: relative;
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-contents-container {
		width: 594px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-container {
		width: 89.33333vw;
	}
}

.p-sticky-area {
	position: relative;
}

@keyframes heart-rise {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(var(--heart-rise-x-to, 0), var(--heart-rise-y-to, 0));
	}
}

@keyframes heart-sway {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--heart-sway-to, 100%));
	}
}

@keyframes heart-fade {
	0% {
		visibility: visible;
		opacity: 0;
	}
	20% {
		visibility: visible;
		opacity: 1;
	}
	60% {
		visibility: visible;
		opacity: 1;
	}
	90% {
		visibility: visible;
		opacity: 0;
	}
	100% {
		visibility: visible;
		opacity: 0;
	}
}

.p-sticky-bg {
	position: sticky;
	top: 0;
	width: 100%;
	background-repeat: no-repeat;
}

@media screen and (min-width: 751px) {
	.p-sticky-bg {
		height: 100vh;
		min-height: 450px;
		background-image: url("../img/bg.jpg");
		background-position: center calc(50% + 100px);
		background-size: 2641px auto;
	}
}

@media screen and (min-width: 751px) and (max-height: 400px) {
	.p-sticky-bg {
		background-position: center -380px;
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg {
		height: 100lvh;
		min-height: 120vw;
		background-image: url("../img/bg-sp.jpg");
		background-position: center bottom -120vw;
		background-size: 100% auto;
	}
}

@media screen and (max-width: 750px) and (orientation: landscape) {
	.p-sticky-bg {
		background-position: center top -144vw;
	}
}

.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart {
	opacity: 0;
}

@media screen and (min-width: 751px) {
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--01 {
		--heart-rise-x-to: 68px;
		--heart-rise-y-to: -160px;
		--heart-sway-to: 86%;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--01 .p-sticky-bg__heart-inner {
		animation-duration: 3800ms;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--02 {
		--heart-rise-x-to: -80px;
		--heart-rise-y-to: -95px;
		--heart-sway-to: 74%;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--02 .p-sticky-bg__heart-inner {
		animation-duration: 3200ms;
		animation-delay: 300ms;
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--01 {
		--heart-rise-x-to: 7.46667vw;
		--heart-rise-y-to: -14.4vw;
		--heart-sway-to: 86%;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--01 .p-sticky-bg__heart-inner {
		animation-duration: 2200ms;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--02 {
		--heart-rise-x-to: -11.46667vw;
		--heart-rise-y-to: -19.73333vw;
		--heart-sway-to: 74%;
	}
	.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart.p-sticky-bg__heart--02 .p-sticky-bg__heart-inner {
		animation-duration: 2400ms;
		animation-delay: 200ms;
	}
}

.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart-inner {
	animation: heart-rise linear both infinite,
 heart-fade linear both infinite;
	animation-play-state: paused;
}

.p-sticky-bg.js-sticky-bg-anime .p-sticky-bg__heart-inner > * {
	animation: heart-sway 800ms ease-in-out both infinite alternate;
	animation-play-state: paused;
}

.p-sticky-bg.js-sticky-bg-anime.is-outro .p-sticky-bg__heart {
	opacity: 1;
}

.p-sticky-bg.js-sticky-bg-anime.is-outro .p-sticky-bg__heart-inner {
	animation-play-state: running;
}

.p-sticky-bg.js-sticky-bg-anime.is-outro .p-sticky-bg__heart-inner > * {
	animation-play-state: running;
}

.p-sticky-bg__bg {
	position: absolute;
}

@media screen and (min-width: 751px) {
	.p-sticky-bg__bg {
		left: 50%;
		width: 2641px;
		translate: -50% 0;
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg__bg {
		width: 100%;
	}
}

.p-sticky-bg__bottle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	user-select: none;
}

.p-sticky-bg__bottle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 751px) {
	.p-sticky-bg__bottle {
		width: 376px;
		height: 100%;
		translate: -45% -50%;
	}
	.p-sticky-bg__bottle img {
		object-position: center 50.6%;
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg__bottle {
		top: unset;
		bottom: 19.73333vw;
		width: 44.53333vw;
		translate: -57.3% -5%;
	}
}

@media screen and (max-width: 750px) and (orientation: landscape), screen and (max-width: 750px) and (max-height: 400px) {
	.p-sticky-bg__bottle {
		top: 50%;
		bottom: unset;
		height: 100%;
		translate: -57.3% -64%;
	}
}

.p-sticky-bg__heart {
	position: absolute;
	transition: opacity 300ms ease-out;
}

@media screen and (min-width: 751px) {
	.p-sticky-bg__heart.p-sticky-bg__heart--01 {
		top: calc(50% - 72px);
		left: calc(50% + 192px);
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg__heart.p-sticky-bg__heart--01 {
		bottom: 101.33333vw;
		left: calc(50% + 21.86667vw);
	}
}

@media screen and (min-width: 751px) {
	.p-sticky-bg__heart.p-sticky-bg__heart--02 {
		top: calc(50% - 220px);
		left: calc(50% + -206px);
	}
}

@media screen and (max-width: 750px) {
	.p-sticky-bg__heart.p-sticky-bg__heart--02 {
		bottom: 114.66667vw;
		left: calc(50% - 22.4vw);
	}
}

.p-sticky-bg__heart-inner {
	position: relative;
	visibility: hidden;
}

.p-intro {
	position: relative;
	z-index: 1;
	padding-bottom: var(--gradiant-bottom);
	margin-bottom: calc(var(--gradiant-bottom) * -1);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--gradiant-bottom)), transparent 100%);
}

@media screen and (min-width: 751px) {
	.p-intro {
		--gradiant-bottom: 20px;
		padding-top: 28px;
		background: url("../img/bg.jpg") no-repeat center top/2641px auto;
	}
}

@media screen and (min-width: 751px) and (min-height: 680px) {
	.p-intro {
		margin-bottom: calc((100vh - 620px) / -2);
	}
}

@media screen and (max-width: 750px) {
	.p-intro {
		--gradiant-bottom: 2.66667vw;
		padding-top: 5.86667vw;
		background: url("../img/bg-sp.jpg") no-repeat center top/100% auto;
	}
}

@media screen and (max-width: 750px) and (orientation: landscape) {
	.p-intro {
		padding-bottom: 26.66667vw;
	}
}

@media screen and (max-width: 750px) and (orientation: portrait) and (max-height: 530px) {
	.p-intro {
		padding-bottom: 26.66667vw;
	}
}

@media screen and (max-width: 750px) and (orientation: portrait) and (min-height: 530px) {
	.p-intro {
		margin-bottom: calc((100lvh - 138.66667vw) * -1);
	}
}

.p-contents-box {
	background-color: rgba(255, 249, 240, 0.9);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@media screen and (min-width: 751px) {
	.p-contents-box {
		padding: 30px 30px 35px;
	}
	.p-contents-box + .p-contents-box {
		margin-top: 52px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box {
		padding: 6.66667vw 3.73333vw 8.53333vw;
	}
	.p-contents-box + .p-contents-box {
		margin-top: 120vw;
	}
}

.p-contents-box__heading {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 900;
	color: #3b2d28;
	text-align: center;
}

.p-contents-box__heading::before {
	display: block;
	width: 100%;
	content: "";
	border-color: #ce924c;
	border-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
}

@media screen and (min-width: 751px) {
	.p-contents-box__heading::before {
		height: 5px;
		margin-bottom: 12px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__heading::before {
		height: 1.33333vw;
		margin-bottom: 3.73333vw;
	}
}

@media screen and (min-width: 751px) {
	.p-contents-box__heading {
		font-size: 30px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__heading {
		font-size: 7.46667vw;
	}
}

.p-contents-box__hearts {
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 751px) {
	.p-contents-box__hearts {
		gap: 7px;
		margin-top: 5px;
	}
	.p-contents-box__hearts > img {
		width: 11px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__hearts {
		gap: 1.86667vw;
		margin-top: 1.33333vw;
	}
	.p-contents-box__hearts > img {
		width: 2.93333vw;
	}
}

.p-contents-box__lead {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 700;
	color: #3b2d28;
	text-align: center;
}

@media screen and (min-width: 751px) {
	.p-contents-box__lead {
		margin-top: 4px;
		font-size: 16px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__lead {
		margin-top: 1.06667vw;
		font-size: 4.26667vw;
	}
}

@media screen and (min-width: 751px) {
	.p-contents-box__body {
		margin-top: 33px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__body {
		margin-top: 6.13333vw;
	}
}

.p-contents-box__action {
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 751px) {
	.p-contents-box__action {
		gap: 20px;
		margin-top: 17px;
	}
	:where(.p-contents-box__action > .c-btn) {
		width: 293px;
	}
}

@media screen and (max-width: 750px) {
	.p-contents-box__action {
		gap: 5.33333vw;
		margin-top: 7.46667vw;
	}
	:where(.p-contents-box__action > .c-btn) {
		width: 66.13333vw;
	}
}

.p-features-list {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (min-width: 751px) {
	.p-features-list {
		row-gap: 12px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-list {
		row-gap: 1.86667vw;
	}
}

.p-features-item {
	position: relative;
	width: 100%;
	background-color: rgba(255, 249, 240, 0.9);
	border-radius: 9999px;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@media screen and (min-width: 751px) {
	.p-features-item {
		height: 174px;
		padding: 7px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item {
		height: 42.66667vw;
		padding: 1.33333vw;
	}
}

.p-features-item.p-features-item--01 .c-icon-heart {
	position: absolute;
}

@media screen and (min-width: 751px) {
	.p-features-item.p-features-item--01 .c-icon-heart {
		top: 38px;
		left: 4px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item.p-features-item--01 .c-icon-heart {
		top: 7.46667vw;
		left: 1.06667vw;
	}
}

.p-features-item.p-features-item--02 .c-icon-heart {
	position: absolute;
}

@media screen and (min-width: 751px) {
	.p-features-item.p-features-item--02 .c-icon-heart {
		right: 0;
		bottom: 43px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item.p-features-item--02 .c-icon-heart {
		right: 0;
		bottom: 12vw;
	}
}

.p-features-item__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	border-color: #ce924c;
	border-style: solid;
	border-radius: 9999px;
}

@media screen and (min-width: 751px) {
	.p-features-item__inner {
		row-gap: 18px;
		border-width: 1px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item__inner {
		row-gap: 1.33333vw;
		border-width: 0.26667vw;
	}
}

.p-features-item__heading {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 900;
	line-height: 1.4;
}

@media screen and (min-width: 751px) {
	.p-features-item__heading {
		font-size: 24px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item__heading {
		font-size: 5.33333vw;
	}
}

.p-features-item__text {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
}

@media screen and (min-width: 751px) {
	.p-features-item__text {
		font-size: 15px;
	}
}

@media screen and (max-width: 750px) {
	.p-features-item__text {
		font-size: 3.73333vw;
	}
}

@media screen and (min-width: 751px) {
	.p-sec-tvcm {
		padding-bottom: 60px;
		margin-top: 60px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tvcm {
		margin-top: 120vw;
	}
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok {
		padding-bottom: 45px;
	}
}

.p-sec-tiktok__heading {
	display: block;
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok__heading {
		width: 388px;
		margin-top: 23px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tiktok__heading {
		width: 71.46667vw;
	}
}

.p-sec-tiktok__badge {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 900;
	width: fit-content;
	padding: 0.1em 1em;
	margin-inline: auto;
	color: #fff;
	text-align: center;
	background-color: #e36617;
	border-radius: 9999px;
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok__badge {
		margin-top: 15px;
		font-size: 18px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tiktok__badge {
		margin-top: 4vw;
		font-size: 4vw;
	}
}

.p-sec-tiktok__image {
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok__image {
		width: 388px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tiktok__image {
		width: 75.73333vw;
	}
}

.p-sec-tiktok__term {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 900;
	color: #3b2d28;
	text-align: center;
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok__term {
		margin-top: 12px;
		font-size: 22px;
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tiktok__term {
		margin-top: 3.2vw;
		font-size: 4.8vw;
	}
}

@media screen and (min-width: 751px) {
	.p-sec-tiktok__button .c-btn__label {
		transform: translateY(-2px);
	}
}

@media screen and (max-width: 750px) {
	.p-sec-tiktok__button .c-btn__label {
		transform: translateY(-0.53333vw);
	}
}

.p-lineup {
	position: relative;
}

.p-lineup__list {
	display: grid;
	grid-template-rows: repeat(2, auto);
	justify-content: space-between;
	margin-inline: auto;
}

@media screen and (min-width: 751px) {
	.p-lineup__list {
		grid-template-columns: 33.125% 27.1875% 26.25%;
		gap: 5px 22px;
		width: 320px;
	}
}

@media screen and (max-width: 750px) {
	.p-lineup__list {
		grid-template-columns: 33.07692% 26.92308% 26.15385%;
		gap: 2.13333vw 4.8vw;
		width: 69.33333vw;
	}
}

.p-lineup__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-template-columns: 1fr;
	grid-row: 1 / span 2;
}

.p-lineup__image {
	margin-top: auto;
}

.p-lineup__label {
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 700;
	color: #3b2d28;
	text-align: center;
}

@media screen and (min-width: 751px) {
	.p-lineup__label {
		font-size: 14px;
	}
}

@media screen and (max-width: 750px) {
	.p-lineup__label {
		font-size: 3.73333vw;
	}
}

.p-lineup__text {
	color: #3b2d28;
	font-family: "Zen Old Mincho", serif;
	font-style: normal;
	font-weight: 400;
}

@media screen and (min-width: 751px) {
	.p-lineup__text {
		margin-top: 15px;
		font-size: 15px;
		line-height: 1.8;
		text-align: center;
	}
}

@media screen and (max-width: 750px) {
	.p-lineup__text {
		width: 74.66667vw;
		margin-inline: auto;
		margin-top: 6.4vw;
		font-size: 4vw;
		line-height: 1.6;
	}
}

.p-lineup__action {
	display: grid;
	grid-template-columns: 100%;
}

@media screen and (min-width: 751px) {
	.p-lineup__action {
		gap: 20px;
	}
}

@media screen and (max-width: 750px) {
	.p-lineup__action {
		gap: 5.33333vw;
	}
}

.p-outro {
	user-select: none;
}

@media screen and (min-width: 751px) {
	.p-outro {
		height: 100lvh;
	}
}

@media screen and (max-width: 750px) {
	.p-outro {
		height: 160vw;
	}
}

.p-page-top {
	position: relative;
	height: 0;
}

.p-page-top__button {
	position: absolute;
	display: block;
	overflow: hidden;
	appearance: none;
	cursor: pointer;
	background-color: #ce924c;
	border: none;
	border-radius: 9999px;
	transition: background-color 300ms ease-out;
}

.p-page-top__button::before {
	position: absolute;
	inset: 0;
	display: block;
	width: 44%;
	aspect-ratio: 1;
	margin: auto;
	content: "";
	background-color: #fff9f0;
	mask: url("../img/icon-arrow-top.svg") no-repeat center center/contain;
}

@media screen and (min-width: 751px) {
	.p-page-top__button {
		right: 40px;
		bottom: 38px;
		width: 82px;
		height: 82px;
	}
}

@media screen and (max-width: 750px) {
	.p-page-top__button {
		right: 6.66667vw;
		bottom: 6.13333vw;
		width: 15.46667vw;
		height: 15.46667vw;
	}
}

@media (hover: hover) and (pointer: fine) {
	.p-page-top__button:hover {
		background-color: #b57932;
	}
}

/*# sourceMappingURL=style.css.map */