/* ページごとの見た目 */

/* ===== トップ ===== */
/* トップの最初。Mac の画面が全画面まで広がり、中の要所へ寄っていく固定の場面（scenes.js の hero） */
.hero { position: relative; }
.hero__pin { position: relative; min-height: 100vh; min-height: 100lvh; padding: calc(var(--header) + 72px) 0 40px; overflow: hidden; }
.hero__dark { position: absolute; inset: 0; z-index: 0; background: #111315; opacity: 0; pointer-events: none; }
/* 絵と説明は、場面の箱ではなく画面の高さに合わせる。スマホでは場面の中身が画面より長く、下に置いた説明が画面の外に出ていた */
.hero__full { position: absolute; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 4; overflow: hidden; opacity: 0; pointer-events: none; background: #111315; }
.hero__full-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.hero__scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(14, 16, 18, 0.88) 0%, rgba(14, 16, 18, 0.64) 28%, rgba(14, 16, 18, 0) 56%); }
/* 画面の中へ入る場面（scenes.js の immerse）の部品。絵をまとめて傾ける台、奥の画面を暗くする幕、
   浮き上がる板（浮かぶほど影が深く、縁に黄緑の線が出る。--lift は 0〜1）、機器の画面を斜めに横切る光 */
.hero__full, .dive__full { perspective: 1600px; }
.imm__stack { position: absolute; inset: 0; will-change: transform; }
.imm__veil { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 60% 45%, rgba(10, 12, 14, 0.4), rgba(10, 12, 14, 0.8)); pointer-events: none; }
.imm__lift {
  --lift: 0;
  position: absolute; left: 0; top: 0; overflow: hidden; opacity: 0; border-radius: 12px; will-change: transform;
  background: #f5f5f1;
  box-shadow: 0 0 0 calc(var(--lift) * 2px) var(--vest), 0 calc(var(--lift) * 50px) calc(var(--lift) * 90px) calc(var(--lift) * -20px) rgba(0, 0, 0, 0.78);
}
.imm__lift img { position: absolute; left: 0; top: 0; max-width: none; }
.imm__glare { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.imm__glare i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0)); mix-blend-mode: screen; }
/* 機器の画面で流す操作の録画 */
video.device__app { height: 100%; object-fit: cover; object-position: top left; background: #f5f5f1; }
.hero__steps { position: absolute; z-index: 5; left: var(--bleed); top: 0; height: 100vh; height: 100lvh; width: min(32vw, 470px); color: #f5f5f1; pointer-events: none; }
.hero__steps .hero__step { bottom: 12vh; }
/* 画面に重なる説明は、縁のある暗い札に入れて、画面と分ける */
.hero__step, .dive__step { position: absolute; left: 0; bottom: 0; display: grid; gap: 14px; opacity: 0; padding: 28px 30px 30px; background: rgba(17, 19, 21, 0.86); border: 1px solid rgba(245, 245, 241, 0.16); border-top: 3px solid var(--vest); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.hero__step .num { font-size: 15px; font-weight: 600; color: var(--vest); }
.hero__step b { font-size: clamp(28px, 3.1vw, 50px); line-height: 1.35; letter-spacing: 0.02em; }
.hero__step span:last-child { font-size: 15px; color: rgba(245, 245, 241, 0.78); }
.hero__device .device__app { height: 100%; object-fit: cover; }
/* 動かさないときは、3つの説明を最初の画面の下に並べる */
html:not(.js-motion) .hero__full, html:not(.js-motion) .hero__dark { display: none; }
html:not(.js-motion) .hero__steps { position: static; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: auto; max-width: calc(var(--max) + var(--pad) * 2); margin: 56px auto 0; padding: 0 var(--pad); color: var(--ink); }
html:not(.js-motion) .hero__step, html:not(.js-motion) .dive__step { position: static; opacity: 1; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not(.js-motion) .hero__step span:last-child { color: var(--ink-2); }
html:not(.js-motion) .hero__step .num { color: var(--shu); }
/* 見出しは大きく、右の画面の束に少し重ねる。束は画面の右端まで出す */
.hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; min-height: calc(100svh - var(--header) - 180px); }
.hero__copy { position: relative; z-index: 3; }
.hero__kicker { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.hero__kicker::before { content: ''; width: 36px; height: 1px; background: var(--ink); }
.hero__title { margin-top: 26px; font-size: clamp(30px, 3.5vw, 60px); font-weight: 700; line-height: 1.32; letter-spacing: 0.02em; }
.hero__title .hero__line:nth-child(2) { padding-left: 1.2em; }
/* 行ごとに下から出す覆いは、上下だけ切る（横は Mac の上へはみ出してよい） */
.hero__title > div { overflow: visible !important; clip-path: inset(-0.15em -100vw 0 -0.3em); }
.hero__line { display: block; white-space: nowrap; }
.hero__lead { max-width: 30em; margin-top: 28px; color: var(--ink-2); font-size: 15px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* Mac は画面の右端からはみ出すほど大きく置き、スクロールで手前へ飛び込む（scenes.js の hero と immerse） */
.hero__device.device { position: relative; left: auto; top: auto; width: auto; margin: 0 calc(var(--bleed) * -1 - 7vw) 0 0; transform-origin: 30% 60%; will-change: transform; }
.hero__device .device__frame { filter: drop-shadow(0 40px 40px rgba(28, 30, 32, 0.16)); }
.hero__device::after { display: none; }
.hero__dim { position: absolute; left: 13%; width: 74%; top: -10px; height: 24px; overflow: visible; }
.hero__dim path { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__dim-label { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 0 10px; background: var(--page-bg); color: var(--ink-2); white-space: nowrap; }
.hero__cap { margin: 4px 0 0 13%; color: var(--ink-3); }
.hero__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 32px; }
.hero__scroll { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.hero__scroll i { position: relative; width: 1px; height: 48px; background: var(--line-2); overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: var(--ink); animation: scroll-cue 2.4s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(260%); } }
.titleblock { display: grid; grid-template-columns: auto auto; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; }
.titleblock dt, .titleblock dd { margin: 0; padding: 4px 10px; border-bottom: 1px solid var(--ink); }
.titleblock dt { border-right: 1px solid var(--ink); color: var(--ink-3); }
.titleblock dt:last-of-type, .titleblock dd:last-of-type { border-bottom: 0; }

/* 考え方。文字だけの疎な場面。文章は左を大きく空けて右へ寄せる */
.statement { position: relative; padding: clamp(120px, 14vw, 220px) 0 clamp(80px, 9vw, 140px); }
.statement__inner { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; }
.statement__label { grid-column: 1; align-self: start; padding-top: 0.9em; color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
.statement__label::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: var(--ink-4); }
.statement__text { grid-column: 2; max-width: 22em; font-size: clamp(24px, 3.2vw, 48px); font-weight: 700; line-height: 1.7; letter-spacing: 0.04em; }
.statement__sign { grid-column: 2; justify-self: end; margin-right: 8%; display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--ink-2); }
.statement__sign::before { content: ''; width: 48px; height: 1px; background: var(--ink-2); }
.statement__text .ch { opacity: 0.16; }
html:not(.js-motion) .statement__text .ch { opacity: 1; }

/* 業種の帯。線で囲まず、大きく薄い文字として次の場面の後ろに敷く */
.marquee { position: relative; z-index: 0; margin-bottom: calc(clamp(48px, 7vw, 120px) * -1); overflow: hidden; white-space: nowrap; pointer-events: none; }
.marquee__inner { display: inline-flex; gap: 0; will-change: transform; }
.marquee__inner span { display: inline-flex; align-items: center; gap: 0.5em; padding-right: 0.5em; font-size: clamp(48px, 8vw, 132px); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; color: var(--paper-3); }
.marquee__inner span::after { content: ''; width: 0.14em; height: 0.14em; background: var(--shu); opacity: 0.35; }

/* 事業内容（トップ）。左の見出しは止まったまま、右の3枚を段違いに流す */
.svc-home { z-index: 1; }
.svc-home__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 64px; align-items: start; }
.svc-home__head { position: sticky; top: calc(var(--header) + 48px); display: grid; gap: 20px; justify-items: start; }
.svc-home__head .sec-title { margin-top: 0; }
.svc-cards { display: grid; gap: clamp(80px, 10vw, 160px); padding-top: clamp(40px, 6vw, 96px); }
.svc-card a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; text-decoration: none; }
.svc-card__fig { grid-row: 1; margin: 0; overflow: hidden; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(28, 30, 32, 0.55); }
.svc-card__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1.1s var(--ease); }
.svc-card a:hover .svc-card__fig img { transform: scale(1.04); }
.svc-card__body { grid-row: 1; position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; padding: 28px 30px 30px; background: var(--paper); }
.svc-card__no { font-size: 15px; font-weight: 600; color: var(--shu); }
.svc-card__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; }
.svc-card__text { color: var(--ink-2); font-size: 15px; }
.svc-card__go { margin-top: 8px; }
/* 1枚目：画面を大きく左、文章を右下に重ねる */
.svc-card--1 .svc-card__fig { grid-column: 1 / 10; aspect-ratio: 16 / 10; }
.svc-card--1 .svc-card__body { grid-column: 7 / 13; margin-bottom: -56px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 28px 50px -30px rgba(28, 30, 32, 0.45); }
.svc-card--1 .svc-card__body::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--shu); }
/* 2枚目：文章を左、表計算を右にずらして重ねる */
.svc-card--2 a { align-items: center; }
.svc-card--2 .svc-card__fig { grid-column: 6 / 13; padding: 18px; transform: translateY(-28px); }
.svc-card--2 .svc-card__body { grid-column: 1 / 6; padding-left: 0; background: none; }
/* 3枚目：スマホは細く、右寄りに高く */
/* 3枚目は iPhone の写真（背景透明）。箱や影の代わりに、写真の形に沿った影を落とす */
.svc-card--3 .svc-card__fig { grid-column: 8 / 12; background: none; box-shadow: none; overflow: visible; }
.svc-card--3 .svc-card__fig img { height: auto; filter: drop-shadow(0 28px 30px rgba(28, 30, 32, 0.22)); }
.svc-card--3 a:hover .svc-card__fig img { transform: translateY(-6px) scale(1); }
.svc-card--3 .svc-card__body { grid-column: 2 / 8; align-self: center; background: none; }
.svc-sheet { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); font-size: 14px; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.svc-sheet span { padding: 7px 10px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: right; min-height: 2.3em; }
.svc-sheet .svc-sheet__name, .svc-sheet .svc-sheet__h:first-child { text-align: left; font-size: 13px; }
.svc-sheet__h { background: var(--paper-2); color: var(--ink-3); font-size: 12px; }
.svc-sheet .is-auto { background: var(--shu-wash); color: var(--shu); font-weight: 600; }
.svc-sheet__h.is-auto { color: var(--shu); }

