@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

/*
font-family: "Hannari", serif;
font-family: "Lora", serif;
*/

:root {
    --primary-color: #223A5E;
    --secondary-color: #5A7184;
    --bg-color: #F0F4F7;
    --text-color: #3A3A3A;
    --jp-font: "Hannari", serif;
    --en-font: "Lora", serif;
    --mix-font: "Lora", "Hannari", serif;
    --border-color: #DDE6EA;
}

body #RthCustomizeW{
    color: #3A3A3A;
}

#RthCustomizeW h1 {}

#RthCustomizeW h2 {}

#RthCustomizeW h3 {
    line-height: 1.5;
}

#RthCustomizeW h4 {}

#RthCustomizeW h5 #RthCustomizeW a {
    text-decoration: none;
}

#RthCustomizeW p {
    line-height: 1.68;
    letter-spacing: 0.05em;
}

#RthCustomizeW section {
    margin: 120px auto;
}

.anchor {
    scroll-margin-top: 140px;
  }
  


/*-----------
header
-------------------------------*/
#RthCustomizeW section.main {
    margin-top: 0;
}

header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: auto;
    background: linear-gradient(to bottom, rgba(90, 133, 132, 0.4), rgba(45, 57, 66, 0.1));
    padding: 20px 5% 20px 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

header .logo img {
    width: 156px;
}

header ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

#RthCustomizeW header ul li a {
    padding: 6px 10px;
    color: #fff;
    font-family: var(--mix-font);
    font-size: 18px;
    letter-spacing: 0.05em;
}

#RthCustomizeW header ul li a:hover {
    background: #fff;
    color: var(--primary-color);
    text-decoration: none;
}

#RthCustomizeW header ul li a:visited{
    color: #fff;
}
#RthCustomizeW header ul li a:visited:hover{
    color: var(--primary-color);
}


.main {
    position: relative;
    width: 100%;
    margin-bottom: 120px;
}

.main.bin-top::before {
    content: "";
    display: block;
    padding-top: 56.222%;
}

.video-container {
    position: absolute;
    top: 0;
    z-index: -1;
}

.catch {
    position: absolute;
    top: 50%;
    left: 15%;
    line-height: 1.5;
    color: #fff;
    font-family: var(--jp-font);
    font-size: 36px;
    letter-spacing: 0.036em;
    transform: translate(0, -50%);
    z-index: 1;
    text-shadow: 0px 2px 6px rgba(34, 58, 94, 0.7);
}

.main video {
    width: 100%;
}

/*---
top - concept
-----------------------------*/
.top-page .concept .cover {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/concept-main.webp) center / cover no-repeat;
}

.cover {
    position: relative;
    width: 100%;
    height: 495px;
}

.cover::before {
    content: "";
    display: block;
    padding-top: 36.237%;
}

.cover-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.cover-txt h2 {
    margin-bottom: 50px;
    font-family: var(--en-font);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.036em;
}

.cover-txt .sub {
    font-family: var(--jp-font);
    font-size: 28px;
    letter-spacing: 0.028em;
}

.top-page .concept .flex-wrap {
    position: relative;
    width: 1366px;
    height: 850px;
    margin: 0 auto;
}

.top-page .concept .flex-wrap::before {
    content: "";
    display: block;
    padding-top: 77.405%;
}

.top-page .concept .flex-wrap .img-box {
    position: absolute;
    top: 0;
    width: 956px;
    height: 740px;
    margin-top: 30px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/concept-01.webp) center / cover no-repeat;
}

.top-page .concept .flex-wrap .txt-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 606px;
    height: 309px;
    padding: 90px 55px;
    background: rgba(240, 244, 247, 0.8);
    box-sizing: border-box;
}

/*---
top-guestroom
--------------------------------*/
.top-page .guestroom {
    margin-top: 80px;
}

.top-page .guestroom .cover {
    margin-bottom: 60px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/top-guestroom.webp) center / cover no-repeat;
}

.floor-common {
    content: "";
    background: var(--bg-color);
    margin-bottom: 60px;
    padding: 60px;
}

#RthCustomizeW .bin-top .floor-common p{
    line-height: 1.6;
    letter-spacing: 0;
}

.second-floor .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 1240px;
    height: 688px;
    margin: 0 auto;
}

