@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   Auto O.O.E — カレンダー用CSS（子テーマ） / ショートコード [ooe_calendar]
   ---------------------------------------------------------------
   出典: tasks/OOE-04-holiday-calendar/output/calendar-2months.html
        （見た目の正はそちら。月替わりのHTMLは functions.php 側）

   🔴 このファイルは functions.php で「親 style.css より後」に読み込まれる。
      子テーマ側のCSSはすべてここに書くこと
      （style.css に書くと親に上書きされて効かない）。

   🔴 スコープの鉄則 — すべてのセレクタを .ooe-cal の中に閉じ込めること
      元ファイルは「1ページ丸ごと」用に書かれていて、そのまま持ち込むと：
        *{margin:0;padding:0} → サイト全体のレイアウトが崩壊
        body{background:黄色} → ページ全体が黄色に
        h2{...}               → 記事の見出しに漏れる
      ここでは全部 .ooe-cal 配下へ移設済み。
      新しいルールを足す時も必ず .ooe-cal から書き始めること。

   🔴 CSS変数は --ooe- 接頭辞を付けること（親テーマ・他との衝突回避）

   🔑 サイズ設計（2026-07-17 改修）— 「基準ノブ1個の em 比例」方式
      旧版は clamp(…vw…) だったが、vw は「ブラウザ窓の幅」を見るため、
      幅520pxの記事枠に置くと（モニターが広いほど）1160px看板用の
      最大サイズで描こうとして潰れた。
      → 全サイズを .ooe-cal の font-size（下の「★基準ノブ」）からの
        em 比例に変更。ノブ1個で看板全体が等比でスケールする。
      - 通常（記事枠 約520px）: 13px … 2ヶ月横並びが520pxに収まる
      - スマホ（画面幅760px以下）: 15px ＋ 縦積み（新しい月が上）
      サイズを調整したくなったらノブだけ触ること（個別値は原則触らない）。
   ═══════════════════════════════════════════════════════════════ */

/* ── 変数（.ooe-cal スコープ。:root には置かない） ── */
.ooe-cal{
	--ooe-yellow:#f6d64a;      /* 外枠と文字の黄色 */
	--ooe-black:#0e0e0e;       /* 看板の黒 */
	--ooe-red:#d64d6e;         /* 休マークの赤 */
	--ooe-sun:#e0607a;         /* 日曜ヘッダー */
	--ooe-sat:#5b9bd5;         /* 土曜ヘッダー */
	--ooe-grid-line:#a5cde2;   /* カレンダー罫線（水色） */
	--ooe-ink:#3a3a3a;         /* 日付の文字色 */
}

