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

/* ────────────── 全体 ────────────── */
body {
  font-family: "MS Gothic", "DotGothic16", monospace;
  background: none;
  min-height: 100vh;
}

/* HOMEの内容 */

#home-content {
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 1vw;
  box-sizing: border-box;
}

/* ────────────── 左 ────────────── */

.main-left {
  flex: 7 1 0;
  min-width: 0;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  box-sizing: border-box;
}

/* スクロールテキスト */
.fuki2-container {
  position: relative;
  width: 100%;
  height: auto;
  background: none;
  box-sizing: border-box;
  overflow: hidden;
}

/* すいっちょ */
.fuki2 {
  width: 100%;
  height: auto;
  display: block;
}

/* スクロールコンテナ */
.scroll-container {
  position: absolute; 
  top: 0; 
  left: 7%; 
  width: 63%; 
  height: 100%; 
  overflow: hidden;
  z-index: 10; 
  display: flex;
  align-items: center;
}

/* スクロールテキスト */
.scroll-text {
  position: absolute;
  white-space: nowrap;
  font-size: clamp(10px,2.5vw,25px);
  color: black;
  text-shadow: 0px 0px 0px rgba(50, 0, 0, 0.3); 
  animation: scroll-right-to-left 18s linear infinite;
 
}

@keyframes scroll-right-to-left {
  0% {
    transform: translateX(17%); 
  }
  100% {
    transform: translateX(-100%);
  }
}
.aisatsu-box {
  background: none;
  color: #fff;
  margin-top: 0;
  border: 1px solid #a9a9a9;
  border-radius: 16px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -80px 80px rgba(130,130,130,0.18);
  box-sizing: border-box;
  overflow: hidden;
}

/* WELCOME・UPDATEタイトル */
.aisatsu-box h3,
.rekishi-box h3 {
  padding: 5px 9px;
  color: #eeeeee;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(220, 220, 220, 0.30) 45%,
      rgba(150, 150, 150, 0.22) 100%
    );

  border: none;
  border-bottom: 2px ridge rgba(100, 100, 100, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow:
    0 1px 1px rgba(40, 40, 40, 0.45);
  font-size: clamp(6px, 1.5vw, 14px);
  line-height: 1.4;
}
.aisatsu-content {
  padding: 10px;
  box-sizing: border-box;
  font-size: clamp(6px, 2vw, 20px);

}

/* ────────────── 歴史・アップデート情報 ────────────── */
.rekishi-box {
  background: none;
  width: 100%;
  margin: 0;
  font-size: clamp(5px, 1.3vw, 13px);
  word-break: break-word;
  border: 1px solid #a9a9a9;
  border-radius: 16px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -80px 80px rgba(130,130,130,0.18);
  box-sizing: border-box;
  overflow: hidden;
}

/* ────────────── UPDATE iframe ────────────── */
.rekishi {
  display: block;
  width: 80%;
  height: clamp(100px, 30vw, 600px);
  margin: 1vw auto;
  padding: 5px;
  box-sizing: border-box;
  border: none;
  background: linear-gradient(
    to right,
    rgba(80, 100, 126, 0.7),
    rgba(202, 209, 223, 0.4),
    rgba(117, 138, 138, 0.2)
  );
  overflow-y: auto;
}

/* ────────────── 右 ────────────── */

.main-right {
  flex: 3 1 0;

  min-width: 0;
  padding: 0;

  display: flex;

  flex-direction: column;
  gap: 1vw;
}



/* ────────────── 訪問カウンター ────────────── */
.counter-box {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 8px 3px;
  box-sizing: border-box;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  font-size: clamp(7px, 2vw, 15px);
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #a9a9a9;
  border-radius: 16px 16px 0 0;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -80px 80px rgba(130, 130, 130, 0.18);
}
.counter-box p {
  color: #ffffff;
}


/* ────────────── カウンター表示枠 ────────────── */

.counter-frame {
  width: 100%;
  max-width: 198px;
  height: 19px; 
  position: relative;
  overflow: hidden;
  margin: 1px auto;
  box-sizing: border-box;
}

/* ────────────── カウンター本体 ────────────── */

.counter-inner {
  position: absolute;
  top: 0;
  left: 50%;

  width: 192px;
  height: 276px;

  transform: translateX(-50%) scale(0.35);
  transform-origin: top center;
}


/* ────────────── Gifypet ────────────── */

.pet-box {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.03;
  height: auto;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-left: auto;
  margin-right: auto;

  align-self: center;

  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #a9a9a9;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -80px 80px rgba(130, 130, 130, 0.18);
}

.pet-iframe {
  display: block;
  flex: 0 0 auto;

  width: 314px;
  height: 321px;

  border: none;
  background: transparent;

  transform: scale(1);
  transform-origin: center center;
}


/* ────────────── 好きな言葉コーナー ────────────── */

.kotoba-box {
  width: 100%;
  min-height: 0;
  position: relative;
  box-sizing: border-box;
  background: transparent;
  color: #fff;
  border: 1px solid #a9a9a9;
  border-radius: 0 0 16px 16px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.9),
    inset 0 -80px 80px rgba(130,130,130,0.18);
  overflow: hidden;
}


/* 言葉コ〜ナ〜タイトル  */
.kotoba-title {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 7px;
  font-size: clamp(5px, 1.3vw, 14px);
  white-space: nowrap; 
  color: #eeeeee;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(220, 220, 220, 0.30) 45%,
      rgba(150, 150, 150, 0.22) 100%
    );
  border: none;
  border-bottom: 2px ridge rgba(100, 100, 100, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow:
    0 1px 1px rgba(40, 40, 40, 0.45);
  line-height: 1.4;
}

