/* ===========================================================================
   ルポン人材紹介 — サイト共通スタイル

   デザインは Miedas（miedas-lp）に合わせたブルー基調。
   - ブランドカラー  #2563eb / #1e3a8a / #eff6ff
   - グレー          slate系（#0f172a 〜 #e2e8f0）
   - 書体            Geist（欧文）＋ Yu Gothic / Hiragino Sans（和文）
   - 角丸カード、pill型ボタン、tracking-tight の太字見出し

   ライト／ダーク両対応。prefers-color-scheme と data-theme の双方を見ます。
   （Miedas はライトのみですが、当サイトは要件によりダークにも対応します）
   =========================================================================== */

:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F6FD;
  --ink:#0F172A; --ink-2:#44546B; --muted:#5A6A80;
  --line:#DEE7F5; --line-2:#C2D2E8;

  /* brand — Miedas と同じブルースケール */
  --brand:#2563EB;        /* brand-600 塗り */
  --brand-hover:#1D4ED8;  /* brand-700 */
  --brand-ink:#1D4ED8;    /* テキスト・リンク */
  --brand-deep:#1E3A8A;   /* brand-900 */
  --brand-soft:#EFF6FF;   /* brand-50 */
  --accent-text:#2563EB;  /* 見出し中の強調文字（brand-600） */
  --brand-soft-2:#DBEAFE; /* brand-100 */
  --on-brand:#FFFFFF;

  --hero:radial-gradient(1000px 520px at 85% -10%, rgba(37,99,235,.16), transparent 60%),
         radial-gradient(900px 500px at -10% 10%, rgba(30,58,138,.10), transparent 60%),
         linear-gradient(180deg,#FFFFFF 0%,#EFF6FF 100%);
  --deep:radial-gradient(1000px 500px at 20% 0%, rgba(37,99,235,.40), transparent 60%),
         radial-gradient(900px 500px at 100% 100%, rgba(30,58,138,.45), transparent 60%),
         linear-gradient(180deg,#1E3A8A 0%,#1E40AF 100%);

  --shadow-sm:0 1px 2px 0 rgba(15,23,42,.05);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08);
  --shadow-lg:0 10px 24px -6px rgba(15,23,42,.14);

  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Yu Gothic",YuGothic,
         "Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --surface:#111B2E; --surface-2:#132038;
    --ink:#E8EEFB; --ink-2:#B7C4D9; --muted:#8496B2;
    --line:#22304A; --line-2:#38496A;

    --brand:#2563EB; --brand-hover:#3B82F6;
    --brand-ink:#93C5FD; --brand-deep:#1E3A8A;
    --brand-soft:#152340; --brand-soft-2:#1B2E52;
    --accent-text:#93C5FD;
    --on-brand:#FFFFFF;

    --hero:radial-gradient(1000px 520px at 85% -10%, rgba(37,99,235,.28), transparent 60%),
           radial-gradient(900px 500px at -10% 10%, rgba(30,58,138,.30), transparent 60%),
           linear-gradient(180deg,#0B1220 0%,#101C33 100%);

    --shadow-sm:0 1px 2px 0 rgba(0,0,0,.4);
    --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
    --shadow-lg:0 10px 24px -6px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220; --surface:#111B2E; --surface-2:#132038;
  --ink:#E8EEFB; --ink-2:#B7C4D9; --muted:#8496B2;
  --line:#22304A; --line-2:#38496A;
  --brand:#2563EB; --brand-hover:#3B82F6;
  --brand-ink:#93C5FD; --brand-deep:#1E3A8A;
  --brand-soft:#152340; --brand-soft-2:#1B2E52;
  --accent-text:#93C5FD;
  --on-brand:#FFFFFF;
  --hero:radial-gradient(1000px 520px at 85% -10%, rgba(37,99,235,.28), transparent 60%),
         radial-gradient(900px 500px at -10% 10%, rgba(30,58,138,.30), transparent 60%),
         linear-gradient(180deg,#0B1220 0%,#101C33 100%);
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.4);
  --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:0 10px 24px -6px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* --- base ---------------------------------------------------------------- */
*{box-sizing:border-box;}
html{overflow-x:hidden; scroll-behavior:smooth;}
body{margin:0; color:var(--ink); font-family:var(--sans);
  /* 上端に淡い青をかぶせて、白一色になるのを避ける */
  background:var(--bg) linear-gradient(180deg, var(--brand-soft-2) 0, var(--brand-soft) 200px, transparent 480px) no-repeat;
  font-size:16px; line-height:1.75; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* 日本語の折り返し制御（Miedas と同じ） */
  word-break:auto-phrase; text-wrap:pretty; overflow-wrap:anywhere;}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.3; text-wrap:balance;}
a{color:var(--brand-ink);}
img{max-width:100%; height:auto;}
:where(section[id]){scroll-margin-top:80px;}

.wrap{max-width:1152px; margin:0 auto; padding:0 16px;}
.wrap-narrow{max-width:840px; margin:0 auto; padding:0 16px;}
@media(min-width:640px){ .wrap,.wrap-narrow{padding:0 24px;} }
@media(min-width:1024px){ .wrap,.wrap-narrow{padding:0 32px;} }

/* --- header -------------------------------------------------------------- */
.top{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px;}
.brand{display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); white-space:nowrap;}
.brand b{font-size:17px; font-weight:700; letter-spacing:-.02em;}
.brand span{font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.04em;}
.top nav{display:flex; align-items:center; gap:4px;}
.top nav a{padding:8px 12px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background-color .15s,color .15s;}
.top nav a:hover{background:var(--brand-soft); color:var(--brand-ink);}
.top nav a[aria-current="page"]{color:var(--brand-ink); font-weight:600; background:var(--brand-soft);}
.top .cta,.top nav a.cta{display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 20px; margin-left:4px; border-radius:999px;
  background:var(--brand); color:var(--on-brand); font-size:14px; font-weight:600;
  box-shadow:var(--shadow-sm); transition:background-color .15s;}
