@charset "utf-8";

/*
===============================================================================
▼ 詳細スタイル
===============================================================================
*/
/******************************************************************
【目次】
01. TOP
02. インデックス加工
03. スタンピング加工
04. コーティング加工
05. 加工に関しての注意点
06. 会社概要
07. プライバシーポリシー
08. このサイトについて
09. サイトマップ
10. お問い合わせ
11. フォーム
12. 404ページ
******************************************************************/

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

body#home {
	background-color: #e6e5d8;
}

#home #area-eyecatch .container {
	position: relative;
}

#home #area-eyecatch #btn-inquiry {
	position: absolute;
	top: 0;
	right: 10px;
}

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

	#home #area-eyecatch #btn-inquiry {
		width: 40%;
		max-width: 307px;
	}

}

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

	#home #area-eyecatch #image-main {
		padding-top: 5px;
	}

	#home #area-eyecatch #btn-inquiry {
		width: 155px;
	}

}

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

.movie-list li {
	margin-bottom: 30px;
}

.movie-description {
	width: 100%;
	max-width: 559px;
	margin: 0 auto;
}

.movie-description dt {
	position: relative;

	border: 3px solid #8c8c8c;
	margin-bottom: 15px;
}

.movie-description dt img {
	display: block;
}

.movie-description dt span.icon-play {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: 559px;
	height: 295px;
	background: url("../images/btn-play.png") no-repeat left top;
	background-size: contain;
}

.movie-description dd.title {
	color: #7f0000;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	margin-bottom: 8px;
}



/* ==========================================
  02. インデックス加工
============================================ */

#index_process #contents h2.title-bar {
	border: 1px solid #CFCFCF;
	/*border: 1px solid #FEC3D5;*/
}

#index_process #contents h2.title-bar span {
	border-left: 4px solid #FF004E;
}

#index_process .introduction {
	width: 100%;
	margin-bottom: 10px;
}

#index_process .introduction .point {
	width: 58%;
	float: left;
}

#index_process .introduction .point dt {
	font-size: 16px;
	font-size: 1.6rem;
	background-color: #FF004E;
	padding: 3px 8px;
	color: #ffffff;
	margin-bottom: 5px;
}

#index_process .introduction .point dd {
	margin-bottom: 15px;
}

#index_process .introduction p.image {
	width: 40%;
	max-width: 311px;
	float: right;
}

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

	#index_process .introduction .point {
		width: 100%;
		float: none;
	}

	#index_process .introduction p.image {
		width: 100%;
		max-width: 311px;
		margin: 0 auto;
		float: none;
	}

}

/* --------------------------
  スタッフコメント
-------------------------- */
#index_process .comment {
	position: relative;
	width: 100%;
	padding: 10px 15px;
	background-color: #FFE5EE;

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

#index_process .comment .text {
	margin-right: 125px;
}

#index_process .comment .staff {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 145px;
}

#index_process .comment .staff img {
	display: block;
}

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

	#index_process .comment .text {
		margin-right: 0;
	}

	#index_process .comment .staff {
		position: static;
		float: left;
		width: 100px;
	}

}

/* --------------------------
  インデックス可能サイズ
-------------------------- */
#index_process .spec {
	width: 100%;
}

#index_process .spec p.text {
	width: 48%;
	float: left;
}

#index_process .spec p.image {
	width: 50%;
	max-width: 407px;
	float: right;
}

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

	#index_process .spec p.text {
		width: 100%;
		float: none;
	}

	#index_process .spec p.image {
		width: 100%;
		max-width: 407px;
		margin: 0 auto;
		float: none;
	}

}

/* --------------------------
  抜き型形状
-------------------------- */
#index_process .shape .image {
	width: 100%;
	max-width: 684px;
	margin: 0 auto;
}

#index_process .shape .shape-list {
	display: none;
}

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

	#index_process .shape .shape-list {
		display: block;
		margin-left: 1.5em;
		list-style-type: disc;
	}

}

/* --------------------------
  加工バリエーション
-------------------------- */
#index_process .example-list {
	width: 100%;
	margin: 0 auto;
}

#index_process .example-list li {
	float: left;
	width: 40%;
	margin-right: 20%;
	margin-bottom: 15px;
	text-align: center;
}

#index_process .example-list li:nth-child(2n) {
	margin-right: 0;
}

#index_process .example-list li.large {
	width: 60%;
}

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

	#index_process .example-list li {
		float: none;
		width: 100%;
	}

	#index_process .example-list li.large {
		width: 100%;
	}

}

/* --------------------------
  関係設備
-------------------------- */
#index_process .machine {
	width: 100%;
	margin-bottom: 10px;
}

#index_process .machine ul {
	width: 52%;
	float: left;
}

#index_process .machine p.image {
	width: 47%;
	max-width: 370px;
	float: right;
}

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

	#index_process .machine ul {
		width: 100%;
		float: none;
	}

	#index_process .machine p.image {
		width: 100%;
		max-width: 370px;
		margin: 0 auto;
		float: none;
	}

	#index_process .comment .staff.staff2 {
		margin-right: 5px;
	}

}



/* ==========================================
  03. スタンピング加工
============================================ */

