@charset "UTF-8";
@media screen and (min-width: 768px), print {
/* main
-------------------------------------*/
#mizumawari_reform main {
    max-width: 1920px;
    margin-inline: auto;
    width: 100%;
}
#mizumawari_reform h2.main-title {
    background: url(../images/mizumawari_reform/h2.jpg) no-repeat center;
}

/* lead
-------------------------------------*/
#lead {
    padding: 62px 0 136px;
}
#lead .photo{
    width: min(95%, 960px);
    margin-right: auto;
}
#lead .content-box {
    width: min(95%, 1137px);
    margin-left: auto;
    position: relative;
    top: -452px;
    z-index: 3;
    margin-bottom: -452px;
}
#lead .content-box::after {
    content: "";
    position: absolute;
    top: -229px;
    left: 322px;
    width: 247px;
    height: 296px;
    z-index: 1;
    background: url(../images/mizumawari_reform/lead-deco.png) no-repeat;
    background-size: contain;
}
#lead .content-box .inner {
    position: relative;
    z-index: 2;
    padding: 84px 95px 55px;
    background: url(../images/mizumawari_reform/lead-bg.png)no-repeat;
    background-size: cover;
}
#lead .content-box h3 {
    margin-bottom: 37px;
    margin-left: 4px;
}
#lead .content-box .txt {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: 20px;
}

/* menu
-------------------------------------*/
#menu {
    background: #E3E2E0;
    width: min(95%, 1200px);
    margin-inline: auto;
    margin-bottom: 402px;
}
#menu .inner {
    padding: 0 175px 248px;
    position: relative;
}
#menu h3 {
    text-align: center;
    margin-bottom: 3px;
    position: relative;
    top: -40px;
    padding-left: 41px;
}
#menu .list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px;
    position: absolute;
    bottom: -63px;
    left: 49.4%;
    transform: translateX(-50%);
    width: 850px;
}

/* sec共通
-------------------------------------*/
.sec .inner-Box01 {
    background: url(../images/mizumawari_reform/common-bg.png) repeat bottom center;
    background-size: contain;
}
.sec .inner-Box01 .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 0 0 120px;
}
.sec .inner-Box01 h3 {
    position: relative;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
}
.sec .inner-Box01 h3 img {
    margin-inline: auto;
}
.sec .inner-Box01 .price {
    position: absolute;
    bottom: 32px;
    left: -10px;
}
.sec .inner-Box01 .main-photo-box {
    position: relative;
    width: min(95%, 1100px);
    margin-inline: auto;
    margin-bottom: -303px;
    top: -318px;
}
.sec .inner-Box01 .desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7777;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 65px;
    color: #1B1B1B;
}

.sec .recommend-box {
    width: min(95%, 980px);
    margin-inline: auto;
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.16);
    border-top: 8px solid #63432d;
    padding: 50px 0 64px;
    margin-bottom: 90px;
}
.sec .recommend-box h4 {
    margin-bottom: 48px;
}
.sec .recommend-box h4 img {
    margin-inline: auto;
}
.sec .recommend-box .list {
    display: grid;
    gap: 18px;
    width: min(95%, 614px);
    margin-inline: auto;
}
.sec .recommend-box .list li {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.7777;
    border-bottom: 1px dashed #dbd6c4;
    position: relative;
    padding: 0 0 6px 30px;
}
.sec .recommend-box .list li::before {
    position: absolute;
    content: "";
    top: 5px;
    left: 0;
    background: url(../images/mizumawari_reform/check-icon.svg) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
}
.sec .content-box .photo {
    width: min(95%, 600px);
    margin-right: auto;
}
.sec .content-box .txt-box {
    width: min(95%, 720px);
    margin-left: auto;
    background: #FFFFFF;
    border-left: 5px solid #63432D;
    padding: 56px 59px 54px 56px;
    position: relative;
    margin-top: -383px;
    left: 0px;
}
.sec .content-box .txt-box h4 {
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.625;
    color: #63432d;
    padding-bottom: 16px;
    border-bottom: 1px dashed #DBD6C4;
    margin-bottom: 25px;
}
.sec .content-box .txt-box .txt {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #1B1B1B;
}
.sec .content-box .txt-box p.txt:nth-child(4) {
    margin-top: 8px;
}
.sec .content-box .txt-box .en-ttl {
    position: absolute;
    top: 13px;
    right: 13px;
}

