@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    z-index: 1000;
}

#page-top i {
    font-size: 2.5vw;
}

#page-top a {
    text-decoration: none;
    color: #0f2350;
    display: block;
    opacity: 0.9;
    transition: all .4s ease;
}

#page-top a:hover {
    text-decoration: none;
    opacity: 0.5;
}

.navright {
    width: 5%;
    position: fixed;
    top: 11vw;
    right: 0;
}


.set {
    background-color: #ffff;
    transition: 1s;
}

.set:hover {
    background-color: #dcdcdc;
    transition: 1s;
}


.set .up {
    display: block;
    margin-top: -1vw;
    font-family: serif;
    font-size: 1vw;
    text-align: center;
}

.set a {
    text-decoration: none;
}

.set a i {
    display: block;
    font-size: 1.5vw;
    text-align: center;
    color: #c0c0c0;
    padding-top: 2vw;
}

.set a span {
    display: block;
    color: #101010;
    font-family: serif;
    font-size: 1vw;
    text-align: center;
    margin-top: -1.5vw;
}

.set .onnsenn {
    display: block;
    font-size: 1.5vw;
    text-align: center;
    color: #101010;
    padding-top: 1vw;
}

.set .down {
    margin-top: 0vw;
}

header {
    width: 100%;
    position: relative;
}


.s_08 .accordion_area {
    position: absolute;
    top: 0;
    right: 0;
	width: 25%;
	margin-left: auto;
	display: flex;
    margin-top: 1%;
    z-index: 1000;
}

.s_08 .accordion_area .accordion_one._flex {
	width: 100%;
}

.s_08 .accordion_area .sub-right {
    margin-left: 1vw;
}

.s_08 .accordion_one .accordion_header {
    display: flex;
    border-bottom: 1px solid #101010;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    padding-right: 1vw;
	color: #101010;
	font-size: 1vw;
	font-family: serif;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.2s;
}

.s_08 .accordion_one .accordion_header span {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.s_08 .accordion_one .accordion_header_one {
    background-color: #c0c0c0;	
    border-bottom: 1px solid #ffff;
    list-style-type: none; 
    transition: 1s; 
}

.s_08 .accordion_one .accordion_header_one:hover {
    background-color: #0f2350;
    transition: 1s;
}

.s_08 .accordion_one .accordion_header_one a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #101010;
	font-size: 1vw;
    font-family: serif;
	position: relative;
	z-index: +1;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    transition: 1s;
}

.s_08 .accordion_one .accordion_header_one a:hover {
    color: #ffff;
    transition: 1s;
}


.s_08 .accordion_one .accordion_header:hover {
	opacity: .8;
}


.s_08 .accordion_one .accordion_header i {
    display: block;
    font-size: 0.8vw;
    color: #101010;
    padding-top: 0.5vw;
}



.s_08 .accordion_one .accordion_header.open i:before {
    display: block;
    transform: rotate(180deg);
}


.s_08 .accordion_one .accordion_inner {
	display: none;
	padding: 0;
	box-sizing: border-box;
}

.header-flex {
    padding-top: 5vw;
    display: flex;
}


h1 {
    width: 13%;   
    color: #101010;
    margin-left: 4%;
    margin-top: -3vw;
}

h1 a {   
    text-decoration: none; 
    font-size: 0.8vw;
    font-family: serif;
    font-size: 0.8vw;
    color: #101010;  
}

h1 .logo {
    width: 60%;
}

h1 .logo img {
    display: block;
    width: 100%;
}


nav {
    width: 90%;
    margin-left: auto;
}

nav .main-ul {
    display: flex;
    list-style-type: none;
}

nav .main-ul .main-li {  
    width: calc( 100% / 5 );
    text-align: center;
}

nav .main-ul .drop {
    position: relative;
}

nav .main-ul .main-li .main-a {
    display: block;
   
    text-decoration: none;
    line-height: 2;
    font-size: 1.2vw;
    font-family: serif;
    color: #101010;
    transition: 1s;
}

nav .main-ul .main-li .main-a:hover {
    color: #3b3b3b;
    opacity: 1;
    transition: 1s;   
}

