@charset "utf-8";

/*
===============================================================================
▼ 詳細スタイル
===============================================================================
*/
/******************************************************************
【目次】
01. TOP
02. 新着情報
03. 田中手帳の手帳イズム
04. 手帳ワンストップサービス
05. 企業情報
06. 事業内容
07. 設備紹介
08. 環境への取り組み
09. 個人情報保護への取り組み
10. サイトマップ
11. リンク
12. お問い合わせ
13. フォーム
14. 404ページ
15. KAKU
******************************************************************/

/* ==========================================
  01. TOP
============================================ */

body#home {
	background-color: #5e5e5e;
}

#home #area-eyecatch {
	background-color: #000000;
}

.banner-list {
	width: 100%;
	max-width: 571px;
	margin: 40px auto 20px;
}

.banner-list li {
	margin-bottom: 15px;
}

.banner-list-pc {
	max-width: 823px;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}

/* --------------------------
  TOP - 新着情報
-------------------------- */
#home #area-news {
	background-color: #f2f2f2;
}

#home #area-news h2 {
	background-color: #000000;
	border-top: 2px solid #4d4d4d;
	border-bottom: 2px solid #4d4d4d;
	color: #ff0000;
	padding: 8px 15px 5px;
}

#home #area-news div.container {
	padding: 15px;
}

#home #area-news div.container ul li {
	margin-bottom: 15px;
}

#home #area-news div.container ul {
	margin-bottom: 20px;
}

#home #area-news div.container ul li a {
	color: #000000;
}

#home #btn-news {
	display: block;
	float: right;
	width: 200px;
	background-color: #5e5e5e;
	text-align: center;
	margin-bottom: 10px;
}

#home #btn-news a {
	display: block;
	padding: 3px 5px;
	color: #ffffff;
	text-decoration: none;
	background: url("../images/arrow.png") no-repeat 10px center;
}

@media screen and (max-width: 400px) {
	#home #btn-news {
		width: 90%;
		max-width: 200px;
		float: none;
		margin: 0 auto 10px;
	}
}



/* ==========================================
  02. 新着情報
============================================ */

#news .area-wp {
	width: 100%;
	padding: 20px 0;
	border-top: 3px solid #626262;
	border-bottom: 3px solid #626262;
}

#news .area-wp ul li {
	border-top: 1px dotted #626262;
	padding: 10px 0
}

#news .area-wp ul li:first-child {
	border-top: none;
}

#news .area-wp dl dt {
	float: left;
	font-weight: bold;
	width: 8em;
}

#news .area-wp dl dd {
	margin-left: 8em;
}

#news .area-wp .news-header {
	border-bottom: 1px dotted #626262;
	padding-bottom: 10px;
	margin-bottom: 20px;
}


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

	#news .area-wp dl dt {
		float: none;
		width: 100%;
	}

	#news .area-wp dl dd {
		margin-left: 0;
	}

}


/* --------------------------
  ページャー
-------------------------- */
.pager {
	width: 100%;
	margin: 30px auto;
	text-align: center;
}

.pager li {
	display: inline-block;
	text-align: center;
	border-bottom: 1px solid #ffffff;
}

.pager li a {
	font-weight: bold;
	background-color: #EAEAEA;
	height: 30px;
	line-height: 30px;
	padding: 5px 10px;
}


.pager li a.selected,
.pager li a:hover {
	text-decoration: none;
	background-color: #000 !important;
	color: #fff !important;
}

/* --------------------------
  記事本文
-------------------------- */
.area-wp .alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}

.area-wp .alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}

.area-wp .aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 1.75em;
}

/* --------------------------
  NEWマーク
-------------------------- */
#news .new {
	background-color: #FF0081;
	padding: 0 4px;
	color: #ffffff;
	font-weight: normal;
	font-size: 11px;
	font-size: 1.1rem;
	margin-left: 10px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}





/* ==========================================
  03. 田中手帳の手帳イズム
============================================ */

#ism .introduction .text {
	float: left;
	width: 78%;
}

#ism .introduction .image {
	float: right;
	width: 20%;
	max-width: 149px;
	text-align: center;
}


#ism .introduction .lower-menu-list {
	margin-top: 30px;
}