.top .cta:hover,.top nav a.cta:hover{background:var(--brand-hover); color:var(--on-brand);}
@media(max-width:640px){
  .top .wrap{height:60px; gap:8px;}
  .brand b{font-size:15px;} .brand span{display:none;}
  .top nav{gap:0;}
  .top nav a{padding:8px 9px; font-size:13px;}
  .top nav a.opt{display:none;}
  .top .cta,.top nav a.cta{height:38px; padding:0 14px; font-size:13px; margin-left:2px;}
}
@media(max-width:360px){
  .top nav a{padding:8px 7px; font-size:12.5px;}
  .top .cta,.top nav a.cta{padding:0 12px; font-size:12.5px;}
}

/* --- 共通パーツ ------------------------------------------------------------ */
.eyebrow{display:block; font-size:14px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-ink); margin-bottom:14px;}
.accent{color:var(--accent-text);}
.lede{margin:16px 0 0; font-size:16px; line-height:1.75; color:var(--ink-2); max-width:42em;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 28px; border-radius:999px; background:var(--brand);
  color:var(--on-brand); font-size:15px; font-weight:600; text-decoration:none;
  box-shadow:var(--shadow-sm); transition:background-color .15s, box-shadow .15s;}
.btn:hover{background:var(--brand-hover); color:var(--on-brand); box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-2); box-shadow:none;}
.btn-ghost:hover{background:var(--surface); color:var(--brand-ink); border-color:var(--brand);}
.btn-light{background:#FFFFFF; color:var(--brand-deep);}
.btn-light:hover{background:#EFF6FF; color:var(--brand-deep);}

.chip{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm);
  word-break:keep-all;}
.chip i{width:6px; height:6px; border-radius:999px; background:var(--brand); flex:none;}

section{padding:80px 0; border-top:1px solid var(--line);}
/* 白が続かないよう、セクションごとに青を交互に敷く。
   .tinted   … 全面を淡い青で塗る（カードが白なので浮き上がる）
   .tinted-b … 白から青へ落として、次の濃紺CTAへつなぐ */
.tinted{background:var(--brand-soft);}
.tinted-b{background:linear-gradient(180deg, var(--bg) 0%, var(--brand-soft) 55%, var(--brand-soft-2) 100%);}
@media(min-width:640px){ section{padding:96px 0;} }
@media(min-width:1024px){ section{padding:112px 0;} }
section h2{font-size:clamp(26px,3.4vw,40px);}
.sec-head{margin-bottom:48px;}
@media(min-width:640px){ .sec-head{margin-bottom:64px;} }

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; border-top:0;}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--hero);}
.hero .wrap{padding-top:64px; padding-bottom:80px;}
@media(min-width:640px){ .hero .wrap{padding-top:96px; padding-bottom:96px;} }
@media(min-width:1024px){ .hero .wrap{padding-top:112px; padding-bottom:112px;} }
.hero h1{margin:24px 0 0; font-size:clamp(30px,5vw,44px); line-height:1.35;}
.hero .sub{margin:20px 0 0; font-size:17px; font-weight:600; line-height:1.75; color:var(--ink-2); max-width:34em;}
.hero .actions{display:flex; flex-direction:column; gap:12px; margin-top:32px;}
@media(min-width:520px){ .hero .actions{flex-direction:row; align-items:center;} }

