@charset "UTF-8";
/* CSS Document */



/* まず確実に当てる（デバッグも兼ねて） */
/* ======================================================================== */
/* 01 : ここだけの記述では十分に反映されなかったが、下記CSSの反映でPC表示は改善 */ 
/* 02 : ただSP表示はここを削除すると表示無しの段階。その為削除せずに一旦進めることとする */ 
/* 03 : 進行に伴い不要になればここは削除 */ 
/* 04 : spは２段構成になっているためその作業が進めば表示改善されるはず 
/* ======================================================================== */
body.work-demolition.no-slider #box1.slider{
  background-image: url("paint-img/fv-demolition-default-001.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* ======================================================================== */
/* FV PC表示用CSS 20260106 */
/* ======================================================================== */
/* 01 : PC表示はひとまずOK */ 
/* 02 : 次にSP用の設定を急ぐ  */ 
/* ======================================================================== */

/* 解体：FV背景（no-sliderでも確実に出す） */
body.work-demolition #box1 .slider{
  background-image: url("paint-img/fv-demolition-default-001.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 767px){
  body.work-demolition #box1 .slider{
    background-image: url("paint-img/fv-paint-default-001sp.jpg");
  }
}
/* ======================================================================== */
/* FV SP表示用CSS 20260106 */
/* ======================================================================== */
/* 01 : 上下で分けているSP表示用CSS  											*/ 
/* 02 : 先ずはテスト -- 解体工事用imgフォルダ内で入れ替えていく 				 */
/* ======================================================================== */
/* 03 : 注意点 / body後に続くpaint-imgをwork~demolitionに変更することを忘れずに 		*/
/* ======================================================================== */


.sp-fv-main{ 
width:80vw; 
height:auto;
}
@media (max-width: 767px) {
.sp-fv-main{ 
width:90%; 
height:auto;
position:relative;
top:1vh;
left:4%;
padding-top:16%;
padding-bottom:4%; 
}
}





@media (max-width: 767px) {
/* FV背景：上（写真） */
body.work-demolition #box1 .sp-top {
width: 100%;
/* ここが肝：背景だけのdivに高さを作る */
min-height: 52%;
background-image: url("paint-img/sp-top.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

/* FV背景：下（青） */
body.work-demolition #box1 .sp-bottom {
width: 100%;
min-height: 48%;
padding-top:4%;
padding-bottom:20%;
background-image: url("paint-img/sp-bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}



body.work-demolition #box1 .section-head {
position:relative;
top:16%;
left:4%;
z-index: 1; 
}
@media (max-width: 767px) {
body.work-demolition .section-head {
background: none;
}
}

body.work-demolition #box1 .section-head-demolition {
position:relative;
top:20%;
left:4%;
z-index: 1; 
}
@media (max-width: 767px) {
body.work-demolition .section-head-demolition {
background: none;
margin-top:26%;
}
}

body.work-demolition #box1 .typography{
position:absolute; 
top:-8%;
left:0%;
width:64%;
height:auto;
}
@media (max-width: 767px) {
body.work-demolition #box1 .typography{
top:11%;
left:8%;
width:80%;
height:auto;
}
}

/* FV内部各要素サイズ調整ブロック */ 
body.work-demolition .work-title{ 
width:16%!important;
height:auto!important;
margin-bottom:2%;
position: relative;
z-index:10;
}
@media (max-width: 767px) {
body.work-demolition .work-title{ 
width:100%!important;
height:auto!important;
position: relative;
}
}

body.work-demolition #box1 .main-title{ 
width:56%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box11 .main-title{ 
width:56%!important;
height:auto!important;
}
}


body.work-demolition #box1 .sub-title{ 
width:56%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box1 .sub-title{ 
width:54%!important;
height:auto!important;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-box1 {
position: absolute;
left: 50%;
bottom:8%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-box1 {
bottom:5%!important;
}
}


body.work-demolition #box3 {
/* padding-top: 8%; */
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box3-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box3 {
min-height:auto;
padding-top:4%;
padding-bottom:4%;
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box3-spbg.jpg") center / cover no-repeat;
}
}





/* ==================================================
-- box4 
-- 施工事例 ・ 解体工事
-- 補完CSS 
================================================== */
body.work-demolition #box4 {
/* padding-top: 8%; */
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box4-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box4 {
min-height:auto;
padding-top:4%;
padding-bottom:4%;
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box4-spbg.jpg") center / cover no-repeat;
}
}

body.work-demolition #box4 .section-head {
position:relative;
/* top:4vh; */
margin-top:2%;
margin-bottom:2%;
}
@media (max-width: 767px) {
body.work-demolition #box4 .section-head { 
background: none;
top:0vh;
margin-top:26%;
}
}

body.work-demolition #box4 .typography{
position:absolute; 
top:8vh;
left:4vw;
width:90%;
height:auto;
}
@media (max-width: 767px) {
body.work-demolition #box4 .typography{
top:4%;
left:4%;
width:90%;
height:auto;
}
}

