/* 看護師転職ナビ LP — WordPress版(Cocoon)の見た目を踏襲したスタイル */

:root {
  --content-width: 840px;
  --accent: #fb6514;
  --required: #f57500;
  --card-gap: 16px;   /* 結果カード内の画像間隔。ここ1箇所で全部そろう */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.7;
}

.wrap { max-width: var(--content-width); margin: 0 auto; }

/* 画像はすべて幅いっぱい。CLS を避けるため width/height を必ず属性で持たせる */
.wrap img,
.card img { display: block; width: 100%; height: auto; margin: 0 auto; }

a { color: inherit; }

/* ── 診断フォーム ── */
.diagnosis-form .list-form {
  width: 90%;
  list-style: none;
  margin: 20px auto;
  padding: 20px;
}

.diagnosis-form .list-form > li { border-top: 1px dotted #ccc; }
.diagnosis-form .list-form > li:first-of-type { border-top: none; }

.diagnosis-form .head {
  font-size: 14px;
  font-weight: 600;
  background-color: #efefef;
  padding: 1em;
  text-align: left;
}

.diagnosis-form .head > .required {
  font-size: 13px;
  padding: 4px 6px;
  background: var(--required);
  color: #fff;
  border-radius: 3px;
  margin-right: 6px;
}

.diagnosis-form .body {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 16px;
  padding: 1em 1em 1em 1.5em;
  text-align: left;
}

.diagnosis-form .body label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.diagnosis-form .body select { font-size: 16px; padding: 6px 8px; max-width: 100%; }

.link-submit {
  display: block;
  width: 20em;
  max-width: 80%;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background-color: var(--accent);
  text-align: center;
  margin: 0 auto 32px;
  padding: 0.5em;
  line-height: 2;
}

.link-submit::after {
  position: relative;
  display: inline-block;
  content: "△";
  left: 0.4em;
  transform: rotate(90deg);
  transition: left 0.2s;
}

.link-submit:hover::after { left: 0.6em; }

/* ── 結果カード ──
   画像の間隔は個別marginではなく flex の gap で揃える。
   img も a>img も同じ間隔になるので、要素ごとの調整漏れが起きない。 */
.result { margin: 0 auto; }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-gap) 20px calc(var(--card-gap) * 1.5);
}
.card > * { margin: 0; }
.card[hidden] { display: none; }

/* 順位ごとの背景色。WordPress版のカード色をそのまま順位に割り当てている */
.card[data-rank="1"] { background-color: #fffae0; }
.card[data-rank="2"] { background-color: #f2f1f1; }
.card[data-rank="3"] { background-color: #f8eadc; }
.card[data-rank="4"] { background-color: #eef4f8; }

.card a { display: block; }

/* 診断ページ下部の「自分に最適な転職サイトを調べる」ボタン */
.cta-scroll { display: block; max-width: 420px; margin: 24px auto; }

/* サイトロゴ: 小さく、左寄せ */
.site-logo { width: 100px; margin: 28px auto 28px 20px; }

@media (max-width: 600px) {
  :root { --card-gap: 12px; }
  .diagnosis-form .list-form { width: 100%; padding: 10px; }
  .diagnosis-form .body { padding-left: 1em; }
  .card { padding: var(--card-gap) 12px calc(var(--card-gap) * 1.5); }
  .cta-scroll { max-width: 88%; }
  .site-logo { margin-left: 12px; }
}