/*
Theme Name: Lgt-suitown2026
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* =================================================
   ヘッダー画像：スマホで消える(高さ0)問題 & 2枚表示を一発解決
   ※ これだけ残す（過去の ::before 系は全部殺す）
================================================= */

/* 2枚表示の原因になりやすい疑似要素を完全停止 */
#site-header::before,
#site-header-container::before{
  content: none !important;
  display: none !important;
}

/* ヘッダー本体は潰れないようにする */
#site-header{
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* リンクをブロック化（ヘッダー画像全体がタップできる） */
#site-header > a.header-top-home-link{
  display: block !important;
}

/* ここが本体：背景画像＋高さを“必ず”持たせる */
#header-top.header-top{
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;

  background-image: url(https://c3-support.com/300/wp-content/uploads/2026/01/head_02.png) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-color: transparent !important;
}

/* PC 高さ */
@media (min-width: 769px){
  #header-top.header-top{
    height: 250px !important;     /* PCは完成とのことなのでここは現状値でOK */
    min-height: 250px !important;
  }
}

/* スマホ 高さ（ここを60に） */
@media (max-width: 768px){
  #header-top.header-top{
    height: 60px !important;
    min-height: 60px !important;
  }

  /* テーマの.containerの左右余白で変に見えるのを防ぐ */
  #header-top.header-top .container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* =========================================
  PC：スクロール時に「メニューだけ」全幅固定
  ※ 管理バー無し（一般ユーザー表示）を基準
========================================= */
@media (min-width: 769px){

  :root{
    --menu-fixed-top: 0px;    /* ← 管理バー無し前提なので 0 */
    --menu-fixed-h: 64px;    /* ← メニューの実寸に合わせて微調整 */
  }

  /* ヘッダー画像は固定に巻き込ませない */
  body.header_scrolled #header-top{
    position: static !important;
  }

  /* ヘッダー全体は固定しない */
  body.header_scrolled #site-header{
    position: static !important;
  }

  /* メニューだけ全幅固定 */
  body.header_scrolled #site-header-container{
    position: fixed !important;
    top: var(--menu-fixed-top) !important;   /* ← 0 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 9999;
    background: #fff !important;
  }

  /* 中身は中央寄せ（既存 container 幅に合わせる） */
  body.header_scrolled #site-header-container.container{
    max-width: 1200px;   /* Lightningの.container幅に合わせて */
    margin: 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 固定メニュー分だけ本文を下げる */
  body.header_scrolled .site-body-container{
    margin-top: var(--menu-fixed-h);
  }
}







/* サイトタイトル(h1)を見せない（必要なら） */
h1.site-header-logo,
.site-header-logo{
  display: none !important;
}
/* スマホdescription非表示 */
@media (max-width: 768px){
	.header-top .header-top-description{
	display:none;	
	}
	}

/* スクロール後に付くクラスも念のため */
h1.site-header-logo.site-header-logo--scrolled--nav-center{
  display: none !important;
}
/*TOPページ店舗情報*/
.top_tenpo{
	display:flex;
	    justify-content: space-between;
}
.top_tenpo >div{
	border:1px solid #eee;
	padding:1rem;
	border-radius:10px;
	width:12%;
	text-align:center;

}	
.top_tenpo >div p{
margin:0.5rem 0;
}
.top_shoutengai{
		display:flex;
	    justify-content: space-between;
	
}
.top_shoutengai>div {
		width:13.5%;
}
@media (max-width: 768px){
	.top_tenpo{
flex-wrap: wrap;
	}
.top_tenpo >div{
width:49%;
	}
.top_shoutengai{
	flex-wrap: wrap;
	}
.top_shoutengai >div{
width:49%;
	}
}
@media (min-width: 992px) {
  /* 1. stickyの天敵 overflow-x: hidden をPCのみ解除 */
  html, body {
    overflow-x: visible !important;
  }

  /* 2. 親要素をflex化してサイドバーをメインと同じ高さ（レール）にする */
  .siteContent .container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* 3. メインセクションの幅調整 */
  .mainSection {
    flex: 1 !important;
    float: none !important;
    margin-right: 40px !important;
    min-width: 0 !important;
  }

  /* 4. サイドバー（レール部分） */
  .sub-section.sub-section--col--two {
    width: 300px !important;
    flex-basis: 300px !important;
    flex-shrink: 0 !important;
    float: none !important;
	padding-top: 62px !important;
  }

  /* 5. 追従させる中身（ランナー） */
  .shop-sidebar-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important; /* ヘッダーの高さに合わせてここだけ微調整してください */
    z-index: 100;
  }
}

