/* =============================================================
   りらみゅ / Lilla Music Online — App & Site Styles
   ============================================================= */

/* ---------------------------------------------------------------
   01. Reset & Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-jp);
  color: var(--color-foreground);
  background: var(--grad-sky);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* hidden 属性は、ブラウザ標準では display:none を当てるだけなので、
   クラス側の display:flex / grid に負けます。負けると、隠したはずの
   ボタンやフォームがそのまま表示されます（.btn や .note-edit で実際に起きていた）。
   ここで最優先にして、hidden を付ければ必ず消えるようにします */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--sky-700); text-decoration: none; }
a:hover { color: var(--sky-600); }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection { background: var(--sky-200); color: var(--ink-900); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: var(--z-toast);
  background: #fff; color: var(--ink-900); padding: 10px 18px;
  border-radius: var(--r-pill); box-shadow: var(--sh-md);
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------
   02. Typography helpers
   --------------------------------------------------------------- */
.font-display { font-family: var(--font-display); font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  color: var(--sky-600); text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .45;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 600;
  line-height: var(--lh-tight); color: var(--ink-900);
}
.section-title .accent { color: var(--sky-600); }
.section-lead {
  color: var(--ink-700); font-size: var(--fs-base);
  max-width: 34em; margin-inline: auto;
}
.text-muted { color: var(--color-muted); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* リボン見出し（参考②のポップな見出し） */
.ribbon-title {
  position: relative; display: inline-block;
  padding: 10px 34px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); letter-spacing: var(--ls-wide);
  color: #fff; background: var(--grad-blue);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 0 rgba(42,115,175,.28), var(--sh-md);
}
.ribbon-title::before, .ribbon-title::after {
  content: ""; position: absolute; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 4px; transform: rotate(45deg);
  background: var(--sky-300);
}
.ribbon-title::before { left: -8px; }
.ribbon-title::after  { right: -8px; }

/* ---------------------------------------------------------------
   03. Layout
   --------------------------------------------------------------- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
.wrap-app { width: min(100% - 32px, var(--wrap-app)); margin-inline: auto; }
.section { position: relative; padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
/* 装飾レイヤーより前面にコンテンツを置く */
.section > .wrap,
.section > .wrap-narrow,
.section > .wrap-app { position: relative; z-index: 1; }
.section-head { text-align: center; display: grid; gap: var(--space-4); justify-items: center; margin-bottom: var(--space-7); }
.grid { display: grid; gap: var(--space-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wrap-flex { flex-wrap: wrap; }

/* 背景のトーン切り替え */
.band-white  { background: #fff; }
.band-sky    { background: linear-gradient(180deg, #E9F5FF, #DFF0FF); }
.band-rose   { background: linear-gradient(180deg, #FFF1F6, #FFE7F0); }
.band-lav    { background: linear-gradient(180deg, #F5F0FF, #EFE8FF); }
.band-soft   { background: var(--surface-soft); }

/* ---------------------------------------------------------------
   04. 装飾 — 雲・星・波・スカラップ
   --------------------------------------------------------------- */
.deco-layer {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: var(--z-deco);
}
.cloud {
  position: absolute; background: #fff; border-radius: var(--r-pill);
  filter: blur(.2px); opacity: .9;
  box-shadow: 0 10px 30px rgba(90,150,210,.14);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 60%; height: 150%; left: 8%; bottom: 32%; }
.cloud::after  { width: 46%; height: 120%; right: 10%; bottom: 34%; }
.cloud--1 { width: 190px; height: 62px; top: 12%; left: -4%; animation: drift 34s linear infinite; }
.cloud--2 { width: 130px; height: 44px; top: 30%; right: -3%; opacity: .8; animation: drift-r 42s linear infinite; }
.cloud--3 { width: 240px; height: 76px; bottom: 8%; left: 12%; opacity: .55; animation: drift 56s linear infinite; }
.cloud--4 { width: 96px;  height: 34px; top: 58%; left: 62%; opacity: .7; animation: drift-r 38s linear infinite; }

.star {
  position: absolute; width: 22px; aspect-ratio: 1;
  background: var(--lemon-300);
  clip-path: polygon(50% 0%, 62% 36%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0% 38%, 38% 36%);
  animation: twinkle 3.6s var(--ease-soft) infinite;
}
.star--sm { width: 13px; }
.star--pink { background: var(--rose-300); }
.star--lav  { background: var(--lav-300); }

.sparkle { position: absolute; width: 16px; height: 16px; opacity: .9; animation: twinkle 2.8s ease-in-out infinite; }
.sparkle::before, .sparkle::after {
  content: ""; position: absolute; inset: 0; background: #fff; border-radius: 2px;
}
.sparkle::before { clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.sparkle::after  { transform: rotate(45deg) scale(.6); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }

/* 波の区切り（参考②） */
.wave-divider { position: relative; line-height: 0; display: block; }
.wave-divider svg { width: 100%; height: clamp(38px, 6vw, 84px); display: block; }
.wave-divider--flip svg { transform: scaleY(-1); }

/* スカラップ（もこもこの縁） */
.scallop {
  height: 26px; width: 100%;
  background-image: radial-gradient(circle at 16px 0, transparent 15px, currentColor 16px);
  background-size: 32px 26px; background-repeat: repeat-x;
}
.scallop--top { transform: scaleY(-1); }

/* ドット地（band-* の背景を上書きしないよう擬似要素で重ねる） */
.dots-bg { position: relative; }
.dots-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.55) 2px, transparent 2px);
  background-size: 18px 18px;
}

/* ---------------------------------------------------------------
   05. Buttons / Pills / Badges
   --------------------------------------------------------------- */
.btn {
  --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-shadow: var(--sh-sm);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 28px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  letter-spacing: .03em; color: var(--btn-fg); background: var(--btn-bg);
  border: none; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform var(--dur-base) var(--ease-back),
              box-shadow var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
  overflow: hidden; isolation: isolate; text-align: center; white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { flex: none; }

.btn--primary { --btn-bg: var(--grad-cta); --btn-fg: #fff; --btn-shadow: var(--sh-cta); }
.btn--blue    { --btn-bg: var(--grad-blue); --btn-fg: #fff; --btn-shadow: 0 10px 22px rgba(42,115,175,.30); }
.btn--ghost   { --btn-bg: rgba(255,255,255,.86); --btn-fg: var(--sky-700); box-shadow: inset 0 0 0 2px var(--sky-200), var(--sh-sm); }
.btn--soft    { --btn-bg: var(--sky-100); --btn-fg: var(--sky-800); --btn-shadow: none; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: var(--fs-sm); }
.btn--lg { min-height: 60px; padding: 0 36px; font-size: var(--fs-lg); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ボタンの光沢スイープ */
.btn--primary::after, .btn--blue::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-shine); transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn--primary:hover::after, .btn--blue:hover::after { transform: translateX(120%); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; max-width: 100%;
  padding: 5px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  background: var(--sky-100); color: var(--sky-800);
}
.pill--rose  { background: var(--rose-100); color: var(--rose-700); }
.pill--lemon { background: var(--lemon-100); color: var(--lemon-600); }
.pill--mint  { background: var(--mint-100); color: var(--mint-600); }
.pill--lav   { background: var(--lav-100); color: var(--lav-500); }
.pill--gold  { background: var(--grad-cta); color: #fff; }

.badge-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--rose-600); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* アイコンボタン（タップ44px確保） */
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--r-pill);
  color: var(--ink-700); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back);
}
.icon-btn:hover { background: var(--sky-100); color: var(--sky-700); }
.icon-btn:active { transform: scale(.92); }

/* 未読バッジ付きのアイコン */
.icon-btn.has-badge { position: relative; }
.icon-btn.has-badge .badge-count {
  position: absolute; top: 3px; right: 1px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
  animation: pop 420ms var(--ease-back);
}

/* ---------------------------------------------------------------
   05b. フォーム部品
   --------------------------------------------------------------- */
.field-label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 8px; color: var(--ink-900); }
.field-hint { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 6px; }
.field {
  width: 100%; min-height: 52px; border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; font: inherit; color: var(--ink-900); background: var(--surface-soft);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.field::placeholder { color: var(--ink-300); }
.field:focus {
  outline: none; border-color: var(--sky-300); background: #fff;
  box-shadow: 0 0 0 4px rgba(165,216,255,.4);
}
textarea.field { min-height: 92px; resize: vertical; line-height: 1.7; }
select.field {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A87CF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
/* 日付・時刻の入力欄。
   iOS は値を中央ぞろえで描き、入れ物の高さも自前で決めます。そのため
   丸枠から少しはみ出したり、他の欄より大きく見えたりします。
   標準の描き方をやめて、高さと幅をこちらで決めてしまいます。
   （type は date のままなので、タップすれば標準のカレンダーが出ます） */
.field[type="date"],
.field[type="time"] {
  -webkit-appearance: none; appearance: none;
  /* 日付は11文字ぶんあれば足りる。全幅の空っぽな枠にしない */
  width: auto; min-width: 0; max-width: 100%;
  /* appearance を外したので、ふつうの入力欄と同じ高さの決まり方になる。
     それでも iOS が内部で膨らませたときのために、上限だけ切っておく */
  max-height: 4.2em;
}
.field[type="date"]::-webkit-date-and-time-value,
.field[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field[type="date"]::-webkit-datetime-edit,
.field[type="time"]::-webkit-datetime-edit { padding: 0; }
.field[type="date"]::-webkit-calendar-picker-indicator,
.field[type="time"]::-webkit-calendar-picker-indicator { margin-left: 10px; opacity: .5; }

.check-label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; }
.check-label input { width: 22px; height: 22px; accent-color: var(--sky-500); cursor: pointer; }

/* レンジスライダー（タップ領域44pxを確保しつつ細いトラック） */
.range-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
.range-input::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--sky-200), var(--sky-400));
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px;
  border-radius: 50%; background: #fff; border: 5px solid var(--sky-500);
  box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-back);
}
.range-input:active::-webkit-slider-thumb { transform: scale(1.12); }
.range-input::-moz-range-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--sky-200), var(--sky-400));
}
.range-input::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 5px solid var(--sky-500); box-shadow: var(--sh-sm);
}

/* ---------------------------------------------------------------
   06. Card
   --------------------------------------------------------------- */
.card {
  position: relative; background: var(--grad-card);
  border-radius: var(--r-lg); padding: var(--space-5);
  box-shadow: var(--sh-md); border: 1px solid rgba(255,255,255,.9);
}
.card--flat { box-shadow: var(--sh-sm); }
.card--pad-lg { padding: var(--space-6); }
.card-link { display: block; color: inherit; transition: transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out); }
.card-link:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); color: inherit; }

/* 上部にちょこんと乗る番号バッジ */
.step-num {
  position: absolute; top: -18px; left: 50%; translate: -50% 0;
  min-width: 108px; padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--grad-blue); color: #fff; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .06em; box-shadow: 0 5px 0 rgba(42,115,175,.25);
}
.step-num--rose { background: var(--grad-cta); box-shadow: 0 5px 0 rgba(185,47,99,.25); }
.step-num--lav  { background: linear-gradient(135deg,#A98CE8,#7C5CC4); box-shadow: 0 5px 0 rgba(124,92,196,.25); }

/* ---------------------------------------------------------------
   07. Header / Nav
   --------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(220,235,250,.9);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* スクロール中は背景が .92 まで濃くなるので、ぼかしは見えない。
   外しておくと、スクロール中の1コマぶんの仕事が減る */
.site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: var(--sh-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header__inner { width: min(100% - 32px, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: var(--space-4); }

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink-900); flex: none; min-width: 0; }
.brand:hover { color: var(--ink-900); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: grid; line-height: 1; min-width: 0; }
/* サイト名が長くても、ヘッダーを絶対に崩さない（はみ出さず「…」で切る） */
.brand__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  color: var(--sky-600); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.brand__sub {
  font-size: 10px; letter-spacing: .18em; color: var(--ink-500); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.nav a {
  position: relative; padding: 10px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; translate: -50% 0;
  width: 0; height: 3px; border-radius: 3px; background: var(--sky-400);
  transition: width var(--dur-base) var(--ease-back);
}
.nav a:hover { color: var(--sky-700); background: rgba(230,243,255,.8); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 22px; }
.nav a[aria-current="page"] { color: var(--sky-700); }

.header-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }

/* モバイルドロワー */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(46,61,87,.42); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  /* 閉じているパネルは画面右外にいる。fixed なので body の overflow-x では
     クリップされず、横スクロールが出てしまうためここで切る。 */
  overflow: hidden;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(88vw, 340px);
  background: var(--grad-sky); padding: var(--space-5);
  box-shadow: var(--sh-xl); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
  display: grid; align-content: start; gap: var(--space-3);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__panel a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px;
  background: rgba(255,255,255,.8); border-radius: var(--r-md);
  font-weight: 700; color: var(--ink-700); box-shadow: var(--sh-xs);
}
.drawer__panel a:hover { color: var(--sky-700); }
/* 上の .drawer__panel a のほうが .btn より強いので、ボタンは打ち消しておきます。
   これが無いと「むりょうではじめる」がメニューの行と同じ白い箱になります */
.drawer__panel a.btn {
  justify-content: center; padding: 0 28px; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow);
}
.drawer__panel a.btn:hover { color: var(--btn-fg); }

