.elementor-891 .elementor-element.elementor-element-22ecfee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-22ecfee:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-22ecfee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://reform-saitama.site/wp-content/uploads/2025/09/reform-saitama_BG_image.webp");background-repeat:no-repeat;background-size:cover;}.elementor-891 .elementor-element.elementor-element-d081ef0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-891 .elementor-element.elementor-element-940114c img{width:100%;}.elementor-891 .elementor-element.elementor-element-646c944{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-25d8997{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-d672b32 img{width:100%;}.elementor-891 .elementor-element.elementor-element-f8edfe0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--z-index:1;}.elementor-891 .elementor-element.elementor-element-f8edfe0:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-f8edfe0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#363636;}.elementor-891 .elementor-element.elementor-element-07b019f{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-891 .elementor-element.elementor-element-3bf24d8{text-align:center;font-family:"Noto Sans JP", Sans-serif;font-size:1.2em;font-weight:400;text-shadow:0px 0px 10px rgba(0, 0, 0, 0.33);color:#FFFFFF;}.elementor-891 .elementor-element.elementor-element-ec5186d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-2ee968d{--display:flex;}.elementor-891 .elementor-element.elementor-element-0ebd4a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-314ebb1{--display:flex;}.elementor-891 .elementor-element.elementor-element-6155b4b{text-align:center;font-size:2.6em;font-weight:700;color:#0B326F;}.elementor-891 .elementor-element.elementor-element-d3b47f0{text-align:center;font-size:1.5em;font-weight:700;color:#0B326F;}.elementor-891 .elementor-element.elementor-element-a48e602{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-f88bd43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-da223f1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:10px 10px 10px 10px;}.elementor-891 .elementor-element.elementor-element-da223f1:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-da223f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1835A5;}.elementor-891 .elementor-element.elementor-element-32680c2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-f8899a2{text-align:center;font-size:3.2vw;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-891 .elementor-element.elementor-element-bbdb78e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:10px 10px 10px 10px;}.elementor-891 .elementor-element.elementor-element-bbdb78e:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-bbdb78e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-891 .elementor-element.elementor-element-a8e96bd{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-b428354{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-13f6641{font-size:2em;font-weight:500;color:#141414;}.elementor-891 .elementor-element.elementor-element-4e72fbd{width:var( --container-widget-width, 40% );max-width:40%;background-color:#FFBD3A;--container-widget-width:40%;--container-widget-flex-grow:0;border-radius:5px 5px 5px 5px;text-align:center;font-size:1.3em;font-weight:700;color:#141414;}.elementor-891 .elementor-element.elementor-element-4e72fbd.elementor-element{--align-self:center;}.elementor-891 .elementor-element.elementor-element-4e72fbd.ha-has-bg-overlay:hover::before{transition:background 0.3s;}.elementor-891 .elementor-element.elementor-element-2185a4f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-1becc6e{text-align:center;font-size:3em;font-weight:700;color:#DB1717;}.elementor-891 .elementor-element.elementor-element-61cc14b{--display:flex;}.elementor-891 .elementor-element.elementor-element-a70d3db{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-891 .elementor-element.elementor-element-a70d3db:hover{--e-transform-scale:1.02;}.elementor-891 .elementor-element.elementor-element-1f008e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-35b37a7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-891 .elementor-element.elementor-element-fccb24a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-891 .elementor-element.elementor-element-7673d50{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:10px 10px 10px 10px;}.elementor-891 .elementor-element.elementor-element-7673d50:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-7673d50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1835A5;}.elementor-891 .elementor-element.elementor-element-7922b3e{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-bc292b6{text-align:center;font-size:3.2vw;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-891 .elementor-element.elementor-element-9c3603e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:10px 10px 10px 10px;}.elementor-891 .elementor-element.elementor-element-9c3603e:not(.elementor-motion-effects-element-type-background), .elementor-891 .elementor-element.elementor-element-9c3603e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-891 .elementor-element.elementor-element-2bc38e0{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-c19116e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-f9b6922{font-size:2em;font-weight:500;color:#141414;}.elementor-891 .elementor-element.elementor-element-2c49cc2{width:var( --container-widget-width, 40% );max-width:40%;background-color:#FFBD3A;--container-widget-width:40%;--container-widget-flex-grow:0;border-radius:5px 5px 5px 5px;text-align:center;font-size:1.3em;font-weight:700;color:#141414;}.elementor-891 .elementor-element.elementor-element-2c49cc2.elementor-element{--align-self:center;}.elementor-891 .elementor-element.elementor-element-2c49cc2.ha-has-bg-overlay:hover::before{transition:background 0.3s;}.elementor-891 .elementor-element.elementor-element-91df188{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-b9d7820{text-align:center;font-size:3em;font-weight:700;color:#DB1717;}.elementor-891 .elementor-element.elementor-element-199f706{--display:flex;}.elementor-891 .elementor-element.elementor-element-f6ace8a{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-891 .elementor-element.elementor-element-f6ace8a:hover{--e-transform-scale:1.02;}.elementor-891 .elementor-element.elementor-element-f028a8e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-cefd760{--display:flex;}.elementor-891 .elementor-element.elementor-element-c62ec3f{text-align:center;font-size:2.6em;font-weight:700;color:#0B326F;}.elementor-891 .elementor-element.elementor-element-3bbb606{text-align:center;font-size:1.5em;font-weight:700;color:#0B326F;}.elementor-891 .elementor-element.elementor-element-f31c361{--display:flex;}.elementor-891 .elementor-element.elementor-element-8ca300d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-a74c857{--display:flex;}.elementor-891 .elementor-element.elementor-element-7ba2aca{text-align:center;font-size:2.6em;font-weight:700;color:#0B326F;}.elementor-891 .elementor-element.elementor-element-8c78a0a{--display:flex;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-891 .elementor-element.elementor-element-22ecfee{--content-width:0px;}.elementor-891 .elementor-element.elementor-element-646c944{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-07b019f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-3bf24d8{padding:0px 0px 0px 0px;font-size:0.8em;}.elementor-891 .elementor-element.elementor-element-314ebb1{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-6155b4b{font-size:1.6em;}.elementor-891 .elementor-element.elementor-element-d3b47f0{font-size:0.8em;}.elementor-891 .elementor-element.elementor-element-a48e602{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-f028a8e{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-cefd760{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-891 .elementor-element.elementor-element-3bbb606{font-size:1em;}.elementor-891 .elementor-element.elementor-element-f31c361{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-8ca300d{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-891 .elementor-element.elementor-element-8c78a0a{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-891 .elementor-element.elementor-element-22ecfee{--content-width:1380px;}.elementor-891 .elementor-element.elementor-element-646c944{--content-width:0px;}.elementor-891 .elementor-element.elementor-element-a8e96bd{--width:65%;}.elementor-891 .elementor-element.elementor-element-61cc14b{--width:35%;}.elementor-891 .elementor-element.elementor-element-2bc38e0{--width:65%;}.elementor-891 .elementor-element.elementor-element-199f706{--width:35%;}}/* Start custom CSS for html, class: .elementor-element-c8c4b01 *//* ===================================================================
   屋根塗装セクション - プロセス画像拡大版 + スペック情報中央揃え修正 - 赤枠のみ追加版
