/*--------------------------------------------------------------
RESET
--------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0;}
table{border-collapse:collapse; border-spacing:0;}
fieldset, img, hr{border:0;}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}
ol, ul{list-style:none;}
caption, th{text-align:left;}
h1, h2, h3, h4, h5, h6, button{font-size:100%; font-weight:normal;}
q:before, q:after{content:”;}
abbr, acronym{border:0;}
*{margin:0;padding:0;border:0;list-style-type:none;zoom:1;-webkit-text-size-adjust: none;}
*{font-style: normal;text-decoration:none;color: inherit;background-color: inherit;}


/*--------------------------------------------------------------
COMMON
--------------------------------------------------------------*/
:root{
	--base-width: 170px;
	--base-height: 25px;
	--base-font-size: 14px;
	--base-line-height: var(--base-height);
	--column-margin: 50px;
	--column2-width: calc((var(--base-width)*2) + (var(--column-margin)*1));
	--column3-width: calc((var(--base-width)*3) + (var(--column-margin)*2));
	--column4-width: calc((var(--base-width)*4) + (var(--column-margin)*3));
	--column5-width: calc((var(--base-width)*5) + (var(--column-margin)*4));
	--line-height-offset: calc((1rem - var(--base-height)) / 2);
}

@media screen and (max-width: 768px) {
	:root{
		--base-width: 22.666vw;
		--base-height: 3.289vw;
		--column-margin: 6.578vw;
		--base-font-size: 2.88vw;
		--base-line-height: 4.60vw;
	}
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html, body{
	color: #333;
	font-family: acumin-pro, dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--base-font-size);
	line-height: var(--base-line-height);
	letter-spacing: 0.025em;
	word-break: break-word;
	font-feature-settings: "palt" 1;
	width:100%;
}

html.no-scroll, body.no-scroll {
	overflow: hidden;
}

#wrapper{
	padding: calc(var(--base-height)*3);
	width: 1200px;
	margin: 0 auto;
/*
	background-image: url("img/grid.png");
	background-repeat: repeat-y;
	background-position: top calc(var(--base-height)*3) left calc(var(--base-height)*3);
*/

}

.content{
	margin-bottom: calc(var(--base-height)*3);
}

.content--information{
	margin-top: calc(var(--base-height)*9);
}


@media screen and (max-width: 768px) {
	#wrapper{

/*
		background-image: url("img/grid-mobile.png");
		background-position-y: calc(var(--base-height)*3);
		background-size: calc(100vw - (var(--base-height)*6));
*/

		width: 100%;
	}
	
	.content--information{
		font-size: calc(var(--base-font-size)*1.142);
		line-height: 6.57vw;
	}
	
}


/*--------------------------------------------------------------
HEADER
--------------------------------------------------------------*/
.header{
	margin-bottom: calc(var(--base-height)*2 - var(--line-height-offset));
}


.header-information{
	margin-top: calc(var(--base-height)*2 - var(--line-height-offset));
	position: relative;
}

.header-information:before{
	position: absolute;
	content: "→";
	left: -1.5rem;
	
}


.header-top{
	margin-top: calc(var(--base-height)*2 - var(--line-height-offset));
	position: relative;
}

.header-top:before{
	position: absolute;
	content: "←";
	left: -1.5rem;
	
}


.header-kroterrier{
	margin-top: calc(var(--base-height)*1 - var(--line-height-offset));
	position: relative;
}

.header-kroterrier:before{
	position: absolute;
	content: "→";
	left: -1.5rem;
	
}

.header > nav{
	display: flex;
	justify-content: space-between;
}


ul.header-cat{
	margin-top: calc(var(--base-height)*2 + calc(var(--line-height-offset)));
	width: var(--column2-width);
	line-height: 35px;
	letter-spacing: 0.05em;
}

.header-cat li,
.header-cat li a{
	display: flex;
}

.header-cat p{
	font-size: calc(var(--base-font-size)*1.142);
	width: 105px;
}

