@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .crc-inner*        - 左右24px固定パディング付きコンテナ（1180/1320/1000/980/900/840）
 * .crc-sec*          - 元データ固有の可変セクション余白（clamp）
 * .crc-shead*        - 中央寄せセクション見出しブロック（下余白バリエーション／--flush）
 * .crc-stack*        - 縦積みブロック（gap 22px ／ --lg は clamp）
 * .crc-h2 / .crc-h3* - 可変（clamp）見出しサイズ（__small / __num は入れ子の小文字・数字）
 * .crc-lead / .crc-body / .crc-note / .crc-msg - 可変・固定の本文サイズ
 * .crc-marker        - 黄色のハーフハイライト（linear-gradient 60%）
 * .crc-bullet*       - ●付き箇条書き（黄／赤）
 * .crc-btn*          - pillボタン（yellow/navy/line/ghost × xs/sm/sm2/md/md2/md3/lg/xl/form）
 * .crc-lineico       - ボタン内のLINEアイコン（白角丸バッジ）
 * .crc-header / .crc-logo / .crc-nav / .crc-hright / .crc-telbox - ヘッダー（sticky・1段）
 * .crc-spnav*        - SPナビの配色とフッターCTA
 * .crc-mv*           - メインビュー（CMSスライダー差し替え前提の静止画枠＋テキスト重ね）
 * .crc-hero*         - 下層ページヒーロー（黄色＋斜線＋円＋紺ルール）
 * .crc-reason*       - 番号が左上にはみ出す理由カード
 * .crc-worry*        - お悩みチェックリスト（白カード行）
 * .crc-service*      - 事業内容カード（画像＋本文＋ボタン）
 * .crc-step*         - 4ステップカード（上ボーダー＋矢印コネクタ）
 * .crc-line*         - LINE相談帯（赤背景CTA）
 * .crc-split*        - 画像＋テキストの可変2カラム
 * .crc-md*           - メリット／デメリットの対比2カラムボックス
 * .crc-commit*       - 円番号＋見出し＋本文の横並びカード
 * .crc-flow*         - 10ステップの縦フロー（円番号＋縦線＋白カード）
 * .crc-paint*        - 塗料の耐久年数チャート（段差バー＋軸ラベル）
 * .crc-costlist*     - 費用の箇条書き（白／クリームカード行）
 * .crc-works*        - 施工事例カード（施工前後2分割＋カテゴリタブ）
 * .crc-way*          - お問い合わせ窓口カード（LINE強調枠＋2カード）
 * .crc-cstep*        - ご依頼の流れ6ステップ（左ボーダーカード）
 * .crc-qa*           - よくあるご質問（常時展開のQ/Aブロック）
 * .crc-form*         - お問い合わせフォーム
 * .crc-profile*      - 会社概要テーブル（dl）
 * .crc-map*          - アクセスマップ枠（__address ／ --placeholder）
 * .crc-footer* / .crc-copy - フッター（3カラムグリッド＋コピーライト）
 * .crc-bar*          - 下部固定バー（全ブレイクポイント表示）
 * .crc-ptop          - ページトップボタン（固定バー分の位置調整）
 *
 * CSSカスタムプロパティ
 * --crc-inner        - .crc-inner の最大幅
 * --crc-bar-h        - 下部固定バーの実測高（common.js が html に設定）
 * --crc-bar-space    - body 下余白＝max(104px, --crc-bar-h)
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ■ 値の粒度不足
 *   - clamp() ベースの流体タイポグラフィ／流体セクション余白が無い（fz-* は固定rem刻み、
 *     .section は固定px）。元データは全面 clamp 指定のため .crc-h2 / .crc-sec 系で補完。
 *   - コンテナの左右パディング（元データは常時24px）。.container は wide以下でのみ10px。
 *   - grid の auto-fit minmax（288/300/320/290/220px）指定が無い。grid-2/3/4 は固定列数。
 *
 * ■ 指定方向不足
 *   - position:sticky ヘッダーが無い（header-bar=fixed / header-sticky=absolute+JS）。
 *     元データは sticky のため .crc-header で補完。
 *   - 下部固定バーが SP 限定（.sp-fixed-bar は min-tablet で display:none）。
 *     元データは全幅・全ブレイクポイント表示のため .crc-bar で補完。
 *
 * ■ 状態不足
 *   - なし（hover は共通の hover-* utility ＋ 各 .crc-btn に定義）
 *
 * ■ 構造不足
 *   - 番号がカード枠外へはみ出すカード（.crc-reason）。
 *   - 円番号＋縦線でつなぐ10ステップ縦フロー（.crc-flow）。card-numbered--connector は
 *     20px固定の短い線でカード高に追従しない。
 *   - 施工前後を左右2分割で見せる事例カード（.crc-works__ba）。
 *   - 段差＋2軸ラベル付きの塗料チャート（.crc-paint）。
 *   - 常時展開のQ/Aブロック（accordion--qa は JS 開閉前提）。
 *
 * ■ 装飾パターン不足
 *   - 45度の斜線パターン＋大円のヒーロー背景（.crc-hero__stripe / __circle）。
 *     bg-stripe は -45deg・0.03固定で角度と濃度が合わない。
 *   - テキスト下半分だけを塗るハーフハイライト（.crc-marker）。marker は 70% から
 *     rgba 0.3 のため元データ（60%からベタ塗り）と一致しない。
 *
 * ======================================
 */

/* ==========================================================================
   0. 土台
   ========================================================================== */

/* 共通SCSSの疑似要素アイコンは "Font Awesome 5 Free" 指定。
   本サイトは FA6 を読み込むためファミリ名が異なる。FA6 にフォールバックさせる。 */
.header__tel::before,
.btn-cta-tel::before,
.btn-cta-mail::before,
.footer-cta__tel::before,
.footer-cta__mail::before,
.sp-nav__link::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
}

