@charset "utf-8";

/* ============================================================
   おくりね｜Okurine  LP スタイル
   色は「聴く面＝インクブルー」「読む面＝生成りの白」の2面構成。
   琥珀（--amber）は「押せる場所・再生中の場所」にのみ使う。
   ============================================================ */

:root{
  --ink:        #101826;   /* 聴く面の地 */
  --ink-2:      #18212F;   /* 聴く面のカード */
  --ink-line:   #2A3547;
  --on-ink:     #F2EFE9;
  --on-ink-mut: #96A0B0;

  --paper:      #F7F5F1;   /* 読む面の地 */
  --paper-2:    #FFFFFF;
  --paper-line: #E2DED6;
  --on-paper:   #1B222E;
  --on-paper-mut:#5C6675;

  --amber:      #E8A33D;
  --amber-deep: #C4831F;
  --amber-soft: #F6E7CC;

  --alert:      #A8412F;
  --alert-soft: #F3E3DF;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", -apple-system, sans-serif;
  --mono:  "Inter", ui-monospace, "SF Mono", monospace;

  --read: 640px;
  --wide: 960px;

  /* ---- 読む面（明るい地）で使う別名。
     フォーム・受付枠ストリップなど、暗い面を使わない画面で参照する。 ---- */
  --surface:     #FFFFFF;
  --surface-2:   #F1EEE8;
  --rule:        #E2DED6;
  --rule-soft:   #EFECE6;
  --accent:      #C4831F;   /* 明るい地の上で読める琥珀。文字・罫・フォーカスに使う */
  --accent-line: #E8A33D;   /* 面に使う琥珀 */
  --accent-soft: #F6E7CC;
  --seal:        #A8412F;   /* エラー・注意 */
  --seal-soft:   #F3E3DF;
  --ink-3:       #7C8592;   /* 補助テキスト */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--on-paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.5; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- レイアウト ---------- */
.sec{ padding:76px 20px; }
.sec--ink{ background:var(--ink); color:var(--on-ink); }
.sec--paper{ background:var(--paper); color:var(--on-paper); }
.sec--white{ background:var(--paper-2); color:var(--on-paper); }
.read{ max-width:var(--read); margin:0 auto; }
.wide{ max-width:var(--wide); margin:0 auto; }

.eyebrow{
  font-size:11px; letter-spacing:.2em; font-weight:700;
  color:var(--amber-deep); margin-bottom:14px;
}
.sec--ink .eyebrow{ color:var(--amber); }
.sec h2{ font-size:clamp(22px,4.4vw,30px); margin-bottom:18px; }
.sec h3{ font-size:18px; margin:34px 0 10px; }
.lead{ color:var(--on-paper-mut); margin-bottom:26px; }
.sec--ink .lead{ color:var(--on-ink-mut); }

/* ---------- ヘッダー ---------- */
.top{
  position:sticky; top:0; z-index:60;
  background:rgba(16,24,38,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--ink-line);
  color:var(--on-ink);
}
.top__in{ max-width:var(--wide); margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px; }
.logo{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.06em; text-decoration:none; }
.logo small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--on-ink-mut); font-weight:400; margin-top:1px; }
.top__desc{ font-size:12px; color:var(--on-ink-mut); margin-left:4px; }
@media(max-width:720px){ .top__desc{ display:none; } }
.top__cta{
  margin-left:auto; background:var(--amber); color:#221704; border:0;
  padding:9px 18px; border-radius:2px; font-weight:700; font-size:13.5px;
  text-decoration:none; white-space:nowrap;
}
.top__cta:hover{ background:var(--amber-deep); color:#fff; }

/* ---------- ヒーロー ---------- */
.hero{ background:var(--ink); color:var(--on-ink); padding:64px 20px 52px; }
.hero__in{ max-width:var(--read); margin:0 auto; }
.hero h1{ font-size:clamp(27px,6vw,40px); letter-spacing:.01em; }
.hero__sub{ margin-top:16px; color:var(--on-ink-mut); font-size:15.5px; line-height:1.85; }
.hero__player{ margin-top:30px; }
.hero__facts{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--ink-line);
  display:flex; flex-wrap:wrap; gap:6px 26px; font-size:13px; color:var(--on-ink-mut);
}
.hero__facts b{ color:var(--on-ink); font-family:var(--mono); font-weight:600; }
.hero__note{ margin-top:14px; font-size:12.5px; color:var(--on-ink-mut); }

