@charset "utf-8";
/* =========================================================
選ばれる10の理由 /about/ ページ固有CSS
デザイン：デザインデータ/選ばれる10の理由/選ばれる10の理由.ai
アートボード 1500.6 × 7644.3（pt=px・1:1。換算しない）
土台：assets/company.css（幅・色・見出し・本文・「楽に頼めて」・CTA余白）
※共通部品（header / sidebar / cta / footer / .cmp-closing / .cmp-photos2）は
一切上書きしていない。ここは .abt- から始まる独自クラスと、
.cmp-〇〇.abt-〇〇 の複合セレクタ（このページだけに効く）しか使わない。
★本文の幅について（全体管理チャット承認済み・2026/08/28）
デザイン実測：本文の中身は x=278.9〜1031.6（幅752.7px）。青い見出し帯10本すべて同じ。
確定値の本文カラムは 189.75〜1031.75（842px）で、右端がピタリ一致し左だけ89px違う。
→ 特商法・会社概要と同じ考え方で、中身は本文カラムの左端から置き、
デザイン実測の幅 752.7px をそのまま使う。帯の右に89px空くのが正しい。
（デザインの「帯とサイドバーの間88.4px」とほぼ同じ空きになる）
★色について
デザイン実測の青は #0054AC だが、ルール5章により実装は #0954A5（var(--blue)）。
本文はデザイン #262626 だが、ルール5章により #333333（var(--text)）。
見出し帯の黄色 #FFFF00 と、理由3のオレンジ系はデザインどおり。
========================================================= */
.abt{
--abt-col:754px; /* 本文の中身の幅（デザイン実測） */
--abt-narrow:460px; /* 右に写真が入る段落の幅（デザイン実測408pxに折り返し防止の余裕を足した値・下の注記参照） */
--abt-yellow:#FFFF00; /* 見出し帯の文字 */
--abt-orange:#FF6F00; /* 理由3のバッジ・注意書き */
--abt-red:#E01300; /* 理由3「10年保証」 */
--abt-link:#2896E2; /* 本文中のリンク */
}
/* ---------- ページタイトル帯 ----------
デザイン実測：ナビの下端 y=232.5 → 帯の下端 y=626.5 ＝ 394.0px
タイトル文字（アットエアコンが選ばれる／10の理由）と「リピート率92%」の
バッジは、白フチ・光彩つきのため帯ごと1枚の画像として切り出している。
（リファレンス7章「文字が乗っている帯は分割して切り出さない」） */
/* ★帯の画像は「高さ固定＋切り抜き」ではなく「幅なり」で置く。
高さを固定すると、画面幅を変えたとき写真だけが切り抜かれて動き、
上に載せたバッジとの位置がずれる（和田さんから指摘・2026/08/28）。
幅なりにすれば写真もバッジも同じ倍率で伸び縮みするので、どの幅でもずれない。
1500px（本番の固定幅）のとき、ちょうどデザインどおりの高さ394pxになる。 */
.cmp-hero.abt-hero{
display:block;
height:auto;
overflow:visible; /* バッジが帯の下にはみ出すため */
}
.cmp-hero.abt-hero > img{
width:100%;
height:auto;
aspect-ratio:1500.6/394;
}
/* ★「リピート率92%」のバッジ（和田さん指示 2026/08/28）
デザイン実測：x=1177.25〜1420.25 ／ y=443.75〜686.75（243×243）
帯の下端は 626.5 なので、**デザインの時点で 60px 下にはみ出している。**
→ 写真の帯と、その下の白い背景にまたがる形で、画像1枚を前面に重ねる。
位置・大きさはすべて帯に対する割合なので、どの画面幅でもずれない。 */
.abt-hero__badge{
position:absolute;
left:78.452%; /* 1177.25 ÷ 1500.6 */
top:53.617%; /* (443.75 − 232.5) ÷ 394 */
width:16.194%; /* 243.0 ÷ 1500.6 */
margin:0;
line-height:0;
z-index:2;
pointer-events:none;
}
.abt-hero__badge img{display:block;width:100%;height:auto;}
/* ---------- リード（全幅・中央ぞろえ） ----------
デザイン実測：1行目 y=698.8／行送り40.775px／20.9pt／青
帯の下端 626.5 → 1行目の行ボックス上端 688.86 ＝ 62.36px */
.abt-lead{
margin:41.86px 0 0;
text-align:center;
}
.abt-lead__p{
margin:0;
font-size:20.9px;
line-height:40.775px;
font-weight:700;
color:var(--blue);
}
/* デザイン実測：最終行の行ボックス下端 892.74 → 注記 y=896.8 ＝ 4.06px */
.abt-lead__note{
margin:20.06px 0 0;
font-size:12px;
line-height:1;
color:#555;
}
/* ---------- 2カラムの開始位置 ----------
デザイン実測：注記の下端 908.8 → 理由1の帯の上端 1018.7 ＝ 109.9px
会社概要の padding-top:123.75px はこのページには合わないので、
このページだけ 0 にして、間隔は .abt-wrap の margin-top で作る。 */
.cmp-wrap.abt-wrap{margin-top:112.9px;}
.cmp-main.abt-main{padding-top:0;}
.cmp-side.abt-side{padding-top:0;}
/* ★「楽に頼めて」までの余白（本文カラムの下に足している）
デザイン実測：理由10の写真の下端 5247.0 →「楽に頼めて」見出し 5479.4 ＝ 232.4px
確定版 .cmp-closing の margin-top は 198.75px（変更禁止）。
足りない 33.65px を、確定版に触らずに本文カラム側の padding-bottom で足している。
（特商法は差が7.3pxだったのでそのままにしたが、こちらは33.65pxあるため合わせた） */
.cmp-main.abt-main{padding-bottom:33.65px;}
/* =========================================================
理由ブロック（10本共通）
帯の上端を基準に、中身はすべて絶対配置でデザインの座標に置いている。
（段落の折り返しがズレても位置が動かないようにするため）
========================================================= */
.abt-r{
position:relative;
width:var(--abt-col);
}
/* ---------- 見出し帯 ----------
デザイン実測：x=278.9 幅752.7 高さ64.0（10本すべて同じ） */
.abt-h{
position:relative;
width:var(--abt-col);
height:64px;
margin:0;
background:var(--blue);
}
/* 白い丸（デザイン実測：帯の左から11.1px・上から7.3px・直径48px） */
.abt-h__n{
position:absolute;
left:11.1px;
top:7.3px;
width:48px;
height:48px;
border-radius:50%;
background:#fff;
color:var(--blue);
font-size:26px;
font-weight:900;
line-height:48px;
text-align:center;
letter-spacing:0;
}
/* 見出しの文字（デザイン実測：帯の左から76.1px・上から26.5px・27.74pt・黄） */
.abt-h__t{
position:absolute;
left:76.1px;
top:18px;
font-size:27.74px;
line-height:1;
font-weight:700;
color:var(--abt-yellow);
letter-spacing:.08em; /* デザイン実測のトラッキング2.22px÷27.74 */
white-space:nowrap;
}
/* 見出しの字間は帯ごとにデザイン実測値が違う（.ai の text.tsv より）
1:1.17 / 2:1.39 / 3:2.22 / 4:2.22 / 5:0.03 / 6:1.33 / 7:2.22 / 8:2.22 / 9:2.22 / 10:2.22 px
÷27.74px でemに直したもの。基本は .08em で、違うものだけ上書きする。 */
.abt-r1 .abt-h__t{letter-spacing:.042em;}
.abt-r2 .abt-h__t{letter-spacing:.05em;}
.abt-r5 .abt-h__t{letter-spacing:.001em;}
.abt-r6 .abt-h__t{letter-spacing:.048em;}
/* ---------- 本文 ---------- */
.abt-p{
position:absolute;
left:0;
margin:0;
font-size:16.45px;
line-height:27.03px; /* デザインの行送り（写真が右に入る段落） */
color:var(--text);
/* ★本文ブロック754pxに収めるための字間（上の注記を参照）。
Illustratorは約物（、。（））を半角に詰めて組むので、詰めないと1行が長くなる。 */
letter-spacing:-.05em;
}
/* ★段落の幅について（実測の結果・2026/08/28）
改行位置はデザインどおり
で固定している。
ただし Illustrator は約物（、。（）など）を半角に詰めて組んでいるため、
同じ文字サイズでも Noto Sans JP のほうが1行が 1〜4% 長くなる。
幅をデザイン実測どおりにすると、意図しない位置で折り返してしまい、
デザインと違う改行になる（実際に10段落すべてで発生した）。
→ 幅は「折り返させないための余裕をもった値」にして、改行は
だけで作る。
左端と改行位置はデザインと完全に一致する。行の右端だけ数〜30px長い。
※ font-feature-settings:"palt" も試したが、今度は2〜5%短くなって
デザインから離れたため使っていない（会社概要・特商法とも同じ扱い）。 */
.abt-p--wide{line-height:31.73px;width:754px;} /* 全幅の段落はデザインの行送りが広い */
.abt-p--w27{line-height:27.03px;width:754px;} /* 全幅だが行送りが狭い段落（理由6） */
/* ⚠️ 幅754pxは「本文ブロックは754px」の確定ルール（2026/08/28 和田さん確定）。
ただし字間を詰めないと収まらない。下の letter-spacing とセットで使うこと。
字間なし … 一番長い行が 793px → 754pxに入らず、勝手に折り返してデザインと
違う改行になる（理由2・3・5・6 の4段落で実際に起きた）
−.04em … 760.8px（デザイン実測760.8pxとぴったり同じ）だが754pxを超える
−.05em … 752.7px。754pxに収まり、青い見出し帯の幅とも一致する ← これを採用 */
.abt-p--narrow{width:var(--abt-narrow);}
/* 注記（※〜） */
.abt-note{
position:absolute;
left:0;
margin:0;
font-size:14.1px;
line-height:22.3px;
color:var(--text);
}
/* 本文中のリンク（→〜） */
.abt-link{
position:absolute;
margin:0;
font-size:16.45px;
line-height:1;
font-weight:700;
}
.abt-link a{color:var(--abt-link);text-decoration:underline;}
/* 写真。★右端が本文ブロック754pxを超える5枚だけ、超えたぶん左へ寄せてある
（理由1 −7.0px ／ 理由4 −2.1 ／ 理由5 −1.9 ／ 理由7 −0.6 ／ 理由10 −2.1）。
デザインでは最大761pxまで出ているが、754pxルールを優先した。 */
.abt-fig{position:absolute;margin:0;}
.abt-fig img{display:block;width:100%;height:100%;object-fit:cover;}
/* =========================================================
理由1 注文がカンタン
========================================================= */
.abt-r1{min-height:601.2px;} /* 1018.7 → 1619.9 */
.abt-r1 .abt-p{top:89.61px;} /* 本文 y=1117.6 */
.abt-r1 .abt-fig{left:435.3px;top:87.1px;width:318.7px;height:450.7px;} /* 注文書 y=1105.8 */
/* =========================================================
理由2 入居者様との打合せはおまかせ
========================================================= */
.abt-r2{min-height:269.8px;} /* 1619.9 → 1889.7 */
.abt-r2 .abt-p{top:86.86px;} /* 本文 y=1717.4 */
/* =========================================================
理由3 10年間無料保証
========================================================= */
.abt-r3{min-height:524.7px;} /* 1889.7 → 2414.4 */
.abt-r3 .abt-p{top:86.76px;} /* 本文 y=1987.1 */
/* 比較表（デザイン実測：x=285.5 y=2099.5 幅744.0 高さ206.3 角丸16px 枠線 #2B2320） */
.abt-cmp{
position:absolute;
left:6.6px;
top:209.8px;
width:744px;
height:206.3px;
border:1px solid #2B2320;
border-radius:16px;
box-sizing:border-box;
}
/* 縦の区切り（デザイン実測 x=657.6 ＝ 表の左から372.1px） */
.abt-cmp__v{
position:absolute;left:372.1px;top:0;width:1px;height:100%;
background:#2B2320;
}
/* 横の区切り（デザイン実測 y=2157.3 ＝ 表の上から57.8px） */
.abt-cmp__h{
position:absolute;left:0;top:57.8px;width:100%;height:1px;
background:#2B2320;
}
/* 見出し行（左右それぞれのセルの中央に置く。フォントが違うと幅が変わるため
デザインのx座標ではなく「セルの中央」でそろえる＝ルール3章） */
.abt-cmp__th{
position:absolute;top:21.1px; /* デザイン y=2126.1 */
margin:0;line-height:1;text-align:center;
}
.abt-cmp__th--l{left:0;width:372.1px;font-size:16.45px;font-weight:700;color:var(--abt-orange);}
.abt-cmp__th--r{left:373.1px;width:370.9px;font-size:16.72px;font-weight:700;color:var(--text);}
/* 左セル：オレンジのバッジ（デザイン実測 x=326 y=2182 幅299 高さ45） */
.abt-badge{
position:absolute;left:40.5px;top:82.5px;
width:299px;height:45px;
border-radius:6px;
background:var(--abt-orange);
display:flex;align-items:center;
}
/* 白いピル（デザイン実測 バッジの左から8px・幅101.6 高さ19） */
.abt-badge__pill{
margin-left:8px;
width:101.6px;height:19px;
border-radius:9.5px;
background:#fff;
color:var(--abt-orange);
font-size:9.04px;
font-weight:700;
line-height:19px;
text-align:center;
letter-spacing:.02em;
}
.abt-badge__t{
margin-left:9.8px;
color:#fff;
font-size:23.73px;
font-weight:900;
line-height:1;
letter-spacing:.06em;
}
.abt-badge__t b{font-size:31.81px;font-weight:900;}
/* 両矢印（デザイン実測 x=325.9〜623.9 y=2238.5） */
.abt-arrow{
position:absolute;left:40.4px;top:134.5px;
width:298px;height:9px;
}
.abt-arrow::before{
content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:#2B2320;
}
.abt-arrow i{
position:absolute;top:0;width:0;height:0;
border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
}
.abt-arrow i:first-child{left:0;border-right:9px solid #2B2320;}
.abt-arrow i:last-child{right:0;border-left:9px solid #2B2320;}
/* 左セルのオレンジの文（デザイン実測 y=2251.1 / 2269.9・12.71pt） */
.abt-cmp__lead{
position:absolute;left:0;top:150.6px;width:372.1px;
margin:0;text-align:center;
font-size:12.71px;line-height:18.8px;font-weight:700;
color:var(--abt-orange);
letter-spacing:.02em;
}
.abt-cmp__lead b{color:var(--abt-red);font-weight:700;}
/* 左セルの注記（デザイン実測 y=2291.3・8.23pt） */
.abt-cmp__note{
position:absolute;left:0;top:186.8px;width:372.1px;
margin:0;text-align:center;
font-size:8.23px;line-height:1;color:var(--text);
}
/* 右セルの箇条書き（デザイン実測 y=2193.0 から行送り29.3px・17.04pt） */
.abt-cmp__list{
position:absolute;left:443.4px;top:82.4px;
margin:0;padding:0;list-style:none;
font-size:17.04px;line-height:29.3px;color:var(--text);
}
.abt-cmp__list small{font-size:15.28px;}
/* 表の下のリンク（デザイン実測 x=317.7 y=2332.7） */
.abt-r3 .abt-link{left:38.8px;top:437.3px;}
/* =========================================================
理由4 修理365日受付
========================================================= */
.abt-r4{min-height:378.2px;} /* 2414.4 → 2792.6 */
.abt-r4 .abt-p{top:95.11px;} /* 本文 y=2517.8 */
.abt-r4 .abt-fig{left:434.5px;top:95.6px;width:319.5px;height:214px;}
/* =========================================================
理由5 管理ステッカーでらくらく受付
========================================================= */
.abt-r5{min-height:358px;} /* 2792.6 → 3150.6 */
.abt-r5 .abt-p{top:85.76px;} /* 本文 y=2889.0 */
.abt-r5 .abt-fig{left:541px;top:194.5px;width:213px;height:99px;}
/* =========================================================
理由6 国内メーカー品
========================================================= */
.abt-r6{min-height:587.7px;} /* 3150.6 → 3738.3 */
.abt-r6 .abt-p{top:88.01px;} /* 本文 y=3246.9 */
.abt-r6 .abt-fig--a{left:0.1px;top:230.4px;width:369px;height:277px;}
.abt-r6 .abt-fig--b{left:384.1px;top:230.4px;width:369.5px;height:277px;}
/* =========================================================
理由7 写真で現場確認
========================================================= */
.abt-r7{min-height:350.4px;} /* 3738.3 → 4088.7 */
.abt-r7 .abt-p{top:85.81px;} /* 本文 y=3833.4 */
.abt-r7 .abt-note{top:209px;} /* 注記 y=3953.4 */
.abt-r7 .abt-fig{left:436.5px;top:93.7px;width:317.5px;height:200px;}
/* =========================================================
理由8 後払いOK
========================================================= */
.abt-r8{min-height:478.8px;} /* 4088.7 → 4567.5 */
.abt-r8 .abt-p{top:91.11px;width:465px;} /* 本文 y=4188.1 */
/* ［利用収納代行会社］以下3行（デザイン実測 y=4315.0 から行送り31.15px） */
.abt-r8 .abt-list{
position:absolute;left:0;top:214.95px;margin:0;
font-size:16.45px;line-height:31.15px;color:var(--text);
}
.abt-r8 .abt-note{top:330.1px;} /* 注記 y=4426.9 */
.abt-r8 .abt-link{left:4.2px;top:395.6px;} /* リンク y=4489.9 */
.abt-r8 .abt-fig--todoite{left:440.6px;top:90.3px;width:311.1px;height:54.2px;}
.abt-r8 .abt-fig--mf{left:438px;top:161.5px;width:315.9px;height:74.8px;}
.abt-r8 .abt-fig img{object-fit:contain;}
/* =========================================================
理由9 設置履歴を永久保存
========================================================= */
.abt-r9{min-height:371.8px;} /* 4567.5 → 4939.3 */
.abt-r9 .abt-p--1{top:84.71px;} /* 本文 y=4661.5 */
/* リピーター率92％（デザイン実測 y=4800.0・22.33pt・#FF9900） */
.abt-r9 .abt-lead2{
position:absolute;left:0;top:228.5px;margin:0;
font-size:22.33px;line-height:1;font-weight:900;color:#FF9900;
letter-spacing:.04em;
}
.abt-r9 .abt-p--2{top:258.91px;} /* 本文 y=4835.7 */
.abt-r9 .abt-fig{left:434.1px;top:92px;width:319.5px;height:214px;}
/* =========================================================
理由10 見積訪問可能
========================================================= */
.abt-r10{min-height:307.7px;} /* 4939.3 → 写真の下端5247.0 */
.abt-r10 .abt-p{top:87.41px;} /* 本文 y=5035.0 */
.abt-r10 .abt-note{top:237px;} /* 注記 y=5183.4 */
.abt-r10 .abt-fig{left:434.5px;top:93.7px;width:319.5px;height:214px;}
/* =========================================================
スマホ（768px以下）
※このページはスマホ専用のデザインが無いため、会社概要・特定商取引法と
同じ考え方（縦積み・左右8%・文字14px前後）にそろえた。
PCの絶対配置は全部やめて、上から順に流す。
========================================================= */
@media (max-width:768px){
/* ---------- ファーストビューの帯（スマホ） ----------
★2026/09/04 和田さん指示：10年保証（/security/）と同じ高さに揃える。
基準は company.css の @media(max-width:768px) の .cmp-hero{height:180px}。
以前は「幅なり」にしていたが、4ページで見え方がバラついていたため基準に統一した。
画像は object-fit:cover で左右が切られる。 */
.cmp-hero.abt-hero{height:180px;}
.cmp-hero.abt-hero > img{height:180px;aspect-ratio:auto;object-fit:cover;}
.abt-lead{margin-top:32px;padding:0 8%;}
.abt-lead__p{font-size:15px;line-height:1.9;}
.abt-lead__p br{display:none;}
.abt-lead__note{margin-top:14px;font-size:11px;line-height:1.6;text-align:left;}
.cmp-wrap.abt-wrap{margin-top:40px;}
.cmp-main.abt-main{padding-bottom:0;}
.abt-r{width:auto;min-height:0;}
.abt-r + .abt-r{margin-top:44px;}
.abt-h{width:auto;height:auto;min-height:48px;padding:11px 12px 11px 60px;}
.abt-h__n{left:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;
font-size:20px;line-height:38px;}
.abt-h__t{position:static;font-size:19px;line-height:1.4;white-space:normal;
letter-spacing:.02em;display:block;}
/* 絶対配置をやめて上から流す */
.abt-p,.abt-note,.abt-link,.abt-fig,
.abt-r8 .abt-list,.abt-r9 .abt-lead2{
position:static;width:auto;left:auto;top:auto;
}
.abt-p{margin-top:20px;font-size:14px;line-height:2.05;}
/* PC用の幅（460px・800px・R8だけ465px）はスマホでは全部解除する。
残っていると画面からはみ出して横スクロールが出る（実機で発生する事故） */
.abt-p--wide,.abt-p--w27,.abt-p--narrow,
.abt-r8 .abt-p,.abt-r9 .abt-p,.abt-r10 .abt-p,
.abt-r1 .abt-p,.abt-r4 .abt-p,.abt-r7 .abt-p{width:auto;}
.abt-p br{display:none;}
.abt-note{margin-top:14px;font-size:12px;line-height:1.8;}
.abt-note br{display:none;}
.abt-link{margin-top:18px;font-size:14px;}
.abt-fig{margin-top:20px;width:auto !important;height:auto !important;}
.abt-fig img{height:auto;}
.abt-r1 .abt-fig img{aspect-ratio:318.7/450.7;}
.abt-r4 .abt-fig img,
.abt-r9 .abt-fig img,
.abt-r10 .abt-fig img{aspect-ratio:319.5/214;}
.abt-r5 .abt-fig{width:70% !important;}
.abt-r5 .abt-fig img{aspect-ratio:213/99;}
.abt-r6 .abt-fig img{aspect-ratio:369/277;}
.abt-r7 .abt-fig img{aspect-ratio:317.5/200;}
.abt-r8 .abt-fig{margin-top:18px;}
.abt-r8 .abt-fig img{height:auto;aspect-ratio:311.1/54.2;}
.abt-r8 .abt-fig--mf img{aspect-ratio:315.9/74.8;}
.abt-r8 .abt-list{margin-top:18px;font-size:14px;line-height:2.05;}
.abt-r9 .abt-lead2{margin-top:18px;font-size:18px;}
/* 比較表はスマホでは上下に積む。
HTMLの並び順は「区切り線・左見出し・右見出し・バッジ…」なので、
そのまま縦に積むと順番が入れ替わってしまう。
flexのorderで「左の列 → 区切り線 → 右の列」に並べ直す。 */
.abt-cmp{
position:static;width:auto;height:auto;margin-top:20px;
padding:14px 12px 16px;
border-radius:10px;
display:flex;flex-direction:column;
}
.abt-cmp__th--l{order:1;}
.abt-badge{order:2;}
.abt-arrow{order:3;}
.abt-cmp__lead{order:4;}
.abt-cmp__note{order:5;}
.abt-cmp__h{order:6;margin:16px 0 0;}
.abt-cmp__th--r{order:7;margin-top:16px;}
.abt-cmp__list{order:8;}
.abt-cmp__v{display:none;}
/* span のままだと幅0になって線が消えるので、スマホではブロックにする */
.abt-cmp__h{position:static;display:block;width:auto;height:1px;margin:0;}
.abt-cmp__th{position:static;width:auto !important;padding:0;font-size:15px;line-height:1.5;}
/* flexの中で margin:auto を使うと幅が中身なりに縮む。align-self で中央に置く */
.abt-badge{position:static;align-self:center;width:100%;max-width:299px;margin:14px 0 0;}
/* span を static にすると幅0になり、中の三角（絶対配置）が
セクションの左上に飛んで見当違いの場所に矢印が出る。実際に出た。
ブロック＋relative にして、中の三角がこの中に収まるようにする。 */
.abt-arrow{position:relative;left:0;top:0;display:block;align-self:center;width:100%;max-width:298px;height:9px;margin:12px 0 0;}
.abt-cmp__lead{position:static;width:auto;margin-top:10px;font-size:13px;line-height:1.6;}
.abt-cmp__note{position:static;width:auto;margin-top:8px;font-size:10px;line-height:1.5;}
.abt-cmp__list{position:static;margin-top:2px;font-size:14px;line-height:2;}
.abt-cmp__list small{font-size:13px;}
}
/* ★2026/09/03 修正：この754pxブロックがスマホ用メディアクエリの「外」に書かれていたため、
スマホにも754pxが効いて、ページ全体が横に広がる崩れが起きていた（会社概要でクライアント指摘）。
PC専用（min-width:769px）で包んで、スマホには効かないようにした。中身は1文字も変えていない。 */
@media (min-width:769px){
/* ★全ページ共通ルール（2026/08/28 和田さん確定）本文ブロックは754px。
842px（本文カラムいっぱい）にしない。サイドバーに接触して見えるため。
※トップページと、サイドバーが無いページは対象外。 */
/* 写真は絶対配置。754pxの内側に収まるよう右端を制限 */
.cmp-main .abt-r{width:754px;}
.cmp-main .abt-fig{max-width:calc(754px - var(--fig-left,0px));}
}
/* =========================================================
★2026/09/07 和田さん指示：FVのバッジ二重の解消。
バッジは hero.jpg への焼き込み(①)と別置きPNG .abt-hero__badge(②)の2つがあり、
PCと686px以上は②が①に重なって1つに見える。375〜390pxは①が切り取りの外で②だけ。
幅391〜685pxだけ、coverの切り取りで①の位置がずれて2つ見えるため、②を消す
（①が同じ場所に写っているので見た目は1つになる）。他の幅は1pxも変えない。
========================================================= */
/* ★2026/09/07 16:55の「391〜685pxで前面バッジを消す」は和田さん指示で方針転換（17時台）。
→バッジは一番前面に出す。685px以下では前面バッジ(②)を右下に大きく置き、
写真に焼き込まれたバッジ(①)が見える範囲をちょうど覆い隠す
（right:0 と width150px は、coverの切り取りで①が現れる範囲 x=画面幅/2+195px〜右端 を
全幅で覆える最小の組み合わせ）。686px以上・PCは1pxも変えない。 */
/* ★最終形（同日・3回目の訂正）：前面バッジ(②)は星形で角が透明なため、
「四角い範囲で覆う」発想では、位置のずれた焼き込みバッジ(①)が透明部分から透けて見える。
正解＝②を①とピクセル単位で同じ位置・同じ大きさに重ねる（同じ絵なので完全に一致して1つに見える）。
391〜685pxでは cover の表示画像幅が 3001×(180/788)=685.5px で一定のため、
①の左端＝画面中央+195px・幅＝685.5×16.194%=111px に固定できる。
390px以下＝①は切り取りの外に消えるため、②を右下に控えめに置く。686px以上・PC＝元の割合指定で一致済み。 */
@media (max-width:390px){
.abt-hero__badge{
left:auto;
right:6px;
top:96px;
width:110px;
}
}
@media (min-width:391px) and (max-width:685px){
.abt-hero__badge{
left:calc(50% + 195px);
top:53.8%;
width:111px;
}
}