@charset "utf-8";


/*PC・タブレット・スマホ共通設定
---------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.8;	/*行間*/
	background: #fff;
}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;}
a img:hover {opacity: 0.7;}/*マウスオン時に画像を半透明にする設定。0.7は70%の透明度の意味。*/
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/

a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #e52795; }
a:active { color: #000000; }
a{text-decoration: none;}

.clearfix{
	clear: both;
}

#wrapper{

}

#container{
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	z-index: 1;
}

#container #TopBar{
	width: 100%;
	height: 20px;
	background-color: #0176C4;
}

#container #UnderBar{
	width: 100%;
	height: 3px;
	background-color: #969696;
}

.smorder{
	display: none;
}

.menu{
	display: none;
}

header{
	width: 960px;
	margin: 0px auto 40px;
	padding-top: 30px;
}

	header img{
		position: relative;
		float: left;
	}

	header p{
		position: relative;
		margin-top: 50px;
		margin-left: 40px;
		font-size: 13px;
		float: left;
	}

	header p img{
		position: absolute;top: -33px;
	}

	header ul{
		position: relative;
		float: right;
		margin-top: 30px;
	}

	header li{
		position: relative;
		float: left;
		margin-left: 10px;
	}

	header li img{
		height: 32px;
		padding: 10px;
		background-color: #0176C4;
	}

	header nav{
		display: table;
		table-layout: fixed;
		border-collapse: separate;
		position: relative;
		margin-top: 10px;
	}

	header nav li{
		display: table-cell;
		width: 150px;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
	}

	#slideshow {
		position: relative;
		width:  1920px; /* 画像の横幅に合わせて記述 */
		height: 612px; /* 画像の高さに合わせて記述 */
	 }
	 #slideshow img {
		position: absolute;
		top: 0;
		left:0;
		z-index: 8;
		opacity: 0.0;
	 }
	 #slideshow img.active {
		z-index: 10;
		opacity: 1.0;
	 }
	 #slideshow img.last-active {
		z-index: 9;
	 }


#main{
	position: relative;
	width: 100%;
	margin: 0;
}

#slide{
	position: relative;
	width: 100%;
	height: 600px;
}

#opa img{
	position: absolute; top: 40%; left: 45%;
	z-index: 2;
	display: none;
}

.contents{
	position: relative;
	overflow: hidden;
	}

	.orderbutton img{
		width: 200px;
		position: fixed;
		right: 0px;
		bottom: 30px;
		z-index: 99;
	}

	.about01{
		position: relative;
		width: 960px;
		margin: 0 auto;
		height: auto;
		margin-top: 70px;
		padding-bottom: 70px;
	}

	.about01 img{
		position: absolute; bottom: 0px; right: -260px;
		z-index: 1;
		display: none;
	}

	.about01 p{
		position: relative;
		font-size: 15px;
		z-index: 2;
	}

	.about02{
		height: 240px;
		padding-top: 70px;
		padding-bottom: 70px;
		background-color: #FFDEDE;
	}

		.about02 p{
			width: 960px;
			margin: 0 auto;
			font-size: 15px;
		}


.LINKS{
	width: 700px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}

	.LINKS ul{
		display: table;
		table-layout: fixed;
		width: 100%;
		border-collapse: separate;

	}

	.LINKS li{
		position: relative;
		display: table-cell;
		vertical-align: middle;
	}

	.LINKS li a p{
		margin-top: 35px;
		width: 100%;
		height: 60px;
		border-radius: 10px;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		line-height: 65px;
		background-color: #0176C4;
	}

#tasshy{
	width: 100%;
	background-color: #969696;
	height: 250px;
	margin-bottom: 50px;
	padding-top: 0;
	padding-bottom: 50px;
}

	#tasshy hr{
		position: relative;
		top: 100px;
		color: #fff solid 1px;
		z-index: 1;
	}

	#tasshy table{
		width: 700px;
		height: auto;
		margin: 0 auto;
	}

	#tasshy .tableimage{
		position: relative;
		width: 100px;
		z-index: 2;
	}

	#tasshy td{
		vertical-align: top;
		padding: 10px;
	}

	#tasshy h2{
		position: relative; top: 30px;
		font-size: 32px;
		color: #fff;
	}

	#tasshy p{
		font-size: 13px;
		color: #fff;
		text-align: justify;
	}

	.tableimage img{
		display: block;
	}

.copyright{
	display: block;
	text-align: center;
	padding-bottom: 20px;
	font-size: 10px;
}


