@charset "UTF-8";
/* ==========================================================================



CORE
========================================================================== */


*,
ul,
ol,
p,
dl,x
dt,
dd,
blockquote {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a,
button,
input,
select,
textarea,
.mask,
.loading,
#wrapper,
#menu,
#header {
	transition: all 0.3s ease-in-out;
}

button,
input,
select,
textarea,
header,
footer {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border-radius: 0;
}

img {
	max-width: 100%;
	height: auto;
}

label {
	cursor: pointer;
}
fieldset {
	padding: 0;
	border: none;
}
button {
	background: none;
	border: none;
	cursor: pointer;
}
button:active,
button:hover,
button:focus {
	outline: 0;
}

body {
	overflow-x: hidden;
	background-color: #fff;
	color: #111;
	font: 15px/31px "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25em;
	margin: 0;
	font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
}

p {
	margin: 10px 0;
}

a {
	color: #000;
	text-decoration: none;
}
a:active,
a:hover,
a:focus {
	color: #F7931E;
}



/* ==========================================================================



COMMON
========================================================================== */

.gridw {
	max-width: 1020px;
	margin: 0 auto;
	position: relative;
}

.nakajimaya-logo {
	width: 100px;
	height: 0;
	padding-top: 86px;
	overflow: hidden;
	display: block;
	background: url(/common/gfx/nakajimaya-logo.svg) no-repeat 0 100%;
	background-size: 100px auto;
}
	@media screen and (min-width: 768px) {
		.nakajimaya-logo {
			width: 180px;
			padding-top: 153px;
			background-size: 180px auto;
		}
	}
	@media screen and (min-width: 1000px) {
		.nakajimaya-logo {
			width: 277px;
			padding-top: 235px;
			background-size: 277px auto;
		}
	}


#wrapper {
	padding-top: 60px;
	position: relative;
	z-index: 50;
}
	@media screen and (min-width: 768px) {
		#wrapper {
			padding-top: 80px;
		}
	}

.mod {
	padding: 0 20px 80px;
	text-align: center;
	/* background-color: #f2f2f2; */
}
.mod p {
	max-width: 680px;
	margin: 10px auto;
	text-align: left;
}
.mod .con {
	margin: 0 auto;
	padding: 40px 20px;
	position: relative;
}


.heading2,
.heading2 .con {
	display: inline-block;
	vertical-align: top;
	position: relative;
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl; /* for Safari */
	writing-mode: vertical-rl;
	text-align: left;
	font-size: 18px;
	line-height: 220%;
	font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;
	font-weight: normal;
}
.mod .heading2 {
	margin-bottom: 30px;
}
.mod p.heading2 {
	margin-top: 0;
}

.heading2 > span,
.heading2 .con > span {
	display: block;
}
	@media screen and (min-width: 768px) {
		.heading2 {
			font-size: 27px;
		}

	}

.heading3 {
	border-bottom: 1px solid #111;
	font-size: 15px;
	line-height: 23px;
}

.headround {
	width: 122px;
	height: 135px;
	margin: 0 auto 35px;
	position: relative;
	background: url(/common/gfx/sprite.svg) no-repeat -122px -164px;
	background-size: 320px auto;
	color: #fff;
}
.headround .round {
	height: 100%;
	margin-top: 8px;
	text-align: center;
}
.headround .round > span {
	font-size: 20px;
}

.headround.alt {
	background-position: 0 -164px;
	color: #000;
}


/* ==========================================================================



FLICKITY
========================================================================== */

.flickity-page-dots .dot {
	width: 12px;
	height: 12px;
	margin: 0 4px;
	opacity: 1;
	background-color: #ccc;
}
.flickity-page-dots .dot.is-selected {
	background-color: #F7931E;
}

.flickity-page-dots {
	bottom: -46px;
}

/* ==========================================================================



HEADER
========================================================================== */

#header {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 0;
	left: 0;
	/* 	opacity: 0; */
	z-index: 100;
	background-color: #fff;
}

#header .gridw {
	height: 100%;
}

#header .nakajimaya-logo {
	position: absolute;
	top: 0;
	left: 20px;
	transition: all 0.3s ease-in-out;
	transform-origin: 100% 0;
}
	@media screen and (min-width: 768px) {
		.scrolled #header .nakajimaya-logo {
			-webkit-transform: scale3d(0.6, 0.6, 1);
			-ms-transform:     scale3d(0.6, 0.6, 1);
			transform:         scale3d(0.6, 0.6, 1);
		}
	}


