body{
  background-color: #FFF;
  overflow-x: hidden;
}

.main {
  line-height: 1.8;
    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,游ゴシック Medium,YuGothic,YuGothicM,Hiragino Kaku Gothic ProN,メイリ
}
.main img{
  max-width: 100%;
}
.mvLower .mvLower__copy{
  font-size:4.4rem;
}

#intro{
  text-align: center;
  margin:4em 0;
}
#intro h2{
  font-size:36px;
  text-align:center;
  color:#40aeeb;
  line-height: 1.6;
  margin-bottom:0.7em;
}
#intro h2 img{
  margin-bottom:0.5em;
}

#intro p{
  font-size:16px;
  text-align: center;
  margin-top:2.5em;
  line-height: 2;
}

.reason__wave {
    position: relative;
    width: 100%;
    transform: scaleY(-1);
}
.reason__wave svg.-front {
    position: absolute;
    top: 0;
    left: 0;
}
.reason__wave .reason__waveFront {
    fill: url(#reasonGradientFront);
}
.reason__wave .reason__waveBack {
    fill: url(#reasonGradientBack);
}

#reason{
  background-color:#deeefa;
  padding:10em 0 10em 0;
}
#reason .flex{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width:890px;
  margin:0 auto;
}
#reason .flex div{
  font-size:16px;
  width:48.32%;
  line-height: 2;
}
#reason .flex div h3 span{
  font-size:22px;
  color:#00aeeb;
  margin-bottom:0.5em;
  display:inline-block;
  position:relative;
}
#reason .flex div h3 span:after{
  width:55%;
  right:-58%;
  top:50%;
  border-top:1px solid #40aeeb;
  content:"";
  position:absolute;
}
#reason .flex div h3 span:before{
  background:url(/images/athlete/icon_water.png) center center/1.09em no-repeat;
  width:1.09em;
  height: 1.54545em;
  right:-66%;
  top:0.1em;
  content:"";
  position:absolute;
}
#reason .flex .img{
  width:42.697%;
  position:relative;
  z-index: 1;
}
#reason .flex .img span{
  width:46.579%;
  position:absolute;
  right: -23%;
    bottom: -21%;
  animation:10s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.message__wave {
    position: relative;
    width: 100%;
}
.message__wave svg.-front {
    position: absolute;
    top: 0;
    left: 0;
}
.message__wave .message__waveFront {
    fill: url(#messageGradientFront);
}
.message__wave .message__waveBack {
    fill: url(#messageGradientBack);
}

#message{
  padding:10em 0 0em 0;
  text-align: center;
  margin-bottom:-20rem;
  position:relative;
  z-index:1;
}
#message .layout{
  position: relative;
}
#message .img01{
  position:absolute;
      left: -10%;
    top: -2%;
  width:29.397%;
  opacity:0;
  transition-duration: 1s;
}
#message .img02{
  position:absolute;
        left: -24%;
    top: 23.5%;
  width:25.173%;
  opacity:0;
  transition-duration: 1s;
}
#message .img03{
  position:absolute;
        right: -22%;
    top: 1%;
  width:32.931%;
  opacity:0;
  transition-duration: 1s;
}
#message .img04{
  position:absolute;
      right: -7%;
    top: 40%;
  width:25.173%;
  opacity:0;
  transition-duration: 1s;
}
#message.-show .img01{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
}
#message.-show .img02{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
#message.-show .img03{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
#message.-show .img04{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
@keyframes fadein{
  0%{ opacity:0;}
  100%{ opacity:1; }
}

#message h3{
  margin-bottom:4em;
}
#message h3 span{
  font-size:0.5em;
}
#message .img{
  font-size:12px;
  color:#4f4f4f;
  position: relative;
  z-index: 1;
}
#message .img img{
  margin-bottom:0.3em;
}
#message .img + p{
  font-size:16px;
  text-align: center;
  padding:3em 0;
  line-height: 2;
}
#message .name{
  font-size:30px;
  font-weight: bold;
  margin-bottom:1.5em;
}

