@charset "utf-8";

/***********************************************************************************************************************
* 共通
***********************************************************************************************************************/
#container{color: #333;}
#container.proposesupport-bg{
	background: #f6f6f6;
	padding-bottom: 0px;
}

/*パンくずリスト*/
#container.proposesupport-bg #breadcrumbs{
	background: #fff;
}

/*サポートタイトル*/
#proposesupport-title{
	margin-bottom: 33px;
	width: 100%;
	text-align: center;
}
#proposesupport-title h1{
	display: inline-block;	
	border: 2px solid #6ebb30;
    color: #6ebb30;
    font-size: 16px;
   	font-weight: bold;
    line-height: 1.4em;
    margin: 10px auto 25px;
    padding: 14px 25px 10px;
    text-align: center;
}
#proposesupport-title p{
	max-width: 700px;
	margin: 0 auto;
}
.proposesupport-sub-title {
    position: relative;
    padding: 10px 0 25px;
    margin-bottom: 28px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
}
.proposesupport-sub-title::after{
	content: "";
	background: #646464;
	position: absolute;
	left: 50%;
	bottom: 0px;
	margin-left: -67px;
	width: 134px;
	height: 2px;
}
.proposesupport-sub-description{
	width: 700px;
	margin: 0 auto 30px;
	padding: 0;
}
/*ピックアッププラン*/
.pickup-list{
	width: 100%;
	letter-spacing: -0.5em;
	margin-bottom: 15px;
}
	.pickup-list li{
		background: #fff;
		display: inline-block;
		width: 336px;
		margin-bottom: 20px;
		margin-right: 11px;
		border: 1px solid #e4e4e4;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		    -ms-box-sizing: border-box;
		     -o-box-sizing: border-box;
		        box-sizing: border-box;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		    -ms-border-radius: 4px;
		     -o-border-radius: 4px;
		        border-radius: 4px;
		-webkit-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		   -moz-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		    -ms-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		     -o-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		        box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		overflow: hidden;
		position: relative;
		letter-spacing: normal;
		vertical-align: top;
	}
	.pickup-list li:nth-child(3n){
		margin-right: 0px;
	}
		.pickup-list li figure{
			width: 100%;
			height: 155px;
			position: relative;
			overflow: hidden;
			-webkit-transition: opacity .5s ease;
			-moz-transition: opacity .5s ease;
			-ms-transition: opacity .5s ease;
			-o-transition: opacity .5s ease;
			transition: opacity .5s ease;
		}
		.pickup-list.pickup-list-height192 li figure{
			height: 192px;
		}
			.pickup-list li figure img{width: 100%;}
		.pickup-list.ring li figure{
			height: 224px;
		}
		.pickup-list__box{
			padding: 22px 15px 20px 15px;
		}
			.pickup-list__box h3{
				font-size: 17px;
				line-height: 1.2em;
				margin-bottom: 9px;
			}
			.pickup-list__box p.description{
				line-height: 1.6em !important;
				margin-bottom: 25px;
			}
			.pickup-list__shop{
				display: block;
				font-size: 12px !important;
				line-height: 1.6em !important;
				color: #4d9c0c;
				margin-bottom: 12px;
			}
			.pickup-list li a.link-box{
				display: block;
			}				
			.pickup-list li a.link-box:hover figure{
				-ms-filter: alpha( opacity=60 );
				filter: alpha( opacity=60 );
				opacity: 0.6;
			}
		.pickup-list li a.list{
			position: relative;
			display: inline-block;
			color: #888;
			float: right;
			padding-right: 20px;
			margin: -10px 15px 10px 0;
		}
		.pickup-list li a.list:hover{
			text-decoration: underline;
		}
			.pickup-list li a.list::after{
				border-top: 2px solid #888;
				border-right: 2px solid #888;
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				right: 10px;
				top: 50%;
				-webkit-transform: rotate(45deg) translateY(-3px);
				   -moz-transform: rotate(45deg) translateY(-3px);
				    -ms-transform: rotate(45deg) translateY(-3px);
				     -o-transform: rotate(45deg) translateY(-3px);
				        transform: rotate(45deg) translateY(-3px);
				-webkit-transform-origin: right 50%;
				   -moz-transform-origin: right 50%;
				    -ms-transform-origin: right 50%;
				     -o-transform-origin: right 50%;
				        transform-origin: right 50%;
			}
			.pickup-list li a.list.target::after{
				display: none;
			}
			.pickup-list li a.list .fa{
				position: absolute;
				right: 0px;
				top: 5px;
				font-size: 14px;
			}
		.pickup-list .link{
			    position: absolute;
    			padding-right: 20px;
			    display: inline-block;
			    color: #888;
			    bottom: 10px;
			    right: 20px;
			}
		.pickup-list .link:hover{
			text-decoration: underline;
		}
			.pickup-list .link::after{
				border-top: 2px solid #888;
				border-right: 2px solid #888;
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				right: 10px;
				top: 50%;
				-webkit-transform: rotate(45deg) translateY(-3px);
				   -moz-transform: rotate(45deg) translateY(-3px);
				    -ms-transform: rotate(45deg) translateY(-3px);
				     -o-transform: rotate(45deg) translateY(-3px);
				        transform: rotate(45deg) translateY(-3px);
				-webkit-transform-origin: right 50%;
				   -moz-transform-origin: right 50%;
				    -ms-transform-origin: right 50%;
				     -o-transform-origin: right 50%;
				        transform-origin: right 50%;
			}