=================================================================== */

/* 基本セクション設定 */
.roof-painting-section {
  padding: 80px 0;
  margin: 0 auto;
  max-width: 1200px;
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  background: transparent;
}

.roof-painting-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* セクションヘッダー */
.roof-painting-header {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
}

.roof-painting-header::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #1E40AF 0%, #3B82F6 100%);
  border-radius: 2px;
}

.roof-painting-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
  position: relative;
}

.roof-painting-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: #1E40AF;
}

.roof-painting-description {
  font-size: 16px;
  color: #475569;
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto;
  font-weight: 400;
}

/* メインレイアウト - 高さ統一対応 */
.roof-painting-content {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

/* サービスカード - 赤枠のみ追加 */
.roof-painting-service-card {
  flex: 1;
  background: #FAFBFF;
  border: 2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius: 8px;
  position: relative;
  box-shadow: 0 4px 20px rgba(30, 64, 175, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.roof-painting-service-card:hover {
  box-shadow: 0 8px 32px rgba(30, 64, 175, 0.12);
  transform: translateY(-2px);
  border-color: #dc2626; /* ホバー時の赤い枠線 */
}

.roof-painting-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #1E40AF 0%, #3B82F6 50%, #60A5FA 100%);
}

/* 画像エリア */
.roof-painting-image-container {
  position: relative;
  height: 240px;
  margin: 24px 24px 0;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #E0E7FF;
  flex-shrink: 0;
}

.roof-painting-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.roof-painting-service-card:hover .roof-painting-image-container img {
  transform: scale(1.03);
}

.roof-painting-image-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(30, 64, 175, 0.9);
  color: #F1F5F9;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* コンテンツエリア */
.roof-painting-content-area {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  height: 100%;
}

.roof-painting-service-title {
  font-size: 22px;
  font-weight: 700;
  color: #1E3A8A;
  line-height: 1.4;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  min-height: 60px;
  display: flex;
  align-items: center;
}

.roof-painting-service-subtitle {
  font-size: 14px;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 20px;
  font-weight: 400;
  min-height: 48px;
}

/* 価格表示 - 価格テキストを赤色に変更 */
.roof-painting-pricing {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E0E7FF;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(30, 64, 175, 0.05);
}

.roof-painting-price-main {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #DC2626; /* 青色から赤色に変更 */
  line-height: 1;
  margin-bottom: 3px;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(220, 38, 38, 0.1); /* 赤系シャドウ追加 */
}

.roof-painting-price-sub {
  font-size: 13px;
  color: #DC2626; /* グレーから赤色に変更 */
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 価格エリアの控えめなホバー効果 */
.roof-painting-pricing:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(30, 64, 175, 0.1);
  transition: all 0.3s ease;
}

/* プロセス画像エリア - 大幅拡大版 */
.roof-painting-process-section {
  background: #F8FAFC;
  border: 1px solid #E0E7FF;
  border-radius: 8px; /* 角丸を大きく */
  padding: 24px; /* パディングを大幅増加 */
  margin-bottom: 24px; /* マージンを増加 */
  min-height: 200px; /* 全体高さを大幅増加 */
  display: flex;
  flex-direction: column;
}

.roof-painting-process-title {
  font-size: 16px; /* 15px → 16px */
  font-weight: 600;
  color: #1E3A8A;
  margin-bottom: 20px; /* マージンを大幅増加 */
  padding-left: 18px; /* パディングを増加 */
  position: relative;
  letter-spacing: 0.05em;
}

.roof-painting-process-title::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: #1E40AF;
  font-size: 14px; /* アイコンサイズも増加 */
}

/* プロセス画像を大幅に拡大 */
.roof-painting-process-image {
  width: 100%;
  height: 160px; /* 120px → 160px（33%アップ）*/
  margin-bottom: 20px; /* マージンを大幅増加 */
  border-radius: 8px; /* 角丸を大きく */
  overflow: hidden;
  background: white;
  border: 2px solid #E0E7FF; /* ボーダーを太く */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(30, 64, 175, 0.08); /* シャドウを強化 */
  position: relative;
}

.roof-painting-process-image img {
  width: 98%; /* 幅を98%に拡大（より大きく）*/
  height: auto; /* 高さを自動調整 */
  max-height: 95%; /* 最大高さを95%に拡大 */
  object-fit: contain; /* 縦横比を保持して全体表示 */
  object-position: center; /* 中央配置 */
}

.roof-painting-process-description {
  font-size: 14px; /* 13px → 14px */
  color: #475569;
  line-height: 1.7; /* 行間をさらに広く */
}

.roof-painting-process-text {
  margin-bottom: 10px; /* マージンを大幅増加 */
  font-weight: 500;
}

.roof-painting-process-notes {
  margin-bottom: 0;
  font-size: 13px; /* 12px → 13px */
  color: #64748B;
}

.roof-painting-process-highlight {
  color: #1E40AF;
  font-weight: 600;
}

/* より強いホバー効果 */
.roof-painting-process-image:hover {
  transform: scale(1.02); /* 1.01 → 1.02 */
  transition: transform 0.3s ease;
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.12); /* シャドウを強化 */
}

.roof-painting-process-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.roof-painting-process-section:hover .roof-painting-process-image::after {
  border-color: #3B82F6;
}

/* 追加情報エリア */
.roof-painting-additional-info {
  background: white;
  border: 1px solid #E0E7FF;
  border-radius: 4px;
  padding: 12px;
}

.roof-painting-additional-text {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* 作業内容セクション */
.roof-painting-features-section {
  margin-bottom: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.roof-painting-features-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E3A8A;
  margin-bottom: 12px;
  padding-left: 16px;
  position: relative;
  letter-spacing: 0.05em;
}

.roof-painting-features-title::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: #1E40AF;
  font-size: 12px;
}

.roof-painting-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  justify-content: flex-start;
}

.roof-painting-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #FAFBFF;
  border-left: 3px solid #3B82F6;
  border-radius: 0 4px 4px 0;
}

.roof-painting-feature-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1E40AF;
  margin-top: 8px;
  flex-shrink: 0;
}

.roof-painting-feature-text {
  font-size: 13px;
  color: #1E3A8A;
  line-height: 1.6;
  font-weight: 500;
}

/* スペック情報 - 完全な中央揃え対応 */
.roof-painting-specs-section {
  background: #F8FAFC;
  border: 1px solid #E0E7FF;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  margin-top: auto;
  flex-shrink: 0;
  text-align: center; /* セクション全体を中央揃え */
}

