@import url("noto-sans.css");
@import url("icon.css");
@import url("CourierPrime.css");
html{
	font-size:0.628em;
	font-family:Noto Sans Japanese,'游ゴシック', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.cour{
	font-family:'CourierPrime', sans-serif;
}
body{
	color:#444444;
}
header,main,footer{
	box-sizing: border-box;
	display:block;
}
/*Header
------------------------------------*/
header >.wrap{
	position: fixed;
	background:#ffffff;
	width:100%;
	top:0;
	right:0;
	left:0;
	z-index: 999;
	box-sizing: border-box;
}	
header >.wrap{
	display:flex;
	justify-content: space-between;
	line-height:0;
	align-items: center;
}
.outcontents{
	display:flex;
	align-items: center;
}
.online_btn a{
	display: block;
	color:#ffffff;
	background-color:#e60012;
/*	font-weight: 500;*/
	text-align: center;
	letter-spacing: 0.08em;
	line-height: 1;
	transition: background-color 0.3s;
}
.online_btn a:hover{
	background:#d6000e;
}
header .sns{
	display:flex;
	justify-content: space-between;
}
/*Global navi
--------------------------------*/
#global_navi{
	background:url(../image/header_bg.png);
}
#global_navi >.wrap{
	display:flex;
	justify-content: space-between;
	align-items: center;
}
#global_navi .gnavi_main{
	display:flex;
	font-feature-settings: "palt";
}
#global_navi .gnavi_main >li{
	position:relative;
}
#global_navi li a{
	color:#ffffff;
	transition:color 0.2s;
	display:block;
	position:relative;
	font-weight:500;
	font-feature-settings: "palt" 1;
}
#global_navi .active >a,#global_navi li:hover >a{
	color:#fdfe93;
}
#global_navi .gnavi_main >li >a:before{
	content: "";
	display:block;
	background-repeat: no-repeat;
	background-size:100% auto;
	background-position:center top;
	margin-right:auto;
	margin-left:auto;
}
#global_navi .gnavi_main >li.navi1 >a:before{
	background-image:url(../image/navi1.png);
}
#global_navi .gnavi_main >.navi2 >a:before{
	background-image:url(../image/navi2.png);
}
#global_navi .gnavi_main >.navi3 >a:before{
	background-image:url(../image/navi3.png);
}
#global_navi .gnavi_main >.navi4 >a:before{
	background-image:url(../image/navi4.png);
}

#global_navi .gnavi_main >.navi3 >a:after{
	content:"";
	display:block;
	background:url(../image/navi_arrow.png) no-repeat center /100% auto;
	right:0;
	left:0;
	margin:auto;
}
#global_navi li:hover >a:before,#global_navi li.active a:before{
	background-position: center bottom;
}
#global_navi .sub{
	display:none;
	background:url(../image/header_bg.png);
	width:100%;
	box-sizing: border-box;
	position:absolute;
	right:0;
	left:0;
	z-index: 99;
}
#global_navi .sub li{
	border-top:1px solid #ffffff;
	text-align:center;
}
/*Main
------------------------------------*/
main{
	position:relative;
}
main:before{
	content:"";
	display: block;
	width:100%;
	background-image:url(../image/frame.png);
	background-repeat: repeat-x;
	background-position:left top;
}
.titles{
	font-family:'CourierPrime', sans-serif;
	letter-spacing: -0.07em;
	text-align:center;
	position:relative;
	font-feature-settings: "palt";
}
.titles span{
	font-family:Noto Sans Japanese,'游ゴシック', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	display:block;
	color:#26c9e1;
	font-weight:700;
	letter-spacing: 0.05em;
}
.titles i{
	color:#26c9e1;
}
#about .titles span:first-of-type{
	letter-spacing:-0.01em;
}
.titles:before{
	content:"";
	display:block;
	margin:auto;
}
#about .titles >span:first-of-type{
	font-family:'CourierPrime', sans-serif;
	color:#444444;
	font-size:0.7em;
