@charset "utf-8";

/*共通ページへの変更*/

.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }

header {
  width:100%;
  padding-bottom:170%;
  margin:0 auto;
  box-sizing:border-box;
  overflow: hidden;
}

.logo {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  }

.logotxt{
  width:100%;
  margin:11px 0 0 33%;
  }
  
h1 {
  width:100%;
  font-size:95%;
  color:#3F1900;
  padding-bottom:4px;
  }

.character {
  width:18%;
  position:absolute;
  top:-6px;
  left:5%;
  z-index:30;
  }


/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:66px;
  left:0;
  z-index:20;
}

.nav li {
  width:calc(100%/3);
  float:left;
  }

.nav li img{
  width:100%;
  }

.heroheader {
width:100%;
margin-top:10px;
background:url(../etc/imgcork.jpg) no-repeat center;
}

.heroheader img {
  width: 100%;
  }

.heroheader picture  {
  width: 100%;
  }


.etclead p {
  width:90%;
  font-size:130%;
  line-height:1.5;
  position:absolute;
  top:490px;
  left:5%;
  z-index:40;
}


/*etcページ*/
h2 {
  width:100%;
  text-align:center;
  margin-bottom:50px;
}
  
.wrapper-menu {
  line-height:1.6;
  width:90%;
  margin:0 auto 5%;
  font-size:120%;
}


.kocca-speach {
  padding-bottom:20px;
}

.koga-speach {
  padding-bottom:20px;
}
 
 .kocca-name {
   font-size:120%;
   font-weight:bolder;
   padding-top:20px 0 5px;
   color:#EE7C5E;
 }
 
 .koga-name {
   font-size:120%;
   font-weight:bolder;
   padding-top:20px 0 5px;
   color:#F5A31D;
 }

/*footer*/
footer {
  width:100%;    
  overflow: hidden;
  text-align: center;
  color:#fff;
  background-color: #EE7C5E;
  padding-bottom:20px;
}

footer p {
  width:100%; 
  padding-bottom:2px;
}

.footerline picture {
  width:100%; 
}

.footerline img {
  ,width:100%; 
}


.externallink{
  padding-right:7px;
  text-align: right;
}

.externallink img{
  width:35px;
  height:35px;
  padding-right:10px;
}

@media screen and (min-width:768px){
  /*タブレット用*/
    
.br-sp{display: none;}
.br-pc{display: block;}
    
.container {
  width:100%;
  margin:0 auto;
  position:relative;
  }
     
header {
  padding-bottom:35%;
  margin:0 auto;
  overflow: hidden;
}

    
.logo {
  width:42%;
  overflow:hidden;
  }

.logotxt{
  width:20%;
  margin:1.2% 0;
  position:absolute;
  top:0.1%;
  left:10%;
  z-index:30;
  }
  
h1 {
  width:16em;
  font-size:80%;
  color:#3F1900;
  padding-bottom:0.6%;
  }
    
.logotxt img {
  width:85%;
  }
     
.character {
  position:absolute;
  top:-0.15%;
  left:0.8%;
  z-index:30;
  }
    
.character img {
  width:50%;
  height:50%;
  } 

/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  background: url(../img/inner-back85.png) no-repeat top left/contain;
  z-index:20;
}
    
.nav li {
  height:110px;
  float:left;
  }
  
.home {
  width:46.97%;
  position:absolute;
  top:2%;
  left:0;
  z-index:20;
    }
    
.menu {
  width:9.86%;
  position:absolute;
  top:2%;
  left:46.97%;
  z-index:20;
    }
    
.news {
  width:9.76%;
  position:absolute;
  top:2%;
  left:56.83%;
  z-index:20;
    }  
    
.etc {
  width:11.03%;
  position:absolute;
  top:2%;
  left:66.59%;
  z-index:20;
    }  
    
.about {
  width:9.76%;
  position:absolute;
  top:2%;
  left:77.62%;
  z-index:20;
    }  
    
.access {
  width:12.59%;
  position:absolute;
  top:2%;
  left:87.38%;
  z-index:20;
    }  
    
