@charset "UTF-8";
/* =========================================================
しずまつトピックス（BLUE × ORANGE）
https://www.matsuzakaya.co.jp/shizuoka/topics/230915_shizumatsu.html
※ Gaisho SPECIAL 3DAYS のページと同じ書き方で作っています
■ 前提
・ファイル名は、ページの HTML と同じ名前にする（230915_shizumatsu.html
→ 230915_shizumatsu.css）。共通の名前にすると、ほかのページの CSS と重なる。
・本番ページでは CMS 共通CSS（parts.css / topics-detail.css）の上で表示される。
リセット（h2・h3・p・ul などの余白を 0、文字の大きさを 100% にする）と
box-sizing: border-box は、そちらで効いている。
・スマホ（767px以下）では、CMS の「#main p { font-size: 15px }」が、このファイルで
p に指定した font-size より優先される。このページの p（日付・会場・本文）は、
11. の中で #main を付けて、PC と同じ大きさに戻している。
・文字の大きさは rem で指定している。CMS の共通CSS が html { font-size: 62.5% } としているため、
1rem＝10px（例：1.4rem＝14px）。ブラウザの文字サイズの設定を大きくすると、同じ割合で大きくなる。
・このページのスマホの切り替えは 768px以下（CMS の共通CSS は 767px以下）。
そのため、幅がちょうど 768px のときは、ページはスマホ、ページの枠は PC の表示になる。
■ 初めて触る方へ
・見た目を変えたいときは、HTML で変えたい部分の class="…" の名前を確かめ、
このファイルを「.名前」で検索する（例：日付の帯を変えたい → 「.card-date」で検索）
・同じ名前が「11. スマホ（768px以下）」の中にもあるときは、スマホではそちらが優先される。
PC だけ・スマホだけを変えたいときは、どちらを書き換えるかに気をつける
・色は「0. 変数」でまとめて決めている。例：--shizumatsu-orange の色を変えると、
詳細ボタン・イベント名の丸・「会場」の文字の色がすべて変わる
・{ } の中は「プロパティ: 値;」の組。行の最後の「;」は消さない
・この説明書きのような部分（コメント）は、画面には影響しない
■ よく出てくる指定の意味
・margin … 外側の余白 ／ padding … 内側の余白
（値が4つなら「上 右 下 左」、3つなら「上 左右 下」、2つなら「上下 左右」、1つなら四方すべて）
・width / height … 幅 / 高さ（max-width は「これより広くしない」）
・font-size … 文字の大きさ ／ font-weight … 文字の太さ（400 が普通、600・700 は太字）
・line-height … 行の高さ（数字だけなら、文字の大きさの何倍か）
・letter-spacing … 文字の間隔 ／ text-align … 文字のそろえ方（left 左 / center 中央）
・color … 文字の色 ／ background … 背景 ／ border … 枠線 ／ border-radius … 角の丸み
box-shadow … 影
・display: flex … 中身を横に並べる（flex-direction: column なら縦） ／ gap … 並べた中身の間隔
flex-wrap: wrap … 入りきらない分を次の行に送る
・position / top / left … 飾り（イベント名の丸）を、決まった位置に置く
・::before … 飾りを、CSS だけで足す
・:hover … マウスを乗せたときの見た目
・transform / transition … 動き（位置をずらす / 変化にかける時間）
・object-fit: cover … 画像を、形を保ったまま枠いっぱいに切り抜いて表示する
aspect-ratio: 1 / 1 … 縦と横の比（1 / 1 は正方形）
・@media screen and (max-width: 768px) { … } … 画面の幅が 768px 以下（スマホ）のときだけ効く指定
・単位：px … 画面の点の数 ／ em … その部分の文字の大きさの何倍か ／ % … 親の幅に対する割合
rem … ページ全体の基準の文字の大きさの何倍か（このページでは 1rem＝10px）
■ 書き方のルール
・クラス名は、単語を「-」でつなぐ（例：card-title、page-nav-link）
・色・書体・幅は、0. の変数を使う
・文字の大きさ（font-size）は rem で書く。px で考えた数字を10で割る（例：14px → 1.4rem）
・プロパティは「中身 → 配置 → 並べ方 → 大きさ・余白 → 文字 → 背景・枠 → 動き」の順に書く
・スマホ用の指定は 11.（768px以下）にまとめ、その中も、この目次と同じ番号・順番で並べる
・!important は使わない。CMS の指定より優先させたいときは、.wrap を付けて強くする（8. を参照）
■ 目次
0. 変数
1. 共通（ページの枠）
2. メインビジュアル
3. ページ内リンク（カテゴリの目次）
4. カテゴリの見出し（h2）
5. カード（article）
6. イベント名（h3）
7. 日付・会場・本文（p）
8. 詳細ボタン
9. ボタンを2つ並べるとき（今は使っていない）
10. 会期が終わったイベント（今は使っていない）
11. スマホ（768px以下）
========================================================= */
/* =========================================================
0. 変数
========================================================= */
:root {
/* 色 */
--shizumatsu-blue: #174f8c; /* イベント名 */
--shizumatsu-orange: #f39800; /* 詳細ボタン・イベント名の丸・「会場」 */
--shizumatsu-orange-dark: #e68900; /* 詳細ボタン（マウスを乗せたとき） */
--shizumatsu-date: #b56600; /* 日付の文字 */
--shizumatsu-date-bg: #fff4df; /* 日付の帯 */
--shizumatsu-text: #333; /* 本文 */
--shizumatsu-place: #555; /* 会場・フロア */
--shizumatsu-photo-border: #e7e1c9; /* カードの画像の枠 */
--shizumatsu-ended: #777; /* 会期が終わったイベントの帯 */
/* 書体 */
--shizumatsu-font: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
/* 幅 */
--shizumatsu-content-width: 1020px; /* ページの中身の最大幅 */
--shizumatsu-gutter: 16px; /* ページの左右の余白 */
}
/* =========================================================
1. 共通（ページの枠）
========================================================= */
/* ページ全体の枠（幅は 1020px まで。左右に余白をとる） */
.wrap {
max-width: var(--shizumatsu-content-width);
margin: 0 auto;
padding: 0 var(--shizumatsu-gutter);
font-family: var(--shizumatsu-font);
line-height: 1.8;
}
/* =========================================================
2. メインビジュアル
========================================================= */
/* 枠の幅いっぱいに表示する */
.main-visual {
width: 100%;
margin-bottom: 20px;
}
/* =========================================================
3. ページ内リンク（カテゴリの目次）
nav.page-nav > ul.page-nav-list > li.page-nav-item > a.page-nav-link（中身は画像）
========================================================= */
.page-nav {
margin: 20px 0 40px;
}
/* 画像のリンクを中央にそろえて並べ、入りきらない分は次の行に送る */
.page-nav-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
/* 1つ分の幅（PC は3列。スマホは 11. で2列にする） */
.page-nav-item {
width: 30%;
}
/* リンク（画像のまわりに 6px の余白をとる） */
.page-nav-link {
display: block;
padding: 6px;
box-sizing: border-box;
}
/* リンクの画像（幅いっぱい） */
.page-nav-link img {
display: block;
width: 100%;
height: auto;
}
/* =========================================================
4. カテゴリの見出し（h2。中身は画像）
========================================================= */
.section-title {
margin: 60px 0 20px;
text-align: center;
}
/* 見出しの画像（幅いっぱい） */
.section-title img {
display: block;
width: 100%;
height: auto;
}
/* =========================================================
5. カード（article）
カード1枚＝画像＋右側の内容（.card-content）。スマホは 11. で縦に並べる
========================================================= */
.card {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
padding: 24px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
transition: all .3s ease;
}
/* マウスを乗せると、少し浮き上がる */
.card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
transform: translateY(-4px);
}
/* カードの画像（300×300 の正方形に切り抜いて、枠を付ける） */
.card > img {
display: block;
flex-shrink: 0;
width: 300px;
height: 300px;
box-sizing: border-box;
object-fit: cover;
border: 5px solid var(--shizumatsu-photo-border);
border-radius: 6px;
}
/* カードの右側（イベント名・日付・会場・本文・ボタンを縦に並べる） */
.card-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/* =========================================================
6. イベント名（h3）
========================================================= */
.card-title {
position: relative;
margin: 0 0 10px;
padding-left: 18px;
color: var(--shizumatsu-blue);
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
}
/* 左のオレンジの丸 */
.card-title::before {
content: "";
position: absolute;
top: .45em;
left: 0;
width: 10px;
height: 10px;
background: var(--shizumatsu-orange);
border-radius: 50%;
}
/* =========================================================
7. 日付・会場・本文（p）
※スマホ（767px以下）では CMS の #main p が優先されるため、11. で大きさを戻している
========================================================= */
/* 日付（オレンジの丸い帯。会場を「／」で続けて書くこともある） */
.card-date {
display: inline-block;
align-self: flex-start;
margin: 0 0 10px;
padding: 4px 12px;
color: var(--shizumatsu-date);
font-size: 1.3rem;
font-weight: 600;
background: var(--shizumatsu-date-bg);
border-radius: 20px;
}
/* 会場・フロア（灰色の太字） */
.card-place {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 12px;
color: var(--shizumatsu-place);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.7;
}
/* 「会場」のラベル（オレンジ）。付けたいカードだけ 会場 と書く */
.card-place-label {
flex-shrink: 0;
color: var(--shizumatsu-orange);
font-weight: 700;
}
/* 本文 */
.card-text {
margin: 0;
color: var(--shizumatsu-text);
font-size: 1.4rem;
line-height: 1.9;
}
/* =========================================================
8. 詳細ボタン
※CMS の a:link・a:visited・a:hover（詳細度 0,1,1。文字を青くして下線を引く）より
優先させるため、「.wrap」を付けて指定する
※マウスを乗せたときに少し薄くなるのは、CMS の a:hover { opacity: 0.8 } による
========================================================= */
.wrap a.btn {
display: inline-block;
align-self: flex-start;
margin-top: 14px;
padding: 10px 18px;
color: #fff;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
background: var(--shizumatsu-orange);
border: none;
border-radius: 4px;
transition: all .2s ease;
}
/* 矢印（色はボタンの文字と同じ。読み上げでは読まない：HTML に aria-hidden="true"） */
.wrap a.btn .arrow {
display: inline-block;
margin-left: 6px;
transition: transform .2s ease;
}
/* マウスを乗せたとき（少し濃いオレンジにして、少し上げる） */
.wrap a.btn:hover {
background: var(--shizumatsu-orange-dark);
transform: translateY(-1px);
}
/* 矢印だけ右に動かす */
.wrap a.btn:hover .arrow {
transform: translateX(4px);
}
/* =========================================================
9. ボタンを2つ並べるとき（今は使っていない。9月号の「ロンジン＆ティソ」で使用）