@charset "UTF-8";
/* 共通部分------------------------------------------*/

/*  リセットCSS　*/

/*
  1. より直感的なボックスサイズのモデルを使用
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. デフォルトのマージンを削除
*/
* {
  margin: 0;
}
/*
  3. 高さは%ベースを使用
*/
html, body {
  height: 100%;
}
/*
  タイポグラフィの微調整
  4. アクセシブルなline-heightを追加
  5. テキストのレンダリングを改善
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. メディア要素のデフォルトを改善
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  7. フォームのfontに関するデフォルトを削除
*/
input, textarea, select {
  font: inherit;
  border: none;
  outline: none;
  background-color: transparent;
}
/*
  8. テキストのオーバーフローを回避
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* リセットcssここまで*/

/* 共通部分
---------------------------------------------------------- */

/* 設定した文字サイスを正しく反映させる */
html {
   font-size:100%;
   scroll-behavior: smooth;    
}
/* 書体、行の高さ、文字色 */
body {             
   font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic","sans-serif";
   color: #424242;
   height: 100%;
}
/* ゴシック英字文字部分のフォント指定 */
.bebas-neue-regular {    
   font-family: "Bebas Neue", sans-serif;
   font-weight: 400;
   font-style: normal;
   letter-spacing: .05rem;
}
/* 英字部分のフォント指定 */
.font-english {         
   font-family: sans-serif;
}
/* リンクのaタグの下線がつかない */
a {
   color: inherit;
   text-decoration: none; 
}

@keyframes progress {
   0% {
      bottom: -120px;
   }
   40% {
      bottom: -120px;
   }
   50% {
      bottom: 70px;
   }
   100% {
      bottom: 70px;
   }
}
.move-page-top {
   position: fixed;
   right: 20px;
   bottom: -120px;
   animation: progress linear;
   animation-timeline: scroll();
   transition: bottom 1s ease;
   z-index: 2;
}

/* レイアウト 
-----------------------------------------------*/
/* 全体を囲む範囲 */
.wrapper {
   min-width: 375px;
   height: auto;
   margin: auto;
   background-color: #f3f1f1;
}
main {
   padding-top: calc(5rem + 10vw);
   margin: auto;
}

/* 見出し部分：黒帯に白の英字部分 */
.reader-belt {
   min-width: 375px;
   height: auto;
   color: #aaaaaa;
   font-size: .8rem;
   line-height: 1;
   letter-spacing: .1rem;
   background-color: #5a5a5a;
   margin: auto;
   padding: .75rem 0 .5rem 1.75rem;
}

/* 日替わりメニュー下のボタン部分 */
.view-fullmenu {
   width: 180px;
   height: auto;
   color: #e48c45;
   font-size: 1.5rem;
   letter-spacing: 1.5;
   text-align: center;
   margin: 4rem auto;
   padding: 1.5rem;
   background-color: #fae41d;
   border-radius: 6px;
}
.view-fullmenu a:hover {
   display: block;
   color: #fff;
}

/* RESERVATIONボタン部分 */
.to-reservation_button {
   width: 180px;
   height: auto;
   margin-right: auto;
   margin-left: auto;
   padding: 1.5rem;
   font-size: 1.5rem;
   text-align: center;
   background-color: #e48c45;
   border: none;
   border-radius: 6px;
}
.to-reservation_button a:hover {
   display: block;
   color: #fafa1d;
}

/* 上に戻る矢印ボタン部分 */
.scroll-btn {
   width: 50px;
   height: 50px;
   border-radius: 8%;
   background-color: #aaa;
   margin: 0 0 4.5rem 0;
   padding-right: 3rem;
}
.arrow::before,
.arrow::after {
   content: '';
   width: 21px;
   height: 6px;
   background-color: #fff;
   position: absolute;
   border-radius: 3px;
}
.arrow::before {
   transform: translate(19.5px, 21px) rotate(45deg);
}
.arrow::after {
   transform: translate(8px, 21px) rotate(-45deg);
}

/* iframe */
iframe {
   width: 100%;
   margin: 3rem 0;
}
/* レイアウトここまで
-----------------------------------------------*/