/* 下部固定バーの高さ分を確保。実測値は common.js が --crc-bar-h に入れる
   （バーはボタンの折り返しで高さが変わるため、固定値では足りない幅がある） */
body {
  /* --crc-bar-space: max(104px, var(--crc-bar-h, 104px)); */
  padding-bottom: var(--crc-bar-space, var(--crc-bar-h, 104px));
}

a { color: #1C3D5A; }
a:hover { color: #C22E10; opacity: 1; }

/* ==========================================================================
   1. レイアウト（コンテナ／セクション余白）
   ========================================================================== */

.crc-inner {
  width: 100%;
  max-width: var(--crc-inner, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.crc-inner--wide { --crc-inner: 1320px; }
.crc-inner--1000 { --crc-inner: 1000px; }
.crc-inner--980  { --crc-inner: 980px; }
.crc-inner--900  { --crc-inner: 900px; }
.crc-inner--840  { --crc-inner: 840px; }

/* セクション上下余白（元データの clamp をそのまま再現） */
.crc-sec          { padding: clamp(56px, 7vw, 104px) 0; }
.crc-sec--sub     { padding: clamp(56px, 7vw, 96px) 0; }
.crc-sec--intro   { padding: clamp(44px, 5.5vw, 80px) 0; }
.crc-sec--md      { padding: clamp(48px, 6vw, 88px) 0; }

/* 中央寄せ見出しブロック */
.crc-shead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.crc-shead--flush { margin-bottom: 0; }
.crc-shead--48 { margin-bottom: clamp(28px, 3.4vw, 48px); }
.crc-shead--44 { margin-bottom: clamp(28px, 3.4vw, 44px); }
.crc-shead--40 { margin-bottom: clamp(24px, 3vw, 40px); }

/* 縦積みブロック（リード文セクション等） */
.crc-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.crc-stack--lg { gap: clamp(24px, 2.6vw, 40px); }

/* ==========================================================================
   2. タイポグラフィ
   ========================================================================== */

.crc-h2 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(20px, 3.2vw, 38px);
  line-height: 1.5;
}
.crc-h2--sub  { font-size: clamp(21px, 2.8vw, 34px); }
.crc-h2--lead { font-size: clamp(21px, 2.9vw, 34px); line-height: 1.55; }
.crc-h2--col  { font-size: clamp(21px, 2.6vw, 32px); line-height: 1.55; }
/* SPは1カラムになるので画像・本文と揃えて中央寄せ */
@media (max-width: 639px) {
  .crc-split__body .crc-h2--col { text-align: center; }
}
.crc-h2--wide { font-size: clamp(21px, 2.8vw, 34px); line-height: 1.6; text-wrap: balance; }
.crc-h2--tall { font-size: clamp(18px, 2.6vw, 32px); line-height: 1.6; }
.crc-h2__small { font-size: .7em; }
.crc-h2__num { color: #F7CF00; font-size: 1.5em; line-height: 1; }

.crc-h3 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}
/* 見出し内の全角カッコ書き（補足表記） */
.crc-paren { font-size: .8em; }
/* 見出し上のキッカー（黄色バー＋赤の小見出し。本題の前置きを別デザインで見せる） */
.crc-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #C22E10;
  font-size: .62em;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.5;
}
.crc-kicker::before {
  content: "";
  flex: none;
  width: 32px;
  height: 4px;
  background: #F7CF00;
}
/* 見出しの2行目以降（強調ライン） */
.crc-head-accent {
  display: inline-block;
  color: #C22E10;
  font-size: 1.2em;
}
.crc-h3--md   { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; }
.crc-h3--sm   { font-size: clamp(15px, 1.4vw, 18px); }
.crc-h3--box  { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }
.crc-h3--card { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.55; }
.crc-h3--way  { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; text-wrap: normal; }
.crc-h3__small { font-size: .75em; }

.crc-lead {
  margin: 0;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 2.05;
  color: #4C6478;
  text-wrap: pretty;
}
.crc-body {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 2;
  color: #4C6478;
  text-wrap: pretty;
}
.crc-body--sm { font-size: 13.5px; line-height: 1.95; }
.crc-body--xs { font-size: 13px; line-height: 1.9; }
/* 代表メッセージ本文（元データは 14.5px/2.05 固定） */
.crc-msg {
  margin: 0;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 2.05;
  color: #4C6478;
  text-wrap: pretty;
}
.crc-note {
  margin: 0;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.8;
  color: #4C6478;
}

/* PCのときだけ改行する <br>（SPでは詰めて自然折り返し） */
.crc-br-pc { display: inline; }
@media (max-width: 896px) {
  .crc-br-pc { display: none; }
}
/* SPのときだけ改行する <br> */
.crc-br-sp { display: none; }
@media (max-width: 639px) {
  .crc-br-sp { display: inline; }
}

/* 下半分だけ塗るハーフハイライト */
.crc-marker { background: linear-gradient(transparent 60%, #F7CF00 60%); }

/* ●付き箇条書き */
.crc-bullet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crc-bullet__item {
  display: flex;
  gap: 14px;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.95;
  color: #4C6478;
  text-wrap: pretty;
}
/* 元データの ● 相当。行ボックスは元データと同じ 16px/1.8 のまま、
   FontAwesome の円は ● より大きいので transform で視覚サイズを合わせる（レイアウトに影響しない） */
.crc-bullet__item::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1.8;
  width: 16px;
  display: inline-block;
  text-align: center;
  transform: scale(.66);
  color: #F7CF00;
  flex: none;
}
.crc-bullet--accent .crc-bullet__item::before { color: #C22E10; }
.crc-bullet--line .crc-bullet__item::before { color: #06C755; }

/* ==========================================================================
   3. ボタン
   ========================================================================== */

.crc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.crc-btn:hover { opacity: 1; }

/* -- 色 */
.crc-btn--yellow { background: #F7CF00; color: #1C3D5A; }
.crc-btn--yellow:hover { background: #E0B400; color: #1C3D5A; }
.crc-btn--navy { background: #1C3D5A; color: #fff; }
.crc-btn--navy:hover { background: #35648A; color: #fff; }
.crc-btn--line { background: #06C755; color: #fff; }
.crc-btn--line:hover { background: #05A948; color: #fff; }
.crc-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid #fff;
  font-weight: 700;
}
.crc-btn--ghost:hover { background: #fff; color: #C22E10; }

/* -- サイズ */
.crc-btn--xs  { padding: 13px 20px; font-size: 13px; }
.crc-btn--sm  { padding: 14px 24px; font-size: 13px; font-weight: 700; }
.crc-btn--sm2 { padding: 15px 24px; font-size: 13.5px; white-space: nowrap; }
.crc-btn--md  { padding: 16px 24px; font-size: 13.5px; }
.crc-btn--md2 { padding: 16px 30px; font-size: 14px; }
.crc-btn--md3 { padding: 16px 26px; font-size: 14px; }
.crc-btn--lg  { padding: 17px 26px; font-size: clamp(13px, 1.15vw, 15.5px); line-height: 1.3; gap: 10px; }
.crc-btn--xl  { padding: 21px 26px; font-size: clamp(14px, 1.4vw, 18.5px); line-height: 1.4; gap: 12px; }
.crc-btn--block { width: 100%; }
.crc-btn--form {
  align-self: center;
  width: min(100%, 420px);
  padding: 24px;
  font-size: clamp(15px, 1.5vw, 19px);
  box-shadow: 0 12px 26px rgba(247, 207, 0, .3);
}

/* -- 影付き（元データの主要CTA） */
.crc-btn--shadow-line { box-shadow: 0 12px 26px rgba(6, 199, 85, .28); }
.crc-btn--shadow-yellow { box-shadow: 0 12px 26px rgba(247, 207, 0, .26); }

.crc-btn__chev { font-size: .8em; margin-left: -2px; }
.crc-btn__tel-ico { font-size: .95em; }

/* LINEアイコン（白背景バッジなし・アイコン自体を白抜き） */
.crc-lineico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.crc-btn--xs .crc-lineico { font-size: 18px; }
.crc-btn--lg .crc-lineico { font-size: 22px; }
.crc-btn--xl .crc-lineico { font-size: 25px; }

/* ==========================================================================
   4. ヘッダー
   ========================================================================== */

.crc-header {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 14px rgba(28, 61, 90, .09);
}
.crc-header .header__inner {
  max-width: 1320px;
  height: auto;
  padding: 14px 24px;
  gap: clamp(16px, 2.5vw, 40px);
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .crc-header .header__inner { height: auto; }
}

.crc-logo { gap: 0; }
.crc-logo .header-logo__name {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  color: #1C3D5A;
}
/* ロゴ画像。共通CSSの .header__logo img（40px / 639px以下30px）を上書きする */
.header__logo img {
  display: block;
  width: auto;
  height: 60px;
}
@media (max-width: 639px) {
  .header__logo img { height: 52px; }
}

.crc-nav {
  margin-left: 0;
  margin-right: auto;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 26px);
}
.crc-nav .header__nav-item a {
  flex-direction: row;
  padding: 10px 0 8px;
  border-bottom: 3px solid transparent;
}
.crc-nav .header__nav-item a::after { display: none; }
.crc-nav .header__nav-ja {
  margin-top: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: #5A7488;
  white-space: nowrap;
  transition: color .3s ease;
}
.crc-nav .header__nav-item a:hover .header__nav-ja { color: #1C3D5A; }
.crc-nav .header__nav-item--current a { border-bottom-color: #F7CF00; }
.crc-nav .header__nav-item--current .header__nav-ja { color: #1C3D5A; }

.crc-hright {
  height: auto;
  gap: 12px;
  flex-wrap: wrap;
}
.crc-telbox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.crc-telbox .header__tel {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .02em;
}
.crc-telbox .header__tel::before { font-size: .9em; margin-right: 7px; }
.crc-telbox__note {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4C6478;
  white-space: nowrap;
}

/* SPナビ（共通は rgba 0.97 で背面が薄く透ける。本サイトは不透過にする） */
.crc-spnav { background: linear-gradient(135deg, #1C3D5A, #0A1520); }
.crc-spnav__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
}
.crc-spnav__tel {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.crc-spnav__tel:hover { color: #F7CF00; }
.crc-spnav__tel i { font-size: .7em; }
.crc-spnav__note {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 6px;
}

/* ==========================================================================
   5. メインビュー
   ========================================================================== */

/* 外枠の高さをレスポンシブで明示し、内側の #slideshow は height:100% で追従させる。
   （CMSスライダーは height:100% で外枠に合わせる仕様のため） */
.crc-mv {
  position: relative;
  display: grid;
  grid-template-areas: "mv" "rule";
  grid-template-rows: minmax(647px, auto) auto;
  background: #1C3D5A;
  overflow: hidden;
}
/* #slideshow（外枠）の高さはレスポンシブで明示する。CMSスライダーは height:100% で
   外枠に追従する仕様のため、明示しないと内部の 100vh / auto が効いてしまう。
   min-height:100% はMVテキストが枠より高くなったときの保険。
   z-index:0 で CMSスライダー内部の z-index（矢印 z:5 等）を枠内に閉じ込める。 */
.crc-mv__slider {
  grid-area: mv;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 647px;
  min-height: 100%;
  overflow: hidden;
}
/* CMSの挿入先（#cms-slider-1-1-area）は高さ auto。%高さの連鎖を通すため 100% にする */
.crc-mv__slider > div,
.crc-mv__slider .swiper,
.crc-mv__slider .swiper-wrapper,
.crc-mv__slider .swiper-slide,
.crc-mv__slider .main_slider__inner { width: 100%; height: 100%; }
.crc-mv__slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.crc-mv__veil {
  grid-area: mv;
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg, rgba(28, 61, 90, .74) 0%, rgba(28, 61, 90, .45) 48%, rgba(28, 61, 90, 0) 100%);
}
.crc-mv__body {
  grid-area: mv;
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: clamp(60px, 8vw, 130px);
  padding-bottom: clamp(52px, 6vw, 104px);
}
.crc-mv__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 999px;
  background: #F7CF00;
  color: #1C3D5A;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
}
.crc-mv__title {
  margin: 0;
  max-width: 20em;
  font-size: clamp(28px, 5.4vw, 68px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: .005em;
  color: #fff;
  text-wrap: balance;
}
.crc-mv__title span { color: #F7CF00; }
.crc-mv__copy {
  margin: 0;
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 900;
  line-height: 1.8;
  color: #fff;
}
.crc-mv__text {
  margin: 0;
  max-width: 44em;
  font-size: clamp(13.5px, 1.15vw, 16px);
  font-weight: 400;
  line-height: 2.05;
  color: rgba(255, 255, 255, .84);
  text-wrap: pretty;
}
/* CMSスライダー（cms_id=11）は既定で --swiper-wrapper-height:100vh。
   外枠（#slideshow）に追従させる */
#slideshow #main_slider.slider_wrapper { --swiper-wrapper-height: 100%; }
/* キャッチ用レイヤー（.main_catch__outer / z-index:3）はCMSにキャッチ未登録だと
   空のまま画像の上に重なる。クリックを透過させ、MVテキストの操作を邪魔しない。
   ※MVのテキストは #slideshow（z-index:0＝スタッキングコンテキスト）の外側にあるため
     キャッチレイヤーより常に上に描画される */
#slideshow .main_catch__outer { pointer-events: none; }
.crc-mv__rule {
  grid-area: rule;
  display: block;
  height: 10px;
  background: #F7CF00;
}
@media (max-width: 896px) {
  .crc-mv { grid-template-rows: minmax(520px, auto) auto; }
}
@media (max-width: 639px) {
  .crc-mv { grid-template-rows: minmax(420px, auto) auto; }
}

/* ==========================================================================
   6. 下層ページヒーロー
   ========================================================================== */

.crc-hero { background: #F7CF00; }
/* 背景写真つき（$heroImg 指定時）。ブランドの黄色を保ちつつ右側に写真を見せる */
.crc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 背景写真を下へずらす（＝写真の上側が見えるようにする）／上へずらす。
   -sm は控えめ、指定なしは中央。 */
.crc-hero--shift-down    .crc-hero__bg { object-position: center top; }
.crc-hero--shift-down-sm .crc-hero__bg { object-position: center 25%; }
.crc-hero--shift-up-sm   .crc-hero__bg { object-position: center 31%; }
.crc-hero--shift-up      .crc-hero__bg { object-position: center bottom; }
/* 写真の上のレイヤーは暗く・薄く（写真を活かしてタイトルは白抜き） */
.crc-hero--photo { background: #1C3D5A; }
.crc-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 38, 58, .72) 0%, rgba(16, 38, 58, .54) 45%, rgba(16, 38, 58, .38) 100%);
}
.crc-hero--photo .crc-hero__title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(10, 24, 36, .35);
}
@media (max-width: 639px) {
  /* SPは横幅が狭いので上下方向のグラデーションにする */
  .crc-hero__veil {
    background: linear-gradient(180deg, rgba(16, 38, 58, .68) 0%, rgba(16, 38, 58, .52) 55%, rgba(16, 38, 58, .44) 100%);
  }
}
.crc-hero__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(72px, 9vw, 130px);
  padding-bottom: clamp(64px, 8vw, 116px);
}
.crc-hero__title {
  margin: 0;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #1C3D5A;
}

/* ==========================================================================
   7. TOP：選ばれる理由（番号はみ出しカード）
   ========================================================================== */

.crc-reason {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: clamp(12px, 1.1vw, 16px);
}
.crc-reason__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 22px 0 0 14px;
  padding: clamp(24px, 2.2vw, 32px);
  background: #fff;
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(28, 61, 90, .07);
  transition: box-shadow .3s ease, transform .3s ease;
}
.crc-reason__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(28, 61, 90, .12);
}
/* SPでは左のインデントを詰める（1列表示なので段差をつける必要がない） */
@media (max-width: 639px) {
  .crc-reason__item { margin: 22px 0 0 0; }
}
/* 原稿で指定した改行位置（<br>）が列幅に収まるサイズにする＋タイトルは中央寄せ */
.crc-reason__item .crc-h3 {
  font-size: clamp(16px, 1.4vw, 17px);
  text-align: center;
}
.crc-reason__num {
  position: absolute;
  left: -14px;
  top: -26px;
  font-family: "Noto Sans", sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: #F7CF00;
}
.crc-reason__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #EAEFF4;
  display: block;
}
.crc-reason__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}


/* ==========================================================================
   8. TOP：お悩みリスト
   ========================================================================== */

.crc-worry {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crc-worry__item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px 26px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(28, 61, 90, .06);
}
.crc-worry__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #1C3D5A;
  color: #F7CF00;
  font-size: 15px;
  flex: none;
}
.crc-worry__text {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.8;
  text-wrap: pretty;
}
.crc-worry__lead {
  margin: 28px 0 0;
  text-align: center;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 900;
  line-height: 1.9;
}

/* ==========================================================================
   9. TOP：事業内容カード
   ========================================================================== */

.crc-service {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2vw, 30px);
}
/* カード全体が詳細ページへのリンク */
.crc-service__item {
  display: flex;
  flex-direction: column;
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(28, 61, 90, .07);
  transition: box-shadow .3s ease, transform .3s ease;
  color: inherit;
  text-decoration: none;
}
.crc-service__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(28, 61, 90, .12);
  color: inherit;
  opacity: 1;
}
.crc-service__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EAEFF4;
  display: block;
}
.crc-service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.crc-service__item:hover .crc-service__img img { transform: scale(1.05); }
.crc-service__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  flex: 1;
}
.crc-service__text { flex: 1; }
/* タイトル行：左に見出し、右に四角の矢印ボタン */
.crc-service__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.crc-service__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 30px;
  background: #1C3D5A;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  transition: background .3s ease;
}
.crc-service__item:hover .crc-service__arrow { background: #35648A; }

/* ==========================================================================
   10. TOP：ご相談・お見積りの流れ（4ステップ）
   ========================================================================== */

.crc-step {
  --step-gap: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--step-gap);
}
.crc-step__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  background: #fff;
  border-radius: 8px;
  border-top: 6px solid #F7CF00;
}
.crc-step__label {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  color: #C22E10;
}
.crc-step__text { flex: 1; }
/* ステップ間の矢印。同じ行に次のカードがあれば右向き、1列表示のときだけ下向き（JSで判定） */
.crc-step__arrow {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  color: #C22E10;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.crc-step__arrow.is-right {
  display: flex;
  top: 50%;
  right: calc(-1 * var(--step-gap));
  width: var(--step-gap);
  transform: translateY(-50%);
}
.crc-step__arrow.is-down {
  display: flex;
  left: 50%;
  bottom: calc(-1 * var(--step-gap));
  height: var(--step-gap);
  transform: translateX(-50%) rotate(90deg);
}

/* ==========================================================================
   11. LINE相談帯
   ========================================================================== */

.crc-line {
  background: #C22E10;
  /* 元データは帯側に左右24pxを持ち、内側1000pxは内容幅そのまま */
  padding: clamp(48px, 7vw, 88px) 24px;
  color: #fff;
}
.crc-line .crc-inner { padding-left: 0; padding-right: 0; }
.crc-line__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.crc-line__title {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .01em;
  text-wrap: balance;
}
.crc-line__text {
  margin: 0;
  max-width: 760px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 2;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
}
/* SPは中央寄せだと読みにくいので左揃え */
@media (max-width: 639px) {
  .crc-line__text { text-align: left; }
}
.crc-line__btn {
  width: min(100%, 560px);
  box-shadow: 0 14px 30px rgba(6, 199, 85, .34);
}
.crc-line__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 40px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  width: min(100%, 760px);
}
.crc-line__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 22px;
}
.crc-line__tel-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
}
.crc-line__tel-num {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #fff;
  text-decoration: none;
}
.crc-line__tel-num:hover { color: #F7CF00; }
.crc-line__tel-note { font-size: 12px; font-weight: 400; line-height: 1.7; }

/* ==========================================================================
   12. 下層共通：画像＋テキストの2カラム
   ========================================================================== */

.crc-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
}
.crc-split--top { align-items: start; }
.crc-split--sm { gap: clamp(24px, 3vw, 48px); }
.crc-split--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.crc-split__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.crc-split__img {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.crc-split__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* 代表メッセージ横の写真。縦長すぎないよう比率を抑える */
.crc-split__img--portrait img { aspect-ratio: 4 / 4.2; }
@media (max-width: 639px) {
  .crc-split__img--portrait img { aspect-ratio: 4 / 3; }
}

.crc-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

/* ==========================================================================
   13. 下層共通：メリット／デメリット
   ========================================================================== */

.crc-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2vw, 30px);
}
.crc-md__box {
  background: #fff;
  border-radius: 10px;
  padding: clamp(24px, 2.2vw, 34px);
  border-top: 8px solid #F7CF00;
  box-shadow: 0 12px 32px rgba(28, 61, 90, .12);
}
.crc-md__box--dark {
  background: #1C3D5A;
  color: #fff;
  border-top-color: #92A9BC;
}
.crc-md__title { margin: 0 0 20px; }
.crc-md__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.crc-md__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crc-md__dt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.6;
}
.crc-md__dt i { flex: none; color: #C22E10; font-size: 15px; line-height: 1.6; }
.crc-md__dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.9;
  color: #4C6478;
  text-wrap: pretty;
}
.crc-md__box--dark .crc-md__dt { color: #F7CF00; }
.crc-md__box--dark .crc-md__dd { color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   14. 下層共通：こだわり／強み（円番号カード）
   ========================================================================== */

.crc-commit {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
.crc-commit__item {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: center;
  padding: clamp(22px, 2vw, 30px);
  background: #fff;
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(28, 61, 90, .06);
}
.crc-commit__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F7CF00;
  color: #1C3D5A;
  font-family: "Noto Sans", sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  flex: none;
}
.crc-commit__body {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crc-commit__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  color: #4C6478;
  text-wrap: pretty;
}
/* SP：番号が単独で1行を占めて右に余白ができるのを防ぐ。
   「番号＋見出し」を同じ行に置き、本文は下段で全幅に流す。 */
@media (max-width: 639px) {
  .crc-commit__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
  }
  .crc-commit__num {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }
  .crc-commit__body { display: contents; }
  .crc-commit__body > .crc-h3 { grid-column: 2; }
  .crc-commit__text { grid-column: 1 / -1; }
}

/* ==========================================================================
   15. 下層共通：施工の流れ（10ステップ縦フロー）
   ========================================================================== */

.crc-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
}
.crc-flow__item { display: flex; gap: 18px; }
.crc-flow__rail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 38px;
}
.crc-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F7CF00;
  color: #1C3D5A;
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  flex: none;
}
.crc-flow__line {
  flex: 1;
  width: 3px;
  min-height: 20px;
  background: #F7CF00;
}
.crc-flow__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 18px 22px;
  background: #fff;
  border-radius: 8px;
}
.crc-flow__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
}

