@charset "utf-8";

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

/* --- common -------------------------------------- */
body {
	background: url(img/bg01.jpg) #f8e3d1;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 15px;
	color: #000;
	line-height: 2.0;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.wrapper {
	width: 960px;
	margin: 0 auto;
}
.scaling-img, #content img, .main_visual img {
	max-width:100%;
	height: auto;
	width /****/:auto;  /*IE8のみ適用*/
}
p, div, li, span { overflow-wrap: break-word;word-wrap: break-word;list-style: none; }
strong, .b { font-weight: bold; }
.show-pc { display: block; }
.show-sp { display: none; }
.show-pc.inline { display: inline; }
table { width: 100%;margin: 0 auto; }
th, td { padding: 8px;border-bottom: 1px dotted #c2b3aa;line-height: 1.6; }
th { text-align: left; }

.fsize13 { font-size: 13px; }

/*-- clear ------------------------------------------*/
.cl { clear: both; }
.clf:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clf { min-height: 1px; }
* html .clf {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}


/*-- modules ----------------------------------------*/
.tal{	text-align: left;	}
.tac{	text-align: center;margin: 0 auto;	}
.tar{	text-align: right;	}
.vat{	vertical-align: top;	}
.vam{	vertical-align: middle;	}
.vab{	vertical-align: bottom;	}
.fl {	float: left;	}
.fr {	float: right;	}
.nowrap{ white-space: nowrap;	}
a {
	color: #000;
	text-decoration: underline;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
a:hover {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	text-decoration: none;
}


/* --- header -------------------------------------- */
#header {
	background: url(img/bg_head.png) repeat-x left top;
}
#header .wrapper {
	position: relative;
	height: 100px;
}
#logo {
	position: absolute;
	top: 30px;
	left: 0;
}

.prop header{
    background:#fff;
    opacity:0.8;
    width:400px;
}
.prop header #logo{ padding-left: 10px; }

/* --- navigation ---------------------------------- */
.navigation {
	position: absolute;
	top: 31px;
	right: 0;
	width: 690px;
}
#nav li {
	float: left;
	width: 16.6%;
	list-style: none;
}
#nav a {
	display: inline-block;
	width: 100%;
	padding-top: 10px;
	text-decoration: none;
	text-align: center;
	letter-spacing: 1px;
}
#nav a span {
	display: inline-block;
	padding: 0 8px;
	font-family: Gautami, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
#nav a span.jp {
	display: block;
	padding: 0 0 8px 0;
	font-size: 12px;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: normal;
}
#nav a:hover span { border-bottom: 3px solid #613a23; }
#nav a:hover span.jp { border: none; }

/* --- layout -------------------------------------- */
html, body { height: 100%; }
.container {
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto!important;
	height:100%;
}
#content p { padding-bottom: 30px; }
.bg {
	margin-bottom: 100px;
	padding: 60px 0 80px;
	background: url(img/bg02.jpg) #896b58;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	color: #fff; 
}

/* --- footer -------------------------------------- */
#footer {
	padding: 40px 0 20px;
	background: url(img/bg03.jpg) repeat #5f371f;
	color: #fff;
	font-size: 14px;
}
#btn_top {
	position: fixed;
	right: 10px;
	bottom: 10px;
}
#footer .fl { width: 630px; }
#footer .fr { line-height: 1.6; }
#footer .ul_skin01 { margin-top: 50px; }
#footer .ul_skin01 li {
	display: inline-block;
	width: 130px;
}
#footer .ul_skin01 li:last-child { width: auto; }
.copy {
	padding-top: 70px;
	font-size: 12px;
	color: #baaea8;
}

/* --- title --------------------------------------- */
h1 {
}
.title01, h2 {
	margin-bottom: 20px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 26px;
	letter-spacing: 1px;
}
.title01 span { padding-left: 10px;font-size: 16px; }
.title02, h3 { font-weight: bold; }
.title03, h4 {
	display: inline-block;
	padding: 0 8px;
	border: 1px solid #fff;
}

/* for IE */
.ie .title01,
.ie .title03 { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }



/* --- icon skin ----------------------------------- */
/* btn */
.btn_skin01 {
	display: inline-block;
	width: 90%;
	max-width: 530px;
	border: 3px solid #311910;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	background: url(img/bg01.jpg) #f8e3d1;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	text-decoration: none;
}
.btn_skin01 .inner {
	display: block;
	height: 100%;
	padding: 4px 0 2px;
	background: rgba(246, 233, 223, 0.7);
}

