/* 背景 */

.mark{
    background:linear-gradient(transparent 60%, #fff500 60%);
}
main picture img {
    display: block;
    width: 100%;
    height: auto;
}
img {
    vertical-align: bottom;
    border: none;
    max-width: 100%;
}
.gaku_back_b {
  background-image: url("../img/gaku_back_p.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .gaku_back_b{
    background-image: url("../img/gaku_back_pm1.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 40px;
  } 
}


#splash3 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 999;
  transition: opacity 1s;
  background-color: #fff;
  overflow: hidden;
}
#splash3 picture {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/koe/splash3.jpg);
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s;
  opacity: 0;
}

@media (max-width: 768px) {
  #splash3 picture {
    background-image: url(../img/koe/splash3_m.jpg);
  }
}

.noScroll {
  overflow: hidden;
}


/* トップ */
.section_koe_top {
  width: 100%;
  position: relative;
}

.koe_top_img_inner {
  width: 100%;
}

.koe_top_copy_inner {
  width: 50%;
  max-width: 530px;
  position: absolute;
  top: 13%;
  left: 17%;
}

.koe_top_copy_school {
  display: block;
  width: 55%;
  height: auto;
}

.koe_top_copy_title {
  color: #ff0095;
  font-size: 32px; /* IE対策 */
  font-size: clamp(16px, 2.9vw, 34px);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  margin-top: 3%;
  text-align: left;
}

.koe_top_copy_head_wrap {
  margin-top: 3%;
  width: 100%;
  display: flex;
}

.koe_top_copy_head_box {
  position: relative;
}
.koe_top_copy_head_box.sp{
  display: none;
}

.koe_top_copy_head_bg {
  display: block;
  width: 100%;
  height: auto;
}

.koe_top_copy_head {
  color: #fff;
  font-size: 24px; /* IE対策 */
  font-size: clamp(13px, 2.2vw, 28px);
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.koe_top_copy_head_r {
  font-weight: 400;
}

@media (max-width: 768px) {
  .about_top_copy_head_bg {
    display: block;
    height: auto;
    width: 130px;
  }
}


/* 合格者インタビュー*/
section#toudai,
section#igakubu{
  padding: 40px 40px;
  margin-top: 100px;
  background: rgba(255,255,255,0.8);
  border: 2px solid #f3f0e8;
  border-radius: 20px;
  
}

section#toudai h2,
section#igakubu h2{
  background: #ff0095;
  border-radius: 20px;
  color:#fff;
  padding: 10px 0;
}


section#toudai.name,
section#toudai.title,
section#toudai.comment,
section#igakubu.name{
  text-align: center;
  width:50%;
}

.half,.toudai_bottom{
  display: flex;
  margin:0 auto;
  padding:40px;
  
}
.toudai_bottom{
  align-items: center;
  margin:0 auto;
}

.half>div{
  width: 50%;
}

.name{
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  letter-spacing: 2px;
}

.name p i {
  color: var(--e-pink);
  padding: 0 10px;
}

.name span:not(.school_name) {
  font-size: 150%;
}

.comment{
  text-align: center;
  padding-top:40px;
  line-height: 1.6;
}

.comment h4 {
  margin-top: 1em;
}

.comment p {
  text-align: justify;
}

h3{
  color: #F29600;
  font-size: 120%;
}
.name img{
  width:20%;
  padding:10px;
}



/* 東大合格*/
.beaf{
  background: rgba(228, 228, 228, 0.8);
  text-align: center;
  width: 90%;
  padding:20px 0;
  font-size: 120%;
  line-height: 2;
  margin: 0 auto;
}

.beaf img {
  width: 130px;
  margin: 0 auto;
}

.triangle:after {
  content: "";
  display: block;
  margin: 20px auto;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #F29600;
}

.beaf .no1 {
  font-size: 150%;
  color: var(--e-pink);
  font-weight: 900;
  text-decoration: underline wavy;
}

.title{
  margin-top: 20px;
}

.btn_box h3{
  color: #F29600;
  font-size: 110%;
}

