@charset "UTF-8";
/*
 * 打ち合わせで決まった、ページ単位の見た目の調整
 *
 * style.css は静的サイトのSCSSから生成しているため、ここには追記せず別ファイルにしている。
 * 2026-09-07 MTG#13 ／ 2026-09-14 MTG#14
 */

/* ===== 食品館ハーズ：「きちんと」とは を 2列×2行に（MTG#13） ===== */
.approach-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}
@media (max-width: 600px) {
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ===== 採用：社員割引を目立たせる（MTG#14） ===== */
.def-list__row--highlight {
  background: #f6f6f6;
}
.def-list__row--highlight .def-list__dt,
.def-list__row--highlight .def-list__dd {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.benefit-highlight {
  display: inline-block;
  margin-right: 0.4em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #2a2a2a;
}

/* ===== 採用：エントリーは電話を大きく（MTG#14） ===== */
.recruit-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.recruit-entry__tel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 18rem;
  padding: 1rem 2rem;
  background: #fff;
  color: #2a2a2a;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.recruit-entry__tel-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.recruit-entry__tel-num {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.recruit-entry__hours {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* ===== 採用ページのスマートフォン下部：チラシの代わりに電話ボタン（MTG#14） ===== */
.recruit-callbar {
  display: none;
}
@media (max-width: 768px) {
  .flyer-dock--hide-sp {
    display: none !important;
  }
  .recruit-callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 955;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    background: #222222;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  }
  .recruit-callbar__label {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
  .recruit-callbar__num {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
}

/* ===== お問い合わせ：ご用件のラジオ（MTG#13・#14） ===== */
.contact-form__topics {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  min-width: 0;
}
.contact-form__topics legend {
  margin-bottom: 0.75rem;
  padding: 0;
}
.contact-form__topics .contact-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  cursor: pointer;
}

/* ============================================================
   COMING SOON（コラムなど、まだ記事がない一覧の面）
   2026-09-19: 公開時点でコラムは0件。「ありません」ではなく
   「これから始まる」ことが伝わる見え方にする。
   ============================================================ */
.list-empty--soon {
  text-align: center;
  padding: 5rem 1.5rem;
  border: 1px solid #e4e4e4;
  background: #fafafa;
}

.list-empty__label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: #8a8a8a;
  margin: 0;
}

.list-empty__text {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 2;
  color: #4a4a4a;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .list-empty--soon { padding: 3.5rem 1.25rem; }
  .list-empty__text { font-size: 0.875rem; }
}

/* ============================================================
   イベントの特設ページ（Re:fresh Market ／ 食の勉強会）
   2026-09-19: 文字だけの面が続いていたため、写真で当日のようすを見せる。
   ============================================================ */

/* --- ギャラリー：4列。1枚目と最後を横2つ分に広げて単調さを避ける --- */
.event-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.event-gallery__item {
  margin: 0;
  grid-column: span 1;
}

.event-gallery__item--wide {
  grid-column: span 2;
}

.event-gallery__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #f2f2f2;
}

.event-gallery__item--wide .event-gallery__media {
  aspect-ratio: 16 / 9;
}

.event-gallery__cap {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #6a6a6a;
}

@media (max-width: 1024px) {
  .event-gallery { grid-template-columns: repeat(2, 1fr); }
  .event-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 600px) {
  .event-gallery { grid-template-columns: 1fr; gap: 2rem; }
  .event-gallery__item,
  .event-gallery__item--wide { grid-column: span 1; }
  .event-gallery__media,
  .event-gallery__item--wide .event-gallery__media { aspect-ratio: 4 / 3; }
}

/* --- 特徴カードに写真を載せる版 --- */
.feature-cards--photo .feature-card {
  padding-top: 0;
  overflow: hidden;
}

.feature-cards--photo .feature-card__media {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #f2f2f2;
  /* .feature-card の左右padding（24px）ぶん外へ出して、カード幅いっぱいにする */
  margin: 0 -24px 1.5rem;
}

@media (max-width: 767px) {
  .feature-cards--photo .feature-card__media { margin: 0 -24px 1.25rem; }
}

/* --- 開催レポート・関連記事のカードにサムネイルを出す（2026-09-19） --- */
.archive-card {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  overflow: hidden;
}

.archive-card__media {
  /* .archive-card の左右padding（24px）ぶん外へ出して、カード幅いっぱいにする */
  margin: 0 -24px 1.25rem;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #f2f2f2;
  transition: transform 0.4s ease;
}

.archive-card:hover .archive-card__media {
  transform: scale(1.03);
}

/* --- チラシが画像（JPG）のときの見せ方（2026-09-19） --- */
/* 枠は A4縦（210/297）で固定されているため、横長のチラシだと下に大きな余白ができる。
   画像のときは枠を画像に合わせ、縦長・横長どちらでも余白が出ないようにする（2026-09-19）。
   下地の余白は、画像の縦横比ではなく一定の内側余白で決める。 */
.pdf-preview--image {
  position: relative;
  aspect-ratio: auto;
  line-height: 0;
  padding: 10px;
  background: #fff;
}

.pdf-preview__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .pdf-preview--image { padding: 8px; }
}

