@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

body{
    font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
}
header{
    height: 154px;
    background: #fff;
    padding: 33px 0;
}
header h1{
    text-indent: -9999px;
    width: 80%;
    max-width: 436px;
    aspect-ratio: 4.95454;
    margin: 0 auto;
    background: url(../images/logo.png) center / contain no-repeat;
}
header h1 a{
    display: block;
    width: 100%;
    height: 100%;
}

.hero{
    background: url(../images/mv_bg.png) center / auto 100% no-repeat;
    aspect-ratio: 2.13696;
    width: 100%;
    padding: 60px 0 20px;
}
.hero__main-visual{
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
}
.hero__main-visual img{
    width: 100%;
}


.topics{
    border-radius: 21px;
    border: 3px solid #E8380D;
    position: relative;
    padding: 24px 32px 32px;
    margin: 100px auto 0;
    max-width: 1200px;
    width: 90%;
}
.topics-title{
    position: absolute;
    left: 50%;
    top: -24px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 23px;
    color: #fff;
    background: #E8380D;
    text-align: center;
    font-weight: bold;
    font-size: clamp(13px, 8.455px + 1.212vw, 23px);
    line-height: 46px;
    max-width: 520px;
    width: 80%;
}
.topics-content{
    font-size: clamp(14px, 9.000px + 1.333vw, 25px);
    margin: 10px 0 0;
    align-items: flex-start;
}
.topics_content__date{
    width: 7em;
}
.topics_content__date span{
    color: #E8380D;
    font-weight: 700;
}
.topics_content__text{
    flex: 1;
}

.health-info{
    margin: 100px auto 0;
    max-width: 1200px;
    width: 90%;
}
.section-heading{
    font-size: clamp(18px, 3.455px + 3.879vw, 50px);
    line-height: 1.4;
    text-align: center;
    background: url(../images/section_title_bg.png) center / 100% 100% no-repeat;
    max-width: 790px;
    margin: 0 auto;
    padding: 10px 30px;
    width: 85%;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.05em;
}
.section-heading i{
    font-style: inherit;
}
.health-info__bottom-items,
.health-info__top-items{
    gap: 41px;
    margin: 41px 0 0;
}
.health-info img{
    width: 100%;
    height: auto;
}
.health-info__top-illustration{
    width: 50.6%;
}
.health-info__bottom-illustration{
    width: 43.4%;
}
.health-info__bottom-text,
.health-info__top-text{
    font-size: clamp(13px, 1.000px + 1.875vw, 25px);
    line-height: 1.6;
}
.health-info__bottom-text .note{
    font-size: 75%;
}
.health-info__top-text{
    width: calc( 100% - (50.6% + 41px));
}
.health-info__bottom-text{
    width: calc( 100% - (43.4% + 41px));
}
.health-info__text-wrap{
    font-size: clamp(14px, 9.000px + 1.333vw, 25px);
    margin: 1em 0 0;
}
.health-info__top-text h3,
.health-info__bottom-text h3,
.health-info__text-wrap h3{
    font-size: clamp(17px, 5.000px + 1.875vw, 29px);
    font-weight: bold;
    color: #E8380D;
}
.health-info__top-text h3 + p,
.health-info__bottom-text h3 + p{
    margin: 1em 0 0;
}
.health-info__text-wrap > * + *{
    margin: 1em 0 0;
}
.health-info__expert{
    border-radius: 21px;
    border: 3px solid #E8380D;
    margin: 80px 0 0;
    position: relative;
    padding: 24px 32px 32px;
}
.expert-comment__heading{
    position: absolute;
    left: 50%;
    top: -24px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 23px;
    color: #fff;
    background: #E8380D;
    text-align: center;
    font-weight: bold;
    font-size: clamp(13px, 8.455px + 1.212vw, 23px);
    line-height: 46px;
    max-width: 520px;
    width: 80%;
}
.expert-comment__contents{
    gap: 45px;
}
.expert-comment__img{
    border-radius: 14px;
    overflow: hidden;
    width: 26.0176%;
}
.expert-comment__content{
    width: calc( 100% - (26.0176% + 45px));
}
.expert-comment__head{
    color: #E8380D;
    gap: 24px;
    font-weight: 700;
    align-items: center;
}
.expert-comment__title{
    font-size: clamp(13px, 8.455px + 1.212vw, 23px);
}
.expert-comment__name{
    font-size: clamp(18px, 3.455px + 3.879vw, 50px);
}
.expert-comment__name span{
    font-size: 50%;
}
.expert-comment__text{
    font-size: clamp(13px, 8.455px + 1.212vw, 23px);
    font-weight: 700;
    margin: 24px 0 0;
}

