.main-area{
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  --lightgray: #F8F8F8;
  --grayishblue: #90A3B5;
  --palegray: #FDFDFD;
  --futura-pt: futura-pt,sans-serif;
}
:is(.main-area) a,picture{
  display: block;
  color: inherit;
}
.main-area a{
  transition: 0.3s ease;
}
.main-area img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.main-area .btn-top{
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border: 1px solid #000;
}
.lp-header{
  text-align: center;
}
.lp-section:nth-of-type(2n-1){
  background-color: var(--lightgray);
}
.lp-section__ttl{
  font-weight: 600;
}
.lp-section__ttl span:first-of-type{
  display: block;
}
.lp-section__ttl span:last-of-type{
  display: inline-block;
  color: #fff;
  background-color: var(--grayishblue);
}
.lp-section__subttl{
  font-weight: 600;
  font-style: normal;
}
.lp-section__subttl span:first-of-type{
  display: block;
  font-family: var(--futura-pt);
  border-bottom: 1px solid #000;
}
.lp-section__subttl span:last-of-type{
  display: inline-block;
}
.lp-section__img-head, .lp-section__img-body{
  flex-shrink: 0;
}
.lp-section__head--wrap::before{
  display: inline-block;
  font-family: var(--futura-pt);
  font-weight: 600;
  font-style: normal;
  color: var(--grayishblue);
}
.lp-section__credit{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.lp-section__credit a{
  text-decoration: underline;
}
.lp-section__credit span{
  display: block;
}
.lp-section1 .lp-section__head--wrap::before{
  content: "ITEM No.1";
}
.lp-section2 .lp-section__head--wrap::before{
  content: "ITEM No.2";
}
.lp-section3 .lp-section__head--wrap::before{
  content: "ITEM No.3";
}
.lp-section:nth-of-type(2n-1) .lp-section__head--wrap{
  background-color: rgba(255, 255, 255, 0.8);
}
.lp-section:nth-of-type(2n) .lp-section__head--wrap{
  background-color: rgba(253, 253, 253, 0.8);
}

@media only screen and (max-width: 767px){
  .main-area{
    font-size: calc(24* (100vw / 750));
    line-height: 2.166;
    letter-spacing: 0.1em;
  }
  .main-area .btn-top{
    margin-block: calc(100 * (100vw / 750)) calc(224 * (100vw / 750));
    width: calc(520 * (100vw / 750));
    height: calc(90 * (100vw / 750));
    font-size: calc(26 * (100vw / 750));
    line-height: 1;
    letter-spacing: 0.05em;
  }  
  .lp-header__img{
    width: 100%;
  }
  .lp-header__lead{
    margin-block-start: calc(86 * (100vw / 750));
  }
  .lp-section:first-of-type{
    margin-block-start: calc(85 * (100vw / 750));
  }
  .lp-section{
    padding-block: calc(100 * (100vw / 750));
  }
  .lp-section__head{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  .lp-section__head--wrap{
    z-index: 1;
    margin-block-start: calc(-20 * (100vw / 750));
    padding-block: calc(78 * (100vw / 750)) calc(65 * (100vw / 750));
    padding-inline: calc(15 * (100vw / 750));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  }
  .lp-section__img-head{
    width: calc(720 * (100vw / 750));
    margin-inline: auto;
  }
  .lp-section__head--wrap::before{
    font-size: calc(32* (100vw / 750));
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .lp-section__ttl{
    margin-block-start: calc(34 * (100vw / 750));
  }
  .lp-section__ttl span:first-of-type{
    font-size: calc(38 * (100vw / 750));
    letter-spacing: 0.08em;
    line-height: 1.526;
    padding-block-end: calc(10*(100vw/750));
  }
  .lp-section__ttl span:last-of-type{
    font-size: calc(28 * (100vw / 750));
    letter-spacing: 0.08em;
    line-height: 1;
    padding-block: calc(8 * (100vw / 750)) calc(6 * (100vw / 750));
    padding-inline: calc(12 * (100vw / 750)) calc(10 * (100vw / 750));
  }
  .lp-section__body--wrap-inner{
    margin-block-start: calc(100 * (100vw / 750));
  }
  .lp-section__img-body{
    width: calc(700* (100vw / 750));
  }
  .lp-section__subttl{
    margin-block-start: calc(65 * (100vw / 750));
  }
  .lp-section__subttl span:first-of-type{
    padding-block-end: calc(14 * (100vw / 750));
    font-size: calc(32 * (100vw / 750));
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .lp-section__subttl span:last-of-type{
    padding-block-start: calc(49 * (100vw / 750));
    font-size: calc(34 * (100vw / 750));
    letter-spacing: 0.08em;
    line-height: 1.529;
  }
  .lp-section__desc{
    margin-block-start: calc(18*(100vw/750));
    font-size: calc(24 * (100vw / 750));
    letter-spacing: 0.1em;
    line-height: 2.166;
  }
  .lp-section__body .lp-section__body__card{
    padding-inline: calc(15 * (100vw / 750)) calc(50 * (100vw / 750));
  }
  .lp-section__body .lp-section__desc{
    margin-block-start: calc(14 * (100vw / 750));
  }
  .lp__img-body-right{
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
  .lp-section__body .lp-section__body__card.lp__desc-right{
    padding-inline: calc(50 * (100vw / 750)) calc(15 * (100vw / 750));
  }
  .lp-section__credit{
    margin-block-start: calc(45 * (100vw / 750));
    row-gap: calc(38 * (100vw / 750));
    font-size: calc(20 * (100vw / 750));
    line-height: 1;
    letter-spacing: 0.1em;
  }
  .lp-section__credit .item-inst-b{
    padding-block-end: calc(24 * (100vw / 750));
  }
  .lp-section__credit .item-inst-a{
    padding-block-start: calc(18 * (100vw / 750));
    padding-block-end: calc(24 * (100vw / 750));
  }
  .lp-section2{
    padding-block: calc(99 * (100vw / 750));
  }
  .lp-section2 .lp-section__ttl span:last-of-type{
    padding-inline: calc(15 * (100vw / 750)) calc(14 * (100vw / 750));
  }
  :is(.lp-section2, .lp-section3) .lp-section__head--wrap{
    padding-block-end: calc(79*(100vw/750));
  }
  .lp-section3 .lp-section__ttl span:last-of-type{
    padding-inline: calc(11 * (100vw / 750)) calc(8 * (100vw / 750));
  }
  .lp-section3 .lp-section__head .lp-section__credit{
    margin-block-start: calc(46 * (100vw / 750));
  }
  .lp-section3 .lp-section__body--wrap-inner:nth-of-type(2) .lp-section__desc{
    margin-block-start: calc(12 * (100vw / 750));
  }
  .lp-section3 .lp-section__body--wrap-inner:nth-of-type(2) .lp-section__credit{
    margin-block-start: calc(46 * (100vw / 750));
  }
}

@media only screen and (min-width: 768px) {
  html{
    font-size: 62.5%;
  }
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
  .main-area{
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.1em;
  }
  .main-area img {
    image-rendering: -webkit-optimize-contrast;
  }
  .main-area .btn-top{
    width: 36rem;
    height: 6rem;
    margin-block: 10rem 18rem;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .lp-header{
    width: 100%;
    max-width: 120rem;
    margin-inline: auto;
  }
  .lp-header__lead{
    margin-block-start: 7.2rem;
  }
  .lp-section{
    padding-block: 10rem;
  }
  .lp-section:first-of-type{
    margin-block-start: 7.4rem;
  }
  .lp-section__head, .lp-section__body{
    width: 100%;
    max-width: 110rem;
    margin-inline: auto;
  }
  .lp-section__head{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .lp-section__img-head{
    width: 46rem;
  }
  .lp-section__head--wrap{
    position: relative;
    z-index: 1;
    margin-block-start: 11.8rem;
    margin-inline-start: -3rem;
    padding-block: 6.1rem 6.2rem;
    padding-inline: 5rem;
    width: 58rem;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.06);
  }
  .lp-section:nth-of-type(2n) .lp-section__head--wrap{
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.06);
  }
  .lp-section__head--wrap::before{
    position: absolute;
    top: -1.2rem;
    left: 5.2rem;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 0.08em;
  }
  .lp-section3 .lp-section__head--wrap::before{
    left: 5rem;
  }
  .lp-section__body--wrap-inner{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 5rem;
  }
  .lp-section:nth-of-type(2n-1) .lp-section__body--wrap-inner:first-of-type{
    flex-direction: row-reverse;
  }
  .lp-section:nth-of-type(2n-1) .lp-section__body--wrap-inner:nth-of-type(2){
    margin-block-start: -4rem;
    margin-inline-start: 9rem;
  }
  .lp-section__img-body{
    width: 42rem;
  }
  .lp-section__ttl, .lp-section__subttl{
    font-size: 2.2rem;
    letter-spacing: 0.08em;
  }
  .lp-section__ttl span:first-of-type{
    padding-block-end: 0.2rem;
    line-height: 1.636;
  }
  .lp-section__ttl span:last-of-type{
    font-size: 1.6rem;
    padding-block: 0.7rem 0.7rem;
    padding-inline: 1rem;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .lp-section__subttl span:first-of-type{
    padding-block-end: 1px;
  }
  .lp-section__subttl span:last-of-type{
    padding-block-start: 2.6rem;
    font-size: 2rem;
    letter-spacing: 0.08em;
    line-height: 1.7;
  }
  .lp-section__desc{
    margin-block-start: 2rem;
    letter-spacing: 0.08em;
  }
  .lp-section__body{
    margin-block-start: 7rem;
  }
  .lp-section__body__card{
    width: 54rem;
    margin-block-start: 5.2rem;
  }
  .lp-section__body--wrap-inner:nth-of-type(2) .lp-section__body__card{
    margin-block-start: 11.2rem;
  }
  .lp-section__body .lp-section__desc{
    margin-block-start: 0.4rem;    
  }
  .lp-section__credit{
    row-gap: 1rem;
    margin-block-start: 3.1rem;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
  }
  .lp-section__credit .item-inst-b{
    padding-block-end: 0.8rem;
  }
  .lp-section__credit .item-inst-a{
    padding-block-start: 1.2rem;
    padding-block-end: 0.8rem;
  }
  .lp-section2 .lp-section__head{
    flex-direction: row-reverse;
  }
  .lp-section2 .lp-section__head--wrap{
    margin-block-start: 7.7rem;
    margin-inline-end: -3rem;
    padding-block-end: 6.6rem;
  }
  .lp-section2 .lp-section__ttl span:last-of-type{
    padding-inline: 1.2rem 1rem;
  }
  .lp-section2 .lp-section__body--wrap-inner:first-of-type{
    column-gap: 5.1rem;
  }
  .lp-section2 .lp-section__body--wrap-inner:last-of-type{
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: -4rem;
  }
  .lp-section2 .lp-section__body--wrap-inner:last-of-type .lp-section__subttl span:last-of-type{
    padding-block-start: 2.8rem;
  }
  .lp-section2 .lp-section__body--wrap-inner:last-of-type .lp-section__desc{
    margin-block-start: 0.6rem;
  }
  .lp-section3 .lp-section__head--wrap{
    margin-block-start: 8.9rem;
    padding-block-end: 6.6rem;
  }
  .lp-section3 .lp-section__ttl span:last-of-type{
    padding-inline-end: 0.8rem;
  }
}

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