@charset "utf-8";

/*reser*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body {line-height:1.6}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:900}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:2px solid #cccccc;margin:4em 0;padding:0}
h1, h2, h3, h4, h5 {font-weight: normal;}
input, select {vertical-align:middle}
input[type="submit"],
input[type="button"] {border-radius: 0;  -webkit-box-sizing: content-box;  -webkit-appearance: button;  appearance: button;  border: none;  box-sizing: border-box;  cursor: pointer;}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {  display: none;}
input[type="submit"]::focus,
input[type="button"]::focus {  outline-offset: -2px;}
::placeholder {color: #3f4863;}
/* 旧Edge対応 */
::-ms-input-placeholder {color: #3f4863;}
/* IE対応 */
:-ms-input-placeholder {color: #3f4863;}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: 'Zen Old Mincho', serif;
  margin: 0;
  background-color: #fff;
  font-size: 16px;
}
.Hv {
  -moz-transition-property: all;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -moz-transition-delay: 0.1s;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.1s;
  -o-transition-property: all;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: ease;
  -o-transition-delay: 0.1s;
  opacity: 1;
}
.Hv:hover {
  -moz-transition-property: all;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease;
  -moz-transition-delay: 0.1s;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.1s;
  -o-transition-property: all;
  -o-transition-duration: 0.5s;
  -o-transition-timing-function: ease;
  -o-transition-delay: 0.1s;
   opacity: 0.7;
 }
.pcview {
  display: inherit;
}
.spview {
  display: none;
}
.ta-c {
  text-align: center;
}
.ta-l {
  text-align: left;
}
.ta-r {
  text-align: right;
}
a {
  text-decoration: none;
  color: #1fbfd9;
}
a:hover {
  text-decoration:none;
}
.bold {
  font-weight: 500;
}
.effect-fade {
  opacity: 0;
  transform: translate(0, 60px);
  transition: all 1000ms;
}
.effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.effect-zoom {
  opacity: 0.1;
  transform: scale(1.3,1.3);
  transition: all 1000ms;
}
.effect-zoom.effect-scroll {
  opacity: 1;
  transform: scale(1,1);
}

.mt-l {
  margin-top: 10rem!important;
}
.mt-10 {
  margin-top: 10px!important;
}
.mt-8 {
  margin-top: 8px!important;
}

.fs-40 {
  font-size: 2.5rem!important;
}
.fs-32 {
  font-size: 2rem!important;
}
.fs-28 {
  font-size: 1.75rem!important;
}
.fs-26 {
  font-size: 1.625rem!important;
}
.fs-24 {
  font-size: 1.5rem!important;
}
.fs-22 {
  font-size: 1.375rem!important;
}
.fs-20 {
  font-size: 1.25rem!important;
}

.fs-s {
  font-size: 0.875rem!important;
}

/* color */
:root {
  --color-black: #3d3d3d;
  --color-white: #ffffff;
  --color-accent: #0c8c98;
  --color-red: #B40B30;
  --color-btn: #037b91;
  --color-btn__bottom: #015469;
  --color-btn__blue: #334691;
  --color-btn-blue__bottom: #192348;
  --color-footer: #757575;
  --color-gray: #efefef;
}

.txt-color__black {
  color: #3d3d3d!important;
  color: var(--color-black)!important;
}
.txt-color__white {
  color: #ffffff!important;
  color: var(--color-white)!important;
}
.txt-color__accent {
  color: #0c8c98!important;
  color: var(--color-accent)!important;
}
.txt-color__red {
  color: #B40B30 !important;
  color: var(--color-red)!important;
}
.txt-color__price {
  color: #35798E!important;
}
.txt-color__btn {
  color: #037b91!important;
  color: var(--color-btn__bottom)!important;
}
.txt-gradation__blue {
  background: -webkit-linear-gradient(57deg, #72d6cf, #adf2ed, #91dcec, #24a4ed, #24a4ed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.txt__line {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lh-16 {
  line-height: 1.6!important;
}
.lh-18 {
  line-height: 1.8!important;
}
.lh-20 {
  line-height: 2!important;
}

.mb-l {
  margin-bottom: 5rem!important;
}
.mt-s {
  margin-top: 0.75rem!important;
}

/**********
cont
**********/
.container {
  width: 90%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
.container__l {
  width: 90%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
.container__x {
  width: 90%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
.container__m {
  width: 90%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
.section-block__main {
  padding: 6.25rem 0;
}
.section-block__1 {
  padding: 10rem 0;
}
.section-block__2 {
  padding: 8rem 0;
}
.section-block__3 {
  padding: 6rem 0;
}
.section-block__4 {
  padding: 4rem 0;
}

.cont-title__main {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 2px;
  margin-bottom: 3rem;
}
.cont-title__shadow {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6)
}
.cont-title__l {
  font-size: 3.5rem;
}
.cont-title__s {
  font-size: 1.5rem;
}
.cont-txt__main {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  letter-spacing: 2px;
}
.cont-txt__bold {
  margin-top: 1.5rem;
  font-size: 2.25rem;
  font-weight: 900;
}

.cont-block__video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 3rem;
}
.cont-block__video iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.cont-txt__video {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 1.25rem;
}

.cont-block__img {
  width: 100%;
  height: auto;
}
.cont-block__img img {
  width: 100%;
  height: auto;
}
#imagination .cont-block__img {
  margin-bottom: 2rem;
}

.cont-btn__block {
  margin: 2.5rem auto 5rem;
  width: 100%;
  max-width: 520px;
}
.btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 64px;
  cursor: pointer;
}
.btn span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 64px;
  color: #fff;
  background: #337591;
  background: var(--color-btn);
  border-radius: 1rem;
  /*-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);*/
  border-bottom: 6px solid #225367;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 1.75rem;
  letter-spacing: 1px;
}
.btn:hover span {
  margin-top: 4px;
  border-bottom: 2px solid #337591;
  border-bottom: 2px solid var(--color-btn);
}
.btn.btn-blue span {
  background: #334691;
  background: var(--color-btn__blue);
  border-bottom: 6px solid #192348;
  border-bottom: 6px solid var(--color-btn-blue__bottom);
}
.btn-blue:hover span {
  border-bottom: 2px solid #334691;
  border-bottom: 2px solid var(--color-btn__blue);
}

/*.myasp_stepsite_body {
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
}*/

/**********
header
**********/
header {
  
}
.pcView{}
.spView{display:none;}
@media screen and (max-width: 767px) {
.pcView{display:none;}
.spView{display:block;}
}
/**********
mv
**********/
#mv {width: 100%;line-height: 0}
#mv img{width: 100%;height: auto;line-height: 0}
/**********
intro
**********/
#intro {position: relative; width: 100%; height: auto; background:#000; color: #fff;}
#intro img{width: 100%;height: auto;line-height: 0;max-width: 100vw;}
#intro .txt1 {position: relative;box-sizing: border-box;padding-left: 5%; color: #E4007F;font-size: 36px;z-index: 10;margin-bottom: 15%;font-weight: 700}
#intro .txt1 span {font-size: 42px;}
#intro .txt2 {position: relative;z-index: 10;width: 80%;margin: 0 auto;font-size: 26px;}
#intro .txt2 h2 {color: #900883;font-size: 40px;font-weight: 700;margin-bottom: 2%;text-shadow: 2px 3px 10px rgba(0, 0, 0, 1), 10px 12px 26px rgba(20, 20, 20, 1);animation: colortrans1 8s linear infinite;}
#intro .txt2 p {margin-bottom: 4%}
#intro .fig1 {position: absolute;top: 5%;right: 0;width:800px;z-index: 5; animation: flash1 5s linear infinite;}
#intro .fig2 {position: absolute;top: 20%;left: 5%;width: 50px; z-index: 5;animation: flash2 4s linear infinite;}
@keyframes flash1 {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
@media screen and (max-width: 767px) {
#intro {}
#intro .txt1 {padding-left: 5%;font-size: 2rem;margin-bottom: 15%;text-shadow: 1px 1px 2px rgba(0,0,0,1);}
#intro .txt1 span {font-size: 28px;}
#intro .txt2 {width: 90%;font-size: 16px;}
#intro .txt2 h2 {font-size: 2rem;text-shadow: 1px 1px 2px rgba(0,0,0,1);}
#intro .txt2 p {margin-bottom: 4%;text-shadow: 1px 1px 2px rgba(0,0,0,1);font-weight: normal;}
#intro .fig1 {top: 5%;width:500px;max-width: 100%;}
#intro .fig2 {top: 40%;left: 1%;width: 30px;}
}

/**********
open
**********/
#open img,
#why img,
#change img,
#myself img,
#imagination img {width: 100%;height: auto;line-height: 0;max-width: 100vw;}
#open .txt h2,
#change .txt h2,
#imagination h2 {color: #fff;font-size: 2.5rem;font-weight: 400;text-align: center;margin-bottom: 6%;animation: colortrans2 6s linear infinite;}
#why .txt h2,
#myself .txt h2 {color: #fff;font-size: 2.5rem;font-weight: 400;text-align: center;margin-bottom: 6%;animation: colortrans3 6s linear infinite;}
#open .txt,
#why .txt,
#change .txt,
#myself .txt,
#imagination .txt {position: relative;box-sizing: border-box;width: 100%; color: #fff;z-index: 10;font-size: 1.5rem;}
#open .txt p,
#why .txt p,
#change .txt p,
#myself .txt p,
#imagination .txt p {margin-bottom: 4%;text-shadow: 1px 1px 2px rgba(0,0,0,1)}

@media screen and (max-width: 767px) {
  #open .txt h2,
  #change .txt h2,
  #imagination h2,
  #why .txt h2,
  #myself .txt h2 {font-size: 2rem;font-weight: 700;text-shadow: 1px 1px 2px rgba(0,0,0,1);}
  #open .txt,
  #why .txt,
  #change .txt,
  #myself .txt,
  #imagination .txt {font-size: 16px;}
  #imagination.section-block__main {padding-top: 0;}
}

#open {background: #000 url(../img/bg-new-01.jpg) no-repeat top center;background-size: cover;background-position: center;}

/**********
why
**********/
#why {background: #000 url(../img/bg-new-02.jpg) no-repeat top center;background-size: cover;background-position: center;}

/**********
change
**********/
#change {background: #000 url(../img/bg-new-03.jpg) no-repeat top center;background-size: cover;background-position: center;}

/**********
myself
**********/
#myself {background: #000;}

/**********
imagination
**********/
#imagination {background: #000;}

/**********
but
**********/
#but {position: relative; width: 100%; height: auto; background:#000; color: #fff;}
#but img{width: 100%;height: auto;line-height: 0;max-width: 100vw;}
#but .txt1 {position: relative;box-sizing: border-box;width: 100%;padding-left: 30%; color: #fff;font-size: 26px;z-index: 10;margin-bottom: 15%;font-weight: 700;text-shadow: 1px 1px 2px rgba(0,0,0,1);}
#but .txt1 h2,
#but .txt2 h2
{color: #601986;font-size: 40px;font-weight: 700;margin-bottom: 2%;text-shadow: 2px 3px 10px rgba(0, 0, 0, 1), 10px 12px 26px rgba(20, 20, 20, 1);}
#but .txt1 h2 {animation: colortrans1 8s linear infinite;}
#but .txt2 h2 {animation: colortrans1 6s linear infinite;}
#but .txt2 {position: relative;box-sizing: border-box;width: 100%;padding-right: 30%; color: #fff;z-index: 10;font-size: 26px;}
#but .txt2 p {margin-bottom: 4%;text-shadow: 1px 1px 2px rgba(0,0,0,1)}
#but .fig1 {position: absolute;top: 5%;left: 0;width:700px;z-index: 5; animation: flash1 5s linear infinite;}
#but .fig2 {position: absolute;bottom: 20%;right: 5%;width: 150px; z-index: 5;animation: flash2 4s linear infinite;}
#but .fig3 {position: relative;width: 100%; z-index: 1;}
@keyframes flash1 {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
@keyframes flash2 {
  0% {opacity: 0.9;}
  50% {opacity: 0.5;}
  100% {opacity: 0.9;}
}
@keyframes colortrans1 {
  0% {color: #601986;}
  50% {color: #fff;}
  100% {color: #601986;}
}
@keyframes colortrans2 {
  0% {color: #fff;}
  40% {color: #fff;}
  50% {color: #601986;}
  60% {color: #fff;}
  100% {color: #fff;}
}
@keyframes colortrans3 {
  0% {color: #fff;}
  40% {color: #fff;}
  50% {color: #E4007F;}
  60% {color: #fff;}
  100% {color: #fff;}
}
@media screen and (max-width: 767px) {
#intro img {opacity: 0.6;}
#but {padding-top: 0rem;}
#but img{opacity: 0.6;}
#but .txt1 {padding-left: 12%;font-size: 16px;}
#but .txt1 p {font-weight: normal;}
#but .txt1 h2,
#but .txt2 h2
{font-size: 2rem;}
#but .txt2 {padding-right: 12%;font-size: 16px;}
#but .txt2 p {margin-bottom: 4%;font-weight: normal;}
#but .fig1 {top: 5%;width:400px;max-width: 100%;}
#but .fig2 {bottom: 40%;right: 2%;width: 50px;}
#but .fig3 {width: 100%; z-index: 1;}
}

/**********
about
**********/
#about {position: relative; width: 100%; height: auto; background:#000; color: #fff;font-size: 32px;}
#about img{width: 100%;height: auto;line-height: 0}
#about h2{font-size: 46px;font-weight: 700;margin-bottom: 2%;text-shadow: 2px 3px 10px rgba(0, 0, 0, 1), 10px 12px 26px rgba(20, 20, 20, 1);}
#about p {margin-bottom: 4%}
@media screen and (max-width: 767px) {
#about {font-size: 16px;padding-top: 0rem;}
#about h2{font-size: 2rem;}
#about p {margin-bottom: 4%;font-weight: normal;}
}

/**********
lead
**********/
#lead {

}

/**********
real
**********/
#real {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg-1.png) no-repeat top center;
  background-size: cover;
  background-position: center;
  color: #fff;
  color: var(--color-white);
}

/**********
end
**********/
#end {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg-2.png) no-repeat top center;
  background-size: cover;
  background-position: center;
  color: #fff;
  color: var(--color-white);
}


/*** point ***/
#point {position: relative;width: 100%;height: auto;color: #fff;background: #000;display: block;overflow: hidden;line-height: 0}
#point .box {position: relative;overflow: hidden;display: block;width: 100%;}
#point .fig1 {width: 727px;margin:auto;position: absolute;left: 0;right: 0;z-index: 10;top: 6%}
#point .fig2 {position: relative; margin: 0 auto;}
@media screen and (max-width: 767px) {
#point {}
#point .box {}
#point .fig1 {width: 70%;margin:auto;position: absolute;left: 0;right: 0;z-index: 10;top: 6%}
#point .fig2 {position: relative; margin: 0 auto;}
}

/*** digest ***/
#digest {background: #000;color: #fff;}

/**********
program
**********/
#program {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg-4.png) no-repeat top center;
  background-size: cover;
  background-position: center;
  color: #fff;
  color: var(--color-white);
}
.program-display__flex {
  margin: auto;
}
.program-cont__box {
  color: #414141;
  background: #efefef;
  width: 100%;
  max-width: 380px;
  padding: 30px 20px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
.program-title__head {
  line-height: 1.8;
  font-size: 1.5rem;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1rem;
}
.program-title__sub {
  font-weight: 900;
}
.program-title__sub::before {
  content: '・';
}
.program-title__sub:nth-of-type(n+2) {
  margin-top: 1.5rem;
}
.program-txt__main {
  padding-left: 1rem;
}

/**********
special
**********/
#special {background: #000;color: #fff;

}

/**********
answer
**********/
#answer {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../img/bg-5.png) no-repeat top center;
  background-size: cover;
  background-position: center;
  color: #fff;
  color: var(--color-white);
}

/**********
present
**********/
#present {
  background: #000;color: #fff;
  padding-top: 0;
}
#present.present__normal {
  padding: 6.25rem 0;
}

/**********
offer
**********/
#offer {

}
@media screen and (max-width: 767px) {
  #offer {
    padding-bottom: 0;
  }
}
.offer-txt__main {
  font-size: 1.75rem;
  margin-top: 6rem;
}

/**********
sns
**********/
#sns {
}
.sns-link__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sns-link__list li {
  margin: 0 1rem;
}
.sns-link__list li a:hover {
  opacity: 0.7;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sns-link__list li img {
  width: 72px;
  height: auto;
}

#sns .banner{width: 800px; margin: 40px auto 0;}
#sns .banner img {width: 100%;height: auto;}
@media screen and (max-width: 767px) {
#sns .banner{width: 96%; margin: 20px auto 0;}
}
/**********
faq
**********/
#faq {
  background: #efefef;
}
.faq-list__box {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #414141;
}
.faq-txt__main {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  text-indent: -2.375rem;
  padding-left: 2.375rem;
}

/**********
footer
**********/
footer {
  background: #757575;
  background: var(--color-footer);
  color: #fff;
  color: var(--color-white);
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.6;
  padding: 5rem 0;
  letter-spacing: 2px;
}
.footer-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-nav__list li:nth-of-type(n+2)::before {
  content: '/';
  margin: 0 .75rem;
}
footer  a {
  color: #fff;
  color: var(--color-white);
}
footer a:hover {
  color: #fff;
  color: var(--color-white);
  text-decoration: underline;
}
.footer-txt_copy {
  margin-top: 1rem;
}

/* ----------- Extra large ----------- */
@media screen and (max-width: 1399px) {
}

/* ----------- Large ----------- */
@media screen and (max-width: 1199px) {
  .point-display__flex {
    flex-direction: column;
  }
}

/* ----------- Medium ----------- */
@media screen and (max-width: 991px) {
  .program-cont__box {
    max-width: 300px;
  }
}

/* ----------- Small ----------- */
@media screen and (max-width: 767px) {
  .pcview {
    display: none;
  }
  .spview {
    display: inherit;
  }
  html {
    font-size: 12px;
  }
  .container,
  .container-short {
    width: 90%;
  }
  .program-cont__box {
    max-width: 380px;
    margin: 0 auto 30px;
  }
  .point-cont__title .cont-title__main {
    font-size: 2rem;
  }
  .point-cont__list ul {
    font-size: 1.375rem;
  }
}

/* ----------- X-Small ----------- */
@media screen and (max-width: 575px) {
  .sns-link__list {
    flex-wrap: wrap;
  }
  .sns-link__list li {
    width: 25%;
    margin: 0 auto 20px;
    box-sizing: border-box;
  }
}

/* ----------- Animation ----------- */
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes scroll{
  0% {
    transform-origin:right bottom;
    transform: scale(1,1);
  }
  50%{
    transform-origin:right bottom;
    transform: scale(1,0);
  }
  51%{
    transform-origin:left top;
    transform: scale(1,0);
  }
  100%{
    transform-origin:left top;
    transform: scale(1,1);
  }
}

.animation-fadein__main {
  display: block;
  opacity: 0;
  transform: translateX(60px);
}
.animation-fadein__sub {
  display: block;
  opacity: 0;
  transform: translateX(60px);
}
.animation-fadein__ja {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  transform: translateY(0px);
  background: #fff;
}
.animation-fadein {
  opacity: 0;
}
.animation-fadein__txt {
}
.animation-fadein__txt span {
  opacity: 0;
}
.animation-fadeup {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s, transform .8s;
}
.animation-fadein__main.is-animated {
  animation: header-fadein__main 1s forwards;
}
.animation-fadein__sub.is-animated {
  animation: header-fadein__sub 1s forwards;
}
.animation-fadein__ja.is-animated {
  animation: header-fadein__ja 1s forwards linear;
}
.animation-fadein.is-animated {
  animation: fadein 1.5s ease forwards;
  -moz-transition-delay: .4s;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}
.animation-fadein__txt.is-animated {
  animation: fadein__txtarea 2s ease forwards;
}
.animation-fadein__txt.is-animated span {
  animation: fadein__txt 2s ease forwards;
}
.animation-fadeup.is-animated {
  opacity: 1;
  transform: translateY(0);
  -moz-transition-delay: .4s;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
}
.d0 {
  -moz-transition-delay: 0!important;
  -webkit-transition-delay: 0!important;
  -o-transition-delay: 0!important;
  transition-delay: 0!important;
}
.d1 {
  -moz-transition-delay: .2s!important;
  -webkit-transition-delay: .2s!important;
  -o-transition-delay: .2s!important;
  transition-delay: .2s!important;
}
.d2 {
  -moz-transition-delay: .4s!important;
  -webkit-transition-delay: .4s!important;
  -o-transition-delay: .4s!important;
  transition-delay: .4s!important;
}
.d3 {
  -moz-transition-delay: .6s!important;
  -webkit-transition-delay: .6s!important;
  -o-transition-delay: .6s!important;
  transition-delay: .6s!important;
}
.d4 {
  -moz-transition-delay: .8s!important;
  -webkit-transition-delay: .8s!important;
  -o-transition-delay: .8s!important;
  transition-delay: .8s!important;
}
.d5 {
  -moz-transition-delay: 1s!important;
  -webkit-transition-delay: 1s!important;
  -o-transition-delay: 1s!important;
  transition-delay: 1s!important;
}
.d6 {
  -moz-transition-delay: 1.2s!important;
  -webkit-transition-delay: 1.2s!important;
  -o-transition-delay: 1.2s!important;
  transition-delay: 1.2s!important;
}
.section-bg__change::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 1s ease;
    z-index: -1;
}
.section-bg__change.show::before {
    opacity: 1;
}
@keyframes header-fadein__main {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes header-fadein__sub {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes header-fadein__ja {
  0% {
    opacity: 1;
    height: 100%;
  }
  100% {
    opacity: 1;
    height: 0;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein__txt {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein__txtarea {
  0% {
    transform: scale(1.15, 1.15);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  99% {
      opacity: 0;
  }
  100% {
      opacity: 0;
      display: none;
  }
}
@keyframes loading-bar {
  0% {
    width: 0;
    opacity: 0;
  }
  25% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100px;
    opacity: 1;
  }
}
@keyframes font-color__change {
  0% {
    color: #fff;
  }
  100% {
    color: #000;
  }
}
@keyframes font-color__change01 {
  0% {
    color: #000;
  }
  100% {
    color: #fff;
  }
}
@keyframes zoom-out {
  0% {
    transform: scale(1.2);
    transform-origin: left top;
  }
  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

.txt-header__cont {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .d0 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d1 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d2 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d3 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d4 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d5 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
.d6 {
  -moz-transition-delay: 0.2s!important;
  -webkit-transition-delay: 0.2s!important;
  -o-transition-delay: 0.2s!important;
  transition-delay: 0.2s!important;
}
}