.recommendation{
    margin: 136px auto 0;
    max-width: 1200px;
    width: 90%;
}
.recommendation__contents{
    background: #FFF9E6;
    padding: 61px 0 38px;
    border-radius: 21px;;
}
.recommendation__contents.top{
    margin: 27px 0 0;
}
.recommendation__arrow{
    display: block;
    width: 100%;
    height: 54px;
    background: #fff url(../images/reccomendation_arrow.png) center bottom / 100% auto repeat-y;
}
.recommendation__head{
    align-items: center;
}
.recommendation__label{
    border-radius: 0 21px 21px 0;
    background: #e8380d;
    color: #fff;
    font-weight: bold;
    font-size: clamp(16px, 9.370px + 1.768vw, 32px);
    line-height: 2.2;
    padding: 0 30.5px;
    min-width: 460px;
    text-align: center;
}
.recommendation__arrow,
.recommendation__contents,
.recommendation__heading{
    display: none;
}
.recommendation__title{
    color: #e8380d;
    font-weight: bold;
    font-size: clamp(22px, 10.398px + 3.094vw, 50px);
    line-height: 1.3;
    padding: 0 0 0 19px;
}
.recommendation__content{
    gap: 35px;
    padding: 0 50px;
    margin: 43.5px 0 0;
}
.recommendation__img{
    width: 408px;
    aspect-ratio: 1.29523;
    border-radius: 14px;
    overflow: hidden;
}
.recommendation__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #ccc;
}
.recommendation__text{
    width: calc(100% - 443px);
    font-size: clamp(16px, 12.271px + 0.994vw, 25px);
    line-height: 1.6;
    font-weight: bold;
}

.reform-suggestion{
    background: url(../images/reform_bg.png) center top / 100% auto no-repeat;
    margin: 120px 0 0;
    padding: 120px 0 0;
}
#tab-wrap,
.reform-suggestion__map,
.reform-suggestion__head{
    background: #FFF4D2;
}
.reform-suggestion__title{
    text-align: center;
}
.reform-suggestion__head{
    align-items: flex-end;
    max-width: 925px;
    margin: -30px auto 0;
    gap: 0;
}
.reform-suggestion__read{
    width: calc( 100% - 195px);
    padding: 55px 0 23px;
    font-size: clamp(18px, 13.028px + 1.326vw, 30px);
    font-weight: bold;
}
.reform-suggestion__illust{
    width: 195px;
}
.reform-suggestion__map-wrap{
    background: #fff;
    max-width: 1044px;
    margin: 0 auto;
    padding: 30px 44px;
    border-radius: 21px;
    border: 3px solid #E8380D;
    position: relative;
}
.reform-suggestion__map-wrap figure{
    position: static;
}
.reform-suggestion__map-wrap figure img{
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}
.reform-suggestion__map-wrap .map{
    position: absolute;
    z-index: 2;
    cursor: pointer;
        animation: 3s fuwafuwa infinite;
    animation-delay: 3s;
}
@keyframes fuwafuwa{
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
.reform-suggestion__map-wrap #map-pin .map.bathroom{
    width: 27.86%;
    height: 14.21%;
    left: 18.06%;
    top: 9.57%;
    background: url(../images/reform_bathroom.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.toilet{
    width: 15.75%;
    height: 13.355%;
    left: 80.98%;
    top: 12.28%;
    background: url(../images/reform_toilet.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.entrance{
    width: 21.74%;
    height: 12.336%;
    left: 50.61%;
    background: url(../images/reform_entrance.svg) center top / contain no-repeat;
    top: 41.75%;
}
.reform-suggestion__map-wrap #map-pin .map.house{
    width: 16.04%;
    height: 27.4%;
    left: 10.4%;
    top: 61.65%;
    background: url(../images/reform_house.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.bathroom:hover,
.reform-suggestion__map-wrap #map-pin.bathroom .map.bathroom{
    background: url(../images/reform_bathroom_active.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.toilet:hover,
.reform-suggestion__map-wrap #map-pin.toilet .map.toilet{
    background: url(../images/reform_toilet_active.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.entrance:hover,
.reform-suggestion__map-wrap #map-pin.entrance .map.entrance{
    background: url(../images/reform_entrance_active.svg) center top / contain no-repeat;
}
.reform-suggestion__map-wrap #map-pin .map.house:hover,
.reform-suggestion__map-wrap #map-pin.house .map.house{
    background: url(../images/reform_house_active.svg) center top / contain no-repeat;
}

#tab-wrap{
    padding: 90px 0 0;
}
#tab-list{
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
}
#tab-list > li{
    background: #ECC5C2;
    border-radius: 20px 20px 0 0;
    color: #fff;
    position: relative;
    width: 165px;
    height: 94px;
    cursor: pointer;
}
#tab-list > li.active{
    background: #E8380D;
    height: 120px;
    cursor: default;
}
#tab-list > li span{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: clamp(16px, 11.028px + 1.326vw, 28px);
    font-weight: bold;
    line-height: 1.2;
}
#tab-list > li.active span{
    top: calc( 50% + 11px);
}
#tab-contents > *{
    display: none;
    background: #E8380D;
    padding: 90px 0 0;
}
#tab-wrap.window #tab-contents .window,
#tab-wrap.toilet #tab-contents .toilet,
#tab-wrap.entrance #tab-contents .entrance,
#tab-wrap.kitchen #tab-contents .kitchen,
#tab-wrap.house #tab-contents .house,
#tab-wrap.dressingroom #tab-contents .dressingroom,
#tab-wrap.bathroom #tab-contents .bathroom{
    display: block;
}