/* アプリ用ボトムナビ（5つまで） */
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-header);
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: none; align-items: stretch;
  background: rgba(255,255,255,.94);
  /* ここは背景が .94 でほぼ不透明。ぼかしても見た目は変わらないのに、
     画面に貼りついたまま毎フレーム描き直されるので外している */
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(52,94,145,.10);
}
.bottom-nav a {
  flex: 1; display: grid; place-items: center; gap: 2px; padding-top: 8px;
  font-size: 10px; font-weight: 700; color: var(--ink-500);
  transition: color var(--dur-fast) var(--ease-out);
}
.bottom-nav a svg { width: 24px; height: 24px; transition: transform var(--dur-base) var(--ease-back); }
.bottom-nav a[aria-current="page"] { color: var(--sky-600); }
.bottom-nav a[aria-current="page"] svg { transform: translateY(-3px) scale(1.08); }
.bottom-nav a[aria-current="page"]::after {
  content: ""; position: absolute; top: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky-100); z-index: -1;
}
.bottom-nav a { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   08. Hero
   --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-9);
  background: var(--grad-hero);
}
.hero__inner {
  position: relative; z-index: var(--z-base);
  width: min(100% - 40px, var(--wrap)); margin-inline: auto;
  display: grid; gap: var(--space-6); justify-items: center; text-align: center;
}
.hero__mascot { width: clamp(190px, 30vw, 300px); animation: bob 5.2s var(--ease-soft) infinite; filter: drop-shadow(0 18px 26px rgba(90,150,210,.25)); }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4xl); line-height: 1.18; color: var(--ink-900);
  letter-spacing: .01em;
}
.hero__title .hl { position: relative; color: var(--sky-600); white-space: nowrap; }
.hero__title .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .34em;
  background: linear-gradient(90deg, rgba(255,227,143,.85), rgba(255,179,198,.85));
  border-radius: var(--r-pill); z-index: -1;
  transform-origin: left center; animation: draw-line 900ms var(--ease-out) 500ms both;
}
.hero__lead { color: var(--ink-700); font-size: var(--fs-lg); max-width: 30em; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.hero__meta { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; color: var(--ink-500); font-size: var(--fs-sm); }
.hero__meta b { font-family: var(--font-display); font-size: 1.4rem; color: var(--sky-600); display: block; }

.scroll-cue {
  display: grid; justify-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .2em; color: var(--sky-700); opacity: .8;
}
.scroll-cue span {
  width: 2px; height: 42px; border-radius: 2px;
  background: linear-gradient(180deg, var(--sky-400), transparent);
  animation: cue 2s var(--ease-soft) infinite;
}

/* ヒーロー下端の雲のカーブ */
.hero__curve { position: absolute; inset: auto 0 -1px 0; line-height: 0; z-index: var(--z-base); }
.hero__curve svg { width: 100%; height: clamp(46px, 7vw, 100px); }

/* ヒーロー上部のアーチ幕（参考②のカーテン） */
.hero__arch {
  position: absolute; inset: 0 0 auto 0; height: 42px; z-index: var(--z-base);
  color: rgba(255,255,255,.55);
}
.hero__arch .scallop { color: inherit; }

/* ---------------------------------------------------------------
   09. Feature / About / Steps
   --------------------------------------------------------------- */
.step-card { padding-top: var(--space-6); text-align: center; }
.step-card__art {
  width: 100%; aspect-ratio: 4/3; border-radius: var(--r-md);
  background: var(--surface-sunk); display: grid; place-items: center;
  margin-bottom: var(--space-4); overflow: hidden; position: relative;
}
.step-card__art img { width: 62%; }
.step-card h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--sky-700); margin-bottom: 8px; }
.step-card p { font-size: var(--fs-sm); color: var(--ink-700); }

.feature-row {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8); align-items: center;
}
/* 画像を左に置きたい行には .feature-row--reverse を付ける（順番に依存しない） */
.feature-row--reverse .feature-row__media { order: -1; }
.feature-row + .feature-row { margin-top: var(--space-9); }
.feature-row__body { display: grid; gap: var(--space-4); justify-items: start; }
.feature-row__body h3 { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.35; color: var(--ink-900); }
.feature-row__media { position: relative; }
.feature-row__media .mock { position: relative; z-index: 1; }
.feature-row__media::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: 0;
  background: var(--grad-candy); filter: blur(38px); opacity: .5; border-radius: 50%;
}
.feature-list { display: grid; gap: 10px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-base); color: var(--ink-700); }
.feature-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%;
  background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A87CF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* 端末モック */
.mock {
  border-radius: var(--r-xl); background: #fff; padding: 12px;
  box-shadow: var(--sh-xl); border: 1px solid rgba(255,255,255,.9);
}
.mock__screen { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-soft); }
.mock--phone { width: min(300px, 78%); margin-inline: auto; border-radius: 42px; padding: 10px; }
.mock--phone .mock__screen { border-radius: 34px; }

/* ---------------------------------------------------------------
   10. 数字カウンター
   --------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat {
  text-align: center; padding: var(--space-5) var(--space-3);
  background: rgba(255,255,255,.78); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); border: 1px solid rgba(255,255,255,.9);
}
.stat__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1;
  background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__num small { font-size: .45em; margin-left: 2px; }
.stat__label { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 8px; }

/* ---------------------------------------------------------------
   11. 声（レビュー）
   --------------------------------------------------------------- */
.voice-card { display: grid; gap: var(--space-3); }
.voice-card__head { display: flex; align-items: center; gap: 12px; }
.voice-card__text { font-size: var(--fs-base); color: var(--ink-700); }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--grad-candy); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 10px rgba(90,150,210,.22);
}
.avatar--xs { width: 30px; height: 30px; font-size: .78rem; }
.avatar--sm { width: 36px; height: 36px; font-size: .9rem; }
.avatar--lg { width: 84px; height: 84px; font-size: 2rem; }
img.avatar { display: block; object-fit: cover; background: var(--sky-100); }
.stars-row { display: flex; gap: 2px; color: var(--lemon-300); }

/* 横スクロールのマーキー */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--space-3); width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .pill { font-size: var(--fs-sm); padding: 10px 20px; background: #fff; color: var(--sky-700); box-shadow: var(--sh-xs); }

/* ---------------------------------------------------------------
   12. 料金
   --------------------------------------------------------------- */
.plans { display: grid; gap: var(--space-4); }
.plans__head {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--ink-900); text-align: center; margin: 0;
}
/* 5つ並ぶので、幅に応じて折り返す。
   スマホでは1列、広い画面では3列くらいに落ちつく */
.plans__grid {
  display: grid; gap: var(--space-4); align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  list-style: none; margin: 0; padding: 0;
}
/* 5つあるので、自動まかせだと4列＋1列になって
   いちばん売りたいセットだけ取り残される。広い画面では3列に固定する */
@media (min-width: 860px) {
  .plans:not(.plans--compact) .plans__grid { grid-template-columns: repeat(3, 1fr); }
}
.plans__note {
  font-size: var(--fs-xs); color: var(--ink-500); text-align: center; margin: 0;
}

.plan {
  position: relative; padding: var(--space-5); border-radius: var(--r-lg);
  background: #fff; box-shadow: var(--sh-sm); border: 2px solid var(--border);
  display: grid; gap: var(--space-3); align-content: start; text-align: left;
}
.plan--pick {
  border-color: var(--rose-200);
  background: linear-gradient(180deg, #FFF7FA, #fff 45%);
  box-shadow: var(--sh-md);
}
.plan--mine { border-color: var(--mint-200); background: linear-gradient(180deg, #F2FCF8, #fff 45%); }
.plan--soon { opacity: .72; }

.plan__tag {
  justify-self: start; padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--grad-cta); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.plan__tag--mine { background: var(--mint-600); }
.plan__tag--soon { background: var(--ink-300); }

.plan__name { font-family: var(--font-display); font-size: var(--fs-md); color: var(--sky-700); margin: 0; }
.plan--pick .plan__name { color: var(--rose-600); }
.plan--mine .plan__name { color: var(--mint-600); }

.plan__price { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.plan__yen { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--ink-900); }
.plan__unit { font-size: var(--fs-xs); color: var(--ink-500); }

.plan__caps { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.plan__caps li { display: grid; gap: 1px; font-size: var(--fs-xs); }
.plan__caps strong { color: var(--ink-900); font-size: var(--fs-sm); }
.plan__caps span { color: var(--ink-500); line-height: 1.5; }
.plan__caps li.is-soon strong::after {
  content: '（準備中）'; color: var(--ink-300); font-size: var(--fs-xs); font-weight: 400;
}

.plan__btn {
  display: block; text-align: center; padding: 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700;
}
.plan__btn--mine { background: var(--mint-100); color: var(--mint-600); }
.plan__btn--soon { background: var(--surface-sunk); color: var(--ink-500); }

/* 壁に当たった人に見せる版。カードは2枚くらいなので、少し小さく */
.plans--compact .plan { padding: var(--space-4); }
.plans--compact .plan__yen { font-size: 1.8rem; }

/* ---------------------------------------------------------------
   13. FAQ
   --------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-sm);
  overflow: hidden; border: 1px solid var(--border);
}
.faq summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 18px var(--space-5); font-weight: 700; color: var(--ink-900);
  list-style: none; min-height: 60px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sky-100); color: var(--sky-700);
  font-family: var(--font-display); display: grid; place-items: center; font-size: 14px;
}
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: 12px; height: 12px;
  border-right: 3px solid var(--sky-400); border-bottom: 3px solid var(--sky-400);
  border-radius: 2px; transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__body { padding: 0 var(--space-5) 20px 74px; color: var(--ink-700); font-size: var(--fs-sm); }
.faq details[open] .faq__body { animation: fade-up var(--dur-slow) var(--ease-out) both; }

/* ---------------------------------------------------------------
   14. CTA バンド & フッター
   --------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  padding-block: var(--space-9);
  background: linear-gradient(135deg, #BFE4FF 0%, #D9D2FF 50%, #FFD6E5 100%);
}
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-5); justify-items: center; }
.cta-band h2 { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--ink-900); line-height: 1.25; }

.site-footer { background: linear-gradient(180deg,#2A73AF,#215C8D); color: #DCEBFA; padding-block: var(--space-8) var(--space-6); }
.site-footer a { color: #DCEBFA; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.footer-grid h4 { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: .12em; color: #fff; margin-bottom: var(--space-3); }
.footer-grid li + li { margin-top: 10px; }
.footer-grid a { font-size: var(--fs-sm); opacity: .9; }
.footer-bottom {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-xs); opacity: .8;
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-back);
}
.social-row a:hover { background: rgba(255,255,255,.28); transform: translateY(-3px); }

/* ---------------------------------------------------------------
   15. アプリ画面共通シェル
   --------------------------------------------------------------- */
.app-main { padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: var(--space-9); }
.app-layout { display: grid; grid-template-columns: 232px minmax(0,1fr) 300px; gap: var(--space-5); align-items: start; }
.app-layout--2 { grid-template-columns: 232px minmax(0,1fr); }

.side-nav { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px;
  border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-700);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.side-nav a svg { width: 22px; height: 22px; flex: none; }
.side-nav a:hover { background: rgba(255,255,255,.9); color: var(--sky-700); transform: translateX(3px); }
.side-nav a[aria-current="page"] { background: #fff; color: var(--sky-700); box-shadow: var(--sh-sm); }

.aside-stack { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-4); }
.panel { background: rgba(255,255,255,.86); border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--sh-sm); border: 1px solid rgba(255,255,255,.9); }
.panel__title { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-900); margin-bottom: var(--space-3); display: flex; align-items: center; gap: 8px; }

.page-head { display: grid; gap: 8px; margin-bottom: var(--space-5); }
.page-head h1 { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--ink-900); line-height: 1.25; }

/* ---------------------------------------------------------------
   16. デイリーログイン / スタンプ
   --------------------------------------------------------------- */
.daily {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #DCF0FF 0%, #EDE6FF 55%, #FFE3EE 100%);
  border-radius: var(--r-xl); padding: var(--space-5); box-shadow: var(--sh-md);
}
.daily__head { display: flex; align-items: center; gap: var(--space-4); position: relative; z-index: 1; flex-wrap: wrap; }
.daily__mascot { width: 78px; flex: none; display: block; animation: bob 4.4s var(--ease-soft) infinite; }
.daily__mascot svg { width: 100%; height: auto; display: block; }
.daily__streak { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-900); line-height: 1.3; }
.daily__claim { margin-left: auto; align-self: center; white-space: nowrap; }
@media (max-width: 620px) {
  .daily__head > div:not(.deco-layer) { flex: 1 1 180px; }
  .daily__mascot { width: 62px; }
  .daily__claim { flex: 1 1 100%; margin-left: 0; width: 100%; }
}
.daily__streak b { font-size: 1.7em; color: var(--rose-600); }
.stamp-row { display: flex; gap: 10px; margin-top: var(--space-4); position: relative; z-index: 1; flex-wrap: wrap; }
.stamp {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: rgba(255,255,255,.72); color: var(--ink-300);
  border: 2px dashed rgba(160,190,220,.7);
}
.stamp.is-done {
  background: #fff; border: 2px solid var(--sky-300); color: var(--sky-700);
  box-shadow: 0 4px 10px rgba(90,150,210,.22);
}
.stamp.is-done svg { width: 24px; height: 24px; }
.stamp.is-today {
  background: var(--grad-cta); color: #fff; border-color: transparent;
  animation: pulse-ring 2.4s var(--ease-soft) infinite;
}

/* ---------------------------------------------------------------
   17. タイムライン（つぶやき）
   --------------------------------------------------------------- */