.sub-ul  {
    position: absolute;
    width: 100%;
    height: 0vw;
    opacity: 0;
    /*visibility: hidden;要素はあるけど見えない状態*/
    visibility: hidden;
    list-style-type: none;
    transition: 1s;
    z-index: 100;
}

.sub-ul .sub-li {
    position: relative;
    width: 100%;
    background-color: #0f2350;
    opacity: .7;
    transition: 1s;
}

.sub-ul .sub-li:hover {
    opacity: 1;
    transition: 1s;
}

.sub-ul .sub-li .sub-a {
    display: block;
    line-height: 2.6;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.2vw;
    font-family: serif;
    text-decoration: none;
}

.sub-ul .sub-li .sub-a:hover::before {
    width: 20%;
    transition: 0.5s;
}

.sub-ul .sub-li .sub-a::before {
    position: absolute;
    left: 0%;
    top: 1.5vw;
    display: block;
    width: 0%;
    height: 0.05vw;
    content: "";
    background-color: #a75b5f;
    transition: 0.5s;
}


.drop:hover .sub-ul {
    height: fit-content;
    opacity: 1;
    visibility: visible;
    transition: 1s;  
}


.otoiawaseflex {
    display: flex;
    width: 100%;
    margin-top: 1vw;
}

.otoiawaseflex .otoiawase {
    display: flex;
    list-style-type: none;
    width: 15%;
    margin-left: auto;
}

.otoiawaseflex .otoiawase li {
   width: 50%;
   position: relative;
}

.otoiawaseflex .otoiawase li a {
    display: block;
    text-decoration: none;
    font-family: serif;
    font-size: 1vw;
    color: #101010;
    
}

.otoiawaseflex .otoiawase li a:hover::before {
    width: 80%;
    transition: 0.5s;
}

.otoiawaseflex .otoiawase li a::before {
    position: absolute;
    bottom: 0.01vw;
    left: 0%;
    display: block;
    width: 0%;
    height: 0.05vw;
    content: "";
    background-color:#808080;
    transition: 0.5s;
}

.sns-box1 {
    display: flex;
    width: 10%;
    padding-right: 5%;   
}

.sns-box1 a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: #a9a9a9;
}
    
.sns-box1 a i {
    font-size: 1.3vw;
    transition: 1s;
}

.sns-box1 a i:hover {
    transform: scale(1.2); /* 拡大 */
    
}


.hero {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
}

.hero video {
    width: 100%;
}

.banner {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
}

.banner img {
    width: 100%;
}

.img-wrap {
    overflow: hidden;
  position: relative;
}

.img-wrap::before {
    animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
  
  @keyframes img-wrap {
    100% {
      transform: translateX(100%);
    }
  }


.shisetuithiran {
    display: flex;
    width: 23%;
    margin-top: 10vw;
    margin-left: auto;
    margin-right: auto;
    
}

.shisetuithiran .shisetumozi {
    width: calc( 100% / 4 );
}

.shisetuithiran .shisetumozi img {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 0.3s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}

@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fadeIn1000ms {
    animation-name: fadeIn1000ms;
    animation-delay: 0.4s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}

@keyframes fadeIn1000ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}

@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fadeIn2000ms {
    animation-name: fadeIn2000ms;
    animation-delay: 0.6s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}

