@charset "UTF-8";
@import url("global.css");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap");
#introduction {
  overflow: hidden;
}
#introduction .wrapper {
  display: flex;
  justify-content: space-between;
}
#introduction .main {
  width: 50%;
  padding: 50px 5vw 0 0;
  flex-shrink: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#introduction .main .catch {
  margin-bottom: 50px;
}
#introduction .main .catch > p {
  font-size: clamp(18px, 2.1vw, 24px);
}
#introduction .main .text {
  text-align: justify;
}
#introduction .main .text > p + p {
  margin-top: 1em;
}
#introduction .ph {
  margin-right: calc( ( 100vw - 1200px ) / 2 * -1 );
  width: 100%;
  aspect-ratio: 1.86 / 1;
  overflow: hidden;
}

#sec_concept.section {
  margin-block: 160px 120px;
  width: 100%;
  padding-block: 100px 70px;
  overflow: hidden;
  clip-path: inset(0);
}
#sec_concept.section .wrapper {
  position: relative;
  display: flex;
}
#sec_concept.section .textarea {
  flex-shrink: 0;
  padding-right: 3vw;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #FFF;
}
#sec_concept.section .textarea .titlebox .sec_title span {
  display: block;
  line-height: 1.4;
}
#sec_concept.section .textarea .titlebox .sec_title .en {
  color: #A2A2A2;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: .94em;
}
#sec_concept.section .textarea .titlebox .sec_title .ja {
  font-size: clamp(22px, 2.8vw, 42px);
}
#sec_concept.section .textarea .titlebox .dezao {
  margin-top: 10px;
  font-family: "Libre Baskerville", serif;
  font-size: 11px;
}
#sec_concept.section .textarea .text {
  margin-top: 50px;
  text-align: justify;
}
#sec_concept.section .textarea .text > p + p {
  margin-top: 1.2em;
}
#sec_concept.section .imgbox {
  margin-right: calc( ( ( 100vw - 1200px ) / 2 - ( 100vw - 1600px ) / 2 ) * -1 );
  width: 100%;
}
#sec_concept.section .imgbox .img1, #sec_concept.section .imgbox .img2 {
  overflow: hidden;
}
#sec_concept.section .imgbox .img1 {
  width: 78.8%;
  aspect-ratio: 1.46 / 1;
}
#sec_concept.section .imgbox .img2 {
  margin: 50px 0 0 auto;
  width: 48.5%;
  aspect-ratio: 1.52 / 1;
}
#sec_concept.section .bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
}
#sec_concept.section .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: #1D1D1D;
  opacity: .7;
}

.toggle_main ul.books_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 20px;
}
form#mailformpro .toggle_main ul.books_list li label.mfp_checked {
  background-color: #F6F6F6;
  padding: 20px 25px;
  text-decoration: none;
}
form#mailformpro .toggle_main ul.books_list li label, form#mailformpro .toggle_main ul.books_list li label.mfp_not_checked {
  border: #E1E1E1 solid 1px;
  padding: 20px 25px;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form#mailformpro .toggle_main ul.books_list li label::before, form#mailformpro .toggle_main ul.books_list li label.mfp_not_checked::before {
  border-color: #D6D6D6;
  margin-top: 0;
  top: -5px;
  left: -9px;
}
form#mailformpro .toggle_main ul.books_list li label::after, form#mailformpro .toggle_main ul.books_list li label.mfp_not_checked::after {
  margin-top: 0;
  top: -5px;
  left: 0;
}
.toggle_main ul.books_list li .img {
  width: fit-content;
  margin: 0 auto 5px;
}
.toggle_main ul.books_list li p {
  line-height: 1.4;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.toggle_main ul.books_list li p.title {
  margin-bottom: 5px;
}
.toggle_main ul.books_list li p.comment {
  font-size: .875em;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  #sec_concept.section .imgbox {
    margin-right: -25px;
  }

  .toggle_main ul.books_list {
    gap: 20px 15px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .sptabnone {
    display: none;
  }

  #introduction .main {
    padding: 20px 3vw 25px 0;
  }
  #introduction .main .catch {
    margin-bottom: 30px;
  }
  #introduction .ph {
    margin-right: -50px;
    aspect-ratio: auto;
  }
  #introduction .ph figure {
    height: 100%;
  }

  #sec_concept.section {
    margin-block: 120px 90px;
    padding-block: 80px;
  }
  #sec_concept.section .textarea {
    padding-right: 1vw;
  }
  #sec_concept.section .textarea .text {
    margin-top: 40px;
  }
  #sec_concept.section .imgbox {
    margin-right: -20px;
  }
  #sec_concept.section .imgbox .img1 {
    width: 92%;
  }
  #sec_concept.section .imgbox .img2 {
    width: 76%;
  }

  .toggle_main ul.books_list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #introduction .wrapper {
    align-items: flex-end;
  }
  #introduction .main {
    width: 56%;
    padding: 0 4vw 0 0;
  }
  #introduction .main .catch {
    margin-bottom: 25px;
  }
  #introduction .ph {
    margin-right: -5vw;
    aspect-ratio: 1.86 / 1;
  }

  #sec_concept.section {
    margin-block: 65px 50px;
    padding-block: 50px;
  }
  #sec_concept.section .wrapper {
    display: block;
  }
  #sec_concept.section .textarea {
    padding: 0 0 30px;
  }
  #sec_concept.section .textarea .text {
    margin-top: 35px;
  }
  #sec_concept.section .textarea .text > p + p {
    margin-top: 1em;
  }
  #sec_concept.section .imgbox {
    margin-right: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  #sec_concept.section .imgbox .img1 {
    width: 55%;
    margin-bottom: 60px;
  }
  #sec_concept.section .imgbox .img2 {
    margin: 0;
    width: 40%;
  }

  .toggle_main ul.books_list {
    grid-template-columns: repeat(2, 1fr);
  }
  form#mailformpro .toggle_main ul.books_list li label.mfp_checked {
    padding: 15px 20px;
  }
  form#mailformpro .toggle_main ul.books_list li label, form#mailformpro .toggle_main ul.books_list li label.mfp_not_checked {
    padding: 15px 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #introduction .wrapper {
    display: block;
  }
  #introduction .main {
    width: 100%;
    padding: 0 0 30px;
  }
  #introduction .main .catch {
    margin-bottom: 20px;
  }
  #introduction .ph {
    width: auto;
    margin-inline: -5vw;
  }

  #sec_concept.section {
    margin-block: 0 45px;
    padding-block: 35px;
  }
  #sec_concept.section .textarea .text {
    margin-top: 30px;
  }
  #sec_concept.section .imgbox .img1 {
    margin-bottom: 40px;
  }

  .toggle_main ul.books_list {
    grid-template-columns: repeat(1, 1fr);
  }
}