:root {
  --sec1-color: #F7BF6C;
  --sec2-color: #649CE8;
  --sec3-color: #235ad1;
  --sec4-color: #235ad1;
  --sec5-color: #235ad1;
  --sec6-color: #235ad1;
}




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

/* ページ共通___________________________*/
.main-area {
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.07em;
  line-height: 1.75;
  font-size: calc(13* (100vw / 375));
  padding-bottom: calc(117* (100vw / 375));
  overflow-x: hidden;
  text-align: left;
}

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

.img {
  position: relative;
}

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

.main-area .lp_credit {
  position: relative;
  z-index: 2;
  font-size: calc(12* (100vw / 375));
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.07em;
}

.main-area .lp_credit a {
  text-decoration: underline;
}

.js-slider-set2 {
  pointer-events: none;
}

.shadow_img {
  position: relative;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
  z-index: 2;
  pointer-events: none;
  transform: translateZ(0);
}

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

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

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

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

  .main-area .lp_credit {
    font-size: 1.2rem;
  }
}

/* ▽ sec__fv ▽ */
.sec__fv {
  text-align: center;
}

@font-face {
  font-family: "HKGrotesk";
  src: url("../fonts/HKGrotesk-SemiBold.otf") format("opentype"),
    url("../fonts/HKGrotesk-SemiBold.ttf") format("truetype");
}

.sec__fv .fv_copy {
  width: calc(267* (100vw / 375));
  margin: calc(63* (100vw / 375)) auto 0;
}

.sec__fv p {
  margin: calc(24* (100vw / 375)) auto 0;
  letter-spacing: 0.07em;
  line-height: 2;
}


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

  .sec__fv .fv_copy {
    width: 26.6rem;
    margin-top: 8rem;
  }

  .sec__fv p {
    margin: 2.3rem auto 0;
  }
}



/* ▽_____________ sec__style1 ______________▽ */
.sec__style {
  margin-top: calc(76* (100vw / 375));
}

.sec_inner {
  position: relative;
}


/* コンテンツ */
/* ▽_____________ .sec1_inner_1 ______________▽ */
.sec1_inner_1 {
  width: calc(375* (100vw / 375));
}

.sec1_inner_1 h3 {
  position: absolute;
  width: calc(17.5* (100vw / 375));
  top: 0;
  right: calc(25* (100vw / 375));
}

.img01 {
  width: calc(320* (100vw / 375));
}

/* ▽_____________ .sec1_inner_2 ______________▽ */
.sec1_inner_2 {
  width: calc(345* (100vw / 375));
  margin: calc(37* (100vw / 375)) auto 0;
}

/*svg/summercollection ___________________________*/
.sec1_inner_2::before,
.sec2_inner_4::before,
.sec4_inner_2::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(../img/svg/summercollection.svg) no-repeat;
  background-size: contain;
  width: calc(315.5* (100vw / 375));
  height: calc(92* (100vw / 375));
}

.sec1_inner_2::before {
  bottom: calc(-85* (100vw / 375));
  right: calc(-68* (100vw / 375));
}

.sec2_inner_4::before {
  bottom: calc(-86* (100vw / 375));
  right: calc(-17* (100vw / 375));
}


.sec4_inner_2::before {
  top: calc(-77* (100vw / 375));
  right: calc(-87* (100vw / 375));
}

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

  .sec1_inner_2::before,
  .sec2_inner_4::before,
  .sec4_inner_2::before {
    width: 47.3rem;
    height: 13.8rem;
  }

  .sec1_inner_2::before {
    bottom: -8rem;
    right: -14.7rem;
  }

  .sec2_inner_4::before {
    bottom: -39.4rem;
    right: 23.6rem;
  }

  .sec4_inner_2::before {
    top: -4.7rem;
    right: -7.7rem;
  }
}

/*svg/summercollection ___________________________*/
.copy_wrap {
  position: relative;
  width: calc(230* (100vw / 375));
  text-align: center;
  line-height: 2;
}

