@charset "utf-8";
/* -----------------------------------------------------------
   リフォーム　水回り
-------------------------------------------------------------- */

.page-reform .important {
    background: linear-gradient(transparent 60%, #DCEEFD 60%);
}

.page-reform .intro-area .catch .important {
    color: var(--wet);
    background: none;
}


.page-reform .cmn_product_list--ft .arrow::before {
    background-image: url("../img/cmn-arrow-reform-wet.svg");
}

.page-reform .js-moreview-btn::before,
.page-reform  .js-moreview-btn::after {
	background-color: var(--wet);
}

.page-reform .js-moreview-btn:hover {
	background: var(--wet);
	border-color: var(--wet);
}


#reform-wetarea #menu-box .menu-nav__list .pagetop span::before {
    background: var(--wet);
}

#reform-wetarea #menu-box .menu-nav__list span::before {
    color: var(--wet);
}

#reform-wetarea #menu-box .menu-nav__list a::after {
    background: var(--wet);
}

#reform-wetarea #menu-box .menu-nav__list a:hover {
    color: var(--wet);
}

#menu-box .menu-more__ttl span::after {
    background: url("../img/icon_plus_blue.jpg")center/contain no-repeat;
}

#menu-box .menu-more__ttl.menu-open span::after {
	background-image: url(../img/icon_minus_blue.jpg);
}


/* -----------------------------------------------------------
   cmn-cta
-------------------------------------------------------------- */
.cmn-cta a {
    box-shadow: 0 3px 20px rgb(224, 227, 230);   
}

/*.cmn-cta a::before {
    background-image: url("../img/cmn-arrow-reform-wet.svg");   
}

.cmn-cta .icon {
    background-image: url(../img/free-quote-icon-blue.svg);
    border-color: var(--wet);
}

.cmn-cta .txt {
    color: var(--wet);    
}

.cmn-cta .txt span {
    background: var(--wet);  
}*/
.cmn-cta a::before {
    background-image: url("../img/cmn-arrow-reform-kitchen.svg");
}
.cmn-cta .icon {
    background-image: url(../img/free-quote-icon.svg);
	border-color: #F29700;
}
.cmn-cta .txt {
    color: #F29700;
}
.cmn-cta .txt span {
    background: linear-gradient(90deg, #FFB300, #F29700);
}




/* -----------------------------------------------------------
   intro-area
-------------------------------------------------------------- */
.intro-area .text-wrap {
    margin: 50px auto 0;
}

.intro-area .text-wrap {
    max-width: 800px;
}

.intro-area .intro-descript {
    max-width: 800px;
}




/* -----------------------------------------------------------
   worries-area
-------------------------------------------------------------- */
.worries-area .worries-box {
    background: #DEF0F0;
}




/* -----------------------------------------------------------
    アンカーリンク
-------------------------------------------------------------- */
.anchor-service .anchor-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    width: auto;
    gap: 50px;
    padding: 0 3.75%;
}

.anchor-service .anchor-wrap > li {
    width: calc((100% - 100px) / 3);
}

.anchor-service .anchor-wrap > li:nth-child(2) {
    transition-delay: 200ms;
}

.anchor-service .anchor-wrap > li:nth-child(3) {
    transition-delay: 500ms;
}

.anchor-service .anchor-wrap a {
    display: block;
    color: #333;
    border: 1px solid #bbb;
}

.anchor-service .anchor-wrap .img-wrap {
    overflow: hidden;
    height: 180px;
    width: 100%;
}

.anchor-service .anchor-wrap .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anchor-service .anchor-wrap .txt-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    gap: 10px;
}

.anchor-service .anchor-wrap .anchor-item-trend01 .txt-wrap {
    background-color: #fff;
}

.anchor-service .anchor-wrap .anchor-item-trend02 .txt-wrap {
    background-color: #fff;
}

.anchor-service .anchor-wrap .anchor-item-trend03 .txt-wrap {
    background-color: #fff;
}