/*	margin-bottom:0.3em;*/
	margin-top:0;
	font-weight:500;
}
#about .titles:before{
	background:url(../image/about.png) no-repeat center / 100% auto;
}
#about .titles:after{
	content:"";
	display:block;
	background:url(../image/doggy.png) no-repeat center /100% auto;
	position:absolute;
}
#advice .titles:before{
	background:url(../image/shindan.png) no-repeat center / 100% auto;
}
aside{
	background:#ffffff;
}
aside .bnr{
	line-height:0;
	text-align:center;
}
.advice_btn{
	margin-bottom:3px;
	line-height:1;
}
.advice_btn >div a{
	display:block;
	background:#ffffda;
	color:#444444;
	text-align:center;
	font-feature-settings: "palt";
	box-sizing:border-box;
	border:1px solid #11b6ce;
	box-shadow:0 3px 0px #11b6ce;
	position:relative;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
	transition: color 0.2s,background-color 0.2s,transform 0.2s,box-shadow 0.2s;
	font-weight:600;
}
.advice_btn >div a:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% auto;
	position: absolute;
	bottom:0;
}
.advice_btn >.btn_dog a:before{
	background-image:url(../image/btn_dog.png);
}
.advice_btn >.btn_cat a:before{
	background-image:url(../image/btn_cat.png);
}
.advice_btn >div a span{
	display:block;
	color:#26c9e1;
	font-weight:bold;
	font-size:2.500em;
	margin-top:4px;
}
.advice_btn >div a:after{
	content:"";
	display:block;
	background:url(../image/arrow_next.png) no-repeat center;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
}
.doctor{
	border:3px solid #26c9e1;
	border-radius:10px;
	line-height:1.5em;
	position:relative;
	margin-right:auto;
	margin-left:auto;
}
.doctor .profile_tle{
	background:#26c9e1;
	color:#ffffff;
	font-weight:500;
	font-feature-settings: "palt" 1;
	box-sizing:border-box;
}
.doctor .name span{
	font-size:1.2em;
	font-weight:500;
}
.doctor:after{
	content:"";
	display:block;
	background:url(../image/doctor.png) no-repeat center /100% auto;
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}

/*footer
------------------------------------*/
#pagetop{
	background:#26c9e1;
	position:fixed;
	right:0;
	bottom:0;
	z-index:100;
	display:none;
	transition:bottom 0.3s,background-color 0.3s;
}

#pagetop a{
	color:#ffffff;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}
#pagetop a i{
	width:1em;
	height:1em;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}
footer{
	border-top:1px solid #d8d8d8;
}
footer .logo{
	line-height:0;
}
footer p{
	font-feature-settings: "palt" 1;
	letter-spacing: 0.1em;
	color:#9b9b9b;
}

/*PC min1081px
--------------------------------------------*/
@media screen and (min-width:1081px),print{
	body{
		font-size:1.6em;
	}
/*Header
------------------------------------*/	
	header >.wrap{
		padding:20px 45px;
	}
	header .doggy_logo{
		width:136px;
	}
	header .sns{
		width:240px;
	}
	header .sns li{
		width:31px;
	}
	.online_btn{
		width: 160px;
		margin-left:20px;
	}
	.online_btn a{
		padding-top:5px;
		padding-bottom:5px;
		font-size:0.844em;
	}
	
	/*Global navi
	--------------------------------*/
	#global_navi{
		background:url(../image/header_bg.png);
	}
	#global_navi >.wrap{
		display:flex;
		justify-content: space-between;
		align-items: center;
		padding:15px 50px 45px;
	}
	#global_navi #page_logo{
		width:205px;
	}
	#global_navi .gnavi{
		width:632px;
	}
	#global_navi .gnavi_main{
		justify-content: space-between;
		align-items: center;
	}
	#global_navi li a{
		font-size:0.969em;
	}
	#global_navi .gnavi_main >li >a:before{
		width:40px;
		height:40px;
	}
	#global_navi .gnavi_main >.navi3 >a:after{
		width:11px;
		height:7px;
		bottom:-20px;
		position: absolute;
		right:0;
		left:0;
		margin:auto;
	}
	#global_navi .sub{
		top:85px;
		padding:0 10px;
	}
	#global_navi .sub li a{
		padding:10px 0;
		font-size:0.774em;
	}	