/* ---------- プレイヤー ---------- */
.player{
  background:var(--ink-2); border:1px solid var(--ink-line); border-radius:3px;
  padding:16px; color:var(--on-ink);
}
.player__row{ display:flex; align-items:center; gap:14px; }
.playbtn{
  flex:0 0 auto; width:58px; height:58px; border-radius:50%;
  background:var(--amber); border:0; cursor:pointer;
  display:grid; place-items:center; transition:background .15s;
}
.playbtn:hover{ background:var(--amber-deep); }
.playbtn svg{ width:22px; height:22px; fill:#221704; }
.playbtn--lg{ width:88px; height:88px; }
.playbtn--lg svg{ width:32px; height:32px; }
.playbtn[disabled]{ background:var(--ink-line); cursor:not-allowed; }
.playbtn[disabled] svg{ fill:var(--on-ink-mut); }

.wave{ flex:1 1 auto; height:52px; position:relative; cursor:pointer; min-width:0; }
.wave canvas{ width:100%; height:100%; display:block; }
.wave__empty{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:12px; color:var(--on-ink-mut); letter-spacing:.04em;
  border:1px dashed var(--ink-line); border-radius:2px; text-align:center; padding:0 8px;
}
.player__meta{
  display:flex; align-items:center; gap:14px; margin-top:11px;
  font-size:12px; color:var(--on-ink-mut); flex-wrap:wrap;
}
.player__time{ font-family:var(--mono); }
.player__toggle{
  background:transparent; border:1px solid var(--ink-line); color:var(--on-ink-mut);
  border-radius:2px; padding:3px 10px; font-size:11.5px; cursor:pointer;
}
.player__toggle[aria-pressed="true"]{ border-color:var(--amber); color:var(--amber); }
.player__warn{ margin-left:auto; }

/* ---------- 試聴ギャラリー ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tab{
  background:transparent; border:1px solid var(--ink-line); color:var(--on-ink-mut);
  padding:7px 15px; border-radius:2px; cursor:pointer; font-size:13.5px;
}
.tab[aria-selected="true"]{ border-color:var(--amber); color:var(--amber); background:rgba(232,163,61,.08); }
.voiceswitch{ display:flex; gap:8px; margin-bottom:24px; align-items:center; font-size:13px; color:var(--on-ink-mut); }

.cards{ display:grid; gap:16px; }
@media(min-width:760px){ .cards{ grid-template-columns:1fr 1fr; } }
.card{
  background:var(--ink-2); border:1px solid var(--ink-line); border-radius:3px; padding:18px;
}
.card h4{ font-size:15.5px; margin-bottom:10px; }
.card__lyric{
  margin-top:14px; padding:12px 14px; background:rgba(0,0,0,.22);
  border-left:2px solid var(--ink-line); font-size:13.5px; line-height:2;
}
.card__lyric .on{ color:var(--amber); }
.card__story{ margin-top:12px; font-size:13px; color:var(--on-ink-mut); line-height:1.85; }
.card__foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--ink-line);
  display:flex; align-items:center; gap:12px; font-size:12px; color:var(--on-ink-mut); flex-wrap:wrap; }
.card__cta{ margin-left:auto; color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(232,163,61,.4); font-size:13px; }

.disclaimer{
  margin-top:22px; padding:13px 16px; border:1px dashed var(--ink-line);
  font-size:12.5px; color:var(--on-ink-mut); line-height:1.8; border-radius:2px;
}

/* A/B 聴き比べ */
.ab{ display:grid; gap:14px; margin-top:20px; }
@media(min-width:760px){ .ab{ grid-template-columns:1fr 1fr; } }
.ab__col{ background:var(--ink-2); border:1px solid var(--ink-line); border-radius:3px; padding:18px; }
.ab__tag{ font-size:11px; letter-spacing:.12em; font-weight:700; color:var(--amber); margin-bottom:6px; }
.ab__price{ font-family:var(--mono); font-size:21px; font-weight:600; margin:4px 0 12px; }

/* ---------- 汎用テーブル ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--paper-line); border-radius:3px; background:var(--paper-2); margin-top:20px; }
table{ border-collapse:collapse; width:100%; font-size:14px; min-width:520px; }
th,td{ text-align:left; padding:11px 15px; border-bottom:1px solid var(--paper-line); vertical-align:top; line-height:1.7; }
thead th{ font-size:11.5px; letter-spacing:.08em; color:var(--on-paper-mut); background:var(--paper); font-weight:700; white-space:nowrap; }
tbody tr:last-child td{ border-bottom:0; }
td.n{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.yes{ color:var(--amber-deep); font-weight:700; }
.no{ color:var(--on-paper-mut); }

/* ---------- 料金 ---------- */
.plan{
  background:var(--paper-2); border:1px solid var(--paper-line); border-radius:3px;
  padding:24px; margin-bottom:14px;
}
.plan--star{ border:1px solid var(--amber); border-top:3px solid var(--amber); }
.plan__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.plan__name{ font-family:var(--serif); font-size:19px; font-weight:600; }
.plan__price{ font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.02em; }
.plan__price small{ font-size:12px; font-weight:400; color:var(--on-paper-mut); letter-spacing:0; }
.plan__lead{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--on-paper-mut); }
.plan__for{ margin-top:10px; font-size:14px; color:var(--on-paper-mut); }
.plan__list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:14px; }
.plan__list li{ padding-left:16px; position:relative; }
.plan__list li::before{ content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--amber); }

