@charset "UTF-8";
/*
 * 今月のチラシ（右下の固定ドック）と、画面右の固定タブ
 *
 * 2026-09-07 の変更:
 *  ・デフォルトを「開いた状態」にする
 *  ・食品館ハーズ / HA-Z Classier を、それぞれ独立して開閉できるようにする
 *
 * 2026-09-15 の変更（デザインの磨き上げ）:
 *  ・カードを小さく揃え、店名を必ず表示（閉じた状態のボタンにも）
 *  ・右端タブは縦書きの名前を常に表示（マウスを乗せないと分からない状態をやめる）。店ごとに Instagram＋Googleマップ
 *  ・スマホは右端タブを出さない（Instagram・コラム・Googleマップはメニューとフッターに集約）。下部バーは1行ずつに収める
 *  ・色は末尾の「カラーリング」で店ごとに塗る（飯野判断。サイト本体はモノトーン）。ここより上は色を付ける前の土台
 *
 * style.css は静的サイトのSCSSから生成しているため、ここには追記せず別ファイルにしている。
 */

/* ===================== 今月のチラシ ===================== */

/* ドック本体（縦積み・右下） */
.flyer-dock {
  right: 1.25rem;
  bottom: 1.25rem;
  gap: 0.9rem;
}

/* 1枚ぶんのまとまり。開いていればカード、閉じていればピルを見せる */
.flyer-dock__item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.flyer-dock__card-wrap {
  position: relative;
  display: none;
}
.flyer-dock__item.is-open .flyer-dock__card-wrap {
  display: block;
}
.flyer-dock__item.is-open .flyer-dock__pill {
  display: none;
}

/* パネルの一括開閉は使わないので、常に見える状態に戻す */
.flyer-dock__panel,
.flyer-dock.is-open .flyer-dock__panel {
  max-height: none;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: none;
  margin-bottom: 0;
}

/* カード */
.flyer-dock__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  width: 232px;
  min-width: 0;
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  background: #222222;
  border: 0;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.flyer-dock__card:hover {
  background: #000;
  opacity: 1;
  transform: translateY(-2px);
}
.flyer-dock__card:focus-visible {
  outline: 2px solid #222222;
  outline-offset: 3px;
}
.flyer-dock__card-thumb {
  width: 38px;
  height: 50px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: none;
}
.flyer-dock__card-thumb--pdf {
  background: #f2f2f2;
  color: #767676;
}
.flyer-dock__card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.flyer-dock__card-store {
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #b0b0b0;
  white-space: nowrap;
}
.flyer-dock__card-label {
  margin-top: 0.05rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}
.flyer-dock__card-arrow {
  flex: none;
  font-size: 0.9rem;
  line-height: 1;
  color: #8a8a8a;
  transition: transform 0.2s ease, color 0.2s ease;
}
.flyer-dock__card:hover .flyer-dock__card-arrow {
  color: #fff;
  transform: translateX(3px);
}

/* 閉じるボタン（カードの左上。画面の端やタブとぶつからない側） */
.flyer-dock__close {
  position: absolute;
  top: -8px;
  left: -8px;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  color: #4a4a4a;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.flyer-dock__close:hover,
.flyer-dock__close:focus-visible {
  background: #222222;
  border-color: #222222;
  color: #fff;
}

/* 閉じているときのピル（どちらの店のチラシかを必ず書く） */
.flyer-dock__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 0.85rem 0.5rem 1.05rem;
  background: #222222;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: background-color 0.2s ease;
}
.flyer-dock__pill:hover {
  background: #000;
}
.flyer-dock__pill-label {
  font-weight: 700;
}
.flyer-dock__pill-store {
  font-size: 0.7rem;
  color: #b0b0b0;
}
.flyer-dock__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  line-height: 1;
}

/* 旧・一括トグルは使わない */
.flyer-dock__toggle {
  display: none !important;
}

/* ===================== 画面右の固定タブ（PC） ===================== */

