@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
/* @import url(../libs/fontawesome/css/all.min.css); */
@import url(../libs/aos/aos.css);
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 how_to_enjoy
==============================*/

/* mvp ----------*/
#mvp { position: relative; width: 100%; padding: 0; max-height: 80rem; aspect-ratio: 192 / 80; background-image: url(../img/how_to_enjoy/mv.jpg); background-repeat: no-repeat; background-position: center; background-size: auto 100%; }
#mvp h2 { width: 100%; text-align: center; left: 0; padding: 0 18rem; position: absolute; top: 50%; transform: translateY(-50%); }
@media screen and (max-width:896px) { /* m */
	#mvp { background-image: url(../img/how_to_enjoy/mv_sp.jpg); max-height: 100vh; aspect-ratio: 100 / 150; }
	#mvp h2 { padding: 0 8rem; }
}
@media screen and (max-width:480px) { /* s */
	#mvp h2 { padding: 0 2rem; }
}

/* fee ----------*/
#fee {}
#fee h2 { margin-bottom: 6rem; text-align: center; line-height: 1.3; }
#fee h2 .w { position: relative; display: inline-block; padding-bottom: 1rem; border-bottom: solid 2px #333; }
#fee h2 .h { display: block; font-size: 4rem; }
#fee h2 .h .red { color: #C30D23; vertical-align: baseline; }
#fee h2 .h .l { font-size: 5rem; font-weight: 900; vertical-align: baseline; }
#fee h2 .h .ll { font-size: 6rem; font-weight: 900; vertical-align: baseline; }
@media screen and (max-width:480px) { /* s */
	#fee h2 .h { font-size: 7vw; }
	#fee h2 .h .l { font-size: 8vw; }
	#fee h2 .h .ll { font-size: 9vw; }
}


/* howToEnjoy ----------*/
#howToEnjoy { position: relative; z-index: 1; }
#howToEnjoy h2 { position: relative; z-index: 3; }
#howToEnjoy .how_to_enjoy_list { position: relative; z-index: 3; }
#howToEnjoy .how_to_enjoy_list > li { display: flex; flex-direction: column; padding: 3.2rem; margin-top: 6rem; gap: 3.2rem; align-items: center; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.95); }
#howToEnjoy .how_to_enjoy_list > li.extra_edition { padding: 6rem; border-radius: 1rem; background-color: rgba(230, 226, 221, 0.8); }
#howToEnjoy .how_to_enjoy_list > li .pw { width: 100%; text-align: center; }
#howToEnjoy .how_to_enjoy_list > li .pw img { border-radius: 1rem; }
#howToEnjoy .how_to_enjoy_list > li > .tw { width: 100%; max-width: 92rem; margin: auto; }
#howToEnjoy .how_to_enjoy_list > li > .tw .osusume { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; padding: 1rem; border: solid 1px #000; border-radius: 0.5rem; background-color: #FFF; font-size: 1.4rem; font-weight: bold; line-height: 1.2; }
#howToEnjoy .how_to_enjoy_list > li > .tw .osusume .material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; color: #999; }
#howToEnjoy .how_to_enjoy_list > li > .tw h3 { position: relative; margin-bottom: 1.6rem; font-size: 4rem; line-height: 1.4; text-align: center; }
#howToEnjoy .how_to_enjoy_list > li > .tw h3 .c { position: absolute; top: -4rem; left: -2rem; display: inline-block;  padding: 0.3rem 1.2rem 0.5rem; border-radius: 5rem; background-color: #333; color: #FFF; font-size: 1.4rem; font-weight: bold; line-height: 1.2; }
#howToEnjoy .how_to_enjoy_list > li > .tw h4 { text-align: center; margin-top: 6rem; display: flex; justify-content: center; align-items: center; gap: 2rem; }
#howToEnjoy .how_to_enjoy_list > li > .tw h4::before, #howToEnjoy .how_to_enjoy_list > li > .tw h4::after { flex: 1; content: ""; flex-shrink: 1; height: 0; border-top: solid 1px #000; }
#howToEnjoy .how_to_enjoy_list > li > .tw p { font-size: 1.8rem; line-height: 1.6; }
#howToEnjoy .fix_img { position: absolute; z-index: -1; max-width: 45.6rem; }
#howToEnjoy .fx01 { top: -10rem; right: 0; }
#howToEnjoy .fx02 { top: 25%; left: 0; }
#howToEnjoy .fx03 { bottom: 25%; right: 0; }
#howToEnjoy .fx04 { bottom: 0; left: 0; }
#howToEnjoy .pgw { margin-top: 3.2rem; overflow: hidden; border-radius: 1rem; }
#howToEnjoy .pgw2 { margin-top: 3.2rem; }
#howToEnjoy .pgw2 { margin-top: 3rem; }
#howToEnjoy .pgw2 .pw { display: block; }
#howToEnjoy .pgw2 .pw img { border-radius: 1rem; }
#howToEnjoy .pgw2 .tw { display: block; margin-top: 1rem; }
#howToEnjoy .pgw2 .tw h5 { text-align: center; font-size: 2rem; margin-top: 1rem; }
#howToEnjoy .pgw2 .tw h5 .cap { font-weight: normal; font-size: 1.6rem; }
#howToEnjoy .btw { margin-top: 6rem; text-align: center; }
@media screen and (max-width:1360px) {
	#howToEnjoy .fix_img { max-width: 33%; }
}
@media screen and (max-width:896px) { /* m */
	#howToEnjoy .how_to_enjoy_list > li { flex-direction: column; margin-top: 6rem; gap: 1rem; }
	#howToEnjoy .how_to_enjoy_list > li:nth-child(even) { flex-direction: column; }
	#howToEnjoy .how_to_enjoy_list > li .pw { width: 100%; }
	#howToEnjoy .how_to_enjoy_list > li > .tw { width: 100%; }
}
@media screen and (max-width:480px) { /* s */
	#howToEnjoy .how_to_enjoy_list > li { padding: 2.6rem; margin-top: 4rem; gap: 2.6rem; }
	#howToEnjoy .how_to_enjoy_list > li.extra_edition { padding: 2rem; }
	#howToEnjoy .how_to_enjoy_list > li > .tw { padding: 1.6rem; }
	#howToEnjoy .how_to_enjoy_list > li > .tw h3 { font-size: 2.4rem; }
	#howToEnjoy .how_to_enjoy_list > li > .tw h3 .c { top: -3rem; left: -3rem; }
	#howToEnjoy .pgw2 .tw h5 { font-size: 1.6rem; }
	#howToEnjoy .pgw2 .tw h5 .cap { font-size: 1.4rem; }
}

.parallax-up, .parallax-down { position: absolute; will-change: transform; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.parallax-up { animation-name: parallaxUp; }
.parallax-down { animation-name: parallaxDown; }
@keyframes parallaxUp {
  from { transform: translateY(150px); }
  to { transform: translateY(-150px); }
}
@keyframes parallaxDown {
  from { transform: translateY(-150px); }
  to { transform: translateY(150px); }
}
@media screen and (max-width:480px) { /* s */
	@keyframes parallaxUp {
		from { transform: translateY(50px); }
		to { transform: translateY(-50px); }
	}
	@keyframes parallaxDown {
		from { transform: translateY(-50px); }
		to { transform: translateY(50px); }
	}
}