.header-cat span{
	color: #666;
	font-family: acumin-pro, sans-serif;
	font-weight: 300;
	font-style: normal;
}

ul.header-address{
	margin-top: calc(var(--base-height)*2);
	width: var(--column3-width);
	display: flex;
	justify-content: space-between;
}

ul.header-address li{
	width: var(--base-width);
}


@media screen and (max-width: 768px) {
	.header--kroterrier{
		margin-bottom: 9.1rem;
	}
	
	.header-information,
	.header-top{
		margin-top: calc(var(--base-height)*1);
		margin-top: 1.1rem;
	}
	
	.header-kroterrier{
		 margin-top: calc(var(--base-height)* -2 - var(--line-height-offset));
	}

	.header > nav{
		margin-top: calc(var(--base-height)*5);
		margin-top: 5.2rem;
	}
	
	.header-kroterrier + nav{
		margin-top: 8.6rem;
	}

	
	ul.header-cat{
		line-height: inherit;
		width: var(--base-width);
		margin-top: 0;
	}
	
	.header-cat li, .header-cat li a{
		display: block;
		margin-bottom: 1.4rem;
	}
	
	ul.header-address{
		display: block;
		width: var(--base-width);
		margin-top: 0;
	}
	
	ul.header-address li{
		margin-bottom: .3rem;
	}
	
	ul.header-address :nth-child(3) {
		margin-top: calc(var(--base-height)*1 + var(--line-height-offset));
		margin-top: 2.5rem;
	}
	
}


/*--------------------------------------------------------------
site plan | image
--------------------------------------------------------------*/

ul.tab{
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--base-height);
	align-items: center;
}

ul.tab li{
	display: flex;
	align-items: center;
}

ul.tab li:first-child:after{
	content: "";
	display: block;
	width: 1px;
	height: 12px;
	background-color: #666;
	margin: 0 1.4em;
}

ul.tab button{
	cursor: pointer;
	font-size: 1rem;
}

ul.tab button.is-active{
	color: #999;
	pointer-events: none;
	
}

.container-wrap{
	width: calc(100% + var(--base-height)* 2);
    height: calc(var(--base-height)*30);
    position: relative;
    margin-left: calc(var(--base-height)* -1);
}

.container{
	width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;   
    transition: all .3s;
    position: absolute;
    z-index: 1;
}

.container.is-active{
	opacity: 1;
	visibility: visible;
	z-index: 10
}

.container img{
	width: 100%;
	height: auto;
}

.container .p_cright{
	font-size:11px;
	color:#aaa;
}

#areaMap {
    cursor: grab;
    left: -212px;
    top: -544px;
    position: absolute;
    width: 2000px;
}

img.area-position{	
	position: absolute;
	top: 15px;
	right: 15px;
	width: 20px;
	height: 30px;
	z-index: 20;
	opacity: 0;
}


/*Img slide*/
ul.img-slide li{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s;
	cursor: pointer;
}

ul.img-slide li.on{
	opacity: 1;
	visibility: visible;
}

/*Swiper*/
.swiper img{
	width: 100%;
	height: auto;
}

.swiper-img-vertical{
	padding: 0 9.21vw;
}
.swiper-wrapper{align-items: center;}


@media screen and (max-width: 768px) {
	ul.tab{
		width: calc(100% + var(--base-height)* 2);
		position: relative;
		margin-left: calc(var(--base-height)* -1);
	}
	
	ul.img-slide{
		width: calc(100% + var(--base-height)* 2);
	    margin-left: calc(var(--base-height)* -1);
	}
}


/*--------------------------------------------------------------
Information
--------------------------------------------------------------*/
.information{
	display: flex;
	justify-content: space-between;
	margin-bottom: calc(var(--base-height)*5);
}

.information a{
	text-decoration: underline;
}

.information-header{
	width: var(--base-width);
}

