* {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


.flee-text2 {
  margin: 100px auto 0 !important;
  font-weight: bold;
  cursor: pointer;
  /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}

.link-menu-content a {
  font-family: 'メイリオ';
}

.block {
  display: block;
}

#WhiteBack {
  z-index: 20000000;
  position: fixed;
  width: 100%;
  height: 1000px;
  background: #fff;
}

.skip-animation {
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1056px;
  text-align: right;
  font-family: 'メイリオ';
  color: #fff;
  z-index: 30000;
}

.skip-animation.cpb_top-skip {
  top: 400px;
  left: 990px;
}

.op-animation-skip {
  color: #fff;
}

#MainArea,
#fp-nav {
  display: none;
}


.top-section {
  position: relative;
  height: 670px;
  padding: 165px 0 0;
  overflow: hidden;
}

.top-1-1-box {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  float: left;
  opacity: 0;
  width: 33%;
  max-width: 330px;
}
.top-1-1-box img {
  width: 100%;
}
.top-1-1-right {
  position: relative;
  float: right;
  width: 67%;
  padding-left: 20px;
}


.top-1-1-box img.add {
  top: -45px;
}

.top-1-1 {
  position: relative;
}

.top-1-1.add {
  animation: fadeIn .3s forwards;
}

.top-1-2 {
  position: relative;
  top: -30px;
  /*left: 350px;*/
  left: -15px;
  opacity: 0;
}

.top-1-2.on {
  animation: fadeIn .3s forwards;
  animation-delay: 10.5s;
}
.top-1-1-box.on {
  animation: TopLogoImgAnime 10s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes TopLogoImgAnime {
  0% {
    position: relative;
    left: 50%;
  }
  10% {
    opacity: 1;
  }
  15% {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  20% {
    position: relative;
    opacity: 1;
    left: 10px;
    transform: translateX(0%);
  }
  100% {
    position: relative;
    opacity: 1;
    left: 10px;
    transform: translateX(0%);
  }
}

.top-section-text-box {
  /*position: relative;
  left: 400px;*/
  margin: 0 0 95px 0;
  font-size: 2.4rem;
}
.lsm {
  letter-spacing: -25px;
}

#t_0 {
  position: absolute;
  /*top: 134px;*/
  /*left: 500px;*/
  top: -30px;
  left: 150px;
  font-size: 2.9rem;
  /*width:520px;*/
}
.top-section-text-0 {
  opacity: 0;
}

.top-section-text-0.on {
  animation: flash .7s;
  animation-delay: 11.5s;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.top-section-text-1{
  line-height: 60px;
  /*top: 35px;
  width: 60%;*/
}

.top-section-text-2 {
  display: inline-block;
  font-size: 1.7rem;
  line-height: 30px;
}

.top-section-text-2-2 {
  letter-spacing: 2.2px;
  display: inline-block;
  padding-left: 5px;

}

.down1 {
  opacity: 0;
}

.flee-text1 {
  opacity: 0;
  /*clear: both;*/
}

.flee-text1.on {
  animation: fadeIn .3s forwards;
  animation-delay: 13s;
}

.flee-text.flee-text1 {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  /*margin-top: 355px;*/
}



.second-section {
  margin: 70px 0;
}

.second-section-content {
  position: relative;
  margin: 0 0 85px;
}

.second-section-content:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.second-section-content .second-content-title {
  position: absolute;
  left: 50%;
  width: 790px;
  height: 260px;
  transform: translate(-50%);
  clip-path: circle(0px at center);
  -webkit-clip-path: circle(0px at center);
  background: linear-gradient(rgb(210, 23, 30), rgb(150, 34, 41));
  color: #fff;
  text-align: center;
  border-radius: 30px;
}

.second-content-title span {
  display: block;
}

.second-content-title-intext1 {
	font-size: 3.6rem;
	margin: 29px 0 -30px;
}

.second-content-title-intext2 {
	font-size: 6.3rem;
 margin-left: 50px;
 letter-spacing: 35px;
}
.second-section-content p {
  position: relative;
  top: 13px;
  left: 390px;
  font-size: 1.62rem;
  line-height: 2.8rem;
}

.sec1 .second-content-title {
  top: 50%;
}

.sec1 .second-content-title.on {
  animation: sec1img 1.5s forwards;
  animation-delay: 1.8s;
}

.sec2 .second-content-title.on {
  animation: sec2img 1.5s forwards;
  animation-delay: 11.5s;
}

.sec2 .second-content-title {
  top: -91%;
}

@keyframes sec1img {
  0% {
    clip-path: circle(0px at center);
    -webkit-clip-path: circle(0px at center);
  }

  50% {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -54px;
    left: -215px;
    transform: scale(0.48);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}

@keyframes sec2img {
  0% {
    transform: translate(-50%);
  }

  40% {
    top: -91%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -54px;
    left: -215px;
    transform: scale(0.48);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}

.second-section-text-1-1 span,
.second-section-text-1-2 span {

}

.flee-text2.on,
.down2.on {
  opacity: 0;
  animation: fadeIn .3s forwards;
  animation-delay: 23s;
}

.typed-cursor{
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}
@keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes blink{
  0% { opacity:1; }
  50% { opacity:0; }
  100% { opacity:1; }
}



@keyframes sec1imgres {
  0% {
    transform: translate(-50%);
    clip-path: circle(0px at center);
    -webkit-clip-path: circle(0px at center);
  }

  50% {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -77px;
    left: -215px;
    transform: scale(0.42);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}

@keyframes sec2imgres {
  0% {
    transform: translate(-50%);
  }

  40% {
    top: -91%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -75px;
    left: -215px;
    transform: scale(0.42);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}

@keyframes sec1imgres2 {
  0% {
    transform: translate(-50%);
    clip-path: circle(0px at center);
    -webkit-clip-path: circle(0px at center);
  }

  50% {
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -46px;
    left: -215px;
    transform: scale(0.42);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}

@keyframes sec2imgres2 {
  0% {
    transform: translate(-50%);
  }

  40% {
    top: -91%;
    left: 50%;
    transform: translate(-50%);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }

  100% {
    top: -46px;
    left: -215px;
    transform: scale(0.42);
    clip-path: circle(500px at center);
    -webkit-clip-path: circle(500px at center);
  }
}