@charset "utf-8";

/* -------------------------------------------------------------------------
	BASE
========================================================================= */
* {
	margin: 0px;
	padding: 0px;
	}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	}
body {
	line-height: 1;
	margin: 0px;
	color: #000;
	line-height: 160%;
	font-size: 14px; /*IE8*/
	font-size: 1.4rem;
	font-family: meiryo,"メイリオ", ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
	background-color: #F7F1D9;
	}
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0px;
	}
li { padding: 0px; }
input, select { vertical-align: middle; }
a { color: #4A96EA; }
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: #60509E; }
a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
	}
a:active { color: #7EBAE7; }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fxsmall { font-size: 1.0rem; } 
.fsmall { font-size: 1.2rem; } 
.fmedium { font-size: 1.4rem; } 
.flage { font-size: 1.6rem; } 
.fxlage { font-size: 1.8rem; } 
.clear:after {
	content: "";
	display: block;
	clear: both;
	height: 0px;
	overflow: hidden;
	}

/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
#head {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 505px;
	z-index: 1;
	}
#head:before {
	content:"";
	display: block;
	padding: 45.8% 0px 0px 0px;
	}
.bgLoading { display: none; }
.headBg,
.headerWrapper,
#navigation,
.hikyakuWrapper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}
.headBg { background: url(../img/header_bg.jpg) center top / cover no-repeat; }
.headerBgLoad { visibility: hidden; }
.headerWrapper {
	display: block;
	max-width: 1100px;
	margin: auto;
	}
@media screen\9 { /* IE6,7 */
#head {
	height: 505px;
	background: url(../img/header_bg.jpg) center top / cover no-repeat;
	}
.headBg,
.headerWrapper {
	width: 1100px;
	margin: 0px auto;
	}
	}
@media screen\0 { /* IE8,9,10 */
#head {
	height: 100%;
	max-height: 505px;
	background: url(../img/header_bg.jpg) center top / cover no-repeat;
	}
.headBg,
.headerWrapper {
	width: 100%;
	max-width: 1100px;
	margin: 0px auto;
	}
	}
#head .logo {
	z-index: 1;
	margin: 8.5% 0px 0px 14.5%; /* 92px 0px 0px 160px */
	}
#head .logo img {
	width: 10.5%;
	max-width: 100px;
	}
#navigation { z-index: 1; }/* 50 */
#navigation ul {
	position: relative;
	text-align: center;
	}
#navigation li {
	position: absolute;
	width: 2.75%;
	max-width: 30px;
	}
#navigation li.navWallPaper {
	width: 2.9%;
	max-width: 32px;
	}
.navAisatsu { margin: 7% 0px 0px 34.45%; } /* 72px 0px 0px 379px */
.navAnnai { margin: 8.5% 0px 0px 43.72%; } /* 94px 0px 0px 481px */
.navShinagaki { margin: 24% 0px 0px 55.63%; } /* 262px 0px 0px 612px */
.navAccess { margin: 6.5% 0px 0px 65.36%; } /* 72px 0px 0px 719px */
.navKokura { margin: 11% 0px 0px 73.54%; } /* 119px 0px 0px 809px */
.navGallery { margin: 8% 0px 0px 88.09%; } /* 86px 0px 0px 969px */
.navWallPaper { margin: 29.55% 0px 0px 89.45%; } /* 325px 0px 0px 984px */

.hikyakuWrapper {
	width: 100%;
	overflow: hidden;
	}
.hikyakuHorizontal {
	height: 64.9%;
	width: 21.5%;
	margin-top: 20%; /* 230px */
	animation: hikyakuHol 20s linear infinite;
	-webkit-animation: hikyakuHol 20s linear infinite;
	-moz-animation: hikyakuHol 20s linear infinite;
	}
@keyframes hikyakuHol {
	0% { margin-left: 150%; }
	99% { margin-left: -200%; }
}
@-webkit-keyframes hikyakuHol {
	0% { margin-left: 150%; }
	99% { margin-left: -200%; }
}
@-moz-keyframes hikyakuHol {
	0% { margin-left: 150%; }
	99% { margin-left: -200%; }
}
/*
.hikyakuAnimation {
	width: 100%; 267px
	height: 64.9%;  328px
	position: absolute;
	display:block;
	top: 46%; 230px
	z-index: 10;
	animation: hikyaku 14s linear infinite;
	-webkit-animation: hikyaku 14s linear infinite;
	-moz-animation: hikyaku 14s linear infinite;
	background: url(../img/hikyaku.png) right top / contain no-repeat; 
  
}
@keyframes hikyaku {
0% {
	background-position: 1800px 0;
	}
99.9% {
	background-position: -600px 0;
	}
}
*/
.hikyakuAnimation {
	position: absolute;
	display:block;
	z-index: 10;
	background: url(../img/hikyaku2.png) left top / 200% 100% no-repeat; 
	height: 64.9%;
	width: 21.5%;
	animation: hikyaku 0.8s steps(2) infinite;
	-webkit-animation: hikyaku 0.8s steps(2) infinite;
	-moz-animation: hikyaku 0.8s steps(2) infinite;
	}
@keyframes hikyaku {
  to { background-position: 200% 0; } /* -534px */
}
@-webkit-keyframes hikyaku {
  to { background-position: 200% 0; } /* -534px */
}
@-moz-keyframes hikyaku {
  to { background-position: 200% 0; } /* -534px */
}


/* -------------------------------------------------------------------------
	BODY
========================================================================= */
#contents {
	position: relative;
	z-index: 50;
	border-top: 10px solid #EFE4B9;
	}
#contents section:nth-child(2n+1) { background-color: #FFF; }
#contents section:nth-child(2n) { background-color: #EFE4B9; }


/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	color: #FFFFFF;
	background-color: #505050;
	border-top: 10px solid #BB9D4D;
	}
#foot .footBody {
	width: 90%;
	max-width: 900px;
	margin: 0px auto;
	padding-top: 2%;
	color: #FFF;
	text-align: center;
	}
#foot .footLogo {
	width: 50px;
	margin: 0px auto;
	}
#foot .address {
	padding: 2% 0px 3%;
	font-size: 1.2rem;
	line-height: 160%;
	}
#foot .copyright {
	padding:  1% 0px 4%;
	border-top: 1px solid #999999;
	font-size: 1.4rem;
	font-family: Tahoma, Geneva, sans-serif;
	}

#pagetop {
	position: fixed;
	width: 3.3%;
	bottom: 12px;
	right: 15px;
	z-index: 50;
	}
#pagetop a {
	width: 100%;
	max-width: 30px;
	height: auto;
	max-height: 150px;
	display: block;
	}

/* -------------------------------------------------------------------------
	AISATSU
========================================================================= */
#aisatsu { padding: 4% 0px 4.5%; } /* 45px 0px 50px */
.container {
	width: 81.81%;/*81.81%*/
	max-width: 900px;
	margin: 0px auto;
	position: relative;
	}
.title,
#aisatsu .text {
	display: inline-block;
	vertical-align: top;
	}
#aisatsu .title {
	width: 4.5%;
	max-width: 40px;
	padding: 0px 7.2% 0px 6.9%; /* 0px 60px 0px 62px *//*6.6%*/
	}
#aisatsu .text {
	width: 57.22%;
	max-width: 515px;
	line-height: 200%;
	}
#aisatsu .photo { position: absolute; }
#aisatsu .okami {
	width: 10.6%;
	max-width: 95px;
	right: 23.88%; /* 215px */
	bottom: 0; /* 50px */
	}
#aisatsu .toriisa {
	width: 22.22%;
	max-width: 200px;
	right: 0px;
	top: 0; /* 50px */
	}


