@charset "utf-8";

/*　コンテンツ全体
-----------------------------------*/
img{width: 100%}
.main{
background: #fff;
background-repeat: no-repeat;
background-size: contain;

margin-top: 2.5rem;
}

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

@media screen and (max-width: 1470px) {
.main{margin-top: 3rem;}  
}

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

}


/*　タイトル
-----------------------------------*/
h2{
    width: 100%;
    font-size: 3rem;
    font-weight: 100;
    margin: 5rem auto 0;
    letter-spacing: 1vw;
    text-align: center;
    color: #000;
    border-bottom: c;
    padding: 1rem 0;
    background: url(../img/plan/bg.jpg);
}

@media screen and (max-width: 1660px) {
h2{margin: 8rem auto 0;}    
}

h4{
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    padding: 2rem 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 768px) {
h2{margin: 6rem auto 0;font-size: 6vw;}
h4 {
    font-size: 3.8vw;
    padding: 1rem 0;
}    
} 

.btn{
    width: 100%;
    padding: 7px 5px;
    margin: 1rem 0;
    display: inline-block;
    text-align: center;
    letter-spacing: .4vw;
    font-size: 1.5rem;
    color: #fff;
    background: rgb(68 133 169);
    background: linear-gradient(135deg, rgb(133 92 31) 0%, rgb(193 135 5) 51%, rgb(181 149 37) 100%);
    font-weight: 400;
    transition: .3s all;
}

.btn:hover {opacity: .7}

@media screen and (max-width: 768px) {   
.btn {padding: 8px 5px 6px;}
}


/*　間取りサムネイル
-----------------------------------*/
.plan_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    margin: 30px auto 50px;
}

.plan_box li{
    width: 45%;
    margin: 0 2rem 4rem;
    text-align: center;
}

.plan_box li:last-child::after{
    content: "";
    display: block;
    width: 42%;
    height: 0;
}

.plan_box li img{
/*border: 1px solid #999;*/
}

@media screen and (max-width: 1600px) {
.plan_box {width: 1175px;}  
}

@media screen and (max-width: 1300px) {
.plan_box {width: 98%;}  
}

@media screen and (max-width: 839px) {
.plan_box {flex-wrap: wrap;}
.plan_box li {width: 40%;}    
    
}

@media screen and (max-width: 768px) {
.plan_box {max-width: none;}
.plan_box li{min-width: 0;}
.plan_box li{
    width: 100%;
    margin-bottom: 4rem;
}
.plan_box li:last-child {margin-bottom: 0;}
}


/* 凡例・注釈
-----------------------------------*/
.cap {display: flex; margin-top: 8px}
.cap span {
    display: inline-flex;
    justify-content: flex-start;
    padding: 0 1.5em 0 0;
}
.cap span:first-child {padding: 0;}
.cap figure {display: flex; align-items: center;}

.cap figcaption {padding:0 .5rem 0 1.5rem; width: 100%; white-space: nowrap}
.cap_s1 {padding:0 .5rem 0!important;}
.cap figure img{display: block}

@media screen and (max-width: 768px) {
.cap {
    flex-wrap: wrap;
    justify-content: center;
}
.cap span {padding: .5rem 2rem .5rem 0;}
.cap span:first-child {padding: .5rem 1rem .5rem 0;}
}