/*Main
------------------------------------*/
	main:not(#advice){
		margin-top:-35px;
	}
	main:not(#advice):before{
		height:35px;
	}
	main >article:first-of-type{
		padding-top:70px;
	}
	.titles{
		font-size:3.25em;
	}
	.titles span{
		margin-bottom:10px;
	}
	.titles:before{
		width:93px;
		height:94px;
		margin-bottom:20px;
	}
	#about .titles:after{
		width:165px;
		height:198px;
		position:absolute;
		bottom:0;
		right:0;
		left:-330px;
		margin:auto;
	}
	aside{
		padding-top:40px;
		padding-bottom:40px;
	}
	.advice_btn >div a{
		width:420px;
		border-radius: 55px;
		padding-top:24px;
		padding-bottom:24px;
		padding-left:55px;
	}
	.advice_btn >div a{
		margin-top:5px;
	}
	.advice_btn >div a:before{
		width:92px;
		height:136px;
		left:30px;
	}
	.advice_btn >div a:after{
		width:20px;
		height:21px;
		right:30px;
	}
	.doctor{
		width:1000px;
		padding-top:17px;
		padding-right:17px;
		padding-bottom:25px;
		margin-top:95px;
		margin-bottom:95px;
	}
	.doctor:after{
		width:169px;
		height:198px;
		right:28px;
	}
	.doctor h3{
		font-size:1.176em;
		padding-top:10px;
		padding-bottom:10px;
		padding-left:28px;
		width:247px;
		margin-bottom:25px;
	}
	.doctor .profile_box{
		padding-left:28px;
	}
	.doctor dt,.doctor dd{
		margin-bottom:10px;
	}
	.doctor dt{
		width:120px;
	}
	.doctor dd{
		width:calc(100% - 120px);
	}
	.doctor .name{
		margin-bottom:10px;
	}
	.doctor .profile_box{
		margin-right:170px;
		font-size:1.063em;
	}

/*footer
------------------------------------*/
	#pagetop{
		width:60px;
		height:60px;
		border-radius:15px 0 0 15px;
 		bottom:0;
	}
	#pagetop.active{
		bottom:90px;
	}
	#pagetop a{
		font-size:1.563em;
	}
	footer >.wrap{
		padding:40px 50px;
	}
	footer .logo{
		width:136px;
	}
}
/*PC Tablet min751px
--------------------------------------------*/
@media screen and (min-width:751px),print{
/*Main
------------------------------------*/
	header .logo,header .sns a,#page_logo{
		transition: opacity 0.3s;
	}
	header .logo:hover,header .sns a:hover,#page_logo:hover{
		opacity:0.7;
	}
	.titles{
		font-size:3.250em;
	}
	.titles span{
		font-size:0.462em;
	}
	.advice_btn >div a:hover{
		background-color:#11b6ce;
		transform:translateY(3px);
		box-shadow:0 0 0;
	}
	.advice_btn >div a:hover,.advice_btn >div a:hover span{
		color:#ffffda;
	}
	aside > .bnr{
		width:22.5em;
		margin-right:auto;
		margin-left:auto;
	}
	#pagetop:hover{
		background:#35b8cb;
	}
/*footer
------------------------------------*/
	footer >.wrap{
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	footer p{
		font-size:0.688em;
	}
	aside .bnr,.share a{
		transition:opacity 0.3s;
	}
	aside .bnr:hover,.share a:hover{
		opacity:0.7;
	}
}

