/* Face Stamper — かわいい動物スタンプの世界。背景と文字の色は、かならずセットで決めています（ライト／ダーク両方） */
:root{
  --bg:#fff6f0; --bg2:#ffe6ee; --card:#ffffff; --ink:#3b2a2a; --ink2:#654b4b; --line:#f0c9d4; --soft:#fff0f4;
  --main:#d6336c; --main-ink:#ffffff; --main-h:#b3245a;
  --sub:#ffd96b; --sub-ink:#3b2a2a; --sub-h:#ffc93a;
  --ghost:#ffffff; --ghost-ink:#3b2a2a; --ghost-line:#e3b2c0; --ghost-h:#ffeaf0;
  --danger:#a4161a; --ok:#1c7a3d; --warn-bg:#fff3cd; --warn-ink:#4a3600;
  --err-ink:#a4161a; --focus:#1a5fd1; --bub-bg:#ffffff; --bub-ink:#3b2a2a; --head-bg:#ffffff; --foot-bg:#3b2a2a; --foot-ink:#fff6f0;
  --r:18px; --shadow:0 6px 18px rgba(214,51,108,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1d1517; --bg2:#2a1b20; --card:#2a2023; --ink:#fdf0f3; --ink2:#dcc6cc; --line:#51383f; --soft:#35262a;
    --main:#ff8fb0; --main-ink:#2a0f18; --main-h:#ffb0c8;
    --sub:#f2c14e; --sub-ink:#2a1d0c; --sub-h:#ffd677;
    --ghost:#2a2023; --ghost-ink:#fdf0f3; --ghost-line:#6b4b55; --ghost-h:#3a2a2f;
    --danger:#ff9a9a; --ok:#7bdc9a; --warn-bg:#4a3a10; --warn-ink:#ffe9a8;
    --err-ink:#ffb0b0; --focus:#8ab8ff; --bub-bg:#fdf0f3; --bub-ink:#3b2a2a; --head-bg:#241a1d; --foot-bg:#120c0e; --foot-ink:#fdf0f3;
    --shadow:0 6px 18px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
html.fs-large{font-size:120%}
body.fs-body{margin:0;background:var(--bg);color:var(--ink);font-family:"BIZ UDPGothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;font-size:1.0625rem;line-height:1.8;background-image:radial-gradient(circle at 12px 12px,var(--bg2) 3px,transparent 4px);background-size:44px 44px}
a{color:var(--main);text-underline-offset:3px}
a:hover{color:var(--main-h)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.4;margin:0 0 .5em}
h1{font-size:clamp(1.7rem,5vw,2.6rem);letter-spacing:.02em}
h2{font-size:clamp(1.35rem,3.6vw,1.8rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.fs-wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}
.fs-narrow{max-width:760px}
.fs-skip{position:absolute;left:-999px;top:0;background:var(--main);color:var(--main-ink);padding:10px 16px;z-index:100}
.fs-skip:focus{left:8px;top:8px}

/* ヘッダー */
.fs-head{background:var(--head-bg);color:var(--ink);border-bottom:3px solid var(--line);position:sticky;top:0;z-index:50}
.fs-head-in{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.fs-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.2rem}
.fs-logo:hover{color:var(--ink)}
.fs-logo-ic{display:inline-flex}
.fs-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap;justify-content:center}
.fs-nav a{color:var(--ink);background:transparent;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.fs-nav a:hover{background:var(--soft);color:var(--ink)}
.fs-nav a.is-on{background:var(--main);color:var(--main-ink)}
.fs-head-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fs-chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 16px;border-radius:999px;background:var(--sub);color:var(--sub-ink);font-weight:800;text-decoration:none}
.fs-chip:hover{background:var(--sub-h);color:var(--sub-ink)}

/* ボタン（どの状態でも背景と文字を固定） */
.fs-btn{appearance:none;border:2px solid transparent;border-radius:999px;padding:10px 22px;min-height:48px;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;line-height:1.3;transition:transform .08s}
.fs-btn:active{transform:scale(.97)}
.fs-btn[disabled]{opacity:.55;cursor:not-allowed}
.fs-btn-main{background:var(--main);color:var(--main-ink);border-color:var(--main)}
.fs-btn-main:hover,.fs-btn-main:focus{background:var(--main-h);color:var(--main-ink);border-color:var(--main-h)}
.fs-btn-sub{background:var(--sub);color:var(--sub-ink);border-color:var(--sub)}
.fs-btn-sub:hover,.fs-btn-sub:focus{background:var(--sub-h);color:var(--sub-ink);border-color:var(--sub-h)}
.fs-btn-ghost{background:var(--ghost);color:var(--ghost-ink);border-color:var(--ghost-line)}
.fs-btn-ghost:hover,.fs-btn-ghost:focus{background:var(--ghost-h);color:var(--ghost-ink);border-color:var(--ghost-line)}
.fs-btn-danger{color:var(--danger)}
.fs-btn-danger:hover,.fs-btn-danger:focus{color:var(--danger)}
.fs-btn-big{font-size:1.2rem;min-height:58px;padding:12px 30px}
.fs-btn-sm{min-height:40px;padding:6px 14px;font-size:.9rem}

/* ヒーロー */
.fs-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:28px 0 8px}
.fs-kicker{display:inline-block;background:var(--main);color:var(--main-ink);font-weight:800;padding:2px 14px;border-radius:999px;font-size:.9rem;margin-bottom:10px;transform:rotate(-2deg)}
.fs-lead{color:var(--ink2);font-size:1.08rem}
.fs-hero-art{position:relative;min-height:170px}
.fs-mascots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding-top:34px}
.fs-mas{display:inline-flex;animation:fs-bob 3.2s ease-in-out infinite}
.fs-mas-2{animation-delay:.4s}.fs-mas-3{animation-delay:.8s}.fs-mas-4{animation-delay:1.2s}.fs-mas-5{animation-delay:1.6s}
@keyframes fs-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.fs-bub{position:absolute;background:var(--bub-bg);color:var(--bub-ink);border:3px solid #4a3434;border-radius:18px;padding:2px 14px;font-weight:800;font-size:.95rem;z-index:2}
.fs-bub:after{content:"";position:absolute;bottom:-12px;left:22px;border:6px solid transparent;border-top:8px solid #4a3434}
.fs-bub-1{left:4%;top:0;transform:rotate(-4deg)}
.fs-bub-2{right:2%;top:10px;transform:rotate(3deg)}

/* つかいかた */
.fs-steps{list-style:none;margin:14px 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fs-steps li{background:var(--card);color:var(--ink);border:2px dashed var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.fs-steps li span:last-child{color:var(--ink2);font-size:.95rem}
.fs-stepno{width:34px;height:34px;border-radius:50%;background:var(--main);color:var(--main-ink);font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* カード */
.fs-card{background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-bottom:20px}
.fs-view{padding-bottom:30px}
.fs-meter{display:inline-block;background:var(--soft);color:var(--ink);border-radius:999px;padding:4px 16px;font-weight:700;margin-bottom:12px}
.fs-note{color:var(--ink2);font-size:.93rem}
.fs-note-warn{background:var(--warn-bg);color:var(--warn-ink);padding:10px 14px;border-radius:12px}
.fs-small{font-size:.9rem;color:var(--ink2)}

/* 写真をえらぶ枠（切手のふち） */
.fs-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 16px;border:4px dashed var(--ghost-line);border-radius:22px;background:var(--soft);color:var(--ink);cursor:pointer}
.fs-drop:hover,.fs-drop.is-over{background:var(--bg2);border-color:var(--main)}
.fs-drop-main{font-size:1.35rem;font-weight:800}
.fs-drop-sub{color:var(--ink2);font-size:.92rem}
.fs-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fs-file:focus-visible+.fs-queue,.fs-drop:focus-within{outline:3px solid var(--focus)}
.fs-queue{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.fs-q{display:flex;align-items:center;gap:12px;background:var(--soft);color:var(--ink);border-radius:14px;padding:8px 12px}
.fs-q img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--bg2)}
.fs-q-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.fs-q-st{font-weight:800;white-space:nowrap}
.fs-q.is-run .fs-q-st{color:var(--main)}
.fs-q.is-ok .fs-q-st{color:var(--ok)}
.fs-q.is-ng .fs-q-st{color:var(--err-ink)}
.fs-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.fs-results{margin-top:26px;border-top:3px dotted var(--line);padding-top:18px}

/* 写真のならび */
.fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.fs-item{background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.fs-item img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--bg2)}
.fs-item-b{padding:10px;display:flex;flex-direction:column;gap:8px}
.fs-item-t{font-size:.85rem;color:var(--ink2)}
.fs-item-a{display:flex;gap:6px;flex-wrap:wrap}
.fs-item-a .fs-btn{flex:1 1 auto;min-width:0;white-space:nowrap}
.fs-item-note{font-size:.88rem;color:var(--ink2);margin:0}
.fs-pick{position:absolute;top:8px;left:8px;background:var(--card);color:var(--ink);border:2px solid var(--ghost-line);border-radius:12px;padding:4px 10px;display:flex;align-items:center;gap:6px;font-weight:800;min-height:44px;cursor:pointer}
.fs-pick input{width:22px;height:22px;accent-color:#d6336c}
.fs-item.is-sel{border-color:var(--main);box-shadow:0 0 0 3px var(--main)}
.fs-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.fs-sel-count{color:var(--ink2);font-weight:700;min-height:1.8em}
.fs-empty{text-align:center;color:var(--ink2);padding:24px 0}

/* プラン */
.fs-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:16px 0}
.fs-plan{position:relative;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:22px;padding:26px 20px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.fs-plan.is-featured{border-color:var(--main)}
.fs-plan.is-current{background:var(--soft)}
.fs-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--main);color:var(--main-ink);font-weight:800;border-radius:999px;padding:2px 16px;font-size:.88rem;white-space:nowrap}
.fs-price{font-size:1.7rem;font-weight:800;margin:0 0 4px}
.fs-plan-desc{color:var(--ink2);margin:0 0 10px}
.fs-feat{list-style:none;padding:0;margin:0 0 16px;flex:1}
.fs-feat li{padding:5px 0 5px 28px;position:relative}
.fs-feat li:before{content:"🐾";position:absolute;left:0;top:5px;font-size:.95rem}
.fs-plan .fs-btn{width:100%}

/* アカウント */
.fs-big{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.fs-bar{height:16px;background:var(--soft);border:2px solid var(--line);border-radius:999px;overflow:hidden;margin:8px 0}
.fs-bar span{display:block;height:100%;width:0;background:var(--main);border-radius:999px}
.fs-msg{min-height:1.4em;color:var(--ink2);font-weight:700}
.fs-msg-err{color:var(--err-ink)}
.fs-msg-ok{color:var(--ok)}

/* ログイン画面 */
.fs-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.fs-modal-bg{position:absolute;inset:0;background:rgba(40,20,28,.6)}
.fs-modal-box{position:relative;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:24px;padding:24px;width:100%;max-width:440px;max-height:92vh;overflow:auto;box-shadow:var(--shadow)}
.fs-modal-mas{text-align:center;margin-top:-6px}
.fs-modal-box h2{text-align:center}
.fs-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:2px solid var(--ghost-line);background:var(--ghost);color:var(--ghost-ink);font-size:1.4rem;cursor:pointer;line-height:1}
.fs-x:hover{background:var(--ghost-h);color:var(--ghost-ink)}
.fs-tabs{display:flex;gap:6px;margin-bottom:14px}
.fs-tab{flex:1;min-height:46px;border-radius:12px;border:2px solid var(--ghost-line);background:var(--ghost);color:var(--ghost-ink);font:inherit;font-weight:800;cursor:pointer}
.fs-tab[aria-selected="true"]{background:var(--main);color:var(--main-ink);border-color:var(--main)}
.fs-form label{display:block;font-weight:800;margin:10px 0 4px}
.fs-form input[type=text],.fs-form input[type=email],.fs-form input[type=password]{width:100%;min-height:50px;padding:8px 14px;font:inherit;border:2px solid var(--ghost-line);border-radius:12px;background:var(--card);color:var(--ink)}
.fs-form .fs-btn{width:100%;margin-top:12px}
.fs-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fs-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;font-weight:800;z-index:300;max-width:92vw;text-align:center}

/* フッター・規約 */
.fs-foot{background:var(--foot-bg);color:var(--foot-ink);padding:26px 0;margin-top:30px}
.fs-foot a{color:var(--foot-ink)}
.fs-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.fs-foot-note{font-size:.88rem;opacity:.9;margin-bottom:4px}
.fs-foot-copy{font-size:.85rem;opacity:.8;margin:0}
.fs-legal h1{font-size:1.6rem}
.fs-legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.fs-legal-nav a{background:var(--ghost);color:var(--ghost-ink);border:2px solid var(--ghost-line);border-radius:999px;padding:8px 16px;text-decoration:none;font-weight:700}
.fs-legal-nav a[aria-current=page]{background:var(--main);color:var(--main-ink);border-color:var(--main)}
.fs-tbl{width:100%;border-collapse:collapse}
.fs-tbl th,.fs-tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;background:var(--card);color:var(--ink)}
.fs-tbl th{width:30%;background:var(--soft);font-weight:800}
.fs-legal-body p{margin-bottom:1em}
.fs-admin-note{background:var(--warn-bg);color:var(--warn-ink);padding:8px 0;font-size:.92rem}
.fs-admin-note a{color:var(--warn-ink);font-weight:800}

@media (max-width:760px){
  body.fs-body{font-size:1rem}
  .fs-hero{grid-template-columns:1fr}
  .fs-steps{grid-template-columns:1fr}
  .fs-nav{order:3;flex-basis:100%;justify-content:space-between}
  .fs-nav a{padding:8px 10px;font-size:.95rem;flex:1;justify-content:center}
  .fs-head-in{gap:6px}
  .fs-logo-tx{font-size:1.05rem}
  .fs-card{padding:16px}
  .fs-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .fs-tbl th,.fs-tbl td{display:block;width:100%}
  .fs-drop-main{font-size:1.2rem}
  .fs-actions .fs-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.fs-mas{animation:none}.fs-btn{transition:none}}