@charset "shift_jis";


/* all
---------------------------------------*/

/*
* { margin:0; padding:0; }
#contents { width:740px; }
#contents ul{letter-spacing:-0.4em;}li{letter-spacing:normal;}
#contents li{display:inline-block;*display: inline;*zoom: 1;}

#contents .estimate_caution ul li {
	display:block;
}

.none{
	display:none;
}	
*/


/* 見出し
---------------------------------------*/

/* 斜線の大見出し */
.heading.md-diagonal {
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 28px;
	border-bottom: 3px solid #9fd828;
	background-color: #eee;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#eee 25%, #eee 50%,
		#fff 50%, #fff 75%,
		#eee 75%, #eee
	);
	background-size: 4px 4px;
}

.heading.md-diagonal-m {
	margin-bottom: 10px;
	padding: 5px 10px;
	font-size: 18px;
	border-left: 3px solid #9fd828;
	background-color: #eee;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#eee 25%, #eee 50%,
		#fff 50%, #fff 75%,
		#eee 75%, #eee
	);
	background-size: 4px 4px;
}

/*
h3{
	font-size:16px;
	background: url(img/h3.gif);
	height:34px;
	line-height:34px;
	letter-spacing: normal;
	padding:0 13px;
	margin:15px 0 0;
}
h3 span{
	font-size:12px;
	padding:0 13px;
	font-weight:lighter;
}

h4{
	font-size:15px;
	letter-spacing: normal;
	padding:0 0 3px;
	margin:20px 13px 5px;
	border-bottom:1px dotted #c9c9c9;
}

h5{
	font-size:14px;
	letter-spacing: normal;
	padding:0 0 3px;
	margin:25px 13px 10px;
}
*/

ul.zoom-icon li {
	position:relative;
}
ul.zoom-icon li a:before{
	font-family: "メイリオ","Meiryo";
	font-weight: bold;
	content:"＋";
	font-size:16px;
	
	position:absolute;
	width:10px;
	height:10px;
	line-height:10px;
	border-radius:5px;
	
	background:rgba(238,238,238,0.5);
	color:#555;
	border:1px solid #aaa;
	
	padding:5px;
	margin:5px;
	text-indent:-3px;
	right:0;
	top:0;
	transition:color 0.3s, background-color 0.25s;
}
ul.zoom-icon li a:hover:before{
	color:#6D9B37;
	background:#fff;
	transition:color 0.3s, background-color 0.25s;
}


/* #app
---------------------------------------*/
#app p{
	text-align:center;
	letter-spacing:1px;
	line-height:20px;
	margin:20px 0 80px;
}


/* #top
---------------------------------------*/
#top .top-txt {
	margin: 25px 0 0;
	color: #333;
	font-size: 23px;
	font-weight: bold;
	text-align: center;
}
#top .top-txt span {
	margin: 0 3px;
	padding: 0 5px;
	color: #fff;
	border-radius: 3px;
	background-color: #FF6600;
}


/* #point
---------------------------------------*/
#point{
	margin-bottom:80px;
}
#point .point-a {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #dcdcdc;
}
#point .point-a h2.heading{
	margin-bottom: 10px;
	font-size: 20px;
	border-bottom: 5px solid #C0EE60;
}
#point .point-b p {
	line-height: 1.8;
}


