/* ===== 商業施設ページ 第2版（plan_mall.py）: plan-a.css の上に重ねる、このページだけの部品 =====
   TOP と共有するのは物差し（--u・--a-*・--e-*・--d-*）とヘッダー・フッター・出現の動きだけ。
   見た目の型はこのページのもの（実写の hero・効果と事例の行・場所の切り替え・資料の帯）。新しい色・書体は足さない */

.m-main { padding-top: 78px; }
.m-main--a { padding-top: 0; }   /* 案A: 写真をページの最上部から敷き、ヘッダーを写真の上に重ねる（しのさん 2026-10-08「白帯なしで写真の上に」） */
/* 写真の上のヘッダー（ピルになる前だけ）: ロゴ・メニューは白、問い合わせは白地に Violet の字＝ピルの時と同じ配色。スクロールで変わるのは形と地の色だけ */
html:not(.a-drawer) .a-hd[data-on-photo]:not(.is-pill) .a-hd__in { color: var(--a-w); }
html:not(.a-drawer) .a-hd[data-on-photo]:not(.is-pill) .a-hd__cta { background: var(--a-w); color: var(--a-violet); }
html:not(.a-drawer) .a-hd[data-on-photo]:not(.is-pill) :focus-visible { outline-color: var(--a-w); }
.m-main :is(p, h2, h3, li, b) { word-break: auto-phrase; }
.m-main .a-cta :is(p, h2) { word-break: revert-layer; }   /* 最後の手紙は TOP と同じ組み（TOP の改行の位置に合わせる。しのさん 2026-10-09「TOP の最後のメッセージと同様に」） */   /* 文節で折る（「AI／で」のような折れを防ぐ。Safari は未対応で通常の折り）*/   /* ヘッダーの高さ（.a-hd__in 78px）。hero の写真をヘッダーの下から始める＝ヘッダーの字が写真に乗らない */
.m-sec { padding: var(--a-sec) 0; }
.m-sec__h { margin: 0; }
.m-sec > .a-container > .m-sec__h, .m-sec > .a-container > .m-two { margin-bottom: var(--a-head); }
.m-lead { margin: calc(16 * var(--u)) 0 0; max-width: 34em; color: var(--a-g700); font-size: max(16px, calc(16 * var(--u))); line-height: 1.8; }
.m-two { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-gap); flex-wrap: wrap; }
.m-more, .m-fn__case, [data-sw-lab] { position: relative; }   /* 文字ボタンの合図（TOP と同じ群れと括弧）の座標の基準 */
.m-more { display: inline-flex; align-items: baseline; gap: 4px; color: var(--a-violet); font-size: max(14px, calc(14 * var(--u))); }

