:root {
  --midnight: #07101f;
  --navy: #0d1a2e;
  --navy-soft: #162740;
  --ink: #142033;
  --ivory: #f8f4e9;
  --paper: #fffdf7;
  --gold: #b99755;
  --gold-pale: #e5cf99;
  --gold-light: #f3e8c7;
  --muted: #7e8998;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--ivory); background: var(--midnight); font-family: "Noto Sans JP", sans-serif; line-height: 1.75; }
button, input, textarea { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }

.entrance { position: relative; isolation: isolate; width: min(1440px, 100%); min-height: 860px; margin: auto; overflow: hidden; background: linear-gradient(115deg, #07101e 0 48%, #13243a 100%); }
.entrance::before { position: absolute; inset: 0; z-index: -4; content: ""; background: radial-gradient(circle at 78% 15%, rgba(226,195,124,.19), transparent 24%), linear-gradient(90deg, transparent 49.8%, rgba(229,207,153,.13) 50%, transparent 50.2%); }
.entrance::after { position: absolute; inset: 18px; z-index: 0; border: 1px solid rgba(229,207,153,.18); content: ""; pointer-events: none; }
.site-header { position: absolute; top: 0; left: 0; z-index: 8; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 26px clamp(30px, 5vw, 74px); }
.brand { display: flex; min-height: 44px; align-items: center; gap: 10px; text-decoration: none; }
.brand-crest { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-pale); font: 600 15px/1 "Shippori Mincho", serif; box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px rgba(185,151,85,.45); }
.brand-name { font: 600 18px/1 "Shippori Mincho", serif; letter-spacing: .13em; }
.brand small { padding: 4px 7px; border: 1px solid rgba(229,207,153,.45); color: var(--gold-pale); font-size: 10px; letter-spacing: .12em; line-height: 1; }
.site-header > p { margin: 0; color: rgba(248,244,233,.72); font: 500 10px/1 "Noto Sans JP", sans-serif; letter-spacing: .22em; }

.hero-copy { position: absolute; top: 16%; left: clamp(30px, 5vw, 74px); z-index: 4; width: min(46%, 620px); }
.eyebrow { margin: 0 0 14px; color: var(--gold-pale); font-size: 10px; font-weight: 600; letter-spacing: .24em; }
.eyebrow span { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow span::before { width: 35px; height: 1px; background: currentColor; content: ""; }
h1, h2 { margin: 0; font-family: "Shippori Mincho", serif; font-weight: 600; }
h1 { font-size: clamp(42px, 5vw, 68px); letter-spacing: -.02em; line-height: 1.35; text-shadow: 0 8px 30px rgba(0,0,0,.32); }
h1 em { color: var(--gold-light); font-style: normal; }
.hero-lead { max-width: 43em; margin: 18px 0 0; color: rgba(248,244,233,.82); font-size: 14px; }
.hero-lead strong { color: var(--ivory); }

.hero-gallery { position: absolute; top: 0; right: 0; z-index: -1; width: 56%; height: 72%; }
.hero-gallery::after { position: absolute; inset: 0; z-index: 2; content: ""; background: linear-gradient(90deg, var(--midnight) 0, rgba(7,16,31,.64) 13%, transparent 38%), linear-gradient(0deg, var(--midnight) 0, transparent 31%); }
.hero-person { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.025); transition: opacity .45s ease, transform .8s ease; }
.hero-person img { width: 100%; height: 100%; object-fit: cover; object-position: center 23%; filter: saturate(.82) contrast(1.03); }
body[data-butler="ren"] .hero-ren, body[data-butler="haru"] .hero-haru, body[data-butler="sei"] .hero-sei { opacity: 1; transform: scale(1); }

.conversation-panel { position: absolute; left: clamp(30px, 5vw, 74px); right: clamp(30px, 5vw, 74px); bottom: 38px; z-index: 6; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(390px, .9fr); gap: 15px; }
#butler-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
#butler-pick legend, .talk-heading label { display: block; margin: 0 0 8px; color: var(--gold-light); font: 500 13px/1.5 "Shippori Mincho", serif; letter-spacing: .05em; }
#butler-pick legend span, .talk-heading label span { margin-right: 8px; color: var(--gold); font: 600 10px/1 "Noto Sans JP", sans-serif; letter-spacing: .16em; }
.butler-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.butler-card { position: relative; display: grid; min-width: 0; min-height: 154px; overflow: hidden; grid-template-columns: 42% 58%; border: 1px solid rgba(229,207,153,.24); background: rgba(8,18,34,.78); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; backdrop-filter: blur(10px); }
.butler-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pick-portrait { display: block; min-width: 0; overflow: hidden; }
.pick-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: saturate(.75); transition: filter .2s, transform .3s; }
.pick-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 12px 8px; }
.pick-copy strong { color: var(--ivory); font: 600 15px/1.4 "Shippori Mincho", serif; white-space: nowrap; }
.pick-copy small { margin-top: 2px; color: #aab4c2; font-size: 12px; white-space: nowrap; }
.pick-copy q { margin-top: 10px; color: rgba(248,244,233,.76); font: 500 12px/1.6 "Shippori Mincho", serif; }
.selected-mark { position: absolute; right: 7px; bottom: 5px; color: transparent; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.butler-card:has(input:checked) { border-color: var(--gold); background: linear-gradient(145deg, rgba(32,48,70,.96), rgba(8,18,34,.94)); box-shadow: inset 0 -2px 0 var(--gold), 0 13px 35px rgba(0,0,0,.28); transform: translateY(-3px); }
.butler-card:has(input:checked) .pick-portrait img { filter: saturate(1.02); transform: scale(1.04); }
.butler-card:has(input:checked) .selected-mark { color: var(--gold-pale); }
.butler-card:focus-within { outline: 3px solid var(--gold-pale); outline-offset: 2px; }

.talk-box { position: relative; min-width: 0; padding: 17px 18px 15px; background: linear-gradient(135deg, rgba(248,244,233,.98), rgba(238,230,209,.98)); color: var(--ink); box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.talk-box::after { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: linear-gradient(225deg, var(--navy) 49%, rgba(185,151,85,.4) 50%, transparent 52%); content: ""; }
.talk-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-right: 24px; }
.talk-heading label { margin: 0; color: var(--ink); }
.talk-heading > p { flex: none; margin: 0; color: #625a4e; font-size: 12px; }
.talk-heading b { font-weight: 500; }
#talk-input { display: block; width: 100%; min-height: 70px; max-height: 140px; margin-top: 8px; padding: 10px 12px; resize: vertical; border: 0; border-bottom: 1px solid rgba(20,32,51,.28); border-radius: 0; outline: 0; color: var(--ink); background: rgba(255,255,255,.48); font-size: 16px; line-height: 1.65; }
#talk-input::placeholder { color: #8d8a81; opacity: 1; }
#talk-input:focus { border-color: var(--gold); background: #fff; }
.talk-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.talk-action > p { min-width: 0; margin: 0; color: #625a4e; font-size: 12px; line-height: 1.5; }
#talk-submit, #signup-submit { min-height: 48px; border: 0; transition: transform .18s, box-shadow .18s; }
#talk-submit { display: flex; flex: 0 0 170px; align-items: center; justify-content: space-between; padding: 0 15px 0 19px; color: var(--ivory); background: linear-gradient(110deg, #12243d, #07101f); box-shadow: inset 0 0 0 1px rgba(229,207,153,.42), 0 10px 24px rgba(7,16,31,.24); font-family: "Shippori Mincho", serif; font-size: 15px; }
#talk-submit i { color: var(--gold-pale); font-size: 19px; font-style: normal; }
#talk-submit:hover, #signup-submit:hover { transform: translateY(-2px); }
#talk-submit:focus-visible, #signup-submit:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #f0c96e; outline-offset: 3px; }
#form-note { margin: 7px 0 0; color: #8e4d3f; font-size: 10px; font-weight: 600; }
#form-note:empty { display: none; }
.error-message { display: none; grid-column: 1 / -1; margin: 0 0 -5px; padding: 8px 12px; border-left: 3px solid #d0a35b; color: #3b211b; background: #f8d9ce; font-size: 11px; font-weight: 600; }
body[data-state="error"] .error-message { display: block; }

.reply-stage { position: relative; width: min(900px, calc(100% - 36px)); min-height: 430px; margin: 76px auto 38px; padding: 62px; align-items: center; gap: clamp(38px, 7vw, 88px); color: var(--ink); background: var(--paper); box-shadow: 0 32px 90px rgba(0,0,0,.32); }
.reply-stage::before, .reply-stage::after { position: absolute; width: 80px; height: 80px; border-color: var(--gold); content: ""; }
.reply-stage::before { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; }
.reply-stage::after { right: 14px; bottom: 14px; border-right: 1px solid; border-bottom: 1px solid; }
.reply-portrait { position: relative; flex: 0 0 230px; }
.reply-portrait > span { position: absolute; inset: -18px; border: 1px solid rgba(185,151,85,.45); border-radius: 50%; animation: crest-turn 14s linear infinite; }
.reply-portrait > span::after { position: absolute; top: 20px; right: 12px; width: 10px; height: 10px; background: var(--gold); content: ""; transform: rotate(45deg); }
#butler-face { position: relative; z-index: 1; display: block; width: 230px; height: 230px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 45px rgba(13,26,46,.2); }
.reply-body { flex: 1; min-width: 0; }
.reply-kicker { margin: 0 0 6px; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
#reply-name { margin: 0 0 18px; font: 600 25px/1.4 "Shippori Mincho", serif; }
#loading-line { margin: 0; font: 500 clamp(19px, 2.5vw, 27px)/1.8 "Shippori Mincho", serif; }
.loading-dots { display: flex; gap: 9px; margin-top: 24px; }
.loading-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: waiting 1.2s ease-in-out infinite; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
#reply-text { font-family: "Shippori Mincho", serif; font-size: 15px; line-height: 2.05; }
#reply-text p { margin: 0 0 1em; }

.limit-message { width: min(760px, calc(100% - 36px)); margin: 62px auto 25px; text-align: center; }
.limit-rule { display: block; width: 90px; height: 1px; margin: auto; background: var(--gold); box-shadow: -14px 0 0 -6px var(--gold-pale), 14px 0 0 -6px var(--gold-pale); }
.limit-message p { margin: 22px 0 0; font: 500 clamp(20px, 3vw, 28px)/1.8 "Shippori Mincho", serif; }
.limit-message strong { color: var(--gold-pale); font-weight: 600; }
.full-copy { display: none; }

.signup-section { position: relative; width: min(900px, calc(100% - 36px)); margin: 30px auto 76px; padding: 60px 62px; overflow: hidden; border: 1px solid rgba(229,207,153,.35); background: linear-gradient(130deg, #13243d, #08111f); box-shadow: 0 30px 75px rgba(0,0,0,.3); }
.signup-section::after { position: absolute; inset: 11px; border: 1px solid rgba(229,207,153,.12); content: ""; pointer-events: none; }
.signup-ornament { position: absolute; top: -95px; right: -70px; display: grid; width: 280px; height: 280px; place-items: center; border: 1px solid rgba(229,207,153,.16); border-radius: 50%; }
.signup-ornament::before { position: absolute; inset: 25px; border: 1px solid rgba(229,207,153,.11); border-radius: 50%; content: ""; }
.signup-ornament span { color: rgba(229,207,153,.08); font: 600 100px/1 "Shippori Mincho", serif; }
.signup-copy, #signup-form { position: relative; z-index: 2; }
.signup-section .eyebrow { margin-bottom: 7px; }
.signup-section h2 { font-size: clamp(34px, 5vw, 51px); }
.signup-copy > p:last-child { max-width: 48em; margin: 17px 0 26px; color: rgba(248,244,233,.65); font-size: 13px; }
.email-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
#email-input { min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid rgba(229,207,153,.35); border-radius: 0; outline: 0; color: var(--ivory); background: rgba(255,255,255,.06); }
#email-input::placeholder { color: rgba(248,244,233,.45); }
#signup-submit { padding: 0 24px; color: var(--midnight); background: linear-gradient(110deg, var(--gold-light), #caa75d); font-weight: 700; }
.signup-note { margin: 9px 0 0; color: rgba(248,244,233,.45); font-size: 9px; }
#signup-done, #signup-error { display: none; margin: 15px 0 0; padding: 12px 14px; font-weight: 600; }
#signup-done { border-left: 2px solid var(--gold); color: var(--gold-light); background: rgba(255,255,255,.05); }
#signup-error { color: #ffd8cf; background: rgba(255,123,95,.1); }
#signup-error.is-visible { display: block; }
#signup-form.is-done .email-row, #signup-form.is-done .signup-note { display: none; }
#signup-form.is-done #signup-done { display: block; }

footer { padding: 32px 20px calc(36px + env(safe-area-inset-bottom)); color: rgba(248,244,233,.78); background: #040a13; font-size: 12px; text-align: center; }
footer p { margin: 4px 0; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 10px 0; }

.state-idle, .state-error, .state-loading, .state-done, .state-used, .state-full { display: none; }
body[data-state="idle"] .state-idle, body[data-state="error"] .state-error, body[data-state="loading"] .state-loading, body[data-state="done"] .state-done, body[data-state="used"] .state-used, body[data-state="full"] .state-full { display: block; }
body[data-state="loading"] .reply-stage, body[data-state="done"] .reply-stage, body[data-state="used"] .reply-stage { display: flex; }
body[data-state="loading"] .reply-result, body[data-state="done"] .reply-loading, body[data-state="used"] .reply-loading { display: none; }
body[data-state="done"] .reply-result, body[data-state="used"] .reply-result { display: block; }
body[data-state="full"] .used-copy { display: none; }
body[data-state="full"] .full-copy { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes crest-turn { to { transform: rotate(360deg); } }
@keyframes waiting { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

@media (max-width: 900px) {
  .entrance { min-height: 980px; }
  .conversation-panel { grid-template-columns: 1fr; }
  .hero-gallery { height: 63%; }
}

@media (max-width: 720px) {
  /* 入口の箱は中身で伸ばす。高さを決め打ちすると、Safari のバーで画面が低い iPhone で入力の欄の下が切れた (2026-11-02 オーナーの iPhone) */
  .entrance { min-height: 0; height: auto; max-height: none; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: linear-gradient(145deg, #07101e, #102039); }
  .entrance::after { inset: 7px; }
  .site-header { padding: max(8px, env(safe-area-inset-top)) 14px 7px; }
  .brand { min-height: 42px; gap: 7px; }
  .brand-crest { width: 31px; height: 31px; font-size: 13px; }
  .brand-name { font-size: 15px; }
  .brand small { padding: 3px 5px; font-size: 10px; }
  .site-header > p { font-size: 10px; letter-spacing: .1em; }
  .hero-copy { top: max(58px, calc(env(safe-area-inset-top) + 53px)); left: 17px; width: calc(100% - 34px); }
  .eyebrow { margin-bottom: 5px; font-size: 10px; }
  .eyebrow span { gap: 6px; }
  .eyebrow span::before { width: 18px; }
  h1 { font-size: clamp(28px, 7.8vw, 32px); line-height: 1.3; }
  .hero-lead { width: min(100%, 196px); margin-top: 7px; color: rgba(248,244,233,.9); font-size: 14px; line-height: 1.6; text-shadow: 0 2px 12px rgba(7,16,31,.95); }
  .hero-gallery { top: 0; right: 0; width: 100%; height: 455px; }
  .hero-gallery::after { background: linear-gradient(90deg, var(--midnight) 0, rgba(7,16,31,.88) 21%, rgba(7,16,31,.35) 48%, transparent 72%), linear-gradient(0deg, var(--midnight) 0, rgba(7,16,31,.82) 10%, transparent 42%); }
  /* スマホは見出しと補足を左の暗い所に置き、人物は右下へ寄せて顔に文字を重ねない (2026-11-02 Claude の手直し) */
  .hero-person { top: 110px; left: 30%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px); mask-image: linear-gradient(180deg, transparent 0, #000 72px); }
  .hero-person img { object-position: center 20%; }
  .conversation-panel { position: relative; left: auto; right: auto; bottom: auto; display: block; width: calc(100% - 24px); margin: clamp(390px, calc(100svh - 330px), 520px) auto 0; }
  #butler-pick, .butler-options, .talk-box { width: 100%; }
  #butler-pick legend { margin-bottom: 5px; font-size: 12px; line-height: 1.4; }
  #butler-pick legend span, .talk-heading label span { font-size: 12px; }
  .butler-options { gap: 5px; }
  .butler-card { display: block; min-height: 106px; background: rgba(8,18,34,.9); }
  .pick-portrait { height: 55px; }
  .pick-portrait img { height: 76px; object-position: center 15%; }
  .pick-copy { display: block; padding: 3px 2px 5px; text-align: center; }
  .pick-copy strong { display: block; font-size: 13px; line-height: 1.25; }
  .pick-copy small { display: block; margin-top: 1px; color: #c0c8d2; font-size: 12px; line-height: 1.3; }
  .pick-copy q { display: none; }
  .selected-mark { display: none; } /* 選んだカードは金の枠で分かる。小さなカードでは型の文字に重なる */
  .butler-card:has(input:checked) { transform: translateY(-2px); }
  .talk-box { margin-top: 6px; padding: 9px 10px 8px; }
  .talk-box::after { width: 22px; height: 22px; }
  .talk-heading { align-items: flex-start; padding-right: 17px; }
  .talk-heading label { margin: 0; font-size: 12px; line-height: 1.45; }
  .talk-heading > p { font-size: 12px; white-space: nowrap; }
  #talk-input { min-height: 56px; max-height: 90px; margin-top: 5px; padding: 7px 8px; font-size: 16px; line-height: 1.5; }
  .talk-action { margin-top: 6px; }
  .talk-action > p { max-width: calc(100% - 146px); font-size: 12px; }
  #talk-submit { flex-basis: 138px; min-height: 48px; padding: 0 10px 0 13px; font-size: 15px; }
  #form-note { margin-top: 4px; font-size: 12px; }
  .error-message { margin-bottom: 4px; padding: 6px 8px; font-size: 12px; }
  .reply-stage { min-height: 0; margin: 32px auto 24px; padding: 42px 23px 48px; flex-direction: column; gap: 28px; text-align: center; }
  .reply-portrait { flex-basis: auto; }
  #butler-face { width: 168px; height: 168px; }
  .reply-portrait > span { inset: -14px; }
  #reply-name { margin-bottom: 12px; font-size: 22px; }
  #loading-line { font-size: 19px; }
  .loading-dots { justify-content: center; }
  #reply-text { font-size: 14px; line-height: 1.95; text-align: left; }
  .limit-message { margin-top: 40px; }
  .limit-message p { font-size: 19px; }
  .signup-section { margin: 23px auto 44px; padding: 39px 22px 30px; }
  .signup-section h2 { font-size: 30px; }
  .signup-copy > p:last-child { margin: 12px 0 20px; font-size: 14px; }
  .email-row { grid-template-columns: 1fr; }
  #email-input, #signup-submit { min-height: 50px; }
  .signup-note { font-size: 12px; line-height: 1.6; }
}

@media (max-width: 720px) and (min-height: 701px) {
  .hero-gallery { height: 555px; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .hero-copy { top: 54px; }
  .hero-gallery { height: 420px; }
  .butler-card { min-height: 104px; }
  .pick-portrait { height: 53px; }
  .pick-portrait img { height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 2026-11-02 登録欄の値段と、登録の後の 1 タップ (Vault Decisions/2026-11-02-trial-lp-goals-and-metrics)。つなぎは Claude */
.signup-price { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--gold-light); }
.signup-price strong { font-size: 17px; color: var(--gold-pale); }
.want-block { display: none; margin: 18px 0 0; }
.want-block.is-visible { display: block; }
.want-q { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ivory); }
.want-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
.want-options button { font: inherit; font-size: 14px; line-height: 1.4; min-height: 44px; padding: 10px 14px; text-align: left; border-radius: 10px; border: 1px solid rgba(229,207,153,.55); background: rgba(255,255,255,.05); color: var(--ivory); cursor: pointer; }
.want-options button:hover { background: rgba(255,255,255,.1); }
.want-options button:disabled { opacity: .5; cursor: default; }
.want-block.is-answered .want-options { display: none; }
.want-done { display: none; margin: 0; font-size: 14px; line-height: 1.6; color: var(--gold-light); }
.want-done.is-visible { display: block; }
@media (min-width: 640px) { .want-options { grid-template-columns: 1fr 1fr; } }