.composer { background: #fff; border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--sh-sm); display: grid; gap: var(--space-3); }
.composer__row { display: flex; gap: 12px; align-items: flex-start; }
.composer textarea {
  flex: 1; min-height: 64px; resize: vertical; border: 2px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; font: inherit; font-size: var(--fs-base);
  color: var(--ink-900); background: var(--surface-soft);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.composer textarea::placeholder { color: var(--ink-300); }
.composer textarea:focus { outline: none; border-color: var(--sky-300); background: #fff; box-shadow: 0 0 0 4px rgba(165,216,255,.35); }
.composer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.composer__tools { display: flex; gap: 4px; }
.char-count { font-size: var(--fs-xs); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.char-count.is-over { color: var(--color-danger); font-weight: 700; }

.post {
  background: #fff; border-radius: var(--r-lg); padding: var(--space-4);
  box-shadow: var(--sh-sm); display: grid; gap: 12px;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.post:hover { box-shadow: var(--sh-md); }
.post__head { display: flex; align-items: center; gap: 12px; }
.post__meta { display: grid; line-height: 1.4; min-width: 0; }
.post__name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.post__handle { font-size: var(--fs-xs); color: var(--ink-500); }
.post__body { font-size: var(--fs-base); color: var(--ink-900); white-space: pre-wrap; word-break: break-word; }
.post__body .tag { color: var(--sky-600); font-weight: 700; }
.post__media { border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunk); }
.post__actions { display: flex; gap: var(--space-2); margin-top: 2px; }
.act {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border: none; background: transparent; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.act svg { width: 19px; height: 19px; transition: transform var(--dur-base) var(--ease-back); }
.act:hover { background: var(--sky-50); color: var(--sky-700); }
.act--like:hover { background: var(--rose-50); color: var(--rose-600); }
.act--like.is-on { color: var(--rose-600); }
.act--like.is-on svg { fill: currentColor; animation: pop 420ms var(--ease-back); }

/* 音声ポスト */
.audio-post { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: linear-gradient(120deg,#EAF6FF,#F6F0FF); }
.audio-post__play { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--grad-blue); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px rgba(42,115,175,.28); }
.wavebars { display: flex; align-items: flex-end; gap: 3px; height: 32px; flex: 1; }
.wavebars i { flex: 1; background: var(--sky-300); border-radius: 2px; min-height: 4px; animation: wave 1.2s var(--ease-soft) infinite; }

/* タブ */
.tabs { display: flex; gap: 4px; background: rgba(255,255,255,.7); padding: 5px; border-radius: var(--r-pill); box-shadow: var(--sh-xs); width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs button,
.tabs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 20px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); color: var(--ink-500);
  white-space: nowrap; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tabs a:hover { color: var(--sky-700); }
.tabs button[aria-selected="true"],
.tabs a[aria-selected="true"] { background: #fff; color: var(--sky-700); box-shadow: var(--sh-sm); }

/* ---------------------------------------------------------------
   18. 練習記録 / 上達グラフ
   --------------------------------------------------------------- */
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.metric { background: #fff; border-radius: var(--r-lg); padding: var(--space-4); box-shadow: var(--sh-sm); display: grid; gap: 6px; }
.metric__label { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; letter-spacing: .04em; }
.metric__value { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); color: var(--ink-900); line-height: 1; }
.metric__value small { font-size: .5em; color: var(--ink-500); margin-left: 3px; }
.metric__delta { font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.metric__delta.up { color: var(--mint-600); }
.metric__delta.down { color: var(--rose-600); }

.chart-card { background: #fff; border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--sh-sm); }
.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-500); }
.chart-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* 棒グラフ（週間練習時間） */
.bars { display: flex; align-items: flex-end; gap: clamp(6px,1.6vw,16px); height: 190px; padding-top: var(--space-4); }
.bars__col { flex: 1; display: grid; justify-items: center; gap: 8px; height: 100%; grid-template-rows: 1fr auto; }
.bars__bar {
  width: 100%; max-width: 42px; border-radius: 10px 10px 6px 6px; align-self: end;
  background: var(--grad-blue); position: relative;
  height: var(--h, 20%);
  transform-origin: bottom;
  transition: transform 900ms var(--ease-back);
}
.js .bars__bar { transform: scaleY(0); }
.is-revealed .bars__bar { transform: scaleY(1); }
.bars__col--today .bars__bar { background: var(--grad-cta); }
.bars__bar::after {
  content: attr(data-value); position: absolute; inset: auto 0 calc(100% + 6px) 0;
  font-size: 11px; font-weight: 700; color: var(--ink-500); text-align: center;
}
.bars__label { font-size: var(--fs-xs); color: var(--ink-500); }

/* 折れ線（音域の伸び）はSVGで描画 */
.line-chart svg { width: 100%; height: auto; overflow: visible; }
.line-path { transition: stroke-dashoffset 1600ms var(--ease-out); }
.js .line-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.is-revealed .line-path { stroke-dashoffset: 0; }
.line-dot { transition: opacity 300ms var(--ease-out); }
.js .line-dot { opacity: 0; }
.is-revealed .line-dot { opacity: 1; }
.line-area { transition: opacity 900ms var(--ease-out) 400ms; }
.js .line-area { opacity: 0; }
.is-revealed .line-area { opacity: 1; }

/* 音域レンジバー */
.range-row { display: grid; grid-template-columns: 62px 1fr 76px; align-items: center; gap: 12px; }
.range-track { height: 14px; border-radius: var(--r-pill); background: var(--surface-sunk); overflow: hidden; }
.range-fill {
  height: 100%; border-radius: var(--r-pill); background: var(--grad-candy);
  width: var(--w, 50%); transform-origin: left;
  transition: transform 1100ms var(--ease-out);
}
.js .range-fill { transform: scaleX(0); }
.is-revealed .range-fill { transform: scaleX(1); }

/* 進捗リング */
.ring { position: relative; width: 132px; height: 132px; margin-inline: auto; }
.ring svg { transform: rotate(-90deg); }
.ring__bar { stroke-dasharray: 339.3; transition: stroke-dashoffset 1400ms var(--ease-out); }
.js .ring__bar { stroke-dashoffset: 339.3; }
.is-revealed .ring__bar { stroke-dashoffset: var(--offset, 100); }
.ring__label {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px;
}
.ring__label b { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink-900); line-height: 1; }
.ring__label span { font-size: var(--fs-xs); color: var(--ink-500); }

/* バッジコレクション */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: var(--space-3); }
.badge-item { text-align: center; display: grid; gap: 8px; justify-items: center; }
.badge-item__icon {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-candy); box-shadow: var(--sh-sm); color: #fff;
  transition: transform var(--dur-base) var(--ease-back);
}
.badge-item:hover .badge-item__icon { transform: translateY(-4px) rotate(-6deg); }
.badge-item.is-locked .badge-item__icon { background: var(--ink-100); color: var(--ink-300); box-shadow: none; }
.badge-item span { font-size: 11px; font-weight: 700; color: var(--ink-700); line-height: 1.4; }
.badge-item.is-locked span { color: var(--ink-300); }

/* ---------------------------------------------------------------
   19. ひろば（募集・情報交換）
   --------------------------------------------------------------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chip {
  min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 2px solid var(--border); background: #fff; color: var(--ink-700);
  font-size: var(--fs-sm); font-weight: 700;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--sky-300); color: var(--sky-700); }
.chip[aria-pressed="true"] { background: var(--grad-blue); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(42,115,175,.25); }
/* チェックボックスを内包する label 版（WordPress の練習記録フォーム） */
label.chip { display: inline-flex; align-items: center; gap: 8px; }
label.chip:has(input:checked) {
  background: var(--grad-blue); border-color: transparent; color: #fff;
  box-shadow: 0 6px 14px rgba(42,115,175,.25);
}
label.chip:focus-within { outline: 3px solid var(--color-ring); outline-offset: 3px; }
label.chip input { width: 18px; height: 18px; accent-color: var(--sky-700); }

.recruit-card { display: grid; gap: var(--space-3); }
.recruit-card__top { display: flex; gap: 12px; align-items: flex-start; }
.recruit-card__title { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-900); line-height: 1.5; }
.recruit-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.recruit-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-500); }
.recruit-meta span { display: inline-flex; align-items: center; gap: 5px; }
.recruit-meta svg { width: 15px; height: 15px; color: var(--sky-400); }

/* なかまをさがす */
.member-search { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.member-search__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.member-search__field { position: relative; flex: 1 1 220px; display: block; }
.member-search__field svg {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  color: var(--ink-300); pointer-events: none;
}
.member-search__field .field { padding-left: 42px; }
.member-search__group { display: grid; gap: 8px; }
.member-search .chip { text-decoration: none; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.member-card { display: grid; gap: 12px; align-content: start; }
.member-card__head { display: flex; align-items: center; gap: 12px; color: inherit; }
.member-card__head:hover { color: var(--sky-700); }
.member-card__head .avatar { flex: none; }
.member-card__name { display: grid; line-height: 1.4; min-width: 0; }
.member-card__name strong { font-size: var(--fs-sm); color: var(--ink-900); }
.member-card__name span { font-size: var(--fs-xs); }
.member-card__bio {
  font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.member-card__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.member-card__foot .btn { flex: 1 1 auto; padding-inline: 12px; }
.member-card__foot .btn--soft { flex: 0 1 auto; }

@media (max-width: 560px) {
  .member-grid { grid-template-columns: 1fr; }
}

.thread-item { display: flex; gap: 12px; padding: var(--space-3) 0; border-bottom: 1px dashed var(--border); }
.thread-item:last-child { border-bottom: none; }
.thread-item__title { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
.thread-item__meta { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 3px; }

/* ---------------------------------------------------------------
   20. ボイトレ動画（有料会員）
   --------------------------------------------------------------- */
.lesson-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.lesson-card { position: relative; overflow: hidden; padding: 0; }
.lesson-card__thumb { position: relative; aspect-ratio: 16/10; background: var(--grad-candy); overflow: hidden; }
.lesson-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.lesson-card:hover .lesson-card__thumb img { transform: scale(1.06); }
.lesson-card__body { padding: var(--space-4); display: grid; gap: 8px; }
.lesson-card__title { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); line-height: 1.5; }
.lesson-card__meta { display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--ink-500); flex-wrap: wrap; }
.lesson-card__play {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--sky-700);
  box-shadow: var(--sh-md); transition: transform var(--dur-base) var(--ease-back);
}
.lesson-card:hover .lesson-card__play { transform: scale(1.1); }
.lesson-card__time {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(46,61,87,.72); color: #fff; font-size: 11px; font-weight: 700;
}

/* ロック表現 */
.lesson-card.is-locked .lesson-card__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,115,175,.30), rgba(46,61,87,.62));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.lock-overlay {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  gap: 8px; text-align: center; color: #fff; padding: var(--space-3);
}
.lock-overlay__icon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.6);
  animation: bob 4s var(--ease-soft) infinite;
}
.lock-overlay__text { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.lock-overlay__cta {
  margin-top: 4px; padding: 7px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.94); color: var(--rose-700);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; box-shadow: var(--sh-sm);
  transition: transform var(--dur-base) var(--ease-back);
}
.lesson-card:hover .lock-overlay__cta { transform: translateY(-2px) scale(1.04); }

/* ---------------------------------------------------------------
   記録したあとの、ほめ言葉
   --------------------------------------------------------------- */
.praise {
  position: relative; overflow: hidden;
  margin-bottom: var(--space-4);
  border-radius: var(--r-lg); padding: var(--space-5);
  background: linear-gradient(135deg, #EAFBF5 0%, #F2F8FF 55%, #FFF3F8 100%);
  box-shadow: var(--sh-sm); display: grid; gap: var(--space-4);
}
/* 自己ベストを出した日だけ、色を変えて特別あつかいする */
.praise--record_high, .praise--record_low {
  background: linear-gradient(135deg, #FFF4D6 0%, #FFF0F6 55%, #F3EEFF 100%);
}
.praise--comeback { background: linear-gradient(135deg, #F3EEFF 0%, #F2F8FF 60%, #EAFBF5 100%); }

.praise__top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; }
.praise__face { flex: none; }
.praise__head {
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3;
  color: var(--ink-900); margin: 0 0 4px;
}
.praise__body { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.7; margin: 0; }
.praise__pt {
  flex: none; align-self: center; white-space: nowrap;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--mint-100); color: var(--mint-600);
  font-size: var(--fs-xs); font-weight: 700;
}

.praise__next {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
}
.praise__next-label {
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--sky-600); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.praise__next-text { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); margin: 0; }
.praise__next-sub { font-size: var(--fs-xs); color: var(--ink-500); margin: 2px 0 0; line-height: 1.6; }

/* せまい画面では +20pt が入りきらないので、本文の下に回す。
   行間があくと浮いて見えるので、row-gap だけ詰める */
@media (max-width: 480px) {
  .praise__top { grid-template-columns: auto 1fr; row-gap: 8px; }
  .praise__pt { grid-column: 2; justify-self: start; }
}

.upsell {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg,#FFE7F0 0%, #F0E7FF 50%, #E1F1FF 100%);
  border-radius: var(--r-xl); padding: var(--space-7) var(--space-5);
  box-shadow: var(--sh-md); display: grid; gap: var(--space-4); justify-items: center;
}
.upsell h3 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-900); line-height: 1.35; }

/* フォローボタン */
.follow-btn { min-width: 96px; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out); }
.follow-btn[aria-pressed="true"]:hover {
  color: var(--rose-700);
  box-shadow: inset 0 0 0 2px var(--rose-200), var(--sh-sm);
}
.follow-btn[disabled] { opacity: .6; pointer-events: none; }

