@charset "UTF-8";
/* =========================================================
   下層ページ共通（style.css の後に読み込む）
   ページごとのテーマ色は <body style="--c:..."> で切り替える
   ========================================================= */
body { --c: var(--nova); }

/* ---------- ページヒーロー ---------- */
.page-hero {
  position: relative; overflow: hidden; min-height: min(78svh, 760px); display: grid; align-items: end;
  padding: calc(var(--header-h) + 60px) 0 clamp(56px, 8vw, 96px);
  background: radial-gradient(900px 600px at 80% 40%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), var(--ink);
}
.page-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.page-hero .hero-grid { mask-image: radial-gradient(ellipse at 75% 50%, #000 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 75% 50%, #000 10%, transparent 65%); }
.page-hero-in { position: relative; z-index: 2; pointer-events: none; }
.page-hero-in a { pointer-events: auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 500 11px/1.6 var(--f-mono); letter-spacing: .08em; color: var(--mute-d); margin-bottom: 28px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.crumbs a:hover { color: var(--text-d); }
.crumbs [aria-current] { color: var(--c); }
.page-en { font: 500 12px var(--f-mono); letter-spacing: .14em; color: var(--c); margin-bottom: 14px; }
.page-title { font-size: clamp(40px, 8.4vw, 112px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; text-shadow: 0 4px 40px rgba(6,8,15,.7); }
.page-title > span { display: block; }
.js.motion .page-title > span { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.page-title em { font-style: normal; color: var(--c); }
.page-lead { margin-top: 24px; max-width: 620px; color: #c9cfdd; font-size: clamp(15px, 1.35vw, 17px); text-shadow: 0 2px 16px rgba(6,8,15,.9); }
.page-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.page-tags li { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-d); background: rgba(6,8,15,.6); backdrop-filter: blur(6px); }

/* ページ内目次 */
.toc { position: sticky; top: var(--header-h); z-index: 50; background: rgba(244,241,234,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-p); color: var(--text-p); }
.toc ul { display: flex; gap: 4px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.toc ul::-webkit-scrollbar { display: none; }
.toc a { display: block; white-space: nowrap; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; transition: background .3s; }
.toc a:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }

/* ---------- 見出しまわり ---------- */
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) { .sec-head.split { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.sec-head .h2 { margin-bottom: 0; }
.paper .sec-head .lead { color: var(--mute-p); }
.h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 900; line-height: 1.35; }

/* ---------- お悩み（吹き出し） ---------- */
.pains { display: grid; gap: 14px; }
@media (min-width: 768px) { .pains { grid-template-columns: repeat(2, 1fr); } }
.pain { position: relative; padding: 20px 22px 20px 58px; border-radius: 18px 18px 18px 4px; background: var(--paper-2); border: 1.5px solid var(--text-p); font-weight: 700; line-height: 1.7; transition: transform .5s var(--ease); }
.pain:nth-child(odd) { transform: rotate(-.6deg); }
.pain:nth-child(even) { transform: rotate(.6deg); }
.pain:hover { transform: rotate(0) translateY(-3px); }
.pain::before { content: "?"; position: absolute; left: 16px; top: 18px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--ink); font: 700 15px var(--f-en); }
.pain-answer { margin-top: 28px; font-size: clamp(18px, 2vw, 24px); font-weight: 900; line-height: 1.6; }
.pain-answer em { font-style: normal; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--c) 60%, transparent) 60% 92%, transparent 92%); }

/* ---------- サービス詳細ブロック ---------- */
.detail { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-d); scroll-margin-top: calc(var(--header-h) + 60px); }
.paper .detail { border-color: var(--line-p); }
.detail:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 960px) { .detail { grid-template-columns: .9fr 1.1fr; } }
.detail-no { font: 700 12px var(--f-mono); letter-spacing: .12em; color: var(--c); }
.paper .detail-no { color: var(--text-p); }
.paper .detail-no::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--c); transform: rotate(45deg); }
.detail h3 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; line-height: 1.3; margin: 10px 0 16px; }
.detail .lead { max-width: none; }
.paper .detail .lead { color: #3a4052; }
.detail-side { display: grid; gap: 14px; align-content: start; }

.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding: 14px 16px 14px 46px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line-d); font-size: 14.5px; line-height: 1.75; }
.paper .checks li { background: var(--paper-2); border-color: var(--line-p); }
.checks li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 16px; height: 9px; border-left: 2.5px solid var(--c); border-bottom: 2.5px solid var(--c); transform: rotate(-45deg); }
.paper .checks li::before { border-color: var(--text-p); }
.checks b { display: block; font-size: 15.5px; margin-bottom: 2px; }