.copy_wrap::before,
.copy_wrap::after {
  content: "";
  position: absolute;
  background-size: contain;
}

.copy_wrap::before {
  background: url(../img/svg/left.svg) no-repeat;
  background-size: contain;
  width: calc(20.5* (100vw / 375));
  height: calc(17* (100vw / 375));
  bottom: calc(-9* (100vw / 375));
  left: 0;
}

.copy_wrap::after {
  background: url(../img/svg/right.svg) no-repeat;
  background-size: contain;
  width: calc(20.5* (100vw / 375));
  height: calc(17* (100vw / 375));
  top: calc(-7* (100vw / 375));
  right: 0;
}

@media screen and (max-width: 767px) {
  .sec1_inner_2 .copy_wrap {
    margin-left: calc(7* (100vw / 375));
  }

  .img02 {
    width: calc(260* (100vw / 375));
    margin: calc(39* (100vw / 375)) 0 0 auto;
  }

  .img03 {
    width: calc(260* (100vw / 375));
    margin: calc(39* (100vw / 375)) 0 0 0;
  }
}

/* ▽_____________ .sec1_inner_3 ______________▽ */
.sec1_inner_3 {
  margin: calc(80* (100vw / 375)) auto 0;
}

.img04 {
  width: calc(300* (100vw / 375));
  margin: auto;
}

.sec1_inner_3 .lp_credit {
  text-align: center;
  margin-top: calc(12* (100vw / 375));
}

.detail_tx {
  text-align: center;
  margin-top: calc(33* (100vw / 375));
  line-height: 2;
}

/* ▽_____________ .sec1_inner_4 ______________▽ */
.sec1_inner_4 {
  width: calc(300* (100vw / 375));
  margin: calc(77* (100vw / 375)) 0 0 auto;
}

