@charset "UTF-8";
/* Desktops and laptops */


.top-slide {
  max-width: 950px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 72px;
}

/* 一枚表示の時 */
.top-slide {
  max-width: 300px;
}

.top-slide-img {
  width: 300px;
  height: 200px;
}

.top-slide-img a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.top-slide-img img {
  width: 100%;
  height: 100%;
}



.top-slide .slick-slide {
  transition: all 0.3s;
}

.top-slide .slick-slide:hover {
  filter: brightness(1.15);
}


.top-page .slider-img {
width: 300px;
height: 200px;
}

.top-page .slider-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.3s;
}

.top-page .slick-track {
display: flex;
justify-content: flex-start;  /* スライドを左寄せ */
gap: 16px;  /* スライド間に16pxの隙間を追加 */
}



/* カスタム矢印ボタン */
.slick-prev, .slick-next {
background-color: transparent;
border: none;
width: 40px;  /* 矢印ボタンのサイズ */
height: 40px;
background-size: contain;  /* 画像をボタンサイズに合わせる */
background-repeat: no-repeat;  /* 画像が繰り返し表示されないように */
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}

.slide-arrow {
background-color: transparent;
bottom: 0;
height: 0;
margin: auto;
position: absolute;
top: 0;
width: 0;
}
.prev-arrow {
width: 0;
height: 0;
border-style: solid;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #9f9f90;
border-left: 0;
left: -25px;
}
.next-arrow  {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #9f9f90;
  border-right: 0;
  right: -25px;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
}

.news-section {
  margin: 34px auto 60px auto;
  max-width: 768px;
  width: 100%;
  box-sizing: border-box;
}

 .news {
  margin: 16px auto 60px auto;
  padding: 7px 35px;
  box-sizing: border-box;
  max-width: 768px;
  height: 230px;
  width: 100%;
  /* background: #fff; */
  /* border: #4cb57d solid 2px; */
}

@media screen and (max-width: 768px) {
   .news {
    height: auto;
  }
}

.news-section .title h2 {
  color: #000;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px; /* 138.462% */
  padding-left: 40px;
  /* position: relative; */
}

 .news ul {
  height: 230px;
}
 .news .news_list ul li {
  margin-bottom: 7px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 30px;
}

 .news .news_list ul li span {
  line-height: 1.7;
  display: inline-block;
  width: 95px;
  font-size: 1.3rem;
}

 .news .news_list ul li a,
 .news .news_list ul li p {
  color: #000;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  width: 630px;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px; /* 175% */
  padding-bottom: 6px;
}

 .news .news_list ul li span {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px; /* 175% */
  width: auto;
}

@media screen and (max-width: 768px) {
  .news .news_list ul li span {
    width: 100%;
  }
}

 .news .news_list ul li a {
  position: relative;
  display: block;
  /* padding-left: 14px; */
  transition: all 0.3s;
  text-underline-offset: 4px; /* ← 線をテキストから離す */
  width: 100%;
}

.a-wrap {
  transition: all 0.3s;
  display: inline-block;
  width: 100%;
  position: relative;
}

.a-wrap:hover {
  color: #23B659;
}

.news-title {
  text-decoration: underline;
  text-decoration-color: #000;
  transition: text-decoration-color 0.3s;
  transition: all 0.3s;
  padding-left: 30px;
}

@media screen and (max-width: 768px) {
  .news-title {
    padding-left: 0;
  }
}

.news-title:hover {
  /* border-bottom: 1px solid #23B659; */
  text-decoration-color: #23B659;
}

 .news .news_list dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 320px;
  margin: 0 auto;
}
 .news .news_list dl dt {
  width: 150px;
  text-align: center;
  margin-top: 20px;
}
 .news .news_list dl dt .blog a {
  color: #4cb57d;
  text-decoration: underline;
  font-size: 1.4rem;
}
 .news .news_list dl dt .blog a:hover {
  text-decoration: none;
}
 .news .news_list dl dt .blog a:before {
  content: '';
  display: inline-block;
  background: url(../images/common/sns_ameba.png) left/100% no-repeat;
  width: 29px;
  height: 29px;
  margin-right: 10px;
  vertical-align: middle;
}

.news__more {
  text-align: center;
}

.news__more-link {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 20px;
  border: 2px solid #000;
  border-radius: 10px;
  transition: all 0.3s;
}

.news__more-link:hover {
  color: #23B659;
  border: 2px solid #23B659;
}

.top-banner__inner {
  padding-left: 10px;
  padding-right: 10px;
}

