@charset "utf-8";

.bg-gray-wave,
.bg-orenge-wave,
.bg-white-wave{ position: relative;}

.bg-gray-wave::after{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5%;
  margin: 0;
  padding: 20% 0 0;
  width: 100%;  
  height: 0;
  display: block;
  background: url(/smileup/img/new/bg_wave_gray.svg) bottom center no-repeat #fff;
  background-size: 120%;
  content: "";
  z-index: 1;
}

.bg-orenge-wave{ padding-bottom: 6rem;}

.bg-orenge-wave::before{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.5%;
  margin: 0;
  padding: 30% 0 0;
  width: 100%;  
  height: 0;
  display: block;
  background: url(/smileup/img/new/bg_wave_white.svg) bottom center no-repeat #e5dfc8;
  background-size: 120%;
  content: "";
  z-index: 1;
}

.bg-white-wave::before{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  padding: 20% 0 0;
  width: 100%;  
  height: 0;
  display: block;
  background: url(/smileup/img/new/bg_wave_white.svg) top center no-repeat #e5dfc8;
  background-size: 120%;
  content: "";
  z-index: 1;
}



/* fairbanner */
.bg-gray-inner{
position: relative;
width: calc(100% - 4rem);
max-width: 120rem;
margin: 0 auto;
z-index: 10;
}

.fair-banner {
margin: 0 auto;
padding: 5rem 0 0;
text-align: center;
width: 100%;
max-width: 55rem;
}

.fair-banner p{
font-size: 1.4rem;
color: #e86773;
margin-top: 1rem;
}

/* details-section */
.details-section{
  margin-bottom: 6rem;
}

.reform-contents-inner{
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 2rem;
margin: 0 auto;
padding-top: 5rem;
width: 100%;
}


.details-section .reform-contents{
  width: calc(56% - 1rem);
}


h2.contents-title strong{
font-size: min(max(6rem, calc(6rem + ((1vw - 0.48rem) * 4.1667))), 9rem);
font-weight: normal;
color: #0081cc;
}

h2.contents-title span{
font-size: min(max(2.6rem, calc(2.6rem + ((1vw - 0.48rem) * 1.1111))), 3.4rem);
margin-top: 3rem;
line-height: 1.294;
}

.lead-txt{ font-size:min(max(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.3846))), 1.6rem);}

.reform-contents .lead-txt{ margin-top: 4rem;}

.details-section .reform-img{
width: calc(44% - 1rem);
max-width: 52rem;
display: flex;
column-gap: 2rem;
justify-content: space-between;
}

.details-section .img-left{
  position: relative;
  width: 49%;
  max-width: 25.6rem;
  aspect-ratio: 128 / 175;
  z-index: 5;
}

.details-section .img-right{
  position: relative;
  margin-top: 30%;
  width: 45%;
  max-width: 23.6rem;
  aspect-ratio: 59 / 75;
  z-index: 1;
}

/* 住活協リフォーム */

.kokudo_box {
display: flex;
max-width: 100rem;
margin: 6rem auto 0;
border: 1px solid #d5d5d5;
background-color: #f1f1f1;
padding: 2rem 3rem;
gap: 2rem;
}

.kokudo_box img {
max-width: 20rem;
object-fit: contain;
}

.kokudo_box p strong {
font-size: 2.25rem;
}

.kokudo_box p span {
font-size: 2rem;
}
/* end  住活協リフォーム */

@media screen and (max-width: 940px) {

.reform-contents-inner{
flex-direction: column;
}

.details-section .reform-contents,
.reform-contents{ width: 100%; max-width: 80rem;}

.details-section .reform-img{
justify-content: center;
width: 100%;
max-width: 64rem;
margin-top: 4rem;
column-gap: 3rem;
}

.details-section .img-right{ margin-top: 15%;}

}/* End max 940 */

@media screen and (max-width: 640px) {

.kokudo_box {
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2rem 1rem;
}

.kokudo_box img {
  max-width: 27rem; 
}

}



/* plan section*/

.plan-section .contents-title{
text-align: center;
margin-top: 6rem;
}

.flex-ul{
  margin: 0 auto;
  width: 100%;
  max-width: 120rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 5%;
}

.plan-section .flex-list{
position: relative;
}

/* 吹き出し */
.image-bubble{
  position: absolute;
  display: flex;
  align-items: center;
  margin: 1.5em 0;
  padding: 0 0.5rem;
  width: 100%;
  max-width: 12rem;
  height: 100%;
  max-height: 12rem;
  color: #333;
  font-weight: bold;
  background: #e5dfc8;
  border-radius: 50%;
  box-sizing: border-box;
  top: -5rem;
  right: -3rem;
  z-index: 3;
}