/*トップページ投稿一覧スライドの隙間を開ける*/
.swiper-slide {
    padding: 0 8px;
    box-sizing: border-box;
}
/* ピックアップ画像に影をつける */
.vk_post_imgOuter {
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  border-radius: 8px;
}


/* =========================================================
   商店街バー（.shop-shotengai-bar）
   mainSection 内で自然に表示される版
========================================================= */

.shop-shotengai-bar{
  width: 100%;
  margin: 0 0 16px;   /* ← 少し上に寄せる */
}

.shop-shotengai-bar__inner{
  width: 100%;
  box-sizing: border-box;

  font-size: 1.5rem;      /* 業種と同じ */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;

  padding: 12px 16px;
  border-radius: 14px;
  background: #eee;
}

/* 商店街ごとの色（例） */
.shop-shotengai-bar--nisiki .shop-shotengai-bar__inner{
  background: #9bc29f;
	color:#fff;
}
.shop-shotengai-bar--asahi .shop-shotengai-bar__inner{
  background: #ddb06c;
		color:#fff;
}
.shop-shotengai-bar--sinasahi .shop-shotengai-bar__inner{
  background: #eac49a;
		color:#fff;
}
.shop-shotengai-bar--sakae .shop-shotengai-bar__inner{
  background: #81b1cc;
		color:#fff;
}
.shop-shotengai-bar--katayama .shop-shotengai-bar__inner{
  background: #de9c9c;
		color:#fff;
}
.shop-shotengai-bar--sankusu .shop-shotengai-bar__inner{
  background: #c8716a;
		color:#fff;
}
.shop-shotengai-bar--shuhentempo .shop-shotengai-bar__inner{
  background: #b0afb2;
		color:#fff;
}

/* スマホ調整 */
@media (max-width: 768px){
  .shop-shotengai-bar{
    /*margin-top: -12px;*/
  }
  .shop-shotengai-bar__inner{
    font-size: 1.3rem;
    padding: 10px 14px;
  }
}
/* =========================================================
   TENPO ギャラリー（完成形）
   - 最大10枚：radioで切替
   - メイン：フェード
   - サムネ：枚数に応じて表示（1枚ならPHP側でulが出ない）
========================================================= */

/* radio は非表示（tenpo-gallery 内だけに限定して事故防止） */
.tenpo-gallery input[name="photo"]{
  display: none;
}

/* メイン表示枠（比率固定） */
.tenpo-gallery .tenpo-slide{
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}

/* 画像は重ねてフェード */
.tenpo-gallery .tenpo-slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease;
}

/* radioと画像を連動（最大10枚） */
.tenpo-gallery input[name="photo"]:nth-of-type(1):checked ~ .tenpo-slide img:nth-child(1),
.tenpo-gallery input[name="photo"]:nth-of-type(2):checked ~ .tenpo-slide img:nth-child(2),
.tenpo-gallery input[name="photo"]:nth-of-type(3):checked ~ .tenpo-slide img:nth-child(3),
.tenpo-gallery input[name="photo"]:nth-of-type(4):checked ~ .tenpo-slide img:nth-child(4),
.tenpo-gallery input[name="photo"]:nth-of-type(5):checked ~ .tenpo-slide img:nth-child(5),
.tenpo-gallery input[name="photo"]:nth-of-type(6):checked ~ .tenpo-slide img:nth-child(6),
.tenpo-gallery input[name="photo"]:nth-of-type(7):checked ~ .tenpo-slide img:nth-child(7),
.tenpo-gallery input[name="photo"]:nth-of-type(8):checked ~ .tenpo-slide img:nth-child(8),
.tenpo-gallery input[name="photo"]:nth-of-type(9):checked ~ .tenpo-slide img:nth-child(9),
.tenpo-gallery input[name="photo"]:nth-of-type(10):checked ~ .tenpo-slide img:nth-child(10){
  opacity: 1;
  z-index: 1;
}


