@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, div {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', 'ヒラギノ明朝 Pro';
  letter-spacing: 2px;
}
img, iframe {
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
}
li {
  list-style: none;
}
/*------------------------------------------------nav-2-3-------------------------*/

.nav3{
	display:none;
	font-size:15px;
	font-weight:bold;
	border-radius:50px 0px 0px 50px;
	text-decoration:underline;
	line-height: 24px;
	position: fixed;
	bottom:10px;
	right:0px;
	color:white;
	background-color: #8D241C;
	padding:20px 30px;
	z-index: 999;
	transition:0.5s;
}
.nav3:hover{
}
.nav-2{
	display:none;
	font-size:15px;
	font-weight:bold;
	border-radius:50px 0px 0px 50px;
	/* text-decoration:underline; */
	line-height: 24px;
	position: fixed;
	bottom:80px;
	right:0px;
	color:white;
	background-color: rgba(63, 95, 64, 1);
	padding:20px 30px;
	z-index: 999;
	transition:0.5s;
}
.nav-2:hover{
	
	background-color: rgba(63, 95, 64, 1);
}
	
header .head-area{
    background-image: url(../img/main-img01.jpg);
    background-repeat: no-repeat;
	max-width: 100%;
	height: 100vh;
	 background-position: center center;
    background-size: cover;
    position: relative;
}
header .head-area .box p {
  color: #3f5f40;
  background-color: rgba(240, 230, 200, 0.85);
  border: 2px solid white;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  padding: 60px 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*-------------------------------スクロールダウン---------------------------*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  top: 92%;
  left: 50%;
}
/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: white;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ebd25;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 2.5s ease-in-out infinite, cirlemovehide 2.5s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:95px;}
     100%{bottom:-5px;}
 }
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }
/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 100px;
  background: white;
}
/*-------------------------------------------------------------------------PC表示でsp-telを消す-----------------------------------------------------------------*/
#sp-tel{
	display: none;
}
/*------------------------------------------------------------------------------------------------------*/
nav {
  z-index:999;
  position: sticky;
  top: 0;
  background-color: #8d241c;
}
nav ul{
	padding:0px 150px;
	height:80px;
	color:whitesmoke;
	display:flex;
	justify-content: space-around;
	align-items: center;
	margin:0 auto;
}
nav ul li a {
	  position: relative;
	  display: inline-block;
	  text-decoration: none;
}
nav ul li a::after {
	  position: absolute;
	  bottom: -4px;
	  left: 0;
	  content: '';
	  width: 100%;
	  height: 1px;
	  background: whitesmoke;
	  transform: scale(0, 1);
	  transform-origin: center top;
	  transition: transform .3s;
}
nav ul li a:hover::after {
	  transform: scale(1, 1);
}
/*---------------------右下固定配置---------------------------------------------------------*/
.nav2 {
  display: none;
  font-size: 13px;
  line-height: 24px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 3px 3px 0px 0px #8D241C;
  z-index: 999
}
/*------------------------------------------------------------------------------*/
.slide1 {
  float: left;
}
/*------footer------------------------------------*/
footer {
  text-align: center;
  color: #f1e6c8;
  background-color: #3f5f40;
  width: 100%;
  height: 550px;
}
footer p:first-child {
  padding-top: 50px;
}
footer p {
  padding: 15px 0px;
}
/*------menu----------------------------------------------------------------------------------------------*/
main {
  color: #3f5f40;
  background-color: #f1e6c8;
  overflow: hidden;
}
.menuinner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.menuinner h1 {
  font-size: 2.6rem;
  text-decoration: underline 2px;
  text-underline-offset: 0.1em;
  font-weight: normal;
  margin: 80px 0 30px;
}
.menuinner h4 {
  font-size: 2.4rem;
  text-decoration: underline 2px;
  text-underline-offset: 0.1em;
  font-weight: normal;
}
.menuinner h5 {
  font-size: 2.2rem;
  font-weight: normal;
  margin: 10px 0 30px;
}
.menuinner h6 {
  font-size: 1.8rem;
  font-weight: normal;
  text-decoration: underline 1px;
  text-underline-offset: 0.1em;
}
#menuinner .additionalfee{
  font-weight: bold;
  font-size: 1em;
}
.btndogmenu {
  text-align: right;
  margin-right: 9.5%;
  margin-bottom: 30px;
}
.menubox {
  display: flex;
  border: 2px solid #3f5f40;
  width: 80%;
  align-items: center;
  justify-content: center;
  gap: 5%;
  position: relative;
  margin: 0px auto 50px;
  padding: 30px 0px;
}
.menubox .menutext {
  width: 40%;
  text-align: center;
}
.menubox .menutext p, .text {
  font-size: 23px;
}
.menubox .more {
  position: absolute;
  width: 34%;
  height: 70px;
  background-color: #3f5f40;
  right: -3%;
  bottom: -3%;
  cursor: pointer;
}
.menubox .more p {
  font-size: 1.6rem;
  color: #FFF;
  text-align: center;
  line-height: 70px;
}
.menu_open {
  margin-bottom: 75px;
}
.menu_open li {
  padding-top: 20px;
}
#menuinner .shareprice {
  font-size: 25px;
}
/*=============================================
.accordion
================================================*/
#menuinner .accordion-area .menubox {
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}
.menuinner .accordion-area .more:hover {
  background-color: #507852;
}
.menuinner .accordion-area .menubox .more {
  box-sizing: border-box;
  transform-origin: center center;
  transition-duration: 0.1s;
}
.menuinner .accordion-area .menubox .more .one_i {
  background-color: aqua;
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.menuinner .accordion-area .menubox .more .one_i:before, .menuinner .accordion-area .menubox .more .one_i:after {
  display: flex;
  content: '';
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
}
.menuinner .accordion-area .menubox .more .one_i:before {
  content: none;
}
.menuinner .accordion-area .menubox .txt_a_ac {
  margin: 0;
}
.menuinner .accordion-area .menu_open {
  display: none;
  padding: 5px 0px;
  /*border:2px solid #db0f2f;*/
  box-sizing: border-box;
}
.menuinner .accordion-area .menubox.open .boxopen:before {
  content: "close－";
}
.menuinner .accordion-area .menubox .boxopen:before {
  content: "more＋";
}
/*---------------------------------------
  ------------menusec1(lunch)------------*/
#menusec1 .subbox {
  border: 2px solid #3f5f40;
  width: 70%;
  padding: 40px 0;
  margin: 20px auto;
}
#menusec1 ul {
  margin-bottom: 90px;
}
#menusec1 .sharemenu ul {
  margin-bottom: 30px;
}
#menusec1 li {
  padding-top: 10px;
}
#menusec1 .choice {
  font-size: 1.3rem;
}
#menusec1 span {
  font-size: 28px;
}
#menusec1 .holidaylunch {
  margin-bottom: 100px;
}
#menusec1 .subbox .setmenu {
  font-size: 2.2rem;
}
.subbox .chushaku {
  padding-bottom: 20px;
}
.chushaku2 {
  padding-top: 30px;
}
#menusec1 .sharemenu h5 {
  padding-top: 50px;
}
#menusec1 .sharemenu ul {
  padding-bottom: 0px;
}
/*---------------------------------------
  ------------menusec2(dinner)------------*/