.image-bubble::before {
  content: "";
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  margin-left: -1.5rem;
  border: 1.5rem solid transparent;
  border-top: 1.5rem solid #e5dfc8;
  z-index: 0;
  transform: rotate(270deg);
}

.image-bubble p {
  font-size: min(max(1.1rem, calc(1rem + ((1vw - 0.48rem) * 0.3846))), 1.3rem);
  line-height: 1.5;
  margin: 0 auto;
text-align: center;
}

/* end 吹き出し */


.plan-section .flex-list{
margin-top: 5%;
width: calc(25% - 3.75%);
}

@media screen and (max-width: 940px) {

.plan-section .reform-contents{
display: inline;
}

.plan-section .flex-list{
width: calc(100% / 3 - 5%);
padding-top: 4rem;
}

.image-bubble{
right: 0;

}

}/* End max 940 */

@media screen and (max-width: 580px) {

.flex-ul{ column-gap: 5%;}
.plan-section .flex-list{
width: 47.5%;
}

}/* End max 580 */

.flex-list img{
display: block;
}

.plan-section .flex-list img{
width: 100%;
border-radius: 0.5em;
aspect-ratio: 1 / 1;
}

.plan-section .lead-txt{
margin-top: 3rem;
}

.item-button{
background-color: #FFF;
border: solid 0.2rem #0081cc;
border-radius: 3em;
max-width: 32.8rem;
height: 6.5rem;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5rem;
font-size: 1.6rem;
}
/* 矢印css */
.arrow01 p {
  position: relative;
  color: #333;
  font-weight: 600;
}


.arrow01 p::after{
position: absolute;
right: -2rem;
bottom: 1rem;
margin: auto;
padding: 0;
width: 0.9rem;
height: 0.9rem;
display: block;
border: solid 0.2rem #0081cc;
border-width: 0.3rem 0.3rem 0 0;
transform: rotate(45deg);
content: "";
}/* end矢印 */

.item-button p{
white-space: nowrap;
}

/* manu-section */

.menu-section{
padding-bottom: 6rem;
}

.maintechan-title{
width:calc(100% - 22rem);
display: flex;
align-items: center;
margin: 0 auto;
justify-content: center;
}

.maintechan-title img {
margin-top: auto;
max-width: 25rem;
min-width: 10rem;
width: 25%;
aspect-ratio: 50 /57;
}

.menu-title-text{
width: 75%;
margin-right: 2rem;
text-align: center;
}

.menu-title-text p.sub-copy{
    font-size: min(max(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 0.5556))), 2rem);
}

.menu-title-text p.sub-copy strong {
    font-size: min(max(2rem, calc(2rem + ((1vw - 0.48rem) * 0.5556))), 2.4rem);
}

.menu-title-text h3.reform-menu-title{
  position: relative;
  margin: 1rem 0;
  padding: 1.5rem 1.5em;
  background-color: #fff;
  border-radius: 3em;
    font-size: min(max(2rem, calc(2rem + ((1vw - 0.48rem) * 1.5385))), 2.8rem);
}

.menu-title-text h3.reform-menu-title::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2.8rem;
  margin: auto 0;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  clip-path: polygon(100% 15%, 0 50%, 100% 85%);
  content: "";
}

.white-space-nowrap{
white-space: nowrap;
}

.reform-menu-ul{
margin: 6rem auto 0;
max-width: 120rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem 1rem;
}

.menu-list{
width: calc(100% / 7 - 16rem / 7);
text-align: center;
}

.menu-list img {
width: 100%;
max-width: 12rem;
}

.menu-list p{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 2.5em;
  font-weight: 600;
  line-height: 1.4;
}

.menu-list p strong{ white-space: nowrap;}

@media screen and (max-width: 1000px) {
.maintechan-title{width: 100%;}
.reform-menu-ul{ max-width: 62rem;}
.menu-list{ width: calc(25% - 3rem / 4) ; }

}/* End max 1000 */

@media screen and (max-width: 660px){

.menu-title-text p.sub-copy{
font-size: 1.4rem;
}
.menu-title-text p.sub-copy strong{
font-size: 1.6rem;
}
.menu-title-text h3.reform-menu-title{
font-size: 1.8rem;
}
}

@media screen and (max-width: 520px) {

.reform-menu-ul{ justify-content: flex-start;}
.menu-list{ width: calc(100% / 3 - 2rem / 3 ) ;}

}/* End max 520 */


/* その他リフォームバナー */
.other-inner{
  position: relative;
  width: calc(100% - 4rem);
  margin: 0 auto;
  z-index: 10;
}