/* ---- ボタン（主は案A の .a-btn。副は線だけ） ---- */
.m-btns { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(16 * var(--u)); align-items: center; }
.m-btn { height: calc(52 * var(--u)); min-height: 48px; padding: 0 calc(32 * var(--u)); font-size: max(15px, calc(15 * var(--u))); }
.m-btn2 { display: inline-flex; align-items: center; height: calc(52 * var(--u)); min-height: 48px; padding: 0 calc(28 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font: 500 max(15px, calc(15 * var(--u)))/1 var(--a-jp); transition: background-color var(--t); }
.m-btn3 { position: relative; display: inline-flex; align-items: baseline; gap: 4px; padding: 12px 4px; font: 500 max(15px, calc(15 * var(--u)))/1 var(--a-jp); color: var(--a-violet); }   /* 文字のボタン（TOP の .a-see と同じ: 字は Violet、載せると群れの括弧） */
/* hero のお問い合わせ: 写真の上ではヘッダーのボタン（写真の上の時）と同じ白地に Violet の字。載せた時も同じ（Violet を 12% 重ねる）。しのさん 2026-10-09 コメント「お問い合わせは白いボタンにして ヘッダーと合わせて」。
   1279px 以下は字が写真の下（白地）なので、白いボタンにすると見えなくなる → Violet のまま */
@media (min-width: 1280px) { .m-hero--a .a-btn { background: var(--a-w); color: var(--a-violet); } .m-hero--a .a-btn.is-tap { background: color-mix(in srgb, var(--a-violet) 12%, var(--a-w)); } }
@media (min-width: 1280px) and (hover: hover) { .m-hero--a .a-btn:hover { background: color-mix(in srgb, var(--a-violet) 12%, var(--a-w)); } }
@media (min-width: 1280px) { .m-hero--a .m-btn3 { color: var(--a-w); } .m-hero--a .m-btn3 .a-sw path { stroke: var(--a-w); } .m-hero--a .m-btn3 .a-arr { opacity: .8; } }   /* 写真の上では白 */
.m-btn2.is-tap { background: rgb(0 0 0 / .05); } @media (hover: hover) { .m-btn2:hover { background: rgb(0 0 0 / .05); } }

/* ---- ロゴ: サービスサイトTOP へのリンク。載せると下に「サービスリスト」の札（白地に Violet の字＝ヘッダーの問い合わせと同じ配色。写真の明るい所・白地・ピルの外のどこでも読める）。
   札の上端は、カーソルの括弧（リンクの箱から 6px 外）とピルの下端から 8px 以上離す。箱の高さはロゴ 20.8px（ピル 10.4px）、1100px 以下は 44px ---- */
.m-hd-logo { position: relative; }
.m-hd-logo__t { position: absolute; left: 50%; translate: calc(-50% + .06em) 0; top: calc(50% + 22px); padding: 0; font: 500 12px/1 var(--a-jp); letter-spacing: .12em; white-space: nowrap; pointer-events: none;
  color: currentColor; opacity: 0; transition: opacity 160ms var(--e-in); }   /* ロゴの左右中央（字間 .12em は最後の字の後ろにも付くので、その半分 .06em だけ戻す。しのさん 2026-10-09 コメント）。字だけ（しのさん 2026-10-09「背景不要・テキストだけ」）。色はロゴと同じ（写真の上は白・白地のヘッダーは Violet） */
.a-hd[data-on-photo]:not(.is-pill) .m-hd-logo__t { text-shadow: 0 0 8px rgb(0 0 0 / .5); }   /* 写真の明るい所でも読める、ごく薄い影 */
.a-hd.is-pill .m-hd-logo__t { top: calc(50% + 36px); color: var(--a-violet); }   /* ピルの時はピルの下＝白い本文の上なので Violet */
@media (max-width: 1100px) { .m-hd-logo__t, .a-hd.is-pill .m-hd-logo__t { top: calc(50% + 30px); } }
.m-hd-logo.is-tap .m-hd-logo__t, .m-hd-logo:focus-visible .m-hd-logo__t, .m-hd-logo.is-show .m-hd-logo__t { opacity: 1; transition: none; }   /* 出方は js の解像（幾何学の升から字へ） */
@media (hover: hover) { .m-hd-logo:hover .m-hd-logo__t { opacity: 1; transition: none; } }
html.a-drawer .m-hd-logo__t { display: none; }

/* ---- フッターのリンクに下線を出さない（しのさん 2026-10-08 コメント「underbar はサービスサイトTOP では出ないはず」）。
   TOP の規則（plan-a.css .a-foot__list a:hover / .a-foot__sns a:hover）は下線を指定しているが、語を包む span（inline-block）の中には下線が届かず、
   「導入」だけに線が出る中途半端な見た目になっていた。載せた時の合図はカーソルの括弧と解像に任せる ---- */
.a-foot__list a.is-tap, .a-foot__sns a.is-tap { text-decoration: none; }
@media (hover: hover) { .a-foot__list a:hover, .a-foot__sns a:hover { text-decoration: none; } }

/* ---- 左の現在地インジケーター（TOP と同じ部品）: hero の写真に重なっている所だけ白にする（暗い写真の上で灰・Violet が沈むため）。
   縦線は写真の下端（--cut）で色を切り替え、他の部品はそれぞれの中心が写真の上にある間だけ .is-ph（js/plan-mall.js） ---- */
.a-ind__rl { background: linear-gradient(to bottom, rgb(255 255 255 / .32) var(--cut, 0px), var(--a-line) var(--cut, 0px)); }
.a-ind__sp.is-ph { background: rgb(255 255 255 / .72); }
.a-ind__hs.is-ph, .a-ind__mk.is-ph { background: var(--a-w); }
.a-ind__ttl.is-ph { color: rgb(255 255 255 / .9); }
.a-ind__ttl.is-ph .a-ind__pc { color: rgb(255 255 255 / .72); }
.a-ind.is-preview .a-ind__ttl.is-ph .a-ind__t { color: var(--a-w); }
.a-ind__rg a.is-ph:focus-visible { outline-color: var(--a-w); }


/* ---- 検出の枠（角の括弧）: 写真の中の、読み取られている物を囲む（TOP のカーソル・数字と同じ記号） ---- */
.m-brk { position: absolute; left: var(--x0); top: var(--y0); width: calc(var(--x1) - var(--x0)); height: calc(var(--y1) - var(--y0)); pointer-events: none; }
.m-brk i { position: absolute; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border: 0 solid var(--a-w); }
.m-brk i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; transform-origin: 0 0; }
.m-brk i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; transform-origin: 100% 0; }
.m-brk i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; transform-origin: 0 100%; }
.m-brk i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; transform-origin: 100% 100%; }
html:not(.no-js) .m-brk i { opacity: 0; }
html:not(.no-js) .m-brk.is-on i { animation: mBrk var(--d-xl) var(--e-out) both; }
html:not(.no-js) .m-brk.is-on i:nth-child(2) { animation-delay: 60ms; } html:not(.no-js) .m-brk.is-on i:nth-child(3) { animation-delay: 120ms; } html:not(.no-js) .m-brk.is-on i:nth-child(4) { animation-delay: 180ms; }
@keyframes mBrk { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }

