:root {
  color: #23332d;
  background: #f5f8f6;
  font-family: "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  --green: #2f745d;
  --green-dark: #205443;
  --green-soft: #eaf4ef;
  --pink: #a95d72;
  --line: #dbe5df;
  --shadow: 0 14px 40px rgba(31, 67, 53, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, #eef6f1 0, #f8faf8 22rem, #f5f8f6 100%); }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.shell { width: min(100% - 2rem, 54rem); margin: 0 auto; padding: 3rem 0 2rem; }
.hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.brand { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50% 50% 48% 52%; color: white; background: var(--green); font-family: serif; font-size: 1.65rem; box-shadow: 0 6px 16px rgba(47,116,93,.2); }
.eyebrow { margin: 0 0 .1rem; color: var(--green); font-size: .74rem; font-weight: 800; letter-spacing: .13em; }
h1, h2 { margin: 0; line-height: 1.35; }
h1 { font-size: clamp(1.45rem, 4vw, 2.1rem); }
h2 { font-size: 1.25rem; }
.lead { margin: .35rem 0 0; color: #5a6863; }
.status { margin: 0; padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.status-loading { color: #59645f; background: #e8ecea; }
.status-open { color: #176044; background: #dff2e8; }
.status-closed { color: #76525b; background: #f4e8eb; }

.recruit-visual { overflow: hidden; margin: 0 0 1.2rem; border: 1px solid #d9e5d7; border-radius: 1rem; background: #fffdf5; box-shadow: var(--shadow); }
.recruit-visual-image-link { display: block; background: #f8f4df; }
.recruit-visual-image { display: block; width: 100%; height: auto; }
.recruit-visual-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-top: 1px solid #d9e5d7; }
.recruit-visual-title { margin: .15rem 0 0; font-weight: 700; line-height: 1.5; }
.recruit-visual-button { flex: 0 0 auto; padding: .65rem 1rem; border-radius: .65rem; color: white; background: var(--green); font-weight: 700; text-decoration: none; box-shadow: 0 5px 14px rgba(47,116,93,.18); }
.recruit-visual-button:hover, .recruit-visual-button:focus-visible { background: var(--green-dark); }
.recruit-site-button { background: #704b8b; box-shadow: 0 5px 14px rgba(112,75,139,.22); }
.recruit-site-button:hover, .recruit-site-button:focus-visible { background: #56366f; }

.privacy { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px solid #eddde1; border-radius: .75rem; background: #fff8fa; color: #694d55; font-size: .9rem; }
.privacy-icon { display: grid; flex: 0 0 auto; place-items: center; width: 1.35rem; height: 1.35rem; margin-top: .15rem; border-radius: 50%; color: white; background: var(--pink); font-family: serif; font-weight: bold; }
.privacy p { margin: 0; }
.question-example { display: inline-block; margin-top: .25rem; color: #53635c; }

.chat-card, .contact-card { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; box-shadow: var(--shadow); }
.chat-heading { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.text-button { width: auto; padding: .25rem; border: 0; color: var(--green); background: transparent; font-size: .86rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.messages { display: flex; flex-direction: column; gap: 1rem; min-height: 12rem; max-height: 28rem; overflow-y: auto; padding: 1.4rem; background: #fbfdfc; scroll-behavior: smooth; }
.message { width: min(88%, 38rem); }
.message-name { display: block; margin: 0 0 .25rem .2rem; color: #6a7772; font-size: .75rem; font-weight: 700; }
.message p { display: inline-block; max-width: 100%; margin: 0; padding: .8rem 1rem; border-radius: .25rem 1rem 1rem 1rem; background: var(--green-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
.message-user { align-self: flex-end; text-align: right; }
.message-user p { color: white; background: var(--green); border-radius: 1rem .25rem 1rem 1rem; text-align: left; }
.feedback { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin: .55rem 0 0 .2rem; color: #65716c; font-size: .75rem; text-align: left; }
.feedback-prompt { font-weight: 700; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.feedback-button { padding: .28rem .55rem; border: 1px solid #bfd0c8; border-radius: 999px; color: var(--green-dark); background: white; font-size: .75rem; cursor: pointer; }
.feedback-button:hover, .feedback-button:focus-visible { border-color: var(--green); background: var(--green-soft); }
.feedback-button:disabled { opacity: .6; cursor: wait; }
.feedback-result { color: var(--green-dark); }
.feedback-note { color: #7a8580; font-size: .68rem; line-height: 1.45; }

.scenario-panel { padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--line); }
.choice-label { margin: 0 0 .75rem; font-size: .9rem; font-weight: 700; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.choice { min-height: 3.2rem; padding: .7rem 1rem; border: 1px solid #b8d0c6; border-radius: .65rem; color: var(--green-dark); background: #fff; font-weight: 700; cursor: pointer; transition: .15s ease; }
.choice:hover, .choice:focus-visible { border-color: var(--green); background: var(--green-soft); transform: translateY(-1px); }
.choice-ai { color: white; border-color: var(--green); background: var(--green); }
.choice-ai:hover, .choice-ai:focus-visible { color: white; background: var(--green-dark); }
.choice-back { color: #627069; border-color: transparent; background: #f1f4f2; }

.chat-form { padding: 1.2rem 1.4rem; border-top: 1px solid var(--line); }
.chat-form label { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 700; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: stretch; }
textarea { width: 100%; min-height: 4.2rem; resize: vertical; padding: .7rem .8rem; border: 1px solid #adbbb5; border-radius: .65rem; color: inherit; background: #fff; line-height: 1.5; }
textarea:focus { outline: 3px solid rgba(47,116,93,.15); border-color: var(--green); }
.composer > button { min-width: 6rem; padding: .65rem 1rem; border: 0; border-radius: .65rem; color: white; background: var(--green); font-weight: 700; cursor: pointer; }
.composer > button:disabled { opacity: .6; cursor: wait; }
.form-meta { display: flex; justify-content: space-between; margin-top: .25rem; color: #748079; font-size: .75rem; }

.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1.3rem 1.4rem; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.contact-button { display: inline-block; padding: .65rem 1rem; border: 1px solid var(--green); border-radius: .6rem; color: white; background: var(--green); font-weight: 700; text-decoration: none; }
.contact-button-light { color: var(--green); background: white; }
.footer-note { margin: 1rem 0 0; color: #69766f; font-size: .8rem; text-align: center; }

@media (max-width: 640px) {
  :root { font-size: 16px; }
  .shell { width: min(100% - 1rem, 54rem); padding-top: 1.2rem; }
  .hero { grid-template-columns: auto 1fr; }
  .status { grid-column: 2; justify-self: start; }
  .lead { font-size: .9rem; }
  .recruit-visual-action { align-items: stretch; flex-direction: column; padding: .85rem; }
  .recruit-visual-title { font-size: .92rem; }
  .recruit-visual-button { text-align: center; }
  .messages { padding: 1rem .75rem; }
  .message { width: 96%; }
  .message p { display: block; width: 100%; padding: .8rem .85rem; }
  .feedback { margin-left: 0; }
  .choices { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .composer > button { min-height: 3rem; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .contact-actions { justify-content: stretch; width: 100%; }
  .contact-button { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }