:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#4b5565;
  --line:rgba(15,23,42,.12);

  --shadow:0 10px 24px rgba(2,6,23,.08);
  --shadow-soft:0 6px 12px rgba(2,6,23,.06);

  --radius:16px;
  --radius-lg:20px;

  --pay-bg:#e5e7eb /* 薄グレイ */
  --logo-yellow:#FFFC44; /* 画像の黄色に合わせた色 */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans JP", sans-serif;
  font-size: 13px;      /* 書体を小さめ */
  line-height: 1.5;     /* 間隔を詰める */
  letter-spacing:.01em;
}

.wrap{
  width:min(760px, calc(100% - 34px));
  margin:0 auto;
  padding:16px 0 26px;
}

.paper{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow);
  padding:14px 16px 14px;
}

/* ロゴ：中央・上 */
.logo-top{
  background: var(--logo-yellow);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: var(--shadow-soft);
  margin: 0 0 10px; /* 間隔少なめ */
}
.logo-top img{
  display:block;
  height: 46px;
  width:auto;
}

/* タイトル */
.title{
  margin:0 0 6px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing:.03em;
}

/* 連絡先 */
.contact{
  margin:0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.contact-link{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sep{
  margin: 0 6px;
  color: rgba(15,23,42,.45);
}

/* 時給：角丸＋薄グレイ背景 */
.pay{
  display:inline-flex;
  gap:10px;
  align-items:baseline;
  padding:10px 12px;
  border-radius: 14px;
  background: var(--pay-bg);
  border: 1px solid rgba(15,23,42,.10);
  margin:0 0 10px;
}
.pay-label{
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}
.pay-value{
  margin:0;
  font-weight:800;
  font-size:18px;
}

/* ブロック間隔 */
.block{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.10);
}
.block-title{
  margin:0 0 6px;
  font-size:14px;
  letter-spacing:.03em;
}
.text{
  margin:0;
  color:var(--muted);
}

.flow{
  margin-top:8px;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow-soft);
  padding:10px 12px;
}
.flow-line{
  margin:0;
  color:var(--muted);
}
.flow-line + .flow-line{ margin-top:4px; }

/* 戻る：文字のみ */
.back{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.10);
}
.back a{
  color: var(--text);
  text-decoration: underline;
  font-weight:600;
  text-underline-offset: 2px;
}
.contact{
  margin:0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.contact-label{
  color: var(--muted);
  font-weight: 600;
}
.contact-text{
  color: var(--text);
  font-weight: 600;
}
.sep{
  margin: 0 6px;
  color: rgba(15,23,42,.45);
}
/* ===== ロゴ表示：四角、黄色はロゴ周辺だけ（最終上書き） ===== */
.logo-top{
  background: transparent !important; /* 帯を消す */
  border-radius: 0 !important;        /* 角丸を消す */
  padding: 0 !important;              /* 余白を消す */
  box-shadow: none !important;        /* 影を消す */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
}

.logo-top img{
  display: block;
  height: 46px;
  width: auto;

  background: #FFFC44 !important;     /* 黄色（赤枠範囲） */
  padding: 10px 18px;                  /* 赤枠の幅（調整OK） */

  border-radius: 0 !important;         /* ロゴを四角にする */
  box-shadow: var(--shadow-soft);
}

@media (max-width: 520px){
  body{ font-size: 12.8px; }
  .title{ font-size: 19.5px; }
  .logo-top img{ height: 40px; }
}