@charset "UTF-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1em;
  color: #4d444a;
  line-height: 1.4;
  background-color: #f1eee7;
}

.bg_second {
  background-color: #cde2e1;
}

.width_L {
  max-width: 620px;
  /*border: solid 1px yellow;*/
}
.width_S {
  width: 380px;
  /*border: solid 1px yellow;*/
}

h2 {
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.4em;
  text-align: center;
  border-bottom: dotted 1px #4d444a;
}
h3 {
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  padding-bottom: 8px;
}
h4 {
  font-size: 1.4em;
  font-weight: 300;
  padding: 4px 8px;
  margin: 4px;
  text-align: center;
  border-radius: 4px;
  color: #660000;
}
h5 {
  font-size: 1.2em;
  font-weight: 300;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 8px;
  transition-duration: 0.2s; /*アニメーション時間*/
  color: #660000;
}
p {
  padding: 8px 0px;
  line-height: 1.6em;
}
video {
  min-height: 120px;
  max-height: 260px;
  /*枠線を消す*/
  outline: none;
  border: none;
  margin: 12px auto;
  padding: 0;
}
.a, a:link, a:visited {
  text-decoration: none;
  color: #660000;
}
.sp_br {
  display: none;
}
@media screen and (max-width: 570px) {
  .sp_br {
    display: block;
  }
}

/* ★━━━━━━━━━━━━ ヘッダ━━━━━━━━━━━━★ */
header {
  position: relative;
  height: 80px;
  background-color: #cde2e1;
  display: flex;
  flex-flow: row wrap;
  justify-content:space-around;
  margin: 0 auto;
  }
header> h1 {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  text-align: center;
  margin: 16px;
  width: 80%;
}
header> img {
  position: absolute;
  right: 8px;
  height: 48px;
  margin: 12px;
}
@media (max-width: 400px) {
  header> img {
    right: 8px;
    height: 36px;
    margin: 0px;
  }
}

/* ★━━━━━━━━━━━━ コンテナ ━━━━━━━━━━━━★ */
.container_section {
  margin: 16px;
}
.container_row {
  /*横並び中央揃え*/
  display: flex;
  flex-flow: row wrap;
  max-width: 1240px;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  /*border: solid 1px yellow;*/
}
.teacher,.tools {
  position: absolute;
  left: -30px;
  top: 20px;
  height: 260px;
}
@media (max-width: 620px) {
  .teacher, .tools {
    display: none; /*イラストを消す*/
  }
}

/* ★━━━━━━━━━━━━ セクション ━━━━━━━━━━━━★ */
.section_title {
  font-size: 1.4em;
  font-weight: 300;
  margin: 8px;
  text-align: center;
  border-radius: 4px;
  }
.section_item {
  padding: 0;
}
.section_item_base {
  position:relative;
  border-radius: 4px;
  padding: 2px;
  margin: 16px;
  /*border: solid 1px blue;*/
}
.section_item_base_exp {
  padding: 5px 10%;
}
.section_item2 {
  display: flex;
  flex-flow: column wrap;
  /*min-width: 500px;*/
  padding: 20px;
  margin: 16px;
  background-color: #fcfaf9;
}
.section_item2 img {
  max-height: 240px;
  object-fit: contain;
  margin: 0 auto;
}
.section_item2 video {
  height: 260px;
}
.line{
  background-repeat: no-repeat;
  background-size:cover;
  background-image: url(../img/line2.svg);
  height: 40px ;
  width: 80%;
  margin: 0 auto;
}

@media (max-width: 440px) {

}

/* ★━━━━━━━━━━━━ ボタン ━━━━━━━━━━━━★ */
.select_item {
  background-color: #ffebd8;
}
.select_item::before {
  content: '\f0ae';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
}
.select_book {
  background-color: #ffebd8;
}
.select_book::before {
  content: '\f518';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
}

/* ★━━━━━━━━━━━━ 効果 ━━━━━━━━━━━━★ */
.shadow {
  box-shadow: rgba(97, 93, 92, 0.25) 0px 6px 12px -2px, rgba(100, 90, 90, 0.3) 0px 3px 7px -3px;
  /*box-shadow: 0 20px 15px -15px hsla(0, 0%, 17%, 0.5);*/
}
.scale:hover {
  transform: scale(1.02,1.02); /*拡大率 X方向、Y方向*/
  transition-duration: 0.3s; /*アニメーション時間*/
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

  /* ★━━━━━━━━━━━━ フッタ ━━━━━━━━━━━━★ */
footer {
  margin: 24px auto;
  width: 80%;
  font-size: small;
}
footer > p {
  text-align: center;
  padding: 16px;
}