/* トップページ（LP）専用スタイル。基礎は site.css、構成は docs/design/ページ構成.txt */
:root { --wide: 1180px; }
body { font-family: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; line-height: 1.8; }
.wrap { width: min(var(--wide), 100% - 40px); margin: 0 auto; }
html { scroll-padding-top: 90px; }   /* 固定ヘッダーの分だけアンカーをずらす */
.sec { padding: 80px 0; }
.sec.soft { background: var(--soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--pink); text-transform: uppercase; margin-bottom: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--pink), var(--blue)); }
.ttl { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.3; margin: 0 0 14px; color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
.lead { color: var(--muted); max-width: 720px; margin: 0 0 40px; font-size: 16px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.note { font-size: 13px; color: var(--muted); margin-top: 18px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 16px; }
.btn.white { background: #fff; color: var(--pink); border-color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.btn.ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }

/* 01 ヘッダー */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(232, 238, 245, .9); }
.hd-in { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 800; }
.brand img { height: 46px; width: auto; display: block; }
.brand .txt { display: none; }
.brand.noimg .txt { display: block; line-height: 1.1; }
.brand .txt strong { display: block; font-size: 24px; letter-spacing: -.04em; }
.brand .txt small { font-size: 10px; color: var(--muted); font-weight: 700; }
.gnav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 800; }
.gnav a { color: var(--navy); white-space: nowrap; }
.gnav a:hover { color: var(--pink); }
.gnav a.on { color: var(--pink); }
.hd-act { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; border: 0; background: none; font-size: 28px; color: var(--navy); cursor: pointer; padding: 4px 8px; }
.drawer { display: none; border-top: 1px solid var(--line); background: #fff; padding: 12px 0 18px; }
.drawer a { display: block; padding: 10px 0; font-weight: 800; color: var(--navy); border-bottom: 1px solid var(--line); }
.drawer .actions { margin-top: 14px; }
.hd.open .drawer { display: block; }

/* 02 HERO */
.hero { position: relative; overflow: hidden; text-align: left; padding: 0;
  background: radial-gradient(circle at 72% 18%, rgba(142, 114, 255, .20), transparent 28%), radial-gradient(circle at 84% 62%, rgba(45, 168, 255, .20), transparent 30%), radial-gradient(circle at 6% 70%, rgba(255, 79, 121, .14), transparent 24%), linear-gradient(180deg, #fff, #f8fbff); }
.hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 440px; height: 440px; border-radius: 50%; filter: blur(60px); background: linear-gradient(135deg, rgba(255, 79, 121, .28), rgba(47, 200, 179, .28), rgba(45, 168, 255, .28)); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 64px 0 72px; min-height: 620px; }
.hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.15; letter-spacing: -.04em; margin: 0 0 22px; text-align: left; }
.hero h1 .ac { background: linear-gradient(90deg, var(--pink), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { font-size: 16px; color: #38536e; max-width: 600px; margin: 0 0 14px; text-align: left; }
.badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 24px 0 26px; max-width: 600px; }
.badge { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; font-weight: 800; color: var(--navy); box-shadow: 0 8px 24px rgba(37, 73, 112, .06); }
.badge i { font-style: normal; font-size: 18px; flex: 0 0 auto; }
.badge .t { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.badge b { font-size: 13px; }
.badge small { font-size: 11px; color: var(--muted); font-weight: 700; }
.badge b.v { color: var(--pink); font-size: 20px; letter-spacing: -.02em; }

/* HERO ビジュアル（通話画面のイメージ） */
.visual { position: relative; display: grid; place-items: center; min-height: 520px; }
.stage { width: min(430px, 100%); aspect-ratio: 4 / 5; border-radius: 34px; position: relative; overflow: hidden; box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(15, 45, 83, .05), rgba(15, 45, 83, .45)), linear-gradient(145deg, #cdd8ff, #ffd8e3 55%, #bfeee7); }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #fff8 0 3px, transparent 4px), radial-gradient(circle at 70% 25%, #fff7 0 2px, transparent 3px), radial-gradient(circle at 45% 40%, #fff6 0 4px, transparent 5px); background-size: 120px 120px; }
.stage .mark { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 56%; opacity: .95; filter: drop-shadow(0 12px 30px rgba(15, 45, 83, .25)); }
.stage .cap { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; font-weight: 800; font-size: 17px; line-height: 1.5; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.stage .cap small { display: block; font-family: "Caveat", cursive; font-size: 30px; line-height: 1.1; font-weight: 600; opacity: .95; margin-bottom: 2px; }
.hand-ja { font-family: "Yomogi", "M PLUS Rounded 1c", sans-serif; font-weight: 400; }
.phone { position: absolute; right: -10px; top: 40px; width: 176px; background: #1a2330; border-radius: 34px; padding: 10px; box-shadow: 0 24px 60px rgba(15, 45, 83, .28); transform: rotate(5deg); }
.phone .scr { aspect-ratio: 9 / 17; border-radius: 26px; overflow: hidden; background: #e9f5ff; position: relative; display: grid; grid-template-rows: 58% 42%; }
.phone .a { background: linear-gradient(145deg, #ffd9e4, #c8d9ff); position: relative; }
.phone .b { background: linear-gradient(145deg, #d6ebff, #e5dcff); position: relative; }
.phone .who { position: absolute; left: 10px; top: 10px; font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--navy); background: #fffc; padding: 2px 7px; border-radius: 999px; }
.phone .tm { position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 800; color: #fff; background: #0f2d53cc; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.phone .ctl { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; }
.phone .ctl span { width: 30px; height: 30px; border-radius: 50%; background: #fffa; display: grid; place-items: center; font-size: 13px; }
.phone .ctl span.end { background: var(--pink); color: #fff; }
.scrib { position: absolute; left: -12px; top: 52px; width: 112px; height: 112px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; font-size: 14px; color: var(--navy); transform: rotate(-8deg); box-shadow: var(--shadow); line-height: 1.5; }

/* 下層ページ（/about/ /faq/）の見出し帯・ページ内目次・「もっと見る」 */
.phead { padding: 48px 0 36px; background: linear-gradient(180deg, #fff, var(--soft)); border-bottom: 1px solid var(--line); }
.phead .lead { margin-bottom: 0; }
.pnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pnav a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 13px; color: var(--navy); box-shadow: 0 6px 18px rgba(37, 73, 112, .06); }
.pnav a:hover { color: var(--pink); border-color: var(--pink); }
.more { margin-top: 28px; }
.qgroup { margin-bottom: 44px; }
.qgroup h2 { font-size: 22px; color: var(--navy); margin: 0 0 6px; }
.qgroup > p { color: var(--muted); margin: 0 0 8px; font-size: 14px; }

/* 03 CONCEPT / 04 とは */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.panel { min-height: 400px; border-radius: 30px; padding: 44px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(circle at 80% 15%, #fff5 0 8px, transparent 9px), linear-gradient(135deg, #ff7aa0, #9f88ff 50%, #2da8ff); box-shadow: 0 18px 50px rgba(64, 83, 139, .18); }
.panel::after { content: ""; position: absolute; right: -45px; bottom: -45px; width: 230px; height: 230px; border: 1px solid #ffffff66; border-radius: 50%; box-shadow: 0 0 0 28px #ffffff12, 0 0 0 56px #ffffff0a; }
.panel .eyebrow { color: #fff; } .panel .eyebrow::before { background: #fff; }
.panel h2 { color: #fff; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.3; margin: 0 0 16px; }
.panel p { max-width: 480px; margin: 0 0 10px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 18px; }
.chain span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 800; color: var(--navy); font-size: 14px; box-shadow: 0 6px 18px rgba(37, 73, 112, .06); }
.chain i { color: var(--blue); font-style: normal; font-weight: 800; }
.split .ttl { font-size: clamp(24px, 3vw, 36px); }
.sub { font-size: 20px; font-weight: 800; color: var(--navy); margin: 18px 0 0; }

/* 05 活用シーン */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scene { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.scene .vis { height: 150px; position: relative; display: grid; place-items: center; font-size: 54px; background: linear-gradient(145deg, #ffe1ea, #ddecff); }
.scene:nth-child(2) .vis { background: linear-gradient(145deg, #dce8ff, #e4f8f5); }
.scene:nth-child(3) .vis { background: linear-gradient(145deg, #eadfff, #dbeeff); }
.scene:nth-child(4) .vis { background: linear-gradient(145deg, #e4f8f5, #fff0d7); }
.scene:nth-child(5) .vis { background: linear-gradient(145deg, #ffe6ef, #f2e9ff); }
.scene:nth-child(6) .vis { background: linear-gradient(145deg, #dbeaff, #ffe5d5); }
.scene .bd { padding: 18px 20px 22px; }
.scene h3 { margin: 0 0 6px; font-size: 18px; }
.scene p { margin: 0; color: var(--muted); font-size: 14px; }

/* 06 対象となる方 */
.targets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tg { text-align: center; border: 1px solid var(--line); border-radius: 18px; padding: 10px 10px 12px; background: #fff; font-weight: 800; color: var(--navy); font-size: 13px; overflow: hidden; }
.tg .av { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; margin: 0 auto 8px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(145deg, #ffd7e1, #d6e8ff); }
.tg:nth-child(3n) .av { background: linear-gradient(145deg, #d6e8ff, #e4f8f5); }
.tg:nth-child(3n+2) .av { background: linear-gradient(145deg, #eadfff, #ffe6ef); }

/* 07 ご利用の流れ / 08 ファン側 */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; box-shadow: var(--shadow); position: relative; }
.step .n { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--pink), var(--blue)); margin-bottom: 14px; font-size: 14px; }
.step h3 { margin: 0 0 8px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.fanflow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 24px 0; }
.fanflow span { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; font-weight: 800; color: var(--navy); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px; }
.fanflow span.hl { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; border-color: transparent; }
.fanflow i { color: var(--blue); font-style: normal; font-weight: 900; font-size: 20px; }

/* 09 1対1ライブ画面 */
.callmock { border-radius: 30px; padding: 26px; background: #0f1a2b; color: #fff; box-shadow: 0 24px 60px rgba(15, 45, 83, .28); }
.callmock .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.callmock .tile { aspect-ratio: 4 / 3; border-radius: 18px; position: relative; overflow: hidden; display: grid; place-items: center; font-size: 56px; }
.callmock .tile.ar { background: linear-gradient(145deg, #ffb2c8, #ff7aa0 60%, #9f88ff); }
.callmock .tile.fn { background: linear-gradient(145deg, #7fcbff, #2da8ff 60%, #2fc8b3); }
.callmock .tile b { position: absolute; left: 12px; top: 10px; font-size: 11px; letter-spacing: .12em; background: #0f2d53aa; padding: 2px 10px; border-radius: 999px; }
.callmock .bar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.callmock .rt { font-size: 13px; color: #9fb3c8; }
.callmock .rt strong { display: block; font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.callmock .ct { display: flex; gap: 10px; }
.callmock .ct span { width: 46px; height: 46px; border-radius: 50%; background: #ffffff22; display: grid; place-items: center; font-size: 18px; }
.callmock .ct span.end { background: var(--pink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800; color: var(--navy); }
.chips.on-dark span { background: #ffffff14; border-color: #ffffff22; color: #fff; }

/* セクション写真（R2 の画像が無い間はブランド配色のグラデーション） */
.photo { border-radius: 30px; min-height: 340px; box-shadow: var(--shadow); background: linear-gradient(145deg, #ffd8e3, #cdd8ff 55%, #bfeee7); background-size: cover; background-position: center; }

/* 10 運営者向け */
.adm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 18px; }
.adm div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; text-align: center; font-weight: 800; color: var(--navy); box-shadow: var(--shadow); }
.adm div i { display: block; font-style: normal; font-size: 26px; margin-bottom: 6px; }

/* 11 決済 / 12 売上 / 13 料金 */
.pricing { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; }
.pcard { border: 1px solid var(--line); border-radius: 28px; background: #fff; padding: 34px; box-shadow: var(--shadow); }
.pcard .ttl { font-size: clamp(24px, 3vw, 34px); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.pbox { border-radius: 18px; padding: 20px 8px; text-align: center; font-weight: 800; color: var(--navy); font-size: 13px; }
.pbox strong { display: block; font-size: 42px; line-height: 1.1; letter-spacing: -.03em; }
.pbox strong small { font-size: 18px; margin-left: 2px; }
.pbox:nth-child(1) { background: #fff0f5; } .pbox:nth-child(1) strong { color: var(--pink); }
.pbox:nth-child(2) { background: #eef8ff; } .pbox:nth-child(2) strong { color: var(--blue); }
.pbox:nth-child(3) { background: #edfdf9; } .pbox:nth-child(3) strong { color: var(--teal); }
.plus { text-align: center; font-weight: 800; color: var(--navy); margin: 12px 0 0; }
.example { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 16px; }
.example table { font-size: 14px; }
.example td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.example td:last-child { text-align: right; font-weight: 800; color: var(--navy); }
.pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.pay { min-height: 56px; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; font-weight: 900; color: var(--navy); background: #fff; font-size: 14px; text-align: center; padding: 4px 8px; }
.money { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.money span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 800; color: var(--navy); font-size: 14px; }
.money span.hl { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #fff; border-color: transparent; }
.money i { color: var(--blue); font-style: normal; font-weight: 900; }

/* 14 特徴 */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ft { padding: 24px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ft .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #eef8ff; font-size: 26px; margin-bottom: 12px; }
.ft:nth-child(3n+2) .ic { background: #fff0f5; } .ft:nth-child(3n) .ic { background: #edfdf9; }
.ft small { color: var(--pink); font-weight: 900; letter-spacing: .1em; font-size: 12px; }
.ft h3 { margin: 4px 0 6px; font-size: 18px; }
.ft p { margin: 0; color: var(--muted); font-size: 14px; }

/* 15 法人 / 16 安心 */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.box { border-radius: 24px; padding: 32px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.box .ttl { font-size: clamp(22px, 2.6vw, 30px); }
.list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.list li { padding: 12px 14px; background: var(--soft); border-radius: 14px; font-weight: 800; font-size: 14px; color: var(--navy); display: flex; gap: 8px; align-items: center; }
.list li::before { content: "✓"; color: var(--teal); font-weight: 900; }

/* 17 FAQ */
.faq { max-width: 900px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 800; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: 0 0 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--blue)); color: #fff; display: grid; place-items: center; font-size: 13px; }
.faq summary span { flex: 1; }
.faq summary::after { content: "＋"; color: var(--pink); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); margin: 10px 0 0 42px; font-size: 15px; }

/* 18 最終 CTA */
.final { width: min(var(--wide), 100% - 40px); margin: 0 auto 80px; border-radius: 34px; padding: 56px 40px; color: #fff; text-align: center; position: relative; overflow: hidden; background: linear-gradient(110deg, #ff6e96, #8d78ff 45%, #2da8ff 75%, #2fc8b3); box-shadow: 0 18px 50px rgba(64, 83, 139, .2); }
.final h2 { color: #fff; font-size: clamp(30px, 4.6vw, 54px); margin: 0 0 12px; line-height: 1.3; }
.final p { margin: 0 auto 24px; max-width: 700px; color: #fff; }
.final .pgrid { max-width: 620px; margin: 0 auto 28px; }
.final .pbox { background: #ffffff22; color: #fff; } .final .pbox strong { color: #fff; }
.final .actions { justify-content: center; }

/* 主催者一覧（公開中がある場合のみ表示） */
/* 公開中の主催者。1 人だけのときに 1 枚が横いっぱいに広がらないよう幅に上限を付けて中央寄せ */
#artists .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; }
#artists .grid a.card { display: block; }
#artists .grid a.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }

/* 19 フッター */
.ft-wrap { border-top: 1px solid var(--line); padding: 48px 0 28px; background: #fbfdff; }
.fgrid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
.fgrid h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; color: var(--navy); }
.fgrid a, .fgrid p { display: block; color: var(--muted); font-size: 14px; margin: 6px 0; }
.fgrid a:hover { color: var(--pink); }
.copy { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: #91a0b0; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* 中間幅でヘッダーの文字が折り返して2行にならないよう詰める */
@media (max-width: 1180px) {
  .hd-in { gap: 14px; }
  .gnav { gap: 18px; font-size: 13px; }
  .hd-act { gap: 8px; }
  .hd-act .btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 980px) {
  .gnav, .hd-act .secondary, .hd-act .consult, .hd-act .acct-menu { display: none; }
  .menu-btn { display: block; }
  .hero-in, .split, .pricing, .two { grid-template-columns: 1fr; }
  .hero-in { padding-top: 40px; min-height: 0; }
  .hero-text { display: contents; }
  .hero-copy { order: 1; } .visual { order: 2; } .hero-cta { order: 3; }
  .photo { min-height: 240px; order: -1; }
  .visual { min-height: 460px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .targets { grid-template-columns: repeat(4, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: 56px 0; }
  .hd-in { height: 64px; }
  .brand img { height: 38px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 15px; }
  .hero .actions .btn { width: 100%; }
  .visual { min-height: 400px; }
  .stage { width: 84%; }
  .stage .cap { left: 16px; right: 16px; bottom: 16px; font-size: 15px; }
  .stage .cap small { font-size: 22px; }
  .phone { width: 128px; right: 0; top: 14px; }
  .scrib { display: none; }
  .cards, .flow, .pgrid, .list, .adm, .features { grid-template-columns: 1fr; }
  .callmock .tiles { grid-template-columns: 1fr; }
  .pays, .targets { grid-template-columns: repeat(2, 1fr); }
  .badges { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .fgrid { grid-template-columns: 1fr; }
  .final { padding: 40px 20px; }
  .final .actions .btn { width: 100%; }
}

/* SVG アイコン（絵文字は環境依存のため使わない） */
.ic-svg { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: 0 0 auto; }
.badge i .ic-svg { width: 18px; height: 18px; color: var(--pink); }
.scene .vis .ic-svg { width: 56px; height: 56px; color: var(--navy); opacity: .75; }
.tg .av .ic-svg { width: 28px; height: 28px; color: var(--navy); }
.fanflow span .ic-svg { width: 18px; height: 18px; color: var(--pink); }
.fanflow span.hl .ic-svg { color: #fff; }
.callmock .tile .ic-svg.big { width: 64px; height: 64px; color: #fff; opacity: .9; }
.callmock .ct span .ic-svg, .phone .ctl span .ic-svg { width: 18px; height: 18px; color: #fff; }
.phone .ctl span .ic-svg { width: 14px; height: 14px; color: var(--navy); }
.phone .ctl span.end .ic-svg { color: #fff; }
.adm div i .ic-svg { width: 28px; height: 28px; color: var(--blue); }
.ft .ic .ic-svg { width: 26px; height: 26px; color: var(--navy); }

/* 写真（R2 lp/ にアップロード後、hero.jpg の読み込み成功で body.lp-img が付き有効になる）。無い間はグラデーション + アイコン */
.lp-img .stage { background: linear-gradient(180deg, rgba(15, 45, 83, 0) 55%, rgba(15, 45, 83, .6)), url("https://cdn.1to1live.net/lp/hero.jpg?v=20260911") center top / cover, linear-gradient(145deg, #cdd8ff, #ffd8e3 55%, #bfeee7); }
.lp-img .stage::before, .lp-img .stage .mark { display: none; }
.lp-img .phone .a { background: url("https://cdn.1to1live.net/lp/hero-call.jpg?v=20260911") center 25% / cover, linear-gradient(145deg, #ffd9e4, #c8d9ff); }
.lp-img .phone .b { background: url("https://cdn.1to1live.net/lp/room-fan.jpg?v=20260911") center / cover, linear-gradient(145deg, #d6ebff, #e5dcff); }
.lp-img .panel { background: linear-gradient(135deg, rgba(255, 122, 160, .88), rgba(159, 136, 255, .82) 50%, rgba(45, 168, 255, .85)), url("https://cdn.1to1live.net/lp/concept.jpg?v=20260911") center / cover; }
.lp-img .scene .vis { background-size: cover; background-position: center; }
.lp-img .scene .vis .ic-svg { display: none; }
.lp-img .scene[data-img="scene-tokuten"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-tokuten.jpg?v=20260911"); }
.lp-img .scene[data-img="scene-talk"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-talk.jpg?v=20260911"); }
.lp-img .scene[data-img="scene-fanclub"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-fanclub.jpg?v=20260911"); }
.lp-img .scene[data-img="scene-meet"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-meet.jpg?v=20260911"); }
.lp-img .scene[data-img="scene-release"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-release.jpg?v=20260911"); }
.lp-img .scene[data-img="scene-special"] .vis { background-image: url("https://cdn.1to1live.net/lp/scene-special.jpg?v=20260911"); }
.lp-img .scene .vis { height: 190px; }
.lp-img .tg .av { background-size: cover; background-position: center; }
.lp-img .tg .av .ic-svg { display: none; }
.lp-img .tg[data-img="tg-artist"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-artist.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-idol"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-idol.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-talent"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-talent.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-seiyu"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-seiyu.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-vtuber"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-vtuber.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-youtuber"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-youtuber.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-influencer"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-influencer.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-creator"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-creator.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-athlete"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-athlete.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-agency"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-agency.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-label"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-label.jpg?v=20260911"); }
.lp-img .tg[data-img="tg-organizer"] .av { background-image: url("https://cdn.1to1live.net/lp/tg-organizer.jpg?v=20260911"); }
.lp-img .ph-fan { background-image: url("https://cdn.1to1live.net/lp/fan-mobile.jpg?v=20260911"); }
.lp-img .ph-org { background-image: url("https://cdn.1to1live.net/lp/organizer.jpg?v=20260911"); }
.lp-img .callmock .tile .ic-svg.big { display: none; }
.lp-img .callmock .tile.ar { background: url("https://cdn.1to1live.net/lp/room-artist.jpg?v=20260911") center / cover, linear-gradient(145deg, #ffb2c8, #ff7aa0 60%, #9f88ff); }
.lp-img .callmock .tile.fn { background: url("https://cdn.1to1live.net/lp/room-fan.jpg?v=20260911") center / cover, linear-gradient(145deg, #7fcbff, #2da8ff 60%, #2fc8b3); }
.lp-img .final { background: linear-gradient(110deg, rgba(255, 110, 150, .86), rgba(141, 120, 255, .84) 45%, rgba(45, 168, 255, .84) 75%, rgba(47, 200, 179, .86)), url("https://cdn.1to1live.net/lp/cta-bg.jpg?v=20260911") center / cover; }

/* ログイン中の案内バー（ヘッダー直下） */
.mebar { background: linear-gradient(90deg, #fff0f5, #eef8ff); border-bottom: 1px solid var(--line); }
.mebar .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; font-size: 14px; color: var(--navy); }
.mebar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.mebar .btn { padding: 7px 16px; font-size: 13px; }
@media (max-width: 720px) { .mebar .in { font-size: 13px; } }