/* 体験デモ（トップ）。大きい1枚は画面の左端まで出し、右の2枚は段を下げる */
.picks { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.picks__side { display: grid; gap: 56px; padding-top: 22%; }
.picks__side .pick:last-child { margin: 0 calc(min(16%, var(--bleed) - var(--pad)) * -1) 0 16%; }
.pick--large .pick__fig { margin-left: calc(var(--bleed) * -1); border-left: 0; }
.pick { display: grid; gap: 16px; text-decoration: none; }
.pick__fig { overflow: hidden; border: 1px solid var(--line-2); background: var(--white); padding: 8px; }
.pick__fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: transform 1.1s var(--ease); }
.pick:hover .pick__fig img { transform: scale(1.035); }
.pick--large .pick__fig img { aspect-ratio: 16 / 10; }
.pick__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; }
.pick__no { color: var(--ink-3); grid-column: 1; }
.pick__name { grid-column: 1; font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; }
.pick__name { background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat; transition: background-size 0.5s var(--ease); justify-self: start; }
.pick:hover .pick__name { background-size: 100% 1px; }
.pick__for { grid-column: 1; font-size: 13px; color: var(--ink-3); }
.pick .tag { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

/* 数字（トップ）。ページの中で一度だけの墨の用紙。1つ目を大きく、残りを右へ段違いに */
.facts-band { color: #f5f5f1; }
.facts-band .wrap { max-width: calc(var(--max) + var(--pad) * 2); }
.facts-band__title { color: rgba(245, 245, 241, 0.6); display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.facts-band__title::after { content: ''; width: 40px; height: 1px; background: rgba(245, 245, 241, 0.4); }
.facts { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; align-items: end; }
.facts > div { position: relative; padding-top: 18px; border-top: 1px solid rgba(245, 245, 241, 0.28); }
.facts > div:nth-child(1) { border-top-width: 2px; }
.facts > div:nth-child(3) { transform: translateY(32px); }
.facts > div:nth-child(4) { transform: translateY(64px); }
.facts dt { font-size: 13px; color: rgba(245, 245, 241, 0.7); }
.facts dd { font-size: clamp(48px, 5vw, 80px); font-weight: 600; line-height: 1.05; }
.facts > div:nth-child(1) dd { font-size: clamp(96px, 12vw, 200px); line-height: 0.95; }
/* 紺の地に、安全ベストの黄緑で一番大きな数字を */
.facts > div:nth-child(1) dd { color: var(--vest); }
.facts > div:nth-child(1) { border-top-color: var(--vest); }
.facts dd small { font-size: 16px; font-weight: 700; margin-left: 6px; }
.facts p { font-size: 12px; color: rgba(245, 245, 241, 0.6); }
.facts-band { padding-bottom: calc(var(--block) + 64px); }

/* 進め方（トップ）。工程表のように、1段ずつ右下へ下がる階段 */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; padding-top: 34px; }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; padding-top: 22px; }
.steps li::before { content: ''; position: absolute; left: 0; right: -24px; top: 14px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(var(--line-p, 1)); }
.steps li:last-child::before { right: 0; background: var(--shu); }
.steps li:nth-child(2) { margin-top: 56px; }
.steps li:nth-child(3) { margin-top: 112px; }
.steps li:nth-child(4) { margin-top: 168px; }
.steps__no { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; font-size: 15px; font-weight: 600; }
.steps b { margin-top: 12px; font-size: var(--fs-lg); }
.steps span { font-size: var(--fs-sm); color: var(--ink-2); }
.steps em { font-style: normal; color: var(--shu); }

.news-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; }
.news-home .news-list { margin-top: 64px; }
.news-list { border-top: 1px solid var(--ink); }
.news-list a { display: grid; grid-template-columns: 7em 6em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; transition: padding 0.45s var(--ease); }
.news-list a:hover { padding-left: 12px; }
.news-list time { color: var(--ink-3); font-size: 15px; }
.news-label, .news-item .news-label { justify-self: start; padding: 0 8px; border: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-3); }
.news-title { font-weight: 700; }

/* 月末の事務所（トップ） */
.night { position: relative; background: var(--paper-2); }
.night__pin { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; min-height: 100svh; padding: calc(var(--header) + 40px) var(--pad) 56px; overflow: hidden; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; }
.night__clock { position: absolute; right: var(--pad); top: calc(var(--header) + 16px); display: grid; justify-items: end; line-height: 1; }
.night__date { font-size: 20px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; }
.night__time { font-size: clamp(64px, 10vw, 160px); font-weight: 500; color: rgba(28, 30, 32, 0.1); }
.night__copy { position: relative; z-index: 3; align-self: center; }
.night__title { margin-top: 12px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.45; }
.night__pains { position: relative; margin-top: 32px; min-height: 7.6em; }
.night__pains li { font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; line-height: 1.65; padding-left: 20px; border-left: 3px solid var(--shu); }
.js-motion .night__pains li { position: absolute; inset: 0 0 auto; opacity: 0; }
.night__pains li + li { margin-top: 16px; }
.js-motion .night__pains li + li { margin-top: 0; }
.night__count { margin-top: 28px; color: var(--ink-3); font-size: 14px; }
.night__count .num { font-size: 40px; font-weight: 600; color: var(--ink); margin-right: 6px; }
.night__count small { display: block; font-size: 12px; color: var(--ink-4); }
.night__desk { position: relative; z-index: 2; min-height: 60svh; }
.sheet { position: absolute; left: 50%; top: 50%; width: clamp(170px, 15vw, 230px); padding: 14px 16px 16px; background: var(--white); color: #2a2d30; font-family: var(--hand); font-weight: 600; font-size: 13px; line-height: 1.55; border: 1px solid #e1e2dc; box-shadow: 0 14px 26px -18px rgba(28, 30, 32, 0.55); will-change: transform; }
.sheet::before { content: '作業日報'; display: block; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #c9cbc4; font-family: var(--ja); font-size: 10px; letter-spacing: 0.3em; color: #7a7f84; }
.sheet b { font-weight: 600; font-size: 15px; }
.sheet .smudge { color: #9a9ea2; text-decoration: line-through; }
.night__end { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 28px; opacity: 0; pointer-events: none; }
.night__end.is-on { pointer-events: auto; }
.night__end p { font-size: clamp(30px, 5vw, 72px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.night__end p::after { content: ''; display: block; height: 4px; margin-top: 14px; background: var(--shu); transform-origin: left; transform: scaleX(var(--rule, 1)); }
html:not(.js-motion) .night__end { position: static; transform: none; opacity: 1; grid-column: 1 / -1; pointer-events: auto; }

/* ===== 事業内容 ===== */
.svc-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; }
.svc-intro__text { font-size: var(--fs-lg); font-weight: 700; line-height: 1.8; }
.svc-index { border-top: 1px solid var(--ink); }
.svc-index a { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 700; text-decoration: none; transition: color 0.3s, padding 0.45s var(--ease); }
.svc-index a:hover { color: var(--shu); padding-left: 8px; }
.svc-index .num { color: var(--ink-4); }
.svc-track-wrap { background: var(--white); }
.svc-pin { position: relative; overflow: hidden; }
.svc-track { display: flex; gap: 0; }
.svc-panel { position: relative; flex: 0 0 min(86vw, 760px); min-height: 100svh; display: grid; align-content: center; gap: 22px; padding: calc(var(--header) + 32px) clamp(28px, 4vw, 64px) 72px; border-right: 1px solid var(--line); }
.svc-panel:first-child { margin-left: max(var(--pad), calc((100vw - var(--max)) / 2)); border-left: 1px solid var(--line); }
.svc-panel__no { font-size: clamp(64px, 7vw, 112px); font-weight: 600; line-height: 1; color: var(--line-2); }
.svc-panel__title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.4; }
.svc-panel__lead { color: var(--ink-2); max-width: 30em; }
.svc-panel__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.svc-panel__label { color: var(--ink-3); margin-bottom: 8px; }
.svc-panel__list li { position: relative; padding-left: 16px; font-size: var(--fs-sm); }
.svc-panel__list li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--ink); }
.svc-panel__fit { font-size: var(--fs-sm); color: var(--ink-2); }
html:not(.js-motion) .svc-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
html:not(.js-motion) .svc-panel, html:not(.js-motion) .svc-panel:first-child { min-height: 0; margin: 0; padding: 56px 0; border: 0; border-bottom: 1px solid var(--line); }
html:not(.js-motion) .svc-progress { display: none; }
.svc-progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; height: 2px; background: var(--line); }
.svc-progress span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.viz { margin-top: 8px; min-height: 140px; }
.viz--grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.viz--grid i { aspect-ratio: 1; background: var(--paper-2); }
.viz--grid i.on { background: var(--ink); }
.viz--grid i.half { background: linear-gradient(135deg, var(--ink) 50%, var(--paper-2) 50%); }
.viz--grid i.ot { box-shadow: inset 0 -3px 0 var(--shu); }
.viz--sheet { display: grid; grid-template-columns: 5em repeat(5, 1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); font-family: var(--num); font-size: 14px; }
.viz--sheet span { padding: 6px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-align: right; min-height: 2.2em; }
.viz--sheet span.h { color: var(--ink-3); font-family: var(--ja); font-size: 12px; text-align: left; background: var(--paper); }
.viz--sheet span.auto { background: var(--shu-wash); color: var(--shu); font-weight: 700; }
.viz--bars { display: grid; gap: 14px; align-content: end; }
.viz--bars span { position: relative; display: block; height: 28px; background: var(--paper-2); }
.viz--bars span::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--ink); transform-origin: left; transform: scaleX(var(--grow, 1)); }
.viz--bars i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--ink-3); }
.viz--phone { display: flex; justify-content: flex-start; }
.viz-phone { position: relative; width: 190px; padding: 18px 14px 56px; border: 8px solid var(--ink); border-radius: 26px; background: var(--white); display: grid; gap: 8px; }
.viz-phone__row { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; }
.viz-phone__row.is-on { background: var(--ink); color: var(--vest); border-color: var(--ink); }
.viz-phone__mic { position: absolute; left: 50%; bottom: 12px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; border: 2px solid var(--ink); }
.viz-phone__mic::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--shu); animation: rec 1.8s ease-in-out infinite; }
@keyframes rec { 50% { transform: scale(0.6); opacity: 0.6; } }
.two-col .table th { width: 12em; }