/* ---------- ステップ（横並び） ---------- */
.flow { display: grid; gap: 12px; counter-reset: flow; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.flow li { position: relative; padding: 22px 20px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-d); counter-increment: flow; }
.paper .flow li { background: var(--paper-2); border: 1.5px solid var(--text-p); box-shadow: 5px 5px 0 var(--text-p); }
.flow li::before { content: counter(flow, decimal-leading-zero); display: block; font: 700 40px/1 var(--f-en); color: var(--c); margin-bottom: 12px; letter-spacing: -.03em; }
.paper .flow li::before { color: transparent; -webkit-text-stroke: 1.5px var(--text-p); }
.flow h4 { font-size: 18px; line-height: 1.45; margin-bottom: 6px; }
.flow p { font-size: 13.5px; line-height: 1.85; color: var(--mute-d); }
.paper .flow p { color: #3a4052; }
.flow small { display: block; font: 500 10.5px var(--f-mono); letter-spacing: .1em; color: var(--mute-d); margin-bottom: 4px; }
@media (min-width: 900px) {
  .flow li:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 30px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--c); color: var(--ink); }
}

/* ---------- 使いみちカード ---------- */
.cases { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.case { padding: 20px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-d); transition: transform .5s var(--ease), border-color .3s; }
.case:hover { transform: translateY(-4px); border-color: var(--c); }
.case .mono { font-size: 10.5px; color: var(--c); }
.case h4 { font-size: 17px; margin: 6px 0; line-height: 1.5; }
.case p { font-size: 13.5px; color: var(--mute-d); line-height: 1.85; }
.note { margin-top: 14px; font-size: 12px; color: var(--mute-d); }
.paper .note { color: var(--mute-p) !important; }

/* ---------- 比較表 ---------- */
.vs { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr auto 1fr; } }
.vs-col { border-radius: 20px; padding: clamp(20px, 2.6vw, 32px); border: 1.5px solid var(--text-p); }
.vs-col.bad { background: var(--paper); color: var(--mute-p); }
.vs-col.good { background: var(--ink); color: var(--text-d); box-shadow: 8px 8px 0 var(--c); }
.vs-col h4 { font-size: 18px; margin-bottom: 14px; }
.vs-col dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px 14px; font-size: 14px; }
.vs-col dt { font: 500 11px/2 var(--f-mono); letter-spacing: .06em; opacity: .7; }
.vs-col.good dd { font-weight: 700; }
.vs-mid { display: grid; place-items: center; font: 700 22px var(--f-en); color: var(--c); }
.paper .vs-col.bad p, .paper .vs-col.bad dd { color: var(--mute-p) !important; }

/* ---------- 情報テーブル（会社概要・募集要項） ---------- */
.info-table { border-top: 1.5px solid var(--text-p); }
.info-table > div { display: grid; gap: 4px 24px; padding: 18px 4px; border-bottom: 1px solid var(--line-p); }
@media (min-width: 768px) { .info-table > div { grid-template-columns: 11em 1fr; } }
.info-table dt { font-weight: 700; font-size: 14px; }
.info-table dt small { display: block; font: 500 10.5px var(--f-mono); letter-spacing: .1em; color: var(--mute-p); }
.info-table dd { font-size: 14.5px; line-height: 1.95; }
.info-table dd small { display: block; font-size: 12.5px; color: var(--mute-p); }
.info-table a { border-bottom: 1px solid currentColor; }

/* ---------- 大きな数字 ---------- */
.big-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .big-nums { grid-template-columns: repeat(4, 1fr); } }
.big-nums li { padding: 22px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-d); }
.big-nums b { display: block; font: 700 clamp(40px, 5vw, 64px)/1 var(--f-en); color: var(--c); letter-spacing: -.03em; }
.big-nums b small { font-size: .4em; margin-left: 2px; }
.big-nums span { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 700; }