.sec .inner-Box02 .inner{
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 60px 0 0;
}
.sec .inner-Box02 .inner h4 {
    margin: 0 0 37px 15px;
}
.sec .inner-Box02 .inner h4 img {
    margin-inline: auto;
}
.sec .inner-Box02 .list {
    width: min(95%, 1100px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 20px;
    margin-bottom: 106px;
}
.sec .inner-Box02 .list .ttl {
    background: #1B1B1B;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.4375;
    text-align: center;
    color: #fff;
    padding: 9px 0;
}
.sec .works-box {
    background: url(../images/mizumawari_reform/works-bg.png) no-repeat center;
    background-size: cover;
    padding: 90px 0 85px;
    height: 562px;
}
.sec .inner-Box .inner .works-box h4 {
    margin: 0 0 37px;
}
.sec .works-box .system-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px;
    width: min(95%, 930px);
    margin-inline: auto;
}
.sec .works-box .system-pic {
    margin-bottom: 7px;
    position: relative;
}
.sec .works-box .system-pic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}
.sec .works-box .system-pic img{
    width: 100%;
    height: 202px;
}
.sec .works-box .system-area {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 1.6428;
    text-align: center;
    color: #296587;
}
.sec .works-box .system-ttl-01 {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.4375;
    text-align: center;
    color: #1b1b1b;
}
/* kitchen
-------------------------------------*/
#kitchen {
    padding-bottom: 441px;
}
#kitchen-anchor {
    position: relative;
    top: -300px; 
    height: 0;
}
#kitchen .inner-Box01 h3 {
    left: 50.4%;
}

/* bathroom
-------------------------------------*/
#bathroom {
    padding-bottom: 441px;
}
#bathroom-anchor {
    position: relative;
    top: -300px; 
    height: 0;
}
#bathroom .inner-Box01 h3 {
    position: relative;
    top: 67px;
    left: 50.4%;
    transform: translateX(-50%);
    width: 800px;
}
#bathroom .inner-Box01 .main-photo-box {top: -321px;margin-bottom: -306px;}
#bathroom .recommend-box .list {
    width: min(95%, 463px);
}
#bathroom .content-box .txt-box {
    padding: 57px 59px 54px 56px;
}
#bathroom .inner-Box02 .inner {padding: 61px 0 0;}

/* toilet
-------------------------------------*/
#toilet {
    padding-bottom: 406px;
}
#toilet-anchor {
    position: relative;
    top: -300px; 
    height: 0;
}
#toilet .inner-Box01 .main-photo-box {top: -319px;margin-bottom: -303px;}
#toilet .inner-Box01 h3 {
    position: relative;
    top: 70px;
    left: 50.4%;
    transform: translateX(-50%);
    width: 800px;
}
#toilet .inner-Box01 .price {
    bottom: 31px;
}
#toilet .inner-Box01 .price02 {
    position: absolute;
    right: -10px;
    bottom: 31px;
}
#toilet .recommend-box .list {
    width: min(95%, 352px);
}
#toilet .inner-Box02 .inner h4 {
    margin: 0 0 46px -16px;
}
#toilet .inner-Box02 .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#toilet .inner-Box02 .inner .works-box h4 {
    margin: 0 0 37px;
}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
    padding-bottom: 63px;
    position: relative;
    background: url(../images/mizumawari_reform/bottom-sec-bg.png)no-repeat;
    background-size: cover;
}
#bottom-sec .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
}
#bottom-sec .photo-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
    top: -175px;
    margin-bottom: -119px;
}
#bottom-sec h3 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;
    font-size: 33px;
    letter-spacing: 0.1em;
    line-height: 1.9090;
    text-align: center;
    color: #fff;
}
#bottom-sec h3 span {
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0.1em;
    line-height: 1.92;
    text-align: center;
    color: #fff;
    display: block;
    margin-bottom: -1px;
}

/* bnt-box
-------------------------------------*/
.bnr-box {
    width: min(95%, 800px);
    margin-inline: auto;
    padding: 100px 0 28px;
}
.bnr-box .item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
}
.bnr-box img {
    margin-bottom: 17px;
}
.bnr-box .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.75;
    text-align: center;
    color: #1b1b1b;
}
}


@media screen and (min-width:768px) and (max-width:1919px) {
/* lead
-------------------------------------*/
#lead {
    padding: 3.231vw 0 7.087vw;
}
#lead .photo{
    width: 50.026vw;
    margin-right: auto;
}
#lead .photo img{
    width: 100%;
    height: auto;
}
#lead .content-box {
    width:59.25vw;
    margin-left: auto;
    position: relative;
    top: -23.554vw;
    z-index: 3;
    margin-bottom: -23.554vw;
}
#lead .content-box::after {
    content: "";
    position: absolute;
    top: -11.933vw;
    left: 16.78vw;
    width: 12.871vw;
    height: 15.425vw;
    z-index: 1;
    background: url(../images/mizumawari_reform/lead-deco.png) no-repeat;
    background-size: contain;
}
#lead .content-box .inner {
    position: relative;
    z-index: 2;
    padding: 4.377vw 4.95vw 2.866vw;
    background: url(../images/mizumawari_reform/lead-bg.png)no-repeat;
    background-size: cover;
}
#lead .content-box h3 {
    margin-bottom: 1.928vw;
    margin-left: 0.208vw;
}
#lead .content-box h3 img {
    width: 32.569vw ;
}
#lead .content-box .txt {
    font-size: 0.834vw;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: 1.042vw;
}
}