/* 拡大表示。PDFはiframe、チラシの画像はimgで出す */
#pdfLightboxImage {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin: 0 auto;
  object-fit: contain;
}


/* ============================================================
   会社情報「売り場から」― 写真とテキストを左右交互に（2026-09-19）
   ============================================================ */
.voice-block + .voice-block { margin-top: 4rem; }

/* ご本人の原稿は段落が複数あるので、段落ごとに <p> を置いている。
   style.css の .story-block__body は下24pxで、続けると間延びするため詰める（2026-09-26）。 */
.voice-block .story-block__body {
  margin-bottom: 0.9rem;
}
.voice-block .story-block__body:last-of-type {
  margin-bottom: 0;
}

/* 役職は名前のすぐ上に置く（2026-09-25 飯野指示）。
   見出しの上ではなく、署名としてまとめて読ませる。 */
.voice-block__role {
  margin: 1.75rem 0 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: #8a8a8a;
}

.voice-block__role::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: #d4d4d4;
  margin-bottom: 1rem;
}

.voice-block__name {
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: #2a2a2a;
}


/* 代表挨拶にも、3名と同じ形の見出しを置く（2026-09-19） */
.ceo-message__title {
  /* 「売り場から」の3名の見出し（.story-block__title）と同じ大きさ・太さに揃える */
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

.ceo-message__title::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: #d4d4d4;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .ceo-message__title { font-size: 1.3rem; }
}

/* ---------------------------------------------
   規約・ポリシーの箇条書き（2026-09-19）
   利用規約をプライバシーポリシーと同じ policy-doc に揃えた際、
   .policy-doc 側に番号付きリストの指定が無かったので補う。
   （値は、それまで利用規約で使っていた .legal-doc__article ol と同じ）
   --------------------------------------------- */
