/* Fizumaru 公式サイト共通スタイル。アプリと同じ「キャンディソーダ」。ライトテーマ固定 */
:root {
  color-scheme: light;
  --cream: #fff7fb;
  --ink: #2b2140;
  --muted: #7c7193;
  --line: #f1e3ee;
  --white: #ffffff;
  --pink: #ff5fa2;
  --pink-soft: #ffe3ef;
  --grape: #8a6bff;
  --grape-soft: #ece6ff;
  --mint: #2fd3b4;
  --mint-soft: #d9f8f1;
  --lemon: #ffd23f;
  --sky: #4fb3ff;
  --tangerine: #ff9a3c;
  --pop: linear-gradient(120deg, #ff5fa2 0%, #ff9a3c 45%, #ffd23f 100%);
  --soda: linear-gradient(135deg, #4fb3ff 0%, #8a6bff 55%, #ff5fa2 100%);
  --shadow: 0 2px 0 rgba(43,33,64,.05), 0 18px 40px -16px rgba(138,107,255,.4);
  /* 見出しも本文も普通のゴシック（Noto Sans JP）。見出しは極太 */
  --font-pop: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  /* 英数字（数字・英字の見出し）。癖のない普通のゴシック */
  --font-num: "Inter", "Noto Sans JP", system-ui, sans-serif;
  /* ロゴだけはアプリと同じ丸みのある英字 */
  --font-logo: "Fredoka", "Outfit", ui-rounded, sans-serif;
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.75;
  background: var(--cream); overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--grape); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 6px; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right, 0px));
}

