@charset "utf-8";

/* ========================================================
	contents css => 下層ページ用css
======================================================== */

/* ページタイトル
============================================================================================================ */
h1 {
	width: 950px;
	margin: 0 auto 0;
}

@media screen and (max-width: 680px) {
	h1 {
		width: auto;
		height: 80px;
		margin: 0 0 0;
		padding: 26px 10px 0;
		background: url(../images/parts/h1_bg_sp.jpg) no-repeat left;
		-webkit-background-size: cover;
		background-size: cover;
		color: #fff;
		font-size: 20px;
		text-shadow: 0 0 3px rgba(0,0,0,1);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		letter-spacing: 3px;
	}
	h1 img {
		display: none;
	}
	h1:before {
		content: attr(data-label);
	}
}




/* コンテンツエリア
============================================================================================================ */
#contentsArea {
	float: right;
	width: 792px;
	padding-bottom: 18px;
	background: url(../images/contents_bg_bottom.gif) no-repeat bottom;
}
#contentsContainer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#contentsInner {
	background-image: url(../images/contents_bg.gif);
}
#contentsInner2 {
	padding: 25px 20px 10px;
	background: url(../images/contents_bg_top.gif) no-repeat;
}


@media screen and (max-width: 680px) {
	#contentsArea {
		float: none;
		width: auto;
		background: none;
		padding-bottom: 0;
	}
	#contentsInner {
		background: none;
	}
	#contentsInner2 {
		padding: 0;
		background: none;
	}
}



/* サイドエリア
============================================================================================================ */
#sideArea {
	position: relative;
	top: -3px;
	float: left;
	width: 158px;
	font-size: 92%;
}
#sideArea dl {
	zoom: 1;
}
#sideArea dt {
	border-bottom: 1px solid #c9c9c9;
}
#sideArea dd {
	padding-top: 2px;
	border-top: 1px solid #ffffff;
}
#sideArea li {
	padding: 0.4em 0.5em 0.4em 14px;
	background: url(../images/arrow.gif) no-repeat 1px 0.8em;
	border-bottom: 1px dotted #adaaa7;
}
#sideArea li.has_under {
	background-image: url(../images/arrow_under.gif);
}
#sideArea li li {
	margin-top: 0.4em;
	padding-left: 0;
	padding-bottom: 0;
	background: none;
	border-top: 1px dotted #adaaa7;
	border-bottom: none;
}
#sideArea a {
	color: #313131;
}
#sideArea a:link, #sideArea a:visited {
	text-decoration: none;
}
#sideArea a:hover, #sideArea a:active {
	text-decoration: underline;
}
#sideArea dd strong,
#sideArea dd strong a {
	color: #2f8efa;
	font-weight: normal;
}


@media screen and (max-width: 680px) {
	#sideArea {
		float: none;
		width: auto;
		font-size: 100%;
		display: none;
	}
	#sideArea.nav {
		display: block;
		margin-top: 20px;
	}
	#sideArea.nav dt {
		padding: 0.2em 1em;
		background-color: #614115;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
	}
	#sideArea.nav dt:before {
		content: "contents guide";
	}
	#sideArea.nav dt.recent:before {
		content: "recent news";
	}
	#sideArea.nav dt.archives:before {
		content: "archives";
	}
	#sideArea.nav dt img {
		display: none;
	}
	#sideArea li {
		padding-left: 20px;
		background-position: 5px 0.8em;
	}
}


/* h2
============================================================================================================ */
h2.text {
	height: 28px;
	padding: 6px 14px 0;
	background: url(../images/title_bg.gif) no-repeat;
	color: #ffffff;
	font-size: 109%;
}

/* nextPrev
============================================================================================================ */
#nextPrev {
	text-align: center;
}
#nextPrev img {
	vertical-align: middle;
}
#nextPrev img.no-link {
	filter: alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
}

@media screen and (max-width: 680px) {
	#nextPrev {
		margin-top: 40px;
	}
	#nextPrev a {
		display: inline-block;
		padding: 0.1em 1em;
		text-decoration: none;
		background: url(../images/parts/title_bg_sp.png);
		border: 2px solid #ccc;
		border-radius: 30px;
		color: #fff;
		font-size: 14px;
	}
	#nextPrev a:before {
		content: attr(data-label);
	}
	#nextPrev img {
		display: none;
	}
}




/* mainArea
============================================================================================================ */
#mainArea {
	margin: 0 12px 25px;
	font-size: 109%;
}



/* table
============================================================================================================ */
table.basic {
	width: 100%;
	background-color: #a0a0a0;
}
table.basic th,
table.basic td {
	padding: 0.5em 1em;
}
table.basic th {
	background-color: #e9eef5;
}
table.basic td {
	background-color: #f7fafc;
}

