/* 
* {
  outline: 2px solid white;
}
 */

* {
  font-family: "ヒラギノ丸ゴ Pro W4", Arial, Helvetica, sans-serif;
} 
 
body {
    font-size: 14px;
    /* width: 750px; */
    width: 95vw;
    /* margin: 5px;
    padding: 0; */
    background-color: #B2DD3E;
    margin-right: 0px;
  }

.logo {
  background-color: #B2DD3E;
  /* padding: 20px 5px 0px 0; */
  margin:  20px 10px 0px 0;
  width: 100%;
  /* padding: 0 auto; */

}

#logo {
  display: block;
  width: 100%;
  margin: 20px auto;
  /* padding: 0 auto; */
  border-radius: 10px;
  /* box-shadow: 5px 5px 5px #333; */
  box-shadow: 5px 5px 5px #D35400;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
  /* border: 1px solid white; */
}

a {
  text-decoration: none; /* 下線を消す */
}

.container {
  font-size: 14px;
}

h1, h2 {
  font-size: 16px;
  /* white-space: nowrap; */
  display: inline;
  padding: 0;
  margin: 0;
  font-weight: normal;
  text-align: justify;
  /* white-space: nowrap; */
  /* width: 90%; */
  letter-spacing: -0.1em;
}

header p {
  margin: 0 0 0 0px;
  font-size: 14px;
}

header p a {
  color: white;
}


header p {
  margin: 0 0 0 0px;
  font-size: 1em;
  color: #2C3317;
  /* color: lime; */
  font-weight: normal;
}

header p a {
  /* color: white; */
  color: #2C3317;
  /* color: lime; */
}



.add_bdr_btm {
    /* border-bottom: 1px solid yellowgreen; */
    margin: 0 0 5px 0;
    border-bottom: 1px solid #094;
}


.container {
  margin: 0 0 0 0 ;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: 165px 1fr 130px;
  /* grid-template-rows: 100px 1fr 130px; */
  grid-template-rows: auto 1fr 130px;
  grid-auto-rows: minmax(100px, auto); 
  width: auto;
}

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: auto;
  background-color: #B2DD3E;

  /* padding: 10px 10px 15px 10px; */
  font-size: 16px;
  font-weight: bold;

  /* color: #FFF; */
  color: #2C3317;
  /* -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000; */

  text-align: center;
  /* text-shadow: 3px 4px 3px rgb(61 70 70); */
}


.nav {
  grid-column-start: 1;
  grid-column-end: auto;
  grid-row-start: 2;
  grid-row-end: auto;
  background-color:cadetblue;

}

.footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: auto;
  background-color:darkgrey;
}

.main {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: auto;
  background-color:#B2DD3E;
}


.container {
  /* width: 95vw; */
  width: 100vw;
  /* border: 1px solid black; */
}

/*-----------------------------------------------------------------------------------------------*/

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  /*
  position: relative;
  */
  position:fixed;
  top: 5px;
  right: 5px;
  background-color: #2D5A27;
background-color: rgba(45, 90, 39, 0.8); 

  /* background-color: #4B5320; */

  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  margin: 10px 20px 10px 10px;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  background: #EEE;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;

  overflow-y: auto; /* これでメニュー内がスクロール可能になります */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */  
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}


/* --- 以下の部分を書き換えて（または上書きして）ください --- */

/* ハンバーガーアイコンの設置スペース（高さを少し広げます） */
.drawer_open {
  display: flex;
  height: 50px; /* 40pxから50pxに広げて文字スペースを確保 */
  width: 40px;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 5px;
  right: 5px;
  background-color: #2D5A27;
background-color: rgba(45, 90, 39, 0.8); 
  z-index: 100;
  cursor: pointer;
  margin: 10px 20px 10px 10px;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #EEE;
  transition: 0.5s;
  position: absolute;
}

/* 3本線の位置調整（文字を入れるため少し上にずらします） */
.drawer_open span {
  top: 18px; /* 真ん中の線の位置を調整 */
}

/* 三本線の一番上の棒 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒 */
.drawer_open span:after {
  top: 8px;
}

/* ★「MENU」の文字を追加 */
.drawer_open::after {
  content: 'MENU'; /* 表示する文字 */
  position: absolute;
  bottom: 5px;     /* 下から5pxの位置 */
  left: 0;
  width: 100%;     /* 中央揃えにするため */
  text-align: center;
  font-size: 8px;  /* 文字のサイズ */
  color: #EEE;     /* 文字の色（線と同じ色） */
  font-weight: bold;
  letter-spacing: 0.05em;
  transition: 0.5s; /* 消える時の動き */
}

/* アイコンがクリックされたら「MENU」の文字を消す */
#drawer_input:checked ~ .drawer_open::after {
  opacity: 0;      /* ×印の時は文字を透明にする */
}

/* --- 以下、既存の「クリック後の×印」や「メニュー本体」のCSSは変更なし --- */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* ...（以下略）... */



