@charset "UTF-8";

/****************************************************
 Layout header
****************************************************/
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--black);
}
.l-header__inner {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-header__nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-header__nav-link {
  padding: 14px;
}

/* ハンバーガーボタン（SP で表示するため一旦非表示） */
.l-header__toggle {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 101;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.l-header__toggleLine {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--white);
  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}
.l-header__toggleLine--top {
  transform-origin: center center;
}
.l-header__toggleLine--middle {
  transform-origin: center center;
}
.l-header__toggleLine--bottom {
  transform-origin: center center;
}

@media screen and (max-width: 767px) {
  .l-header {
    background-color: transparent;
  }
  /* ヘッダー：トグルを右上に表示 */
  .l-header__inner {
    justify-content: flex-end;
    padding-right: 60px; /* トグルの幅分 */
  }
  .l-header__toggle {
    display: flex;
  }
  /* ナビ：通常時は画面外に隠す */
  .l-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    height: 100%;
    background: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    z-index: 99;
  }
  .l-header__nav::before {
    content: "";
    display: block;
    position: absolute;
    width: 4.26666vw;
    height: 29.86666vw;
    background: url("../img/dec_menu-sp.svg") no-repeat center / contain;
    top: -1%;
    left: -4.26666vw;
    z-index: 1;
  }
  .l-header.is-menu-open .l-header__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .l-header__nav-list {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 80%;
    font-size: 18px;
    padding-top: 30%;
  }
  .l-header__nav-link {
    padding: 16px;
    font-size: 18px;
  }
  /* メニュー開いたとき：中央の線を消し、上下で×に */
  .l-header.is-menu-open .l-header__toggleLine--middle {
    opacity: 0;
    transform: scaleX(0);
  }
  .l-header.is-menu-open .l-header__toggleLine--top {
    transform: translateY(8px) rotate(15deg);
  }
  .l-header.is-menu-open .l-header__toggleLine--bottom {
    transform: translateY(-6px) rotate(-15deg);
  }
  /* SP用デコ：767px以下で表示（メニュー内なので開いたとき見える） */
  .l-header__dec.u-display-none {
    display: block;
    max-width: 80%;
    margin-top: 40px;
    clip-path: inset(0% 100% 0% 0%);
    -webkit-clip-path: inset(0% 100% 0% 0%);
  }
  .l-header.is-menu-open .l-header__dec {
    clip-path: inset(0% 0% 0% 0%);
    -webkit-clip-path: inset(0% 0% 0% 0%);
  }
}

/****************************************************
 Layout footer
****************************************************/
.l-footer__inner {
  padding: 70px 0 8px;
}
.l-footer__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.l-footer__nav-item {
  padding-right: 24px;
  border-right: 1px solid var(--white);
}
.l-footer__nav-item:last-child {
  padding-right: 0;
  border-right: none;
}
.l-footer__nav-link {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.l-footer__copy {
  font-weight: bold;
  text-align: center;
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .l-footer__nav-link {
    font-size: 12px;
  }
  .l-footer__nav {
    padding: 0 16px;
  }
  .l-footer__copy {
    font-size: 10px;
  }
}

/****************************************************
 Layout section
****************************************************/
.l-section {
  padding: 100px 0;
}
.l-section_inner {
  margin: 0 auto;
  padding: 0 24px;
}

@media screen and (max-width: 767px) {
  .l-section {
    padding: 64px 0;
  }
  .l-section_inner {
    padding: 0 16px;
  }
}

/****************************************************
 P mv（メインビジュアル・アニメーション）
****************************************************/
.p-mv {
  position: relative;
  overflow: hidden;
  padding-top: 62px;
}
.p-mv__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 389;
}
.p-mv__inner img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.p-mv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.p-mv__phase {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.p-mv__phase--color {
  visibility: hidden;
}
.p-mv__logo-mono,
.p-mv__logo-color {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 40%;
  max-height: 30%;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
}
.p-mv__row {
  display: flex;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  gap: 0; /* 余白なし */
}
.p-mv__row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  min-width: 0; /* flex で均等幅にするため */
}
.p-mv__row .p-mv__logo-mono,
.p-mv__row .p-mv__logo-color,
.p-mv__row .p-mv__piece {
  flex: 1;
  width: 0;
  min-width: 0;
  object-fit: contain;
  object-position: center;
  position: relative; /* row 内では絶対配置にしない */
}
.p-mv__piece--top {
  transform-origin: center bottom;
}
.p-mv__piece--bottom {
  transform-origin: center top;
}
.p-mv__whole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 3;
  opacity: 0;
}
.p-mv__dytica {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 2;
  opacity: 0;
}
.p-mv__logo {
  position: absolute;
  top: 4.5%;
  left: 50%;
  transform: translateX(-50.5%);
  max-width: 40.5%;
  max-height: 30.5%;
  object-fit: contain;
  z-index: 1;
  opacity: 0;
}

.p-mv__final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 4;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .p-mv {
    padding-top: 0;
  }
  .p-mv__inner {
    aspect-ratio: 25 / 36;
    max-height: 100vh;
  }
  .p-mv__logo {
    top: 5%;
    left: 0;
    transform: none;
    max-width: 40.5%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
    opacity: 0;
  }
}

