、クリック領域は絶対配置の .mxl-card__overlay で作る。
-------------------------------------------------------------------------- */
.mxl .mxl-card, .mxl .mxl-migcard { position: relative; }
.mxl .mxl-card__overlay {
position: absolute; inset: 0; z-index: 2;
/* リンクテキストは読み上げ用に残し、視覚的には隠す */
overflow: hidden; white-space: nowrap;
text-indent: -9999px; font-size: 0; line-height: 0; color: transparent;
}
.mxl .mxl-card:hover, .mxl .mxl-migcard:hover { border-color: var(--pal-blue); }
.mxl .mxl-card:hover .mxl-arrow, .mxl .mxl-migcard:hover .mxl-arrow { transform: translateX(4px); }
/* カード内のボタンはオーバーレイより前面に */
.mxl .mxl-card__foot > .mxl-btn, .mxl .mxl-migcard > .mxl-btn { position: relative; z-index: 3; }
/* 背景装飾を ![]()
で置く場合（CMSで空要素が消えるのを避けるため） */
.mxl img.mxl-card__bg, .mxl img.mxl-ghero__bg {
object-fit: cover; object-position: right top; border: none; max-width: none;
}
/* --------------------------------------------------------------------------
ヒーローはページ全幅（背景画像を画面の端まで届かせる）
中身は .mxl-ghero__grid / .mxl-hero__grid のコンテンツ幅で中央に置く
-------------------------------------------------------------------------- */
.mxl .mxl-ghero, .mxl .mxl-hero {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.mxl .mxl-ghero__bg { right: 0; }
/* 目的から探す：番号を丸数字にしたため等幅フォント指定を解除 */
.mxl .mxl-finderbox__num { font-family: inherit; font-size: 16px; line-height: 1; }
/* 目的から探す：丸数字と本文の間隔を詰める */
.mxl .mxl-finderbox li a { gap: 8px; }
/* 目的から探す：角を直角にし、うすい背景色を敷く */
.mxl .mxl-finderbox { border-radius: 0; background: var(--bg-soft); }
/* 目的から探す：見出しを大きく */
.mxl .mxl-finderbox__title { font-size: 20px; }
/* 移行ガイド誘導帯：背景を炭色に、ボタンはオレンジで対比をつける */
.mxl .mxl-band-orange { background: linear-gradient(135deg, #2e3238 0%, #21242a 100%); }
.mxl .mxl-band-orange p { color: #c9ccd2; }
.mxl .mxl-band-orange .mxl-btn--navy { background: #fff; color: #21242a; }
.mxl .mxl-band-orange .mxl-btn--navy:hover { background: #e8eaee; color: #21242a; }
/* 目的から探す：箱の下のクロスリファレンス検索ボタン */
/* 目的から探す：ボックスと検索ボタンを縦並びのカラムにまとめる */
.mxl .mxl-finderbox__col { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.mxl .mxl-finderbox__col > .mxl-finderbox { flex: none; }
.mxl .mxl-finderbox__btn { display: flex; width: 100%; }
/* ヒーローのボタン2つを左カラム内で半分ずつに */
.mxl .mxl-hero__btns > a { flex: 1 1 0; min-width: 0; }
/* outlineボタンの枠色を濃く */
.mxl .mxl-btn--outline, .mxl a.mxl-btn--outline { border-color: #9aa3b2; }
/* 用途タイル：色ポチをやめ、見出しの下に線を引く */
.mxl .mxl-app strong {
display: inline-block; padding-bottom: 8px; margin-bottom: 6px;
}
.mxl .mxl-app small { display: block; }
/* 相談エリア：ボタン下段の電話番号 */
.mxl .mxl-finder__actions { flex-direction: column; align-items: stretch; gap: 14px; }
.mxl .mxl-finder__actions > a { flex: none; }
.mxl .mxl-finder__tel {
margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 4px 10px; color: #fff;
}
.mxl .mxl-finder__tel > a {
font-family: Manrope, sans-serif; font-weight: 900; font-size: 26px;
color: #fff; text-decoration: none;
}
.mxl .mxl-finder__tel > a:hover { color: #fff; text-decoration: underline; }
.mxl .mxl-finder__tel small { flex: 1 1 100%; text-align: center; font-size: 13px; color: #b8c8e5; }
/* カード本文を濃い色に */
.mxl .mxl-card__desc { color: var(--ink); }
/* メルマガ：入力欄をやめ、購読フォームへのリンクボタンに */
.mxl .mxl-mm__btn { display: flex; width: 100%; }
/* 技術ブログ：サムネイル付きの一覧 */
.mxl .mxl-res__item--thumb { grid-template-columns: 132px 44px 1fr auto; }
.mxl .mxl-res__thumb {
width: 132px; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--bg-soft);
}
@media (max-width: 759px) {
.mxl .mxl-res__item--thumb { grid-template-columns: 92px 1fr; }
.mxl .mxl-res__thumb { width: 92px; }
.mxl .mxl-res__item--thumb .mxl-res__badge { display: none; }
}
/* 技術ブログ：サムネイルを1.5倍に */
.mxl .mxl-res__item--thumb { grid-template-columns: 198px 44px 1fr auto; }
.mxl .mxl-res__thumb { width: 198px; }
@media (max-width: 759px) {
.mxl .mxl-res__item--thumb { grid-template-columns: 138px 1fr; }
.mxl .mxl-res__thumb { width: 138px; }
}
/* 技術ブログ：サムネイルがあるためBLOGバッジは非表示 */
.mxl .mxl-res__item--thumb .mxl-res__badge { display: none; }
.mxl .mxl-res__item--thumb { grid-template-columns: 198px 1fr auto; }
@media (max-width: 759px) {
.mxl .mxl-res__item--thumb { grid-template-columns: 138px 1fr; }
}
/* ページ内リンクで飛んだとき、固定ヘッダーに隠れないよう余白を確保 */
.mxl [id] { scroll-margin-top: 260px; }
/* --------------------------------------------------------------------------
アイコン（CSSマスク方式）
CMSのエディタが