@charset "UTF-8";

/*バナーエリア
---------------------------------------------------------------------------- */ 
.p-bnr{
	text-align: center;
	background:#ffffeb;
	min-width: 1100px;
	padding: 60px 0;
}
@media screen and (max-width: 767px){
	.p-bnr{
		min-width: 100%;
		padding: 4vw 2.66vw;
	}	
}
/*メトロクローゼットご利用可能エリア
---------------------------------------------------------------------------- */ 

.p-area{
	background: #f7f8f8;
	min-width: 1100px;
}
.p-area-inner{
	width: 840px;
	margin: 0 auto;
	padding: 50px 0 80px;
}
.p-area-box{
	margin-bottom: 60px;
}
.p-area-box-left,.p-area-box-right{
	width: 400px;
	position: relative;
	display: block;
}
.p-area-box-left{
	float: left;
}
.p-area-box-right{
	float: right;
}
.p-area-box-left img,
.p-area-box-right img{
	width:100%;
}
.p-area-title{
	position: absolute;
	top:285px;
	left:0;
	right:0;
	bottom:0;
	width: 65px;
	margin:0 auto;
	font-size:20px;
	font-size:2.0rem;
	font-weight: 700;
	color: #333333;
}
.p-area-price{
	position: absolute;
	top:320px;
	left:0;
	right:0;
	bottom:0;
	width: 150px;
	margin:0 auto;
	font-size:15px;
	font-size:1.5rem;
	color: #00a6ce;
}
.p-area-price-txt{
	display: inline-block;
	border:solid 1px #00a6ce;
	font-size:15px;
	font-size:1.5rem;
	padding: 0 3px;
}
.p-area-price-txt02{
	font-size:25px;
	font-size:2.5rem;
	padding-left: 15px;
}

@media screen and (max-width: 767px){
	.p-area{
		min-width: 100%;
	}
	.p-area .title{
		width: 80vw;
		text-align: center;
		margin: 0 auto;
	}
	.p-area-inner{
		width: 100%;
		margin: 0 auto;
		padding: 8vw 0 10.66vw;
	}
	.p-area-box{
		margin-bottom: 7.33vw;
	}
	.p-area-box-left{
		width: 100%;
		float: none;
	}
	.p-area-box-right{
		width: 100%;
		float: none;
	}
	.p-area-box-left img,
	.p-area-box-right img{
		width:100%;
	}
	.p-area-title{
		top:67.73vw;
		width: 13.86vw;
		font-size:4.53vw;
	}
	.p-area-price{
		position: absolute;
		top:76vw;
		width:40vw;
		font-size:4.53vw;
	}
	.p-area-price-txt{
		font-size:4.53vw;
		padding: 0 1.33vw;
	}
	.p-area-price-txt02{
		font-size:6.13vw;
		padding-left: 2.66vw;
	}
}

/*メトロクローゼットとは
---------------------------------------------------------------------------- */ 
.p-feature{
	background:
	url(../images2/top/bg_about_right.png) no-repeat top right,
	url(../images2/top/bg_about_left.png) no-repeat bottom left,
	url(../images2/top/bg_about.gif) repeat top left;
}
.p-feature-inner{
	background:#fff;
	width: 1100px;
	margin:0 auto;
	padding:50px 0 0; 
}
.p-feature-box {
  position: relative;
  overflow: hidden;
  padding: 80px 0 50px;
  z-index: 2;
}
.p-feature-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 70%;
  margin: 0 -10% 0;
  background: #ffffeb;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  z-index: -1;
}
.p-feature-box-inner {
  box-sizing: border-box; 
  width: 100%;
  height: 100%;
  margin: 0 auto;

}
.p-feature-box02 {
  position: relative;
  overflow: hidden;
  padding: 30px 0 50px;
  margin-top: 50px;
  z-index: 2;
}
.p-feature-box02:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  margin: 0 -10%;
  background: #f7f8f8;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  z-index: -1;
}
.p-feature-box02-inner {
  box-sizing: border-box; 
  width: 100%;
  height: 100%;
  margin: 0 auto;

}
.p-feature-box-column{
	width: 850px;
	margin: 0 auto;
}
.p-feature-box-column-img{
	width: 395px;
	border:solid 1px #ededed;
	position: relative;
}
.p-feature-box-column-img img{
	position: relative;
    z-index: 2;
}
.p-feature-box-column-img:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 13px;
    width: 395px;
    height: 245px;
    background:url(../images2/top/bg_feature_01.gif) repeat left top;
}
.p-feature-box-column-left{
	float: left;
}
.p-feature-box-column-right{
	float: right;
	width: 330px;
	position: relative;
}
.p-feature-box-column-left02{
	float: left;
	width: 400px;
	position: relative;
	padding-left: 98px;
}
.p-feature-box-column-right02{
	float: right;

}
.p-feature-box-column-title{
	font-size: 20px;
	font-weight:700;
	margin-top: 20px;
}
.p-feature-box-column-txt{
	font-size: 18px;
	margin-top: 10px;
}
.p-feature-box-column-icn{
	width: 88px;
	position: absolute;
	top:0;
	left:-95px;
}
.p-feature-box-column-icn02{
	width: 88px;
	position: absolute;
	top:0;
	left:0;
}
@media screen and (max-width: 767px){
	.p-feature{
		padding:1.33vw;
		background:
		none,
		none,
		url(../images2/top/bg_about.gif) repeat top left;
	}
	.p-feature .title{
		margin: 0 5vw;
	}
	.p-feature-inner{
		width: 100%;
		margin:0 auto;
		padding:8vw 0 0;
	}
	.p-feature-box {
	  padding: 5vw 0 15vw;
	}
	.p-feature-box:before {
	  width: 120%;
	  height:100%;
	}
	.p-feature-box02 {
	  padding: 8vw 0 10.66vw;
	  margin-top: 5vw;
	}
	.p-feature-box02:before {
	  width: 120%;
	  height: 100%;
	}
	.p-feature-box-column{
		width: 95%;
		margin: 0 auto;
	}
	.p-feature-box-column-img{
		width: 93%;
		border:solid 1px #ededed;
		position: relative;
	}
	.p-feature-box-column-img img{
		position: relative;
	    z-index: 2;
	    width: 100%;
	}
	.p-feature-box-column-img:before {
	    content: "";
	    display: block;
	    position: absolute;
	    z-index: 1;
	    top: 2vw;
	    left: 3.46vw;
	    width: 85vw;
	    height: 55vw;
	    background:url(../images2/top/bg_feature_01.gif) repeat left top;
	}
	.p-feature-box-column-left{
		float: none;
		position: relative;
	}
	.p-feature-box-column-right{
		float: none;
		width: 100%;
		position: relative;
	}
	.p-feature-box-column-left02{
		float: none;
		width: 100%;
		position: relative;
		padding-left: 0;
	}
	.p-feature-box-column-right02{
		position: relative;
		float: none;

	}
	.p-feature-box-column-title{
		font-size: 4.53vw;
		padding:5vw 0 8vw 20vw;
		margin-top: 0;
	}
	.p-feature-box-column-txt{
		font-size: 4.53vw;
		margin-top: 7vw;
	}
	.p-feature-box-column-icn{
		width: 17.33vw;
		position: absolute;
		top:1vw;
		left:0;
	}
	.p-feature-box-column-icn02{
		width: 17.33vw;
		position: absolute;
		top:1vw;
		left:0;

	}
	.p-feature-box-column-mt{
		top:-20vw;
		z-index: 10;
		position: absolute;
	}
	.p-feature-box-column-mt02{
		margin-top: 13vw;
	}
}