@charset "utf-8";
/* sub CSS Document */

br.pc{display: block}
br.sp{display: none}
@media screen and (max-width: 769px) {
	br.pc{display: none}
	br.sp{display: block}	
}

.sub_title{
	position: relative;
	padding-bottom: 150px;
	z-index: 1;
}

.sub_title h2,
.sub_title h2.sub_title-sub {
    line-height: 15rem;
    padding: 6.2% 0;
    
    font-size: 10.0rem;
    font-family: 'Playfair Display', serif;
    font-weight: normal;
    letter-spacing: 0.15em;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0.1em;
}
.sub_title h2.sub_title-sub{
	font-size: 7.5rem;
	line-height: 13.0rem;
	letter-spacing: 0.1em;
	margin-bottom: 60px;
	padding-bottom: 0;
}
.sub_title h2.sub_title-sub img{
	display: inline-block;
	margin: -15px 0 0;
}
.sub_title-text{
	font-size: 1.9rem;
	font-weight: 300;
	line-height: 5.0rem;
}
.medication .sub_title-text{
	display: none;
}
.sub_title-img{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
}
@media screen and (max-width: 1620px) {
	.sub_title-img{
		width: 40%;
        height: auto;
	}
}
@media screen and (max-width: 769px) {
	.sub_title{
		padding-bottom: 0;
	}
	.sub_title h2 {
		font-size: 3.7rem;
		line-height: 6.5rem;
	}
	.sub_title h2.sub_title-sub{
		font-size: 3.1rem;
		line-height: 6.0rem;
		margin-bottom: 30px;
		position: relative;
	}
	.sub_title h2.sub_title-sub img{
		width: 70px;
		position: absolute;
		top: 25px;
		right: -65px;
		margin: 0;
	}
	.sub_title-text{
		font-size: 1.2rem;
		line-height: 2.6rem;
	}
	.medication .sub_title-text{
		display: block;
	}
	.sub_title-img{
		position: relative;
		width: calc( 100% - 6vw );
		bottom: inherit;
		right: inherit;
		margin: 40px 0 0 6vw;
	}
}

h3 p{
	/*font-weight: 200;*/
	font-size: 1.9rem;
	line-height: 5.0rem;
	letter-spacing: 0.1em;
	text-align: center;
	margin-top: 40px;
}
@media screen and (max-width: 769px) {

	h3.is-noborder{
		padding-bottom: 0;
	}
	h3.is-noborder:after{
		display: none;
	}
	h3 p{
		font-size: 1.2rem;
		line-height: 2.6rem;
	}
}


/* お近くの店舗を探す
============================================================================================================ */
.btn_search{
	margin: 100px 0 0;
	position: relative;
}
.btn_search a{
	display: block;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #F2F2F2;
	font-size: 3.0rem;
	font-weight: 300;
	letter-spacing: 0.5em;
	height: 350px;
	
	text-decoration: none;
	z-index: 2;
	overflow: hidden;
	transition: all 0.3s ease;
}
.btn_search a:after{ 
	content: "";
	position: absolute;
	display: block;
	background: url(../../shared/images/icon_arrow_r_gray.svg) no-repeat;
	background-size: contain;
	background-position: center center;
	width: 12px;
	height: 14px;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	transform: translate(220px,-50%);
	transition: .3s all ease;
}
@media screen and (max-width: 769px) {
	.btn_search{
		background: #E6E6E6;
		height: 85px;
	}
	.btn_search a{
		width: calc(100% - 12vw);
		height: 70px;
		border-radius: 35px;
		background: #F7F7F7;
		top: -35px;
		left: 0;
		right: 0;
		margin: 0 auto;
		font-size: 1.3rem;
	}
	.btn_search a:after{
		width: 5px;
		height: 6px;
		transform: translate(95px,-50%);
	}
}

