@charset "utf-8";


/*--------------------------------------------------------------
memo: 大枠設定用ファイル (PC、タブレット、スマホ用の記述もこちら)
--------------------------------------------------------*/


/* 汎用設定
------------------------------------------*/

/* お問い合わせ */
.sp{
	display:none;
}

/* 余白初期化 */
.end {
	margin: 0;
	padding: 0;
}

/* ページ上部へ戻るナビ */
#nav-4 {
	position: absolute;
	right: 0;
}

#page-top {
	position: fixed;
	bottom: 20px;
	right: 10px;
	font-size: 77%;
	z-index: 1;
}

#page-top a {
	display: block;
}

.github {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px dashed rgba(0,0,0,.2);
	text-align: center;
}

.box {
	margin: 10px 0;
	padding: 10px 10px 5px 10px;
	background: #fff;
	border:1px solid #e7ddc3;

	border-radius: 3px;
	line-height: 1.4;
	font-size: 12px;

	*zoom: 1;
}

.box .thumb{
	text-align: center;
	padding: 10px 0;
}

.box .btn{
	text-align: right;
	padding: 10px 0 0 0;
}

figure + .box {
	margin-top: -1em;
}

.mainImage{
	position: relative;
}

.mainImage img{
	z-index: 0;
}

.mainImage p{
	position: absolute;
	bottom: 20px;
	z-index:1;
	font-size: 12px;
	color: #fff;
	padding: 0 0 0 10px;
}

/* 大枠設定
------------------------------------------*/

#top {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	z-index: 0;
}

#sub {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	z-index: 0;
}

/* ヘッダ
------------------------------------------*/

#masthead {
	margin: 0 auto;
	height: 76px;
}

#masthead .unit{
	float: left;
	position: relative;
	width: 284px;
	height: 43px;

	padding: 8px 0 0 0;
}


#masthead .unit h1,
#masthead .unit .txt {
	position: absolute;
	width: 230px;
	left: 66px;
	font-size: 11px;
	color: #412300;
	top: 16px;
}

#masthead .unit h2,
#masthead .unit .logo{
	padding: 10px 0;
}

#masthead .unit .logo img{
	max-width:inherit;
}

#masthead .headInq{
	float: right!important;

	position: relative;
	background: url(../images/bg_head_inq.png) no-repeat 0 0;
	width: 458px;
	height: 56px;
	margin: 10px 0 10px 10px;
}

/* お問い合わせボタン背景 */
.headInq .btn{
	/* IE 6,7 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d72900', endColorstr='#ad2100');
	/* IE 8,9 */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#d72900', endColorstr='#ad2100');
	/* IE 10 */
	background: #d72900 -ms-linear-gradient(top, #d72900, #ad2100);
	background: #d72900 -webkit-gradient(linear, left top, left bottom, from(#d72900),to(#ad2100));
	background: #d72900 -moz-linear-gradient(top,#d72900,#ad2100);	
	border: 1px solid #af2100;
	border-radius: 3px;

	behavior: url("../js/PIE.htc");
}

/* お問い合わせボタン */
.headInq .btn a{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	padding: 13px 10px 7px 10px;
}

*:first-child+html #masthead .headInq .btn a{
	padding: 13px 10px 13px 10px;
}


#masthead .headInq p{
	position: absolute;
	right: 6px;
	top: 6px;
}

/* サイドナビ
------------------------------------------*/

#sideNav{
	float: right;
	width: 210px;
	padding: 0 0 0 10px;
}

#sideNav .categoryBox{
	background: #fff;
	border:1px solid #e7ddc3;
	border-radius: 3px;

	padding: 0 10px 10px 10px;
}

#sideNav .categoryBox li{
	list-style: none;
	border-bottom: 1px dotted #ccc;
	background:url(../images/icon_arrow.gif) no-repeat right 14px;
}

#sideNav .categoryBox li a{
	display:block;

	padding: 10px 0;
	color: #403018;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#sideNav .categoryBox li.bnr{
	border: none;
	padding: 10px 0 0 0;
	background: none;
	text-align: center;
}