/* ===== 実績一覧 ===== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: 1px solid var(--line-2); background: var(--white); font-size: var(--fs-sm); font-weight: 700; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.filter .num { font-size: 13px; color: var(--ink-4); }
.filter:hover { border-color: var(--ink); }
.filter.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.filter.is-on .num { color: #c9ccc6; }
.wrows { border-top: 2px solid var(--ink); }
.wrow a { position: relative; display: grid; grid-template-columns: 4em minmax(0, 1.4fr) minmax(0, 1fr) 10em 8em 44px; gap: 20px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; isolation: isolate; }
.wrow a::before { content: ''; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease); }
.wrow a:hover::before { transform: scaleY(1); }
.wrow__no { font-size: 24px; font-weight: 600; color: var(--ink-3); }
.wrow__name b { display: block; font-size: var(--fs-lg); line-height: 1.5; }
.wrow__name small { display: block; font-size: 13px; color: var(--ink-3); }
.wrow__for, .wrow__on { font-size: var(--fs-sm); color: var(--ink-2); }
.wrow__go { width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1px no-repeat; transition: transform 0.45s var(--ease), background-color 0.3s; }
.wrow a:hover .wrow__go { transform: translateX(6px); background-color: var(--ink); background-image: linear-gradient(var(--white), var(--white)); }
.wrow.is-hidden { display: none; }
.wrows__empty { padding: 40px 0; color: var(--ink-3); }
.wpreview { position: fixed; left: 0; top: 0; z-index: 50; width: 360px; padding: 8px; background: var(--white); border: 1px solid var(--line-2); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.5); pointer-events: none; opacity: 0; transform: scale(0.85); }
.wpreview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

/* ===== 実績詳細 ===== */
.wmeta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-2); margin-bottom: 48px; }
.wmeta > div { padding: 16px 20px 18px 0; }
.wmeta > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.wmeta dt { font-size: var(--fs-xs); color: var(--ink-3); }
.wmeta dd { font-weight: 700; font-size: 15px; }
.wmain { overflow: hidden; border: 1px solid var(--line-2); background: var(--white); padding: 10px; }
.wmain img { width: 100%; }
/* 実績の大きな画面は、左を少し空けて右は画面の端まで出す */
.wmain { margin: 0 calc(var(--bleed) * -1) 0 clamp(0px, 8%, 120px); border-right: 0; }
.wnote { margin-top: 24px; padding: 16px 20px; border-left: 3px solid var(--shu); background: var(--white); font-size: var(--fs-sm); color: var(--ink-2); }
.wflow { padding: 48px 32px 24px; border: 1px solid var(--line-2); background: var(--white); }
.wflow__steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 24px; }
.wflow__steps li { position: relative; display: grid; justify-items: start; gap: 12px; padding: 18px 16px; border: 1.5px solid var(--ink); background: var(--paper); font-weight: 700; }
.wflow__steps li .num { color: var(--shu); font-size: 18px; }
.wflow__steps li + li::before { content: ''; position: absolute; left: -24px; top: 50%; width: 24px; height: 1.5px; background: var(--ink); }
.wflow figcaption { margin-top: 20px; color: var(--ink-3); }
.wtwo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; }
.wproblems { margin-top: 20px; border-top: 1px solid var(--ink); }
.wproblems li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); font-weight: 700; }
.wproblems li::before { content: ''; position: absolute; left: 4px; top: 27px; width: 10px; height: 10px; border: 1.5px solid var(--shu); border-radius: 50%; }
.wmade { margin-top: 20px; font-size: var(--fs-lg); line-height: 1.95; }
.wfeatures { border-top: 2px solid var(--ink); }
.wfeatures li { display: grid; grid-template-columns: 4em 14em minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.wfeatures .num { font-size: 22px; font-weight: 600; color: var(--ink-4); }
.wfeatures b { font-size: 17px; }
.wfeatures span:last-child { color: var(--ink-2); }
.wtech { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 64px; align-items: start; }
.wtech ul { display: flex; flex-wrap: wrap; gap: 8px; }
.wtech li { padding: 4px 14px; border: 1px solid var(--line-2); background: var(--white); font-size: var(--fs-sm); }
.wgallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.wgallery__item { border: 1px solid var(--line-2); background: var(--white); padding: 8px; overflow: hidden; }
.wgallery__item--wide { grid-column: span 8; }
.wgallery__item--tall { grid-column: span 4; }
.wgallery__item figcaption { padding: 10px 4px 2px; font-size: 13px; color: var(--ink-3); }
.wpager { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.wpager__link { display: grid; gap: 6px; padding: 40px var(--pad); text-decoration: none; transition: background-color 0.35s; }
.wpager__link:hover { background: var(--paper); }
.wpager__link b { font-size: var(--fs-lg); }
.wpager__link .mono { color: var(--ink-3); }
.wpager__link--list { text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.wpager__link--next { text-align: right; }

/* 17:02 送信（現場台帳の詳細） */
.send { overflow: clip; background: var(--paper); }
.send__pin { min-height: 100svh; padding: calc(var(--header) + 32px) var(--pad) 56px; display: flex; flex-direction: column; gap: 28px; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; }
.send__head { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.send__time { font-size: clamp(52px, 7vw, 112px); font-weight: 600; line-height: 0.9; }
.send__title { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.5; }
.send__stage { display: grid; grid-template-columns: minmax(240px, 300px) minmax(60px, 1fr) minmax(320px, 520px); align-items: center; flex: 1; }
.send__note { font-size: 14px; color: var(--ink-3); }
.mini-phone { position: relative; padding: 22px 18px 18px; border: 10px solid var(--ink); border-radius: 34px; background: var(--white); font-size: 13px; }
.mini-phone__who { font-size: 12px; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mini-phone__rows li { display: grid; grid-template-columns: 5em 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mini-phone__rows span { color: var(--ink-3); }
.mini-phone__send { display: block; text-align: center; margin-top: 16px; padding: 14px; border: 2px solid var(--ink); background: var(--vest); box-shadow: 0 3px 0 var(--ink); font-weight: 700; font-size: 15px; }
.mini-phone__done { position: absolute; inset: 0; border-radius: 24px; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--white); font-weight: 700; font-size: 20px; opacity: 0; }
.mini-phone__done i { width: 64px; height: 64px; border-radius: 50%; background: var(--vest); border: 2px solid var(--ink); position: relative; }
.mini-phone__done i::after { content: ''; position: absolute; left: 21px; top: 15px; width: 14px; height: 26px; border: solid var(--ink); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.send__wire { position: relative; height: 2px; margin: 0 14px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 8px, transparent 8px 14px); }
.send__wire span { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--shu); opacity: 0; }
.mini-pc { position: relative; padding: 22px; background: var(--white); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -40px rgba(0, 0, 0, 0.5); font-size: 13px; }
.mini-pc__toast { position: absolute; left: 22px; right: 22px; top: -22px; padding: 10px 14px; background: var(--ink); color: var(--white); font-size: 13px; opacity: 0; }
.mini-pc__toast::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--vest); }
.mini-pc__kpi { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mini-pc__kpi dt { font-size: 12px; color: var(--ink-3); }
.mini-pc__kpi dd { font-size: 34px; font-weight: 700; line-height: 1.1; }
.mini-pc__demen { width: 100%; margin: 14px 0; text-align: center; }
.mini-pc__demen th, .mini-pc__demen td { padding: 6px 4px; border: 1px solid var(--line); font-weight: 400; }
.mini-pc__demen tbody th { text-align: left; padding-left: 8px; font-size: 12px; }
.mini-pc__demen td { font-family: var(--num); font-weight: 700; font-size: 15px; }
.mini-pc__demen .is-today { background: var(--ink); color: var(--vest); }
.js-motion .mini-pc__demen [data-fill] { color: transparent; }
.mini-pc__row { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--paper-2); }
.mini-pc__row b { font-size: 18px; }

/* ===== 私について ===== */
/* ごあいさつ。地が白に変わり、手紙は左を大きく空けて書く */
.letter { position: relative; padding: var(--block) var(--pad); background: var(--white); }
.letter__body { max-width: 700px; margin: 0 0 0 calc(var(--sheet-off) + clamp(8px, 7vw, 140px) - var(--pad)); font-family: var(--serif); font-size: clamp(17px, 1.3vw, 19px); line-height: 2.15; }
.letter__title { margin: 8px 0 36px; font-family: var(--ja); font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; }
.letter__body p[data-line] + p[data-line] { margin-top: 1.4em; }
.letter mark { color: inherit; background: linear-gradient(transparent 62%, var(--shu-wash) 62%) no-repeat; background-size: var(--mark, 100%) 100%; padding: 0 2px; }
.letter__sign { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 48px; }
.letter__role { font-family: var(--ja); font-size: 13px; line-height: 1.7; color: var(--ink-3); text-align: right; }
.letter__name { font-size: 30px; font-weight: 700; letter-spacing: 0.08em; }
.promise { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 64px; }
.promise__title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.45; }
.rules { counter-reset: r; border-top: 2px solid var(--ink); }
.rules li { counter-increment: r; display: grid; grid-template-columns: 64px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules li::before { content: counter(r, decimal-leading-zero); grid-row: span 2; font-family: var(--num); font-weight: 600; font-size: 24px; color: var(--ink-4); }
.rules b { font-size: 17px; }
.rules span { font-size: var(--fs-sm); color: var(--ink-2); }
.rules li.is-no b { color: var(--shu); }

/* ===== よくある質問 ===== */
.faq-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px 64px; align-items: start; }
.faq-tabs { position: sticky; top: calc(var(--header) + 32px); }
.faq-tabs ol { border-top: 2px solid var(--ink); }
.faq-tabs a { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: color 0.3s, padding 0.4s var(--ease); }
.faq-tabs a:hover, .faq-tabs a.is-current { color: var(--shu); padding-left: 8px; }
.faq-tabs .num { color: var(--ink-4); }
.faq-group + .faq-group { margin-top: 72px; }
.faq-group__title { display: flex; gap: 14px; align-items: baseline; margin-bottom: 20px; font-size: var(--fs-lg); font-weight: 700; }
.faq-group__title .num { color: var(--shu); }

/* ===== お知らせ ===== */
.news-items { border-top: 2px solid var(--ink); }
.news-item { display: grid; grid-template-columns: 8em 7em minmax(0, 1fr); gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.news-item time { color: var(--ink-3); font-size: 16px; }
.news-item__title { font-size: var(--fs-lg); line-height: 1.5; margin-bottom: 8px; }
.news-item p { color: var(--ink-2); margin-bottom: 12px; }

/* ===== お問い合わせ ===== */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: start; }
.cform { display: grid; gap: 28px; }
.cform__row { display: grid; gap: 10px; }
.cform label, .cform legend { font-weight: 700; font-size: 15px; }
.cform label em, .cform legend em { margin-left: 10px; padding: 1px 8px; background: var(--shu); color: var(--white); font-style: normal; font-size: 12px; vertical-align: 2px; }
.cform input:not([type='radio']):not([type='checkbox']), .cform textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line-2); border-bottom: 2px solid var(--ink); background: var(--white); font-size: 16px; border-radius: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--shu-wash); }
.cform [aria-invalid='true'] { border-color: var(--shu) !important; background: #fffafa; }
.cform__err { min-height: 1.2em; color: var(--shu); font-size: 13px; font-weight: 700; }
.cform__kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.cform__kinds legend { width: 100%; margin-bottom: 10px; }
.cform__kinds label { position: relative; font-weight: 400; font-size: var(--fs-sm); cursor: pointer; }
.cform__kinds input { position: absolute; opacity: 0; }
.cform__kinds span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1px solid var(--line-2); background: var(--white); transition: all 0.3s; }
.cform__kinds input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.cform__kinds input:focus-visible + span { outline: 2px solid var(--shu); outline-offset: 2px; }
.cform__agree label { display: flex; gap: 12px; align-items: center; font-weight: 400; }
.cform__agree input { width: 24px; height: 24px; flex: none; accent-color: var(--ink); }
.cform__submit { display: grid; gap: 12px; justify-items: start; padding-top: 12px; border-top: 1px solid var(--line); }
.cform__how { font-size: 13px; color: var(--ink-3); }
.cform__done { display: grid; gap: 14px; padding: 24px; border: 2px solid var(--ink); background: var(--white); }
.cform__done-title { font-size: var(--fs-lg); font-weight: 700; }
.cform__copy { width: 100%; padding: 12px; border: 1px solid var(--line-2); font-size: 14px; background: var(--paper); }
.contact-side { display: grid; gap: 24px; position: sticky; top: calc(var(--header) + 32px); }
.contact-side__box { padding: 28px; background: var(--white); border: 1px solid var(--line-2); }
.contact-side__box h2 { font-size: 17px; margin-bottom: 16px; }
.mini-steps li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: var(--fs-sm); }
.mini-steps .num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 13px; }
.contact-side__mail { font-size: 20px; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact-side__note { margin-top: 12px; font-size: 12px; color: var(--ink-3); }

/* ===== プライバシーポリシー ===== */
.policy { max-width: 820px; }
.policy__lead { margin-bottom: 40px; }
.policy__sec { padding: 28px 0; border-top: 1px solid var(--line); }
.policy__sec h2 { display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; font-size: 18px; }
.policy__sec h2 .num { color: var(--shu); }
.policy__sec p { color: var(--ink-2); }
.policy__date { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); text-align: right; }

