﻿
@import url('noto-serif1.css');
:root{
	--sub-font:"游明朝体", "Yu Mincho", YuMincho,"Noto Serif Japanese","ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
html{
	font-size:0.625em;	
}
body{
	font-size:1.6em;
	background:#a8833c;
	font-family:Noto Sans Japanese,'游ゴシック', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#global_navi{
	font-family:"游明朝体", "Yu Mincho", YuMincho,"Noto Serif Japanese","ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight:bold;
	line-height:1;
}
a{
	color:#000000;
}
.wrap{
	margin-right:auto;
	margin-left:auto;
}
header{
	position:relative;
}

header >.wrap{
	position:relative;
}
header >.wrap:after{
	content:"";
	display:block;
	width:0;
	height:0;
	overflow:hidden;
	clear:both;
}
header:after,footer:before{
	content:"";
	display:block;
	width:100%;
	position:absolute;
	right:0;
	left:0;
	background:url(../image/line.png);
	overflow:hidden;
}
header .logo{
	z-index: 10;
}
#global_navi a{
	display:block;
	position:relative;
}
#global_navi .mainnavi a:before{
	content:"";
	display: block;
	width:1em;
	height:1em;
	background:url(../image/arrow3.png) no-repeat center /100% auto;
	position:absolute;
	right:0;
	left:0;
	margin:auto;
}
#global_navi .sns{
	display:flex;
	flex-wrap:wrap;
}
#pagetop{
	position:fixed;
	z-index:150;
	transition: all 0.3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
