@charset "UTF-8";

/* CSS Document */
body {
  font-family: "Ryumin R-KL JIS2004 AP";
  color: #202b44;
}

#yodogawa.bd_t.bd_none {
  margin-top: 10px;
}

#yodogawa p {
  margin: 0px;
}

.content_wrap {
  width: 95%;
  margin: auto;
}

.content_wrap section {
  padding: 0px;
}

.mail {
  background-color: #fff;
  width: 90%;
  margin: auto;
}

.about {
  background-color: #fff2eae6;
  margin: auto;
  font-family: "Shuei MaruGo L";
}

.komidashi {
  font-size: 1.6em;
  font-family: "Shuei MaruGo B";
  margin-bottom: 10px;
}

.name {
  font-size: 1.3em;
  font-family: "Shuei MaruGo B";
}

img.prof_photo {
  border-radius: 10px;
}

.bd_t,
.bd_b {
  border-color: transparent;
}

.line {
  border-bottom: 2px dotted #0a1464;
  margin: -30px 0px 10px 0px;
}

img.icon_mail {
  width: 14%;
}

.letter_sano {
  width: 60%;
  margin: auto;
}

.letter_asami {
  width: 60%;
  margin: auto;
}

.letter_shimada {
  width: 60%;
  margin: auto;
}

#kv {
  position: relative;
}

#kv .svg-animated-title {
  position: absolute;
  top: 10.889%;
  width: 27.1%;
  aspect-ratio: 10838 / 39336;
  z-index: 10;
}

#kv .svg-animated-title svg{
  overflow: visible;
}

/*PCのとき*/
@media (min-width: 641px) {

  #talk_body .txt_box .desc {
    max-width: calc(100% - 20px);
  }

  #talk_body dt,
  .info_taidan_txt dt {
    width: 15%;
  }

  #talk_body dd+dd,
  .info_taidan_txt dd+dd {
    padding-left: 20%;
  }

  .mail {
    background-color: #fff;
    width: 80%;
    margin: auto;
  }

  .a_color>div {
    padding: 0 2em 0 2em;
  }

  .yohaku {
    width: 50%;
    margin: auto;
  }

  #kv .svg-animated-title {
    top: 19.715%;
    width: 25.667%;
    aspect-ratio: 30743 / 10474;
  }

  .profile_inner .desc, .modal_content_inner .desc {
    max-width: 480px;
  }
}

/*SPのとき*/
@media (max-width: 640px) {
  #talk_body .txt_box {
    padding: 20px;
  }
}

/*新規追加*/
#talk_body dd,
.info_taidan_txt dd {
  padding: 0 19px;
}

#talk_body dt {
  margin: 0px 0px 10px 10px;
}


@keyframes animate-svg-fill-b {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(164, 196, 255);
  }
}

@keyframes animate-svg-fill-w {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-up {
  0% {
    transform: translateY(12px);
  }

  100% {
    transform: translateY(0px);
  }
}

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

  100% {
    opacity: 1;
  }
}

/* title animation v1 */

.effect-ver-1 .svg-elem-1 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.8s both;
}

.effect-ver-1 .svg-elem-2 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.85s both;
}


.effect-ver-1 .svg-elem-3 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.9s both;
}

.effect-ver-1 .svg-elem-4 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.95s both;
}

.effect-ver-1 .svg-elem-5 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.0s both;
}

.effect-ver-1 .svg-elem-6 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.05s both;
}

.effect-ver-1 .svg-elem-7 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.1s both;
}

.effect-ver-1 .svg-elem-8 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.15s both;
}

.effect-ver-1 .svg-elem-9 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.2s both;
}

/* 大 */
.effect-ver-1 .svg-elem-10 {
  animation: animate-svg-fill-w 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.2s both;
}

/* 学 */
.effect-ver-1 .svg-elem-11 {
  animation: animate-svg-fill-w 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.3s both;
}

/* に */
.effect-ver-1 .svg-elem-12 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.4s both;
}

.effect-ver-1 .svg-elem-13 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.5s both;
}

.effect-ver-1 .svg-elem-14 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.6s both;
}

