@charset "UTF-8";

/*
///////////////////////////////////////////////////////////////////////////////////////
 contents__wrapper
 ///////////////////////////////////////////////////////////////////////////////////////
*/
@media only screen and (min-width: 768px) {
  body{
    overflow-x: hidden;
  }

  html {
    font-size: min(calc(100vw / 144), 10px);
  }
}

@media only screen and (max-width: 767px) {
  html {
    font-size: min(calc(100vw / 40.2), 10px);
  }
}

.lp1017{
  --font-yu: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-zen: "Zen Kaku Gothic New", sans-serif;;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --color-white: #fff;
  --color-black: #000;

  overflow: clip;
  font-feature-settings: "pwid" 0;
  font-variant-east-asian: proportional-width;
  font-weight: var(--fw-medium);
  font-family: var(--font-zen);
  font-style: normal;
  color: var(--color-black);
  width: 100%;
}

.lp1017 a{
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.lp1017 p,
.lp1017 a,
.lp1017 span,
.lp1017 h1,
.lp1017 h2{
  -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 768px) {
  .lp1017 .mb-10pc{
    margin-bottom: calc(30* (100vw / 1440));
  }

  .lp1017 .mb-60,
  .lp1017 .mb-60pc{
    margin-bottom: calc(60* (100vw /1440));
  }

  .lp1017 .mb-80pc{
    margin-bottom: calc(80* (100vw / 1440));
  }

  .lp1017 .mb-100pc{
    margin-bottom: calc(100* (100vw / 1440));;
  }

  .lp1017 .mb-150pc{
    margin-bottom: calc(150* (100vw / 1440));;
  }

  .lp1017 .mb-180pc{
    margin-bottom: calc(180* (100vw / 1440));;
  }
}

@media only screen and (max-width: 767px) {
  .lp1017{
    overflow-x: clip;
  }

  .lp1017 .mb-10sp{
    margin-bottom: calc(10* (100vw / 402));
  }

  .lp1017 .mb-30sp{
    margin-bottom: calc(30* (100vw / 402));
  }

  .lp1017 .mb-60,
  .lp1017 .mb-60sp{
    margin-bottom: calc(60* (100vw /402));
  }

  .lp1017 .mb-80sp{
    margin-bottom: calc(80* (100vw / 402));
  }

  .lp1017 .mb-90sp{
    margin-bottom: calc(90* (100vw / 402));;
  }

  .lp1017 .mb-150sp{
    margin-bottom: calc(150* (100vw / 402));;
  }

  .lp1017 .mb-140sp{
    margin-bottom: calc(140* (100vw / 402));;
  }
}

/* ======================== credit */
.lp1017 .product_detail {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: var(--fw-regular);
  font-family: var(--font-barbour-sans);
  color: var(--color-black);
  margin: 0 auto;
}

.lp1017 .product_detail > span {
  white-space: nowrap;
}

.lp1017 .product_detail_btn {
  font-weight: var(--fw-medium);
  border-bottom: 2px solid var(--color-black);
  line-height: 1.1111111111;
}


@media screen and (min-width: 768px) {
  .lp1017 .product_detail {
    width: calc(240* (100vw /1440));
    font-size: 2rem;
  }

  /* .lp1017 .item__wrapper.--01 .product_detail{
    width: calc(290* (100vw /1440));
  } */

  .lp1017 .product_detail_price {
    margin: 0 calc(10* (100vw /1440)) 0 calc(30* (100vw /1440));
  }

  /* .lp1017 .item__wrapper.--01 .product_detail_price {
    margin: 0 calc(10* (100vw /1440)) 0 calc(80* (100vw /1440));
  } */

  .lp1017 .product_detail_btn {
    font-size: 1.8rem;
  }

  .lp1017 .product_detail_name,
  .lp1017 .product_detail_price,
  .lp1017 .product_detail_btn {
    padding-bottom: 0.25rem;
  }
}

@media screen and (max-width: 767px) {
  .lp1017 .product_detail {
    width: calc(300 * 100vw/402);
    font-size: 1.6rem;
  }

  .lp1017 .product_detail_name{
    margin-left: calc(24.5 * 100vw/402);
  }

  .lp1017 .product_detail_price {
    margin: 0 calc(10 * 100vw/402) 0 calc(80 * 100vw/402);
  }
}

/* ============= contents_maintxt__wrapper */
.lp1017 .contents_maintxt__wrapper{
  border-bottom: 1px solid var(--color-black);
}

.lp1017 .contents_maintxt__inner{
  font-family: var(--font-zen);
  margin-left: auto;
  margin-right: auto;
}

.lp1017 .contents_maintxt{
  font-weight: var(--fw-medium);
  text-align: center;
  line-height: 1.6363636364;
}

.lp1017 .contents_maintxt__wrapper .contents_detail-txt{
  font-weight: var(--fw-medium);
  text-align: left;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .lp1017 .contents_maintxt__inner{
    /* width: calc(960* (100vw /1440)); */
    width: min(960 *(100vw / 1440), 1400px);
    max-width: 1400px;
    padding-bottom: calc(280* (100vw /1440));
  }

  .lp1017 .contents_maintxt{
    /* font-size: 2.4rem; */
    font-size: min(24 *(100vw / 1440), 1400px);
    line-height: 1;
  }
}

@media screen and (max-width: 767px) {
  .lp1017 .contents_maintxt__inner{
    width: calc(360* (100vw / 402));
    padding-bottom: calc(189* (100vw / 402));
  }

  .lp1017 .contents_maintxt{
    font-size: 2.2rem;
    line-height: 1.6363636364;
  }
}

/* ============= item__wrapper */
.lp1017 .item__wrapper{
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--color-black);
}