#ism .introduction .lower-menu-list li {
	margin-bottom: 10px;
}

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

	#ism .introduction .text {
		float: none;
		width: auto;
	}

	#ism .introduction .image {
		float: right;
		width: 100px;
		padding-left: 5px;
	}

}

/* --------------------------
  ◎手帳づくり70余年の歩み
-------------------------- */
#ism-history .introduction .text {
	float: left;
	width: 78%;
}

#ism-history .introduction .image {
	float: right;
	width: 20%;
	max-width: 149px;
	text-align: center;
}

#ism-history .lower-menu-list {
	width: 100%;
	margin-top: 20px;
}

#ism-history .lower-menu-list li {
	float: left;
	width: 33%;
	margin-bottom: 10px;
}

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

	#ism-history .introduction .text {
		float: none;
		width: auto;
	}

	#ism-history .introduction .image {
		float: right;
		width: 100px;
		padding-left: 5px;
	}

	#ism-history .lower-menu-list {
		margin-top: 50px;
		width: 100%;
	}

}

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

	#ism-history .lower-menu-list li {
		width: 100%;
		max-width: 171px;
		margin: 0 auto;
		float: none;
	}

}

#ism-history .area-menu .btn-list li {
	float: left;
}

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

	#ism-history .area-menu .btn-list li {
		float: left;
		width: 33%;
	}

}

#ism-history .area-story {
	background-color: #FFFAEC;
	border: 1px solid #eee;
	padding: 10px 10px 30px;

	background: linear-gradient(#FFFAEC, #ffffff);

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#ism-history .area-story h3 {
	margin: 10px;
	line-height: 1.3em;
	font-size: 19px;
	font-size: 1.9rem;

}

#ism-history .area-story h3 span {
	font-size: 14px;
	font-size: 1.4rem;
}

#ism-history .area-story .text {
	float: left;
	width: 70%;
}

#ism-history .area-story .image {
	float: right;
	width: 28%;
	max-width: 211px;
}

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

	#ism-history .area-story .text {
		float: none;
		width: auto;
	}

	#ism-history .area-story .image {
		float: right;
		width: 100px;
		padding-left: 5px;
	}

}

/* --------------------------
  ◎田中手帳のエポックメーキング
-------------------------- */
#ism-epoch .introduction .text {

}

#ism-epoch .introduction .image {
	float: right;
	margin-left: 10px;
}

#ism-epoch .epoch-list {
	width: 100%;
}

#ism-epoch .epoch-list li {
	background: url("../../images/ism/epochmaking/light.png") no-repeat left top;
	padding-left: 50px;
	margin-bottom: 20px;
}

#ism-epoch .epoch-list li dl dt {
	font-weight: bold;
	color: #FF9800;
	font-size: 16px;
	font-size: 1.6rem;
}

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

	#ism-epoch .introduction .image {
		width: 100px;
	}

}


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

	#ism-epoch .epoch-list {
		margin-top: 10px;
		width: 100%;
	}

}

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

	#ism-epoch .epoch-list li {
		background-size: 20px 24px;
		padding-left: 30px;
	}

}

/* --------------------------
  ◎手帳づくりノウハウ
-------------------------- */
#ism-knowhow .introduction .text {
	float: left;
	width: 78%;
}

#ism-knowhow .introduction .image {
	float: right;
	width: 20%;
	max-width: 149px;
	text-align: center;
}

#ism-knowhow .lower-menu-list {
	width: 100%;
	margin-top: 20px;
}

#ism-knowhow .lower-menu-list li {
	float: left;
	width: 33%;
	margin-bottom: 10px;
}

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

	#ism-knowhow .introduction .text {
		float: none;
		width: auto;
	}

	#ism-knowhow .introduction .image {
		float: right;
		width: 100px;
		padding-left: 5px;
	}

	#ism-knowhow .lower-menu-list {
		margin-top: 50px;
		width: 100%;
	}

}

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

	#ism-knowhow .lower-menu-list li {
		width: 100%;
		max-width: 171px;
		margin: 0 auto;
		float: none;
	}

}

/* --------------------------
  Professional Mind
-------------------------- */
#ism-knowhow .staff {
	border: 1px solid #5A5A5A;

	background-color: #ccc;
	/*width: 100%;*/
}

#ism-knowhow .staff th,
#ism-knowhow .staff td {
	border: 3px solid #5A5A5A;
}