.roof-painting-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center; /* グリッド内も中央揃え */
  justify-items: center; /* 各アイテムを中央配置 */
}

.roof-painting-spec-item {
  position: relative;
  padding: 4px 0;
  text-align: center; /* アイテム内も中央揃え */
  width: 100%; /* 幅を確保 */
}

.roof-painting-spec-value {
  font-size: 20px;
  font-weight: 700;
  color: #1E40AF;
  line-height: 1.2;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
  text-align: center; /* 値も中央揃え */
}

.roof-painting-spec-label {
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center; /* ラベルも中央揃え */
}

.roof-painting-spec-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: #BFDBFE;
}

/* 1項目の場合の特別調整 */
.roof-painting-specs-grid:has(.roof-painting-spec-item:only-child) {
  grid-template-columns: 1fr; /* 1項目の場合は1列に */
  justify-content: center;
}

/* 対応症状セクション */
.roof-painting-symptoms-section {
  border-top: 1px solid #E0E7FF;
  padding-top: 16px;
  margin-top: auto;
  flex-shrink: 0;
}

.roof-painting-symptoms-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.roof-painting-symptoms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roof-painting-symptom-tag {
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  background: #F1F5F9;
  border: 1px solid #BFDBFE;
  border-radius: 12px;
  padding: 3px 8px;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.roof-painting-symptom-tag:hover {
  background: #E0E7FF;
  color: #1E3A8A;
}

/* レスポンシブ調整 - 大きいサイズを維持 + 中央揃え */
@media (max-width: 900px) {
  .roof-painting-content {
    flex-direction: column;
    gap: 28px;
  }
  
  .roof-painting-specs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-content: center; /* 中央配置を維持 */
    text-align: center; /* 中央揃えを維持 */
  }
  
  .roof-painting-spec-item::after {
    display: none;
  }
  
  .roof-painting-features-section {
    min-height: auto;
  }
  
  .roof-painting-service-title {
    min-height: auto;
  }
  
  .roof-painting-service-subtitle {
    min-height: auto;
  }
  
  /* タブレット版でも大きめに */
  .roof-painting-process-section {
    min-height: 180px; /* 140px → 180px */
    padding: 22px; /* パディング増加 */
  }
  
  .roof-painting-process-image {
    height: 140px; /* 100px → 140px */
  }
  
  .roof-painting-process-image img {
    width: 96%; /* 92% → 96% */
    max-height: 92%; /* 85% → 92% */
  }
  
  .roof-painting-process-title {
    margin-bottom: 18px;
  }
  
  /* タブレット版でのスペック情報中央揃え */
  .roof-painting-specs-section {
    text-align: center;
  }
  
  .roof-painting-spec-item {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .roof-painting-section {
    padding: 60px 0;
  }
  
  .roof-painting-container {
    padding: 0 16px;
  }
  
  .roof-painting-header {
    margin-bottom: 48px;
  }
  
  .roof-painting-image-container {
    height: 200px;
    margin: 20px 20px 0;
  }
  
  /* モバイル版でも大きめに維持 */
  .roof-painting-process-section {
    min-height: 160px; /* 120px → 160px */
    padding: 20px; /* パディング増加 */
  }
  
  .roof-painting-process-image {
    height: 120px; /* 85px → 120px（40%アップ）*/
  }
  
  .roof-painting-process-image img {
    width: 94%; /* 90% → 94% */
    max-height: 90%; /* 80% → 90% */
  }
  
  .roof-painting-process-title {
    font-size: 15px;
    margin-bottom: 16px; /* マージン増加 */
  }
  
  .roof-painting-process-description {
    font-size: 13px; /* 12px → 13px */
  }
  
  .roof-painting-content-area {
    padding: 16px 20px 20px;
  }
  
  .roof-painting-service-title {
    font-size: 20px;
  }
  
  .roof-painting-price-main {
    font-size: 24px;
  }
  
  .roof-painting-features-list {
    gap: 8px;
  }
  
  .roof-painting-feature-item {
    padding: 10px 14px;
  }
  
  /* モバイル版でのスペック情報中央揃え確保 */
  .roof-painting-specs-section {
    text-align: center;
  }
  
  .roof-painting-specs-grid {
    text-align: center;
    justify-content: center;
  }
  
  .roof-painting-spec-item {
    text-align: center;
  }
  
  .roof-painting-spec-value {
    text-align: center;
  }
  
  .roof-painting-spec-label {
    text-align: center;
  }
}

/* 超小画面でも大きめを維持 + 中央揃え */
@media (max-width: 480px) {
  .roof-painting-process-image {
    height: 100px; /* 75px → 100px */
  }
  
  .roof-painting-process-image img {
    width: 92%; /* 88% → 92% */
    max-height: 88%; /* 75% → 88% */
  }
  
  .roof-painting-process-section {
    padding: 18px;
    min-height: 140px;
  }
  
  /* 超小画面でのスペック情報中央揃え */
  .roof-painting-specs-section {
    text-align: center;
  }
  
  .roof-painting-specs-grid {
    text-align: center;
    justify-content: center;
  }
}

/* 競合回避のための強制適用ルール - 屋根塗装セクション専用 */
.roof-painting-section .roof-painting-service-card .roof-painting-content-area .roof-painting-specs-section {
  text-align: center !important;
}

.roof-painting-section .roof-painting-service-card .roof-painting-content-area .roof-painting-specs-grid {
  text-align: center !important;
  justify-items: center !important;
  justify-content: center !important;
}

.roof-painting-section .roof-painting-service-card .roof-painting-content-area .roof-painting-spec-item {
  text-align: center !important;
}

.roof-painting-section .roof-painting-service-card .roof-painting-content-area .roof-painting-spec-value {
  text-align: center !important;
}

.roof-painting-section .roof-painting-service-card .roof-painting-content-area .roof-painting-spec-label {
  text-align: center !important;
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .roof-painting-process-image img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* アニメーション */
@keyframes fadeInUpRoof {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.roof-painting-service-card {
  animation: fadeInUpRoof 0.6s ease-out;
}

.roof-painting-service-card:nth-child(2) {
  animation-delay: 0.1s;
}

/* 高さ統一のための追加調整 */
.roof-painting-content-area > * {
  flex-shrink: 0;
}

.roof-painting-content-area {
  height: 100%;
}

/* フォーカス状態 - アクセシビリティ */
.roof-painting-service-card:focus-within {
  outline: 2px solid #1E40AF;
  outline-offset: 2px;
}

/* 印刷対応 */
@media print {
  .roof-painting-section {
    background: white !important;
  }
  
  .roof-painting-service-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ef4444 !important; /* 印刷時のみ赤い枠線 */
  }
  
  .roof-painting-pricing {
    background: #F5F5F5 !important;
    border: 1px solid #CCCCCC !important;
    box-shadow: none !important;
  }
  
  .roof-painting-price-main {
    color: #000 !important;
    text-shadow: none !important;
  }
  
  .roof-painting-price-sub {
    color: #000 !important;
  }
  
  /* 印刷時もスペック情報中央揃えを維持 */
  .roof-painting-specs-section {
    text-align: center !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fbbd651 *//* ===================================================================
   Brand Tokens (共通トークン)
   ※ 各セクション内でも上書きできるよう、ローカル変数を併用
=================================================================== */
:root{
  --brand:#0B326F; --brand-700:#072657; --brand-500:#18408E; --brand-100:#E4ECFA;
  --accent:#C1121F; --accent-700:#A10E19; --accent-100:#FCE5E7;
  --ink:#0E1116; --muted:#6B7280; --surface:#FFFFFF; --bg:#F6F8FC; --border:#E5EAF3;

  /* Breakpoints */
  --bp-lg:1080px; /* tablet landscape ～ 小さめPC */
  --bp-md:900px;  /* tablet portrait */
  --bp-sm:600px;  /* large phone */
  --bp-xs:480px;  /* small phone */
}

/* Utility: 共通フォント(必要な範囲のみ) */
.u-font-jp{
  font-family:'Noto Sans JP',system-ui,-apple-system,'Segoe UI',Roboto,
  'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

/* ===================================================================
   施工フロー【PC：中央固定 / Tablet&SP：縦並び 修正版】
=================================================================== */
#construction-flow.construction-flow-pro{
  /* ローカル変数 */
  --cf-brand-500: var(--brand-500, #18408E);
  --cf-brand-100: var(--brand-100, #E4ECFA);
  --cf-border: var(--border, #E5EAF3);
  --cf-ink: var(--ink, #0E1116);
  --cf-muted: var(--muted, #6B7280);
  --cf-surface: var(--surface, #FFFFFF);
  --cf-accent-100: var(--accent-100, #FCE5E7);

  --cf-cardw: 440px; /* PCのカード幅 */
  --cf-gap: 40px;    /* PCの列間余白 */

  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 12px;
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

#construction-flow .cfp-inner{ max-width: 1100px; margin: 0 auto; }
#construction-flow h2{ margin: 0 0 6px; color: var(--cf-ink); font-weight: 900; font-size: clamp(20px, 2.6vw, 28px); text-align: center; }
#construction-flow .cfp-lead{ margin: 0 auto 24px; color: var(--cf-muted); font-size: clamp(13px, 1.2vw, 14.5px); text-align: center; max-width: 65ch; }

#construction-flow .cfp-steps{
  position: relative; display: grid; gap: var(--cf-gap);
  list-style: none; margin: 0; padding: 0;
}

/* --- PCレイアウト (1025px以上) --- */
#construction-flow .cfp-steps::before{
  content: ""; position: absolute;
  inset: 0 auto 0 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--cf-brand-100), var(--cf-border));
}

#construction-flow .cfp-step{
  position: relative; display: grid;
  grid-template-columns: var(--cf-cardw) var(--cf-cardw);
  justify-content: center;
  column-gap: var(--cf-gap);
  align-items: center;
}

#construction-flow .cfp-step::after{
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cf-surface);
  border: 2px solid var(--cf-brand-500);
  box-shadow: 0 0 0 6px var(--cf-brand-100);
  z-index: 1;
}

/* ★ PCでは画像を左、テキストを右に固定 */
#construction-flow .cfp-media {
  grid-column: 1;
  justify-self: center;
  width: var(--cf-cardw);
  max-width: 100%;
}
#construction-flow .cfp-body {
  grid-column: 2;
  justify-self: center;
  width: var(--cf-cardw);
  max-width: 100%;
  text-align: center;
}
#construction-flow .cfp-head {
  flex-direction: column;
  align-items: center;
}
#construction-flow .cfp-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 48ch;
}


/* --- Tablet & SP レスポンシブ (1024px以下) --- */
@media (max-width: 1024px) {
  /* タイムラインの線を左に移動 */
  #construction-flow .cfp-steps::before {
    left: 28px;
    transform: none;
  }
  
  /* レイアウトを1カラムに変更 */
  #construction-flow .cfp-step {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
    padding-left: 56px;
    justify-content: stretch;
  }
  
  /* ドットをタイムライン線上に移動 */
  #construction-flow .cfp-step::after {
    left: 28px;
    top: 28px;
    transform: translateX(-50%);
  }
  
  /* ★ ズレの原因を修正：PC用の固定幅と配置をリセット */
  #construction-flow .cfp-media,
  #construction-flow .cfp-body {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  /* テキストの配置を左寄せにリセット */
  #construction-flow .cfp-body { text-align: left; }
  #construction-flow .cfp-head { flex-direction: row; align-items: center; }
  #construction-flow .cfp-text { margin-left: 0; margin-right: 0; max-width: none; }
}