.lp1017 .item__wrapper.--04{
  border-bottom: none;
}

.lp1017 .sticky-ttl{
  position: sticky;
  z-index: 10;
  width: 0;
  top: 0;
}

.lp1017 .block_ttl{
  font-family: var(--font-barbour-sans);
  line-height: 1;
  font-weight: var(--fw-light);
}

.lp1017 .subttl{
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.lp1017 .ttl{
  display: block;
  white-space: nowrap;
}

.lp1017 .block_txt{
  line-height: 2;
  text-align: left;
  font-weight: var(--fw-regular);
}


.lp1017 .item__inner .block_txt{
  font-weight: var(--fw-regular);
  text-align: left;
}

.lp1017 .img__wrapper{
  display: flex;
  align-items: center;

}

.lp1017 .item-img05{
  width: 100%;
}

@media screen and (min-width: 768px) {
  .lp1017 .item__wrapper{
    margin-top: calc(180* (100vw /1440));
    padding-bottom: calc(280 * (100vw / 1440));
  }

  .lp1017 .item__inner{
    padding-top: calc(60* (100vw /1440));
  }

  .lp1017 .img__wrapper{
    width: calc(1020* (100vw /1440));
    justify-content: space-between;
  }

  /* .lp1017 .item__wrapper.--02 .img__wrapper:first-child{
    margin-bottom: calc(70* (100vw /1440));
  } */

  .lp1017 .sticky-ttl{
    top: calc(30* (100vw /1440));
    /* margin-bottom: calc(130 * (100vw / 1440)); */
  }

  .lp1017 .block_ttl{
    display: flex;
    column-gap: calc(520* (100vw /1440));
    margin-left: calc(120* (100vw /1440));
    /* padding-top: calc(30* (100vw /1440)); */
  }

  .lp1017 .subttl{
    font-size: 2rem;
    width: calc(120 * (100vw / 1440));
  }

  .lp1017 .ttl{
    font-size: 4rem;
    width: calc(600* (100vw /1440));
  }

  .lp1017 .block_txt{
    font-size: 1.7rem;
  }

  .lp1017 .contents_detail-txt.block_txt{
    font-size: min(17 *(100vw / 1440), 1400px);
  }

  .lp1017 .item__wrapper .block_txt{
    width: calc(600* (100vw /1440));
    margin-left: calc(720* (100vw /1440));
  }

  .lp1017 .item__inner .img__wrapper:nth-of-type(2){
    margin-left: auto;
    margin-right: 0;
  }

  .lp1017 .item-img{
    width: calc(480* (100vw /1440));
  }

}

@media only screen and (max-width: 767px) {
  .lp1017 .item__wrapper{
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    padding-bottom: calc(200 * (100vw / 402));
    margin-top: calc(100* (100vw /402));
  }

  .lp1017 .sticky-ttl{
    top: calc(20 * (100vw / 402));
    /* margin-bottom: calc(100 * (100vw / 402)); */
  }

  .lp1017 .block_ttl{
    margin-left: calc(21* (100vw / 402));
  }

  .lp1017 .subttl{
    font-size: 1.5rem;
    padding-bottom:  calc(40* (100vw /402));
  }

  .lp1017 .ttl{
    font-size: 3.2rem;
  }

  .lp1017 .item__inner{
    padding-top: calc(20* (100vw /402));
  }

  .lp1017 .block_txt{
    font-size: 1.4rem;
  }

  .lp1017 .item__wrapper .block_txt{
    font-size: 1.5rem;
    width: calc(360* (100vw / 402));
    margin-right: auto;
    margin-left: auto;
  }

  .lp1017 .img__wrapper{
    flex-direction: column;
    width: calc(360* (100vw / 402));
    row-gap: calc(10* (100vw /402));
    margin-left: auto;
    margin-right: auto;
  }
}


/*
///////////////////////////////////////////////////////////////////////////////////////
 animation
 ///////////////////////////////////////////////////////////////////////////////////////
*/

.jsFade {
  opacity: 0;
  transform: translateY(20px);
}

.jsFade.isActive {
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.7s, transform 0.7s;
}

.jsFade.delay05{
  transition-delay: 0.5s;
}

@media only screen and (min-width: 768px) {
  .jsFade.delay05pc{
    transition-delay: 0.5s;
  }
}