/* ===== 見出し・タイポグラフィ装飾（残すべき部分） ===== */

.h1-img{
	margin:10px 0;
}
.h1-img img{
width:100%;
}
	
.h2-top{
	text-align:center;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.8em;
	line-height: 1.6em;
}
.h2-sub{
	margin:10px 0;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.4em;
	line-height: 1.2em;
}
.h2-people{
	margin:15px 0;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.4em;
	line-height: 1.2em;
}
.h2-border{
	margin:15px 0 35px 0;
	border-top:1px solid #d0ccbd;
	padding-top:35px;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.4em;
	line-height: 1.2em;
}
.h2-simple{
	font-size:1.4em;
	line-height: 1.2em;
}
.h2-naganoinochi{
	margin:40px 0 15px 0;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.4em;
	line-height: 1.2em;
	border-left:3px solid #e26161;
	padding-left:10px;
}
.h3-sub{
	margin:40px 0 15px 0;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.1em;
	line-height: 1.1em;
	color: #261b1b;
	border-left:3px solid #d0ccbd;
	padding-left:10px;
}
.h2-sm{
  font-size: 1.25rem;
}
.h4-sub-nomgn{
	margin:15px 0;
	font-size:1.1em;
	line-height: 1.1em;
	color: #261b1b;
	border-left:3px solid #d0ccbd;
	padding-left:10px;
}
.h3-sub-nomgn{
	margin:15px 0;
	font-size:0.8em;
	line-height: 1.1em;
	color: #261b1b;
	border-left:3px solid #d0ccbd;
	padding-left:10px;
}
.h3-th{
	color: #261b1b;
	border-left:2px solid #d0ccbd;
	padding-left:8px;
}
.h3-border{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1.1em;
	line-height: 1.2em;
	color: #261b1b;
	border-bottom:1px solid #d0ccbd;
	padding-bottom:10px;
	margin-bottom:10px;
	text-align:center;
}
.fs-08{
  font-size: 0.8em;
}
.fs-095{
  font-size: 0.95rem;
}
.ps-1em{
  padding-left: 1em;
}
.text-xs{
  font-size: 0.8rem !important;
  line-height: 1.7;
}
.text-red{
  color:#ff543d !important;
}

.link-list{
  list-style: none;
  padding-left: 0;
}

.link-list li{
  margin-bottom: 0.6rem;   /* 行間 */
  position: relative;
  padding-left: 1.2em;     /* 点の分のスペース */
}

.link-list li::before{
  content: "・";
  position: absolute;
  left: 0;
  font-size: 1.2em;   /* 少し大きく＝太く見える */
  font-weight: bold;
 color: #261b1b;
}

/* ===== 背景装飾（代替不可） ===== */
.gray-rows{
	padding:20px 0 20px 20px;
	background-color:#ededed;
	overflow: hidden;
	position: relative;
}
.fablic-rows{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding:20px;
  background-image:url(../images/bg_fablic.jpg);
  background-repeat: repeat;
  background-size: auto;
}
.canvas-rows{
	padding:20px;
	background-image:url(../images/bg_canvas.jpg);
	overflow: hidden;
	position: relative;
}
.cloth-rows{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding:20px;
  background-image:url(../images/bg_cloth.jpg) ;
  background-repeat: repeat;
  background-size: auto;
}
.marble-rows{
	padding:20px;
	background-image:url(../images/bg_marble.jpg);
	overflow: hidden;
	position: relative;
}

/* ===== Header for Bootstrap ===== */
.header-area {
    border-bottom: 1px solid #ddd;
}
.header-area a {
    color: #261b1b;
    text-decoration: none;
}
.header-area a:hover {
    text-decoration: underline;
    text-underline-offset:1px;
}
.header-logo img {
    height: 60px; /* ←ここでピクセル固定 */
}
/* フォント */
.header-nav a {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "MS PMincho", serif;
}

/* ===== コピー装飾 ===== */
.copy{
	text-align:center;
	margin-top:15px;
	font-family:"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","MS PMincho",serif;
	font-size:1.8em;
	line-height:1.6em;
}
.copy-s{
	text-align:center;
	margin-bottom:15px;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size:1em;
	line-height: 1.4em;
}

