* {
}

/* ===== 背景2分割 ===== */
.section__mv {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

.image-box {
  flex: 1;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* 高級感：超スロー・ケンバーンズ */
  will-change: transform;
  animation: kb-zoom 10s ease-out both;
}

.image-box:nth-child(2) img {
  animation-duration: 12s;
  animation-delay: 0.15s;
}

.image-box img[src*="075_key_03.jpg"] {
  filter: brightness(80%);
  /* 明るさを60%に落とす */
}

/* ===== ロゴ配置 ===== */
.logo2 {
  left: 50%;
  z-index: 20;
  max-width: 160px;
  width: 30%;
  height: auto;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  /* PC時：少し上寄せ */
  width: auto;
  max-width: 300px;
  height: auto;
  z-index: 10;
  opacity: 0;
  animation: fade-up 0.6s ease-out 0.15s forwards;
}

.coming-soon {
  position: absolute;
  top: calc(50% + 100px);
  /* PC時の位置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: #fff;
  z-index: 10;
  opacity: 0;
  animation: track-in 0.7s ease-out 0.35s forwards;
}

/* ===== アニメーション定義 ===== */
@keyframes kb-zoom {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-60% + 4px));
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -60%);
  }
}

@keyframes track-in {
  0% {
    opacity: 0;
    letter-spacing: 6px;
  }

  100% {
    opacity: 1;
    letter-spacing: 2px;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ===== モーション配慮 ===== */
@media (prefers-reduced-motion: reduce) {
  .image-box img,
  .logo,
  .logo2,
  .coming-soon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== スマホ調整 ===== */
@media screen and (max-width: 768px) {
  .image-wrapper {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
  }

  .logo2 {
    width: 30%;
  }

  /* ロゴ＆テキストを上半分に収める */
  .logo {
    top: 48%;
    transform: translate(-50%, -50%);
    width: 50%;
    /* モバイル用のアニメ最終位置に合わせたキーフレーム */
    animation: fade-up-sp 0.6s ease-out 0.15s forwards;
  }

  .coming-soon {
    top: calc(40% + 80px);
    /* ご指定の上寄せ */
    font-size: 1.05rem;
  }

  @keyframes fade-up-sp {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-50% + 4px));
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}

.section__inner {
  width: 100%;
  max-width: 1000px;
  padding: 24px;
  margin: auto;
}

/* ABOUT */
.section__about {
  z-index: 10;
}

.about__desc__ttl {
  font-size: 2.0rem;
  font-weight: 500;
}
.about__catch {
  top: 80px;
  left: 0;
  margin: 24px auto;
  display: block;
  font-size: 3rem;
  font-weight: 500;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.section__about .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 40px 0px;
  gap: 40px;
}

.about__txt {
  text-align: center;
}

.about__txt_2 {
  text-align: left;
  margin-top: 32px;
  border-top: 1px solid #000000;
  padding: 24px;
  padding-top: 48px;
}

.about__txt_2 .about__desc {
  text-align: left;
}
.about__txt_2 .about__desc__ttl {
  text-align: center;
}
.about__img {
  position: relative;
  left: 80px;
}

.about__img__logo {
  top: -190px;
  left: 0;
  transform: translateX(-50%);
  position: absolute;
  max-width: 120px;
  z-index: 20;
}

.about__img__photo__01 {
  position: relative;
  top: -100px;
  left: 10px;
  width: 320px;
  z-index: 10;
  border: 1px solid rgb(236, 236, 236);
  max-width: 320px;
  display: none;
}

.about__img__photo__02 {
  position: relative;
  top: -200px;
  width: 280px;
  z-index: 10;
  border: 1px solid rgb(236, 236, 236);
}

.section__about 
@media screen and (max-width: 768px) {
  .about__img__photo__02 {
    position: relative;
    top: -24px;
    width: 160px;
    z-index: -2;
    border: 1px solid rgb(236, 236, 236);
  }
  .about__img__logo {
    top: -16px;
    left: 0;
    transform: translateX(-50%);
    position: absolute;
    max-width: 80px;
    z-index: 20;
  }
}
.about__ttl {
  font-size: 2.6rem;
  padding: 32px 0;
}

.about__desc {
  line-height: 3.0rem;
  text-align: center;
}

.about__desc p {
  margin-bottom: 24px;
}

/* PRODUCTS */
.products__item {
  position: relative;
  width: 100%;
  height: 100vh;
  /* 画面いっぱいに */
  overflow: hidden;
}

.products__bgimages {
  display: flex;
  width: 100%;
  height: 100%;
}

.products__bgimages__item {
  flex: 1;
  /* 左右均等に */
  overflow: hidden;
}

.products__bgimages__item:nth-child(2) {
  display: none;
}

.products__bgimages__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
  transform: scale(1);
  transition: transform 10s ease-out;
}

.products__bgimages__item img.is-kenburns {
  animation: kb-zoom 10s ease-out both;
}

@keyframes kb-zoom {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.products__ttl {
  position: absolute;
  top: 10%;
  right: 10%;
  display: grid;
  place-items: start center;
  z-index: 10;
  color: #fff;
}

.products__ttl__content {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2.8rem;
  line-height: 2.2;
  letter-spacing: 0.2em;
  white-space: nowrap;
  word-break: keep-all;
  text-wrap: nowrap;
  inline-size: max-content;
}

.products__ttl__content span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.products__ttl__content.is-active span {
  opacity: 1;
  transform: translateY(0);
}

.products__txt {
  position: absolute;
  bottom: 64px;
  left: 50%;
  /* ← 左10%ではなく中央に配置 */
  transform: translate(-50%, 8px);
  /* ← 下から8px上にフェードアップ開始 */
  z-index: 20;
  color: #fff;
  width: 80%;
  max-width: 320px;
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
}

.products__txt.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.products__txt .products__name {
  font-size: 6rem;
  line-height: 7.4rem;
  letter-spacing: 0.08em;
}

.products__txt .products__desc {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 1em;
}

.products__txt .products__btn a {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.3px;
  border-radius: 3px;
  padding: 2px 12px;
  border: 1px solid #e3e3e3;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.products__txt .products__btn a:hover {
  background: #fff;
  color: #000;
}

/* ProductImage */
.scroll-wrapper {
  display: flex;
  overflow: hidden;
}

.productimage {
  display: flex;
  flex-shrink: 0;
  /* 幅を縮めない */
  animation: scroll-left 30s linear infinite;
  margin-bottom: 80px;
}

.productimage img {
  width: auto;
  height: auto;
  max-height: 210px;
  /* 必要に応じて高さ制御 */
  object-fit: contain;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* ============================================== */
/* モバイル横スライドのためのCSS (max-width: 768px) */
/* ============================================== */
@media screen and (max-width: 768px) {

  /* ---------------------------------- */
  /* A. 親要素 (ul.products__list) の設定 */
  /* ---------------------------------- */
  .products__list {
    display: flex; /* 子要素を横並びにする */
    overflow-x: scroll; /* 横スクロールを可能にする */
    overflow-y: hidden; /* 縦スクロールは禁止 */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
    scroll-snap-type: x mandatory; /* ぴったりとしたスナップ（停止）を有効にする */
    width: 100vw; /* ビューポート幅いっぱいに設定 */
    height: 100vh; /* 高さも画面いっぱいに維持 */
    will-change: transform;
  }
  
  /* ---------------------------------- */
  /* B. 子要素 (li.products__item) の設定 */
  /* ---------------------------------- */
  .products__item {
    /* 必須: 横スライドのアイテム幅を画面幅に固定 */
    width: 100vw; 
    flex-shrink: 0; /* 幅が縮まないように固定 */
    height: 100vh; /* 高さの維持 */
    scroll-snap-align: start; /* スクロール停止位置をアイテムの開始位置にスナップ */
    /* 既存の position: relative; は維持 */
  }

  /* ---------------------------------- */
  /* C. 背景画像の調整 */
  /* ---------------------------------- */
  /* モバイルでは背景画像を1枚表示に戻す（PCと同じ挙動） */
  .products__bgimages {
    /* 既存の display: flex; は維持 */
  }
  .products__bgimages__item {
    flex: 1 0 100%; /* 100%幅で1枚目を表示 */
  }
  .products__bgimages__item:nth-child(2) {
    /* 2枚目以降を非表示にするか、Flexコンテナの幅に収める */
    display: none; 
  }

  /* ---------------------------------- */
  /* D. テキスト位置の調整（読みやすさ重視） */
  /* ---------------------------------- */
  /* キャッチコピーの位置を調整 */
  .products__ttl {
    top: 10%;
    right: auto; /* 右端固定を解除 */
    left: 50%;
    transform: translateX(-50%);
  }

  /* 本文の位置を調整 */
  .products__txt {
    bottom: 30px; /* 下部からの位置を調整 */
    width: 90%; /* 幅を広げて読みやすくする */
  }
}

/* ============================================== */
/* 横スライド示唆インジケーター（モバイル専用） */
/* ============================================== */

.swipe-indicator {
  display: none;
}
@media screen and (max-width: 768px) {
    
    .swipe-indicator {
        /* 配置: 左下隅に固定 */
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #fff;
        font-size: 1.0rem;
        letter-spacing: 2px;
        font-family: "Castoro Titling", serif;
        opacity: 0.7;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        z-index: 100;
        width: auto;
    }

    /* 横線の設定 */
    .swipe-indicator::after {
        content: "";
        display: block;
        height: 1px; /* 線の太さ */
        width: 60px; /* 線の長さ */
        background: #fff; /* 線の色 */
        animation: slideLine 1.5s infinite; /* アニメーション適用 */
        transform-origin: left; /* 左端を基準に伸縮 */
    }

    /* 線が伸び縮みするアニメーション（横方向） */
    @keyframes slideLine {
        0% {
            transform: scaleX(0);
            transform-origin: left;
        }
        50% {
            transform: scaleX(1);
            transform-origin: left;
        }
        50.1% {
            transform: scaleX(1);
            transform-origin: right;
        }
        100% {
            transform: scaleX(0);
            transform-origin: right;
        }
    }
}

/* ONLINESHOP */
.onlineshop {
  margin: 80px 0;
}

.onlineshop a {
  display: block;
}

.onlineshop img {
  margin: auto;
  border-radius: 3px;
  width: 90%;
}

/* NEWS */
.section__news {
  min-height: 400px;
}

.news__list {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  width: 100%;
  position: relative;
  left: 320px;
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: #bebebe transparent;
  /* Firefox */
}

/* Chrome / Safari */
.news__list::-webkit-scrollbar {
  height: 8px;
  /* 横スクロールバーの太さ */
}

.news__list::-webkit-scrollbar-track {
  background: transparent;
  /* 背景 */
}

.news__list::-webkit-scrollbar-thumb {
  background: #aaa;
  /* スクロール部分 */
  border-radius: 4px;
}

.news__list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.news__item {
  display: flex;
  gap: 16px;
  padding: 10px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 320px;
}

.news__item img {
  max-width: 120px;
  height: auto;
}
.news__item__meta {
  display: flex;
  gap: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

.news__category {
  padding: 0 8px;
  background-color: #565656;
  color: #ffffff;
  font-weight: 200;
  border-radius: 2px;
}

.news-swiper .swiper-slide {
  width: auto !important;
  /* ← Swiperのwidth:100%を打ち消す */
}

.news-swiper {
  position: relative;
  left: 24px;
  margin-top: 24px;
}

.sp {
  display: block;
}
.pc {
  display: none;
}

.about__desc__img {
  width: 100%;
}

.about__desc__img img {
  width: 100%;
}

/* ===== PC幅での最大サイズ維持 ===== */
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
  .section__inner {
    width: 100%;
    max-width: 1000px;
    padding: 32px;
    margin: auto;
  }

  .logo2 {
    width: auto;
    max-width: 160px;
    display: block;
  }

  .logo {
    width: auto;
    max-width: 300px;
  }

.about__catch {
    /* 1. 縦書きの設定 */
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    text-orientation: upright; 
    top: 80px;
    left: 0;
    font-size: 6rem;
    white-space: nowrap;
    line-height: 1.5; 
}

/* 欧文部分 (span) の設定は不要 */
.about__catch span {
    text-orientation: sideways;
    letter-spacing: 5px;
    transform: translateX(10px); 
}

  .section__about .section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 80px 32px;
    gap: 24px;
  }

  .about__txt {
    min-width: 580px;
  }

  .about__img {
    position: relative;
    left: -80px;
  }

  .about__img__photo__01 {
    position: relative;
    top: -100px;
    min-width: 600px;
    z-index: 10;
    border: 1px solid rgb(236, 236, 236);
    display: block;
  }

  .about__img__photo__02 {
    position: relative;
    top: -200px;
    width: auto;
    left: 20%;
    z-index: 10;
    border: 1px solid rgb(236, 236, 236);
  }

  .about__img__logo {
    top: -120px;
    left: 0%;
    transform: translateX(-50%);
    position: absolute;
    max-width: 120px;
    z-index: 20;
  }


  .products__bgimages__item:nth-child(2) {
    display: block;
  }

  .products__txt {
    left: 64px;
    /* 左寄せ配置 */
    width: auto;
    text-align: left;
    transform: translateY(8px);
    /* 下方向に8px（中央補正は不要） */
  }

  .products__txt.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* ← Y軸だけ上がる。中央補正は削除！ */
  }

  .products__ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: start center;
    z-index: 10;
    color: #fff;
  }

  .news__item {
    display: flex;
    gap: 24px;
    padding: 24px;
    flex: 0 0 auto;
    width: 640px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 540px;
  }

  .news-swiper {
    position: relative;
    left: 320px;
    margin-top: 24px;
  }
  .news__item img {
    max-width: 160px;
    height: auto;
  }
  .productimage img {
    width: auto;
    height: auto;
    max-height: 300px;
    /* 必要に応じて高さ制御 */
    object-fit: contain;
  }
  .onlineshop img {
    margin: auto;
    border-radius: 3px;
    max-width: 1180px;
    width: 80%;
  }

  .onlineshop {
    margin: 120px 0;
  }
}