/* -------------------------------------------------------------------------
	ANNAI
========================================================================= */
#annai { padding: 4% 0px 4.5%; } /* 45px 0px 50px */
#annai .container {
	font-size: 0;
	background: url(../img/annai_illust01.png) left bottom / 17.78% no-repeat, url(../img/annai_illust02.png) right bottom / 6.67% no-repeat; /* 160px, 60px */
	}
/*#annai .title,*/
#annai .dataBox,
#annai .dataBox dt,
#annai .dataBox dd:not(.text),
#annai .wineCellar,
#annai .counterBox,
#annai .pRoomBox {
	display: inline-block;
	vertical-align: top;
	}
#annai .title {
	width: 4.5%;
	max-width: 40px;
	padding: 0px 7.2% 0px 6.9%; /* 0px 60px 0px 62px */
	}
#annai .dataBox {
	font-size: 1.4rem;
	width: 25.5%;
	max-width: 230px;
	margin-bottom: 25px;
	}
#annai img:not(.titleImage) { border: 5px solid #FFF; }
#annai .dataBox dt {
	width: 39.13%;
	max-width: 90px;
	margin: 0px 0px 7px 5px;
	color: #FFF;
	font-size: 1.3rem;
	text-align: center;
	background-color: #BB9D4D;
	border-radius: 2px;
	}
#annai .dataBox dt:nth-of-type(1),
#annai .dataBox dd:nth-of-type(2) { margin-top: 10.5%; } /* 24px */
#annai .dataBox dd.text,
#annai .dataBox dd:last-of-type { background: url(../img/border_brown.png) left bottom no-repeat; }
#annai .dataBox dd.text { padding: 2px 2px 11%; } /* 2px 2px 26px */
#annai .dataBox dd:not(.text) {
	padding: 0px 0px 10px 10px;
	line-height: 130%;
	}
#annai .dataBox dd:nth-of-type(2),
#annai .dataBox dd:nth-of-type(3) { padding: 2px 4px 10px; }
#annai .dataBox dd:last-of-type {
	width: 96%;
	padding-bottom: 20px;
	}
#annai .counterBox { margin-bottom: 15px; }
#annai .counterBox,
#annai .wineCellar {
	width: 25%;
	max-width: 230px;
	}
#annai .photo:not(.privateRoom) {
	width: 24.44%;
	max-width: 220px;
	}
#annai .counter.photo  { width: 100%; }
#annai .counterBox dt {
	padding-top: 2px;
	font-size: 1.3rem;
	}
#annai .counterBox dt:nth-of-type(2) { padding-top: 22px; }
#annai .counterBox dt:before,
#annai .pRoomBox dt:before {
	content:"▲";
	color: #BB9D4D;
	}
#annai .counterBox dt:nth-of-type(2):before {
	content:"";
	display: inline-block;
    width: 0;
    height: 0;
	margin-right: 3px;
    border-right: 8px solid #BB9D4D;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
	}
#annai .counterBox dd:not(.photo),
#annai .pRoomText {
	padding: 0px 2px;
	color: #333333;
	font-size: 1.1rem;
	line-height: 180%;
	}
#annai .wineCellar { margin: 0px 2.8% 25px 3.3%; } /* 0px 25px 25px 30px */
#annai .pRoomBoxContainer {
	position: relative;
	padding-left: 18.9%; /* 170px */
	}
#annai .pRoomBox { font-size: 1.4rem; }
#annai .pRoomBox:nth-of-type(2) { margin: 0px 1.9% 0px 2.1%; } /* 0px 15px 0px 15px */
#annai .pRoomBox:nth-of-type(n+2) {
	width: 31.5%;
	max-width: 230px;
	}
#annai .pRoomBox:nth-of-type(n+2) .photo {
	width: 95.6%;
	max-width: 220px;
	}
#annai .pRoomBox:nth-of-type(1) {
	width: 33%;
	max-width: 240px;
	}
