/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
/* For modern browsers */
.cf:before, .cf:after {content:""; display:table; } .cf:after {clear:both; } .cf {zoom:1; }

/*======= COMMON =======*/
.sp{display:block;}
.pc{display:block;}
body,html{width: 100%; height: 100%; font-family:"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "YuMincho", serif; background: #edeae7; cursor: none; position: relative;}
h3,h4,h5,h6,.stats ul li.stats_2,.rob,.sp .navigation li a {font-family: 'Roboto Condensed',"ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "YuMincho", serif; }
.all{overflow-x: hidden; width: 100%;}
*{font-size: 12px;color: #58534f;}
a{text-decoration: none}
img{vertical-align: middle;}
nav {
    position: relative;
    z-index: 3;
}
.box{width: 90%; margin: 0 auto; position: relative; z-index: 2;    max-width: 780px; margin-inline: auto; text-wrap: pretty;}
.fixed{background-attachment: fixed; background-position: center bottom; min-height: 420px;}
.subtitle{ text-align: center; color: #fff; padding:5px 0;}
.subtitle h1{display: table; margin: 0 auto; }
.subtitle h1 img {display: table-cell; vertical-align: middle; width:200px; height: 64px; }
.subtitle h2 {font-size: 15px; letter-spacing: 3px; margin-top: 1.5em; font-weight: normal; color: #fff}
.subtitle h3 {margin: 70px 0 45px; color: rgb(10,20,10,1) ; font-size: 40px;}
.tc { text-align: center; }
h4{letter-spacing: 1px; margin-bottom: 1em; font-size: 13px; background: #746d68; color: #fff; padding: 5px 10px; display: inline-block; }


/* TABLE */
.table table th{background: #ece5db;}
.table table{width: 100%;}
.table table td,
.table table th{padding:10px; border: 1px dotted #b0afaa;}
.tableM table th{width: 25%;}
.slide {width: 100%;}
.slide li{padding:10px; margin:0 10px; border:1px solid #000;}

.menu li { float: left; width: 31%; margin:10px 1%; font-size: 13px; }
.menu li span { color:#b0a798; display: inline-block;}


.menu-drink { margin-bottom: 30px; }

.menu-drink li { float: left; width: 48%; margin:5px 1%; font-size: 13px;margin-bottom: 15px; }
.menu-drink li.title { width:98%; margin:10px 1% 30px; }
.menu-drink li strong { display: block; text-indent: -8px; font-size: 17px; font-weight: bold;}
.menu-drink li strong em { font-style: normal; font-size: 12px; }
.menu-drink li span { color:#b0a798; }


.menu-desert { margin-bottom: 30px; }
.menu-desert li { width: 100%; margin:0 0 25px; font-size: 13px; }
.menu-desert li strong { display: block; text-indent: -8px; font-size: 17px; font-weight: bold;}
.menu-desert li strong em { font-style: normal; font-size: 12px; }
.menu-desert li span:not(.color-red) { display: inline-block; color:#b0a798; position: relative; padding-left: 10px;}
.menu-desert li span:not(.color-red)::before { position: absolute; content:"/"; top: 0; left: 2px; }
.menu-desert li span.price { float: right; }
.menu-desert li span.price.wP { float: left; }
.menu-desert li.wP-li { height: 200px; position: relative; }
.menu-desert li .cake { width: 40%; position: absolute; top: 0; right: 0; }
.menu-desert li .cake img { display: block; overflow: hidden; width: 100%; }

/* HEADER */
header{height: 100vh;position: relative;}
.header{width: 100%;
    height: 100vh;
    min-width: inherit;
    position: absolute;}
.header_body {
    position: relative;
    z-index: 3;
}
.header h1{
    text-align: center;
    width: 300px;
	margin-bottom: 20px;
}
.header h1 img{
    width:80%;
}
.header .hero-mes{color:#fff; font-size:clamp(15px, 1.9vw, 18px); letter-spacing: 1px; line-height: 1.8; display: inline-block; margin: 10px auto; white-space: nowrap;  font-weight: 700; text-align: center;}
 .header .kaiki {
    margin: 0 auto;
    color:#fff;
    font-size: 15px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 600;
    display: block;
    margin-top:10px;
}
.header .kaiki span {
    color:#fff;
    font-size: 0.6em;
}
.stats,
.reserve-btn,
.header h2 img,
.header h5 img,
.header h3 img{position: absolute;}
.header h2 img{width:182px; right: 20px; bottom:20px;}

.header h5 img{width: 454px; left: 20px; bottom: 20px;}
.bg_color {
    position: absolute;
content:"";
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.15) 35%,
      rgba(0,0,0,0.35) 100%
    );
    /*mix-blend-mode: overlay;*/
}
.stats {left:7%; top: 70px; text-align: center; display: table;height: 200px;width: 200px; transition:opacity .3s; opacity: 0}
.stats ul{display: table-cell; vertical-align: middle;}
.stats ul li{color: #fff; line-height: 1.2; letter-spacing: 3px;}
.stats ul li.stats_1{font-size: 15px;}
.stats ul li.stats_2{font-size: 48px; font-weight: normal}
.stats ul li.stats_2 span { color:#fff; font-size: 42px; }
.stats ul li.stats_3{font-size: 11px;letter-spacing: 1px;}
.kaisai_open{background:rgb(250,100,80,0.7) center center no-repeat; border-radius: 50%;}
.kaisai_close{background:  rgb(180,140,30,0.8) center center no-repeat; border-radius: 50%;}
.kaisai_review{background: rgb(80,120,20,0.7) center center no-repeat; border-radius: 50%;}
.today_open .kaisai_open  {opacity:1; z-index: 100;}
.today_close .kaisai_close{opacity:1; z-index: 100;}
.today_review .kaisai_review{opacity:1; z-index: 100;}
.end-beergarden { position: relative; left:0; width: 100%; background-color:#b0a798; }
.end-beergarden p { padding:20px 35px; max-width: 1000px; margin:0 auto; color:#fff; }
.end-beergarden p strong { font-size: 16px; color:#fff; font-weight:bold;}
.reserve-btn {left: 0; bottom: 0; text-align: center; width: 100%; background-color: rgb(200,60,50,0.7); transition: background-color .3s; z-index: 10; }
.reserve-btn ul{vertical-align: middle; }
.reserve-btn ul li {color: #fff; line-height: 1.2; font-size: 15px; font-weight: bold; letter-spacing: 3px;text-align: center; padding:15px 0;}
.reserve-btn:hover { opacity: 0.8; }
.kaisai_date{background:rgb(255,255,255,0.9) center center no-repeat; border-radius: 50%; opacity: 1;}
.kaisai_date.stats ul li{color: rgb(200,60,50,1); }
.kaisai_date.stats  ul li.stats_2{font-size: 40px; font-weight: bold; line-height: 1;}
.kaisai_date.stats  ul li span { color:rgb(200,60,50,1) !important; font-size: 25px !important; display: inline-block; font-family: 'Roboto Condensed', 'Noto Sans Japanese' , 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; font-weight: bold;}
.kaisai_date.stats  ul li.stats_3{font-size: 42px;letter-spacing: 1px;  font-weight: bold;     margin-top: 5px;}

.hero {
  position: relative;
  min-height: 100vh;
  background: url("../img/bg-2026_hero.webp") center center / cover no-repeat;
  overflow: hidden;
    filter:
    brightness(0.9)
    saturate(0.9)
    contrast(1.05);
}

/* overlay */
.header::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.32) 24%,
      rgba(0,0,0,.20) 46%,
      rgba(0,0,0,.18) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.05) 35%,
      rgba(0,0,0,.25) 100%
    );

  z-index: 1;
  pointer-events: none;
}

.header nav{
  position: relative;
  z-index: 999;
}
.header .grid-center{
  position: relative;
  z-index: 3;
}
/* SECTION1 */
.section_1{background: rgb(10,20,10,1) url(../img/intro_1_2025.jpg) center top no-repeat; background-size: cover; padding:150px 10% 200px; position: relative;}
.section_1::before{    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;    height: 100%;
    background: rgba(0,0,0,0.5);

}

.section_1 h5 { text-align: center; margin-bottom: 40px; color:#fff; font-size: 40px; letter-spacing: 2px; }
.section_1 p {color: #fff; font-size: 16px; line-height: 2;   max-width: 32em;
  margin-inline: auto;}
.section_1 p span { color:#fff; font-size: 19px;
    letter-spacing: 2px; }
.box_mid{padding:10px 0 30px;}
.box h3{font-size: 22px; color: #ae3b1c; text-align: center; font-weight: normal; text-transform: uppercase; }

/* SECTION2 */
.info{text-align: center; font-size: 14px; font-weight: normal; color: #58534f; margin: 1.3em 0 60px;line-height: 2;}
.lead {text-align: center; line-height: 2;}
.info span { color:#b0a798; }
.price{text-align: center; font-size: 13px;}
.section_2 .lr{margin-bottom: 30px;}
.section_2 .lr > div{width: 730px; margin:0 auto; padding: 20px; border: 1px dotted #111; min-height: 130px; }
.section_2 .lr h5 { font-family: "Times",serif; font-size: 18px;color: #111; line-height: 1.5; margin: 0 0 20px; letter-spacing: 1px; text-align: center; background: #d0c9be;  padding: 10px 0;}
.section_2 .lr p { line-height: 1.8; max-width: 400px;
    color: #58534f;
    margin: 10px auto 0;
    padding: 0 10px;
    border-left: 1px dotted #b0a798;
    border-right: 1px dotted #b0a798;
    display: block;margin-bottom:20px; font-size:11px;}
.section_2 .lr span.color-red{color:#ae3b1c;}
.section_2 .lr.sub h5 { color:#111; font-family: "Times",serif; font-size: 18px; line-height: 1.5; margin:0 0 20px; letter-spacing: 1px; text-align: center; background:#d0c9be; padding: 10px 0;}
.section_2 .lr.sub h6 { color:#111; font-family: "Times",serif; font-size: 18px; line-height: 1.5; margin:0 0 20px; letter-spacing: 1px; text-align:left; padding: 10px 0; border-bottom: 1px dotted #999;}
.section_2 .lr h6 { color:#38322d; font-family: "Times",serif; font-size: 17px; line-height: 2; margin:0 0 10px; letter-spacing: 2px; }
.section_2 .lr.sub .pdf-box{ text-align: center; margin: 40px auto; width: 80%;}
.section_2 .lr.sub .pdf{ color:#fff; background: #27231e; padding:10px 40px; display: inline-block; margin:0 auto 5px; font-size: 14px; letter-spacing: 2px;}
.section_2 .lr.sub .pdf:hover { opacity: 0.8;}
.section_2 .lr.sub p { margin-bottom: 20px; font-size: 14px; line-height: 1.8; }
.section_2 .lr .pdf-box{ text-align: center; margin: 40px auto; width: 80%;}
.section_2 .lr .pdf{ color:#fff; background: #27231e; padding:10px 40px; display: inline-block; margin:0 auto 5px; font-size: 14px; letter-spacing: 2px;}
.section_2 .lr .pdf:hover { opacity: 0.8;}


.section_2 .img-wrap {width:100%; height: auto;  display: flex; flex-wrap: wrap; justify-content: center;gap: 10px;}

.section_2 .img-wrap img {width:45%; }

/* SECTION3 */
.section_3 .menu{border: 1px dotted #b0afaa;padding: 20px;}
.section_3 .subbox{margin: 30px 0;}
.section_3_header {display: table; height: 420px; text-align: center; margin: 0 auto; position: relative;width: 100%;  display: flex;
  align-items: center;
  justify-content: center;}

.section_3_header::after {
content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(1px);
}
	
.section_3_header > div{  display: flex;
  align-items: center;
  justify-content: center;}
.section_3_header > div h3 { font-size: 18px; line-height: 1.9; color:#fff; font-weight: normal; text-shadow:1px 1px 10px #000; }
.section_3_header img{width: 501px;}

/* SECTION4 */
.section_4 h1{text-align: center; margin-bottom: 30px;}
.section_4 h1 img{width: 150px;}
.section_4 .r{width: 239px;}
.section_4 .tableL{border-bottom:1px dotted #b0afaa; padding-bottom: 60px;/* background: url(../img/roundimg_2.jpg) right top no-repeat;*/}
.section_4 table *{font-size: 13px;}
.section_4 table a{text-decoration: underline;}
.section_4 table td,
.section_4 table th{padding-top: 1.3em;}
.section_4 table th{width: 130px;vertical-align: top; font-weight: bold;}
.section_4 table td strong { font-weight: bold; }
.section_4 .tableS { max-width: 970px; margin:20px auto 0; line-height: 1.9; text-align:center; font-size: 14px; color:#999;}

/* PCNAV */
.pc .navigation{position: absolute;
width: 100%;
    top: 20px;
    margin: 0;
    left: 0;
	}
.pc .navigation {text-align: center;}
.pc .navigation li{display: inline-block; }
.pc .navigation li a{display: block; border-bottom: 1px dotted #fff; color: #fff; font-size: 15px; margin-left: 1em; line-height: 24px}
.pc .navigation li a img{vertical-align: middle; margin: -3px 3px 0 0;}
.pc .navigation li:first-child a{margin: 0;}
.scrolled .pc .navigation {position: fixed; width: 100%; z-index: 20; top: 0px; margin: 0; left: 0; background: rgb(170,60,30,0.9); border-bottom: 1px solid #c4350f; box-shadow: 0 0 10px 0 #ae3b1c; }
.scrolled .pc .navigation li {margin: 0 1em}
.scrolled .pc .navigation li a{height: 50px; font-size: 13px; font-weight: normal; line-height: 50px; border-bottom: none; }

.reserved-l { display: block; width: 100%; line-height: 50px; background-color: #37a27b; color:#fff; text-align: center; text-decoration: none !important; font-weight: 700; font-size: 15px; }
.reserved-l:hover { background-color: #146547; }

.insta-cp { position: relative; background-color: #fff; padding:60px 90px; }
.insta-cp a { display: block; max-width: 1080px; margin:0 auto; }
.insta-cp img { display: block; width: 100%; overflow: hidden; max-width: 1080px; margin: 0 auto; }
@media all and (max-width: 980px){
  .insta-cp { padding:40px; }
}
@media all and (max-width: 480px){
  .insta-cp { padding:20px; }
}
@media (min-width: 1080px){
.insta-cp {  padding:60px 150px; }
}

.btn a { background: #ae3b1c; width: 200px; margin: 0 auto; padding: 12px; text-align: center; color: #fff; display: block; transition: background-color .5s;}
.btn a:hover { background: #c4350f; }
.btn.mt { margin-top: 20px; margin-bottom: 40px; }
.grid-center {   display: grid;
  place-content: center;
  place-items: center;
  height: 100dvh;margin-top: 30px;}
.flex-center { display: flex; justify-content: center; }
.flex-center .info-safety { margin: auto; }
.flex-center .info-safety li {font-size: 14px; margin: 1em; }


/*2021 added*/

.flex-center .info-safety { font-size: 14px;margin: 35px auto 5px;}
.flex-center.pdf_btn a{ display:block; font-size: 14px; margin: 1em; position:relative; padding-bottom:3px;  border-bottom:2px dotted #999;}
.flex-center.pdf_btn a:before{content: ""; position: absolute; right: -25px; top: 50%;width: 20px; height: 20px; margin-top: -12px;  background-size: 20px 20px; background-image: url(../img/pdf.svg);

}
.rightbar {position: fixed; bottom: 0; right: 0px; width:100%; z-index: 5; font-size: 16px; z-index: 5;}
.rightbar a {position: relative; display:block; text-align:center; transition: opacity .3s ease; }
.rightbar a div {background:rgb(170,60,50,0.9); padding: 15px 20px; color:#fff; font-size: 1.3em; letter-spacing: 1px;}    

.end-beergarden.covid { position: relative; left:0; width: 100%; background-color:rgb(150,1,1,0.7); z-index: 999; }
.end-beergarden.covid p { padding:15px 35px; max-width: 1000px; margin:0 auto; color:#fff; text-align: center;}
.end-beergarden.covid p a { text-decoration: underline; color:#fff; text-align: center;}
.rightbar.covid {position: fixed; bottom: 0; right: 0px; width:100%; z-index: 5; font-size: 16px; z-index: 5;}
.rightbar.covid div {background: rgb(150,1,1,0.7) ; padding: 10px 20px;  } 
.rightbar.covid p {position: relative; display:block; text-align:center; transition: opacity .3s ease; color:#fff;}

/*2022 added*/
.yukata_area{position: relative; }
.yukata_area .yukata_text{position: absolute; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 60%;}
.yukata_area .yukata_text h3 {color:#fff; font-size:35px; margin-bottom: 25px;}
.yukata_area .yukata_text dt {color:#fff;  font-size:30px; margin-bottom:9px;  display: inline-block;
  width: 40px; height: 40px; border-radius: 50%; border:2px solid #fff; text-align:center; line-height: 40px;}
.yukata_area .yukata_text dd {color:#fff;  font-size:20px; margin-bottom: 50px;}
.yukata_area .yukata_text dd span {color:#fff;  font-size:13px;  }

.yukata_area .yukata_text dl {text-align: left; display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 35px;}
.yukata_area .yukata_text dt {color:#fff;  font-size:30px; margin-bottom:5px;  display: inline-block;
  width: 30px; height: 30px; border-radius: 50%; border:1px solid #fff; text-align:center; line-height: 30px; margin-right:10px; padding: 3px;}
.yukata_area .yukata_text dd {color:#fff;  font-size:17px; margin-bottom: 70px; width: calc(100% - 55px);}
.yukata_area .yukata_text dd span {color:#fff; font-size:22px; display: inline-block;
    margin-bottom: 10px; border-bottom: 2px solid #fff;}

@media (min-width: 768px){
.cursor, .follower {
	 border-radius: 50%;
	 position: fixed;
	 top: 0;
	 left: 0;
	 pointer-events: none;
	 cursor: none;
}
 .cursor {
	 width: 8px;
	 height: 8px;
	 background-color: rgb(150, 1, 1, 0.8);
	 z-index: 999;
}
 .follower {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 100px;
	 height: 100px;
	 background-color:rgba(208,201,190,0.2);
     mix-blend-mode:color-dodge;
	 transition: transform ease 0.1s;
	 text-align: center;
	 z-index: 1000;
}
 .follower.is-active {
	 transform: scale(2.4);
}
 .c-follower.is-blend {
	 background-color:rgba(208,201,190,0.2);
}
    .maxw {max-width: 600px;}
}
@media (min-width: 900px){
.insta-cp .yukata_area img {width: 70%;}
}