@charset "utf-8";

/* last-update: 20180206 */

/* ------------------------------------
	contents.css: I N D E X
------------------------------------
- base css
	- btn_opacity
	- title_line
	- title_bar
	- title_line_bg

- contents css
	- contact
	- order

- application css (dummy)

- product css
	- index: main
	- details: material
------------------------------------ */



/* -----------------------------------------------------------------
	base css
----------------------------------------------------------------- */
#contents p.top span{
	font-size:14px;
}

#contents #order,
#contents #contact,
#contents #application,
#contents #cad{
	margin:40px auto 50px auto;
	width:100%;
	max-width:950px;
	text-align:left;
	z-index:0;
}
#contents #order h1,
#contents #contact h1,
#contents #application h1,
#contents #cad h1,
#contents #order h2,
#contents #contact h2,
#contents #application h2,
#contents #cad h2,
#contents #order h3,
#contents #contact h3,
#contents #application h3,
#contents #cad h3{
	padding:0;
}

@media screen and (max-width: 640px) {
	#contents #order,
	#contents #contact,
	#contents #application,
	#contents #cad{
		margin:40px auto 0 auto;
	    max-width:640px;
	    width:92%;
	}
	/* sp_index */
	#contents #contact,
	#contents #contact .index,
	#contents #contact .index h2,
	#contents #contact .nav ul,
	#contents #application,
	#contents #application .index,
	#contents #application .index h2,
	#contents #application .nav ul,
	#contents #cad,
	#contents #cad .index,
	#contents #cad .index h2,
	#contents #cad .nav ul,{
		width:100%;
	    max-width:100%;
	}
	#contents #order .main,
	#contents #contact .main,
	#contents #application .main,
	#contents #cad .main{
		float:none;
		width:100%;
		margin:0 auto 50px;
	}
	#contents #contact .nav,
	#contents #application .nav,
	#contents #cad .nav{
		float:none;
		width:100%;
		margin:0 auto 20px;
		text-align:left;
	}
	#contents #contact .nav ul,
	#contents #application .nav ul,
	#contents #cad .nav ul{
		float:none;
		width:100%;
		margin:0 auto;
	}
	#contents #contact .nav .contact li,
	#contents #application .nav .contact li,
	#contents #cad .nav .contact li,
	#contents #contact .nav .bnr,
	#contents #application .nav .bnr,
	#contents #cad .nav .bnr{
		margin-bottom:20px;
	}
	#contents #contact .nav ul li img,
	#contents #application .nav ul li img,
	#contents #cad .nav ul li img,
	#contents #contact .main img,
	#contents #application .main img,
	#contents #product .main img {
		min-width: 100%;
	}
}


/* btn_opacity */
#contents .btn a:hover{
	opacity:0.8;
}


/* title_line */
#contents .ttlline,
#contents .ttlline.top{
	clear:both;
	width:100%;
	border-top:solid 3px #000000;
	background-image:url("../images/ttl_line.png");
	background-repeat:repeat-x;
	background-position:left bottom;
	margin:50px 0 20px 0;
}
#contents .ttlline.top{
	margin:0 0 20px 0;
}
#contents .ttlline span{
	display:block;
	padding:15px 0;
    color:#333333;
    font-size:21px;
    letter-spacing:1.3px;
}

/* title_bar */
#contents .ttlbar,
#contents .ttlbar.top{
	clear:both;
	background-color:#333333;
	margin:50px 0 20px 0;
	padding:7px 12px;
	color:#ffffff;
	font-size:16px;
	line-height:1.2;
	letter-spacing:1.3px;
}
#contents .ttlbar.top{
	margin:0 0 20px 0;
}



/* -----------------------------------------------------------------
	contents css
----------------------------------------------------------------- */
/* contact
----------------------------------------------------------------- */
/* index */
#contents #contacttitle{
	background-image:url("../images/contact/ttl_image.jpg");
	background-repeat:no-repeat;
	background-position:center top;
	min-height:140px;
	z-index:0;
}
#contents #contacttitle h1{
	margin:0 auto;
	padding:46px 0 0 0;
	font-size:34px;
	color:#ffffff;
    letter-spacing:0.06em;
	text-align:center;
	font-weight:normal;
}

