/*----- style.css -------- */

/* :rootのCSS変数の宣言 */
:root {
    --txtcolor: #222;
    --red: #e50014;
    --blue: #00aaff;
    --headerheight: 100px;
    --spheaderheight: 80px;
  }

body {
    align-content: center;
    color: #222;
    /*background-image: linear-gradient(#222222, #737373 51%, #222222);*/
    background:#111 url(../images/bg.png) repeat;
    line-height: 1.6;
    font-family:  "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    padding-top: var(--headerheight);
}

*{  box-sizing: border-box; }
dt { font-weight: normal; }
img { width:100%; height: inherit; line-height: 0; vertical-align:middle; }
img.def { width: inherit; height: inherit; line-height: 0; vertical-align:middle; }
main a { text-decoration: none; color: var(--blue);}
.mgt10 { margin-top:  10px;}
.mgt2rem {margin-top: 2rem;}
.fwb { font-weight: bold;}
.txt-center { text-align: center;}
.txt-right { text-align: right;}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
 }
.inline-block { display: inline-block; }
/* スマホ・タブレット */
@media screen and (max-width: 768px) {
    img.def { width:100%; }
}

/*----------ヘッダ－ --------------------------------------*/
header { 
    position: fixed;
    z-index: 100;
    width: 100%;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    left: 0; top: 0;
}
header .drawer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 10px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
   }
/*logo*/
header h1.header-logo img {  width: 130px; height: inherit; }

/*----------ナビ（PCメイン） --------------------------------------*/

/*ロゴ*/
header nav , header .drawer {
 width: 100%;
 position: relative;
 background: #111;
}
header,header .drawer {  height: var(--headerheight); }

header h1.header-logo {  width: 130px; }

header ul.sns { display: flex; position: absolute; top: 5px; right: 5px;}
header ul.sns img { height: 34px; width: auto;}
header ul.sns a:hover { opacity: 0.6; transition: all 0.3s ease;}
header ul.sns li {margin : 5px;}

header nav {  border-bottom: solid 1px #000; } 
nav{  display: flex;}
.Toggle{ display: none; }
.menu{
    position: absolute;
    width: calc(100% - 200px);
    font-size:0.8em;
    background-color: #fff;
    display: block;
    right: 10px;
    bottom: 16px;
    height: 2.5em;   
    border-radius: 4px;
    padding: 0 10px;
}
.menu ul {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between; */
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}
/* .menu ul li { width: calc(  100% / 8); min-width: 10em;} */
.menu ul li a{
    display: block;
    padding: 0 35px;
    border-bottom: none;
    font-size: 1.1em;
    color: var(--txtcolor);
    transition: all 0.3s 0s ease;
    margin: 0 1px;
    border-left: 1px #ccc solid;
    text-align: center;
}
.menu ul li:first-child  a{ border-left: none;}
.menu ul li a:hover{
    background-color: rgba(0, 0, 0, 0);
    background-color: #d70e1844;
    
}
@media screen and (max-width: 1200px) {
    .menu ul li a{ padding: 0 29px; }
}
@media screen and (max-width: 1100px) {
    .menu ul li a{ padding: 0 20px; }
}
@media screen and (max-width: 970px) {
    .menu ul li a{ padding: 0 10px; }
}

/*---------- スマホ header -----------------------------------------*/

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

body {
    padding-top: var(--spheaderheight);;
}
header,header .drawer {  height: var(--spheaderheight); }
header h1.header-logo { padding-left: 10px;}
header h1.header-logo img { width: 80px; }
header ul.sns { top: 18px; right: 70px;}
.menu ul { display: block;}
.menu ul li a {
  display:block;
  padding: 1em;
  border: 1px dotted #dfdfdf;
  border-top: none;
  color:#fff;
  text-decoration:none;
  border-radius: 0px; 
}
.menu ul li:first-child a { border: 1px dotted #dfdfdf;}
.menu ul li a:hover
{
    background-color:rgb(255, 255, 255);
    color: var(--blue);
}
.menu {
  max-width: 100%;
  text-align:center;
  background-color:rgba(0, 0, 0, 0.9);
  transition: 0.6s ease;/*滑らかに表示*/
  position: fixed;
  width: 70%;
  height: 100%;
  top:0;
  z-index: 200;
  left: 100%;
  padding-top: var(--headerheight); 
}
/*OPEN時の動き*/
.menu.open {
 display: block;
 left: 30%;
}
/*トグルボタン*/
.Toggle {
    display: block;
    position: fixed;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 300;
    right:18px;
}
.Toggle span {
    display: block;
    position: absolute;
    width: 36px;
    border-bottom: solid 2px #ffffff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 16px;
}
 .Toggle span:nth-child(3) {
   top: 28px;
}
.Toggle.active span { border-color: #ffffff; }
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

} /* @media screen and (min-width: 768px) */


/* ---------------スライドショー ----------------------------------------------------------*/
.swiper-pagination {
  position:relative;
}
  .swiper-slide img {
    height: auto; /* アスペクト比を維持するために必要 */
  }
  .swiper-pagination-bullet {
    background-color: #fff;
    border-radius: 0;
    width: 50px;
    height: 3px;
  }
  .swiper-button-prev,.swiper-button-next { 
    height: 100%;
    top:22px;
    padding: 0 10px;
}
.swiper-button-prev:hover,.swiper-button-next:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
}
.swiper-button-prev { left: 0px; }
.swiper-button-next { right: 0px; }
/* Swiperの矢印色変更 */
.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #ffffff; 
    width: 45px;
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 2rem;
    font-weight: bold;
}