/* #color
---------------------------------------*/
#color{
	margin:0 0 80px;
}
.cloth .cloth-info-area {
	margin: 10px 2px 15px;
	padding: 10px;
	border: 1px dashed #FF5A23;
	border-radius: 6px;
}
.cloth .cloth-info-area .heading {
	font-size: 18px;
	text-align: center;
}
.cloth .cloth-info {
	padding: 8px 8px 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #999;
	background-color: #eee;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#eee 25%, #eee 50%,
		#fff 50%, #fff 75%,
		#eee 75%, #eee
	);
	background-size: 4px 4px;
}
.cloth hr {
	border-bottom: 1px dashed #ddd;
}
.cloth .item {
	margin-bottom: 20px;
}
.cloth .item .el-name {
	font-size: 12px;
}
.cloth .item .el-name span {
	margin-left: 8px;
	font-size: 11px;
	font-weight: normal;
}
.cloth .pattern {
	margin-bottom: 20px;
}
.cloth .pattern .wrap {
	padding: 10px 10px 5px;
	font-size: 11px;
	background-color: #eee;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#eee 25%, #eee 50%,
		#fff 50%, #fff 75%,
		#eee 75%, #eee
	);
	background-size: 4px 4px;
}
.cloth .pattern .el-thumb {
	display: block;
	height: 80px;
	overflow: hidden;
	margin-bottom: 2px;
}
.cloth .pattern .el-thumb img {
	width: 100%;
}

.hatome .item {
	margin-bottom: 20px;
}
.hatome .item a {
	border: 1px solid #ddd;
	border-radius: 3px;
}
.hatome .item .el-name {
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}


/* #detail
---------------------------------------*/
#detail{
	margin:0 0 80px;
}







/* #price
---------------------------------------*/
#price{
	margin:0 0 80px;
}


/* 防炎ラベル
---------------------------------------*/
.bouen_label {
	margin: 0 10px;
	padding: 15px;
	border: 1px dotted #FF6666;
	border-radius: 6px;
	background-color: #fff9f9;
}




/* #checker
---------------------------------------*/
#checker li{display:inline-block;*display: inline;*zoom: 1;}

#checker .image{
	position:relative;
	height:375px;
	overflow:hidden;
}

#checker div.image *{
	position:absolute;
}

#checker div.pairs {
	padding: 10px;
	background-color: #eee;
	background-image: linear-gradient(
		-45deg,
		#fff 25%,
		#eee 25%, #eee 50%,
		#fff 50%, #fff 75%,
		#eee 75%, #eee
	);
	background-size: 4px 4px;
}
#checker div.pairs .num {
	padding: 5px;
	background-color: #fff;
}
#checker div.pairs .num p{
	font-weight:bolder;
}
#checker div.pairs .num p span{
	font-weight:lighter;
	padding-left:10px;
}

/* ハトメカラー非表示用 */
.hatome-hidden {
	display: none!important;
}



/* #checker .image *
---------------------------------------*/
#hatome.a1{top:30px;left:48px;} #pole.a1{top:43px;left:-65px;}
#hatome.a2{top:35px;left:48px;} #pole.a2{top:60px;left:-65px;}
#hatome.b1{top:30px;left:48px;} #pole.b1{top:76px;left:-65px;}
#hatome.b2{top:30px;left:48px;} #pole.b2{top:41px;left:-64px;}
#hatome.c1{top:36px;left:48px;} #pole.c1{top:46px;left:-64px;}


/* #checker .pannel *
---------------------------------------*/

/* p */
#checker div.pannel p.title{
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	margin-bottom:10px;
	font-weight:bolder;
	font-size:16px;
	padding:3px 8px;
	background:#f7f7f7;
}
#checker div.pannel p.title span{
	font-weight:lighter;
	font-size:12px;
	float:right;
	padding:5px 0 0 10px;
	color:#444;
}
#checker div.pannel p.hatome.type{
	position:absolute;
	margin:0 5px;
	font-size:12px;
	color:#444;
}
#checker div.pannel p.hatome.type.shape{
	line-height:40px;
}
#checker div.pannel p.hatome.type.color{
	line-height:26px;
}

/* ul*/
#checker div.pannel ul.hatome{
	margin:0 0 10px 30px;
}
#checker div.pannel ul.cloth{
	margin:15px 5px;
}
#checker div.pannel ul.hatome li{
	margin:2px;
}
#checker div.pannel ul.cloth li{
	margin:2px 0px;
}

