@charset "utf-8";

/* ---------------------------------------------------
   File: common.css
   Version: 1.0.0
   Update: 2017-06-22
   Author: http://flowlab.co.jp

   (c)2007-2017 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */




/* ===========================================================================================================================================

   WIDE DESKTOP LAYOUT

=========================================================================================================================================== */
.sp { display: none;}
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }


/* ===================================================
   Page Layout
=================================================== */

div#wrapper {
	width: px;
	margin: 0 auto;
	letter-spacing: 0.1em;
}
header {
	width: px;
}
nav {
}
div#contents {
	margin: 0 auto;
}
footer {
	width: px;
}
.small {
	font-size: 0.8em;
	color: #666;
}
.txt_img {
	margin: 0 auto;
}
.txt {
	text-indent: -9999px;
}
.blank {
	height: 110px;
}
span.block {
	display: block;
}

.row {
	width: 1100px;
	margin: 0 auto;
}
.row_s {
	width: 700px;
	margin: 0 auto;
}
#wrapper .row {
	width: 980px;
}
html,body {
  -webkit-text-size-adjust: none;
}





/* ===================================================
   Header
=================================================== */
header {
	width: 100%;
	height: 84px;
	position: fixed;
	background: #fff;
	padding: 20px 0 0;
	z-index: 999;
}
header nav.pc {
	background-color: #fff;
	float: right;
	padding-right: 3%;
}

/* Logo */
header .logo {
	width: 290px;
	height: 64px;
	float: left;
	background: url(../img_common/logo.png) 0 0 no-repeat;
	margin-left: 30px;
	text-indent: -9999px;
}
header .logo a {
	display: block;
	width: 290px;
	height: 64px;
	/*margin-left: -20px;*/
}
header .logo:hover {
	opacity: 0.7; /* Safari,Opera */
	-moz-opacity: 0.7; /* Firefox */
	filter: alpha(opacity=70); /* IE6/7 */
	-ms-filter: "alpha(opacity=70)"; /* IE8 */
}

/*Tel*/
p.tel_top {
	padding-top: 15px;
	float: left;
}

/* -------------------------------
		Grobal Navigation
------------------------------- */
#gnavi_pc,
#gnavi_pc li,
#gnavi_pc li a {
	height: 20px;
}
#gnavi_pc {
	display: block;
	/*overflow: hidden;*/
	padding: 20px 20px 0;
	float: left;
}
#gnavi_pc li {
	font-family: "Sawarabi Mincho";
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1, 1.01);
	-moz-transform-origin: 0 0;
	-moz-transform: scale(1, 1.01);
	-ms-transform-origin: 0 0;
	-ms-transform: scale(1, 1.02);
	-o-transform-origin: 0 0;
	-o-transform: scale(1, 1.01);
	float: left;
	padding-right: 30px;
}
#gnavi_pc li a {
	display: block;
}
#gnavi_pc li a:hover {
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	text-decoration: none;
}






/* ===================================================
   Contents
=================================================== */
.contentsBox {
	padding-top: 103px;
	margin-top: -103px;
}

/* -------------------------------
		Contents Title
------------------------------- */
.contentsTitleArea {
	/*width: 100%;*/
	/*max-width: 1300px;
	min-width: 1000px;*/
	height: 300px;
	/*margin: 0 auto;*/
	overflow: hidden;
}

.contentsTitleArea h2 {
	font-family: "Sawarabi Mincho";
	padding: 130px 0 0;
	font-size: 2.4em;
	letter-spacing: 0.15em;
	color: #fff;
	text-align: center;
	text-shadow:0px 0px 8px rgba(33,33,33,1);
}
.contentsTitleArea h2 span.en {
	font-family: 'Libre Baskerville', serif;
	display: block;
	padding-bottom: 10px;
}
.contentsTitleArea h2 span.jp {
	display: block;
	font-size: 0.4em;
	letter-spacing: 0.1em;
	padding-top: 15px;
}

/* -------------------------------
		Contents Background Type
------------------------------- */
.bgBlackBrown {
	background: url(../img_common/bg_black-brown.gif) center top repeat;
	padding: 80px 0 60px;
}
.bgBrown {
	background: url(../img_common/bg_brown.gif) center top repeat;
	padding: 80px 0 60px;
}



/* ===================================================
   Footer
=================================================== */

footer {
	clear: both;
	background: #FFF;
	/*overflow: hidden;*/
	padding: 110px 0 15px;
}

/* -------------------------------
		Logo
------------------------------- */
#logo_footer {
	width: 166px;
	height: 102px;
	margin: 0 auto;
	padding-bottom: 40px;
}