@media (max-width:768px){
  .copy{
    white-space: nowrap;
    font-size: clamp(20px, 5.8vw, 26px);
    letter-spacing: .01em;
  }
}

/* =====スライド内を基準にする===== */
#mainCarousel .carousel-item{
  position: relative;
  width: 100%;
  padding-top: 35.3%;   /* 1400:495 の比率 */
  overflow: hidden;
}

/* 通常スライド画像をフィット */
#mainCarousel .carousel-item > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== お知らせスライド ===== */
.news-slide{
  position: relative;
}

.news-slide-link{
  position: absolute;
  inset: 0;
  display: block;
}

/* 背景ぼかし */
.news-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(25px);
  transform: scale(1.2);
  opacity: .6;
}

/* 中央の元画像（比率維持） */
.news-main-img{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}

/* NEWバッジ */
.badge-new{
  position: absolute;
  top: 30px;
  left: 30px;
  background: #2f9e44;
  color: #fff;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 3;
}
/* =====スライド内を基準にする　ここまで===== */

/* ===== YouTube（Bootstrap ratioに置換予定だが一旦残す） ===== */
.youtube{
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.youtube iframe{
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
}

/* ===== ボックス装飾 ===== */
.box-waku{
	border:1px solid #261b1b;
	padding:25px;
}
.top-banner{
	border:1px solid #261b1b;
	padding:5px;
	line-height:1;
}

/* ===== 矢印（代替不可） ===== */
.arrow{
	position:relative;
	display:inline-block;
	padding-left:20px;
}
.arrow::before{
	content:'';
	width:6px;height:6px;
	border-top:2px solid #999;
	border-right:2px solid #999;
	transform:rotate(45deg);
	position:absolute;
	top:50%;left:0;
	margin-top:-4px;
}

/* ===== ページトップボタン（代替不可） ===== */
#fixedTop{
	right:10px;
	bottom:10px;
	width:50px;height:50px;
	line-height:50px;
	color:#fff;
	font-size:20px;
	text-align:center;
	display:none;
	background:#261b1b;
	position:fixed;
	z-index:9999;
	border-radius:25px;
	opacity:.2;
}
#fixedTop:hover{opacity:.5;}

