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

/* lead
-------------------------------------*/
#lead {
    padding: 62px 0 137px;
}
#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/naisou-reform/lead-deco.png) no-repeat;
    background-size: contain;
}
#lead .content-box .inner {
    position: relative;
    z-index: 2;
    padding: 87px 95px 58px;
    background: url(../images/naisou-reform/lead-bg.png)no-repeat;
    background-size: cover;
}
#lead .content-box h3 {
    margin-bottom: 38px;
    margin-left: 4px;
}
#lead .content-box .txt {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: 18px;
}

/* menu
-------------------------------------*/
#menu {
    background: #E3E2E0;
    width: min(95%, 1200px);
    margin-inline: auto;
    margin-bottom: 387px;
}
#menu .inner {
    padding: 0 175px 298px;
    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: -48px;
    left: 49.4%;
    transform: translateX(-50%);
    width: 850px;
}

/* sec共通
-------------------------------------*/
.sec .inner-Box01 {
    background: url(../images/naisou-reform/common-bg.png) repeat bottom center;
    background-size: contain;
}
.sec .inner-Box01 .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
    padding: 0 0 122px;
}
.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: 37px;
}
.sec .inner-Box01 .main-photo-box {
    position: relative;
    width: min(95%, 1100px);
    margin-inline: auto;
    margin-bottom: -300px;
    top: -315px;
}
.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 #1C1C1C;
    padding: 50px 0 64px;
    margin-bottom: 90px;
}
.sec .recommend-box h4 {
    margin-bottom: 47px;
}
.sec .recommend-box h4 img {
    margin-inline: auto;
}
.sec .recommend-box .list {
    display: grid;
    gap: 19px;
    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 #D5D5D5;
    position: relative;
    padding: 0 0 5px 30px;
}
.sec .recommend-box .list li::before {
    position: absolute;
    content: "";
    top: 5px;
    left: 0;
    background: url(../images/naisou-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 #1C1C1C;
    padding: 57px 59px 50px 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: #1C1C1C;
    padding-bottom: 16px;
    border-bottom: 1px dashed #D5D5D5;
    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 53px -16px;
}
.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: 43px 20px;
    margin-bottom: 109px;
}
.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 6px;
}
.sec .works-box {
    background: url(../images/naisou-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: #63432D;
}
.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;
}
/* interior
-------------------------------------*/
#interior {
    padding-bottom: 442px;
}
#interior-anchor {
    position: relative;
    top: -300px; 
    height: 0;
}
#interior .inner-Box01 h3 {
    left: 50.4%;
}

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

/* change
-------------------------------------*/
#change {
    padding-bottom: 405px;
}
#change .inner-Box01 .inner {
    padding: 0 0 118px;
}
#change-anchor {
    position: relative;
    top: -300px; 
    height: 0;
}
#change .inner-Box01 .main-photo-box {top: -321px;margin-bottom: -305px;}
#change .inner-Box01 h3 {
    position: relative;
    top: 68px;
    left: 50.4%;
    transform: translateX(-50%);
}
#change .inner-Box01 .price {
    bottom: 31px;
}
#change .recommend-box {
    padding: 50px 0 65px;
}
#change .recommend-box .list {
    width: min(95%, 411px);
}
#change .inner-Box02 .inner h4 {
    margin: 0 0 53px -15px;
}
#change .inner-Box02 .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#change .inner-Box02 .inner .works-box h4 {
    margin: 0 0 37px;
}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
    padding-bottom: 63px;
    position: relative;
    background: url(../images/naisou-reform/bottom-sec-bg.png)no-repeat;
    background-size: cover;
}
#bottom-sec .inner {
    width: min(95%, 1200px);
    margin-inline: auto;
}
#bottom-sec .photo {
    position: relative;
    top: -175px;
    margin-bottom: -117px;
}
#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: -2px;
}

