/* ===== イベントページ（plans/plan_event.py）: 商業施設ページ（plan-mall.css）に足す分だけ。名前は e- ===== */

/* 実現できること: 見出しの後ろに対象のイベント（小さく・次の行）。事例の箱は商業施設ページと同じ（ロゴ・事例名・何が変わったか）。
   その下に、今のページの実績を「ほかの実績」として小さく残す（行き先の無いものは文字だけ） */
.e-fn__scope { display: block; margin-top: calc(6 * var(--u)); color: var(--a-g500); font-size: max(14px, calc(15 * var(--u))); letter-spacing: 0; }
.e-fn__others { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--a-k14); }
.e-fn__k { margin: 0; font-size: 12px; color: var(--a-g700); letter-spacing: .04em; }   /* g500 は紙色の上で 4.30（基準 4.5 未満） */
.e-fn__cases { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin: 0; padding: 0; list-style: none; }
.e-fn__more { color: var(--a-g700); font-size: max(13px, calc(13 * var(--u))); line-height: 1.7; }
a.e-fn__more { text-decoration: underline; text-decoration-color: var(--a-k14); text-underline-offset: 3px; }
@media (hover: hover) { a.e-fn__more:hover { color: var(--a-violet); text-decoration-color: currentColor; } }
/* 事例の文の後ろの製品ページへのリンク（あなぶき → VACAN Throne & AirKnock・2026-10-11）。「ほかの実績」のリンクと同じ形（細い下線・載せると Violet） */
a.e-fn__prod { color: inherit; text-decoration: underline; text-decoration-color: var(--a-k14); text-underline-offset: 3px; }
@media (hover: hover) { a.e-fn__prod:hover { color: var(--a-violet); text-decoration-color: currentColor; } }
.e-fn__prod .a-nb .a-arr { margin-left: 4px; }

/* スマホやサイネージで: 2 枚を並べる（3:2・ほかの節の写真と同じ比。しのさん 2026-10-10） */
.e-dl { background: var(--a-paper); }
.e-dl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-gap); }
.e-dl__pic { display: block; aspect-ratio: 3 / 2; border-radius: 8px; clip-path: inset(0 round 8px); overflow: hidden; background: var(--a-w); }
.e-dl__pic picture { display: contents; }
.e-dl__pic img { width: 100%; height: 100%; object-fit: cover; }

/* 多様な可視化手段: 3 枚（図は 461×307 ＝ 3:2 のまま） */
.e-sols__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-sol__pic { aspect-ratio: 3 / 2; }
.e-sol--txt .m-prod__n { color: var(--a-k); }
@media (hover: hover) { .e-sol--txt:hover .m-prod__pic img { transform: none; } }

/* 導入フロー: 納期の注記 */
.e-flow__note { margin: calc(32 * var(--u)) 0 0; color: var(--a-g500); font-size: max(13px, calc(13 * var(--u))); line-height: 1.8; }

@media (max-width: 1100px) {
  .e-sols__grid { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 767px) {
  .e-dl__grid { grid-template-columns: 1fr; }
}

/* 文字のリンクの矢印: 長いリンク（実績・可視化手段の名前）は inline にして、矢印を最後の語と一緒に折る（plan_event.arr_tail） */
.m-fn__proof .m-fn__case, .e-sols .m-prod__n, .e-main .m-case__n { display: inline; }
.m-fn__proof .m-fn__case .a-nb .a-arr, .e-sols .m-prod__n .a-nb .a-arr, .e-main .m-case__n .a-nb .a-arr, .e-fn__more .a-nb .a-arr { margin-left: 4px; }
.m-fn__proof .m-fn__case { align-self: flex-start; }

/* hero: 2 行目「混雑対策は十分ですか？」は 11 字で、商業施設ページの 1 行目（7 字）より長い。写真の上に字を重ねる幅では折らない（画面の枠が写っていないので、右へ伸びても避ける物が無い） */
@media (min-width: 1280px) { .e-main .m-hero__body { max-width: none; width: max-content; } .e-main .m-hero__h { white-space: nowrap; } }   /* 幅は中身まで（右端まで広げると、写真の右側の人・車まで「字の下」と判定されて括弧が消えた） */

/* 事例のロゴ: 益子町観光協会・あなぶきアリーナ香川のロゴは下に英字の行があり、商業施設ページの高さ（横長 22px・中 28px）では字が読めない。このページだけ 1 段大きく */
.e-main .m-fn__logo[data-sz="w"] { height: 28px; } .e-main .m-fn__logo[data-sz="m"] { height: 36px; }

/* 可視化手段の生成した写真に添える「イメージ」（写真の右下・小さく） */
.e-sol__pic { position: relative; }
.e-sol__pic picture { display: contents; }
.e-sol__note { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 3px; background: rgb(0 0 0 / .45); color: var(--a-w); font-size: 10px; line-height: 1.4; letter-spacing: .04em; pointer-events: none; }

/* hero の写真の幕（字が写真に重なる 1280px 以上だけ）: 花見の桜・駐車場の白線が見出しの後ろで明るく、商業施設ページの幕では
   見出しの明るい所のコントラストが 2.2（大きい字の基準 3.0 未満）。左の幕を濃く・広くして、5 枚とも 4.2 以上（2026-10-10 実測） */
@media (min-width: 1280px) {
  .e-main .m-hero--a .m-hero__photo::after {
    background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .5) 32%, rgb(0 0 0 / 0) 60%),
                linear-gradient(to right, rgb(0 0 0 / .76) 0%, rgb(0 0 0 / .6) 35%, rgb(0 0 0 / 0) 60%),
                linear-gradient(to bottom, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / .38) 12%, rgb(0 0 0 / 0) 24%);
  }
}