/* for IE */
.ie .btn_skin01, .ie .btn_skin02 { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

/* tag */
.tag_skin01 {
	display: inline-block;
	margin-left: 10px;
	padding: 0 6px;
	background: #f0e9c1;
	border-radius: 3px;
	font-weight: bold;
	font-size: 12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #311910;
	line-height: 1.4;
}
	

/* dl */
.dl_skin01 dt { font-weight: bold; }
.dl_skin01 dd { padding: 0 0 30px 0; }

/* li */
.ul_skin01 li a {
	padding-left: 10px;
	background: url(img/icon_ar_w_r_s.png) no-repeat left 50%;
	color: #fff;
	text-decoration: none;
}


/* icon */
.icon_ar {
	padding-right: 20px;
	background: url(img/icon_ar_b_r.png) no-repeat right 50%;
}
.icon_comp {
	padding: 10px 0 0 28px;
	background: url(img/icon_company.png) no-repeat left 50%;
}
.icon_recruit {
	padding: 10px 0 0 28px;
	background: url(img/icon_recruit.png) no-repeat left 50%;
}
.icon_concept {
	padding: 10px 0 0 28px;
	background: url(img/icon_concept.png) no-repeat left 50%;
}
.icon_works {
	padding: 10px 0 0 28px;
	background: url(img/icon_works.png) no-repeat left 50%;
}
.icon_contact {
	padding: 10px 0 0 28px;
	background: url(img/icon_contact.png) no-repeat left 50%;
}

/* --- block ------------------------------------- */
/* menu_block */
.slide_area {
	float: left;
	width: 630px;
	height: 420px;
	border: 3px solid #311910;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.bx-wrapper .bx-controls-direction a {
	width: 30px;
	height: 30px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
	bottom: 0;
	top: auto;
	right: 0;
	left: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #8c5434;
}
.menu_block { margin-bottom: 100px; }
.menubox {
	display: table;
	margin-bottom: 20px;
	border: 3px solid #311910;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.menubox a {
	position: relative;
	display: table-cell;
	width: 300px;
	background: rgba(89, 57, 39, 0.7);
	vertical-align: middle;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
.menubox a:hover {
	background: rgba(89, 57, 39, 0.6);
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
.menubox a:hover:after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 10px;
	background: url(img/icon_ar_w_b.png) no-repeat center bottom;
}
.menubox .title {
	font-family: Gautami, Arial, Helvetica, sans-serif;
	font-size: 18px;
	letter-spacing: 1px;
}
.menubox.box01 {
	float: right;
	height: 200px;
}
.menubox.box02 {
	float: left;
	height: 120px;
	margin-left: 20px;
}
.menubox.box02 a {
	padding-top: 10px;
}
.menubox.box02:first-child { margin-left: 0; }


/* news_block */
.news_block { margin-bottom: 100px; }
.ul_news {
	float: left;
	width: 820px;
	margin-left: 60px;
}
.ul_news li { display: table;font-size: 14px; }
.ul_news li span, .ul_news li a { display: table-cell; }
.ul_news li span { padding-right: 35px; }

/* works_block */
.wbox {
	position: relative;
	float: left;
	width: 300px;
	height: 160px;
	margin: 0 0 30px 29px;
	border: 3px solid #311910;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.wbox:nth-child(3n+1) { margin-left: 0; }
.wbox a:hover {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity:1;
	-khtml-opacity: 1;
}
.wbox a .text {
	display: table;
	width: 300px;
	height: 160px;
	color: #fff;
}
.wbox a:hover .text {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
.wbox a .text .inner {
	display: table-cell;
	padding: 10px 30px;
	background: url(img/icon_ar_w_r.png) no-repeat 275px 50%;
	vertical-align: middle;
}
.wbox a .text .date {
	display: block;
	font-size: 12px;
}

/* concept_block company_block */
.concept_block { padding-bottom: 100px; }
.concept_block .fr { width: 630px; }
.company_block .fl { width: 550px; }
.company_block .fr { width: 380px; }
.growimg { box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); }
.table_comp { margin-bottom: 50px; }
.gmap iframe { width: 100%;height: 450px; }

/* recruite_block contact_block */
.recruit_block { padding-bottom: 100px; }
.contact_block th { width: 25%;vertical-align: top; }
input, textarea {
	width: 70%;
	padding: 5px 8px;
	border-radius: 5px;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.contact_block table { margin-bottom: 30px; }

/* privacy_block */
.privady_block { margin-bottom: 100px; }
.privady_block p, .privady_block dl { font-size: 14px; }



/* blog */
#content .blog {
	padding: 50px 0 100px 0;
	border-top: 1px solid #A67257;
}
#content .blog .sidemenu {
	float: left;
	width: 260px;
	line-height: 1.4;
}
#content .blog .sidemenu h3 {
	margin-bottom: 10px;
	
}
#content .blog .sidemenu .newspost_date {
	display: block;
	padding-bottom: 5px;
	font-size: 12px;
}
#content .blog .sidemenu .newspost {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dotted #c2b3aa;
}
#content .blog .sidemenu h3 + ul { display: block; }
#content .blog .main {
	float: right;
	width: 650px;
}
#content .blog .main h2 {
	font-size: 28px;
	font-weight: bold;
}
#content .blog .main .date { padding-bottom: 40px;font-size: 12px; }
#content .blog .main p { padding-bottom: 20px; }
#content .blog .main .page {
	padding-top: 40px;
}
#content .blog .main .post {
	padding: 30px;
	border: 3px solid #311910;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	background: rgba(89, 57, 39, 0.6);
	color: #fff;
}
#content .blog_list .main .post {
	margin-bottom: 20px;
	padding: 0;
}
#content .blog_list .main .post h2 {
	margin-bottom: 10px;
	padding-right: 35px;
	line-height: 1.4;
	font-size: 23px;
}
#content .blog_list .main .post a {
	position: relative;
	display: block;
	padding: 10px;
	color: #fff;
}
#content .blog_list .main .post a:after {
	position: absolute;
	display: block;
	content: "";
	right: 10px;
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	background: url(img/btn_right.png) no-repeat right top;
}
#content .blog_list .main .date { padding-bottom: 10px;  }


