/* --- 基本リセット --- */
body, header, article, h1, p, figure, figcaption, img, nav, footer, h2, ol, ul, li, table, th, td {
  margin: 0;
  padding: 0;
}

/* 横スクロール防止（全ページ共通） */
html {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}
ul, li {
  list-style: none;
}
img {
  border: none;
}
html {
  scroll-behavior: smooth;
}

/* --- body全体 --- */
body {
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background-color: #9b9;
  margin-bottom: 100px;
}

/* --- header, footer --- */
/* --- header（PC用レイアウト） --- */
header {
  display: flex;             /* 横並びにする */
  justify-content: space-between; /* タイトルを左、メニューを右へ */
  align-items: center;       /* 上下の高さを揃える */
  
  width: auto;
  margin: 0 20px;            /* 左右に少し余白 */
  padding: 15px 0;
  border-bottom: 1px solid #fff; /* ヘッダーの下に区切り線 */
}

header .site-title {
  margin: 0; /* 余計な余白を消す */
}
header .site-title a {
  font-family: 'Hiragino Maru Gothic Pro', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 23px;
  color: #fc9;
  font-weight: 700;
}

footer {
  color: #4a6622;
  margin-right: 100px;
  text-align: right;
  line-height: 2;
  clear: both;
}

/* --- 見出し類（サイト全体で統一） --- */
h1 {
  color: #fff;
}
h2, h3, h4 {
  font-size: 18px ;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: 5px;
  margin-top: 32px;
  margin-bottom: 8px;
  clear: both;
}
h2 { background-color: #fc9; }
h3 { background-color: #beb; }
h4 { background-color: #ddc; }
.decoration {
  font-size: 25px ;
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  margin: 20px;
}
.decoration:before,
.decoration:after {
  content: "■■";
  font-size: 18px;
  letter-spacing: 8px;
  vertical-align: middle;
  color: #fc9;
}
.title {
  font-size: 25px ;
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  margin: 20px;
}
.title:before,
.title:after {
  content: "■■";
  font-size: 18px;
  letter-spacing: 8px;
  vertical-align: middle;
  color: #fc9;
}


/* --- 区切り・ユーティリティ類 --- */
.divider {
  height: 1px;
  background-color: #fff;
  border: 0;
}
.clear { clear: both; }
.clearfix { clear: both; } 

/* メインコンテンツ */
.content-wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  max-width: 1000px;
  text-align: left;
  line-height: 150%;
  word-break: normal;
  padding: 20px 60px;
  color: #330;
  background: #eed;
}

.content-wrapper p {
	margin-top: 2em
}

.content-wrapper a:link {
  color: #33f;
}
.content-wrapper a:active {
  color: #f66;
}
.content-wrapper a:visited {
  color: #c0f;
}
.content-wrapper a:hover {
  color: #f66;
}


/* テーブル */
caption {
  text-align: left;
}
th {
  font-weight: 400;
}
th, td {
  padding-left: 1em;
}



/* --- 汎用クラス --- */
.line-break {
	display: block; /* インライン要素をブロック要素として強制的に改行させる */
}
.nowrap {
  white-space: nowrap;
}

.left {
  float: left;
  margin: 3px;
}
.right {
  text-align: right;
}
.s {
  font-size: 12px;
}
.m {
  font-size: 16px;
  font-weight: 400;
}
.mbold {
  font-size: 16px ;
  font-weight: 700;
}
.l {
  font-size: 20px ;
}
.time {
  display: block;
  text-align: right;
  font-size: 0.8em;
}
.item {
  display: inline-block;
  width: 120px;
  text-align: center;
  margin: 10px;
}
.item img {
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 写真回り込み */
.photo{
		float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* ★追加：画像を回り込ませるためのクラス */
.photo-left{
	float: left;
	margin-right: 20px; /* 少し広めの余白を設けて文章を読みやすくする */
	margin-bottom: 10px;
}

.photo-right{
	float: right;
	margin-left: 20px; /* 少し広めの余白を設けて文章を読みやすくする */
	margin-bottom: 10px;
}

/* 回り込みさせた要素の間に隙間を作るためのクラス */
.gap-divider {
    height: 0;           /* 高さは0にする */
    margin-top: 20px;    /* ★ここで上下の隙間を調整 (例: 20px) */
    clear: none;         /* floatの影響を消さない */
}

/* --- Flexbox --- */
/* --- 画像とテキストのコンテナ設定 --- */
.image-text-wrap {
  display: flex;             /* 子要素を Flexbox で制御 */
  align-items: center;       /* ★ここがポイント：子要素を縦方向の中央に揃える */
  margin-bottom: 20px;       /* 後の要素との間に隙間を確保 */
}

/* --- 画像の設定（回り込みの代わりに Flex を使う） --- */
.photo-flex {
  /* 既存の .photo/ .photo-right の装飾をコピー */
  max-width: 300px; 
  /* margin-right や margin-left は Flex の order と gap で制御 */
}
.photo-flex400 {
  max-width: 400px;
}
/* ★左寄せの画像の場合の調整 */
.image-text-wrap img.photo-flex, 
.image-text-wrap img.photo-flex400{
  order: 1;                 /* 画像を左側に配置 */
  margin-right: 20px;       /* 画像とテキストの間に隙間 */
}

/* ★右寄せの画像の場合の調整 */
.image-text-wrap.right-align img.photo-flex,
.image-text-wrap.right-align img.photo-flex400 {
  order: 2;                 /* 画像を右側に配置 */
  margin-right: 0;
  margin-left: 20px;        /* テキストと画像の間に隙間 */
}

/* --- テキスト部分の設定 --- */
.text-content {
  order: 2;                 /* テキストを右側に配置 */
  flex-grow: 1;             /* テキストが残りのスペースを全て占める */
}
.image-text-wrap.right-align .text-content {
  order: 1;                 /* テキストを左側に配置 */
}

/* パンくずリスト全体 (ol) */
.breadcrumb ol {
  /* リストマーカーを削除 */
  list-style: none; 
  /* paddingやmarginをリセット */
  padding: 0;
  margin: 0;
  /* 子要素 (li) を横並びにするためにFlexboxを使用 */
  display: flex;
}

/* リストアイテム (li) */
.breadcrumb li {
  /* 縦方向に配置されたli間の余白を調整 */
  margin-right: 0.5em; /* 適切な余白を設定 */
  /* liの中に改行を許可しない */
  white-space: nowrap;
}

/* 最後の要素以外の li の後ろに区切り文字 > を表示 */
.breadcrumb li:not(:last-child)::after {
  content: " >"; /* 区切り文字とスペース */
  margin-left: 0.5em; /* 区切り文字の左側にスペース */
}

/* 最後の要素はリンクがないため、装飾を調整 */
.breadcrumb li:last-child {
  /* 最後の要素は区切り文字を不要にするため、::afterは適用されない */
  /* 必要に応じて、最後の要素の色や太さを変えることもできます */
  font-weight: bold;
}

.breadcrumb {
	text-align: left;
    font-size: 0.8em
}

/* 関連ページ */
.related-link {
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    gap: 10px; /* 画像とテキストの間に10pxの間隔を空ける */
    text-decoration: none;
    color: inherit;
}

.related-link {
    /* 画像を固定サイズにし、リンク内の他のスタイルとの競合を防ぐ */
    flex-shrink: 0;
}

.related-link .text-content {
    /* テキストが画像と横並びになるように */
    flex-grow: 1; 
    /* リンクテキストが折り返されないようにする場合は white-space: nowrap; を適用 */
}

/* 記事内の特定のh2（関連ページなど）のデザイン */
h2.section-title {
    border-left: 5px solid #fc9;  /* 左側にアクセントライン */
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 1.2em;
    
    /* 既存のh2スタイル（オレンジ背景）を打ち消す */
    background: none; 
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: #330; /* 必要なら文字色も調整 */
}

.related-list {
    list-style: none;      /* ・のマークを消す */
    padding: 0;
    margin: 0;
}

.related-list li {
    border-bottom: 1px dashed #ccc; /* 下に点線を入れる */
    margin-bottom: 10px;
}

.related-list li a {
    display: flex;         /* Flexboxで横並び */
    align-items: center;   /* 上下中央揃え */
    padding: 10px 5px;
    color: #330;           /* リンクの色 */
    transition: background 0.2s;
}

.related-list li a:hover {
    background-color: rgba(255, 255, 255, 0.5); /* ホバー時に少し明るく */
    color: #f66;
}

/* サムネイル画像の枠 */
.related-list .thumb {
    width: 60px;          /* 画像枠の幅を固定 */
    flex-shrink: 0;       /* 縮まないようにする */
    margin-right: 15px;   /* テキストとの隙間 */
    text-align: center;
}

.related-list .thumb img {
    max-width: 100%;      /* 枠に合わせて画像を調整 */
    max-height: 60px;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.related-list .text {
    font-weight: bold;
    font-size: 0.95em;
}

/* アフィリエイト枠 */
.affiliate-links {
  width: auto;      /* 幅を自動にする */
  max-width: 400px; /* 「最大」で400pxにする（スマホでは縮むようにする） */
  background-color: #fff;
  border: 1px solid #4a6622;
  line-height: 2.5;
  margin-top: 32px;
  padding: 10px;
  border-radius: 5px;
}
.affiliate-links p {
	margin-top: 1em; 
}
.store-link {
  line-height: 2.5;
}
/* アフィリエイト内の画像エリア（通常 pタグで提供されることが多いです） */
.affiliate-item .product-image {
    float: left;           /* 画像を左に寄せる */
    margin-right: 20px;    /* 右側に余白 */
    margin-bottom: 10px;
    margin-top: 0;         /* 余計な余白を消す */
    max-width: 150px;      /* 画像エリアの幅を制限（必要に応じて） */
}

/* 画像自体がはみ出さないように */
.affiliate-item .product-image img {
    max-width: 100%;
    height: auto;
}

/* ページトップへ戻るボタン */
.gotop {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #999;
  border-radius: 7px;
  padding-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 85%;
  text-decoration: none;
  color: #333 ;
  opacity: .5;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}
.gotop::before {
  content: "";
  display: block;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  width: 25%;
  height: 25%;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}
.gotop:hover {
  opacity: 1;
}


/* ナビゲーション */
.nav {
  display: block;
  width: 300px;
  padding: 5px;
  clear: both;
  color: #330 ;
  background: linear-gradient(#fc9, #eed);
  border: 1px solid #fc9;
  text-align: center;
  border-radius: 5px;
  box-shadow: 2px 2px 4px gray;
}
.nav:hover {
  box-shadow: 0 0 2px gray;
  transform: translateY(2px);
}
.nav a:link,.nav a:visited,.nav a:hover,.nav a:active {
  color: #330;
}

/* --- PC用ナビゲーション（.navのデザインを流用） --- */
/* まずスマホ用ボタンを消す */
#menu-btn, #menu-close {
  display: none;
}

/* メニューリストを横並びにする */
#global ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各メニュー項目（ボタン風デザイン） */
#global ul li {
  margin-left: 10px; /* ボタン同士の隙間 */
}

#global ul li a {
  display: block;
  padding: 5px 15px;   /* ボタンの大きさ調整 */
  font-size: 14px;
  text-decoration: none;
  min-width: 90px;      /* ★文字数に関わらず、最低90pxの幅を確保 */
  text-align: center;   /* ★ボタン内の文字を中央に揃える */
  /* ▼▼▼ ここで .nav のデザインを再現 ▼▼▼ */
  color: #330;
  background: linear-gradient(#fc9, #eed);
  border: 1px solid #fc9;
  border-radius: 5px;
  box-shadow: 1px 1px 3px gray; /* 影を少し控えめに */
  transition: all 0.2s; /* ホワッと動くアニメーション */
}

/* ホバー時の動き（ちょっと凹むように） */
#global ul li a:hover {
  box-shadow: 0 0 1px gray;
  transform: translateY(2px);
  opacity: 0.9;
}

/* --- PC用 検索窓の調整 --- */
#global ul li.search-wrap {
  /* ボタン間の隙間を5pxに調整済 */
  margin-left: 20px; 
}

/* ★修正：PCで「サイト内検索」ラベルを非表示にする */
#global .menu-search label {
    display: none !important; /* ★最優先で非表示にする */
}

#global .menu-search {
  display: flex;
  align-items: center;
  /* フォーム全体でテキストや要素の改行を禁止 */
  white-space: nowrap; 
}