/* ---------- 4つの場（会社概要） ---------- */
.fields { display: grid; gap: 16px; }
@media (min-width: 768px) { .fields { grid-template-columns: repeat(2, 1fr); } }
.field-card { --fc: var(--nova); position: relative; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--paper-2); border: 1.5px solid var(--text-p); box-shadow: 6px 6px 0 var(--fc); overflow: hidden; transition: transform .5s var(--ease); }
.field-card:hover { transform: translate(-3px, -3px) rotate(-.4deg); }
.field-card .mono { font-size: 10.5px; color: var(--mute-p); }
.field-card h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; margin: 8px 0 10px; }
.field-card p { font-size: 14.5px; color: #3a4052 !important; }
.field-card .badge { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--fc); }

/* ---------- 他のサービスへ ---------- */
.next-svc { display: grid; gap: 12px; }
@media (min-width: 768px) { .next-svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .next-svc { grid-template-columns: repeat(4, 1fr); } }
.next-svc a { --nc: var(--nova); position: relative; display: grid; gap: 4px; padding: 22px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-d); overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
.next-svc a::after { content: "→"; position: absolute; right: 20px; top: 20px; font-size: 18px; color: var(--nc); transition: transform .4s var(--ease); }
.next-svc a:hover { transform: translateY(-4px); border-color: var(--nc); }
.next-svc a:hover::after { transform: translateX(4px); }
.next-svc a[aria-current] { opacity: .45; pointer-events: none; }
.next-svc i { font: 500 10.5px var(--f-mono); font-style: normal; letter-spacing: .1em; color: var(--nc); }
.next-svc b { font-size: 18px; }
.next-svc small { font-size: 12.5px; color: var(--mute-d); }

/* ---------- 下層CTA ---------- */
.cta.cta-sub { padding-block: clamp(96px, 13vw, 170px); }
.cta-sub .cta-title { font-size: clamp(28px, 5vw, 64px); margin-bottom: 20px; }
.cta-sub p.cta-text { max-width: 620px; margin: 0 auto 36px; color: #c9cfdd; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 採用ページ ---------- */
.welcome { display: grid; gap: 14px; }
@media (min-width: 900px) { .welcome { grid-template-columns: repeat(3, 1fr); } }
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.perks li { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--text-p); }
.message { display: grid; gap: 28px; }
@media (min-width: 960px) { .message { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.message-body p + p { margin-top: 1.2em; }
.message-body em { font-style: normal; font-weight: 700; color: var(--c); }
.entry { display: grid; gap: 12px; }
@media (min-width: 900px) { .entry { grid-template-columns: repeat(3, 1fr); } }
.entry a, .entry div { display: grid; gap: 4px; padding: 24px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-d); transition: border-color .3s, transform .5s var(--ease); }
.entry a:hover { border-color: var(--c); transform: translateY(-4px); }
.entry .mono { font-size: 10.5px; color: var(--c); }
.entry b { font-size: 18px; }
.entry span { font-size: 13.5px; color: var(--mute-d); }

/* ---------- 本文（プライバシーポリシー等） ---------- */
.prose { max-width: 820px; }
.prose h2 { font-size: clamp(19px, 2vw, 23px); margin: 2.4em 0 .8em; padding-left: 14px; border-left: 4px solid var(--c); line-height: 1.5; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; line-height: 2; }
.prose ol, .prose ul { padding-left: 1.4em; margin: .6em 0; }
.prose ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose .sign { margin-top: 3em; text-align: right; }

/* お問い合わせページ：フォームを広めに */
.contact-page .contact-grid { align-items: start; }

/* 現在ページのナビ・暗いセクションの見出しラベルをページ色に */
.gnav a[aria-current] { background: color-mix(in srgb, var(--c) 18%, transparent); }
.gnav a[aria-current] span { color: var(--c); }
.sec:not(.paper) .eyebrow { color: var(--c); }
@media (max-width: 767px) { .page-hero { padding-top: calc(var(--header-h) + 34vw); } }