/* 株式会社プライムITラボ
   紙面の上に墨の大きな文字。会社の色は朱。色の面で事業を分ける。
   書体は3つ: Archivo（社名と番号）／ゴシック（本文と見出し）／明朝（人の声）。
   たたき台と調査: PrimeITLab_strategy/マーケティング/コーポレートサイト/ */

:root {
  color-scheme: light;
  --kami: #F5F4F1;      /* 地 */
  --sumi: #282828;      /* 文字・墨の面 */
  --accent: #9E220E;    /* 会社の色＝深い朱（2026-10-06 本人決定。#C8442F から落ち着かせた） */
  --accent-on-dark: #D0573F; --accent-on-dark: color-mix(in srgb, var(--accent) 62%, var(--kami)); /* 墨の面の上だけ使う。同じ赤を明るくしたもの */
  --on-accent: #F5F4F1;
  --on-accent-line: rgba(245, 244, 241, 0.3);
  /* 灰色は3色から作る */
  --nezumi: #5F5E5B; --nezumi: color-mix(in srgb, var(--sumi) 72%, var(--kami));
  --keisen: #D3D1CC; --keisen: color-mix(in srgb, var(--sumi) 16%, var(--kami));
  --gin: #A9A7A3; --gin: color-mix(in srgb, var(--kami) 62%, var(--sumi));
  --yoru-sen: rgba(245, 244, 241, 0.16);
  --f-giant: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --f-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", serif;
  --f-body: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, "Hiragino Sans", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  /* 文字の大きさは7段 */
  --t-xs: 13px; --t-s: 16px; --t-m: 18px; --t-l: 22px; --t-xl: 32px; --t-2xl: 44px; --t-3xl: 76px;
}
/* ページを移るとき、0.3秒でふわっと切り替える（View Transitions。対応していないブラウザでは普通に移るだけ）。
   ヘッダーは名前を付けて切り離し、動かさない。動きを減らす設定の人には出さない */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
header.site { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--kami); color: var(--sumi); font-family: var(--f-body); letter-spacing: 0.05em; font-size: var(--t-s); line-height: 1.9;
  word-break: keep-all; overflow-wrap: anywhere; line-break: strict; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.on-accent :focus-visible, .end a.contact:focus-visible, .cta:focus-visible { outline-color: var(--sumi); }
.wrap { padding-inline: var(--gutter); }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.big { font-feature-settings: "palt"; letter-spacing: 0.02em; text-spacing-trim: trim-start; }
.num { font-family: var(--f-giant); font-stretch: 75%; font-weight: 800; letter-spacing: 0.04em; }
.sec-label { display: flex; gap: 14px; align-items: baseline; font-size: var(--t-xs); color: var(--nezumi); letter-spacing: 0.1em; }
.sec-label h2 { font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.1em; }
.sec-label .num { font-size: var(--t-l); color: var(--sumi); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--sumi); color: var(--kami); padding: 8px 14px; }

/* ── ヘッダー ── */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--kami); border-bottom: 1px solid var(--sumi); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.mark { font-family: var(--f-giant); font-weight: 900; font-stretch: 75%; font-size: var(--t-l); letter-spacing: 0.02em; text-decoration: none; }
nav.g { display: flex; gap: 22px; font-size: var(--t-s); align-items: center; }
nav.g a { text-decoration: none; }
/* 乗せると下線が左から伸びる。いま見ているページ（区画）の項目は下線を出したまま */
nav.g a:not(.cta) { position: relative; padding-block: 6px; }
nav.g a:not(.cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(.6,0,.2,1); }
nav.g a:not(.cta):hover::after, nav.g a:not(.cta):focus-visible::after, nav.g a.now::after, nav.g a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
/* お問い合わせ: 乗せると墨の面が左から満ちる */
nav.g .cta { position: relative; overflow: hidden; isolation: isolate; background: var(--accent); color: var(--on-accent); padding: 9px 18px; font-weight: 700; transition: color 0.35s; }
nav.g .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sumi); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s cubic-bezier(.6,0,.2,1); }
nav.g .cta:hover::before, nav.g .cta:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
nav.g .cta:hover, nav.g .cta:focus-visible { color: var(--kami); }
@media (max-width: 900px) { nav.g a:not(.cta) { display: none; } nav.g { gap: 12px; } }

