@charset "UTF-8";

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

html {
    font-size: 62.5%;
    line-height: 1.5;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    /*height: -webkit-fill-available;*/
  }
}

body {
    font-family: "リュウミン R-KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #3F3F3F;
    background: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    margin: 0;
    width: 100%;
    min-width: 320px;
    /*min-height: 100vh;*/
    overscroll-behavior-y: none;
}

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

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    outline: none;
    border: none;
    background: none;
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    cursor: pointer;
}

textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a {
    color: #333;
}

a {
    text-decoration: none;
    border: 0;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

a:hover,
button:hover {
    color: #aa0000;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
}

.c-title {
    font-feature-settings: "palt" 1;
    /*font-size: 3rem;*/
}
.c-title.-center,
.c-text.-center {
    text-align: center;
}
.c-title img {
    width: auto;
    height: 27px;
}
.c-text {
    font-feature-settings: "palt" 1;
    font-size: 1.3rem;
    line-height: 2.125;
    text-align: justify;
    text-justify: inter-ideograph;
    margin-top: 2em;
}
.c-text--small, .c-text--en {
    font-feature-settings: "palt" 1;
    font-size: 1.3rem;
    line-height: 2.125;
    margin-top: 2em;
}
.c-text--en {
    font-feature-settings: "palt" 1;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    margin-top: 2em;
}


.box {
    transition: opacity 2.2s, transform 1.8s;
    opacity: 0.1;
}
.box.-show {
    opacity: 1;
}
.box.-showup {
    transform: translateY(40px);
}
.box.-showup.-show {
    transform: translateY(0);
}

.arrow img {
    width: 100px;
    height: auto;
}

/* 上向き */
.arrow.-top img {
    height: 100px;
    width: auto;
}


.display--sp { display: block; }
.display--tb { display: none; }
.display--pc { display: none; }



/* タブレットのみ */
@media screen and (min-width:600px) and ( max-width: 959px) {
    .display--sp { display: none; }
    .display--tb { display: block; }
    .display--pc { display: none; }
}

/* ≦ PC */
@media (min-width: 960px) {
    .c-title {
        /*font-size: 4.8rem;*/
    }
    .c-title img {
        height: 35px;
    }
    .c-text {
        font-size: 1.5rem;
    }
    .c-text--small, .c-text--en {
        font-size: 1.4rem;
    }

    .display--sp { display: none; }
    .display--tb { display: none; }
    .display--pc { display: block; }
}

.header {
    z-index: 1;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 15px;
    background: rgb(0 0 0 / 65%);
    color: #fff;
}

.header .logo {
    /*font-size: 24px;*/
    font-weight: bold;
}

.header .logo img {
    height: 26px;
    width: auto;
}

#menu-toggle {
    z-index: 2;
    font-size: 24px;
    cursor: pointer;
    /*position: fixed ;*/
}

.menu {
    /*display: none;*/
    flex-direction: column;
    background: rgb(0 0 0 / 65%);
    width: 250px;
    height: 100vh;
    position: fixed;
    top: 66px;
    right: -250px;
    z-index: 1;
    padding: 32px;
    margin: 0;
    transition: transform 600ms ease-in-out;

}

.menu.-active {
    display: block;
    display: flex;
    transform: translate3d(-100%, 0, 0);
}

#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#menu li {
    margin: 10px;
}

#menu a {
    color: #fff;
    text-decoration: none;
}

.title.center {
    text-align: center;
}

#hero {
    z-index: 0;
    position: relative;


}

.hero-section__title {
    z-index: 1;
    position: absolute;
    top: 80%;
    right: 30px;

    width: 160px;
}


.hero-section__full {
    overflow: hidden;
    position: relative;
/*    height: 100vh;
    min-height: 300px;*/
    min-height: 100vh; /* Fallback */
    min-height: calc(var(--vh, 1vh) * 100);
}

.hero-section__full div {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}
.hero-section__full div img {
    object-fit: cover;
    height: 100%;
}
.hero-section__full .slick-dots {
    bottom: 4%;
    z-index: 100;
    position: absolute;
    width: 100%;
    text-align: center;
}
.hero-section__full .slick-dots li {
    display: inline-block;
    padding-left: 2.1%;
    padding-right: 2.1%;
}



