@charset "UTF-8";



#titleArea{background: url(../img/detail/main.jpg) no-repeat;
	background-size: 100%;
	padding: 4% 0;}
h1{
	text-align: center;
	}
	h1 img{width: 40%;}
/* #disc */
#disc{
	overflow: hidden;
	text-align: center;
	padding: 50px 0;
	position: relative;
	}
#disc > p{
	text-align: center;
	margin: 0 0 20px;
	}
	#disc > p img{width: 30%;}
	#disc .txt{
		border-top: 3px solid #e60012;
		display: inline-block;
		}
/*  */
h2{
	text-align: center;
	font-size: 30px;
	margin: 0 0 20px;
	}
		
#sec_01{
	background: url(../img/detail/bg_img.jpg);
	position: relative;
	padding: 60px 0;
	overflow: hidden;
	margin: 0 0 50px;
	}
	#sec_01:before{
		content: "";
		position: absolute;
		top: 0;
		left: 47.5%;
		border: 30px solid transparent;
		border-top: 30px solid #fff;
		}
		
.step_box,
.step_box02{
	background: #fff;
	border-radius: 10px;
	width: 50%;
	margin: 0 auto;
	}
	.step_box dt,.step_box02 dt{
		float: left;
		background: #333;
		border-top-left-radius: 10px;
		padding: 10px 20px;
		margin-right: 30px;
		}
	.step_box dd,.step_box02 dd{
		background: #fff9aa;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 6px 20px;
		font-size: 22px;
		font-weight: bold;
		}
		
.step_box02 .rounded dd{
	border-radius: 10px;
	}
	.step_box02 .rounded dt{
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		}
.txtArea{
	text-align: center;
	padding: 20px 0;
	}
.step_box .txt,.step_box02 .txt{
	width: 75%;
	margin: 0 auto;
	}
	
	
.step_box{
	position: relative;
	margin: 0 auto 60px;
	}
	.step_box:after{
		content: "";
		position: absolute;
		bottom: -60px;
		left: 47.5%;
		border: 20px solid transparent;
		border-top: 20px solid #da3068;
		}
.step_box .btn{
	margin-top:20px;
	}
#container{
	max-width: 950px;
	width: 100%;
	margin: 0 auto 30px;
	}
#container > ul{
	background: #fffde0;
	padding: 20px;
	margin: 0 0 20px;
	}
	#container > ul li{
		display: inline-block;
		margin-left: 10%;
		}
		#container > ul li:before{
			content: url(../img/detail/check.png);
			padding-right: 5px;
			position: relative;
			top: 3px;
			}
.attention{
	border: 1px solid #333;
	border-radius: 10px;
	padding: 20px;
	}
	.attention > p{
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px dotted #333;
		padding: 0 0 5px;
		margin: 0 0 10px;
		}
		.attention ul li:before{
			content: "●";
			padding-right: 5px;
			}
#btnArea{
	margin: 0 0 40px;
	}
#btnArea .btn{
	margin: 0 auto 20px;
	}
	.kome{font-size: 14px;}
/* ボタン */
.btn{
	display: table;
	margin: 0 auto;
	position: relative;
	}	
.btn a{
	display: table-cell;
	vertical-align: middle;
	background: #e60012;
	color: #fff;
	padding: 4px 0;
	text-align: center;
	border-radius: 5px;
	font-weight: bold;
	height: 55px;
    width: 317px;
	}
	.btn a:hover{
		text-decoration: none;
		opacity: 0.7;
		}
		.btn a:after,.btn_02 a:after {
		    content: "\f0da";
		    font-family: "FontAwesome";
		    position: absolute;
		    bottom: 18px;
    		right: 25px;
		    }
.btn_02{
	display: table;
	margin: 0 auto;
	position: relative;
	}	
.btn_02 a{
	display: table-cell;
	vertical-align: middle;
	background: #e5e5e5;
	color: #333;
	border: 1px solid #333;
	padding: 15px 0;
	text-align: center;
	border-radius: 5px;
	font-weight: bold;
	height: 55px;
    width: 317px;
	}
	.btn_02 a:hover{
		text-decoration: none;
		opacity: 0.7;
		}
		
/* 靴下屋 */
#kutsusitaya #container > ul li{
		display: block;
		margin:0;
		text-align: center;
		}
      
/* 無印良品 */
#muji h2{
	color: #fff;
	}
#muji #sec_01{
	background: #822434;
	}
#muji #sec_01:before{display: none;}
#muji .step_box:after{border-top: 20px solid #fff}


/* ジャーナルスタンダード relume */
#relume .btn a:after,#relume .btn_02 a:after {
	content: "\f0da";
	font-family: "FontAwesome";
	position: absolute;
	bottom: 18px;
	right: 8px;
	}






/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {	

	
	/* beamsの並び */
	.beams-box 
	{
	float: left;
	padding-right: 10px;
	display: table;
	margin: 0 auto;
	position: relative;
	text-align:center;
}
.box .p1{
	display:inline-block;
}




/* #shop_list */
#disc > p{margin: 0 0 10px;} 
#disc > p img{width: 50%;}
h2{
	font-size: 20px;
	}
	h2 img{width: 20%;}
#disc{
	padding: 20px 0;
	}
#sec_01{
	padding: 40px 15px;
	overflow: hidden;
	margin: 0 0 30px;
	}
	#sec_01:before{
		content: "";
		left: 44.5%;
		border: 20px solid transparent;
		border-top: 20px solid #fff;
		}
.step_box,
.step_box02{
	width: 100%;
	}
	dt img{width: 75%;}
	.step_box dt,.step_box02 dt{
		padding: 8px;
		margin-right: 10px;
		text-align: center;
		}
	.step_box dd,.step_box02 dd{
		padding: 8px 10px;
		font-size: 16px;
		}
.txtArea{
	text-align: center;
	padding: 20px 10px;
	}
	.step_box02 .txt{display: inline-block;}
.step_box{
	margin: 0 auto 45px;
	}
	.step_box:after{
		bottom: -45px;
		left: 46%;
		border: 15px solid transparent;
		border-top: 15px solid #da3068;
		}
#container{
	padding: 0 15px;
	margin: 0 auto 20px;
	}
#container > ul{
	padding: 10px;
	}
	#container > ul li{
		margin: 0 5px;
		}
.attention{
	border: 1px solid #333;
	border-radius: 10px;
	padding: 20px;
	}
	.attention > p{
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px dotted #333;
		padding: 0 0 5px;
		margin: 0 0 10px;
		}
}
/* ▼▼▼ 350px
=====================================*/
@media screen and (max-width: 350px) {
.btn a,.btn_02 a{width: 250px;}
.step_box dd, .step_box02 dd{
	font-size: 13px;
	padding: 10px;
	}
}