#menusec2 .dinnermenu {
  display: flex;
  justify-content: center;
  gap: 1%;
  max-width: 100%;
  flex-wrap: wrap;
}
#menusec2 .dinnerside {
  margin: 70px 0;
}
#menusec2 .sharemenu li {
  padding-top: 10px;
}
/*---------------------------------------
  ------------menusec3(drink)------------*/
#menusec3 .drinkcontent {
  display: flex;
  justify-content: center;
  text-align: left;
  gap: 10%;
}
#menusec3 li {
  line-height: 20%;
}
.drink_menu {
  padding-bottom: 60px;
}
/*---------------------------------------
  ------------menusec4(dessert)------------*/
#menusec4 h6 {
  padding-top: 70px;
}
/*---------------------------------------
  ------------menusec5(course)------------*/
#menusec5 h5 {
  text-decoration: underline 1px;
  text-underline-offset: 0.1em;
  margin-bottom: 0px;
}
#menusec5 .price {
  padding: 20px 0;
  font-size: 25px;
}
#menusec5 .tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  max-width: 90%;
  margin: 0 auto;
}
/*タブのスタイル*/
#menusec5 .tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #8d241c;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
#menusec5 .tab_item:hover {
  opacity: 0.75;
}
/*ラジオボタンを全て消す*/
#menusec5 input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
#menusec5 .tab_content {
  display: none;
  padding: 10px 0px 0;
  clear: both;
  overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#Miniature:checked ~ #Miniature_content, #Standard:checked ~ #Standard_content, #Giant:checked ~ #Giant_content {
  display: block;
}
/*選択されているタブのスタイルを変える*/
#menusec5 .tabs input:checked + .tab_item {
  background-color: #8d241c;
  color: #fff;
}
/*---------------------------------------
  ------------menusec6(takeout)------------*/