#header .menu {
	padding: 0 20px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	left: 100px;
	right: 0;
	text-align: right;
	line-height: 100%;
}
.menu li {
	margin: 4px 0;
	padding: 0 8px;
	display: inline-block;
	vertical-align: top;
	border-left: 1px solid #111;
	line-height: 11px;
}
.menu .zlocal,
.menu li:first-of-type {
	border-left: none;
}
.menu a {
	font-size: 11px;
}
	@media screen and (max-width: 599px) {
		#header .zabout,
		#header .znews,
		#header .zowner,
		#header .zstore,
		#header .zgreetings {
			display: none;
		}
	}
	@media screen and (min-width: 600px) {
		.menu .zlocal {
			border-left: 1px solid #111;
		}

	}
	@media screen and (min-width: 768px) {
		#header {
			height: 80px;
		}
		#header .menu {
			padding: 0 10px;
			left: 300px;
		}
		.menu li {
			padding: 0 10px;
		}
		.menu li {
			line-height: 13px;
		}
		.menu a {
			font-size: 13px;
		}
	}
	@media screen and (min-width: 1000px) {
		#header .menu {
			left: 277px;
		}
	}


/* ==========================================================================



HOME
========================================================================== */

.homecarousel {
	margin: 40px 0 116px;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	background: url(/common/gfx/curves.svg) no-repeat 0 38%;
	background-size: 101% auto;
}
.homecarousel .item {
	width: 85%;
}
.homecarousel .item .con {
	width: 75%;
	height: 100%;
	display: table;
	vertical-align: middle;
	/* text-align: right; */
}
.homecarousel .item .imgb {
	width: 75%;
	height: 100%;
	display: table-cell;
	position: relative;
	z-index: 80;
	vertical-align: middle;
	overflow: hidden;
	opacity: 1;
	/* 	transition: all 0.3s ease-in-out; */
}
.homecarousel .imgb:before {
	content: '';
	width: 40%;
	height: 30%;
	position: absolute;
	z-index: 5;
	right: 0;
	bottom: 0.9333%;
	background: url(/common/gfx/waves.svg) no-repeat 0 100%;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.homecarousel .is-selected .imgb:before {
	transition: opacity 0.3s ease-in-out 0.2s;
	opacity: 1;
}

.homecarousel .img {
	padding: 6.6%;
	position: relative;
	z-index: 80;
	border-radius: 50%;
	/* overflow: hidden; */
	background: url(/common/gfx/tile-border.svg) no-repeat 0 0;
	background-size: cover;
}
/* .homecarousel .img:after {
	content: '';
	position: absolute;
	top: -24px;
	right: -10px;
	bottom: -10px;
	left: -10px;
	background: url(/common/gfx/tile-border.svg) no-repeat 0 0;
	background-size: cover;
} */
.homecarousel .item img {
	width: 100%;
	height: auto;
	/* margin: -2px 0 0 -1px; */
	border-radius: 50%;
	display: block;
	/* 	transition: all 0.3s ease-in-out; */
}


.homecarousel.on {
	opacity: 1;
}
.homecarousel.on .item .con {
	width: 45%;
	margin-left: 55%;
	transition: all 0.3s ease-in-out;
}
.homecarousel.on .item.is-selected .con {
	width: 75%;
	margin-left: 25%;
	/* height: auto; */
}

.homecarousel.on .item {
	height: 100%;
}
.homecarousel.on .item.is-selected + .item {
	padding-left: 4%;
}
.homecarousel.on .item.is-selected + .item .con {
	margin-left: 0;
}

.homecarousel .flickity-viewport {
	z-index: 60;
}
	@media screen and (min-width: 768px) {
		.homecarousel {
			margin-top: 100px;
		}
		.homecarousel .item {
			width: 55%;
		}
		.homecarousel.on .item.is-selected + .item {
			padding-left: 45px;
		}
	}
	@media screen and (min-width: 1600px) {
		.homecarousel {
			margin-top: 30px;
		}
	}



#tagline {
	width: calc(85% * 0.25);
	height: 100%;
	margin: 0;
	top: 0;
	left: 9.5%;
	left: 7.5%;
	position: absolute;
	z-index: 50;
}

#tagline .con {
	height: 180px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	line-height: 140%;
}
	@media screen and (max-width: 767px) {
		#tagline .con {
			height: 220px;
			line-height: 160%;
			font-size: 17px;
		}
	}
	@media screen and (max-width: 370px) {
		#tagline .con {
			font-size: 13px;
		}
	}

