@charset "utf-8";

/**
 *
 *  製品紹介 STACK LANE
 *　stack
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/


/* Sec01
-----------------------------------------------------------------*/
.sec01{
	display:flex;
	flex-direction:row-reverse;	
	margin-bottom: 60px;
}
.sec01 .pic-main{
	margin-left: 89px;	
}
.sec01 .txt-area h3{
	margin-bottom: 35px;
}
.sec01 .txt-area .txt{
	margin-bottom: 47px;
	line-height:1.8;	
}


/* Sec02
-----------------------------------------------------------------*/
.sec02{
	margin-bottom: 70px;
	padding: 65px 60px 80px;
	background:#EDF1F8;	
}
.sec02 h3{
	margin-bottom: 50px;
}
.sec02 h3 span{
	position: relative;
	top:5px;
	padding-left:35px;
}
.sec02 .panel-box01{
	display:flex;
	margin-bottom: 45px;
}
.sec02 .panel-box01 .pic{
	margin-right: 40px;	
}
.sec02 .feature{
	padding-top: 60px;	
}
.sec02 .feature-list{
	display:flex;
	flex-wrap:wrap;	
	width: 503px;
}
.sec02 .feature-list li{
	width: 50%;
	padding: 0 7px 0 0;
	margin-bottom: 33px;
	display:flex;
}
.sec02 .feature-list li:nth-child(even){
	padding: 0 0 0 7px;
}
.sec02 .feature-list .icon{
	margin-right: 10px;	
}
.sec02 .feature-list .txt{
	line-height:1.3;
}
.sec02 .panel-box01 .notes{
	font-size:86%;
	line-height:1.3;	
}

.sec02 .panel-box02{
	display:flex;
}
.sec02 .panel-box02 .pic{
	margin-right: 20px;	
}
.sec02 .panel-box02 h4{
	margin-bottom: 5px;
	font-size:115%;
}
.sec02 .panel-box02{
	line-height:1.8;
}


/* Sec03 Sec4 汎用
-----------------------------------------------------------------*/
.sec h3{
	margin-bottom: 20px;
	font-size:186%;	
	color:#4573B9;
}

/* Sec03
-----------------------------------------------------------------*/
.sec03{
	margin-bottom: 20px;	
}
.sec03 .note{
	margin-bottom: 25px;	
}
.sec03 .note span{
	position: relative;
	top:-8px;
	padding-right: 10px;
}
.sec03 .parts-list{
	display:flex;
	flex-wrap:wrap;
}
.parts-item{
	margin-bottom: 65px;	
}
.parts-item.wide{
	width: 893px;
}
.parts-item.narrow{
	width: 280px;
}
.parts-item h4{
	margin-bottom: 30px;
	font-size:115%;
	padding-bottom: 10px;
	border-bottom:1px solid #3D3D3D;
}
.parts-item ul{
	display:flex;
	flex-wrap:wrap;
}
.parts-item ul li+li{
	margin-left: 25px;
}
.parts-item.category02{
	margin-left: 25px;
}
.parts-item.category03{
	margin-right: 25px;
}
.parts-item .pic{
	margin-bottom: 20px;	
}
.parts-item .txt-box.variation{
	background:url(../images/item/stack/ico_sizevariation.png) no-repeat right top;	
}
.parts-item .name{
	margin-bottom: 10px;
	font-size:115%;
}
.parts-item .spec{
	line-height:1.4;
}
.parts-item.category05 dl{
	display:flex;
}
.parts-item.category05 dt{
	width: 280px;
	font-size:115%;	
}
.parts-item.category05 dd+dd{
	margin-left: 40px;	
}
.parts-item.category05 dd span{
	display:block;
	text-align:center;	
	font-size:93%;
}


/* Sec04
-----------------------------------------------------------------*/
.sec04{
	margin-bottom: 85px;	
}
.sec04 h3{
	margin-bottom: 40px;
}
.sec04 .step-list{
	display:flex;
	margin-bottom: 50px;
}
.sec04 .step-list li{
	width: 280px;	
}
.sec04 .step-list li+li{
	margin-left: 82px;
}
.sec04 .step-list .pic{
	position: relative;	
	margin-bottom: 15px;
}	
.sec04 .step-list li+li .pic:before{
	position: absolute;
	left:-44px;
	top:130px;
	display:block;
	content:"";	
	width: 12px;
	height: 23px;
	background:url(../images/item/stack/ico_arw.png) no-repeat;
}
.sec04 .caution{
	padding: 25px 25px 25px 110px;
	background:url(../images/item/stack/ico_caution.png) no-repeat 27px center #F4F4F7;	
}

/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

#Stack .inner{
	padding: 0;	
}
#Stack .intro{
	padding-left:15px;
	padding-right: 15px;	
}

