/*//////////////////////////////////////////////////////////////////////////////

kinenkan Web
	
//////////////////////////////////////////////////////////////////////////////*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);

body {
  	-webkit-font-smoothing: antialiased;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #331913;
  background: #fff;
}
ol, ul ,li{
	list-style: none;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#contents_area img{
	max-width: 100%;
	height: auto;
}
img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
a{
	text-decoration:none;
}
.pc_ver{
	display:block;
}
.sp_ver{
	display:none;
}
#footer_area{
	margin-top: 0;
}

/* Header -------------------*/
#menu,
.menu-btn,
#header,
#header #logo{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#header{
	position:relative;
	height:93px;
	border-bottom: 3px solid #331913;
}
/*lang*/
#header .lang{
	position: absolute;
	top:36px;
	left: 20px;
	font-size: 0;
}
#header .lang li{
	display: inline-block;
	font-size: 14px;
}
#header .lang li:before{
	content: "｜";
}
#header .lang li:last-child:after{
	content: "｜";
}
#header .lang li a{
	color: #281e0f;
}
#header .lang li a:hover{
	color: #756348;
}
#header h1{
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -120px
}
#header .bt_mf{
  position: absolute;
  right: 100px;
  top:16px;
}
#header .bt_mf a{
  transition-duration: .2s;
  transition-property: opacity;
}
#header .bt_mf a:hover{
  opacity: .6;
}

#gnav_area li:after{
	content:"";
}
#gnav_area{
	position:absolute;
	width:100%;
	height:auto;
	top:0px;
	right:0px;
	display:none;
	color:#ebddbd;
	margin:0px auto;
	background:#331913;
	margin-top: 93px;
	z-index:8000;
}
#gnav_area .gnav{
	overflow: hidden;
	border-bottom:solid 1px rgba(255,255,255,.2);
	padding: 0 2.5%;
}
#gnav_area .gnav img{
	max-width: 100%;
	height: auto;
}
#gnav_area .gnav li{
	display: inline-block;
	font-size: 0;
	vertical-align: top;
	width: 21.5%;
	margin: 1.5%;
}
#gnav_area .gnav dd{
	text-align: center;
	margin-top: 15px;
	font-size: 16px;
}
#gnav_area .gnav a,
#gnav_area .langnav a{
	color: #fffaef;
	font-weight: bold;
}
#gnav_area .gnav a:hover,
#gnav_area .langnav a:hover{
	color: #ebddbd;
}
#gnav_area .langnav{
	font-size: 0;
	padding: 2.5% 0;
	text-align: center;
}
#gnav_area .langnav li{
	display: inline-block;
	font-size: 16px;
}
#gnav_area .langnav li:before{
	content: "｜";
}
#gnav_area .langnav li:last-child:after{
	content: "｜";
}
#gnav_area .bt_official{
	text-align: center;
}
#gnav_area .bt_official a{
	display: inline-block;
	border: solid 1px rgba(255,255,255,.5);
	color: #fff;
	font-size: 15px;
	height: 40px;
	font-weight: bold;
	margin-top: 15px;
	padding: 10px 20px 0 38px;
	border-radius: 20px;
	line-height: 1.2;
}
#gnav_area .bt_official a:hover{
	border: solid 1px rgba(255,255,255,.5);
	background: #fff;
	color: #331913;
}
#gnav_area .bt_official a:hover.arrow::before{
	border-top: solid 3px #331913;
  	border-right: solid 3px #331913;
}
#gnav_area .arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
#gnav_area .arrow::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -4px;
}
#gnav_area .nav_mf{
  border-bottom:solid 1px rgba(255,255,255,.2);
	font-size: 16px;
}
#gnav_area .nav_mf a{
  display: block;
  text-align: center;
	color: #fffaef;
	font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
#gnav_area .nav_mf a:hover{
	color: #ebddbd;
}