.second-floor .grid1 {
    width: 460px;
    grid-row: span 2 / span 2;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/2nd-01.webp) center / cover no-repeat;
}

.second-floor .grid2 {
    width: 406px;
    grid-column-start: 2;
    grid-row-start: 1;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/2nd-02.webp) center / cover no-repeat;
}

.second-floor .grid3 {
    width: 406px;
    grid-column-start: 2;
    grid-row-start: 2;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/2nd-03.webp) center / cover no-repeat;
}

.second-floor .grid4 {
    grid-column-start: 3;
    grid-row-start: 1;
    background: var(--secondary-color);
    place-content: center;
    place-items: center;
}

.second-floor .grid5 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    grid-column-start: 3;
    grid-row-start: 2;
    padding: 30px 22px;
    background: #fff;
}

.room-name {
    color: #fff;
    font-family: var(--en-font);
    text-align: center;
}

.room-name h3 {
    margin-bottom: 16px;
    font-size: 28px;
    font-weight: 400;
}

.room-name p {
    font-size: 18px;
    font-weight: 400;
}

.common-btn {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
}

.common-btn a {
    display: block;
    padding: 20px 0;
    background: var(--primary-color);
    color: #fff;
    font-family: var(--en-font);
    text-align: center;
    text-decoration: none;
}

.common-btn a:hover {
    background: var(--secondary-color);
    color: #fff;
}

/*--
top - 3rd floor
-----------------------*/
.third-floor .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 1240px;
    height: 688px;
    margin: 0 auto;
}

.third-floor .grid1 {
    grid-column-start: 1;
    grid-row-start: 1;
    background: var(--secondary-color);
    place-content: center;
    place-items: center;
}

.third-floor .grid2 {
    grid-column-start: 1;
    grid-row-start: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    padding: 30px 22px;
    background: #fff;
}

.third-floor .grid3 {
    width: 406px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/3rd-01.webp) center / cover no-repeat;
    grid-column-start: 2;
    grid-row-start: 1;
}

.third-floor .grid4 {
    width: 406px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/3rd-02.webp) center / cover no-repeat;
    grid-column-start: 2;
    grid-row-start: 2;
}

.third-floor .grid5 {
    width: 460px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/3rd-03.webp) center / cover no-repeat;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 1;
}

/*--
top - 4th floor
----------------------------------*/
.fourth-floor .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 1240px;
    height: 688px;
    margin: 0 auto;
}

.fourth-floor .grid1 {
    width: 460px;
    grid-row: span 2 / span 2;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/4th-01.webp) center / cover no-repeat;
}

.fourth-floor .grid2 {
    width: 406px;
    grid-column-start: 2;
    grid-row-start: 1;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/4th-02.webp) center / cover no-repeat;
}

.fourth-floor .grid3 {
    width: 406px;
    grid-column-start: 2;
    grid-row-start: 2;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/4th-03.webp) center / cover no-repeat;
}

.fourth-floor .grid4 {
    grid-column-start: 3;
    grid-row-start: 1;
    background: var(--secondary-color);
    place-content: center;
    place-items: center;
}

.fourth-floor .grid5 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    grid-column-start: 3;
    grid-row-start: 2;
    padding: 30px 22px;
    background: #fff;
}

/*--
top - BBQ
----------------------------------*/
.top-page .bbq .cover {
    margin-bottom: 60px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/top-bbq.webp) center / cover no-repeat;
}

.top-page .bbq .txt-box {
    width: 900px;
    margin: 80px auto;
    text-align: center;
}

.txt-box h3 {
    margin-bottom: 30px;
    font-family: var(--jp-font);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-align: center;
}

.txt-box .common-btn {
    margin-top: 60px;
}

.top-page .bbq .flex-img {
    width: 1240px;
    height: 664px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.flex-img .img-01 {
    width: 399px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/bbq-01.webp) center / cover no-repeat;
}

.flex-img .img-02 {
    width: 399px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/bbq-02.webp) center / cover no-repeat
}

.flex-img .img-03 {
    width: 399px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/bbq-03.webp) center / cover no-repeat
}

/*--
top - ROOFTOP BIN
----------------------------------*/
#RthCustomizeW .top-page .rooftop {
    margin-bottom: 0;
    ;
}

.top-page .rooftop .cover {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/rooftop-bin-01.webp) center / cover no-repeat;
}