body.work-demolition #box4 .main-title{ 
width:18vw!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box4 .main-title{ 
width:56%!important;
height:auto!important;
}
}

/* ASTECペイント 第一位エンブレム  */
body.work-demolition #box4 .sub-title{ 
width:64%!important;
height:auto!important;
margin-top:2%;
}
@media (max-width: 767px) {
body.work-demolition #box4 .sub-title{ 
width:100%!important;
height:auto!important;
}
}

/* ASTECペイントとは? の部分 */
body.work-demolition #box4 .sub-title-2{ 
width:32vw!important;
height:auto!important;
margin-top:-2vh;
}
@media (max-width: 767px) {
body.work-demolition #box4 .sub-title-2{ 
width:80%!important;
height:auto!important;
}
}

body.work-demolition #box4.townlogo {
width:50%!important;
}
@media (max-width: 767px) {
body.work-demolition #box4 .townlogo {
width:64%!important;
}
}

body.work-demolition #box4 .object {
position:absolute;
bottom:0vh; 
right:0vw;
width:56vw!important;
height: auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box4 .object {
position:absolute;
top:8vh; 
right:4vw;
width:95%!important;
height: auto!important;
margin:0 auto;
}
}

body.work-demolition #box4 .section-block {
}
@media (max-width: 767px) {
body.work-demolition #box4 .section-block {
background: none;
margin-top:3%;
}
}


body.work-demolition #box4 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
color: #6b3e16;
font-weight: 600;
letter-spacing: 0.1em;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.6);}
@media (max-width: 767px) {
body.work-demolition #box4 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color: #6b3e16;
font-weight: 600;
letter-spacing: 0.1em;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.6);
}
}

/* ===== Scroll Indicator dark ver ===== */

.scroll-indicator-dark-box4 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #603813;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-dark {
bottom:4%!important;
}
}

.scroll-text-dark-box4{
color: #603813!important;
}
.scroll-arrow-dark-box4{
color: #603813!important;
}


/* =========================
カードレイアウトに関するCSS 
========================= */
   
@media (max-width: 768px) {

  /* box4 内のカード列をナビの基準にする */
body.work-demolition #box4 .voice-cards {
position: relative;
}

/* ナビ全体をカードの上にかぶせる */
body.work-demolition #box4 .voice-carousel-nav.sp {
position: absolute;
inset: 0;
margin: 0;
display: block;
z-index: 20;
pointer-events: none;   /* 全体はクリックを拾わない */
top:30%;
}

/* 左右の丸ボタン共通（box3 と同じイメージ） */
#box4 .voice-carousel-nav.sp .card-nav--prev,
#box4 .voice-carousel-nav.sp .card-nav--next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
cursor: pointer;
pointer-events: auto;   /* ボタンだけクリック可 */
}

/* 左右の位置（画面中央付近） */
#box4 .voice-carousel-nav.sp .card-nav--prev { left: 30px; }
#box4 .voice-carousel-nav.sp .card-nav--next { right: 30px; }

/* 矢印アイコン（▶︎ / ◀︎ 風） */
#box4 .voice-carousel-nav.sp .card-nav--prev::before,
#box4 .voice-carousel-nav.sp .card-nav--next::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-top: 2px solid #603813;
border-right: 2px solid #603813;
transform: translate(-50%, -50%) rotate(45deg);
}

/* 左向き矢印だけ 反転 */
#box4 .voice-carousel-nav.sp .card-nav--prev::before {
transform: translate(-50%, -50%) rotate(225deg);
}

/* ドットをカード下中央に配置 */
#box4 .voice-carousel-nav.sp .dots {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
gap: 6px;
align-items: center;
pointer-events: auto;
}
}





















/* ======================================================================== 
-- セクション 2 : この道　20年の実績 
-- box12 
===========================================================================
-- オーバーライドCSS
-- 120514:21 
-- 先ずは背景画像の変更のみ進める 
-- 既存(塗装工事セクションCSSへの上書き)
-- 上書き手順イメージ 
-- body.work-demolition #box12
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */
@media (max-width: 767px) {
.photo-demo { 
position:relative;
bottom:4vh;
}
}

body.work-demolition #box12 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box12-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box12 {
min-height:auto;
padding-top: 4%;
padding-bottom:4%;
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box12-spbg.jpg") center / cover no-repeat;
}
}

body.work-demolition #box12 .section-head {
position:relative;
top:4vh;
margin-bottom: clamp(32px, 3vh, 56px); 
}
@media (max-width: 767px) {
body.work-demolition #box12 .section-head {
background: none;
top:0vh;
margin-top:32%;
}
}

body.work-demolition #box12 .typography{
position:absolute; 
top:12%;
left:4%;
width:72%;
height:auto;
}
@media (max-width: 767px) {
body.work-demolition #box12 .typography{
top:4%;
left:4%;
width:90%;
height:auto;
}
}


body.work-demolition #box12 .town{ 
width:50%;
height:auto;
}
@media (max-width: 767px){
body.work-demolition #box12 .town{ 
width:100%;
height:auto;
}
}


