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

figure{position: relative;}

.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%;}

sup{
font-size: 10px;
vertical-align: super;
}

#main_Wrap {
position: relative;
}
#main_Wrap h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(20px,3.333333333333333vw,40px);
color: #fff;
text-shadow: 0px 0px 12px #000000;;
letter-spacing: 0.12em;
font-family: "Cinzel", serif;
}

.page_head {
position: relative;
width: 94%;
margin: 0 auto;
padding: 80px 0 60px;
text-align: center;
}
.page_head h3 {
font-size: clamp(18px,2.166666666666667vw,26px);
line-height: 1.8;
letter-spacing: 0.12em;
color: #162e3a;
}
.page_head p{
font-size: clamp(14px,1.142857142857143vw,16px);
line-height: 2;
padding: 50px 0 0;
}
.text{
position: relative;
}
.text.center{
text-align: center;
}

.text::before{
content: "";
position: absolute;
top: 2.5em;
left:0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #75b8df 0%, #bdb7de 100%);
opacity: 0.3;
}
.text.txtbg::after{
content: "";
position: absolute;
top: 0;
left: 0;
transform: translate(0, -40%);
width: 40vw;
height: 40vw;
background: url(../img/txtbg.png) no-repeat center center;
background-size: cover;
z-index: -1;
}