/* ---------- 受付枠ストリップ ---------- */
.capttl{ font-size:15px; margin:28px 0 12px; padding-left:11px; border-left:3px solid var(--accent); }
.capgrid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); }
.capcell{ background:var(--paper-2); border:1px solid var(--paper-line); border-radius:2px; padding:11px 10px; text-align:center; }
.capweek{ font-family:var(--mono); font-size:11px; color:var(--on-paper-mut); }
.caplabel{ font-size:13.5px; font-weight:700; margin-top:5px; }
.capsub{ font-size:11px; color:var(--on-paper-mut); margin-top:2px; min-height:1.4em; }
.cap--ok  .caplabel{ color:var(--accent); }
.cap--low { border-color:var(--amber); background:#FFFDF7; }
.cap--low .caplabel{ color:var(--amber); }
.cap--off { background:var(--paper); opacity:.62; }
.cap--off .caplabel{ color:var(--on-paper-mut); }
.capnote{ margin-top:12px; font-size:12.5px; color:var(--on-paper-mut); line-height:1.85; }
.capnote b{ color:var(--on-paper); }

/* ---------- シミュレーター ---------- */
.sim{ background:var(--paper-2); border:1px solid var(--paper-line); border-radius:3px; overflow:hidden; margin-top:22px; }
.sim__body{ padding:22px; display:grid; gap:22px; }
@media(min-width:820px){ .sim__body{ grid-template-columns:1fr 300px; align-items:start; } }
.field{ margin-bottom:20px; }
.field > label, .field__label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.hint{ font-size:12px; color:var(--on-paper-mut); margin-top:6px; line-height:1.7; }
input[type="date"]{
  font:inherit; font-family:var(--mono); padding:9px 11px; border:1px solid var(--paper-line);
  border-radius:2px; background:var(--paper-2); color:var(--on-paper); width:100%; max-width:220px;
}
.radios{ display:grid; gap:8px; }
.radio, .check{
  display:flex; align-items:flex-start; gap:10px; padding:11px 13px;
  border:1px solid var(--paper-line); border-radius:2px; cursor:pointer; background:var(--paper-2);
  font-size:14px; line-height:1.6;
}
.radio:has(input:checked), .check:has(input:checked){ border-color:var(--amber); background:#FFFBF3; }
.check--blocked{ opacity:.5; cursor:not-allowed; background:var(--paper); }
.radio input, .check input{ margin-top:5px; accent-color:var(--amber-deep); flex:0 0 auto; }
.radio__body,.check__body{ flex:1 1 auto; min-width:0; }
.radio__price,.check__price{ font-family:var(--mono); font-size:13px; color:var(--on-paper-mut); }
.check__why{ display:block; font-size:12px; color:var(--alert); margin-top:3px; }
.check__inc{ display:block; font-size:12px; color:var(--amber-deep); margin-top:3px; font-weight:700; }
select{ font:inherit; padding:7px 10px; border:1px solid var(--paper-line); border-radius:2px; background:var(--paper-2); color:var(--on-paper); }

.result{ background:var(--ink); color:var(--on-ink); border-radius:3px; padding:20px; position:sticky; top:76px; }
.result__total{ font-family:var(--mono); font-size:34px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.result__total small{ font-size:13px; font-weight:400; color:var(--on-ink-mut); }
.result__label{ font-size:12.5px; color:var(--on-ink-mut); margin-top:4px; }
.result__break{ margin-top:16px; border-top:1px solid var(--ink-line); padding-top:12px; font-size:13px; }
.result__break div{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.result__break .amt{ font-family:var(--mono); }
.result__break .sum{ border-top:1px solid var(--ink-line); margin-top:8px; padding-top:8px; font-weight:700; }
.result__dates{ margin-top:16px; border-top:1px solid var(--ink-line); padding-top:12px; font-size:12.5px; color:var(--on-ink-mut); line-height:1.9; }
.result__dates b{ color:var(--amber); font-family:var(--mono); }
.result__bad{ background:var(--alert-soft); color:var(--alert); border-radius:2px; padding:13px 15px; font-size:13px; line-height:1.8; }
.result__bad b{ font-family:var(--mono); }
.result__cta{
  display:block; text-align:center; margin-top:16px; background:var(--amber); color:#221704;
  padding:13px; border-radius:2px; font-weight:700; text-decoration:none; font-size:14.5px;
}
.result__cta:hover{ background:var(--amber-deep); color:#fff; }
.notes{ margin-top:18px; font-size:12px; color:var(--on-paper-mut); line-height:1.9; }
.notes li{ margin-bottom:4px; }

/* ---------- 流れ ---------- */
.flow{ list-style:none; margin:22px 0 0; padding:0; counter-reset:f; }
.flow li{
  counter-increment:f; position:relative; padding:0 0 22px 46px; border-left:1px solid var(--paper-line);
  margin-left:14px;
}
.flow li:last-child{ border-left-color:transparent; padding-bottom:0; }
.flow li::before{
  content:counter(f); position:absolute; left:-14px; top:0; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--amber); display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:600;
}
.flow b{ display:block; font-family:var(--serif); font-size:16px; margin-bottom:4px; }
.flow span{ font-size:14px; color:var(--on-paper-mut); }
.flow .you{ display:inline-block; font-size:11px; font-weight:700; color:#221704; background:var(--amber-soft); border:1px solid var(--amber); padding:1px 7px; border-radius:2px; margin-left:8px; vertical-align:2px; }

/* ---------- AI開示の2列 ---------- */
.split{ display:grid; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); border-radius:3px; overflow:hidden; margin-top:20px; }
@media(min-width:700px){ .split{ grid-template-columns:1fr 1fr; } }
.split__col{ background:var(--paper-2); padding:20px; }
.split__col h4{ font-size:15px; margin-bottom:12px; }
.split__col ul{ list-style:none; margin:0; padding:0; font-size:14px; display:flex; flex-direction:column; gap:9px; }
.split__col li{ padding-left:17px; position:relative; line-height:1.7; }
.split__col li::before{ content:""; position:absolute; left:0; top:10px; width:7px; height:2px; background:var(--on-paper-mut); }
.split__col--human li::before{ background:var(--amber); width:7px; height:7px; border-radius:50%; top:8px; }

/* ---------- FAQ ---------- */
details{ border-bottom:1px solid var(--paper-line); }
details summary{
  cursor:pointer; padding:16px 30px 16px 0; font-weight:700; font-size:15px; position:relative; list-style:none;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{
  content:"＋"; position:absolute; right:2px; top:16px; color:var(--amber-deep); font-weight:400;
}
details[open] summary::after{ content:"－"; }
details p{ padding:0 0 18px; font-size:14.5px; color:var(--on-paper-mut); line-height:1.95; }
.faqgroup{ margin-top:30px; }
.faqgroup > h3{ font-size:14px; letter-spacing:.06em; color:var(--amber-deep); border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:0; }

/* ---------- 空欄セクション ---------- */
.empty{
  border:1px dashed var(--paper-line); border-radius:3px; padding:24px;
  background:var(--paper-2); font-size:14.5px; color:var(--on-paper-mut); line-height:1.95;
}
.todo{
  display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600;
  background:var(--alert-soft); color:var(--alert); padding:1px 7px; border-radius:2px; margin-right:6px;
}
.ph{
  background:var(--paper-2); border:1px dashed var(--paper-line); border-radius:2px;
  aspect-ratio:4/3; display:grid; place-items:center; text-align:center;
  font-size:12px; color:var(--on-paper-mut); padding:12px; line-height:1.7;
}
.phgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:20px; }

/* ---------- 最終CTA ---------- */
.final{ text-align:center; }
.final h2{ font-size:clamp(22px,4.6vw,32px); }
.final .btn{
  display:inline-block; background:var(--amber); color:#221704; padding:16px 40px;
  border-radius:2px; font-weight:700; text-decoration:none; font-size:16px; margin-top:26px;
}
.final .btn:hover{ background:var(--amber-deep); color:#fff; }
.final .sub{ margin-top:14px; font-size:13px; color:var(--on-ink-mut); }

/* ---------- フッター ---------- */
.foot{ background:var(--ink); color:var(--on-ink-mut); padding:44px 20px 108px; font-size:13px; border-top:1px solid var(--ink-line); }
.foot__in{ max-width:var(--wide); margin:0 auto; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:18px; }
.foot__links a{ color:var(--on-ink); text-decoration:none; border-bottom:1px solid var(--ink-line); }
.foot__links a:hover{ border-bottom-color:var(--amber); }
.foot p{ line-height:1.9; }

/* ---------- モバイル固定バー ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(16,24,38,.97); border-top:1px solid var(--ink-line);
  color:var(--on-ink); display:none; align-items:center; gap:12px; padding:9px 14px;
  backdrop-filter:blur(8px);
}
.dock.on{ display:flex; }
.dock__mini{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.dock__title{ font-size:12px; color:var(--on-ink-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dock__cta{ background:var(--amber); color:#221704; padding:9px 16px; border-radius:2px; font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.playbtn--sm{ width:38px; height:38px; }
.playbtn--sm svg{ width:15px; height:15px; }
@media(max-width:760px){ body{ padding-bottom:60px; } }

/* ---------- 法務ページ ---------- */
.doc{ max-width:var(--read); margin:0 auto; padding:56px 20px 90px; }
.doc h1{ font-size:26px; margin-bottom:8px; }
.doc .updated{ font-size:12.5px; color:var(--on-paper-mut); margin-bottom:32px; font-family:var(--mono); }
.doc h2{ font-size:17px; margin:34px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--paper-line); }
.doc p, .doc li{ font-size:14.5px; line-height:1.95; color:var(--on-paper); }
.doc ul, .doc ol{ padding-left:20px; }
.doc li{ margin-bottom:7px; }
.doc dl{ margin:0; }
.doc dt{ font-weight:700; font-size:13px; margin-top:16px; }
.doc dd{ margin:2px 0 0; font-size:14.5px; }
.doc .back{ display:inline-block; margin-bottom:26px; font-size:13px; color:var(--amber-deep); text-decoration:none; }
.warnbox{
  background:var(--alert-soft); border-left:3px solid var(--alert); padding:14px 17px;
  font-size:13.5px; line-height:1.85; margin:22px 0; border-radius:0 2px 2px 0;
}
.warnbox b{ color:var(--alert); }