:root { --green-main: #10b981; --green-accent: #84cc16; --green-dark: #065f46; --gray-light: #f9fafb; --gray-border: #d1d5db; }
* { box-sizing: border-box; }
html, body { font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, Arial, sans-serif; background: var(--gray-light); color:#111827; }

.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }

.panel { border-radius: 1rem; padding: 1.5rem; background: #ffffff; border: 1px solid var(--gray-border); box-shadow: 0 6px 18px rgba(0,0,0,.06); }

.btn-primary { background:var(--green-main); color:#fff; padding:.6rem 1rem; border-radius:.75rem; font-weight:700; box-shadow:0 4px 12px rgba(16,185,129,.25); transition: transform .05s ease, filter .2s ease; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }

.btn-accent { background:var(--green-accent); color:#052e16; padding:.6rem 1rem; border-radius:.75rem; font-weight:700; box-shadow:0 4px 12px rgba(132,204,22,.25); }

.btn-ghost { padding:.55rem .9rem; border-radius:.75rem; border:1px solid var(--gray-border); background:#fff; color:#111827; }
.btn-ghost:hover { background: #f3f4f6; }

/* Likert buttons：5列・均等配置 */
.likert { 
  display:grid; 
  grid-template-columns: repeat(5, minmax(0,1fr)); 
  gap:.6rem; 
}
.likert button { border:1px solid var(--gray-border); border-radius:.75rem; padding:.7rem .75rem; background:#fff; color:#111827; font-weight:700; }
.likert button.is-selected { background:var(--green-main); color:#fff; }

/* --- Likert 選択演出の強化 --- */
.likert button {
  position: relative;
  transition: transform .1s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.likert button:active {
  transform: scale(.96);
}
.likert button.is-selected,
.likert button.chosen {
  background: var(--green-main);
  color: #fff;
  border-color: var(--green-main);
  box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}

/* スマホ（~640px）は選択肢を縦1列に */
@media (max-width: 640px){
  .likert { 
    grid-template-columns: 1fr !important; 
    gap: .5rem;
  }
  .likert button {
    width: 100%;
    text-align: left;              /* 左寄せにすると読みやすい */
    padding: .9rem 1rem;           /* タップしやすい高さ */
  }

  /* 結果レイアウトも縦積み寄りに */
  #resultCard .flex { gap: 1rem; }
  .type-figure { max-width: 100%; } /* 画像は横幅にフィット */
}


/* クリック時のリップル */
.likert button .ripple {
  position: absolute;
  border-radius: 99px;
  transform: scale(0);
  animation: ripple .5s ease-out forwards;
  background: rgba(80, 248, 192, 0.662);
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(6);
    opacity: 0;
  }
}

/* キーボード操作の視認性 */
.likert button:focus-visible {
  outline: 3px solid rgba(16,185,129,.5);
  outline-offset: 2px;
}


/* Header */
header { background:#fff; border-bottom:1px solid var(--gray-border); }
header .font-bold { color:var(--green-dark); }

/* Floating Progress Bar */
.progress-float {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--gray-border);
  box-shadow: 0 8px 24px rgba(2,6,23,.12);
  border-radius: 9999px;
  padding: .5rem .75rem;
  display: flex; align-items: center; gap: .5rem;
  z-index: 50;
}
.progress-track { width: 200px; height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #34d399, #84cc16); }
.progress-label { font-size: .8rem; color: #065f46; font-weight: 700; }
@media (max-width: 480px){ .progress-track { width: 140px; } }

/* タイプ画像（正方形） */
.type-figure { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; border:1px dashed #d1d5db; border-radius: 1rem; background:#f3f4f6; position: relative; overflow:hidden; }
.type-figure img { width:100%; height:100%; object-fit: cover; display:block; }
.type-figure .ph { position:absolute; inset:0; display:grid; place-items:center; color:#6b7280; font-weight:700; }

/* 職種バッジのスタイル */
#roles span {
  display: inline-block;
  margin: 0.2rem;
}

/* スマホ時は縦並び */
@media (max-width: 640px) {
  #roles {
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }
  #roles span {
    display: block;
    margin: 0; /* 余白はgapで調整 */
  }
}

/* スマホは求人ボタンも縦積み */
@media (max-width: 640px){
  #jobLinks { 
    display: flex; 
    flex-direction: column; 
    gap: .5rem; 
  }
}