@charset "utf-8";

body {background: #000;}
.catalog {background: #fff;}

/* Catalog intro */
#first_cover .page__contents {display: flex; align-items: center; justify-content: center; padding: 0;}
#first_cover .logo .inner{width: 306px; height: 314px; position: relative;}
#first_cover .logo img {position: absolute;}
#first_cover .logo__leaf1 {top: 0; left: 49%; width:10%;}
#first_cover .logo__leaf2 {top: 6.5%; right: 24.8%; width: 15%;}
#first_cover .logo__head {top: 12.4%; left: 34.3%; width: 8.16%; transform-origin: bottom;}
#first_cover .logo__arm {top: 2.28%; left: 24.8%; width: 34.6%; transform-origin: 29px 116px;}
#first_cover .logo__leg {top: 40.5%; left: 33.3%; width: 39.8%; transform-origin: 0px 0px;}
#first_cover .logo__typo {bottom: 8.16%; left: 0; width: 100%;}
#first_cover .logo__desc {bottom: 0; left: 0; width: 100%;}

#first_cover .logo {transition: .7s; transition-timing-function: var(--cubic-pop1);}
#first_cover .logo img {transform: scale(0); transition-duration: .5s; transition-timing-function: var(--cubic-pop2);}
#first_cover .logo img.logo__typo {transform: translate(30%); opacity: 0;}
#first_cover .logo img.logo__desc {transform: translate(-30%); opacity: 0;}
.catalog__page:not(.catalog__page--active) #first_cover .logo img {transition-delay: .7s; transition-duration: 0s;}
.catalog__page--active #first_cover.anime--active .logo__head {transform: scale(1); transition-delay: .5s;}
.catalog__page--active #first_cover.anime--active .logo__arm {transform: scale(1); transition-delay: .4s;}
.catalog__page--active #first_cover.anime--active .logo__leg {transform: scale(1); transition-delay: .3s;}
.catalog__page--active #first_cover.anime--active .logo__leaf1 {transform: scale(1); transition-delay: 1s;}
.catalog__page--active #first_cover.anime--active .logo__leaf2 {transform: scale(1); transition-delay: 1.1s;}
.catalog__page--active #first_cover.anime--active .logo__typo {transform: translate(0); opacity: 1; transition-delay: 1.7s;}
.catalog__page--active #first_cover.anime--active .logo__desc {transform: translate(0); opacity: 1; transition-delay: 1.7s;}

.ct_intro {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;}
.catalog__wrapper {z-index: 1;}
.ct_intro__elem_container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.ct_intro__elem {position: absolute;}
.ct_intro__elem--main {width: 1500px; height: 1500px; bottom: 50px; left: 130px;}
.ct_intro__elem--main .wrapper {position: absolute; bottom: 0; left: 0; width: 774px; height: 774px;}
.ct_intro__elem--main .wrapper .core {position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #9bb1d7, transparent); box-shadow: inset 10px 10px 10px rgb(0,0,0,.1); overflow: hidden;}
.ct_intro__elem--main .wrapper .core .bg {position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; transition: opacity 1s;}
.ct_intro__elem--main .wrapper .dim {position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: 0.7s var(--cubic-pop1);}
.ct_intro__elem--main .wrapper .dim__shadow {position: absolute; bottom: -70px; right: -10px; width: calc(100% + 130px); height: calc(100% + 130px); background: linear-gradient(to bottom, rgb(0,0,0,.5),rgb(0,0,0,0), rgb(0,0,0,0)); border-radius: 50%;}
.ct_intro__elem--main .wrapper .dim__deco {position: absolute; width: 252px; height: 252px; background: rgb(0,0,0,0); border-radius: 50%; bottom: 150px; right: -100px; transition: background .7s;}
.ct_intro__elem--point {width: 1500px; height: 1500px; top: 90%; right: 0; transform: translate(0, -50%) rotate(-180deg);}
.ct_intro__elem--point .core {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); width: 440px; height: 440px; border-radius: 50%; background: #d8d8e5; opacity: 0;}

.ct_intro__elem--section1 {width: 300px; height: 300px; top: 130px; left: 0; transform: scale(0); opacity: 0;}
.ct_intro__elem--section2 {width: 152px; height: 152px; top: 390px; right: 232px; transform: scale(0); opacity: 0;}
.ct_intro__elem--section3 {width: 216px; height: 216px; top: 543px; right: 72px; transform: scale(0); opacity: 0;}
.ct_intro__elem--section4 {width: 150px; height: 150px; bottom: 65px; left: 264px; transform: scale(0); opacity: 0;}
.ct_intro__elem--section1 .core {width: 100%; height: 100%; border-radius: 50%; background: url('../images/common/intro_bg_section1.jpg') no-repeat center / cover;}
.ct_intro__elem--section2 .core {width: 100%; height: 100%; border-radius: 50%; background: url('../images/common/intro_bg_section2.jpg') no-repeat center / cover;}
.ct_intro__elem--section3 .core {width: 100%; height: 100%; border-radius: 50%; background: url('../images/common/intro_bg_section3.jpg') no-repeat center / cover;}
.ct_intro__elem--section4 .core {width: 100%; height: 100%; border-radius: 50%; background: url('../images/common/intro_bg_section4.jpg') no-repeat center / cover;}


.ct_intro__elem--main {transform: rotate(-180deg);}
.ct_intro__elem--main .core {transform: scale(.2); opacity: 0;}
.ct_intro__elem--point {transform: translate(0, -50%) rotate(-180deg);}
.ct_intro__elem--point .core {transform: translate(0, -50%) scale(.2);}

.ct_intro__elem--main {transition: .4s var(--cubic-pop1) .4s;}
.ct_intro__elem--main .core {transition: .4s var(--cubic-pop1) .4s; box-shadow: 10px 10px 10px rgb(0,0,0,0);}
.ct_intro__elem--point {transition: .4s var(--cubic-pop1) .4s;}
.ct_intro__elem--point .core {transition: .4s var(--cubic-pop1) .4s;}
.ct_intro__elem--section1 {transition: .4s var(--cubic-pop1) .3s;}
.ct_intro__elem--section2 {transition: .4s var(--cubic-pop1) .4s;}
.ct_intro__elem--section3 {transition: .4s var(--cubic-pop1) .5s;}
.ct_intro__elem--section4 {transition: .4s var(--cubic-pop1) .6s;}

.catalog.isIntro--true .ct_intro__elem--main {transform: rotate(0deg);}
.catalog.isIntro--true .ct_intro__elem--main .core {transform: scale(1); opacity: 1;}
.catalog.isIntro--true.introStep--2 .ct_intro__elem--main .wrapper .dim {opacity: 1; transform:rotate(0deg);}
.catalog.isIntro--true.introStep--3 .ct_intro__elem--main .wrapper .dim {opacity: 1; transform:rotate(-45deg);}
.catalog.isIntro--true.introStep--4 .ct_intro__elem--main .wrapper .dim {opacity: 1; transform:rotate(-90deg);}
.catalog.isIntro--true.introStep--5 .ct_intro__elem--main .wrapper .dim {opacity: 1; transform:rotate(-135deg);}
.catalog:not(.isIntro--true) .ct_intro__elem--main .wrapper .dim {opacity: 0; transform:rotate(-135deg);}
.catalog.isIntro--true.introStep--2 .ct_intro__elem--main .wrapper .dim__deco {background: #2e008a43;}
.catalog.isIntro--true.introStep--3 .ct_intro__elem--main .wrapper .dim__deco {background: #00781255;}
.catalog.isIntro--true.introStep--4 .ct_intro__elem--main .wrapper .dim__deco {background: #008b844f;}
.catalog.isIntro--true.introStep--5 .ct_intro__elem--main .wrapper .dim__deco {background: #00058b4e;}
.catalog.isIntro--true .ct_intro__elem--point {transform: translate(0, -50%) rotate(0deg);}
.catalog.isIntro--true .ct_intro__elem--point .core {transform: translate(0, -50%) scale(1); opacity: .3;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--main {transition: 1.5s var(--cubic-pop1) 2.6s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--main .core {transition: 1.5s var(--cubic-pop1) 2.6s, box-shadow .7s var(--cubic-pop1) 0s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--point {transition: 1.5s var(--cubic-pop1) 2.7s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--point .core {transition: 1.5s var(--cubic-pop1) 2.7s;}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__elem--main {transition: 0s var(--cubic-pop1) 0s;}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__elem--main .core {transition: transform 0s var(--cubic-pop1) 0s, opacity 0s var(--cubic-pop1) 0s, box-shadow .7s var(--cubic-pop1); box-shadow: 10px 10px 10px rgb(0,0,0,.5);}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__elem--point {transition: 0s var(--cubic-pop1) 0s;}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__elem--point .core {transition: 0s var(--cubic-pop1) 0s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--main .core {box-shadow: 10px 10px 10px rgb(0,0,0,0);}
.catalog.isIntro--true.introStep--2 .ct_intro__elem--main .core {box-shadow: 10px 10px 10px rgb(0,0,0,.5);}
.catalog.isIntro--true.introStep--3 .ct_intro__elem--main .core {box-shadow: 10px -10px 10px rgb(0,0,0,.5);}
.catalog.isIntro--true.introStep--4 .ct_intro__elem--main .core {box-shadow: 10px -10px 10px rgb(0,0,0,.5);}
.catalog.isIntro--true.introStep--5 .ct_intro__elem--main .core {box-shadow: -10px -10px 10px rgb(0,0,0,.5);}
.catalog.isIntro--true.introStep--2 .ct_intro__elem--main .core .bg:nth-child(1) {opacity: 1; transition-delay: .0s;}
.catalog.isIntro--true.introStep--3 .ct_intro__elem--main .core .bg:nth-child(2) {opacity: 1; transition-delay: .0s;}
.catalog.isIntro--true.introStep--4 .ct_intro__elem--main .core .bg:nth-child(3) {opacity: 1; transition-delay: .0s;}
.catalog.isIntro--true.introStep--5 .ct_intro__elem--main .core .bg:nth-child(4) {opacity: 1; transition-delay: .0s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--section1 {transform: scale(1); opacity: 1; transition: .6s var(--cubic-pop2) 3.4s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--section2 {transform: scale(1); opacity: 1; transition: .6s var(--cubic-pop2) 3.5s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--section3 {transform: scale(1); opacity: 1; transition: .6s var(--cubic-pop2) 3.6s;}
.catalog.isIntro--true.introStep--1 .ct_intro__elem--section4 {transform: scale(1); opacity: 1; transition: .6s var(--cubic-pop2) 3.7s;}
.ct_intro__elem--section1 .core {animation: introSectionCore2 2s infinite alternate 4.0s ease-in;}
.ct_intro__elem--section2 .core {animation: introSectionCore2 2.2s infinite alternate 4.1s ease-in;}
.ct_intro__elem--section3 .core {animation: introSectionCore1 2s infinite alternate 4.2s ease-in;}
.ct_intro__elem--section4 .core {animation: introSectionCore1 2.4s infinite alternate 4.3s ease-in;}
@keyframes introSectionCore1 {
  to {transform: translate(0, -10%) scale(0.95);}
}
@keyframes introSectionCore2 {
  to {transform: translate(0, 10%) scale(1.05);}
}

.ct_intro__background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: flex; flex-direction: column;}
.ct_intro__background .top {height: 706px; flex-shrink: 0; transition: .7s var(--cubic-pop1) 0s; transform: translate(0, -100%);}
.ct_intro__background .top .wrap {display: flex; flex-wrap: nowrap; width: 400%; height: 100%; transition: .7s var(--cubic-pop1);}
.ct_intro__background .top .bg {position:relative; width: 25%; flex-shrink: 0;}
.ct_intro__background .top .bg::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgb(0,0,0,.3); mix-blend-mode: multiply;}
.ct_intro__background .bot {width: 100%; height: 100%; transform: translate(0, 100%); transition: .7s var(--cubic-pop1) 0s;}
.ct_intro__background .bot .inner {width: 400%; height: 100%; background: linear-gradient(to right, #3763af, #8dc63f, #27b3e1, #3763af, #b688c5); transition: .7s var(--cubic-pop1);}

.catalog.isIntro--true.introStep--1 .ct_intro__background .top {transition-delay: 0s;}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__background .top {transform: translate(0);}
.catalog.isIntro--true.introStep--1 .ct_intro__background .bot {transition-delay: 0s;}
.catalog.isIntro--true:not(.introStep--1) .ct_intro__background .bot {transform: translate(0);}
.ct_intro__background .top .wrap {transition-delay: .7s; transition-duration: 0s;}
.ct_intro__background .bot .inner {transition-delay: .7s; transition-duration: 0s;}
.catalog.isIntro--true .ct_intro__background .top .wrap {transition-delay: .0s; transition-duration: .7s;}
.catalog.introStep--2 .ct_intro__background .top .wrap {transform: translate(0);}
.catalog.introStep--3 .ct_intro__background .top .wrap {transform: translate(-25%);}
.catalog.introStep--4 .ct_intro__background .top .wrap {transform: translate(-50%);}
.catalog.introStep--5 .ct_intro__background .top .wrap {transform: translate(-75%);}
.catalog:not(.isIntro--true) .ct_intro__background .top .wrap {transform: translate(-75%);}
.catalog.isIntro--true .ct_intro__background .bot .inner {transition-delay: .0s; transition-duration: .7s;}
.catalog.introStep--2 .ct_intro__background .bot .inner {transform: translate(0);}
.catalog.introStep--3 .ct_intro__background .bot .inner {transform: translate(-25%);}
.catalog.introStep--4 .ct_intro__background .bot .inner {transform: translate(-50%);}
.catalog.introStep--5 .ct_intro__background .bot .inner {transform: translate(-75%);}
.catalog:not(.isIntro--true) .ct_intro__background .bot .inner {transform: translate(-75%);}



.ct_intro_content {padding: 0;}
.ct_intro_content__container {width: 960px; height: 706px; display: flex; align-items: center; margin-left: auto; padding-top: 90px;}
.ct_intro_content__container .desc {margin-bottom: 0; color: #fff; text-shadow: 3px 3px 3px rgb(0,0,0,.2); line-height: 1.8;}


@media screen and (max-width: 767px) {
  #first_cover {height: 100vh;}
  #first_cover .logo {opacity: 1!important; transform: scale(.6)!important;}
}