@charset "UTF-8";
/* ==========================================================
page-events.css — 03 冬の催しと灯り（2026-08-12）
ワイヤー 2:268（1440px設計・カード1340×900×6枚）を
TOPのデザイン言語で置き直したもの。
・ワイヤーの黄色い注意ボックス → TOPの語彙（淡青 --color-pale ＋ 青の左罫4px）
・カード幅は 1365設計のページ端 --l-edge=56 に合わせて 1253px
（左テキスト616 ＋ すき間21 ＋ 右メディア616）
・角丸なし・影なし（FUTSU共通ルール）
========================================================== */
.p-events {
width: calc(var(--canvas) - var(--l-edge) * 2);
margin: 96px auto 0;
}
/* ---- カード ---- */
.p-events__card {
display: grid;
grid-template-columns: 616px 616px;
gap: 21px;
/* 2026-08-20 市岡さん指示「左右の高さ違いが気になる」: align-items:start をやめて
右列（写真＋地図）を行高に stretch し、地図が余りを埋めて左右の下端を揃える */
padding: 44px 0 52px;
border-top: 1px solid var(--l-rule);
}
.p-events__card:last-child { border-bottom: 1px solid var(--l-rule); }
/* ---- 左: テキスト ---- */
.p-events__name {
margin: 0;
font-family: var(--font-jp);
font-weight: 500;
font-size: 28px;
line-height: 40px;
letter-spacing: 0.04em;
color: var(--color-blue);
}
.p-events__area {
margin: 8px 0 0;
font-family: var(--font-jp);
font-weight: 500;
font-size: 14px;
line-height: 1;
letter-spacing: 0.08em;
color: rgba(55, 57, 60, 0.72);
}
.p-events__desc {
margin: 26px 0 0;
font-family: var(--font-jp);
font-weight: 400;
font-size: 18px; /* 2026-08-12 市岡さん指示: 本文18px（TOPのバランス） */
line-height: 34px;
letter-spacing: 0.02em;
color: var(--color-ink);
}
/* ---- スタンプラリーの紹介文（2026-09-21: 冬物語パンフ第2校正の文章をそのまま掲載） ---- */
.p-events__intro {
margin: 18px 0 0;
font-family: var(--font-jp);
font-weight: 400;
font-size: 15.5px;
line-height: 28px;
letter-spacing: 0.02em;
text-align: justify;
color: var(--color-ink);
}
/* ---- 画像の著作権表記（2026-09-21: 温泉むすめ「© ONSEN MUSUME PROJECT」） ---- */
.p-events__credit {
margin-top: 8px;
font-family: var(--font-en);
font-size: 14px;
line-height: 1;
letter-spacing: 0.04em;
text-align: right;
color: rgba(55, 57, 60, 0.78);
}
/* ---- 開催情報ボックス（ワイヤーの黄色 → 淡青＋青の左罫） ---- */
.p-events__info {
margin: 26px 0 0;
padding: 20px 24px 18px;
border-left: 4px solid var(--color-blue);
background: var(--color-pale);
}
.p-events__info-row {
margin: 0;
font-family: var(--font-jp);
font-weight: 500;
font-size: 17px;
line-height: 30px;
letter-spacing: 0.02em;
color: var(--color-ink);
}
.p-events__info-note {
margin: 10px 0 0;
font-family: var(--font-jp);
font-weight: 400;
font-size: 15.5px;
line-height: 27px;
letter-spacing: 0.02em;
color: rgba(55, 57, 60, 0.8);
}
/* ---- ■イベント概要 / ■特別イベント / ■景品について ----
2026-08-20 市岡さん指示: 開催情報ボックスと見出しの間にあった区切り線
（p-events__rule）はカード境界の罫線と紛らわしいため廃止。
行間は旧値（罫線マージン26+線1+見出し24=51px）を最初の見出しのマージンで維持 */
.p-events__subhead {
margin: 24px 0 0;
font-family: var(--font-jp);
font-weight: 500;
font-size: 17px;
line-height: 1;
letter-spacing: 0.04em;
color: var(--color-blue);
}
.p-events__subhead:first-of-type { margin-top: 51px; }
.p-events__list {
margin: 14px 0 0;
padding: 0;
}
.p-events__list li {
font-family: var(--font-jp);
font-weight: 500;
font-size: 17px;
line-height: 30px;
letter-spacing: 0.02em;
color: var(--color-ink);
}
.p-events__list li + li { margin-top: 8px; }
/* 入れ子の細目（場所・時間など）。ワイヤーはインデント＋薄色 */
.p-events__sub {
display: block;
padding-left: 18px;
font-weight: 400;
font-size: 15.5px;
line-height: 27px;
color: rgba(55, 57, 60, 0.8);
}
/* ---- お知らせ（駐車場・参加条件など） ---- */
.p-events__alert {
margin: 24px 0 0;
padding: 16px 20px 14px;
border-left: 4px solid var(--color-blue);
background: var(--color-pale);
}
.p-events__alert-head {
margin: 0 0 6px;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
line-height: 1;
letter-spacing: 0.06em;
color: var(--color-blue);
}
.p-events__alert p:not(.p-events__alert-head) {
margin: 0;
font-family: var(--font-jp);
font-weight: 400;
font-size: 15.5px;
line-height: 27px;
letter-spacing: 0.02em;
color: rgba(55, 57, 60, 0.85);
word-break: break-all; /* キャンペーンURLが長いので枠内で折る */
}
/* ---- 画像プレースホルダー（2026-08-20: スタンプラリーのイラスト未支給・到着後に![]()
へ差し替え） ----
写真と同寸の淡青パネル。装飾は薄い罫のみ（角丸・影なし） */
.p-events__photo--soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 616px;
height: 402px;
border: 1px solid var(--l-rule);
background: var(--color-pale);
}
.p-events__soon-en {
font-family: var(--font-en);
font-style: italic;
font-size: 26px;
letter-spacing: 0.06em;
color: rgba(1, 89, 179, 0.55);
}
.p-events__soon-jp {
font-family: var(--font-jp);
font-size: 14px;
letter-spacing: 0.08em;
color: rgba(55, 57, 60, 0.6);
}
/* ---- 右: 写真＋会場アクセスマップ ---- */
.p-events__media {
display: flex;
flex-direction: column;
gap: 21px;
}
.p-events__photo { margin: 0; }
.p-events__photo img {
width: 616px;
height: 402px;
object-fit: cover;
}
/* 会場アクセスマップ（2026-08-12: Googleマップを実埋め込みに変更）。
会場名は公式キャンペーンサイト okuhida-fuyumonogatari.com の表記に合わせた。
ピンの微調整（正確な座標）は協会/FLAGの確認後に差し替える */
.p-events__map {
position: relative;
width: 616px;
/* 高さは固定しない: 写真(402)＋間(21)を除いた残りを flex で埋める。
本文が短いカードでは min-height まで縮む＝右列の最小 663px */
flex: 1 1 auto;
min-height: 240px;
border: 1px solid var(--l-rule);
background: var(--color-pale);
overflow: hidden;
}
.p-events__mapframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.p-events__map-btn {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 155px;
height: 44px;
padding: 0 16px;
background: var(--color-blue);
color: var(--color-white);
font-family: var(--font-jp);
font-weight: 500;
font-size: 14px;
letter-spacing: 0.06em;
}
/* ==========================================================
SP（393px設計）: 2カラム → 縦積み
========================================================== */
@media (max-width: 767px) {
.p-events {
width: var(--l-col);
margin-top: 52px;
}
/* 2026-08-18 市岡さん指示: SPは各イベントの区切りが読みにくい→並びを差し替え。
カードをflex縦積みにし、body/mediaを display:contents で平坦化して order で
「名前→温泉地→写真→説明→開催情報→罫線→見出し→リスト→（2組目）→お知らせ→地図」の順へ。
イベントの頭に必ず「名前＋写真」が来るので境界が一目で分かる。
行間は gap ではなく各要素の margin-top で管理（gapだと全要素間に一律入るため） */
.p-events__card {
display: flex;
flex-direction: column;
padding: 28px 0 32px;
}
.p-events__body,
.p-events__media { display: contents; }
.p-events__name { order: 1; }
.p-events__area { order: 2; }
.p-events__photo { order: 3; margin: 16px 0 0; }
.p-events__desc { order: 4; }
.p-events__info { order: 5; }
.p-events__subhead { order: 7; }
.p-events__list { order: 8; }
/* スタンプラリーのカードだけ 見出し＋リストが2組（■イベント概要／■景品について）。
orderはクラス一律だと「見出し2つ→リスト2つ」に並んでしまうため2組目を後ろへ */
.p-events__subhead:nth-of-type(2) { order: 9; }
.p-events__list:nth-of-type(2) { order: 10; }
.p-events__alert { order: 11; }
.p-events__map { order: 12; margin-top: 20px; }
.p-events__name { font-size: 20px; line-height: 30px; }
/* 2026-08-29 市岡さん指示「SPの行間が空きすぎ」。
SPの .p-events__card は display と flex-direction だけ上書きしていて PC の gap:21px を
継承したままなので、宣言した margin-top に必ず 21px が上乗せされる（実測 6+21=27px）。
指摘のあった「イベント名→温泉地」だけを 6px にするため gap 分を相殺する（21 + (-15) = 6px）。
※他のペアの間隔は指摘が無いので触らない。将来 .p-events__card に gap:0 を入れる時は
この値を 6px に戻すこと */
.p-events__area { margin-top: -15px; font-size: 14px; }
.p-events__desc { margin-top: 16px; font-size: 16px; line-height: 29px; }
/* スタンプラリー紹介文（2026-09-21）: desc の直後（order 同値＝ソース順）。card の gap 21px を相殺して間12px */
.p-events__intro { order: 4; margin-top: -9px; font-size: 15px; line-height: 27px; }
.p-events__info { margin-top: 18px; padding: 14px 16px 12px; }
.p-events__info-row { font-size: 15.5px; line-height: 27px; }
.p-events__info-note { font-size: 14px; line-height: 23px; }
.p-events__subhead { margin-top: 18px; font-size: 15px; }
.p-events__subhead:first-of-type { margin-top: 37px; }
.p-events__list { margin-top: 10px; }
.p-events__list li { font-size: 15.5px; line-height: 27px; }
.p-events__sub { padding-left: 14px; font-size: 14px; line-height: 24px; }
.p-events__alert { margin-top: 18px; padding: 12px 14px 10px; }
.p-events__alert p:not(.p-events__alert-head) { font-size: 14px; line-height: 24px; }
/* 写真とマップは幅いっぱいへ（mediaはdisplay:contentsなのでgap指定は不要） */
.p-events__photo img { width: var(--l-col); height: 222px; }
.p-events__photo--soon { width: var(--l-col); height: 222px; }
.p-events__soon-en { font-size: 20px; }
.p-events__soon-jp { font-size: 12.5px; }
.p-events__map { width: var(--l-col); height: 240px; }
.p-events__map-btn { min-width: 0; height: 44px; padding: 0 14px; font-size: 14px; }
}
/* ==========================================================
会場地図: クリックで読み込む方式（2026-08-25 カクツキ対策）
Googleマップのiframeは1枚ごとにフル版Maps JSを起動し、読み込み後も常駐タイマーが
回り続ける。6枚を素で埋め込むと 242リクエスト/12.25MB になり、スクロールが詰まる
（実測 p90 50.1ms → 地図を外すと 17.4ms）。押した時だけ main.js が iframe を作る。
Googleの地図画像はキャッシュ・再配布ができないため、プレースホルダーは自前の意匠。
========================================================== */
.p-events__mapfacade {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 16px 16px 60px; /* 下は「Googleマップで開く」ボタン(44px)を避ける */
border: 0;
background-color: var(--color-pale);
/* 2026-08-27 市岡さん指示: 実際の地図（Googleマップの静止画）を背景に置く。
画像は各カードが style="--map-pc/--map-sp" で持つ（events.html） */
background-image: var(--map-pc);
background-size: cover;
/* 下端基準。Googleロゴと「地図データ」表記を切らないため（カード高が可変なので上を削る） */
background-position: center bottom;
background-repeat: no-repeat;
color: var(--color-blue);
font-family: var(--font-jp);
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 地図の上に白いベールを敷いてラベルを読ませる。
ホバーでベールを薄くし、押せることを伝える */
.p-events__mapfacade::before {
content: "";
position: absolute;
inset: 0;
/* 中央（文字が乗る所）は濃く、外周は薄く。一律だと地図の線が文字の裏を通ったとき
コントラストが2.08:1まで落ちる（2026-08-27 実測）ので放射状にしている */
background: radial-gradient(ellipse 62% 78% at 50% 46%,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.86) 42%,
rgba(255, 255, 255, 0.42) 78%,
rgba(255, 255, 255, 0.30) 100%);
transition: background-color 0.3s ease;
}
.p-events__mapfacade:hover::before,
.p-events__mapfacade:focus-visible::before {
/* ホバー時は外周だけさらに薄くする（中央は可読性のため据え置き） */
background: radial-gradient(ellipse 62% 78% at 50% 46%,
rgba(255, 255, 255, 0.90) 0%,
rgba(255, 255, 255, 0.84) 42%,
rgba(255, 255, 255, 0.22) 78%,
rgba(255, 255, 255, 0.10) 100%);
}
/* ベールより前にラベルを出す */
.p-events__mapfacade > * { position: relative; z-index: 1; }
.p-events__mapfacade:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -4px; }
.p-events__mapfacade-pin { display: block; width: 30px; height: 30px; }
.p-events__mapfacade-label {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
}
.p-events__mapfacade-name {
font-size: 13px;
line-height: 1.6;
letter-spacing: 0.04em;
text-align: center;
color: var(--color-ink);
}
/* JS無効時のフォールバック（素のiframeを枠いっぱいに） */
.p-events__map noscript { display: block; width: 100%; height: 100%; }
@media (max-width: 767px) {
.p-events__mapfacade { padding: 14px 14px 56px; gap: 6px; background-image: var(--map-sp); }
.p-events__mapfacade-pin { width: 26px; height: 26px; }
.p-events__mapfacade-label { font-size: 15px; }
.p-events__mapfacade-name { font-size: 12px; }
}
/* ==========================================================
【2026-10-01 横山さん指示（冬物語ルーム）・市岡さん選択「6件すべて」】
「地図のGoogleマップは削除して、現在Googleマップを開くと青ボタンでありますが、
その青ボタンを開催場所のテキスト下に配置、またGoogleマップが無くなった場所には、
写真を2枚配置出来るように。写真は後日届きます。」
- 地図（.p-events__map・クリックで読み込む方式）は events.html から撤去。上の地図用CSSは
戻す時のために残置（今はどの要素にも当たらない）
- 青ボタン（.p-events__map-btn）は開催情報ボックス内「開催場所」の行の直下へ。
地図の右下に重ねていた絶対配置をやめ、行の流れに置く（高さ44px＝タップ領域を維持）
- 写真2枚の枠（.p-events__photos > .p-events__subphoto）を地図の場所へ。
PCは右列の残り（写真402＋間21を除いた高さ）を埋める＝左右の下端が揃う（2026-08-20 指示の維持）。
通常カード: 横2枚（各297.5×240）＝カード高663pxは不変
スタンプラリー: 本文が長く横2枚だと縦長になりすぎるので縦2枚（--stack）
SPは地図があった最後尾（order 12）に横2枚（4:3）
- 写真が届くまでは「Image Coming Soon」の枠（--soon）。届いたら figure の中身を ![]()
に替えて --soon を外す
========================================================== */
.p-events__map-btn {
position: static;
display: inline-flex;
margin: 6px 0 10px;
}
.p-events__photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 21px;
flex: 1 1 auto;
min-height: 240px;
}
.p-events__photos--stack {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.p-events__subphoto {
margin: 0;
min-width: 0;
min-height: 0;
}
.p-events__subphoto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.p-events__subphoto--soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid var(--l-rule);
background: var(--color-pale);
}
/* スタンプラリー「詳しくは下記URLの…」の下のURL（2026-10-01） */
.p-events__url {
display: block;
padding-left: 18px;
font-weight: 400;
font-size: 15.5px;
line-height: 27px;
color: var(--color-blue);
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-all;
}
@media (max-width: 767px) {
.p-events__map-btn { margin: 6px 0 8px; }
.p-events__photos,
.p-events__photos--stack {
order: 12;
margin-top: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: none;
gap: 12px;
min-height: 0;
}
.p-events__subphoto { aspect-ratio: 4 / 3; }
.p-events__subphoto--soon { gap: 6px; }
.p-events__subphoto--soon .p-events__soon-en { font-size: 15px; }
.p-events__url { padding-left: 14px; font-size: 14px; line-height: 24px; }
}
/* ==========================================================
【2026-10-06 市岡さん指示】SPの写真2枚の枠は「メイン画像の下に載せたい・離れすぎ」
→ 最後尾（order 12）からメイン写真（.p-events__photo・order 3）の直下へ。order を同値にしてソース順で写真の後に並べ、
card の gap 21px を -9px で相殺して間 12px（枠どうしの間隔と同じ）。説明文以降の並びは不変。PC は変更なし
========================================================== */
@media (max-width: 767px) {
.p-events__photos,
.p-events__photos--stack { order: 3; margin-top: -9px; }
}
/* ==========================================================
【2026-10-14 HEROU定例（河野さん修正リスト）・冬の催しと灯り「Googleマップで開く、は各箇所の一番下に」】
打ち合わせ 10:12「青い背景があるところ（開催情報ボックス）の一番下に」「米印の下に・全部統一」
→ 青ボタン（.p-events__map-btn）を開催情報ボックスの中で「開催場所」の直下（10/1）から、※注意書きの下＝ボックスの最後へ（events.html・5件）。
スタンプラリーはボタンごと削除（下の stamp）。戻す時はこのブロックを消し、events.html のボタンを開催場所の直下へ戻す
========================================================== */
.p-events__info-note + .p-events__map-btn { margin: 14px 0 0; }
@media (max-width: 767px) {
.p-events__info-note + .p-events__map-btn { margin: 12px 0 0; }
}
/* ==========================================================
【2026-10-14 HEROU定例（河野さん修正リスト）・冬の催しと灯り スタンプラリー】
打ち合わせ 10:13〜10:16「Googleマイマップはいらない」「冒頭の文章だけ残して」「この青い枠を消して、イベント概要を詰めて、
イベント概要の下も削除」「開催概要は決まり次第記載します、の形にして、準備ができたらスタンプラリーのURLに書き換える」
→ 開催情報ボックス（マイマップのボタンを含む）・■景品について・お知らせ枠を削除。■イベント概要の下は案内文1行（.p-events__tbd）。
「イメージカミングスーンも削除」は HTML だけ（枠の CSS は残置）。戻す時はこのブロックを消し、events.html を控えに戻す
========================================================== */
.p-events__tbd {
margin: 14px 0 0;
font-family: var(--font-jp);
font-weight: 500;
font-size: 17px;
line-height: 30px;
letter-spacing: 0.02em;
color: var(--color-ink);
}
@media (max-width: 767px) {
.p-events__tbd { order: 8; margin-top: 10px; font-size: 15.5px; line-height: 27px; }
}
/* ==========================================================
【2026-10-15b 横山さん Chatwork 冬物語ルーム「修正内容.pptx」1枚目】「イベント詳細について」のボタンとポップアップ
ボタン: .p-events__map-btn（Googleマップで開く）と同じ形（青地・白文字・高さ44px）。コピー（.p-events__desc）の直後。