/* ================= hero 案A: 導入事例の実写を全幅で（16:9 のまま。枠の位置を写真の座標で決めるため切らない） ================= */
.m-hero--a { position: relative; color: var(--a-w); }
.m-hero--a .m-hero__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--a-k); }
.m-hero--a .m-hero__photo picture { display: contents; }
.m-hero--a .m-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.m-hero--a .m-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 字が乗る左下と、現在地が乗る上端だけを暗くする。サイネージ（中央）には幕を掛けない。左上の「DINING」の看板が明るいので左側も（2026-10-08 実測: 小見出し 1.67 → 4.5 以上に） */
  background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .5) 32%, rgb(0 0 0 / 0) 60%),
              linear-gradient(to right, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .42) 30%, rgb(0 0 0 / 0) 50%),
              linear-gradient(to bottom, rgb(0 0 0 / .6) 0%, rgb(0 0 0 / .38) 12%, rgb(0 0 0 / 0) 24%); }   /* 上端はヘッダー（78px）と現在地の下まで */
.m-hero--a .m-brk--sign { --x0: 35.4%; --x1: 74.4%; --y0: 32.4%; --y1: 74.2%; z-index: 1; }
.m-hero--a .m-hero__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: calc(78px + 16 * var(--u)) var(--a-gutter); z-index: 2; }   /* 字のかたまりは hero の上下中央（しのさん 2026-10-09 コメント）。上下の余白を同じにして、写真の高さのちょうど真ん中に */
.m-hero--a .m-hero__place { position: absolute; right: var(--a-gutter); bottom: calc(24 * var(--u)); margin: 0; font-size: 12px; color: rgb(255 255 255 / .7); }
.m-hero__body { display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: 40em; }
.m-hero__eye { align-self: flex-start; margin: 0; font-size: max(14px, calc(14 * var(--u))); letter-spacing: .08em; }
.m-hero--a .m-hero__eye { color: rgb(255 255 255 / .92); }
.m-hero__h { margin: 0; font: 700 calc(54 * var(--u))/1.3 var(--a-serif);   /* 1 行目の右端がサイネージ（写真の 35.4%）より左に収まる大きさ */ letter-spacing: .02em; }
/* 字詰め（palt）は指定しない（2026-10-13）: 前の読み方（Google の text=）の書体には palt が無く、一度も効いていなかった。確認してきた字間のまま */
.m-hero__h > span { display: block; }
.m-hero__sub > span { display: block; }   /* 1 文 1 行（幅が足りない時は文の中で折れる。その時も文節で折る）*/
.m-hero__sub { margin: 0; max-width: 34em; word-break: auto-phrase; font-size: max(16px, calc(17 * var(--u))); line-height: 1.85; }
.m-hero--a .m-hero__sub { color: rgb(255 255 255 / .92); }
.m-hero--a .m-btn2 { color: var(--a-w); }
.m-hero--a .m-btn2.is-tap { background: rgb(255 255 255 / .12); } @media (hover: hover) { .m-hero--a .m-btn2:hover { background: rgb(255 255 255 / .12); } }

