@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * -- 汎用 --------------------------------------------------------------
 * .ksc-section / --sub / --bgpattern / --pt-sm / --pb-sm  - 80px上下・20px左右のセクション枠（共通.sectionは120px固定で刻みが合わない）
 * .ksc-inner-820 / -900 / -1080 / -1240 / -1320           - コンテンツ最大幅（共通は1200/1500/900のみ）
 * .ksc-stack-32                                            - 縦積みgrid（gap 32px）
 * .ksc-label-en / --accent / --left                        - セクション上部の英字ラベル
 * .ksc-h2 / --lg                                           - セクション見出し（中央・800）
 * .ksc-lead-center / .ksc-lead-title / .ksc-lead-text      - リード文
 * .ksc-note                                                - 注釈文
 * .ksc-btn / --accent / --base / --outline / --header / --footer / --submit
 *                                                          - 立体シャドウ付きpillボタン（共通btnは平面2px枠）
 * .ksc-btn-row                                             - ボタン横並び
 * .ksc-num-circle / __deco                                 - 白丸＋斜体数字＋deco画像のナンバーあしらい
 * .ksc-dash-line                                           - 破線区切り
 * .ksc-def                                                 - 「項目：内容」形式の段落
 *
 * -- ヘッダー ----------------------------------------------------------
 * .ksc-header / __inner / __group / __right                - sticky白ヘッダー
 * .ksc-logo / __body / __en / __name                       - 円形ロゴ＋英日2段テキスト
 * .ksc-nav / __item / __link                               - pill型ナビ（共通のEN+JA2段・下線hoverではない）
 * .ksc-tel / --sp / __num / __note / __icon                - SVGアイコン付き電話番号ブロック
 *
 * -- メインビュー ------------------------------------------------------
 * .ksc-mv / __layer / --a / --b / __col / --w1 / --w13 / --w115 / --split
 *   / --r-1-1 / --r-12-1 / --r-1-12 / --r-11-1 / __cell / __catch / __box / __title / __lead
 *                                                          - 斜めモザイク2層クロスフェードMV
 *
 * -- TOP ---------------------------------------------------------------
 * .ksc-catch__title / __lead / .ksc-badge-free             - メインキャッチ
 * .ksc-fukidashi-grid / .ksc-fukidashi / --1 / --2 / __text - 吹き出し画像のお悩みカード
 * .ksc-onayami-img / .ksc-solve-band                        - 共感セクション締め
 * .ksc-point-grid / .ksc-point / __corner / __num / __img / __title / __text - 解消ポイント3カード
 * .ksc-svc-grid / .ksc-svc / __img / __body / __title / __text     - 事業内容カード
 * .ksc-work-grid / .ksc-work / __img / __cap                       - 施工実績ピックアップ
 * .ksc-msg / __photo / __title / __text                            - 代表メッセージ
 *
 * -- 共通CTA / フッター -------------------------------------------------
 * .ksc-cta / __title / __lead / __btns                     - グリーン帯CTA
 * .ksc-cta-card / --mail / __label / __tel / __note / __mail
 * .ksc-footer / __inner / __col / __map / __logo / __name / __info / __contact / __tel / __nav
 * .ksc-copyright
 *
 * -- 下層ページ --------------------------------------------------------
 * .ksc-page-hero / __title                                 - 背景画像付きページヒーロー
 * .ksc-svc-card / __img / __title / __sub                  - 事業内容ページの取扱工事カード
 * .ksc-case / __tag / __title / __defs                     - 施工実績の事例カード
 * .ksc-ba / __item / __badge / --after                     - Before/After 2枚組
 * .ksc-gallery / __fig / __img / __cap / .ksc-blur / --a / --b - 施工写真ギャラリー（プライバシー加工ぼかし）
 * .ksc-h2-num / __figure / __deco / .ksc-strength-lead      - 「4つの選ばれる理由」見出し
 * .ksc-reason-grid / .ksc-reason / __corner / __num / __head / __icon / __title / __text
 * .ksc-dl / __row / .ksc-tel-inline                        - 会社概要dl
 * .ksc-map                                                 - Google Map枠
 * .ksc-form-note / .ksc-form / __label / __name / .ksc-req / .ksc-input / .ksc-check-grid / .ksc-check
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * [値の粒度不足]
 *  - .section は 120px 固定。デザインの 80px / 70px / 72px セクション余白に該当する刻みがない
 *  - コンテナ幅は 1200 / 1500 / 900 のみ。デザインの 820 / 1080 / 1240 / 1320px が無い
 *  - .fz-* は 0.1rem 刻みの rem 値。デザインの clamp() による流体タイポグラフィが表現できない
 *
 * [構造不足]
 *  - ヘッダーが position:sticky（ヘッダー分の高さを占有して流れる）のパターンが無い
 *    （.header-bar は fixed、.header-sticky は JS 連動の absolute→fixed）
 *  - ナビが「英日2段＋下線hover」固定。日本語1段の pill 型ナビが無い
 *  - grid の auto-fit / minmax による可変列 grid が無い（.grid-2〜6 は固定列数）
 *  - MV の斜めモザイク（skew + 2層クロスフェード）に相当するコンポーネントが無い
 *
 * [装飾パターン不足]
 *  - ボタンの「下方向ベタ影（box-shadow: 0 6px 0 色）」の立体表現が無い
 *  - 吹き出しが CSS 三角（.heading-balloon）のみ。画像ベースの手描き風吹き出し枠が無い
 *  - カード左上の三角コーナー＋番号のあしらいが無い
 *  - 白丸＋斜体数字＋装飾画像のナンバーあしらいが無い
 *  - 破線ドット区切り（repeating-linear-gradient）は .dot-leader-line が 1px 点線のみで太さ・間隔が合わない
 *
 * [状態不足]
 *  - hover で「背景色をアクセントカラーに変える」＋「立体影を保つ」組み合わせが無い
 *
 * [指定方向不足]
 *  - backdrop-filter によるスポットぼかし（画像内の一部だけをぼかすプライバシー加工）が無い
 *
 */