#ism-knowhow .staff img {
	display: block;
	width: 100%;
}

#ism-knowhow .modal-contents .image {
	width: 30%;
	float: left;
}

#ism-knowhow .modal-contents dl {
	width: 68%;
	float: right;
}

#ism-knowhow .modal-contents dl dt {
	background-color: #84CBE4;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 5px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#ism-knowhow .modal-contents dl dt span {
	font-weight: normal;
}

#ism-knowhow .modal-contents dl dd {
	text-align: left;
}

#ism-knowhow .remodal {
	background-color: #E9EFF2;
	border: 3px solid #C1CBD2;
	padding: 35px 10px;
}



/* ==========================================
  04. 手帳ワンストップサービス
============================================ */

#service .introduction .text {
	float: left;
	width: 78%;
}

#service .introduction .image {
	float: right;
	width: 20%;
	max-width: 149px;
	text-align: center;
}


#service .introduction .lower-menu-list {
	margin-top: 30px;
}

#service .introduction .lower-menu-list li {
	margin-bottom: 10px;
}

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

	#service .introduction .text {
		float: none;
		width: auto;
	}

	#service .introduction .image {
		float: right;
		width: 80px;
		padding-left: 5px;
	}

}

/* --------------------------
  ◎手帳製作の流れ
-------------------------- */
#service-flow .flow-list li {
	writing-mode: vertical-lr;
	float: left;
	width: 45px;
	text-align: center;
	background: url("../images/arrow-orange.png") no-repeat 40px center;
	margin-right: 5px;
}

#service-flow .flow-list li:last-child {
	background: none;
}

#service-flow .flow-list li a {
	display: block;
	height: 210px;
	padding: 0 5px;
	background-color: #CEDFEC;
	border: 1px solid #0060A2;
	font-weight: bold;
	color: #0060A2;
	text-decoration: none;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#service-flow .flow-list li.lower {
	background: none;
	width: 110px;
}

#service-flow .flow-list li.lower div {
	display: block;
	float: left;
	width: 120px;
}

#service-flow .flow-list li.lower div.top {
	margin-bottom: 10px;
}

#service-flow .flow-list li.lower div p {
	width: 45px;
	background: url("../images/arrow-orange.png") no-repeat 40px center;
}

#service-flow .flow-list li.lower div p.wide {
	background: url("../images/arrow-orange.png") no-repeat 48px center;
	width: 65px;
}

#service-flow .flow-list li.lower div.top p.wide {
	background: url("../images/arrow-orange.png") no-repeat 55px center;
	font-size: 12px;
	font-size: 1.2rem;
}

#service-flow .flow-list li.lower a {
	height: 100px;
}

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

	#service-flow .flow-list li {
		writing-mode: horizontal-tb;
		float: none;
		width: 100%;
		height: 40px;
		line-height: 30px;
		text-align: center;
		background: url("../images/arrow-orange-ld.png") no-repeat bottom center;
		margin-bottom: 5px;
	}

	#service-flow .flow-list li a {
		height: auto;
		padding: 0;
	}

	#service-flow .flow-list li.lower {
		background: none;
		height: auto;
		width: 100%;
	}

	#service-flow .flow-list li.lower div {
		float: none;
		width: 100%;
		height: auto;
	}

	#service-flow .flow-list li.lower div.top {
		margin-bottom: 0;
	}

	#service-flow .flow-list li.lower div p {
		width: 49%;
		height: 55px;
		float: left;
		margin-right: 2%;
		background: url("../images/arrow-orange-ld.png") no-repeat center bottom;
	}

	#service-flow .flow-list li.lower div.bottom p {
		height: 40px;
	}

	#service-flow .flow-list li.lower div.top p {
		background: url("../images/arrow-orange-ld.png") no-repeat center 43px;
		margin-bottom: 5px;
	}

	#service-flow .flow-list li.lower div p:nth-child(2n) {
		margin-right: 0;
	}

	#service-flow .flow-list li.lower div p.wide {
		background: url("../images/arrow-orange-ld.png") no-repeat center bottom;
		width: 49%;
	}

	#service-flow .flow-list li.lower div.top p.wide {
		background: url("../images/arrow-orange-ld.png") no-repeat bottom center;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.6em;
	}

	#service-flow .flow-list li.lower a {
		height: auto;
	}

}

