@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ============================================================
   社内ポータル 下層ページ共通：HP（i-stepproject.jp）ソリッド版に合わせる
   水色 #2BA7E7・白・黄 #F2E300。濃紺 #0F2F4F は線と文字だけ。
   角丸なし・3pxの太線・ぼかし／グラデなし。
   各ページの <style> の後に読み込む（<body data-pg="…"> でページ別に上書き）
   ============================================================ */
:root{
  --s-ink:#0F2F4F; --s-sky:#2BA7E7; --s-yellow:#F2E300; --s-sub:#4A6076; --s-rule:#D9E0E5; --s-mist:#F3F6F8;
  /* 各ページが使っている変数を付け替える */
  --bg:#fff; --surface:#fff; --paper:#fff; --card:#fff;
  --ink:#0F2F4F; --ink-2:#4A6076; --muted:#4A6076; --sub:#4A6076;
  --hairline:#D9E0E5; --line:#D9E0E5;
  --accent:#0F2F4F; --accent-hover:#0F2F4F; --accent-tint:#F3F6F8;
  --sky:#2BA7E7; --sky-dark:#0F2F4F; --tint:#F2E300; --section:#0F2F4F;
  --green:#0F2F4F; --mint:#F2E300; --orange:#0F2F4F; --orange-bg:#F2E300; --blue:#0F2F4F; --blue-bg:#F2E300; --gold:#0F2F4F; --gold-bg:#F2E300; --warn:#F2E300;
  --shadow:none; --shadow-rest:none; --shadow-hover:none;
}
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body{background:#fff;color:var(--s-ink);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
h1,h2,h3{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-weight:900;letter-spacing:-.01em}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--s-yellow);outline-offset:2px}
main a:not([class]){color:var(--s-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--s-sky);text-decoration-thickness:3px;text-underline-offset:3px}

