@charset "utf-8";
/* -------------
build:2014-11
version:1.0
author:webknowledge
----------------
01.共通動作
02.横幅1048px以上
03.横幅959px以上、1047px以下
04.横幅768px以上、480px以下
05.横幅479px以下

------------- */



/* ■01.共通動作
--------------------------------------------------- */
#content:after{content:""; display:block; clear:both;}
#content{display:inline-block;} 
#content{display:block;}

/* 02. shoplist company
--------------------------------------------------- */



/* ■02.横幅1028px以上（PC用）
--------------------------------------------------- */
@media screen and (min-width:1048px) {
/* ▼PC用================================================================== */
#content{ width:980px; margin:0 auto; }

.set{ margin:20px;}

.flow{
	position: relative; 
	background: url(../img/item01.jpg) no-repeat right top;
	margin: 0 20px 20px;
	height: 1625px;
}

.step01{ left: 0;  top: 0; }
.step02{ right: 0; top: 115px; }
.step03{ left: 0;  top: 485px; }
.step04{ right: 0; top: 910px; }
.step05{ left: 0;  top: 1085px; }
.btn{ right: 0; bottom: 0;}

.step01,
.step02,
.step03,
.step04,
.step05,
.btn{ 
	position: absolute;
	z-index:10;
}

.cat01{ left: 430px; top: 50px; }
.cat02{ left: 391px; top: 431px; }
.cat03{ left: 430px; top: 842px; }
.cat04{ left: 391px; top: 1034px; }

.cat01,
.cat02,
.cat03,
.cat04{
	position: absolute;
	z-index:1;
}

/* ▲PC用================================================================== */
}


/* ■03.横幅768px以上、1027px以下（Tab用）
--------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1047px) {
/* ▼Tab用================================================================= */
#content{
	width:92%;
	margin:0 auto;
}

.set{ margin:20px;}
.flow{
	position: relative; 
	background: url(../img/item01.jpg) no-repeat right top;
	margin: 0 20px;
	height: 1550px;
}
.step01{ left:  0; top: 0; }
.step02{ right: 0; top: 115px; text-align: right; }
.step03{ left:  0; top: 445px; }
.step04{ right: 0; top: 780px; text-align: right; }
.step05{ left:  0; top: 1035px; }
.btn{ top: 1395px; right: 0; text-align: right; }

.step01,
.step02,
.step03,
.step04,
.step05,
.btn{ 
	position: absolute;
	width: 47%; 
	z-index:10;
}

.step01 img,
.step02 img,
.step03 img,
.step04 img,
.step05 img{ width: 100%; }

.cat01,
.cat02,
.cat03,
.cat04{
	position: absolute;
	z-index:1;
}
.cat01{ left: 47%; top: 50px; }
.cat02{ left: 43%; top: 400px; }
.cat03{ left: 47%; top: 720px; }
.cat04{ left: 43%; top: 985px; }



/* ▲Tab用================================================================= */
}


/* ■04.横幅480px以上、767px以下（SP横用）
--------------------------------------------------- */
@media screen and (min-width:480px) and (max-width:767px) {
/* ▼SP横用================================================================ */
#content{
	width:92%;
	margin:0 auto;
}
.step01,
.step02,
.step03,
.step04,
.step05{ margin-bottom: 30px; }

.step01 img,
.step02 img,
.step03 img,
.step04 img,
.step05 img{ width: 100%; }



/* ▲SP横用================================================================ */
}


/* ■05.横幅479px以下（SP縦用）
--------------------------------------------------- */
@media screen and (min-width:0px) and (max-width:479px) {
/* ▼SP縦用================================================================ */
#content{
	width:90%;
	margin:0 auto;
	}

.step01,
.step02,
.step03,
.step04,
.step05{ margin-bottom: 20px; }

.step01 img,
.step02 img,
.step03 img,
.step04 img,
.step05 img{ width: 100%; }


/* ▲SP縦用================================================================ */
}