/* --------------------------
  フロー
-------------------------- */
#service-flow .flow-detail-list li {
	background-color: #FEEFAC;
	padding: 15px;
	margin-bottom: 15px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#service-flow .flow-detail-list li .step {

}

#service-flow .flow-detail-list li .step .text {
	float: left;
	width: 70%;
}

#service-flow .flow-detail-list li .step .image {
	float: right;
	width: 28%;
	max-width: 200px;
	text-align: center;
}

#service-flow .flow-detail-list li .step .image-list li {
	float: left;
	margin: 0;
	padding: 5px;
}

#service-flow .flow-detail-list li .step .image-list li .image-num p {
	float: left;
	width: 50%;
}

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

	#service-flow .flow-detail-list li .step .text {
		float: none;
		width: auto;
	}

	#service-flow .flow-detail-list li .step .image {
		float: right;
		width: 120px;
		padding-left: 5px;
	}

}

#service-flow .flow-detail-list li .step-link {
	margin-top: 10px;
}

#service-flow .flow-detail-list li .step-link a {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

#service-flow .flow-detail-list li .step-link p.prev {
	float: left;
	background: url("../images/arrow-orange-ld2.png") no-repeat left center;
	padding-left: 10px;
}

#service-flow .flow-detail-list li .step-link p.next {
	float: right;
	background: url("../images/arrow-orange-ld.png") no-repeat right center;
	padding-right: 10px;
}

/* --------------------------
  ◎手帳制作時の注意点
-------------------------- */
#service-point .introduction .text {
	float: left;
	width: 293px;
	margin-right: 30px;
}

#service-point .introduction .lower-menu-list li {
	margin-bottom: 10px;
}

@media screen and (min-width: 401px) and (max-width: 540px) {

	#service-point .introduction .text {
		width: 70%;
		margin-right: 0;
	}

	#service-point .introduction .image {
		float: right;
		width: 30%;
		padding-left: 10px;
	}

}

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

	#service-point .introduction .text {
		float: none;
		width: 100%;
	}

	#service-point .introduction .image {
		float: none;
		width: 173px;
		padding: 0;
		margin: 0 auto;
	}

}


/* --------------------------
  内容
-------------------------- */
#service-point .area {
	background-color: #FFFAEA;
	margin-bottom: 30px;
}

#service-point .area h3 {
	background-color: #FFE07E;
	padding: 3px 10px;
}

#service-point .area .area-contents {
	padding: 0 10px 20px;
}

#service-point .area .area-contents ul li {
	margin-bottom: 10px;
}

#service-point .area .area-contents ul li {
	margin-bottom: 10px;
}

#service-point .area .area-contents .modal-thumbnail,
#service-point .area .area-contents .image-default {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

#service-point .area .area-contents .modal-thumbnail .thumbnail {
	width: 200px;
}

#service-point .area .area-contents .modal-thumbnail .thumbnail-l {
	width: 247px;
}

#service-point .area .area-contents .output dd {
	margin-left: 1em;
}

#service-point .area .area-contents .example {
	/*padding-left: 1em;*/

}

#service-point .area .area-contents .set-image .image {
	float: right;
}

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

	#service-point .area .area-contents .set-image .text {
		margin-right: 10px;
	}

	#service-point .area .area-contents .set-image .image {
		width: 110px;
	}

}


#service-point .area .area-contents table.compare {
	border: 1px solid #ccc;
	margin-left: 10px;
}

#service-point .area .area-contents table.compare th,
#service-point .area .area-contents table.compare td {
	border: 1px solid #ccc;
	padding: 5px 20px;
}

#service-point .area .area-contents table.compare th {
	background-color: #FFE07E;
}

#service-point .area .area-contents table.compare td {
	background-color: #ffffff;
}

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

	#service-point .area .area-contents table.compare {
		width: 100%;
		margin: 0 auto;
		border: none;
	}

	#service-point .area .area-contents table.compare th,
	#service-point .area .area-contents table.compare td {
		border-bottom: none;
		display: block;
		width: 100%;
		padding: 5px;
		text-align: left;
	}

	#service-point .area .area-contents table.compare th {
		border-bottom: none;
	}

	#service-point .area .area-contents table.compare tr:last-child td {
		border-bottom: 1px solid #ccc;
	}

}



