@charset "UTF-8";

/*!
 * コンポーネント（カード・バッジ・ボタン・フォーム・一覧・あしらい）
 * ヨシケイひろば / yoshikei-hiroba
 */

/* -----------------------------------
   hero
   ----------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--c-pink) 0%, var(--c-pink-l) 100%);
  padding: var(--sp-8) 0 0;
  text-align: center;
  position: relative;
}
.hero--deep { background: linear-gradient(180deg, var(--c-pink-d), var(--c-pink)); }
.hero--flat { padding-bottom: var(--sp-7); }
.hero__wave { width: 100%; height: 40px; display: block; margin-top: var(--sp-6); }
.hero--flat .hero__wave { display: none; }
.hero__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto var(--sp-4); overflow: hidden; position: relative;
  background: linear-gradient(135deg,#FBE3D4,#DFB49B);
}
.hero__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------
   card / grid
   ----------------------------------- */
.grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--1 { grid-template-columns: 1fr; }
.grid > .span-2 { grid-column: span 2; }
.grid > .span-3 { grid-column: span 3; }

.card {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 19px; font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); }
.card__meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--c-text-subtle);
}
.card__text { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: var(--sp-3); flex: 1; }
.thumb {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: linear-gradient(135deg,#FBE3D4,#F3C9B2 55%,#E0AC93);
}
.thumb--wide { aspect-ratio: 4 / 3; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------
   badge / part
   ----------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-caption); font-weight: 700;
  border-radius: var(--r-pill); padding: 3px 13px; width: fit-content;
}
.badge--now { background: var(--c-brand); color: #fff; }
.badge--vote { background: var(--c-orange); color: #fff; }
.badge--end { background: #EDEDED; color: var(--c-text-subtle); }
.badge--fc {
  background: var(--c-bg-surface); color: var(--c-text-muted);
  border: 1px solid var(--c-line-strong);
}
.badge--new { background: var(--c-brand-tint); color: var(--c-brand); }
.badge--cat {
  background: var(--c-bg-surface); color: var(--c-text-muted);
  border: 1px solid var(--c-line-strong);
}
.badge .ico { width: 14px; height: 14px; }

.parts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.part { font-size: var(--fs-caption); font-weight: 700; border-radius: var(--r-pill); padding: 2px 12px; }
.part--adult, .part--kid {
  background: var(--c-bg-subtle); color: var(--c-text-muted);
  border: 1px solid var(--c-line);
}
.part--sm { font-size: 12px; padding: 1px 9px; margin-left: var(--sp-2); }

/* -----------------------------------
   button / CTA
   ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--c-brand); color: #fff; border: 0;
  font-weight: 700; font-size: var(--fs-body);
  padding: 15px var(--sp-6);
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--c-brand-d);
  transition: .15s;
  text-align: center;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-brand-d); }
.btn--block { display: flex; width: 100%; }
.btn--sm { font-size: var(--fs-small); padding: 11px var(--sp-5); }
.btn--ghost {
  background: var(--c-bg-surface); color: var(--c-text);
  border: 1px solid var(--c-line-strong); box-shadow: none; font-weight: 500;
  justify-content: space-between;
}
.btn .ico { width: 1.2em; height: 1.2em; }
.btn--ghost .ico { color: var(--c-text-subtle); }
.btn--line { background: var(--c-line-green); box-shadow: 0 3px 0 #05A544; }
.cta { text-align: center; margin-top: var(--sp-6); }
.cta .btn { min-width: 280px; }

/* -----------------------------------
   form
   ----------------------------------- */
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-5); }
.field { margin-bottom: var(--sp-5); }
.field__label { display: flex; align-items: center; font-size: var(--fs-small); font-weight: 700; margin-bottom: var(--sp-2); }
.field__req {
  font-style: normal; background: var(--c-brand); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 3px;
  padding: 2px 7px; margin-left: var(--sp-2);
}
.field__req--any { background: #BBB; }
.field input, .field select, .field textarea {
  width: 100%; font-size: var(--fs-body);
  padding: 13px var(--sp-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-bg-surface); color: var(--c-text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-brand); outline: none; }
.field__note { font-size: var(--fs-caption); color: var(--c-text-subtle); margin-top: var(--sp-2); line-height: 1.7; }
.field--side { display: grid; grid-template-columns: 1fr 220px; gap: var(--sp-4); align-items: start; }
.field--side .field__note { padding-top: 30px; margin-top: 0; }
.field--cond {
  border-left: 3px solid var(--c-orange);
  background: var(--c-orange-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4);
}
.cond-tag { display: flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 700; color: #B26A00; margin-bottom: var(--sp-2); }
.cond-tag .ico { width: 13px; height: 13px; }
.drop {
  border: 2px dashed var(--c-pink-d); border-radius: var(--r-md);
  padding: var(--sp-7); text-align: center; background: var(--c-pink-l);
}
.drop .ico { width: 40px; height: 40px; color: var(--c-brand-l); margin: 0 auto; }
.drop__t { font-size: var(--fs-small); font-weight: 700; margin-top: var(--sp-2); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-small); margin: var(--sp-4) 0; }
.check__box {
  width: 22px; height: 22px; flex: none; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); background: #fff;
  display: grid; place-items: center; color: #fff;
}
.check.is-on .check__box { background: var(--c-brand); border-color: var(--c-brand); }
.check__box .ico { width: 14px; height: 14px; }
.check a { text-decoration: underline; color: var(--c-brand); }
.segs { display: flex; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); overflow: hidden; width: fit-content; }
.segs button {
  padding: 11px var(--sp-6); border: 0; background: #fff;
  cursor: pointer; color: var(--c-text-muted); font-size: var(--fs-small);
  border-right: 1px solid var(--c-line);
}
.segs button:last-child { border-right: 0; }
.segs button.is-on { background: var(--c-brand); color: #fff; font-weight: 700; }

/* -----------------------------------
   tabs / sort
   ----------------------------------- */
.tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-5); }
.tabs button {
  font-size: var(--fs-small); padding: 9px var(--sp-5);
  border: 1px solid var(--c-line-strong); background: #fff;
  border-radius: var(--r-pill); white-space: nowrap; cursor: pointer; color: var(--c-text-muted);
}
.tabs button.is-on { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: 700; }
.sortbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); font-size: var(--fs-caption); color: var(--c-text-subtle); flex-wrap: wrap; }
.sortbar .ico { color: var(--c-brand); width: 18px; height: 18px; }
.sortbar button {
  font-size: var(--fs-caption); padding: 5px var(--sp-4);
  border: 1px solid var(--c-line-strong); background: #fff;
  border-radius: var(--r-pill); cursor: pointer; color: var(--c-text-muted);
}
.sortbar button.is-on { background: var(--c-text); color: #fff; border-color: var(--c-text); font-weight: 700; }

/* -----------------------------------
   list / ranking
   ----------------------------------- */
.row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
.row:last-child { border-bottom: 0; }
.rank {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-small); font-weight: 700;
  background: #F0F0F0; color: var(--c-text-muted);
}
.rank--1 { background: var(--c-brand); color: #fff; }
.rank--2 { background: var(--c-brand-l); color: #fff; }
.rank--3 { background: #FAC9CD; color: var(--c-brand-d); }
.thumb-s { width: 56px; height: 56px; flex: none; border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--c-pink); }
.thumb-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: var(--fs-small); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { font-size: var(--fs-caption); color: var(--c-text-subtle); }
.likes { display: flex; align-items: center; gap: 5px; font-size: var(--fs-small); font-weight: 700; color: var(--c-brand); white-space: nowrap; }
.likes .ico { width: 17px; height: 16px; }
.likebtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-line-strong); background: #fff;
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 700;
  padding: 7px var(--sp-4); color: var(--c-text-muted); cursor: pointer;
}
.likebtn.is-on { background: var(--c-brand-tint); border-color: var(--c-brand); color: var(--c-brand); }
.likebtn .ico { width: 17px; height: 16px; }

