/* ================================================== */
/* 記事ページ */
/* ================================================== */

/* ベース */
.card-content { border-radius:8px; box-shadow:4px 4px 16px 0 rgba(0, 0, 0, 0.25); overflow:hidden; margin:auto; margin-bottom:24px; max-width:var(--width); }

/* 見出し */
.site-title { justify-content:center; padding:0 20px; margin:auto; margin-top:70px; margin-bottom:26px; }
.site-title img { margin:auto; }

/* カードヘッダ */
.card-head { background-color:#ed6c00; color:var(--wh); padding:10px 24px 8px 24px; }
.venue-info { font-size:16px; font-weight:800; line-height:24px; }
.fes-name { font-size:20px; font-weight:800; line-height:32px; }

/* サムネイル */
.card-content .thumb { aspect-ratio:350/195; object-fit:cover; width:100%; }

/* 状況マーク */
.card-content .status-mark { font-size:24px; }

@media(min-width:960px) {

/* 見出し */
.site-title { margin-bottom:64px; max-width:670px; }

}

/* ================================================== */
/* 会場情報 */
/* ================================================== */

/* ベース
 * flow-root はチラシの float を内側に収めるため。
 * flex にすると float が効かず、項目がチラシを避けなくなる
 */
.event-venue-info { background-color:var(--wh); display:flow-root; padding:24px; }

/* 項目 */
.info-block { align-items:flex-start; display:flex; flex-direction:column; gap:4px; }
.info-block + .info-block { margin-top:16px; }
.info-block p { font-size:16px; font-weight:600; line-height:24px; }

/* 開催場所 */
.address { align-items:flex-start; flex-direction:column; gap:4px; }
.map-link { align-items:center; background-color:#0075c2; border-radius:40px; color:var(--wh); font-size:14px; font-weight:400; gap:4px; line-height:22px; padding:0 14px 2px 16px; transition:.3s; }
.map-link:hover { background-color:#46bca9; transition:.3s; }
.map-link svg { flex:0 0 16px; height:16px; width:16px; }

/* チラシ
 * float にすると項目が幅を詰めて避ける。
 * 下端を過ぎた項目は全幅に戻る。
 * 大きさは .flyer の width だけで決まる
 */
.flyer { float:right; margin:0 0 16px 16px; width:107px; }
.flyer-link { display:block; }
.flyer-thumb { box-shadow:0 0 4px 0 rgba(0, 0, 0, .25); display:block; height:auto; width:100%; }
.flyer-button { align-items:center; background-color:#0075c2; border-radius:40px; color:var(--wh); font-size:12px; font-weight:500; gap:4px; justify-content:center; line-height:1; margin-top:8px; padding:7px 4px 8px 4px; transition:.3s; width:100%; }
.flyer-button:hover { background-color:#46bca9; transition:.3s; }
.flyer-button svg { flex:0 0 14px; height:14px; width:14px; }

/* チラシの拡大
 * display は :popover-open に限定する。
 * 素の .flyer-modal に書くと ua の display:none を上書きして開きっぱなしになる
 */
.flyer-modal { background-color:var(--wh); border:0; border-radius:8px; inset:0; margin:auto; max-height:90dvh; max-width:none; padding:8px; width:min(90vw, 700px); }
.flyer-modal:popover-open { display:flex; flex-direction:column; }
.flyer-modal::backdrop { background-color:rgba(0, 0, 0, .6); }
.flyer-large { flex:1 1 auto; min-height:0; object-fit:contain; width:100%; }
.flyer-close { background-color:var(--bk); border-radius:40px; color:var(--wh); flex:0 0 auto; font-size:14px; font-weight:600; line-height:24px; margin:8px auto 0 auto; padding:2px 24px; }

/* 日時 */
.time { margin-left:16px; }

/* 連絡先 */
.tel { align-items:center; gap:8px; }
.tel svg { flex:0 0 20px; height:20px; width:20px; }
.tel a { font-size:20px; font-weight:900; line-height:1.4; }

/* 支部ホームページ */
.hp-link { clear:both; margin-top:16px; text-align:center; }
.hp-link a { align-items:center; background-color:var(--or); border-radius:100px; color:var(--wh); display:inline-flex; font-size:16px; font-weight:600; gap:8px; line-height:24px; padding:3px 16px 4px 16px; transition:.3s; }
.hp-link a:hover { background-color:#f29600; transition:.3s; }
.hp-link svg { flex:0 0 24px; height:24px; width:24px; }

/* 戻るボタン */
.back-button { font-size:14px; font-weight:900; justify-content:flex-start; line-height:1; letter-spacing:-0.56px; margin:auto; margin-bottom:24px; max-width:var(--width); }
.back-button a { align-items:center; background-color:#46bca9; border:2px solid var(--bk); border-radius:40px; color:var(--wh); transition:.3s; justify-content:center; height:32px; width:85px; }
.back-button a:hover { background-color:#f29600; transition:.3s; }
.back-button a img { line-height:1; height:24px; width:24px; }

@media(min-width:960px) {

/* ベース */
.card-content { border-radius:16px; box-shadow:4px 4px 24px 0 rgba(0, 0, 0, 0.25); max-width:880px; }

/* カードヘッダ */
.card-head { padding:12px 24px 10px 24px; }
.venue-info { font-size:18px; }
.fes-name { font-size:26px; line-height:40px; }

/* サムネイル */
.card-content .thumb { aspect-ratio:880/534; }

/* 状況マーク */
.card-content .status-mark { font-size:32px; padding:20px 16px; }

/* ベース */
.event-venue-info { padding:32px 40px 24px 40px; }

/* 項目 */
.info-block { column-gap:24px; display:grid; grid-template-columns:136px 1fr; row-gap:4px; }
.info-block .card-label { grid-column:1; grid-row:1; }
.info-block > :not(.card-label) { grid-column:2; }
.info-block p { font-size:18px; font-weight:700; line-height:29px; }

/* 丸囲み見出し */
.event-venue-info .card-label span { font-size:22px; height:40px; width:40px; }
.event-venue-info .card-label span + span { margin-left:-8px; }

/* 開催場所 */
.address { align-items:center; flex-direction:row; gap:8px; }

/* チラシ */
.flyer { margin-right:69px; width:146px; }
.flyer-button { font-size:14px; }
.flyer-modal { width:min(80vw, 800px); }

/* 連絡先 */
.tel svg { flex:0 0 24px; height:24px; width:24px; }
.tel a { font-size:24px; }

/* 支部ホームページ */
.hp-link { margin-top:24px; }
.hp-link a { font-size:18px; line-height:29px; padding:4px 16px; }

/* 戻るボタン */
.back-button { font-size:18px; margin-bottom:40px; max-width:880px; }
.back-button a { gap:6px; height:40px; width:105px; }

}

/* ================================================== */
/* 背景（pcのみ） */
/* ================================================== */

/* ベース */
.pc-bg { display:none; }

@keyframes pc-bg-a {
0%, 49.99% { opacity:1; }
50%, 100% { opacity:0; }
}
@keyframes pc-bg-b {
0%, 49.99% { opacity:0; }
50%, 100% { opacity:1; }
}

@media(min-width:960px) {

/* ベース */
.pc-bg { aspect-ratio:1411/1145; display:block; inset:0 0 auto 0; margin-inline:auto; max-width:1411px; pointer-events:none; position:fixed; width:97.99%; z-index:-1; }

/* 切り替え */
.pc-bg::before, .pc-bg::after { animation:pc-bg-a 1.2s infinite; background-image:url(../img/single/single-01.webp); background-position:left top; background-repeat:no-repeat; background-size:100% auto; content:""; inset:0; position:absolute; }
.pc-bg::after { animation-name:pc-bg-b; background-image:url(../img/single/single-02.webp); opacity:0; }

}