/* .color li*/
#checker div.pannel ul.hatome.color li img,
#checker div.pannel ul.cloth.color li img{
	border:1px solid #ddd;
	margin:0 1px 1px 0;
}
#checker div.pannel ul.hatome.color li:hover img,
#checker div.pannel ul.cloth.color li:hover img{
	margin:1px 0 0 1px;
}
#checker div.pannel ul.hatome.color li.selected img,
#checker div.pannel ul.cloth.color li.selected img{
	border:1px solid #FF7600;
	background:#FFBE00;
}

/* .hatome .shape li*/
#checker div.pannel ul.hatome.shape li{
	height:40px;
	overflow:hidden;
}
#checker div.pannel ul.hatome.shape li:hover img{
	margin-top:-40px;
}
#checker div.pannel ul.hatome.shape li.selected img{
	margin-top:-80px;
}


/* IE */
*:first-child+html #checker div.pannel p.hatome.type{
	margin-left:-20px;
}
*:first-child+html #checker div.pannel p.title span{
	margin-top:-28px;
	margin-right:10px;
}


/* .estimate_form & form
------------------------*/
.estimate_form td ,
.estimate_form th {
	padding: 8px;
}
/*
.estimate_form {
	margin: 0 auto 30px auto;
	width: 720px;
}
.estimate_form td ,
.estimate_form th {
	border: 1px solid #CCC;
	padding: 10px;
}
.estimate_form th {
	background: #EEE;
	width: 100px;
}
*/

.estimate_caution {
	padding:7px 5px;
	border:1px dotted #aaa;
	background:#ecece7;
	letter-spacing:0.05em;
}
.estimate_caution ul li {
	padding: 0px 10px;
	line-height:18px;
}
.estimate_caution img {
	margin: 0 3px 5px;
}

.estimate_form td p.label {
    margin: 2px 5px 2px 0px;
    border: 1px solid #CCC;
    background: none repeat scroll 0% 0% #EEE;
    padding: 5px;
    color: #000;
    display: inline-block;
}

.form li {margin:0 5px 0 0; display:inline-block; /* For IE 6/7 */ *display: inline; *zoom: 1;}
/*.form p {margin:6px 0 0; color:#444;}*/
.form li p{margin:2px 5px 2px 0; border:1px solid #ccc; background:#eee; padding:5px;color:#000; display:inline-block; /* For IE 6/7 */ *display: inline; *zoom: 1;}
.form input {height:20px;}
.form table caption{text-align:left;font-weight:bold;margin:5px 0;}
.form textarea{font-size:12px;}
.form input[type=button]#reset {font-size:11px;line-height:12px;height:20px;}

/* .hatome .shape li*/
.form td.hatome div.left{
	margin-right:30px;
}
.form td.hatome div.left input{
	margin-top:15px;
}
.form td.hatome p.t_bold{
	margin-bottom:5px;
}
.form td.hatome label{
	display:inline-block;
	margin:3px 5px;
	cursor: pointer;
	text-align:right;
}
.form td.hatome input[name=shape] {
	height:12px;
	margin:50px 3px 0 5px;
	position: absolute;
}
.form td.hatome label span {
	display:block;
	height: 40px;
	overflow: hidden;
	margin: 3px 0;
}
.form td.hatome label:hover span img{
	margin-top:-40px;
}
.form td.hatome input[name=shape]:checked + label span img{
	margin-top:-80px;
}

.form div.ryoumen{
	margin:10px 5px 5px;
	padding:5px 10px;
	border:1px solid #ddd;
}


/* [.mitumori_btn] start ======================================*/

a.mitumori_btn {
	padding:6px 10px;
	margin:0 5px;
	text-align:center;
	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
	background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
	background-color:#d0451b;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #854629;
}	
.mitumori_btn:hover {	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
	background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
	background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
	background-color:#bc3315;
}	
.mitumori_btn:active {	
	position:relative;
	top:1px;
}

/* [.mitumori_btn] end ======================================*/


/*ページ内フォームの防炎ラベル部分
*/

ul.notes li {
	display: block;
}
.estimate_form .input-label {
    display: block;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
    padding: 3px;
    font-size: 12px;
}