body.work-demolition #box12 .main-title{ 
width:74%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box12 .main-title{ 
width:64%!important;
height:auto!important;
}
}


body.work-demolition #box12 .sub-title{ 
width:50%!important;
height:auto!important;
margin-top:-1%;
}
@media (max-width: 767px) {
body.work-demolition #box12 .sub-title{ 
width:94%!important;
height:auto!important;
}
}

.sub2-pc-edit {
width:44%;
height:auto;
margin-top:-2%;
}

body.work-demolition #box12.townlogo {
width:50%!important;
}
@media (max-width: 767px) {
#box12 .townlogo {
width:100%!important;
}
}

body.work-demolition .badge {
width:75%!important;
height: auto!important;
}
@media (max-width: 767px) {
.badge {
width:95%!important;
height: auto!important;
margin:0 auto;
}
}

body.work-demolition #box12 .section-block {

}
@media (max-width: 767px) {
#box12 .section-block {
background: none;
margin-top:6%;
}
}


body.work-demolition .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
margin-top:-1%;
}
@media (max-width: 767px) {
body.work-demolition .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color:#603813;
}
}

body.work-demolition .section-lead-2 {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
margin-top:1%;
}
@media (max-width: 767px) {
body.work-demolition .section-lead-2 {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color:#603813;
}
}




.scroll-indicator-dark-box12 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: white;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-dark-box12 {
bottom:4%!important;
}
}



/* ======================================================================== 
-- セクション 
-- box13
-- 解体工事 国家資格取得者が安心安全の解体工事を提供します 
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 例
-- body.work-demolition #box25
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */
@media (max-width: 767px) {
.photo-demo-2 { 
position:relative;
bottom:1vh;
}
}


body.work-demolition #box13 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box13-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box13 {
min-height:auto!important;
padding-top: 4%;
padding-bottom: 4%;
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box13-spbg.jpg") center / cover no-repeat;
}
}


body.work-demolition #box13 .section-head {
position:relative;
top:0vh;
margin-top:4%;
margin-bottom: clamp(32px, 3vh, 56px); 
}
@media (max-width: 767px) {
body.work-demolition #box13 .section-head {
background: none;
top:0vh;
margin-top:24%;
}
}

body.work-demolition #box13 .section-subtitle {
position:relative;
top:0vh;
margin-top:2%;
margin-bottom: clamp(32px, 3vh, 56px); 
}
@media (max-width: 767px) {
body.work-demolition #box13 .section-subtitle {
background: none;
top:0vh;
margin-top:4%;
}
}

body.work-demolition #box13 .typography{
position:absolute; 
top:14vh;
left:4vw;
width:74%;
height:auto;
opacity:0.7;
}
@media (max-width: 767px) {
body.work-demolition #box13 .typography{
top:0vh;
left:4%;
margin-top:8%;
width:90%;
height:auto;
}
}


body.work-demolition #box13 .main-title{ 
width:64%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box13 .main-title{ 
width:96%!important;
height:auto!important;
}
}


body.work-demolition #box13 .sub-title{ 
width:48%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box13 .sub-title{ 
width:100%!important;
height:auto!important;
}
}


body.work-demolition #box13.townlogo {
width:50%!important;
}
@media (max-width: 767px) {
#box13 .townlogo {
width:64%!important;
}
}

body.work-demolition #box13 .section-block {

}
@media (max-width: 767px) {
body.work-demolition #box13 .section-block {
background: none;
margin-top:8%;
}
}


body.work-demolition #box13 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
color: #6b3e16;
font-weight: 600;
/* letter-spacing: 0.1em; */
text-shadow:
/* 縁取り（白線） */
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff,

/* ぼかし（外側） */
0  0  8px rgba(255,255,255,0.8),
0  0 16px rgba(255,255,255,0.6);
}
@media (max-width: 767px) {
body.work-demolition #box13 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);

color: #6b3e16;
font-weight: 600;
letter-spacing: 0.1em;
text-shadow:
/* 縁取り（白線） */
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px  1px 0 #fff,
1px  1px 0 #fff,

/* ぼかし（外側） */
0  0  8px rgba(255,255,255,0.8),
0  0 16px rgba(255,255,255,0.6);
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
position: absolute;
left: 50%;
bottom:8%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator {
bottom:8%!important;
}
}

.scroll-indicator-dark-box13 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: white; /* #603813; */
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-dark-box13 {
bottom:4%!important;
}
}






/* ======================================================================== 
-- セクション ? : W造解体について
-- box21 
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 
-- body.work-demolition #box21
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */

body.work-demolition #box21 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box21-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box21 {
padding-top: clamp(4px, 8vh, 16px);
padding-bottom: clamp(24px, 40vh, 88px);
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box21-spbg.jpg") center / cover no-repeat;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box21 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box21  {
bottom:3.6%!important;
}
}


/* ======================================================================== 
-- セクション ? : S造解体について
-- box22 
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 
-- body.work-demolition #box22
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */

