@charset "UTF-8";


.js-fadein{
  opacity: 0;
  transition: opacity .6s ease;
}
.js-fadein.is-inview{
  opacity: 1;
}

/*footerに入ったら .l-banner を非表示にする（common/js/animation.js）
*************************************/
.l-banner{
  transition: opacity .4s ease;
}
body.is-footer-inview .l-banner{
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 780px){
  body.is-process-track-inview .l-banner{
    opacity: 0;
    pointer-events: none;
  }
}
.l-banner.is-closed{
  display: none;
}
.l-banner__close{
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  &::before,
  &::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background: #666;
  }
  &::before{
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}




/*p-service-lead__decoration 花の輪回転＋花びらアニメーション（スクロールで表示された時に1回だけ再生）
*************************************/
.p-service-lead__decoration img{
  transform-origin: center center;
}
.p-service-lead__decoration.is-inview img{
  animation: p-service-ring-rotate 3s ease forwards;
}
@media screen and (max-width: 780px) {
  .p-service-lead__decoration::before{
    transform-origin: center center;
  }
  .p-service-lead__decoration.is-inview::before{
    animation: p-service-ring-rotate-sp 3s ease forwards;
  }
}
@keyframes p-service-ring-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(90deg); }
}
@keyframes p-service-ring-rotate-sp{
  from{ transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  to{ transform: translateY(-50%) translateX(-50%) rotate(90deg); }
}

/*p-service-about__content-parts の花の輪（::before）を、スクロールで表示された時に1回転させる
*************************************/
.p-service-about__content-parts::before{
  transform-origin: center center;
}
.p-service-about__content-parts.is-inview::before{
  animation: p-service-parts-ring-rotate 2.4s ease forwards;
}
@keyframes p-service-parts-ring-rotate{
  from{ transform: translateY(-50%) translateX(-50%) rotate(0deg); }
  to{ transform: translateY(-50%) translateX(-50%) rotate(360deg); }
}

.p-service-lead__decoration-flower,
.p-service-about__curriculum-deco{
  opacity: 0;
  transform-origin: center center;
}
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower,
.p-service-about__curriculum-deco.is-inview{
  animation-name: p-service-flower-bloom;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  animation-fill-mode: forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--01{ animation-delay: 0s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--02{ animation-delay: .08s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--03{ animation-delay: .16s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--04{ animation-delay: .24s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--05{ animation-delay: .32s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--06{ animation-delay: .4s; }
.p-service-lead__decoration.is-inview .p-service-lead__decoration-flower.--07{ animation-delay: .48s; }
@keyframes p-service-flower-bloom{
  0%{ opacity: 0; transform: scale(0) rotate(-8deg); }
  70%{ opacity: 1; transform: scale(1.08) rotate(2deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0deg); }
}
/* カリキュラムが横並び(2カラムグリッド)になるPC幅では、右側のカードを少し遅らせて左→右の順に咲かせる */
@media screen and (min-width: 1251px){
  .p-service-about__curriculum-content:nth-child(2n) .p-service-about__curriculum-deco.is-inview{
    animation-delay: .15s;
  }
}

.p-service-lead__petal{
  position: absolute;
  width: 10%;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--01{
  top: 8%; left: 15%;
  background-image: url(../img/service/petal_img01.png);
  animation: p-service-petal-fly-a 2.4s ease-out forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--02{
  top: 68%; left: 82%;
  background-image: url(../img/service/petal_img02.png);
  animation: p-service-petal-fly-b 2.6s ease-out .15s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--03{
  top: 18%; left: 76%;
  background-image: url(../img/service/petal_img03.png);
  animation: p-service-petal-fly-c 2.3s ease-out .3s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--04{
  top: 62%; left: 8%;
  background-image: url(../img/service/petal_img04.png);
  animation: p-service-petal-fly-d 2.5s ease-out .05s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--05{
  top: 4%; left: 55%;
  background-image: url(../img/service/petal_img05.png);
  animation: p-service-petal-fly-e 2.2s ease-out .4s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--06{
  top: 84%; left: 40%;
  background-image: url(../img/service/petal_img06.png);
  animation: p-service-petal-fly-a 2.7s ease-out .2s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--07{
  top: 33%; left: 4%;
  background-image: url(../img/service/petal_img07.png);
  animation: p-service-petal-fly-b 2.4s ease-out .35s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--08{
  top: 46%; left: 92%;
  background-image: url(../img/service/petal_img01.png);
  animation: p-service-petal-fly-c 2.3s ease-out .1s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--09{
  top: 13%; left: 34%;
  background-image: url(../img/service/petal_img03.png);
  animation: p-service-petal-fly-d 2.6s ease-out .25s forwards;
}
.p-service-lead__decoration.is-inview .p-service-lead__petal--10{
  top: 78%; left: 64%;
  background-image: url(../img/service/petal_img05.png);
  animation: p-service-petal-fly-e 2.5s ease-out .45s forwards;
}
@keyframes p-service-petal-fly-a{
  0%{ opacity: 0; transform: translate(-30px, -20px) rotate(-15deg) scale(.8); }
  20%{ opacity: 1; transform: translate(0, 20px) rotate(0deg) scale(1); }
  65%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(60px, 90px) rotate(120deg) scale(.9); }
}
@keyframes p-service-petal-fly-b{
  0%{ opacity: 0; transform: translate(30px, -30px) rotate(10deg) scale(.8); }
  20%{ opacity: 1; transform: translate(0, 15px) rotate(0deg) scale(1); }
  65%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-70px, 80px) rotate(-140deg) scale(.9); }
}
@keyframes p-service-petal-fly-c{
  0%{ opacity: 0; transform: translate(0, -40px) rotate(0deg) scale(.8); }
  25%{ opacity: 1; transform: translate(0, 10px) rotate(0deg) scale(1); }
  65%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(50px, 70px) rotate(200deg) scale(.9); }
}
@keyframes p-service-petal-fly-d{
  0%{ opacity: 0; transform: translate(-45px, 10px) rotate(20deg) scale(.8); }
  20%{ opacity: 1; transform: translate(0, 25px) rotate(0deg) scale(1); }
  65%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(40px, -80px) rotate(-160deg) scale(.9); }
}
@keyframes p-service-petal-fly-e{
  0%{ opacity: 0; transform: translate(45px, 15px) rotate(-20deg) scale(.8); }
  20%{ opacity: 1; transform: translate(0, 20px) rotate(0deg) scale(1); }
  65%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-55px, -70px) rotate(150deg) scale(.9); }
}

/*p-service-process__content（STEP1〜3）を、下(STEP1)から順にフェードさせる（スクロールで表示された時に1回だけ再生）
*************************************/
.p-service-process__content{
  opacity: 0;
}
.p-service-process__wrap.is-inview .p-service-process__content{
  animation-name: p-service-process-content-fade;
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.p-service-process__wrap.is-inview .p-service-process__content:nth-of-type(3){ animation-delay: 0s; }
.p-service-process__wrap.is-inview .p-service-process__content:nth-of-type(2){ animation-delay: .35s; }
.p-service-process__wrap.is-inview .p-service-process__content:nth-of-type(1){ animation-delay: .7s; }
@keyframes p-service-process-content-fade{
  0%{ opacity: 0; transform: translateY(24px); }
  100%{ opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 780px){
  .p-service-process__content{
    opacity: 1;
  }
  .p-service-process__wrap.is-inview .p-service-process__content{
    animation: none;
  }
}

/*p-service-growth__content（STEP1〜3）を、上(STEP1)から順にフェードさせる（スクロールで表示された時に1回だけ再生）
*************************************/
.p-service-growth__content{
  opacity: 0;
}
.p-service-growth__wrapper.is-inview .p-service-growth__content{
  animation-name: p-service-process-content-fade;
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.p-service-growth__wrapper.is-inview .p-service-growth__content:nth-of-type(1){ animation-delay: 0s; }
.p-service-growth__wrapper.is-inview .p-service-growth__content:nth-of-type(2){ animation-delay: .35s; }
.p-service-growth__wrapper.is-inview .p-service-growth__content:nth-of-type(3){ animation-delay: .7s; }

/*p-service-process__wrap（タイトル直下、幅は少し広め）から花びらが降る演出（スクロールで表示された時に1回だけ再生）
*************************************/
.p-service-process__wrap{
  position: relative;
}
.p-service-process__petal{
  position: absolute;
  width: 7%;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.p-service-process__wrap.is-inview .p-service-process__petal--01{
  top: -7rem; left: -4%;
  background-image: url(../img/service/petal_img01.png);
  animation: p-service-process-petal-fall-a 5.5s ease-in forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--02{
  top: -4rem; left: 104%;
  background-image: url(../img/service/petal_img02.png);
  animation: p-service-process-petal-fall-b 6s ease-in .4s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--03{
  top: -8rem; left: 15%;
  background-image: url(../img/service/petal_img03.png);
  animation: p-service-process-petal-fall-c 5.8s ease-in .8s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--04{
  top: -3rem; left: 85%;
  background-image: url(../img/service/petal_img04.png);
  animation: p-service-process-petal-fall-d 6.3s ease-in .2s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--05{
  top: -6rem; left: 35%;
  background-image: url(../img/service/petal_img05.png);
  animation: p-service-process-petal-fall-e 5.6s ease-in 1.1s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--06{
  top: -9rem; left: 65%;
  background-image: url(../img/service/petal_img06.png);
  animation: p-service-process-petal-fall-a 6.1s ease-in .6s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--07{
  top: -5rem; left: 50%;
  background-image: url(../img/service/petal_img07.png);
  animation: p-service-process-petal-fall-b 5.7s ease-in 1.4s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--08{
  top: -7rem; left: 96%;
  background-image: url(../img/service/petal_img01.png);
  animation: p-service-process-petal-fall-c 6.2s ease-in 0s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--09{
  top: -4rem; left: 25%;
  background-image: url(../img/service/petal_img03.png);
  animation: p-service-process-petal-fall-d 5.9s ease-in 1.7s forwards;
}
.p-service-process__wrap.is-inview .p-service-process__petal--10{
  top: -8rem; left: 75%;
  background-image: url(../img/service/petal_img05.png);
  animation: p-service-process-petal-fall-e 6.4s ease-in 1s forwards;
}
@keyframes p-service-process-petal-fall-a{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%{ opacity: 1; }
  50%{ transform: translate(25px, 160px) rotate(60deg); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(10px, 320px) rotate(110deg); }
}
@keyframes p-service-process-petal-fall-b{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%{ opacity: 1; }
  50%{ transform: translate(-30px, 150px) rotate(-70deg); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-15px, 310px) rotate(-130deg); }
}
@keyframes p-service-process-petal-fall-c{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%{ opacity: 1; }
  50%{ transform: translate(15px, 170px) rotate(50deg); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-20px, 330px) rotate(160deg); }
}
@keyframes p-service-process-petal-fall-d{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%{ opacity: 1; }
  50%{ transform: translate(-20px, 155px) rotate(-55deg); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(20px, 315px) rotate(-150deg); }
}
@keyframes p-service-process-petal-fall-e{
  0%{ opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%{ opacity: 1; }
  50%{ transform: translate(20px, 165px) rotate(80deg); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-10px, 325px) rotate(140deg); }
}