@charset "UTF-8";

@font-face {
    font-family: 'TAV';
    src: url('../fonts/Taviraj-Regular.woff');
}
@font-face {
    font-family: 'OUT';
    src: url('../fonts/Outfit-Regular.woff');
}
@font-face {
    font-family: 'OUT-MDI';
    src: url('../fonts/Outfit-Medium.woff');
}
@font-face {
    font-family: 'OUT-BLD';
    src: url('../fonts/Outfit-Bold.woff');
}
@font-face {
    font-family: 'IBM';
    src: url('../fonts/IBMPlexSansJP-Regular.woff2');
}
@font-face {
    font-family: 'IBM-BLD';
    src: url('../fonts/IBMPlexSansJP-Bold.woff2');
}
@font-face {
    font-family: 'IBM-JP-BLD';
    src: url('../fonts/IBMPlexSansJP-SemiBold.woff2');
}
@font-face {
    font-family: 'IBM-MDI';
    src: url('../fonts/IBMPlexSans-Medium.woff2');
}
@font-face {
    font-family: 'IBM-JP-MDI';
    src: url('../fonts/IBMPlexSansJP-Medium.woff2');
}
@font-face {
    font-family: 'IBM-SEM-BLD';
    src: url('../fonts/IBMPlexSans-SemiBold.woff2');
}
@font-face {
    font-family: 'IBM-SEM-JP-BLD';
    src: url('../fonts/IBMPlexSansJP-SemiBold.woff2');
}
@font-face {
    font-family: 'NOTO';
    src: url('../fonts/NotoSansJP-Regular.otf');
}
@font-face {
    font-family: 'NOTO-MDI';
    src: url('../fonts/NotoSansJP-Medium.otf');
}
@font-face {
    font-family: 'NOTO-BLD';
    src: url('../fonts/NotoSansJP-Bold.otf');
}
@font-face {
    font-family: 'NOTO-BLK';
    src: url('../fonts/NotoSansJP-Black.otf');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: "Arial", "Helvetica Neue", "Noto Sans JP", sans-serif;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.vectiv-lp {
  --pc: 1;
  width: 100%;
  overflow: hidden;
  background: #fff;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
}

/*.hero { order: 1; }
.intro { order: 2; }
.style-forward { order: 3; }
.style-versa { order: 4; }
.dark-info { order: 5; }
.products { order: 6; }*/

.hero {
  width: 100%;
  background: #dbe3e3;
}

.hero img {
  width: 100%;
  aspect-ratio: 5000 / 2500;
  object-fit: cover;
}

.intro {
/*  min-height: 32.291667vw;*/
  padding: 150px 0px 150px 0px;
  background: #f4f4f4;
  text-align: center;
}

.inner {
  width: 100%;
  margin: 0 auto;
}

.dark-info h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0;
}

