/* 看護師転職ナビ 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版のカード色をそのまま金・銀・銅に割り当て、
   4位以降は3色を繰り返す（4位=金, 5位=銀, 6位=銅 …）。 */
.card[data-rank="1"],
.card[data-rank="4"],
.card[data-rank="7"] { background-color: #fffae0; }   /* 金 */

.card[data-rank="2"],
.card[data-rank="5"],
.card[data-rank="8"] { background-color: #f2f1f1; }   /* 銀 */

.card[data-rank="3"],
.card[data-rank="6"],
.card[data-rank="9"] { background-color: #f8eadc; }   /* 銅 */

.card a { display: block; }

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

/* サイトロゴ: 小さく、左寄せ。
   `.wrap img { width:100% }` の方が詳細度が高く上書きされてしまうので、
   img.site-logo として同等以上の詳細度を持たせる。 */
img.site-logo {
  width: 100px;
  max-width: 33%;
  margin: 36px auto 36px 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; }
}

/* 転職ナビ LP — WordPress版（tensyokunavi.site/lp_threads/）の見た目を踏襲する上書き
   数値は WordPress版の「フォームに関するのスクリプト」の <style> と、区画のブロック設定から写した。
   2026-10-08: 最初は看護師のスタイルのままで、フォームに紺の枠が無く入力欄が分かりにくかった（ボス指摘）。 */

.theme-tenshoku .lp-section { display: flex; flex-direction: column; gap: 1em; }
.theme-tenshoku .lp-section > * { margin: 0; }

/* フォームは紺の区画の中の白い箱。WordPress版: .acc-body（紺・上下10px）＞ .list-form（白・15px） */
.theme-tenshoku .diagnosis-form {
  background: #fff;
  margin: 10px 0;   /* 紺の区画は台帳で gap:0 にしてあり、見出し画像との間はこの10pxだけ */
  padding: 15px;
}

.theme-tenshoku .diagnosis-form .list-form { width: 100%; margin: 0; padding: 0; }
.theme-tenshoku .diagnosis-form .list-form > li { margin-bottom: 10px; line-height: 1.2; }

.theme-tenshoku .diagnosis-form .head > .required { font-size: 15px; margin-right: 5px; }

/* 選択肢は1行に1つ（WordPress版と同じ）。横並びだと長い選択肢が折り返して読みにくい */
.theme-tenshoku .diagnosis-form .body { display: block; padding: 1em; }
.theme-tenshoku .diagnosis-form .body label { display: block; margin-bottom: 10px; font-size: 16px; }

.theme-tenshoku .diagnosis-form .body select {
  width: 100%;
  max-width: 100%;
  height: 44px;
  font-size: 16px;           /* iPhone の自動ズームを防ぐ */
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 10px center / 1em;
  -webkit-appearance: none;
  appearance: none;
}

.theme-tenshoku .link-submit {
  width: 20em;
  max-width: 90%;
  font-size: 18px;
  margin: 20px auto;
  padding: 0.8em;
  line-height: 1.5;
  border-radius: 5px;
}