/* --- 共通の要素スタイル --- */
#construction-flow .cfp-media{
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(100% 100% at 50% 0%, rgba(24,64,142,.12), rgba(24,64,142,.06)), var(--cf-brand-100);
  border: 1px solid rgba(24,64,142,.18);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(17,24,39,.08);
}
#construction-flow .cfp-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ★ 施工フローカードに赤枠のみ追加 */
#construction-flow .cfp-body{
  background: linear-gradient(var(--cf-surface),var(--cf-surface)) padding-box,
              linear-gradient(120deg,rgba(24,64,142,.12),rgba(193,18,31,.10)) border-box;
  border: 2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
  transition: all 0.3s ease;
}

#construction-flow .cfp-body:hover {
  border-color: #dc2626; /* ホバー時の赤い枠線 */
}

#construction-flow .cfp-head{ display: flex; gap: 6px; margin-bottom: 6px; }
#construction-flow .cfp-chip{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 88px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-weight: 900; font-size: 12px; color: #7b1a1f;
  background: linear-gradient(#fff, var(--cf-accent-100));
  border: 1px solid rgba(193,18,31,.3);
  box-shadow: 0 4px 10px rgba(193,18,31,.12);
  flex-shrink: 0;
}
#construction-flow .cfp-title{ margin: 0; color: var(--cf-ink); font-weight: 900; font-size: clamp(16px, 1.9vw, 20px); }
#construction-flow .cfp-text{ line-height: 1.8; font-size: clamp(13px, 1.4vw, 14.5px); }

/* --- スマホ用の微調整 --- */
@media (max-width: 640px){
  #construction-flow .cfp-body { padding: 16px; }
}

/* 低モーション環境 */
@media (prefers-reduced-motion:reduce){
  #construction-flow .cfp-media, #construction-flow .cfp-body{ transition:none !important; }
}

