/* ================================================== */
/* イントロコンテンツ */
/* ================================================== */

/* ベース */
.intro-content { aspect-ratio:390/694; margin-inline:auto; max-width:390px; position:relative; }
.intro-content > * { position:absolute; }
.intro-content img { width:100%; }

/* パーツ配置 */
.intro-title { display:none; }
.intro-photo { left:0.64%; top:21px; width:99.23%; }
.intro-memo { left:4.87%; top:43.5%; width:90.26%; }

/* 動く */
.intro-anime { animation:intro-anime-a 1.2s infinite; left:0; pointer-events:none; top:0; width:100%; }
.intro-anime + .intro-anime { animation-name:intro-anime-b; opacity:0; }

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

@media(min-width:960px) {

/* ベース */
.intro-content { aspect-ratio:1440/961; max-width:1440px; }

/* パーツ配置 */
.intro-title { display:block; left:8.74%; top:7.18%; width:54.99%; }
.intro-photo { left:43.21%; top:28.72%; width:55.55%; }
.intro-memo { left:2.78%; top:39.75%; width:44.72%; }

/* 動く */
.intro-anime { left:0.27%; top:1.66%; width:97.96%; }

}

/* ================================================== */
/* トップメインコンテンツ */
/* ================================================== */

/* 見出し */
.top-content .top-content-title { justify-content:center; margin-bottom:24px; }
.top-content .top-content-title img { height:auto; max-width:285px; }
.belt { align-items:center; background-color:#ed6c00; color:var(--wh); flex-wrap:wrap; justify-content:flex-start; padding:8px 10px; }
.belt .venue { font-size:20px; font-weight:800; line-height:32px; }
.belt .branch-name { font-size:16px; font-weight:800; line-height:32px; }

/* カード */
.card-list { gap:24px; margin-bottom:80px; overflow-x:auto; overscroll-behavior-inline:contain; padding:16px 20px 20px 20px; scroll-padding-inline:20px; scroll-snap-type:x proximity; scrollbar-color:#b3b3b3 transparent; scrollbar-width:thin; }
.card-list::-webkit-scrollbar { height:10px; }
.card-list::-webkit-scrollbar-track { background-color:transparent; }
.card-list::-webkit-scrollbar-thumb { background-color:#b3b3b3; border-radius:25px; }
.card-item { background-color:var(--wh); border-radius:8px; box-shadow:4px 4px 16px 0 rgba(0, 0, 0, 0.25); flex:0 0 269px; overflow:hidden; position:relative; scroll-snap-align:start; }
.card-item .thumb { aspect-ratio:269/195; object-fit:cover; width:100%; }
.card-info { padding:16px 24px; }
.card-info p { font-size:16px; font-weight:600; line-height:24px; }
.card-info p + .card-label { margin-top:16px; }
.card-date { gap:16px; }

/* くわしく見る
 * a の ::after をカード全面に広げてカード全体をリンクにする。
 * 基準は .card-item の position:relative。
 * z-index は状況マーク（z-index:1）より上に置く
 */
.card-info .more-button { font-size:14px; font-weight:900; justify-content:center; letter-spacing:-0.04em; line-height:0; margin-top:auto; padding-top:20px; }
.more-button a { align-items:center; background-color:#46bca9; border:2px solid var(--bk); border-radius:40px; color:var(--wh); gap:2px; height:40px; justify-content:center; transition:.3s; width:160px; }
.more-button a::after { content:""; inset:0; position:absolute; z-index:2; }
.more-button a:focus-visible { outline:none; }
.more-button a img { height:24px; line-height:1; width:24px; }
.card-item:hover .more-button a, .more-button a:focus-visible { background-color:#f29600; transition:.3s; }
.card-item:has(.more-button a:focus-visible) { outline:3px solid var(--or); outline-offset:4px; }

@media(min-width:960px) {

/* ベース */
.top-content { background-color:var(--wh); margin-bottom:161px; padding:80px 0; }

/* 見出し */
.top-content .top-content-title { margin-bottom:40px; }
.top-content .top-content-title img { height:auto; max-width:1140px; }
.belt { flex-wrap:wrap; justify-content:flex-start; }

/* カード */
.card-list { display:grid; grid-template-columns:repeat(4, 1fr); margin-inline:auto; max-width:100%; overflow:visible; padding:0 40px; scroll-snap-type:none; }

/* くわしく見る */
.card-info .more-button { font-size:16px; padding-top:24px; }
.more-button a { gap:4px; height:44px; width:180px; }

}