/* ────────────── リセット ────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ────────────── 全体 ────────────── */
body {
  font-family: "MS Gothic", "DotGothic16", monospace;
  background: black;
  background-image: url('image/sky5.gif');
  min-height: 100vh;
}

/* ────────────── 中央ラッパー ────────────── */

.wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0.5vw;
  background: none;
  border-radius: 16px;
  overflow: hidden;
}

/* ────────────── ヘッダー ────────────── */
header {
  background: none;
  height: clamp(10px, 1vh, 20px);
  padding: 0;
  margin: 0;
}

/* ────────────── ナビ ────────────── */
nav {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 1vw;
margin-bottom: 1vw;
padding: 1vw;
}

nav a {
flex: 1;
text-align: center;
min-width: 0;
text-decoration: none;
padding: 1vw 1.1vw;
background: rgba(255,255,255,0.38);
color: #ffffff;
font-size: clamp(5px,1.4vw,13px);
font-weight: bold;
border-radius: 20px;
border: 1px solid rgba(210,220,220,0.8);
box-shadow:
0 4px 12px rgba(20,40,45,0.25),
inset 0 2px 5px rgba(255,255,255,0.95),
inset 0 -5px 8px rgba(80,100,120,0.15);
white-space: nowrap;
position: relative;
overflow: hidden;
}

/* ===== ボタン===== */

/* ① ピンク */
nav a:nth-child(1) {
  background: linear-gradient(
    to bottom,
    rgba(255,190,215,0.02) 0%,
    rgba(255,190,215,0.10) 35%,
    rgba(255,190,215,0.60) 100%
  );

  text-shadow:
    0 2px 1px rgba(80,55,65,0.90);
}


/* ② 黄色 */
nav a:nth-child(2) {
  background: linear-gradient(
    to bottom,
    rgba(255,235,170,0.02) 0%,
    rgba(255,235,170,0.10) 35%,
    rgba(255,235,170,0.60) 100%
  );

  text-shadow:
    0 2px 1px rgba(75,68,48,0.90);
}


/* ③ 緑 */
nav a:nth-child(3) {
  background: linear-gradient(
    to bottom,
    rgba(190,235,195,0.02) 0%,
    rgba(190,235,195,0.10) 35%,
    rgba(190,235,195,0.60) 100%
  );

  text-shadow:
    0 2px 1px rgba(40,60,45,0.90);
}


/* ④ 青 */
nav a:nth-child(4) {
  background: linear-gradient(
    to bottom,
    rgba(175,220,250,0.02) 0%,
    rgba(175,220,250,0.10) 35%,
    rgba(175,220,250,0.60) 100%
  );

  text-shadow:
    0 2px 1px rgba(35,52,65,0.90);
}


/* ⑤ 紫 */
nav a:nth-child(5) {
  background: linear-gradient(
    to bottom,
    rgba(215,195,245,0.02) 0%,
    rgba(215,195,245,0.10) 35%,
    rgba(215,195,245,0.60) 100%
  );

  text-shadow:
    0 2px 1px rgba(55,48,65,0.90);
}

/* ⑥ 白 */
nav a:nth-child(6) {
background: linear-gradient(
to bottom,
rgba(255,255,255,0.02) 0%,
rgba(255,255,255,0.10) 35%,
rgba(255,255,255,0.60) 100%
);

text-shadow:
0 2px 1px rgba(65,70,70,0.80);
}

/* ===== ボタン上部のハイライト ===== */

nav a::before {
content: "";
position: absolute;

left: 7%;
top: 3%;
width: 86%;
height: 48%;

border-radius: 18px;

background: linear-gradient(
to bottom,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.50) 35%,
rgba(255,255,255,0.12) 70%,
rgba(255,255,255,0) 100%
);

pointer-events: none;
}

/* ① ピンク */
nav a:nth-child(1):hover,
nav a:nth-child(1):active {
  background: linear-gradient(
    to bottom,
    #ffd3e3 0%,
    #ffb1cb 18%,
    #ed82aa 50%,
    #d95d8d 75%,
    #c84678 100%
  );
}