.btn_search a span:before,
.btn_search a span:after {
    content:"";
    display: inline-block;
    width: 0;
    height: 100%;
    background: -moz-linear-gradient(left,  rgba(237,108,0,0.3) 0%, rgba(237,108,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(237,108,0,0.3) 0%,rgba(237,108,0,1) 100%);
    background: linear-gradient(to right,  rgba(237,108,0,0.3) 0%,rgba(237,108,0,1) 100%);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.btn_search a span:after {
    background: -moz-linear-gradient(left,  rgba(237,108,0,0) 50%, rgba(237,108,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(237,108,0,0) 50%,rgba(237,108,0,1) 100%);
    background: linear-gradient(to right,  rgba(237,108,0,0) 50%,rgba(237,108,0,1) 100%);
}
.btn_search a:hover {
	color: #ED6C00;
	background: #fff;
}
.btn_search a:hover:after{ 
	background-image: url(../../shared/images/icon_arrow_r_orange.svg);
	transform: translate(230px,-50%);
}
.btn_search a:hover span:before {
    animation-name: gradationLine-s;
    animation-timing-function:ease-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
}
.btn_search a:hover span:after {
    animation-name: gradationLine;
    animation-delay:0.6s;
    animation-timing-function:ease-out;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
}



.sub_main{
	background: #F7FAFB;
	margin: -75px 0 0;
	padding: 150px 0 200px;
}
.medication .sub_main{
	margin: 0;
	padding: 0 0 170px;
}


/* お問い合わせ
============================================================================================================ */
.btn_contact{
	padding: 0 0 100px;
}
.btn_contact-title{
	font-family: 'Noto Serif JP', serif;
	font-size: 3.0rem;
	line-height: 1;
	letter-spacing: 0.2em;
	text-align: center;
	color: #ED6C00;
}
.btn_contact-banner{
	background: url(../../service/images/homevisit/contact_bg.png) no-repeat;
	background-position: center center;
	background-color: #FEFBF7;
	color: #000;
	height: 350px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.0rem;
	font-weight: 200;
	text-align: center;
	letter-spacing: 0.5em;
	text-decoration: none;
	z-index: 2;
	overflow: hidden;
	transition: all 0.3s ease;
	margin: 80px 0;
}
.btn_contact-banner:after{ 
	content: "";
	position: absolute;
	display: block;
	background: url(../../shared/images/icon_arrow_r_gray.svg) no-repeat;
	background-size: contain;
	background-position: center center;
	width: 12px;
	height: 14px;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	transform: translate(323px,-50%);
	transition: .3s all ease;
}
.btn_contact-banner span:before,
.btn_contact-banner span:after {
    content:"";
    display: inline-block;
    width: 0;
    height: 100%;
    background: -moz-linear-gradient(left,  rgba(237,108,0,0.3) 0%, rgba(237,108,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(237,108,0,0.3) 0%,rgba(237,108,0,1) 100%);
    background: linear-gradient(to right,  rgba(237,108,0,0.3) 0%,rgba(237,108,0,1) 100%);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.btn_contact-banner span:after {
    background: -moz-linear-gradient(left,  rgba(237,108,0,0) 50%, rgba(237,108,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(237,108,0,0) 50%,rgba(237,108,0,1) 100%);
    background: linear-gradient(to right,  rgba(237,108,0,0) 50%,rgba(237,108,0,1) 100%);
}
.btn_contact-banner:hover {
	color: #ED6C00;
	background-color: #fff;
}
.btn_contact-banner:hover span:before {
    animation-name: gradationLine-s;
    animation-timing-function:ease-out;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
}
.btn_contact-banner:hover span:after {
    animation-name: gradationLine;
    animation-delay:0.6s;
    animation-timing-function:ease-out;
    animation-duration: 0.6s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
}
.btn_contact-caution{
	text-align: center;
	font-size: 1.6rem;
	font-weight: 300;
	/*color: #595757;*/
}
@media screen and (max-width: 769px) {
	.btn_contact{
		padding: 100px 0 0;
	}
	.btn_contact-title{
		font-size: 1.7rem;
		line-height: 3.5rem;
	}
	.btn_contact-banner{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 80px;
		width: 100%;
		font-size: 1.3rem;
		letter-spacing: 0.3em;
		border-radius: 40px;
		color: #000;
		background: url(../../service/images/homevisit/contact_bg.png) no-repeat;
		background-position: center center;
		background-size: contain;
		background-color: #FEFBF7;
		text-decoration: none;
		margin: 35px 0;
	}
	.btn_contact-banner:after{
		width: 5px;
		height: 6px;
		transform: translate(130px,-50%);
	}
	.btn_contact-caution{
		text-align: center;
		font-size: 1.0rem;
		line-height: 1.7rem;
	}
}