@charset "UTF-8";

/****
 common
 ****/

.flex_column .left_box,
.flex_column .right_box{
  border-left: 2px solid #36A5F5;
  width: 46%;
  position: relative;
}

@media screen and (max-width: 768px){
  .flex_column .left_box,
  .flex_column .right_box{
    border-left: 2px solid #36A5F5;
    width: 100%;
  }
}

.flex_column .left_box{
  padding-top: 17rem;
}

@media screen and (max-width: 768px){
  .flex_column .left_box{
    padding-top: 0;
  }
}

.flex_column .right_box{
  margin-top: 30rem;
  padding-bottom: 6rem;
}

@media screen and (max-width: 768px){
  .flex_column .right_box{
    margin-top: 0;
    padding-bottom: 0;
  }
}

.flex_column img{
  max-width: 100%;
  width: 100%;
}

.flex_column .box_content img{
  display: block;
  margin-top: 3rem;
}

@media screen and (min-width: 769px){
  .flex_column .box_content img{
    margin-top: 2rem;
  }
}

@media screen and (min-width: 769px){
  .box_title .inner{
    padding-bottom: 9.6rem;
  }
}

.read{
  margin-right: auto;
  position: absolute;
  left: 0;
  top: -18rem;
  max-width: 750px;
  width: 100%;
}

@media screen and (max-width: 768px){
  .read{
    position: relative;
    left: inherit;
    top: inherit;
    padding: 4rem 0;
  }
}

.box_content{
  margin-bottom: 6rem;
  padding-left: 4rem;
  position: relative;
}

@media screen and (min-width: 769px){
  .left_box .box_content:last-child{
    margin-bottom: 0
  }
}


.box_content h3{
  align-items: center;
  display: flex;
  margin-bottom: 0;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: .05rem;
  padding-left: 11rem;
  position: relative;
  min-height: 63px;
}