/* ================= 導入している商業施設（名前を並べる。実例が先に目に入るように） ================= */

/* ================= 実現できること: 効果 → その事例（写真と、事例ページの文） ================= */
.m-fns__list { display: flex; flex-direction: column; gap: var(--a-row); }
.m-fn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(64 * var(--u)); align-items: center; padding-top: var(--a-row); border-top: 1px solid var(--a-k14); }
.m-fns__list > .m-fn:first-child { padding-top: 0; border-top: 0; }

.m-fn--r .m-fn__pic { order: 2; }
.m-fn__pic { display: block; aspect-ratio: 3 / 2; border-radius: 8px; clip-path: inset(0 round 8px); overflow: hidden; background: var(--a-paper); }   /* 写真の角丸は活用例のカードの写真（.a-pcard__img）と同じ 8px（しのさん 2026-10-09 コメント）。clip-path は拡大時も角を保つ */
.m-fn__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-l) var(--e-out); }
.m-fn__pic.is-tap img { transform: scale(1.03); } @media (hover: hover) { .m-fn__pic:hover img { transform: scale(1.03); } }
.m-fn__txt { display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: 34em; }
.m-fn__h { margin: 0; font: 500 calc(32 * var(--u))/1.4 var(--a-jp); letter-spacing: -.01em; }
.m-fn__b { margin: 0; font-size: max(16px, calc(17 * var(--u))); line-height: 1.85; }
.m-fn__proof { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--a-paper); }
.m-fn__proof picture { display: contents; }
.m-fn__logo { display: block; align-self: flex-start; width: auto; max-width: 100%; height: 28px; object-fit: contain; margin-bottom: calc(4 * var(--u)); }   /* 施設のロゴ（帯と同じ素材。横長は低く、正方形に近いものは高く＝見た目の大きさをそろえる） */
.m-fn__logo[data-sz="w"] { height: 22px; } .m-fn__logo[data-sz="x"] { height: 15px; } .m-fn__logo[data-sz="s"] { height: 44px; }
.m-fn__case { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 4px; color: var(--a-violet); font-weight: 500; font-size: max(15px, calc(15 * var(--u))); }
.m-fn__p { margin: 0; color: var(--a-g700); font-size: max(14px, calc(15 * var(--u))); line-height: 1.8; }

/* ================= 場所ごとの活用例: 切り替え（3 つの場所） ================= */
.m-places { background: var(--a-paper); }

/* ================= 仕組み: 検知 → 解析 → 配信（線でつなぐ 3 段） ================= */
.m-mech__hd { margin-bottom: var(--a-head); }
/* ---- 導入先のロゴの帯（TOP の .a-logos をそのまま）。「実現できること」の下に置く ---- */
.m-logos .a-logos { padding: 0 0 var(--a-sec); }   /* 上は「実現できること」の下の余白に任せる。下は次の節（灰の地）との間を節の余白だけ空ける */