/* ===== リンク色のみ維持 ===== */
a{color:#009607;}
a:hover{color:#009607;}

/* ===== Footer for Bootstrap ===== */
.footer-area{
    background:#f4f1e5;
    padding:40px 0;
}
.footer-area a{
    color:#261b1b;
    text-decoration:none;
}
.footer-area a:hover{
    text-decoration:underline;
    text-underline-offset:1px;
}
.footer-menu ul{
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.copyright{
	text-align:center;
	font-size:0.4em;
	margin:15px 0 5px 0;
}

/* ナビ1段目だけ明朝 */
.nav-mincho {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "MS Mincho",
    serif;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ===== Header layout for Bootstrap ===== */
.nav-sub a {
    display: inline-block;
    padding-left: 28px;   /* アイコンとの余白 */
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}
.nav-main a,
.nav-sub a{
    text-decoration: none;
    color:#261b1b;
}
.nav-main a:hover,
.nav-sub a:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
}
.navbar-nav .nav-link{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* ===== Bootstrap nav-link 対応 gnavi アイコン ===== */
.navbar-nav .nav-link[class*="gnavi-"]{
  position: relative;
  padding-left: 26px !important;
}
.navbar-nav .nav-link[class*="gnavi-"]::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.navbar-nav .gnavi-s1::before{
  background-image: url("/images/gnavi_s1.png");
}
.navbar-nav .gnavi-s4::before{
  background-image: url("/images/gnavi_s4.png");
}
.navbar-nav .gnavi-s5::before{
  background-image: url("/images/gnavi_s5.png");
}

/* ===== ハンバーガーメニュー×（閉じるアイコン）を出す =====
.navbar-toggler {
  border: none;
}
/* 三本線（通常）
.navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
}
/* 開いている時だけ × に差し替え
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E") !important;
}
/* ===== トグラーを最前面に出して閉じるを有効化 =====
.navbar-toggler{
  position: relative;
  z-index: 1051;
}
.navbar-collapse{
  position: relative;
  z-index: 1050;
}

/* メニュー */
/* 画像の帯だけ担当 */
.about-visual{
  background: url(../about/images/about_mn.jpg) center top / cover no-repeat;
  height: 190px;              /* ← ここは固定でOK */
  border-bottom: 1px solid #d0ccbd;
  padding: 140px 0 20px;
}
@media (max-width: 768px){
  .about-mn-bg{
    height: 75px;                 /* ← ここを詰める */
    background-size: 100% auto;
    background-position: center 35%;
  }
/* メニューの帯だけ担当 */
.about-mn{
  background:#fff;
  border-bottom:1px solid #d0ccbd;
  padding:6px 0;
}

.about-mn-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-mn-nav .nav-link{
  color:#333 !important;
  font-size:0.8rem;
  padding:0 14px;
  border-left:1px solid #d0ccbd;
  text-decoration:none;
}

.about-mn-nav .nav-link:hover{
  color:#333 !important;
}

@media (max-width:768px){

  .about-mn{
    height:auto;
    padding:20px 0;
  }

  .about-mn .container{
    height:auto;
    align-items:flex-start !important;
  }

}
/* ホバー調整（任意） */
.about-mn-nav .nav-link:hover{
  text-decoration: underline;
}
.breadcrumb-mini{
  font-size: 0.75rem;   /* 12px 相当 */
  line-height: 1.6;
}
.table-no-lines th,
.table-no-lines td{
  border-top: none !important;
  border-bottom: none !important;
}

/* ▼ 全体の横幅を細くする（Bootstrap上書き） */
.container{
  max-width: 1020px;
}
/*テーブルの設定*/	
/*以下代替できない*/
.table-nouen table{
	border:0;
	border-collapse:collapse;
	width:100%;
	border-top:1px solid #d0ccbd;
	border-left:1px solid #d0ccbd;
}
	.table-nouen td{
		padding:5px;
		border-right:1px solid #d0ccbd;
		border-bottom:1px solid #d0ccbd;
		text-align:center;
		font-size:0.9em;
	}
	.table-nouen td.td-l{
		text-align:left;
	}
	.table-nouen th{
		padding:5px;
		background-color:#f2e3a9;
		border-right:1px solid #d0ccbd;
		border-bottom:1px solid #d0ccbd;
		text-align:center;
		font-size:0.9em;
	}
.table-yume table{
	border:0;
	border-collapse:collapse;
	width:100%;
	border-top:1px solid #ffce37;
	border-left:1px solid #ffce37;
}
	.td-yume{
		padding:5px;
		border-right:1px solid #ffce37;
		border-bottom:1px solid #ffce37;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-yume-b{
		padding:5px;
		border-right:1px solid #ffce37;
		border-bottom:3px solid #ffce37;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-yume1{
		padding:5px;
		border-right:1px solid #ffce37;
		border-bottom:1px solid #ffce37;
		text-align:center;
		font-size:0.9em;
		background-color:#fff2de;
	}
	.td-yume1-b{
		padding:5px;
		border-right:1px solid #ffce37;
		border-bottom:3px solid #ffce37;
		text-align:center;
		font-size:0.9em;
		background-color:#fff2de;
	}
	.th-yume{
		padding:5px;
		background-color:#ffe9a5;
		border-right:1px solid #ffce37;
		border-bottom:1px solid #ffce37;
		text-align:center;
		font-size:0.9em;
	}
	.th-yume-b{
		padding:5px;
		background-color:#ffe9a5;
		border-right:1px solid #ffce37;
		border-bottom:3px solid #ffce37;
		text-align:center;
		font-size:0.9em;
	}
	.th-yume1{
		padding:5px;
		background-color:#ffd1a5;
		border-right:1px solid #ffce37;
		border-bottom:1px solid #ffce37;
		text-align:center;
		font-size:0.9em;
	}
	.th-yume1-b{
		padding:5px;
		background-color:#ffd1a5;
		border-right:1px solid #ffce37;
		border-bottom:3px solid #ffce37;
		text-align:center;
		font-size:0.9em;
	}
.table-contact table{
	border:0;
	border-collapse:collapse;
	width:100%;
	border-top:1px solid #4db7ff;
	border-left:1px solid #4db7ff;
}
	.td-contact{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-contact-b{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-contact1{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#e9f8ff;
	}
	.td-contact1-b{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#e9f8ff;
	}
	.th-contact{
		padding:5px;
		background-color:#b7e2ff;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
	}
	.th-contact-b{
		padding:5px;
		background-color:#b7e2ff;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
	}
.table thead th[rowspan]{
  vertical-align: middle !important;
}
	.table-contact{
  border-collapse: collapse;
  width: 100%;
}
	.td-contact{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-contact-b{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#FFFFFF;
	}
	.td-contact1{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#e9f8ff;
	}
	.td-contact1-b{
		padding:5px;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
		background-color:#e9f8ff;
	}
	.th-contact{
		padding:5px;
		background-color:#b7e2ff;
		border-right:1px solid #4db7ff;
		border-bottom:1px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
	}
	.th-contact-b{
		padding:5px;
		background-color:#b7e2ff;
		border-right:1px solid #4db7ff;
		border-bottom:3px solid #4db7ff;
		text-align:center;
		font-size:0.9em;
	}
th[rowspan]{
  vertical-align: middle;
}
.table-contact th{
  font-weight: 400;   /* ← 太字を解除 */
}

/* 全セル共通 */
.table-contact th,
.table-contact td{
  border-right: 1px solid #4db7ff;
  border-bottom: 1px solid #4db7ff;
  padding: 5px;
  font-size: 0.9em;
}

/* 左端の線を出す */
.table-contact tr > *:first-child{
  border-left: 1px solid #4db7ff;
}

/* 一番上の線を出す */
.table-contact thead tr:first-child > *{
  border-top: 1px solid #4db7ff;
}
}

/* ===== 最新情報・お知らせ　一覧ページ ===== */
.news-card{
border:0;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
background:#fff;
overflow:hidden;
 height:100%;
}
.news-thumb{
background:#e6e6e6;
width:100%;
height:180px;
overflow:hidden;
margin-bottom:12px;
border-radius:6px;
}
.news-thumb img {
width: 100%;
height:180px;
object-fit: cover;
display: block;
} 
.news-date{
color:#2f9e44;
font-size:.9rem;
margin-bottom:.5rem;
font-weight:600;
}
.card-title{
font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size:1.4rem;
font-weight:600;
 line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:3.2em;
}
.next-link{
color:#2f9e44;
font-weight:600;
text-decoration:none;
font-size:1.1rem;
}
.next-link:hover{
text-decoration:underline;
}    

/* ===== 最新情報・お知らせ　詳細ページ ===== */
.detail-wrap{
background:#fff;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
padding:60px 70px;
}
.news-date{
color:#2f9e44;
font-weight:600;
font-size:.95rem;
margin-bottom:14px;
}
.news-title{
font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size:1.4rem;
font-weight:700;
line-height:1.6;
margin-bottom:36px;
}
.main-image,
.sub-image{
  width:100%;
  margin: 0 auto 36px;
  overflow:hidden;
  border-radius:10px;
}
.main-image img,
.sub-image img{
  width:100%;
  height:auto;
  display:block;
}
.sub-image{
  width:70%;
}
.news-content{
font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size:0.95rem;
line-height:2;
color:#333;
margin-bottom:10px;
}
.news-content h2{
font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size:0.95rem;
margin:32px 0 12px;
font-weight:700;
margin-bottom:10px;
}
.news-content img{
	width: 100%;
	height:auto;
}
	.back-link{
 	color:#2f9e44;
 	font-weight:600;
 	text-decoration:none;
 	font-size:1.1rem;
}
/* ===== SP時はカード枠を外す ===== */
@media (max-width: 768px){
  .detail-wrap{
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 16px;   /* ほんの少しだけ余白 */
  }
  .main-image,
  .sub-image{
    width: 100%;
    border-radius: 0;   /* 画像もフラットに */
    margin: 0 0 24px;
  }
  .sub-image{
    width: 100%;
  }
}
  .news-title{
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  .news-content{
    font-size: 1rem;
    line-height: 1.9;
  }
}

/* ===== 「農は人にあり」で使用 ===== */

.person-youtube{
	margin-bottom:15px;
	border-bottom:1px dotted #d0ccbd;
	padding-bottom:15px;
}
	.person-youtube iframe{
		width: 50%;
		height: 340px;
		float: left;
		margin-right: 20px;
	}
	.person-youtube img{
		float: left;
		margin-right: 20px;
	}
@media (max-width:1024px){
	.person-youtube iframe{
		width: 100%;
		height: 340px;
		float: none;
		margin-right: 0;
	}
	.person-youtube img{
		float: none;
		margin-right: 0;
	}
}
.btn-a-s{
	border:0;
	padding:5px 10px;
	margin:0 0 10px;
	font-family:"Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	font-size:0.9em;
	font-weight:bold;
	background-color:#56b72d;
	display:inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.btn-a-s:link{
	color:#231815;
}
.btn-a-s:hover{
	background-color:#68ec19;
	color:#231815;
}

/* ===== Drawer Toggle ===== */
.drawer-toggle{
  position: fixed;
  top: 18px;
  right: 15px;
  width: 34px;
  height: 28px;
  border: none;
  background: none;
  z-index: 10001;
}
.drawer-toggle span{
  display:block;
  height:3px;
  margin:6px 0;
  background:#000;
  transition:.3s;
}
.drawer-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(6px,6px);
}
.drawer-toggle.active span:nth-child(2){
  opacity:0;
}
.drawer-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(7px,-7px);
}

/* ===== Drawer Toggle ===== */
.drawer-toggle{
  position: fixed;
  top: 18px;
  right: 15px;
  width: 34px;
  height: 28px;
  border: none;
  background: none;
  z-index: 10001;
}
.drawer-toggle span{
  display:block;
  height:3px;
  margin:6px 0;
  background:#000;
  transition:.3s;
}
.drawer-toggle.active span:nth-child(1){
  transform: rotate(45deg) translate(6px,6px);
}
.drawer-toggle.active span:nth-child(2){
  opacity:0;
}
.drawer-toggle.active span:nth-child(3){
  transform: rotate(-45deg) translate(7px,-7px);
}

/* ===== Drawer ===== */
#drawerOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9999;
}
#drawerOverlay.open{
  opacity:1;
  visibility:visible;
}

#drawerMenu{
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  background: #2b2b2b;
  color: #fff;
  z-index: 10000;
  padding-top: 70px;
  transition: right .35s ease;
}
#drawerMenu.open{
  right: 0;
}

#drawerMenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#drawerMenu li{
  border-bottom: 1px solid rgba(255,255,255,.15);
}
#drawerMenu a{
  display: block;
  padding: 16px 20px;
  color: #fff;
  text-decoration: none;
}