.tab-content{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
.tab-content__title{
    max-width: 1177px;
    width: 90%;
    margin: 0 auto;
    aspect-ratio: 6.71186;
    text-indent: -9999px;
}
.bathroom .tab-content__title{
    background: url(../images/reform_bathroom_title.png) center / contain no-repeat;
}
.toilet .tab-content__title{
    background: url(../images/reform_toilet_title.png) center / contain no-repeat;
}
.entrance .tab-content__title{
    background: url(../images/reform_entrance_title.png) center / contain no-repeat;
}
.house .tab-content__title{
    background: url(../images/reform_house_title.png) center / contain no-repeat;
}
.tab-content__copy{
    color: #fff;
    margin: 30px 0 0;
    text-align: center;
    font-size: clamp(16px, 8.127px + 2.099vw, 35px);
    line-height: 1.5;
    font-weight: bold;
}

.tab-content__blc{
    background: #fff;
    border-radius: 21px;
    padding: 0;
    overflow: hidden;
    margin: 40px 0 0;
}
.tab-content__blc h4{
    font-size: clamp(22px, 12.470px + 2.541vw, 45px);
    line-height: 1.75;
    font-weight: bold;
    padding: 0 0 0  180px;
}
.tab-content__blc.blc01 h4{
    background: #FFE2D9 url(../images/tab-content_num01.png) left 1% center / auto 105% no-repeat;
}
.tab-content__blc.blc02 h4{
    background: #FBD07D url(../images/tab-content_num02.png) left 1% center / auto 105% no-repeat;
}
.tab-content__blc.blc03 h4{
    background: #FFC6C0 url(../images/tab-content_num03.png) left 1% center / auto 105% no-repeat;
}
.tab-content__detail{
    padding: 50px 65px 65px;
    font-size: clamp(18px, 12.199px + 1.547vw, 32px);
    font-weight: bold;
    line-height: 1.5;
    gap: 27px;
}
.tab-content__add-image,
.tab-content__image{
    width: 403px;
}
.tab-content__add-image img,
.tab-content__image img{
    border-radius: 21px;
}
.tab-content__add-text,
.tab-content__text{
    width: calc(100% - 430px);
}
.tab-content__detail .reform-list li{
    text-indent: -1em;
    padding-left: 1em;
}
.tab-content__detail .reform-list.txt li{
    text-indent: 0;
    padding-left: 0;
}
.tab-content__detail .reform-list + p,
.tab-content__detail .reform-list li + li{
    margin: 16px 0 0;
}
.tab-content__blc.blc01 .tab-content__detail .reform-list{
    color: #F1997E;
}
.tab-content__blc.blc02 .tab-content__detail .reform-list{
    color: #F9BE00;
}
.tab-content__blc.blc03 .tab-content__detail .reform-list{
    color: #FF6D4A;
}
.tab-content__add-area{
    width: 90%;
    margin: 55px auto 60px;
    border: 3px solid #E8380D;
    padding: 75px 50px 40px;
    border-radius: 21px;
    position: relative;
}
.tab-content__blc.blc02 .tab-content__add-area{
    background: #FFFCF3;
}
.tab-content__blc.blc03 .tab-content__add-area{
    background: #FFF8F6;
}
.tab-content__add-area h5{
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    height: 80px;
    min-width: 700px;
    color: #fff;
    background: #E8380D;
    text-align: center;
    font-size: clamp(20px, 11.713px + 2.21vw, 40px);
    font-weight: bold;
    border-radius: 40px;
    line-height: 2;
}
.tab-content__add-wrap{
    gap: 27px;
    font-size: clamp(18px, 12.199px + 1.547vw, 32px);
    font-weight: bold;
    line-height: 1.5;

}
.tab-content__add-guideline{
    text-align: center;
}
.tab-content__add-guideline,
.tab-content__add-text.full,
.tab-content__add-image.full{
    width: 100%;
}

.recommend{
    position: relative;
    background: #FFF4D2;
    margin: 150px 0 0;
    padding: 130px 0 140px;
}
.recommend h4{
    position: absolute;
    text-indent: -9999px;
    width: 90%;
    max-width: 1190px;
    left: 50%;
    top: -90px;
    aspect-ratio: 6.71751;
    transform: translateX(-50%);
}
.bathroom .recommend h4{
    background: url(../images/reform_bathroom_recommend_title.png) center / contain no-repeat;
}
.toilet .recommend h4{
    background: url(../images/reform_toilet_recommend_title.png) center / contain no-repeat;
}
.entrance .recommend h4{
    background: url(../images/reform_entrance_recommend_title.png) center / contain no-repeat;
}
.house .recommend h4{
    background: url(../images/reform_house_recommend_title.png) center / contain no-repeat;
}
.recommend-list{
    gap: 41px 27px;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
.recommend-list__item{
    width: calc((100% - ( 27px * 2)) / 3);
    background: #fff;
    overflow: hidden;
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0px 15px 4px rgba(0, 0, 0, 0.1);
}
.recommend-list__item a{
    display: block;
    width: 100%;
    height: 100%;
}
.recommend-list__item a:after{
    content: "";
    display: inline-block;
    width: clamp(16px, 8.541px + 1.989vw, 34px);
    height: clamp(16px, 8.541px + 1.989vw, 34px);
    margin: 0 0 0 .25em;
    vertical-align: middle;
    background: url(../images/icon_link.svg) left center / 60% auto no-repeat;
}
.recommend-list__item .img img{
    width: 100%;
    aspect-ratio: 1.75355;
    object-fit: cover;
}
.recommend-list__item .name{
    height: 200px;
    position: relative;
}
.recommend-list__item .name > div{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    font-size: clamp(16px, 8.541px + 1.989vw, 34px);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
.recommend-list__item .name img{
    max-height: 55px;
    max-width: 183px;
    width: 90%;
    object-fit: contain;
    height: auto;
}
.recommend-list__item .name img[alt="NORITZ"]{
    max-width: 250px;
}
.recommend-list__item .name img[alt="DAIKIN"]{
    max-width: 250px;
}
.recommend-list__item .name img[alt="Paloma"],
.recommend-list__item .name img[alt="Corona"]{
    max-width: 250px;
}
.recommend-list__item .name img[alt="LIXIL"],
.recommend-list__item .name img[alt="SECOM"],
.recommend-list__item .name img[src*="qso"]{
    max-height: 70px;
}
.recommend-list__item .name.mitsubishi img{
    max-height: 90px;
    max-width: 270px;
}
.recommend-list__item .name.cosmos img{
    max-width: 230px;
}
.recommend-list__item .name.qso > div,
.recommend-list__item .name.cosmos > div{
    font-size: clamp(14px, 2.000px + 1.875vw, 26px);
}
.recommend-list__item .name.tokyogas img{
    max-width: 230px;
}
.recommend-list__item .name img + a{
    margin: .5em 0 0;
}
.recommend-list__item .name span{
    font-size: 80%;
}

.subsidy{
    position: relative;
    min-height: 150px;
}
.subsidy-title{
    position: absolute;
    left: 50%;
    top: -77px;
    transform: translateX(-50%);
    max-width: 1188px;
    width: 90%;
}

.point{
    padding: 120px 0 116px;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(18px, 12.199px + 1.547vw, 32px);
    line-height: 1.5;
}
.point-title.section-heading{
    max-width: 700px;
}
.countermeasure.section-heading{
    max-width: 1100px;
    width: 90%;
}
.countermeasure.section-heading span{
    font-size: 80%;
}
.point-foot-title.section-heading{
    max-width: 1100px;
    margin: 116px auto 0;
}
.point-head{
    gap: 36px;
    margin: 1em 0 0;
}
.point-head__image{
    width: 368px;
}
.point-head__text{
    width: calc( 100% - 404px );
}
.point-head__content{
    margin: 56px 0 0;
}
.point-foot__image{
    max-width: 987px;
    margin: 46px auto 0;
}
.point-foot__button a{
    display: block;
    font-weight: 700;
    font-size: clamp(24px, 15.298px + 2.32vw, 45px);
    line-height: 60px;
    text-align: center;
    color: #fff;
    background: #E9473B;
    border: 4px solid #FFFFFF;
    box-shadow: 0px 7px 7px rgba(0, 0, 0, 0.25);
    border-radius: 60px;
    width: 90%;
    max-width: 1011px;
    margin: 46px auto 0;
    height: 110px;
    padding: 20px 0;
}
.point-foot__search{
    font-size: clamp(24px, 15.298px + 2.32vw, 45px);
    text-align: center;
    margin: 1em auto 0;
}
.point-foot__search figure{
}
.point-foot__search figure + p,
.point-foot__search p + figure{
    margin: 0.5em;
}

.subsidy-search{
    position: relative;
    background: url(../images/subsidy_bg.png) center / cover no-repeat;
    padding: 60px 0;
    margin: 0;
}
.subsidy-illust{
    position: absolute;
    left: calc(50% - 450px);
    top: 40px;
    transform: translateX(-50%);
    max-width: 146px;
    width: 50%;
}
.subsidy-content{
    text-align: center;
    font-weight: bold;
    padding: 0 0 0 50px;
}
.subsidy-content .top{
    font-size: clamp(30px, 18.398px + 3.094vw, 58px);
    line-height: 2;
}
.subsidy-content .top span{
    font-size: 75%;
}
.subsidy-content figure{
    margin: 22px 0 32px;
}
.subsidy-content .bottom{
    font-size: clamp(20px, 9.641px + 2.762vw, 45px);
}
.subsidy-content .bottom span{
    color: #E8380D;
}
.heatshock-link{
    margin: 37px auto 0;
    width: 90%;
    max-width: 472px;
}
.heatshock-link a{
    display: block;
    border: 1px solid #E9473B;
    padding: 10px;
}
.heatshock-link img{
    width: 100%;
    height: auto;
}

footer{
    background: #FFE696;
    margin: 37px 0 0;
    padding: 37px 0;
}
.footer-wrap{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: right;
    font-size: clamp(12px, 8.685px + 0.884vw, 20px);
}

.js-underline{
    position: relative;
    z-index: 1;
    display: inline-block;
    white-space: nowrap;
    text-indent: 0;
}
.js-underline:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 12px;
    background: rgba(232, 56,13,0.2);
    z-index: -1;
    transition: all 0.8s;
}
.js-underline.isActive:after{
      width: 100%;
}