.yt-popup {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
}
.yt-popup.yt-open {
  transition: opacity 0.8s ease-out;
  opacity: 1;
  width: 100%;
  height: 100vh;
  pointer-events: unset;
}
.yt-popup iframe {
  position: relative;
  z-index: 100;
  width: 77vw;
  max-width: 400px;
  height: 80vh;
  max-height: 533px;
}
.yt-popup .bg-wrapper {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
@media screen and (min-width: 801px) {
  .yt-popup iframe {
    height: 88vh;
    max-height: 700px;
  }
}

body {
  background-color: #ffffff;
  background: unset;
}

@media screen and (min-width: 801px) {
  header {
    justify-content: flex-end;
  }

  .header-container {
    display: none;
  }
}
.pattern-wrapper {
  background: url(../img/common/bg-pattern-dark.png) center no-repeat;
  background-size: cover;
}

.grey-black-wrapper {
  background-color: rgba(0, 0, 0, 0.85);
}

.title-no-container {
  font-family: "nimbus-sans", Yu Gothic, YuGothic, "Yu Gothic", Meiryo, sans-serif;
  font-weight: 300;
}
.title-no-container p.title-no {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin-bottom: 0.6em;
  line-height: 100%;
  font-weight: 300;
}
.title-no-container h2.title {
  line-height: 100%;
  font-weight: 400;
  margin-bottom: 0.8em;
}

section.first-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}
section.first-view .left-col {
  position: relative;
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
}
section.first-view .left-col .fv-logo {
  display: none;
}
section.first-view .left-col .mv-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  object-position: center;
}
section.first-view .left-col .button-wrapper {
  position: absolute;
  left: 7.6vw;
  bottom: 4.5vh;
  display: flex;
  align-items: center;
  z-index: 2;
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 130%;
}
section.first-view .left-col .button-wrapper button {
  background: unset;
  border: 1px solid #797979;
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  width: clamp(60px, 6.5vw, 80px);
  height: clamp(60px, 6.5vw, 80px);
  margin-right: 1em;
}
section.first-view .right-col {
  position: relative;
  box-sizing: border-box;
  padding: 10%;
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}
section.first-view .right-col h1, section.first-view .right-col p {
  text-align: center;
}
section.first-view .right-col h1 {
  font-size: clamp(18px, 3vw, 40px);
  font-weight: 500;
  display: flex;
  justify-content: flex-start;
  margin: 0 auto 1em;
}
section.first-view .right-col h1 .highlight {
  letter-spacing: 0.15em;
  font-size: clamp(36px, 5.3vw, 72px);
  margin: 0.3em 0.1em 0 0.1em;
}
section.first-view .right-col p {
  font-size: clamp(14px, 2vw, 24px);
}
@media screen and (max-width: 801px) {
  section.first-view .hide-text {
    display: none;
  }
}
@media screen and (min-width: 801px) {
  section.first-view {
    grid-template-columns: 50% 50%;
  }
  section.first-view .left-col {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  section.first-view .left-col .fv-logo {
    display: block;
    position: absolute;
    width: 120px;
    height: auto;
    margin: auto;
    z-index: 10;
    align-self: center;
  }
  section.first-view .left-col .button-wrapper {
    left: 3vw;
  }
  section.first-view .right-col {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  section.first-view .right-col h1 {
    margin: 0 auto 1em;
  }
}

section.story {
  box-sizing: border-box;
  min-height: 100vh;
  padding: clamp(80px, 12vh, 100px) 0;
  background: url(../img/top/story-sp-1.webp) center no-repeat;
  background-size: cover;
}
section.story .text-container {
  width: 81%;
  margin: 0 auto;
}
section.story .text-container .text-body {
  max-width: 80%;
  margin-bottom: 3em;
}
@media screen and (min-width: 801px) {
  section.story {
    padding: clamp(80px, 20vh, 160px) 0;
    background: url(../img/top/story-1.webp) center no-repeat;
    background-size: cover;
  }
  section.story .text-container .text-body {
    max-width: 540px;
  }
}

section.products {
  padding: clamp(100px, 15vw, 180px) 0;
  background: url(../img/top/product-bg-tl-sp.webp) top left no-repeat, url(../img/top/product-bg-br-sp.webp) bottom 40% right no-repeat;
  background-size: 78%, 65%;
}
section.products .title-container {
  width: fit-content;
  margin: 0 auto;
}
section.products .title-container .title-no-container {
  margin-bottom: clamp(60px, 6vw, 90px);
}
section.products .product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: clamp(120px, 12.5vw, 160px);
}
section.products .product-card .img-col {
  width: 84.6%;
}
section.products .product-card .img-col img {
  width: 100%;
}
section.products .product-card .content-col {
  width: 84.6%;
  padding: clamp(24px, 4vw, 40px) 0 0 0;
}
section.products .product-card .content-col .text-container {
  width: 100%;
  margin: auto;
}
section.products .product-card .content-col .text-container h3 {
  font-weight: 300;
  line-height: 100%;
  margin-bottom: 1em;
}
section.products .product-card .content-col .text-container p {
  letter-spacing: 0.06em;
}
section.products .product-card .content-col .text-container p.price-label {
  letter-spacing: 0;
  margin-top: 2em;
}
section.products .product-card .content-col .btn-container {
  width: 56%;
  margin: clamp(50px, 6.5vw, 80px) auto auto 0;
  display: flex;
  justify-content: space-between;
}
section.products .product-card:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 801px) {
  section.products {
    background: url(../img/top/product-bg-tl.webp) top left no-repeat, url(../img/top/product-bg-br.webp) bottom 35% right 7% no-repeat;
    background-size: 51.5%, 42%;
  }
  section.products .product-card {
    flex-direction: row;
    margin-bottom: 0;
  }
  section.products .product-card .img-col {
    position: relative;
    height: 100%;
    width: 57.3%;
  }
  section.products .product-card .img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  section.products .product-card .content-col {
    width: 42.7%;
    padding: clamp(20px, 4vw, 40px) 0;
  }
  section.products .product-card .content-col .text-container {
    width: 72.4%;
    margin: auto auto auto 6%;
  }
  section.products .product-card .content-col .text-container h3 {
    font-weight: 400;
  }
  section.products .product-card .content-col .text-container p {
    letter-spacing: 0;
  }
  section.products .product-card .content-col .btn-container {
    width: 51%;
    max-width: 312px;
    margin: clamp(50px, 6.5vw, 80px) auto auto 6%;
  }
  section.products .product-card.pc-reverse {
    margin-top: 160px;
    flex-direction: row-reverse;
  }
  section.products .product-card.pc-reverse .img-col {
    width: 48.2%;
  }
  section.products .product-card.pc-reverse .content-col {
    width: 51.8%;
  }
  section.products .product-card.pc-reverse .content-col .text-container {
    width: 60%;
    margin: auto auto auto 22.5%;
  }
  section.products .product-card.pc-reverse .content-col .btn-container {
    width: 41.8%;
    margin: clamp(50px, 6.5vw, 80px) auto auto 22.5%;
  }
}

