@charset "utf-8";
/* top css */

/*-------------------------------------------------
loading
-------------------------------------------------*/

/*TOPページ用loader*/
.loader_top {
position: fixed;
z-index: 5;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: black;
}
.is-loaded .loader_top {
animation-name: loader_fadeOut;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
.is-loaded .loader_logo {
animation: loader_fadeIn 1.5s cubic-bezier(0.42, 0, 1, 1) forwards 0.5s,
reset_zindex 0s cubic-bezier(0.42, 0, 1, 1) forwards 4.5s;
}

@keyframes loader_fadeIn {
from {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
to {
opacity: 1;
filter: none;
visibility: visible;
} 
}

@keyframes loader_fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}

@keyframes reset_zindex {
from { 
}
to {
z-index: 1;
} 
}


/*-------------------------------------------------
PV
-------------------------------------------------*/

.header_top {
transition: 1.3s;
position: relative;
height: 100vh; 
}

@media all and (max-width : 767px ){
.header_top {
height: 100dvh; 
}
}

.pv_digest {
position: fixed;
z-index: -1;
top: 0;
left: -1000%;
right: -1000%;
bottom: 0;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
transition: 1.3s;
}
.video_box {
position: relative;
}
.video_box::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/common/bg_grid_40.png");
background-repeat: repeat;
background-position: left top;
z-index: 1;
}

/*-------------------------------------------------
pv タイトルロゴ
-------------------------------------------------*/

.header_title {
position: absolute;
top: 45%;
left: 50%;
z-index: 6;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
visibility: hidden;
opacity: 0; 
}

.header_title {
width: 410px;
height: auto;
} 

@media all and (max-width : 820px ){
.header_title {
width: 360px;
height: auto;
}
}

@media screen and (max-width: 767px) {
.header_title {
width: 200px;
top: 40%;
}
}

.header_title_svg {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
width: 100%;
height: 100%;
}


/*------------------------------------------------- 
scroll bar
------------------------------------------------- */

.scroll_bar a {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 4;
padding: 10px 10px 110px;
color: #ddd;
}
.scroll_bar a::after {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background: #ddd;
}
.scroll_bar a::before {
content: '';
position: absolute;
bottom: -100px;
left: 50%;
width: 1px;
height: 200px;
background-color: rgba(131, 131, 127, 0.4);
}
.scroll_bar a::after {
animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}

@media all and (max-width : 767px ){
.scroll_bar a::after {
bottom: -30px;
height: 60px;
}
.scroll_bar a::before {
bottom: -30px;
height: 60px;
}
}

/*-------------------------------------------------
グローバルナビ TOP 設定
-------------------------------------------------*/

.is-loaded .head_navi {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}

