@charset "UTF-8";

/* *******************************************************************************************
* 
*	フィナステリド・ザガーロ（男性型脱毛症）
*
******************************************************************************************* */

/* -------------------------------------------------------------------------------------------
*
* タイトルエリア 
*
* ----------------------------------------------------------------------------------------- */

.treatmentSubHeader_main{
	background: url(../img/main_img_pc.jpg) center center no-repeat;
	background-size: cover;
}
.treatmentSubHeader_main_ttl{
	width: 402px;
}

@media screen and (max-width : 768px){
	.treatmentSubHeader_main{
		background: url(../img/main_img_sp.jpg) center center no-repeat;
		background-size: cover;
	}
	.treatmentSubHeader_main_layer{
		background: url(../img/main_img_blur_sp.jpg) center center no-repeat;
		background-size: cover;
		-webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 104px, 0px 104px); 
		clip-path: polygon(0px 0px, 100% 0px, 100% 104px, 0px 104px); 
	}
	.treatmentSubHeader_main_layer_wt{
		height: 104px;
	}
	.treatmentSubHeader_main_cat{
		width: 236px;
	}
}

/* -------------------------------------------------------------------------------------------
*
* コンテンツセクション
*
* ----------------------------------------------------------------------------------------- */

/* ----------------------------- フィナステリド ----------------------------- */

.aga1{
	min-width: 1280px;
	background: #f2f0f0 url(../../img/ic_flow_label.png) center 0 no-repeat;
	background-size: 20px auto;
}
.aga1_inner{
	margin: 0 auto;
	padding: 64px 0;
	width: 926px;
}
.aga1_ttl{
	margin: 0 auto 40px auto;
	width: 506px;
}
.aga1_clm_item{
	float: left;
	width: 443px;
	color: #40201a;
	font-size: 14px;
	line-height: 28px;
}
.aga1_clm_item-l{
	margin-right: 40px;
}
.aga1_clm_item_illust{
	margin: 0 auto 31px auto;
	width: 376px;
}

@media screen and (max-width : 768px){
	.aga1{
		min-width: 320px;
		background-size: 15px auto;
	}
	.aga1_inner{
		padding: 45px 16px 50px 16px;
		width: 100%;
	    -webkit-box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    box-sizing:border-box;
	}
	.aga1_ttl{
		margin: 0 auto 30px auto;
		width: 247px;
	}
	.aga1_clm_item{
		float: none;
		width: 100%;
		font-size: 11px;
		line-height: 21px;
	}
	.aga1_clm_item-l{
		margin: 0 auto 20px auto;
		width: 231px;
	}
	.aga1_clm_item_illust{
		margin-bottom: 23px;
		width: 288px;
	}
}

/* ----------------------------- ザガーロ ----------------------------- */

.aga2{
	position: relative;
	min-width: 1280px;
	background: #f2f0f0;
	border-top: 1px solid #dbdbdb;
}
.aga2:after{
	position: absolute;
	content: '';
	top: -1px;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 28px;
	background: url(../../img/ic_flow_label.png) center 0 no-repeat;
	background-size: 20px auto;
	z-index: 10;
}
.aga2_inner{
	margin: 0 auto;
	padding: 64px 0;
	width: 926px;
}
.aga2_ttl{
	margin: 0 auto 40px auto;
	width: 104px;
}
.aga2_clm_item{
	float: left;
	width: 443px;
	color: #40201a;
	font-size: 14px;
	line-height: 28px;
}
.aga2_clm_item-l{
	margin-right: 40px;
}
.aga2_clm_item_illust{
	margin-bottom: 31px;
}

@media screen and (max-width : 768px){
	.aga2{
		min-width: 320px;
	}
	.aga2:after{
		width: 15px;
		height: 21px;
		background-size: 15px auto;
	}
	.aga2_inner{
		padding: 45px 16px 50px 16px;
		width: 100%;
	    -webkit-box-sizing:border-box;
	    -moz-box-sizing:border-box;
	    box-sizing:border-box;
	}
	.aga2_ttl{
		margin: 0 auto 30px auto;
		width: 78px;
	}
	.aga2_clm_item{
		float: none;
		width: 100%;
		font-size: 11px;
		line-height: 21px;
	}
	.aga2_clm_item-l{
		margin: 0 auto 30px auto;
		width: 231px;
	}
	.aga2_clm_item_illust{
		margin: 0 auto 23px auto;
		width: 288px;
	}
}

/* ----------------------------- AGAってなに？ ----------------------------- */

.aga3{
	position: relative;
	min-width: 1280px;
	border-top: 1px solid #dbdbdb;
}
.aga3:after{
	position: absolute;
	content: '';
	top: -1px;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 28px;
	background: url(../../img/ic_flow_label.png) center 0 no-repeat;
	background-size: 20px auto;
	z-index: 10;
}
.aga3 .treatmentAttention_inner{
	padding: 64px 0;
}
.aga3_ttl{
	margin: 0 auto 40px auto;
	width: 191px;
}

@media screen and (max-width : 768px){
	.aga3{
		min-width: 320px;
	}
	.aga3:after{
		width: 15px;
		height: 21px;
		background-size: 15px auto;
	}
	.aga3 .treatmentAttention_inner{
		padding: 50px 16px 43px 16px;
	}
	.aga3_ttl{
		margin: 0 auto 30px auto;
		width: 142px;
	}
}

/* ----------------------------- バナー ----------------------------- */

.agaBnr_clm{
	margin: 0 auto;
	width: 308px;
}

@media screen and (max-width : 768px){
	.agaBnr_clm{
		width: 256px;
	}
}

.treatmentPrice{
	border-top: 1px solid #fff;
}