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

#homeMainImage{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: calc(100vh - 230px);
padding: 0 0 40px;
}
#homeMainImageBox{
display: flex;
justify-content: center;
align-items: center;
position: relative;
/*padding-top: 42%;*/
height: 60vw;
max-height: calc(100vh - 230px);
overflow: hidden;
z-index: 1;
}
#homeMainImageBox p#homeMainCopy{
position: relative;
color: #ffffff;
font-size: 1.25rem;
text-align: center;
z-index: 2;
text-shadow: 0px 0px 10px rgba(0,0,0,0.30);
letter-spacing: 0.15em;
text-indent: 0.15em;
}
.animate #homeMainImageBox p#homeMainCopy{
opacity: 0;
filter: blur(20px);
transform: translateY(20px);
animation: copyShow 1500ms 700ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#homeMainImageBox figure{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
#homeMainImageBox figure::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,81,117,0.40);
mix-blend-mode: multiply;
z-index: 2;
}
/*#homeMainImageBox figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}*/
#homeMainImageBox figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
#homeScroll{
position: absolute;
bottom: 0;
right: 6%;
z-index: 2;
}
#homeScroll p{
font-size: 0.75rem;
font-weight: 300;
writing-mode: vertical-rl;
}
#homeScroll p a{
display: block;
position: relative;
color: #ffffff;
text-decoration: none;
padding: 0 10px 120px;
}
#homeScroll p a::before{
content: '';
display: block;
position: absolute;
top: calc(100% - 115px);
right: 50%;
bottom: 0;
width: 1px;
background-color: #ffffff;
animation: scroll 1500ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
z-index: 1;
}
#homeScroll p a::after{
content: '';
display: block;
position: absolute;
right: 50%;
bottom: 0;
width: 1px;
height: 40px;
background-color: #ffffff;
mix-blend-mode: difference;
z-index: 2;
}

@keyframes copyShow{
0%{
opacity: 0;
filter: blur(20px);
transform: translateY(20px);
}
100%{
opacity: 1;
filter: none;
transform: none;
}
}
@keyframes scroll{
0%{
top: calc(100% - 115px);
bottom: 115px;
}
50%{
top: calc(100% - 115px);
bottom: 0;
}
100%{
top: 100%;
bottom: 0;
}
}



@media screen and (max-width: 999px){
#homeMainImage{
height: auto;
padding: 0;
}
#homeMainImageBox{
height: 42vw;
max-height: none;
}
#homeMainImageBox p#homeMainCopy{
font-size: min(3.2vw, 1rem);
letter-spacing: 0.1em;
text-indent: 0.1em;
}
#homeScroll{
display: none;
}
}/*999*/





.homeHeading{
position: relative;
font-size: 1.5rem;
line-height: 1.5;
font-weight: 300;
letter-spacing: 0.1em;
padding: 0.25em 0 0;
}
.homeHeading::before{
content: '';
display: block;
position: absolute;
top: 0;
left: -80px;
width: 75px;
height: 3px;
background-color: #005175;
background-image: -webkit-linear-gradient(180deg,rgba(15,147,178,1.00) 0%,rgba(0,81,117,1.00) 100%);
background-image: -moz-linear-gradient(180deg,rgba(15,147,178,1.00) 0%,rgba(0,81,117,1.00) 100%);
background-image: -o-linear-gradient(180deg,rgba(15,147,178,1.00) 0%,rgba(0,81,117,1.00) 100%);
background-image: linear-gradient(270deg,rgba(15,147,178,1.00) 0%,rgba(0,81,117,1.00) 100%);
}



@media screen and (max-width: 999px){
.homeHeading{
padding: 0.25em 20px 0 14vw;
}
.homeHeading::before{
left: 0;
width: calc(14vw - 10px);
}
}/*999*/





#homeAbout{
display: flex;
justify-content: space-between;
padding: 12.5% 0 0;
}
#homeAbout .txt{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 44%;
padding: 0 100px 0 80px;
}
#homeAbout .txt .arrow{
margin-top: 30px;
}
#homeAbout figure{
position: relative;
width: 56%;
padding-top: 31.5%;
overflow: hidden;
background-color: #0f93b2;
}
#homeAbout figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}



@media screen and (max-width: 999px){
#homeAbout{
display: block;
padding: 20% 0 0;
}
#homeAbout .txt{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: auto;
padding: 0;
}
#homeAbout .txt .arrow{
margin-top: 0;
margin-left: auto;
padding: 0 20px 0 0;
}
#homeAbout figure{
width: auto;
padding-top: 56.25%;
margin-top: 6vw;
}
}/*999*/





