@charset "utf-8";

.hero-box:before {
  content: "PR";
  background: #000;
  color: #fff;
  text-align: center;
  width: fit-content;
  margin-right: 1rem;
  font-size: 16px;
  padding: 0 1rem;
  line-height: 1.5;
  text-shadow: none;
  display: block;
  position: absolute;
  top: 1rem;
  left: -4rem;
}

.hero-box {
  position: relative;
}

p.imgarea.caption img {
  width: 56rem;
  display: block;
  margin: 1rem auto;
}

.box-border-green.box-intro {
  margin-bottom: 10rem;
  border: solid 6px #269999;
  padding: var(--s2) var(--s5);
  /* padding: var(--s2) 25rem var(--s2) var(--s5); */
  position: relative;
}



/* oki_20220509 */

@media screen and (max-width: 767px) {
  .kanren {
    padding: 20px 10px !important;
  }

  .kanren ul {
    margin: 2rem !important;
  }

  .midasi {
    font-size: 2rem !important;
  }



}





.kanren {
  /* border: 3px solid #ff5252; */
  /* border: 6px solid #75cc63; */
  padding: 20px 30px;
  /* margin: 30px 0; */
  margin: 60px auto 30px;
  position: relative;
  box-sizing: border-box;
  border-radius: 3.2rem;
  z-index: 0;
  max-width: 88rem;
}

.midasi {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 15px;
  color: #269999;
  font-size: 2.4rem;
  background: #e7efcc url(img/h3_icon.png) no-repeat var(--s3) center/3rem auto;
  border-radius: 1.6rem;
  padding: var(--s2) var(--s3) var(--s2) var(--s9);
}

.kanren br {
  display: none;
}

.kanren ul {
  margin: 4rem 2rem;
}

/* アコーディオンのときに下記追加 */
.readmore-content {
  position: relative;
  overflow: hidden;
  height: 100px;
}

.readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
  height: 50px;
  z-index: 1;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}

/* 続きを読むボタン */
.readmore-label {
  display: table;
  bottom: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 5px auto;
  z-index: 2;
  padding: 6px 15px;
  background-color: #ff7777;
  background-color: #75cc63;
  border-radius: 20px;
  font-weight: bold;
  color: #FFF;
}

.readmore-label:before {
  content: "\7D9A\304D\3092\8AAD\3080";
}

.readmore-check {
  display: none;
}

/*チェック時にボタンを非表示*/
.readmore-check:checked~.readmore-label {
  position: static;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
  /* display: none; */
}

.readmore-check:checked~.readmore-label:before {
  content: "\9589\3058\308B";
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked~.readmore-content {
  height: auto;
}

/*チェック時グラデーション等を削除*/
.readmore-check:checked~.readmore-content::before {
  display: none;
}

/* oki_20220509 */

.point-ttl {
  padding: 0.5em;
  color: #010101;
  background: #e7efcc;
  border-bottom: solid 3px #269999;
  margin-top: 3rem;
  color: #269999;
  font-weight: bold;
}

.section-selection .more-content {
  display: block !important;
}

.section-selection .btn-more {
  display: none;
}

.box-selection .box-detail-head-info {
  margin: 20px 0;
  min-height: 227px;
}

.box-selection__button {
  position: relative;
  bottom: 0;
  width: 90%;
  margin-top: 20px;
}

/*2024.04.01*/
.custom_slider {
  margin-bottom: 2rem;
}

.custom_slider .slider .slick-slide {
  width: 18rem;
  padding: 0 1rem;
}

.custom_slider .slider-item__image {
  width: 18rem;
  height: 12rem;
}

.custom_slider .slider .slick-prev,
.custom_slider .slider .slick-next {
  width: 3rem;
  height: 3rem;
  z-index: 9;
  top: 8.4rem;
}

.custom_slider .slider .slick-next {
  right: 4rem;
  background: #269999 url(img/arrow_white_right.svg) no-repeat center/0.9rem auto;
  border-radius: 100vh;
}

.custom_slider .slider .slick-prev {
  left: 4rem;
  background: #269999 url(img/arrow_white_left.svg) no-repeat center/0.9rem auto;
  border-radius: 100vh;
}

.section-box.section-problem {
  margin: 0 0 160px;
}

.section-problem-inner {
  background-color: #e7efcc;
  background-position: center top, center 57rem;
  padding: 100px 0 40px;
}

.box-problem-last {
  padding-top: var(--s20);
  padding-bottom: var(--s15);
  position: absolute;
  height: 229px;
  width: 100%;
  left: 0;
}

.hero-box__title {
  font-size: 4rem;
}

.hero-box__title small {
  font-size: 3rem;
}

.hero-box__title-sub {
  text-align: center;
  color: #f9845c;
  font-weight: bold;
  font-size: 2rem;
  position: relative;
  clear: both;
}



/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

@media screen and (min-width: 768px) {
  /*/////////////PC用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/

  .l-center.l-main--low .box-selection__button a {
    padding: 2rem 0;
  }

  .sp {
    display: none;
  }

  .box-intro {
    padding: var(--s2) 2rem var(--s2) var(--s5);
  }


  span.small-letters {
    font-size: 1.6rem;
  }

  .box-selection {
    padding: 0 0.8rem;
    min-height: 108rem;
  }

  small.note {
    font-size: 70%;
  }

  .image-wrap {
    text-align: center;
  }

  .image-wrap {
    margin-bottom: 5rem;
  }
}



/*----------------------------------------------------
        SPサイトcss
    ----------------------------------------------------*/

@media screen and (max-width: 767px) {
  /*/////////////SP用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/

  .box-selection-point-list li+li {
    margin-top: 1.3rem;
  }

  .hero-box:before {
    left: 1rem;
  }

  ul li {
    line-height: 2;
  }


  p:last-child {
    line-height: 2.2;
  }

  .box-detail-reason-item__title {
    line-height: 2;
  }

  .l-float p {
    line-height: 2;
  }

  .box-detail-overview {
    padding: 2%;
  }

  p {
    line-height: 2.2;
  }

  .box-border-green {
    padding: 2rem;
  }

  .box-detail-button-illust-balloon.left {
    font-size: 1.6rem;
    width: 20rem;
  }

  .box-border-green.box-intro {
    padding: 2rem;
    margin-bottom: 5.5rem;
  }

  .box-intro__illust {
    bottom: -6rem;
  }

  .box-detail-reason {
    padding: 3%;
  }

  .l-center {
    padding: 0 1rem;
  }

  .box-selection .box-detail-head-info {
    margin: 20px 0;
    min-height: none;
  }

  .box-selection {
    padding: 0 0.8rem;
    min-height: 107rem;
  }

  .box-border-green.box-intro {
    margin-top: var(--s2);
    margin-bottom: 6rem;
    padding: 0 var(--s3) var(--s3);
    line-height: 1.6;
  }

  .box-problem-last {
    padding-top: var(--s15);
  }

  .hero-box__title {
    font-size: 2.8rem;
  }

  .hero-box__title small {
    font-size: 2.4rem;
  }

  .hero-box__title-sub {
    font-size: 1.6rem;
  }

}