#tagline .con > span:last-of-type {
	margin-left: 0;
}

	@media screen and (min-width: 768px) {
		#tagline {
			width: calc(55% * 0.25);
			left: 22.5%;
			text-align: center;
		}
		#tagline .con {
			width: 90px;
			height: 200px;
			margin-left: -45px;
			-webkit-transform: translateZ(0) scale(1.0, 1.0);
			-webkit-transform: translate(0, -50%);
			-ms-transform: translate(0, -50%);
			transform: translate(0, -50%);
			line-height: 29px;
			font-size: 18px;
		}
	}
	@media screen and (min-width: 820px) {
		#tagline .con {
			width: 100px;
			height: 240px;
			margin-left: -50px;
			line-height: 33px;
			font-size: 21px;
		}
	}
	@media screen and (min-width: 980px) {
		#tagline .con {
			width: 126px;
			height: 320px;
			margin-left: -63px;
			line-height: 41px;
			font-size: 27px;
		}
	}
	@media screen and (min-width: 1200px) {
		#tagline .con {
			width: 154px;
			margin-left: -77px;
			line-height: 50px;
		}
	}

#about {
	padding: 0 20px;
	position: relative;
}
#about .con {
	max-width: 980px;
	padding-bottom: 0;
	position: relative;
}
#about .con i {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 50px;
	z-index: 5;
	border-radius: 10px;
	background: url(/common/gfx/about-bk-2.jpg) no-repeat 50% 0;
	background-size: cover;
}
#about .con > * {
	position: relative;
	z-index: 10;
}
#about p:after {
	content: '';
	width: 122px;
	height: 146px;
	position: absolute;
	top: 100%;
	left: 50%;
	margin: 70px 0 0 -61px;
	background: url(/common/gfx/sprite.svg) no-repeat 0 0;
	background-size: 320px auto;
}
	@media screen and (min-width: 768px) {
		#about .con p {
			width: 60%;
		}
		#about .con p:after {
			top: auto;
			bottom: 0;
			left: auto;
			right: 100%;
			margin: 0 30px 0 0;
			z-index: 10;
		}
	}
	@media screen and (min-width: 1200px) {
		#about:before,
		#about:after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 50px;
		}
		#about:before {
			left: 0;
			right: 50%;
			margin-right: 560px;
			border-radius: 0 10px 10px 0;
			background: url(/common/gfx/about-bk-1.jpg) no-repeat 100% 0;
			background-size: cover;
		}
		#about:after {
			right: 0;
			left: 50%;
			margin-left: 560px;
			border-radius: 10px 0 0 10px;
			background: url(/common/gfx/about-bk-3.jpg) no-repeat 0 100%;
			background-size: cover;
		}
	}



.promoround {
	max-width: 402px;
	margin: 77px auto;
	list-style: none;
	text-align: center;
}
.promoround a {
	display: block;
}
.promoround .img {
	padding: 6.6%;
	position: relative;
	z-index: 80;
	border-radius: 50%;
	background: url(/common/gfx/tile-border.svg) no-repeat 0 0;
	background-size: cover;
	transition: all 0.3s ease-in-out;
}
.promoround img {
	width: 100%;
	height: auto;
	/* margin: -2px 0 0 -1px; */
	border-radius: 50%;
	display: block;
	/* 	transition: all 0.3s ease-in-out; */
}
.promoround .heading2 {
	position: relative;
	display: inline-block;
	vertical-align: top;
}
.promoround strong.heading2 {
	text-align: center;
}
.promoround .heading2 + .img,
.promoround .img + .heading2 {
	margin-top: 60px;
}
#exploreitems .promoround strong.heading2 {
	line-height: 43px;
}
#exploreitems .promoround strong.heading2:before {
	  -moz-animation: bounce 2s infinite;
	  -webkit-animation: bounce 2s infinite;
	  animation: bounce 2s infinite;
}
	@media screen and (max-width: 767px) {
		#exploreitems .promoround strong.heading2 {
			height: 80px;
		}
		#exploreitems .promoround .img + .heading2 {
			height: 100px;
		}
	}

.promoround .heading2:before {
	content: '';
	width: 85px;
	height: 37px;
	top: 100%;
	left: 50%;
	margin: 10px 0 0 -42px;
	position: absolute;
	background: url(/common/gfx/sprite.svg) no-repeat 0 -463px;
	background-size: 320px auto;
}

.promoround .img + .heading2:before {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	margin-bottom: 12px;
	background-position: -85px -463px;
}

