/*
Theme Name: イチヨン 神バイトLP
Theme URI: https://example.com
Author: 株式会社TickTack
Description: 時給1,400円以上の“神バイト”を集めたランディングページ用テーマ「イチヨン」。求人一覧をファーストビューにし、募集中の求人はカードから詳細ページ→LINE登録へ誘導します。運営：株式会社TickTack。外観→テーマ→アップロードで導入できます。掲載中の求人はサンプル（掲載イメージ）です。
Version: 3.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ichiyon-lp
*/

:root{
  --paper:#F4F1E8; --card:#FFFDF7; --ink:#1C2A22; --ink2:#47554C; --muted:#7A8479;
  --line:#DFD9C8; --line2:#EAE5D6; --green:#175136; --green2:#1E6B47; --deep:#16241C;
  --gold:#A8842E; --gold2:#C9A24B; --gold-soft:#F4EBD3; --green-soft:#E4EDE4;
  --line-green:#06C755; --num:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ background:#e7e3d6; color:var(--ink); font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif; line-height:1.7; }
.num{font-family:var(--num); font-variant-numeric:tabular-nums;}
.app{ max-width:460px; margin:0 auto; background:var(--paper); min-height:100vh; position:relative; padding-bottom:0; box-shadow:0 0 40px rgba(0,0,0,.12); }

.appbar{ position:sticky; top:0; z-index:20; background:var(--deep); color:#F3EEDB; padding:11px 16px; display:flex; align-items:center; justify-content:space-between; }
.appbar .logo{ font-weight:900; letter-spacing:.16em; font-size:1.1rem; }
.appbar .tag{ font-size:.62rem; font-weight:700; letter-spacing:.04em; color:var(--gold2); }

.intro{ padding:22px 16px 6px; }
.intro .eyebrow{ font-size:.7rem; font-weight:900; letter-spacing:.14em; color:var(--gold); }
.intro h1{ font-size:1.55rem; font-weight:900; margin:6px 0 8px; letter-spacing:.01em; line-height:1.34; }
.intro h1 .kami{ color:var(--gold2); }
.intro p{ font-size:.82rem; color:var(--ink2); margin:0; }
.intro .chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.chip{ font-size:.7rem; font-weight:700; color:var(--green); background:var(--green-soft); border-radius:999px; padding:5px 11px; }

.joblist{ padding:12px 16px 8px; display:flex; flex-direction:column; gap:14px; }
.jc{ background:var(--card); border:1px solid var(--line2); border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(28,42,34,.07); transition:transform .15s ease; }
.jc.active{ cursor:pointer; }
.jc.active:active{ transform:scale(.99); }
.jc.top{ border:1.5px solid var(--gold2); box-shadow:0 10px 26px rgba(168,132,46,.18); }
.jc__art{ position:relative; height:132px; overflow:hidden; background:linear-gradient(120deg,#1B5C3C,#2E7D52); }
.jc__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jc__art .shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,24,18,.05),rgba(16,24,18,.55)); }
.jc__art .cat{ position:absolute; left:12px; bottom:10px; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.08em; z-index:2; }
.jc__art .pin{ position:absolute; right:9px; top:9px; z-index:5; background:#0FA355; color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.08em; border-radius:999px; padding:5px 13px 5px 11px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(15,163,85,.5); }
.jc__art .pin::before{ content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:pinpulse 1.6s infinite; }
@keyframes pinpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75); } 70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce){ .jc__art .pin::before{ animation:none; } }
.jc__body{ padding:13px 15px 15px; }
.jc__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.jc__title{ font-size:1.02rem; font-weight:900; margin:0; line-height:1.45; }
.jc__wage{ text-align:right; flex:0 0 auto; }
.jc__wage b{ font-family:var(--num); font-weight:700; font-size:1.5rem; color:var(--green); line-height:1; }
.jc__wage b small{ font-size:.85rem; }
.jc__wage span{ display:block; font-size:.58rem; color:var(--muted); font-weight:700; letter-spacing:.08em; margin-top:2px; }
.jc__perks{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.perk{ font-size:.68rem; font-weight:800; border-radius:8px; padding:4px 9px; }
.perk.trans{ color:var(--gold); background:var(--gold-soft); }
.perk.bonus{ color:#B23A2E; background:#FBE7E2; }
.jc__meta{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:10px; font-size:.76rem; color:var(--ink2); }
.jc__more{ margin-top:11px; display:flex; align-items:center; justify-content:space-between; border-top:1px dashed var(--line); padding-top:10px; }
.jc__more span{ font-size:.78rem; font-weight:800; color:var(--green); }
.jc__more .arw{ color:var(--gold); font-weight:900; }
/* closed jobs */
.jc.closed{ box-shadow:0 4px 12px rgba(0,0,0,.05); }
.jc.closed .jc__art{ filter:grayscale(.55) brightness(.97); }
.jc.closed .jc__title,.jc.closed .jc__wage b{ color:var(--muted); }
.ribbon{ position:absolute; top:0; right:0; width:82px; height:82px; overflow:hidden; z-index:6; pointer-events:none; }
.ribbon span{ position:absolute; top:16px; right:-26px; width:120px; transform:rotate(45deg); background:#FF1414; color:#fff; text-align:center; font-size:.68rem; font-weight:900; letter-spacing:.14em; padding:4px 0; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.jc__end{ margin-top:11px; border-top:1px dashed var(--line); padding-top:10px; font-size:.78rem; font-weight:800; color:var(--muted); text-align:center; }

.view{ display:none; }
.view.is-active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.back{ background:none; border:0; color:var(--green); font-weight:800; font-size:.85rem; padding:12px 16px 4px; cursor:pointer; }
.dhero{ position:relative; height:200px; overflow:hidden; margin:0 16px; border-radius:18px; background:linear-gradient(120deg,#1B5C3C,#2E7D52); }
.dhero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dhero .shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,24,18,.05),rgba(16,24,18,.5)); }
.dhero .cat{ position:absolute; left:14px; bottom:12px; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.1em; }
.dbody{ padding:16px; }
.dbody h2{ font-size:1.4rem; font-weight:900; margin:0 0 6px; line-height:1.4; }
.dlead{ font-size:.86rem; color:var(--ink2); margin:0 0 14px; line-height:1.8; }
.dwage{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; background:var(--green-soft); border-radius:14px; padding:13px 15px; margin-bottom:14px; }
.dwage b{ font-family:var(--num); font-weight:700; font-size:2rem; color:var(--green); line-height:1; }
.dwage b small{ font-size:1rem; }
.dwage .u{ font-size:.72rem; color:var(--ink2); font-weight:700; }
.dwage .tr{ font-size:.8rem; font-weight:800; color:var(--gold); }
.dbonus{ display:flex; gap:13px; align-items:center; background:linear-gradient(135deg,#C4160B,#E8431F); color:#fff; border-radius:16px; padding:15px 17px; margin-bottom:18px; box-shadow:0 10px 26px rgba(196,22,11,.30); }
.dbonus__ic{ flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.dbonus__ic svg{ width:26px; height:26px; }
.dbonus__l{ font-size:.72rem; font-weight:800; letter-spacing:.04em; color:#FFE1D8; }
.dbonus__a{ font-size:1rem; font-weight:900; line-height:1.35; margin:2px 0; }
.dbonus__a b{ font-size:1.75rem; font-weight:900; }
.dbonus__s{ font-size:.7rem; color:#FFD9CE; font-weight:600; }
.dtable{ border:1px solid var(--line2); border-radius:14px; overflow:hidden; margin-bottom:16px; }
.dtable .row{ display:flex; gap:12px; padding:11px 14px; font-size:.86rem; }
.dtable .row+.row{ border-top:1px solid var(--line2); }
.dtable .row .k{ color:var(--muted); font-weight:700; font-size:.76rem; letter-spacing:.05em; flex:0 0 76px; }
.dtable .row .v{ color:var(--ink); font-weight:600; }
.ddesc{ font-size:.9rem; color:var(--ink2); line-height:1.9; margin:0 0 16px; }
.dreason{ font-size:.82rem; font-weight:700; color:var(--gold); background:var(--gold-soft); border-radius:12px; padding:11px 14px; line-height:1.6; margin-bottom:22px; }
.secphoto{ width:100%; height:150px; object-fit:cover; border-radius:14px; margin:2px 0 14px; background:var(--green-soft); }

/* rich sections */
.sec{ margin-top:24px; }
.sec h3{ font-size:1.08rem; font-weight:900; color:var(--ink); margin:0 0 12px; padding-left:11px; border-left:4px solid var(--gold2); }
.ulist{ list-style:none; padding:0; margin:0; }
.ulist li{ position:relative; padding:6px 0 6px 22px; font-size:.86rem; color:var(--ink2); line-height:1.7; }
.ulist li::before{ content:''; position:absolute; left:3px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--green2); }
.rwtable{ border:1px solid var(--line2); border-radius:12px; overflow:hidden; }
.rwtable .r{ display:flex; }
.rwtable .r+.r{ border-top:1px solid var(--line2); }
.rwtable .r .k{ flex:0 0 96px; background:var(--green-soft); color:var(--green); font-weight:800; font-size:.76rem; padding:11px 12px; display:flex; align-items:center; gap:6px; }
.rwtable .r .k svg{ width:15px; height:15px; }
.rwtable .r .v{ padding:11px 12px; font-size:.84rem; color:var(--ink); line-height:1.6; }
.note{ font-size:.74rem; color:var(--muted); line-height:1.7; margin-top:9px; }

/* feature tiles */
.feat{ display:flex; gap:9px; margin:2px 0 6px; }
.feat__i{ flex:1; background:var(--card); border:1px solid var(--line2); border-radius:14px; padding:14px 6px; text-align:center; }
.feat__ic{ width:34px; height:34px; margin:0 auto 7px; color:var(--green); }
.feat__ic svg{ width:100%; height:100%; }
.feat__i span{ font-size:.73rem; font-weight:800; color:var(--ink2); }

/* step flow */
.flow{ display:flex; align-items:flex-start; gap:4px; margin-top:14px; }
.flow__s{ flex:1; text-align:center; }
.flow__ic{ width:48px; height:48px; margin:0 auto 7px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; }
.flow__ic svg{ width:25px; height:25px; }
.flow__s span{ font-size:.72rem; font-weight:700; color:var(--ink2); line-height:1.4; display:block; }
.flow__a{ color:var(--gold); font-weight:900; align-self:center; padding-top:14px; }

/* reward breakdown */
.reward{ background:var(--gold-soft); border:1px solid #E8D9A8; border-radius:14px; padding:14px 16px; margin-top:12px; }
.reward__t{ font-size:.78rem; font-weight:800; color:var(--gold); letter-spacing:.04em; margin-bottom:8px; }
.reward__r{ display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; font-size:.84rem; color:var(--ink2); }
.reward__r b{ font-family:var(--num); font-weight:700; color:var(--ink); font-size:1.05rem; }
.reward__sum{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid #E8D9A8; margin-top:4px; padding-top:9px; font-weight:800; color:var(--ink); font-size:.85rem; }
.reward__sum b{ font-family:var(--num); font-weight:700; color:var(--green); font-size:1.55rem; }
.reward__gift{ margin-top:11px; background:#fff; border-radius:10px; padding:10px 12px; font-size:.83rem; font-weight:800; color:#B23A2E; text-align:center; display:flex; align-items:center; justify-content:center; gap:7px; }
.reward__gift svg{ width:20px; height:20px; }
.reward__gift b{ font-family:var(--num); }

/* perk icon list */
.perklist{ list-style:none; padding:0; margin:0; }
.perklist li{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; }
.perklist li+li{ border-top:1px solid var(--line2); }
.perklist .pi{ flex:0 0 34px; width:34px; height:34px; border-radius:9px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; }
.perklist .pi svg{ width:19px; height:19px; }
.perklist .pt{ font-size:.85rem; color:var(--ink2); line-height:1.6; }
.perklist .pt b{ color:var(--ink); }

/* application steps */
.steps{ counter-reset:st; list-style:none; padding:0; margin:6px 0 0; }
.steps li{ counter-increment:st; position:relative; padding:0 0 18px 46px; }
.steps li:last-child{ padding-bottom:0; }
.steps li::before{ content:counter(st); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; font-family:var(--num); }
.steps li b{ display:block; font-size:.92rem; color:var(--ink); }
.steps li span{ font-size:.82rem; color:var(--ink2); }

/* faq */
.faq .q{ font-weight:800; color:var(--ink); font-size:.87rem; margin-top:15px; padding-left:20px; position:relative; }
.faq .q::before{ content:'Q'; position:absolute; left:0; color:var(--gold); font-family:var(--num); font-weight:700; }
.faq .a{ font-size:.83rem; color:var(--ink2); line-height:1.85; margin-top:5px; padding-left:20px; position:relative; }
.faq .a::before{ content:'A'; position:absolute; left:0; color:var(--green2); font-family:var(--num); font-weight:700; }

/* LINE CTA */
.linecard{ background:var(--green-soft); border:1px solid #CFE0CF; border-radius:18px; padding:19px 16px; text-align:center; margin-top:26px; }
.linecard__h{ font-weight:900; font-size:1.1rem; color:var(--ink); margin-bottom:4px; }
.linecard__s{ font-size:.8rem; color:var(--ink2); margin-bottom:14px; }
.line-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; background:var(--line-green); color:#fff; font-weight:900; font-size:1.02rem; letter-spacing:.02em; border:0; border-radius:14px; padding:16px; text-decoration:none; box-shadow:0 8px 20px rgba(6,199,85,.35); }
.line-btn svg{ width:22px; height:22px; }

.corp{ background:var(--deep); color:#C4CDB9; margin-top:20px; padding:22px 18px 26px; }
.corp .h{ color:#EDE9D8; font-weight:800; font-size:.92rem; letter-spacing:.06em; margin-bottom:8px; }
.corp p{ font-size:.76rem; line-height:1.9; margin:0 0 8px; }
.corp .fine{ color:#8A977F; font-size:.72rem; margin-top:8px; }
.footnote{ text-align:center; color:var(--muted); font-size:.68rem; padding:16px 16px 4px; line-height:1.7; }