/* ============================================================
   CLEANING 喜久屋 — トップページ固有 CSS (top.css)
   ============================================================ */

/* ============================================================
   2. KEY VISUAL
   5つの要素をpositionで画面幅・高さ基準に流動配置
   ============================================================ */
.kv {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin-top: var(--space-md);

  & .kv__stage {
    position: relative;
    width: 100vw;
    max-width: 1680px;
    height: 80vw;
    max-height: 1344px;
    margin-inline: auto;
  }

  /* 1. メインコピー */
  & .kv__copy-main {
    position: absolute;
    left: 8%;
    top: 2%;
    width: 17%;
    pointer-events: none;
    user-select: none;
    z-index: 5;

    & .kv__catch video {
      width: 100%;
      height: auto;
      display: block;
    }
  }

  /* 2. メインイメージ */
  & .kv__img-main {
    width: 76%;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
    /* 切り欠きSVGのはみ出しをカット */

    & .kv__img-main-slides {
      position: relative;
      width: 100%;
      display: block;
    }

    & .kv__slide {
      width: 100%;
      height: 54.2%;
      display: block;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      will-change: opacity;
    }

    & .kv__slide:first-child {
      position: relative;
    }

    & .kv__slide:not(:first-child) {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      object-fit: cover;
    }

    & .kv__slide.is-active {
      opacity: 1;
      z-index: 1;
    }
  }

  /* 切り込み（型抜き） */
  & .kv__notch {
    position: absolute;
    bottom: -2px;
    height: auto;
    pointer-events: none;
  }

  & .kv__notch--1 {
    width: 50%;
    left: -5%;
    z-index: 2;
  }

  & .kv__notch--2 {
    width: 40%;
    right: 0;
    z-index: 3;
  }

  /* 3. サブイメージ1 */
  & .kv__img-sub1 {
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 46%;
    z-index: 3;

    & img {
      width: 100%;
      height: auto;
      display: block;
      clip-path: polygon(0% 44%, 0% 100%, 100% 100%, 100% 0%);
    }
  }

  /* 4. サブイメージ2 */
  & .kv__img-sub2 {
    position: absolute;
    right: clamp(0px, 10%, 60px);
    top: 50%;
    width: clamp(300px, 37vw, 680px);
    z-index: 4;

    & img {
      width: 100%;
      height: auto;
      display: block;
      clip-path: polygon(0% 0%, 0% 60%, 100% 100%, 100% 0%);
    }
  }

  /* 5. サブコピー */
  & .kv__sub-copy {
    position: absolute;
    left: 52%;
    bottom: 12%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: 2.4;
    color: var(--color-text);
  }

  /* JS有効時の初期非表示設定（ちらつき防止） */
  :root.js-enabled & {

    & .kv__copy-main,
    & .kv__img-main,
    & .kv__img-sub1,
    & .kv__img-sub2,
    & .kv__sub-copy {
      opacity: 0;
    }
  }
}

/* モバイル（640px以下） */
@media (max-width: 640px) {
  .kv {
    padding-block: var(--space-sm) var(--space-sm);

    & .kv__stage {
      height: clamp(330px, 120vw, 980px);
    }

    & .kv__copy-main {
      position: absolute;
      left: 2vw;
      top: 0;
      width: 18vw;
      z-index: 5;
    }

    & .kv__img-main {
      text-align: center;
      position: absolute;
      right: 0vw;
      top: 0vw;
      width: 80vw;
      height: calc(80vw * 0.542);
      z-index: 1;
      overflow: hidden;

      & .kv__img-main-slides {
        position: relative;
        width: 100%;
        display: block;
      }

      & .kv__slide {
        width: 100%;
        display: block;
        opacity: 0;
        transition: opacity 1.2s ease-in-out;
        will-change: opacity;
      }
    }

    & .kv__notch {
      position: absolute;
      bottom: -2px;
      height: auto;
      fill: #e2e2e2;
      pointer-events: none;
    }

    & .kv__notch--1 {
      width: 50%;
      left: -5%;
      z-index: 2;
    }

    & .kv__notch--2 {
      width: 40%;
      right: 0;
      z-index: 3;
    }

    & .kv__img-sub1 {
      position: absolute;
      left: 0;
      top: 40vw;
      width: 48vw;
      z-index: 3;
    }

    & .kv__img-sub2 {
      position: absolute;
      right: 4vw;
      top: 63vw;
      width: 44vw;
      z-index: 4;
    }

    & .kv__sub-copy {
      position: absolute;
      left: var(--container-pad);
      bottom: 4%;
      width: 90%;
      gap: var(--space-xs);
      font-size: var(--font-size-sm);
      line-height: 2;
    }
  }
}

