@charset "UTF-8";
/* CSS Document */

/* ---------- COMMON ---------- */
article img{
    max-width: 100%;
}

/* content title */
.content_title {
    background: #0d7f8e;
}

.content_title h1{
    background-image: url("../img/proposal/bg_kuusouteian_content_ttl.png");
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top: 25px;
    padding-bottom: 20px;
    width: 650px;
}

.content_title img{
    width: 240px;
}

/* proposal title */
.proposal_title{
    text-align: center;
}

.proposal_title p{
    font-weight: 400;
}

.proposal_title h2{
    color: #3e3a39;
    font-weight: 600;
    line-height: 1.5em;
}

.proposal_title h2 span{
    display: block;
    font-size: 50%;
}

.proposal_title figure{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

/* exis point */
.exis_point{
    margin-bottom: 20px;
}

.exis_point h3 {
    align-items: center;
    color: #000000;
    display: flex;
    font-size: 110%;
}

.exis_point h3:after{
    content: "";
    height: 6px;
    flex-grow: 1;
    background-color: #b2b2b2;
}

.exis_point h3:after{
    margin-left: 1rem;
}

.exis_point figure {
    align-items: center;
    display: flex;
}

.exis_point figure:before{
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #b2b2b2;
}

.exis_point figure:before{
    margin-right: 1rem;
}

/* proposal preamble */

.proposal_preamble h2:before,
.proposal_preamble h3:before{
    color: #eed800;
    content: "■";
}

.proposal_preamble h2:before{
    font-size: 110%;
}

.proposal_preamble h3{
    font-size: 110%;
}

.proposal_preamble dl{
    border-bottom: solid 1px #cbcbcb;
    width: 100%;
}

.proposal_preamble dl:first-of-type{
    border-top: solid 1px #cbcbcb;
}

.proposal_preamble ul{
    border-top: solid 1px #cbcbcb;
    border-bottom: solid 1px #cbcbcb;
}

.proposal_preamble li:before{
    align-items: center;
    color: #989898;
    content: "●";
    font-size: 90%;
    margin-right: 2px;
}

.proposal_preamble li{
    list-style: none;
    text-indent: -1em;
}

/* max budget */
.max_budget{
    margin-bottom: 30px;
}

.max_budget dl{
    border: solid 2px #1a1a1a;
    display: table;
    font-weight: 400;
    width: 100%;
}

.max_budget dt,
.max_budget dd{
    display: table-cell;
    text-align: center;
}

.max_budget dt{
    border-right: solid 1px #1a1a1a;
    padding: 10px 5px;
}

.max_budget dd{
    padding: 10px;
}

/* analysis */
.balloon {
    border: solid 1px #000000;
    border-radius: 20px;
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 20px;
    max-width: 100%;
    min-width: 120px;
    position: relative;
}

.balloon:before {
    border: 6px solid transparent;
    border-top: 11px solid #ffffff;
    bottom: -17px;
    content: "";
    left: 50%;
    margin-left: -6px;
    position: absolute;
    z-index: 2;
}

.balloon:after {
    border: 8px solid transparent;
    border-top: 14px solid #000000;
    bottom: -22px;
    content: "";
    left: 50%;
    margin-left: -8px;
    position: absolute;
    z-index: 1;
}

.analysis figure{
    text-align: center;
}

/* proposal content */
.proposal_content h3{
    background: #f3ead2;
    font-weight: 600;
    text-align: center;
}

/* property */
.property{
    margin-bottom: 30px;
}

.property dl{
    display: table;
    border-bottom: solid 1px #cbcbcb;
    width: 100%;
}

.property dl:first-of-type{
    border-top: solid 1px #cbcbcb;
}

.property dl dt,
.property dl dd{
    display: table-cell;
}

/* features */
.features dl{
    border-bottom: solid 1px #cbcbcb;
    border-right: solid 1px #cbcbcb;
    display: table;
    width: 100%;
}

.features dl dt,
.features dl dd{
    display: table-cell;
}

.features dl dt{
    text-align: center;
}

.features dl dd{
    border-left: solid 1px #cbcbcb;
    width: 44%;
}

.features dl:first-of-type dt{
    color: #ffffff;
}

.features dl:first-of-type dd{
    text-align: center;
}

.features dl:first-of-type dd:first-of-type{
    background: #f1f1f1;
}

.features dl:first-of-type dd:nth-of-type(2){
    background: #f3ead2;
}

/* line up */
.list_up{
        padding-left: 1em;
    }

.list_up li{
    list-style: none;
    margin-bottom: 5px;
    text-indent: -1em;
}

.list_up li:before{
    align-items: center;
    color: #989898;
    content: "●";
    font-size: 90%;
    margin-right: 2px;
}

/* design */
.design li{
    border: solid 1px #000000;
    list-style: none;
}

/* points */
.points{
    background: #f9f8f8;
}

.points h4{
    font-size:110%;
}

/* perth */
.perth{
    margin-left: auto;
    margin-right: auto;
}

.perth li{
    display: inline-block;
    list-style: none;
}

/* ---------- Mobile ---------- */
@media(max-width:737px) {

    #content-body section:not(.content_title){
        margin-left: 1.5em;
        margin-right: 1.5em;
    }

/* content title */
    .content_title h1 {
        background-size: 350px;
        margin-bottom: 30px;
        width: 100%;
    }

    .content_title img{
        margin-left: 1.5em;
        width: 140px;
    }

/* proposal title */
    .proposal_title p{
        margin-bottom: 5px;
    }

    .proposal_title h2{
        font-size: 160%;
        margin-bottom: 20px;
    }

/* exis point */
    .exis_point figure img{
        width: 45px;
    }

/* proposal preamble */
    .proposal_preamble section{
        margin-bottom: 30px;
    }

    .proposal_preamble h2:before,
    .proposal_preamble h3:before{
        margin-right: 5px;
    }

    .proposal_preamble h2{
        font-size: 120%;
        margin-bottom: 10px;
    }

    .proposal_preamble dl dt{
        padding: 5px;
    }

    .proposal_preamble dl dd{
        padding: 0 5px 5px 5px;
    }

    .proposal_preamble ul{
        padding: 10px 0 10px 1em;
    }

    .proposal_preamble li{
        margin-bottom: 5px;
    }

/* analysis */
    .analysis{
        margin-bottom: 30px;
    }

    .balloon p {
        padding: 20px;
    }

    .analysis figure img{
        width: 90px;
    }

/* proposal content */
    .proposal_content section{
        margin-bottom: 40px;
    }

    .proposal_content h3{
        font-size: 120%;
        margin-bottom: 10px;
        padding: 5px;
    }

/* property */
    .property dl dt,
    .property dl dd{
        padding: 5px;
    }

    .property dl dt{
        width: 6em;
    }

/* features */
    .features dl dt,
    .features dl dd{
        padding: 5px 10px;
    }

    .features dl dt{
        min-width: 2.5em;
    }

/* line up */
    .list_up{
        margin: 0 1em;
    }

    .notes{
        margin: 5px 1em 0 2em;
    }

/* design */
    .design li{
        margin-bottom: 15px;
    }

    .design li span{
        font-size: 90%;
    }

/* points */
    .points{
        margin-bottom: 20px;
        padding: 10px;
    }

    .points h4{
        margin-bottom: 10px;
    }

    .points p{
        margin-bottom: 10px;
    }

/* perth */
    .perth{
        margin-bottom: 20px;
    }

    .perth li{
        margin-left: 4px;
        margin-bottom: 4px;
    }

    .perth li img{
        width: 132px;
    }
}