#contents #contact h2{
	font-size:30px;
	color:#333333;
	padding-bottom:30px;
}
#contents #contact h3{
	padding:5px 12px;
}
#contents #contact .inquiry{
	margin-bottom:30px;
}
#contents #contact .inquiry .tel{
	margin-top:7px;
	margin:7px 0 5px 0;
	font-size:12px;
}
#contents #contact .inquiry li{
	background-image:url("../images/ttl_line.png");
	background-repeat:repeat-x;
	background-position:left bottom;
	margin-bottom:15px;
	padding-bottom:20px;
	text-align:left;
}
#contents #contact .inquiry dt{
	float:left;
}
#contents #contact .inquiry dt div{
	float:left;
	width:65px;
}
#contents #contact .inquiry dt p{
	display:inline-block;
    float: left;
    margin: 18px 0 0 15px;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold;
}
#contents #contact .inquiry dd{
	float:right;
	width:353px;
	margin-top:2px;
	text-align:left;
}
#contents #contact dl.headoffice{
	display:table;
	background-color:#ffffff;
	padding:20px;
}
#contents #contact dl.headoffice dt{
	display:table-cell;
	width:25%;
	vertical-align:middle;
	font-weight:bold;
}
#contents #contact dl.headoffice dd{
	display:table-cell;
	border-left:solid 1px #cccccc;
	width:75%;
	padding-left:30px;
}

@media screen and (max-width: 640px) {
	/* sp_title */
	#contents #contacttitle{
		background-size:cover;
		min-height:69px;
	}
	#contents #contacttitle h1{
		margin:0 auto;
		padding:22px 3px 0 0;
		font-size:18px;
	    letter-spacing:0.06em;
		text-align:center;
		font-weight:normal;
	}

	#contents #contact h2{
		display:none;
	}
	#contents #contact .inquiry dt,
	#contents #contact .inquiry dd{
		float:none;
		width:100%;
	}
	#contents #contact .inquiry dt div{
		margin:0 0 5px 0;
	}
	#contents #contact .inquiry dt p{
		font-size:18px;
	}
	#contents #contact dl.headoffice{
		display:block;
		padding:0 10px;
	}
	#contents #contact dl.headoffice dt{
		float:none;
		width:100%;
		padding-bottom:5px;
	}
	#contents #contact dl.headoffice dd{
		display:block;
		border:none;
		width:100%;
		padding-left:0;
	}
}





/* order service
----------------------------------------------------------------- */
#contents #spServicettitle{
	display:none;
}

/* index */
#contents #servicetitle{
	background-image:url("../images/service/ttl_image.jpg");
	background-repeat:no-repeat;
	background-position:center top;
	min-height:140px;
	z-index:0;
}
#contents #servicetitle h1{
	margin:0 auto;
	padding:46px 0 0 0;
	font-size:34px;
	color:#ffffff;
    letter-spacing:0.06em;
	text-align:center;
	font-weight: normal;
}

@media screen and (max-width: 640px) {
	/* sp_title */
	#contents #servicetitle{
		background-size:cover;
		min-height:69px;
	}
	#contents #servicetitle h1{
		margin:0 auto;
		padding:22px 3px 0 0;
		font-size:18px;
	    letter-spacing:0.06em;
		text-align:center;
		font-weight: normal;
	}
	/* sp_ttlline */
	#contents .ttlline{
    	width:100%;
	}
	#contents .ttlline span{
    	display:block;
    	padding:6px 0 8px 0;
    	color:#333333;
    	font-size:16px;
    	letter-spacing:1.3px;
    }
}

#contents #order h1{
	padding-bottom:30px;
}
#contents #order p.top{
	font-size:16px;
	padding-bottom:45px;
}
#contents #order .title{
	width:680px;
	margin:0;
}
#contents #order .title ul,
#contents #order .flow ul{
	font-size:0;
}
#contents #order .title li,
#contents #order .flow li{
	display:table-cell;
}
#contents #order .flow li{
	padding-right:19px;
}
#contents #order .merit{
	background-image:url("../images/order/image_bg.png");
	background-repeat:no-repeat;
	background-position:left bottom;
	margin:0;
	padding-bottom:30px;
}
#contents #order .merit ul{
	background-color:#ffffff;
	background-image:url("../images/order/image04.png");
	background-repeat:no-repeat;
	padding:23px 0 5px 141px;
}
#contents #order .merit li{
	background-image:url("../images/icon.png");
	background-repeat:no-repeat;
	background-position:left 3px;
	margin-top:10px;
	padding-left:23px;
	font-size:14px;
	font-weight:bold;
}

