@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: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 a{
                display: none;
            }
            .picture-box{
              display: none;
            }
      
            .second-wrapper-responsive{
                display:block;
                position: relative;  
                
                animation: change-color-anim 6s;                    
              }
              @keyframes change-color-anim {
                0%,50%{
                  background-color: black;
                }
                100%{
                  background-color: rgb(255,255,255,0);
                }
              }

            .second-wrapper-responsive img{
                width:100%;   
                margin-bottom: -5px;     
              }           
              .second-wrapper-responsive a{
                text-align: center;
                font-size:35px;
                font-family: Yu Mincho;     
                color:white;
                display: block;
                font-size:45px;
                width: 100%;
                font-family: Yu Mincho;
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%,-50%);             
              }
              
              .fadeIn4{
                animation-name: fadeInAnime;
                animation-duration:3s;
                animation-fill-mode:forwards;
                opacity: 0;
                animation-delay: 4s;
              }
              .fadeIn5{
                animation-name: fadeInAnime;
                animation-duration:3s;
                animation-fill-mode:forwards;
                opacity: 0;
                animation-delay: 1s;
              }
              .fadeIn6{
                animation-name: fadeInAnime;
                animation-duration:1s;
                animation-fill-mode:forwards;
                opacity: 0;
                animation-delay: 6s;
              }


          
              .third-wrapper{
                width:100%;
                background-color: black;
                padding:0 0 20px 0;                
              }
              .forth-wrapper{
                background-image:url(サブページ背景2.png);
                width: 100%;
                height: 100%;
                padding-top: 20px;
                padding-bottom: 20px;
              }
        
        
              .center-wrapper{
                width:90%;
                margin:0px 5%;
              }
        
              .text-box{
                background-color: rgb(0,0,0,0.5);
                width: 100%;                
                text-align: center;
                padding-top: 20px;
              }
        
              .text-box p{
                font-size: 14px;
                color:white;
              }
        
              .text-box2{
                background-color: rgb(255,255,255,0.9);
                width: 90%;
                margin:0px 5% 0px 5%;
                text-align: left;
                padding-bottom: 10px;
                padding-top: 10px;
              }
              .text-box2 p{
                font-size: 14px;
                margin-left: 5px;
                color: black;
              }
        
              .icon{
                font-size: 40px;
                margin:0 20px;
                color: rgb(89, 26, 147);
            }
        
      
      
            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;
            }
          
          }