/* ---------- Portlate ---------- */
@media(max-width:567px) {
/* content title */
    .content_title h1 {
        background-position: right -90px top;
    }

/* proposal preamble */
    .proposal_preamble dl dt{
        font-weight: 400;
    }

/* perth */
    .perth{
        width: 280px;
    }
}

/* ---------- landscape ---------- */
@media(max-width:767px) and (min-width: 568px){
/* content title */
    .content_title h1 {
        background-position: right top;
    }

    .proposal_title figure{
        max-width: 450px;
    }

/* proposal preamble */
    .proposal_preamble dl{
        display: table;
    }

    .proposal_preamble dl dt,
    .proposal_preamble dl dd{
        display: table-cell;
    }

    .proposal_preamble dl dt{
        width: 8em;
    }

/* perth */
    .perth{
        width: 420px;
    }
}

/* ---------- Tablet / PC ---------- */
@media (min-width: 737px) {
/* content title */
    .content_title h1 {
        background-position: right top;
        margin-bottom: 45px;
    }

    .content_title img{
        width: 240px;
    }

    article section{
        margin-left: auto;
        margin-right: auto;
        width: 720px;
    }

/* proposal title */
    .proposal_title p{
        margin-bottom: 15px;
    }

    .proposal_title h2{
        font-size: 210%;
        margin-bottom: 25px;
    }

    .proposal_title img{
        width: 650px;
    }

/* exis point */
    .exis_point h3 {
        margin-bottom: 20px;
    }

/* proposal preamble */
    .proposal_preamble section{
        margin-bottom: 40px;
    }

    .proposal_preamble h2:before,
    .proposal_preamble h3:before{
        margin-right: 10px;
    }

    .proposal_preamble h2{
        font-size: 130%;
        margin-bottom: 15px;
    }

    .proposal_preamble h3{
        margin-bottom: 15px;
    }

    .proposal_preamble dl{
        display: table;
    }

    .proposal_preamble dl dt,
    .proposal_preamble dl dd{
        display: table-cell;
    }

    .proposal_preamble dl dt{
        width: 148px;
    }

    .proposal_preamble dl dt{
        padding: 5px 20px;
    }

    .proposal_preamble dl dd{
        padding: 5px 20px 5px 0;
    }

    .proposal_preamble ul{
        padding: 10px 2.5em;
    }

    .proposal_preamble li{
        margin-bottom: 10px;
    }

/* max budget */
    .max_budget{
        font-size: 110%;
    }

/* analysis */
    .analysis{
        margin-bottom: 20px;
    }

    .balloon p {
        padding: 25px;
    }

/* proposal content */
    .proposal_content section{
        margin-bottom: 40px;
    }
    .proposal_content h3{
        font-size: 130%;
        margin-bottom: 20px;
        padding: 10px;
    }

/* property */
    .property dl dt,
    .property dl dd{
        padding: 10px 20px;
    }

    .property dl dt{
        width: 100px;
    }

/* features */
    .features{
        margin-bottom: 50px;
    }

    .features dl dt,
    .features dl dd{
        padding: 10px 15px;
    }

    .features dl dt{
        min-width: 120px;
    }

/* line up */
    .list_up{
        margin: 0 28px;
    }

    .notes{
        margin: 10px 28px 0 28px;
    }

/* design */
    .design{
        background: url("../img/proposal/kuusou_arrow.svg") no-repeat center center;
        margin-bottom: 30px;
        text-align: center;
    }

    .design li{
        display: inline-block;
    }

    .design li:first-of-type{
        margin-right: 36px;
    }

    .design li:last-of-type{
        margin-left:36px;
    }

    .design li span{
        display: block;
        text-align: left;
    }

    .design li img{
        width: 300px;
    }

/* points */
    .points{
        margin-bottom: 15px;
        padding: 20px;
    }

    .points:after{
        content: "";
        clear: both;
        display: block;
    }

    .points h4{
        margin-bottom: 15px;
    }

    .points img{
        width: 395px;
    }

    .points div{
        width: 250px;
    }

    .right div{
        float: left;
    }

    .right figure{
        float: right;
    }

    .left div{
        float: right
    }

    .left figure{
        float: left;
    }

/* perth */
    .perth{
        margin-bottom: 30px;
        padding-top: 10px;
        width: 710px;
    }

    .perth li{
        display: inline-block;
        list-style: none;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .perth li img{
        width: 220px;
    }
}