@charset "UTF-8";
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- pc/sp共通デザイン初期設定 -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
#LpContainer {
  --color-white: #fff;
  --color-black: #000;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif;
  box-sizing: border-box;
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- ユーティリティクラス -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
#LpContainer .u-text-left {text-align: left;}
#LpContainer .u-text-center {text-align: center;}
#LpContainer .u-text-regular {text-align: right;}
#LpContainer .u-text-bold {font-weight: var(--font-weight-bold);}
#LpContainer .u-text-red {color: var(--color-red);}
#LpContainer .u-text-underline {text-decoration: underline;}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- mv -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.p-mv .c-summary {
  margin-top: min(54*100vw/1400, 54px);
  font-size: min(18*100vw/1400, 18px);
  line-height: 2;
  text-align: center;
}
.p-mv .p-mv__content {
  width: min(880*100vw/1400, 880px);
  margin: min(50*100vw/1400, 50px) auto 0;
  padding: min(30*100vw/1400, 30px) min(60*100vw/1400, 60px) min(20*100vw/1400, 20px);
  border: 1px solid var(--color-black);
}
.p-mv .p-mv__content-image {
  width: min(200*100vw/1400, 200px);
  margin: 0 auto;
}
.p-mv .p-mv__content .c-summary {
  margin-top: min(20*100vw/1400, 20px);
  text-align: left;
}
.p-mv .p-mv__content .c-summary_right {
  margin-top: 0;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .p-mv .c-summary {
    margin-top: calc(41*100vw/375);
    font-size: calc(16*100vw/375);
    padding: 0 calc(20*100vw/375);
  }
  .p-mv .p-mv__content {
    width: calc(333*100vw/375);
    margin-top: calc(21*100vw/750);
    padding: calc(30*100vw/375) calc(20*100vw/375);
  }
  .p-mv .p-mv__content-image {
    width: calc(171*100vw/375);
  }
  .p-mv .p-mv__content .c-summary {
    margin-top: calc(20*100vw/375);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- common setting -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
#LpContainer {
  margin-bottom: min(140*100vw/1400, 140px);
}
.c-button {
  padding: min(24*100vw/1400, 24px) 0;
  margin: min(50*100vw/1400, 50px) auto 0;
  width: min(680*100vw/1400, 680px);
  height: min(80*100vw/1400, 80px);
  font-size: min(18*100vw/1400, 18px);
  background-color: var(--color-black);
  color: var(--color-white);
}
.c-button::after {
  right: min(30*100vw/1400, 30px);
  width: min(10*100vw/1400, 10px);
  height: min(15*100vw/1400, 15px);
}
.c-item-name,
.c-item-credit {
  font-size: min(16*100vw/1400, 16px);
  line-height: 1.75;
}
.c-summary {
  margin-top: min(30*100vw/1400, 30px);
  font-size: min(18*100vw/1400, 18px);
  line-height: 1.777777777777778;
}
@media screen and (max-width: 767px) {
  #LpContainer {
    margin-bottom: calc(100*100vw/375);
  }
  .c-button {
    padding: calc(20*100vw/375) 0 calc(16*100vw/375);
    margin: calc(40*100vw/375) auto 0;
    width: calc(335*100vw/375);
    height: calc(80*100vw/375);
    font-size: calc(14*100vw/375);
  }
  .c-button::after {
    right: calc(10 * 100vw / 375);
    width: calc(20 * 100vw / 375);
    height: calc(15 * 100vw / 375);
  }
  .c-item-name,
  .c-item-credit {
    font-size: calc(14*100vw/375);
    line-height: 2;
  }
  .c-summary {
    margin-top: calc(23*100vw/375);
    font-size: calc(16*100vw/375);
    line-height: 2;
  }
    .slick-arrow {
    position: absolute;
    width: 8vw;
    height: 8vw;
    transform: translateY(-114%);
    opacity: 0.8;
    border: none;
    top: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    background: initial;
    z-index: 10;
    cursor: pointer;
  }
  .slick-prev {
    transform: rotate(0);
    left: 0;
  }
  .slick-next {
    transform: rotate(135deg);
    right: 0;
  }
  .slick-arrow::after {
    content: "";
    display: block;
    width: 2.8vw;
    height: 2.8vw;
    border-top: 0.533333333333333vw #000 solid;
    border-left: 0.533333333333333vw #000 solid;
  }
  .slick-prev::after {
    transform: rotate(-45deg);
    margin-left: 1.866666666666667vw;
  }
  .slick-next::after {
    transform: rotate(5deg);
    margin-right: 1.866666666666667vw;
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- リンクエリアの設定 -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.p-product__container-links {
  display: flex;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: min(700*100vw/1400, 700px);
  margin: min(40*100vw/1400, 40px) auto 0;
  row-gap: min(60*100vw/1400, 60px);
}
.p-product__container-links .c-item-name {
  font-size: min(16*100vw/1400, 16px);
  line-height: 1;
}
.p-product__container-links .p-product__card {
  position: relative;
}
.p-product__container-links .p-product__card-image {
  width: min(200*100vw/1400, 200px);
  margin: min(20*100vw/1400, 20px) 0;
}
.p-product__container-links .p-product__arrow {
  position: absolute;
  transform: rotate(90deg);
  width: 5%;
  right: 50%;
  top: 70%;
}
.p-product__card-new {
  position: absolute;
  top: max(-30*100vw/1400, -30px);
  left: 0;
  font-size: min(24*100vw/1400, 24px);
  font-weight: 700;
  color: rgb(163, 155, 172);
  font-family: "futura-pt", sans-serif;
  transform: rotate(-15deg);
}
@media screen and (max-width: 767px) {
  .p-product__container-links .p-product__arrow {
    position: absolute;
    transform: rotate(90deg);
    width: 8%;
    right: 45%;
    top: 60%;
  }
  .p-product__container-links {
    width: calc(335*100vw/375);
    margin-top: calc(32*100vw/375);
    margin-bottom: calc(100*100vw/375);
    row-gap: calc(30*100vw/375);
  }
  .p-product__container-links .c-item-name {
    font-size: calc(14*100vw/375);
  }
  .p-product__container-links .p-product__card-image {
    width: calc(145*100vw/375);
    margin: calc(25*100vw/375) 0;
  }
  .p-product__card-new {
    top: calc(-23*100vw/375);
    font-size: calc(17*100vw/375);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- メインコンテンツの設定 -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.p-product {
  width: min(800*100vw/1400, 800px);
  margin: min(180*100vw/1400, 180px) auto 0;
  text-align: center;
}
.p-product .c-maintitle {
  font-size: min(30*100vw/1400, 30px);
  line-height: 1;
  font-weight: var(--font-weight-bold);
}
.p-product_number {
  position: relative;
  margin-bottom: min(50*100vw/1400, 50px);
  font-size: min(80*100vw/1400, 80px);
  line-height: 1;
  font-family: "futura-pt", sans-serif;
  font-weight: var(--font-weight-bold);
  text-align: left;
}
.p-product_number_img {
  width: min(120*100vw/1400, 120px);
  position: absolute;
  top: max(-70*100vw/1400, -70px);
  left: 0;
}
.p-product_number span {
  font-family: "futura-pt", sans-serif;
  font-weight: var(--font-weight-bold);
  padding-left: min(40*100vw/1400, 40px);
}
.p-product__card-image {
  margin-bottom: min(20*100vw/1400, 20px);
}

.p-product__container[data-pattern="pattern-d"] {
  width: min(750*100vw/1400, 750px);
  margin: min(80*100vw/1400, 80px) auto 0;
  display: flex;
  align-items: center;
}
.p-product__container[data-pattern="pattern-d"] .p-product__card {
  width: min(250*100vw/1400, 250px);
}
.p-product .c-button {
  margin-top: min(100*100vw/1400, 100px);
}
@media screen and (max-width: 767px) {
  .p-product {
    width: 100%;
    margin-top: calc(60*100vw/375);
  }
  .p-product .c-maintitle {
    font-size: calc(30*100vw/375);
  }
  .p-product_number {
    margin-bottom: calc(26*100vw/375);
    font-size: calc(50*100vw/375);
    margin-left: calc(20*100vw/375);
  }
  .p-product_number_img {
    width: calc(68*100vw/375);
    top: calc(-72*100vw/375);
  }
  .p-product_number span {
    padding-left: calc(24*100vw/375);
  }
  .p-product__card-image {
    margin-bottom: calc(24*100vw/375);
  }
  
  .p-product__container[data-pattern="pattern-d"] {
    width: calc(351*100vw/375);
    margin-top: calc(26*100vw/375);
  }
  .p-product__container[data-pattern="pattern-d"] .p-product__card {
    width: calc(176*100vw/375);
  }
  .p-product .c-button {
    margin-top: calc(70*100vw/375);
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- タイトルカラーの設定 -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.p-product01 .p-product_number_img {
  fill: rgb(163, 155, 172);
}
.p-product01 .p-product_number span {
  color: rgb(163, 155, 172);
}
.p-product02 .p-product_number_img {
  fill: rgb(49, 62, 66);
}
.p-product02 .p-product_number span {
  color: rgb(49, 62, 66);
}
.p-product03 .p-product_number_img {
  fill: rgb(45, 49, 55);
}
.p-product03 .p-product_number span {
  color: rgb(45, 49, 55);
}
.p-product04 .p-product_number_img {
  fill: rgb(219, 220, 216);
}
.p-product04 .p-product_number span {
  color: rgb(219, 220, 216);
}
.p-product05 .p-product_number_img {
  fill: rgb(64, 69, 79);
}
.p-product05 .p-product_number span {
  color: rgb(64, 69, 79);
}
.p-product06 .p-product_number_img {
  fill: rgb(49, 53, 58);
}
.p-product06 .p-product_number span {
  color: rgb(49, 53, 58);
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
- タイトルカラーの設定 -
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.p-product03 .c-summary {
  margin-bottom: min(30*100vw/1400, 30px);
}
