@charset "UTF-8";
/*-- 全ページ共通 -------------------------------------------------*/
.contents {
  position: relative;
  margin-inline: auto;
  padding: 20px 20px 10px 20px;
  max-width: 1200px;
  overflow: hidden;
  /*-- 全ページ共通 > コンテンツ内 > 部屋（チャンネル）のご紹介 --*/
  /*-- 全ページ共通 > コンテンツ内 > 部屋（チャンネル）のご紹介 >  --*/
  /*-- よくある質問 --*/
  /*-- アコーディオンメニュー --*/
}
.contents.of_initial {
  overflow: initial;
}
.contents.cando {
  padding-bottom: 100px;
}
.contents.cando.channel {
  position: relative;
  width: 100%;
  padding-bottom: 50px;
  /*-- 奇数番目 --*/
}
.contents.cando.channel.pc_cando_comment {
  margin-top: -50px;
  padding-bottom: 200px;
}
@media (max-width: 767px) {
  .contents.cando.channel.pc_cando_comment {
    padding-bottom: 10px;
  }
}
.contents.cando.channel .images {
  max-width: 913px;
  float: right;
}
@media (max-width: 767px) {
  .contents.cando.channel .images {
    float: initial;
  }
}
.contents.cando.channel:nth-child(odd) .images {
  float: left;
}
@media (max-width: 767px) {
  .contents.cando.channel:nth-child(odd) .images {
    float: initial;
  }
}
.contents.cando.channel::after {
  content: "";
  clear: both;
}
@media (max-width: 1060px) {
  .contents.cando.channel {
    max-width: 100%;
  }
}
.contents.cando.channel .images {
  position: relative;
}
.contents.cando.channel .btn_link-small_none {
  cursor: pointer;
}
.contents.cando.channel .channel_btn_1 {
  top: 0;
  left: 30%;
  position: absolute;
}
@media (max-width: 767px) {
  .contents.cando.channel .channel_btn_1 {
    margin-top: 30px;
  }
}
.contents.cando.channel .channel_btn_2 {
  top: 10%;
  left: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_3 {
  top: 10%;
  left: 40%;
  position: absolute;
}
@media (max-width: 767px) {
  .contents.cando.channel .channel_btn_3 {
    margin-top: 30px;
  }
}
.contents.cando.channel .channel_btn_4 {
  bottom: 10%;
  right: 30%;
  position: absolute;
}
.contents.cando.channel .channel_btn_5 {
  top: 10%;
  right: 0%;
  position: absolute;
}
@media (max-width: 767px) {
  .contents.cando.channel .channel_btn_5 {
    margin-top: 30px;
  }
}
.contents.cando.channel .channel_btn_6 {
  top: 30%;
  left: 10%;
  position: absolute;
}
.contents.cando.channel .channel_btn_7 {
  top: 10%;
  right: 30%;
  position: absolute;
}
.contents.cando.channel .channel_btn_8 {
  bottom: 20%;
  left: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_9 {
  bottom: 25%;
  right: 15%;
  position: absolute;
}
.contents.cando.channel .channel_btn_10 {
  top: 20%;
  left: 0%;
  position: absolute;
}
@media (max-width: 767px) {
  .contents.cando.channel .channel_btn_10 {
    margin-top: 30px;
  }
}
.contents.cando.channel .channel_btn_11 {
  top: 20%;
  right: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_12 {
  bottom: 10%;
  right: 30%;
  position: absolute;
}
.contents.cando.channel .channel_btn_13 {
  top: 15%;
  left: 13%;
  position: absolute;
}
@media (max-width: 767px) {
  .contents.cando.channel .channel_btn_13 {
    margin-top: 30px;
  }
}
.contents.cando.channel .channel_btn_14 {
  bottom: 10%;
  left: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_15 {
  bottom: 30%;
  right: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_16 {
  bottom: 10%;
  left: 0%;
  position: absolute;
}
.contents.cando.channel .channel_btn_17 {
  top: 20%;
  left: 30%;
  position: absolute;
}
.contents.cando.channel .channel_btn_18 {
  bottom: 30%;
  right: 20%;
  position: absolute;
}
.contents.cando.channel .channel_btn_19 {
  top: 10%;
  right: 10%;
  position: absolute;
}
@media (max-width: 760px) {
  .contents.cando.channel .channel_btn_1,
  .contents.cando.channel .channel_btn_2,
  .contents.cando.channel .channel_btn_3,
  .contents.cando.channel .channel_btn_4,
  .contents.cando.channel .channel_btn_5,
  .contents.cando.channel .channel_btn_6,
  .contents.cando.channel .channel_btn_7,
  .contents.cando.channel .channel_btn_8,
  .contents.cando.channel .channel_btn_9,
  .contents.cando.channel .channel_btn_10,
  .contents.cando.channel .channel_btn_11,
  .contents.cando.channel .channel_btn_12,
  .contents.cando.channel .channel_btn_13,
  .contents.cando.channel .channel_btn_14,
  .contents.cando.channel .channel_btn_15,
  .contents.cando.channel .channel_btn_16,
  .contents.cando.channel .channel_btn_17,
  .contents.cando.channel .channel_btn_18,
  .contents.cando.channel .channel_btn_19 {
    top: initial;
    left: initial;
    bottom: 0;
    right: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 0;
  }
  .contents.cando.channel .channel_btn_1 .btn_link-small_none,
  .contents.cando.channel .channel_btn_2 .btn_link-small_none,
  .contents.cando.channel .channel_btn_3 .btn_link-small_none,
  .contents.cando.channel .channel_btn_4 .btn_link-small_none,
  .contents.cando.channel .channel_btn_5 .btn_link-small_none,
  .contents.cando.channel .channel_btn_6 .btn_link-small_none,
  .contents.cando.channel .channel_btn_7 .btn_link-small_none,
  .contents.cando.channel .channel_btn_8 .btn_link-small_none,
  .contents.cando.channel .channel_btn_9 .btn_link-small_none,
  .contents.cando.channel .channel_btn_10 .btn_link-small_none,
  .contents.cando.channel .channel_btn_11 .btn_link-small_none,
  .contents.cando.channel .channel_btn_12 .btn_link-small_none,
  .contents.cando.channel .channel_btn_13 .btn_link-small_none,
  .contents.cando.channel .channel_btn_14 .btn_link-small_none,
  .contents.cando.channel .channel_btn_15 .btn_link-small_none,
  .contents.cando.channel .channel_btn_16 .btn_link-small_none,
  .contents.cando.channel .channel_btn_17 .btn_link-small_none,
  .contents.cando.channel .channel_btn_18 .btn_link-small_none,
  .contents.cando.channel .channel_btn_19 .btn_link-small_none {
    margin-top: 0;
  }
}
.contents.cando.channel .channel_kumo {
  position: absolute;
  width: 646px;
  height: 472px;
  background: url(../images/cando/channel_pop_kumo.webp) no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
  text-align: left;
  /*-- 日誌さん装飾部分 --*/
  margin-bottom: 50px;
}
@media (max-width: 760px) {
  .contents.cando.channel .channel_kumo {
    width: 100%;
    height: auto;
    padding: 20px 20px 100px 20px;
    width: calc(100% - 20px);
    background: #fff;
    border: 2px solid #0076b8;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
  }
}
.contents.cando.channel .channel_kumo:hover {
  cursor: pointer;
}
.contents.cando.channel .channel_kumo.kumo_box_left {
  left: 0;
}
.contents.cando.channel .channel_kumo.kumo_box_left-top {
  left: 0;
  top: 0 !important;
}
.contents.cando.channel .channel_kumo.kumo_box_left-bottom {
  top: initial !important;
  left: 0;
  bottom: 0 !important;
}
.contents.cando.channel .channel_kumo.kumo_box_right {
  right: 0;
}
.contents.cando.channel .channel_kumo.kumo_box_right-bottom {
  top: initial !important;
  right: 0;
  bottom: 0 !important;
}
.contents.cando.channel .channel_kumo.kumo_box_right-top {
  right: 0;
  top: 0 !important;
}
.contents.cando.channel .channel_kumo .kumo_nissisan {
  position: absolute;
  bottom: -30px;
  left: 150px;
  width: 92px;
  height: 113px;
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
.contents.cando.channel .channel_kumo.kumo_right {
  background: url(../images/cando/channel_pop_kumo_right.webp) no-repeat;
  background-size: contain;
}
@media (max-width: 760px) {
  .contents.cando.channel .channel_kumo.kumo_right {
    width: calc(100% - 20px);
    background: #fff;
    border: 2px solid #0076b8;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
  }
}
.contents.cando.channel .channel_kumo.kumo_right .kumo_nissisan {
  position: absolute;
  bottom: -30px;
  right: 150px;
  left: initial;
  width: 92px;
  height: 113px;
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
.contents.cando.channel .channel_kumo.channel_1_kumo, .contents.cando.channel .channel_kumo.channel_2_kumo, .contents.cando.channel .channel_kumo.channel_3_kumo, .contents.cando.channel .channel_kumo.channel_4_kumo, .contents.cando.channel .channel_kumo.channel_5_kumo, .contents.cando.channel .channel_kumo.channel_6_kumo, .contents.cando.channel .channel_kumo.channel_7_kumo, .contents.cando.channel .channel_kumo.channel_8_kumo, .contents.cando.channel .channel_kumo.channel_9_kumo, .contents.cando.channel .channel_kumo.channel_10_kumo, .contents.cando.channel .channel_kumo.channel_11_kumo, .contents.cando.channel .channel_kumo.channel_12_kumo, .contents.cando.channel .channel_kumo.channel_13_kumo, .contents.cando.channel .channel_kumo.channel_14_kumo, .contents.cando.channel .channel_kumo.channel_15_kumo, .contents.cando.channel .channel_kumo.channel_16_kumo, .contents.cando.channel .channel_kumo.channel_17_kumo, .contents.cando.channel .channel_kumo.channel_18_kumo, .contents.cando.channel .channel_kumo.channel_19_kumo {
  top: 10%;
  right: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents.cando.channel .channel_kumo.channel_1_kumo h4, .contents.cando.channel .channel_kumo.channel_2_kumo h4, .contents.cando.channel .channel_kumo.channel_3_kumo h4, .contents.cando.channel .channel_kumo.channel_4_kumo h4, .contents.cando.channel .channel_kumo.channel_5_kumo h4, .contents.cando.channel .channel_kumo.channel_6_kumo h4, .contents.cando.channel .channel_kumo.channel_7_kumo h4, .contents.cando.channel .channel_kumo.channel_8_kumo h4, .contents.cando.channel .channel_kumo.channel_9_kumo h4, .contents.cando.channel .channel_kumo.channel_10_kumo h4, .contents.cando.channel .channel_kumo.channel_11_kumo h4, .contents.cando.channel .channel_kumo.channel_12_kumo h4, .contents.cando.channel .channel_kumo.channel_13_kumo h4, .contents.cando.channel .channel_kumo.channel_14_kumo h4, .contents.cando.channel .channel_kumo.channel_15_kumo h4, .contents.cando.channel .channel_kumo.channel_16_kumo h4, .contents.cando.channel .channel_kumo.channel_17_kumo h4, .contents.cando.channel .channel_kumo.channel_18_kumo h4, .contents.cando.channel .channel_kumo.channel_19_kumo h4 {
  font-size: 20px;
  font-weight: 700;
  color: #0076b8;
  margin-bottom: 15px;
}
.contents.cando.channel .channel_kumo.channel_1_kumo p, .contents.cando.channel .channel_kumo.channel_2_kumo p, .contents.cando.channel .channel_kumo.channel_3_kumo p, .contents.cando.channel .channel_kumo.channel_4_kumo p, .contents.cando.channel .channel_kumo.channel_5_kumo p, .contents.cando.channel .channel_kumo.channel_6_kumo p, .contents.cando.channel .channel_kumo.channel_7_kumo p, .contents.cando.channel .channel_kumo.channel_8_kumo p, .contents.cando.channel .channel_kumo.channel_9_kumo p, .contents.cando.channel .channel_kumo.channel_10_kumo p, .contents.cando.channel .channel_kumo.channel_11_kumo p, .contents.cando.channel .channel_kumo.channel_12_kumo p, .contents.cando.channel .channel_kumo.channel_13_kumo p, .contents.cando.channel .channel_kumo.channel_14_kumo p, .contents.cando.channel .channel_kumo.channel_15_kumo p, .contents.cando.channel .channel_kumo.channel_16_kumo p, .contents.cando.channel .channel_kumo.channel_17_kumo p, .contents.cando.channel .channel_kumo.channel_18_kumo p, .contents.cando.channel .channel_kumo.channel_19_kumo p {
  width: 450px;
  height: auto;
  color: #5d5d5d;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .contents.cando.channel .channel_kumo.channel_1_kumo p, .contents.cando.channel .channel_kumo.channel_2_kumo p, .contents.cando.channel .channel_kumo.channel_3_kumo p, .contents.cando.channel .channel_kumo.channel_4_kumo p, .contents.cando.channel .channel_kumo.channel_5_kumo p, .contents.cando.channel .channel_kumo.channel_6_kumo p, .contents.cando.channel .channel_kumo.channel_7_kumo p, .contents.cando.channel .channel_kumo.channel_8_kumo p, .contents.cando.channel .channel_kumo.channel_9_kumo p, .contents.cando.channel .channel_kumo.channel_10_kumo p, .contents.cando.channel .channel_kumo.channel_11_kumo p, .contents.cando.channel .channel_kumo.channel_12_kumo p, .contents.cando.channel .channel_kumo.channel_13_kumo p, .contents.cando.channel .channel_kumo.channel_14_kumo p, .contents.cando.channel .channel_kumo.channel_15_kumo p, .contents.cando.channel .channel_kumo.channel_16_kumo p, .contents.cando.channel .channel_kumo.channel_17_kumo p, .contents.cando.channel .channel_kumo.channel_18_kumo p, .contents.cando.channel .channel_kumo.channel_19_kumo p {
    width: 100%;
  }
}
.contents .br_mobile {
  display: none;
}
@media (max-width: 760px) {
  .contents .br_mobile {
    display: block;
  }
}
.contents .box_small {
  margin-top: 50px;
  position: relative;
  width: 700px;
  float: right;
}
@media (max-width: 760px) {
  .contents .box_small {
    margin-top: 30px;
    width: 100%;
    float: initial;
  }
}
.contents .box_small_yellow {
  position: absolute;
  background: rgba(241, 237, 196, 0.8);
  display: inline-block;
  padding: 30px 30px 50px 30px;
  border-radius: 3px;
}
@media (max-width: 760px) {
  .contents .box_small_yellow {
    padding: 30px;
    position: relative;
  }
}
.contents .box_small_yellow p {
  margin: 0;
  padding: 0;
}
.contents .box_small_blue {
  top: 90px;
  left: 100px;
  position: absolute;
  background: rgba(224, 246, 255, 0.8);
  display: inline-block;
  padding: 30px;
  border-radius: 3px;
}
@media (max-width: 760px) {
  .contents .box_small_blue {
    top: 0;
    left: 0;
    margin-top: 10px;
    position: relative;
  }
}
.contents .box_small_blue p {
  margin: 0;
  padding: 0;
}
.contents.qa {
  padding: 0;
}
.contents.qa .qa_box {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}
@media (max-width: 760px) {
  .contents.qa .qa_box {
    margin-top: 30px;
  }
}
.contents.qa .qa_people {
  margin-right: 30px;
}
@media (max-width: 760px) {
  .contents.qa .qa_people {
    display: none;
  }
}
.contents ul.accordion_area {
  list-style: none;
  width: 800px;
  float: right;
}
@media (max-width: 760px) {
  .contents ul.accordion_area {
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
  }
}
@media (max-width: 760px) {
  .contents ul.accordion_area .flex_item_center.qa_accordion {
    align-items: flex-end;
    overflow: hidden;
  }
}
.contents ul.accordion_area li {
  position: relative;
}
.contents ul.accordion_area li .qa_accordion {
  align-self: start;
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  padding: 20px 20px 20px 70px;
  border: 3px solid #4faf92;
  border-radius: 40px;
  transition: all 0.5s ease-in-out;
  z-index: 15;
  margin-bottom: 50px;
}
@media (760px < width < 1200px) {
  .contents ul.accordion_area li .qa_accordion {
    margin-right: 20px;
  }
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion {
    padding: 20px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
}
.contents ul.accordion_area li .qa_accordion h5.accordion_title {
  font-size: 18px;
  font-weight: 600;
  color: #353535;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion h5.accordion_title {
    padding-bottom: 20px;
  }
}
.contents ul.accordion_area li .qa_accordion h5.accordion_title.close {
  color: #353535;
}
.contents ul.accordion_area li .qa_accordion h5.accordion_title.close:hover {
  color: #353535;
}
.contents ul.accordion_area li .qa_accordion span {
  background: #4faf92;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 15px;
  width: 50px;
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion span {
    padding: 8px 13px;
    border: 2px solid #4faf92;
  }
}
.contents ul.accordion_area li .qa_accordion.close span {
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.contents ul.accordion_area li .qa_accordion.close::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(110deg, #fff 85%, #4faf92 85%);
  transition: 0.3s ease-in-out;
  border-radius: 35px;
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion.close::before {
    background: #fff;
  }
}
.contents ul.accordion_area li .qa_accordion.close:hover span {
  background: #fff;
  color: #4faf92;
  font-size: 20px;
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 15px;
  opacity: 1;
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion.close:hover span {
    padding: 8px 13px;
    border: 2px solid #4faf92;
  }
}
.contents ul.accordion_area li .qa_accordion:hover h5.accordion_title {
  color: #4faf92;
}
.contents ul.accordion_area li .qa_accordion::after {
  content: "";
  background: url(../images/qa/hukidasi.webp);
  width: 105px;
  height: 40px;
  background-size: cover;
  margin-top: -3px;
  z-index: 20;
  position: absolute;
  bottom: -40px;
}
@media (max-width: 760px) {
  .contents ul.accordion_area li .qa_accordion::after {
    display: none;
  }
}
.contents .accordion_box {
  position: relative;
  margin-inline: auto;
  width: 720px;
  display: none;
  margin-top: 30px;
  margin-bottom: 50px;
  padding: 40px;
  background: #4faf92;
  border-radius: 5px;
}
@media (max-width: 760px) {
  .contents .accordion_box {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
  }
}
.contents .accordion_box span {
  background: #fff;
  color: #4faf92;
  font-size: 20px;
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 15px;
}
.contents .accordion_box p {
  margin-top: 15px;
  line-height: 1.6;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.contents .accordion_box p:first-child {
  margin-top: 0;
}
.contents .accordion_box p:last-of-type {
  padding-right: 30px;
}
@media (max-width: 760px) {
  .contents .accordion_box p:last-of-type {
    padding-right: 50px;
  }
}
.contents .accordion_box ul li {
  position: relative;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-left: 1.5em;
  padding-bottom: 15px;
  list-style: none;
  list-style-position: outside;
}
.contents .accordion_box ul li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.contents .accordion_box ul li span {
  position: absolute;
  left: 0;
}
.contents .accordion_box .qa_nissisan {
  position: absolute;
  bottom: -20px;
  right: -30px;
  width: 92px;
  height: 113px;
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .contents .accordion_box .qa_nissisan {
    bottom: -10px;
    right: 10px;
    width: 60px;
    height: 73.6956521739px;
    background: url(../images/common/nissisan.webp) no-repeat;
    background-size: contain;
  }
}
.contents .accordion_box p.accordion_box_more {
  color: #fff;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.contents .accordion_box p.accordion_box_more span.under {
  color: #fff;
  -webkit-text-decoration: underline solid #fff;
          text-decoration: underline solid #fff;
  background: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: none;
  padding: 0;
  transition: all 0.3s ease-in-out;
}
.contents .accordion_box p.accordion_box_more span.under:hover {
  color: #f1edc4;
  -webkit-text-decoration: underline solid #f1edc4;
          text-decoration: underline solid #f1edc4;
}
.contents .accordion_box .box_more {
  display: none;
}
.contents .accordion_box .box_more h6 {
  margin-top: 50px;
  font-size: 18px;
  color: #200c57;
}
.contents .accordion_box .box_more ul {
  border-top: 2px dotted #fff;
  padding-top: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.contents .accordion_box .box_more ul li {
  margin-bottom: 5px;
  padding-bottom: 10px;
  padding-bottom: 0;
}
.contents .accordion_box .box_more ul li span {
  background: none;
  color: #fff;
  font-size: 16px;
  border-radius: 0%;
  padding: 0;
}
@media (max-width: 979px) {
  .contents .qa_balloon {
    display: none;
  }
}

section {
  margin-inline: auto;
  padding: 20px;
  position: relative;
  max-width: 1200px;
  overflow: hidden;
}

/*-- TOPページ -------------------------------------------------*/
/*-- スライド --*/
.index_slide {
  display: block;
  width: 621px;
}
@media (760px < width < 1200px) {
  .index_slide {
    width: 450px;
  }
}
@media (max-width: 760px) {
  .index_slide {
    margin-top: 30px;
    width: 100%;
  }
}

ul.slide-items {
  width: 621px;
  height: 441px;
}
ul.slide-items img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slick-prev:before,
.slick-next:before {
  color: rgb(122, 122, 122);
}

.slick-dots li button:before {
  font-size: 18px;
  top: 6px;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #4faf92;
}

.slick-dots li button:hover:before {
  opacity: 0.75;
  color: #452896;
}

/*-- 上部ナビゲーション（スクロールで表示） --*/
.top_hide,
.top_menu {
  width: 100%;
  position: fixed;
  top: 0;
  display: block;
  transition: all 0.8s ease-in-out;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
}
.top_hide.show,
.top_menu.show {
  display: block;
  opacity: 1;
}
.top_hide .flex,
.top_menu .flex {
  justify-content: space-between;
  align-items: center;
}

.top_hide {
  opacity: 0;
}

.top_menu {
  opacity: 1;
}

/*-- 上部ナビゲーションロゴ -------------------------------------------------*/
.logo {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 25px;
  max-width: 180px;
  height: auto;
}

/*-- 上部ナビゲーション -------------------------------------------------*/
nav {
  max-width: 100%;
}
nav ul.pc_menu_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1120px) {
  nav ul.pc_menu_list {
    display: none;
  }
}
nav ul.pc_menu_list li {
  list-style-type: none;
  margin-left: 30px;
}
nav ul.pc_menu_list li a,
nav ul.pc_menu_list li a:visited {
  color: #696969;
  transition: all 0.3s ease-in-out;
}
nav ul.pc_menu_list li a:hover,
nav ul.pc_menu_list li a:visited:hover {
  color: #200c57;
}
nav ul.pc_menu_list .active {
  color: #979797;
  font-weight: 700;
}
nav .mobile {
  display: none;
}
@media (max-width: 760px) {
  nav .mobile {
    display: block;
  }
}

/*-- モバイルの場合 --*/
.mobile_menu {
  display: none;
}
@media (max-width: 1120px) {
  .mobile_menu {
    display: block;
  }
}

html:has(#g-nav.panelactive),
body:has(#g-nav.panelactive) {
  overflow: hidden;
}
html:has(#g-nav.panelactive) section,
body:has(#g-nav.panelactive) section {
  position: relative;
}
html:has(#g-nav.panelactive) section .back_white,
body:has(#g-nav.panelactive) section .back_white {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 50;
  transition: all 0.6s;
}

#g-nav {
  position: fixed;
  z-index: 999;
  /*-- ナビのスタート位置と形状-- */
  top: 0;
  right: -120%;
  width: calc(100% - 30px);
  height: calc(100vh - 30px);
  background: rgba(79, 175, 146, 0.9);
  border-radius: 20px;
  box-sizing: border-box;
  margin: 15px;
  transition: all 0.6s;
  overscroll-behavior: contain;
  overflow: hidden;
}
@media (max-height: 700px) {
  #g-nav {
    overflow: auto;
  }
}
#g-nav .logo {
  margin-top: 50px;
  width: 120px;
  margin-inline: auto;
}
#g-nav.panelactive {
  right: 0;
}
#g-nav .mobile_navi_box {
  position: relative;
  height: calc(100vh - 50px); /* g-navの高さから必要な余白を引く */
}
#g-nav .mobile_menu_nissisan {
  position: absolute;
  bottom: -50px;
  left: 30px;
  transform: rotate(30deg);
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  width: 120px;
  height: 139.2px;
}
@media (max-height: 700px) {
  #g-nav .mobile_menu_nissisan {
    display: none;
  }
}
#g-nav ul.mobile_menu_list {
  flex-grow: 1;
  position: relative;
  z-index: 1000;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%; /* 親要素の高さに依存 */
  -webkit-overflow-scrolling: touch; /* スムーズスクロール対応 */
  padding-bottom: 20px; /* 下部に余白 */
}
#g-nav ul.mobile_menu_list li {
  list-style: none;
  text-align: center;
  margin-bottom: 15px;
  color: #452896;
  font-weight: 600;
  /*-- 大教室に入るボタン真ん中に --*/
}
#g-nav ul.mobile_menu_list li a,
#g-nav ul.mobile_menu_list li a:visited {
  color: #333;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
#g-nav ul.mobile_menu_list li.top_link_goto {
  width: 180px;
  display: block;
  margin-inline: auto;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: relative;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
  position: fixed;
  z-index: 9999; /*ボタンを最前面に*/
  top: 20px;
  right: 20px;
  cursor: pointer;
  width: 60px;
  height: 60px;
}

/*×に変化*/
.openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 14px;
  height: 4px;
  border-radius: 2px;
  background-color: #666;
  width: 55%;
}

.openbtn span:nth-of-type(1) {
  top: 15px;
}

.openbtn span:nth-of-type(2) {
  top: 25px;
}

.openbtn span:nth-of-type(3) {
  top: 35px;
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

/*-- ヘッダー（未使用） -------------------------------------------------*/
header {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  z-index: 100;
}

/*-- TOPページ -------------------------------------------------*/
/*-- TOPページ > メインビジュアル --*/
.top_main {
  margin: 0 auto;
  padding: 0;
  height: 100vh;
}
@media (max-width: 760px) {
  .top_main {
    height: 100%;
  }
}
.top_main .top_main_flex {
  display: flex;
  align-items: center;
  height: 100%;
}
@media (max-width: 760px) {
  .top_main .top_main_flex {
    position: relative;
    display: block;
  }
}
.top_main .top_main_flex_left {
  width: 400px;
}
.top_main .top_main_flex_left .top_main_logo-image.mobile_top_main_images {
  display: none;
}
@media (max-width: 760px) {
  .top_main .top_main_flex_left .top_main_logo-image.mobile_top_main_images {
    margin-top: 40px;
    display: block;
  }
}
@media (max-width: 760px) {
  .top_main .top_main_flex_left {
    margin-right: 20px;
    margin-left: 20px;
    width: calc(100% - 40px);
  }
}
.top_main .top_main_flex_left h1.top_main_flex_left_title {
  color: #353535;
}
.top_main .top_main_flex_left h1.top_main_flex_left_title span.title_small {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: block;
}
@media (max-width: 760px) {
  .top_main .top_main_flex_left h1.top_main_flex_left_title span.title_small {
    font-size: 12px;
  }
}
.top_main .top_main_flex_left .title_logo {
  max-width: 274px;
  height: auto;
  margin-inline: auto;
}
.top_main .top_main_flex_left .title_logo img {
  width: 100%;
  height: auto;
}
.top_main .top_main_flex_left .top_main_text {
  margin-top: 150px;
}
@media (max-width: 760px) {
  .top_main .top_main_flex_left .top_main_text {
    margin-top: 50px;
  }
}
.top_main .top_main_flex_left .top_main_text p {
  color: #a093c3;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  line-height: 1.8;
}
.top_main .top_main_flex_right {
  margin-inline: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%;
}
.top_main .top_main_flex_right .top_main_logo-image {
  height: 100%;
}
.top_main .top_main_flex_right .top_main_logo-image img {
  max-height: 100%;
}
@media (max-width: 760px) {
  .top_main .top_main_flex_right .top_main_logo-image {
    display: none;
  }
}

/*-- TOPページ > スライド --*/
.about_slide {
  max-width: 621px;
}

/*-- TOPページ > コンテンツ共通 --*/
.top_main_about-pt1,
.top_main_about-pt2 {
  z-index: 10;
}
.top_main_about-pt1 .flex .text h2,
.top_main_about-pt2 .flex .text h2 {
  color: #4faf92;
  padding-bottom: 10px;
  border-bottom: 5px solid #feecc0;
  font-weight: 700;
}
.top_main_about-pt1 .flex .text .about_comment,
.top_main_about-pt2 .flex .text .about_comment {
  margin-top: 30px;
}
@media (max-width: 1200px) {
  .top_main_about-pt1 .flex .text .about_comment,
  .top_main_about-pt2 .flex .text .about_comment {
    margin-top: 50px;
  }
}
.top_main_about-pt1 .flex .text .about_comment p,
.top_main_about-pt2 .flex .text .about_comment p {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
}

/*-- TOPページ > 右に文章あるパターン --*/
.top_main_about-pt1 {
  margin-top: 180px;
  position: relative;
  /*-- ３つめのコンテンツ（テキスト） --*/
  /*-- ３つめのコンテンツ（画像） --*/
}
@media (max-width: 760px) {
  .top_main_about-pt1 {
    margin-top: 80px;
  }
}
.top_main_about-pt1 .text {
  margin-left: 0;
  /*-- width:100%になるため左margin削除 --*/
  /*-- 760px < width < 1200pxの場合 --*/
}
@media (max-width: 1200px) {
  .top_main_about-pt1 .text {
    margin-left: 0;
  }
}
.top_main_about-pt1 .text.width_middle {
  margin-left: 30px;
  flex: 1;
}
@media (min-width: 1200px) {
  .top_main_about-pt1 .text.width_middle {
    margin-left: 30px;
  }
}
@media (max-width: 760px) {
  .top_main_about-pt1 .text.width_middle {
    margin-left: 0;
  }
}
.top_main_about-pt1 .text.pc_abs {
  margin-left: 0;
  width: 600px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.top_main_about-pt1 .text.pc_abs .top_main_text_back_wh {
  padding: 50px;
  background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 760px) {
  .top_main_about-pt1 .text.pc_abs {
    width: 100%;
    position: relative;
    right: initial;
    top: initial;
    transform: translateY(0);
  }
  .top_main_about-pt1 .text.pc_abs .top_main_text_back_wh {
    padding: 0;
    background: none;
  }
}
.top_main_about-pt1 .top_main_about_back {
  width: 763px;
  height: 953px;
  background: url(../images/top/about-pt3_background.webp) no-repeat;
  background-size: 760px 953px;
}

/*-- TOPページ > 左に文章あるパターン --*/
.top_main_about-pt2 {
  margin-top: 230px;
}
@media (max-width: 760px) {
  .top_main_about-pt2 {
    margin-top: 80px;
  }
}
.top_main_about-pt2 .text {
  margin-right: 90px;
  /*-- width:100%になるため右margin削除 --*/
}
@media (max-width: 1200px) {
  .top_main_about-pt2 .text {
    margin-right: 0;
  }
}

/*-- コンテンツボタン共通 -------------------------------------------------*/
/*
.btn_link-small2 イラスト大教室を作ったワケ
.btn_link-small3 イラスト大教室でできること
.btn_link-small4 イラスト大教室 活動の様子
.btn_link-small5 イラスト大教室年表
.btn_link-small6 イラスト大教室 活用法
.btn_link-small7 イラスト大教室 よくある質問
.btn_link-small8 大教室で大切にしたいこと
.btn_link-small9 大教室 参加者の声
.btn_link-small10 参加費について
.btn_link-small11 応募方法について
.btn_link-small12 部屋（チャンネル）のご紹介
.btn_link-small_none 装飾なし
*/
.btn_link-small2,
.btn_link-small3,
.btn_link-small4,
.btn_link-small5,
.btn_link-small6,
.btn_link-small7,
.btn_link-small8,
.btn_link-small9,
.btn_link-small10,
.btn_link-small11,
.btn_link-small12,
.btn_link-small_none {
  margin-top: 50px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 33px;
  border: 2px solid #0076b8;
  box-shadow: 5px 5px 0px 0px #0076b8;
  transition: 0.3s ease-in-out;
  z-index: 3;
  margin-bottom: 10px;
}
.btn_link-small2:hover,
.btn_link-small3:hover,
.btn_link-small4:hover,
.btn_link-small5:hover,
.btn_link-small6:hover,
.btn_link-small7:hover,
.btn_link-small8:hover,
.btn_link-small9:hover,
.btn_link-small10:hover,
.btn_link-small11:hover,
.btn_link-small12:hover,
.btn_link-small_none:hover {
  transform: translate3d(0, 3px, 0);
  cursor: pointer;
}
.btn_link-small2:hover::before,
.btn_link-small3:hover::before,
.btn_link-small4:hover::before,
.btn_link-small5:hover::before,
.btn_link-small6:hover::before,
.btn_link-small7:hover::before,
.btn_link-small8:hover::before,
.btn_link-small9:hover::before,
.btn_link-small10:hover::before,
.btn_link-small11:hover::before,
.btn_link-small12:hover::before,
.btn_link-small_none:hover::before {
  opacity: 0;
}
.btn_link-small2::before,
.btn_link-small3::before,
.btn_link-small4::before,
.btn_link-small5::before,
.btn_link-small6::before,
.btn_link-small7::before,
.btn_link-small8::before,
.btn_link-small9::before,
.btn_link-small10::before,
.btn_link-small11::before,
.btn_link-small12::before,
.btn_link-small_none::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(96deg, #4faf92 0%, #0076b8 90.89%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.btn_link-small2::after,
.btn_link-small3::after,
.btn_link-small4::after,
.btn_link-small5::after,
.btn_link-small6::after,
.btn_link-small7::after,
.btn_link-small8::after,
.btn_link-small9::after,
.btn_link-small10::after,
.btn_link-small11::after,
.btn_link-small12::after,
.btn_link-small_none::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #0076b8;
  border-radius: 31px;
}
.btn_link-small2 a,
.btn_link-small3 a,
.btn_link-small4 a,
.btn_link-small5 a,
.btn_link-small6 a,
.btn_link-small7 a,
.btn_link-small8 a,
.btn_link-small9 a,
.btn_link-small10 a,
.btn_link-small11 a,
.btn_link-small12 a,
.btn_link-small_none a {
  display: block;
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 5px 45px;
}
@media (max-width: 760px) {
  .btn_link-small2 a.nenpyou--mobile,
  .btn_link-small3 a.nenpyou--mobile,
  .btn_link-small4 a.nenpyou--mobile,
  .btn_link-small5 a.nenpyou--mobile,
  .btn_link-small6 a.nenpyou--mobile,
  .btn_link-small7 a.nenpyou--mobile,
  .btn_link-small8 a.nenpyou--mobile,
  .btn_link-small9 a.nenpyou--mobile,
  .btn_link-small10 a.nenpyou--mobile,
  .btn_link-small11 a.nenpyou--mobile,
  .btn_link-small12 a.nenpyou--mobile,
  .btn_link-small_none a.nenpyou--mobile {
    padding: 7px 20px;
    font-size: 14px;
  }
}
.btn_link-small2 a:hover,
.btn_link-small3 a:hover,
.btn_link-small4 a:hover,
.btn_link-small5 a:hover,
.btn_link-small6 a:hover,
.btn_link-small7 a:hover,
.btn_link-small8 a:hover,
.btn_link-small9 a:hover,
.btn_link-small10 a:hover,
.btn_link-small11 a:hover,
.btn_link-small12 a:hover,
.btn_link-small_none a:hover {
  color: #fff;
}
.btn_link-small2.btn_last--position,
.btn_link-small3.btn_last--position,
.btn_link-small4.btn_last--position,
.btn_link-small5.btn_last--position,
.btn_link-small6.btn_last--position,
.btn_link-small7.btn_last--position,
.btn_link-small8.btn_last--position,
.btn_link-small9.btn_last--position,
.btn_link-small10.btn_last--position,
.btn_link-small11.btn_last--position,
.btn_link-small12.btn_last--position,
.btn_link-small_none.btn_last--position {
  margin-left: 100px;
  margin-bottom: 100px;
}
@media (max-width: 760px) {
  .btn_link-small2.btn_last--position,
  .btn_link-small3.btn_last--position,
  .btn_link-small4.btn_last--position,
  .btn_link-small5.btn_last--position,
  .btn_link-small6.btn_last--position,
  .btn_link-small7.btn_last--position,
  .btn_link-small8.btn_last--position,
  .btn_link-small9.btn_last--position,
  .btn_link-small10.btn_last--position,
  .btn_link-small11.btn_last--position,
  .btn_link-small12.btn_last--position,
  .btn_link-small_none.btn_last--position {
    margin-left: -20px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
}

/*-- .btn_link-small2 イラスト大教室を作ったワケ --*/
.btn_link-small2 {
  margin-right: 30px;
}
.btn_link-small2 .btn_link_fig2 {
  position: absolute;
  top: -45px;
  right: -10px;
  width: 49px;
  height: 73px;
  background: url(../images/common/people11.webp) no-repeat;
  background-size: 49px 73px;
  z-index: 1;
}

/*-- .btn_link-small3 イラスト大教室でできること --*/
.btn_link-small3 {
  margin-right: 70px;
}
.btn_link-small3 .btn_link_fig3 {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 99px;
  height: 68px;
  background: url(../images/common/people3.webp) no-repeat;
  background-size: cover;
  z-index: 1;
}

/*-- .btn_link-small4 イラスト大教室 活動の様子 --*/
.btn_link-small4 {
  margin-right: 10px;
}
.btn_link-small4 .btn_link_fig4 {
  position: absolute;
  top: -40px;
  right: 0;
  width: 33px;
  height: 104px;
  background: url(../images/common/people6.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small5 イラスト大教室年表 --*/
.btn_link-small5 {
  margin-right: 10px;
}
.btn_link-small5 .btn_link_fig5 {
  position: absolute;
  top: -40px;
  right: -25px;
  width: 78px;
  height: 82px;
  background: url(../images/common/kikyuu.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small6 イラスト大教室 活用法 --*/
.btn_link-small6 {
  margin-right: 10px;
}
.btn_link-small6 .btn_link_fig6 {
  position: absolute;
  top: -40px;
  right: 0;
  width: 51px;
  height: 97px;
  background: url(../images/common/people9.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small7 イラスト大教室 よくある質問 --*/
.btn_link_fig7 {
  position: absolute;
  top: -40px;
  right: 0;
  width: 69px;
  height: 69px;
  background: url(../images/common/hatena1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small8 大教室で大切にしたいこと --*/
.btn_link-small8 {
  margin-right: 60px;
}
.btn_link-small8 .btn_link_fig8 {
  position: absolute;
  top: -30px;
  right: -50px;
  width: 92px;
  height: 65px;
  background: url(../images/common/set1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small9 大教室 参加者の声 --*/
.btn_link-small9 {
  margin-right: 50px;
}
.btn_link-small9 .btn_link_fig9 {
  position: absolute;
  top: -30px;
  right: -40px;
  width: 83px;
  height: 57px;
  background: url(../images/common/people3.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small10 参加費について --*/
.btn_link-small10 {
  margin-right: 20px;
  margin-top: 30px;
}
.btn_link-small10 .btn_link_fig10 {
  position: absolute;
  top: -20px;
  right: -10px;
  width: 48px;
  height: 54px;
  background: url(../images/common/flower1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

/*-- .btn_link-small11 応募方法について --*/
.btn_link-small11 {
  margin-right: 30px;
  margin-top: 30px;
}
.btn_link-small11 .btn_link_fig11 {
  position: absolute;
  top: -25px;
  right: -20px;
  width: 51px;
  height: 63px;
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
.btn_link-small11 .btn_link_fig12 {
  position: absolute;
  top: -5px;
  right: 150px;
  width: 40px;
  height: 45px;
  background: url(../images/common/flower1.webp) no-repeat;
  background-size: cover;
  z-index: 30;
  opacity: 0.3;
}

/*-- .btn_link-small12 部屋（チャンネル）のご紹介 --*/
.btn_link-small12 {
  margin-right: 10px;
  padding-right: 50px;
}
.btn_link-small12 .btn_link_fig12 {
  position: absolute;
  top: -40px;
  right: 0;
  width: 88px;
  height: 79px;
  background: url(../images/common/people7.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}

.btn_link_fig_none {
  z-index: 5;
}

/*-- 人物ボタン --*/
.btn_link_kazari_box {
  padding-bottom: 100px;
}
@media (max-width: 760px) {
  .btn_link_kazari_box {
    padding-bottom: 50px;
  }
}

.btn_link-people-kazari {
  margin-top: 50px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid #695996;
  box-shadow: 5px 5px 0px 0px #695996;
  transition: 0.3s ease-in-out;
  z-index: 35;
}
.btn_link-people-kazari:hover {
  transform: translate3d(0, 3px, 0);
}
.btn_link-people-kazari:hover::before {
  opacity: 0;
}
.btn_link-people-kazari::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(96deg, #a093c3 0%, #0076b8 90.89%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.btn_link-people-kazari::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #695996;
  border-radius: 30px;
}
.btn_link-people-kazari a {
  display: block;
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 5px 45px;
}
.btn_link-people-kazari a:hover {
  color: #fff;
}

/*-- かざりちゃんアイコン --*/
.btn_link-people-kazari {
  margin-right: 30px;
}
@media (760px < width < 1200px) {
  .btn_link-people-kazari {
    margin-right: 50px;
  }
}
@media (max-width: 760px) {
  .btn_link-people-kazari {
    margin-right: 50px;
  }
}
.btn_link-people-kazari .btn_link-people-kazari_fig {
  position: absolute;
  top: -25px;
  right: -30px;
  width: 63px;
  height: 63px;
  background: url(../images/people/kazari.webp) no-repeat;
  background-size: cover;
  z-index: 1;
  border-radius: 31px;
  border-bottom: 3px solid #695996;
}

/*-- noteボタン --*/
.btn_link-note {
  margin-top: 50px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid #000;
  box-shadow: 5px 5px 0px 0px #000;
  transition: 0.3s ease-in-out;
  z-index: 10;
}
.btn_link-note:hover {
  transform: translate3d(0, 3px, 0);
}
.btn_link-note:hover::before {
  opacity: 0;
}
.btn_link-note::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(110deg, #4faf92 15.42%, #fff 15.42%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.btn_link-note::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #fff;
  border-radius: 30px;
}
.btn_link-note a {
  display: block;
  color: #000;
  width: 100%;
  height: 100%;
  padding: 5px 45px;
  position: relative;
  z-index: 1;
}
.btn_link-note a:hover {
  color: #000;
}
@media (max-width: 760px) {
  .btn_link-note a.nenpyou--mobile {
    padding: 7px 20px;
    font-size: 14px;
  }
}

/*-- noteアイコン --*/
.btn_link-note {
  margin-right: 30px;
}
.btn_link-note .btn_link-note-icon {
  position: absolute;
  top: -15px;
  right: -5px;
  width: 38px;
  height: 38px;
  background: url(../images/icon/icon_note.webp) no-repeat;
  background-size: cover;
  z-index: 1;
}
@media (max-width: 760px) {
  .btn_link-note .btn_link-note-icon {
    display: none;
  }
}

/*-- その他ボタン --*/
.btn_link-other {
  margin-top: 50px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid #000;
  box-shadow: 5px 5px 0px 0px #000;
  transition: 0.3s ease-in-out;
  z-index: 3;
}
.btn_link-other:hover {
  transform: translate3d(0, 3px, 0);
}
.btn_link-other:hover::before {
  opacity: 0;
}
.btn_link-other::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(110deg, #c1c150 15.42%, #fff 15.42%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.btn_link-other::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #fff;
  border-radius: 30px;
}
.btn_link-other a {
  display: block;
  color: #000;
  width: 100%;
  height: 100%;
  padding: 5px 45px;
}
.btn_link-other a:hover {
  color: #000;
}
@media (max-width: 760px) {
  .btn_link-other a.nenpyou--mobile {
    padding: 7px 20px;
    font-size: 14px;
  }
}

/*-- amazonボタン --*/
.btn_link-amazon {
  margin-top: 50px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid #000;
  box-shadow: 5px 5px 0px 0px #000;
  transition: 0.3s ease-in-out;
  z-index: 3;
}
.btn_link-amazon:hover {
  transform: translate3d(0, 3px, 0);
}
.btn_link-amazon:hover::before {
  opacity: 0;
}
.btn_link-amazon::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(110deg, #ff0000 15.42%, #fff 15.42%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.btn_link-amazon::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #fff;
  border-radius: 30px;
}
.btn_link-amazon a {
  display: block;
  color: #000;
  width: 100%;
  height: 100%;
  padding: 5px 45px;
}
.btn_link-amazon a:hover {
  color: #000;
}

/*-- amazonアイコン --*/
.btn_link-amazon {
  margin-right: 30px;
}
.btn_link-amazon .btn_link-amazon-icon {
  position: absolute;
  top: -15px;
  right: -5px;
  width: 38px;
  height: 38px;
  background: url(../images/icon/icon_amazon.webp) no-repeat;
  background-size: cover;
  z-index: 1;
}

/*-- 大教室に入る --*/
.top_link_goto {
  position: relative;
  width: 180px;
  height: 56px;
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 33px;
  border: 2px solid #452896;
  background: linear-gradient(96deg, #4d89d0 0%, #452896 90.89%);
  box-shadow: 5px 5px 0px 0px #452896;
  transition: all 0.3s ease-in-out;
  z-index: 3;
}
.top_link_goto:hover {
  transform: translate3d(0, 3px, 0);
  cursor: pointer;
}
.top_link_goto:hover::before {
  opacity: 0;
}
.top_link_goto::before {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1; /* 通常状態での背景を変化後の要素よりも前に置く */
  background: linear-gradient(96deg, #4d89d0 0%, #452896 90.89%);
  transition: 0.3s ease-in-out;
  border-radius: 31px;
}
.top_link_goto::after {
  content: " "; /* 通常の要素を追加する場合は不要 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -2; /* 変化後の背景は一番後ろに置く */
  background: #452896;
  border-radius: 31px;
}
.top_link_goto a,
.top_link_goto a:visited {
  display: block;
  color: #fff !important;
  width: 100%;
  height: 100%;
  padding: 15px 30px !important;
}
.top_link_goto a:hover,
.top_link_goto a:visited:hover {
  color: #fff;
}
.top_link_goto .btn_link_nissisan {
  position: absolute;
  top: -5px;
  right: -20px;
  width: 56px;
  height: 65px;
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: 56px 65px;
  z-index: 1;
  transform: rotate(15deg);
}
.top_link_goto .btn_link_flower {
  position: absolute;
  top: -5px;
  right: -3px;
  width: 40px;
  height: 45px;
  background: url(../images/common/flower1.webp) no-repeat;
  background-size: 40px 45px;
  z-index: 1;
}

/*-- ポップアップ共通 -------------------------------------------------*/
.box_popup {
  padding: 15px;
}

.box_popuparea--blue {
  background: #0076b8;
  border-radius: 15px;
  padding: 50px;
  max-width: 960px;
  z-index: 30;
  overflow-y: auto;
}
@media (max-width: 760px) {
  .box_popuparea--blue {
    padding: 30px;
  }
}
.box_popuparea--blue h5 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
}
.box_popuparea--blue p {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-top: 30px;
  line-height: 1.6;
}
.box_popuparea--blue .text {
  width: 50%;
}
@media (max-width: 1020px) {
  .box_popuparea--blue .text {
    width: 100%;
  }
}
.box_popuparea--blue .text.width100 {
  width: 100%;
}
.box_popuparea--blue .images {
  margin-top: 30px;
  flex-basis: 400px;
  flex-shrink: 0;
}
@media (max-width: 1020px) {
  .box_popuparea--blue .images {
    width: 100%;
  }
}
.box_popuparea--blue .images--flex-images {
  flex-basis: initial;
  width: 100%;
}
.box_popuparea--blue .pop_btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.box_popuparea--blue .pop_btn p {
  color: #fff;
  margin-top: 10px;
  text-align: right;
}
.box_popuparea--blue .pop_btn p a {
  background: #fff;
  color: #353535;
  font-weight: 600;
  font-size: 14px;
  padding: 5px 20px;
  display: inline-block;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.box_popuparea--blue .pop_btn p a:hover {
  background: #353535;
  color: #fff;
}
.box_popuparea--blue.box_popup_white {
  background: #fff6e8;
}
.box_popuparea--blue.box_popup_white h5 {
  color: #2e2e2e;
  padding-top: 20px;
  padding-bottom: 20px;
}
.box_popuparea--blue.box_popup_white p {
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 600;
}
.box_popuparea--blue.box_popup_white .box_pop_nissisan_fig {
  position: absolute;
  bottom: 20px;
  right: 60px;
  width: 245px;
  height: 302px;
  background: url(../images/common/nissisan.webp) no-repeat;
  transform: rotate(18.276deg);
  background-size: cover;
  z-index: 30;
  opacity: 0.3;
}
@media (max-width: 760px) {
  .box_popuparea--blue.box_popup_white .box_pop_nissisan_fig {
    opacity: 0.1;
  }
}

/*-- 中のページ共通 -------------------------------------------------*/
/*-- 中のページ共通 > タイトル部分共通 --*/
section.page_title {
  position: relative;
  margin-top: 180px;
  max-width: 100%;
  overflow: initial;
  padding: 0;
}
@media (max-width: 760px) {
  section.page_title {
    margin-top: 30px;
  }
}
section.page_title .title_btn.float_right {
  margin-top: -50px;
  z-index: 20;
}
@media (max-width: 760px) {
  section.page_title .title_btn.float_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
}

.bar_title {
  width: 100%;
  height: 121px;
  text-align: center;
  /*-- 中のページ共通 > タイトル部分共通 > もこもこ共通 --*/
  /*-- もこもこ（イラスト大教室とは） --*/
  /*-- もこもこ（イラスト大教室でできること） --*/
  /*-- もこもこ（よくある質問） --*/
  /*-- もこもこ（大教室に入る） --*/
}
@media (max-width: 760px) {
  .bar_title {
    margin-top: 50px;
  }
}
.bar_title h1 {
  color: #6b6b6b;
  font-size: 30px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .bar_title h1 {
    max-width: 100%;
    font-weight: 600;
    padding-top: 30px;
  }
}
.bar_title p.bar_title_sub {
  color: #452896;
  font-weight: 600;
  padding-top: 10px;
  text-align: center;
}
.bar_title.title_about, .bar_title.title_cando, .bar_title.title_aq, .bar_title.title_join_us {
  background-size: 314px 121px;
}
.bar_title.title_about {
  background: url(../images/title/title_about.webp) no-repeat;
  background-position: 25%;
}
@media (max-width: 760px) {
  .bar_title.title_about {
    background: url(../images/title/title_about.webp) no-repeat;
    background-position: center;
  }
}
.bar_title.title_cando {
  background: url(../images/title/title_can_do.webp) no-repeat;
  background-position: 25%;
}
@media (max-width: 760px) {
  .bar_title.title_cando {
    background: url(../images/title/title_can_do.webp) no-repeat;
    background-position: center;
  }
}
.bar_title.title_qa {
  background: url(../images/title/title_qa.webp) no-repeat;
  background-position: 25%;
}
@media (max-width: 760px) {
  .bar_title.title_qa {
    background: url(../images/title/title_qa.webp) no-repeat;
    background-position: center;
  }
}
.bar_title.title_join_us {
  background: url(../images/title/join_us.webp) no-repeat;
  background-position: 25%;
}
@media (max-width: 760px) {
  .bar_title.title_join_us {
    background: url(../images/title/join_us.webp) no-repeat;
    background-position: center;
  }
}

/*-- 中のページ共通 > タイトル部分共通 > タイトルイメージとタイトルコメント --*/
.title_comment {
  position: relative;
  max-width: 100%;
  /*-- イラスト大教室とは --*/
  /*-- イラスト大教室でできること --*/
  /*-- よくある質問 --*/
  /*-- 大教室に入る --*/
}
.title_comment .contents {
  padding: 50px 0;
  overflow: initial;
  /*-- タイトルコメント --*/
}
.title_comment .contents .float_right {
  position: relative;
  float: right;
  pointer-events: auto;
  z-index: 10;
  padding: 30px;
  border-radius: 10px;
  width: 600px;
}
@media (max-width: 760px) {
  .title_comment .contents .float_right {
    padding: 0;
    width: 100%;
    padding: 0 30px;
  }
}
.title_comment .contents .float_right p {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #353535;
}
@media (max-width: 760px) {
  .title_comment .contents .float_right p {
    position: relative;
    margin-bottom: 0;
    font-size: 16px;
    z-index: 10;
  }
}
.title_comment.bar_about {
  background: #b3d8ca;
}
.title_comment.bar_about .contents {
  /*-- タイトルイメージ --*/
  /*-- 右上タイトルイメージ --*/
  /*-- タイトルコメント --*/
}
.title_comment.bar_about .contents .about_img {
  position: absolute;
  top: -30px;
  left: 50px;
  width: 510px;
  height: 381px;
  background: url(../images/common/room3.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_comment.bar_about .contents .about_img {
    display: none;
  }
}
.title_comment.bar_about .contents .about_img_right {
  position: absolute;
  top: -135px;
  right: 60px;
  width: 275px;
  height: 190px;
  background: url(../images/common/set6.webp) no-repeat;
  background-size: cover;
  z-index: 6;
}
@media (max-width: 760px) {
  .title_comment.bar_about .contents .about_img_right {
    background: none;
  }
}
.title_comment.bar_about .contents .float_right {
  background: rgba(179, 216, 202, 0.5);
}
.title_comment.bar_cando {
  background: #f1edc4;
}
.title_comment.bar_cando .contents {
  /*-- タイトルイメージ --*/
  /*-- 右上タイトルイメージ --*/
  /*-- タイトルコメント --*/
}
.title_comment.bar_cando .contents .cando_img {
  position: absolute;
  top: -30px;
  left: 50px;
  width: 510px;
  height: 381px;
  background: url(../images/common/2goukan_3.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_comment.bar_cando .contents .cando_img {
    display: none;
  }
}
.title_comment.bar_cando .contents .cando_img_right {
  position: absolute;
  top: -135px;
  right: 60px;
  width: 334px;
  height: 189px;
  background: url(../images/common/set3.webp) no-repeat;
  background-size: cover;
  z-index: 6;
}
@media (max-width: 760px) {
  .title_comment.bar_cando .contents .cando_img_right {
    background: none;
  }
}
.title_comment.bar_cando .contents .float_right {
  background: rgba(241, 237, 196, 0.5);
}
.title_comment.bar_qa {
  background: #e8e0ff;
}
.title_comment.bar_qa .contents {
  /*-- タイトルイメージ --*/
  /*-- 右上タイトルイメージ --*/
  /*-- タイトルコメント --*/
}
.title_comment.bar_qa .contents .qa_img {
  position: absolute;
  top: -30px;
  left: 50px;
  width: 509px;
  height: 373px;
  background: url(../images/common/1goukan_2.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_comment.bar_qa .contents .qa_img {
    display: none;
  }
}
.title_comment.bar_qa .contents .qa_img_right {
  position: absolute;
  top: -135px;
  right: 60px;
  width: 230px;
  height: 206px;
  background: url(../images/common/set2_2.webp) no-repeat;
  background-size: cover;
  z-index: 10;
}
@media (max-width: 760px) {
  .title_comment.bar_qa .contents .qa_img_right {
    background: none;
  }
}
.title_comment.bar_qa .contents .float_right {
  background: rgba(232, 224, 255, 0.5);
}
.title_comment.bar_join_us {
  background: #97d2c0;
}
.title_comment.bar_join_us .contents {
  /*-- タイトルイメージ --*/
  /*-- 右上タイトルイメージ --*/
  /*-- タイトルコメント --*/
}
.title_comment.bar_join_us .contents .join_us_img {
  position: absolute;
  top: -30px;
  left: 50px;
  width: 509px;
  height: 373px;
  background: url(../images/common/room3.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_comment.bar_join_us .contents .join_us_img {
    display: none;
  }
}
.title_comment.bar_join_us .contents .join_us_img_right {
  position: absolute;
  top: -135px;
  right: 60px;
  width: 245px;
  height: 302px;
  background: url(../images/common/nissisan.webp) no-repeat;
  transform: rotate(18.276deg);
  background-size: cover;
  z-index: -1;
}
@media (max-width: 760px) {
  .title_comment.bar_join_us .contents .join_us_img_right {
    background: none;
  }
}
.title_comment.bar_join_us .contents .float_right {
  background: rgba(151, 210, 192, 0.5);
}

/*-- 中のページ共通 > 緑枠タイトル --*/
.title_box {
  border: 2px solid #4faf92;
  display: flex;
  overflow: initial;
  min-height: 150px;
}
@media (760px < width < 1200px) {
  .title_box {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media (max-width: 760px) {
  .title_box {
    display: block;
    margin-right: 10px;
    margin-left: 10px;
  }
}
.title_box .title_box_title {
  position: relative;
  background-color: #4faf92;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 350px;
  overflow: initial;
  flex: 1;
}
@media (max-width: 760px) {
  .title_box .title_box_title {
    max-width: 100%;
  }
}
.title_box .title_box_title.width350 {
  width: 350px;
}
@media (max-width: 760px) {
  .title_box .title_box_title.width350 {
    width: 100%;
  }
}
.title_box .title_box_title h3 {
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
}
.title_box .title_box_title p {
  color: #452896;
  font-weight: 600;
  font-size: 14px;
}
.title_box .title_box_comment {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 35px 80px;
}
@media (max-width: 760px) {
  .title_box .title_box_comment {
    padding: 20px 30px;
  }
}
.title_box .title_box_comment p {
  font-size: 22px;
  font-weight: 600;
  color: #4faf92;
  text-align: left;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .title_box .title_box_comment p {
    font-size: 18px;
    line-height: 1.6;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 大教室とは --*/
.title_box_title_fig_about {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 102px;
  background: url(../images/common/people11.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_about {
    top: -70px;
    right: 10px;
    left: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> イラスト大教室年表 --*/
.title_box_title_fig_nenpyou {
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
  width: 143px;
  height: 151px;
  background: url(../images/common/kikyuu.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_nenpyou {
    top: -110px;
    right: 10px;
    left: initial;
    transform: translateX(0);
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 部屋（チャンネル）のご紹介 --*/
.title_box_title_fig_cando {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 120px;
  background: url(../images/common/people7.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_cando {
    top: -60px;
    right: 10px;
    left: initial;
    transform: translateX(0);
    width: 100px;
    height: 85.7142857143px;
    background: url(../images/common/people7.webp) no-repeat;
    background-size: cover;
    z-index: 5;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> イラスト大教室　活用法 --*/
.title_box_title_fig_bigroom_method {
  position: absolute;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  width: 71px;
  height: 135px;
  background: url(../images/common/people9.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_bigroom_method {
    top: -70px;
    right: -15px;
    left: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> よくある質問 --*/
.title_box_title_fig_qa {
  position: absolute;
  top: -65px;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
  height: 111px;
  background: url(../images/qa/hatena1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_qa {
    width: 90px;
    height: 95.1428571429px;
    top: -70px;
    right: 10px;
    left: initial;
    transform: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 大教室で大切にしたいこと --*/
.title_box_title_fig_taisetsu {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 165px;
  height: 117px;
  background: url(../images/common/set1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_taisetsu {
    width: 120px;
    height: 85.0909090909px;
    top: -50px;
    right: 10px;
    left: initial;
    transform: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 大教室参加者の声 --*/
.title_box_title_fig_voice {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 142px;
  height: 97px;
  background: url(../images/common/people3.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_voice {
    width: 110px;
    height: 75.1408450704px;
    top: -50px;
    right: 10px;
    left: initial;
    transform: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 参加費について --*/
.title_box_title_fig_entryfee {
  position: absolute;
  top: -48px;
  left: 48%;
  transform: translateX(-50%);
  width: 100px;
  height: 120px;
  background: url(../images/common/flower1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_entryfee {
    width: 100px;
    height: 120px;
    top: -50px;
    right: 10px;
    left: initial;
    transform: initial;
  }
}

/*-- 中のページ共通 > 緑枠タイトル　> 応募方法について --*/
.title_box_title_fig_applyguide {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 104px;
  /* transform: rotate(-13deg); */
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
@media (max-width: 760px) {
  .title_box_title_fig_applyguide {
    width: 70px;
    height: 86.6666666667px;
    top: -50px;
    right: 10px;
    left: initial;
    transform: initial;
  }
}

/*-- 中のページ共通 > イラスト大教室活用法 > モヤモヤタイトル --*/
.title_box_cando {
  position: relative;
  margin-top: 100px;
  width: 1034px;
  height: 301px;
  background: url(../images/cando/titile_box_cando.webp) no-repeat;
  background-size: cover;
  z-index: 5;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (760px < width < 1200px) {
  .title_box_cando {
    background: url(../images/cando/titile_box_cando.webp) no-repeat;
    background-size: contain;
    margin-right: 20px;
  }
}
@media (max-width: 760px) {
  .title_box_cando {
    margin-top: 50px;
    height: initial;
    padding: 20px 0;
    background: #eef2ff;
    width: 100%;
    justify-content: start;
  }
}
.title_box_cando .title_cando {
  margin-top: -30px;
  margin-left: 100px;
  display: flex;
  align-items: center;
}
@media (760px < width < 900px) {
  .title_box_cando .title_cando {
    margin-top: -80px;
  }
}
@media (max-width: 760px) {
  .title_box_cando .title_cando {
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
    display: block;
  }
}
.title_box_cando .title_cando .type_box {
  width: 80px;
}
.title_box_cando .title_cando .type_box p.type {
  color: #feecc0;
  font-weight: 600;
  font-size: 16px;
  background: #0076b8;
  border-radius: 5px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.title_box_cando .title_cando .type_box p.type_num {
  margin-top: -15px;
  color: #0076b8;
  font-weight: 900;
  font-size: 60px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.title_box_cando .title_cando .border_diagonal {
  position: relative;
  width: 70px;
  height: 100px;
}
.title_box_cando .title_cando .border_diagonal::after {
  content: "";
  position: absolute;
  top: 20%;
  left: -20px;
  width: 100%;
  height: 1px;
  background: #0076b8;
  transform: rotate(-60deg);
  transform-origin: right;
  z-index: 5;
}
.title_box_cando .title_cando h4 {
  font-size: 20px;
  font-weight: 600;
  color: #0076b8;
}

/*-- 中のページ共通 > コンテンツ内テキスト --*/
.contents_text {
  position: relative;
  max-width: 650px;
  z-index: 30;
  /*-- テキスト内 > candoテキスト --  */
  /*-- テキスト内 > 紫色のボックス --  */
  /*-- テキスト内 > 濃い紫色のボックス --  */
  /*-- テキスト内 > 青色のボックス --  */
  /*-- 年表 --*/
  /*-- 年表ページ縦線 --*/
  /*-- 大教室で大切にしたいこと --*/
}
@media (760px <= width < 1200px) {
  .contents_text {
    margin-inline: auto;
    margin-right: 20px;
  }
}
@media (max-width: 650px) {
  .contents_text {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.contents_text p {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #353535;
  margin-top: 50px;
  margin-bottom: 15px;
  /*-- 中のページ共通 > マーカーで引いたような装飾 --*/
}
.contents_text p.marker {
  background: linear-gradient(transparent 50%, rgb(228, 222, 163));
  display: inline;
  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;
  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;
  /* マーカーが引かれる速度を指定 */
  transition: background-size 1.5s;
}
.contents_text p.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}
.contents_text .comment_point {
  position: relative;
  margin-inline: auto;
  text-align: center;
  max-width: 500px;
}
.contents_text .comment_point p {
  margin-top: 0;
}
.contents_text.cando_text {
  margin-top: -60px;
}
@media (760px < width < 1200px) {
  .contents_text.cando_text {
    margin-right: 20px;
  }
}
@media (max-width: 760px) {
  .contents_text.cando_text {
    margin-top: 50px;
  }
}
.contents_text.cando_text.box_last {
  margin-bottom: 100px;
}
@media (max-width: 760px) {
  .contents_text.cando_text.box_last {
    margin-bottom: 50px;
  }
}
.contents_text h3.title_purple {
  color: #fff;
  background: #a093c3;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  position: absolute;
  left: 20px;
  top: -15px;
}
.contents_text .box_purple {
  border: 3px solid #a093c3;
  padding: 30px 15px 15px 15px;
  display: inline-block;
  margin-inline: auto;
}
.contents_text .box_purple ul {
  margin: 15px 30px;
}
.contents_text .box_purple ul li {
  text-align: left;
  color: #452896;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 15px;
}
.contents_text .box_purple ul li ::marker {
  color: #452896;
}
.contents_text .box_purple ul li:last-child {
  padding-bottom: 0;
}
.contents_text h3.title_dark_purple {
  color: #fff;
  background: #452896;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  position: absolute;
  left: 20px;
  top: -15px;
}
.contents_text .box_dark_purple {
  position: relative;
  border: 3px solid #452896;
  background: rgba(255, 255, 255, 0.6);
  padding: 30px 15px 15px 15px;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.contents_text .box_dark_purple.fee {
  min-width: 400px;
}
@media (max-width: 760px) {
  .contents_text .box_dark_purple.fee {
    min-width: initial;
    width: calc(100% - 40px);
  }
}
.contents_text .box_dark_purple.fee ul li {
  text-align: center;
  font-size: 18px;
}
.contents_text .box_dark_purple ul {
  margin: 15px 20px;
}
.contents_text .box_dark_purple ul li {
  list-style: none;
  text-align: left;
  color: #452896;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #452896;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.contents_text .box_dark_purple ul li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.contents_text .box_dark_purple ul.list_style li {
  position: relative;
  color: #452896;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #452896;
  margin-bottom: 15px;
  padding-left: 1.5em;
  padding-bottom: 15px;
  list-style: none;
  list-style-position: outside;
}
.contents_text .box_dark_purple ul.list_style li:last-child {
  margin-bottom: 0;
}
.contents_text .box_dark_purple ul.list_style li span {
  position: absolute;
  left: 0;
}
.contents_text .box_dark_purple ul.border_none {
  margin-top: 30px;
}
.contents_text .box_dark_purple ul.border_none li {
  position: relative;
  padding-bottom: 0;
  border: none;
  font-size: 14px;
  color: #353535;
  padding-left: 6em;
}
.contents_text .box_dark_purple ul.border_none li span {
  position: absolute;
  left: 0;
}
.contents_text h3.title_blue {
  color: #fff;
  background: #4d89d0;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  position: absolute;
  left: 20px;
  top: -15px;
}
.contents_text .box_blue {
  position: relative;
  border: 3px solid #4d89d0;
  padding: 50px 30px 30px 30px;
  display: inline-block;
  margin-inline: auto;
  text-align: left;
}
.contents_text .box_blue ul li {
  position: relative;
  color: #0076b8;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #4d89d0;
  margin-bottom: 15px;
  padding-left: 1.5em;
  padding-bottom: 15px;
  list-style: none;
  list-style-position: outside;
}
.contents_text .box_blue ul li:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.contents_text .box_blue ul li span {
  position: absolute;
  left: 0;
}
.contents_text .box_blue.border_bottom {
  padding: 30px 15px 15px;
}
.contents_text .box_blue.border_bottom ul {
  margin: 15px 30px;
}
.contents_text .box_blue.border_bottom ul li {
  text-align: left;
  color: #4d89d0;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 15px;
  list-style: disc;
  list-style-position: outside;
  margin-bottom: 0;
  padding-left: 0;
  border: none;
}
.contents_text .box_blue.border_bottom ul li ::marker {
  color: #4d89d0;
}
.contents_text .box_blue.border_bottom ul li:last-child {
  padding-bottom: 0;
}
.contents_text .nenpyou {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  position: relative;
}
@media (max-width: 760px) {
  .contents_text .nenpyou {
    margin-left: 0;
    display: block;
  }
}
.contents_text .nenpyou:first-of-type {
  margin-top: 0;
}
@media (max-width: 760px) {
  .contents_text .nenpyou:last-of-type {
    padding-bottom: 50px;
  }
}
.contents_text .nenpyou .block {
  display: block;
}
.contents_text .nenpyou .block .left {
  width: 130px;
}
.contents_text .nenpyou .circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #0076b8;
  border-radius: 50%;
  left: 106px;
  z-index: 100;
}
@media (max-width: 760px) {
  .contents_text .nenpyou .circle {
    left: -25px;
    top: -25px;
  }
}
.contents_text .nenpyou .left {
  flex-basis: 130px;
  flex-shrink: 0;
}
.contents_text .nenpyou .left p {
  margin: 0;
  color: #353535;
  background: #97d2c0;
  border-radius: 1px;
  display: block;
  align-self: start;
  padding: 5px 30px 5px 10px;
  -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
}
@media (max-width: 760px) {
  .contents_text .nenpyou .left p {
    display: inline-block;
    padding: 5px 10px 5px 23px;
    -webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
  }
}
.contents_text .nenpyou .left:not(:first-of-type) {
  margin-top: 15px;
}
.contents_text .nenpyou .right {
  position: relative;
  flex-grow: 1;
  padding-left: 50px;
}
.contents_text .nenpyou .right p {
  position: relative;
  font-size: 14px;
  padding: 15px;
  margin: 20px 0 0 0;
  color: #353535;
  border: 3px solid #4faf92;
  background: #fff;
  font-weight: 600;
  display: inline-block;
}
.contents_text .nenpyou .right p::before {
  content: "　";
  position: absolute;
  top: 50%;
  left: -50px;
  width: 50px;
  height: 3px;
  border-top: 3px dotted #4faf92;
}
.contents_text .nenpyou .right p:nth-child(2) {
  margin-left: 45px;
}
.contents_text .nenpyou .right p.tunagu {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .contents_text .nenpyou .right p.tunagu::before {
    content: "　";
    position: absolute;
    top: -10px;
    left: -30px;
    width: 30px;
    height: 50px;
    border-top: none;
    border-bottom: 3px dotted #4faf92;
    border-left: 3px dotted #4faf92;
  }
}
.contents_text .nenpyou .right .btn_link-small_none,
.contents_text .nenpyou .right .btn_link-note {
  margin-top: 10px;
  margin-left: -15px;
  margin-right: 15px;
  display: inline-block;
  align-self: start;
}
@media (max-width: 760px) {
  .contents_text .nenpyou .right .btn_link-small_none.btn_link-small_none-mobile, .contents_text .nenpyou .right .btn_link-small_none.btn_link-note-mobile,
  .contents_text .nenpyou .right .btn_link-note.btn_link-small_none-mobile,
  .contents_text .nenpyou .right .btn_link-note.btn_link-note-mobile {
    margin-top: -10px;
    float: right;
  }
}
.contents_text .nenpyou .right .btn_link-amazon {
  margin-top: 20px;
  margin-left: -15px;
  margin-right: 15px;
  display: inline-block;
  align-self: start;
}
.contents_text .nenpyou .right .btn_link-other {
  margin-top: 20px;
  margin-left: -15px;
  margin-right: 15px;
  display: inline-block;
  align-self: start;
}
@media (max-width: 760px) {
  .contents_text .nenpyou .right .btn_link-other.btn_link-other-mobile {
    margin-top: -10px;
    float: right;
  }
}
.contents_text .nenpyou_border.hidden {
  opacity: 0;
  animation: none;
}
.contents_text .nenpyou_border:not(.hidden) {
  position: absolute;
  height: 100%;
  top: 0;
  left: 152px;
  opacity: 0;
  transition: all 0.3s;
  animation: slideDown 1s forwards;
  opacity: 1;
}
@media (max-width: 760px) {
  .contents_text .nenpyou_border:not(.hidden) {
    top: 0;
    height: 100%;
    left: 0;
  }
}
.contents_text .nenpyou_border:not(.hidden)::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  height: 0;
  width: 3px;
  background: #0076b8;
  animation: slideDownBefore 3s forwards;
}
.contents_text .nenpyou_border:not(.hidden).nenpyou_border--fast {
  animation: slideDown 0.2s forwards;
}
.contents_text .nenpyou_border:not(.hidden).nenpyou_border--fast::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  height: 0;
  width: 3px;
  background: #0076b8;
  animation: slideDownBefore 0.5s forwards;
}
@keyframes slideDownBefore {
  to {
    height: 100%;
  }
}
.contents_text.join_us_policy {
  margin-top: 15px;
  margin-right: 100px;
  width: 350px;
  background: url(../images/join_us/policy_back.webp) no-repeat;
}
.contents_text.join_us_text {
  margin-top: 40px;
}
.contents_text.join_us_text.voice_text {
  max-width: 950px;
  float: right;
  margin-bottom: 50px;
}
@media (max-width: 760px) {
  .contents_text.join_us_text.voice_text {
    margin-bottom: 20px;
  }
}
.contents_text.join_us_text .voice {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice {
    padding-top: 50px;
    position: relative;
    display: block;
    margin-top: 60px;
  }
}
.contents_text.join_us_text .voice:first-child {
  margin-top: 0;
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice:first-child {
    margin-top: 20px;
  }
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice .people_box {
    top: -30px;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 30;
  }
}
.contents_text.join_us_text .voice .people_box p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #a2a2a2;
  text-align: center;
}
.contents_text.join_us_text .voice .people_box .people {
  width: 93px;
  height: 93px;
  border-radius: 45px;
  border: 4px solid #4faf92;
}
.contents_text.join_us_text .voice .people_box .people img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 45px;
  border: 6px solid #fff;
}
.contents_text.join_us_text .voice .voice_text {
  flex: 1;
  padding: 35px 64px;
  border-radius: 10px;
  border: 4px solid #4faf92;
  margin-left: 70px;
  position: relative;
}
@media (760px < width < 1200px) {
  .contents_text.join_us_text .voice .voice_text {
    margin-right: 20px;
  }
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice .voice_text {
    margin-left: 0;
    padding: 55px 30px 35px 30px;
  }
}
.contents_text.join_us_text .voice .voice_text p {
  padding: 0;
  margin: 0;
  font-size: 18px;
}
.contents_text.join_us_text .voice .voice_text p:nth-of-type(n + 2) {
  margin-top: 15px;
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice .voice_text p {
    font-size: 16px;
  }
}
.contents_text.join_us_text .voice .voice_text::before {
  content: " ";
  width: 59px;
  height: 31px;
  background: url(../images/join_us/hukudashi_join.webp) no-repeat;
  background-size: cover;
  position: absolute;
  left: -59px;
}
@media (max-width: 760px) {
  .contents_text.join_us_text .voice .voice_text::before {
    display: none;
  }
}

/*-- 中のページ共通 > コンテンツ内テキスト --*/
.contents_image {
  margin-right: 100px;
  z-index: 20;
}
@media (760px < width < 1200px) {
  .contents_image {
    margin-right: 30px;
    margin-left: 30px;
  }
}
.contents_image.cando_box_none {
  width: 373px;
}
@media (max-width: 1200px) {
  .contents_image.cando_box_none {
    width: 0;
  }
}
.contents_image.width350 {
  width: 350px;
  position: relative;
}
.contents_image.width350.img_back {
  margin-top: 100px;
  background: url(../images/common/img_back.webp) no-repeat;
  width: 313px;
}
@media (1060px < width < 1200px) {
  .contents_image.width350.img_back {
    background: url(../images/common/img_back.webp) repeat-y;
    max-width: 100%;
    background-size: contain;
    opacity: 0.5;
  }
}
@media (max-width: 1060px) {
  .contents_image.width350.img_back {
    display: none;
  }
}
.contents_image.width350.img_back2 {
  margin-top: 100px;
  background: url(../images/common/img_back2.webp) no-repeat;
  width: 313px;
}
@media (760px < width < 1200px) {
  .contents_image.width350.img_back2 {
    background: url(../images/common/img_back2.webp) repeat-y;
    max-width: 100%;
    background-size: contain;
    opacity: 0.5;
  }
}
@media (max-width: 760px) {
  .contents_image.width350.img_back2 {
    display: none;
  }
}
.contents_image.width350.img_back_rep {
  margin-top: 100px;
  background: url(../images/common/img_back.webp) repeat-y;
  width: 313px;
}
@media (760px < width < 1200px) {
  .contents_image.width350.img_back_rep {
    background: url(../images/common/img_back.webp) no-repeat;
    max-width: 100%;
    background-size: contain;
    opacity: 0.5;
  }
}
@media (max-width: 760px) {
  .contents_image.width350.img_back_rep {
    display: none;
  }
}
.contents_image.width350 .back_white_grad {
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
@media (max-width: 1060px) {
  .contents_image {
    margin-right: 0;
  }
}
.contents_image img {
  max-width: 100px;
  text-align: center;
}

/*-- 中のページ共通 > イラスト大教室とは > 年表動く縦線 --*/
.nenpyou_border_dotted {
  position: absolute;
  height: 50px;
  bottom: -2px;
  left: 148px;
  opacity: 0;
  border-left: 5px dotted #fff;
  transition: all 0.1s;
  animation: border_in 3s forwards;
}
@keyframes border_in {
  to {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .nenpyou_border_dotted {
    display: none;
  }
}

/*-- 中のページ共通 > イラスト大教室とは > 年表の年号 --*/
.nenpyou_bottom_numbers {
  position: absolute;
  color: #b9b9b9;
  opacity: 0.3;
  font-weight: 900;
  font-size: 100px;
  bottom: 0;
  right: 0;
  z-index: 20;
}
@media (max-width: 760px) {
  .nenpyou_bottom_numbers {
    bottom: 20px;
    font-size: 80px;
  }
}

/*-- 大教室でできること > モヤモヤ --*/
.cando_moyamoya {
  margin-top: -60px;
  width: 390px;
}
@media (max-width: 760px) {
  .cando_moyamoya {
    width: 100%;
  }
}
.cando_moyamoya img {
  max-width: 100%;
  box-shadow: 6px 13px 14px -9px #cfcfcf;
}
@media (760px < width < 1200px) {
  .cando_moyamoya {
    margin-top: -60px;
    margin-left: 20px;
    margin-right: 30px;
  }
}
@media (max-width: 760px) {
  .cando_moyamoya {
    margin-top: 10px;
    padding: 20px 20px 30px 20px;
  }
}
.cando_moyamoya .text_right .small {
  margin-top: 15px;
}
@media (max-width: 760px) {
  .cando_moyamoya .text_right .small {
    margin-right: 10px;
  }
}

.img_zoom {
  position: relative;
}
.img_zoom .click_zoom {
  position: absolute;
  background: #4faf92;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  padding: 3px 10px;
  z-index: 20;
  bottom: 20px;
  right: 20px;
}
.img_zoom .click_zoom img {
  margin-top: -3px;
  margin-right: 2px;
  width: 15px;
  height: 15px;
}

/*-- イラスト大教室とは -------------------------------------------------*/
section.about {
  padding: 120px 0 0 0;
}
@media (max-width: 1200) {
  section.about {
    padding: 150px 10px 100px 10px;
  }
}
@media (max-width: 760px) {
  section.about {
    padding-top: 120px;
  }
  section.about#reason {
    padding-top: 80px;
  }
}

/*-- セクション -------------------------------------------------*/
section.inpage {
  margin-top: 0;
  padding: 120px 0 0 0;
}
@media (max-width: 1200) {
  section.inpage {
    padding: 150px 10px 100px 10px;
  }
}
section.inpage.method {
  margin-top: 0;
}
section.inpage.inpage_qa {
  padding-top: 160px;
}
@media (max-width: 760px) {
  section.inpage.inpage_qa {
    padding-top: 120px;
  }
}
@media (max-width: 760px) {
  section.inpage#channel {
    padding-top: 80px;
  }
}

/*-- イラスト大教室に入る -------------------------------------------------*/
section.join_us {
  padding: 120px 0 0 0;
}
@media (max-width: 1200) {
  section.join_us {
    padding: 150px 10px 100px 10px;
  }
}
@media (max-width: 760px) {
  section.join_us {
    padding-top: 80px;
  }
  section.join_us#taisetsu {
    padding-top: 60px;
  }
}
section.join_us .images.gallery {
  width: 80%;
  height: auto;
  margin-inline: auto;
  position: relative;
  border: 1px solid #333333;
}
section.join_us .images.gallery .gallery_fig2 {
  position: absolute;
  bottom: -30px;
  left: 5%;
  width: 20px;
  height: 66.875px;
  background: url(../images/common/people19.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig2 {
    width: 20px;
    height: 66.875px;
    background: url(../images/common/people19.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery .gallery_fig3 {
  position: absolute;
  bottom: -20px;
  right: 5%;
  width: 65px;
  height: 58.1976744186px;
  background: url(../images/common/people7.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig3 {
    width: 65px;
    height: 58.1976744186px;
    background: url(../images/common/people7.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery .gallery_fig4 {
  position: absolute;
  bottom: -20px;
  left: 5%;
  width: 50px;
  height: 64.7928994083px;
  background: url(../images/common/people20.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig4 {
    width: 50px;
    height: 64.7928994083px;
    background: url(../images/common/people20.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery .gallery_fig5 {
  position: absolute;
  bottom: -15px;
  left: 5%;
  width: 50px;
  height: 60.3825136612px;
  background: url(../images/common/people17.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig5 {
    width: 50px;
    height: 60.3825136612px;
    background: url(../images/common/people17.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery .gallery_fig6 {
  position: absolute;
  bottom: -20px;
  right: 5%;
  width: 50px;
  height: 58.1081081081px;
  background: url(../images/common/people23.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig6 {
    width: 50px;
    height: 58.1081081081px;
    background: url(../images/common/people23.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery .gallery_fig7 {
  position: absolute;
  bottom: -30px;
  right: 5%;
  width: 50px;
  height: 73px;
  background: url(../images/common/people18.webp) no-repeat;
  background-size: cover;
  z-index: 11;
}
@media (max-width: 760px) {
  section.join_us .images.gallery .gallery_fig7 {
    width: 50px;
    height: 73px;
    background: url(../images/common/people18.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card {
  margin-top: 30px;
  width: 80%;
  height: auto;
  position: relative;
  cursor: pointer;
  /* カード内の画像 */
  /* カード裏面・表面の共通スタイル */
  /* カード表面のスタイル */
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card {
    margin-top: 15px;
    width: 80%;
  }
}
section.join_us .images.gallery_randam_card .aspect-ratio-box {
  content: "";
  display: block;
  padding-top: 100%;
}
section.join_us .images.gallery_randam_card img {
  width: 100%;
  height: auto;
}
section.join_us .images.gallery_randam_card .back,
section.join_us .images.gallery_randam_card .front {
  box-shadow: 6px 10px 10px -8px rgba(0, 0, 0, 0.3);
  transition: all 0.6s;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
section.join_us .images.gallery_randam_card .back {
  transform: rotateY(-180deg);
  border: 1px solid #4d89d0;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
}
section.join_us .images.gallery_randam_card .back .card_prof {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 20px;
}
section.join_us .images.gallery_randam_card .back .card_prof .icon {
  width: 30%;
  border: 2px solid #696969;
  border-radius: 50%;
}
section.join_us .images.gallery_randam_card .back .card_prof .icon img {
  border-radius: 50%;
}
section.join_us .images.gallery_randam_card .back .card_prof .prof h3 {
  color: #4faf92;
  border-top: 2px solid #4faf92;
  border-bottom: 2px solid #4faf92;
  font-weight: 700;
  padding: 10px 20px;
  margin-bottom: 30px;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .back .card_prof .prof h3 {
    font-size: 14px;
  }
}
section.join_us .images.gallery_randam_card .back .card_prof .prof .btn_link-small_none {
  margin-top: 0;
  border-color: #452896;
  border: 2px solid #452896;
  box-shadow: 5px 5px 0px 0px #452896;
}
section.join_us .images.gallery_randam_card .back .card_prof .prof .btn_link-small_none::before {
  background: linear-gradient(96deg, #452896 0%, #0076b8 90.89%);
}
section.join_us .images.gallery_randam_card .back .card_prof .prof .btn_link-small_none::after {
  background: #452896;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .back .card_prof .prof .btn_link-small_none a {
    font-size: 12px;
    padding: 5px 15px;
  }
}
section.join_us .images.gallery_randam_card .back .btn_bottom {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .back .btn_bottom {
    display: none;
  }
}
@media (min-width: 760px) {
  section.join_us .images.gallery_randam_card {
    /* ホバー時のカード裏面 */
    /* ホバー時のカード表面 */
  }
  section.join_us .images.gallery_randam_card:hover .front {
    transform: rotateY(180deg);
  }
  section.join_us .images.gallery_randam_card:hover .back {
    transform: rotateY(0);
  }
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card {
    /* タッチ時のカード裏面 */
    /* タッチ時のカード表面 */
  }
  section.join_us .images.gallery_randam_card.is-flipped .front {
    transform: rotateY(180deg);
  }
  section.join_us .images.gallery_randam_card.is-flipped .back {
    transform: rotateY(0);
  }
}
section.join_us .images.gallery_randam_card .gallery_fig2 {
  position: absolute;
  bottom: -30px;
  left: 5%;
  width: 20px;
  height: 66.875px;
  background: url(../images/common/people19.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig2 {
    width: 20px;
    height: 66.875px;
    background: url(../images/common/people19.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card .gallery_fig3 {
  position: absolute;
  bottom: -20px;
  right: 5%;
  width: 65px;
  height: 58.1976744186px;
  background: url(../images/common/people7.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig3 {
    width: 65px;
    height: 58.1976744186px;
    background: url(../images/common/people7.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card .gallery_fig4 {
  position: absolute;
  bottom: -20px;
  left: 5%;
  width: 50px;
  height: 64.7928994083px;
  background: url(../images/common/people20.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig4 {
    width: 50px;
    height: 64.7928994083px;
    background: url(../images/common/people20.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card .gallery_fig5 {
  position: absolute;
  bottom: -15px;
  left: 5%;
  width: 50px;
  height: 60.3825136612px;
  background: url(../images/common/people17.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig5 {
    width: 50px;
    height: 60.3825136612px;
    background: url(../images/common/people17.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card .gallery_fig6 {
  position: absolute;
  bottom: -20px;
  right: 5%;
  width: 50px;
  height: 58.1081081081px;
  background: url(../images/common/people23.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig6 {
    width: 50px;
    height: 58.1081081081px;
    background: url(../images/common/people23.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}
section.join_us .images.gallery_randam_card .gallery_fig7 {
  position: absolute;
  bottom: -30px;
  right: 5%;
  width: 50px;
  height: 73px;
  background: url(../images/common/people18.webp) no-repeat;
  background-size: cover;
  z-index: 11;
}
@media (max-width: 760px) {
  section.join_us .images.gallery_randam_card .gallery_fig7 {
    width: 50px;
    height: 73px;
    background: url(../images/common/people18.webp) no-repeat;
    background-size: cover;
    bottom: -30px;
  }
}

/*-- 大教室に入る（黄色バー） -------------------------------------------------*/
section.go_link_bar {
  margin-top: 120px;
  position: relative;
  background: #feecc0;
  max-width: 100%;
  padding: 50px 0;
  overflow: initial;
}
@media (max-width: 760px) {
  section.go_link_bar {
    padding-top: 80px;
  }
  section.go_link_bar:first-child {
    padding-top: 60px;
  }
}

/*-- 年表2020 -------------------------------------------------*/
section.nenpyou_2020 {
  margin-top: 20px;
  padding-top: 50px;
  padding-bottom: 0;
  background: #f6ffee;
  max-width: 100%;
}

.mobile_nenpyou_2020 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2020 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #f6ffee;
    max-width: 100%;
  }
}

/*-- 年表2021 -------------------------------------------------*/
section.nenpyou_2021 {
  padding-top: 0;
  padding-bottom: 0;
  background: #eefaff;
  max-width: 100%;
}

.mobile_nenpyou_2021 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2021 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #eefaff;
    max-width: 100%;
  }
}

/*-- 年表2022 -------------------------------------------------*/
section.nenpyou_2022 {
  padding-top: 0;
  padding-bottom: 0;
  background: #f6ffee;
  max-width: 100%;
}

.mobile_nenpyou_2022 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2022 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #f6ffee;
    max-width: 100%;
  }
}

/*-- 年表2023 -------------------------------------------------*/
section.nenpyou_2023 {
  padding-top: 0;
  padding-bottom: 0;
  background: #fffee9;
  max-width: 100%;
}

.mobile_nenpyou_2023 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2023 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #fffee9;
    max-width: 100%;
  }
}

/*-- 年表2024 -------------------------------------------------*/
section.nenpyou_2024 {
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(to bottom, #eefff5, #fff);
  max-width: 100%;
}

.mobile_nenpyou_2024 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2024 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #eefff5;
    max-width: 100%;
  }
}

/*-- 年表2025 -------------------------------------------------*/
section.nenpyou_2025 {
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(to bottom, #fff6ee, #fff);
  max-width: 100%;
}

.mobile_nenpyou_2025 {
  display: none;
}
@media (max-width: 760px) {
  .mobile_nenpyou_2025 {
    display: block;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    height: 130px;
    background: #fff6ee;
    max-width: 100%;
  }
}

.box1200 {
  margin-inline: auto;
  padding: 0 20px 0 20px;
  position: relative;
  max-width: 1200px;
  overflow: hidden;
}
@media (max-width: 760px) {
  .box1200 {
    margin-left: 0;
    overflow: initial;
  }
}
.box1200 .contents_text {
  max-width: initial;
  flex: 1;
  margin-left: 100px;
}
@media (max-width: 760px) {
  .box1200 .contents_text {
    margin-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  section.nenpyou_2020 .box1200,
  section.nenpyou_2021 .box1200,
  section.nenpyou_2022 .box1200,
  section.nenpyou_2023 .box1200,
  section.nenpyou_2024 .box1200,
  section.nenpyou_2025 .box1200,
  .mobile_nenpyou_2021 .box1200 {
    padding-right: 0;
  }
  section.nenpyou_2020 .box1200 .contents_text,
  section.nenpyou_2021 .box1200 .contents_text,
  section.nenpyou_2022 .box1200 .contents_text,
  section.nenpyou_2023 .box1200 .contents_text,
  section.nenpyou_2024 .box1200 .contents_text,
  section.nenpyou_2025 .box1200 .contents_text,
  .mobile_nenpyou_2021 .box1200 .contents_text {
    padding-right: 0 !important;
  }
}
/*-- テキスト両サイド調整 --*/
.box_flex_stretch {
  display: flex;
  align-items: stretch;
}
@media (max-width: 760px) {
  .box_flex_stretch {
    display: block;
  }
}

/*-- 大教室に入る（黄色バー） > 飾りとボタン --*/
.go_link_box {
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
  /*-- 飾り（ロゴ） --*/
  /*-- 飾り（イラスト１） --*/
  /*-- 飾り（イラスト２） --*/
  /*-- 飾り（イラスト３） --*/
  /*-- 飾り（イラスト５） --*/
  /*-- 飾り（イラスト６） --*/
  /*-- 飾り（イラスト７） --*/
}
.go_link_box p {
  color: #452896;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  margin-left: 50px;
}
@media (max-width: 760px) {
  .go_link_box p {
    margin-inline: auto;
  }
}
.go_link_box .yellow_back_logo {
  position: absolute;
  bottom: 20px;
  left: 60%;
  width: 273px;
  height: 85px;
  background: url(../images/logo/yellow_bar_back.webp) no-repeat;
  background-size: cover;
}
@media (max-width: 1060px) {
  .go_link_box .yellow_back_logo {
    display: none;
  }
}
.go_link_box .yellow_back_fig1 {
  position: absolute;
  top: -10%;
  left: 10%;
  width: 68px;
  height: 112px;
  background: url(../images/common/people5.webp) no-repeat;
  background-size: cover;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig1 {
    width: 40px;
    height: 65.8064516129px;
    background: url(../images/common/people5.webp) no-repeat;
    background-size: cover;
    top: -10%;
    left: 5%;
  }
}
.go_link_box .yellow_back_fig2 {
  position: absolute;
  top: -20%;
  left: 20%;
  width: 96px;
  height: 93px;
  background: url(../images/common/people10.webp) no-repeat;
  background-size: cover;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig2 {
    width: 60px;
    height: 58.1927710843px;
    background: url(../images/common/people10.webp) no-repeat;
    background-size: cover;
    top: -10%;
  }
}
.go_link_box .yellow_back_fig3 {
  position: absolute;
  top: -50%;
  right: 10%;
  width: 232px;
  height: 156px;
  background: url(../images/common/people22.webp) no-repeat;
  background-size: cover;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig3 {
    width: 50px;
    height: 74.358974359px;
    background: url(../images/common/people22.webp) no-repeat;
    background-size: cover;
    top: -20%;
  }
}
.go_link_box .yellow_back_fig5 {
  position: absolute;
  bottom: 20%;
  left: 5%;
  width: 57px;
  height: 63px;
  background: url(../images/common/flower1.webp) no-repeat;
  background-size: cover;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig5 {
    width: 50px;
    height: 55.2631578947px;
    background: url(../images/common/flower1.webp) no-repeat;
    background-size: cover;
    bottom: 20%;
  }
}
.go_link_box .yellow_back_fig6 {
  position: absolute;
  bottom: -10%;
  left: 20%;
  height: 129px;
  width: 111px;
  background: url(../images/common/people23.webp) no-repeat;
  background-size: cover;
  z-index: 12;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig6 {
    width: 50px;
    height: 58.1081081081px;
    background: url(../images/common/people23.webp) no-repeat;
    background-size: cover;
    bottom: 10px;
  }
}
.go_link_box .yellow_back_fig7 {
  position: absolute;
  bottom: -10%;
  left: 80%;
  width: 101px;
  height: 146px;
  background: url(../images/common/people18.webp) no-repeat;
  background-size: cover;
  z-index: 11;
}
@media (max-width: 760px) {
  .go_link_box .yellow_back_fig7 {
    width: 50px;
    height: 73px;
    background: url(../images/common/people18.webp) no-repeat;
    background-size: cover;
    bottom: 10px;
  }
}

/*-- 飾り背景-------------------------------------------------*/
/*-- 人々（１） --*/
.pageback_fig1 {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 207px;
  height: 115px;
  background: url(../images/common/set7.webp) no-repeat;
  background-size: cover;
}

/*-- 日誌さん（気球）  --*/
.pageback_nissisan1 {
  position: absolute;
  width: 109px;
  height: 115px;
  background: url(../images/common/kikyuu.webp) no-repeat;
  background-size: cover;
}
.pageback_nissisan1.posi_1 {
  top: 10px;
  right: 15%;
}
.pageback_nissisan1.posi_2 {
  bottom: 10px;
  right: 4%;
}
.pageback_nissisan1.posi_3 {
  top: 10px;
  left: 15%;
}
.pageback_nissisan1.posi_4 {
  bottom: 10px;
  left: 0;
}

/*-- フッター-------------------------------------------------*/
footer {
  position: relative;
  background: #97d2c0;
  width: 100%;
  padding: 50px 0 0 0;
  overflow: hidden;
  /*-- コンテンツ --*/
  /*-- フッターのコピーライト --*/
}
@media (max-width: 760px) {
  footer {
    padding: 30px 0 0 0;
  }
}
footer .footer_box {
  max-width: 1200px;
  margin-inline: auto;
  /*-- ロゴ --*/
  /*-- テキスト --*/
}
footer .footer_box .footer_logo {
  max-width: 150px;
  height: auto;
  margin: 0 30px 30px 30px;
}
@media (max-width: 760px) {
  footer .footer_box .footer_logo {
    max-width: 30%;
    margin: 0 0 0 30px;
  }
}
footer .footer_box .footer_text {
  margin-bottom: 30px;
  flex: 1;
  /*-- フッターのリンク --*/
}
footer .footer_box .footer_text p {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
footer .footer_box .footer_text .footer_link {
  display: flex;
}
@media (max-width: 760px) {
  footer .footer_box .footer_text .footer_link {
    display: block;
  }
  footer .footer_box .footer_text .footer_link .width33 {
    margin-top: 30px;
    width: 100%;
  }
}
footer .footer_box .footer_text .footer_link ul li {
  list-style-type: none;
  margin-left: 30px;
  margin-bottom: 10px;
  text-decoration: none;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: #4d4d4d;
  /*-- ページ内リンク --*/
  /*-- ページタイトル --*/
}
footer .footer_box .footer_text .footer_link ul li a,
footer .footer_box .footer_text .footer_link ul li a:visited {
  font-size: 14px;
  font-weight: 600;
  color: #4d4d4d;
  transition: all 0.3s ease-in-out;
}
footer .footer_box .footer_text .footer_link ul li a:hover,
footer .footer_box .footer_text .footer_link ul li a:visited:hover {
  color: #4c0070;
}
footer .footer_box .footer_text .footer_link ul li.space20 {
  position: relative;
  list-style: none;
  list-style-position: outside;
  margin-bottom: 10px;
  padding-left: 1.25em;
}
footer .footer_box .footer_text .footer_link ul li.space20 span {
  position: absolute;
  left: 0;
  margin: 0;
}
footer .footer_box .footer_text .footer_link ul li.title a, footer .footer_box .footer_text .footer_link ul li.title a:visited {
  font-size: 16px;
  font-weight: 700;
  color: #452896;
  margin-bottom: 15px;
  transition: all 0.3s ease-in-out;
}
footer .footer_box .footer_text .footer_link ul li.title a:hover, footer .footer_box .footer_text .footer_link ul li.title a:visited:hover {
  opacity: 0.8;
}
footer .footer_copy {
  background: #fff;
  padding: 15px 0;
}
footer .footer_copy p {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #393939;
}

/*-- 上へ戻るボタン-------------------------------------------------*/
.top_go_btn {
  position: fixed;
  opacity: 0;
  bottom: 20px;
  right: 5%;
  width: 105px;
  height: 116px;
  z-index: 50;
}
.top_go_btn a {
  background: url(../images/common/go_to_top.webp) no-repeat;
  background-size: contain;
  width: 105px;
  height: 116px;
  display: block;
}
.top_go_btn.show {
  animation: showAnime 0.5s forwards;
}
@media (pointer: fine) {
  .top_go_btn.show:hover a {
    background: url(../images/common/kikyuu.webp) no-repeat;
    background-size: contain;
    width: 109px;
    height: 115px;
    display: block;
    animation: CustomAnimation 2s forwards, CustomAnimationFuwa 2s infinite 2s;
  }
}
@keyframes CustomAnimation {
  0% {
    transform: translateY(120px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes CustomAnimationFuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}
.top_go_btn.down {
  animation: downAnime 0.5s forwards;
}
@keyframes showAnime {
  0% {
    opacity: 0;
    transform: translateY(120px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes downAnime {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(120px);
  }
}

/*lityボックス スマホ用*/
@media (max-width: 760px) {
  .lity,
  .lity-wrap {
    overflow: auto;
  }
  .box_pop {
    max-height: 100%;
  }
  .lity-content > * {
    max-height: none !important;
  }
}
section.terms {
  margin-top: 100px;
}
@media (max-width: 760px) {
  section.terms {
    margin-top: 0;
  }
}
section.terms .contents_text {
  padding: 0;
}
@media (max-width: 760px) {
  section.terms .contents_text p {
    margin-left: 15px;
    margin-right: 15px;
  }
}
section.terms .top_text {
  margin-top: 30px;
}
section.terms .top_text p {
  margin-top: 30px;
  margin-left: 10px;
}
section.terms .box_terms {
  margin-top: 50px;
}
section.terms .box_terms p {
  margin-top: 20px;
  margin-left: 20px;
}
section.terms .box_terms ul {
  margin: 30px 0 30px 30px;
  padding: 30px;
  border: 2px solid #4faf92;
  border-radius: 3px;
  color: #333;
}
@media (max-width: 760px) {
  section.terms .box_terms ul {
    margin: 30px 15px 15px 15px;
  }
}
section.terms .box_terms ul li {
  margin-top: 20px;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}
section.terms .box_terms ul li:first-child {
  margin-top: 0;
}
section.terms .box_terms ul li span {
  position: absolute;
  left: 0;
}
section.terms h2 {
  color: #fff;
  background: #4faf92;
  border-radius: 5px;
  font-weight: 700;
  padding: 15px 20px;
}
section.terms h3 {
  color: #4faf92;
  border-top: 2px solid #4faf92;
  border-bottom: 2px solid #4faf92;
  font-weight: 700;
  padding: 10px 20px;
}
section.terms h4 {
  color: #4faf92;
  font-weight: 700;
  font-size: 18px;
  padding: 30px 20px 0 20px;
}

section.creator {
  margin-top: 100px;
}
@media (max-width: 760px) {
  section.creator {
    margin-top: 0;
  }
}
section.creator .contents_text {
  margin-top: 50px;
  max-width: 100%;
}
section.creator .contents_text h2 {
  font-size: 18px;
}
section.creator .contents_text .flex {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /*-- カードがつぶれてしまうため --*/
}
@media (750px < width <= 1100px) {
  section.creator .contents_text .flex {
    display: block;
  }
}
section.creator .contents_text .flex .images {
  margin-top: 30px;
  margin-inline: initial;
  width: 32%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /*-- カードがつぶれてしまうため --*/
  /* カード内の画像 */
  /* カード裏面・表面の共通スタイル */
  /* カード表面のスタイル */
}
@media (760px < width <= 1100px) {
  section.creator .contents_text .flex .images {
    width: 80%;
  }
}
@media (max-width: 760px) {
  section.creator .contents_text .flex .images {
    margin-top: 15px;
    width: 100%;
  }
}
section.creator .contents_text .flex .images::before {
  content: "";
  display: block;
  padding-top: 71.85%;
}
section.creator .contents_text .flex .images img {
  height: 100%;
  width: auto;
}
section.creator .contents_text .flex .images img.width {
  width: 100%;
  height: auto;
}
section.creator .contents_text .flex .images .back,
section.creator .contents_text .flex .images .front {
  box-shadow: 6px 10px 10px -8px rgba(0, 0, 0, 0.3);
  transition: all 0.6s;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
section.creator .contents_text .flex .images .front {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cdcdcd;
  overflow: hidden;
}
section.creator .contents_text .flex .images .back {
  transform: rotateY(-180deg);
  border: 1px solid #4d89d0;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
}
section.creator .contents_text .flex .images .back .card_prof {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 20px;
}
section.creator .contents_text .flex .images .back .card_prof .icon {
  border: 2px solid #696969;
  border-radius: 50%;
}
section.creator .contents_text .flex .images .back .card_prof .icon img {
  border-radius: 50%;
  height: auto;
}
section.creator .contents_text .flex .images .back .card_prof .prof {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 70%;
  /*-- カードがつぶれてしまうため --*/
}
@media (760px < width <= 1100px) {
  section.creator .contents_text .flex .images .back .card_prof .prof {
    padding: 0 50px 0 50px;
  }
}
@media (max-width: 1175px) {
  section.creator .contents_text .flex .images .back .card_prof .prof h3 {
    font-size: 0.8em;
  }
}
@media (max-width: 760px) {
  section.creator .contents_text .flex .images .back .card_prof .prof h3 {
    font-size: 14px;
  }
}
section.creator .contents_text .flex .images .back .card_prof .prof p {
  text-align: left;
  margin: 15px;
}
@media (max-width: 1175px) {
  section.creator .contents_text .flex .images .back .card_prof .prof p {
    font-size: 12px;
  }
}
section.creator .contents_text .flex .images .back .card_prof .prof p.small {
  font-size: 14px;
}
@media (max-width: 1175px) {
  section.creator .contents_text .flex .images .back .card_prof .prof p.small {
    font-size: 12px;
  }
}
section.creator .contents_text .flex .images .back .card_prof .btn_link-small_none {
  margin-top: 0;
  border-color: #452896;
  border: 2px solid #452896;
  box-shadow: 5px 5px 0px 0px #452896;
}
section.creator .contents_text .flex .images .back .card_prof .btn_link-small_none::before {
  background: linear-gradient(96deg, #452896 0%, #0076b8 90.89%);
}
section.creator .contents_text .flex .images .back .card_prof .btn_link-small_none::after {
  background: #452896;
}
@media (max-width: 1175px) {
  section.creator .contents_text .flex .images .back .card_prof .btn_link-small_none a {
    font-size: 12px;
    padding: 5px 15px;
  }
}
@media (min-width: 760px) {
  section.creator .contents_text .flex .images {
    /* ホバー時のカード裏面 */
    /* ホバー時のカード表面 */
  }
  section.creator .contents_text .flex .images:hover .front {
    transform: rotateY(180deg);
  }
  section.creator .contents_text .flex .images:hover .back {
    transform: rotateY(0);
  }
}
@media (max-width: 760px) {
  section.creator .contents_text .flex .images {
    /* タッチ時のカード裏面 */
    /* タッチ時のカード表面 */
  }
  section.creator .contents_text .flex .images.is-flipped .front {
    transform: rotateY(180deg);
  }
  section.creator .contents_text .flex .images.is-flipped .back {
    transform: rotateY(0);
  }
}
section.creator .contents_text.top_img h2 {
  position: relative;
  padding-left: 100px;
}
section.creator .contents_text.top_img h2::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 20px;
  width: 60px;
  height: 70px;
  transform: rotate(-13deg);
  background: url(../images/common/nissisan.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
section.creator .contents_text.about_img h2 {
  position: relative;
  padding-left: 100px;
}
section.creator .contents_text.about_img h2::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -5px;
  width: 100px;
  height: 63.69168357px;
  background: url(../images/common/set6.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
section.creator .contents_text.joinus_img h2 {
  position: relative;
  padding-left: 100px;
}
section.creator .contents_text.joinus_img h2::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 5px;
  width: 85px;
  height: 60.198938992px;
  background: url(../images/common/set1.webp) no-repeat;
  background-size: cover;
  z-index: 5;
}
section.creator .contents_text .card_prof_one {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 50px;
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 40%;
  margin-left: 50px;
}
@media (max-width: 760px) {
  section.creator .contents_text .card_prof_one {
    width: 100%;
    padding: 20px;
    gap: 20px;
    margin-left: 0;
  }
}
section.creator .contents_text .card_prof_one p {
  margin-top: 20px;
}
@media (max-width: 760px) {
  section.creator .contents_text .card_prof_one p {
    font-size: 14px;
  }
}
section.creator .contents_text .card_prof_one h3 {
  text-align: center;
}
@media (max-width: 1175px) {
  section.creator .contents_text .card_prof_one h3 {
    font-size: 0.8em;
  }
}
@media (max-width: 760px) {
  section.creator .contents_text .card_prof_one h3 {
    font-size: 14px;
  }
}
section.creator .contents_text .card_prof_one .icon_one {
  width: 150px;
  height: auto;
  border: 2px solid #696969;
  border-radius: 50%;
}
section.creator .contents_text .card_prof_one .icon_one img {
  border-radius: 50%;
  height: auto;
  font-size: 12px;
}
@media (max-width: 760px) {
  section.creator .contents_text .card_prof_one .btn_link-small_none.one_card {
    margin-top: 15px;
  }
  section.creator .contents_text .card_prof_one .btn_link-small_none.one_card a {
    padding: 5px 15px;
    font-size: 12px;
  }
}
section.creator .box_terms {
  margin-top: 50px;
}
section.creator .box_terms p {
  margin-top: 20px;
  margin-left: 20px;
}
section.creator .box_terms ul {
  margin: 30px 0 30px 30px;
  padding: 30px;
  border: 2px solid #4faf92;
  border-radius: 3px;
  color: #333;
}
section.creator .box_terms ul li {
  margin-top: 20px;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}
section.creator .box_terms ul li:first-child {
  margin-top: 0;
}
section.creator .box_terms ul li span {
  position: absolute;
  left: 0;
}
section.creator h2 {
  color: #fff;
  background: #4faf92;
  border-radius: 5px;
  font-weight: 700;
  padding: 15px 20px;
}
section.creator h3 {
  color: #4faf92;
  border-top: 2px solid #4faf92;
  border-bottom: 2px solid #4faf92;
  font-weight: 700;
  padding: 10px 20px;
}
section.creator h4 {
  color: #4faf92;
  font-weight: 700;
  font-size: 18px;
  padding: 30px 20px 0 20px;
}

/*-- ポップアップ内の画像レイアウト --*/
.images--popup .images--flex-images {
  flex: 1;
  max-width: calc(33.3% - 10px);
  margin: 0 5px;
}
.images--popup .images--flex-images img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.images--popup .images--flex-images:first-child {
  margin-left: 0;
}
.images--popup .images--flex-images:last-child {
  margin-right: 0;
}/*# sourceMappingURL=inpage.css.map */