body.work-demolition #box22 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box22-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box22 {
padding-top: clamp(4px, 8vh, 16px);
padding-bottom: clamp(24px, 40vh, 88px);
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box22-spbg.jpg") center / cover no-repeat;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box22 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box22  {
bottom:3.6%!important;
}
}

/* ======================================================================== 
-- セクション ? : RC造解体について
-- box23 
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 
-- body.work-demolition #box23
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */
body.work-demolition #box23 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box23-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box23 {
padding-top: clamp(4px, 8vh, 16px);
padding-bottom: clamp(24px, 40vh, 88px);
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box23-spbg.jpg") center / cover no-repeat;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box23 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box23  {
bottom:3.2%!important;
}
}

/* ================================================ */
/* RC造解体工事フレーム設定
/* ================================================ */
.frame-main-title-rc{
width:88%;
height:auto;
}
@media (max-width: 767px) {
.frame-main-title-rc{
width:100%;
height:auto;
}
}







/* ======================================================================== 
-- セクション ? : その他
-- box24 
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 
-- body.work-demolition #box24
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */
body.work-demolition #box24 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box24-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box24 {
padding-top: clamp(4px, 8vh, 16px);
padding-bottom: clamp(24px, 40vh, 88px);
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box24-spbg.jpg") center / cover no-repeat;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box24 {
position: absolute;
left: 50%;
bottom:8%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box24  {
bottom:8%!important;
}
}

/* ================================================ */
/* フレーム4 / その他 内部構成設定 
/* ================================================ */
.frame-main-title-etc{
width:88%;
height:auto;
}
@media (max-width: 767px) {
.frame-main-title-etc{
width:100%;
height:auto;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box24 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #fff;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box24  {
bottom:3.2%!important;
}
}


body.work-demolition .scroll-indicator-dark-box24 {
position: absolute;
left: 50%;
bottom:4%;
transform: translateX(-50%);
text-align: center;
color: #603813;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
body.work-demolition .scroll-indicator-dark-box24 {
bottom:3%!important;
color: #fff;
}
}

@media (max-width: 767px) {
body.work-demolition #box24 .scroll-text-dark{
color:#fff!important;
}
}



/* ======================================================================== 
-- セクション ? : w造解体、 s造解体, RC造解体, その他について
-- box25
-- 作業進行上この位置に記載するが、表示順はこのブロックの先頭
===========================================================================
-- オーバーライドCSS
-- 上書き手順イメージ 
-- body.work-demolition #box25
-- paint-img/fv-demolition-default-001.jpg
======================================================================== */

body.work-demolition #box25 {
padding-top: 8%;
position: relative;
isolation: isolate;
min-height: 100vh;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box25-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box25 {
min-height:auto;
padding-top: 4%;
padding-bottom: 4%;
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box25-spbg.jpg") center / cover no-repeat;
}
}

/* ===== Scroll Indicator ===== */
.scroll-indicator-demolition-box25 {
position: absolute;
left: 50%;
bottom:8%;
transform: translateX(-50%);
text-align: center;
color: #603813;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator-demolition-box25  {
bottom:4%!important;
}
}

body.work-demolition .section-lead-box25 {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
margin-top:2%;
}
@media (max-width: 767px) {
body.work-demolition .section-lead-box25 {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color:#603813;
}
}



/* ======================================= */
/* お客様にとって最適な解体工事を提供します 	 */
/* ４枚のリンクブロック CSS軽量化を考慮			*/ 
/*   box25 CTA / タイポ周り（前貼り替え用・軽量化版）
   - レイアウトは崩さず、重い要素（will-change/filter/box-shadow遷移）を整理
   - hoverは「transform + 疑似要素opacity」のみ（軽い）*/
/* ======================================= */

/* -----------------------------
   CTA：リンクボックス（4つ縦並び）
------------------------------ */
.demolition-link-box{
  width: 40%;
  height: auto;
  display: grid;
  gap: clamp(2px, 0.8vw, 4px);
}

@media (max-width: 767px){
  .demolition-link-box{
    width: 100%;
  }
}

/* 画像はズレ防止（重複指定を削除） */
.link-list{
  width: 100%;
  height: auto;
  display: block;
}

/* aタグを“カード”として扱う（軽量化の肝） */
.demolition-link-box a{
  display: block;
  position: relative;

  /* 角丸は維持（必要なら 0 にしてさらに軽くも可） */
  border-radius: 12px;
  overflow: hidden;

  /* 重くなる要素を撤去
     - translateZ(0) / will-change / filter / box-shadowのトランジションをやめる */
  transform: translateY(0);
  transition: transform 180ms ease;
}

/* 影は疑似要素で「opacityだけ」変える（box-shadowをアニメしない） */
.demolition-link-box a::before{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;

  /* 通常は影なし（軽い見た目） */
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* 右端の光演出：mix-blend-modeは重いので削除（見た目は維持しつつ軽く） */
.demolition-link-box a::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.18) 45%,
    transparent 70%
  );

  transform: translateX(-120%);
  opacity: 0;
  transition: transform 420ms ease, opacity 180ms ease;
}