#global .menu-search input[type="text"] {
  padding: 5px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 3px 0 0 3px;
  
  /* 柔軟性と最小幅の設定 */
  flex: 1 1 auto;
  min-width: 50px; 
  max-width: 120px;
  width: auto;
  box-sizing: border-box;
}

#global .menu-search input[type="submit"] {
  padding: 5px 10px;
  font-size: 13px;
  background: #fc9;
  color: #330;
  border: none;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  
  /* ボタンは絶対に縮まないように固定 */
  flex-shrink: 0; 
}

#global .menu-search {
  display: flex;
  align-items: center;
  /* ★追加：フォーム全体でテキストや要素の改行を禁止 */
  white-space: nowrap; 
}

/* ★修正：PCでは「サイト内検索」ラベルを非表示にする */
#global .menu-search label {
    display: none;
}

/* =========================================
   タブレット・PC幅狭用レイアウト (1100px以下)
   ========================================= */
@media screen and (max-width: 1100px) {
  
  /* --- 1. ヘッダーの縦並びと左寄せ --- */
  header {
    display: block;
    /* text-align: center; を削除（デフォルトの左寄せに戻す） */
    padding: 10px 20px; /* 左右に余白を設定して左端に寄せすぎないように */
  }
  
  /* --- 2. サイトタイトルとナビゲーションの調整 --- */
  header .site-title {
    margin-bottom: 10px;
    text-align: left; /* タイトルを確実に左寄せ */
  }
  
  .content-wrapper {
    /* PC用で設定した最大幅を維持させる */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

/* --- 画像の回り込み解除 --- */
    .photo-left {
        float: none;           /* ★回り込みを解除 */
        margin: 10px auto;     /* 画像を中央寄せ */
        display: block;        /* 中央寄せのためにブロック要素化 */
    }

    /* 左右の余白設定をリセット */
    .photo-left {
        margin-left: auto;
    }

  /* --- 3. メニューリスト全体を調整 --- */
  #global ul {
    display: flex;
    justify-content: flex-start; /* ★修正：左端に詰める (中央寄せを解除) */
    flex-wrap: wrap; 
  }
  
  /* メニュー項目を少しコンパクトにする */
  #global ul li {
    margin: 5px; 
  }
  
  /* 検索フォームの調整（レイアウト維持） */
  #global ul li.search-wrap {
    margin-left: 5px;
  }

