@charset "Shift_JIS";

@media screen and (min-width: 1025px){
   .inside{
   margin:0 auto;
   width:1300px !important;
}
}
@media screen and (max-width: 1024px){
   .inside{
   margin:0 auto;
   width:98%;
}
}
#inner{
   position:relative;
   width:1200px;
   margin:0 auto;
}
nav::after{
   content:'';
   display:block;
   clear:both;
}
@media screen and (max-width: 1024px) {
.inner{
   width:1024px;
   
}
}

@media screen and (max-width: 990px) {
.inner{
   width:99%;
   
}
}
/*================================================
 *PC 
================================================*/

header{
    display: none;
}
 
.head{
   width: 100%;
   height:110px;
   margin: 0px;
   text-align: left;
}
.head_1{
   width: 50%;
   margin: 0px;
   float: left;
   text-align: left;
}

.head_3{
   width: 50%;
   margin: 0px;
   float: left;
   position: inherit;
   text-align: left;
}
.logo_1{
   color: #333;
   text-shadow: 1px 1px 2px rgba(200, 200, 200, 0.25);
   font-size : 28pt;
   font-family: "Times New Roman";
   position: relative;
   top : 28px;
   font-style: oblique;
}
.logo{
   width: 56%;
   position: relative;
   top: 10px;
   left: 120px;
}


/*================================================
 1024
 ================================================*/
@media screen and (max-width:1024px) {
 #opening{
    display:none; 
    }
    
   header{
}
.head{
   width: 100%;
   height:90px;
}
.head_1{
   width: 50%;
}
.head_2{
   width: 50%;
}
.head_3{
   width: 56%;
}
.logo_1{
   color: #111;
   font-size : 14px;
   margin-left: 120px;
   position: relative;
   top : 6px;
   left : 0px;
}
.logo{
   width: 50%;
   position: relative;
   bottom: 4px;
   left: 30px;
}
}
/*================================================
 960
 ================================================*/
@media screen and (max-width:960px) {
   header{
       display: block;
   height:90px;
   border-top:1px solid rgb(0, 120, 130);
}
.head{
   width: 100%;
   height:90px;
}
.head_1{
   width: 50%;
}
.head_2{
   width: 50%;
}
.logo_1{
   color: #111;
   font-size : 13px;
   margin-left: 100px;
   position: relative;
   top : 6px;
   left : 0px;
}
.logo{
   width: 50%;
   position: relative;
   bottom: -2px;
   left: 30px;
}
}
/*================================================
 880
 ================================================*/
@media screen and (max-width:880px) {
   header{
   z-index:1;
   box-sizing:border-box;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100px;
   background-image : url(../img/bg_head.png);
   background-repeat : repeat-x;
   background-position : left bottom;
}
.head{
   width: 100%;
   height:100px;
}
.head_1{
   width: 50%;
}
.head_2{
   width: 50%;
   
}
.logo_1{
    display: none;
   
   }.logo{
   width: 82%;
   position: relative;
   top: 14px;
   left: 80px;
}
}
/*================================================
 780
 ================================================*/
@media screen and (max-width:780px) {
   header{
   height:100px;
}
.head{
   width: 100%;
   height:100px;
}
.head_1{
   width: 50%;
}
.head_2{
   width: 50%;
   
}
  
    .logo{
   width: 82%;
   position: relative;
   top: 14px;
   left: 80px;
}
}

/*================================================
 680
 ================================================*/
@media screen and (max-width:680px) {
    header{
   height:100px;
}
.head{
   width: 100%;
   height:100px;
}
.head_1{
   width: 45%;
}
.head_2{
   width: 55%;
   
}
.logo{
   width: 88%;
   position: relative;
   top: 18px;
   left: 40px;
}
}

@media screen and (max-width:480px) {
   header{
   height:90px;
}
.head{
   width: 100%;
   height:90px;
}
.head_1{
   width: 100%;
}
.head_2{
   display:none;
}
    .head_3{
   display:none;
}
    
    .logo{
   width: 70%;
   position: relative;
   top: 16px;
   left: 26px;
    }
}
@media screen and (max-width:393px) {
   header{
   height:80px;
}
.head{
   width: 100%;
   height:80px;
}
.head_1{
   width: 100%;
}
  .logo{
   width: 68%;
   position: relative;
   top: 14px;
   left: 30px;
    }
}