/* ヘッダー　
-----------------------------------------------*/
header {
   min-width: 375px;
   height: auto;
   background-color: #262626;
   margin: auto;
}
.header-box {
   min-width: 360px;
   height: auto;
   margin: 5px;
   border: solid .5px #c9c95a;
}
h1 {
   color: #f78a31;
   font-size: 1rem;
   font-weight: bold;
   padding-top: .75rem;
   margin: .25rem .8rem 0 .8rem;
}
.parallel {
   min-width: 370px;
   height: auto;
   display: flex;
   justify-content: center;
}
ul.gloval-menu {
   width: auto;
   height: auto;
   display: flex;
   gap: .35rem;
   padding: 1rem 1rem .75rem 0;
}
.gloval-menu  li {
   list-style-type: none;
   color: #aaa9a9;
   font-size: .65rem;
   font-weight: normal;
   letter-spacing: 0.08rem;
   margin-top: .3rem;
}
.gloval-menu li:hover {
   color: #f8f870;
}
li.current-page {
   color: #f8f870;
}

/* ヘッダーのスクロール部分 */
@property --scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-direction {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes setScrollProps {
  to {
    --scroll: 1000;
    --scroll-delayed: 1000;
  }
}
:root {
  animation: setScrollProps linear both;
  animation-timeline: scroll(root);
   --header-effect-duration: .5s;
}
body {
   transition: --scroll-delayed calc(var(--header-effect-duration) + .01s);
   --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
   --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
   --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));   
}
header {
   position: fixed;
   z-index: 1;
   inset: 0 0 auto;
   will-change: transform;
   transition: transform var(--header-effect-duration);
   transform: translateY(var(--translate));
   
   @container style(--scroll-direction: 0) {
      transition-delay: calc(infinity * 1s);  
   }

   @container style(not (--scroll-direction: 0)) {
      transition-delay: 0s;  
   }

   @container style(--scroll-direction: -1) {
      --translate: 0;
   }

   @container style(--scroll-direction: 1) { 
      --translate: -100%;
   }   
}
/* ヘッダーのスクロール部分ここまで */

/* フッター
 ---------------------------------------*/
footer {
   min-width: 375px;
   height: auto;
   margin: auto;
   background-color: #161616;
   color: #fff;
   font-size: .5rem;
}
.footer-box {
   color:#cccbcb;
   min-width: 370px;
   padding: .5rem .75rem;
}
.to-one-sentence {
   display: flex;
   gap: .25rem;
}
.open-to-close {
   padding: .25rem 0;
}
.address {
   margin-top: -.05rem;
   border-top: solid 1px #9b9a9a;
   padding: .25rem 0;
}
.e-mail_and_sns {
   display: flex;
   justify-content: space-between;
}
.sns-links {
   display: flex;
   justify-content: right;
   gap: .5rem;
   margin: -.5rem .25rem 0 0;
}
.e-mail a {
   color: #fff;
   font-size: .65rem;
}
.e-mail a:hover {
   color: #ffd000;
}
.line-on-left {
   border-left: dotted 1px #fff;
   margin-top: .25rem;
   padding-top: .25rem;
}
#copyright {
   text-align: center;
   padding: .75rem 0;
}
/* フッターここまで
---------------------------------------*/

