@charset "utf-8";
/*
 * ======================================
 * 合同会社SDM｜サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * [layout]
 * .sdm-container            - 元データ標準コンテナ width:min(100% - 160px, 1400px)
 * .sdm-wide96               - 元データ全幅寄りコンテナ width:96%
 * .sdm-narrow               - max-width:1000px
 * .sdm-narrow-form          - max-width:900px
 * .sdm-narrow-1240          - max-width:1240px
 * .sdm-sec / --white / --light / --dark / --* - 元データのセクション上下padding実数値
 *
 * [heading / text]
 * .sdm-hd__en / .sdm-hd__ja - 元データのEN+JAセクション見出し（clamp指定）
 * .sdm-hd__ja--mb12〜mb56   - 見出し下余白の実数値バリエーション
 * .sdm-lead / --900         - 見出し下リード文
 * .sdm-lead-txt             - 下層ページのリード本文
 * .sdm-bar-mark             - 小見出し頭の縦バー装飾（6x22 / 6x24）
 *
 * [button]
 * .sdm-btn                  - 元データボタンの寸法・太さ（.btn の基底に重ねる）
 * .sdm-btn--line/blue/ghost/frame - 色バリエーション
 * .sdm-btn--sm/md/lg/side/block - サイズ・全幅バリエーション
 * .sdm-method__btn(--2line) - お問い合わせ方法カード内ボタンの寸法差分
 *
 * [header / footer]
 * .sdm-header__*            - 透過ヘッダー（絶対配置・下線ボーダー・3段ロゴ・EN/JA2段ナビ）
 * .sdm-footer__*            - 3カラムフッター（auto-fit / gap44）
 * .sdm-cta-bar__*           - 全幅固定CTAバー（PC含む常時表示）
 * .sdm-hero__* / .sdm-breadcrumb__* - 下層ページヒーロー・パンくず
 *
 * [TOP]
 * .sdm-mv__*                - MV（#slideshow + オーバーレイ + キャッチ）
 * .sdm-badges__*            - 強みバッジ帯
 * .sdm-problems__*          - 業種別5分割タイル（9:16 / gap4）
 * .sdm-strength__*          - 3つの強み（1fr/1.15fr・巨大ナンバー）
 * .sdm-tservice__*          - 事業内容3カード（ダーク背景・縦罫線）
 * .sdm-flow__*              - ご相談の流れ（.85fr/1.15fr・丸番号+三角矢印）
 * .sdm-cta-card__*          - 選べる窓口3カード
 *
 * [下層]
 * .sdm-service__*           - 取り扱いサービス（左右交互・巨大ナンバー・箇条書き）
 * .sdm-after__*             - アフターメンテナンス3カード
 * .sdm-point__*             - 3つの強み3カード（ラフ追加セクション）
 * .sdm-cat-nav__* / .sdm-cat-badge - 施工事例カテゴリ切替（リンク方式）・カテゴリラベル
 * .sdm-prd-*                - 商品一覧カード
 * .sdm-blog-* / .sdm-works-* / .sdm-side-* / .sdm-pager - 施工事例一覧・サイドバー
 * .sdm-entry__*             - 施工事例詳細
 * .sdm-philo / .sdm-msg / .sdm-lic / .sdm-outline / .sdm-access - 会社概要
 * .sdm-method__* / .sdm-form__* / .sdm-contact-* - お問い合わせ
 * .sdm-cms-form             - CMSメールフォーム（rs-sys）の意匠上書き
 * .sdm-memo                 - 制作メモ枠（公開時に削除するブロック用）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ■ 値の粒度不足
 *   - セクション上下padding：元データは 96 / 90 / 80 / 74 / 70 / 34 / 30 px。
 *     .section（120/60）と .section--half（60/30）では刻みが合わない。
 *   - コンテナ幅：元データは width:min(100% - 160px, 1400px)。
 *     .container 系は max-width + 95%フォールバックのため、
 *     1320px以下の左右余白が一致しない。
 *   - 見出しサイズ：元データは clamp(34px,4vw,52px) / clamp(17px,1.5vw,20px)。
 *     $heading_en 等の固定rem値では再現できない。
 *   - ボタン：元データは可変幅（inline-flex + auto）。.btn は max-width:300px + width:100%。
 *
 * ■ 指定方向不足
 *   - 巨大ナンバー（104px）をテキストブロック右上に重ねる配置。
 *     .card-bnr__num は画像上前提のため流用不可。
 *
 * ■ 状態不足
 *   - なし（hoverは共通の hover-* utility と個別指定で充足）
 *
 * ■ 構造不足
 *   - 透過ヘッダーで「ナビ項目の当たり判定をヘッダー高さいっぱいに広げ、
 *     現在ページに inset box-shadow で下線を出す」構造。
 *     .header__nav-item は padding:8px 18px + ::after下線アニメ固定のため差分指定が必要。
 *   - 9:16タイルを5分割し、下端テキストにグラデーションを重ねる構造（.sdm-problems）。
 *   - 丸番号 + 三角コネクターの縦フロー（.sdm-flow）。
 *     .card-flow--4col は横並び矢印のみ。
 *   - PC でも表示する全幅固定CTAバー。.sp-fixed-bar は tablet以上 display:none。
 *
 * ■ 装飾パターン不足
 *   - 小見出し頭の丸端縦バー（6x22px / radius 999px）＝ .sdm-bar-mark
 *   - 「PRODUCT PHOTO」「THUMBNAIL」等の枠線プレースホルダラベル
 *
 */

/* ==========================================================================
   0. base（元データ body に合わせる）
   ========================================================================== */
/* 固定CTAバーの高さ。JS（common.js）が実測値で上書きする。
   ここの値と下のメディアクエリはJSが動かない場合のフォールバック。 */
:root { --sdm-cta-h: 72px; }
body {
  font-weight: 500;
  /* 固定CTAバーの実高さぶんだけ空ける（余らせるとフッター下に白い帯が出る） */
  padding-bottom: var(--sdm-cta-h);
}
/* 上へ戻るボタンを固定CTAバーの上に逃がす（共通CSSの bottom:20px/30px を上書き） */
.page-top { bottom: calc(var(--sdm-cta-h) + 16px); }
p, li, dd, dt, td, th, span, a { font-weight: inherit; }
img { display: block; }