.intro h1 {
  font-family: 'IBM-BLD';
  font-size: 50px;
  margin: 0px auto 16px auto;
  line-height: 60px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.intro .lead {
  font-family: 'NOTO-BLD';
  font-size: 28px;
  margin: 0px auto 64px auto;
  line-height: 38px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.intro p:not(.lead) {
  font-family: 'NOTO';
  font-size: 16px;
  margin: 0px auto 0px auto;
  line-height: 38px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.section-head p{
  font-family: 'NOTO';
  font-size: 16px;
  margin: 0px auto 0px auto;
  line-height: 36px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.style-section {
  padding: 7.239583vw 0 5.625000vw;
  background: #fff;
  text-align: center;
}

.style-forward {
/*  min-height: 73.125000vw;*/
  padding: 120px 0px 120px 0px;
}

.style-versa {
  /*  min-height: 73.125000vw;*/
  padding: 120px 0px 120px 0px;
}

.section-head {
  width: 700px;
  margin: 0px auto 48px auto;
}

.section-head h2 {
  font-family: 'IBM-BLD';
  font-size: 42px;
  margin: 0px auto 32px auto;
  line-height: 52px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.look-slider {
  width: 38.541667vw;
  margin: 0 auto;
}

.look-slider .splide__track {
  overflow: hidden;
}

.look-slider .splide__slide {
  display: flex;
  justify-content: center;
  width: 100%;
}

.look-slider .splide__slide img {
  width: 31.250000vw;
  aspect-ratio: 1800 / 2241;
  object-fit: cover;
  max-width: none;
}

.look-slider .splide__arrow {
  width: 2.083333vw;
  height: 2.083333vw;
  border: 1px solid #cfcfcf;
  background: #fff;
  opacity: 1;
}

.look-slider .splide__arrow svg {
  width: 0.625000vw;
  height: 0.625000vw;
  fill: #aaa;
}

.look-slider .splide__arrow--prev {
  left: -0.729167vw;
}

.look-slider .splide__arrow--next {
  right: -0.729167vw;
}

.look-slider .splide__pagination {
  bottom: -1.875000vw;
  gap: 0.677083vw;
}

.look-slider .splide__pagination__page {
  width: 0.260417vw;
  height: 0.260417vw;
  margin: 0;
  background: #d9d9d9;
  opacity: 1;
  transform: none;
}

.look-slider .splide__pagination__page.is-active {
  background: #111;
  transform: none;
}

.body-copy {
  width: 900px;
  font-family: 'NOTO';
  font-size: 16px;
  margin: 60px auto 0px auto;
  line-height: 38px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.dark-info {
/*  min-height: 94.062500vw;*/
  padding: 120px 0px 120px 0px;
  background: #333;
  color: #fff;
  text-align: center;
}

.dark-info .inner {
  width: 900px;
}

.dark-info h2 {
  font-family: 'IBM-BLD';
  font-size: 42px;
  margin: 0px auto 64px auto;
  line-height: 52px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
}

.store-card {
  width: 754px;
  margin: 0px auto 64px auto;
  padding: 64px 0px;
  background: #4b4b4b;
  display: block;
  text-align: left;
}

.store-card a{
  text-decoration: underline;
}

.store-card a:hover{
  text-decoration: none;
}

.store-card img {
  width: 514px;
  margin: 0px auto 40px auto;
}

.store-card dl {
  display: grid;
  grid-template-columns: 4.687500vw 1fr;
  gap: 0.416667vw 1.302083vw;
  width: 26.041667vw;
  margin: 0 auto;
  font-size: 0.520833vw;
  font-weight: 700;
  line-height: 1.55;
}

.store-card dt,
.store-card dd {
  margin: 0;

  font-family: 'NOTO';
  font-size: 16px;
  line-height: 26px;
  color: #fff;
  text-align: left;
  letter-spacing: 0px;
}

.info-copy {
  width: 900px;
  font-family: 'NOTO';
  font-size: 16px;
  line-height: 36px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
  margin: 0px auto 0px auto;
}

.dark-info .novelty-title {
  font-family: 'IBM-BLD';
  font-size: 42px;
  line-height: 52px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
  margin: 64px auto 16px auto;
}

.novelty-img {
  width: 13.020833vw;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto 1.666667vw;
}

.novelty-copy {
  width: 29.687500vw;
}

.products {
  min-height: 152.187500vw;
  padding: 7.604167vw 0 0;
  background: #fff;
}

.product-grid {
  width: 66.14%;
  margin: 0px auto 0px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6%;
  row-gap: 72px;
}

.product-card {
  text-align: left;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 11px;
}

.product-card h3 {
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 24px;
  color: #000;
  text-align: left;
  letter-spacing: 0px;
  margin: 0px auto 11px 0px;
}

.product-card p {
  font-family: 'NOTO';
  font-size: 14px;
  line-height: 22px;
  color: #000;
  text-align: left;
  letter-spacing: 0px;
  margin: 0px auto 23px 0px;
}

.product-card a,
.all-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.product-card a:hover,
.all-button:hover {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  background-color: #111;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
}

.product-card a {
  width: 100%;
  height: 52px;
  margin: 0px auto 0px auto;
}

.all-button {
  width: 480px;
  height: 64px;
  margin: 110px auto 120px auto;
  background: #333;
  border-color: #333;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
}

.all-button:hover {
  width: 480px;
  height: 64px;
  margin: 110px auto 120px auto;
  background: #fff;
  border-color: #333;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 24px;
  color: #333;
  text-align: center;
  letter-spacing: 0px;
}

@media (min-width: 1100px) {
  .pc-only {
    display: block;
  }
  .sp-only {
    display: none;
  }
}

@media (max-width: 1099px) {
  .vectiv-lp {
    --sp: 1;
  }

  .style-versa {
    order: 4;
  }

  .dark-info {
    order: 5;
  }

  .products {
    order: 6;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  .hero img {
    width: 100%;
/*    height: 77.600000vw;*/
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }

  .intro {
/*    min-height: 263.466667vw;*/
    padding: 64px 0px 64px 0px;
  }

  .inner,
  .intro .inner,
  .dark-info .inner {
    width: 88%;
  }

  .intro h1 {
    font-family: 'IBM-BLD';
    font-size: 32px;
    margin: 0px auto 16px auto;
    line-height: 36px;
    color: #000;
    text-align: center;
    letter-spacing: 0px;
  }

  .intro .lead {
    font-family: 'NOTO-BLD';
    font-size: 18px;
    margin: 0px auto 32px auto;
    line-height: 25px;
    color: #000;
    text-align: center;
    letter-spacing: 0px;
  }

  .intro p:not(.lead),
  .section-head p,
  .body-copy,
  .info-copy {
    font-family: 'NOTO';
    font-size: 16px;
    margin: 0px auto 0px auto;
    line-height: 36px;
    color: #000;
    text-align: center;
    letter-spacing: 0px;
  }

  .style-section {
    padding: 21.333333vw 0 0;
  }

  .style-forward {
/*    min-height: 319.733333vw;*/
    padding: 64px 0px 0.1px 0px;
  }

  .style-versa {
/*    min-height: 250.133333vw;*/
    padding: 64px 0px 64px 0px;
  }

  .section-head {
    width: 88%;
    margin-bottom: 32px;
  }

  .section-head h2 {
    font-family: 'IBM-BLD';
    font-size: 28px;
    margin: 0px auto 24px auto;
    line-height: 38px;
    color: #000;
    text-align: center;
    letter-spacing: 0px;
  }

  .look-slider {
    width: 79.333333vw;
  }

  .look-slider .splide__slide img {
    width: 79.333333vw;
  }

  .look-slider .splide__arrow {
    top: 434px;
    width: 12.000000vw;
    height: 12.000000vw;
    border-color: #333;
  }

  .look-slider .splide__arrow svg {
    width: 4.000000vw;
    height: 4.000000vw;
    fill: #333;
  }

  .look-slider .splide__arrow--prev {
    left: 25.733333vw;
  }

  .look-slider .splide__arrow--next {
    right: 25.733333vw;
  }

  .look-slider .splide__pagination {
    bottom: -5.866667vw;
    gap: 3.733333vw;
  }

  .look-slider .splide__pagination__page {
    width: 2.400000vw;
    height: 2.400000vw;
  }

  .body-copy {
    width: 88%;
    margin-top: 34.666667vw;
  }

  .dark-info {
/*    min-height: 481.600000vw;*/
    padding: 64px 0px 64px 0px;
  }

  .dark-info h2 {
    font-family: 'IBM-BLD';
    font-size: 28px;
    margin: 0px auto 64px auto;
    line-height: 38px;
    color: #fff;
    text-align: center;
    letter-spacing: 0px;
  }

  .store-card {
    width: 100%;
/*    min-height: 149.600000vw;*/
    margin-bottom: 64px;
    padding: 24px 0px 24px 0px;
    display: block;
  }

  .store-card img {
    width: 90%;
    aspect-ratio: 1542 / 1029;
    object-fit: cover;
    margin: 0 auto 6.933333vw;
  }

  .store-card dl {
      display: flex;
      grid-template-columns: 18.666667vw 1fr;
      gap: 1.600000vw 2.666667vw;
      width: 100%;
      font-size: 2.400000vw;
      line-height: 1.6;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
  }

  .store-card dd {
    margin: 0;
    font-family: 'NOTO';
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    text-align: center;
    letter-spacing: 0px;
  }

  .store-card dt {
    margin: 0;
    font-family: 'NOTO-BLD';
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    text-align: center;
    letter-spacing: 0px;
  }

  .info-copy {
    width: 100%;
    color: #fff;
  }

  .dark-info .novelty-title {
    font-family: 'IBM-BLD';
    font-size: 28px;
    line-height: 38px;
    color: #fff;
    text-align: center;
    letter-spacing: 0px;
    margin: 32px auto 16px auto;
  }

  .novelty-img {
    width: 240px;
    margin-bottom: 16px;
  }

  .novelty-copy {
    width: 77.333333vw;
  }

  .products {
/*    min-height: 660.800000vw;*/
    padding: 48px 0px 48px 0px;
  }

  .product-grid {
      width: 88%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 5%;
      row-gap: 16px;
      align-items: stretch;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card img {
    margin-bottom: 2.666667vw;
  }

  .product-card h3 {
    font-family: 'NOTO-BLD';
    font-size: 16px;
    line-height: 24px;
    color: #000;
    text-align: left;
    letter-spacing: 0px;
    min-height: 48px;
    margin: 0px auto 11px 0px;
  }

  .product-card p {
    font-family: 'NOTO';
    font-size: 14px;
    line-height: 22px;
    color: #000;
    text-align: left;
    letter-spacing: 0px;
    margin: 0px auto 23px 0px;
  }

  .product-card a,
.all-button {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #000;
  text-align: center;
  letter-spacing: 0px;
}

.product-card a:hover,
.all-button:hover {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  background-color: #111;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
}

  .product-card a {
    height: 52px;
    font-size: 16px;
    line-height: 22px;
    margin: auto auto 0px auto;
  }

  .all-button {
  width: 88%;
  height: 64px;
  margin: 90px auto 120px auto;
  background: #333;
  border-color: #333;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  letter-spacing: 0px;
}

.all-button:hover {
  width: 88%;
  height: 64px;
  margin: 90px auto 120px auto;
  background: #fff;
  border-color: #333;
  font-family: 'NOTO-BLD';
  font-size: 16px;
  line-height: 22px;
  color: #333;
  text-align: center;
  letter-spacing: 0px;
}
}