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

/* 真似元: 楽天 新卒採用 corp.rakuten.co.jp/careers/graduates/
   観察結果:
   - 上部に細い赤プロモバナー(Rakuten最強プラン 月額2,980円〜)
   - ヘッダー: 白地・Rakuten赤ロゴ + 「企業情報 / Rakuten Innovation / ニュース / 投資家情報 / サステナビリティ / 採用情報」 + 言語切替
   - 採用情報サブナビ: 黒タブ「ビジネス職」「エンジニア職」
   - ヒーロー: カラフル多角形イラスト + 三角形の赤いグラフィック
   - キャッチ「集まれ、世界を変える仲間たちよ。」+ EMPOWERMENT 大文字赤色
   - NEWS リスト + Our Businesses For Students(アイソメトリックイラスト) + PEOPLE
   - PROJECTS スライダー(社員集合写真 + 案件名 Rakuten Optimism / R Pay / Rakuten Ichiba 等)
   - RECRUITING INFORMATION = 白カード2枚(ビジネス職/エンジニア職)・赤VIEW MORE
   - ABOUT US 4カード横並び(Message From Leadership / Our Businesses / Our Organizations / Global Career Opportunities)
   - Women's Career / Life at Rakuten 2 大カード
   - アイコン+リンク 6 列(CORPORATE CULTURE / CAREER DEVELOPMENT / BOOKS / OFFICE / EMPLOYEE BENEFITS)
   - LATEST セクション(赤・薄グレーの帯)
   - フッター: 黒地、PRE-CAREER RECRUITING / NEW GRADUATE RECRUITING / ABOUT US 3列
   - 主色: Rakuten Red #BF0000 / 白 / うすグレー / 黒 */