/* 保証期間バー */
.span{margin-top:48px; padding:24px; border:1px solid var(--line); border-radius:20px;
  background:var(--surface); box-shadow:var(--shadow-sm); max-width:720px;}
.span .cap{margin:0 0 16px; font-size:15px; font-weight:600; color:var(--ink);}
.span .cap b{color:var(--accent-text); font-size:17px;}
.span .bar{height:8px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand) 55%,var(--brand-soft-2) 100%);}
.span .ticks{display:flex; justify-content:space-between; margin-top:10px;
  font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; word-break:keep-all;}
.span .note{margin:14px 0 0; font-size:13px; color:var(--muted);}

/* --- カードグリッド（得意分野・法定情報） ------------------------------------ */
.grid3{display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px;}
@media(min-width:768px){ .grid3{grid-template-columns:repeat(3,1fr);} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:28px 24px; box-shadow:var(--shadow-sm);}
.card h3{font-size:18px; margin-bottom:10px;}
.card p{margin:0; font-size:14.5px; line-height:1.8; color:var(--ink-2);}

a.card{display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, transform .15s;}
a.card:hover{border-color:var(--brand); box-shadow:var(--shadow-md);}
a.card .no{font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--brand-ink);
  font-variant-numeric:tabular-nums;}
a.card h3{margin-top:10px;}
a.card .arrow{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:20px; font-size:14px; font-weight:600; color:var(--brand-ink);}
a.card .arrow svg{transition:transform .15s;}
a.card:hover .arrow svg{transform:translateX(3px);}

/* --- 事業者情報 ----------------------------------------------------------- */
.meta{display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px;}
@media(min-width:640px){ .meta{grid-template-columns:repeat(2,1fr);} }
.meta div{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--shadow-sm);}
.meta dt{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;}
.meta dd{margin:0; font-size:15px; font-weight:500; line-height:1.6; color:var(--ink);}
.meta dd a{color:var(--brand-ink); text-decoration:none;}
.meta dd a:hover{text-decoration:underline;}

/* --- 表 ------------------------------------------------------------------- */
.tablewrap{overflow-x:auto; margin-top:24px; border:1px solid var(--line);
  border-radius:20px; background:var(--surface); box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch;}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; background:transparent;}
table.narrow{min-width:380px;}
th,td{text-align:left; padding:16px 20px; border-bottom:1px solid var(--line);
  vertical-align:top; line-height:1.8;}