/* bnr-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/naisou-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/naisou-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: 10.6vw 2.9vw 11.5vw;
    background: url(../images/naisou-reform/sp-lead-bg.png)no-repeat;
    background-size: cover;
    display: grid;
    margin-top: 4.4vw;
    margin-bottom: 36vw;
    position: relative;
}
#lead::after {
    content: "";
    position: absolute;
    bottom: -7.5vw;
    right: 5.2vw;
    width: 19.81vw;
    height: 23.675vw;
    z-index: 1;
    background: url(../images/naisou-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-bottom: 7.8vw;
    order: 1;
    margin-inline: auto;
}
#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 1.9vw;
    order: 3;
}

/* menu
-------------------------------------*/
#menu {
    background: #E3E2E0;
    margin-bottom: 33.5vw;
}
#menu .inner {
    padding: 0 2.9vw 9.5vw;
    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/naisou-reform/common-bg.png) repeat bottom center;
    background-size: contain;
}
.sec .inner-Box01 .inner {
    width: 94.205vw;
    margin-inline: auto;
    padding: 0 0 11.5vw;
}
.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: -21.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: 25.5vw;}
.sec .inner-Box01 .desc {
    font-size:3.382vw;
    font-weight: 500;
    line-height: 1.71428;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 7.4vw;
    color: #1B1B1B;
}

.sec .recommend-box {
    background: #FFFFFF;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.16);
    border-top: 2vw solid #1C1C1C;
    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 #D5D5D5;
    position: relative;
    padding: 0 0 1.8vw 6vw;
}
.sec .recommend-box .list li::before {
    position: absolute;
    content: "";
    top: 1vw;
    left: 0;
    background: url(../images/naisou-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 #1C1C1C;
    padding: 8vw 4.85vw 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: #1C1C1C;
    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.5vw;
}
.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: 29.2vw;
}
.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 {
    position: relative;
    padding: 0 0 0;
    margin-left: calc(50% - 50vw);
    width: 100vw;
    background: url(../images/naisou-reform/sp-works-bg-c.png) repeat-y center top;
    background-size: contain;
    min-height: 60.14vw;
}
.sec .works-box::before,
.sec .works-box::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.sec .works-box::before {
    top: -15vw;
    background-image: url(../images/naisou-reform/sp-works-bg-t.png);
    height: 64.49vw;
}
.sec .works-box::after {
    bottom: -10vw;
    background-image: url(../images/naisou-reform/sp-works-bg-b.png);
    height: 16vw;
}

.sec .inner-Box .inner .works-box h4 {
    margin: 0 0 9.2vw -2.8vw;
    position: relative;
}
.sec .works-box .system-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4vw 3vw;
    width: 90.34vw;
    margin-inline: auto;
    padding: 0 0 8.5vw;
    position: relative;
}
.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: #63432D;
    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;
}

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

/* entrance
-------------------------------------*/
#entrance {
    padding-bottom: 45vw;
}
#entrance-anchor {
    position: relative;
    top: -20vw; 
    height: 0;
}
#entrance .inner-Box01 .inner {padding: 0 0 12.5vw;}
#entrance .inner-Box01 .main-photo-box {
    margin-bottom: 25.2vw;
}
#entrance .inner-Box01 .price {
    bottom: -20.9vw;
}

/* change
-------------------------------------*/
#change {
    padding-bottom: 45.6vw;
}
#change .inner-Box01 h3{
    top: -28vw;
    margin-bottom: -41.2vw;
}
#change-anchor {
    position: relative;
    top: -30vw;
    height: 0;
}
#change .inner-Box01 .price {
    bottom: -12.2vw;
}
#change .inner-Box01 .price02 {
    width: 45.9vw;
    position: absolute;
    right: 2vw;
    top: 68.4vw;
}
#change .inner-Box01 .main-photo-box {
    margin-bottom: 15.6vw;
}
#change .inner-Box01 .inner {
    padding: 0 0 14.0vw;
}
#change .inner-Box02 .inner h4 {
   margin-bottom: 9.8vw;
}
#change .inner-Box02 .list li:nth-child(1) .ttl,
#change .inner-Box02 .list li:nth-child(4) .ttl {letter-spacing: -0.02em;}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
    padding-bottom: 0;
    position: relative;
    background: url(../images/naisou-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: 0vw;
    gap: 8.5vw;
}
#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: -10.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;
}
}