/* --- 4. 検索窓を右端に寄せる設定を追加 --- */
  #global ul li.search-wrap {
    margin-left: auto; /* ★追加：残りのスペースを全て左側に押し込み右寄せにする */
  }
}

/* =========================================
   スマホ・タブレット用レスポンシブ設定
   (画面幅 768px 以下の場合に適用)
   ========================================= */
@media screen and (max-width: 768px) {
  /* --- 1. 全体のレイアウト調整 --- */
  body {
    margin-bottom: 60px; /* メニューボタンとかぶらないよう余白確保 */
    font-size: 15px;     /* 文字サイズを少し調整 */
  }
  /* --- 3. ヘッダー・見出し調整 --- */
  header {
    width: auto;
    text-align: left;
/* --- ヘッダーのPC用設定をリセット（スマホ用） --- */
    display: block;      /* 横並び（flex）を解除 */
    border-bottom: none;
    margin: 0;
    padding: 10px;
  }
  
  /* ヘッダー内の古い検索窓は非表示 */
  header form {
    display: none;
  }
  
  /* PC用のメニュー表示を隠して、スマホ用ボタンを表示 */
  #menu-btn {
    display: block;      /* PCで消したボタンを復活 */
  }

  /* メニューリストの初期化（PCの横並び設定を解除） */
  #global ul {
    display: none;       /* 最初は隠す（クリックで表示） */
    /* 以下、前回設定したスマホ用のスタイルが適用されます */
  }
  
  #global ul li {
    margin-left: 0;      /* PC用の隙間をリセット */
  }
  
  #global ul li a {
    /* PC用のボタン装飾をリセット */
    background: none;
    border: none;
    box-shadow: none;
    padding: 20px;       /* スマホ用の押しやすいサイズに */
    color: #4a6622;      /* 文字色を戻す */
  }
  
  /* 検索窓のリセット */
  #global ul li.search-wrap {
    margin-left: 0;
  }

  .content-wrapper {
    width: auto;         /* 固定幅を解除 */
    margin: 0;        /* 画面端の余白 */
    padding: 15px;       /* 内側の余白を少し減らす */
    box-sizing: border-box; /* パディングを含めた幅計算にする */
  }

  /* --- 2. 画像・メディアの最適化 --- */
  img {
    max-width: 100%;     /* 親要素より大きくならない */
    height: auto;        /* 縦横比を維持 */
  }

