@charset "utf-8";
/*
 * ======================================
 * 砂川鈑金 サイト固有CSS（追加クラス一覧）
 * ======================================
 *
 * ▼ 土台・共通
 * .sng-sec / --md / --sm / --pb0 / --dark2 - セクション上下padding（clamp可変）・濃灰背景
 * .sng-eyebrow / --mb26 / --white          - セクション頭の英字ラベル（Oswald 12px 赤）
 * .sng-ttl / --sm / --md / --lg            - セクション見出し（clamp可変・白・700）
 * .sng-lead / --lg                         - 本文リード（15px / lh2.15 / 白78%）
 * .sng-btn / --red / --ghost / --outline / --frame / --wide / __arrow
 * .sng-link / --thin / __arrow             - 赤下線＋矢印のテキストリンク
 *
 * ▼ ヘッダー・ナビ
 * .sng-header / __inner / __right / __tel / __tel-label / __tel-num / __icon / __cta
 * .sng-logo / __ja / __en                  - 2段テキストロゴ
 * .sng-nav / __item / --current / __en / __ja - 縦罫線区切りナビ（カレントは英字を赤に）
 * .sng-burger                              - ハンバーガー（ヘッダーバー内に見える位置）
 * .sng-spnav / __list / __item / __link / __en / __ja / __bottom / __tel
 * .sng-follow / __btn / --red              - 追従バナー（PC右端縦／860px以下は下部横並び）
 *
 * ▼ 共通CTA・フッター
 * .sng-cta / __bg / __scrim / __inner / __label / __title / __text
 * .sng-cta__btns / __tel / __tel-label / __tel-num
 * .sng-footer / __inner / __logo / __info / __btns / __nav / __map / __bottom / __copy
 *
 * ▼ 下層共通
 * .sng-hero / --service / --works / __shine / --red / --red-lg / __inner / __en / __ttl
 * .sng-crumb / --plain / __list / __current
 *
 * ▼ TOP
 * .sng-mv / __slides / __slide / __slide-inner / __fade / __scrim
 * .sng-mv__body / __eyebrow / __ttl / __ttl-em / __btns / __lead / __hr / __text
 * .sng-marquee / __track / __text          - 流れる英字（-webkit-text-stroke）
 * .sng-msg / __inner / __ttl / __text / __sign / __sign-en / __sign-ja / __link
 * .sng-msg__img / __img-bar
 * .sng-svc / __bg / __scrim / __inner / __ttl / __grid / __card / __card-ttl / __icon / __text
 * .sng-reason / __bg / __scrim / __inner / __ttl / __grid / __item / __head
 * .sng-reason__num / __label / __item-ttl / __text
 * .sng-wn / __inner / __ttl / __link
 * .sng-works__grid / __card / __thumb / --b / __card-ttl / __date
 * .sng-news__item / __date / __text
 *
 * ▼ 下層ページ
 * .sng-greet / __img / __img-bar / __ttl / __sign / __sign-en / __sign-ja
 * .sng-dl / __row（dt 220px固定の定義リスト型テーブル）/ .sng-outline__ttl
 * .sng-map / .sng-access__ttl / .sng-access__link
 * .sng-svclist-sec / .sng-svclist / __item / --last / __num-wrap / __num / __ttl / __catch / __img
 * .sng-entrylist-sec / .sng-entrylist / __lead / __card / __thumb（--b〜--f）/ __ttl / __date
 * .sng-pager / __item / --current   ※CMS出力の .pages も同じ見た目に揃えている
 * .sng-entry-sec / .sng-entry-layout / __meta / __date / __ttl / __h2 / __foot
 * .sng-entry__hero / .is-loaded / __hero-src  - CMSの image_url を img に変換して表示
 * .sng-entry__body                  - CMS本文のタイポグラフィ（h2/h3/img/ul/table/a）
 * .sng-entry__pager                 - CMS出力 .pages（page_prev / page_next）を横並びに
 * .sng-side / __ttl / __list / __row / --plain
 *   ＋ #cms-blog-entry-month-1-area（CMS月別アーカイブ）を同じ見た目に上書き
 * .sng-side__estimate / __estimate-label / __estimate-text / __estimate-btn
 * .sng-contact-sec / __lead / __cards / __card / __label / __num / __strong / __note
 * .sng-form / __row / __label / --top / __req / __input / __textarea / __chips / __chip
 * .sng-form__filewrap / __file / __file-ttl / __file-note / __file-input / __submit
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ・値の粒度不足：セクションpaddingが clamp() 可変（例 clamp(72px,9vw,132px)）。
 *   共通 .section は 120px/60px 固定のため再現不可 → .sng-sec 系を追加。
 *   見出しも clamp(24px,2.9vw,38px) 等の可変サイズで、fz-* の刻みでは合わない。
 * ・構造不足：1px の grid gap ＋ 背景色で「罫線グリッド」を作るカード並び
 *   （SERVICE 4枚・お問い合わせ手段3枚）が組めない → .sng-svc__grid 等を追加。
 *   dt を 220px 固定にする定義リスト型テーブルも共通に無い → .sng-dl。
 * ・装飾パターン不足：-webkit-text-stroke の流れる英字（マーキー）、
 *   背景写真＋grayscale/brightness フィルタ＋グラデ暗幕の重ね、
 *   Ken Burns で背景写真をクロスフェード切替する演出が無い。
 * ・指定方向不足：画面右端中央に縦並びで固定する追従バナー（SPで下部横並びに変化）
 *   に相当する共通クラスが無い（.sp-fixed-bar はSP専用・白背景固定）。
 * ・状態不足：ダークテーマ前提のホバー（白反転・赤半透明かぶせ）が utility に無い。
 */

/* ==========================================================================
   1. 土台（ダークテーマ・コンテナ・リンク）
   ========================================================================== */