/* 投稿グリッド */
.postgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.postgrid__cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-sm); background: var(--c-pink); }
.postgrid__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.postgrid__like {
  position: absolute; right: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,.92); border-radius: var(--r-pill);
  padding: 2px 9px; font-size: 12px; font-weight: 700; color: var(--c-brand);
}
.postgrid__like .ico { width: 13px; height: 12px; }

/* -----------------------------------
   notice / info
   ----------------------------------- */
.notice {
  display: flex; gap: var(--sp-4); align-items: center;
  background: var(--c-brand-tint); border: 1px solid #F7D3D6;
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-small); margin-bottom: var(--sp-6);
}
.notice .ico { width: 26px; height: 24px; color: var(--c-brand); flex: none; }
.notice b { color: var(--c-brand); }
.info {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--c-blue-tint); border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-small); color: #14568C;
  margin: var(--sp-5) 0;
}
.info .ico { width: 24px; height: 24px; color: var(--c-blue); flex: none; }
.info b { color: #0B4877; }
.nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.nums > div { background: var(--c-pink-l); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.nums b { display: block; font-size: 30px; font-weight: 900; color: var(--c-brand); line-height: 1.3; }
.nums span { font-size: var(--fs-caption); color: var(--c-text-muted); }
.kv { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--c-text-subtle); width: 130px; flex: none; font-size: var(--fs-caption); }
.kv > b { flex: 1; font-weight: 500; }
.minibtn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-caption); padding: 6px var(--sp-4);
  border: 1px solid var(--c-line-strong); background: #fff;
  border-radius: var(--r-pill); cursor: pointer; color: var(--c-text-muted);
}
.minibtn .ico { width: 14px; height: 14px; }

