/* 【触るのはここだけ】。生成のたびに書き出されるので、
 * 直す時は docs/pikoaHp/*.dc.html の <style> を直して流し直すこと */
:root{
  color-scheme: light dark;
  --brand:#16C2D5; --brand-ink:#0A7C8C;
  --bg:#FFFFFF; --surface:#F4FAFB; --fg:#14181A; --muted:#5C6B70; --line:#DCE6E8;
  --brand-soft:#EAF7F9; --brand-deep:#0E9AAA; --shadow:0 14px 40px rgba(10,124,140,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --brand:#16C2D5; --brand-ink:#4FD8E8;
    --bg:#0D1214; --surface:#151D20; --fg:#ECEFF0; --muted:#93A2A7; --line:#263135;
    --brand-soft:#12262A; --brand-deep:#4FD8E8; --shadow:0 14px 40px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;line-height:2}
a{color:var(--brand-ink);text-decoration:none}
a:hover{color:var(--brand-deep);text-decoration:underline}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
li{list-style:none}
summary::-webkit-details-marker{display:none}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
@keyframes eq{0%,100%{height:22%}50%{height:88%}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important}
}

/* 01 — ASK のシミュレーター。【JSは使わない】ラジオ＋兄弟セレクタで切り替える */
.sim-panel{display:none;position:absolute;left:0;top:0;width:393px;height:852px}
#sim1:checked ~ * .sim-p1,
#sim2:checked ~ * .sim-p2{display:block}
#sim1:checked ~ * label[for="sim1"],
#sim2:checked ~ * label[for="sim2"]{background:var(--brand);color:#fff}
.sim-tab{background:var(--surface);transition:background .2s ease}
.sim-tab:hover{box-shadow:0 0 0 1px var(--brand-ink)}

/* モードの切り替え。アプリの ThoroughModeSwitch に寄せてある */
.mode-thumb{position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);
  border-radius:7px;background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:transform .28s ease,background .28s ease}
.mode-label{color:var(--muted);transition:color .28s ease,font-weight .28s ease}
#mode-fast:checked ~ * .mode-label[for="mode-fast"]{color:var(--fg);font-weight:600}
#mode-deep:checked ~ * .mode-thumb{transform:translateX(100%);background:var(--brand)}
#mode-deep:checked ~ * .mode-label[for="mode-deep"]{color:#fff;font-weight:600}
.mode-cap{display:none}
#mode-fast:checked ~ * .mode-cap-fast,
#mode-deep:checked ~ * .mode-cap-deep{display:block}

/* 端末の中身は実機の論理サイズ(393×852)で組み、枠に合わせて縮める。
   【1:1で組んでから縮めること】。枠の大きさに合わせて直に組むと、
   文字と余白の比が実機とずれて崩れて見える。

   【倍率は数値で書くこと】。`scale(calc(200px / 393))` のように
   長さを割っても**倍率にはならず**、transform ごと無効になる。
   枠の幅を固定にして、そこから出した数値を直に置く。
     枠300px → 画面 300×0.8889 = 266.7px → 266.7/393 = 0.6785 */
