@charset "UTF-8";
.garamond {
font-family: 'EB Garamond', serif;
}
.cf-garamond{
font-family: 'Cormorant Garamond', serif;
}
.cinzel{
font-family: 'Cinzel', serif;
}
figure{
position: relative;
}
#contents {
background: #000;
}

.head_h1 {
font-size: 0;
}

.fade {
opacity: 0;
transition: all 2.6s ease;
}

.fade.show {
opacity: 1;
transform: none;
}

.fadeup {
transform: translate(0, 100px);
}


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

.fade {
opacity: 0;
transition: all 1.8s ease;
}
.fadeup {
transform: translate(0, 50px);
}
}

#contents {
font-family: "游明朝 Medium", YuMincho Medium , "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-feature-settings: "palt";
letter-spacing: 0.08em;
overflow: hidden;
}
.garamond{
font-family: 'Cormorant Garamond', serif;
}
.gold{
color: #f9d297;
}

.f-120 {
font-size: 120%;
}
.f-130 {
font-size: 130%;
}
.f-140 {
font-size: 140%;
}


.main {
position: relative;
width: 100%;
height: 0;
padding-top: 42.857142857142857%;
background: url(../images/main.jpg)no-repeat top center;
background-size: cover;
margin: 0 auto;
}
.main .ttl {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.main .ttl h2 {
font-size: 42px;
letter-spacing: 0.12em;
color: #f9d297;
}
.main .ttl p {
font-size: 26px;
padding-top: 1.0em;
letter-spacing: 0.12em;
line-height: 1.8;
color: #fff;
}
.plan_Area {
padding: 80px 0;
}
.lead_copy {
text-align: center;
letter-spacing: 0.16em;
}
.lead_copy h3 {
color: #f9d297;
font-size: clamp(18px,2vw,24px);
}
.lead_copy p {
color: #fff;
font-size: clamp(16px,1.5vw,18px);
line-height: 1.8;
padding-top: 2em;
}

.plan_Area {
background: linear-gradient(to right,  rgba(55,55,55,1) 0%,rgba(44,44,44,1) 100%); 
}

.select_Area {
width: 94%;
max-width: 1000px;
margin: 80px auto 90px;
}
.select_Area > p {
position: relative;
width: 100%;
text-align: center;
color: #fff;
font-size: clamp(14px,1.67vw,20px);
letter-spacing: 0.16em;
padding-bottom: 1em;
margin: 0 auto 20px;
}
.select_Area > p::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right,  rgba(255,255,255,0.03) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.03) 100%);
}

.select_Area ul {
display: flex;
gap : 20px 1.85%;
}
.select_Area li {
width: 32.1%;
background: #000;
transition: 0.3s;
line-height: 0;
cursor: pointer;
filter: saturate(1.2) brightness(1.1);
}
.select_Area li:hover {
filter: saturate(140%);
}
.select_Area li img{
opacity: 0.75;
transition: 0.3s;
}
.select_Area li:hover img{
opacity: 1;
}
.select_Area li.active img{
opacity: 1;
}

.selectplan_box {
display: none;
}
.selectplan_box.active{
display: block;
}


.att_Area {
padding: 100px 0 50px;
}

.plan_box {
width: 94%;
max-width: 1000px;
margin: 0 auto;
}
.plan_box .type {
display: flex;
gap: 20px 2.7%;
}
.plan_box .type figure {
}
.plan_box .type figure:nth-of-type(1) {
width: 60%;
filter: saturate(1.3) brightness(1.25);
}
.plan_box .type figure:nth-of-type(2) {
width: 37.3%;
}


.plan_box .point {
margin: 50px auto;
}
.plan_box .point ul {
display: flex;
flex-wrap: wrap;
gap: 12px 2%;
}
.plan_box .point li {
width: 49%;
text-align: center;
color: #fff;
font-size: clamp(13px,1.5vw,18px);
letter-spacing: 0.02em;
line-height: 1;
background: #947d60;
padding: 0.6em 0;
}
.plan_box .madori {
background: #fff;
padding: 30px 0 40px;
}
.plan_box .madori_fig {
}
.plan_box .hanrei {
width: 80%;
max-width: 600px;
margin: 30px auto 0;
}
.plan_box .madori + figure{
width: 90%;
margin: 2em auto 0;
}