section.news {
  padding: clamp(60px, 10vw, 120px) 0 clamp(60px, 13.3vw, 180px);
}
section.news .news-wrapper {
  width: 84.6%;
  max-width: 1000px;
  margin: 0 auto;
}
section.news .news-wrapper .title-container {
  margin-bottom: clamp(10px, 2vw, 32px);
}
section.news .news-wrapper .title-container h2 {
  margin-bottom: 0;
}

section.links {
  padding: 20px 0 170px 0;
}
section.links .link-wrapper {
  width: 84.6%;
  margin: 0 auto;
}
section.links .link-wrapper .title-no-container {
  display: block;
  margin-bottom: 50px;
}
section.links .link-wrapper .title-no-container:last-child {
  margin-bottom: 0;
}
section.links .link-wrapper h2 {
  font-family: "nimbus-sans", Yu Gothic, YuGothic, "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
  line-height: 100%;
  margin-bottom: 0;
}
section.links .link-wrapper h2 img {
  width: 0.6em;
}
@media screen and (min-width: 801px) {
  section.links {
    padding: 0 0 180px 0;
  }
  section.links .link-wrapper {
    display: flex;
    flex-direction: row;
    width: 60%;
    max-width: 1000px;
    justify-content: space-between;
  }
  section.links .link-wrapper .title-no-container {
    margin-bottom: 0;
  }
}

/*# sourceMappingURL=top.css.map */