/* ===== 404 ===== */
.nf { padding: calc(var(--header) + 96px) 0 var(--block); }
.nf__code { font-size: clamp(96px, 16vw, 220px); font-weight: 600; line-height: 1; color: var(--ink-4); }
.nf__title { margin-top: 16px; font-size: var(--fs-xl); line-height: 1.5; }
.nf__text { margin-top: 16px; color: var(--ink-2); }
.nf__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }

/* ===== 狭い画面 ===== */
@media (max-width: 1100px) {
  .wrow a { grid-template-columns: 3em minmax(0, 1fr) 9em 40px; }
  .wrow__for, .wrow__on { display: none; }
  .svc-home__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-home__head { position: static; }
  .svc-cards { padding-top: 16px; }
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__device.device { margin: 44px calc(var(--pad) * -1) 0; }
  .hero__foot .titleblock { display: none; }
  /* 見出しの下の残りの高さを机にして、日報の山が画面の中に収まるようにする */
  .night__pin { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding-top: calc(var(--header) + 24px); padding-bottom: 24px; }
  .js-motion .night__pin { height: 100svh; min-height: 0; }
  .night__desk { min-height: 44svh; }
  .js-motion .night__desk { min-height: 0; }
}
/* 背の低いスマホでは、見出しまわりを詰めて机の高さを残す */
@media (max-width: 960px) and (max-height: 700px) {
  .night__pin { padding-top: calc(var(--header) + 16px); }
  .night__title { font-size: 24px; }
  .night__pains { margin-top: 16px; min-height: 5em; }
  .night__pains li { font-size: 16px; }
  .night__count { margin-top: 10px; }
  .night__count .num { font-size: 30px; }
  .night__count small { display: inline; margin-left: 10px; }
}
@media (max-width: 860px) {
  .hero__pin { padding-top: calc(var(--header) + 40px); }
  .hero__scrim { background: linear-gradient(0deg, rgba(14, 16, 18, 0.92) 0%, rgba(14, 16, 18, 0.72) 36%, rgba(14, 16, 18, 0) 60%); }
  .hero__steps { left: var(--pad); right: var(--pad); width: auto; }
  .hero__steps .hero__step { bottom: 6vh; }
  @supports (height: 1lvh) { .hero__steps .hero__step { bottom: calc(100lvh - 100svh + 4svh); } }
  .hero__step b { font-size: clamp(24px, 7vw, 32px); }
  .hero__step span:last-child { font-size: 14px; }
  html:not(.js-motion) .hero__steps { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(28px, 8.4vw, 44px); }
  .hero__title .hero__line:nth-child(2) { padding-left: 0.6em; }
  .hero__actions .btn { flex: 1 1 auto; }
  .statement { padding: 96px 0 72px; }
  .statement__inner { grid-template-columns: 1fr; }
  .statement__label, .statement__text, .statement__sign { grid-column: 1; }
  .statement__text { font-size: clamp(21px, 6vw, 30px); padding-left: 8%; }
  .svc-card a { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-card__body { padding: 22px 20px 24px; }
  .svc-card--1 .svc-card__fig { grid-column: 1 / 13; }
  .svc-card--1 .svc-card__body { grid-row: 2; grid-column: 2 / 13; margin: -40px 0 0; }
  .svc-card--2 .svc-card__fig { grid-column: 3 / 13; grid-row: 1; padding: 10px; transform: none; }
  .svc-card--2 .svc-card__body { grid-column: 1 / 12; grid-row: 2; padding: 20px 0 0; }
  .svc-card--3 a { align-items: center; }
  .svc-card--3 .svc-card__fig { grid-column: 8 / 13; grid-row: 1; }
  .svc-card--3 .svc-card__body { grid-column: 1 / 8; grid-row: 1; padding: 0 12px 0 0; }
  .svc-sheet { font-size: 12px; }
  .svc-sheet span { padding: 5px 6px; }
  .picks { grid-template-columns: 1fr; }
  .picks__side { padding-top: 0; }
  .picks__side .pick:last-child { margin: 0 0 0 12%; }
  .facts { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .facts > div:nth-child(1) { grid-column: 1 / -1; }
  .facts > div:nth-child(3) { transform: translateY(24px); }
  .facts > div:nth-child(4) { transform: none; }
  .facts > div:nth-child(1) dd { font-size: clamp(88px, 28vw, 140px); }
  .steps { grid-template-columns: 1fr; gap: 28px; padding-top: 0; padding-left: 44px; }
  .steps li { padding-top: 0; }
  .steps li::before { left: -30px; right: auto; top: 30px; bottom: -28px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--line-p, 1)); }
  .steps li:last-child::before { display: none; }
  .steps li:nth-child(n) { margin-top: 0; }
  .steps li:nth-child(2), .steps li:nth-child(4) { margin-left: 14%; }
  .steps__no { top: 0; left: -44px; }
  .steps b { margin-top: 0; }
  .news-wrap { grid-template-columns: 1fr; }
  .news-list a { grid-template-columns: 6.5em minmax(0, 1fr); }
  .news-list .news-label { display: none; }
  .night__pains { min-height: 5.6em; margin-top: 24px; }
  .night__count { margin-top: 16px; }
  .send__stage { grid-template-columns: 1fr; gap: 28px; }
  .send__wire { height: 48px; width: 2px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--ink-3) 0 8px, transparent 8px 14px); }
  .send__wire span { left: 50%; top: 0; margin: 0 0 0 -7px; }
  .mini-phone { max-width: 320px; }
  .svc-intro { grid-template-columns: 1fr; }
  .svc-track { flex-direction: column; }
  .svc-panel { flex: none; min-height: 0; padding: 56px var(--pad); border-right: 0; border-bottom: 1px solid var(--line); }
  .svc-panel:first-child { margin-left: 0; border-left: 0; }
  .svc-panel__cols { grid-template-columns: 1fr; }
  .svc-progress { display: none; }
  .wrow a { grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 4px 12px; }
  .wrow__go { display: none; }
  .wrow__tag { grid-column: 3; }
  .wmeta { grid-template-columns: 1fr 1fr; }
  .wrow__name b { font-size: clamp(16px, 5vw, 20px); }
  .wmeta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .wmeta > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .wflow { padding: 28px 18px 18px; }
  .wflow__steps { grid-template-columns: 1fr; gap: 16px; }
  .wflow__steps li + li::before { left: 50%; top: -16px; width: 1.5px; height: 16px; }
  .wtwo, .wtech, .promise, .faq-layout, .contact-layout { grid-template-columns: 1fr; }
  .wfeatures li { grid-template-columns: 3em minmax(0, 1fr); gap: 4px 12px; }
  .wfeatures li span:last-child { grid-column: 2; }
  .wgallery { grid-template-columns: 1fr; }
  .wgallery__item--wide, .wgallery__item--tall { grid-column: auto; }
  .wpager { grid-template-columns: 1fr 1fr; }
  .wpager__link b { font-size: clamp(16px, 4.8vw, 20px); }
  .wpager__link--list { display: none; }
  .wpager__link { padding: 28px var(--pad); }
  .faq-tabs { position: static; }
  .news-item { grid-template-columns: 1fr; gap: 6px; }
  .contact-side { position: static; }
}

