@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   Komorebi Sound Lab — Design System
   Scoped to .ksl
   ============================================================ */

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --bg:          #ffffff;
  --ink:         #2c2820;
  --ink-mid:     #6a6258;
  --ink-light:   #a09888;
  --rule:        #e8e4e0;
  --page-tint:   #f5f3f0;
  --hz-accent:   #4a6741;
  --kz-accent:   #b08a88;
  --fl-accent:   #8a7460;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-jp:      'Noto Serif JP', serif;
  --font-ui:      'Josefin Sans', sans-serif;
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 14px;
  --t-md:   16px;
  --t-lg:   22px;
  --t-xl:   32px;
  --t-hero: clamp(26px, 4.5vw, 48px);
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  32px;
  --sp-lg:  64px;
  --sp-xl:  96px;
  --sp-2xl: 144px;
  --max-w: 900px;
  --gutter: clamp(20px, 5vw, 60px);
}

/* ── Reset ──────────────────────────────────────────────── */
.ksl *, .ksl *::before, .ksl *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ksl img, .ksl video { display: block; max-width: 100%; }
.ksl a { color: inherit; text-decoration: none; }

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.ksl {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-jp);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

/* ── Section ────────────────────────────────────────────── */
.ksl .section {
  padding: var(--sp-xl) var(--gutter);
  max-width: calc(var(--max-w) + var(--gutter) * 2);
  margin: 0 auto;
}
.ksl .section--wide { max-width: none; padding-left: 0; padding-right: 0; }
.ksl .section--flush { padding-top: 0; }
.ksl .section--tint { background: var(--page-tint); max-width: none; }

/* ── Eyebrow ────────────────────────────────────────────── */
.ksl .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: var(--sp-md);
}

/* ── Image placeholder ──────────────────────────────────── */
.ksl .img-box {
  background: #f0ede8;
  border: 1px dashed #c8c0b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #b0a898;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-align: center;
  padding: var(--sp-sm);
}
.ksl .ratio-16-9 { aspect-ratio: 16/9; }
.ksl .ratio-3-2  { aspect-ratio: 3/2; }
.ksl .ratio-4-5  { aspect-ratio: 4/5; }
.ksl .ratio-1-1  { aspect-ratio: 1/1; }
.ksl .ratio-2-3  { aspect-ratio: 2/3; }

/* ── Home Hero ──────────────────────────────────────────── */
.ksl .home-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-xl) var(--gutter);
  position: relative;
  overflow: hidden;
}
.ksl .home-hero .wp-block-cover__image-background {
  filter: blur(6px);
  transform: scale(1.05);
}
.ksl .home-hero .wp-block-cover__background {
  background: rgba(0,0,0,0.45) !important;
}
.ksl .home-hero__bg { position: absolute; inset: 0; z-index: 0; background: #fff; }
.ksl .home-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; display: block; }
.ksl .home-hero__content { position: relative; z-index: 1; }
@keyframes ksl-hero-in {
  from { opacity: 0; transform: scale(0.92); letter-spacing: 0.1em; }
  to   { opacity: 1; transform: scale(1);    letter-spacing: clamp(0.15em, 3vw, 0.9em); }
}
.ksl .home-hero__title {
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 100;
  line-height: 1.3;
  letter-spacing: clamp(0.15em, 3vw, 0.9em);
  white-space: nowrap;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-md);
  animation: ksl-hero-in 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes ksl-hero-in-sub {
  from { opacity: 0; letter-spacing: 0.1em; }
  to   { opacity: 1; letter-spacing: 0.5em; }
}
.ksl .home-hero__sub {
  font-family: var(--font-jp);
  font-size: var(--t-sm);
  font-weight: 200;
  letter-spacing: 0.5em;
  color: rgba(255,255,255,0.85);
  animation: ksl-hero-in-sub 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.4s both;
}
@media (prefers-reduced-motion: reduce) {
  .ksl .home-hero__title,
  .ksl .home-hero__sub { animation: none; }
}