/* ==========================================================================
   汎用
   ========================================================================== */
.ksc-section        { padding: 80px 20px; }
.ksc-section--white { background: #fff; }
.ksc-section--sub   { background: #E8F5E9; }
.ksc-section--bgpattern { background: #fff url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28487/bg-01.png") top center / 1886px auto repeat-y; }
.ksc-section--pt-sm { padding-top: 20px; }
.ksc-section--pb-sm { padding-bottom: 40px; }
.ksc-section--pt-70 { padding-top: 70px; }
.ksc-section--pt-60 { padding-top: 60px; }
.ksc-section--pb-30 { padding-bottom: 30px; }
.ksc-section--pb-50 { padding-bottom: 50px; }
.ksc-section--pb-60 { padding-bottom: 60px; }
.ksc-section--pb-90 { padding-bottom: 90px; }

.ksc-inner-820  { max-width: 820px;  margin: 0 auto; }
.ksc-inner-900  { max-width: 900px;  margin: 0 auto; }
.ksc-inner-1080 { max-width: 1080px; margin: 0 auto; }
.ksc-inner-1240 { max-width: 1240px; margin: 0 auto; }
.ksc-inner-1320 { max-width: 1320px; margin: 0 auto; }

.ksc-stack-32 { display: grid; gap: 32px; }

.ksc-label-en {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #4CAF50;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
.ksc-label-en--accent { color: #C96A00; }
.ksc-label-en--left   { text-align: left; }

.ksc-h2 {
  text-align: center;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.5;
  font-weight: 800;
  color: #1B5E20;
  text-wrap: pretty;
}
.ksc-h2--lg   { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.4; }
.ksc-h2--left { text-align: left; font-size: clamp(23px, 3vw, 32px); }

.ksc-lead-center {
  max-width: 760px;
  /* margin ショートハンドだと後読みのため .mb-* ユーティリティを打ち消してしまう */
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1.7rem;
  line-height: 2;
  font-weight: 500;
  color: #3E5142;
}
.ksc-lead-title {
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.6;
  font-weight: 800;
  color: #1B5E20;
  text-wrap: pretty;
}
.ksc-lead-text {
  font-size: 1.7rem;
  line-height: 2.1;
  font-weight: 700;
  color: #3E5142;
  text-wrap: pretty;
}
.ksc-note {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #5A6B5C;
}

/* -- ボタン（立体シャドウ付きpill） -- */
.ksc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.4;
  padding: 18px 32px;
  border: 0;
  border-radius: 9999px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.3s ease, color 0.3s ease;
}
.ksc-btn:hover { opacity: 1; }
.ksc-btn--accent {
  background: #C96A00;
  color: #fff;
  box-shadow: 0 6px 0 #A35600;
}
.ksc-btn--accent:hover { background: #E07B00; color: #fff; }
.ksc-btn--base {
  background: #2E7D32;
  color: #fff;
  padding: 18px 40px;
  box-shadow: 0 6px 0 #388E3C;
}
.ksc-btn--base:hover { background: #5CBF60; color: #fff; }
.ksc-btn--outline {
  background: #fff;
  color: #2E7D32;
  border: 3px solid #4CAF50;
}
.ksc-btn--outline:hover { background: #4CAF50; color: #fff; }
.ksc-btn--header {
  font-size: clamp(12px, 1.25vw, 15px);
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.9vw, 22px);
  white-space: nowrap;
}
.ksc-btn--footer { font-size: 1.6rem; padding: 15px 26px; box-shadow: 0 5px 0 #E07B00; }
.ksc-btn--submit { justify-self: center; font-size: 1.9rem; padding: 19px 52px; }

.ksc-btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
/* 横並びボタンの幅を「広い方」に揃える（親の text-align: center で中央配置） */
.ksc-btn-row--equal {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

/* -- ナンバーあしらい（白丸＋斜体数字＋deco） -- */
.ksc-num-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.12);
  color: #6BBF4B;
  font-size: 1.55em;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow: visible;
}
.ksc-num-circle__deco {
  position: absolute;
  left: 0.08em;
  top: 0.1em;
  width: 0.42em;
  height: auto;
  display: block;
}

.ksc-dash-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, #B7DDB0 0 8px, transparent 8px 14px);
}

.ksc-def {
  font-size: 1.6rem;
  line-height: 1.95;
  font-weight: 500;
  color: #3E5142;
}
.ksc-def strong { color: #1B5E20; font-weight: 700; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
/* アンカーリンク（#contact等）の着地点がstickyヘッダーに隠れないように */
html { scroll-padding-top: 100px; }

.ksc-header {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 14px rgba(27, 94, 32, 0.10);
}
.ksc-header__inner {
  max-width: 1200px;
  height: auto;
  padding: 12px 20px;
  gap: clamp(10px, 1.4vw, 20px);
  flex-wrap: nowrap;
}
.ksc-header__group {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  flex-wrap: nowrap;
  margin-left: auto;
  min-width: 0;
}
.ksc-header__right { gap: clamp(6px, 0.8vw, 10px); height: auto; }

.ksc-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.ksc-logo img {
  width: clamp(38px, 3.6vw, 52px);
  height: clamp(38px, 3.6vw, 52px);
  border-radius: 50%;
  display: block;
}
.ksc-logo__body { display: flex; flex-direction: column; line-height: 1.2; }
.ksc-logo__en {
  font-weight: 700;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.18em;
  color: #4CAF50;
}
.ksc-logo__name {
  font-weight: 800;
  font-size: clamp(11px, 1.25vw, 17px);
  color: #1B5E20;
}

.ksc-nav { gap: 2px; margin-right: 0; flex-wrap: nowrap; }
.ksc-nav__item { position: relative; }
.ksc-nav .ksc-nav__link {
  display: block;
  padding: 10px clamp(4px, 0.7vw, 14px);
  border-radius: 9999px;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 15px);
  color: #2E3D30;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}
.ksc-nav .ksc-nav__link::after { content: none; display: none; }
.ksc-nav .ksc-nav__link:hover { background: #E8F5E9; color: #2E7D32; opacity: 1; }
.ksc-nav .ksc-nav__item--current .ksc-nav__link { background: #E8F5E9; color: #2E7D32; }

/* SPナビの矢印：共通CSSは Font Awesome 5 の family 名を参照しているため v6 に合わせる */
.sp-nav__link::after { font-family: "Font Awesome 6 Free"; margin-left: 10px; }
.sp-nav__en { font-size: 1.3rem; }

.ksc-tel {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  padding: 6px 2px;
  white-space: nowrap;
  text-decoration: none;
}
.ksc-tel__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 22px);
  color: #2E7D32;
  letter-spacing: 0.02em;
}
.ksc-tel__icon { width: 0.9em; height: 0.9em; flex: 0 0 auto; }
.ksc-tel__note {
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 700;
  color: #5A6B5C;
  white-space: nowrap;
}
.ksc-tel--sp { align-items: center; }
.ksc-tel--sp .ksc-tel__num  { color: #fff; font-size: 2.4rem; }
.ksc-tel--sp .ksc-tel__note { color: rgba(255, 255, 255, 0.8); font-size: 1.2rem; }

/* ==========================================================================
   メインビュー（斜めモザイク2層クロスフェード）
   ========================================================================== */
.ksc-mv {
  position: relative;
  width: 100%;
  height: clamp(460px, 74vh, 760px);
  overflow: hidden;
  background: #E8F5E9;
}
.ksc-mv__layer {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  transform: skewX(-8deg) scale(1.18);
}
.ksc-mv__layer--a { animation: ksc-mv-a 14s ease-in-out infinite; }
.ksc-mv__layer--b { animation: ksc-mv-b 14s ease-in-out infinite; }
@keyframes ksc-mv-a { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ksc-mv-b { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }

.ksc-mv__col        { min-width: 0; overflow: hidden; background: #C8E6C9; }
.ksc-mv__col--w1    { flex: 1; }
.ksc-mv__col--w13   { flex: 1.3; }
.ksc-mv__col--w115  { flex: 1.15; }
.ksc-mv__col--split { display: grid; gap: 6px; background: none; overflow: visible; }
.ksc-mv__col--r-1-1  { grid-template-rows: 1fr 1fr; }
.ksc-mv__col--r-12-1 { grid-template-rows: 1.2fr 1fr; }
.ksc-mv__col--r-1-12 { grid-template-rows: 1fr 1.2fr; }
.ksc-mv__col--r-11-1 { grid-template-rows: 1.1fr 1fr; }
.ksc-mv__cell { overflow: hidden; background: #DCEDC8; }
.ksc-mv__cell img,
.ksc-mv__col > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: skewX(8deg) scale(1.2);
  display: block;
}
.ksc-mv__catch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ksc-mv__box {
  background: #2E7D32;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 72px);
  max-width: 1120px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(27, 94, 32, 0.25);
}
.ksc-mv__title {
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.4;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.ksc-mv__lead {
  font-size: clamp(15px, 1.6vw, 21px);
  line-height: 1.8;
  font-weight: 700;
  color: #F1F8E9;
  text-wrap: pretty;
}

/* ==========================================================================
   TOP：メインキャッチ
   ========================================================================== */
.ksc-catch__title {
  max-width: 1100px;
  margin: 0 auto 26px;
  font-size: clamp(16px, 2.9vw, 34px);
  line-height: 1.5;
  font-weight: 800;
  color: #1B5E20;
  white-space: nowrap;
}
.ksc-catch__title span { color: #C96A00; }
.ksc-catch__lead {
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 700;
  color: #3E5142;
  text-wrap: pretty;
}
.ksc-badge-free {
  display: inline-block;
  line-height: 1.45;
  margin-top: 22px;
  background: #2E7D32;
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
  padding: 16px 30px;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(27, 94, 32, 0.22);
}

/* ==========================================================================
   TOP：共感セクション（お悩み吹き出し）
   ========================================================================== */
.ksc-fukidashi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.ksc-fukidashi {
  aspect-ratio: 793 / 700;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14% 15% 24%;
}
.ksc-fukidashi--1 { background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28487/fukidashi_01.png"); }
.ksc-fukidashi--2 { background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28487/fukidashi_02.png"); }
.ksc-fukidashi__text {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.75;
  font-weight: 700;
  color: #2E3D30;
  text-align: center;
  text-wrap: pretty;
}
.ksc-onayami-img {
  width: min(420px, 72%);
  height: auto;
  display: block;
  margin: 24px auto 0;
}
.ksc-solve-band {
  margin: 24px auto 44px;
  text-align: center;
  background: #2E7D32;
  color: #fff;
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 26px);
  line-height: 1.5;
  padding: 22px 28px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ==========================================================================
   TOP：解消ポイント
   ========================================================================== */
.ksc-point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px;
}
.ksc-point {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 54px 26px 32px;
  overflow: hidden;
}
/* 左上コーナーの三角背景（strength.php の .ksc-reason__corner と同仕様） */
.ksc-point__corner {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  background: linear-gradient(135deg, #C96A00 50%, transparent 50%);
  display: block;
}
.ksc-point__num {
  position: absolute;
  left: 14px;
  top: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.ksc-point__img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}
.ksc-point__title {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 800;
  color: #1B5E20;
  margin-bottom: 14px;
}
.ksc-point__text {
  font-size: 1.6rem;
  line-height: 1.95;
  font-weight: 500;
  color: #3E5142;
}

/* PC時は見出しを中央配置 */
@media (min-width: 897px) {
  .ksc-point__title { text-align: center; }
}

/* ==========================================================================
   TOP：事業内容ピックアップ
   ========================================================================== */
.ksc-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 20px;
}
.ksc-svc {
  border-radius: 24px;
  overflow: hidden;
  background: #E8F5E9;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ksc-svc:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(76, 175, 80, 0.22); }
.ksc-svc__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  border-bottom: 4px solid #4CAF50;
}
.ksc-svc__img img,
.ksc-work__img img,
.ksc-svc-card__img img,
.ksc-ba__item img,
.ksc-gallery__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ksc-svc__body  { padding: 22px 20px 26px; }
.ksc-svc__title {
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 800;
  color: #1B5E20;
  white-space: nowrap;
  margin-bottom: 10px;
}
.ksc-svc__text {
  font-size: 1.6rem;
  line-height: 1.9;
  font-weight: 500;
  color: #3E5142;
}

/* ==========================================================================
   TOP：施工実績ピックアップ
   ========================================================================== */
.ksc-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.ksc-work {
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ksc-work:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(76, 175, 80, 0.22); }
.ksc-work__img {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #F1F8E9;
}
.ksc-work__cap {
  margin: 14px 4px 4px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 800;
  color: #1B5E20;
}

/* ==========================================================================
   TOP：代表メッセージ
   ========================================================================== */
.ksc-msg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: center;
}
.ksc-msg__photo {
  border-radius: 28px;
  background: #E8F5E9;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.ksc-msg__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ksc-msg__title {
  /* 2行で収まるサイズ（テキスト列は約半分幅のため小さめのclamp） */
  font-size: clamp(15px, 2.0vw, 22px);
  line-height: 1.6;
  font-weight: 800;
  color: #1B5E20;
  margin-bottom: 24px;
  text-wrap: pretty;
}
.ksc-msg__text {
  font-size: 1.7rem;
  line-height: 2.1;
  font-weight: 500;
  color: #3E5142;
  text-wrap: pretty;
}
.ksc-msg__text + .ksc-msg__text { margin-top: 20px; }

/* ==========================================================================
   共通CTA
   ========================================================================== */
.ksc-cta { background: #2E7D32; padding: 70px 20px; }
.ksc-cta__title {
  text-align: center;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.5;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.ksc-cta__lead {
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.95;
  font-weight: 500;
  color: #F1F8E9;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.ksc-cta__btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.ksc-cta-card {
  background: #fff;
  border-radius: 22px;
  padding: 22px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 280px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.ksc-cta-card:hover { background: #F1F8E9; opacity: 1; }
/* 白背景のセクションに置く場合の枠線付きバリエーション（thanks.php等） */
.ksc-cta-card--outline { border: 3px solid #4CAF50; }
.ksc-cta-card__label { font-weight: 800; font-size: 1.4rem; color: #C96A00; line-height: 1.4; }
.ksc-cta-card__tel   { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 3.2rem; color: #2E7D32; letter-spacing: 0.02em; line-height: 1.3; }
.ksc-cta-card__tel .ksc-tel__icon { width: 0.85em; height: 0.85em; }
.ksc-cta-card__note  { font-size: 1.3rem; font-weight: 700; color: #5A6B5C; line-height: 1.4; }
.ksc-cta-card--mail {
  background: #C96A00;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 0 #A35600;
}
.ksc-cta-card--mail:hover { background: #E07B00; }
.ksc-cta-card--mail .ksc-cta-card__label { color: #fff; }
.ksc-cta-card__mail { font-weight: 800; font-size: 2.1rem; color: #fff; line-height: 1.4; }

/* ==========================================================================
   フッター
   ========================================================================== */
.ksc-footer { background: #F1F8E9; padding: 0 0 26px; }
.ksc-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: start;
}
.ksc-footer__map {
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid #fff;
}
.ksc-footer__map iframe { width: 100%; height: 240px; border: 0; display: block; }
.ksc-footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ksc-footer__logo img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.ksc-footer__name { font-weight: 800; font-size: 1.9rem; line-height: 1.4; color: #1B5E20; }
.ksc-footer__info {
  font-size: 1.5rem;
  line-height: 1.9;
  font-weight: 500;
  color: #3E5142;
  margin-bottom: 6px;
}
.ksc-footer__info--mb { margin-bottom: 20px; }
.ksc-footer__contact {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ksc-footer__tel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  color: #2E7D32;
  text-decoration: none;
}
.ksc-footer__tel .ksc-tel__icon { width: 0.85em; height: 0.85em; }
.ksc-footer__nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.ksc-footer__nav a { font-size: 1.5rem; line-height: 1.6; font-weight: 700; color: #3E5142; text-decoration: none; }
.ksc-footer__nav a:hover { color: #C96A00; opacity: 1; }
.ksc-copyright {
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 500;
  color: #7A8A7C;
}

/* ==========================================================================
   下層：ページヒーロー
   ========================================================================== */
.ksc-page-hero {
  background: #E8F5E9 url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28487/page-hero.png") center / cover no-repeat;
  padding: 72px 20px;
}
.ksc-page-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.4;
  font-weight: 800;
  color: #1B5E20;
}

/* ==========================================================================
   事業内容ページ
   ========================================================================== */
.ksc-svc-card {
  background: #E8F5E9;
  border: 3px solid #4CAF50;
  box-shadow: 0 6px 18px rgba(27, 94, 32, 0.10);
  border-radius: 28px;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: start;
}
.ksc-svc-card__img {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.ksc-svc-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 800;
  color: #1B5E20;
  margin-bottom: 6px;
}
.ksc-svc-card__sub {
  font-size: 1.7rem;
  font-weight: 700;
  color: #C96A00;
  margin-bottom: 20px;
  line-height: 1.6;
}
.ksc-svc-card .ksc-def + .ksc-def { margin-top: 12px; }

/* ==========================================================================
   施工実績ページ
   ========================================================================== */
.ksc-case {
  border-radius: 28px;
  border: 3px solid #E8F5E9;
  padding: 32px 28px;
}
.ksc-case__tag {
  display: inline-block;
  background: #2E7D32;
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.4;
  padding: 7px 16px;
  border-radius: 9999px;
  margin-bottom: 10px;
}
.ksc-case__title {
  font-size: 2.3rem;
  line-height: 1.6;
  font-weight: 800;
  color: #1B5E20;
  margin-bottom: 22px;
  text-wrap: pretty;
}
.ksc-case__defs { display: grid; gap: 10px; }
.ksc-ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.ksc-ba__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #F1F8E9;
}
.ksc-ba__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #2E7D32;
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.4;
  padding: 6px 14px;
  border-radius: 9999px;
}
.ksc-ba__badge--after { background: #C96A00; }

.ksc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ksc-gallery__fig { margin: 0; }
.ksc-gallery__img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
/* Lightbox用リンク（クリックで拡大） */
.ksc-gallery__img a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.ksc-gallery__img img { transition: transform 0.4s ease; }
.ksc-gallery__img a:hover img { transform: scale(1.06); }

.ksc-gallery__cap {
  margin-top: 8px;
  font-weight: 700;
  color: #3E5142;
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: center;
}
.ksc-blur {
  position: absolute;
  display: block;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.35);
}
.ksc-blur--a { left: 14%; top: 15%; width: 44%; height: 32%; }
.ksc-blur--b { left: 30%; top: 44%; width: 28%; height: 15%; }

/* ==========================================================================
   私たちの強みページ
   ========================================================================== */
.ksc-h2-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.4;
  font-weight: 800;
  color: #2E3D30;
  margin-bottom: 36px;
}
.ksc-h2-num__figure {
  position: relative;
  color: #6BBF4B;
  font-size: 1.9em;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ksc-h2-num__deco {
  position: absolute;
  left: -0.42em;
  top: -0.2em;
  width: 0.42em;
  height: auto;
  display: block;
}
.ksc-strength-lead {
  max-width: 860px;
  margin: -16px auto 36px;
  text-align: center;
  font-size: 1.9rem;
  line-height: 2.1;
  font-weight: 700;
  color: #3E5142;
  text-wrap: pretty;
}
.ksc-reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 26px;
}
.ksc-reason {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(27, 94, 32, 0.10);
  padding: 38px 34px 34px;
  overflow: hidden;
}
.ksc-reason__corner {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  background: linear-gradient(135deg, #4CAF50 50%, transparent 50%);
  display: block;
}
.ksc-reason__num {
  position: absolute;
  left: 14px;
  top: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.ksc-reason__head {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}
.ksc-reason__icon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #EDF6E9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ksc-reason__icon img { width: 112%; max-width: none; height: auto; display: block; }
.ksc-reason__title {
  font-size: 2rem;
  line-height: 1.8;
  font-weight: 800;
  color: #2E7D32;
  text-wrap: pretty;
}
.ksc-reason .ksc-dash-line { margin-bottom: 20px; }
.ksc-reason__text {
  font-size: 1.5rem;
  line-height: 1.95;
  font-weight: 500;
  color: #4A5A4C;
}

/* ==========================================================================
   会社概要・お問い合わせページ
   ========================================================================== */
.ksc-dl { display: grid; }
.ksc-dl__row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 2px solid #E8F5E9;
}
.ksc-dl__row dt { font-weight: 800; color: #1B5E20; font-size: 1.6rem; line-height: 1.8; }
.ksc-dl__row dd { font-size: 1.6rem; line-height: 1.8; font-weight: 500; color: #3E5142; }
.ksc-tel-inline { font-weight: 700; font-size: 2rem; line-height: 1.4; color: #2E7D32; text-decoration: none; }

.ksc-map {
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid #E8F5E9;
}
.ksc-map iframe { width: 100%; height: 380px; border: 0; display: block; }

.ksc-form-note {
  max-width: 640px;
  margin: 0 auto 34px;
  text-align: center;
  background: #C96A00;
  color: #fff;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.8;
  padding: 18px 24px;
  border-radius: 18px;
}
.ksc-form {
  background: #fff;
  border-radius: 28px;
  padding: 36px 30px;
  display: grid;
  gap: 22px;
}
.ksc-form__label { display: grid; gap: 8px; }
.ksc-form__name  { font-weight: 800; font-size: 1.6rem; color: #1B5E20; line-height: 1.6; }
.ksc-req { color: #C96A00; }
.ksc-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.6rem;
  padding: 15px 16px;
  border: 2px solid #C8E6C9;
  border-radius: 14px;
  background: #fff;
  color: #2E3D30;
  outline: none;
  transition: border-color 0.3s ease;
}
.ksc-input:focus { border-color: #4CAF50; }
textarea.ksc-input { line-height: 1.8; resize: vertical; }
.ksc-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 16px;
}
.ksc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 700;
  color: #3E5142;
  cursor: pointer;
}
.ksc-check input { accent-color: #4CAF50; width: 18px; height: 18px; }

/* ==========================================================================
   レスポンシブ調整
   ========================================================================== */
@media (max-width: 1100px) {
  .ksc-header__inner { padding: 10px 16px; }
  .ksc-header__group { margin-left: auto; padding-right: 50px; }
}

@media (max-width: 896px) {
  /* .ksc-section を先に上書きしたあと、余白modifierを再宣言して打ち消されるのを防ぐ */
  .ksc-section        { padding: 56px 18px; }
  .ksc-section--pt-sm { padding-top: 20px; }
  .ksc-section--pb-sm { padding-bottom: 34px; }
  .ksc-section--pt-70 { padding-top: 50px; }
  .ksc-section--pt-60 { padding-top: 44px; }
  .ksc-section--pb-30 { padding-bottom: 26px; }
  .ksc-section--pb-50 { padding-bottom: 38px; }
  .ksc-section--pb-60 { padding-bottom: 44px; }
  .ksc-section--pb-90 { padding-bottom: 64px; }
  .ksc-page-hero      { padding: 54px 18px; }
  .ksc-svc-card       { padding: 26px 22px; }
  .ksc-reason         { padding: 30px 24px 26px; }
  .ksc-form           { padding: 28px 20px; }
  .ksc-msg            { grid-template-columns: 1fr; }
  /* SPは本文まわりを左寄せ */
  .ksc-catch__title   { text-align: left; }
  .ksc-catch__lead    { text-align: left; }
  .ksc-lead-center    { text-align: left; }
  .ksc-strength-lead  { text-align: left; }
  /* SPはフッターナビ非表示（ハンバーガーメニューから遷移） */
  .ksc-footer__nav    { display: none; }
  .ksc-footer__inner  { padding: 44px 18px; gap: 32px; }
  .ksc-cta            { padding: 56px 18px; }
  .ksc-copyright      { padding-bottom: 60px; }
}

@media (max-width: 639px) {
  /* MVはSPで2×2の4分割グリッド表示（各レイヤーの先頭4枚を使用） */
  .ksc-mv__layer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    transform: skewX(-8deg) scale(1.3);
  }
  .ksc-mv__col--split { display: block; }
  .ksc-mv__col--split .ksc-mv__cell { height: 100%; }
  .ksc-mv__col--split .ksc-mv__cell + .ksc-mv__cell { display: none; }

  /* MVキャッチはSPで5行（見出し3行＋リード2行）に収める */
  .ksc-mv__catch          { padding: 12px; }
  .ksc-mv__box            { padding: 22px 16px; }
  .ksc-mv__title          { font-size: clamp(16px, 5vw, 24px); line-height: 1.5; margin-bottom: 10px; }
  .ksc-mv__lead           { font-size: clamp(11px, 3.5vw, 15px); line-height: 1.7; }
  .ksc-catch__title       { white-space: normal; }
  /* 【ご相談・現地調査・お見積もりは完全無料】をSPでも1行に収める */
  .ksc-badge-free         { font-size: clamp(11px, 3.7vw, 20px); padding: 12px 16px; white-space: nowrap; }
  .ksc-solve-band         { white-space: normal; }
  .ksc-svc__title         { white-space: normal; }
  .ksc-reason__head       { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ksc-dl__row            { grid-template-columns: 1fr; gap: 4px; }
  .ksc-cta-card           { min-width: 0; width: 100%; padding: 20px 18px; }
  .ksc-cta-card__tel      { font-size: 2.6rem; }
  /* 「無料お見積もり・ご相談フォームへ」をSPでも1行に収める */
  .ksc-cta-card__mail     { font-size: clamp(13px, 4.8vw, 21px); white-space: nowrap; }
  .ksc-btn                { font-size: 1.6rem; padding: 16px 24px; }
  .ksc-btn--base          { padding: 16px 28px; }
  /* SPは縦積み（1列なので幅は自動的に揃う） */
  .ksc-btn-row--equal     { grid-auto-flow: row; grid-auto-columns: auto; }
  .ksc-footer__tel        { font-size: 2.4rem; }
  .ksc-gallery            { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   ページトップボタン（main.css の #ec6800 / #008dd8 をサイト配色に上書き）
   ========================================================================== */
.page-top__link {
  background: #2E7D32;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 0 #1B5E20, 0 6px 16px rgba(27, 94, 32, 0.25);
}
.page-top__link:hover {
  background: #5CBF60;
  color: #fff;
  box-shadow: 0 4px 0 #1B5E20, 0 8px 20px rgba(27, 94, 32, 0.3);
}

@media (max-width: 896px) {
  /* SP固定バー（高さ約48px）と重ならない位置へ */
  .page-top { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   CMSフォーム（design_pattern=2）をサイト配色に合わせる上書き
   ※CMS側のCSSが後から効くため !important 必須
   ========================================================================== */
/* 「必須」バッジ：赤 #ff4f4f → サイトのアクセントカラー */
.form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before {
  color: #fff !important;
  background: #C96A00 !important;
}

/* 送信ボタン：サイト共通の立体pillボタン（.ksc-btn--accent 相当）＋中央配置 */
.form-pattern-2 .submit-btn,
.submit-btn {
  display: block !important;
  margin: 30px auto 0 !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 100% !important;
  padding: 19px 52px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #C96A00 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 1.9rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 0 #A35600 !important;
  transition: background 0.3s ease !important;
}
.form-pattern-2 .submit-btn:hover,
.submit-btn:hover {
  background: #E07B00 !important;
  color: #fff !important;
  opacity: 1 !important;
}

@media (max-width: 639px) {
  .form-pattern-2 .submit-btn,
  .submit-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 17px 24px !important;
    font-size: 1.7rem !important;
  }
}

/* 送信ボタン内のメールアイコン（::before）：通常時・hover時とも白で固定
   ※CMS側は .form-pattern2（ハイフン無し）と .form-pattern-2 が混在しているため両方指定 */
.form-pattern2 .submit-btn::before,
.form-pattern-2 .submit-btn::before,
.submit-btn::before,
.form-pattern2 .submit-btn:hover::before,
.form-pattern-2 .submit-btn:hover::before,
.submit-btn:hover::before {
  background-color: #fff !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ==========================================================================
   ハンバーガーメニュー（共通テンプレートのオレンジ配色をサイトのグリーンに）
   ========================================================================== */
.sp-nav {
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.97), rgba(27, 94, 32, 0.98));
}
.sp-nav__link:hover { background: rgba(255, 255, 255, 0.12); }

/* トグルボタン：閉じている間はグリーン、開いている間は白×グリーン */
.nav-toggle {
  background: rgba(46, 125, 50, 0.92);
  box-shadow: 0 3px 10px rgba(27, 94, 32, 0.25);
}
.nav-toggle__line { background: #fff; }
.nav-toggle.is-active { background: rgba(255, 255, 255, 0.95); }
.nav-toggle.is-active .nav-toggle__line { background: #2E7D32; }