/* ---- トップ：事務所の Windows でも、社長の Mac でも ----
   機器の写真は画面の部分が透明。後ろにアプリの画面を置き、電源を入れる・画面を送る動きを付ける */
.devices { position: relative; overflow: clip; }
.devices__pin { display: grid; align-items: center; min-height: 100svh; padding: calc(var(--header) + 32px) 0 64px; }
.devices__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px 40px; align-items: center; }
.devices__title { margin-top: 12px; font-size: clamp(26px, 2.3vw, 36px); font-weight: 700; line-height: 1.45; }
@media (min-width: 901px) { .devices__title { white-space: nowrap; } }
.devices__lead { margin-top: 20px; color: var(--ink-2); }
.devices__list { margin-top: 32px; border-top: 1px solid var(--ink); }
.devices__list li { border-bottom: 1px solid var(--line); }
.devices__list a { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); padding: 12px 0 12px 16px; text-decoration: none; }
.devices__list a::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--shu); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.devices__list .num { grid-row: span 2; padding-top: 2px; font-size: 15px; font-weight: 600; color: var(--ink-4); transition: color 0.3s; }
.devices__list b { font-size: var(--fs-md); line-height: 1.5; }
.devices__list small { font-size: var(--fs-xs); color: var(--ink-3); }
.devices__list .is-on a::before { transform: scaleY(1); }
.devices__list .is-on .num { color: var(--shu); }
.devices__list a:hover b, .devices__list a:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }

/* 2台の重ね方は assets-src/mockup/process.py の pair() と同じ（Windows を左奥、Mac を右手前） */
.devices__stage { position: relative; aspect-ratio: 1877 / 1086; margin-right: calc(var(--bleed) * -1 - 4vw); }
.devices__now { display: none; }
@media (max-width: 900px) { .devices__now { display: grid; } }
.device { position: absolute; margin: 0; }
.device--win { left: 0; top: 0; width: 74%; z-index: 1; }
.device--mac { left: 32.6%; top: 27.4%; width: 67.4%; z-index: 2; }
/* iPhone は左手前に立てる（実物より少し大きく） */
.device--phone { left: 0.5%; top: 36%; width: 17.5%; z-index: 3; }
.device--phone .device__frame { filter: drop-shadow(0 22px 22px rgba(28, 30, 32, 0.25)); }
.device--phone::after { left: 10%; right: 10%; bottom: 0.6%; height: 3%; }
.device--phone .device__cap { left: -2%; top: auto; bottom: -10px; right: auto; transform: translateY(100%); }
.device::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 0.4%; height: 7%; z-index: 0;
  background: radial-gradient(closest-side, rgba(28, 30, 32, 0.26), rgba(28, 30, 32, 0));
}
.device__frame { position: relative; z-index: 2; width: 100%; height: auto; pointer-events: none; user-select: none; }
.device__screen { position: absolute; z-index: 1; overflow: hidden; background: var(--white); }
.device__apps { position: absolute; inset: 0; overflow: hidden; }
.device--mac .device__apps { top: calc(var(--notch) + 0.6%); }
.device--win .device__apps { bottom: 5.2%; }
.device__app { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
.device__app:not(:first-child) { clip-path: inset(100% 0 0 0); }

/* Mac は上にメニューバー（ノッチと同じ高さ）、Windows は下にタスクバー。文字とロゴは描かない */
.device__bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; }
.device--mac .device__bar { top: 0; height: calc(var(--notch) + 0.6%); gap: 1.4%; padding: 0 2%; background: #ececea; }
.device--mac .device__bar i { width: 2.6%; height: 24%; background: #a3a3a1; }
.device--mac .device__bar i:nth-child(4) { margin-left: auto; }
.device--win .device__bar { bottom: 0; height: 5.2%; justify-content: center; gap: 1%; background: #eeeff2; border-top: 1px solid #d3d5d9; }
.device--win .device__bar i { height: 52%; aspect-ratio: 1; border-radius: 22%; background: #a0a4ac; }
.device--win .device__bar i:first-child { background: #3d4149; }

/* 電源の切れた画面と、点いた瞬間の光 */
.device__off, .device__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.device__off { opacity: 0; background: linear-gradient(118deg, #272a2e 0%, #17191c 46%, #0d0e10 100%); }
.device__off::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, 0.07) 29%, transparent 40%); }
.js-motion .device__off { opacity: 1; }
.device__glow { opacity: 0; background: var(--white); }

.device__cap { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.device__cap::before { content: ''; width: 20px; height: 1px; background: var(--ink-4); }
.device--win .device__cap { left: 2%; top: -6px; transform: translateY(-100%); }
.device--mac .device__cap { right: 2%; bottom: -10px; transform: translateY(100%); }
@media (min-width: 901px) { .device--mac .device__cap { left: 4%; right: auto; } }

@media (max-width: 900px) {
  .devices__pin { min-height: 0; padding: var(--block) 0 calc(var(--block) + 24px); }
  .devices__inner { grid-template-columns: 1fr; }
  .devices__list { margin-top: 24px; }
  /* スマホ幅では左右の余白まで使って、2台を大きく見せる */
  .devices__stage { margin: 72px calc(var(--pad) * -0.6) 0; }
  /* 止まっている間は、手前の1台だけを大きく見せるので、機器ごとの名前の代わりに上の見出しで今のアプリを出す */
  .devices__stage .device__cap { display: none; }
  .devices__now { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(50% + 25lvh + 16px); display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: baseline; margin: 0; }
  .devices__now .num { grid-row: span 2; font-size: 15px; font-weight: 600; color: var(--shu); }
  .devices__now b { font-size: 18px; line-height: 1.4; }
  .devices__now small { font-size: 12px; color: var(--ink-3); }
}
/* 手前に出た機器の高さの上限（scenes.js の devices）に合わせて、見出しをその上に置く */
@media (max-width: 900px) and (max-height: 599px) { .devices__now { bottom: calc(50% + 20lvh + 16px); } }
/* 横向きのスマホでは、3台が並んだ状態でも画面の高さに収まるようにする */
@media (max-width: 900px) and (orientation: landscape) {
  .devices__stage { width: calc((100svh - var(--header) - 96px) * 1877 / 1086); margin-inline: auto; }
}

/* 動かさない設定のときの、場面の地の色 */
html:not(.has-tones) .devices { background-color: var(--tone-blue); }
html:not(.has-tones) .statement { background-color: var(--white); }

/* ---- 実績の詳細：画面の中へ入る場面（scenes.js の dives） ----
   Mac かスマホが全画面まで広がり、高画質の絵に入れ替えて、画面の中の3か所へ順に寄る */
.dive { position: relative; }
/* 固定する場面は、iPhone の Safari でツールバーが縮んだときの高さ（lvh）で作る。svh だと縮んだ分が下に帯になって見えた */
.dive__pin { position: relative; height: 100vh; height: 100lvh; overflow: hidden; display: grid; place-items: center; }
.dive__dark { position: absolute; inset: 0; z-index: 0; background: #111315; opacity: 0; pointer-events: none; }
.dive__head { position: absolute; top: calc(var(--header) + 32px); left: 0; right: 0; z-index: 2; }
.dive__title { margin-top: 12px; font-size: clamp(26px, 3vw, 44px); font-weight: 700; line-height: 1.4; }
.dive__device.device { position: relative; left: auto; top: auto; z-index: 1; margin-top: 12vh; will-change: transform; }
.dive__device.device--mac { width: min(78vw, 1240px, calc((100svh - var(--header) - 150px) * 1.69)); }
.dive__device.device--phone { width: calc(min(80svh, 860px) * 688 / 1349); margin-top: 8vh; }
.dive__device .device__frame { filter: drop-shadow(0 36px 36px rgba(28, 30, 32, 0.18)); }
.dive__device::after { display: none; }
.dive__device .device__app { height: 100%; object-fit: cover; }
.dive__full { position: absolute; inset: 0; z-index: 4; overflow: hidden; opacity: 0; pointer-events: none; background: #111315; }
.dive__full-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
.dive__scrim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(14, 16, 18, 0.9) 0%, rgba(14, 16, 18, 0.66) 30%, rgba(14, 16, 18, 0) 58%); }
.dive__steps { position: absolute; z-index: 5; left: var(--bleed); bottom: 12vh; width: min(32vw, 470px); color: #f5f5f1; pointer-events: none; }
.dive__step .num { font-size: 15px; font-weight: 600; color: var(--vest); }
.dive__step b { font-size: clamp(26px, 2.9vw, 46px); line-height: 1.35; letter-spacing: 0.02em; }
.dive__step span:last-child { font-size: 15px; color: rgba(245, 245, 241, 0.78); }
/* 動かさないときは、機器と3つの説明を並べて見せる */
html:not(.js-motion) .dive__pin { display: block; height: auto; padding: calc(var(--header) + 64px) 0 var(--block); }
html:not(.js-motion) .dive__head { position: static; margin-bottom: 40px; }
html:not(.js-motion) .dive--intro .dive__head--intro > * { max-width: 40em; }
html:not(.js-motion) .dive__hint { display: none; }
html:not(.js-motion) .dive__device.device, html:not(.js-motion) .dive--intro .dive__device { margin: 0 auto; }
html:not(.js-motion) .dive__full, html:not(.js-motion) .dive__dark { display: none; }
html:not(.js-motion) .dive__steps { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; width: auto; max-width: calc(var(--max) + var(--pad) * 2); margin: 56px auto 0; padding: 0 var(--pad); color: var(--ink); }

html:not(.js-motion) .dive__step span:last-child { color: var(--ink-2); }
html:not(.js-motion) .dive__step .num { color: var(--shu); }
html:not(.js-motion) .dive--salon .dive__step .num { color: var(--pearl); }
@media (max-width: 760px) {
  .dive__device.device--mac { width: calc(100vw - var(--pad) * 2); margin-top: 6vh; }
  .dive__device.device--phone { width: calc(min(58svh, 560px) * 688 / 1349); margin-top: 10vh; }
  .dive__scrim { background: linear-gradient(0deg, rgba(14, 16, 18, 0.92) 0%, rgba(14, 16, 18, 0.72) 36%, rgba(14, 16, 18, 0) 60%); }
  .dive__steps { left: var(--pad); right: var(--pad); width: auto; bottom: 6vh; }
  /* 場面は lvh の高さなので、説明はツールバーが出ていても隠れない高さに置く */
  @supports (height: 1lvh) { .dive__steps { bottom: calc(100lvh - 100svh + 4svh); } }
  .dive__step b { font-size: clamp(22px, 6.6vw, 30px); }
  .dive__step span:last-child { font-size: 14px; }
  html:not(.js-motion) .dive__steps { grid-template-columns: 1fr; }
}

/* ---- サロンのカルテ（実績07）：濃い藍の地に、明朝の見出しと真珠色の線。お客さまの前に置く道具の落ち着き ---- */
.dive--salon, .salon, .salon-hero {
  --ink: #eef2f4; --ink-2: #c8d2d8; --ink-3: #93a5b1; --ink-4: #8f9aa3;
  --line: rgba(238, 242, 244, 0.13); --line-2: rgba(238, 242, 244, 0.24);
  --pearl: #dbe6ec;
  color: var(--ink);
}
html:not(.has-tones) .salon, html:not(.has-tones) .dive--salon, html:not(.has-tones) .salon-hero { background: var(--tone-salon); }
.dive--salon .dive__dark { background: #060c11; }
/* iPad の奥に、ごく薄い光をにじませる */
.dive--salon .dive__pin::before {
  content: ''; position: absolute; right: 4%; top: 12%; width: min(62vw, 980px); aspect-ratio: 1; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 196, 222, 0.16), rgba(150, 196, 222, 0));
}
.dive__kicker { display: flex; align-items: center; gap: 14px; color: var(--ink-3); letter-spacing: 0.24em; }
.dive__kicker::after { content: ''; width: 48px; height: 1px; background: currentColor; opacity: 0.6; }
.dive--salon .dive__title, .salon__title { font-family: var(--serif); font-weight: 500; letter-spacing: 0.06em; }
.dive--salon .dive__step { border-top-color: var(--pearl); background: rgba(8, 14, 19, 0.82); }
.dive--salon .dive__step .num { color: var(--pearl); }
.dive--salon .dive__step b { font-family: var(--serif); font-weight: 500; }

/* 導入つきの場面：文章を左に、機器を右に置き、下へ進むと機器が画面いっぱいに広がる */
.dive--intro .dive__head--intro { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.dive--intro .dive__head--intro > * { max-width: min(38vw, 520px); }
.dive--intro .dive__title { margin-top: 22px; font-size: clamp(30px, 3.2vw, 52px); line-height: 1.55; }
.dive__lead { margin-top: 28px; color: var(--ink-2); font-size: 15px; line-height: 2.1; }
.dive__hint { margin-top: 44px; display: flex; align-items: center; gap: 14px; color: var(--ink-4); }
.dive__hint::before { content: ''; width: 1px; height: 40px; background: linear-gradient(var(--ink-3), transparent); }
.dive--intro .dive__pin { justify-items: end; }
.dive--intro .dive__device { margin: 6vh max(var(--pad), calc((100vw - var(--max)) / 2 - 20px)) 0 0; }
.dive__device.device--ipad { width: min(58vw, 1100px, calc((100svh - var(--header) - 110px) * 1.36)); }
/* 導入の文がある場面では、横長の機器は文の右に空いた幅に収める（白い画面が白い文字に重なって読めなくなった）。
   右は画面の端の近くまで使って、大きさを保つ */
@media (min-width: 761px) {
  .dive--intro .dive__device.device--ipad, .dive--intro .dive__device.device--mac {
    margin-right: 3vw;
    width: min(calc(100vw - var(--bleed) - min(38vw, 520px) - 64px - 3vw), 1100px, calc((100svh - var(--header) - 110px) * 1.36));
  }
}
.dive--salon .dive__device .device__frame { filter: drop-shadow(0 50px 60px rgba(0, 0, 0, 0.55)); }
.dive__full-img:not([data-i='0']) { opacity: 0; }

/* お店ごとの使い方 */
.salon { position: relative; padding: var(--block) 0 calc(var(--block) + 24px); }
.salon__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 80px; align-items: start; }
.salon__head { position: sticky; top: calc(var(--header) + 48px); }
.salon__title { margin-top: 20px; font-size: clamp(28px, 2.9vw, 46px); line-height: 1.6; }
.salon__lead { margin-top: 24px; color: var(--ink-2); line-height: 2; }
.salon__rows { border-top: 1px solid var(--line-2); }
.salon__row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); }
.salon__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--pearl); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.salon__row:hover::after { transform: scaleX(1); }
.salon__row b { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 27px); letter-spacing: 0.06em; }
.salon__row span { color: var(--ink-2); font-size: 15px; }

/* 体験デモ：iPad の枠の中で動かす。デモは iPad の大きさ（1400x982）で開き、画面の大きさに合わせて縮める */
.ipad-demo { position: relative; max-width: 1100px; margin: 0 auto; }
.ipad-demo__frame { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 40px 50px rgba(28, 30, 32, 0.25)); }
.ipad-demo__screen.demo__frame { position: absolute; z-index: 1; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); border: 0; box-shadow: none; overflow: hidden; background: #f4f7fa; }
.ipad-demo__screen iframe { width: 1400px; height: 982px; transform-origin: 0 0; transform: scale(var(--k, 0.5)); }
.ipad-demo__screen .demo__poster { object-position: top left; }