/* ★クリックされた時（チェック時）の設定（閉じる） */
#drawer_input:checked ~ .drawer_open::after {
  content: '閉じる';  /* 文字を「閉じる」に変更 */
  opacity: 1;         /* 透明にせず表示したままにする */
  bottom: 2px;        /* ×印とのバランスを見て位置を微調整（任意） */
}


/* --- スマホ用の調整 --- */
@media screen and (max-width: 768px) {
  .footer-container {
    gap: 6px; /* ボタン同士の隙間も少し狭くするとスッキリします */
  }

  .footer-container button {
    padding: 6px 10px;  /* 上下6px、左右10pxに狭くする（元は10px/20px） */
    font-size: 13px;    /* 文字を少し小さくして1行に収まりやすくする */
  }

  .sp-only {
    display: inline-block !important;
  }
}







/*--------------------------------------------------------------
-- heaeder 領域
---------------------------------------------------------------*/

#header_content1 {
	width: auto;
  /* height: 141px; */
  /* height: auto; */
	/* background-image: url(./image/header.gif); */


    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-size: cover; /* 背景画像の縦横比を維持 */
  /* background-color: #094; */
}

  .header_float_img {
      display: block;
      position:relative;
      top:120px;
      margin: 0 auto;
  }

  #header_content1 .aaa {
      max-width:100%;
      height: auto;
  }

#header_content2 img {
  display: inline-block;
  /* border: 1px solid white; */
  height: 25px;
  vertical-align: bottom;
}


#header_content2_left {
  display: inline-block;
  /* border: 1px solid white; */
  width: 623px;
  
}

#header_content2 .img {
  display: inline-block;
  /* border: 1px solid white; */  
}



/* 
#header_content1, #header_content2 {
  display: none;
}
 */

#header_content3 {
	width: 90%;
  /* height: 141px; */
  /* height: auto; */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-size: cover; /* 背景画像の縦横比を維持 */
  background-color: #094;
  margin: 0 auto;
  margin-top: 10px;
}

    #header_content3 .aaa { 
        padding: 2px;
        /* border: 5px solid #e8bf85;
        box-shadow: 1px 1px 3px #999; */
        /* border: 5px solid skyblue; */
        /* box-shadow: 1px 1px 3px #999; */

    }


/* ---------------------------------------------------
// main ページ
--------------------------------------------------------*/

.mainTopLink {
  width: 90%;
  height: auto;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
}

    .mainTopLink a {
      display: inline-block;
      width: 32%;
      height: auto;
      /* margin: 0 2px 0px 2px; */
  /* margin: 0 auto; */

    }

.image-opacity {
  opacity: 1.0; /* 通常時の不透明度 (完全に不透明) */
  transition: opacity 0.3s ease; /* 変化を滑らかにする */
}

.image-opacity:hover {
  opacity: 0.5; /* ホバー時の不透明度 (50%透明になる) */
}


.main_title {
  /* padding: 1rem 2rem; */
  padding: 0px 10px 5px 5px;
  margin: 5px 10px 5px 5px;
  color: #fff;
  background: #094;
  -webkit-box-shadow: 5px 5px 0 #007032;
  box-shadow: 3px 3px 0 #007032;
  /* -webkit-box-shadow: 5px 5px 0 white; */
  /* box-shadow: 3px 3px 0 white; */
}

.main_textArea{ 
  background-color: #ffffff;
  margin: 5px 15px 10px 15px;
  padding: 5px 10px 5px 5px;
  border: solid 1px #aaaaaa;
  color: #333333;
  font-size: 12px;
}

.update_infoArea, .infoArea {
  margin: 2px 2px 2px 2px;
  /* border: 1px solid #333333;   */
}

.updateGrid {
    display: grid;
    /* grid-template-columns: 22% 78%; */
    grid-template-columns: 22fr 78fr;
    grid-template-rows: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: #333333;
    background-color: #FFFFFF;
    /* border-bottom: 1px solid yellowgreen; */
}

.updateGrid_noborder {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: #333333;
    background-color: #FFFFFF;
}

    .update_date {
      /* 列の1本目から4本目のグリッドラインまで */
      grid-column-start: 1;
      grid-column-end: auto;
      /* 行の1本目から2本目のグリッドラインまで */
      grid-row-start: 1;
      grid-row-end: auto;
      padding: 0px 0px 0px 0px;
      margin: 2px 0px 0px 0px;
      font-size: 16px;
      display: block;

      padding: 3px 3px 0px 3px;
      margin: 3px 3px 0px 3px;
      font-weight: 500;
      font-size: 16px;

      /* border: 1px solid blue; */
    }

    .update_headline {
      /* 列の2本目から3本目のグリッドラインまで */
      grid-column-start: 2;
      grid-column-end: auto;
      /* 行の2本目から3本目のグリッドラインまで */
      grid-row-start: 1;
      grid-row-end: auto;
      padding: 3px 3px 0px 0px;
      margin: 3px 3px 0px 0px;
      font-size: 16px;
      font-weight: bold;
      color: #006400;



      /* padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      font-size: 16px; */
      /* display: block; */
      /* border: 1px solid yellowgreen; */
    }

    .update_content {
      display: block;
      /* 列の3本目から4本目のグリッドラインまで */
      grid-column-start: 2;
      grid-column-end: auto;
      /* 行の2本目から3本目のグリッドラインまで */
      grid-row-start: 2;
      grid-row-end: auto;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
    }

    .update_content p {
      display: block;
      font-size: 1.2em;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
    }
    