.view_Area {
margin: 70px auto 0;
}
.view_Area > p {
text-align: center;
color: #f9d297;
font-size: clamp(18px, 2vw, 24px);
letter-spacing: 0.16em;
padding-bottom: 30px;
}
.view_Area .btn_area {
}
.view_Area ul {
display: flex;
width: 80%;
max-width: 680px;
margin: 0 auto;
gap : 20px 5.88235294%;
}
.view_Area ul li {
width: 47.05882353%;
transition: 0.3s;
line-height: 0;
background: #000;
cursor: pointer;
filter: saturate(1.4) brightness(1.3);
}
.view_Area li.active {
}
.view_Area li:hover {

}
.view_Area li img{
opacity: 0.75;
transition: 0.3s;
}
.view_Area li:hover img{
opacity: 1;
}
.view_Area li.active img{
opacity: 1;
}

.view_Area .view_fig {
margin: 20px auto 0;
}
.view_Area .view_fig figure {
}
.view_Area .view_fig img {
}
.view_Area figure {
display: none;
}
.view_Area figure.active {
display: block;
}

.view_notes {
width: 94%;
max-width: 1200px;
margin: 5px auto 0;
}
.view_notes p {
text-align: end;
font-size: 10px;
color: #fff;
}

.equipment_Area {
background: url(../images/bg.jpg)no-repeat top center;
background-size: cover;
padding: 80px 0;
}
.equipment_Area .sec_ttl {
text-align: center;
color: #f9d297;
font-size: clamp(28px, 3.16666667vw, 38px);
letter-spacing: 0.16em;
}

.equipment_Area .equipment_box {
margin: 0 auto 0;
}
.equipment_Area .equipment_box:not(:first-of-type) {
margin: 80px auto 0;
}
.equipment_Area .cat_ttl {
position: relative;
width: 94%;
max-width: 1200px;
margin: 80px auto 50px;
}
.equipment_Area .cat_ttl::before {
content: "";
position: absolute;
top: 50%;
right: calc(100% + 0.9em);
width: 40vw;
height: 1px;
background: #f9d297;
}

.equipment_Area .cat_ttl h4 {
text-align: left;
color: #f9d297;
font-size: clamp(21px, 2.5vw, 30px);
letter-spacing: 0.16em;
}
.equipment_Area .equipment_box ul {
display: flex;
flex-wrap: wrap;
width: 94%;
max-width: 1200px;
margin: 0 auto;
gap: 80px 3.33333333%;
}
.equipment_Area .equipment_box li {
width: 22.5%;
}
.equipment_Area .equipment_box li.limited {
position: relative;
}
.equipment_Area .equipment_box li.limited::before {
content: "最上階限定";
position: absolute;
top: 0;
left: 0;
font-size: clamp(15px,1.16666667vw,14px);
color: #fff;
padding: 0.3em 2em 0.2em 0.6em;
background: linear-gradient(to right,  rgba(114,96,70,1) 0%,rgba(154,126,80,1) 70%,rgba(171,139,84,0.01) 100%);
z-index: 1;
}

.equipment_Area .equipment_box li figure {
}
.equipment_Area .equipment_box li figure .cap_herf{
right: 52%;
}
.equipment_Area .equipment_box li figure .cap_v_herf{
bottom: 55%;
}

.equipment_Area .equipment_box li .text{
padding-top: 0.5em;
}
.equipment_Area .equipment_box li .text h4{
text-align: center;
color: #f9d297;
font-size: clamp(18px, 1.5vw, 17.2px);
letter-spacing: 0.03em;
}
.equipment_Area .equipment_box li .text p{
color: #fff;
font-size:14px;
padding-top: 0.4em;
}