/* -------------------------------
		Footer Navigation
------------------------------- */
#fnavi,
#fnavi li,
#fnavi li a {
	height: 30px;
}
#fnavi {
	width: 550px;
	display: block;
	margin: 0 auto;
}
#fnavi li {
	font-family: "Sawarabi Mincho";
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(1, 1.01);
	-moz-transform-origin: 0 0;
	-moz-transform: scale(1, 1.01);
	-ms-transform-origin: 0 0;
	-ms-transform: scale(1, 1.02);
	-o-transform-origin: 0 0;
	-o-transform: scale(1, 1.01);
	float: left;
	padding-right: 50px;
}
#fnavi li a {
	display: block;
}
#fnavi li a:hover {
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	text-decoration: none;
}

/* Instagram */
#fnavi li#footerInstagram {
	padding-right: 0;
}


/* -------------------------------
		Copyrights
------------------------------- */

footer small {
	clear: both;
	font-size: 0.6em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 0.2em;
	display: block;
	text-align: center;
	margin: 90px auto 0;
}












/* ===========================================================================================================================================

   MOBILE LAYOUT (PORTRAIT/320PX,LANDSCAPE/480PX) 

============================================================================================================================================= */
@media only screen and (min-width: 320px) and (max-width: 767px) {
.sp { display: block;}
.pc { display: none;}


	
	
/* ===================================================
   Page Layout
=================================================== */
.row,
#wrapper .row {
	width: 84%;
	margin: 0 8%;
	line-height: 1.8em;
}
.row_s {
	width: 84%;
	margin: 0 8%;
	line-height: 1.8em;
}
	
	
/* ===================================================
   Header
=================================================== */

	
/* -------------------------------
		Grobal Navigation
------------------------------- */
header .sp .drawer-nav {
  width: 200px;
  color: #fff;
  background-color: rgba( 0, 0, 0, 0.6 );
	padding: 10px 0 0 0;
  top: 0;
}
header {
	width: 100%;
	height: 50px;
	position: fixed;
	background: #fff;
	padding: 10px 0 0;
	z-index: 999;
}

	#gnavi {
		padding: 10px 0 0 2%;
	}

/* Logo */
header .logo {
	width: 170px;
	height: 38px;
	background: url(../img_common/logo.png) 0 0 no-repeat;
	-webkit-background-size: 100%;
	background-size: 100%;
	margin: 0 0 0 0;
	padding: 0;
	text-indent: -9999px;
}
header .logo a {
	display: block;
	width: 170px;
	height: 38px;
}
	
	
/*! overlay */
header .sp .drawer-overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(297, 297, 297, 0);
}
header .sp .drawer-hamburger {
}
header .sp .drawer--right.drawer-open .drawer-hamburger {
  right: 0;
}
header .sp .drawer-nav ul a {
	color: #fff;
	padding: 10px 0;
	display: block;
}
header .sp .drawer-nav ul a:hover {
	color: rgba(297, 297, 297, 0.7);
	text-decoration: none;
}

	
	
/* ===================================================
   Contents
=================================================== */
.contentsBox {
	padding-top: 60px;
	margin-top: -60px;
}

/* -------------------------------
		Contents Title
------------------------------- */
.contentsTitleArea {
	max-width: 100%;
	min-width: 100%;
	height: auto;
	margin: 0 auto;
}

.contentsTitleArea h2 {
	padding: 50px 0 30px;
	font-size: 1.8em;
}
.contentsTitleArea h2 span.en {
	padding-bottom: 0;
}
.contentsTitleArea h2 span.jp {
	display: block;
	font-size: 0.6em;
	padding-top: 15px;
}


/* -------------------------------
		Contents Background Type
------------------------------- */
.bgBlackBrown {
	padding: 40px 0 30px;
}
	
	
/* ===================================================
   Footer
=================================================== */
footer {
	/*background: #E8E0D6;*/
	padding: 60px 0 0 0;
}
	
/* -------------------------------
		Logo
------------------------------- */
#logo_footer {
}
	
/* -------------------------------
		Footer Navigation
------------------------------- */
#fnavi {
	width: 100%;
	
}
#fnavi,
#fnavi li,
#fnavi li a {
	height: auto;
}
#fnavi li {
	float: none;
	padding-right: 0;
}
footer ul li a {
	display: block;
	width: 100%;
	padding: 20px 0;
	border-top: solid 1px #ccc;
	color: #2D1000;
	letter-spacing: 0.15em;
	text-align: center;
}
footer ul li a:before {
	content: "";
	display: inline-block;
	/*width: 1.5em;*/
	padding-top: 1.5em;
	margin: -0.05em 0.5em 0 0;
	background-size: contain;
	vertical-align: middle;
	}
	
	
/* Instagram */
#fnavi li#footerInstagram {
	padding-right: 0;
}


/* -------------------------------
		Copyrights
------------------------------- */

footer small {
	margin: 10px auto 0;
}

	
}