.banlist{
    width: 100%;
    margin-bottom: 15px;
}
.banlist img {
    width: 80%;
margin-bottom: 15px;
}


/*PC表示*/
@media (min-width: 801px) {
.topimg{
width: 20%;
}
.yume-frame {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 1.5rem;
justify-content:center;
  box-shadow: 0 0 15px rgba(255, 182, 255, 0.6);
  background: linear-gradient(135deg, #ffe6f7, #e0f0ff);
  transition: box-shadow 0.3s ease;
}

.yume-frame:hover {
  box-shadow: 0 0 25px rgba(255, 182, 255, 0.8);
}
div.hidari{
text-align: left; 
  width:40%;
  margin:0 auto;
  padding:30px;
}
.flextop{
display: flex;
flex-direction: row;
width: 60%;
  flex-wrap: wrap;
}
.newsbox{
  margin:0 auto;
  padding:30px;
  justify-content: center;
text-align: left; 
display: flex;
flex-direction: column;
    /*コレ追加*/width: 60%;
}
.menubox{
width:20%;
  margin:0 auto;
  padding:30px;
text-align: left; 
display: flex;
flex-direction: column;
}
}

/*スマホ表示*/
@media (max-width: 800px) {
.topimg{
width: 60%;
}
.yume-frame {
  width: 100%;
  height: 600px;
  border: none;
  border-radius: 0.5rem;
justify-content:center;
  box-shadow: 0 0 15px rgba(255, 182, 255, 0.6);
  background: linear-gradient(135deg, #ffe6f7, #e0f0ff);
  transition: box-shadow 0.3s ease;
}
div.hidari{
text-align: left; 
  width:80%;
  margin:0 auto;
  padding:30px;
}
.flextop{
width: 90%;
}
.newsbox{
  margin:0 auto;
  padding:0px;
text-align: left; 
}
.menubox{
  margin:0 auto;
  padding:30px;
text-align: left; 
display: flex;
flex-direction: column;
}
}


.header-box {
  height: 8%;
}

div.news{
text-align: left; 
  width:80%;
  margin:0 auto;
  padding:30px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, .8);
  z-index: 50;
  display: flex;
  justify-content: space-between;
}

.imgurl{
    display: inline;
}
.logo {
  width: 20%;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  font-weight: 600;
  background-image:url(./log.gif); 
background-size: contain; /*枠の大きさに合わせて画像を拡大縮小する*/
background-repeat: no-repeat;
}
nav {
  width: 100%;
}

ul {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 0;
  padding: 0;
}


.mobile-menu {
  display: none;
  width: 100%;
  height: 20px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 90%;


 background-color:black;
}

.line {
  background-color: white;
  height: 4px;
  width: 100%;
  position: absolute;
  transition: all 0.3s;
}

.line:nth-of-type(1) {
  top: 0;
}

.line:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.line:nth-of-type(3) {
  bottom: 0;
}

/* モバイル用表示切り替え */
@media (max-width: 800px) {
  .mobile-menu {
    display: block;
  }
  .pc-menu {
    display: none;
  }
}


/* 画面幅の10%の幅で画像を表示 */
.topbt {
  width : 10vw ; 
}
img:hover {
  opacity: 0.7; /* 数字小さいほど透明〜 */
}
/* 画面幅の50%の幅で画像を表示 */
.hanbun {width : 50vw ; }
/* 画面幅の15の幅で画像を表示 */
.zenkai {width : 15vw;}
.hyaku{width : 100vw;}
.parent{
  /*positionで画面を覆う*/
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  /*背景は画像のURL*/
  background-image:url(./img/背景.png);
  
  /*背景の位置はアニメーションで動かす*/
  animation: move 3s ease-in forwards;
  
  /*文字表示位置の設定*/
  display:flex;
  align-items:center;
}

/*アニメーションの設定*/
@keyframes move{
  0% {
    background-size:100%;
    background-position:0% 0%;
  }
  100%,100% {
    background-size:130%;
    background-position:100% 100%;
opacity: 0;
		visibility: hidden;
		transition: .4s;
  }
}
/*タイポ*/
h1{
  margin: 0 auto;
  font-family: 'Comic Sans MS', sans-serif;
  font-size:70px;
  padding:15px;
  /*裏面をぼかす*/
  background-color:#000000;
  backdrop-filter:blur(5px);
  /*色のブレンド*/
  color:white;
  mix-blend-mode: overlay;
}

/*余白のリセット*/
*{
  margin:0;
}