#sideNav .sideInq{
	position: relative;

	background: url(../images/bg_side_inq.gif) 0 0;
	width: 187px;
	height: 260px;

	margin: 10px 0 0 0;
	padding: 10px;

	border: 1px solid #f1930e;
	border-radius: 3px;
}

#sideNav .sideInq img{
	max-width: inherit;
}

#sideNav .sideInq .tel{
	width: 190px;
}

*:first-child+html #sideNav .sideInq .tel{
	margin: 0 0 0 -18px;
}

#sideNav .sideInq h2{
	border-bottom: 4px dotted #ffd393;
	margin: 0 0 10px 0;
}

#sideNav .sideInq p{
	text-align: center;
}

#sideNav .sideInq li{
	list-style: none;
	text-align: center;
	padding: 0 0 5px 0;
}

#sideNav .sideInq .ceo{
	position: absolute;
	bottom: -7px;
	left: 0;
}

#sideNav .ecBox{
	background: #fff;
	border:1px solid #e7ddc3;
	border-radius: 3px;

	padding: 10px;
	margin: 10px 0 0 0;
}

#sideNav .ecBox li{
	list-style: none;
	font-size: 12px;
	text-align: center;
}


/* コンテンツ部分
------------------------------------------*/

#content{
	float: left;
	width: 780px;
}


.area{
	background: #fff;
	border:1px solid #e7ddc3;
	border-radius: 3px;
	line-height: 1.4;
	padding: 10px;
	margin: 0 0 10px 0;
}

.area .unit{
	width: 100%;
}

/* 新着情報
------------------------------------------*/

.news{
	background: #fff;
	border:1px solid #e7ddc3;
	border-radius: 3px;
	line-height: 1.4;
	padding: 10px;
	margin: 0 0 10px 0;
}

.news .unit{
	width: 100%;
}

.news h2{
	width: 100%;
	background: #542d00;
	border-radius: 3px;
	color: #fff;
	padding: 5px 0 3px 0;
}

.news h2 span{
	padding: 0 0 0 10px;
}

.news li{
	width: 100%;
	list-style: none;
	background: url(../images/dot_line.png) repeat-x 0 bottom;
	padding: 10px 0;
}


/* フッタ
------------------------------------------*/

#footer {
	width: 100%;
	height: 200px;

	background:url(../images/foot_line.png) repeat-x 0 0;

	margin: 40px 0 0 0;
	padding: 20px 0 0 0;

	clear: both;
}

#footer .inner{
	width: 1000px;
	margin: 0 auto;
}

#footer aside{
	float: left;
	text-align: left;
	width: 25%;
}

#footer li{
	list-style: none;

}

#footer h3 a{
	color: #333;
}

#footer .copyright{
	width: 100%;
	padding: 20px 0 0 0;
	text-align: center;
}


/* Gallery example
------------------------------------------*/

.gallery a {
  display: block;
  margin-top: .4em;
  margin-bottom: .4em;
}

.gallery img {
  display: block;
  box-shadow: 0 0 0 4px rgba(0,0,0,0);
  -webkit-transition: box-shadow .5s;
  -moz-transition: box-shadow .5s;
  -ms-transition: box-shadow .5s;
  -o-transition: box-shadow .5s;
  transition: box-shadow .5s;
}

.gallery a:hover img,
.gallery a:focus img {
  box-shadow: 0 0 0 4px rgba(0,0,0,1);
}

/* custom gallery gutters */

.gallery {
  margin: 0 -.4em;
}

.gallery .unit {
  padding: 0 .4em;
}


/* Article layout
------------------------------------------*/

.news-articles .unit {
  margin-top: 1em;
  margin-bottom: 1em;
}

.news-articles .unit {
  border-left: 1px solid rgba(0,0,0,.2);
}

.news-articles .unit:first-child {
  border-left: none;
}

.news-articles figure {
  margin-top: 0;
}


.unit, .field-unit {
  margin: 0; /* Remove if you already reset margins */
  display: inline-block;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
}