@keyframes fadeIn2000ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.area-flex {
    margin-top: 3vw;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.area-flex .area-ul {
    display: flex;
    
}

.area-flex .area-ul .area-li {
    list-style-type: none;
    border-bottom: 1px solid rgba(105, 105, 105, 0.5);
    width: auto;
    margin-left: 1vw;
    font-size: 1.2vw;
    text-align: center;
    font-family: serif;
}


.area-flex .area-ul .nored:hover::after {
    width: 100%;
    transition: 0.5s;
}

.area-flex .area-ul .nored::after {
    display: block;
    width: 0%;
    height: 2px;
    content: "";
    background-color: #a75b5f;
    transition: 0.5s;
}



.area-flex .area-ul .area-li a span {
    font-size: 1vw;
}

.chizuflex {
    display: flex;
    margin-top: 5vw;
}

.chizu-left {
    width: 25%;
    padding-left: 8%;
}

.chizu-left .chizu-ul {
    width: 100%;
}

.chizu-left .chizu-ul .chizu-li {
    list-style-type: none;
    border-bottom: 1px solid rgba(105, 105, 105, 0.5);
    transition: 1s;
    font-family: serif;
    font-size: 1.2vw;
    color: #101010;
    align-items: center;
}

.chizu-left .chizu-ul .chizu-li:hover {
    background-color: #dcdcdc;
    transform: 1s;
}

.chizu-left .chizu-ul .chizu-li:nth-of-type(1) {
    border-top: 1px solid rgba(105, 105, 105, 0.5);
}

.chizu-left .chizu-ul .chizu-li .chizu-a {
    display: flex;
    text-decoration: none;
    color: #101010;
    font-family: serif;
    font-size: 1.2vw;
    padding-top: 2vw;
    padding-bottom: 1vw;
}

.tab_btn.active {
    background-color: #0f2350;
    opacity: 0.8;
    color: #ffff;
}

.tab_panel {
    display:none;
}


.tab_panel.active {
    display:block;
}

.chizu-left .chizu-ul .chizu-li .chizu-a .logo {
    padding-left: 1vw;
    width: 9%;
    margin-right: 1vw;
}

.chizu-left .chizu-ul .chizu-li .chizu-a .logo img {
    width: 100%;
    
}

.map {
    margin-left: 10vw;
    width: 50%;
}

.map img {
    width: 90%;
}

.map-name {
    width: 25%;
    position: relative;
}

.map-name .sitei1 {
    width: 100%;
    position: absolute;
    top: -15vw;
    left: 30vw;
} 

.map-name .sitei2 {
    width: 70%;
    position: absolute;
    top: -5vw;
    left: 11vw;
}

.map-name .sitei3 {
    width: 110%;
    position: absolute;
    top: -10vw;
    left: 10vw;
}

.map-name .sitei4 {
    width: 85%;
    position: absolute;
    top: -24.5vw;
    left: 5vw;
}

.map-name .sitei5 {
    width: 90%;
    position: absolute;
    top: -33.5vw;
    left: 26vw;
}

.map-name .sitei1-1 {
    width: 60%;
    position: absolute;
    top: -24vw;
    left: 28vw;
} 

.map-name .sitei2-2 {
    width: 60%;
    position: absolute;
    top: -8vw;
    left: 3vw;
}

.map-name .sitei3-3 {
    width: 60%;
    position: absolute;
    top: -17vw;
    left: 6vw;
}

.map-name .sitei4-4 {
    width: 50%;
    position: absolute;
    top: -21vw;
    left: 6vw;
}

.map-name .sitei5-5 {
    width: 50%;
    position: absolute;
    top: -30vw;
    left: 28vw;
}

.hotelgazou {
    display: flex;
    width: 30%;
    border: 0.5px solid  #a75b5f;
    display: none; 
}

.chizu-ul .chizu-li .aka1:hover .hotelgazou {
    display: block;
    opacity: 1;
}



.hotelgazou .hotelimgs {
    width: 30%;
    padding-top: 2vw;
    padding-left: 2vw;
    padding-bottom: 2vw;
   
}

.hotelgazou .hotelimgs img {
    width: 100%;
}

.hotelgazou .hotelgoannnai {
    width: 70%;
    padding: 2vw;
}

.hotelgazou .hotelgoannnai h6 {
    font-size: 1.1vw;
    font-family: serif;
    color: #0f2350;
}

.hotelgazou .hotelgoannnai .soukyakusitu {
    font-size: 1vw;
    font-family: serif;
    color: #a75b5f;
}

.hotelgazou .hotelgoannnai p {
    font-size: 1vw;
    font-family: serif;
    color: #101010;
    margin-top: 1vw;
}



.yoyaku {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
}

.puran p {
    text-align: center;
    font-family: serif;
    font-size: 1.5vw;
    font-weight: 800;
    color: #0f2350;

}

.puran p span {
    color: #ff0000;
    font-size: 2.3vw;
}

form {
    margin-top: 2vw;
    display: flex;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1000;
}

select {
    font-size: 1.2vw;
    font-family: serif;
    color: #101010;
}

input {
    font-size: 1vw;
    font-family: serif;
    color: #101010;
}

.kensaku {
    font-size: 1vw;
    font-family: serif;
    color: #ffff;
    background-color: #0f2350;
    padding-left: 1vw;
    padding-right: 1vw;
}

.yoyaku-ul {
    margin-top: 5vw;
    display: flex;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

.yoyaku-ul .yoyaku-li {
    list-style-type: none;
    width: 48%;
}

.migi {
    margin-left: 4%;
}

.yoyaku-ul .yoyaku-li .yoyaku-a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 1.2vw;
    font-family: serif;
    color: #ffff;
    background-color: #0f2350;
    padding: 1vw 2vw;
    transition: 1s;
}

.yoyaku-ul .yoyaku-li .yoyaku-a:hover {
    opacity: 0.7;
    transition: 1s;
}

.undertext-ul {
    display: flex;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.undertext-ul .undertext-li {
    width: calc( 100% / 4 );
    list-style-type: none;
  
}

.undertext-ul .undertext-li .undertext-a {
    display: block;
    text-decoration: none;
    font-family: serif;
    font-size: 1vw;
    color: #101010;
    text-align: center;
    margin-top: 3vw;
    border-left: 0.5px solid #101010;
}

.undertext-ul .undertext-li .last {
    border-right: 0.5px solid #101010;
}

.undertext-ul .undertext-li .undertext-a:hover::after {
    display: block;
    width: 60%;
    transition: 0.5s;
    margin-left: 3vw;
}

.undertext-ul .undertext-li .undertext-a::after {
    display: block;
    width: 0%;
    height: 1px;
    content: "";
    background-color: #a75b5f;
    transition: 0.5s;
}

h2 {
    text-align: center;
    color: #0f2350;
    font-size: 2vw;
    font-family: serif;
    margin-top: 5vw;
}

.slider-container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;
}

.slideimg {
    width: 100%;
}

.ainu {
    width: 100%;
}

.ainutext {
    display: flex;
    width: 40%;
    margin-top: 10vw;
    margin-left: auto;
    margin-right: auto;
}

.ainutext img {
    display: block;
    width: 9%;
    margin-left: auto;
    margin-right: auto;
}

.ainusetumei {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.ma-ku {
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;
}

.ma-ku img {
    width: 100%;
}

h3 {
    text-align: center;
    color: #0f2350;
    font-size: 2vw;
    font-family: serif;
    margin-bottom: 3vw;
    
}

.artbox {
    width: 80%;
    position: relative;
    
}

.artbox img {
    width: 100%;
    position: absolute;
    top: -8vw;
    left: 28vw;
    z-index: -1000;
}



.syoukai {    
    text-align: center;
    color: #101010;
    font-size: 1.2vw;
    font-family: serif;
    margin-top: 3vw;
    line-height: 2;
}


.imgsflex {
    width: 90%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

.imgsflex .ainuimg {
    display: flex;
    width: 50%;
}

.imgsflex .ainuimg img {
    width: 100%;
}

.go {
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3vw;
}

.go a {
    text-decoration: none;
    color: #101010;
    font-size: 1.2vw;
    font-family: serif;
    border-bottom: 1px solid rgba(105, 105, 105, 0.5); 
    padding-bottom: 0.5vw;  
}

.go a::after {
    display: block;
    width: 0%;
    height: 1px;
    content: "";
    background-color: #a75b5f;
    transition: 0.5s;
    padding-bottom: 0.5vw;
}

.go a:hover::after {
    width: 100%;
    transition: 0.5s;
}

.adventure {
    margin-top: 10vw;
}

.siri {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8vw;
}

.siri img {
    width: 100%;
}

.upimgs {
    margin-top: -25vw;
    display: flex;
    width: 25%;
}

.upimgs img {
    width: 100%;   
}

.sirigo {
    margin-top: 10vw;
    width: 19%;
}

.nuno {
    background-image: url(../images/bg_int.jpg);
    width: 90%;
    margin-top: 10vw;
}

.nuno .nunoup {
    display: flex;
    width: 33%;
    padding-left: 6.5%;
    padding-top: 10%;
}

.nuno .nunoup img {
    width: 100%;
    display: block; 
}

.hokkaiodukarabox {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.hokkaiodukarabox .tatemozi {
    writing-mode: tb-rl;
    margin-left: 25vw;
}

.hokkaiodukarabox .tatemozi .tate {
    font-size: 1.2vw;
    font-family: serif;
    color: #101010;
    margin-left: 1.5vw;
    padding-top: 15vw;
}


.hokkaiodukarabox .tateimgflex {
    display: flex;
    width: 5%;
    margin-left: 10vw;
    margin-top: 10vw;
    height: 20vw;
}

.hokkaiodukarabox .tateimgflex img {
    width: 100%;
    display: block;
    margin-right: 1vw;
}

.gara {
    background-color: #0f2350;
    width: 6%;
   margin-left: 10vw;
    margin-top: -75vh;
}

.gara img {
    width: 100%;
}


.oakantext {
    margin-top: 10vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 80vh;
    background-image: url(../images/oakantext.jpg);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oakantext .tinomonogatari {
    writing-mode: tb-rl;
/*writing-modeは縦書きにするプロパティ。tbはtopからbottom、rlはrightからleftという意味*/
    color: #ffff;
    text-align: center;
    font-size: 1.5vw;
    font-family: serif;
    font-weight: 900;
    letter-spacing: 0.5em;
    text-shadow: 1px 1px 1px #ffff, 0 0 1em #0f2350, 0 0 0.2em #0f2350;
}


.footer-flex {
    display: flex;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vw;
    border-top: 1px solid #0f2350;
    padding-top: 10vw;
}


.footer-flex .footer-logo {
    width: 8%;
    margin-left: 5vw;
}

.footer-flex .footer-logo img {
    width: 100%;
}

.footer-ul {
    margin-left: 10vw;
}

.footer-ul .footer-li {
    list-style-type: none;
}

.footer-ul .footer-li .footer-a {
    color: #101010;
    font-family: serif;
    font-size: 1.1vw;
    text-decoration: none;
    line-height: 3;
}


.footer-imgs {
    width: 1%;
    position: relative;
}

.footer-imgs img {
    width: 100%;
    position: absolute;
    top: -36.5vw;
    left: 5vw;
}

.footer-span {
    display: block;
    margin-top: 10vw;
    margin-left: 28vw;
    font-size: 1.7vw;
    font-family: serif;
    color: #0f2350;
}

.footer-down-flex {
    display: flex;
    width: 100%;
    margin-top: 3vw;
}

.footer-down-flex .down-left {
    width: 45%;
    list-style-type: none;
}

.footer-down-flex .down-left .down-li {
    font-weight: 500;
    padding-left: 29vw;
    font-size: 1.1vw;
    font-family: serif;
    color: #101010;
    margin-bottom: 1.9vw;
}

.footer-down-flex .down-left .down-li:nth-of-type(1) {
    margin-bottom: 11.2vw;
}

.footer-down-flex .down-right {
    width: 55%;
}

.footer-down-flex .down-right p {
    padding-left: 4vw;   
}

.footer-down-flex .down-right p a {
    font-size: 1.1vw;
    font-family: serif;
    color: #101010;
    text-decoration: none;
}


.footer-down-flex .down-right .no {
    margin-bottom: 0.5vw;
}

.footer-down-flex .down-right .space {
    margin-bottom: 2vw;
}

.copyright {
    text-align: center;
    font-size: 1vw;
    color: #101010;
    margin-top: 3vw;
    padding-bottom: 7vw;
}

.elem {
    opacity: 0;
    transition: 1s;
    transform: translateY(50px);
}

.isAnimate {
    opacity: 1;
    transform: translateY(0px);
}