/* ==========================================
  05. 企業情報
============================================ */

/* --------------------------
  ◎ごあいさつ
-------------------------- */
#greeting .tanaka-greeting .text {
	float: left;
	width: 78%;
}

#greeting .tanaka-greeting .image {
	float: right;
	width: 20%;
	max-width: 155px;
	text-align: center;
}


#greeting .tanaka-greeting .signature {
	width: 74%;
	text-align: right;
	margin-top: 20px;
}

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

	#greeting .tanaka-greeting .text {
		float: none;
		width: auto;
	}

	#greeting .tanaka-greeting .image {
		float: right;
		width: 120px;
		padding-left: 5px;
	}

	#greeting .tanaka-greeting .signature {
		width: 100%;
	}

}

/* --------------------------
  ◎企業理念
-------------------------- */
.philosophy-list {
	margin-left: 2em;
	text-indent: -2em;
}

.philosophy-list li {
	margin-bottom: 1.5em;
}

/* --------------------------
  ◎シンボルマーク
-------------------------- */
dl.career_list dt, dl.career_list dd {display:inline-block; vertical-align:top;}
dl.career_list dt {width:15%;}
dl.career_list dd {width:75%; margin-inline-start:unset;}

/* --------------------------
  ◎会社概要
-------------------------- */
#profile table {
	width: 100%;
}

#profile table th {
	padding: 8px 5px 5px;
}

#profile table td {
	padding: 8px 5px 16px;
}

#profile table th {
	font-weight: normal;
	color: #FD9900;
	text-align: left;
	border-bottom: 1px solid #999999;
}

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

	.branch-list dd .newline:after {
		content: "\A";
		white-space: pre;
	}

}

/* --------------------------
  沿革
-------------------------- */
table #history-table {
	table-layout: fixed;
}

table #history-table td {
	vertical-align: top;
	padding-bottom: 8px;
}

table #history-table td:nth-child(1),
table #history-table td:nth-child(2) {
	text-align: right;
	white-space: nowrap;
}

table #history-table td:nth-child(1) {
	width: 5em;
}

table #history-table td:nth-child(2) {
	width: 3em;
}

table #history-table td:nth-child(3) {
	padding-left: 1em;
}


#profile .item-list li {
	margin-bottom: 0.5em;
}

#profile .machine-list li {
	/*margin-bottom: 0.5em;*/
}

/* --------------------------
  ◎事業所案内
-------------------------- */
#office .image-01 {
	width: 100%;
	/*max-width: 513px;*/
	margin: 0 auto 30px;
}

#office .image-01 img {
	width: 100%;
}

#office .office-list li {
	margin-bottom: 60px;
}

#office .office-list dl {
	width: 44%;
	float: left;
}

#office .office-list dl dt {
	font-weight: bold;
	font-size: 16px;
	font-size: 1.6rem;
	border-left: 4px solid #E18F00;
	padding-left: 8px;
	margin-bottom: 10px;
}

#office .office-list dl dd.access {
	margin-top: 10px;
}

#office .office-list dl dd.access p.title {
	background-color: #FFD368;
	font-weight: bold;
	padding: 2px 0 2px 8px;
	margin-bottom: 10px;
}

#office .office-list .map {
	width: 55%;
	height: 300px;
	float: right;
	position: relative;
	overflow: hidden;
	background-color: #eeeeee;
}

#office .office-list .map iframe,
#office .office-list .map object,
#office .office-list .map embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
}

@media screen and (min-width: 501px) and (max-width: 600px) {

	#office .office-list dl {
		width: 52%;
	}

	#office .office-list .map {
		width: 47%;
	}

}

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

	#office .office-list dl {
		float: none;
		width: 100%;
		margin-bottom: 10px;
	}

	#office .office-list .map {
		width: 100%;
	}

}



/* ==========================================
  06. 事業内容
============================================ */

#business h3.business {
	font-size: 19px;
	font-size: 1.9rem;
}

#business h3.business,
#business h4.business {
	margin-bottom: 0;
}

#business .image-01,
#business .image-02 {
	width: 100%;
	max-width: 497px;
	margin: 0 auto;
}



/* ==========================================
  07. 設備紹介
============================================ */