/*Tablet min751px max1080px
--------------------------------------------*/
@media screen and (min-width:751px) and (max-width:1080px){
	body{
		font-size:calc((1rem + ((1vw - 7.51px) * 1.331557923))*1.1126);
	}
/*Header
------------------------------------*/	
	.doggy_logo{
		width:15em;
	}
	header .sns{
		width:35.375em;
		padding-right:5em;
	}
	header .sns li{
		margin:0 1em;
		width:3.750em;
	}
	.online_btn{
		width:4.5em;
	}
	.online_btn i{
		font-size:2.0861em;
	}
	#page_logo{
		width:12.813em;
	}
	/*Header
	------------------------------------*/
	#global_navi{
		padding-bottom:1.563em;
	}
	#global_navi .gnavi{
		z-index: 9999;
		border-radius:0.875em;
		top:17.5em;
	}
	#global_navi .gnavi_main > li > a:before{
		width:5em;/*80px*/
		height:5em;
	}
	#global_navi .gnavi_main > li.navi3 > a:after{
		width:1.1875em;
		height:0.6875em;
		margin-top:0.5em;
	}
	.gnavi_btn{
		border-radius:0.750em;
		width:5.500em;
		height:5.500em;
	}
	.gnavi_btn >span{
		width:4.375em;
	}
	.gnavi_btn >span:first-child{
		top:1.438em;
	}
	.gnavi_btn >span:last-child{
		bottom:1.438em;
	}
	/*Main
	------------------------------------*/
	main:not(#advice){
		margin-top:-1.094em;
	}
	main:not(#advice):before{
		height:1.094em;
		background-size:auto 1.094em;
	}
	.titles{
		margin-bottom:7%;
	}
	.titles:before{
		width:1.7885em;
		height:1.8077em;
		margin-bottom:0.2em;
	}
	#about .titles span:first-of-type{
		letter-spacing: 0.05em;
	}
	#about .titles:after{
		width:2.8846em;
		height:3.4615em;
		top:0;
		right:5.9441em;
		bottom:0;
		left:0;
		margin:auto;
	}
	.advice_btn >div a{
		border-radius:3.438em;
		padding-top:1.563em;
		padding-bottom:1.563em;
		padding-left:1.563em;
	}
	.advice_btn >div a:before{
		width:6.875em;
		height:10.250em;
		left:1.750em;
	}
	.advice_btn >div a:after{
		width:1.250em;
		height:1.313em;
		right:1.250em;
	}
	.doctor{
		margin-top:5%;
		padding-top:2%;
		padding-bottom:2%;
		width:90%;
		margin-right:auto;
		margin-left:auto;
	}
	.doctor .profile_tle{
		width:10em;
		font-size:1.176em;
		padding-top:1%;
		padding-bottom:1%; 
		padding-left:3%;
	}

	.doctor dl{
		display:flex;
		flex-wrap:wrap;
	}
	.doctor dt,.doctor dd{
		margin-bottom:1%;
	}
	.doctor dt{
		width:11em;
	}
	.doctor dd{
		width:calc(100% - 11em);
	}
	.doctor .profile_box{
		margin-right:12.5000em;
		box-sizing: border-box;
		padding:2%;
	}

	.doctor:after{
		width:10.5625em;
		height:12.3750em;
		right:1.7500em;
	}

/*footer
------------------------------------*/
	#pagetop{
		width:3.750em;
		height:3.750em;
		border-radius:0.938em 0 0 0.938em;
	}
	#pagetop a{
		font-size:1.563em;
	}

}
/*Tablet Phone max1080px
--------------------------------------------*/
@media screen and (max-width:1080px){
	/*Header
	------------------------------------*/	
	header >.wrap{
		padding:2% 5%;
		padding-right:0;
	}
	.online_btn{
		right:0;
	}
	.online_btn,.online_btn a{
		position: absolute;
		top:0;
		bottom:0;
	}
	.online_btn a{
		padding:0.3em 0;
		width:100%;
		box-sizing: border-box;
	}
	.online_btn i{
		width:1em;
		height:1em;
		position: absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		margin:auto;
	}
	#global_navi{
		padding-top:1em;
	}
	#global_navi >.wrap{
		padding-right:5%;
		padding-left:5%;
		flex-wrap:wrap;
	}
	#global_navi .gnavi{
/*		display:none;*/
		position:absolute;
		width:90%;
		background:#69ecff;
		padding:2% 2% 1%;
		box-sizing:border-box;
		display:none;
		right:0;
		left:0;
		margin-right:auto;
		margin-left:auto;
	}
	#global_navi .gnavi{
		z-index: 99;
	}
	#global_navi .gnavi_main{
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	#global_navi .gnavi_main >li{
		width:49%;
		background:url(../image/header_bg.png);
		margin-bottom:2%;
	}
	#global_navi .gnavi_main >li:nth-child(2n){
		margin-left:2%;	
	}
	#global_navi .gnavi_main >li a{
		padding:3%;
		text-align:center;
	}
	#global_navi .sub{
		padding:3%;
	}
	.gnavi_btn{
		background:#69ecff;
		position:relative;
		overflow:hidden;
	}
	.gnavi_btn >span{
		display:block;
		height:1px;
		background:#00c4ee;
		margin:auto;
		position:absolute;
		right:0;
		left:0;
		transition:transform 0.3s;
	}
	.gnavi_btn >span:nth-child(2){
		top:0;
		bottom:0;
	}
	.gnavi_btn.active >span{
		top:0;
		bottom:0;
	}
	.gnavi_btn.active >span:first-child{
		transform: rotate(45deg);
	}
	.gnavi_btn.active >span:nth-child(2){
		top:105%;
		bottom:auto;
	}
	.gnavi_btn.active >span:last-child{
		transform: rotate(-45deg);
	}
	/*Main
	------------------------------------*/
	aside{
		padding:5%;
	}
	.advice_btn >div a:after{
		background-size:100% auto;
	}
