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

/*			location
==============================*/
.contents_Wrap {
	background: transparent;
	color: #3e4e57;
}
.contents_Wrap section {
	overflow: hidden;
}
.contents_Wrap figure {
	position: relative;
	height: fit-content;
}

.page_mv {
	position: relative;
	background: url(../img/main.jpg) no-repeat center center;
	background-size: cover;
	aspect-ratio: 14 / 5.3;
}
.page_mv h2 {
	padding: 5% 0;
	font-family: "EB Garamond", serif;
	color: #fff;
	font-size: 4vw;
	letter-spacing: 0.2em;
	text-align: center;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 7px rgba(0, 0, 0, 0.8));
}

.head_box {
	text-align: center;
	line-height: 1.8;
	letter-spacing: 0.08em;
}
.head_box span {
	font-size: 24px;
	display: inline-block;
}
.head_box p {
	font-size: 16px;
}
.text {

letter-spacing: 0.08em;
}
.text h3 {
font-family: "EB Garamond", serif;
font-size: 32px;
letter-spacing: 0.08em;
margin-bottom: 30px;
}
.text h4 {
font-size: 20px;
line-height: 2.0;
}
.text p {
font-size: 14px;
line-height: 2.0;
}

/*----- 個別 -----*/
.page_head {
	margin: 80px auto;
}
.page_head span {
	color: #273c7d;
}

/* 間取り詳細 */
.plan_ttl{
    width: 90%;
    max-width: 1000px;
    margin: 80px auto 0;
    justify-content: space-between;
}
.plan_ttl .type{
    display: flex;
    width: 30%;
    padding: 0 30px;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: #070232;
}

.type p{ text-align: center;}
.type_txt{
    font-size: 18px;
    border-bottom: 1px solid #fff;
}
.type_txt strong{ font-size: 400%;}
.type_mdr_txt{
    padding-top: 10px;
    font-size: 25px;
    letter-spacing: 4px;
}
.type_mdr_txt strong{ font-size: 130%;}

.mnsk{
    width: 100%;
    max-width: 450px;
}
.mnsk_detail{
    border-bottom: 1px solid #000;
    padding: 30px 10px 20px;
}
.mnsk dl{
    width: 100%;
    margin-bottom: 10px;
    align-items: center;
}
.mnsk dl.total{ margin-top: 10px;}
.mnsk dl dt{
    width: 48%;
    font-size: 14px;
}
.mnsk dl dd{
    width: 52%;
    font-size: 14px;
}
.mnsk dl dd strong{ font-size: 200%;}
.mnsk strong.large{ font-size: 260%;}

.mdr_tori{
    width: 22%;
    /* max-width: 187px; */
}

.madori_Area .madori{
    width: 90%;
    max-width: 1000px;
    margin: 100px auto 30px;
}
.madori_Area .hanrei{
    width: 90%;
    max-width: 119px;
    margin: 20px auto 0;
}

.linkbtn_Area ul{
    width: 90%;
    max-width: 500px;
    margin: 80px auto 100px;
    justify-content: space-between;
}
.linkbtn_Area ul li{
    width: 48%;
    max-width: 240px;
}
.linkbtn_Area ul li a{
    display: block;
    padding: 15px 0;
    color: #fff;
    text-align: center;
    font-size: 16px;
    transition: 0.3s;
}
.linkbtn_Area ul li.print a{
    background: #b8b8b8;
    border: #b8b8b8 1px solid;
}
.linkbtn_Area ul li.back a{
    background: #1c2952;
    border: #1c2952 1px solid;
}
.linkbtn_Area ul li a:hover{
    background: #fff;
    color: #333;
}



/*-----------------------------
tab
-----------------------------*/
@media only screen and (max-width: 1024px) {

}


/*-----------------------------
tab・sp
-----------------------------*/
@media only screen and (max-width: 769px) {

	.page_mv {
		background: url(../img/main_sp.jpg) no-repeat center center;
		background-size: cover;
		aspect-ratio: 18 / 13.6;
	}
	.page_mv h2 {
		padding: 8% 0;
		font-size: 7vw;
	}

	.head_box span {
		font-size: 19.2px;
	}
	.head_box p {
		font-size: 14px;
		text-align: left;
	}
    .text h3 {
    text-align: left;
    font-size: 27px;
    margin-bottom: 20px;
}
    .text h4 {
    font-size: 18px;
    line-height: 1.8;
}
    .text p {
    font-size: 13px;
    text-align: left;
}


	/*----- 個別 -----*/
	.page_head {
		margin: 40px auto;
	}
    /* 間取り詳細 */
    .plan_ttl .type, .mnsk{ margin-right: 0;}

    .plan_ttl{
    flex-wrap: wrap;
    margin: 40px auto 0;
    }
    .plan_ttl .type{
        width: 100%;
        padding: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .type_txt{
        border-bottom: none;
        border-right: 1px solid #000;
        padding-right: 10px;
        font-size: 16px;
    }
    .type_mdr_txt{
        font-size: 20px;
        padding-left: 10px;
    }

    .mnsk{ margin-top: 10px;}
    .mnsk_detail{
        border-top: none;
        padding: 10px 0;
    }
    .mnsk dl dt{
        width: 47%;
        padding-left: 10px;
    }
    .mnsk dl dd{ width: 62%;}
    .mnsk dl dt,.mnsk dl dd{ font-size: 12px;}
    .mdr_tori {
        width: 50%;
        margin: 20px auto 0;
    }
    .madori_Area .madori {
        width: 100%;
        margin: 50px auto;
    }
    .linkbtn_Area ul{
    margin: 40px auto 50px;
}
    .linkbtn_Area ul li.print{ display: none;}
    .linkbtn_Area ul li.back{
        margin: 0 auto;
        width: 72%;
        max-width: none;
    }
    .luxury_ttl{
        margin: 0 auto 20px;
        font-size: 18px;
    }
}

/*-----------------------------
print
-----------------------------*/
@media print {
    header,footer,.main_area,.linkbtn_Area,.contact_area,.page_mv,.ftr_nav{ display: none;}

    .plan_ttl .type, .mnsk{ margin-right: 0;}

    .plan_ttl .type{
        margin: -80px auto 10px;
        border: 1px solid #000;
    }
    .plan_ttl{ flex-wrap: wrap;}
    .plan_ttl .type{
        width: 100%;
        padding: 20px;
        flex-direction: row;
        align-items: center;
    }
    .type_txt{
        border-bottom: none;
        border-right: 1px solid #000;
        padding-right: 10px;
        font-size: 16px;
    }
    .type_mdr_txt{ padding-left: 10px;}

    .mnsk{ margin-top: 10px;}
    .mnsk_detail{
        border-top: none;
        padding: 10px 0 10px 10px;;
    }
    .mnsk dl dt,.mnsk dl dd{ font-size: 12px;}
    .madori_Area .madori{ margin: 20px auto 0;}
}