@charset "UTF-8";

body{
     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
     font-size: 14px;
     padding:0;
     margin:0;
     color: #333333;
     background-color: #ffffff;
     text-align: center;

}

img {
     border: none;
}

p{
  margin:0;
  padding:0;
  text-align:left;
}

table{
      border-collapse:collapse;     
}

.clearfloat {
             clear: both;
             margin:0;
             padding:0;
}

/*---------- header ----------*/

#header {
        
         width: 100%;
         height: 0;
         margin:0;
         padding:0;
         text-align: left;
}

/*---------- ナビゲーション ----------*/

ul.navi {
	  overflow: hidden;
	  margin: 0;
	  padding: 0;
	  list-style-type: none;
	  background-color: #ffffff;
}

ul.navi li {
	     float: left;
}

ul.navi li a {
	       display: block;
              margin:0;
	       padding: 14px 16px;
	       text-align: center;
	       text-decoration: none;
	       color: #333333;
}

ul.navi li a:hover:not(.active) {
	                          background-color: #c7b19c;
}

ul.navi li a.active {
	              background-color: #000000;
                     color: #ffffff;
}
ul.navi li.right {
	           float: left;
}

@media screen and (max-width: 767px) {

ul.navi li.right, ul.topnav li {
		                  float: left;
}
}

/*---------- ページトップ ----------*/

#page_top {
           position: fixed;
           bottom: 30px;
           right: 20px;
}

#page_top a {
             background-color: #999;
             color: #fff;
             text-align: center;
             text-decoration: none;
             padding: 20px 20px;
}

#page_top a:hover {
                   background-color: #666;
                   text-decoration: none;
}

/*---------- Backボタンの設定 ----------*/

.back{
      max-width:100%;
      margin:1em 0 1em 0;
      text-align: center;
}

.back a{
        text-decoration: none;
}

@media (max-width: 767px) {

.back img{
          width:30%;
          height:auto;
}
}

/*---------- リンクボタンの設定 ----------*/

.button{
        display: inline-block;  /*Googleマップへのリンクボタン*/
        padding: 0.3em 1em;
        margin:1em 0 1em 0;
        text-decoration: none;
        color: #000000;
        border: solid 2px #000000;
        border-radius: 3px;
        transition: .4s;
}

.button:hover{
              background: #000000;
              color: white;
}


/*---------- 各トップのメイン画像 ----------*/

.angelica {
           max-width:100%;
          
}

.angelica img{
             width:100%;
             height;auto;
}

/*---------- メニュー用DIVの設定 ----------*/
@media screen and (max-width: 767px) {

.angelica{
         max-width:100%;
}

.angelica img{
              width: 30%;
              height: auto;
}
}


/*---------- wrapper ----------*/
#wrapper{
         position: relative;
         max-width:100%;
         margin-right:auto;
         margin-left:auto;
         min-height: 100%;
  
}

/*---------- フッター ----------*/

#footer {
         color: #ffffff;
         clear: both;
         width: 100%;
         height: auto;
         bottom: 0px;
         padding: 0;
         background-color: #007168;
         fixed;
}

/*---------- Swiperスライダーの設定 ----------*/

.swiper-container {
                   width: 100%;   /*全画面表示の設定*/
                   height: auto;
}