a { color: #1565C0; }
a:hover { color: #4FC3F7; opacity: 1; }

/* Font Awesome 6 互換（共通SCSSは FA5 のfamily名で疑似要素を出力している） */
.sp-nav__link::after,
.sdm-spnav__tel::before,
.footer-cta__tel::before,
.footer-cta__mail::before { font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* SPナビ：日本語を左・英語を右（矢印アイコンの手前）に入れ替える。
   共通CSSは EN が先頭（margin-right:auto で左寄せ）＋ 日本語 ＋ ::after の順。 */
.sp-nav__en {
  order: 1;
  margin-right: 0;
  margin-left: auto;   /* 日本語を左に残したまま、EN と矢印を右へ寄せる */
  padding-left: 0;
}
.sp-nav__link::after {
  order: 2;
  margin-left: 16px;   /* テキストと矢印アイコンの間隔 */
}

/* ==========================================================================
   1. layout（元データの実数値）
   ========================================================================== */
/* 元データ標準コンテナ。メディアクエリで左右余白のみ縮める（幅違いは別クラス） */
.sdm-container {
  width: min(100% - 160px, 1400px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* 元データの別幅コンテナ。.sdm-container の修飾ではなく独立クラスにして、
   レスポンシブ時に .sdm-container 側の width で打ち消されないようにする */
.sdm-wide96,
.sdm-narrow,
.sdm-narrow-form,
.sdm-narrow-1240 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.sdm-wide96 { width: 96%; }
.sdm-narrow { max-width: 1000px; }
.sdm-narrow-form { max-width: 900px; }
.sdm-narrow-1240 { max-width: 1240px; }

/* セクション上下padding（元データ実数値） */
.sdm-sec { padding: 96px 0; }
.sdm-sec--white { background: #fff; }
.sdm-sec--light { background: #F5F9FC; }
.sdm-sec--dark { background: #12293F; }

.sdm-sec--px24 { padding-left: 24px; padding-right: 24px; }
.sdm-sec--lead { padding: 40px 24px 80px; }
.sdm-sec--lineup { padding: 0 0 90px; }
.sdm-sec--lineup-b { padding: 90px 0; }
.sdm-sec--80 { padding: 80px 0; }
.sdm-sec--product { padding: 40px 24px 90px; }
.sdm-sec--blog { padding: 30px 24px 90px; }
.sdm-sec--philo { padding: 70px 24px 80px; }
.sdm-sec--message { padding: 0 0 90px; }
.sdm-sec--contact-lead { padding: 40px 0 70px; }
.sdm-sec--methods { padding: 0 24px 80px; }

/* ==========================================================================
   2. heading / text
   ========================================================================== */
.sdm-hd__en {
  display: block;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.05;
  color: #1E88E5;
  text-align: center;
}
.sdm-hd__en--left { text-align: left; }
.sdm-hd__en--light { color: #7FC7EC; }
.sdm-hd__en--white { color: #fff; }

.sdm-hd__ja {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
  color: #12293F;
  text-align: center;
}
.sdm-hd__ja--left { text-align: left; }
.sdm-hd__ja--white { color: #fff; }
.sdm-hd__ja--mb12 { margin-bottom: 12px; }
.sdm-hd__ja--mb14 { margin-bottom: 14px; }
.sdm-hd__ja--mb32 { margin-bottom: 32px; }
.sdm-hd__ja--mb34 { margin-bottom: 34px; }
.sdm-hd__ja--mb40 { margin-bottom: 40px; }
.sdm-hd__ja--mb44 { margin-bottom: 44px; }
.sdm-hd__ja--mb56 { margin-bottom: 56px; }

.sdm-lead {
  margin: 0 auto 40px;
  max-width: 980px;
  font-size: 15px;
  line-height: 1.9;
  color: #3C5B75;
  text-align: center;
}
.sdm-lead--900 { max-width: 900px; }
.sdm-lead-txt { margin: 1em 0; font-size: 17px; line-height: 2.1; color: #28455E; }

.sdm-bar-mark {
  flex: none;
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: #1E88E5;
}

/* ==========================================================================
   3. button（.btn の基底に重ねる）
   ========================================================================== */
.sdm-btn {
  max-width: none;
  width: auto;
  border: 0;
  border-radius: 3px;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.sdm-btn--line { background: #06C755; color: #fff; }
.sdm-btn--line:hover { background: #05A948; color: #fff; }
.sdm-btn--blue { background: #1E88E5; color: #fff; }
.sdm-btn--blue:hover { background: #1565C0; color: #fff; }
.sdm-btn--ghost {
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 16px 30px;
  font-size: 14px;
  letter-spacing: .1em;
}
.sdm-btn--ghost:hover { background: #fff; color: #12293F; }
.sdm-btn--frame {
  border: 1px solid #4A7899;
  background: transparent;
  color: #DCEBF5;
}
.sdm-btn--frame:hover { color: #4FC3F7; border-color: #4FC3F7; }
.sdm-btn--sm { padding: 12px 16px; font-size: 13px; letter-spacing: normal; }
.sdm-btn--side { padding: 14px; font-size: 14px; letter-spacing: normal; }
.sdm-btn--md { padding: 12px 20px; font-size: 14px; }
.sdm-btn--lg { padding: 20px 60px; font-size: 17px; letter-spacing: .1em; cursor: pointer; }
.sdm-btn--block { width: 100%; }

/* ==========================================================================
   4. header（透過・絶対配置）
   ========================================================================== */
.sdm-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 20;
}
.sdm-header__inner {
  max-width: none;
  width: 96%;
  height: auto;
  margin: 0 auto;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.sdm-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  flex: none;
}
.sdm-header__logo img { width: 52px; height: 52px; object-fit: contain; }
.sdm-header__logo-body { display: block; }
.sdm-header__logo-en {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .8);
}
.sdm-header__logo-name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  color: #fff;
}
.sdm-header__logo-sub {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .8);
}

.sdm-header__group { display: flex; align-items: center; align-self: stretch; gap: 16px; }

.sdm-header__nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 4px;
  margin: 0;
}
/* リンクを inner の上端〜ボーダーまで伸ばし、上下余白を揃える */
.sdm-header__nav .header__nav-item { display: flex; }
.sdm-header__nav .header__nav-item > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 11px;
  margin: -26px 0 -27px;
  box-sizing: content-box;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}
.sdm-header__nav .header__nav-item > a::after { display: none; }
.sdm-header__nav .header__nav-item > a:hover { color: #9FE0F7; }
.sdm-header__nav .header__nav-ja {
  display: block;
  margin-top: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  color: inherit;
}
.sdm-header__nav .header__nav-en {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  color: rgba(255, 255, 255, .72);
}
.sdm-header__nav .header__nav-item--current > a {
  color: #9FE0F7;
  box-shadow: inset 0 -1px 0 0 #9FE0F7;   /* ヘッダーの border-bottom(1px) と同じ太さ・位置 */
}
.sdm-header__nav .header__nav-item--current .header__nav-en { color: rgba(255, 255, 255, .88); }

.sdm-header__right { display: flex; align-items: center; gap: 16px; height: auto; }
.sdm-header__tel-box { text-align: right; }
.sdm-header__tel-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}
.sdm-header__tel-icon { color: #9FE0F7; flex: none; }
.sdm-header__tel {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  color: #fff;
}
.sdm-header__tel::before { content: none; display: none; }
.sdm-header__tel:hover { color: #9FE0F7; opacity: 1; }
.sdm-header__hours {
  margin: 3px 0 0;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .78);
}
.sdm-header__line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}
.sdm-header__line i { font-size: 34px; color: #06C755; line-height: 1; }
.sdm-header__line:hover { opacity: .8; }

/* SPナビ下部 */
.sdm-spnav__tel { font-size: 26px; font-weight: 600; color: #fff; }
.sdm-spnav__tel::before { color: #fff; }
.sdm-spnav__hours { margin: 6px 0 16px; font-size: 12px; color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   5. 下層ヒーロー / パンくず
   ========================================================================== */
.sdm-hero {
  position: relative;
  background: #12293F;
  padding: 230px 24px 74px;
  overflow: hidden;
}
.sdm-hero__overlay {
  background: linear-gradient(180deg, rgba(8, 38, 64, .55) 0%, rgba(8, 38, 64, .72) 100%);
}
.sdm-hero .page-hero__content { display: block; height: auto; }
.sdm-hero__en {
  display: block;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.05;
  color: #fff;
  text-align: center;
}
.sdm-hero__ja {
  margin: 10px 0 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
  color: #fff;
  text-align: center;
}

.sdm-breadcrumb { padding: 0; font-size: 12px; }
.sdm-breadcrumb__inner { padding: 20px 24px; font-size: 12px; color: #7B96AD; }
.sdm-breadcrumb__inner a { color: #1565C0; }

/* ==========================================================================
   6. TOP：MV
   ========================================================================== */
.sdm-mv {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  background: #0E3A5C;
  overflow: hidden;
}
.sdm-mv #slideshow {
  position: absolute;
  inset: 0;
  height: 760px;
}
.sdm-mv #slideshow .swiper-slide,
.sdm-mv #slideshow .main_slider__inner { width: 100%; height: 100%; }
.sdm-mv #slideshow img { width: 100%; height: 100%; object-fit: cover; }
.sdm-mv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 52, .62) 0%, rgba(6, 32, 52, .46) 55%, rgba(6, 32, 52, .66) 100%);
  pointer-events: none;
}
.sdm-mv__inner {
  position: relative;
  padding: 230px 24px 120px;
  text-align: center;
}
.sdm-mv__ttl {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(4, 26, 44, .45);
}

/* ==========================================================================
   7. TOP：強みバッジ帯
   ========================================================================== */
.sdm-badges {
  padding: 34px 0;
  background: #F5F9FC;
  border-bottom: 1px solid #E3EAF0;
}
.sdm-badges__list {
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.sdm-badges__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #DCE7EF;
  border-radius: 999px;
  padding: 14px 22px 14px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #12293F;
}
.sdm-badges__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1E88E5;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* ==========================================================================
   8. TOP：業種別タイル
   ========================================================================== */
.sdm-problems {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 48px;
}
.sdm-problems__item {
  position: relative;
  aspect-ratio: 9 / 16;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sdm-problems__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 60, 100, 0) 34%, rgba(21, 101, 192, .72) 66%, rgba(13, 74, 150, .95) 100%);
  pointer-events: none;
}
.sdm-problems__body {
  position: relative;
  padding: 24px 22px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}
.sdm-problems__en {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .92);
}
.sdm-problems__ttl {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sdm-problems__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.95;
  white-space: pre-line;
}

/* ==========================================================================
   9. TOP：3つの強み
   ========================================================================== */
.sdm-strengths { display: grid; gap: 74px; margin-top: 64px; }
.sdm-strength {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
}
.sdm-strength--reverse { direction: rtl; }
.sdm-strength__photo {
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sdm-strength__body { direction: ltr; padding-right: 20px; }
.sdm-strength--reverse .sdm-strength__body { padding-right: 0; padding-left: 20px; }
.sdm-strength__inner { position: relative; padding-top: 26px; }
.sdm-strength__no {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 104px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: .8;
  color: #EDF3F8;
}
.sdm-strength__ttl {
  position: relative;
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #12293F;
}
.sdm-strength__lead {
  position: relative;
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .03em;
  color: #1E88E5;
}
.sdm-strength__txt {
  position: relative;
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: #3C5B75;
}

/* ==========================================================================
   10. TOP：事業内容3カード（ダーク）
   ========================================================================== */
.sdm-tservices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.sdm-tservice { padding: 0 0 30px; }
.sdm-tservice--mid {
  border-left: 1px solid rgba(255, 255, 255, .18);
  border-right: 1px solid rgba(255, 255, 255, .18);
}
.sdm-tservice__icon-wrap { padding: 38px 26px 0; display: flex; justify-content: center; }
.sdm-tservice__icon {
  width: 96px;
  height: 96px;
  background: rgba(127, 199, 236, .14);
  border: 1px solid rgba(127, 199, 236, .4);
  font-size: inherit;
}
.sdm-tservice__icon i { font-size: 38px; color: #7FC7EC; }
.sdm-tservice__body { padding: 24px 26px 0; text-align: center; }
.sdm-tservice__ttl {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
}
.sdm-tservice__txt { margin: 0; font-size: 14px; line-height: 1.9; color: #B7D8EC; }
.sdm-tservices__foot { margin-top: 36px; }

/* ==========================================================================
   11. TOP：ご相談の流れ
   ========================================================================== */
.sdm-flow {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: stretch;
  margin-top: 8px;
}
.sdm-flow__photo {
  height: 100%;
  min-height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sdm-flow__steps { display: grid; gap: 0; }
.sdm-flow__step0 {
  background: #fff;
  border: 1px dashed #4FC3F7;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.sdm-flow__step0-badge {
  border: 1px solid #4FC3F7;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #1E88E5;
}
.sdm-flow__step0-txt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #12293F;
}
.sdm-flow__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 26px;
}
.sdm-flow__no-col { display: flex; flex-direction: column; align-items: center; }
.sdm-flow__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #1E88E5;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #1E88E5;
}
.sdm-flow__arrow {
  flex: none;
  width: 0;
  height: 0;
  margin: 14px 0 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 13px solid #7FC7EC;
}
.sdm-flow__body { padding: 10px 0 30px; }
.sdm-flow__ttl {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #12293F;
}
.sdm-flow__txt { margin: 0; font-size: 15px; line-height: 1.95; color: #3C5B75; }

/* ==========================================================================
   12. 共通CTA：選べる窓口3カード
   ========================================================================== */
.sdm-cta-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}
.sdm-cta-card {
  border: 1px solid #DCE7EF;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sdm-cta-card--line { border: 2px solid #06C755; }
.sdm-cta-card__head { display: flex; align-items: center; gap: 16px; }
.sdm-cta-card__icon { width: 56px; height: 56px; background: #F5F9FC; }
.sdm-cta-card__icon-line { font-size: 24px; color: #06C755; }
.sdm-cta-card__icon-blue { font-size: 24px; color: #1E88E5; }
.sdm-cta-card__head-body { display: flex; flex-direction: column; gap: 6px; }
.sdm-cta-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #8FA9BD;
}
.sdm-cta-card__label--line { font-weight: 700; letter-spacing: .1em; color: #06C755; }
.sdm-cta-card__ttl {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
  color: #12293F;
}
.sdm-cta-card__txt { margin: 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }
.sdm-cta-card__line-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.sdm-cta-card__qr { width: 104px; height: 104px; }
.sdm-cta-card__tel { font-size: 34px; font-weight: 600; line-height: 1; color: #12293F; }
.sdm-cta-card__tel:hover { color: #1E88E5; }
.sdm-cta-card__foot { margin-top: auto; }

/* ==========================================================================
   13. footer
   ========================================================================== */
.sdm-footer { background: #0D2135; padding: 70px 24px 40px; }
.sdm-footer .sdm-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  width: min(100% - 160px, 1400px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.sdm-footer__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sdm-footer__logo img { width: 56px; height: 56px; object-fit: contain; filter: none; }
.sdm-footer__logo-body { display: block; }
.sdm-footer__logo-en {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #7FC7EC;
}
.sdm-footer__logo-name {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
.sdm-footer__addr { margin: 0 0 18px; font-size: 14px; line-height: 1.95; color: #B7D8EC; }
.sdm-footer__tel-row { margin: 0 0 6px; font-size: 14px; color: #B7D8EC; }
.sdm-footer__tel { font-size: 20px; color: #fff; }
.sdm-footer__mail-row { margin: 0 0 6px; font-size: 13px; color: #B7D8EC; }
.sdm-footer__mail { color: #7FC7EC; }
.sdm-footer__note { margin: 0; font-size: 13px; color: #8FB4CC; }
.sdm-footer__ttl {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  color: #7FC7EC;
}
.sdm-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sdm-footer__nav-item a { font-size: 14px; letter-spacing: .06em; color: #DCEBF5; }
.sdm-footer__nav-item a:hover { color: #4FC3F7; }
.sdm-footer__map {
  height: 150px;
  border: 1px solid #2A5A80;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 16px;
}
.sdm-footer__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sdm-footer__bottom {
  max-width: 1240px;
  margin: 44px auto 0;
  border-top: 1px solid #23486A;
  padding: 22px 0 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: .12em;
  color: #7B9DB8;
}
.sdm-footer__copyright { font-size: 12px; letter-spacing: .12em; color: #7B9DB8; }

/* 全幅固定CTAバー（PCも表示） */
.sdm-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(13, 33, 53, .96);
  border-top: 1px solid #23486A;
  padding: 10px 16px;
}
.sdm-cta-bar__inner {
  width: min(100% - 160px, 1400px);
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.sdm-cta-bar__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
.sdm-cta-bar__tel {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.sdm-cta-bar__tel:hover { color: #9FE0F7; }

/* ==========================================================================
   14. 事業内容ページ
   ========================================================================== */
.sdm-services { display: grid; gap: 100px; }
.sdm-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}
.sdm-service--reverse { direction: rtl; }
.sdm-service__photo {
  height: 100%;
  min-height: 420px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sdm-service__body { direction: ltr; position: relative; padding-top: 26px; }
.sdm-service__no {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 104px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: .8;
  color: #EDF3F8;
}
.sdm-service__ttl {
  position: relative;
  margin: 0 0 18px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  color: #12293F;
}
.sdm-service__txt { margin: 0 0 22px; font-size: 15px; line-height: 2; color: #3C5B75; }
.sdm-service__list {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid #E3EAF0;
}
.sdm-service__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: #28455E;
}
.sdm-service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: #1E88E5;
}
.sdm-service__note { margin: 34px 0 0; font-size: 13px; color: #7B96AD; }

/* 3つの強み（ラフ指定のセクション。元データの枠線カード・巨大ナンバーのトンマナを流用） */
.sdm-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sdm-point {
  position: relative;
  border: 1px solid #DCE7EF;
  background: #fff;
  padding: 32px 28px;
}
.sdm-point__no {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: .8;
  color: #EDF3F8;
}
.sdm-point__ttl {
  position: relative;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  color: #12293F;
}
.sdm-point__txt { position: relative; margin: 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }

.sdm-after {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.sdm-after__item { padding: 4px 4px 0; }
.sdm-after__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 20px;
}
.sdm-after__ttl {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #12293F;
}
.sdm-after__txt { margin: 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }

/* ==========================================================================
   15. 商品一覧ページ
   ========================================================================== */
.sdm-prd-lead {
  max-width: 900px;
  margin: 0 0 40px;
  font-size: 16px;
  line-height: 2;
  color: #28455E;
}
.sdm-memo {
  background: #FFF8E7;
  border: 1px solid #E8D9A8;
  padding: 16px 20px;
  margin-bottom: 40px;
  font-size: 13px;
  line-height: normal;
  color: #6B5A2E;
}
.sdm-prd-groups { display: grid; gap: 44px; }
.sdm-prd-group__ttl {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}
.sdm-prd-group__ttl .sdm-bar-mark { height: 24px; }
.sdm-prd-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.sdm-prd-card { border: 1px solid #DCE7EF; background: #fff; }
.sdm-prd-card__ph {
  height: 190px;
  background: #E8F1F7;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #DCE7EF;
}
.sdm-ph-label {
  border: 1px solid #B0BEC5;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: .18em;
  color: #7B96AD;
}
.sdm-prd-card__body { padding: 22px 22px 24px; }
.sdm-prd-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #8FA9BD;
}
.sdm-prd-card__ttl {
  margin: 6px 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #12293F;
}
.sdm-prd-card__txt { margin: 0 0 16px; font-size: 13px; line-height: 1.85; color: #3C5B75; }
.sdm-prd-card__movie {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #1565C0;
}
.sdm-prd-card__movie i { font-size: 20px; color: #E1332D; }

/* ==========================================================================
   16. 施工事例（一覧・詳細）
   ========================================================================== */
.sdm-blog-wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.sdm-blog-main { flex: 1 1 560px; min-width: 0; }
.sdm-blog-side { flex: 0 1 300px; max-width: 300px; }

.sdm-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: none;
}
.sdm-cat-nav__item {
  border: 1px solid #DCE7EF;
  background: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #3C5B75;
}
.sdm-cat-nav__item:hover { border-color: #1E88E5; color: #1E88E5; }
.sdm-cat-nav__item.is-active {
  background: #1E88E5;
  border-color: #1E88E5;
  color: #fff;
}
.sdm-cat-nav__item.is-active:hover { color: #fff; }

.sdm-works-list {
  display: grid;
  gap: 1px;
  background: #DCE7EF;
  border: 1px solid #DCE7EF;
}
.sdm-works-item {
  background: #fff;
  padding: 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.sdm-works-item:hover { background: #F5F9FC; opacity: 1; }
.sdm-works-item__thumb {
  flex: none;
  width: 200px;
  height: 130px;
  /* サムネイル未設定時のフォールバック。URLは config.php の $img と同じCDN */
  background: #E8F1F7 url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28569/logo.png") no-repeat center / 72px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sdm-works-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* CMSの <%image_url%> が空のとき src="" になるので画像を隠し、背景のロゴを見せる */
.sdm-works-item__thumb img[src=""] { display: none; }
.sdm-thumb-label { font-size: 10px; letter-spacing: .16em; color: #7B96AD; }
.sdm-works-item__body { flex: 1; min-width: 220px; }
.sdm-works-item__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* CMS出力ではタグが改行で囲まれるため、inline-flex で前後の空白テキストを無効化する */
.sdm-works-item__date {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  letter-spacing: .1em;
  color: #8FA9BD;
}
.sdm-cat-badge {
  display: inline-flex;
  align-items: center;
  background: #1E88E5;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
}
.sdm-works-item__ttl {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  color: #12293F;
}
.sdm-works-item__txt { margin: 0; font-size: 14px; line-height: 1.8; color: #3C5B75; }

/* ページャ（ブログCMS <%page_link%> の出力：.pages > .page_prev / .page_next の2ボタン構成。
   ページ番号は出力されないため、静的版の連番リンクではなく前/次ボタンで組む） */
.sdm-pager { margin: 36px 0 0; }
.sdm-pager .pages {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sdm-pager .pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid #DCE7EF;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #3C5B75;
  transition: all .3s ease;
}
.sdm-pager .pages a:hover { border-color: #1E88E5; color: #1E88E5; }

.sdm-side-block { margin-bottom: 36px; }
.sdm-side-ttl {
  margin: 0 0 14px;
  border-bottom: 2px solid #1E88E5;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #12293F;
}
.sdm-side-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sdm-side-recent a { display: block; font-size: 13px; line-height: 1.7; color: #28455E; }
.sdm-side-recent a:hover { color: #1E88E5; }
.sdm-side-recent__date { display: block; font-size: 12px; letter-spacing: .1em; color: #8FA9BD; }
/* 月別アーカイブ：ブログCMSが素の <ul><li><a> を吐くため、ラッパー側から当てる */
.sdm-side-arch > span { display: block; }
.sdm-side-arch ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sdm-side-arch li { border-bottom: 1px solid #E3EAF0; }
.sdm-side-arch a { display: block; padding: 11px 2px; font-size: 14px; color: #28455E; }
.sdm-side-arch a:hover { color: #1E88E5; }
.sdm-side-cta { background: #F5F9FC; border-top: 3px solid #06C755; padding: 24px 22px; }
.sdm-side-cta__ttl {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #12293F;
}
.sdm-side-cta__txt { margin: 0 0 16px; font-size: 13px; line-height: 1.8; color: #3C5B75; }

.sdm-entry__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sdm-entry__date { font-size: 13px; letter-spacing: .1em; color: #8FA9BD; }
.sdm-entry__ttl {
  margin: 0 0 26px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.6;
  color: #12293F;
}
.sdm-entry__hero {
  height: 380px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 34px;
}
.sdm-entry__body { display: grid; gap: 26px; font-size: 16px; line-height: 2.1; color: #28455E; }
.sdm-entry__body p { margin: 0; }
/* 記事詳細はブログCMSがJSで流し込むため、値が入るまで空の箱を見せない */
.sdm-entry__date:empty,
.sdm-cat-badge:empty,
.sdm-entry__ttl:empty { display: none; }
/* CMS本文は <div style="overflow:hidden"> 1つに画像＋<br>区切りのテキストが入る */
.sdm-entry__body img { border: 1px solid #DCE7EF; }
.sdm-entry__h3 {
  margin: 0;
  border-left: 4px solid #1E88E5;
  padding-left: 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #12293F;
}
.sdm-entry__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.sdm-entry__ph {
  height: 180px;
  background: #E8F1F7;
  border: 1px solid #DCE7EF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sdm-entry__foot {
  border-top: 1px solid #E3EAF0;
  margin-top: 44px;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sdm-entry__back { font-size: 14px; font-weight: 700; color: #1565C0; }

/* ==========================================================================
   17. 会社概要ページ
   ========================================================================== */
.sdm-philo { text-align: center; }
.sdm-philo__catch {
  margin: 0 0 20px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  color: #12293F;
}
.sdm-philo__txt { margin: 0 0 44px; font-size: 16px; line-height: 2.1; color: #28455E; }
.sdm-philo__box {
  background: #F5F9FC;
  padding: 32px 34px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sdm-philo__box-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #8FA9BD;
}
.sdm-philo__box-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}
.sdm-philo__box-name .font-en { letter-spacing: .08em; }
.sdm-philo__box-txt { margin: 0; font-size: 15px; line-height: 1.95; color: #3C5B75; }

.sdm-msg { max-width: 900px; }
.sdm-msg__ja {
  margin: 8px 0 24px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
  color: #12293F;
  text-align: left;
}
.sdm-msg__txt { margin: 0 0 20px; font-size: 15px; line-height: 2.1; color: #28455E; }
.sdm-msg__sign {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}

.sdm-lic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.sdm-lic__box { background: #fff; border: 1px solid #DCE7EF; padding: 32px 30px; }
.sdm-lic__box-ttl {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}
.sdm-lic__nums { display: grid; gap: 14px; }
.sdm-lic__num {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid #E3EAF0;
  padding-bottom: 14px;
}
.sdm-lic__badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  background: #DCEFE4;
  color: #1F6B4A;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.sdm-lic__num-val { font-size: 14px; line-height: 1.8; color: #3C5B75; }
.sdm-lic__items { display: grid; gap: 24px; }
.sdm-lic__item-ttl { margin: 0 0 14px; }
.sdm-lic__item-ttl .sdm-lic__badge { font-size: 15px; }
.sdm-lic__item-txt { margin: 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }

.sdm-outline { border-top: 1px solid #DCE7EF; }
.sdm-outline__row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid #DCE7EF;
  padding: 20px 4px;
}
.sdm-outline__label {
  flex: none;
  width: 170px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}
.sdm-outline__val { flex: 1; min-width: 240px; font-size: 15px; line-height: 1.9; color: #28455E; }

.sdm-access { margin-top: 44px; }
.sdm-access__ttl {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #12293F;
}
.sdm-access__map {
  height: 340px;
  border: 1px solid #DCE7EF;
  border-radius: 0;
  overflow: hidden;
}
.sdm-access__note { margin: 16px 0 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }

/* ==========================================================================
   18. お問い合わせページ
   ========================================================================== */
.sdm-contact-notice {
  background: #E8F6EE;
  border-left: 4px solid #06C755;
  padding: 22px 26px;
  margin-bottom: 34px;
}
.sdm-contact-notice p {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #12293F;
}
.sdm-contact-lead { margin: 0; font-size: 16px; line-height: 2.1; color: #28455E; }

.sdm-methods__ttl {
  margin: 0 0 34px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
  color: #12293F;
  text-align: left;
}
.sdm-method {
  border: 1px solid #DCE7EF;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sdm-method--line { border: 2px solid #06C755; }
.sdm-method__badge {
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
  color: #fff;
}
.sdm-method__badge--line { background: #06C755; }
.sdm-method__badge--blue { background: #1E88E5; }
.sdm-method__badge--dark { background: #12293F; }
.sdm-method__ttl {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: normal;
  color: #12293F;
}
.sdm-method__txt { margin: 0; font-size: 14px; line-height: 1.9; color: #3C5B75; }
.sdm-method__row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
}
.sdm-method__tel {
  margin-top: auto;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: #12293F;
}
.sdm-method__tel:hover { color: #1E88E5; }
.sdm-method__btn { padding: 16px 20px; letter-spacing: normal; }
.sdm-method__btn--2line { line-height: 1.5; }

/* フォーム */
.sdm-form-box { background: #fff; border: 1px solid #DCE7EF; padding: 40px 36px; }
.sdm-form { display: grid; gap: 28px; }
.sdm-form__label-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.sdm-form__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #12293F;
}
.sdm-form__badge {
  background: #E8F1F7;
  color: #3C5B75;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
}
.sdm-form__badge--req { background: #D93025; color: #fff; }
.sdm-form__radios { display: flex; gap: 22px; flex-wrap: wrap; }
.sdm-form__radio { display: flex; gap: 8px; align-items: center; font-size: 15px; color: #28455E; }
.sdm-form__radio input { width: 18px; height: 18px; accent-color: #1E88E5; margin: 3px 3px 0 5px; }
.sdm-form__input,
.sdm-form__select,
.sdm-form__textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #C9D8E3;
  border-radius: 2px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: #12293F;
}
.sdm-form__input:focus,
.sdm-form__select:focus,
.sdm-form__textarea:focus { border-color: #1E88E5; }
.sdm-form__textarea { resize: vertical; }
.sdm-form__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.sdm-form__check {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #DCE7EF;
  background: #FBFDFE;
  padding: 13px 14px;
  font-size: 14px;
  color: #28455E;
}
.sdm-form__check input { width: 17px; height: 17px; accent-color: #1E88E5; margin: 3px 3px 3px 4px; }
.sdm-form__file {
  border: 1px dashed #9EC3DC;
  background: #F7FBFD;
  padding: 26px;
  text-align: center;
}
.sdm-form__file-ttl { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #28455E; }
.sdm-form__file-note { margin: 0; font-size: 12px; color: #7B96AD; }
.sdm-form__file input { margin: 14px auto 0; }
.sdm-form__submit-wrap { text-align: center; padding-top: 8px; }
.sdm-form__note { margin: 16px 0 0; font-size: 12px; color: #7B96AD; }

/* --------------------------------------------------------------------------
   CMSメールフォーム（rs-sys / .form-contents.form-pattern-1）の意匠上書き
   ベンダーCSS（cdn.rs-sys.jp/css/cms/mail-form.css）は JS が <link> を
   body 内へ後から挿入するため、同一詳細度では常にベンダー側が勝つ。
   そのため .sdm-form-box.sdm-cms-form（クラス2つ）を接頭辞にして詳細度を上げる。
   -------------------------------------------------------------------------- */
.sdm-form-box.sdm-cms-form .form-contents { padding: 0; background: transparent; }

/* dt/dd の2カラム（float・280px）を解除し、ラベル→入力の縦積みにする */
.sdm-form-box.sdm-cms-form .form-contents form { text-align: center; }
.sdm-form-box.sdm-cms-form .form-contents form dl { margin: 0; text-align: left; }
.sdm-form-box.sdm-cms-form .form-contents form dl dt {
  float: none;
  width: auto;
  padding-top: 0;
  margin: 0;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd {
  padding: 10px 0 0;
  margin: 0 0 28px;
  border-bottom: 0;
  line-height: normal;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd:last-of-type { margin-bottom: 0; }

/* ラベル＋必須／任意バッジ（.sdm-form__label-row / .sdm-form__badge 相当） */
.sdm-form-box.sdm-cms-form .form-contents form dl dt span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #12293F;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dt span::before {
  order: 2;                 /* ベンダーはバッジがラベル左。現デザインに合わせて右へ */
  padding: 3px 7px;
  margin: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  position: static;
  top: auto;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dt span.required::before {
  content: '必須';
  background: #D93025;
  color: #fff;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dt span.optional::before {
  content: '任意';          /* ベンダー側は content 未指定のため、ここで出す */
  background: #E8F1F7;
  color: #3C5B75;
}

/* テキスト入力・テキストエリア（.sdm-form__input / .sdm-form__textarea 相当） */
.sdm-form-box.sdm-cms-form .form-contents form dl dd input.textarea,
.sdm-form-box.sdm-cms-form .form-contents form dl dd textarea.textarea {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #C9D8E3;
  border-radius: 2px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  color: #12293F;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd input.textarea:focus,
.sdm-form-box.sdm-cms-form .form-contents form dl dd textarea.textarea:focus {
  border-color: #1E88E5;
  outline: none;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd textarea.textarea { resize: vertical; }

/* ラジオ（.sdm-form__radio 相当） */
.sdm-form-box.sdm-cms-form .form-contents form dl dd label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 22px 6px 0;
  font-size: 15px;
  color: #28455E;
  cursor: pointer;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd input.radio,
.sdm-form-box.sdm-cms-form .form-contents form dl dd input.checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1E88E5;
}

/* チェックボックスはカード状に並べる（.sdm-form__checks / .sdm-form__check 相当） */
.sdm-form-box.sdm-cms-form .form-contents form dl dd:has(input.checkbox) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd:has(input.checkbox) label {
  margin: 0;
  gap: 10px;
  border: 1px solid #DCE7EF;
  background: #FBFDFE;
  padding: 13px 14px;
  font-size: 14px;
}
.sdm-form-box.sdm-cms-form .form-contents form dl dd:has(input.checkbox) input.checkbox {
  width: 17px;
  height: 17px;
}

/* 送信ボタン（.sdm-btn.sdm-btn--blue.sdm-btn--lg 相当） */
.sdm-form-box.sdm-cms-form .form-contents form .submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 300px;
  margin: 36px 0 0;
  padding: 20px 60px;
  background: #1E88E5;
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: normal;
  cursor: pointer;
  transition: all .3s ease;
}
.sdm-form-box.sdm-cms-form .form-contents form .submit-btn:hover { background: #1565C0; }
.sdm-form-box.sdm-cms-form .form-contents form .submit-btn:disabled { background: #9EC3DC; cursor: default; }
.sdm-form-box.sdm-cms-form .form-contents form .submit-btn::before { background-color: #fff; margin-right: 12px; }

/* エラーメッセージ */
.sdm-form-box.sdm-cms-form .form-contents .form-err-msg {
  background: #FDECEA;
  border: 1px solid #D93025;
  border-radius: 2px;
  color: #B3261E;
  padding: 16px 18px;
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.8;
}

/* 送信完了メッセージ */
.sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg {
  background: #F5F9FC;
  border: 1px solid #DCE7EF;
  padding: 40px 24px;
}
.sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg .thanks-msg-area {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: #28455E;
}
.sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg .back-home-btn {
  width: auto;
  margin: 28px 0 0;
  text-align: center;
}
.sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg .back-home-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 22px;
  background: #1E88E5;
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg .back-home-btn a:hover { background: #1565C0; }

/* 送信先メモ（フォーム下） */
.sdm-form-box.sdm-cms-form > .sdm-form__note { text-align: center; }

/* ==========================================================================
   19. スクロールフェードイン（ラフ指定：インタラクション 低〜中）
   ========================================================================== */
[data-fade] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
[data-fade].is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   20. レスポンシブ（元データはPC固定のため、SP側は共通CSSの分岐に準拠）
   ========================================================================== */
@media (max-width: 1320px) {
  .sdm-container,
  /* ベースが .sdm-footer .sdm-footer__inner（クラス2つ）のため、ここも同じ詳細度で指定する */
  .sdm-footer .sdm-footer__inner,
  .sdm-footer__bottom,
  .sdm-cta-bar__inner { width: min(100% - 80px, 1400px); }
  .sdm-strength { gap: 48px; }
  .sdm-flow { gap: 48px; }
  .sdm-lic { gap: 32px; }
}

@media (max-width: 1100px) {
  /* SP: 左右余白の二重取りを避け、狭幅コンテナ側に24pxを持たせる */
  .sdm-sec--lead,
  .sdm-sec--philo,
  .sdm-sec--product,
  .sdm-sec--blog,
  .sdm-sec--methods,
  .sdm-footer { padding-left: 0; padding-right: 0; }
  .sdm-narrow,
  .sdm-narrow-form,
  .sdm-narrow-1240,
  .sdm-badges__list { padding-left: 24px; padding-right: 24px; }
  .sdm-header__inner { padding: 16px 0; }
  /* 共通CSSの @media は site.css の非メディア宣言に負けるため、ここで明示的に隠す */
  .sdm-header__group { display: none; }
  .sdm-header__logo img { width: 44px; height: 44px; }
  .sdm-header__logo-name { font-size: 17px; }
  .sdm-problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sdm-services { gap: 64px; }
}

@media (max-width: 896px) {
  .sdm-container,
  /* ベースが .sdm-footer .sdm-footer__inner（クラス2つ）のため、ここも同じ詳細度で指定する */
  .sdm-footer .sdm-footer__inner,
  .sdm-footer__bottom,
  .sdm-cta-bar__inner { width: min(100% - 48px, 1400px); }
  :root { --sdm-cta-h: 110px; }  /* ラベル＋ボタンで2段になる。JSが実測値で上書きする */

  .sdm-sec { padding: 56px 0; }
  .sdm-sec--lead { padding: 32px 24px 48px; }
  .sdm-sec--lineup { padding: 0 0 56px; }
  .sdm-sec--80 { padding: 56px 0; }
  .sdm-sec--product { padding: 32px 24px 56px; }
  .sdm-sec--blog { padding: 24px 24px 56px; }
  .sdm-sec--philo { padding: 48px 24px 48px; }
  .sdm-sec--message { padding: 0 0 56px; }
  .sdm-sec--contact-lead { padding: 32px 0 40px; }
  .sdm-sec--methods { padding: 0 24px 48px; }

  .sdm-hero { padding: 130px 24px 48px; }
  .sdm-mv { min-height: 560px; }
  .sdm-mv #slideshow { height: 560px; }
  .sdm-mv__inner { padding: 150px 24px 72px; }

  .sdm-problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdm-problems__item { aspect-ratio: 3 / 4; min-height: 0; }

  .sdm-strengths { gap: 48px; margin-top: 40px; }
  .sdm-strength { grid-template-columns: 1fr; gap: 24px; direction: ltr; }
  .sdm-strength--reverse { direction: ltr; }
  .sdm-strength__body,
  .sdm-strength--reverse .sdm-strength__body { padding: 0; }
  .sdm-strength__no { font-size: 72px; }

  .sdm-tservices { grid-template-columns: 1fr; }
  .sdm-tservice--mid {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .sdm-flow { grid-template-columns: 1fr; gap: 32px; }
  .sdm-flow__photo { min-height: 260px; height: 260px; }

  .sdm-service { grid-template-columns: 1fr; gap: 24px; direction: ltr; }
  .sdm-service--reverse { direction: ltr; }
  .sdm-service__photo { min-height: 280px; }
  .sdm-service__no { font-size: 72px; }
  .sdm-services { gap: 56px; }

  .sdm-lic { grid-template-columns: 1fr; gap: 32px; }
  .sdm-outline__label { width: 120px; }

  .sdm-blog-wrap { gap: 32px; }
  .sdm-blog-side { flex: 1 1 100%; max-width: none; }

  .sdm-footer { padding: 56px 0 32px; }
  .sdm-form-box { padding: 28px 20px; }
}

@media (max-width: 639px) {
  .sdm-narrow,
  .sdm-narrow-form,
  .sdm-narrow-1240,
  .sdm-badges__list { padding-left: 16px; padding-right: 16px; }
  /* 元データはPC固定のため、SPの文字サイズ下限はここで補う */
  .sdm-hd__en,
  .sdm-hero__en { font-size: 28px; }
  .sdm-mv__ttl { font-size: 22px; }
  .sdm-container,
  /* ベースが .sdm-footer .sdm-footer__inner（クラス2つ）のため、ここも同じ詳細度で指定する */
  .sdm-footer .sdm-footer__inner,
  .sdm-footer__bottom,
  .sdm-cta-bar__inner { width: min(100% - 32px, 1400px); }

  .sdm-badges__item { font-size: 13px; padding: 12px 16px 12px 12px; }
  .sdm-problems { grid-template-columns: 1fr; }
  .sdm-problems__item { aspect-ratio: 16 / 10; min-height: 0; }

  .sdm-mv { min-height: 480px; }
  .sdm-mv #slideshow { height: 480px; }
  .sdm-mv__inner { padding: 120px 16px 56px; }
  .sdm-hero { padding: 110px 16px 40px; }

  .sdm-flow__item { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .sdm-flow__no { width: 48px; height: 48px; font-size: 18px; }

  .sdm-cta-card,
  .sdm-method { padding: 24px 20px; }
  .sdm-cta-card__tel,
  .sdm-method__tel { font-size: 28px; }

  .sdm-works-item { padding: 16px; gap: 16px; }
  .sdm-works-item__thumb { width: 100%; height: 180px; }
  .sdm-entry__hero { height: 220px; }
  .sdm-entry__body { font-size: 15px; }

  .sdm-outline__row { padding: 16px 0; gap: 4px; }
  .sdm-outline__label { width: 100%; }
  .sdm-outline__val { min-width: 0; }

  /* SPではフッターのサイトマップを省く（ハンバーガーメニューと重複するため） */
  .sdm-footer__sitemap { display: none; }
  :root { --sdm-cta-h: 120px; }  /* SPはボタンが2段になる */
  .sdm-cta-bar { padding: 8px 12px; }
  .sdm-cta-bar__label { display: none; }
  .sdm-cta-bar__tel { font-size: 20px; }
  .sdm-footer__bottom { text-align: center; }

  /* CMSメールフォーム（SP） */
  .sdm-form-box.sdm-cms-form .form-contents form dl dd { margin-bottom: 22px; }
  .sdm-form-box.sdm-cms-form .form-contents form .submit-btn {
    width: 100%;
    min-width: 0;
    margin-top: 28px;
    padding: 18px 20px;
    font-size: 15px;
    letter-spacing: .06em;
  }
  .sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg { padding: 28px 18px; }
  .sdm-form-box.sdm-cms-form .form-contents .form-thanks-msg .back-home-btn a { min-width: 0; width: 100%; }
}