/* Topページ
---------------------------------------*/
/* スライド部分 */
.slider-container {
   position: relative;
   width: 100%;
   height: 0;
   padding-top: 3.75rem;
   padding-bottom: 71%;
   object-fit: cover;
   overflow: hidden;
   background: linear-gradient(to bottom, rgb(25, 25, 25), rgba(255, 0, 0, 0));
}
.slider {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0 auto;
}
.slider-item {
   position: absolute;
   object-fit: cover;
	top: 0;
	left: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 35s;
	animation-iteration-count: infinite;
}
.slider-item img {
   min-width: 375px;
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	80%{
		opacity: 0;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.slider div:first-of-type{
	background-image: url(../images/craftbeer-s.webp);
}
.slider div:nth-of-type(2){
	background-image: url(../images/beer-tap-s.webp);
	animation-delay: 7s;
}
.slider div:nth-of-type(3){
	background-image: url(../images/kitchen-s.webp);
	animation-delay: 14s;
}
.slider div:nth-of-type(4){
	background-image: url(../images/woody-s.webp);
	animation-delay: 21s;
}
.slider div:last-of-type{
	background-image: url(../images/beer&smile-s.webp);
	animation-delay: 28s;
}  
.slider-desktop {
   display: none;
}
/* スライド部分ここまで　 */

/* ポエム部分 */
.container {
   text-align: center;
}
.top-page-h2 {
   margin-top: -5rem;
   margin-bottom: 1rem;
   font-size: 1rem;
}
.pictgram-moon {
   width: 28px;
   height: auto;
   margin: auto;
}
.poem {
   color: #585858;
   font-size: .75rem;
   line-height: 1.3;
   margin: 1.5rem auto 2.5rem;
}
.sentence-1 {
   margin-bottom: .4rem;
}
.sentence-2 {
   margin-top: 1.75rem;
   margin-bottom: .75rem;
}
.sentence-3 {
   margin: 1.5rem 0 3rem 5rem;
}
.bar-name {
   text-align: center;
   margin: -3rem 0 0 7.5rem;
}

/* 日替わりメニュー部分 */
.daily-food_menu {
   min-width: 340px;
   height: auto;
   line-height: 1.25;
   margin-right: auto;
   margin-left: auto;
   padding: 0 4rem;
}
.headline {
   color: #707070;
   font-size: 1.75rem;
   text-align: center;
   margin: 5rem 0 2rem 0;
}
.daily-special {
   height: auto;
   margin-top: 1.25rem;
   margin-right: auto;
   margin-bottom: 1.5rem;
   margin-left: auto;
}
.name-and-price {
   display: flex;
   justify-content: space-between;
   border-bottom: dotted 2px #363636;
}
.name-and-price p {
   font-size: 1rem;
   font-weight: bold;
   margin-bottom: .25rem;
}
.discription {
   font-size: .75rem;
   margin-top: .25rem;
}
.price {
   background-color: #f8f870;
}
.menu-additional_notes {
   font-size: .75rem;
   text-align: left;
   padding: 1rem 0 1.5rem 5rem;
}

/* ビアジョッキと英字部分 */
.cheers {
   min-width: 375px;
   height: auto;
   font-size: 1.5rem;
   text-align: center;
   line-height: 1.2;
   padding-top: 8rem;
}
.cheers img {
   width: 64px;
   margin: auto;
   padding: .5rem;
}

/* コマーシャル部分 */
.commercial {
   min-width: 375px;
   height: 418px;
   text-align: center;
   background-image: url(../images/golden-s.png);
   background-repeat: none;
   margin: -6rem auto 0;
}
.information-text p{
   color: #1a1a1a;
   font-size: .75rem;
   font-weight: bold;
   line-height: 1.45;
   margin-bottom: 3rem;
   padding-top: 6rem;
}
/*  Topページここまで
---------------------------------------*/


/*  Beerページ
---------------------------------------*/
.beer-container {
   min-width: 375px;
   height: auto;
   margin: -5rem auto 0;
   padding: 0 3rem 8rem;
}
.name-and-copy {
   display: flex;
   justify-content: space-between;
   border-bottom: dotted 2px #363636;
}
.name-and-copy p{
   font-weight: bold;
   margin-bottom: .25rem;
}
.beers {
   margin: 3rem 0 2rem;
}
.flex-container {
   display: flex;
}
.kinds {
   background-color: #f8f870;
}
.component {
   text-align: right;
   margin-right: .75rem;
}
.beer_picture {
   width: 25%;
   height: auto;
   margin: .75rem .5rem 0;
}
.beer_discription{
   width: 260px;
   margin: 1.5rem auto;
   padding-left: .5rem;
   font-size: .85rem;
}
/*  Beerページここまで
---------------------------------------*/


/*  Menuページ
---------------------------------------*/
.container_menu {
   min-width: 375px;
   padding: 12rem .75rem;
}
.menu-h2 {
   text-align: center;
   margin-top: -5rem;
}
.food-headline {
   margin-top: -5rem;
   margin-bottom: 1rem;
}
.drink-headline {
   margin-top: -4.25rem;
}
h4 {
   width: 188px;
   font-size: 1.5rem;
   text-align: center;
   margin-top: 2rem;
   padding: .2rem 1rem 0;
   background-color: #f8f870;
}
.word-and-pictgram img {
   margin: 2rem auto .25rem;
}
.box {
   background-color: #fbf7f7;
   margin: .5rem 0;
   padding: 0 1rem .1rem;
}
.grid {
   display: grid;
   gap: 2rem 1.75rem;
   grid-template-columns: repeat(2, 1fr);
   margin: 1rem 0 2rem;
}
.tag {
   overflow: visible;
   width: 100%;
   height: 100%;
}
.tag img {
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: 16px;
   display: block;
   margin-bottom: .25rem;
}
.tag p {
   font-size: .875rem;
}
.name_menu {
   font-size: .6rem;
   text-align: left;
   margin-left: .5rem;
}
p.memo {
   min-width: 160px;
   font-size: 0.65rem;
   line-height: 1.2;
   text-align: left;
   margin: .25rem .5rem;
}
.explanation {
   font-size: 1rem;
   text-align: left;
   margin: 2rem 0 0 2rem;
}
.drink-menu {
   margin-left: 1.5rem;
}
.drink-menu_discription {
   padding: 1rem 0;
}
/* Menuページここまで
--------------------------------------*/


/* Reserveページ
-------------------------------------- */
.reserve-container {
   margin-top: -5rem;
}
.party-menu_01 img{
   width: 370px;
   height: auto;
   margin: 2rem auto 3rem;
}
#main_contact {
	min-width: 375px;
	height: auto;
   margin: 0 auto 10rem;
}

/* フォームの部分背景 ------- */

#sheet {
	width: 370px;
	height: auto;
   margin: 1rem auto;
   padding: .5rem 2rem 2rem;
   border: solid 1px #707070;
}