/* rising bubbles */
.fizumaru-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fizumaru-bg i { position: absolute; bottom: -60px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, transparent 70%); border: 1.5px solid rgba(138,107,255,.22); animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-120vh) translateX(16px); } }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255,247,251,.9); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(255,247,251,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(241,227,238,.8); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { font-family: var(--font-logo); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.02em; background: var(--pop); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; position: relative; padding-right: 14px; }
.logo::after, .logo::before { content: ""; position: absolute; border-radius: 50%; }
.logo::after { width: 10px; height: 10px; right: 1px; top: 3px; background: var(--sky); }
.logo::before { width: 6px; height: 6px; right: -2px; top: -6px; background: var(--mint); }
.nav { display: flex; align-items: center; gap: 22px; font-weight: 700; font-size: 14px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--pink); }
.nav .cta { color: #fff; background: var(--pop); padding: 8px 18px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(255,95,162,.8); }
.nav .cta:hover { color: #fff; }
@media (max-width: 720px) { .nav a:not(.cta):not(.store-badge) { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 800; font-size: 16px; text-decoration: none; transition: transform .15s; }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--pop); color: #fff; box-shadow: 0 12px 24px -10px rgba(255,95,162,.85); }
.btn.soft { background: var(--white); color: var(--grape); box-shadow: var(--shadow); }

/* footer */
.site-footer { margin-top: 80px; padding-block: 40px; background: var(--ink); color: rgba(255,255,255,.85); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.site-footer .logo { font-size: 30px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand img { width: 54px; height: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: var(--lemon); }
.site-footer small { display: block; width: 100%; color: rgba(255,255,255,.55); }

/* legal pages */
.legal { max-width: 760px; margin: 0 auto; padding-top: 40px; }
.legal-head { background: var(--soda); color: #fff; border-radius: 28px; padding: 28px 28px 24px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.legal-head h1 { font-family: var(--font-pop); font-weight: 900; font-size: clamp(28px, 6vw, 42px); margin: 0; line-height: 1.3; letter-spacing: .02em; text-wrap: balance; }
.legal-head p { margin: 6px 0 0; font-size: 13px; opacity: .9; }
.legal-head .deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,.18); }
.legal-body { background: var(--white); border-radius: 28px; padding: 8px 28px 28px; margin-top: 16px; box-shadow: var(--shadow); }
.legal-body h2 { font-family: var(--font-pop); font-weight: 900; font-size: 18px; margin: 30px 0 8px; display: flex; gap: 10px; align-items: center; text-wrap: balance; }
.legal-body h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pop); }
.legal-body p, .legal-body li { font-size: 15px; }
.legal-body ol, .legal-body ul { padding-left: 1.4em; }
.legal-body li { margin: 4px 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.legal-body th { width: 34%; color: var(--muted); font-weight: 700; }
.table-scroll { overflow-x: auto; }
.draft-note { background: var(--lemon); color: var(--ink); border-radius: 16px; padding: 12px 16px; font-size: 13px; font-weight: 700; margin-top: 16px; }
.fill { background: var(--pink-soft); color: var(--pink); border-radius: 6px; padding: 0 6px; font-weight: 700; }
@media (max-width: 520px) { .legal-body { padding: 4px 18px 22px; } .legal-head { padding: 22px 20px; } .legal-body th { width: 40%; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* contact form (support page) */
.legal-body .jump { margin-top: 4px; }
.contact { position: relative; background: var(--cream); border-radius: 24px; padding: 22px; margin-top: 6px; }
.contact-mascot { position: absolute; right: 14px; top: -58px; width: 86px; height: auto; pointer-events: none; }
.contact form { display: grid; gap: 14px; }
.contact label { display: grid; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.contact input, .contact select, .contact textarea { width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); background: var(--white); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.contact textarea { resize: vertical; min-height: 140px; line-height: 1.6; font-weight: 500; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: none; border-color: var(--grape); }
.contact .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); }
.contact .check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--pink); padding: 0; }
.contact .btn { width: 100%; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { border-radius: 16px; padding: 12px 16px; font-size: 14px; font-weight: 700; margin: 0; }
.form-msg.ok { background: var(--mint-soft); color: #11745f; }
.form-msg.err { background: var(--pink-soft); color: #c2185b; }
.note-small { font-size: 12px !important; color: var(--muted); }
#contact { scroll-margin-top: 90px; }
@media (max-width: 520px) { .contact { padding: 18px 14px; } .contact-mascot { width: 70px; top: -48px; } }

/* public profile (u.html) */
.profile { max-width: 520px; margin: 0 auto; padding: 40px 0 20px; }
.pf-loading, .pf-missing { text-align: center; padding: 40px 0; }
.pf-loading img, .pf-missing img { width: 150px; height: auto; animation: pfFloat 1.6s ease-in-out infinite alternate; }
@keyframes pfFloat { to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pf-loading img, .pf-missing img { animation: none; } }
.pf-loading p { font-weight: 800; color: var(--muted); }
.pf-missing h1 { font-family: var(--font-pop); font-weight: 900; font-size: 24px; margin: 10px 0 6px; }
.pf-missing p { color: var(--muted); font-size: 14px; }
.pf-card { background: var(--white); border-radius: 32px; padding: 10px; box-shadow: var(--shadow); }
.pf-cover { position: relative; height: 150px; border-radius: 24px; background: var(--soda); overflow: visible; }
.pf-pill, .pf-day { position: absolute; top: 12px; font-size: 12px; font-weight: 900; border-radius: 999px; padding: 3px 11px; }
.pf-pill { left: 12px; background: #fff; color: var(--ink); }
.pf-pill:empty, .pf-day:empty { display: none; }
.pf-day { right: 12px; background: var(--lemon); color: var(--ink); font-family: Inter, sans-serif; transform: rotate(4deg); }
.pf-mascot { position: absolute; right: 8px; bottom: -40px; width: 104px; height: auto; pointer-events: none; }
.pf-body { padding: 0 12px 12px; }
.pf-avatar { width: 86px; height: 86px; margin-top: -40px; position: relative; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 36px; font-weight: 900; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--pink); }
.pf-body h1 { font-family: var(--font-pop); font-weight: 900; font-size: 30px; margin: 10px 0 4px; line-height: 1.2; overflow-wrap: anywhere; }
.pf-bio { margin: 0 0 6px; font-size: 15px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; text-align: center; }
.pf-stats b { display: block; font-family: Inter, sans-serif; font-size: 20px; font-weight: 800; }
.pf-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.pf-bar { height: 12px; border-radius: 999px; background: var(--grape-soft, #ECE6FF); overflow: hidden; }
.pf-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--pop); transition: width 1s cubic-bezier(.2,.9,.2,1); }
.pf-progress p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.pf-progress b { color: var(--ink); font-family: Inter, sans-serif; }
.pf-latest { background: var(--cream); border-radius: 18px; padding: 12px 14px; margin-top: 14px; }
.pf-latest span { font-size: 11px; font-weight: 800; color: var(--muted); }
.pf-latest p { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.pf-latest a { display: inline-block; margin-top: 8px; font-weight: 800; font-size: 14px; color: var(--grape); text-decoration: none; }
.pf-actions { display: grid; gap: 10px; margin-top: 18px; }
.pf-actions .btn { width: 100%; }
.pf-note { font-size: 12px; color: var(--muted); margin: 14px 2px 0; }
.pf-sample { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; }
.pf-link { display: inline-block; margin: 2px 0 6px; font-weight: 800; font-size: 14px; color: var(--grape); text-decoration: none; }
.pf-cover { background-size: cover; }
.pf-handle { margin: -2px 0 6px; font-size: 14px; font-weight: 800; color: var(--muted); }

/* アプリの中から開いたとき：サイトのメニューとフッターは出さない（アプリから出ていかないように） */
.in-app .site-header, .in-app .site-footer { display: none !important; }
.in-app main.wrap { padding-top: 16px; }
.in-app .legal { margin-top: 0; }

/* App Store のバッジ（Apple 公式のデザインをそのまま使う。色や形は変えない） */
.store-badge { display: inline-block; line-height: 0; border-radius: 12px; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.store-badge img { display: block; height: 54px; width: auto; max-width: none; }
.store-badge:hover { filter: drop-shadow(0 10px 16px rgba(43,33,64,.25)); }
.store-badge:active { transform: scale(.97); }
.store-badge.nav-badge img { height: 40px; }
.store-badge.big img { height: 60px; }

.foot-social { display: flex; gap: 10px; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 700; font-size: 13px; }
.foot-social a:hover { background: rgba(255,255,255,.18); }