.anchor-service .anchor-wrap .icon-img {
    width: 70px;
    height: 70px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.anchor-service .anchor-wrap .icon-img img {
    max-width: 100%;
    max-height: 100%;
}

.anchor-service .anchor-ttl {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: .03em;
    justify-content: center;
}

.arrow-wrap {
    width: 40px;
}

.arrow-wrap img{
    width: 100%;
    aspect-ratio: 86/95;
}

@media screen and (max-width: 768px) {
    .anchor-service .anchor-wrap {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        gap: 25px;
        padding: 0;
    }

    .anchor-service .anchor-wrap > li {
        width: 100%;
        height: 100px;
    }

    .anchor-service .anchor-wrap > li:first-child {
        transition-delay: 400ms;
    }

    .anchor-service .anchor-wrap > li:nth-child(2) {
        transition-delay: 0;
    }

    .anchor-service .anchor-item-trend01 {
        order: 1;
    }

    .anchor-service .anchor-item-trend02 {
        order: 2;
    }

    .anchor-service .anchor-item-trend03 {
        order: 3;
    }

    .anchor-service .anchor-wrap a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .anchor-service .anchor-wrap .img-wrap {
        height: 100%;
        width: 40%;
    }

    .anchor-service .anchor-wrap .img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .anchor-service .anchor-wrap .txt-wrap {
        padding: 15px 15px 15px 20px;
        flex: 1;
        gap: 10px;
        justify-content: space-between;
    }

    .anchor-service .anchor-wrap .icon-img {
        flex-shrink: 0;
        width: 40px;
        height: 65px;
    }

    .anchor-service .anchor-ttl {
        font-size: 1.9rem;
        line-height: 1.3;
        text-align: center;
        text-align: left;
    }

    .anchor-service .anchor-ttl .fis-line {
        font-size: 2rem;
        display: block;
    }

    .anchor-service .arrow-wrap {
        width: 20px;
        margin: 15px 0 0;
    }

    .anchor-service .arrow-wrap img {
        width: 100%;
    }
}


/* -----------------------------------------------------------
   trend3
-------------------------------------------------------------- */
.trend3-wrap {
    margin:  120px 0 0;
    position: relative;
}

.trend3-header-wrap {
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    padding: 80px 0 70px;
    position: relative;
}

.trend3-header-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
}

.trend3-bath .trend3-header-wrap{
    background-image: url("../img/reformwet-trend-bath-bg.jpg");
}

.trend3-toilet .trend3-header-wrap{
    background-image: url("../img/reformwet-trend-toiret-bg.jpg");
}

.trend3-washroom .trend3-header-wrap{
    background-image: url("../img/reformwet-trend-wash-bg.jpg");
}

.trend3-wrap .trend3-header-catch {
	font-size: 2.6rem;
	letter-spacing: .09em;
	color:#ABD6F9;
    position: relative;
}

.trend3-wrap .trend3-header-title {
    color: #fff;
    font-size: 4.8rem;
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1.5;
    margin: 12px 0 0;
}

.trend3-wrap .trend3-header-descript {
    margin: 35px 0 0;
    font-size: 1.7rem;
    color: #fff;
    position: relative;
}

.trend3-wrap .trend3-box {
    margin: 70px 0 0;
    position: relative;
}

.trend3-wrap .trend3-box::before {
    content: "";
    position: absolute;
    left: 42px;
    border-left: 5px dotted #C8E1F4;
    height: 100%;
    width: 1px;
}

.trend3-wrap .no-number.trend3-box::before {
    display: none;
}

.trend3-wrap .trend3-box-main {
    padding: 15px 0 0 123px;
}

.trend3-wrap .no-number .trend3-box-main {
	padding: 35px 0 0 0;
}

.trend3-wrap .trend3-box-num {
    align-items: center;
    display: flex;
    gap: 30px;
    z-index: 2;
    position: relative;
}

.trend3-wrap .trend3-box .trend3-box-num:not(:first-of-type){
    margin: 80px 0 0;
}

.trend3-wrap .trend3-box-num .num {
    background: var(--wet);
    display: flex;
    flex-direction: column;
    font: 700 1.8rem /1 var(--en);
    align-items: center;
    gap: 5px;
    padding: 15px 15px;
    line-height: 1;
    letter-spacing: 0;
    color: #fff;
    min-height: 80px;
    justify-content: center;
}

.trend3-wrap .trend3-box-num .num span {
    font-size: 3rem;
    font-weight: bold;
}

.trend3-wrap .trend3-box-num .txt {
    font-size: 4.2rem;
    font-weight: bold;
    color: var(--wet);
    letter-spacing: .05em;
}

.trend3-wrap .trend3-box-main .note {
    letter-spacing: .09em;
    line-height: 2.2;
}

.trend3-wrap .trend3-box-main figure {
    align-items: center;
    display: flex;
    gap: 40px;
    margin: 40px 0 0;
}

.trend3-wrap .trg::after {
    background: var(--wet);
}

.trend3-wrap .trend3-box-main .fig-img {
    width: 420px;
    height: 270px;
    flex-shrink: 0;
}