/* ---- 1画面目（水色の面）：komon / renraku / security / harassment ---- */
body>header:not(.topbar){padding:0 20px 34px;background:var(--s-sky);color:#fff;text-align:left;border-bottom:3px solid var(--s-ink)}
body>header:not(.topbar)>*{max-width:1120px;margin-left:auto;margin-right:auto}
body>header:not(.topbar) .back{display:flex;align-items:center;min-height:52px;margin-bottom:22px;color:#fff;font-size:13px;font-weight:700;border-bottom:3px solid #fff}
body>header:not(.topbar) .back:hover{color:var(--s-yellow)}
body>header:not(.topbar) h1{font-size:32px;line-height:1.3;color:#fff;margin-top:0;margin-bottom:0}
body>header:not(.topbar) p{margin-top:14px;padding-left:14px;border-left:3px solid #fff;color:#fff;font-size:14px;font-weight:500;line-height:1.9}
body>header:not(.topbar) p strong{background:var(--s-yellow);color:var(--s-ink);padding:0 .2em}
body>main{padding-top:36px}
body>footer{background:var(--s-sky);color:#fff;border-top:3px solid var(--s-ink);font-weight:500;text-align:left}
body>footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- 共通の箱 ---- */
.card,.base,.lead,.mad,.cta{border:3px solid var(--s-ink);background:#fff}
.note,.muted{color:var(--s-sub)}
.btn,.button{background:var(--s-yellow);color:var(--s-ink);border:3px solid var(--s-ink);font-weight:900;transition:none}
.btn:hover,.button:hover{background:var(--s-sky);color:#fff}
.btn-sub,.btn.secondary{background:#fff;color:var(--s-ink)}
.chip{border:3px solid var(--s-ink);background:#fff;color:var(--s-ink);font-weight:700}
a.chip{border-color:var(--s-ink);color:var(--s-ink)}
a.chip:hover{background:var(--s-yellow)}
input,select,textarea{border:3px solid var(--s-ink) !important;background:#fff;color:var(--s-ink)}
input:focus,select:focus,textarea:focus{outline:0 !important;background:#FFFCD6}
input[type=radio],input[type=checkbox]{border:0 !important;accent-color:var(--s-ink)}

/* ---- 顧問・専門家 ---- */
[data-pg=komon] .section-title{margin:44px 0 16px;font-size:24px;padding-bottom:10px;border-bottom:3px solid var(--s-ink)}
[data-pg=komon] .section-title:first-child{margin-top:0}
[data-pg=komon] .section-title .dot{width:12px;height:12px;background:var(--s-yellow) !important;outline:3px solid var(--s-ink);outline-offset:-3px}
[data-pg=komon] .tile{background:var(--s-yellow);color:var(--s-ink);border:3px solid var(--s-ink)}
[data-pg=komon] .tile svg{stroke-width:2}
[data-pg=komon] .advisor .field{display:inline-block;padding:2px 10px;background:var(--s-sky);color:#fff;font-size:12px;font-weight:700}
[data-pg=komon] .advisor h3{margin-top:8px;font-size:20px}
[data-pg=komon] th{font-weight:900}
[data-pg=komon] th,[data-pg=komon] td{border-bottom:3px solid var(--s-ink)}
[data-pg=komon] tr:last-child th,[data-pg=komon] tr:last-child td{border-bottom:0}
[data-pg=komon] td a{color:var(--s-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--s-sky);text-decoration-thickness:3px;text-underline-offset:3px}

/* ---- 事業所・連絡先 ---- */
[data-pg=renraku] .base{padding:0 16px 14px}
[data-pg=renraku] .base h2{margin:0 -16px;padding:11px 16px;background:var(--s-yellow);border-bottom:3px solid var(--s-ink);font-size:16px}
[data-pg=renraku] .addr{margin:10px 0}
[data-pg=renraku] .tel{background:var(--s-sky);color:#fff;font-weight:900;font-size:14px}
[data-pg=renraku] .tel.via{background:#fff;color:var(--s-ink);border:3px solid var(--s-ink)}
[data-pg=renraku] .fax{border:3px solid var(--s-rule);color:var(--s-sub);font-weight:700}
[data-pg=renraku] .members{border-top:3px solid var(--s-ink)}
[data-pg=renraku] .role{background:var(--s-ink);background:#fff;outline:2px solid var(--s-ink);outline-offset:-2px;color:var(--s-ink);font-weight:700}
[data-pg=renraku] .note{text-align:left}

/* ---- 情報セキュリティ ---- */
[data-pg=security] .rule{border:3px solid var(--s-ink);background:#fff;padding:0;gap:0;grid-template-columns:56px 1fr}
[data-pg=security] .rule>div{padding:16px 18px 18px}
[data-pg=security] .num{width:auto;height:auto;background:var(--s-yellow);color:var(--s-ink);border-right:3px solid var(--s-ink);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px}
[data-pg=security] .rule p strong{background:linear-gradient(transparent 62%,var(--s-yellow) 62%);font-weight:700}
[data-pg=security] .cta{background:var(--s-yellow)}
[data-pg=security] .note{text-align:left}

/* ---- ハラスメント ---- */
[data-pg=harassment] .lead{background:var(--s-yellow)}
[data-pg=harassment] .lead .btn{background:var(--s-sky);color:#fff;font-size:16px;min-height:54px}
[data-pg=harassment] .lead .btn:hover{background:#fff;color:var(--s-ink)}
[data-pg=harassment] .card h2{padding-bottom:8px;border-bottom:3px solid var(--s-ink);font-size:20px}
[data-pg=harassment] .mad{background:#fff}
[data-pg=harassment] .mad .tag{background:var(--s-sky);color:#fff;font-weight:700}
[data-pg=harassment] .flow li::before{background:var(--s-yellow);color:var(--s-ink);outline:2px solid var(--s-ink);outline-offset:-2px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px}

/* ---- チャレンジ制度 ---- */
[data-pg=challenge] .back,[data-pg=challenge-form] .back{color:var(--s-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--s-sky);text-decoration-thickness:3px;text-underline-offset:3px}
[data-pg=challenge] .hero{background:var(--s-sky);color:#fff;border:3px solid var(--s-ink)}
[data-pg=challenge] .eyebrow{color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.18em}
[data-pg=challenge] .hero .lead{color:#fff;font-weight:500;border:0;background:none;padding:0}
[data-pg=challenge] .promise{border:3px solid var(--s-ink);background:var(--s-yellow);color:var(--s-ink);font-weight:900}
[data-pg=challenge] .status{background:#fff;color:var(--s-ink);border:3px solid var(--s-ink);font-weight:700}
[data-pg=challenge] h2{padding-bottom:8px;border-bottom:3px solid var(--s-ink)}
[data-pg=challenge] .lane,[data-pg=challenge] .step,[data-pg=challenge] .rule div,[data-pg=challenge] .budget{border:3px solid var(--s-ink);background:#fff}
[data-pg=challenge] .budget div{border:0;border-bottom:3px solid var(--s-ink)}
[data-pg=challenge] .budget div:last-child{border-bottom:0}
[data-pg=challenge] .lane .num{background:var(--s-yellow) !important;color:var(--s-ink) !important;outline:3px solid var(--s-ink);outline-offset:-3px;font-family:"Barlow Condensed",sans-serif;font-size:20px}
[data-pg=challenge] .step:before{font-family:"Barlow Condensed",sans-serif;font-size:34px;line-height:1;color:var(--s-sky)}
[data-pg=challenge] .all{background:var(--s-yellow);border:3px solid var(--s-ink)}
[data-pg=challenge] .all strong{font-weight:900;font-size:18px}
[data-pg=challenge] .cta{background:var(--s-sky);color:#fff}
[data-pg=challenge] .cta p{color:#fff}

/* ---- チャレンジ応募フォーム案 ---- */
[data-pg=challenge-form] .head{padding:24px 20px;background:var(--s-sky);color:#fff;border:3px solid var(--s-ink)}
[data-pg=challenge-form] .head p{color:#fff;font-weight:500}
[data-pg=challenge-form] .notice{border:3px solid var(--s-ink);background:var(--s-yellow)}
[data-pg=challenge-form] form,[data-pg=challenge-form] #preview{border:3px solid var(--s-ink)}
[data-pg=challenge-form] legend,[data-pg=challenge-form] label{font-weight:900}
[data-pg=challenge-form] .radio{border:3px solid var(--s-ink);font-weight:700}
[data-pg=challenge-form] .required{color:#fff;background:var(--s-sky);padding:1px 6px;font-weight:700}
[data-pg=challenge-form] .primary{background:var(--s-yellow);color:var(--s-ink);border:3px solid var(--s-ink)}
[data-pg=challenge-form] .secondary{background:#fff;color:var(--s-ink);border:3px solid var(--s-ink)}
[data-pg=challenge-form] .item strong{color:var(--s-sub)}

/* ---- 就業規則・賃金規程 ---- */
[data-pg=kitei] .topbar{background:#fff;border-bottom:3px solid var(--s-ink)}
[data-pg=kitei] .back{color:var(--s-ink);font-weight:900}
[data-pg=kitei] .status{background:var(--s-yellow);color:var(--s-ink);outline:3px solid var(--s-ink);outline-offset:-3px}
[data-pg=kitei] .hero{max-width:none;margin:0 0 32px;padding:40px max(20px,calc((100vw - 1140px)/2)) 40px;background:var(--s-sky);color:#fff;border-bottom:3px solid var(--s-ink)}
[data-pg=kitei] .hero p{color:#fff;font-weight:500}
[data-pg=kitei] .eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em}
[data-pg=kitei] .hero .eyebrow{color:#fff}
[data-pg=kitei] .assistant-box{background:var(--s-yellow);border:3px solid var(--s-ink)}
[data-pg=kitei] .assistant-icon{background:#fff;color:var(--s-ink);border:3px solid var(--s-ink);font-weight:900}
[data-pg=kitei] .assistant p{color:var(--s-ink)}
[data-pg=kitei] .ask-row button{background:var(--s-sky);color:#fff;border:3px solid var(--s-ink);font-weight:900}
[data-pg=kitei] .ask-row button:hover{background:var(--s-ink)}
[data-pg=kitei] .chip{border:3px solid var(--s-ink);font-weight:700;font-size:12px}
[data-pg=kitei] .chip:hover{background:var(--s-sky);color:#fff}
[data-pg=kitei] .answer{border:3px solid var(--s-ink)}
[data-pg=kitei] .answer-item{border:3px solid var(--s-ink)}
[data-pg=kitei] .answer-item:hover{background:var(--s-mist)}
[data-pg=kitei] .answer-item strong{color:var(--s-ink)}
[data-pg=kitei] .answer-note{color:var(--s-ink) !important}
[data-pg=kitei] .doc-tab{border:3px solid var(--s-ink)}
[data-pg=kitei] .doc-tab.active{background:var(--s-yellow);border-color:var(--s-ink)}
[data-pg=kitei] .privacy-note{background:#fff;color:var(--s-sub);border:3px solid var(--s-rule)}
[data-pg=kitei] .reader{border:3px solid var(--s-ink)}
[data-pg=kitei] .document-head{border-bottom:3px solid var(--s-ink)}
[data-pg=kitei] .document-head .eyebrow{color:var(--s-sky)}
[data-pg=kitei] .source-link{border:3px solid var(--s-ink);color:var(--s-ink)}
[data-pg=kitei] .chapter{background:var(--s-sky);color:#fff;font-weight:900}
[data-pg=kitei] .rule-block h3{font-weight:900}
@keyframes flash{0%,35%{background:#F2E300}100%{background:transparent}}

@media (min-width:900px){
  body>header:not(.topbar){padding:0 max(40px,calc((100vw - 1120px)/2)) 52px}
  body>header:not(.topbar) h1{font-size:46px}
  body>header:not(.topbar) p{font-size:15px;max-width:720px;margin-left:0}
  body>header:not(.topbar) .back{margin-bottom:34px}
  body>main{padding-top:52px}
  [data-pg=kitei] .hero{padding-top:56px;padding-bottom:56px}
}

/* ---- 紹介制度（リファラル） ---- */
[data-pg=referral] .money div{border:3px solid var(--s-ink);background:var(--s-yellow)}
[data-pg=referral] .money b{font-family:"Barlow Condensed","Noto Sans JP",sans-serif;font-weight:700;font-size:64px;line-height:1}
[data-pg=referral] .money b span{font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:18px;margin-left:2px}
[data-pg=referral] .lead .btn{background:var(--s-sky);color:#fff;font-size:16px}
[data-pg=referral] .lead .btn:hover{background:var(--s-yellow);color:var(--s-ink)}
[data-pg=referral] .card h2{padding-bottom:8px;border-bottom:3px solid var(--s-ink)}