@media screen and (min-width: 960px) {
  ul.gnav-list {
    display: flex; /* Flexboxを有効化 */
    justify-content: space-between; /* 項目の間に均等なスペースを配置 */
    padding: 0; /* 不要ならばパディングをリセット */
    margin: 0; /* 不要ならばマージンをリセット */
    list-style: none; /* リストマーカーを削除 */
  }
  ul.gnav-list li{
    flex: 1;
    text-align: center;
  }
  ul.gnav-list li a{
    display: block;
    text-decoration: none;
    color: #333;
    text-align: center;
    padding: 8px;
  }
  ul.gnav-list li a:hover {
    background: #ccc;
  }
  .container0{
    width: 1300px;
    height: 800px;
  }
  img{
    width: 1450px;
    height: 800px;
  }
  .opening_message1{
      width: 500px;
      height:500px;
      margin: 0 auto;
      padding: 2em;
      border-radius:20px;
      text-align: center;
      background:linear-gradient(#20a0ff, blue);
  }
  .opening_message2{
    width: 600px;
    margin: 0 auto;
    padding: 2em;
    border-radius:20px;
    background:#20a0ff;
  }
  .opening_message3{
    width: 800px;
    margin: 0 auto;
    padding: 2em;
    border-radius:20px;
    background:#20a0ff;
    font-family:"sans-serif";
  }
  .level1{
      font-size:52px;
     color:white;
  }
  .level2{
    font-size:40px;
    color:white;
  }
  .level3{
    font-size:30px;
    color:white;
  }
  .opening_title{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-55%,20%);
    padding:0;
    margin:0;
    font-size:100px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0px -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .opening_news{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-46%,200%);
    padding:0;
    margin:0;
    font-size:80px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0 -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .extensive_reading{
    margin:50px 20px 20px 550px;
    color:#777
  }
  .caution{
      font-size:25px;
      color:black;
      text-align: center;
  }
    .bt1{
        font-size:20px;
        text-align: center;
    }
}
/* ------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
  ul.gnav-list {
    display: flex; /* Flexboxを有効化 */
    justify-content: space-between; /* 項目の間に均等なスペースを配置 */
    padding: 0; /* 不要ならばパディングをリセット */
    margin: 0; /* 不要ならばマージンをリセット */
    list-style: none; /* リストマーカーを削除 */
  }
  ul.gnav-list li{
    flex: 1;
    text-align: center;
  }
  ul.gnav-list li a{
    display: block;
    font-size: 11px;
    white-space: nowrap;
    text-decoration: none;
    color: #333;
    text-align: center;
    padding: 8px;
  }
  ul.gnav-list li a:hover {
    background: #ccc;
  }
  .container0{
    width: 360px;
    height: 250px;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .opening_message1{
      width: 250px;
      height:250px;
      margin: 0 auto;
      padding: 2em;
      font-size: 10px;
      justify-content: center;
      border-radius:20px;
      text-align: center;
      background:linear-gradient(#20a0ff, blue);
  }
  .opening_message2{
      width: 600px;
      margin: 0 auto;
      padding: 2em;
      font-size: 10px;
      justify-content: center;
      border-radius:20px;
      background:#20a0ff;
  }
  .opening_message3{
      width: 300px;
      margin: 0 auto;
      padding: 2em;
      font-size: 10px;
      justify-content: center;
      border-radius:20px;
      background:#20a0ff;
      font-family:"sans-serif";
  }
  .level1{
      font-size:22px;
     color:white;
  }
  .level2{
    font-size:20px;
    color:white;
  }
  .level3{
    font-size:20px;
    color:white;
  }
  .opening_title{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-400%);
    padding:0;
    margin:0;
    font-size:30px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0px -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .opening_news{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-41%,-250%);
    padding:0;
    margin:0;
    white-space: nowrap;
    font-size:30px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0 -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .extensive_reading{
    margin:50px 20px 20px 550px;
    color:#777
  }
  .caution{
      font-size:15px;
      color:black;
      text-align: center;
  }
    .bt1{
        font-size:20px;
        text-align: center;
    }
}

@media screen and (min-width: 481px) and (max-width: 959px) {
  ul.gnav-list {
    display: flex; /* Flexboxを有効化 */
    justify-content: space-between; /* 項目の間に均等なスペースを配置 */
    padding: 0; /* 不要ならばパディングをリセット */
    margin: 0; /* 不要ならばマージンをリセット */
    list-style: none; /* リストマーカーを削除 */
  }
  ul.gnav-list li{
    flex: 1;
    text-align: center;
  }
  ul.gnav-list li a{
    display: block;
    text-decoration: none;
    color: #333;
    text-align: center;
    padding: 8px;
  }
  ul.gnav-list li a:hover {
    background: #ccc;
  }
  .container0{
    width: 1300px;
    height: 800px;
  }
  img{
    width: 1450px;
    height: 800px;
  }
  .opening_message1{
      width: 500px;
      height:500px;
      margin: 0 auto;
      padding: 2em;
      border-radius:20px;
      text-align: center;
      background:linear-gradient(#20a0ff, blue);
  }
  .opening_message2{
    width: 600px;
    margin: 0 auto;
    padding: 2em;
    border-radius:20px;
    background:#20a0ff;
  }
  .opening_message3{
    width: 800px;
    margin: 0 auto;
    padding: 2em;
    border-radius:20px;
    background:#20a0ff;
    font-family:"sans-serif";
  }
  .level1{
      font-size:52px;
     color:white;
  }
  .level2{
    font-size:40px;
    color:white;
  }
  .level3{
    font-size:30px;
    color:white;
  }
  .opening_title{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-55%,20%);
    padding:0;
    margin:0;
    font-size:100px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0px -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .opening_news{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-46%,200%);
    padding:0;
    margin:0;
    font-size:80px;

    color: #f33;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0 -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  }
  .extensive_reading{
    margin:50px 20px 20px 550px;
    color:#777
  }
  .caution{
      font-size:25px;
      color:black;
      text-align: center;
  }
    .bt1{
        font-size:20px;
        text-align: center;
    }
}