/****************************************************
 C
****************************************************/
.c-heading {
  text-align: center;
}

.c-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: 2;
  transform-origin: left center;
}
.c-mask__text {
  position: relative;
  z-index: 1;
  opacity: 0;
}
.c-btnWrap {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}
.c-btn {
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  width: 320px;
  max-height: 80px;
  line-height: 56px;
  border: 5px solid #fff;
  text-decoration: none;
  letter-spacing: 2px;
  border-radius: 50px;
  box-shadow:
    0 0 10px #fff,
    inset 0 0 10px #fff,
    0 0 0px #fff,
    0 0 0px #00d0ff,
    0 0 0px #00d0ff,
    0 0 10px #00d0ff,
    0 0 10px #00d0ff,
    inset 0 0 20px #00d0ff;
  text-shadow:
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 0px #fff,
    0 0 0px #00d0ff,
    0 0 0px #00d0ff,
    0 0 10px #00d0ff,
    0 0 10px #00d0ff,
    0 0 20px #00d0ff;
}
.c-btn:hover {
  box-shadow:
    0 0 20px #fff,
    inset 0 0 20px #fff,
    0 0 0px #fff,
    0 0 0px #00d0ff,
    0 0 0px #00d0ff,
    0 0 20px #00d0ff,
    0 0 20px #00d0ff,
    inset 0 0 20px #00d0ff;
}
.c-btnAnimation {
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
  .c-btn {
    max-width: 270px;
    max-height: 64px;
    font-size: 20px;
  }
}

