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_b.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .gaku_back_b{
    background-image: url("../img/gaku_back_bm.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 40px;
  } 
}

/* トップ */
.section_instructor_top {
  width: 100%;
  position: relative;
}
  
.instructor_top_img_inner {
  width: 100%;
}
  
.instructor_top_copy_inner {
  width: 50%;
  max-width: 530px;
  position: absolute;
  top: 11%;
  left: 12%;
}

.instructor_top_copy_school {
  display: block;
  width: 27%;
  height: auto;
}

.instructor_top_copy_title {
  color: #032bf7;
  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;
}
  
.instructor_top_copy_head_wrap {
  margin-top: 3%;
  width: 100%;
  display: flex;
}

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

.instructor_top_copy_head_bg {
  display: block;
  width: 70%;
  height: auto;
  width: 300px;
}
  
.instructor_top_copy_head {
  color: #fff;
  font-size: 26px; /* 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%);
}
  
.instructor_top_copy_head_r {
  font-weight: 400;
}

@media (max-width: 768px) {
  .instructor_top_copy_school {
    width: 40%;
  }
  .instructor_top_copy_head_bg {
    display: block;
    height: auto;
    width: 160px;
  }
  .instructor_top_copy_inner {
    top: 20%;
  }

}

  /* 塾長あいさつ */

.principal {
  margin-top: 10%;
}
.principal_a {
  padding-top: 15%;
}
.instructor_box {
  border: 2px solid #f3f0e8;
  margin: 8% 0;
  padding: 10% 3% 0 3%;
  border-radius: 20px;
  background-color:rgba(255,255,255,0.8);
}
.principal_photo {
  width: 70%;
  margin: auto;
}
.principal_greeting {
  text-align: center;
}
.principal_greeting h2 {
  color: var(--e-blue);
  font-weight: 700;
  font-size: 1.8rem;
  padding-top: 10%;
}
.principal_greeting p{
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 2; 
}
.principal_voice_wrap {
  text-align: center;
  margin: 8% auto 15% auto;
}
.principal_voice {
  margin:2% auto;
  font-size: 0.9rem;
  line-height: 2; 
}
@media (max-width: 768px) {
  .principal_photo {
      width: 90%;
  }
  .principal_voice {
      padding-top: 5%;
      text-align: left;
  }
}

/* 講師紹介 */

#instructor div.instructor_box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.instructor_introduction {
  width: calc(30% - 4px);
  margin-bottom: 10%;
}
.instructor_photo {
  position: relative;
}
.instructor_photo img{
	object-fit:cover;
	border-radius:50%;
}
.instructor_movie {
  width: 27%;
  height: 27%;
  color: #000;
  background-color: #fff100;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  
  position: absolute;
  top: 78%;
  left: 67%;
}
.instructor_name {
  font-weight: 500;
  font-size: 1.1rem;
  padding: 1% 0;
}
.instructor_line {
  font-weight: 400;
  font-size: 0.6rem;
  border-bottom: 1px solid #00a6e8;
  padding-bottom: 0.1em;
  margin-bottom: 1em;
}
.instructor_voice {
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
}

@media (max-width: 768px) {
  #instructor div.instructor_box ul {
    flex-direction: column;
  }  
  .instructor_introduction {
    box-sizing: border-box;
    width: 100%;
    margin-left:0;
    margin-right: 0;
  }
  .instructor_s {
    margin-bottom: 20%;
  }
  .instructor_line {
    font-weight: 400;
    font-size: 0.8em;
  }
  .instructor_voice {
    font-weight: 400;
    font-size: 1.0rem;
    position: relative;
    margin-bottom: 10%;
  }
}

/* 文章開閉 */

div.instructor_voice .grad-btn {
  margin: -48px auto 0 auto;
  padding: 0.2em 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%;
}
.instructor_voice .grad-btn:hover {
  opacity: 0.6;
}

.instructor_voice .grad-btn::before {
  color: #fff;
  content: "続きを読む "
}
.instructor_voice .grad-item {
  position: relative;
  overflow: hidden;
  height: calc( 1.5em * 10 );
  line-height: 1.5;
  margin-bottom: 20%;
}

.instructor_voice .grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;

}
.instructor_voice .grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.instructor_voice .grad-trigger:checked ~ .grad-btn {
  bottom: -2em;
}
.instructor_voice .grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.instructor_voice .grad-trigger:checked ~ .grad-btn .fa {
  transform: rotate(180deg);
}
.instructor_voice .grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.instructor_voice .grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.mangaViewer {
  height: 90%;
  width: auto;
  box-sizing: border-box;
  padding: 15px;
}

.mangaViewer .closeButton {
  width: 20px;
  height: 20px;
}

.mangaViewer .closeButton::before {
  font-size: 22px;
}

.mangaViewer video {
  height: 100%;
}

@media (max-width: 768px) {
  .mangaViewer {
    height: 90%;
    width: 90%;
    justify-content: center;
    align-items: center;
  }
  .mangaViewer video {
    width: 100%;
    height: 100%;
  }
}