.promoround a:active .img,
.promoround a:hover .img,
.promoround a:focus .img {
	-webkit-transform: scale3d(0.6, 0.6, 1);
	-ms-transform:     scale3d(0.6, 0.6, 1);
	transform:         scale3d(1.1, 1.1, 1);
}


#explore {
	padding: 206px 20px 0;
	text-align: center;
}
	@media screen and (min-width: 768px) {
		#explore {
			padding-top: 0;
			background: url(/common/img/home/featured-local-bk.gif) no-repeat 50% 50%;
			background-size: auto 100%;
		}
		#exploreitems {
			width: 100%;
			max-width: 804px;
			display: inline-block;
			vertical-align: top;
		}
		#exploreitems .promoround {
			width: 50%;
			margin: 0;
			padding: 147px 10px 100px;
			float: right;
		}
		#exploreitems .promoround:last-of-type {
			margin-top: 40px;
		}
	}


#news {
	background: url(/common/img/home/news-bk.jpg) no-repeat 50% 50%;
	background-size: cover;
	color: #fff;
}

#news a {
	color: #fff;
}
#news a:active,
#news a:hover,
#news a:focus {
	color: #F7931E;
}

.lineup {
	max-width: 980px;
	margin: 0 auto;
	border-top: 1px dotted #fff;
}
.lineup .item {
	padding: 17px 0;
	list-style: none;
	border-bottom: 1px dotted #fff;
	font-size: 17px;
	line-height: 26px;
	text-align: left;
}
.lineup .item a {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 0 0 90px;
	display: block;
	position: relative;
}
.lineup .item time {
	width: 80px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

.fb-btn {
	width: 90%;
	width: calc(100% - 40px);
	max-width: 490px;
	height: 0;
	padding-top: 120px;
	margin: 50px auto 0;
	overflow: hidden;
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(0, 0, 0, 0.4) url(/common/gfx/fb-btn.svg) no-repeat 50% 50%;
	background-size: 307px auto;
}
.fb-btn:active,
.fb-btn:hover,
.fb-btn:focus {
	background-color: rgba(0, 0, 0, 0.8);
}
	@media screen and (max-width: 530px) {
		.fb-btn {
			padding-top: 100px;
			background-size: 80% auto;
		}
	}


#greetings {
	padding: 0;
}
#greetings .txtbody {
	padding: 0 20px;
	position: relative;
}
.greet h3 {
	max-width: 680px;
	margin: 20px auto 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	text-align: left;
	color: #555;
}
.greet p {
	margin: 20px auto;
}
.greet h3 + p {
	margin-top: 10px;
}
.nakajimaya .byline {
	text-align: right;
}

#greetings img {
	width: 100%;
	margin: 40px 0 0;
}
	@media screen and (min-width: 768px) {
		#greetings .txtbody {
			background: url(/common/img/home/greetings-bk.gif) no-repeat 50% 50%;
			background-size: cover;
		}
	}
	@media screen and (min-width: 980px) {
		#greetings .txtbody {
			background-size: contain;
		}
	}

#storeshot {
	width: 100%;
	max-width: 480px;
	height: auto;
	border-radius: 50%;
}
#storeillus {
	margin: 20px 0;
}
#storeillus img {
	width: 80%;
	width: calc(100% - 135px);
	max-width: 336px;
	height: auto;
	margin-right: 20px;
	display: inline-block;
	vertical-align: middle;
}
#storeillus .heading2 {
	margin: 0;
	vertical-align: middle;
}
#store .desc {
	max-width: 440px;
	margin: 0 auto;
}
#store .desc > p {
	font-size: 13px;
	line-height: 22px;
}
	@media screen and (min-width: 768px) {
		#store {
			position: relative;
		}
		#storeshot {
			width: 45%;
			width: calc(100% - 490px);
			margin-right: 30px;
			display: inline-block;
			vertical-align: middle;
			/* 			display: block;
			position: absolute;
			left: 20px;
			top: 50%;
			-webkit-transform: translateZ(0) scale(1.0, 1.0);
			-webkit-transform: translate(0, -50%);
			-ms-transform: translate(0, -50%);
			transform: translate(0, -50%); */
		}
		#store .desc {
			width: 460px;
			max-width: 100%;
			/* width: 50%; */
			padding-left: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		#store .desc > p span {
			font-size: 12px;
		}
		#storeillus {
			margin-bottom: 100px;
			position: relative;
			text-align: left;
		}
		#storeillus .heading2 {
			font-size: 24px;
		}
	}