/* フォロー中／フォロワーの件数 */
.follow-stats { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.follow-stats a { color: var(--ink-700); font-size: var(--fs-sm); }
.follow-stats a:hover { color: var(--sky-700); }
.follow-stats strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-900); margin-right: 4px; }

/* スクール（外部サイト）への案内 */
.school-note {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(120deg, #FFFFFF, #F4F0FF);
  border: 2px solid var(--lav-200); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); color: var(--ink-900); text-align: left;
  transition: transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.school-note:hover {
  transform: translateY(-4px); box-shadow: var(--sh-md);
  border-color: var(--lav-300); color: var(--ink-900);
}
.school-note__icon {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #A98CE8, #7C5CC4);
  box-shadow: 0 6px 14px rgba(124,92,196,.28);
}
.school-note__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.school-note__body strong { font-family: var(--font-display); font-size: var(--fs-base); line-height: 1.5; }
.school-note__body span { font-size: var(--fs-sm); color: var(--ink-500); }
.school-note__go {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--lav-500); white-space: nowrap;
}
.school-note__go svg { transition: transform var(--dur-base) var(--ease-back); }
.school-note:hover .school-note__go svg { transform: translate(2px,-2px); }

@media (max-width: 620px) {
  .school-note { flex-wrap: wrap; padding: var(--space-4); }
  .school-note__go { width: 100%; justify-content: flex-end; }
}

/* 動画プレイヤー枠 */
.player { border-radius: var(--r-lg); overflow: hidden; background: #16233A; box-shadow: var(--sh-lg); position: relative; aspect-ratio: 16/9; }
.player img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.player__ui { position: absolute; inset: auto 0 0 0; padding: var(--space-4); background: linear-gradient(180deg, transparent, rgba(10,20,35,.8)); display: grid; gap: 10px; }
.player__scrub { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.player__scrub i { display: block; height: 100%; width: 38%; background: var(--grad-cta); border-radius: 3px; }
.player__row { display: flex; align-items: center; gap: 12px; color: #fff; font-size: var(--fs-xs); }

/* ---------------------------------------------------------------
   21. マイページ
   --------------------------------------------------------------- */
.profile-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(135deg,#CFEAFF,#E9E0FF 55%,#FFDCE9);
  padding: var(--space-6); box-shadow: var(--sh-md);
}
.profile-hero__row { display: flex; gap: var(--space-4); align-items: center; position: relative; z-index: 1; flex-wrap: wrap; }
.profile-hero__name { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-900); line-height: 1.3; }
.profile-hero__handle { color: var(--ink-500); font-size: var(--fs-sm); }
.level-bar { height: 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.7); overflow: hidden; }
.level-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-blue); width: var(--w,40%); transform-origin: left; transition: transform 1200ms var(--ease-out); }
.js .level-bar i { transform: scaleX(0); }
.is-revealed .level-bar i { transform: scaleX(1); }

.member-status {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--r-lg); background: linear-gradient(120deg,#FFF3F8,#F4ECFF);
  border: 2px solid var(--rose-200);
}

/* ---------------------------------------------------------------
   21b. モーダル（通報など）
   --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--space-4);
  background: rgba(46,61,87,.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal__panel {
  width: min(100%, 460px); max-height: min(88vh, 720px); overflow-y: auto;
  background: var(--grad-card); border-radius: var(--r-xl);
  padding: var(--space-5); box-shadow: var(--sh-xl);
  transform: translateY(18px) scale(.96);
  transition: transform var(--dur-slow) var(--ease-back);
}
.modal.is-open .modal__panel { transform: none; }

.report-reasons { display: grid; gap: 8px; }
.report-reason {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
  border: 2px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-soft); cursor: pointer; font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.report-reason:hover { border-color: var(--sky-300); background: #fff; }
.report-reason input { width: 20px; height: 20px; accent-color: var(--rose-500); flex: none; }
.report-reason:has(input:checked) { border-color: var(--rose-300); background: var(--rose-50); }
.report-reason:has(input:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 2px; }

/* チェックボックスをチップの形で並べる（パート・エリアの選択） */
.check-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--r-pill);
  background: #fff; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.check-chip:hover { border-color: var(--sky-300); color: var(--sky-700); }
.check-chip input { width: 18px; height: 18px; accent-color: var(--sky-500); cursor: pointer; }
.check-chip:has(input:checked) { border-color: var(--sky-400); background: var(--sky-50); color: var(--sky-800); }
.check-chip:has(input:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 2px; }

/* 送信後などのお知らせ帯 */
.notice-card {
  padding: 14px 18px; border-radius: var(--r-md); margin-bottom: var(--space-4);
  font-size: var(--fs-sm); font-weight: 700; border: 2px solid transparent;
  animation: fade-up var(--dur-slow) var(--ease-out) both;
}
.notice-card--mint  { background: var(--mint-100); color: var(--mint-600); border-color: var(--mint-200); }
.notice-card--lemon { background: var(--lemon-100); color: var(--lemon-600); border-color: var(--lemon-200); }
.notice-card--lav   { background: var(--lav-100); color: var(--lav-500); border-color: var(--lav-200); }
.notice-card--rose  { background: var(--rose-100); color: var(--rose-700); border-color: var(--rose-200); }

.report-done { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding: var(--space-4) 0; }
.report-done__msg { font-size: var(--fs-base); color: var(--ink-900); font-weight: 700; }
.report-help {
  display: grid; gap: 12px; justify-items: center;
  padding: var(--space-4); border-radius: var(--r-md);
  background: linear-gradient(120deg,#FFF4F8,#F3EEFF); width: 100%;
}
.act--report:hover { background: var(--rose-50); color: var(--rose-600); }

/* ---------------------------------------------------------------
   21c. 雲キャラクターの進化
   --------------------------------------------------------------- */
.mascot { display: block; overflow: visible; }
.mascot__aura { animation: aura-pulse 4.5s var(--ease-soft) infinite; transform-origin: center; }
.mascot__wings { animation: wing-flap 3.2s var(--ease-soft) infinite; transform-origin: 130px 130px; }
.mascot__crown { animation: bob 4s var(--ease-soft) infinite; transform-origin: center; }
.mascot__notes { animation: float-slow 6s var(--ease-soft) infinite; }
.mascot__sparkles { animation: twinkle 3s ease-in-out infinite; transform-origin: center; }

/* 「あなたの雲」カード */
.mascot-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-6); border-radius: var(--r-xl);
  background: linear-gradient(135deg, #E4F2FF 0%, #EFE8FF 55%, #FFE6F0 100%);
  box-shadow: var(--sh-md);
}
.mascot-card__art { position: relative; z-index: 1; flex: none; margin-inline: auto; }
.mascot-card__art .mascot { animation: bob 5s var(--ease-soft) infinite; filter: drop-shadow(0 16px 22px rgba(90,150,210,.22)); }
.mascot-card__body { position: relative; z-index: 1; flex: 1 1 240px; min-width: 0; }
.mascot-card__name { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-900); line-height: 1.3; margin: 4px 0 6px; }
.mascot-card__next { margin-top: var(--space-4); }

/* 進化の段階ドット */
.stage-track { display: flex; align-items: center; gap: 8px; margin-top: var(--space-4); }
.stage-track__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 2px rgba(160,190,220,.6);
}
.stage-track__dot.is-done { background: var(--sky-400); box-shadow: none; }
.stage-track__dot.is-now {
  width: 18px; height: 18px; background: var(--grad-cta); box-shadow: 0 0 0 4px rgba(206,58,110,.16);
  animation: pulse-ring 2.6s var(--ease-soft) infinite;
}

/* 進化のお祝い */
.modal--evolve .modal__panel {
  text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF 0%, #F2F7FF 45%, #FFF0F7 100%);
  display: grid; gap: var(--space-3); justify-items: center;
}
.evolve__eyebrow {
  font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
  color: var(--rose-600); font-weight: 600;
}
.evolve__art { position: relative; z-index: 1; }
.evolve__name { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--ink-900); line-height: 1.2; }
.evolve__gain { font-size: var(--fs-base); color: var(--ink-700); }
.mascot--evolving { animation: evolve-pop 900ms var(--ease-back) both; }

/* 放射状にはじける光 */
.evolve__burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.evolve__burst span {
  position: absolute; top: 34%; left: 50%; width: 6px; height: 26px; border-radius: 3px;
  background: linear-gradient(180deg, var(--lemon-300), transparent);
  transform-origin: 50% 0;
  transform: rotate(calc(var(--i) * 30deg)) translateY(60px) scaleY(0);
  animation: burst 1100ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 40ms + 220ms);
}
.evolve__burst span:nth-child(even) { background: linear-gradient(180deg, var(--rose-300), transparent); }

@keyframes evolve-pop {
  0%   { transform: scale(.3) rotate(-12deg); opacity: 0 }
  55%  { transform: scale(1.14) rotate(4deg); opacity: 1 }
  100% { transform: none; opacity: 1 }
}
@keyframes burst {
  0%   { transform: rotate(calc(var(--i) * 30deg)) translateY(40px) scaleY(0); opacity: 0 }
  35%  { opacity: 1 }
  100% { transform: rotate(calc(var(--i) * 30deg)) translateY(120px) scaleY(1); opacity: 0 }
}
@keyframes aura-pulse {
  0%,100% { transform: scale(.94); opacity: .7 }
  50%     { transform: scale(1.06); opacity: 1 }
}
@keyframes wing-flap {
  0%,100% { transform: scaleX(1) }
  50%     { transform: scaleX(.88) }
}

@media (max-width: 620px) {
  .mascot-card { padding: var(--space-5); gap: var(--space-4); text-align: center; }
  .mascot-card__body { text-align: left; }
  .stage-track { justify-content: flex-start; }
}

/* ---------------------------------------------------------------
   21d. BuddyPress の画面をテーマになじませる
   （通知・メッセージ・プロフィール編集などは BP 側のマークアップ）
   --------------------------------------------------------------- */
.lillamyu-bp { font-size: var(--fs-sm); }
.lillamyu-bp a { color: var(--sky-700); }

/* BPのサブナビをピル型タブに */
.lillamyu-bp .bp-navs ul,
.lillamyu-bp .bp-subnavs ul {
  display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 var(--space-4); padding: 5px;
  background: var(--surface-sunk); border-radius: var(--r-pill); width: fit-content; max-width: 100%;
}
.lillamyu-bp .bp-navs li a,
.lillamyu-bp .bp-subnavs li a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  font-weight: 700; color: var(--ink-500); text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lillamyu-bp .bp-navs li a:hover { color: var(--sky-700); }
.lillamyu-bp .bp-navs li.current a,
.lillamyu-bp .bp-navs li.selected a,
.lillamyu-bp .bp-subnavs li.current a,
.lillamyu-bp .bp-subnavs li.selected a {
  background: #fff; color: var(--sky-700); box-shadow: var(--sh-sm);
}
.lillamyu-bp .bp-navs li a span,
.lillamyu-bp .bp-subnavs li a span {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--rose-600); color: #fff; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 一覧テーブル（通知・メッセージ） */
.lillamyu-bp table { width: 100%; border-collapse: collapse; }
.lillamyu-bp th,
.lillamyu-bp td { padding: 14px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lillamyu-bp thead th { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; }
.lillamyu-bp tbody tr:hover { background: var(--sky-50); }
.lillamyu-bp tr.unread,
.lillamyu-bp tr.bp-unread { background: linear-gradient(90deg, var(--rose-50), transparent); }
.lillamyu-bp tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--rose-400); }

/* ボタン・フォーム */
.lillamyu-bp .button,
.lillamyu-bp button:not(.icon-btn):not(.btn),
.lillamyu-bp input[type="submit"],
.lillamyu-bp input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: none; cursor: pointer;
  border-radius: var(--r-pill); background: var(--sky-100); color: var(--sky-800);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-back), background var(--dur-base) var(--ease-out);
}
.lillamyu-bp .button:hover,
.lillamyu-bp button:not(.icon-btn):not(.btn):hover,
.lillamyu-bp input[type="submit"]:hover { background: var(--sky-200); transform: translateY(-2px); }

.lillamyu-bp input[type="text"],
.lillamyu-bp input[type="email"],
.lillamyu-bp input[type="password"],
.lillamyu-bp input[type="search"],
.lillamyu-bp input[type="url"],
.lillamyu-bp select,
.lillamyu-bp textarea {
  width: 100%; min-height: 52px; border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; font: inherit; color: var(--ink-900); background: var(--surface-soft);
}
.lillamyu-bp textarea { min-height: 96px; }
.lillamyu-bp input:focus,
.lillamyu-bp select:focus,
.lillamyu-bp textarea:focus {
  outline: none; border-color: var(--sky-300); background: #fff;
  box-shadow: 0 0 0 4px rgba(165,216,255,.4);
}
.lillamyu-bp label { font-weight: 700; font-size: var(--fs-sm); display: inline-block; margin-bottom: 6px; }

/* BPのお知らせ帯 */
.lillamyu-bp .bp-feedback,
.lillamyu-bp #message {
  padding: 14px 18px; border-radius: var(--r-md); margin-bottom: var(--space-4);
  background: var(--sky-50); border: 2px solid var(--border); font-weight: 700;
}
.lillamyu-bp .bp-feedback.success,
.lillamyu-bp #message.updated { background: var(--mint-100); border-color: var(--mint-200); color: var(--mint-600); }
.lillamyu-bp .bp-feedback.error,
.lillamyu-bp #message.error { background: var(--rose-100); border-color: var(--rose-200); color: var(--rose-700); }