#stamping #contents h2.title-bar {
	border: 1px solid #CFCFCF;
	/*border: 1px solid #E6BBD6;*/
}

#stamping #contents h2.title-bar span {
	border-left: 4px solid #E520A3;
}

#stamping .introduction {
	width: 100%;
}

#stamping .introduction p {
	width: 50%;
	max-width: 415px;
	float: left;
}

#stamping .introduction .movie-description {
	width: 46%;
	float: right;
}

#stamping .introduction .movie-description dt,
#stamping .introduction .movie-description dd {
	width: 100%;
	max-width: 216px;
}

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

	#stamping .introduction p {
		width: 100%;
		margin: 0 auto 10px;
		float: none;
	}

	#stamping .introduction .movie-description {
		width: 100%;
		max-width: 216px;
		margin: 0 auto;
		float: none;
	}

	#stamping .introduction .movie-description dd.title {
		text-align: center;
	}

}


/* --------------------------
  特長
-------------------------- */
#stamping .spec {
	width: 100%;
}

#stamping .spec p.text {
	width: 58%;
	float: left;
}

#stamping .spec ul.image {
	width: 40%;
	max-width: 311px;
	float: right;
}

#stamping .spec ul.image li {
	float: left;
	width: 42%;
}

#stamping .spec ul.image li.small {
	width: 16%;
}

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

	#stamping .spec p.text {
		width: 100%;
		float: none;
	}

	#stamping .spec ul.image {
		width: 100%;
		max-width: 311px;
		margin: 0 auto;
		float: none;
	}

}



/* ==========================================
  04. コーティング加工
============================================ */

#coating #contents h2.title-bar {
	border: 1px solid #CFCFCF;
	/*border: 1px solid #E4D2E2;*/
}

#coating #contents h2.title-bar span {
	border-left: 4px solid #C01ECB;
}

#coating .introduction {
	width: 100%;
}

#coating .introduction p {
	width: 50%;
	max-width: 355px;
	float: left;
}

#coating .introduction .movie-description {
	width: 46%;
	float: right;
}

#coating .introduction .movie-description dt,
#coating .introduction .movie-description dd {
	width: 100%;
	max-width: 216px;
}

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

	#coating .introduction p {
		width: 100%;
		margin: 0 auto 10px;
		float: none;
	}

	#coating .introduction .movie-description {
		width: 100%;
		max-width: 216px;
		margin: 0 auto;
		float: none;
	}

	#coating .introduction .movie-description dd.title {
		text-align: center;
	}

}


/* --------------------------
  仕様
-------------------------- */
#coating .spec {
	width: 100%;
}

#coating .spec p.text {
	width: 50%;
	float: left;
}

#coating .spec p.image {
	width: 45%;
	max-width: 411px;
	float: right;
}

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

	#coating .spec p.text {
		width: 100%;
		float: none;
	}

	#coating .spec p.image {
		width: 100%;
		max-width: 411px;
		margin: 0 auto;
		float: none;
	}

}



/* ==========================================
  05. 加工に関しての注意点
============================================ */

#notice #contents h2.title-bar {
	border: 1px solid #CFCFCF;
	/*border: 1px solid #DED3F3;*/
}

#notice #contents h2.title-bar span {
	border-left: 4px solid #510AE2;
}

/* --------------------------
  注意事項サンプル
-------------------------- */
#notice .sample-list {
	width: 500px;
	margin: 0 auto;
}

#notice .sample-list li {
	float: left;
	width: 240px;
}

#notice .sample-list li:first-child {
	margin-right: 10px;
}

#notice .sample-list dt {
	font-weight: bold;
}

#notice .sample-list dd img {
	width: 100%;
	max-width: 192px;
}

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

	#notice .sample-list {
		width: 100%;
		max-width: 240px;
	}

	#notice .sample-list li {
		float: none;
		width: 100%;
		margin-bottom: 15px;
	}

}

/* --------------------------
  悪い例
-------------------------- */
#notice .badsample-list {
	width: 100%;
	margin: 0 auto;
}

#notice .badsample-list li {
	float: left;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 15px;
}

#notice .badsample-list li:nth-child(3) {
	margin-right: 0;
}

#notice .badsample-list li.large {
	width: 50%;
}

#notice .badsample-list dt {
	margin-bottom: 10px;
}

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

	#notice .badsample-list li {
		width: 48%;
		margin-right: 0;
	}

}

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

	#notice .badsample-list li {
		float: none;
		width: 100%;
		margin-bottom: 15px;
		text-align: center;
	}

	#notice .badsample-list li.large {
		width: 100%;
	}

}




/* ==========================================
  06. 会社概要
============================================ */

#company table {
	width: 100%;
}

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

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

#company 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;
}

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

#company .machine-list li {
	/*margin-bottom: 0.2em;*/
}



/* ==========================================
  07. プライバシーポリシー
============================================ */



/* ==========================================
  08. このサイトについて
============================================ */



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

.page-list li {
	margin-bottom: 1em;
}

.page-list li a {
	background: url("../../images/sitemap/list-arrow.png") no-repeat left center;
	background-size: 15px 15px;
	padding-left: 20px;
}



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

#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;
	}

}



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

#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="fax"],
#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"],
#inquiry table select[name="hole_type"] {
	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;
}





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

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