/* ── Artist grid ────────────────────────────────────────── */
.ksl .artist-grid {
  display: flex;
}
.ksl .artist-cell {
  flex: 1;
  padding: var(--sp-md) clamp(14px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: background 0.3s;
  cursor: pointer;
}
.ksl .artist-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--rule);
}
.ksl .artist-cell:last-child::after { display: none; }
.ksl .artist-cell:hover { background: #f7f5f2; }
.ksl .artist-cell__label { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-light); }
.ksl .artist-cell__name {
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important;
  font-size: clamp(16px, 1.8vw, 26px) !important;
  font-weight: 100 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.ksl .artist-cell__name::before,
.ksl .artist-cell__name::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}
.ksl .artist-cell__desc { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.8; }

/* ── News list ──────────────────────────────────────────── */
.ksl .news-list { display: flex; flex-direction: column; }
.ksl .news-item { display: grid; grid-template-columns: 110px 72px 1fr auto; gap: var(--sp-md); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ksl .news-item__date { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.1em; color: var(--ink-light); }
.ksl .news-item__tag { font-family: var(--font-ui); font-size: 10px; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--rule); color: var(--ink-mid); white-space: nowrap; }
.ksl .news-item__title { font-size: var(--t-sm); }
.ksl .news-item__artist { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.12em; color: var(--ink-light); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ksl .news-item__artist::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--ink-light); transform: translateY(-1px); }
.ksl .news-item__artist--hz::before { background: #6aaa5a; }
.ksl .news-item__artist--kz::before { background: #c97a78; }
.ksl .news-item__artist--ha::before { background: #6888b8; }
.ksl .news-item__artist--fl::before { background: #b89060; }

/* ── Page Hero ──────────────────────────────────────────── */
.ksl .page-hero {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-xl) var(--gutter) var(--sp-lg);
  position: relative;
  overflow: hidden;
}
.ksl .page-hero__bg { position: absolute; inset: 0; z-index: 0; background: #fff; }
.ksl .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; display: block; }
.ksl .page-hero__content { position: relative; z-index: 1; max-width: var(--max-w); }
.ksl .page-hero__label { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 200; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: var(--sp-sm); color: var(--ink-mid); }
.ksl .page-hero__title { font-family: var(--font-display); font-size: var(--t-hero); font-weight: 300; line-height: 1; letter-spacing: 0.01em; }
.ksl .page-hero__tagline { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 200; letter-spacing: 0.15em; margin-top: var(--sp-sm); color: var(--ink-mid); }

/* ── Profile ────────────────────────────────────────────── */
.ksl .profile-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-xl); align-items: start; }
.ksl .profile-text p { margin-bottom: var(--sp-md); font-size: var(--t-sm); line-height: 2; }

/* ── Scroll track ───────────────────────────────────────── */
.ksl .scroll-track { display: flex; gap: var(--sp-md); overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: var(--sp-sm); cursor: grab; }
.ksl .scroll-track::-webkit-scrollbar { display: none; }
.ksl .scroll-track:active { cursor: grabbing; }

/* ── Live strip ─────────────────────────────────────────── */
.ksl .live-strip { flex: 0 0 180px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-xs); }
.ksl .live-strip__flyer { width: 100%; flex-shrink: 0; }
.ksl .live-strip__info { padding-top: var(--sp-sm); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ksl .live-strip__date { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.15em; color: var(--ink-light); }
.ksl .live-strip__venue { font-family: var(--font-display); font-size: var(--t-md); font-weight: 300; line-height: 1.3; }
.ksl .venue-sep { display: inline-block; transform: translateY(-0.08em); }
.ksl .live-strip__detail { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.08em; color: var(--ink-mid); }
.ksl .live-strip__price { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 300; letter-spacing: 0.1em; margin-top: var(--sp-xs); }
.ksl .live-strip__apply { display: block; width: 100%; font-family: var(--font-ui); font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; background: var(--ink); text-align: center; padding: 11px 0; margin-top: auto; padding-top: 11px; transition: background 0.2s; }
.ksl.hz .live-strip__apply { background: var(--hz-accent); }
.ksl.hz .live-strip__apply:hover { background: #344d2f; }
.ksl .live-strip__apply--ended { background: #b8b0a8 !important; color: rgba(255,255,255,0.85) !important; pointer-events: none; position: relative; }
.ksl .live-strip__apply--ended::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: rgba(255,255,255,0.6); }
.ksl.kz .live-strip__apply { background: #8a6260; }
.ksl.kz .live-strip__apply:hover { background: #6e4e4c; }
.ksl.ha .live-strip__apply { background: #1a1a1a; }
.ksl.ha .live-strip__apply:hover { background: #000; }

/* ── Release card ───────────────────────────────────────── */
.ksl .release-card { flex: 0 0 190px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-xs); }
.ksl .release-card__artwork { width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.ksl .release-card__artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksl .release-card__type { font-family: var(--font-ui); font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-light); margin-top: var(--sp-xs); }
.ksl .release-card__title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 300; line-height: 1.3; }
.ksl .release-card__date { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.1em; color: var(--ink-light); }
.ksl .release-card__stream { display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-light); border-bottom: 1px solid var(--rule); padding-bottom: 1px; margin-top: 6px; transition: color 0.2s, border-color 0.2s; }
.ksl .release-card__stream:hover { color: var(--ink); border-color: var(--ink-mid); }
.ksl.hz .release-card__stream:hover { color: var(--hz-accent); border-color: var(--hz-accent); }
.ksl .release-card__platforms { display: flex; flex-direction: row; gap: 5px; margin-top: 8px; }
.ksl .platform-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--rule); padding: 6px 4px; color: var(--ink-light); transition: color 0.2s, border-color 0.2s; font-family: var(--font-ui); font-weight: 400; font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
.ksl .platform-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.ksl .platform-btn span { position: relative; top: 1px; }
.ksl .platform-btn--spotify:hover { color: #1DB954; border-color: #1DB954; }
.ksl .platform-btn--apple:hover { color: #fc3c44; border-color: #fc3c44; }
.ksl .platform-btn--more:hover { color: var(--ink); border-color: var(--ink-mid); }

/* ── Gallery ────────────────────────────────────────────── */
.ksl .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }

/* ── Contact ────────────────────────────────────────────── */
.ksl .eyebrow::before { content: '▸'; margin-right: 8px; font-size: 13px; vertical-align: middle; display: inline-block; transform: translateY(-1px); }
.ksl .contact-wrap { max-width: 480px; margin: 0 auto; }
.ksl .contact-wrap .eyebrow { margin-bottom: var(--sp-md); }
.ksl .contact-form { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-lg); text-align: left; }
.ksl .form-input, .ksl .form-select, .ksl .form-textarea { font-family: var(--font-jp); font-size: var(--t-sm); font-weight: 300; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--rule); padding: 10px 0; outline: none; transition: border-color 0.2s; width: 100%; appearance: none; -webkit-appearance: none; }
.ksl .form-input::placeholder, .ksl .form-textarea::placeholder { color: var(--ink-light); font-size: var(--t-xs); letter-spacing: 0.05em; }
.ksl .form-input:focus, .ksl .form-select:focus, .ksl .form-textarea:focus { border-bottom-color: var(--ink); }
.ksl .form-textarea { resize: none; min-height: 100px; line-height: 1.8; }
.ksl .form-submit { display: block; width: 100%; text-align: center; margin-top: var(--sp-sm); }
.ksl .contact-sns-row { display: flex; gap: 20px; margin-top: var(--sp-lg); justify-content: center; align-items: center; }
.ksl .contact-sns-row .sns-icon { color: var(--ink-light); opacity: 1; }
.ksl .contact-sns-row .sns-icon:hover { color: var(--ink); opacity: 1; }
.ksl.hz .contact-sns-row .sns-icon:hover { color: var(--hz-accent); }
.ksl.kz .contact-sns-row .sns-icon:hover { color: var(--kz-accent); }
.ksl.ha .contact-sns-row .sns-icon { color: var(--ink-mid); opacity: 1; }
.ksl.ha .contact-sns-row .sns-icon:hover { color: var(--ink); opacity: 1; }
.ksl .btn { display: inline-block; font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; padding: 14px 44px; border: 1px solid var(--ink); color: var(--ink); transition: background 0.25s, color 0.25s; }
.ksl .btn:hover { background: var(--ink); color: var(--bg); }

/* ── Page themes ────────────────────────────────────────── */
.ksl.hz, .ksl.kz, .ksl.ha, .ksl.fl { --gutter: clamp(32px, 7vw, 88px); }
.ksl.hz .page-hero,
.ksl.kz .page-hero,
.ksl.ha .page-hero { padding-left: clamp(16px, 3.5vw, 48px); }
.ksl.hz .section, .ksl.kz .section, .ksl.ha .section, .ksl.fl .section { max-width: none; }

.ksl.hz { color: #2d3d2b; --rule: #c8d0c4; --ink-light: #7a9478; --ink-mid: #5a7858; --page-tint: #edf2eb; }
.ksl.hz .page-hero__title { font-size: clamp(26px, 3.5vw, 44px); color: var(--hz-accent) !important; font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important; font-weight: 100 !important; letter-spacing: 0.2em !important; }
.ksl.hz .wp-block-cover.page-hero .wp-block-cover__image-background,
.ksl.hz .wp-block-cover.page-hero .wp-block-cover__background {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 70%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 70%);
}
.ksl.hz .live-strip__venue { color: var(--hz-accent); }
.ksl.hz .live-strip__date { color: #7a9478; }
.ksl.hz .release-card__type { color: var(--hz-accent); }
.ksl.hz .sns-link:hover { border-color: var(--hz-accent); color: var(--hz-accent); }
.ksl.hz .page-hero__label { color: var(--hz-accent); letter-spacing: 0.2em; }
.ksl.hz .hz-sns-row,
.ksl.kz .kz-sns-row { display: flex; gap: 16px; margin-top: 20px; align-items: center; }
.ksl .sns-icon { display: flex; align-items: center; justify-content: center; color: var(--ink-light); transition: color 0.2s; }
.ksl .sns-icon:hover { color: var(--ink); }
.ksl.hz .sns-icon { color: var(--hz-accent); opacity: 0.6; }
.ksl.hz .sns-icon:hover { opacity: 1; }
.ksl.kz .sns-icon { color: var(--kz-accent); opacity: 0.6; }
.ksl.kz .sns-icon:hover { opacity: 1; }
.ksl.ha .ha-sns-row { display: flex; gap: 16px; margin-top: 20px; align-items: center; }
.ksl.ha .sns-icon { color: rgba(240,238,234,0.5); }
.ksl.ha .sns-icon:hover { color: #f0eeea; }

.ksl.hz .page-hero__tagline { letter-spacing: 0.3em; }
.ksl.hz .img-box { background: #d4ddd0; }
.ksl.hz .form-submit { background: #344d2f; border-color: #344d2f; color: #fff; }
.ksl.hz .form-submit:hover { background: #263a22; border-color: #263a22; }

.ksl.kz { color: #4a3530; --rule: #e0d0cc; --ink-light: #a08880; --ink-mid: #7a5855; --page-tint: #f8f1f0; }
.ksl.kz .page-hero__title { font-size: clamp(26px, 3.5vw, 44px); letter-spacing: 0.2em; font-weight: 100; font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important; color: var(--kz-accent) !important; }
.ksl.kz .wp-block-cover.page-hero .wp-block-cover__image-background,
.ksl.kz .wp-block-cover.page-hero .wp-block-cover__background {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 70%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 70%);
}
.ksl.kz .live-strip__venue { color: var(--kz-accent); }
.ksl.kz .live-strip__date { color: #a08880; }
.ksl.kz .release-card__type { color: var(--kz-accent); }
.ksl.kz .sns-link:hover { border-color: var(--kz-accent); color: var(--kz-accent); }
.ksl.kz .page-hero__label { color: var(--kz-accent); letter-spacing: 0.5em; }
.ksl.kz .img-box { background: #e4d4d0; }
.ksl.kz .form-submit { background: #8a6260; border-color: #8a6260; color: #fff; }
.ksl.kz .form-submit:hover { background: #6e4e4c; border-color: #6e4e4c; }

.ksl.ha { color: #1a1a1a; --rule: #dcdcdc; --ink-light: #909090; --ink-mid: #606060; --page-tint: #f3f3f3; }
.ksl.ha .live-strip__venue { color: #1a1a1a; }
.ksl.ha .live-strip__date { color: #909090; }
.ksl.ha .release-card__type { color: #606060; }
.ksl.ha .sns-link { border-color: #dcdcdc; color: #606060; }
.ksl.ha .sns-link:hover { border-color: #1a1a1a; color: #1a1a1a; }
.ksl.ha .eyebrow { color: #909090; }
.ksl.ha .page-hero__label { color: #a0a0a0; }
.ksl.ha .page-hero__tagline { color: #b0aea8; }
.ksl.ha .page-hero__bg { background: #0e0e0e; }
.ksl.ha .page-hero__bg img { opacity: 0.6; }
.ksl.ha .page-hero__title { color: #f0eeea; }
.ksl.ha .img-box { background: #ececec; }
.ksl.ha .form-submit { background: #1a1a1a; border-color: #1a1a1a; color: #f0eeea; }
.ksl.ha .form-submit:hover { background: #000; border-color: #000; }
.ksl.ha .wp-block-button { border: none !important; background: none !important; padding: 0 !important; }
.ksl.ha .wp-block-button__link {
  background: #1a1a1a !important;
  color: #f0eeea !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  padding: 14px 44px !important;
  transition: background 0.25s, color 0.25s !important;
}
.ksl.ha .wp-block-button__link:hover {
  background: #383838 !important;
  border-color: #383838 !important;
  color: #f0eeea !important;
}

.ksl.fl { color: #3a2e20; --rule: #d8cfc0; --ink-light: #a09070; --ink-mid: #7a6850; --page-tint: #f7f3ee; }
.ksl.fl .page-hero__title { font-size: clamp(22px, 3vw, 36px); color: #3a2e20; }
.ksl.fl .eyebrow { color: var(--fl-accent); }
.ksl.fl .img-box { background: #d8ccb8; }
.ksl.fl .btn { border-color: var(--fl-accent); color: var(--fl-accent); }
.ksl.fl .btn:hover { background: var(--fl-accent); color: #fff; }
.ksl.fl .form-submit { background: #6a5848; border-color: #6a5848; color: #fff; }
.ksl.fl .form-submit:hover { background: #52443a; border-color: #52443a; }

/* ── Lesson components ──────────────────────────────────── */
.ksl .lesson-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-bottom: var(--sp-md); }
.ksl .lesson-table th, .ksl .lesson-table td { padding: 12px 16px; border: 1px solid #ccc0a8; text-align: center; font-family: var(--font-ui); font-weight: 300; letter-spacing: 0.05em; line-height: 1.6; }
.ksl .lesson-table th { background: rgba(138,116,96,0.08); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--fl-accent); }
.ksl .lesson-table td:first-child { text-align: left; }
.ksl .lesson-table caption { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fl-accent); text-align: left; padding-bottom: var(--sp-sm); }
.ksl .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin: var(--sp-lg) 0; }
.ksl .feature-item { display: flex; flex-direction: column; gap: var(--sp-xs); }
.ksl .feature-item__num { font-family: var(--font-display); font-size: 44px; font-weight: 300; color: var(--fl-accent); line-height: 1; }
.ksl .feature-item__title { font-size: var(--t-sm); font-weight: 400; letter-spacing: 0.04em; }
.ksl .feature-item__desc { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.9; }
.ksl .recommend-list { list-style: none; display: flex; flex-direction: column; }
.ksl .recommend-list li { display: flex; align-items: baseline; gap: var(--sp-sm); padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.ksl .recommend-list li::before { content: '—'; color: var(--ink-light); flex-shrink: 0; }
.ksl .recommend-note { font-size: var(--t-xs); color: var(--ink-light); letter-spacing: 0.04em; padding-top: 10px; margin-top: 4px; }
.ksl .notes-list { list-style: none; display: flex; flex-direction: column; }
.ksl .notes-list li { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-md); padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.ksl .note-label { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fl-accent); padding-top: 2px; }
.ksl details.faq-item { border-bottom: 1px solid var(--rule); }
.ksl details.faq-item summary { padding: 14px 0; cursor: pointer; font-size: var(--t-sm); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ksl details.faq-item summary::-webkit-details-marker { display: none; }
.ksl details.faq-item summary::after { content: '+'; font-family: var(--font-ui); color: var(--ink-light); font-size: 18px; }
.ksl details.faq-item[open] summary::after { content: '−'; }
.ksl details.faq-item .faq-body { padding-bottom: var(--sp-md); font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.9; }
.ksl .cta-block { text-align: center; padding: var(--sp-xl) 0; }
.ksl .cta-block p { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: var(--sp-md); }
.ksl .cta-block .cta-block__label { font-family: var(--font-display); font-size: clamp(20px,3vw,28px); font-weight: 300; color: var(--fl-accent); letter-spacing: 0.05em; margin-bottom: var(--sp-sm); }
.ksl #contact { scroll-margin-top: 100px; }

/* ── ナビゲーション背景（テーマカラー） ─────────────────── */
.l-fixHeader,
.l-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(247, 245, 240, 0.88) !important;
}
.l-fixHeader::before { background: rgba(247, 245, 240, 0.88) !important; }
/* はづるこ */
.page-id-10 .l-fixHeader,
.page-id-10 .l-header {
  background: rgba(237, 242, 235, 0.88) !important;
}
.page-id-10 .l-fixHeader::before { background: rgba(237, 242, 235, 0.88) !important; }
.page-id-10 .c-headLogo__link,
.page-id-10 .c-gnav a,
.page-id-10 .c-gnav .ttl {
  color: #8a9e87 !important;
}
.page-id-10 .c-gnav a:hover,
.page-id-10 .c-gnav a:hover .ttl,
.page-id-10 .c-gnav li.current-menu-item > a,
.page-id-10 .c-gnav li.current-menu-item > a .ttl {
  color: #4a6741 !important;
}
/* 黒沢梢 */
.page-id-11 .l-fixHeader,
.page-id-11 .l-header {
  background: rgba(248, 241, 240, 0.88) !important;
}
.page-id-11 .l-fixHeader::before { background: rgba(248, 241, 240, 0.88) !important; }
.page-id-11 .c-headLogo__link,
.page-id-11 .c-gnav a,
.page-id-11 .c-gnav .ttl {
  color: #b09898 !important;
}
.page-id-11 .c-gnav a:hover,
.page-id-11 .c-gnav a:hover .ttl,
.page-id-11 .c-gnav li.current-menu-item > a,
.page-id-11 .c-gnav li.current-menu-item > a .ttl {
  color: #9a7070 !important;
}
/* Haruichi */
.page-id-12 .l-fixHeader,
.page-id-12 .l-header {
  background: rgba(22, 22, 22, 0.88) !important;
}
.page-id-12 .l-fixHeader::before { background: rgba(22, 22, 22, 0.88) !important; }
.page-id-12 .c-headLogo__link,
.page-id-12 .c-gnav a,
.page-id-12 .c-gnav .ttl,
.page-id-12 .p-spHeadMenu a {
  color: #a0a0a0 !important;
}
.page-id-12 .c-gnav a:hover,
.page-id-12 .c-gnav a:hover .ttl,
.page-id-12 .c-gnav li.current-menu-item > a,
.page-id-12 .c-gnav li.current-menu-item > a .ttl,
.page-id-12 .p-spHeadMenu a:hover,
.page-id-12 .p-spHeadMenu li.current-menu-item > a {
  color: #f0eeea !important;
}
/* フルートレッスン */
.page-id-13 .l-fixHeader,
.page-id-13 .l-header {
  background: rgba(247, 243, 238, 0.88) !important;
}
.page-id-13 .l-fixHeader::before { background: rgba(247, 243, 238, 0.88) !important; }
.page-id-13 .c-headLogo__link,
.page-id-13 .c-gnav a,
.page-id-13 .c-gnav .ttl {
  color: #a09080 !important;
}
.page-id-13 .c-gnav a:hover,
.page-id-13 .c-gnav a:hover .ttl,
.page-id-13 .c-gnav li.current-menu-item > a,
.page-id-13 .c-gnav li.current-menu-item > a .ttl {
  color: #8a7460 !important;
}

/* ── SWELLナビゲーション上書き ──────────────────────────── */
.c-headLogo__link {
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 13px !important;
  font-weight: 200 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.c-gnav a,
.c-gnav .ttl {
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #a09888 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s !important;
}
.c-gnav a:hover,
.c-gnav a:hover .ttl,
.c-gnav li.current-menu-item > a,
.c-gnav li.current-menu-item > a .ttl {
  color: #2c2820 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
/* ナビ下線（::after）をテーマカラーで上書き */
.page-id-10 .c-gnav > li:hover > a::after,
.page-id-10 .c-gnav > .-current > a::after { background: #4a6741 !important; }
.page-id-11 .c-gnav > li:hover > a::after,
.page-id-11 .c-gnav > .-current > a::after { background: #9a7070 !important; }
.page-id-12 .c-gnav > li:hover > a::after,
.page-id-12 .c-gnav > .-current > a::after { background: #f0eeea !important; }
.page-id-13 .c-gnav > li:hover > a::after,
.page-id-13 .c-gnav > .-current > a::after { background: #8a7460 !important; }

/* ── SWELLレイアウト上書き ──────────────────────────────── */
#content.l-content,
.l-content.l-container,
.l-mainContent,
.l-mainContent__inner,
.post_content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.post_content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-block-group__inner-container { padding: 0 !important; }
.ksl.wp-block-group { padding: 0 !important; }

/* ── コンタクトセクション背景白 ─────────────────────────── */
.ksl .section--tint:has(.contact-wrap) { background: var(--bg) !important; }

/* ── フッター ────────────────────────────────────────────── */
.l-footer {
  font-family: 'Murecho', 'Zen Kaku Gothic New', sans-serif !important;
  font-size: 11px !important;
  font-weight: 200 !important;
  letter-spacing: 0.2em !important;
}
.page-id-10 .l-footer { background: var(--hz-accent) !important; }
.page-id-10 .l-footer,
.page-id-10 .l-footer a,
.page-id-10 .l-footer .c-copyright { color: rgba(255,255,255,0.75) !important; }
.page-id-10 .l-footer a:hover { color: #fff !important; }
.page-id-11 .l-footer { background: var(--kz-accent) !important; }
.page-id-11 .l-footer,
.page-id-11 .l-footer a,
.page-id-11 .l-footer .c-copyright { color: rgba(255,255,255,0.75) !important; }
.page-id-11 .l-footer a:hover { color: #fff !important; }
.page-id-12 .l-footer { background: #1a1a1a !important; }
.page-id-12 .l-footer,
.page-id-12 .l-footer a,
.page-id-12 .l-footer .c-copyright { color: rgba(240,238,234,0.6) !important; }
.page-id-12 .l-footer a:hover { color: #f0eeea !important; }
.page-id-13 .l-footer { background: var(--fl-accent) !important; }
.page-id-13 .l-footer,
.page-id-13 .l-footer a,
.page-id-13 .l-footer .c-copyright { color: rgba(255,255,255,0.75) !important; }
.page-id-13 .l-footer a:hover { color: #fff !important; }

/* ── SWELL非表示 ────────────────────────────────────────── */
.c-pageTitle,
#breadcrumb,
.p-breadcrumb {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .ksl .artist-grid { flex-wrap: wrap; }
  .ksl .artist-cell { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--rule); }
  .ksl .artist-cell__name { white-space: normal; }
  .ksl .profile-grid { grid-template-columns: 1fr; }
  .ksl .profile-grid .profile-img { order: -1; }
  .ksl .features-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .ksl .news-item { grid-template-columns: 80px 1fr; gap: var(--sp-sm); }
  .ksl .news-item__tag, .ksl .news-item__artist { display: none; }
  .ksl .live-strip { flex: 0 0 260px; }
  .ksl .release-card { flex: 0 0 155px; }
  .ksl .lesson-table { font-size: 12px; }
  .ksl .lesson-table th, .ksl .lesson-table td { padding: 8px 10px; }
  .ksl .notes-list li { grid-template-columns: 1fr; gap: 4px; }
  .ksl .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  /* 料金表などが右下固定の「上に戻る」ボタンに隠れないよう縮小 */
  .p-fixBtnWrap { bottom: 10px !important; right: 8px !important; }
  .p-fixBtnWrap .c-fixBtn { width: 40px !important; height: 40px !important; }
}
@media (max-width: 480px) {
  .ksl .page-hero { min-height: 52vh; }
  .ksl .home-hero { min-height: 72vh; }
}

/* ── Lightbox ──────────────────────────────────────────────── */
.live-flyer-link { display: block; cursor: zoom-in; }
.ksl-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 99999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.ksl-lightbox__inner img { max-width: 90vw; max-height: 90vh; object-fit: contain; display: block; }


/* ── ライブ会場リンク ─────────────────────────────────────── */
.ksl a.live-strip__venue { color: inherit; text-decoration: none; transition: opacity 0.2s; }
.ksl a.live-strip__venue:hover { opacity: 0.65; }


/* ── Contact Form 7 ───────────────────────────────────────── */
.ksl .wpcf7 { margin: 0; }
.ksl .contact-form p { margin: 0; }
.ksl .contact-form .wpcf7-form-control-wrap { display: block; }

/* appearance:none で消えるセレクトの矢印を補う */
.ksl .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23a09888' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 7px;
  padding-right: 26px;
  cursor: pointer;
}

/* 入力エラー */
.ksl .contact-form .wpcf7-not-valid-tip {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #a05a48;
  margin-top: 8px;
}
.ksl .contact-form .wpcf7-not-valid { border-bottom-color: #c48a7a; }

/* 送信結果メッセージ */
.ksl .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  font-family: var(--font-jp);
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-mid);
}
.ksl .wpcf7 form.sent .wpcf7-response-output { border-color: #9db596; color: #4a6741; }
.ksl .wpcf7 form.invalid .wpcf7-response-output,
.ksl .wpcf7 form.unaccepted .wpcf7-response-output,
.ksl .wpcf7 form.spam .wpcf7-response-output,
.ksl .wpcf7 form.aborted .wpcf7-response-output,
.ksl .wpcf7 form.failed .wpcf7-response-output { border-color: #d6b3a8; color: #a05a48; }

/* 送信中スピナー */
.ksl .contact-form .wpcf7-spinner { display: block; margin: 14px auto 0; }
.ksl .contact-form .wpcf7-submit:disabled { opacity: 0.5; cursor: default; }

/* ── 「梢」対策：Murechoに無い字なので、黒沢梢の表記は同じ単語内で
   フォントが混ざらないよう Zen Kaku Gothic New に統一する ────── */
.c-gnav a[href*="kozue-kurosawa"],
.c-gnav a[href*="kozue-kurosawa"] .ttl,
.artist-cell--kz .artist-cell__name,
.ksl.kz .page-hero__title {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
}

/* ── BGMカード（YouTube埋め込み） ───────────────────────── */
.ksl .bgm-card { flex: 0 0 260px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--sp-xs); }
.ksl .bgm-card__player { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.ksl .bgm-card__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ksl .bgm-card__title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 300; line-height: 1.3; margin-top: 4px; }
.ksl .bgm-card__note { font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 300; letter-spacing: 0.08em; color: var(--ink-light); }