body{ margin:0;}
.clear{ clear:both; height:0;}
.center{ text-align:center;}
img{ border:0; vertical-align:bottom;}
ul{ margin:0; padding:0; list-style:none;}
p{ margin:0; }

#container{ width: 100%; min-width: 980px; margin: 0 auto; font-family: "貂ｸ譏取悃菴�", "Yu Mincho", YuMincho, "繝偵Λ繧ｮ繝取�取悃 Pro", "Hiragino Mincho Pro", "MS P譏取悃", "MS PMincho", serif; color: #1A1A1A; letter-spacing: 2px; font-size: 18px; line-height: 160%;  height: 100%;}

.main{ width: 100%; height: 100vh; background: url("../img/common/img_main.jpg") no-repeat; background-size: cover;}
.main h1{ margin: 0; text-align: center; padding-top: 100px;}
.main h1 img{ width: 480px;}

/*--- mv ---*/
/*#container .movie{ display: block; position: relative;}
#container .movie #mainImg{ display: block; position: absolute; z-index: 1; opacity: 0; transition: all 2s;}
#container .movie #mainImg.active{ opacity: 1; position: relative;}
#container .movie #mainImg .main{ width: 100%; height: 100vh; background: url("../img/common/img_main.jpg") no-repeat; background-size: cover;}
#container .movie #mainImg .main h1{ margin: 0; text-align: center; padding-top: 100px;}
#container .movie #mainImg .main h1 img{ width: 480px;}
#container .movie #mainMovie{ width: 100%; position: relative; z-index: 2;}
#container .movie #mainMovie #mainMovieItem{ width: 100%;}*/
/*#container .movie #mainImg img{ width: 100%; display: block;}*/

