@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　success-graduate
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl._type02 h1 .ja {
	line-height: 1.2;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav-area
-----------------------------------------------------------------*/
.page-nav-area{
	padding: 90px 0 120px;
}
.page-nav{
	justify-content: space-between;
	max-width: 1010px;
  width: 100%;
	margin-inline: auto;
}
.page-nav li{
	max-width: 230px;
	width: calc((100% - 30px)/4);
}


/* interview-movie
-----------------------------------------------------------------*/
.interview-movie {
  margin-bottom: 120px;
}
.interview-movie .movie-box{
  display: flex;
  background-color: var(--green);
  border-radius: 10px;
  padding: 40px;
}
.interview-movie .movie-box .img01{
  margin-right: 3%;
  width: 45%;
}
.interview-movie .movie-box .img02{
  width: 29%;
  margin-right: 3%;
}
.interview-movie .movie-box .txt-area{
  width: 20%;
}
.interview-movie .movie-box .txt-area .in{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  max-width: 190px;
  width: 76%;
  margin-right: auto;
  margin-left: auto;
}
.interview-movie .movie-box .txt-area div h2 .ja{
  line-height: 1.6;
}
.interview-movie .btn-view-more .symbol::after{
  background: var(--beige) !important;
}

.interview-movie .movie-box{
  position: relative;
}
.interview-movie .movie-box a{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  justify-content: flex-end;
  padding-top: 17%;
  padding-right: 80px;
}


/* graduate
-----------------------------------------------------------------*/
.graduate{
  padding: 160px 0;
  overflow: hidden;
  background: var(--beige);  
}
.graduate .layout-box{
  align-items: flex-start;  
}
.graduate .pic-main{
  position: relative;
  max-width: 601px;
  width: 46.24%;  
}
.graduate .pic-main .ico{
  position: absolute;
  right: 0;
  transform: translateX(65%);
  top: -106px;
  width: 306px;  
}
.graduate .pic-main .ico span{
  display: inline-block;
  animation: rotation 35s linear infinite running;  
}
.graduate .txt-area{
  width: 43.08%;  
}
.graduate .txt-area .name{
  display: flex;
  align-self: center;
  flex-wrap: wrap;
  margin-bottom: 35px;  
}
.graduate .txt-area .name .division{
  margin-right: 15px;
  padding: 8px 14px;
  border-radius: 100vmax;
  background:  var(--light);
  font-size:min(0.85vw,1.3rem);
  line-height: 1;
}
.graduate .txt-area .name .division::before{
  display: inline-block;
  margin-right: 3px;
  content: "●";
  color: var(--cat01);
  transform: scale(.6);  
}
.graduate02 .txt-area .name .division::before{ color: var(--cat02); }
.graduate03 .txt-area .name .division::before{ color: var(--cat03); }
.graduate .txt-area .name .hash{
  font-size:min(0.91vw,1.4rem);
}
.graduate .txt-area .name strong{
  display: block;
  width: 100%;
  margin-top: 5px;
  font-weight: normal;
  font-size:min(1.04vw,1.6rem);
}
.graduate.graduate01 .layout-box,
.graduate.graduate03 .layout-box{
  flex-direction: row-reverse;  
}
.graduate.graduate02{
  background: var(--green);  
}
.graduate.graduate02 .pic-main .ico{
  right: auto;
  left: 0;
  transform: translateX(-65%); 
}
.graduate .txt-area h3{
  margin-bottom: 40px;
  line-height: 1.6;
  font-size:min(2.28vw,3.5rem);
}
.graduate .txt-area .txt{
  font-size:min(1.04vw,1.6rem);
  text-align: justify;
}
.graduate .txt-area .pic{
  position: relative;
  width: fit-content;
  margin: 50px auto 0;
}
.graduate .txt-area .pic::before{
  position: absolute;
  left: -0.33vw;
  top: 0;
  transform: scale(.98, .98) rotate(-5deg);
  display: block;
  width: 103%;
  height: 100%;
  border-radius: 10px;
  content: "";
  background: var(--green);   
}
.graduate.graduate02 .txt-area .pic::before{
  background: var(--beige);
}
.graduate .txt-area .pic span{
  position: relative;  
}


/* future
-----------------------------------------------------------------*/
.future{
  padding: 160px 0;  
}
.future .pic{
  width: 44.6vw;  
}
.future .txt-area{
  width: 55.4%;  
}
.future .txt-area-inner{
  max-width: 700px;
  padding: 0 20px;
  margin-inline: auto;
}
.future h2 + .note{
  margin-bottom: 60px;
  text-align: center;  
}
.future .sort-nav{
  justify-content: center; 
  margin-bottom: 50px; 
}
.future .sort-nav .comingsoon{
	pointer-events: none;
	opacity: .5;
}
.tab-cont + .tab-cont{
  display: none;
}
.future .tab-cont dl > div:nth-child(n+2){
  margin-top: 50px;  
}
.future .tab-cont dl dt{
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  letter-spacing: .05em;
  line-height: 1;   
}
.future .tab-cont dl dt .num{
  flex-shrink: 0;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #ccc;
  font-size:min(2.08vw,3.2rem);
  color: var(--green);
  font-family: "Gilda Display", serif;  
}
.future .tab-cont dl dt .ttl{
  font-size:min(1.5vw,2.3rem);
  line-height: 1.4;  
}
.future .tab-cont dl dd{
  font-size:min(1.04vw,1.6rem);
  line-height: 1.5;
  text-align: justify;
}
.future .tab-cont dl dd ul li:nth-child(n+2){
  margin-top: 5px; 
}
.future .tab-cont .btn-view-more{
	width: fit-content;
	margin: 60px 0 0 auto;
}






























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

.page-ttl._type02 h1 .ja {
   line-height: 1.3;
}

/* page-nav-area
-----------------------------------------------------------------*/
  .page-nav-area{
    padding: 0 0 80px;
  }
  .page-nav{
    flex-wrap: wrap;
    max-width: none;
  }
  .page-nav li{
    max-width: none;
    width: calc(50% - 10px);
  }
  .page-nav li:nth-child(n+3){
    margin-top: 20px; 
  }
  

/* interview-movie
-----------------------------------------------------------------*/
.interview-movie{
  margin-bottom: 80px;
}
.interview-movie .movie-box{
  padding: 20px;
  flex-direction: column;
}
.interview-movie .movie-box .img01{
  margin-right: 0;
  width: 100%;
}
.interview-movie .movie-box .img02{
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.interview-movie .movie-box .txt-area{
  width: 100%;
}
.interview-movie .movie-box .txt-area .in{
  width: 100%;
  max-width: 800px;
}
.interview-movie .movie-box .txt-area .in .btn-view-more{
  margin-left: auto;
}
.interview-movie .movie-box a{
  justify-content: flex-end;
  padding-top: 0;
  padding-right: 20px;
  align-items: end;
  padding-bottom: 21px;
}


/* graduate
-----------------------------------------------------------------*/
  .graduate{
    padding: 110px 0;
  }
  .graduate .layout-box{
    display: block;  
  }
  .graduate .txt-area{
    width: 100%;
  }
  .graduate .pic-main{
    max-width: none;
    width: 100%;
    margin-bottom: 40px;  
  }
  .graduate .pic-main .ico{
    right: 0;
    transform: translateX(55%);
    top: -90px;
    width: 180px;  
  }
  .graduate .txt-area{
    width: 100%;  
  }
  .graduate .txt-area .name{
    align-items: center;
    margin-bottom: 25px;  
  }
  .graduate .txt-area .name .division{
    padding: 8px 12px;
    font-size: 1.2rem;
  }
  .graduate .txt-area .name .hash{
    font-size: 1.2rem;
  }
  .graduate .txt-area .name strong{
    font-size: 1.4rem;
  }
  .graduate.graduate02 .pic-main .ico{
    right: auto;
    left: 0;
    transform: translateX(-55%); 
  }
  .graduate .txt-area h3{
    margin-bottom: 30px;
    font-size: 2rem;
  }
  .graduate .txt-area .txt{
    font-size: 1.4rem;
  }
  .graduate .txt-area .pic{
    margin: 60px auto 0;
  }


/* future
-----------------------------------------------------------------*/
  .future{
    padding: 110px 0;  
  }
  .future  .layout-box{
    display: block;
  }
  .future .pic{
    width: 100%;
    margin-bottom: 80px;
  }
  .future .txt-area{
    width: 100%;  
  }
  .future .txt-area-inner{
    max-width: none;
  }
  .future h2 + .note{
    margin-bottom: 50px; 
    font-size: 1.1rem; 
  }
  .future .sort-nav{
    margin-bottom: 30px; 
  }
  .future .tab-cont dl > div:nth-child(n+2){
    margin-top: 30px;  
  }
  .future .tab-cont dl dt{
    align-items: center;
    margin-bottom: 20px;  
  }
  .future .tab-cont dl dt .num{
     padding-right: 10px;
    margin-right: 10px;
    font-size: 2.6rem; 
  }
  .future .tab-cont dl dt .ttl{
    font-size: 1.8rem;
  }
  .future .tab-cont dl dd{
    font-size: 1.2rem;
  }
  .future .tab-cont dl dd ul li:nth-child(n+2){
    margin-top: 5px; 
  }
	.future .tab-cont .btn-view-more{
		margin: 30px 0 0 auto;
	}



}