/* ============================================================
   コンポーネント
   命名は BEM 風（.block__element--modifier）
   ============================================================ */

/* --- 見出しの型 -------------------------------------------- */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  font-weight: 700;
  margin-bottom: var(--s-3);
  display: block;
}
.section-head { margin-bottom: var(--s-6); }
.section-head h2 { font-size: var(--t-xl); }
.section-head p  { margin-top: var(--s-3); color: var(--c-mute); font-size: var(--t-sm); }
.section-head--center { text-align: center; }
.section-head--center p { margin-inline: auto; max-width: 56rem; }

.rule { border: 0; border-top: 1px solid var(--c-line); margin-block: var(--s-6); }

/* --- ボタン ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 1.3rem 2.4rem;
  font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--ls-base);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--c-accent); color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  min-height: 44px;   /* タップ領域 */
}
.btn:hover { background: var(--c-accent-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: #fff; }
.btn--light { background: #fff; color: var(--c-accent); border-color: var(--c-line); }
.btn--light:hover { background: var(--c-accent-bg); color: var(--c-accent-ink); }
.btn--block { width: 100%; }
.btn--sm { padding: .9rem 1.6rem; font-size: var(--t-xs); min-height: 36px; }

.link-arrow { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--ls-base); }
.link-arrow::after { content: " →"; }

/* --- ヘッダー ---------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-3);
}
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--f-serif); font-size: var(--t-lg); color: var(--c-ink); letter-spacing: .12em; }
.brand__sub  { font-size: 0.95rem; letter-spacing: .2em; color: var(--c-mute); margin-top: 3px; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link { color: var(--c-body); font-size: var(--t-sm); white-space: nowrap; }
.nav__link:hover { color: var(--c-accent); }
.nav__link.is-active { color: var(--c-accent); font-weight: 700; }
.nav__link--strong { color: var(--c-accent); font-weight: 700; }

.nav-toggle {
  background: none; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  width: 44px; height: 44px; display: grid; place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--c-ink);
  transition: transform var(--dur) var(--ease);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4.5px); }

.drawer {
  display: none; border-top: 1px solid var(--c-line); background: var(--c-paper);
  padding: var(--s-4) 0 var(--s-5);
}
.drawer.is-open { display: block; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--c-line); }
.drawer__list a,
.drawer__list .linkish { display: block; padding: var(--s-4) 0; color: var(--c-ink); font-size: var(--t-base); }

@media (min-width: 1000px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .drawer { display: none !important; }
}

/* --- フッター ---------------------------------------------- */
.site-footer { background: var(--c-ink); color: rgba(255,255,255,.6); padding-block: var(--s-7); font-size: var(--t-sm); }
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--f-sans); font-size: var(--t-xs); letter-spacing: var(--ls-wide); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer__note { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--s-6); padding-top: var(--s-4); font-size: var(--t-xs); }

/* --- ヒーロー ---------------------------------------------- */
.hero { display: grid; background: var(--c-paper); }
.hero__media {
  min-height: 34rem;
  background: linear-gradient(160deg, #4A4540, #25211E);
  display: grid; place-items: center; color: rgba(255,255,255,.35);
  font-size: var(--t-sm); letter-spacing: var(--ls-wide); text-align: center; padding: var(--s-5);
}
.hero__body { padding: var(--s-7) var(--w-gutter); display: flex; flex-direction: column; justify-content: center; }
.hero__title { font-size: var(--t-2xl); line-height: 1.35; }
.hero__title em { font-style: normal; color: var(--c-accent); }
.hero__lead { margin-top: var(--s-4); font-size: var(--t-sm); line-height: var(--lh-loose); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 46fr 54fr; }
  .hero__media { min-height: 46rem; }
  .hero__body { padding: var(--s-8) var(--s-7); }
  .hero__title { font-size: var(--t-3xl); }
}