.rooftop .flex-wrap {
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1240px;
    margin: 0 auto;
    padding: 80px 0;
    background: var(--bg-color);
}

.rooftop .flex-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--bg-color);
    z-index: -1;
}

.rooftop h2 {
    text-transform: uppercase;
}

.card-slide {
    width: 360px;
}

.card-slide .swiper-slide {
    width: 360px;
    height: 608px;
}

.card-slide img {
    width: 100%;
}

.card-slide .img-01 {}

.card-slide .img-02 {}

.card-slide .img-03 {}

.card-slide .img-04 {}

.card-slide .img-05 {}

.card-slide .img-06 {}

.card-slide .img-07 {}



.flex-wrap .txt-box {
    width: 500px;
    padding: 60px;
}

.rooftop h3 {
    font-size: 28px;
    text-align: left;
}



/*--
top - おすすめプラン
----------------------------------*/
#RthCustomizeW section.plan {
    margin-top: 0;
}

.top-page .plan .cover {
    margin-bottom: 60px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/top/plan-cover.webp) center / cover no-repeat;
}

.plan .flex-box {
    display: flex;
    justify-content: space-between;
    width: 1240px;
    margin: 60px auto;
}

.plan .flex-item {
    width: 380px;
}

.flex-item a:hover img {
    opacity: 0.7;
}

.plan .flex-item img {
    width: 100%;
}

.plan .flex-item p {
    margin-top: 20px;
}

.plan .flex-item a{
    color: #3A3A3A;
}

.plan .flex-item a:hover{
    color: #3A3A3A;
}



/*---
top - Hotel Information
----------------------------*/
.common-width {
    width: 990px;
    margin: 0 auto;
}

.ttl-wrap {
    text-align: center;
}

.ttl-wrap h2 {
    font-family: var(--en-font);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 0.06em;
}

.ttl-wrap span {
    display: block;
    padding-top: 6px;
    font-family: var(--jp-font);
    font-size: 16px;
    letter-spacing: 0.12em;
}

.common-dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    line-height: 2;
    margin: 50px auto;
}

.common-dl dt {
    width: calc(25% - 20px);
    padding: 0 0 20px 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDE6EA;
}

.common-dl dd {
    width: calc(75% - 20px);
    padding: 0 20px 20px 0;
    margin-left: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDE6EA;
}

/*----
footer
---------------------------------------*/
footer {
    width: 100%;
    height: 480px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/common/footer-bg.webp) center / cover no-repeat;
}

.address {
    width: 375px;
    margin: 0 auto;
    padding: 80px 0;
    text-align: center;
}

address {
    margin-top: 20px;
}

.address ul li {
    line-height: 1.5;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    letter-spacing: 0.05em;
}

.f-nav ul {
    display: flex;
    justify-content: space-between;
    width: 610px;
    margin: 0 auto 50px;
}

.f-nav a {
    color: #fff;
    display: inline-block;
    font-family: var(--mix-font);
    font-size: 18px;
    position: relative;
    text-decoration: none;
}

.f-nav a:hover {
    color: #fff;
}

/* 下線のスタイル */
.f-nav a::after {
    background-color: #fff;
    bottom: -6px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scale(0, 1);
    transition: transform .3s;
    width: 100%;
}

/* リンクにホバーした際の下線の表示 */
.f-nav a:hover::after {
    transform: scale(1, 1);
}

.copyright {
    margin-top: 80px;
    padding: 12px 0;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    text-align: center;
}


/*--
2nd Floor
----------------------------------*/
.main.second-floor {
    width: 100%;
    height: 415px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/main.webp) center / cover no-repeat;
}

.mv .catch {
    font-family: var(--en-font);
    font-size: 40px;
}

.mv .catch span {
    display: block;
    font-family: var(--en-font);
    font-size: 18px;
    letter-spacing: 0.06em;
}

.second .concept {
    width: 100%;
}

.second .concept .flex-box {
    display: flex;
    align-items: center;
}

.second .concept .img-box {
    width: 37.042%;
    height: 692px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/concept.webp) center / cover no-repeat;
}

.second .concept .txt-box {
    width: 46.925%;
    padding: 0 7% 0 7%;
}

