/***********************************
カスタムパーツ用CSS
***********************************/

.textArea {
    margin: 0 auto 30px;
}
.p1p{
    padding:1%;
}
.p2p{
    padding:2%;
}
.p3p{
    padding:3%;
}
.p4p{
    padding:4%;
}
.p5p{
    padding:5%;
}

@media (max-width: 736px) {
    .textArea {
        margin: 0 auto 2%;
        padding:0 2%;
    }
}

/**************
左右BOX
**************/
.LR_box{
    
}
.LR_box .left{
	float:left;
}
.LR_box .right{
	float:right;
}

.LR_box .left img,
.LR_box .right img{
    margin-bottom:2%;
}
@media (max-width: 736px) {
    .LR_box .left{
    	float:none;
    }
    .LR_box .right{
    	float:none;
    }
}

ul.LR_list{
    
}
ul.LR_list li{
    margin-bottom:2%;
}

.LR_box_inner{
    margin-bottom:2%;
}
@media (max-width: 736px) {
    .LR_box_inner .left,
    .LR_box_inner .right{
        border-bottom:1px dotted #000;
        margin-bottom:4%;
    }
}

/**************
横幅
**************/

.w10{
	width:10%;
}
.w20{
	width:20%;
}
.w30{
	width:30%;
}
.w40{
	width:40%;
}
.w50{
	width:50%;
}
.w60{
	width:60%;
}
.w70{
	width:70%;
}
.w80{
	width:80%;
}
.w90{
	width:90%;
}
.w100{
	width:100%;
}

.left.w10{
    width:9%;
    padding-right:1%;
}
.left.w20{
    width:19%;
    padding-right:1%;
}
.left.w30{
    width:29%;
    padding-right:1%;
}
.left.w40{
    width:39%;
    padding-right:1%;
}
.left.w50{
    width:49%;
    padding-right:1%;
}
.left.w60{
    width:59%;
    padding-right:1%;
}
.left.w70{
    width:69%;
    padding-right:1%;
}
.left.w80{
    width:79%;
    padding-right:1%;
}
.left.w90{
    width:89%;
    padding-right:1%;
}
.left.w100{
    width:99%;
    padding-right:1%;
}

.right.w10{
    width:9%;
    padding-left:1%;
}
.right.w20{
    width:19%;
    padding-left:1%;
}
.right.w30{
    width:29%;
    padding-left:1%;
}
.right.w40{
    width:39%;
    padding-left:1%;
}
.right.w50{
    width:49%;
    padding-left:1%;
}
.right.w60{
    width:59%;
    padding-left:1%;
}
.right.w70{
    width:69%;
    padding-left:1%;
}
.right.w80{
    width:79%;
    padding-left:1%;
}
.right.w90{
    width:89%;
    padding-left:1%;
}
.right.w100{
    width:99%;
    padding-left:1%;
}

@media (max-width: 736px) {
    .w10,.w20,.w30,.w40,.w50,.w60,.w70,.w80,.w90,.w100{
    	width:100%;
    }

    .left.w10,
    .left.w20,
    .left.w30,
    .left.w40,
    .left.w50,
    .left.w60,
    .left.w70,
    .left.w80,
    .left.w90,
    .left.w100,
    .right.w10,
    .right.w20,
    .right.w30,
    .right.w40,
    .right.w50,
    .right.w60,
    .right.w70,
    .right.w80,
    .right.w90,
    .right.w100{
        width:100%;
        padding-left:0%;
    }
}


/**************
横並びボックス(detail_box)
**************/
.detail_box_wrap{
	
}

.detail_box_wrap .detail_box2 li,
.detail_box_wrap .detail_box3 li,
.detail_box_wrap .detail_box4 li{
	float:left;
	margin-bottom: 3%;
}

.detail_box{
	width:100%;
}

/**************
横並び×2
**************/
.detail_box2 li{
	width:49%;
}
.detail_box2 li:nth-child(2n+2){
	margin-left:2%;
}
@media (max-width: 736px) {
    .detail_box2 li{
        width:49%;
    }
    .detail_box2 li:nth-child(2n+2){
        margin-left:2%;
    }
}

/**************
横並び×3
**************/
.detail_box3 li{
	width:32%;
	margin-left:2%;
}
.detail_box3 li:first-child,
.detail_box3 li:nth-child(3n+1){
	margin-left:0%;
}
@media (max-width: 736px) {
    .detail_box3 li{
        width:32%;
        margin-left:2%;
    }
    .detail_box3 li:first-child,
    .detail_box3 li:nth-child(3n+1){
        margin-left:0%;
    }
}

/**************
横並び×4
**************/
.detail_box4 li{
	width:23.5%;
	margin-left:2%;
}
.detail_box4 li:first-child,
.detail_box4 li:nth-child(4n+1){
	margin-left:0%;
}

@media (max-width: 736px) {
    .detail_box4 li{
    	width:49%;
    	margin-left:0%;
    }
    .detail_box4 li:nth-child(2n+2){
    	margin-left:2%;
    }
}


/**************
スマホ横並び解除(「.sp_side」を加える)
**************/
@media (max-width: 736px) {
    .detail_box2.sp_side li{
        width:100%;
    }
    .detail_box2.sp_side li:nth-child(2n+2){
        margin-left:0%;
    }
    
    .detail_box3.sp_side li{
        width:100%;
        margin-left:0%;
    }
    .detail_box3.sp_side li:first-child,
    .detail_box3.sp_side li:nth-child(2n+2),
    .detail_box3.sp_side li:nth-child(3n+1){
        margin-left:0%;
    }
    
    .detail_box4.sp_side li{
        width:100%;
        margin-left:0%;
    }
    .detail_box4.sp_side li:nth-child(2n+2){
        margin-left:0%;
    }
    
}

/**************
スマホ横並び×2 (「.sp_side2」を加える)
**************/
@media (max-width: 736px) {
    .detail_box2.sp_side2 li{
        width:49%;
    }
    .detail_box2.sp_side2 li:nth-child(2n+2){
        margin-left:2%;
    }
    
    .detail_box3.sp_side2 li{
        width:49%;
        margin-left:0%;
    }
    .detail_box3.sp_side2 li:first-child,
    .detail_box3.sp_side2 li:nth-child(3n+1){
        margin-left:0%;
    }
    .detail_box3.sp_side2 li:nth-child(2n+2){
        margin-left:2%;
    }
    
    .detail_box4.sp_side2 li{
        width:49%;
        margin-left:0%;
    }
    .detail_box4.sp_side2 li:nth-child(2n+2){
        margin-left:2%;
    }
    
}