@charset "UTF-8";
/*@mixin tab {
  @media only screen and (max-width: ($tab)) {
    @content;
  }
}*/
.pc {
  display: block;
}
@media only screen and (max-width: 750px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 750px) {
  .sp {
    display: block;
  }
}

.pc {
  display: block;
}
@media only screen and (max-width: 750px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media only screen and (max-width: 750px) {
  .sp {
    display: block;
  }
}

p {
  margin-bottom: 0vw;
}
@media only screen and (max-width: 750px) {
  p {
    margin-bottom: 0vw;
  }
}

a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  font-family: YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

img {
  width: 100%;
  height: auto;
  line-height: 1;
}

p {
  text-justify: inter-ideograph;
  text-align: justify;
}

.u-fade-type-up {
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  opacity: 0;
}

.u-fade-type-up.is-active {
  -webkit-transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.u-fade-type-down {
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  opacity: 0;
}

.u-fade-type-down.is-active {
  -webkit-transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.u-visible {
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
  opacity: 0;
}

.u-visible.is-active {
  -webkit-transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.3s cubic-bezier(0.18, 0.06, 0.23, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.u-visible-mv {
  -webkit-animation: visible-mv 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: visible-mv 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.u-visible-mv.is-active {
  -webkit-animation: visible-mv 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: visible-mv 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@-webkit-keyframes visible-mv {
  0% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes visible-mv {
  0% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.u-poyopoyo {
  -webkit-animation: poyopoyo 3.6s ease-out infinite;
          animation: poyopoyo 3.6s ease-out infinite;
  opacity: 1;
}

@-webkit-keyframes poyopoyo {
  0%, 40%, 60%, 70%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}

@keyframes poyopoyo {
  0%, 40%, 60%, 70%, 80% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  75% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
.u-tikatika {
  -webkit-animation: tikatika 1.2s ease-in-out infinite alternate;
          animation: tikatika 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes tikatika {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tikatika {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
header, footer {
  width: 100%;
  z-index: 1000;
}

main {
  background-color: #ebfbff;
  overflow: hidden;
}

.contents {
  max-width: 550px;
  width: 100%;
  margin: auto;
  background-color: #ebfbff;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

.c-outerWidth {
  max-width: 550px;
  margin: 0 auto;
}

.bg-wh {
  position: relative;
  z-index: 1;
}
.bg-wh::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 50vw;
  position: absolute;
  z-index: -1;
  top: 0;
  left: -50vw;
  background-color: #fff;
}
.bg-wh::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 50vw;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -50vw;
  background-color: #fff;
}

.mv {
  position: relative;
  background-color: #fff;
  padding-bottom: 3%;
}
.mv_slideTxt {
  padding: 19px 0;
  background-color: #000;
  opacity: 0;
  -webkit-animation: slideTxt 1.6s ease-in-out;
          animation: slideTxt 1.6s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes slideTxt {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideTxt {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.mv_slideTxt img {
  width: 500px;
  display: block;
  margin: 0 15px;
}
.mv_cont01 {
  padding-top: 8.5%;
}
.mv_cont01_01 {
  width: 77%;
  margin-left: auto;
  margin-right: 5.2%;
  opacity: 0;
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}
.mv_cont01_02 {
  width: 81.1%;
  margin-top: 0.7%;
  margin-left: 10%;
  opacity: 0;
  -webkit-animation-delay: 0.4s !important;
          animation-delay: 0.4s !important;
}
.mv_cont01_03 {
  width: 60.3%;
  margin-top: 0.7%;
  margin-left: 5.4%;
  opacity: 0;
  -webkit-animation-delay: 0.6s !important;
          animation-delay: 0.6s !important;
}
.mv_cont02 {
  margin-top: 5%;
}
.mv_cont02_01 {
  width: 74%;
  margin-left: 13.7%;
  margin-right: auto;
  opacity: 0;
  -webkit-animation-delay: 0.8s !important;
          animation-delay: 0.8s !important;
}
.mv_cont03 {
  margin-top: 6.2%;
  position: relative;
}
.mv_cont03_01 {
  width: 86%;
  margin-left: 7.3%;
  margin-right: auto;
  opacity: 0;
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}
.mv_cont03 .circle {
  position: absolute;
  width: 26.7%;
}
.mv_cont03 .circle.--01 {
  top: 5%;
  left: 37.5%;
  opacity: 0;
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.mv_cont03 .circle.--01 img {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.mv_cont03 .circle.--02 {
  top: 26.2%;
  right: 6.2%;
  opacity: 0;
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.mv_cont03 .circle.--02 img {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.mv_cont03 .circle.--03 {
  bottom: 4.3%;
  right: 13.5%;
  z-index: 2;
  opacity: 0;
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.mv_cont03 .circle.--03 img {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.mv_cont03 .circle.--04 {
  bottom: 4.6%;
  left: 12.9%;
  z-index: 2;
  opacity: 0;
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.mv_cont03 .circle.--04 img {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
.mv_cont03 .circle.--05 {
  top: 25.2%;
  left: 6.5%;
  opacity: 0;
  -webkit-animation-delay: 1.2s !important;
          animation-delay: 1.2s !important;
}
.mv_cont03 .circle.--05 img {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.mv_cont03_02 {
  width: 64.1%;
  margin-top: -13.9%;
  margin-left: 16.7%;
  position: relative;
  opacity: 0;
  -webkit-animation-delay: 1s !important;
          animation-delay: 1s !important;
}
.mv_cont03_03 {
  width: 10.2%;
  margin-top: -9.3%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  -webkit-animation-delay: 1.4s !important;
          animation-delay: 1.4s !important;
}

.lead {
  padding-top: 9.8%;
  padding-bottom: 7%;
  background-color: #ebfbff;
}
.lead_01 {
  width: 88.4%;
  margin-left: 5%;
}
.lead_btn {
  width: 89.4%;
  margin: 9% auto 0;
  display: block;
}
.lead_02 {
  width: 89.4%;
  margin: 11% auto 0;
}
.lead_03 {
  width: 80.6%;
  margin-top: 4.5%;
  margin-left: 5.4%;
}
.lead_04 {
  width: 72.7%;
  margin-top: 4.5%;
  margin-left: 5.4%;
}
.lead_05 {
  width: 65.4%;
  margin-top: 4.2%;
  margin-left: 5.4%;
}
.lead_06 {
  width: 49%;
  margin-top: 2.6%;
  margin-left: 25.4%;
}

.fact {
  padding-top: 16.8%;
  padding-bottom: 17.5%;
  background-color: #fff;
}
.fact_01 {
  width: 75.2%;
  margin-left: 11%;
}
.fact_02 {
  width: 89.4%;
  margin: 15.6% auto 0;
}
.fact_03 {
  width: 66.2%;
  margin-top: 16.5%;
  margin-left: 17.2%;
}
.fact_04 {
  width: 89.6%;
  margin-top: 7.5%;
  margin-left: 5.4%;
}
.fact_05 {
  width: 94.9%;
  margin-top: 4.6%;
  margin-left: 2.8%;
}
.fact_06 {
  width: 94.9%;
  margin-top: 3.6%;
  margin-left: 2.6%;
}
.fact_yt {
  position: relative;
  margin: 15.4% auto 0;
  width: 94.7%;
  padding-top: 52.55%;
}
.fact_yt iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.plan {
  padding-top: 16.1%;
  padding-bottom: 15.8%;
  background-color: #ebfbff;
  background-image: url(../images/plan_icon01.svg), url(../images/plan_icon02.svg);
  background-size: 34% 34%, 41% 38%;
  background-repeat: no-repeat;
  background-position: 104% -18.1%, 7% 97%;
}
.plan_ttl {
  width: 40.2%;
  margin: auto;
}
.plan_01 {
  width: 89.8%;
  margin-left: 5%;
  margin-top: 8.1%;
}
.plan_02 {
  width: 94.7%;
  margin: 5.1% auto 0;
}
.plan_03 {
  width: 81.8%;
  margin: 7.5% auto 0;
}
.plan_04 {
  width: 94.7%;
  margin: 7.7% auto 0;
}
.plan_05 {
  width: 66.2%;
  margin-top: 10.2%;
  margin-left: 16%;
}
.plan_06 {
  width: 88.3%;
  margin-top: 5.3%;
  margin-left: 5.4%;
}
.plan_07 {
  width: 89.6%;
  margin-top: 9.2%;
  margin-left: 5.2%;
}
.plan_08 {
  width: 33.6%;
  margin-top: 8.7%;
  margin-left: 32.9%;
}
.plan_09 {
  width: 94.7%;
  margin-top: -7.6%;
  margin-left: 2.6%;
}
.plan_10 {
  width: 94.7%;
  margin-top: 2%;
  margin-left: 2.6%;
}
.plan_11 {
  width: 94.7%;
  margin-top: 2.3%;
  margin-left: 2.6%;
}

.flow {
  padding-top: 16.4%;
  padding-bottom: 15.8%;
  background-color: #fff;
}
.flow_ttl {
  width: 64.6%;
  margin: auto;
}
.flow_01 {
  width: 81.2%;
  margin-left: 2.4%;
  margin-top: 16.6%;
}
.flow_btn {
  width: 89.4%;
  margin: 2.5% auto 0;
  display: block;
}
.flow_02 {
  width: 91.3%;
  margin-left: 2.4%;
  margin-top: 4.7%;
}
.flow_03 {
  width: 90%;
  margin-left: 2.4%;
  margin-top: 5.1%;
}
.flow_04 {
  width: 90%;
  margin-left: 2.4%;
  margin-top: 5.2%;
}

.ft {
  background-color: #178bc0;
  padding-top: 11%;
  padding-bottom: 6%;
  position: relative;
  z-index: 1;
}
.ft::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 50vw;
  position: absolute;
  z-index: -1;
  top: 0;
  left: -50vw;
  background-color: #178bc0;
}
.ft::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 50vw;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -50vw;
  background-color: #178bc0;
}
.ft_01 {
  width: 80%;
  margin: auto;
}
.ft_btn {
  width: 89.4%;
  margin: 2.2% auto 0;
  display: block;
}

@-webkit-keyframes poyoyon {
  0% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0);
  }
  15% {
    -webkit-transform: scale(0.96, 0.9) translate(0, 10px);
            transform: scale(0.96, 0.9) translate(0, 10px);
  }
  30% {
    -webkit-transform: scale(1.04, 1) translate(0, 16px);
            transform: scale(1.04, 1) translate(0, 16px);
  }
  50% {
    -webkit-transform: scale(0.96, 1.05) translate(0, -16px);
            transform: scale(0.96, 1.05) translate(0, -16px);
  }
  70% {
    -webkit-transform: scale(1, 0.9) translate(0, 10px);
            transform: scale(1, 0.9) translate(0, 10px);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

@keyframes poyoyon {
  0% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0);
  }
  15% {
    -webkit-transform: scale(0.96, 0.9) translate(0, 10px);
            transform: scale(0.96, 0.9) translate(0, 10px);
  }
  30% {
    -webkit-transform: scale(1.04, 1) translate(0, 16px);
            transform: scale(1.04, 1) translate(0, 16px);
  }
  50% {
    -webkit-transform: scale(0.96, 1.05) translate(0, -16px);
            transform: scale(0.96, 1.05) translate(0, -16px);
  }
  70% {
    -webkit-transform: scale(1, 0.9) translate(0, 10px);
            transform: scale(1, 0.9) translate(0, 10px);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(0, 0);
            transform: scale(1, 1) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@media only screen and (max-width: 750px) {
  main {
    background-color: #fff;
  }
  .contents {
    background-color: #fff;
  }
  .mv {
    position: relative;
    background-color: #fff;
    padding-bottom: 3%;
  }
  .mv_slideTxt {
    padding: 2.4vw 0;
  }
  .mv_slideTxt img {
    width: 67vw !important;
    margin: 0 2.5vw;
  }
  .lead {
    border-radius: 5vw 5vw 0 0;
    padding-bottom: calc(7% + 5vw);
  }
  .fact {
    margin-top: -5vw;
    border-radius: 5vw 5vw 0 0;
    padding-bottom: calc(17.5% + 5vw);
  }
  .plan {
    margin-top: -5vw;
    border-radius: 5vw 5vw 0 0;
    padding-bottom: calc(15.8% + 5vw);
    position: relative;
    z-index: 2;
  }
  .flow {
    margin-top: -5vw;
    border-radius: 5vw 5vw 0 0;
    padding-bottom: calc(15.8% + 5vw);
    position: relative;
    z-index: 3;
  }
  .ft {
    margin-top: -5vw;
    border-radius: 5vw 5vw 0 0;
    z-index: 4;
  }
}
/*# sourceMappingURL=style.css.map */