@charset "utf-8";


#flowSvg{ position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; overflow: visible; display: block; }
#flowPath{ fill: none; stroke: #DF131F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flowline-svg{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
.flowline-bird, .flowline-ribbon{ position: absolute; width: 60px; height: auto; pointer-events: none; z-index: 6; transform: translate(-50%, -50%); }

.item-bird{ width: 160px; position: absolute; left: 30vw; bottom: 110px; }
.item-ribbon{ position: absolute; right: 7%; width: 110px; z-index: 11; pointer-events: none; }
@media only screen and (max-width: 1400px) {
	.item-ribbon{ right: 90px; }
}

/* ------------------------------------------------------------ fv */
#fv{ overflow: hidden; position: relative; z-index: 10; }
.kv{ width: 100%; }
.kv img{ width: 100%; height: auto; }
.fv__wrapper{ position: absolute; top: 50%; left: 3%; transform: translate(0,-50%); }
.fv__text{ position: relative; position: relative; margin: 0 0 30px; padding: 0 0 40px; font-size: 26px; font-family: 'Noto-Sans-JP-Medium'; color: var(--main-color); }
.fv__text:before{ position: absolute; content: ""; width: 85px; height: 1px; background: var(--main-color); left: 0; bottom: 0; }
.fv__title{ font-size: clamp(60px,4.5vw,73px); font-family: 'Noto-Sans-JP-Bold'; line-height: 1.3; }

.text-animation{ z-index: -1; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); font-size: 128px; display: flex; align-items: center; gap: 10px; }
.css-roop{ animation: roop 13s linear infinite; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 700; font-style: normal; color: #fff; -webkit-text-stroke: 1px var(--main-color); text-stroke: 1px var(--main-color); white-space: nowrap; }
@keyframes roop {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(0);
  }
}


/* ------------------------------------------------------------ about */
#about{ position: relative; z-index: 10; padding: 200px 0; background: url(../images/index/pic_about.png) calc(50% + 340px) bottom/955px no-repeat; }
#about:before{ z-index: -1; position: absolute; content: ""; width: 670px; height: 501px; bottom: 50px; left: -7%; background: url(../images/common/img_pref.svg) center/cover no-repeat; }
#about .title__en{ margin: 0 0 55px; }
#about .title__ja{ padding: 0 0 55px; }

.about__wrapper{ display: flex; align-items: center; justify-content: space-between; }
.about__text{ width: 485px; }


/* ------------------------------------------------------------ strength */
#strength{ overflow: hidden; position: relative; z-index: 10; padding: 50px 0 150px; }
#strength .title{ padding: 0 0 85px; }

.strength-list__item01.avater:before{ width: 118px; height: 190px; bottom: 53px; left: calc(50% - 78px); background-image: url(../images/avater/wolf-05.png); }
.strength-list__item03.avater:before{ width: 114px; height: 195px; bottom: 64px; left: calc(50% + 601px); background-image: url(../images/avater/sheep-04.png); }

.strength-list{ max-width: 1500px; margin: 0 auto; }
.strength-list__item{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 115px; }
.strength-list__item:last-of-type{ padding: 0; }

.strength-list__text{ width: 50%; padding: 3% 9% 3% 3%; }
.strength-list__num{ padding: 0 0 10px; font-size: 87px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; color: var(--main-color); }
.strength-list__title{ padding: 0 0 35px; font-size: 38px; line-height: 1.5; font-family: 'Noto-Sans-JP-Bold'; }
.strength-list__desc{ font-size: 16px; line-height: 2; }

.strength-list__pic{ width: 50%; }
.strength-list__pic .pic{ width: 100%; }

.strength-list__item:nth-of-type(even){ flex-direction: row-reverse; }
.strength-list__item:nth-of-type(even) .strength-list__text{ padding-left: 5%; }