#annai .pRoomBox:nth-of-type(1) .photo {
	width: 96%;
	max-width: 230px;
	}
#annai .pRoomText {
	width: 47.22%;
	max-width: 478px;
	position: absolute;
	left: 47.22%; /* 425px */
	bottom: 7.4%; /* 20px */
	}


/* -------------------------------------------------------------------------
	SHINAGAKI
========================================================================= */
#shinagaki { padding: 4.5% 0px 4%; } /* 50px 0px 45px */
#shinagaki .container {
	font-size: 0;
	background: url(../img/shinagaki_illust01.png) left 18px bottom 0px / 12.34% no-repeat; /* 111px */
	}
#shinagaki .title {
	width: 4.5%;
	max-width: 40px;
	padding: 0px 7.5% 0px 6.9%; /* 0px 68px 0px 62px */
	}
#shinagaki .season {
	width: 91.23%;
	max-width: 666px;
	padding: 4.1% 4.38% 4.1%; /* 30px 32px 30px */
	background: url(../img/shinagaki_box_bottom.png) left bottom / contain no-repeat, url(../img/shinagaki_box_top.png) left top / contain no-repeat, url(../img/shinagaki_box_bg.png) left top / contain repeat-y;
	}
.box {
	width: 81.1%;
	max-width: 730px;
	}
.box,
#shinagaki .season dt,
#shinagaki .season dd,
#shinagaki .food {
	display: inline-block;
	vertical-align: top;
	}
#shinagaki .season dt {
	width: 5.7%;
	max-width: 38px;
	padding: 0px 2.7% 0px 1.2%; /* 0px 18px 0px 8px */
	}
#shinagaki .season dd,
#shinagaki .sText,
#shinagaki .food { font-size: 1.4rem; }
#shinagaki .season dd {
	width: 36.93%;
	max-width: 246px;
	padding: 2px 1.5% 0px 0px; /* 2px 10px 0px 0px */
	}
#shinagaki .season .smh01 {
	padding-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
	}
#shinagaki .season dd:nth-of-type(2n+1) { margin-right: 3%; } /* 20px */
#shinagaki .season dt:nth-of-type(n+3),
#shinagaki .season dd:nth-of-type(n+3) { padding-top: 20px; }
#shinagaki .sText { padding: 22px 6px 26px; }
#shinagaki .foodsBox {}
#shinagaki .food {
	width: 47.94%;
	max-width: 350px;
	padding-top: 20px;
	background: url(../img/border_brown.png) top left / auto no-repeat;
	}
#shinagaki .food:nth-of-type(-n+2) { padding-bottom: 20px; }
#shinagaki .food:nth-of-type(2n+1) { margin-right: 4.1%; } /* 30px */
#shinagaki .fTitle,
#shinagaki .text {
	width: 47.14%;
	max-width: 165px;
	float: right;
	}
#shinagaki .fTitle { padding: 2px 0px 2px; }
#shinagaki .fTitle:before {
	content:"";
	display: inline-block;
    width: 0;
    height: 0;
	margin-right: 3px;
    border-right: 9px solid #BB9D4D;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
	}
#shinagaki .photo {
	width: 50%;
	max-width: 175px;
	float: left;
	}
#shinagaki .text {
	color: #555;
	font-size: 1.2rem;
	line-height: 160%;
	}


/* -------------------------------------------------------------------------
	ACCESS
========================================================================= */
#access { padding: 4.5% 0px 4%; } /* 50px 0px 45px */
#access .container {
	width: 83.64%;
	max-width: 920px;
	padding-left: 20px;
	font-size: 0;
	background: url(../img/access_illust01.png) left bottom / 19.68% no-repeat; /* 185px */
	}
#access .title {
	width: 4.5%;
	max-width: 40px;
	padding: 0px 7.2% 0px 6.9%; /* 0px 60px 0px 62px */
	}