/****************************************************
 P lead
****************************************************/
.p-lead {
  padding-bottom: 130px;
}
.p-lead__inner {
  overflow: hidden;
  position: relative;
}
.p-lead__img-2 {
  max-width: 15.625vw;
  max-height: 7.2916666vw;
  position: absolute;
  top: 13.361111vw;
  left: 26.7777vw;
  z-index: 1;
}
.p-lead__img-3 {
  display: inline-block;
  max-width: 16.6666vw;
  max-height: 4.0625vw;
  position: absolute;
  right: 12%;
}
.p-lead__logo {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.p-lead__img-4 {
  max-width: 92px;
  max-height: 72px;
  display: block;
  opacity: 0;
}
.p-lead__logoBlock {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000;
  z-index: 2;
  transform-origin: left center;
  transform: scaleX(1);
}
.p-lead__img-5 {
  max-width: 31.25vw;
  max-height: 31.25vw;
  position: absolute;
  bottom: -9.0625vw;
  animation: scroll-rotate 120s linear infinite;
  transform-origin: center center;
}

@keyframes scroll-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.p-lead__inner-2 {
  overflow: hidden;
  position: relative;
  margin-top: 5.0625vw;
  padding-bottom: 9.0625vw;
}
.p-lead__bg {
  background-color: var(--white);
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .p-lead {
    padding-bottom: 0;
  }
  .p-lead__inner-2 {
    padding-bottom: 21.3333vw;
    margin-top: 12.8vw;
  }
  .p-lead__img-2 {
    max-width: 31.73333vw;
    max-height: 14.6666vw;
    top: 16.361111vw;
    left: 15.7777vw;
  }
  .p-lead__img-3 {
    max-width: 43.46666vw;
    max-height: 10.6666vw;
  }
  .p-lead__bg {
    height: 68px;
  }
  .p-lead__img-4 {
    max-width: 47px;
    max-height: 36px;
  }
  .p-lead__img-5 {
    max-width: 60vw;
    max-height: 60vw;
    bottom: -17.0625vw;
  }
}

/****************************************************
 P about
****************************************************/
.p-about {
  padding-top: 130px;
  position: relative;
}
.p-about__inner {
  max-width: 1500px;
  padding: 0 24px;
}
.p-about__headingImg {
  max-width: 768px;
  width: 40vw;
}
.p-about::before {
  position: absolute;
  content: "";
  background: url("../img/dec_circle-i.svg") no-repeat;
  background-size: cover;
  display: block;
  width: 30.9027vw;
  height: 30.9027vw;
  top: 20%;
  right: -10%;
  animation: rotate-ccw 20s linear infinite;
  z-index: -1;
}
.p-about::after {
  position: absolute;
  content: "";
  background: url("../img/dec_circle-o.svg") no-repeat;
  background-size: cover;
  display: block;
  width: 34.72222vw;
  height: 34.72222vw;
  top: 17%;
  right: -12%;
  animation: rotate-cw 20s linear infinite;
  z-index: -1;
}

@keyframes rotate-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.p-about__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.16666vw;
  margin-top: 100px;
}
.p-about__textBox {
  width: calc(50% - 4.16666vw);
  position: relative;
}
.p-about__logo {
  max-width: 120px;
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.p-about__logoBlock {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  z-index: 2;
  transform-origin: left center;
}
.p-about__logoImg {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.p-about__text {
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.p-about__decTop {
  padding-bottom: 40px;
}
.p-about__decBottom {
  padding-top: 40px;
}
.p-about__textSub {
  font-size: 11px;
  position: relative;
  overflow: hidden;
}

.p-about__imgBox {
  width: calc(50% - 4.16666vw);
  position: relative;
}

.p-about__imgSplit {
  position: relative;
  overflow: hidden;
}

.p-about__imgSlice {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0; /* ← height:100% の代わりにこれ */
  width: 25%;
  background-image: var(--split-img);
  background-repeat: no-repeat;
  background-size: 400% 100%;
  will-change: transform;
  z-index: 1;
}
.p-about__imgSlice {
  background-image: url("../img/img_about.png");
}

/* 元imgはレイアウト維持だけ（見えなくする） */
.p-about__imgSplit > .p-about__img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}
/* 0〜3枚目の位置と背景位置 */
.p-about__imgSlice:nth-of-type(1) {
  left: 0%;
  background-position: 0% 0;
}
.p-about__imgSlice:nth-of-type(2) {
  left: 25%;
  background-position: 33.333% 0;
}
.p-about__imgSlice:nth-of-type(3) {
  left: 50%;
  background-position: 66.666% 0;
}
.p-about__imgSlice:nth-of-type(4) {
  left: 75%;
  background-position: 100% 0;
}

.p-about__imgBg {
  position: absolute;
  z-index: -1;
  bottom: -50px;
  right: -50px;
}

.p-about__order {
  padding-top: 200px;
}
.p-about__orderHeadingImg {
  max-width: 270px;
}
.p-about__orderImg {
  display: block;
  max-width: 980px;
  margin: 40px auto;
}
.p-about__orderTxt {
  font-size: 14px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 900px) {
  .p-about__container {
    flex-direction: column;
  }
  .p-about__textBox,
  .p-about__imgBox {
    width: 100%;
  }
  .p-about::before {
    top: unset;
    bottom: 25%;
  }
  .p-about::after {
    top: unset;
    bottom: 25%;
  }
}

@media screen and (max-width: 767px) {
  .p-about {
    padding-top: 64px;
  }
  .p-about__headingImg {
    width: 72vw;
  }
  .p-about__text {
    font-size: 14px;
  }
  .p-about__orderTxt {
    font-size: 11px;
  }
  .p-about__orderHeadingImg {
    max-width: 34.6666vw;
  }
}

/****************************************************
 P item
****************************************************/
.p-item__headingImg {
  max-width: 650px;
  width: 33.854vw;
}
.p-item__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.16666vw;
  margin: 100px auto 0;
  max-width: 1920px;
}
.p-item__imgBox {
  width: calc(60% - 2.16666vw);
}
.p-item__img__sp {
  display: none;
}
.p-item__textBox {
  width: calc(40% - 2.16666vw);
}
.p-item__textBox-1 {
  overflow: hidden;
}
.p-item__textBox-1 > img {
  opacity: 0;
}
.p-item__textBox__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 40px 0;
}
.p-item__textBox-1 .p-item__textBox__inner::before {
  content: "";
  background: url("../img/dec_item-l.svg") no-repeat;
  background-size: cover;
  display: block;
  width: clamp(40px, 3vw, 40px);
  aspect-ratio: 39 / 206;
  opacity: 0;
  transform: translateY(8px);
}
.p-item__textBox-1 .p-item__textBox__inner::after {
  content: "";
  background: url("../img/dec_item-r.svg") no-repeat;
  background-size: cover;
  display: block;
  width: clamp(40px, 3vw, 40px);
  aspect-ratio: 39 / 206;
  opacity: 0;
  transform: translateY(8px);
}
.p-item__textBox__inner.is-fadein::before,
.p-item__textBox__inner.is-fadein::after {
  animation: fade-up 0.6s ease-out forwards;
}
@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.p-item__text {
  max-width: 400px;
  position: relative;
  overflow: hidden;
  margin: 0 16px;
}
.p-item__textBox-2 {
  margin-top: 40px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.p-item__textBox-2::before,
.p-item__textBox-2::after,
.p-item__textBox-2 .p-item__border-i::before,
.p-item__textBox-2 .p-item__border-i::after {
  content: "";
  position: absolute;
  background: var(--white);
  opacity: 0;
}
/* 上辺 */
.p-item__textBox-2::before {
  left: 0;
  top: 0;
  height: 1px;
  width: 0;
}
/* 右辺 */
.p-item__textBox-2::after {
  right: 0;
  top: 0;
  width: 1px;
  height: 0;
}
/* 下辺 */
.p-item__textBox-2 .p-item__border-i::before {
  right: 0;
  bottom: 0;
  height: 1px;
  width: 0;
}
/* 左辺 */
.p-item__textBox-2 .p-item__border-i::after {
  left: 0;
  bottom: 0;
  width: 1px;
  height: 0;
}
.p-item__textBox-2.is-draw::before {
  opacity: 1;
  animation: draw-top 0.35s linear forwards;
}
.p-item__textBox-2.is-draw::after {
  opacity: 1;
  animation: draw-right 0.35s linear forwards;
  animation-delay: 0.35s;
}
.p-item__textBox-2.is-draw .p-item__border-i::before {
  opacity: 1;
  animation: draw-bottom 0.35s linear forwards;
  animation-delay: 0.7s;
}
.p-item__textBox-2.is-draw .p-item__border-i::after {
  opacity: 1;
  animation: draw-left 0.35s linear forwards;
  animation-delay: 1.05s;
}
@keyframes draw-top {
  to {
    width: 100%;
  }
}
@keyframes draw-right {
  to {
    height: 100%;
  }
}
@keyframes draw-bottom {
  to {
    width: 100%;
  }
}
@keyframes draw-left {
  to {
    height: 100%;
  }
}

.p-item__textBox__dec {
  opacity: 0;
  transform: translateY(8px);
}
.p-item__textBox-2.is-draw .p-item__textBox__dec {
  animation: fade-up 0.5s ease-out forwards;
  animation-delay: 1.4s;
}
@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.p-item__textBox-2 .p-item__textBox__inner {
  justify-content: flex-start;
}
.u-reverse .p-item__textBox-2 .p-item__textBox__inner {
  justify-content: flex-end;
}
.p-item__textBox-2 .p-item__text {
  font-size: 10px;
  padding-left: 16px;
  text-align: left;
  max-width: 300px;
}
.u-reverse .p-item__textBox-2 .p-item__text {
  font-size: 10px;
  padding-right: 16px;
  text-align: right;
  max-width: 300px;
}
.p-item__textBox__dec {
  max-width: 70px;
}

.p-item__textBox__otomo {
  position: absolute;
}
.p-item__textBox__otomo--1 {
  max-width: 85px;
  bottom: -2%;
  right: 12%;
}
.p-item__textBox__otomo--2 {
  max-width: 70px;
  bottom: 0;
  right: 0;
}
.p-item__textBox__otomo--3 {
  max-width: 85px;
  bottom: -2%;
  left: 12%;
}
.p-item__textBox__otomo--4 {
  max-width: 70px;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 900px) {
  .p-item__container {
    flex-direction: column;
    gap: 40px;
  }
  .p-item__imgBox {
    width: 100%;
  }
  .p-item__textBox {
    width: 100%;
  }
  .p-item__container.u-reverse {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .p-item__img__sp {
    display: block;
  }
  .p-item__img__pc {
    display: none;
  }
  .p-item__headingImg {
    width: 59.73333vw;
  }
  .p-item__textBox__inner {
    padding: 10.06666vw 0;
  }
  .p-item__textBox-2 .p-item__textBox__inner {
    padding: 0 0 5.06666vw;
  }
  .p-item__text {
    font-size: 14px;
  }
  .p-item__textBox__dec {
    max-width: 40px;
  }
  .p-item__textBox__otomo--1 {
    max-width: 50px;
  }
  .p-item__textBox__otomo--2 {
    max-width: 40px;
  }
  .p-item__textBox__otomo--3 {
    max-width: 45px;
  }
  .p-item__textBox__otomo--4 {
    max-width: 35px;
  }
}

/****************************************************
 P styling
****************************************************/
.p-styling__headingImg {
  max-width: 850px;
  width: 44.27vw;
}

/* 非アクティブ時は pagenation.svg、アクティブ時は pagenation-ac.svg を見せる */
.p-styling__pagination {
  position: relative;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.p-styling__pagination .swiper-pagination-bullet {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  background: none;
  opacity: 1;
}
.p-styling__pagination .swiper-pagination-bullet .p-styling__bullet-img,
.p-styling__pagination
  .swiper-pagination-bullet
  .p-styling__bullet-img--active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.p-styling__pagination
  .swiper-pagination-bullet
  .p-styling__bullet-img--active {
  display: none;
}
.p-styling__pagination .swiper-pagination-bullet-active .p-styling__bullet-img {
  display: none;
}
.p-styling__pagination
  .swiper-pagination-bullet-active
  .p-styling__bullet-img--active {
  display: block;
}

.p-styling__swiper {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-styling__swiper .swiper-wrapper {
  height: auto;
}

.p-styling__swiper .swiper-slide {
  position: relative;
  height: auto;
  box-sizing: border-box;
}
.p-styling__swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.p-styling__swiper .swiper-slide-active::after {
  display: none;
}
.p-styling__swiper .p-styling__slideImg {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
  .p-styling__headingImg {
    width: 80vw;
  }
}

/****************************************************
 P detail
****************************************************/
.p-detail {
  position: relative;
  background:
    url("../img/bg.svg") repeat,
    radial-gradient(
      ellipse at center,
      rgba(0, 255, 255, 0.25) 0%,
      rgba(0, 0, 0, 0.8) 60%,
      rgba(0, 0, 0, 1) 100%
    ),
    #000;

  background-blend-mode: screen;
}
.p-detail__inner {
  padding: 0;
}
.p-detail__headingImg {
  max-width: 758px;
  width: 39.479vw;
}
.p-detail__container {
  padding: 100px 0;
  background: url("../img/bg_detail-1.png") no-repeat;
  background-size: cover;
  background-position: bottom center;
  /* clip-path: inset(0 100% 0 0); */
  position: relative;
}
.p-detail__container--2,
.p-detail__container--4 {
  background: url("../img/bg_detail-2.png") no-repeat;
  background-size: cover;
  background-position: bottom center;
  /* clip-path: inset(0 0 0 100%); */
}
.p-detail__boxWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 160px;
  max-width: 1440px;
  width: 85%;
  margin: 0 auto;
}
.p-detail__imgBox {
  width: calc(58% - 80px);
}
.p-detail__textBox {
  width: calc(42% - 80px);
}
.p-detail__textWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-detail__dec {
  max-width: 40px;
}

.p-detail__imgBox {
  width: calc(60% - 80px);
  position: relative;
  overflow: visible;
}
.p-detail__imgBox::before {
  content: "";
  position: absolute;
  top: -5%;
  left: 0;
  display: block;
  width: 5vw;
  max-width: 84px;
  max-height: 100px;
  height: 6.11vw;
  background: url("../img/dec_detail-l.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 10;
}
.p-detail__container--2 .p-detail__imgBox::before,
.p-detail__container--4 .p-detail__imgBox::before {
  content: "";
  position: absolute;
  top: -5%;
  left: unset;
  right: 0;
  display: block;
  width: 5vw;
  max-width: 84px;
  max-height: 100px;
  height: 6.11vw;
  background: url("../img/dec_detail-r.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 10;
}
.p-detail__imgWrap {
  position: relative;
  overflow: visible;
}
.p-detail__imgWrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6.25vw;
  max-width: 120px;
  height: 0;
  padding-bottom: 50%;
  background: url("../img/dec_detail-point.svg") no-repeat center / contain;
  transform: translate(-90%, 0);
  pointer-events: none;
  z-index: 1;
}
.p-detail__imgWrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5.5vw;
  display: block;
  width: 6.25vw;
  height: 35.3vw;
  max-width: 120px;
  max-height: 678px;
  background: url("../img/dec_detail-shoelace.svg") no-repeat center / contain;
  z-index: 1;
}

.p-detail__container--2 .p-detail__imgWrap::before {
  content: "";
  position: absolute;
  top: -12%;
  bottom: unset;
  left: -1%;
  display: block;
  width: 6.25vw;
  height: 35.3vw;
  max-width: 120px;
  max-height: 678px;
  background: url("../img/dec_detail-charm.svg") no-repeat center / contain;
  z-index: 1;
}
.p-detail__container--2 .p-detail__imgWrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: unset;
  right: -23%;
  width: 6.25vw;
  max-width: 120px;
  height: 0;
  padding-bottom: 50%;
  background: url("../img/dec_detail-point-r.svg") no-repeat center / contain;
  transform: translate(-90%, 0);
  pointer-events: none;
  z-index: 1;
}
.p-detail__container--3 .p-detail__imgWrap::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6.25vw;
  max-width: 120px;
  height: 0;
  padding-bottom: 50%;
  background: url("../img/dec_detail-point.svg") no-repeat center / contain;
  transform: translate(-90%, 0);
  pointer-events: none;
  z-index: 1;
}
.p-detail__container--3 .p-detail__imgWrap::after {
  content: "";
  position: absolute;
  top: -12%;
  right: -12%;
  display: block;
  width: 6.25vw;
  height: 35.3vw;
  max-width: 120px;
  max-height: 678px;
  background: url("../img/dec_detail-insole.svg") no-repeat center / contain;
  z-index: 1;
}

.p-detail__container--4 .p-detail__imgWrap::before {
  content: "";
  position: absolute;
  top: -17%;
  bottom: unset;
  left: -1%;
  display: block;
  width: 6.25vw;
  height: 35.3vw;
  max-width: 120px;
  max-height: 678px;
  background: url("../img/dec_detail-logo.svg") no-repeat center / contain;
  z-index: 1;
}
.p-detail__container--4 .p-detail__imgWrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: unset;
  right: -23%;
  width: 6.25vw;
  max-width: 120px;
  height: 0;
  padding-bottom: 50%;
  background: url("../img/dec_detail-point-r.svg") no-repeat center / contain;
  transform: translate(-90%, 0);
  pointer-events: none;
  z-index: 1;
}