#facilities .machine-list {
	width: 45%;
	float: left;
}

#facilities .machine-list.right {
	float: right;
}

#facilities .machine-list li span {
	float: right;
}

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

	#facilities .machine-list {
		width: 100%;
		float: none;
	}

	#facilities .machine-list.right {
		float: none;
	}

	#facilities .machine-list li span {
		float: none;
	}

	#facilities .machine-list li span:before {
		content: " ";
	}

}

#facilities .image-01 {
	width: 100%;
	max-width: 489px;
	margin: 0 auto;
}



/* ==========================================
  08. 環境への取り組み
============================================ */



/* ==========================================
  09. 個人情報保護への取り組み
============================================ */

.cert-description {

}

.cert-description .text {
	width: 80%;
	float: left;
}

.cert-description .image {
	width: 18%;
	float: right;
	text-align: center;
}

@media screen and (min-width: 601px) and (max-width: 828px) {

	.cert-description .text {
		width: 72%;
	}

	.cert-description .image {
		width: 28%;
	}

}

@media screen and (min-width: 501px) and (max-width: 600px) {

	.cert-description .text {
		width: 69%;
	}

	.cert-description .image {
		width: 31%;
	}

}

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

	.cert-description .text {
		width: 100%;
		float: none;
		margin-bottom: 10px;
	}

	.cert-description .text .initials {
		text-align: center;
	}

	.cert-description .image {
		width: 100%;
		float: none;
	}

}

#privacy .privacy-list {
	font-weight: bold;
	margin-bottom: 20px;
}

#privacy .privacy-list li {
	margin-bottom: 10px;
}

#privacy .privacy-list li span {
	font-weight: normal;
}



/* ==========================================
  10. サイトマップ
============================================ */

.page-list li {
	background: url("../../images/info/list-arrow.png") no-repeat left center;
	background-size: 15px 15px;
	padding-left: 20px;
	margin-bottom: 1em;
}

.page-list li.lower {
	margin-left: 20px;
	background: url("../../images/info/list-arrow-s.png") no-repeat left center;
	padding-left: 15px;
}



/* ==========================================
  11. リンク
============================================ */

#links .link-list li {
	margin-bottom: 20px;
	border-left: 4px solid #E18F00;
}

#links .link-list li dl {
	margin-left: 10px;
}



/* ==========================================
  12. お問い合わせ
============================================ */

#contact .tel-list {

}

#contact .tel-list li {
	margin-bottom: 10px;
}

#contact .tel-list dl dt {
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1em;
	color: #FF9100;
	width: 280px;
	float: left;
	clear: both;
}

#contact .tel-list dl dt img {
	margin-right: 5px;
	vertical-align: bottom;
}

#contact .tel-list dl dd {
	line-height: 35px;
}

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

	#contact .tel-list dl dt {
		font-size: 18px;
		font-size: 1.8rem;
		width: 65%;
		width: 100%;
		float: none;
	}

	#contact .tel-list dl dt img {
		width: 25px;
	}

	#contact .tel-list dl dd {
		margin-left: 30px;
		line-height: 1.5em;
	}

}

/* --------------------------
  お問い合わせボタン
-------------------------- */
#contact .btn {
	width: 90%;
	padding: 20px 0px;
	background-color: #ccc;
	border: 1px solid #333;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#contact .btn a {
	display: block;
	vertical-align: middle;
	text-align: center;
	font-size: 23px;
	font-size: 2.3rem;
	font-weight: bold;
	line-height: 1em;
	color: #ffffff;
	text-decoration: none;
}

#contact .btn a img {
	vertical-align: middle;
	margin-right: 5px;
}

#contact .btn#btn-inquiry {
	background-color: #A6E4FB;
	border: 1px solid #009DE0;
}

#contact .btn#btn-inquiry a {
	color: #009DE0;
}

#contact .btn#btn-estimate {
	background-color: #FFE6C8;
	border: 1px solid #FF9000;
}

#contact .btn#btn-estimate a {
	color: #FF9000;
}

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

	#contact .btn {
		width: 100%;
		padding: 10px 0px;
	}

	#contact .btn a {
		font-size: 16px;
		font-size: 1.6rem;
	}

}

/* --------------------------
  同意ボタン
-------------------------- */