.loop_tx {
  position: absolute;
  z-index: 1;
  width: calc(100* (100vw / 375));
  top: calc(-50* (100vw / 375));
  left: calc(-51* (100vw / 375));
  animation: rotate 17s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.img05::before {
  content: "";
  position: absolute;
  background: url(../img/svg/for_town_sp.svg) no-repeat;
  background-size: contain;
  width: calc(11.8* (100vw / 375));
  height: calc(237* (100vw / 375));
  bottom: calc(-2* (100vw / 375));
  left: calc(-15* (100vw / 375));
}


/* ▽_____________ .sec1_inner_5 ______________▽ */
.sec1_inner_5 {
  margin: calc(39* (100vw / 375)) 0 0 auto;
}

.img06,
.img07 {
  width: calc(260* (100vw / 375));
}

@media screen and (max-width: 767px) {
  .img06 {
    margin-left: calc(-8* (100vw / 375));
  }

  .img07 {
    margin: calc(-20* (100vw / 375)) 0 0 auto;
  }

  .sec1_inner_5 .lp_credit {
    text-align: right;
    margin: calc(13* (100vw / 375)) calc(14* (100vw / 375)) 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .sec__style {
    margin-top: 9.6rem;
  }

  /* ▽_____________ .sec1_inner_1 ______________▽ */
  .sec1_inner_1 {
    width: 50rem;
    margin: auto;
  }

  .sec1_inner_1 h3 {
    width: 2.17rem;
    right: -4rem;
  }

  .img01 {
    width: 100%;
  }

  /* ▽_____________ .sec1_inner_2 ______________▽ */
  .grid_wrap {
    display: grid;
  }

  .sec1_inner_2 {
    width: 70rem;
    margin: 7rem auto 0;
    grid-template-columns: 4.5rem 32.5rem auto;
    grid-template-rows: 13.6rem auto;
  }

  .copy_wrap {
    width: 24.2rem;
  }

  .copy_wrap::before {
    width: 2.04rem;
    height: 1.73rem;
    bottom: 0.6rem;
    left: 0;
  }

  .copy_wrap::after {
    width: 2.04rem;
    height: 1.73rem;
    top: -0.6rem;
    right: 0;
  }

  .sec1_inner_2 .copy_wrap {
    grid-column: 2;
    grid-row: 1;
    top: 0.5rem;
    height: 6.8rem;
  }

  .img02 {
    width: 33rem;
    grid-column: 3;
    grid-row: 1;
  }

  .img03 {
    width: 33rem;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  /* ▽_____________ .sec1_inner_3 ______________▽ */
  .sec1_inner_3 {
    margin: 7rem auto 0;
  }

  .img04 {
    width: 40rem;
  }

  .sec1_inner_3 .lp_credit {
    margin-top: 1.6rem;
  }

  .detail_tx {
    margin-top: 3.2rem;
  }

  /* ▽_____________ .sec1_inner_4 ______________▽ */
  .sec1_inner_4 {
    width: 50rem;
    margin: 12.2rem 0 0 50%;
    transform: translateX(-42%);
  }

  .loop_tx {
    width: 15.4rem;
    top: -7.7rem;
    left: -8rem;
  }

  .img05::before {
    background: url(../img/svg/for_town.svg) no-repeat;
    background-size: contain;
    width: 9.8rem;
    height: 35.2rem;
    bottom: 0;
    left: -2.1rem;
  }

  /* ▽_____________ .sec1_inner_5 ______________▽ */
  .sec1_inner_5 {
    width: 70rem;
    margin: 9.4rem auto 0;
    grid-template-columns: 34rem auto;
    grid-template-rows: 18.5rem 28.2rem auto;
  }

  .img06,
  .img07 {
    width: 36rem;
  }

  .img06 {
    grid-column: 1;
    grid-row: 1;
  }

  .img07 {
    grid-column: 2/3;
    grid-row: 2/4;
  }

  .sec1_inner_5 .lp_credit {
    grid-column: 1/2;
    grid-row: 3/4;
  }

}










/* ▽_____________ sec2 ______________▽ */

/* ▽_____________ .sec2_inner_1 ______________▽ */
.sec2_inner_1 {
  width: calc(320* (100vw / 375));
  margin: calc(98* (100vw / 375)) auto 0;
}

.sec2_inner_1 h3 {
  width: calc(279* (100vw / 375));
  margin: calc(43* (100vw / 375)) auto 0;
}

.sec2_inner_1 .copy_wrap {
  width: calc(290* (100vw / 375));
  margin: calc(44* (100vw / 375)) auto 0;
}

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

/* ▽_____________ .sec2_inner_2 ______________▽ */
.sec2_inner_2 {
  width: calc(375* (100vw / 375));
  margin: calc(40* (100vw / 375)) auto 0;
}

/* ▽_____________ .sec2_inner_3 ______________▽ */

@media screen and (max-width: 767px) {
  .sec2_inner_3 {
    width: calc(290* (100vw / 375));
    margin: calc(41* (100vw / 375)) 0 0 auto;
  }

  .sec2_inner_3 .lp_credit {
    margin-top: calc(13* (100vw / 375));
  }
}

/* ▽_____________ .sec2_inner_4 ______________▽ */
.sec2_inner_4 {
  width: calc(300* (100vw / 375));
  margin: calc(76* (100vw / 375)) 0 0 0;
}

.sec2_inner_4 .loop_tx {
  left: initial;
  right: calc(-49* (100vw / 375));
}

.img11::before {
  content: "";
  position: absolute;
  background: url(../img/svg/for_town_sp2.svg) no-repeat;
  background-size: contain;
  bottom: calc(-1* (100vw / 375));
  right: calc(-19* (100vw / 375));
  width: calc(11.8* (100vw / 375));
  height: calc(239* (100vw / 375));
}

/* ▽_____________ .sec2_inner_5 ______________▽ */
@media screen and (max-width: 767px) {
  .sec2_inner_5 {
    width: calc(280* (100vw / 375));
    margin: calc(80* (100vw / 375)) 0 0 auto;
  }

  .sec2_inner_5 .lp_credit {
    margin-top: calc(13* (100vw / 375));
  }
}


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

  /* ▽_____________ .sec2_inner_1 ______________▽ */
  .sec2_inner_1 {
    width: 50rem;
    margin: 14.6rem auto 0;
  }

  .sec2_inner_1 h3 {
    width: 34.9rem;
    margin: 0 auto 0;
  }

  .sec2_inner_1 .copy_wrap {
    width: 31.3rem;
    margin: 3.5rem auto 0;
    height: 6.3rem;
  }

  .sec2_inner_1 .copy_wrap::before {
    left: 1rem;
  }

  .img08 {
    margin-top: 2.8rem;
  }

  /* ▽_____________ .sec2_inner_2 ______________▽ */
  .sec2_inner_2 {
    width: 100rem;
    margin: 7rem auto 0;
  }

  .img09 {
    width: 69rem;
  }

  /* ▽_____________ .sec2_inner_3 ______________▽ */
  .sec2_inner_3,
  .sec2_inner_5,
  .sec3_inner_3 {
    display: flex;
    flex-direction: row-reverse;
    width: 100rem;
    margin: 7rem auto 0;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 2rem;
  }

  .img10 {
    width: 46rem;
  }

  .sec2_inner_3 .lp_credit,
  .sec2_inner_5 .lp_credit {
    bottom: -0.5rem;
    text-align: right;
  }

  .sec__style2 .detail_tx {
    margin-top: 3.7rem;
  }

  /* ▽_____________ .sec2_inner_4 ______________▽ */
  .sec2_inner_4 {
    width: 50rem;
    margin: 12.3rem 0 0 50%;
    transform: translateX(-57.6%);
  }

  .sec2_inner_4 .loop_tx {
    right: -7.7rem;
  }

  .img11::before {
    background: url(../img/svg/for_town2.svg) no-repeat;
    background-size: contain;
    bottom: 0;
    right: -10.8rem;
    width: 9.8rem;
    height: 35.2rem;
  }

  /* ▽_____________ .sec2_inner_5 ______________▽ */
  .img12 {
    width: 44rem;
  }
}



/* ▽_____________ sec3 ______________▽ */
/* ▽_____________ .sec3_inner_1 ______________▽ */
.sec3_inner_1 {
  width: calc(320* (100vw / 375));
  margin: calc(97* (100vw / 375)) 0 0 auto;
}

.sec3_inner_1 h3 {
  position: absolute;
  width: calc(17.5* (100vw / 375));
  bottom: calc(0* (100vw / 375));
  left: calc(-30* (100vw / 375));
}

/* ▽_____________ .sec3_inner_2 ______________▽ */
@media screen and (max-width: 767px) {
  .sec3_inner_2 {
    width: calc(345* (100vw / 375));
    margin: calc(37* (100vw / 375)) auto 0;
  }

  .sec3_inner_2 .copy_wrap {
    width: calc(258* (100vw / 375));
    margin: auto;
  }

  .img14 {
    width: calc(260* (100vw / 375));
    margin: calc(37* (100vw / 375)) 0 0 0;
  }

  .img15 {
    width: calc(260* (100vw / 375));
    margin: calc(40* (100vw / 375)) 0 0 auto;
  }
}


/* ▽_____________ .sec3_inner_3 ______________▽ */
@media screen and (max-width: 767px) {
  .sec3_inner_3 {
    width: calc(375* (100vw / 375));
    margin: calc(40* (100vw / 375)) auto 0;
  }

  .sec3_inner_3 .lp_credit {
    text-align: center;
    margin-top: calc(13* (100vw / 375));
  }

}

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

  /* ▽_____________ .sec3_inner_1 ______________▽ */
  .sec3_inner_1 {
    width: 50rem;
    margin: 14rem auto 0;
  }

  .sec3_inner_1 h3 {
    width: 2.17rem;
    bottom: 0;
    left: -4rem;
  }

  /* ▽_____________ .sec3_inner_2 ______________▽ */
  .sec3_inner_2 {
    width: 70rem;
    margin: 7rem auto 0;
    grid-template-columns: 37rem 3.9rem auto;
    grid-template-rows: 13.5rem auto;
  }

  .sec3_inner_2 .copy_wrap {
    width: 26.2rem;
    grid-column: 3/4;
    grid-row: 1;
    height: 6.8rem;
    top: 0.5rem;
  }

  .sec3_inner_2 .copy_wrap::before {
    left: -0.6rem;
  }

  .sec3_inner_2 .copy_wrap::after {
    right: 0.4rem;
  }

  .img14 {
    width: 33rem;
    grid-column: 1;
    grid-row: 1;
  }

  .img15 {
    width: 33rem;
    grid-column: 2/4;
    grid-row: 2/3;
  }

  /* ▽_____________ .sec3_inner_3 ______________▽ */
  .sec3_inner_3 {
    flex-direction: row;
  }

  .sec3_inner_3 .lp_credit {
    bottom: -0.4rem;
  }

  .img16 {
    width: 60rem;
  }

  .sec__style3 .detail_tx {
    margin-top: 3.6rem;
  }
}





/* ▽_____________ sec4 ______________▽ */
/* ▽_____________ .sec4_inner_1 ______________▽ */
.sec4_inner_1 {
  width: calc(325* (100vw / 375));
  margin: calc(76* (100vw / 375)) auto 0;
}

.sec4_inner_1 h3 {
  width: calc(220* (100vw / 375));
  margin: calc(22* (100vw / 375)) auto 0;
}

.sec4_inner_1 .copy_wrap {
  width: calc(216* (100vw / 375));
  margin: calc(34* (100vw / 375)) auto 0;
}

/* ▽_____________ .sec4_inner_2 ______________▽ */
@media screen and (max-width: 767px) {
  .sec4_inner_2 {
    width: calc(375* (100vw / 375));
    margin: calc(128* (100vw / 375)) auto 0;
  }

  .img18 {
    width: calc(290* (100vw / 375));
  }

  .img19 {
    width: calc(260* (100vw / 375));
    margin: calc(-20* (100vw / 375)) 0 0 auto;
  }

  .sec4_inner_2 .lp_credit {
    text-align: right;
    margin: calc(13* (100vw / 375)) calc(14* (100vw / 375)) 0 auto;
  }

}

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

  /* ▽_____________ .sec4_inner_1 ______________▽ */
  .sec4_inner_1 {
    width: 50rem;
    margin: 13.5rem auto 0;
  }

  .sec4_inner_1 h3 {
    width: 27.5rem;
    margin: 3.7rem auto 0;
  }

  .sec4_inner_1 .copy_wrap {
    width: 22.8rem;
    margin: 3.4rem auto 0;
  }

  /* ▽_____________ .sec4_inner_2 ______________▽ */
  .sec4_inner_2 {
    width: 84rem;
    margin: 7.6rem auto 0;
    grid-template-columns: 15rem 27rem 2rem auto;
    grid-template-rows: 26.5rem 36.9rem auto;
  }

  .img18 {
    width: 46rem;
    grid-column: 1;
    grid-row: 1;
  }

  .img19 {
    width: 33rem;
    grid-column: 4;
    grid-row: 2/4;
  }

  .sec4_inner_2 .lp_credit {
    text-align: right;
    grid-column: 1/3;
    grid-row: 3/4;
  }
}



/* ▽_____________ lp_foot_btn ______________▽ */
.main-area .lp_foot_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(268* (100vw / 375));
  height: calc(56* (100vw / 375));
  margin: calc(73* (100vw / 375)) auto 0;
  line-height: 1;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: calc(14* (100vw / 375));
  letter-spacing: 0.05em;
  border: 1px solid #000;
}

@media screen and (min-width: 768px) {
  .main-area .lp_foot_btn {
    width: 29.2rem;
    height: 5.6rem;
    margin: 9.2rem auto 0;
    font-size: 1.4rem;
  }
}


/* ▽ imganime ▽ */
/* .js-fadeIn {
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.showFade {
  opacity: 1;
} */

/* @media (max-width: 1366px) and (min-width: 768px) {
  html {
    font-size: calc(10 * (100vw / 1366));
  }
} */