/* #Tablet (Portrait)*/
@media only screen and (min-width: 768px) and (max-width: 960px) {
	.container { min-width: 760px; }
	.wrapper { width: 760px;}
	/* #content { padding-bottom: 220px; } */
	#content p { padding-bottom: 20px; }
	
	/* --- header -------------------------------------- */
	
	/* --- navigation ---------------------------------- */
	.navigation {
		width: auto;
	}
	#nav li { width: auto; }
	#nav li a { padding: 5px 0; }
    .prop .navigation { width: 250px; }
	
	/* --- layout -------------------------------------- */
	
	/* --- footer -------------------------------------- */
	#footer .fl, #footer .fr { float: none; }
	#footer .fr { padding-top: 30px; }
	#footer .ul_skin01 { margin-top: 20px; }
	.copy { padding-top: 30px; }

	/* --- title --------------------------------------- */
	
	/* --- icon skin ----------------------------------- */
	/* btn */
	
	/* --- toppage ------------------------------------- */
	.slide_area {
		float: none;
		margin: 0 auto;
	}
	.side { width: 630px;margin: 20px auto 0; }
	.side .box01:first-child { margin-left: 15px; }
	.menubox.box02 {
		width: 32%;
		margin-left: 2%;
	}
	.menubox.box02:first-child { margin-left: 0; }
	
	.ul_news { width: 630px; }
	.wbox { margin: 0 0 30px 30px; }
	.wbox:nth-child(3n+1) { margin-left: 30px; }
	
	.concept_block .fr {
		width: 440px;
	}
	.company_block .fl { width: 100%; }
	.company_block .fr { display: none; }
	.company_block .fr.gmap { display: block;width: 100%;margin-bottom: 50px; }
		
	/* --- blog -------------------------------------------- */
	#content .blog .sidemenu {
		width: 200px;
	}
	#content .blog .main {
		width: 550px;
	}
	#content .blog .sidemenu h3 + ul { display: block; }

} 
/* #Mobile (Landscape) 
@media only screen and (min-width:480px) and (max-width:767px) {*/
@media only screen and (max-width:767px) {
	.wrapper { width: 100%;padding: 0 10px;}
	.show-pc, .show-pc.inline { display: none; }
	.show-sp { display: block; }
	.show-sp.inline { display: inline; }
	.fl, .fr { float: none;margin-left:auto!important;margin-right:auto!important;display:block;}
	table { font-size: 15px; }
	
	/* --- header -------------------------------------- */
	#header .wrapper { height: 80px; }
	#logo { top: 18px;left: 10px; }
	
	/* --- navigation ---------------------------------- */
	.navigation {
		top: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		z-index: 10000;
	}
	#toggle {
		position: absolute;
		right: 10px;
		top: 22px;
	}
	#nav {
		position: absolute;
		top: 80px;
		left: 0;
		display: none;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index:10;
		box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	}
	#nav li {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		border-top: 1px dotted #311910;
		background: rgba(255,255,255,0.9);
	}
	#nav li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 8px 10px 1px 15px;
	}
	#nav a span { padding: 0;line-height: 1.8; }
	#nav a span.jp { display: inline;padding-left:10px; }
	#nav a:hover span { border-bottom: none; }


	
	/* --- layout -------------------------------------- */
	
	/* --- footer -------------------------------------- */
	#footer { font-size: 12px; }
	#footer .fl { width: auto; }
	#footer .ul_skin01 { margin-top: 20px; }
	#footer .fr { margin-top: 20px; }
	.copy { padding-top: 10px; }
	
	/* --- title --------------------------------------- */
	.title01, h2 { margin-bottom: 5px; }
	
	/* --- icon skin ----------------------------------- */
	/* btn */

	/* --- toppage ------------------------------------- */
	.slide_area {
		float: none;
		width: auto;
		max-width: 630px;
		height: 300px;
		margin: 0 auto 20px;
	}
	.bx-viewport { height: 300px!important; }
	
	.menubox { width: 100%;margin: 0 0 20px;line-height: 1.4; }
	.menubox a { padding: 25px 5px 20px 5px!important; }
	.menubox.box01, .menubox.box02 { height: auto; }
	.menubox.box02:first-child, .menubox.box02 { margin-left: 0; }
	
	.ul_news { float: none; width: auto;margin-left: 0; }
	
	.wbox {
		width: 45%;
		max-width: 300px;
		height: 140px;
		margin: 0 2% 20px;
	}
	.wbox:nth-child(3n+1) { margin-left: 10px; }
	.wbox a .text {
		width: 101%;
		height: 140px;
	}
	.wbox a .text .inner {
		padding: 10px;
		background: url(img/icon_ar_w_r.png) no-repeat right 50%;
	}
	.concept_block .fl { margin-top: 20px; }
	.concept_block .fr, .company_block .fl { width: 100%; }
	.company_block .fr { margin-top: 20px; }
	.company_block .fr { display: none; }
	.company_block .fr.gmap { display: block;width: 100%;margin-bottom: 30px; }
	.company_block .fr.gmap iframe { height: 300px; }
	.recruit_block { margin-bottom: 40px; }
	
	.menu_block, .news_block, .bg, .concept_block, .company_block, .privady_block { margin-bottom: 40px; }
	.contact_block { margin-top: 30px; }
	.bg { padding: 20px 0 30px; }
	
	.contact_block th {
		display: block;
		width: 100%;
		padding-bottom: 0;
		border-bottom: 0;
	}
	.contact_block td {
		display: block;
		width: 100%;
		padding-top: 0;
	}
	input, textarea { width: 100%; }

	/* --- blog ---------------------------------------- */
	#content .blog { padding: 20px 10px; }
	#content .blog .sidemenu {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	#content .blog .sidemenu h3 {
		position: relative;
		padding: 5px 10px;
		border: 2px solid #311910;
		background: rgba(89, 57, 39, 0.7);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
		font-size: 18px;
		color: #fff;
		font-weight: normal;
	}
	#content .blog .sidemenu h3:after {
		position: absolute;
		display: block;
		right: 10px;
		top: 50%;
		content: "";
		width: 15px;
		height: 15px;
		margin-top: -8px;
		background: url(img/btn_left.png) no-repeat right top;
		background-size: 15px 15px;
		transform:rotate(-90deg);
	}
	#content .blog .sidemenu h3.open:after { transform:rotate(90deg) }
	#content .blog .sidemenu h3 + ul {
		display: none;
		font-size: 13px;
	}
	#content .blog .sidemenu .newspost {
		margin-bottom: 3px;
		padding: 8px;
	}
	#content .blog .sidemenu .newspost_date { padding-bottom: 0; }
	#content .blog .main {
		float: none;
		width: 100%;
	}
	#content .blog .main .post {
		padding: 10px;
		font-size: 13px;
	}
	#content .blog .main .post h2 {
		padding-top: 10px;
		font-size: 16px;
	}
	#content .blog .main .date {
		padding-bottom: 20px;
	}
	#content .blog .main .page {
		padding: 20px 0;
		text-align: center;
		line-height: 2.0;
	}
	#content .blog_list .main .post { padding: 0; }


}


@media only screen and (max-width:479px) {
	body { line-height: 1.6; }
	.ul_news li span, .ul_news li a { display: block; }
	.ul_news li a { margin-bottom: 15px; }
	table th, table td { display: block; }
	table th { margin-top: 8px;padding-bottom: 0;padding-top: 0;border-bottom: 0;border-left: 5px solid #311910;line-height: 1; }
	table td { font-size: 13px; }
	.privady_block .title01 span { display: block; }

}
/* #Print Fixes */
@media print {
   * {
      color:#000 !important;
	  background:transparent !important;
      box-shadow:none !important;
      text-shadow:none !important;
   }
   	
   @page { margin:0.5cm; }	
   p, h2, h3 { orphans:3; widows:3; }
   h2, h3 { page-break-after:avoid; }   
   thead { display:table-header-group; }
   tr, img { page-break-inside: avoid; }
}