@charset "utf-8";
/* CSS Document */

html,body {
	height: 100%;
}
html,body {
	-webkit-text-size-adjust: 100%;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

body,html{
	padding: 0;
	margin: 0;
	position: relative;
	font:12px "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height: 100%;
}
dl, dt, dd, table, caption, th, td, img, form,
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	margin: 0;
	padding: 0;
	border: none;
	font-size:102%;
	font-style: normal;
	font-weight: normal;
 	text-align: left;
	list-style-type: none;
}

figure{
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
 	text-align: left;
	list-style-type: none;	
}
h1,h2,h3,h4,h5,h6,ul,ol,li,p{
	padding: 0;
	margin: 0;
}
li{
	list-style:none;
}
img { vertical-align: bottom;max-width: 100%;height: auto; }

a{
	text-decoration:none;
}
a, a img{
	border:none;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
	opacity:1;
}
a:hover, a:hover img{
	opacity:0.5;
}
/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

.br-pc { display:none; }
.br-sp { display:block; }
@media (min-width: 601px){
.br-pc { display:block; }
.br-sp { display:none; }
}

/************************************************************
loader
************************************************************/
#loading{
	position: absolute;
	left: 50%;
	top: 30%;
}
#loader-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #FFF;
	z-index: 1;
}

/************************************************************
default
************************************************************/
#wrapper{
	margin:0 auto;
}
.top-main{
	background:url(../img/main-back@2x.png) no-repeat 0 0;
	background-position:center;
	background-size:cover;
	height:365px;
	position:relative;
}
.logo{
	position:absolute;
	top:16px;
	left:16px;
}
.top-main .inner{
	margin:0 auto;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-490px;
	width:980px;
}
.pass{
	position:absolute;
	bottom:-45px;
	right:0;
}

h1{
	margin:100px 0 24px;
	text-align:center;
}
h2{
	margin:0 0 24px;
	text-align:center;
}
	h2 + p{
		font-size:20px;
		margin-bottom:24px;
		text-align:center;
	}
.pass-img{
	margin-bottom:100px;
	text-align:center;
}

.tokuten-area{
	background:url(../img/tokuten-back@2x.png) repeat-x 0 0;
	background-size:64px 190px;
	margin:0 0 70px;
	padding-top:54px;
}

.areatitle{
	margin-bottom:20px;
	text-align:center;
}

h3{
	margin-bottom:54px;
	text-align:center;
}
.tokuten-detail{
	margin:0 auto 42px;
	width:980px;
}
.tokuten-detail .tokuten-img{
	float:left;
}
.tokuten-detail .content{
	float:right;
	width:450px;
}
	.tokuten-detail .content .summary{
		background:#E3D2A9 url(../img/dog-ear@2x.png) no-repeat 100% 0%;
		background-size:29px;
		border-top:1px solid #E8380D;
		padding:20px;
	}
	.tokuten-detail .content .shop-parents{
		font-size:15px;
		font-weight:bold;
	}
	.tokuten-detail .content .shop-name{
		font-size:28px;
		font-weight:bold;
		line-height:100%;
	}
	.tokuten-detail .content .shop-pr{
		font-size:16px;
		line-height:140%;
		margin-top:16px;
	}
	.tel{
		color:#E8380D;
		font-size:28px;
		font-weight:bold;
		margin:8px 0 5px;
		padding-left:36px;
		position:relative;
	}
	.tel:before{
		content:"TEL";
		background:#221815;
		color:#fff;
		font-size:11px;
		margin:-9px 0 0 0;
		padding:0px 5px;
		position:absolute;
		top:50%;
		left:0;
		border-radius:3px;
	}
	.info{
		font-size:12px;
		margin:0 0 12px;
	}
	.coupon{
		background:#E8380D url(../img/tokuten-label@2x.png) no-repeat 0 0;
		background-size:101px 71px;
		display: table;
		height:80px;
		margin-bottom:8px;
		position:relative;
		width:100%;
	}
	.coupon2{
		background:#E8380D url(../img/tokuten-label@2x.png) no-repeat 0 0;
		background-size:101px 71px;
		display: table;
		height:95px;
		margin-bottom:8px;
		position:relative;
		width:100%;
	}
	.coupon p,
	.coupon2 p{
		color:#fff;
		display: table-cell;
		font-size:20px;
		font-weight:bold;
		text-align:center;
		vertical-align: middle;
		line-height:120%;
	}
	.coupon p span,
	.coupon2 p span{
		font-size:29px;
	}
		.daishouin.coupon2 p,
		.miyajimarine.coupon2 p,
		.yamadaya.coupon p,
		.miyajima_tk.coupon p,
		.momijinoga.coupon p,
		.brewery.coupon p,
		.okeikojp.coupon p,
		.kashi_kimura.coupon p{
			font-size:15px;
			line-height:100%;
		}
		.daishouin.coupon2 p span,
		.miyajimarine.coupon2 p span,
		.yamadaya.coupon p span,
		.miyajima_tk.coupon p span,
		.momijinoga.coupon p span{
			font-size:13px;
		}


	.link-btn li,
	.link-btn2 li{
		text-align:center;
	}
	.link-btn li span,
	.link-btn2 li span{
		background:url(../img/icon-arrow@2x.png) no-repeat 100% center;
		background-size:5px 6px;
		padding-right:10px;
	}
	.link-btn a{
		background:#221815;
		color:#fff;
		display:block;
		float:left;
		font-size:14px;
		font-weight:bold;
		padding:7px 0 5px;
		width:49%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		border-radius:3px;
	}
	.link-btn2 a{
		background:#221815;
		color:#fff;
		display:block;
		float:left;
		font-size:14px;
		font-weight:bold;
		padding:7px 0 5px;
		width:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		border-radius:3px;
	}
		.link-btn li:nth-child(2) a,
		.link-btn2 li:nth-child(2) a{
			float:right;
		}



