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




/* モーダル左カラムの画像枠 */
.modal-voice-image .windows {
  width: 100%;
  max-height: 320px;   /* 好みで 380〜460px くらいで調整 */
  overflow: hidden;
  border-radius: 20px; /* 既存に合わせて調整 */
}

/* 画像本体 */
.modal-voice-image .windows img {
  display: block;
  width: 100%;
  height: 320px;       /* 枠と合わせる */
  object-fit: cover;
  object-position: center;
}



/* ------------------------------ */
/* PC表示用CSS  */
/* ------------------------------ */
body.page-reform.no-slider #box1 .slider {
  background-image: url("../reform-work/paint-img/reform-pc-fv.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  backround-position:center;
}
/* 現状パスが途切れている状態なので確認後不要であれば削除 */ 
@media (max-width: 767px) {
body.page-reform.no-slider #box1 .slider {
  background-image: url("../reform-work/paint-img/fv-paint-default-001sp.jpg");
}
}


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



body.page-reform #box1 .typography{
position:absolute; 
top:14%;
left:4%;
width:56%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box1 .typography{
top:11%;
left:8%;
width:80%;
height:auto;
}
}

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






/* ------------------------------ */
/* SP表示用CSS  */
@media (max-width: 767px) {
/* FV背景：上（写真） */
body.page-reform #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.page-reform #box1 .sp-bottom {
width: 100%;
min-height: 48%;
padding-top:4%;
padding-bottom:8%;
background-image: url("paint-img/sp-bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}

/* SP表示用CSS / CTA下 注弱テキスト  */
body.page-reform #box1 .badge {
width:32%!important;
height: auto!important;
}
@media (max-width: 767px) {
body.page-reform #box1 .badge {
width:90%!important;
height: auto!important;
margin:0 auto;
}
}

/* ------------------------------ */
/* SP表示用CSS / CTA下 注弱テキスト  */
/* ------------------------------ */
body.page-reform .bottom-txt{
text-align:center; 
color:#754c24;
width:95vw;
height:auto;
margin:0 auto;
font-size:0.9em;
}
@media (max-width: 767px) {
body.page-reform .bottom-txt{
position:relative;
top:-1vh;
}
}

@media (max-width: 767px) {
body.page-reform #box1 .service-text {
width:64%!important;
height: auto!important;
margin:0 auto;
}

body.page-reform #box1 .service-icon {
width:64%!important;
height: auto!important;
margin:0 auto;
}
}
/* ===== Scroll Indicator dark ver ===== */
body.page-reform .scroll-indicator {
position: relative;
left: 50%;
bottom:5%;
transform: translateX(-50%);
text-align: center;
color: #754c24;
cursor: pointer;
z-index: 10;
animation: scrollBounce 2s infinite;
display: flex;
flex-direction: column;
align-items: center;
}
@media (max-width: 767px) {
.scroll-indicator {
bottom:4%!important;
}
}




/* ------------------------------ */
/* Se2  */
/* ------------------------------ */
body.page-reform #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.page-reform #box12 {
min-height:auto;
padding-top:8%;
padding-bottom: 8%;
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box12-spbg.jpg") center / cover no-repeat;
}
}

body.page-reform #box12 .section-head {
position:relative;
top:0vh;
margin-top:4%;
margin-bottom: 0; 
}
@media (max-width: 767px) {
body.page-reform #box12 .section-head {
background: none;
top:0vh;
margin-top:24%;
}
}


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

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

body.page-reform #box12 .main-menu{ 
width:48%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.page-reform #box12 .main-menu{ 
width:100%!important;
height:auto!important;
}
}




/* ------------------------------ */
/* Se3  */
/* ------------------------------ */

body.page-reform #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.page-reform #box13 {
min-height:auto;
padding-top:8%;
padding-bottom: 8%;
position: relative;
isolation: isolate;
font-family: "Noto Serif JP", serif;
background: url("paint-img/box13-spbg.jpg") center / cover no-repeat;
}
}

body.page-reform #box13 .section-head {
position:relative;
top:0vh;
margin-top:4%;
margin-bottom: 0; 
}
@media (max-width: 767px) {
body.page-reform #box13 .section-head {
background: none;
top:0vh;
margin-top:28%;
margin-bottom:0;
}
}

body.page-reform #box13 .typography{
position:absolute; 
top:16%;
left:4%;
width:56%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box13 .typography{
top:4%;
left:4%;
width:90%;
height:auto;
}
}


body.page-reform #box13 .photo{
position:relative; 
top:0vh;
left:0vw;
width:100%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box13 .photo{
top:0%;
left:0%;
width:100%;
height:auto;
}
}



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


body.page-reform #box13 .sub-title{ 
width:56%!important;
height:auto!important;
margin-top:-1.6%;
}
@media (max-width: 767px) {
body.page-reform #box13 .sub-title{ 
width:80%!important;
height:auto!important;
}
}


/* ------------------------------ */
/* Se4  */
/* ------------------------------ */


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

@media (max-width: 767px) {
body.page-reform #box16 .main-img {
width:100%;
height:auto;
}
}


body.page-reform #box16 .section-head {
position:relative;
top:0vh;
margin-top:12%;
}
@media (max-width: 767px) {
body.page-reform #box16 .section-head {
background: none;
top:0;
margin-top:24%;
}
}

body.page-reform #box16 .typography{
position:absolute; 
top:16vh;
left:4vw;
width:56%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box16 .typography{
top:0%;
left:4%;
width:90%;
height:auto;
margin-top:8%;
}
}


body.page-reform #box16 .main-title{ 
width:64%!important;
height:auto!important;
}
@media (max-width: 767px) {
#box16 .main-title{ 
width:88%!important;
height:auto!important;
}
}


