@charset "utf-8";

/* ==================================================================
    renovation.css

=================================================================== */

/* --------------------------------
    □ general
-------------------------------- */
.contents main .accentArea {
    background-image:url("../../images/renovation/accent.jpg");
}
.contents main > section {
    padding: 100px 0;
    margin-bottom: 0;
}
.contents main section h2 {
    margin-bottom: 40px!important;
}
.contents main section h3 {
    font-size: 156%;
    margin-bottom: 40px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: center;
}
.contents main section .txt {
    line-height: 1.8;
    text-align: center;
}
.contents main section .note li {
    font-size: 80%;
    padding-left:1em;
    text-indent:-1em;
    margin-bottom: 3px;
}
#footer_cv {
    display: none;
}

/* --------------------------------
    □ intro
-------------------------------- */
#intro {
    background:#F3F3F3;
}
#intro h2 {
    font-size: 200%;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.7;
    margin: 20px auto 70px!important;
    position: relative;
    z-index: 1;
}
    #intro h2 p {
        position: absolute;
        top:50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        color: #fff;
        margin: 0!important;
        padding: 0!important;
        z-index: -1;
    }
#intro .checklist {
    max-width: 680px;
    margin: 0 auto;
}
#intro .checklist li {
    font-size: 19px;
    padding-left: 45px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}
    #intro .checklist li:before {
        content: "";
        background: url("../../images/renovation/icon-check.png");
        width: 30px;
        height: 29px;
        background-size: contain;
        top: -0.2em;
        left: 0;
        display: block;
        position: absolute;
    }
    #intro .checklist li:last-child {
        margin-bottom: 0;
    }

#intro .performance {
    max-width: 1000px;
    box-sizing: border-box;
    margin: 0 auto;
}
#intro .performance h3 {
    font-size: 23px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 28px;
}
#intro .performance .msg {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1.8;
    margin: 40px 0 20px;
    padding-bottom: 90px;
    background: url("../../images/renovation/arrow.png") 50% 100% no-repeat;
}
    #intro .performance .msg span {
        border-bottom: 3px solid #000;
    }
#intro .performance .performance-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#intro .performance .performance-list li {
    width: calc((100% - 18px * 2) / 3);
    box-sizing: border-box;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.8;
    text-align: center;
    background-color: #000;
    padding: 40px 12px;
    color: #fff;
}
#intro .performance .performance-list li .en_oswald {
    font-size: 32px;
    letter-spacing: 0.1em;
    line-height: 1.3;
    display: block;
    margin-bottom: 10px;
}

/* --------------------------------
    □ plan
-------------------------------- */
#plan h3 {
    margin-bottom: 20px;
}
#plan p.txt {
    margin-bottom: 40px;
}
#plan ul.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}
#plan ul.list li {
    width: calc((100% - 4px * 4) / 5);
    box-sizing: border-box;
    border-bottom: 1px solid #222;
}
#plan ul.list li dl {
    text-align: center;
}
#plan ul.list li dt.tubo {
    text-align: center;
    margin-bottom: 20px;
}
#plan ul.list li dd.price {
    text-align: center;
    margin-bottom: 20px;
}
    #plan ul.list li dd.price em {
        font-size: 131%;
    }
#plan .list li small {
    font-size: 72%;
}

/* --------------------------------
    □ standard
-------------------------------- */
#standard {
    background:#F3F3F3;
    background-size: cover;
}
#standard .txt {
    margin-bottom: 40px;
}
#standard ul.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
#standard ul.list li {
    width: calc((100% - 35px * 2) / 3);
    box-sizing: border-box;
    margin-bottom: 30px;
}
#standard ul.list li dt img {
    width: 100%;
    height: auto;
}
#standard ul.list li dd {
    font-size: 17px;
    margin-top: 10px;
    text-align: center;
}
#standard ul.list.text li {
    font-size: 17px;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #0c0c0c;
    padding: 25px 10px;
    margin-bottom: 14px;
    text-align: center;
}

/* --------------------------------
    □ flow
-------------------------------- */
#flow h3 {
    margin-bottom: 30px;
}
#flow ul.list {
    color: #282828;
    max-width: 1000px;
    margin: 40px auto 0;
}
    #flow ul.list li:not(:last-of-type) {
        position: relative;
        margin-bottom: 30px;
    }
    #flow ul.list li:not(:last-of-type)::after {
        content: "";
        display: inline-block;
        width: 26px;
        height: 12px;
        background: #333333;
        clip-path: polygon(0 0, 100% 0%, 50% 100%);
        position: absolute;
        bottom: -22px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
#flow ul.list li dl {
    display: flex;
    flex-wrap: wrap;
}
#flow ul.list li dl dt {
    width: 123px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#flow ul.list li dl dt .en_oswald {
    color: #fff;
    font-size: 30px;
}
    #flow ul.list li dl dt .en_oswald .sml {
        display: block;
        font-size: 17px;
    }