/* ---- 場所ごとの活用例: TOP の利用シーンと同じ横スクロールのカード（.a-carousel・.a-pcard。物差しは .a-work と同じ） ---- */
.m-places { --d-g1: 8px; --d-g2: 24px; --d-side: calc(30 * var(--u)); }
.m-places .a-carhint { background: linear-gradient(to right, rgb(245 246 248 / 0), rgb(245 246 248 / .88) 42%, rgb(245 246 248 / .96)); }   /* 右の合図のぼかしは地の色（灰 --a-paper）へ。TOP は白地なので白 */
@media (max-width: 767px) { .m-places .a-carhint { background: linear-gradient(to right, rgb(245 246 248 / 0), rgb(245 246 248 / .88) 70%); } }
/* 列は画面の端まで広げる（しのさん 2026-10-23「画面いっぱいを使わず途中で切れている。画面いっぱい表示する方が見た目がいい」）。
   前は列の外側が節の余白（--a-gutter）より狭い --d-side だけ出ていて、画面の端から 8〜67px 手前でカードが切れていた。
   列を余白ぶん外へ出し、同じだけ内側を空ける（1 枚目の左端は見出しの線のまま）。止まる位置も同じだけ内側に。右の合図も画面の端へ */
.m-places .a-carousel { margin-inline: calc(var(--a-gutter) * -1); padding-inline: var(--a-gutter); scroll-padding-inline: var(--a-gutter); }
.m-places .a-carhint { right: calc(var(--a-gutter) * -1); }
.m-places .a-carwrap.is-all .a-carousel { margin-inline: 0; padding-inline: 0; }   /* 全部見える幅は送らないので、列は見出しの幅に収める */
.m-places .a-carwrap.is-all .a-carousel { grid-auto-flow: row; grid-template-columns: repeat(var(--pl-n, 3), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }   /* 全部見える幅: 送らずに等分で並べる */
.m-places .a-carwrap.is-all .a-carhint { display: none; }
.m-pl__l { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.m-pl__t { margin: 0 0 4px; font: 500 15px/27px var(--a-jp); color: var(--a-k); word-break: auto-phrase; }   /* TOP のカードの一文（.a-pcard__lead）と同じ字 */
.m-pl__d { margin: 0; font: 400 13px/21px var(--a-jp); color: var(--a-g700); word-break: auto-phrase; }     /* TOP のカードの本文（.a-pcard__body）と同じ字 */

.m-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-gap); margin: 0; padding: 0; list-style: none; }
.m-step { position: relative; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-top: calc(28 * var(--u)); }
.m-step::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--a-g300); }   /* 罫は 1px（しのさん 2026-10-08「横線が太い」。前は 2px の黒）。TOP の導入までの流れと同じ線・同じ升 */
.m-step::before { content: ""; position: absolute; z-index: 1; left: 0; top: -3px; width: 6px; height: 6px; background: var(--a-violet); }
.m-step__t { font: 500 max(20px, calc(24 * var(--u)))/1.4 var(--a-jp); }
/* 点群の枠（TOP の .a-step__obj と同じ 240px 角・名前は点群の中央）。3 列のまま、各列の頭に置く */
.m-step__obj { align-self: center; width: 100%; max-width: 240px; margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); }
.m-step__obj .m-step__t { font: 400 max(22px, calc(28 * var(--u)))/1.4 var(--a-jp); letter-spacing: .02em; }
@media (max-width: 767px) { .m-step__obj { max-width: min(74vw, 300px); align-self: center; } .m-step { text-align: center; } .m-step__d { margin-inline: auto; } }
.m-step__d { margin: 0; color: var(--a-g700); font-size: max(15px, calc(15 * var(--u))); line-height: 1.85; }

/* ================= 製品・サービス: 2 × 2 ================= */
.m-prods__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(56 * var(--u)) var(--a-gap); }
.m-prod { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.m-prod__pic { display: block; aspect-ratio: 16 / 9; margin-bottom: calc(10 * var(--u)); border-radius: 8px; clip-path: inset(0 round 8px); overflow: hidden; background: var(--a-paper); }
.m-prod__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-l) var(--e-out); }
.m-prod.is-tap .m-prod__pic img { transform: scale(1.03); } @media (hover: hover) { .m-prod:hover .m-prod__pic img { transform: scale(1.03); } }
.m-prod__k { font-size: 12px; color: var(--a-g500); letter-spacing: .04em; }
.m-prod__n { color: var(--a-violet); display: inline-flex; align-items: baseline; gap: 4px; font: 500 max(20px, calc(22 * var(--u)))/1.4 var(--a-jp); }
.m-prod__d { max-width: 34em; color: var(--a-g700); font-size: max(15px, calc(15 * var(--u))); line-height: 1.85; }
.m-prod__w { display: flex; gap: .75em; color: var(--a-g500); font-size: 12px; line-height: 1.8; }
.m-prod__w b { flex: none; font-weight: 500; color: var(--a-g700); }