#challenge{
  padding-top:5rem;
  margin-bottom:400px;
}
#challenge h3{
  text-align: center;
  margin-bottom:5rem;
}
#challenge h3 img{
  width:450px;
}
#challenge .layout{
  position: relative;
}
#challenge video{
  width:570px;
  margin:0 auto;
  display:block;
}
#challenge .img01{
      position: absolute;
    left: 50%;
    top: 0%;
    margin-left: -818px;
    opacity: 0;
    transition-duration: 1s;
}
#challenge .img02{
      position: absolute;
    right: 50%;
    top: 5%;
    margin-right: -818px;
    opacity: 0;
    transition-duration: 1s;
}
#challenge.-show .img01{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
}
#challenge.-show .img02{
  animation:1s linear fadein;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.profile__wave {
    position: relative;
    width: 100%;
    transform: scaleY(-1);
}
.profile__wave svg.-front {
    position: absolute;
    top: 0;
    left: 0;
}
.profile__wave .profile__waveFront {
    fill: url(#profileGradientFront);
}
.profile__wave .profile__waveBack {
    fill: url(#profileGradientBack);
}

.profile_title{
  text-align: center;
  margin-top:7em;
  position:relative;
  top:-650px;
}
.profile_title img{
  width:145px;
}


#profile{
  background-color: #deeefa;
  padding:10rem 0;
  position:relative;
  z-index:1;
}
#profile .flex{
  display:flex;
  justify-content:space-between;
}
#profile .flex > div{
  width:50%;
}
#profile .flex > div:last-child{
}
#profile .flex div .person{
  text-align: center;
  width:100%;
  position:relative;
      top: -640px;
    margin-bottom: -550px;
}

#profile .flex div .person img{
  width:185px;
}
#profile .flex div .person p{
  font-size:30px;
  font-weight: bold;
  line-height: 1.5;
  margin-top:0.5em;
  position:relative;
}
#profile .flex div .person.ani p:before{
  content:"兄";
  color:#FFF;
  font-size:0.7em;
  width:1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color:#00aeeb;
  display:flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  top:-0.5em;
  left:27%;
}
#profile .flex div .person.otouto p:before{
  content:"弟";
  color:#FFF;
  font-size:0.7em;
  width:1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color:#00aeeb;
  display:flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  top:-0.5em;
  left:23%;
}

#profile .flex div h3{
  color:#00aeeb;
  font-size:18px;
  font-weight: bold;
  margin-bottom:0.5em;
}
#profile .flex div h3 + p{
  font-size:14px;
  margin-bottom:1em;
  max-width:400px;
}
#profile .flex div table{
  margin-bottom:4em;
}
#profile .flex div table td{
  font-size:16px;
  padding-bottom:0.5em;
}
#profile .flex div table td:first-child{
  padding-right:2em;
}
#profile .flex div dt{
  font-size:14px;
}
#profile .flex div dd{
  margin-bottom:3rem;
}
#profile .flex div dd ul{
  padding-top:1em;
  padding-left:2em;
  font-size:14px;
  position:relative;
}
#profile .flex div dd ul:before{
  position:absolute;
  height: calc(100% - 4.5em);
  content: "";
  left:0.5em;
  top:0px;
  border-left:1px solid #FFF;
}
#profile .flex div dd ul.border_long:before{
  height: calc(100% - 2.8em);
}
#profile .flex div dd li{
  font-size:14px;
  position:relative;
}
#profile .flex div dd li:before{
  position:absolute;
  width:1.2em;
  content: "";
  left:-1.5em;
  top:0.8em;
  border-top:1px solid #FFF;
}
#profile .flex div dd li p{
  font-weight: bold;
  white-space: nowrap;
}

@media screen and (min-width: 768px) and (max-width: 1500px) {
  #intro h2{
    font-size:2.3vw;
  }
  #challenge {
    margin-bottom: 450px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1300px) {
  #challenge {
    margin-bottom: 500px;
  }
}



@media screen and (min-width: 768px) and (max-width: 1300px) {
#message .img01{
  position:absolute;
      left: -11vw;
        top: -2vw;
  width:29.397%;
}
#message .img02{
  position:absolute;
              left: -21vw;
    top: 19vw;
  width:25.173%;
}
#message .img03{
  position:absolute;
        right: -21vw;
    top: 1vw;
  width:32.931%;
}
#message .img04{
  position:absolute;
  right: -12vw;
        top: 33vw;
  width:25.173%;
}
  #intro p {
    font-size: 1.3vw;
}
  #reason .flex div {
    font-size: 1.3vw;
}
  #reason .flex div h3 span {
    font-size: 1.7vw;
}
  #reason .flex .img{
    margin-top:3vw;
  }
  #profile .flex div h3 {
    font-size: 1.4vw;
}
  #profile .flex div h3 + p {
    font-size: 1vw;
}
  #profile .flex div table td {
    font-size: 1vw;
}
  #profile .flex div table td img{
    width:2em;
  }
  #profile .flex div dt {
    font-size: 1vw;
}
  #profile .flex div dd ul{
    font-size: 1vw;
  }
  #profile .flex div dd li {
    font-size: 1vw;
    white-space: nowrap;
}
  #profile .flex div dd ul:before{
    font-size: 1vw;
  }
  #profile .flex div dd li:before{
    font-size: 1vw;
  }
  #profile .flex div .person p{
    font-size: 1.6vw;
  }
  
}