/* ★追加：モバイル環境でも画像の拡大を制限 */
  .image-text-wrap img.photo-flex {
    /* 画面幅が300px以下なら100%に縮小される */
    /* 画面幅が300px以上なら600pxに固定される */
    max-width: 100%;
    /* 画面幅が300px未満でも、元の画像の幅よりは大きくならないように設定 */
    width: auto; 
    
    /* min-width を設定して、拡大されすぎないようにする（例：元の画像の幅） */
    max-width: min(300px, 100%); /* 300pxと100%のうち小さい方を適用 */
  }

  /* --- 3. 見出し・テキスト調整 --- */
  h1 {
    font-size: 20px;     /* スマホでは少し小さく */
    line-height: 1.4;
  }

  .work-title {
    display: block;
    font-size: 1.2em;
  }
  
  .work-subtitle {
    display: block;
    font-size: 0.8em;
    margin-top: 5px;
  }

  /* --- Flexbox --- */
/* --- Flexboxコンテナの幅と余白をリセット/調整 --- */
  .image-text-wrap {
    flex-direction: column;
    align-items: center;
    
    /* ★追加: 左右の余白をなくし、親要素の幅に完全に合わせる */
    width: 100%;
    
    /* Flexboxの子要素が持つマージンをリセット */
    margin-right: 0;
    margin-left: 0;
  }
  
