@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;
    } 
    .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:0px;
      width:100%; 
      background-color: white;   
    }
    .link {
        display:none;
      }
     
      .btn{
        display:none;
      } 
  
  
  
    /*メニューバーのカーソルモーション*/
    .link:hover{
      font-weight: bold;
    }  
    .btn:hover{
      opacity:0.5;
    }
  
    /*ココから*/
    .menu-icon{
      display: block;
    }
    .openbtn{
      display: block;
    }
    /*ココまで*/
  
    
    /*~~~~~~~ココから作成~~~~~~~~*/  
      .top-wrapper{
        margin-top:0px;
        width:100%;
      }
    
      .main-box{
        display: none;
      }  
      .main-picture {
        display: none;
      }
      .main-picture img{
        display: none;
      }
  
      .main-box-responsive{
        display: block;
      }  
      .main-picture-responsive {
        display: block;
      }
      .main-picture-responsive img{
        display: block;
      }
      
  
      .sub-box{
        display: none;
      }
  
      .sub-box-responsive{
        display: block;
      }
    
      .match-space{
        width: 98%;
        height: 300px;
        margin: 0 1% 0 1%;
        background-image:url(円陣.png);
        background-size: cover;
        background-position: center;    
        float: left;
        text-align: center; 
      }
    
      .match-box{
        width: 50%;
        height: 100%;
        text-align: center;
        float: left;
        color: white;
        background-color: rgb(200,0,0,0.5);
        padding-top: 10px;
      }
      .match-box2{
        width: 50%;
        height: 100%;
        text-align: center;
        float: left;
        color:  white;
        background-color: rgba(100, 85, 0, 0.5);
        padding-top: 10px;
      }
    
      .match-head{
        font-size:22px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: bold;
        display:inline;
      }
      .match-date{
        font-size:17px;
        padding-top: 0px;
      }
      .match-team-name{
        line-height: 20px;
        font-size:19px;
        font-weight: bold;
      }
      .match-competition{
        font-size:15px;
      }
      .match-score{
        line-height: 18px;
        font-size:18px;
        font-weight: bold;
      }
      .last-match-report{
        background-color:  black; 
        color:white;
        text-decoration: none;
      }  
      .last-match-report:hover{
        opacity:0.5;
      }  
     
      
      .sub-box2{
        display: none;
      }
  
      .sub-box2-responsive{
        display: block;
      }
  
      .about-team{
          width: 98%;
          height: 85px;
          margin: 5px 1% 0 1%;
          color:  white;
          float:left;
          display: block;    
          position: relative;    
      }  
      .about-team img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }
      .about-team p{
          font-size:18px; 
          font-weight: bolder;
          text-shadow: 1px 2px 3px  rgb (219,186,133);  
          position:absolute;
          top:20px;
          left:10px;
          display:block     
      }  
      
      .about-ob{
          width: 98%;
          height: 85px;
          margin: 5px 1% 0 1%;
          color:  white;
          float:left;
          display: block;       
          position: relative;    
      }
      .about-ob img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }
      .about-ob p{
          font-size:18px; 
          font-weight: bolder;
          text-shadow: 1px 2px 3px  rgb(219,186,133);  
          position:absolute;
          top:30px;
          left:10px;
          display:block  
      }
    
    
    /*アニメーション*/
      .about-team {
        position: relative;
        transition: .6s ;
      }
      .about-team::before,
      .about-team::after {
        content: "";
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        margin: auto;
        transition: .6s ;
        opacity: 0;
      }
      .about-team::before {
        background: rgba(255,255,255,.3);
        width: 100%;
        height: 100%;
      }
      .about-team::after {
        color: #fff;
        
        font-size: 22px;
        font-weight: bold;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        bottom: 0;
        right: 0;
      }
      .about-team:hover::before,
      .about-team:hover::after {
        opacity: 1;
      }
      .about-team:hover::after {
        letter-spacing: 0.1em;
      }
     
       
    
      .about-ob {
        position: relative;
        transition: .6s ;
      }
      .about-ob::before,
      .about-ob::after {
        content: "";
        display: block;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        margin: auto;
        transition: .6s ;
        opacity: 0;
      }
      .about-ob::before {
        background: rgba(255,255,255,.3);
        width: 100%;
        height: 100%;
      }
      .about-ob::after {
        color: #fff;
        
        font-size: 22px;
        font-weight: bold;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        bottom: 0;
        right: 0;
      }
      .about-ob:hover::before,
      .about-ob:hover::after {
        opacity: 1;
      }
      .about-ob:hover::after {
        letter-spacing: 0.1em;
      }
      
     
      .news-schedule-wrapper { 
        margin: 30px 0 0 0;
      }  
    
      .news-box{
        width:100%;
        float: left;
      }
  
      .schedule-box{
        width:100%;
        float: left;
      }
     
      .news-headline{
        width:80%;
        margin:0 10% 0 10%;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:20px;
        font-weight:bold;
        border-bottom:1.5px solid rgb(200, 0, 0);
      }
      .news-date{
        float:left;
        width:20%;
        margin:10px 0 0 10%;
        font-size: 15px;
        line-height: 20px;
        display: inline;
      }
      .news-title-box{
        float:left;  
        color:rgb(89, 26, 147);  
        margin:10px 0 0 10px;  
        font-size: 15px;
        line-height: 20px;
        display: inline;
      }
      
    
      .news-title:hover{
        opacity:0.5;
        display:inline;
      }
    
    
      .schedule-headline{
        width:80%;
        margin:0 10% 0 10%;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size:20px;
        font-weight:bold;
        border-bottom:1.5px solid rgb(200, 0, 0);
      }
      .schedule-date{
        float:left;
        width:25%;
        margin:10px 0 0 10%;
        display: inline;
        font-size: 15px;
        line-height: 20px;
      }
      .schedule-title-box{
        float:left; 
        padding:10px 0 0 5%;  
        font-size: 15px;
        line-height: 20px;
      }
    
    .banner-wrapper{
      width:100%;
      background-color: rgb(221,221,221);
      padding: 20px 0;
      text-align: center;
    }
    .banner img{
      width: 90%;
      object-fit: contain;
      margin:0 5%;
    }
    
    /*ココから*/
    .banner img {
      position: relative;
      transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .banner img::before,
    .banner img::after {
      content: "";
      display: block;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      margin: auto;
      transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
      opacity: 0;
    }
    .banner img::before {
      background: rgba(190,91,70,.6);
      width: 100%;
      height: 100%;
    }
    .banner img::after {
      color: #fff;
      content: "Read More";
      font-size: 22px;
      font-weight: bold;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      bottom: 0;
      right: 0;
    }
    .banner img:hover::before,
    .banner img:hover::after {
      opacity: 1;
    }
    .banner img:hover::after {
      letter-spacing: 0.1em;
    }
    .banner img:hover {
      transform: scale(0.9);
    }
    /*ココまで*/
    
    
    .mini-banner-wrapper{
      width: 100%;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .mini-banner-wrapper img{
      width:39%;
      object-fit: contain;
      margin:30px 0px;
    }
    .mini-banner-wrapper img:hover{
      transition: .6s ;
      opacity:0.5;
    }
    
    
    .result-wrapper {
      width: 100%;
      text-align: center;    
      background-image: url(index_result_background.png);
      background-position: center;
      background-size: cover;
    }
    
    .result-wrapper-sub {
      width: 100%;
      text-align: center;    
      background-color: rgb(200, 0, 0,0.5);
    }
    
    
    .result-headline{
      text-align: center;
      line-height: 50px;
      color:white;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-weight: bold;
      font-size:25px;
    }

    .result-headline h{
      color:rgb(219,186,133);
    }
    
    .result-box-series{
      width:100%;
      text-align: center;
      padding-top:20px;
    }
    
    .result-box{
      width: 70%;
      margin:0 15%;
      display: inline-block;
      background-color: rgb(255, 255, 255,0.5);
      padding-bottom: 30px;
    }
    
    .result{
      width: 100%;   
      display: inline;
      text-align: center;  
      float: left;
      position: relative;
      background-size: cover;
    }
    .result img{
      width:20%;
      position: absolute;
      top:100px;  
    }
    
    
    
    .date{
      font-weight: bolder;
      font-size: 17px;
    }
    .competition{
      font-size: 15px;
      font-weight: bolder;
    }
    .vs{
      color:white;
      font-weight:bold;
    }
    .opponent{
      font-size: 20px;
      font-weight: bold;
      margin-top:-5px;
      color:white;    
    }
    .score{
      font-size: 25px;
      display: block;
      background-color:black;
      color: rgb(219,186,133);
    }
    .match-report{
      background-color: black; 
      color:white;
    }
    .match-report:hover{
      opacity:0.5;
    }
    
    
    
    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;
    }
  
  
  }