@charset "utf-8";

/*recet css*/
html,body,h1,h2,h3,h4,p,img,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
  font-family:"MS P明朝","Hiragino Kaku Gothic ProN",sans-serif;
}

ul {list-style:none;}

a {text-decoration:none;
color:inherit;}

img {vertical-align:bottom;}

/*body*/
body {
  font-size:16px;
  background-color:#e2ddd4;
}

/*container*/
.container {
  width:960px;
  margin:0 auto;
  padding:0 24px;
  background:#fff;
}

/*header*/
.header {
  height:100px;
  padding:20px 0 11px;
}

h1 {
  float:left;
  width:300px;
  font-size:160%;
  vertical-align:middle;
  color:#666;
}

.en {
  color:#3c2119;
  font-size:190%;
  font-family: 'Coda', cursive;
  vertical-align:middle;
  padding-right: 12px;
}



/*.name { font-family: "Nikukyu"; }
googleの日本語webフォントの指定方法*/

.nav1 {
  float:right;
  overflow:hidden;
  width:400px;
  text-align:center;
  vertical-align: bottom;
  padding-top:70px;
}


.nav1 li {
  float:left;
  width:100px;
}

.nav1 li a {
  display:block;
  line-height:1.8;
  color:#999;
  font-weight:bold;
  border-left:1px solid #666;
  box-sizing: border-box;
}

.nav1 li a:hover {
  color:#3c2119;
}


.nav1 li:last-child a {
  border-right:1px solid #666;
}

/*main*/
.main {
  width:960px;
  position:relative;
}/*兄弟のimgのPを始点にはできない！*/

.keytext {
  width:224px;
  padding:14px;
  line-height:1.5;
background:rgba(242,220,115,0.6);
  position:absolute;
  top:210px;
  left:628px;
}


h2 {
  border-left:15px solid #3c2119;
  margin:35px 0 20px;
  padding-left:8px;
}


/*wrapper1*/

.wrapper1 {
  overflow: hidden;
  margin-bottom:30px;
}

.menu {
  float:left;
  width:32%;
  margin-right:2%;
  position:relative; 
}

.menu:last-child {
  margin-right:0; 
}

.menu img {
  width:100%;
  height:100%;
}

.menutext {
  width:100%;
  height:42%;
  color:#fff;
  line-height:1.5;
  padding:8px; 
  background:rgba(0,0,0,0.5);
  position:absolute;
  transition:0.3s ease;
  top:100%;
  left:0;
  z-index:10;
  box-sizing: border-box;
}
/*  position:absolute;では、
z-index: 10;つけるのはルール！*/

.menu:hover .menutext {
  top:58%;
}

/*wrapper2*/

.wrapper2 {
  overflow: hidden;
  padding-bottom:30px;
  color:#fff;
}

.feature {
  float:left;
  width:48%;
  height:48%;
  margin:1%;
  position:relative; 
  overflow: hidden;
  border:10px solid #fff;
  box-shadow:0 0 3px 3px #ccc;
  box-sizing:border-box;
}


.feature img {
  width:100%;
  height:100%;
}

.box {
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  text-align:center;
  text-shadow:0 0 #333;
  position:absolute;
  top:100%;
  left:0;
  transition:0.3s easy;
  z-index:10;
}

.feature:hover .box {
  top:0;
}

h4{
  font-size:130%;    
  margin:35px 0 20px;
}
 
.more {
  width:25%;
  margin:0 auto;
  border:1px solid #fff; 
  padding:10px;
}

/*footer*/
footer {
  background:#3c2119;
  padding:15px 0 50px;
  color:#fff;
}

/*nav2*/

.nav2 {
  width:1008px;
  margin:0 auto;
  overflow:hidden;
  font-size:90%;
}

.nav2 li {
  float:left;
}

.nav2 li a {
  padding:0 20px;
  font-weight:bold;
  border-left:1px solid #fff;
}

.nav2 li a:hover {
  color:#c2b7a4;
}


.nav2 li:last-child a {
  border-right:1px solid #fff;
}

.nav2 p {
  text-align: right;
  margin-bottom:10px;}

/*button*/
.f2 {
  position:fixed;
  bottom:15px;
  right:15px;
  z-index:20;
}

.button {
  display:table-cell;
  vertical-align: middle;
  width:70px;
  height:70px;
  font-size:75%;
  line-height:1.3;
  text-align:center;
  border-radius:50%;    
  background-color:#333;
}