@charset "UTF-8";
/** 文字の定義**/
/** Colorの定義**/
.font-s {
font-size: smaller;
}
section {
position: relative;
}
.link-1 {
color: #111;
width: -moz-fit-content;
width: fit-content;
padding-bottom: 10px;
border-bottom: solid 1px #111;
display: flex;
align-items: center;
gap: 10px;
}
.link-1::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 18px;
height: 18px;
}
.link-2 {
font-weight: bold;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.link-2 {
font-size: 14px;
}
}
.link-2 {
display: flex;
gap: 8px;
align-items: center;
width: -moz-fit-content;
width: fit-content;
padding-left: 5px;
padding-bottom: 10px;
border-bottom: solid 1px #0071bc;
}
.link-2::before {
content: "";
display: block;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
width: 10px;
height: 10px;
}
.link-3 {
font-weight: bold;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.link-3 {
font-size: 14px;
}
}
.link-3 {
width: -moz-fit-content;
width: fit-content;
background-color: #0071bc;
border-radius: 100px;
padding: 10px 30px;
margin: 0 auto;
color: #fff;
display: block;
position: relative;
transition: 0.2s;
}
@media (hover: hover) {
.link-3:hover {
color: #fff;
background-color: #666;
}
}
.link-3::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 4px);
right: 10px;
}
.bt-backhome {
border: solid 2px #eae4d0;
padding: 20px 30px;
text-align: center;
margin: 50px auto;
display: block;
width: -moz-fit-content;
width: fit-content;
border-radius: 6px;
color: #eae4d0;
font-weight: bold;
position: relative;
}
@media screen and (max-width: 600px) {
.bt-backhome {
font-size: 14px;
}
}
@media screen and (max-width: 600px) and (max-width: 600px) {
.bt-backhome {
font-size: 12px;
}
}
.bt-backhome::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: solid 1.5px #eae4d0;
border-right: solid 1.5px #eae4d0;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 4px);
right: 10px;
}
.bt-s {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.bt-s {
font-size: 14px;
}
}
.bt-s {
font-weight: bold;
padding: 10px 30px;
border: solid 1px #111;
border-radius: 100px;
margin: 0 auto;
color: #111;
position: relative;
transition: 0.4s;
letter-spacing: 1px;
display: block;
width: -moz-fit-content;
width: fit-content;
}
.bt-s .arrow {
width: 10px;
transform: rotate(90deg);
position: absolute;
top: calc(50% - 5px);
right: 10px;
transition: 0.4s;
}
@media (hover: hover) {
.bt-s:hover {
background-color: #736357;
color: #fff;
}
.bt-s:hover .arrow {
fill: #fff;
}
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px;
display: flex;
align-items: center;
gap: 30px;
z-index: 999;
}
@media screen and (max-width: 600px) {
header {
padding: 10px 20px;
}
}
header .wrap-logo {
max-width: 300px;
}
@media screen and (max-width: 600px) {
header .wrap-logo {
max-width: 220px;
}
}
header .wrap-logo img {
display: block;
width: 100%;
}
header nav {
width: calc(80% - 300px);
}
@media screen and (max-width: 1400px) {
header nav {
display: none;
}
}
header .gnav {
display: flex;
gap: 20px 40px;
justify-content: center;
}
header .gnav li {
display: flex;
gap: 10px;
align-items: center;
}
header .gnav li::before {
content: "";
display: block;
width: 8px;
height: 8px;
background-color: #111;
border-radius: 100%;
}
header .gnav a {
color: #111;
font-weight: bold;
}
header .gnav a .font-s {
display: block;
}
.wrap-sp-menu {
position: fixed;
top: 30px;
right: 40px;
width: 60px;
cursor: pointer;
z-index: 9999;
}
@media screen and (max-width: 834px) {
.wrap-sp-menu {
top: 15px;
right: 10px;
transform: scale(0.8);
}
}
.wrap-sp-menu .txt {
display: block;
font-size: 14px;
}
@media screen and (max-width: 600px) {
.wrap-sp-menu .txt {
font-size: 12px;
}
}
.wrap-sp-menu .txt {
font-weight: bold;
text-align: center;
margin-top: 5px;
}
.wrap-sp-menu .bd {
position: absolute;
width: 25px;
display: block;
border-top: solid 1.5px #fff;
transition: all 0.4s ease;
}
.wrap-sp-menu .item-01 {
top: 22px;
left: 17px;
}
.wrap-sp-menu .item-02 {
top: 28px;
left: 17px;
}
.wrap-sp-menu .item-03 {
top: 34px;
left: 17px;
}
.wrap-sp-menu.on .item-01 {
transform: rotate(-30deg);
transform-origin: right;
left: 15px;
}
.wrap-sp-menu.on .item-02 {
opacity: 0;
}
.wrap-sp-menu.on .item-03 {
transform: rotate(30deg);
transform-origin: right;
left: 15px;
}
/*
.page {
header {
min-height: 32vw;
@include mq-900 {
min-height: 350px;
}
@include mq-600 {
min-height: 76vw;
}
.wrap-logo {
width: clamp(200px, 20vw, 600px);
transform: scale(1);
opacity: 1;
}
.hd-ashiyu {
display: none;
}
}
}
*/
.sp-nav {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
transition: 0.4s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.sp-nav.on {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.sp-nav .in {
background-color: #fff;
width: 100%;
height: 100%;
display: flex;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.sp-nav .in {
flex-direction: column;
}
}
@media screen and (max-width: 600px) {
.sp-nav .in {
overflow-y: auto;
display: block;
}
}
.sp-nav .wrap-img {
width: 70%;
}
@media screen and (max-width: 1025px) {
.sp-nav .wrap-img {
width: 60%;
}
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.sp-nav .wrap-img {
width: 100%;
order: 2;
}
}
@media screen and (max-width: 600px) {
.sp-nav .wrap-img {
display: none;
}
}
.sp-nav .wrap-img img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
}
@media screen and (max-width: 1025px) {
.sp-nav .wrap-img img {
-o-object-position: right bottom;
object-position: right bottom;
}
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.sp-nav .wrap-img img {
-o-object-position: right bottom;
object-position: right bottom;
height: 450px;
}
}
.sp-nav .wrap-txt {
width: 30%;
height: 100%;
overflow: auto;
padding: 100px 30px;
}
@media screen and (max-width: 1025px) {
.sp-nav .wrap-txt {
width: 40%;
}
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.sp-nav .wrap-txt {
width: 100%;
height: auto;
overflow: inherit;
order: 1;
}
}
@media screen and (max-width: 600px) {
.sp-nav .wrap-txt {
width: 100%;
padding: 50px 20px;
}
}
.sp-nav .col-2 {
width: 100%;
padding-bottom: 20px;
}
.sp-nav .col-2 .ft-menu {
margin-bottom: 30px;
}
.sp-nav .col-2 .ft-menu li a {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.sp-nav .col-2 .ft-menu li a {
font-size: 16px;
}
}
.sp-nav .col-2 .ft-menu li a {
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 30px;
color: #111;
}
.sp-nav .col-2 .ft-menu li a::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 16px;
height: 16px;
}
.sp-nav .col-2 .ft-menu .sub {
margin-left: 30px;
}
.sp-nav .col-2 .ft-menu .sub li a {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.sp-nav .col-2 .ft-menu .sub li a {
font-size: 14px;
}
}
.sp-nav .col-2 .ft-menu .sub li a {
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 30px;
color: #111;
}
.sp-nav .col-2 .ft-menu .sub li a::before {
content: "";
display: block;
background-image: none;
width: 10px;
height: 10px;
background-color: #111;
border-radius: 100px;
}
.sp-nav .col-2 .wrap-group-onsen .title {
font-weight: bold;
display: flex;
position: relative;
gap: 20px;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
}
.sp-nav .col-2 .wrap-group-onsen .title::before {
content: "";
display: block;
width: 50px;
height: 1px;
background-color: #111;
}
.sp-nav .col-2 .wrap-group-onsen .title::after {
content: "";
display: block;
width: 50px;
height: 1px;
background-color: #111;
}
.sp-nav .col-2 .wrap-group-onsen ul {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 600px) {
.sp-nav .col-2 .wrap-group-onsen ul {
gap: 10px;
}
}
.sp-nav .col-2 .wrap-group-onsen li {
margin-bottom: 10px;
}
.sp-nav .col-2 .wrap-group-onsen li a {
color: #111;
background-color: #fff;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.sp-nav .col-2 .wrap-group-onsen li a {
font-size: 14px;
}
}
.sp-nav .col-2 .wrap-group-onsen li a {
display: flex;
align-items: center;
width: -moz-fit-content;
width: fit-content;
padding: 20px;
border-radius: 6px;
border: solid 1px #eae4d0;
gap: 5px;
}
.sp-nav .col-2 .wrap-group-onsen li a::after {
content: "";
display: block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%234b7a66' d='M96,0v416h416V0H96z M472,376H136V40h336V376z'/%3E%3Cpolygon fill='%234b7a66' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472'/%3E%3Cpolygon fill='%234b7a66' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.wrap-insta {
border: solid 2px #111;
border-radius: 10px;
position: relative;
background-color: #fff;
margin: 0 auto;
width: -moz-fit-content;
width: fit-content;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.wrap-insta {
margin-bottom: 30px;
}
}
.wrap-insta a {
display: flex;
gap: 20px;
padding: 20px 60px 20px 30px;
align-items: center;
}
@media screen and (max-width: 600px) {
.wrap-insta a {
padding: 20px 40px 20px 20px;
flex-direction: column;
gap: 10px;
}
}
.wrap-insta a .icon-insta {
display: block;
width: 50px;
height: auto;
}
@media screen and (max-width: 600px) {
.wrap-insta a .icon-insta {
width: 40px;
}
}
.wrap-insta a .txt {
display: block;
width: calc(100% - 40px);
font-size: 18px;
}
@media screen and (max-width: 600px) {
.wrap-insta a .txt {
font-size: 16px;
}
}
.wrap-insta a .txt {
line-height: 1.5;
color: #111;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.wrap-insta a .txt {
width: 100%;
}
}
.wrap-insta a::after {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
top: calc(50% - 10px);
right: 10px;
}
.wrap-insta.wrap-insta-2 {
border: solid 1.5px #111;
border-radius: 10px;
margin: 0 auto;
margin-bottom: 0px;
}
@media screen and (max-width: 600px) {
.wrap-insta.wrap-insta-2 {
width: 100%;
}
}
.wrap-insta.wrap-insta-2 a {
padding: 15px 60px 15px 30px;
}
@media screen and (max-width: 600px) {
.wrap-insta.wrap-insta-2 a {
padding: 12px 40px 12px 12px;
flex-direction: row;
}
}
@media screen and (max-width: 600px) {
.wrap-insta.wrap-insta-2 a .txt {
text-align: center;
}
}
#back-top {
display: none;
position: absolute;
top: -25px;
right: 50px;
z-index: 99;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 0 3px #999;
border: solid 2.5px #000;
width: 50px;
height: 50px;
text-align: center;
padding-top: 8px;
}
@media screen and (max-width: 834px) {
#back-top {
right: 30px;
width: 45px;
height: 45px;
bottom: 70px;
padding-top: 4px;
}
}
@media screen and (max-width: 600px) {
#back-top {
border: solid 1px #000;
padding-top: 5px;
right: 10px;
}
}
#back-top img {
width: 18px;
height: 18px;
}
@media screen and (max-width: 834px) {
#back-top img {
width: 14px;
height: 14px;
}
}
footer {
background-color: #4b7a66;
padding: 50px 0;
position: relative;
}
@media screen and (max-width: 834px) {
footer {
padding-top: 30px;
}
}
footer .inner .wrap-flex {
display: flex;
gap: 50px;
justify-content: space-between;
margin-bottom: 100px;
align-items: center;
}
@media screen and (max-width: 834px) {
footer .inner .wrap-flex {
margin-bottom: 50px;
}
}
@media screen and (max-width: 600px) {
footer .inner .wrap-flex {
margin-bottom: 20px;
}
}
footer .inner .wrap-flex .col-1 {
width: 30%;
}
@media screen and (max-width: 834px) {
footer .inner .wrap-flex .col-1 {
width: 50%;
}
}
@media screen and (max-width: 600px) {
footer .inner .wrap-flex .col-1 {
width: 80%;
}
}
footer .inner .wrap-flex .col-2 {
width: 70%;
}
@media screen and (max-width: 834px) {
footer .inner .wrap-flex .col-2 {
display: none;
}
}
footer .inner .wrap-flex .col-2 .f-nav {
display: flex;
gap: 20px 40px;
justify-content: flex-end;
}
footer .inner .wrap-flex .col-2 .f-nav li {
display: flex;
gap: 10px;
align-items: center;
}
footer .inner .wrap-flex .col-2 .f-nav li::before {
content: "";
display: block;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 100%;
}
footer .inner .wrap-flex .col-2 .f-nav a {
color: #fff;
font-weight: bold;
}
footer .inner .wrap-flex .wrap-logo {
max-width: 300px;
}
@media screen and (max-width: 600px) {
footer .inner .wrap-flex .wrap-logo {
max-width: 250px;
}
}
footer .inner .wrap-flex .wrap-logo img {
display: block;
width: 100%;
}
footer .inner .wrap-facilities {
display: flex;
gap: 50px;
max-width: 1200px;
margin: 0 auto 100px;
}
@media screen and (max-width: 834px) {
footer .inner .wrap-facilities {
gap: 20px;
}
}
@media screen and (max-width: 600px) {
footer .inner .wrap-facilities {
gap: 10px;
margin-bottom: 30px;
}
}
footer .inner .wrap-facilities .col {
width: calc(33.3333333333% - 33.3333333333px);
}
@media screen and (max-width: 834px) {
footer .inner .wrap-facilities .col {
width: calc(33.3333333333% - 13.3333333333px);
}
}
@media screen and (max-width: 600px) {
footer .inner .wrap-facilities .col {
width: calc(33.3333333333% - 6.6666666667px);
}
}
footer .inner .wrap-facilities .col .wrap-img {
overflow: hidden;
border-radius: 10px;
}
@media screen and (max-width: 834px) {
footer .inner .wrap-facilities .col .wrap-img {
border-radius: 6px;
}
}
footer .inner .wrap-facilities .col .wrap-img img {
width: 100%;
height: auto;
display: block;
transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(1.08);
}
@media screen and (max-width: 834px) {
footer .inner .wrap-facilities .col .wrap-img img {
transform: scale(1);
}
}
@media screen and (max-width: 600px) {
footer .inner .wrap-facilities .col .wrap-img img {
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
}
}
footer .inner .wrap-facilities .col .name {
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 10px;
}
@media screen and (max-width: 600px) {
footer .inner .wrap-facilities .col .name {
margin-top: 5px;
font-size: 11px;
text-align: center;
}
}
footer .inner .wrap-facilities .col .name br {
display: none;
}
@media screen and (max-width: 600px) {
footer .inner .wrap-facilities .col .name br {
display: block;
}
}
footer .inner .wrap-facilities .col .name img {
width: 10px;
height: auto;
}
@media (hover: hover) {
footer .inner .wrap-facilities .col a:hover .wrap-img img {
transform: scale(1);
}
}
footer .inner .copyright {
display: block;
color: #fff;
font-size: 12px;
}
@media screen and (max-width: 600px) {
footer .inner .copyright {
font-size: 10px;
}
}
footer .inner .copyright {
letter-spacing: 1px;
text-align: center;
}
@media screen and (max-width: 600px) {
footer .inner .copyright {
font-size: 10px;
margin-bottom: 50px;
}
}
.wrap-ft-nav {
display: none;
}
@media screen and (max-width: 834px) {
.wrap-ft-nav {
position: fixed;
bottom: -10px;
left: 0;
background-color: #fff;
display: flex;
z-index: 9999;
width: 100%;
gap: 1px;
opacity: 0;
transition: 0.6s 0.5s;
}
}
@media screen and (max-width: 834px) and (max-width: 600px) {
.wrap-ft-nav {
border-top: solid 1px #fff;
}
}
@media screen and (max-width: 834px) {
.wrap-ft-nav .col {
width: 33.3333333333%;
text-align: center;
padding: 20px 0;
background-color: #4b7a66;
}
}
@media screen and (max-width: 834px) and (max-width: 600px) {
.wrap-ft-nav .col {
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 834px) {
.wrap-ft-nav .name {
font-size: 14px;
color: #fff;
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 834px) and (max-width: 600px) {
.wrap-ft-nav .name {
font-size: 11px;
}
}
@media screen and (max-width: 834px) {
.wrap-ft-nav .name br {
display: none;
}
}
@media screen and (max-width: 834px) and (max-width: 600px) {
.wrap-ft-nav .name br {
display: block;
}
}
@media screen and (max-width: 834px) {
.wrap-ft-nav .name .icon {
width: 10px;
}
}
@media screen and (max-width: 834px) {
.wrap-ft-nav.on {
opacity: 1;
bottom: 0;
}
}
/* ==============================
共通
============================== */
* {
background-repeat: no-repeat;
margin: 0;
padding: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
a {
text-decoration: none;
overflow: hidden;
color: #0071bc;
}
a:hover {
color: #ffb700;
}
img {
border: none;
line-height: 0;
vertical-align: bottom;
max-width: 100%;
height: auto;
}
i {
font-style: normal;
}
.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
.space10 {
height: 10px;
}
.space20 {
height: 20px;
}
.space30 {
height: 30px;
}
.space40 {
height: 40px;
}
.space100 {
height: 100px;
}
.mt5 {
margin-top: 5px;
}
.mt10 {
margin-top: 10px;
}
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.mt40 {
margin-top: 40px;
}
.mt50 {
margin-top: 50px;
}
.mb5 {
margin-bottom: 5px;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
.mb40 {
margin-bottom: 40px;
}
.mb50 {
margin-bottom: 50px;
}
.ml5 {
margin-left: 5px;
}
.ml10 {
margin-left: 10px;
}
.ml20 {
margin-left: 20px;
}
.ml30 {
margin-left: 30px;
}
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.mr5 {
margin-right: 5px;
}
.mr10 {
margin-right: 10px;
}
.mr20 {
margin-right: 20px;
}
.mr30 {
margin-right: 30px;
}
.mr40 {
margin-right: 40px;
}
.mr50 {
margin-right: 50px;
}
.bold {
font-weight: bold;
}
.txt-left {
text-align: left;
}
.txt-center {
text-align: center;
}
.txt-right {
text-align: right;
}
.red {
color: #c00;
}
ul li {
list-style: none;
}
.alpha {
transition: opacity 0.3s ease;
}
@media (hover: hover) {
.alpha:hover {
opacity: 0.7;
}
}
.wrap-alpha a {
transition: opacity 0.3s ease;
}
@media (hover: hover) {
.wrap-alpha a:hover {
opacity: 0.7;
}
}
.bd-01 {
background: linear-gradient(transparent 60%, rgba(252, 238, 33, 0.6) 0%);
font-weight: bold;
}
.cursor {
cursor: pointer;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
.link a {
color: #0071bc;
}
.link a:hover {
color: #ffb700;
}
/** ***********************************************
COMMON
*********************************************** **/
body {
font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-size: 16px;
}
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
body {
letter-spacing: 0.5px;
background-color: #eae4d0;
}
#wrapper {
overflow: hidden;
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 0 20px;
z-index: 2;
}
.wrap-flex {
display: flex;
}
.wrap-flex .col {
width: 50%;
}
.wrap-flex.flex-3 .col {
width: 33.3333333333%;
}
.wrap-flex.flex-4 .col {
width: 25%;
}
.sp {
display: none;
}
@media screen and (max-width: 600px) {
.sp {
display: block;
}
}
.pc {
display: block;
}
@media screen and (max-width: 600px) {
.pc {
display: none;
}
}
.page {
background-color: #ebf0e5;
}
.page.shirasagi {
background-color: #eae4d0;
}
@media screen and (max-width: 600px) {
.page main {
padding-bottom: 30px;
}
}
.page .gnav li::before {
background-color: #fff;
}
.page .gnav a {
color: #fff;
}
.page .sec-mv {
position: relative;
height: 100dvh;
overflow: hidden;
background-color: #000;
}
.page .sec-mv .wrap-txts {
width: -moz-fit-content;
width: fit-content;
position: absolute;
z-index: 3;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-txts {
width: 65%;
}
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts {
width: 80%;
}
}
.page .sec-mv .wrap-txts .catch {
background-color: #fffba8;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts .catch {
font-size: 18px;
}
}
.page .sec-mv .wrap-txts .catch {
font-weight: bold;
margin: 0 auto 30px;
border-radius: 100px;
padding: 5px 20px;
display: block;
text-align: center;
width: -moz-fit-content;
width: fit-content;
position: relative;
visibility: visible;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts .catch {
font-size: 16px;
}
}
.page .sec-mv .wrap-txts .catch::after {
content: "";
display: block;
position: absolute;
top: -55px;
left: -10%;
width: 120%;
height: 100px;
background-image: url("../images/kua/yuge.svg");
background-repeat: no-repeat;
}
.page .sec-mv .wrap-txts h1 .txt {
display: block;
color: #fff;
text-align: center;
text-shadow: 0 0 4px #111;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-txts h1 .txt {
text-shadow: 0 0 4px #666;
}
}
.page .sec-mv .wrap-txts h1 .txt.txt-1 {
font-size: 50px;
padding-bottom: 20px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts h1 .txt.txt-1 {
font-size: 30px;
}
}
.page .sec-mv .wrap-txts h1 .txt.txt-2 {
border-top: solid 1.5px #fff;
font-size: 80px;
line-height: 1.2;
padding: 0 20px 10px;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-txts h1 .txt.txt-2 {
font-size: 70px;
}
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts h1 .txt.txt-2 {
font-size: 40px;
}
}
.page .sec-mv .wrap-txts h1 .txt.en {
letter-spacing: 2px;
font-size: 24px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-txts h1 .txt.en {
font-size: 20px;
}
}
.page .sec-mv img {
-o-object-fit: cover;
object-fit: cover;
height: 100dvh;
width: 100%;
opacity: 0.8;
}
.page .sec-mv .bg {
background-image: url("../images/kua/wave.svg");
background-position: bottom left;
background-size: auto 70px;
background-repeat: repeat-x;
z-index: 2;
width: 200%;
height: 70px;
}
.page .sec-mv .bg.shirasagi {
background-image: url("../images/shirasagi/wave.svg");
}
@media screen and (max-width: 600px) {
.page .sec-mv .bg {
background-size: auto 35px;
height: 35px;
}
}
.page .sec-mv .bg {
position: absolute;
bottom: -35px;
left: 0;
}
@media screen and (max-width: 600px) {
.page .sec-mv .bg {
bottom: -17.5px;
animation: wave 50s linear;
}
}
.page .sec-mv .bg {
animation: wave 100s linear;
}
@keyframes wave {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.page .sec-mv .wrap-set-ticket {
background-color: #4b7a66;
border-radius: 10px;
position: fixed;
bottom: 50px;
right: 20px;
box-shadow: 0 0 5px #333;
z-index: 998;
transition: 0.8s 0s;
transform: translateX(20px);
opacity: 0;
visibility: hidden;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket {
box-shadow: none;
border-radius: 0;
bottom: 0;
right: 0;
width: 100%;
transform: translateX(0);
z-index: 10;
}
}
.page .sec-mv .wrap-set-ticket.on {
transform: translateX(0);
opacity: 1;
visibility: visible;
transition: 0.8s 1s;
}
.page .sec-mv .wrap-set-ticket a {
display: block;
color: #fff;
text-align: center;
padding: 20px;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-set-ticket a {
padding: 12px;
}
}
.page .sec-mv .wrap-set-ticket .txt-1 {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .txt-1 {
font-size: 14px;
}
}
.page .sec-mv .wrap-set-ticket .txt-1 {
margin: 0 auto 15px;
display: flex;
gap: 8px;
align-items: center;
width: -moz-fit-content;
width: fit-content;
letter-spacing: 0;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-set-ticket .txt-1 {
font-size: 12px;
}
}
.page .sec-mv .wrap-set-ticket .txt-1 .icon-onsen {
width: 20px;
height: auto;
}
.page .sec-mv .wrap-set-ticket .txt-2 {
font-size: 20px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .txt-2 {
font-size: 18px;
}
}
.page .sec-mv .wrap-set-ticket .txt-2 {
margin-bottom: 15px;
color: #efca54;
letter-spacing: 0;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-set-ticket .txt-2 {
font-size: 16px;
}
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .txt-2 {
margin-bottom: 0;
}
}
.page .sec-mv .wrap-set-ticket .more {
display: block;
background-color: #fff;
width: -moz-fit-content;
width: fit-content;
border-radius: 100px;
padding: 5px 20px;
margin: 0 auto;
color: #4b7a66;
font-weight: bold;
letter-spacing: 0;
font-size: 14px;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .more {
font-size: 12px;
}
}
.page .sec-mv .wrap-set-ticket .more {
display: flex;
gap: 5px;
align-items: center;
}
@media screen and (max-width: 834px) {
.page .sec-mv .wrap-set-ticket .more {
font-size: 12px;
}
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .more {
display: none;
}
}
.page .sec-mv .wrap-set-ticket .more .arrow-01 {
fill: #4b7a66;
stroke: #4b7a66;
width: 10px;
}
.page .sec-mv .wrap-set-ticket .bt-close {
background-color: #111;
width: 30px;
height: 30px;
border-radius: 100px;
position: absolute;
right: -10px;
top: -10px;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.page .sec-mv .wrap-set-ticket .bt-close {
right: 5px;
top: 5px;
transform: scale(0.8);
}
}
.page .sec-mv .wrap-set-ticket .bt-close::before {
content: "";
width: 14px;
height: 1px;
background-color: #fff;
position: absolute;
left: 8px;
top: 50%;
transform: rotate(45deg);
}
.page .sec-mv .wrap-set-ticket .bt-close::after {
content: "";
width: 14px;
height: 1px;
background-color: #fff;
position: absolute;
left: 8px;
top: 50%;
transform: rotate(-45deg);
}
.page .sec-mv .scroll {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: auto;
}
@media screen and (max-width: 600px) {
.page .sec-mv .scroll {
bottom: 100px;
width: 40px;
}
}
.page .sec-mv .slideshow {
position: relative;
width: 100%;
height: 100dvh;
overflow: hidden;
}
.page .sec-mv .slideshow .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
animation: fade 15s infinite;
}
.page .sec-mv .slideshow .slide:nth-child(1) {
animation-delay: 0s;
}
.page .sec-mv .slideshow .slide:nth-child(2) {
animation-delay: 5s;
}
.page .sec-mv .slideshow .slide:nth-child(3) {
animation-delay: 10s;
}
@keyframes fade {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
33% {
opacity: 1;
}
43% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.page .sec-common {
padding: 50px 0;
}
@media screen and (max-width: 600px) {
.page .sec-common {
padding: 25px 0;
}
}
.page .sec-kua-01 .wrap-flex {
max-width: 1200px;
margin: 0 auto;
gap: 50px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-flex {
flex-direction: column;
gap: 30px;
}
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-flex .col {
width: 100%;
}
}
.page .sec-kua-01 .wrap-flex .title {
display: block;
text-align: center;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-flex .title {
font-size: 18px;
}
}
.page .sec-kua-01 .wrap-flex .title {
font-weight: bold;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-dl {
margin-bottom: 30px;
}
}
.page .sec-kua-01 .wrap-dl dl {
display: flex;
padding: 20px 0;
align-items: flex-start;
border-top: solid 1px #333;
margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-dl dl {
margin-bottom: 0;
}
}
.page .sec-kua-01 .wrap-dl dl:last-child {
border-bottom: solid 1px #333;
}
.page .sec-kua-01 .wrap-dl dl dt {
width: 20%;
background-color: #016934;
text-align: center;
border-radius: 100px;
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-dl dl dt {
font-size: 12px;
}
}
.page .sec-kua-01 .wrap-dl dl dt {
padding: 2px 0;
margin-top: 2px;
}
.page .sec-kua-01 .wrap-dl dl dd {
width: 80%;
padding-left: 8%;
font-size: 18px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-dl dl dd {
font-size: 16px;
}
}
.page .sec-kua-01 .wrap-dl.shirasagi dt {
background-color: #604c3f;
}
.page .sec-kua-01 .bt-s {
margin: 0;
background-color: #eae4d0;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .bt-s {
margin: 0 auto 20px;
width: 200px;
text-align: center;
}
}
@media (hover: hover) {
.page .sec-kua-01 .bt-s:hover {
background-color: #604c3f;
}
}
.page .sec-kua-01 .wrap-news {
background-color: #fff;
border-radius: 10px;
padding: 30px;
min-height: 250px;
}
.page .sec-kua-01 .wrap-news .news-list li {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-news .news-list li {
font-size: 14px;
}
}
.page .sec-kua-01 .wrap-news .news-list li {
margin-bottom: 10px;
border-bottom: solid 1px #ddd;
padding-bottom: 10px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-news .news-list li {
text-align: left;
}
}
.page .sec-kua-01 .wrap-news .news-list li a {
display: flex;
gap: 10px;
align-items: center;
}
@media screen and (max-width: 834px) {
.page .sec-kua-01 .wrap-news .news-list li a {
flex-wrap: wrap;
}
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-news .news-list li a {
gap: 5px;
}
}
.page .sec-kua-01 .wrap-news .news-list li a.important {
font-weight: bold;
}
.page .sec-kua-01 .wrap-news .news-list li a.important::before {
content: "重要";
font-size: 10px;
background-color: #e50213;
color: #fff;
padding: 2px 10px;
border-radius: 3px;
white-space: nowrap;
}
@media screen and (max-width: 834px) {
.page .sec-kua-01 .wrap-news .news-list li .content {
flex-basis: 100%;
display: block;
}
}
.page .sec-kua-01 .wrap-news .news-list li .date {
font-size: smaller;
color: #666;
}
.page .sec-kua-01 .wrap-news .news-list li .new {
font-size: 11px;
color: #e50213;
}
.page .sec-kua-01 .wrap-news .link-news {
font-size: 12px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-01 .wrap-news .link-news {
font-size: 10px;
}
}
.page .sec-kua-01 .wrap-news .link-news {
color: #111;
display: flex;
width: -moz-fit-content;
width: fit-content;
margin: 0 0 0 auto;
}
.page .sec-kua-01 .wrap-news .link-news .arrow {
width: 8px;
margin-left: 5px;
transform: rotate(45deg);
}
.page .sec-kua-02 .inner {
max-width: 1200px;
}
.page .sec-kua-02 .wrap-catch {
max-width: 900px;
text-align: center;
margin: 0 auto 50px;
}
.page .sec-kua-02 .wrap-catch .en {
font-size: 50px;
letter-spacing: 4px;
color: #736357;
opacity: 0.2;
margin-bottom: 20px;
font-weight: bold;
display: block;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch .en {
font-size: 20px;
}
}
.page .sec-kua-02 .wrap-catch .kua-catch {
display: block;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch .kua-catch {
margin-bottom: 30px;
}
}
.page .sec-kua-02 .wrap-catch .sub {
display: block;
text-align: center;
font-size: 40px;
font-weight: bold;
padding: 20px;
border-top: solid 1px #333;
border-bottom: solid 1px #333;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch .sub {
font-size: 20px;
margin-bottom: 30px;
}
}
.page .sec-kua-02 .wrap-catch p {
font-size: 24px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch p {
font-size: 20px;
}
}
.page .sec-kua-02 .wrap-catch p {
line-height: 2.5;
text-align: center;
font-weight: bold;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch p {
font-size: 16px;
line-height: 2;
text-align: justify;
}
.page .sec-kua-02 .wrap-catch p br {
display: none;
}
}
.page .sec-kua-02 .wrap-catch.shirasagi {
max-width: 1000px;
margin: 0 auto 80px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.shirasagi {
margin-bottom: 30px;
}
}
.page .sec-kua-02 .wrap-catch.shirasagi .sub {
display: block;
text-align: center;
font-size: 80px;
font-weight: bold;
padding: 20px;
border-top: none;
border-bottom: none;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.shirasagi .sub {
font-size: 40px;
margin-bottom: 30px;
padding: 0;
}
}
.page .sec-kua-02 .wrap-catch.wrap-catch2 {
padding-top: 30px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.wrap-catch2 {
padding-top: 0;
}
}
.page .sec-kua-02 .wrap-catch.wrap-catch2 p {
font-size: 30px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.wrap-catch2 p {
font-size: 24px;
}
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.wrap-catch2 p {
font-size: 20px;
text-align: center;
}
}
.page .sec-kua-02 .wrap-catch.wrap-catch2 p .bd {
border-bottom: solid 2px #111;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-catch.wrap-catch2 p br {
display: block;
}
}
.page .sec-kua-02 .wrap-slides {
margin-bottom: 200px;
}
@media screen and (max-width: 834px) {
.page .sec-kua-02 .wrap-slides {
margin-bottom: 100px;
}
}
.page .sec-kua-02 .wrap-slides img {
max-width: 100%;
}
.page .sec-kua-02 .wrap-slides.shirasagi {
margin-bottom: 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-slides.shirasagi {
margin-bottom: 50px;
}
}
.page .sec-kua-02 .wrap-facilities {
max-width: 1000px;
margin: 0 auto 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities {
margin: 0 auto 50px;
}
}
.page .sec-kua-02 .wrap-facilities .flex-1 {
margin-bottom: 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .flex-1 {
flex-direction: column;
margin-bottom: 50px;
}
}
.page .sec-kua-02 .wrap-facilities .col {
position: relative;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col {
width: 100%;
}
}
.page .sec-kua-02 .wrap-facilities .col img {
max-width: 100%;
border-radius: 15px;
position: relative;
z-index: 1;
display: block;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col img {
border-radius: 10px;
}
}
.page .sec-kua-02 .wrap-facilities .col img.hakomushi {
max-width: 80%;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col img.hakomushi {
max-width: 80%;
}
}
.page .sec-kua-02 .wrap-facilities .col img.araiba {
max-width: 70%;
margin: 0 0 0 auto;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col img.araiba {
max-width: 70%;
}
}
.page .sec-kua-02 .wrap-facilities .col img.zekkei {
max-width: 70%;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col img.zekkei {
max-width: 90%;
}
}
.page .sec-kua-02 .wrap-facilities .col img.cider {
max-width: 200px;
margin: 0 0 0 auto;
filter: drop-shadow(0 0 2px #999);
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col img.cider {
max-width: 100px;
margin: 50px 0 0 auto;
}
}
.page .sec-kua-02 .wrap-facilities .col .fukidashi {
position: absolute;
z-index: 3;
max-width: 200px;
filter: drop-shadow(0 0 2px #999);
}
@media screen and (max-width: 834px) {
.page .sec-kua-02 .wrap-facilities .col .fukidashi {
max-width: 150px;
}
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col .fukidashi {
max-width: 100px;
}
}
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-1 {
top: -30px;
right: 10px;
}
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-2 {
top: 30px;
left: 10px;
}
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-3 {
top: -30px;
right: 10px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-3 {
right: -10px;
}
}
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-4 {
top: 30px;
left: 10px;
max-width: 300px;
}
@media screen and (max-width: 834px) {
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-4 {
max-width: 250px;
top: inherit;
bottom: 80px;
left: -70px;
}
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col .fukidashi.fukidashi-4 {
bottom: 30px;
left: -70px;
max-width: 150px;
}
}
.page .sec-kua-02 .wrap-facilities .col.col-2 {
margin-top: 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .col.col-2 {
margin-top: 30px;
}
}
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo {
position: relative;
border-radius: 10px;
overflow: hidden;
max-width: 80%;
margin: 0 auto 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo {
max-width: 100%;
margin: 0 auto 70px;
}
}
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo img {
width: 100%;
}
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo .cap {
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
text-align: center;
color: #fff;
font-size: 18px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo .cap {
font-size: 16px;
}
}
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo .cap {
font-weight: bold;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-facilities .wrap-kyukeijo .cap {
font-size: 11px;
padding: 10px;
}
}
.page .sec-kua-02 .wrap-onsen-data {
background-color: #f8f8d4;
border-radius: 10px;
padding: 50px;
max-width: 800px;
margin: 0 auto 50px;
position: relative;
text-align: center;
border: solid 1px #736357;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data {
padding: 50px 20px;
}
}
.page .sec-kua-02 .wrap-onsen-data h3 {
text-align: center;
font-size: 40px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data h3 {
font-size: 30px;
}
}
.page .sec-kua-02 .wrap-onsen-data h3 {
color: #736357;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data h3 {
font-size: 24px;
}
}
.page .sec-kua-02 .wrap-onsen-data .desc {
width: -moz-fit-content;
width: fit-content;
padding: 0 30px;
margin: 0 auto 50px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data .desc {
margin-bottom: 30px;
padding: 0 10px;
}
}
.page .sec-kua-02 .wrap-onsen-data .desc p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data .desc p {
font-size: 16px;
}
}
.page .sec-kua-02 .wrap-onsen-data .desc p {
line-height: 1.6;
text-align: left;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data .desc p br {
display: none;
}
}
.page .sec-kua-02 .wrap-onsen-data ul {
margin: 0 auto 50px;
display: block;
width: -moz-fit-content;
width: fit-content;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data ul {
margin-bottom: 40px;
}
}
.page .sec-kua-02 .wrap-onsen-data li {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data li {
font-size: 16px;
}
}
.page .sec-kua-02 .wrap-onsen-data li {
line-height: 1.6;
text-align: left;
display: flex;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data li {
font-size: 14px;
}
}
.page .sec-kua-02 .wrap-onsen-data li::before {
content: "";
width: 8px;
height: 8px;
background-color: #111;
border-radius: 10px;
display: block;
}
.page .sec-kua-02 .wrap-onsen-data .icon-data {
position: absolute;
top: 20px;
left: 20px;
max-width: 100px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data .icon-data {
max-width: 70px;
top: -30px;
left: -10px;
}
}
.page .sec-kua-02 .wrap-onsen-data .bt {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-02 .wrap-onsen-data .bt {
font-size: 14px;
}
}
.page .sec-kua-02 .wrap-onsen-data .bt {
font-weight: bold;
padding: 10px 30px;
border: solid 1px #111;
border-radius: 100px;
margin: 0 auto;
color: #111;
position: relative;
transition: 0.4s;
letter-spacing: 1px;
}
.page .sec-kua-02 .wrap-onsen-data .bt .arrow {
width: 10px;
transform: rotate(90deg);
position: absolute;
top: calc(50% - 5px);
right: 10px;
transition: 0.4s;
}
@media (hover: hover) {
.page .sec-kua-02 .wrap-onsen-data .bt:hover {
background-color: #736357;
color: #fff;
}
.page .sec-kua-02 .wrap-onsen-data .bt:hover .arrow {
fill: #fff;
}
}
.page .bt-blue {
display: block;
color: #fff;
background-color: #0071bc;
padding: 20px 40px;
text-align: center;
font-size: 18px;
}
@media screen and (max-width: 600px) {
.page .bt-blue {
font-size: 16px;
}
}
.page .bt-blue {
font-weight: bold;
border-radius: 6px;
width: 100%;
max-width: 300px;
position: relative;
transition: 0.2s;
margin: 0 auto;
letter-spacing: 2px;
box-shadow: 0 0 3px #999;
}
@media screen and (max-width: 600px) {
.page .bt-blue {
font-size: 15px;
}
}
@media (hover: hover) {
.page .bt-blue:hover {
opacity: 0.8;
}
}
.page .bt-blue .icon-info {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
max-width: 25px;
}
.page .bt-blue::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-top: solid 1.5px #fff;
border-right: solid 1.5px #fff;
top: 50%;
right: 8%;
position: absolute;
transform: rotate(45deg) translateY(-50%);
}
.page .bt-blue.route {
max-width: 400px;
margin-bottom: 50px;
}
.page .bt-blue.route::after {
display: none;
}
.page .bt-blue.route .icon-window {
width: 14px;
position: absolute;
top: 50%;
right: 8%;
position: absolute;
transform: translateY(-50%);
}
.page .sec-kua-03 .wrap-title {
text-align: center;
margin-bottom: 50px;
}
.page .sec-kua-03 .wrap-title .title-h3 {
font-size: 30px;
}
@media screen and (max-width: 600px) {
.page .sec-kua-03 .wrap-title .title-h3 {
font-size: 24px;
}
}
.page .sec-kua-03 .wrap-title .title-h3 {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 10px;
padding-bottom: 10px;
border-bottom: solid 1px #111;
}
@media screen and (max-width: 600px) {
.page .sec-kua-03 .wrap-title .title-h3 {
font-size: 18px;
}
}
.page .sec-kua-03 .wrap-map {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1.6/0.8;
margin: 0 auto 30px;
max-width: 1200px;
border: solid 1px #333;
}
@media screen and (max-width: 600px) {
.page .sec-kua-03 .wrap-map {
aspect-ratio: 1/1;
}
}
.page .sec-kua-03 .wrap-map iframe {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.page .wrap-map-img {
max-width: 600px;
margin: 0 auto 50px;
}
.page .wrap-map-img img {
height: auto;
border-radius: 10px;
}
.page .wrap-parking {
gap: 30px;
align-items: flex-start;
margin: 0 auto 100px;
max-width: 1000px;
}
@media screen and (max-width: 600px) {
.page .wrap-parking {
flex-direction: column;
gap: 20px;
margin-bottom: 50px;
}
}
.page .wrap-parking .col-1 {
width: 70%;
}
@media screen and (max-width: 600px) {
.page .wrap-parking .col-1 {
width: 100%;
}
}
.page .wrap-parking .col-1 .map-img {
display: block;
border-radius: 10px;
margin-top: 30px;
}
.page .wrap-parking .col-2 {
width: 30%;
background-color: #fff;
border-radius: 10px;
padding: 20px;
}
@media screen and (max-width: 600px) {
.page .wrap-parking .col-2 {
width: 100%;
}
}
.page .wrap-parking .col-2 .txt-1 {
font-size: 20px;
}
@media screen and (max-width: 600px) {
.page .wrap-parking .col-2 .txt-1 {
font-size: 18px;
}
}
.page .wrap-parking .col-2 .txt-1 {
font-weight: bold;
color: #e50213;
display: block;
margin-bottom: 10px;
}
.page .wrap-parking .col-2 .txt-2 {
display: block;
}
.page .wrap-parking .col-2 .txt-3 {
font-size: smaller;
display: block;
color: #666;
margin-bottom: 10px;
}
.page .wrap-parking .col-2 .txt-4 {
color: #fff;
background-color: #e50213;
padding: 4px;
display: block;
width: -moz-fit-content;
width: fit-content;
font-size: 14px;
}
@media screen and (max-width: 600px) {
.page .wrap-parking .col-2 .txt-4 {
font-size: 12px;
}
}
.wrap-entrance {
max-width: 1000px;
margin: 0 auto 100px;
padding-top: 50px;
}
@media screen and (max-width: 600px) {
.wrap-entrance {
margin: 0 auto 50px;
padding-top: 0px;
}
}
.wrap-entrance li {
position: relative;
margin-bottom: 30px;
}
.wrap-entrance li .img-entrance {
width: 50%;
display: block;
}
.wrap-entrance li .img-entrance.img-entrance-2 {
margin: 0 0 0 auto;
}
.wrap-entrance li .arrow-gr {
position: absolute;
max-width: 80px;
bottom: -40px;
z-index: 3;
}
@media screen and (max-width: 600px) {
.wrap-entrance li .arrow-gr {
max-width: 40px;
}
}
.wrap-entrance li .fukidashi {
position: absolute;
z-index: 3;
filter: drop-shadow(0 0 2px #999);
top: 10px;
}
.wrap-entrance li .fukidashi.fukidashi-1 {
max-width: 300px;
left: 45%;
}
@media screen and (max-width: 834px) {
.wrap-entrance li .fukidashi.fukidashi-1 {
max-width: 250px;
}
}
@media screen and (max-width: 600px) {
.wrap-entrance li .fukidashi.fukidashi-1 {
max-width: 150px;
}
}
.wrap-entrance li .fukidashi.fukidashi-2 {
max-width: 150px;
right: 45%;
}
@media screen and (max-width: 834px) {
.wrap-entrance li .fukidashi.fukidashi-2 {
max-width: 130px;
}
}
@media screen and (max-width: 600px) {
.wrap-entrance li .fukidashi.fukidashi-2 {
max-width: 80px;
}
}
.wrap-entrance li .fukidashi.fukidashi-3 {
max-width: 180px;
left: 45%;
}
@media screen and (max-width: 834px) {
.wrap-entrance li .fukidashi.fukidashi-3 {
max-width: 150px;
}
}
@media screen and (max-width: 600px) {
.wrap-entrance li .fukidashi.fukidashi-3 {
max-width: 90px;
}
}
.wrap-entrance li:nth-of-type(1) .arrow-gr {
left: 50%;
transform: translateX(50px);
}
@media screen and (max-width: 600px) {
.wrap-entrance li:nth-of-type(1) .arrow-gr {
left: 40%;
}
}
.wrap-entrance li:nth-of-type(2) .arrow-gr {
right: 50%;
transform: rotateY(180deg) translateX(50px);
}
@media screen and (max-width: 600px) {
.wrap-entrance li:nth-of-type(2) .arrow-gr {
right: 40%;
}
}
.wrap-entrance .bt-blue {
margin-top: 80px !important;
}
.wrap-info {
background-color: #fff;
max-width: 1000px;
margin: 0 auto;
border-top: solid 1px #111;
border-bottom: solid 1px #111;
padding: 20px;
position: relative;
}
.wrap-info .title {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.wrap-info .title {
font-size: 16px;
}
}
.wrap-info .title {
color: #999;
position: absolute;
top: 10px;
left: 20px;
letter-spacing: 3px;
}
@media screen and (max-width: 600px) {
.wrap-info .title {
font-size: 11px;
}
}
@media screen and (max-width: 600px) {
.wrap-info .wrap-flex {
flex-direction: column;
}
}
.wrap-info .wrap-flex .col {
padding: 50px 50px 0;
}
.wrap-info .wrap-flex .col.col-1 span {
display: block;
text-align: center;
}
.wrap-info .wrap-flex .col.col-1 span.name {
font-size: 24px;
}
@media screen and (max-width: 600px) {
.wrap-info .wrap-flex .col.col-1 span.name {
font-size: 20px;
}
}
.wrap-info .wrap-flex .col.col-1 span.name {
margin-bottom: 10px;
font-weight: bold;
}
.wrap-info .wrap-flex .col.col-1 span.en {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.wrap-info .wrap-flex .col.col-1 span.en {
font-size: 14px;
}
}
.wrap-info .wrap-flex .col.col-1 span.en {
letter-spacing: 2px;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.wrap-info .wrap-flex .col {
width: 100%;
padding: 30px 0 0;
}
}
.wrap-info .bt {
font-size: 14px;
}
@media screen and (max-width: 600px) {
.wrap-info .bt {
font-size: 12px;
}
}
.wrap-info .bt {
font-weight: bold;
padding: 5px 50px;
border: solid 1px #111;
border-radius: 100px;
margin: 0 auto;
color: #111;
position: relative;
transition: 0.4s;
letter-spacing: 1px;
width: -moz-fit-content;
width: fit-content;
display: block;
}
.wrap-info .bt .arrow {
width: 10px;
transform: rotate(90deg);
position: absolute;
top: calc(50% - 5px);
right: 10px;
transition: 0.4s;
}
@media (hover: hover) {
.wrap-info .bt:hover {
background-color: #736357;
color: #fff;
}
.wrap-info .bt:hover .arrow {
fill: #fff;
}
}
.wrap-faq {
max-width: 1000px;
padding: 50px;
margin: 0 auto 100px;
background-color: #fff;
border-radius: 10px;
}
@media screen and (max-width: 600px) {
.wrap-faq {
padding: 30px 20px;
margin-bottom: 50px;
}
}
.wrap-faq .dl-faq dt {
font-weight: bold;
margin-bottom: 20px;
display: flex;
gap: 10px;
align-items: center;
position: relative;
cursor: pointer;
padding-right: 20px;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dt {
margin-bottom: 15px;
}
}
.wrap-faq .dl-faq dt p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dt p {
font-size: 16px;
}
}
.wrap-faq .dl-faq dt p {
width: calc(100% - 50px);
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dt p {
width: calc(100% - 40px);
font-size: 14px;
}
}
.wrap-faq .dl-faq dt::before {
content: "Q";
display: flex;
justify-content: center;
align-items: center;
background-color: #4b7a66;
color: #fff;
aspect-ratio: 1/1;
width: 40px;
border-radius: 100px;
text-align: center;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dt::before {
width: 30px;
}
}
.wrap-faq .dl-faq dt .plus {
position: absolute;
right: 0px;
top: calc(50% - 7px);
width: 14px;
height: 14px;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dt .plus {
right: -5px;
width: 10px;
height: 10px;
}
}
.wrap-faq .dl-faq dt .plus::before {
content: "";
width: 100%;
height: 2px;
background-color: #4b7a66;
display: block;
position: absolute;
top: 7px;
left: 0;
transition: 0.2s;
}
.wrap-faq .dl-faq dt .plus::after {
content: "";
width: 100%;
height: 2px;
background-color: #4b7a66;
display: block;
position: absolute;
top: 7px;
left: 0;
transform: rotate(90deg);
transition: 0.2s;
}
.wrap-faq .dl-faq dt.on .plus::after {
transform: rotate(0deg);
}
.wrap-faq .dl-faq dd {
margin-bottom: 30px;
display: flex;
gap: 10px;
align-items: flex-start;
padding-right: 20px;
}
.wrap-faq .dl-faq dd p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dd p {
font-size: 16px;
}
}
.wrap-faq .dl-faq dd p {
width: calc(100% - 50px);
line-height: 1.8;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dd p {
width: calc(100% - 40px);
font-size: 14px;
}
}
.wrap-faq .dl-faq dd::before {
content: "A";
display: flex;
justify-content: center;
align-items: center;
background-color: #c00;
color: #fff;
aspect-ratio: 1/1;
width: 40px;
border-radius: 100px;
text-align: center;
}
@media screen and (max-width: 600px) {
.wrap-faq .dl-faq dd::before {
width: 30px;
}
}
.wrap-ft-info {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
.wrap-ft-info .address {
display: flex;
gap: 10px;
margin-bottom: 1em;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.wrap-ft-info .address {
font-size: 18px;
}
}
.wrap-ft-info .address {
font-weight: bold;
align-items: center;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.wrap-ft-info .address {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.wrap-ft-info .address {
font-size: 16px;
}
}
.wrap-ft-info .address::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 30px;
height: 30px;
}
.wrap-ft-info .tel {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 1em;
font-size: 24px;
}
@media screen and (max-width: 600px) {
.wrap-ft-info .tel {
font-size: 20px;
}
}
.wrap-ft-info .tel {
font-weight: bold;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.wrap-ft-info .tel {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.wrap-ft-info .tel {
font-size: 18px;
}
}
.wrap-ft-info .tel::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 30px;
height: 30px;
}
.wrap-ft-info .time {
font-size: 24px;
}
@media screen and (max-width: 600px) {
.wrap-ft-info .time {
font-size: 20px;
}
}
.wrap-ft-info .time {
font-weight: bold;
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 2em;
font-weight: bold;
flex-wrap: wrap;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.wrap-ft-info .time {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
.wrap-ft-info .time {
font-size: 16px;
}
}
.wrap-ft-info .time .font-s {
font-weight: normal;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.wrap-ft-info .time .font-s {
font-size: 14px;
}
}
.wrap-ft-info .time .red {
display: block;
flex-basis: 100%;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.wrap-ft-info .time .red {
font-size: 14px;
}
}
.wrap-ft-info .time .red {
padding-left: 40px;
}
.wrap-ft-info .time::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 30px;
height: 28px;
}
.sec-kua-04 .wrap-bns {
display: flex;
gap: 50px;
max-width: 1200px;
margin: 0 auto 50px;
justify-content: center;
}
@media screen and (max-width: 834px) {
.sec-kua-04 .wrap-bns {
gap: 20px;
}
}
@media screen and (max-width: 600px) {
.sec-kua-04 .wrap-bns {
gap: 20px;
margin-bottom: 30px;
flex-direction: column;
}
}
.sec-kua-04 .wrap-bns .col {
width: calc(33.3333333333% - 33.3333333333px);
}
@media screen and (max-width: 834px) {
.sec-kua-04 .wrap-bns .col {
width: calc(33.3333333333% - 13.3333333333px);
}
}
@media screen and (max-width: 600px) {
.sec-kua-04 .wrap-bns .col {
width: 100%;
}
}
.sec-kua-04 .wrap-bns .col .wrap-img {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 3px #999;
}
@media screen and (max-width: 834px) {
.sec-kua-04 .wrap-bns .col .wrap-img {
border-radius: 6px;
}
}
.sec-kua-04 .wrap-bns .col .wrap-img img {
width: 100%;
height: auto;
display: block;
transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(1.08);
}
@media screen and (max-width: 834px) {
.sec-kua-04 .wrap-bns .col .wrap-img img {
transform: scale(1);
}
}
@media screen and (max-width: 600px) {
.sec-kua-04 .wrap-bns .col .wrap-img img {
-o-object-fit: cover;
object-fit: cover;
}
}
.sec-kua-04 .wrap-bns .col .name {
color: #111;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 10px;
}
@media screen and (max-width: 600px) {
.sec-kua-04 .wrap-bns .col .name {
margin-top: 10px;
font-size: 14px;
text-align: center;
}
}
.sec-kua-04 .wrap-bns .col .name br {
display: none;
}
.sec-kua-04 .wrap-bns .col .name img {
width: 10px;
height: auto;
}
@media (hover: hover) {
.sec-kua-04 .wrap-bns .col a:hover .wrap-img img {
transform: scale(1);
}
}
.kua-nav {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
transition: 0.4s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.kua-nav.on {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.kua-nav .in {
background-color: #fff;
width: 100%;
height: 100%;
display: flex;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.kua-nav .in {
flex-direction: column;
}
}
@media screen and (max-width: 600px) {
.kua-nav .in {
overflow-y: auto;
display: block;
}
}
@media screen and (max-width: 834px) {
.kua-nav .wrap-img {
display: none;
}
}
.kua-nav .wrap-txt {
padding: 30px 0px;
}
@media screen and (max-width: 834px) {
.kua-nav .wrap-txt {
padding: 0 0 100px;
}
}
@media screen and (max-width: 600px) {
.kua-nav .wrap-txt {
padding: 30px 0;
}
}
.kua-nav .col-1 {
width: 100%;
margin-bottom: 50px;
padding: 30px 30px 0;
}
.kua-nav .col-1 .wrap-name {
margin-bottom: 30px;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-1 .wrap-name {
font-size: 18px;
}
}
.kua-nav .col-1 .wrap-name {
color: #016934;
letter-spacing: 0px;
font-weight: bold;
}
.kua-nav .col-1 .wrap-name .sub {
font-size: smaller;
display: block;
}
.kua-nav .col-1 .wrap-name .en {
display: block;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-1 .wrap-name .en {
font-size: 14px;
}
}
.kua-nav .col-1 .wrap-name .en {
color: #999;
margin-left: 3px;
}
.kua-nav .col-1 .wrap-name.shirasagi {
color: #604c3f;
font-size: 24px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-1 .wrap-name.shirasagi {
font-size: 20px;
}
}
.kua-nav .col-2 {
width: 100%;
padding: 0 0 20px;
}
.kua-nav .col-2 .ft-menu2 {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
gap: 1px;
background-color: #fff;
}
.kua-nav .col-2 .ft-menu2 li {
width: calc(50% - 1px);
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.kua-nav .col-2 .ft-menu2 li {
width: calc(50% - 1px);
}
}
.kua-nav .col-2 .ft-menu2 li a {
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .ft-menu2 li a {
font-size: 14px;
}
}
.kua-nav .col-2 .ft-menu2 li a {
display: flex;
align-items: center;
gap: 10px;
background-color: #016934;
padding: 20px 20px;
height: 100%;
}
@media screen and (max-width: 1025px) {
.kua-nav .col-2 .ft-menu2 li a {
font-size: 14px;
}
}
@media screen and (max-width: 1025px) and (max-width: 600px) {
.kua-nav .col-2 .ft-menu2 li a {
font-size: 12px;
}
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .ft-menu2 li a {
padding: 15px;
font-size: 13px;
}
}
.kua-nav .col-2 .ft-menu2 li a::before {
content: "";
display: block;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 16px;
height: 16px;
}
.kua-nav .col-2 .ft-menu2.shirasagi a {
background-color: #604c3f;
}
.kua-nav .col-2 .wrap-group-onsen {
padding: 0 20px;
}
.kua-nav .col-2 .wrap-group-onsen .title {
font-weight: bold;
display: flex;
position: relative;
gap: 20px;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
}
.kua-nav .col-2 .wrap-group-onsen .title::before {
content: "";
display: block;
width: 50px;
height: 1px;
background-color: #111;
}
.kua-nav .col-2 .wrap-group-onsen .title::after {
content: "";
display: block;
width: 50px;
height: 1px;
background-color: #111;
}
.kua-nav .col-2 .wrap-group-onsen ul {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .wrap-group-onsen ul {
gap: 10px;
}
}
.kua-nav .col-2 .wrap-group-onsen li {
margin-bottom: 10px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .wrap-group-onsen li {
width: 50%;
}
}
.kua-nav .col-2 .wrap-group-onsen li a {
color: #111;
background-color: #eae4d0;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .wrap-group-onsen li a {
font-size: 14px;
}
}
.kua-nav .col-2 .wrap-group-onsen li a {
display: flex;
align-items: center;
width: -moz-fit-content;
width: fit-content;
height: 80px;
padding: 0px 50px;
border-radius: 6px;
border: solid 1px #111;
gap: 5px;
}
@media screen and (max-width: 600px) {
.kua-nav .col-2 .wrap-group-onsen li a {
height: 60px;
padding: 20px 20px;
width: 100%;
}
}
.kua-nav .col-2 .wrap-group-onsen li a::after {
content: "";
display: block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23111111' d='M96,0v416h416V0H96z M472,376H136V40h336V376z'/%3E%3Cpolygon fill='%23111111' points='40,472 40,296 40,136 40,96 0,96 0,512 416,512 416,472 376,472'/%3E%3Cpolygon fill='%23111111' points='232.812,312.829 350.671,194.969 350.671,279.766 390.671,279.766 390.671,126.688 237.594,126.688 237.594,166.688 322.39,166.688 204.531,284.547'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
overflow: auto;
z-index: 99999;
background-color: rgb(234, 228, 208);
opacity: 0;
visibility: hidden;
transition: 0s;
}
.popup.on {
opacity: 1;
visibility: visible;
transition: 0.2s;
}
.popup .container {
width: 100%;
max-width: 1000px;
margin: 50px auto 30px;
background-color: #fff;
padding: 50px 100px;
border-radius: 20px;
position: relative;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
.popup .container {
padding: 30px;
margin: 30px;
width: calc(100% - 60px);
}
}
@media screen and (max-width: 600px) {
.popup .container {
padding: 30px 20px;
margin: 15px;
width: calc(100% - 30px);
}
}
.popup .title-h3 {
text-align: center;
border: none;
color: #111;
margin-bottom: 30px;
font-weight: bold;
font-size: 30px;
}
@media screen and (max-width: 600px) {
.popup .title-h3 {
font-size: 24px;
}
}
@media screen and (max-width: 600px) {
.popup .title-h3 {
margin-bottom: 20px;
font-size: 18px;
}
}
.popup .title-h3 .sub {
display: block;
font-size: smaller;
margin-bottom: 5px;
}
.popup .wrap-desc {
margin: 50px 30px;
}
@media screen and (max-width: 600px) {
.popup .wrap-desc {
margin: 20px 0;
}
}
.popup .wrap-desc p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.popup .wrap-desc p {
font-size: 16px;
}
}
.popup .wrap-desc p {
line-height: 1.6;
margin-bottom: 1em;
}
.popup .wrap-desc .red {
font-weight: bold;
line-height: 2;
display: block;
margin: 20px 10px 0;
}
.popup .pop-close {
font-weight: bold;
color: #111;
text-align: center;
margin: 0 auto 50px;
cursor: pointer;
width: -moz-fit-content;
width: fit-content;
display: flex;
gap: 5px;
align-items: center;
}
.popup .pop-close .icon-close {
display: block;
width: 20px;
height: 20px;
background-color: #111;
border-radius: 100px;
position: relative;
}
.popup .pop-close .icon-close::before {
content: "";
display: block;
width: 10px;
height: 1px;
background-color: #fff;
position: absolute;
top: calc(50% - 0.5px);
left: calc(50% - 5px);
transform: rotate(45deg);
}
.popup .pop-close .icon-close::after {
content: "";
display: block;
width: 10px;
height: 1px;
background-color: #fff;
position: absolute;
top: calc(50% - 0.5px);
left: calc(50% - 5px);
transform: rotate(-45deg);
}
.popup .bt-close {
display: block;
width: 60px;
height: 60px;
background-color: #111;
border-radius: 100px;
position: absolute;
top: -20px;
right: -20px;
z-index: 3;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.popup .bt-close {
transform: scale(0.8);
top: -10px;
right: -15px;
}
}
.popup .bt-close::before {
content: "";
display: block;
width: 20px;
height: 1.5px;
background-color: #fff;
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 10px);
transform: rotate(45deg);
}
.popup .bt-close::after {
content: "";
display: block;
width: 20px;
height: 1.5px;
background-color: #fff;
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 10px);
transform: rotate(-45deg);
}
.popup .desc {
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.popup .desc {
margin-bottom: 30px;
}
}
.popup .wrap-flex {
gap: 50px;
margin-bottom: 50px;
}
@media screen and (max-width: 600px) {
.popup .wrap-flex {
flex-direction: column;
gap: 30px;
}
}
.popup .wrap-flex .col {
text-align: center;
}
@media screen and (max-width: 600px) {
.popup .wrap-flex .col {
width: 100%;
transition-delay: 0;
}
}
.popup .wrap-flex img {
border-radius: 10px;
margin-bottom: 20px;
height: auto;
}
.popup .wrap-flex .name {
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 600px) {
.popup .wrap-flex .name {
font-size: 16px;
}
}
.popup .wrap-flex .name {
margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
.popup .wrap-flex .name {
margin-bottom: 5px;
}
}
.popup .wrap-flex .font-s {
display: block;
margin: 0 auto 20px;
text-align: center;
}
.popup .wrap-table {
max-width: 1000px;
margin: 0 auto;
}
.popup .title-h4 {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.popup .title-h4 {
font-size: 14px;
}
}
.popup .title-h4 {
display: flex;
gap: 5px;
margin-bottom: 20px;
align-items: center;
}
.popup .title-h4::before {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #111;
border-radius: 3px;
}
.popup .cover-img {
display: block;
width: 100%;
margin-bottom: 30px;
border-radius: 10px;
}
.popup .table-1 {
width: 100%;
background-color: #016934;
border-spacing: 0;
border: solid 2px #016934;
border-radius: 10px;
overflow: hidden;
}
.popup .table-1 tr:last-child th,
.popup .table-1 tr:last-child td {
border-bottom: none;
}
.popup .table-1 th {
background-color: #016934;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.popup .table-1 th {
font-size: 14px;
}
}
.popup .table-1 th {
text-align: center;
padding: 40px 20px;
width: 30%;
white-space: nowrap;
border-bottom: solid 2px #fff;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.popup .table-1 th {
display: block;
border: none;
padding: 10px 20px;
}
}
.popup .table-1 th .font-s {
display: block;
margin-top: 10px;
font-size: smaller;
}
.popup .table-1 td {
background-color: #fff;
font-size: 24px;
}
@media screen and (max-width: 600px) {
.popup .table-1 td {
font-size: 20px;
}
}
.popup .table-1 td {
font-weight: bold;
text-align: left;
padding: 40px 50px;
width: 100%;
border-bottom: solid 2px #016934;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.popup .table-1 td {
padding: 20px;
display: block;
border: none;
}
}
.popup .table-1 td .font-s {
font-size: 14px;
}
@media screen and (max-width: 600px) {
.popup .table-1 td .font-s {
font-size: 12px;
}
}
.popup .table-1.col-2 th {
width: 25%;
padding: 30px 20px;
}
@media screen and (max-width: 600px) {
.popup .table-1.col-2 th {
width: 100%;
padding: 10px 20px;
}
}
.popup .table-1.col-2 td {
width: 25%;
padding: 30px 20px;
}
@media screen and (max-width: 600px) {
.popup .table-1.col-2 td {
width: 100%;
padding: 20px;
}
}
.popup .table-2 {
width: 100%;
background-color: #016934;
border-spacing: 0;
border: solid 2px #016934;
border-radius: 10px;
overflow: hidden;
margin-bottom: 15px;
}
.popup .table-2 tr:last-child th,
.popup .table-2 tr:last-child td {
border-bottom: none;
}
.popup .table-2 th {
display: flex;
align-items: center;
gap: 10px;
background-color: #016934;
color: #fff;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.popup .table-2 th {
font-size: 14px;
}
}
.popup .table-2 th {
text-align: left;
padding: 20px 50px;
width: 100%;
border-bottom: solid 2px #fff;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.popup .table-2 th {
padding: 20px;
}
}
.popup .table-2 th::before {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 3px;
}
.popup .table-2 th .font-s {
display: block;
margin-top: 10px;
font-size: smaller;
}
.popup .table-2 td {
display: block;
background-color: #fff;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.popup .table-2 td {
font-size: 14px;
}
}
.popup .table-2 td {
text-align: left;
padding: 20px 50px;
width: 100%;
border-bottom: solid 2px #016934;
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.popup .table-2 td {
padding: 20px;
}
}
.popup .table-2 td .base-price {
text-decoration: line-through;
}
@media screen and (max-width: 600px) {
.popup .table-2 td .base-price {
display: block;
margin-bottom: 10px;
}
}
.popup .table-2 td .red {
font-weight: bold;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.popup .table-2 td .red {
font-size: 18px;
}
}
.popup .table-2 td .font-s {
font-size: 14px;
}
@media screen and (max-width: 600px) {
.popup .table-2 td .font-s {
font-size: 12px;
}
}
@media screen and (max-width: 600px) {
.popup .table-2 td .font-s {
display: block;
margin-top: 10px;
}
}
.popup .table-2 td .arrow {
display: inline-block;
width: 24px;
transform: rotate(-180deg);
vertical-align: middle;
margin: 0 10px;
}
.popup .sec-info .table-1 {
margin-bottom: 50px;
}
.popup .sec-info .table-1 td {
font-size: 16px;
}
@media screen and (max-width: 600px) {
.popup .sec-info .table-1 td {
font-size: 14px;
}
}
.popup .sec-info .wrap-stairs {
margin-bottom: 20px;
display: flex;
gap: 30px;
align-items: center;
}
@media screen and (max-width: 600px) {
.popup .sec-info .wrap-stairs {
flex-direction: column;
}
}
.popup .sec-info .wrap-stairs .col-1 {
width: 30%;
background-color: #eae4d0;
border-radius: 10px;
border: solid 1px #ddd;
white-space: nowrap;
}
@media screen and (max-width: 600px) {
.popup .sec-info .wrap-stairs .col-1 {
width: 100%;
}
}
.popup .sec-info .wrap-stairs .col-1 div {
font-size: 20px;
}
@media screen and (max-width: 600px) {
.popup .sec-info .wrap-stairs .col-1 div {
font-size: 18px;
}
}
.popup .sec-info .wrap-stairs .col-1 div {
border-bottom: solid 1px #111;
}
.popup .sec-info .wrap-stairs .col-1 div:last-child {
border-bottom: none;
}
.popup .sec-info .wrap-stairs .col-1 div {
padding: 20px;
font-weight: bold;
}
.popup .sec-info .wrap-stairs .col-1 div .icon {
margin-right: 10px;
}
.popup .sec-info .wrap-stairs .col-2 {
width: 70%;
}
@media screen and (max-width: 600px) {
.popup .sec-info .wrap-stairs .col-2 {
width: 100%;
}
}
.popup .sec-info .wrap-stairs .col-2 p {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.popup .sec-info .wrap-stairs .col-2 p {
font-size: 16px;
}
}
.popup .wrap-towls {
display: flex;
gap: 10px;
margin: 20px 0 30px;
align-items: center;
}
.popup .wrap-towls span {
display: block;
font-size: 20px;
}
@media screen and (max-width: 600px) {
.popup .wrap-towls span {
font-size: 18px;
}
}
.popup .wrap-towls span {
font-weight: bold;
}
.popup .wrap-towls span.txt-1 {
font-size: 18px;
}
@media screen and (max-width: 600px) {
.popup .wrap-towls span.txt-1 {
font-size: 16px;
}
}
.popup .wrap-towls span.txt-2 {
margin-right: 10px;
}
.popup .shirasagi .table-1 {
background-color: #604c3f;
border: solid 2px #604c3f;
}
.popup .shirasagi .table-1 th {
background-color: #604c3f;
}
.popup .shirasagi .table-1 td {
border-bottom: solid 2px #604c3f;
}
.popup .shirasagi .table-2 {
background-color: #604c3f;
border: solid 2px #604c3f;
}
.popup .shirasagi .table-2 th {
background-color: #604c3f;
}
.popup .shirasagi .table-2 td {
border-bottom: solid 2px #604c3f;
}
.about-shirasagi {
background-color: #f8f8d4;
padding: 50px 50px 100px;
border-radius: 10px;
margin: 0 auto 50px;
background-image: url("../images/shirasagi/sagi.svg");
background-repeat: no-repeat;
background-size: 45% auto;
background-position: right bottom;
box-shadow: 0 0 4px #999;
}
@media screen and (max-width: 600px) {
.about-shirasagi {
padding: 30px 20px 30px;
background-size: 80% auto;
}
}
.about-shirasagi .wrap-title {
border-top: solid 1px #333;
border-bottom: solid 1px #333;
padding: 60px 30px 30px;
text-align: center;
position: relative;
margin-bottom: 80px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title {
margin-bottom: 40px;
padding: 40px 30px 30px;
}
}
.about-shirasagi .wrap-title .ja {
font-size: 40px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title .ja {
font-size: 30px;
}
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title .ja {
font-size: 24px;
}
}
.about-shirasagi .wrap-title .en {
color: #999;
font-size: 24px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title .en {
font-size: 20px;
}
}
.about-shirasagi .wrap-title .en {
position: absolute;
top: 30px;
left: 0;
text-align: center;
width: 100%;
font-weight: normal;
letter-spacing: 2px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title .en {
font-size: 14px;
top: 15px;
}
}
.about-shirasagi .wrap-title .img-oke {
position: absolute;
top: 30px;
right: 0;
max-width: 150px;
height: auto;
}
@media screen and (max-width: 600px) {
.about-shirasagi .wrap-title .img-oke {
max-width: 80px;
top: 80px;
right: -20px;
}
}
.about-shirasagi .list-about {
display: block;
padding: 0 20px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .list-about {
padding: 0;
}
}
.about-shirasagi .list-about li {
padding-left: 50px;
margin-bottom: 2em;
position: relative;
font-size: 18px;
}
@media screen and (max-width: 600px) {
.about-shirasagi .list-about li {
font-size: 16px;
}
}
.about-shirasagi .list-about li {
line-height: 1.6;
}
@media screen and (max-width: 600px) {
.about-shirasagi .list-about li {
font-size: 14px;
}
}
.about-shirasagi .list-about li::before {
content: "";
background-image: url("../images/common/icon-onsen-bk.svg");
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-size: contain;
display: block;
position: absolute;
top: 0;
left: 0;
}
.about-shirasagi .list-about li .red {
font-weight: bold;
}
.about-shirasagi .list-about li:last-child {
margin-bottom: 0;
}
.about-shirasagi .list-about li .link-2 {
margin-top: 20px;
}
.about-shirasagi .list-about li .link-2:hover {
color: #0071bc;
}
.wrap-venus {
display: flex;
margin-top: 100px;
background-color: #604c3f;
padding: 30px;
border-radius: 10px;
}
@media screen and (max-width: 600px) {
.wrap-venus {
flex-direction: column;
padding: 20px;
margin-top: 50px;
}
}
.wrap-venus .col-1 {
width: 60%;
}
@media screen and (max-width: 600px) {
.wrap-venus .col-1 {
width: 100%;
}
}
.wrap-venus .col-1 img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
.wrap-venus .col-2 {
width: 40%;
padding-left: 30px;
color: #fff;
padding-top: 40px;
}
@media screen and (max-width: 600px) {
.wrap-venus .col-2 {
width: 100%;
padding-left: 0;
padding-top: 20px;
}
}
.wrap-venus .col-2 h4 {
font-size: 24px;
}
@media screen and (max-width: 600px) {
.wrap-venus .col-2 h4 {
font-size: 20px;
}
}
.wrap-venus .col-2 h4 {
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.wrap-venus .col-2 h4 {
margin-bottom: 20px;
}
}
.wrap-venus .col-2 .desc {
line-height: 1.8;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.wrap-venus .col-2 .desc {
font-size: 14px;
}
}
.wrap-venus .col-2 .note {
font-size: smaller;
display: block;
margin-top: 20px;
}
.visible {
opacity: 1;
transition: opacity 0.6s;
}
.invisible {
opacity: 0;
}
.fromTopIn {
transform: translate(0, 0);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
@media screen and (max-width: 600px) {
.fromTopIn {
transition: opacity 0.6s, transform 0.6s;
}
}
.fromTopOut {
transform: translate(0, -10px);
opacity: 0;
}
.fromBottomIn {
transform: translate(0, 0);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
@media screen and (max-width: 600px) {
.fromBottomIn {
transition: opacity 0.6s, transform 0.6s;
}
}
.fromBottomOut {
transform: translate(0, 10px);
opacity: 0;
}
.fromLeftIn {
transform: translate(0, 0);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
.fromLeftOut {
transform: translate(-10px, 0);
opacity: 0;
}
.fromRightIn {
transform: translate(0, 0);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
.fromRightOut {
transform: translate(10px, 0);
opacity: 0;
}
.scaleUpIn {
transform: scale(1, 1);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
@media screen and (max-width: 600px) {
.scaleUpIn {
transition: opacity 0.6s, transform 0.6s;
}
}
.scaleUpOut {
transform: scale(1.05, 1.05);
opacity: 0;
}
.scaleDownIn {
transform: scale(1, 1);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
@media screen and (max-width: 600px) {
.scaleDownIn {
transition: opacity 0.6s, transform 0.6s;
}
}
.scaleDownOut {
transform: scale(0.9, 0.9);
opacity: 0;
}
.rotateIn {
transform: rotate(0deg) scale(1);
opacity: 1;
transition: opacity 0.6s, transform 0.6s;
}
.rotateOut {
transform: rotate(30deg) scale(0.9);
opacity: 0;
}
.delay1 {
transition-delay: 0.1s;
}
.delay2 {
transition-delay: 0.2s;
}
.delay3 {
transition-delay: 0.3s;
}
.delay4 {
transition-delay: 0.4s;
}
.delay5 {
transition-delay: 0.5s;
}
.delay6 {
transition-delay: 0.4s;
}
.delay7 {
transition-delay: 0.7s;
}
.delay8 {
transition-delay: 0.8s;
}
.delay9 {
transition-delay: 0.9s;
}
.delay10 {
transition-delay: 1s;
}
.speed1 {
transition-duration: 0.1s;
}
.speed2 {
transition-duration: 0.2s;
}
.speed3 {
transition-duration: 0.3s;
}
.speed4 {
transition-duration: 0.4s;
}
.speed5 {
transition-duration: 0.5s;
}
.speed6 {
transition-duration: 0.6s;
}
.speed7 {
transition-duration: 0.7s;
}
.speed8 {
transition-duration: 0.8s;
}
.speed9 {
transition-duration: 0.9s;
}
.speed10 {
transition-duration: 1s;
}
.slick {
overflow: hidden;
width: 100%;
position: relative;
margin-bottom: 30px;
border-radius: 10px;
background-color: #fff;
}
@media screen and (max-height: 800px) and (orientation: landscape) {
.slick {
max-width: 800px;
margin: 0 auto 30px;
}
}
@media screen and (max-width: 600px) {
.slick {
overflow: visible;
padding-bottom: 30px;
background-color: transparent;
}
}
.slick .slick-slide {
display: inline-block;
vertical-align: middle;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 600px) {
.slick .slick-slide {
border-radius: 10px;
border-radius: 5px;
overflow: hidden;
}
}
.slick .slick-slide img {
width: 100%;
height: auto;
max-width: 100%;
height: calc(100vh - 200px);
display: block;
margin: 0 auto;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
@media screen and (max-height: 800px) and (orientation: landscape) {
.slick .slick-slide img {
height: calc(100vh - 120px);
}
}
@media screen and (max-width: 1025px) and (max-width: 1024px) and (orientation: portrait) {
.slick .slick-slide img {
aspect-ratio: 1.6/1.2;
height: auto;
}
}
@media screen and (max-width: 834px) {
.slick .slick-slide img {
aspect-ratio: 1.6/1.2;
height: auto;
}
}
@media screen and (max-width: 600px) {
.slick .slick-slide img {
aspect-ratio: 1/1;
height: auto;
}
}
.slick .slick-slide img.tate {
width: auto;
}
.slick .slick-slide .cap {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
color: #eee;
background-color: rgba(0, 0, 0, 0.8);
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
@media screen and (max-width: 600px) {
.slick .slick-slide .cap {
font-size: 12px;
}
}
.slick .slick-slide .cap {
text-align: center;
}
@media screen and (max-width: 500px) and (orientation: portrait) {
.slick .slick-slide .cap {
font-size: 12px !important;
-webkit-text-size-adjust: 100%;
}
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
ul.thumb {
overflow: hidden;
position: relative;
}
@media screen and (max-width: 500px) and (orientation: portrait) {
ul.thumb {
display: none;
}
}
ul.thumb li.slick-slide {
margin-right: 5px;
position: relative;
cursor: pointer;
background-color: #000;
display: inline-block;
border-radius: 6px;
overflow: hidden;
}
@media screen and (max-width: 600px) {
ul.thumb li.slick-slide {
margin-right: 3px;
margin-bottom: 3px;
}
}
ul.thumb li.slick-slide img {
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
opacity: 0.4;
display: block;
}
ul.thumb li.slick-slide.slick-current img {
opacity: 1;
}
ul.thumb .slick-track {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: -moz-fit-content !important;
width: fit-content !important;
}
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
@media screen and (max-width: 500px) and (orientation: portrait) {
.slick-arrow {
top: calc(50% - 20px);
}
}
.ac-slide .slick-arrow {
top: calc(50% - 20px);
}
.slick-prev {
left: 10px;
}
@media screen and (max-width: 600px) {
.slick-prev {
left: -10px;
}
}
.slick-next {
right: 10px;
}
@media screen and (max-width: 600px) {
.slick-next {
right: -10px;
}
}
.fa-angle-left {
background-image: url(../images/kua/arrow-bk.svg);
width: 35px;
height: 35px;
display: block;
transform: rotate(-180deg);
background-size: cover;
opacity: 0.8;
}
@media (hover: hover) {
.fa-angle-left:hover {
opacity: 1;
}
}
@media screen and (max-width: 700px) {
.fa-angle-left {
width: 30px;
height: 30px;
}
}
.fa-angle-right {
background-image: url(../images/kua/arrow-bk.svg);
width: 35px;
height: 35px;
display: block;
transform: rotate(0deg);
background-size: cover;
opacity: 0.8;
}
@media (hover: hover) {
.fa-angle-right:hover {
opacity: 1;
}
}
@media screen and (max-width: 700px) {
.fa-angle-right {
width: 30px;
height: 30px;
}
}
.slick-dots {
text-align: center;
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
z-index: 5;
}
.slick-dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #ddd;
border-radius: 100%;
text-indent: -9999px;
cursor: pointer;
}
.slick-dots li.slick-active {
background-color: #016934;
}/*# sourceMappingURL=kua.css.map */