/* ===== 心以美 イベントギャラリー 共有スタイル ===== */
:root{
  --bg:#fbf3f4; --bg-2:#f6edef; --paper:#fffdfb; --paper-rose:#fff7f8;
  --ink:#352f33; --muted:#6d6569;
  --rose:#c48796; --rose-deep:#8d6571; --rose-soft:#f3dce4; --rose-mist:#f8ecef;
  --sage:#8f9981; --gold:#b28b59;
  --line:rgba(72,55,63,.10);
  --shadow:0 24px 68px rgba(120,90,102,.11);
  --shadow-sm:0 14px 36px rgba(120,90,102,.08);
  --radius:24px;
  --serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --serif-display:"Shippori Mincho B1","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--bg); line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px,92vw); margin-inline:auto}

/* ---- ヘッダー ---- */
.ev-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,243,244,.86); backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid var(--line);
}
.ev-nav{width:min(1120px,92vw); margin-inline:auto; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.ev-brand{display:flex; align-items:center; gap:10px; font-family:var(--serif-display); font-weight:700}
.ev-brand img{height:30px; width:auto}
.ev-back{font-size:.86rem; color:var(--rose-deep); display:inline-flex; align-items:center; gap:.4em}
.ev-back:hover{color:var(--rose)}
.ev-cta{
  display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; font-weight:700;
  padding:.55em 1.1em; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:0 8px 20px rgba(141,101,113,.28);
}
.ev-cta img{height:16px; width:16px}
.ev-cta:hover{filter:brightness(1.05)}

/* ---- ページ見出し ---- */
.ev-hero{padding:56px 0 8px; text-align:center}
.eyebrow{font-family:var(--serif-display); color:var(--rose-deep); font-size:.82rem;
  letter-spacing:.18em; display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before,.eyebrow::after{content:""; width:26px; height:1px; background:currentColor; opacity:.5}
.ev-hero h1{
  font-family:var(--serif-display); font-weight:800; color:var(--ink);
  font-size:clamp(1.7rem,4.6vw,2.7rem); line-height:1.32; margin:.5em 0 .35em}
.ev-hero .lead{color:var(--muted); font-size:1rem; max-width:38em; margin:0 auto}

/* ---- ハブ：イベント一覧カード ---- */
.ev-list{padding:40px 0 78px; display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* 没入型オーバーレイカード（全カード同一比率＝高さ一致・Modern） */
.ev-card{position:relative; display:block; aspect-ratio:4/5; border-radius:24px;
  overflow:hidden; box-shadow:var(--shadow-sm); isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease}
.ev-card::after{content:""; position:absolute; inset:0; z-index:3; border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); pointer-events:none;
  transition:box-shadow .5s ease}
.ev-card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.ev-card:hover::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.ev-card-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:var(--rose-mist); transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.ev-card:hover .ev-card-img{transform:scale(1.07)}
.ev-card-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(30,18,24,.9) 0%, rgba(30,18,24,.66) 24%, rgba(30,18,24,.16) 50%, transparent 68%);
  transition:opacity .5s ease}
.ev-card:hover .ev-card-scrim{opacity:.94}
.ev-card-count{position:absolute; z-index:2; top:14px; right:14px;
  background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font-size:.72rem; font-weight:700; padding:.34em .82em; border-radius:999px;
  border:1px solid rgba(255,255,255,.24)}
