@charset "UTF-8";
/*　HOW TO 上宮　全体
----------------------------------------------- */
#howto_uenomiya, #current_students {
  position: relative;
  background-image: url(../../../img/page/school_life/howto_uenomiya_bg_00_sp.svg);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #eceff1;
}

#howto_uenomiya::before, #current_students::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url(../../../img/page/school_life/howto_uenomiya_bg_01_sp.svg);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: upAndDown 5s ease-in-out infinite;
          animation: upAndDown 5s ease-in-out infinite;
}

#howto_uenomiya::after, #current_students::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url(../../../img/page/school_life/howto_uenomiya_bg_02_sp.svg);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  content: "";
  -webkit-animation: downAndUp 5s ease-in-out infinite;
          animation: downAndUp 5s ease-in-out infinite;
}

@media screen and (min-width: 700.9999px) {
  #howto_uenomiya, #current_students {
    background-image: url(../../../img/page/school_life/howto_uenomiya_bg_00_pc.svg);
    background-size: 1618px auto;
  }
  #howto_uenomiya::before, #current_students::before {
    background-image: url(../../../img/page/school_life/howto_uenomiya_bg_01_pc.svg);
    background-size: 1618px auto;
  }
  #howto_uenomiya::after, #current_students::after {
    background-image: url(../../../img/page/school_life/howto_uenomiya_bg_02_pc.svg);
    background-size: 1618px auto;
  }
}

.howto_uenomiya-wrap {
  position: relative;
  z-index: 2;
}

/*　HOW TO 上宮　mv
----------------------------------------------- */
.howto_uenomiya-hero {
  position: relative;
  z-index: 2;
}

.howto_uenomiya-hero__text {
  padding-top: 17.56955vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.howto_uenomiya-hero__catch {
  margin-left: 1.46413vw;
  font-size: 5.71429vw;
  color: #2c318d;
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
}

.howto_uenomiya-hero__catch::before, .howto_uenomiya-hero__catch::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.howto_uenomiya-hero__catch::before {
  margin-top: calc((1 - 1.6) * 0.5em);
}

.howto_uenomiya-hero__catch::after {
  margin-bottom: calc((1 - 1.6) * 0.5em);
}

.howto_uenomiya-hero__arrow {
  margin-left: 0.73206vw;
  margin-top: 3.66032vw;
  width: 59.29722vw;
  height: auto;
}

.howto_uenomiya-hero__title {
  margin-top: 4.39239vw;
  margin-left: 4.39239vw;
  width: 62.5183vw;
  height: auto;
}

.howto_uenomiya-hero__title > * {
  display: block;
  width: 100%;
  height: 100%;
}

.howto_uenomiya-hero__title > * > * {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}

.howto_uenomiya-hero__image {
  height: 49.78038vw;
  position: relative;
}

.howto_uenomiya-hero__pointing {
  top: 16.10542vw;
  width: 23.42606vw;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: auto;
}

.howto_uenomiya-hero__pointing > * {
  position: absolute;
  -webkit-animation: mousemove 1.6s ease-in-out infinite;
          animation: mousemove 1.6s ease-in-out infinite;
}

.howto_uenomiya-hero__person {
  position: relative;
}

.howto_uenomiya-hero__person > * {
  position: absolute;
  top: 0;
}

.howto_uenomiya-hero__person--01 {
  width: 17.56955vw;
  height: 52.80625vw;
  top: 0.73206vw;
  left: 5.12445vw;
  top: 0;
}

.howto_uenomiya-hero__person--02 {
  width: 18.35041vw;
  height: 55.6369vw;
  top: -2.92826vw;
  left: 18.30161vw;
  z-index: 2;
}

.howto_uenomiya-hero__person--03 {
  width: 19.03367vw;
  height: 57.00342vw;
  right: 17.56955vw;
  top: -2.92826vw;
  z-index: 2;
}

.howto_uenomiya-hero__person--04 {
  width: 18.05759vw;
  height: 52.70864vw;
  top: 0.73206vw;
  right: 5.12445vw;
  top: 0;
}

@media screen and (min-width: 700.9999px) {
  .howto_uenomiya-hero {
    position: relative;
    height: 770px;
  }
  .howto_uenomiya-hero__text {
    padding-top: 110px;
  }
  .howto_uenomiya-hero__catch {
    margin-left: 0;
    font-size: 26px;
    letter-spacing: .075em;
  }
  .howto_uenomiya-hero__arrow {
    width: 450px;
    margin-top: 25px;
    margin-left: 0;
  }
  .howto_uenomiya-hero__title {
    width: 455px;
    margin-top: 35px;
    margin-left: 5px;
  }
  .howto_uenomiya-hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .howto_uenomiya-hero__pointing {
    top: 565px;
    width: 125px;
  }
  .howto_uenomiya-hero__person {
    width: 1280px;
    margin-right: auto;
    margin-left: auto;
  }
  .howto_uenomiya-hero__person--01 {
    top: 90px;
    left: 95px;
    width: calc(362px / 2);
    height: calc(1170px / 2);
  }
  .howto_uenomiya-hero__person--02 {
    top: 140px;
    left: 230px;
    width: calc(337px / 2);
    height: calc(1076px / 2);
  }
  .howto_uenomiya-hero__person--03 {
    top: 110px;
    right: 235px;
    width: calc(360px / 2);
    height: calc(1129px / 2);
  }
  .howto_uenomiya-hero__person--04 {
    top: 85px;
    right: 105px;
    width: calc(373px / 2);
    height: calc(1190px / 2);
  }
}

/*　HOW TO 上宮　intro
----------------------------------------------- */
.howto_uenomiya-intro {
  margin-top: 21.22987vw;
  color: #2c318d;
  text-align: center;
}

.howto_uenomiya-intro__title {
  font-size: 6vw;
  padding-bottom: 4.39239vw;
  position: relative;
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0;
}

.howto_uenomiya-intro__title::after {
  width: 8.78477vw;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 1px;
  background-color: #2c318d;
  content: "";
}

.howto_uenomiya-intro__desc {
  margin-top: 6.58858vw;
  font-size: 4.57143vw;
  padding-bottom: 9.51684vw;
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_balloon_sp.svg);
  background-position: bottom center;
  background-size: calc(100% - (100vw / 6.83)) auto;
  background-repeat: no-repeat;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: .075em;
}

