@charset "UTF-8";
/* ホーム（index.twig）のイベント・施工事例の欄（T118・参考: live-best / kinoto）。
   page-top.css の後に読み込む。既存の規則と干渉しないよう、新しい hm- 系のクラスと #event.hm-ev（旧 #event の箱の打ち消し）だけに書く。
   色: 生成り（#FAF8F5 / #F3EFE9）・茶（#602600）。最初の画面（スライダー）は今回は変えない（依頼者の指定・2026-10-07） */

/* ---------- 施工事例 ---------- */
.hm-works { padding: 56px 20px 24px; }
.hm-works-inner { max-width: 1100px; margin: 0 auto; }
/* 見出しは英字だけ（EVENT・WORKS。依頼者の指定） */
.hm-sec-ttl { margin: 0 0 32px; text-align: center; }
.hm-sec-en { display: block; font-family: "Barlow", sans-serif; font-size: 40px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.2; color: #1a1a1a; }
/* 「すべて見る」（イベント・施工事例共通） */
.hm-more { margin: 32px 0 0; text-align: center; }
.hm-more a { display: inline-flex; align-items: center; gap: 0.6em; min-height: 52px; padding: 0 36px; border: 1px solid #602600; border-radius: 26px; color: #602600; font-size: 15px; letter-spacing: 0.1em; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.hm-more a:hover { background: #602600; color: #fff; text-decoration: none; }

/* ---------- イベント（参考: live-best / kinoto） ----------
   page-top.css の #event（幅 1200px・影付きの白い箱・余白）を外し、生成りの帯にカードを横に並べる。
   PC は 3 枚ずつ見せて矢印で送る・SP は指で横にめくる（次のカードを少し見せる）。横送りはブラウザのスクロール（scroll-snap）で、JS は矢印と進み具合の線だけ */
#event.hm-ev { width: auto; margin: 0; padding: 64px 0 56px; box-shadow: none; background: #FAF8F5; }
.hm-ev-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
/* overflow-x: auto で縦もはみ出しが切れるため、カードの影（ホバー時）が収まるよう下に余白（28px）を取る。下の負のマージン（-20px）は
   矢印の行（.hm-ev-nav の margin-top 20px）と相殺され、カードの下端から矢印の行までは 28px になる */
/* scroll-padding は左右の padding（4px）と同じにする。違うと scroll-snap が読み込み直後に 4px 送り、先頭なのに「前へ」が押せる表示になる（T118 G3 で検知） */
.hm-ev-list { display: flex; gap: 24px; margin: 0 0 -20px; padding: 6px 4px 28px; scroll-padding: 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hm-ev-list::-webkit-scrollbar { display: none; }
.hm-ev-item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; scroll-snap-align: start; }
.hm-ev-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 4px; overflow: hidden; color: #3b2f26; text-decoration: none; box-shadow: 0 1px 4px rgba(60, 40, 20, 0.1); transition: box-shadow 0.2s; }
.hm-ev-card:hover { box-shadow: 0 6px 16px rgba(60, 40, 20, 0.16); color: #3b2f26; text-decoration: none; opacity: 1; }
/* 告知画像は文字入りのバナーが多いので切り取らずに全体を見せる（余白は生成り） */
.hm-ev-pic { aspect-ratio: 16 / 9; background: #F3EFE9; }
.hm-ev-pic img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s; }
.hm-ev-card:hover .hm-ev-pic img { transform: scale(1.03); }
/* 本文: 種類の札と予約条件の札を 1 行に並べ、その下にタイトル・開催日時・開催場所（event/_meta.twig の .sy-txtare の中身を display: contents で並べ替える） */
.hm-ev-body { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; flex: 1 0 auto; gap: 0 6px; padding: 16px 18px 4px; }
.hm-ev-body > *, .hm-ev .sy-txtare > * { flex: 0 0 100%; min-width: 0; }
.hm-ev .sy-txtare { display: contents; }
.hm-ev-cats { order: 1; flex: 0 0 auto !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hm-ev .sy-tags { order: 2; flex: 0 0 auto !important; margin: 0 0 10px; line-height: 1; }
.hm-ev-ttl { order: 3; margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.55; color: #1a1a1a; }
.hm-ev-subttl { order: 4; margin: -6px 0 12px; font-size: 13px; letter-spacing: 0.04em; line-height: 1.6; color: #4d4d4d; }
/* 時間（.sy-time）は T121 で日付から別の行に分かれた。日付の次に置く（order を付けないとタイトルより上に出る） */
.hm-ev .sy-date { order: 5; }
.hm-ev .sy-time { order: 6; }
.hm-ev .sy-place { order: 7; }
.hm-ev .sy-note { display: none; }
/* 「詳しく見る」は本文の外に置き、カードの下端にそろえる（本文の長さが違っても同じ高さ） */
.hm-ev-more { margin: 0; padding: 8px 18px 18px; color: #a07a3f; font-size: 13px; letter-spacing: 0.1em; }
.hm-ev-more span { margin-left: 0.4em; }
.hm-ev-cat { display: inline-block; padding: 4px 10px; border-radius: 2px; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.3; background: #7A3B24; }
.hm-ev .sy-tag { display: inline-block; margin: 0 6px 0 0; padding: 4px 10px; border-radius: 2px; background: #B5452E; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.3; }
/* 開催日時・開催場所: 左にラベル（角丸の枠）、右に内容 */
.hm-ev .sy-date,
.hm-ev .sy-place { position: relative; margin: 0 0 8px; padding-left: 78px; min-height: 22px; font-size: 14px; letter-spacing: 0.02em; line-height: 1.6; color: #3b2f26; }
.hm-ev .sy-date { font-weight: 700; color: #602600; }
/* 時間（.sy-time）: 日付の次にあるときは「開催日時」のラベルの続き（ラベルは付けず、日付の文字の下にそろえる）。
   日付が無く時間だけのとき（構造化記事で時間だけ入力した場合・_flags.twig）は、時間の行に「開催日時」のラベルを付ける（T118 G2 軽微 2） */
.hm-ev .sy-time { position: relative; margin: 0 0 8px; padding-left: 78px; min-height: 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; color: #602600; }
.hm-ev .sy-date + .sy-time { margin-top: -6px; min-height: 0; }
.hm-ev .sy-time::before { content: "開催日時"; position: absolute; left: 0; top: 1px; width: 66px; box-sizing: border-box; padding: 1px 0; border: 1px solid #9a8b7d; border-radius: 12px; color: #6b5d51; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.5; text-align: center; }
.hm-ev .sy-date + .sy-time::before { content: none; }
.hm-ev .sy-date::before,
.hm-ev .sy-place::before { position: absolute; left: 0; top: 1px; width: 66px; box-sizing: border-box; padding: 1px 0; border: 1px solid #9a8b7d; border-radius: 12px; color: #6b5d51; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.5; text-align: center; }
.hm-ev .sy-date::before { content: "開催日時"; }
.hm-ev .sy-place::before { content: "開催場所"; }
/* 矢印と進み具合の線（はみ出さないときは JS が hidden にする） */
.hm-ev-nav { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.hm-ev-nav[hidden] { display: none; }
.hm-ev-progress { flex: 1; height: 2px; background: #e3dbd0; }
.hm-ev-progress-bar { display: block; width: 0; height: 100%; background: #602600; transition: width 0.2s; }
.hm-ev-arrow { width: 72px; height: 36px; border: 1px solid #602600; border-radius: 18px; background: #fff; color: #602600; font-size: 16px; cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.hm-ev-arrow:hover:not([aria-disabled="true"]) { background: #602600; color: #fff; }
.hm-ev-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }

/* ---------- 767px 以下 ---------- */
@media screen and (max-width: 767px) {
  #event.hm-ev { padding: 40px 0 40px; }
  .hm-ev-inner { padding: 0 16px; }
  /* 1 枚を画面の 8 割ほどにして、次のカードを少し見せる（めくれることが分かるように） */
  .hm-ev-list { gap: 14px; margin: 0 -16px -20px; padding: 6px 16px 28px; scroll-padding: 0 16px; }
  .hm-ev-item { flex-basis: 82%; }
  .hm-ev-nav { gap: 10px; }
  .hm-ev-arrow { width: 56px; height: 32px; font-size: 14px; }
  .hm-works { padding: 40px 16px 16px; }
  .hm-sec-en { font-size: 32px; }
  .hm-sec-ttl { margin-bottom: 20px; }
}