/* ハンバーガー（900px 以下）。押すと3本線が×になり、メニューが上から降りてくる */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--sumi); }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform 0.35s cubic-bezier(.6,0,.2,1), opacity 0.2s; }
.menu-btn span:nth-child(1) { top: 14px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 28px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) { .menu-btn { display: block; } nav.g .cta { padding: 8px 14px; font-size: 14px; } }
.drawer { position: fixed; inset: 0; z-index: 4; background: var(--kami); padding: calc(env(safe-area-inset-top, 0px) + 86px) var(--gutter) 32px; overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer ol { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--sumi); }
.drawer li a { display: flex; gap: 18px; align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--keisen); text-decoration: none; font-size: var(--t-l); font-weight: 700; }
.drawer li a .num { font-size: var(--t-s); color: var(--accent); }
.drawer li a[aria-current="page"] { color: var(--accent); }
.drawer-end { display: grid; gap: 10px; margin-top: 28px; }
.drawer-end a { display: block; padding: 14px 18px; border: 1.5px solid var(--sumi); text-decoration: none; font-weight: 700; }
.drawer-end a.contact { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .drawer.open { animation: drop 0.45s cubic-bezier(.2,.75,.1,1); }
  .drawer.open li { animation: rise-in 0.5s cubic-bezier(.2,.75,.1,1) both; }
  .drawer.open li:nth-child(2) { animation-delay: 0.04s; } .drawer.open li:nth-child(3) { animation-delay: 0.08s; }
  .drawer.open li:nth-child(4) { animation-delay: 0.12s; } .drawer.open li:nth-child(5) { animation-delay: 0.16s; }
  @keyframes drop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes rise-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (min-width: 901px) { .drawer { display: none !important; } }

/* ── トップ: 最初の画面 ── */
.hero { min-height: min(calc(100svh - 72px), 860px); display: flex; flex-direction: column; padding-block: clamp(20px, 3vw, 32px) 0; }
.hero-bottom { margin-top: auto; padding-top: clamp(40px, 6vw, 96px); display: grid; gap: 24px; }
.hero-what { font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; line-height: 1.8; color: var(--nezumi); }
@media (max-width: 420px) { .hero-what { font-size: var(--t-s); letter-spacing: 0.02em; } }
@media (orientation: portrait), (max-width: 720px) { .hero { min-height: 0; } .hero-bottom { margin-top: 0; padding-top: 32px; } }
.strip { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
.track { display: flex; align-items: end; gap: 20px; width: max-content; padding-inline: 10px; }
.track figure { margin: 0; flex: none; height: clamp(240px, 30vh, 320px); border: 1px solid var(--keisen); background: #fff; }
.track img { display: block; height: 100%; width: auto; }
@media (max-width: 720px) { .track figure { height: 180px; } }
.strip-note { margin-top: 10px; text-align: right; font-size: var(--t-xs); color: var(--nezumi); }
.giant { font-family: var(--f-giant); font-weight: 900; font-stretch: 62%; line-height: 0.8; font-size: 18vw; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; padding-bottom: 0.04em; }
.giant .w { display: inline-block; margin-left: -0.035em; }
.giant i { display: inline-block; font-style: normal; }
@media (max-width: 600px) { .giant .w { display: block; } .giant .sp { display: none; } }

/* トップ: 何の会社かを一文で */
.mission { padding-block: clamp(72px, 10vw, 140px); border-top: 1px solid var(--sumi); }
.mission .lead { font-size: clamp(var(--t-xl), 5.6vw, var(--t-3xl)); line-height: 1.35; }
.mission p { margin-top: 28px; font-size: clamp(var(--t-s), 1.5vw, var(--t-m)); color: var(--nezumi); max-width: 34em; }
.mk { background-image: linear-gradient(var(--accent-on-dark), var(--accent-on-dark)); /* 帯は明るい赤（2026-10-06 本人） */ background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.36em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* トップ: 事業（フォルダのタブで重ねた色の面） */
.biz { padding-top: 56px; }
.biz > .sec-label { padding-inline: var(--gutter); margin-bottom: 64px; }
.folder { position: relative; margin-top: 50px; scroll-margin-top: 130px; }
.folder .tab { position: absolute; top: -46px; left: var(--tabx); height: 46px; padding: 0 22px; display: flex; align-items: center; font-weight: 700; font-size: var(--t-s); border-radius: 10px 10px 0 0; background: var(--fill); color: var(--ink); text-decoration: none; }
/* タブはページへのリンク。下線と矢印で押せると分かるようにし、乗せると持ち上がって下線を引き直す */
a.tab { gap: 10px; transition: top 0.3s cubic-bezier(.2,.75,.1,1), height 0.3s cubic-bezier(.2,.75,.1,1); }
a.tab .t { position: relative; }
a.tab .t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform-origin: left center; }
a.tab .arw { display: inline-block; font-size: 0.95em; transition: transform 0.3s; }
/* 持ち上げるときは上に伸ばす（下の面とつながったまま） */
.folder a.tab:hover, .folder a.tab:focus-visible { top: -52px; height: 52px; }
.folder.f-hp a.tab:hover, .folder.f-hp a.tab:focus-visible { top: -53.5px; }
a.tab:hover .arw, a.tab:focus-visible .arw { transform: translateX(5px); }
@media (prefers-reduced-motion: no-preference) {
  a.tab:hover .t::after, a.tab:focus-visible .t::after { animation: redraw 0.45s cubic-bezier(.6,0,.2,1); }
  @keyframes redraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.folder .panel { background: var(--fill); color: var(--ink); padding-block: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px 64px; }
.folder h3 { font-size: clamp(28px, 3.4vw, var(--t-2xl)); line-height: 1.35; }
.folder .for { margin-top: 18px; max-width: 32em; }
.f-ai { --fill: var(--accent); --ink: var(--on-accent); --line: var(--on-accent-line); --tabx: var(--gutter); }
.f-hp { --fill: var(--kami); --ink: var(--sumi); --line: var(--keisen); --tabx: calc(var(--gutter) + 150px); border-top: 1.5px solid var(--sumi); }
.f-hp .tab { border: 1.5px solid var(--sumi); border-bottom: 0; top: -47.5px; }
.f-edu { --fill: var(--sumi); --ink: var(--kami); --line: var(--yoru-sen); --tabx: calc(var(--gutter) + 350px); }
@media (max-width: 960px) { .folder .panel { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .f-hp { --tabx: calc(var(--gutter) + 100px); } .f-edu { --tabx: calc(var(--gutter) + 236px); }
  .folder .tab { padding: 0 12px; font-size: var(--t-xs); }
}

/* 罫線の表（項目名｜中身）。色の面の中でも使う */
.rows { margin: 0; border-top: 1.5px solid var(--ink, var(--sumi)); align-self: start; }
.rows > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding-block: 13px; border-bottom: 1px solid var(--line, var(--keisen)); }
.rows dt { font-weight: 700; }
.rows dd { margin: 0; }
.rows dd small { display: block; font-size: var(--t-xs); opacity: 0.72; letter-spacing: 0.05em; }
.rows.plain dt { font-weight: 400; color: var(--nezumi); }
@media (max-width: 720px) {
  .rows > div { grid-template-columns: 1fr; gap: 2px; }
  .rows dt { font-size: var(--t-xs); font-weight: 400; }
}
.go { margin-top: 22px; display: inline-flex; gap: 8px; font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }
.go .arw, .end .arw { display: inline-block; transition: transform 0.3s; }
.go:hover .arw, .end a:hover .arw { transform: translateX(8px); }

/* 進め方: 墨の面に明朝の大見出し。4段階を横1本に並べ、下を回って最初に戻る（スマホは縦） */
.how { background: var(--sumi); color: var(--kami); border-top: 1px solid var(--yoru-sen); padding-block: clamp(72px, 10vw, 140px); }
.how .sec-label { color: var(--gin); margin-bottom: 20px; }
.how .sec-label .num { color: var(--kami); }
.how h2 { font-family: var(--f-mincho); font-weight: 500; font-size: clamp(40px, 6vw, 88px); line-height: 1.2; letter-spacing: 0; }
.how .en { margin-top: 10px; font-family: var(--f-giant); font-stretch: 75%; font-weight: 600; font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--gin); }
.how .jp { margin-top: 26px; color: var(--gin); max-width: 34em; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li .num { font-size: var(--t-l); color: var(--nezumi); line-height: 1.3; transition: color 0.4s; }
.steps li b { display: block; transition: color 0.4s; }
.steps li em { font-style: normal; color: var(--nezumi); }
.steps li.on .num, .steps li.on b { color: var(--accent); }
/* 紙の上の手順（縦の一覧） */
.block .steps { border-top: 1px solid var(--keisen); }
.block .steps li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); padding-block: 13px; border-bottom: 1px solid var(--keisen); }

/* サイクル */
.cycle { --dot: 11px; --gap: 28px; position: relative; margin-top: clamp(48px, 6vw, 80px); }
.cycle .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.cycle .steps::before { content: ""; position: absolute; left: calc(var(--dot) / 2); right: calc(25% - var(--dot) / 2); top: calc(var(--dot) / 2); height: 1px; background: var(--yoru-sen); }
.cycle .steps li { position: relative; padding: calc(var(--dot) + 24px) var(--gap) 0 0; display: grid; gap: 8px; align-content: start; }
.cycle .steps li::before { content: ""; position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--kami); transition: background 0.4s, transform 0.4s; }
.cycle .steps li:not(:last-child)::after { content: ""; position: absolute; right: calc(var(--gap) - 2px); top: calc(var(--dot) / 2 - 4px); width: 8px; height: 8px; border-top: 1px solid var(--gin); border-right: 1px solid var(--gin); transform: rotate(45deg); }
.cycle .steps li .num { font-size: var(--t-xl); color: var(--gin); }
.cycle .steps li b { font-size: var(--t-l); }
.cycle .steps li em { color: var(--gin); font-size: var(--t-s); }
.cycle .steps li.on::before { background: var(--accent-on-dark); transform: scale(1.4); }
.cycle .steps li.on .num, .cycle .steps li.on b { color: var(--accent-on-dark); }
/* 最後から最初へ、下を回って戻る線 */
.cycle .loop { position: relative; margin: 28px calc(25% - var(--dot) / 2) 0 calc(var(--dot) / 2); height: 56px; border: 1px solid var(--yoru-sen); border-top: 0; border-radius: 0 0 28px 28px; }
.cycle .loop::before { content: ""; position: absolute; left: -5px; top: -2px; width: 9px; height: 9px; border-top: 1px solid var(--gin); border-left: 1px solid var(--gin); transform: rotate(45deg); }
.cycle .loop span .tcy { text-combine-upright: all; }
.cycle .loop > span { position: absolute; left: 50%; bottom: -0.9em; transform: translateX(-50%); background: var(--sumi); padding-inline: 14px; font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--gin); white-space: nowrap; }
@media (max-width: 860px) {
  .cycle .steps { grid-template-columns: 1fr; padding-left: 0; }
  .cycle .steps::before { left: calc(var(--dot) / 2); right: auto; width: 1px; top: calc(var(--dot) / 2); bottom: 40px; width: 1px; height: auto; }
  .cycle .steps li { padding: 0 56px 32px calc(var(--dot) + 22px); }
  .cycle .steps li:not(:last-child)::after { display: none; }
  /* スマホ: 右側を回って最初に戻る */
  .cycle .loop { position: absolute; margin: 0; right: 0; top: calc(var(--dot) / 2); bottom: 52px; height: auto; width: 32px; border: 1px solid var(--yoru-sen); border-left: 0; border-radius: 0 24px 24px 0; }
  .cycle .loop::before { left: -4px; top: -5px; transform: rotate(-45deg); }
  .cycle .loop > span { left: auto; right: -0.6em; top: 50%; bottom: auto; transform: translateY(-50%); writing-mode: vertical-rl; padding: 10px 0; }
}