/*footer
------------------------------------*/
	footer >.wrap{
		padding:3% 5%;
	}
}
/*Phone min1081px
--------------------------------------------*/
@media screen and (max-width:750px){
	body{
		font-size:calc((1rem + ((1vw - 3.2px) * 3.125))*1.1947);
	}
/*Header
------------------------------------*/
	header .doggy_logo{
		width:6.679em;
	}
	header .sns{
		width:11.143em;
		padding-right:3.5em;
	}
	header .sns li{
		width:1.429em;
	}
	.online_btn{
		width:3em;
	}
	/*Header
	------------------------------------*/
	#global_navi{
		padding-bottom:0.893em;
	}
	#page_logo{
		width:calc(100% - 3.143em);
	}
	#page_logo a{
		display:block;
		width:8.571em;
	}
	#global_navi .gnavi{
		border-radius:0.5em;
		top:9.5em;
	}
	#global_navi .gnavi_main > li{
		font-size:0.928751em;
	}
	#global_navi .gnavi_main > li > a:before{
		width:3.076923em;/*80px*/
		height:3.076923em;
	}
	#global_navi .gnavi_main > li.navi3 > a:after{
		width:0.678571em/*19px*/;
		height:0.392857em;/*11px*/
		margin-top:0.5em;
	}
	.gnavi_btn{
		width:3.143em;
		height:3.143em;
		border-radius:0.429em;
	}
	.gnavi_btn >span{
		width:2.500em;
	}
	.gnavi_btn >span:first-child{
		top:0.821em;
	}
	.gnavi_btn.active >span:first-child{
		top:0;
	}
	.gnavi_btn >span:last-child{
		bottom:0.821em;
	}
	.gnavi_btn.active >span:last-child{
		bottom:0;
	}
/*Main
------------------------------------*/
	main:not(#advice){
		margin-top:-0.625em;
	}
	main:not(#advice):before{
		height:0.625em;
		background-size:auto 0.625em;
	}
	.titles{
		font-size:2.0429em;
		margin-bottom:10%;
	}
	.titles span:last-of-type{
		font-size:0.4615em;
		margin-top:0.5em;
	}
	.titles:before{
		width:1.7832em;
		height:1.7832em;
		margin-bottom:0.2em;
	}
	.titles:after{
		width:2.8846em;
		height:3.4615em;
	}
	#about .titles:after{
		top:0;
		bottom:0;
		right:6.9930em;
		left:0;
		margin:auto;
		font-size:0.9em;
	}
	.advice_btn{
		padding-right:5%;
		padding-left:5%;
		margin-bottom:2em;
	}
	.advice_btn >.btn_dog{
		margin-bottom:2em;
	}
	.advice_btn >div a{
		border-radius:2.5385em;
		padding-top:0.9615em;
		padding-bottom:0.9615em;
		padding-left:0.9615em;
		font-size:0.9286em
	}
	.advice_btn >div a span{
		font-size:1.8462em;
	}
	.advice_btn >div a:before{
		width:4.2308em;
		height:6.3077em;
		left:1.3462em;
	}
	.advice_btn >div a:after{
		width:0.7692em;
		height:0.8077em;
		right:0.7692em;
	}
	.doctor{
		padding-top:5%;
		padding-bottom:5%;
		width:90%;
		margin-right:auto;
		margin-left:auto;
		margin-top:7%;
	}
	.doctor:after{
		width:6.0357em;
		height:7.0714em;
		right:1em;
		top:4.8214em;
		bottom:auto;
	}
	.doctor .profile_tle{
		font-size:1.0714em;
		padding-top:1%;
		padding-bottom:1%;
		padding-left:5%;
		width:10em;
	}
	.doctor .profile_box{
		padding:5%;
		margin-right:7.1429em;
	}
	.doctor dd:not(:last-of-type){
		margin-bottom:5%;
	}

/*footer
------------------------------------*/
	#pagetop{
		width:3.143em;
		height:3.143em;
		border-radius:0.536em 0 0 0.536em;
/*		transition:bottom 0.3s;*/
	}
	#pagetop a{
		font-size:1.250em;
	}
	#pagetop.active{
		bottom:3.928571429em;
	}
	aside .bnr{
		width:17.14285714em;/*480px*/
		margin-right:auto;
		margin-left:auto;
	}
	footer .doggy_logo{
		width:7.786em;
		margin-right:auto;
		margin-left:auto;
		margin-bottom:1em;
	}
	footer p{
		font-size:0.714em;
		text-align:center;
	}

}