@import url("https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Murecho:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=BIZ+UDPGothic&family=Waiting+for+the+Sunrise&display=swap");
@font-face {
  font-family: "NATS";
  src: url("../font/NATS-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media screen and (min-width: 769px) and (max-width: 1284px) {
  html,
  body {
    font-size: 0.78125vw;
  }
}
@media screen and (min-width: 1284px) {
  html,
  body {
    font-size: 0.78125vw;
  }
}
@media screen and (max-width: 768px) {
  html,
  body {
    font-size: 2.5641025641vw;
    overflow-x: hidden;
  }
  html.active,
  body.active {
    overflow-y: hidden;
  }
}

figure {
  line-height: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
}

a {
  text-decoration: none;
  color: #000;
  display: inline-block;
}

ul,
dl {
  list-style: none;
  padding: 0;
}

.u-pcDb {
  display: block !important;
}

.u-spDb {
  display: none !important;
}

.u-spDf {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .u-pcDb {
    display: none !important;
  }
  .u-spDb {
    display: block !important;
  }
  .u-spDf {
    display: flex !important;
  }
}
html,
body {
  font-family: "Noto Sans JP", sans-serif;
}
html.is-active,
body.is-active {
  overflow: hidden;
}

.u-pcDb {
  display: block !important;
}

.u-pcDf {
  display: flex !important;
}

.u-spDb,
.u-spDf {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .u-spDb {
    display: block !important;
  }
  .u-spDf {
    display: flex !important;
  }
  .u-pcDf,
  .u-pcDb {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  figure {
    margin-top: -0.1rem;
  }
}

.common__denimImage {
  max-width: 11.7rem;
  position: relative;
  z-index: 2;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .common__denimImage {
    max-width: 10rem;
  }
}
.common__denimENTitle {
  font-size: 1.7rem;
  position: relative;
  z-index: 2;
  line-height: 0.77;
  letter-spacing: 10%;
  font-family: "NATS", sans-serif;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .common__denimENTitle {
    font-size: 1.4rem;
    line-height: 0.74;
  }
}
.common__denimJPTitle {
  font-size: 2.1rem;
  position: relative;
  z-index: 2;
  font-weight: bold;
  font-family: "Murecho", sans-serif;
  margin-top: 0.55rem;
  letter-spacing: 0.03em;
  color: #D40000;
}
@media screen and (max-width: 768px) {
  .common__denimJPTitle {
    font-size: 1.8rem;
    line-height: 1.25;
  }
}
.common__denimDescription {
  font-weight: 500;
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  line-height: 1.36;
  letter-spacing: 10%;
  margin-top: 2.8rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #D40000;
}
@media screen and (max-width: 768px) {
  .common__denimDescription {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 2.4rem;
  }
}
.common__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  padding: 0.5rem 0 0rem 1rem;
  max-width: 25.7rem;
}
@media screen and (max-width: 768px) {
  .common__list {
    max-width: 22.2rem;
  }
}
.common__list::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.1rem;
  height: 100%;
  top: 0.5rem;
  left: 0;
  background-color: #D40000;
}
.common__buy {
  width: 3.9rem;
  height: 1.6rem;
  background-color: #C7C6C6;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  letter-spacing: 1%;
  font-family: "NATS", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .common__buy {
    font-size: 1.4rem;
    width: 3.3rem;
    height: 1.4rem;
  }
}
.common__comingsoon {
  width: 10.9rem;
  height: 1.6rem;
  background-color: #C7C6C6;
  border-radius: 0.6rem;
  font-size: 1.6rem;
  letter-spacing: 1%;
  font-family: "NATS", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .common__comingsoon {
    font-size: 1.4rem;
    width: 9.5rem;
    height: 1.4rem;
  }
}
.common__item {
  font-size: 1.9rem;
  font-weight: 400;
  color: #D40000;
  letter-spacing: 1%;
  font-family: "NATS", sans-serif;
  display: flex;
  line-height: 0;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .common__item {
    font-size: 1.6rem;
  }
}
.common__container {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.common__line01 {
  max-width: 104%;
  width: 104%;
  height: 1rem;
  position: absolute;
  z-index: 1;
  top: 5rem;
  left: -0.8rem;
}
@media screen and (max-width: 768px) {
  .common__line01 {
    top: 4rem;
  }
}
.common__line01 .sec01, .sec02 .common__line01 {
  max-width: 102%;
  width: 102%;
}
.common__moreContainer {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 4.3rem;
}
.common__moreText {
  font-size: 1.2rem;
  line-height: 1.17;
  letter-spacing: 10%;
  font-weight: 500;
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 0.6rem;
}
.common__more {
  font-family: "NATS", sans-serif;
  font-size: 2.9rem;
  color: #fff;
  width: 18.5rem;
  height: 2.9rem;
  background-color: #000;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1%;
}
@media screen and (max-width: 768px) {
  .common__more {
    width: 16rem;
    height: 2.4rem;
    font-size: 2.4rem;
  }
}
.common__border {
  padding: 4rem 0;
  position: relative;
  max-width: 74.6rem;
  width: 100%;
  margin: 2.5rem auto 0;
}
@media screen and (max-width: 768px) {
  .common__border {
    padding: 2.5rem 0;
    margin-top: 1.5rem;
    padding: 3.4 0;
  }
}
.common__border::before {
  position: absolute;
  content: "";
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4'%3E%3Ccircle cx='1.5' cy='2' r='1' fill='%23C7C6C6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 74.6rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .common__border::before {
    max-width: 29rem;
  }
}

/* ==========================================================================
   Scroll Fade-Up Animation for SideContent Elements (Images, Text, ProdList, Footer)
   ========================================================================== */
.sideContent img,
.prodList,
.text,
.intro__text,
.sec09__subtext,
.sec09__hText,
.sec10__hText,
.sec10__bhTextWrap,
.footer__textWrap,
.footer__text.copyright {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.sideContent img.is-visible,
.prodList.is-visible,
.text.is-visible,
.intro__text.is-visible,
.sec09__subtext.is-visible,
.sec09__hText.is-visible,
.sec10__hText.is-visible,
.sec10__bhTextWrap.is-visible,
.footer__textWrap.is-visible,
.footer__text.copyright.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sec-figure-img {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.sec-figure-img.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ==========================================================================
   Section Text Animation (figcaption / [class*="__text"])
   Fade show then move down (fade in with translateY from -30px to 0)
   Animates after main figure image completes its animation.
   ========================================================================== */
figcaption[class*=__text],
[class*=sec][class*=__figure] figcaption {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

figcaption.is-visible,
figcaption[class*=__text].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.siteContent {
  display: flex;
}
@media screen and (max-width: 768px) {
  .siteContent {
    flex-direction: column;
  }
}

.sideContent {
  overflow-x: hidden;
}

.marquee {
  margin: 12.9rem 0 0;
  position: relative;
  overflow: hidden;
  max-width: fit-content;
}
@media screen and (max-width: 768px) {
  .marquee {
    margin: 2.4rem 0 0;
  }
}
.marquee__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: max-content;
  will-change: transform;
  animation: marqueeScroll 20s linear infinite;
}
.marquee__set {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  width: max-content;
  margin-right: 2rem;
}
.marquee__set[aria-hidden=true] {
  position: absolute;
  top: 0;
  left: 100%;
}
.marquee__img:nth-of-type(1) {
  width: 22rem;
  margin: 0.7rem 0 0;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(1) {
    width: 18.2rem;
    margin: 0.6rem 0 0;
  }
}
.marquee__img:nth-of-type(2) {
  width: 14.1rem;
  margin: 2.3rem 0 0 -1.6rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(2) {
    width: 11.6rem;
    margin: 1.9rem 0 0 -1.3rem;
  }
}
.marquee__img:nth-of-type(3) {
  width: 9.96rem;
  margin: 0 0 0 1.7rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(3) {
    width: 8.2rem;
    margin: 0 0 0 1.4rem;
  }
}
.marquee__img:nth-of-type(4) {
  width: 11.3rem;
  margin: 2.3rem 0 0 1.2rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(4) {
    width: 9.37rem;
    margin: 1.9rem 0 0 1rem;
  }
}
.marquee__img:nth-of-type(5) {
  width: 9.4rem;
  margin: 8.1rem 0 0 1.7rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(5) {
    width: 9.4rem;
    margin: 6.7rem 0 0 1.4rem;
  }
}
.marquee__img:nth-of-type(6) {
  width: 14.1rem;
  margin: 0 0 0 1.2rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(6) {
    width: 11.6rem;
    margin: 0 0 0 1rem;
  }
}
.marquee__img:nth-of-type(7) {
  width: 10.9rem;
  margin: 7.7rem 0 0 -7.8rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(7) {
    width: 9rem;
    margin: 6.3rem 0 0 -6.4rem;
  }
}
.marquee__img:nth-of-type(8) {
  width: 10.5rem;
  margin: 0 0 0 0.94rem;
}
@media screen and (max-width: 768px) {
  .marquee__img:nth-of-type(8) {
    width: 8.7rem;
    margin: 0 0 0 3.4rem;
  }
}

/* One full set slides out to the left while the duplicated set takes its place */
@keyframes marqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
/* ==========================================================================
   Scroll Down Line Indicator (.animLine)
   ========================================================================== */
.animLine {
  position: relative;
  width: 1px;
  height: 7.42rem;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.15);
}
.animLine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  will-change: top, height, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: animScrollLine 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media screen and (max-width: 768px) {
  .animLine {
    height: 6.6rem;
  }
}

@keyframes animScrollLine {
  0% {
    top: 0;
    height: 0%;
    opacity: 0;
  }
  10% {
    top: 0;
    height: 0%;
    opacity: 1;
  }
  50% {
    top: 0;
    height: 100%;
    opacity: 1;
  }
  90% {
    top: 100%;
    height: 0%;
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 0%;
    opacity: 0;
  }
}
.text {
  font-family: "BIZ UDPGothic";
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.15em;
  color: #646464;
}
@media screen and (max-width: 768px) {
  .text {
    font-size: 1.2rem;
    line-height: 1.666;
    padding: 0 2rem;
  }
}

.prodList {
  margin: 3rem 0 0;
  padding: 0.86rem 0 0;
  border-top: 0.1rem solid #EF86E6;
  display: flex;
  flex-direction: column;
  gap: 0.293rem;
}
@media screen and (max-width: 768px) {
  .prodList {
    margin: 2.75rem 3.2rem 0;
    padding: 0.75rem 0 0;
    gap: 0.3rem;
  }
}
.prodList li {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.57rem;
  line-height: 1.46;
  color: #646464;
}
@media screen and (max-width: 768px) {
  .prodList li {
    font-size: 1.4rem;
    line-height: 1.42;
  }
}
.prodList li a {
  margin-left: 3.09rem;
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.7;
  color: #646464;
  padding: 0 1rem;
  border-radius: 10rem;
  background-color: #D9D9D9;
}
@media screen and (max-width: 768px) {
  .prodList li a {
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 2rem;
    padding: 0 0.9rem;
  }
}

.header {
  z-index: 1000;
  position: fixed;
  top: 5.6rem;
  left: 12.5rem;
}
@media screen and (max-width: 768px) {
  .header {
    top: 2rem;
    left: 2rem;
  }
}
.header__link {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6rem;
}

.footer {
  margin-top: 10.2rem;
  padding-bottom: 16.6rem;
}
@media screen and (max-width: 768px) {
  .footer {
    margin-top: 13.4rem;
    padding-bottom: 16.6rem;
  }
}
.footer__inner {
  padding: 0 9.267rem 0 11.4rem;
}
@media screen and (max-width: 768px) {
  .footer__inner {
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .footer {
    margin-top: 18.2rem;
    padding-bottom: 10.8rem;
  }
}
.footer__textWrap {
  display: flex;
  gap: 1.8rem;
  margin: 1.6rem 0 2.4rem;
}
@media screen and (max-width: 768px) {
  .footer__textWrap {
    justify-content: center;
    margin: 1.6rem auto 3.6rem;
  }
}
.footer__text {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.36;
  color: #646464;
}
@media screen and (max-width: 768px) {
  .footer__text.copyright {
    text-align: center;
  }
}
.footer__logo {
  max-width: 20.6rem;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .footer__logo {
    max-width: 20.6rem;
    margin: 0 auto;
  }
}

.spriteAnim {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
  pointer-events: auto;
}
.spriteAnim.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.spriteAnim__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.8rem;
}
.spriteAnim__grp {
  width: 39rem;
  margin: 0 auto;
  position: relative;
  transform-origin: center center;
  transform: scale(var(--sprite-scale, min(1, (100dvh - 3.2rem) / 66.9rem, (100vw - 1.6rem) / 39rem)));
  flex-shrink: 0;
}
.spriteAnim__wrap {
  position: relative;
}
.spriteAnim__wrap .spriteAnim__imgBox {
  overflow: hidden;
  position: relative;
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity, clip-path;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.spriteAnim__wrap .spriteAnim__imgBox img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
.spriteAnim__wrap span {
  position: absolute;
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  color: #FFFFFF;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  will-change: clip-path, opacity;
  z-index: 2;
}
.spriteAnim__wrap--01 .spriteAnim__imgBox, .spriteAnim__wrap:nth-of-type(1) .spriteAnim__imgBox {
  width: 25.8rem;
  transform: translate(120px, 0) scale(1.25);
}
.spriteAnim__wrap--01 .spriteAnim__imgBox img, .spriteAnim__wrap:nth-of-type(1) .spriteAnim__imgBox img {
  transform: scale(1.6);
}
.spriteAnim__wrap--01 span, .spriteAnim__wrap:nth-of-type(1) span {
  left: 25%;
  top: 50.4%;
}
.spriteAnim__wrap--02 .spriteAnim__imgBox, .spriteAnim__wrap:nth-of-type(2) .spriteAnim__imgBox {
  width: 29.3rem;
  margin: -5.3rem 0 0 auto;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transform: scale(1.2);
}
.spriteAnim__wrap--02 .spriteAnim__imgBox img, .spriteAnim__wrap:nth-of-type(2) .spriteAnim__imgBox img {
  transform: scale(1.4);
}
.spriteAnim__wrap--02 span, .spriteAnim__wrap:nth-of-type(2) span {
  font-size: 2rem;
  left: 43%;
  top: 44.4%;
}
.spriteAnim__wrap--03 .spriteAnim__imgBox, .spriteAnim__wrap:nth-of-type(3) .spriteAnim__imgBox {
  width: 16.7rem;
  margin: -8.6rem 0 0;
  transform: translate(-120px, 100px) scale(1.25);
}
.spriteAnim__wrap--03 .spriteAnim__imgBox img, .spriteAnim__wrap:nth-of-type(3) .spriteAnim__imgBox img {
  transform: scale(1.6);
}
.spriteAnim__wrap--03 span, .spriteAnim__wrap:nth-of-type(3) span {
  left: 17.2%;
  top: 50.2%;
}
.spriteAnim.is-ready .spriteAnim__wrap span {
  animation: spriteSpanEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--02 .spriteAnim__imgBox, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(2) .spriteAnim__imgBox {
  animation: spriteBoxEntrance02 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--02 .spriteAnim__imgBox img, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(2) .spriteAnim__imgBox img {
  animation: spriteInnerImgScale02 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--02 span, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(2) span {
  animation-delay: 0.9s;
}
.spriteAnim.is-ready .spriteAnim__wrap--01 .spriteAnim__imgBox, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(1) .spriteAnim__imgBox {
  animation: spriteBoxEntrance01 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--01 .spriteAnim__imgBox img, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(1) .spriteAnim__imgBox img {
  animation: spriteInnerImgScale01 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--01 span, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(1) span {
  animation-delay: 1.7s;
}
.spriteAnim.is-ready .spriteAnim__wrap--03 .spriteAnim__imgBox, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(3) .spriteAnim__imgBox {
  animation: spriteBoxEntrance03 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--03 .spriteAnim__imgBox img, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(3) .spriteAnim__imgBox img {
  animation: spriteInnerImgScale03 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1.8s forwards;
}
.spriteAnim.is-ready .spriteAnim__wrap--03 span, .spriteAnim.is-ready .spriteAnim__wrap:nth-of-type(3) span {
  animation-delay: 2.4s;
}

@keyframes spriteBoxEntrance02 {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes spriteInnerImgScale02 {
  0% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spriteBoxEntrance01 {
  0% {
    opacity: 0;
    transform: translate(120px, 0) scale(1.25);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes spriteInnerImgScale01 {
  0% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spriteBoxEntrance03 {
  0% {
    opacity: 0;
    transform: translate(-120px, 100px) scale(1.25);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes spriteInnerImgScale03 {
  0% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spriteSpanEntrance {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.banner {
  width: 51.09375%;
  height: 100dvh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .banner {
    position: relative;
    width: 100%;
    height: auto;
  }
}
.banner__imgs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.banner__imgs > img,
.banner__imgs .banner__imgItem {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--banner-fade-duration, 0.6s) ease-in-out;
  will-change: opacity;
  pointer-events: none;
}
.banner__imgs > img.is-prev,
.banner__imgs .banner__imgItem.is-prev {
  opacity: 1;
  z-index: 1;
}
.banner__imgs > img.is-active,
.banner__imgs .banner__imgItem.is-active {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}
.banner__imgItem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner__ttl {
  width: 70.7%;
  height: auto;
  position: absolute;
  bottom: 34.5%;
  left: 15%;
  z-index: 5;
}
.banner__ttl .banner-mask__bg {
  fill: #000;
}
@media screen and (max-width: 768px) {
  .banner__ttl {
    width: 88.7%;
    height: auto;
    position: absolute;
    bottom: 35.3%;
    left: 7.3%;
    z-index: 5;
  }
}
.banner__ttl .write-stroke {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.banner__ttl .write-stroke--style {
  --delay: 0.1s;
  --dur: 0.35s;
}
.banner__ttl .write-stroke--cozy-c {
  --delay: 0.25s;
  --dur: 0.38s;
}
.banner__ttl .write-stroke--cozy-o {
  --delay: 0.55s;
  --dur: 0.28s;
}
.banner__ttl .write-stroke--cozy-z {
  --delay: 0.76s;
  --dur: 0.30s;
}
.banner__ttl .write-stroke--cozy-y1 {
  --delay: 0.98s;
  --dur: 0.20s;
}
.banner__ttl .write-stroke--cozy-y2 {
  --delay: 1.10s;
  --dur: 0.26s;
}
.banner__ttl .write-stroke--winter-w {
  --delay: 1.25s;
  --dur: 0.44s;
}
.banner__ttl .write-stroke--winter-i1 {
  --delay: 1.62s;
  --dur: 0.18s;
}
.banner__ttl .write-stroke--winter-i2 {
  --delay: 1.76s;
  --dur: 0.10s;
}
.banner__ttl .write-stroke--winter-n1 {
  --delay: 1.82s;
  --dur: 0.18s;
}
.banner__ttl .write-stroke--winter-n2 {
  --delay: 1.95s;
  --dur: 0.24s;
}
.banner__ttl .write-stroke--winter-t1 {
  --delay: 2.14s;
  --dur: 0.22s;
}
.banner__ttl .write-stroke--winter-t2 {
  --delay: 2.30s;
  --dur: 0.18s;
}
.banner__ttl .write-stroke--winter-e {
  --delay: 2.42s;
  --dur: 0.26s;
}
.banner__ttl .write-stroke--winter-r1 {
  --delay: 2.62s;
  --dur: 0.18s;
}
.banner__ttl .write-stroke--winter-r2 {
  --delay: 2.74s;
  --dur: 0.20s;
}
.banner__ttl .write-stroke--coat-c {
  --delay: 2.86s;
  --dur: 0.28s;
}
.banner__ttl .write-stroke--coat-o {
  --delay: 3.08s;
  --dur: 0.24s;
}
.banner__ttl .write-stroke--coat-a {
  --delay: 3.26s;
  --dur: 0.30s;
}
.banner__ttl .write-stroke--coat-t1 {
  --delay: 3.50s;
  --dur: 0.22s;
}
.banner__ttl .write-stroke--coat-t2 {
  --delay: 3.66s;
  --dur: 0.18s;
}
.banner__subTtl {
  font-family: "BIZ UDPGothic";
  font-style: normal;
  font-weight: 400;
  font-size: 3.1rem;
  line-height: 1.58;
  text-align: center;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #FFFFFF;
  position: absolute;
  bottom: 16.6%;
  left: 50%;
  transform: translateX(calc(-50% + 1.5rem));
  z-index: 5;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .banner__subTtl {
    font-size: 2.45rem;
    bottom: 15.9%;
    left: 50%;
    transform: translateX(calc(-50% + 0.4rem));
  }
}
.banner__subTtlEn {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.76rem;
  line-height: 1.47;
  text-align: center;
  color: #FFFFFF;
  position: absolute;
  bottom: 13.1%;
  left: 50%;
  transform: translateX(calc(-50% + 0.9rem));
  z-index: 5;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .banner__subTtlEn {
    font-size: 1.36rem;
    transform: translateX(calc(-50% + 0.9rem));
    position: absolute;
    bottom: 12.8%;
    left: 47.5%;
    white-space: nowrap;
  }
}
.banner__logo {
  position: absolute;
  bottom: 4.2%;
  left: 50%;
  transform: translateX(calc(-50% + 0rem));
  width: 24.8%;
  height: auto;
  z-index: 5;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .banner__logo {
    transform: none;
    position: absolute;
    bottom: unset;
    top: 2.8%;
    left: unset;
    right: 1.8%;
  }
}
.banner.is-animated .banner__subTtl {
  animation: revealMaskLR 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.8s;
}
.banner.is-animated .banner__subTtlEn {
  animation: revealMaskLR 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.1s;
}
.banner.is-animated .banner__logo {
  animation: revealMaskLR 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.4s;
}

@keyframes revealMaskLR {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.hero {
  padding: 8.5rem 13rem 1.7rem;
  background-color: #B03737;
  height: 83.5rem;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .hero {
    height: 66rem;
    padding: 0;
    background-color: transparent;
  }
}
.hero__text01 {
  font-size: 2rem;
  line-height: 2.09;
  color: #fff;
  letter-spacing: 10%;
  font-family: "NATS", sans-serif;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2rem;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s steps(30, end) 2s, -webkit-clip-path 1.2s steps(30, end) 2s;
}
@media screen and (max-width: 768px) {
  .hero__text01 {
    color: #D40000;
    font-size: 1.6rem;
    line-height: 2.09;
    top: 0;
    z-index: 2;
    white-space: nowrap;
  }
}
.hero.is-visible .hero__text01 {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.hero__text02 {
  font-size: 2rem;
  line-height: 2.09;
  color: #fff;
  letter-spacing: 10%;
  font-family: "NATS", sans-serif;
  bottom: 3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s steps(30, end) 2s, -webkit-clip-path 1.2s steps(30, end) 2s;
}
@media screen and (max-width: 768px) {
  .hero__text02 {
    bottom: 1rem;
    color: #D40000;
    font-size: 1.6rem;
    white-space: nowrap;
  }
}
.hero.is-visible .hero__text02 {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.hero__what {
  font-size: 5.4rem;
  color: #fff;
  font-family: "Covered By Your Grace", sans-serif;
  position: absolute;
  top: 39rem;
  right: 29rem;
  transform: translateX(-20rem) rotate(-20deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
@media screen and (max-width: 768px) {
  .hero__what {
    font-size: 4.3rem;
    color: #D40000;
    top: 2rem;
    right: unset;
    left: 6rem;
    transform: translateX(-100vw) rotate(-4deg);
  }
}
.hero.is-visible .hero__what {
  transform: translateX(0) rotate(-20deg);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .hero.is-visible .hero__what {
    transform: translateX(0) rotate(-5deg);
  }
}
.hero__should {
  font-size: 5.4rem;
  color: #fff;
  font-family: "Covered By Your Grace", sans-serif;
  position: absolute;
  top: 38.9rem;
  right: 18.2rem;
  transform: translateY(15rem) rotate(-17deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 0.8s ease 0.1s;
}
@media screen and (max-width: 768px) {
  .hero__should {
    font-size: 4.3rem;
    color: #D40000;
    top: 4rem;
    right: unset;
    left: 12.5rem;
    transform: translateX(100vh) rotate(-2deg);
  }
}
.hero.is-visible .hero__should {
  transform: translateY(0) rotate(-17deg);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .hero.is-visible .hero__should {
    transform: translateX(0) rotate(-2deg);
  }
}
.hero__i {
  font-size: 5.4rem;
  color: #fff;
  font-family: "Covered By Your Grace", sans-serif;
  position: absolute;
  top: 35rem;
  right: 16rem;
  transform: translateY(-15rem) rotate(-3deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.8s ease 0.2s;
}
@media screen and (max-width: 768px) {
  .hero__i {
    font-size: 4.3rem;
    color: #D40000;
    top: 2rem;
    right: 15rem;
    transform: translateY(-100vh) rotate(10deg);
  }
}
.hero.is-visible .hero__i {
  transform: translateY(0) rotate(-3deg);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .hero.is-visible .hero__i {
    transform: translateY(0) rotate(10deg);
  }
}
.hero__wear {
  font-size: 5.4rem;
  color: #fff;
  font-family: "Covered By Your Grace", sans-serif;
  position: absolute;
  top: 34rem;
  right: 4rem;
  transform: translateX(20rem) rotate(-15deg);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 0.8s ease 0.3s;
}
@media screen and (max-width: 768px) {
  .hero__wear {
    font-size: 4.3rem;
    color: #D40000;
    right: 5.5rem;
    top: 3rem;
    transform: translateX(100vw) rotate(3deg);
  }
}
.hero.is-visible .hero__wear {
  transform: translateX(0) rotate(-15deg);
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .hero.is-visible .hero__wear {
    transform: translateX(0) rotate(3deg);
  }
}
.hero__line {
  max-width: 36.7rem;
  width: 100%;
  position: absolute;
  right: 2rem;
  top: 39rem;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s, -webkit-clip-path 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
}
.hero.is-visible .hero__line {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
@media screen and (max-width: 768px) {
  .hero__line {
    top: 7.5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 30.8rem;
  }
}
.hero__dotted {
  letter-spacing: 6%;
  font-size: 2.6rem;
  line-height: 0.76;
  font-family: "NATS", sans-serif;
  color: #fff;
  position: absolute;
  bottom: 16.5rem;
  right: 26.5rem;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s steps(30, end) 2s, -webkit-clip-path 1.2s steps(30, end) 2s;
}
.hero.is-visible .hero__dotted {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
@media screen and (max-width: 768px) {
  .hero__dotted {
    bottom: 8.6rem;
    font-size: 2.5rem;
    right: unset;
    left: 1.8rem;
  }
}
.hero__desc01 {
  font-size: 4rem;
  line-height: 1.19;
  color: #fff;
  font-family: "Murecho", sans-serif;
  position: absolute;
  bottom: 17rem;
  right: 1.8rem;
  font-weight: 800;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s steps(30, end) 2s, -webkit-clip-path 1.2s steps(30, end) 2s;
}
.hero.is-visible .hero__desc01 {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
@media screen and (max-width: 768px) {
  .hero__desc01 {
    font-size: 3.4rem;
    color: #D40000;
    bottom: 9.2rem;
    white-space: nowrap;
    right: unset;
    left: 2rem;
  }
}
.hero__desc02 {
  font-size: 4rem;
  line-height: 1.19;
  color: #fff;
  font-family: "Murecho", sans-serif;
  position: absolute;
  bottom: 11rem;
  right: 1.8rem;
  font-weight: 800;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s steps(30, end) 2s, -webkit-clip-path 1.2s steps(30, end) 2s;
}
.hero.is-visible .hero__desc02 {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
@media screen and (max-width: 768px) {
  .hero__desc02 {
    font-size: 3.4rem;
    color: #D40000;
    bottom: 5.4rem;
    white-space: nowrap;
    right: unset;
    left: 4rem;
  }
}
.hero__figure {
  max-width: 102.3rem;
  width: 100%;
  opacity: 0;
  transform: translateY(4rem);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.hero.is-loaded .hero__figure {
  opacity: 1;
  transform: translateY(0);
}

.intro {
  margin: 13.4rem 0 5.01rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .intro {
    margin: 4rem 1.5rem 4.3rem;
  }
}
.intro__text {
  font-family: "BIZ UDPGothic";
  font-style: normal;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.7;
  text-align: center;
  letter-spacing: 0.15em;
  color: #646464;
}
@media screen and (max-width: 768px) {
  .intro__text {
    font-size: 1.2rem;
  }
}

.sec01 {
  margin: 5.6rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec01 {
    margin: 4.3rem 0 4.2rem;
  }
}
.sec01__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec01__inner {
    padding: 0;
  }
}
.sec01__figWrap > a {
  display: block;
}
.sec01__figWrap > a:nth-of-type(1) {
  width: 24.2rem;
  margin: 0 0 0 3.27rem;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(1) {
    width: 21.5rem;
    margin: 0 0 0 2.9rem;
  }
}
.sec01__figWrap > a:nth-of-type(2) {
  width: 18.6rem;
  margin: -13.1rem 0 0 21.9rem;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(2) {
    width: 16.5rem;
    margin: -11.7rem 0 0 19.5rem;
  }
}
.sec01__figWrap > a:nth-of-type(3) {
  width: 36.7rem;
  margin: 2.2rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(3) {
    width: 32.6rem;
    margin: 2rem 0 0;
  }
}
.sec01__figWrap > a:nth-of-type(4) {
  width: 17.7rem;
  margin: 2.2rem 0 0 26.2rem;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(4) {
    width: 15.7rem;
    margin: 1.9rem 0 0 23.3rem;
  }
}
.sec01__figWrap > a:nth-of-type(5) {
  width: 24.5rem;
  margin: -13.4rem 0 0 0;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(5) {
    width: 21.7rem;
    margin: -11.9rem 0 0 0;
  }
}
.sec01__figWrap > a:nth-of-type(6) {
  width: 17.7rem;
  margin: -17rem 0 0 26.2rem;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(6) {
    width: 15.7rem;
    margin: -15.1rem 0 0 23.3rem;
  }
}
.sec01__figWrap > a:nth-of-type(7) {
  width: 36.7rem;
  margin: 2.2rem 0 0 0;
}
@media screen and (max-width: 768px) {
  .sec01__figWrap > a:nth-of-type(7) {
    width: 32.6rem;
    margin: 1.9rem 0 0 0;
  }
}

.sec02 {
  margin: 4.8rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec02 {
    margin: 4.3rem 0 4.7rem;
  }
}
.sec02__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec02__inner {
    padding: 0;
  }
}
.sec02__figWrap > img:nth-of-type(1) {
  width: 100%;
}
.sec02__figWrap > img:nth-of-type(2) {
  width: 34.4rem;
  margin: 5.9rem 0 0 auto;
}
@media screen and (max-width: 768px) {
  .sec02__figWrap > img:nth-of-type(2) {
    width: 30.5rem;
    margin: 5.3rem 0 0 auto;
  }
}
.sec02__imgGrp {
  margin: 2.6rem 0 0;
  display: flex;
}
@media screen and (max-width: 768px) {
  .sec02__imgGrp {
    margin: 2.4rem 0 0;
  }
}
.sec02__imgGrp img {
  width: 17rem;
}
@media screen and (max-width: 768px) {
  .sec02__imgGrp img {
    width: 15.1rem;
  }
}
.sec02 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec02 .text {
    margin: 3.2rem 0 0;
  }
}

.sec03 {
  margin: 10rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec03 {
    margin: 8.8rem 0 4.7rem;
  }
}
.sec03__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec03__inner {
    padding: 0;
  }
}
.sec03__figWrap img {
  width: 100%;
}
.sec03__imgGrp {
  margin: 2.6rem 0 0;
  display: flex;
}
.sec03__imgGrp img {
  width: 17rem;
}
.sec03 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec03 .text {
    margin: 3.2rem 0 0;
  }
}

.sec04 {
  margin: 10rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec04 {
    margin: 8.3rem 0 4.7rem;
  }
}
.sec04__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec04__inner {
    padding: 0;
  }
}
.sec04__figWrap > img:nth-of-type(1) {
  width: 33.824rem;
  margin: 0 0 0 2.125rem;
}
@media screen and (max-width: 768px) {
  .sec04__figWrap > img:nth-of-type(1) {
    width: 30rem;
    margin: 0 0 0 1.9rem;
  }
}
.sec04__figWrap > img:nth-of-type(2) {
  width: 37.46rem;
  margin: -5.7rem 0 0 4.22rem;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec04__figWrap > img:nth-of-type(2) {
    width: 33rem;
    margin: -5.1rem 2rem 0 auto;
  }
}
.sec04__figWrap > img:nth-of-type(3) {
  width: 100%;
  margin: -2.2rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec04__figWrap > img:nth-of-type(3) {
    margin: -2rem 0 0;
  }
}
.sec04 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec04 .text {
    margin: 3.2rem 0 0;
  }
}

.sec05 {
  margin: 4.8rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec05 {
    margin: 8.8rem 0 0;
  }
}
.sec05__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec05__inner {
    padding: 0;
  }
}
.sec05__figWrap > img:nth-of-type(1) {
  width: 100%;
}
.sec05__figWrap > img:nth-of-type(2) {
  width: 35.2rem;
  margin: 2.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec05__figWrap > img:nth-of-type(2) {
    width: 31.3rem;
    margin: 2.3rem 0 0;
  }
}
.sec05__imgGrp {
  margin: 2.5rem 0 0;
  display: flex;
  gap: 0.789rem;
}
@media screen and (max-width: 768px) {
  .sec05__imgGrp {
    margin: 2.3rem 0 0;
    gap: 0.7rem;
    justify-content: center;
  }
}
.sec05__imgGrp > img:nth-of-type(1) {
  width: 11.501rem;
}
@media screen and (max-width: 768px) {
  .sec05__imgGrp > img:nth-of-type(1) {
    width: 10.2rem;
  }
}
.sec05__imgGrp > img:nth-of-type(2) {
  width: 19.54rem;
}
@media screen and (max-width: 768px) {
  .sec05__imgGrp > img:nth-of-type(2) {
    width: 17.3rem;
  }
}
.sec05__imgGrp > img:nth-of-type(3) {
  width: 11.3rem;
}
@media screen and (max-width: 768px) {
  .sec05__imgGrp > img:nth-of-type(3) {
    width: 10.1rem;
  }
}
.sec05 .text {
  margin: 3.6rem 0 0;
}

.sec06 {
  margin: 10rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec06 {
    margin: 8.8rem 0 0;
  }
}
.sec06__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec06__inner {
    padding: 0;
  }
}
.sec06__figWrap > img:nth-of-type(1) {
  width: 100%;
}
.sec06__figWrap > img:nth-of-type(2) {
  width: 37.2rem;
  margin: -10.2rem 0 0 1.56rem;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec06__figWrap > img:nth-of-type(2) {
    width: 32rem;
    margin: -8.5rem 0 0 1.51rem;
  }
}
.sec06__figWrap > img:nth-of-type(3) {
  width: 29.3rem;
  margin: -11.8rem 0 0 12.2rem;
}
@media screen and (max-width: 768px) {
  .sec06__figWrap > img:nth-of-type(3) {
    width: 26rem;
    margin: -10.5rem 2rem 0 auto;
  }
}
.sec06__figWrap > img:nth-of-type(4) {
  width: 29.3rem;
  margin: 0 0 0 12.2rem;
}
@media screen and (max-width: 768px) {
  .sec06__figWrap > img:nth-of-type(4) {
    width: 26rem;
    margin: 0 2rem 0 auto;
  }
}
.sec06 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec06 .text {
    margin: 3.2rem 0 0;
  }
}

.sec07 {
  margin: 10rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec07 {
    margin: 8.8rem 0 0;
  }
}
.sec07__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec07__inner {
    padding: 0;
  }
}
.sec07__figWrap > img:nth-of-type(1) {
  width: 100%;
}
.sec07__figWrap > img:nth-of-type(2) {
  width: 40.46rem;
  margin: -3.7rem 0 0 1.3rem;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec07__figWrap > img:nth-of-type(2) {
    width: 35.13rem;
    margin: -3.3rem 0 0 1.3rem;
  }
}
.sec07__figWrap > img:nth-of-type(3) {
  width: 100%;
  margin: -2.1rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec07__figWrap > img:nth-of-type(3) {
    margin: -2rem 0 0;
  }
}
.sec07__figWrap > img:nth-of-type(4) {
  width: 33rem;
  margin: 4.7rem 0 0 5.5rem;
}
@media screen and (max-width: 768px) {
  .sec07__figWrap > img:nth-of-type(4) {
    width: 29.3rem;
    margin: 4.2rem auto 0;
  }
}
.sec07 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec07 .text {
    margin: 3.2rem 0 0;
  }
}

.sec08 {
  margin: 10rem 0 4.7rem;
}
@media screen and (max-width: 768px) {
  .sec08 {
    margin: 8.8rem 0 0;
  }
}
.sec08__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec08__inner {
    padding: 0;
  }
}
.sec08__figWrap > img:nth-of-type(1) {
  width: 19.4rem;
  margin: 0 0 0 2rem;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .sec08__figWrap > img:nth-of-type(1) {
    width: 17.3rem;
    margin: 0 0 0 1.8rem;
  }
}
.sec08__figWrap > img:nth-of-type(2) {
  width: 11.1rem;
  margin: -16.7rem 0 0 30.8rem;
}
@media screen and (max-width: 768px) {
  .sec08__figWrap > img:nth-of-type(2) {
    width: 9.5rem;
    margin: -14rem 3.2rem 0 auto;
  }
}
.sec08__figWrap > img:nth-of-type(3) {
  width: 100%;
  margin: 1.7rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec08__figWrap > img:nth-of-type(3) {
    width: 100%;
    margin: 0.9rem 0 0;
  }
}
.sec08__figWrap > img:nth-of-type(4) {
  width: 30.1rem;
  margin: -3.3rem 0 0 11.6rem;
}
@media screen and (max-width: 768px) {
  .sec08__figWrap > img:nth-of-type(4) {
    width: 26.7rem;
    margin: -2.9rem 2rem 0 auto;
  }
}
.sec08 .text {
  margin: 3.6rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec08 .text {
    margin: 3.2rem 0 0;
  }
}

.sec09 {
  margin: 10rem 0 3.6rem;
}
@media screen and (max-width: 768px) {
  .sec09 {
    margin: 11.1rem 0 3.2rem;
  }
}
.sec09__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec09__inner {
    padding: 0 0.9rem;
  }
}
.sec09__box {
  background-color: #D9D9D9;
  padding: 3.59rem 1.6rem 4.3rem;
}
@media screen and (max-width: 768px) {
  .sec09__box {
    padding: 3.2rem 0 4.3rem;
  }
}
@media screen and (max-width: 768px) {
  .sec09__box .text {
    padding: 0;
  }
}
.sec09__box > img:nth-of-type(1) {
  width: 18.4rem;
  margin: 4.5rem auto 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__box > img:nth-of-type(1) {
    width: 16.4rem;
    margin: 3.7rem auto 0;
  }
}
.sec09__figWrap {
  display: flex;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap {
    align-items: flex-start;
  }
}
.sec09__figWrap > img:nth-of-type(1) {
  width: 23.1rem;
  margin: 2.6rem 0 0 -2.2rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap > img:nth-of-type(1) {
    width: 20.5rem;
    margin: 2.3rem 0 0 -1.8rem;
  }
}
.sec09__figWrap > img:nth-of-type(2) {
  width: 24.9rem;
  margin: 2.084rem -4.6rem 0 -1rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap > img:nth-of-type(2) {
    width: 22.1rem;
    margin: 2.084rem -4.6rem 0 -0.3rem;
  }
}
.sec09__figWrap02 {
  display: flex;
  margin: -12.4rem 0 0;
  align-items: flex-start;
  position: relative;
}
.sec09__figWrap02 > img:nth-of-type(1) {
  width: 12.7rem;
  margin: 0 0 0 0.71rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap02 > img:nth-of-type(1) {
    width: 11.3rem;
    margin: 0 0 0 0.71rem;
  }
}
.sec09__figWrap02 > img:nth-of-type(2) {
  width: 14.1rem;
  margin: 0 0 0 -1.7rem;
  position: relative;
}
.sec09__figWrap02 > img:nth-of-type(2).is-visible {
  transform: translateY(-0.17rem);
}
@media screen and (max-width: 768px) {
  .sec09__figWrap02 > img:nth-of-type(2) {
    width: 12.6rem;
    margin: 0 0 0 -1.29rem;
  }
}
.sec09__figWrap02 > img:nth-of-type(3) {
  width: 11.8rem;
  margin: 13.1rem 0 0 -0.2rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap02 > img:nth-of-type(3) {
    width: 9.8rem;
    margin: 12.4rem 0 0 0.17rem;
  }
}
.sec09__figWrap02 > img:nth-of-type(4) {
  width: 11.8rem;
  left: 22.5rem;
  position: absolute;
  top: -2.5rem;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap02 > img:nth-of-type(4) {
    width: 10.4rem;
    left: 20.6rem;
    position: absolute;
    top: -1.4rem;
  }
}
.sec09__figWrap03 {
  display: flex;
  align-items: flex-start;
  margin: -11rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap03 {
    margin: -9.9rem 0 0;
  }
}
.sec09__figWrap03 > img:nth-of-type(1) {
  width: 16.5rem;
  margin: 21.1rem 0 0 1.23rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap03 > img:nth-of-type(1) {
    width: 14.6rem;
    margin: 21.1rem 0 0 1.5rem;
  }
}
.sec09__figWrap03 > img:nth-of-type(2) {
  width: 15.8rem;
  margin: 0 0 0 -6.1rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap03 > img:nth-of-type(2) {
    width: 14rem;
    margin: 0 0 0 -5.5rem;
  }
}
.sec09__figWrap03 > img:nth-of-type(3) {
  width: 11.5rem;
  margin: 0 0 0 1.5rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sec09__figWrap03 > img:nth-of-type(3) {
    width: 10.2rem;
    margin: 0 0 0 1.3rem;
  }
}
.sec09__subtext {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.57rem;
  line-height: 1.46;
  text-align: center;
  color: #646464;
  margin: 0 0 0.4rem;
}
@media screen and (max-width: 768px) {
  .sec09__subtext {
    font-size: 1.4rem;
    line-height: 1.42;
  }
}
.sec09__hText {
  font-family: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.51;
  text-align: center;
  letter-spacing: 0.15em;
  color: #646464;
  margin: 0 0 1.7rem;
}
@media screen and (max-width: 768px) {
  .sec09__hText {
    font-size: 2rem;
    line-height: 1.5;
    margin: 0 0 1.6rem;
  }
}

.sec10 {
  margin: 3.6rem 0 3.6rem;
}
@media screen and (max-width: 768px) {
  .sec10 {
    margin: 3.2rem 0 3.2rem;
  }
}
.sec10__inner {
  padding: 0 9.267rem 0 9.4rem;
}
@media screen and (max-width: 768px) {
  .sec10__inner {
    padding: 0;
  }
}
.sec10__hText {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.11;
  text-align: center;
  color: #646464;
  margin: 0 0 2.3rem;
}
@media screen and (max-width: 768px) {
  .sec10__hText {
    font-size: 1.6rem;
    line-height: 1.12;
    margin: 0 0 2.2rem;
  }
}
.sec10__grp {
  gap: 1.8rem 0;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .sec10__grp {
    padding: 0 1.8rem;
  }
}
.sec10__grp > a {
  display: block;
  width: calc(50% - 0.4rem);
}
.sec10__bhTextWrap {
  display: flex;
  justify-content: center;
  margin: 6.5rem 0 0;
}
@media screen and (max-width: 768px) {
  .sec10__bhTextWrap {
    margin: 4.4rem 0 0;
  }
}
.sec10__bhText {
  font-family: "Afacad";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.66;
  color: #646464;
  background: #D9D9D9;
  border-radius: 5rem;
  padding: 0 1rem;
}

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