thead th{background:var(--brand-soft); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-ink); white-space:nowrap;}
tbody td:first-child{font-weight:600; color:var(--ink);}
tbody td{color:var(--ink-2);}
tbody tr:last-child td{border-bottom:none;}
td.num{font-variant-numeric:tabular-nums;}
.fine{font-size:13.5px; line-height:1.8; color:var(--muted); margin:16px 0 0;}
.fine a{color:var(--brand-ink);}

/* --- 濃紺のCTAブロック ------------------------------------------------------ */
.deep{position:relative; overflow:hidden; border-top:1px solid var(--line);}
.deep::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--deep);}
.deep h2{color:#FFFFFF;}
.deep .eyebrow{color:#BFDBFE;}
.deep p{color:rgba(255,255,255,.82);}
.deep .actions{display:flex; flex-direction:column; gap:12px; margin-top:32px;}
@media(min-width:520px){ .deep .actions{flex-direction:row; align-items:center;} }
.deep .contact-note{margin-top:28px; font-size:14px; color:rgba(255,255,255,.75);}
.deep .contact-note a{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;}

/* --- 文書ページ ------------------------------------------------------------ */
.docpage{padding:48px 0 72px;}
@media(min-width:640px){ .docpage{padding:64px 0 96px;} }
.back{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  margin-bottom:32px; transition:border-color .15s,color .15s;}
.back:hover{border-color:var(--brand); color:var(--brand-ink);}
.docpage h1{font-size:clamp(28px,4.2vw,40px); margin-bottom:12px;}
.docpage .kicker{font-size:14px; font-weight:600; color:var(--brand-ink);}

.docbody{margin-top:36px;}
.docbody h2{font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:36px 0 10px;}
.docbody > h2:first-child{margin-top:0;}
/* 条の中の項見出し（利用規約 第10条の 1〜8）。条見出しより一段小さく */
.docbody h3{font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink-2); margin:26px 0 8px;}
.docbody p{margin:0 0 12px; font-size:15px; line-height:1.9; color:var(--ink-2);}
.docbody ol,.docbody ul{margin:0 0 12px; padding-left:1.5em; font-size:15px; line-height:1.9; color:var(--ink-2);}
.docbody li{margin:6px 0;}
.docbody .note{margin:20px 0 28px; padding:18px 20px; border:1px solid var(--brand-soft-2);
  border-radius:16px; background:var(--brand-soft); font-size:14.5px; line-height:1.8; color:var(--ink);}
.docbody > .note:first-child{margin-top:0;}
.docbody .sig{margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted);}
.docbody .download{margin-top:24px;}
.docbody .download a{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--surface);
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;}
.docbody .download a:hover{border-color:var(--brand); color:var(--brand-ink);}

/* --- footer --------------------------------------------------------------- */
footer{border-top:1px solid var(--line); background:var(--surface-2);}
footer .wrap{padding-top:56px; padding-bottom:48px;}
.foot-top{display:flex; flex-direction:column; gap:40px;}
@media(min-width:768px){ .foot-top{flex-direction:row; justify-content:space-between;} }
.foot-brand{max-width:24rem;}
.foot-brand b{font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.foot-brand p{margin:14px 0 0; font-size:14px; line-height:1.7; color:var(--ink-2);}
.foot-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px;}
@media(min-width:640px){ .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));} }
.foot-cols h3{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.foot-cols ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.foot-cols a{font-size:14px; color:var(--ink-2); text-decoration:none;}
.foot-cols a:hover{color:var(--brand-ink);}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted);}
.foot-bottom .license{font-weight:600; color:var(--ink-2);}

/* --- スクロールフェードイン（JSが動くときだけ適用） --------------------------- */
.js .reveal{opacity:0; transform:translateY(24px);
  transition:opacity .7s ease-out, transform .7s ease-out; will-change:opacity,transform;}
.js .reveal.is-visible{opacity:1; transform:none;}

:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important; animation:none!important;}
  .js .reveal{opacity:1; transform:none;}
}