.guestroom .concept h2 {
    margin-bottom: 40px;
    line-height: 50.4px;
    font-family: var(--jp-font);
    font-size: 36px;
    font-weight: 400;
}

.guestroom .concept p {
    margin-bottom: 1em;
}

.common-btn.left {
    margin: 40px auto 0 0;
}

.room-slide .rm-slide {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}

.room-slide .swiper-slide {
    width: 888px;
    max-width: 1332px;
    height: 465px;
    max-height: 698px;
}

.second-floor .slide-01 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-01.webp) center / cover no-repeat;
}

.second-floor .slide-02 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-02.webp) center / cover no-repeat;
}

.second-floor .slide-03 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-03.webp) center / cover no-repeat;
}

.second-floor .slide-04 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-04.webp) center / cover no-repeat;
}

.second-floor .slide-05 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-05.webp) center / cover no-repeat;
}

.second-floor .slide-06 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-06.webp) center / cover no-repeat;
}

.second-floor .slide-07 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-07.webp) center / cover no-repeat;
}

.second-floor .slide-08 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/slide-08.webp) center / cover no-repeat;
}

.flex-box.half {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
}

.flex-box.half .contents-box {
    width: 50%;
    padding: 4.39% 30px 4.39% 4.39%;
    box-sizing: border-box;
}

.flex-box.half .contents-box:nth-last-of-type(1) {
    padding: 4.39% 4.39% 4.39% 30px;
}

.flex-box.half .contents-box h3 {
    margin-bottom: 20px;
    font-family: var(--jp-font);
    font-size: 28px;
    font-weight: 400;
}

.contents-box dl {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.contents-box dl dt {
    padding: 20px 15px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    flex: 1 1 30%;
}

.contents-box dl dd {
    padding: 20px 15px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    flex: 1 1 70%;
}

.btn-wrap {
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
}

/*--
Guestroom(共通) - Floor map
----------------------------------*/
.tmb {
    position: relative;
    width: 345px;
    margin: 40px auto 0;
}

.tmb_img {
    width: 100%;
    height: auto;
}

.tmb_img:hover {
    cursor: pointer;
}

.popup {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s, transform 0s 0.3s;
}

.popup__btn {
    display: block;
    z-index: 13;
    position: absolute;
    top: 1vh;
    right: 1vh;
    width: 5vh;
    height: 5vh;
    cursor: pointer;
}

.popup__btn::before,
.popup__btn::after {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background-color: #fff;
    content: '';
}

.popup__btn::before {
    transform: rotate(45deg);
}

.popup__btn::after {
    transform: rotate(-45deg);
}

.popup__btnarea {
    z-index: 12;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.popup__img {
    z-index: 11;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

.popup__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked~.popup {
    transform: scale(1);
    opacity: 1;
    transition: opacity 0.3s;
}

/*--
Guest Room - ジャグジー
----------------------------------*/
.jacuzzi-wrap {
    position: relative;
    width: 1092px;
    height: 633px;
    margin: 0 auto;
    padding: 100px 0 0 0;
    background: var(--bg-color);
}

.jacuzzi-wrap h2 {
    position: absolute;
    right: -70px;
    top: -30px;
    color: var(--primary-color);
    font-family: var(--en-font);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.jz-slide {
    width: 972px;
    height: 567px;
    margin: 0 auto;
}

.second .jz-slide .slide-01 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-01.webp) center / cover no-repeat;
}

.second .jz-slide .slide-02 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-02.webp) center / cover no-repeat;
}

.second .jz-slide .slide-03 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-03.webp) center / cover no-repeat;
}

.jacuzzi-txt {
    position: absolute;
    left: -160px;
    bottom: -50px;
    z-index: 3;
}

.jacuzzi-txt .inner {
    width: 430px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}


/*--
2nd floor - amenities
----------------------------------*/
.amenities .flex-box.half {
    align-items: center;
    gap: 100px;
}

.amenities .flex-box.half .contents-box {
    padding: 0;
}

.contents-box .ttl-wrap {
    margin-bottom: 50px;
}

.grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
}

.second .amenities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/amenities-01.webp) center / cover no-repeat;
}

.second .amenities .grid-wrap .img-02 {
    grid-column-start: 1;
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/amenities-02.webp) center / cover no-repeat;
}

.second .amenities .grid-wrap .img-03 {
    grid-column-start: 2;
    grid-row-start: 1;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/amenities-03.webp) center / cover no-repeat;
}