#access .accessBox,
#access .map {
	width: 47.96%;
	max-width: 350px;
	display: inline-block;
	vertical-align: top;
	}
#access .accessBox,
#access .subhead { font-size: 1.4rem; }
#access .addressBox,
#access .carBox {
	background: url(../img/border_brown.png) left bottom repeat-x;
	}
#access .addressBox {
	min-height: 162px;
	padding: 5px 0px 15px 5px;
	}
#access .address {}
#access .photo {
	max-width: 110px;
	max-height: 150px;
	margin-left:5px;
	float: right;
	border: 5px solid #FFF;
	}
#access .tel { padding-top: 10px; }
#access .map {
	height: 500px;
	padding-left: 4.08%; /* 30px */
	}
#access .headline {
	max-width: 170px;
	margin: 15px 0px 0px 4px;
	padding: 4px 0px;
	background-color: #BB9D4D;
	border-radius: 3px;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 100%;
	text-align: center;
	}
#access .subhead {
	margin: 5px 0px 0px 8px;
	font-weight: normal;
	}
#access .subhead:before {
	content:"●";
	color: #BB9D4D;
	}
#access .text {
	line-height: 130%;
	color: #333333;
	}
#access .text.car:nth-of-type(1) { padding: 2px 0px 8px 22px; }
#access .text.car:nth-of-type(2) { padding: 2px 0px 15px 22px; }
#access .text.train{ padding: 8px 12px; }
#access .carBox {}


/* -------------------------------------------------------------------------
	KOKURA
========================================================================= */
#kokura { padding: 4% 0px 1.5%; } /* 50px 0px 20px */
#kokura .container {
	padding-bottom: 25px;
	font-size: 0;
	background: url(../img/kokura_illust01.png) left 14px bottom / 14.9% no-repeat; /* 140px */
	}
#kokura .title {
	width: 4.78%;
	max-width: 44px;
	padding: 0px 7.4% 0px 6.5%; /* 0px 68px 0px 60px */
	}
#kokura .text,
#kokura .kList {
	width: 32.33%;
	max-width: 236px;
	display: inline-block;
	vertical-align: top;
	}
#kokura .text,
#kokura .kList:nth-of-type(1),
#kokura .kList:nth-of-type(3),
#kokura .kList:nth-of-type(4) { margin-right: 1.5%; } /* 10px */ 
#kokura .kList:nth-of-type(1),
#kokura .kList:nth-of-type(2) { margin-bottom: 1.5%; } /* 10px */
#kokura .text {
	padding: 1% 0px 0px;
	font-size: 1.4rem;
	line-height: 160%;
	}
#kokura .kList { position: relative; }
#kokura .photo {}
#kokura .name {
	width: 88%;
	padding: 4% 6%;
	position: absolute;
	bottom: 0;
	color: #FFF;
	font-size: 1.6rem;
	background: rgba(187, 157, 77, 0.8);
	}


/* -------------------------------------------------------------------------
	GALLERY
========================================================================= */
#gallery { padding: 4% 0px 1.5%; } /* 50px 0px 20px */
#gallery .container {
	padding-bottom: 145px;
	font-size: 0;
	background: url(../img/gallery_illust01.png) left bottom / 16.85% no-repeat; /* 155px */
	}
#gallery .title {
	width: 4.5%;
	max-width: 40px;
	padding: 0px 7.2% 0px 6.9%; /* 0px 60px 0px 62px */
	}
#gallery .text {
	font-size: 1.4rem;
	padding-bottom: 2.5%;
	}
#gallery .photoList li {
	width: 165px;
	max-width: 165px;
	margin: 0px 1.36% 1.36% 0px; /* 10px */
	border: 5px solid #FFF;
	display: inline-block;
	}
#gallery .photoList li:nth-of-type(n+4) { margin-right: 0; }



