@charset "utf-8";

/* ====================
オープニングアニメーション
==================== */
.knit-logoWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: openingFadeOut 0.4s ease forwards;
  animation-delay: 0.6s;

  position: fixed;
  inset: 0;
  z-index: 9999;
}

.KNit_logo_wrap {
  display: flex;
  align-items: flex-end;
  margin-bottom: 9px;
}

/* ロゴは控えめにフェード */
.knit-logo {
  width: 114px;
  height: 42px;
  opacity: 0;
  transform: scale(0.96);
  animation: logoFade 0.6s ease-out forwards;
}

@keyframes logoFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.knit-scissors {
  margin-bottom: 4px;
  margin-left: -24px;
  width: 68px;
  transform-origin: right center;
  animation: scissorsClick 0.4s ease-out forwards;
  animation-delay: 0.7s;
}

@keyframes scissorsClick {
  0% {
    transform: rotate(0deg);
  }

  40% {
    transform: rotate(-6deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* × 横並び */
.knit-crossRow {
  display: flex;
}

.welcomeKNit {
  font-family: Inter;
  font-size: 1.4rem;
  line-height: 1;
  margin-right: 6px;
  opacity: 0;
  transform: translateY(4px);
  animation: welcomeFade 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes welcomeFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SVG サイズ */
.knit-cross {
  width: 14px;
  height: 14px;
  transform: scale(1.06);
  animation: crossSettle 0.6s ease-out forwards;
}

@keyframes crossSettle {
  to {
    transform: scale(1);
  }
}

/* 線の見た目 */
.knit-cross line {
  stroke: var(--illustrationblack, #3E3A39);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation-fill-mode: forwards;
}

/* 1本目（先に伸びる） */
.knit-cross .line-a {
  animation: drawLine 0.6s ease-out forwards;
}

/* 2本目（少し遅れて） */
.knit-cross .line-b {
  animation: drawLine 0.6s ease-out forwards;
  animation-delay: 0.25s;
}

/* 糸が伸びる */
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawLine {
  0% {
    stroke-dashoffset: 60;
    transform: scaleX(1.02);
    transform-origin: left center;
    opacity: 0.4;
  }

  80% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    transform: scaleX(1);
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
  }
}

.mainContent {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.mainContent.is-visible {
  opacity: 1;
}

.knit-logoWrap.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

/* PC：1025px〜 */
@media (min-width: 1024px) {
  .knit-logoWrap {
    gap: 24px;
  }

  .KNit_logo_wrap {
    margin-bottom: 18px;
  }

  .knit-logo {
    width: 228px;
    height: 84px;
  }

  .knit-scissors {
    margin-bottom: 8px;
    margin-left: -48px;
    width: 136px;
  }

  .welcomeKNit {
    font-size: 2.8rem;
    line-height: 1;
    margin-right: 12px;
    transform: translateY(8px);
  }

  .knit-cross {
    width: 28px;
    height: 28px;
  }

  .knit-cross line {
    stroke-width: 1.6;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
  }
}/* PC：1025px〜 */

/* ====================
hero
==================== */
.hero {
  padding: 24px var(--contentPadding) 48px;
}

.catchphrase {
  margin: 0 0 0 auto;
  display: block;
  width: 168px;
  font-size: 1.4rem;
  line-height: 2;
  position: relative;
}

.catchphrase::after {
  content: "";
  margin-top: 2px;
  display: block;
  width: 100%;
  aspect-ratio: 168/13;
  background-image: url(../images/cross.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.mainVisual__group {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

.main__visual_frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 73%;
  aspect-ratio: 1/1;
  border: 1px solid #3E3A39;
  background-image: url(../images/main_visual_frame.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.main__visual_wrap {
  overflow: hidden;
  width: 93%;
  aspect-ratio: 1/1;
}

.main__visual {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
}

.scrollDown {
  display: inline-block;
  font-family: Inter;
  font-size: 1.2rem;
  line-height: 1;
  transform-origin: right bottom;
  transform: rotate(90deg) translateY(16px);
  position: relative;
}

.scrollDown::before {
  content: "";
  position: absolute;
  display: block;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--illustration_lightGray);
  transform-origin: left center;
}

.scrollDown::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: left center;
  animation: scrollLine 3.5s cubic-bezier(.4, 0, .2, 1) infinite;
  z-index: 2;
}

@keyframes scrollLine {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(0, 1);
    transform-origin: 0 100%;
  }
}

.point__list {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  display: flex;
  position: relative;
}

.point__list::before {
  content: "";
  position: absolute;
  display: block;
  left: 13px;
  top: 0px;
  width: 1px;
  height: 0;
  background-color: var(--primary_black);

  transition: height 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--line-delay, 0s);
}

.point__list.is-show::before {
  height: 150px;
}

@media screen and (width <=344px) {
  .point__list::before {
    top: 10px;
  }

  .point__list.is-show::before {
    height: 176px;
  }
}

.point__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.point__txt {
  font-size: 1.6rem;
  font-weight: 350;
  line-height: 1;

  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: var(--delay, 0s);
}

.point__txt.is-show,
.point__number.is-show {
  opacity: 1;
  transform: translateY(0);
}

.point__item:nth-child(2) .point__txt {
  line-height: 1.2;
}

.point__number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  padding: 4px 6px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  background-color: var(--cloudDancer);
  position: relative;

  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: var(--delay, 0s);
}

.point__number::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  border: 1px solid currentColor;

  clip-path: polygon(0 0,
      0 0,
      0 0,
      0 0);

  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

.point__number.is-show::after {
  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      0 100%);
}

.intro {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.intro__txt {
  margin-top: 24px;
  margin-left: auto;
  display: block;
  width: 73.7%;
  font-size: 1.4rem;
}

.point__img__01 {
  width: 100%;
}

.point__img__02 {
  margin-top: 24px;
  width: 73.7%;
}

.point__img__03 {
  margin-top: 36px;
  width: 56.8%;
  display: block;
  margin-left: auto;
}

.point__img__04 {
  margin-top: -60px;
  width: 32.6%;
  display: block;
  margin-right: auto;
}

/* ====================
about__top
==================== */
.about__top {
  display: flex;
  padding: 48px var(--contentPadding);
  flex-direction: column;
  align-items: flex-start;
}

.owner__picture {
  margin-top: 24px;
  display: flex;
  width: 100%;
  aspect-ratio: 344/220;
  background-image: url(../images/owner_picture.png);
  border: 1px solid #3E3A39;
  background-repeat: no-repeat;
  background-size: cover;
}

.owner__btn__group {
  margin: auto auto 24px 24px;
  width: fit-content;
}

/* ====================
menu__top
==================== */
.menu__top {
  display: flex;
  padding: 48px var(--contentPadding);
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.menu__top__list {
  display: grid;
  height: 392px;
  padding: 24px 0;
  row-gap: 16px;
  column-gap: 16px;
  align-self: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu__top__item {
  display: flex;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
}

.menu__top__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--primary_black);
  pointer-events: none;
  clip-path: polygon(0 0,
      0 0,
      0 0,
      0 0);

  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu__top__item.is-show::after {
  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      0 100%);
}

.menu__top__name {
  text-align: center;
  font-family: Inter;
  font-size: 1.6rem;
  line-height: 1;
}

.menu__top__price {
  text-align: center;
  font-family: Inter;
  font-size: 1.6rem;
  line-height: 1;
}

/* ====================
reviews
==================== */
.reviews {
  padding: 48px var(--contentPadding);
  overflow: hidden;
  position: relative;
  background-image: url(../images/reviews_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 70% center;
  /* フェード */
  position: relative;
  overflow: hidden;
}

.reviews__txt {
  display: flex;
  padding: 24px 0 0 0;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  color: var(--primary_white, #F8F8F8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.60);
  font-size: 1.4rem;
  line-height: 1.5;
  position: relative;
}

.reviews__txt::before {
  content: "";
  display: block;
  width: 37px;
  height: 38px;
  background-image: url(../images/reviews_icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.60));
}

.reviews__heightDummy {
  visibility: hidden;
  pointer-events: none;
}

.reviews__list {
  display: flex;
  margin: 24px 0;
  align-self: stretch;
  transition: transform 0.4s ease;
  /* フェード */
  position: relative;
  overflow: hidden;
}

.reviews__item {
  display: flex;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--primary_black);
  background: rgba(240, 238, 233, 0.70);
  flex: 0 0 100%;
  box-sizing: border-box;
  /* フェード */
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(4px);
  width: 100%;
}

/* フェード表示中 */
.reviews__item.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.reviews__item__title {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
}

.reviews__item__txt {
  font-size: 1.4rem;
  line-height: 1.5;
}

.reviews__item__age {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
}

/* ドットナビ */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.reviews__dot {
  width: 18px;
  height: 2px;
  background: var(--illustration_lightGray, #C4C4C4);
  cursor: pointer;
  transition: background 0.3s;
}

.reviews__dot.is-active {
  background: var(--illustration_gray, #777);
  width: 24px;
}

/* ====================
gallery
==================== */
.gallery {
  display: flex;
  padding: 48px 0;
  flex-direction: column;
  gap: 24px;
  overflow-x: clip;
  /* or hidden */
}

.gallery .topic {
  margin-left: var(--contentPadding);
}

.gallery__intro__txt {
  padding: 0 var(--contentPadding);
  font-size: 1.4rem;
}

.gallery__viewport {
  overflow-x: clip;
  width: 100%;
  position: relative;
}


.gallery__list {
  display: flex;
  gap: 24px;
  transition: transform 0.5s ease;
  will-change: transform;
  /* width: 100%;  */
  max-width: 100%;
}

.gallery__item {
  width: 71.4%;
  display: flex;
  flex-shrink: 0;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--illustrationblack, #3E3A39);
  background: var(--primary_white);
  box-sizing: border-box;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.5;
  transform: scale(0.96);
}

.gallery__item.is-active {
  opacity: 1;
  transform: scale(1);
}

.gallery__item__txt {
  color: var(--illustrationblack);
  font-size: 1.2rem;
  line-height: 1.5;
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.gallery__dot {
  width: 18px;
  height: 2px;
  background: var(--illustration_lightGray, #C4C4C4);
  cursor: pointer;
  transition: background 0.3s;
}

.gallery__dot.is-active {
  background: var(--illustration_gray, #777);
  width: 24px;
}

/* ====================
faq
==================== */
.faq {
  padding: 48px var(--contentPadding);
}

.faq__txt {
  display: flex;
  padding: 24px 0 0 0;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  color: var(--primary_black);
  font-size: 1.4rem;
  line-height: 1.5;
  position: relative;
}

.faq__txt::before {
  content: "";
  display: block;
  width: 37px;
  height: 38px;
  background-image: url(../images/faq_icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 24px auto;
  gap: 16px;
}

.faq__item {
  display: flex;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}


.faq__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  pointer-events: none;

  clip-path: polygon(0 0,
      0 0,
      0 0,
      0 0);

  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item.is-show::after {
  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      0 100%);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
  cursor: pointer;
  position: relative;
}

.faq__question::before {
  content: 'Q.';
  width: 17px;
  flex-shrink: 0;
  margin-bottom: auto;
  line-height: 1.5;
}

.faq__question::after {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../images/faq_open_icon.svg) no-repeat center / contain;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.faq__item.is-open .faq__question::after {
  transform: rotate(135deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__answer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  font-size: 1.4rem;
  line-height: 1.5;
  position: relative;

  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  /* border-top: none; */
  opacity: 0;
  transform: translateY(0);
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 開いた状態 */
.faq__item.is-open .faq__answer {
  max-height: 500px;
  /* 十分大きめでOK */
  padding-top: 8px;
  opacity: 1;
  margin-top: 8px;
  transform: translateY(6px);
  border-top: 1px dashed var(--illustration_gray, #777);
}

.faq__answer::before {
  content: 'A.';
  display: inline-block;
  width: 16px;
}