@charset "UTF-8";
/* カラー */
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* フルワイド */
h1 {
  text-align: center;
}

.bg_style {
  position: relative;
}
.bg_style::before {
  position: absolute;
  content: "";
  background-image: url(../../../common/images/bg/ring_blue.svg), url(../../../common/images/bg/square_tate_yellow.svg), url(../../../common/images/bg/circle_yellow.svg), url(../../../common/images/bg/square_yoko_white.svg), url(../../../common/images/bg/ring_blue2.svg), url(../../../common/images/bg/square_tate_yellow.svg), url(../../../common/images/bg/ring_blue.svg), url(../../../common/images/bg/circle_yellow.svg), url(../../../common/images/bg/ring_white2.svg), url(../../../common/images/bg/ring_white.svg), url(../../../common/images/bg/ring_yellow.svg), url(../../../common/images/bg/square_yoko_blue.svg);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top 460px left -10%, top 1000px right 2%, top 1530px left 23%, top 1830px left 5%, top 2030px right -8%, top 2570px right 19%, top 2530px left 15%, top 3400px right -6%, top 3400px left -3%, top 4200px right 7%, top 5040px left -6%, top 5500px right -4%;
  background-size: 422px, 165px, 214px, 320px, 520px, 165px, 270px, 375px, 460px, 510px, 390px, 320px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media all and (max-width: 1600px) {
  .bg_style::before {
    background-position: top 560px left -10%, top 1000px right 2%, top 1530px left 23%, top 1830px left 5%, top 1970px right -8%, top 2570px right 19%, top 2530px left -3%, top 3400px right -6%, top 3400px left -3%, top 4200px right -3%, top 5040px left -6%, top 5500px right -4%;
  }
}
@media all and (max-width: 1367px) {
  .bg_style::before {
    background-size: 330px, 165px, 214px, 320px, 400px, 165px, 270px, 300px, 360px, 400px, 390px, 320px;
  }
}
@media all and (max-width: 1025px) {
  .bg_style::before {
    background-image: none;
  }
}

@media all and (max-width: 480px) {
  .inner.sp100 {
    width: 100%;
  }
}

.intro {
  padding: 50px 0;
}
@media all and (max-width: 896px) {
  .intro {
    padding: 25px 0 50px;
  }
}
.intro .titleTxt {
  color: #565C6A;
  font-size: 2rem;
  text-align: center;
}
@media all and (max-width: 896px) {
  .intro .titleTxt {
    font-size: 1.6rem;
    text-align: left;
  }
}

.teacher__box {
  display: grid;
  grid-template-columns: 42% 55%;
  grid-template-areas: "item1 item3" "item2 item3";
  background: #ecf4f9;
  gap: 0 3%;
  padding: 25px;
  margin-bottom: 40px;
  align-items: stretch;
}
@media all and (max-width: 896px) {
  .teacher__box {
    grid-template-columns: 100%;
    grid-template-areas: "item1" "item3" "item2";
    padding: 15px;
  }
}
@media all and (max-width: 480px) {
  .teacher__box {
    margin-bottom: 25px;
  }
}
.teacher__box.yellow {
  background: #FFFAE2;
}
.teacher__box .item1 {
  grid-area: item1;
}
.teacher__box .item2 {
  grid-area: item2;
}
@media all and (max-width: 896px) {
  .teacher__box .item2 {
    margin-top: 20px;
  }
}
.teacher__box .item3 {
  grid-area: item3;
}
@media all and (max-width: 896px) {
  .teacher__box .item3 {
    margin-top: 20px;
  }
}
.teacher__info {
  display: flex;
  align-items: center;
  gap: 25px;
}
@media all and (max-width: 896px) {
  .teacher__info {
    justify-content: center;
  }
}
@media all and (max-width: 480px) {
  .teacher__info {
    gap: 15px;
  }
}
@media (width < 361px) {
  .teacher__info {
    gap: 10px;
  }
}
.teacher__info dt {
  max-width: 180px;
}
@media all and (max-width: 896px) {
  .teacher__info dt {
    max-width: 200px;
  }
}
@media all and (max-width: 480px) {
  .teacher__info dt {
    max-width: 130px;
  }
}
.teacher__info dt img {
  border-radius: 100vmax;
}
.teacher__number {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #005EAE;
}
@media all and (max-width: 480px) {
  .teacher__number {
    font-size: 1.7rem;
  }
}
.teacher__number span.underLine {
  background: linear-gradient(transparent 55%, #ffe600 55%);
}
.teacher__number span.large {
  font-size: 4rem;
  margin-left: 0.2em;
  font-style: italic;
}
@media all and (max-width: 480px) {
  .teacher__number span.large {
    font-size: 3rem;
  }
}
.teacher__belong {
  font-size: 1.5rem;
  line-height: 1.6;
}
@media all and (max-width: 480px) {
  .teacher__belong {
    font-size: 1.4rem;
  }
}
.teacher__name {
  font-weight: 700;
  font-size: 3.5rem;
  margin-top: -5px;
}
@media all and (max-width: 480px) {
  .teacher__name {
    font-size: 2.5rem;
  }
}
.teacher__interview a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 5px;
  border: 3px solid #00a2ee;
  border-radius: 8px;
  background: #fff;
}
@media all and (max-width: 480px) {
  .teacher__interview a {
    gap: 10px;
    border: 2px solid #00a2ee;
  }
}
.teacher__interview a:hover {
  background: #005EAE;
  border-color: #005EAE;
  opacity: 1;
}
.teacher__interview a:hover .teacher__interview-ttl, .teacher__interview a:hover .teacher__interview-link {
  color: #fff;
}
.teacher__interview a:hover .teacher__interview-link::before {
  background-color: #fff;
}
.teacher__interview-txt {
  padding: 8px 0 8px 8px;
  width: 65%;
}
@media all and (max-width: 896px) {
  .teacher__interview-txt {
    width: 79%;
  }
}
@media all and (max-width: 480px) {
  .teacher__interview-txt {
    width: 72%;
  }
}
.teacher__interview-ttl {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #00a2ee;
  word-break: keep-all;
}
@media all and (max-width: 480px) {
  .teacher__interview-ttl {
    font-size: 1.6rem;
  }
}
.teacher__interview-link {
  position: relative;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 6px;
  padding: 3px 0 0 1em;
  border-top: 1px solid #ecf4f9;
}
@media all and (max-width: 480px) {
  .teacher__interview-link {
    font-size: 1.4rem;
  }
}
.teacher__interview-link::before {
  position: absolute;
  content: "";
  top: 60%;
  transform: translateY(-50%);
  left: 0;
  width: 10px;
  height: 12px;
  background-color: #000;
  clip-path: polygon(10px 50%, 0% 0%, 0% 12px);
}
.teacher__interview-img {
  width: 35%;
}
@media all and (max-width: 896px) {
  .teacher__interview-img {
    width: 21%;
  }
}
@media all and (max-width: 480px) {
  .teacher__interview-img {
    width: 28%;
  }
}
.teacher__interview-img img {
  width: 100%;
  max-width: 150px;
  border-radius: 6px;
}
@media all and (max-width: 480px) {
  .teacher__interview-img img {
    max-width: 110px;
  }
}
.teacher__movie {
  width: 100%;
  text-align: center;
  overflow: hidden;
  padding: 15px 0;
  background: #fff;
}

.slideBox {
  position: relative;
}
.slideBox iframe {
  aspect-ratio: 16/9;
  width: 85%;
  height: auto;
}
@media all and (max-width: 480px) {
  .slideBox iframe {
    width: 83%;
  }
}
.slideBox .prev {
  position: absolute;
  left: 15px;
  top: 55%;
  transform: translateY(-50%) rotate(180deg);
  width: 15px;
  cursor: pointer;
  z-index: 1;
}
@media all and (max-width: 480px) {
  .slideBox .prev {
    top: 57%;
    left: 10px;
    width: 12px;
  }
}
.slideBox .next {
  position: absolute;
  right: 15px;
  top: 55%;
  transform: translateY(-50%);
  width: 15px;
  cursor: pointer;
  z-index: 1;
}
@media all and (max-width: 480px) {
  .slideBox .next {
    top: 57%;
    right: 10px;
    width: 12px;
  }
}
.slideBox p {
  margin-bottom: 8px;
  font-size: 2rem;
}
@media all and (max-width: 480px) {
  .slideBox p {
    font-size: 1.7rem;
  }
}
.slideBox .arrow.slick-disabled {
  opacity: 0.2;
}
.slideBox .slick-list {
  overflow: visible;
}

.cvArea {
  margin-top: 80px;
}
@media all and (max-width: 480px) {
  .cvArea {
    margin-top: 40px;
  }
}