body {
  margin: 0;
  background: #fddfdf;
}



.news img{
  position: relative;
  margin-top: 10%;
  margin-left: 25%;
  width: 20%;
  z-index: 5;

}


.back {
  position: relative;
  width: 70%;
  margin-left: 14%;
  margin-top: 10%;
  aspect-ratio: 16 / 16;/* ← 比率固定 */
  background: white;
  z-index: 1;
}





.um {
  position: absolute;
  width: 15%;
  margin-top: -8%;
  margin-left: 40%;
  z-index: 10;
}




/*///////////////////////ボックス//////////////////////////////////////////////////////////////////////////*/
.under-box {
  position: relative;
  width: 100%;
  margin-top: 10%;
  aspect-ratio: 16 / 2;  /* ← 比率固定 */
  background: white;
  z-index: 1;

}

.box {
  display: flex;   
  position: absolute;
  width: 56%;
  margin-top: -55%;
  margin-left: 21%;
  gap: 1rem;   /* px使わない */
  z-index: 5;


}
.box img {
  width: 100%;
  height: auto;
}
.box2 {
  display: flex;   
  position: absolute;
  width: 18%;
  margin-top: -30%;
  margin-left: 21%;
  gap: 1rem;   /* px使わない */
  z-index: 5;


}
.box2 img {
  width: 100%;
  height: auto;
}





/*///////////////////////ミニキャラ/////////////////////////////////////////////////////////////////////////*/
.mmiria {
  position: absolute;
  width: 30%;
  margin-top: -90%;
  margin-left: 70%;
  z-index: 10;
}

.mtukigase {
  position: absolute;
  width: 20%;
  margin-top: -10%;
  margin-left: 5%;
  z-index: 10;
}







/*///////////////////////メニュー//////////////////////////////////////////////////////////////////////////*/
.topmenue {
  display: flex;   
  position: fixed;
  width: 40%;
  margin-top: -7%;
  margin-left: 50%;
  gap: 1rem;   /* px使わない */
  z-index: 50;


}

.topmenue img {
  width: 100%;
  height: auto;
}

.white-box {
  position: fixed;
  width: 100%;
  margin-top: -10%;
  aspect-ratio: 16 / 1.5;  /* ← 比率固定 */
  background: white;
  z-index: 20;
}

.miriwave {
  position: fixed;
  margin-top: -7%;
  margin-left: 5%;
  width: 10%;
  z-index: 50;
}



/*------////////////テキストボックス////////////----------*/
.text-box {
  position: relative;
  font-size: 1.5vh;
  width: 60%;
  height: 10em;          /* px使わない */
  margin: 2em auto;

  overflow-y: auto;      /* ← 縦スクロール */
  padding: 1em;

  border-radius: 0.5em;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);

  line-height: 1.5;
  z-index: 5;
}

.text-box::-webkit-scrollbar {
  width: 0.5em;
}

.text-box::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 1em;
}

.text-box p {
  text-decoration: underline;
}

















/*・・・・・////////////スライダー関係/////////////・・・・・・/
/* 枠 */
.slider {
  width: 70%;
  overflow: hidden;
  margin-left: 15%;
  margin-top: 10%;
  position: relative;
}

/* 横並び */
.slider-track {
  display: flex;
}

/* 1枚 */
.slide {
  min-width: 100%; /* ← これに変更 */
}

/* 画像 */
.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== ボタン ===== */
.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;

  font-size: 2rem;
  padding: 0.5em 0.8em;

  cursor: pointer;
  z-index: 1; /* ← 念のため強化 */
}

/* 左右 */
.prev {
  left: 2%;
}

.next {
  right: 2%;
}