@charset "UTF-8";

/*----------------------------------------
view
----------------------------------------*/

.view_box{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.view_top{
width: 100%;
height: calc(100vh - 70px);
will-change: transform;
z-index: -1;
position: relative;
}

.view_top_img_bg{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

.view_top_img{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 20;
}

.view_top_img img,
.view_top_img_bg img{
width: 100%;
height: calc(100vh - 70px);
object-fit: cover;
}

.view_top_contents{
width: 100%;
height: 180vh;
background-color: rgba(255, 255, 255, 0);
}

.view_box_title{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
position: absolute;
top: 60px;
left: 0;
z-index: 30;
}

.view_box h2{
font-size: 3.5rem;
line-height: 1.5;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 3px;
opacity: 0;
filter: blur(10px);
animation: FadeINBlur 1.5s ease-out 0s forwards;
will-change: filter;
}


h2.parkfront{
font-size: 3.5rem;
line-height: 1.5;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 3px;
}

p.view_title{
font-size: 2.5rem !important;
letter-spacing: 5px !important;
text-align: center;
display: block;
width: 100%;
opacity: 0;
filter: blur(10px);
animation: FadeINBlur 1.5s ease-out 0.5s forwards;
will-change: filter;
}

.view_box h3{
padding: 10px 30px;
font-size: 5rem;
font-weight: 400;
background-color: #fff;
line-height: 1;
letter-spacing: 5px !important;
position: absolute;
bottom: 15%;
left: 0;
z-index: 40;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 100% 0 0);
transform: translateZ(0);
backface-visibility: hidden;
}

.view_box h3 span{
font-size: 1.5rem;
display: block;
letter-spacing: 1px !important;
padding-top: 15px;
}

.view_location{
width: 90%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin: 0 0 80px 0;
}

.location_item{
width: 31%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.location_item h4{
font-size: 2rem;
width: auto;
}

.location_item h4 span{
font-size: 1.3rem;
letter-spacing: 1px;
margin-left: 5px;
}

.location_item h4 span.eng{
font-size: 1.3rem;
color: #a5d2d0;
display: block;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
}

.location_item .num{
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
line-height: 1;
letter-spacing: -0.05em;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
color: #a5d2d0;
}


.view_box2{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.view_top2{
width: 100%;
height: calc(100vh - 70px);
will-change: transform;
z-index: -1;
position: relative;
}

.view_top2 p.view_top2_cap{
width: 100%;
position: absolute;
left: 0;
bottom: 5px;
font-size: 1rem !important;
line-height: 1;
padding: 0 5px;
}

.view_top_img2{
width: 100%;
}

.view_top_contents2{
width: 100%;
height: 180vh;
position: relative;
}

.view_box2 h3{
writing-mode: vertical-rl;
font-size: 3rem;
font-weight: 400;
line-height: 1;
letter-spacing: 5px !important;
position: absolute;
top: 10%;
left: 10%;
z-index: 1;
transition-duration: 0.5s;
transition-delay: 0s;
transition-timing-function: ease-out;
transition-property: clip-path;
clip-path: inset(0 0 100% 0);
transform: translateZ(0);
backface-visibility: hidden;
}

.view_box2_img1{
width: 25%;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img2{
width: 25%;
position: absolute;
bottom: 5%;
right: 5%;
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img3{
width: 20%;
position: absolute;
top: 70%;
left: 25%;
transform: translate(-50%, -50%);
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img4{
width: 16%;
position: absolute;
top: 10%;
left: 20%;
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img5{
width: 15%;
position: absolute;
top: 5%;
right: 5%;
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img6{
width: 12%;
position: absolute;
top: 17%;
right: 22%;
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img7{
width: 18%;
position: absolute;
bottom: 20%;
left: 50%;
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}

.view_box2_img8{
width: 15%;
position: absolute;
top: 35%;
left: 25%;
transform: translate(-50%, -50%);
overflow: hidden;
border: 5px solid #fff;
opacity: 0;
}


.view_box2_img1 img,
.view_box2_img2 img,
.view_box2_img3 img,
.view_box2_img4 img,
.view_box2_img5 img,
.view_box2_img6 img,
.view_box2_img7 img,
.view_box2_img8 img{
transform-origin: bottom center;
}


.view_box3{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
}

.view_box3 h3{
width: 100%;
text-align: center;
position: absolute;
top: 80px;
left: 0;
z-index: 1;
color: #fff;
font-size: 3rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 5px !important;
}

.view_box4{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 80px 0;
}

.view_box4 h3{
width: 100%;
text-align: center;
font-size: 3rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: 5px !important;
}


.view_box5{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
position: relative;
}

.view_box5 h3{
width: 100%;
text-align: left;
position: absolute;
top: 80px;
left: 0;
color: #fff;
z-index: 1;
font-size: 2.5rem;
font-weight: 400;
line-height: 2;
letter-spacing: 2px !important;
padding: 0 80px;
}

.view_box6{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 80px 0;
}



.view_slide {
display: flex;
overflow: hidden;
width: 100%;
}

.view_slide ul {
animation: scroll-left 50s infinite linear .5s both;
display: flex;
list-style: none;
}

.view_slide ul li {
width: calc(100vw / 3);
}

.view_slide ul li img {
display: block;
width: 100%;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*-- sp--*/

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

.view_top{
height: calc(100vh - 90px);
}

.view_top_img_bg{
display: none;
}

.view_top_img img{
width: 100%;
height: calc(100vh - 90px);
object-fit: cover;
transition : ease;
}

.view_top_contents{
display: none;
}

.view_box h2{
font-size: 2rem;
letter-spacing: 5px;
}

.view_box_title{
top: 30px;
}

.view_box h2,
h2.parkfront{
font-size: 1.8rem;
}

p.view_title{
font-size: 1.5rem !important;
letter-spacing: 0;
}

p.view_title span{
font-size: 3rem;
letter-spacing: 0;
}

.view_box h3{
padding: 10px 20px;
font-size: 2rem;
letter-spacing: 5px !important;
bottom: 15%;
}

.view_box h3 span{
font-size: 1.3rem;
padding-top: 10px;
}

.view_location{
width: 90%;
margin: 40px 0;
}

.location_item{
width: 98%;
}

.location_item h4{
font-size: 1.5rem;
}

.location_item h4 span{
font-size: 1.2rem;
letter-spacing: 0;
}

.location_item h4 span.eng{
font-size: 1.2rem;
}

.location_item .num{
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
line-height: 1;
letter-spacing: -0.05em;
font-family: "adobe-garamond-pro", serif;
font-weight: 400;
font-style: normal;
color: #a5d2d0;
}

.view_top2{
height: calc(100vh - 90px);
}

.view_top_img2 img{
height: calc(100vh - 90px);
}

.view_box2 h3{
font-size: 1.8rem;
font-weight: 400;
line-height: 1;
letter-spacing:2px !important;
top: 10%;
left: 5%;
}

.view_box2_img1{
width: 40%;
border: 2px solid #fff;
}

.view_box2_img2{
width: 40%;
border: 2px solid #fff;
}

.view_box2_img3{
width: 40%;
border: 2px solid #fff;
}

.view_box2_img4{
width: 30%;
border: 2px solid #fff;
}

.view_box2_img5{
width: 30%;
border: 2px solid #fff;
top: 20%;
right: 2%;
}

.view_box2_img6{
width: 25%;
border: 2px solid #fff;
}

.view_box2_img7{
width: 30%;
border: 2px solid #fff;
}

.view_box2_img8{
width: 25%;
border: 2px solid #fff;
}

.view_box3{
padding: 20px 0;
}

.view_box3 h3{
position: static;
top: 0;
font-size: 1.8rem;
letter-spacing: 2px !important;
color: #333;
margin-bottom: 20px;
}

.view_box4{
padding: 20px 0;
}

.view_box4 h3{
font-size: 1.8rem;
letter-spacing: 0 !important;
}


.view_box5 h3{
position: static;
top: 0;
font-size: 1.8rem;
color: #333;
margin-bottom: 20px;
letter-spacing: 0 !important;
padding: 0 0;
text-align: center;
}

.view_box6{
padding: 40px 0 0 0;
}

.view_slide ul {
animation: scroll-left 50s infinite linear .5s both;
}

.view_slide ul li {
width: calc(100vw / 2);
}


.view_box3 .js-scrollable {
direction: ltr !important;
}


}