@media screen and (max-width: 767px) {
/* lead
-------------------------------------*/
#lead {
    padding: 10vw 2.9vw 11vw;
    background: url(../images/mizumawari_reform/sp-lead-bg.png)no-repeat;
    background-size: cover;
    display: grid;
    margin-top: 4.4vw;
    margin-bottom: 29vw;
    position: relative;
}
#lead::after {
    content: "";
    position: absolute;
    bottom: -7vw;
    right: 5.2vw;
    width: 19.81vw;
    height: 23.675vw;
    z-index: 1;
    background: url(../images/mizumawari_reform/sp-lead-deco.png) no-repeat;
    background-size: contain;
}
#lead .photo{order: 2;margin-bottom: 4.4vw;}
#lead .content-box {display: contents;}
#lead .content-box .inner {display: contents;}
#lead .content-box h3 {
    margin: 0 0 7.8vw 3vw;
    order: 1;
}
#lead .content-box .txt {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.71428;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin: 0 1.21vw 2.2vw;
    order: 3;
}

/* menu
-------------------------------------*/
#menu {
    background: #E3E2E0;
    margin-bottom: 34vw;
}
#menu .inner {
    padding: 0 2.9vw 9vw;
    position: relative;
}
#menu h3 {
    text-align: center;
    margin-bottom: -6vw;
    position: relative;
    top: -12vw;
}
#menu .list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.8vw;
    width: 91.305vw;
    margin-inline: auto;
    margin-left: 2.7vw;
}

/* sec共通
-------------------------------------*/
.sec .inner-Box01 {
    background: url(../images/mizumawari_reform/sp-common-bg.png) repeat bottom center;
    background-size: contain;
}
.sec .inner-Box01 .inner {
    width: 94.205vw;
    margin-inline: auto;
    padding: 0 0 19vw;
}
.sec .inner-Box01 h3 {
    position: relative;
    top: -17vw;
    left: 51%;
    transform: translateX(-50%);
    width: 96.62vw;
    margin-bottom: -30.2vw;
}
.sec .inner-Box01 h3 img {
    margin-inline: auto;
}
.sec .inner-Box01 .price {
    position: absolute;
    bottom: -12.4vw;
    left: 50%;
    transform: translateX(-50%);
    width: 94.205vw;
}
.sec .inner-Box01 .main-photo-box {margin-left: calc(50% - 50vw);width: 100vw;position: relative;margin-bottom: 16vw;}
.sec .inner-Box01 .desc {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.71428;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 8.6vw;
    color: #1B1B1B;
}

.sec .recommend-box {
    background: #FFFFFF;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.16);
    border-top: 2vw solid #63432d;
    padding: 9.4vw 0;
    margin-bottom: 14.4vw;
}
.sec .recommend-box h4 {
    margin-bottom: 7vw;
    text-align: center;
}
.sec .recommend-box h4 img {
    margin-inline: auto;
}
.sec .recommend-box .list {
    display: grid;
    gap: 4vw;
    width: 84.542vw;
    margin-inline: auto;
}
.sec .recommend-box .list li {
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 1.75;
    border-bottom: 0.2vw dashed #dbd6c4;
    position: relative;
    padding: 0 0 1.8vw 6vw;
}
.sec .recommend-box .list li::before {
    position: absolute;
    content: "";
    top: 1vw;
    left: 0;
    background: url(../images/mizumawari_reform/check-icon.svg) no-repeat;
    background-size: contain;
    width: 3.385vw;
    height: 3.385vw;
}
.sec .content-box .photo {
    margin-left: calc(50% - 50vw);
    width: 100vw;
}
.sec .content-box .txt-box {
    background: #FFFFFF;
    border-top: 0.6vw solid #63432D;
    padding: 8vw 4.83vw 8.7vw;
    position: relative;
    margin-top: -5vw;
    left: 0px;
}
.sec .content-box .txt-box h4 {
    font-weight: bold;
    font-size:4.348vw;
    letter-spacing: 0.1em;
    line-height: 1.666;
    color: #63432d;
    padding-bottom: 2.6vw;
    border-bottom: 0.2vw dashed #DBD6C4;
    margin-bottom: 5.2vw;
}
.sec .content-box .txt-box .txt {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.71428;
    letter-spacing: 0.05em;
    color: #1B1B1B;
}
.sec .content-box .txt-box p.txt:nth-child(4) {
    margin-top: 2.65vw;
}
.sec .content-box .txt-box .en-ttl {
    position: absolute;
    bottom: 2.8vw;
    right: 1.8vw;
}