#flow ul.list li dl dd {
    width: calc(100% - 123px);
    padding-left: 78px;
    box-sizing: border-box;
    background-color: #f0f0f0;
    padding: 25px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#flow ul.list li dl dd .txtArea {
    width: calc( 96% - 150px);
}
    #flow ul.list li dl dd h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    #flow ul.list li dl dd .txt {
        font-size: 15px;
        margin-bottom: 0;
        text-align: left;
    }
    #flow ul.list li dl dd .note {
        font-size: 15px;
        padding-left:1em;
        text-indent:-1em;
        margin-bottom: 0;
        text-align: left;
    }
#flow ul.list li dl dd .image {
    width: 150px;
    margin-bottom: 0;
}

/* --------------------------------
    □ design
-------------------------------- */
#design {
    background-color: #111;
    color: #fff;
}
#design .container {
    width: 100%;
    max-width: 1165px;
    margin: 0 auto
}
#design ul.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#design ul.list li {
    width: calc((100% - 10px * 2) / 3);
    box-sizing: border-box;
    margin-bottom: 10px;
    overflow: hidden;
}

/* --------------------------------
    □ bnrArea
-------------------------------- */
#bnrArea {
    padding: 60px 0;
}
#bnrArea #logo p{
	text-align: center;
}
#bnrArea #logo p img{
	width: 20%;	
}
#bnrArea p.caution{
	font-size: 80%;
    text-align: center;
}
@media only screen and
(max-width : 767px) {
    
    #bnrArea {
        padding: 40px 0;
    }
    #bnrArea #logo p img{
        width: 50%;	
    }
}


/* --------------------------------
    □ contact
-------------------------------- */
#contact {
    background-color: #727171;
    color: #fff;
}
#contact .container {
    width: 100%;
    max-width: 1165px;
    margin: 0 auto
}
#contact .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#contact .txtArea {
    width: 48%;
}
#contact .txtArea > *,
#contact .txtArea h2.title,
#contact .txtArea h2.title span {
    text-align: left;
}
#contact .txtArea h3 {
    letter-spacing: 0;
    margin-bottom: 20px;
}
#contact .txtArea ul.list {
    max-width: 430px;
    margin-top: 40px;
}
#contact .buttonStyle:not(:last-of-type) {
    margin-bottom: 15px;
}
#contact .buttonStyle a {
    display: block;
    font-size: 18px;
    color: #333;
    background-color: #fff;
    background-image: url("../../images/renovation/mail.png");
    background-position: 6% 50%;
    background-repeat: no-repeat;
    padding: 24px 60px;
    text-align: center;
    width: auto;
}
    #contact .buttonStyle.line a {
        background-image: url("../../images/renovation/line.png");
    }
    #contact .buttonStyle.tel a {
        background-image: url("../../images/renovation/tel.png");
    }
        #contact .buttonStyle.tel a span {
            font-size: 70%;
            display: block;
            margin-top: 4px;
        }
#contact .buttonStyle.tel a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
    #contact .buttonStyle a:hover {
        background-color: #dcdcdc;
    }
#contact .mapArea {
    width: 51%;
}
#contact .mapArea .googleMap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
}
    #contact .mapArea .googleMap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
#contact .mapArea dl {
    margin-top: 30px;
}
#contact .mapArea dl dt {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
    #contact .mapArea dl dt span {
        color: #646464;
        font-size: 15px;
        font-weight: 500;
        padding: 3px 6px;
        background-color: #fff;
        margin-right: 10px;
    }
#contact .mapArea dl dd {
    font-size: 14px;
    letter-spacing: 0.05em;
}

/* --------------------------------
    □ buttonArea
-------------------------------- */
#buttonArea {
    padding: 65px 0;
}
#buttonArea p.works {
    margin-bottom: 0;
}
#buttonArea p.works a {
    width: 100%;
    font-size: 112%;
    padding-top: 25px;
    padding-bottom: 25px;
}
    #buttonArea p.works a span {
        display: block;
        background-position: 0 50%;
        background-size: 34px auto;
        padding-left: 50px;
    }

/* --------------------------------
    □ footer
-------------------------------- */
footer .contactButton a.mail {
    background: #f4e827;
}
    footer .contactButton a.mail:hover {
        background: #e5da27;
    }
footer .contactButton a.mail {
    color: #0e0e0e;
}
    footer .contactButton a.mail span {
        background-image: url("../../images/renovation/mail.png");
        background-size: 31px auto;
    }