#accessgmap {
	width: 100%;
	width: calc(100% + 40px);
	height: 300px;
	margin: 60px -20px 0;
}
#nakajimaya-maplogo {
	width: 70px;
	height: auto;
}
	@media screen and (min-width: 500px) {
		#accessgmap {
			height: 400px;
		}
		#nakajimaya-maplogo {
			width: 100px;
		}
	}	
	@media screen and (min-width: 768px) {
		#accessgmap {
			height: 500px;
		}
		#nakajimaya-maplogo {
			width: 120px;
		}
	}	

#selection .promoround {
	width: 100%;
	max-width: 250px;
}
#selection .promoround .heading2 {
	margin-top: 96px;
	margin-bottom: 15px;
	font-size: 20px;
}
#selection .promoround p.heading2 {
	margin-top: 35px;
	font-size: 15px;
}
#selection .promoround.shuki p.heading2 {
	height: 260px;
}
#selection .promoround.wine p.heading2 {
	height: 230px;
}
#selection .promoround.nihonshu p.heading2 {
	height: 300px;
}
.promoround .dot {
	margin: -7px 0 4px 12px;
}

#selection .promoround .heading2:before {
	display: none;
}
#selection .promoround strong.heading2:after {
	content: '';
	width: 55px;
	height: 138px;
	position: absolute;
	margin-left: -27px;
	top: -54px;
	left: 50%;
	background-color: red;
	background: url(/common/gfx/sprite.svg) no-repeat -126px -8px;
	background-size: 320px auto;
}
#selection .promoround.wine strong.heading2:after {
	background-position: -182px -8px;
}
#selection .promoround.nihonshu strong.heading2:after {
	background-position: -235px -8px;
}
	@media screen and (min-width: 768px) {
		#selection {
			padding-right: 10px;
			padding-left: 10px;
		}
		#selection ul {
			max-width: 810px;
			margin: 0 auto;
		}
		#selection .promoround {
			width: calc(33.33% - 20px);
			margin: 0 10px;
			display: inline-block;
			vertical-align: top;
		}
	}
	@media screen and (min-width: 900px) {
		#selection ul {
			max-width: 870px;
		}
		#selection .promoround {
			width: calc(33.33% - 40px);
			margin: 0 20px;
		}
	}


#footer {
	position: relative;
	z-index: 50;
	background-color: #e6e6e6;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
}

#footer .col {
	width: 300px;
	margin: 0 auto 20px;
	display: block;
	vertical-align: top;
	text-align: left;
}
#footer .nakajimaya-logo {
	margin: 0 auto 20px;
}

.addr strong {
	margin: 0 0 5px;
	display: block;
	font-size: 17px;
	line-height: 26px;
}

#copyright {
	padding: 7px 20px;
	background-color: #000;
	color: #fff;
	font-size: 12px;
	line-height: 16px;
}

.fax {
	font-size: 15px;
}
.tel {
	color: #F7931E;
	font-size: 37px;
	line-height: 27px;
	white-space: nowrap;
}
.mailbtn {
	height: 30px;
	line-height: 30px;
	margin: 5px 0 0;
	display: block;
	background-color: #fff;
	text-align: center;
}
.tel a {
	color: #F7931E;
}

.gmapbtn {
	padding: 3px 4px;
	display: inline-block;
	vertical-align: text-bottom;
	background: #fff;
	font: normal 9px/11px "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProW3", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}
#accessgmap .gmapbtn {
	background-color: #f2f2f2;
}
.mailbtn:active,
.mailbtn:hover,
.mailbtn:active,
#nakajimaya .gmapbtn:active,
#nakajimaya .gmapbtn:hover,
#nakajimaya .gmapbtn:focus {
	background-color: #000;
	color: #fff;
}


#footer ul {
	margin-left: 20px;
}
#footer li {
	margin: 10px 0;
}

	@media screen and (min-width: 768px) {

		#footer .col {
			width: 320px;
			margin: 0;
			padding: 20px 10px;
			display: inline-block;
		}

		#footer .col:first-of-type {
			width: calc(100% - 320px);
			max-width: 620px;
			overflow: hidden;
		}

		#footer .nakajimaya-logo {
			width: calc(100% - 320px);
			padding-top: 240px;
			margin-top: -20px;
			margin-top: calc(-20px + -5%);
			display: inline-block;
			vertical-align: top;
			background-size: contain;
			background-position: 0 0;
		}
		#footer .col:first-of-type .con {
			width: 300px;
			margin-left: 20px;
			display: inline-block;
			vertical-align: top;
		}
		#footer .addr {
			margin-top: 0;
		}

	}