.effect-ver-1 .svg-elem-15 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.7s both;
}

.effect-ver-1 .svg-elem-16 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.8s both;
}

.effect-ver-1 .svg-elem-17 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.9s both;
}

.effect-ver-1 .svg-elem-18 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 4.0s both;
}

.effect-ver-1 .svg-elem-19 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 4.1s both;
}

/* 定時制... */
.effect-ver-1 .svg-elem-20 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.5s both;
}

.effect-ver-1 .svg-elem-21 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.56s both;
}

.effect-ver-1 .svg-elem-22 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.62s both;
}

.effect-ver-1 .svg-elem-23 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.68s both;
}

.effect-ver-1 .svg-elem-24 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.74s both;
}

.effect-ver-1 .svg-elem-25 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.8s both;
}

.effect-ver-1 .svg-elem-26 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.86s both;
}

.effect-ver-1 .svg-elem-27 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.92s both;
}

.effect-ver-1 .svg-elem-28 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 6.98s both;
}

.effect-ver-1 .svg-elem-29 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.04s both;
}

.effect-ver-1 .svg-elem-30 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.1s both;
}

.effect-ver-1 .svg-elem-31 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.16s both;
}

.effect-ver-1 .svg-elem-32 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.22s both;
}

.effect-ver-1 .svg-elem-33 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.28s both;
}

.effect-ver-1 .svg-elem-34 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.34s both;
}

.effect-ver-1 .svg-elem-35 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.4s both;
}

.effect-ver-1 .svg-elem-36 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.46s both;
}

.effect-ver-1 .svg-elem-37 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.52s both;
}

.effect-ver-1 .svg-elem-38 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.58s both;
}

.effect-ver-1 .svg-elem-39 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.64s both;
}

.effect-ver-1 .svg-elem-40 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.7s both;
}

.effect-ver-1 .svg-elem-41 {
  animation: animate-svg-fill-b 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) 7.78s both;
}

/* title animation v2 */
.effect-ver-2 .line-1,
.effect-ver-2 .line-2 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.5s both;
}
.effect-ver-2 .line-3 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 5.8s both;
}
/* 大学 */
.effect-ver-2 .line-2 .svg-elem-10,
.effect-ver-2 .line-2 .svg-elem-11 {
  animation: animate-svg-fill-w 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.5s both;
}

/* title animation v3 */
.effect-ver-3 .line-1,
.effect-ver-3 .line-2 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.5s both, animate-svg-up 3.0s ease 2.5s both;
}
.effect-ver-3 .line-3 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 5.8s both, animate-svg-up 3.0s ease 7.8s both;
}
/* 大学 */
.effect-ver-3 .line-2 .svg-elem-10,
.effect-ver-3 .line-2 .svg-elem-11 {
  animation: animate-svg-fill-w 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 1.5s both;
}

/* title animation v4 */
.effect-ver-4 .line-1,
.effect-ver-4 .line-2 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.3s both, animate-svg-up 3.0s ease 1.2s both;
}
.effect-ver-4 .line-3 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 4.7s both, animate-svg-up 2.8s ease 6.2s both;
}
/* 大学 */
.effect-ver-4 .line-2 .svg-elem-10,
.effect-ver-4 .line-2 .svg-elem-11 {
  animation: animate-svg-fill-w 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.3s both;
}

/* title animation v5 */
.effect-ver-5 .line-1,
.effect-ver-5 .line-2 {
  animation: animate-svg-fill-b 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.3s both, animate-svg-up 3.0s ease 1.2s both;
}
.effect-ver-5 .line-3 {
  animation: animate-svg-fill-b 2.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) 3.7s both, animate-svg-up 2.4s ease 5.2s both;
}
/* 大学 */
.effect-ver-5 .line-2 .svg-elem-10,
.effect-ver-5 .line-2 .svg-elem-11 {
  animation: animate-svg-fill-w 3.0s cubic-bezier(0.6, -0.28, 0.735, 0.045) 0.3s both;
}

#modal .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.5s ease both;
}

#modal .modal_content_inner {
  animation: fadeIn 0.75s ease 0.35s both;
}