/* ==================================================================
    SP
=================================================================== */
@media only screen and
(max-width : 767px) {
    /* --------------------------------
        □ header
    -------------------------------- */
    header {
        border-width: 0;
    }

    /* --------------------------------
        □ general
    -------------------------------- */ 
    .contents {
        border-width: 0;
        padding: 0 4%;
    }
    .contents main .accentArea {
        margin-bottom: 0;
    }
    .contents main .accentArea h1 em.en {
        letter-spacing: 0.2em;
    }
    .contents main > section {
        padding: 50px 0;
    }
    .contents main > section .container {
        width: auto!important;
        margin-left: 4%!important;
        margin-right: 4%!important;
    }
    .contents main section h2 {
        margin-bottom: 30px!important;
    }
    .contents main section h3 {
        font-size: 125%;
        letter-spacing: 0;
        line-height: 1.3;
        margin-bottom: 30px;
    }
    .contents main section .txt {
        letter-spacing: 0.01em;
        line-height: 1.5;
        text-align: left;
    }
    .contents main section .txt br {
        display: none;
    }

    /* --------------------------------
        □ intro
    -------------------------------- */
    #intro h2 {
        font-size: 130%;
        letter-spacing: 0;
        line-height: 1.5;
        margin: 0 auto 30px !important;
    }
    #intro h2 p {
        width: 120%;
    }
    #intro .checklist li {
        font-size: 15px;
        padding-left: 30px;
        margin-bottom: 10px;
    }
        #intro .checklist li:before {
            top: 0.05em;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
        }
    #intro .performance .msg {
        font-size: 21px;
        letter-spacing: 0.05em;
        padding-bottom: 48px;
        background-size: 50px;
        margin-top: 30px;
    }
    #intro .performance {
        box-sizing: border-box;
    }
    #intro .performance h3 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    #intro .performance .performance-list {
        flex-direction: column;
        gap: 10px;
    }
    #intro .performance .performance-list li {
        width: 100%;
        padding: 8px 12px;
        font-size: 84%;
    }
    #intro .performance .performance-list li .en_oswald {
        font-size: 24px;
        margin-bottom: 0;
    }

    /* --------------------------------
        □ plan
    -------------------------------- */
    #plan {
        padding-bottom: 70px;
    }
    #plan p.txt {
        margin-bottom: 20px;
    }
    #plan ul.list {
        margin-bottom: 20px;
    }
    #plan ul.list li {
        width: 48%;
        margin-bottom: 30px;
    }
    #plan ul.list li dt.tubo {
        text-align: center;
        margin-bottom: 10px;
    }
    #plan ul.list li dd.price em {
        font-size: 120%;
    }

    /* --------------------------------
        □ standard
    -------------------------------- */
    #standard .txt {
        margin-bottom: 40px;
    }
    #standard ul.list {
        margin-bottom: 0;
    }
    #standard ul.list li {
        width: 48%;
        margin-bottom: 20px;
    }
    #standard ul.list li dt img {
        width: 100%;
    }
    #standard ul.list li dd {
        font-size: 87%;
        margin-top: 5px;
    }
    #standard ul.list.text li {
        padding: 15px 10px;
        font-size: 90%;
    }

    /* --------------------------------
        □ flow
    -------------------------------- */
    #flow {
        padding: 60px 0;
        z-index: 1;
        position: relative;
    }
    #flow:before {
        width: 100%;
    }
    #flow ul.list li dl {
        flex-direction: column;
    }
    #flow ul.list li dl dt {
        width: 100%;
        padding: 4px 0;
    }
        #flow ul.list li dl dt .en_oswald .sml {
            padding-right: 5px;
            display: inline-block;
        }
    #flow ul.list li dl dd {
        width: 100%;
        padding: 16px 4%;
    }
    #flow ul.list li dl dd .txtArea {
        width: calc( 96% - 100px);
    }
        #flow ul.list li dl dd h4 {
            font-size: 16px;
        }
        #flow ul.list li dl dd .txt {
            font-size: 14px;
        }
        #flow ul.list li dl dd .note {
            font-size: 80%;
            margin-top: 5px;
        }
    #flow ul.list li dl dd .image {
        width: 100px;
        padding-top: 35px;
    }

    /* --------------------------------
        □ design
    -------------------------------- */
    .lightbox {
        transform: translateX(50vw) translateX(-50%);
        transform: translateY(50vh) translateY(-50%);
    }

    /* --------------------------------
        □ contact
    -------------------------------- */
    #contact .flex {
        flex-direction: column;
    }
    #contact .txtArea {
        width: 100%;
    }
    #contact .txtArea h2.title,
    #contact .txtArea h2.title span,
    #contact .txtArea h3 {
        text-align: center;
    }
    #contact .txtArea h3 {
        margin-bottom: 30px;
    }
    #contact .txtArea ul.list {
        margin: 30px auto;
    }
    #contact .buttonStyle a {
        font-size: 17px;
        padding: 15px 50px;
        background-size: 26px auto;
    }
    #contact .buttonStyle.tel a[href*="tel:"] {
        pointer-events: auto;
    }
        #contact .buttonStyle.tel a[href*="tel:"]:hover {
            text-decoration: none;
        }
    #contact .mapArea {
        width: 100%;
    }
    #contact .mapArea dl {
        margin-top: 30px;
    }
    #contact .mapArea dl dt {
        font-size: 16px;
        letter-spacing: 0.05em;
    }

    /* --------------------------------
        □ buttonArea
    -------------------------------- */
    #buttonArea {
        padding: 40px 0;
    }
    #buttonArea p.works a {
        font-size: 100%;
        padding-left: 4%;
        padding-right: 30px;
    }

    /* --------------------------------
        □ footer
    -------------------------------- */
    footer .contactButton a {
        vertical-align: middle;
    }
    footer .contactButton a.mail span {
        background-size: auto 18px;
        padding-left: 25px;
    }

}