@media screen and (max-width: 767px) {

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

/*---------- article ----------*/

article{
        width: auto;
        margin: 20px 10%;
}

/*---------- 各ページの説明BOX ----------*/

.box{
     padding:0;
     margin:2em 0 2em 2em;
     text-align: left;
     line-height: 150%;
}

@media screen and (max-width: 767px) {

.box{
     margin:1em 0 1em 1em;
     line-height: 120%;
}
}

.box02{
           width:50%;
           padding:5em;
           margin:2em auto 2em auto;
           text-align: left;
           line-height: 180%;
           color: #000000;
           background-color: #ffffff;
           box-shadow: 10px 10px 15px -10px;
           
}

.box02 img {
            max-width:100%;
            height:auto;
            box-shadow: 0 0 8px gray;
}

.box02 ul{
          list-style-type: none;
          text-align: center;
          margin:5em 0 0 0 ;
}

.box02 li{
          display : inline; 
          margin:0 5em;
}

.box02 a{
         text-decoration: none;
}

@media screen and (max-width: 767px) {

.box02{
           width:80%;
           padding:3em;
           margin:2em auto 2em auto;
           line-height: 180%;
           color: #000000;
           background-color: #ffffff;
           box-shadow: 10px 10px 15px -10px;
}

.box02 img {
            max-width:auto;
            height:auto;
            box-shadow: 0 0 8px gray;
}
}


.box03 {
        padding: 0;      /*ランチとディナーの画像の影付き枠*/
        margin: 0 auto;
        max-width:100%;
        height:auto;
        
}

.box03 img {
            max-width:100%;
            height:auto;
            box-shadow: 0 0 8px gray;
}

@media screen and (max-width: 767px) {
.box03 {
        padding: 0;
        margin: 0 auto;
        max-width:47%;
        height:auto;
}

.box03 img {
            max-width:100%;
            height:auto;
            box-shadow: 0 0 8px gray;
}
}

.box07 {
        padding: 10px 0 0 0;      /*画像の影付き枠*/
        margin: 0 auto;
        max-width:100%;
        height:auto;
        
}

.box07 img {
            max-width:100%;
            height:auto;
            box-shadow: 0 0 8px gray;
}

@media screen and (max-width: 767px) {
.box07 {
        padding: 10px 0 0 0;
        margin: 0 auto;
        height:auto;
}

.box07 img {
            max-width:100%;
            height:auto;
            box-shadow: 0 0 8px gray;
}
}

.box04 {
        padding: 2em 2em 1em 2em;     /*ランチとディナーの文字*/
        margin: 0;
        max-width:100%;
        height:auto;
        text-align: left;
}

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

@media screen and (max-width: 767px) {
.box04 {
        padding: 1em 2em 1em 2em;
        margin: 0;
        max-width:100%;
        height:auto;
        text-align: center;
}

.box04 img {
            max-width:100%;
            height:auto;

}
}

.box05 {
        max-width:100%;
        margin:1em 0 2em 2em;
        line-height:1.8;
}

.box06 {
        max-width:100%;
        margin:1em 0 2em 2em;
        text-align: left;
        background-image:url(img/512.png);
        background-repeat:no-repeat;
        background-size:auto;      
}

.box06 p{
         padding:6em 0 1em 8em;
         margin:0;
}

@media screen and (max-width: 767px) 
.box06 {
        background-size:10% auto;

}

.box06 p{
         padding:5em 0 1em 6em;
         margin:0;
}
}

/*---------- メニュー用DIVの設定 ----------*/

.wrap_menu{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
}

.menu{
      width:80%;
      margin: 1em auto 1em auto;
      
}

.menu p{
        padding: 0 1em 0 1em;
        line-height:1.8;
}

.menu ul{
         list-style-type: none;
         text-align: center;
         margin:1em 0 1em 0 ;
}

.menu li{
         text-align: left;
         margin: 1em 0 0 2em;
}

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