/* 言葉内容 */
.kotoba-content {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

#random-kotoba {
  font-size: clamp(7px, 1.5vw, 15px);
  line-height: 1.7;
  color: white;
  word-break: break-word;
}

/*ランダムボタン*/

.kotoba-button-area {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px 10px;
}

#random-kotoba-button {
  padding: 3px 8px;
  font-family: inherit;
  font-size: clamp(5px, 1.2vw, 12px);
  color: #eeeeee;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(220, 220, 220, 0.25) 45%,
      rgba(150, 150, 150, 0.18) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(50, 50, 50, 0.18);
  text-shadow:
    0 1px 1px rgba(40, 40, 40, 0.4);
  cursor: pointer;
}

#random-kotoba-button:active {
  transform: translateY(1px);

  background:
    linear-gradient(
      to bottom,
      rgba(150, 150, 150, 0.25),
      rgba(255, 255, 255, 0.22)
    );
  box-shadow:
    inset 1px 1px 2px rgba(70, 70, 70, 0.25);
}

/* ──────────────音楽プレーヤー ────────────── */

.music-player {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.20) 45%,
      rgba(180,210,215,0.20)
    );
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 18px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.90),
    inset 0 -2px 3px rgba(70,100,110,0.22),
    0 1px 2px rgba(50,80,90,0.25);
}

/*画面*/

.music-display {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 65px;
  padding: 7px 8px;
  box-sizing: border-box;
  background:
    linear-gradient(
      to bottom,
      rgba(245,255,255,0.92),
      rgba(225,240,240,0.75) 50%,
      rgba(200,225,225,0.72)
    );
  border: 1px solid rgba(80,120,130,0.55);
  border-radius: 9px;
  text-align: center;
  font-family:
    "MS Gothic",
    "DotGothic16",
    monospace;
  overflow: hidden;
  box-shadow:
    inset 0 2px 4px rgba(60,90,100,0.22),
    inset 0 -1px 2px rgba(255,255,255,0.85),
    0 1px 1px rgba(255,255,255,0.7);
}


/* 時間 */

#time-display {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(7px, 1.3vw, 12px);
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  text-shadow:
    0 0.8px 0 rgba(100,120,125,0.9);
}

/* プログレスバー*/

.progress-line {
  position: relative;
  width: 85%;
  height: 4px;
  margin: 3px auto;
  box-sizing: border-box;
  background:
    linear-gradient(
      to bottom,
      rgba(70,100,110,0.38),
      rgba(255,255,255,0.55)
    );
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(50,80,90,0.35),
    0 1px 0 rgba(255,255,255,0.75);
}


/* 四角 */

.progress-square {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.95),
      rgba(220,240,240,0.85)
    );
  border: 1px solid rgba(70,110,120,0.65);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,1),
    inset 0 -1px 1px rgba(80,110,120,0.18),
    0 1px 2px rgba(60,90,100,0.30);
}


/*曲名表示エリア*/

#track-info {
  position: relative;
  width: 100%;
  height: 20px;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(8px, 1.5vw, 14px);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  text-shadow:
    0 0.8px 0 rgba(100,120,125,0.9);
}


/* 曲名スクロール*/

.scroll-music {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: max-content;
  max-width: none;
  padding-left: 100%;
  white-space: nowrap;
  animation: scroll-left 8s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


/*音楽ボタン*/

.player-controls {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  box-sizing: border-box;
}

#prev-track,
#play-pause,
#next-track {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  flex: 0 0 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(70,110,120,0.60);
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.95),
      rgba(230,245,245,0.78) 48%,
      rgba(190,220,220,0.72)
    );

  color: #456b72;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.95),
    inset 0 -2px 3px rgba(70,100,110,0.20),
    0 1px 2px rgba(50,80,90,0.30);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

#play-pause {
  width: 42px;
  height: 42px;
  min-width: 42px;
  max-width: 42px;
  flex: 0 0 42px;
  font-size: 16px;
}

#prev-track,
#next-track {
  font-size: 11px;
}

#prev-track:active,
#play-pause:active,
#next-track:active {
  transform: scale(0.92);
  box-shadow:
    inset 0 2px 4px rgba(60,90,100,0.30),
    inset 0 -1px 1px rgba(255,255,255,0.65);
}

#prev-track:hover,
#play-pause:hover,
#next-track:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,1),
      rgba(240,250,250,0.90) 48%,
      rgba(205,230,230,0.82)
    );
}

@media (max-width: 399px) {

  .player-controls {
    gap: 2px;
    margin-top: 5px;
  }

  #prev-track,
  #next-track {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex: 0 0 18px;
    font-size: 7px;
  }

  #play-pause {
    width: 23px;
    height: 23px;
    min-width: 23px;
    max-width: 23px;
    flex: 0 0 23px;
    font-size: 10px;
    padding-top: 3px;
  }

}

@media (min-width: 400px) and (max-width: 599px) {

  .music-player {
    padding: 6px;
  }
  .music-display {
    height: 52px;
    padding: 5px;
  }
  .player-controls {
    gap: 4px;
    margin-top: 6px;
  }
  #prev-track,
  #next-track {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    flex: 0 0 20px;
    font-size: 7px;
  }
  #play-pause {
    width: 26px;
    height: 26px;
    min-width: 26px;
    max-width: 26px;
    flex: 0 0 26px;
    font-size: 11px;
    padding-top: 2px;
  }

}

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

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