/* wn だけの追加（見本の site.css・p-index.css・p-*.css は一字も変えない。見本に無い規則はここに集める）
   09「図に付ける注記は、但し書きの文は出さず、図の隅に短いタグ『イメージ』だけ」: 見本の .chat .tag（右 20px・上 14px・12px・灰）と同じ作りを、枠の無い図にも使う */
.syncfig{position:relative}
.syncfig .tag{position:absolute;right:0;top:0;font-size:12px;color:var(--gray);pointer-events:none}
/* 図の隅のタグは、枠の右上に置く（枠が右に広いだけの grid〔.bfig・.lfig〕でも、図の列の右上に付く）。
   枠に position:relative を足しても、中の絶対配置の子の基準は変わらない（見本の実描画で、各枠の絶対配置の子の offsetParent が枠の内側なのを測った）。 */
.repfig,.kpanel,.bfig,.lfig{position:relative}
.repfig .tag,.bfig .tag,.lfig .tag{position:absolute;right:0;top:0;font-size:12px;color:var(--gray);pointer-events:none}
.kpanel .tag{position:absolute;right:20px;top:6px;font-size:12px;color:var(--gray);pointer-events:none}
.night .tag{position:absolute;right:22px;top:8px;font-size:12px;color:#9aa0a8;pointer-events:none}
/* 会社情報・ごあいさつの署名の「CTOブログ」: 見本は文字だけ。本番は現行・v1.2 と同じ行き先（/category/cto-blog/）のリンクにするので、リンクだと分かる下線を足す（足と同じ下線） */
.sign a{text-decoration:underline;text-underline-offset:3px}
/* お問い合わせ: QR の画像（見本は枠だけ）。枠の内側いっぱいに置く（画像の余白＝規格どおり 4 モジュールの白が、枠の白に溶ける） */
.qr img{display:block;width:100%;height:100%}
/* お問い合わせ: 本番のフォームに足す物（見本に無い）。ハニーポット（人には見せない）・スパム防止の確認の置き場（見本の点線の枠と同じ位置・同じ大きさ）・送信の失敗の知らせ・完了表示の中の小さな注 */
.formbox .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formbox .ts{margin:8px 0 18px 44px;max-width:304px}.formbox .ts .cf-turnstile{min-height:65px;max-width:100%}.formbox .ts .src{margin-left:0;margin-top:8px}
.formbox .formerr{margin:0 0 22px 44px}.formbox .done .src{margin-left:0}
@media(max-width:820px){.formbox .ts,.formbox .formerr{margin-left:34px}}
/* 送信後（/contact/?sent=1）: 完了の表示の下にフォームも出す（v1.2 と同じ）。見本は完了の表示とフォームを入れ替えていたので、下の余白が無かった */
.formbox .done{margin-bottom:28px}
/* ===== Kai のスマホ確認（2026-11-04）の 8 か所。見本の CSS は触らず、ここで上書きする。
   ページ別の CSS（p-index.v1.css）は、この表のあとに読まれるので、同じ強さだと負ける → id か親の class を足して強くしてある ===== */
/* ① 円（街の図）が左に寄っていた → 中央に。② 円の下の余白: 背の高い画面で、ヒーローが「画面 1 枚ぶんの高さ」まで伸びて空白ができていた（1 列の幅では中身が上に並ぶだけ）のをやめ、下の余白も詰める */
@media(max-width:1024px){
 #hero.thero{min-height:0;padding-bottom:40px}
 .thero .orb{margin-left:auto;margin-right:auto}
}
/* ③ 吹き出し: 揺れで 12px 上がる時に、上の枠に切られていた「Google マップ」ほかを、枠の中に収める（全体を 12px 下げ、枠をその分高く。間隔は見本のまま〔top = 12px + y%〕）。④ 媒体アイコン（左に 20px・色つき） */
.whys .drift{height:164px}
.whys .drift span{top:calc(12px + (100% - 14px)*var(--y)/100);display:inline-flex;align-items:center;gap:8px;padding-left:12px}
.drift svg.bi{width:20px;height:20px;flex:none}
.drift svg.bi:not(.st){fill:currentColor}
.drift svg.bi.st{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 820px 以下: アイコンで吹き出しが広がり、見本の散らばった位置では重なって隠れるものが出る（Kai の画面の幅＝約 580px でも、Apple マップのアイコンや Google 検索の文字が隠れた）ので、データの tx・ty（3 列・4 段）の位置に並べる。端は枠の端にそろえ（0 で左・100 で右・50 で中央）、高さは 4 段ぶん（段の間は吹き出しの高さ 48px ＋ 13px 以上で、揺れの 12px が重ならない） */
@media(max-width:820px){
 .whys .drift{height:250px}
 .whys .drift span{left:calc(var(--tx)*1%);transform:translateX(calc(var(--tx)*-1%));top:calc(14px + (100% - 64px)*var(--ty)/100)}
}
/* 540px 以下（スマホ）: 幅が足りず 3 列は詰まるので、データの mx・my（2 列・6 段）の位置に並べる。端は枠の端にそろえ（0 で左・100 で右）、高さは 6 段ぶん（間隔は吹き出しの高さ 48px 以上） */
@media(max-width:540px){
 .whys .drift{height:304px}
 .whys .drift span{left:calc(var(--mx)*1%);transform:translateX(calc(var(--mx)*-1%));top:calc(14px + (100% - 64px)*var(--my)/100)}
}
/* ⑤⑥ 「約」は数字より小さく。数え上げの JS は文字を毎回書き換える（中に要素を入れても消える）ので、先頭の 1 文字だけを CSS（::first-letter）で小さくする。::first-letter は inline-block などの箱に効く */
[data-count][data-pre="約"]{display:inline-block}
[data-count][data-pre="約"]::first-letter{font-size:.5em}
.sync .cnt b{display:inline-block}
.sync .cnt:has(.of[hidden]) b::first-letter{font-size:.5em}
/* ⑦ 流れる大きな文字（約700店舗 ・ 約40媒体 …）が、最初のカードに下半分を隠されていた → 1 列になる幅では、カードを文字の下へ送り、文字は上へ寄せる */
@media(max-width:1024px){
 section#nums{padding-top:56px}
 section#nums .wrap{margin-top:16px}
}
/* ⑧ 事例の背景の大きな文字は、見出しの下に敷く（上に重なって見出しの字を切っていた）。スマホ・タブレット幅では見出しの上の帯に小さめに出し、見出しと重ねない */
#cases .ghost{z-index:-1}
@media(max-width:820px){
 #cases .ghost{top:8px;font-size:56px}
}