/* body は素の値に固定（共通CSSのSP用font-size切替も打ち消す） */
body {
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
}
a {
  color: inherit;
  transition: color .2s, opacity .2s, background .2s, border-color .2s;
}
a:hover {
  color: #e83351;
  opacity: 1;
}
p { text-wrap: pretty; }
img { border: 0; }

/* コンテナ：デザインは max-width 1280px ＋ 左右24pxのガター固定 */
.container,
.container-wide,
.container-narrow {
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 1320px) {
  .container,
  .container-wide {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 639px) {
  .container-narrow { max-width: 100%; }
}

/* Ken Burns / マーキー */
@keyframes sng-kb {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
@keyframes sng-mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   2. セクション・見出し・ボタン・リンク
   ========================================================================== */
.sng-sec      { padding: clamp(72px, 9vw, 132px) 0; background: #0b0b0b; }
.sng-sec--md  { padding: clamp(64px, 8vw, 116px) 0; background: #0b0b0b; }
.sng-sec--sm  { padding: clamp(56px, 7vw, 96px) 0; background: #0b0b0b; }
.sng-sec--dark2 { background: #141414; }

.sng-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  line-height: normal;
  color: #e83351;
  margin-bottom: 24px;
}
.sng-eyebrow--white { color: #fff; }
.sng-eyebrow--mb26 { margin-bottom: 26px; }

.sng-ttl {
  color: #fff;
  font-size: clamp(22px, 2.9vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.sng-ttl--sm { font-size: clamp(22px, 2.4vw, 30px); }
.sng-ttl--md { font-size: clamp(24px, 2.9vw, 36px); line-height: 1.55; }
.sng-ttl--lg { font-size: clamp(25px, 4.6vw, 62px); line-height: 1.34; }

.sng-lead {
  font-size: 15px;
  line-height: 2.15;
  color: rgba(255, 255, 255, .78);
}
.sng-lead--lg { font-size: 16px; }

.sng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
  text-align: center;
}
.sng-btn--red { background: #e83351; color: #fff; }
.sng-btn--red:hover { background: #c9223d; color: #fff; }
.sng-btn--ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.sng-btn--ghost:hover { background: #fff; color: #0b0b0b; }
.sng-btn--outline {
  gap: 9px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}
.sng-btn--outline:hover { border-color: #e83351; color: #e83351; }
.sng-btn--frame {
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 14px;
  letter-spacing: normal;
}
.sng-btn--frame:hover { background: rgba(232, 51, 81, .78); color: #fff; }
.sng-btn--wide { padding: 22px 72px; border: none; font-size: 16px; letter-spacing: .08em; cursor: pointer; }
.sng-btn__arrow { font-family: "Oswald", sans-serif; }

.sng-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e83351;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.sng-link:hover { color: #e83351; }
.sng-link--thin { font-size: 13.5px; font-weight: 400; padding-bottom: 7px; }
.sng-link__arrow { color: #e83351; }

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */
.sng-header {
  position: sticky;
  top: 0;
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none;
}
.sng-header__inner {
  max-width: 1280px;
  height: 88px;
  padding: 0 24px;
  gap: 24px;
}
@media (max-width: 1100px) {
  .sng-header__inner { height: 88px; padding: 0 24px; }
}

/* -- ロゴ（2段テキスト） */
.sng-logo { display: block; flex: none; }
.sng-logo__ja {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .14em;
  line-height: 1.2;
}
.sng-logo__en {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .5);
  line-height: normal;
}
/* 文字ロゴはホバーで色を変えない（ヘッダー・フッター共通） */
.sng-logo:hover .sng-logo__ja,
.sng-footer__logo:hover .sng-logo__ja { color: #fff; }
.sng-logo:hover .sng-logo__en,
.sng-footer__logo:hover .sng-logo__en { color: rgba(255, 255, 255, .5); }

/* -- PCナビ（縦罫線区切り・EN＋JA・カレント赤下線） */
.sng-nav { align-items: stretch; gap: 0; }
.sng-nav__item { display: flex; align-items: stretch; }
.sng-nav__item > a {
  display: block;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.sng-nav__item:last-child > a { border-right: 1px solid rgba(255, 255, 255, .12); }
.sng-nav__item > a::after { display: none; }
.sng-nav__en {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: normal;
  color: #fff;
}
.sng-nav__ja {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: rgba(255, 255, 255, .8);
}
/* カレントページは下線を出さず、英字を赤にして示す */
.sng-nav__item--current > a .sng-nav__en { color: #e83351; }
.sng-nav__item > a:hover .sng-nav__en { color: #e83351; }

/* -- 右側：電話 / LINE / CTA */
.sng-header__right { gap: 18px; height: auto; }
.sng-header__tel { display: block; text-align: right; }
.sng-header__tel-label {
  display: block;
  font-size: 10px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}
.sng-header__tel-num {
  display: block;
  font-size: 22px;
  color: #fff;
  letter-spacing: .04em;
  line-height: 1.2;
}
.sng-header__tel:hover .sng-header__tel-num { color: #e83351; }
.sng-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  font-size: 20px;
  flex: none;
}
.sng-header__icon:hover { border-color: #e83351; color: #e83351; }
.sng-header__cta {
  display: block;
  height: auto;
  padding: 15px 26px;
  background: #e83351;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
}
.sng-header__cta:hover { background: #c9223d; color: #fff; }

/* -- 1100px以下はPCナビ／右側を隠してハンバーガーに切替（共通CSSの pc ブレイクポイント）。
      ナビENを16pxにした分ヘッダーの必要幅が増えるため、1240px以下では
      ナビ項目の左右paddingを詰めてCTAのはみ出しを防ぐ */
@media (max-width: 1240px) {
  .sng-nav__item > a { padding: 0 10px; }
  .sng-header__inner { gap: 16px; }
}

/* ==========================================================================
   4. ハンバーガー / SPナビ
   ========================================================================== */
.sng-burger {
  top: 20px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: transparent;
  backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .24);
}
.sng-burger .nav-toggle__line {
  width: 20px;
  height: 1.5px;
  background: #fff;
}
.sng-burger .nav-toggle__line:nth-child(1) { top: 17px; }
.sng-burger .nav-toggle__line:nth-child(2) { top: 23.25px; }
.sng-burger .nav-toggle__line:nth-child(3) { top: 29.5px; }
.sng-burger.is-active .nav-toggle__line:nth-child(1) { top: 23.25px; }
.sng-burger.is-active .nav-toggle__line:nth-child(3) { top: 23.25px; }

.sng-spnav {
  top: 88px;
  display: block;
  padding: 8px 24px 40px;
  background: #0b0b0b;
  overflow-y: auto;
}
.sng-spnav__list { width: 100%; max-width: none; text-align: left; }
.sng-spnav__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sng-spnav__item:first-child { border-top: none; }
.sng-spnav__link {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  padding: 22px 0;
}
.sng-spnav__link::after { display: none; }
.sng-spnav__link:hover { background: transparent; }
.sng-spnav__en {
  width: 88px;
  flex: none;
  margin-right: 0;
  padding-left: 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: #e83351;
  opacity: 1;
}
.sng-spnav__ja { font-size: 17px; font-weight: 400; color: #fff; }
.sng-spnav__bottom { margin-top: 28px; max-width: none; }
.sng-spnav__tel {
  display: block;
  padding: 20px;
  background: #e83351;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: normal;
}
.sng-spnav__tel:hover { background: #c9223d; color: #fff; }

/* ==========================================================================
   5. 追従バナー（PC：右端縦／860px以下：下部横並び）
   ========================================================================== */
.sng-follow {
  position: fixed;
  z-index: 50;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background: #0b0b0b;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.sng-follow__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 62px;
  height: 62px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px;
  line-height: normal;
}
.sng-follow__btn span { font-size: 10px; letter-spacing: .12em; }
.sng-follow__btn:hover { background: rgba(232, 51, 81, .78); color: #fff; }
/* LINEはLINEブランドカラー、電話はメインカラーより黒寄りの赤、メールはメインカラー */
.sng-follow__btn--line { background: #06c755; border-bottom-color: rgba(0, 0, 0, .2); }
.sng-follow__btn--line:hover { background: #05a948; color: #fff; }
.sng-follow__btn--tel { background: #8f1727; border-bottom-color: rgba(0, 0, 0, .2); }
.sng-follow__btn--tel:hover { background: #701220; color: #fff; }
.sng-follow__btn--red { background: #e83351; border-bottom: none; }
.sng-follow__btn--red:hover { background: #c9223d; color: #fff; }

/* PC（861px以上）では右端の縦並び追従ボタンを表示しない。
   860px以下の画面下部バーのみ残す */
@media (min-width: 861px) {
  .sng-follow { display: none; }
}

@media (max-width: 860px) {
  body { padding-bottom: 74px; }
  .sng-follow {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .sng-follow__btn { flex: 1; width: auto; height: 58px; border-bottom: none; }
}

/* ==========================================================================
   6. 共通CTA帯
   ========================================================================== */
.sng-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0;
  background: #8f1327;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.sng-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sng-cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 11, 11, .4), rgba(11, 11, 11, .6));
}
.sng-cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sng-cta__label { margin-bottom: 0; }
.sng-cta__title {
  margin: 16px 0 12px;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.5;
}
.sng-cta__text {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 1.9;
}
.sng-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sng-cta__btns .sng-btn { padding: 18px 34px; }
.sng-cta__tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 30px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.sng-cta__tel-label { font-size: 10px; letter-spacing: .2em; opacity: .7; line-height: normal; }
.sng-cta__tel-num { font-size: 24px; letter-spacing: .04em; line-height: normal; }
.sng-cta__tel:hover { background: #fff; color: #0b0b0b; }

/* ==========================================================================
   7. フッター
   ========================================================================== */
.sng-footer {
  background: #0b0b0b;
  padding: clamp(48px, 6vw, 80px) 0 0;
}
.sng-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.sng-footer__logo { display: inline-block; }
.sng-footer__logo .sng-logo__ja { line-height: normal; }
.sng-footer__info {
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  line-height: 2;
}
.sng-footer__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sng-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; }
.sng-footer__nav a { color: rgba(255, 255, 255, .78); font-size: 13px; }
.sng-footer__nav a:hover { color: #e83351; }
.sng-footer__map {
  border: 1px solid rgba(255, 255, 255, .14);
  background: repeating-linear-gradient(45deg, #1b1b1b, #1b1b1b 22px, #161616 22px, #161616 44px);
}
.sng-footer__bottom {
  max-width: 1280px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}
.sng-footer__copy {
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .42);
}
@media (max-width: 860px) {
  .sng-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. 下層ページ共通（ヒーロー・パンくず）
   ========================================================================== */
.sng-hero {
  position: relative;
  height: clamp(240px, 32vw, 360px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(140deg, #2a2321, #0f0e0d);
}
.sng-hero--service { background: linear-gradient(140deg, #25292c, #0f0e0d); }
.sng-hero--works   { background: linear-gradient(140deg, #2c2426, #0f0e0d); }
/* 背景写真：白文字が読めるようダーク寄りに落として全面に敷く */
.sng-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(.78);
}
/* 文字がのる左側だけ暗く、右にいくほど写真を見せる */
.sng-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(11, 11, 11, .78), rgba(11, 11, 11, .42) 55%, rgba(11, 11, 11, .22));
  pointer-events: none;
}
.sng-hero__shine {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 44%;
  height: 100%;
  transform: skewX(-12deg);
  background: linear-gradient(110deg, rgba(255, 255, 255, .07), transparent 70%);
  pointer-events: none;
}
/* 写真が見えるようになった分、赤の斜め光沢は控えめに */
.sng-hero__shine--red    { background: linear-gradient(110deg, rgba(232, 51, 81, .12), transparent 70%); }
.sng-hero__shine--red-lg { background: linear-gradient(110deg, rgba(232, 51, 81, .13), transparent 70%); }
.sng-hero__inner { position: relative; z-index: 3; width: 100%; }
.sng-hero__en {
  display: block;
  font-size: 12px;
  letter-spacing: .28em;
  line-height: normal;
  color: #e83351;
}
.sng-hero__ttl {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: normal;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}
.sng-hero__en { text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }

.sng-crumb {
  background: #0b0b0b;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sng-crumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  line-height: normal;
  color: rgba(255, 255, 255, .55);
}
.sng-crumb__list a { color: rgba(255, 255, 255, .55); }
.sng-crumb__list a:hover { color: #e83351; }
.sng-crumb__current { color: #fff; }
/* ==========================================================================
   9. TOP：メインビュー
   ========================================================================== */
.sng-mv {
  position: relative;
  min-height: clamp(540px, 88vh, 880px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0b0b;
}
/* #slideshow（CMSスライダー枠）：MV全面を覆う。高さは外枠に追従。
   z-index:0 で重なり文脈を作り、CMS側が内部に持つ z-index（最大3）が
   暗幕やキャッチコピーより前に出ないよう閉じ込める */
.sng-mv__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* CMSスライダー出力を MV 枠いっぱいに追従させる。
   CMS側は #main_slider.slider_wrapper に --swiper-wrapper-height:auto を当てており、
   スライドが position:absolute のため高さ0になる。変数ごと 100% に上書きする。 */
#slideshow #main_slider.slider_wrapper {
  --swiper-wrapper-height: 100%;
  height: 100%;
}
.sng-mv__slides > div,
.sng-mv__slides .slider_wrapper,
.sng-mv__slides .main_slider__outer,
.sng-mv__slides .main_slider,
.sng-mv__slides .main_slider__inner,
.sng-mv__slides .swiper,
.sng-mv__slides .swiper-wrapper {
  width: 100%;
  height: 100%;
}
/* スライドの位置・opacity は Swiper（CMS側）が制御するため、
   ここでは高さだけ通す。position / inset を当てるとフェード演算が壊れる */
.sng-mv__slides .swiper-slide {
  height: 100%;
  overflow: hidden;
}
/* 静止画フォールバック（CMS未接続時）は自前で全面に敷く */
.sng-mv__slides > .sng-mv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sng-mv__slide-inner { width: 100%; height: 100%; }
.sng-mv__slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: sng-kb 14s ease-out infinite alternate;
}
/* 静止画フォールバック時のみデザインどおりの寄せ（CMS画像は中央のまま） */
.sng-mv__slide img { object-position: 40% 50%; }
/* 下端の黒フェード */
.sng-mv__fade {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 34%;
  background: linear-gradient(#0000, #0b0b0b);
  pointer-events: none;
}
/* 左右からの暗幕 */
.sng-mv__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(11, 11, 11, .72), rgba(11, 11, 11, .34) 60%, rgba(11, 11, 11, .66));
  pointer-events: none;
}
.sng-mv__body {
  position: relative;
  z-index: 2;
  flex: none;
  min-height: 100vh;
  width: 100%;
  padding-top: clamp(60px, 8vh, 120px);
  padding-bottom: clamp(60px, 8vh, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sng-mv__eyebrow {
  display: block;
  margin-bottom: 26px;
  font-size: 12px;
  letter-spacing: .24em;
  line-height: normal;
  color: #fff;
}
.sng-mv__ttl {
  letter-spacing: .01em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
.sng-mv__ttl-em { color: #e83351; }
.sng-mv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.sng-mv__lead {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(40px, 6vh, 88px);
  padding-bottom: clamp(72px, 9vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 44px);
}
.sng-mv__hr {
  display: block;
  width: min(100%, 120px);
  height: 1px;
  background: rgba(255, 255, 255, .45);
}
.sng-mv__text {
  margin: 0 auto;
  max-width: 1040px;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

/* ==========================================================================
   10. TOP：流れる英字（マーキー）
   ========================================================================== */
.sng-marquee {
  background: #0b0b0b;
  overflow: hidden;
  padding: clamp(26px, 3.5vw, 44px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.sng-marquee__track {
  display: flex;
  width: max-content;
  animation: sng-mq 38s linear infinite;
}
.sng-marquee__text {
  display: block;
  padding-right: .4em;
  font-size: clamp(46px, 8vw, 112px);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
/* ==========================================================================
   11. TOP：MESSAGE
   ========================================================================== */
.sng-msg {
  background: #0b0b0b;
  padding: clamp(48px, 6vw, 92px) 0 clamp(72px, 9vw, 132px);
}
.sng-msg__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.sng-msg__ttl { margin: 0 0 30px; }
.sng-msg__text {
  color: rgba(255, 255, 255, .76);
  font-size: 15px;
  line-height: 2.1;
}
.sng-msg__sign {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 36px;
}
.sng-msg__sign-en {
  font-size: 11px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(255, 255, 255, .45);
}
.sng-msg__sign-ja {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}
.sng-msg__link { margin-top: 34px; }
.sng-msg__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #2a2321, #131110);
  overflow: hidden;
}
.sng-msg__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sng-msg__img-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #e83351;
  z-index: 1;
}
@media (max-width: 860px) {
  .sng-msg__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. TOP：SERVICE（背景写真＋1px罫線グリッドの4カード）
   ========================================================================== */
.sng-svc {
  position: relative;
  overflow: hidden;
  background: #141414;
  padding: clamp(72px, 9vw, 132px) 0;
}
.sng-svc__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.55);
}
.sng-svc__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, .5), rgba(11, 11, 11, 0));
}
.sng-svc__inner { position: relative; }
.sng-svc__ttl { margin: 0 0 14px; }
.sng-svc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 52px;
  background: rgba(255, 255, 255, .16);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.sng-svc__card {
  display: block;
  background: #101010;
  padding: 40px 32px 34px;
  color: #fff;
}
.sng-svc__card + .sng-svc__card { border-left: 1px solid rgba(255, 255, 255, .16); }
.sng-svc__icon {
  display: block;
  height: 50px;
  font-size: 44px;
  line-height: 50px;
  color: #e83351;
}
.sng-svc__card-ttl {
  margin: 24px 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: normal;
}
.sng-svc__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: inherit;
  opacity: .72;
}
.sng-svc__card:hover { background: rgba(232, 51, 81, .78); color: #fff; }
.sng-svc__card:hover .sng-svc__icon { color: #fff; }
.sng-svc__card:hover .sng-svc__text { opacity: .92; }

@media (max-width: 1180px) {
  .sng-svc__card { padding: 32px 22px 28px; }
  .sng-svc__card-ttl { font-size: 17px; }
}
@media (max-width: 860px) {
  .sng-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* スマホは1カラム。縦積みでは左罫線を消し、gap＋背景色の区切り線だけにする */
@media (max-width: 639px) {
  .sng-svc__grid { grid-template-columns: 1fr; }
  .sng-svc__card + .sng-svc__card { border-left: none; }
}
/* ==========================================================================
   13. TOP：REASON（背景写真をKen Burnsでクロスフェード）
   ========================================================================== */
.sng-reason {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;
  padding: clamp(72px, 9vw, 132px) 0;
}
.sng-reason__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.85);
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: sng-kb 18s ease-out infinite alternate;
}
.sng-reason__bg.is-active { opacity: 1; }
.sng-reason__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, .5), rgba(11, 11, 11, .68));
}
.sng-reason__inner { position: relative; }
.sng-reason__ttl { margin: 0 0 56px; }
.sng-reason__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.sng-reason__item {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 28px;
}
.sng-reason__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.sng-reason__num {
  font-size: 56px;
  font-weight: 400;
  line-height: .9;
  color: #e83351;
}
.sng-reason__label {
  font-size: 11px;
  letter-spacing: .22em;
  line-height: normal;
  color: rgba(255, 255, 255, .5);
}
.sng-reason__item-ttl {
  margin: 22px 0 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.sng-reason__text {
  color: #fff;
  font-size: 14px;
  line-height: 2;
}

/* ==========================================================================
   14. TOP：WORKS / NEWS
   ========================================================================== */
.sng-wn { background: #0b0b0b; padding: clamp(72px, 9vw, 132px) 0; }
.sng-wn__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}
.sng-wn__ttl { margin: 0 0 34px; }
.sng-wn__link { margin-top: 32px; }

.sng-works__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* CMSは span の中に記事を差し込むため、span を透過させて記事をグリッド直下に置く */
.sng-works__grid > span,
.sng-entrylist > span { display: contents; }
/* TOPの新着2件ではCMSのページャーは出さない */
.sng-works__grid .pages { display: none; }
.sng-works__card { display: block; color: #fff; }
.sng-works__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #2c2426, #141212);
  overflow: hidden;
}
.sng-works__thumb--b { background: linear-gradient(150deg, #25292c, #121415); }
.sng-works__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sng-works__card-ttl {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.sng-works__date {
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .52);
}
.sng-works__card:hover .sng-works__card-ttl { color: #e83351; }

/* お知らせは3件分（1件71px）の高さでカットし、それ以上は縦スクロール */
.sng-news {
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 51, 81, .8) rgba(255, 255, 255, .1);
}
.sng-news::-webkit-scrollbar { width: 6px; }
.sng-news::-webkit-scrollbar-track { background: rgba(255, 255, 255, .1); }
.sng-news::-webkit-scrollbar-thumb { background: rgba(232, 51, 81, .8); }
.sng-news__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sng-news__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sng-news__date {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .52);
}
.sng-news__text {
  flex: 1 1 220px;
  font-size: 15px;
  line-height: 1.7;
  color: #fff;
}

@media (max-width: 860px) {
  .sng-wn__inner { grid-template-columns: 1fr; }
}
/* SPは折り返しが増えるため少し高さを確保 */
@media (max-width: 639px) {
  .sng-news { max-height: 240px; }

  /* スマホでは解除する強制改行 */
  br.sng-br-pc { display: none; }

  /* メインビューはスマホで縦を詰める（1画面強に収める） */
  .sng-mv { min-height: 0; }
  .sng-mv__body {
    min-height: 55vh;
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .sng-mv__lead {
    padding-top: 26px;
    padding-bottom: 44px;
    gap: 18px;
  }
  .sng-mv__text { line-height: 1.9; }

  /* MVのボタンはスマホでも横並び。文字が折り返さないよう字送りを詰める */
  .sng-mv__btns {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .sng-mv__btns .sng-btn {
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    padding: 15px 8px;
    font-size: clamp(11px, 3.4vw, 15px);
    letter-spacing: 0;
    white-space: nowrap;
  }
}
/* ==========================================================================
   15. 会社概要：GREETING / OUTLINE / ACCESS
   ========================================================================== */
.sng-sec--pb0 { padding-bottom: 0; }

.sng-greet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.sng-greet__img {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 440px;
  background: #131110;
  overflow: hidden;
}
.sng-greet__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sng-greet__img-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #e83351;
}
.sng-greet__ttl { margin: 0 0 30px; }
.sng-greet__sign {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sng-greet__sign-en {
  font-size: 11px;
  letter-spacing: .2em;
  line-height: normal;
  color: rgba(255, 255, 255, .52);
}
.sng-greet__sign-ja { font-size: 18px; font-weight: 700; line-height: normal; }

.sng-outline__ttl { margin: 0 0 44px; }
.sng-dl { border-top: 1px solid rgba(255, 255, 255, .16); }
.sng-dl__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sng-dl__row dt {
  flex: 0 0 220px;
  padding: 22px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: normal;
}
.sng-dl__row dd {
  flex: 1 1 260px;
  padding: 22px 0;
  font-size: 15px;
  line-height: normal;
  color: rgba(255, 255, 255, .78);
}

.sng-access__ttl { margin: 0 0 36px; }
.sng-map {
  position: relative;
  aspect-ratio: 16 / 7;
  border: 1px solid rgba(255, 255, 255, .16);
  background: repeating-linear-gradient(45deg, #1b1b1b, #1b1b1b 22px, #161616 22px, #161616 44px);
}
.sng-access__link { margin-top: 22px; }

/* ==========================================================================
   16. 事業内容：サービス一覧（左右交互）
   ========================================================================== */
.sng-svclist-sec { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 116px); background: #0b0b0b; }
.sng-svclist {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sng-svclist__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  /* TOPのSERVICEカードからアンカー遷移するため、追従ヘッダー(88px)分ずらす */
  scroll-margin-top: 110px;
}
.sng-svclist__item--last { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sng-svclist__num-wrap {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.sng-svclist__num {
  font-size: 44px;
  font-weight: 400;
  line-height: .9;
  color: #e83351;
}
.sng-svclist__ttl { margin: 0 0 8px; }
.sng-svclist__catch {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #e83351;
}
.sng-svclist__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #131110;
  overflow: hidden;
}
.sng-svclist__img--b { background: #121415; }
.sng-svclist__img--c { background: #141112; }
.sng-svclist__img--d { background: #121313; }
.sng-svclist__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スマホでは会社概要テーブルが「ラベル上／内容下」に折り返すため、
   内容側の上padding を落として1行のまとまりに見せる */
@media (max-width: 639px) {
  .sng-dl__row dd { padding: 0 0 20px; }
  /* 大きめリード文はスマホで本文サイズまで落とす */
  .sng-lead--lg { font-size: 14px; }
}

@media (max-width: 860px) {
  .sng-greet { grid-template-columns: 1fr; }
  .sng-svclist__item { grid-template-columns: 1fr; }
  /* 1カラム時は項目ごとに順序が入れ替わらないよう、常に本文→写真の並びにする
     （PCの左右交互レイアウトはHTMLの並び順で作っているため） */
  .sng-svclist__body { order: 1; }
  .sng-svclist__img  { order: 2; }
}
/* ==========================================================================
   17. 施工実績：一覧
   ========================================================================== */
.sng-entrylist-sec {
  background: #0b0b0b;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 116px);
}
.sng-entrylist__lead {
  margin: 0 auto 40px;
  max-width: 760px;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
}
.sng-entrylist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.sng-entrylist__card { display: block; color: #fff; }
.sng-entrylist__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(150deg, #2c2426, #141212);
}
.sng-entrylist__thumb--b { background: linear-gradient(150deg, #25292c, #121415); }
.sng-entrylist__thumb--c { background: linear-gradient(150deg, #2a2c2a, #121312); }
.sng-entrylist__thumb--d { background: linear-gradient(150deg, #302629, #141213); }
.sng-entrylist__thumb--e { background: linear-gradient(150deg, #26282c, #111214); }
.sng-entrylist__thumb--f { background: linear-gradient(150deg, #2b2321, #131110); }
.sng-entrylist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sng-entrylist__ttl {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}
.sng-entrylist__date {
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .52);
}
.sng-entrylist__card:hover .sng-entrylist__ttl { color: #e83351; }

/* ページャー：CMS出力の .pages も同じ見た目に揃える */
.sng-pager,
.sng-entrylist .pages {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
}
.sng-entrylist .pages { grid-column: 1 / -1; }
.sng-entrylist .pages a,
.sng-entrylist .pages span,
.sng-pager__item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* CMSは「次の3件 ＞」のようなテキストを返すため 100px を最低幅として確保し、
     長い文言でも欠けないよう width は auto ＋ 左右padding で伸ばす */
  min-width: 100px;
  width: auto;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}
.sng-entrylist .pages a:hover,
.sng-pager__item:hover { border-color: #e83351; color: #e83351; }
.sng-entrylist .pages span,
.sng-pager__item--current {
  background: #e83351;
  border: none;
  color: #fff;
  pointer-events: none;
}

/* ==========================================================================
   18. 施工実績：詳細（本文＋右サイドバー）
   ========================================================================== */
.sng-crumb--plain {
  padding: 26px 0 24px;
  border-bottom: none;
}
.sng-entry-sec {
  background: #0b0b0b;
  padding: clamp(48px, 6vw, 84px) 0 clamp(64px, 8vw, 116px);
}
.sng-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.sng-entry__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.sng-entry__date {
  font-size: 12px;
  letter-spacing: .14em;
  line-height: normal;
  color: rgba(255, 255, 255, .52);
}
.sng-entry__ttl { margin: 0 0 32px; }
/* CMSの登録画像がある記事だけ表示する（既定は非表示＝空枠を出さない） */
.sng-entry__hero {
  display: none;
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, #2c2426, #141212);
  overflow: hidden;
}
.sng-entry__hero.is-loaded { display: block; }
.sng-entry__hero img { width: 100%; height: 100%; object-fit: cover; }
/* CMSが返す画像URL文字列は画面に出さない。画像が無い記事では枠ごと消す */
.sng-entry__hero-src {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* CMS本文（記事本文エリア）のタイポグラフィ */
.sng-entry__body {
  font-size: 15px;
  line-height: 2.15;
  color: rgba(255, 255, 255, .78);
}
.sng-entry__body p { margin: 0; }
.sng-entry__body p + p,
.sng-entry__body p + div,
.sng-entry__body div + p { margin-top: 22px; }
.sng-entry__body img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}
.sng-entry__body a { color: #e83351; text-decoration: underline; }
.sng-entry__body strong,
.sng-entry__body b { color: #fff; }
.sng-entry__body h2 {
  margin: 48px 0 16px;
  padding-left: 14px;
  border-left: 3px solid #e83351;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}
.sng-entry__body h3,
.sng-entry__body h4 {
  margin: 32px 0 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.sng-entry__body ul,
.sng-entry__body ol { margin: 22px 0; padding-left: 1.4em; }
.sng-entry__body ul { list-style: disc; }
.sng-entry__body ol { list-style: decimal; }
.sng-entry__body li { margin-bottom: 8px; }
.sng-entry__body table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}
.sng-entry__body th,
.sng-entry__body td {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  text-align: left;
}
.sng-entry__body th { color: #fff; font-weight: 700; }

/* CMSの前後記事リンク */
/* CMSは span の中に .pages を差し込むため、外枠はブロックのままにして .pages を横並びにする */
.sng-entry__pager { margin-top: 48px; }
.sng-entry__pager a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 14px;
  line-height: normal;
}
.sng-entry__pager a:hover { border-color: #e83351; color: #e83351; }
/* CMS出力は .pages > .page_next / .page_prev（div）なので横並びに戻す */
.sng-entry__pager .pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.sng-entry__pager .page_prev { margin-left: auto; }
/* ヒーローと同じ画像が本文にも入っている場合は本文側を隠す（js/common.jsが付与） */
.sng-entry__body .sng-is-dup { display: none; }
.sng-entry__h2 {
  margin: 48px 0 16px;
  padding-left: 14px;
  border-left: 3px solid #e83351;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}
.sng-entry__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.sng-side {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sng-side__ttl {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: normal;
  color: #e83351;
}
.sng-side__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.sng-side__row {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  line-height: normal;
  color: #fff;
}
.sng-side__row--plain { display: block; padding: 14px 0; }
/* CMS月別アーカイブ（ul > li > a で出力）を ARCHIVE リストと同じ見た目に揃える */
#cms-blog-entry-month-1-area ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
#cms-blog-entry-month-1-area li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
#cms-blog-entry-month-1-area a {
  display: block;
  padding: 14px 0;
  color: #fff;
  font-size: 14px;
  line-height: normal;
}
#cms-blog-entry-month-1-area a:hover { color: #e83351; }
.sng-side__estimate { background: #101010; padding: 30px 26px; }
.sng-side__estimate-label {
  display: block;
  font-size: 11px;
  letter-spacing: .22em;
  line-height: normal;
  color: #e83351;
}
.sng-side__estimate-text {
  margin: 14px 0 20px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}
.sng-side__estimate-btn {
  display: block;
  padding: 15px;
  /* LINE誘導なので背景はLINEブランドカラー */
  background: #06c755;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.sng-side__estimate-btn:hover { background: #05a948; color: #fff; }

@media (max-width: 860px) {
  .sng-entry-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. お問い合わせ
   ========================================================================== */
.sng-contact-sec {
  background: #0b0b0b;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 116px);
}
.sng-contact__lead { margin: 0 0 40px; }
.sng-contact__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-bottom: 56px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
}
.sng-contact__card {
  display: block;
  background: #101010;
  padding: 26px 24px;
  color: #fff;
}
.sng-contact__card:hover { background: #1c1c1c; color: #fff; }
.sng-contact__label {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  line-height: normal;
  color: #e83351;
}
.sng-contact__num {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  line-height: normal;
}
.sng-contact__strong {
  display: block;
  margin-top: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
}
.sng-contact__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: normal;
  color: rgba(255, 255, 255, .52);
}

.sng-form {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.sng-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sng-form__label {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.sng-form__label--top { align-items: flex-start; padding-top: 14px; }
.sng-form__req {
  background: #e83351;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  padding: 3px 7px;
}
.sng-form__input {
  flex: 1 1 260px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  background: #161616;
  color: #fff;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
.sng-form__input::placeholder { color: rgba(255, 255, 255, .38); }
.sng-form__input:focus { border-color: #e83351; }
.sng-form__textarea { line-height: 1.9; resize: vertical; }
.sng-form__chips {
  flex: 1 1 260px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sng-form__chip { cursor: pointer; }
.sng-form__chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sng-form__chip span {
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #161616;
  color: #fff;
  padding: 11px 18px;
  font-size: 13.5px;
  line-height: normal;
}
.sng-form__chip input:checked + span {
  border-color: #e83351;
  background: #e83351;
}
.sng-form__chip input:focus-visible + span { outline: 2px solid #e83351; outline-offset: 2px; }
.sng-form__filewrap { flex: 1 1 260px; }
.sng-form__file {
  position: relative;
  display: block;
  border: 1px dashed rgba(255, 255, 255, .24);
  background: #161616;
  color: #fff;
  padding: 30px;
  text-align: center;
  cursor: pointer;
}
.sng-form__file-ttl { display: block; font-size: 14px; font-weight: 700; line-height: normal; }
.sng-form__file-note {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: normal;
  color: rgba(255, 255, 255, .52);
}
.sng-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sng-form__submit {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* --------------------------------------------------------------------------
   フォームCMS（#cms-contact-*-area）の出力をデザインに合わせる
   CMS側は cdn.rs-sys.jp/css/cms/mail-form.css（白背景・512px固定）を後読みするため、
   id を含むセレクタで上書きする（!important は使わない）
   -------------------------------------------------------------------------- */
/* CMS側の白背景・余白・角丸を打ち消す（クラスを重ねて詳細度を上げる） */
#cms-contact-1-1-area .form-contents,
#cms-contact-1-1-area .form-contents.form-pattern-1 {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
#cms-contact-1-1-area form,
#cms-contact-1-1-area .form-pattern-1 form {
  max-width: none;
  background: transparent;
}

#cms-contact-1-1-area dl {
  display: grid;
  /* column-gap を空けると行の罫線が途切れるため、間隔は dt の padding-right で取る */
  grid-template-columns: 224px 1fr;
  column-gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
#cms-contact-1-1-area dt,
#cms-contact-1-1-area dd {
  width: auto;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
#cms-contact-1-1-area dt {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  /* 入力欄1行目の文字とラベルの高さを揃える（dd padding 24 + 枠1 + padding 14） */
  padding: 38px 24px 24px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
#cms-contact-1-1-area dd { color: #fff; font-size: 15px; }

/* 必須／任意バッジは site.css では一切上書きせず、CMS標準のデザインのまま使う */

/* 入力欄 */
#cms-contact-1-1-area dd input.textarea,
#cms-contact-1-1-area dd textarea.textarea,
#cms-contact-1-1-area dd select.textarea-serect,
#cms-contact-1-1-area dd input.textarea-date,
#cms-contact-1-1-area dd input.textarea-time {
  width: 100%;
  max-width: none;
  /* CMS側の height:30px / 40px 固定を解除して padding で高さを出す */
  height: auto;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  /* 入力欄は背景なし（枠線だけ）。セレクトのみ下で #161616 を戻す */
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  box-shadow: none;
}
#cms-contact-1-1-area dd textarea.textarea { line-height: 1.9; resize: vertical; }
#cms-contact-1-1-area dd input.textarea:focus,
#cms-contact-1-1-area dd textarea.textarea:focus,
#cms-contact-1-1-area dd select.textarea-serect:focus { border-color: #e83351; }
#cms-contact-1-1-area dd ::placeholder { color: rgba(255, 255, 255, .38); }

/* オートフィル（入力候補で自動入力）時に白背景・黒文字になるのを打ち消す。
   Chrome/Safari は :-webkit-autofill の背景を background-color で上書きできないため、
   transition を極端に遅らせて塗りを描画させず、要素自身の背景（透過／セレクトは #161616）を保つ */
#cms-contact-1-1-area dd input.textarea:-webkit-autofill,
#cms-contact-1-1-area dd input.textarea:-webkit-autofill:hover,
#cms-contact-1-1-area dd input.textarea:-webkit-autofill:focus,
#cms-contact-1-1-area dd input.textarea:-webkit-autofill:active,
#cms-contact-1-1-area dd input.textarea-date:-webkit-autofill,
#cms-contact-1-1-area dd input.textarea-time:-webkit-autofill,
#cms-contact-1-1-area dd textarea.textarea:-webkit-autofill,
#cms-contact-1-1-area dd select.textarea-serect:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  color: #fff;
  caret-color: #fff;
  transition: background-color 100000s 0s, color 100000s 0s;
}

/* セレクト（矢印を自前で描画） */
#cms-contact-1-1-area dd select.textarea-serect {
  appearance: none;
  padding-right: 42px;
  background-color: #161616;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  cursor: pointer;
}

/* ファイル添付 */
#cms-contact-1-1-area dd .upload-area { width: 100%; }
#cms-contact-1-1-area dd input.input-files {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}
#cms-contact-1-1-area dd input.input-files::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: #161616;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
#cms-contact-1-1-area dd input.input-files::file-selector-button:hover { border-color: #e83351; color: #e83351; }

/* 送信ボタン */
#cms-contact-1-1-area button.submit-btn {
  display: block;
  margin: 44px auto 0;
  padding: 22px 20px;
  border: none;
  border-radius: 0;
  background: #e83351;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: normal;
  cursor: pointer;
  transition: background .2s;
}
#cms-contact-1-1-area button.submit-btn:hover { background: #c9223d; }

/* 完了・エラーメッセージ
   CMS側は .form-pattern-1 .form-thanks-msg に白背景＋グレー枠、
   .form-contents .form-err-msg に #fee 背景＋赤枠を当てているため、
   id＋クラス重ねで詳細度を上げて背景を消す */
#cms-contact-1-1-area .form-contents.form-pattern-1 .form-thanks-msg,
#cms-contact-1-1-area .form-contents.form-pattern-1 .form-err-msg,
#cms-contact-1-1-area .form-thanks-msg,
#cms-contact-1-1-area .form-err-msg {
  background: none;
  background-color: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 2;
}
#cms-contact-1-1-area .form-contents.form-pattern-1 .form-thanks-msg {
  padding: 24px 0;
  border: none;
}
#cms-contact-1-1-area .form-contents.form-pattern-1 .form-err-msg {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #e83351;
  color: #ff8098;
}
#cms-contact-1-1-area .form-thanks-msg .back-home-btn a {
  display: block;
  width: 300px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 16px 0;
  border: none;
  border-radius: 0;
  background: #e83351;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 639px) {
  #cms-contact-1-1-area dl { grid-template-columns: 1fr; column-gap: 0; }
  #cms-contact-1-1-area dt { padding: 20px 0 0; border-bottom: none; }
  #cms-contact-1-1-area dd { padding: 10px 0 20px; }
  #cms-contact-1-1-area button.submit-btn { width: 100%; padding: 20px 0; }
}
/* == APPEND-POINT == */