#contents #order .gba li,
#contents #order .gdm li{
	float:right;
}
#contents #order .gba li.top,
#contents #order .gdm li.top{
	float:left;
	border:0;
}

#contents #order .flow{
	margin:20px 0 60px 0;
}

#contents #order .orderbtn{
    width:100%;
    margin:0 auto;
    font-size:18px;
    letter-spacing:0.02em;
}
#contents #order .orderbtn a{
	display:block;
	background-color:#e25544;
    border-radius:3px;
	background-image:url("../images/order/icon_pdf.png"),
    				 url("../images/order/icon_arw_w.png");
    background-repeat:no-repeat,
    				  no-repeat;
    background-size:4%,
    				1.7%;
    background-position:35% 50%,
    					97.8% 54%;
    color:#ffffff;
    padding:18px 27px 16px 275px;
    text-decoration:none;
}
#contents #order .orderbtn a:hover{
	background-color:#dc0f2b;
}


@media screen and (max-width: 640px) {
	/* order */
	#contents #order .title{
		width:100%;
	}
	#contents #order .merit{
		background-image:url("../images/order/image_bg.png");
		background-size:contain;
	}
	#contents #order .merit ul{
		background-size:18%;
		padding:4% 10% 1% 20%;
	}
	#contents #order .title img{
    	vertical-align:top;
	}
	#contents #order .gba li,
	#contents #order .gdm li,
	#contents #order .gba li.top,
	#contents #order .gdm li.top{
		width:48%;
	}
	#contents #order .gba li img,
	#contents #order .gdm li img,
	#contents #order .gba li.top img,
	#contents #order .gdm li.top img{
		min-width:100%;
	}
	#contents #order .flow{
		margin:20px 0 30px 0;
	}
	#contents #order .flow li{
    	display:inline-block;
    	width:49%;
    	vertical-align:top;
		padding-right:0;
	}
	#contents #order .flow li:nth-child(1),
	#contents #order .flow li:nth-child(2){
		margin-bottom:15px;
	}
	#contents #order .flow li img{
		min-width:100%;
	}

	#contents #order .orderbtn{
	    font-size:14px;
	    letter-spacing:-0.07em;
    	font-weight:bold;
	}
	#contents #order .orderbtn a{
    	border-radius:3px;
		background-image:url("../images/order/icon_pdf.png"),
	    				 url("../images/order/icon_arw_w.png");
	    background-repeat:no-repeat,
	    				  no-repeat;
	    background-size:6%,
	    				3%;
	    background-position:11.5% 49%,
	    					95.5% 49%;
	    padding:5% 9% 5% 20.2%;
	}
}





/* -----------------------------------------------------------------
	application css (dummy)
----------------------------------------------------------------- */
#contents #application h2{
	font-size:30px;
	color:#333333;
	padding-bottom:30px;
}
#contents #application h3{
	padding:5px 12px;
}
/*#contents #application li{
	margin-bottom:15px;
	padding-bottom:20px;
	text-align:left;
}*/

/*@media screen and (max-width: 640px) {
	#contents #application h2{
		display:none;
	}
}*/





/* -----------------------------------------------------------------
	product css
----------------------------------------------------------------- */
/* index: main */
#contents #product #index_list{
	margin-bottom:40px;
	font-size:14px;
	line-height:1.2;
	text-align:left;
}
#contents #product #index_list li{
	float:left;
	width:48%;
}

#contents #product #index_list .item{
	clear:both;
	width:100%;
}
#contents #product #index_list .image{
	float:left;
	width:50%;
}
#contents #product #index_list .image img{
	max-width:95%;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	box-shadow:rgba(0, 0, 0, 0.86) 0px 1px 4px -2px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.86) 0px 1px 4px -2px;
	-moz-box-shadow:rgba(0, 0, 0, 0.86) 0px 1px 2px -2px;
}
#contents #product #index_list dl{
	float:left;
	width:150px;
}
#contents #product #index_list dt{
	margin:0 0 8px 0;
	color:#1780c4;
	font-weight:bold;
}
#contents #product #index_list dd{
	line-height:1.5;
}
#contents #product #index_list a{
	cursor:pointer;
}
#contents #product #index_list dt a:link,
#contents #product #index_list dt a:visited{
	text-decoration:underline;
	color:#1780c4;
}
#contents #product #index_list dt a:hover,
#contents #product #index_list dt a:active{
	opacity:0.7;
}
#product .index ul li.newitem{
    position:relative;
}
#product .index ul li.newitem span{
    position:absolute;
    top:0;
    left:0;
    width:46px;
    height:46px;
}