.p-detail__swiper {
  overflow: hidden;
  width: 100%;
}

.p-detail__swiper .swiper-slide {
  width: 100%;
}

.p-detail__swiper .p-detail__slideImg {
  width: 100%;
  height: auto;
  display: block;
}

/* 非アクティブ時は pagenation.svg、アクティブ時は pagenation-ac.svg を見せる */
.p-styling__pagination,
.p-detail__pagination {
  position: relative;
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.p-styling__pagination .swiper-pagination-bullet,
.p-detail__pagination .swiper-pagination-bullet {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  background: none;
  opacity: 1;
}
.p-styling__pagination .swiper-pagination-bullet .p-styling__bullet-img,
.p-styling__pagination .swiper-pagination-bullet .p-styling__bullet-img--active,
.p-detail__pagination .swiper-pagination-bullet .p-styling__bullet-img,
.p-detail__pagination .swiper-pagination-bullet .p-styling__bullet-img--active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.p-styling__pagination .swiper-pagination-bullet .p-styling__bullet-img--active,
.p-detail__pagination .swiper-pagination-bullet .p-styling__bullet-img--active {
  display: none;
}
.p-styling__pagination .swiper-pagination-bullet-active .p-styling__bullet-img,
.p-detail__pagination .swiper-pagination-bullet-active .p-styling__bullet-img {
  display: none;
}
.p-styling__pagination
  .swiper-pagination-bullet-active
  .p-styling__bullet-img--active,
.p-detail__pagination
  .swiper-pagination-bullet-active
  .p-styling__bullet-img--active {
  display: block;
}
.p-detail__text {
  position: relative;
  overflow: hidden;
  padding: 0 16px;
}

.p-detail__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.2;
  mix-blend-mode: overlay;
  animation: noise-flicker 0.15s steps(2) infinite;
}

