@charset “UTF-8”;
/* ==============================================================================

CSS Information

 File name:	page.css

 Style Info:	デバイス設定

============================================================================== */

/* title
----------------------------------------------------------- */

/* page title [img] */

 .page_tit {
	margin-bottom: 30px;
}
 .page_tit img {
	width: 100%;
	height: auto;
}


/* h2〜 */

.about .content_box h3 ,
.guide h3 ,
.contact h3 {
	margin-bottom: 30px;
	padding: 0 0 8px 40px;
	border-bottom: 1px solid #0492df;
	background: url("../page/bg_h3.gif") 15px 6px no-repeat;
	color: #0492df;
	font-size: 129%;
	font-weight: bold;
}

.content_box .box h4 {
	margin-bottom: 15px;
	font-size: 1.25rem;
	color: #0492df;
}
.guide .content_box h4 {
	padding-bottom: 5px;
	border-bottom: 1px solid #dbdbdb;
}

.content_box .box h5 {
	margin-bottom: 10px;
	font-size: 1.125rem;
	font-weight: bold;
}



/* ブロック 
----------------------------------------------------------- */

.content_box {
	margin-bottom: 40px;
}

.content_box .box {
	margin-bottom: 30px;
}

.company .txt ,
.guide .txt ,
.form_area .txt {
	margin-bottom: 1em;
}

.attention {
	color: #d42525;
}


/*-------------------------------------------------------------------------------

 about

-------------------------------------------------------------------------------*/


/* video
----------------------------------------------------------- */

.video_list h4 {
	margin-bottom: 10px;
	font-weight: bold;
}