/* Sec01
-----------------------------------------------------------------*/
.sec01{
	display:block;
	margin-bottom: 45px;
	padding: 0 15px;
}
.sec01 .pic-main{
	margin: 0 0 28px 0;	
}
.sec01 .txt-area h3{
	margin-bottom: 20px;
}
.sec01 .txt-area .txt{
	margin-bottom: 20px;	
}


/* Sec02
-----------------------------------------------------------------*/
.sec02{
	margin-bottom: 0;
	padding: 40px 15px 45px;
	background:#EDF1F8;	
}
.sec02 h3{
	margin-bottom: 28px;
}
.sec02 h3 span{
	position: static;
	display:block;
	padding:5px 0 0 0;
}
.sec02 .panel-box01{
	display:block;
	margin-bottom: 35px;
}
.sec02 .panel-box01 .pic{
	margin-right: 0;	
}
.sec02 .feature{
	padding-top: 20px;	
}
.sec02 .feature-list{
	width: 100%;	
}
.sec02 .feature-list li{
	width: 50%;
	padding: 0 5px 0 0;
	margin-bottom: 20px;
}
.sec02 .feature-list li:nth-child(even){
	padding: 0 0 0 5px;
}
.sec02 .feature-list .icon{
	width: 60px;
	margin-right: 5px;	
}
.sec02 .feature-list .txt{
	font-size:86%;
	line-height:1.4;
}
.sec02 .panel-box01 .notes{
	font-size:84%;
	line-height:1.3;	
}

.sec02 .panel-box02{
	display:block;
}
.sec02 .panel-box02 .pic{
	margin: 0 0 25px 0;	
}
.sec02 .panel-box02 h4{
	margin-bottom: 5px;
	font-size:117%;
}


/* Sec03 Sec4 汎用
-----------------------------------------------------------------*/
.sec h3{
	margin-bottom: 15px;
	font-size:125%;	
}

/* Sec03
-----------------------------------------------------------------*/
.sec03{
	margin-bottom: 20px;
	padding: 40px 15px 0;	
}
.sec03 .note{
	margin-bottom: 20px;
	font-size:84%;		
}
.sec03 .note span{
	display:inline-block;
	width: 35px;
	top:-5px;
	padding-right: 5px;
}
.parts-item{
	margin-bottom: 20px;	
}
.parts-item.wide{
	width: 100%;
}
.parts-item.narrow{
	width: 50%;
}
.parts-item h4{
	margin-bottom: 15px;
	font-size:117%;
	padding-bottom: 5px;
}
.parts-item ul li{
	margin-bottom: 20px;	
}
.parts-item ul li+li{
	margin-left: 0;
}
.parts-item.wide ul li{
	padding: 0 4px 0 0;	
}
.parts-item.wide ul li:nth-child(even){
	padding: 0 0 0 4px;	
}
.parts-item.wide li{
	width: 50%;	
}
.parts-item.category02{
	margin-left: 0;
	padding: 0 4px 0 0;
}
.parts-item.category03{
	margin-right: 0;
	padding: 0 0 0 4px;		
}
.parts-item .pic{
	margin-bottom: 5px;	
}
.parts-item .txt-box.variation{
	background:url(../images/item/stack/ico_sizevariation.png) no-repeat right 26px;	
	background-size:34px auto;
}
.parts-item .name{
	margin-bottom: 10px;
	font-size:100%;
}
.parts-item .spec{
	font-size:92%;
	line-height:1.4;
}
.parts-item.category05 dl{
	flex-wrap:wrap;
}
.parts-item.category05 dt{
	width: 100%;
	font-size:100%;
	margin-bottom: 10px;	
}
.parts-item.category05 dd{
	width: 20%;	
	padding-right:8px;
}
.parts-item.category05 dd+dd{
	margin-left: 0;	
}
.parts-item.category05 dd span{
	text-align:center;	
	font-size:75%;
}


/* Sec04
-----------------------------------------------------------------*/
.sec04{
	margin-bottom: 10px;
	padding: 0 15px;
}
.sec04 h3{
	margin-bottom: 20px;
}
.sec04 .step-list{
	justify-content:space-between;
	margin-bottom: 25px;
}
.sec04 .step-list li{
	width: 30%;	
}
.sec04 .step-list li+li{
	margin-left: 0;
}
.sec04 .step-list .pic{
	position: relative;	
	margin-bottom: 0;
}	
.sec04 .step-list li+li .pic:before{
	position: absolute;
	left:-10px;
	top:50%;
	margin-top: -6px;
	width: 6px;
	height: 12px;
	background-size:6px auto;
}
.sec04 .step-list .txt{
	display:none;	
}
.sec04 .caution{
	padding: 60px 15px 20px 15px;
	background:url(../images/item/stack/ico_caution.png) no-repeat center 18px #F4F4F7;	
	background-size:36px auto;
}


}