/* ================= 選ばれる理由: 3 段（番号を付けない＝順番ではない） ================= */
.m-rsn { background: var(--a-paper); }
/* ---- 受賞（#design。corp.vacan.com/technologies/#design の .dsg-* と同じ組み・同じ値。しのさん 2026-10-23） ----
   見出しは読点で折る（語の途中で折らない）。ロゴ 2 つは下端をそろえて並べ、間に 1px の縦線。注記は右下。991px 以下は縦に積み、線は上に（Technologies と同じ折れ目） */
.m-dsg__h { margin: 0; word-break: keep-all; overflow-wrap: anywhere; max-width: calc(760 * var(--u)); }
.m-dsg__band { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--u)); margin: calc(48 * var(--u)) 0 0; }
.m-dsg__awards { display: flex; align-items: flex-end; gap: calc(64 * var(--u)); margin: 0; padding: 0; list-style: none; }
.m-dsg__award { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); }
.m-dsg__award + .m-dsg__award { padding-left: calc(64 * var(--u)); border-left: 1px solid var(--a-k14); }
.m-dsg__logo { display: block; width: auto; }
.m-dsg__logo--if { height: calc(76.8 * var(--u)); min-height: 62px; }   /* 277 × 142。Technologies と同じ丈 */
.m-dsg__logo--g { height: calc(45.6 * var(--u)); min-height: 37px; }    /* 111 × 39。赤い角版より軽く見えるよう丈は約 6 割（Technologies と同じ） */
.m-dsg__cap { margin: 0; color: var(--a-g500); }
.m-dsg__src { text-align: right; flex: 0 0 auto; }
@media (max-width: 991px) {
  .m-dsg__band { flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
  .m-dsg__awards { flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); width: 100%; }
  .m-dsg__src { text-align: left; margin-top: calc(12 * var(--u)); } .m-dsg__src br { display: none; }
  .m-dsg__award + .m-dsg__award { padding: calc(28 * var(--u)) 0 0; border-left: 0; border-top: 1px solid var(--a-k14); width: 100%; }
}
.m-rsn__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-gap); margin: 0; padding: 0; list-style: none; }
.m-rsn__i { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid var(--a-k); }
.m-rsn__t { margin: 0; font: 500 max(20px, calc(22 * var(--u)))/1.5 var(--a-jp); }
.m-rsn__d { margin: 0; color: var(--a-g700); font-size: max(15px, calc(15 * var(--u))); line-height: 1.85; }

/* ================= 導入事例: 4 枚（写真が主） ================= */
.m-cases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-gap); }
.m-case { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.m-case__pic { display: block; aspect-ratio: 3 / 2; margin-bottom: calc(10 * var(--u)); border-radius: 8px; clip-path: inset(0 round 8px); overflow: hidden; background: var(--a-paper); }
.m-case__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-l) var(--e-out); }
.m-case.is-tap .m-case__pic img { transform: scale(1.03); } @media (hover: hover) { .m-case:hover .m-case__pic img { transform: scale(1.03); } }
.m-case__k { font-size: 12px; color: var(--a-g500); }
.m-case__n { color: var(--a-violet); display: inline-flex; align-items: baseline; gap: 4px; font: 500 max(17px, calc(18 * var(--u)))/1.5 var(--a-jp); }
.m-case__d { color: var(--a-g700); font-size: max(14px, calc(14 * var(--u))); line-height: 1.8; }

/* ================= 導入フロー: 3 段（順番なので番号） ================= */
.m-flow__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-gap); margin: 0; padding: 0; list-style: none; }
.m-flow__s { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid var(--a-k14); }
.m-flow__n { font: 500 max(14px, calc(14 * var(--u)))/1 var(--a-jp); color: var(--a-violet); letter-spacing: .06em; }
.m-flow__t { font: 500 max(18px, calc(20 * var(--u)))/1.5 var(--a-jp); }
.m-flow__d { margin: 0; color: var(--a-g700); font-size: max(15px, calc(15 * var(--u))); line-height: 1.85; }