.trend3-wrap .trend3-box-main .trg {
    width: 100%;
    height: 100%;
}

.trend3-wrap .trend3-box-main .fig-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trend3-wrap .trend3-box-main .cap-catch {
	font-size: 3.5rem;
	letter-spacing: .05em;
	font-weight: bold;
    padding: 0 0 5px;
    border-bottom: 1px solid #bbb;
}

.trend3-wrap .trend3-box-main .cap-detail {
    margin: 20px 0 0;
    letter-spacing: .09em;
}


@media screen and (max-width: 768px) {
    
    .trend3-wrap {
    	margin: 50px 0 0;
        
        
    }
    
    .trend3-header-wrap {
        background: none!important;
        padding: 0;
    }
    
    .trend3-header-wrap::before {
        display: none;
    }
    
    .trend3-header-bg-sp {
        width: 100%;
    }
    
    .trend3-header-bg-sp img{
        width: 100%;
        aspect-ratio: 676/392;
    }
    
    .trend3-header {
        margin: 30px 0 0;
    }

    .trend3-wrap .trend3-header-catch {
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.7;
        color: var(--wet)!important;
    }
    
    .trend3-wrap .trend3-header-title {
        font-size: 3.2rem;
        color: #333!important;
    }
    
    .trend3-header-wrap {
        padding: 20px 0 0;
    }
    
    .trend3-wrap .trend3-header-descript {
    	margin: 20px 0 0;
    	font-size: 1.6rem;
        color: #333;
    }
    
    .trend3-wrap .trend3-box {
        margin: 40px 0 0;
    }
    
    .trend3-wrap .trend3-box-num {
        padding: 0 20px;
        gap: 5px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .trend3-wrap .trend3-box .trend3-box-num:not(:first-of-type) {
    	margin: 40px 0 0;
    }
    
    .trend3-wrap .trend3-box-num .num {
    	font-size: 1.4rem;
    	gap: 5px;
    	padding: 6px 10px;
    	min-height: auto;
    	width:auto;
    	flex-shrink: 0;
        flex-direction: row;
    }
    
    .trend3-wrap .trend3-box-num .num span {
        font-size: 2rem;
    }
    
    .trend3-wrap .trend3-box-num .txt {
    	font-size: 2.8rem;
        padding: 10px 0 0 30px;
        line-height: 1.4;
    }
    
    .trend3-wrap .no-number .trend3-box-num .txt {
        padding: 0;
    }
    
    .trend3-wrap .trend3-box::before {
    	left: 30px;
    	border-left: 4px dotted #C8E1F4;
    }
    
    .trend3-wrap .trend3-box-main {
    	padding: 15px 20px 0 55px;
    }
    
    .trend3-wrap .no-number .trend3-box-main {
        padding: 15px 20px 0 20px;
    }
    
    .trend3-wrap .trend3-box-main figure {
        flex-direction: column;
        gap: 20px;
        margin: 30px 0 0;
    }
    
    .trend3-wrap .trend3-box-main .fig-img {
        width: 100%;
        height: 50vw;
    }
    
    .trend3-wrap .trend3-box-main .cap-catch {
    	font-size: 2.4rem;
    	letter-spacing: .03em;
    	font-weight: bold;
    	line-height: 1.3;
        padding: 0 0 10px;
    }
    
    .trend3-wrap .trend3-box-main .cap-detail {
        margin: 10px 0 0;
    }

}




/* -----------------------------------------------------------
   service-area
-------------------------------------------------------------- */
.service-area.lazyloaded {
    background: url(../img/reform-wet-service-bg.jpg) right top /auto no-repeat;
}

.service-box-user {
	gap: 30px;
}

.service-area .service-box-user figure{
    width: calc( ( 100% - 90px ) / 4);
}

.service-area .service-catch {
    color: var(--wet);
}

.trend-area .trend2-header-wet {
    margin: 100px 0 0;
    text-align: center;
}

.trend-area .trend2-header-wet-catch {
	text-align: center;
	font-size: 2.5rem;
	border-bottom: dashed 1px var(--wet);
	width: fit-content;
	margin: 0 auto;
	padding: 0 10px 5px;
	letter-spacing: .06em;
    color: #589ED3;
}

.trend-area .trend2-header-wet-title {
    margin: 25px 0 0;
}

.trend-area .trend2-header-wet-title .en {
    color: #959595;
    font: 700 2rem / 1 var(--en2);
    letter-spacing: .05em;
}

.trend-area .trend2-header-wet-title .ja {
	font-size: 4.5rem;
	font-weight: bold;
	letter-spacing: 1.5px;
	margin: 23px 0 0;
}

.trend-area .trend2-header .trend2-header-txt .number {
    color: var(--wet);
}

.trend-area .trend2-toiret1 .trend2-header {
    background: url(../img/reform-toiret-trend2-header-1.jpg)center right/cover no-repeat;
}

.trend-area .trend2-toiret2 .trend2-header {
    background: url(../img/reform-toiret-trend2-header-2.jpg)center right/cover no-repeat;
}

.trend-area .trend2-bath1 .trend2-header {
    background: url(../img/reform-bath-trend2-header-1.jpg)center right/cover no-repeat;
}

.trend-area .trend2-bath2 .trend2-header {
    background: url(../img/reform-bath-trend2-header-2.jpg)center right/cover no-repeat;
}

.trend-area .trend2-sink1 .trend2-header {
    background: url(../img/reform-sink-trend2-header-1.jpg)center right/cover no-repeat;
}

.trend-area .eco-subject-img .trg::after {
    background: var(--wet);
}



@media screen and (max-width: 768px) {
    #reform-wetarea .service-area.lazyloaded {
        background-size: 100% auto;
        background-position: right -7% top 0;
    }
    
    .trend-area .trend2-header-wet {
        margin: 40px 0 0;
        width: 100%;
    }
    
    .trend-area .trend2-header-wet-catch {
        font-size: 1.8rem;
        line-height: 1.5;
        margin: 0 auto;
        padding: 15px 20px;
        letter-spacing: .06em;
        width: 100%;
        background: var(--wet);
        color: #fff;
        text-align: left;
    }
    
    .trend-area .trend2-header-wet-title {
        margin: 25px 0 0;
        text-align: left;
    }
    
    .trend-area .trend2-header-wet-title .ja {
        font-size: 2.8rem;
        margin: 10px 0 0;
        line-height: 1.4;
    }
    
    .trend-area .trend2-header-wet-title .en {
        font-size: 1.6rem;
    }
    
    .trend-area .trend2-header-txt .number {
        color: var(--wet)!important;
    }
    
    
    
    
}