@media screen and (max-width: 680px) {
	table.basic th,
	table.basic td {
		padding: 0.3em 0.5em;
		font-size: 92%;
	}
}


/* pagetop
============================================================================================================ */
.pagetop {
	text-align: right;
	margin: 40px 5px 0;
	font-size: 92%;
}
@media screen and (max-width: 680px) {
	.pagetop {
		margin: 30px 10px 0;
	}
	.pagetop a {
		padding: 0.3em 0.8em;
	}
}


/* 新着情報
============================================================================================================ */
#newsList {
	margin: 20px 5px 40px;
}
#newsList dt {
	float: left;
	color: #333333;
}
#newsList dd {
	margin-bottom: 0.7em;
	padding-bottom: 0.7em;
	padding-left: 7em;
	border-bottom: 1px dotted #cccccc;
}
#newsList a {
	color: #2f8efa;
}

.date {
	margin: 10px 5px 20px;
	color: #805300;
}
#newsBody {
	margin: 0 5px 40px;
}
#newsBody:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}


#newsBody a {
	color: #2f8efa;
}
#newsBody img {
	max-width: 100%;
	height: auto;
}
#newsBody p {
	margin-bottom: 1.5em;
}

@media screen and (max-width: 680px) {
	#newsList {
		margin: 20px 10px;
	}
	.date {
		margin: 5px 10px 15px;
	}
	#newsBody {
		margin: 0 10px 20px;
	}
}









/* アート工業について
============================================================================================================ */
/* 社長挨拶
----------------------------------------------------------------------------------------- */
#messageArea {
	margin: 3px 5px 0 15px;
	zoom: 1;
}
#messageArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#messageArea p {
	padding: 1em 0 0.3em;
}
#messageArea p.ph {
	float: right;
	padding: 0 0 0 30px;
}
@media screen and (max-width: 680px) {
	#messageArea {
		margin: 3px 10px 20px;
	}
	#messageArea p.ph {
		float: none;
		text-align: right;
		padding: 0 0 0 100px;
	}
}

/* 企業理念
----------------------------------------------------------------------------------------- */
#ideaArea {
	margin: 20px 15px 35px;
}
@media screen and (max-width: 680px) {
	#ideaArea li {
		margin-bottom: 0.6em;
		font-weight: bold;
		list-style: decimal;
		margin-left: 2em;
	}
}

/* 沿革
----------------------------------------------------------------------------------------- */
#historyArea {
	margin: 1em 15px 25px;
}
#historyArea dt {
	float: left;
}
#historyArea dd {
	margin-bottom: 0.5em;
	padding: 0 0 0.5em 9em;
	border-bottom: 1px dotted #b2b2b2;
}
#historyArea dd.last {
	border-bottom: none;
}




/* 事業紹介
============================================================================================================ */
#businessArea {
	font-size: 92%;
	zoom: 1;
}
#businessArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#businessArea .box_title {
	background: url(../../business/images/business_title_bg.gif) no-repeat;
}
#businessArea div {
	float: left;
	width: 242px;
	margin-right: 13px;
	padding-bottom: 30px;
}
#businessArea div.right {
	margin-right: 0;
}
#businessArea div div {
	float: none;
	margin: 0;
	padding: 0;
}
#businessArea h3 {
	margin-bottom: 10px;
}
#businessArea h4 {
	margin: 6px 0 5px;
}
#businessArea ul,
#businessArea dl {
	margin: 0 3px;
}
#businessArea dl ul {
	margin: 0;
}
#businessArea p.btn {
	margin-top: 15px;
	text-align: center;
}

@media screen and (max-width: 680px) {
	#businessArea div {
		float: none;
		width: auto;
		margin-right: 0;
		padding-bottom: 30px;
	}
	#businessArea h3 + p {
		text-align: center;
	}
	#businessArea div div {
		margin: 0 10px;
		height: auto !important;
	}
	#businessArea h4 {
		color: #805300;
		margin-left: 3px;
		font-size: 14px;
		font-weight: normal;
	}
	#businessArea p.btn a {
		display: inline-block;
		padding: 0.1em 1em;
		text-decoration: none;
		background: url(../images/parts/title_bg_sp.png);
		border: 2px solid #ccc;
		border-radius: 30px;
		color: #fff;
		font-size: 14px;
	}
	#businessArea p.btn a:before {
		content: "施工事例を見る";
	}
	#businessArea p.btn a img {
		display: none;
	}
}




