/* ================================================================
   Acona product page — dark, technical, precise.
   Jarvity is soft and playful; Acona is a studio tool, so this page
   goes the other way: near-black, cyan/indigo light, hard edges,
   monospaced labels. Scoped to body.acona only.
   ================================================================ */
body.acona{
  --cy:#3FE0CE;          /* Acona accent (note teal) */
  --bl:#4C8DFF;          /* editor blue */
  --am:#FF9F45;          /* pitch-curve orange */
  --panel:rgba(255,255,255,.028);
  --edge:rgba(255,255,255,.10);
  background:#05070C;
}
/* aurora glow behind everything, cool instead of gold */
body.acona::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 42vw at 78% -6%, rgba(76,141,255,.20), transparent 62%),
    radial-gradient(52vw 40vw at 6% 12%, rgba(63,224,206,.13), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(120,90,255,.13), transparent 64%);
}
body.acona header{backdrop-filter:blur(14px);background:rgba(5,7,12,.6);border-bottom:1px solid var(--edge)}
body.acona .logo .dot{background:var(--cy);box-shadow:0 0 12px var(--cy)}
body.acona .langsel .menu a.on{color:var(--cy)}
body.acona ::selection{background:var(--cy);color:#04131a}

.amain{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px}
.amain section{padding:clamp(64px,8vw,116px) 0;border:none}

/* ---------- hero ---------- */
.ahero{padding:clamp(104px,13vw,168px) 0 clamp(30px,4vw,54px) !important;
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px)}
.ahero-top{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.aicon{width:92px;height:92px;border-radius:22px;border:1px solid var(--edge);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(63,224,206,.10) inset;flex:none}
/* 「macOS」を含むため大文字化しない（MACOS になってしまう）。 */
.akicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.3em;
  color:var(--cy);margin-bottom:12px}
/* 製品名は Acona。大文字化すると ARIA になり実物と食い違うので掛けない。 */
.ahero h1{font-size:clamp(52px,10vw,124px);line-height:.86;font-weight:900;letter-spacing:-.015em;
  margin:0}
.ahero h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--cy),var(--bl) 58%,#A98CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.atag{font-size:clamp(15px,2vw,21px);color:var(--ink);font-weight:300;max-width:720px;margin:22px 0 0}
.asub{color:var(--sub);font-size:15px;max-width:680px;margin:14px 0 0}

/* status chip + actions */
.arow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.achip{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px;
  border:1px solid rgba(63,224,206,.34);background:rgba(63,224,206,.07);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.14em;
  color:var(--cy);text-transform:uppercase}
.achip i{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);
  animation:apulse 2.2s ease-in-out infinite;font-style:normal}
@keyframes apulse{50%{opacity:.28}}
.abtn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:8px;
  font-weight:700;font-size:14px;letter-spacing:.03em;transition:.22s;
  background:linear-gradient(100deg,var(--cy),var(--bl));color:#04121a}
.abtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(76,141,255,.30)}
.abtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge)}
.abtn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(63,224,206,.5);box-shadow:none}

/* ---------- the piano-roll showpiece ---------- */
.aroll{position:relative;border:1px solid var(--edge);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0A0E17,#070A11);
  box-shadow:0 40px 100px rgba(0,0,0,.6)}
.aroll-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--edge);
  background:rgba(255,255,255,.028)}
.aroll-bar b{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.aroll-bar b:nth-child(2){background:rgba(255,255,255,.11)}
.aroll-bar b:nth-child(3){background:rgba(255,255,255,.08)}
/* ここはアプリのウィンドウ名を模した箇所。製品名は Acona なので、
   大文字化すると実物と食い違う。 */
.aroll-bar span{margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.12em;color:var(--sub)}
.aroll svg{display:block;width:100%;height:auto}

/* ---------- section furniture ---------- */
.aeyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.34em;
  color:var(--cy);text-transform:uppercase;margin-bottom:18px}
.amain h2{font-size:clamp(30px,5.2vw,62px);line-height:1.02;font-weight:900;margin-bottom:14px}
.amain h2 .thin{font-weight:200}
.alead{font-size:clamp(16px,1.9vw,20px);color:var(--ink);font-weight:300;max-width:760px;margin-bottom:44px}

/* feature grid */
/* 【minmax の最小に生の px を置かない】(2026-08-29・実測)
   minmax(310px,1fr) は、⇒ 画面がそれより狭いときに【縮まない】。
   ⇒ 320px 幅で列が 310px を要求し、⇒ 頁ごと横に揺れていた（本体320 / 文書338）。
   ⇒ ⇒ min(310px,100%) にすると、⇒ 狭いときだけ 100% まで縮む。 */