.btn_box a{
  background: #F29600;
  color: white;
  font-size: 120%;
  font-weight: bold;
  display: flex;
  border-radius: 20px;
  width: max(180px, 30%);
  margin:20px auto;
  justify-content: center;
  text-decoration: none;
  padding: 20px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

.iframe {
  margin-left: 20px;
  margin-right: 20px;
  width: calc(100%/2.2);
  padding-top: calc(56.25%/2.2);
  position: relative;
  text-align: center;
}

.iframe iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video video{
  max-width: 100%;
}
.movie {
  width:60%;
  text-align: center;
  margin:20px auto;
}

@media (max-width: 768px) {
  .half,.toudai_bottom{
    flex-direction: column;
    padding:20px 0;
    margin:0 auto;
  }
  .half>div{
    width: 90%;  
  }
  .name {
    font-size: 90%;
  }
  .comment{
    width:100%;
    text-align: center;
  }
  .beaf{
    background: rgba(228, 228, 228, 0.8);
    text-align: center;
    width: 100%;
    padding:20px 0;
    margin: 20px auto;
  }
  .video{
    width:100%;
    text-align: center;
  }
  
  .iframe {
    margin: 20px auto;
    width: calc(100%/1.2);
    padding-top: calc(56.25%/1.2);
  } 
  .movie {
    width:80%;
    text-align: center;
    margin:0 auto;
    padding:10% 0;
  }
  section#toudai h2,
  section#igakubu h2{
  font-size:70%;
}

}

  /* 受講生・合格者からの喜びの声続々 */

#student h2.principal_a{
  background-color:#ff0095;
  color:#FFF;
  border-radius: 20px;
  width: 80%;
  margin:20px auto;
  justify-content: center;
  padding:10px 20px;
}
.student_line {
  font-weight: 400;
  color:#F29600;
  border-bottom: 2px solid #00a6e8;
  padding-bottom: 0.1em;
  margin-bottom: 1em;
}
.student_box ul li{
    border: 2px solid #f3f0e8;
    margin: 5% 0;
    padding: 5% 3%;
    border-radius: 20px;
    background-color: rgba(255,255,255,0.8);
    min-height: 695px;
}
#student div.student_box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  align-items: flex-start;
}

.student_photo {
  margin-bottom: 20px;
}

div.student_box p {
  margin: 1em 0;
}

.student_introduction {
  width: calc(26% - 4px);
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
picture img {
  display: block;
  width: 100%;
  height: auto;
}
img {
  vertical-align: bottom;
  border: none;
  max-width: 100%;
}

@media (max-width: 768px) {
  #student div.student_box ul {
    flex-direction: column;
  }  
  .student_introduction {
    box-sizing: border-box;
    width: 100%;
    margin-left:0;
    margin-right: 0;
  }
  .student_s {
    margin-bottom: 20%;
  }
  .student_line {
    font-weight: 400;
    font-size: 0.8em;
  }
  .student_voice {
    font-weight: 400;
    font-size: 1.0rem;
    position: relative;
    margin-bottom: 10%;
  }
  
}
  /* 続きを読むボタン */

div.student_voice .grad-btn {
  margin: -13px auto 0 auto;
  padding: 0.8em 1em;
  border-radius: 10px;
  background: #ff0095;
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
  display: block;
  width: 30%;
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.student_voice .grad-btn:hover {
  opacity: 0.6;
}
.student_voice .grad-btn::before {
  color: #fff;
  content: "続きを読む"
}
.student_voice .grad-item {
  position: relative;
  overflow: hidden;
  height: calc( 1.6em * 10 );
  line-height: 1.5;
  margin-bottom: 20%; /*隠した状態の高さ*/
}
.student_voice .grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /*グラデーションで隠す高さ*/
  content: "";
}
.student_voice .grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.student_voice .grad-trigger:checked ~ .grad-btn {
  bottom: -2em;
}
.student_voice .grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.student_voice .grad-trigger:checked ~ .grad-btn .fa {
  transform: rotate(180deg);
}
.student_voice .grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.student_voice .grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

  /* 動画 */
  .video{
    text-align: center;
  }