@media screen and (max-width: 640px) {
	#contents #product #index_list .nav ul{
		float:none;
		width:92%;
		margin:0 auto;
	}
	#contents #product #index_list,
	#contents #product #index_list li{
		float:none;
		width:100%;
	}
	#contents #product #index_list li{
		margin:0 0 3% 0;
		height:auto !important;
	}
	#contents #product #index_list ul,
	#contents #product #index_list li:last-child{
		margin:0;
	}
	#product .index ul li.newitem span{
	    max-width:100%;
	    max-height:100%;
	}
	#contents #product #index_list .image{
		float:left;
		width:45%;
	}
	#contents #product #index_list dl{
		float:right;
		width:52%;
	}
	#contents #product #index_list dt{
		font-size:16px;
	}
}

/* details: material */
#contents #product .catalog#detail{
    margin-bottom:20px;
}
#contents #product .material .list{
	margin-bottom:40px;
	font-size:14px;
	line-height:1.2;
	text-align:center;
}
#contents #product .material .list li{
	display:inline;
	border-right: solid 1px #9b9b9b;
	color:#9b9b9b;
	padding:0 20px;
	text-align:left;
}
#contents #product .material .list li:before{
	content:"↓";
	padding-right:6px;
}
#contents #product .material .list li.last{
	border-right:0;
}
#contents #product .material .list a{
	color:#1780c4;
	text-decoration:underline;
}
#contents #product .material .listttl{
    clear:both;
    margin-bottom:30px;
    padding-top:10px;
    text-align:left;
}
#contents #product .material .listttl h4{
	font-size:18px;
    font-weight:bold;
}
#contents #product .material dl{
	clear:both;
	width:680px;
	font-size:14px;
	padding-bottom:30px;
}
#contents #product .material dt{
	float:left;
	width:150px;
}
#contents #product .material dd{
	float:right;
	width:522px;
	text-align:left;
}
#contents #product .material dt span{
	display:block;
	color:#1780c4;
	line-height:1.2;
	background-image:url("../images/product/material_icon.png");
	background-repeat:no-repeat;
	background-position:left top;
	padding-left:15px;
	text-align:left;
	font-weight:bold;
}
#contents #product .material dd .image,
#contents #product .material dd .image2{
	float:left;
	width:172px;
	margin-right:38px;
}
#contents #product .material dd .image2{
	margin-right:20px;
}
#contents #product .material dd .image3{
	float:left;
	width:250px;
}
#contents #product .material dd .image p{
	margin-bottom:10px;
}

@media screen and (max-width: 640px) {
	#contents #product .material p,
	#contents #product .material span{
		font-size:16px;
		line-height:1.5;
	}
	#contents #product .material .list{
		margin-bottom:25px;
	}
	#contents #product .material .list li{
		display:block;
		border-right:none;
		margin-left:10px;
		padding:0 0 10px 0;
		text-align:left;
	}
	#contents #product .material .list li:last-child{
		padding:0;
	}
	#contents #product .material .listttl{
	    margin-bottom:15px;
	}
	#contents #product .material dl{
		clear:both;
		width:100%;
	    padding-bottom:20px;
	}
	#contents #product .material dt{
		float:none;
	    margin-bottom:10px;
	}
	#contents #product .material dd{
		float:none;
		width:100%;
	}
	#contents #product .material dd .image,
	#contents #product .material dd .image2{
		float:none;
		width:100%;
		margin-right:0;
	}
	#contents #product .material dd .image + .image{
		margin-top:30px;
	}
	#contents #product .material dd .image2{
		margin-right:0;
	}
	#contents #product .material dd .image3{
		float:none;
		width:100%;
	}
	#contents #product .material dd .image p,
	#contents #product .material dd .image2 p,
	#contents #product .material dd .image3 p{
		margin-bottom:10px;
	}
}