/* 発信: 縦1列の一覧 */
.works { padding-block: clamp(72px, 10vw, 130px); }
.works h2 { font-size: clamp(28px, 3.4vw, var(--t-2xl)); margin-top: 16px; }
.out { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px 40px; border-top: 1.5px solid var(--sumi); padding-block: 26px; margin-top: 32px; }
.out + .out { margin-top: 0; }
.out-kind { display: flex; align-items: center; gap: 12px; font-family: var(--f-giant); font-stretch: 75%; font-weight: 700; letter-spacing: 0.06em; font-size: var(--t-m); }
.logo { width: 34px; height: auto; color: var(--sumi); flex: none; }
.ch { list-style: none; margin: 0; padding: 0; display: grid; }
.ch li { display: grid; grid-template-columns: 17em minmax(0, 1fr); gap: 4px 28px; align-items: baseline; padding-block: 14px; border-top: 1px solid var(--keisen); }
.ch li:first-child { border-top: 0; padding-top: 0; }
.ch .ttl { font-size: var(--t-m); font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; justify-self: start; }
.ch .ttl span { color: var(--accent); font-size: var(--t-s); font-weight: 700; transition: color 0.2s; }
.ch .ttl:hover { text-decoration: underline; text-decoration-color: var(--sumi); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ch .ttl:hover span { color: var(--sumi); }
.ch li > span { color: var(--nezumi); }
@media (max-width: 820px) { .out { grid-template-columns: 1fr; } .ch li { grid-template-columns: 1fr; } }

/* 代表: 写真と明朝の横書き */
.diary { border-top: 1px solid var(--sumi); padding-block: clamp(72px, 9vw, 120px); }
.diary .sec-label { margin-bottom: clamp(32px, 4vw, 56px); }
/* 写真と言葉のまとまりは中央に寄せる（見出しの番号はほかの区画と同じ左端） */
.founder { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 34em); justify-content: center; gap: 32px clamp(40px, 6vw, 96px); align-items: center; }
.photo { margin: 0; display: grid; gap: 14px; }
.photo img { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo figcaption { display: grid; gap: 2px; }
.photo figcaption span { font-size: var(--t-xs); color: var(--nezumi); letter-spacing: 0.1em; }
.photo figcaption b { font-family: var(--f-mincho); font-size: var(--t-l); letter-spacing: 0.1em; }
.msg { font-family: var(--f-mincho); font-weight: 500; font-size: var(--t-m); line-height: 2.1; letter-spacing: 0.05em; max-width: 30em; display: grid; gap: 1.2em; }
.msg p { text-wrap: wrap; }
.msg h3 { font-family: var(--f-mincho); font-size: clamp(24px, 2.4vw, var(--t-xl)); line-height: 1.6; letter-spacing: 0.04em; }
@media (max-width: 720px) { .founder { grid-template-columns: 1fr; justify-content: start; } } @media (max-width: 600px) { .photo img { max-width: 220px; } .msg { font-size: var(--t-s); line-height: 2.0; } .msg br { display: none; } }

/* 最後の2枚（お問い合わせ／LINE） */
.end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); scroll-margin-top: 80px; }
.end a { display: grid; gap: 10px; padding: clamp(36px, 5vw, 64px) var(--gutter); text-decoration: none; min-height: 220px; align-content: end; }
.end a.contact { background: var(--accent); color: var(--on-accent); }
.end a:first-of-type { border-right: 1.5px solid var(--sumi); }
.end .en { font-family: var(--f-giant); font-stretch: 75%; font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.1em; }
.end .jp { font-weight: 700; font-size: clamp(var(--t-xl), 4.5vw, 60px); line-height: 1.2; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.end .sub { font-size: var(--t-s); opacity: 0.85; }
.end.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.end.three a + a { border-left: 1.5px solid var(--sumi); }
.end.three a:first-of-type { border-right: 0; }
.end.three .jp { font-size: clamp(28px, 3.4vw, 48px); }
@media (max-width: 960px) { .end.three { grid-template-columns: 1fr; } .end.three a + a { border-left: 0; border-top: 1.5px solid var(--sumi); } }
@media (max-width: 720px) { .end a { min-height: 140px; } .end { grid-template-columns: 1fr; } .end a:first-of-type { border-right: 0; border-bottom: 1.5px solid var(--sumi); } }

/* ── 下層ページ ── */
.crumb { font-size: var(--t-xs); color: var(--nezumi); padding-block: 18px 0; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crumb li + li::before { content: "／"; margin-right: 10px; color: var(--keisen); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ページの頭: 事業ページはトップのフォルダと同じ色の面にする */
.page-hero { position: relative; margin-top: 56px; background: var(--fill, var(--kami)); color: var(--ink, var(--sumi)); padding-block: clamp(48px, 7vw, 96px); }
.page-hero .tab { position: absolute; top: -46px; left: var(--gutter); height: 46px; padding: 0 22px; display: flex; align-items: center; font-weight: 700; border-radius: 10px 10px 0 0; background: var(--fill, var(--kami)); color: var(--ink, var(--sumi)); }
.page-hero.f-hp .tab { border: 1.5px solid var(--sumi); border-bottom: 0; top: -47.5px; }
.page-hero h1 { font-size: clamp(36px, 5.6vw, var(--t-3xl)); line-height: 1.3; max-width: 16em; }
.page-hero .lead { margin-top: 24px; font-size: clamp(var(--t-s), 1.5vw, var(--t-m)); max-width: 34em; opacity: 0.88; }
.page-hero.plain { margin-top: 0; padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--sumi); }
.page-hero.plain h1 { font-size: clamp(32px, 4.4vw, 56px); }
.page-hero .en-title { font-family: var(--f-giant); font-stretch: 75%; font-weight: 800; font-size: var(--t-xs); letter-spacing: 0.12em; margin-bottom: 14px; opacity: 0.8; }

.block { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--sumi); }
.block:first-of-type { border-top: 0; }
.block > .sec-label { margin-bottom: 20px; }
.block h2.h { font-size: clamp(28px, 3.4vw, var(--t-2xl)); line-height: 1.4; max-width: 20em; }
.block .intro { margin-top: 18px; color: var(--nezumi); max-width: 36em; }
.two { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 64px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.block .rows, .block .steps, .block .checks, .block .faq, .block .samples { margin-top: 32px; }

/* チェックの一覧（こんな会社に） */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--sumi); }
.checks li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--keisen); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* よくある質問（開くと＋が回る） */
.faq { border-top: 1.5px solid var(--sumi); }
.faq details { border-bottom: 1px solid var(--keisen); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding-block: 18px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-giant); font-weight: 600; font-size: 26px; line-height: 1; color: var(--accent); transition: transform 0.3s; justify-self: end; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 20px; color: var(--nezumi); max-width: 40em; }

