﻿main{
	margin-top:0!important;
}
main:before{
	display:none;
}
#about .titles:before{
	background:url(../image/about.png) no-repeat center / 100% auto;
}
#advice .titles:before{
	background:url(../image/shindan.png) no-repeat center / 100% auto;
}
#faq .titles:before{
	background:url(../image/faq_w.png) no-repeat center / 100% auto;
}
#mainimage{
	position:relative;
	background:url(../image/bg4.png);
}
#mainimage .mv{
	text-align:center;
}
#mainimage .doctor_btn{
	position: absolute;
}
main >article{
	position: relative;
}
.datail_btn{
	margin-right:auto;
	margin-left:auto;
}
.datail_btn a{
	display: block;
	background:#ffffda;
	border:1px solid #11b6ce;
	box-shadow: 0 3px 0 #11b6ce;
	text-align: center;
	color:#444444;
	position:relative;
	font-weight:500;
	letter-spacing: 0.1em;
	box-sizing:border-box;
	transition: color 0.2s,background-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.datail_btn a:after{
	content: "";
	display:block;
	position: absolute;
	top:0;
	bottom:0;
	background:url(../image/arrow2.png) no-repeat center top /auto 100%;
	margin:auto;
}
main #about:before,main #advice:before{
	content:"";
	display:block;
	width:100%;
	background:url(../image/frame.png) repeat-x left top;
	position: absolute;
	right:0;
	left:0;
}
main #about:before{
	top:-35px;
}
#about >.wrap{
	padding-bottom:3px;	
}
#about h3{
	font-weight:bold;
	color:#0ab2ca;
	font-weight:700;
}
#about .textbox:before,#about .textbox:after{
	content:"";
	display:block;
	position: absolute;
	margin:auto;
	background-repeat: no-repeat;
	background-position:center;
	background-size:100% auto;
}
#about .textbox:before{
	background-image:url(../image/dog.png);
}
#about .textbox:after{
	background-image:url(../image/cat.png);
}
#about .textbox p{
	line-height:2.2;
}
#advice{
	background:url(../image/bg5.png);
}
#advice .titles{
	position:relative;
}
#advice .titles:after{
	content:"";
	display:block;
	position: absolute;
	right:0;
	left:0;
	margin:auto;
	background:url(../image/catty.png) no-repeat center top /100% auto;
}
#advice >.wrap{
	position: relative;
}
#advice:before{
	top:0;
	transform: rotate(-180deg);
}
#advice:after{
	content:"";
	display:block;
	width:100%;
	height:50px;
	background:url(../image/frame1.png) repeat-x left top;
	position: absolute;
	right:0;
	bottom:-33px;
	left:0;
	transform:rotate(-180deg);
	z-index: 10;
}
#advice .card h3{
	color:#26c9e1;
	position:relative;
	font-weight:700;
	line-height:1.5;
	text-align:center;
}
#advice .card h3:after{
	content:"";
	display:block;
	width:50px;
	height:2px;
	background:#b4c2c4;
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	margin:auto;
}
#advice .card .pdf{
	font-weight:500;
	font-size:0.912em;
	background-color:#ebebeb;
}
#advice .card .pdf:before{
	content:"";
	display:block;
	background:url(../image/pdf.png) no-repeat center / 100% auto;
	width:"";
}
#advice .card .pdf span{
	color:#b72e2e;
}
#advice .card p{
	line-height:1.8em;
}
#advice .card .pdf i{
	font-size:0.85em;
}
#faq{
	background-color:#62d5e6;
	background-repeat: no-repeat;
	background-position:center;
}
#faq >.titles{
	color:#ffffff;
}
#faq >.titles span{
	color:#c4f6fd;
}
#faq .textbox{
	letter-spacing: 0.1em;
	line-height:2.2em;
	color:#ffffff;
	margin-right:auto;
	margin-left:auto;
}
.share{
	background:#89512a;
	position:relative;
	box-sizing:border-box;
}
.share:before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size:100% auto;
}
.share ul{
	background:#ffffff;
	border-radius:5px;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
}
/*PC min1081px
--------------------------------------------*/
@media screen and (min-width:1081px),print{
	#mainimage .mv{
		background:url(../image/mv_bg_pc.png) center top;
	}
	#mainimage .doctor_btn{
		width:231px;
		top:124px;
		right:0;
		left:-1030px;
		margin:auto;
	}
	.datail_btn{
		width:340px;
		margin-top:80px;
	}
	main >article{
		padding-top:35px;
		padding-bottom:35px;
	}
	main #about:before,main #advice:before{
		height:35px;
	}
	#about{
		background-position:center top 70px,center bottom 80px;
	}
	.datail_btn a{
		border-radius: 55px;
		padding-top:20px;
		padding-bottom:20px;
	}
	.datail_btn a:after{
		width:20px;
		height:20px;
		right:25px;
	}
	#about{
		margin-bottom:120px;
		background-image:url(../image/s1_bg1_pc.png),url(../images/top/s1_bg2_pc.png);
		background-repeat: no-repeat,no-repeat;
	}
	#about h3{
		font-size:1.375em;
		margin-bottom:35px;
	}
	#about >.wrap{
		overflow:hidden;
		position: relative;
	}
	#about .textbox{
		margin-top:130px;
		width:670px;
		margin-right:auto;
		margin-left:auto;
	}
	#about .textbox:before{
		width:307px;
		height:372px;
		top:10px;
		left:-1050px;
		right:0;
	}
	#about .textbox:after{
		width:306px;
		height:372px;
		bottom:60px;
		right:-1000px;
		left:0;
	}
	#advice >.wrap{
		background-image:url(../image/s2_bg1.png),url(../images/top/s2_bg2.png);
		background-repeat:no-repeat,no-repeat;
		background-position: center top,center bottom;
		width:100%;
		overflow:hidden;
		padding-bottom:40px;
	}
	#advice >.wrap:before,#advice >.wrap:after{
		background-size:auto 100%;
		right:0;
		left:0;
	}
	#advice >.wrap:before,#advice >.wrap:after{
		position: absolute;
		content:"";
		display:block;
		background-repeat: no-repeat;
		margin:auto;
	}
	#advice >.wrap:before{
		background-image:url(../image/dog3.png);
	}
	#advice >.wrap:after{
		background-image:url(../image/cat1.png);
	}
	#advice >.wrap:before{
		width:1300px;
		height:532px;
		top:302px;
		background-position: right 70px center;
	}
	#advice >.wrap:after{
		width:1300px;
		height:532px;
		bottom:0px;
		background-position: left center;
	}
	#advice .titles{
		margin-top:70px;
	}
	#advice .titles:after{
		width:200px;
		height:169px;
		top:0;
		right:-380px;
	}
	#advice .card h3{
		padding-bottom:20px;
		margin-bottom:20px;
		font-size:1.375em;
	}
	#advice .card >p{
		font-size:1.063em;
	}
	#advice .card{
		width:633px;
		height:916px;
		background:url(../image/card_pc.png) no-repeat center;
		box-sizing:border-box;
		padding-top:305px;
		padding-right:126px;
		padding-left:126px;
		margin-top:30px;
		margin-right:auto;
		margin-left:auto;
		z-index: 30;
		position:relative;
	}
	#advice .card .pdf{
		display:flex;
		flex-wrap: wrap;
		align-items: center;
		padding:14px 20px;
		margin-top:40px;
	}
	#advice .card .pdf:before{
		width:86px;
		height:86px;
		margin-right:10px;
	}
	#advice .card .pdf p{
		width:calc(100% - 96px);
	}
	.advice_btn{
		width:870px;
		display:flex;
		justify-content: space-between;
		margin:60px auto 150px;
	}
	#faq{
		background-image:url(../image/s3_bg_pc.jpg);
		padding-bottom:96px;
	}
	#faq .titles{
		margin-top:100px;
	}
	#faq .textbox{
		width:640px;
		margin-top:100px;
	}
	.share.active{
		top:100px;
	}
	.share{
		border-radius:10px 0 0 10px;
		padding:15px;
		width:160px;
		position: fixed;
		top:700px;
		right:0;
		z-index:50;
	}
	.share dt{
		padding-top:8px;
		padding-left:15px;
		margin-bottom:10px;
	}
	.share:before{
		width:43px;
		height:43px;
		background-image:url(../image/share_pc.png);
	}
	.share ul{
		padding:8px;
	}
	.share ul li{
		width:33px;
	}
	.page_navi{
		background:#89512b;
		border-radius:10px 0 0 10px;
		width:50px;
		padding-top:24px;
		padding-bottom:24px;
		position:fixed;
		top:50%;
		right:0;
		margin:auto;
		z-index:50;
		transform: translateY(-25%);
	}
	.page_navi >.wrap{
		position:relative;
	}
	.page_navi >.wrap:before{
		content:"";
		display:block;
		width:1px;
		height:100%;
		background:#ffffff;
		position: absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
		opacity:0.5;
	}
	.page_navi span{
		display:block;
		background:#fdfbcb;
		border-radius:4px;
		width:14px;
		height:14px;
		margin-right:auto;
		margin-left:auto;
		position:relative;
		margin-bottom:18px;
		transition: all 0.2s;
	}
	.page_navi span:last-of-type{
		margin-bottom:0;
	}
	.page_navi span.active,.page_navi span:hover{
		background:#ffffff;
		width:18px;
		height:18px;
		cursor: pointer;
	}
}
@media screen and (max-width:1270px) and (min-width:751px){
	#mainimage .doctor_btn{
		right:auto;
		left:2%;
	}
}
@media screen and (max-height:690px){
	.page_navi{
		left:0;
		right:auto;
		border-radius:0 10px 10px 0;
	}
}
/*PC Tablet min751px
--------------------------------------------*/
@media screen and (min-width:751px),print{
	#mainimage .mv:before{
		content: "";
		display:block;
		background:url(../image/mv_frame.png) repeat-x left top;
		width:100%;
		height:7px;
		position:absolute;
		top:10px;
		right:0;
		left:0;
		margin:auto;
	}
	.datail_btn a:hover{
		color:#ffffff;
		background:#11b6ce;
		transform:translateY(3px);
		box-shadow: 0 0 0;
	}
	#mainimage .doctor_btn{
		transition:opacity 0.3s;
	}
	#mainimage .doctor_btn:hover{
		opacity:0.7;
	}
}
/*Tablet min751px max1080px
--------------------------------------------*/
@media screen and (min-width:751px) and (max-width:1080px){
	#mainimage .doctor_btn{
		width:14.4375em;
		height:7.7500em;
		right:0;
		left:0;
		bottom:0;
		z-index: 10;
		margin:auto;
	}
	main >article{
		padding-top:2.1875em;
	}
	.datail_btn a{
		width:340px;
		margin-right:auto;
		margin-left:auto;
		border-radius:2.0000em;
		padding-top:1.5em;
		padding-bottom:1.5em;
	}
	.datail_btn a:after{
		width:1.1250em;
		height:2.0000em;
		right:1.5625em;
	}
	main #about:before,main #advice:before{
		height:2.1875em;
	}
	#about{
		background-position:right bottom,left top;
		background-size:70% auto;
	}
	main #about:before{
		top:-2.1875em;
	}
	#about >.wrap{
		margin-top:2em;
		padding-top:5.6250em;
	}
	#about .textbox{
		width:90%;
		margin-right:auto;
		margin-left:auto;
	}
	#about .textbox:before,#about .textbox:after{
		width:19.1875em;
		height:23.2500em;
		font-size:0.8em;
	}
	#about .textbox:before{
		right:auto;
		left:3%;
		top:15em;
	}
	#about .textbox:after{
		top:7%;
		right:3%;
		left:auto;
	}
	#about .textbox h3{
		text-align:center;
		font-size:1.3750em;
		margin-bottom:1em;
		line-height:1.5;
	}
	#advice:after{
		height:3.1250em;
		background-size:auto 100%;
		bottom:-2.0625em;
	}
	#advice{
		padding-bottom:10%;
	}
	#advice .titles:after{
		width:3.1731em;
		height:3.8077em;
		top:0;
		right:0;
		left:7.5472em;
		margin:auto;
	}
	#advice > .wrap:after{
		height:33.1250em;
		background-position:right 10% bottom,left 10% bottom;
	}
	#advice .card{
		background: url(../image/card_pc.png) no-repeat center top /100% auto;
		width:39.5625em;
		height:57.2500em;
		padding-top:19.0625em;
		margin-right:auto;
		margin-left:auto;
		box-sizing:border-box;
	}
	#advice .card h3{
		font-size:1.375em;
		padding-bottom:1em;
		margin-bottom:1em;
	}
	#advice .card >p{
		width:23.7500em;
		margin-right:auto;
		margin-left:auto;
		margin-bottom:2.5000em;
	}
	#advice .card .pdf{
		width:25.8503em;
		margin-right:auto;
		margin-left:auto;
		box-sizing:border-box;
		padding:3%;
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	#advice .card .pdf:before{
		width:5.8503em;
		height:5.8503em;
	}
	#advice .card .pdf p{
		width:calc(100% - 6.5306em);
	}
	.advice_btn{
/*		display:flex;*/
		justify-content:space-between;
		width:90%;
		margin-top:4.375em;
		margin-right:auto;
		margin-left:auto;
	}
	.advice_btn >div{
		width:34em;
		margin-right:auto;
		margin-left:auto;
	}
	.advice_btn >div:not(:last-of-type){
		margin-bottom:4.375em;
	}
	#faq .textbox{
		padding-right:5%;
		padding-left:5%;
	}
	.share:before{
		width:6.6875em;
		height:5.6250em;
	}
	.share{
		padding:3%;
	}
	.share dt{
		padding-left:calc(6.2583em - 3%);
	}	
	.share dd{
		width:calc(70% - (6.2583em - 3%));
	}
	.share dl ul{
		padding:3%;
	}
}
/*Tablet Phone max1080px
--------------------------------------------*/
@media screen and (max-width:1080px){
	#about{
/*		margin-bottom:120px;*/
		background-image:url(../image/s1_bg1_phone.png),url(../images/top/s1_bg2_phone.png);
		background-repeat: no-repeat,no-repeat;
		margin-bottom:10%;
	}
	#about .textbox h3{
		line-height:1.5em;
	}
	.datail_btn{
		margin-top:10%;
	}
	#advice{
		background-image:url(../image/s2_bg1_phone.png),url(../images/top/s2_bg2_phone.png),url(../image/bg5.png);
		background-repeat:no-repeat,no-repeat,repeat;
		background-position:left top 2.1875em,right bottom 2%,center;
	}
	#advice > .wrap{
		margin-top:5%;
		padding-top:10%;
	}
	#advice > .wrap:after{
		content:"";
		display:block;
		width:100%;
		background-image:url(../image/dog3.png),url(../image/cat1.png);
		background-repeat: no-repeat;
		background-size:auto 100%;
	}
	#faq{
		padding-top:10%;
		padding-bottom:15%;
		background-image:url(../image/s3_bg1.png);
		background-size:auto 100%;
	}
	#faq .titles{
		margin-top:5%;
	}
	.share:before{
		background-image:url(../image/share_phone.png);
	}
	.share dl{
		display:flex;
		align-items: center;
	}
	.share dt{
		width:30%;
	}
	.share dl ul{
		box-sizing:border-box;
	}

}
/*Phone min1081px
--------------------------------------------*/
@media screen and (max-width:750px){
	#mainimage .mv{
		background:url(../image/mv_bg_phone.jpg) no-repeat center top /100% auto;
	}
	#mainimage .doctor_btn{
		width:9.8214em;
		height:10.3214em;
		right:0;
		bottom:-3.428571429em;
		left:0;
		margin:auto;
		z-index:10;
	}
	main #about:before,main #advice:before{
		height:1.2500em;
		background-size:auto 100%;
	}
	#about{
		padding-top:5.3571em;
		background-size:100% auto,100% auto;
		background-position:right top,left bottom;
	}
	main #about:before{
		top:-1.2500em;
	}
	#about .textbox{
		width:90%;
		margin-right:auto;
		margin-left:auto;
	}
	#about .textbox:before,#about .textbox:after{
		width:5.4643em;
		height:6.6071em;
	}
	#about .textbox:before{
		left:0.392857143em;
	}
	#about .textbox:after{
		top:5.3571em;
		right:0.428571429em;
	}
	#about .textbox h3{
		text-align:center;
		font-size:1.142857143em;
		width:12.8125em;
		margin-right:auto;
		margin-left:auto;
		margin-bottom:5%;
		padding-top:1.428571429em;
		font-feature-settings: "palt";
		letter-spacing: 0.05em;
	}
	.datail_btn{
		width:19.42857143em/*544px*/;
	}
	.datail_btn a{
		padding-top:7%;
		padding-bottom:7%;
		border-radius:1.8571em;
	}
	.datail_btn a:after{
		width:0.6429em;
		height:1.1429em;
		right:1.4286em;
	}
	#advice{
		padding-top:1.2500em;
		padding-bottom:0.3571em;
		background-size:100% auto,100% auto,auto;
	}

	#advice .titles{
		margin-bottom:1.923076923em;
	}
	#advice:after{
		height:1.7857em;
		bottom:-1.1786em;
	}
	#advice >.wrap{
		background-size:100% auto,100% auto;
	}
	#advice .titles:after{
		top:0;
		left:7.3427em;
	}
	#advice .card{
		background:url(../image/card_phone.png) no-repeat center top /100% auto;
		width:24.7500em;
		height:35.8214em;
		padding-right:5.1786em;
		padding-left:5.1786em;
		margin-right:auto;
		margin-left:auto;
		padding-top:10.7143em;
		box-sizing:border-box;
	}
	#advice .card h3{
		padding-bottom:3%;
		margin-bottom:3%;
		letter-spacing:-0.1em;
		font-feature-settings: "palt";
	}
	#advice .card >p{
		line-height:1.5em;
	}
	#advice .card .pdf{
		margin-right:5.3571em;
		position:relative;
		padding:2.5em 5% 5%;
		margin-top:7%;
	}
	#advice .card .pdf:before{
		width:4.1429em;
		height:4.1429em;
		position:absolute;
		top:-0.821428571em;
		right:0.25em;
	}
	#advice .card .pdf p{
		line-height:1.333;
		font-feature-settings: "palt";
		font-size:0.857142857em;
	}
	#advice > .wrap:after{
		height:19em;
		background-position:right bottom,left bottom;
		margin-top:1em;
	}
	.advice_btn{
		margin-top:10%;
	}
	#advice .advice_btn >.btn{
		width:18em/*504px*/;
		margin-right:auto;
		margin-left:auto;
	}
	#faq{
		overflow:hidden;
	}
	#faq .titles{
		margin-bottom:10%;
	}
	#faq .textbox{
		padding-right:5%;
		padding-left:5%;
	}
	.share{
		padding:1.5% 5%;
	}
	.share dl{
		justify-content:space-between;
	}
	.share dt{
		box-sizing:border-box;
		padding-left:calc(2.857142857em - 5%);
	}
	.share:before{
		width:3.8214em;
		height:3.2143em;
	}
	.share dd{
/*		width:58%;*/
		box-sizing:border-box;
	}
	.share dd ul{
		width:14em;
		margin-left:1.785714286em;
		padding:2%;
	}
	.share dd li{
		width:1.785714286em;
	}
}