.inner{ width: 980px; margin: 0 auto;}
.bgBlue{ background: #E8F1F8; background-image: linear-gradient( -25deg, #ffffff   0%, #ffffff  50%,#E8F1F8  50%, #E8F1F8 100% );background-position: left bottom;background-size: 2000px 1000px;background-repeat: no-repeat;}
.bgBlueInnerTop{ background-image: linear-gradient( 155deg, #ffffff   0%, #ffffff  50%,#E8F1F8  50%, #E8F1F8 100% );background-position: left -270px;background-size: 2000px 1000px;
background-repeat: no-repeat; /*padding-top: 100px; infoがある場合アクティブに変更*/ }
.bgBlueInnerBtm{background-image: linear-gradient( 155deg,#ffffff   0%, #ffffff  50%,#E8F1F8  50%, #E8F1F8 100% );background-position: left top;background-size: 2000px 1000px;
background-repeat: no-repeat;}

.info{ border: #e50012 solid 1px; box-sizing: border-box; padding: 20px; margin: 0;}
.info p{ font-size: 16px; font-weight: normal; text-align: left; color: #e50012;}

.topLink{ padding-top: 100px; margin-bottom: 100px;}
.topLink ul::after{ content:""; display:block; clear:both;}
.topLink li{ width: 490px; float: left; text-align: center;}
.topLink li a{ display: block;}
.topLink li img{ width: 290px; padding-top: 295px;}
.topLink li:hover{ opacity:0.7; filter:alpha(opacity=70); transition: all  0.3s ease;}
.topLink li.gv{ background: url(../img/common/img_navi_granview01.jpg) no-repeat; background-size: 490px;}
.topLink li.rb{ background: url(../img/common/img_navi_rbox01.jpg) no-repeat; background-size: 490px;}

h2#GRANVIEW{ margin: 0 0 100px; text-align: center; font-weight: normal;}
h2#GRANVIEW img{ width: 280px;}
h2#GRANVIEW span{ display: block; margin-top: 50px; font-size: 24px;}
.terrace{ position: relative; margin-bottom: 100px;}
.terraceImg{}
.terraceWrap{ position: absolute; top: 170px; right: 0; z-index: 10;}
.terraceWrap img{ width: 400px;}

.interior{ position: relative; margin-bottom: 220px;}
.interiorImg{}
.interiorWrap{ position: absolute; top: 290px; left: 110px; z-index: 10;}
.interiorWrap img{ width: 410px;}

.food{ position: relative; margin-bottom: 80px;}
.foodImg{}
.foodWrap{ position: absolute; top: -90px; right: 120px; z-index: 10;}
.foodWrap img{ width: 370px;}

h3.menu{ font-size: 34px; font-weight: normal; text-align: center;}
.wrapAccordion{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 80px; overflow: hidden;}
/*.wrapAccordion:nth-child(even)::after{ content: ""; display: block; clear: both;}*/
.wrapAccordion .accordionWrap{/* float: left;*/ margin: 60px 60px 0 0;}
.wrapAccordion .accordionWrap:nth-child(even),
.wrapAccordion .accordionWrap:last-child{ margin-right: 0;}
.wrapAccordion .accordion{ width: 460px; border: solid 1px #DAE9F4; background: #FFF; box-sizing: border-box; margin: 0;}
.wrapAccordion .accordionW{ width: 980px;}

.accordion.W580{ width: 580px; border: solid 1px #DAE9F4; background: #FFF; box-sizing: border-box; margin: 0 auto!important;}
.accordion.W580 .submenu .menu-img-area{ width: 600px; padding: 20px 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.accordion.W580 .submenu .w-href{ width: 160px; margin-right: 20px;}
.accordion.W580 .submenu .w-href:nth-child(2n){ width: 340px; margin-right: 0;}

.accordion .submenuheader{ display: flex; min-height: 100px; color: #1A1A1A; text-align: center; text-decoration: none; padding: 20px 30px 20px 10px; position: relative; font-size: 22px; align-items: center; box-sizing: border-box; justify-content: center;}
.accordion .submenuheader::after{ content: ""; display: block; border-right: 2px solid #1A1A1A; border-top: 2px solid #1A1A1A; transform: rotate(135deg); position: absolute; right: 30px; top: calc(50% - 10px); width: 12px; height: 12px; transition: all 0.5s; }
.accordion .submenuheader.active::after{ transform: rotate(-45deg); top: calc(50% - 4px);}
.accordion .submenu{ display: none; margin: 0; padding-bottom: 20px;}
.accordion .submenuheader.imgVer{ display: flex; flex-direction: row-reverse; padding: 0 30px 0 0; font-size: 22px; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.accordion .submenuheader.imgVer .img{ width: 150px; height: 100px;}
.accordion .submenuheader.imgVer .img img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.accordion .submenuheader.imgVer .text{ width: calc(100% - 150px); text-align: center;}

.accordion .submenu .menu-img-area{ width: 460px; padding: 20px 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
.accordion .submenu .menu-img-area.border-none{ border-bottom: #1A1A1A solid 1px;}
.accordion .submenu .menu-img-area::after{ content: ""; display: block; clear: both;}
.accordion .submenu .w-href{ width: 160px; margin-right: 20px;}
.accordion .submenu .w-href:nth-child(2n){ width: 220px; margin-right: 0;}
.accordion .submenu .menu-image{ width: 160px;}
.accordion .submenu .menu-image img{ width: 100%;}
.accordion .submenu .menu-price{ width: 100%; padding: 0;}
.accordion .submenu .menu-price::after{ content: ""; display: block; clear: both;}
.accordion .submenu .menu-price .price{ float: right;}
.accordion .submenu .cat-ttl{ padding: 50px 30px 0; font-size: 20px;}
.accordion .submenu .cat-ttl::before{ content: "\3007";}

.accordion .submenu .basic-price-area{ padding-bottom: 30px; border-bottom: #1A1A1A solid 3px; width: 400px; margin: 20px auto 0;}
.accordion .submenu .basic-price-area dl{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 10px; box-sizing: border-box; font-size: 20px; margin-bottom: 10px;}
.accordion .submenu .basic-price-area dl:last-child{ margin-bottom: 0;}
.accordion .submenu .basic-price-area dl dt{ text-align: left;}
.accordion .submenu .basic-price-area dl dd{ text-align: right;}
.accordion .submenu .basic-price-area dl dt span,
.accordion .submenu .basic-price-area dl dd span{ font-size: 16px;}

.accordion .submenu table{ width: 400px; margin: 30px auto 0;}
.accordion .submenu table th{ font-weight: normal; text-align: left; width: 80%; border-bottom: #1A1A1A solid 1px; padding: 10px;}
.accordion .submenu table th.w75{ width: 75% !important; padding: 10px !important;}
.accordion .submenu table th.w65{ width: 65% !important; padding: 10px !important;}
.accordion .submenu table th.w50{ width: 50% !important; padding: 10px 0 !important;}
.accordion .submenu table th.w45{ width: 45% !important; padding: 10px 0 10px 5% !important;}
.accordion .submenu table th span{ display: inline-block;}
.accordion .submenu table td{ border-bottom: #1A1A1A solid 1px; padding: 10px; text-align: right;}
.accordion .submenu .cau{ margin: 10px 30px 0 0; font-size: 14px; text-align: right;}

.drinkArea::after{ content: ""; display: block; clear: both;}
.drinkAreaL{ width: 470px; float: left;}
.drinkAreaR{ width: 470px; float: right;}

.bgWhite{ width: 100%; position: relative;}
/*.bgWhiteInner::before{ content: ""; background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #FFF 50.00000000001%) no-repeat bottom right/100% 100%; bottom: -1px; right: 0; width: 100%; height: 700px; display: block; margin-top: -700px; z-index: -1;}
.bgWhiteInner::after{ content: ""; position: absolute; background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #FFF 50.00000000001%) no-repeat bottom right/100% 100%; bottom: 695px; right: 0; width: 100%; height: 700px; display: block; z-index: -1;}
.bgWhiteInner::after{ content: ""; position: absolute; background: linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #E8F1F8 50.00000000001%) no-repeat bottom right/100% 100%; bottom: -1px; right: 0; width: 100%; height: 700px; display: block; z-index: -1;}*/

.outline{ border: #1A1A1A solid 1px; box-sizing: border-box; padding: 60px; margin-bottom: 120px;}
.outline h4{ font-size: 34px; margin: 0 0 50px; font-weight: normal; text-align: center;}
.outline table{ width: 100%; border-top: #1A1A1A solid 1px;}
.outline table th{ width: 90px; font-weight: normal; border-bottom: #1A1A1A solid 1px;}
.outline table td{ padding: 20px 70px; border-bottom: #1A1A1A solid 1px;}
.outline table td span{ font-size: 14px;}
.outline ul li{ margin-top: 50px;}
.outline ul li span{ background: #4D4D4D; display: inline-block; padding: 4px 10px; color: #FFF; margin-bottom: 5px;}
.outline ul li a{ color: #1A1A1A; text-decoration: none; background: url("../img/common/arrow.png") no-repeat right center; background-size: 25px; padding-right: 30px; transition: all 0.6s;}
.outline ul li a:hover{ padding-right: 40px; text-decoration: underline; transition: all 0.6s;}

h2#R-BOX{ margin: 0 0 100px; text-align: center; font-weight: normal;}
h2#R-BOX img{ width: 160px;}
h2#R-BOX span{ display: block; padding-top: 20px; font-size: 34px;}
h2#R-BOX span:before{ background: #1A1A1A; content: ''; display: block; height: 1px; margin: 0 auto 20px; width: 100px}
p.rboxLead{ font-size: 24px; text-align: center; margin-bottom: 50px;}

.rbox{ margin-bottom: 120px;}
.rboxImg{ text-align: center;}
.rboxImg3{ margin-top: 50px;}

.app{ position: relative; margin-bottom: 100px;}
.app h3{ font-size: 34px; font-weight: normal; text-align: center; margin: 0 0 100px;}
.appImg{}
.appWrap{ position: absolute; top: 90px; left: 50px; z-index: 10;}
.appWrap img{ width: 450px;}

p.note{ font-size: 12px; line-height: 140%; margin-bottom: 30px; letter-spacing: normal;}

h3.access{ font-size: 34px; font-weight: normal; text-align: center;}
.mb120{ margin-bottom: 120px;}

/* animation
------------------------------------------------*/
.list-mv{
	opacity: 0;
	transform: translate(0,60px); 
	transform: -webkit-translate(0,60px);
}
.mv{
	opacity: 1.0;
	transform: translate(0,0); 
	transform: -webkit-translate(0,0);
	transition: .8s;
}


.pc{ display:inherit;}
.sp{ display:none;}
.fs80{ font-size: 80% !important;}
.fs70{ font-size: 70% !important;}
.point-color{ color: #FFF; background: #68bcbc; padding: 2px 5px 1px 7px; display: inline-block;}