#global_navi .sns li{
	width:25%;
}
main{
	display:block;
}
main:after{
	content:"";
	display:block;
	width:0;
	height:0;
	overflow:hidden;
	clear:both;
}
footer,footer >div{
	position:relative;
}
footer .wrap{
	overflow:hidden;
	clear:both;
}
footer .logo{
	text-align:center;
	float:left;
	overflow:hidden;
}
footer .footer_navi{
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
}
footer .footer_navi li:first-child{
	border-left:1px solid #8c6926;
}
footer .footer_navi li{
	font-family:"游明朝体", "Yu Mincho", YuMincho,"Noto Serif Japanese","ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight:bold;
	border-right:1px solid #8c6926;
	line-height:1;
}
footer .footer_navi a{
	display:block;
}
.copyright{
	background:#331209;
	text-align:center;
	color:#ffffff;
	overflow: hidden;
	clear:both;
}
/*PC
------------------------------------------*/
@media screen and (min-width:1081px),print{
	body{
		min-width:1080px;
	}
	.wrap{
		width:1000px;
	}
	header{
		margin-bottom:6px;
	}
	header:after{
		height:6px;
		bottom:-6px;
	}
	header .logo{
		width:77px;
		top:10px;
		left:20px;
	}
	header .doggylogo{
		width:120px;
		margin-top:10px;
		margin-right:30px;
	}
	#global_navi{
		margin-left:166px;
	}
	#global_navi .mainnavi{
		width:443px;
	}
	#global_navi .mainnavi a{
		font-size:1.125em;
		padding-top:40px;
		padding-bottom:45px;
	}
	#global_navi .mainnavi a:before{
		bottom:18px;
		font-size:0.5555555556em;
	}
	#global_navi .sns{
		width:163px;
		right:24px;
		bottom:10px;
	}
	#global_navi .sns li a{
		width:30px;
	}
	#pagetop.active{
		right:0;
		bottom:10px;
	}
	#pagetop.active.active-last{
		bottom:125px;
	}
	#pagetop{
		width:95px;
		right:0;
		bottom:-120px;
	}
	footer{
		margin-top:6px;
	}
	footer .wrap{
		padding-top:10px;
		padding-bottom:10px;
	}
	footer:before{
		top:-6px;
		height:6px;
	}
	footer .logo{
		width:80px;
		margin-left:30px;
		margin-right:70px;
	}
	footer .doggylogo{
		width:140px;
		height:40px;
	}
	footer .footer_navi{
		margin-top:40px;
	}
	footer .footer_navi a{
		padding:12px 20px;
	}
	.copyright{
		padding:10px 10px 15px;
	}
}
/*PC and Tablet
------------------------------------------*/
@media screen and (min-width:751px),print{
	header .logo{
		position:absolute;
	}
	header .doggylogo{
		float:right;
	}
	header a img,#pagetop a{
		transition:opacity 0.3s;
	}
	header a img:hover,#pagetop a:hover{
		opacity:0.5;
	}
	#global_navi .mainnavi{
		display:flex;
		border-right:1px solid #8c6926;
	}
	#global_navi .mainnavi li{
		width:50%;
		box-sizing:border-box;
		border-left:1px solid #8c6926;
	}
	#global_navi .mainnavi a{
		text-align:center;
		transition:color 0.3s,background-color 0.3s;
	}
	#global_navi .mainnavi a:hover{
		color:#e8cc57;
		background-color:#a0782e;
	}
	#global_navi .sns{
		position:absolute;
	}
	#global_navi .sns li a{
		margin-right:auto;
		margin-left:auto;
	}
	footer .doggylogo{
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		margin:auto;
	}
	.footer_navi a{
		transition:color 0.3s;
	}
	.footer_navi a:hover{
		color:#e8cc57;
	}

}
/*Tablet
------------------------------------------*/
@media screen and (min-width:751px) and (max-width:1080px){
	body{
		font-size:calc((1rem + ((1vw - 7.51px) * 1.331557923)) * 0.6954);
		/*max 14.380px-min 10px*/
	}
	.wrap{
		width:90%;
	}
	header{
		margin-bottom:0.6em;
	}
	header:after{
		height:0.6em;
		bottom:-0.6em;
	}
	header .logo{
		width:11em;
		margin-top:0.7em;
	}
	header .doggylogo{
		width:17.256em;
		margin-left:2.9em;
		margin-top:0.7em;
	}
	header #global_navi{
		margin-left:17.5em;
	}
	header .mainnavi a{
		font-size:1.8em;
		padding-bottom:3em;
		padding-top:2.5em;
	}
	header .mainnavi a:before{
		bottom:2em;
		font-size:0.643em;
	}
	#global_navi .sns{
		width:12em;
		right:0;
		bottom:1em;
		align-items: flex-start;
	}
	#global_navi .sns a{
		width:90%;
		margin:auto;
	}
	#pagetop{
		width:9.5em;
		right:1%;
		bottom:-10.5em;
	}
	#pagetop.active{
		bottom:2%;
	}
	footer{
		margin-top:0.6em;
	}
	footer .wrap{
		padding:1em 0;
	}
	footer:before{
		height:0.6em;
		top:-0.6em;
	}
	footer .logo{
		width:8em;
		margin-left:3em;
		margin-right:7em;
	}
	footer .doggylogo{
		width:13.5em;
		height:30.8510%;
	}
	footer .footer_navi {
		font-size:1.6em;
		margin-top:2.0861em;
	}
	footer .footer_navi a{
		padding:0.6953em 1.39074em;
	}
	.copyright{
		padding:1.5em;
	}
}
/*Tablet and Phone
------------------------------------------*/
@media screen and (max-width:1080px){

}
/*Phone
------------------------------------------*/
@media screen and (max-width:750px){
	body{
		font-size:calc((1rem + ((1vw - 3.2px) * 3.125)) * 0.4267);
		/*max 23.43px-min 10px*/
	}
	.wrap{
		margin-right:2em;
		margin-left:2em;
	}
	header{
		padding:1em 0;
		margin-bottom:0.6em;
	}
	header:after{
		height:0.6em;
		bottom:-0.6em;
	}
	header .logo{
		width:10em;
		right:0;
		left:0;
		margin:auto;
		text-align:center;
		position:absolute;
	}
	header .doggylogo{
		width:18em;
		margin-top:1em;
		float:right;
	}
	.gnavi_btn{
		width:8.8em;
		height:8.8em;
		background:#7a501f;
		position:relative;
		overflow:hidden;
	}
	.gnavi_btn >span{
		width:7em;
		height:1px;
		background:#ffffff;
		margin:auto;
		position:absolute;
		right:0;
		left:0;
		transition:all 0.3s;
	}
	.gnavi_btn >span:first-child{
		top:2.343em;
	}
	.gnavi_btn >span:nth-child(2){
		top:0;
		bottom:0;
	}
	.gnavi_btn >span:last-child{
		bottom:2.343em;
	}
	.gnavi_btn.open >span{
		top:0;
		bottom:0;
	}
	.gnavi_btn.open >span:first-child{
		transform:rotate(-45deg);
	}
	.gnavi_btn.open >span:last-child{
		transform:rotate(45deg);
	}
	.gnavi_btn.open >span:nth-child(2){
		top:-120%;
	}
	#global_navi{
		background:#7a501f;
		padding:1em;
		position:absolute;
		box-sizing:border-box;
		width:100%;
		margin:auto;
		z-index:100;
		display:none;
	}
	#global_navi .mainnavi{
		display:flex;
		margin-bottom:1em;
		justify-content: space-between;
	}
	#global_navi .mainnavi li{
		background:#a8833c;
		width:calc(50% - 0.5em);
	}
	#global_navi .mainnavi li a{
		text-align:center;
		padding-top:1.75em;
		padding-bottom:2.5em;
		font-size:2.8em;
	}
	#global_navi .mainnavi li a:before{
		font-size:calc((1rem + ((1vw - 3.2px) * 3.125)) * 0.4267);
		width:1.6em;
		height:1.6em;
		bottom:3em;
	}
	#global_navi .sns{
		text-align:center;
		width:32em;
		margin:auto;
	}
	#global_navi .sns a{
		width:80%;
		margin:auto;
	}
	#pagetop{
		width:11.4em;
		right:1.5em;
		bottom:-13em;
	}
	#pagetop.active{
		bottom:2em;/*20px*/
		right:1.5em;
	}
	#pagetop.active.active-last{
		bottom:6em;
	}
	footer{
/*		padding:0.854em 1.279em;*/
		padding-top:2em;
		margin-top:0.6em;
	}
	footer:before{
		height:0.6m;
		top:-0.6em;
	}
	footer .logo{
		width:12em;
		margin-left:3em;
		margin-right:4.6em;
	}
	footer .footer_navi{
		margin-right:3em;
		overflow:hidden;
	}
	footer .footer_navi li{
		margin-bottom:2em;
	}
	footer .footer_navi a{
		font-size:2.9em;
		padding:0.7em 0.6em;
	}
	footer .footer_navi li:last-child{
		border-left:1px solid #8c6926;
	}
	footer .doggylogo{
		width:20em;
		margin:4em auto 3.9em;
	}
	footer .copyright{
		font-size:2.2em;
		line-height:1;
		padding:0.4546em;
	}
	
}