/* =========================================================
   TENPO サムネ：必ず同じ大きさ（120x90）＋cover（最終確定）
========================================================= */

/* サムネ一覧 */
.tenpo-gallery .tenpo-thumbnail{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex !important;
  gap: 8px;
  visibility: visible !important;
  height: auto !important;
}

/* liは余計な影響を受けやすいので“枠”はlabelに持たせる */
.tenpo-gallery .tenpo-thumbnail li{
  flex: 0 0 auto;
}

/* ★枠：ここでサイズを固定 */
.tenpo-gallery .tenpo-thumbnail li > label{
  display: block !important;
  width: 120px !important;
  height: 90px !important;
  overflow: hidden !important;
  cursor: pointer;
}

/* ★画像：必ず枠いっぱい＋トリミング */
.tenpo-gallery .tenpo-thumbnail li > label > img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;   /* テーマのmax-width制限を殺す */
  object-fit: cover !important;
}

/* スマホ */
@media (max-width: 768px){
  .tenpo-gallery .tenpo-thumbnail li > label{
    width: 64px !important;
    height: 48px !important;
  }
}


/* --- バッジ：画像に被せない（外側・右端） --- */
.tenpo-gallery .tenpo-badges{
  position: static !important; /* 以前のabsoluteが残っても殺す */
  display: flex;
  justify-content: flex-end;   /* 右端＝画像ブロック右端 */
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 0;
}

.tenpo-gallery .tenpo-badges .shop-archive-badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #f59e0b;
  border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* =========================================================
   サムネイル（最終版・これだけでOK）
   ・サイズ固定
   ・object-fit: cover
   ・スマホ対応
========================================================= */

.tenpo-gallery .tenpo-thumbnail{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  gap: 8px;
}