h4.other-title{
text-align: center;
font-size: min(max(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 1.5385))), 3.6rem);
font-weight: 600;
position: relative;
margin: 12rem 0 4rem 0;
}

h4.other-title::before{
color: #dcad29;
top: 0;
left: -2rem;
bottom: 0;
margin: auto;
padding: 0;
transform: rotate(45deg);
content: "・・・・・";
}

h4.other-title::after{
color: #dcad29;
top: 0;
right: -2rem;
bottom: 0;
margin: auto;
padding: 0;
transform: rotate(45deg);
content: "・・・・・";
}

.details-section .flex-ul{
  max-width: 102rem;
  justify-content: center;
  gap: 2rem;
}

.details-section .flex-list{
max-width: calc(50% - 1rem);
}

.details-section .flex-list img{
width: 100%;
max-width: 50rem;
aspect-ratio: 125 / 43;
}

.pointer-none{
pointer-events: none;
}

@media screen and (max-width: 940px) {

h4.other-title::before,
h4.other-title::after{
content: "・・・";
}

}

@media screen and (max-width: 580px) {

.details-section .flex-list{ max-width: 100%;}

h4.other-title::before,
h4.other-title::after{
display: none;
}

}/* End max 580 */


/* hsmenu 旧サイトから持ってきたので修正します */


body#TOP .maintenance-menu-aside {
  position: relative;
  margin: 0 auto;
  padding: 10rem 0;
  width: calc(100% - 4rem);
  max-width: 120rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 200;
}

.maintenance-menu-aside .maintenance-title{
  position: relative;  
  padding: 0 15rem 0 0;
  min-height: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: min(max(1.6rem, calc(1.6rem + ((1vw - 0.48rem) * 0.7692))), 2rem);
  background: url(/smileup/img/new/maintechan02.svg) no-repeat top right;
  background-size: 15rem auto;
  z-index: 10;
}

.maintenance-menu-aside .maintenance-title strong{
font-size: min(max(1.6rem, calc(2rem + ((1vw - 0.48rem) * 0.3846))), 2.2rem);
}


@media screen and (max-width: 680px) {

.maintenance-menu-aside .maintenance-title{
text-align: left;
}

.maintenance-menu-aside .maintenance-title strong{
display: block;
}

}/* End max 680 */

@media screen and (max-width: 580px) {

.maintenance-menu-aside .maintenance-title{
  position: relative;  
  padding: 1.5em 11rem 0 0;
  min-height: 16rem;
  background: url(/smileup/img/new/maintechan02.svg) no-repeat top right;
  background-size: 12rem auto;
  text-align: left;
}

.maintenance-menu-aside .maintenance-title strong{ display: block;
}

}/* End max 580 */

@media screen and (max-width: 420px) {

.maintenance-menu-aside .maintenance-title br{display: none;}



}/* End max 420 */