/* PCでは完全に消す */
@media (min-width:992px){
  #drawerMenu,
  #drawerOverlay,
  .drawer-toggle{
    display: none !important;
  }
}

/* ===== 最新情報・お知らせ ===== */

.top-news{
  background:#fff;
}
.news-heading{
  font-size:28px;
  font-weight:500;
  letter-spacing:0.08em;
  color:#333;
}
.news-list{
  max-width:700px;
  text-align:left;
}
.news-item{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:18px;
  font-size:15px;
}
.news-date{
  width:90px;          /* ← 固定幅 */
  flex-shrink:0;
  color:#666;
  font-weight:600;
}
.news-link{
  color:#2f9e44;
  text-decoration:none;
}
.news-link:hover{
  opacity:0.7;
  text-decoration:underline;
}
.news-btn{
  display:inline-block;
  background:#000;
  color:#fff;
  padding:10px 28px;
  text-decoration:none;
  font-size:14px;
  transition:0.3s;
}
.news-btn:hover{
  opacity:0.8;
  color:#fff;
}
.news-btn-wrap{
  display:flex;
  justify-content:center;
  margin-top:20px;
  padding-bottom:40px;
}

.person-movie iframe{
    width:100%;
    aspect-ratio:16 / 9;
    height:auto;
}
.people-wrap{
    background: url("../images/bg_fablic.jpg") repeat;
    padding:15px 0;
}
.people-box{
    background:#ffffff;
    padding:20px 45px;
}
/*beerイメージ*/
.beer-img{
    max-width:380px;
    width:100%;
}

@media (max-width:768px){
    .beer-img{
        width:60%;
    }
}