@keyframes navi_fadein {
0% {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
100% {
opacity: 1;
filter: none;
visibility: visible;
} 
}


/*-------------------------------------------------
サイドナビ TOP 設定
-------------------------------------------------*/

.is-loaded .sidenavi {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}

@keyframes navi_fadein {
0% {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
100% {
opacity: 1;
filter: none;
visibility: visible;
} 
}

/* ハンバーガーメニュー TOP設定
-------------------------------------------------- */

.is-loaded .openbtn {
opacity: 0;
animation-name: navi_fadein;
animation-duration: 1s;
animation-delay: 3s;
animation-fill-mode: forwards;
}

@keyframes navi_fadein {
0% {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
100% {
opacity: 1;
filter: none;
visibility: visible;
} 
}


/*-------------------------------------------------
sec_concept
-------------------------------------------------*/

.header_bottom {
transition: 1.3s;
position: relative;
z-index: 5;
padding-bottom: 130px;
}


@media all and (max-width : 767px ){
.txt_box {
position: relative;
width: 82%;
margin-bottom: 50px;
}
}

.txt_box_inner {
width: 100%;
color: #fff;
display: flex;
flex-direction: row-reverse;
justify-content: center;
margin: auto;
box-sizing: border-box;
}

@media all and (max-width : 767px ){
.txt_box_inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto;
}
}

.concept_copy {
max-width: 112px;
height: auto;
}

@media all and (max-width : 768px ){
.concept_copy {
max-width: 100px;
}
}

@media all and (max-width : 767px ){
.concept_copy{
max-width: 330px;
width: 100%;
height: auto;
padding: 45px 0 30px;
}
}
.concept_copy img {
width: 100%;
}
.concept_txt {
writing-mode: vertical-rl;
font-size: 1.6rem;
font-weight: 400;
line-height: 240%;
letter-spacing: 0.2em;
padding-top: 70px;
margin-right: 9%;
text-shadow: 1px 2px 1px rgba(0,0,0,0.4);
}

@media all and (max-width : 900px ){
.concept_txt {
line-height: 200%;
margin-right: 7%;
}
}

@media all and (max-width : 768px ){
.concept_txt {
padding-top: 80px;
margin-right: 6%;
}
}


@media all and (max-width : 767px ){
.concept_txt {
writing-mode: horizontal-tb;
font-size: 1.4rem;
font-weight: 500;
height: auto;
line-height: 180%;
letter-spacing: 0.05em;
padding-top: 0px;
margin-right: 0;
}
}



/*-------------------------------------------------
お知らせ
-------------------------------------------------*/

.main {
z-index: 5;
}
.sec_news {
background-image: url("../img/common/bg_wht.jpg");
background-repeat: repeat;
padding: 100px 0 40px;
margin-bottom: 120px;
}
.news_box {
width: calc(25% - 90px / 4);
margin-right: 30px;
}

@media all and (max-width : 1260px ){
.news_box {
width: calc(25% - 60px / 4);
margin-right: 20px;
}
}

@media all and (max-width : 820px ){
.sec_news {
margin-bottom: 40px;
}
.news_box {
width: calc(25% - 45px / 4);
margin-right: 15px;
}
}

@media all and (max-width : 767px ){
.sec_news {
padding: 40px 0 40px;
margin-bottom: 40px;
}
}

.news_box:nth-child(4n) {
margin-right: 0px;
}

@media all and (max-width : 767px ){
.news_box {
width: calc(50% - 15px / 2);
margin-right: 15px;
margin-bottom: 20px;
}
.news_box:nth-child(2n) {
margin-right: 0px;
}
}

.news_thum {
width: 100%;
height: auto;
position: relative;
background: #000;
overflow: hidden;
margin-bottom: 10px;
}
.news_thum img {
width: 100%;
transition-duration: 0.7s;	
aspect-ratio: 16 / 9;
object-fit: cover;
}
.news_thum img.no_img { border:1px solid #DDD; }
.news_thum img:hover {
transform: scale(1.05);	
transition-duration: 0.7s;	
opacity: 0.8;
}
.date_box_wrap .date {
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: 0.05em;
line-height: 100%;
padding-right: 15px;
position: relative;
margin-right: 10px;
}

@media all and (max-width : 767px ){
.date_box_wrap .date {
font-size: 1.0rem;
padding-right: 10px;
margin-right: 10px;
}
}

.date_box_wrap .date::after {
content: "|";
display: inline-block;
color: #999;
position: absolute;
right: 0;
top: 0;
}
.date_box_wrap .news_cate {
font-size: 1.0rem;
font-weight: 400;
line-height: 100%;
}
.date_box_wrap .news_cate span {
color: #C4302B;
font-weight: 700;
}
.date_box_wrap {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.head_date_box {
margin-bottom: 10px;
}
.news_title {
font-weight: 500;
font-size: 1.4rem;
width: 100%;
letter-spacing: 0.15em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.news_box_wrap {
display: flex;
margin-bottom: 50px;
}


@media all and (max-width : 767px ){
.news_cat_box {
display: flex;
font-size: 1.0rem;
margin-bottom: 5px;
}
.news_title {
font-size: 1.2rem;
}
.news_box_wrap {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
}

.arrow_btn a {
display:inline-block;
cursor:pointer;
position: relative;
text-decoration: none;
line-height: 100%;
transition: .5s;
}
.arrow_btn a::after {
content: "";
display: block;
position: absolute;
top: 20%;
left: 110%;
width: 50px;
height: 6px;
border: none;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: skew(45deg);
transition: .4s;
}
.arrow_btn a:hover::after {
position: absolute;
left: 110%;
width: 70px;
transition: .5s;
}
.arrow_btn a:hover {
color: #999;
transition: .5s;
}
.sec_news .arrow_btn {
text-align: right;
padding-right: 80px;
}

@media all and (max-width : 767px ){
.arrow_btn a {
font-size: 1.2rem;
}
.arrow_btn a::after {
top: 14%;
}
}


/*-------------------------------------------------
sec_spa
-------------------------------------------------*/

.sec_spa {
padding: 0px 0 80px;
margin-bottom: 30px;
}

@media all and (max-width : 767px ){
.sec_spa {
padding: 0px 0 20px;
margin-bottom: 20px;
}
}

.sec_title_vertical {
display: flex;
padding-left: 12.34%;
position: relative;
z-index: 5;
}
.sec_title_vertical dt {
font-size: 3.2rem;
font-weight: 500;
letter-spacing: 0.2em;
writing-mode: vertical-rl;
line-height: 100%;
margin-right: 6px;
}
.sec_title_vertical dt span {
color: #fff;
}
.sec_title_vertical dd {
font-family: "garamond-premier-pro", serif;
font-weight: 500;
font-size: 1.4rem;
color: #999;
writing-mode: vertical-rl;
line-height: 100%;
letter-spacing: 0.05em;
}

@media all and (max-width : 1024px ){
.sec_title_vertical dt {
font-size: 3.0rem;
}
}

@media all and (max-width : 820px ){
.sec_title_vertical dt {
font-size: 2.8rem;
}
.sec_title_vertical dd {
font-size: 1.2rem;
}
}

@media all and (max-width : 767px ){
.sec_title_vertical dt {
font-size: 2.0rem;
}
.sec_title_vertical dd {
font-size: 1.0rem;
}
}

.kv_box {
position: relative;
width: 92%;
height: calc(600vw / 19.2); /*画面幅が1920pxのとき高さ(height)が600pxの可変となるように*/
overflow: hidden;
margin-left: 0;
margin-top: -50px;
}
.intro_img {
position: relative;
z-index: 3;
}
.intro_img img {
width: 100%;
}

@media all and (max-width : 767px ){
.kv_box {
height: 141px;
margin-top: -30px;
}
}

.intro_img::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../img/common/bg_grid_40.png");
background-repeat: repeat;
background-position: left top;
z-index: 1;
}
.inner {
max-width: 1440px;
margin: -5% auto 80px;
background: #fff;
position: relative;
z-index: 4;
overflow: hidden;
}
.inner_wht {
background: #fff;
padding: 50px 0 30px;
position: relative;
z-index: 2;
}

@media all and (max-width : 1440px ){
.inner_wht {
padding: 50px 20px 20px;
}
}

.sec_copy {
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.2em;
margin-bottom: 30px;
}
.sec_txt {
font-size: 1.5rem;
line-height: 200%;
margin-bottom: 20px;
}

@media all and (max-width : 1024px ){
.sec_copy {
font-size: 2.2rem;
}
}

@media all and (max-width : 820px ){
.sec_copy {
font-size: 2.0rem;
}
.sec_txt {
font-size: 1.4rem;
line-height: 180%;
}
}

@media all and (max-width : 767px ){
.inner {
margin-bottom: 40px;
}
.inner_wht {
padding: 20px 0px 20px;
}
.sec_copy {
font-size: 1.6rem;
letter-spacing: 0.15em;
margin-bottom: 20px;
}
.sec_txt {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.05em;
}
}

.content_box {
width: calc(33.333333% - 60px / 3);
margin-right: 30px;
position: relative;
}
.content_box:nth-child(3) {
margin-right: 0px;
}
.content_box_wrap {
display: flex;
padding-top: 30px;
margin-bottom: 40px;
}

@media all and (max-width : 767px ){
.content_box {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
}
.content_box_wrap {
display: flex;
flex-direction: column;
padding-top: 0px;
margin-bottom: 10px;
}
}

.content_imgbox {
position: relative;
margin-bottom: 30px;
overflow: hidden;
background: #000;
}
.content_imgbox img {
width: 100%;
transition-duration: 0.7s;	
}
.content_box:hover .content_imgbox img {
transform: scale(1.05);	
transition-duration: 0.7s;	
opacity: 0.8;
}
.content_txt_box dt {
font-weight: 500;
font-size: 2.0rem;
letter-spacing: 0.15em;
line-height: 100%;
margin-bottom: 20px;
}
.content_txt_box dd {
font-size: 1.5rem;
line-height: 180%;
}
.sec_subtitle {
margin-bottom: 40px;
}
.sec_subtitle dt {
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.2em;
line-height: 100%;
margin-bottom: 6px;
padding-left: 35px;
position: relative;
}
.sec_subtitle dt::before {
content: "";
display: inline-block;
background-color: #000;
width: 28px;
height: 1px;
position: absolute;
top: 50%;
left: 0;
}

@media all and (max-width : 1024px ){
.sec_subtitle dt {
font-size: 2.2rem;
}
}

@media all and (max-width : 820px ){
.sec_subtitle dt {
font-size: 2.0rem;
}
.content_txt_box dd {
font-size: 1.4rem;
}
}

.sec_subtitle dd {
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-size: 1.2rem;
letter-spacing: 0.05em;
color: #999;
margin-left: 36px;
}
.calendar img {
width: 100%;
height: auto;
}

@media all and (max-width : 767px ){
.content_imgbox {
margin-bottom: 15px;
}
.content_txt_box dt {
font-size: 1.6rem;
margin-bottom: 15px;
}
.content_txt_box dd {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.sec_subtitle {
margin-bottom: 20px;
}
.sec_subtitle dt {
font-size: 1.6rem;
padding-left: 25px;
}
.sec_subtitle dt::before {
width: 20px;
}
.sec_subtitle dd {
font-size: 1.0rem;
margin-left: 28px;
}
}


/*-------------------------------------------------
施設案内
-------------------------------------------------*/

.sec_facility {
position: relative;
left: 0;
width: 88%;
background-image: url("../img/common/bg_wht.jpg");
background-repeat: repeat;
padding: 90px 0 80px;
}

@media all and (max-width : 980px ){
.sec_facility {
width: 95%;
}
}

@media all and (max-width : 767px ){
.sec_facility {
padding: 30px 0 20px;
}
}

.sec_facility .sec_title_vertical {
padding-left: 0;
}
.sec_facility .sec_title_vertical dt {
letter-spacing: 0.4em;
}
.theme_box_wrap {
max-width: 1030px;
display: flex;
flex-wrap: wrap;
}
.theme_box {
width: calc(50% - 30px / 2);
margin-right: 30px;
margin-bottom: 30px;
}
.theme_box:nth-child(2n) {
margin-right: 0px;
}

@media all and (max-width : 820px ){
.theme_box {
width: calc(50% - 20px / 2);
margin-right: 20px;
}
}

@media all and (max-width : 820px ){
.theme_box {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
}
}

.theme_imgbox {
position: relative;
margin-bottom: 40px;
}
.theme_imgbox a::before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
opacity: 0.35;
z-index: 5;
background: #000;
transition: opacity 0.3s ease 0s;
}
.theme_img {
margin-bottom: 25px;
position: relative;
background: #000;
overflow: hidden;
}
.theme_img img {
width: 100%;
transition-duration: 0.7s;
}
.theme_imgbox a:hover .theme_img img {
transform: scale(1.05);
transition-duration: 0.7s;
}
.theme_title_box_wrap {
display: flex;
align-items: center;
position: absolute;
left: 35px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
.theme_number {
position: relative;
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-size: 1.3em;
line-height: 100%;
margin-bottom: 10px;
padding-left: 40px;
color: #fff;
}
.theme_number::before {
content: "";
display: inline-block;
position: absolute;
left: 0px;
top: 9px;
background-color: #fff;
width: 32px;
height: 1px;
}
.theme_jp_title {
font-weight: 400;
font-size: 1.7em;
color: #fff;
letter-spacing: 0.3em;
line-height: 100%;
margin-bottom: 10px;
}
.theme_en_title {
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-size: 1.4rem;
color: #fff;
letter-spacing: 0.1em;
line-height: 100%;
}

@media all and (max-width : 980px ){
.theme_jp_title {
font-size: 1.5em;
letter-spacing: 0.2em;
}
.theme_en_title {
font-size: 1.2rem;
}
}

@media all and (max-width : 768px ){
.theme_number {
font-size: 1.2em;
margin-bottom: 10px;
padding-left: 40px;
}
.theme_jp_title {
font-size: 1.4em;
letter-spacing: 0.15em;
}
.theme_en_title {
font-size: 1.1rem;
}
}

.theme_link_btn {
z-index: 3;
display: block;
width: 40px;
height: 40px;
margin-left: 15px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
border-image: initial;
border-radius: 50%;
transition: all 0.5s ease 0s;
}
.theme_link_btn::before {
position: absolute;
z-index: 2;
display: block;
content: "";
top: 0px;
left: 15px;
bottom: 0px;
width: 6.5px;
height: 6.5px;
transform: rotate(45deg);
margin: auto;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transition: all 0.12s ease-in 0s;
}
.theme_imgbox a:hover .theme_link_btn {
opacity: 1;
background-color: #8E7742;
border: solid 1px #8E7742;
transition: all 0.5s ease 0s;
}
.theme_cat_title {
font-size: 1.5rem;
font-weight: 400;
line-height: 160%;
letter-spacing: 0.1em;
position: relative;
margin: 0px 0px 15px 30px;
}

@media all and (max-width : 820px ){
.theme_cat_title {
font-size: 1.4rem;
}
}

@media all and (max-width : 767px ){
.theme_cat_title {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.05em;
}
}

.theme_cat_title::before {
content: "";
display: block;
position: absolute;
left: 10px;
top: -100px;
background-color: #999;
width: 1px;
height: 90px;
}
.sec_facility .box_inner {
display: flex;
justify-content: space-between;
}

@media all and (max-width : 1440px ){
.sec_facility .box_inner {
padding-left: 30px;
}
}

@media all and (max-width : 1366px ){
.sec_facility .box_inner {
display: flex;
flex-direction: column;
}
.sec_facility .sec_title_vertical {
flex-direction: column;
margin-bottom: 40px;
}
.sec_facility .sec_title_vertical dt,
.sec_facility .sec_title_vertical dd {
writing-mode: horizontal-tb;
}
.sec_facility .sec_title_vertical dt {
margin-bottom: 10px;
}
}

@media all and (max-width : 767px ){
.sec_facility .box_inner {
padding-left: 0px;
}
.sec_facility .sec_title_vertical {
margin-bottom: 20px;
}
.sec_facility .sec_title_vertical dt {
font-size: 2.0rem;
margin-bottom: 5px;
}
}


/*-------------------------------------------------
アクセス
-------------------------------------------------*/

.sec_access {
padding: 80px 0 60px;
}
.map_box .gmap {
width: 100%;
height: auto;
aspect-ratio: 16 / 3.83;
filter: grayscale(100%);
}
.access_box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.access_box dl dt {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 15px;
}
.access_box dl dd {
font-size: 1.4rem;
}
.access_box dl ul li {
padding-left: 20px;
background-image: url("../img/common/icon_nakaguro.svg");
background-repeat: no-repeat;
background-position: left center;
margin-bottom: 3px;
}

@media all and (max-width : 767px ){
.sec_access {
padding: 40px 0 10px;
}
.map_box .gmap {
width: 100%;
height: 200px;
aspect-ratio :unset;
}
.access_box {
margin-top: 10px;
padding: 0 20px;
}
.access_box dl {
margin-bottom: 20px;
}
.access_box dl dt {
font-size: 1.35rem;
margin-bottom: 10px;
}
.access_box dl dd {
font-size: 1.3rem;
}
.access_box dl ul li {
background-position: left top;
margin-bottom: 3px;
}
}