/* 業種別の見本 */
.samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.samples figure { margin: 0; display: grid; gap: 10px; }
.samples img { display: block; width: 100%; height: auto; border: 1px solid var(--keisen); background: #fff; }
.samples figcaption { font-size: var(--t-xs); color: var(--nezumi); }
.samples figcaption b { display: block; color: var(--sumi); font-size: var(--t-s); }
@media (max-width: 860px) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 料金の大きい数字 */
.price { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; margin-top: 28px; }
.price div { display: grid; }
.price span { font-size: var(--t-xs); color: var(--nezumi); }
.price b { font-family: var(--f-giant); font-stretch: 75%; font-weight: 800; font-size: clamp(44px, 6vw, 72px); line-height: 1; }
.price b small { font-family: var(--f-body); font-size: var(--t-m); font-weight: 700; margin-left: 4px; }
.note { margin-top: 14px; font-size: var(--t-xs); color: var(--nezumi); }

/* お問い合わせフォーム */
.form { display: grid; gap: 22px; max-width: 720px; margin-top: 32px; }
.form label, .form fieldset { display: grid; gap: 8px; font-weight: 700; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form legend { padding: 0; margin-bottom: 8px; }
.form .req { color: var(--accent); font-size: var(--t-xs); margin-left: 8px; }
.form .opt { color: var(--nezumi); font-size: var(--t-xs); font-weight: 400; margin-left: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  font: inherit; font-weight: 400; letter-spacing: 0.03em; color: var(--sumi); background: #fff; border: 1px solid var(--keisen); border-bottom: 1.5px solid var(--sumi); padding: 12px 14px; border-radius: 0; width: 100%; }
.form textarea { min-height: 180px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sumi); box-shadow: inset 0 -2px 0 var(--accent); }
.form .choices { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 400; }
.form .choices label { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; border: 1px solid var(--keisen); padding: 8px 14px; cursor: pointer; background: #fff; }
.form .choices input { accent-color: var(--accent); }
.form .agree { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.form .agree input { accent-color: var(--accent); width: 18px; height: 18px; }
.form .hp-field { position: absolute; left: -9999px; }
.form button { justify-self: start; font: inherit; font-weight: 700; letter-spacing: 0.08em; background: var(--accent); color: var(--on-accent); border: 0; padding: 16px 40px; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color 0.35s; }
.form button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sumi); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s cubic-bezier(.6,0,.2,1); }
.form button:hover::before { transform: scaleX(1); transform-origin: left center; }
.form button[disabled] { opacity: 0.6; cursor: wait; }
.form-msg { font-weight: 700; }
.form-msg.err { color: var(--accent); }
.line-box { margin-top: 40px; border-top: 1.5px solid var(--sumi); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.line-box a { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }

/* 規約の文章 */
.legal { max-width: 46em; padding-block: clamp(48px, 6vw, 80px); }
.legal h2 { font-size: var(--t-m); margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--keisen); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul, .legal ol { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal li + li { margin-top: 4px; }
.legal .rows { margin-top: 0; }
.legal .rows > div { grid-template-columns: 12em minmax(0, 1fr); }
@media (max-width: 720px) { .legal .rows > div { grid-template-columns: 1fr; } }
.legal .date { margin-top: 40px; color: var(--nezumi); font-size: var(--t-xs); }
.todo { background: none; color: var(--accent); font-weight: 700; }

/* ── フッター ── */
.company { padding-block: clamp(64px, 8vw, 110px) 24px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 64px; scroll-margin-top: 80px; }
.company h2 { font-size: var(--t-xl); margin-top: 16px; }
@media (max-width: 720px) { .company { grid-template-columns: 1fr; } }
footer.site { padding-block: 28px 24px; border-top: 1px solid var(--sumi); }
footer .rows-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: var(--t-xs); color: var(--nezumi); }
footer .rows-f nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer .rows-f nav a { text-decoration: none; padding-block: 8px; }
footer .rows-f nav a:hover { color: var(--sumi); }
footer .rows-f small { padding-block: 8px; font-size: var(--t-xs); }
footer .giant { margin-top: 28px; }

/* ── 動き。止まっている状態でも全部読める。JS が動いたときだけ「入る前」を作る ── */
@media (prefers-reduced-motion: no-preference) {
  .giant i { transition: transform 0.9s cubic-bezier(.2,.75,.1,1); transition-delay: calc(var(--i) * 45ms); }
  .anim .giant:not(.in) i { transform: translateY(105%); }
  .anim .rise { transition: transform 0.9s cubic-bezier(.2,.75,.1,1); }
  .anim .rise:not(.in) { transform: translateY(28px); }
  .anim .mk { transition: background-size 1.2s cubic-bezier(.6,0,.2,1) 0.2s; }
  .anim .mk:not(.in) { background-size: 0% 0.36em; }
  .track { animation: flow 70s linear infinite; }
  .strip:hover .track, .strip.off .track { animation-play-state: paused; }
  @keyframes flow { to { transform: translateX(-50%); } }
}