/* 導入事例のカードのスライドショー（サービスサイト TOP の .a-pcard__img--slides と同じ部品。写真の重ね方・升・切り替えは plan-a.css / plan-a.js のまま） */
.e-slides { position: relative; }
.e-slides picture { display: contents; }
.e-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Unsplash のイメージが出ている間だけ「イメージ」を右下に */
.e-slides__note { opacity: 0; transition: opacity 800ms cubic-bezier(.4,0,.2,1); z-index: 1; }
.e-slides:has(img.is-on.is-stock) .e-slides__note { opacity: 1; }   /* Unsplash の写真（.is-stock）が出ている間だけ。事例の画面・導入先の写真では出さない */

/* 数字で見る、イベントでの導入の効果（サービスサイト TOP の .a-stats と同じ部品）。節の写真の下に置く */
.e-stats { margin-top: var(--a-sec); }
.e-stats__h { margin: 0; }
.e-odo__pre { align-self: flex-end; padding-bottom: calc(28 * var(--u)); margin-right: calc(8 * var(--u)); color: var(--a-g500); font-family: var(--a-jp); font-size: calc(36 * var(--u)); line-height: 1; }
/* 「約」は数字の左の外に置く（数字の左端を 5 行でそろえる・「約 1,000 台分」が右へはみ出さない）。数字が行の中に流れる 1100px 以下は今のまま */
@media (min-width: 1101px) { .e-stat .a-odo { position: absolute; } .e-odo__pre { position: absolute; right: 100%; bottom: 0; margin-right: calc(10 * var(--u)); } }

/* hero の人混みの点（js/plan-mhero.js の shot.dots）。写真の升の canvas の上・枠の下 */
.p-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* 駐車場の写真（data-keep-cur）: 枠は点に縮めず、すべての車にカーソルの括弧を残す */
.p-scan.is-keep.is-dot i { opacity: 1; }
.p-scan.is-keep.is-dot b { opacity: 0; }
.p-scan.is-keep i { width: 6px; height: 6px; border-color: rgb(255 255 255 / .95); filter: drop-shadow(0 0 1px rgb(0 0 0 / .8)); }   /* 線の太さはほかの括弧と同じ 1px（しのさん 2026-10-10「カーソルの線の太さはすべて共通に」）。白い車の上で消えないよう不透明にして影 */
/* 読み終わっても括弧は白のまま（薄い Violet にすると白・銀の車の上で消えた） */
@media (max-width: 767px) { .p-scan.is-keep i { width: 3px; height: 3px; filter: none; } }   /* スマホ幅では車が 10px ほどなので括弧を小さく */

/* 人の写真（data-no-cur）: 検知は点だけ。輪郭を描く動き・カーソルの括弧は出さない（しのさん 2026-10-10「カーソルのアニメーション不要」） */
.p-scan.is-nocur .p-scan__o, .p-scan.is-nocur .p-scan__m, .p-scan.is-nocur i { display: none; }
.p-scan.is-nocur b { opacity: 1; }

/* hero の数字の下のイベント名（しのさんコメント 2026-10-10「表示する数字の下にイベント名を」） */
.e-main .p-count { flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; }
.p-count__ev { flex-basis: 100%; text-align: right; font: 400 12px/1.4 var(--a-jp); letter-spacing: .04em; color: rgb(255 255 255 / .8); }
.p-count__ev:empty { display: none; }

/* 写真の「イメージ」の表示はやめた（しのさんコメント 2026-10-10「写真にイメージってテキストが表示されていますが不要」）。HTML の印は残し、見せない */
.e-sol__note, .e-slides__note { display: none !important; }
/* 数の単位（「10,000人」）。数字のすぐ後ろに小さく */
.p-count__u { margin-left: -6px; font: 400 14px/1 var(--a-jp); font-style: normal; color: rgb(255 255 255 / .9); }
.p-count__u:empty, .p-count > span:empty { display: none; }
@media (max-width: 767px) { .p-count__u { font-size: 12px; } }
/* 導入事例のスライドの切り替え: .m-case__pic img（plan-mall.css・後から読む）の transition が transform だけを指定していて、
   TOP の .a-pcard__img--slides の opacity 800ms を消していた＝一瞬で切り替わった（しのさんコメント 2026-10-10「トランジション入れて」） */
.e-slides img { transition: opacity 800ms cubic-bezier(.4,0,.2,1), transform var(--d-l) var(--e-out); }