/* fastener
----------------------------------------------------------- */

	.about .itemdesc_box {
		margin-bottom: 20px;
		border: 1px solid #ccc;
	}
	.about .itemdesc_box .thumb {
		padding: 10px 15px;
		border-right: 1px solid #ccc;
		text-align: center;
	}
	.about .itemdesc_box .thumb li {
		display: inline-block;
	}
	.about .itemdesc_box .txt {
		flex: 1;
		padding: 10px 15px;
	}
	.about .itemdesc_box .txt em {
		display: block;
		margin-bottom: 10px;
		padding: 6px;
		border-bottom: 1px solid #ccc;
	}
	.about .itemdesc_box .txt p {
		margin: 0 6px 15px;
	}
	.about .itemdesc_box .txt ul ,
	.about .itemdesc_box .txt ol {
		margin: 0 6px 15px;
	}
	
	.about .txt_area {
		margin-top: 20px;
		margin-bottom: 20px;
		padding: 10px 20px;
		border: 1px solid #EEE;
		background: #EEE;
	}
	.about .txt.txt_area {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.about .flow_area {
		margin-bottom: 20px;
		padding: 15px 20px;
		border: 1px solid #ccc;
	}
	
	.about .flow_area h5 {
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
	}
	
	.about .flow_area hr {
		margin: 20px 0;
		border: none;
		border-bottom: 1px solid #ccc;
	}
	
	.about .flow_area .item_list {
		margin: 0 0 15px;
	}
	
	.about .flow_area .flow_list > li {
		position: relative;
		margin-bottom: 10px;
		padding-left: 2em;
	}
	.about .flow_area .flow_list em {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 2em;
		color: #5ead3c;
	}
	.about .flow_area .flow_list ol {
	}
	.about .flow_area .flow_list ol li {
		display: block;
	}
	.about .flow_area .flow_list p {
		margin: 0;
	}
	.about .flow_area .attention {
		display: -webkit-flex;
		display: flex;
	}
	.about .flow_area .attention .thumb {
		margin-right: 2%;
	}
	
	.about .iron_table {
		width: 100%;
	}
	.about .iron_table caption {
		padding: 0.7em 1.5em;
		border: 1px solid #ccc;
		border-bottom: none;
		background: #EEE;
	}
	.about .iron_table th ,
	.about .iron_table td {
		border: 1px solid #ccc;
		padding: 0.7em 1.5em;
	}
	
	.about .code_list {
		
	}
	.about .code_list li {
		display: inline-block;
		text-align: center;
	}
	.about .code_list li span {
		display: block;
	}
	
	.about .def_table {
		width: 100%;
		margin-bottom: 20px;
	}
	.about .def_table caption {
		padding: 15px;
		border: 1px solid #ccc;
		background: #EEE;
		font-weight: bold;
	}
	.about .def_table th ,
	.about .def_table td {
		padding: 10px 15px;
		border: 1px solid #ccc;
		vertical-align: top;
	}
	.about .def_table thead th {
		border-right: 1px solid #FFF;
		background: #cccc98;
		text-align: center;
	}
	.about .def_table thead th:last-child {
		border-right: 1px solid #CCC;
	}
	.about .def_table.def_table_kijun td {
		text-align: center;
	}
	.about .def_table.def_table_kyodo tr td:nth-child(2) {
		text-align: center;
    }
	.about .def_table.def_table_tape_width tr td:nth-child(2) {
		text-align: center;    
    }
	.about .def_table.def_table_tape_width tr td:nth-child(3) {
		text-align: center;    
	}
	.about .def_table li {
		display: inline-block;
	}
	.about .def_table tr td:nth-child(1) {
		text-align: center;
	}
	.about .function_code .def_table tr td:nth-child(1) {
		width: 10%;
	}
	.about .function_code .def_table tr td:nth-child(2) {
		width: 25%;
	}
	.about .function_code .def_table tr td:nth-child(3) {
		width: 25%;
	}
	.about .function_code .def_table tr td:nth-child(4) {
		width: 30%;
		text-align: center;
	}
	
	/* fastener_list */
	.about .fastener_list {
		border: 1px solid #d6d6d6;
		margin-bottom: 20px;
		padding: 25px 20px 0;
	}
	.about .fastener_list dt {
		margin-bottom: 15px;
		padding-bottom: 8px;
		border-bottom: 1px solid #d6d6d6;
		font-weight: bold;
	}
	.about .fastener_list dd {
		margin-bottom: 30px;
		padding-left: 20px;
	}
	
	.size_table01 {
		width: 100%;
		margin-bottom: 20px;
	}
	.size_table01 th ,
	.size_table01 td {
		border: 1px solid #ccc;
		padding: 10px 15px;
	}
	 .size_table01 thead th {
		border-right: 1px solid #FFF;
		background: #cacfd5;
	}
	.size_table01 thead th:last-child {
		border-right: 1px solid #CCC;
	}
	 .size_table01 thead th.short {
		width: 15%;
	}
	.size_table01 thead th.middle {
		width: 20%;
	}
	.size_table01 thead th.long {
		width: 30%%;
	}
	.size_table01 tbody th {
		background: #99cccd;
	}
	
	.strength_standard .small {
		text-align: right;
		margin-bottom: 24px;
	}
	
	.history_tbl {
		width: 100%;
		margin-bottom: 20px;
	}
	.history_tbl th ,
	.history_tbl td {
		padding: 8px;
		border: 1px solid #ccc;
	}
	.history_tbl tr td:nth-child(2) {
		background: #EEE;
	}
	.history_tbl tr td:nth-child(2) span {
		color: #bdbfc2;
	}
	.history_tbl tr td:last-child {
		width: 75%;
	}
	.history_tbl th {
		width: 50px;
		background: center 4px #CCC no-repeat;
	}
	.history_tbl .his_1890 {
		background-image: url("../page/ico_about01.gif");
	}
	.history_tbl .his_1900 {
		background-image: url("../page/ico_about02.gif");
	}
	.history_tbl .his_1920 {
		background-image: url("../page/ico_about03.gif");
	}
	.history_tbl .his_1940 {
		background-image: url("../page/ico_about04.gif");
	}
	.history_tbl .his_1960 {
		background-image: url("../page/ico_about05.gif");
	}
	.history_tbl .his_1980 {
		background-image: url("../page/ico_about06.gif");
	}
	.history_tbl .his_2000 {
		background: center bottom #CCC no-repeat;
		background-image: url("../page/ico_about07.gif");
	}

/* スマホ */
@media only screen and (max-width: 768px) {
	.history_tbl {
		border-bottom: 1px solid #CCC;
	}
	.history_tbl td {
		display: block;
		width: 100%;
	}
	.history_tbl tr td:last-child {
		display: block;
		width: 100%;
		border-top: none;
		border-bottom: none;
	}
	.history_tbl th {
		display: none;
		width: 100%;
		height: 40px;
		background: 4px 4px #CCC no-repeat;
		background-size: auto 100%;
	}
	.history_tbl .his_1890 ,
	.history_tbl .his_1900 ,
	.history_tbl .his_1920 ,
	.history_tbl .his_1940 ,
	.history_tbl .his_1960 ,
	.history_tbl .his_1980 ,
	.history_tbl .his_2000 {
		display: block;
	}
	.history_tbl .his_1890 {
		background-image: url("../page/ico_aboutx01.gif");
	}
	.history_tbl .his_1900 {
		background-image: url("../page/ico_aboutx02.gif");
	}
	.history_tbl .his_1920 {
		background-image: url("../page/ico_aboutx03.gif");
	}
	.history_tbl .his_1940 {
		background-image: url("../page/ico_aboutx04.gif");
	}
	.history_tbl .his_1960 {
		background-image: url("../page/ico_aboutx05.gif");
	}
	.history_tbl .his_1980 {
		background-image: url("../page/ico_aboutx06.gif");
	}
	.history_tbl .his_2000 {
		background: 4px 4px #CCC no-repeat;
		background-image: url("../page/ico_aboutx07.gif");
	}
	.table_wrapper {
		overflow-x: auto;
		width: 100%;
		-webkit-overflow-scrolling: touch;
	}
	.table_inner {
		flex-wrap: nowrap;
		min-width: 640px;
	}
}

/* PC */
@media only screen and (min-width: 769px) {
	.about .itemdesc_box {
		display: -webkit-flex;
		display: flex;
	}
	.about .itemdesc_box .thumb {
		width: 30%;
		border-right: 1px solid #ccc;
	}
	.about .itemdesc_box .thumb li {
		display: block;
	}
}




/*-------------------------------------------------------------------------------

 guide

-------------------------------------------------------------------------------*/

.faq_contents {
	margin-bottom: 40px;
}
.faq_contents .faq_list {
	padding: 0 0 40px 15px;
}
.faq_contents .faq_list > dt {
	background: url("../page/ico_guide01.gif") 0 10px no-repeat;
	padding: 5px 0 11px 32px;
	border-bottom: 1px dashed #dbdbdb;
	margin: 0 44px 15px 0;
}
.faq_contents .faq_list > dd {
	background: url("../page/ico_guide02.gif") 0 5px no-repeat;
	padding: 0 14px 0 32px;
}
.faq_contents .faq_list > dd dl.answer_list:after {
	content: "";
	display: table;
	clear: both;
}
.faq_contents .faq_list>dd dl.answer_list dt {
	clear: both;
	float: left;
	width: 4em;
	padding: 0 0 0;
}
.faq_contents .faq_list>dd dl.answer_list dd {
	padding: 0 0 0 7em;
	text-indent: -2em;
}
.faq_contents .faq_list>dd dl.answer_list dd:before {
	content: "…";
	margin-right: 1em;
}
.faq_contents .faq_list>dd ul.answer_list li:before {
	content: "・";
}
.payment_list dt:before {
	content: "○";
	margin-right: 1em;
}
.payment_list dd {
	margin-bottom: 24px;
}
table.shipping_table {
	max-width: 100%;
	width: 450px;
	margin: 0 0 20px;
	table-layout: fixed;
}
.shipping_table th,
.shipping_table td {
	padding: 4px;
	text-align: center;
	border: 1px solid #6e6e6e;
}
.shipping_table thead tr th {
	padding: 4px;
	background: #e6ede6;
}



/*-------------------------------------------------------------------------------

 company

-------------------------------------------------------------------------------*/

.company_list {
	margin: 0 15px 30px;
}

.company_list > dt {
	margin-bottom: 15px;
	padding-bottom: 5px;
	border-bottom: 1px solid #dbdbdb;
	color: #0492df;
	font-size: 115%;
}
.company_list > dd {
	margin-bottom: 30px;
}

.company_list01 {
	padding-left: 25px;
}
.company_list01 li {
	list-style-type: disc;
}

.company_list02 li {
	display: inline-block;
}
.company_list02 li:first-child {
	margin-right: 1em;
}

.history .history_list {
	padding: 8px 0;
}
.history .history_list dt {
	padding: 4px 0 0;
}
.history .history_list dd {
	padding: 4px 0 4px;
	border-bottom: 1px dashed #c2c2c2;
}
.history .history_list dd:last-child {
	border-bottom: none;
}

@media only screen and (min-width: 768px) {
	.history .history_list dt {
		clear: both;
		float: left;
		width: 8em;
		padding: 4px 0 4px;
	}
	.history .history_list dd {
		padding: 4px 0 4px 9em;
	}
}


/*-------------------------------------------------------------------------------

 contact

-------------------------------------------------------------------------------*/

/* iframe内
----------------------------------------------------------- */

html,body {
	font-size: 14px;
}

body {
	overflow-x: hidden;
	position: relative;
	color: #333;
	font-family: 'Hiragino Kaku Gothic Pro' , 'ヒラギノ角ゴ Pro W3' , 'メイリオ' , Meiryo , 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif;
}

.form_area {
	width: 100%;
}
.form_area .form_table {
	width: 100%;
	margin-bottom: 20px;
}
.form_area .form_table th {
	width: 23%;
	padding: 10px;
	border: 1px solid #dbdbdb;
	background: #f5f5f5;
}
.form_area .form_table td {
	padding: 10px;
	border: 1px solid #dbdbdb;
}
.form_area .form_table tr td input {
	margin: 0;
}
.form_area .form_table tr td input.name {
	width: 180px;
	max-width: 100%;
}
.form_area .form_table tr td input.zip ,
.form_area .form_table tr td input.tel {
	max-width: 100%;
	width: 80px;
}
.form_area .form_table tr td input.email ,
.form_area .form_table tr td input.confirm ,
.form_area .form_table tr td input.add {
	max-width: 100%;
	min-width: 60%;
}
.form_area .form_table tr td select {
	max-width: 100%;
	width: 194px;
	margin: 0;
}
.form_area .form_table tr td textarea {
	max-width: 100%;
	width: 98%;
	height: 160px;
	margin: 0;
}
.form_area .form_table tr td dl.name_list:after {
	content: "";
	display: table;
	clear: both;
}
.form_area .form_table tr td dl.name_list dt {
	width: 1em;
	float: left;
	margin-right: 0.5em;
	line-height: 35px;
}
.form_area .form_table tr td dl.name_list dd {
	float: left;
	width: 180px;
	max-width: 40%;
	margin-right: 1em;
}
.form_area .form_table tr td ul.mail_list li:first-child {
	margin-bottom: 10px;
}
.form_area .form_table tr td dl.add_list dd {
	margin-bottom: 5px;
}
.form_area p.check {
	text-align: center;
	margin-bottom: 20px;
}
.form_area p.check input {
	cursor: pointer;
	margin: 0 5px 0 0;
	vertical-align: middle;
}
.form_area p.check label {
	vertical-align: middle;
}
.form_area .btn {
	width: 270px;
	margin: 0 auto;
}
.form_area .btn input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	margin: 0;
	height: 54px;
	font-size: 0;
}
.form_area .btn input:focus ,
.form_area .btn input:active {
	outline: none;
}
.form_area .btn input#submit {
	width: 270px;
	background: url("../page/btn_contact01.png") 0 0 no-repeat;
}
.form_area .btn input.disabled {
	opacity: .3;
	cursor: default;
}


@media only screen and (max-width: 768px) {
	.form_area .form_table th ,
	.form_area .form_table td {
		display: block;
		width: 100%;
		text-align: left;
	}
}