/* hoverできる端末だけ */
@media (hover:hover){
  .demolition-link-box a:hover{
    transform: translateY(-3px);
  }
  .demolition-link-box a:hover::before{
    opacity: 1;
  }
  .demolition-link-box a:hover::after{
    transform: translateX(120%);
    opacity: 1;
  }
}

/* 押した瞬間（SPも効く）：軽く */
.demolition-link-box a:active{
  transform: translateY(-1px);
}

/* フォーカス可視化（維持） */
.demolition-link-box a:focus-visible{
  outline: 3px solid rgba(255,255,255,0.75);
  outline-offset: 4px;
}


/* =========================================================
   box25：配置調整（現状の意図を維持しつつ重複削除）
   ※ position/top はレイアウト要件なので維持
   ========================================================= */

body.work-demolition #box25 .section-head{
  position: relative;
  top: 4vh;
  margin-bottom: clamp(32px, 3vh, 56px);
}

@media (max-width: 767px){
  body.work-demolition #box25 .section-head{
    background: none;
    top: 0vh;
	margin-top:40%;
  }
}

body.work-demolition #box25 .typography{
  position: absolute;
  top: 14vh;
  left: 4vw;
  width: 54%;
  height: auto;
  opacity:0.3;
}

@media (max-width: 767px){
  body.work-demolition #box25 .typography{
    top: 3%;
    left: 4%;
    width: 90%;
  }
}

body.work-demolition #box25 .main-title{
  width: 56vw !important;
  height: auto !important;
}

@media (max-width: 767px){
  body.work-demolition #box25 .main-title{
    width: 86% !important;
  }
}

/* ================================================ */








/* ================================================ */
/* SEO対策の為に */
/* 視覚的には隠すが、スクリーンリーダーや検索エンジンには残る */
/* ================================================ */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* ================================================ */
/* w造解体, s造解体, RC造解体, */
/* それぞれの表示サイズ設定が必要 */ 
/* ================================================ */
.frame-main-title{
width:56%;
height:auto;
}
@media (max-width: 767px) {
.frame-main-title{
width:80%;
height:auto;
}
}
.frame-sub-come{
width:88%;
height:auto;
}
@media (max-width: 767px) {
.frame-sub-come{
width:100%;
height:auto;
}
}















/* ここから */ 
/* =========================================================
   解体：W造解体（軽量化・全置換 / レイアウト崩れなし優先）
   - 影響の出やすい “重い描画” を避ける
   - 見た目は極力維持しつつ、DevTools編集中の「もっさり」を減らす
   ========================================================= */

/* セクション */
.section--demolition-w1{
  padding: clamp(24px, 3.2vw, 40px) 0;
  font-family: "Noto Serif JP", serif;
}

/* =========================
   フレーム（背景ブルー＋角余白）
   ========================= */
.demolition-w1__frame{
  /* 色・余白（必要な変数だけに絞る） */
  --panel-alpha: 0.70;
  --panel-blue-1: 0, 0, 255;
  --panel-blue-2: 0, 80, 255;

  --pad-outer: clamp(22px, 2.2vw, 30px);
  --pad-inner: clamp(24px, 2.6vw, 36px);

  width: 90%;
  max-width: 1720px;
  margin: 0 auto;

  position: relative;
  top: 1.8vh;

  padding: var(--pad-outer);

  border-radius: 12px;
  overflow: hidden;

  /* 背景は線形グラデのみ（軽い） */
  background: linear-gradient(
    135deg,
    rgba(var(--panel-blue-1), var(--panel-alpha)),
    rgba(var(--panel-blue-2), calc(var(--panel-alpha) - 0.04))
  );

  /* ★重いので入れない（必要になったらSPだけON等で運用）
     backdrop-filter / filter / huge shadow / blend-mode など */
}

@media (max-width: 767px){
  .demolition-w1__frame{ top: 4vh; }
}

/* =========================
   内側コンテンツ（Grid）
   - Grid自体は重くないので維持
   - ただし “描画が増える装飾” を最小化
   ========================= */
.demolition-w1__inner{
  position: relative;
  z-index: 1;

  padding: var(--pad-inner);

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;

  /* ★軽量化：layoutの影響範囲を閉じる（対応ブラウザは効く）
     体感が変わることがあるので入れてOK */
  contain: layout paint;
}

/* 左：テキスト */
.demolition-w1__copy{ color: #fff; }

.demolition-w1__heading{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 14px;
}

.demolition-w1__no{
  font-size: clamp(64px, 7vw, 92px);
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.95);
}

.demolition-w1__title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.demolition-w1__sub{
  margin: 6px 0 0;
  font-size: clamp(14px, 1.4vw, 18px);
  opacity: 0.95;
}

.demolition-w1__lead{
  margin: 0 0 16px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.9;
}

/* 強調ブロック：影やfilterは使わず、色だけで表現（軽い） */
.demolition-w1__highlight{
  margin: 14px 0;
  padding: 12px 14px;
  background: rgba(0,0,0,0.12);
  border-left: 6px solid rgba(0, 70, 190, 0.95);
  border-radius: 6px;
}