.subcontents{
	width: 960px;
	margin: 0 auto;
	padding-bottom: 100px;
}

	.subcontents h1{
		margin-top: 90px;
		font-size: 30px;
	}

	.subcontents p{
		margin-top: 20px;
		font-size: 15px;
	}

	#stone{
		margin-top: 50px;
	}

		#stone ul{
			width: 100%;
		}

		#stone li{
			width: 190px;
			height: 210px;
			text-align: center;
			padding: 20px;
			background-color: #eee;
			float: left;
			margin: 5px;
		}

		#stone li img{
			margin-top: 15px;
			width: 77px;
			height: 77px;
		}

		#stone p{
			font-size: 13px;
			font-weight: bold;
			padding: 2px;
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: #ddd;
			color: #333;
		}

		#stone span{
			display: block;
			text-align: justify;
		}

		#color{
			margin-top: 50px;
		}

			#color ul{
					display: table;
					table-layout: fixed;
					width: 100%;
					border-collapse: separate;  /* セルの間隔を空ける */
					border-spacing: 8px 4px;  /* 左右 上下で記述 */
			}

			#color li{
				display: table-cell;
				height: 150px;
				text-align: center;
				padding: 20px;
				background-color: #eee;
			}

			#color li img{
				width: 77px;
				height: 77px;
				float: left;
				margin-right: 25px;
				margin-top: 20px;
			}

			#color p{
				width: 74%;
				font-size: 13px;
				font-weight: bold;
				margin-bottom: 20px;
				padding: 2px;
				border-radius: 10px;
				background-color: #ddd;
				color: #333;
				float: right;
			}

			#color span{
				display: block;
				width: 75%;
				text-align: justify;
				float: right;
			}
	/*商品サンプルページ*/
#sample{
	margin-top: 50px;
}
	.tableset{
		position: relative;
		margin-bottom: 50px;
	}

	ul .tableset{
		display: table;
		table-layout: fixed;
		border-collapse: separate;
		overflow: hidden;
	}

	.tableset li{
		display: table-cell;
		height: auto;
	}

	.tableset img{
		width: 96%;
	}

	.cells li{
		display: block;
		width: 96%;
		margin-top: 10px;
		padding-bottom: 4px;
		font-size: 13px;
		border-bottom: 1px dashed #000;
	}

	.each{
		position: relative;
	}

	.tableset .each h2{
		position: relative; top: 30px; left: 30px;
		font-size: 13px;
	}

	.tableset span{
		display: block;
		width: 130px;
		height: 40px;
		font-size: 13px;
		margin-top: 20px;
		padding: 2px;
		border-radius: 10px;
		text-align: center;
		line-height: 45px;
		background-color: #ddd;
		color: #333;
		float:left;
	}

#create{
	margin-top: 50px;
}

	#create li{
		text-align: center;
		float: left;
	}

	#create li p{
		position: relative; top: -15px;
	}

	#create .pass{
		position: relative; top: 100px;
		margin-right: 12px;
	}

#voices{
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

	#voices ul{
		list-style-image:url("../images/voicemark.png");
	}

	#voices li{
		margin-bottom: 50px;
	}

#laws{
	margin-top: 50px;
}

	#laws tr{
		height: 45px;
	}

	#laws td{
		font-size: 15px;
		border-bottom: 1px solid #000;
	}

	.td1st{
		width: 250px;
	}

	.td2nd{
	}

.finish{
	width: 960px;
	text-align: center;
	margin: 50px auto;
}

.btntop{
	width: 300px;
	height: 40px;
	margin: 0 auto;
	border: 2px solid #0176C4;
	border-radius: 10px;
	font-weight: bold;
	line-height: 3em;
}

.btn{
	width: 90%;
	margin: 0 auto;
}

#form-tbl{
	text-align: left;
}

p.btn input{
	display: block;
	width: 300px;
}