.information-header span{
	display: block;
	font-size: calc(var(--base-font-size)*0.857);
	font-family: dnp-shuei-gothic-gin-std, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.logo-instagram{
	width: 12px;
	height: 12px;
	margin-top: calc(var(--base-height)*1.1);
	display: block;
}

.logo-instagram img{
	width: 100%;
	height: auto;
}


.information-content{
	width: var(--column2-width);
}

.information-content li{
	list-style-type: " ・ ";
    list-style-position: outside;
    margin-left: 1rem;
}

.information-note{
	width: var(--column2-width);
}

.information-note span{
	color: #999;
}

@media screen and (max-width: 768px) {
	.information{
		display: block;
		margin-bottom: calc(var(--base-height)*5);
	}
	
	.information-header{
		width: 100%;
		margin-bottom: calc(var(--base-height)*3);
		font-size: calc(var(--base-font-size)*1.136);
	}
	
	.information-header span{
		display: inline-block;
		margin-left: 1rem;
	}


	.logo-instagram{
		width: 1rem;
		height: 1rem;
		margin-top: calc(1rem/5);
		float: right;
	}	
		
	.information-content{
		width: 100%;
	}
	
		
	.information-note{
		width: 100%;
	}
	
	.information-accordion {
		margin-bottom: 3rem;		
	}
	
	.information-accordion.is-open{
	    opacity: 1;
	    line-height: normal;
	    height: auto;
	}

	.toggle-accordion {
	    cursor: pointer;
	    border-bottom: solid 1px #ddd;
	    text-align: center;
	    width: 100%;
	    color: #a5a5a5;
	    font-size: calc(var(--base-font-size)*0.818);
	    letter-spacing: .2em;
	}

	.toggle-accordion:before{
		content: "more";
    }
	
	.toggle-accordion:after{
		content: "〈";
		display: block;
		transform: rotate(-90deg);
		width: 1rem;
		margin: 0 auto;
    }
    
	
	.toggle-qccordion.is-open {
	    background-color: #e0e0e0;
	}

	.information-accordion.is-open + .toggle-accordion:before{
		content: "close";
    }
	
	.information-accordion.is-open + .toggle-accordion:after{
		content: "〈";
		display: block;
		transform: rotate(90deg);
		width: 1rem;
		margin: 0 auto;
    }
}


/*--------------------------------------------------------------
Kro terrier
--------------------------------------------------------------*/

/* HEADER */
.logo-kroterrier{
	width: 87px;
	position: fixed;
	z-index: 100;
}

.nav-kroterrier{
	width: var(--column2-width);
    position: fixed;
    margin-left: calc(var(--column3-width) + var(--column-margin));
    z-index: 100;
    top: 0;
}

.nav-kroterrier .header-information{
	margin: 0;
	position: absolute;
    top: calc(var(--base-height)*-2 - calc(var(--line-height-offset)));
    font-size: 13px;
}

.nav-kroterrier ul.header-address{
	width: 100%;
	flex-wrap: wrap;
	margin-top: calc(var(--base-height)*8);
}

.nav-kroterrier ul.header-address li:nth-child(3){
	margin-top: calc(var(--base-height)*2);
	margin-left: calc(var(--base-width) + var(--column-margin));
}


.nav-kroterrier ul.header-address li:nth-child(4){
	margin-top: calc(var(--base-height)*5);
	margin-left: calc(var(--base-width) + var(--column-margin));
	font-size: 13px;
}



/* CONTENT */
.view{
	padding-bottom: calc(var(--base-height)* 2);
	background: #fff;
	position: relative;
	z-index: 20;
	transition: all 2s;
	min-height: calc(100vh - var(--base-height)*9);
}

.view.is-hidden {
    transform: translateY(-100vh);
}

.reserve{
	position: absolute;
	margin-top: -100vh;
	min-height: 100vh;
	padding-top: calc(var(--base-height)* 7);
}

.container-kroterrier{
	opacity: 1;
	visibility: visible;
	width: 750px;
	height: 700px;
	margin-top: calc(var(--base-height)*7 - var(--line-height-offset));
	position: relative;
}


.kroterrier-guide{
	display: flex;
	justify-content: flex-start;
	padding-top:calc(var(--base-height)*3);
}

.kroterrier-guide-l{
	width: var(--column2-width);
	margin-right: var(--column-margin);
	margin-top: calc(var(--line-height-offset)*-2);
	font-family: fot-tsukuaoldmin-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
}

.kroterrier-introduction{
	font-size: calc(var(--base-font-size)*1.25);
	margin-bottom: calc(var(--base-height)*2);
}

.kroterrier-introduction-note{
	font-size:calc(var(--base-font-size)*1.1);
	margin-bottom:calc(var(--base-height)*9);
}

.kroterrier-guide-r{
	width: var(--column2-width);
	margin-top: calc(var(--base-height)* 4);
	margin-top: calc(var(--base-height)*4 - var(--line-height-offset));
}

dl.kroterrier-price{
	border-top: solid 1px #bdbdbd;
	margin-bottom: calc(var(--base-height)*1);
}

dl.kroterrier-price dt{
	float: left;
	width: 110px;
	padding: 12px 0;
	font-size: 13px;
}

dl.kroterrier-price dd{
	padding: 12px 0;
	padding-left: 110px;
	border-bottom: solid 1px #bdbdbd;
	font-size: calc(var(--base-font-size)*1.2);
}

.kroterrier-price-note{
	font-size: 13px;
	margin-bottom: calc(var(--base-height)*3);
}

.kroterrier-price-note ul li{
	list-style-type: " ※ ";
    list-style-position: outside;
    margin-left: 1rem;
}

.kroterrier-reserve a{
	display: block;
	width: 300px;
	height: calc(var(--base-height)*2);
	color: #fff;
	background-color: #000;
	border-radius: 5px;
	text-align: center;
	line-height: calc(var(--base-height)*2);
	font-size: calc(var(--base-font-size)*1.142);
	margin-bottom: calc(var(--base-height)*4);
}

.kroterrier-reserve a:hover{
	opacity: .6;
}

@media screen and (max-width: 768px) {
	.logo-kroterrier{
/* 		margin-top: calc(var(--base-height)* 2); */
		position: relative;
		width: var(--base-width);
	}
	
	.kroterrier-guide{
		display: block;
		margin-top: -0.6rem;
		padding-top:0 !important;
	}
	
	.kroterrier-guide-l{
		width: 100%;
		margin-top: 4rem;
	}
	
	.kroterrier-guide-r{
		width: 100%;
		margin-bottom: 3rem;
	}
	
	
	.kroterrier-reserve,
	.kroterrier-reserve a{
		width: 100%;
		height: calc(var(--base-height)* 4);
		line-height: calc(var(--base-height)* 4);
	}
	
	.kroterrier-introduction{
		font-size: calc(var(--base-font-size)*1.45);
		line-height: calc(var(--base-font-size)*2.272);
		margin-bottom: 1.6rem;
	}
	
	.kroterrier-introduction-note{
		font-size: calc(var(--base-font-size)*1.15);
		line-height: 1.7rem;
		margin-bottom:0 !important;
	}
	
	dl.kroterrier-price{
		margin-bottom: 2.5rem;	
	}
	
	dl.kroterrier-price dt{
		font-size: calc(var(--base-font-size)*0.909);
		padding: 0.9rem 0;
	}
	
	dl.kroterrier-price dd{
		padding: 0.9rem 0;
	}
	
	.kroterrier-price-note{
		font-size: calc(var(--base-font-size)*1);
		margin-bottom: 5rem;
	}
	
}



/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/
.footer{
	width: var(--column5-width);
	font-family: acumin-pro, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.075em;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	margin-bottom: calc(var(--base-height)* 2);
}

.footer--kroterrier{
	justify-content: space-between;
}

.footer-inner{
	width: calc(var(--column2-width));
}

@media screen and (max-width: 768px) {
	.footer{
		width: 100%;
		color: #666;
		justify-content: flex-start;
	}
}