@charset "UTF-8";

:root {
  --main-font: "Yuji Syuku", serif;
  --font-color: #231815;
  --main-color: rgb(255, 246, 241);
  --sub-color:#CCC;
  --subfont-color: rgb(230, 220, 210);
  --img-width: clamp(500px, 60dvw, 800px); /* 画像の横幅（ここを変えるとサイズが変わります） */
  --img-height: 70dvh;
  --img-aspect: 3 / 2; /* アスペクト比 */
  --radius: 200dvh; /* 回転半径（画面中央から軸までの距離） */
  --speed: 15s; /* 1回転にかかる時間 */
}

body {
  margin: 0;
  overflow-x: hidden;
}

.gallery {
  width: var(--img-width);
  aspect-ratio: var(--img-aspect);
  position: relative;
  /* 軸が近い場合、少し下に配置すると収まりが良い */
  transform: translateY(30dvh);
}

@media (orientation: portrait) {
  .gallery {
    height: var(--img-height);
    width: auto;
  }
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center calc(var(--radius));
  animation: rotate-quick var(--speed) cubic-bezier(0.7, 0, 0.2, 1) infinite;
  opacity: 0;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* タイミングの分配 */
.item:nth-child(1) {
  animation-delay: 0s;
}
.item:nth-child(2) {
  animation-delay: calc(var(--speed) / -3);
}
.item:nth-child(3) {
  animation-delay: calc(var(--speed) / -3 * 2);
}

@keyframes rotate-quick {
  0% {
    transform: rotate(80deg); /* 軸が近いので角度は深めに */
    opacity: 0;
  }
  /* 素早く登場してピタッと止まる */
  5%,
  28% {
    transform: rotate(0deg);
    opacity: 1;
  }
  /* 素早く退場 */
  33.33% {
    transform: rotate(-80deg);
    opacity: 0;
  }
  100% {
    transform: rotate(-80deg);
    opacity: 0;
  }
}

.shape-container {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  z-index: 3;
  pointer-events: none;
}

#bell-curve-svg {
  width: 100%;
  height: 100%;
  display: block; /* 余白を消すため */
}

.bell-shape {
  fill: var(--main-color);
  stroke: none;
}

/* 文字や画像が選択されて青くなるのを防ぐ */
.shape-container,
#bell-curve-svg,
#bell-text {
  user-select: none; /* テキスト選択不可 */
  -webkit-user-select: none; /* Safari/Chrome用 */
  -webkit-user-drag: none; /* 画像ドラッグ不可 (Safari/Chrome) */
  touch-action: none; /* スクロールやズームの干渉を防ぐ（必要に応じて）*/
}

.top-txt,
.hero-txt,
.gallery {
  -webkit-user-drag: none;
  pointer-events: none; /* 画像へのタッチを背後に通す */
}

/* ボタンのスタイル */
.hamburger {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 50px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  margin-bottom: 8px;
  transition: all 0.3s;
}

/* メニュー本体 */
.nav-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 40vw;
  height: 100vh;
  padding:5%;
  background-color: var(--main-color);
  z-index: 90;
  padding-top: 100px;
  transform: translateX(100%); /* 初期は右側に隠す */
  transition: transform 0.3s ease-in-out;
}

.nav-menu ul {
  padding: 0;
}

.nav-menu li {
  margin-top: 5dvh;
  text-align: center;
  text-decoration: none;
  color: var(--font-color);
  font-family: var(--main-font);
  font-weight: bold;
  font-size: clamp(0.7rem, 3dvw,2rem);
}

/* 背景暗幕 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 80;
}

/* --- アクティブ状態（JSでクラスを付与） --- */
.nav-menu.is-active {
  transform: translateX(0);
}

.overlay.is-active {
  display: block;
}

/* ボタンを「×」にするアニメーション */
.hamburger.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

@media (orientation: portrait) {
  .hamburger {
    display: block;
  }
  .nav-menu {
    display: block;
  }
}

/* ラッパー */
.menu-wrapper {
  position: relative;
  width: 75dvw;
  height: 75dvh;
  margin: 0 auto;
  max-width: 1200px; /* PCでの最大幅制限 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 表示エリア（窓）：はみ出しを隠す */
.menu-window {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 8px; /* 角丸調整 */
  overflow: hidden;
}

/* トラック（動く部分） */
.menu-track {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 20px; /* PC時の隙間 */
}

/* メニューアイテム */
.menu-item {
  background: transparent; /* パディング調整用 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* PC時は3分割 */
  flex: 0 0 calc(33.333% - 13.33px); /* gapを考慮した幅計算 */
  width: calc(33.333% - 13.33px);
}

.menu-item .content {
  background: #fff;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

/* 矢印ボタン */
.nav-btn {
  display: none; /* PCでは非表示 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--sub-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
}
.nav-btn:hover {
  background-color: #fff;
}
.prev-btn {
  left: -20px;
} /* コンテナの外に出す調整 */
.next-btn {
  right: -20px;
}

/* ページネーション（ドット） */
.pagination {
  display: none; /* PCでは非表示 */
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot.active {
  background-color: #333;
}

/* =========================================
   レスポンシブ設定 
   ========================================= */
/* =========================================
   スマホ・タブレット (縦向き：ポートレート)
   ========================================= */
@media (orientation: portrait) {
  .menu-track {
    gap: 0; /* JS計算用にgapなし */
  }

  .menu-item {
    /* 1つで幅100% */
    flex: 0 0 100%;
    width: 100%;
    padding: 0 10px; /* 左右に隙間を作る */

    /* PC用の線が出ないように念のためリセット */
    position: static;
  }

  .menu-item::after {
    display: none;
  }

  /* 矢印とドットを表示 */
  .nav-btn {
    display: block;
  }
  .pagination {
    display: flex;
  }

  /* 矢印の位置を微調整（画面内に入れる） */
  .prev-btn {
    left: 10px;
  }
  .next-btn {
    right: 10px;
  }
}

/* =========================================
   PC (横向き：ランドスケープ)
   ========================================= */
@media (orientation: landscape) {
  /* クローンとアニメーションのリセット */
  .menu-item.clone {
    display: none !important;
  }
  .menu-track {
    transform: none !important;
    transition: none !important;

    /* 【変更点】gapを0にして、paddingで隙間を管理する */
    gap: 0;
  }

  /* 【追加】PC用のレイアウトと点線の設定 */
  .menu-item {
    /* 3分割 */
    flex: 0 0 33.333%;
    max-width: 33.333%;

    /* 左右に10pxずつ余白 = 合計20pxの隙間 */
    padding: 0 10px;

    /* 線を配置するための基準点 */
    position: relative;
  }

  /* 【追加】点線の描画 */
  .menu-item::after {
    content: "";
    position: absolute;
    top: 5%; /* 上の余白 */
    bottom: 5%; /* 下の余白 */
    right: 0; /* 右端（＝次の要素とのちょうど中間）に配置 */
    width: 0;
    border-right: 2px dotted #ccc; /* 点線の色とスタイル */
    z-index: 1;
  }

  /* 【追加】一番右（Menu 3）の線だけ消す
     ※JSで末尾にクローンが追加されているため、
     DOM上では「最後から2番目」が表示上の最後になります。 */
  .menu-item:nth-last-child(2)::after {
    display: none;
  }
}