@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .mp-label / --thin / --light     - 英字ラベル（左に角丸ショートバー）
 * .mp-title / --sm / --nols         - セクション見出し（clamp可変サイズ）
 * .mp-text / --2 / --sm / --light   - 本文（行間2.0〜2.1）
 * .mp-head / --center / .mp-headrow - 見出しブロック（縦積み / 見出し＋右ボタンの横並び）
 * .mp-sec / --tint / --112 / --flat - セクション外枠（clamp余白・角丸ティント背景）
 * .mp-inner / --1000 / --920 / --820 / --1320 - コンテナ
 * .mp-btn / --outline / --white / --sm / --plain - 丸アイコン付きピルボタン
 * .mp-icon-btn                      - 44px丸アイコンボタン（ヘッダーInstagram）
 * .mp-deco / .mp-circle / .mp-dots / .mp-lines - 装飾（円・ドット・曲線）
 * .mp-marker                        - 蛍光マーカー（62%）
 * .mp-mv                            - TOPメインビジュアル
 * .mp-feature                       - ABOUT 4特徴タイル
 * .mp-svc-card                      - サービス抜粋カード
 * .mp-care                          - 施工中の配慮カード
 * .mp-work-card / .mp-ba / .mp-badge / .mp-chip / .mp-ph - 施工事例カード・ビフォーアフター
 * .mp-news                          - 新着情報（blog-list のサイト調整）
 * .mp-msg                           - 代表メッセージ（ネイビー角丸ボックス）
 * .mp-panel / .mp-catalog           - 対応エリア・資料DLパネル
 * .mp-step                          - フロー抜粋カード
 * .mp-insta                         - Instagramグリッド
 * .mp-cta / .mp-cta-btn             - 共通お問い合わせCTA
 * .mp-hero                          - 下層ページヒーロー（角丸ティント）
 * .mp-outline                       - 会社概要テーブル枠
 * .mp-greet / .mp-point             - 代表挨拶・ポイントカード
 * .mp-intro / .mp-plus              - サービス導入（屋根＋外壁＋玄関）
 * .mp-svc                           - サービス詳細（左右交互）
 * .mp-dl / .mp-dl-item              - 資料ダウンロードリスト
 * .mp-navcard / .mp-jump            - ページ導線カード
 * .mp-case / .mp-spec / .mp-voice / .mp-tags - 施工事例詳細
 * .mp-tl                            - 縦タイムライン（利用までの流れ）
 * .mp-report                        - 施工中のご報告ボックス
 * .mp-est / .mp-opt / .mp-result    - セルフ見積
 * .mp-form / .mp-topic / .mp-req    - お問い合わせフォーム
 * .mp-header / .mp-toggle / .mp-spnav / .mp-footer - 共通パーツのサイト調整
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 値の粒度不足：
 *   - 余白・文字サイズの clamp() 可変値（例：padding clamp(72px,9vw,120px)）。utility は固定px刻みのみ
 *   - gap 14/16/18/22/28/44px、line-height 1.45/1.5/2.1/2.15、letter-spacing 0.14/0.18em
 *   - 角丸 22/24/28/32/36/40px（rounded は 5/10/20px のみ）
 * 指定方向不足：
 *   - 角丸の非対称指定（例：40px 40px 40px 120px / 50% 50% 32px 32px）
 * 状態不足：
 *   - hover で背景色＋translateY(-2px)＋影を同時に変える組み合わせ（ネイビー→#2D5783）
 *   - チェックボックスを pill ラベル化し :checked で塗りつぶす状態
 * 構造不足：
 *   - 英字ラベル＋左ショートバーの見出し（heading 系に該当なし）
 *   - 丸アイコン付きピルボタン（btn-circle-arrow は丸が左・テキスト右で順序が逆）
 *   - ビフォー／アフター2枚組＋バッジ
 *   - 縦レール＋番号丸のタイムライン（timeline はドット型のみ）
 *   - セルフ見積（選択肢カード＋明細パネル）
 * 装飾パターン不足：
 *   - 半透明の大円を角に重ねる装飾（deco-item は rgba 0.08 固定で透過度が合わない）
 *   - SVG 曲線ライン・ドットグリッドの位置指定装飾
 *   - 斜めストライプのプレースホルダー
 *
 */

/* ==========================================================================
   Base（design：16px / letter-spacing normal / hover は色変化）
   ========================================================================== */