@media screen and (min-width: 768px) and (max-width: 1000px) {
  #challenge {
    margin-bottom: 550px;
  }
}


@media screen and (max-width: 767px) {
  
  #intro h2 {
    font-size: 5.5vw;
}
  #intro h2 img{
    width:1.3em;
  }
  #intro p{
    font-size:3.5vw;
    line-height: 2;
  }
  #reason .flex{
    display:block;
  }
  #reason .flex div{
    width:100%;
    font-size:3.5vw;
  }
  #reason .flex div h3 span {
    font-size: 5vw;
}
  #reason .flex div h3 span:after {
    width: 28%;
    right: -33%;
}
  #reason .flex div h3 span:before {
    right: -38%;
}
  #reason .flex .img {
    width: 90%;
    margin:8vw auto 10vw;
}
  
  #reason .flex .img span {
    right: -8%;
    bottom: -15%;
}
  
  #message .img01 {
    position: relative;
    left: -30%;
    top: auto;
    width: 49%;
}
  #message .img02 {
    position: relative;
    top: auto;
    width: 49%;
    left: -30%;
    margin-top:5vw;
}
  #message .img03 {
    width: 49%;
    right:0;
    top:-5vw;
}
  #message .img04 {
    width: 49%;
    right:0;
    top:70vw;
}
  
  #message h3{
    padding-top:29vw;
  }
  #message h3 img{
    width:39vw;
  }
  #message .img {
    font-size: 3vw;
}
  #message .img + p {
    font-size: 3.5vw;
    line-height: 2.5;
}
  #message .name {
    font-size: 7vw;
}
  #message .name + p img{
    width:68vw;
  }
  #challenge{
    margin-bottom:120vw;
  }
  #challenge h3 img {
    width: 100%;
}
  #challenge .img01 {
    position: relative;
    left: auto;
    top: auto;
    opacity:1!important;
    margin-left: -7.2rem;
}
  #challenge .img02 {
    position: relative;
    top: auto;
    right: -7.8rem;
    opacity:1!important;
}
  #challenge video {
    width: 101vw;
    margin: 7vw 0 7vw -3.3rem;
}
  .profile__wave {
    margin-bottom:-21vw;
}
  .profile_title {
    margin-top: 0;
    top: -100vw;
}
  .profile_title img{
    width:40%;
  }
  #profile {
    padding: 0;
    background:none;
}
  #profile .layout {
    padding-left: 0;
    padding-right: 0;
}
  #profile .flex{
    display:block;
  }
  #profile .flex > div {
    background-color: #deeefa;
        padding-left: 3.2rem;
    padding-right: 3.2rem;
    width: 100%;
    margin-bottom:12vw;
}
  #profile .flex > div:last-child {
    padding-bottom:10vw;
    margin-bottom:0px;
}
  #profile .flex > div:first-child{
    margin-bottom:107vw;
  }
  #profile .flex div h3 {
    font-size: 4vw;
}
  #profile .flex div h3 + p {
    font-size: 3.5vw;
    max-width: 100%;
}
  #profile .flex div dt {
    font-size: 3.5vw;
}
  #profile .flex div dd ul {
    font-size: 3.5vw;
}
  #profile .flex div dd ul li {
    font-size: 3.5vw;
}
  #profile .flex div .person {
    top: -90vw;
    margin-bottom: -68vw;
}
  #profile .flex div .person img {
    width: 50%;
}
  #profile .flex div .person p {
    font-size: 8vw;
}
  #profile .flex div .person.ani p:before {
    left: 22%;
}
  #profile .flex div .person.otouto p:before {
    left:18%;
}
  #profile .flex div table td {
    font-size: 3.5vw;
}
#profile .flex div dd li p {
    white-space:normal;
}
  #profile .flex div .wave_wrap{
    margin-left: -3.2rem;
    position: relative;
    bottom: -9vw;
    margin-right: -3.2rem;
  }
  #profile .flex div .wave_wrap.top{
    bottom:auto;
    top:-9vw;
  }
  #profile .flex div .wave_wrap.top .profile__wave {
    margin-bottom: -8vw;
}
  
 #profile .flex div dd ul.year_2022:before {
    height: calc(100% - 6.5em);
}
  #profile .flex div dd ul.border_long:before {
    height: calc(100% - 2.8em);
}
  
  
}