@media screen and (max-width: 767px) {
.wrap_menu{
           width:100%;
}

.menu{
      width:90%;
      margin: 1em auto 1em auto;
      
}


.menu ul{
         list-style-type: none;
         text-align: center;
         margin:1em 0 0 0 ;
}

.menu li{
         text-align: left;
         margin: 1em 0 0 1em;
}

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

.menu02{
        margin: 2em auto;  /*角丸背景色枠あり*/
        padding: 1em;
        width: 70%; 
        color: #666666; 
        background-color: #f2e4df; 
        border: 2px solid #ccc; /*線の太さ・色*/
        border-radius: 8px; 
}

@media screen and (max-width: 767px) {
.menu02{
        margin: 2em auto;  
        padding: 1em;
        width: 90%; 
        color: #666666; 
        background-color: #f2e4df; 
        border: 2px solid #ccc; 
        border-radius: 8px; 

}
}

.menu03{
        width:70%;
        margin: 1em auto 2em auto;
}

.menu03 p{
          margin:1em 0 0 0;
}


@media screen and (max-width: 767px) {
.menu03{
        width:70%;
        margin: 1em auto 2em auto;
}

.menu03 p{
          margin:1em 0 0 0;
}
}

/*---------- 各DIVの設定 ----------*/

*, *:before, *:after {  /*横並びBOX２個*/
  box-sizing: border-box;
}

.lunch_dinner{
              width: 100%;
              display: flex;
              display: -ms-flexbox; /* IE10 */
              flex-wrap: wrap;
              -ms-flex-wrap: wrap; /* IE10 */ 
              color:#fff;

}

.lunch_dinner a{
                color:#ffffff;
                text-decoration: under-line;
}

.red{
       width: 48%;
       padding: 10px;
       background-color: #d23502;
       text-align: center;
       margin:1em auto 1em auto ;
}

.black{
       width: 48%;
       padding: 10px;
       background-color: #333333;
       text-align: center;
       margin:1em auto 1em auto ;
}

@media screen and (max-width: 767px) {
.lunch_dinner {
		           width: 100%;
               padding: 10px;
               margin:1em auto 1em auto ;
}
.red{
       width:100%;
       padding: 10px;
       background-color: #d23502;
       text-align: center;
       margin:1em auto 1em auto ;
}

.black{
       width: 100%;
       padding: 10px;
       background-color: #333333;
       text-align: center;
       margin:1em auto 1em auto ;
}
}

*, *:before, *:after {  /*横並びBOX２個 about*/
  box-sizing: border-box;
}

.about{
       width: 80%;
       display: flex;
       display: -ms-flexbox; /* IE10 */
       flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */ 
       background-color: #fff;
       margin:1em auto 1em auto ;
       border-bottom: 1px dashed #c0c0c0;


}

.about_photo{
             width: auto;
             padding: 1px 10px 10px 0;
             margin: 0 auto;
             background-color: #fff;
}

.about_photo img{
                 box-shadow: 0 0 8px gray;
}

.about_txt{
           width: 66%;
           padding:0 0 10px 1em;
           margin:0 1em 0 1em;
           background-color: #fff;
           text-align: left;
           line-height:1.8;
}



@media screen and (max-width: 767px) {
.about {
        width: 100%;
        padding: 0;
        margin:1em auto 1em auto ;
        background-color: #fff;

}

.about_photo{
             width: auto;
             padding: 10px;
             margin: 0 auto;
             background-color: #fff;
}

.about_txt{
           width: 100%;
           padding: 0 0 10px 10px;
           margin:0 auto 0 auto;
           background-color: #fff;
           text-align: left;
}

}

/*---------- 各pの設定 ----------*/

.s01{
     font-size: 12px;   /*sサイズ文字*/
     margin:1em 0 1em 0;
     line-height:1.8;
}

.s02{
     font-size: 12px;   /*sサイズ文字注意書き用*/
     margin:0 0 1em 0;
     line-height:1.8;
}

.m01{
     font-size: 14px;   /*mサイズ文字*/
     margin:5px 0 5px 0;
     font-weight:bold;
}

.m02{
     margin: 0 0 10px 0;
}



.l01{
     font-size: 18px;   /*Lサイズ 茶文字*/
     color:#a65f4a;
     margin: 20px 0 0 0;
     font-weight:bold;
}

.l02{
     font-size: 18px;   /*Lサイズ 朱文字*/
     color:#be2f03;
     font-weight:bold;
     margin:20px 0 1em 0;
}

.l03{
     font-size: 18px;   /*Lサイズ グリーン文字*/
     color:#056969;
     font-weight:bold;
     margin:0 0 1em 0;
}

.l03_menu{
          font-size: 14px;   /*グリーン文字　ディナーメニュー使用*/
          color:#056969;
          font-weight:bold;
          margin:0 0 1em 0;
}

.l04{
     font-size: 18px;   /*Lサイズ　黒文字*/
     font-weight:bold;
     margin:5px 0 5px 0;
}

.l04_menu{
          font-size: 20px;   /*Lサイズ　黒文字 ディナーメニュー使用*/
          font-weight:bold;
          margin:5px 0 0 0;
}

.tenmei{
        font-size: 16px;   /*フッター内コピーライト*/
        padding:0 0 8px 0 ;
}

.copy{
      font-size: 12px;   /*フッター内コピーライト*/
      text-align: center;
      padding:0 0 4px 0 ;

}

/*---------- フッター横並び２列 ----------*/

*, *:before, *:after {
  box-sizing: border-box;
}

.footer-box_2 {
	             width: 100%;   /*横並び２列BOX*/
	             display: flex;
	             display: -ms-flexbox; /* IE10 */
	             flex-wrap: wrap;
	             -ms-flex-wrap: wrap; /* IE10 */
}


.footer-box_2 ul {
                  margin: 0;
                  padding: 0;                 
}

.footer-box_2 li {
                 margin: 0 0 1em 2em;
                 list-style-type: none;
                 height: 20px;
                 text-align: left;
                 line-height: 14px;
                  
}

.footer-box_2 a {
                   color: #ffffff;
                   text-decoration: none;
                   overflow: hidden;	/*オーバーした文字を非表示にする設定*/         
}

.footer-box_2 a:hover {
                          color:#ffffff;
                          text-decoration:underline;
}

.footer-box_2 > div {
                     width: 50%;
	                   padding: 10px;
                     margin:1em 0 1em 0;
                     text-align: left;                      
}

.footer-box_2 p{
                margin:5px;
                line-height:1.5;
}

@media screen and (max-width: 767px) {

.footer-box_2 > div {
                     width: 100%;
                     padding: 10px;
                     margin:1em 0 1em 0;                    
}

.footer-box_2 p{
                text-align: center;
                margin:3px;
}


.footer-box_2 ul {
                  margin: 0;
                  padding: 0;                 
}

.footer-box_2 li {
                  margin: 0 0 1em 2em;
                 list-style-type: none;
                 height: 20px;
                 text-align: center;                        
}
}