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