/* 店舗情報 */

  .shop_title {
    display:inline-block;
    background-color: #ff0202;
    color: #ffffff;
    font-size: 14px;
    margin: 0px 3px 0px 15px;
    padding: 3px 5px 3px 5px;
    width: auto;
    border-radius: 5px;
  }
      .shop_title span {
        margin: 0 0 0 20px;
        padding: 0;
        font-size: 10px;
        text-align: right;
      }

          ul.shop_discript {
              margin-left: -10px;
          }    

          ul.shop_discript li::marker {
              color: #1e9f00;
          }    

img {
  max-width: 100%; /* 親要素の幅を超えないようにする */
  height: auto;    /* アスペクト比を保ちながら高さを自動調整 */
  display: block;  /* インライン要素の余白をなくす */
}

.shop_west_photo {
  display: block;
  width: 60%;  
  margin: 0 auto;
}

/*-------------------------------------------------------------*/
#footer {
	margin: 5px 0 0 0;
	/* width: 100%; */
	width: 100vw;
	height: auto;
	text-align: center; 
	font-size : 12px; 
  position: fixed;
  bottom: 0;
  background-color: #B2DD3E;
  opacity : 0.8;  
  margin: 0 auto;
  /* padding: 0 auto; */
}
	#footer a{
		color: #000000;
		margin: 10px 10px 10px;

		display       : inline-block;
		border-radius : 5%;          /* 角丸       */
		font-size     : 10pt;        /* 文字サイズ */
		text-align    : center;      /* 文字位置   */
		cursor        : pointer;     /* カーソル   */
		padding       : 10px 10px;   /* 余白       */
		background    : #7f7f00;     /* 背景色     */
		color         : #ffffff;     /* 文字色     */
		line-height   : 1em;         /* 1行の高さ  */
		transition    : .3s;         /* なめらか変化 */
		box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
		border        : 2px solid #7f7f00;    /* 枠の指定 */
	}

	#footer a:hover {
		box-shadow    : none;        /* カーソル時の影消去 */
		color         : #7f7f00;     /* 背景色     */
		background    : #ffffff;     /* 文字色     */
	}

/* ---------------------------------------------------
// footer 領域
--------------------------------------------------------*/
.footer {
  /* 列の1本目から4本目のグリッドラインまで */
  grid-column-start: 1;
  grid-column-end: 3;
  /* 行の3本目から4本目のグリッドラインまで */
  grid-row-start: 3;
  grid-row-end: auto;
  background-color:#B2DD3E;
  font-size: 10px;
  color: white;
}

footer {
  padding: 5px 0 50px 0px;
}

footer div {
  margin: 0px 0 0 5px;
}

footer span, footer p, footer div p, .footer_title {
  display: inline-block;
  width: 80px;
}

footer ul.footer_contents {
  display: inline;
  list-style: none; /* または list-style-type: none; */
  padding-left: 0; /* 左の余白も消す場合 */
}

footer ul.footer_contents li {
  display: inline;
  border-left: 1px solid white;
}
footer ul.footer_contents a {
  display: inline;
  color: white;
  padding: 0 5px 0 5px;
}
 
#copyright {
  border-top: 2px solid #bbe44c;
  margin: 5px 5px 0 5px;
  text-align: center;
}

    #copyright a {
      color: white;
    }


/* ---------------------------------------------------
// <nav>　メニュー表示 領域
--------------------------------------------------------*/
.nav_content {
  background-color:#B2DD3E;
  
}

.NaviList {
  background-color:#B2DD3E;

}

.NaviList {
  background-color:#B2DD3E;

}

/*------------------------------------------------------------ 
--   navi 領域
------------------------------------------------------------*/
.menu_title {
    background-color: #ff0202;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    margin: 10px 5px 0px 5px;
    padding: 2px 2px 2px 5px;
}

    .menu_title p {
        margin: 0 0 0 20px;
        padding-right: 5px;
        font-size: 10px;
        text-align: right;
    }


ul.NaviList {
    list-style: none; /* 点を消す */
    padding-left: 0; /* 左の余白を消す */
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
}
    
      .NaviList a {
              display: block;
              width : auto;
              background-image: linear-gradient(0deg, #f5e756, #5df7a8);
              padding: 3px 3px 3px 3px;
              margin: 3px 3px 3px 3px;
              margin: 10px;
              /* border: 1px solid #ffffff ; */
              text-align: center;
              border-radius: 5px;
              color: brown;
              font-style: italic;

        }

        .NaviList a:hover {
              background-image: linear-gradient(180deg, #f5e756, #5df7a8);
              /* padding: 2px 2px 4px 4px;
              margin: 3px 3px 3px 3px; */

        }