/* DELIGHT 採用LP — B案「れんらくノート」: 方眼ノートの地・テープで貼った写真・手書き風の見出し・付せん・ハンコ */
:root {
  --paper: #FFFDF7;
  --white: #FFFFFF;
  --ink: #292F4A;
  --ink-soft: #545A75;
  --sky: #92C5D8;
  --sky-deep: #3F87A3;
  --pink: #EA909A;
  --pink-deep: #D9707C;
  --orange: #FDBD7E;
  --lavender: #A2B4E2;
  --yellow: #FDF0A8;
  --grid: rgba(146, 197, 216, .22);
  --line: rgba(41, 47, 74, .14);
  --error: #C23B22;
  --shadow: 0 6px 16px rgba(41, 47, 74, .12);
  --hand: "Klee One", "Zen Maru Gothic", sans-serif;
  --en: "Quicksand", "Zen Maru Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; color: var(--ink); font-family: "Zen Maru Gothic", system-ui, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.9; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.5; font-weight: 700; }
p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
main:focus { outline: none; }
.line { display: inline-block; }
.ph { display: inline-block; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, summary { word-break: auto-phrase; }

/* 矢印つき丸ボタン */
.arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; transition: transform .3s; }
.arrow svg { width: 16px; height: 16px; }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

/* 主CTA（こん色のカプセル） */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 58px; padding: 10px 12px 10px clamp(20px, 6vw, 26px); border: 0; border-radius: 100vw; background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: clamp(14px, 4.4vw, 16px); letter-spacing: .04em; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 6px 0 rgba(41, 47, 74, .18); transition: transform .25s, box-shadow .25s; }
/* ボタンのキラン: 色が変わる層（::before）と光の筋（::after）を文字の下に重ねる */
.cta, .sticky-cta, .header-apply { position: relative; overflow: hidden; isolation: isolate; }
.cta::before, .sticky-cta::before, .header-apply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #3B4468; opacity: 0; transition: opacity .35s; }
.header-apply::before { background: #C65A67; }
.cta::after, .sticky-cta::after, .header-apply::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: -1; background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-130%) skewX(-12deg); pointer-events: none; }
@keyframes shine { from { transform: translateX(-130%) skewX(-12deg); } to { transform: translateX(260%) skewX(-12deg); } }
@media (hover: hover) and (pointer: fine) {
  .cta:hover, .header-apply:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(41, 47, 74, .2); }
  .cta:hover::before, .sticky-cta:hover::before, .header-apply:hover::before { opacity: 1; }
  .cta:hover::after, .sticky-cta:hover::after, .header-apply:hover::after { animation: shine .7s ease-out; }
}
.cta.is-shine::after { animation: shine .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .cta::after, .sticky-cta::after, .header-apply::after { display: none; } }

/* ヘッダー */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 10px; height: 66px; padding: 0 12px 0 14px; transition: background .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgba(255, 253, 247, .95); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-logo { width: auto; height: 22px; }
.brand-tag { font-size: 11px; font-weight: 700; line-height: 1.6; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 6px; white-space: nowrap; }
.gnav { display: none; }
.header-apply { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 100vw; background: var(--pink-deep); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: transform .25s; }
.menu-toggle, .menu-close { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.menu-toggle i { width: 18px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
.menu-close i { position: relative; width: 20px; height: 2px; background: transparent; }
.menu-close i::before, .menu-close i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: rotate(45deg); }
.menu-close i::after { transform: rotate(-45deg); }
.mobile-menu { margin: 0 0 0 auto; width: min(420px, 100%); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.mobile-menu::backdrop { background: rgba(41, 47, 74, .45); }
.menu-inner { display: flex; flex-direction: column; min-height: 100%; padding: 14px 24px 32px; }
.menu-close { align-self: flex-end; }
.menu-en { margin: 8px 0 12px; font-family: var(--en); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--sky-deep); }
.mobile-menu ul { border-top: 1px solid var(--line); }
.mobile-menu li a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-bottom: 1px dashed var(--line); font-weight: 700; text-decoration: none; }
.mobile-menu li a::after { content: "→"; color: var(--pink-deep); }
.menu-cta { margin-top: 28px; }