/* 画面の下を基準に置く（開いたチラシ2枚＋閉じるボタンの高さ約178pxの上に並べ、重ならないように） */
.side-tabs {
  top: auto;
  bottom: 200px;
  gap: 6px;
  transform: none;
}
.side-tabs__item {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.45rem;
  width: 40px;
  max-width: none;
  padding: 0.6rem 0 0.7rem;
  overflow: visible;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  color: #222222;
  box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.08);
  transition: width 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.side-tabs__item:hover,
.side-tabs__item:focus-visible {
  width: 46px;
  max-width: none;
  background: #222222;
  border-color: #222222;
  color: #fff;
  opacity: 1;
}
.side-tabs__icon {
  flex: none;
  width: auto;
  height: auto;
}
.side-tabs__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 店ごとのタブ：Instagram と Googleマップ（口コミ）のアイコンを縦に並べ、下に店名 */
.side-tabs__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  padding: 0.3rem 0 0.7rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  color: #222222;
  box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.08);
}
.side-tabs__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #222222;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.side-tabs__link + .side-tabs__link {
  margin-top: 0.15rem;
}
.side-tabs__link svg {
  display: block;
}
.side-tabs__link:hover,
.side-tabs__link:focus-visible {
  background: #222222;
  color: #fff;
  opacity: 1;
}
/* マウスを乗せたアイコンの左に「食品館ハーズ｜Instagram」などの名前を出す */
.side-tabs__item {
  position: relative;
}
.side-tabs [data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 0.4em 0.75em;
  border-radius: 4px;
  background: #222222;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.side-tabs [data-tip]:hover::before,
.side-tabs [data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}
.side-tabs__group .side-tabs__label {
  margin-top: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid #e5e5e5;
}

/* 画面の低いノートPC（表示の高さ760px以下）では、縦書きの名前を隠してアイコンだけの小さいタブに。
   名前はマウスを乗せると出る（ヘッダー72px＋タブ＋チラシ約178pxが収まらず、重なるため） */
@media (max-height: 760px) {
  .side-tabs__label {
    display: none;
  }
  .side-tabs__group {
    padding-bottom: 0.3rem;
  }
}

/* ===================== スマートフォン ===================== */
@media (max-width: 768px) {
  /* 右端タブは出さない（メニューとフッターにInstagram3件・コラムがある） */
  .side-tabs {
    display: none;
  }

  /* 下部に2枚を横並びで固定（常時表示） */
  .flyer-dock {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: #222222;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16);
  }
  .flyer-dock__item,
  .flyer-dock__item.is-open {
    flex: 1 1 0;
    align-items: stretch;
    min-width: 0;
  }
  .flyer-dock__item + .flyer-dock__item {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .flyer-dock__card-wrap,
  .flyer-dock__item.is-open .flyer-dock__card-wrap {
    display: block;
  }
  .flyer-dock__pill,
  .flyer-dock__item.is-open .flyer-dock__pill,
  .flyer-dock__close,
  .flyer-dock__card-arrow {
    display: none;
  }
  .flyer-dock__card,
  .flyer-dock__card:first-child {
    width: auto;
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0.5rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    box-shadow: none;
  }
  .flyer-dock__card:hover {
    background: #000;
    transform: none;
  }
  .flyer-dock__card-text {
    align-items: center;
  }
  .flyer-dock__card-store {
    font-size: 0.64rem;
  }
  .flyer-dock__card-label {
    margin-top: 0;
    font-size: 0.82rem;
  }

  /* 下部バーで本文の最後（フッター最下段）が隠れないよう、同じ高さだけ余白をとる */
  body:has(.flyer-dock:not(.flyer-dock--hide-sp)) {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   カラーリング（2026-09-15 飯野依頼）
   固定ボタンだけは店ごとの色で塗る（サイト本体は 2026-06-06 のモノトーン方針のまま）。
   色は静的v3（_v3.scss）の定義を継承: 食品館ハーズ＝グリーン／HA-Z Classier＝テラコッタ／社長コラム＝スレート。
   ※ テラコッタは元の #b07850 だと白文字の読みやすさ（コントラスト比4.5以上）に届かない（3.7）ため、#9a6443（4.9）に深めた。
   ========================================================= */
:root {
  --haz-color-honkan: #4f7d5b;
  --haz-color-honkan-dark: #3f6749;
  --haz-color-classier: #9a6443;
  --haz-color-classier-dark: #7f5035;
  --haz-color-column: #47597a;
  --haz-color-column-dark: #374763;
}

/* ---- 今月のチラシ ---- */
.flyer-dock__item[data-flyer="honkan"] .flyer-dock__card,
.flyer-dock__item[data-flyer="honkan"] .flyer-dock__pill {
  background: var(--haz-color-honkan);
}
.flyer-dock__item[data-flyer="honkan"] .flyer-dock__card:hover,
.flyer-dock__item[data-flyer="honkan"] .flyer-dock__pill:hover {
  background: var(--haz-color-honkan-dark);
}
.flyer-dock__item[data-flyer="classier"] .flyer-dock__card,
.flyer-dock__item[data-flyer="classier"] .flyer-dock__pill {
  background: var(--haz-color-classier);
}
.flyer-dock__item[data-flyer="classier"] .flyer-dock__card:hover,
.flyer-dock__item[data-flyer="classier"] .flyer-dock__pill:hover {
  background: var(--haz-color-classier-dark);
}
.flyer-dock__card-store,
.flyer-dock__pill-store {
  color: rgba(255, 255, 255, 0.9);
}
.flyer-dock__card-arrow {
  color: rgba(255, 255, 255, 0.75);
}
.flyer-dock__pill-icon {
  background: rgba(255, 255, 255, 0.22);
}

/* ---- 画面右の固定タブ ---- */
.side-tabs__item--column,
.side-tabs__group--honkan,
.side-tabs__group--classier {
  border-color: transparent;
  color: #fff;
  box-shadow: -2px 3px 14px rgba(0, 0, 0, 0.18);
}
.side-tabs__item--column {
  background: var(--haz-color-column);
}
.side-tabs__item--column:hover,
.side-tabs__item--column:focus-visible {
  background: var(--haz-color-column-dark);
  border-color: transparent;
}
.side-tabs__group--honkan {
  background: var(--haz-color-honkan);
}
.side-tabs__group--classier {
  background: var(--haz-color-classier);
}
.side-tabs__group--honkan .side-tabs__link,
.side-tabs__group--classier .side-tabs__link {
  color: #fff;
}
/* アイコンに乗せたら白い丸に反転（どのアイコンを押すのかを分かりやすく） */
.side-tabs__group--honkan .side-tabs__link:hover,
.side-tabs__group--honkan .side-tabs__link:focus-visible {
  background: #fff;
  color: var(--haz-color-honkan);
}
.side-tabs__group--classier .side-tabs__link:hover,
.side-tabs__group--classier .side-tabs__link:focus-visible {
  background: #fff;
  color: var(--haz-color-classier);
}
.side-tabs__group--honkan .side-tabs__label,
.side-tabs__group--classier .side-tabs__label {
  border-top-color: rgba(255, 255, 255, 0.3);
}

/* ---- スマートフォン：下部バーを左右で店の色に ---- */
@media (max-width: 768px) {
  .flyer-dock {
    padding-bottom: 0;
    background: transparent;
  }
  .flyer-dock__item {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .flyer-dock__item[data-flyer="honkan"] {
    background: var(--haz-color-honkan);
  }
  .flyer-dock__item[data-flyer="classier"] {
    background: var(--haz-color-classier);
  }
  .flyer-dock__item + .flyer-dock__item {
    border-left-color: rgba(255, 255, 255, 0.22);
  }
}