/* ===== 他社との差別化 (#reason) - Professional Redesign ===== */
.reason {
  font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  padding: 60px 12px;
  margin: 0 auto;
  max-width: 1200px;
}

.reason-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* ★ 中央揃えにして視線を誘導 */
.reason h2,
.reason .reason-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.reason h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(20px, 2.8vw, 28px);
}

.reason .reason-lead {
  margin-bottom: 40px;
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 15px);
  max-width: 65ch;
  line-height: 1.8;
}

.reason-grid {
  display: grid;
  gap: 24px; /* カード間の余白を調整 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: reason-counter; /* 番号を振るための準備 */
}

@media (max-width: 900px) {
  .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .reason-grid {
    grid-template-columns: 1fr;
  }
}

/* ★ カードデザインを刷新 + 赤枠のみ追加 */
.rs-card {
  position: relative; /* 番号を配置するために必要 */
  background: var(--surface);
  border: 2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 10px 25px rgba(17, 24, 39, .06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
  overflow: hidden;
}

.rs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(17, 24, 39, .1);
  border-color: #dc2626; /* ホバー時の赤い枠線 */
}

/* ★ CSSで自動的に番号を配置 */
.rs-card::before {
  counter-increment: reason-counter;
  content: "0" counter(reason-counter);
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: clamp(40px, 8vw, 56px);
  font-weight: 900;
  color: var(--brand-100);
  line-height: 1;
  z-index: 0;
}

.rs-card h3,
.rs-card p {
  position: relative; /* 番号の上にテキストが乗るように */
  z-index: 1;
}

.rs-card h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 20px);
}

.rs-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
}


/* ★ 特別バナーのデザインを刷新 */
.reason-extra {
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px solid var(--accent-100);
  background: linear-gradient(135deg, #fff, var(--accent-100));
  border-radius: 20px;
}

.reason-extra h3 {
  margin: 0 0 16px;
  color: var(--accent-700);
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 18px);
}

.rx-list {
  margin: 0;
  padding: 0;
  list-style: none; /* デフォルトの点を削除 */
  display: grid;
  gap: 8px;
}

.rx-list li {
  padding-left: 1.5em;
  position: relative;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ★ リストのマーカーをチェックマークに変更 */
.rx-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent-700);
  font-weight: 900;
}

/* ===== メンテナンス事実セクション ===== */
.maint{
  --brand:#0B326F; --brand-700:#072657; --brand-500:#18408E; --brand-100:#E4ECFA;
  --accent:#C1121F; --accent-700:#A10E19; --accent-100:#FCE5E7;
  --ink:#0E1116; --muted:#6B7280; --surface:#FFFFFF; --bg:#F6F8FC; --border:#E5EAF3;
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  padding:56px 12px; margin:0 auto; max-width:1200px;
}
.maint-inner{ max-width:1000px; margin:0 auto; }
.maint h2{
  margin:0 0 6px; color:var(--ink); font-weight:900; letter-spacing:.01em;
  font-size:clamp(18px,2.6vw,26px);
}
.maint-lead{
  margin:0 0 18px; color:var(--muted);
  font-size:clamp(13px,1.2vw,14.5px);
}

/* 年代別カード - 赤枠のみ追加 */
.maint-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .maint-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .maint-grid{ grid-template-columns:1fr; } }

.mt-card{
  background:var(--surface);
  border:2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; /* ★追加: 高さを揃えるため */
  flex-direction: column; /* ★追加: 高さを揃えるため */
}
.mt-card:hover{ 
  transform:translateY(-2px); 
  border-color:#dc2626; /* ホバー時の赤い枠線 */
  box-shadow:0 12px 26px rgba(17,24,39,.10); 
}

.mt-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;
}

/* ★★★ ラベルのスタイルを修正 ★★★ */
.mt-age,
.mt-tag{
  padding: 0.5em 0.9em; /* 内側余白を調整 */
  font-weight: 900;     /* 太字に */
  font-size: 14px;      /* フォントサイズを大きく */
  line-height: 1;
}

.mt-age{
  color:var(--brand-700); background:var(--brand-100);
  border:1px solid rgba(24,64,142,.15);
  border-radius:8px; 
}
.mt-tag{
  color:#7b1a1f; background:var(--accent-100);
  border:1px solid rgba(193,18,31,.25);
  border-radius:999px;
}
/* ★★★ ここまで ★★★ */

.mt-list{ 
  margin:0 0 12px; padding-left:1.2em; color:var(--muted); 
  font-size:14px; line-height:1.8; 
  flex-grow: 1; /* ★追加: 高さを揃えるため */
}
.mt-list li + li{ margin-top:4px; }
.mt-action{
  color:var(--ink); font-weight:700; font-size:13px;
  border-top:1px dashed var(--border); padding-top:12px;
}

.maint-warning{
  margin-top:24px; padding:16px 20px;
  border:2px solid rgba(193,18,31,.35);
  background:linear-gradient(180deg, #fff, var(--accent-100));
  border-radius:12px;
}
.mw-head{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;
}
.mw-ico {
  font-size: 1.2em;
}
.mw-title{
  color:#7b1a1f; font-weight:900; font-size:clamp(15px,1.8vw,18px);
}
.mw-points{
  margin:0; padding-left:1.2em; color:#7b1a1f; font-size:14px; line-height:1.8;
}
.mw-points li + li{ margin-top:4px; }

/* ===================== こんなお悩みございませんか (#problems) ===================== */
.problems {
  font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  padding: 60px 12px;
  margin: 0 auto;
  max-width: 1200px;
}

.problems-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.problems h2,
.problems .problems-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.problems h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(20px, 2.8vw, 28px);
}

.problems .problems-lead {
  margin-bottom: 40px;
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 15px);
  max-width: 65ch;
  line-height: 1.8;
}

.problems-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: problem-counter;
}

@media (max-width: 1100px) {
  .problems-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .problems-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .problems-grid {
    grid-template-columns: 1fr;
  }
}

/* ★ 問題カードに赤枠のみ追加 */
.pb-card {
  position: relative;
  background: var(--surface);
  border: 2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, .05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
  overflow: hidden;
  /* ★ 修正：カード全体に中央揃えを適用 */
  text-align: center;
}

.pb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .08);
  border-color: #dc2626; /* ホバー時の赤い枠線 */
}

.pb-card::before {
  counter-increment: problem-counter;
  content: "0" counter(problem-counter);
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-100);
  line-height: 1;
  z-index: 0;
}

.pb-card h3,
.pb-card p {
  position: relative;
  z-index: 1;
}

.pb-card h3 {
  margin: 16px 0 8px;
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 17px);
}

.pb-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 13px;
}