/* アバター */
.lillamyu-bp img.avatar { border-radius: 50%; }

/* ページ送り */
.lillamyu-bp .pagination,
.lillamyu-bp .pag-count { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--ink-500); }
.lillamyu-bp .pagination-links a,
.lillamyu-bp .pagination-links span {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px;
  border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh-xs); margin-left: 4px;
}
.lillamyu-bp .pagination-links span.current { background: var(--grad-blue); color: #fff; }

@media (max-width: 620px) {
  .lillamyu-bp table,
  .lillamyu-bp thead,
  .lillamyu-bp tbody,
  .lillamyu-bp tr,
  .lillamyu-bp td { display: block; width: 100%; }
  .lillamyu-bp thead { display: none; }
  .lillamyu-bp tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
  .lillamyu-bp td { border: none; padding: 4px 0; }
}

/* ---------------------------------------------------------------
   21e. はじめの一歩チェックリスト
   --------------------------------------------------------------- */
.onboarding {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--space-5);
  background: linear-gradient(135deg, #E8F5FF 0%, #F1ECFF 55%, #FFEFF6 100%);
  box-shadow: var(--sh-md);
}
.onboarding__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; position: relative; z-index: 1; }
.onboarding__mascot { width: 72px; flex: none; display: block; animation: bob 4.6s var(--ease-soft) infinite; }
.onboarding__mascot svg { width: 100%; height: auto; display: block; }
.onboarding__title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-900); line-height: 1.3; margin: 2px 0 4px; }
.onboarding__progress { margin-top: var(--space-4); position: relative; z-index: 1; }

.onboarding__list { margin-top: var(--space-4); display: grid; gap: 10px; position: relative; z-index: 1; list-style: none; padding: 0; }
.onboarding__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(255,255,255,.86); box-shadow: var(--sh-xs);
  transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.onboarding__item.is-done { opacity: .62; }
.onboarding__check {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px dashed rgba(160,190,220,.8); color: transparent;
}
.onboarding__item.is-done .onboarding__check {
  border: none; background: var(--grad-blue); color: #fff;
  animation: pop 420ms var(--ease-back);
}
.onboarding__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.onboarding__body strong { font-size: var(--fs-sm); color: var(--ink-900); }
.onboarding__item.is-done .onboarding__body strong { text-decoration: line-through; }
.onboarding__body span { font-size: var(--fs-xs); }

@media (max-width: 620px) {
  .onboarding__item { flex-wrap: wrap; }
  .onboarding__item .btn { width: 100%; }
}

/* ---------------------------------------------------------------
   22. Toast / 空状態 / スケルトン
   --------------------------------------------------------------- */
.toast-wrap { position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + 20px); translate: -50% 0; z-index: var(--z-toast); display: grid; gap: 10px; width: min(92vw, 420px); }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: var(--r-pill); background: rgba(46,61,87,.94); color: #fff;
  box-shadow: var(--sh-lg); font-size: var(--fs-sm); font-weight: 700;
  animation: toast-in 420ms var(--ease-back) both;
}
.toast.is-out { animation: toast-out 300ms var(--ease-out) both; }
.toast svg { flex: none; color: var(--sky-300); }

.empty { text-align: center; display: grid; gap: var(--space-3); justify-items: center; padding: var(--space-7) var(--space-4); color: var(--ink-500); }
.empty img { width: 120px; opacity: .9; }

.skeleton { background: linear-gradient(90deg,#EFF6FE 25%,#F8FBFF 37%,#EFF6FE 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------
   22b. WordPress の本文（entry-content）
   --------------------------------------------------------------- */
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 {
  font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-900);
  line-height: 1.4; margin-top: var(--space-6); padding-left: 14px; border-left: 6px solid var(--sky-300);
}
.entry-content h3 { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--sky-700); margin-top: var(--space-5); }
.entry-content h4 { font-weight: 700; color: var(--ink-900); margin-top: var(--space-5); }
.entry-content p { color: var(--ink-700); }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; color: var(--ink-700); }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 6px; }
.entry-content img, .entry-content .wp-block-image img { border-radius: var(--r-md); }
.entry-content blockquote {
  padding: var(--space-4); border-radius: var(--r-md);
  background: var(--surface-sunk); border-left: 6px solid var(--sky-300); color: var(--ink-700);
}
.entry-content code {
  padding: 2px 6px; border-radius: 6px; background: var(--surface-sunk);
  font-size: .9em; color: var(--sky-800);
}
.entry-content hr { border: none; border-top: 2px dashed var(--border); margin-block: var(--space-6); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }

/* ページネーション */
.pagination, .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.page-numbers {
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink-700); font-weight: 700; box-shadow: var(--sh-xs);
  transition: transform var(--dur-fast) var(--ease-back), box-shadow var(--dur-fast) var(--ease-out);
}
.page-numbers:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); color: var(--sky-700); }
.page-numbers.current { background: var(--grad-blue); color: #fff; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------
   23. Reveal（スクロール出現）
   --------------------------------------------------------------- */
/* 初期状態（非表示）は .js が付いているときだけ適用します。
   JSが読み込めなかった環境では、中身が最初から見えたままになります。 */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
  /* will-change はここに書かない。出番を待っている要素ぜんぶが
     GPUの層を持ってしまい、数が増えるほどスクロールが重くなる */
}
.js [data-reveal="scale"] { transform: translateY(18px) scale(.94); }
.js [data-reveal="left"]  { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   24. Keyframes
   --------------------------------------------------------------- */
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes drift { from { transform: translateX(-12%) } to { transform: translateX(115vw) } }
@keyframes drift-r { from { transform: translateX(0) } to { transform: translateX(-118vw) } }
@keyframes twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: .55 } 50% { transform: scale(1.22) rotate(14deg); opacity: 1 } }
@keyframes cue { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0 } 40% { opacity: 1 } 100% { transform: scaleY(1); transform-origin: top; opacity: 0 } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(1) } 45% { transform: scale(1.42) } 100% { transform: scale(1) } }
@keyframes pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(206,58,110,.42) } 50% { box-shadow: 0 0 0 10px rgba(206,58,110,0) } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
@keyframes wave { 0%,100% { height: 22% } 50% { height: 100% } }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px) scale(.96) } }
@keyframes draw-line { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes float-slow { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-18px) rotate(5deg) } }

.float-slow { animation: float-slow 7s var(--ease-soft) infinite; }

/* ---------------------------------------------------------------
   25. Responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .app-layout { grid-template-columns: 200px minmax(0,1fr); }
  .app-layout .aside-stack { display: none; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 60px; }
  /* ログインは残します。しまい込むと、戻ってきた人が入り口を見失うためです */
  .nav { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .feature-row--reverse .feature-row__media { order: 0; }
  .feature-row + .feature-row { margin-top: var(--space-8); }
  .feature-row__body { justify-items: center; text-align: center; }
  .feature-list li { text-align: left; }
  .plan-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .app-layout, .app-layout--2 { grid-template-columns: minmax(0,1fr); }
  .side-nav { display: none; }
  .bottom-nav { display: flex; }
  .app-main { padding-bottom: calc(var(--bottomnav-h) + var(--space-7)); }
  .section { padding-block: var(--space-8); }
  .metric-grid { grid-template-columns: 1fr; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mock--phone { width: min(280px, 84%); }
}
@media (max-width: 560px) {
  /* ヘッダー：ロゴ＋CTA＋アイコン3つが1行に収まるように詰める */
  .site-header__inner { gap: 6px; width: calc(100% - 20px); }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 1.02rem; }
  .brand__sub { display: none; }
  .header-cta { gap: 4px; }
  .header-cta .btn--primary { min-height: 40px; padding: 0 11px; }
  /* 枠を外して文字だけにし、「はじめる」と場所を取り合わないようにします */
  .header-cta .btn--ghost {
    min-height: 40px; padding: 0 6px;
    border: 0; background: none; box-shadow: none;
    font-size: var(--fs-xs); color: var(--sky-700);
  }
  .header-cta .btn--ghost:hover { background: none; text-decoration: underline; }
  .header-cta .btn__label { display: none; }
  /* いちばん小さい端末（iPhone SE の 320px）でも4つ並ぶように詰めます */
  @media (max-width: 360px) {
    .brand__name { font-size: .95rem; }
    .header-cta { gap: 2px; }
    .header-cta .btn--primary { padding: 0 12px; }
    /* 「はじめる」の文字だけで伝わるので、＋は畳みます */
    .header-cta .btn--primary svg { display: none; }
    .header-cta .btn--ghost { padding: 0 4px; }
  }
  .header-cta .btn--primary svg { margin: 0; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn svg { width: 22px; height: 22px; }
  .header-cta .avatar--sm { width: 32px; height: 32px; font-size: .8rem; }

  .wrap, .wrap-narrow { width: calc(100% - 32px); }
  .hero__actions .btn { width: 100%; }
  .hero__meta { gap: var(--space-4); }
  .lesson-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .faq__body { padding-left: var(--space-5); }
  .stamp { width: 40px; height: 40px; }
  .card { padding: var(--space-4); }
}

/* ---------------------------------------------------------------
   26. Motion / Contrast の配慮
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .bars__bar, .range-fill, .level-bar i { transform: none !important; }
  .line-path { stroke-dashoffset: 0 !important; }
  .line-dot, .line-area { opacity: 1 !important; }
  .ring__bar { stroke-dashoffset: var(--offset,100) !important; }
}
/* 小さめのスマホでも、7日ぶんのスタンプを1行に収める */
@media (max-width: 400px) {
  .stamp-row { gap: 6px; }
  .stamp { width: 36px; height: 36px; }
  .stamp.is-done svg { width: 20px; height: 20px; }
}

@media print {
  .site-header, .bottom-nav, .deco-layer, .drawer { display: none !important; }
  body { background: #fff; }
}

/* ブロックボタン */
.block-btn { min-width: 92px; }
.block-btn.is-blocked {
  color: var(--rose-700);
  box-shadow: inset 0 0 0 2px var(--rose-200), var(--sh-sm);
}
.block-btn.is-blocked:hover { color: var(--sky-700); box-shadow: inset 0 0 0 2px var(--sky-200), var(--sh-sm); }

/* 投稿者（アイコン・名前）からプロフィールへ */
.post__avatar {
  display: block; flex: none; border-radius: 50%; position: relative;
  transition: transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out);
}
/* アイコンが36pxでも指で押せるよう、当たり判定だけ44pxに広げる（見た目は変えない） */
.post__avatar::after {
  content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: max(100%, 44px); height: max(100%, 44px); border-radius: 50%;
}
.post__avatar:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(90,150,210,.28); }
.post__avatar:active { transform: scale(.96); }
.post__avatar:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.post__namelink { color: inherit; }
.post__namelink:hover { color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px; }

/* 特商法などの「項目／内容」の表
   ラッパー込みのセレクタにしているのは .entry-content table より詳細度を上げるため */
.legal-table-wrap { overflow-x: auto; }
.legal-table-wrap .legal-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-sm); margin-top: var(--space-4);
}
.legal-table-wrap .legal-table th,
.legal-table-wrap .legal-table td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.legal-table-wrap .legal-table th {
  width: 34%; color: var(--sky-800); font-weight: 700;
  background: var(--surface-sunk); border-radius: 8px 0 0 8px;
}
.legal-table-wrap .legal-table td { color: var(--ink-700); }
.legal-table-wrap .legal-table tr:last-child th,
.legal-table-wrap .legal-table tr:last-child td { border-bottom: none; }

/* 未入力のまま公開してしまったときに気づけるように */
.legal-todo { color: var(--rose-700); font-weight: 700; }

/* スマホでは項目名を上、内容を下に積む */
@media (max-width: 560px) {
  .legal-table-wrap .legal-table,
  .legal-table-wrap .legal-table tbody,
  .legal-table-wrap .legal-table tr,
  .legal-table-wrap .legal-table th,
  .legal-table-wrap .legal-table td { display: block; width: auto; }
  .legal-table-wrap .legal-table tr { margin-bottom: 14px; }
  .legal-table-wrap .legal-table th {
    border-bottom: none; border-radius: var(--r-sm, 10px) var(--r-sm, 10px) 0 0; padding-bottom: 8px;
  }
  .legal-table-wrap .legal-table td { padding-top: 8px; }
}

/* フッターの規約リンク（フッターメニューを設定していても必ず出る行） */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: var(--space-6); font-size: var(--fs-xs);
}
.footer-legal a { opacity: .8; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal + .footer-bottom { margin-top: var(--space-4); }

/* =============================================================
   練習きろく：音域えらび / 鍵盤 / ボイスメモ / きろく一覧
   ============================================================= */

.field-label--sub { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }

/* --- 音域がわからない方へ --- */
.note-help { margin-top: var(--space-3); }
.note-help > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700);
  list-style: none;
}
.note-help > summary::-webkit-details-marker { display: none; }
.note-help > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  rotate: -45deg; translate: 0 -2px;
  transition: rotate var(--dur-base) var(--ease-out);
}
.note-help[open] > summary::before { rotate: 45deg; translate: 0 -1px; }
.note-help > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.note-help > summary:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; border-radius: 8px; }
.note-help__body {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-3); padding: var(--space-4);
  background: var(--surface-sunk); border-radius: var(--r-md);
}

/* --- 鍵盤 --- */
.keyboard-scroll {
  overflow-x: auto; overflow-y: hidden;
  padding: 6px; border-radius: var(--r-sm); background: #fff;
  -webkit-overflow-scrolling: touch;
}
.keyboard-scroll:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.keyboard { display: block; max-width: none; }

