/* ------------------------------
   テーマ10種
------------------------------ */
:root {
  --main: #ff8fb0;
  --sub: #ffe3ec;
  --bg: #fff8fc;
  --accent: #ffb6c9;
}

body.theme-1 { --main:#ff8fb0; --sub:#ffe3ec; --bg:#fff8fc; --accent:#ffb6c9; }
body.theme-2 { --main:#7bbcff; --sub:#d8eaff; --bg:#f4f9ff; --accent:#9ccaff; }
body.theme-3 { --main:#7edc8a; --sub:#d8f7dd; --bg:#f4fff6; --accent:#9ff0a8; }
body.theme-4 { --main:#b38bff; --sub:#e8ddff; --bg:#faf7ff; --accent:#c9a8ff; }
body.theme-5 { --main:#7fffe0; --sub:#d8fff4; --bg:#f4fffb; --accent:#a0ffe9; }
body.theme-6 { --main:#ffd86b; --sub:#fff1c9; --bg:#fffaef; --accent:#ffe28f; }
body.theme-7 { --main:#ffb36b; --sub:#ffe0c9; --bg:#fff7ef; --accent:#ffc28f; }
body.theme-8 { --main:#9ea4ad; --sub:#e3e5e8; --bg:#f7f8f9; --accent:#b8bcc2; }
body.theme-9 { --main:#444; --sub:#ddd; --bg:#f5f5f5; --accent:#666; }
body.theme-10 { --main:#ff5f8a; --sub:#ffd1df; --bg:#fff0f5; --accent:#ff7fa3; }

/* index.phpに対して適用させるcss。他のcssとの競合注意 */
html{
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;

}

body{
  overflow-x: hidden;
  width: 100%;
  margin: 0 auto;
  min-width: 375px;
}

main{
  padding: 25px 25px 25px 50px;
  width: calc(100%-25px);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

/* メニュー */
/* モーダル背景 */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 90;
}

/* メニュー本体（左からスライド） */
.menu-panel {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  color: white;
  z-index: 100;
  padding: 20px 10px;
  transition: left 0.3s ease;
}

/* 開いた状態 */
.menu-panel.active {
  left: 0;
}

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

/* メニューの中身 */
/* モーダル背景（初期は非表示） */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;          /* ← 初期は非表示 */
  z-index: 90;
}

/* メニュー本体（初期は画面外） */
.menu-panel {
  position: fixed;
  top: 0;
  left: -300px;           /* ← 初期は完全に隠す */
  width: 280px;
  height: 100vh;
  background: rgba(0,0,0,0.85);
  color: white;
  z-index: 100;
  padding: 20px 10px;
  transition: left 0.3s ease;
}

/* 開いた状態 */
.menu-panel.active {
  left: 0;                /* ← 画面内に入る */
}

.menu-overlay.active {
  display: block;         /* ← モーダル表示 */
}

/* メニューの中身 */
.menu-panel ul {
  list-style: none;
  padding-left: 0;
}

.menu-panel li {
  margin-bottom: 18px;
}

.menu-panel .main_menu button {
  width: 100%;
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.menu-panel .sub_menu button {
  width: 100%;
  background: none;
  border: none;
  color: rgb(210, 210, 210);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

/* 開閉ボタン（初期は左端中央） */
.menu-toggle {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #1e245d8b;      /* ← 閉じている時の背景色 */
  padding: 60px 8px;       /* ← 高さアップ（元8px → 14px） */
  border-radius: 6px;
  cursor: pointer;
  z-index: 110;
  transition: left 0.3s ease, background 0.3s ease;
}


/* メニューが開いたときは右へ移動 */
.menu-toggle.active {
  left: 300px;            /* ← メニュー右側へ移動 */
  background: #4254ff;
}

/* 開いた時の矢印色（白） */
.menu-toggle.active #menuArrow {
  color: #ffffff;
}


/* 閉じている時の矢印色（黄色） */
#menuArrow {
  color: #ffb950;           /* ← 黄色 */
  font-size: 22px;          /* ← 少し大きくして視認性UP */
}



/* footer */
footer #footer{
  /* text-align: center; */
  /* margin-top: 5px; */
  padding: 0;
  background-color: #F9F9F9;
  display: flex;
  position: fixed;
  bottom:0;
  left: 0;
  width: 100vw;
  z-index: 120;
  height:50px ;
  border-top: 1px solid #2a2a2a3e;
}
footer #footer div{
  flex: 1; 
  /* min-width: 0; */
  display: flex;
  justify-content: flex-end;   /* 横方向：右寄せ */
  align-items:center; 
}
footer .admax-ads{
  margin-bottom: 50px;
}
footer #user{
  color: #2a2a2a;
  margin: 0;
  margin-right: 20px;
  font-size: clamp(18px, 1.5vw, 24px);
}
footer #copyright{
  color: #2a2a2a;
  font-size: 18px;
  text-align: center;
  margin-bottom:20px ;
}
footer img{
  width: 40%;
  max-width: 200px;
  min-width: 150px;
}