/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* 共通 */
.main-area {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.8666666667;
  /* overflow-x: hidden; */
  text-align: center;
  color: #000;
  font-size: calc(15* (100vw / 375));
}

.main-area * {
  letter-spacing: 0.05em;
}

.img_wrap {
  font-size: 0;
  line-height: 0;
}

.main-area img,
.main-area picture {
  width: 100%;
  height: auto;
}

.main-area a,
.main-area picture {
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .main-area .pcOnly {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .main-area {
    font-size: 1.5rem;
  }

  .main-area a {
    transition: all 0.3s;
  }

  .main-area .spOnly {
    display: none !important;
  }

}

/* アニメーション */
.js-fadeIn {
  transition-property: opacity, transform;
  transition-duration: 2000ms, 1500ms;
  transform-style: ease;
  opacity: 0;
}

.js-fadeIn.showFade {
  opacity: 1;
}

.js-fadeIn.mainimg {
  transform: translateY(50px);
}

.js-fadeIn.mainimg.showFade {
  transform: translateY(0);
}

.js-fadeIn.delay {
  transition-delay: 0.2s;
}



/* ===============================================
* top__wrapper *
=============================================== */
h2+p {
  margin-top: calc(34* (100vw /375));
}

@media screen and (min-width: 768px) {
  .top__wrapper {
    width: 120rem;
    margin: auto;
  }

  h2+p {
    margin-top: 5.3rem;
  }
}

/* ===============================================
* sec common *
=============================================== */
.sec {
  position: relative;
  padding-bottom: calc(55* (100vw /375));
  overflow: hidden;
}

.sec+.sec {
  margin-top: calc(26* (100vw /375));
}

.sec::before {
  content: "";
  position: absolute;
  background: #F9F9F9;
  width: 100%;
  height: 100%;
  left: 0;
  top: calc(470* (100vw /375));
  z-index: -1;
}

.sec--ttl-wrap {
  margin: calc(44* (100vw /375)) auto 0;
  width: calc(355* (100vw /375));
}

.mainimg {
  margin-top: calc(37* (100vw /375));
}

.sec--ttl-wrap p {
  margin-top: calc(34* (100vw /375));
}

.sec--content-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(39* (100vw /375)) calc(8* (100vw /375));
  margin-top: calc(33* (100vw /375));
}

.style_container_detail_credit {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: calc(21*(100vw / 375));
  margin-top: calc(31*(100vw / 375));
  font-size: calc(12* (100vw /375));
  width: calc(355* (100vw /375));
  margin: calc(18* (100vw /375)) auto 0;
}

.style_container_detail_credit li {
  line-height: 1.8;
}

.style_container_detail_credit a {
  width: 100%;
  position: relative;
  display: block;
}

.style_container_detail_credit a::before {
  content: "";
  position: absolute;
  background: url(../img/svg/sp/buy.svg) center/contain no-repeat;
  width: calc(88* (100vw /375));
  height: calc(34* (100vw /375));
  right: 0;
  top: calc(4* (100vw /375));
  display: block;
}

.style_container_detail_credit .item_buy {
  text-decoration: underline;
  padding-left: calc(10* (100vw / 375));
}

@media screen and (max-width: 767px) {
  .img02 {
    width: calc(183* (100vw /375));
    margin-top: calc(140* (100vw /375));
  }

  .img03 {
    width: calc(165* (100vw /375));
  }

  .sec2 .sec--content-wrap {
    margin-top: calc(43* (100vw /375));
  }

  .img05 {
    width: calc(188* (100vw /375));
  }

  .img06 {
    width: calc(160* (100vw /375));
    margin-top: calc(140* (100vw /375));
  }

  .sec3 .sec--content-wrap {
    margin-top: calc(43* (100vw /375));
  }

  .img08 {
    width: calc(155* (100vw /375));
    margin-top: calc(130* (100vw /375));
  }

  .img09 {
    width: calc(193* (100vw /375));
  }

  .sec4 .sec--content-wrap {
    margin-top: calc(35* (100vw /375));
  }

  .img11 {
    width: calc(192* (100vw /375));
  }

  .img12 {
    margin-top: calc(140* (100vw /375));
    width: calc(156* (100vw /375));
  }

  .sec5 .sec--content-wrap {
    margin-top: calc(46* (100vw /375));
  }

  .img14 {
    width: calc(180* (100vw /375));
    margin-top: calc(128* (100vw /375));
  }

  .img15 {
    width: calc(168* (100vw /375));
  }

  .sec6 .sec--content-wrap {
    margin-top: calc(35* (100vw /375));
    gap: calc(37* (100vw /375)) 0;
  }

  .img17 {
    width: calc(182* (100vw /375));
  }

  .img18 {
    margin-top: calc(140* (100vw /375));
    width: calc(172* (100vw /375));
  }

  .style_container_detail_credit .credit-last::before {
    top: calc(16* (100vw /375));
  }
}

