@charset "UTF-8";
.dispPC {
  display: block;
}
@media screen and (max-width: 960px) {
  .dispPC {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .dispPC {
    display: none;
  }
}

.dispSP {
  display: none;
}
@media screen and (max-width: 960px) {
  .dispSP {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .dispSP {
    display: block;
  }
}

@media screen and (max-width: 960px) {
  .dispTBPC {
    display: none;
  }
}

.mv {
  position: relative;
}

.tegaki-innner {
  position: relative;
  width: 1080px;
  margin: 0 auto;
  height: 100%;
}

#tegaki {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 600px;
  height: auto;
  z-index: 2;
  opacity: 0;
  transition: opacity 2.5s ease;
  /* フェードで表示するなら */
}
@media screen and (max-width: 1100px) {
  #tegaki {
    left: -8%;
  }
}
@media screen and (max-width: 960px) {
  #tegaki {
    width: 500px;
    left: -5%;
  }
}
@media screen and (max-width: 768px) {
  #tegaki {
    width: 350px;
    left: -3%;
  }
}
@media screen and (max-width: 520px) {
  #tegaki {
    width: 250px;
  }
}
@media screen and (max-width: 375px) {
  #tegaki {
    width: 195px;
  }
}
#tegaki.visible {
  opacity: 1;
}

#tegaki-2 {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 600px;
  height: auto;
  z-index: 2;
  opacity: 0;
  transition: opacity 2.5s ease;
  /* フェードで表示するなら */
}
@media screen and (max-width: 1100px) {
  #tegaki-2 {
    left: -8%;
  }
}
@media screen and (max-width: 960px) {
  #tegaki-2 {
    width: 500px;
    left: -5%;
  }
}
@media screen and (max-width: 768px) {
  #tegaki-2 {
    width: 350px;
    left: -3%;
  }
}
@media screen and (max-width: 520px) {
  #tegaki-2 {
    width: 250px;
  }
}
@media screen and (max-width: 375px) {
  #tegaki-2 {
    width: 195px;
  }
}
#tegaki-2.visible {
  opacity: 1;
}

#base path {
  fill: #000;
  /* 塗りの色 */
}

#base-2 path {
  fill: #000;
  /* 塗りの色 */
}

.line-color {
  stroke: #88c231;
  stroke-width: 2px;
  fill: #88c231 !important;
}

#animate-mask {
  fill: none;
  /* 塗りの色 */
  stroke: #ffffff;
  /* 線の色 */
  stroke-width: 10px;
  /* 線幅 */
  stroke-linecap: round;
  /* 線端の形状 */
  stroke-linejoin: round;
  /* 角の形状 */
}

#animate-mask-2 {
  fill: none;
  /* 塗りの色 */
  stroke: #ffffff;
  /* 線の色 */
  stroke-width: 10px;
  /* 線幅 */
  stroke-linecap: round;
  /* 線端の形状 */
  stroke-linejoin: round;
  /* 角の形状 */
}/*# sourceMappingURL=tegaki-styles.css.map */