@charset "UTF-8";
.contents { overflow: hidden; }
/*img{width: 100%;}*/

figure{position: relative;}
.f-46{font-size: 46%;}
.f-50{font-size: 50%;}
.f-60{font-size: 60%;}
.f-70{font-size: 70%;}
.f-80{font-size: 80%;}
.f-90{font-size: 90%;}
.f-110{font-size: 110%;}
.f-120{font-size: 120%;}
.f-130{font-size: 130%;}
.f-140{font-size: 140%;}
.f-150{font-size: 150%;}
.f-160{font-size: 160%;}
.f-170{font-size: 170%;}
.f-180{font-size: 180%;}
.f-190{font-size: 190%;}
.f-200{font-size: 200%;}
.f-210{font-size: 210%;}
.f-220{font-size: 220%;}
.f-230{font-size: 230%;}
.f-240{font-size: 240%;}
.f-340{font-size: 340%;}

.f-12px{font-size: 12px;letter-spacing: 0.04em;}

.caption {
font-size: 10px;
}
figure + .caption {
padding-top: 0.5em;
}

sup{
font-size: 10px;
vertical-align: super;
}
span.note {
display: inline-block;
font-size: 10px;
padding-top: 2em;
}

#main_Wrap {
position: relative;
}
#main_Wrap h2 {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin: 0 auto;
text-align: center;
font-size: clamp(24px,3.333333333333333vw,50px);
color: #fff;
letter-spacing: 0.12em;
font-family: "Cinzel", serif;
}

.lead_Wrap {
width: 94%;
text-align: center;
margin: 0 auto;
padding: 80px 0 100px;
}
.lead_Wrap .copy h4{
color: #224259;
font-size: clamp(21px,3vw,36px);
letter-spacing: 0.08em;
line-height: 1.6;
}
.lead_Wrap .copy p{
font-size: clamp(16px,1.5vw,18px);
letter-spacing: 0.08em;
line-height: 1.8;
}
.lead_Wrap .copy h4 + p{
padding-top: 1.5em;
}
.btn_Wrap {

}
.copy + .btn_Wrap {
margin: 60px auto 0;
}

.btn_Wrap ul {
width: 94%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 20px 30px;
}
.btn_Wrap li {
position: relative;
width: 27.5%;
}
.btn_Wrap li.comingsoon {
pointer-events: none;
}
.btn_Wrap li.comingsoon::before {
content: "coming soon";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: clamp(18px,1.75vw,21px);
letter-spacing: 0.08em;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}


.btn_Wrap a {
transition: 0.3s;
}
.btn_Wrap a:hover {
opacity: 0.5;
}

.plan {
}
.plan .type_ttl {
color: #fff;
background: #fff url(../img/plantype_bg.jpg) no-repeat center center;
background-size: cover;
border-top: 6px solid #fff;
border-bottom: 6px solid #fff;
border-image: linear-gradient(to right, #345a78 0%, #a6957a 100%) 2;
padding: 1.75% 0;
}
.plan .type_ttl > .inner {
display: flex;
justify-content: center;
align-items: center;
gap: 1em 24px;
}
.plan .type_ttl .inner .type {
width: fit-content;
}
.plan .type_ttl .inner .type h3{
font-size: clamp(21px,3vw,36px);
letter-spacing: 0.06em;
}
.plan .type_ttl .inner .type p{
text-align: center;
color: #345a78;
font-size: clamp(11px,1.084vw,13px);
padding: 0.3em 0;
background: #fff;
}
.plan .type_ttl .inner .line {
display: block;
width: 1px;
height: 100px;
background: #fff;
}
.plan .type h3{
font-family: "Cinzel", serif;
}
.plan .type p {
}
.plan h3 {
}
.plan .type_ttl .inner .detail h4{
font-size: clamp(18px,2.34vw,28px);
letter-spacing: 0.06em;
}
.plan .type_ttl .inner .detail p{
letter-spacing: 0.08em;
}
.plan .type_ttl .inner .detail p:nth-of-type(1){
font-size: clamp(16px,2vw,24px);
}
.plan .type_ttl .inner .detail p:nth-of-type(2){
font-size: clamp(12px,1.167vw,14px);
}
.plan .type_ttl .inner .detail p + p{
padding-top: 0.5em;
}

.madori_detail {
padding: 40px 0 80px;
}
.madori_detail.bg{
background: #fff url(../img/madori_bg.jpg) no-repeat center center;
background-size: cover;
padding: 40px 0 80px;
}
.madori_detail.last.bg{
margin-bottom: 80px;
}


.select_plan {
margin: 0 auto 40px;
}
.select_plan ul {
width: 94%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
gap : 20px 40px;
}
.select_plan li {
position: relative;
text-align: center;
width: 26%;
padding: 0.8em 0;
border: 1px solid #224259;
color: #122d3a;
background: #fff;
transition: 0.3s;
}
.select_plan li:hover,
.select_plan li.active{
color: #fff;
background: #224259;
}

.select_plan li.active::after{
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 16px 0;
border-color: #224259 transparent transparent;
position: absolute;
top: calc(100% - 1px);
left: 50%;
transform: translateX(-50%);
}

.madori_detail {
}
.madori_detail .point_Area {
display: block;
}
.madori_detail.bg .point_Area {
display: none;
}
.madori_detail .point_Area {
margin: 0 auto 40px;
}
.madori_detail .point_Area ul{
width: 94%;
max-width: 800px;
margin: 0 auto;
font-size: clamp(14px,1.34vw,16px);
line-height: 1.8;
letter-spacing: 0.1em;
}

.madori_Area {
margin: 0 auto;
display: none;
}
.madori_Area.active {
display: block;
}

.madori_Area figure {
width: 94%;
/*max-width: 800px;*/
max-width: 658px;
margin: 0 auto;
}
.madori_Area.furniture figure{
max-width: 1194px;
margin: 0 auto;
}

.madori_Area figure.hanrei {
max-width: 412px;
margin: 30px auto 0;
}
.plan + .btn_Wrap{
padding-top: 80px;
}
#atype,#btype,#ctype,#dtype{
padding-top: 150px;
margin-top: -150px;
}


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






}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {

.lead_Wrap {
    padding: 40px 0 50px;
}
.btn_Wrap ul {
flex-wrap: wrap;
gap: 20px 20px;
}
.btn_Wrap li {
width: calc((100% - 20px) / 2);
}
.plan .type_ttl {
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
padding: 1em 0;
}
.plan .type_ttl .inner .detail p:nth-of-type(2) {
    line-height: 1.4;

}
.madori_detail {
    padding: 30px 0 50px;
}
.madori_detail.bg {
    padding: 30px 0 50px;
}
.select_plan ul {
    gap: 20px 20px;
}
.select_plan li {
width: calc((100% - 20px) / 2);
}
.madori_detail .point_Area {
    margin: 0 auto 30px;
}
.madori_detail.last.bg {
    margin-bottom: 50px;
}