@charset "UTF-8";

/*=======================================================
共通
=======================================================*/
.el_sec_mainTtl {
	font-size: 32px;
	color: #815DC6;
    letter-spacing: 1.92px;
	line-height: 1.5;
	position: relative;
}
.el_sec_mainTtl::after {
	position: absolute;
	content: "";
	width: 76px;
	height: 7px;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #DED3F4;
}
.el_btn {
	width: 320px;
	height: 50px;
	border-radius: 30px;
	display: flex;
	margin: auto;
	justify-content: center;
	align-items: center;
	background: #FF277A;
	color: #fff;
	font-size: 20px;
	position: relative;
}
.el_btn::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	border-style: solid;
	border-width: 5.5px 0 5.5px 9px;
	border-color: transparent transparent transparent #fff;
}
.bl_cardUnit {
	gap: 32px;
	margin-bottom: 40px;
}
.bl_card {
	display: flex;
	flex-flow: column;
}
.el_card_ttl {
	font-size: 28px;
	margin-bottom: 8px;
}
.bl_card_imgWrapper {
	position: relative;
}
.bl_card_imgWrapper::after {
	position: absolute;
	content: "";
	border: 1px solid #B9B9B9;
	width: 320px;
	height: 170px;
	top: 0;
	left: 0;
}
.bl_card_imgWrapper > img {
	width: 320px;
	object-fit:cover;
}
.bl_card_body {
	flex-grow: 1;
    background-color: #fff;
	border: 1px solid #B9B9B9;
	border-top-style: none;
	padding: 16px 24px 26px;
}
.el_card_sub_ttl {
    color: #815DC6;
	font-size: 20px;
	letter-spacing: 0.88px;
	text-align: center;
	margin-bottom: 8px;
}
@media screen and (max-width: 750px) {
    .el_sec_mainTtl {
	    font-size: 60px;
    }
    .bl_cardUnit {
		gap: 40px;
	    margin-bottom: 40px;
    }
	.el_card_ttl {
	    font-size: 42px;
	    margin-bottom: 16px;
    }
	.bl_card_imgWrapper::after {
	    width: 100%;
	    height: 366px;
    }
    .bl_card_imgWrapper > img {
	    width: 100%;
    }
    .bl_card_body {
	    padding: 24px 24px 32px;
    }
    .el_card_sub_ttl {
	    font-size: 30px;
	    margin-bottom: 16px;
    }
}
/*=======================================================
About
=======================================================*/
.bl_about {
	padding: 32px 0 0;
}
.bl_about_txt {
	text-align: center;
	margin-bottom: 32px;
}
.bl_btn_list {
	display: flex;
	flex-flow: nowrap;
	gap: 32px;
	align-items: stretch;
	justify-content: center;
}
.bl_about_btn {
    width: 320px;
    border-radius: 50px;
    position: relative;
    display: flex;
    flex: 1 1 auto;
}
.bl_about_btn::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
    border-style:solid;
    border-width: 8px 5px 0 5px;
    border-color: #FFFFFF transparent transparent transparent;
}
.bl_about_btn a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 1.5;
    text-decoration: none;
	letter-spacing: 0.8px;
}
.bl_shop_btn {
    background-color: #61517E;
}
.bl_tel_btn {
    background-color: #E279A1;
}
.bl_manufacturer_btn {
	background-color: #6A8EA8;
}
.bl_manufacturer_btn a {
    font-size: 17px;
}
@media screen and (max-width: 750px) {
    .bl_about {
	    padding: 48px 0 64px;
    }
	.bl_btn_list {
		flex-flow: column;
	    gap: 32px;
    }
    .bl_about_btn {
        width: 100%;
    }
	.bl_about_btn::after{
		right: 30px;
		border-width: 18px 11px 0 11px;
	}
    .bl_about_btn a,
	.bl_manufacturer_btn a {
		font-size: 32px;
    }
}
/*=======================================================
Shop
=======================================================*/
#shop {
	padding: 56px 0;
}
#shop .bl_card_body > p + p{
	margin-top: 24px;
}
@media screen and (max-width : 750px){
	#shop {
	    padding: 64px 0;
    }
	#shop .bl_card_body > p + p{
	    margin-top: 32px;
    }
}
/*=======================================================
Tel
=======================================================*/
#tel {
	padding: 56px 0;
	background-color: #F5F0FD;
}
#tel .bl_card_body > p + p{
	margin-top: 24px;
}
@media screen and (max-width : 750px){
	#tel {
	    padding: 64px 0;
    }
	#tel .bl_card_body > p + p{
	    margin-top: 32px;
    }
}
/*=======================================================
Manufacturer
=======================================================*/
#manufacturer {
	padding: 56px 0;
}
.bl_manufacturer_txt {
	margin-bottom: 32px;
}
.bl_manufacturer_txt > p + p{
	margin-top: 24px;
}
#manufacturer .bl_cardUnit {
	margin-bottom: 48px;
}
#manufacturer .bl_cardUnit {
	margin-bottom: 48px;
}
.bl_manufacturerList {
	display: flex;
	flex-flow: wrap;
	gap: 32px;
}
.bl_manufacturerList .bl_manufacturer_img {
    width: 232px;
}
.bl_manufacturerList .bl_manufacturer_img > a > img {
	width: 232px;
	border: 1px solid #B9B9B9;
}
.el_manufacturer_site_ttl {
	font-size: 24px;
	text-align: center;
	margin-bottom: 24px;
	letter-spacing: 0.96px;
}
.bl_manufacturerList {
    display: flex;
	flex-flow: wrap;
	gap: 32px;
}
@media screen and (max-width : 750px){
	#manufacturer {
	    padding: 64px 0;
    }
	.bl_manufacturer_txt > p + p{
	    margin-top: 32px;
    }
	.el_manufacturer_site_ttl {
	    font-size: 32px;
    }
    .bl_manufacturerList .bl_manufacturer_img {
        width: 320px;
    }
    .bl_manufacturerList .bl_manufacturer_img > a > img {
        width: 320px;
    }
}
/*=======================================================
Eye clinic
=======================================================*/
#eye_clinic {
	padding: 56px 0;
	background-color: #F5F0FD;
}
#eye_clinic .bl_subscription_txt > p + p {
	margin-top: 24px;
}
@media screen and (max-width : 750px){
	#eye_clinic {
	    padding: 64px 0;
    }
    #eye_clinic .bl_subscription_txt > p + p {
	    margin-top: 32px;
    }
}