/* -------------------------------------------------------------------------
	SMARTPHONE ONLY
========================================================================= */
@media only screen and (min-width: 1101px) {
.hikyakuHorizontal { margin-top: 230px; }
.hikyakuAnimation {
	width: 267px;
	height: 328px;
	}
#aisatsu { padding: 45px 0px 50px; }
#annai { padding: 45px 0px 50px; }
#shinagaki { padding: 46px 0px 45px; }
#access { padding: 46px 0px 45px; }
#kokura { padding: 46px 0px 20px; }
#gallery { padding: 46px 0px 20px; }
}

@media only screen and (max-width: 950px) {
/* ANNAI ---------------------------------------*/
#annai .dataBox dt { font-size: 1.1rem; }
#annai .pRoomText {
	width: 100%;
	position: relative;
	padding-top: 10px;
	left: 0;
	bottom: 0;
	}
}

@media only screen and (max-width: 768px) {
body { font-size: 1.3rem; }
/* ANNAI ---------------------------------------*/
#annai .dataBox { font-size: 1.2rem; }
#annai .dataBox dt { font-size: 1.0rem; }
#annai img:not(.titleImage) { border: 4px solid #FFF; }
#annai .counterBox dt { font-size: 1.2rem; }
#annai .pRoomBox { font-size: 1.3rem; }
/* SHINAGAKI -----------------------------------*/
#shinagaki .season dd,
#shinagaki .sText,
#shinagaki .food { font-size: 1.3rem; }
#shinagaki .text { font-size: 1.1rem; }
/* ACCESS --------------------------------------*/
#access .accessBox,
#access .subhead { font-size: 1.3rem; }
#access .accessBox,
#access .map {
	width: 96%;
	max-width: 550px;
	display: block;
	}
#access .map {
	padding-top: 20px;
	padding-left: 0px;
	height: 200px;
	}
#access .headline {
	font-size: 1.4rem;
	line-height: 100%;
	}
/* KOKURA --------------------------------------*/
#kokura .text {
	font-size: 1.2rem;
	line-height: 160%;
	}
#kokura .name { font-size: 1.4rem; }
/* GALLERY -------------------------------------*/
#gallery { padding: 4% 0px 3%; }
#gallery .container { padding-bottom: 0px; }
#gallery .photoList li { width: 145px; }
}

@media only screen and (max-width: 667px) {
body { font-size: 1.2rem; }
#foot .address {
	font-size: 1rem;
	line-height: 160%;
	}
#foot .copyright { font-size: 1.2rem; }

/* SHINAGAKI -----------------------------------*/
#shinagaki .season dd,
#shinagaki .sText,
#shinagaki .food { font-size: 1.2rem; }
#shinagaki .food {
	width: 100%;
	max-width: 400px;
	display: block;
	clear: both;
	padding-top: 10px;
	background: url(../img/border_brown.png) top left / auto repeat-x;
	}
#shinagaki .fTitle,
#shinagaki .text {
	width: 58%;
	max-width: 220px;
	}
#shinagaki .photo {
	width: 38%;
	margin-bottom: 10px;
	}
/* ACCESS --------------------------------------*/
#access .accessBox,
#access .subhead { font-size: 1.2rem; }
#access .headline {
	font-size: 1.3rem;
	line-height: 100%;
	}
/* KOKURA --------------------------------------*/
/* GALLERY -------------------------------------*/
#gallery .text { font-size: 1.2rem; }
}

@media only screen and (max-width: 450px) {}



/*----- jquery.matchHeight.js -----*/
.inviewfadeIn {
	opacity: 0;
	transition: .8s;
	}
.fadeIn { opacity: 1.0; }
.inviewUp {
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px);
	transition: .8s;
	}
.Up {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	}
.inviewzoomIn {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transition: .8s;
	}
.zoomIn {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	} 
.inviewfadeInUp {
	opacity: 0;
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px);
	transition: .5s;
	}
.fadeInUp {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	}