.second .amenities .grid-wrap .img-04 {
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/amenities-04.webp) center / cover no-repeat;
}


/*--
2nd floor - Facilities
----------------------------------*/
.facilities .flex-box.half {
    align-items: center;
    flex-direction: row-reverse;
    gap: 100px;
}

.facilities .flex-box.half .contents-box {
    padding: 0;
}

.second .facilities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-01.webp) center / cover no-repeat;
}

.second .facilities .grid-wrap .img-02 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-02.webp) center / cover no-repeat;
}

.second .facilities .grid-wrap .img-03 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-03.webp) center / cover no-repeat;
}

.second .facilities .grid-wrap .img-04 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-04.webp) center / cover no-repeat;
}



/*--
Guest Room - 3rd Floor
----------------------------------*/
.main.third-floor {
    width: 100%;
    height: 415px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/main.webp) bottom / cover no-repeat;
}

.third .concept .img-box {
    width: 37.042%;
    height: 692px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/concept.webp) center / cover no-repeat;
}

.third .concept {
    width: 100%;
}

.third .concept .flex-box {
    display: flex;
    align-items: center;
}

.third .tmb {
    width: 337px;
}

.third .concept .txt-box {
    width: 46.925%;
    padding: 0 7% 0 7%;
}

.third-floor .slide-01 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-01.webp) center / cover no-repeat;
}

.third-floor .slide-02 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-02.webp) center / cover no-repeat;
}

.third-floor .slide-03 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-03.webp) center / cover no-repeat;
}

.third-floor .slide-04 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-04.webp) center / cover no-repeat;
}

.third-floor .slide-05 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-05.webp) center / cover no-repeat;
}

.third-floor .slide-06 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-06.webp) center / cover no-repeat;
}

.third-floor .slide-07 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-07.webp) center / cover no-repeat;
}

.third-floor .slide-08 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/slide-08.webp) center / cover no-repeat;
}

/* 3F - ジャグジー */
.third .jz-slide .slide-01 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-01.webp) center / cover no-repeat;
}

.third .jz-slide .slide-02 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-02.webp) center / cover no-repeat;
}

.third .jz-slide .slide-03 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/jacuzzi-03.webp) center / cover no-repeat;
}

/*--
3rd floor - amenities
----------------------------------*/
.amenities .flex-box.half {
    align-items: center;
    gap: 100px;
}

.amenities .flex-box.half .contents-box {
    padding: 0;
}

.contents-box .ttl-wrap {
    margin-bottom: 50px;
}

.grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
}

.third .amenities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/amenities-01.webp) center / cover no-repeat;
}

.third .amenities .grid-wrap .img-02 {
    grid-column-start: 1;
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/amenities-02.webp) center / cover no-repeat;
}

.third .amenities .grid-wrap .img-03 {
    grid-column-start: 2;
    grid-row-start: 1;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/amenities-03.webp) center / cover no-repeat;
}

.third .amenities .grid-wrap .img-04 {
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/third/amenities-04.webp) center / cover no-repeat;
}


/*--
3rd floor - Facilities
----------------------------------*/
.facilities .flex-box.half {
    align-items: center;
    flex-direction: row-reverse;
    gap: 100px;
}

.facilities .flex-box.half .contents-box {
    padding: 0;
}

.third .facilities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-01.webp) center / cover no-repeat;
}

.third .facilities .grid-wrap .img-02 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-02.webp) center / cover no-repeat;
}

.third .facilities .grid-wrap .img-03 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-03.webp) center / cover no-repeat;
}

.third .facilities .grid-wrap .img-04 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/second/facilities-04.webp) center / cover no-repeat;
}




/*--
Guest Room - 4th Floor
----------------------------------*/
.main.fourth-floor {
    width: 100%;
    height: 415px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/main.webp) bottom / cover no-repeat;
}

.fourth .concept .img-box {
    width: 37.042%;
    height: 692px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/concept.webp) center / cover no-repeat;
}

.fourth .concept {
    width: 100%;
}

.fourth .concept .flex-box {
    display: flex;
    align-items: center;
}

.fourth .tmb {
    width: 339px;
}

.fourth .concept .txt-box {
    width: 46.925%;
    padding: 0 7% 0 7%;
}