.msg{
	margin: 30px auto;
	width: 80%;
	font-size: 13px;
}




	/*画面幅480px以下の設定
	---------------------------------------------------------------------------*/

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

		#wrapper{
			max-width: 480px;
			overflow: hidden;
		}


		#container #TopBar{
			height: 10px;
		}

		header img{
			position: relative; left: 10px;
			width: 50px;
		}

		header p{
			display: none;
		}

		header{
			display: none;
		}

		.smorder{
			display: block;
			margin: 0;
			position: fixed; bottom: 0px;
			width: 100%;
			height: 30px;
			text-align: center;
			background: #007bbb;
			font-size: 15px;
			font-weight: bold;
			opacity: 0.9;
			border: none;
			z-index: 98;
		}

		.smorder a{
			color: #fff;
			position: relative; top: 3px; left: -5px;
		}

		.smorder img{
			width: 15px;
			position: relative; top: 3px;
		}

		.menu {
			position: fixed; top: 0;
			display: block;
			width: 100%;
			margin: 0 auto;
			padding: 0;
			background: #000;
			opacity: 0.9;
			z-index: 99;
		}

		.menu a {
		  display: block;
		  padding: 10px;
			text-decoration: none;
			color: #000;
		  line-height: 2.5;
		}

		label {
		  display: block;
		  margin: 0 0 2px 0;
			padding: 8px 8px 13px;
		  line-height: 2;
			color :#fff;
		  background :#007bbb;
			cursor :pointer;
			text-align: center;
			font-size: 15px;
		}

		label img{
			width: 12px;
			margin-right: 10px;
		}

		input {
			display: none;
		}

		.menu ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.menu li {
		  max-height: 0;
		  overflow-y: hidden;
		  -webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			-ms-transition: all 0.5s;
			-o-transition: all 0.5s;
			transition: all 0.5s;
		}

		#menu_bar01:checked ~ #links01 li{
			max-height: 42px;
			margin-bottom: 5px;
			background: #eee;
		  opacity: 1;
		}

		.orderbutton img{
			display: none;
		}

		#slideshow{
			position: relative;
			height: 420px;
		}

		#slideshow img{
			position: absolute; left: -25%;
			height: 420px;
		}

		#opa img{
			display: block;
			position: absolute; top: 40%; left: 35%;
			z-index: 97;
		}

		.about01{
			margin-top: 0;
			padding-top: 50px;
			width: 95%;
			height: auto;
			padding-bottom: 45px;
		}

		.about02{
			width: 100%;
			height: auto;
			padding-top: 45px;
			padding-bottom: 45px;
		}

		.about02 p{
			width: 95%;
			height: auto;
		}

		.LINKS{
			display: none;
		}

		#tasshy{
			height: 270px;
		}

		#tasshy table{
			width: 95%;
		}

		#tasshy .tableimage{
			display: none;
		}

		#tasshy h2{
			position: relative; top: -10px;
		}

		#tasshy hr{
			position: relative; top: 70px;
		}

		.subcontents{
			width: 95%;
		}

		.tableimage img{
			display: none;
		}

	/*商品サンプルページ*/
	.tableset .each h2{
		position: relative; top: 0; left: 5px;
		font-size: 13px;
		margin-bottom: 15px;
	}
	.tableset img{
		width: 92%;
	}

	.tableset span{
		height: 30px;
		line-height: 33px;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.cells li{
		display: block;
		width: 92%;
		margin-top: 5px;
		padding-bottom: 4px;
		font-size: 12px;
		border-bottom: 1px dashed #000;
	}

	#create{
		width: 70%;
		margin: 30px auto 0;
	}

	#create .pass{
		position: relative; top: -20px;left: 40%;
		transform: rotate(90deg);
	}

	#create ul li{
		margin-top: 10px;
	}

	/*石と色について*/
	#stone{
		width: 100%;
		margin: 50px auto;
	}

	#stone ul{
		width: 99%;
		margin: 0 auto;
	}

	#stone p{
		width: 98%;
		position: relative; top: -15px;
		font-size: 9px;
		font-weight: bold;
	}

	#stone li{
		width: 41%;
		height: 240px;
		padding: 10px;
		margin: 3px;
	}

	#stone li img{
		width: 70%;
		height: auto;
		margin-bottom: 0;
	}

	#color li {
		text-align: center;
		padding: 10px;
	}

	#color li img{
		float: none;
		margin-right: 0;
	}

	#color p{
		width: 98%;
		float: right;
	}

	#color span{
		width: 98%;
	}

	/*お客様の声ページ*/
	#voices{
		width: 95%;
	}

		#voices ul{
			list-style: none;
		}

		#voices li{
			padding-bottom: 45px;
			border-bottom: 1px dashed #aaa;
		}

		/*コピーライト*/
		.copyright{
			display: none;
		}

	.finish{
		width: 100%;
	}

	p.btn input{
		display: block;
		width: 95%;
		border: none;
	}

	.msg{
		margin: 30px auto;
		text-align: left;
		width: 80%;
		font-size: 15px;
	}

	label.inptbtn{
		width: 90%;
		height: 40px;
		background: rgb(201, 201, 201);
		margin-bottom: 20px;
	}


	}