#menusec6 .menutext p {
  padding-top: 20px;
}
#menusec6 .menutext p:hover {
  opacity: 0.8;
}
/*-------(max-width: 730px)--------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 730px) {
nav ul{
	font-size: 15px;
 	padding:0px;
	gap:20px;
}
/*-------***menu***(max-width: 730px)--------------------------------------------------------------------------------------------------------------------*/
#menuinner img {
    max-width: 90%;
    height: auto;
}
#menuinner {
    width: calc(100% - 40px);
}
.menubox {
    flex-direction: column-reverse;
    padding-bottom: 20px;
}
.menubox .menutext {
    width: 100%;
    margin-bottom: 10px;
}
.menubox h4 {
    font-size: 2rem;
}
#menuinner .shareprice {
    font-size: 20px;
}
#menusec1 span {
    font-size: 20px;
}
#menusec1 .subbox {
    width: 100%;
}
#menusec2 .dinnermenu img {
    margin-bottom: 10px;
}
#menusec3 .drinkcontent {
    flex-wrap: wrap;
    text-align: center;
}
#menusec6 .menutext {
    width: 100%;
}
.menubox .menutext p, .text {
    font-size: 1rem;
}
}
/*-----------(max-width: 640px)-----------------------------------------------------------*/
/*--------------------------------------media---------------------------------*/
@media screen and (max-width: 640px) {
.head-area .box{
	height: 100vh;
	width: 100%;
}
.box{
	margin-top: 50px;
}
.box img{
	height: 100vh;
}
boby{
	font-size:15px;
}
.nav2{
	/*display:none!important;*/
}
.nav2 p:first-child{
	display:none!important;
}
.scrolldown2{
		display: none;
}
/*------------------------------------------------------nav-------------------------------------------------------*/
#nav-toggle {
    position: fixed;
    z-index: 9999; /*ボタンを最前面に*/
    top: 5px;
    right: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/*×に変化*/
#nav-toggle span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #FFFFFF;
    width: 45%;
}
#nav-toggle span:nth-of-type(1) {
    top: 15px;
}
#nav-toggle span:nth-of-type(2) {
    top: 23px;
}
#nav-toggle span:nth-of-type(3) {
    top: 31px;
}
#nav-toggle.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
#nav-toggle.active span:nth-of-type(2) {
    opacity: 0;
}
#nav-toggle.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
    /*
メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく
*/
nav {
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh; /*ナビの高さ*/
    background: #8d241c;
    /*動き*/
    transition: all 0.6s;
    opacity: 0.8;
}
.sectiontext {
    text-align: center;
    margin: 0 auto 40px;
}
nav.panelactive {
    right: 0;
}
nav ul {
    width: 70%;
    color: #FFFFFF;
    display: flex;
	flex-wrap: wrap;
    margin: 100px auto 0;
    text-align: center;
    }
nav li {
    margin: 20px;
}
.spnav-bg {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #8d241c;
}
/*---------------------------------------------------------------------------------------sp-telを表示---------------------------------------*/
#sp-tel{
	width: 200px;
	display: block;
	color: #FFFFFF;
	margin: 50px auto;
	}
/*-------***menu***(max-width: 640px)--------------------------------------------------------------------------------------------------------------------*/
#menuinner .menubox .menutext .text span {
    font-size: 14px;
}
#menuinner li{
    font-size:0.9rem;
}
#menuinner h5, #menusec1 .subbox .setmenu {
    font-size: 1.65rem;
}
#menuinner h6 {
    font-size: 1.4rem;
}
#menuinner .menubox {
    width: 100%;
}
.menubox .more {
    height: 55px;
}
.menubox .more p {
    font-size: 1.4rem;
    line-height: 55px;
}
#menuinner .btndogmenu {
    margin-right: 0px;
    margin-bottom: 20px;
}
#menuinner #menusec1 .chushaku, #menuinner .chushaku2 {
    font-size: 0.8rem;
    word-break: keep-all;
}
#menusec1 .weekdaylunch li, #menusec1 .holidaylunch li {
    font-size: 0.65rem;
}
#menusec1 .weekdaylunch .choice, #menusec1 .holidaylunch .choice {
    font-size: 0.8rem;
}
#menusec1 h5 span {
    word-break: keep-all;
}
#menusec1 ul {
    margin-bottom: 60px;
}
#menusec1 .subbox p {
    font-size: 11px;
    word-break: keep-all;
}
#menusec2 .dinnermenu {
    width: 90%;
    margin: 0 auto;
    gap: 0.5%;
}
#menusec2 .dinnermenu img {
    width: 40vw;
}
#menusec3 .drink_menu {
    padding-bottom: 40px;
}
#menusec4 h6 {
    padding-top: 50px;
}
#menusec4 #menusec5.tab_item {
    font-size: 0.8rem;
}
#menusec5 h5 {
    margin-top: 30px;
}
#menusec5 .price {
    padding: 10px 0;
    font-size: 22px;
}
    
/*--------------------------------------------ここまで-------------------------------------*/
@media screen and (min-width:601px) {
    /*slideToggle()でinlinestleseatを使ってdispley:noneをつけてしまうため、一回メニューを開いて閉じてから画面を大きくするとPC用のメニューまで消えてしまうので、その対策として以下をつける。
	@mediaで601px以上の時という定義を忘れないようにする。*/
nav ul {}
      /*後ろに!importantをつけると優先順位を無視して一番優先順位を高くできる*/
    }