.ev-card-body{position:absolute; z-index:2; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; padding:24px 24px 26px; color:#fff}
.ev-card-meta{display:flex; align-items:center; gap:.7em; flex-wrap:wrap; margin-bottom:.5em}
.ev-card-date{font-size:.73rem; letter-spacing:.12em; color:#f1d9b4; font-weight:700}
.ev-card-en{font-size:.64rem; letter-spacing:.2em; color:rgba(255,255,255,.72); text-transform:uppercase}
.ev-card-title{font-family:var(--serif-display); font-weight:700; font-size:1.26rem;
  line-height:1.42; margin:0; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.32)}
.ev-card-desc{margin:.62em 0 0; font-size:.85rem; line-height:1.62; color:rgba(255,255,255,.85);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 12px rgba(0,0,0,.34)}
.ev-card-go{display:inline-flex; align-items:center; gap:.45em; margin-top:1.05em;
  font-size:.82rem; font-weight:700; color:#fff; letter-spacing:.02em}
.ev-card-go svg{width:18px; height:18px; transition:transform .3s ease}
.ev-card:hover .ev-card-go svg{transform:translateX(5px)}
@media(max-width:560px){.ev-list{grid-template-columns:1fr; gap:20px; padding:30px 0 60px}
  .ev-card{aspect-ratio:5/6; max-width:440px; margin-inline:auto; width:100%}}

/* ---- イベント別：ギャラリー ---- */
.ev-meta{display:flex; flex-wrap:wrap; gap:.6em 1.2em; justify-content:center;
  align-items:center; margin-top:.6em; color:var(--muted); font-size:.86rem}
.ev-meta b{color:var(--gold); font-weight:700; letter-spacing:.1em}
.ev-gallery{padding:30px 0 60px}
.ev-grid{columns:4 240px; column-gap:16px}
.ev-grid .ev-item{break-inside:avoid; margin:0 0 16px; display:block; width:100%;
  border:0; padding:0; background:none; cursor:zoom-in; border-radius:16px;
  overflow:hidden; position:relative; box-shadow:var(--shadow-sm)}
.ev-item img{width:100%; height:auto; border-radius:16px;
  transition:transform .5s ease, filter .5s ease; background:var(--rose-mist)}
.ev-item:hover img{transform:scale(1.04); filter:brightness(.96)}
.ev-item::after{content:""; position:absolute; inset:0; border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none}
.ev-item .zoom{position:absolute; right:10px; bottom:10px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:50%; background:rgba(53,47,51,.5);
  opacity:0; transform:scale(.8); transition:.3s ease; backdrop-filter:blur(3px)}
.ev-item:hover .zoom{opacity:1; transform:scale(1)}
.ev-item .zoom svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2}
@media(max-width:900px){.ev-grid{columns:3 200px}}
@media(max-width:620px){.ev-grid{columns:2 150px; column-gap:12px}
  .ev-grid .ev-item{margin-bottom:12px}}
/* JS有効時：CSS Gridマソンリー（列の高さを均等に・画像は無加工で詰める） */
.ev-grid.is-grid{columns:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:8px; gap:16px}
.ev-grid.is-grid .ev-item{margin:0; break-inside:auto}
@media(max-width:900px){.ev-grid.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.ev-grid.is-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}}

/* ---- 他のイベントへ ---- */
.ev-more{padding:12px 0 72px; text-align:center}
.ev-more h3{font-family:var(--serif-display); font-size:1.05rem; color:var(--rose-deep); margin:0 0 1.2em}
.ev-more-links{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.ev-more-links a{display:inline-flex; align-items:center; gap:.5em;
  padding:.7em 1.3em; border-radius:999px; background:var(--paper); border:1px solid var(--line);
  font-size:.88rem; font-weight:700; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .25s ease}
.ev-more-links a:hover{transform:translateY(-3px); color:var(--rose-deep)}

/* ---- フッター ---- */
.ev-footer{background:#3a3136; color:#efe6e8; padding:44px 0 26px; text-align:center}
.ev-footer .fl{font-family:var(--serif-display); font-size:1.5rem; letter-spacing:.1em}
.ev-footer .fs{font-size:.74rem; opacity:.7; margin:.5em 0 1.4em; letter-spacing:.14em}
.ev-fsocial{display:flex; gap:16px; justify-content:center; margin-bottom:1.6em; flex-wrap:wrap}
.ev-fsocial a{display:inline-flex; align-items:center; gap:.5em; font-size:.82rem;
  padding:.5em 1.1em; border-radius:999px; background:rgba(255,255,255,.08)}
.ev-fsocial a:hover{background:rgba(255,255,255,.16)}
.ev-fsocial img{height:16px; width:16px}
.ev-copy{font-size:.72rem; opacity:.6; letter-spacing:.06em}
.ev-copy a{color:var(--rose-soft)}

/* ---- ライトボックス ---- */
.lb{position:fixed; inset:0; z-index:100; display:none;
  background:rgba(28,22,26,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; touch-action:none}
.lb.open{display:flex}
.lb-img{max-width:92vw; max-height:82vh; border-radius:10px; object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.5); animation:lbin .3s ease}
@keyframes lbin{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.lb-btn{position:absolute; background:rgba(255,255,255,.1); color:#fff; border:0;
  width:48px; height:48px; border-radius:50%; font-size:1.6rem; cursor:pointer;
  display:grid; place-items:center; transition:background .2s ease; line-height:1}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-close{top:18px; right:18px; font-size:1.5rem}
.lb-prev{left:16px; top:50%; transform:translateY(-50%)}
.lb-next{right:16px; top:50%; transform:translateY(-50%)}
.lb-count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.82rem; letter-spacing:.1em; opacity:.85;
  background:rgba(0,0,0,.3); padding:.3em 1em; border-radius:999px}
@media(max-width:620px){
  .lb-btn{width:42px; height:42px}
  .lb-prev{left:8px} .lb-next{right:8px}
  .lb-img{max-width:96vw; max-height:76vh}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .ev-card,.ev-item img,.lb-img,.ev-card-media img{transition:none !important; animation:none !important}
}