@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
}

.main_container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff; /* 背景色は必要に応じて変更 */	
}

.main_container img {
  width: 100%;
  height: auto;   /* 縦横比を保つ */
  display: block; /* 画像の下に余白が出ないようにする */
}

/* SPではヘッダー内の通常ナビ＆CTAを非表示に */
.site-header .global-nav,
.site-header .header-cta {
  display: none !important;
}

/* ヘッダーに下方向の影を追加 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.40);  /* ← 下部に影を追加 */
}

/* 視覚的に（スクリーンリーダーには読み上げ） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; /* 折り返し防止 */
  border: 0;
}

/* キーボード操作でフォーカス時のみ表示（任意） */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =========================
   Mobile Header (SP Only)
   ========================= */
:root{
  --brand: #4aaa4c;
  --menu-brown: #916e41;

  /* ロゴ素材サイズ（表示は自動縮小） */
  --logo-sp-w: 750px;
  --logo-sp-h: 150px;

  /* ヘッダー内側余白 */
  --header-pad-y: 7px;     /* 上下余白：変更OK */
  --header-pad-x: 5px;     /* 右余白：変更OK */
  --header-pad-left: 10px;  /* 左余白：変更OK */

  /* ハンバーガー */
  --burger-size: 30px;      /* サイズ：変更OK */
  --burger-radius: 4px;    /* 角丸：変更OK */
  --burger-stroke: 1px;     /* 1px 枠線 */

  /* ドロワー（左パネル） */
  --drawer-w: 68vw;         /* 幅：狭め（“×”が右に見える） */
  --drawer-w-max: 320px;
  --drawer-bg: #4aaa4c;     /* 背景＝緑 */
  --drawer-fg: #fff;        /* 文字＝白 */

  /* サブメニューの字下げ */
  --submenu-indent: 18px;   /* 行頭字下げ：変更OK */
}

/* ヘッダー行 */
.site-header { position: sticky; top:0; z-index:100; background:#fff; }
.site-header .container{
  width:100%; max-width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--header-pad-y) var(--header-pad-x);
  padding-left: var(--header-pad-left);
  box-sizing:border-box;
}

/* 左：ロゴ */
.header-logo{ display:block; line-height:0; }
.header-logo img{
  width: min(54vw, var(--logo-sp-w));
  height: auto;
  display:block;
}

/* SPはヘッダー内の通常ナビ＆CTAを隠す */
.site-header .global-nav,
.site-header .header-cta { display:none !important; }

/* 右：ハンバーガー */
.header-menu-toggle{
  appearance:none;
  background:#fff;
  border: var(--burger-stroke) solid var(--brand);
  border-radius: var(--burger-radius);
  width: var(--burger-size);
  height: var(--burger-size);
  display:flex; align-items:center; justify-content:center;
  position: relative; cursor:pointer; padding:0; box-sizing:border-box;
  margin: 0 8px 15px 6px;
}
.header-menu-toggle:focus-visible{ outline:3px solid rgba(74,170,76,.3); outline-offset:2px; }

/* 三本ライン（確実表示） */
.burger-lines{ position: relative; width: 50%; height: 16px; }
.header-menu-toggle .burger-lines i{
  position:absolute; left:0; right:0; margin:0 auto;
  width:100%; height:3px; background:var(--brand) !important;
  display:block; transform-origin:center;
  transition: transform .25s ease, opacity .25s ease;
}
.header-menu-toggle .burger-lines i:nth-child(1){ top:0; }
.header-menu-toggle .burger-lines i:nth-child(2){ top:50%; transform:translateY(-50%); }
.header-menu-toggle .burger-lines i:nth-child(3){ bottom:0; }

/* MENUラベル（枠の外・下） */
.menu-label{
  position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%);
  font-size:7px; color:var(--brand); letter-spacing:.15em; line-height:1;
  pointer-events:none;
}