/* お知らせ */
.newslist .news { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
.newslist .news:last-child { border-bottom: 0; }
.news__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); }
.news__date { font-size: var(--fs-caption); color: var(--c-text-subtle); font-feature-settings: "tnum"; }
.news__title { font-size: var(--fs-small); font-weight: 500; display: flex; align-items: flex-start; gap: var(--sp-2); }
.news__title .ico { color: var(--c-brand); margin-top: .3em; width: 14px; height: 14px; flex: none; }
.news__foot { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

/* 管理画面 */
.admin-head { background: var(--c-brand); color: #fff; padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.admin-head__wm { font-weight: 900; display: flex; align-items: center; gap: var(--sp-2); }
.admin-head__wm .logo__mark { filter: brightness(0) invert(1); }
.admin-head__wm em { font-style: normal; font-weight: 500; font-size: var(--fs-small); opacity: .92; margin-left: var(--sp-2); }
.admin-head__me { margin-left: auto; font-size: var(--fs-small); }
.admin-head select { font-size: var(--fs-small); padding: 6px var(--sp-3); border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: #fff; }
.admin-head select option { color: var(--c-text); }
.admin-nav { display: flex; gap: 2px; padding: 0 var(--sp-5); background: #fff; border-bottom: 1px solid var(--c-line); overflow-x: auto; }
.admin-nav > div { padding: var(--sp-4) var(--sp-4); font-size: var(--fs-small); color: var(--c-text-muted); cursor: pointer; white-space: nowrap; }
.admin-nav > div.is-on { color: var(--c-brand); font-weight: 700; box-shadow: inset 0 -3px 0 var(--c-brand); }
.admin-body { padding: var(--sp-6) var(--sp-5); background: var(--c-pink-l); }
.admin-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.admin-nums > div { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.admin-nums b { display: block; font-size: 28px; font-weight: 900; color: var(--c-brand); line-height: 1.25; }
.admin-nums span { font-size: var(--fs-caption); color: var(--c-text-muted); }
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-5); }
.panel__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); font-weight: 700; font-size: var(--fs-small); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.panel__scroll { overflow-x: auto; }
.panel table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.panel th { text-align: left; padding: var(--sp-3) var(--sp-5); background: var(--c-pink-l); border-bottom: 1px solid var(--c-line); font-size: var(--fs-caption); color: var(--c-text-muted); white-space: nowrap; font-weight: 600; }
.panel td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.panel tr:last-child td { border-bottom: 0; }
.pbtn { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); font-weight: 700; padding: 7px var(--sp-4); border-radius: var(--r-pill); border: 0; background: var(--c-brand); color: #fff; cursor: pointer; }
.pbtn--ghost { background: #fff; color: var(--c-text); border: 1px solid var(--c-line-strong); font-weight: 500; }
.pbtn .ico { width: 14px; height: 14px; }
/* WordPress管理画面 */
.wp { display: grid; grid-template-columns: 200px 1fr; min-height: 560px; }
.wp__side { background: #1D2327; color: #C3C4C7; padding: var(--sp-3) 0; font-size: var(--fs-caption); }
.wp__brand { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-4); color: #fff; font-size: var(--fs-small); border-bottom: 1px solid #33383D; margin-bottom: var(--sp-2); }
.wp__brand em { font-style: normal; color: var(--c-brand); }
.wp__side a { display: block; padding: var(--sp-2) var(--sp-4); color: #C3C4C7; }
.wp__side a.is-on { background: #2C3338; color: #fff; box-shadow: inset 3px 0 0 #72AEE6; }
.wp__grp { padding: var(--sp-4) var(--sp-4) var(--sp-1); font-size: 11px; letter-spacing: .1em; color: #7C8085; }
.wp__main { background: #F0F0F1; padding: var(--sp-5); overflow: auto; }
.wp__h { font-size: 21px; font-weight: 700; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.wp__pill { font-size: var(--fs-caption); font-weight: 500; background: #fff; border: 1px solid #C3C4C7; border-radius: var(--r-sm); padding: 2px 10px; color: #50575E; }
.wp__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.wp__kpi { background: #fff; border: 1px solid #C3C4C7; border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); }
.wp__kpi b { display: block; font-size: 26px; font-weight: 500; line-height: 1.2; }
.wp__kpi span { font-size: var(--fs-caption); color: #50575E; }
.wp__kpi.is-warn b { color: var(--c-brand); }
.wp__panel { background: #fff; border: 1px solid #C3C4C7; border-radius: var(--r-sm); margin-bottom: var(--sp-4); }
.wp__ph { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid #E5E5E5; font-weight: 700; font-size: var(--fs-small); }
.wp__pb { padding: var(--sp-4); }
.wp__panel table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.wp__panel th { text-align: left; padding: var(--sp-2) var(--sp-3); background: #F6F7F7; border-bottom: 1px solid #C3C4C7; font-weight: 600; color: #50575E; white-space: nowrap; }
.wp__panel td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid #F0F0F1; white-space: nowrap; }
.frow { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-3) var(--sp-4); font-size: var(--fs-caption); padding: var(--sp-3) 0; border-bottom: 1px solid #F0F0F1; }
.frow:last-child { border-bottom: 0; }
.frow > b { font-weight: 700; }
.seg2 { display: inline-flex; border: 1px solid #8C8F94; border-radius: var(--r-sm); overflow: hidden; }
.seg2 i { font-style: normal; padding: 6px var(--sp-4); background: #fff; border-right: 1px solid #DCDCDE; color: #50575E; }
.seg2 i:last-child { border-right: 0; }
.seg2 i.is-on { background: var(--c-text); color: #fff; font-weight: 700; }
.wbtn { font-size: var(--fs-caption); padding: 5px var(--sp-3); border-radius: var(--r-sm); border: 1px solid #2271B1; color: #2271B1; background: #fff; cursor: pointer; }

/* -----------------------------------
   装飾（あしらい）
   ----------------------------------- */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deco--dots-l { left: -10px; top: 34%; width: 90px; opacity: .5; }
.deco--dots-r { right: 20px; top: 16%; width: 110px; opacity: .5; }
.deco--squiggle { right: 8%; top: 8%; width: 70px; }
.deco--heart { left: 16%; top: 56%; width: 88px; }
.deco--curve { left: 4%; bottom: 12%; width: 200px; }
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap > .container { position: relative; z-index: 1; }

/* 手書き風の注釈 */
.handwrite {
  position: absolute; z-index: 2;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.9;
  color: var(--c-brand); transform: rotate(-4deg);
  text-align: center;
}
.handwrite__line { display: block; width: 100%; margin-top: 2px; }
.handwrite--right { right: 2%; top: 30%; width: 150px; }

/* 見出しの赤ハイライト */
.hl { color: var(--c-brand); }
.hl-lg { color: var(--c-brand); font-size: 1.24em; line-height: 1; }

/* -----------------------------------
   ヒーロー（2カラム）
   ----------------------------------- */
.hero--split { padding: var(--sp-8) 0 var(--sp-8); text-align: left; }
.hero--split .hero__wave { display: none; }
.hero__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: var(--sp-7); align-items: center;
}
.hero__lede h1 { font-size: 34px; font-weight: 900; line-height: 1.4; }
.hero__lede p { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: var(--sp-4); }
.hero__notice {
  display: flex; gap: var(--sp-4); align-items: center;
  background: var(--c-bg-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-6); font-size: var(--fs-small);
  box-shadow: 0 8px 22px -18px rgba(51,51,51,.35);
}
.hero__notice .ico { width: 32px; height: 29px; color: var(--c-brand); flex: none; }
.hero__notice b { color: var(--c-brand); }

/* 主役カード */
.feature {
  background: var(--c-bg-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 50px -34px rgba(51,51,51,.4);
}
.feature { padding: var(--sp-3); }
.feature__thumb {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-pink);
}
.feature__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.feature__title { font-size: 22px; font-weight: 900; margin: var(--sp-3) 0 var(--sp-2); line-height: 1.45; }

/* -----------------------------------
   イラスト付きカード
   ----------------------------------- */
.ecard {
  background: var(--c-bg-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
  transition: .18s;
}
a.ecard:hover { border-color: var(--c-brand); transform: translateY(-3px);
  box-shadow: 0 18px 36px -26px rgba(230,0,18,.45); }
.ecard__main { min-width: 0; flex: 1; }
.ecard__title { font-size: 20px; font-weight: 900; margin: var(--sp-2) 0; }
.ecard__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-subtle); }
.ecard__text { font-size: var(--fs-small); color: var(--c-text-muted); margin: var(--sp-3) 0 var(--sp-4); }

/* -----------------------------------
   ボタン（ゴースト＝丸い矢印）
   ----------------------------------- */
.btn--ghost {
  background: var(--c-bg-surface); color: var(--c-text);
  border: 1px solid var(--c-line-strong); box-shadow: none; font-weight: 700;
  justify-content: space-between; gap: var(--sp-5);
  padding-right: var(--sp-3);
}
.btn--ghost .arw {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-pink-l); color: var(--c-brand);
  display: grid; place-items: center; flex: none;
}
.btn--ghost .arw .ico { width: 15px; height: 15px; }
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn--ghost:hover .arw { background: var(--c-brand); color: #fff; }

/* -----------------------------------
   カルーセルのドット（スマホ）
   ----------------------------------- */
.dots { display: none; justify-content: center; gap: 7px; margin-top: var(--sp-4); }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink-d); }
.dots span.is-on { background: var(--c-brand); width: 20px; border-radius: var(--r-pill); }

/* -----------------------------------
   ヒーローのキャッチコピー
   ----------------------------------- */
.catch { font-size: 52px; font-weight: 900; line-height: 1.34; letter-spacing: 0.005em; }
.eyebrow {
  font-size: var(--fs-small); font-weight: 700; color: var(--c-brand);
  margin-top: var(--sp-5); margin-bottom: var(--sp-2);
}
.hero__lead { font-size: var(--fs-small); color: var(--c-text-muted); }

/* -----------------------------------
   カルーセル
   ----------------------------------- */
.carousel { position: relative; }
.carousel__nav {
  position: absolute; top: 34%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-bg-surface); border: 1px solid var(--c-line);
  color: var(--c-text-muted); cursor: pointer;
  display: grid; place-items: center; z-index: 3;
  box-shadow: 0 6px 18px -10px rgba(51,51,51,.4);
  transition: .15s;
}
.carousel__nav:hover { color: var(--c-brand); border-color: var(--c-brand); }
.carousel__nav .ico { width: 20px; height: 20px; }
.carousel__nav--prev { left: -22px; }
.carousel__nav--next { right: -22px; }
.dots { display: flex; justify-content: center; gap: 7px; margin-top: var(--sp-4); }

/* -----------------------------------
   イベントカード（1企画1写真）
   ----------------------------------- */
.ecard__photo {
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  position: relative; background: var(--c-pink); margin-top: var(--sp-4);
}
.ecard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecard__link {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 700; color: var(--c-brand);
  margin-top: var(--sp-4);
}
.ecard__link .ico { width: 15px; height: 15px; }
a.ecard { color: inherit; }

/* -----------------------------------
   おしらせ（1行レイアウト）
   ----------------------------------- */
.newsrow {
  display: grid; grid-template-columns: 108px 64px 1fr; gap: var(--sp-3);
  align-items: center; padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line); font-size: var(--fs-small);
}
.newsrow:last-of-type { border-bottom: 0; }
.newsrow__date { color: var(--c-text-subtle); font-size: var(--fs-caption); font-feature-settings: "tnum"; }
.newsrow__tag { justify-self: start; }
.newsrow__title { display: flex; align-items: flex-start; gap: var(--sp-2); }
.newsrow__title .ico { color: var(--c-brand); margin-top: .28em; width: 14px; height: 14px; flex: none; }
.deco-swirl { width: 170px; margin-top: var(--sp-4); opacity: .9; }
/* セクション見出し＋もっと見る */
.sec-lead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.sec-lead .sec-title { margin-bottom: 0; }
.sec-sub--left { text-align: left; margin-top: var(--sp-1); }
.sec-more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 700; color: var(--c-brand);
  white-space: nowrap;
}
.sec-more .ico { width: 15px; height: 15px; }
.sec-more:hover { text-decoration: underline; }

/* -----------------------------------
   仕上げの調整
   ----------------------------------- */
/* カード全体をリンクにしたときの下線と色を無効化 */
a.ecard, a.feature, a.screen-card, a.newsrow__title { text-decoration: none; color: inherit; }
a.newsrow__title:hover { color: var(--c-brand); }
a.feature { display: block; transition: .18s; }
a.feature:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -34px rgba(51,51,51,.45); }

/* バッジのアイコンの色を文字に合わせる */
.badge .ico { color: currentColor; }

/* ヒーローの余白を整える */
.hero--split { padding-bottom: var(--sp-7); }
.hero__lede { padding-right: var(--sp-4); }
.hero__notice { max-width: 380px; }

/* 主役カードのタイトルと日付の間 */
.feature__title { margin: var(--sp-3) 0 var(--sp-3); }
.feature .parts { margin-top: var(--sp-4); }

/* イベントカードの中の余白 */
.ecard__title { font-size: 21px; margin: var(--sp-3) 0 var(--sp-2); }
.ecard__text { margin: 0 0 var(--sp-4); }
.ecard__photo { margin-top: 0; }

/* -----------------------------------
   イベント詳細
   ----------------------------------- */
.event-hero {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-pink);
  aspect-ratio: 21 / 9;
  position: relative;
  box-shadow: 0 24px 50px -36px rgba(51,51,51,.4);
}
.event-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.event-intro { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--sp-6); align-items: start; }
.event-title { font-size: 32px; font-weight: 900; line-height: 1.4; margin: var(--sp-4) 0 var(--sp-3); }
.event-side {
  background: var(--c-bg-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6);
}
.spec__row {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small);
}
.spec__row:last-child { border-bottom: 0; }
.spec dt { font-weight: 700; color: var(--c-text); }
.spec dd { color: var(--c-text-muted); }
/* カードの高さ揃え */
.grid > .card, .grid > .ecard { height: 100%; }
.ecard__main { display: flex; flex-direction: column; }
.ecard__photo { margin-top: auto; }