/* 施工事例
============================================================================================================ */
#caseArea {

}
#caseArea div {
	margin: 15px 5px 25px 0;
	padding-bottom: 25px;
	border-bottom: 1px dotted #b2b2b2;
	zoom: 1;
}
#caseArea div:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#caseArea div.last {
	border-bottom: none;
}
#caseArea div div {
	float: right;
	width: 360px;
	margin: 0;
	padding: 5px 0 0;
	border-bottom: none;
}
#caseArea h3 {
	padding-bottom: 10px;
	border-bottom: 1px dotted #b2b2b2;
	color: #614115;
	font-size: 117%;
}
#caseArea .txt01 {
	min-height: 5em;
	padding: 1em 0;
	border-bottom: 1px dotted #b2b2b2;
}
#caseArea p {
	padding-top: 1em;
}
#caseArea p.ph {
	float: left;
	padding: 3px;
	border: 1px solid #c9c9c9;
}
@media screen and (max-width: 680px) {
	#caseArea div {
		margin: 15px 0;
		padding: 0 10px;
		padding-bottom: 15px;
	}
	#caseArea div div {
		float: none;
		width: auto;
		padding-top: 10px;
	}
	#caseArea p.ph {
		float: none;
		padding: 0;
		border: 0;
		text-align: center;
	}
	#caseArea h3 {
		padding-bottom: 5px;
	}
	#caseArea .txt01 {
		min-height: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}
	#caseArea p.ph img {
		padding: 3px;
		border: 1px solid #c9c9c9;
	}
}


/* オリジナル商品
============================================================================================================ */
#originalArea {

}
#originalArea h3 {
	padding: 10px 5px;
	border-top: 1px dotted #b2b2b2;
	color: #614115;
	font-size: 117%;
}

@media screen and (max-width: 680px) {
	#originalArea h3 {
		padding-left: 10px;
		padding-bottom: 5px;
	}
}

/* メイン
----------------------------------------------------------------------------------------- */
#originalArea .main {
	margin: 20px 5px 40px;
	zoom: 1;
}
#originalArea .main:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#originalArea .main h3 {
	margin-left: 380px;
	margin-bottom: 10px;
	padding: 0 0 10px;
	border-top: none;
	border-bottom: 1px dotted #b2b2b2;
}
#originalArea .main ul,
#originalArea .main div dl {
	margin-left: 380px;
}
#originalArea .main div dl {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dotted #b2b2b2;
}
#originalArea .main div dt {
	color: #333333;
	font-weight: bold;
}
#originalArea .main div dd {
	margin-bottom: 1em;
}
#originalArea .main .ph {
	float: left;
	width: 364px;
}
#originalArea .main p.ph,
#originalArea .main .ph dt {
	margin-bottom: 12px;
	text-align: center;
}
#originalArea .main p.ph img,
#originalArea .main .ph dt img {
	padding: 3px;
	border: 1px solid #c9c9c9;
}
#originalArea .main p.no-border img {
	padding: 0;
	border: none;
}

@media screen and (max-width: 680px) {
	#originalArea .main {
		margin: 15px 10px 10px;
	}
	#originalArea .main h3 {
		margin-left: 0;
		margin-bottom: 10px;
		padding: 0 0 10px;
		border-top: none;
		border-bottom: 1px dotted #b2b2b2;
	}
	#originalArea .main ul,
	#originalArea .main div dl {
		margin-left: 0;
	}
	#originalArea .main .ph {
		float: none;
		width: auto;
		text-align: center;
	}
	#originalArea .main .ph dd {
		margin-bottom: 20px;
	}
}



/* 標準仕様
----------------------------------------------------------------------------------------- */
#specificationsArea {
	margin: 0 5px 40px;
	border-top: 1px solid #a0a0a0;
}
#specificationsArea h4 {
	padding: 0.5em 1em;
	background-color: #e9eef5;
	border-right: 1px solid #a0a0a0;
	border-left: 1px solid #a0a0a0;
	font-weight: normal;
}
#specificationsArea table th {
	width: 15%;
}
#specificationsArea dl,
#specificationsArea dt {
	float: left;
}
#specificationsArea dd {
	margin-left: 8em;
}
#specificationsArea p {
	margin-left: 25em;
}
@media screen and (max-width: 680px) {
	#specificationsArea dl,
	#specificationsArea dt {
		float: none;
	}
	#specificationsArea dd {
		margin-left: 0;
	}
	#specificationsArea p {
		margin-left: 0;
	}
}

/* 基本仕様
----------------------------------------------------------------------------------------- */
#basicSpecificationsArea {
	margin: 0 5px 40px;
}
#basicSpecificationsArea table .odd * {
	background-color: #e9eef5;
}
#basicSpecificationsArea table .even * {
	background-color: #f7fafc;
}

@media screen and (max-width: 680px) {
	#basicSpecificationsArea {
		margin: 0 10px 20px;
	}
}


/* ドアー開き勝手
----------------------------------------------------------------------------------------- */
#doorArea {
	margin: 0 5px 40px;
	zoom: 1;
}
#doorArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#doorArea dl {
	float: left;
}
#doorArea dd {
	margin-top: 10px;
	text-align: center;
	color: #805300;
}

