@charset "utf-8";
/* ============================================================
   style.css
   ============================================================ */

/* ===== CSS変数 ===== */
:root {
  --color-bg: #669e91;
}

/* ===== ベース ===== */
html,
body {
  height: 100%;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== LAYOUT =====
   左右 fluid（1fr）、中央 750px 厳密固定
===== */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ===== 左右サイドバー共通 ===== */
.sidebar-left,
.sidebar-right {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;

}

.sidebar-left {
  border-right: 1px solid var(--color-border);
}

.sidebar-right {
  border-left: 1px solid var(--color-border);
}

/* ===== 画像スロット ===== */
.img-slot {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-left .img-slot span {
  width: 94%;
  height: auto;
  display: block;
  min-width: 192px;
}

.sidebar-right .img-slot span {
  width: 79%;
  height: auto;
  display: block;
  min-width: 176px;
}

.img-slot svg {
  opacity: 0.35;
}

.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}



/* ===== CENTER — 750px固定、スクロール ===== */

.main {
  width: 100%;
  max-width: 750px;
}

/* セクション背景 */
.bg {
  background-size: cover;
  background-repeat: no-repeat;
}

.sec01 {
  background-image: url(../images/bg01.webp);
}

.sec02 {
  background-image: url(../images/bg02.webp);
  margin-top: -2px;
}

.sec03 {
  background-image: url(../images/bg03.webp);
  margin-top: -2px;
}

.sec04 {
  background-image: url(../images/bg04.webp);
  margin-top: -2px;
  background-size: contain;
}

.sec05 {
  background-image: url(../images/bg05.webp);
  margin-top: -2px;
}

.img-box {
  position: relative;
  width: 100%;
  height: auto;
}

header {
  position: relative;
}

.swipe-anime {
  position: absolute;
  bottom: 4%;
  right: 11.4%;
  width: 8%;
  height: auto;
  animation-name: swipe;
  animation-duration: 1.1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes swipe {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(20px);
  }
}

.kv-obj {
  position: absolute;
  z-index: 3;
}

.obj01 {
  width: 20%;
  left: -6%;
  top: 60%;
}

.obj02 {
  width: 26.8%;
  right: -9%;
  top: 31%;
}

.obj03 {
  width: 14.5%;
  left: 15%;
  top: 82%;
}

.sec-obj {
  position: absolute;
  width: 21%;
  right: -7%;
  top: 60%;
}

/* ヒーローイメージスライダー */
.slider-pos {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  height: auto;
  z-index: 2;
  /* 追加：後ろの img01 にドットが隠れないように */
}

.kv-door__window {
  position: absolute;
  left: calc(24 / 1289 * 100%);
  top: calc(112 / 2306 * 100%);
  width: calc(1241 / 1289 * 100%);
  height: calc(2194 / 2306 * 100%);
  z-index: 1;
  /* overflow / border-radius は track へ移動 */
}

.kv-door__window .splide,
.kv-door__window .splide__track,
.kv-door__window .splide__list {
  height: 100%;
}

/* 扉の形で切り抜くのはここ */
.kv-door__window .splide__track {
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
  isolation: isolate;
  /* Safari対策 */
}

/* ===== ドットインジケーター（扉の外・下） ===== */
.kv-door__window .splide__pagination {
  position: absolute;
  top: calc(100% + 16px);
  /* 扉の下端から16px下 */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.kv-door__window .splide__pagination li {
  list-style: none;
  line-height: 0;
}

.kv-door__window .splide__pagination__page {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* 完全な円 */
  background: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 表示中のドット */
.kv-door__window .splide__pagination__page.is-active {
  background: #fff100;
}

/* ===スライダーここまで=== */

/* ===アコーディオン（accordionCSS）=== */
.accordion-area {
  background-color: #91543d;
}

.accordion-box {
  background-color: #8a9921;
  width: 82.6%;
  margin: 0 auto;
}

.accordion-contents {
  width: 89.1%;
  margin: 0 auto 5%;
  position: relative;
  cursor: pointer;
}

.accordion-contents img {
  display: block;
  width: 100%;
  height: auto;
}

.acco-img {
  position: relative;
}

/* 矢印 */
.acco-img .acco-arrow {
  position: absolute;
  bottom: 3%;
  right: 10%;
  width: 3%;
  transition: transform 0.4s ease;
}

/* 開閉部分：0fr → 1fr で高さをアニメーション */
.acco-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.acco-body__inner {
  overflow: hidden;
  min-height: 0;
  margin-top: -1px;
}

/* 開いた状態 */
.accordion-contents.is-open .acco-body {
  grid-template-rows: 1fr;
}

.accordion-contents.is-open .acco-arrow {
  transform: rotate(180deg);
}

/* キーボード操作時のフォーカス表示 */
.accordion-contents:focus-visible {
  outline: 2px solid #fff100;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  .acco-body,
  .acco-img .acco-arrow {
    transition: none;
  }
}





/* ===== アニメーション定義 ===== */

/* キーフレーム */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

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

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* アニメーション前の初期状態（非表示） */
[data-anim] {
  opacity: 0;
}

/* 発火したら対応アニメーションを実行 */
[data-anim="fade-in"].animated {
  animation: fadeIn 0.7s ease forwards;
}

[data-anim="fade-up"].animated {
  animation: fadeUp 0.7s ease forwards;
}

[data-anim="fade-down"].animated {
  animation: fadeDown 0.6s ease forwards;
}

[data-anim="zoom-in"].animated {
  animation: zoomIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

[data-anim="slide-right"].animated {
  animation: slideRight 0.65s ease forwards;
}

[data-anim="slide-left"].animated {
  animation: slideLeft 0.65s ease forwards;
}


.btn-top {
  width: 20%;
  max-width: 80px;
  min-width: 50px;
  display: block;
  position: fixed;
  bottom: 3%;
  right: 2%;
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}


/* ===== ページリンクボタン ===== */
.link-btn {
  display: block;
  margin-top: 10%;
}

/* ブロックを順番に遅らせる（stagger） */
[data-anim][data-delay="1"] {
  animation-delay: 0.1s;
}

[data-anim][data-delay="2"] {
  animation-delay: 0.2s;
}

[data-anim][data-delay="3"] {
  animation-delay: 0.3s;
}

[data-anim][data-delay="4"] {
  animation-delay: 0.4s;
}

[data-anim][data-delay="5"] {
  animation-delay: 0.5s;
}


/* イメージマップ画像は縦横比を固定（リンク範囲のズレ防止） */
.sidebar-right .img-slot img {
  height: auto;
  object-fit: initial;
}

/* ===== スマホ用ハンバーガー ===== */
.hamburger {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 310;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #ea623b;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* 3本とも中心に重ねてから、上下にずらす */
.hamburger span {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.hamburger span:nth-child(1) {
  transform: translateY(-7px);
}

.hamburger span:nth-child(3) {
  transform: translateY(7px);
}

/* 開いた状態：中心に戻して回転 → × */
.hamburger.open span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* ===== OVERLAY ===== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 200;
}

.overlay.visible {
  display: block;
}

/* ===== MOBILE (≤750px) ===== */
@media (max-width: 750px) {
  .hamburger {
    display: block;
  }

  .sidebar-left {
    display: none;
  }

  /* 右サイドバー → 右からスライドしてくるメニューに */
  .sidebar-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-bg);
    z-index: 210;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
  }

  .sidebar-right.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  /* メニューを開いている間は背景をスクロールさせない */
  html.is-menu-open {
    overflow: hidden;
  }

  .main {
    width: 100%;
    overflow-x: hidden;
  }

  .btn-top {
    opacity: 0;
    pointer-events: none;
  }

  .btn-top.is-show {
    opacity: 1;
    pointer-events: auto;
  }
}