/* 応募(入力・確認・完了)。部品は member_area.css を使い、ここは応募の画面だけのもの 2026.10.21 */
.apply [hidden] { display: none !important; }

/* 手順(応募入力 → 入力内容確認 → 応募完了) */
.apply__steps { display: flex; justify-content: space-between; position: relative; width: 100%; max-width: 520px; margin: 0 auto 4px; padding: 0; }
.apply__steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 15px; height: 2px; background: var(--line); }
.apply__steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--sub); font-size: 13px; font-weight: bold; list-style: none; }
.apply__steps span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #d5dbe3; color: #fff; font-size: 15px; }
.apply__steps li.-current { color: var(--area-dark); }
.apply__steps li.-current span { background: var(--area); box-shadow: 0 0 0 4px var(--area-pale); }
.apply__steps li.-done span { background: var(--area-line); }

/* 見出し(アイコン・キャラクター) */
.apply__hero { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 120px 0 4px; }
.apply__heroIcon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--area-pale); color: var(--area); }
.apply__heroIcon svg { width: 36px; height: 36px; stroke: var(--area); }
.apply__hero h1 { color: var(--text); font-size: 24px; font-weight: bold; letter-spacing: .06em; text-align: left; }
.apply__hero p { color: var(--sub); font-size: 13px; }
.apply__hero img { position: absolute; right: 0; bottom: -20px; width: 96px; height: auto; pointer-events: none; }

/* 応募先 */
.apply__job { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.apply__job figure { flex: 0 0 96px; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #f1f3f6; }
.apply__job figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apply__job > div { min-width: 0; }
.apply__jobLabel { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--area-pale); color: var(--area-dark); font-size: 11px; font-weight: bold; }
.apply__jobTitle { margin-top: 4px !important; font-size: 15px; font-weight: bold; line-height: 1.5; }
.apply__jobCompany { color: var(--sub); font-size: 12px; }

/* 会員のログイン */
.apply__login { padding: 12px 16px; border: 1px solid var(--area-line); border-radius: 12px; background: var(--area-pale); }
.apply__login summary { color: var(--area-dark); font-size: 13px; font-weight: bold; cursor: pointer; }
.apply__login form { display: grid; gap: 8px; margin-top: 12px; }
.apply__login .member__btn { margin-top: 4px; height: 46px; }
.apply__login .member__link { margin-top: 4px !important; }

/* 入力・確認 */
.apply__form { padding-top: 12px; }
.apply__section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.apply__section h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px !important; color: var(--text); font-size: 18px; font-weight: bold; }
.apply__section h2 > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--area); color: #fff; font-size: 14px; }
.apply__wish { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.apply__wishLabel { flex: 0 0 120px; display: flex; align-items: center; gap: 6px; padding-top: 12px; font-size: 14px; font-weight: bold; align-self: flex-start; }
.apply__wishBody { flex: 1; min-width: 0; display: grid; gap: 8px; }
.apply__date { max-width: 260px; }
.apply__info { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px !important; padding: 10px 14px !important; border-radius: 10px; background: var(--area-pale); color: var(--area-dark); font-size: 12px; line-height: 1.6; }
.apply__info svg { width: 18px; height: 18px; stroke: var(--area); }
.apply__textarea { height: 110px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.apply__count { margin-top: 4px !important; color: var(--sub); font-size: 12px; text-align: right; }
.apply__agree { margin-top: 20px; text-align: center; }
.apply__agree .member__choices { justify-content: center; }
.apply__agree .member__choices span { font-size: 14px; }
.apply__next { margin-top: 12px; }
.apply__buttons { display: flex; gap: 12px; margin-top: 20px; }
.apply__buttons .member__btn { margin-top: 0; }
.apply__buttons .member__btn.-sub { flex: 0 0 38%; }
.apply__buttons button:disabled { opacity: .6; cursor: wait; }

/* 完了 */
.apply__done { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--area-line); border-radius: 14px; background: var(--area-pale); }
.apply__doneMark { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--area); }
.apply__doneMark svg { width: 28px; height: 28px; stroke: #fff; stroke-width: 3; }
.apply__done b { display: block; font-size: 15px; }
.apply__done p { color: var(--sub); font-size: 13px; }
.apply__caution { margin-top: 16px !important; padding: 14px 16px 14px 32px !important; border-left: 4px solid #f2a516; border-radius: 8px; background: #fff9ea; font-size: 13px; }
.apply__caution li { list-style: decimal; }
.apply__caution li + li { margin-top: 6px; }
.apply__card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; font-size: 17px; font-weight: bold; }
.apply__card h2 svg { width: 22px; height: 22px; stroke: var(--area); }
.apply__card .member__btn { margin-top: 20px; }
.apply__support { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.apply__support > div { flex: 1; }
.apply__support b { font-size: 14px; }
.apply__support p { color: var(--sub); font-size: 12px; }
.apply__support img { width: 64px; height: 64px; object-fit: cover; object-position: top; }
.apply__more h2 { margin-bottom: 10px !important; padding-left: 10px; border-left: 4px solid var(--area); font-size: 16px; font-weight: bold; }
.apply__jobs { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.apply__jobs a { flex: 0 0 180px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text) !important; text-decoration: none; }
.apply__jobs figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f3f6; }
.apply__jobs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apply__jobs p { margin: 8px 10px 10px !important; font-size: 13px; font-weight: bold; line-height: 1.5; }

@media screen and (max-width: 767px) {
    .apply__steps li { font-size: 11px; }
    .apply__hero { padding: 8px 64px 0 0; gap: 12px; }
    .apply__heroIcon { width: 54px; height: 54px; }
    .apply__heroIcon svg { width: 28px; height: 28px; }
    .apply__hero h1 { font-size: 20px; }
    .apply__hero p { font-size: 12px; }
    .apply__hero img { width: 64px; bottom: -14px; }
    .apply__wish { flex-direction: column; gap: 8px; }
    .apply__wishLabel { flex: none; padding-top: 0; }
    .apply__date { max-width: none; }
    .apply__buttons .member__btn.-sub { flex-basis: 34%; }
}

/* ボタンの矢印(デザインどおり。進むボタンは右に →、戻るボタンは左に ‹) */
.member__btn.-arrow { position: relative; }
.member__btn.-arrow::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.member__btn.-back { position: relative; }
.member__btn.-back::before { content: ""; position: absolute; left: 20px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.apply__card .member__hint { margin-bottom: 4px !important; }
.apply__subhead { margin-top: 24px !important; }

/* 広告掲載のお申し込み */
.apply__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.apply__zip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apply__zip .member__input { width: 90px; }
.apply__zip .member__btn { width: auto; height: 44px; margin: 0; padding: 0 16px; font-size: 13px; letter-spacing: 0; }
.apply__address { display: grid; gap: 8px; margin-top: 8px; }
.apply__phone { display: flex; align-items: center; gap: 6px; }
.apply__phone .member__input { flex: 1; min-width: 0; max-width: 120px; }
.apply__bill { margin-top: 18px; }
.apply__billBody { padding: 0 14px 14px; }
.apply__next:disabled { background: #b9c2cf; border-color: #b9c2cf; cursor: not-allowed; }
@media screen and (max-width: 767px) {
    .apply__pair { grid-template-columns: 1fr; }
    .apply__zip .member__btn { flex: 1 0 100%; }
}