.okeiko-area{
	background:url(../img/okeiko-back.gif) repeat 0 0;
	margin:0 auto 52px;
	padding:8px;
	position:relative;
	width:980px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.okeiko-area .inner{
	border:1px solid #804F21;
	padding:24px; 
}
h4{
	position:absolute;
	top:-52px;
	left:-35px;
}
.okeiko-area .inner .left{
	float:left;
	width:375px;
}
.okeiko-area .inner .left img{
	padding-top:50px;
}
.okeiko-area .inner .left .detail{
	margin:18px auto 0;
	position:relative;
	width:273px;
}
	.okeiko-area .inner .left .head{
		font-size:18px;
		font-weight:bold;
		margin-bottom:16px;
	}
	.okeiko-area .inner .left .tel{
		margin:0;
	}
	.okeiko-area .inner .left .float-obj{
		position:absolute;
		top:-75px;
		right:-31px;
	}

.okeiko-area .inner .right{
	float:right;
	width:510px;
}
.okeiko-area .inner .right li{
	margin-bottom:16px;
}
	.okeiko-area .inner .right li:last-child{
		margin-bottom:0px;
	}
.okeiko-area .inner .right li img{
	float:left;
}
.okeiko-area .inner .right li .text-box{
	float:right;
	width:290px;
}
	.okeiko-area .inner .right li .text-box p{
		font-size:17px;
		font-weight:bold;
		margin-bottom:8px;
	}
	.okeiko-area .inner .right li .text-box p + p{
		font-size:16px;
		font-weight:normal;
	}

.spot-area{
	margin:0 auto 52px;
	width:980px;
}
h5{
	text-align:center;
	margin:0 auto 52px;
}
.spot-box{
	border:2px solid #C8A554;
	padding:58px 12px 12px;
	position:relative;
	box-shadow: 0 0 4px gray;
}
	.spot-box:before{
		content:"";
		background:url(../img/spot-ear.png) no-repeat 100% -5%;
		background-size:40px 77px;
		display:block;
		height:77px;
		width:40px;
		position:absolute;
		top:-35px;
		right:0;
	}
.spot-box .head{
	background:#C8A554;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	padding:8px 12px;
	width:380px;
	position:absolute;
	top:0;
	left:0;
}
.spot-box.momiji{
	margin-bottom:44px;
}
.spot-box .spot-img{
	float:left;
}
.spot-box .text-box{
	float:right;
	position:relative;
	width:450px;
}
.spot-box .text-box .summary{
	font-size:16px;
	line-height:140%;
}
.spot-box .text-box img{
	position:absolute;
	top:73px;
	right:11px;
}
.spot-box .tel{
	font-size:18px;
	margin:0;
}
.spot-box .info{
	background:#E3D2A9;
	padding:8px 8px 6px;
}

.brewery.spot-box .text-box img{
	top:0px;
	right:0px;
	left:0;
}
.brewery.spot-box .text-box .summary{
	padding-left:205px;
}
.brewery.spot-box .text-box .tel{
	padding-left:241px;
}
.brewery.spot-box .text-box .tel{
	margin-bottom:16px;
}
.brewery.spot-box .text-box .tel:before{
	left:205px;
}
.brewery.spot-box .text-box .info + p{
	margin-bottom:16px;
}

.map{
	margin-bottom:52px;
	text-align:center;
}

.space{
	height:0;
}

.schedule-area{
	background:#F7F2E7;
}
.schedule-area .inner{
	padding:42px 0;
	position:relative;
	margin:0 auto;
	width:875px;
}
.schedule-area .head{
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
	.schedule-area .head + p{
		margin-bottom:24px;
		text-align:center;
	}
.schedule-area .float-obj{
	position:absolute;
	top:32px;
	right:50px;
}
.schedule-area table{
	border-collapse:collapse;
	margin-bottom:8px;
	width:100%;
}
.schedule-area table caption{
	background:#221815;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	margin-bottom:12px;
	padding:3px 0 2px;
	text-align:center;
}
.schedule-area th,
.schedule-area td{
	border:1px solid #221815;
	font-weight:bold;
	padding:12px;
	text-align:center;
}
.schedule-area table + p{
	margin-bottom:12px;
	text-align:center;
}
.schedule-area .reserve{
	background:#C8A554;
	color:#fff;
	font-size:15px;
	font-weight:bold;
	margin:0 auto;
	padding:4px 0 2px;
	text-align:center;
	width:450px;
}

.footer-link{
	margin:42px auto;
	width:500px;
}
.footer-link.link-btn a,
.footer-link.link-btn2 a{
	padding:24px;
}

.supplement{
	background:#E9E8E8;
	margin:0 auto 52px;
	padding:24px;
	width:640px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.supplement .head{
	background:#7B7472;
	color:#fff;
	font-weight:bold;
	margin-bottom:8px;
	padding:4px 0 3px;
	text-align:center;
}

footer{
	background:#F7F2E7;
	margin:0 auto;
	padding:42px 0;
}
footer .inner{
	margin:0 auto;
	width:980px;
}
footer p{
	text-align:center;
}
.address{
	margin:16px 0;
}
.copy{
	font-size:10px;
	text-align:center;
}

.to-top{
	position:fixed;
	bottom:50px;
	right:50px;
}

/****** mobile start ******************************************:*/
@media (max-width: 560px){

body{
	min-width:480px;
}

.logo {
    top: 8px;
    left: 8px;
    width: 120px;
	z-index:9;
}
.top-main {
    height: 278px;
}
.top-main .inner {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    width: 100%;
}
.catch{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-180px;
	width:420px;
}
.pass {
    position: absolute;
    bottom: -320px;
    right: 6px;
    width: 20%;
}

.pass-area{
	margin:0 auto;
	width:90%;
}
h1 {
    margin: 32px 0 24px;
}
h2 + p {
    font-size: 14px;
    margin-bottom: 12px;
}
.pass-img {
    margin-bottom:32px;
}

.tokuten-area {
    padding-top: 24px;
}
	
.areatitle {
	margin-bottom: 15px;	
	}

.areatitle img{
	width:50%;
}	
	
h3 {
    margin-bottom: 24px;
}
h3 img{
	width:45%;
}
.tokuten-detail {
    margin: 0 auto 32px;
    width: 90%;
}
.tokuten-detail .tokuten-img {
	border-top: 3px solid #E8380D;
    float: none;
}
.tokuten-detail .content {
    float: none;
    width: 100%;
}
.tokuten-detail .content .summary {
    border-top: 3px solid #E8380D;
	padding: 12px;
}
.tokuten-detail .content .shop-parents {
    font-size: 13px;
}
.tokuten-detail .content .shop-name {
    font-size: 18px;
}
.tokuten-detail .content .shop-pr {
    font-size: 13px;
    margin-top: 8px;
}
.tel {
    margin:0px;
}
.coupon {
    background-size: 80px 56px;
}
.daishouin.coupon p {
    font-size: 16px;
}

.okeiko-area {
    margin: 0 auto 32px;
    width: 90%;
}
h4 {
    left: -14px;
}
h4 img{
    width:80%;
}
.okeiko-area .inner {
    padding: 12px;
}
.okeiko-area .inner .left {
    float: none;
}
.okeiko-area .inner .left img {
    padding-top: 16px;
}
.okeiko-area .inner .left .detail {
    width: 90%;
}
.okeiko-area .inner .left .float-obj {
    top: -31px;
    right: 9px;
}
.okeiko-area .inner .right {
    float: none;
	margin-top:24px;
    width: 100%;
}
.okeiko-area .inner .right li img {
    width:45%
}
.okeiko-area .inner .right li .text-box {
    width: 50%;
}
.okeiko-area .inner .right li .text-box p {
    font-size: 13px;
}
.okeiko-area .inner .right li .text-box p + p {
    font-size: 13px;
}

.spot-area {
    margin: 0 auto 32px;
    width: 90%;
}
h5 {
    margin: 0 auto 24px;
}
h5 img{
	width:65%;
}
.spot-box .head {
    font-size: 16px;
    padding: 4px 12px;
    width: 280px;
}
.spot-box {
    padding: 45px 12px 12px;
}
.spot-box .spot-img {
    float: none;
	margin-bottom:12px;
}
.spot-box .text-box {
    float: none;
    width: 100%;
}
.spot-box .text-box .summary {
    font-size: 13px;
}
.spot-box .tel {
    margin: 6px 0;
}
.spot-box .text-box img {
    top: 58px;
    right: -6px;
}
.brewery.spot-box .text-box img {
	height:161px;
    width:161px;
}
.brewery.spot-box .text-box .summary {
    padding-left: 178px;
}
.brewery.spot-box .text-box .tel {
    padding-left: 214px;
    margin-bottom: 30px;
}
	.brewery.spot-box .text-box .tel:before {
		left: 178px;
	}
.brewery.spot-box .text-box .info + p {
	font-size:11px;
    margin-bottom: 12px;
}
.map {
    margin:0 auto 32px;
    width:90%;
}
	
.space{
	height: 50px;
}
	
.schedule-area .inner {
    padding: 24px 0;
    width: 90%;
}
.schedule-area .head {
    font-size: 16px;
}
.schedule-area .head + p {
    margin-bottom: 12px;
}
.schedule-area .float-obj {
    top: -85px;
    right: -8px;
}
.schedule-area table caption {
    font-size: 13px;
    margin-bottom: 8px;
}
.schedule-area th, .schedule-area td {
    padding: 6px;
}
.schedule-area .reserve {
    font-size: 13px;
    width: 100%;
}

.footer-link {
    margin: 24px auto;
    width: 90%;
}
.footer-link.link-btn2 a{
    float: none;
    font-size: 13px;
    width: 100%;
}
.footer-link.link-btn2 li:first-child a{
    margin-bottom:8px;
}

.supplement {
    margin: 0 auto 24px;
    padding: 12px;
    width: 85%;
}

footer {
    padding: 24px 0;
}
footer .inner {
    width: 90%;
}
.address {
    margin: 8px 0;
}

.to-top {
    bottom: 12px;
    right: 12px;
}
.to-top img{
	height:24px;
    width:24px;
}

}
/****** mobile end ******************************************:*/

/* ==============================================================================
///////////////////////////////////////////////////////////////////////////////// 
    animation
=================================================================================
============================================================================== */
.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:3.5s;
	-ms-animation-duration:3.5s;
	animation-duration:3.5s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-35px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-35px); -ms-transform: translateY(-35px); transform: translateY(-35px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInLeft {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1.5s;
	-ms-animation-duration:1.5s;
	animation-duration:1.5s;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-35px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-35px); -ms-transform: translateX(-35px); transform: translateX(-35px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}