.text h3{
width: fit-content;
font-family: "Cinzel", serif;
font-size: clamp(22px,2.84vw,34px);
letter-spacing: 0.18em;
background: linear-gradient(90deg, #75b8df 0%, #bdb7de 100%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.text p{
font-size: clamp(14px,1.34vw,16px);
letter-spacing: 0.18em;
line-height: 1.8;
padding-top: 2.5em;
}



.sec01 {
display: flex;
align-items: center;
gap: 0 4.28571429%;
padding: 80px 0 120px;
background: url(../img/sec01_bg.png) no-repeat center center;
background-size: cover;
}
.sec01 .text {
width: 40%;
padding: 0 0 0 6.25em;
}
.sec01 > figure {
width: 55.71428571%;
}
.sec02 {
display: flex;
flex-direction: column;
gap: 60px 0;
padding: 0 0 120px;
}
.sec02 .text {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.sec02 .text h3{
margin: 0 auto;
}
.sec03 {
display: flex;
align-items: center;
gap: 0 4.28571429%;
padding: 0 0 120px;
}
.sec03 .text {
width: 36%;
padding: 0 0 0 3.75em;
}
.sec03 > figure {
width: 60%;
}
.sec04 .text {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.sec04 .text h3{
margin: 0 auto;
}


.landplan_area {
margin: 60px auto 100px;
}
.landplan_area .inner{
display: flex;
flex-wrap: wrap;
gap:20px 5%;
}

.landplan_area ul.list4 {
width: 45%;
}
.landplan_area .inner > figure{
width: 50%;
}

.landplan_area ul.list2,
.landplan_area ul.list4 {
display: flex;
}
.landplan_area ul.list2 {
max-width: 1140px;
gap: 0 5.26315789%;
}
.landplan_area ul.list4 {
flex-direction: column;
gap: 20px 0;
}

.landplan_area ul.list2 li,
.landplan_area ul.list4 li{
display: flex;
align-items: center;
padding: 14px;
background: linear-gradient(90deg, rgba(117, 184, 223, 0.3) 0%, rgba(189, 183, 222, 0.3) 100%);
gap: 0 3.125%;
}
.landplan_area ul.list2 li{
width: 47.36842105%;
}

.landplan_area ul li figure{
width: 51.7578125%;
}
.landplan_area .li_text {
width: 44.921875%;
}
.landplan_area .li_text h4 {
font-size: clamp(16px,1.5vw,18px);
}
.landplan_area .li_text p {
font-size: 14px;
line-height: 1.6;
}
.landplan_area .li_text h4 {
color: #7a8bb1;
letter-spacing: 0.08em;
line-height: 1.2;
}
.landplan_area .li_text h4 .f-55{
color: #000;
}
.landplan_area .li_text h4 + p {
padding-top: 0.6em;
}
.landplan_area ul.list4 li:nth-child(1) .li_text h4{
color: #000;
}
.landplan_area ul.list4 li:nth-child(1) .li_text h4 .f-200{
font-style: italic;
margin-right: 0.1em;
}

.landplan_area > figure {
}
.lightblue{color: #7a8bb1;}

.floor_area {
margin: 0 auto 80px;
}
.floor_area .inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap:30px 5%;
}
.floor_area .inner > figure {
width: 50%;
}
.floor_area .inner > figure img{
display: block;
width: 100%;
max-width: 481px;
margin: 0 auto;
}
.floor_area img {
}
.floor_area .text_side {
display: flex;
flex-direction: column;
width: 45%;
gap: 30px 0;
}
.floor_area .text_side .txt{

}
.floor_area .text_side .txt h3{
font-size: clamp(20px,2vw,24px);
letter-spacing: 0.08em;
}
.floor_area .text_side .txt p{
font-size: clamp(14px,1.34vw,16px);
letter-spacing: 0.18em;
line-height: 1.8;
padding-top: 2em;
}

.premium {
text-align: center;
width: 81.48148148%;
background: #eae7d9;
}
.premium h3 {
color: #fff;
font-size: clamp(18px,1.67vw,20px);
letter-spacing: 0.18em;
padding: 9px 0;
background: #93885b;
}
.premium ul {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
padding: 10px 0;
gap: 0px 0;
}
.premium li {
font-size: clamp(18px,1.67vw,20px);
letter-spacing: 0.18em;
padding: 10px 0;
line-height: 1.4;
}
.premium li .f-240{
color: #93885b;
font-style: italic;
margin-right: 0.1em;
line-height: 0.8;
}
.premium li:not(:first-child) {
border-top: 1px solid #000;
}
.view_area {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 60px;
padding: 0 2em;
gap: 0 2em;
}
.view_area .text {
width: fit-content;
}
.sec04 .view_area .text {
    margin: unset;
}
.view_area .text::before {
content: unset;
}

.view_area .text h3 {
font-size: clamp(21px,2.234vw,28px);
margin: 0 auto 0 0;
}
.view_area .text p {
padding-top: 2.0em;
}
.view_area > figure {
width: 65.92857143%;
}
.view_area img {
}
.sec05 {
position: relative;
}
.sec05 figure {
}
.sec05 img {
}
.sec05 p {
position: absolute;
top: 10.46875%;
left: 60.14285714%;
color: #fff;
font-size: clamp(18px,2.167vw,26px);
letter-spacing: 0.18em;
line-height: 1.8;
}

#notes_Area {
background: unset;
}
/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {






}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {
.contents {
padding: 0;
}
.page_head {
padding: 60px 0 50px;
}
.page_head p {
padding: 30px 0 0;
text-align: left;
}
.text::before {
top: 2.0em;
}
.text.txtbg::after {
    content: "";
    position: absolute;
    top: 0;
    left: -11%;
    transform: translate(0, 0);
    width: 100vw;
    height: 100%;
    background: url(../img/txtbg.png) no-repeat center center;
    background-size: cover;
    z-index: -1;
}
.text p {
text-align: left;
}
.sec01 {
flex-wrap: wrap;
gap: 30px 0;
padding: 40px 0 60px;
}
.sec01 .text {
width: 94%;
margin: 0 auto;
padding: 0;
}
.sec01 > figure {
width: 100%;
}
.sec02 {
gap: 30px 0;
padding: 0 0 60px;
}
.sec02 .text h3 {
margin: 0 auto 0 0;
}
.sec03 {
flex-wrap: wrap;
gap: 30px 0;
padding: 0 0 60px;
}
.sec03 .text {
width: 94%;
margin: 0 auto;
padding: 0;
}
.sec03 > figure {
width: 100%;
}
.sec04 .text h3 {
margin: 0 auto 0 0;
}
.landplan_area {
margin: 30px auto 60px;
}
.landplan_area .inner > figure {
order: 1;
width: 94%;
margin: 0 auto;
}
.landplan_area ul.list4 {
order: 2;
width: 100%;
margin: 0 auto;
}
.landplan_area ul.list2 {
order: 3;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
max-width: 100%;
gap: 20px 0;
}
.landplan_area ul.list2 li {
width: 100%;
}
.landplan_area ul.list2 li, .landplan_area ul.list4 li {
flex-wrap: wrap;
gap: 1em 0;
}
.landplan_area ul li figure {
width: 100%;
}
.landplan_area .li_text {
width: 100%;
}
.floor_area {
margin: 0 auto 60px;
}
.floor_area .inner > figure {
width: 100%;
}
.floor_area .text_side {
width: 100%;
gap: 20px 0;
}
.floor_area .text_side .txt h3 {
line-height: 1.6;
}
.floor_area .text_side .txt p {
padding-top: 1em;
}
.floor_area .text_side figure.sp{
width: 90%;
margin: 0 auto;
}
.premium {
width: 100%;
}
.view_area {
width: 100%;
flex-wrap: wrap;
margin: 0 auto 30px;
padding: 0 3%;
gap: 30px 0;
}
.view_area .text {
width: 94%;
margin: 0 auto;
}
.view_area > figure {
width: 100%;
overflow-y: hidden !important;
}
.view_area > figure img{
width: 923px !important;
height: auto;
max-width: initial;
}

.sec05 p {
position: absolute;
top: 7.46875%;
left: 52.142857%;
font-size: clamp(11px, 2.167vw, 26px);
}

}