/* ★軽量化ポイント：text-shadow は地味に効くので “無し” に寄せる
   もし残したいなら下の 1行だけ復活させてください */
.demolition-w1__hl-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  color: #ffe100;
  /* text-shadow: 0 2px 0 rgba(0,0,0,0.15); */
}

.demolition-w1__hl-sub{
  margin: 0;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 15px);
  color: #ffe100;
  opacity: 0.95;
}

.demolition-w1__body{
  margin: 0 0 10px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.9;
}

.demolition-w1__note{
  margin: 0;
  font-size: 12px;
  opacity: 0.85;
}

/* 右：画像（白パネルPNG） */
.demolition-w1__panel{ margin: 0; }

/* ★軽量化：画像は“レイアウト外”の遅延ヒントを入れる（Chrome系で効く）
   見た目・レイアウトは変えない */
.demolition-w1__panel-img{
  width: 100%;
  height: auto;
  display: block;

  max-width: 860px;
  margin-left: auto;

  /* パフォーマンス寄り */
  content-visibility: auto;
  contain-intrinsic-size: 600px 420px; /* だいたいでOK：未描画時の高さ確保 */
}

/* SP：縦積み */
@media (max-width: 768px){
  .demolition-w1__inner{
    grid-template-columns: 1fr;
    padding: clamp(18px, 4.6vw, 28px);
    contain: layout paint;
  }
  .demolition-w1__panel{ order: 2; }
  .demolition-w1__panel-img{
    max-width: 100%;
    margin-left: 0;
    contain-intrinsic-size: 520px 520px;
  }
}


/* ここまで */

/* =========================================================
   W造解体セクション：サイズ/余白/比率 調整（PCで右画像を大きく）
   対象：section.section--w-demolition のみ
========================================================= */

.section--w-demolition{
  position: relative;
  padding-block: clamp(32px, 4vw, 72px);
}

/* 青枠全体（添付1の“画面に対して大きいフレーム”を再現） */
.section--w-demolition .demolition-frame{
  /* 画面に対して「大きく」：最大は1720px基準、左右ガターを確保 */
  width: min(1720px, calc(100vw - 80px));
  margin-inline: auto;

  /* 添付1の余白感 */
  padding: clamp(26px, 3.2vw, 44px);

  /* 高さもある程度確保（小さく潰れないように） */
  min-height: clamp(620px, 76vh, 860px);

  /* ブルーの透過 */
  background: rgba(0, 120, 255, 0.58);

  /* 外枠/角丸 */
  border-radius: 18px;
  border: 3px solid rgba(0, 120, 255, 0.85);

  /* “内枠線っぽさ” */
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.28),
    0 18px 40px rgba(0,0,0,0.22);

  position: relative;
  overflow: hidden; /* 内枠や背景がはみ出さない */
}

/* 内側のもう1本の枠（添付1の二重枠ニュアンス） */
.section--w-demolition .demolition-frame::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 12px;
  border: 2px solid rgba(0, 120, 255, 0.70);
  pointer-events:none;
}

/* 左テキスト + 右画像の横並び：右を大きくする */
.section--w-demolition .demolition-grid{
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 44px);
}

/* 左（テキスト） */
.section--w-demolition .demolition-left{
  flex: 0 0 44%;
  max-width: 44%;
  color: #fff;
}