.svg-wrap {
  max-width: 990px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 28px;
  margin-top: 56px;
  margin-bottom: 160px;
}

.svg-link {
  display: block;  /* aタグがブロック要素になり、全体を占めるように */
  width: 65%;     /* 親要素に合わせて横幅を100%に */
  text-decoration: none;  /* リンクの下線を消す */
}

@media screen and (max-width: 768px) {
  .svg-link {
    width: 100%;
  }
}

.svg-icon {
  aspect-ratio: 540 / 337;
  width: 100%;
  height: 100%;
  /* height: auto; */
  background: #71BF78;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  .svg-icon {
    width: 100%;
  }
}

.svg-icon:hover {
  background: #fff;
}

.svg-icon svg {
  /* width: 100%;
  height: 100%;
  object-fit: cover; */
}

.svg-icon .svg-bg {
  /* fill: #71BF78;
  transition: all 0.3s ease; */
}

/* 他のpath（アイコン部分） */
.svg-icon path:not(.svg-bg) {
  fill: #ffffff; /* 初期状態では白 */
  transition: all 0.3s ease; /* 変化のアニメーション */
}

/* ホバー時に背景の色を白に変更 */
.svg-icon:hover .svg-bg {
  fill: #ffffff; /* 背景を白 */
}

/* ホバー時にアイコン部分の色を#71BF78に変更 */
.svg-icon:hover path:not(.svg-bg) {
  fill: #71BF78; /* アイコン部分を緑色に */
}

.svg-icon {
  border: 5px solid transparent; /* 初期状態では透明な枠線 */
  transition: border 0.3s ease; /* 枠線のアニメーション */
  border-radius: 16px;
  cursor: pointer;
  transition: border 0.3s ease; /* スムーズにアニメーション */
}

/* ホバー時に画像全体を囲む枠線を追加 */
.svg-icon:hover {
  border: 5px solid #71BF78;
}

.svg-parts {
  /* display: flex; */
  width: 50%;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  .svg-parts {
    width: 100%;
  }
}

.svg-parts a {
  display: block;
  width: 100%;
  /* height: 100%; */
  height: auto;
}

.svg-part {
  aspect-ratio: 421 / 154;
  background-color: #71BF78; /* 四角い背景の色 */
  color: #ffffff; /* 文字色 */
  max-width: 421px; /* 幅 */
  width: 100%;
  height: auto;
  /* height: 154px; */
  display: flex;
  justify-content: center; /* 水平方向中央揃え */
  align-items: center; /* 垂直方向中央揃え */
  border-radius: 16px; /* 角を少し丸くする（必要に応じて） */
  font-size: 40px; /* 文字サイズ */
  font-weight: bold; /* 文字を太く */
  border: 5px solid transparent; /* 初期状態では透明な枠線 */
  /* transition: all 0.3s ease; */
  cursor: pointer;
}

.svg-part svg {
  width: 100%;
  height: 100%;
  height: auto;
  object-fit: cover;
}

.svg-part:hover {
  color: #71BF78;
  background-color: #fff;
  border: 5px solid #71BF78;
}

.svg-parts a + a {
  margin-top: 18px;
}