/* main-------------------------------------------------- */
/* 共通 */
section {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
}
section.v2 { margin-top: 30px;}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0em 1em 1em 1em;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    top: 20px;
    transition: all 1s;
    background: #ffffff; padding-top: 60px; max-width: 100%;
    position: relative;

}
.is-active {
    opacity: 1;
    top: 0px;
    visibility: visible;

    }
h2 {
    font-size: 0.8rem ;
    background-image: linear-gradient(90deg, #111111 50%, #555555);
    border: solid 1px #666;
    padding: 10px;
    text-align: left;
    color: #fff;
    font-weight: bold;
    margin-bottom: 2rem;
    position: absolute;
    top:-10px;
    display: block;
    width: calc( 100% - 30px );
}
h2 span { font-size: 1.4rem; margin-right: 10px; border-left: 5px solid #ff2d2d; padding-left: 10px;}
#contents { max-width: 1200px; margin: 0 auto;}
#contents { display: flex; flex-wrap: wrap; }
#price, #Infomation{ flex-grow: 1; }
#contents>section { padding: 0 10px; }
#contents>section.cl01 { width: 100%;}
#contents>section.cl02 { width: calc( calc(100% / 3) *2 );}
#contents>section.cl03 { width: calc(100% / 3);}
#contents>section.cl50 { width: 50%;}

#contact .inner,#reserve .inner { padding-bottom: 50px;}

@media screen and (max-width: 768px) {
    #contents { display: block;}
    #contents>section ,#contents>section.cl02, #contents>section.cl03, #contents>section.cl50 { width: 100%;}
    .inner { margin: 0 auto; padding: 70px 1em 1em 1em;}
}

/* 共通 */

/*ラインマーカー*/
.marker {
    background:linear-gradient(transparent 50%, #fdf00167 50%);
    /* background:linear-gradient(transparent 50%, #ff990067 50%); */
     background-repeat: no-repeat;
     background-size: 0% 100%;
     transition:background-size 1s;
   }
 .marker.on {
     background-size: 100% 100%;
   }

/* 予約 */
 /* ボタン上部テキスト */
 p.btn-lead { position: relative; margin: 70px 0;}
 @media screen and (max-width: 768px) {
     p.btn-lead {  margin: 50px 0;}
}
 p.btn-lead span {
  font-size:90%; 
  font-weight: bold; 
  color: initial;
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 100%;
}
p.btn-lead span:before {
  margin-right: 1rem;
  content: '＼';
}
 p.btn-lead span:after {
  margin-left: 1rem;
  content: '／';
}

 /* ボタン */
.button {
	background: #ff2d2d;
	border-radius: 40px;
	color: #fff;
	display: block;
	overflow: hidden;
	padding: 20px;
	position: relative;
	text-decoration: none;
    width: 80%;
    margin: 40px auto;
}
.button::after {
	animation: 2s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
.button:hover {
	opacity: 0.8; transition: all 0.3s ease;
}

@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}
/* インフォメーション*/

div.flexbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
div.flexbox div.col2 {
        width: calc(calc(100% - 10px) / 2);
}
div.flexbox div.col3 {
        width: calc(calc(100% - 20px) / 3);
}

div.infobox { 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/*div.infobox .ph, div.infobox .txt { 
    width: calc(calc(100% - 10px) / 2);
    margin-bottom: 10px;
    text-align: left;
}*/
div.infobox .ph {  width: 40%; }
div.infobox .txt {  width: 60%; padding-left: 10px; }



/*メニュー*/
#foods div.menuCatalog a{ 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#foods div.menuCatalog img { 
    width: calc(calc(100% - 10px) / 2);
    margin-bottom: 10px;
}
#foods div.menuCatalog a:hover img {
	opacity: 0.8; transition: all 0.3s ease;}

/*--　メニューモーダル--*/
#animatedModal { text-align: center; width: 90%; padding-top: 3em;}
div.modal-content { 
    padding: 1em;
     max-width: 1200px;
     margin: 20px;
     margin: 0 auto;
}

div.modal-content img { margin-top: 20px; border: solid 10px #ffffff;}
#btn-close-modal {
	position: fixed;
    right: 0;
    top: 0;
    background: #00aaff;
	cursor:pointer;
	color:#fff;
    padding: 10px 20px;
    margin: 20px;
	box-sizing: border-box;
  z-index: 10000;
}
#btn-close-modal:hover {background: #14b1ff;transition: all 0.3s ease; }


/* Drink */
.dmenu { 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.dmenu img { 
    width: calc(calc(100% - 10px) / 2);
}


/* Access ---------------------*/
/* gmap ボタン */
.route-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: rgb(255, 255, 255);
    padding: 10px 28px 14px 28px;
    width: 100%;
    max-width: 500px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.95em;
    transition: all 0.3s ease;
    text-decoration: none;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.route-link::before {
    content: "📍";
    font-size: 1.2em;
}
.route-link::after {
    content: "›";
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.route-link:hover {
    transform: translateY(2px);
    color:  var(--blue);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.route-link:hover::after {
    transform: translateX(3px);
}
.route-link-container {
    text-align: center;
    margin: 15px 0;
    padding: 5px;
}
.route-link-container.with-bg {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    margin: 25px 0;
}
.map {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 30px 0;
}
.map iframe {
    display: block;
    width: 100%;
    height: 250px;
    transition: opacity 0.3s ease;
}
.map iframe:hover {
    opacity: 0.95;
}
.jyusyo { max-width: 500px; margin: 30px auto 0 auto; text-align: left;}



/* Contact お問い合わせ　---------------------------------------------- */
.contact-link {
    margin-top: 1em;
    display: inline-block;
    color: #333;
    text-decoration: none;
    padding: 10px 20px;
    margin: 5px 0;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.contact-link:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--blue);
}
.contact-link .contact-icon { padding-right: 4px;}


/* ページTOP　右下ボタン */
#page-top {
    position: fixed;
    right: 50px;
    bottom: 100px;
    width: 55px;
    height: 55px;
    z-index: 10;
    opacity: 0.5;
    text-indent: -9999px;
    display: none;
}
#page-top a {
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    border-radius:50%;
    background: rgb(255, 255, 255);
    transition: opacity .6s ease;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.45);
}
#page-top a:hover { opacity: 0.5;}
#page-top a::before {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    content: '';
    transform: rotate(-45deg);
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
}