/* 右（画像/白カード） */
.section--w-demolition .demolition-right{
  flex: 1 1 56%;
  max-width: 56%;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 右側の「画像として書き出す白カード」 */
.section--w-demolition .demolition-visual{
  width: 100%;
  height: auto;

  /* “もっと大きく”見せる肝：高さ上限を上げる */
  max-height: clamp(520px, 62vh, 720px);

  object-fit: contain;
  display: block;

  /* 画像が白カードなら影は不要。必要なら↓をON */
  /* filter: drop-shadow(0 16px 30px rgba(0,0,0,0.18)); */
}

/* さらに大画面では右をもっと主役に */
@media (min-width: 1280px){
  .section--w-demolition .demolition-left{
    flex-basis: 42%;
    max-width: 42%;
  }
  .section--w-demolition .demolition-right{
    flex-basis: 58%;
    max-width: 58%;
  }
}

/* タブレット以下は縦積み（SPは別レイアウトに寄せる） */
@media (max-width: 900px){
  .section--w-demolition .demolition-frame{
    width: min(720px, calc(100vw - 28px));
    padding: clamp(18px, 4vw, 26px);
    min-height: auto;
  }

  .section--w-demolition .demolition-grid{
    flex-direction: column;
    align-items: stretch;
  }

  .section--w-demolition .demolition-left,
  .section--w-demolition .demolition-right{
    max-width: 100%;
    flex-basis: auto;
  }

  .section--w-demolition .demolition-visual{
    max-height: none;
    width: 100%;
  }
}



/* 左を狭く・右を大きく（PC） */

@media (min-width: 1280px){
  .section--w-demolition .demolition-left{
    flex-basis: 36%;
    max-width: 36%;
  }
  .section--w-demolition .demolition-right{
    flex-basis: 64%;
    max-width: 64%;
  }
}






/* ====================================================== */
/* 軽量化対策 取り急ぎ最小差分での修正 */
/* 0107:11:36 テスト済みこのまま続ける
/* ====================================================== */

.section--w-demolition .demolition-frame{
  box-shadow: none !important;
}
.section--w-demolition .demolition-frame::before{
  display:none !important;
}

/* =========================================================
   作業用：軽量モード（重い効果を全部止める）
   使い方：bodyに .perf-lite を付けるだけ
   -- 一先ず下記　CSSで様子を見て作成作業を優先させる 
   -- 今後重複分の添削を忘れずに 
   ========================================================= */

body.perf-lite .demolition-w1__frame,
body.perf-lite .section--w-demolition .demolition-frame{
  /* 半透明×グラデ×影 をやめて、単色に */
  background: rgba(0, 120, 255, 0.85) !important;
  box-shadow: none !important;
  filter: none !important;

  /* blur系は強制OFF */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* 角丸×overflow は合成が重くなることがあるので少し軽く */
  border-radius: 14px !important;
  overflow: hidden !important;

  /* 描画範囲を閉じ込めて再描画を軽くする（効くこと多い） */
  contain: paint;
  isolation: isolate;
}

/* 二重枠（疑似要素）は地味に重いので作業中は消す */
body.perf-lite .demolition-w1__frame::before,
body.perf-lite .demolition-w1__frame::after,
body.perf-lite .section--w-demolition .demolition-frame::before{
  display: none !important;
}

/* 文字の影もOFF（小さいけど積むと効く） */
body.perf-lite .demolition-w1__hl-title,
body.perf-lite .demolition-w1__hl-sub{
  text-shadow: none !important;
}

/* 右の画像にdrop-shadow等を使っていたらOFF */
body.perf-lite .section--w-demolition .demolition-visual,
body.perf-lite .demolition-w1__panel-img{
  filter: none !important;
}

/* さらに重い場合：背景写真の上に半透明を載せるのが原因なので、作業中は背景も単色へ */
body.perf-lite .section--demolition-w1,
body.perf-lite .section--w-demolition{
  background-image: none !important;
}






/* ==================================================
-- box20 / 塗工事 / 料金関連⑤ /  
-- 私の場合、費用はどのくらい? 
-- 個別設定CSS 
-- トレース基盤 
================================================== */

body.work-demolition #box20 {
/* padding-top: 8%; */
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box20-bg.jpg") center / cover no-repeat;
}
@media (max-width: 767px) {
body.work-demolition #box20 {
padding-top: 4%;
padding-bottom: 4%;
position: relative;
isolation: isolate;
/*min-height: 100vh; */
font-family: "Noto Serif JP", serif;
background: url("paint-img/box20-spbg.jpg") center / cover no-repeat;
}
}

body.work-demolition #box20 .section-head {
position:relative;
top:15vh;
margin-bottom: clamp(32px, 3vh, 56px); 
}
@media (max-width: 767px) {
body.work-demolition #box20 .section-head {
background: none;
top:0vh;
margin-top:32%;
}
}

body.work-demolition #box20 .typography{
position:absolute; 
top:12%;
left:4%;
width:48vw;
height:auto;
}
@media (max-width: 767px) {
body.work-demolition #box20 .typography{
top:0%;
left:4%;
width:90%;
height:auto;
margin-top:8%;
}
}


body.work-demolition #box20 .main-title{ 
width:56vw!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box20 .main-title{ 
width:100%!important;
height:auto!important;
}
}


body.work-demolition #box20 .sub-title{ 
width:40vw!important;
height:auto!important;
}
@media (max-width: 767px) {
body.work-demolition #box20 .sub-title{ 
width:80%!important;
height:auto!important;
}
}

body.work-demolition #box20 .section-block {
/* margin-top:4vh; */
}
@media (max-width: 767px) {
body.work-demolition #box20 .section-block {
background: none;
margin-top:4%;
}
}


/* ==================================================
  解体：box20 Contact panel（完成イメージ寄せ）
  ※ demolition-work/demolition-overrides.css に追記
================================================== */

body.work-demolition #box20 .contact-panel--demo{
  --g:  #2f7d3a;    /* 濃いグリーン */
  --g2: #2aa44a;    /* 明るいグリーン */

  position: relative;
  width:74%;
  height:auto;
  max-width:none;
  /* 右の人物が見えるよう、少し左寄せ */
  margin: clamp(18px, 3vh, 28px) 0 0;
  margin-top:4.8%;
  margin-right: auto;
  border-radius: 18px;

  /* “囲い感”を弱めて完成イメージに寄せる */
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(47,125,58,0.28);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
  backdrop-filter: blur(4px);
  
  padding:2.4%;
  padding-top:3.2%;
}

body.work-demolition #box20 .contact-panel--demo::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(47,125,58,0.18);
  pointer-events:none;
}

