@charset "UTF-8";

body {
    width: 100vw;
    height: auto;
    font-family: "Noto Serif Japanese", serif;
}

ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

h1,
h2,
h3,
h5,
h6 {
    font-family: "Shippori Mincho", serif
}


/* pc版 */
@media (min-width:768px) {

    #Stay,
    #Meal,
    #Onsen,
    #Experience,
    #Access,
    #Others {
        scroll-margin-top: 115px;
    }

    .infoPage__topImage div {
        width: auto;
        max-width: 1500px;
        margin: 0 auto;
    }

    /* よくある問い合わせ */
    .infoPage__question--topText {
        text-align: center;
        color: #666666;
        padding: 200px 0;

        /* ふわっと表示（最初は消しとく） */
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 1s ease-out, transform 2s ease-out;
        transition-delay: calc(var(--delay) * 0.2s);
    }

    .infoPage__question--topText h2 {
        font-size: 1.75rem;
    }

    .infoPage__question--topText p {
        /* font-size: 1.25rem;
        line-height: 50px;
        margin-top: 30px; */
        width: 100%;
        text-align: center;
        margin-top: 50px;
        /* font-size: 1rem; */
        font-size: clamp(0.8rem, 0.667rem + 0.278vw, 1rem);
        font-weight: normal;
        line-height: 2;
        color: #666666;
    }

    /* ふわっと表示 */
    .infoPage__question--topText.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .infoPage__question--button {
        display: flex;
        justify-content: center;
        gap: 40px;
        padding: 0 20px;
    }

    .infoPage__question--button a:hover {
        filter: brightness(105%);
        transform: translate(0, 5%);
        opacity: 0.5;
    }

    .infoPage__accordion {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
        padding: 0 20px;
        color: #666666;
    }

    .infoPage__accordion div {
        width: 100%;
        max-width: 1200px;
    }

    .infoPage__accordion h3 {
        font-size: 1.75rem;
        margin: 50px 0 25px 0;
    }

    .infoPage__accordion p {
        font-size: 1rem;
    }

    .infoPage__accordion h4 {
        font-size: 1.25rem;
    }

    .accordion_title,
    .accordion_box {
        width: 100%;
        padding: 11px 25px;
        font-size: 1.25rem;
        box-sizing: border-box;
        border: 1px solid #A58E60;
    }

    li:not(:first-child) div .accordion_title {
        border-top: none;
    }

    .accordion_title {
        position: relative;
        cursor: pointer;
        transition: all .5s ease;
    }

    .accordion_title.close {
        background-color: #F2EEEE;
    }

    /* 二本の線を描画する */
    .accordion_title::before,
    .accordion_title::after {
        position: absolute;
        content: '';
        width: 22px;
        height: 3px;
        background-color: #A58E60;
    }

    /* 一方の線（左）を配置して回転させた状態にする */
    .accordion_title::before {
        top: 48%;
        right: 39px;
        transform: rotate(45deg);
    }

    /* もう一方（右）も上とずらした位置に配置して逆方向に回転させる */
    .accordion_title::after {
        top: 48%;
        right: 25px;
        transform: rotate(-45deg);
    }

    /* クリックされたら回転方向を逆にする */
    .accordion_title.close::before {
        transform: rotate(-45deg);
    }

    .accordion_title.close::after {
        transform: rotate(45deg);
    }

    .accordion_box {
        display: none;
        border-top: none;
        background-color: white;
    }

    .infoPage__form {
        margin: 120px 0 250px 0;
        padding: 0 20px;
    }

    .infoPage__form h3 {
        max-width: 1200px;
        font-size: 1.75rem;
        margin: 0 auto;
    }

    .infoPage__form p {
        margin: 20px 0
    }

    form {
        width: 100%;
        max-width: 1200px;
        margin: 25px auto 0;
        color: #666666;
    }

    form label {
        display: flex;
    }

    form label:last-of-type {
        margin-top: 80px;
    }

    form select,
    form input {
        width: 100%;
        max-width: 484px;
        height: 50px;
        font-size: 1.25rem;
    }

    form span {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 384px;
        height: 100px;
        color: white;
        font-size: 1.25rem;
        padding: 0 35px;
        background-color: #161C2D;
        border: 1px solid white;
    }

    form label:nth-of-type(6) span {
        padding-bottom: 100px;
    }

    form div {
        display: flex;
        align-items: center;
        width: 100%;
        border: 1px solid black;
        border-top: none;
        padding: 0 35px;
    }

    form div:first-of-type {
        border-top: 1px solid black;
    }

    form textarea {
        width: 100%;
    }

    form p {
        font-size: 1rem;
        margin: 0 55px 0 55px;
    }

    form p:first-of-type {
        margin-top: 75px;
    }

    .submitLabel {
        height: 65px;
    }

    .infoPage__form--submitButton {
        width: auto;
        height: 65px;
        border: none;
        margin: 0 auto;
    }

    .infoPage__form--submitButton:hover {
        /* filter: brightness(105%); */
        /* width: 210px;
        height: 62px; */
        /* transform: translate(0, 5%); */
        opacity: 0.5;
    }
}




