:root{
  --bg:#fff8e9;
  --ink:#49372d;
  --muted:#9b7d6c;
  --orange:#ff8b3d;
  --orange-dark:#d96720;
  --orange-soft:#fff0e2;
  --yellow:#ffd86b;
  --blue:#9edbea;
  --pink:#f5b7b1;
  --white:#fffdf9;
  --line:#f0d7c4;
  --danger:#a84e3d;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
}
.public-page{
 background:var(--bg);
}
.public-wrap{
  width:min(650px,calc(100% - 28px));
  margin:0 auto;
  padding:54px 0 90px;
}
.pop-hero{text-align:center;margin-bottom:26px}

.pop-hero h1{
  margin:0;
  font-size:38px;
  font-weight:900;
  letter-spacing:.06em;
}
.pop-hero p{
  margin:10px 0 0;
  color:#8c6e5d;
  font-size:14px;
}
.pop-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:25px 0;
}
.pop-nav a{
  padding:9px 16px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#9a725a;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
.pop-nav a.active{
  color:#fff;
  border-color:var(--orange);
  background:var(--orange);
}
.pop-card{
  padding:24px;
  border:2px solid var(--line);
  border-radius:28px;
  background:var(--white);
  box-shadow:7px 8px 0 #f2cba9;
}
.pop-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}
.pop-tab{
  padding:12px;
  border:2px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:#8d6c5a;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease;
}
.pop-tab:hover{transform:translateY(-1px)}
.pop-tab.active{
  color:var(--orange-dark);
  border-color:var(--orange);
  background:var(--orange-soft);
}
.public-page textarea{
  width:100%;
  height:190px;
  padding:17px;
  border:2px dashed #e9c4a6;
  border-radius:19px;
  outline:none;
  resize:vertical;
  background:#fffaf3;
  color:var(--ink);
  font:inherit;
  line-height:1.8;
}
.public-page textarea:focus{
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,139,61,.10);
}
.public-page textarea::placeholder{color:#b49988}
.pop-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
}
.pop-note{color:#a18372;font-size:11px}
.pop-send{
  padding:13px 25px;
  border:0;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 0 var(--orange-dark);
}
.pop-send:hover{filter:brightness(1.03)}
.pop-send:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--orange-dark);
}
.pop-success,.pop-error,.pop-empty{
  margin:0 0 18px;
  padding:14px 17px;
  border:2px solid var(--line);
  border-radius:18px;
  background:#fff;
  font-size:13px;
  line-height:1.7;
  text-align:center;
}
.pop-success{color:#b85f24;background:#fff6df}
.pop-error{color:#8f3f2f;background:#fff1ed}
.pop-empty{color:var(--muted);padding:30px 20px}
.reply-list{margin-top:8px}
.pop-reply-card{
  position:relative;
  margin-bottom:17px;
  padding:20px;
  border:2px solid var(--line);
  border-radius:24px;
  background:#fff;
}
.pop-reply-card:nth-child(3n+1)::before{
  content:"★";
  position:absolute;
  top:-14px;
  right:18px;
  color:var(--yellow);
  font-size:26px;
  transform:rotate(13deg);
}
.pop-reply-card:nth-child(3n+2)::before{
  content:"●";
  position:absolute;
  top:-12px;
  right:20px;
  color:var(--blue);
  font-size:22px;
}
.pop-reply-card:nth-child(3n)::before{
  content:"✦";
  position:absolute;
  top:-15px;
  right:19px;
  color:var(--pink);
  font-size:27px;
}
.pop-reply-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:13px;
}
.pop-badge{
  padding:6px 10px;
  border-radius:999px;
  background:var(--orange-soft);
  color:var(--orange-dark);
  font-size:11px;
  font-weight:900;
}
.pop-date{color:#aa8e7e;font-size:10px}
.pop-message{
  font-size:14px;
  line-height:1.8;
  word-break:break-word;
}
.pop-answer{
  margin-top:17px;
  padding:15px 16px;
  border-radius:16px;
  background:#fff6df;
  font-size:14px;
  line-height:1.8;
  word-break:break-word;
}
.pop-answer strong{
  display:block;
  margin-bottom:6px;
  color:var(--orange-dark);
  font-size:11px;
}

/* 管理画面：従来機能を崩さないためのスタイル */
body:not(.public-page){background:#fffaf5;color:#43362f}
.admin-wrap{
  width:min(900px,calc(100% - 28px));
  margin:0 auto;
  padding:34px 0 64px;
}
.admin-wrap header{text-align:center;margin-bottom:22px}
.admin-wrap h1,.login-box h1{margin:0;font-family:Georgia,"Times New Roman",serif}
.sub{
  margin:10px auto 0;
  color:#9a7e6f;
  font-size:14px;
  line-height:1.8;
  text-align:center;
}
.top-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 auto 24px;
}
.top-nav a{
  padding:9px 14px;
  border:1px solid #f1dccd;
  border-radius:999px;
  background:#fff;
  color:#b85f24;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}
.top-nav a.active{color:#fff;background:#e8914f;border-color:#e8914f}
.admin-card,.card{
  margin-bottom:14px;
  padding:20px;
  border:1px solid #f1dccd;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 40px rgba(130,82,45,.08);
}
.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.badge{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:#fff0e3;
  color:#b85f24;
  font-size:12px;
  font-weight:700;
}
.date{color:#9a7e6f;font-size:12px}
.message{padding-bottom:16px;line-height:1.8;white-space:pre-wrap}
.admin-card textarea{
  width:100%;
  min-height:150px;
  padding:14px 15px;
  border:1px solid #f1dccd;
  border-radius:15px;
  outline:none;
  resize:vertical;
  background:#fff;
  color:#43362f;
  font:inherit;
  line-height:1.7;
}
.admin-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.admin-actions button{
  padding:9px 13px;
  border:1px solid #f1dccd;
  border-radius:12px;
  background:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.admin-actions .publish{color:#fff;border-color:#e8914f;background:#e8914f}
.admin-actions .delete{color:var(--danger)}
.status{margin-top:8px;color:#9a7e6f;font-size:12px}
.login-box{width:min(420px,calc(100% - 28px));margin:80px auto 0}
.login-box input[type="password"]{
  width:100%;
  padding:14px 15px;
  border:1px solid #f1dccd;
  border-radius:15px;
  outline:none;
  background:#fff;
  color:#43362f;
  font:inherit;
}
.btn-primary{
  width:100%;
  margin-top:20px;
  padding:14px 18px;
  border:0;
  border-radius:15px;
  background:#e8914f;
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.error,.success{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:14px;
}
.error{color:#8f3f2f;border:1px solid #f1c8bc;background:#fff1ed}
.success{color:#b85f24;border:1px solid #f2d2b8;background:#fff6ee}
.empty{
  padding:34px 22px;
  border:1px solid #f1dccd;
  border-radius:22px;
  background:#fff;
  color:#9a7e6f;
  text-align:center;
  line-height:1.8;
}
.notice{margin-top:14px;color:#9a7e6f;font-size:12px;line-height:1.7;text-align:center}
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
@media(max-width:520px){
  .public-wrap{padding-top:35px}
  .pop-hero h1{font-size:32px}
  .pop-card{padding:18px;border-radius:23px;box-shadow:5px 6px 0 #f2cba9}
  .pop-bottom{align-items:flex-end}
  .admin-wrap{padding-top:26px}
  .admin-card,.card{padding:17px;border-radius:19px}
  .meta{align-items:flex-start;flex-direction:column;gap:7px}
  .admin-actions button{flex:1}
}