@charset "UTF-8";

/* ========================================
	Founfation (id推奨)
========================================= */

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  font-family: "Noto Sans", "Yu Gothic UI", YuGothic, "Yu Gothic", sans-serif;
  color: #999;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

picture,figure {
  display: block;
  width: 100%;
  height: auto;
}

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

a,
button {
  -webkit-transition: .3s;
  transition: .3s;
  cursor: pointer;
}

a:hover,
button:hover {
  opacity: .7;
}

/* ========================================
	Layout (id推奨)
	命名規則: #id-
========================================= */

/* ========================================
	Project(コンテンツを構成する具体的な要素)
	命名規則: .p-
========================================= */

.l-fv {
  width: 100%;
  height: auto;
}

.p-fv__content {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.p-fv__title {
  position: absolute;
  top: calc(187/900*100%);
  left: calc(482/1200*100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(434/1200*100%);
  height: calc(304/900*100%);

  & .p-fv__title__line1 {
    position: relative;
    width: 100%;
    height: calc(135/304*100%);
    & .js-scrollchangeTarget {
      &:nth-child(1) {
        position: absolute;
        top: calc(30/135*100%);
        left: calc(50/434*100%);
        width: calc(33/434*100%);
      }
      &:nth-child(2) {
        position: absolute;
        top: calc(86/135*100%);
        left: calc(93/434*100%);
        width: calc(48/434*100%);
      }
      &:nth-child(3) {
        position: absolute;
        top: calc(60/135*100%);
        left: calc(154/434*100%);
        width: calc(48/434*100%);
      }
      &:nth-child(4) {
        position: absolute;
        top: 0;
        left: calc(218/434*100%);
        width: calc(6/434*100%);
      }
    }
  }
  & .p-fv__title__line2 {
    position: relative;
    width: 100%;
    height: calc(108/304*100%);

    & .js-scrollchangeTarget {
      &:nth-child(1) {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(73/434*100%);
      }
      &:nth-child(2) {
        position: absolute;
        bottom: 0;
        left: calc(93/434*100%);
        width: calc(48/434*100%);
      }
      &:nth-child(3) {
        position: absolute;
        top: calc(29/108*100%);
        left: calc(148/434*100%);
        width: calc(80/434*100%);
      }
      &:nth-child(4) {
        position: absolute;
        top: calc(29/108*100%);
        left: calc(241/434*100%);
        width: calc(37/434*100%);
      }
      &:nth-child(5) {
        position: absolute;
        bottom: 0;
        right: calc(90/434*100%);
        width: calc(48/434*100%);
      }
      &:nth-child(6) {
        position: absolute;
        top: calc(30/108*100%);
        right: calc(43/434*100%);
        width: calc(34/434*100%);
      }
      &:nth-child(7) {
        position: absolute;
        top: calc(6/108*100%);
        right: 0;
        width: calc(34/434*100%);
      }
    }
  }
}

.p-fv__img1 {
  width: calc(600/1200*100%);
  height: auto;
}

.p-fv__imgbox {
  position: relative;
  width: calc(400/1200*100%);
  height: auto;
}

.p-fv__img2 {
  width: 100%;
  height: auto;
  margin-top: calc(77/16*1rem);
}

.p-fv__textbox {
  margin-top: calc(60/16*1rem);
  font-size:calc(18/16*1rem);
  color: #b3b3b3;
  line-height: 1;
  letter-spacing: 0.075em;
}

.p-fv__text1 {
  transform: translateX(calc(-32/16*1rem));
}

.p-fv__text2 {
  transform: translateX(calc(32/16*1rem));
  margin-top: calc(20/16*1rem);
  text-align: right;
}

.l-introduction {
  padding-top: calc(240/16*1rem);
}

.p-introduction__title {
  width: calc(398/1200*100%);
  margin-left: calc(5/16*1rem);
}

.p-introduction__content {
  display: flex;
  justify-content: space-between;
  margin-top: calc(65/16*1rem);
}

.p-introduction__text {
  flex: 1;
  padding-right: calc(20/16*1rem);
  font-size: calc(16/16*1rem);
  font-weight: 300;
  color: #666;
  line-height: calc(42/16);
  letter-spacing: 0.15em;
}

.p-introduction__mv {
  width: calc(400/1200*100%);
  height: auto;
  aspect-ratio: 400/710;
  margin-top: calc(13/16*1rem);
}

.p-introduction__video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.l-product {
  display: flex;
  flex-direction: column;
  gap: calc(240/16*1rem);
  padding-top: calc(267.5/16*1rem);
}

.p-product__flex1-2 {
  margin-top: calc(160/16*1rem);
}

.p-product__img2-1 {
  margin: 0 calc(600/1200*100%) 0 auto;
}

.p-product__img2-2 {
  margin: calc(159/16*1rem) 0 0 auto;
}

.p-product__img2-3 {
  margin: calc(150/16*1rem) auto 0 calc(200/1200*100%);
}

.p-product__img3-1 {
  margin-left: auto;
}

.p-product__flex3-1 {
  margin-top: calc(-160/16*1rem);
}

.p-product__img4-1 {
  margin: 0 auto;
}

.p-product__img4_2 {
  margin-top: calc(213/16*1rem);
}

.p-product__flex4-1 {
  margin-top: calc(96.5/16*1rem);
}

.p-product__img5-1 {
  margin-left: auto;
}

.p-product__flex5-1 {
  margin-top: calc(-160/16*1rem);
}

.p-product__flex6-1 {
  margin-right: calc(200/1200*100%);
}

.p-product__flex8-1 {
  margin-top: calc(-273.5/16*1rem);
}

.p-product__img9-1 {
  margin-left: calc(200/1200*100%);
}

.c-flex {
  display: flex;
  gap: calc(16/16*1rem);

  & figure {
    margin-top: calc(6.5/16*1rem);
  }

  & .p-product__credit {
    margin-top: 0;
  }
}

.c-jc--end {
  justify-content: flex-end;
}

.c-al--end {
  align-items: flex-end;

  & figure {
    margin-top: 0;
    margin-bottom: calc(6.5/16*1rem);
  }
}

.c-fd--rowreverse {
  flex-direction: row-reverse;
  text-align: right;
}

.c-proruct__size--s {
  width: calc(400/1200*100%);
}

.c-proruct__size--m {
  width: calc(600/1200*100%);
}

.c-proruct__size--l {
  width: calc(800/1200*100%);
}

.p-product__credit {
  margin-top: calc(8.5/16*1rem);
}

.p-product__credititem {
  display: block;
  line-height: 1;

  & a {
    text-decoration: none;
    font-size: calc(13/16*1rem);
    color: #999;
    line-height: 2;
    letter-spacing: 0.025em;
  }

  & span {
    text-decoration: underline;
  }
}

.l-footer {
  margin-top: calc(215.5/16*1rem);
}

.p-footer__content {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.p-footer__list {
  margin-top: calc(11.5/16*1rem);
}

.p-footer__listitem {
  font-size: calc(13/16*1rem);
  text-align: right;
  line-height: 2;
  letter-spacing: 0.025em;
}

.p-footer__linkbox {
  display: flex;
  gap: calc(60/16*1rem);
}

.p-footer__logo {
  width: calc(140/16*1rem);
}

.p-footer__linklist {
  margin-top: calc(4/16*1rem);
}

.p-footer__linklistitem {
  display: block;
  line-height: 1;
}

.p-footer__linklistitem a {
  display: block;
  text-decoration: none;
  font-size: calc(16/16*1rem);
  color: #999;
  line-height: calc(34/16);
  letter-spacing: 0.025em;
}

.p-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(94/16*1rem);
  margin-top: calc(68.5/16*1rem);
  border-top: 1px solid #f0f0f0;
}

.p-footer__bottomcopyright {
  font-size: calc(13/16*1rem);
  line-height: 2;
  letter-spacing: 0.025em;
}

.p-footer__topbtn {
  text-decoration: none;
  font-size: calc(16/16*1rem);
  color: #999;
  line-height: calc(28/16);
  letter-spacing: 0.025em;
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 120%;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 100%;
  }

  .p-fv__content {
    display: block;
  }

  .p-fv__title {
    top: calc(612/1215*100%);
    left: 0;
    width: calc(458/670*100%);
    & .js-appear1 {
      width: calc(184/458*100%);
      margin-left: calc(50/458*100%);
    }
    & .js-appear2 {
      margin-top: 0;
    }
  }

  .p-fv__title {
    top: calc(612/1215*100%);
    left: 0;
    width: calc(458/670*100%);
    height: calc(256/1215*100%);

    & .p-fv__title__line1 {
      height: calc(144/256*100%);
    }
    & .p-fv__title__line2 {
      height: calc(112/256*100%);
    }
  }

  .p-fv__img1 {
    width: calc(448/670*100%);
  }

  .p-fv__imgbox {
    width: calc(335/670*100%);
    margin: calc(20/16*1rem) 0 0 auto;
  }

  .p-fv__img2 {
    margin-top:0;
  }

  .p-fv__textbox {
    position: absolute;
    left: 0;
    bottom: calc(80/502*100%);
    transform: translateX(-100%);
    width: 100%;
    margin-top: 0;
    font-size:calc(9/16*1rem);
  }
  .p-fv__text1 {
    transform: initial;
  }

  .p-fv__text2 {
    transform: translateX(calc(10/16*1rem));
    margin-top: calc(8/16*1rem);
    text-align: left;
  }

  .l-introduction {
    padding-top: calc(117.5/16*1rem);
  }

  .p-introduction__title {
    width: calc(452/670*100%);
    margin-left: 0;
  }

  .p-introduction__content {
    display: block;
    margin-top: calc(34/16*1rem);
  }

  .p-introduction__text {
    padding-right: 0;
    font-size: calc(12/16*1rem);
    line-height: calc(46/24);
    letter-spacing: 0.1em;
  }

  .p-introduction__mv {
    width: calc(447/670*100%);
    aspect-ratio: 447/795;
    margin: calc(75/16*1rem) 0 0 auto;
  }

  .l-product {
    gap: calc(120/16*1rem);
    padding-top: calc(120/16*1rem);
  }

  .p-product__flex1-2 {
    margin-top: calc(75/16*1rem);
  }

  .p-product__img2-1 {
    margin: 0 calc(600/1200*100%) 0 auto;
  }

  .p-product__img2-2 {
    margin: calc(80/16*1rem) 0 0 auto;
  }

  .p-product__img2-3 {
    margin: calc(80/16*1rem) auto 0 0;
  }

  .p-product__flex3-1 {
    margin-top: calc(80/16*1rem);
  }

  .p-product__img3-2 {
    margin: 0 auto 0 0;
  }

  .p-product__img4-1 {
    margin: 0 auto;
  }

  .p-product__img4_2 {
    margin-top: calc(115/16*1rem);
  }

  .p-product__flex4-1 {
    margin-top: calc(75/16*1rem);

    & .p-product__img4-3 {
      width: calc(450/670*100%);
    }
  }

  .p-product__img5-1 {
    margin-left: auto;
  }

  .p-product__flex5-1 {
    margin-top: calc(80/16*1rem);
  }

  .p-product__img5-2 {
    margin-right: auto;
  }

  .p-product__flex6-1 {
    margin: 0;

    & .p-product__img6-1 {
      width: calc(448/670*100%);
    }
  }

  .p-product__flex8-1 {
    margin-top: calc(57/16*1rem);
  }

  .p-product__img9-1 {
    margin: 0 auto 0 0;
  }

  .c-flex {
    flex-direction: column;
    gap: calc(8/16*1rem);

    & figure {
      margin-top: 0;
    }

    & .p-product__credit {
      margin-top: 0;
    }
  }

  .c-jc--end {
    justify-content: flex-end;
  }

  .c-al--end {
    align-items: flex-end;

    & figure {
      margin-bottom: 0;
    }
  }

  .c-fd--rowreverse {
    flex-direction: column;
    text-align: right;
  }

  .c-proruct__size--s {
    width: calc(335/670*100%);

    & .p-product__credit {
      width: calc(100vw - 2.5rem);
    }
  }

  .c-proruct__size--m {
    width: calc(558/670*100%);

    & .p-product__credit {
      width: calc(100vw - 2.5rem);
    }
  }

  .c-proruct__size--l {
    width: 100%;
  }

  .p-product__credit {
    width: 100%;
    margin-top: calc(8.5/16*1rem);
  }

  .p-product__credititem {
    & a {
      font-size: calc(11/16*1rem);
      line-height: calc(42/22);
      letter-spacing: 0;
    }
  }

  .l-footer {
    margin-top: calc(113/16*1rem);
  }

  .p-footer__content {
    flex-direction: column;
  }

  .p-footer__list {
    margin-top: 0;
  }

  .p-footer__listitem {
    font-size: calc(11/16*1rem);
    text-align: left;
    line-height: calc(42/22);
    letter-spacing: 0;
  }

  .p-footer__linkbox {
    display: flex;
    justify-content: space-between;
    gap: calc(60/16*1rem);
    margin-top: calc(105/16*1rem);
  }

  .p-footer__logo {
    width: calc(94/16*1rem);
  }

  .p-footer__linklist {
    margin-top: calc(5/16*1rem);
  }

  .p-footer__linklistitem a {
    font-size: calc(13/16*1rem);
    text-align: right;
    line-height: calc(48/26);
  }

  .p-footer__bottom {
    height: calc(54/16*1rem);
    margin-top: calc(55/16*1rem);
    border-top: 1px solid #f0f0f0;
  }

  .p-footer__bottomcopyright {
    font-size: calc(8/16*1rem);
    line-height: calc(26/16);
  }

  .p-footer__topbtn {
    font-size: calc(13/16*1rem);
    line-height: calc(28/26);
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: 90%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1300px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  html {
    font-size: 95%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  html {
    font-size: 85%;
  }
}

@media screen and (min-width: 769px) and (max-width: 800px) {
  html {
    font-size: 80%;
  }
}

@media screen and (min-width: 421px) and (max-width: 768px) {
  html {
    font-size: 100%;
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  html {
    font-size: 110%;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  html {
    font-size: 120%;
  }
}