/* ------------------------------------------------------------ metaverse */
#metaverse{ padding: 72px 0 110px; background: var(--main-color); }
#metaverse .title{ position: relative; z-index: 10; padding: 0 0 40px; }

#metaverse .title.avater:before{ width: 90px; height: 155px; bottom: 60px; left: 30px; background-image: url(../images/avater/sheep-01.png); }
#metaverse .title.avater:after{ width: 102px; height: 146px; bottom: 55px; right: 30px; background-image: url(../images/avater/cat-01.png); }


.service-cards{ display: flex; align-items: stretch; gap: 30px; }
.service-cards__item{ width: calc(100% / 2 - 15px); background: #fff; border-radius: 17px; }
.service-card{ position: relative; }

.service-card__head{ position: relative; padding: 30px 10px; text-align: center; }
.service-card__title{ font-family: 'Noto-Sans-JP-Bold'; font-size: 21px; }
.service-card__badge{ z-index: 1; position: absolute; right: 18px; top: 18px; width: 104px; height: 104px; border-radius: 100px; background: #FFEB00; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1.5; }
.service-card__media{ position: relative; height: 330px; }
.service-card__media img{ width: 100%; height: 330px; object-fit: cover; }

.service-card__circle{ position: absolute; right: 20px; bottom: -38px; width: 160px; height: 160px; border-radius: 100px; }
.service-card__circle img{ width:100%; height:100%; }

.service-card__body{ position: relative; z-index: 10; padding: 60px 10px; text-align: center; }
.service-card__catch{ margin: 0 0 20px; font-size: 32px; font-family: 'Noto-Sans-JP-Bold'; }
.service-card__text{ height: 80px; margin: 0 0 25px; line-height: 1.7; }
.service-card__btn{ margin: 0 auto; width: 380px; }
.service-card__btn.btn--arrow::after{ right: 10px; }


/* ------------------------------------------------------------ price */
#price{ position: relative; z-index: 10; padding: 130px 0 220px; }
#price .title{ padding: 0 0 33px; }


/* ------------------------------------------------------------ event */
#event{ position: relative; z-index: 10; padding: 73px 0 130px; background: var(--main-color); }
#event .title{ padding: 0 0 77px; }

#event .title.avater:before{ width: 113px; height: 170px; bottom: 30px; left: calc(50% - 420px); background-image: url(../images/avater/wolf-05.png); }
#event .title.avater:after{ width: 113px; height: 164px; bottom: 30px; right: 140px; background-image: url(../images/avater/cat-02.png); }

.column{ display: flex; align-items: stretch; gap: 60px; padding: 0 0 55px; }
.column__item{ width: calc(100% / 3 - 30px); }
.column__link{ display:block; width: 100%; }
.column__image{ position: relative; }
.column__image img{ width: 100%; height: auto; }

.column__label{ width: 92px; position:absolute; left: 0; bottom: 0; text-align: center; background: #fff; color: #104698; font-family: 'Noto-Sans-JP-Bold'; font-size: 14px; padding: 10px; }
.column__body{ padding: 16px 0 0; color: #fff; }
.column__date{ margin: 0 0 15px; font-size: 12px; font-family: 'Noto-Sans-JP-Bold'; }
.column__title{ margin: 0 0 14px; font-size: 23px; font-family: 'Noto-Sans-JP-Bold'; }
.column__text{ font-size: 15px; line-height: 1.5; margin: 0 0 15px; }

.column__body .view-more .arrow{ border-color: #fff; }
.column__btn{ margin: 0 0 100px; }
.column__btn .btn--white{ border: none; }


/* ------------------------------------------------------------ movie */
#movie{ position: relative; z-index: 10; padding: 130px 0 170px; }
#movie .title{ padding: 0 0 60px; }

.movies{ display: flex; align-items: stretch; gap: 68px; }
.movies__item{ width: calc(100% / 2 - 34px); text-align: center; }
.movies__thumb{ width: 100%; position: relative; margin-bottom: 45px; }
.movies__thumb.pic-stripe::before{ right: -15px; bottom: -15px; }
.movies__title{ margin: 0 0 26px; font-size: 29px; font-family: "Hiragino Sans", sans-serif; font-weight: 800; line-height: 1.5; }
.movies__text{ line-height: 2; font-size: 18px; }


/* ------------------------------------------------------------ faq */
#faq{ padding: 100px 0 115px; background: var(--gray); }
#faq .title{ padding: 0 0 45px; }
#faq .btn-box{ position: relative; z-index: 10; }

#faq .title.avater:before{ width: 102px; height: 149px; bottom: 60px; left: calc(50% - 350px); background-image: url(../images/avater/cat-03.png); }
#faq .title.avater:after{ width: 127px; height: 162px; bottom: 60px; right: 190px; background-image: url(../images/avater/squirrel-05.png); }


.faq-list{ position: relative; z-index: 10; padding: 0 0 65px; }
.faq-list__item{ cursor: pointer; background: #fff; border-radius: 18px; padding: 40px; margin-bottom: 28px; }

.faq-list__item dt,
.faq-list__item dd{ display: flex; align-items: flex-start; gap: 18px; position: relative; }
.faq-list__label{ font-size: 30px; font-family: 'din1451alt'; }
.faq-list__label--a{ color: var(--main-color); }
.faq-list__q-text{ font-size: 22px; font-family: 'Noto-Sans-JP-Bold'; line-height: 1.5; }

.faq-list__q::after,
.faq-list__q::before{ transition: all .5s; content:""; position:absolute; top: 50%; right: 0; transform: translateY(-50%); width: 39px; height: 2px; background:#d8322a; }
.faq-list__q::before{ transform: translateY(-50%) rotate(90deg); }
.faq-list__a{ display: none; margin: 32px 0 0; }
.faq-list__a-text{ width: 90%; line-height: 1.7; }

.faq-list__item.is-active .faq-list__q::before{ transform: translateY(-50%) rotate(0); }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	#flowSvg{ display: none !important; }
	.item-ribbon{ width: 85px; }
	

/* ------------------------------------------------------------ fv */
	#fv{ padding: 0 0 80px; }
	.fv__wrapper{ position: initial; transform: none; width: 85%; margin: -30px auto 0; }
	.fv__text{ margin: 0 0 15px; padding: 0 0 20px; font-size: 13px; }
	.fv__title{ font-size: 32px; }
	
	.item-bird{ width: 54px; left: initial; right: 4%; bottom: 50px; }
	.text-animation{ font-size: 60px; }


/* ------------------------------------------------------------ about */
	#about{ padding: 50px 0 0; background: none; }
	#about::before{ width: 97%; height: 250px; top: 55%; }
	#about .title__en{ margin: 0 0 15px; }
	#about .title__ja{ padding: 0 0 12px; }
	
	.about__wrapper{ flex-direction: column; }
	.about__text{ width: 100%; padding: 0; }


/* ------------------------------------------------------------ strength */
	#strength{ padding: 50px 0; }
	#strength .title{ padding: 0 0 35px; }

	.strength-list__item01.avater::before { width: 67px; height: 102px; bottom: 43%; left: initial; right: -3px; background-image: url(../images/avater/wolf-06.png); }
	.strength-list__item03.avater::before { width: 61px; height: 105px; bottom: 44%; left: initial; right: -3px; }
	
	.strength-list{ max-width: 90%; }
	.strength-list__item{ padding: 0 0 50px; flex-direction: column-reverse; gap: 20px; }
	.strength-list__text{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; width: 100%; padding: 0; }
	.strength-list__num{ padding: 0; font-size: 47px; }
	.strength-list__title{ padding: 0; font-size: 21px; }
	.strength-list__desc{ font-size: 14px; }
	.strength-list__pic{ width: 100%; }
	
	.strength-list__item:nth-of-type(2n){ flex-direction: column-reverse; }
	.strength-list__item:nth-of-type(2n) .strength-list__text{ padding: 0; }


/* ------------------------------------------------------------ metaverse */
	#metaverse{ overflow: hidden; padding: 50px 0; }
	#metaverse .title{ padding: 0 0 30px; }
	
	#metaverse .title.avater::before { width: 45px; height: 76px; left: -2%; top: 5%; }
	#metaverse .title.avater::after { width: 47px; height: 68px; right: -2%; top: 5%; }

	.service-cards{ gap: 20px; flex-direction: column; }
	.service-cards__item{ width: 100%; border-radius: 10px; }
	.service-card__head{ padding: 20px 10px; }
	.service-card__title{ font-size: 17px; }
	.service-card__badge{ right: 6px; top: 7px; width: 70px; height: 70px; font-size: 12px; line-height: 1.3; }
	.service-card__media{ height: 200px; }
	.service-card__media img{ height: 200px; }
	
	.service-card__circle{ right: 10px; bottom: -28px; width: 110px; height: 110px; }
	.service-card__circle img{ height: auto; }
	
	.service-card__body{ padding: 30px 5%; }
	.service-card__catch{ margin: 0 0 10px; font-size: 23px; }
	.service-card__text{ height: auto; margin: 0 0 20px; }
	
	.service-card__btn{ width: 100%; }
	

/* ------------------------------------------------------------ price */
	#price{ padding: 50px 0; }
	#price .title{ padding: 0 0 25px; }


/* ------------------------------------------------------------ event */
	#event{ overflow: hidden; padding: 55px 0; }
	#event .title{ padding: 0 0 30px; }

	#event .title.avater::before { width: 56px; height: 89px; left: 5%; top: 10%; }
	#event .title.avater::after { width: 51px; height: 73px; right: 8%; top: 15%; }
	
	.column{ flex-direction: column; gap: 30px; padding: 0 0 40px; }
	.column__item{ width: 100%; }
	.column__label{ width: 80px; font-size: 11px; padding: 5 10px; }
	.column__body{ padding: 14px 0 0; }
	.column__date{ margin: 0 0 10px; font-size: 12px; }
	.column__title{ margin: 0 0 10px; font-size: 18px; }
	.column__text{ font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
	
	.column__btn{ margin: 0 0 60px; }
	.column__btn .btn{}


/* ------------------------------------------------------------ movie */
	#movie{ padding: 50px 0; }
	#movie .title{ padding: 0 0 35px; }
	
	.movies{ flex-direction: column; gap: 30px; }
	.movies__item,
	.movies__thumb{ width: 100%; }
	.movies__item{ width: 100%; }
	.movies__thumb{ margin-bottom: 22px; }
	.movies__thumb.pic-stripe::before{ right: -8px; bottom: -8px; }
	
	.movies__title{ font-size: 20px; margin: 0 0 5px; }
	.movies__text{ font-size: 14px; line-height: 1.8; text-align: left; }
		

/* ------------------------------------------------------------ faq */
	#faq{ overflow: hidden; padding: 50px 0; }
	#faq .title{ padding: 0 0 28px; }

	#faq .title.avater::before { width: 56px; height: 80px; left: 2%; top: -3%; }
	#faq .title.avater::after { width: 68px; height: 86px; right: 0%; top: -6%; }
	
	.faq-list{ padding: 0 0 40px; }
	.faq-list__item{ border-radius: 10px; padding: 20px 10px; margin-bottom: 10px; }
	.faq-list__item dt,
	.faq-list__item dd{ gap: 12px; }
	
	.faq-list__label{ width: 15px; font-size: 22px; }
	.faq-list__q-text{ font-size: 15px; width: calc(100% - 50px); }
	.faq-list__q::after,
	.faq-list__q::before{ width: 20px; right: 0; }
	.faq-list__a{ margin: 16px 0 0; }	
	.faq-list__a-text{ width: 100%; font-size: 13px; }
	

}