#agreement .area-btnset {
	width: 50%;
	margin: 0 auto;
}

#agreement .area-btnset li {
	float: left;
	width: 49%;
	margin-right: 2%;
}

#agreement .area-btnset li:nth-child(2n) {
	margin-right: 0;
}

#agreement .area-btnset li a {
	display: block;
	padding: 8px;
	background-color: #A6E4FB;
	border: 1px solid #009DE0;
	color: #009DE0;
	text-align: center;
	text-decoration: none;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

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

	#agreement .area-btnset {
		width: 90%;
		margin: 0 auto;
	}

	#agreement .area-btnset li a {
		padding: 8px 0;
	}

}



/* ==========================================
  13. フォーム
============================================ */

#inquiry table {
	width: 100%;
}

#inquiry table th {
	padding: 8px 5px 5px;
}

#inquiry table td {
	padding: 8px 5px 16px;
}

#inquiry table th {
	text-align: left;
	border-bottom: 1px solid #999999;
}

#inquiry table input[type="text"],
#inquiry table input[type="number"],
#inquiry table input[type="tel"],
#inquiry table input[type="email"] {
	width: 100%;
	max-width: 300px;
	padding: 5px 0;
}

#inquiry table input.large {
	max-width: 400px;
}

#inquiry table input.small {
	max-width: 150px;
}

#inquiry table input.xsmall {
	width: 40%;
	max-width: 100px;
}

#inquiry table select {
	padding: 5px 0;
}

#inquiry table select[name="prefecture"],
#inquiry table select[name="item_size"] {
	margin-bottom: 10px;
	width: 100%;
	max-width: 180px;
}

#inquiry table textarea {
	width: 100%;
	/*max-width: 400px;*/
	height: 100px;
	padding: 5px 0;
}

#inquiry table label {
	margin-right: 1em;
}


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

	#inquiry table .etc {
		display: block;
	}

}

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

	#inquiry table label {
		display: block;
	}

	#inquiry table .postoffice-url {
		display: block;
		margin-top: 5px;
	}

}

/* --------------------------
  フォーム送信ボタン
-------------------------- */

#inquiry .area-btn {
	width: 100%;
	max-width: 200px;
	margin: 0 auto;
}

#inquiry .area-btn li a,
#inquiry .area-btnset li a {
	display: block;
	padding: 8px;
	background-color: #A6E4FB;
	border: 1px solid #009DE0;
	color: #009DE0;
	text-align: center;
	text-decoration: none;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#inquiry .area-btnset li a#btn-edit {
	background-color: #E7E7E7;
	border: 1px solid #ccc;
	color: #666;
}

#inquiry .area-btn li a#btn-submit.disabled,
#inquiry .area-btnset li a#btn-submit.disabled,
#inquiry .area-btnset li a#btn-edit.disabled {
	background-color: #ffffff;
	border: 1px solid #ccc;
	color: #ccc;
	cursor: default;
}

#inquiry .area-btnset {
	width: 50%;
	margin: 0 auto;
}

#inquiry .area-btnset li {
	float: left;
	width: 49%;
	margin-right: 2%;
}

#inquiry .area-btnset li:nth-child(2n) {
	margin-right: 0;
}

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

	#inquiry .area-btnset {
		width: 90%;
		margin: 0 auto;
	}

	#inquiry .area-btnset li a {
		padding: 8px 0;
	}

}


/* --------------------------
  エラーメッセージ
-------------------------- */
#inquiry .error-message {
	display: block;
	color: #FF004E;
}

#inquiry .error {
	background-color: #FFEEEE;
}

/* --------------------------
  必須マーク
-------------------------- */
#inquiry .required {
	background-color: #FF004E;
	padding: 0 4px;
	color: #ffffff;
	font-weight: normal;
	font-size: 11px;
	font-size: 1.1rem;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}



/* ==========================================
  14. 404ページ
============================================ */

#error .message {
	padding-top: 20px;
}



/* ==========================================
  15. KAKU
============================================ */

#kaku #contents {
	padding: 0;
}

#kaku #contents h2 {
	padding: 0 15px;
	text-align: center;
}

#kaku #contents .message-main {
	padding: 0 15px;
	text-align: center;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 2em;
}

#kaku #contents .description {
	margin: 10px 15px 30px 15px;
}