/* ============================================================
   3. OUR SERVICE
   左：テキスト（タイトル・説明・リンク）／右：写真（画面端まで全面）
   ============================================================ */
.service {
  padding: 0 0 var(--space-2xl) 0;
  overflow-x: hidden;

  & .service__lead {
    font-size: var(--font-size-base);
    font-weight: 600;
    padding-block: var(--space-sm);
    border-bottom: 2px solid var(--color-line-strong);
    margin-bottom: var(--space-lg);
  }

  & .service__row {
    display: grid;
    grid-template-columns: 700px 700px;
    align-items: stretch;
    width: calc(var(--edge) + 1400px);
    padding-left: var(--edge);
    margin: var(--space-xs) 0;
  }

  & .service__row-text {
    padding: var(--space-lg);
    margin-right: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 2px solid var(--color-line-strong);
    border-top: 2px solid var(--color-line-strong);
  }

  & .service__row-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
  }

  & .service__row-desc {
    font-size: var(--font-size-base);
  }

  & .service__row-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-top: 2px;
  }

  & .service__row-image {
    min-height: 200px;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}

@media (max-width: 640px) {
  .service {
    padding-block: var(--space-lg);

    & .service__lead {
      margin-bottom: var(--space-lg);
    }

    & .service__row {
      grid-template-columns: 1fr;
      width: 100%;
      padding: 0 var(--container-pad);
    }

    & .service__row-text {
      flex-direction: column;
      gap: var(--space-sm);
      width: 100%;
      padding: var(--space-sm) 0;
      margin-right: 0;
      border-bottom: none;

      & .service__row-body {
        width: 100%;
      }
    }

    & .service__row-links {
      align-self: flex-end;
      align-items: flex-end;
      gap: 2px;
    }

    & .service__row-image {
      min-height: 200px;
      padding-bottom: var(--space-lg);
      border-bottom: 2px solid var(--color-line-strong);
    }
  }
}

/* ============================================================
   4. FEATURES
   上：見出し（3つの特徴）／下：3カード配置（480px以下でスワイプカルーセル）
   ============================================================ */
.features {
  padding-block: var(--space-2xl);

  & .features__head {
    margin-bottom: var(--space-xl);

    & .section-title {
      border-bottom: none;
    }
  }

  & .features__layout {
    position: relative;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-bottom: var(--space-2xl);

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: var(--container-pad);
      right: var(--container-pad);
      height: 4px;
      background-color: var(--color-black);
    }
  }

  & .features__carousel {
    width: 100%;
    margin: 0;
  }

  & .features__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  & .features__card {
    border-right: 2px solid var(--color-border-strong);
    padding: var(--space-sm) var(--space-lg) 0 var(--space-lg);
    display: flex;
    flex-direction: column;

    &:last-child {
      border-right: none;
    }

    &:p {
      font-size: var(--font-size-base);
    }
  }

  & .features__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    min-height: 8rem;

    & .view-more {
      align-self: flex-end;
    }
  }

  & .features__card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
  }

  & .features__card-image {
    aspect-ratio: 4 / 3;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  & .features__dots {
    display: none;
  }
}

@media (max-width: 640px) {
  .features {
    padding-block: var(--space-lg);

    & .features__layout {
      max-width: 100%;
      padding-inline: 0;
      padding-bottom: var(--space-xl);

      &::after {
        left: 0;
        right: 0;
      }
    }

    & .features__carousel {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      scrollbar-width: none;
      width: calc(100% - var(--container-pad));
      margin-left: var(--container-pad);

      &::-webkit-scrollbar {
        display: none;
      }
    }

    & .features__track {
      display: flex;
      width: max-content;
      margin-left: -24px;
      margin-right: var(--container-pad);
      padding-top: var(--space-xs);
      padding-bottom: var(--space-xs);
    }


    & .features__card {
      flex: 0 0 80vw;
      scroll-snap-align: start;
      padding-inline: var(--space-md);

      &:last-child {
        border-right: none;
      }
    }

    & .features__card-head {
      min-height: 7.5em;
    }

    & .features__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3%;
      margin-top: var(--space-lg);
    }

    & .features__dot {
      width: 18%;
      height: 1.5px;
      background-color: var(--color-border);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.25s ease;

      &.is-active {
        background-color: var(--color-black);
      }
    }
  }
}

/* ============================================================
   6. STORY
   ジグザグ（画像/本文が交互）＋背景の大きな透かし画像
   ============================================================ */