/* 画像要素の設定 */
    .image-text-wrap img.photo-flex {
        /* 左右の自動マージンで中央寄せを強化 */
        margin-right: auto !important; 
        margin-left: auto !important;

    order: 1 !important; /* ★ order: 1 (最も小さい値) で画像を常に先頭にする */
        display: block; /* 画像自体の配置をブロック要素に設定 */
        max-width: min(300px, 100%);
    }

    /* テキスト要素の設定 */
    .image-text-wrap .text-content {
    order: 2 !important; /* ★ order: 2 でテキストを二番目にする */
        width: 100%;
    }

  /* --- 画像とテキスト要素の幅調整 --- */
  .image-text-wrap img.photo-flex,
  .image-text-wrap .text-content {
    /* ★追加: 画面いっぱいに広がりすぎないように100%設定 */
    width: 100%; 
    /* Flexアイテムはデフォルトでmin-width: auto;を持つため、幅を明示的に設定 */
  }

  /* ★重要な修正: 画像の最大幅を親要素（100%）に合わせる */
  .image-text-wrap img {
    max-width: 100%; /* 親要素(content-wrapper)の幅内に収める */
    height: auto;
    margin: 10px auto;
  }
.image-text-wrap {
    flex-direction: column;    /* ★縦並びにする */
    align-items: center;       /* 縦並びにした後、中央寄せにする */
  }
  
  .image-text-wrap img {
    margin: 10px auto;         /* 画像の上下に余白 */
  }

  /* --- 4. パンくずリスト --- */
  .breadcrumb ol {
    flex-wrap: wrap;     /* 画面幅が狭いときは折り返す */
  }
  .breadcrumb li {
    font-size: 12px;
    margin-bottom: 5px;
  }

  /* --- 6. アフィリエイトリンク・ボタン類 --- */
  .affiliate-links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.affiliate-item .product-image {
        float: none;       /* 回り込み解除 */
        text-align: center;/* 中央寄せ */
        margin: 0 auto 10px auto;
    }

  .nav {
    width: 100%;         /* ボタン幅を画面いっぱいに */
    box-sizing: border-box;
/* --- モバイル用：本文中ナビゲーションボタンの調整 --- */
        /* 最大幅を設定し、広がりすぎを防ぐ */
        max-width: 300px; 
        
        /* 中央寄せにする */
        margin-left: auto;
        margin-right: auto;
        
        /* 念のため、floatやclearの設定をリセット */
        float: none;
        clear: both;
  }

  /* --- 7. グローバルナビゲーション（メニュー） --- */
  
  /* メニューボタン（右上に固定） */