/* サムネ枠 */
.tenpo-gallery .tenpo-thumbnail li{
  width: 120px;
  height: 90px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 画像を枠にフィット */
.tenpo-gallery .tenpo-thumbnail li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* クリックできるように */
.tenpo-gallery .tenpo-thumbnail label{
  display: block;
  cursor: pointer;
}

/* スマホ */
@media (max-width: 768px){
  .tenpo-gallery .tenpo-thumbnail li{
    width: 64px;
    height: 48px;
  }
}


/* =========================================================
   tenpo：ギャラリー幅を固定して中央寄せ（これで右端がページにならない）
========================================================= */

/* 親（ギャラリー）を“画像ブロック幅”にする */
.entry-body .tenpo-gallery{
  width: 100% !important;
  max-width: 900px !important;   /* ←ここだけ調整（例：760〜1100） */
  margin-left: auto !important;
  margin-right: auto !important;

  display: block !important;      /* flex指定などを打ち消す */
}

/* バッジ：画像に被せず、ギャラリー右端（=画像ブロック右端）へ */
.entry-body .tenpo-gallery .tenpo-badges{
  position: static !important;    /* absoluteを完全に殺す */
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;

  margin: 8px 0 0 !important;
  padding: 0 !important;
}

/* サムネもギャラリー幅に揃う */
.entry-body .tenpo-gallery .tenpo-thumbnail{
  width: 100% !important;
  margin-top: 12px !important;

  display: flex !important;
  visibility: visible !important;
  height: auto !important;
}

/* 念のため：以前の「サムネ消すCSS」を無効化 */
.entry-body .tenpo-thumbnail{
  visibility: visible !important;
  height: auto !important;
}
/* =========================================================
   店舗詳細ページ（single）TENPO
   - ギャラリー幅：本文に合わせて中央寄せ
   - バッジ：画像に被せない／外側・右寄せ
   - アーカイブCSS（.shop-archive-badgeのabsolute）と衝突しない
========================================================= */

/* 1) ギャラリーの基準幅（※900/1200/none など混在させない） */
body.single .tenpo-gallery--single{
  width: 100% !important;
  max-width: 900px !important;     /* ←ここだけ好みで調整（例：760〜1100） */
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 2) バッジ：外側（画像の上or下はHTML順で決まる／CSSで並び替えしない） */
body.single .tenpo-gallery--single .tenpo-badges--single{
  width: 100% !important;
  margin: 0 0 8px !important;      /* 画像の上に置くなら下マージン */
  padding: 0 !important;

  display: block !important;
  text-align: right !important;

  position: static !important;     /* absolute系を無効化 */
  float: none !important;
  clear: both !important;
}

/* 3) バッジ見た目（詳細ページ専用クラス） */
body.single .tenpo-gallery--single .tenpo-badges--single .shop-single-badge{
  position: static !important;     /* アーカイブの absolute を完全に無効化 */
  display: inline-block !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: #f59e0b !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

/* 4) 色分け（必要な分だけ追加） */
body.single .tenpo-gallery--single .tenpo-badges--single .shop-single-badge.is-inshoku{
  background:#e03131 !important;
}

/* 5) サムネが消えるCSSが残っていても復活 */
body.single .tenpo-gallery--single .tenpo-thumbnail{
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
}


table.tenpo-jouhou{
	margin-bottom:2rem;
  border: 0 !important;
  border-collapse: collapse; /* セルの線を整理 */
}

/* セルの枠線を全部消す（これが黒線の犯人なことが多い） */
table.tenpo-jouhou th,
table.tenpo-jouhou td {
  border: 0 !important;
}


/* 行ごとに下線（上・左右なし） */
table.tenpo-jouhou tr {
  border-bottom: 1px solid var(--vk-color-border-hr) !important;
}
table.tenpo-jouhou tr:last-child {
  border-bottom: 0 !important; /* 最下行だけ消すなら */
}

/* 下線だけ付けたい場所：テーブル全体の一番下 */
table.tenpo-jouhou {
  border-bottom: 1px solid var(--vk-color-border-hr) !important;
}
td.tenpo1 {
	  width: 25%;
}	
/* スマホ */
@media (max-width: 768px){

}
/*関連記事*/
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.related-title{
	text-align:center;
}

/* 関連記事サムネイル統一 */
.related-list .related-item img {
  width: 100%;
  height: 160px;        /* 好きな高さに調整 */
  object-fit: cover;   /* トリミング */
  display: block;
}
/* ===============================
 * 店舗系 next/prev の日付だけ消す
 * =============================== */

/* asahi */
body.post-type-asahi .vk_posts.next-prev .vk_post_date,
body.post-type-asahi .vk_posts.next-prev time {
	display: none !important;
}

/* nisiki */
body.post-type-nisiki .vk_posts.next-prev .vk_post_date,
body.post-type-nisiki .vk_posts.next-prev time {
	display: none !important;
}

/* sankusu */
body.post-type-sankusu .vk_posts.next-prev .vk_post_date,
body.post-type-sankusu .vk_posts.next-prev time {
	display: none !important;
}

/* sinasahi */
body.post-type-sinasahi .vk_posts.next-prev .vk_post_date,
body.post-type-sinasahi .vk_posts.next-prev time {
	display: none !important;
}

/* sakae */
body.post-type-sakae .vk_posts.next-prev .vk_post_date,
body.post-type-sakae .vk_posts.next-prev time {
	display: none !important;
}

/* katayama */
body.post-type-katayama .vk_posts.next-prev .vk_post_date,
body.post-type-katayama .vk_posts.next-prev time {
	display: none !important;
}

/* shuhentempo */
body.post-type-shuhentempo .vk_posts.next-prev .vk_post_date,
body.post-type-shuhentempo .vk_posts.next-prev time {
	display: none !important;
}


/* =========================================
 * スマホ next/prev を強制横並び
 * ========================================= */
@media (max-width: 767px) {

.vk_posts {
	    flex-wrap: nowrap;
	}

  /* 子カラムを50%に固定 */
  body.post-type-asahi .vk_posts.next-prev .next-prev-prev,
  body.post-type-nisiki .vk_posts.next-prev .next-prev-prev,
  body.post-type-sankusu .vk_posts.next-prev .next-prev-prev,
  body.post-type-sinasahi .vk_posts.next-prev .next-prev-prev,
  body.post-type-sakae .vk_posts.next-prev .next-prev-prev,
  body.post-type-katayama .vk_posts.next-prev .next-prev-prev,
  body.post-type-shuhentempo .vk_posts.next-prev .next-prev-prev,
  body.post-type-asahi .vk_posts.next-prev .next-prev-next,
  body.post-type-nisiki .vk_posts.next-prev .next-prev-next,
  body.post-type-sankusu .vk_posts.next-prev .next-prev-next,
  body.post-type-sinasahi .vk_posts.next-prev .next-prev-next,
  body.post-type-sakae .vk_posts.next-prev .next-prev-next,
  body.post-type-katayama .vk_posts.next-prev .next-prev-next,
  body.post-type-shuhentempo .vk_posts.next-prev .next-prev-next {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin: 0 !important;
    float: none !important;
  }
.card-intext .card-intext-inner .vk_post_body {
    height: calc(15px + var(--vk-line-height-low) + 1px);
}
}
/* =========================================
   A11y toolbar（常駐 + アクセシビリティ + トグル）
   ========================================= */

/* 位置：PCは右上固定 */
.header-a11y-wrap{
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 99999;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);

  font-size: 12px;
  line-height: 1;

  box-sizing: border-box;
  max-width: calc(100vw - 24px);
}

.header-a11y-wrap:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.14);
}