.afeats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.afeat{position:relative;padding:28px 26px 30px;border:1px solid var(--edge);border-radius:12px;
  background:var(--panel);overflow:hidden;transition:border-color .3s,transform .3s,background .3s}
.afeat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);opacity:0;transition:opacity .3s}
.afeat:hover{transform:translateY(-4px);border-color:rgba(63,224,206,.32);background:rgba(255,255,255,.05)}
.afeat:hover::after{opacity:.9}
.afeat .no{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;
  color:var(--cy);opacity:.75;margin-bottom:16px}
.afeat h3{font-size:18px;font-weight:700;margin-bottom:9px}
.afeat p{font-size:14.5px;color:var(--sub);margin:0;line-height:1.75}

/* workflow rail */
.aflow{display:grid;gap:0}
.astep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);padding:30px 0;
  border-top:1px solid var(--edge);transition:background .3s,padding-left .35s cubic-bezier(.2,.8,.2,1)}
.astep:last-child{border-bottom:1px solid var(--edge)}
.astep:hover{background:linear-gradient(90deg,rgba(63,224,206,.055),transparent);padding-left:14px}
.astep .sn{font-size:clamp(30px,4.4vw,54px);font-weight:200;letter-spacing:-.04em;line-height:1;
  color:var(--cy);opacity:.85;min-width:2.2ch}
.astep h3{font-size:19px;margin-bottom:7px}
.astep p{margin:0;font-size:15px;color:var(--sub)}

/* spec table */
.aspec{width:100%;border-collapse:collapse;border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.aspec th,.aspec td{padding:17px 22px;border-bottom:1px solid var(--edge);text-align:left;font-size:15px}
.aspec th{width:32%;color:var(--sub);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,255,255,.022);white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.aspec td{color:var(--ink)}
.aspec tr:last-child th,.aspec tr:last-child td{border-bottom:none}

/* notice + closing call to action */
.anote{border-left:2px solid var(--am);border-radius:0 10px 10px 0;background:rgba(255,159,69,.07);
  padding:16px 20px;margin-top:26px;font-size:14.5px;color:var(--ink)}
.acta{text-align:center;border-top:1px solid var(--edge)}
.abanner{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--edge);margin:0 0 clamp(38px,5vw,64px);
  box-shadow:0 26px 60px rgba(0,0,0,.42)}
.acta h2{margin-bottom:16px}
.acta p{color:var(--sub);max-width:600px;margin:0 auto 26px}

@media(max-width:820px){
  .ahero-top{grid-template-columns:auto 1fr;gap:18px}
  .aicon{width:66px;height:66px;border-radius:16px}
  .aspec th,.aspec td{display:block;width:100%}
  .aspec th{border-bottom:none;padding-bottom:2px}
  .aspec td{padding-top:0}
  .astep{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  body.acona *{animation:none !important}
}

/* ---------- 手作業との対比 ----------
   機能一覧の前に置く。何のための道具なのかを先に伝えるため。
   左（手作業）を沈ませ、右（Acona）を起こして、視線が右へ落ちるようにする。 */
.acmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 0}
.acmp-col{padding:22px 24px;border-radius:14px;border:1px solid var(--edge);
  background:rgba(255,255,255,.02)}
.acmp-col.on{border-color:rgba(63,224,206,.34);background:rgba(63,224,206,.05)}
.acmp-h{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  letter-spacing:.18em;color:var(--sub);margin-bottom:14px}
.acmp-col.on .acmp-h{color:var(--cy)}
.acmp ul{list-style:none;display:grid;gap:11px}
.acmp li{font-size:14px;line-height:1.7;color:var(--sub);padding-left:20px;position:relative}
.acmp-col.on li{color:var(--ink)}
.acmp li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:1.5px;
  background:currentColor;opacity:.5;border-radius:1px}
.acmp-col.on li::before{width:8px;height:8px;top:.45em;left:0;border-radius:50%;
  background:none;border:1.5px solid var(--cy);opacity:1}
@media(max-width:720px){.acmp{grid-template-columns:1fr;gap:12px}}

/* 画面の帯（2026-08-22・代表指示「実写のスクショを複数貼って見栄えを上げる」）
   Jarvity と同じ体裁。横に流す帯・見出しなし・遅延読み込み。
   【Jarvity で踏んだ不具合をそのまま避ける】
     中身が容器より広いとき、justify-content:center は先頭を容器の外へ押し出し、
     scrollLeft は 0 のままなので【左へ戻せない】。safe を付けて、はみ出したら先頭寄せに落とす。
   【高さを揃えて幅を変える】── Acona の絵は窓の形が3通り（横長・正方に近い・16:9）。
     幅を揃えると縦がばらつき、帯が崩れる。店の並びも高さで揃えている。 */
