body {
  margin: 0;
  padding: 40px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #222;
  background: #f7f4ef;
}

a {
  color: #0066cc; /* 文字色 */
  text-decoration: none; /* 下線を表示（消す場合は none） */
  transition: all 0.3s ease; /* ホバー時のアニメーション */
}

a:hover {
  color: #0099ff; /* ホバー時の文字色 */
  text-decoration: none; /* ホバー時に下線を消す場合 */
  opacity: 0.8; /* ホバー時に少し透明にする場合 */
}

a:visited {
  color: #0066cc;
}

a:active {
  color: #003366;
}

.sign-ai-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

.sign-ai-wrap h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.4;
}

.sign-ai-lead {
  margin: 0 0 28px;
  color: #555;
  line-height: 1.8;
}

.sign-progress {
  margin-bottom: 18px;
  font-size: 14px;
  color: #8a6a48;
  font-weight: bold;
}

.sign-question h3 {
  margin: 0 0 22px;
  font-size: 21px;
  line-height: 1.6;
}

.sign-options {
  display: grid;
  gap: 12px;
}

.sign-option-btn {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #d8c7b5;
  border-radius: 12px;
  background: #fff;
  color: #222;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.sign-option-btn:hover {
  background: #fbf7f2;
  border-color: #a8815a;
  transform: translateY(-1px);
}

.sign-result {
  margin-top: 24px;
  line-height: 1.9;
}

.sign-result h1,
.sign-result h2,
.sign-result h3 {
  margin-top: 28px;
  line-height: 1.5;
}

.sign-result ul {
  padding-left: 1.4em;
}

.sign-restart-btn {
  margin-top: 24px;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

@media (max-width: 768px) {
  body {
    padding: 20px 12px;
  }

  .sign-ai-wrap {
    padding: 24px 18px;
    border-radius: 14px;
  }

  .sign-ai-wrap h1 {
    font-size: 23px;
  }

  .sign-question h3 {
    font-size: 18px;
  }

  .sign-option-btn {
    font-size: 15px;
    padding: 14px 15px;
  }
}

/* AI feedback */
.ai-feedback-box{
  margin-top:48px;
  padding:28px;
  border:1px solid #e4ddd4;
  border-radius:16px;
  background:#fbfaf8;
}

.ai-feedback-box h3{
  margin:0 0 10px;
  padding:0;
  border:none;
  font-size:20px;
  line-height:1.5;
}

.ai-feedback-lead{
  margin:0 0 18px;
  color:#666;
  line-height:1.8;
}

.ai-stars{
  display:flex;
  gap:8px;
  margin:0 0 18px;
}

.ai-star-btn{
  width:48px;
  height:48px;
  border:1px solid #d8c7b5;
  border-radius:12px;
  background:#fff;
  color:#c8b7a3;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}

.ai-star-btn:hover,
.ai-star-btn.is-active{
  background:#fff7e8;
  border-color:#d09a3b;
  color:#d09a3b;
  transform:translateY(-1px);
}

.ai-star-btn:disabled{
  cursor:default;
  transform:none;
}

.ai-feedback-comment{
  width:100%;
  box-sizing:border-box;
  margin:0 0 16px;
  padding:14px 16px;
  border:1px solid #d8c7b5;
  border-radius:12px;
  font:inherit;
  line-height:1.8;
  resize:vertical;
  background:#fff;
}

.ai-feedback-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 22px;
  border:none;
  border-radius:999px;
  background:#222;
  color:#fff;
  font-size:15px;
  cursor:pointer;
}

.ai-feedback-submit:disabled{
  opacity:.6;
  cursor:default;
}

.ai-feedback-message{
  margin:14px 0 0;
  color:#666;
  font-size:14px;
  line-height:1.7;
}

.ai-feedback-message.is-success{
  color:#257942;
}

.ai-feedback-message.is-error{
  color:#b3261e;
}

@media (max-width:768px){
  .ai-feedback-box{
    margin-top:36px;
    padding:22px 18px;
  }

  .ai-stars{
    gap:6px;
    justify-content:space-between;
  }

  .ai-star-btn{
    width:52px;
    height:52px;
    font-size:26px;
  }

  .ai-feedback-submit{
    width:100%;
  }
}