body { font-size: 1.6rem; line-height: normal; color: #1B3A5F; background: #fff; }
@media (max-width: 896px) { body { font-size: 1.6rem; } }
@media (max-width: 639px) { body { font-size: 1.6rem; } }
a { color: #067F7A; }
a:hover { opacity: 1; color: #1B3A5F; }
button, input, textarea, select { font-family: inherit; letter-spacing: inherit; }
main { display: block; }
#form, #estimate, #download { scroll-margin-top: 90px; }

/* SVGアイコン共通（線画） */
.mp-ico { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mp-ico__fill { fill: currentColor; stroke: none; }
.mp-ico--ig { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }

/* 装飾共通 */
.mp-deco { position: absolute; pointer-events: none; }
.mp-circle { border-radius: 50%; background: #0AB5AF; }
.mp-dots { background-image: radial-gradient(#0AB5AF 1.6px, transparent 1.8px); background-size: 18px 18px; opacity: 0.5; }
.mp-dots--light { background-image: radial-gradient(#7FE0DB 1.6px, transparent 1.8px); opacity: 0.45; }
.mp-lines { inset: 0; width: 100%; height: 100%; fill: none; stroke: #0AB5AF; stroke-width: 1.5; opacity: 0.55; }
.mp-marker { background: linear-gradient(transparent 62%, rgba(10, 181, 175, 0.35) 62%); padding: 0 2px; }
.mp-ph { background: repeating-linear-gradient(135deg, #E6F6F5 0 12px, #D9F0EF 12px 24px); }
.mp-ph--gray { background: repeating-linear-gradient(135deg, #EEF1F4 0 12px, #E4E9EE 12px 24px); }

/* ==========================================================================
   Typography parts
   ========================================================================== */
.mp-label { display: flex; align-items: center; gap: 10px; margin: 0; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.18em; color: #067F7A; }
.mp-label::before { content: ""; flex-shrink: 0; width: 28px; height: 8px; border-radius: 8px; background: #0AB5AF; }
.mp-label--thin::before { height: 6px; border-radius: 6px; }
.mp-label--light { color: #7FE0DB; }

.mp-title { margin: 0; font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.5; letter-spacing: 0.04em; color: #1B3A5F; }
.mp-title--nols { letter-spacing: normal; }
.mp-title--sm { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: normal; }

.mp-text { margin: 0; font-size: 16px; line-height: 2.1; color: #33506F; text-wrap: pretty; }
.mp-text--2 { line-height: 2; }
.mp-text--sm { font-size: 15px; line-height: 2; }
.mp-text strong { color: #1B3A5F; font-size: 18px; }

.mp-head { display: flex; flex-direction: column; gap: 14px; }
.mp-head--center { align-items: center; text-align: center; }
.mp-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* ==========================================================================
   Section / container
   ========================================================================== */
.mp-sec { padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 40px); }
.mp-sec--112 { padding-top: clamp(72px, 9vw, 112px); padding-bottom: clamp(72px, 9vw, 112px); }
.mp-sec--tint { background: #F2FAFA; border-radius: clamp(40px, 6vw, 80px); }
.mp-sec--tint-top { background: #F2FAFA; border-radius: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 80px) 0 0; }
.mp-sec--pt0 { padding-top: 0; }
.mp-sec--pb0 { padding-bottom: 0; }
.mp-sec-bottom { padding: 0 clamp(20px, 5vw, 40px) clamp(72px, 9vw, 112px); }
.mp-inner { max-width: 1200px; margin: 0 auto; }
.mp-inner--1000 { max-width: 1000px; }
.mp-inner--920 { max-width: 920px; }
.mp-inner--820 { max-width: 820px; }
.mp-inner--1320 { max-width: 1320px; }
.mp-stack { display: flex; flex-direction: column; gap: 44px; }
.mp-stack--36 { gap: 36px; }
.mp-stack--32 { gap: 32px; }
.mp-stack--48 { gap: 48px; }
.mp-stack--fluid { gap: clamp(28px, 4vw, 44px); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.mp-btn { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 28px; border: none; border-radius: 999px; background: #1B3A5F; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease; }
.mp-btn:hover { background: #2D5783; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-btn__icon { width: 38px; height: 38px; border-radius: 50%; background: #0AB5AF; display: flex; align-items: center; justify-content: center; color: #1B3A5F; flex-shrink: 0; }
.mp-btn--outline { padding: 8px 8px 8px 28px; background: #fff; border: 2px solid #1B3A5F; color: #1B3A5F; }
.mp-btn--outline .mp-btn__icon { background: #E6F6F5; }
.mp-btn--outline:hover, .mp-btn--white:hover { background: #E6F6F5; color: #1B3A5F; }
.mp-btn--white { background: #fff; color: #1B3A5F; }
.mp-btn--sm { gap: 12px; padding: 8px 8px 8px 24px; font-size: 15px; }
.mp-btn--sm .mp-btn__icon { width: 34px; height: 34px; }
.mp-btn--sm .mp-ico { width: 14px; height: 14px; stroke-width: 2.8; }
.mp-btn--plain { padding: 12px 22px; font-size: 15px; }
.mp-btn--plain.mp-btn--navy { padding: 12px 24px; gap: 10px; }
.mp-btn--insta { gap: 12px; padding: 14px 28px; }
.mp-btn--insta .mp-ico--ig { stroke-width: 2; }

.mp-icon-btn { width: 44px; height: 44px; border-radius: 50%; background: #E6F6F5; display: flex; align-items: center; justify-content: center; color: #1B3A5F; flex-shrink: 0; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-icon-btn:hover { background: #D2EFED; color: #1B3A5F; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }

/* ==========================================================================
   Header（共通 header / header-bar のサイト調整）
   ========================================================================== */
.mp-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #E1EFEE; box-shadow: none; }
.mp-header .header__inner { max-width: 1280px; height: auto; gap: 20px; padding: 12px clamp(16px, 3vw, 32px); }
.mp-header .header__logo { display: flex; align-items: center; }
.mp-header .header__logo img { height: clamp(30px, 3.4vw, 40px); width: auto; display: block; }
.mp-header .header__nav { gap: clamp(14px, 2vw, 28px); }
.mp-header .header__nav-item a { padding: 8px 0; border-bottom: 3px solid transparent; }
.mp-header .header__nav-item a::after { display: none; }
.mp-header .header__nav-ja { margin: 0; font-size: 15px; font-weight: 700; color: #1B3A5F; white-space: nowrap; transition: color .2s ease; }
.mp-header .header__nav-item a:hover .header__nav-ja { color: #067F7A; }
.mp-header .header__nav-item--current a { border-bottom-color: #0AB5AF; }
.mp-header .header__right { gap: 10px; height: auto; }
.mp-header .header__cta { flex-direction: row; gap: 10px; height: auto; padding: 12px 22px; border-radius: 999px; background: #1B3A5F; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-header .header__cta:hover { background: #2D5783; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.header__cta-ico { width: 18px; height: 18px; stroke: #7FE0DB; stroke-width: 2.2; }
/* PCナビ6項目が収まらない幅（1101〜1280px）は文字・余白を詰め、CTAアイコンを省略 */
@media (min-width: 1101px) and (max-width: 1280px) {
  .mp-header .header__inner { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .mp-header .header__nav { gap: 14px; }
  .mp-header .header__nav-ja { font-size: 14px; }
  .mp-header .header__right { gap: 8px; }
  .mp-header .header__cta { padding: 12px 18px; font-size: 14px; }
  .mp-header .header__cta-ico { display: none; }
}
@media (max-width: 1100px) {
  .mp-header .header__right { display: flex; margin-right: 54px; }
  .mp-header .header__cta { display: flex; }
}
@media (max-width: 767px) {
  .mp-header .header__cta { display: none; }
}

/* ハンバーガー（design：ネイビー丸44px） */
.mp-toggle { top: 12px; right: clamp(16px, 3vw, 32px); border-radius: 50%; background: #1B3A5F; backdrop-filter: none; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-toggle:hover { background: #2D5783; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-toggle .nav-toggle__line { width: 14px; height: 2px; border-radius: 2px; background: #fff; }
.mp-toggle .nav-toggle__line:nth-child(1) { top: 17px; }
.mp-toggle .nav-toggle__line:nth-child(2) { top: 21px; }
.mp-toggle .nav-toggle__line:nth-child(3) { top: 25px; }
.mp-toggle.is-active .nav-toggle__line:nth-child(1),
.mp-toggle.is-active .nav-toggle__line:nth-child(3) { top: 21px; }

/* SPナビ（design：ヘッダー直下の白パネル） */
.mp-spnav { top: 69px; bottom: auto; max-height: calc(100vh - 69px); display: block; padding: 12px clamp(16px, 3vw, 32px) 24px; background: #fff; border-top: 1px solid #E1EFEE; box-shadow: 0 12px 24px rgba(27, 58, 95, 0.08); }
.mp-spnav .sp-nav__list { max-width: none; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.mp-spnav .sp-nav__item, .mp-spnav .sp-nav__item:first-child { border: none; }
.mp-spnav .sp-nav__link { display: block; padding: 14px 8px; border-bottom: 1px solid #E1EFEE; color: #1B3A5F; font-size: 16px; font-weight: 700; }
.mp-spnav .sp-nav__link::after { display: none; }
.mp-spnav .sp-nav__link:hover { background: none; color: #067F7A; }
.mp-spnav .sp-nav__bottom { max-width: none; margin-top: 18px; }
.mp-spnav__cta { display: block; padding: 16px; border-radius: 999px; background: #1B3A5F; color: #fff; font-weight: 700; font-size: 16px; text-align: center; transition: background-color .2s ease; }
.mp-spnav__cta:hover { background: #2D5783; color: #fff; }
@media (min-width: 1101px) { .mp-spnav { display: none; } }

/* ==========================================================================
   TOP：メインビジュアル
   ========================================================================== */
.mp-mv { background: #fff url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28630/mv-wave.png) center bottom / 100% auto no-repeat; padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(64px, 9vw, 150px); padding-left: max(clamp(16px, 3vw, 32px), calc((100% - 1200px) / 2)); padding-right: max(clamp(16px, 3vw, 32px), calc((100% - 1200px) / 2)); }
.mp-mv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.mp-mv__body { display: flex; flex-direction: column; gap: 28px; padding: clamp(8px, 2vw, 24px) 0; container: mv-body / inline-size; }
.mp-mv__title { margin: 0; font-weight: 700; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.45; letter-spacing: 0.04em; color: #1B3A5F; text-wrap: pretty; }
.mp-mv__em { position: relative; display: inline-block; z-index: 0; }
.mp-mv__em::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0.08em; height: 0.38em; border-radius: 999px; background: #0AB5AF; opacity: 0.35; z-index: -1; }
.mp-mv__lead { margin: 0; max-width: 520px; font-size: clamp(15px, 1.3vw, 17px); line-height: 2; color: #33506F; text-wrap: pretty; }
/* ボタン2つを長い方（セルフ見積・問い合わせ）の幅に揃える：1fr×2列 ＋ fit-content で両列が最大ボタン幅になる */
.mp-mv__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: fit-content; max-width: 100%; }
.mp-mv__btns .mp-btn { justify-content: space-between; }
/* 横に2つ並ばない幅では縦積み（縦積みでも同じ幅） */
@container mv-body (max-width: 559px) { .mp-mv__btns { grid-template-columns: 1fr; } }
.mp-mv__visual { position: relative; min-width: 0; }
/* CMSスライダー：外枠 #slideshow に高さ（比率）を明示し、CMS出力の各階層を100%で追従させる
   ※ .swiper-slide に position:absolute を当てると Swiper(fade) の translate で2枚目以降が枠外に飛ぶため指定しない */
#slideshow { position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 40px 40px 40px 120px; overflow: hidden; isolation: isolate; background: #E6F6F5; }
#slideshow #cms-slider-1-1-area,
#slideshow .slider_wrapper,
#slideshow .main_slider__outer,
#slideshow .main_slider,
#slideshow .swiper-wrapper,
#slideshow .swiper-slide,
#slideshow .main_slider__inner { height: 100%; }
#slideshow img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-mv__tag { position: absolute; left: 24px; top: 24px; z-index: 2; padding: 8px 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 13px; color: #1B3A5F; }
/* SP：ラベル → 見出し → 画像 → リード → ボタン の順に並べ替え */
@media (max-width: 767px) {
  .mp-mv__grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; container: mv-body / inline-size; }
  .mp-mv__body { display: contents; container: none; }
  .mp-mv__body .mp-label { order: 1; margin-bottom: -8px; }
  .mp-mv__title { order: 2; }
  .mp-mv__visual { order: 3; }
  .mp-mv__lead { order: 4; }
  .mp-mv__btns { order: 5; }
}

/* ==========================================================================
   TOP：ABOUT
   ========================================================================== */
.mp-about { padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 40px) clamp(64px, 8vw, 104px); }
.mp-about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; }
.mp-about__body { display: flex; flex-direction: column; gap: 22px; }
.mp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mp-feature { position: relative; overflow: hidden; border-radius: 28px; background: #E6F6F5; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; min-height: 170px; }
.mp-feature__icon { position: absolute; right: clamp(8px, 1.4vw, 18px); top: clamp(10px, 1.4vw, 18px); width: clamp(76px, 8vw, 112px); height: auto; opacity: 0.4; pointer-events: none; }
.mp-feature__num { position: relative; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: #067F7A; }
.mp-feature__title { position: relative; margin: 0; font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; color: #1B3A5F; }
.mp-feature__text { position: relative; margin: 0; max-width: 78%; font-size: 14px; line-height: 1.8; color: #33506F; }
.mp-feature--main { background: #0AB5AF; }
.mp-feature--main .mp-feature__icon { opacity: 0.32; }
.mp-feature--main .mp-feature__num, .mp-feature--main .mp-feature__text { color: #1B3A5F; }

/* ==========================================================================
   TOP：SERVICE
   ========================================================================== */
.mp-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.mp-svc-card { display: flex; flex-direction: column; background: #fff; border-radius: 28px; overflow: hidden; color: #1B3A5F; box-shadow: 0 2px 0 #DDEFEE; transition: transform .2s ease, box-shadow .2s ease; }
.mp-svc-card:hover { color: #1B3A5F; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 58, 95, 0.12); }
.mp-svc-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #E6F6F5; }
.mp-svc-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mp-svc-card__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: #067F7A; }
.mp-svc-card__title { font-weight: 700; font-size: 18px; line-height: 1.45; }
/* PC：タイトルを1行に収める（最長「外装まるっとリフォーム」11文字がカード幅に収まるよう可変） */
@media (min-width: 768px) {
  .mp-svc-card__body { container-type: inline-size; }
  .mp-svc-card__title { white-space: nowrap; font-size: min(18px, calc(100cqi / 11.2)); }
}
.mp-svc-card__text { font-size: 14px; line-height: 1.8; color: #33506F; }

/* ==========================================================================
   TOP：OUR CARE
   ========================================================================== */
.mp-care-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.mp-care { background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(27, 58, 95, 0.07); }
.mp-care__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mp-care__body { padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.mp-care__head { display: flex; align-items: center; gap: 14px; }
.mp-care__icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: #0AB5AF; display: flex; align-items: center; justify-content: center; color: #fff; }
.mp-care__icon .mp-ico { width: 26px; height: 26px; stroke-width: 2.2; }
.mp-care__icon .mp-ico--check { stroke-width: 2.8; }
.mp-care__title { margin: 0; font-weight: 700; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: #1B3A5F; }
/* PC：タイトルを1行に収める（カード幅に合わせて文字サイズを可変） */
@media (min-width: 768px) { .mp-care__title { white-space: nowrap; font-size: min(18px, calc(3.6vw - 12.5px)); } }
@media (min-width: 1020px) {
  .mp-care__head { gap: 10px; }
  .mp-care__icon { width: 44px; height: 44px; }
  .mp-care__icon .mp-ico { width: 22px; height: 22px; }
  .mp-care__title { font-size: min(20px, calc(2.2vw - 9px)); }
}
.mp-em { color: #067F7A; }

/* ==========================================================================
   TOP：WORKS
   ========================================================================== */
.mp-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.mp-work-card { background: #fff; border-radius: 32px; padding: 14px; display: flex; flex-direction: column; gap: 16px; color: #1B3A5F; transition: transform .2s ease, box-shadow .2s ease; }
.mp-work-card:hover { color: #1B3A5F; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 58, 95, 0.12); }
.mp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-ba__img { position: relative; aspect-ratio: 1 / 1; border-radius: 22px 6px 6px 22px; overflow: hidden; }
.mp-ba__img + .mp-ba__img { border-radius: 6px 22px 22px 6px; }
.mp-ba__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: #1B3A5F; color: #fff; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; }
.mp-badge--after { background: #0AB5AF; color: #1B3A5F; }
.mp-work-card__body { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mp-chip { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #E6F6F5; font-size: 12px; font-weight: 700; color: #067F7A; }
.mp-work-card__title { font-weight: 700; font-size: 18px; line-height: 1.5; }
.mp-work-card__voice { font-size: 14px; line-height: 1.85; color: #33506F; }

/* ==========================================================================
   TOP：NEWS（共通 blog-list のサイト調整）
   ========================================================================== */
.mp-news { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: flex-start; }
.mp-news__head { flex: 1 1 280px; }
.mp-news__box { flex: 2.4 1 560px; min-width: 0; border-radius: 36px; background: #fff; border: 2px solid #CDEBEA; padding: clamp(12px, 2vw, 24px) clamp(20px, 3vw, 36px); }
.mp-news .blog-list { border-top: none; }
.mp-news .blog-list__item { border-bottom: 1px solid #E1EFEE; }
.mp-news .blog-list__item:last-child { border-bottom: none; }
.mp-news .blog-list__link { gap: 20px; padding: 18px 8px; color: #1B3A5F; border-radius: 16px; }
.mp-news .blog-list__link:hover { background: #F2FAFA; }
.mp-news .blog-list__link:hover .blog-list__title { color: #067F7A; }
.mp-news .blog-list__date { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: #067F7A; }
.mp-news .blog-list__title { font-size: 16px; font-weight: 700; line-height: 1.7; }

/* ==========================================================================
   TOP：MESSAGE
   ========================================================================== */
.mp-msg-sec { padding: clamp(72px, 9vw, 112px) clamp(16px, 3vw, 32px); }
.mp-msg { position: relative; overflow: hidden; max-width: 1240px; margin: 0 auto; background: #1B3A5F; border-radius: clamp(36px, 5vw, 64px); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.mp-msg__glow { right: -120px; top: -140px; width: clamp(240px, 26vw, 360px); height: clamp(240px, 26vw, 360px); border-radius: 50%; background: radial-gradient(circle at 30% 70%, #27557F, #1F4870); }
.mp-msg__script { right: clamp(16px, 3vw, 40px); top: clamp(10px, 2vw, 30px); font-family: "Mrs Saint Delafield", cursive; font-size: clamp(80px, 11vw, 150px); line-height: 1; letter-spacing: normal; color: #fff; opacity: 0.12; transform: rotate(-8deg); }
.mp-msg__dots1 { left: clamp(12px, 1.6vw, 20px); top: clamp(120px, 12vw, 170px); width: 90px; height: 150px; }
.mp-msg__dots2 { right: clamp(24px, 3vw, 40px); bottom: clamp(40px, 5vw, 70px); width: 180px; height: 120px; }
.mp-msg__photo { position: relative; max-width: 420px; width: 100%; justify-self: center; }
.mp-msg__g1, .mp-msg__g2 { border-radius: 50%; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #3BC6C0, #157A86); }
.mp-msg__g1 { left: -12%; top: 0; width: 60%; opacity: 0.85; }
.mp-msg__g2 { left: -20%; bottom: 0; width: 48%; opacity: 0.75; }
.mp-msg__arc { right: -6%; top: 22%; width: 28%; height: 62%; border: 1.5px solid #0AB5AF; border-left: none; border-radius: 0 120px 120px 0; opacity: 0.6; }
.mp-msg__spark { right: -8%; top: -2%; width: 80px; height: 80px; fill: none; stroke: #3BD3CC; stroke-width: 5; stroke-linecap: round; }
.mp-msg__img { position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 50% 50% 32px 32px; object-fit: cover; object-position: center top; display: block; background: #fff; }
.mp-msg__body { position: relative; display: flex; flex-direction: column; gap: 24px; }
.mp-msg__quote { margin: 0; font-weight: 700; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.6; letter-spacing: 0.02em; color: #fff; }
.mp-msg__quote > span { display: inline-block; }
.mp-msg__quote em { font-style: normal; color: #7FE0DB; }
.mp-msg__text { margin: 0; font-size: 16px; line-height: 2.1; color: #E3ECF4; text-wrap: pretty; }
.mp-msg__sign { font-size: 14px; color: #C9D8E6; }
.mp-msg__sign b { font-size: 18px; font-weight: 700; color: #fff; }
/* SP：本文・署名に重なる装飾を整理 */
@media (max-width: 767px) {
  .mp-msg > .mp-lines, .mp-msg__dots2 { display: none; }
  .mp-msg__script { font-size: 64px; top: 12px; right: 20px; }
  .mp-msg__dots1 { top: 40px; left: 10px; width: 54px; height: 90px; }
  .mp-msg__spark { width: 56px; height: 56px; right: -4%; }
}

/* ==========================================================================
   TOP：AREA / DOWNLOAD
   ========================================================================== */
.mp-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.mp-panel { border-radius: 36px; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.mp-panel--tint { background: #E6F6F5; }
.mp-panel--line { background: #fff; border: 2px solid #CDEBEA; }
.mp-panel__map { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; background: #fff; display: block; }
.mp-catalogs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mp-catalog { aspect-ratio: 3 / 4; border-radius: 16px; background: repeating-linear-gradient(135deg, #E6F6F5 0 10px, #D9F0EF 10px 20px); display: flex; align-items: flex-end; padding: 10px; font-size: 12px; font-weight: 700; color: #33506F; }

/* ==========================================================================
   TOP：FLOW
   ========================================================================== */
.mp-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.mp-step { background: #fff; border-radius: 24px; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 12px; }
.mp-step__num { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; color: #067F7A; }
.mp-step__icon { align-self: center; width: clamp(110px, 10vw, 140px); aspect-ratio: 1 / 1; border-radius: 50%; background: #F2FAFA; display: flex; align-items: center; justify-content: center; margin: 4px 0 6px; }
.mp-step__icon img { width: 82%; height: 82%; object-fit: contain; display: block; }
.mp-step__title { font-weight: 700; font-size: 16px; line-height: 1.55; color: #1B3A5F; }
.mp-step__text { font-size: 13px; line-height: 1.6; color: #4A6280; }
@media (max-width: 767px) { .mp-step { align-items: center; text-align: center; } }

/* ==========================================================================
   TOP：INSTAGRAM
   ========================================================================== */
.mp-insta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.mp-insta-head .mp-head { gap: 16px; }
.mp-insta__id { margin: 0; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 18px; color: #1B3A5F; }
.mp-insta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); }
.mp-insta__item { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; }
@media (max-width: 767px) { .mp-insta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   共通：お問い合わせCTA
   ========================================================================== */
.mp-cta { padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 32px) clamp(56px, 7vw, 88px); }
.mp-cta__box { max-width: 1240px; margin: 0 auto; border-radius: clamp(36px, 5vw, 64px); background: #E6F6F5; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center; position: relative; overflow: hidden; }
.mp-cta__circle1 { right: -60px; top: -90px; width: clamp(200px, 20vw, 280px); height: clamp(200px, 20vw, 280px); opacity: 0.14; }
.mp-cta__circle2 { left: -110px; bottom: -120px; width: clamp(220px, 22vw, 300px); height: clamp(220px, 22vw, 300px); opacity: 0.12; }
.mp-cta__circle3 { right: -40px; bottom: -200px; width: clamp(280px, 30vw, 420px); height: clamp(280px, 30vw, 420px); opacity: 0.1; }
.mp-cta__dots1 { left: 14px; top: clamp(60px, 7vw, 100px); width: 54px; height: 90px; }
.mp-cta__dots2 { right: 14px; top: 52%; width: 54px; height: 90px; }
@media (max-width: 1099px) { .mp-cta__dots1, .mp-cta__dots2 { display: none; } }
.mp-cta__body { display: flex; flex-direction: column; gap: 16px; position: relative; }
.mp-cta__btns { display: flex; flex-direction: column; gap: 12px; position: relative; }
.mp-cta-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 12px 12px 24px; border-radius: 999px; background: #1B3A5F; color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 10px 24px rgba(27, 58, 95, 0.22); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease; }
.mp-cta-btn:hover { background: #2D5783; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(27, 58, 95, 0.28); }
.mp-cta-btn__label { display: flex; align-items: center; gap: 18px; }
.mp-cta-btn__ico { width: 30px; height: 30px; stroke-width: 1.8; color: #fff; }
.mp-ico__keys { stroke-width: 2.4; }
.mp-cta-btn__sep { width: 1.5px; height: 30px; background: #0AB5AF; flex-shrink: 0; }
.mp-cta-btn__arrow { width: 48px; height: 48px; border-radius: 50%; background: #0AB5AF; display: flex; align-items: center; justify-content: center; color: #1B3A5F; flex-shrink: 0; }
.mp-cta-btn__arrow .mp-ico { width: 18px; height: 18px; }
.mp-cta-btn--white { background: #fff; color: #1B3A5F; box-shadow: 0 10px 24px rgba(27, 58, 95, 0.14); }
.mp-cta-btn--white:hover { background: #E6F6F5; color: #1B3A5F; box-shadow: 0 14px 28px rgba(27, 58, 95, 0.2); }
.mp-cta-btn--white .mp-cta-btn__ico { color: #067F7A; }
.mp-cta-btn--white .mp-cta-btn__sep { background: #CDEBEA; }
.mp-cta-btn--white .mp-cta-btn__arrow { background: #E6F6F5; }
/* SP：ボタン文言を1行に収める（最長「お問い合わせフォームへ」11文字、ボタン幅に合わせて可変） */
@media (max-width: 767px) {
  .mp-cta__box { padding-left: 20px; padding-right: 20px; }
  .mp-cta__btns { container-type: inline-size; }
  .mp-cta-btn { gap: 8px; padding: 10px 10px 10px 18px; font-size: min(15px, calc((100cqi - 124px) / 11.3)); white-space: nowrap; }
  .mp-cta-btn__label { gap: 10px; }
  .mp-cta-btn__ico { width: 24px; height: 24px; }
  .mp-cta-btn__sep { height: 24px; }
  .mp-cta-btn__arrow { width: 40px; height: 40px; }
}

/* ==========================================================================
   共通：フッター（footer / footer-body / footer-bottom のサイト調整）
   ========================================================================== */
.mp-footer { background: #1B3A5F; color: #fff; border-radius: clamp(36px, 5vw, 64px) clamp(36px, 5vw, 64px) 0 0; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 40px) 28px; }
.mp-footer .footer-body { padding: 0; }
.mp-footer .footer-body__inner { max-width: 1200px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px; }
.mp-footer .footer-body__left, .mp-footer .footer-body__right { width: auto; display: flex; flex-direction: column; }
.mp-footer .footer-body__left { gap: 18px; }
.mp-footer .footer-body__right { gap: 12px; }
.mp-footer .footer-body__logo { margin: 0; }
.mp-footer .footer-body__logo img { height: 44px; width: auto; display: block; }
.mp-footer .footer-body__info { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.9; color: #E3ECF4; }
.mp-footer__name { font-weight: 700; font-size: 16px; color: #fff; }
.mp-footer .footer-body__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-content: start; }
.mp-footer .footer-body__nav-item a { color: #fff; font-size: 14px; font-weight: 700; transition: color .2s ease; }
.mp-footer .footer-body__nav-item a:hover { color: #7FE0DB; }
.mp-footer__btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 999px; background: #fff; color: #1B3A5F; font-weight: 700; font-size: 16px; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-footer__btn:hover { background: #E6F6F5; color: #1B3A5F; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-footer__btn--outline { padding: 14px 24px; background: transparent; border: 2px solid #fff; color: #fff; }
.mp-footer__btn--outline:hover { background: transparent; color: #fff; }
.mp-footer__bottom { max-width: 1200px; margin: 40px auto 0; padding: 22px 0 0; border-top: 1px solid #34557D; }
.mp-footer__bottom .footer-bottom__copyright { font-family: "Cabin", "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: #C9D8E6; }
@media (max-width: 639px) { .mp-footer__bottom { padding-bottom: 0; } }
@media (max-width: 767px) { .mp-footer .footer-body__nav { display: none; } }

/* ページトップボタン */
.mp-pagetop .page-top__link { background: #1B3A5F; }
.mp-pagetop .page-top__link:hover { background: #2D5783; color: #fff; }
.mp-pagetop .page-top__link::before { content: "\f077"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 18px; line-height: 1; }
@media (max-width: 767px) { .mp-pagetop { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* ==========================================================================
   下層：ページヒーロー
   ========================================================================== */
.mp-hero-wrap { padding: clamp(16px, 2vw, 24px) clamp(16px, 3vw, 32px) 0; }
.mp-hero { max-width: 1280px; margin: 0 auto; border-radius: clamp(32px, 5vw, 56px); background: #E6F6F5; padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 64px); }
.mp-hero__circle1 { right: -40px; top: -60px; width: 260px; height: 260px; opacity: 0.18; }
.mp-hero__circle2 { right: 120px; bottom: -80px; width: 160px; height: 160px; opacity: 0.12; }
.mp-hero__content { position: relative; display: flex; flex-direction: column; gap: 14px; }
.mp-breadcrumb { padding: 0; font-size: 13px; color: #33506F; }
.mp-breadcrumb .breadcrumb__item:not(:last-child)::after { content: "／"; margin: 0 8px; color: #33506F; }
.mp-breadcrumb .breadcrumb__link { color: #067F7A; font-weight: 700; }
.mp-breadcrumb .breadcrumb__link:hover { color: #1B3A5F; text-decoration: none; }
.mp-breadcrumb .breadcrumb__current { color: #33506F; }
.mp-hero__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: clamp(36px, 6vw, 72px); line-height: 1.1; letter-spacing: 0.02em; color: #1B3A5F; }
.mp-hero__ja { margin: 0; font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); color: #1B3A5F; }

/* ==========================================================================
   会社概要
   ========================================================================== */
.mp-sec--company { padding: clamp(64px, 8vw, 104px) clamp(20px, 5vw, 40px); }
.mp-outline { border-radius: 32px; border: 2px solid #CDEBEA; overflow: hidden; }
.mp-outline .table-basic th, .mp-outline .table-basic td { border: none; border-bottom: 1px solid #DCEBEA; padding: 24px 28px; vertical-align: top; }
.mp-outline .table-basic th { width: 200px; background: #F2FAFA; font-weight: 700; font-size: 15px; line-height: 1.8; color: #1B3A5F; }
.mp-outline .table-basic td { font-size: 16px; line-height: 1.8; color: #1B3A5F; }
.mp-outline__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; }
.mp-outline__foot p { margin: 0; font-size: 15px; line-height: 1.8; color: #33506F; }
@media (max-width: 639px) {
  .mp-outline .table-basic th { width: 100%; padding: 16px 20px; border-bottom: none; }
  .mp-outline .table-basic td { padding: 16px 20px; }
}
.mp-greet { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: stretch; }
.mp-greet__photo { flex: 5 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mp-greet__img { flex: 1 1 auto; width: 100%; min-height: clamp(420px, 50vw, 560px); border-radius: 260px 260px 32px 32px; border: 8px solid #fff; object-fit: cover; object-position: center top; display: block; background: #fff; }
.mp-greet__cap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mp-greet__role { font-size: 14px; line-height: 1.8; color: #33506F; }
.mp-greet__name { font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: 0.1em; color: #1B3A5F; }
.mp-greet__body { flex: 7 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mp-greet__quote { margin: 0; font-weight: 700; font-size: clamp(16px, 2.05vw, 26px); line-height: 1.6; white-space: nowrap; color: #1B3A5F; }
.mp-greet__body .mp-text { line-height: 2.15; }
.mp-greet__sign { margin: 0; text-align: right; font-size: 15px; line-height: 1.8; color: #1B3A5F; }
.mp-greet__sign b { font-size: 20px; }
@media (max-width: 480px) { .mp-greet__quote { white-space: normal; } }
.mp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mp-point { background: #fff; border-radius: 28px; padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.mp-point__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: #067F7A; }
.mp-point__title { font-weight: 700; font-size: 19px; line-height: 1.5; color: #1B3A5F; }
.mp-point__text { font-size: 14px; line-height: 1.9; color: #33506F; }

/* ==========================================================================
   サービス内容
   ========================================================================== */
.mp-intro-sec { padding: clamp(64px, 8vw, 104px) clamp(20px, 5vw, 40px) clamp(40px, 5vw, 64px); }
.mp-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.mp-intro__body { display: flex; flex-direction: column; gap: 18px; }
.mp-plus { border-radius: 36px; background: #E6F6F5; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.mp-plus__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.mp-plus__item { padding: 14px 24px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 17px; color: #1B3A5F; }
.mp-plus__sign { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 22px; color: #067F7A; }
.mp-plus__band { text-align: center; padding: 18px; border-radius: 24px; background: #0AB5AF; font-weight: 700; font-size: 18px; color: #1B3A5F; }
@media (max-width: 767px) { .mp-plus__band { padding: 16px 12px; font-size: min(16px, calc((100vw - 112px) / 15.3)); line-height: 1.7; } }
.mp-svc-sec { padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 40px) clamp(72px, 9vw, 112px); }
.mp-svc-list { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.mp-svc { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 40px; background: #F2FAFA; }
.mp-svc:nth-child(even) { flex-direction: row-reverse; background: #fff; }
.mp-svc__img { flex: 1 1 380px; min-width: 0; width: 100%; aspect-ratio: 3 / 2; border-radius: 32px; object-fit: cover; display: block; background: #E6F6F5; }
.mp-svc__body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(0px, 1vw, 12px); }
.mp-svc__meta { display: flex; align-items: center; gap: 14px; }
.mp-svc__num { width: 52px; height: 52px; border-radius: 50%; background: #0AB5AF; display: flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 20px; color: #1B3A5F; flex-shrink: 0; }
.mp-svc__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: #067F7A; }
.mp-svc__title { margin: 0; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.45; color: #1B3A5F; }
.mp-svc__body .mp-text { line-height: 2.05; }
.mp-svc__btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.mp-dl { max-width: 1200px; margin: 0 auto; border-radius: 40px; border: 2px solid #CDEBEA; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; }
.mp-dl__body { display: flex; flex-direction: column; gap: 18px; }
.mp-dl__title { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: normal; }
.mp-dl__list { display: flex; flex-direction: column; gap: 10px; }
.mp-dl-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-radius: 20px; background: #F2FAFA; color: #1B3A5F; font-weight: 700; font-size: 15px; transition: transform .2s ease, box-shadow .2s ease; }
.mp-dl-item:hover { color: #1B3A5F; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 58, 95, 0.12); }
.mp-dl-item__name { display: flex; align-items: center; gap: 12px; }
.mp-dl-item__pdf { padding: 4px 10px; border-radius: 8px; background: #1B3A5F; color: #fff; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 11px; }
.mp-dl-item .mp-ico { width: 20px; height: 20px; stroke-width: 2.4; color: #067F7A; }
.mp-navcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.mp-navcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-radius: 32px; background: #E6F6F5; color: #1B3A5F; transition: transform .2s ease, box-shadow .2s ease; }
.mp-navcard:hover { color: #1B3A5F; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 58, 95, 0.12); }
.mp-navcard__txt { display: flex; flex-direction: column; gap: 6px; }
.mp-navcard__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: #067F7A; }
.mp-navcard__title { font-weight: 700; font-size: 20px; }
.mp-navcard__arrow { width: 48px; height: 48px; border-radius: 50%; background: #1B3A5F; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.mp-navcard__arrow .mp-ico { width: 18px; height: 18px; }

/* ==========================================================================
   お客さまの声・施工事例
   ========================================================================== */
.mp-works-sec { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 40px) clamp(72px, 9vw, 112px); }
.mp-works-lead { max-width: 760px; }
.mp-case { border-radius: 40px; background: #F2FAFA; padding: clamp(16px, 2.4vw, 28px); display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(20px, 3vw, 40px); }
.mp-case__ba { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mp-case__img { position: relative; min-height: clamp(260px, 34vw, 420px); border-radius: 28px 8px 8px 28px; overflow: hidden; background: repeating-linear-gradient(135deg, #EEF1F4 0 14px, #E4E9EE 14px 28px); }
.mp-case__img--after { border-radius: 8px 28px 28px 8px; background: repeating-linear-gradient(135deg, #E6F6F5 0 14px, #D9F0EF 14px 28px); }
.mp-case__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-case__img .mp-badge { left: 14px; top: 14px; padding: 6px 14px; font-size: 12px; }
.mp-case__body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(4px, 1.4vw, 16px); }
.mp-case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mp-case__no { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: #067F7A; }
.mp-case__meta .mp-chip { background: #fff; }
.mp-case__title { margin: 0; font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; color: #1B3A5F; }
.mp-spec { margin: 0; display: flex; flex-direction: column; background: #fff; border-radius: 22px; padding: 6px 20px; }
.mp-spec__row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #E1EFEE; }
.mp-spec__row:last-child { border-bottom: none; }
.mp-spec dt { flex: 0 0 136px; white-space: nowrap; font-size: 13px; font-weight: 700; color: #067F7A; }
.mp-spec dd { margin: 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 480px) { .mp-spec__row { flex-direction: column; gap: 2px; } .mp-spec dt { flex-basis: auto; } }
.mp-voice { position: relative; background: #fff; border: 2px solid #0AB5AF; border-radius: 24px 24px 24px 6px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.mp-voice__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #E6F6F5; display: flex; align-items: center; justify-content: center; }
.mp-voice__icon svg { width: 20px; height: 20px; fill: #067F7A; }
.mp-voice__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-voice__label { font-size: 13px; font-weight: 700; color: #067F7A; }
.mp-voice__text { margin: 0; font-size: 15px; line-height: 1.9; color: #1B3A5F; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-tags span { padding: 6px 14px; border-radius: 999px; border: 1.5px solid #CDEBEA; background: #fff; font-size: 13px; color: #33506F; }
.mp-note { margin: 0; font-size: 13px; line-height: 1.9; color: #4A6280; }

/* ==========================================================================
   利用までの流れ
   ========================================================================== */
.mp-tl { display: flex; flex-direction: column; }
.mp-tl__row { display: flex; gap: clamp(16px, 3vw, 32px); }
.mp-tl__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mp-tl__num { width: clamp(56px, 7vw, 72px); height: clamp(56px, 7vw, 72px); border-radius: 50%; background: #0AB5AF; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #1B3A5F; font-family: "Outfit", sans-serif; font-weight: 600; line-height: 1; }
.mp-tl__num small { font-size: 10px; letter-spacing: 0.1em; }
.mp-tl__num b { font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); }
.mp-tl__line { flex: 1; width: 4px; border-radius: 4px; background: #CDEBEA; margin: 8px 0; min-height: 24px; }
.mp-tl__row:last-child .mp-tl__line { background: transparent; }
.mp-tl__main { flex: 1; min-width: 0; padding-bottom: clamp(24px, 3vw, 36px); }
.mp-tl__card { background: #F2FAFA; border-radius: 32px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.mp-tl__title { margin: 0; font-weight: 700; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: #1B3A5F; }
.mp-report { margin-top: 6px; background: #fff; border-radius: 24px; border: 2px solid #0AB5AF; padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; }
.mp-report__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 16px; background: #0AB5AF; display: flex; align-items: center; justify-content: center; color: #1B3A5F; }
.mp-report__icon .mp-ico { width: 24px; height: 24px; stroke-width: 2.2; }
.mp-report__body { display: flex; flex-direction: column; gap: 6px; }
.mp-report__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: #067F7A; }
.mp-report__title { margin: 0; font-weight: 700; font-size: 16px; color: #1B3A5F; }
.mp-report__text { margin: 0; font-size: 14px; line-height: 1.9; color: #33506F; }
/* SP：アイコン横は見出しのみ、説明文はボックス全幅で表示 */
@media (max-width: 767px) {
  .mp-report { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 16px; border-radius: 20px; }
  .mp-report__icon { grid-row: 1 / 3; align-self: center; width: 40px; height: 40px; border-radius: 12px; }
  .mp-report__icon .mp-ico { width: 20px; height: 20px; }
  .mp-report__body { display: contents; }
  .mp-report__text { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; line-height: 1.85; }
}

/* ==========================================================================
   セルフ見積・問い合わせ
   ========================================================================== */
.mp-jump-sec { padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 40px) 0; }
.mp-jumps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.mp-jump { display: flex; align-items: center; gap: 18px; padding: 24px 28px; border-radius: 28px; background: #E6F6F5; color: #1B3A5F; transition: transform .2s ease, box-shadow .2s ease; }
.mp-jump:hover { color: #1B3A5F; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(27, 58, 95, 0.12); }
.mp-jump__num { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 28px; color: #067F7A; }
.mp-jump__txt { display: flex; flex-direction: column; gap: 4px; }
.mp-jump__title { font-weight: 700; font-size: 19px; }
.mp-jump__sub { font-size: 13px; color: #33506F; }
.mp-est-sec { padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 40px); }
.mp-est { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; align-items: start; }
.mp-est__inputs { display: flex; flex-direction: column; gap: 18px; }
.mp-est__panel { border-radius: 32px; background: #F2FAFA; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.mp-est__panel--12 { gap: 12px; }
.mp-est__label { margin: 0; font-weight: 700; font-size: 17px; color: #1B3A5F; }
.mp-stepper { display: flex; align-items: center; gap: 10px; }
.mp-stepper__btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #1B3A5F; background: #fff; font-size: 22px; font-weight: 700; color: #1B3A5F; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-stepper__btn:hover { background: #E6F6F5; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-num-input { width: 130px; height: 56px; border-radius: 18px; border: 2px solid #CDEBEA; background: #fff; text-align: center; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 24px; color: #1B3A5F; }
.mp-num-input--sm { width: 100px; height: 44px; border-radius: 14px; font-size: 18px; }
.mp-unit { font-weight: 700; font-size: 16px; }
.mp-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 22px; border: 2px solid #fff; background: #fff; cursor: pointer; color: #1B3A5F; transition: border-color .2s ease, opacity .2s ease; }
.mp-opt:hover { opacity: 0.85; }
.mp-opt.is-active { border-color: #0AB5AF; }
.mp-opt__radio { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #1B3A5F; display: flex; align-items: center; justify-content: center; }
.mp-opt__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.mp-opt.is-active .mp-opt__radio::after { background: #1B3A5F; }
.mp-opt__check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; border: 2px solid #1B3A5F; background: #fff; display: flex; align-items: center; justify-content: center; color: #1B3A5F; font-size: 14px; font-weight: 700; }
.mp-opt.is-active .mp-opt__check { background: #0AB5AF; }
.mp-opt.is-active .mp-opt__check::after { content: "✓"; }
.mp-opt__txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mp-opt__name { font-weight: 700; font-size: 16px; }
.mp-opt__desc { font-size: 13px; line-height: 1.6; color: #33506F; }
.mp-opt__price { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mp-opt__extra { display: none; align-items: center; gap: 10px; padding: 10px 0 0 38px; font-size: 14px; }
.mp-opt.is-active .mp-opt__extra { display: flex; }
.mp-opt--box { flex-direction: column; align-items: stretch; gap: 0; cursor: default; }
.mp-opt--box:hover { opacity: 1; }
.mp-opt__toggle { display: flex; align-items: center; gap: 14px; text-align: left; border: none; background: none; padding: 0; cursor: pointer; color: #1B3A5F; transition: opacity .2s ease; }
.mp-opt__toggle:hover { opacity: 0.85; }
.mp-result { position: sticky; top: 96px; border-radius: 36px; background: #1B3A5F; color: #fff; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.mp-result__en { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; color: #7FE0DB; }
.mp-result__rows { display: flex; flex-direction: column; }
.mp-result__row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid #34557D; }
.mp-result__line { display: flex; justify-content: space-between; gap: 12px; }
.mp-result__name { font-weight: 700; font-size: 14px; }
.mp-result__price { font-family: "Outfit", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap; }
.mp-result__desc { font-size: 12px; line-height: 1.7; color: #C9D8E6; }
.mp-result__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 6px; }
.mp-result__total-label { font-weight: 700; font-size: 16px; }
.mp-result__total-value { font-family: "Outfit", sans-serif; font-weight: 600; font-size: clamp(34px, 4vw, 44px); color: #7FE0DB; }
.mp-result__total-value small { font-size: 18px; color: #fff; margin-left: 4px; }
.mp-result__note { margin: 0; padding: 14px 16px; border-radius: 18px; background: #27496F; font-size: 13px; line-height: 1.9; color: #E3ECF4; }
.mp-result__btn { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: 999px; border: none; background: #fff; color: #1B3A5F; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.mp-result__btn:hover { background: #E6F6F5; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-form-sec { padding: clamp(64px, 8vw, 104px) clamp(20px, 5vw, 40px); }
.mp-form { background: #fff; border-radius: 36px; padding: clamp(24px, 5vw, 56px); display: flex; flex-direction: column; gap: 26px; }
.mp-form__field { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: none; min-width: 0; }
.mp-form__field--10 { gap: 10px; }
.mp-form__label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 16px; color: #1B3A5F; }
.mp-req { padding: 2px 10px; border-radius: 999px; background: #1B3A5F; color: #fff; font-size: 11px; }
.mp-form__hint { font-weight: 400; font-size: 13px; color: #4A6280; }
.mp-topics { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mp-topic span { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 2px solid #CDEBEA; background: #fff; color: #1B3A5F; font-weight: 700; font-size: 15px; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease; }
.mp-topic span:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18); }
.mp-topic input:checked + span { background: #1B3A5F; border-color: #1B3A5F; color: #fff; }
.mp-topic input:focus-visible + span { outline: 2px solid #0AB5AF; outline-offset: 2px; }
.mp-form .form-input { height: 56px; padding: 0 20px; border-radius: 18px; border: 2px solid #CDEBEA; background: #F9FDFD; font-size: 16px; color: #1B3A5F; }
.mp-form .form-input:focus { border-color: #0AB5AF; }
.mp-form textarea.form-input { height: auto; padding: 16px 20px; line-height: 1.8; resize: vertical; }
.mp-form__submit { align-self: center; padding: 12px 12px 12px 40px; font-size: 17px; }
.mp-form__submit .mp-btn__icon { width: 42px; height: 42px; }
/* フォームCMS（form-pattern-1）上書き：送信ボタンを .mp-btn（ネイビー＋ティール丸矢印）に揃えて中央配置 */
.form-pattern-1 .submit-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: fit-content !important; min-width: 260px !important; max-width: 100% !important; margin: 40px auto 0 !important; padding: 12px 12px 12px 40px !important; border: none !important; border-radius: 999px !important; background: #1B3A5F !important; color: #fff !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.5 !important; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important; }
.form-pattern-1 .submit-btn:hover { background: #2D5783 !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(27, 58, 95, 0.18) !important; }
.form-pattern-1 .submit-btn::before { display: none !important; }
.form-pattern-1 .submit-btn::after { content: "" !important; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #0AB5AF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* 必須バッジ：.mp-req と同じネイビーの丸型で、見出しの後ろに配置（row-reverse で ::before を右側へ） */
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 10px !important; }
.form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before { content: '必須' !important; color: #fff !important; background: #1B3A5F !important; padding: 2px 10px !important; margin: 0 !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.5 !important; top: 0 !important; }