.field-unit  {
  display: block;
} 



/* GUTTERS 
   Gutter set directly on units (thanks border-box)
--------------------------------------------------------*/

.unit,
.field-unit {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}




/* OLDIE 
   Some IE7 patching (optional)
--------------------------------------------------------*/

.unit {
  *display: inline;
}

.unit,
.field-unit {
  *margin-right: -1px;
  *padding: 0;
  *zoom: 1;
}




/* UNITS 
   These divider classes are set on .ingrid container
--------------------------------------------------------*/

.zero         >   .unit   { width: 100%; }
.in-halves    >   .unit   { width: 50%; }
.in-thirds    >   .unit   { width: 33.33333%; } 
.in-fourths   >   .unit   { width: 191px; }
.in-fifths    >   .unit   { width: 20%; } 
.in-sixths    >   .unit   { width: 16.66666%; }
.in-sevenths  >   .unit   { width: 14.28571%; }


/* SPATIALS
   The span-x classes are set on individual .units
--------------------------------------------------------*/

/* Spatial units in thirds */
.in-thirds    >   .span-two   { width: 66.66666%; }

/* Spatial units in fourths */
.in-fourths   >   .span-two   { width: 50%; }
.in-fourths   >   .span-three { width: 75%; }

/* Spatial units in fifths */
.in-fifths    >   .span-two   { width: 40%; }
.in-fifths    >   .span-three { width: 60%; }
.in-fifths    >   .span-four  { width: 80%; }

/* Spatial units in sixths */
.in-sixths    >   .span-two   { width: 33.33333%; }
.in-sixths    >   .span-three { width: 50%; }
.in-sixths    >   .span-four  { width: 66.66666%; }
.in-sixths    >   .span-five  { width: 83.33333%; }

/* Spatial units in sevenths */
.in-sevenths  >   .span-two   { width: 28.57142%; }
.in-sevenths  >   .span-three { width: 42.85714%; }
.in-sevenths  >   .span-four  { width: 57.14285%; }
.in-sevenths  >   .span-five  { width: 71.42857%; }
.in-sevenths  >   .span-six   { width: 85.71428%; }


/* Breakpoint examples
------------------------------------------*/
@media only screen and (min-width: 800px) and (max-width: 1000px){

/* サイドナビ */
#sideNav{
	float: left;
	width: 780px;
	padding: 0;
}

#sideNav .sideInq{
	float: left!important;
	margin: 10px 0 0 0!important;
	padding: 10px 0 80px 0!important;
	width: 99.7%!important;
}

#sideNav .sideInq .tel{
	width: 350px!important;
	margin: 0 auto;
}

#sideNav .categoryBox{
	margin: 10px 0 0 0;
}

#sideNav .ecBox{
	float: left!important;
	padding: 10px 0 0 0!important;
	width: 99.7%!important;
}

}
	
@media only screen and (max-width: 800px) {

/* タブレット向け
================================================*/

	/* 汎用設定 */
	body{
		font-size: 20px!important;
	}

	.box{
		font-size: 16px!important;
	}

	.unit.span-two{
		width: 98%;
		margin: 0 0 0 10px;
	}

	.ceo{
		display:none;
	}

	/* 新着 */
	.news{
		width: 95%;
		margin: 0 auto 10px auto;
	}
	
	/* お問い合わせ画像のスイッチ */
	.normal{
		display: none;
	}

	.sp{
		display: inherit;
	}

	/* ヘッダ */
	#masthead .headInq .btn a{
		padding: 13px 10px 9px 10px!important;
	}

	.headInq .btn a{
		padding: 18px 10px 13px 10px!important;
	}

	/* サイドナビ */
	#sideNav .sideInq{
		float: left!important;
		margin: 10px 0 0 0!important;
		padding: 10px 0 80px 0!important;
		width: 99.7%!important;
	}

	#sideNav .sideInq .tel{
		width: 350px!important;
		margin: 0 auto;
	}

	#sideNav{
		float: none;
		width: 98%;

		margin: 10px auto;
		padding: 0;
	}



	#sideNav .ecBox{
		float: left!important;
		padding: 10px 0 0 0!important;
		width: 99.7%!important;