@media screen and (max-width: 680px) {
	#doorArea {
		margin: 0 10px 20px;
	}
}


/* 標準プラン
----------------------------------------------------------------------------------------- */
#planArea {
	margin: 0 5px 40px;
}
/* 付属金物
----------------------------------------------------------------------------------------- */
#attachmentArea {
	margin: 0 0 40px 5px;
	zoom: 1;
}
#attachmentArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#attachmentArea p {
	float: left;
	margin-right: 10px;
}
#attachmentArea dl {
	float: left;
	width: 112px;
	font-size: 92%;
	line-height: 1.2;
	color: #805300;
}
#attachmentArea dd {
	height: 32px;
	padding-top: 2px;
}
@media screen and (max-width: 680px) {
	#attachmentArea {
		margin: 0 10px 10px;
	}
	#attachmentArea p {
		float: none;
		margin-bottom: 10px;
		margin-right: 0;
		text-align: center;
	}
	#attachmentArea dl {
		width: 33%;
		font-size: 92%;
		line-height: 1.2;
		color: #805300;
	}
}

/* 化粧パーティクルボード品質特性
----------------------------------------------------------------------------------------- */
#particleboardArea {
	margin: 0 5px 40px;
}
#particleboardArea p {
	margin-top: 5px;
}
#particleboardArea th {
	white-space: nowrap;
}
#particleboardArea th.num {
	text-align: center;
}
@media screen and (max-width: 680px) {
	#particleboardArea th {
		white-space: normal;
	}
}
/* 仕上げ
----------------------------------------------------------------------------------------- */
#finishArea {
	margin: 0 0 20px 5px;
	zoom: 1;
}
#finishArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#finishArea p {
	float: left;
}
#finishArea div {
	position: relative;
	top: -20px;
	float: right;
}
#finishArea dl {
	float: left;
	width: 88px;
	text-align: center;
	font-size: 92%;
	line-height: 1.3;
	color: #805300;
}
#finishArea dt img {
	padding: 3px;
	margin-bottom: 5px;
	border: 1px solid #c9c9c9;
}

@media screen and (max-width: 680px) {
	#finishArea {
		margin: 0 10px 10px;
	}
	#finishArea p {
		float: none;
		margin-bottom: 10px;
	}
	#finishArea div {
		top: 0;
		float: none;
	}
	#finishArea dl {
		width: 33%;
		padding-bottom: 10px;
	}
}



/* オプション
----------------------------------------------------------------------------------------- */
#optionArea {
	margin: 0 5px 40px;
}
#optionArea li {
	display: inline;
	margin-right: 1em;
}
#optionArea p {
	margin-top: 0.5em;
}

@media screen and (max-width: 680px) {
	#optionArea {
		margin: 0 10px 20px;
	}
}

/* 施工例
----------------------------------------------------------------------------------------- */
#exampleArea {
	margin: 0 5px 20px;
	padding-left: 40px;
	zoom: 1;
}
#exampleArea:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	line-height: 0;
}
#exampleArea dl {
	position: relative;
	top: -20px;
	float: left;
	padding-left: 40px;
	text-align: center;
	font-size: 92%;
	line-height: 1.3;
	color: #805300;
}
#exampleArea dt {
	margin-bottom: 5px;
}
#example2Area {
	margin: 0 5px 40px;
	text-align: right;
}
#example2Area a {
	color: #4f90e0;
}
#example2Area img {
	margin-bottom: 10px;
}

@media screen and (max-width: 680px) {
	#exampleArea {
		margin: 0 10px 20px;
		padding-left: 0;
	}
	#exampleArea dl {
		top: 0;
		float: none;
		padding-left: 0;
	}
}



/* 画像のみ
----------------------------------------------------------------------------------------- */
#imageArea {
	margin-bottom: 40px;
	padding: 20px 5px 0;
	border-top: 1px dotted #b2b2b2;
}


/* 会社概要
============================================================================================================ */
#campanyArea {
	margin: 1em 15px 25px;
}
#campanyArea dt {
	float: left;
}
#campanyArea dd {
	margin-bottom: 0.5em;
	padding: 0 0 0.5em 9em;
	border-bottom: 1px dotted #b2b2b2;
}
#campanyArea dd.last {
	border-bottom: none;
}



/*404
============================================================================================================ */
#page404 {
	padding: 40px 10px;
	text-align: center;
	font-size: 15px;
}
#page404 h1 {
	color: #000;
	font-size: 30px;
}
#page404 p {
	margin-bottom: 1.5em;
}


@media screen and (max-width: 680px) {
	#page404 {
		padding: 20px 10px;
		font-size: 13px;
	}
	#page404 h1 {
		height: auto;
		padding: 0;
		background: none;
		text-shadow: none;
		font-size: 20px;
	}
	#exampleArea dl {
		top: 0;
		float: none;
		padding-left: 0;
	}
}