@media (min-width: 600px) {

    .header {
        padding: 8px 8px 8px 30px;
    }

    .header .logo img {
        height: 36px;
    }

    .hero-section__title {
        top: 70%;
        right: 5%;
        width: 250px;
    }
}

/* PC */
@media (min-width: 960px) {

}



.l-container {
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;
}
.l-inner {
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
}
.l-full {
    margin-left: -30px;
    margin-right: -30px;
}


.concept-section, .place-section, .message-section {
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


/*.place-section {
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}*/

.concept-section__intro, .place-section__intro, .message-section__intro {
    width: 100%;
    margin-top: 1.4rem;
    padding-top: ;
}
.concept-section__image, .place-section__image, .message-section__image {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.concept-section__image img, .place-section__image img, .message-section__image img {
    box-shadow: 12px 12px 27px rgba(0, 0, 0, 0.16);
}
.place-section__imgbox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-row: repeat(2, 1fr);
    gap: 8px;
    padding: 30px 0;
}



/* ≦ Tablet */
@media (min-width: 600px) {
    .concept-section, .place-section, .message-section {
        padding-top: 60px;
    }
    .concept-section, .message-section {
        flex-direction: row-reverse;
    }
    .concept-section__intro, .message-section__intro {
        width: 48%;
        padding-left: 6.25%;
    }
    .place-section__intro {
        width: 48%;
        padding-right: 6.25%;
    }
    .concept-section__image, .place-section__image, .message-section__image {
        width: 52%;
    }
}

/* タブレットのみ */
@media screen and (min-width:600px) and ( max-width: 959px) {
    .place-section {
        display: grid;
        grid-template-columns: 48% 1fr;
    }
    .place-section__intro {
        width: 100%;
        grid-column: 1;
        grid-row: 1 / 3;
        padding-right: 12.25%;
    }
    .place-section__image {
        width: 100%;
        grid-column: 2 / 3;
    }
    .place-section__imgbox {
        width: 100%;
        grid-column: 2 / 3;
    }
}

/* ≦ PC */
@media (min-width: 960px) {
    .place-section__imgbox {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .concept-section__image img, .place-section__image img, .message-section__image img {
        box-shadow: 24px 24px 40px rgba(0, 0, 0, 0.16);
    }
    .place-section__imgbox {
        padding: 60px 0;
    }
}

@media (min-width: 1280px) {}


.rooms-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

.sauna-section {
    padding-top: 20px;
    padding-bottom: 40px;
}

.facility-section {
    padding-top: 40px;
}

.sauna-section__block {
    margin-top: 40px;
}

.facility-section__block {
    margin-top: 40px;
}

.section__headline {
    color: #666;
    display: flex;
    align-items: center;
}
.section__headline::before, .section__headline::after {
    content: "";
    display: inline-block;
    flex: 1 0 0%;
    /*margin-top: 0.2em;*/
    margin-top: 0.1em;
    height: 0;
    border-top: #ccc solid 1px;
}
.section__headline::before {
    margin-right: 40px;
}
.section__headline::after {
    margin-left: 40px;
}

/* ≦ Tablet */
@media (min-width: 600px) {
}

/* ≦ PC */
@media (min-width: 960px) {
    .rooms-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .sauna-section {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .facility-section {
        padding-top: 80px;
    }

    .sauna-section__block {
        margin-top: 50px;
    }

    .facility-section__block {
        margin-top: 50px;
    }
}

.rooms-slide {
    margin-top: 40px;
}

#guesthouseRooms {
    overflow: hidden;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
#guesthouseRooms > div {
    padding-left: 2.1%;
    padding-right: 2.1%;
}
.room {
    margin-left: 2.1%;
    margin-right: 2.1%;
}

.rooms-slide__nav {
    padding-top: 30px;
    padding-bottom: 10px;
}

.rooms-slide__nav ul {
    font-size: 0;
    text-align: center;
    padding: 0;
}
.rooms-slide__nav li {
    display: inline-block;
    padding-left: 2.1%;
    padding-right: 2.1%;
}
.rooms-slide__nav button,
.slick-dots button {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 3px;
    color: transparent;
    border: 0;
    outline: 0;
}
.rooms-slide__nav .slick-active button::before,
.slick-dots .slick-active button::before {
    background-color: #333;
}
.rooms-slide__nav button::before,
.slick-dots button::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    left: 0;
    width: 100%;
    height: 3px;
    line-height: 3px;
    background-color: #ccc;
    transition: background-color 600ms;
}

.rooms-slide__desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 900px;
    height: 8em;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
}