.kb-key--w { fill: #fff; stroke: #C6D2DC; stroke-width: 1; }
/* まんなかのド（C4）— えらんだ音の色に上書きされてもわかるよう、丸い目印も重ねる */
.kb-key--w.kb-key--c4 { fill: #FFF0BF; stroke: #E0A93B; stroke-width: 1.6; }
.kb-c4-dot { fill: #D98A16; }
.kb-c4-label { font-size: 11px; font-weight: 700; fill: #B8730F; text-anchor: middle; }
.kb-c4-arrow { fill: #D98A16; }
.kb-key--b { fill: #37424C; stroke: #222A31; stroke-width: 1; }
.kb-kana { font-size: 10px; fill: var(--ink-700); text-anchor: middle; }
.kb-kana--b { font-size: 7.5px; fill: #fff; text-anchor: middle; }
.kb-bandname { font-size: 12px; font-weight: 700; fill: #1F3A44; text-anchor: middle; }
.kb-letter { font-size: 11px; font-weight: 700; fill: #1F3A44; text-anchor: middle; }
.kb-oct { font-size: 10px; fill: #1F3A44; text-anchor: middle; opacity: .75; }

/* えらんだ音 */
.kb-key { transition: fill var(--dur-fast) var(--ease-out); }
.kb-key--w.is-in { fill: #DCF0FF; }
.kb-key--w.is-lo { fill: #8FD9A8; }
.kb-key--w.is-hi { fill: #FFB3C6; }
.kb-key--b.is-in { fill: #4E7A94; }
.kb-key--b.is-lo { fill: #2E8A57; }
.kb-key--b.is-hi { fill: #B03A62; }

/* --- ボイスメモ --- */
.recorder { display: grid; gap: 10px; }
.recorder__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recorder__time {
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--sky-700); min-width: 5.5em;
}
.recorder__dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--rose-600);
  animation: lm-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes lm-rec-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .recorder__dot { animation: none; } }
.recorder.is-recording { outline: 2px dashed var(--rose-200); outline-offset: 8px; border-radius: var(--r-sm); }
.recorder__audio { width: 100%; max-width: 420px; }
.recorder__note:empty { display: none; }

/* --- 最近のきろく --- */
.log-list { display: grid; gap: 12px; }
.log-item {
  display: grid; gap: 8px;
  padding: var(--space-4); border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.log-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.log-item__date { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.log-item__range {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--sky-700);
}
.log-item__range svg { color: var(--sky-400); }
.log-item__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.log-item__memo { font-size: var(--fs-sm); color: var(--ink-700); }
.log-item__audio { width: 100%; max-width: 420px; }

/* タイムラインにのせた歌 */
.post__voice {
  display: grid; gap: 8px;
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md); background: var(--surface-sunk);
  border-left: 5px solid var(--lav-500);
}
.post__voice-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
}
.post__voice-label svg { color: var(--rose-600); }
.post__audio { width: 100%; }

/* 「この歌をタイムラインに流す」 */
.check-label--voice { align-items: flex-start; gap: 10px; }
.check-label--voice .field-hint { margin-top: 2px; }

.log-item__shared {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
}
.log-item__shared::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lav-500); flex: none;
}

/* =============================================================
   コメント（タイムラインの中で書いて、下にたまっていく）
   ============================================================= */
.cmts { margin-top: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.cmts:empty { display: none; }

.cmts__more {
  min-height: 36px; padding: 0 4px; margin-bottom: 4px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
  background: none; border: none; cursor: pointer;
}
.cmts__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmts__more:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 8px; }

.cmts__list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cmts__list:empty { display: none; }

.cmt { display: flex; gap: 10px; align-items: flex-start; }
.cmt__avatar { flex: none; }
.cmt__body {
  flex: 1; min-width: 0;
  padding: 8px 12px 6px; border-radius: 14px 14px 14px 4px;
  background: var(--surface-sunk);
}
.cmt__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmt__name { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-900); }
.cmt__time { font-size: var(--fs-xs); color: var(--ink-500); }
.cmt__text {
  font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.7;
  overflow-wrap: anywhere; margin-top: 2px;
}
.cmt__text .tag { color: var(--sky-600); font-weight: 700; }
.cmt__actions { display: flex; gap: 12px; align-items: center; margin-top: 2px; }
.cmt__act {
  min-height: 32px; padding: 0; background: none; border: none; cursor: pointer;
  font-size: var(--fs-xs); color: var(--ink-500);
}
.cmt__actions .act--report {
  min-height: 32px; min-width: 32px; padding: 0; color: var(--ink-500);
}
.cmt__actions .act--report svg { width: 15px; height: 15px; }
.cmt__act:hover, .cmt__actions .act--report:hover { color: var(--rose-600); }
.cmt__act:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 6px; }

/* 送ったコメントがふわっと出る */
.cmt.is-new { animation: lm-cmt-in var(--dur-slow, .42s) var(--ease-back) both; }
@keyframes lm-cmt-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cmt.is-new { animation: none; } }

/* 入力欄 */
.cmt-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.cmt-form__input {
  flex: 1; min-width: 0; min-height: 40px; max-height: 140px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink-900);
  border: none; box-shadow: inset 0 0 0 2px var(--border);
  font: inherit; font-size: var(--fs-sm); line-height: 1.5;
  resize: none; overflow-y: auto;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.cmt-form__input::placeholder { color: var(--ink-500); }
.cmt-form__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sky-400), 0 0 0 4px var(--color-ring);
}
.cmt-form__send {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: var(--grad-blue); color: #fff;
  transition: transform var(--dur-fast) var(--ease-back), opacity var(--dur-fast) var(--ease-out);
}
.cmt-form__send:hover:not(:disabled) { transform: scale(1.08); }
.cmt-form__send:active:not(:disabled) { transform: scale(.94); }
.cmt-form__send:disabled { opacity: .4; cursor: default; }
.cmt-form__send:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.cmt-form__note { font-size: var(--fs-xs); color: var(--rose-700); margin-top: 6px; }
.cmt-form__note:empty { display: none; }

/* つぶやきを取り消す */
.act--undo { gap: 5px; font-size: var(--fs-xs); font-weight: 700; }
.act--undo:hover { color: var(--rose-600); }
.act--undo:disabled { opacity: .5; cursor: default; }

.post.is-removing {
  overflow: hidden;
  animation: lm-post-out .32s var(--ease-out) forwards;
}
@keyframes lm-post-out {
  to { opacity: 0; transform: scale(.97); height: 0; margin-block: 0; padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .post.is-removing { animation: none; opacity: 0; }
}

/* =============================================================
   動画をのせる
   ============================================================= */
/* 中身（プレビュー・サムネ・進捗）が出たときだけ場所を取る。
   display:contents にすると、何も出ていないときに空の行と余白ができない。 */
.vid-add { display: contents; }

/* ファイル選択は label を見た目のボタンにする */

.vid-add__preview { position: relative; max-width: 320px; }
.vid-add__preview video {
  width: 100%; display: block; border-radius: var(--r-md);
  background: #000; aspect-ratio: 16 / 9; object-fit: contain;
}
.vid-add__remove {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(20,28,36,.72); color: #fff;
}
.vid-add__remove:hover { background: rgba(20,28,36,.9); }
.vid-add__remove:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }

.vid-add__bar { height: 6px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; }
.vid-add__bar span {
  display: block; height: 100%; width: 0;
  background: var(--grad-blue); border-radius: 999px;
  transition: width .2s var(--ease-out);
}
[data-video-note].is-bad { color: var(--rose-700); font-weight: 700; }
[data-video-note]:empty { display: none; }

/* タイムラインに出る動画 */
.post__video { margin-top: var(--space-3); border-radius: var(--r-md); overflow: hidden; background: #000; }
.post__video video { width: 100%; display: block; max-height: 70vh; }
.post__video--embed { aspect-ratio: var(--ratio, 16 / 9); max-width: 100%; }
/* たて動画は画面を占領しすぎないよう幅を抑える */
.post__video--embed[style*="9 / 16"] { max-width: 320px; }
.post__video--embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =============================================================
   写真をのせる
   ============================================================= */
.img-add { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.img-add:empty { display: none; }
.img-add__item { position: relative; width: 84px; height: 84px; }
.img-add__item img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-sm); display: block; background: var(--surface-sunk);
}
.img-add__remove {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(20,28,36,.82); color: #fff;
}
.img-add__remove:hover { background: rgba(20,28,36,.95); }
.img-add__remove:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }

/* タイムラインの写真 */
.post__photos {
  display: grid; gap: 4px; margin-top: var(--space-3);
  border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}
.post__photos[data-photos="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post__photos[data-photos="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; }
.post__photos[data-photos="3"] .post__photo:first-child { grid-row: span 2; }
.post__photos[data-photos="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.post__photo {
  padding: 0; border: none; cursor: zoom-in; display: block;
  background: var(--surface-sunk); overflow: hidden; line-height: 0;
  /* グリッドの中身は既定で「縮まない」ので、写真の実寸に押し広げられてしまう。
     min-width:0 を入れて、列の幅どおりに収まるようにする。 */
  min-width: 0; min-height: 0;
}
.post__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 1枚だけのときは、切り抜かずにそのままの形で見せる */
.post__photos[data-photos="1"] .post__photo img { height: auto; max-height: 70vh; object-fit: contain; }
.post__photos:not([data-photos="1"]) .post__photo { aspect-ratio: 1 / 1; }
.post__photo:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -3px; }

/* 大きく見る */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center; padding: 20px;
  background: rgba(12,18,26,.86);
}
.lightbox.is-open { display: grid; animation: lm-fade-in .18s var(--ease-out); }
@keyframes lm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--r-sm); display: block; }
.lightbox__close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff;
}
.lightbox__close:hover { background: rgba(255,255,255,.3); }
.lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lightbox.is-open { animation: none; } }

/* 写真・動画をえらぶ（アイコンひとつ） */
.media-btn {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--sky-700); background: var(--surface-sunk);
  transition: transform var(--dur-fast) var(--ease-back), background var(--dur-fast) var(--ease-out);
}
.media-btn:hover { background: var(--sky-100, #E9F5FF); transform: scale(1.06); }
.media-btn:active { transform: scale(.94); }
.media-btn:focus-within { outline: 3px solid var(--color-ring); outline-offset: 3px; }
/* ファイル選択欄は、素の状態だと 253px ぶんの幅を主張する。
   ボタンいっぱいに広げるとブラウザによっては its 幅が漏れて横に張り出すので、
   1px まで縮めて完全に無害化する。ラベルを押せば開くので操作性は変わらない。 */
.media-btn input[type="file"] {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; min-width: 0;
  padding: 0; border: 0; font-size: 0;
  opacity: 0; cursor: pointer;
}

/* 投稿欄フッターの「YouTube貼り付け」（たたんでおける説明） */
.compose-help { flex: 1; min-width: 0; }
.compose-help > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700);
}
.compose-help > summary::-webkit-details-marker { display: none; }
.compose-help > summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  rotate: -45deg; translate: 0 -1px;
  transition: rotate var(--dur-base) var(--ease-out);
}
.compose-help[open] > summary::before { rotate: 45deg; translate: 0 -1px; }
.compose-help > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.compose-help > summary:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; border-radius: 6px; }
.compose-help__body {
  display: grid; gap: 6px; margin-top: 6px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--surface-sunk);
  font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.7;
}
.compose-help__body p { margin: 0; }

/* 説明を開いたときは、行が2段になっても崩れないように */
.composer__foot { align-items: flex-end; }
.composer__foot > * { min-width: 0; }
.composer__foot .row { flex: 0 1 auto; }
.composer__foot .btn { white-space: nowrap; }

/* せまい画面では、たたみ文字を上の段に逃がす。
   ボタンの行が縮まされて画面からはみ出す、という事故を防ぐため。 */
@media (max-width: 560px) {
  .composer__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .composer__foot .row { justify-content: flex-end; }
  .compose-help { flex: none; }
}

/* =============================================================
   横はみ出しの防止（iPhoneで「左寄り」に見える原因をつぶす）
   ============================================================= */
/* flex/grid の子は既定で「中身より小さくならない」ため、
   ヘッダーの中身が画面幅を超えて張り出すことがある。 */
.site-header__inner { min-width: 0; }
.header-cta { min-width: 0; }
.brand { overflow: hidden; }

/* 出現アニメーションの初期位置（左右に32pxずらす）が
   画面の外にはみ出さないよう、節の中で切る。
   clip はスクロール領域を作らないので position:sticky を壊さない。 */
.site-header { overflow-x: clip; }
.section { overflow-x: clip; }

/* 横スクロールそのものを止める。
   スマホのアプリ画面で横に動くことは無いので、
   どこかが少しはみ出しても画面がガタつかないようにする。
   clip は hidden と違いスクロール領域を作らないので position:sticky を壊さない。 */
html { overflow-x: clip; }
/* 入力欄は flex の中で縮めるようにしておく（textarea は既定で20文字ぶんの幅を主張する） */
.composer textarea { min-width: 0; }

/* 投稿フォーム・投稿カードが、絶対にカードの外へ出ないようにする。
   flex / grid の子は既定で「中身より小さくならない」ので、
   入れ子のどこか1つが縮まないだけで全体が横に張り出してしまう。
   関係する入れ物すべてに min-width:0 を入れて、確実に収まるようにする。 */