/* ヒーロー: テープで貼った写真3枚＋付せん＋手書きの見出し */
.hero { padding: 76px 20px 8px; }
.hero-board { position: relative; height: clamp(300px, 88vw, 360px); }
.pol { position: absolute; background: #fff; padding: 8px 8px 30px; box-shadow: var(--shadow); }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pol figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: var(--hand); font-size: 12px; }
.pol::before { content: ""; position: absolute; top: -10px; left: 50%; z-index: 1; width: 72px; height: 20px; transform: translateX(-50%) rotate(-4deg); background: rgba(253, 189, 126, .8); }
.hero .p1 { width: 58%; left: 0; top: 8px; transform: rotate(-4deg); }
.hero .p2 { width: 50%; right: 0; top: 34px; transform: rotate(5deg); }
.hero .p2::before { background: rgba(146, 197, 216, .85); }
.hero .p3 { width: 44%; left: 27%; top: 52%; transform: rotate(-1deg); }
.hero .p3::before { background: rgba(234, 144, 154, .8); }
.sticky-note { display: inline-block; margin-top: 18px; padding: 6px 14px; background: var(--yellow); font-family: var(--hand); font-weight: 600; font-size: 14px; transform: rotate(-2deg); box-shadow: 0 3px 6px rgba(0, 0, 0, .08); }
.hero-catch { margin-top: 12px; font-family: var(--hand); font-weight: 600; font-size: clamp(30px, 8.8vw, 58px); line-height: 1.45; letter-spacing: .02em; }
.catch-row { display: block; }
.catch-row:nth-child(3) { width: fit-content; background: linear-gradient(transparent 68%, rgba(234, 144, 154, .45) 68%) no-repeat 0 0 / 100% 100%; }
.hero-lead { margin: 14px 0 22px; font-weight: 700; font-size: 15px; line-height: 1.9; }
.hero .cta { max-width: 340px; }

/* セクション共通 */
.sec { position: relative; padding: 80px 20px; }
.tab, .label { display: inline-block; padding: 3px 14px; border-radius: 6px 6px 0 0; background: var(--sky); color: #fff; font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .15em; }
.sec h2 { margin-top: 8px; font-family: var(--hand); font-weight: 600; font-size: clamp(28px, 7.6vw, 44px); line-height: 1.45; }
.marker .line { background: linear-gradient(transparent 66%, rgba(253, 189, 126, .55) 66%); }
.sec-head { margin-bottom: 30px; }
.sec-lead { margin-top: 14px; font-weight: 700; font-size: 15px; line-height: 1.9; }

/* ディライトについて */
.about { display: grid; gap: 34px; }
.about-body { margin-top: 18px; font-size: 15px; line-height: 2; }
.about-message { position: relative; margin-top: 22px; padding: 18px 18px 18px 22px; background: #fff; box-shadow: var(--shadow); font-size: 14px; line-height: 1.9; transform: rotate(-.6deg); }
.about-message::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--pink); }
.about-photos { position: relative; height: clamp(290px, 82vw, 340px); }
.about .a1 { width: 68%; left: 0; top: 10px; transform: rotate(-3deg); }
.about .a1::before { background: rgba(162, 180, 226, .85); }
.about .a2 { width: 46%; right: 0; bottom: 0; transform: rotate(4deg); }
.about .pol img { aspect-ratio: 4 / 3; }
.policy { padding: 22px 18px; border: 2px dashed var(--sky); border-radius: 14px; background: rgba(255, 255, 255, .85); }
.policy-title { font-family: var(--hand); font-weight: 600; font-size: 20px; }
.policy-list { display: grid; gap: 12px; margin-top: 12px; }
.policy-list li { display: flex; gap: 12px; align-items: flex-start; }
.policy-list .num { flex: none; width: 30px; height: 30px; margin-top: 2px; border: 2px solid var(--pink-deep); border-radius: 50%; display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 14px; color: var(--pink-deep); transform: rotate(-8deg); }
.policy-list p { font-size: 15px; line-height: 1.8; }

/* どんなお仕事？（付せん） */
.notes { display: grid; gap: 24px; }
.note { position: relative; padding: 22px 20px 20px; box-shadow: var(--shadow); }
.note:nth-child(1) { background: var(--yellow); --r: -1.2deg; }
.note:nth-child(2) { background: #D7ECF3; --r: 1deg; }
.note:nth-child(3) { background: #F8DCDF; --r: -.8deg; }
.note:nth-child(4) { background: #E3E8F7; --r: 1.3deg; }
.note { transform: rotate(var(--r)); }
.note::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, .7); }
.note b { font-family: var(--hand); font-weight: 600; font-size: 15px; color: var(--pink-deep); }
.note h3 { margin-top: 2px; font-family: var(--hand); font-weight: 600; font-size: 21px; }
.note p { margin-top: 6px; font-size: 15px; line-height: 1.85; }

/* はたらき方（ハンコ） */
.stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stamp-card { padding: 18px 8px 14px; border: 2px dashed var(--sky); border-radius: 12px; background: #fff; text-align: center; }
.stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; border: 3px solid var(--pink-deep); border-radius: 50%; font-family: var(--hand); font-weight: 600; font-size: 32px; line-height: 1.1; color: var(--pink-deep); transform: rotate(-8deg); }
.stamp small { font-size: 13px; }
.stamp-label { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.6; }
.benefits { margin-top: 28px; padding: 22px 20px; background: #fff; box-shadow: var(--shadow); background-image: repeating-linear-gradient(transparent 0 35px, rgba(234, 144, 154, .3) 35px 36px); background-position: 0 56px; }
.benefits h3 { font-family: var(--hand); font-weight: 600; font-size: 20px; margin-bottom: 6px; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: 15px; line-height: 1.8; }
.benefits svg { flex: none; width: 20px; height: 20px; margin-top: 5px; color: var(--sky-deep); }

/* こんな方と働きたい（チェックリスト） */
.checklist { display: grid; gap: 12px; padding: 22px 20px; background: #fff; box-shadow: var(--shadow); transform: rotate(.5deg); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; font-size: 16px; line-height: 1.75; }
.checklist .box { flex: none; width: 26px; height: 26px; margin-top: 2px; border: 2px solid var(--ink); border-radius: 4px; display: grid; place-items: center; color: var(--pink-deep); }
.checklist .box svg { width: 22px; height: 22px; stroke-width: 3.2; }

/* 中間CTA */
.mid-cta { padding: 20px 20px 40px; text-align: center; }
.mid-note { display: inline-block; margin-bottom: 18px; padding: 8px 16px; background: var(--yellow); font-family: var(--hand); font-weight: 600; font-size: 16px; line-height: 1.7; transform: rotate(-1.5deg); box-shadow: 0 3px 6px rgba(0, 0, 0, .08); }
.mid-cta .cta { max-width: 340px; margin: 0 auto; }

/* はたらく場所（罫線のカード） */
.places { display: grid; gap: 22px; }
.place-card { position: relative; padding: 22px 20px 20px; background: #fff; box-shadow: var(--shadow); }
.place-card::before { content: ""; position: absolute; top: -9px; left: 24px; width: 64px; height: 18px; transform: rotate(-4deg); background: rgba(146, 197, 216, .85); }
.place-card:nth-child(2)::before { background: rgba(253, 189, 126, .85); }
.place-count { display: inline-block; padding: 0 10px; border-radius: 100vw; background: var(--pink-deep); color: #fff; font-size: 12px; font-weight: 700; }
.place-card h3 { margin-top: 6px; padding-bottom: 8px; border-bottom: 2px solid rgba(234, 144, 154, .4); font-family: var(--hand); font-weight: 600; font-size: 22px; }
.place-card p:not(.place-count) { margin-top: 8px; font-size: 15px; line-height: 1.8; }
.place-access { color: var(--sky-deep); font-weight: 700; }
/* 募集要項 */
.req-table { margin: 0; padding: 8px 20px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.req-table > div { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.req-table > div:last-child { border-bottom: 0; }
.req-table dt { margin-bottom: 4px; color: var(--sky-deep); font-size: 14px; font-weight: 700; }
.req-table dd { margin: 0; font-size: 15px; line-height: 1.85; }

/* 選考の流れ */
.steps { display: grid; gap: 16px; counter-reset: step; }
.steps li { position: relative; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px; border-radius: 22px; background: var(--white); box-shadow: 0 4px 16px rgba(41, 47, 74, .07); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 50px; bottom: -14px; width: 12px; height: 12px; border-right: 3px solid var(--sky); border-bottom: 3px solid var(--sky); transform: rotate(45deg); z-index: 1; }
.step-no { position: absolute; top: 12px; right: 16px; font-family: var(--en); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--pink-deep); }
.step-no b { margin-left: 4px; font-size: 22px; }
.step-icon { grid-row: 1 / 3; width: 72px; height: 72px; padding: 14px; border-radius: 50%; border: 5px solid #CFE6EF; color: var(--sky-deep); background: #fff; }
.steps h3 { font-size: 18px; }
.steps li p:not(.step-no) { font-size: 14px; line-height: 1.75; }

/* よくある質問 */
.faq-list { display: grid; gap: 12px; }
.faq details { border-radius: 20px; background: var(--white); box-shadow: 0 4px 16px rgba(41, 47, 74, .07); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.q, .a { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--en); font-weight: 700; font-size: 16px; }
.q { background: var(--pink-deep); color: #fff; }
.a { background: #FDF0A8; color: var(--ink); }
.faq-q { flex: 1; }
.faq-toggle { position: relative; flex: none; width: 18px; height: 18px; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 1px; background: var(--sky-deep); transition: transform .3s; }
.faq-toggle::after { transform: rotate(90deg); }
.faq details[open] .faq-toggle::after { transform: rotate(0); }
.faq-a { display: flex; gap: 12px; padding: 0 16px 18px; }
.faq-a p { padding-top: 4px; font-size: 15px; }

/* 応募フォーム */
.apply { padding-top: 40px; }
.apply-card { padding: 30px 18px 28px; border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.apply-head { margin-bottom: 26px; }
.required-note { margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); }
.form-alert { margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--error); background: #FDF0EC; color: var(--error); font-weight: 700; font-size: 14px; }
.form-alert.is-preview { border-color: var(--sky-deep); background: #EAF4F8; color: var(--sky-deep); }
.field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.field-label, .field legend { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; font-weight: 700; font-size: 15px; }
.badge { padding: 0 8px; border-radius: 6px; background: var(--error); color: #fff; font-size: 11px; line-height: 1.8; }
.badge.optional { background: #A3A8BC; }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid #D9DDE8; border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.6; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(146, 197, 216, .3); }
.field [aria-invalid="true"] { border-color: var(--error) !important; background: #FDF0EC !important; }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.field-error { margin-top: 6px; color: var(--error); font-size: 14px; font-weight: 700; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 2px solid #D9DDE8; border-radius: 14px; background: #fff; font-weight: 700; font-size: 15px; line-height: 1.5; cursor: pointer; }
.choice span { word-break: keep-all; }
.choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--sky-deep); }
.choice:has(input:checked) { border-color: var(--sky); background: #EAF4F8; }
.privacy-field .text-link { display: inline-block; margin-bottom: 10px; }
.consent { align-items: flex-start; }
.consent input { margin-top: 3px; }
.text-link { color: var(--sky-deep); font-weight: 700; text-underline-offset: 3px; }
.turnstile-wrap { margin: 0 0 18px; min-height: 65px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { margin-top: 6px; font-size: 17px; }
.submit:disabled { opacity: .7; cursor: wait; }

/* スマホ追従CTA */
.sticky-cta { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 10px 8px 24px; border-radius: 100vw; background: var(--pink-deep); color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 10px 24px rgba(41, 47, 74, .22); text-shadow: 0 1px 2px rgba(79, 110, 20, .35); }
.sticky-cta[hidden] { display: none; }

/* フッター */
.site-footer { position: relative; z-index: 1; margin-top: 40px; }
.footer-big { overflow: hidden; font-family: var(--en); font-weight: 700; font-size: clamp(48px, 14vw, 140px); line-height: 1; letter-spacing: .02em; color: rgba(146, 197, 216, .35); white-space: nowrap; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: .25em; padding-right: .25em; }
.dot { width: .3em; height: .3em; border-radius: 50%; background: rgba(234, 144, 154, .45); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.footer-inner { display: grid; gap: 28px; margin-top: 24px; padding: 40px 24px 24px; background: var(--ink); color: #E8EAF2; }
.footer-company h2 { margin-bottom: 12px; font-size: 16px; color: #fff; }
.footer-company dl { margin: 0; font-size: 14px; line-height: 1.8; }
.footer-company dl > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-company dt { color: var(--orange); }
.footer-company dd { margin: 0; }
.footer-links { display: grid; gap: 4px; font-size: 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }
.copyright { padding: 0 24px 96px; background: var(--ink); color: rgba(232, 234, 242, .7); font-family: var(--en); }

/* 完了・プライバシー */
.simple-page { position: relative; z-index: 1; padding: 108px 20px 40px; }
.simple-inner { max-width: 820px; margin: 0 auto; padding: 32px 22px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.simple-inner.narrow { max-width: 640px; text-align: center; }
.simple-inner h1 { margin-bottom: 18px; font-size: clamp(22px, 6vw, 32px); }
.policy-back { max-width: 360px; margin-top: 32px; }
.simple-inner h2 { margin: 28px 0 10px; font-size: 18px; }
.simple-inner p, .simple-inner li { font-size: 15px; }
.simple-inner ol, .simple-inner ul { padding-left: 1.4em; list-style: revert; }
.simple-inner .label { justify-content: center; }
.page-privacy .simple-inner .label { justify-content: flex-start; }
.done-mark { width: 72px; height: 72px; margin: 0 auto 16px; padding: 18px; border-radius: 50%; background: var(--pink-deep); color: #fff; }
.thanks-status { margin-bottom: 8px; font-weight: 900; color: var(--sky-deep); }
.next-box { margin-top: 24px; padding: 6px 20px 18px; border-radius: 18px; background: #FDF7EA; text-align: left; }
.next-box h2 { margin-top: 14px; }
.thanks-links { display: grid; gap: 16px; justify-items: center; margin-top: 28px; }
.thanks-links .cta { max-width: 360px; }
.page-privacy .simple-inner dl > div { display: grid; grid-template-columns: 6em 1fr; gap: 8px; }
.page-privacy .simple-inner dd { margin: 0; }

/* 入場アニメーション */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; transition-delay: calc(var(--d, 0) * .08s); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
/* 付せんは、貼ったように少し傾いたまま止まる */
.js .note[data-reveal] { transform: translateY(20px) rotate(0); }
.js .note[data-reveal].is-revealed { transform: rotate(var(--r)); }
/* ハンコは、押したようにぽんと現れる */
.js .stamp-card[data-reveal] { opacity: 1; transform: none; }
.js .stamp-card[data-reveal] .stamp { opacity: 0; transform: scale(1.6) rotate(-8deg); }
.js .stamp-card[data-reveal].is-revealed .stamp { opacity: 1; transform: rotate(-8deg); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--d) * .15s + .1s); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal], .js .note[data-reveal], .js .stamp-card[data-reveal] .stamp { opacity: 1; transition: none; } .js .note[data-reveal] { transform: rotate(var(--r)); } .js [data-reveal]:not(.note) { transform: none; } .js .stamp-card[data-reveal] .stamp { transform: rotate(-8deg); } }

@media (max-width: 439px) {
  .brand-tag { display: none; }
  .choices { grid-template-columns: 1fr; }
}

/* スマホ: 最初の画面に「応募・相談フォームへ」まで収める（写真を小さく、行間を詰める） */
@media (max-width: 599px) {
  .hero { padding-top: 76px; }
  .hero-board { height: clamp(180px, 50vw, 250px); }
  .hero .pol { padding: 5px 5px 20px; }
  .hero .pol figcaption { bottom: 2px; font-size: 11px; }
  .hero .pol::before { width: 52px; height: 16px; top: -8px; }
  .hero .p1 { width: 44%; top: 6px; }
  .hero .p2 { width: 38%; top: 20px; }
  .hero .p3 { width: 34%; left: 31%; top: 34%; }
  .sticky-note { margin-top: 26px; }
  .hero-catch { margin-top: 8px; line-height: 1.35; }
  .hero-lead { margin: 18px 0 16px; line-height: 1.75; }
}

@media (min-width: 600px) {
  .stamps { grid-template-columns: repeat(4, 1fr); }
  .notes { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
  .places { grid-template-columns: 1fr 1fr; }
  .req-table > div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; }
  .req-table dt { margin: 0; }
  .hero-board { height: 440px; max-width: 560px; margin: 0 auto; }
  .about-photos { height: 380px; max-width: 520px; }
}

@media (min-width: 900px) {
  html { scroll-padding-top: 96px; }
  .site-header { height: 80px; padding: 0 28px; }
  .brand-logo { height: 28px; }
  .gnav { display: flex; gap: 24px; margin-left: auto; font-weight: 700; font-size: 14px; }
  .gnav a { text-decoration: none; }
  .gnav a:hover { color: var(--pink-deep); }
  .header-apply { margin-left: 8px; }
  .menu-toggle { display: none; }
  .hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; width: min(1180px, 100% - 80px); margin: 0 auto; padding: 108px 0 40px; }
  .hero-board { order: 2; height: 520px; max-width: none; margin: 0; }
  .hero .p1 { width: 52%; }
  .hero .p2 { width: 46%; }
  .hero .p3 { width: 40%; top: 46%; }
  .sticky-note { margin-top: 0; }
  .hero-catch { font-size: clamp(40px, 4.4vw, 58px); }
  .hero-lead { font-size: 17px; }
  .sec { width: min(1080px, 100% - 80px); margin: 0 auto; padding: 120px 0; }
  .sec-head { margin-bottom: 44px; }
  .about { grid-template-columns: 1.1fr 1fr; column-gap: 64px; align-items: center; }
  .about-photos { max-width: none; height: 420px; }
  .policy { grid-column: 1 / -1; padding: 28px 32px; }
  .policy-list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .notes { grid-template-columns: repeat(4, 1fr); }
  .stamps { gap: 24px; }
  .benefits ul { columns: 2; column-gap: 40px; }
  .benefits li { break-inside: avoid; }
  .person { width: min(760px, 100% - 80px); }
  .mid-cta { padding: 0 0 40px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .choices { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; padding: 26px 18px; }
  .steps li:not(:last-child)::after { left: auto; right: -14px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .step-icon { grid-row: auto; }
  .faq { width: min(860px, 100% - 80px); }
  .apply { width: min(860px, 100% - 80px); }
  .apply-card { padding: 48px 56px; }
  .footer-inner { grid-template-columns: 1fr auto; padding: 56px max(40px, calc((100% - 1080px) / 2)); }
  .copyright { padding: 0 max(40px, calc((100% - 1080px) / 2)) 32px; }
  .sticky-cta { display: none !important; }
}

/* FV の遊び心（2026-11-12）: 写真をペタッと貼る／マーカーを引く／赤ペンの花まる／紙ひこうき */
.hero-text { position: relative; z-index: 1; }
.hero-catch { position: relative; }
.hero .p1 { --r: -4deg; }
.hero .p2 { --r: 5deg; }
.hero .p3 { --r: -1deg; }
.hero .pol { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; animation: pol-paste .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.hero .p1 { animation-delay: .1s; }
.hero .p2 { animation-delay: .25s; }
.hero .p3 { animation-delay: .4s; }
.hero .pol.is-wiggle { animation: pol-wiggle .6s ease both; }
@keyframes pol-paste { from { opacity: 0; transform: translateY(-18px) scale(1.08) rotate(calc(var(--r) * 2.5)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes pol-wiggle { 0%, 100% { transform: rotate(var(--r)); } 20% { transform: rotate(calc(var(--r) - 7deg)) scale(1.04); } 50% { transform: rotate(calc(var(--r) + 6deg)) scale(1.04); } 80% { transform: rotate(calc(var(--r) - 3deg)); } }
@media (hover: hover) and (pointer: fine) { .hero .pol:hover { z-index: 2; transform: rotate(0deg) scale(1.05); box-shadow: 0 14px 28px rgba(41, 47, 74, .22); } }
.catch-row:nth-child(3) { animation: marker-draw .7s ease-out .7s both; }
@keyframes marker-draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.hero-hanamaru { position: absolute; left: 4.4em; top: -.35em; width: 1.9em; height: 1.9em; overflow: visible; transform: rotate(-10deg); pointer-events: none; }
.hero-hanamaru path { fill: none; stroke: #E0564B; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .88; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hana-draw 1.3s ease-in-out 1.1s forwards; }
@keyframes hana-draw { to { stroke-dashoffset: 0; } }
.hero-plane { position: absolute; left: 178px; top: 2px; width: min(150px, calc(100% - 194px)); aspect-ratio: 150 / 44; pointer-events: none; }
.hero-plane svg { position: absolute; overflow: visible; }
.plane-trail { inset: 0; width: 100%; height: 100%; animation: trail-show 1.5s ease-in-out 1.3s both; }
.plane-trail path { fill: none; stroke: var(--sky-deep); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 5; opacity: .7; }
.plane-body { right: -4px; top: -8px; width: 24px; height: 21px; transform: rotate(-24deg); animation: plane-in 1.5s ease-in-out 1.3s both, plane-bob 3.2s ease-in-out 3s infinite; }
.plane-body path { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
@keyframes trail-show { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px -10px -10px 0); } }
@keyframes plane-in { 0% { opacity: 0; translate: -120px 26px; rotate: 20deg; } 15% { opacity: 1; } 45% { translate: -78px 22px; rotate: 60deg; } 60% { translate: -84px 6px; rotate: -70deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes plane-bob { 0%, 100% { translate: 0 0; } 50% { translate: 2px -4px; } }
@media (min-width: 900px) { .hero-plane { top: -8px; } }
@media (max-width: 899px) { .hero { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) {
  .hero .pol, .hero .pol.is-wiggle, .catch-row:nth-child(3), .plane-trail, .plane-body { animation: none; }
  .hero-hanamaru path { animation: none; stroke-dashoffset: 0; }
}
/* FV の写真の説明文字: 重なる3枚目に隠れないよう、1枚目は左寄せ・2枚目は右寄せ（2026-11-12） */
.hero .p1 figcaption { text-align: left; padding-left: 10px; }
.hero .p2 figcaption { text-align: right; padding-right: 10px; }
/* FV のリード文: 「…デイサービスで、」／「児童指導員（正社員）を…」の2行に固定（2026-11-12 ユーザー指示） */
.lead-row { display: block; white-space: nowrap; }
@media (max-width: 339px) { .lead-row { white-space: normal; } }

/* スマホ: 写真と付せんの間を広げたぶん、紙ひこうきも下げる（2026-11-12） */
@media (max-width: 599px) { .hero-plane { top: 18px; } }
/* タブレット: 3枚目の写真が付せんに重なっていたので、写真の台を高くして間をあける（2026-11-12） */
@media (min-width: 600px) and (max-width: 899px) { .hero { padding-top: 84px; } .hero-board { height: 510px; } .sticky-note { margin-top: 44px; } .hero-plane { top: 36px; } }
/* 「楽しい」を いちばん大切に。: 元のオレンジのマーカーを2行とも。画面に入ると左から引く（2026-11-12 ユーザー指示） */
#about-title .line { background: linear-gradient(transparent 66%, rgba(253, 189, 126, .55) 66%) no-repeat 0 0 / 100% 100%; transition: background-size .7s ease-out .5s; }
#about-title .line + .line { transition-delay: 1s; }
.js .about-text:not(.is-revealed) #about-title .line { background-size: 0% 100%; }
@media (prefers-reduced-motion: reduce) { #about-title .line { transition: none; background-size: 100% 100% !important; } }
/* ABOUT の本文: ひとことずつ、ぼかしから浮かび上がるようにふわっと出す（2026-11-12 ユーザー「エモーショナルにふわふわと」） */
.js .about-body .ph { opacity: 0; filter: blur(8px); transform: translateY(14px) scale(.98); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.8s cubic-bezier(.22, 1, .36, 1); }
.js .about-text.is-revealed .about-body .ph { opacity: 1; filter: blur(0); transform: none; }
.about-body .ph:nth-of-type(1) { transition-delay: .6s; }
.about-body .ph:nth-of-type(2) { transition-delay: 1s; }
.about-body .ph:nth-of-type(3) { transition-delay: 1.45s; }
.about-body .ph:nth-of-type(4) { transition-delay: 1.85s; }
.about-body .ph:nth-of-type(5) { transition-delay: 2.25s; }
.about-body .ph:nth-of-type(6) { transition-delay: 2.7s; }
@media (prefers-reduced-motion: reduce) { .js .about-body .ph { opacity: 1; filter: none; transform: none; transition: none; } }
/* 代表メッセージ: 付せん風（2026-11-12 ユーザー「付箋っぽく」）。ピンクの付せん＋上の糊の帯＋右下が少し浮いた影 */
.about-message { max-width: 440px; padding: 30px 22px 24px; background: linear-gradient(to bottom, rgba(217, 112, 124, .12) 0 16px, transparent 16px), #F8DCDF; border-bottom-right-radius: 28px 6px; box-shadow: 0 1px 2px rgba(41, 47, 74, .10), 8px 12px 14px -8px rgba(41, 47, 74, .28); transform: rotate(-1.6deg); }
.about-message::before { content: none; }
/* ABOUT の写真2枚: 画面に入ると1枚ずつペタッ、ペタッと貼る。写真が着いてからテープを貼る（2026-11-12 ユーザー指示） */
.about .a1 { --r: -3deg; }
.about .a2 { --r: 4deg; }
.js .about-photos[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .about-photos .pol { opacity: 0; }
.js .about-photos.is-revealed .pol { animation: pol-peta .65s cubic-bezier(.3, 1.4, .5, 1) both; }
.js .about-photos.is-revealed .a1 { animation-delay: .15s; }
.js .about-photos.is-revealed .a2 { animation-delay: .6s; }
@keyframes pol-peta {
  0% { opacity: 0; transform: translate(-8px, -44px) scale(1.16) rotate(calc(var(--r) * 3)); box-shadow: 0 26px 30px rgba(41, 47, 74, .18); }
  55% { opacity: 1; transform: translateY(2px) scale(.97) rotate(var(--r)); }
  78% { transform: scale(1.01) rotate(var(--r)); }
  100% { opacity: 1; transform: rotate(var(--r)); }
}
.js .about-photos .pol::before { transform: translateX(-50%) rotate(-4deg) scaleX(0); transform-origin: left center; }
.js .about-photos.is-revealed .pol::before { animation: tape-peta .28s ease-out both; }
.js .about-photos.is-revealed .a1::before { animation-delay: .6s; }
.js .about-photos.is-revealed .a2::before { animation-delay: 1.05s; }
@keyframes tape-peta { from { transform: translateX(-50%) rotate(-4deg) scaleX(0); } to { transform: translateX(-50%) rotate(-4deg) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .js .about-photos .pol, .js .about-photos.is-revealed .pol { opacity: 1; animation: none; transform: rotate(var(--r)); }
  .js .about-photos .pol::before, .js .about-photos.is-revealed .pol::before { animation: none; transform: translateX(-50%) rotate(-4deg); }
}
/* 仕事内容の付せん: 手描き風イラスト＋ペタッと貼る動き（2026-11-12 ユーザー指示） */
.note-illust { display: block; width: 112px; height: 78px; margin: -4px 0 4px auto; }
.note-illust svg { width: 100%; height: 100%; overflow: visible; }
.note-illust path, .note-illust rect, .note-illust circle, .note-illust ellipse { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.note-illust .f-white { fill: #fff; } .note-illust .f-sky { fill: #BFE0EC; } .note-illust .f-pink { fill: #F4B9C0; }
.note-illust .f-yellow { fill: #FBE27A; } .note-illust .f-orange { fill: #FDBD7E; }
.note-illust .ac-sky { stroke: var(--sky-deep); } .note-illust .ac-pink { stroke: var(--pink-deep); }
.note b { display: block; margin-top: -30px; }
.note h3 { padding-right: 0; }
.js .note[data-reveal] { opacity: 0; transform: rotate(var(--r)); transition: none; }
.js .note[data-reveal].is-revealed { animation: pol-peta .65s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--d, 0) * .2s); }
.js .note[data-reveal]::before { transform: translateX(-50%) rotate(-3deg) scaleX(0); transform-origin: left center; }
.js .note[data-reveal].is-revealed::before { animation: tape-peta-note .28s ease-out both; animation-delay: calc(var(--d, 0) * .2s + .45s); }
@keyframes tape-peta-note { from { transform: translateX(-50%) rotate(-3deg) scaleX(0); } to { transform: translateX(-50%) rotate(-3deg) scaleX(1); } }
.js .note[data-reveal].is-revealed .note-illust { animation: illust-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * .2s + .55s); }
@keyframes illust-pop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .note[data-reveal], .js .note[data-reveal].is-revealed { opacity: 1; animation: none; transform: rotate(var(--r)); }
  .js .note[data-reveal]::before, .js .note[data-reveal].is-revealed::before { animation: none; transform: translateX(-50%) rotate(-3deg); }
  .js .note[data-reveal].is-revealed .note-illust { animation: none; }
}
#work { overflow-x: clip; }
#about { overflow-x: clip; }
/* FV の見出し: Yusei Magic（太いマーカーの手書き）＋右肩上がり＋1文字ずつ高さをゆらす（2026-11-12 ユーザー選択 A） */
.hero-catch { font-family: "Yusei Magic", var(--hand); font-weight: 400; }
.hero-catch .catch-row { transform: rotate(-3deg); transform-origin: left center; }
.hero-catch .ch { display: inline-block; transform: translateY(var(--y)) rotate(var(--rt)); }