body.page-reform #box16 .sub-title{ 
width:50%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.page-reform #box16 .sub-title{ 
width:90%!important;
height:auto!important;
}
}


body.page-reform #box16.townlogo {
width:50%!important;
}
@media (max-width: 767px) {
body.page-reform #box16 .townlogo {
width:64%!important;
}
}

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


body.page-reform .box16-img1{
width:50%!important;
height: auto!important;
}
@media (max-width: 767px) {
body.page-reform .box16-img1{
width:100%!important;
height: auto!important;
}
}




body.page-reform #box16 .section-block {

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


body.page-reform #box16 .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.page-reform #box16 .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);

}
}





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

body.page-reform #box14 .section-head {
position:relative;
top:0vh;
margin-top:4%;
}
@media (max-width: 767px) {
body.page-reform #box14 .section-head {
background: none;
top:0vh;
margin-top:27%;
}
}

body.page-reform #box14 .typography{
position:absolute; 
top:12%;
left:4%;
width:64%;
height:auto;
opacity: 0.7;3
}
@media (max-width: 767px) {
body.page-reform #box14 .typography{
top:4%;
left:4%;
width:90%;
height:auto;
}
}


body.page-reform #box14 .main-title{ 
width:56%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.page-reform #box14 .main-title{ 
width: 95%!important;
height:auto!important;
}
}

body.page-reform #box14 .sub-title{ 
width:50%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.page-reform #box14 .sub-title{ 
width:80%!important;
height:auto!important;
}
}

body.page-reform #box14 .box14-img {
width:48%!important;
}
@media (max-width: 767px) {
body.page-reform #box14 .box14-img {
width:100%!important;
}
}

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

body.page-reform #box14 .section-block {
margin-top:2%;
}
@media (max-width: 767px) {
body.page-reform #box14 .section-block {
background: none;
margin-top:8%;
}
}

body.page-reform #box14 .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.page-reform #box14 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color:black;

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);

}
}

/* 客声セクションオーバーライド */
body.page-reform #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.page-reform #box3 {
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;
}
}


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

body.page-reform #box3 .typography{
position:absolute; 
top:10vh;
left:4vw;
width:64%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box3 .typography{
top:0%;
left:4%;
margin-top:8%;
width:90%;
height:auto;
}
}

body.page-reform #box3 .main-title{ 
width:20%!important;
height:auto!important;
}
@media (max-width: 767px) {
body.page-reform #box3 .main-title{ 
width:64%!important;
height:auto!important;
}
}

body.page-reform #box3 .sub-title{ 
width:56%!important;
height:auto!important;
margin-top:0;
}
@media (max-width: 767px) {
body.page-reform #box3 .sub-title{ 
width:90%!important;
height:auto!important;
}
}








/* ------------------------------ */
/* Se5  */
/* ------------------------------ */
body.page-reform #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.page-reform #box4 {
padding-bottom:8%;
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.page-reform #box4 .section-head {
margin-top:0%; 
margin-bottom: clamp(32px, 3%, 56px); 
}
@media (max-width: 767px) {
body.page-reform #box4 .section-head {
background: none;
margin-top:11%;
}
}

body.page-reform #box4 .typography{
position:absolute; 
top:10vh;
left:4vw;
width:80%;
height:auto;
opacity: 0.7;
}
@media (max-width: 767px) {
body.page-reform #box4 .typography{
top:4%;
left:4%;
width:90%;
height:auto;
}
}

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

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





body.page-reform #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.page-reform #box20 {
padding-top: 8%;
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.page-reform #box20 .section-head {
position:relative;
top:18vh;
margin-bottom: clamp(32px, 3vh, 56px); 
}
@media (max-width: 767px) {
body.page-reform #box20 .section-head {
background: none;
top:0vh;
margin-top:30%;
}
}

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


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


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


body.page-reform #box20.townlogo {
width:50%!important;
}
@media (max-width: 767px) {
body.page-reform #box20 .townlogo {
width:64%!important;
}
}

body.page-reform #box20 .object {
width:56vw!important;
height: auto!important;
}
@media (max-width: 767px) {
body.page-reform #box20 .object {
width:95%!important;
height: auto!important;
margin:0 auto;
}
}

body.page-reform #box20 .section-block {
margin-top:4vh;
}
@media (max-width: 767px) {
body.page-reform #box20 .section-block {
background: none;
margin-top:12%;
}
}


body.page-reform #box20 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 70%);
}
@media (max-width: 767px) {
body.page-reform #box20 .section-lead {
font-size: clamp(14px, 1.4vw, 16px);
line-height: 2;
max-width: min(54rem, 100%);
color:white;
}
}



body.page-reform #box26 .typography{
position:absolute; 
top:14vh;
left:4vw;
width:72%;
height:auto;
}
@media (max-width: 767px) {
body.page-reform #box26 .typography{
top:0%;
left:4%;
width:90%;
height:auto;
margin-top:8%;
}
}






body.page-reform #box20 .contact-chips .chip{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 9px 18px;
  border-radius: 999px;

  background: #fff;
  color: #4b3b2c;
  text-decoration: none;

  /* チップの影（下に落ちる） */
  box-shadow: 0 6px 0 rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.05);
}
@media (max-width: 767px) {
body.page-reform #box20 .contact-chips .chip{
  font-size:0.8em;
}
}


/* カード下部エリア共通 */
body.page-reform .voice-cards .card-body {
  position: relative;
  padding: 16px 24px 0px;  /* ← 下の余白をかなり減らす（20px） */
  color: #603813;
  line-height: 1.7;
  font-size: 14px;
  /* 高さを中身に合わせつつ、meta を下寄せするための指定 */
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  background-color:#fcfbfa;
}