@media (max-width: 900px) {
  .salon__inner { grid-template-columns: 1fr; }
  .salon__head { position: static; }
  .salon__row { grid-template-columns: 1fr; padding: 24px 0; }
}
@media (max-width: 760px) {
  .dive--intro .dive__head--intro { top: calc(var(--header) + 16px); bottom: auto; justify-content: flex-start; }
  .dive--intro .dive__head--intro > * { max-width: none; }
  .dive--intro .dive__title { font-size: clamp(24px, 7vw, 32px); margin-top: 12px; }
  .dive__lead { margin-top: 14px; font-size: 13px; line-height: 1.9; }
  .dive__hint { display: none; }
  .dive--intro .dive__pin { justify-items: center; align-items: end; }
  .dive--intro .dive__device { margin: 0 0 9vh; }
  .dive__device.device--ipad { width: calc(100vw - var(--pad) * 2); }
}

/* ---- トップの第二の見出し：サロンのカルテ ----
   濃い藍の地に、明朝の大きな見出しと、右へはみ出す大きな iPad。奥には薄く「カルテ」の文字 */
.salon-hero { position: relative; overflow: clip; padding: clamp(96px, 10vw, 150px) 0 clamp(88px, 9vw, 140px); }
.salon-hero::before { content: ''; position: absolute; right: -6%; top: 6%; width: min(80vw, 1200px); aspect-ratio: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(150, 196, 222, 0.16), rgba(150, 196, 222, 0)); }
.salon-hero__bg { position: absolute; left: -2%; top: 50%; margin: 0; transform: translateY(-50%); font-family: var(--serif); font-size: clamp(160px, 26vw, 420px); font-weight: 500; line-height: 1; letter-spacing: 0.12em; white-space: nowrap; color: rgba(238, 242, 244, 0.035); pointer-events: none; user-select: none; }
.salon-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 40px; align-items: center; }
.salon-hero__copy { position: relative; z-index: 2; }
.salon-hero__title { margin-top: 24px; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.1vw, 54px); line-height: 1.5; letter-spacing: 0.05em; }
.salon-hero__title { text-wrap: nowrap; }
@media (max-width: 900px) { .salon-hero__title { text-wrap: balance; } }
.salon-hero__lead { margin-top: 28px; max-width: 30em; color: var(--ink-2); font-size: 15px; line-height: 2.1; }
.salon-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 40px; }
.btn--pearl { background: var(--pearl); color: #0e1a23; border-color: var(--pearl); }
.btn--pearl::before { background: #ffffff; }
.link-arrow--pearl { color: var(--ink); }
.link-arrow--pearl::before { background: var(--ink-2); }
.link-arrow--pearl::after { border-color: var(--ink-2); background-image: linear-gradient(var(--ink), var(--ink)); }
/* iPad は画面の右端からはみ出すほど大きく置く */
.salon-hero__device.device { position: relative; left: auto; top: auto; width: auto; margin-right: calc(var(--bleed) * -1 - 6vw); will-change: transform; }
.salon-hero__device::after { display: none; }
.salon-hero__device .device__frame { filter: drop-shadow(0 50px 60px rgba(0, 0, 0, 0.5)); }
.salon-hero__device .device__app { height: 100%; object-fit: cover; }
.salon-hero__pen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.salon-hero__pen path { fill: none; stroke: #1a3b52; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.salon-hero__chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.salon-hero__chip { position: absolute; padding: 10px 16px; border: 1px solid rgba(238, 242, 244, 0.22); background: rgba(10, 20, 27, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-family: var(--serif); font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.08em; white-space: nowrap; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7); }
.salon-hero__chip::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: middle; background: var(--pearl); transform: rotate(45deg); }
.salon-hero__chip--1 { left: -9%; top: 38%; }
.salon-hero__chip--2 { left: 30%; top: -5%; }
.salon-hero__chip--3 { right: 22%; bottom: 4%; }
.salon-hero__chip--4 { left: 6%; bottom: 10%; }
@media (max-width: 900px) {
  .salon-hero__inner { grid-template-columns: 1fr; }
  .salon-hero__device.device { margin: 24px calc(var(--pad) * -0.6) 0; }
  .salon-hero__bg { top: 20%; }
}
@media (max-width: 600px) {
  .salon-hero__title { font-size: clamp(26px, 7.4vw, 34px); }
  .salon-hero__chip { padding: 6px 10px; font-size: 12px; }
  .salon-hero__chip--1 { left: 0; top: -6%; }
  .salon-hero__chip--2 { left: auto; right: 4%; top: -10%; }
  .salon-hero__chip--3 { right: 4%; bottom: -6%; }
  .salon-hero__chip--4 { left: 2%; bottom: -2%; }
}

/* ---- ホームページ制作（トップの節と、詳細ページ） ----
   白い画廊。極太の黒い見出しに蛍光の線、ブラウザの枠に入れた画面を並べる。建設業の方眼とも、サロンの藍とも違う空気にする */
.websec { position: relative; overflow: clip; padding: var(--block) 0 calc(var(--block) * 0.8); background: #ffffff; }
.has-tones .websec { background: transparent; }
.websec__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.websec__kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); letter-spacing: 0.18em; }
.websec__kicker::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--vest); box-shadow: 0 0 0 1px var(--ink) inset; }
.websec__title { margin-top: 20px; font-size: clamp(44px, 5.2vw, 84px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.websec__title em, .wph__title em { font-style: normal; background: linear-gradient(transparent 58%, var(--vest) 58%, var(--vest) 92%, transparent 92%); padding: 0 0.04em; }
.websec__side { display: grid; gap: 22px; justify-items: start; color: var(--ink-2); }
.websec__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.websec__tags li { padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; color: var(--ink); }
.websec__wall { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 96px); }
.websec__row { display: flex; gap: 28px; width: max-content; will-change: transform; }
.websec__row .bw { width: clamp(300px, 34vw, 520px); flex: none; }
.websec__row--b { margin-left: -12vw; }

/* ブラウザの枠 */
.bw { margin: 0; overflow: hidden; background: #ffffff; border: 1px solid #e2e2de; border-radius: 12px; box-shadow: 0 30px 60px -42px rgba(17, 17, 17, 0.4); }
.bw__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f4f4f2; border-bottom: 1px solid #e2e2de; }
.bw__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d6d1; }
.bw__url { display: flex; align-items: center; height: 18px; margin-left: 12px; padding: 0 12px; border-radius: 9px; background: #ffffff; font-size: 10px; color: #808080; white-space: nowrap; overflow: hidden; max-width: 70%; }
.bw img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .websec__head { grid-template-columns: 1fr; }
  /* 「ホームページも、」の8文字が1行に収まる大きさにして、読点だけが次の行に落ちないようにする */
  .websec__title { font-size: clamp(30px, 10.4vw, 72px); }
  .websec__row .bw { width: 72vw; }
}

/* ---- ホームページ制作のページ ---- */
.wph { position: relative; padding: calc(var(--header) + 40px) 0 clamp(80px, 9vw, 140px); background: #ffffff; }
.has-tones .wph, .has-tones .wkinds, .has-tones .wincl, .has-tones .wflow2 { background: transparent; }
.wph__crumbs { margin-bottom: clamp(40px, 5vw, 72px); }
.wph__title { margin-top: 22px; font-size: clamp(30px, 6vw, 100px); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); }
.wph__lead { max-width: 36em; margin: 32px 0 0 clamp(0px, 22%, 300px); color: var(--ink-2); font-size: var(--fs-md); line-height: 2; }
.wph__stage { position: relative; width: min(1180px, calc(100% - var(--pad) * 2)); margin: clamp(56px, 7vw, 96px) auto 0; }
.bw--hero { box-shadow: 0 60px 90px -60px rgba(17, 17, 17, 0.5); }
.bw__screen { position: relative; aspect-ratio: 16 / 10; background: #fafaf8; overflow: hidden; }
.bw__design { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bw__scan { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1px; background: var(--vest); box-shadow: 0 0 24px 4px rgba(215, 242, 59, 0.7); opacity: 0; }
.js-motion .bw__design { clip-path: inset(0 100% 0 0); }
/* 設計図（ワイヤーフレーム）：灰色の箱と注記だけで、トップページの並びを描く */
.wire { position: absolute; inset: 0; }
.wire > span { position: absolute; display: block; background: #e6e6e2; border-radius: 4px; }
.wire__nav { left: 3%; right: 3%; top: 3%; height: 5%; background: #ececea !important; }
.wire__t1 { left: 7%; top: 22%; width: 34%; height: 7%; }
.wire__t2 { left: 7%; top: 31.5%; width: 28%; height: 7%; }
.wire__t3 { left: 7%; top: 41%; width: 18%; height: 7%; }
.wire__p { left: 7%; top: 53%; width: 32%; height: 2.4%; }
.wire__p--2 { top: 57%; width: 26%; }
.wire__btn { left: 7%; top: 66%; width: 10%; height: 6%; background: #cfcfca !important; }
.wire__btn--2 { left: 19%; background: transparent !important; border: 2px solid #cfcfca; }
.wire__img { left: 48%; top: 16%; width: 48%; height: 60%; background: repeating-linear-gradient(135deg, #ececea 0 12px, #e2e2de 12px 24px) !important; }
.wire__note { background: none !important; font-size: 10px; color: #9a9a96; }
.wire__note { left: 7%; top: 18%; }
.wire__note--img { left: 48%; top: 12%; }
.wph__cap { display: flex; justify-content: space-between; margin-top: 14px; color: #8a8a86; }
.wph__cap span:last-child { color: var(--ink); }

.wsec-title { font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.wkinds { padding: var(--block) 0; background: #ffffff; }
.wkinds__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; }
.wkinds__list li { display: grid; grid-template-columns: 3em minmax(0, 13em) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 26px 0; border-top: 2px solid var(--ink); }
.wkinds__list li:last-child { border-bottom: 2px solid var(--ink); }
.wkinds__list .num { font-size: 15px; font-weight: 600; color: var(--ink); }
.wkinds__list b { font-size: clamp(20px, 1.8vw, 26px); }
.wkinds__list li > span:last-child { color: #444; font-size: 15px; }
.wkinds__list li:hover b { background: linear-gradient(transparent 60%, var(--vest) 60%); }

.wcases { padding: var(--block) 0; }
.wcase { margin-top: clamp(56px, 7vw, 100px); }
.wcase__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.wcase__no { grid-row: span 2; font-size: clamp(56px, 6vw, 96px); font-weight: 600; line-height: 0.9; color: var(--ink); }
.wcase__title { font-size: clamp(22px, 2.2vw, 32px); }
.wcase__sub { color: var(--ink-3); font-size: 14px; }
.wcase__stage { position: relative; margin-top: 32px; padding-bottom: 6%; }
.wcase__pc { width: 78%; position: relative; z-index: 1; }
.wcase__pc2 { position: absolute; right: 0; top: 18%; width: 46%; z-index: 2; }
.wcase__phone { position: absolute; right: 30%; bottom: 0; z-index: 3; width: 14%; margin: 0; padding: 6px; border-radius: 26px; background: #111; box-shadow: 0 40px 50px -30px rgba(17, 17, 17, 0.6); }
.wcase__phone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.wcase__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 36px; border-top: 1px solid var(--line-2); }
.wcase__facts > div { padding: 16px 0; }
.wcase__facts dt { font-size: 12px; color: var(--ink-3); }
.wcase__facts dd { margin-top: 4px; font-weight: 700; }
.wcase__note { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

.wincl { padding: var(--block) 0; background: #ffffff; }
.wincl__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; }
.wincl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.wincl__list li { display: grid; gap: 8px; padding-left: 34px; position: relative; }
.wincl__list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--vest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; }
.wincl__list b { font-size: 18px; }
.wincl__list span { color: #444; font-size: 15px; }

.wlink__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: center; }
.wlink__title { margin-top: 18px; font-size: clamp(28px, 3vw, 46px); font-weight: 700; line-height: 1.4; }
.wlink__lead { margin: 22px 0 26px; color: var(--ink-2); }
.wlink .websec__kicker { color: var(--ink); }
.wlink__flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; }
.wlink__arrow { position: relative; height: 2px; background: var(--vest); }
.wlink__arrow i { position: absolute; right: -2px; top: -6px; width: 12px; height: 12px; border-top: 2px solid var(--vest); border-right: 2px solid var(--vest); transform: rotate(45deg); }
.wlink__arrow::before { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--vest); animation: wlink-dot 2.2s var(--ease-in-out) infinite; }
@keyframes wlink-dot { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
.wlink__app { transform: translateY(18%); }

.wflow2 { padding: var(--block) 0; background: #ffffff; }
.wflow2__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; counter-reset: w; }
.wflow2__list li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.wflow2__list .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vest); font-weight: 600; }
.wflow2__list b { font-size: 19px; }
.wflow2__list li > span:last-child { color: #444; font-size: 14px; }

/* サロン向けのページ：お店のホームページも */
.salon-web { position: relative; padding: var(--block) 0; }
.has-tones .salon-web { background: transparent; }
html:not(.has-tones) .salon-web { background: var(--tone-salon); }
.salon-web { --ink: #eef2f4; --ink-2: #c8d2d8; --ink-3: #93a5b1; --line: rgba(238, 242, 244, 0.13); --pearl: #dbe6ec; color: var(--ink); }
.salon-web__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: center; }
.salon-web__stage { position: relative; padding-bottom: 14%; }
.salon-web__site { width: 74%; }
.salon-web__app { position: absolute; right: 0; bottom: 0; width: 58%; }

@media (max-width: 900px) {
  .wkinds__inner, .wincl__inner, .wlink__inner, .salon-web__inner { grid-template-columns: 1fr; }
  .wkinds__list li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .wkinds__list li > span:last-child { grid-column: 2; }
  .wincl__list { grid-template-columns: 1fr; }
  .wcase__facts { grid-template-columns: 1fr 1fr; }
  .wflow2__list { grid-template-columns: 1fr 1fr; }
  .wlink__flow { grid-template-columns: 1fr; gap: 20px; }
  .wlink__arrow { width: 2px; height: 40px; margin: 0 auto; }
  .wlink__arrow i { right: -5px; top: auto; bottom: -2px; transform: rotate(135deg); }
  .wlink__arrow::before { display: none; }
  .wlink__app { transform: none; }
}
@media (max-width: 600px) {
  .wph__lead { margin-left: 0; }
  .wcase__phone { width: 22%; right: 6%; }
  .wflow2__list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wph__title { font-size: 9.4vw; }
}

/* お知らせの記事（WordPress の投稿） */
.ph__title--post { font-size: clamp(26px, 4vw, 56px); }
.post { max-width: 46em; }
.post__body { line-height: 2.1; }
.post__body > * + * { margin-top: 1.4em; }
.post__body h2 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; }
.post__body a { text-underline-offset: 4px; }
.post__body img { height: auto; }
.post__back { margin-top: 56px; }
.news-pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; }