.howto_uenomiya-intro__desc::before, .howto_uenomiya-intro__desc::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.howto_uenomiya-intro__desc::before {
  margin-top: calc((1 - 1.7) * 0.5em);
}

.howto_uenomiya-intro__desc::after {
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.howto_uenomiya-intro__menu {
  padding-top: 8.78477vw;
}

.howto_uenomiya-intro__menu--items {
  margin-top: -13.17716vw;
}

.howto_uenomiya-intro__menu--item {
  margin-top: 13.17716vw;
}

.howto_uenomiya-intro__menu--item.cs .howto_uenomiya-intro__menu--title::before {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_title_cs.svg);
}

.howto_uenomiya-intro__menu--item.cs .howto_uenomiya-intro__menu--title::after {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_title_cs.svg);
}

.howto_uenomiya-intro__menu--item.cs .howto_uenomiya-intro__menu--link {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_circle_cs.svg);
}

.howto_uenomiya-intro__menu--item.cs .howto_uenomiya-intro__menu--link::after {
  background-color: #2ebbcd;
}

.howto_uenomiya-intro__menu--item.ob-og .howto_uenomiya-intro__menu--title {
  color: #2ebbcd;
}

.howto_uenomiya-intro__menu--item.ob-og .howto_uenomiya-intro__menu--title::before {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_title_ob_og.svg);
}

.howto_uenomiya-intro__menu--item.ob-og .howto_uenomiya-intro__menu--title::after {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_title_ob_og.svg);
}

.howto_uenomiya-intro__menu--item.ob-og .howto_uenomiya-intro__menu--link {
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_circle_ob_og.svg);
}

.howto_uenomiya-intro__menu--item.ob-og .howto_uenomiya-intro__menu--link::after {
  background-color: #2c318d;
}

.howto_uenomiya-intro__menu--title {
  font-size: 4vw;
  display: inline-block;
  position: relative;
  font-weight: 900;
  letter-spacing: .075em;
}

.howto_uenomiya-intro__menu--title > * {
  line-height: 1.7;
}

.howto_uenomiya-intro__menu--title > *::before, .howto_uenomiya-intro__menu--title > *::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
}

.howto_uenomiya-intro__menu--title > *::before {
  margin-top: calc((1 - 1.7) * 0.5em);
}

.howto_uenomiya-intro__menu--title > *::after {
  margin-bottom: calc((1 - 1.7) * 0.5em);
}

.howto_uenomiya-intro__menu--title::before {
  top: 6.58858vw;
  left: -8.78477vw;
  width: 6.88141vw;
  height: 8.05271vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.howto_uenomiya-intro__menu--title::after {
  top: 6.58858vw;
  right: -8.78477vw;
  width: 6.88141vw;
  height: 8.05271vw;
  position: absolute;
  z-index: 1;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.howto_uenomiya-intro__menu--link {
  margin-top: 5.85652vw;
  width: 57.10102vw;
  height: 57.10102vw;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  background-size: contain;
  background-repeat: no-repeat;
  color: #ffffff;
}

.howto_uenomiya-intro__menu--link::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_circle_excl.svg);
  background-position: center;
  background-size: calc(170vw / 6.83) calc(320vw / 6.83);
  background-repeat: no-repeat;
  content: "";
}