#homeGallery{
padding: 12.5% 0 0;
}
#homeGallery .txt{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 3% 0 80px;
}
#homeGalleryList{
position: relative;
overflow: hidden;
margin: 30px 0 0 0;
}
#homeGalleryList ul li{
width: 60%;
min-width: 860px;
padding: 0 1px;
}
#homeGalleryList ul li a{
display: block;
color: #111111;
text-decoration: none;
}
#homeGalleryList ul li figure{
position: relative;
padding: 60% 0 0 0;
overflow: hidden;
}
#homeGalleryList ul li figure::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
background-image: url(../images/icon_zoom.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px auto;
opacity: 0;
transform: scale(1.5);
transition: opacity 200ms linear, transform 400ms cubic-bezier(0.25, 1, 0.5, 1);
z-index: 1;
}
#homeGalleryList ul li a:hover figure::before{
opacity: 1;
transform: none;
}
#homeGalleryList ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.flickity-prev-next-button{
position: absolute;
top: 0;
left: 50%;
width: 60%;
min-width: 860px;
border: none;
padding: max(calc(60% * 0.6), calc(860px * 0.6)) 0 0;
background: transparent;
visibility: hidden;
}
.flickity-prev-next-button.previous{
transform: translateX(calc(-50% - 70px));
}
.flickity-prev-next-button.next{
transform: translateX(calc(-50% + 70px));
}
.flickity-prev-next-button::before{
content: '';
display: block;
width: 88px;
height: 88px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 1px solid #005175;
background-color: #ffffff;
border-radius: 50%;
cursor: pointer;
visibility: visible;
background-repeat: no-repeat;
background-position: center center;
background-size: 30px auto;
transition: transform 100ms linear, background 200ms linear, opacity 200ms linear, visibility 200ms linear;
}
.flickity-prev-next-button.previous::before{
background-image: url(../images/arrow_left_blue.png);
left: 0;
}
.flickity-prev-next-button.next::before{
background-image: url(../images/arrow_blue.png);
right: 0;
}
.flickity-prev-next-button:hover::before{
/*background-color: #eefcff;*/
background-color: #eeeeee;
transform: translateY(-50%) scale(1.05);
}
.flickity-prev-next-button[disabled]::before{
opacity: 0;
visibility: hidden;
}
.flickity-prev-next-button svg{
display: none;
}
#homeGalleryList ul li .listTxt{
padding: 0 10px;
opacity: 0;
transition: opacity 100ms linear;
}
#homeGalleryList ul li .listTxt p.title{
font-size: 1.125rem;
line-height: 1.5;
margin-top: 1em;
}
#homeGalleryList ul li .listTxt p.cate{
display: flex;
flex-wrap: wrap;
font-size: 0.75rem;
margin-top: 0.5em;
}
#homeGalleryList ul li .listTxt p.cate span{
display: flex;
align-items: center;
position: relative;
margin-right: 15px;
}
#homeGalleryList ul li .listTxt p.cate span+span{
}
#homeGalleryList ul li .listTxt p.cate span+span::before{
content: '';
display: block;
width: 1px;
height: 10px;
background-color: #111111;
transform: rotate(30deg);
margin-right: 15px;
}
#homeGalleryList ul li.is-selected .listTxt{
opacity: 1;
transition-duration: 300ms;
transition-delay: 300ms;
}
#homeGalleryList .nonePosts{
font-size: 0.875rem;
text-align: center;
}



@media screen and (max-width: 999px){
#homeGallery{
padding: 20% 0 0;
}
#homeGallery .txt{
padding: 0;
}
#homeGallery .txt .arrow{
margin-left: auto;
padding: 0 20px 0 0;
}
#homeGalleryList{
margin: 6vw 0 0;
}
#homeGalleryList ul li{
width: calc(100% - 40px);
min-width: auto;
}
.flickity-prev-next-button{
width: 50px;
min-width: auto;
left: auto;
padding: calc((100% - 40px) * 0.6) 0 0;
}
.flickity-prev-next-button.previous{
left: 5px;
transform: none;
}
.flickity-prev-next-button.next{
right: 5px;
transform: none;
}
.flickity-prev-next-button::before{
width: 48px;
height: 48px;
position: absolute;
background-size: 15px auto;
}
.flickity-prev-next-button[disabled]::before{
opacity: 0;
visibility: hidden;
}
}/*999*/




#homeTopics{
display: flex;
justify-content: space-between;
padding: 12.5% 0 0;
}
#homeTopics .txt{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 38%;
padding: 0 100px 0 80px;
}
#homeTopics .txt .arrow{
margin-top: 30px;
}
#homeTopicsList{
width: 62%;
}
#homeTopicsList ul li{
border-bottom: 1px solid #cdcdcd;
}
#homeTopicsList ul li a{
position: relative;
display: flex;
text-decoration: none;
color: #111111;
font-size: 0.875rem;
padding: 30px 100px 30px 20px;
transition: color 200ms linear;
}
#homeTopicsList ul li a:hover{
color: #999999;
}
#homeTopicsList ul li a::after{
content: '';
display: block;
width: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
background-image: url(../images/arrow_black.png);
background-repeat: repeat-x;
background-position: left center;
background-size: 100% auto;
transition: background 300ms cubic-bezier(0.45, 0, 0.55, 1);
}
#homeTopicsList ul li a:hover::after{
background-position: left 20px center;
}
#homeTopicsList ul li .date{
width: 150px;
}
#homeTopicsList ul li .title{
width: calc(100% - 150px);
}
#homeTopicsList .nonePosts{
font-size: 0.875rem;
padding: 30px 20px;
}



@media screen and (max-width: 999px){
#homeTopics{
display: block;
padding: 20% 0 0;
}
#homeTopics .txt{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: auto;
padding: 0;
}
#homeTopics .txt .arrow{
margin-top: 0;
margin-left: auto;
padding: 0 20px 0 0;
}
#homeTopicsList{
width: auto;
padding: 0 0 0 14vw;
}
#homeTopicsList ul li a{
display: block;
padding: 30px 60px 30px 0;
}
#homeTopicsList ul li .date{
width: auto;
}
#homeTopicsList ul li .title{
width: auto;
}
#homeTopicsList .nonePosts{
font-size: 0.875rem;
padding: 30px 0 0;
}
}/*999*/