/* テーブル ------- */
table {
	width: 300px;
	height: 100px;
   margin: 1.5rem auto 0;
	font-size: 13px;
   border-collapse: separate;
   border-spacing: 7px;
}
/* テーブルのセル部分 ------- */
table th {
   text-align: left;
   height: 1rem;
}
table td {
	background-color: #f3f2f2;
	border: 1px solid  #707070;
	text-align: center;
}
.send {
   width: 100px;
   height: 50px;
   color: #fff;
   text-align: center;
   background-color :#5a5a5a;
   padding: .75rem 0 1rem;
   margin: 1.5rem auto .5rem;
   transition: .5s;
}
.send:hover {
   scale: 1.1;
}
.notice-memo {
   text-align: center;
   font-size: .7rem;
   line-height: 1.2;
}
/* Reserveページここまで
-------------------------------------- */


/* Accessページ
-------------------------------------- */
.access-container {
   min-width: 375px;
   height: auto;
   margin: 5rem auto 3rem;
   padding: 0 3rem 6rem;
}
.landmark {
   text-align: left;
   margin-left: 2rem;
}
.where, .phone {
   margin: -3rem 0 1rem;
   font-weight: bold;
}
.access-headline {
   color: #707070;
   font-size: 1.75rem;
   text-align: left;
}
.phone a {
   font-size: 1rem;
   font-weight: bold;
}
.phone a:hover {
   color: #f78a31;
}
.memo-1 {
   font-size: .8rem;
   font-weight: normal;
}
.memo-2 {
   font-size: .8rem;
   font-weight: normal;
}
#location-map {
   max-width: 720px;
   max-height: 320px;
   margin: 0 auto;
}
.guide{
   font-size: .6rem;
   margin-top: .5rem;
}
.guide-2 {
   font-size: 1rem;
   margin: -2rem 0 0 2rem;
}

/* Accessページここまで
-------------------------------------- */


