/* ひかりや ビルサービス（デモ）— 白い地・紺・光の黄は差し色だけ。階数の札と床の目地の線 */
:root {
  --navy: #1E3A5F;
  --ink: #1B2633;
  --y: #FFD54F;
  --pale: #EEF2F7;
  --n10: rgba(30, 58, 95, .10);
  --n15: rgba(30, 58, 95, .15);
  --n20: rgba(30, 58, 95, .20);
  --n60: rgba(30, 58, 95, .60);
  --sans: 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --num: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(20px, 4vw, 48px);
  --max: 1180px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --head: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--head) + 16px); }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.85 var(--sans); overflow-x: clip; word-break: auto-phrase; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.45; font-feature-settings: "palt"; text-wrap: balance; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--max), 100% - var(--pad) * 2); margin-inline: auto; }
.num { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
.ph-w { display: inline-block; }
a[href^="tel:"] { white-space: nowrap; }
.small { font-size: 13.5px; line-height: 1.8; color: #44505E; margin-top: 16px; }

/* ロゴ */
.logo { display: block; width: 168px; height: auto; color: var(--navy); overflow: visible; }
.logo__name { font-family: var(--sans); font-weight: 700; font-size: 26px; fill: currentColor; letter-spacing: .02em; }
.logo__sub { font-family: var(--sans); font-weight: 700; font-size: 10.5px; fill: currentColor; letter-spacing: .32em; }
.mk__box { fill: var(--navy); }
.mk__frame { fill: none; stroke: #fff; stroke-width: 2.2; }
.mk__lit { fill: var(--y); }
.logo--w { color: #fff; }
.logo--w .mk__box { fill: #fff; }
.logo--w .mk__frame { stroke: var(--navy); }

/* ボタン・文字のリンク */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; text-decoration: none; font: 700 15px/1.4 var(--sans); padding: 15px 24px 13px; border: 0; border-bottom: 3px solid var(--y); border-radius: 3px; cursor: pointer; transition: background-color .2s; }
.btn:hover { background: #16304F; }
.btn .arw { font-family: var(--num); transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn--sm { padding: 9px 16px 7px; font-size: 14px; }
.tl { color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--n60); padding-bottom: 1px; }
.tl:hover { border-bottom-color: var(--navy); border-bottom-width: 2px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* ヘッダー */
.head { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--n15); }
.head__in { width: min(1320px, 100% - var(--pad) * 2); margin-inline: auto; height: var(--head); display: flex; align-items: center; gap: 12px; }
.brand { display: block; text-decoration: none; flex: none; }
.demo { font: 500 10px/1 var(--num); letter-spacing: .12em; color: #5A6675; border: 1px solid var(--n20); padding: 3px 5px 2px; border-radius: 2px; align-self: center; }
.gnav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.gnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.gnav li a { position: relative; display: block; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 10px 0; color: var(--ink); }
.gnav li a::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 2px; background: var(--n20); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.gnav li a:hover::after { transform: scaleX(1); }
.gnav li a[aria-current="page"]::after { width: 22px; height: 3px; background: var(--y); transform: none; }
.gnav__end { display: flex; align-items: center; gap: 16px; }
.head__tel { display: grid; text-decoration: none; line-height: 1.15; text-align: right; }
.head__tel b { font: 500 19px/1.1 var(--num); font-variant-numeric: tabular-nums; color: var(--navy); }
.head__tel small { font-size: 11px; color: #4C5866; }
.menu { display: none; }

/* 床の目地の線（区画の区切り） */
.joint { height: 8px; background:
  linear-gradient(var(--n15), var(--n15)) top / 100% 1px no-repeat,
  linear-gradient(var(--n15), var(--n15)) bottom / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, var(--n15) 0 1px, transparent 1px 60px); }

/* 区画 */
.sec { padding: clamp(64px, 8vw, 104px) 0; }
.sec--pale { background: var(--pale); }
.sec__head { margin-bottom: 32px; }
.fl { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 42px; padding: 0 10px; border-radius: 3px; background: var(--navy); color: #fff; font: 500 15px/1 var(--num); letter-spacing: .04em; overflow: hidden; vertical-align: middle; }
.fl span { display: block; }
.h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 14px; color: var(--ink); }
.h3 { font-size: clamp(19px, 1.9vw, 22px); }
.lead { font-size: clamp(15.5px, 1.25vw, 17px); max-width: 40em; }

/* 写真と時刻の札 */
.pic { position: relative; margin: 0; }
.pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tt { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); font: 500 14px/1 var(--num); font-variant-numeric: tabular-nums; padding: 7px 11px 6px 9px; }
.tt::before { content: ""; width: 3px; height: 15px; background: var(--y); }

/* 最初の画面 */
.gate { display: flex; align-items: center; min-height: 44px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; position: relative; z-index: 2; }
.gate__in { width: min(1320px, 100% - var(--pad) * 2); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; padding: 9px 0; line-height: 1.45; }
.gate__arw { color: var(--y); font-family: var(--num); margin-left: 6px; display: inline-block; transition: transform .25s var(--ease); }
.gate:hover .gate__arw { transform: translateX(4px); }
.gate__sub { font-weight: 400; font-size: 13.5px; opacity: .92; }
.gate--top { box-shadow: inset 0 -2px 0 var(--y); }
.gate--btm { box-shadow: inset 0 2px 0 var(--y); }
.hero__ph { position: relative; height: 75vh; height: 75svh; min-height: 520px; max-height: 820px; overflow: hidden; container-type: size; background: #3B4A5C; color: #fff; }
.hero__frame { position: absolute; top: 50%; width: max(100cqw, 175cqh); aspect-ratio: 1344 / 768; left: calc((100cqw - max(100cqw, 175cqh)) * .66); transform: translateY(-50%); }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__light { position: absolute; left: 64%; top: 44%; width: 14%; height: 56%; background: linear-gradient(180deg, rgba(255, 248, 228, .95), rgba(255, 248, 228, .35) 40%, rgba(255, 248, 228, 0) 90%); filter: blur(10px); mix-blend-mode: screen; opacity: .9; transform-origin: top center; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 58, 95, 0) 30%, rgba(30, 58, 95, .6) 50%, rgba(30, 58, 95, .6)); }
.hero__txt { position: absolute; left: 0; right: 0; bottom: 64px; }
.hero__txt h1 { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.45; max-width: 15em; letter-spacing: .01em; text-shadow: 0 1px 12px rgba(16, 32, 56, .35); }
.hero__txt p { max-width: 34em; margin-top: 18px; font-size: clamp(15px, 1.2vw, 17px); text-shadow: 0 1px 8px rgba(16, 32, 56, .4); }
.hero__txt .acts { margin-top: 26px; }
.hero__txt .tl { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.hero__ph .tt { left: max(var(--pad), calc((100% - min(1320px, 100% - var(--pad) * 2)) / 2)); bottom: 18px; }
.hero__ph > .tt { z-index: 1; }

/* 階数の表示（トップのみ・広い画面） */
.lift { position: fixed; right: 22px; top: 50%; z-index: 30; width: 52px; padding: 8px 0 7px; background: var(--navy); color: #fff; border-radius: 3px; display: none; text-align: center; transform: translateY(-50%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.lift.is-on { opacity: 1; }
.lift__arw { display: block; width: 0; height: 0; margin: 0 auto 5px; border: 6px solid transparent; border-bottom: 8px solid var(--y); border-top: 0; transition: opacity .3s; }
.lift__win { height: 22px; overflow: hidden; font: 500 17px/22px var(--num); color: #fff; }
.lift__n { display: block; }
.lift.is-idle .lift__arw { opacity: .25; }
@media (min-width: 1280px) { .js .lift { display: block; } }

/* 2列の組み方 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--r .split__pic { order: 2; }
.split__pic { min-width: 0; }
.split--narrow { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.split--fig { grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); align-items: center; }

/* 表（報告書のような罫線） */
.rt { width: 100%; font-size: 15.5px; line-height: 1.75; border-top: 1px solid var(--n20); }
.rt th, .rt td { text-align: left; vertical-align: top; padding: 16px 14px 15px 0; border-bottom: 1px solid var(--n20); }
.rt th { color: var(--navy); font-weight: 700; white-space: nowrap; padding-right: 28px; }
.rt td + td { padding-left: 14px; }
.rt thead th { font-size: 13px; font-weight: 700; color: #4C5866; padding-top: 10px; padding-bottom: 9px; }
.rt--wide th { width: 11em; white-space: normal; }
.rt .cnt { white-space: nowrap; }
.rt--do th, .rt--do td { width: 50%; white-space: normal; }

/* 3つの決まり（料金） */
.three { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 30px; border-top: 2px solid var(--navy); }
.three > div { padding: 22px 26px 4px 0; }
.three > div + div { border-left: 1px solid var(--n20); padding-left: 26px; }
.three b { display: block; font-size: 22px; color: var(--navy); margin-bottom: 6px; }
.three p { font-size: 15.5px; }

/* 会社のこと（トップ） */
.coinfo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* 下層の頭 */
.phead__ph { position: relative; height: 45vh; height: 45svh; min-height: 280px; max-height: 520px; overflow: hidden; }
.phead__ph--tall { height: 50vh; height: 50svh; }
.phead__ph img { width: 100%; height: 100%; object-fit: cover; }
.phead__ph .tt { left: max(var(--pad), calc((100% - var(--max)) / 2)); bottom: 16px; }
.phead__body { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.phead__body .h1 { font-size: clamp(28px, 3.6vw, 44px); margin-top: 16px; }
.phead__body .lead { margin-top: 20px; }
.phead--plain { padding-top: clamp(48px, 6vw, 80px); }
.crumb { font-size: 13px; color: #4C5866; margin-bottom: 18px; }
.crumb a { color: var(--navy); }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumb li + li::before { content: "/"; margin-right: 6px; color: #8893A0; }

/* ページの下 */
.next { padding: 56px 0 72px; border-top: 1px solid var(--n15); }
.next .acts { margin-top: 0; }

/* 図の共通 */
.fig { margin: 0; color: var(--navy); }
.fig__title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 14px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fig__note { font-size: 13px; color: #4C5866; margin-top: 12px; }
.fig svg text { font-family: var(--sans); }
.fig svg .r { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; }

/* B-1 毎朝の清掃の順番 */
.b1 svg { display: block; width: 100%; height: auto; }
.b1__sm { display: none !important; }
.b1 .seg { transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .33s); }
.js .b1:not(.is-in) .seg { opacity: 0; transform: translateY(6px); }

/* B-2 年間の予定 */
.b2__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ink); margin-left: auto; font-weight: 400; }
.b2__legend i { display: inline-block; width: 26px; height: 12px; vertical-align: -1px; margin-right: 7px; border: 1.5px solid var(--navy); background: var(--n20); }
.b2__legend i.dot { border-style: dashed; background: none; }
.b2__wrap { position: relative; }
.b2 table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.b2 th, .b2 td { padding: 0; }
.b2 thead th { font: 500 15px/1 var(--num); color: var(--navy); padding: 10px 0 10px; text-align: center; border-bottom: 1.5px solid var(--navy); }
.b2 thead th small { font-family: var(--sans); font-size: 11px; font-weight: 400; margin-left: 1px; }
.b2 thead th.b2__name, .b2 thead th.b2__freq { text-align: left; font: 700 12.5px/1.3 var(--sans); color: #4C5866; }
.b2 .b2__name { width: 172px; text-align: left; font-weight: 700; color: var(--navy); padding: 0 10px 0 0; line-height: 1.4; }
.b2 .b2__freq { width: 210px; text-align: left; padding-left: 14px; font-size: 13px; color: var(--ink); line-height: 1.45; }
.b2 tbody tr > * { height: 50px; border-bottom: 1px solid var(--n20); vertical-align: middle; }
.b2 tbody tr.b2__sep > * { border-top: 1.5px solid var(--navy); }
.b2 tbody tr.is-other .b2__name { font-weight: 400; color: #3A4756; }
.b2 td.m { position: relative; border-left: 1px solid var(--n10); }
.b2 td.m:first-of-type { border-left: 0; }
.mk { position: absolute; inset: 11px 4px; border: 1.5px solid var(--navy); background: var(--n20); }
.mk--dot { border-style: dashed; background: none; }
.mk--y { background: var(--y); }
.mk--band { inset: 19px 0; border: 0; background: var(--n10); }
.b2__hand { position: absolute; left: 172px; top: -26px; font-size: 12.5px; color: var(--navy); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.b2__hand::before { content: ""; width: 1px; height: 14px; background: var(--navy); transform: translateY(8px); }
.b2__t { padding-top: 34px; }
.b2 .mk { transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--c) * 60ms); }
.js .b2:not(.is-in) .mk { opacity: 0; transform: scale(.7); }
.js .b2:not(.is-in) .mk--band { transform: scaleX(0); transform-origin: left; }
.b2__sm { display: none; }

/* B-3 時間帯の例 */
.b3 { --h0: 5; --span: 19; }
.b3__box { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.b3__rows { display: grid; grid-template-rows: 44px repeat(3, 92px); }
.b3__lab { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: 15px; line-height: 1.35; padding-right: 12px; }
.b3__lab svg { flex: none; width: 34px; height: 34px; }
.b3__lab .num { display: block; font-size: 14px; color: var(--ink); }
.b3__track { position: relative; background: linear-gradient(90deg, var(--n20) 0%, var(--n10) 8%, #fff 15%, #fff 70%, var(--n10) 76%, var(--n20) 84%, var(--n20) 100%); border-left: 1px solid var(--n20); border-right: 1px solid var(--n20); }
.b3__dawn { position: absolute; top: 10px; left: calc((5.6 - var(--h0)) / var(--span) * 100%); width: calc(1.8 / var(--span) * 100%); height: 2px; background: var(--y); }
.b3__tick { position: absolute; white-space: nowrap; top: 18px; left: calc((var(--h) - var(--h0)) / var(--span) * 100%); transform: translateX(-50%); font: 500 13px/1 var(--num); color: var(--navy); }
.b3__tick::after { content: ""; position: absolute; left: 50%; top: 18px; width: 1px; height: 290px; background: var(--n15); }
.b3__band { position: absolute; left: calc((var(--s) - var(--h0)) / var(--span) * 100%); width: calc((var(--e) - var(--s)) / var(--span) * 100%); top: calc(44px + var(--r) * 92px + 18px); }
.b3__bar { position: relative; height: 26px; background: var(--n20); border: 1.5px solid var(--navy); }
.b3__gap { position: absolute; top: -2px; bottom: -2px; left: calc((12 - 10) / 5 * 100%); width: calc(.5 / 5 * 100%); background: #fff; }
.b3__late { position: absolute; top: 0; bottom: 0; left: 75%; right: 0; border-left: 1px dashed var(--navy); }
.b3__cap { font-size: 13px; line-height: 1.5; margin-top: 7px; color: var(--ink); white-space: nowrap; }
.b3__band--end .b3__cap { text-align: right; }
.b3__late-l { position: absolute; right: 0; top: -19px; font-size: 11.5px; color: var(--navy); white-space: nowrap; }
.b3__foot { margin-top: 14px; font-weight: 700; color: var(--navy); }
.b3__band { transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--r) * .2s + .2s); }
.js .b3:not(.is-in) .b3__band { opacity: 0; transform: translateX(-14px); }
.b3__list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--n20); }
.b3__list li { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--n20); }
.b3__list b { color: var(--navy); }

/* B-4 ご契約までの流れ */
.b4 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 110px; gap: 12px 26px; }
.b4__s { position: relative; grid-row: 1; border: 1.5px solid var(--navy); background: #fff; padding: 16px 14px 18px; }
.b4__s::after { content: ""; position: absolute; top: 50%; right: -26px; width: 22px; height: 1.5px; background: var(--navy); }
.b4__s::before { content: ""; position: absolute; top: 50%; right: -27px; transform: translateY(-50%) translateY(.75px); border: 5px solid transparent; border-left: 8px solid var(--navy); border-right: 0; z-index: 1; }
.b4__no { font: 500 13px/1 var(--num); color: var(--navy); display: block; margin-bottom: 8px; }
.b4 b { display: block; color: var(--navy); font-size: 16px; line-height: 1.45; }
.b4 .d { display: block; font-size: 13px; line-height: 1.55; margin-top: 6px; }
.b4__end { grid-row: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; font-weight: 700; color: var(--navy); }
.b4__end i { width: 22px; height: 22px; border-radius: 50%; background: var(--y); border: 1.5px solid var(--navy); }
.b4__note { grid-row: 2; grid-column: 2 / span 2; font-size: 13px; border-top: 1px solid var(--navy); padding-top: 8px; position: relative; }
.b4__note::before, .b4__note::after { content: ""; position: absolute; top: -6px; width: 1px; height: 6px; background: var(--navy); }
.b4__note::before { left: 0; } .b4__note::after { right: 0; }
.b4 li { transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i) * .14s); }
.js .b4:not(.is-in) li { opacity: 0; transform: translateX(-10px); }
@media (max-width: 980px) {
  .b4 ol { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 520px; }
  .b4__s, .b4__end, .b4__note { grid-row: auto; grid-column: auto; }
  .b4__s::after { top: auto; bottom: -26px; right: auto; left: 32px; width: 1.5px; height: 22px; }
  .b4__s::before { top: auto; bottom: -27px; right: auto; left: 32px; transform: translateX(-50%) translateX(.75px); border: 5px solid transparent; border-top: 8px solid var(--navy); border-bottom: 0; }
  .b4__n3 { margin-bottom: -14px; }
  .b4__n3::after, .b4__n3::before { display: none; }
  .b4__note { border-top: 0; border-left: 1px solid var(--navy); padding: 2px 0 2px 12px; margin-left: 32px; }
  .b4__note::before { display: none; }
  .b4__note::after { top: auto; bottom: -26px; left: -1px; right: auto; width: 1.5px; height: 22px; }
  .b4__end { flex-direction: row; align-items: center; padding-left: 22px; }
  .js .b4:not(.is-in) li { transform: translateY(-8px); }
}

/* B-2 スマホ */
.b2__smnote { font-size: 12.5px; color: var(--navy); margin: 0 0 8px; }
.b2__scroll { overflow-x: auto; border-top: 1.5px solid var(--navy); -webkit-overflow-scrolling: touch; }
.b2__sm table { width: auto; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 760px; }
.b2__sm thead th { vertical-align: bottom; text-align: left; padding: 10px 8px 9px; border-bottom: 1.5px solid var(--navy); width: 100px; line-height: 1.4; }
.b2__sm thead th b { display: block; color: var(--navy); font-size: 13px; }
.b2__sm thead th.is-other b { font-weight: 400; }
.b2__sm thead th small { display: block; font-size: 11.5px; color: #3A4756; margin-top: 3px; }
.b2__sm .b2__mo { position: sticky; left: 0; z-index: 1; background: #fff; width: 52px; min-width: 52px; text-align: left; padding: 0 6px 0 2px; color: var(--navy); font-weight: 700; border-right: 1px solid var(--n20); }
.sec--pale .b2__sm .b2__mo, .blk--pale .b2__sm .b2__mo { background: var(--pale); }
.b2__sm tbody tr > * { height: 40px; border-bottom: 1px solid var(--n20); }
.b2__sm .mk { inset: 8px 10px; }
.b2__sm .mk--band { inset: 0 44%; }
.b2__sm td.m { position: relative; border-left: 1px solid var(--n10); }
.b2__sm td.is-other { border-left-style: dashed; }
.js .b2:not(.is-in) .b2__sm .mk--band { transform: scaleY(0); transform-origin: top; }

/* 見えたら出す（JS があるときだけ隠す） */
.rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv:not(.is-in) { opacity: 0; transform: translateY(14px); }
.fl span { transition: transform .45s var(--ease), opacity .45s var(--ease); }
.js .sec:not(.is-in) .fl span, .js .phead:not(.is-in) .fl span, .js .blk:not(.is-in) .fl span { transform: translateY(100%); opacity: 0; }

/* 最初の画面の光 */
@keyframes dawn { from { opacity: .15; transform: scaleY(.92); } to { opacity: .9; transform: scaleY(1); } }
.js .hero__light { animation: dawn 2s var(--ease) .2s both; }

/* 下層の区画 */
.blk { padding: clamp(56px, 7vw, 88px) 0; }
.blk + .blk { border-top: 0; }
.blk .sec__head { margin-bottom: 24px; }
.blk .rt { margin-top: 30px; }
.blk--pale { background: var(--pale); }
.stack > * + * { margin-top: 28px; }
.ask { border-left: 3px solid var(--navy); padding: 4px 0 4px 22px; max-width: 46em; }

/* LINE（働きたい方へのみ） */
.qa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.qa__box { border: 1.5px solid var(--navy); padding: 28px 26px 24px; background: #fff; }
.qa__box .btn { width: 100%; justify-content: center; }
.qa__box .small { margin-top: 14px; }
.bubble { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; }

/* フォーム */
.form { max-width: 760px; margin-top: 30px; }
.form fieldset { border: 0; margin: 0; padding: 0; }
.form fieldset.f { border-bottom: 1px solid var(--n20); padding: 18px 0; }
.form > fieldset.f:first-child { border-top: 1px solid var(--n20); }
.f { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--n20); align-items: start; }
.f:first-child { border-top: 1px solid var(--n20); }
.f > .f__l, .f > legend { font-weight: 700; color: var(--navy); padding-top: 9px; font-size: 15px; line-height: 1.5; }
.f legend { float: left; width: 13em; padding: 9px 0 0; }
.f legend + * { clear: none; }
fieldset.f { display: block; }
fieldset.f::after { content: ""; display: block; clear: both; }
fieldset.f .f__opts { margin-left: calc(13em + 24px); }
.req { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 2px; padding: 2px 6px 1px; margin-left: 8px; vertical-align: 2px; }
.f input[type="text"], .f input[type="tel"], .f input[type="email"], .f textarea { width: 100%; font: 400 16px/1.5 var(--sans); color: var(--ink); padding: 10px 12px; border: 1px solid #8C98A6; border-radius: 3px; background: #fff; }
.f textarea { min-height: 140px; resize: vertical; }
.f input:focus, .f textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.f__opts { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 8px; }
.f__opts label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.f__opts input { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; }
.f__hint { font-size: 12.5px; color: #4C5866; grid-column: 2; margin-top: -2px; }
.form__group[hidden] { display: none; }
.form__group { border-left: 3px solid var(--n20); padding-left: 18px; margin: 0; }
.form__group .f:first-child { border-top: 0; }
.form__purpose { margin: 26px 0 12px; font-size: 14.5px; }
.form__agree { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.form__agree input { width: 20px; height: 20px; accent-color: var(--navy); margin: 0; }
.form__agree a { color: var(--navy); }
.form__submit { margin-top: 26px; }
.form__submit .btn { min-width: 260px; justify-content: center; font-size: 16px; }
.form.is-checked :invalid { border-color: #B3261E; }
.form.is-checked input[type="checkbox"]:invalid, .form.is-checked input[type="radio"]:invalid { outline: 2px solid #B3261E; outline-offset: 2px; }

/* フッター */
.foot { background: var(--navy); color: #fff; padding: 56px 0 32px; }
.foot .logo { width: 168px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; }
.foot__info { font-size: 14px; line-height: 1.9; margin-top: 20px; }
.foot__info a { text-decoration: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 14px; }
.foot ul a { text-decoration: none; display: inline-block; padding: 6px 0; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; opacity: .9; }

/* タブレット以下 */
@media (max-width: 1100px) {
  .gnav ul { gap: 16px; }
  .gnav li a { font-size: 13.5px; }
  .head__tel b { font-size: 17px; }
}
@media (max-width: 980px) {
  .menu { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; background: none; border: 1px solid var(--n20); border-radius: 3px; padding: 8px 12px; color: var(--navy); cursor: pointer; font: 500 12px/1 var(--num); letter-spacing: .08em; }
  .menu__bars { width: 18px; height: 2px; background: currentColor; position: relative; }
  .menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .25s; }
  .menu__bars::before { top: -6px; } .menu__bars::after { top: 6px; }
  .is-menu .menu__bars { background: transparent; }
  .is-menu .menu__bars::before { transform: translateY(6px) rotate(45deg); }
  .is-menu .menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .gnav { display: none; position: fixed; left: 0; right: 0; top: var(--head); bottom: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 32px; overflow-y: auto; border-top: 1px solid var(--n15); }
  .is-menu .gnav { display: flex; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav li a { font-size: 16px; padding: 16px 0; border-bottom: 1px solid var(--n15); }
  .gnav li a[aria-current="page"]::after { bottom: 8px; }
  .gnav__end { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
  .head__tel { text-align: left; }
  .head__tel b { font-size: 22px; }
  .split, .split--narrow, .split--fig, .coinfo, .qa { grid-template-columns: minmax(0, 1fr); }
  .split--r .split__pic { order: 0; }
  .b2__lg { display: none; }
  .b2__sm { display: block; }
}
@media (max-width: 900px) {
  .b1__lg { display: none !important; }
  .b1__sm { display: block !important; max-width: 460px; }
  .b3__box { grid-template-columns: minmax(0, 1fr); }
  .b3__rows { display: none; }
  .b3__track { height: calc(var(--span) * 30px + 20px); background: linear-gradient(180deg, var(--n20) 0%, var(--n10) 8%, #fff 15%, #fff 70%, var(--n10) 76%, var(--n20) 84%, var(--n20) 100%); border: 0; border-top: 1px solid var(--n20); border-bottom: 1px solid var(--n20); margin-left: 44px; }
  .b3__dawn { left: -44px; width: 36px; top: calc((5.6 - var(--h0)) / var(--span) * (100% - 20px) + 10px); height: 2px; }
  .b3__tick { left: -44px; right: 0; top: calc((var(--h) - var(--h0)) / var(--span) * (100% - 20px) + 10px); transform: translateY(-50%); line-height: 1; }
  .b3__tick::after { left: 44px; right: 0; top: 50%; width: auto; height: 1px; }
  .b3__band { left: 8px; width: auto; right: 8px; top: calc((var(--s) - var(--h0)) / var(--span) * (100% - 20px) + 10px); height: calc((var(--e) - var(--s)) / var(--span) * (100% - 20px)); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  .b3__bar { height: auto; }
  .b3__gap { top: calc((12 - 10) / 5 * 100%); height: calc(.5 / 5 * 100%); left: -2px; right: -2px; width: auto; bottom: auto; }
  .b3__late { top: 75%; left: 0; right: 0; bottom: 0; border-left: 0; border-top: 1px dashed var(--navy); }
  .b3__late-l { right: auto; left: calc(100% + 12px); top: auto; bottom: 2px; }
  .b3__cap { margin-top: 0; white-space: normal; text-align: left !important; }
  .b3__cap b { display: block; color: var(--navy); font-size: 14px; }
  .b3__cap .ic { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-right: 6px; }
  .js .b3:not(.is-in) .b3__band { transform: translateY(-10px); }
  .b3__list li { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 901px) { .b3__cap b, .b3__cap .ic { display: none; } }
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  :root { --head: 64px; }
  .logo { width: 140px; }
  .three { grid-template-columns: minmax(0, 1fr); }
  .three > div { padding: 18px 0 8px; }
  .three > div + div { border-left: 0; border-top: 1px solid var(--n20); padding-left: 0; }
  .rt, .rt tbody, .rt tr, .rt th, .rt td { display: block; width: auto; }
  .rt thead { display: none; }
  .rt tr { border-bottom: 1px solid var(--n20); padding: 14px 0 12px; }
  .rt th, .rt td { border: 0; padding: 0; }
  .rt th { padding-bottom: 4px; white-space: normal; }
  .rt td + td { padding-left: 0; margin-top: 4px; }
  .rt td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: #4C5866; font-weight: 700; }
  .rt--do tr { display: grid; grid-template-columns: 1fr; }
  .f { grid-template-columns: minmax(0, 1fr); }
  .f legend { float: left; width: 100%; padding-top: 0; }
  fieldset.f .f__opts { clear: both; }
  fieldset.f .f__opts { margin-left: 0; }
  .f__hint { grid-column: 1; }
  .hero__ph { height: auto; min-height: calc(100svh - var(--head) - 88px); max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__ph { container-type: normal; }
  .hero__frame { inset: 0; left: 0; top: 0; width: auto; height: auto; aspect-ratio: auto; transform: none; }
  .hero__frame img { object-position: 70% 50%; }
  .hero__light { left: 65%; width: 16%; }
  .hero__shade { background: linear-gradient(180deg, rgba(30, 58, 95, 0) 18%, rgba(30, 58, 95, .6) 42%, rgba(30, 58, 95, .6)); }
  .hero__txt { position: relative; bottom: auto; padding: 120px 0 64px; }
  .hero__txt .acts { gap: 14px 22px; }
  .gate { font-size: 14px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .b4 ol { max-width: none; }
}
@media (max-width: 420px) {
  .hero__txt h1 { font-size: 24px; }
  .btn { padding-inline: 20px; }
}

/* 料金の表 */
.rt--price th { white-space: normal; }
.rt--price .yen { text-align: right; white-space: nowrap; }
.rt--price td.yen .num { font-size: 18px; color: var(--navy); }

/* 社名の由来 */
.name__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.name__txt { max-width: 34em; font-size: clamp(16px, 1.3vw, 18px); line-height: 2; }
.name__fig { width: 100%; height: auto; }
.name__shine { transition: opacity 1.6s var(--ease) .4s; }
.js .name__fig:not(.is-in) .name__shine { opacity: 0; }
@media (max-width: 760px) { .name__body { grid-template-columns: minmax(0, 1fr); } .name__fig { max-width: 320px; } }

/* 階数の表示が変わるとき */
@keyframes liftIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes liftInDn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.lift__n.is-up { animation: liftIn .35s var(--ease); }
.lift__n.is-dn { animation: liftInDn .35s var(--ease); }
.lift.is-dn .lift__arw { transform: rotate(180deg); }

/* 動きを減らす設定では、すべて完成形で止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__light { opacity: .9; }
}