:root{
  --bg:#f6f3ee;
  --paper:#fffdf9;
  --ink:#25231f;
  --muted:#777168;
  --line:#ded8cf;
  --accent:#363d38;
  --user:#e9e5dd;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Meiryo UI",Meiryo,sans-serif}
body{display:flex;justify-content:center}
.app-shell{width:min(860px,100%);min-height:100vh;padding:20px 22px 34px;display:flex;flex-direction:column}
.topbar{height:36px;display:flex;align-items:center;justify-content:space-between}
.version{font-size:12px;color:#aaa49b}
.text-btn{border:0;background:transparent;color:#666159;cursor:pointer;padding:6px 0;font-size:13px}
.hidden{visibility:hidden}
.hero{text-align:center;margin:auto 0 34px;padding:46px 12px 18px}
.mark{font-size:22px;margin-bottom:18px;color:#777168}
h1{font-family:"Meiryo UI",Meiryo,sans-serif;font-weight:500;font-size:clamp(30px,6vw,48px);margin:0 0 22px;letter-spacing:.02em}
h2{font-size:clamp(18px,3.5vw,25px);font-weight:600;margin:0 0 30px}
.lead{font-size:15px;line-height:2;color:var(--muted);margin:0 0 18px}
.prompt{font-weight:600;margin:0}
.chat{display:none;flex-direction:column;gap:16px;padding:18px 0 24px}
.chat.active{display:flex}
.message{display:flex}
.message.user{justify-content:flex-end}
.bubble{max-width:84%;padding:13px 16px;border-radius:18px;line-height:1.75;font-size:15px;white-space:pre-wrap}
.message.assistant .bubble{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:5px}
.message.user .bubble{background:var(--user);border-bottom-right-radius:5px}
.jewelry-card{width:min(100%,650px);background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:0 10px 34px rgba(30,25,20,.07)}
.jewelry-card img{width:100%;display:block;border-radius:15px;background:#eee}
.jewelry-copy{padding:14px 8px 6px;white-space:pre-wrap;line-height:1.8}
.offer{font-family:"Meiryo UI",Meiryo,sans-serif;font-size:21px}
.composer{position:sticky;bottom:18px;margin-top:auto;background:rgba(246,243,238,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:20px;padding:8px;display:flex;gap:8px;box-shadow:0 8px 28px rgba(30,25,20,.07)}
textarea{flex:1;resize:none;border:0;outline:0;background:transparent;padding:11px 12px;font:inherit;line-height:1.5;min-height:48px;max-height:150px;color:var(--ink)}
.send-btn{align-self:flex-end;border:0;border-radius:14px;background:var(--accent);color:white;padding:12px 17px;cursor:pointer;font-weight:600}
.send-btn:disabled{opacity:.45;cursor:default}
.status{text-align:center;min-height:20px;color:var(--muted);font-size:12px;margin:8px 0 0}
@media(max-width:600px){
  .app-shell{padding:12px 14px 22px}
  .hero{padding-top:28px}
  .bubble{max-width:92%}
  .composer{bottom:8px}
}

.suggestions{
  display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px;padding:0 4px;
}
.suggestions.hidden{display:none}
.suggestion-chip{
  border:1px solid var(--line);background:var(--paper);color:#5f5a53;
  border-radius:999px;padding:8px 13px;font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;cursor:pointer;transition:.15s ease;
}
.suggestion-chip:hover{transform:translateY(-1px);border-color:#aaa39a}
.production-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(246,243,238,.76);
  backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.production-overlay.hidden{display:none}
.production-box{
  width:min(430px,92vw);background:var(--paper);border:1px solid var(--line);
  border-radius:24px;padding:34px 28px;text-align:center;
  box-shadow:0 18px 60px rgba(30,25,20,.15);
}
.sparkle{font-size:30px;margin-bottom:12px;animation:pulse 1.6s ease-in-out infinite}
.production-title{font-size:22px;font-weight:700;margin-bottom:14px}
.production-message{font-size:14px;line-height:1.8;color:var(--muted);min-height:25px}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.18);opacity:1}}

.starter-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px auto 0;max-width:650px}
.starter-chip,.suggestion-chip{
  border:1px solid var(--line);background:var(--paper);color:#5f5a53;
  border-radius:999px;padding:9px 14px;font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;cursor:pointer;transition:.15s ease;
}
.starter-chip:hover,.suggestion-chip:hover{transform:translateY(-1px);border-color:#aaa39a}
.suggestions{margin:4px 0 12px;padding:12px 4px 2px}
.suggestions-label{font-size:12px;color:var(--muted);margin:0 0 8px 3px}
.suggestion-buttons{display:flex;flex-wrap:wrap;gap:8px}

.hero-visual{
  width:min(720px,100%);height:250px;margin:0 auto 28px;border-radius:26px;
  overflow:hidden;box-shadow:0 12px 38px rgba(35,30,25,.08);background:#eee9e1;
}
.hero-visual img{
  width:100%;height:100%;object-fit:cover;object-position:18% 58%;display:block;
  transform:scale(1.02);
}
@media(max-width:600px){
  .hero-visual{height:190px;border-radius:20px;margin-bottom:22px}
}

.bottom-actions{display:flex;justify-content:center;padding:18px 0 4px}
.bottom-reset{
  border:0;background:transparent;color:#777168;cursor:pointer;
  font-family:"Meiryo UI",Meiryo,sans-serif;font-size:13px;padding:10px 18px;
}
.bottom-reset:hover{color:#25231f}


/* Ver.1.3 jewelry type selector */
.jewelry-type-panel{
  max-width:720px;margin:26px auto 0;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:20px;background:rgba(255,253,249,.72);
}
.jewelry-type-label{
  font-size:13px;font-weight:700;color:#5f5a53;margin-bottom:11px;
}
.jewelry-type-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.type-chip{
  border:1px solid var(--line);background:var(--paper);color:#5f5a53;
  border-radius:999px;padding:9px 14px;font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;cursor:pointer;transition:.15s ease;
}
.type-chip:hover{transform:translateY(-1px);border-color:#aaa39a}
.type-chip.active{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.other-jewelry-wrap{margin-top:12px}
.other-jewelry-wrap.hidden{display:none}
.other-jewelry-input{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;
  padding:12px 14px;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:13px;
  outline:none;color:var(--ink);
}
.other-jewelry-input:focus{border-color:#aaa39a}
.other-jewelry-note{font-size:11px;color:var(--muted);margin-top:6px;text-align:left}

/* Ver.1.3 revision scale selector */
.revision-controls{margin:4px 0 4px;padding:12px 4px 4px}
.revision-controls.hidden{display:none}
.revision-label{font-size:12px;color:var(--muted);margin:0 0 9px 3px}
.revision-buttons{display:flex;flex-wrap:wrap;gap:8px}
.revision-chip{
  border:1px solid var(--line);background:var(--paper);color:#5f5a53;
  border-radius:999px;padding:9px 14px;font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;cursor:pointer;transition:.15s ease;
}
.revision-chip:hover{transform:translateY(-1px);border-color:#999087}
.revision-chip.strong{border-style:dashed}
@media(max-width:600px){
  .jewelry-type-panel{padding:15px 12px}
  .jewelry-type-buttons,.revision-buttons{gap:7px}
}


/* Ver.1.3.1 UI polish */
.jewelry-type-panel{
  margin-top:40px; /* 「つくりたいジュエリー」の上に1行ぶん余白 */
  padding:20px 20px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,253,249,.68));
  box-shadow:0 10px 30px rgba(40,34,29,.05);
}
.jewelry-type-label{
  font-size:14px;
  letter-spacing:.02em;
  margin-bottom:13px;
}
.jewelry-type-buttons{
  gap:10px;
}
.type-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:39px;
  padding:10px 16px;
  border:1px solid #d8d1c7;
  background:rgba(255,255,255,.92);
  color:#5a554f;
  border-radius:14px;
  box-shadow:0 3px 10px rgba(40,34,29,.035);
  font-weight:600;
  letter-spacing:.01em;
}
.type-chip:hover{
  transform:translateY(-2px);
  border-color:#a9a096;
  box-shadow:0 7px 18px rgba(40,34,29,.07);
}
.type-chip .chip-mark{
  display:none;
  width:18px;height:18px;
  align-items:center;justify-content:center;
  border-radius:50%;
  font-size:11px;
  line-height:1;
}
.type-chip.active{
  background:#343a36;
  border-color:#343a36;
  color:#fff;
  box-shadow:0 8px 22px rgba(52,58,54,.18);
  transform:translateY(-1px);
}
.type-chip.active .chip-mark{
  display:inline-flex;
  background:rgba(255,255,255,.15);
  color:#fff;
}
.selected-jewelry-type{
  margin-top:12px;
  font-size:12px;
  color:#6f6962;
  text-align:center;
}
.other-jewelry-input{
  margin-top:4px;
  border-radius:12px;
  box-shadow:inset 0 1px 3px rgba(30,25,20,.03);
}
.revision-chip{
  min-height:38px;
  border-radius:14px;
  padding:9px 15px;
  background:rgba(255,255,255,.92);
  box-shadow:0 3px 10px rgba(40,34,29,.035);
  font-weight:600;
}
.revision-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(40,34,29,.07);
}
.revision-chip.strong{
  border-style:solid;
  border-color:#bdb4aa;
  background:linear-gradient(180deg,#fff,#f7f3ee);
}
@media(max-width:600px){
  .jewelry-type-panel{margin-top:34px}
  .type-chip{padding:9px 13px}
}


/* Ver.1.3.2: explicit spacing + unmistakable selected state */
.jewelry-type-spacer{
  height:24px;
  width:100%;
}
.jewelry-type-panel{
  margin-top:0 !important;
}
.type-chip{
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.type-chip.active,
.type-chip[aria-pressed="true"]{
  background:#2f3834 !important;
  border-color:#2f3834 !important;
  color:#fff !important;
  box-shadow:0 7px 20px rgba(47,56,52,.22) !important;
}
.type-chip.active .chip-mark,
.type-chip[aria-pressed="true"] .chip-mark{
  display:inline-flex !important;
}
.selected-jewelry-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  margin:14px auto 0;
  padding:6px 12px;
  border-radius:999px;
  background:#f0ece6;
  color:#57514a;
  font-weight:600;
}
.jewelry-type-panel{
  text-align:center;
}
@media(max-width:600px){
  .jewelry-type-spacer{height:20px}
}


/* Ver.1.3.4 intro copy */
.intro-copy{
  max-width:680px;
  margin:20px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:2;
}
.intro-copy p{
  margin:0 0 14px;
}
.intro-copy p:last-child{
  margin-bottom:0;
}
.intro-copy strong{
  color:var(--ink);
  font-weight:700;
}

/* Ver.1.4 optional personal reference */
.personal-reference{max-width:720px;margin:9px auto 3px;text-align:center}
.reference-toggle{border:0;background:transparent;color:#928a81;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:11px;cursor:pointer;padding:6px 10px;border-radius:999px}
.reference-toggle:hover{background:rgba(255,255,255,.68);color:#5f5952}
.reference-panel{max-width:480px;margin:7px auto 0;padding:13px 14px;border:1px solid #e2dcd4;border-radius:15px;background:rgba(255,255,255,.66)}
.reference-panel.hidden{display:none}
.reference-copy{font-size:11px;line-height:1.75;color:#817970;margin-bottom:10px}
.reference-upload{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cfc7be;border-radius:12px;padding:8px 13px;background:#fff;color:#625c55;font-size:11px;font-weight:600;cursor:pointer}
.reference-upload input{display:none}
.reference-preview-wrap{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:11px;text-align:left}
.reference-preview-wrap.hidden{display:none}
.reference-preview{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid #ded7cf;background:#fff}
.reference-preview-info{min-width:0;display:flex;flex-direction:column;gap:7px;font-size:10px;color:#777068}
.reference-preview-info span{max-width:260px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reference-remove{align-self:flex-start;border:0;background:transparent;padding:0;color:#9a716b;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:10px;cursor:pointer}


/* Ver.1.4.1 reference taste controls */
.reference-focus-wrap{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #ece6df;
}
.reference-focus-wrap.hidden{display:none}
.reference-focus-label{
  font-size:10px;
  color:#756e67;
  margin-bottom:7px;
}
.reference-focus-label span{color:#aaa29a;font-weight:400}
.reference-focus-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.reference-focus{
  border:1px solid #ddd6ce;
  background:#fff;
  color:#746d65;
  border-radius:999px;
  padding:6px 9px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:9px;
  cursor:pointer;
}
.reference-focus.active{
  background:#4a514d;
  border-color:#4a514d;
  color:#fff;
}
.reference-analysis-note{
  margin-top:8px;
  font-size:10px;
  line-height:1.6;
  color:#8a827a;
}


/* Ver.1.4.5 — hero image and title */
.hero-visual{
  width:min(720px,100%);
  height:auto !important;
  aspect-ratio:16 / 9;
  margin:0 auto 28px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 12px 38px rgba(35,30,25,.08);
  background:#eee9e1;
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  display:block;
  transform:none !important;
  background:#eee9e1;
}
.hero h1{
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-weight:600;
  font-size:clamp(30px,5.2vw,44px);
  margin:0 0 12px;
  letter-spacing:.02em;
}
.hero h2{
  font-size:clamp(17px,3vw,23px);
  font-weight:500;
  margin:0 0 24px;
  color:#5f5a53;
}
@media(max-width:600px){
  .hero-visual{
    height:auto !important;
    aspect-ratio:16 / 9;
    border-radius:20px;
    margin-bottom:22px;
  }
}

/* Ver.1.5.0 hero slideshow */
.hero-slider{position:relative;width:min(720px,100%);aspect-ratio:16/9;overflow:hidden;background:#f3eee8}
.hero-slider .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity 1.4s ease-in-out;pointer-events:none}
.hero-slider .hero-slide.active{opacity:1}
.hero-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.46);backdrop-filter:blur(4px)}
.hero-dot{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(80,75,70,.28);cursor:pointer}
.hero-dot.active{background:rgba(60,56,52,.78);transform:scale(1.18)}
.hero-generated-note{margin:-18px auto 24px;text-align:center;font-size:9px;letter-spacing:.04em;color:#aaa198}
@media(prefers-reduced-motion:reduce){.hero-slider .hero-slide{transition:none}}

/* Ver.1.5.1 — starter prompts directly above input */
.starter-near-input{
  margin:8px 0 8px;
}
.starter-near-label{
  margin:0 0 7px 2px;
  font-size:11px;
  color:#9a9289;
  letter-spacing:.03em;
}
.starter-near-input .starter-suggestions{
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.starter-near-input .starter-chip{
  font-size:12px;
  padding:7px 11px;
}


/* Ver.1.5.2 — mobile: dark background + larger, shorter copy */
@media(max-width:600px){
  .hero{
    background:#252724;
    color:#fff;
    border-radius:0 0 28px 28px;
    padding-bottom:28px;
  }
  .hero h1{
    color:#fff !important;
    font-size:34px !important;
    line-height:1.32;
    margin-top:8px;
    margin-bottom:14px;
  }
  .hero h2{
    color:#f1eee9 !important;
    font-size:22px !important;
    line-height:1.5;
    margin-bottom:18px;
  }
  .intro-copy{
    color:#ddd8d1 !important;
    font-size:20px !important;
    line-height:1.75 !important;
    padding:0 18px;
    margin-top:0;
  }
  .intro-copy strong{
    color:#fff !important;
    font-size:21px;
  }
  .hero .mark{
    color:#c9b89e;
  }
  .hero-generated-note{
    color:#bfb8b0 !important;
    font-size:11px !important;
  }
  .jewelry-type-label{
    color:#f2eee8 !important;
    font-size:16px !important;
  }
  .jewelry-type-panel{
    background:#30332f !important;
    border-color:#454943 !important;
    box-shadow:none !important;
  }
  .type-chip{
    background:#3a3e39 !important;
    border-color:#555a53 !important;
    color:#f3efe9 !important;
    font-size:13px !important;
  }
  .type-chip.active,
  .type-chip[aria-pressed="true"]{
    background:#f0ece6 !important;
    border-color:#f0ece6 !important;
    color:#2d312d !important;
  }
  .selected-jewelry-type{
    background:#41453f !important;
    color:#f4efe9 !important;
  }
  .personal-reference .reference-toggle{
    color:#d2ccc4 !important;
    font-size:12px !important;
  }
  .reference-panel{
    background:#30332f !important;
    border-color:#454943 !important;
  }
  .reference-copy,
  .reference-focus-label{
    color:#d4cec7 !important;
  }
}


/* Ver.1.5.3 — mobile tone refinement: light background, readable text, soft accent buttons */
@media(max-width:600px){
  .hero{
    background:transparent !important;
    color:var(--ink) !important;
    border-radius:0 !important;
    padding-bottom:0 !important;
  }

  .hero h1{
    color:#2f332f !important;
    font-size:32px !important;
    line-height:1.32;
    margin-top:8px;
    margin-bottom:12px;
  }

  .hero h2{
    color:#4d534e !important;
    font-size:21px !important;
    line-height:1.5;
    margin-bottom:16px;
  }

  .intro-copy{
    color:#5f625f !important;
    font-size:18px !important;
    line-height:1.72 !important;
    padding:0 18px;
    margin-top:0;
  }

  .intro-copy strong{
    color:#343a36 !important;
    font-size:19px !important;
    font-weight:700;
  }

  .hero .mark{
    color:#9b8d7b !important;
  }

  .hero-generated-note{
    color:#8f8982 !important;
    font-size:10px !important;
  }

  .jewelry-type-panel{
    background:rgba(255,252,247,.90) !important;
    border-color:#ddd6cd !important;
    box-shadow:0 8px 24px rgba(55,45,35,.05) !important;
  }

  .jewelry-type-label{
    color:#4f534f !important;
    font-size:15px !important;
  }

  .type-chip{
    background:#f6f1ea !important;
    border-color:#d8cec3 !important;
    color:#5b5f5b !important;
    font-size:13px !important;
    box-shadow:0 2px 8px rgba(55,45,35,.035);
  }

  .type-chip:hover{
    background:#efe8df !important;
  }

  .type-chip.active,
  .type-chip[aria-pressed="true"]{
    background:#7f8b82 !important;
    border-color:#7f8b82 !important;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(75,85,78,.16) !important;
  }

  .selected-jewelry-type{
    background:#f1ebe4 !important;
    color:#5a5f5b !important;
    border:1px solid #e0d7cd;
  }

  .personal-reference .reference-toggle{
    color:#6f766f !important;
    font-size:12px !important;
    background:#f7f3ee !important;
    border:1px solid #dfd7ce !important;
  }

  .personal-reference .reference-toggle:hover{
    background:#efe8df !important;
  }

  .reference-panel{
    background:#fffaf5 !important;
    border-color:#e0d7ce !important;
  }

  .reference-copy,
  .reference-focus-label{
    color:#6d706d !important;
  }

  .reference-upload{
    background:#eef2ef !important;
    border-color:#cfd8d1 !important;
    color:#4f5a52 !important;
  }

  .reference-focus{
    background:#f8f4ef !important;
    border-color:#ddd4ca !important;
    color:#666a66 !important;
  }

  .reference-focus.active{
    background:#87958a !important;
    border-color:#87958a !important;
    color:#fff !important;
  }

  .starter-near-input .starter-chip{
    background:#f3eee8 !important;
    border:1px solid #d8cec4 !important;
    color:#5c605c !important;
    box-shadow:0 2px 7px rgba(55,45,35,.035);
  }

  .starter-near-input .starter-chip:hover{
    background:#ebe4dc !important;
  }

  .send-btn{
    background:#7f8b82 !important;
    border-color:#7f8b82 !important;
    color:#fff !important;
  }
}


/* Ver.1.5.4 — slightly deeper mobile background + restore bottom reset */
@media(max-width:600px){
  body{
    background:#e9e4dd !important;
  }

  .hero{
    background:transparent !important;
  }

  .jewelry-type-panel{
    background:rgba(246,242,236,.94) !important;
  }

  .reference-panel{
    background:#f3eee8 !important;
  }

  .composer textarea{
    background:#f8f5f0 !important;
  }

  .bottom-actions{
    display:flex !important;
    justify-content:center;
    align-items:center;
    margin:18px 0 34px;
    min-height:42px;
  }

  .bottom-reset{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:9px 17px;
    border:1px solid #cfc6bc;
    border-radius:999px;
    background:#f3eee8;
    color:#5d625e;
    font-family:"Meiryo UI",Meiryo,sans-serif;
    font-size:13px;
    cursor:pointer;
  }

  .bottom-reset:hover{
    background:#e8e1d9;
  }

  .bottom-reset.hidden{
    display:none !important;
  }
}


/* Ver.1.5.5 — slightly darker warm greige on mobile */
@media(max-width:600px){
  body{
    background:#d8d1c8 !important;
  }

  .jewelry-type-panel{
    background:rgba(242,237,230,.96) !important;
  }

  .reference-panel{
    background:#eee8e1 !important;
  }

  .composer textarea{
    background:#f5f1eb !important;
  }

  .starter-near-input .starter-chip,
  .bottom-reset,
  .personal-reference .reference-toggle{
    background:#eee8e1 !important;
  }
}


/* Ver.1.6.0 — image download + Bali production */
.jewelry-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 8px 6px;
}
.jewelry-action-btn{
  border:1px solid #d3cbc2;
  border-radius:999px;
  background:#f7f3ee;
  color:#5d625e;
  padding:9px 14px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}
.jewelry-action-btn:hover{
  transform:translateY(-1px);
  background:#eee8e1;
}
.jewelry-action-btn.bali{
  background:#eef2ef;
  border-color:#cbd4cd;
  color:#4f5a52;
}
.bali-production-info{
  margin:8px 8px 8px;
  padding:16px 17px;
  border:1px solid #d8d0c7;
  border-radius:16px;
  background:#fbf8f4;
}
.bali-production-info.hidden{display:none}
.bali-production-title{
  font-size:15px;
  font-weight:700;
  color:#343834;
  margin-bottom:9px;
}
.bali-production-copy{
  font-size:12px;
  line-height:1.85;
  color:#666159;
}
.bali-production-note{
  margin-top:10px;
  font-size:10px;
  line-height:1.6;
  color:#9a928a;
}

@media(max-width:600px){
  .jewelry-card-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .jewelry-action-btn{
    width:100%;
    min-height:42px;
    font-size:13px;
  }
  .bali-production-title{font-size:16px}
  .bali-production-copy{font-size:13px}
}


/* Ver.1.7.0 — quota + consultation */
.quota-status{
  margin:8px 0 6px;
  text-align:center;
  font-size:10px;
  color:#888078;
}
.quota-status.hidden{display:none}

.production-interest-box{
  margin-top:15px;
  padding:13px 14px;
  border-radius:13px;
  background:#f2eee8;
}
.production-interest-title{
  font-size:12px;
  font-weight:700;
  color:#4e534f;
}
.production-interest-copy{
  margin-top:5px;
  font-size:11px;
  line-height:1.7;
  color:#777168;
}
.production-interest-btn,
.consult-open-btn,
.consult-submit-btn{
  margin-top:10px;
  border:1px solid #cbd4cd;
  border-radius:999px;
  background:#eef2ef;
  color:#4f5a52;
  padding:9px 14px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.production-interest-btn:disabled,
.consult-submit-btn:disabled{opacity:.55;cursor:default}
.production-interest-result,
.consult-result{
  margin-top:8px;
  font-size:10px;
  line-height:1.6;
  color:#687169;
}
.consult-divider{
  height:1px;
  background:#e2dbd3;
  margin:16px 0 4px;
}
.consult-open-btn{
  background:#fffaf5;
  border-color:#d8cec4;
  color:#5e5a54;
}
.consult-form{
  margin-top:12px;
  padding:14px;
  border:1px solid #ddd4ca;
  border-radius:14px;
  background:#fffdf9;
}
.consult-form.hidden{display:none}
.consult-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  color:#343834;
}
.consult-form label{
  display:block;
  margin-top:10px;
  font-size:11px;
  color:#68635d;
}
.consult-form input,
.consult-form select,
.consult-form textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:5px;
  padding:10px 11px;
  border:1px solid #d8d0c7;
  border-radius:10px;
  background:#fff;
  color:#333;
  font:inherit;
  outline:none;
}
.consult-form textarea{resize:vertical}
.consult-note{
  margin-top:9px;
  font-size:9px;
  line-height:1.6;
  color:#999188;
}
@media(max-width:600px){
  .quota-status{font-size:11px}
  .production-interest-title{font-size:13px}
  .production-interest-copy{font-size:12px}
  .production-interest-btn,.consult-open-btn,.consult-submit-btn{
    width:100%;
    min-height:42px;
    font-size:12px;
  }
  .consult-form label{font-size:12px}
}

/* Ver.1.7.2 — actionable quota UX */
.quota-limit-panel{
  margin:14px 0 10px;
  padding:15px 16px;
  border:1px solid #d5ccc2;
  border-radius:16px;
  background:#f3eee8;
  text-align:center;
}
.quota-limit-title{
  font-size:13px;
  font-weight:700;
  color:#484d49;
}
.quota-limit-copy{
  margin-top:6px;
  font-size:11px;
  line-height:1.7;
  color:#747069;
}
.quota-interest-btn{
  margin-top:11px;
  padding:10px 17px;
  border:1px solid #bdc9c0;
  border-radius:999px;
  background:#7f8b82;
  color:#fff;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.quota-interest-btn:disabled{opacity:.55}
.quota-interest-note{
  margin-top:7px;
  font-size:9px;
  color:#918a82;
}
.quota-action-result{
  margin-top:7px;
  font-size:10px;
  color:#657067;
}
@media(max-width:600px){
 .quota-limit-panel{margin:12px 4px 10px;padding:16px}
 .quota-limit-title{font-size:14px}
 .quota-limit-copy{font-size:12px}
 .quota-interest-btn{width:100%;min-height:44px;font-size:13px}
 .quota-interest-note{font-size:10px}
}


/* Ver.1.7.7 — compact vertical rhythm when embedded */
@media(max-width:900px){
  .chat{
    padding-bottom:10px;
  }
  .message{
    margin-bottom:12px;
  }
  .jewelry-card{
    margin-bottom:10px;
  }
  .jewelry-card-actions{
    padding-bottom:2px;
  }
  .revision-controls{
    margin-top:10px;
    margin-bottom:12px;
  }
  .bottom-actions{
    margin-top:12px;
    margin-bottom:20px;
  }
}


/* Ver.1.7.8 — embedded mode must not follow iframe viewport height */
html.is-embedded,
html.is-embedded body{
  min-height:0 !important;
  height:auto !important;
}

html.is-embedded body{
  display:block !important;
}

html.is-embedded .app-shell{
  min-height:0 !important;
  height:auto !important;
  padding-bottom:22px;
}

html.is-embedded .hero{
  margin:0 0 28px !important;
}

/* Avoid viewport-based vertical centering inside an auto-resizing iframe. */
html.is-embedded .app-shell,
html.is-embedded .hero{
  align-self:auto !important;
}


/* Ver.1.8.0 — robust embedded layout: fixed viewport, internal scroll */
html.is-embedded,
html.is-embedded body{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

html.is-embedded body{
  display:block !important;
}

html.is-embedded .app-shell{
  width:min(860px,100%);
  height:100vh !important;
  min-height:0 !important;
  box-sizing:border-box;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:92px !important;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

html.is-embedded .hero{
  margin:0 0 28px !important;
}

html.is-embedded .composer{
  position:sticky;
  bottom:0;
  z-index:20;
  margin-top:10px;
  padding:10px 0 8px;
  background:linear-gradient(to bottom, rgba(216,209,200,0), rgba(216,209,200,.94) 22%, rgba(216,209,200,.98));
  backdrop-filter:blur(3px);
}

html.is-embedded .quota-status{
  position:relative;
  z-index:21;
}

html.is-embedded .bottom-actions{
  margin-bottom:8px !important;
}

@media(max-width:600px){
  html.is-embedded .app-shell{
    padding-left:14px;
    padding-right:14px;
    padding-bottom:88px !important;
  }
  html.is-embedded .composer{
    padding-bottom:10px;
  }
}


/* Ver.1.8.1 — elegant embedded mode: natural page flow, no inner scrollbar */
html.is-embedded,
html.is-embedded body{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

html.is-embedded body{
  display:block !important;
}

html.is-embedded .app-shell{
  width:min(860px,100%);
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-bottom:26px !important;
}

html.is-embedded .hero{
  margin:0 0 28px !important;
}

html.is-embedded .composer{
  position:static !important;
  bottom:auto !important;
  z-index:auto !important;
  margin-top:14px;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
}

html.is-embedded .bottom-actions{
  margin-bottom:8px !important;
}


/* Ver.1.8.6 — prevent browser scroll anchoring in embedded editing mode */
html.is-embedded,
html.is-embedded body,
html.is-embedded .app-shell,
html.is-embedded #chat,
html.is-embedded .jewelry-card,
html.is-embedded .revision-controls,
html.is-embedded #composer{
  overflow-anchor:none !important;
}

.edit-top-anchor{width:100%;height:0;margin:0;padding:0;pointer-events:none;}


/* Ver.2.0.0 — AI制作コンシェルジュ */
.concierge-panel{
  margin:10px 8px 8px;
  padding:18px;
  border:1px solid #d8d0c7;
  border-radius:18px;
  background:#fbf8f4;
}
.concierge-panel.hidden{display:none}
.concierge-kicker{
  font-size:10px;
  letter-spacing:.08em;
  color:#938b83;
  margin-bottom:7px;
}
.concierge-title{
  font-size:18px;
  font-weight:700;
  color:#343834;
  margin-bottom:7px;
}
.concierge-intro{
  font-size:12px;
  line-height:1.8;
  color:#6d675f;
}
.concierge-quick,
.concierge-followups{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}
.concierge-chip{
  border:1px solid #d2c8bd;
  border-radius:999px;
  background:#fffdf9;
  color:#5d5a55;
  padding:8px 11px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:11px;
  cursor:pointer;
}
.concierge-chip:hover{background:#f1ebe4}
.concierge-chip.small{
  font-size:10px;
  padding:7px 10px;
}
.concierge-chat{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:14px;
}
.concierge-message{
  display:flex;
}
.concierge-message.user{justify-content:flex-end}
.concierge-message.assistant{justify-content:flex-start}
.concierge-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  line-height:1.75;
  white-space:pre-wrap;
}
.concierge-message.user .concierge-bubble{
  background:#e8e3dc;
  color:#504c47;
  border-bottom-right-radius:4px;
}
.concierge-message.assistant .concierge-bubble{
  background:#fff;
  border:1px solid #e0d8cf;
  color:#5f5a54;
  border-bottom-left-radius:4px;
}
.concierge-form{
  display:flex;
  gap:8px;
  margin-top:13px;
  padding:7px;
  border:1px solid #d9d0c6;
  border-radius:14px;
  background:#fff;
}
.concierge-input{
  flex:1;
  border:0;
  outline:0;
  resize:none;
  background:transparent;
  padding:8px 9px;
  min-height:38px;
  max-height:110px;
  font:inherit;
  color:#3f403e;
}
.concierge-send{
  align-self:flex-end;
  border:0;
  border-radius:11px;
  padding:9px 13px;
  background:#7b877f;
  color:#fff;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.concierge-status{
  min-height:16px;
  margin-top:5px;
  font-size:10px;
  color:#918981;
}
.concierge-human{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid #e3dcd4;
}
.concierge-human .consult-open-btn{
  margin-top:0;
}
.concierge-human-note{
  margin-top:7px;
  font-size:9px;
  line-height:1.6;
  color:#958d85;
}
.concierge-human-hint{
  margin-top:3px;
  font-size:10px;
  color:#78837b;
}
.consult-lead{
  margin-bottom:10px;
  font-size:11px;
  line-height:1.75;
  color:#6d675f;
}

@media(max-width:600px){
  .concierge-panel{padding:16px 14px}
  .concierge-title{font-size:18px}
  .concierge-intro{font-size:13px}
  .concierge-chip{font-size:12px;padding:9px 12px}
  .concierge-bubble{font-size:13px;max-width:92%}
  .concierge-form{align-items:flex-end}
  .concierge-send{min-width:62px;min-height:42px;font-size:12px}
  .concierge-human .consult-open-btn{width:100%}
}



/* Ver.2.0.14 — reference image during revision */
.revision-reference{margin-top:12px;padding-top:10px;border-top:1px solid rgba(120,110,100,.14)}
.revision-reference-btn{border:1px solid #cec5bb;border-radius:999px;background:#fffaf5;color:#6b645d;padding:8px 13px;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:11px;cursor:pointer}
.revision-reference-btn:hover{background:#f6efe8}
.revision-reference-info{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding:11px;border:1px solid #ded6ce;border-radius:14px;background:rgba(255,255,255,.72)}
.revision-reference-info.hidden{display:none}
.revision-reference-info img{width:76px;height:76px;object-fit:cover;border-radius:11px;border:1px solid #e0d9d1;background:#fff}
.revision-reference-meta{min-width:0;flex:1}
.revision-reference-name{font-size:10px;color:#706961;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.revision-reference-copy{margin-top:4px;font-size:10px;line-height:1.6;color:#928a82}
.revision-reference-focus{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.revision-ref-focus{border:1px solid #d7cfc7;border-radius:999px;background:#fff;color:#827a72;padding:5px 8px;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:9px;cursor:pointer}
.revision-ref-focus.active{background:#7f8983;border-color:#7f8983;color:#fff}
.revision-reference-remove{margin-top:8px;border:0;background:transparent;color:#9a716b;padding:0;font-family:"Meiryo UI",Meiryo,sans-serif;font-size:9px;cursor:pointer}
@media(max-width:600px){
  .revision-reference-btn{font-size:12px;padding:9px 13px}
  .revision-reference-info img{width:70px;height:70px}
  .revision-ref-focus{font-size:10px;padding:6px 8px}
}


/* Ver.2.0.15 — clear action after revision reference upload */
.revision-reference-make{
  display:block;
  width:100%;
  margin-top:11px;
  border:0;
  border-radius:12px;
  background:#7f8983;
  color:#fff;
  padding:10px 12px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.revision-reference-make:hover{filter:brightness(.97)}
.revision-reference-hint{
  margin-top:7px;
  font-size:9px;
  line-height:1.6;
  color:#9a928a;
}
@media(max-width:600px){
  .revision-reference-make{
    min-height:44px;
    font-size:12px;
  }
  .revision-reference-hint{
    font-size:10px;
  }
}


/* Ver.2.0.17 — ENERGY HYGIENE branding */
.edit-brand-header{
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  margin:2px 0 10px;
  padding:12px 4px 14px;
  border-bottom:1px solid rgba(77,91,81,.18);
}
.edit-brand-header.hidden{display:none}
.edit-brand-logo{
  display:block;
  width:118px;
  height:auto;
  flex:0 0 auto;
}
.edit-brand-divider{
  width:1px;
  height:36px;
  background:rgba(77,91,81,.20);
  flex:0 0 auto;
}
.edit-brand-copy{
  min-width:0;
  text-align:left;
}
.edit-brand-name{
  color:#244432;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.35;
}
.edit-brand-sub{
  margin-top:4px;
  color:#8a837b;
  font-size:10px;
  letter-spacing:.03em;
  line-height:1.45;
}
@media(max-width:600px){
  .edit-brand-header{
    gap:10px;
    padding:10px 2px 12px;
    margin-bottom:6px;
  }
  .edit-brand-logo{width:94px}
  .edit-brand-divider{height:32px}
  .edit-brand-name{
    font-size:10px;
    letter-spacing:.09em;
  }
  .edit-brand-sub{font-size:9px}
}


/* Ver.2.0.19 — top logo only on the hero screen */
.hero-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto 38px;
}
.hero-brand img{
  display:block;
  width:150px;
  max-width:42vw;
  height:auto;
  opacity:.94;
}
@media(max-width:600px){
  .hero-brand{
    margin-bottom:28px;
  }
  .hero-brand img{
    width:126px;
    max-width:46vw;
  }
}

/* Ver.2.0.22 — explicit spacing between logo and hero slider */
.hero .hero-brand{
  margin-bottom:38px !important;
}
@media(max-width:600px){
  .hero .hero-brand{
    margin-bottom:28px !important;
  }
}


/* Ver.2.0.24 — clearer mobile title + dialogue area */
.mobile-title-break{display:none}

.dialogue-panel{
  margin:18px 0 8px;
  padding:18px 18px 12px;
  border:1px solid rgba(91,85,78,.18);
  border-radius:20px;
  background:rgba(250,247,243,.72);
  box-shadow:0 6px 22px rgba(50,42,34,.035);
}
.dialogue-panel .starter-near-input{
  margin:0 0 12px;
}
.dialogue-panel .starter-near-label{
  margin:0 0 11px 1px;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  color:#4d514d;
  letter-spacing:.02em;
}
.dialogue-panel .composer{
  margin-top:12px;
}

@media(max-width:600px){
  .mobile-title-break{display:block}

  .hero h1{
    font-size:31px !important;
    line-height:1.28 !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  .dialogue-panel{
    margin:16px 4px 10px;
    padding:17px 14px 12px;
    border:1px solid rgba(92,84,75,.24);
    border-radius:18px;
    background:rgba(247,243,237,.92);
    box-shadow:0 5px 18px rgba(50,42,34,.045);
  }

  .dialogue-panel .starter-near-label{
    font-size:19px !important;
    line-height:1.35;
    margin-bottom:12px;
    color:#343934 !important;
  }

  .dialogue-panel .starter-near-input .starter-suggestions{
    gap:8px;
  }

  .dialogue-panel .starter-near-input .starter-chip{
    font-size:13px !important;
    padding:9px 12px !important;
  }

  html.is-embedded .dialogue-panel .composer{
    margin-top:14px !important;
  }
}


/* Ver.2.0.25 — service title on Top */
.hero .hero-brand{
  margin-bottom:12px !important;
}
.series-site-title{
  margin:0 auto 30px;
  text-align:center;
  color:#34483b;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.035em;
}
@media(max-width:600px){
  .hero .hero-brand{
    margin-bottom:10px !important;
  }
  .series-site-title{
    margin-bottom:26px;
    padding:0 10px;
    font-size:18px;
    line-height:1.5;
    white-space:nowrap;
  }
}


/* Ver.2.0.26 — hero headline reduced to supporting-copy scale */
.hero h1{
  font-size:18px !important;
  line-height:1.7 !important;
  font-weight:700;
}
@media(max-width:600px){
  .hero h1{
    font-size:15px !important;
    line-height:1.75 !important;
  }
}


/* Ver.2.0.27 — hero title and subtitle use identical typography */
.hero h1,
.hero .subtitle{
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
}
@media(max-width:600px){
  .hero h1,
  .hero .subtitle{
    font-family:"Meiryo UI",Meiryo,sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.75 !important;
    letter-spacing:0 !important;
  }
}


/* Ver.2.0.28 — exact fix: actual second line is h2, not .subtitle */
main .hero > h1,
main .hero > h2{
  margin-left:0 !important;
  margin-right:0 !important;
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.7 !important;
  letter-spacing:0 !important;
}
@media(max-width:600px){
  main .hero > h1,
  main .hero > h2{
    font-family:"Meiryo UI",Meiryo,sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.75 !important;
    letter-spacing:0 !important;
  }
}


/* Ver.2.0.29 — double gap between ENERGY HYGIENE logo and site title */
.hero .hero-brand{
  margin-bottom:24px !important;
}
@media(max-width:600px){
  .hero .hero-brand{
    margin-bottom:20px !important;
  }
}


/* =========================================================
   Ver.2.0.30 — unified visual system
   ========================================================= */
:root{
  --ui-font:"Meiryo UI",Meiryo,sans-serif;
  --ui-text:#3f443f;
  --ui-muted:#77766f;
  --ui-accent:#7f8d83;
  --ui-accent-dark:#6f7d73;
  --ui-surface:#f4f0ea;
  --ui-surface-2:#ece7df;
  --ui-surface-3:#fbf9f6;
  --ui-gap:20px;
  --ui-btn-h:44px;
}

html,body,button,input,textarea,select,
.hero,.chat,.revision-controls,.dialogue-panel,.concierge-panel,
.jewelry-type-panel,.reference-panel,.consult-form{
  font-family:var(--ui-font) !important;
}
body{color:var(--ui-text)}

.hero,.chat,.revision-controls,.suggestions,.dialogue-panel,
.concierge-panel,.consult-form,.production-interest-box,
.jewelry-type-panel,.reference-panel,.revision-reference-info,
.edit-brand-header{
  text-align:center;
}

/* Typography */
.hero h1,.hero h2{
  font-family:var(--ui-font) !important;
  font-size:18px !important;
  line-height:1.65 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
.series-site-title{
  font-family:var(--ui-font) !important;
  font-size:20px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}
.edit-brand-name,.concierge-title,.consult-title,.production-interest-title{
  font-family:var(--ui-font) !important;
  font-size:16px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
}
.revision-label,.starter-near-label,.jewelry-type-label{
  font-family:var(--ui-font) !important;
  font-size:15px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}
.intro-copy,.jewelry-copy,.concierge-intro,.consult-lead,
.production-interest-copy,.reference-copy,.revision-reference-copy,
.other-jewelry-note,.concierge-human-note,.consult-note,.status,.quota-status{
  font-size:13px !important;
  line-height:1.75 !important;
}
.hero-generated-note,.selected-jewelry-type,.reference-focus-label,
.reference-preview-info,.concierge-kicker,.concierge-status,
.revision-reference-name,.revision-reference-hint{
  font-size:11px !important;
  line-height:1.6 !important;
}

/* Panels: color blocks, no outlined rounded cards */
.jewelry-type-panel,.reference-panel,.dialogue-panel,.concierge-panel,
.consult-form,.production-interest-box,.revision-reference-info{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.jewelry-type-panel{
  background:var(--ui-surface) !important;
  padding:22px 20px !important;
}
.reference-panel{
  background:var(--ui-surface-2) !important;
  padding:20px !important;
}
.dialogue-panel{
  background:var(--ui-surface-3) !important;
  padding:24px 20px 20px !important;
}
.concierge-panel{
  background:var(--ui-surface) !important;
  padding:24px 20px !important;
}
.consult-form{
  background:var(--ui-surface-3) !important;
  padding:22px 18px !important;
}
.production-interest-box{
  background:var(--ui-surface-2) !important;
  padding:20px 18px !important;
}
.revision-reference-info{
  background:var(--ui-surface-3) !important;
  padding:18px !important;
}

.edit-brand-header{
  justify-content:center !important;
  border:0 !important;
  background:transparent !important;
  padding:16px 0 22px !important;
  margin:0 0 var(--ui-gap) !important;
}
.edit-brand-copy{text-align:center !important}

/* Spacing */
.jewelry-type-panel,.personal-reference,.dialogue-panel,.revision-controls,
.concierge-panel,.consult-form,.production-interest-box{
  margin-top:var(--ui-gap) !important;
  margin-bottom:var(--ui-gap) !important;
}
.hero-visual{margin-bottom:var(--ui-gap) !important}
.hero-generated-note{
  margin-top:-8px !important;
  margin-bottom:var(--ui-gap) !important;
}
.intro-copy{
  margin-top:10px !important;
  margin-bottom:var(--ui-gap) !important;
}
.jewelry-type-buttons,.reference-focus-buttons,.revision-buttons,
.suggestion-buttons,.starter-suggestions,.concierge-quick,
.concierge-followups,.revision-reference-focus{
  justify-content:center !important;
  gap:8px !important;
}

/* Buttons */
.type-chip,.reference-toggle,.reference-upload,.reference-focus,
.revision-chip,.revision-reference-btn,.revision-ref-focus,
.revision-reference-make,.starter-chip,.suggestion-chip,.send-btn,
.jewelry-action-btn,.concierge-chip,.concierge-send,.consult-open-btn,
.consult-submit-btn,.production-interest-btn,.bottom-reset{
  min-height:var(--ui-btn-h) !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  padding:10px 16px !important;
  font-family:var(--ui-font) !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}
.type-chip,.reference-toggle,.reference-upload,.reference-focus,
.revision-chip,.revision-reference-btn,.revision-ref-focus,
.starter-chip,.suggestion-chip,.concierge-chip,.bottom-reset,
.jewelry-action-btn.download{
  background:#fff !important;
  color:#5b615c !important;
  border:1px solid #d4d0c9 !important;
}
.type-chip.active,.reference-focus.active,.revision-ref-focus.active,
.send-btn,.revision-reference-make,.concierge-send,.consult-open-btn,
.consult-submit-btn,.production-interest-btn,.jewelry-action-btn.bali{
  background:var(--ui-accent) !important;
  color:#fff !important;
  border:1px solid var(--ui-accent) !important;
}
.reference-remove,.revision-reference-remove{
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:8px !important;
  font-size:11px !important;
  font-weight:500 !important;
}

/* Inputs */
.composer,.concierge-form{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.composer textarea,.concierge-input,.other-jewelry-input,
.consult-form input,.consult-form textarea{
  border:1px solid #d6d1ca !important;
  border-radius:12px !important;
  background:#fff !important;
  font-family:var(--ui-font) !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:var(--ui-text) !important;
  box-shadow:none !important;
}
.dialogue-panel .composer,.concierge-form{
  max-width:680px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.jewelry-card-actions,.concierge-human,.bottom-actions{
  justify-content:center !important;
  text-align:center !important;
}

/* Generated content: no card framing */
.jewelry-card{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.jewelry-card img{
  border-radius:0 !important;
  box-shadow:none !important;
}

@media(max-width:600px){
  :root{
    --ui-gap:18px;
    --ui-btn-h:44px;
  }
  .hero h1,.hero h2{font-size:17px !important}
  .series-site-title{font-size:19px !important}
  .edit-brand-name,.concierge-title,.consult-title,.production-interest-title{
    font-size:16px !important;
  }
  .revision-label,.starter-near-label,.jewelry-type-label{
    font-size:15px !important;
  }
  .jewelry-type-panel,.reference-panel,.dialogue-panel,.concierge-panel,
  .consult-form,.production-interest-box,.revision-reference-info{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .type-chip,.reference-toggle,.reference-upload,.reference-focus,
  .revision-chip,.revision-reference-btn,.revision-ref-focus,
  .revision-reference-make,.starter-chip,.suggestion-chip,.send-btn,
  .jewelry-action-btn,.concierge-chip,.concierge-send,.consult-open-btn,
  .consult-submit-btn,.production-interest-btn,.bottom-reset{
    min-height:44px !important;
    font-size:13px !important;
    padding:10px 14px !important;
  }
}


/* =========================================================
   Ver.2.0.31 — block hierarchy refinement
   ========================================================= */

/* ① Remove any remaining visual frame/edge on jewelry block */
.jewelry-type-panel{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.jewelry-type-panel::before,
.jewelry-type-panel::after{
  display:none !important;
  content:none !important;
}

/* ② Tighten the two hero lines */
.hero h1{
  margin-bottom:2px !important;
}
.hero h2{
  margin-top:0 !important;
  margin-bottom:16px !important;
}

/* ③ Slightly deeper shared block color */
.jewelry-type-panel,
.dialogue-panel{
  background:#e7e1d8 !important;
}

/* ④ Reference control lives inside jewelry block */
.jewelry-type-panel .personal-reference{
  margin:18px 0 0 !important;
  padding-top:16px;
  border-top:1px solid rgba(84,78,70,.10);
}
.jewelry-type-panel .reference-panel{
  margin:12px 0 0 !important;
  background:rgba(255,255,255,.42) !important;
}

/* ⑤ Dialogue block shares exactly the same background */
.dialogue-panel{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* keep block widths and spacing visually aligned */
.jewelry-type-panel,
.dialogue-panel{
  width:100%;
  box-sizing:border-box;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top:24px !important;
  padding-bottom:24px !important;
}

/* Center reference content consistently */
.jewelry-type-panel .personal-reference,
.jewelry-type-panel .reference-panel,
.jewelry-type-panel .reference-preview-wrap{
  text-align:center !important;
}
.jewelry-type-panel .reference-preview-wrap{
  justify-content:center !important;
}

@media(max-width:600px){
  .hero h1{
    margin-bottom:0 !important;
  }
  .hero h2{
    margin-top:0 !important;
    margin-bottom:14px !important;
  }
  .jewelry-type-panel,
  .dialogue-panel{
    background:#e7e1d8 !important;
    padding-top:22px !important;
    padding-bottom:22px !important;
  }
  .jewelry-type-panel .personal-reference{
    margin-top:16px !important;
    padding-top:14px;
  }
}


/* =========================================================
   Ver.2.0.32 — remove remaining frames
   ========================================================= */

/* Jewelry selection block: remove all legacy frame sources */
main .hero .jewelry-type-spacer{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
main .hero .jewelry-type-panel,
main .hero .jewelry-type-panel *,
main .hero .jewelry-type-panel::before,
main .hero .jewelry-type-panel::after{
  box-shadow:none !important;
}
main .hero .jewelry-type-panel{
  border:none !important;
  outline:none !important;
  border-radius:0 !important;
  background:#e7e1d8 !important;
}
main .hero .jewelry-type-panel::before,
main .hero .jewelry-type-panel::after{
  content:none !important;
  display:none !important;
}

/* Keep controls themselves as controls, but no enclosing reference frame */
main .hero .jewelry-type-panel .personal-reference{
  border:0 !important;
  outline:0 !important;
}
main .hero .jewelry-type-panel .reference-panel{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Top photo slider / photo block: no frame at all */
main .hero .hero-visual,
main .hero .hero-slider,
main .hero .hero-stage,
main .hero .hero-track,
main .hero .hero-slide,
main .hero .hero-image,
main .hero .hero-visual img{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
main .hero .hero-visual::before,
main .hero .hero-visual::after,
main .hero .hero-slider::before,
main .hero .hero-slider::after{
  content:none !important;
  display:none !important;
}

/* Generated jewelry photos: also remove any surrounding photo card/frame */
main .jewelry-card,
main .jewelry-card-image,
main .jewelry-image-wrap,
main .jewelry-card img{
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   Ver.2.0.33 — align the three main Top blocks
   Photo / Jewelry type / Dialogue
   ========================================================= */

:root{
  --top-block-width:760px;
  --top-block-mobile-gutter:14px;
}

/* One shared horizontal grid */
main .hero .hero-visual,
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  width:min(var(--top-block-width), calc(100% - 28px)) !important;
  max-width:var(--top-block-width) !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

/* Remove old horizontal offsets that made the blocks look staggered */
main .hero .hero-visual,
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  padding-left:20px !important;
  padding-right:20px !important;
}

/* Photo itself fills exactly the shared block width */
main .hero .hero-visual{
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
}
main .hero .hero-visual img,
main .hero .hero-slider,
main .hero .hero-stage,
main .hero .hero-track{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Same vertical rhythm between the three blocks */
main .hero .hero-visual{
  margin-bottom:20px !important;
}
main .hero .jewelry-type-panel{
  margin-top:20px !important;
  margin-bottom:20px !important;
}
main > .dialogue-panel{
  margin-top:20px !important;
  margin-bottom:20px !important;
}

@media(max-width:600px){
  main .hero .hero-visual,
  main .hero .jewelry-type-panel,
  main > .dialogue-panel{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  main .hero .jewelry-type-panel,
  main > .dialogue-panel{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  main .hero .hero-visual{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* =========================================================
   Ver.2.0.34 — photo width matches colored block content width
   ========================================================= */
main .hero .hero-visual{
  width:min(calc(var(--top-block-width) - 40px), calc(100% - 68px)) !important;
  max-width:calc(var(--top-block-width) - 40px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:600px){
  main .hero .hero-visual{
    width:calc(100% - 56px) !important;
    max-width:none !important;
    margin-left:28px !important;
    margin-right:28px !important;
  }
}


/* =========================================================
   Ver.2.0.35 — exact outer-edge alignment of Top 3 blocks
   ========================================================= */

/* Align OUTER edges, not inner content widths */
main .hero .hero-visual,
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  width:min(760px, calc(100% - 28px)) !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Photo has no inner padding; colored panels keep their own inner padding */
main .hero .hero-visual{
  padding-left:0 !important;
  padding-right:0 !important;
}
main .hero .hero-visual img,
main .hero .hero-slider,
main .hero .hero-stage,
main .hero .hero-track{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media(max-width:600px){
  main .hero .hero-visual,
  main .hero .jewelry-type-panel,
  main > .dialogue-panel{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }
}


/* =========================================================
   Ver.2.0.36 — one exact 720px grid for all three Top blocks
   ========================================================= */
:root{
  --top-block-width:720px !important;
}

main .hero .hero-visual,
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  width:min(720px, calc(100% - 28px)) !important;
  max-width:720px !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Photo fills exactly the same 720px outer box */
main .hero .hero-visual,
main .hero .hero-slider{
  width:min(720px, calc(100% - 28px)) !important;
  max-width:720px !important;
}
main .hero .hero-visual img,
main .hero .hero-slider .hero-slide{
  width:100% !important;
  max-width:100% !important;
}

/* Colored blocks use the same OUTER width; padding stays inside via border-box */
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  padding-left:20px !important;
  padding-right:20px !important;
}

@media(max-width:600px){
  main .hero .hero-visual,
  main .hero .hero-slider,
  main .hero .jewelry-type-panel,
  main > .dialogue-panel{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  main .hero .jewelry-type-panel,
  main > .dialogue-panel{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* =========================================================
   Ver.2.0.37 — exact same color for the two Top interaction blocks
   ========================================================= */
main .hero .jewelry-type-panel,
main > .dialogue-panel{
  background:#e5dfd6 !important;
  background-color:#e5dfd6 !important;
  background-image:none !important;
  opacity:1 !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Avoid parent/translucent treatments making either block look lighter */
main .hero .jewelry-type-panel::before,
main .hero .jewelry-type-panel::after,
main > .dialogue-panel::before,
main > .dialogue-panel::after{
  content:none !important;
  display:none !important;
}


/* =========================================================
   Ver.2.0.38 — same visual density for the two blocks
   ========================================================= */

/* Same base color, forced again at highest specificity */
html body main .hero .jewelry-type-panel,
html body main > .dialogue-panel{
  background:#e5dfd6 !important;
  background-color:#e5dfd6 !important;
  background-image:none !important;
}

/* The dialogue block looked darker because embedded-mode composer
   had its own semi-transparent gradient/background. Remove it. */
html.is-embedded body main > .dialogue-panel .composer,
html body main > .dialogue-panel .composer{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

/* Also neutralize internal wrappers so the panel itself supplies
   the only background tone. Buttons and textarea remain visible. */
html body main > .dialogue-panel .starter-near-input,
html body main > .dialogue-panel .starter-suggestions,
html body main > .dialogue-panel .quota-status,
html body main > .dialogue-panel .status{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Same padding so the amount of visible color around contents matches */
html body main .hero .jewelry-type-panel,
html body main > .dialogue-panel{
  padding-top:24px !important;
  padding-bottom:24px !important;
}
@media(max-width:600px){
  html body main .hero .jewelry-type-panel,
  html body main > .dialogue-panel{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }
}


/* =========================================================
   Ver.2.0.39 — exact label typography + exact panel color
   ========================================================= */

/* These two section labels must look identical */
html body main .hero .jewelry-type-label,
html body main > .dialogue-panel .starter-near-label{
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  font-style:normal !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  color:#4d514d !important;
  opacity:1 !important;
  text-shadow:none !important;
  margin:0 0 12px !important;
}

/* Exact same panel rendering */
html body main .hero .jewelry-type-panel,
html body main > .dialogue-panel{
  background:#e5dfd6 !important;
  background-color:#e5dfd6 !important;
  background-image:none !important;
  background-blend-mode:normal !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Remove inherited embedded background from the dialogue area */
html.is-embedded body main > .dialogue-panel,
html.is-embedded body main > .dialogue-panel .starter-near-input,
html.is-embedded body main > .dialogue-panel .composer{
  background-image:none !important;
  filter:none !important;
}


/* =========================================================
   Ver.2.0.40 — mobile layout refinements
   ========================================================= */
@media(max-width:600px){

  /* ① Match "何から話す？" block width to the other Top blocks */
  html body main > .dialogue-panel{
    width:calc(100% - 28px) !important;
    max-width:none !important;
    margin-left:14px !important;
    margin-right:14px !important;
    box-sizing:border-box !important;
  }

  /* ② "想いを、ジュエリーに。" back to one line */
  .mobile-title-break{
    display:none !important;
  }
  main .hero > h1{
    white-space:nowrap !important;
    font-size:17px !important;
    line-height:1.55 !important;
  }

  /* ③ Reduce "少し話してみてください。" and surrounding intro copy */
  .intro-copy{
    font-size:13px !important;
    line-height:1.65 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .intro-copy p,
  .intro-copy strong{
    font-size:13px !important;
    line-height:1.65 !important;
  }
}


/* =========================================================
   Ver.2.0.41 — mobile exact visual alignment
   ========================================================= */
@media(max-width:600px){

  /*
    .jewelry-type-panel is inside .hero.
    .hero itself has 12px left/right padding.
    dialogue-panel is outside .hero.
    Therefore the same "calc(100% - 28px)" produced a wider dialogue block.
    Add the hero's 12px + 12px to the dialogue gutters.
  */
  html body main.app-shell > .dialogue-panel{
    width:calc(100% - 52px) !important;
    max-width:none !important;
    margin-left:26px !important;
    margin-right:26px !important;
    box-sizing:border-box !important;
  }
}


/* =========================================================
   Ver.2.0.42 — lighten medium-gray buttons on mobile
   ========================================================= */
@media(max-width:600px){

  /* Medium-emphasis buttons */
  .revision-chip.strong,
  .jewelry-action-btn:not(.bali):not(.download),
  .reference-toggle,
  .revision-reference-btn{
    background:#e9e7e3 !important;
    background-color:#e9e7e3 !important;
    color:#555b56 !important;
    border-color:#d8d4ce !important;
  }

  .revision-chip.strong:hover,
  .jewelry-action-btn:not(.bali):not(.download):hover,
  .reference-toggle:hover,
  .revision-reference-btn:hover{
    background:#e3e0db !important;
    border-color:#d2cec7 !important;
  }
}


/* =========================================================
   Ver.2.0.44 — shared "それ、……" series guide
   ========================================================= */
.series-guide{
  width:min(720px, calc(100% - 28px));
  box-sizing:border-box;
  margin:20px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:10px 14px;
  font-family:"Meiryo UI",Meiryo,sans-serif;
}
.series-guide.hidden{display:none !important}

.series-guide-character{
  position:relative;
  flex:0 0 46px;
  width:46px;
  height:58px;
  animation:guideFloat 3.2s ease-in-out infinite;
}
.guide-head{
  position:absolute;
  top:0;
  left:6px;
  width:34px;
  height:34px;
  border:2px solid #7f8d83;
  border-radius:50%;
  background:#faf8f4;
  box-sizing:border-box;
}
.guide-hair{
  position:absolute;
  left:4px;
  top:3px;
  width:24px;
  height:10px;
  border-top:3px solid #7f8d83;
  border-radius:50%;
  transform:rotate(-8deg);
}
.guide-eye{
  position:absolute;
  top:15px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#59625c;
  animation:guideBlink 5s infinite;
}
.guide-eye-left{left:9px}
.guide-eye-right{right:9px}
.guide-smile{
  position:absolute;
  left:12px;
  top:21px;
  width:8px;
  height:4px;
  border-bottom:1.5px solid #59625c;
  border-radius:0 0 8px 8px;
}
.guide-body{
  position:absolute;
  left:12px;
  bottom:0;
  width:22px;
  height:25px;
  border-radius:11px 11px 6px 6px;
  background:#d8ddd8;
}
.series-guide-bubble{
  position:relative;
  max-width:520px;
  padding:11px 15px;
  background:#f4f0ea;
  border-radius:16px;
  text-align:left;
}
.series-guide-bubble::before{
  content:"";
  position:absolute;
  left:-8px;
  top:18px;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-right:9px solid #f4f0ea;
}
.series-guide-name{
  margin-bottom:3px;
  color:#7a817b;
  font-size:10px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.03em;
}
.series-guide-text{
  color:#4d514d;
  font-size:13px;
  line-height:1.65;
  font-weight:500;
}
@keyframes guideFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes guideBlink{
  0%,46%,50%,100%{transform:scaleY(1)}
  48%{transform:scaleY(.15)}
}
@media(max-width:600px){
  .series-guide{
    width:calc(100% - 52px);
    margin:16px 26px;
    gap:10px;
    padding:8px 4px;
  }
  .series-guide-character{
    flex-basis:40px;
    width:40px;
    height:52px;
  }
  .guide-head{left:4px}
  .guide-body{left:10px}
  .series-guide-bubble{
    flex:1;
    padding:10px 12px;
  }
  .series-guide-text{font-size:12px}
}


/* =========================================================
   Ver.2.0.45 — more energetic "ソレミ"
   ========================================================= */
.series-guide-character{
  animation:komachiBounce 2.1s ease-in-out infinite !important;
}
.guide-head{
  border-color:#778b7e !important;
  background:#fffaf2 !important;
}
.guide-hair{
  width:25px !important;
  height:12px !important;
  border-top:3px solid #5f7166 !important;
  transform:rotate(-13deg) !important;
}
.guide-head::before{
  content:"";
  position:absolute;
  top:-7px;
  left:15px;
  width:8px;
  height:10px;
  border-left:3px solid #5f7166;
  border-radius:50%;
  transform:rotate(18deg);
}
.guide-head::after{
  content:"";
  position:absolute;
  left:6px;
  top:20px;
  width:4px;
  height:2px;
  border-radius:50%;
  background:#e8b7a0;
  box-shadow:17px 0 0 #e8b7a0;
}
.guide-smile{
  left:11px !important;
  top:21px !important;
  width:10px !important;
  height:5px !important;
  border-bottom:2px solid #59625c !important;
}
.guide-body{
  background:#d6a96d !important;
  transform:rotate(-2deg);
}
.guide-body::before{
  content:"";
  position:absolute;
  width:15px;
  height:5px;
  right:-12px;
  top:5px;
  border-radius:999px;
  background:#d6a96d;
  transform-origin:left center;
  animation:komachiWave 1.15s ease-in-out infinite;
}
.guide-body::after{
  content:"";
  position:absolute;
  width:13px;
  height:5px;
  left:-10px;
  top:8px;
  border-radius:999px;
  background:#d6a96d;
  transform:rotate(24deg);
}
.series-guide-bubble{
  background:#f7f1e8 !important;
}
.series-guide-bubble::before{
  border-right-color:#f7f1e8 !important;
}
.series-guide-name{
  color:#9a7041 !important;
  font-weight:700 !important;
}
@keyframes komachiBounce{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-5px) rotate(2deg)}
}
@keyframes komachiWave{
  0%,100%{transform:rotate(-18deg)}
  50%{transform:rotate(-55deg)}
}


/* Ver.2.0.47 — persistent guide spacing */
.series-guide-persistent{
  margin-top:18px !important;
  margin-bottom:18px !important;
}


/* =========================================================
   Ver.2.0.48 — edit controls polish + clearer suggestions + Soremi
   ========================================================= */

/* ① Revision area as one clearly colored section */
html body main .revision-controls{
  width:min(720px, calc(100% - 28px)) !important;
  max-width:720px !important;
  box-sizing:border-box !important;
  margin:20px auto !important;
  padding:24px 20px !important;
  background:#e8e1d8 !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:center !important;
}
html body main .revision-controls .revision-label{
  margin:0 0 16px !important;
  color:#414741 !important;
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  text-align:center !important;
}
html body main .revision-controls .revision-buttons{
  justify-content:center !important;
}
html body main .revision-controls .revision-reference{
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(70,65,58,.10) !important;
}

/* ② Suggestions label: centered, darker and easier to read */
html body main .suggestions{
  width:min(720px, calc(100% - 28px)) !important;
  max-width:720px !important;
  margin:14px auto !important;
  padding:14px 14px 10px !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
html body main .suggestions .suggestions-label{
  margin:0 0 12px !important;
  color:#555b56 !important;
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
  text-align:center !important;
}
html body main .suggestions .suggestion-buttons{
  justify-content:center !important;
}

/* ③ Soremi: lighter, more girl-like silhouette */
.series-guide-character{
  width:50px !important;
  height:64px !important;
  flex-basis:50px !important;
}
.series-guide-character .guide-head{
  left:7px !important;
  top:0 !important;
  width:36px !important;
  height:36px !important;
  border:2px solid #75867a !important;
  background:#fff9f1 !important;
  border-radius:52% 52% 48% 48% !important;
}
.series-guide-character .guide-hair{
  left:1px !important;
  top:-2px !important;
  width:31px !important;
  height:17px !important;
  border:0 !important;
  border-top:5px solid #665e58 !important;
  border-left:3px solid #665e58 !important;
  border-right:3px solid #665e58 !important;
  border-radius:60% 60% 35% 35% !important;
  transform:rotate(-4deg) !important;
}
.series-guide-character .guide-hair-side{
  position:absolute;
  right:-5px;
  top:7px;
  width:10px;
  height:22px;
  border-right:4px solid #665e58;
  border-bottom:3px solid #665e58;
  border-radius:0 0 10px 0;
  transform:rotate(-8deg);
}
.series-guide-character .guide-eye{
  top:16px !important;
  width:3px !important;
  height:4px !important;
  background:#505852 !important;
}
.series-guide-character .guide-eye-left{left:9px !important}
.series-guide-character .guide-eye-right{right:9px !important}
.series-guide-character .guide-smile{
  left:12px !important;
  top:23px !important;
  width:10px !important;
  height:5px !important;
  border-bottom:2px solid #59625c !important;
}
.series-guide-character .guide-body{
  left:13px !important;
  bottom:7px !important;
  width:24px !important;
  height:25px !important;
  border-radius:11px 11px 4px 4px !important;
  background:#d59b83 !important;
}
.series-guide-character .guide-skirt{
  position:absolute;
  left:-4px;
  bottom:-12px;
  width:32px;
  height:17px;
  background:#819287;
  clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);
  border-radius:2px 2px 6px 6px;
}
.series-guide-character .guide-body::before{
  background:#d59b83 !important;
}
.series-guide-character .guide-body::after{
  background:#d59b83 !important;
}
.series-guide-character .guide-head::after{
  background:#e9afa4 !important;
  box-shadow:17px 0 0 #e9afa4 !important;
}
.series-guide-name{
  color:#8f665b !important;
}

/* make Soremi's movement a little perkier, but not distracting */
.series-guide-character{
  animation:soremiHop 2.25s ease-in-out infinite !important;
}
@keyframes soremiHop{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  45%{transform:translateY(-5px) rotate(1.5deg)}
  55%{transform:translateY(-4px) rotate(1deg)}
}

@media(max-width:600px){
  html body main .revision-controls,
  html body main .suggestions{
    width:calc(100% - 52px) !important;
    max-width:none !important;
    margin-left:26px !important;
    margin-right:26px !important;
  }
  html body main .revision-controls{
    padding:22px 14px !important;
  }
  html body main .revision-controls .revision-label{
    font-size:15px !important;
  }
  html body main .suggestions .suggestions-label{
    font-size:13px !important;
  }

  .series-guide-character{
    width:46px !important;
    height:60px !important;
    flex-basis:46px !important;
  }
}


/* =========================================================
   Ver.2.0.51 — Soremi as the AI production concierge
   ========================================================= */
.concierge-soremi-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto 14px;
}
.concierge-soremi-character{
  flex:0 0 46px !important;
  width:46px !important;
  height:60px !important;
}
.concierge-soremi-copy{
  text-align:left;
}
.concierge-soremi-copy .concierge-kicker{
  margin:0 0 2px !important;
  font-size:10px !important;
  color:#8c8178 !important;
}
.concierge-soremi-name{
  font-family:"Meiryo UI",Meiryo,sans-serif;
  font-size:15px;
  line-height:1.4;
  font-weight:700;
  color:#8f665b;
}
.concierge-message.assistant{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.concierge-soremi-avatar{
  position:relative;
  flex:0 0 28px;
  width:28px;
  height:28px;
  margin-top:2px;
  border:1.5px solid #819087;
  border-radius:50%;
  background:#fff9f1;
  box-sizing:border-box;
}
.soremi-avatar-hair{
  position:absolute;
  left:3px;
  top:1px;
  width:19px;
  height:9px;
  border-top:3px solid #665e58;
  border-left:2px solid #665e58;
  border-radius:60% 50% 0 0;
  transform:rotate(-5deg);
}
.soremi-avatar-eye{
  position:absolute;
  top:13px;
  width:2px;
  height:3px;
  border-radius:50%;
  background:#505852;
}
.soremi-avatar-eye.left{left:7px}
.soremi-avatar-eye.right{right:7px}
.soremi-avatar-smile{
  position:absolute;
  left:9px;
  top:18px;
  width:7px;
  height:4px;
  border-bottom:1.5px solid #59625c;
  border-radius:0 0 7px 7px;
}
.concierge-message.assistant .concierge-bubble{
  flex:1;
  min-width:0;
}
@media(max-width:600px){
  .concierge-soremi-head{
    gap:10px;
    margin-bottom:12px;
  }
  .concierge-soremi-character{
    flex-basis:42px !important;
    width:42px !important;
    height:56px !important;
  }
  .concierge-soremi-name{
    font-size:14px;
  }
}


/* =========================================================
   Ver.2.0.52 — use Soremi image assets instead of CSS doll
   ========================================================= */
.soremi-image-character{
  position:relative !important;
  width:58px !important;
  height:72px !important;
  flex:0 0 58px !important;
  overflow:visible !important;
  animation:soremiImageHop 2.4s ease-in-out infinite !important;
}
.soremi-image-character > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  border:0 !important;
  background:transparent !important;
}
@keyframes soremiImageHop{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-4px) rotate(1deg)}
}

/* Concierge uses the same Soremi character */
.concierge-soremi-character{
  width:62px !important;
  height:78px !important;
  flex-basis:62px !important;
}

/* Small chat icon */
.concierge-soremi-avatar{
  overflow:hidden !important;
  width:32px !important;
  height:32px !important;
  flex-basis:32px !important;
  padding:0 !important;
  border:1px solid #d9cbc4 !important;
  background:#f8eeee !important;
}
.concierge-soremi-avatar > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50% !important;
}

/* Hide any old CSS-drawn character parts if cached markup remains */
.soremi-image-character .guide-head,
.soremi-image-character .guide-body,
.soremi-image-character .guide-hair,
.soremi-image-character .guide-hair-side,
.soremi-image-character .guide-eye,
.soremi-image-character .guide-smile,
.soremi-image-character .guide-skirt{
  display:none !important;
}

@media(max-width:600px){
  .soremi-image-character{
    width:52px !important;
    height:66px !important;
    flex-basis:52px !important;
  }
  .concierge-soremi-character{
    width:56px !important;
    height:70px !important;
    flex-basis:56px !important;
  }
}


/* =========================================================
   Ver.2.0.53 — Soremi asset crop/orientation/transparency fix
   ========================================================= */
.soremi-image-character{
  width:64px !important;
  height:82px !important;
  flex:0 0 64px !important;
  overflow:visible !important;
  background:transparent !important;
}
.soremi-image-character > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.concierge-soremi-character{
  width:68px !important;
  height:88px !important;
  flex-basis:68px !important;
  overflow:visible !important;
}
.concierge-soremi-avatar{
  background:transparent !important;
  overflow:hidden !important;
}
.concierge-soremi-avatar > img{
  object-fit:contain !important;
  background:transparent !important;
}
@media(max-width:600px){
  .soremi-image-character{
    width:58px !important;
    height:76px !important;
    flex-basis:58px !important;
  }
  .concierge-soremi-character{
    width:62px !important;
    height:80px !important;
    flex-basis:62px !important;
  }
}


/* =========================================================
   Ver.2.1.0 — community sample gallery
   ========================================================= */
.reference-source-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.reference-source-btn{
  min-height:44px;box-sizing:border-box;border:0;border-radius:999px;padding:11px 18px;
  background:#dedbd6;color:#454945;font:600 13px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center
}
.reference-source-btn input{display:none}

.gallery-modal{position:fixed;inset:0;z-index:10000;background:rgba(25,25,25,.48);display:flex;align-items:center;justify-content:center;padding:20px}
.gallery-modal.hidden{display:none!important}
.gallery-sheet{width:min(960px,100%);max-height:90vh;overflow:auto;background:#f7f5f1;padding:24px;box-sizing:border-box}
.gallery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.gallery-kicker{font-size:11px;color:#8f665b;font-weight:700;margin-bottom:4px}
.gallery-head h3{margin:0;font-size:20px;color:#3f4540}
.gallery-close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#666}
.gallery-profile{background:#ebe5dd;padding:16px;margin-bottom:18px;text-align:left}
.gallery-profile-copy{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.gallery-profile-copy strong{font-size:14px;color:#444}
.gallery-profile-copy span,.gallery-privacy-note{font-size:11px;line-height:1.6;color:#737773}
.gallery-profile-row{display:flex;gap:8px}
.gallery-profile-row input{flex:1;min-width:0;border:1px solid #d1cbc4;background:#fff;padding:10px 12px;font-size:14px}
.gallery-profile-row button{border:0;background:#727f76;color:#fff;padding:0 18px;font-weight:700;cursor:pointer}
.gallery-nickname-status{min-height:18px;margin-top:6px;font-size:11px;color:#76665d}
.gallery-share-setting{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;font-weight:600;color:#4f554f}
.gallery-filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.gallery-filter{border:0;border-radius:999px;padding:8px 12px;background:#e4e1dc;color:#555;cursor:pointer;font-size:12px}
.gallery-filter.active{background:#7c897f;color:#fff}
.gallery-by-user{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 14px;font-size:13px;font-weight:700}
.gallery-by-user.hidden{display:none!important}
.gallery-by-user button{border:0;background:transparent;text-decoration:underline;color:#6d756f;cursor:pointer}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gallery-card{background:#fff;padding:0 0 9px;overflow:hidden}
.gallery-image-btn{display:block;width:100%;border:0;padding:0;background:#fff;cursor:pointer;position:relative}
.gallery-image-btn img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery-image-btn span{position:absolute;left:8px;right:8px;bottom:8px;padding:7px;background:rgba(255,255,255,.9);font-size:10px;font-weight:700;color:#444}
.gallery-author{border:0;background:transparent;padding:8px 10px 0;color:#7a655b;font-size:11px;cursor:pointer}
.gallery-empty,.gallery-loading{text-align:center;padding:32px 10px;color:#777;font-size:13px}
@media(max-width:700px){
  .gallery-modal{padding:0;align-items:stretch}
  .gallery-sheet{width:100%;max-height:100vh;padding:18px 14px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .gallery-profile-row{flex-direction:column}
  .gallery-profile-row button{min-height:42px}
  .reference-source-buttons{flex-direction:column}
  .reference-source-btn{width:100%}
}

.gallery-add-own{margin:14px 0 18px;text-align:center}.gallery-add-own-btn{border:0;border-radius:999px;background:#7c897f;color:#fff;min-height:42px;padding:9px 18px;font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer}.gallery-add-own-panel{max-width:560px;margin:12px auto 0;padding:16px;background:#eee9e2;display:grid;gap:9px;text-align:left;box-sizing:border-box}.gallery-add-own-panel.hidden{display:none!important}.gallery-add-own-title{font-size:14px;font-weight:700;color:#454a46}.gallery-add-own-note{font-size:11px;line-height:1.6;color:#747873}.gallery-add-own-panel input,.gallery-add-own-panel select{width:100%;box-sizing:border-box;min-height:42px;border:1px solid #d1cbc4;background:#fff;padding:9px 10px;font-size:13px}.gallery-add-own-panel button{min-height:42px;border:0;background:#727f76;color:#fff;font-weight:700;cursor:pointer}.gallery-own-status{min-height:18px;font-size:11px;line-height:1.5;color:#76665d}

/* Ver.2.1.2 — quick publish immediately after image generation */
.quick-publish-box{
  width:100%;box-sizing:border-box;margin:14px 0 4px;padding:15px 14px;
  background:#ebe5dd;text-align:center
}
.quick-publish-copy{display:flex;flex-direction:column;gap:4px;margin-bottom:11px}
.quick-publish-copy strong{font:700 14px/1.5 "Meiryo UI",Meiryo,sans-serif;color:#4b504b}
.quick-publish-copy span{font:400 11px/1.6 "Meiryo UI",Meiryo,sans-serif;color:#77736e}
.quick-publish-btn{
  min-height:42px;border:0;border-radius:999px;padding:9px 18px;
  background:#7c897f;color:#fff;font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer
}
.quick-publish-btn.published{background:#a7aea9}
.quick-publish-btn:disabled{cursor:default;opacity:.82}
.quick-publish-status{min-height:17px;margin-top:7px;font-size:10px;line-height:1.5;color:#76665d}

/* Ver.2.1.3 — simpler one-step publish UI */
.quick-publish-box{padding:16px!important}
.quick-publish-copy strong{font-size:14px!important}
.quick-publish-nickname{max-width:360px;margin:0 auto 10px;display:flex;flex-direction:column;gap:4px;align-items:center}
.quick-publish-nickname input{
  width:100%;box-sizing:border-box;min-height:42px;border:1px solid #cec7bf;background:#fff;
  padding:9px 12px;text-align:center;font:400 13px/1.4 "Meiryo UI",Meiryo,sans-serif
}
.quick-publish-nickname small{font-size:10px;color:#77736e}
.quick-publish-by{font-size:12px;font-weight:700;color:#75665f;padding:4px 0}
.quick-publish-btn{min-width:180px}

/* Ver.2.1.4 — choose gallery sample during revision */
.revision-reference-source{
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:10px
}
.revision-reference-source .revision-reference-btn{
  min-width:150px
}
@media(max-width:600px){
  .revision-reference-source{flex-direction:column}
  .revision-reference-source .revision-reference-btn{width:100%;min-width:0}
}

/* Ver.2.1.7 — show the registered image immediately in the registration panel */
.gallery-own-result{
  margin-top:8px;padding:14px;background:#fff;text-align:center
}
.gallery-own-result.hidden{display:none!important}
.gallery-own-result-title{
  margin-bottom:10px;font:700 13px/1.5 "Meiryo UI",Meiryo,sans-serif;color:#59645d
}
.gallery-own-result img{
  display:block;width:min(100%,360px);height:auto;max-height:360px;
  object-fit:contain;margin:0 auto;background:#f7f5f1
}
.gallery-own-result-meta{
  margin-top:8px;font:600 11px/1.5 "Meiryo UI",Meiryo,sans-serif;color:#786b64
}


/* Ver.2.1.11 — center the reference-image guidance block */
.reference-panel .reference-copy{
  width:100% !important;
  max-width:none !important;
  margin:0 auto 14px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
.reference-panel{
  text-align:center !important;
}


/* Ver.2.1.12 — center the reference PANEL itself, not only its text */
main .hero .jewelry-type-panel .personal-reference #referencePanel{
  width:min(100%,480px) !important;
  max-width:480px !important;
  margin:12px auto 0 !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
main .hero .jewelry-type-panel .personal-reference #referencePanel .reference-copy{
  display:block !important;
  width:100% !important;
  margin:0 auto 14px !important;
  text-align:center !important;
}

/* Ver.2.1.13 — top navigation */
.top-simple-menu{
  width:min(100% - 28px,920px);
  margin:0 auto;
  padding:14px 0 5px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:20px;
  box-sizing:border-box;
  font-family:"Meiryo UI",Meiryo,sans-serif;
}
.top-simple-menu button,
.top-simple-menu a{
  appearance:none;
  border:0;
  background:transparent;
  padding:5px 2px;
  color:#606761;
  text-decoration:none;
  font:600 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
}
.top-simple-menu button:hover,
.top-simple-menu a:hover{
  color:#2f3531;
}
@media(max-width:600px){
  .top-simple-menu{
    width:calc(100% - 28px);
    padding-top:11px;
    gap:17px;
  }
  .top-simple-menu button,
  .top-simple-menu a{
    font-size:11px;
  }
}


/* Ver.2.1.14 — top menu must not shift the application */
body{
  flex-direction:column !important;
  align-items:stretch !important;
}

.top-simple-menu{
  flex:0 0 auto !important;
  align-self:center !important;
}

.app-shell{
  flex:0 0 auto !important;
  align-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Embedded mode: preserve the same centered single-column structure */
html.is-embedded body{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}
html.is-embedded .top-simple-menu{
  align-self:center !important;
}
html.is-embedded .app-shell{
  align-self:center !important;
  width:min(860px,100%) !important;
}


/* Ver.2.1.15 — menu below logo, centered with generous breathing room */
.top-simple-menu{
  width:100% !important;
  margin:0 auto !important;
  padding:28px 0 22px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:28px !important;
  box-sizing:border-box !important;
}
.top-simple-menu button,
.top-simple-menu a{
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
}
@media(max-width:600px){
  .top-simple-menu{
    padding:24px 0 20px !important;
    gap:26px !important;
  }
}

/* Ver.2.1.16 — clear confirmation and direct Gallery access after publishing */
.quick-publish-btn.gallery-confirm-btn{
  background:#69766e !important;
  min-width:190px;
}
.quick-publish-status{
  margin-top:8px;
}

.gallery-card-new{outline:2px solid rgba(105,118,110,.3);outline-offset:2px}


/* Ver.2.1.19 — gallery item information editing */
.gallery-card-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px 0;
}
.gallery-card-type{
  font-size:10px;
  color:#85817c;
}
.gallery-card-title{
  padding:5px 10px 0;
  font-size:11px;
  line-height:1.45;
  color:#555b56;
}
.gallery-edit-btn{
  margin:8px 10px 0;
  border:0;
  background:#ece8e2;
  color:#5e655f;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  font:600 11px/1.3 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
.gallery-edit-panel{
  max-width:560px;
  margin:14px auto 20px;
  padding:18px;
  background:#ebe5dd;
  box-sizing:border-box;
  text-align:left;
}
.gallery-edit-panel.hidden{display:none!important}
.gallery-edit-title{
  text-align:center;
  margin-bottom:12px;
  font:700 16px/1.5 "Meiryo UI",Meiryo,sans-serif;
  color:#474d48;
}
.gallery-edit-panel img{
  display:block;
  width:min(100%,320px);
  max-height:320px;
  object-fit:contain;
  margin:0 auto 10px;
  background:#f7f5f1;
}
.gallery-edit-owner{
  text-align:center;
  margin-bottom:14px;
  font-size:11px;
  color:#7a6b63;
}
.gallery-edit-panel label{
  display:grid;
  gap:5px;
  margin-bottom:12px;
}
.gallery-edit-panel label span{
  font-size:11px;
  font-weight:700;
  color:#5c625d;
}
.gallery-edit-panel select,
.gallery-edit-panel input{
  width:100%;
  box-sizing:border-box;
  min-height:42px;
  border:1px solid #cfc9c2;
  background:#fff;
  padding:9px 10px;
  font:400 13px/1.4 "Meiryo UI",Meiryo,sans-serif;
}
.gallery-edit-actions{
  display:flex;
  gap:9px;
  justify-content:center;
  margin-top:14px;
}
.gallery-edit-actions button{
  min-height:42px;
  border:0;
  border-radius:999px;
  padding:9px 18px;
  font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
#galleryEditCancel{
  background:#e1ddd7;
  color:#555b56;
}
#galleryEditSave{
  background:#748178;
  color:#fff;
}
.gallery-edit-status{
  min-height:18px;
  margin-top:8px;
  text-align:center;
  font-size:11px;
  color:#756861;
}

/* Ver.2.1.22 — gallery item title: smaller and safe wrapping */
.gallery-card-title{
  font-size:10px !important;
  line-height:1.4 !important;
  font-weight:500 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  white-space:normal !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
@media(max-width:600px){
  .gallery-card-title{font-size:9px !important;}
}


/* Ver.2.1.25 — editor header: more breathing room, no divider */
.edit-brand-header{
  gap:30px !important;
}
.edit-brand-divider{
  display:none !important;
}
@media(max-width:600px){
  .edit-brand-header{
    gap:22px !important;
  }
}


/* =========================================================
   Ver.2.1.31 — production price samples
   ========================================================= */
.price-guide{
  width:min(720px,calc(100% - 28px));
  margin:28px auto 24px;
  padding:18px 20px;
  box-sizing:border-box;
  background:#eee8e1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:left;
}
.price-guide-soremi{
  width:64px !important;
  height:82px !important;
  flex:0 0 64px !important;
}
.price-guide-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.price-guide-name{
  margin-bottom:3px;
  color:#8f665b;
  font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
}
.price-guide-message{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.price-guide-message strong{
  color:#414741;
  font:700 15px/1.5 "Meiryo UI",Meiryo,sans-serif;
}
.price-guide-message span{
  color:#74736f;
  font:400 11px/1.6 "Meiryo UI",Meiryo,sans-serif;
}
.price-guide-btn{
  margin-top:10px;
  min-height:40px;
  border:0;
  border-radius:999px;
  padding:9px 18px;
  background:#748178;
  color:#fff;
  font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}

.price-samples-modal{
  position:fixed;
  inset:0;
  z-index:10020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(25,25,25,.48);
}
.price-samples-modal.hidden{display:none!important}
.price-samples-sheet{
  width:min(980px,100%);
  max-height:90vh;
  overflow:auto;
  box-sizing:border-box;
  padding:26px;
  background:#f7f5f1;
}
.price-samples-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  text-align:left;
}
.price-samples-kicker{
  color:#8f665b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}
.price-samples-head h3{
  margin:3px 0 4px;
  color:#3f4540;
  font-size:20px;
}
.price-samples-head p{
  margin:0;
  color:#77736e;
  font-size:11px;
  line-height:1.6;
}
.price-samples-close{
  border:0;
  background:transparent;
  color:#666;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.price-samples-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin:20px 0;
}
.price-filter{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:#e4e1dc;
  color:#555;
  font-size:11px;
  cursor:pointer;
}
.price-filter.active{
  background:#7c897f;
  color:#fff;
}
.price-samples-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.price-sample-card{
  overflow:hidden;
  background:#fff;
}
.price-sample-image{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#f0ede9;
}
.price-sample-body{
  padding:13px 14px 15px;
  text-align:left;
}
.price-sample-type{
  color:#9a8e86;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
}
.price-sample-name{
  margin-top:4px;
  color:#444a45;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}
.price-sample-materials{
  margin-top:5px;
  color:#77736f;
  font-size:10px;
  line-height:1.5;
}
.price-sample-price{
  margin-top:10px;
  color:#384039;
  font-size:20px;
  font-weight:700;
  line-height:1.25;
}
.price-sample-price small{
  margin-left:5px;
  color:#77736f;
  font-size:9px;
  font-weight:500;
}
.price-sample-description{
  margin-top:8px;
  color:#77736f;
  font-size:10px;
  line-height:1.6;
}
.price-samples-foot{
  margin-top:18px;
  text-align:center;
  color:#88827c;
  font-size:10px;
  line-height:1.7;
}
.price-samples-empty,
.price-samples-loading{
  grid-column:1/-1;
  padding:34px 10px;
  text-align:center;
  color:#777;
  font-size:12px;
}

@media(max-width:700px){
  .price-guide{
    width:calc(100% - 52px);
    margin:24px 26px 20px;
    padding:16px 14px;
    gap:12px;
  }
  .price-guide-soremi{
    width:54px !important;
    height:70px !important;
    flex-basis:54px !important;
  }
  .price-guide-message strong{font-size:13px}
  .price-guide-message span{font-size:10px}
  .price-samples-modal{
    padding:0;
    align-items:stretch;
  }
  .price-samples-sheet{
    width:100%;
    max-height:100vh;
    padding:20px 14px;
  }
  .price-samples-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .price-sample-body{padding:10px}
  .price-sample-price{font-size:17px}
}

/* Ver.2.1.32 — price guide placement */
.price-guide{
  position:relative;
  margin-top:42px !important;
  margin-bottom:10px !important;
}
.price-guide::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:-22px;
  height:1px;
  background:rgba(92,92,88,.18);
}
.price-guide-name{font-weight:700 !important;}
@media(max-width:700px){
  .price-guide{
    margin-top:38px !important;
    margin-bottom:8px !important;
  }
  .price-guide::before{
    left:8%;
    right:8%;
    top:-20px;
  }
}

/* Ver.2.1.33 — price guide spacing + star divider */
.price-guide{
  margin-top:68px !important;
  margin-bottom:0 !important;
}
.price-guide::before{
  content:"✦" !important;
  position:absolute;
  left:50% !important;
  right:auto !important;
  top:-42px !important;
  width:auto !important;
  height:auto !important;
  transform:translateX(-50%);
  background:transparent !important;
  color:rgba(116,129,120,.72);
  font-size:15px;
  line-height:1;
}
@media(max-width:700px){
  .price-guide{
    margin-top:62px !important;
    margin-bottom:0 !important;
  }
  .price-guide::before{
    left:50% !important;
    right:auto !important;
    top:-38px !important;
  }
}

/* Ver.2.1.34 — price guide: tighter lower spacing, matching ✦ */
.price-guide{
  margin-bottom:-18px !important;
}
.price-guide::before{
  font-size:11px !important;
  font-weight:400 !important;
}
@media(max-width:700px){
  .price-guide{
    margin-bottom:-20px !important;
  }
  .price-guide::before{
    font-size:11px !important;
  }
}

/* Match the existing top ✦ exactly in size */
.price-guide::before{font-size:30px !important;}
@media(max-width:700px){.price-guide::before{font-size:30px !important;}}


/* Ver.2.1.35 — match top ✦ and add breathing room below it */
.price-guide{
  margin-top:76px !important;
}
.price-guide::before{
  font-size:22px !important;   /* same as the top .mark */
  top:-54px !important;        /* more space between ✦ and the price block */
  line-height:1 !important;
}
@media(max-width:700px){
  .price-guide{
    margin-top:70px !important;
  }
  .price-guide::before{
    font-size:22px !important;
    top:-50px !important;
  }
}

/* Ver.2.1.37 — two user reference images */
.reference-second-add{margin-top:10px;text-align:center}
.reference-second-add.hidden,.reference-roles.hidden{display:none!important}
.reference-preview-wrap2{margin-top:8px}
.reference-roles{
  width:min(520px,100%);
  margin:13px auto 0;
  padding:12px 14px;
  box-sizing:border-box;
  background:rgba(255,255,255,.48);
}
.reference-role-row{
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  gap:8px;
  margin:6px 0;
  color:#65625e;
  font-size:11px;
}
.reference-role-row select{
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid rgba(110,105,98,.18);
  border-radius:10px;
  background:#fff;
  padding:7px 9px;
  color:#535651;
  font-family:var(--ui-font);
  font-size:11px;
}
.reference-role-hint{
  margin-top:8px;
  color:#918a83;
  font-size:10px;
  line-height:1.6;
  text-align:center;
}
@media(max-width:700px){
  .reference-role-row{grid-template-columns:52px 1fr;font-size:10px}
  .reference-role-row select{font-size:10px}
}

/* Ver.2.1.38 — clearer reference-image guidance */
.reference-intro-sub{
  display:inline-block;
  margin-top:5px;
  color:#8b857f;
  font-size:.92em;
  line-height:1.65;
}

/* Ver.2.1.42 — explicit next step after choosing reference images */
.reference-next-step{
  width:min(520px,100%);
  margin:14px auto 0;
  padding:14px;
  box-sizing:border-box;
  background:#ebe6df;
  text-align:center;
}
.reference-next-step.hidden{display:none!important}
.reference-next-step-text{
  margin-bottom:10px;
  color:#67645f;
  font-size:11px;
  line-height:1.65;
}
.reference-continue-btn{
  min-height:42px;
  border:0;
  border-radius:999px;
  padding:9px 18px;
  background:#748178;
  color:#fff;
  font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}

/* Ver.2.1.43 — clearer single-reference guidance */
.reference-focus-note{
  margin:4px 0 9px;
  color:#8d867f;
  font-size:10px;
  line-height:1.6;
  text-align:center;
}


/* Ver.2.1.45 — show selected reference images in the direct-design question */
.reference-prompt-message{
  width:100%;
}
.reference-prompt-images{
  width:min(560px,100%);
  margin:0 auto 10px;
  display:flex;
  justify-content:center;
  gap:10px;
  box-sizing:border-box;
}
.reference-prompt-image-item{
  flex:1 1 0;
  min-width:0;
  max-width:270px;
  background:#eee8e1;
  padding:8px;
  box-sizing:border-box;
  text-align:center;
}
.reference-prompt-image-item img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#fff;
}
.reference-prompt-image-meta{
  margin-top:7px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#67635f;
  font-family:"Meiryo UI",Meiryo,sans-serif;
  line-height:1.45;
}
.reference-prompt-image-meta strong{
  font-size:10px;
}
.reference-prompt-image-meta span{
  font-size:9px;
  color:#8a837d;
}
@media(max-width:600px){
  .reference-prompt-images{
    gap:7px;
  }
  .reference-prompt-image-item{
    padding:6px;
  }
}


/* Ver.2.1.48 — logos return to Top */
.brand-home-link,
.edit-brand-home-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.brand-home-link img,
.edit-brand-home-link img{
  display:block;
}
.brand-home-link{
  cursor:pointer;
}
.edit-brand-home-link{
  flex:0 0 auto;
  cursor:pointer;
}


/* =========================================================
   Ver.2.2.0 — Account
   ========================================================= */
.account-modal{
  position:fixed;inset:0;z-index:10040;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(25,25,25,.48);
}
.account-modal.hidden{display:none!important}
.account-sheet{
  position:relative;width:min(440px,100%);
  box-sizing:border-box;padding:28px 26px;
  background:#f7f5f1;text-align:left;
}
.account-close{
  position:absolute;right:14px;top:12px;border:0;background:transparent;
  color:#6c6863;font-size:26px;line-height:1;cursor:pointer;
}
.account-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;color:#8f665b}
.account-sheet h3{margin:5px 0 7px;font-size:20px;color:#414741}
.account-lead{margin:0 0 18px;color:#716d68;font-size:12px;line-height:1.7}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:15px}
.account-tab{
  min-height:40px;border:0;border-radius:999px;background:#e5e1dc;color:#69645f;
  font:600 11px/1.3 "Meiryo UI",Meiryo,sans-serif;cursor:pointer;
}
.account-tab.active{background:#7b887f;color:#fff}
.account-form{display:grid;gap:11px}
.account-form label{display:grid;gap:5px;color:#5f5c57;font-size:11px;font-weight:700}
.account-form input{
  width:100%;box-sizing:border-box;min-height:44px;padding:9px 11px;
  border:1px solid #d1cbc4;background:#fff;font:13px/1.4 "Meiryo UI",Meiryo,sans-serif;
}
.account-form button{
  min-height:44px;margin-top:3px;border:0;border-radius:999px;
  background:#748178;color:#fff;font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer;
}
.account-note,.account-privacy{color:#928b84;font-size:9px;line-height:1.6}
.account-status{min-height:20px;margin-top:10px;text-align:center;color:#8a5048;font-size:11px}
.account-privacy{margin-top:8px;text-align:center}
.account-member-email{color:#6d6862;font-size:12px;overflow-wrap:anywhere}
.account-member-benefit{
  margin:16px 0 5px;padding:13px;background:#ebe6df;text-align:center;
  color:#49504a;font-size:14px;font-weight:700;
}
.account-member-quota{text-align:center;color:#77716b;font-size:11px;margin-bottom:16px}
.account-logout-btn{
  display:block;margin:auto;border:0;border-radius:999px;padding:9px 18px;
  background:#e3dfda;color:#69645f;font:600 11px/1.3 "Meiryo UI",Meiryo,sans-serif;cursor:pointer;
}
@media(max-width:600px){
  .account-modal{padding:12px}
  .account-sheet{padding:25px 18px}
}


/* Ver.2.2.1 — Account modal responsive fix */
.account-modal{
  box-sizing:border-box;
  overflow:auto;
  align-items:flex-start !important;
  padding:18px !important;
}
.account-sheet{
  margin:auto;
  max-height:calc(100vh - 36px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:600px){
  .account-modal{
    padding:8px !important;
  }
  .account-sheet{
    width:100%;
    max-height:calc(100vh - 16px);
    padding:22px 16px 18px;
    margin:auto;
  }
}
@media(max-height:700px){
  .account-modal{
    align-items:flex-start !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .account-sheet{
    max-height:calc(100vh - 16px);
    overflow-y:auto;
  }
  .account-sheet h3{
    margin-top:3px;
    margin-bottom:5px;
  }
  .account-lead{
    margin-bottom:12px;
  }
  .account-tabs{
    margin-bottom:10px;
  }
  .account-form{
    gap:8px;
  }
  .account-member-benefit{
    margin-top:12px;
  }
}


/* Ver.2.2.4 — explicit next step for "その他" */
.other-jewelry-next{
  width:min(500px,100%);
  margin:10px auto 0;
  padding:12px 14px;
  box-sizing:border-box;
  background:#ebe6df;
  text-align:center;
}
.other-jewelry-next.hidden{display:none!important}
.other-jewelry-next-text{
  color:#69645f;
  font-size:11px;
  line-height:1.65;
}
.other-jewelry-continue-btn{
  margin-top:9px;
  min-height:40px;
  border:0;
  border-radius:999px;
  padding:9px 18px;
  background:#748178;
  color:#fff;
  font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}


/* Ver.2.2.5 — one Solemi on Top; price sample is content, not another guide */
.price-guide.price-content-card{
  display:block;
  width:min(680px,calc(100% - 32px));
  box-sizing:border-box;
  margin:28px auto 14px;
  padding:20px 18px 19px;
  text-align:center;
}
.price-content-card .price-guide-copy{
  width:100%;
  max-width:none;
  margin:0 auto;
  text-align:center;
}
.price-content-star{
  margin:0 auto 10px;
  color:inherit;
  font-size:13px;
  line-height:1;
  opacity:.72;
}
.price-content-card .price-guide-message{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.price-content-card .price-guide-message strong{
  display:block;
}
.price-content-card .price-guide-message span{
  display:block;
}
.price-content-card .price-guide-btn{
  margin-top:13px;
}
@media(max-width:600px){
  .price-guide.price-content-card{
    width:calc(100% - 22px);
    margin-top:22px;
    padding:17px 14px 16px;
  }
}


/* Ver.2.2.6 — price sample block final alignment */
.price-guide.price-content-card{
  display:block !important;
  position:relative;
  width:min(680px,calc(100% - 32px)) !important;
  margin:34px auto 12px !important;
  padding:20px 18px 19px !important;
  box-sizing:border-box;
  text-align:center !important;
  background:#eee8e1;
}
.price-guide.price-content-card::before{
  content:none !important;
  display:none !important;
}
.price-content-card .price-guide-copy{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.price-content-card .price-guide-message{
  width:100%;
  align-items:center !important;
  text-align:center !important;
}
.price-content-card .price-guide-message strong,
.price-content-card .price-guide-message span{
  width:100%;
  text-align:center !important;
}
.price-content-card .price-guide-btn{
  align-self:center !important;
}
@media(max-width:700px){
  .price-guide.price-content-card{
    width:calc(100% - 24px) !important;
    margin:28px auto 10px !important;
    padding:17px 14px 16px !important;
  }
}


/* Ver.2.2.7 — restore outside ✦, desktop width, and spacing */
.price-guide.price-content-card{
  width:min(720px,calc(100% - 28px)) !important;
  margin:58px auto 12px !important;
}
.price-guide.price-content-card::before{
  content:"✦" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  top:-36px !important;
  width:auto !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  background:transparent !important;
  color:rgba(116,129,120,.72) !important;
  font-size:22px !important;
  font-weight:400 !important;
  line-height:1 !important;
}
@media(max-width:700px){
  .price-guide.price-content-card{
    width:calc(100% - 52px) !important;
    margin:54px 26px 10px !important;
  }
  .price-guide.price-content-card::before{
    top:-34px !important;
    font-size:22px !important;
  }
}


/* Ver.2.2.8 — price block vertical spacing balance */
.price-guide.price-content-card{
  /* Give the divider star a little more breathing room above the card,
     while reducing the oversized space below the card. */
  margin-top:64px !important;
  margin-bottom:-10px !important;
}
.price-guide.price-content-card::before{
  top:-42px !important;
}
@media(max-width:700px){
  .price-guide.price-content-card{
    margin-top:60px !important;
    margin-bottom:-12px !important;
  }
  .price-guide.price-content-card::before{
    top:-40px !important;
  }
}


/* Ver.2.2.9 — price block vertical spacing fine tuning */
.price-guide.price-content-card{
  margin-top:70px !important;
  margin-bottom:-24px !important;
}
.price-guide.price-content-card::before{
  top:-48px !important;
}
@media(max-width:700px){
  .price-guide.price-content-card{
    margin-top:66px !important;
    margin-bottom:-26px !important;
  }
  .price-guide.price-content-card::before{
    top:-46px !important;
  }
}


/* Ver.2.2.10 — My Account logged-in layout fix
   Global .hidden uses visibility:hidden, so the logged-out form kept its space.
   Account states must be removed from layout entirely. */
#accountLoggedOut.hidden,
#accountLoggedIn.hidden{
  display:none !important;
  visibility:hidden !important;
}
#accountLoggedOut,
#accountLoggedIn{
  display:block;
  visibility:visible;
}
#accountLoggedIn{
  padding-top:0;
}


/* Ver.2.2.11 — background brightness balance
   PC: slightly darker / Mobile: slightly brighter */
@media(min-width:701px){
  body{
    background-color:#d6d0c9 !important;
  }
}
@media(max-width:700px){
  body{
    background-color:#eeeae5 !important;
  }
}


/* Ver.2.2.12 — make the main Soremi guide more noticeable, without making it flashy */
.series-guide{
  gap:10px !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
}
.series-guide .soremi-image-character{
  width:76px !important;
  height:98px !important;
  flex:0 0 76px !important;
  margin-right:2px !important;
}
.series-guide .series-guide-bubble{
  max-width:530px !important;
  padding:13px 16px !important;
  box-shadow:0 5px 18px rgba(72,67,62,.08);
}
.series-guide .series-guide-name{
  font-size:11px !important;
  font-weight:700 !important;
  color:#69726b !important;
}
@media(max-width:600px){
  .series-guide{
    gap:8px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  .series-guide .soremi-image-character{
    width:68px !important;
    height:88px !important;
    flex-basis:68px !important;
    margin-right:0 !important;
  }
  .series-guide .series-guide-bubble{
    padding:11px 13px !important;
  }
}


/* Ver.2.2.13 — Soremi and guide text one more size up */
.series-guide .soremi-image-character{
  width:88px !important;
  height:113px !important;
  flex:0 0 88px !important;
}
.series-guide .series-guide-bubble{
  max-width:545px !important;
  padding:15px 18px !important;
}
.series-guide .series-guide-name{
  font-size:13px !important;
  line-height:1.45 !important;
  margin-bottom:5px !important;
}
.series-guide .series-guide-text{
  font-size:15px !important;
  line-height:1.65 !important;
}
@media(max-width:600px){
  .series-guide .soremi-image-character{
    width:78px !important;
    height:101px !important;
    flex-basis:78px !important;
  }
  .series-guide .series-guide-bubble{
    padding:13px 14px !important;
  }
  .series-guide .series-guide-name{
    font-size:12px !important;
  }
  .series-guide .series-guide-text{
    font-size:14px !important;
    line-height:1.65 !important;
  }
}


/* Ver.2.2.14 — price sample as a clearly auxiliary compact card */
.price-guide.price-content-card{
  width:min(470px,calc(100% - 48px)) !important;
  min-height:0 !important;
  margin:70px auto -24px !important;
  padding:14px 18px 13px !important;
  border-radius:10px !important;
  background:rgba(226,220,212,.78) !important;
  box-shadow:none !important;
}
.price-content-card .price-guide-copy{
  gap:8px !important;
}
.price-content-card .price-guide-message{
  gap:2px !important;
}
.price-content-card .price-guide-message strong{
  font-size:13px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}
.price-content-card .price-guide-message span{
  display:none !important;
}
.price-content-card .price-guide-btn{
  min-height:0 !important;
  margin:1px 0 0 !important;
  padding:2px 4px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#6f756f !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-decoration:none !important;
}
.price-content-card .price-guide-btn::after{
  content:"  →";
}
.price-content-card .price-guide-btn:hover{
  opacity:.72;
}
@media(max-width:700px){
  .price-guide.price-content-card{
    width:84% !important;
    max-width:390px !important;
    margin:66px auto -26px !important;
    padding:13px 14px 12px !important;
  }
  .price-content-card .price-guide-message strong{
    font-size:12px !important;
  }
  .price-content-card .price-guide-btn{
    font-size:10px !important;
  }
}


/* Ver.2.2.15 — lighter auxiliary price card */
.price-guide.price-content-card{
  background:rgba(244,241,237,.94) !important;
  border:1px solid rgba(195,187,178,.62) !important;
}
.price-content-card .price-guide-message strong{
  color:#555b56 !important;
}
.price-content-card .price-guide-btn{
  color:#737a74 !important;
}


/* Ver.2.2.16 — whole compact price card is clickable */
.price-guide.price-content-card{
  cursor:pointer !important;
  transition:background-color .16s ease, transform .16s ease;
}
.price-guide.price-content-card:hover{
  background:rgba(248,246,243,.98) !important;
}
.price-guide.price-content-card:focus-visible{
  outline:2px solid rgba(116,129,120,.50);
  outline-offset:3px;
}
.price-guide.price-content-card:active{
  transform:translateY(1px);
}


/* =========================================================
   Ver.2.3.0 — My Designs
   ========================================================= */
#myDesignsMenuBtn.hidden{display:none!important;visibility:hidden!important}

.my-designs-modal{
  position:fixed;inset:0;z-index:10045;
  display:flex;align-items:flex-start;justify-content:center;
  padding:18px;box-sizing:border-box;
  overflow:auto;background:rgba(25,25,25,.50);
}
.my-designs-modal.hidden{display:none!important}
.my-designs-sheet{
  width:min(980px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  margin:auto;
  box-sizing:border-box;
  padding:25px;
  background:#f7f5f1;
}
.my-designs-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
}
.my-designs-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;color:#8f665b}
.my-designs-head h3{margin:4px 0 4px;color:#414741;font-size:21px}
.my-designs-head p{margin:0;color:#77716b;font-size:11px;line-height:1.6}
.my-designs-close{border:0;background:transparent;color:#67645f;font-size:28px;line-height:1;cursor:pointer}
.my-designs-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:22px;
}
.my-design-card{
  display:block;width:100%;padding:0;border:0;background:#fff;
  text-align:left;cursor:pointer;
}
.my-design-card-image-wrap{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#ece8e3;overflow:hidden;
}
.my-design-card-image-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.my-design-card-loading{font-size:10px;color:#999}
.my-design-card-body{padding:11px 12px 13px}
.my-design-card-date{font-size:9px;color:#99928a}
.my-design-card-title{margin-top:3px;color:#414741;font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.my-design-card-type{margin-top:4px;color:#858079;font-size:10px}
.my-designs-empty,.my-designs-loading,.my-designs-error{
  grid-column:1/-1;padding:36px 10px;text-align:center;color:#777;font-size:12px
}
.my-designs-detail{margin-top:18px}
.my-designs-detail.hidden,.my-designs-references.hidden,#myDesignsListView.hidden{display:none!important}
.my-designs-back{
  margin-bottom:13px;border:0;background:transparent;padding:4px 0;
  color:#6d746e;font:700 11px/1.3 "Meiryo UI",Meiryo,sans-serif;cursor:pointer
}
.my-designs-detail-main{
  display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:24px;align-items:start
}
.my-designs-detail-image{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.my-designs-detail-date{font-size:10px;color:#99918a}
.my-designs-detail-copy h3{margin:4px 0 4px;color:#3f4540;font-size:21px}
.my-designs-detail-type{font-size:11px;color:#827c75}
.my-designs-detail-explanation{margin-top:15px;color:#68655f;font-size:12px;line-height:1.75;white-space:pre-wrap}
.my-designs-resume-btn{
  display:block;width:100%;margin-top:18px;min-height:44px;border:0;border-radius:999px;
  background:#748178;color:#fff;font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer
}
.my-designs-delete-btn{
  display:block;margin:10px auto 0;border:0;background:transparent;
  color:#9a7067;font:600 10px/1.3 "Meiryo UI",Meiryo,sans-serif;cursor:pointer
}
.my-designs-section-title{
  margin:24px 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(110,105,98,.16);
  color:#565b57;font-size:12px;font-weight:700
}
.my-designs-reference-grid{display:flex;flex-wrap:wrap;gap:12px}
.my-design-reference-item{width:150px;background:#fff;padding:7px;box-sizing:border-box}
.my-design-reference-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#f1efec}
.my-design-reference-item div{padding:6px 2px 1px}
.my-design-reference-item strong,.my-design-reference-item span{display:block;overflow-wrap:anywhere}
.my-design-reference-item strong{font-size:10px;color:#5f615e}
.my-design-reference-item span{margin-top:2px;font-size:9px;color:#928b84}
.my-designs-conversation-list{display:grid;gap:8px}
.my-design-conversation-row{
  display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:start;
  padding:9px 11px;background:#fff
}
.my-design-conversation-role{font-size:9px;font-weight:700;color:#8b847d}
.my-design-conversation-text{font-size:11px;line-height:1.65;color:#5f605d;white-space:pre-wrap;overflow-wrap:anywhere}
.my-design-conversation-row.user{background:#eeebe6}

@media(max-width:700px){
  .my-designs-modal{padding:8px}
  .my-designs-sheet{width:100%;max-height:calc(100vh - 16px);padding:18px 12px}
  .my-designs-head h3{font-size:18px}
  .my-designs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:17px}
  .my-design-card-body{padding:9px}
  .my-designs-detail-main{grid-template-columns:1fr;gap:15px}
  .my-designs-detail-image-wrap{width:min(100%,430px);margin:auto}
  .my-designs-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .my-design-reference-item{width:auto}
  .my-design-conversation-row{grid-template-columns:44px 1fr;padding:8px}
}


/* Ver.2.3.3 — My Designs initial conditions */
.my-designs-initial-grid{
  display:grid;
  gap:6px;
}
.my-designs-initial-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  align-items:start;
  padding:8px 10px;
  background:#eeebe6;
}
.my-designs-initial-label{
  color:#8a837b;
  font-size:10px;
  font-weight:700;
}
.my-designs-initial-value{
  color:#555a56;
  font-size:11px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
@media(max-width:600px){
  .my-designs-initial-row{
    grid-template-columns:96px 1fr;
    gap:8px;
  }
}


/* Ver.2.3.4 — initial conditions shown when resuming My Designs */
.resume-initial-info-message{
  display:block;
  width:100%;
  box-sizing:border-box;
}
.resume-initial-info{
  width:min(560px,calc(100% - 24px));
  margin:8px auto 18px;
  padding:13px 14px 12px;
  box-sizing:border-box;
  background:#eeebe6;
  border:1px solid rgba(125,118,110,.16);
  text-align:left;
}
.resume-initial-info-title{
  margin-bottom:9px;
  color:#565b57;
  font-size:12px;
  font-weight:700;
}
.resume-initial-info-row{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:10px;
  padding:5px 0;
  border-top:1px solid rgba(125,118,110,.10);
}
.resume-initial-info-row:first-of-type{
  border-top:0;
}
.resume-initial-info-label{
  color:#8b847c;
  font-size:10px;
  font-weight:700;
}
.resume-initial-info-value{
  color:#555a56;
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
@media(max-width:600px){
  .resume-initial-info{
    width:calc(100% - 16px);
    margin-top:6px;
  }
  .resume-initial-info-row{
    grid-template-columns:92px 1fr;
    gap:8px;
  }
}

/* Ver.2.3.5 — Gallery nickname after creation */
.quick-publish-nickname-title{font-size:12px;font-weight:700;margin-bottom:7px;color:#555a56;}
.quick-publish-nickname:not(.hidden){margin-top:10px;}
.quick-publish-nickname input{box-sizing:border-box;width:100%;max-width:320px;}


/* =========================================================
   Ver.2.3.7 — UI polish before Soremi guide page
   ========================================================= */

/* ① Mobile background: a little lighter */
@media(max-width:700px){
  body{
    background-color:#f3efea !important;
  }
}

/* ② Divider after the auxiliary price card */
.price-after-star{
  margin:48px auto 0;
  text-align:center;
  color:rgba(116,129,120,.72);
  font-size:22px;
  font-weight:400;
  line-height:1;
}
@media(max-width:700px){
  .price-after-star{
    margin-top:44px;
    font-size:22px;
  }
}

/* ③ Main step headings = same hierarchy as the two hero lines */
html body main .hero .jewelry-type-label,
html body main > .dialogue-panel .starter-near-label{
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.65 !important;
}
@media(max-width:600px){
  html body main .hero .jewelry-type-label,
  html body main > .dialogue-panel .starter-near-label{
    font-size:17px !important;
  }
}

/* ⑤ Give Soremi one more step of presence without adding decoration */
.series-guide .soremi-image-character{
  width:100px !important;
  height:129px !important;
  flex:0 0 100px !important;
}
.series-guide{
  gap:9px !important;
}
@media(max-width:600px){
  .series-guide .soremi-image-character{
    width:90px !important;
    height:116px !important;
    flex-basis:90px !important;
  }
  .series-guide{
    gap:7px !important;
  }
}


/* =========================================================
   Ver.2.3.8 — mobile background + lower-star spacing
   ========================================================= */

/* ① Ver.2.3.7より、スマホ背景をほんの少しだけ暗く */
@media(max-width:700px){
  body{
    background-color:#f0ece7 !important;
  }
}

/* ② 価格案内の後の✦から次の内容までの空きを縮める */
.price-after-star{
  margin-bottom:-18px !important;
}
@media(max-width:700px){
  .price-after-star{
    margin-bottom:-22px !important;
  }
}


/* Ver.2.3.9 — lower-star spacing one step tighter */
.price-after-star{
  margin-bottom:-28px !important;
}
@media(max-width:700px){
  .price-after-star{
    margin-bottom:-32px !important;
  }
}

/* Ver.2.4.0 — Soremi guide */
.soremi-guide-link{margin-top:10px;border:0;background:transparent;color:#707a72;font:700 11px/1.4 "Meiryo UI",Meiryo,sans-serif;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.soremi-guide-modal{position:fixed;inset:0;z-index:10040;background:rgba(37,35,32,.50);display:flex;align-items:center;justify-content:center;padding:22px}
.soremi-guide-modal.hidden{display:none!important}
.soremi-guide-sheet{position:relative;width:min(760px,100%);max-height:min(86vh,850px);overflow:auto;box-sizing:border-box;background:#f8f5f0;border-radius:22px;padding:30px;box-shadow:0 24px 70px rgba(30,27,24,.22);color:#4d514d}
.soremi-guide-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#777;font-size:26px;cursor:pointer}
.soremi-guide-intro{display:flex;align-items:center;gap:18px;padding:0 36px 22px 4px;border-bottom:1px solid #ddd6ce;text-align:left}
.soremi-guide-portrait{width:112px;height:145px;object-fit:contain;flex:0 0 112px}
.soremi-guide-kicker{font-size:9px;letter-spacing:.14em;color:#9b948c;margin-bottom:5px}
.soremi-guide-intro h3{font-size:21px;margin:0 0 7px}.soremi-guide-intro p{font-size:13px;line-height:1.8;margin:0;color:#706b65}
.soremi-guide-questions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0 0}
.soremi-guide-questions button{min-height:46px;border:1px solid #d6cec5;border-radius:13px;background:#fff;color:#565b56;font:700 12px/1.45 "Meiryo UI",Meiryo,sans-serif;padding:11px 14px;cursor:pointer;text-align:left}
.soremi-guide-questions button.active{background:#e7ebe7;border-color:#9aa69d}
.soremi-guide-answer{margin-top:16px;padding:20px 21px;border-radius:15px;background:#ebe6df;text-align:left;font-size:13px;line-height:1.9;color:#56524d}
.soremi-guide-answer.hidden{display:none!important}.soremi-guide-answer p{margin:0 0 11px}.soremi-answer-name{font-weight:700;color:#657068;margin-bottom:7px}
.soremi-guide-answer ul{margin:7px 0 13px;padding-left:1.4em}
.soremi-answer-action,.soremi-answer-subaction{display:inline-flex;align-items:center;justify-content:center;margin-top:5px;min-height:40px;border-radius:999px;padding:9px 17px;font:700 11px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer}
.soremi-answer-action{border:0;background:#748178;color:#fff}.soremi-answer-subaction{border:1px solid #aaa29a;background:transparent;color:#65615c;margin-left:6px}
.series-guide-inline-link{border:0;background:transparent;color:#68756c;text-decoration:underline;text-underline-offset:3px;font:700 11px/1.4 "Meiryo UI",Meiryo,sans-serif;padding:0 2px;cursor:pointer}
@media(max-width:600px){.soremi-guide-modal{padding:10px;align-items:flex-end}.soremi-guide-sheet{max-height:92vh;border-radius:20px 20px 12px 12px;padding:22px 16px 20px}.soremi-guide-intro{gap:11px;padding:0 28px 18px 0}.soremi-guide-portrait{width:92px;height:119px;flex-basis:92px}.soremi-guide-intro h3{font-size:19px}.soremi-guide-intro p{font-size:12px}.soremi-guide-questions{grid-template-columns:1fr;gap:7px;margin-top:17px}.soremi-guide-answer{padding:16px 15px;font-size:12px}.top-simple-menu{gap:8px!important}.top-simple-menu button,.top-simple-menu a{font-size:10px!important}}


/* =========================================================
   Ver.2.4.1 — Soremi Q&A action alignment
   ========================================================= */
.soremi-answer-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:7px;
}
.soremi-guide-answer .soremi-answer-actions .soremi-answer-action{
  margin:0 !important;
  min-height:40px;
  background:#748178 !important;
  color:#fff !important;
  border:0 !important;
}
@media(max-width:600px){
  .soremi-answer-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }
  .soremi-guide-answer .soremi-answer-actions .soremi-answer-action{
    width:100%;
  }
}


/* Ver.2.4.4 — destination highlight after Soremi Q&A */
.jewelry-action-btn.bali.soremi-target-flash{
  outline:3px solid rgba(116,129,120,.34);
  outline-offset:4px;
}


/* Ver.2.4.7 — Q&A concierge fallback; never redirect to My Designs */
.soremi-concierge-fallback{
  width:min(760px,calc(100% - 32px));
  margin:24px auto 40px;
  box-sizing:border-box;
}


/* Ver.2.4.8 — fallback concierge uses the same production concierge UI */
.soremi-concierge-fallback{
  width:min(760px,calc(100% - 32px));
  margin:24px auto 44px;
  box-sizing:border-box;
}


/* Ver.2.5.0 — price sample button in production concierge */
.concierge-price-link-wrap{
  margin:12px 0 15px;
}
.concierge-price-samples-btn{
  min-height:38px;
  border:1px solid #a9b0aa;
  border-radius:999px;
  background:#f7f5f1;
  color:#5f6962;
  padding:8px 16px;
  font:700 11px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
.concierge-price-samples-btn:hover{
  background:#eeebe5;
}


/* Ver.2.5.4 — Soremi guide bottom actions */
.soremi-guide-bottom-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #ddd6ce;
}
.soremi-guide-bottom-btn{
  min-height:44px;
  border:1px solid #aab1ab;
  border-radius:999px;
  background:#748178;
  color:#fff;
  padding:9px 16px;
  font:700 11px/1.4 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
.soremi-guide-bottom-btn:hover{
  background:#68756d;
}
@media(max-width:600px){
  .soremi-guide-bottom-actions{
    grid-template-columns:1fr;
    gap:7px;
  }
  .soremi-guide-bottom-btn{
    width:100%;
  }
}


/* Ver.2.5.5 — bottom actions open proper overlays */
.soremi-concierge-overlay{
  position:fixed;
  inset:0;
  z-index:10060;
  background:rgba(37,35,32,.52);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
}
.soremi-concierge-overlay.hidden{display:none!important}
.soremi-concierge-overlay .soremi-concierge-fallback{
  position:relative;
  width:min(760px,100%);
  max-height:88vh;
  overflow:auto;
  margin:0;
  background:#f8f5f0;
  border-radius:20px;
  padding:24px;
  box-sizing:border-box;
}
.soremi-concierge-overlay-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  border:0;
  background:transparent;
  color:#777;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
@media(max-width:600px){
  .soremi-concierge-overlay{
    padding:10px;
    align-items:flex-end;
  }
  .soremi-concierge-overlay .soremi-concierge-fallback{
    max-height:92vh;
    border-radius:20px 20px 12px 12px;
    padding:20px 14px 18px;
  }
}


/* Ver.2.5.7 — mobile background: slightly darker and cooler */
@media(max-width:600px){
  body{
    background:#e9ebed !important;
  }
}

/* Ver.2.6.0 */
.soremi-guide-question-wide{grid-column:1 / -1!important;width:100%!important;margin-bottom:2px;font-weight:700;}

/* Ver.2.6.1 — center full-width Soremi how-to button */
.soremi-guide-question-wide{
  text-align:center !important;
  justify-content:center !important;
  align-items:center !important;
}


/* Ver.2.7.0 Debug user ID */
.debug-user-id{
  margin:8px auto 2px;
  width:100%;
  max-width:760px;
  box-sizing:border-box;
  text-align:center;
  color:#9aa0a6;
  font:10px/1.5 "Meiryo UI",Meiryo,sans-serif;
  letter-spacing:.02em;
  user-select:text;
}
@media(max-width:600px){
  .debug-user-id{
    margin-top:6px;
    padding-bottom:2px;
    font-size:9px;
  }
}


/* =========================================================
   Ver.2.8.0 — Gallery: click image = zoom, edit = edit
   ========================================================= */
.gallery-image-btn{
  cursor:zoom-in;
}
.gallery-image-btn span{
  display:none!important;
}
.gallery-card-actions-row{
  display:flex;
  gap:7px;
  align-items:center;
  margin-top:8px;
}
.gallery-reference-btn,
.gallery-edit-btn{
  min-height:34px;
  border-radius:999px;
  padding:7px 12px;
  font:700 10px/1.3 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
.gallery-reference-btn{
  flex:1;
  border:1px solid #b9c0ba;
  background:#f5f3ef;
  color:#626b65;
}
.gallery-edit-btn{
  border:1px solid #c9c1b8;
  background:#fff;
  color:#6a645e;
}

.gallery-preview-modal{
  position:fixed;
  inset:0;
  z-index:10120;
  background:rgba(25,24,23,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-sizing:border-box;
}
.gallery-preview-modal.hidden{display:none!important}
.gallery-preview-sheet{
  position:relative;
  width:min(920px,96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.gallery-preview-image{
  display:block;
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  background:#fff;
}
.gallery-preview-meta{
  margin-top:10px;
  text-align:center;
  color:#f6f3ef;
  font:11px/1.6 "Meiryo UI",Meiryo,sans-serif;
}
.gallery-preview-close{
  position:absolute;
  right:-4px;
  top:-38px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
@media(max-width:600px){
  .gallery-preview-modal{padding:12px}
  .gallery-preview-image{max-height:76vh}
  .gallery-card-actions-row{gap:6px}
  .gallery-reference-btn,.gallery-edit-btn{font-size:9px;padding:7px 10px}
}


/* Ver.2.9.0 — previous-step / undo */
.bottom-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.bottom-undo{
  border:1px solid #b9c1bd;
  background:#f4f6f5;
  color:#5f6a64;
  border-radius:999px;
  padding:9px 14px;
  font:700 11px/1.2 "Meiryo UI",Meiryo,sans-serif;
  cursor:pointer;
}
.bottom-undo:disabled{
  opacity:.32;
  cursor:default;
}
@media(max-width:600px){
  .bottom-undo{padding:9px 12px;font-size:10px}
}


/* =========================================================
   Ver.2.9.2 — editing screen clarity
   ========================================================= */

/* Past conversation is optional once a design is being edited. */
.edit-history-toggle{
  display:block;
  margin:10px auto 8px;
  border:0;
  background:transparent;
  color:#7b827d;
  padding:5px 9px;
  font:700 10px/1.4 "Meiryo UI",Meiryo,sans-serif;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.edit-history-toggle.hidden{display:none!important}
.chat:not(.edit-history-expanded) > .edit-history-old{
  display:none!important;
}

/* Revision controls are tools, not a new major section. */
.revision-controls{
  margin-top:10px!important;
  padding-top:6px!important;
}
.revision-buttons{
  margin-top:0!important;
}

/* The next action is now made explicit at the input area. */
.chat.active ~ .revision-controls:not(.hidden) ~ .suggestions ~ .dialogue-panel .starter-near-label,
.chat.active ~ .revision-controls:not(.hidden) ~ .dialogue-panel .starter-near-label{
  font-weight:700;
}

@media(max-width:600px){
  .edit-history-toggle{
    margin-top:7px;
    margin-bottom:5px;
    font-size:9px;
  }
  .revision-controls{
    margin-top:6px!important;
  }
}


/* =========================================================
   Ver.2.9.3 — edit layout alignment + clearer revision tools
   ========================================================= */

/* Keep the complete generated-design block centered:
   image, description, actions and Gallery publishing controls. */
.message.assistant:has(.jewelry-card){
  justify-content:center !important;
  width:100% !important;
}
.message.assistant:has(.jewelry-card) .jewelry-card{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Explain what the revision-tool block is for. */
.revision-section-title{
  margin:0 0 7px;
  text-align:center;
  color:#414741;
  font:700 16px/1.5 "Meiryo UI",Meiryo,sans-serif;
}
.revision-section-copy{
  max-width:590px;
  margin:0 auto 17px;
  text-align:center;
  color:#6e716d;
  font:400 12px/1.75 "Meiryo UI",Meiryo,sans-serif;
}
@media(max-width:600px){
  .revision-section-title{font-size:15px}
  .revision-section-copy{
    font-size:11px;
    line-height:1.7;
    margin-bottom:15px;
  }
}

/* Ver.2.9.5 contact email image */
.contact-email{text-align:center;box-sizing:border-box}
.contact-email img{display:block;width:auto;max-width:min(290px,82vw);height:auto;margin:0 auto;opacity:.82}
.contact-email-top{margin:18px auto 3px}
.contact-email-top img{max-width:min(250px,78vw)}
.contact-email-solemi{margin:24px auto 8px;padding:16px 0 4px;border-top:1px solid rgba(110,105,98,.14)}
.contact-email-caption{margin-bottom:7px;color:#77736e;font:700 11px/1.5 "Meiryo UI",Meiryo,sans-serif}
@media(max-width:600px){.contact-email-top{margin-top:14px}.contact-email-top img{max-width:225px}.contact-email-solemi img{max-width:250px}}


/* Ver.2.9.7 — Soremi contact placement/alignment */
#soremiGuideModal .contact-email-solemi{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  clear:both;
  margin:22px auto 8px !important;
  padding:16px 16px 6px !important;
  border-top:1px solid rgba(110,105,98,.14);
  text-align:center !important;
}
#soremiGuideModal .contact-email-solemi .contact-email-caption{
  width:100%;
  margin:0 auto 7px;
  text-align:center !important;
}
#soremiGuideModal .contact-email-solemi img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(250px,80vw);
  margin:0 auto !important;
}


/* Ver.2.9.8 — contact is explicitly inside .soremi-guide-sheet */
#soremiGuideModal .soremi-guide-sheet{
  text-align:center;
}
#soremiGuideModal .soremi-guide-sheet > .contact-email-solemi{
  display:block !important;
  position:static !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:22px 0 4px !important;
  padding:15px 12px 5px !important;
  border-top:1px solid rgba(110,105,98,.14) !important;
  text-align:center !important;
  transform:none !important;
}
#soremiGuideModal .soremi-guide-sheet > .contact-email-solemi .contact-email-caption{
  display:block !important;
  width:100% !important;
  margin:0 0 7px !important;
  text-align:center !important;
}
#soremiGuideModal .soremi-guide-sheet > .contact-email-solemi img{
  display:block !important;
  position:static !important;
  float:none !important;
  width:auto !important;
  max-width:min(250px,80vw) !important;
  height:auto !important;
  margin:0 auto !important;
  transform:none !important;
}

/* Ver.2.10.0 — Gallery is a free-member benefit */
.quick-publish-copy span{line-height:1.7}

/* Ver.2.10.15 — Top logo intro */
.brand-logo-sequence{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px}
.brand-logo-sequence .top-logo-static{display:block;width:100%;height:auto;opacity:0;transition:opacity .25s ease}
.brand-logo-sequence .top-logo-video{position:absolute;left:50%;top:50%;width:50%;height:auto;transform:translate(-50%,-50%);object-fit:contain;opacity:1;transition:opacity .25s ease;pointer-events:none}
.brand-logo-sequence.logo-video-ended .top-logo-video{opacity:0;visibility:hidden}
.brand-logo-sequence.logo-video-ended .top-logo-static{opacity:1}

/* Ver.2.10.17 — match final logo to intro movie */
.brand-logo-sequence .top-logo-static{
  width:40%;
  margin-left:auto;
  margin-right:auto;
}

/* Ver.2.10.18 — final static logo another 80% */
.brand-logo-sequence .top-logo-static{
  width:32%;
}

/* Ver.2.10.19 — final static logo 90% of Ver.2.10.18 */
.brand-logo-sequence .top-logo-static{
  width:28.8%;
}

/* Ver.2.10.20 — mobile logo */
@media (max-width: 768px){
  .brand-logo-sequence .top-logo-static{
    width:86.4%;
  }
  .brand-logo-sequence .top-logo-video{
    width:86.4%;
  }
}


/* Ver.2.10.21 — transparent mobile logo animation */
.brand-logo-sequence .top-logo-mobile-anim{
  display:none;
}

@media (max-width: 768px){
  .brand-logo-sequence .top-logo-video{
    display:none !important;
  }
  .brand-logo-sequence .top-logo-mobile-anim{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:86.4%;
    height:auto;
    transform:translate(-50%,-50%);
    object-fit:contain;
    opacity:1;
    pointer-events:none;
  }
  .brand-logo-sequence.logo-video-ended .top-logo-mobile-anim{
    opacity:0;
    visibility:hidden;
  }
  .brand-logo-sequence.logo-video-ended .top-logo-static{
    opacity:1;
  }
}


/* Ver.2.10.23 — mobile animation: larger, static logo unchanged */
@media (max-width: 768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    width:172.8%;
    max-width:none;
  }
  .brand-logo-sequence .top-logo-static{
    width:86.4%;
  }
}

/* Ver.2.10.25 — mobile animation 90% of Ver.2.10.24 */
@media (max-width: 768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    width:155.52%;
  }
}


/* Ver.2.10.28 — スマホ動画ロゴ位置を5%下へ微調整 */
@media (max-width: 768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    top:55%;
  }
}


/* Ver.2.10.29 — スマホ動画ロゴ位置を2.5%下へ微調整 */
@media (max-width: 768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    top:52.5%;
  }
}


/* Ver.2.10.30 — logo intro completion cue */
.series-site-title.sj-title-flash{
  animation:sjTitleFlash .68s ease-out 1;
  transform-origin:center center;
}
@keyframes sjTitleFlash{
  0%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
  28%{
    filter:brightness(1.55);
    transform:scale(1.02);
    text-shadow:0 0 12px rgba(255,255,255,.58);
  }
  100%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .series-site-title.sj-title-flash{
    animation:none;
  }
}

/* Ver.2.10.31 — stronger title sparkle */
.series-site-title.sj-title-flash{position:relative;z-index:1;animation:sjTitleFlashStrong 1.05s cubic-bezier(.2,.8,.2,1) 1;transform-origin:center}
@keyframes sjTitleFlashStrong{
0%{filter:brightness(1);transform:scale(1);text-shadow:none}
18%{filter:brightness(2.1);transform:scale(1.075);text-shadow:0 0 5px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.85),0 0 28px rgba(255,255,255,.58)}
38%{filter:brightness(1.55);transform:scale(1.035);text-shadow:0 0 8px rgba(255,255,255,.72),0 0 20px rgba(255,255,255,.42)}
58%{filter:brightness(1.9);transform:scale(1.055);text-shadow:0 0 5px rgba(255,255,255,.88),0 0 18px rgba(255,255,255,.62)}
100%{filter:brightness(1);transform:scale(1);text-shadow:none}}


/* Ver.2.10.32 — slow single glow */
.series-site-title.sj-title-flash{
  position:relative;
  z-index:1;
  animation:sjTitleGlowSlow 1.8s ease-in-out 1;
  transform-origin:center center;
}
@keyframes sjTitleGlowSlow{
  0%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
  48%{
    filter:brightness(2.05);
    transform:scale(1.2);
    text-shadow:
      0 0 8px rgba(255,255,255,.95),
      0 0 22px rgba(255,255,255,.78),
      0 0 42px rgba(255,255,255,.48);
  }
  100%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}


/* Ver.2.10.33 — slow glow with deeper green at peak */
@keyframes sjTitleGlowSlow{
  0%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
  48%{
    color:#0b5d3b;
    filter:brightness(1.55);
    transform:scale(1.2);
    text-shadow:
      0 0 8px rgba(20,110,70,.90),
      0 0 22px rgba(20,110,70,.68),
      0 0 42px rgba(20,110,70,.42);
  }
  100%{
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}


/* Ver.2.10.34 — deep green to black while growing */
@keyframes sjTitleGlowSlow{
  0%{
    color:#06452d;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:
      0 0 7px rgba(6,69,45,.38);
  }
  24%{
    color:#083a29;
    filter:brightness(1.12);
    transform:scale(1.07);
    text-shadow:
      0 0 10px rgba(8,58,41,.42),
      0 0 22px rgba(8,58,41,.22);
  }
  48%{
    color:#111111;
    filter:brightness(1);
    transform:scale(1.2);
    text-shadow:
      0 0 10px rgba(6,69,45,.34),
      0 0 26px rgba(6,69,45,.18);
  }
  100%{
    color:inherit;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}


/* Ver.2.10.35 — black → green → black while growing */
@keyframes sjTitleGlowSlow{
  0%{
    color:#111111;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
  24%{
    color:#176b49;
    filter:brightness(1.08);
    transform:scale(1.07);
    text-shadow:
      0 0 9px rgba(23,107,73,.36),
      0 0 20px rgba(23,107,73,.18);
  }
  48%{
    color:#23845d;
    filter:brightness(1.08);
    transform:scale(1.2);
    text-shadow:
      0 0 10px rgba(35,132,93,.46),
      0 0 26px rgba(35,132,93,.24),
      0 0 40px rgba(35,132,93,.12);
  }
  72%{
    color:#176b49;
    filter:brightness(1.04);
    transform:scale(1.07);
    text-shadow:
      0 0 9px rgba(23,107,73,.30),
      0 0 20px rgba(23,107,73,.14);
  }
  100%{
    color:#111111;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}


/* Ver.2.10.36 — smooth black → deep orange → black */
@keyframes sjTitleGlowSlow{
  0%{
    color:#111111;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
  50%{
    color:#c45a16;
    filter:brightness(1.08);
    transform:scale(1.2);
    text-shadow:
      0 0 10px rgba(196,90,22,.46),
      0 0 26px rgba(196,90,22,.24),
      0 0 40px rgba(196,90,22,.12);
  }
  100%{
    color:#111111;
    filter:brightness(1);
    transform:scale(1);
    text-shadow:none;
  }
}


/* Ver.2.10.37 — mobile title scale stabilization */
@media (max-width: 768px){
  @keyframes sjTitleGlowSlow{
    0%{
      color:#111111;
      filter:brightness(1);
      transform:scale(1);
      text-shadow:none;
    }
    50%{
      color:#c45a16;
      filter:brightness(1.08);
      transform:scale(1.12);
      text-shadow:
        0 0 8px rgba(196,90,22,.42),
        0 0 20px rgba(196,90,22,.22),
        0 0 30px rgba(196,90,22,.10);
    }
    100%{
      color:#111111;
      filter:brightness(1);
      transform:scale(1);
      text-shadow:none;
    }
  }
}


/* Ver.2.10.38 — image-first jewelry type selector */
.jewelry-type-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.type-chip.type-chip-image{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-width:0;
  padding:0 0 10px;
  overflow:hidden;
  border-radius:15px;
  background:#fff;
  color:#4f4a45;
}
.type-chip.type-chip-image img{
  display:block;
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
  background:#f7f5f2;
  border-bottom:1px solid #eee9e3;
}
.type-chip.type-chip-image .type-card-label{
  display:flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:8px 7px 0;
  font-size:11px;
  line-height:1.35;
  font-weight:600;
}
.type-chip.type-chip-image .chip-mark{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  margin:0;
}
.type-chip.type-chip-image.active,
.type-chip.type-chip-image[aria-pressed="true"]{
  background:#fff !important;
  color:#2f3834 !important;
  border:2px solid #2f3834 !important;
  box-shadow:0 8px 22px rgba(47,56,52,.18) !important;
}
.type-chip.type-chip-image.active .chip-mark,
.type-chip.type-chip-image[aria-pressed="true"] .chip-mark{
  background:#2f3834 !important;
  color:#fff !important;
}
.type-chip-auto{
  grid-column:1/-1;
  justify-self:center;
  min-width:150px;
}
@media(max-width:600px){
  .jewelry-type-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .type-chip.type-chip-image .type-card-label{
    min-height:36px;
    font-size:11px;
  }
  .type-chip-auto{
    grid-column:1/-1;
  }
}


/* Ver.2.10.47 — jewelry type card background unified */
.type-chip.type-chip-image{
  background:#eef0ee !important;
  border-color:#d9ddd9;
}
.type-chip.type-chip-image img{
  background:#eef0ee !important;
  border-bottom:1px solid #dfe2df;
}
.type-chip.type-chip-image .type-card-label{
  background:#eef0ee !important;
  color:#4b504d;
}
.type-chip.type-chip-image.active,
.type-chip.type-chip-image[aria-pressed="true"]{
  background:#eef0ee !important;
}


/* Ver.2.10.49 — compact labels, more room for jewelry images */
.type-chip.type-chip-image{
  padding-bottom:4px;
}
.type-chip.type-chip-image .type-card-label{
  min-height:24px !important;
  padding:4px 5px 0 !important;
  font-size:10.5px;
  line-height:1.18;
}
@media(max-width:600px){
  .type-chip.type-chip-image{
    padding-bottom:3px;
  }
  .type-chip.type-chip-image .type-card-label{
    min-height:23px !important;
    padding:3px 4px 0 !important;
    font-size:10px;
    line-height:1.15;
  }
}


/* Ver.2.10.50 — tighter vertical spacing + larger existing images */
.type-chip.type-chip-image{
  padding-bottom:2px !important;
}
.type-chip.type-chip-image img{
  display:block;
  width:100%;
  aspect-ratio:16/10.2;
  object-fit:cover;
  object-position:center;
}
.type-chip.type-chip-image .type-card-label{
  min-height:20px !important;
  padding:2px 5px 0 !important;
  line-height:1.12;
}
@media(max-width:600px){
  .type-chip.type-chip-image{
    padding-bottom:1px !important;
  }
  .type-chip.type-chip-image img{
    aspect-ratio:16/10.4;
  }
  .type-chip.type-chip-image .type-card-label{
    min-height:19px !important;
    padding:2px 4px 0 !important;
    line-height:1.10;
  }
}


/* Ver.2.10.54 — approved soft illustration category UI */
.type-chip.type-chip-image{
  background:#f6f3ee !important;
  border-color:#ded9d2 !important;
  padding-bottom:3px !important;
}
.type-chip.type-chip-image img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  background:#f6f3ee !important;
  border-bottom:1px solid #e5e0d9 !important;
}
.type-chip.type-chip-image .type-card-label{
  background:#f6f3ee !important;
  color:#47433f !important;
  min-height:22px !important;
  padding:3px 5px 1px !important;
  font-size:10.5px !important;
  line-height:1.15 !important;
}
.type-chip.type-chip-image.active,
.type-chip.type-chip-image[aria-pressed="true"]{
  background:#f6f3ee !important;
  border:2px solid #5b625e !important;
  box-shadow:0 7px 18px rgba(47,56,52,.12) !important;
}
@media(max-width:600px){
  .type-chip.type-chip-image img{
    aspect-ratio:3/2;
  }
  .type-chip.type-chip-image .type-card-label{
    min-height:21px !important;
    font-size:10px !important;
    padding:2px 4px 1px !important;
  }
}

/* Ver.2.10.55 — soft deformed illustration category UI */
.type-chip.type-chip-image{
  background:#faf7f2 !important;
  border-color:#e5ddd4 !important;
  box-shadow:none !important;
}
.type-chip.type-chip-image img{
  background:#faf7f2 !important;
  border-bottom:1px solid #eee7df !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
.type-chip.type-chip-image .type-card-label{
  background:#faf7f2 !important;
  color:#51463d !important;
}
.type-chip.type-chip-image.active,
.type-chip.type-chip-image[aria-pressed="true"]{
  background:#faf7f2 !important;
  border:2px solid #8b725d !important;
  box-shadow:0 6px 16px rgba(92,72,54,.10) !important;
}
.type-chip.type-chip-image.active .chip-mark,
.type-chip.type-chip-image[aria-pressed="true"] .chip-mark{
  background:#8b725d !important;
  color:#fff !important;
}


/* Ver.2.10.58 — only lighten existing starter buttons on smartphone */
@media(max-width:600px){
  #starterSuggestions .starter-chip{
    background:#fcfaf8 !important;
    border-color:#eee7e0 !important;
  }
  #starterSuggestions .starter-chip:hover,
  #starterSuggestions .starter-chip:active{
    background:#f8f4ef !important;
  }
}


/* Ver.2.10.59 — image quota shown outside/below the input box */
.quota-status.quota-status-below{
  margin:7px 4px 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:right;
  font-size:10.5px !important;
  line-height:1.35;
  color:#9a938c !important;
}
@media(max-width:600px){
  .quota-status.quota-status-below{
    margin-top:6px !important;
    margin-right:3px !important;
    font-size:10px !important;
    color:#a29b94 !important;
  }
}


/* Ver.2.10.60 — quota is outside the whole dialogue box */
.quota-status.quota-status-outside{
  display:block;
  margin:8px 5px 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:right;
  font-size:10.5px !important;
  line-height:1.35;
  color:#9a938c !important;
}
.quota-status.quota-status-outside.hidden{
  display:none !important;
}
@media(max-width:600px){
  .quota-status.quota-status-outside{
    margin:7px 4px 0 !important;
    font-size:10px !important;
    color:#a29b94 !important;
  }
}


/* Ver.2.10.62 — improved transparent logo animation + 30% larger animation */
.brand-logo-sequence .top-logo-video{
  width:65% !important; /* 50% × 1.30 */
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    width:202.176% !important; /* 155.52% × 1.30 */
    max-width:none !important;
  }
}


/* Ver.2.10.63 — logo animation 25% larger + mobile video */
.brand-logo-sequence .top-logo-video{
  width:62.5% !important; /* 50% × 1.25 */
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    display:block !important;
    width:194.4% !important; /* 155.52% × 1.25 */
    max-width:none !important;
  }
}


/* Ver.2.10.64 — reliable mobile alpha + explicit 0.3s fade */
.brand-logo-sequence .top-logo-video,
.brand-logo-sequence .top-logo-mobile-anim{
  transition:opacity .30s linear !important;
}
.brand-logo-sequence.logo-video-fading .top-logo-video,
.brand-logo-sequence.logo-video-fading .top-logo-mobile-anim{
  opacity:0 !important;
}
.brand-logo-sequence.logo-video-ended .top-logo-video,
.brand-logo-sequence.logo-video-ended .top-logo-mobile-anim{
  opacity:0 !important;
  visibility:hidden !important;
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    display:block !important;
    width:194.4% !important;
    max-width:none !important;
  }
}

/* Ver.2.10.68 — final static logo 5% larger on PC and mobile */
.brand-logo-sequence .top-logo-static{
  width:30.24%; /* 28.8% × 1.05 */
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-static{
    width:90.72%; /* 86.4% × 1.05 */
  }
}

/* Ver.2.10.69 — final static logo another 5% larger on PC and mobile */
.brand-logo-sequence .top-logo-static{
  width:31.752%; /* 30.24% × 1.05 */
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-static{
    width:95.256%; /* 90.72% × 1.05 */
  }
}

/* Ver.2.10.76 — desktop animated logo slightly lower to align with static logo */
@media (min-width:769px){
  .brand-logo-sequence .top-logo-video{
    top:calc(50% + 2px) !important;
  }
}


/* Ver.2.10.80 — true crossfade for the new transparent logo movie */
.brand-logo-sequence .top-logo-static{
  transition:opacity .30s linear !important;
}
.brand-logo-sequence.logo-video-fading .top-logo-static{
  opacity:1 !important;
}


/* Ver.2.10.81 — cleaner keyed logo assets + reliable mobile playback */

/* Ver.2.10.82 — larger main prompt box on smartphones */
@media (max-width:768px){
  .dialogue-panel,
  .dialogue-panel .composer{
    width:100% !important;
    max-width:none !important;
  }
  .dialogue-panel .composer{
    padding:8px !important;
  }
  #messageInput{
    width:100% !important;
    min-width:0 !important;
    min-height:96px !important;
    height:96px !important;
    max-height:240px !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }
}

/* Ver.2.10.83 — mobile composer: full-width input, Send button below */
@media (max-width:768px){
  html body main > .dialogue-panel .composer,
  .dialogue-panel .composer,
  #composer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:none !important;
    gap:8px !important;
  }
  #messageInput{
    display:block !important;
    flex:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    min-height:96px !important;
    height:96px !important;
    margin:0 !important;
  }
  #sendBtn,
  .dialogue-panel .send-btn{
    align-self:flex-end !important;
    width:auto !important;
    margin:0 !important;
  }
}


/* Ver.2.10.84 — mobile composer: taller input, less space below Send */
@media (max-width:768px){
  html body main > .dialogue-panel{
    padding-bottom:8px !important;
  }
  #messageInput{
    min-height:120px !important;
    height:120px !important;
  }
}

/* Ver.2.10.85 — white-background source re-keyed for cleaner transparent logo video */


/* Ver.2.10.86 — slower 1-second logo crossfade */
.brand-logo-sequence .top-logo-video,
.brand-logo-sequence .top-logo-mobile-anim,
.brand-logo-sequence .top-logo-static{
  transition:opacity 1s ease-in-out !important;
}


/* Ver.2.10.87 — remove extreme-edge haze and use a visibly slow logo crossfade */
.brand-logo-sequence{ overflow:hidden !important; }
.brand-logo-sequence .top-logo-video,
.brand-logo-sequence .top-logo-mobile-anim{
  clip-path:inset(0 6% 0 4%) !important;
  transition:opacity 1.4s ease-in-out !important;
}
.brand-logo-sequence .top-logo-static{
  transition:opacity 1.4s ease-in-out !important;
}


/* Ver.2.10.88 — restore full logo frame; clean only empty lower-right edge; slow crossfade */
.brand-logo-sequence{ overflow:visible !important; }
.brand-logo-sequence .top-logo-video,
.brand-logo-sequence .top-logo-mobile-anim{
  clip-path:none !important;
  transition:opacity 1.8s ease-in-out !important;
}
.brand-logo-sequence .top-logo-static{
  transition:opacity 1.8s ease-in-out !important;
}


/* Ver.2.10.89 — true transparent re-key from gray-white source; preserve full mobile frame */
.brand-logo-sequence{overflow:visible !important;}
.brand-logo-sequence .top-logo-video,
.brand-logo-sequence .top-logo-mobile-anim{
  clip-path:none !important;
  background:transparent !important;
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-mobile-anim{
    width:194.4% !important;
    max-width:none !important;
    object-fit:contain !important;
  }
}

/* Ver.2.10.92 — desktop animated logo: +5% size and 10px upward alignment */
@media (min-width:769px){
  .brand-logo-sequence .top-logo-video{
    width:65.625% !important; /* 62.5% × 1.05 */
    top:calc(50% - 8px) !important; /* was +2px; move up 10px */
  }
}

/* Ver.2.10.93 — logo position fine tuning */
@media (min-width:769px){
  .brand-logo-sequence .top-logo-video{top:calc(50% + 2px) !important;}
}
@media (max-width:768px){
  .brand-logo-sequence .top-logo-mobile-anim{top:calc(50% - 5px) !important;}
}


/* Ver.2.10.95: mobile hero slider dots smaller */
@media (max-width:768px){
  .hero-dots{
    bottom:8px;
    gap:4px;
    padding:3px 5px;
  }
  .hero-dot{
    width:4px;
    height:4px;
  }
  .hero-dot.active{
    transform:scale(1.12);
  }
}


/* Ver.2.10.96 — publish saved My Designs directly to Gallery */
.my-designs-gallery-btn{
  display:block;width:100%;margin-top:10px;min-height:44px;border:1px solid rgba(116,129,120,.42);border-radius:999px;
  background:#fff;color:#66736a;font:700 12px/1.4 "Meiryo UI",Meiryo,sans-serif;cursor:pointer
}
.my-designs-gallery-btn:disabled{opacity:.68;cursor:default}
.my-designs-gallery-status{min-height:16px;margin-top:6px;text-align:center;color:#777;font-size:10px;line-height:1.5}


/* Ver.2.10.97: explanatory subtitle below SoreJewelry title */
.series-site-subtitle{
  margin:4px 0 10px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  color:rgba(55,52,48,.72);
}
@media (max-width:768px){
  .series-site-subtitle{
    margin:3px 0 9px;
    font-size:12px;
  }
}

/* Ver.2.10.98: add one-line breathing room below AI app subtitle */
.series-site-subtitle{
  margin-bottom:26px;
}
@media (max-width:768px){
  .series-site-subtitle{
    margin-bottom:24px;
  }
}


/* Ver.2.11.01: Bali production note below AI app subtitle */
.series-site-subtitle{
  margin-bottom:4px;
}
.series-site-production-note{
  margin:0 0 26px;
  text-align:center;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.01em;
  color:rgba(55,52,48,.62);
}
@media (max-width:768px){
  .series-site-subtitle{
    margin-bottom:4px;
  }
  .series-site-production-note{
    margin-bottom:24px;
    font-size:10.5px;
  }
}


/* Ver.2.11.02: quick trial entry near the top */
.quick-trial{
  max-width:680px;
  margin:18px auto 24px;
  padding:18px 18px 16px;
  text-align:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(55,52,48,.12);
  border-radius:16px;
  box-shadow:0 6px 22px rgba(55,52,48,.06);
}
.quick-trial-title{
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  color:#373430;
}
.quick-trial-note{
  margin-top:3px;
  font-size:12px;
  line-height:1.5;
  color:rgba(55,52,48,.66);
}
.quick-trial-buttons{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:13px;
  flex-wrap:wrap;
}
.quick-trial-btn{
  appearance:none;
  border:1px solid rgba(55,52,48,.18);
  border-radius:999px;
  background:#fff;
  color:#373430;
  min-height:42px;
  padding:9px 17px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(55,52,48,.05);
}
.quick-trial-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(55,52,48,.09);
}
.quick-trial-btn:active{ transform:translateY(0); }
@media (max-width:768px){
  .quick-trial{
    margin:14px 12px 20px;
    padding:15px 12px 14px;
    border-radius:14px;
  }
  .quick-trial-title{ font-size:15px; }
  .quick-trial-note{ font-size:11.5px; }
  .quick-trial-buttons{ gap:7px; margin-top:11px; }
  .quick-trial-btn{
    min-height:40px;
    padding:8px 13px;
    font-size:13px;
  }
}


/* Ver.2.11.10 — first-view spacing and production-message refinement only. */
.hero .series-site-title{
  margin-bottom:7px !important;
}
.hero .firstview-concept{
  margin:0 auto 32px !important;
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:clamp(24px,4.4vw,34px) !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  letter-spacing:.015em !important;
  color:#2f3d34 !important;
}
.hero .firstview-concept .mobile-title-break{
  display:none !important;
}
.hero .hero-visual{
  margin-top:0 !important;
  margin-bottom:14px !important;
}
.hero .hero-generated-note{
  margin:-4px auto 18px !important;
}
.hero .firstview-trial{
  max-width:680px;
  margin:0 auto 18px !important;
  padding:16px 18px 15px !important;
  background:rgba(255,255,255,.58) !important;
  border-color:rgba(55,52,48,.10) !important;
  box-shadow:0 4px 16px rgba(55,52,48,.045) !important;
}
.hero .firstview-trial .quick-trial-title{
  font-size:18px !important;
  letter-spacing:.015em;
}
.hero .firstview-trial .quick-trial-note{
  margin-top:4px !important;
}
.hero .firstview-trial .quick-trial-buttons{
  margin-top:12px !important;
}
.hero .firstview-production-note{
  max-width:680px;
  margin:0 auto 30px !important;
  padding:18px 18px 17px;
  text-align:center;
  border-top:1px solid rgba(55,52,48,.14);
  border-bottom:1px solid rgba(55,52,48,.14);
}
.hero .firstview-production-title{
  font-size:17px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
  letter-spacing:.015em;
  color:#343b36 !important;
}
.hero .firstview-production-copy{
  margin-top:6px;
  font-size:13px !important;
  line-height:1.7 !important;
  font-weight:500 !important;
  color:#5a5f5b !important;
}
@media(max-width:600px){
  .hero .series-site-title{
    margin-bottom:4px !important;
  }
  .hero .firstview-concept{
    margin-bottom:26px !important;
    padding:0 8px;
    font-size:24px !important;
    line-height:1.42 !important;
  }
  .hero .hero-visual{
    margin-bottom:12px !important;
  }
  .hero .hero-generated-note{
    margin:-2px auto 15px !important;
  }
  .hero .firstview-trial{
    margin:0 4px 17px !important;
    padding:14px 10px 13px !important;
    border-radius:15px !important;
  }
  .hero .firstview-trial .quick-trial-title{
    font-size:17px !important;
  }
  .hero .firstview-trial .quick-trial-note{
    font-size:11.5px !important;
  }
  .hero .firstview-trial .quick-trial-buttons{
    gap:7px !important;
  }
  .hero .firstview-trial .quick-trial-btn{
    min-height:40px;
    padding:8px 12px;
    font-size:12.5px;
  }
  .hero .firstview-production-note{
    margin:0 4px 26px !important;
    padding:16px 8px 15px;
  }
  .hero .firstview-production-title{
    font-size:16px !important;
  }
  .hero .firstview-production-copy{
    margin-top:5px;
    font-size:12.5px !important;
    color:#555b56 !important;
  }
}

/* Ver.2.11.11 — make the service name the visual lead; add breathing room before production note. */
.hero .series-site-title{
  margin:0 auto 8px !important;
  padding:0 10px;
  font-family:"Meiryo UI",Meiryo,sans-serif !important;
  font-size:clamp(26px,4.8vw,36px) !important;
  line-height:1.42 !important;
  font-weight:700 !important;
  letter-spacing:.015em !important;
  color:#2f3d34 !important;
}
.hero .firstview-concept{
  margin:0 auto 30px !important;
  font-size:clamp(18px,3vw,23px) !important;
  line-height:1.55 !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  color:#455149 !important;
}
.hero .firstview-production-note{
  margin:12px auto 30px !important;
  padding:22px 18px 17px !important;
}
@media(max-width:600px){
  .hero .series-site-title{
    margin-bottom:7px !important;
    padding:0 4px;
    font-size:26px !important;
    line-height:1.4 !important;
    white-space:normal !important;
  }
  .hero .firstview-concept{
    margin-bottom:26px !important;
    font-size:19px !important;
    line-height:1.5 !important;
  }
  .hero .firstview-production-note{
    margin:12px 4px 26px !important;
    padding:21px 8px 15px !important;
  }
}


/* Ver.2.11.12 — slightly smaller lead typography; create real separation before production divider. */
.hero .series-site-title{
  font-size:clamp(23px,4.2vw,32px) !important;
}
.hero .firstview-concept{
  font-size:clamp(17px,2.7vw,21px) !important;
}
/* The gap must live OUTSIDE the bordered production block; increasing its padding only moved the text, not the line. */
.hero .firstview-production-note{
  margin-top:30px !important;
}
@media(max-width:600px){
  .hero .series-site-title{
    font-size:23px !important;
  }
  .hero .firstview-concept{
    font-size:17px !important;
  }
  .hero .firstview-production-note{
    margin-top:28px !important;
  }
}

/* Ver.2.11.13 — smartphone line-break cleanup for key first-view copy. */
@media(max-width:600px){
  /* Keep the service name on one clean line on normal smartphones. */
  .hero .series-site-title{
    font-size:clamp(17px,5.2vw,21px) !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Keep the production headline on one clean line as well. */
  .hero .firstview-production-title{
    font-size:clamp(12px,3.45vw,14px) !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }
}


/* Ver.2.11.62 — desktop AI-question scroll reserve
   A tall PC viewport can hit the document bottom before the newest AI question
   reaches the intended reading position. This reserve creates enough scroll
   range below the conversation. Mobile is intentionally unchanged. */
@media (min-width:769px){
  html.sj-question-scroll-space .app-shell{
    /* Ver.2.11.67:
       46vh was enough to center the question (Ver.2.11.62), but not enough
       to move a question near the document bottom all the way to the top
       of a tall PC viewport. Reserve a full viewport below the conversation. */
    padding-bottom:max(34px, 110vh) !important;
  }
}


/* Ver.2.11.79 — free-form instruction beside revision reference choices */
.revision-reference-free{
  margin:14px 0 10px;
}
.revision-reference-free label{
  display:block;
  margin:0 0 7px;
  font-family:Meiryo, "メイリオ", sans-serif;
  font-size:14px;
  line-height:1.6;
}
.revision-reference-free textarea{
  box-sizing:border-box;
  width:100%;
  min-height:76px;
  padding:10px 12px;
  resize:vertical;
  font-family:Meiryo, "メイリオ", sans-serif;
  font-size:16px;
  line-height:1.55;
  border:1px solid #bbb;
  border-radius:6px;
  background:#fff;
}

/* Ver.2.11.88 — revision question stays beside the revision button. */
.revision-local-consultation{margin-top:14px;padding:14px 0 4px;}
.revision-local-question{font-weight:700;line-height:1.7;margin-bottom:12px;}
.revision-local-choices{display:flex;flex-wrap:wrap;gap:8px;}
.revision-local-hint{width:100%;font-size:14px;line-height:1.7;opacity:.78;margin-top:2px;}


/* Ver.2.11.93 — after generation, show revision UI instead of the normal question UI. */
body.sj-design-generated #suggestions,
body.sj-design-generated .dialogue-panel{
  display:none !important;
}

#revisionControls .revision-reference-label{
  margin:14px 0 8px;
  font-size:12px;
  font-weight:700;
  color:#6b645d;
}


/* Ver.2.12.03 — mobile revision reference layout
   Put the reference image above the text so the image does not reserve
   a permanent left column beside the copy/input area. */
@media (max-width:600px){
  .revision-reference-info{
    display:block;
  }
  .revision-reference-info > img{
    display:block;
    width:86px;
    height:86px;
    margin:0 0 12px 0;
  }
  .revision-reference-meta{
    width:100%;
    min-width:0;
  }
}