.composer,
.composer > *,
.composer__row,
.composer__foot,
.composer__foot .row,
.post,
.post > * { min-width: 0; max-width: 100%; }

.composer__row > *,
.composer__foot > * { min-width: 0; }

/* 「つぶやく」が入りきらないときは、切れずに次の行へ落とす */
.composer__foot .row { flex-wrap: wrap; justify-content: flex-end; }
.composer__foot .btn { max-width: 100%; }

/* .vid-add を display:contents にしたぶん、
   中身が出たときの間隔は各パーツ側で持たせる */
.vid-add__preview, .img-add, .vid-add__bar { margin-top: 2px; }

/* =========================================================
   イベントとカレンダー
   ========================================================= */

.pill--sky { background: var(--sky-100); color: var(--sky-800); }

/* ---- 月カレンダー ---- */
.cal { margin-bottom: var(--space-5); }

.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: var(--space-3);
}
.cal__title { font-size: var(--fs-md); color: var(--sky-700); }
.cal__nav--prev svg { transform: rotate(180deg); }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal__dow {
  text-align: center; font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-500); padding-bottom: 4px;
}
.cal__dow--sun { color: var(--rose-500); }
.cal__dow--sat { color: var(--sky-600); }

.cal__cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; padding: 6px 2px 5px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-700);
  text-decoration: none;
  /* 点があってもなくても高さを揃えて、行がガタつかないように */
  min-height: 46px;
}
.cal__cell--empty { visibility: hidden; }
.cal__cell--sun .cal__day { color: var(--rose-500); }
.cal__cell--sat .cal__day { color: var(--sky-600); }

.cal__cell--today {
  background: var(--sky-50);
  box-shadow: inset 0 0 0 2px var(--sky-300);
}
.cal__cell--has { background: rgba(255,255,255,.75); font-weight: 700; }
.cal__cell--has:hover { background: #fff; box-shadow: var(--sh-sm); }
.cal__cell--has:active { transform: scale(.95); }

.cal__day { line-height: 1.1; }

.cal__dots { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.cal__dot { width: 6px; height: 6px; border-radius: 50%; display: block; }
.cal__dot--sky   { background: var(--sky-400); }
.cal__dot--rose  { background: var(--rose-400); }
.cal__dot--lemon { background: var(--lemon-300); }
.cal__dot--lav   { background: var(--lav-300); }
.cal__dot--mint  { background: var(--mint-200); }
.cal__more { font-size: 9px; font-style: normal; color: var(--ink-500); font-weight: 700; }

.cal__legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-500);
}
.cal__legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* ---- 日ごとの見出し ---- */
.day-group { scroll-margin-top: calc(var(--header-h) + 12px); border-radius: var(--r-lg); }
.day-group__head {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-md); color: var(--sky-700);
  margin-bottom: var(--space-3);
}
.day-group__num { font-size: var(--fs-lg); }
.day-group__dow { font-size: var(--fs-sm); color: var(--ink-500); }

/* カレンダーから飛んできた日を、しばらく光らせる */
.day-group:target {
  background: var(--sky-50);
  box-shadow: 0 0 0 10px var(--sky-50);
}

/* ---- イベントカード ---- */
.event-card { display: grid; gap: 10px; min-width: 0; border-left: 4px solid var(--sky-300); }
.event-card--rose  { border-left-color: var(--rose-300); }
.event-card--lemon { border-left-color: var(--lemon-300); }
.event-card--lav   { border-left-color: var(--lav-300); }
.event-card--mint  { border-left-color: var(--mint-200); }
.event-card.is-over { opacity: .62; }

.event-card__top { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.event-card__title { font-size: var(--fs-base); line-height: var(--lh-snug); margin: 0; min-width: 0; }
.event-card__title a { color: var(--ink-900); text-decoration: none; }
.event-card__title a:hover { color: var(--sky-700); text-decoration: underline; }

.event-card__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--fs-xs); color: var(--ink-500);
}
.event-card__meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.event-card__meta svg { flex: none; }

.event-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; min-width: 0;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.event-card__host { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-xs); }
.event-card__host .text-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-card__join { margin: 0; }

/* ---- 詳細ページ ---- */
.event-detail { border-top: 5px solid var(--sky-300); }
.event-detail--rose  { border-top-color: var(--rose-300); }
.event-detail--lemon { border-top-color: var(--lemon-300); }
.event-detail--lav   { border-top-color: var(--lav-300); }
.event-detail--mint  { border-top-color: var(--mint-200); }

.event-facts {
  display: grid; gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--surface-soft);
  border-radius: var(--r-md);
}
.event-facts > div { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr; gap: 10px; align-items: baseline; }
.event-facts dt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-500);
}
.event-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); min-width: 0; }

.event-spot {
  margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--r-md); background: var(--mint-100);
  font-size: var(--fs-sm);
}
.event-spot strong { display: inline-flex; align-items: center; gap: 6px; color: var(--mint-600); }
.event-spot p { margin: 6px 0 0; color: var(--ink-900); }
.event-spot--locked { background: var(--surface-sunk); }
.event-spot--locked strong { color: var(--ink-500); }
.event-spot--locked p { color: var(--ink-500); }

.event-people { margin-top: var(--space-5); }
.event-people__title { font-size: var(--fs-sm); color: var(--ink-500); margin: 0 0 var(--space-3); }
.event-people__list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.event-people__one { display: grid; justify-items: center; gap: 4px; width: 72px; }
.event-people__name {
  font-size: var(--fs-xs); text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 480px) {
  .cal__cell { min-height: 42px; padding: 5px 1px 4px; font-size: var(--fs-xs); }
  .event-facts > div { grid-template-columns: minmax(0, 6em) 1fr; }
}

/* コメントのいいね（つぶやきのハートを小さくしたもの） */
.cmt__like { display: inline-flex; align-items: center; gap: 5px; }
.cmt__like svg {
  width: 15px; height: 15px;
  transition: transform var(--dur-base) var(--ease-back);
}
/* 数字が0のときは span が空になるので、すき間が残らないように */
.cmt__like span:empty { display: none; }
.cmt__like.is-on { color: var(--rose-600); }

/* =========================================================
   雲の図鑑
   ========================================================= */

.book__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-4) var(--space-3);
}

.book__item { margin: 0; min-width: 0; display: grid; gap: 6px; justify-items: center; text-align: center; }

.book__art {
  width: 100%; display: grid; place-items: center;
  padding: 8px 4px; border-radius: var(--r-md);
  background: var(--surface-soft);
}
.book__art svg { width: 100%; height: auto; max-width: 96px; }

/* まだ手に入れていない姿は、影だけ見せる */
.book__item.is-locked .book__art { background: var(--surface-sunk); }
.book__item.is-locked .book__art svg {
  filter: brightness(0) opacity(.16);
}

.book__item.is-owned .book__art {
  background: #fff;
  box-shadow: var(--sh-xs);
}

.book__name {
  font-size: var(--fs-xs); line-height: var(--lh-snug);
  color: var(--ink-900); max-width: 100%;
}
.book__item.is-locked .book__name { color: var(--ink-300); }

.book__note {
  font-size: 10px; line-height: 1.45; color: var(--ink-500);
  display: block; max-width: 100%;
}
.book__note--hint {
  display: inline-flex; align-items: flex-start; gap: 3px;
  justify-content: center; color: var(--ink-300);
}
.book__note--hint svg { flex: none; margin-top: 1px; }

@media (max-width: 480px) {
  .book__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-3) 8px; }
  .book__art svg { max-width: 76px; }
}

/* =========================================================
   「これになった！」のシェアカード
   ========================================================= */

.share__card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--sh-sm);
  /* 1080角の絵をそのまま入れるので、幅にあわせて縮める */
  max-width: 420px;
}
.share__card svg { display: block; width: 100%; height: auto; }

/* 保存中は押せないことを見せる */
.share .btn[disabled] { opacity: .55; cursor: default; }

/* 図鑑の各マスから、その子のカードを作るボタン */
.book__item { position: relative; }
.book__share {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink-500);
  box-shadow: var(--sh-xs); cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* ふだんは隠しておいて、さわったときに出す。
   タッチ端末はホバーが無いので、そちらでは常に出す */
.book__item:hover .book__share,
.book__share:focus-visible { opacity: 1; }
.book__share:hover { color: var(--sky-700); }
.book__share:active { transform: scale(.92); }
@media (hover: none) {
  .book__share { opacity: .85; }
}

.book__item.is-locked .book__share { display: none; }

/* =========================================================
   トップページに足したところ
   ========================================================= */

/* いちばん下のプレミアム帯。ほかの節より薄く、低くする */
.section--slim { padding-block: var(--space-7); }

.premium-slim {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--sh-sm);
}
.premium-slim__body { flex: 1 1 320px; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.premium-slim__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: var(--lh-snug);
  color: var(--ink-900); margin: 0;
}
.premium-slim__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); line-height: var(--lh-base); }

.ribbon-title--sm { padding: 6px 20px; font-size: var(--fs-xs); }

/* 図鑑のならび。横スクロールにはせず、折り返して全部見せる。
   8体ならべるので、列数は8の約数にする。半端な行が残らないように */
.zukan-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 620px) {
  .zukan-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.zukan-strip__item { margin: 0; display: grid; gap: 8px; justify-items: center; min-width: 0; }
.zukan-strip__item svg {
  width: 100%; height: auto; max-width: 120px;
  background: rgba(255,255,255,.78);
  border-radius: var(--r-md);
  padding: 6px;
}
.zukan-strip__item figcaption {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--ink-900); text-align: center;
}

.zukan-note {
  text-align: center; margin: 0;
  font-size: var(--fs-sm); color: var(--ink-500);
}

@media (max-width: 560px) {
  .premium-slim { padding: var(--space-4) var(--space-5); }
  .zukan-strip__item figcaption { font-size: var(--fs-xs); }
}

/* =========================================================
   フォロー中／フォロワーの一覧
   ========================================================= */

/* 数字をボタンにしたので、リンクだったときと同じ見た目にそろえる */
.follow-stats button {
  border: none; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 5px;
}
.follow-stats button:hover { color: var(--sky-700); }
.follow-stats button:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; border-radius: 6px; }

.follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 56vh; overflow-y: auto; }

.follow-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; min-width: 0;
  border-bottom: 1px solid var(--border);
}
.follow-row:last-child { border-bottom: 0; }

.follow-row__head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.follow-row__name { display: grid; gap: 1px; min-width: 0; }
.follow-row__name strong { font-size: var(--fs-sm); color: var(--ink-900); }
.follow-row__name .text-muted { font-size: var(--fs-xs); }
.follow-row__name strong,
.follow-row__name .text-muted,
.follow-row__bio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row__bio { font-size: var(--fs-xs); color: var(--ink-500); }
.follow-row__head:hover strong { color: var(--sky-700); }

.follow-row__act { flex: none; }

.follow-list__empty,
.follow-list__more {
  margin: 0; padding: var(--space-5) 0;
  text-align: center; font-size: var(--fs-sm); color: var(--ink-500);
}
.follow-list__more { padding: var(--space-3) 0 0; font-size: var(--fs-xs); }

/* =========================================================
   レッスンノート
   ========================================================= */

/* ---------------------------------------------------------------
   レッスンノート
   --------------------------------------------------------------- */
.note-panel { display: grid; gap: 0; }

.note-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-4);
}
.note-head__title {
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-lg); color: var(--sky-700);
}
.note-head__text { min-width: 0; }
.note-head__sub { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.6; }
.note-head__new { flex: none; }

.note-edit {
  display: grid; gap: var(--space-4);
  background: linear-gradient(170deg, #FFFDF7 0%, var(--surface-soft) 60%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
/* min-width:0 が無いと、iOS の日付入力が縮まずに枠を押し広げる。
   日付は中身の高さがテキスト欄と少し違うので、列いっぱいに伸ばして下端をそろえる */
.note-edit__meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
/* align-items を止めないと、日付まで列の幅いっぱいに伸ばされる */
.note-edit__meta > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.note-edit__meta .field { flex: 1; }
.note-edit__body { min-height: 220px; line-height: var(--lh-base); resize: vertical; }
.note-edit__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 480px) {
  .note-edit { padding: var(--space-4); }
  .note-edit__meta { grid-template-columns: 1fr; }
  .note-edit__foot > * { flex: 1 1 auto; justify-content: center; }
}

/* 録音のところ。押すところが一目で分かるよう、丸いボタンを主役にする */
.note-rec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4);
}
.note-rec__main { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.note-rec__label { flex: 1 1 150px; min-width: 0; display: grid; gap: 2px; }
.note-rec__label strong { font-size: var(--fs-sm); color: var(--ink-900); }
.note-rec__time {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.mic-btn {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; display: grid; place-items: center;
  background: var(--grad-blue); color: #fff;
  box-shadow: 0 8px 20px rgba(42,115,175,.28);
  transition: transform .16s ease, box-shadow .16s ease;
}
.mic-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(42,115,175,.34); }
.mic-btn:active { transform: translateY(0) scale(.96); }
.mic-btn:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }

/* 録音中。赤い四角と、じわっと広がる輪で「いま録れている」を出す */
.mic-btn--rec { background: var(--grad-cta); box-shadow: 0 8px 20px rgba(185,47,99,.3); position: relative; }
.mic-btn__square { width: 20px; height: 20px; border-radius: 5px; background: #fff; }
.mic-btn--rec::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid var(--rose-300); animation: micPulse 1.6s ease-out infinite;
}
@keyframes micPulse {
  0%   { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.28); opacity: 0; }
}
/* 録音中は時間を目立たせる */
.note-rec:has(.mic-btn--rec:not([hidden])) .note-rec__time {
  color: var(--rose-600); font-size: var(--fs-md);
}

