@charset "UTF-8";

html,body{
width:100%;
height:100%;
}

img{ 
vertical-align:middle;
width: 100%;
height: auto;
}

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

body{ letter-spacing:0.05em; }

}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------------#sp_menu----------*/

.slide_in { animation: slideIn 1s cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes slideIn {
0% {
transform: translateX(10px);
opacity: 0;
}

100% { transform: translateX(0); }
40%,100% { opacity: 1; }
}

#sp_box{ display:block; }

.btn_wrapper {
position:fixed;
z-index:9999;
width:50px;
height:50px;
top:30px;
left:4.1%;
}

.menu_btn {
width:50px;
height:50px;
overflow:visible;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:1000;
}

.menu_btn .line {
position:absolute;
background-color:#fff;
overflow:hidden;
width:50px;
height:1px;
left:0;
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
}

.menu_btn .line:nth-child(1) {
top:22px;
left:50%;
margin-left:-25px;
}

.menu_btn .line:nth-child(2) {
bottom:22px;
left:50%;
margin-left:-25px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(1px) rotate(45deg);
transform: translateY(1px) rotate(45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(4px) rotate(-45deg);
transform: translateY(-4px) rotate(-45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;
width: 50%;
height: 100%;/*100vh*/
top: 0;
left:0;
display:none;
z-index:99;
overflow-y: auto;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px); /* Safari対応 */
}

#sp_menu nav a { color:#fff; }

#nav_cont{
position:relative;
top:18%;
left:63%;
width:37%;
overflow-x: hidden;
}

.nav_menu{ width:100%; }

#gnav_sp li {
font-size:32px;
width:100%;
margin-top:0;
letter-spacing: 0.05em;
line-height: 2.2;
}

#gnav_sp li.small{ font-size:18px; }

.copy_right_sp{
position:absolute;
bottom:55px;
left:8.2%;
font-size:14px;
color:#fff;
}


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

.btn_wrapper {
top:8px;
left:5%;
}

.menu_btn {
width:50px;
height:50px;
overflow:visible;
cursor:pointer;
position:absolute;
top:20px;
right:0;
z-index:1000;
}

.menu_btn .line { width:40px; }

#sp_menu nav { width: 95%; }

#nav_cont{
position:relative;
top:13%;
left:55%;
width:45%;
}

.nav_menu{ width:100%; }

#gnav_sp li {
font-size:30px;
line-height:2;
}

#gnav_sp li.small{ font-size:15px; }

.copy_right_sp{
bottom:30px;
left:8.2%;
font-size:12px;
}


}

/*----------------------------------------------------------------------------------------------------------------------#main_v----------*/

#main_v{ 
position:relative;
overflow: hidden;
width:100%;
height: calc(100%);
z-index: 0;
}

#main_v .slider{
position: absolute;
left:0;
bottom:0;
width:100%;
height:100%;
}

.slider li{
position:absolute;	
width:100%;
height:100%;
top:0;
left:0;
}

.slider li:nth-child(1){ background:url("../images/main01.webp") no-repeat center center; background-size:cover; }
.slider li:nth-child(2){ background:url("../images/main02.webp") no-repeat center center; background-size:cover; }
.slider li:nth-child(3){ background:url("../images/main03.webp") no-repeat center center; background-size:cover; }

.bx-wrapper, .bx-viewport, .slider, .slider ul{ 
height:100%;
position:relative;
z-index:1;
}

/*bxsliderの動き*/

.slider li {
-webkit-transform: -webkit-scale(1.05);
-ms-transform: -ms-scale(1.05);
transform: scale(1.05);
}

.slider li  {
-webkit-animation: zoom 15s linear;
animation: zoom 15s linear;
}

@-webkit-keyframes zoom {
0% {
-webkit-transform: -webkit-scale(1);
-ms-transform: -ms-scale(1);
transform: scale(1);
}

100% {
-webkit-transform: -webkit-scale(1.12);
-ms-transform: -ms-scale(1.12);
transform: scale(1.12);
}
}

@keyframes zoom {
0% {
-webkit-transform: -webkit-scale(1);
-ms-transform: -ms-scale(1);
transform: scale(1);
}

100% {
-webkit-transform: -webkit-scale(1.12);
-ms-transform: -ms-scale(1.12);
transform: scale(1.12);
}
}