/* ★ 3カラム：事例1｜事例2｜サービス */
body.work-demolition #box20 .demo-contact-grid{
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
  gap: clamp(8px, 1vw, 16px);
  align-items: start;
}

/* =========================
   施工事例カード
========================= */
body.work-demolition #box20 .demo-case{
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgba(47,125,58,0.85);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
}

body.work-demolition #box20 .demo-case__head{
  padding: 12px 10px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  background: rgba(47,125,58,0.96);
  letter-spacing: .06em;
  font-size: clamp(15px, 1.1vw, 18px);
}

body.work-demolition #box20 .demo-case__img{
  display:block;
  width: 100%;
  height: auto;
}

/* =========================
   相談サービス
========================= */
body.work-demolition #box20 .demo-service{
  position: relative;
  border-radius: 12px;
  border: 2px solid rgba(47,125,58,0.85);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  padding: 52px 16px 16px; /* リボン分 */
  overflow: visible;       /* リボンをはみ出させる */
}

/* リボン（完成イメージ寄せ：上に被せる） */
body.work-demolition #box20 .demo-ribbon{
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  background: rgba(47,125,58,0.98);
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 12px 26px;
  border-radius: 10px;
  z-index: 2;
  white-space: nowrap;
}
body.work-demolition #box20 .demo-ribbon::before,
body.work-demolition #box20 .demo-ribbon::after{
  content:"";
  position:absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}
body.work-demolition #box20 .demo-ribbon::before{
  left: 18px;
  border-width: 10px 10px 0 0;
  border-color: rgba(33,92,43,0.98) transparent transparent transparent;
}
body.work-demolition #box20 .demo-ribbon::after{
  right: 18px;
  border-width: 10px 0 0 10px;
  border-color: rgba(33,92,43,0.98) transparent transparent transparent;
}

/* QR + チップ */
body.work-demolition #box20 .demo-service__grid{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: start;
}

/* QRカード */
body.work-demolition #box20 .demo-qr{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(47,125,58,0.98), rgba(42,164,74,0.98));
  padding: 12px;
  text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,0.18);
}

body.work-demolition #box20 .demo-qr__img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

body.work-demolition #box20 .demo-qr__cap{
  margin: 10px 0 0;
  font-weight: 900;
  letter-spacing: .06em;
  color: #ffe44d;
}

/* チップ */
body.work-demolition #box20 .demo-chips{
  list-style:none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

body.work-demolition #box20 .demo-chip{
  display:block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(178, 236, 178, 0.95);
  color: #1f1f1f;
  font-weight: 700;
  font-size: 13px;
}

/* 右下テキスト */
body.work-demolition #box20 .demo-note{
  margin-top: 12px;
  color: #3f2f23;
  line-height: 1.9;
  font-size: 14px;
}
body.work-demolition #box20 .demo-note p{
  margin: 0 0 10px;
}
body.work-demolition #box20 .demo-note__strong{
  font-weight: 900;
}

/* マーカー（強調） */
body.work-demolition #box20 .demo-marker{
  position: relative;
  display: inline;
  padding: 0 .15em;
  z-index: 0;
}
body.work-demolition #box20 .demo-marker::before{
  content:"";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.10em;
  height: 0.55em;
  background: rgba(255, 230, 90, 0.75);
  z-index: -1;
  border-radius: 0.2em;
}

/* =========================
  レスポンシブ
========================= */
@media (max-width: 1100px){
  body.work-demolition #box20 .demo-contact-grid{
    grid-template-columns: 1fr 1fr;
  }
  body.work-demolition #box20 .demo-service{
    grid-column: 1 / -1; /* サービスは下に全幅 */
  }
}

@media (max-width: 767px){
  body.work-demolition #box20 .contact-panel--demo{
    margin-left: auto;       /* SPは中央に戻す */
    margin-right: auto;
  }
  body.work-demolition #box20 .demo-contact-grid{
    grid-template-columns: 1fr;
  }
  body.work-demolition #box20 .demo-service__grid{
    grid-template-columns: 1fr;
  }
  body.work-demolition #box20 .demo-qr{
    max-width: 320px;
    margin: 0 auto;
  }
}

body.work-demolition #box20 .contact-panel--demo{
  position: relative; /* リボンの基準 */
}

/* リボン（画像） */
body.work-demolition #box20 .contact-ribbon{
  position: absolute;
  left: 50%;
  top: -6.4%;                     /* パネル上から少しはみ出させる */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

body.work-demolition #box20 .contact-ribbon__img{
  display: block;
  width: min(560px, 86%);
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}

/* SPは少し下げる（はみ出し過ぎ防止） */
@media (max-width: 767px){
  body.work-demolition #box20 .contact-ribbon{ top: -18px; }
  body.work-demolition #box20 .contact-ribbon__img{ width: min(520px, 92%); }
}




/* --------------------------------------------------- */
/* セクション2がスクロール時に空白になってしまう症状への応急処置 */ 
/* --------------------------------------------------- */
/* 応急処置：section に付いた logo--color では透明にしない */
body.work-demolition .box.logo--color{
  opacity: 1 !important;
}