/* ② 黄色 */
nav a:nth-child(2):hover,
nav a:nth-child(2):active {
  background: linear-gradient(
    to bottom,
    #fff1b8 0%,
    #ffe48a 18%,
    #f4ca4f 50%,
    #ddb12e 75%,
    #c59820 100%
  );
}

/* ③ 緑 */
nav a:nth-child(3):hover,
nav a:nth-child(3):active {
  background: linear-gradient(
    to bottom,
    #d7f5d9 0%,
    #b4e9b9 18%,
    #82cf8a 50%,
    #5dbd68 75%,
    #45a852 100%
  );
}

/* ④ 青 */
nav a:nth-child(4):hover,
nav a:nth-child(4):active {
  background: linear-gradient(
    to bottom,
    #b9f3ff 0%,
    #7ddbed 18%,
    #45bfd9 50%,
    #239dbd 75%,
    #1685a6 100%
  );
}

/* ⑤ 紫 */
nav a:nth-child(5):hover,
nav a:nth-child(5):active {
  background: linear-gradient(
    to bottom,
    #eadcff 0%,
    #d5c0f5 18%,
    #b69bdd 50%,
    #9674c3 75%,
    #7955aa 100%
  );
}

/* ⑥ 白 */
nav a:nth-child(6):hover,
nav a:nth-child(6):active {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 25%,
    #f5f5f5 55%,
    #e5e5e5 78%,
    #d5d5d5 100%
  );
}

/* ===== ホバー・クリック時のハイライト ===== */

nav a:hover::before,
nav a:active::before {
  left: 7%;
  top: 3%;
  width: 86%;
  height: 48%;
  border-radius: 18px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.50) 35%,
    rgba(255,255,255,0.12) 70%,
    rgba(255,255,255,0) 100%
  );

  pointer-events: none;
}



/* ────────────── メインレイアウト ────────────── */
.flex.main-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 1vw;
  align-items: stretch;
}

/* ===== 左サイドバー：2割 ===== */
.sidebar {
  flex: 2 1 0;
  min-width: 0;
  background: none;
}

/* ===== 右メイン：8割 ===== */
.main {
  flex: 8 1 0;
  min-width: 0;
}



.main > iframe {

  display: block;

  width: 100%;

  height: 1px; 

  border: none;

  background: transparent;

}


/* ────────────── サイドボックス ────────────── */
.side-box {
  background: #cfcfcf;
  padding: 1vw;
  margin-bottom: 0;
  font-size: clamp(5px,1.1vw,10px);
  word-break: break-word;
  border: 2px solid;
  border-color: #ffffff #888888 #888888 #ffffff;
}

/* ──────────────左タイトル────────────── */

.side-box h3 {
  margin: 0 0 0.6vw -1vw;
  width: calc(100% + 2vw);
  box-sizing: border-box;
  padding: 4px 7px;
  font-size: clamp(5px, 1.4vw, 13px);
  line-height: 1.4;
  color: #555555;
  background: #d1d2d4;
  border: 2px solid;
  border-color:
    #777777
    #ffffff
    #ffffff
    #777777;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #b5b5b5,
    inset -1px -1px 0 #eeeeee;
}

.dai-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
  border-radius: 8px;
}

/* ────────────── チャット ────────────── */

.chat-box {
  aspect-ratio: 3 / 4;
}

.chat-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.chat-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 250%;
  height: 800px;
  transform: scale(0.4);
  transform-origin: bottom left;
}

/* ────────────── バナー ────────────── */
.banner-text {
  font-size: clamp(5px,1.1vw,8px);
}

.banner-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 5px;
}

/* ────────────── 画像全般 ────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ────────────── フッター ────────────── */
footer {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
  background: none;
  color: white;
  padding: 10px;
}

/* 画像の長押し・選択・ドラッグを抑制 */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}