@charset "utf-8";


body{
 margin: 0; padding: 0; margin-top: 0;

 background-color: #8FFF95;

 width: 100%;                /* 幅をスマホ画面に合わせる */
 height: auto;               /* 高さは中身に合わせて自動 */
 overflow-y: auto;           /* 縦にはみ出たらスクロール */

  margin: 0 auto; /* 中央に寄せる */
  margin-color: #8FFF95;
}


/* スマホ画面（横幅768px以下）での設定 */
@media (max-width: 768px) {
  /* メインコンテンツとサイドバーを包んでいる親要素 */
  .container, .main-wrapper { 
    display: block !important; /* 横並び(flex)をやめて縦に並べる */
  }

  /* メイン部分の幅を100%にする */
  .main-content { 
    width: 100% !important;
    padding: 10px;
  }

  /* 右側にあった「お知らせ」を下に回して読みやすくする */
  .sidebar, .info-bar { 
    width: 100% !important;
    margin-top: 20px;
    padding: 15px;
    /* 縦書き設定を解除して横書きにする（もし設定していたら） */
    writing-mode: horizontal-tb; 
  }

img , video{
     max-width: 100%; /* 親要素の幅（スマホ画面）を絶対に超えない */
     height: auto;    /* 横幅に合わせて高さも自動調整して比率を保つ */
     display: block;  /* 下に余計な隙間ができるのを防ぐ */
     margin: 0 auto;  /* もし中央に寄せたい場合はこれ */
           }
}




body header{
 background-color: #33FF0A;
 border-radius: 16px;
 width: 100%;
}

body header h1{
 border: 5px solid #ddff00 ;text-align: center ;font-size: 200%;
}


body header nav ul{
 border-top: 3px solid #BBFF11;
 border-bottom: 3px solid #BBFF11;
 color: #7c5d48;
 background-color: #CCFF55;
 display: flex;
 justifi-context: center;
}

body header nav ul a{
 justifi-context: center;
 border: 3px solid #CCFF55;
 border-top: 3px solid #BBFF11;
 border-bottom: 3px solid #BBFF11;
 color: #7c5d48;
 background-color: #CCFF55;
 text-decoration: none solid;
}
body header nav a:hover{
 border: 3px solid red;
 text-decoration: underline double #7c5d48 1px;
}




div{
 margin: 0 auto 50px;
 width: auto;
 display: flex;
 background-color: #8FFF95;
}

div main{
 border-radius: 16px;
 flex-basis: 80%;
 background-color:#bbf1ef;
}





div aside{
 border-radius: 16px;
 flex-basis: 20%;
 background-color:#00FFDD;
}

div aside nav{
 border-radius: 16px;
 background-color:#ffffff;
}




aside{
 border-radius: 16px;
 flex-basis: 100%;
}