/* --- 実績バー ---------------------------------------------- */
.proof { background: var(--c-ink); color: #fff; }
.proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.proof__item { padding: var(--s-5) var(--s-3); text-align: center; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.proof__item:nth-child(2n) { border-right: none; }
.proof__num { display: block; font-family: var(--f-serif); font-size: var(--t-xl); color: #fff; letter-spacing: var(--ls-tight); }
.proof__num small { font-size: var(--t-sm); margin-left: 2px; }
.proof__label { font-size: var(--t-xs); color: rgba(255,255,255,.62); letter-spacing: var(--ls-base); }
@media (min-width: 900px) {
  .proof__grid { grid-template-columns: repeat(4, 1fr); }
  .proof__item { border-bottom: none; }
  .proof__item:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.14); }
  .proof__item:last-child { border-right: none; }
}

/* --- カード ------------------------------------------------ */
.card { background: #fff; border: 1px solid var(--c-line); display: flex; flex-direction: column; height: 100%; }
.card__media { aspect-ratio: 16 / 9; background: linear-gradient(150deg, #6D6156, #3B342E); display: grid; place-items: center; color: rgba(255,255,255,.4); font-size: var(--t-xs); letter-spacing: var(--ls-wide); }
.card--primary .card__media { background: linear-gradient(150deg, var(--c-accent), var(--c-accent-ink)); }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: var(--t-md); margin-bottom: var(--s-3); }
.card__text { font-size: var(--t-sm); line-height: var(--lh-base); flex: 1; }
.card__foot { margin-top: var(--s-4); }
.card__badge { align-self: flex-start; background: var(--c-ink); color: #fff; font-size: var(--t-xs); padding: .3rem 1rem; letter-spacing: var(--ls-base); margin-bottom: var(--s-3); }

.panel { background: var(--c-paper); border: 1px solid var(--c-line); padding: var(--s-5); }
.panel--accent { background: var(--c-accent-bg); border-color: var(--c-accent); }
.panel--ink { background: var(--c-ink); color: rgba(255,255,255,.76); border-color: var(--c-ink); }
.panel--quote { border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent); background: var(--c-paper); }

/* --- 音声サンプル ------------------------------------------ */
.sample { background: var(--c-paper); border: 1px solid var(--c-line); padding: var(--s-4); }
.sample__title { font-family: var(--f-serif); font-size: var(--t-md); color: var(--c-ink); margin-bottom: var(--s-3); }
.sample__row { display: flex; align-items: center; gap: var(--s-3); }
.play {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-accent); border: 0; display: grid; place-items: center;
}
.play::after { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.play.is-playing::after { border: 0; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; margin-left: 0; }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 30px; flex: 1; }
.wave i { flex: 1; background: #D8CFC4; display: block; transition: background var(--dur) var(--ease); }
.wave i.is-on { background: var(--c-accent-soft); }
.sample__note { font-size: var(--t-xs); color: var(--c-mute); margin-top: var(--s-3); line-height: 1.8; }

/* --- 6軸スコア --------------------------------------------- */
.axes { display: flex; flex-direction: column; gap: var(--s-3); }
.axis { display: grid; grid-template-columns: 8.5rem 1fr 5.5rem; align-items: center; gap: var(--s-3); }
.axis__name { font-size: var(--t-sm); color: var(--c-body); }
.axis__track { position: relative; height: 10px; background: #EDE7DE; }
.axis__fill { position: absolute; inset-block: 0; left: 0; background: var(--c-accent); transition: width 600ms var(--ease); }
.axis__target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--c-ink); }
.axis__judge { font-size: var(--t-xs); text-align: right; color: var(--c-mute); }
.axis__judge[data-level="good"] { color: var(--c-ok); }
.axis__judge[data-level="watch"] { color: var(--c-warn); }
.axis__judge[data-level="fix"] { color: var(--c-bad); font-weight: 700; }
.axis-legend { font-size: var(--t-xs); color: var(--c-mute); margin-top: var(--s-3); }

/* --- 指標タイル -------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.kpi { background: #fff; padding: var(--s-4); }
.kpi__value { font-family: var(--f-serif); font-size: var(--t-xl); color: var(--c-ink); line-height: 1.2; }
.kpi__value small { font-size: var(--t-sm); }
.kpi__value .up { color: var(--c-accent); }
.kpi__label { font-size: var(--t-xs); color: var(--c-mute); margin-top: var(--s-2); line-height: 1.7; }
@media (min-width: 900px) { .kpis--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- ステップ ---------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: #fff; padding: var(--s-5); }
.step--ink { background: var(--c-ink); color: rgba(255,255,255,.76); }
.step__num { font-size: var(--t-xs); letter-spacing: var(--ls-wide); color: var(--c-accent); margin-bottom: var(--s-3); display: block; }
.step__title { font-size: var(--t-md); margin-bottom: var(--s-3); }
.step--ink .step__title { color: #fff; }
.step__owner { display: inline-block; font-size: var(--t-xs); padding: .2rem .9rem; letter-spacing: var(--ls-base); margin-bottom: var(--s-3); }
.owner--ai { background: var(--c-accent); color: #fff; }
.owner--human { background: var(--c-ink); color: #fff; }
.step ul { margin: 0; padding-left: 1.4em; font-size: var(--t-sm); }

/* --- テーブル ---------------------------------------------- */
.table { font-size: var(--t-sm); min-width: 56rem; }
.table th, .table td { border: 1px solid var(--c-line); padding: var(--s-3); text-align: left; vertical-align: top; line-height: 1.8; }
.table thead th { background: var(--c-ink); color: #fff; font-size: var(--t-xs); letter-spacing: var(--ls-base); font-weight: 600; }
.table tbody tr:nth-child(even) { background: var(--c-paper); }
.table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--c-paper-2); padding: .1em .4em; }

/* --- フォーム ---------------------------------------------- */
.field { margin-bottom: var(--s-4); }
.field__label { display: block; font-size: var(--t-xs); color: var(--c-mute); letter-spacing: var(--ls-base); margin-bottom: var(--s-2); }
.field__label .req { color: var(--c-accent); margin-left: .4em; }
.input, .select, .textarea {
  width: 100%; padding: 1.2rem 1.4rem; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent); outline: none; }
