@charset "utf-8";

/* ===== Radial Menu Overlay ===== */
.menu-toggle { 
	position:fixed;
	color: #FFB1B1;
	background: #fff;
	font-size: 30px;
	font-family: "carlmarx", sans-serif;
	font-weight: 400;
	font-style: normal;
	padding: 5px 10px;
	top:12px;
	right: 70px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	z-index: 30;
}

/* 画面全体のオーバーレイ */
.radial {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9990;
}
.radial.is-open { display: block; }
body.modal-open { overflow: hidden; }

/* 黒の半透明背景（クリックで閉じる） */
.radial .backdrop{
  position:absolute; inset:0;
  background: rgba(230,230,230,.95);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: auto; /* ← 有効 */
}
.radial.is-open .backdrop{ opacity: 1; }

/* 円配置コンテナ */
.radial-wrap{
  position:absolute;
  top:50%; left:50%;
  width: min(70vmin, 420px);
  height: min(70vmin, 420px);
  transform: translate(-50%,-50%);
  pointer-events: none; /* 背景クリックを拾えるように */
}

/* バブル共通 */
.bubble{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; 
  font-family: "Zen Maru Gothic", sans-serif;font-weight: 500;font-style: normal;
  background: #FFB1B1;
  border: 5px solid #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  line-height:1.2;
  pointer-events: auto;      /* クリック可能に戻す */
  transform: translate(-50%,-50%) scale(0);
  transition: transform .45s cubic-bezier(.22,.9,.24,1.12), opacity .3s ease;
  opacity: 0;
  will-change: transform, opacity;
}
.radial-wrap a{
	color:#712930;
}

/* 中央の大きいバブル */
.bubble.center{
  top:50%; left:50%;
  width: clamp(160px, 36vmin, 240px);
  height: clamp(160px, 36vmin, 240px);
  font-size: clamp(24px, 3.2vmin, 30px);
  font-weight: 700;
}

/* 円周のバブル配置（回転→半径移動→回転戻し） */
.bubble.ring{
  --r: clamp(120px, 28vmin, 170px);
  top: 50%;
  left: 50%;
  width: clamp(56px, 12vmin, 84px);
  height: clamp(56px, 12vmin, 84px);
  font-size: clamp(14px, 2.0vmin, 18px);
  transform:
    translate(-50%, -50%)
    rotate(calc(-1 * var(--angle)))     /* ← 角度反転 */
    translate(var(--r))
    rotate(var(--angle))                /* ← 向きを戻す */
    scale(0);
}

/* オープン時の出現 */
.radial.is-open .bubble.show-immediate{
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}
.radial.is-open .bubble.ring.show{
  transform:
    translate(-50%,-50%) rotate(var(--angle))
    translate(var(--r)) rotate(calc(-1 * var(--angle)))
    scale(1);
  opacity: 1;
}

/* ホバー演出 */
.bubble:hover{
  transform: translate(-50%,-50%) scale(1.06);
}
.radial.is-open .bubble.ring.show:hover{
  transform:
    translate(-50%,-50%) rotate(var(--angle))
    translate(var(--r)) rotate(calc(-1 * var(--angle)))
    scale(1.06);
}

/* ちょい演出（入場時の弾み） */
@media (prefers-reduced-motion: no-preference){
  .radial.is-open .bubble.center { transition-duration:.38s; }
  .radial.is-open .bubble.ring.show { transition-duration:.5s; }
}