/* 「ほかの実績」のリンクの押せる範囲（2026-10-10 QA）: 19px だった。PC は 24px 以上（WCAG 2.5.8）、指で触る画面は 44px（行の高さを 44px に・見た目の字は同じ） */
a.e-fn__more { display: inline-block; padding-block: 2px; }
@media (max-width: 767px), (pointer: coarse) {
  .e-fn__cases { gap: 0; }
  .e-fn__cases > li { display: flex; align-items: center; min-height: 44px; }
  a.e-fn__more { padding-block: 0; }
  .e-fn__cases > li:has(> a.e-fn__more) { position: relative; }
  .e-fn__cases > li > a.e-fn__more::after { content: ""; position: absolute; inset: 0; }   /* 行ぜんたいを押せる範囲に */
}
/* 数字の欄の条件の字（12px）: TOP と共通の g500 は灰色の地の上で 4.30（基準 4.5 未満）。このページでは g700 に（2026-10-10 QA） */
.e-stat .a-stat__cond { color: var(--a-g700); }
/* 数字の横の「約」・単位: 小さい画面では 24px を下回り「大きな字」の基準（3）でなく 4.5 が要る。g500 は 4.30 → g700 */
.e-stat .a-odo__unit, .e-odo__pre { color: var(--a-g700); }
/* 「1,000」の「,」の下の端が、数字の桁の枠（overflow: hidden・回る桁を切るための枠）に切られていた（2026-10-10 QA・1440 で 18px）。記号の桁は回らないので切らない */
.e-stat .a-digit--sym { overflow: visible; }
/* 括弧を残す・点だけ は、枠ごとの印（is-keep・is-nocur）で決める。写真が替わって次の写真の印に切り替わっても、持ち越した前の枠の見た目は変わらない */

/* hero の数の着地（しのさん 2026-10-10「hero のアニメーション要素が全てシンクするように」）: 数え終わった瞬間、人の点と同じ Violet に一度だけ灯って白に戻る */
.p-count b { transition: color 700ms var(--e-out); }
.p-count.is-land b { color: #C9B5DE; transition: color 160ms var(--e-out); }
@media (prefers-reduced-motion: reduce) { .p-count b { transition: none; } }

/* 押せる範囲（WCAG 2.5.8・2026-10-10 QA）: 見た目は変えず、当たりだけ広げる。
   フッターの一覧のリンク（16px）は上下 4px（行内の余白は行の高さを変えない）。ピルのロゴ（高さ 10.4px）は上下 7px */
.a-foot__list a, .a-foot__sns a { padding-block: 5px; }
.a-foot__sns a { padding-inline: 10px; margin-inline: -10px; }
.a-hd.is-pill .a-hd__logo { padding-block: 7px; margin-block: -7px; }
@media (max-width: 767px) { .a-ind__rg a { width: 28px; } }   /* 当たりの幅 28px（余白の幅いっぱい・WCAG 2.5.8） */
.p-count::before { content: ""; position: absolute; z-index: -1; inset: -36px -48px -32px -72px; background: radial-gradient(closest-side, rgb(11 12 15 / .72), rgb(11 12 15 / .5) 60%, rgb(11 12 15 / 0)); pointer-events: none; }   /* 写真が明るい所でも数とイベント名を読める（2026-10-10 QA: 駐車場の写真で 1.75） */

/* 半角英数はすべて Roboto（しのさん 2026-10-10・確認用ページで指示）。和文は Noto Sans JP、hero の明朝はそのまま。共用の css/plan-a.css の :root を、このページだけ上書きする */
:root { --a-sans: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif; --a-jp: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-mono: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif; --a-amono: "Roboto", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --a-archivo: "Roboto", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.a-odo { font-weight: 500; }   /* 実績の数は Roboto Medium（しのさん 2026-10-10「実績の数値の font weight を太く」） */

/* hero の左下の「※イメージ画像」（しのさん 2026-10-23「イメージ画像なので左下に ※イメージ画像 と小さく。対象は横浜音祭り・河津桜・花火大会」）。
   右下の数の注記（.m-hero__place）と同じ大きさ・同じ高さ。写真が替わる瞬間に js/plan-ehero.js の swapText が is-on を付け外す。スマホは数（.p-count）と同じ 10px・12px の余白 */
.e-hero__stock { position: absolute; z-index: 3; left: 12px; bottom: 10px; margin: 0; font: 400 12px/1.4 var(--a-jp); letter-spacing: .04em; color: rgb(255 255 255 / .85);
  text-shadow: 0 0 6px rgb(0 0 0 / .55); pointer-events: none; opacity: 0; transition: opacity var(--d-m) var(--e-out); }
.e-hero__stock.is-on { opacity: 1; }
@media (min-width: 1280px) { .e-hero__stock { left: var(--a-gutter); bottom: calc(24 * var(--u)); line-height: 1.8; color: rgb(255 255 255 / .7); text-shadow: none; } }   /* 行の高さは右下の注記と同じ 1.8（字の下端がそろう。1 だと 5.6px 下に出た） */
@media (prefers-reduced-motion: reduce) { .e-hero__stock { transition: none; } }