body{
  color:rgb(244, 244, 244);
  padding-top:0;
}

/* 固定背景 */
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:
  url("../img/orangeback.webp"),
  url("../img/perple.webp"),
  url("../img/skyblue.webp"),               /* 上層 */
  linear-gradient(to right, #ffffff, #ffa1e0);
  background-repeat: no-repeat;
  background-size: cover;      /* 画像を画面全体に拡大 */
  background-position: center; /* 画像の位置 */
  z-index: -1; /* ヘッダーやコンテンツの背面に配置 */
}
body {
  width: 100vw;
  height: 100vh;
  padding-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
  url("../img/orangeback.webp"),
  url("../img/perple.webp"),
  url("../img/skyblue.webp")              /* 上層 */
  linear-gradient(to right, #ffffff, #150118);
  background-repeat: no-repeat;
  background-size: cover;      /* 画像を画面全体に拡大 */
  background-position: center; /* 画像の位置 */
  color:rgb(62, 3, 55);
}

h1 {
  position: absolute;
  top: 15vh;
  left: 10vw;
  color: #000000;
  font-size: clamp(16px, 2vw + 1rem, 48px);
  text-align: left;
}

/* メニュー本体にサイズを設定 */
.menu {
  position: relative;
  width: 70vw;   /* メニュー全体のサイズ */
  height: 70vh;  /* メニュー全体のサイズ */
}

/* トグルボタン非表示 */
.menu-toggler {
  display: none;
}

/* label中央配置 */
.menu-toggler + label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  opacity: 0.8;
}

/* ボタン画像 */
.btn-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}
.btn-img.opened { opacity: 0; }
.menu-toggler:checked + label .btn-img.closed { opacity: 0; }
.menu-toggler:checked + label .btn-img.opened { opacity: 1; }

/* メニューリスト */
.menu ul {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* メニューアイテム */
.menu-item {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px; /* 半分サイズで中央基準 */
  opacity: 0;
  transform-origin: 30px 30px;
  transition: transform 0.5s, opacity 0.5s;
}

.menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background: rgba(133, 28, 132, 0.2);
  color: rgba(40, 1, 41, 0.7);
  font-size: 30px;
  text-decoration: none;
  pointer-events: none;
  transition: transform 0.3s ease, color 0.3s ease;
  pointer-events: none; /* 初期状態はクリック不可 */
}

.menu-toggler:checked ~ ul .menu-item a {
  pointer-events: auto; /* 展開後はクリック可能 */
}

.menu-item a:hover {
  background: rgba(133, 28, 132, 0.2);
  color: rgba(40, 1, 41, 0.9);
  transform: scale(1.3);
  font-size: 34px;
}

.menu-item span {
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-item a:hover span {
  opacity: 1;
  transform: translateY(0);
}
/* 展開アニメーション */
.menu-toggler:checked ~ ul .menu-item {
  opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) { transform: rotate(0deg) translateX(180px) rotate(0deg); }
.menu-toggler:checked ~ ul .menu-item:nth-child(2) { transform: rotate(60deg) translateX(180px) rotate(-60deg); }
.menu-toggler:checked ~ ul .menu-item:nth-child(3) { transform: rotate(120deg) translateX(180px) rotate(-120deg); }
.menu-toggler:checked ~ ul .menu-item:nth-child(4) { transform: rotate(180deg) translateX(180px) rotate(-180deg); }
.menu-toggler:checked ~ ul .menu-item:nth-child(5) { transform: rotate(240deg) translateX(180px) rotate(-240deg); }
.menu-toggler:checked ~ ul .menu-item:nth-child(6) { transform: rotate(300deg) translateX(180px) rotate(-300deg); }

@media screen and (max-width: 767px) {
  .menu-toggler + label {
  width: 60px;
  height: 60px;
  }

  .menu-toggler:checked ~ ul .menu-item:nth-child(1) { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  .menu-toggler:checked ~ ul .menu-item:nth-child(2) { transform: rotate(60deg) translateX(120px) rotate(-60deg); }
  .menu-toggler:checked ~ ul .menu-item:nth-child(3) { transform: rotate(120deg) translateX(120px) rotate(-120deg); }
  .menu-toggler:checked ~ ul .menu-item:nth-child(4) { transform: rotate(180deg) translateX(120px) rotate(-180deg); }
  .menu-toggler:checked ~ ul .menu-item:nth-child(5) { transform: rotate(240deg) translateX(120px) rotate(-240deg); }
  .menu-toggler:checked ~ ul .menu-item:nth-child(6) { transform: rotate(300deg) translateX(120px) rotate(-300deg); }
}

/* ============================================= */

.pulse-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ff4d4d;
  color: white;
  font-size: 24px;
  border: none;
  cursor: pointer;
  animation: pulse 1.5s infinite;
  transition: transform 0.2s;
}

@keyframes pulse {
  10% { transform: scale(1); }
  30% { transform: scale(1.1); }
  60% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.pulse-button:hover {
  transform: scale(1.2);
}

/* ============================================= */
/* .icon-nav li>a>i {
  font-size: 2rem;
  transition: transform 0.3s ease;
} */



/* small {
  position: fixed;
  bottom: 5%;
  left: 70%;
  font-size: 0.8rem;
} */