.ashots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 20px 26px;margin:0 -20px;-webkit-overflow-scrolling:touch;
  justify-content:flex-start;justify-content:safe center;scrollbar-width:thin}
.ashots img{flex:0 0 auto;height:300px;width:auto;border-radius:14px;
  scroll-snap-align:center;box-shadow:0 14px 34px rgba(0,0,0,.28);background:#161a20}
@media (max-width:600px){ .ashots img{height:220px} }

/* ================================================================
   節ごとに絵を置く（2026-08-22 代表指示）
     「スクショ地帯が1つに固まっててビジュアライジングが足りない。
       各セクションで魅せる機能とスクショを合わせて載せないと」
   ⇒ hero 直後の1本の帯（.ashots）をやめ、絵をそれぞれの節へ移す。
      Acona の画面は横長なので、Jarvity のような左右2段ではなく
      【見出しの下に幅いっぱい】で置く。About だけは縦長なので表の横に添える。
   ================================================================ */
.ashot{margin:0 0 clamp(26px,4.5vw,44px);border-radius:14px;overflow:hidden;
  border:1px solid var(--edge);box-shadow:0 22px 56px rgba(0,0,0,.42);background:#161a20}
.ashot img{display:block;width:100%;height:auto}

.aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);
  gap:clamp(22px,4vw,48px);align-items:start}
.aside .ashot{margin:0}
@media(max-width:820px){ .aside{grid-template-columns:minmax(0,1fr)} }

/* 価格（2026-08-23 代表決裁。文言は法務の確定文言をそのまま）
   ・【無料枠を価格欄に並べる】── 返品特約を機能させるための要件（法務）。
     「無料の範囲で試せる。そのため返品しない」の特約は、価格欄に無料枠が無いと理由が立たない。
   ・【「体験版」と書かない】── 期限があるものの名前なので、
     利用者が「そのうち切れる」と誤解する。存在しない期限を理由に買わせる形になる。
   ・【2台まで／同じ機能】は欄の外に置く。欄の中だと買い切りの行だけ重くなり、
     比較の対称性が崩れる（法務）。 */
.aprice{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.aplan{padding:26px 24px 28px;border:1px solid var(--edge);border-radius:12px;
  background:var(--panel);transition:border-color .3s,transform .3s}
.aplan:hover{transform:translateY(-3px);border-color:rgba(63,224,206,.3)}
.aplan-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.aplan-n{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.aplan-p{font-size:clamp(21px,3vw,27px);font-weight:700;letter-spacing:-.01em}
.apricetag{font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(63,224,206,.14);color:var(--cy);letter-spacing:.04em}
.aplan p{margin:0;font-size:14.5px;line-height:1.85;color:var(--sub)}

/* 試聴（2026-08-26）。歌声のアプリは【聴かせないと伝わらない】ので hero の直後に置く。
   角丸は頁の他の絵と同じ 14px。⇒ 揃えないと、ここだけ浮く。 */
.alisten{max-width:560px;border:1px solid var(--edge);border-radius:14px;
  padding:22px 22px 18px;background:rgba(255,255,255,.03)}
.alisten audio{width:100%;display:block}
.alisten .anote{margin:14px 0 0;font-size:13px;line-height:1.85}
@media(max-width:640px){.alisten{padding:18px 16px 14px}}

.alisten .ab{display:grid;gap:6px;margin:0 0 16px}
.alisten .ab:last-of-type{margin-bottom:0}
.alisten .ab span{font-size:12px;letter-spacing:.06em;color:var(--sub)}

.af0{margin:18px 0 0}
.af0 img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--edge)}
.af0 figcaption{margin-top:8px;font-size:12.5px;color:var(--sub)}

/* 表の中のリンクは、色を付けないと本文と区別が付かない（代表指摘 2026-08-26） */
.aspec td a{color:var(--cy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(63,224,206,.5)}
.aspec td a:hover{text-decoration-color:var(--cy)}
.aspec td a::after{content:" ↗";font-size:.85em;opacity:.7;text-decoration:none}

/* ── 購入（2026-08-29）。⇒ 価格の3枚の下に置きます ────────────────── */
.abuy{margin-top:26px;padding:24px;border:1px solid var(--edge);border-radius:12px;
  background:rgba(255,255,255,.02)}
.abuy-l{display:block;font-size:13px;letter-spacing:.06em;color:var(--sub);margin-bottom:8px}
.abuy-s{width:100%;max-width:520px;padding:11px 13px;font:inherit;font-size:15px;
  color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--edge);
  border-radius:9px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),
    linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.abuy-s:focus{outline:2px solid rgba(63,224,206,.5);outline-offset:2px}
