@charset "utf-8";

/* ------------------------------------------------------------ sv */
#sv{ padding: 170px 0 230px; background: url(../images/metaverse/sv.png) calc(50% + 450px) center/1000px no-repeat; }
#sv .title{ width: 50%; }
#sv .title__sub{ font-size: 34px; font-family: 'Noto-Sans-JP-Medium'; }
.sv__desc{ padding: 40px 0 0; line-height: 2; }


/* ------------------------------------------------------------ merit */
#merit .title{ padding: 0 0 45px; }
#merit .title.avater:before{ width: 109px; height: 137px; bottom: 30px; left: 19%; background-image: url(../images/avater/squirrel-04.png); }

.feature-cards{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 52px 20px; }
.feature-card{ position: relative; width: calc(100% / 2 - 10px); background: #F5F5F5; border-radius: 0 0 10px 10px; }
.feature-card__no{ position: absolute; top: -30px; left: 20px; font-size: 61px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; color: var(--main-color); line-height: 1; z-index: 2; }

.feature-card__media{ width: 100%; border-radius: 10px 10px 0 0; overflow: hidden; border-radius: 10px 10px 0 0; }
.feature-card__media img{ width: 100%; height: auto; }
.feature-card__body{ text-align: center; padding: 20px 20px 30px; }
.feature-card__title{ font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; margin-bottom: 20px; }
.feature-card__text{ line-height: 1.8; }


/* ------------------------------------------------------------ space */
#space{ padding: 100px 0 0; }
#space .title{ padding: 0 0 40px; }
#space .title.avater:before{ width: 90px; height: 127px; bottom: 80px; right: 3%; background-image: url(../images/avater/cat-01.png); }

.space-sample{ margin: 0 auto 47px; padding: 70px 50px 80px; border-radius: 10px; background: #fff; filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2)); }
.space-sample__head{ display: flex; align-items: center; gap: 32px; margin-bottom: 86px; }
.space-sample__content{ width: 50%; }
.space-sample__label{ display: inline-block; background: var(--main-color); color: #fff; font-family: 'Noto-Sans-JP-Medium'; font-size: 17px; min-width: 115px; padding: 10px; margin-bottom: 15px; }
.space-sample__title{ font-size: 44px; font-family: 'Noto-Sans-JP-Bold'; margin: 0 0 44px; }
.space-sample__text{ font-size: 18px; line-height: 2; }
.space-sample__image{ width: 50%; }
.space-sample__image img{ display: block; width: 100%; height: auto; }

.space-sample__body{ margin: 0 0 60px; }
.space-sample__heading{ font-size: 22px; font-family: 'Noto-Sans-JP-Medium'; margin: 0 0 26px; }
.space-sample__list{ display: flex; align-items: stretch; justify-content: space-between; gap: 25px; }
.space-sample__item{ width: calc(100% / 3); }
.space-sample__media{ width: 100%; margin: 0 0 10px; }
.space-sample__media img{ width: 100%; height: auto; }
.space-sample__caption{ font-size: 15px; line-height: 1.5; text-align: center; }

.space-sample__price{ display: flex; flex-direction: column; gap: 7px; }
.space-bnr{ width: 900px; margin: 0 auto; padding: 0 0 50px; }
.space-bnr img{ width: 100%; height: auto; }

.space-price{ width: 520px; margin: 0 auto 60px; background: #F8F8F2; padding: 20px; text-align: center; }
.space-price__ribbon{ display: inline-block; position: relative; background: #e60012; color: #fff; width: 80%; font-family: 'Noto-Sans-JP-Bold'; font-size: 18px; padding: 12px; margin: 0 auto 24px; line-height: 1.2; }
.space-price__ribbon::before, .space-price__ribbon::after{ content: ""; position: absolute; top: 0; width: 20px; height: 100%; z-index: 1; background: #F8F8F2; }
.space-price__ribbon::before{ left: 0; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.space-price__ribbon::after{ right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.space-price__main{ margin: 0 0 16px; display: inline-flex; align-items: baseline; justify-content: center; gap: 26px; flex-wrap: wrap; }
.space-price__main small{ font-size: 14px; }
.space-price__label{ font-size: 26px; font-family: 'Noto-Sans-JP-Medium'; }
.space-price__amount, .space-price__count, .space-price__num{ font-size: 28px; font-family: 'Noto-Sans-JP-Bold'; }
.space-price__big{ font-size: 48px; }
.space-price__main--center{ flex-direction: row; }
.space-price__note{ font-size: 13px; }

.space-sample__cta{ position: relative; }
.space-sample__cta:before,
.space-sample__cta:after{ position: absolute; content: ""; z-index: 2; }
.space-sample__cta:before{ top: -5px; left: 50px; width: 108px; height: 135px; background: url(../images/avater/squirrel-04.png) center/cover no-repeat; }
.space-sample__cta:after{ top: -6px; right: 58px; width: 83px; height: 144px; background: url(../images/avater/sheep-06.png) center/cover no-repeat; }


/* ------------------------------------------------------------ voice */
#voice{ padding: 88px 0 0; }
#voice .title{ padding: 0 0 50px; }

.voice-list{ display: flex; align-items: stretch; gap: 40px; }
.voice-card{ width: calc(100% / 3); padding: 50px 30px 30px; background: #F1F1ED; border-radius: 10px; text-align: center; }

.voice-card__text{ padding: 35px 0 0; }
.voice-card__desc{ padding: 0 0 10px; font-size: 19px; line-height: 1.5; }
.voice-card__name{ font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; }


/* ------------------------------------------------------------ howto */
#howto{ padding: 108px 0 0; }
#howto .title{ padding: 0 0 80px; }

.howto-list{ display: flex; align-items: stretch; gap: 38px; }
.howto-card{ position: relative; width: calc(100% / 3); text-align: center; }
.hwoto-card__budge{ position: absolute; left: -18px; top: -28px; width: 65px; height: 65px; border-radius: 50%; background: var(--main-color); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.hwoto-card__step{ font-size: 10px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 400; font-style: normal; margin-bottom: 6px; }
.hwoto-card__num{ font-size: 25px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 400; font-style: normal; }
.howto-card__media{ width: 100%; margin: 0 0 20px; }
.howto-card__media img{ width: 100%; height: auto; }
.howto-card__title{ font-size: 20px; font-weight: 900; letter-spacing: 0.02em; margin: 0 0 10px; font-family: 'Noto-Sans-JP-Bold'; }
.howto-card__desc{ line-height: 2; }


/* ------------------------------------------------------------ guide */
#guide{ padding: 132px 0 0; }
#guide .title{ padding: 0 0 58px; }
.hguide-notes{ margin: 25px 0 0; }
.hguide-notes li{ padding: 0 0 10px; font-size: 12px; line-height: 1.5; }




/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ sv */
	#sv{ padding: 20px 0 0; background: none; }
	#sv .title{ width: 100%; }
	#sv .title__sub{ font-size: 24px; }
	.sv__desc{ padding: 20px 0 0; }
	


/* ------------------------------------------------------------ merit */
	#merit{ padding: 50px 0 0; }
	#merit .title{ padding: 0 0 46px; }	
	#merit .title.avater::before { width: 72px; height: 73px; left: initial; right: -5%; bottom: 0; background-image: url(../images/avater/squirrel-05.png); }
	
	.feature-cards{ flex-direction: column; gap: 40px; }
	.feature-card{ width: 100%; border-radius: 8px; }
	.feature-card__no{ top: -20px; left: 16px; font-size: 42px; }
	
	.feature-card__body{ padding: 20px 10px 25px; }
	.feature-card__title{ font-size: 18px; margin-bottom: 14px; }
	.feature-card__text{ font-size: 14px; line-height: 1.9; }
	

/* ------------------------------------------------------------ space */
	#space{ overflow: hidden; padding: 60px 0 0; }
	#space .title{ padding: 0 0 30px; }	
	#space .title.avater::before { width: 70px; height: 99px; bottom: 0; right: -2%; }
	
	.space-sample{ margin: 0 auto 30px; padding: 30px 5%; }
	.space-sample__head{ flex-direction: column; gap: 23px; margin-bottom: 40px; }
	.space-sample__content, .space-sample__image{ width: 100%; }
	.space-sample__label{ font-size: 12px; min-width: auto; padding: 8px 15px; margin-bottom: 12px; }
	.space-sample__title{ font-size: 24px; margin: 0 0 15px; }
	.space-sample__text{ font-size: 14px; line-height: 1.9; }
	
	.space-sample__body{ margin-bottom: 30px; }
	.space-sample__heading{ font-size: 18px; margin-bottom: 18px; text-align: center; }
	.space-sample__list{ flex-direction: column; gap: 20px; }
	.space-sample__item{ width: 100%; display: flex; align-items: center; gap: 10px; }
    .space-sample__media{ width: 40%; margin: 0; }
	.space-sample__caption{ width: 60%; text-align: left; font-size: 14px; line-height: 1.7; }
	
	.space-sample__price{ width: 100%; margin: 0 auto 40px; gap: 12px; }
	.space-bnr{ width: 100%; padding: 0 0 20px; }
	
	.space-price{ width: 100%; margin: 0 auto 30px; padding: 24px 5%; }
	.space-price__ribbon{ width: 100%; font-size: 16px; padding: 10px; margin-bottom: 18px; }
	.space-price__ribbon::before, .space-price__ribbon::after{ width: 14px; }
	.space-price__main{ gap: 14px; margin-bottom: 10px; }
	.space-price__main small{ font-size: 11px; }
	.space-price__label{ font-size: 15px; }
	.space-price__amount, .space-price__count{ font-size: 20px; }
	.space-price__num{ font-size: 36px; }
	.space-price__big{ font-size: 42px; }
	.space-price__main--center{ gap: 6px; }
	.space-price__note{ font-size: 12px; line-height: 1.6; }
	
	.space-sample__cta:before{ width: 90px; height: 110px; top: -20px; left: -5px; }
	.space-sample__cta:after{ width: 75px; height: 120px; top: -25px; right: -5px; }

	.space-sample__cta .cta__wrapper{ width: 100%; }
	.space-sample__cta::after{ width: 58px; height: 95px; top: -29px; right: -16px; }
	.space-sample__cta::before{ width: 70px; height: 88px; top: -26px; left: -24px; }


/* ------------------------------------------------------------ voice */
	#voice{ padding: 60px 0 0; }
	#voice .title{ padding: 0 0 30px; }	
	
	.voice-list{ flex-direction: column; gap: 10px; }
	.voice-card{ padding: 20px; display: flex; align-items: center; gap: 20px; width: 100%; border-radius: 8px; }
	.voice-card__item{ width: 80px; height: auto; }
	.voice-card__text{ padding-top: 0; width: calc(100% - 80px); text-align: left; }
	.voice-card__desc{ font-size: 15px; line-height: 1.8; padding-bottom: 8px; }
	.voice-card__name{ font-size: 14px; }


/* ------------------------------------------------------------ howto */
	#howto{ padding: 70px 0 0; }
	#howto .title{ padding: 0 0 36px; }
	
	.howto-list{ flex-direction: column; gap: 36px; }
	.howto-card{ width: 100%; }
	.hwoto-card__budge{ left: 10px; top: -18px; width: 58px; height: 58px; }
	.hwoto-card__step{ font-size: 10px; margin-bottom: 4px; }
	.hwoto-card__num{ font-size: 22px; }
	.howto-card__media{ margin-bottom: 16px; }
	.howto-card__title{ font-size: 18px; margin-bottom: 8px; }
	.howto-card__desc{ font-size: 14px; line-height: 1.9; }


/* ------------------------------------------------------------ guide */
	#guide{ padding: 60px 0 0; }
	#guide .title{ padding: 0 0 30px; }	




}