/*ここまで*/

#main_v h1{
position: absolute;
left:41.6%;
top:40px;
width:16.6%;
z-index:10;
}

#main_v .box_menu{
position: absolute;
left:4.1%;
bottom:60px;
z-index:10;
}

#main_v .box_menu h2{
color: #fff;
font-size:12px;
margin-top: 10px;
letter-spacing: 0.15em;
}

#main_v .box_menu ul{
display: flex;
align-items: center;
}

#main_v .box_menu ul li{
margin-right: 18px;
position:relative;
line-height: 1.2;
}

#main_v .box_menu ul li:last-child{ margin-right:0px; }

#main_v .box_menu ul li:nth-child(5){ margin-right: 36px; }

#main_v .box_menu ul li:nth-child(5)::after{
content: "/";
position: absolute;
bottom: -3px; 
right: -22px;
color: #fff;
font-size: 20px;
}

#main_v .box_menu ul li a{
color: #fff;
font-size: 18px;
opacity: 1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
display: block;
}

#main_v .box_menu ul li a:hover{ opacity: 0.5; }

#main_v .box_menu ul li:nth-child(6) a, 
#main_v .box_menu ul li:nth-child(7) a{
border-bottom: 1px solid #fff;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#calendar{
position: absolute;
top:50px;
right:4.1%;
z-index:10;
color: #fff;
font-size:14px;
}

#calendar .weather{
display: flex;
gap: 0.6em;
align-items: center;
}

#calendar .weather li{ line-height: 1; }

.weather-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  margin-top: -3px;
}

/* 天気ごとのクラスに応じて背景画像を設定 */
.weather-icon.clear {background-image: url('../images/clear.png');}
.weather-icon.clouds {background-image: url('../images/clouds.png');}
.weather-icon.rain {background-image: url('../images/rain.png');}
.weather-icon.snow {background-image: url('../images/snow.png');}
.weather-icon.thunderstorm {background-image: url('../images/thunderstorm.png');}
.weather-icon.drizzle {background-image: url('../images/drizzle.png');}
.weather-icon.mist,
.weather-icon.fog {background-image: url('../images/fog.png');}

#calendar .date { margin-top:8px; }

#calendar .date p{
line-height: 1.6;
}

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

#main_v .box_menu ul li a{ font-size: 15px; }

}

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

#main_v .box_menu{ display: none; }

}

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

.slider li:nth-child(1){ background:url("../images/main_sp01.webp") no-repeat center center; background-size:cover; }
.slider li:nth-child(2){ background:url("../images/main_sp02.webp") no-repeat center center; background-size:cover; }
.slider li:nth-child(3){ background:url("../images/main_sp03.jpg") no-repeat center center; background-size:cover; }

#main_v h1{
left:33.3%;
top:27px;
width:33.4%;
}

#calendar{
top:auto;
right:auto;
left:5%;
bottom:114px;
}

#calendar .weather{
gap: 0.5em;
}

.weather-icon {
width: 22px;
height: 22px;
margin-top: -2px;
}

}






/*----------------------------------------------------------------------------------------------------------------------footer----------*/

footer{
position:absolute;
width:50%;
z-index:10;
left: 50%;
bottom:60px;
color: #fff;
font-size: 18px;
line-height: 1.6;
}

footer .access{
padding-left: 18px;
background:url("../images/ico_pin.png") no-repeat left center; background-size:9px 15px;
line-height: 1.2;
margin-bottom: 5px;
}

footer a{
color: #fff;
opacity: 1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
display: inline-block;
border-bottom: 1px solid #fff;
}

footer a:hover{
color: #fff;
opacity: 0.5;
}

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

footer .access{ font-size: 15px; }

}

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

footer{
width:90%;
left: 4.1%;
bottom:60px;
}

}

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

footer{
position:absolute;
width:90%;
z-index:10;
left: 5%;
bottom:40px;
font-size: 12px;
}

footer .access{
padding-left: 15px;
background:url("../images/ico_pin.png") no-repeat left center; background-size:9px 15px;
line-height: 1.2;
margin-bottom: 8px;
}

footer a{
color: #fff;
opacity: 1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
display: inline-block;
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

}