@media screen and (min-width: 768px) {
  .sec {
    padding-bottom: 11rem;
  }

  .sec+.sec {
    margin-top: 3rem;
  }

  .sec::before {
    top: 74.4rem;
  }

  .sec--ttl-wrap {
    margin: 10.5rem auto 0;
    width: 70rem;
  }

  .mainimg {
    margin-top: 3.7rem;
  }

  .sec--ttl-wrap p {
    margin-top: 3.4rem;
  }

  .sec--content-wrap {
    display: grid;
    width: 100rem;
    justify-content: initial;
    gap: 0;
    margin: 5.3rem auto 0;
  }

  .style_container_detail_credit {
    gap: 2rem;
    gap: 1.6rem;
    margin: 1.6rem 0 0 0;
    font-size: 1.4rem;
    width: initial;
  }

  .style_container_detail_credit li {
    line-height: 2;
  }

  .style_container_detail_credit a::before {
    background: url(../img/svg/buy.svg) center/contain no-repeat;
    width: 6.8rem;
    height: 2.8rem;
    top: 1.3rem;
  }

  .sec1 .sec--content-wrap {
    grid-template-columns: 1.6rem 52.4rem auto;
    grid-template-rows: 33.8rem 37.3rem auto;
  }

  .img02 {
    width: 44.4rem;
    grid-area: 2/2/3/3;
  }

  .img03 {
    width: 40rem;
    grid-area: 1/3/2/4;
  }

  .sec1 .credit_wrap {
    width: 34.7rem;
    grid-area: 3/3/4/4;
  }

  .sec2 {
    padding-bottom: 16rem;
  }

  .sec2 .sec--content-wrap {
    grid-template-columns: 2.6rem 6.6rem 44.8rem auto;
    grid-template-rows: 29.8rem 45.2rem auto;
    margin: 8.4rem auto 0;
  }

  .img05 {
    width: 43.4rem;
    grid-area: 1/2/2/3;
  }

  .img06 {
    width: 37.4rem;
    grid-area: 2/4/3/4;
  }

  .sec2 .credit_wrap {
    width: 28.7rem;
    grid-area: 3 / 3 / 4 / 4;
  }

  .sec3 {
    padding-bottom: 19rem;
  }

  .sec3 .sec--content-wrap {
    grid-template-columns: 9rem 45rem auto;
    grid-template-rows: 33.2rem 37.4rem auto;
    margin: 8.1rem auto 0;
  }

  .img08 {
    width: 37rem;
    grid-area: 2/2/3/3;
  }

  .img09 {
    width: 46rem;
    grid-area: 1/3/2/4;
  }

  .sec3 .credit_wrap {
    width: 31.7rem;
    grid-area: 3 / 3 / 4 / 4;
  }

  .sec4 {
    padding-bottom: 19rem;
  }

  .sec4 .sec--content-wrap {
    grid-template-columns: 13.2rem 40.8rem auto;
    grid-template-rows: 20.5rem 45.3rem auto;
  }

  .img11 {
    width: 46rem;
    grid-area: 1/1/2/2;
  }

  .img12 {
    width: 37.4rem;
    grid-area: 2/3/3/4;
  }

  .sec4 .credit_wrap {
    width: 30.3rem;
    grid-area: 3 / 2 / 4 /3;
  }

  .sec5 .sec--content-wrap {
    grid-template-columns: 54rem auto;
    grid-template-rows: 30.4rem 44.2rem auto;
    margin-top: 8.2rem;
  }

  .img14 {
    width: 46rem;
    grid-area: 2/1/3/2;
  }

  .img15 {
    width: 42.6rem;
    grid-area: 1/2/2/3;
  }

  .sec5 .credit_wrap {
    width: 35.4rem;
    grid-area: 3 / 2 / 4 /3;
  }

  .sec6 {
    padding-bottom: 17rem;
  }

  .sec6 .sec--content-wrap {
    grid-template-columns: 5.2rem 3.9rem 43.6rem auto;
    grid-template-rows: 38.8rem 34.3rem auto;
  }

  .img17 {
    width: 40.8rem;
    grid-area: 1/2/2/3;
  }

  .img18 {
    width: 38.2rem;
    grid-area: 2/4/3/5;
  }

  .sec6 .credit_wrap {
    width: 30.8rem;
    grid-area: 3 / 3 / 4 /4;
  }

  .style_container_detail_credit .credit-last::before {
    top: 2.3rem;
  }
}






/* ===============================================
* foot_btn *
=============================================== */
.creditimg {
  width: calc(154* (100vw /375));
  margin: calc(12* (100vw /375)) calc(10* (100vw /375)) 0 auto;
}

.main-area .btn__top {
  width: calc(275 * (100vw / 375));
  height: calc(60 * (100vw / 375));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15 * (100vw / 375));
  box-sizing: border-box;
  font-weight: 700;
  margin: calc(63* (100vw /375)) auto calc(100* (100vw /375));
  background: #74C5BE;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .btn__wrapper {
    width: 100rem;
    margin: auto;
  }

  .creditimg {
    width: 15.2rem;
    margin: 1.8rem 9.2rem 0 auto;
  }

  .main-area .btn__top {
    width: 32rem;
    height: 6rem;
    font-size: 1.5rem;
    margin: 6rem auto 13rem;
  }
}