/* sp版 */
@media (max-width:768px) {

    #Stay,
    #Meal,
    #Onsen,
    #Experience,
    #Access,
    #Others {
        scroll-margin-top: 128px;
    }

    .infoPage__container {
        padding: 0 20px;
    }

    .inner {
        padding: 0 50px;
    }

    .infoPage__topImage div img {
        width: 100%;
    }

    .infoPage__question--topText {
        text-align: center;
        color: #666666;
        padding: 100px 0;

        /* ふわっと表示（最初は消しとく） */
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 1s ease-out, transform 2s ease-out;
        transition-delay: calc(var(--delay) * 0.2s);
    }

    .infoPage__question--topText h2 {
        font-size: 1.75rem;
    }

    .infoPage__question--topText p {
        /* font-size: 1rem;
        margin-top: 100px; */
        text-align: center;
        margin-top: 20px;
        font-size: 1rem;
        font-weight: normal;
        color: #666666;
        line-height: 2;
    }

    /* ふわっと表示 */
    .infoPage__question--topText.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .infoPage__question--button {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .infoPage__question--button a:hover {
        filter: brightness(105%);
        transform: translate(0, 5%);
        opacity: 0.5;
    }

    .infoPage__question--button a {
        width: 150px;
        height: 55px;
    }

    .infoPage__accordion {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 20px;
        color: #666666;
    }

    .infoPage__accordion div:first-of-type {
        width: 100%;
    }

    .infoPage__accordion h3 {
        height: 50px;
        font-size: 1.5rem;
        margin-top: 50px;
    }

    .infoPage__accordion p {
        font-size: 1rem;
    }

    .infoPage__accordion h4 {
        font-size: 1.25rem;
    }

    .accordion_title,
    .accordion_box {
        padding: 11px 25px;
        font-size: 1rem;
        box-sizing: border-box;
        border: 1px solid #A58E60;
    }

    .accordion_title {
        padding-right: 70px;
    }

    li:not(:first-child) div .accordion_title {
        border-top: none;
    }

    .accordion_title {
        position: relative;
        cursor: pointer;
        transition: all .5s ease;
    }

    .accordion_title.close {
        background-color: #F2EEEE;
    }

    /* 二本の線を描画する */
    .accordion_title::before,
    .accordion_title::after {
        position: absolute;
        content: '';
        width: 22px;
        height: 3px;
        background-color: #A58E60;
    }

    /* 一方の線（左）を配置して回転させた状態にする */
    .accordion_title::before {
        top: 48%;
        right: 39px;
        transform: rotate(45deg);
    }

    /* もう一方（右）も上とずらした位置に配置して逆方向に回転させる */
    .accordion_title::after {
        top: 48%;
        right: 25px;
        transform: rotate(-45deg);
    }

    /* クリックされたら回転方向を逆にする */
    .accordion_title.close::before {
        transform: rotate(-45deg);
    }

    .accordion_title.close::after {
        transform: rotate(45deg);
    }

    .accordion_box {
        display: none;
        border-top: none;
        background-color: white;
    }

    .infoPage__form {
        margin: 100px 0 100px 0;
        color: #666666;
    }

    .infoPage__form h3 {
        height: 50px;
        font-size: 1.25rem;
        margin: 0 auto;
    }

    .infoPage__form p {
        margin: 20px 0
    }

    form select,
    form input {
        width: 100%;
        height: 37px;
        font-size: 1rem;
        box-sizing: border-box;
    }

    form span {
        display: flex;
        align-items: center;
        color: white;
        font-size: 1rem;
        background-color: #161C2D;
        padding: 40px 10px 0 10px;
    }

    form div {
        height: 31px;
        background-color: #161C2D;
        padding: 20px 10px 0 10px;
    }

    form label:nth-of-type(6) div {
        height: 250px;
    }

    form textarea {
        width: 100%;
        box-sizing: border-box;
    }

    form p:first-of-type {
        margin-top: 50px;
        text-align: center;
    }

    form p {
        font-size: 0.875rem;
    }

    .submitLabel {
        display: block;
        margin-top: 50px;
        height: 60px;
        text-align: center;
    }

    .infoPage__form--submitButton {
        width: auto;
        height: 100%;
        border: none;
    }

    .infoPage__form--submitButton:hover {
        /* filter: brightness(105%);
        width: 190px;
        height: 58px;
        transform: translate(0, 5%); */
        opacity: 0.5;
    }
}