/* スクロール中は控えめ（a11y-scroll.js が html に a11y-scrolling を付与） */
html.a11y-scrolling .header-a11y-wrap{ opacity: .55; }
html.a11y-scrolling .header-a11y-wrap:hover{ opacity: 1; }

/* ツールバー内部（PCは1行） */
.a11y-toolbar{
  display: flex;
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}
.a11y-toolbar__group{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.a11y-toolbar__label{
  font-size: 12px;
  opacity: .85;
  margin-right: 2px;
}

/* ボタン（選択肢：小/標準/大・通常/高コントラスト） */
.a11y-btn{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.72);

  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;

  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.a11y-btn:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.28);
}
.a11y-btn:active{ transform: translateY(1px); }

/* 選択中：色＋チェックで判別（色だけに依存しない） */
.a11y-btn[aria-pressed="true"]{
  background: rgba(0,0,0,.86);
  color: #fff;
  border-color: rgba(0,0,0,.86);
  box-shadow: 0 8px 16px rgba(0,0,0,.18);

  font-weight: 700;
  position: relative;
  padding-left: 32px;
}
.a11y-btn[aria-pressed="true"]::before{
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}

/* フォーカス可視化（キーボード操作向け） */
a:focus-visible,
button:focus-visible{
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* トグル（閉じる/ひらく）：他より少し小さく、役割が違う見た目 */
.a11y-toggle{
  background: rgba(0,0,0,.10);
  border: 2px solid rgba(0,0,0,.45);
  color: #111;

  min-height: 38px;
  min-width: 38px;
  padding: 6px 10px;

  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  cursor: pointer;
  white-space: nowrap;
}
.a11y-toggle::before{
  content: "×";
  font-size: 14px;
  line-height: 1;
}
.a11y-toggle:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.60);
}
.a11y-toggle:active{ transform: translateY(1px); }

