@charset "UTF-8";

body {
    background-image: url(../../images/bgimg_02.png);
    background-color: #d3e2fd;
    background-size: cover;
}

/*===================
mv
===================*/
.pc-spa_mv {
    /* background-color: #000; */
    width: 100%;
    height: 80vh;
    max-height: 1040px;
    top: 0;
    left: 0;
    margin-bottom: var(--section-gutter);

}

.pc-spa-mv_img {
    width: auto;
    height: 80vh;
    max-height: 1040px;
    position: relativ;
    /* background-color: #000; */
    background-image: url(../../images/mv_spa.svg);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 -10px 60px 10px var(--text-color);
    animation: fadeIn 1s forwards;


}




/* ===========
風呂
============= */



.floorMap .fm_inner {
    background-color: var(--main-color-w);
    padding: var(--side-gutter);

}

.floorMap .onsen_ac {
    margin-top: var(--section-gutter);
}

.floorMap .fm-b {
    display: flex;
    padding: 20px;
}

.fm_box summary {
    color: var(--main-color-o);
    font-size: var(--size-lg);
    /* background-color: var(--main-color-w); */
    font-family: var(--font-shi-a);
    border-bottom: solid var(--main-color-o);


}

.fm_box summary i {
    color: var(--main-color-w);
}

.fm_box h3 {
    font-family: var(--font-shi);
    padding-top: 1em;
    padding-bottom: 1em;
}

.fm-b .fm-b_img {
    margin: 0 20px 0 0;
    max-width: 60%;
    filter: drop-shadow(1px 2px 2px #aaa);
}

.fm-b:nth-child(even) {
    flex-direction: row-reverse;
}

.fm-b:nth-child(even) .img {
    margin: 0 0 0 20px;
}

.fm-b_txt-box {
    width: calc(100% - 40%);
}

.fm-b_txt-box_no {
    width: 100%;
}

.fm-b .no1::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_01.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no2::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_02.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no3::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_03.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no4::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_04.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no5::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_05.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no6::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_06.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no7::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_07.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no8::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_08.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no9::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_09.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no10::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_10.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.fm-b .no11::before {
    content: "";
    background-image: url(../../images/spa/fro-no-icon_11.png);
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-position: center;
    background-size: contain;

}

.ganban_icon {
    height: 2em;
    filter: invert(100%) sepia(17%) saturate(1552%) hue-rotate(333deg) brightness(107%) contrast(105%);
}

.ganban_ac {
    margin-bottom: 1em;
}

.txt_p::before {
    content: "➤";
    margin-right: 1em;
    color: var(--main-color-o);

}



/* アコーディオン */
.accordion_f {

    transition: all ease-in-out .3s;


    &:last-of-type {
        border-bottom: 2px solid var(--main-color-o);
    }
}

/* .accordion_f[open] {

    background-color: var(--main-color-o);


} */

.ac_summary {

    transition: all ease-in-out .5s;

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 1em;

    font-weight: bold;
    cursor: pointer;
}

.fm-b::-webkit-details-marker {
    display: none;
}

.fm-b {

    overflow: hidden;
    overflow-y: auto;

}

.accordion_f[open] .fm-b {
    animation: fadeIn .5s ease;
    background-color: #fff;
}

.accordion_f[open] .ac_summary {
    color: #fff;
    background-color: var(--main-color-o);

}

.accordion_f summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 3px solid var(--main-color-o);
    border-right: 3px solid var(--main-color-o);
    content: '';
    transition: transform 0.5s;
}

.accordion_f[open] summary::after {
    transform: rotate(225deg);
}

.accordion_f[open] table {
    animation: fadeIn 0.5s ease;
    ;
}

.spa_notes {
    margin-bottom: var(--footer-gutter);
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メディアクエリ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/*========min-width:960px===========*/
@media screen and (max-width:767px) {
    .fm_inner {
        padding: 0;
    }

    .floorMap .fm-b {
        display: block;
        padding: 0;
    }



    .fm-b .fm-b_img {
        margin: 0;
        max-width: 100%;
    }

    .fm-b_txt-box {
        width: 100%;
        padding-bottom: 1em;
    }




}

/*========max-width:767px========*/