/* ---- 出現（TOP と同じ 800ms・(.22,1,.36,1)・20px）: plan-mall.js が .m-rv に付ける ---- */
html:not(.no-js) .m-rv:not(.is-in) { opacity: 0; }

/* ================= 幅ごと ================= */
@media (max-width: 1279px) {
  /* 案A: 1279px 以下は写真の上に字を重ねない（16:9 の写真が低くなり、字がサイネージと検出の枠に重なった＝2026-10-08 768px で確認）。写真 → 白地の字 */
  .m-hero--a { color: var(--a-k); }
  .m-hero--a .m-hero__photo::after { background: linear-gradient(to bottom, rgb(0 0 0 / .66) 0, rgb(0 0 0 / .46) 78px, rgb(0 0 0 / 0) 160px); }   /* 字は写真の下。上端だけ、ヘッダーの字のために暗くする */
  .m-hero--a .m-hero__in { position: static; padding: 24px var(--a-gutter) 0; gap: 20px; }
  .m-hero--a .m-hero__place { position: static; color: var(--a-g500); }
  .m-hero--a .m-hero__eye { color: var(--a-violet); }
  .m-hero--a .m-hero__sub { color: var(--a-g700); }
  .m-hero--a .m-btn2 { color: var(--a-k); }
  .m-hero__h { font-size: clamp(34px, 4.4vw, 48px); }
}
@media (max-width: 1100px) {
  .m-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-rsn__l, .m-steps, .m-flow__l { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .m-hero__h { font-size: 34px; }
  .m-fn, .m-fn--r { grid-template-columns: 1fr; gap: 24px; }
  .m-fn--r .m-fn__pic { order: 0; }
  .m-fn__h { font-size: 26px; }
  .m-prods__grid, .m-cases__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .m-rv:not(.is-in) { opacity: 1; }
  html:not(.no-js) .m-brk i { opacity: 1; animation: none !important; }
}

/* フッターのメニューの開け閉めは TOP と共通（css/plan-a.css の .a-foot__tg）。ここにあった .m-fh の指定は外した（2026-10-10） */

/* ===== UI/UX QA（2026-10-09・visual-verification §4） ===== */
/* 説明文の最後の行を 2〜3 字だけにしない（text-wrap: pretty）。span の説明文も文節で折る。最後の手紙は TOP と同じ組みのまま */
.m-main :is(p, .m-prod__d, .m-prod__w, .m-case__d):not(.a-cta__p) { text-wrap: pretty; }
.m-main :is(.m-prod__d, .m-prod__w, .m-case__d) { word-break: auto-phrase; }
/* 押せる範囲: 指で操作する端末（スマホ幅・タブレット）で 44px に届かない独立した操作の当たり判定を、透明の ::before で上下 44px に広げる（見た目は変えない）。
   前はスマホ幅（767px 以下）だけで、タブレットでは小さいままだった（しのさん 2026-10-10「sp tablet のサイズでも確認しましたか？」） */
@media (max-width: 767px), (pointer: coarse) {
  .a-hd__cta, .m-btn3, .m-fn__case, .a-pcard__link, .m-more, .a-cta .a-see, .a-foot__sns a, .a-carnav button, .m-hd-logo { position: relative; }
  .a-hd__cta::before, .m-btn3::before, .m-fn__case::before, .a-pcard__link::before, .m-more::before, .a-cta .a-see::before, .a-foot__sns a::before, .a-carnav button::before, .m-hd-logo::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; translate: 0 -50%; }
}
/* タブレット（768px 以上・指）: フッターの一覧のリンクは、隣と重ならない範囲（行の間隔 36px）で上下を広げる */
@media (min-width: 768px) and (pointer: coarse) {
  .a-foot__list a { position: relative; }
  .a-foot__list a::before { content: ""; position: absolute; left: -4px; right: -4px; top: -7px; bottom: -7px; }
}