@keyframes noise-flicker {
  0%,
  100% {
    opacity: 0.2;
    transform: translate(0, 0);
  }
  50% {
    opacity: 0.25;
    transform: translate(-1px, 1px);
  }
}

.p-detail__commentWrap {
  padding: 0 16px;
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}
.p-detail__container--4 + .p-detail__commentWrap {
  margin-top: 100px;
}
.p-detail__commentWrap + .p-detail__commentWrap {
  margin-top: 64px;
}
.p-detail__comment {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding: 16px 16px 16px 64px;
  position: relative;
}
.p-detail__comment::before {
  position: absolute;
  content: "";
  background: url("../img/dec_comment-l.svg") no-repeat center / contain;
  width: 69px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  transform-origin: right center;
  transform: scaleX(0);
  opacity: 0;
}
.p-detail__comment::after {
  position: absolute;
  content: "";
  background: url("../img/dec_comment-r.svg") no-repeat center / contain;
  width: 69px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
}
/* 中央から左右に開く（クラス付与で再生） */
.p-detail__comment.is-decoration-visible::before {
  animation: p-detail-comment-open-l 0.5s ease-out forwards;
}
.p-detail__comment.is-decoration-visible::after {
  animation: p-detail-comment-open-r 0.5s ease-out forwards;
}
@keyframes p-detail-comment-open-l {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes p-detail-comment-open-r {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
.p-detail__commentIcon {
  width: 135px;
}
.p-detail__commentDec {
  max-width: 24px;
  max-height: 240px;
}
.p-detail__commentText {
  position: relative;
  overflow: hidden;
}
.p-detail__commentText.u-josefin {
  margin-top: 1rem;
}
.p-detail__commentText.u-f14 {
  margin-top: 64px;
}

.p-detail__content {
  position: relative;
}
.p-detail__content::before {
  position: absolute;
  content: "";
  background: url("../img/dec_circle-i.svg") no-repeat;
  background-size: cover;
  display: block;
  width: 30.9027vw;
  height: 30.9027vw;
  top: 20%;
  left: -10%;
  animation: rotate-ccw--2 20s linear infinite;
  z-index: 1;
}
.p-detail__content::after {
  position: absolute;
  content: "";
  background: url("../img/dec_circle-o.svg") no-repeat;
  background-size: cover;
  display: block;
  width: 34.72222vw;
  height: 34.72222vw;
  top: 17%;
  left: -12%;
  animation: rotate-cw--2 20s linear infinite;
  z-index: 1;
}

@keyframes rotate-cw--2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-ccw--2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.p-detail__content__container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.16666vw;
  margin-top: 200px;
}
.p-detail__content__imgBox {
  position: relative;
}
.p-detail__content__img {
  position: relative;
  z-index: 2;
}
.p-detail__content__imgBg {
  position: absolute;
  z-index: 1;
  top: -50px;
  right: -50px;
}
.p-detail__content__textBox {
  background: url("../img/bg_detail-frame-pc.svg") no-repeat center / 100% 100%;
  width: 100%;
  height: 100%;
  padding: 4.3333vw;
  box-sizing: border-box;
  max-width: 720px;
  min-width: 0;
  overflow: hidden;
}
.p-detail__contentText {
  position: relative;
  overflow: hidden;
}
.p-detail__content__imgBox {
  width: calc(45% - 6.16666vw);
}
.p-detail__content__textBox {
  width: calc(55% - 6.16666vw);
}
.p-detail__content__size,
.p-detail__content__set {
  max-width: 120px;
}
.p-detail__content__sample {
  max-width: 278px;
  width: 14.4791vw;
  height: auto;
}

@media screen and (max-width: 1023px) {
  .p-detail__content__container {
    flex-direction: column;
  }
  .p-detail__content__imgBox,
  .p-detail__content__textBox {
    width: 100%;
    padding: 8.6021vw;
  }
  .p-detail__content__sample {
    width: 74.1333vw;
  }
}

@media screen and (max-width: 900px) {
  .p-detail__container {
    padding: 64px 0;
  }
  .p-detail__imgBox {
    width: 100%;
  }
  .p-detail__textBox {
    width: 100%;
  }
  .p-detail__content__imgBox,
  .p-detail__content__textBox {
    width: 100%;
    padding: 9.6021vw;
  }
  .p-detail__boxWrap {
    flex-direction: column;
    gap: 40px;
  }
  .p-detail__boxWrap.u-reverse {
    flex-direction: column;
    gap: 40px;
  }
  .p-detail__commentWrap {
    padding: 0;
    width: 100%;
  }
  .p-detail__comment {
    flex-direction: column;
    padding: 6.4vw;
  }
  .p-detail__commentDec {
    max-width: 900px;
    width: 83.2vw;
    max-height: 24px;
  }
  .p-detail__comment::before {
    background: url("../img/dec_comment-t.svg") no-repeat center / contain;
    width: 100%;
    height: 7.4vw;
  }
  .p-detail__comment::after {
    background: url("../img/dec_comment-b.svg") no-repeat center / contain;
    width: 100%;
    height: 7.4vw;
    top: unset;
    bottom: 0;
  }
  .p-detail__commentText {
    font-size: 14px;
  }
  .p-detail__commentText.u-josefin {
    margin-bottom: 1rem;
  }
  .p-detail__commentText.u-f14 {
    margin-top: 48px;
  }
  .p-detail__contentText {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .p-detail__headingImg {
    width: 75.7333vw;
  }
  .p-detail__text {
    font-size: 14px;
    padding: 0;
    text-align: center;
  }
  .p-detail__dec {
    max-width: 28px;
  }
  .p-detail__imgBox::before {
    width: 9.6666vw;
    height: 12.3333vw;
    top: -8%;
  }
  .p-detail__container--2 .p-detail__imgBox::before,
  .p-detail__container--4 .p-detail__imgBox::before {
    width: 10.6666vw;
    height: 13.3333vw;
  }
  .p-detail__imgWrap::before {
    height: 32.8vw;
    width: 9.6vw;
    bottom: -8%;
  }
  .p-detail__container--2 .p-detail__imgWrap::before {
    height: 38.4vw;
    width: 16vw;
    top: -1.5vw;
    left: 2vw;
  }
  .p-detail__container--3 .p-detail__imgWrap::before {
    height: 32.8vw;
    width: 9.6vw;
    bottom: -8%;
  }
  .p-detail__container--4 .p-detail__imgWrap::before {
    height: 29.8666vw;
    width: 12vw;
    top: -3vw;
    left: 1vw;
  }
  .p-detail__imgWrap::after {
    height: 57.3333vw;
    width: 9.6vw;
    right: -8.5vw;
  }
  .p-detail__container--2 .p-detail__imgWrap::after {
    height: 57.3333vw;
    width: 9.6vw;
    right: -16.5vw;
    bottom: -15vw;
  }
  .p-detail__container--3 .p-detail__imgWrap::after {
    height: 38.6666vw;
    width: 9.6vw;
    right: -8.5vw;
    top: -1.5vw;
  }
  .p-detail__container--4 .p-detail__imgWrap::after {
    height: 57.3333vw;
    width: 9.6vw;
    right: -16.5vw;
    bottom: -15vw;
  }
  .p-detail__content::before {
    top: 53.3333vw;
  }
  .p-detail__content::after {
    top: 53.3333vw;
  }
}
@media screen and (max-width: 560px) {
  .p-detail__content__textBox {
    padding: 16px;
    max-width: 100%;
    background: none;
  }
}

/****************************************************
 HTB
****************************************************/
.p-htb__headingImg {
  max-width: 1000px;
  width: 57.552vw;
}
.p-htb__lead {
  margin: 80px 0;
}
.p-htb__text {
  position: relative;
  overflow: hidden;
  line-height: 28px;
}
.p-htb__container {
  max-width: 780px;
  width: 90%;
  margin: 0 auto;
}
.p-htb__textBox {
  margin-bottom: 80px;
}
.p-htb__textWrap {
  position: relative;
  padding: 16px;
}
.p-htb__textWrap::before {
  position: absolute;
  content: "";
  background: url("../img/dec_detail_text-l.svg") no-repeat center / contain;
  width: 64px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* transform-origin: right center;
  transform: scaleX(0);
  opacity: 0; */
}
.p-htb__textWrap::after {
  position: absolute;
  content: "";
  background: url("../img/dec_detail_text-r.svg") no-repeat center / contain;
  width: 64px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  /* transform-origin: left center;
    transform: scaleX(0);
    opacity: 0; */
}
.p-htb__textInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

@media screen and (max-width: 767px) {
  .p-htb__headingImg {
    width: 86.93333vw;
  }
  .p-htb__textInner {
    flex-direction: column;
  }
  .p-htb__textWrap::before {
    background: url("../img/dec_comment-t.svg") no-repeat center / contain;
    width: 100%;
    height: 7.4vw;
  }
  .p-htb__textWrap::after {
    background: url("../img/dec_comment-b.svg") no-repeat center / contain;
    width: 100%;
    height: 7.4vw;
    top: unset;
    bottom: 0;
  }
}

/****************************************************
 P goods
****************************************************/
.p-goods__headingImg {
  max-width: 780px;
  width: 40.625vw;
}
.p-goods__container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 100px auto 0;
  max-width: 1440px;
}
.p-goods__box {
  width: calc(33.33333% - 32px);
  max-width: 450px;
  background: url("../img/bg_goods.svg") no-repeat center / contain;
}
.p-goods__boxInner {
  max-width: 360px;
  margin: 0 auto;
  padding: 24px;
}
.p-goods__text {
  position: relative;
  overflow: hidden;
}
.p-goods__img {
  max-width: 360px;
  display: block;
  margin: 0 auto;
  filter: blur(8px);
  opacity: 0.85;
}

@media screen and (max-width: 1090px) {
  .p-goods__container {
    flex-direction: column;
  }
  .p-goods__box {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .p-goods__headingImg {
    width: 67.73333vw;
  }
  .p-goods__img {
    max-width: 275px;
  }
}

/****************************************************
 P fe
****************************************************/
.p-fe {
  padding-bottom: 200px;
}
.p-fe__headingImg {
  max-width: 1200px;
}
.p-fe__table {
  max-width: 850px;
  margin: 80px auto;
  border-collapse: collapse;
}
.p-fe__table th {
  width: 40%;
  padding: 32px;
}
.p-fe__table td {
  width: 60%;
  padding: 32px;
}
.p-fe__table th,
.p-fe__table td {
  border-top: 1px solid var(--white);
}
.p-fe__table tr:first-child th,
.p-fe__table tr:first-child td {
  border-top: 1px solid var(--white);
}
.p-fe__table tr:last-child th,
.p-fe__table tr:last-child td {
  border-bottom: 1px solid var(--white);
}
.p-fe__text {
  position: relative;
  overflow: hidden;
}
.p-fe__textWrap {
  position: relative;
  padding: 16px;
  display: flex;
  justify-content: center;
  max-width: 900px;
  margin: 80px auto 0;
}
.p-fe__textWrap::before {
  position: absolute;
  content: "";
  background: url("../img/dec_detail_text-l.svg") no-repeat center / contain;
  width: 64px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* transform-origin: right center;
  transform: scaleX(0);
  opacity: 0; */
}
.p-fe__textWrap::after {
  position: absolute;
  content: "";
  background: url("../img/dec_detail_text-r.svg") no-repeat center / contain;
  width: 64px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  /* transform-origin: left center;
    transform: scaleX(0);
    opacity: 0; */
}
.p-fe__sample {
  max-width: 440px;
  display: block;
  margin: 24px auto 0;
  filter: blur(8px);
  opacity: 0.85;
}

@media screen and (max-width: 767px) {
  .p-fe__list {
    max-width: 320px;
    margin: 0 auto;
  }
  .p-fe__table,
  .p-fe__table tbody,
  .p-fe__table tr {
    display: block;
  }
  .p-fe__table th,
  .p-fe__table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .p-fe__table th {
    border-bottom: none;
    padding-bottom: 8px;
  }
  .p-fe__table td {
    padding-top: 8px;
    border-top: none;
  }
  .p-fe__table tr {
    border-bottom: 1px solid var(--white);
  }
  .p-fe__table tr:last-child {
    border-bottom: 1px solid var(--white);
  }
  .p-fe__table tr:first-child td {
    border-top: none;
  }
  .p-fe__table tr:last-child th {
    border-bottom: none;
  }
  .p-fe__table .p-fe__text {
    text-align: center;
  }
}
/****************************************************
 U
****************************************************/
.u-poppins {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: nomal;
}
.u-josefin {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-style: nomal;
}
.u-syne {
  font-family: "Syne", sans-serif;
  font-weight: 400;
  font-style: nomal;
}
.u-aldrich {
  font-family: "Aldrich", sans-serif;
  font-weight: 400;
  font-style: nomal;
}
.u-display-none {
  display: none;
}
.u-dn-pc {
  display: none !important;
}
.u-dn-sp {
  display: block !important;
}
@media screen and (max-width: 767px) {
  .u-dn-pc {
    display: block !important;
  }
  .u-dn-sp {
    display: none !important;
  }
}
.u-reverse {
  flex-direction: row-reverse;
}
.u-f18 {
  font-size: 18px;
}
.u-f14 {
  font-size: 14px;
}
.u-f20 {
  font-size: 20px;
}
.u-f24 {
  font-size: 24px;
}
.u-tac {
  text-align: center;
}
.u-tar {
  text-align: right;
}
.u-comment {
  border: 1px solid var(--white);
  padding: 2px 24px;
  border-radius: 50px;
}
.u-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.u-mt8 {
  margin-top: 8px;
}
.u-mt16 {
  margin-top: 16px;
}
.u-mt24 {
  margin-top: 24px;
}
.u-mt32 {
  margin-top: 32px;
}
.u-mt40 {
  margin-top: 40px;
}
.u-mt80 {
  margin-top: 80px;
}
.u-mt100 {
  margin-top: 100px;
}
.u-line {
  padding-right: 40px;
  border-right: 1px solid var(--white);
}
@media screen and (max-width: 767px) {
  .u-f18 {
    font-size: 14px;
  }
  .u-f14 {
    font-size: 10px;
  }
  .u-f20 {
    font-size: 18px;
  }
  .u-f24 {
    font-size: 20px;
  }
  .u-line {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--white);
    padding-right: 0;
    border-right: none;
  }
  .u-mt0--sp {
    margin-top: 0;
  }
  .u-tal--sp {
    text-align: left;
  }
  .u-tac--sp {
    text-align: center;
  }
}