@media (max-width:670px){

    *{
        box-sizing: border-box;
        font-family: sans-serif;
      }
      
      body {
          margin: 0;
          display: flex;
          flex-flow: column;
          min-height: 100vh;
        }
        main {
          background: #ffffff;
          flex: 1;
        }
        
        
        
        /*header開始*/
        header {
            height: 80px;
            width: 100%;
            background-color:black;     
          }
            
          .header-left {
            float: left;
          }
          .logo {
             height: 60px;
             margin: 9px 0 0 5px;
             position:relative;
          } 
          .font{
            height: 40px;
            margin: 10px 0 0 0;
          }
          .SEI{ margin-left:-9px; }
          .FO{ margin-left:-10px; }
          .OT{ margin-left:-10px; }
          .BA{ margin-left:-10px; }
          .LL{ margin-left:-10px; }
          .CL{ margin-left:-11px; }
          .UB{ margin-left:-11px; }
      
      
        .header-center{
            color: white;
            float: left;
            font-size: 35px;
            margin: 0 10px 0 10px;
            line-height: 35px;
            font-family: serif;
        }
        .header-center-second{
          color:  rgb(219,186,133);
          font-family:Impact,'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          font-size: 15px;
          padding: 40px 0 0 0;
          float: left;
          position:absolute;
          left:76px;
        }
        /*header終了*/  
          
          .link-list{
            height:1px;
            width:100%; 
            background-color: white;   
          }
          .link {
            display:none;
          }
         
          .btn{
            display:none;
          } 

          /*ココから*/
          .menu-icon{
            display: block;
          }
          .openbtn{
            display: block;
          }
          /*ココまで*/
        
          /*メニューバーのカーソルモーション*/
          .link:hover{
            font-weight: bold;
          }  
          .btn:hover{
            opacity:0.5;
          }
        
         /*~~~~~~~ココから作成~~~~~~~~*/  
      
          .top-wrapper{
            margin-top:0px;
            height: 70px;     
            background-color: black;
            color:white;
            text-align: center;
          }
         
          .top-wrapper h{
              display: block;
              line-height: 70px;
              color:rgb(219,186,133);
              font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
              font-weight: bold;
              font-size:25px;
            }
          
            .second-wrapper{
                display:none;
            }
            .second-wrapper h{
              display:none;
            }
            .second-wrapper h2{
                display:none;
              }
  

            .second-wrapper-responsive{
                display: block;               
              }
            .second-wrapper-responsive img{
                width:100%;
                animation-name: fadeInAnime;
                animation-duration:2s;
                animation-delay: 0s;
            }
            @keyframes fadeInAnime{
              0% {
                opacity: 0;
              }
            
              100% {
                opacity: 1;
              }
            }
           
            .second-wrapper-responsive h{
              color: white;
              padding-top:50px;
              display: block;
              font-size:14px;
              line-height: 25px;
              text-align: left;
              margin:-60% 5% 0 5%;
              animation: fadeIn 3s ease 1s 1 normal backwards;
              animation-delay: 2s;
            }
            .second-wrapper-responsive h2{
              color: white;
              display: block;
              font-size:14px;
              line-height: 25px;
              font-weight: lighter;
              text-align: left;
              margin:0 5%;
              animation: fadeIn 3s ease 1s 1 normal backwards;
              animation-delay: 2s;
            }
            @keyframes fadeIn {
              from {
                opacity: 0;
                transform: translateY(120px);
              }
              to {
                opacity: 1;
                transform: translateY(0);
              }
            }
      
      
            .third-wrapper{
              width: 100%;
              height: 100px;
              background: linear-gradient(0deg, white, rgb(0,0,0,0.7));
            }
            .fourth-wrapper{
              width: 100%;
              height: 70px;
              background-color: white;
            }
      
      
            .policy-wrapper{
                width:100%;    
                text-align: center;
                background-image: url(サブページ背景.png);
              }
        
              .policy-wrapper h{
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                font-weight: bold;
                font-size:23px; 
                text-align: center;
                height:30px;
                margin:0 0 0 0;
                display:block;        
              }     
              .policy-wrapper h2{
                display: block;
                font-size:15px;
                font-weight: lighter;
                text-align: left;
                margin:0 20%;
              }
              .policy-wrapper p{
                display: block;
                font-size:15px;
                font-weight: lighter;
                text-align: left;
                color:rgb(89, 26, 147);
                text-decoration: underline;
                text-align: center;
                margin:0 20%;
              }       
        
              .competition-wrapper{
                width:100%;   
                text-align: center;
                background-image: url(サブページ背景.png);
                padding:0 0 50px 0;
              }
        
              .competition-wrapper h{
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                font-weight: bold;
                font-size:23px; 
                text-align: center;
                height:30px;
                margin:0 0 0 0;
                display:block;
              }     
              .competition-wrapper h2{
                display: block;
                font-size:15px;
                font-weight: lighter;
                text-align: left;
                margin:0 20%;
              }
              .record-link{
                display: block;
                font-size:15px;
                font-weight: lighter;
                text-align: left;
                color:rgb(89, 26, 147);
                text-decoration: underline;
                text-align: center;
              }
        
        
              .competition-list{       
                width:54%;
                margin:0 23%;   
              }
              .competition-heading{
                height:20px;
                text-align: center;
                margin-top: 30px;        
              }
         
              .competition-name{
                height:20px;
                width:50%;
                margin: 0 25%;
                background-color:  rgb(221, 221, 221);
                line-height: 20px;
                font-size:15px;
                font-weight: bold;
                text-align: center;
              }
        
              .competition-text{
                width:98%;
                margin:0 1%;
                text-align: left;
                line-height: 20px;
                font-size:15px;
              }
      
              footer {
                background: black;
                color:rgb(219,186,133);
                position:relative;
                padding-bottom: 100px;
              }
              .footer-list{
                display: none;
              }
              .footer-list-respomsive{
                display: block;
              }
              .final-logo{
                width:120px;
                margin-top:50px;
              }
              .footer-heading-container{
                width:100%;
                text-align: center;
              }
              .footer-heading {
                color:rgb(219,186,133);
                text-align: left;
                width:40%;   
                display: inline-block;
                vertical-align: top;
              }
              .main-heading {
                font-size:30px;  
                margin-bottom: 5px;
                font-weight: bolder;
                width:100%;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
              }
              .sub-heading {
                font-size:18px;
                line-height: 25px;
                font-family:Arial, Helvetica, sans-serif;
                width:100%;
                font-weight:lighter;
                color: rgb(219,186,133);
                text-decoration: none;
              }
              .sub-heading:hover{
                text-decoration:underline;
                display:inline;
                transition:all 1s;
              }
              .footer-btn{ 
                color:  rgb(219,186,133);
                font-size:25px;   
              } 
              .footer-btn:hover{
                opacity:0.5;
              }
              .copyright{
                color:rgb(219,186,133);
                font-size:13px;
                position:absolute;
                bottom:5px;
                right:5px;
              }
            
            }