.rooms-slide__desc {
    position: relative;
}

.rooms-slide__desc span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 300ms;
}

.rooms-slide__desc span.-active {
    opacity: 1;
    position: static;
}

.room-map {
    position: relative;
    /*padding-top: 20px;*/
    padding-bottom: 30px;
}
.room-map::before {
    content: "";
    display: block;
    /*margin-bottom: 20px;*/
    width: 100%;
    height: 0;
    /*border-bottom: #ccc solid 1px;*/
}


.sauna-section__block {
/*    display: flex;
    flex-wrap: wrap;
    align-items: center;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    margin-left: -8px;
    margin-right: -8px;
}
.sauna-section .c-text {
    text-align: left;
}
.sauna-image--main {
    grid-column: 1 / 3;
}
.sauna-image {
    /*padding: 12px 4px;*/
}
.sauna-imgbox {
/*    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;*/
}
.sauna-section__block--text {
    padding-top: 20px;
}

@media (min-width: 600px) {
    .sauna-section__block {
/*        flex-wrap: nowrap;
        flex-direction: row-reverse;*/
        grid-template-columns: 2fr 1fr 1fr 1fr;
        justify-items: end;
    }
    .sauna-image--main {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .sauna-section .c-text {
        text-align: center;
    }
    .sauna-image {
        /*width: 40%;*/
    }
    .sauna-imgbox {
        /*width: 60%;*/
    }
}
@media (min-width: 960px) {
    .sauna-section__block--text {
        padding-top: 40px;
    }
}


.c-info__lang {
    margin-top: 20px;
    position: relative;
}
.c-lang-content {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    /*width: 100%;*/
    transition: opacity 600ms;
}
.c-info__list {
    padding-top: 10px;
    padding-bottom: 10px;
}
.c-info__list dd {
    padding-left: 1.5em;
}

.c-info__lang .c-lang-content {
    padding: 20px;
    background-color: #f6f6f6;
}
.c-lang-content.-active {
    opacity: 1;
    position: static;
}

.c-lang-btn {
    font-size: 0;
    text-align: right;
    padding-bottom: 3px;
    border-bottom: #ccc solid 1px;
}
.c-lang-btn button {
    color: #ccc;
    font-size: 1.4rem;
    position: relative;
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0.25em;
    transition: color 600ms ease-out;
}
.c-lang-btn button::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0.5em;
    left: -0.5em;
    width: 0;
    height: 1em;
    border-left: #777 solid 1px;
    pointer-events: none;
}
.c-lang-btn button.-active {
    color: #333;
    pointer-events: none;
}
.c-lang-btn button:nth-last-of-type(1) {
    margin-right: 0;
}


.reserve-section {
    margin-top: 60px;
    padding-top: 60px;
    padding-bottom: 40px;
    border-top: #ccc solid 1px;
}

.reserve__btn {
    max-width: 640px;
    margin: 0 auto;
}
.reserve__btn .btn {
    display: inline-block;
    padding: 1.5em 1em;
    width: 100%;
    height: auto;
    line-height: 1;
    font-size: 1.8em;
    background: #333333;
    color: #FFF;
    border: 1px solid #333333;
    text-align: center;
    text-decoration: none;
    transition: background-color 800ms;

    /*transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);*/
}
.reserve__btn .btn:hover {
    background: #ccc;
    color: #333333;
    border: 1px solid #333333;
}