/*ステップ*/
.flow-list{
	width: 100%;
	letter-spacing: -0.5em;
	margin-bottom: 40px;
	padding-left: 0;
	list-style: none;
}
	.flow-list li{
		background: #fff;
		display:  inline-block;
		width: 502px;
		margin-bottom: 28px;
		margin-right: 25px;
		border: 1px solid #e4e4e4;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		    -ms-box-sizing: border-box;
		     -o-box-sizing: border-box;
		        box-sizing: border-box;
		-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		    -ms-border-radius: 4px;
		     -o-border-radius: 4px;
		        border-radius: 4px;
		-webkit-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		   -moz-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		    -ms-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		     -o-box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		        box-shadow: 0px 1px 0px #e2e1e1,-1px 0px 0px #efefef,1px 0px 0px #efefef,0px 2px 0px #efefef;
		overflow: hidden;
		position: relative;
		letter-spacing: normal;
		vertical-align: top;
	}
	.flow-list li:nth-child(2n){
		margin-right: 0px;
	}
	.plan-detail .flow-list li{
		width: 350px;
		margin: 0 10px 10px 0;
		overflow: hidden;
	}
	.flow-list li h3{
	    background: #6ebb30;
   	    height: 30px;
   	    left: 16px;
   	    top: 16px;
   	    position: absolute;
   	    z-index: 1;
	    width: 75px;
	}
	.flow-list li h3:after {
	    border-left: 10px solid #6ebb30;
	    border-top: 15px solid transparent;
	    border-bottom: 15px solid transparent;
	    content: "";
	    position: absolute;
	    left: 100%;
	    top: 0;
	}
	.flow-list li h3 span {
		color: #fff;
		display: block;
		font-size: 16px;
		font-weight: bold;
		line-height: 30px;
		padding: 0 0 0 12px;
	}

		.flow-list li figure{
			width: 100%;
			height: 155px;
			overflow: hidden;
		}
			.flow-list li figure img{width: 100%;}
			.flow-list li figure {
					position: relative;
					width: 100%;
					height: 200px;
					overflow: hidden;
					-webkit-transition: opacity .5s ease;
					-moz-transition: opacity .5s ease;
					-ms-transition: opacity .5s ease;
					-o-transition: opacity .5s ease;
					transition: opacity .5s ease;
				}

		.flow-list__box{
			padding: 15px 15px 35px 15px;
		}
			.flow-list__box h4{
				font-size: 17px;
				line-height: 1.2em;
				margin-bottom: 12px;
			}
			.flow-list__box p{
				line-height: 1.6em !important;
				height: auto;
				margin-bottom: 0 !important;
			}
		.flow-list li .link-list{
			display: block;
		}
		.flow-list li .link-list .link{
			color: #888;
			position: relative;
			padding-right: 20px;
			text-decoration: underline;
		}
		.flow-list li .link-list .link:hover{
			text-decoration: none !important;
		}
		.flow-list .link:hover{
			text-decoration: underline;
		}
		.flow-list li .link-list .link::after{
				border-top: 2px solid #888;
				border-right: 2px solid #888;
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				right: 10px;
				top: 50%;
				-webkit-transform: rotate(45deg) translateY(-3px);
				   -moz-transform: rotate(45deg) translateY(-3px);
				    -ms-transform: rotate(45deg) translateY(-3px);
				     -o-transform: rotate(45deg) translateY(-3px);
				        transform: rotate(45deg) translateY(-3px);
				-webkit-transform-origin: right 50%;
				   -moz-transform-origin: right 50%;
				    -ms-transform-origin: right 50%;
				     -o-transform-origin: right 50%;
				        transform-origin: right 50%;
			}