/* メニューボタン（右上に固定） */
  #menu-btn, #menu-close {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 20001;
    cursor: pointer;
    
    background: #fff;    /* ★ここを「#fc9（オレンジ）」から「#fff（白）」に戻しました */
    border: none;        /* 念のため枠線をなしに */
    
    border-radius: 5px;  /* 角を少し丸く */
    padding: 5px;        /* 画像周りの余白 */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 影をつけてボタンっぽさを出す */
    display: block;
  }
  #menu-close { display: none; }

  /* メニューリストの背景（ここをクリーム色に変更） */
  #global ul {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* ★ここを変更：黒から「クリーム色の透過」へ */
    background: rgba(238, 238, 221, 0.98); /* #eed のRGB値 */
    
    z-index: 20000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow-y: auto;
  }

  #global ul li {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  /* リンク文字（ここを深緑に変更） */
  #global ul li a {
    color: #4a6622;      /* ★白文字(#fff)から深緑へ変更 */
    font-size: 18px;
    font-weight: bold;
    display: block;
    padding: 20px;
    border-bottom: 1px dotted #9b9; /* ★区切り線も緑系に */
  }

  /* --- 8. メニュー内の検索窓デザイン --- */
  #global ul li.search-wrap {
    margin-top: 30px;
    border-bottom: none;
  }

  .menu-search {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }

  /* ★「サイト内検索」というラベル文字も深緑にする */
  .menu-search label {
    color: #4a6622;
    font-weight: bold;
  }

  .menu-search input[type="text"] {
    padding: 10px;
    width: 60%;
    border-radius: 3px 0 0 3px;
    border: 1px solid #ccc; /* 背景が薄いので枠線を足す */
    font-size: 16px;
  }

  .menu-search input[type="submit"] {
    padding: 10px 15px;
    background: #fc9;    /* ボタンはオレンジのまま */
    border: none;
    border-radius: 0 3px 3px 0;
    color: #330;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }

  /* --- 9. メニュー開閉動作 --- */
  #global.open ul { display: flex; }
  #global.open #menu-btn { display: none; }
  #global.open #menu-close { display: block; }
}