.note-rec__quota { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--ink-500); }
.note-rec__more { margin-top: 10px; }
.note-rec__more > summary {
  cursor: pointer; list-style: none; font-size: var(--fs-xs);
  color: var(--sky-700); font-weight: 600;
}
.note-rec__more > summary::-webkit-details-marker { display: none; }
.note-rec__more > summary::before { content: '＋ '; }
.note-rec__more[open] > summary::before { content: '− '; }
.note-rec__more p { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.7; }
.note-rec__warn { display: flex; align-items: flex-start; gap: 6px; }
.note-rec__warn svg { flex: none; margin-top: 3px; }

/* ノートのページ。水色の表紙、左に金のリング、クリーム色の紙に薄い罫線。
   見本よりリングと表紙を細くして、紙（読むところ）を広くとる */
.note-page {
  position: relative;
  --cover: 7px;           /* 表紙のはみ出し */
  --rings: 18px;          /* リングのぶんの余白 */
  margin: 12px 6px 18px calc(var(--rings) + 6px);
  padding: 50px var(--space-4) var(--space-4) 14px;
  background: #FFFDF8;
  border-radius: 12px;
  box-shadow: 0 0 0 var(--cover) var(--sky-200), 0 8px 20px rgba(52,94,145,.10);
  display: grid; gap: var(--space-4);
}
.note-page::before {
  content: ''; position: absolute; top: 6px; bottom: 6px;
  left: calc(-1 * var(--cover) - 15px); width: 22px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Cellipse cx='5' cy='17' rx='2.2' ry='2.8' fill='%239FB2CC'/%3E%3Cpath d='M3.5 17C3.5 8 20 8 20 17S3.5 26 3.5 17' fill='none' stroke='%23D4B45A' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M6 15C7.5 11 16 10.5 18 14' fill='none' stroke='%23F3DE9A' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-y; background-size: 22px 34px; background-position: 0 2px;
  pointer-events: none;
}
/* 飾り。左上にハートと点、右上に雲 */
.note-page__deco { position: absolute; top: 14px; pointer-events: none; }
.note-page__deco--heart { left: 14px; display: flex; align-items: center; gap: 8px; }
.note-page__deco--heart i { width: 4px; height: 4px; border-radius: 50%; background: #BFDDF6; }
.note-page__deco--heart i:first-of-type { margin-left: 6px; }
.note-page__deco--cloud { right: 10px; top: 6px; }
@media (max-width: 420px) {
  .note-page__deco--cloud svg { width: 52px; height: 39px; }
}
.note-sec { display: grid; gap: 4px; }
.note-sec__h {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--sky-700);
}
.note-sec__icon {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--sky-100); color: var(--sky-700);
}
/* 欄ごとの色。並び順ではなく欄の名前で付ける（飾りを足しても、ずれない） */
.note-sec[data-field="said"] .note-sec__icon     { background: var(--lav-100); color: var(--lav-500); }
.note-sec[data-field="tried"] .note-sec__icon    { background: var(--lemon-100); color: var(--lemon-600); }
.note-sec[data-field="homework"] .note-sec__icon { background: var(--rose-100); color: var(--rose-600); }
.note-sec--memo .note-sec__icon { background: var(--mint-100); color: var(--mint-600); }

/* 本文。行の高さと罫線の間隔をそろえて、文字が線の上に乗るようにする */
.note-sec__body, .note-sec__input {
  --rule: 28px;
  line-height: var(--rule);
  font-size: var(--fs-sm); color: var(--ink-900);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent calc(var(--rule) - 1px),
    #DCE3F5 calc(var(--rule) - 1px), #DCE3F5 var(--rule)
  );
  background-attachment: local;
  padding: 0 4px; margin: 0;
  white-space: pre-wrap; word-break: break-word;
}
.note-sec__body--long { max-height: 60vh; overflow-y: auto; color: var(--ink-700); }

/* 書くとき。枠線を消して、罫線の上に直接書いているように見せる */
.note-sec__input {
  width: 100%; border: none; outline: none; resize: vertical;
  font-family: inherit; min-height: var(--rule);
  border-bottom: 1px solid #DCE3F5; border-radius: 0; background-color: transparent;
}
.note-sec__input:focus { background-color: var(--sky-50); border-bottom-color: var(--sky-400); }
.note-sec__input::placeholder { color: var(--ink-300); }
.note-page--edit { margin-top: 18px; }
.note-page--edit .note-sec__h { cursor: text; }

/* 紹介ページのヒーローのリード。1行目だけ強くする */
.hero__lead { text-align: left; margin-top: var(--space-4); }
.hero__lead strong { color: var(--ink-900); font-size: 1.08em; }

/* 大きいボタンの下の、文字だけの控えめな導線 */
.hero__sub { margin-top: 12px; }
.upsell__login { margin: 0; }
.hero__sub, .upsell__login { font-size: var(--fs-xs); color: var(--ink-500); }
.hero__sub a, .upsell__login a {
  color: var(--sky-700); text-decoration: underline; text-underline-offset: 3px;
}
.hero__sub a:hover, .upsell__login a:hover { color: var(--sky-600); }

/* 紹介ページに置く見本のノート。中身は本物と同じ部品 */
.note-demo { max-width: 560px; margin-inline: auto; }
.note-demo .note-page { margin-right: 16px; }
.note-demo .note-sec__body { pointer-events: none; }

/* ひろばの入口。3つのカードから選んでもらう */
/* 列の数は中の枚数にまかせる（ひろばは3枚、きろくは2枚） */
.way-nav {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 12px; margin-bottom: var(--space-5);
}
.way-nav__item {
  display: grid; justify-items: center; align-content: start; gap: 6px;
  padding: 16px 10px 14px; text-align: center; text-decoration: none;
  border-radius: var(--r-lg); background: var(--surface);
  border: 2px solid var(--border); color: var(--ink-700);
  transition: transform var(--dur-base) var(--ease-back),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.way-nav__item:hover { transform: translateY(-4px); box-shadow: var(--sh-md); color: var(--ink-700); }
.way-nav__item:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.way-nav__item[aria-selected="true"] {
  border-color: var(--sky-300); box-shadow: var(--sh-md);
  background: linear-gradient(170deg, #F7FCFF 0%, #FFFFFF 60%, #FFF6FA 100%);
}
.way-nav__art { width: 88px; height: 66px; }
.way-nav__label { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink-900); }
.way-nav__item[aria-selected="true"] .way-nav__label { color: var(--sky-700); }
.way-nav__sub { font-size: 11px; color: var(--ink-500); line-height: 1.5; }
/* 何件たまっているか。数が見えると開きたくなる */
.way-nav__num {
  display: inline-block; margin-left: 5px; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--sky-100); color: var(--sky-700);
  font-family: var(--font-body); font-size: 11px; font-style: normal; font-weight: 700;
}
.way-nav__item[aria-selected="true"] .way-nav__num { background: var(--rose-100); color: var(--rose-600); }

/* せまい画面では絵を小さくして、説明は畳む */
@media (max-width: 480px) {
  .way-nav { gap: 8px; }
  .way-nav__item { padding: 12px 4px 10px; border-radius: var(--r-md); }
  .way-nav__art { width: 64px; height: 48px; }
  .way-nav__label { font-size: var(--fs-xs); }
  .way-nav__sub { display: none; }
}

/* ---------------------------------------------------------------
   トップと紹介ページのいききの導線
   --------------------------------------------------------------- */

/* トップのカードから、紹介ページへ */
.lp-more { margin: var(--space-3) 0 0; }
.lp-more a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--sky-700); text-decoration: none;
}
.lp-more a:hover { color: var(--sky-800); text-decoration: underline; }
.lp-more svg { transition: transform .2s ease; }
.lp-more a:hover svg { transform: translateX(3px); }

/* 紹介ページから、りらみゅ本体へ */
.lp-home { margin: var(--space-6) 0 0; text-align: center; }
.lp-home a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: #fff; border: 2px solid var(--sky-200);
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--sky-700); text-decoration: none;
  box-shadow: var(--sh-xs);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lp-home a:hover {
  background: var(--sky-50); border-color: var(--sky-400);
  transform: translateY(-2px); color: var(--sky-800);
}
.lp-home a:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }

/* ひろばの紹介ページ。掲示板に並ぶカードの見本 */
.hb-demo { display: grid; gap: 10px; justify-items: start; align-content: start; }
.hb-demo__title {
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--ink-900); line-height: 1.5; margin: 0;
}
.hb-demo__meta { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hb-demo__meta li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--ink-500); }
.hb-demo__meta svg { flex: none; color: var(--sky-500); }

/* 「ぜんぶ無料」の囲み */
.hb-free {
  background: linear-gradient(160deg, #F2FCF8 0%, #FFFFFF 55%, #F7FCFF 100%);
  border: 2px solid var(--mint-200);
}

/* 「どの教室の生徒様でも」の囲み */
.note-lp__open {
  background: linear-gradient(160deg, #F2FCF8 0%, #FFFFFF 55%, #FFF6FA 100%);
  border: 2px solid var(--mint-200);
}
/* 安心してもらうための箇条書き */
.lp-safe { max-width: 34em; margin-inline: auto; }

/* 一覧 */
.note-list { display: grid; gap: 10px; }

/* まだ1件も無いとき。ここが空欄だと何をする場所か伝わらない */
.note-empty {
  display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, #F7FCFF 0%, #FFF6FA 100%);
  border: 2px dashed var(--border-strong);
  text-align: center;
}
.note-empty__head { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink-900); }
.note-empty__text { margin: 0; max-width: 30em; font-size: var(--fs-sm); color: var(--ink-500); line-height: 1.8; }

/* ノート1枚。左に日付のふせん、右に中身 */
.note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.note-card:hover { box-shadow: var(--sh-sm); border-color: var(--border-strong); }
.note-card[open] { box-shadow: var(--sh-sm); }

.note-card__top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--space-4) 12px 12px;
  cursor: pointer; list-style: none; min-width: 0;
}
.note-card__top::-webkit-details-marker { display: none; }
.note-card__top:hover { background: var(--sky-50); }
.note-card__top:focus-visible { outline: 3px solid var(--color-ring); outline-offset: -3px; }

.note-card__day {
  flex: none; width: 48px; padding: 5px 0; border-radius: var(--r-sm);
  background: linear-gradient(160deg, var(--sky-100), var(--lav-100));
  display: grid; justify-items: center; line-height: 1;
  font-family: var(--font-display); color: var(--sky-700);
}
.note-card__day em { font-style: normal; font-size: 10px; opacity: .8; }
.note-card__day b { font-size: 1.35rem; font-weight: 600; }
.note-card__day i { font-style: normal; font-size: 10px; opacity: .7; }

.note-card__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.note-card__title {
  font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-card__peek {
  font-size: var(--fs-xs); color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-card[open] .note-card__peek { display: none; }
.note-card__len { flex: none; font-size: 11px; color: var(--ink-300); }

.note-card > .note-page { margin-top: 16px; }
.note-card__acts {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  padding: 0 var(--space-4) var(--space-4);
}
.note-card__del { color: var(--ink-500); }
.note-card__del:hover { color: var(--rose-600); }
@media (max-width: 420px) {
  .note-card__acts > * { flex: 1 1 auto; justify-content: center; }
  .note-card__len { display: none; }
}

.note-rec--locked .field-hint { display: flex; align-items: flex-start; gap: 6px; }
.note-rec--locked svg { flex: none; margin-top: 2px; }

/* 運営にだけ見える、設定の足りないところ */
.note-rec--admin { background: #FFF9E3; border: 1px solid #FFE38F; }
.note-admin-list { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--ink-700); }
.note-admin-list li { margin: 2px 0; }

/* きろくの「うたった曲」 */
.log-item__songs {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0; font-size: var(--fs-xs); color: var(--sky-700);
  line-height: var(--lh-base);
}
.log-item__songs svg { flex: none; margin-top: 2px; }

/* まとめるボタン */
.note-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.note-sum .field-hint { flex: 1 1 220px; min-width: 0; margin: 0; }

/* 文字起こしを使いきったときの案内 */
.note-rec--locked {
  display: grid; gap: 8px; justify-items: start;
  background: linear-gradient(135deg, #FFF6F9, #FFF9E3);
  border: 1px solid var(--rose-200);
}
.note-lock__head {
  /* 見出しが2行に折り返したとき、中央ぞろえだとアイコンが真ん中に浮く */
  display: flex; align-items: flex-start; gap: 7px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-md); color: var(--rose-700);
}
.note-lock__head svg { flex: none; margin-top: 4px; }
.note-lock__text { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-base); }
.note-lock__note { margin: 0; font-size: var(--fs-xs); color: var(--ink-500); }

/* 残り1回の予告は、少し目につくように */
.note-last { color: var(--rose-600) !important; font-weight: 700; }

/* プレミアムで何ができるか */
.upsell-list {
  list-style: none; margin: 0 auto var(--space-5); padding: 0;
  display: grid; gap: 8px; width: fit-content; max-width: 100%;
  text-align: left;
}
.upsell-list li {
  position: relative; padding-left: 26px;
  font-size: var(--fs-sm); color: var(--ink-700);
}
.upsell-list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 9px;
  border-left: 3px solid var(--rose-500);
  border-bottom: 3px solid var(--rose-500);
  transform: rotate(-45deg);
  border-radius: 1px;
}