@media screen and (min-width: 769px) {

  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }

  /* slick */
  .slider-mv {
    padding-top:45px;
  }
  .slider-mv .item {
    margin: 0 10px;
  }
  .slider.slick-initialized {
  display: block; /*slick-initializedが付与されたら表示*/
  }
  .slider-mv .slick-next {
    display: none !important;
  }

  .slider-mv .slick-slide  {
    width: 990px;
    height: 330px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .slider-mv .slick-slide:hover {
    filter: brightness(1.15);
  }

  /* content */
  #wrapper {
    background: #FFFBCE;
  }


  #wrapper .btn {
    max-width: 300px;
    width: 100%;
    margin: 200px auto 0 auto;
  }

  #wrapper .btn a {
    /* display: block; */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    width: 100%;
    height: 60px;
    /* padding: 13px; */
    text-align: center;
    line-height: 45px;
    border-radius: 50px;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 36px; /* 200% */
    transition: all 0.3s;
  }

  #wrapper .btn a span {
    margin-left: 24px;
    font-weight: 700;
  }

  /* #wrapper #main .btn a:hover {
    color: #ffb600;
  } */

  #wrapper #main .title {
    font-size: 2.6rem;
    margin-bottom: 35px;
    text-align: center;
  }

  #main {
    background: #fff;
  }

  #wrapper .about {
    position: relative;
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 330px;
  }
  
  .about__bg {
    max-width: 1100px;
    width: 100%;
    height: auto;
    /* min-height: 330px; */
  }

  .about__inner {
    padding: 40px 0 50px 0;
    max-width: 990px;
    width: 100%;
    height: 330px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    background: url("../images/top/top-about.png") no-repeat;
    background-position: center center;
    background-size: contain;
  }

  #wrapper .about h2 {
    color: #000;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: 44px; /* 169.231% */
  }
  #wrapper .about .read {
    max-width: 768px;
    text-align: center;
    line-height: 2;
    margin: 0 auto;
    font-weight: 500;
    margin-top: 41px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
  }
  #wrapper .about .image .i01 {
    position: absolute;
    top: 70px;
    left: 20px;
  }
  #wrapper .about .image .i02 {
    position: absolute;
    bottom: 10px;
    left: 170px;
  }
  #wrapper .about .image .i03 {
    position: absolute;
    top: 70px;
    right: 20px;
  }
  #wrapper .about .image .i04 {
    position: absolute;
    top: -175px;
    right: 230px;
  }
  #wrapper .about .btn a {
    background: #F39800;
    color: #fff;
    border: #F39800 solid 1px;
    transition: all 0.3s;
  }
  #wrapper .about .btn a:hover {
    background: #fff;
    color: #F39800;
    border: #F39800 solid 1px;
  }

  #wrapper .about .btn a svg path {
    stroke: white;
    transition: stroke 0.3s;
  }
  
  /* ホバー時の状態（オレンジの矢印） */
  #wrapper .about .btn a:hover svg path {
    stroke: #F39800;
  }

  #wrapper .course {
    width: 1100px;
    margin: 0 auto 80px auto;
  }
  #wrapper .course .title {
    display: block;
    background-repeat: no-repeat;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../images/top/title_course.png) center/100% no-repeat;
    width: 284px;
    height: 109px;
    margin: 0 auto;
  }
  #wrapper .course ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-top: 45px;
  }
  #wrapper .course ul li {
    width: 350px;
    position: relative;
  }
  #wrapper .course ul li h4 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 10px;
  }
  #wrapper .course ul li h4.icon01:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_hake.png) left/100% no-repeat;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li h4.icon02:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_pen.png) left/100% no-repeat;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li h4.icon03:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_book.png) left/100% no-repeat;
    width: 30px;
    height: 28px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li .image {
    margin-bottom: 20px;
  }
  #wrapper .course ul li p {
    font-size: 1.5rem;
  }
  #wrapper .course ul li p span {
    color: #ff0000;
    font-size: 1.3rem;
  }
  #wrapper .books {
    background: url("../images/top/bg_books_pt.png") repeat;
    padding: 70px 0;
    width: 100%;
  }
  #wrapper .books .books_inner {
    background: #fff;
    padding: 50px 0;
    margin: 0 auto;
    width: 1100px;
  }
  #wrapper .books .inner {
    padding: 40px 40px 25px;
    border: #ccc dashed 1px;
    border-radius: 5px;
    margin: 0 auto;
    width: 950px;
  }
  #wrapper .books .title {
    display: block;
    background-repeat: no-repeat;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../images/top/title_books.png) center/100% no-repeat;
    width: 354.5px;
    height: 114px;
    margin: 0 auto;
  }
  #wrapper .books .center-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #wrapper .books .center-item .item {
    text-align: center;
    margin: 0 10px 20px 10px;
  }
  #wrapper .books .center-item .item h4 {
    line-height: 1.7;
    text-align: center;
  }
  #wrapper .books .center-item .item .image {
    margin-bottom: 15px;
  }
  #wrapper .books .slick-slide img {
    margin: 0 auto;
    width: 172px;
    max-width:100%;
    max-height:100%;
  }
  #wrapper .books .slider.slick-initialized {
  display: block; /*slick-initializedが付与されたら表示*/
  }
  #wrapper .books .slick-next, #wrapper .books .slick-prev {
    display: none !important;
  }
  #wrapper .books .btn a {
    background: #4cb57d;
    color: #fff;
  }
  #wrapper .books .btn a:hover {
    background: #fff;
    color: #4cb57d;
    border: #4cb57d solid 1px;
  }
}
/* Smartphones (portrait and landscape) */
@media screen and (max-width: 768px) {
  * {
    box-sizing: border-box;
  }

  .pc {
    display: none !important;
  }
  .sp {
    display: block;;
  }

  img {
    width: 100%;
    height: auto;
  }
  #wrapper .slider-mv .item {
    text-align: center;
    overflow: hidden;
  }
  .slick-prev, .slick-next {
    display: none !important;
  }

  .slider-mv .slick-slide {
    width: 100%;
    height: 215px;
  }


  .slider-mv .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .top-slide {
    /* max-width: 100%; */
    margin-top: 20px;
  }

  .top-page .slider-img {
    width: 200px;
    height: 133px;
  }

  .top-page.slider-img img {
    width: 100%;
    height: auto;
  }

  #wrapper #main {
    margin-top: 30px;
  }

  #wrapper #main .btn {
    max-width: 300px;
    width: 100%;
    margin: 200px auto 0 auto;

  }
  #wrapper #main .btn a {
    display: block;
    max-width: 240px;
    width: 100%;
    height: 48px;
    padding: 13px;
    text-align: center;
    line-height: 45px;
    border-radius: 50px;
    color: #FFF;
    font-size: 14px;
    font-weight: 900;
    line-height: normal;
    letter-spacing: -0.7px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s;
    position: relative;
  }

    #wrapper #main .btn a:hover {
    color: #ffb600;
  }

  #wrapper #main .btn a span {
    position: absolute;
    top: 32%;
    right: 20px;
  }

  #wrapper #main .title {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-align: center;
  }

  #wrapper #main .title {
    font-size: 2.6rem;
    margin-bottom: 35px;
    text-align: center;
  }
  #wrapper .about {
    background: #fff;
    position: relative;
    /* width: 990px; */
    margin: 0 auto;
    padding: 0px 0 0px 0;
  }
  
  .about__inner {
    /* background: #fff; */
    padding: 30px 10px;
    position: relative;
    z-index: 1;
  }

  #wrapper .about h2 {
    font-size: 17px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
  }
  #wrapper .about .read {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 175% */
    letter-spacing: -0.6px;
    text-align: center;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 34.5px;
  }
  #wrapper .about .image .i01 {
    position: absolute;
    top: 70px;
    left: 20px;
  }

  #wrapper .about .btn {
    margin-top: 34.5px;
  }

  #wrapper .about .btn a {
    background: #ffb600;
    color: #fff;
  }
  #wrapper .about .btn a:hover {
    background: #fff;
    color: #ffb600;
    border: #ffb600 solid 1px;
  }

  .news-section {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 0;
  }

  #wrapper .news {
    /* display: flex; */
    align-items: center;
    padding: 10px 10px 9px;
    /* max-width: 350px; */
    height: auto;
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    /* border: 1px solid #000; */
  }

  #wrapper .news .news_list {
    height: 100%;
    width: 100%;
    /* overflow: hidden; */
  }

  #wrapper .news .news_list ul li span {
    font-size: 14px;
  }

  .news-section .title h2 {
    padding-left: 0;
    font-size: 17px;
  }

  #wrapper .news .news_list ul {
    /* height: 126px; */
    padding-left: 0px;
    height: auto;
  }

  .a-wrap {
    font-size: 13px;
    margin-top: 10px;
  }

  #wrapper .news .news_list ul li {
    margin-bottom: 0;
  }

  #wrapper .news .news_list ul li a {
    display: inline-block;
    padding-right: 20px; /* >の分だけスペースを確保 */
    font-size: 13px;
    line-height: 1.6;
  }

  #wrapper .news .news_list ul li a::after {
    content: ">";
    position: absolute;
    top: 45%;
    right: 0;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: normal;
  }

  .news-date {
}

  .about__bg {
    max-width: 746px;
    width: 100%;
    z-index: 2;
    position: relative;
    padding-bottom: 0px;
  }

  .about__inner {
    height: 320px;
    background: url("../images/top/sp/top-about-sp.png") no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 10px;
    margin-right: 10px;
  }

  .top-banner {
    margin-top: -80px;
  }

  .svg-wrap {
    flex-direction: column;
    max-width: 350px;
    width: 100%;
    margin-bottom: 100px;
    margin-top: 70px;
    gap: 40px;
  }

  .svg-icon {
    max-width: 360px;
    width: 100%;
    height: 218px;
  }

  .svg-parts {
    /* display: flex; */
    margin-top: -15px;
  }

  .svg-part {
    max-width: 350px;
    width: 100%;
    height: 128px;
    font-size: 32px;
  }

  .svg-parts a + a {
    margin-top: 26px;
  }

  #wrapper .course {
    width: 85%;
    margin: 0 auto 80px auto;
  }
  #wrapper .course .title {
    display: block;
    background-repeat: no-repeat;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../images/top/title_course.png) center/100% no-repeat;
    width: 284px;
    height: 109px;
    margin: 0 auto;
  }
  #wrapper .course .title:after {
    display: none;
  }
  #wrapper .course ul {
    margin-top: 45px;
  }
  #wrapper .course ul li {
    position: relative;
    margin-bottom: 35px;
  }
  #wrapper .course ul li h4 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
  }
  #wrapper .course ul li h4.icon01:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_hake.png) left/100% no-repeat;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li h4.icon02:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_pen.png) left/100% no-repeat;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li h4.icon03:before {
    content: '';
    display: inline-block;
    background: url(../images/common/icon_book.png) left/100% no-repeat;
    width: 30px;
    height: 28px;
    margin-right: 10px;
    vertical-align: middle;
  }
  #wrapper .course ul li .image {
    margin-bottom: 15px;
  }
  #wrapper .course ul li p {
    font-size: 1.5rem;
  }
  #wrapper .course ul li a {
    display: block;
  }
  #wrapper .books {
    width: 90%;
    margin: 0 auto 30px auto;
    padding-bottom: 40px;
    border-bottom: #ccc dashed 1px;
  }
  #wrapper .course ul li p span {
    color: #ff0000;
    font-size: 1.3rem;
  }
  #wrapper .books .title {
    display: block;
    background-repeat: no-repeat;
    text-indent: 120%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../images/top/title_books.png) center/100% no-repeat;
    height: 0px;
    margin: 0 auto;
    padding-top: 32%;
  }
  #wrapper .books .title:after {
    display: none;
  }
  #wrapper .books .center-item .item {
    text-align: center;
    overflow: hidden;
  }
  #wrapper .books .center-item .item h4 {
    font-size: 1.4rem;
    line-height: 1.7;
    float: right;
    width: 90%;
    text-align: left;
    margin-top: 10px;
  }
  #wrapper .books .center-item .item .image {
    width: 65%;
    margin: 0 auto;
  }
  #wrapper .books .center-item .item a {
    display: block;
  }
  #wrapper .books .slick-prev, #wrapper .books .slick-next {
    display: none !important;
  }
  #wrapper .books .btn {
    margin-top: 50px !important;
  }
}


