@import url('./fonts.css');

/* 真似元: サッポロビール採用サイト sapporobeer.jp/recruit/
   - 上ナビ: 左に★ロゴ+SAPPORO RECRUITMENT SITE. + メインナビ + サブナビ
   - 右側に固定縦タブ MY PAGE / ENTRY
   - 大きなビジュアル領域(空白)
   - SAPPORO GROUP TOPICS 横スクロールカード
   - 大型黒CTA 2列 MY PAGE / ENTRY
   - 黒フッター 5列 */
:root{
  --p02-bg:#fff;
  --p02-ink:#1a1a1a;
  --p02-ink-soft:#4a4a4a;
  --p02-mute:#888;
  --p02-line:#e0e0e0;
  --p02-dark:#1c1c1c;
  --p02-darker:#0e0e0e;
  --p02-yellow:#FFC627;
  --p02-paper:#F5F5F2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--p02-bg);color:var(--p02-ink);font-family:var(--p02-font-body);font-weight:400;font-size:14px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* TOP HEADER: 細い上ナビ(お客様サポート / 飲食店向け / English …) */
.p02-topbar{background:#fff;border-bottom:1px solid var(--p02-line);font-size:11.5px;padding:6px 24px;display:flex;justify-content:flex-end;align-items:center;gap:22px}
.p02-topbar a{color:var(--p02-ink-soft)}
.p02-topbar a::before{content:"";display:inline-block;width:14px;height:14px;background:#eee;border-radius:50%;margin-right:6px;vertical-align:-3px}

/* MAIN NAV (黄色★ロゴ + 商品情報 etc) */
.p02-mainnav{background:#fff;padding:16px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-bottom:1px solid var(--p02-line)}
.p02-mainnav__brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.p02-mainnav__star{width:34px;height:34px;background:var(--p02-yellow);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--p02-ink)}
.p02-mainnav__brand strong{font-family:var(--p02-font-display);font-weight:900;font-size:18px;letter-spacing:.04em;color:var(--p02-ink)}
.p02-mainnav__menu{display:flex;gap:24px;justify-content:center;font-size:13px}
.p02-mainnav__menu a{color:var(--p02-ink);font-weight:500}
.p02-mainnav__menu a:hover{color:#d4a017}
.p02-mainnav__util{display:flex;gap:10px}
.p02-mainnav__util a{padding:8px 14px;border:1px solid var(--p02-line);font-size:11.5px;color:var(--p02-ink);background:#fff}

/* SUB NAV (SAPPORO RECRUITMENT SITE.) */
.p02-subnav{background:#fff;padding:10px 24px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;border-bottom:1px solid var(--p02-line)}
.p02-subnav__title{font-family:var(--p02-font-display);font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--p02-ink);display:flex;align-items:center;gap:14px}
.p02-subnav__title::before{content:"★";color:var(--p02-yellow)}
.p02-subnav__menu{display:flex;gap:24px;justify-content:flex-end;font-size:13px}
.p02-subnav__menu a{color:var(--p02-ink)}
.p02-subnav__menu a[aria-current]{font-weight:700;border-bottom:2px solid var(--p02-yellow);padding-bottom:2px}

/* 右側固定タブ MY PAGE / ENTRY */
.p02-floattabs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:4px}
.p02-floattabs a{background:var(--p02-darker);color:#fff;padding:18px 14px;writing-mode:vertical-rl;font-family:var(--p02-font-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-align:center}
.p02-floattabs a::after{content:"";display:block;width:8px;height:1px;background:var(--p02-yellow);margin:6px auto 0}
@media (max-width:880px){.p02-floattabs{display:none}}

/* HERO (大きな写真領域) */
.p02-hero{background:var(--p02-paper);padding:0;position:relative}
.p02-hero__plate{aspect-ratio:21/9;overflow:hidden;background:var(--p02-paper);position:relative}
.p02-hero__plate img{width:100%;height:100%;object-fit:cover}
.p02-hero__caption{position:absolute;left:8%;bottom:14%;color:#fff;font-family:var(--p02-font-body);max-width:560px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.p02-hero__caption h1{font-family:var(--p02-font-display);font-weight:900;font-size:clamp(32px,4vw,52px);line-height:1.2;margin:0 0 12px;color:#fff}
.p02-hero__caption p{font-size:14px;line-height:1.85;color:#fff;margin:0}

/* TOPICS — カード横並び5枚 */
.p02-topics{padding:60px 24px;background:#fff}
.p02-topics__head{max-width:1200px;margin:0 auto 24px;display:flex;align-items:baseline;gap:12px}
.p02-topics__head h2{font-family:var(--p02-font-display);font-weight:900;font-size:28px;letter-spacing:.04em;margin:0;color:var(--p02-ink)}
.p02-topics__head small{font-family:var(--p02-font-display);font-size:11px;color:var(--p02-mute);letter-spacing:.16em}
.p02-topics__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1200px;margin:0 auto}
.p02-topic{display:block;text-decoration:none;color:inherit}
.p02-topic__plate{aspect-ratio:1/1;overflow:hidden;background:var(--p02-paper);margin-bottom:10px}
.p02-topic__plate img{width:100%;height:100%;object-fit:cover}
.p02-topic__date{font-family:var(--p02-font-display);font-size:11px;color:var(--p02-yellow);font-weight:700;margin:0 0 4px}
.p02-topic__title{font-size:12.5px;line-height:1.55;color:var(--p02-ink);margin:0;font-weight:500}
.p02-topics__dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.p02-topics__dots span{width:8px;height:8px;border-radius:50%;background:#ccc}
.p02-topics__dots span:first-child{background:var(--p02-ink)}
.p02-topics__more{display:block;margin:24px auto 0;background:var(--p02-yellow);color:var(--p02-ink);padding:14px 36px;width:fit-content;font-family:var(--p02-font-body);font-weight:700;font-size:13px}
@media (max-width:980px){.p02-topics__grid{grid-template-columns:repeat(2,1fr)}}

/* CTA BLOCKS: MY PAGE / ENTRY */
.p02-cta{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--p02-darker)}
.p02-cta a{background:var(--p02-dark);color:#fff;padding:48px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:background .2s}
.p02-cta a:hover{background:#2a2a2a}
.p02-cta a h2{font-family:var(--p02-font-display);font-weight:900;font-size:36px;letter-spacing:.06em;margin:0;color:#fff}
.p02-cta a p{font-size:12.5px;color:#ccc;margin:0}
@media (max-width:680px){.p02-cta{grid-template-columns:1fr}}

/* FOOTER 5列 (COMPANY / WORK & PEOPLE / CAREER / RECRUIT / EVENT) */
.p02-foot{background:var(--p02-darker);color:#ccc;padding:60px 36px 24px}
.p02-foot__title{max-width:1280px;margin:0 auto 32px;font-family:var(--p02-font-display);font-weight:900;font-size:14px;letter-spacing:.14em;color:#fff;display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid #2a2a2a}
.p02-foot__title::before{content:"★";color:var(--p02-yellow)}
.p02-foot__cols{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.p02-foot__col h4{font-family:var(--p02-font-display);font-weight:900;font-size:13px;color:#fff;margin:0 0 14px;letter-spacing:.06em}
.p02-foot__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.p02-foot__col a{font-size:12px;color:#ccc;text-decoration:none}
.p02-foot__col a:first-child{font-weight:700;color:#fff}
.p02-foot__col a:hover{color:var(--p02-yellow)}
.p02-foot__bot{max-width:1280px;margin:36px auto 0;padding-top:18px;border-top:1px solid #2a2a2a;display:grid;grid-template-columns:1fr auto;gap:18px;font-size:11px;color:#888;align-items:center}
.p02-foot__bot__star{display:flex;justify-content:center;margin-top:18px;color:var(--p02-yellow);font-size:24px}
@media (max-width:980px){.p02-foot__cols{grid-template-columns:1fr 1fr}}

.p02-skip{position:absolute;left:-9999px;top:0;background:var(--p02-darker);color:#fff;padding:8px 14px}
.p02-skip:focus{left:14px;top:14px;z-index:100}

/* ============ 下層ページ共通(サッポロビール風) ============ */
.p02-page{max-width:1100px;margin:0 auto;padding:60px 24px}
.p02-page__crumb{font-size:11.5px;color:var(--p02-mute);margin:0 0 18px;letter-spacing:.06em}
.p02-page__crumb a{color:var(--p02-mute)}
.p02-page__h{display:flex;align-items:baseline;gap:18px;margin:0 0 28px;padding-bottom:18px;border-bottom:4px solid var(--p02-yellow)}
.p02-page__h h1{font-family:var(--p02-font-display);font-weight:900;font-size:clamp(36px,5vw,56px);line-height:1;color:var(--p02-ink);margin:0;letter-spacing:.04em}
.p02-page__h small{font-family:var(--p02-font-body);font-size:14px;color:var(--p02-ink-soft)}
.p02-page__lead{font-size:14.5px;line-height:1.85;color:var(--p02-ink-soft);margin:0 0 36px;max-width:64ch}

.p02-jobs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.p02-jobcard{background:#fff;border:1px solid var(--p02-line);text-decoration:none;color:var(--p02-ink);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.p02-jobcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px -16px rgba(0,0,0,.25)}
.p02-jobcard__plate{aspect-ratio:16/10;overflow:hidden;background:#eee;position:relative}
.p02-jobcard__plate img{width:100%;height:100%;object-fit:cover}
.p02-jobcard__plate::after{content:"★";position:absolute;top:10px;right:10px;color:var(--p02-yellow);font-size:18px;text-shadow:0 0 4px rgba(0,0,0,.3)}
.p02-jobcard__body{padding:20px 22px}
.p02-jobcard__code{font-family:var(--p02-font-display);font-size:11px;color:var(--p02-yellow);font-weight:700;letter-spacing:.14em;margin:0 0 6px}
.p02-jobcard__title{font-family:var(--p02-font-body);font-weight:700;font-size:18px;color:var(--p02-ink);margin:0 0 6px;line-height:1.4}
.p02-jobcard__sub{font-size:13px;color:var(--p02-ink-soft);margin:0 0 12px;line-height:1.75}
.p02-jobcard__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--p02-ink-soft);padding-top:12px;border-top:1px solid var(--p02-line)}
.p02-jobcard__meta b{color:var(--p02-ink)}
@media (max-width:880px){.p02-jobs__grid{grid-template-columns:1fr}}

.p02-job__hero{background:var(--p02-paper);padding:48px 0;margin-bottom:48px;border-bottom:4px solid var(--p02-yellow)}
.p02-job__hero__inner{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.p02-job__hero__plate{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.p02-job__hero__plate img{width:100%;height:100%;object-fit:cover}
.p02-job__hero__code{font-family:var(--p02-font-display);font-weight:900;font-size:14px;letter-spacing:.16em;color:var(--p02-yellow);margin:0 0 14px}
.p02-job__hero__title{font-family:var(--p02-font-body);font-weight:900;font-size:clamp(28px,3.6vw,42px);line-height:1.25;color:var(--p02-ink);margin:0 0 14px}
.p02-job__hero__sub{font-size:14.5px;line-height:1.85;color:var(--p02-ink-soft);margin:0 0 22px}
.p02-job__hero__meta{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;font-size:13.5px;padding-top:18px;border-top:1px solid var(--p02-line)}
.p02-job__hero__meta dt{font-family:var(--p02-font-display);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--p02-ink-soft);text-transform:uppercase}
.p02-job__hero__meta dd{margin:0;color:var(--p02-ink);font-weight:500}
@media (max-width:880px){.p02-job__hero__inner{grid-template-columns:1fr}}

.p02-job__sec{max-width:1100px;margin:0 auto;padding:0 24px 48px}
.p02-job__sec__head{font-family:var(--p02-font-body);font-weight:900;font-size:20px;color:var(--p02-ink);margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--p02-ink);display:flex;align-items:center;gap:10px}
.p02-job__sec__head::before{content:"★";color:var(--p02-yellow);font-size:16px}
.p02-job__sec p{font-size:14.5px;line-height:1.95;color:var(--p02-ink);margin:0 0 14px}
.p02-job__sec ul{padding-left:1.4em;margin:0;font-size:14.5px;line-height:1.95}

.p02-day{display:grid;grid-template-columns:120px 1fr;gap:0;border:1px solid var(--p02-line);background:#fff}
.p02-day__time{background:var(--p02-darker);color:#fff;padding:16px;border-bottom:1px solid var(--p02-darker);font-family:var(--p02-font-display);font-weight:900;font-size:16px;letter-spacing:.04em;display:flex;align-items:center}
.p02-day__body{padding:16px 22px;border-bottom:1px solid var(--p02-line)}
.p02-day__body h4{font-weight:700;font-size:14.5px;margin:0 0 4px}
.p02-day__body p{font-size:13px;color:var(--p02-ink-soft);margin:0}
.p02-day__row{display:contents}
.p02-day__row:last-child .p02-day__time,.p02-day__row:last-child .p02-day__body{border-bottom:0}

.p02-reqtable{width:100%;border-collapse:collapse;border-top:4px solid var(--p02-yellow);font-size:14px}
.p02-reqtable tr{border-bottom:1px solid var(--p02-line)}
.p02-reqtable th{font-family:var(--p02-font-display);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--p02-ink-soft);text-align:left;padding:16px 20px 16px 0;width:200px;vertical-align:top;background:var(--p02-paper)}
.p02-reqtable td{padding:16px 20px;color:var(--p02-ink);line-height:1.85}

.p02-faqlist{border-top:4px solid var(--p02-yellow)}
.p02-faqitem{border-bottom:1px solid var(--p02-line);background:#fff}
.p02-faqitem summary{font-family:var(--p02-font-body);font-weight:700;font-size:15px;color:var(--p02-ink);cursor:pointer;list-style:none;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.p02-faqitem summary::before{content:"Q";font-family:var(--p02-font-display);font-weight:900;color:var(--p02-yellow);font-size:18px}
.p02-faqitem summary::after{content:"+";margin-left:auto;color:var(--p02-ink-soft)}
.p02-faqitem[open] summary::after{content:"−"}
.p02-faqitem div{padding:0 20px 18px 56px;font-size:14px;color:var(--p02-ink-soft);line-height:1.85}

.p02-form{display:grid;gap:18px;max-width:680px;margin:0 auto}
.p02-form label{display:block;font-weight:700;font-size:13px;color:var(--p02-ink);margin:0 0 6px}
.p02-form label small{font-weight:400;color:#c00;margin-left:6px}
.p02-form input,.p02-form select,.p02-form textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--p02-line);background:var(--p02-paper);color:var(--p02-ink);border-radius:0}
.p02-form input:focus,.p02-form select:focus,.p02-form textarea:focus{outline:none;border-color:var(--p02-yellow);background:#fff;box-shadow:inset 0 0 0 1px var(--p02-yellow)}
.p02-form button{background:var(--p02-darker);color:#fff;padding:14px 36px;font-weight:700;font-size:14px;border:0;cursor:pointer;justify-self:start;margin-top:6px}
.p02-form button:hover{background:var(--p02-dark)}
.p02-form__note{font-size:12px;color:var(--p02-ink-soft);background:var(--p02-paper);padding:14px 18px;border-left:3px solid var(--p02-yellow);margin-bottom:18px}

.p02-history{border-top:1px solid var(--p02-line)}
.p02-history__row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--p02-line)}
.p02-history__year{font-family:var(--p02-font-display);font-weight:900;font-size:18px;color:var(--p02-yellow)}
.p02-history__event{font-size:14px;color:var(--p02-ink);line-height:1.7}
.p02-message{background:var(--p02-darker);color:#fff;padding:48px 36px;margin-top:60px}
.p02-message__title{font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.5;color:#fff;margin:0 0 22px}
.p02-message__title::before{content:"★ ";color:var(--p02-yellow)}
.p02-message__body{font-size:14.5px;line-height:2;color:#ccc;max-width:64ch;white-space:pre-line}
.p02-message__sign{margin-top:24px;padding-top:14px;border-top:1px solid #2a2a2a;font-family:var(--p02-font-display);font-weight:700;font-size:13px;color:var(--p02-yellow);letter-spacing:.06em}
.p02-message__sign b{color:#fff}

/* 動的要素 */
html.p02-motion-ready .p02-hero__plate img{transition:transform 6s ease}
html.p02-motion-ready .p02-hero__plate.p02-loaded img{transform:scale(1.05)}
html.p02-motion-ready .p02-hero__caption{opacity:0;transform:translateY(20px);transition:opacity 1s ease .3s,transform 1s ease .3s}
html.p02-motion-ready .p02-hero__plate.p02-loaded .p02-hero__caption{opacity:1;transform:none}
html.p02-motion-ready .p02-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--p02-delay,0ms),transform .7s ease var(--p02-delay,0ms)}
html.p02-motion-ready .p02-reveal.p02-in{opacity:1;transform:none}
html.p02-motion-ready .p02-floattabs a{transition:padding-left .25s ease,background .25s ease}
html.p02-motion-ready .p02-floattabs a:hover{padding-left:22px;background:var(--p02-yellow);color:var(--p02-ink)}
html.p02-motion-ready .p02-floattabs a:hover::after{background:var(--p02-ink)}
html.p02-motion-ready .p02-mainnav__star{transition:transform .4s ease}
html.p02-motion-ready .p02-mainnav__brand:hover .p02-mainnav__star{transform:rotate(72deg)}