/* Greetingsページ
-------------------------------------- */
#concept {
   min-width: 375px;
   height: auto;
   margin: auto;
}
.concept-container {
   min-width: 375px;
   font-size: .8rem;
   text-align: left;
   line-height: 1.75;
   margin: 2rem auto 4rem;
}
.title {
   text-align: left;
   font-size: 1rem;
   font-weight: normal;
   padding: 2rem 0 2rem 3rem;
}
.greetings {
   margin: auto;
   padding: 0 4rem;
}
.off-to-the-right {
   margin-top: 3rem;
   margin-left: 2rem;
   font-size: .75rem;
}

#owner-signature {
   margin-left: 5rem;
}
#owner-signature p {
   margin: -.5rem 0 0 2rem;
}
/* カウンター画像部分 */
.counter-and-light {
   min-width: 375px;
   height: auto;
   margin: auto;
   background-image: url(../images/bokehcounter-s.png);
}
h3 {
   text-align: center;
   padding-top: 4rem;
}
.pictgram img{
   width: 12%;
   margin: auto;
}
.to-center {
   font-size: .65rem;
   text-align: center;
   line-height: 1.25;
   padding-bottom: 6rem;
}
/* Greetingsページここまで
-------------------------------------- */


/* デスクトップ版
-------------------------------------- */
@media (min-width: 768px) {

   /* 全体 */ 
   .wrapper {
   max-width: 1120px;
   }

   /* レイアウト -------------------- */

   /* 見出し部分：黒帯に白字部分 */
   .reader-belt {
   max-width: 1120px;
   height: auto;
   font-size: 1.25rem;
   padding-left: 2.5rem;
   }
   /* 2行を1列に並べる */
   .to-one-sentence {
   display: flex;
   }
   
   /* ボタン部分 ---------- */

   /* 予約ページに飛ぶボタン */
   .bg-gold {
   width: 200px;
   height: auto;
   margin: auto;
   padding: 1rem;
   font-size: 1.75rem;
   border-radius: 8px;
   }
   .bg-gold a:hover {
   display: block;
   color: #fafa1d;
   }

   /* MENUページに飛ぶボタン */
   .view-fullmenu {
   width: 200px;
   height: auto;
   margin-top: 5rem;
   margin-bottom: 0;
   padding: 1.5rem 1.5rem 1.25rem;
   font-size: 1.65rem;
   border-radius: 8px;
   }
   .view-fullmenu a:hover {
   display: block;
   color: #fff;
   }

   /* 上に戻る矢印のボタン部分 */
   .scroll-btn {
   width: 50px;
   height: 50px;
   border-radius: 8%;
   background-color: #aaa;
   margin: 0 1rem 6rem 0;
   padding-right: 3rem;
   }
   .arrow::before,
   .arrow::after {
   content: '';
   width: 21px;
   height: 6px;
   background-color: #fff;
   position: absolute;
   border-radius: 3px;
   }
   .arrow::before {
   transform: translate(19.5px, 21px) rotate(45deg);
   }
   .arrow::after {
   transform: translate(8px, 21px) rotate(-45deg);
   }

   /* ヘッダー --------------------- */
   header {
   max-width: 1120px;
   min-width: 768px;
   height: auto;
   }
   h1 {
   width: 450px;
   font-size: 2rem;
   margin: -.2rem 0 .25rem 3rem;
   }
   ul.gloval-menu {
   margin: -1.25rem 1.25rem 0 0;
   }
   .parallel {
   justify-content: space-between;
   max-width: 1100px;
   }
   .parallel li {
   font-size: 1.25rem;
   margin: 1.5rem .75rem 0 0;   
   }
   

   /* フッター ------------------------*/
   .footer-box {
   max-width: 1100px;
   margin-right: auto;
   margin-left: auto;
   padding: 1rem;
   }
   .open-to-close, .address {
   max-width: 700px;
   margin: auto;
   padding-left: 1.5rem;
   font-size: .75rem;
   }
   .e-mail a {
      font-size: .75rem;
   }
   .sns-links {
      margin: -2rem 2rem 0 0;
   }
   #copyright {
      font-size: .75rem;
   }
   
   /*  Topページ
   -------------------------------------*/
   /* スライド部分 */
   @media (min-width: 768px) {
      .slider-desktop{
         display: block;
      }
   }
   .slider-container {
   position: relative;
   max-width: 1120px;
   width: 100%;
   height: 0;
   margin: auto;
   padding-top: 4.7rem;
   padding-bottom: 61%;
   object-fit: cover;
   overflow: hidden;
   }
   .slider {
   display: none;
   }
   .slider-desktop {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: auto;
   }
   .slider-item-desktop {
   position: absolute;
   object-fit: cover;
	top: 0;
	left: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 35s;
	animation-iteration-count: infinite;
   }
   .slider-desktop div:first-of-type{
	background-image: url(../images/craftbeer-s.webp);
   }
   .slider-desktop div:nth-of-type(2){
	background-image: url(../images/beer-tap-s.webp);
	animation-delay: 5s;
   }
   .slider-desktop div:nth-of-type(3){
	background-image: url(../images/kitchen-s.webp);
	animation-delay: 12s;
   }
   .slider-desktop div:nth-of-type(4){
	background-image: url(../images/woody-s.webp);
	animation-delay: 18s;
   }
   .slider-desktop div:last-of-type{
	background-image: url(../images/beer&smile-s.webp);
	animation-delay: 24s;
   }

   /*　文章の部分 */
   .container {
   max-width: 1120px;
   margin-top: -9rem;
   }
   .pictgram-moon {
   width: 42px;
   margin: auto;
   }
  .top-page-h2 {
   margin: 4rem 0 2rem;
   font-size: 1.5rem;
   }
   .poem {
   font-size: .95rem;
   line-height: 1.45;
   margin: 2rem auto 3rem;
   }
   .bar-name {
   font-size: 1rem;
   margin: -3rem 0 4rem 7.5rem;
   }

   /* 日替わりメニュー部分 */
   .headline {
   font-size: 2.5rem;
   margin-top: 6rem;
   margin: 6rem auto 2rem;
   }
   .box-1, .box-2, .box-3 {
   display: flex;
   justify-content: space-between;
   }
   .move-to-side {
   margin-left: 5rem;
   }
   .daily-special {
   width: 280px;
   height: auto;
   font-size: 1rem;
   margin-right: auto;
   margin-bottom: .25rem;
   margin-left: auto;
   }
   .daily-food_menu {
   max-width: 1000px;
   line-height: 1.5;
   margin: auto;
   padding-bottom: 3rem;
   }
   .name-and-price {
   font-size: 1rem;
   }
   .discription {
   text-align: left;
   font-size: .75rem;
   }
   .menu-additional_notes {
   font-size: .7rem;
   text-align: left;
   padding: 2rem 6rem 0 2rem;
   }

   /* ビールのピクトグラム部分 */
   .cheers {
   font-size: 1.5rem;
   line-height: 1.2;
   }
   .cheers img{
   width: 82px;
   }
   /* コマーシャル部分 */
   .commercial {
   max-width: 1120px;
   background-image: url(../images/golden.png);
   background-repeat: none;
   background-position: top -30px left;
   }
   .information-text p{
   font-size: .85rem;
   font-weight: normal;
   line-height: 1.5;
   margin-bottom: 2rem;
   }


   /*  Beerページ
   ---------------------------------------*/
   .beer-container {
   min-width: 768px;
   max-width: 1120px;
   height: auto;
   margin: -8rem 0 0 -1rem;
   }
   .name-and-copy {
   min-width: 300px;
   }
   .beers {
   min-width: 300px;
   margin: 2rem 0 1rem;
   padding: 0 2rem;
   }
   .flex-container {
   display: flex;
   justify-content: space-between;
   }
   .beer_picture {
   max-width: 80px;
   height: auto;
   margin: 1.5rem .5rem 0;
   }
   .beer_discription {
   min-width: 180px;
   height: auto;
   margin: 2rem auto 0;
   font-size: .85rem;
   }
   .beers_box-1,
   .beers_box-2,
   .beers_box-3 {
   display: flex;
   justify-content: center;
   min-width: 700px;
   margin: 0;
   }
   .beers_box-4 {
   display: flex;
   justify-content: left;
   min-width: 700px;
   margin-left: 6rem ;
   }

   /* Menuページ
   ---------------------------------*/
   .container_menu {
   min-width: 768px;
   max-width: 1120px;
   height: auto;
   }
   .grid {
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(4, 1fr);
   padding: 0 4rem;
   text-align: center;
   }
   .word-and-pictgram img {
   margin-top: 3rem;
   }
   h4 {
   margin-left: 4.5rem;
   }
   .tag img {
   margin-bottom: .5rem;
   }
   p.name_menu {
   font-size: 1rem;
   font-weight: bold;
   }
   p.memo {
   width: 180px;
   font-size: 0.8rem;
   line-height: 1.2;
   text-align: left;
   margin: .25rem auto 0;
   }
   .drink-menu {
   display: flex;
   justify-content: center;
   min-width: 700px;
   margin: 0;
   text-align: left;   
   }
   .drink-box {
   min-width: 300px;
   margin: 2rem 0 1rem;
   padding: 0 2rem;
   }
   .explanation {
   text-align: right;
   margin-right: 6rem;
   }

   
   /* Reserveページ
   ---------------------------------- */
   .reserve-container {
   min-width: 768px;
   max-width: 1120px;
	height: auto;
  
   }
   #main_contact {
   display: flex;
   justify-content: space-between;
   margin: 0 3rem 6rem;
   }
   .party-menu_01 img{
   margin: 1rem 0 0 1rem;
   }
   #sheet {
   margin-left: 1rem;
   }
   .notice-memo {
   font-size: .75rem;
   line-height: 1.3;
   text-align: center;
   }

   /* Accessページ
   --------------------------------- */
   .access-container {
   max-width: 1120px;
   height: auto;
   margin: -3rem auto 0;
   padding: 0 6rem 8rem;
   }
   .landmark {
   max-width: 1000px;
   height: auto;
   display: flex;
   justify-content: center;
   gap: 4rem;
   margin: 0 auto 6rem;
   }
   .where {
   margin-top: 1rem;   
   }
   .access-headline {
   font-size: 2.5rem;
   margin-bottom: 1rem;
   }
   .bar-address {
   font-size: 1.25rem;
   }
   .phone a {
   font-size: 1.25rem;
   }
   .memo-1 {
   font-size: .8rem;
   font-weight: normal;
   margin-left: .25rem;
   }
   .memo-2 {
   font-size: .8rem;
   font-weight: normal;
   margin: 1rem 0 .25rem;
   }
   /* iframe */
   /*iframe {
   aspect-ratio: 16 / 9;
   margin: auto;
   overflow: hidden;
   }*/
   #location-map {
   margin-top: -4rem;
   }
   .guide {
   font-size: .65rem;
   font-weight: normal;
   }
   .guide-2 {
   margin-top: 1rem;
   }
   


   /* Greetingsページ
   ----------------------------------- */
   #greetings {
   max-width: 1120px;
   height: auto;
   }
   .title {
   font-size: 1.5rem;
   margin-top: -3rem;
   padding-left: 11rem;
   }
   .concept-container {
   max-width: 1000px;
   height: auto;
   margin: auto;
   font-size: 1rem;
   line-height: 1.75;
   padding-bottom: 6rem;
   }
   .greetings {
   padding: 0 9rem;
   line-height: 1.5;
   }
   .to-one-line {
   display: flex;
   }
   .off-to-the-right p {
   text-align: right;
   font-size: .85rem;
   margin: 3rem 4rem 0 0;
   }
   #owner-signature {
   float: right;
   margin-right: 12rem;
   }

   /* カウンター画像部分 */
   .counter-and-light {
   max-width: 1120px;
   min-height: 460px;
   margin: 6.5rem auto 0;
   padding-top: 3.5rem;
   background-image: url(../images/bokehcounter.png);
   }
   h3 {
   font-size: 1.5rem;
   text-align: center;
   }
   .pictgram img{
   width: 12%;
   margin: auto;
   }
   .to-center {
   font-size: 1rem;
   text-align: center;
   line-height: 1.25;
   margin-top: 2rem;
   }


}