@charset "UTF-8";
/* CSS Document */
.mainArea {
	overflow: hidden;
	position: relative;
	background-image: url(../img/top/main.jpg);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}
.mainArea:before,
.mainArea:after {
  animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}

.mainArea:before {
  animation-name: mainArea-before;
  left: 0;
  right: 50%;
}

.mainArea:after {
  animation-name: mainArea-after;
  left: 50%;
  right: 0;
}

@keyframes mainArea-before {
  100% {
    transform: translateY(100%);
  }
}

@keyframes mainArea-after {
  100% {
    transform: translateY(-100%);
  }
}

.mainArea .inner {
	text-align: center;
	padding-top: 21vw;
}
.mainArea .inner .mainTtl,
.mainArea .inner .subTtl {
	color: #fff;
	text-shadow: #325461 1px 1px 10px, 
				 #325461 -1px 1px 10px, 
				 #325461 1px -1px 10px, 
				 #325461 -1px -1px 10px;
}
.mainArea .inner .mainTtl {
	font-size: 48px;
}
.mainArea .inner .subTtl {
	font-size: 38px;
	font-weight: bold;
}
.newsArea .inner {
	padding: 80px 30px 20px;
	overflow: hidden;
}
.newsArea .inner .schedule,
.newsArea .inner .news
{
	float: left;
	width: 44%;
}





.newsArea .legumesticket {
	text-align: center;
	padding: 20px 0 0;
}
.newsArea .legumesticket a {
	display: block;
}
.newsArea .legumesticket a:hover {
	opacity: .7;
}

.newsArea .inner .schedule {
	margin-right: 3%;
}
.newsArea .inner .schedule .txtArea {
	padding: 20px 20px 20px;
}
.newsArea .inner .schedule .txtArea .ttl {
	padding-bottom: 10px;
}
.newsArea .inner .schedule .txtArea .txt {
	padding-bottom: 5px;
}
.newsArea .inner .news {
	margin-left: 3%;
}
.newsArea .inner dl {
	margin-top: 20px;
	margin-left: 20px;
	border-bottom: 1px dotted #ccc;
}
.newsArea .inner dl dt,
.newsArea .inner dl dd {
	padding-bottom: 5px;
}
.newsArea .inner dl dd a {
	color: #444;
}
.newsArea .inner dl dd a:hover {
	color: #50B0DA;
}
.newsArea .inner .schedule h3,
.newsArea .inner .news h3,
.newsArea .reservation .inner h3{
	font-size: 25px;
	font-weight: bold;
	color: #50B0DA;
	position: relative;
}
.newsArea .inner .schedule h3:after,
.newsArea .inner .news h3:after {
	content: "";
    left: 28%;
    height: 3px;
    position: absolute;
    top: 50%;
    background-color: #50B0DA;
}
.newsArea .reservation .inner h3:after{
	content: "";
	right: 0;
	height: 3px;
	position: absolute;
	top: 50%;
	background-color: #50B0DA;
	width: 83%;
}



.newsArea .inner .schedule h3:after {
    width: 70%;
	left: 30%;
}
.newsArea .inner .news h3:after {
    width: 80%;
    left: 20%;
}
.newsArea .reservation .inner  {
    padding: 30px 0;
}
.newsArea .inner .news .btn01 {
    margin-top: 30px;
}
.newsArea .inner .news .wrapBtn {
    text-align: right;
}
p.taberogu{
	display: inline-block;
}
.taberogu img{
	width:200px;
}
.taberogu img{
	border: 1px solid #ccc;
	padding:6px;
}
.taberogu:hover{
	opacity: 0.7;
}
.taberogu a{
		display: block;
}
.reservation p{
	margin-left: 10px;
}
/*ここまで*/
.topBox .inner {
	padding: 50px 0;
}
.topBox .inner .menu,
.topBox .inner .party {
	overflow: hidden;
}
.topBox .inner .menu .right,
.topBox .inner .party .right {
    float: right;
	width: 50%;
}
.topBox .inner .menu .left,
.topBox .inner .party .left {
    float: left;
	width: 50%;
}
.topBox .inner .menu .right,
.topBox .inner .party .left {
	padding: 44px;
}
.topBox .inner .menu .right h3,
.topBox .inner .party .left h3 {
	font-size: 35px;
	color: #333;
}
.topBox .inner .menu .right .ttl,
.topBox .inner .party .left .ttl {
	padding-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}