.story {
  position: relative;
  padding-block: var(--space-2xl);

  & .container {
    position: relative;
    z-index: 1;
  }

  & .story__list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-xl);
  }

  & .story__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-xl);

    &.story__item--reverse {
      flex-direction: row-reverse;
    }

    &:nth-child(n + 2) {
      margin-top: 80px;
    }
  }

  & .story__item-img {
    flex: 0 0 55%;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  & .story__item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block: var(--space-xl);
  }

  & .story__item-tag {
    font-family: var(--font-en);
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
  }

  & .story__item-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
  }

  & .story__item-text {
    font-size: var(--font-size-base);
    margin: 1rem 0;
  }

  & .story__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    aspect-ratio: 200 / 90;
    margin-top: var(--space-sm);
    color: var(--color-text);
    transition: color 0.3s ease, opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);

    & .story__btn-shape {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;

      & polygon {
        fill: transparent;
        transition: fill 0.3s ease;
      }
    }

    & .story__btn-label {
      position: relative;
      font-size: var(--font-size-sm);
      line-height: 1.5;
      text-align: center;
      padding-bottom: 16px;
      transition: color 0.3s ease;
    }

    &:hover {
      color: var(--color-bg-white);

      & .story__btn-shape polygon {
        fill: var(--color-black);
      }
    }
  }
}

@media (max-width: 640px) {
  .story {
    padding-block: var(--space-lg);

    & .story__list {
      margin-top: var(--space-lg);
      gap: var(--space-xl);
    }

    & .story__item,
    & .story__item.story__item--reverse {
      flex-direction: column;
      gap: var(--space-sm);
    }

    & .story__item:nth-child(n + 2) {
      margin-top: 0;
    }

    & .story__item-img {
      flex: none;
      width: 100%;
      max-height: none;
    }

    & .story__item-body {
      padding-block: 0;
    }

    & .story__item-tag {
      margin-bottom: 0;
    }

    & .story__item-text {
      margin: 0.5rem 0;
    }

    & .story__btn {
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
    }
  }
}


/* ============================================================
   7. STORE INFO.
   ============================================================ */
.store {
  padding-block: var(--space-2xl);

  & .store__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) 24px;
    padding-top: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  & .store__legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  & .store__legend-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }

  & .store__legend-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1;
  }

  & .store__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  & .store__column {
    border-top: 1px solid var(--color-border);
  }

  & .store__accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: none;
    font-family: var(--font-jp);
    font-size: var(--font-size-base);
    color: var(--color-text);
    cursor: pointer;
    text-align: left;

    &:hover {
      color: var(--color-black);
    }
  }

  & .store__accordion-icon {
    color: var(--color-black);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
  }

  & .store__accordion-name {
    flex-grow: 1;
  }

  & .store__accordion-count {
    font-family: var(--font-en);
    color: var(--color-text);
    font-size: var(--font-size-sm);
  }

  & .store__accordion-body {
    display: none;
    padding: 0 0 var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--color-border);

    &.is-open {
      display: block;
    }
  }

  & .store__shop-list {
    display: flex;
    flex-direction: column;
  }

  & .store__shop-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: var(--space-xs);
    cursor: pointer;
    transition: opacity 0.25s ease;

    &:hover {
      opacity: 0.65;
    }

    &:active {
      opacity: 0.45;
    }
  }

  & .store__shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  & .store__shop-name {
    font-size: var(--font-size-base);
    font-weight: 700;
  }

  & .store__shop-badges {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
  }

  & .store__shop-badge-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
  }

  & .store__shop-address {
    font-size: var(--font-size-xs);
    color: var(--color-text);
  }
}

@media (max-width: 640px) {
  .store {
    padding-block: var(--space-lg);

    & .section-title {
      border-bottom: none;
    }

    & .store__columns {
      grid-template-columns: 1fr;
      gap: 0;
    }

    & .store__column:first-child {
      border-right: none;
    }

    & .store__column:last-child {
      border-top: none;
    }

    & .store__accordion-body {
      padding: 0 0 var(--space-sm) 0;
    }
  }
}

/* ============================================================
   8. NEWS
   ============================================================ */
.news {
  padding-block: var(--space-2xl);

  & .news__list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
  }

  & .news__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);

    &:hover .news__title {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  & .news__date {
    font-family: var(--font-en);
    color: var(--color-text);
    white-space: nowrap;
    min-width: 88px;
  }

  & .news__category {
    background: var(--color-badge-bg);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    padding: 3px 10px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  & .news__title {
    flex-grow: 1;
    color: var(--color-text);
    text-decoration: none;
  }

  & .news__more {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-lg);
  }
}

@media (max-width: 640px) {
  .news {
    padding-block: var(--space-lg);

    & .news__item {
      flex-wrap: wrap;
      gap: var(--space-xs) var(--space-sm);
    }

    & .news__title {
      flex-basis: 100%;
    }
  }
}