/* Menu Link */
#menu-btn{
	display: inline-block;
	position:absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #331913;
	cursor:pointer;
	top:10px;
	right: 20px;
}
#menu-btn:hover{
  background: #756348;
  color:#756348;
}
#menu-btn-icon{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background: #fff;
	transition: .2s;
}
#menu-btn-icon:before, #menu-btn-icon:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 2px;
	background: #fff;
	transition: .2s;
}
#menu-btn-icon:before{
	margin-top: -8px;
}
#menu-btn-icon:after{
	margin-top: 6px;
}
#menu-btn .close{
	background: transparent;
}
#menu-btn .close:before, #menu-btn .close:after{
	margin-top: 0;
}
#menu-btn .close:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#menu-btn .close:after{
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#menu-btn .menu-txt{
	position:absolute;
	top:52px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size:12px;
	text-align:center;
	width:100%;
}


/* PageTop -------------------*/
#page_top_area{
	background: #331913;
	padding: 15px 0;
	text-align: center;
}
#page_top_area a{
	color: #fff;
	transition-duration: .2s;
}
#page_top_area a:hover{
	opacity: .6;
}


/*--=======================================

Resposive Style

=======================================--*/
@media screen and (min-width: 641px),print {
/* Footer -------------------*/
#footer_area{
	overflow:hidden;
  border-top:4px solid #c6373f;
  background-color:#FFFFFF;
  margin-top:0;
  width:100%;
}
#footer_sns{
  margin:0 auto;
  padding:20px 0;
  width:960px;
}
#footer_sns:after{
	content:".";
	clear:both;
	display:block;
	line-height:0;
	height:0;
	visibility:hidden;
}
#footer_sns > #sns_link{
  font-size:0;
  float:left;
}
#footer_sns > #sns_link > li{
  display:inline-block;
  vertical-align:top;
  margin-right:10px;
}
#footer_sns > #sns_link img{
  height:auto;
  width:40px;
}
#footer_sns > #sns_btn{
  font-size:0;
  float:right;
  margin-top:10px;
}
#footer_sns > #sns_btn > li{
  display:inline-block;
  vertical-align:top;
  margin-right:10px;
}
#attention{
  background-color:#FFFFFF;
  border:1px solid #dcdcdc;
  box-sizing:border-box;
  text-align:center;
  font-size:11px;
  padding:15px 0;
  margin:10px auto 0;
  width:900px;
}
#copyright{
  font-size:9px;
  margin:10px auto 10px;
  width:900px;
}
}

@media screen and (max-width: 640px) {
	.pc_ver{
		display:none;
	}
	.sp_ver{
		display:block;
	}
  
	#header .lang{
		display: none;
	}
	#header h1{
		position: absolute;
		top: 28px;
		left: 20px;
		margin-left:0;
	}
	#header h1 img{
		width: 180px;
		height: auto;
	}
  #header .bt_mf{
    display: none;
  }
	#gnav_area .gnav li{
		width: 46%;
		margin: 15px 1.5%;
	}
	#gnav_area .gnav dd{
		font-size: 14px;
	}
	#gnav_area .langnav li{
		font-size: 13px;
	}
	
	/* Footer -------------------*/
	#footer_area{
	  border-top:4px solid #c6373f;
	  background-color:#FFFFFF;
	  margin-top:0px;
	  padding-bottom:50px;
	  width:100%;
	}
	#footer_sns{
	  margin:0 auto;
	  padding:20px 0;
	}
	#footer_sns > #sns_link{
	  font-size:0;
	  text-align:center;
	}
	#footer_sns > #sns_link > li{
	  display:inline-block;
	  vertical-align:top;
	  margin:0 5px 0;
	}
	#footer_sns > #sns_link img{
	  height:auto;
	  width:40px;
	}
	#footer_sns > #sns_btn{
	  border-bottom:1px solid #e5e5e5;
	  border-top:1px solid #e5e5e5;
	  font-size:0;
	  padding:15px 0;
	  margin:20px 20px 0;
	}
	#footer_sns > #sns_btn > li{
	  display:inline-block;
	  vertical-align:top;
	  margin-right:10px;
	}
	#attention{
	  background-color:#FFFFFF;
	  box-sizing:border-box;
	  font-size:11px;
	  margin:10px 15px 0;
	}
	#copyright{
	  font-size:9px;
	  margin:20px auto 0;
	  text-align:center;
	}
}