/* ==========================================================================
   16. 外壁塗装：塗料の種類チャート
   ========================================================================== */

.crc-paint {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.crc-paint__yaxis {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 38px;
}
.crc-paint__cap {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #1C3D5A;
}
.crc-paint__cap--low { color: #4C6478; }
.crc-paint__ybar {
  flex: 1;
  width: 4px;
  margin: 8px 0;
  background: linear-gradient(#F7CF00, #1C3D5A);
}
.crc-paint__ylabel {
  flex: none;
  display: flex;
  align-items: center;
  padding-bottom: 38px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  color: #4C6478;
  writing-mode: vertical-rl;
}
.crc-paint__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crc-paint__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1vw, 14px);
  min-height: 300px;
}
.crc-paint__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.crc-paint__col--s1 { padding-bottom: 0; }
.crc-paint__col--s2 { padding-bottom: 52px; }
.crc-paint__col--s3 { padding-bottom: 104px; }
.crc-paint__col--s4 { padding-bottom: 156px; }
.crc-paint__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 900;
  line-height: 1.6;
  color: #1C3D5A;
  text-align: center;
}
.crc-paint__chip {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.crc-paint__years {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 12px 10px;
  border-radius: 6px;
  font-size: clamp(11px, 1vw, 12.5px);
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
}
.crc-paint__years b {
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 900;
  line-height: 1.3;
}
/* 塗料ごとの配色（元データの paintTypes に対応） */
.crc-paint__col--s1 .crc-paint__chip,
.crc-paint__col--s1 .crc-paint__years { background: #F7CF00; }
.crc-paint__col--s1 .crc-paint__years { color: #1C3D5A; }
.crc-paint__col--s2 .crc-paint__chip,
.crc-paint__col--s2 .crc-paint__years { background: #E0B400; }
.crc-paint__col--s2 .crc-paint__years { color: #1C3D5A; }
.crc-paint__col--s3 .crc-paint__chip,
.crc-paint__col--s3 .crc-paint__years { background: #35648A; }
.crc-paint__col--s3 .crc-paint__years { color: #fff; }
.crc-paint__col--s4 .crc-paint__chip,
.crc-paint__col--s4 .crc-paint__years { background: #1C3D5A; }
.crc-paint__col--s4 .crc-paint__years { color: #fff; }
.crc-paint__xaxis {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crc-paint__xbar {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, #F7CF00, #1C3D5A);
}
.crc-paint__xlabel {
  margin: 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.6;
  color: #4C6478;
}
/* SPでもPCと同じ見た目（段差・4列並び）を保つため、横スクロールで見せる */
.crc-paint-scroll { width: 100%; }
@media (max-width: 767px) {
  .crc-paint-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .crc-paint { min-width: 700px; }
}

/* ==========================================================================
   17. 下層共通：費用の箇条書きカード
   ========================================================================== */

.crc-costbox {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  text-align: center;
}
.crc-costlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}
.crc-costlist__item {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  color: #3E5668;
  text-wrap: pretty;
}
.crc-costlist__item::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  line-height: 1.9;
  width: 15px;
  display: inline-block;
  text-align: center;
  transform: scale(.66);
  color: #F7CF00;
  flex: none;
}
.crc-costlist--cream .crc-costlist__item { background: #FFFBEF; }
.crc-costlist--cream .crc-costlist__item::before { color: #C22E10; }

/* ==========================================================================
   18. 施工事例
   ========================================================================== */

.crc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: none;
}
.crc-tabs .tab-nav__item {
  padding: 16px 30px;
  border: 1px solid #D8E2EA;
  border-bottom: 1px solid #D8E2EA;
  border-radius: 999px;
  background: #fff;
  color: #1C3D5A;
  font-size: 14px;
  font-weight: 900;
}
.crc-tabs .tab-nav__item:hover { border-color: #1C3D5A; color: #1C3D5A; }
.crc-tabs .tab-nav__item.is-active {
  background: #1C3D5A;
  border-color: #1C3D5A;
  color: #fff;
}

.crc-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2vw, 30px);
}
.crc-works__item {
  display: flex;
  flex-direction: column;
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(28, 61, 90, .06);
}
/* カテゴリ切替で非表示にする（[hidden] を display:flex に勝たせる） */
.crc-works__item[hidden] { display: none; }
.crc-works__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: #E6EDF3;
}
.crc-works__ph {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  background: repeating-linear-gradient(45deg, #EAEFF4 0 12px, #F4F7FA 12px 24px);
  color: #4C6478;
}
.crc-works__ph--after {
  background: repeating-linear-gradient(45deg, #FFF6D6 0 12px, #FFFBEF 12px 24px);
  color: #8A7100;
}
.crc-works__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #1C3D5A;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}
.crc-works__ph--after .crc-works__badge { background: #F7CF00; color: #1C3D5A; }
.crc-works__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.crc-works__cat {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: #FFFBEF;
  color: #8A7100;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.crc-works__title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
}
.crc-works__place {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #4C6478;
}

/* ==========================================================================
   19. お問い合わせ
   ========================================================================== */

.crc-way {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
/* LINE窓口：左に本文、右にイメージ写真 */
.crc-way__line {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(24px, 2.4vw, 36px);
  border: 2px solid #06C755;
  border-radius: 10px;
  background: #F4FDF7;
}
.crc-way__line-body {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  order: 2;
}
/* 画像は左側。高さは横のコンテンツ（本文カラム）に合わせて伸縮させる */
.crc-way__line-img {
  flex: 0 1 320px;
  min-width: 0;
  order: 1;
  display: flex;
}
.crc-way__line-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* 縦積みになるSPでは元の比率に戻す */
@media (max-width: 639px) {
  .crc-way__line-img { flex-basis: 100%; }
  .crc-way__line-img img {
    height: auto;
    aspect-ratio: 640 / 427;
  }
}
.crc-way__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.crc-way__tag {
  padding: 7px 14px;
  border-radius: 999px;
  background: #05913E;
  color: #fff;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
}
.crc-way__title {
  margin: 0;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 900;
  line-height: 1.5;
}
.crc-way__qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crc-way__qlist .crc-bullet__item { gap: 12px; font-size: 14px; line-height: 1.9; color: #3E5668; }
.crc-way__qlist .crc-bullet__item::before { font-size: 14px; line-height: 1.85; width: 14px; }
.crc-way__btn {
  width: min(100%, 560px);
  padding: 21px 26px;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.4;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(6, 199, 85, .3);
}
.crc-way__btn .crc-lineico { font-size: 24px; }
.crc-way__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.crc-way__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(24px, 2.2vw, 34px);
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
/* 窓口ごとに薄い背景色を敷く（LINE=緑／電話=クリーム／フォーム=ブルーグレー） */
.crc-way__card--tel  { background: #FFFBEF; border-color: #EFE0AE; }
.crc-way__card--form { background: #F4F7FA; border-color: #DCE6EE; }
.crc-way__tel {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  color: #1C3D5A;
  text-decoration: none;
}
.crc-way__tel:hover { color: #C22E10; }
.crc-way__grow { flex: 1; }
.crc-way__cta { align-self: center; }

.crc-cstep {
  --cstep-gap: clamp(22px, 2.4vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--cstep-gap);
}
.crc-cstep__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2vw, 30px);
  background: #fff;
  border-radius: 8px;
  border-left: 6px solid #F7CF00;
}
/* ステップ間の矢印。同じ行に次のカードがあれば右向き、行末／1列時は下向き（JSで判定） */
.crc-cstep__arrow {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  color: #C22E10;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.crc-cstep__arrow.is-right {
  display: flex;
  top: 50%;
  right: calc(-1 * var(--cstep-gap));
  width: var(--cstep-gap);
  transform: translateY(-50%);
}
.crc-cstep__arrow.is-down {
  display: flex;
  left: 50%;
  bottom: calc(-1 * var(--cstep-gap));
  height: var(--cstep-gap);
  transform: translateX(-50%) rotate(90deg);
}

/* よくあるご質問（常時展開） */
.crc-qa {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.crc-qa__item {
  border: 1px solid #E6EDF3;
  border-radius: 8px;
  overflow: hidden;
}
.crc-qa__q,
.crc-qa__a {
  display: flex;
  gap: 14px;
  padding: 22px 24px;
}
.crc-qa__q { background: #FFFBEF; }
.crc-qa__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #F7CF00;
  color: #1C3D5A;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  flex: none;
}
.crc-qa__badge--a { background: #1C3D5A; color: #F7CF00; }
.crc-qa__qtext {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.7;
  text-wrap: pretty;
}
.crc-qa__atext {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  color: #4C6478;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   フォーム（CMSフォーム cms_id=7 / design_pattern=2 の出力を元データの見た目に寄せる）
   CMSの mail-form.css は body内 <link> で読み込まれ site.css より後に適用される。
   同詳細度では負けるため :not(.pattern-exclusion) まで含めて詳細度を上げている。
   -------------------------------------------------------------------------- */
.crc-form {
  padding: clamp(24px, 3vw, 44px);
  background: #fff;
  border-radius: 10px;
}
/* 白カードは .crc-form 側で持つのでCMSの枠をリセット */
.crc-form .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.crc-form .form-contents form dl { margin-bottom: 0; }

/* 項目名：左280pxの回り込みを解除し「ラベル上・入力欄下」の縦並びにする */
.crc-form .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  padding-top: 20px;
  margin-right: 0;
}
.crc-form .form-contents form dl dt:not(.pattern-exclusion):first-of-type { padding-top: 0; }
.crc-form .form-contents form dl dd:not(.pattern-exclusion) {
  padding: 8px 0 0;
  margin-left: 0;
  border-bottom: none;
}

/* ラベル文字＋「必須」バッジ（CMSはラベル前に出すので row-reverse で後ろへ回す） */
.crc-form .form-contents form dl dt:not(.pattern-exclusion) span.required,
.crc-form .form-contents form dl dt:not(.pattern-exclusion) span.optional {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.crc-form .form-contents form dl dt:not(.pattern-exclusion) span.required::before {
  content: '必須';
  position: static;
  top: 0;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: #C4392E;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* 入力欄 */
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea,
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea-serect,
.crc-form .form-contents dd:not(.pattern-exclusion) input.textarea,
.crc-form .form-contents dd:not(.pattern-exclusion) textarea.textarea {
  width: 100%;
  height: auto;
  padding: 16px 18px;
  border: 1px solid #D8E2EA;
  border-radius: 12px;
  background: #FBFDFE;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  outline: none;
  transition: border-color .3s ease;
}
.crc-form .form-contents dd:not(.pattern-exclusion) textarea.textarea {
  line-height: 1.8;
  resize: vertical;
}
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea:focus,
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea-serect:focus { border-color: #1C3D5A; }
.crc-form .form-contents dd:not(.pattern-exclusion) select.textarea-serect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  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='%231C3D5A' 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: 14px;
  cursor: pointer;
}

/* 送信ボタン */
.crc-form .form-contents .submit-btn {
  display: block;
  width: min(100%, 420px);
  margin: 28px auto 0;
  padding: 24px;
  border: 0;
  border-radius: 999px;
  background: #F7CF00;
  color: #1C3D5A;
  font-family: inherit;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(247, 207, 0, .3);
  transition: background .3s ease, color .3s ease;
}
.crc-form .form-contents .submit-btn:hover { background: #E0B400; color: #1C3D5A; }

/* 送信完了／エラー表示をサイト配色に合わせる */
.crc-form .form-contents .form-thanks-msg {
  border-color: #fff;
  box-shadow: 0 0 0 6px #FFF6D6;
}
.crc-form .form-contents .form-thanks-msg .back-home-btn a {
  border-color: #1C3D5A;
  color: #1C3D5A;
  border-radius: 999px;
}
.crc-form .form-contents .form-thanks-msg .back-home-btn a:hover {
  background: #F7CF00;
  color: #1C3D5A;
}
.crc-form .form-contents .form-err-msg { border-color: #C4392E; color: #C4392E; }

/* ==========================================================================
   20. 会社概要
   ========================================================================== */

.crc-profile {
  margin: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.crc-profile__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 22px 26px;
  border-bottom: 1px solid #F0F3F6;
}
.crc-profile__row:last-child { border-bottom: none; }
.crc-profile__key {
  flex: 0 0 150px;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.9;
}
.crc-profile__val {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  color: #4C6478;
  white-space: pre-line;
}
.crc-sign {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
}

.crc-biz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(20px, 2vw, 30px);
}
.crc-biz__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid #E6EDF3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(28, 61, 90, .06);
}
.crc-biz__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #EAEFF4;
}
.crc-biz__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}


.crc-map__address {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: #4C6478;
}
.crc-map__link {
  margin: 14px 0 0;
  text-align: right;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
}
.crc-map__link a { color: #1C3D5A; text-decoration: none; }
.crc-map__link a:hover { color: #C22E10; }
.crc-map__link-ico { margin-left: 8px; font-size: .85em; }
.crc-map {
  aspect-ratio: 16 / 7;
  border-radius: 10px;
  overflow: hidden;
}
.crc-map--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: repeating-linear-gradient(45deg, #E4EAF0 0 16px, #EFF3F7 16px 32px);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.8;
  color: #4C6478;
  text-align: center;
}
.crc-map--placeholder span { font-weight: 400; }

/* ==========================================================================
   21. フッター／下部固定バー
   ========================================================================== */

.crc-footer {
  background: #132B40;
  color: #fff;
  padding: clamp(44px, 5vw, 72px) 0 0;
}
.crc-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.crc-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.crc-footer__logo {
  font-family: "Noto Sans", sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
}
/* フッターは濃紺地なので、ロゴを白抜きで表示する。
   親が flex-direction: column のため align-self なしでは横に伸びる */
.crc-footer__logo-img {
  align-self: flex-start;
  display: block;
  width: auto;
  height: 60px;
  filter: brightness(0) invert(1);
}
@media (max-width: 639px) {
  .crc-footer__logo-img { height: 44px; }
}
.crc-footer__info {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.95;
  color: rgba(255, 255, 255, .72);
}
.crc-footer__nav { gap: 12px; }
/* SPはハンバーガーナビと下部固定バーがあるため、
   フッターのサイトマップとお問い合わせブロックは省く */
@media (max-width: 639px) {
  .crc-footer__nav,
  .crc-footer__contact { display: none; }
}
.crc-footer__label {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #F7CF00;
}
.crc-footer__link {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 2;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}
.crc-footer__link:hover { color: #F7CF00; }
.crc-footer__contact { gap: 14px; }
.crc-footer__tel {
  font-family: "Noto Sans", sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-decoration: none;
}
.crc-footer__tel:hover { color: #F7CF00; }
.crc-footer__note {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
}
.crc-footer__bottom {
  margin-top: clamp(32px, 4vw, 56px);
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.crc-copy {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
}

.crc-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: #F7CF00;
  box-shadow: 0 -6px 20px rgba(28, 61, 90, .16);
}
.crc-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.crc-bar__text {
  margin-right: auto;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.6;
  color: #1C3D5A;
}
@media (max-width: 896px) {
  .crc-bar__text { margin-right: 0; width: 100%; text-align: center; }
}
@media (max-width: 639px) {
  .crc-bar__inner { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .crc-bar__text { font-size: 12px; }
  .crc-bar .crc-btn--sm2 { padding: 13px 14px; font-size: 12.5px; gap: 7px; }
}

/* ページトップボタンは固定バーの上に出す */
.crc-ptop { bottom: calc(var(--crc-bar-space, var(--crc-bar-h, 104px)) + 12px); }

/* ==========================================================================
   22. 角丸なし（写真・コンテンツ枠）
   指示により写真・カード・ボックス・入力欄の角丸を 0 にする。
   pill（ボタン／バッジ／タブ）と円（番号・チェック）は形状として維持する。
   ========================================================================== */

/* 写真 */
.crc-reason__img,
.crc-split__img,
.crc-biz__img,
.crc-map,
.crc-works__ba,
.crc-works__ph { border-radius: 0; }

/* カード・ボックス */
.crc-reason__item,
.crc-worry__item,
.crc-worry__check,
.crc-service__item,
.crc-step__item,
.crc-md__box,
.crc-commit__item,
.crc-flow__body,
.crc-costlist__item,
.crc-works__item,
.crc-works__cat,
.crc-way__line,
.crc-way__card,
.crc-cstep__item,
.crc-qa__item,
.crc-qa__badge,
.crc-profile,
.crc-form,
.crc-paint__chip,
.crc-paint__years { border-radius: 0; }

/* 入力欄（CMSフォーム出力を含む） */
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea,
.crc-form .form-contents dd:not(.pattern-exclusion) .textarea-serect,
.crc-form .form-contents dd:not(.pattern-exclusion) input.textarea,
.crc-form .form-contents dd:not(.pattern-exclusion) textarea.textarea { border-radius: 0; }

/* ==========================================================================
   23. スクロール表示アニメーション（TOPページ）
   AOS の実体（./aos/）が無いため依存なしで実装。
   .js-reveal は common.js が <html> に付与する。JSが動かない環境では
   一切隠さないので、コンテンツが見えなくなる事故が起きない。
   prefers-reduced-motion: reduce の環境では JS 側で無効化する。
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal="fade"] { transform: none; }
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 連続する要素をずらして出す */
.js-reveal [data-reveal-delay="1"] { transition-delay: .08s; }
.js-reveal [data-reveal-delay="2"] { transition-delay: .16s; }
.js-reveal [data-reveal-delay="3"] { transition-delay: .24s; }
.js-reveal [data-reveal-delay="4"] { transition-delay: .32s; }
.js-reveal [data-reveal-delay="5"] { transition-delay: .4s; }

/* 角丸なし（追加分） */
.crc-way__line-img img { border-radius: 0; }