.sec .inner-Box02 .inner{
    width: 94.205vw;
    margin-inline: auto;
    padding: 12.4vw 0 0;
}
.sec .inner-Box02 .inner h4 {
    text-align: center;
    margin-bottom: 9.8vw;
}
.sec .inner-Box02 .inner h4 img {
    margin-inline: auto;
}
.sec .inner-Box02 .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.8vw 2.4vw;
    margin-bottom: 14.8vw;
}
.sec .inner-Box02 .list .ttl {
    background: #1B1B1B;
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.642857;
    text-align: center;
    color: #fff;
    padding: 1.82vw 0;
}
.sec .works-box {
    background: url(../images/mizumawari_reform/sp-works-bg.png) no-repeat center;
    background-size: contain;
    padding: 14.6vw 0 4vw;
    height: 154.4vw;
    margin-left: calc(50% - 50vw);
    width: 100vw;
}
.sec .inner-Box .inner .works-box h4 {
    margin: 0 0 9.2vw -2.8vw;
}
.sec .works-box .system-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4vw 3vw;
    width: 90.34vw;
    margin-inline: auto;
}
.sec .works-box .system-pic {
    margin-bottom: 0.8vw;
    position: relative;
}
.sec .works-box .system-pic::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1vw solid #fff;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}
.sec .works-box .system-pic img{
    width: 100%;
    height: 32.61vw;
}
.sec .works-box .system-area {
    font-weight: 500;
    font-size:2.898vw;
    letter-spacing: 0.05em;
    line-height: 1.916666;
    color: #296587;
    margin-bottom: 0.6vw;
}
.sec .works-box .system-ttl-01 {
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 1.42857;
    color: #1b1b1b;
}

/* kitchen
-------------------------------------*/
#kitchen {
    padding-bottom: 38vw;
}
#kitchen-anchor {
    position: relative;
    top: -20vw; 
    height: 0;
}
#kitchen .inner-Box02 .list li:nth-child(8) .ttl {letter-spacing: -0.09em;}

/* bathroom
-------------------------------------*/
#bathroom {
    padding-bottom: 38vw;
}
#bathroom-anchor {
    position: relative;
    top: -20vw; 
    height: 0;
}
#bathroom .inner-Box01 .inner {padding: 0 0 13.7vw;}

/* toilet
-------------------------------------*/
#toilet {
    padding-bottom: 45.4vw;
}
#toilet-anchor {
    position: relative;
    top: -20vw; 
    height: 0;
}
#toilet .inner-Box01 .price {
    width: 45.9vw;
    top: 68.4vw;
    left: 25vw;
}
#toilet .inner-Box01 .price02 {
    width: 45.9vw;
    position: absolute;
    right: 2vw;
    top: 68.4vw;
}
#toilet .inner-Box01 .main-photo-box {
    margin-bottom: 40vw;
}
#toilet .inner-Box01 .inner {
    padding: 0 0 14vw;
}
#toilet .inner-Box02 .inner h4 {
   margin-bottom: 8.6vw;
}
#toilet .inner-Box02 .list li:nth-child(1) .ttl,
#toilet .inner-Box02 .list li:nth-child(4) .ttl {letter-spacing: -0.02em;}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
    padding-bottom: 4vw;
    position: relative;
    background: url(../images/mizumawari_reform/bottom-sec-bg.png)no-repeat;
    background-size: cover;
}
#bottom-sec .inner {
    width: 94.205vw;
    margin-inline: auto;
    display: grid;
    position: relative;
    top: -21.4vw;
    margin-bottom: -11vw;
}
#bottom-sec .photo-box {
    display: contents;
}
#bottom-sec .photo01 {
    order: 1;
    margin-bottom: 8.2vw;
}
#bottom-sec .photo02 {
    order: 3;
}
#bottom-sec h3 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Sawarabi Mincho","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;
    font-size:6.763vw;
    letter-spacing: 0.1em;
    line-height: 1.48;
    text-align: center;
    color: #fff;
    order: 2;
    margin-bottom: 8vw;
}
#bottom-sec h3 span {
    font-weight: 600;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.9375;
    text-align: center;
    color: #fff;
    display: block;
    margin-bottom: 4vw;
}

/* bnt-box
-------------------------------------*/
.bnr-box {
    width: 86.96vw;
    margin-inline: auto;
    padding: 19.4vw 0 21vw;
}
.bnr-box .item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8.8vw;
}
.bnr-box img {
    margin-bottom: 4.2vw;
}
.bnr-box .txt {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 1.75;
    text-align: center;
    color: #1b1b1b;
}
}