.naka-motion {
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-transform: translate(0, 200px);
	-ms-transform:     translate(0, 200px);
	transform:         translate(0, 200px);
	opacity: 0;
	transition: transform 1.2s ease-in-out, opacity 1.5s ease-in;
}
.naka-motion.on {
	-webkit-transform: translate(0, 0);
	-ms-transform:     translate(0, 0);
	transform:         translate(0, 0);
	opacity: 1;
}






/* ==========================================================================



FEATURED / LOCAL
========================================================================== */

.mountains-bk {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: url(/common/img/featured/mountains.jpg) no-repeat 50% 50%;
	background-size: cover;
}

.topbanner {
	height: 180px;
	position: relative;
}
.topbanner .tophead {
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	font-size: 22px;
	line-height: 22px;
	white-space: nowrap;
}

.p-featured #wrapper {
	background: url(/common/img/featured/top-gfx.png) no-repeat 60% 122px;
	background-size: auto 300px;
	text-align: center;
}
.p-featured .topbanner {
	background: #fff url(/common/img/featured/top-gfx.png) no-repeat 60% 62px;
	background-size: auto 300px;
}
	@media screen and (min-width: 768px) {
		.topbanner {
			height: 220px;
		}
		.topbanner .tophead {
			left: 50%;
			-webkit-transform: translateZ(0) scale(1.0, 1.0);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			margin-top: -10px;
			margin-left: -120px;
			font-size: 34px;
			line-height: 34px;
		}
		.p-featured #wrapper {
			background-size: auto 500px;
			background-position: 60% 103px;
		}
		.p-featured .topbanner {
			background-size: auto 500px;
			background-position: 60% 23px;
		}
	}
	@media screen and (min-width: 1000px) {
		.topbanner .tophead {
			margin-top: -20px;
			margin-left: -11px;
		}
		.p-featured #wrapper {
			background-size: auto 557px;
			background-position: 53% 80px;
		}
		.p-featured .topbanner {
			background-size: auto 557px;
			background-position: 53% 0px;
		}
	}
	@media screen and (min-width: 1100px) {
		.p-featured #wrapper {
			background-size: auto 557px;
			background-position: 50% 80px;
		}
		.p-featured .topbanner {
			background-size: auto 557px;
			background-position: 50% 0px;
		}
	}

.page h2.heading2 {
	color: #F7931E;
}
	@media screen and (min-width: 768px) {
		.page h2.heading2 {
			font-size: 34px;
			line-height: 40px;
		}
	}

.page .mod {
	padding: 66px 0;
	position: relative;
	color: #fff;
}
.page .mod > * {
	position: relative;
	z-index: 5;
}
.page .mod h3 {
	font-size: 22px;
	line-height: 30px;
}
.page .mod p + p {
	margin-top: 20px;
}
.page .mod picture,
.page .mod img {
	display: block;
	text-shadow: none;
	border: none;
}
.page .mod picture {
	max-width: 680px;
	margin: 0 auto 40px;
}
.page .mod figure {
	padding: 0 20px;
	position: relative;
	z-index: 5;
}
.page .mod figure > * {
	position: relative;
	z-index: 10;
}
.page .mod figure + figure {
	margin-top: 90px;
}
	@media screen and (min-width: 768px) {
		.page .mod h3 {
			font-size: 30px;
			line-height: 40px;
		}
		.norikura:before {
			content: '';
			width: 100%;
			height: 391px;
			position: absolute;
			top: -25px;
			left: 0;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 50% 0;
			background-size: 1788px auto;
		}
		.omachi:before {
			content: '';
			width: 100%;
			height: 361px;
			position: absolute;
			top: 47px;
			left: 0;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 50% -391px;
			background-size: 1788px auto;
		}
		.kiso:before {
			content: '';
			width: 100%;
			height: 482px;
			position: absolute;
			top: 47px;
			left: 0;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 50% -752px;
			background-size: 1788px auto;
		}
	}