/* ===================================================================
   5つのお約束（promises）
=================================================================== */
.promises.pro{
  padding:56px 12px; margin:0 auto; max-width:1200px;
  font-family:'Noto Sans JP',system-ui,-apple-system,'Segoe UI',Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
.pm-inner{ max-width:1000px; margin:0 auto; }
.promises h2{ margin:0 0 8px; color:var(--ink); font-weight:900; font-size:clamp(20px,2.6vw,28px); text-align:center; }
.pm-lead{
  margin:0 auto 40px; color:var(--muted); font-size:clamp(13px,1.2vw,14.5px);
  text-align:center; max-width:60ch; line-height:1.7;
}
.pm-list{ list-style:none; margin:0; padding:0; display:grid; gap:32px; }

/* ★ お約束カードに赤枠のみ追加 */
.pm-item{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,5vw,48px); align-items:center;
  background:linear-gradient(135deg,var(--surface) 0%,#fafbff 100%);
  border:2px solid #ef4444; /* 赤い枠線のみ追加 */
  border-radius:24px;
  padding:clamp(24px,4vw,32px); box-shadow:0 12px 32px rgba(17,24,39,.08);
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s;
  overflow:hidden;
}
.pm-item:hover{ 
  transform:translateY(-6px); 
  box-shadow:0 18px 40px rgba(17,24,39,.12); 
  border-color:#dc2626; /* ホバー時の赤い枠線 */
}
.pm-item:nth-child(even) .pm-media{ order:2; }
.pm-item:nth-child(even) .pm-body{ order:1; }

.pm-media{
  position:relative; border-radius:16px; overflow:hidden; background:var(--brand-100);
  display:grid; place-items:center; aspect-ratio:4/3; width:100%;
}
.pm-img{ width:100%; height:100% !important; object-fit:cover; display:block; }
.pm-ico{
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  display:grid; place-items:center; color:#fff; box-shadow:0 8px 20px rgba(11,50,111,.25);
}
.pm-ico svg{ width:40px; height:40px; }
.pm-cap{ display:none; }

.pm-head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.pm-body h3{ margin:0; color:var(--ink); font-weight:800; font-size:clamp(18px,2.2vw,22px); line-height:1.4; }
.pm-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:var(--accent-100); color:var(--accent-700);
  font-weight:900; font-size:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--accent-700); flex-shrink:0;
}
.pm-body > p{ margin:0 0 16px; color:var(--muted); line-height:1.8; font-size:clamp(14px,1.4vw,15px); }
.pm-meta{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.pm-meta li{ background:#fff; color:var(--brand-700); padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--border); }

@media (max-width:900px){
  .pm-item{ text-align:center; }
  .pm-item:nth-child(even) .pm-media,.pm-item:nth-child(even) .pm-body{ order:initial; }
  .pm-media{ max-width:320px; margin:0 auto; }
  .pm-head{ flex-direction:column; align-items:center; }
  .pm-meta{ justify-content:center; }
}

/* Promises 画像余白対策（セクションIDを使う場合） */
#promises figure.pm-media, #promises .pm-media{ margin:0; padding:0; border:none; }
#promises .pm-media.has-img{ background:transparent; border:none; }
#promises .pm-media .pm-img{ display:block; width:100%; height:100% !important; object-fit:cover; object-position:center; }

/* ===================================================================
   サービス価格・内容（service-section）
=================================================================== */
.service-section{ margin:0; padding:0; width:100%; }
.price-banner{ text-align:center; margin-bottom:25px; }
.price-main{ font-size:2.7rem; font-weight:900; color:#e74c3c; line-height:1; margin-bottom:8px; font-family:'Arial Black',Arial,sans-serif; letter-spacing:-2px; }
.price-sub{ font-size:1.1rem; color:#333; font-weight:400; font-family:Arial,sans-serif; }
.service-content{
  background:linear-gradient(135deg,#fff 0%,#f8f9ff 100%); border-radius:15px; padding:25px;
  box-shadow:0 8px 25px rgba(0,0,0,.08); border:1px solid #e8ecf4; margin:0; position:relative; width:100%; box-sizing:border-box;
}
.service-content::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#667eea,#764ba2); border-radius:15px 15px 0 0;
}
.service-title{
  font-size:1.4rem; font-weight:700; color:#2c3e50; margin-bottom:20px;
  display:flex; align-items:center; gap:8px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.service-title::before{ content:'🔧'; font-size:1.2rem; }
.service-list{ margin:0; padding:0; list-style:none; }
.service-list li{
  font-size:1rem; color:#5a6c7d; padding:12px 0; line-height:1.5; border-bottom:1px solid #f0f4f8;
  display:flex; align-items:center; gap:12px; transition:transform .3s ease, color .3s ease;
}
.service-list li:last-child{ border-bottom:none; }
.service-list li:hover{ color:#2c3e50; transform:translateX(8px); }
.service-list li::before{
  content:'✓'; color:#4CAF50; font-weight:700;
  background:linear-gradient(135deg,#e8f5e8 0%,#d4edda 100%);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0; box-shadow:0 2px 6px rgba(76,175,80,.2);
}
@media (max-width:768px){
  .price-main{ font-size:2.5rem; letter-spacing:-1px; }
  .price-sub{ font-size:1rem; }
  .service-title{ font-size:1.2rem; }
  .service-list li{ font-size:.95rem; }
}
@media (max-width:480px){
  .price-main{ font-size:2rem; letter-spacing:-1px; }
  .price-sub{ font-size:.9rem; }
  .service-list{ padding-left:18px; }
}

/* ===================================================================
   外壁修理の特長（whypro）- フォントサイズ改善・現実的内容版
=================================================================== */
.whypro {
  padding: 60px 20px;
  margin: 0 auto;
  max-width: 1200px;
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: transparent;
}

.whypro-header {
  text-align: center;
  margin-bottom: 48px;
}

.whypro-header h2 {
  margin: 0 0 12px;
  color: var(--ink, #0E1116);
  font-weight: 900;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.02em;
}

.whypro-header p {
  margin: 0;
  color: var(--muted, #6B7280);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.whypro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
  counter-reset: card-counter;
}

.whypro-card {
  background: var(--surface, #FFFFFF);
  border: 2px solid #ef4444;
  border-radius: 20px;
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(11, 50, 111, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 440px;
}

.whypro-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(239,68,68,0.15);
  border-color: #dc2626;
}

.whypro-card::after {
  counter-increment: card-counter;
  content: "0" counter(card-counter);
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  font-weight: 900;
  color: rgba(24, 64, 142, 0.08);
  line-height: 1;
  z-index: 0;
}

.whypro-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #C1121F);
  color: white;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(193, 18, 31, 0.25);
  z-index: 10;
  border: 2px solid white;
  letter-spacing: 0.02em;
}

.whypro-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500, #18408E) 0%, #1E40AF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px auto 20px;
  color: white;
  box-shadow: 0 8px 24px rgba(24, 64, 142, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.whypro-card:hover .whypro-icon {
  transform: scale(1.05);
  background: linear-gradient(135deg, #ef4444, #f87171);
  box-shadow: 0 12px 32px rgba(239,68,68,0.35);
}

.whypro-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.8;
}

.whypro-card h3 {
  margin: 0 0 14px;
  color: var(--ink, #0E1116);
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.3;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.whypro-card:hover h3 {
  color: #dc2626;
}

.whypro-card > p {
  margin: 0 0 18px;
  color: var(--muted, #6B7280);
  line-height: 1.6;
  font-size: clamp(13px, 1.2vw, 14px);
  position: relative;
  z-index: 2;
}

.whypro-details {
  margin: 16px 0;
  padding: 14px 12px;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-left: 4px solid #ef4444;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 8px rgba(239,68,68,0.08);
}

.whypro-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 800;
  color: var(--accent, #C1121F);
  font-size: 13px;
}

.whypro-warranty {
  text-align: center;
  font-size: 12px;
  color: var(--brand-500, #18408E);
  font-weight: 700;
  margin-bottom: 8px;
}

.whypro-features {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(239,68,68,0.2);
}

.whypro-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}

.whypro-features li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted, #6B7280);
  line-height: 1.4;
  transition: all 0.2s ease;
}

.whypro-features li:hover {
  color: #374151;
  padding-left: 4px;
}

.whypro-features li::before {
  content: '✓';
  color: #ef4444;
  font-weight: 900;
  font-size: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand-100, #E4ECFA);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(239,68,68,0.2);
}

.whypro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  background: var(--brand-navy, #0B326F);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 50, 111, 0.2);
}

.whypro-stat {
  text-align: center;
  padding: 26px 16px;
  color: white;
  position: relative;
}

.whypro-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.whypro-stat-number {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--accent-100, #FCE5E7);
  line-height: 1.1;
  margin-bottom: 6px;
}

.whypro-stat-label {
  font-size: clamp(12px, 1.3vw, 14px);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  line-height: 1.2;
}

.whypro-certifications {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid var(--border, #E5EAF3);
  border-radius: 20px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700, #072657);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cert-badge::before {
  content: '🏅';
  font-size: 16px;
}

@media (max-width: 1100px) {
  .whypro-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .whypro-card {
    min-height: 420px;
    padding: 26px 20px 22px;
  }
  
  .whypro-features ul {
    grid-template-columns: 1fr;
    gap: 10px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .whypro {
    padding: 40px 16px;
  }
  
  .whypro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .whypro-card {
    padding: 28px 22px 26px;
    min-height: 380px;
  }
  
  .whypro-badge {
    font-size: 12px;
  }
  
  .whypro-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .whypro-stat {
    padding: 22px 14px;
  }
  
  .whypro-certifications {
    gap: 14px;
  }
  
  .cert-badge {
    padding: 8px 14px;
    font-size: 11px;
  }
  
  .whypro-features ul {
    font-size: 13px;
    gap: 12px;
  }
  
  .whypro-price {
    font-size: 14px;
  }
  
  .whypro-warranty {
    font-size: 13px;
  }
  
  .whypro-card > p {
    font-size: 14px;
  }
  
  .whypro-card h3 {
    font-size: 17px;
  }
  
  .whypro-stat-number {
    font-size: clamp(26px, 4vw, 32px);
  }
  
  .whypro-stat-label {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .whypro-stats {
    grid-template-columns: 1fr;
  }
  
  .whypro-stat::after {
    display: none;
  }
  
  .whypro-features ul {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whypro-card,
  .whypro-icon {
    transition: none !important;
  }
}


/* ===================================================================
   Voices（お客様の声・写真なし）
=================================================================== */
.voices{
  padding:56px 12px; margin:0 auto; max-width:1200px;
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
.voices .vc-inner{ max-width:1100px; margin:0 auto; }
.voices h2{ margin:0 0 6px; color:var(--ink); font-weight:900; font-size:clamp(20px,2.6vw,28px); }
.voices .vc-lead{ margin:0 0 18px; color:var(--muted); font-size:clamp(13px,1.2vw,14.5px); }
.voices .vc-grid{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .voices .vc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .voices .vc-grid{ grid-template-columns:1fr; } }
.voices .vc-card{
  background:linear-gradient(#fff,#fff) padding-box,
             radial-gradient(120% 120% at 0% 0%, rgba(24,64,142,.12), rgba(193,18,31,.10)) border-box;
  border:1px solid transparent; border-radius:16px; padding:14px 16px;
  box-shadow:0 10px 22px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  display:flex; flex-direction:column; gap:10px;
}
.voices .vc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.voices .vc-stars{ font-weight:900; letter-spacing:.06em; color:#F5B301; }
.voices .vc-meta{ display:grid; gap:2px; text-align:right; }
.voices .vc-name{ margin:0; font-weight:800; color:var(--ink); font-size:14px; }
.voices .vc-kind{ margin:0; color:var(--muted); font-size:13px; } /* 12px → 13px */
.voices .vc-date{ margin:0; color:#6b7a86; font-size:12px; } /* 11.5px → 12px */
.voices .vc-quote{
  margin:0; color:#223246; line-height:1.9; font-size:14px;
  background:linear-gradient(180deg,#fff,#fff) padding-box,
             radial-gradient(140% 100% at 0% 0%, rgba(11,50,111,.06), transparent) border-box;
  border:1px solid var(--border); border-radius:12px; padding:12px;
}

/* モバイル用お客様の声フォントサイズ改善 */
@media (max-width: 600px) {
  .voices .vc-quote {
    font-size: 15px;
    line-height: 2; /* 行間も広げる */
    padding: 18px 20px; /* パディングを増加 */
  }
  
  .voices .vc-name {
    font-size: 15px;
  }
  
  .voices .vc-date {
    font-size: 13px;
  }
  
  .voices .vc-card {
    padding: 18px 20px; /* パディングを増加 */
  }
}

/* ===================================================================
   FAQ（<details>アコーディオン）- デザイン修正版
=================================================================== */
.faq{
  padding:56px 12px; margin:0 auto; max-width:1200px;
  font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
.faq .fq-inner{ max-width:920px; margin:0 auto; }
.faq h2{ margin:0 0 6px; color:var(--ink); font-weight:900; font-size:clamp(20px,2.6vw,28px); }
.faq .fq-lead{ margin:0 0 18px; color:var(--muted); font-size:clamp(13px,1.2vw,14.5px); }
.faq .fq-list{ display:grid; gap:10px; }

.faq .fq-item{
  border:1px solid var(--border);
  border-radius:14px;
  background: var(--surface); /* シンプルな背景に変更 */
  transition: border-color 0.3s ease;
  overflow: hidden;
}
.faq .fq-item[open]{ 
  border-color: var(--brand-100); 
  box-shadow:0 10px 24px rgba(17,24,39,.06); 
}

.faq .fq-item > summary{
  list-style:none; 
  cursor:pointer; 
  padding:16px;
  display:flex; 
  align-items:center; 
  gap:12px; 
  font-weight:900; 
  color:#0b1f3b;
}
.faq .fq-item > summary::-webkit-details-marker{ display:none; }

/* ★★★ アイコンのデザインを「+ / ×」に変更 ★★★ */
.faq .fq-item > summary::after{
  content:"";
  margin-left:auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--brand-100);
  background-image: 
    /* 縦棒 */
    linear-gradient(to right, var(--brand-500), var(--brand-500)),
    /* 横棒 */
    linear-gradient(to right, var(--brand-500), var(--brand-500));
  background-size: 2px 12px, 12px 2px; /* 棒の太さと長さ */
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.faq .fq-item[open] > summary::after{ 
  transform: rotate(225deg); /* + を × にアニメーション */
  background-color: var(--accent-100);
  background-image: 
    /* 縦棒 */
    linear-gradient(to right, var(--accent-700), var(--accent-700)),
    /* 横棒 */
    linear-gradient(to right, var(--accent-700), var(--accent-700));
}
/* ★★★ ここまで ★★★ */


.faq .fq-q{ font-size:clamp(15px,1.6vw,17px); letter-spacing:.01em; } /* 質問も少し大きく */

.faq .fq-a{
  padding: 0 16px 16px 16px; /* 上パディングを削除 */
  color:var(--muted); 
  line-height:2; /* 行間を広げる */
  font-size:clamp(14px,1.4vw,15px); /* 最小値を13px→14pxに */
  border-top:1px solid var(--border);
  margin: 0 16px; /* 回答エリアに左右の余白を設ける */
  padding-top: 16px; /* ボーダーとの間に余白を設ける */
}

/* モバイル用FAQフォントサイズ改善 */
@media (max-width: 600px) {
  .faq .fq-a {
    font-size: 15px; /* モバイルでは固定15px */
    padding: 0 18px 18px 18px; /* パディングを増加 */
    margin: 0 18px;
    padding-top: 18px;
  }
  
  .faq .fq-q {
    font-size: 16px;
  }
  
  .faq .fq-item > summary {
    padding: 18px; /* パディングを増加 */
  }
}

/* details[open]になった瞬間にアニメーションがスムーズになるように調整 */
.faq .fq-item[open] .fq-a {
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* CTA（任意） */
.faq .fq-cta{ display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.faq .btn-accent{
  text-decoration:none; background:var(--accent); color:#fff; font-weight:900; letter-spacing:.02em;
  padding:12px 18px; border-radius:12px; box-shadow:0 12px 28px rgba(193,18,31,.28);
}
.faq .btn-accent:hover{ background:var(--accent-700); }
.faq .btn-ghost{
  text-decoration:none; font-weight:800; color:var(--brand-700);
  background:#fff; border:1px solid var(--border); padding:12px 16px; border-radius:12px;
}

@media (max-width:640px){ .faq .fq-item > summary{ padding:14px; } }
@media (prefers-reduced-motion:reduce){ .faq .fq-item > summary::after, .faq .fq-item[open] .fq-a { transition:none; animation: none;} }

/* ===================================================================
   対応エリア（Lite：見出し/ボタンなし）
=================================================================== */
.areas-lite{
  padding:56px 12px;
  font-family:'Noto Sans JP',system-ui,-apple-system, Segoe UI, Roboto,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.areas-lite *{ box-sizing:border-box; }
.areas-lite .al-inner{ max-width:1100px; margin:0 auto; }
.areas-lite .al-grid{ display:grid; gap:24px; grid-template-columns:1fr; margin:0 auto; }
.areas-lite .al-card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:28px 24px; box-shadow:0 12px 32px rgba(17,24,39,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.areas-lite .al-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(17,24,39,.1); }
.areas-lite .al-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:16px; }
.areas-lite .al-badge{
  padding:4px 10px; border-radius:999px; font-weight:700; font-size:11px; color:#7b1a1f;
  background:var(--accent-100); border:1px solid rgba(193,18,31,.2);
}
.areas-lite .al-card h3{ margin:0; color:var(--ink); font-weight:800; font-size:clamp(18px,2vw,22px); }
.areas-lite .al-note{ margin:0; color:var(--muted); font-size:13px; width:100%; line-height:1.6; }
.areas-lite .al-chips{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.areas-lite .al-chips li{
  border:1px solid transparent; background:var(--border); color:var(--brand-700);
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:12.5px;
  transition:background-color .2s ease, color .2s ease;
}
.areas-lite .al-chips li:hover{ background-color:var(--brand-100); color:var(--brand-500); }

/* ===================================================================
   レスポンシブ フォントサイズ改善（追加修正）
=================================================================== */

/* サービス内容（service-section）- リスト項目拡大 */
@media (max-width: 600px) {
  .service-list li {
    font-size: 14px; /* .95rem → 14px */
    padding: 14px 0; /* パディングも広げる */
  }
  
  .service-title {
    font-size: 18px; /* 1.2rem → 18px */
  }
}

/* メンテナンス事実（maint）- カード内テキスト拡大 */
@media (max-width: 600px) {
  .mt-list {
    font-size: 15px; /* 14px → 15px */
    line-height: 2;
  }
  
  .mt-action {
    font-size: 14px; /* 13px → 14px */
  }
  
  .mt-age,
  .mt-tag {
    font-size: 13px; /* より読みやすく */
  }
}

/* 5つのお約束（promises）- 説明文拡大 */
@media (max-width: 600px) {
  .pm-body > p {
    font-size: 15px; /* clamp → 固定15px */
  }
  
  .pm-meta li {
    font-size: 13px; /* 12px → 13px */
  }
}

/* 全体的なベースフォントサイズ調整 */
@media (max-width: 600px) {
  /* 小さすぎるテキストを一括で調整 */
  .problems .pb-card p {
    font-size: 14px; /* 13px → 14px */
  }
  
  .reason .rs-card p {
    font-size: 15px; /* 14px → 15px */
  }
  
  /* 重要な情報はさらに大きく */
  .whypro-header p {
    font-size: 16px;
  }
  
  .problems .problems-lead,
  .reason .reason-lead {
    font-size: 15px;
  }
}

/* ===================================================================
   Motion Reduce（全体）
=================================================================== */
@media (prefers-reduced-motion:reduce){
  .rs-card, .rx-cta, .mt-card, .pb-card, .btn-accent,
  .service-list li, .pm-item, .whypro-card, .areas-lite .al-card{ transition:none !important; }
}

/* ===================================================================
   印刷対応 - 赤い枠線
=================================================================== */
@media print {
  .pb-card,
  .mt-card,
  .rs-card,
  .pm-item,
  #construction-flow .cfp-body {
    border: 1px solid #ef4444 !important;
    box-shadow: none !important;
  }
}/* End custom CSS */