　　　　margin: 10px 0!important;
	}

　　#sideNav .side_bnr img{
	　　width: 100%;
　　}

	#sideNav .categoryBox li.bnr a{
	display: inline!important;
	}

	/* コンテンツ */
	#content{
		float: none;
		width: inherit;
	}

	/* フッタ */
	#footer{
		font-size: 16px;
	}

	#footer .inner{
		width: inherit!important;
	}

	.in-fourths > .unit { width: 48%; margin: 0 3px 0 8px;}

}


@media only screen and (min-width: 481px) and (max-width: 767px) {

/* 中間設定
================================================*/

#masthead .unit{
	float: none;
	width: 284px;
	margin: 0 auto;
}

.unit, .field-unit{
	display: inherit;
}

#masthead{
	height: 76px;
}

#masthead .headInq{
	display: none;
}

.headInq .btn{
	padding: 10px 0!important;
}

.in-fourths > .unit{
	width: 98%!important;
}

#top .commonBox04{
	margin: 0!important;
}

#top .commonBox04 .summery01{
	width: 95%!important;
	margin: 0 0 10px 7px!important;
}

#footer{
	font-size: 16px;
}

#footer aside{
	width: 50%;
}

}

@media only screen and (max-width: 480px) {

/* スマホ向け
================================================*/

#masthead .unit{
	float: none;
	width: 284px;
	margin: 0 auto;
}

	/* 汎用設定 */
	.zero{
		display:none;
	}

	.box{
		font-size: 20px!important;
	}

	/* 新着 */
	.news{
		width: 90%;
		margin: 0 auto 20px auto;
	}

	/* お問い合わせ画像のスイッチ */
	.normal{
		display: none;
	}

	.sp{
		display: inherit;
	}

	.sp2{
		display: none;
	}

	/* お問い合わせボタン */
	.headInq .btn{
		width: 90%;
		margin: 0 auto;
	}

	.headInq .btn a{
		padding: 16px 0!important;
	}

#masthead .unit{
	float: none;
	width: 284px;
	margin: 0 auto;
}


/* ヘッダ */
#masthead .unit{
	margin: 0 auto 35px auto!important;
}

#masthead .unit h1{
	position: absolute!important;	
	top: 16px;
	left: 66px;
}

#masthead .headInq{
	display: none;
}

	/* サイドナビ */
	#sideNav{
		float:none!important;
		width: 95%;
		margin: 10px auto;
	}

	#sideNav .sideInq .tel{
		width: 90%!important;
	}

	/* フッタ */
	#footer {
		height: inherit;
		background: none;
		margin: 0!important;
		padding: 0!important;
		font-size: 20px!important;
	}

	#footer aside{
		width: 91%!important;
		margin: 10px auto!important;
		padding: 10px;
		background: #fff;
		border: 1px solid #E7DDC3;

		float: none;
		text-align: left;
		width: 100%;
		border-radius: 3px;
	}

	.news-articles .unit:nth-child(3) {
		border-left: none;
	}


/* 汎用部分 */

	/* サマリ */
	.in-fourths > .unit {
		width: 95%;
		margin: 0 auto 10px auto!important;
	}

	.unit, .field-unit {
		display: inherit!important;
	}

	.cnt{
		width: inherit!important;
		margin: 0!important;
		padding: 0!important;
	}

}

@media only screen and (max-width: 320px) {

/* i-phone3向け
================================================*/

	/* お問い合わせ */
	.normal{
		display: none;
	}

	.sp{
		display: inherit;
	}

	#masthead .headInq{
		position: relative!important;
		background: url(../images/bg_head_inq02.png) no-repeat 0 0!important;
		width: 310px;
		height: 134px;
	}

	#masthead .unit{
		width: 100%;
	}

	#masthead .unit h1, #masthead .unit .txt{
		width: inherit;
	}

	#masthead .unit .logo img{
		max-width: 100%;
	}

}