.heroheader {
  width: 100%;
  margin:0 auto;
  text-align: center;
  position:absolute;
  top:20px;
  left:0;
  z-index:10;
    }

.heroheader img {
  width: 100%;
  }
    
    
.etclead p {
  width:22em;
  font-size:140%;
  line-height:1.5;
  position:absolute;
  top:13%;
  left:50%;
  z-index:40;
}

.wrapper-menu {
  max-width: 815px;
  margin: 10%;
    }

h2 img {
  width:42%;
    }
    
.kocca {
  overflow:hidden;
  margin-bottom:40px;
    }    

.kocca-img {
  float:left;
  margin-right:20px;
    }

.kocca-speach {
  width:40%;
  margin-left:12%;
  padding:16px 24px 18px;
  background:#FCE5DF;
  border-radius:10px;
  border-image-source:url(img/speech-kocca-left.png);
  border-image-slice:21px;
    }

.koga {
  overflow:hidden;
  margin-bottom:40px;
    }    

.koga-img {
  float:right;
  margin-left:20px;
    }

.koga-speach {
  width:40%;
  margin-left:43%;
  padding:16px 24px 18px ;
  background:#FFF5E2;
  border-radius:10px;
    }
    
/*footer*/
footer {
  width:100%;
  overflow: hidden;
  text-align: center;
  color:#fff;
  background-color: #EE7C5E;
  padding-bottom:2%;
}

footerline img{
  width:100%;     
    }
    
footer p {
  padding-bottom:2px;
}

.externallink{
  padding-right:5px;
  text-align: right;
}

.externallink img{
  width:4%;
  height:4%;
  padding-right:1%;
}
    
}

@media screen and (min-width:2400px){
/*PC用*/

.br-sp{display: none;}
.br-pc{display: block;}
    
/*container*/
container {
  width:100%;
  margin:0 auto;
  position:relative;
  }


.logo {
  width:20%;
  overflow:hidden;
  }

.logotxt{
  width:20%;
  margin:1% 0;
  position:absolute;
  top:0;
  left:9%;
  z-index:30;
  }
  
h1 {
  width:16em;
  font-size:110%;
  color:#3F1900;
  padding-bottom:2%;
  }
    
.logotxt img {
  width:83%;
  }
     
.character {
  position:absolute;
  top:-0.15%;
  left:1%;
  z-index:30;
  }
    
.character img {
  width:44%;
  height:44%;
  }


/*nav*/
.nav {
  width:100%;
  overflow:hidden;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  background: url(../img/inner-back85.png) no-repeat top left/contain;
  z-index:20;
}

.nav li {
  height:110px;
  float:left;
  }
  
.home {
  width:46.97%;
  position:absolute;
  top:2%;
  left:0;
  z-index:20;
    }
    
.menu {
  width:9.86%;
  position:absolute;
  top:2%;
  left:46.97%;
  z-index:20;
    }
    
.news {
  width:9.76%;
  position:absolute;
  top:2%;
  left:56.83%;
  z-index:20;
    }  
    
.etc {
  width:11.03%;
  position:absolute;
  top:2%;
  left:66.59%;
  z-index:20;
    }  
    
.about {
  width:9.76%;
  position:absolute;
  top:2%;
  left:77.62%;
  z-index:20;
    }  
    
.access {
  width:12.59%;
  position:absolute;
  top:2%;
  left:87.38%;
  z-index:20;
    }    
    
h2 img {
  width:25%;
    }
    
/*footer*/
footer {
  width:100%;
  overflow: hidden;
  text-align: center;
  color:#fff;
  background-color: #EE7C5E;
  padding-bottom:5%;
}

.etclead p {
  width:22em;
  font-size:140%;
  line-height:1.5;
  position:absolute;
  top:10%;
  left:50%;
  z-index:40;
}    
    
footerline img{
  width:100%;     
    }
    
footer p {
  padding-bottom:2px;
}

.externallink{
  padding-right:2%;
  text-align: right;
}

.externallink img{
  width:3%;
  height:3%;
  padding-right:1%;
}

}