.l-footer {
    padding: 20px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    /*padding: 30px;*/
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.footer-info__access {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-info__logo {
    margin-top: 2em;
    margin-right: auto;
    margin-left: auto;
    width: 150px;
    max-width: 70%;
}

.footer-info__detail {
    border: 0.5px solid #CCC;
    width: 20em;
    padding: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

.footer-info__map {
    margin-top: 2.5em;
    max-width: 497px;
}



.footer-info__contact {
    padding-top: 60px;
    padding-bottom: 20px;
}

.contact-form {
    margin-top: 2em;
}

.footer-info__contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.footer-info__contact label {
    margin-top: 10px;
}

.footer-info__contact input, .footer-info__contact textarea {
    width: 100%;
/*    padding: 10px;
    margin-top: 5px;*/

    margin-top: 7px;
    padding: 5px 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    border: #ccc solid 1px;
}
.footer-info__contact textarea {
    resize: vertical;
}
.footer-info__contact button {
    padding: 10px 20px;
    color: #000;
}
.contact-form__submit {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    margin-right: -100px;
}
.contact-form__submit .arrow {
    margin-top: -3px;
    transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.contact-form__submit .arrow.-hover {
    transform: translateX(20px);
}


.footer-return {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
}
.footer-return__bar {
    /*position: relative;*/;
}
.footer-return__bar::before {
/*    content: "";
    display: inline-block;
    width: 1px;
    height: 60px;
    background-color: #333;
    -moz-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -moz-transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: -webkit-transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);*/
}
.footer-return__bar .arrow {
    display: inline-block;
    /*transform-origin: 0 100%;*/
    transition: transform 1250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.footer-return__bar .arrow.-hover {
    transform: translateY(-20px);
    /*transform-origin: 0 0;*/
}

.footer-return__btn {
    font-size: 1.3rem;
    position: relative;
    padding-top: 20px;
    height: 4em;
}
.footer-return__btn a {
    line-height: 1;
    display: inline-block;
    padding: 0.25em;
/*    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);*/
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}


.footer-bottom {
    text-align: center;
    padding: 20px 20px 0;
/*    background: #333;
    color: #fff;*/
}


/* ≪ PC */
@media (min-width: 600px) {

    .c-info {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 1060px;
    }
    .c-info__lang .c-lang-content {
        padding: 30px 60px;
    }
    .c-info__list {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .c-info__list dt {
        width: 14em;
    }
    .c-info__list dd {
        -webkit-box-flex: 1 1 0;
        -webkit-flex: 1 1 0;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
    }
    .c-lang-btn button {
        font-size: 1.5rem;
    }

    .l-footer {
        padding-left: 30px;
        padding-right: 30px;
    }
    .footer-info {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-info__access {
        padding-right: 45px;
        width: 50%;
    }
    .footer-info__contact {
        padding-top: 20px;
        padding-left: 45px;
        width: 50%;
    }
}

/* ≪ PC */
@media (min-width: 960px) {

    .l-inner {
        padding-top: 30px;
        padding-bottom: 30px;
        max-width: 1280px;
    }

    .rooms-slide {
        margin-top: 50px;
    }
    .rooms-slide__nav {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .rooms-slide__nav button {
        width: 70px;
    }
    .rooms-slide__desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 900px;
        height: 4em;
        text-align: center;
    }
    .rooms-slide__desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 900px;
        height: 4em;
    }
    .room-map {
        margin-left: auto;
        margin-right: auto;
        /*padding-top: 40px;*/
        padding-bottom: 60px;
        width: 100%;
        max-width: 900px;
    }
    .room-map::before {
        /*margin-bottom: 40px;*/
    }


    .reserve-section {
        margin-top: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .reserve__block {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        max-width: 1060px;
    }
    .reserve__btn {
        text-align: center;
    }


    .footer-return {
        padding-top: 60px;
        padding-bottom: 50px;
    }
    .footer-return__bar::before {
        /*height: 96px;*/
    }
    .footer-return__btn {
        font-size: 1.4rem;
    }


    .footer-bottom {
        text-align: center;
    }

    .footer-info__map {
        max-width: 495px;
        height: auto;
    }
}
/* PC large */
@media (min-width: 1281px) {

    .footer-info__access {
        padding-right: 90px;
    }
    .footer-info__contact {
        padding-left: 90px;
    }
    .reserve__btn .btn {
        font-size: 2rem;
    }
}