.hn-jobs,.hn-confirm{color:#203c36;font-family:system-ui,sans-serif;line-height:1.7}
.hn-filters{
    display:flex;
    gap: 6px;
    align-items: end;
    flex-wrap: wrap;
    margin: 0px 0 24px;
    padding: 20px;
    font-size: 0.9em;
    background: #ffffff69;
}
.hn-filters label{display:grid;gap:6px;flex:1;min-width:180px}
.hn-jobs input,.hn-jobs select{padding:12px;border:1px solid #a8bcb4;border-radius:8px;width:100%;box-sizing:border-box;background:#fff;color:#203c36;font:inherit}
.hn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.hn-card{
    /* border:1px solid #d7e4dd; */
    background:#fff;padding:24px;border-radius:12px;overflow-wrap:anywhere}
.hn-card h3,.hn-card h1{margin:0 0 16px;font-size:1.3rem}.hn-company,.hn-meta{font-size:.85rem;color:#49675e}
.hn-card h1 {
    margin: 0 0 16px;
    font-size: 1.3rem;
    text-align: center;
    border-bottom: 1px solid #dadfc9;
}
.hn-details{
    grid-template-columns: 8em 1fr;
    gap: 6px;
    font-size: 11px;
    background: #f7fbf8;
    padding: 10px;
}.hn-details dt{font-weight:700}.hn-details dd{margin:0}
.hn-button,.hn-jobs button,.hn-confirm button{display:block;border:1px solid #246c54;border-radius:8px;background:#246c54;color:#fff;padding:12px 18px;text-decoration:none;font:inherit;cursor:pointer;margin: 1em auto 0;
    width: max-content;}
.hn-jobs .hn-reset,.hn-confirm .hn-secondary{background:#fff;color:#246c54}
.hn-jobs :focus-visible,.hn-confirm :focus-visible{outline:3px solid #d58416;outline-offset:3px}
.hn-confirm{background:#f2f7f3;margin:0;padding:32px 16px}.hn-confirm main{max-width:660px;margin:auto}.hn-actions{display:flex;gap:12px;flex-wrap:wrap}
.hn-jobs [hidden]{display:none!important}
@media(max-width:600px){.hn-card{padding:18px}.hn-actions{display:grid}.hn-filters{display:grid}.hn-confirm{padding:16px}}
/* LPはLINE内ブラウザでも通常の縦スクロールを使う。固定高・外部ウィンドウに依存しない。 */
/* 一覧の背景は薄いグリーン、案件カードは上の.hn-cardで白を維持する。 */
body.hn-lp{margin:0;background:#edf6ee !important;color:#203c36;min-height:100vh}
/* 求人一覧・選択レイヤーと同じ幅。余白を含めて430px以内に収める。 */
.hn-lp-main{box-sizing:border-box;width:100%;max-width:430px;margin:0 auto;padding:24px 16px;padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
.hn-lp .hn-jobs input,.hn-lp .hn-jobs select,.hn-lp .hn-jobs button{
    font-size: 13px;
    min-height: 47px;
}
.hn-lp .hn-jobs h2{margin:0 0 12px;background:none;border:0;padding:0;font-size:1.55rem}
/* sc-jobsと同じ文字の階層に揃える。検索入力の16pxは維持し、確認・応募画面には適用しない。 */
.hn-jobs{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;font-size:14px;line-height:1.65}
.hn-jobs .hn-card{font-size:12px;line-height:1.65}
.hn-jobs .hn-card h3{font-size:18px;line-height:1.5;margin:0 0 12px}
.hn-jobs .hn-company{font-size:15px;line-height:1.5;margin:0 0 8px}
.hn-jobs .hn-meta{font-size:11px;line-height:1.55}
.hn-jobs .hn-card p{margin-top:0;margin-bottom:12px}
.hn-jobs .hn-details{margin:12px 0;gap:6px 8px}
.hn-jobs .hn-card .hn-button{font-size:14px;line-height:1.5}
/* 独自案件の印は右上に小さく置き、企業名との重なりを避ける。 */
.hn-jobs .hn-card--internal{position:relative;padding-top:44px}
.hn-exclusive{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;gap:4px;font-size:10px;line-height:1.4;color:#49675e}
.hn-exclusive img{display:block;width:38px;height:14px;object-fit:contain}
/* sc-jobsの丸型ボタンに合わせ、画面下端と最後の案件に余白を確保する。 */
.hn-lp .hn-lp-main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.hn-jobs-link{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;width:56px;height:56px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;text-decoration:none;box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);transition:transform .2s,box-shadow .2s}
.hn-jobs-link:visited,.hn-jobs-link:hover{color:#fff;text-decoration:none}
.hn-jobs-link span{font-size:11px;line-height:1.3}
.hn-jobs-link:hover{transform:scale(1.1);box-shadow:0 20px 25px -5px rgb(0 0 0 / .1)}
.hn-jobs-link:active{transform:scale(.95)}
.hn-jobs-link:focus-visible{outline:3px solid #d58416;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.hn-jobs-link{transition:none}}

/* 内職応募は既存の求人応募と同じ項目を、スマートフォンでも入力できる幅で表示する。 */
.hn-application{display:grid;gap:6px;margin:24px 0}
.hn-application input,.hn-application select,.hn-application textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #a8bcb4;border-radius:8px;font:inherit;background:white}
.hn-application .hn-consent input{width:auto}
.hn-pre-line{white-space:pre-line}