.page .mod.sake {
	padding-right: 20px;
	padding-left: 20px;
	background: url(/common/img/featured/sake.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.page .mod.sake .heading2 {
	padding-left: 167px;
}
.page .mod.sake .heading2:before {
	content: '';
	width: 137px;
	height: 146px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(/common/gfx/sprite.svg) no-repeat 0 -305px;
	background-size: 320px auto;
}
	@media screen and (max-width: 767px) {
		.page .mod.sake .heading2 {
			padding-left: 85px;
		}
		.page .mod.sake .heading2:before {
			-webkit-transform: scale3d(0.5, 0.5, 1);
			-ms-transform:     scale3d(0.5, 0.5, 1);
			transform:         scale3d(0.5, 0.5, 1);
			transform-origin:  0 100%;
		}
	}


table {
	width: 100%;
	max-width: 680px;
	margin: 50px auto;
	line-height: 120%;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}
th,
td {
	padding: 15px 5px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
table.alt th,
table.alt td {
	text-align: left;
}






.p-local #wrapper {
	text-align: center;
}
.p-local .topbanner {
	background: #fff url(/common/img/local/top-gfx.png) no-repeat 60% 62px;
	background-size: auto 300px;
}
.p-local .daishinsyu:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(/common/img/local/top-gfx.png) no-repeat 60% -117px;
	background-size: auto 300px;
}
	@media screen and (min-width: 768px) {
		.p-local .daishinsyu:after {
			background-size: auto 500px;
			background-position: 60% -198px;
		}
		.p-local .topbanner {
			background-size: auto 500px;
			background-position: 60% 23px;
		}
	}
	@media screen and (min-width: 1000px) {
		.p-local .daishinsyu:after {
			background-size: auto 557px;
			background-position: 53% -200px;
		}
		.p-local .topbanner {
			background-size: auto 558px;
			background-position: 53% 0px;
		}
	}
	@media screen and (min-width: 1100px) {
		.p-local .daishinsyu:after {
			background-size: auto 557px;
				background-position: 50% -224px;
		}
		.p-local .topbanner {
			background-size: auto 558px;
			background-position: 50% 0px;
		}
	}

.mod-head {
	max-width: 1020px;
	margin: 0 auto 40px;
	padding: 0 20px;
}
.mod-head .con {
	width: 190px;
	display: inline-block;
	vertical-align: top;
}
.mod-head h2.heading2 {
	margin-left: 10px;
	float: right;
}
.mod-head p.heading2 {
	/* margin-top: -7px; */
	margin-bottom: 0;
}
.page .mod-head p.heading2 {
	font-size: 15px;
}

.daishinsyu .mod-head p.heading2 {
	height: 310px;
}
.daishinsyu .mod-head p.heading2 > span {
	position: relative;
}
.daishinsyu .mod-head p.heading2 > span > span:after {
	content: 'しあわせ';
	position: absolute;
	top: 14px;
	left: 13px;
	font-size: 8px;
}

.yoakemae-ono .mod-head p.heading2 {
	height: 390px;
}
.mizuo .mod-head p.heading2 {
	height: 315px;
}
.yukawabrewery .mod-head p.heading2 {
	height: 315px;
}
.kurosawa .mod-head p.heading2 {
	height: 370px;
}
	@media screen and (max-width: 767px) {
		.mizuo .mod-head .con {
			width: 255px;
		}
		.yukawabrewery .mod-head .con {
			width: 157px;
		}
	}
	@media screen and (min-width: 768px) {
		.daishinsyu .mod-head p.heading2 {
			height: 520px;
		}
		.daishinsyu .mod-head p.heading2 > span > span:after {
			top: 29px;
			left: 19px;
			font-size: 11px;
		}
		.yoakemae-ono .mod-head p.heading2 {
			height: 660px;
		}
		.mizuo .mod-head p.heading2 {
			height: 545px;
		}
		.yukawabrewery .mod-head p.heading2 {
			height: 535px;
		}
		.kurosawa .mod-head p.heading2 {
			height: 620px;
		}
	}

.p-local .mod:nth-of-type(even) {
	color: #111;
}
.p-local .mod a {
	color: #fff;
}
.p-local .mod:nth-of-type(even) a {
	color: #111;
}

.p-local .mod a:active,
.p-local .mod a:hover,
.p-local .mod a:focus {
	color: #F7931E;
}
	@media screen and (min-width: 640px) {
		.page .mod-head picture,
		.page .mod-head .con {
			display: inline-block;
			vertical-align: top;
		}
		.page .mod-head picture {
			width: 68%;
			margin: 0;
		}
		.mod-head .con {
			width: 32%;
			padding-top: 0;
		}
		.mod-head p.heading2 {
			float: right;
		}
		.mizuo .mod-head picture {
			width: 55%;
		}
		.mizuo .mod-head .con {
			width: 45%;
		}
	}
	@media screen and (min-width: 768px) {
		.mod-head {
			margin-bottom: 80px;
		}
		.page .mod-head p.heading2 {
			margin-left: 0;
			font-size: 25px;
			line-height: 45px;
		}
	}
	@media screen and (min-width: 840px) {
		.mod-head h2.heading2 {
			margin-left: 20px;
		}
	}
	@media screen and (min-width: 980px) {
		.mod-head picture {
			width: 76.53%;
		}
		.mod-head .con {
			width: 23.47%;
			padding: 0;
		}
		.mizuo .mod-head picture {
			width: 65%;
		}
		.mizuo .mod-head .con {
			width: 35%;
		}
	}

.mod .msg {
	width: 100%;
	margin: 40px auto 20px;
	padding: 0 10px;
	display: block;
	text-align: center;
}
.mod .msg figure {
	width: 140px;
	margin: 0 10px 0 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	text-align: right;
}
.mod .msg figure > picture {
	margin: 0;
}
.mod .msg figcaption {
	margin-top: 5px;
}
.mod .msg .heading2 {
	font-size: 16px;
	/* line-height: 120%; */
}
	@media screen and (min-width: 768px) {
		.mod .msg {
			margin: 0 auto 40px;
		}
		.mod .msg figure {
			width: 220px;
			margin-right: 20px;
		}
		.mod .msg .heading2 {
			/* width: 22px; */
			font-size: 18px;
		}
	}

.p-local .mod > p {
	max-width: 720px;
	padding: 0 20px;
}

.mod .col {
	margin: 20px;
	font-size: 13px;
	line-height: 22px;
}
.mod .col img {
	width: 100%;
	max-width: 233px;
	margin: 0 auto;
	display: block;
}
	@media screen and (min-width: 500px) {
		.mod .cols {
			max-width: 720px;
			margin: 0 auto;
			padding: 0 10px;
		}
		.mod .col {
			width: 33.33%;
			margin: 0;
			padding: 20px 10px;
			display: inline-block;
			vertical-align: bottom;
			text-align: left;
		}
		.mod .col:last-of-type {
			text-align: right;
		}
		.mod .col span {
			display: block;
		}
	}
	@media screen and (min-width: 640px) {
		.mod .col span {
			white-space: nowrap;
		}
	}
	@media screen and (min-width: 700px) {
		.mod .cols {
			max-width: 740px;
		}
		.mod .col {
			padding: 20px;
		}
	}



.daishinsyu {
	background: url(/common/img/local/bk1.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.yoakemae-ono {
	background: url(/common/img/local/bk2.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.mizuo {
	background: url(/common/img/local/bk3.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.yukawabrewery {
	background: url(/common/img/local/bk4.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.kurosawa {
	background: url(/common/img/local/bk5.jpg) no-repeat 50% 50%;
	background-size: cover;
}
	@media screen and (min-width: 768px) {
		.daishinsyu:before {
			content: '';
			width: 100%;
			height: 391px;
			position: absolute;
			top: 27.5%;
			left: 0;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 50% 0;
			background-size: 1788px auto;
		}
		.yoakemae-ono:before {
			content: '';
			width: 100%;
			height: 441px;
			position: absolute;
			top: 31%;
			left: 0;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 50% -1235px;
			background-size: 1788px auto;
		}
		.mizuo .mod-head:before {
			content: '';
			width: 277px;
			height: 356px;
			position: absolute;
			top: 100%;
			margin-top: -2px;
			left: -68px;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat 0 -1676px;
			background-size: 1788px auto;
		}
		.yukawabrewery .mod-head:before {
			content: '';
			width: 436px;
			height: 136px;
			position: absolute;
			top: 100%;
			margin-top: -110px;
			left: 50%;
			margin-left: 105px;
			z-index: -1;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat -277px -1887px;
			background-size: 1788px auto;
		}
		.kurosawa .mod-head:before {
			content: '';
			width: 300px;
			height: 211px;
			position: absolute;
			top: 100%;
			margin-top: -126px;
			left: -80px;
			z-index: -1;
			background: url(/common/img/featured/featured-gfx.svg) no-repeat -277px -1676px;
			background-size: 1788px auto;
		}
	}


#news {
	display: none;
}
#news.populated {
	display: block;
}




@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-5px);
		transform: translateY(-5px);
	}
	60% {
		-moz-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
	60% {
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}


/*-- 20210909 add --*/
.OnlineSbanner {
	text-align:center;
	margin-bottom: 50px;
	}
@media screen and (max-width:1000px) {
		.OnlineSbanner {
			padding: 0 20px;
		}
	}