.maintenance-menu-aside-inner {
  position: relative;
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maintenance-menu-aside-inner dt{
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;  
  font-size: 1.4rem;
}

.maintenance-menu-aside-inner dt a{
  position: relative;
  margin: 0;
  padding: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 1rem 1rem 0rem 0rem;
  background-color: #0081cc;
  color: #fff;
}

.maintenance-menu-aside-inner dt .icon{
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin: 0;
  width: 8rem;
  height: 8rem;
  display: block;
  border: solid 0.1rem #fff;
  z-index: 10;
}

.maintenance-menu-aside-inner dt strong{
  width: calc(100% - 8rem);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}
.maintenance-menu-aside-inner dt em{ font-size: 2.2rem; white-space: nowrap;}

.maintenance-menu-aside-inner dd{
  position: relative;
  margin: 0 auto;
  padding: 3rem 2rem 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 0.1rem #ccc;
  border-top: none;
  background-color: #fff;
  z-index: 1;
}

.maintenance-menu-aside-inner .maintenance-sub-menu{
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.maintenance-menu-aside-inner .maintenance-sub-menu:first-child{ padding-bottom: 3rem;}
.maintenance-menu-aside-inner .maintenance-sub-menu.type-01 li{
  position: relative;
  margin: 0;
  width: calc(20% - 1.2rem);
  display: block;
  border: solid 0.1rem #ccc;
}

.maintenance-menu-aside-inner .maintenance-sub-menu.type-02 li{
  position: relative;
  margin: 0;
  width: calc(100% / 3 - 1rem);
  display: block;
  overflow: hidden;
  border-radius: 0.4rem;
}



.maintenance-menu-aside-inner .maintenance-sub-menu a{
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  gap: 1rem;
}

.maintenance-menu-aside-inner .maintenance-sub-menu .icon{
  margin: 0;
  width: 5.6rem;
  height: 5.6rem;
  display: block;
  aspect-ratio: 1 / 1;
}

.maintenance-menu-aside-inner .maintenance-sub-menu.type-02 a{
  padding: 1em;
  background-color: #0081cc;
  color: #fff;
}

.maintenance-menu-aside-inner .maintenance-sub-menu.type-02 a::after{
  position: absolute;
  top: 0;
  right: 1rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 1rem;
  height: 1rem;
  display: block;
  border: solid 0.2rem #fff;
  border-width: 0.2rem 0.2rem 0 0;
  transform: rotate(45deg);
  content: "";
}

@media screen and (max-width: 940px) {

.maintenance-menu-aside-inner .maintenance-sub-menu.type-02{ justify-content: flex-start;}
.maintenance-menu-aside-inner .maintenance-sub-menu.type-01 li{ width: calc(100% / 3 - 1rem);}
.maintenance-menu-aside-inner .maintenance-sub-menu.type-02 li{ width: calc(50% - 0.75rem);}

}/* End max 940 */

@media screen and (max-width: 580px) {

.maintenance-menu-aside-inner .maintenance-sub-menu.type-01,
.maintenance-menu-aside-inner .maintenance-sub-menu.type-02{ justify-content: flex-start; gap: 1rem;}
.maintenance-menu-aside-inner .maintenance-sub-menu.type-01 li{ width: calc(50% - 0.75rem);}
.maintenance-menu-aside-inner .maintenance-sub-menu.type-02 li{ width: 100%;}
.maintenance-menu-aside-inner .maintenance-sub-menu .icon{ width: 5rem; height: 5rem;}

}/* End max 580 */


/* news-section */

.news-section{
padding: 6rem 0;
}

.news-section h2{
font-size: min(max(4.2rem, calc(4.2rem + ((1vw - 0.48rem) * 1.5385))), 5rem);
color: #0081cc;
font-weight: 400;
text-align: center;
}

.news-inner{
max-width: 120rem;
width: calc(100% - 4rem);
margin: 0 auto;
margin-top: 5rem;
background-color: #fff;
border-radius: 1rem;
padding-bottom: 5rem;
}

.news-section dl {
padding: 3.7rem 3rem 5rem 3rem;
font-size: min(max(1.1rem, calc(1rem + ((1vw - 0.48rem) * 0.3846))), 1.3rem);
}

.news-section dl dt{
margin-top: 1.3rem;
}

.news-section dl dt time{
font-weight: 600;
color: #999;
}

.news-section dl dt span{
margin-right: 1rem;
color: #fff;
text-align: center;
width: 9rem;
display: inline-block;
line-height: 2em;
}

.news-section dl dt span.event{
background-color: #b1883a;
}

.news-section dl dt span.news{
background-color: #0080cc;
}

.news-section dl a{
position: relative;
padding-left: 1.2rem;
display: block;
}

.news-section dl a::before{
position: absolute;
top: 0.7rem;
left: 0;
margin: auto;
padding: 0;
width: 0.7rem;
height: 0.7rem;
display: block;
border: solid 0.2rem #0081cc;
border-width: 0.2rem 0.2rem 0 0;
transform: rotate(45deg);
content: "";
}

.news-section dl a em {
color: #999;
}

.news-section span.event,
.news-section span.news{
font-size: 1.2rem;
}

.news-section dl dd{
padding-left: 10rem;
padding-bottom: 2rem;
border-bottom: 1px dotted ;
border-bottom-color: #cccccc;
font-size: min(max(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.3846))), 1.6rem);
}


.news-section p.line-banner-text{
font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 0.48rem) * 0.9615))), 2.3rem);
font-weight: 600;
text-align: center;
}

.news-section img{
width: calc(100% - 4rem);
max-width: 64rem;
display: block;
margin: 0 auto;
margin-top: 4rem;
}

.line-bubble{
text-align: center;
}

p.line-banner-text{
  display: inline-block;
  position: relative;
}

p.line-banner-text::before{
  position: absolute;
  content: "";
  width: 3rem;
  height: 4rem;
  background-image: url(/smileup/img/new/line-bubble01.svg);
  left: -3rem;
}

p.line-banner-text::after{
  position: absolute;
  content: "";
  width: 7rem;
  height: 5rem;
  background-image: url(/smileup/img/new/line-bubble02.svg);
background-repeat: no-repeat;
  right: -3rem;
}


@media screen and (max-width: 940px) {

.news-section dl dd{
margin-left: 0;
}

}/* End max 940 */