.topBox .inner .menu .right .txt,
.topBox .inner .party .left .txt {
	min-height: 150px;
	padding: 20px;
}
.topBox .inner .menu .right .btn02,
.topBox .inner .party .left .btn02 {
	margin-top: 15px;
	margin-left: 340px;
}
.imgArea {
	margin: 80px 0;
	height: 450px;
}
.slide01,
.slide02,
.slide03,
.slide04 {
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
	background-position: center center;
	height: 450px;
}
.slide01 {
	background-image: url(../img/top/img01.jpg);
}
.slide02 {
	background-image: url(../img/top/img02.jpg);
}
.slide03 {
	background-image: url(../img/top/img03.jpg);
}
.slide04 {
	background-image: url(../img/top/img04.jpg);
}
.slide05 {
	background-image: url(../img/top/img05.jpg);
}
.contactArea {
	margin: -160px;
	padding-bottom: 120px;
    position: relative;
    z-index: 2;
}
.contactArea .inner {
	padding: 50px 0;
	text-align: center;
	background-color: rgba(255,255,255,.9);
}
.contactArea .inner .contact p {
	padding-bottom: 50px;
	font-size: 18px;
	font-weight: bold;
	line-height: 2.2;
}
.mainImageArea .inner {
	text-align: center;
	padding-top: 320px;
}
.mainImageArea .inner .catchBox {
	width: 690px;
	margin: 0 auto;
	color: #FFF;
}
.mainImageArea .inner .catchBox span {
	font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.05em;
}
.bnrArea {
	text-align: center;
	margin: 20px auto;
}
.bnrArea a {
	display: block;
}
.bnrArea a:hover img {
	opacity: .7;
}
.aboutArea {
	margin-top: -90px;
	padding-bottom: 30px;
	text-align: center;
	background-image: url(../img/top/aboutAreaBg.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}
.aboutArea .inner ul {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	padding-bottom: 40px;
}
.aboutArea .inner ul li {
	width: 30%;
	float: left;
	margin-left: 3%;
}
.aboutArea .inner ul li:first-child {
	margin-top: 50px;
}
.aboutArea .inner ul li:last-child {
	margin-top: 100px;
}
.aboutArea .inner ul li a {
	width: 100%;
}
.aboutArea .inner ul li a img:hover {
	-moz-transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	opacity: 0.8;
}
.aboutTxtArea {
	text-align: center;
	background-image: url(../img/top/aboutTxtAreaBg.png);
	background-position: top left;
	background-repeat: no-repeat;
}
.aboutTxtArea .inner {
	padding: 35px 0 100px 20%;
}
.aboutTxtArea h2 {
	margin-bottom: 40px;
}
.aboutTxtArea p {
	margin-bottom: 60px;
}

.goodsArea h3 {
	padding: 10px 0;
	font-size: 25px;
	font-weight: bold;
	color: #FFF;
}
.swiper-container {
	padding-bottom: 20px;
}
.swiper-slide a:hover img {
	opacity: 0.7;
}

/*btn　OK*/
.btn {
	display: inline-block;
}
.btn a {
	display: block;
	padding: 8px 50px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #333;
}
.border {
    position: relative;
    z-index: 1;
    border: 1px solid #FFF;
	box-sizing: border-box;
}
.border::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: -1;
	box-sizing: border-box;
}
.border a {
    display: block;
}
.border a:hover {
	margin-top: 4px;
	margin-bottom: -4px;
	margin-left: 4px;
	margin-right: -4px;
	color: #FFF;
}
.btn01 a {
	border: 1px solid #50B0DA;
}
.border01:before {
    border: 1px solid #50B0DA;
}
.border01 a:hover {
	color: #FFF;
	background-color: #50B0DA;
}
.btn02 a {
	border: 1px solid #333;
}
.border02:before {
    border: 1px solid #333;
}
.border02 a:hover {
	border: 1px solid #50B0D9;
	background-color: #50B0D9;
}
.btn03 a {
	border: 1px solid #333;
	padding: 15px 200px;
}
.border03:before {
    border: 1px solid #333;
}
.border03 a:hover {
	background-color: #333;
}