@media screen and (max-width: 768px){
  .box_content h3{
    display: block;
    font-size: 2.8rem;
    padding: 8.5rem 0 0 0;
    min-height: inherit;
    letter-spacing: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
   .box_content h3{
     font-size: 2.7vw;
     padding-left: 10vw;
   }
}

.box_content h3 span{
  display: inline-block;
  vertical-align: middle;
  line-height: 1.25;
}

.box_content h3 span.num{
  color: #36A5F5;
  font-family: 'Barlow', sans-serif;
  font-size: 8rem;
  font-weight: 600;
/*  margin-right: 2.5rem; */
  line-height: .8;
  position: absolute;
  left: 0;
  top: 0;
}

@media screen and (max-width: 768px){
  .box_content h3 span.num{
    display: block;
/*    margin-bottom: 2rem; */
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
  .box_content h3 span.num{
    font-size: 7.5vw;
    margin-right: 2vw;
  }
}

/****
main visual
 ****/

.main_visual{
  position: relative;
}

@media screen and (max-width: 768px){
  .main_visual{
    background: url('../images/top/bg_main_sp.jpg') no-repeat 0 center / cover;
  }
  .main_visual::after{
    background: url('../images/top/tx_main_sp.svg') no-repeat center center / auto 95%;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 15%;
    z-index: 0;
  }
  .main_visual::before{
    background:#36A5F5;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 15%;
    z-index: 0;
  }
}

.main_visual h1{
  color: #223999;
  font-size: 8.8rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 5rem;
}

@media screen and (max-width: 540px){
  .main_visual h1{
    font-size: 12vw; /*4.4rem;*/
    margin-bottom: 2.5vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
  .main_visual h1{
    font-size: 10vw;
    margin-bottom: 3vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 1124px){
  .main_visual h1{
    font-size: 6.15vw;
    margin-bottom: 1.5vw;
  }
}


.main_visual p{
  color: #223999;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 540px){
  .main_visual p{
    font-size: 3.5vw; /*1.2rem*/
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
 .main_visual p{
    font-size: 2.75vw;
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
  .main_visual p{
    font-size: 2.25vw;
  }
}

.main_visual ul{
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  max-width: 290px;
}
@media screen and (max-width: 768px){
  .main_visual ul{
    max-width: 43vw;
  }
}

.main_visual ul li{
  background: #223999;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  width: calc(calc( 100% / 4) - 1px);
  padding: 1rem;
}

@media screen and (max-width: 768px){
 .main_visual ul li{
    font-size: 2vw;
    padding: .5rem .75rem .5rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
 .main_visual ul li{
    font-size: 1.95vw;
    padding: .75rem .75rem 1rem;
  }
}
.main_visual ul li.sub{
  font-size: 2.2rem;
  font-weight: 500;
  margin-bottom: 1px;
  padding: .75rem 1.25rem 1rem 1.25rem;
  width: 100%;
}


@media screen and (max-width: 540px){
  .main_visual ul li.sub{
    font-size: 3vw; /*1.2rem*/
    padding: .25rem 1rem .45rem;
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
 .main_visual ul li.sub{
    font-size: 2.5vw;
    padding: .35rem 1rem .5rem;
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
  .main_visual ul li.sub{
    font-size: 2.1vw;
  }
}

.main_visual strong{
  display: block;
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: .75rem;
  line-height: 1;
  margin: .35rem 0 1rem;
}

@media screen and (max-width: 540px){
  .main_visual strong{
    font-size: 8vw; /* 2.4rem */
    letter-spacing: .25rem;
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
  .main_visual strong{
    font-size: 6vw;
  }
}

@media screen and (max-width: 768px){
  .main_visual strong{
    margin-top: 1.5vw;
  }
}

@media screen and (min-width: 769px) and (max-width: 1124px){
  .main_visual strong{
    font-size: 4.6vw;
    margin-top: 1vw;
  }
}

.main_visual--images{
  flex-wrap: wrap;
}

@media screen and (max-width: 768px){
  .main_visual--images{
    display: block;
  }
}

.main_visual--images img{
  height: auto;
  max-width: 100%;
  width: 100%;
}

.images--main{
  order: 2;
  position: relative;
  width: 80.77%;
}

@media screen and (max-width: 768px){
  .images--main{
    min-height: -webkit-fill-available;
    min-height: calc( 100vh - 52px );
    min-height: calc( 100dvh - 52px );
    width: 100%;
  }
}

@media screen and (max-width: 540px){
  .images--main img{
    right: 0;
    width: 85vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
  .images--main img{
    right: -5%;
    width: 80%;
  }
}


@media screen and (max-width: 768px){
  .images--main img{
    position: absolute;
    bottom: 0;
  }
}

.images--main .inner{
  left: 8rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/*

@media screen and (max-width: 540px){
  .images--main .inner{
    left: 20vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 768px){
  .images--main .inner{
    left: 20vw;
  }
}
*/

@media screen and (max-width: 768px){
  .images--main .inner{
    transform: translateY(0);/*-85%*/
    top: 5%;
    left: 20vw;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px){
  .images--main .inner{
    left: 8vw;
  }
}

.images--side{
  order: 1;
  width: 19.23%;
}

@media screen and (max-width: 768px){
  .images--side{
    display: none;
  }
}

/****
greeting
 ****/
.greeting_box{
  padding: 7rem 0;
  position: relative;
}

@media screen and (max-width: 768px){
  .greeting_box{
    padding: 4rem 0;
  }
}

.greeting_box::before,
.greeting_box::after{
  content: '';
  position: absolute;
  top:0;
  height: 100%;
  z-index: 0;
}

.greeting_box::before{
  background-image: url('../images/top/bg_greeting.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  right: 0;
  width: 80.75%;
  width: calc( 100% - 19.25vw);
}
@media screen and (max-width: 768px){
  .greeting_box::before{
    background-image: url('../images/top/bg_greeting_sp.jpg');
    width: 85%;
  }
}

.greeting_box::after{
  background: #AFDBFB;
  left: 0;
  width: 19.25vw;
}

@media screen and (max-width: 768px){
  .greeting_box::after{
    width: 15%;
  }
}
.greeting_box h2{
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 2rem;
}


/****
profile
 ****/

#profile{
  padding: 10rem 0;
}

@media screen and (max-width: 768px){
  #profile{
    padding: 4rem 0 6rem;
  }
}

#profile .inner{
  max-width: 900px;
}

#profile h2{
  color: #36A5F5;
  font-size: 3.2rem;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: .25rem;
  text-align: center;
}

#profile h3{
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: .25rem;
  position: relative;
  text-align: center;
}

#profile h3 span{
  display: inline-block;
  background: #fff;
  padding: 1rem 2rem;
  position: relative;
  z-index: 1;
}

#profile h3::before{
  content: '';
  display: block;
  background: #36A5F5;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
}

#profile .left_image{
  position: absolute;
  left: -2rem;
  top: 0;
  max-width: 240px;
}
.profile_content{
  margin-left: auto;
  position: relative;
  max-width: 605px;
  width: 90%;
}

@media screen and (max-width: 768px){
  .profile_content{
    margin-right: auto;
    max-width: 100%;
    width: 95%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px){
  .profile_content{
    max-width: 60vw;
  }
}

.profile_content::before,
.profile_content::after{
  display: block;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
}

.profile_content::before{
  top: 0;
  left: 0;
  z-index: 1;
}

.profile_content::after{
  background: #D7EDFD;
  left: 2rem;
  top: 2rem;
  z-index: 0;
}

@media screen and (max-width: 768px){
  .profile_content::after{
    left: 1.5rem;
    top: 1.5rem;
  }
}

.profile_content p{
  margin-bottom: 2rem;
}

.profile_content p.small{
  font-size: 1.4rem;
}

.profile_content p span{
  color: #36A5F5;
}

.profile_content_inner{
  background: url('../images/top/icon_prof.svg') no-repeat 0 0 / 32px auto;
  background-color: #fff;
  padding: 2rem 3.5rem 3.5rem;
  position: relative;
  z-index: 5;
}

@media screen and (max-width: 768px){
  .profile_content_inner{
    background: url('../images/top/icon_prof.svg') no-repeat 1rem 1rem / 24px auto;
    background-color: #fff;
    padding: 3rem 2rem;
  }
}


@media screen and (max-width: 768px){
  .profile_content_inner .flex_column{
    display: block;
  }
}

.profile_content_inner .flex_column img.thum{
  max-width: 120px;
}

@media screen and (max-width: 768px){
  .profile_content_inner .flex_column img.thum{
    display: block;
    margin: 0 auto;
    max-width: 28vw;
  }
}

.profile_content_inner .flex_column p{
  padding-right: 2rem;
  width: calc( 100% - 120px );
}

@media screen and (max-width: 768px){
  .profile_content_inner .flex_column p{
    padding-right: 0;
    width: 100%;
  }
}

.profile_content_inner ul.flex_column {
  margin-top: 3rem;
}

@media screen and (max-width: 768px){
  .profile_content_inner ul.flex_column{
    width: 100%;
  }
  .profile_content_inner ul.flex_column::before {
    background: url('../images/top/img_prof_sp.jpg') no-repeat center 0 / contain;
    content: '';
    display: block;
    margin-bottom: 0;
    height: 53vw;
    width: 100%;
  }
}

.profile_content_inner .flex_column li{
  width: 48%;
}

@media screen and (max-width: 768px){
  .profile_content_inner .flex_column li{
    width: 100%;
  }
  .profile_content_inner .flex_column li:first-child{
    margin-bottom: 1.5rem;
  }
}

.profile_content_inner .flex_column li a:hover{
  opacity: .7;
}
.profile_content_inner .flex_column li a{
  background: url('../images/common/icon_arrow_w.svg') no-repeat 95% center / 21px auto;
  background-color: #36A5F5;
  color: #fff;
  display: block;
  font-weight: 600;
  text-align: center;
  padding: 2rem;
}


/****
results
 ****/
.results{
  overflow: hidden;
}
.results .box_title::before{
  background-image: url('../images/top/bg_results.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (max-width: 450px){
  .results .box_title::before{
  background-image: url('../images/top/bg_results_sp.jpg');
  }
}

.results .box_content{
  background: url('../images/common/tag_results.svg') no-repeat 0 0 / 24px auto;
}

.results .flex_column{
  padding-bottom: 16rem;
}
@media screen and (max-width: 768px){
  .results .flex_column{
    padding-bottom: 1rem;
  }
}

.results .flex_column .right_box {
  margin-top: 36rem;
}

@media screen and (max-width: 768px){
  .results .flex_column .right_box{
    margin-top: 0;
  }
}
.results .flex_column .right_box::before{
  background: #36A5F5;
  content: '';
  height: 100%;
  position: absolute;
  left: -2px;
  top: 100%;
  width: 2px;
}


/****
visions
 ****/
.visions .box_title::before{
  background-image: url('../images/top/bg_visions.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@media screen and (max-width: 450px){
  .visions .box_title::before{
  background-image: url('../images/top/bg_visions_sp.jpg');
  }
}

@media screen and (max-width: 450px){
  .visions .box_title p{
    bottom: -26rem;
  }
}

@media screen and (min-width: 451px) and (max-width: 590px){
  .visions .box_title p{
    bottom: -20rem;
  }
}

@media screen and (min-width: 591px) and (max-width: 768px){
  .visions .box_title p{
    bottom: -17rem;
  }
}

@media screen and (max-width: 768px){
  .visions .box_title p{
    left: 0;
    position: absolute;
    width: 100%;
  }
}


.visions .box_content{
  background: url('../images/common/tag_visions.svg') no-repeat 0 0 / 24px auto;
}



/***
 * movie 
 ***/

.movie_box {
  padding: 12.5rem 0 10rem;
  position: relative;
}

@media screen and (max-width: 768px){
  .movie_box {
    padding: 6rem 0 8rem;
  }
}
.movie_box::before{
  background: #36A5F5;
  content: '';
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 19.25vw;
  z-index: 1;
}

@media screen and (max-width: 768px){
  .movie_box::before{
    width: 15vw;
  }
}

.movie_box::after{
  background: #d7edfd;
  content: '';
  right: 15%;
  height: calc( 100% - 26rem);
  position: absolute;
  top: 16.5rem;
  width: calc( 100% - 15%);
  z-index: -1;
}


@media screen and (min-width: 1337px) and (max-width: 1480px){
  .movie_box::after{
    right: 10%;
  }
}

@media screen and (min-width: 1237px) and (max-width: 1336px){
  .movie_box::after{
    right: 8%;
  }
}
@media screen and (min-width: 1125px) and (max-width: 1237px){
  .movie_box::after{
    right: 5%;
  }
}
@media screen and (min-width: 981px) and (max-width: 1124px){
  .movie_box::after{
    right: 2.5%;
  }
}
@media screen and (min-width: 769px) and (max-width: 980px){
  .movie_box::after{
    right: 2.5%;
  }
}

@media screen and (max-width: 768px){
  .movie_box::after{
    height: calc( 100% - 25rem);
    right: inherit;
    left: 15vw;
    top: 18rem;
    width: calc( calc( 100% - 15vw) - 2.5%);
  }
}

@media screen and (max-width: 540px){
  .movie_box::after{
    height: calc( 100% - 23rem);
    top: 15.5rem;
  }
}

.movie_box .youtube_movie{
  margin: 0 auto;
  height: auto;
  position: relative;
  width: 100%;
  z-index: 10;
}

.movie_box .youtube_movie a{
  color: #000;
  display: block;
  position: relative;
}

.youtube_movie--images{
  background: #f5f5f5;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  z-index: 2;
}

.movie_box .youtube_movie .youtube_movie--images::before{
  background: url('../images/top/btn_play.svg') no-repeat center / contain;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.movie_box .youtube_movie img{
  display: block;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .5s ease-in-out;
  max-width: 100%;
  width: 100%;
}

.movie_box .youtube_movie a:hover img{
  max-width: 102.5%;
  width: 102.5%;
}

.movie_box .title{
  font-size: 2.8rem;
  font-weight: 600;
  margin: 1rem auto;
  line-height: 1.65;
  text-align: center;
  position: relative;
  z-index: 10;
}


@media screen and (min-width: 769px) and (max-width: 980px){
  .movie_box .title{
    font-size: 2.2rem;
    width: 80%;
  }
}

@media screen and (max-width: 768px){
  .movie_box .title{
    font-size: 1.6rem;
    line-height: 1.5;
    width: 75%;
  }
}

.btn_click{
  position: absolute;
  left: 5rem;
  top: -6.5rem;
  width: 128px;
  z-index: 20;
}

.btn_click img{
  height: auto;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 768px){
  .btn_click{
    display: block;
    margin: 0 auto;
    position: relative;
    top: inherit;
    left: inherit;
    margin-top: -17vw;
    width: 25vw;
  }
}


/***
 * link
 ***/

.link_box{
  background: #d7edfd;
  padding: 80px 0;
  position: relative;
}

@media screen and (max-width: 768px){
  .link_box {
    padding: 5rem 0;
  }
}


.link_box::before{
  background: #36A5F5;
  content: '';
  left: 0;
  height: 100%;
  position: absolute;
  top: 0;
  width: 19.25vw;
  z-index: 0;
}

@media screen and (max-width: 768px){
  .link_box::before{
    width: 15vw;
  }
}

.link_box .inner{
  background: #fff;
  position: relative;
  z-index: 10;
}
/*
.link_box .flex_column{
  align-items: stretch;
  padding: 3rem 1.5rem;
}

@media screen and (max-width: 768px){
  .link_box .flex_column{
    display: block;
    padding: 3rem 1.5rem 2rem;
  }
}
*/

.link_box h2{
  margin: 0 auto;
  padding: 4rem 0 3rem;
  position: relative;
  max-width: 457px;
  width: 90%;
}

@media screen and (max-width: 768px){
  .link_box h2{
    padding: 2rem 0 1.5rem;
  }
}

.link_box h2 a{
  display: block;
}

.link_box h2 a:hover{
  opacity: .5;
}

.link_box h2 img{
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

@media screen and (min-width: 769px) and (max-width: 980px){
  .link_box h2 img{
    width: 80%;
  }
}

.link_box ul.relate_link li:not(:last-child)::after{
  background: #36a5f5;
  content: '';
  display: inline-block;
  height: 100%;
  position: absolute;
  right: -.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li:nth-child(4n)::after{
    display: none;
  }
}

.link_box ul.relate_link {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
  height: 56px;
  padding: 3rem 1rem;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link {
    padding: 2rem 0 1rem;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }
}

.link_box ul.relate_link li{
  position: relative;
  width: calc( 100% / 7);
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li{
    margin-bottom: 1.25rem;
    width: calc( 100% / 4);
    height: 44px;
  }
}

.link_box ul.relate_link li a{
  align-items: center;
  height: 100%;
  display: flex;
  justify-content: center;
}


.link_box ul.relate_link li a:hover{
  opacity: .5;
}

.link_box ul.relate_link li img{
  display: block;
  margin: 0 auto;
  width: 44px;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li img{
    width: 32px;
  }
}

.link_box ul.relate_link li.icon_x img{
  width: 33px;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li.icon_x img{
    width: 25px;
  }
}
.link_box ul.relate_link li.icon_insta img{
  width: 38px;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li.icon_insta img{
    width: 28px;
  }
}

.link_box ul.relate_link li.icon_note img{
  width: 32px;
}

@media screen and (max-width: 768px){
  .link_box ul.relate_link li.icon_note img{
    width: 24px;
  }
}


.about_link{
  align-items: center;
  border-bottom: 1.25px solid #36a5f5;
  border-top: 1.25px solid #36a5f5;
  display: flex;
  justify-content: space-between;
  padding: 2rem;
}

@media screen and (max-width: 768px){
  .about_link{
    display: block;
    padding: 2rem;
  }

}

.about_link li{
  width: 49%;
}

@media screen and (max-width: 768px){
  .about_link li:first-child{
    margin-bottom: 1rem;
  }
  .about_link li{
    width: 100%;
  }
}


.about_link li a{
  align-items: center;
  background: #36a5f5;
  color: #fff;
  display: flex;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  justify-content: flex-start;
  margin: 0;
  padding: 0 2rem;
  position: relative;
  height: 95px;
}

@media screen and (max-width: 768px){
  .about_link li a{
    font-size: 2rem;
    padding: 0 2rem;
    height: 95px;
  }
}

.about_link li a:hover{
  background: #68BCF7;
}

.about_link li a::after{
  background: url('../images/common/icon_arrow_w.svg') no-repeat center / contain;
  content: '';
  display: block;
  height: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  width: 25px;
}