/* スマホ・タブレット */
@media screen and (max-width: 768px) {
    #page-top  { right: 15px; bottom: 70px; }
    #page-top, #page-top a  { height: 48px; width: 48px; }
}

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

footer { position: relative;  background-color: #111; font-size: 0.8em; border-top: 1px #000 solid;}
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 3em 1em 6em 2em; }
footer, footer a { color: #fff; }
footer nav ul a { padding: 0 5px; }
footer nav ul a:hover { color: #ccc; }
footer ul { display: flex;}
footer nav ul li {margin : 2em 1em 0 0;}
footer p.logo { width: 130px;}
#copyright { text-align: center; color: #ccc; margin-top: 2em;}

footer ul.sns { margin-top: 30px;}
footer ul.sns img { height: 40px; width: auto;}
footer ul.sns a:hover { opacity: 0.6; transition: all 0.3s ease;}
footer ul.sns li {margin : 5px;}

/* スマホ・タブレット */
@media screen and (max-width: 768px) {
    footer nav ul { display: block; margin-top: 2em;}
    footer nav ul li {margin : 5px;}
}

/*　問い合わせ・LINE　固定メニュー-------------------*/
#ft-fixed-menu{
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.9;
    z-index: 99;
 }
 #ft-fixed-menu ul{
    display: flex;
    list-style: none;
    padding:0;
    margin:0;
    width:100%;
 }
 #ft-fixed-menu li{
    justify-content: center;
    align-items: center;
    width: 50%;
    padding:0;
    margin:0;
    font-size: 14px;
 }
 #ft-fixed-menu li:first-child{ background: #ffae00; }
 #ft-fixed-menu li:last-child{ background: #38b435; }
 
 /*ボタンを調整*/
 #ft-fixed-menu li a{
    color: #fff;
    text-align: center;
    display:block;
    width: 100%;
    padding:16px;
 }
/* #ft-fixed-menu li:first-child a { color: #222;} */
 #ft-fixed-menu li:hover{
    opacity: 0.8;
    transition: all 0.3s ease;
 }