.dev-screen{position:absolute;left:5.333%;top:2.5%;width:89.333%;height:95%;overflow:hidden;border-radius:12%/5.5%;background:#F2F2F7}
.dev-frame{width:300px}
.dev-scale{width:393px;height:852px;transform-origin:top left;transform:scale(.6819)}
@media (max-width:420px){
  .dev-frame{width:260px}
  .dev-scale{transform:scale(.5910)}
}

/* 改行を入れてあるテキストは、器が狭くなったら文字も縮める。
   【`min()` なので、ふだんは何も変わらない】。
   一番長い行が器に収まらなくなった時だけ効く。
   係数は「100 ÷ 一番長い行のem幅 ÷ 1.05」を実測から出したもの */
.fit1{font-size:37px}
.fit1{font-size:min(37px,4.5cqi)}
.fit3{font-size:23px}
.fit3{font-size:min(23px,7.42cqi)}
.fit5{font-size:27px}
.fit5{font-size:min(27px,8.7cqi)}
.fit6{font-size:34px}
.fit6{font-size:min(34px,7.47cqi)}
.fit7{font-size:14.5px}
.fit7{font-size:min(14.5px,4.41cqi)}
.fit8{font-size:34px}
.fit8{font-size:min(34px,4.71cqi)}
.fit9{font-size:13.5px}
.fit9{font-size:min(13.5px,10.23cqi)}
.fit10{font-size:13.5px}
.fit10{font-size:min(13.5px,15.26cqi)}
.fit11{font-size:13.5px}
.fit11{font-size:min(13.5px,10.27cqi)}
.fit12{font-size:34px}
.fit12{font-size:min(34px,9.89cqi)}
.fit13{font-size:15.5px}
.fit13{font-size:min(15.5px,8.04cqi)}
.fit14{font-size:13.5px}
.fit14{font-size:min(13.5px,7.09cqi)}
.fit15{font-size:15.5px}
.fit15{font-size:min(15.5px,9.98cqi)}
.fit16{font-size:15.5px}
.fit16{font-size:min(15.5px,11.23cqi)}
.fit17{font-size:13.5px}
.fit17{font-size:min(13.5px,5.38cqi)}
.fit18{font-size:38px}
.fit18{font-size:min(38px,11.06cqi)}

/* 【幅が足りない時は消すこと】(2026/08/28)。
   見出しのリンクは `justify-content:flex-end` と `overflow-x:auto` の
   組み合わせで、狭いと**左へはみ出して掴めない位置**へ行く。
   リンク先はどれもページ内なので、隠しても送れば着く。
   端末まわりの吹き出しは枠の外側(-124px 等)に置いてあるので画面から出る */
header nav{display:flex;align-items:center;justify-content:flex-end;overflow-x:auto}
/* 端末まわりの吹き出しは、端末より手前に出す。
   枠の画像が `position:relative` で後ろに書かれているため、
   何も指定しないと**吹き出しの左半分が端末の下に潜る**
   (「できました！ 全18曲」が「きました！ 全18曲」に見えていた) */
@media (max-width:760px){
  header nav{display:none}
}

/* ── 端末の中身を実機のスクリーンショットにする ──────────────
   【曲リストだけモックにすること】(2026/08/29 ユーザー指定)。
   タブバー・入力欄・上部のPIKOA AI・依頼と返事の吹き出し・
   プレイリスト名は実機のまま。**出力された曲の一覧だけ**を塗り替える。
   他社のジャケットと曲名を公開ページに出さずに済む。
   位置はすべて実測値。1論理px = 3.2824 実機px */
.dev-shot{position:absolute;left:0;top:0;width:393px;height:852px;display:block}
.patch{position:absolute;left:0;width:393px;background:#F2F2F7}
.mock-list{position:absolute;left:0;width:393px;overflow:hidden;background:#F2F2F7}
.mock-fade{position:absolute;left:0;right:0;bottom:0;height:26px;
  background:linear-gradient(to bottom,rgba(242,242,247,0),#F2F2F7)}
.mock-row{position:absolute;left:14.6px;width:363.8px;height:67.0px;
  border-radius:14px;background:#F5F5F7}
.mock-art{position:absolute;left:9.2px;top:9.1px;width:40.2px;height:40.2px;
  border-radius:5px;background:linear-gradient(140deg,#BDE9F0,#8FD9E6);
  display:grid;place-items:center}
.mock-art>span{width:0;height:0;border-left:8px solid rgba(255,255,255,.95);
  border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
/* 曲名・アーティスト・理由が入る場所は、帯で示す。
   【仮の文字を置かないこと】(2026/08/29)。日本語の仮テキストは本物の曲に
   見えてしまい、記号(○△□×)にすると安っぽく見えた。
   色はアプリの文字色をそのまま薄めたものなので、並びは実機と同じに見える */
.mock-t,.mock-a,.mock-r{position:absolute;left:61px;border-radius:99px}
.mock-t{top:14px;height:8.5px;background:rgba(20,24,26,.34)}
.mock-a{top:31px;height:7px;background:rgba(48,176,199,.46)}
.mock-r{top:45.5px;height:6px;background:rgba(138,148,152,.38)}
.mock-add{position:absolute;left:343.5px;top:26px;width:15px;height:15px;
  border-radius:50%;border:1.2px solid #30B0C7;color:#30B0C7;
  display:grid;place-items:center;font-size:10px;line-height:1}


/* 見つけるの端末のタブバーは、実機から切り出したものを敷く。
   自前で描いていたものはアイコンが無く、実機と揃っていなかった。
   画面の左右の余白(18px)と下の余白(12px)の外まで伸ばす */
.tabbar-real{flex:0 0 auto;display:block;width:393px;margin:12px -18px -12px}

/* ヒーローの2つの言葉は、雲のような吹き出しに入れて漂わせる。
   【見出しに並べないこと】(2026/08/29 ユーザー指定)。4行そろうと読みづらい。
   下に付けた2つの丸で、考えている時の吹き出しに見せている。
   **横並びが入らない幅では折り返す**ので、狭い画面でもはみ出さない */
/* 見出しの2行のあいだに挟む。【余白を空けすぎないこと】(2026/08/29 指定)。
   下の余白は、しっぽの丸が出る高さぶんだけにしてある */
.clouds{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(14px,2.2vw,32px);margin:10px 0 24px;line-height:1.8}
.cloud{position:relative;display:inline-block;
  padding:clamp(16px,2.1vw,23px) clamp(20px,2.6vw,32px) clamp(9px,1.1vw,13px);
  font-size:clamp(13px,1.55vw,17px);font-weight:700;letter-spacing:.05em;
  line-height:1.8;white-space:nowrap;
  box-shadow:0 14px 36px rgba(10,124,140,.16)}
.cloud::before,.cloud::after{content:"";position:absolute;
  border-radius:50%;background:inherit;box-shadow:inherit}
/* しっぽの丸。左の雲だけ右から出す(向かい合う形になる) */
.cloud::before{width:12px;height:12px;left:26px;bottom:-9px}
.cloud::after{width:6px;height:6px;left:15px;bottom:-19px}
.cloud-a::before{left:auto;right:26px}
.cloud-a::after{left:auto;right:15px}
/* 地が薄い色なので、雲は地より白くして輪郭を出す。
   形を左右で少し変えて、同じものが2つ並んで見えないようにしてある */
.cloud-a{background:var(--bg);color:var(--brand-ink);
  border-radius:44% 56% 40% 60%/64% 68% 32% 36%;
  animation:cloud-a 7.4s ease-in-out infinite}
.cloud-b{background:var(--bg);color:var(--fg);
  border-radius:44% 56% 42% 58%/62% 66% 34% 38%;
  animation:cloud-b 9s ease-in-out infinite}
@keyframes cloud-a{0%,100%{transform:translate(-7px,3px) rotate(-1.4deg)}
  50%{transform:translate(7px,-9px) rotate(-1.4deg)}}
@keyframes cloud-b{0%,100%{transform:translate(6px,-6px) rotate(1.6deg)}
  50%{transform:translate(-6px,6px) rotate(1.6deg)}}
@media (prefers-reduced-motion:reduce){.cloud-a,.cloud-b{animation:none}}

/* App Store の公式バッジ。【加工しないこと】。色や透明度を変えると
   Appleのバッジの使い方に反する。まだ押せないことは下の注釈で伝える */
.asb{display:block;width:auto}
.asb-link{display:inline-block;text-decoration:none}
.asb-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:11px}
.asb-note{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}

/* ── 狭い画面のメニュー ────────────────────────────────
   【JSを使わずに開閉する】。チェックボックスと `~` で切り替える。
   `hidden` にせず画面から見えない形にしてあるのは、キーボードでも押せるように */
.menu-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none;flex:0 0 auto;width:42px;height:42px;border-radius:13px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;background:var(--surface);border:1px solid var(--line)}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--fg);
  transition:transform .2s ease,opacity .2s ease}
.menu-toggle:focus-visible ~ .burger{outline:2px solid var(--brand);outline-offset:2px}
.menu-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle:checked ~ .burger span:nth-child(2){opacity:0}
.menu-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:760px){
  .brand{margin-right:auto}
  .burger{display:flex}
  .menu-toggle:checked ~ nav{display:flex;position:absolute;left:0;right:0;top:calc(100% + 10px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:4px 8px;
    background:var(--bg);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 18px 34px rgba(10,124,140,.14);overflow:visible}
  /* 【角を丸めないこと】。区切り線の端が一緒に丸まって、輪郭が浮いて見える */
  .menu-toggle:checked ~ nav a{padding:16px 14px;font-size:15px;
    border-radius:0;text-align:left}
  .menu-toggle:checked ~ nav a + a{border-top:1px solid var(--line)}
}

/* ── 決めた位置で折り返す文字 ────────────────────────────
   広い画面では、器に収まる大きさまで縮めて**改行の位置を保つ**。
   【狭い画面では素直に折り返させること】(2026/08/29 ユーザー指定)。
   縮め続けると、見出しが本文より小さくなって読みづらい。
   760px以下では折り返しを許し、大きさは設計値の7割前後に置き直す。
   さらに375pxより狭いと vw で縮む。320pxで「える。」だけの行が出ていた */
.fit1,.fit3,.fit5,.fit6,.fit7,.fit8,.fit9,.fit10,.fit11,.fit12,.fit13,.fit14,.fit15,.fit16,.fit17,.fit18{white-space:nowrap}
@media (max-width:760px){
  .fit1,.fit3,.fit5,.fit6,.fit7,.fit8,.fit9,.fit10,.fit11,.fit12,.fit13,.fit14,.fit15,.fit16,.fit17,.fit18{white-space:normal}
    .fit1{font-size:min(26.6px,7.09vw)}
  .fit3{font-size:min(16.6px,4.43vw)}
  .fit5{font-size:min(19.4px,5.17vw)}
  .fit6{font-size:min(24.5px,6.53vw)}
  .fit8{font-size:min(24.5px,6.53vw)}
  .fit12{font-size:min(24.5px,6.53vw)}
  .fit13{font-size:min(15.0px,4.00vw)}
  .fit15{font-size:min(15.0px,4.00vw)}
  .fit16{font-size:min(15.0px,4.00vw)}
  .fit18{font-size:min(27.4px,7.31vw)}
}

/* 「」でくくった言葉は、途中で折り返さない。
   【日本語はかなの間ならどこでも折り返される】。
   「あの曲」が「あ／の曲」に割れていた */
.nb{white-space:nowrap}

/* 広い画面向けに入れてある <br> は、狭い画面ではやめて素直に流す。
   そのままだと「…を伝／えるだけで、」のような半端な行が出る */
@media (max-width:760px){
  .flow br{display:none}
}

/* 「はじめる」の中の印。アプリアイコンにある3本線を写したもの。
   位置と傾きは AppIcon-1024.png を測って出した */
.mark3{position:relative;flex:0 0 auto;width:20px;height:20px}
.mark3 i{position:absolute;display:block;border-radius:99px;
  background:rgba(255,255,255,.92)}

/* 横並びが1列に変わったら、説明も中央に揃える(画像側は元から中央寄せ)。
   【画面幅の @media で判定しないこと】。2列になる条件は箱の中身の幅で決まり、
   余白が clamp なので画面幅からは正確に出せない。
   箱を器にして、中身が 340px×2 + 隙間40px = 720px に届かない時を拾う */
@container (max-width:719px){
  .feat-copy{text-align:center}
}