@media screen and (min-width: 769px) and (max-width: 1000px) {
  /* 770px以上かつ1050px以下のスタイル */
  #wrapper .about .image .i01,
  #wrapper .about .image .i02,
  #wrapper .about .image .i03 {
    display: none;
  }
}

.cta {
  margin-top: 60px;
  margin-bottom: 162px;
  padding-left: 20px;
  padding-right: 20px;
  height: auto;
}

@media screen and (max-width: 768px) {
  .cta {
    margin-top: 30px;
    margin-bottom: 100px;
    padding-left: 45px;
    padding-right: 45px;
  }
}

.cta__list {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  gap: 45px; /* アイコン間のスペース */
}

@media screen and (max-width: 768px) {
  .cta__list {
    gap: 25px;
    justify-content: center;
  }
}

.cta__icon {
  position: relative; /* 子要素で絶対位置を使うため */
  width: 100%;
  height: 250px;
}

@media screen and (max-width: 768px) {
  .cta__icon {
    aspect-ratio: 299 / 109;
    overflow: hidden;
    height: auto;
  }
}

.icon-image {
  position: absolute;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .icon-image {
    aspect-ratio: 299 / 109;
    overflow: hidden;
  }
}

.icon-image img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
.icon-image img {
  width: 100%;
}
}

.icon-image picture {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.cta__list {
  height: auto;
}

/* PCの時の横並び */
@media screen and (min-width: 768px) {
  .cta__list {
    flex-direction: row; /* 横並び */
  }
  .cta__icon {
    flex: 1 1 30%; /* 横並びで3つ並べる */
    max-width: 300px;
  }
}

/* SPの時の縦並び */
@media screen and (max-width: 767px) {
  .cta__list {
    flex-direction: column; /* 縦並び */
  }
  .cta__icon {
  }
}

/* ホバー時に画像を切り替え */

.icon-image .normal,
.icon-image .hover {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 初期状態で非表示 */
  transition: opacity 0.8s ease; /* ふわっとフェードイン・アウト */
}

@media screen and (max-width: 768px) {
  .icon-image .normal,
.icon-image .hover {
  height: 100%;
}
}

.icon-image .normal {
  opacity: 1;  /* 通常の画像は最初に表示 */
}

.icon-image:hover .normal {
  opacity: 0;  /* ホバー時に通常画像は消える */
}

.icon-image .hover {
  opacity: 0;  /* ホバー時に表示される画像 */
}

.icon-image:hover .hover {
  opacity: 1;  /* ホバー時にホバー画像を表示 */
}