:root{
  --p11-bg:#fff;
  --p11-ink:#000;
  --p11-ink-soft:#333;
  --p11-mute:#777;
  --p11-line:#e5e5e5;
  --p11-paper:#f5f5f5;
  --p11-paper2:#fafafa;
  --p11-red:#BF0000;
  --p11-red-dark:#8e0000;
  --p11-red-light:#e60012;
  --p11-pink:#ff7575;
  --p11-yellow:#ffd400;
  --p11-blue:#3a8ed1;
  --p11-green:#7fb942;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--p11-bg);color:var(--p11-ink);font-family:var(--p11-font-body);font-weight:400;font-size:14px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* ===== PROMO BANNER (上部赤帯) ===== */
.p11-promo{background:#000;color:#fff;text-align:center;padding:7px 16px;font-size:12px;display:flex;justify-content:center;align-items:center;gap:6px;letter-spacing:.04em}
.p11-promo__r{background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:800;font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:2px}
.p11-promo b{font-family:var(--p11-font-display);font-weight:800;color:var(--p11-red-light);font-size:14px}
.p11-promo small{color:#aaa;font-size:10.5px;margin-left:6px}

/* ===== HEADER ===== */
.p11-skip{position:absolute;left:-9999px;top:0;background:var(--p11-red);color:#fff;padding:8px 14px}
.p11-skip:focus{left:14px;top:14px;z-index:100}

.p11-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--p11-line)}
.p11-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:12px 24px;max-width:1400px;margin:0 auto}
.p11-header__brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.p11-header__brand .p11-logo{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:900;font-size:16px;padding:5px 11px;border-radius:3px;letter-spacing:.04em;line-height:1}
.p11-header__nav{display:flex;gap:22px;justify-content:center;font-size:13px}
.p11-header__nav a{color:var(--p11-ink);font-weight:500}
.p11-header__nav a.is-on{color:var(--p11-red);font-weight:700;position:relative}
.p11-header__nav a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:3px;background:var(--p11-red)}
.p11-header__util{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--p11-mute)}
.p11-header__util .p11-lang{display:flex;gap:6px;align-items:center}
.p11-header__util .p11-lang a.is-on{color:var(--p11-ink);font-weight:700}
.p11-header__util .p11-search{width:18px;height:18px;display:inline-block;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='m20 20-3-3'/></svg>") center/contain no-repeat}

/* サブナビ(採用情報内タブ) */
.p11-subnav{background:#fff;border-bottom:1px solid var(--p11-line);padding:0 24px}
.p11-subnav__inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 0;gap:14px;flex-wrap:wrap}
.p11-subnav__title{font-size:14px;font-weight:700;color:var(--p11-ink)}
.p11-subnav__tabs{display:flex;gap:0}
.p11-subnav__tabs a{padding:11px 30px;font-family:var(--p11-font-body);font-weight:700;font-size:13px;background:#fff;color:var(--p11-ink);border:1px solid var(--p11-ink);margin-left:-1px}
.p11-subnav__tabs a.is-on,.p11-subnav__tabs a:hover{background:var(--p11-ink);color:#fff}

/* ===== HERO ===== */
.p11-hero{position:relative;background:#fff;padding:60px 24px 80px;overflow:hidden}
.p11-hero__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative}
.p11-hero__copy{position:relative;z-index:2}
.p11-hero__copy h1{font-family:var(--p11-font-body);font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--p11-ink);margin:0 0 24px;line-height:1.5;letter-spacing:.02em}
.p11-hero__copy p{font-size:14px;line-height:1.95;color:var(--p11-ink-soft);margin:0 0 14px}
.p11-hero__empower{font-family:var(--p11-font-display);font-weight:900;font-size:clamp(40px,5.6vw,72px);color:var(--p11-red);letter-spacing:.02em;line-height:1;margin:32px 0 0;display:inline-block;position:relative}
.p11-hero__empower::before{content:"Drive";position:absolute;top:-26px;left:-10px;font-family:'Brush Script MT',cursive;font-size:24px;color:var(--p11-red);font-weight:400;transform:rotate(-8deg)}
.p11-hero__illust{position:relative;width:100%;aspect-ratio:1/1;max-width:420px;margin:0 auto}
/* 三角形イラスト(赤・グラデ重ね) */
.p11-hero__tri{position:absolute;top:8%;right:0;width:90%;height:90%;clip-path:polygon(100% 0,0 100%,100% 100%);background:linear-gradient(135deg,#ff4040 0%,#bf0000 70%,#8e0000 100%);transform:rotate(0deg)}
.p11-hero__tri2{position:absolute;top:14%;right:8%;width:70%;height:70%;clip-path:polygon(100% 0,0 100%,100% 100%);background:linear-gradient(135deg,#ff7070 0%,#e60012 100%);opacity:.65}
.p11-hero__tri3{position:absolute;top:22%;right:14%;width:48%;height:48%;clip-path:polygon(100% 0,0 100%,100% 100%);background:#fff;opacity:.5}

/* 多角形カラフルバナー(上端) */
.p11-poly{height:90px;background:
  conic-gradient(from 30deg at 12% 50%, #ff4f4f 0 60deg, transparent 60deg 360deg),
  conic-gradient(from 80deg at 28% 30%, #ffd400 0 80deg, transparent 80deg 360deg),
  conic-gradient(from 150deg at 46% 70%, #7fb942 0 70deg, transparent 70deg 360deg),
  conic-gradient(from 60deg at 64% 40%, #3a8ed1 0 60deg, transparent 60deg 360deg),
  conic-gradient(from 200deg at 82% 60%, #b557e0 0 80deg, transparent 80deg 360deg),
  conic-gradient(from 100deg at 95% 30%, #ff7575 0 60deg, transparent 60deg 360deg),
  linear-gradient(90deg,#ffefef,#fffbe6 35%,#eef7f0 65%,#eaf2fa);
position:relative;overflow:hidden}
.p11-poly__txt{position:absolute;right:60px;top:50%;transform:translateY(-50%);font-family:var(--p11-font-display);font-weight:900;font-size:22px;color:#fff;letter-spacing:.06em;mix-blend-mode:overlay}

/* 大型 EMPOWERMENT 帯 (poly の上 — Rakuten トップに見られる) */
.p11-empower-band{background:#fff;text-align:center;padding:18px 24px;border-bottom:1px solid var(--p11-line)}
.p11-empower-band a{display:inline-block;background:var(--p11-ink);color:#fff;padding:11px 30px;font-family:var(--p11-font-display);font-weight:700;font-size:12px;letter-spacing:.18em;margin:0 6px}

/* ===== NEWS ===== */
.p11-news{padding:60px 24px;background:#fff;position:relative}
.p11-news__inner{max-width:880px;margin:0 auto;display:grid;grid-template-columns:140px 1fr;gap:36px;align-items:start;background:var(--p11-paper);padding:36px 32px;position:relative}
.p11-news__inner::before{content:"";position:absolute;left:-60px;top:50%;width:90px;height:60px;background:linear-gradient(135deg,#ffd400,#7fb942);clip-path:polygon(0 50%,100% 0,100% 100%)}
.p11-news__inner::after{content:"";position:absolute;right:-60px;top:30%;width:90px;height:60px;background:linear-gradient(135deg,#ff4f4f,#b557e0);clip-path:polygon(0 0,100% 50%,0 100%)}
.p11-news__head{font-family:var(--p11-font-display);font-weight:800;font-size:18px;letter-spacing:.1em;color:var(--p11-ink)}
.p11-news__list{display:flex;flex-direction:column;gap:14px}
.p11-news__row{display:grid;grid-template-columns:80px 1fr;gap:18px;font-size:13px;line-height:1.7;border-bottom:1px dotted var(--p11-line);padding-bottom:14px}
.p11-news__row:last-child{border-bottom:0}
.p11-news__row time{font-family:var(--p11-font-display);font-weight:700;color:var(--p11-ink);font-size:13px;letter-spacing:.04em}
.p11-news__row a{color:var(--p11-ink-soft)}
.p11-news__row a:hover{color:var(--p11-red)}

/* ===== Our Businesses For Students (アイソメトリックイラスト) ===== */
.p11-biz{padding:60px 24px;background:#fff}
.p11-biz__inner{max-width:1000px;margin:0 auto;text-align:center}
.p11-biz__title{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0 0 4px;letter-spacing:.02em}
.p11-biz__sub{font-size:12px;color:var(--p11-mute);margin:0 0 32px}
.p11-biz__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.p11-biz__illust{aspect-ratio:1/1;background:
  radial-gradient(circle at 30% 70%,#ff7575 12%,transparent 13%),
  radial-gradient(circle at 70% 30%,#3a8ed1 8%,transparent 9%),
  radial-gradient(circle at 50% 50%,#ffd400 10%,transparent 11%),
  conic-gradient(from 0deg at 50% 50%,#fff 0 30deg,#f5f5f5 30deg 60deg,#fff 60deg 90deg,#f5f5f5 90deg 120deg,#fff 120deg 360deg);
  position:relative}
.p11-biz__illust::before{content:"";position:absolute;left:20%;top:20%;width:60%;height:60%;background:
  linear-gradient(135deg,#fff 0%,#fff 30%,#ddd 30%,#ddd 35%,#fff 35%);
  clip-path:polygon(20% 0,80% 0,100% 30%,100% 100%,0 100%,0 30%)}
.p11-biz__illust::after{content:"🏙️";position:absolute;font-size:60px;left:50%;top:50%;transform:translate(-50%,-50%);filter:saturate(1.3)}
.p11-biz__msg{text-align:left;font-size:13px;line-height:1.95;color:var(--p11-ink-soft);max-width:280px;margin:0 auto}
.p11-biz__msg a{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;letter-spacing:.16em;padding:9px 24px;margin-top:14px}

/* ===== PEOPLE 帯 ===== */
.p11-people{padding:40px 24px 60px;background:#fff;text-align:center;position:relative}
.p11-people::before{content:"";position:absolute;left:0;top:30%;width:100px;height:60px;background:
  conic-gradient(from 45deg at 0% 50%,#7fb942 0 90deg,transparent 90deg 360deg);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.p11-people::after{content:"";position:absolute;right:0;top:50%;width:120px;height:80px;background:
  conic-gradient(from 180deg at 100% 50%,#ff4f4f 0 90deg,#ffd400 90deg 180deg,transparent 180deg 360deg)}
.p11-people h2{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0 0 6px;letter-spacing:.02em}
.p11-people p{font-size:12px;color:var(--p11-mute);margin:0 0 20px}
.p11-people a{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;letter-spacing:.16em;padding:9px 24px}

/* ===== PROJECTS スライダー ===== */
.p11-projects{padding:40px 24px 70px;background:#fff;overflow:hidden}
.p11-projects__inner{max-width:1100px;margin:0 auto;text-align:center}
.p11-projects__title{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0 0 6px;letter-spacing:.02em}
.p11-projects__sub{font-size:12px;color:var(--p11-mute);margin:0 0 24px}
.p11-projects__viewport{overflow:hidden}
.p11-projects__track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;transition:transform .5s ease}
.p11-project__card{background:#fff;text-align:left}
.p11-project__plate{aspect-ratio:16/10;background:var(--p11-paper);overflow:hidden;margin-bottom:14px}
.p11-project__plate img{width:100%;height:100%;object-fit:cover}
.p11-project__rlogo{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:900;font-size:11px;padding:3px 9px;border-radius:2px;letter-spacing:.04em;line-height:1}
.p11-project__name{font-family:var(--p11-font-body);font-weight:700;font-size:14px;color:var(--p11-ink);margin:6px 0 8px}
.p11-project__desc{font-size:11.5px;color:var(--p11-mute);line-height:1.7;margin:0}
.p11-projects__dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
.p11-projects__dot{width:8px;height:8px;border-radius:50%;background:var(--p11-line);border:0;cursor:pointer;padding:0}
.p11-projects__dot.is-on{background:var(--p11-red)}

/* ===== RECRUITING INFORMATION 2カード ===== */
.p11-rec{padding:60px 24px 80px;background:#fff;position:relative}
.p11-rec::before{content:"";position:absolute;left:0;top:0;width:160px;height:120px;background:
  radial-gradient(circle at 50% 50%,#ffd400 30%,transparent 31%),
  linear-gradient(135deg,#7fb942 0%,#fff 70%);opacity:.25}
.p11-rec__inner{max-width:1000px;margin:0 auto;text-align:center;position:relative}
.p11-rec__title{font-family:var(--p11-font-display);font-weight:600;font-size:30px;color:var(--p11-ink);margin:0 0 6px;letter-spacing:.04em}
.p11-rec__sub{font-size:12px;color:var(--p11-mute);margin:0 0 32px}
.p11-rec__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.p11-rec__card{background:#fff;border:1px solid var(--p11-line);padding:32px 28px;text-align:left;position:relative;display:flex;flex-direction:column;gap:14px}
.p11-rec__card h3{font-family:var(--p11-font-body);font-weight:800;font-size:18px;color:var(--p11-ink);margin:0;padding-left:14px;border-left:5px solid var(--p11-red)}
.p11-rec__card p{font-size:12.5px;color:var(--p11-ink-soft);margin:0;line-height:1.85}
.p11-rec__card ul{padding:0;margin:0;list-style:none;font-size:12.5px;color:var(--p11-ink-soft);line-height:1.95}
.p11-rec__card ul li{padding-left:18px;position:relative}
.p11-rec__card ul li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--p11-red)}
.p11-rec__more{align-self:flex-start;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;letter-spacing:.16em;padding:10px 26px;margin-top:auto;transition:background .2s ease}
.p11-rec__more:hover{background:var(--p11-red-dark)}

/* ===== ABOUT US 4カード ===== */
.p11-about{padding:60px 24px;background:#fff;position:relative}
.p11-about::before{content:"";position:absolute;left:0;top:5%;width:140px;height:200px;background:
  radial-gradient(circle at 50% 50%,#3a8ed1 8%,transparent 9%) 0 0/40px 40px,
  linear-gradient(0deg,transparent 49%,#3a8ed1 50%,transparent 51%) 0 0/40px 40px;
  opacity:.18}
.p11-about::after{content:"";position:absolute;right:0;top:30%;width:140px;height:200px;background:
  radial-gradient(circle at 50% 50%,#ff4f4f 8%,transparent 9%) 0 0/40px 40px;
  opacity:.18}
.p11-about__inner{max-width:1000px;margin:0 auto;text-align:center;position:relative}
.p11-about__title{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0 0 6px;letter-spacing:.04em}
.p11-about__sub{font-size:12px;color:var(--p11-mute);margin:0 0 32px}
.p11-about__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.p11-about__card{background:var(--p11-paper);overflow:hidden;display:block;color:var(--p11-ink);text-align:left}
.p11-about__plate{aspect-ratio:16/10;background:var(--p11-paper);overflow:hidden}
.p11-about__plate img{width:100%;height:100%;object-fit:cover}
.p11-about__cap{padding:12px 14px;background:#fff}
.p11-about__cap strong{display:block;font-family:var(--p11-font-display);font-weight:700;font-size:12.5px;color:var(--p11-ink);margin-bottom:2px}
.p11-about__cap small{font-size:10.5px;color:var(--p11-mute)}

/* 大カード 2枚 (Women's Career / Life at Rakuten) */
.p11-about__big{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:14px auto 0}
.p11-about__big a{aspect-ratio:2.6/1;background:var(--p11-red);position:relative;color:#fff;padding:24px 28px;font-family:var(--p11-font-display);font-weight:800;font-size:18px;display:flex;align-items:flex-end;letter-spacing:.04em;overflow:hidden}
.p11-about__big a:nth-child(1){background:linear-gradient(135deg,#bf0000 0%,#7a0000 100%)}
.p11-about__big a:nth-child(2){background:linear-gradient(135deg,#3a8ed1 0%,#1a5e9c 100%)}
.p11-about__big a small{display:block;font-size:10px;letter-spacing:.18em;margin-bottom:6px;opacity:.9}

/* ===== アイコン+リンク 6 列 ===== */
.p11-links{padding:60px 24px;background:#fff}
.p11-links__inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:30px 80px}
.p11-link__row{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--p11-line)}
.p11-link__icon{width:36px;height:36px;display:grid;place-items:center;color:var(--p11-red);font-size:20px}
.p11-link__row strong{display:block;font-family:var(--p11-font-display);font-weight:700;font-size:13px;color:var(--p11-ink);letter-spacing:.04em}
.p11-link__row small{display:block;font-size:11px;color:var(--p11-mute);margin-top:2px}

/* ===== LATEST ===== */
.p11-latest{padding:60px 24px 80px;background:#fff;text-align:center}
.p11-latest__title{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0 0 6px;letter-spacing:.04em}
.p11-latest__sub{font-size:11.5px;color:var(--p11-mute);margin:0 auto 32px;max-width:560px;line-height:1.85}

/* ===== FOOTER ===== */
.p11-foot{background:#000;color:#fff;padding:50px 24px 26px}
.p11-foot__inner{max-width:1200px;margin:0 auto}
.p11-foot__title{font-family:var(--p11-font-body);font-weight:700;font-size:12px;letter-spacing:.18em;color:#fff;margin:0 0 24px;padding-bottom:14px;border-bottom:1px solid #2a2a2a}
.p11-foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;font-size:11.5px}
.p11-foot__col h4{font-family:var(--p11-font-display);font-weight:700;font-size:11px;letter-spacing:.16em;color:#fff;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #2a2a2a}
.p11-foot__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.p11-foot__col a{font-size:11px;color:#bbb;line-height:1.6}
.p11-foot__col a:hover{color:#fff}
.p11-foot__brand{margin-top:36px;padding-top:18px;border-top:1px solid #2a2a2a;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.p11-foot__brand small{font-size:10px;color:#999;letter-spacing:.06em}
.p11-foot__brand .p11-logo{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:900;font-size:13px;padding:5px 11px;border-radius:3px;letter-spacing:.04em}
.p11-foot__src{display:block;margin-top:6px;font-size:10px;color:#666}

/* ===== レスポンシブ ===== */
@media (max-width:880px){
  .p11-header__inner{grid-template-columns:auto auto;gap:10px;padding:10px 14px}
  .p11-header__nav{display:none}
  .p11-hero__inner{grid-template-columns:1fr;gap:24px}
  .p11-news__inner{grid-template-columns:1fr;gap:14px}
  .p11-biz__grid{grid-template-columns:1fr;gap:24px}
  .p11-projects__track{grid-template-columns:1fr}
  .p11-rec__grid{grid-template-columns:1fr}
  .p11-about__grid{grid-template-columns:repeat(2,1fr)}
  .p11-about__big{grid-template-columns:1fr}
  .p11-links__inner{grid-template-columns:1fr;gap:0 0}
  .p11-foot__cols{grid-template-columns:1fr}
}

/* ============================================================
   下層ページ共通(楽天 下層ページ風)
   ------------------------------------------------------------
   - 上部に Walk Together 風キャッチコピー(大きな写真 + 白テキスト)
   - 赤いアクセントライン + 番号 (01-, 02-)
   - グレー帯セクションタイトル
   ============================================================ */
.p11-page{background:#fff}
.p11-page__hero{position:relative;background:#0c0c0c;color:#fff;padding:80px 24px;overflow:hidden;margin-bottom:0}
.p11-page__hero__img{position:absolute;inset:0;opacity:.45}
.p11-page__hero__img img{width:100%;height:100%;object-fit:cover}
.p11-page__hero__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.p11-page__hero__label{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;padding:5px 14px;letter-spacing:.16em;margin-bottom:18px}
.p11-page__hero__title{font-family:var(--p11-font-display);font-weight:600;font-size:clamp(36px,5vw,60px);letter-spacing:.04em;color:#fff;margin:0 0 12px;line-height:1.1}
.p11-page__hero__sub{font-size:13px;line-height:1.85;color:#ddd;margin:0;max-width:600px}

.p11-page__crumb{font-size:11px;color:var(--p11-mute);margin:0;letter-spacing:.06em;padding:14px 24px;border-bottom:1px solid var(--p11-line);background:#fff}
.p11-page__crumb__inner{max-width:1100px;margin:0 auto}
.p11-page__crumb a{color:var(--p11-mute)}
.p11-page__crumb a:hover{color:var(--p11-red)}

.p11-page__inner{max-width:1100px;margin:0 auto;padding:60px 24px}
.p11-page__lead{font-size:14px;line-height:2;color:var(--p11-ink-soft);margin:0 0 48px;max-width:64ch}

/* セクション見出し(楽天「楽天の強み」風) */
.p11-sec__title{text-align:center;margin:0 0 40px}
.p11-sec__title h2{font-family:var(--p11-font-display);font-weight:600;font-size:28px;color:var(--p11-ink);margin:0;letter-spacing:.04em}
.p11-sec__title h2 strong{color:var(--p11-red);font-weight:800}
.p11-sec__title small{display:block;font-size:11px;color:var(--p11-mute);margin-top:8px;letter-spacing:.1em}

/* JOBS index — タイルグリッド */
.p11-jobs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.p11-jobcard{background:#fff;text-decoration:none;color:var(--p11-ink);display:flex;flex-direction:column;border:1px solid var(--p11-line);transition:transform .25s ease,box-shadow .25s ease}
.p11-jobcard:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.p11-jobcard__plate{aspect-ratio:16/10;overflow:hidden;background:var(--p11-paper);position:relative}
.p11-jobcard__plate img{width:100%;height:100%;object-fit:cover}
.p11-jobcard__plate::before{content:attr(data-code);position:absolute;left:14px;top:14px;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:10.5px;letter-spacing:.16em;padding:4px 10px}
.p11-jobcard__body{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.p11-jobcard__title{font-family:var(--p11-font-body);font-weight:800;font-size:17px;color:var(--p11-ink);margin:0;line-height:1.4;padding-left:14px;border-left:4px solid var(--p11-red)}
.p11-jobcard__sub{font-size:12.5px;color:var(--p11-ink-soft);margin:0;line-height:1.7}
.p11-jobcard__meta{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--p11-ink-soft);padding-top:12px;margin-top:6px;border-top:1px dotted var(--p11-line)}
.p11-jobcard__meta b{color:var(--p11-ink);font-weight:700}
.p11-jobcard__more{align-self:flex-start;color:var(--p11-red);font-family:var(--p11-font-display);font-weight:700;font-size:11px;letter-spacing:.14em;margin-top:6px}
.p11-jobcard__more::after{content:" →"}
@media (max-width:880px){.p11-jobs__grid{grid-template-columns:1fr}}

/* 職種詳細 */
.p11-job__hero{position:relative;background:#0c0c0c;color:#fff;padding:90px 24px;overflow:hidden}
.p11-job__hero__img{position:absolute;inset:0;opacity:.45}
.p11-job__hero__img img{width:100%;height:100%;object-fit:cover}
.p11-job__hero__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.p11-job__hero__label{display:inline-block;background:var(--p11-red);color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;padding:5px 14px;letter-spacing:.16em;margin-bottom:14px}
.p11-job__hero__code{display:inline-block;color:#fff;font-family:var(--p11-font-display);font-weight:700;font-size:11px;padding:5px 0 5px 14px;letter-spacing:.16em;margin-left:6px;border-left:1px solid #555}
.p11-job__hero__title{font-family:var(--p11-font-display);font-weight:600;font-size:clamp(32px,4.6vw,56px);letter-spacing:.04em;color:#fff;margin:0 0 14px;line-height:1.15}
.p11-job__hero__sub{font-size:14px;line-height:1.95;color:#ddd;margin:0;max-width:680px}
.p11-job__hero__meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;font-size:12px;border-top:1px solid #333;padding-top:18px;margin-top:24px;color:#fff}
.p11-job__hero__meta dt{font-family:var(--p11-font-display);font-size:10px;letter-spacing:.16em;color:#999;font-weight:700;margin:0 0 4px}
.p11-job__hero__meta dd{margin:0;color:#fff;font-weight:600;font-size:14px}
@media (max-width:880px){.p11-job__hero__meta{grid-template-columns:1fr 1fr}}

.p11-job__sec{max-width:1000px;margin:0 auto 50px;padding:0 24px}
.p11-job__sec__title{display:flex;align-items:center;gap:16px;margin:0 0 24px}
.p11-job__sec__title__num{font-family:var(--p11-font-display);font-weight:800;font-size:32px;color:var(--p11-red);line-height:1;letter-spacing:.04em}
.p11-job__sec__title h2{font-family:var(--p11-font-body);font-weight:800;font-size:20px;color:var(--p11-ink);margin:0;padding-left:14px;border-left:4px solid var(--p11-red);line-height:1.3}
.p11-job__sec p{font-size:14px;line-height:2;color:var(--p11-ink);margin:0 0 14px}
.p11-job__sec ul{padding-left:1.4em;margin:0;font-size:14px;line-height:2}
.p11-job__sec ul li{margin:0 0 6px}

/* 1日の流れ — 赤の縦ラインタイムライン */
.p11-day{display:flex;flex-direction:column;gap:0;position:relative;padding-left:30px}
.p11-day::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--p11-red)}
.p11-day__row{display:grid;grid-template-columns:80px 1fr;gap:24px;padding:14px 0;position:relative}
.p11-day__row::before{content:"";position:absolute;left:-25px;top:24px;width:14px;height:14px;background:var(--p11-red);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--p11-red)}
.p11-day__time{font-family:var(--p11-font-display);font-weight:800;font-size:16px;color:var(--p11-red);letter-spacing:.04em;padding-top:2px}
.p11-day__body h4{font-family:var(--p11-font-body);font-weight:700;font-size:15px;margin:0 0 4px;color:var(--p11-ink)}
.p11-day__body p{font-size:13px;color:var(--p11-ink-soft);margin:0;line-height:1.85}

/* requirements table */
.p11-reqtable{width:100%;border-collapse:collapse;font-size:14px;border-top:2px solid var(--p11-red)}
.p11-reqtable tr{border-bottom:1px solid var(--p11-line)}
.p11-reqtable th{font-family:var(--p11-font-body);font-weight:700;font-size:13px;color:var(--p11-red);text-align:left;padding:20px 20px 20px 0;width:200px;vertical-align:top;background:#fff;letter-spacing:.04em}
.p11-reqtable td{padding:20px 0;color:var(--p11-ink);line-height:1.95}

/* faq */
.p11-faqlist{border-top:2px solid var(--p11-red);max-width:880px;margin:0 auto}
.p11-faqitem{border-bottom:1px solid var(--p11-line);background:#fff}
.p11-faqitem summary{font-family:var(--p11-font-body);font-weight:700;font-size:15px;color:var(--p11-ink);cursor:pointer;list-style:none;padding:20px 0;display:flex;gap:18px;align-items:flex-start}
.p11-faqitem summary::-webkit-details-marker{display:none}
.p11-faqitem summary::before{content:"Q";font-family:var(--p11-font-display);font-weight:800;color:var(--p11-red);font-size:22px;line-height:1;flex-shrink:0}
.p11-faqitem summary::after{content:"＋";margin-left:auto;color:var(--p11-red);font-size:14px;font-weight:300}
.p11-faqitem[open] summary::after{content:"−"}
.p11-faqitem div{padding:0 0 20px 40px;font-size:14px;color:var(--p11-ink-soft);line-height:1.95;display:flex;gap:18px}
.p11-faqitem div::before{content:"A";font-family:var(--p11-font-display);font-weight:800;color:var(--p11-ink);font-size:22px;line-height:1;flex-shrink:0}

/* apply form */
.p11-form{display:grid;gap:22px;max-width:680px;margin:0 auto}
.p11-form__note{font-size:12.5px;color:var(--p11-ink-soft);background:var(--p11-paper);padding:16px 22px;border-left:3px solid var(--p11-red);max-width:680px;margin:0 auto 24px;line-height:1.85}
.p11-form label{display:block;font-family:var(--p11-font-body);font-weight:700;font-size:12.5px;color:var(--p11-ink);margin:0 0 8px;letter-spacing:.04em}
.p11-form label small{font-weight:500;color:var(--p11-red);margin-left:6px;font-size:10.5px}
.p11-form input,.p11-form select,.p11-form textarea{width:100%;font:inherit;padding:14px 16px;border:1px solid var(--p11-line);background:#fff;color:var(--p11-ink);border-radius:0;font-size:14px}
.p11-form input:focus,.p11-form select:focus,.p11-form textarea:focus{outline:none;border-color:var(--p11-red);box-shadow:0 0 0 3px rgba(191,0,0,.12)}
.p11-form button{background:var(--p11-red);color:#fff;padding:16px 48px;font-family:var(--p11-font-display);font-weight:700;font-size:13px;letter-spacing:.2em;border:0;cursor:pointer;justify-self:center;margin-top:6px}
.p11-form button:hover{background:var(--p11-red-dark)}

/* history */
.p11-history{border-top:2px solid var(--p11-red);max-width:880px;margin:0 auto}
.p11-history__row{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--p11-line)}
.p11-history__year{font-family:var(--p11-font-display);font-weight:800;font-size:20px;color:var(--p11-red);letter-spacing:.04em}
.p11-history__event{font-size:14px;color:var(--p11-ink);line-height:1.85}

/* message — トップメッセージ風 */
.p11-message{position:relative;background:#fff;padding:60px 24px 80px;overflow:hidden;max-width:1000px;margin:0 auto}
.p11-message__row{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start}
.p11-message__photo{aspect-ratio:1/1;background:var(--p11-paper);overflow:hidden;border-radius:50%}
.p11-message__photo img{width:100%;height:100%;object-fit:cover}
.p11-message__title{font-family:var(--p11-font-body);font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.55;color:var(--p11-ink);margin:0 0 24px;padding:0 0 18px;border-bottom:2px solid var(--p11-red);position:relative}
.p11-message__title::before{content:""'"';font-family:var(--p11-font-display);font-weight:900;color:var(--p11-red);position:absolute;left:-14px;top:-6px;font-size:32px}
.p11-message__body{font-size:14px;line-height:2;color:var(--p11-ink-soft);max-width:64ch;white-space:pre-line}
.p11-message__sign{margin-top:24px;font-family:var(--p11-font-body);font-weight:700;font-size:13px;color:var(--p11-mute);text-align:right}
.p11-message__sign b{color:var(--p11-ink);font-size:15px;display:block;margin-top:4px}
@media (max-width:880px){.p11-message__row{grid-template-columns:1fr}.p11-message__photo{max-width:200px;margin:0 auto}}

/* ========= 動的要素 ========= */
html.p11-motion-ready .p11-hero__illust{opacity:0;transform:scale(.92) rotate(-3deg);transition:opacity 1s ease,transform 1s ease}
html.p11-motion-ready .p11-hero__illust.p11-loaded{opacity:1;transform:none}
html.p11-motion-ready .p11-reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease var(--p11-delay,0ms),transform .8s ease var(--p11-delay,0ms)}
html.p11-motion-ready .p11-reveal.p11-in{opacity:1;transform:none}