.parking_Area {
background: url(../images/bg02.jpg)no-repeat top center;
background-size: cover;
padding: 80px 0;
}
.parking_Area .p_area01 {
display: flex;
width: 94%;
max-width: 1000px;
margin: 0 auto;
gap: 20px 4.3%;
}
.parking_Area .p_area01 .cat_ttl {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #f9d297;
border-bottom: 1px solid #f9d297;
}
.parking_Area .p_area01 .cat_ttl div{
text-align: center;
}
.parking_Area .p_area01 .cat_ttl div h4 {
color: #f9d297;
font-size: clamp(28px, 3.16666667vw, 36px);
letter-spacing: 0.16em;
}
.parking_Area .p_area01 .cat_ttl div p {
color: #fff;
font-size: clamp(13px, 1.25vw, 15px);
line-height: 2.1;
padding-top: 1.5em;
}
.parking_Area .p_area01 figure {
width: 45.7%;
}

.parking_Area .p_area02 {
display: flex;
width: 94%;
max-width: 1000px;
margin: 40px auto 0;
gap: 20px 2%;
}
.parking_Area .p_area02 > figure {
width: 63.4%;
}
.parking_Area .p_area02 .station {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 19px 0;
width: 34.6%;
padding: 20px;
background: url(../images/bg_station.jpg)no-repeat top center;
background-size: cover;
}

.parking_Area .p_area02 .station h5 {
text-align: center;
color: #fff;
font-size: clamp(16px,1.75vw,21px);
line-height: 1;
background: #6c8490;
padding: 0.4em 0;
}

.parking_Area .p_area02 .station p {
color: #fff;
font-size: 14px;
}
.parking_Area .p_area02 .station figure {
line-height: 0;
}
.parking_Area .p_area02 .station img {
}
.parking_Area .p_area02 .station .cap_Txt {
}
.parking_Area .p_area02 .station .cap_Txt.parking_Area .station .cap_Txt.parking_Area h5 {
}


@media screen and (max-width: 1080px) {
.sub_ttl {
width: 94%;
}

}

@media screen and (max-width: 834px) {
.sub_ttl {
width: 94%;
}

}

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


.main {
height: auto;
padding-top: unset;
background: unset;
}
.main .ttl h2 {
font-size: 30px;
}
.main .ttl p {
font-size: 16px;
}
.plan_Area {
padding: 40px 0;
}
.select_Area {
    margin: 40px auto 50px;
}
.select_Area ul {
flex-wrap: wrap;
}
.select_Area li {
width: 88%;
margin: 0 auto;
}
.plan_box .type {
flex-wrap: wrap;
}
.plan_box .type figure:nth-of-type(1) {
width: 100%;
}
.plan_box .type figure:nth-of-type(2) {
width: 90%;
margin: 0 auto;
}
.plan_box .point {
margin: 30px auto;
}
.plan_box .point li {
width: 100%;
letter-spacing: 0.01em;
}
.view_Area {
margin: 50px auto 0;
}
.view_Area ul {
flex-wrap: wrap;
}
.view_Area ul li {
width: 90%;
margin: 0 auto;
}
.view_Area .view_fig {
    margin: 30px auto 0;
}
.equipment_Area {
    padding: 40px 0;
}
.equipment_Area .cat_ttl {
width: 90%;
margin: 40px 0 20px 10%;
}
.equipment_Area .equipment_box:not(:first-of-type) {
margin: 60px auto 0;
}
.equipment_Area .equipment_box ul {
gap: 40px 3.33333333%;
}
.equipment_Area .equipment_box li {
width: 100%;
}
.parking_Area {
    padding: 40px 0;
}
.parking_Area .p_area01 {
    flex-wrap: wrap;
}
.parking_Area .p_area01 .cat_ttl {
    width: 100%;
    padding: 2em 0;
}
.parking_Area .p_area01 figure {
    width: 100%;
}
.parking_Area .p_area02 {
    flex-wrap: wrap;
    margin: 20px auto 0;
}
.parking_Area .p_area02 > figure {
    width: 100%;
}
.parking_Area .p_area02 .station {
    width: 100%;
    padding: 20px;
}
.att_Area {
padding: 100px 0 50px;
}

}