.howto_uenomiya-intro__menu--link::after {
  bottom: -1.46413vw;
  right: -1.46413vw;
  width: 19.03367vw;
  height: 19.03367vw;
  position: absolute;
  border-radius: 50%;
  background-image: url(../../../img/page/school_life/howto_uenomiya_intro_circle_arrow.svg);
  background-position: center;
  background-size: calc(70vw / 6.83) calc(70vw / 6.83);
  background-repeat: no-repeat;
  content: "";
}

.howto_uenomiya-intro__menu--text > * {
  display: block;
}

.howto_uenomiya-intro__menu--jp {
  font-size: 8vw;
  margin-top: 4.39239vw;
  font-weight: 900;
  letter-spacing: .125em;
}

.howto_uenomiya-intro__menu--jp > * {
  font-size: 6vw;
  margin-left: 4.39239vw;
}

.howto_uenomiya-intro__menu--en {
  margin-top: 5.12445vw;
  font-size: 4.42857vw;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0;
}

@media screen and (min-width: 700.9999px) {
  .howto_uenomiya-intro {
    margin-top: 15px;
  }
  .howto_uenomiya-intro__title {
    padding-bottom: 20px;
    font-size: 26px;
  }
  .howto_uenomiya-intro__title::after {
    width: 50px;
  }
  .howto_uenomiya-intro__desc {
    margin-top: 20px;
    padding-bottom: 60px;
    background-image: url(../../../img/page/school_life/howto_uenomiya_intro_balloon_pc.svg);
    background-size: 660px auto;
    font-size: 24px;
    line-height: 1.7;
  }
  .howto_uenomiya-intro__desc::before, .howto_uenomiya-intro__desc::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
  }
  .howto_uenomiya-intro__desc::before {
    margin-top: calc((1 - 1.7) * 0.5em);
  }
  .howto_uenomiya-intro__desc::after {
    margin-bottom: calc((1 - 1.7) * 0.5em);
  }
  .howto_uenomiya-intro__menu {
    padding-top: 50px;
  }
  .howto_uenomiya-intro__menu--items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 730px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
  }
  .howto_uenomiya-intro__menu--item {
    margin-top: 0;
  }
  .howto_uenomiya-intro__menu--title {
    width: 200px;
    font-size: 20px;
    letter-spacing: .075em;
  }
  .howto_uenomiya-intro__menu--title > * {
    line-height: 1.7;
  }
  .howto_uenomiya-intro__menu--title > *::before, .howto_uenomiya-intro__menu--title > *::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
  }
  .howto_uenomiya-intro__menu--title > *::before {
    margin-top: calc((1 - 1.7) * 0.5em);
  }
  .howto_uenomiya-intro__menu--title > *::after {
    margin-bottom: calc((1 - 1.7) * 0.5em);
  }
  .howto_uenomiya-intro__menu--title::before {
    top: 30px;
    left: -30px;
    width: 37px;
    height: 45px;
  }
  .howto_uenomiya-intro__menu--title::after {
    top: 30px;
    right: -30px;
    width: 37px;
    height: 45px;
  }
  .howto_uenomiya-intro__menu--link {
    width: 310px;
    height: 310px;
    margin-top: 30px;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .howto_uenomiya-intro__menu--link::before {
    background-size: 130px 280px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .howto_uenomiya-intro__menu--link::after {
    right: -30px;
    bottom: 5px;
    width: 100px;
    height: 100px;
    background-size: 56px 56px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .howto_uenomiya-intro__menu--link:hover {
    opacity: .8;
  }
  .howto_uenomiya-intro__menu--link:hover::before {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  .howto_uenomiya-intro__menu--link:hover::after {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  .howto_uenomiya-intro__menu--jp {
    margin-top: 30px;
    font-size: 44px;
  }
  .howto_uenomiya-intro__menu--jp > * {
    margin-left: 20px;
    font-size: 33px;
  }
  .howto_uenomiya-intro__menu--en {
    margin-top: 35px;
    font-size: 26px;
  }
}

/*　HOW TO 上宮　footer
----------------------------------------------- */
.howto_uenomiya-footer {
  margin-top: 19.03367vw;
}

@media screen and (min-width: 700.9999px) {
  .howto_uenomiya-footer {
    margin-top: 120px;
  }
}
/*# sourceMappingURL=howto_uenomiya.css.map */