.abuy-msg{margin:12px 0 0;font-size:14px;line-height:1.8}
.abuy-msg.is-stop{color:#ffb4a8}
.abuy-msg.is-wait{color:var(--sub)}
.abuy-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
/* 【.abtn を再定義しない】(2026-08-29)
     .abtn は この頁の頭と足のボタン（X・サポート）が既に使っている。
     ⇒ 後ろで定義し直すと、そちらの見た目まで変わる。⇒ 実際に一度 そうした。
   ⇒ ボタンには class="abtn abuy-btn" を当て、【足りない分だけ】ここで足す。 */
/* 【購入ボタンと申込みボタンで印を分ける】(2026-08-29・実測して直した)
     申込みボタンにも abuy-btn を付けていた。⇒ 購入ボタンを止める処理が
     querySelectorAll('.abuy-btn') で申込みボタンまで掴み、⇒ 【押せなくなっていた】。
   ⇒ 見た目の土台は両方に当て、⇒ 【動かす対象の印は分ける】。 */
.abuy-btn,.anotify-b{border:0;cursor:pointer;font-family:inherit}
.abuy-btn:disabled,.anotify-b:disabled{opacity:.38;cursor:not-allowed}
.abuy-btn:disabled:hover,.anotify-b:disabled:hover{transform:none;box-shadow:none}
.abuy-btn:focus-visible,.anotify-b:focus-visible{outline:2px solid #fff;outline-offset:3px}
.abuy-fine{margin:14px 0 0;font-size:13px;line-height:1.85;color:var(--sub)}
.abuy-fine a{color:var(--accent,#3fe0ce);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.abuy-btn:hover{transform:none}}

/* ── 予約リスト（2026-08-29）──────────────────────────────── */
.anotify{margin-top:22px;padding-top:20px;border-top:1px solid var(--edge)}
.anotify-h{margin:0 0 8px;font-size:16px;font-weight:600}
.anotify-p{margin:0 0 14px;font-size:14px;line-height:1.85;color:var(--sub)}
.anotify-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.anotify-i{flex:1 1 260px;min-width:0;padding:13px 14px;font:inherit;font-size:15px;
  color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:9px}
.anotify-i:focus{outline:2px solid rgba(63,224,206,.5);outline-offset:2px}
.anotify-i:disabled{opacity:.5}
.anotify-msg{margin:12px 0 0;font-size:14px;line-height:1.8}
.anotify-msg.is-stop{color:#ffb4a8}
.anotify-msg.is-wait{color:var(--sub)}
.anotify-msg.is-done{color:var(--cy,#3fe0ce)}
.anotify-fine{margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--sub)}
.anotify-fine a{color:var(--cy,#3fe0ce);text-decoration:underline}

/* 最終確認の段（2026-09-02・特商法12条の6）
   【読めることが法の要件でございます】(規則44条「見やすい箇所に明瞭に判読できるように」)
   ⇒ ですので ここは意匠より【判読】を先に置きます。
     ・本文の字は小さくしない（14px 以上）
     ・行間を広く取る（1.9）
     ・色を薄くしない（--sub は使わない。⇒ 本文と同じ色）
   ⇒ ⇒ 畳みません。⇒ Stripe の画面が畳んで44条を満たさなかったのが、⇒ この段を作った理由でございます。 */
.aconfirm{margin:18px 0 0;padding:18px;border:1px solid var(--edge);border-radius:12px;
  background:rgba(255,255,255,.03)}
.acf-h{margin:0 0 14px;font-size:16px;font-weight:700;letter-spacing:.02em}
.acf-l{margin:0;display:block}
.acf-r{display:block;padding:11px 0;border-top:1px solid var(--edge)}
.acf-r:first-child{border-top:0;padding-top:0}
.acf-r dt{margin:0 0 4px;font-size:12.5px;font-weight:700;color:var(--sub);letter-spacing:.04em}
.acf-r dd{margin:0;font-size:14px;line-height:1.9}
.acf-next{margin:14px 0 0;font-size:13.5px;line-height:1.8}
.acf-b{margin:14px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.acf-back{background:none;border:0;padding:6px 2px;font:inherit;font-size:13.5px;
  color:var(--sub);text-decoration:underline;cursor:pointer}
.acf-back:hover{color:inherit}
@media (min-width:640px){
  .acf-r{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline}
  .acf-r dt{margin:0}
}