/* ── リセット（.ooe-cal の中だけ） ── */
.ooe-cal,
.ooe-cal *{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

/* ── 外側の器（元 body 相当） ── */
.ooe-cal{
	background:var(--ooe-yellow);
	font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","HGMaruGothicMPRO","Yu Gothic",sans-serif;
	font-size:13px; /* ★基準ノブ：以下すべて em でこれに比例（520px記事枠向け） */
	display:flex;
	justify-content:center;
	padding:1em;
}

/* ── 黒い看板 ── */
.ooe-cal .board{
	background:var(--ooe-black);
	border-radius:1.6em;
	width:100%;
	max-width:42em; /* ノブ13px時 ≒546px。広い枠に置かれても比率が崩れない上限 */
	padding:1.7em 1em 1.4em;
	display:flex;
	flex-direction:column;
	align-items:center;
}

/* ── お知らせ ── */
.ooe-cal .notice{
	display:flex;
	align-items:center;
	gap:.6em;
	color:var(--ooe-yellow);
	font-size:1.5em;
	font-weight:800;
	letter-spacing:.12em;
	width:100%;
	justify-content:center;
}
.ooe-cal .notice::before,
.ooe-cal .notice::after{
	content:"";
	height:.15em;
	background:var(--ooe-yellow);
	border-radius:2px;
	width:3.2em;
}

/* ── 2ヶ月グリッド（横並び／スマホ縦積み） ── */
.ooe-cal .months{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1em;
	width:100%;
	margin-top:1.4em;
}

/* ── 翌月が未入力のとき：当月1つだけを中央に置く ──
   （calendar-render.php が .months に ooe-cal-single を付ける）。
   1枚を2ヶ月時の1枚ぶん相当の幅にキャップして中央寄せ。 */
.ooe-cal .months.ooe-cal-single{
	grid-template-columns:minmax(0,22em);
	justify-content:center;
}

/* 月ラベル（h2でなく div .month-title＝テーマ .entry-content h2 の漏れ回避＋
   見出しアウトラインを汚さない。見た目は従来の月見出しを踏襲） */
.ooe-cal .month .month-title{
	color:var(--ooe-yellow);
	text-align:center;
	font-size:1.45em;
	font-weight:800;
	letter-spacing:.06em;
	line-height:1.3;
	margin:0 0 .6em;
}

/* ── 曜日ヘッダー（黒地の上） ── */
.ooe-cal .cal{width:100%}
.ooe-cal .cal-head{
	display:grid;
	grid-template-columns:repeat(7,minmax(0,1fr));
	margin-bottom:.5em;
}
.ooe-cal .cal-head span{
	text-align:center;
	color:#fff;
	font-size:.92em;
	font-weight:700;
}
.ooe-cal .cal-head .sun{color:var(--ooe-sun)}
.ooe-cal .cal-head .sat{color:var(--ooe-sat)}

/* ── カレンダー本体（白地） ── */
.ooe-cal .cal-body{
	display:grid;
	grid-template-columns:repeat(7,minmax(0,1fr));
	background:#fff;
	border:2px solid var(--ooe-grid-line);
	overflow:hidden; /* 罫線のはみ出し防止 */
}
.ooe-cal .day{
	border-top:2px dotted var(--ooe-grid-line);
	border-left:2px dotted var(--ooe-grid-line);
	min-width:0;      /* グリッドのはみ出し防止（全ブラウザ共通） */
	min-height:4em;   /* セルの高さ＝文字サイズ基準（縦横比はブラウザ差が出るため不使用） */
	display:flex;
	flex-direction:column;
	align-items:center;
	padding-top:.4em;
	padding-bottom:.4em; /* 休マーク（PC=字/スマホ=赤丸）の下に余白を作りセル底に密着させない */
	color:var(--ooe-ink);
	font-size:.95em;
	font-weight:700;
	line-height:1.35; /* 数字の下の余白を詰めて休マークを数字に寄せる */
}
.ooe-cal .day:nth-child(-n+7){border-top:none}
.ooe-cal .day:nth-child(7n+1){border-left:none}

/* ── 日付の色：日曜列(7n+1)=赤／土曜列(7n)=青（曜日ヘッダーと同色）──
   .cal-body は7列・行ごとの並びなので、各行の1列目=日曜/7列目=土曜。
   2ヶ月版は各月の .cal-body ごとに列判定されるため両月とも正しく色付く。
   休(off)日でも数字色は据え置き（下に赤丸が付く）。 */
.ooe-cal .cal-body .day:nth-child(7n+1){color:var(--ooe-sun)}
.ooe-cal .cal-body .day:nth-child(7n){color:var(--ooe-sat)}

/* ── 休マーク（class="off" のセルに出る） ── */
.ooe-cal .day.off::after{
	content:"休";
	margin-top:.18em;
	background:var(--ooe-red);
	color:#fff;
	width:1.9em;
	height:1.9em;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.92em;
	font-weight:800;
}

/* ── フッター ── */
.ooe-cal .hours{
	color:#fff;
	font-weight:800;
	font-size:1.15em;
	letter-spacing:.04em;
	margin-top:1.4em;
	display:flex;
	align-items:center;
	gap:.45em;
	flex-wrap:wrap;
	justify-content:center;
}
.ooe-cal .hours .mark{
	background:var(--ooe-red);
	color:#fff;
	width:1.55em;
	height:1.55em;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:.78em;
	font-weight:800;
}
.ooe-cal .shop{
	color:var(--ooe-yellow);
	font-size:1.5em;
	font-weight:800;
	letter-spacing:.14em;
	margin-top:.8em;
}

/* ── スマホ幅：横2列を維持（縦積みにしない）＋休マークは赤丸のみ ──
   ・記事枠が狭くても2ヶ月を横に並べたい、というオーナー要望（2026-07-17）。
   ・ここでは vw 基準が安全：スマホは「viewport≒コンテンツ幅」なので、
     PCで起きた「広い窓×520px枠」のズレが起きない。
   ・ノブ clamp(9px … 13px)：320pxでも2列が収まり、760px境界では13pxで
     PC側（font-size:13px）と連続する（境界で見た目が飛ばない）。
   ・小さいマスでは「休」の字が潰れて読めないため、休マークは赤丸のみに。
     意味はフッターの凡例（休＝定休日）で担保。 */
@media (max-width:760px){
	.ooe-cal{font-size:clamp(9px,2.4vw,13px)}
	.ooe-cal .months{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em}
	.ooe-cal .board{padding:1.3em .7em 1.1em}
	.ooe-cal .day{min-height:3.6em} /* 赤丸＋下余白ぶんPCより少し高く */
	.ooe-cal .day.off::after{content:"";width:1.05em;height:1.05em;margin-top:.12em}
	/* 凡例の「休」もカレンダーに合わせて赤丸だけに（文字は本物のテキストなので
	   color:transparent で隠す＝丸のサイズは保ちつつ字を消す。読み上げには残る）。 */
	.ooe-cal .hours .mark{color:transparent;width:1.05em;height:1.05em}
}