.policy-doc__article ol {
  margin: 0.75rem 0 0;
  padding-left: 1.5rem;
  color: #4a4a4a;
}
.policy-doc__article ol li {
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------
   食品館ハーズ「いいものを、きちんと」の2枠（2026-09-25）
   スマートフォンでも横並びのままにする（飯野指示）。
   対になる2つなので、縦に積むと「いいもの／きちんと」の対比が見えなくなる。
   style.css（SCSS生成物）の 768px 以下 1カラム指定を、ここで上書きする。
   狭い画面でも収まるよう、左右の余白と番号のぶら下げ幅を詰める。
   --------------------------------------------- */
@media (max-width: 768px) {
  .concept-values {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: none;
  }
  .concept-values__col {
    padding: 1.4rem 0.9rem 1.5rem;
  }
  .concept-values__key {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
  }
  .concept-values__list li {
    padding-left: 1.5rem;
    font-size: 0.82rem;
    line-height: 1.7;
  }
  .concept-values__list li::before {
    font-size: 0.68rem;
  }
}

/* ---------------------------------------------
   HA-Z Classier 取扱カテゴリ（2026-09-28）
   Classier の商品写真がそろうまで、線画のアイコンで見せる。
   下地は丸、アイコンは白抜き。
   丸の色は flyer-dock.css の --haz-color-classier（テラコッタ #9a6443）。
   ⚠️ 静的サイト由来の #b07850 は白のコントラストが3.7で足りず、
   2026-09-15に #9a6443（4.9）へ深めた決定がある。直書きせず変数を使うこと。
   --------------------------------------------- */
.category-card__icon {
  display: flex;
  align-items: center;
  /* 文字と同じ軸に置く（本文の左余白22pxに合わせる） */
  justify-content: flex-start;
  padding: 30px 22px 2px;
}
.category-card__icon svg {
  width: 74px;
  height: 74px;
  padding: 19px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--haz-color-classier, #9a6443);
  color: #fff;
  /* 色地に白の線は細く見えるので、線を少し太くする */
  stroke-width: 1.6;
  transition: background-color 0.25s ease;
}
.category-card:hover .category-card__icon svg {
  background: var(--haz-color-classier-dark, #7f5035);
}
@media (max-width: 768px) {
  .category-card__icon {
    padding: 26px 22px 0;
  }
  .category-card__icon svg {
    width: 64px;
    height: 64px;
    padding: 16px;
  }
}

/* ---------------------------------------------
   よくある質問の＋/−（2026-09-28）
   これまでHTMLに「＋」「−」を直接書いていたため、開閉しても記号が
   変わらなかった（閉じているのに「−」が出ている項目があった）。
   記号は details の開閉状態からCSSで出し、ずれようがない形にする。
   HTML側の .faq-item__toggle は空にしてある。
   --------------------------------------------- */
.faq-item__toggle::before {
  content: '＋';
}
.faq-item[open] > .faq-item__q .faq-item__toggle::before {
  content: '−';
}

/* ---------------------------------------------
   食品館ハーズ 7部門のアイコン（2026-09-30）
   丸と白抜きの作りは HA-Z Classier と共通（上の .category-card__icon）。
   ここでは下地の色だけ店舗カラーの緑に差し替える。
   ⚠️ 緑 #4f7d5b は白とのコントラスト4.75で基準（4.5）を満たす。
      Classier のテラコッタと対になっているので、勝手に変えないこと。
   --------------------------------------------- */
#departments .category-card__icon svg {
  background: var(--haz-color-honkan, #4f7d5b);
}
#departments .category-card:hover .category-card__icon svg {
  background: var(--haz-color-honkan-dark, #3f6749);
}

/* ---------------------------------------------
   仕出しメニュー（2026-10-10 新設 / page-shidashi.php）
   食品館ハーズの「GIFT & CATERING」から進む下層ページ。
   絞り込みはチップ（丸い小さなボタン）。薄い緑の座布団の上に横一列で並べ、
   入りきらないときは横に流して選ぶ（2026-10-10 チップ化）。
   ⚠️ 横スクロールはスマホで「引っかかる」事故が起きやすい。原因になるものは入れないこと。
      ・scroll-snap は使わない（指を離した位置から引き戻されて「止まった」と感じる）
      ・-webkit-overflow-scrolling: touch は入れない（古い慣性実装を呼ぶ）
      ・scroll-behavior は auto のまま（smooth だと慣性が鈍る）
      ・touch-action: pan-x を座布団と各チップに入れる（無いと横スクロールが抑制される）
   --------------------------------------------- */
/* チップを押したときの戻り先の目印。場所を取らせない */
.sd-top {
  display: block;
  height: 0;
}
/* 座布団。スマホでは画面上部に貼りつく（下の @media 768px） */
.sd-filterbar {
  position: relative;
  background: #eef3ef;
  border: 1px solid #dde7e0;
  border-radius: 8px;
  margin-bottom: 1rem;
  touch-action: pan-x;
}
.sd-filter {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  touch-action: pan-x;
  /* スクロールバーは出さない（右端のぼかしで「続きがある」と伝える） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sd-filter::-webkit-scrollbar {
  display: none;
}

/* チップ */
.sd-chip {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 1.1em;
  background: #fff;
  border: 1px solid #cddbd1;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #3d5a47;
  white-space: nowrap;
  cursor: pointer;
  touch-action: pan-x;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sd-chip:hover {
  border-color: var(--haz-color-honkan, #4f7d5b);
  color: var(--haz-color-honkan, #4f7d5b);
}
.sd-chip--active,
.sd-chip--active:hover {
  background: var(--haz-color-honkan, #4f7d5b);
  border-color: var(--haz-color-honkan, #4f7d5b);
  color: #fff;
  font-weight: 700;
}
.sd-chip:focus-visible {
  outline: 2px solid var(--haz-color-honkan, #4f7d5b);
  outline-offset: 2px;
}

.sd-count {
  text-align: center;
  font-size: 0.78rem;
  color: #767676;
  letter-spacing: 0.06em;
  margin: 0 0 2.25rem;
}

.sd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.sd-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sd-card:hover {
  border-color: #222;
  transform: translateY(-2px);
}
.sd-card[hidden] {
  display: none;
}
.sd-card__media {
  aspect-ratio: 4 / 3;
  background: #e7e7e7;
  background-size: cover;
  background-position: center;
}
/* 写真がまだ無い品。灰色のままにして、空の箱に見せない */
.sd-card__media--none {
  background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #ededed 10px, #ededed 20px);
}
.sd-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sd-card__tag {
  align-self: flex-start;
  background: var(--haz-color-honkan, #4f7d5b);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  padding: 3px 10px;
  margin: 0 0 10px;
}
.sd-card__title {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 8px;
}
/* 商品紹介のひとこと。いまは出していない（PHP側で出力を止めてある）。
   出す場合は flex:1 を戻して、カードの下側をそろえること */
.sd-card__desc {
  font-size: 0.8rem;
  line-height: 1.8;
  color: #767676;
  margin: 0 0 12px;
}
.sd-card__title {
  margin-bottom: 14px;
}
/* ⚠️ ひとことが無いぶん、価格から下をカードの底にそろえる（高さの違いを吸収する）。
   margin-top: auto を別に書くと、下の margin ショートハンドに打ち消される。必ずここで指定する */
.sd-card__price {
  margin: auto 0 4px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
}
.sd-card__kind {
  font-size: 0.68rem;
  color: #767676;
  letter-spacing: 0.08em;
}
.sd-card__yen,
.sd-card__jika {
  font-size: 1.22rem;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.02em;
}
.sd-card__tax {
  font-size: 0.76rem;
  color: #767676;
}
/* 価格が複数ある品（盛カゴの花有・花無／赤飯おにぎりのグラム数） */
.sd-card__prices {
  margin: auto 0 4px;
}
.sd-card__kind--head {
  margin: 0 0 4px;
}
.sd-card__price--row {
  margin: 0 0 2px;
  gap: 0 6px;
}
/* 価格の頭に付く札。何の価格かを示す */
.sd-card__variant {
  flex: 0 0 auto;
  min-width: 3.4em;
  text-align: center;
  background: #eef3ef;
  border: 1px solid #cddbd1;
  border-radius: 3px;
  color: #3d5a47;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  align-self: center;
}
.sd-card__price--row .sd-card__yen {
  font-size: 1.08rem;
}

.sd-card__code {
  font-size: 0.7rem;
  color: #9a9a9a;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.sd-card__cta {
  margin: 0;
}
.sd-card__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #d4d4d4;
  padding-bottom: 3px;
}
.sd-card__cta a:hover {
  border-bottom-color: #222;
}
/* CTAの文言。スマホ2列では幅が足りないので短いほうに差し替える */
.sd-card__cta-sp {
  display: none;
}
.sd-card__pdf {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 1px 5px;
  color: #767676;
}

.sd-notes {
  margin-top: 3.5rem;
  border: 1px solid #e5e5e5;
  padding: 24px 26px;
  background: #fafafa;
}
.sd-notes__title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.sd-notes ul {
  margin: 0;
  padding-left: 1.2em;
}
.sd-notes li {
  font-size: 0.82rem;
  line-height: 2;
  color: #4a4a4a;
}

@media (max-width: 900px) {
  .sd-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- スマホ・タブレット：座布団を画面上部に貼りつける --- */
@media (max-width: 768px) {
  .sd-filterbar {
    position: sticky;
    /* ヘッダー（.v2-header）が 768px 以下で高さ60px。その真下に貼りつく */
    top: 60px;
    /* ヘッダーの z-index は 100。くぐらせるため、それより小さくする */
    z-index: 50;
    /* .container の左右余白（1.25rem）を打ち消して画面幅いっぱいの帯にする */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-bottom: 1.25rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: 0 8px 12px -10px rgba(0, 0, 0, 0.35);
  }
  .sd-filter {
    justify-content: flex-start;
    padding: 10px 1.25rem;
  }
  /* 右端のぼかし。横に続きがあることを伝える */
  .sd-filterbar::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(238, 243, 239, 0), #eef3ef);
  }
}

/* --- スマホ：カードは2列。幅が半分になるので文字と余白を詰める --- */
@media (max-width: 600px) {
  .sd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .sd-card__body {
    padding: 12px 12px 16px;
  }
  .sd-card__tag {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    margin-bottom: 8px;
  }
  .sd-card__title {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .sd-card__desc {
    font-size: 0.74rem;
    line-height: 1.7;
    margin-bottom: 10px;
  }
  .sd-card__yen,
  .sd-card__jika {
    font-size: 1.05rem;
  }
  .sd-card__kind {
    font-size: 0.62rem;
  }
  .sd-card__tax {
    font-size: 0.68rem;
  }
  .sd-card__variant {
    min-width: 3.2em;
    font-size: 0.6rem;
    padding: 1px 4px;
  }
  .sd-card__price--row .sd-card__yen {
    font-size: 0.95rem;
  }
  .sd-card__code {
    font-size: 0.64rem;
    margin-bottom: 10px;
  }
  .sd-card__cta a {
    font-size: 0.72rem;
    gap: 6px;
  }
  .sd-card__cta-pc {
    display: none;
  }
  .sd-card__cta-sp {
    display: inline;
  }
  .sd-card__pdf {
    font-size: 0.56rem;
    padding: 1px 4px;
  }
  .sd-chip {
    min-height: 36px;
    font-size: 0.78rem;
    padding: 0 0.95em;
  }
  .sd-notes {
    padding: 20px 18px;
  }
}