/* 畳んだ状態：グループは隠して「ひらく」だけ残す */
html.a11y-collapsed .a11y-toolbar__group{ display: none; }
html.a11y-collapsed .a11y-toolbar{ gap: 0; }



/* =========================================
   フォントサイズ（JSが html に a11y-font-* を付ける）
   ========================================= */
/* =========================
   文字サイズ調整（強制的に効かせる版）
   ========================= */
/* 標準 */
html.a11y-font-medium body{
  font-size: 100%;
}

/* 小 */
html.a11y-font-small body{
  font-size: 95%;
}

/* 大（しっかり分かるレベル） */
html.a11y-font-large body{
  font-size: 120%;
}
/* PC：ヘッダーに被らない位置で固定 */
@media (min-width: 768px){
  .header-a11y-wrap{
    top: 50px !important;   /* ← ここがポイント */
    margin-top: 0 !important;
  }
}


/* =========================================
   カード（一覧）だけ：文字サイズを確実に切替
   ========================================= */

/* 標準 */
body.a11y-font-medium .shop-archive-title,
html.a11y-font-medium .shop-archive-title{
  font-size: 16px !important;
  line-height: 1.35 !important;
}
body.a11y-font-medium .shop-archive-msg,
html.a11y-font-medium .shop-archive-msg{
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 小 */
body.a11y-font-small .shop-archive-title,
html.a11y-font-small .shop-archive-title{
  font-size: 15px !important;
}
body.a11y-font-small .shop-archive-msg,
html.a11y-font-small .shop-archive-msg{
  font-size: 13px !important;
}

/* 大（体感できる） */
body.a11y-font-large .shop-archive-title,
html.a11y-font-large .shop-archive-title{
  font-size: 19px !important;
  line-height: 1.2 !important;
}
body.a11y-font-large .shop-archive-msg,
html.a11y-font-large .shop-archive-msg{
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* 矢印が小さく見える場合 */
body.a11y-font-large .shop-archive-arrow,
html.a11y-font-large .shop-archive-arrow{
  font-size: 22px !important;
}




/* =========================================
   高コントラスト（JSが body に a11y-contrast-high を付ける）
   ========================================= */
body.a11y-contrast-high{
  background: #0a0a0a;
  color: #fff;
}
body.a11y-contrast-high a{
  color: #ff0!important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
body.a11y-contrast-high .header-a11y-wrap{
  background: rgba(0,0,0,.85);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
body.a11y-contrast-high .a11y-btn{
  border-color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.25);
  color: #fff;
}
body.a11y-contrast-high .a11y-btn[aria-pressed="true"]{
  background:#fff;
  color:#000;
  border-color:#fff;
}
body.a11y-contrast-high .a11y-toggle{
  background: #fff;
  color: #000;
  border-color: #fff;
}
body.a11y-contrast-high .a11y-toggle::before{ color:#000; }
/* 高コントラスト：カード全体を黒ベースに統一 */
body.a11y-contrast-high .shop-archive-item,
body.a11y-contrast-high .shop-archive-link,
body.a11y-contrast-high .shop-archive-meta{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.75) !important;
}

/* タイトル・本文など（aタグ内のテキストが色を持っていても白に寄せる） */
body.a11y-contrast-high .shop-archive-title,
body.a11y-contrast-high .shop-archive-msg{
  color: #fff !important;
}

/* リンクは黄色＋下線（白背景問題を根本から消すため背景も黒化済み） */
body.a11y-contrast-high .shop-archive-link,
body.a11y-contrast-high .shop-archive-link:visited{
  color: #ff0 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 矢印（›）も見えるように */
body.a11y-contrast-high .shop-archive-arrow{
  color: #ff0 !important;
}

/* バッジは背景を暗く、文字を白に（色バッジが見づらいのを回避） */
body.a11y-contrast-high .shop-archive-badge{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* 画像枠の境界が必要なら */
body.a11y-contrast-high .shop-archive-thumb{
  background: #000 !important;
}
body.a11y-contrast-high .shop-archive-thumb img{
  display:block;
}
/* 高コントラスト時：タイトル（リンク）だけ黄色に */
body.a11y-contrast-high .shop-archive-link .shop-archive-title{
  color: #ff0 !important;
}

/* 下線はそのままでもOK。より明確にしたければ太く */
body.a11y-contrast-high .shop-archive-link .shop-archive-title{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* =========================================
   高コントラスト：ヘッダー／グロナビ／サブメニュー
   ========================================= */

/* ナビの「白背景」を黒に寄せる（Lightningでよくある要素をまとめて指定） */
body.a11y-contrast-high .site-header,
body.a11y-contrast-high .siteHeader,
body.a11y-contrast-high #site-header,
body.a11y-contrast-high .siteHeaderWrap,
body.a11y-contrast-high .siteHeader__inner,
body.a11y-contrast-high .gMenu,
body.a11y-contrast-high .gMenu_outer,
body.a11y-contrast-high .global-nav,
body.a11y-contrast-high nav{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}

/* メニューリンク：黄色＋下線（見分けやすい） */
body.a11y-contrast-high .gMenu a,
body.a11y-contrast-high .global-nav a,
body.a11y-contrast-high nav a{
  color: #ff0 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 現在地/hover：背景は濃色、文字は黄色（白背景を作らない） */
body.a11y-contrast-high .gMenu a:hover,
body.a11y-contrast-high .gMenu .current-menu-item > a,
body.a11y-contrast-high .gMenu .current_page_item > a,
body.a11y-contrast-high .gMenu .current-menu-ancestor > a,
body.a11y-contrast-high .global-nav a:hover,
body.a11y-contrast-high nav a:hover{
  background: rgba(255,255,255,.12) !important;
  color: #ff0 !important;
}

/* サブメニュー（オレンジ背景対策）：黒背景＋境界線 */
body.a11y-contrast-high .gMenu .sub-menu,
body.a11y-contrast-high .gMenu .sub-menu a,
body.a11y-contrast-high .gMenu .sub-menu li,
body.a11y-contrast-high .global-nav .sub-menu,
body.a11y-contrast-high nav .sub-menu{
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}

/* サブメニューのリンクも黄色 */
body.a11y-contrast-high .gMenu .sub-menu a,
body.a11y-contrast-high .global-nav .sub-menu a,
body.a11y-contrast-high nav .sub-menu a{
  color: #ff0 !important;
}

/* 罫線が薄い場合の視認性（必要なら） */
body.a11y-contrast-high .gMenu li,
body.a11y-contrast-high nav li{
  border-color: rgba(255,255,255,.35) !important;
}


/* =========================================
   スマホ最適化（フッター固定メニューの上）
   ========================================= */
@media (max-width: 767px){

  /* ツールバー本体はフッターメニューの上に */
  .header-a11y-wrap{
    top: auto;
    right: 12px;
    left: auto;
    bottom: calc(64px + 12px + env(safe-area-inset-bottom)); /* 64pxはフッターメニュー想定 */
    border-radius: 16px;
  }

  /* 2段折り返しで切れ防止（横スクロールしない） */
  .a11y-toolbar{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    white-space: normal;
    overflow: visible;
    padding-right: 72px; /* 右上にトグルを置く分の余白 */
  }
  .a11y-toolbar__group{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* トグル（閉じる/ひらく）を右上に固定配置 */
  .a11y-toggle{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
  }

  /* 畳んだ状態：白い枠を消して「ひらく」だけ浮かせる */
  html.a11y-collapsed .header-a11y-wrap{
    bottom: calc(64px + 32px + env(safe-area-inset-bottom)); /* 少し上へ */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-right: 56px; /* 右端の「上に戻る」ボタン回避（必要なら増減） */
  }
  html.a11y-collapsed .a11y-toggle{
    background: #fff;
    border: 2px solid rgba(0,0,0,.4);
  }
}