.textarea { min-height: 11rem; resize: vertical; }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

/* 用件ピッカー（問い合わせの分岐） */
.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); margin-bottom: var(--s-5); }
@media (min-width: 900px) { .picker { grid-template-columns: repeat(5, 1fr); } }
.picker__btn {
  border: 1px solid var(--c-line); background: #fff; padding: 1.2rem .8rem;
  font-size: var(--t-xs); text-align: center; border-radius: var(--r-sm); min-height: 48px;
  transition: all var(--dur) var(--ease);
}
.picker__btn[aria-selected="true"] { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-accent); font-weight: 700; }

/* --- タグ・バッジ ------------------------------------------ */
.tag { display: inline-block; font-size: var(--t-xs); letter-spacing: var(--ls-base); padding: .3rem 1rem; border: 1px solid var(--c-line); color: var(--c-mute); }
.tag--accent { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.tag--ink { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* --- パンくず ---------------------------------------------- */
.crumbs { font-size: var(--t-xs); color: var(--c-mute); padding-block: var(--s-3); }
.crumbs a { color: var(--c-mute); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs span + span::before { content: " / "; margin-inline: .5em; }

/* --- アプリ側（AIコーチ）のシェル --------------------------- */
.app-shell { display: grid; min-height: 100vh; }
@media (min-width: 1000px) { .app-shell { grid-template-columns: 24rem 1fr; } }
.app-side { background: var(--c-ink); color: rgba(255,255,255,.65); padding: var(--s-5) var(--s-4); }
.app-side__brand { color: #fff; font-family: var(--f-serif); font-size: var(--t-md); letter-spacing: .1em; margin-bottom: var(--s-5); display: block; }
.app-side__nav { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.app-side__nav li { margin: 0; }
.app-side__nav a,
.app-side__nav .linkish { display: block; padding: var(--s-3) var(--s-3); color: rgba(255,255,255,.65); font-size: var(--t-sm); border-left: 2px solid transparent; }
.app-side__nav a:hover,
.app-side__nav .linkish:hover { color: #fff; }
.app-side__nav a.is-active { color: #fff; background: rgba(255,255,255,.06); border-left-color: var(--c-accent); }
.app-main { padding: var(--s-5) var(--w-gutter) var(--s-8); background: var(--c-paper); }
@media (min-width: 1000px) { .app-main { padding: var(--s-6) var(--s-7) var(--s-9); } }
.app-head { margin-bottom: var(--s-5); }
.app-head h1 { font-size: var(--t-xl); }
.app-head p { color: var(--c-mute); font-size: var(--t-sm); margin-top: var(--s-2); }

/* --- 録音ボタン -------------------------------------------- */
.recorder { text-align: center; padding: var(--s-5) 0; }
.rec-btn {
  width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--c-accent);
  display: grid; place-items: center; margin-inline: auto; position: relative;
  transition: transform var(--dur) var(--ease);
}
.rec-btn:hover { transform: scale(1.04); }
.rec-btn.is-recording { background: var(--c-bad); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(168,69,47,.4);} 50% { box-shadow: 0 0 0 14px rgba(168,69,47,0);} }
.rec-btn__icon { width: 18px; height: 26px; border-radius: 9px; background: #fff; }
.rec-btn.is-recording .rec-btn__icon { border-radius: 3px; width: 20px; height: 20px; }
.recorder__hint { font-size: var(--t-sm); color: var(--c-mute); margin-top: var(--s-3); }

/* --- 連続日数 ---------------------------------------------- */
.streak { display: flex; gap: var(--s-1); margin-top: var(--s-4); }
.streak i { flex: 1; height: 26px; background: #EDE7DE; display: block; border-radius: 1px; }
.streak i.is-on { background: var(--c-accent); }

/* --- 通知・注記 -------------------------------------------- */
.notice { border-left: 4px solid var(--c-accent); background: var(--c-accent-bg); padding: var(--s-4); font-size: var(--t-sm); }
.notice--muted { border-left-color: var(--c-line); background: var(--c-paper); color: var(--c-mute); }
.proto-flag {
  background: var(--c-ink); color: rgba(255,255,255,.82); font-size: var(--t-xs);
  padding: var(--s-2) var(--w-gutter); text-align: center; letter-spacing: var(--ls-base);
}
.proto-flag strong { color: var(--c-accent-soft); }

/* リンクの見た目のボタン。GETで踏ませたくない操作（ログアウト）に使う */
.logout-form { display: contents; }
.linkish { background: none; border: 0; margin: 0; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.linkish:hover { color: var(--c-accent); }

/* 録音した音声の一覧（今日の1分） */
.rec-error { text-align: center; color: var(--c-bad); margin-top: var(--s-3); }
.rec-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.rec-item { margin: 0 0 var(--s-4); }
.rec-item:last-child { margin-bottom: 0; }
.rec-item audio { width: 100%; display: block; }
.rec-item p { margin-top: var(--s-2); }