/* 開いた時は “×” に変形 */
.site-header.is-open .burger-lines i:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.site-header.is-open .burger-lines i:nth-child(2){ opacity:0; }
.site-header.is-open .burger-lines i:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ====== ドロワー（左からスライド） ====== */
.mobile-drawer[hidden]{ display:none; }
.mobile-drawer{
  position: fixed; inset:0;
  background: rgba(0,0,0,.35);       /* 画面の暗幕 */
  z-index: 999;
}
.mobile-inner{
  position:absolute; left:0; top:0; bottom:0;
  width: min(var(--drawer-w), var(--drawer-w-max));
  background: var(--drawer-bg);      /* 緑 */
  color: var(--drawer-fg);           /* 白文字 */
  box-shadow: 10px 0 30px rgba(0,0,0,.15);
  transform: translateX(-100%);      /* 左の外に待機 */
  transition: transform .25s ease;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 22px 18px 36px;
}

/* 開いた状態（~ で後続兄弟に必ず効く） */
.site-header.is-open ~ .mobile-drawer{ display:block; }
.site-header.is-open ~ .mobile-drawer .mobile-inner{ transform: translateX(0); }

/* オプション（堅牢）：<html class="drawer-open"> でも開く */
.drawer-open .mobile-drawer{ display:block; }
.drawer-open .mobile-drawer .mobile-inner{ transform: translateX(0); }

/* ====== ドロワー内ナビ ====== */
.mobile-drawer .global-nav .gnav{
  display:grid; gap:12px;
  list-style:none; margin:8px 0 0; padding:0;
  text-align: left;                  /* ★左寄せ */
}
.mobile-drawer .global-nav .gnav > li > a{
  display:block; padding:6px 2px;
  color:#fff; text-decoration:none; 
  font-weight:500;                  /* ★見出し（店舗紹介／お問い合わせ）少し細く */
}

/* ▼（開閉アイコン）を右端に表示 */
.mobile-drawer .has-sub > a{
  position: relative; padding-right: 22px; /* 右余白：▼分 */
}
.mobile-drawer .has-sub > a::after{
  content:""; position:absolute; right:2px; top:50%; transform: translateY(-50%) rotate(0deg);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid #fff;             /* ▼（白） */
  transition: transform .2s ease;
}
.mobile-drawer .has-sub > a[aria-expanded="true"]::after{
  transform: translateY(-50%) rotate(180deg); /* ▲に反転 */
}

/* 店舗紹介サブメニュー（左寄せ／丸なし／字下げ／下線なし） */
.mobile-drawer .submenu{
  position: static; margin: 6px 0 0;
  min-width: auto;
  background: rgba(255,255,255,.12); 
  color: #fff;
  border: none; border-radius: 10px;
  box-shadow: none;
  padding: 6px 0; display: none;
}
.mobile-drawer .submenu ul{
  display:grid; grid-template-columns:1fr;
  list-style: none; margin:0; padding:0;    /* ★丸を消す */
}
.mobile-drawer .submenu li a{
  color:#fff; 
  padding: 16px 12px 16px calc(12px + var(--submenu-indent)); /* ★段落だけ下げる */
  line-height: 2;   /* 行間も広げる */	
  text-decoration: none !important;         /* ★アンダーライン無し */
  text-align: left;                          /* ★左寄せ */
}
.mobile-drawer .submenu li a:hover{ background: rgba(255,255,255,.18); }

/* アコーディオン展開 */
.mobile-drawer .has-sub.is-sub-open .submenu{ display:block; }
.mobile-drawer .has-sub > a[aria-expanded="true"]{
  color:#fff; text-decoration: none;        /* 見出しは下線なしでOK */
}

/* ドロワー内CTA（白→茶文字に変更） */
.drawer-cta{
  display:block; margin-top:16px; padding:14px 18px;
  border-radius:999px; background:#fff; color: var(--menu-brown); /* ★茶色に */
  text-align:center; text-decoration:none; font-weight:900;
}

/* CTAボタンは茶色文字で固定（共通の白文字ルールより強く） */
.mobile-drawer .global-nav .gnav > li > a.drawer-cta {
  color: var(--menu-brown) !important;   /* #916e41 を優先 */
  font-weight:700;
  font-size: 120%;
}

/* Hover時も茶色を維持＋下線なし、少しだけ押し感 */
.mobile-drawer .global-nav .gnav > li > a.drawer-cta:hover {
  color: var(--menu-brown) !important;
  text-decoration: none;
  filter: brightness(0.98);
  font-weight:700;
  font-size: 120%;	
}