/* -----------------------------------------------------------
   reason-area
-------------------------------------------------------------- */
.reason-area .reason-img .trg::after {
    background: var(--wet);
}




/* -----------------------------------------------------------
   trend-area
-------------------------------------------------------------- */
.trend-area .anchor-wrap {
    margin: 40px 0 0;
}

.trend-point-subttl {
    color: var(--wet);
}

.trend-point-subttl span {
    background: var(--wet);
}

.trend-area .eco-subject-ttl .num {
    color: var(--wet)!important;
}


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

    .trend-area .anchor-wrap {
        margin: 20px 0 30px;
    }


}


/* -----------------------------------------------------------
   price-area
-------------------------------------------------------------- */
.price-area .example-box-txt .list li:not(.price)::before {
    background: var(--wet);
}

.price-area .example-box-txt .price {
    color: var(--wet);
}




/* -----------------------------------------------------------
   lineup-area
-------------------------------------------------------------- */
.lineup-area .cmn-product-tag .status2,
.lineup-area .cmn-product-tag .status {
    background: #EAF2F9;
    color:#4E9DD9;
}

.lineup-area .cmn_product_list--ft .arrow::before {
    background: url("../img/cmn-arrow-reform-wet.svg")center/contain no-repeat;
}

/* -----------------------------------------------------------
   flow-area
-------------------------------------------------------------- */
.flow-area {
    background: #DEF0F0;
}

.flow-area .step-w100 .step100-num .num,
.flow-area .step-list .num{
    border-width: 2px 0!important;
    border: var(--wet) dotted;
    color: var(--wet);
}

#reform-wetarea .flow-area #flow-item01 .step100-bg {
    background: url("../img/reform-wet-flow01.jpg")center/cover no-repeat;
}


@media screen and (max-width: 768px) {
    .flow-area .step-list .step-plus span::after,
    .flow-area .step-list .step-plus span::before {
        background: var(--wet);
    }
}



/* -----------------------------------------------------------
   faq-area
-------------------------------------------------------------- */
.page-reform.cmn-faq .faq-accordion .answer::before {
    color: var(--wet);
}




/* -----------------------------------------------------------
   水回りページ専用
-------------------------------------------------------------- */
#reform-wetarea .worries-box-wrap .worries-box:first-child::before {
    background-image: url("../img/reform-wet-worries01.png");
}

#reform-wetarea .worries-box-wrap .worries-box:nth-child(2)::before {
    background-image: url("../img/reform-wet-worries02.png");
}