@media screen and (max-width: 736px) {
	header h1 {
		width: 80%;
		height:  inherit;
		margin: 5px;
	}
	header h1 img {
		width: 100%;
	}
	.mainArea {
		background-image: url(../img/top/main_sp.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;

	}
	.mainArea .inner {
		padding-top: 50vw;
	}
	.mainArea .inner .mainTtl {
		font-size: 9vw;
		line-height: 1.2;
	}
	.mainArea .inner .subTtl {
		padding-top: 3vh;
		font-size: 5vw;
	}
	.newsArea .inner {
		padding: 50px 8vw 30px;
	}
	.newsArea .inner .schedule,
	.newsArea .inner .news {
		float: none;
		width: 100%;
	}
	.newsArea .inner .schedule {
		margin-right: 0;
	}
	.newsArea .inner .schedule .txtArea {
		padding: 20px 3vw 50px;
	}
	.newsArea .inner .schedule .txtArea .ttl {
		padding-bottom: 10px;
	}
	.newsArea .inner .schedule .txtArea .txt {
		padding-bottom: 5px;
	}
	.newsArea .inner .news {
		margin-left: 0;
	}
	.newsArea .inner dl {
		margin: 20px 3vw 0;
	}
	.newsArea .inner dl dt,
	.newsArea .inner dl dd {
		padding-bottom: 5px;
	}
	.newsArea .inner .schedule h3,
	.newsArea .inner .news h3,
	.newsArea .reservation .inner h3{
		font-size: 5vw;
	}
	.newsArea .inner .schedule h3:after,
	.newsArea .inner .news h3:after,
	.newsArea .reservation .inner h3:after {
		top: 46%;
	}
	.newsArea .inner .schedule h3:after {
		width: 65%;
		left: 35%;
	}
	.newsArea .inner .news h3:after {
		width: 75%;
		left: 25%;
	}
	.newsArea .reservation .inner h3:after {
   	    width: 52%;
        left: 46%;
	}
	p.taberogu{
		display: inline-block;
	}
	.taberogu img{
	width:130px;
    }
.newsArea .legumesticket .inner {
    padding: 0 5vw;
}
	
	.newsArea .reservation .inner {
	    padding: 40px 5vw 0;
}

.newsArea .inner .news .btn01 {
    margin-top: 30px;
	padding-bottom: 0;
}
.newsArea .inner .news .wrapBtn {
	text-align: center;
}
	.topBox .inner {
		padding: 0 5vw;
	}
	.topBox .inner .menu, 
	.topBox .inner .party {
		padding-bottom: 20px;
	}
	.topBox .inner .menu .right,
	.topBox .inner .party .right {
		float: none;
		width: 100%;
	}
	.topBox .inner .menu .left,
	.topBox .inner .party .left {
		float: none;
		width: 100%;
	}
	.topBox .inner .menu .right,
	.topBox .inner .party .left {
		padding: 65px 3vw 30px;
	}
	.topBox .inner .menu .right h3,
	.topBox .inner .party .left h3 {
		font-size: 28px;
		line-height: 1.3;
	}
	.topBox .inner .menu .right .ttl,
	.topBox .inner .party .left .ttl {
		font-size: 3vw;
	}
	.topBox .inner .menu .right .txt,
	.topBox .inner .party .left .txt {
		min-height: inherit;
		padding: 0;
	}
	.topBox .inner .menu .left .img,
	.topBox .inner .party .right .img {
		padding: 0 3vw;
		margin: 0 auto;
	}
	
	.topBox .inner .menu .right .btn02,
	.topBox .inner .party .left .btn02 {
		margin-top: 15px;
		margin-left: 0;
	}
	.topBox .inner .menu .right .wrapBtn,
	.topBox .inner .party .left .wrapBtn {
		text-align: right;
		margin-right: 10px;
	}
	.imgArea {
		margin: 50px 0 80px;
		height: 220px;
		}
	.slide01,
	.slide02,
	.slide03,
	.slide04 {
		background-repeat: no-repeat;
		background-size: 200%;
		height: 220px;
	}
	.contactArea {
		margin: -123px;
		padding-bottom: 63px;
	}
	.contactArea .inner {
		padding: 25px 0;
	}
	.contactArea .inner .contact p {
		padding-bottom: 25px;
		font-size: 3vw;
		line-height: 2;
	}
/*btn　OK*/
	.btn a {
		padding: 6px 50px;
		font-size: 13px;	
	}
	.bnrArea {
		margin: 20px auto 10px;
		padding: 0 5vw;
	}

	
}