@charset "UTF-8";

/* *******************************************************************************************
* 
*	男性の患者様
*
******************************************************************************************* */

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

.manHeader{
	position: relative;
	min-width: 1280px;
}
.manHeader_main{
	position: relative;
	height: 360px;
	background: url(../img/main_img_pc.jpg) center center no-repeat;
	background-size: cover;
}
.manHeader_main_layer_wt{
	position: absolute;
	top: 50%;
	left: 60px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.manHeader_main_ttl{
	margin-bottom: 20px;
	width: 253px;
}
.manHeader_main_copy{
	color: #40201a;
	font-size: 16px;
	line-height: 36px;
}

@media screen and (max-width : 768px){
	.manHeader{
		min-width: 320px;
	}
	.manHeader_main{
		height: 250px;
		background: url(../img/main_img_sp.jpg) center center no-repeat;
		background-size: cover;
	}
	.manHeader_main_layer{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 250px;
		background: url(../img/main_img_blur_sp.jpg) center center no-repeat;
		background-size: cover;
		z-index: 10;
		-webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 54px, 0px 54px); 
		clip-path: polygon(0px 0px, 100% 0px, 100% 54px, 0px 54px); 
	}
	.manHeader_main_layer_wt{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 54px;
		background: rgba(255,255,255,.4);
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	.manHeader_main_layer_wt:after{
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: rgba(255,255,255,.6);
		z-index: 11;
	}
	.manHeader_main_ttl{
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: auto;
		width: 135px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

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

/* ----------------------------- SPリード文 ----------------------------- */

@media screen and (max-width : 768px){
	.manLead{
		min-width: 320px;
	}
	.manLead_inner{
		padding: 43px 16px;
		color: #40201a;
		font-size: 12px;
		line-height: 27px;
	}
}

/* ----------------------------- 男性向けメニュー ----------------------------- */

.manList{
	position: relative;
	min-width: 1280px;
}
.manList:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 28px;
	background: url(../img/ic_man_label.png) center 0 no-repeat;
	background-size: 20px auto;
	z-index: 10;
}
.manList_inner{
	margin: 0 auto;
	padding: 64px 0 32px 0;
	width: 988px;
}
.manList_ttl{
	margin: 0 auto 8px auto;
	width: 209px;
}
.manList_clm{
	display: table;
	padding: 32px 0;
	background: url(../img/dline_x.gif) 0 bottom repeat-x;
	background-size: 5px 1px;
}
.manList_clm-last{
	background: none;
}
.manList_clm_item{
	display: table-cell;
	width: 247px;
	vertical-align: top;
	background: url(../img/dline_y.gif) right 0 repeat-y;
	background-size: 1px 5px;
}
.manList_clm_item:nth-child(4){
	background: none;
}
.manList_clm_item_ttl{
	margin-bottom: 16px;
	padding: 8px 0 24px 0;
	color: #40201a;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	letter-spacing: -0.06em;
	background: url(../img/ic_ttl_label.png) center bottom no-repeat;
	background-size: 77px auto;
}
.manList_clm_item_link a{
	position: relative;
	display: block;
	margin: 0 auto;
	width: 166px;
	height: 166px;
	overflow: hidden;
	-webkit-border-radius: 83px;
	-moz-border-radius: 83px;
	border-radius: 83px;
}
.manList_clm_item_link a:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 164px;
	height: 164px;
	overflow: hidden;
	z-index: 10;
	background: rgba(116,82,117,.75);
	-webkit-border-radius: 82px;
	-moz-border-radius: 82px;
	border-radius: 82px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
	-webkit-transform: scale(0);
	transform: scale(0);
}
.manList_clm_item_link a:hover:after{
	-webkit-transform: scale(1);
	transform: scale(1);
}
.manList_clm_item_link_img{
	position: relative;
	margin: 0 auto;
	width: 164px;
	height: 164px;
}
.manList_clm_item_link_img:after{
	position: absolute;
	content: '';
	bottom: -32px;
	left: 0;
	right: 0;
	margin: auto;
	width: 65px;
	height: 65px;
	z-index: 10;
	background: #fff;
	-webkit-border-radius: 33px;
	-moz-border-radius: 33px;
	border-radius: 33px;
	z-index: 15;
}
.manList_clm_item_link_img_icon{
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	margin: auto;
	width: 12px;
	height: 10px;
	z-index: 16;
}

@media screen and (max-width : 768px){
	.manList{
		min-width: 320px;
		border-top: 1px solid #dbdbdb;
	}
	.manList:after{
		top: -1px;
		width: 15px;
		height: 21px;
		background-size: 15px auto;
	}
	.manList_inner{
		padding: 46px 0 10px 0;
		width: 100%;
	}
	.manList_ttl{
		margin: 0 auto 10px auto;
		width: 157px;
	}
	.manList_clm{
		display: block;
		padding: 0;
		background: none;
	}
	.manList_clm_item{
		display: block;
		padding: 40px 0;
		width: 100%;
		background: none;
		border-bottom: 1px solid #dbdbdb;
	}
	.manList_clm_item-last{
		border-bottom: 0;
	}
	.manList_clm_item_ttl{
		margin-bottom: 13px;
		padding: 0 0 23px 0;
		font-size: 20px;
		line-height: 26px;
		background-size: 75px auto;
	}
	.manList_clm_item_link a{
		width: 222px;
		height: 222px;
		-webkit-border-radius: 111px;
		-moz-border-radius: 111px;
		border-radius: 111px;
	}
	.manList_clm_item_link a:hover:after{
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	.manList_clm_item_link_img{
		width: 221px;
		height: 221px;
	}
	.manList_clm_item_link_img:after{
		bottom: -44px;
		width: 88px;
		height: 88px;
		-webkit-border-radius: 44px;
		-moz-border-radius: 44px;
		border-radius: 44px;
	}
	.manList_clm_item_link_img_icon{
		bottom: 9px;
		width: 16px;
		height: 13px;
	}
}