@media (max-width:670px){

    *{
        box-sizing: border-box;
        font-family: sans-serif;
      }

       /*header開始*/
       header {
        height: 80px;
        width: 100%;
        background-color:black;     
      }
        
      .header-left {
        float: left;
      }
      .logo {
         height: 60px;
         margin: 9px 0 0 5px;
      } 
      .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;
}



.first-wrapper{
    margin-top:0px;
    background-color:black; 
    color:white;
  }
 
  .date{
    font-size:18px;
    display: block;
    text-align: center;
  }
  .competition{
    font-size:15px;
    display: block;
    text-align: center;
  }
  
  .home-team-name{
    width:33%;
    font-size:20px;
    line-height: 50px;
    padding-right:10px;  
    text-align: right;
    float: left; 
    font-weight: bold;   
}

  .home-team{
      float:left;
      width:12%;
      display: none;
  }      
  .team-logo{
    height:140px;        
  }
  
  .home-score{
      width:7%;
      float:left;
      text-align: center;
      height: 80px;
  }
  .point{
    width: 100%;
    height: 100%;
    background-color: white;
    color:black;
    font-size: 40px;
    line-height: 80px;
    margin-top: -35px;
  }

  .match-data{
      float:left;
      width:20%;
      text-align: center;
      font-size:15px;
  }
  .half-score{
      font-size:15px;
      margin-top: 17px;        
  }
  .pk-score{
      font-size:18px;
      font-weight: bold;
  }
  
  .away-score{
      width:7%;
      float:left;
      text-align: center;
      height: 80px;
  }

  .opponent{
      float:left;
      width:33%;
  }
  .opponent p{
      font-size: 20px;
      line-height: 50px;
      font-weight: bold;
      padding-left: 10px;
  }

/*毎回ページごとに高さを調節する。*/
  .second-wrapper{
    width:100%;
    background-image: url(サブページ背景.png);
  } 

    .space-box1{
      width:10%;
      float:left;
    }

    .starting{
        width:38%;   
        margin-top:40px;
        float:left;
    }
    .starting h{
        font-family:  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:18px;
        line-height: 30px;
        display: block;
        padding: 0 0 0 5px;
        color: white;
        font-weight: bold;
        background: linear-gradient(90deg, rgb(89, 26, 147),rgb(129, 12, 133));
    }

    .position{
        width:20%;
        float:left;
        text-align: right;
        font-weight: bold;
        font-size:15px;
        line-height: 20px;
        padding-top: 10px;
        background-color:  rgb(89, 26, 147);
        color:white;
    }
    .player{
        width:80%;
        float:left;
        padding-left: 20px;        
        font-size:15px;
        line-height: 20px;
        padding-top: 10px;
        background: linear-gradient(90deg, rgb(89, 26, 147,1),rgb(129, 12, 133,1));
        color:white;
    }
  
    .space-box2{
      width:0%;
      float:left;
    }

    .topic{
        width:48%;
        margin:40px 0% 0 3%;
        
    }

    .scorer h{
        font-family:  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:18px;
        line-height: 30px;
        margin: 0 0 0 0px;
        padding-top: 37.5px;
        color: rgb(89, 26, 147);
        font-weight: bold;
    }
    .scorer p{
        font-size:15px;
        line-height: 20px;
        padding-left: 10px;
    }

    .member-change h{
        font-family:  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:18px;
        line-height: 30px;
        margin: 0 0 0 0px;
        color: rgb(89, 26, 147);
        font-weight: bold;   
    }
    .member-change p{
        font-size:15px;
        line-height: 20px;
        padding-left: 10px;
    }

    .space-box3{
        width:100%;
        float:left;
      }    

    .report{
        width:80%;
        margin:0 10%;
        float:left;
        background:rgba(221,221,221,0.5);       
    }
    .match-report h{
        font-family:  'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:18px;
        line-height: 30px;
        padding:0 0 0 5px;
        color: rgb(89, 26, 147);
        font-weight: bold;   
    }
    .match-report p{
        font-size:15px;
        padding:0 15px;
    }

    .space-box4{
        width:0%;
        float:left;
      }    
    
      .photo-wrapper{
        width: 100%;        
      }
      .photo-box{
        width: 90%;
        margin: 0 5%;
        padding-top:20px;
      }
      .photo-box img{
        width: 100%;
        object-fit: contain;
      }


  
      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;
      }
    }