.fourth-floor .slide-01 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-01.webp) center / cover no-repeat;
}

.fourth-floor .slide-02 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-02.webp) center / cover no-repeat;
}

.fourth-floor .slide-03 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-03.webp) center / cover no-repeat;
}

.fourth-floor .slide-04 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-04.webp) center / cover no-repeat;
}

.fourth-floor .slide-05 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-05.webp) center / cover no-repeat;
}

.fourth-floor .slide-06 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-06.webp) center / cover no-repeat;
}

.fourth-floor .slide-07 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-07.webp) center / cover no-repeat;
}

.fourth-floor .slide-08 {
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/slide-08.webp) center / cover no-repeat;
}

/* 4th floor - ジャグジー */
.fourth .jz-slide .slide-01 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/jacuzzi-01.webp) center / cover no-repeat;
}

.fourth .jz-slide .slide-02 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/jacuzzi-02.webp) center / cover no-repeat;
}

.fourth .jz-slide .slide-03 {
    width: 100%;
    height: 100%;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/jacuzzi-03.webp) center / cover no-repeat;
}

/*--
4th floor - amenities
----------------------------------*/
.amenities .flex-box.half {
    align-items: center;
    gap: 100px;
}

.amenities .flex-box.half .contents-box {
    padding: 0;
}

.contents-box .ttl-wrap {
    margin-bottom: 50px;
}

.grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
}

.fourth .amenities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/amenities-01.webp) center / cover no-repeat;
}

.fourth .amenities .grid-wrap .img-02 {
    grid-column-start: 1;
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/amenities-02.webp) center / cover no-repeat;
}

.fourth .amenities .grid-wrap .img-03 {
    grid-column-start: 2;
    grid-row-start: 1;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/amenities-03.webp) center / cover no-repeat;
}

.fourth .amenities .grid-wrap .img-04 {
    grid-row-start: 2;
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/amenities-04.webp) center / cover no-repeat;
}


/*--
4th floor - Facilities
----------------------------------*/
.facilities .flex-box.half {
    align-items: center;
    flex-direction: row-reverse;
    gap: 100px;
}

.facilities .flex-box.half .contents-box {
    padding: 0;
}

.fourth .facilities .grid-wrap .img-01 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/facilities-01.webp) center / cover no-repeat;
}

.fourth .facilities .grid-wrap .img-02 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/facilities-02.webp) center / cover no-repeat;
}

.fourth .facilities .grid-wrap .img-03 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/facilities-03.webp) center / cover no-repeat;
}

.fourth .facilities .grid-wrap .img-04 {
    aspect-ratio: 340 / 308;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/fourth/facilities-04.webp) center / cover no-repeat;
}


/*--
過ごし方
----------------------------------*/
#RthCustomizeW section.spend-contents,
#RthCustomizeW .main.spend-main,
#RthCustomizeW .day-1{
    margin: 80px auto;
}

.main.spend-main {
    width: 100%;
    height: 415px;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/spend/main.webp) bottom / cover no-repeat;
}

.spend-contents {
    text-align: center;
}

.spend-contents h2 {
    margin-bottom: 50px;
    font-family: var(--jp-font);
    font-size: 36px;
    font-weight: 400;
}

.spend .header-img{
    position: relative;
    width: 100%;
    height: 340px;
}

.spend .header-img h3{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-family: var(--en-font);
    font-size: 48px;
    font-weight: 400;
}

.day-1 .header-img{
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/spend/day1-cover.webp) center / cover no-repeat;
}

.day-1 .spend-map{
    aspect-ratio: 1240 / 2015;
    width: 1240px;
    height: 2015px;
    margin: 50px auto 0;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/spend/day1-02.webp) center / cover no-repeat;
}

.day-2 .header-img{
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/spend/day2-cover.webp) center / cover no-repeat;
}

.day-2 .spend-map{
    aspect-ratio: 1240 / 1988;
    width: 1240px;
    height: 1988px;
    margin: 50px auto 0;
    background: url(https://lolipop-fivestar-co.ssl-lolipop.jp/bin/img/spend/day2-02.webp) center / cover no-repeat;
}



/*--
firefox対策
----------------------------------*/
.swiper-wrapper {
  align-items: stretch;
}

/* スライド本体 */
.swiper-slide {
  height: auto;
}