@charset "utf-8";

/* all */
:root {
    --sp-fs10: 2.6667vw;
    --sp-fs11: 2.9334vw;
    --sp-fs12: 3.2vw;
    --sp-fs13: 3.4667vw;
    --sp-fs14: 3.7334vw;
    --sp-fs15: 4vw;
    --sp-fs16: 4.2667vw;
    --sp-fs17: 4.5334vw;
    --sp-fs18: 4.8vw;
    --sp-fs19: 5.0667vw;
    --sp-fs20: 5.3334vw;
    --sp-fs21: 5.6vw;
    --sp-fs22: 5.8667vw;
    --sp-fs23: 6.1334vw;
    --sp-fs24: 6.4vw;
    --sp-fs26: 6.9334vw;
    --sp-fs28: 7.4667vw;
    --sp-fs32: 8.5334vw;
    --sp-fs34: 9.0667vw;
}
* { box-sizing: border-box;}

#experience {
    font-family: "Shippori Mincho", serif;
    /*font-family: "Cormorant", serif;*/
    color: #FFF;
}
#experience a {
    opacity: 1;
	transition: opacity .25s ease-in-out;
    text-decoration: none;
}
#experience a:hover {
    opacity: .65;
    text-decoration: none;
}
#experience img { width: 100%;}

#experience figure,
#experience picture {
    display: block;
}

#experience .sp-only {
    display: none;
}
@media screen and (max-width: 700px) {
    #experience .pc-only { display: none;}
    #experience .sp-only { display: block;}
}
/* /all */

/* KV */
#experience .area-01 {
    width: 100%;
    height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
}
#experience h1 {
    width: 560px;
    font-size: 42px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: .06em;
    border-top: 1px solid #FFF;
    margin-left: 20.75%;
    padding-left: 69px;
    padding-top: 14px;
    position: relative;
    z-index: 2;
}
#experience h1::before {
    content: "";
    display: block;
    width: 223px;
    height: 1px;
    background-color: #FFF;
    transform: rotate(90deg);
    position: absolute;
    top: 82px;
    left: -82px;
    z-index: 2;
}
#experience .area-01 .swiper {
    width: 100%;
    height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#experience .area-01 .swiper-slide {
    overflow: hidden;
}
#experience .area-01 .swiper-slide .swiper-image-box {
    width: 100%;
    height: 100svh;
    background-size: cover;
    background-position: center center;
}
#experience .area-01 .swiper-slide.kv01 .swiper-image-box {
    background-image: url(../img/kv_pc01.webp);
    background-image: image-set(url(../img/kv_pc01.webp) 1x, url(../img/kv_pc01@2x.webp) 2x);
    background-image: -webkit-image-set(url(../img/kv_pc01.webp) 1x, url(../img/kv_pc01@2x.webp) 2x);
}
#experience .area-01 .swiper-slide.kv02 .swiper-image-box {
    background-image: url(../img/kv_pc02.webp);
    background-image: image-set(url(../img/kv_pc02.webp) 1x, url(../img/kv_pc02@2x.webp) 2x);
    background-image: -webkit-image-set(url(../img/kv_pc02.webp) 1x, url(../img/kv_pc02@2x.webp) 2x);
}
#experience .area-01 .swiper-slide.kv03 .swiper-image-box {
    background-image: url(../img/kv_pc03.webp);
    background-image: image-set(url(../img/kv_pc03.webp) 1x, url(../img/kv_pc03@2x.webp) 2x);
    background-image: -webkit-image-set(url(../img/kv_pc03.webp) 1x, url(../img/kv_pc03@2x.webp) 2x);
}
#experience .area-01 .swiper-slide.kv04 .swiper-image-box {
    background-image: url(../img/kv_pc04.webp);
    background-image: image-set(url(../img/kv_pc04.webp) 1x, url(../img/kv_pc04@2x.webp) 2x);
    background-image: -webkit-image-set(url(../img/kv_pc04.webp) 1x, url(../img/kv_pc04@2x.webp) 2x);
}
@keyframes zoom {
	0% { transform: scale(1.15);}
	100% { transform: scale(1);}
}
#experience .area-01 .swiper-slide-active .swiper-image-box,
#experience .area-01 .swiper-slide-duplicate-active .swiper-image-box,
#experience .area-01 .swiper-slide-prev .swiper-image-box {
	animation: zoom 8s linear 0s normal both;
}
@media screen and (max-width: 1130px) {
    #experience h1 {
        margin-left: 15.75%;
    }
}
@media screen and (max-width: 880px) {
    #experience h1 {
        margin-inline: auto;
    }
}
@media screen and (max-width: 700px) {
    #experience .area-01 {
        display: block;
        padding-top: 42.5%;
    }
    #experience h1 {
        width: 100%;
        font-size: var(--sp-fs34);
        padding-top: 6%;
        padding-inline: 13% 4%;
        border: none;
    }
    #experience h1::before {
        width: 50.5467%;
        top: 35%;
        left: -18.5%;
    }
    #experience h1::after {
        content: "";
        display: block;
        width: 70.1334%;
        height: 1px;
        background-color: #FFF;
        position: absolute;
        top: 0;
        left: 3%;
    }
    #experience .area-01 .swiper-slide.kv01 .swiper-image-box {
        background-image: url(../img/kv_sp01.webp);
        background-image: image-set(url(../img/kv_sp01.webp) 1x, url(../img/kv_sp01.webp) 2x);
        background-image: -webkit-image-set(url(../img/kv_sp01.webp) 1x, url(../img/kv_sp01.webp) 2x);
    }
    #experience .area-01 .swiper-slide.kv02 .swiper-image-box {
        background-image: url(../img/kv_sp02.webp);
        background-image: image-set(url(../img/kv_sp02.webp) 1x, url(../img/kv_sp02.webp) 2x);
        background-image: -webkit-image-set(url(../img/kv_sp02.webp) 1x, url(../img/kv_sp02.webp) 2x);
    }
    #experience .area-01 .swiper-slide.kv03 .swiper-image-box {
        background-image: url(../img/kv_sp03.webp);
        background-image: image-set(url(../img/kv_sp03.webp) 1x, url(../img/kv_sp03.webp) 2x);
        background-image: -webkit-image-set(url(../img/kv_sp03.webp) 1x, url(../img/kv_sp03.webp) 2x);
    }
    #experience .area-01 .swiper-slide.kv04 .swiper-image-box {
        background-image: url(../img/kv_sp04.webp);
        background-image: image-set(url(../img/kv_sp04.webp) 1x, url(../img/kv_sp04.webp) 2x);
        background-image: -webkit-image-set(url(../img/kv_sp04.webp) 1x, url(../img/kv_sp04.webp) 2x);
    }
}
/* /KV */

/* area-02 */
#experience .area-02 {
    width: 100%;
    height: 1134px;
    position: relative;
    z-index: 5;
    margin-top: -1px;
    padding-top: 80px;
    overflow: hidden;
}
#experience .parallax_img {
    width: 100%;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    margin-inline: auto;
    display: block;
    z-index: -1;
    overflow: hidden;
    transform: translate(-50%); 
}
#experience .parallax_img picture {
    width: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-out;
    transform: translate3d(0px, -15%, 0px);/*初期値、これはJSで上書きされる*/
}
#experience .area-02 .contents-lead {
    width: 780px;
    margin-inline: auto;
    border-right: 1px solid #FFF;
    font-size: 18px;
    text-align: right;
    line-height: 2;
    position: relative;
    padding-right: 19px;
    padding-bottom: 60px;
}
#experience .area-02 .contents-lead::before {
    content: "";
    display: block;
    width: 328px;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    bottom: 30px;
    right: -31px;
}
#experience .area-02 .images-wrapper {
    width: 1280px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3%;
    margin-top: -30px;
}
#experience .area-02 .images-wrapper picture {
    width: 400px;
}
#experience .area-02 .images-wrapper picture:nth-of-type(2) {
    padding-top: 80px;
}
#experience .area-02 .images-wrapper picture:nth-of-type(3) {
    padding-block: 160px 70px;
}
@media screen and (max-width: 1440px) {
    #experience .area-02 {
        height: auto;
        aspect-ratio: unset;
        background-position: bottom;
    }
    #experience .parallax_img {
        width: 1440px;
        height: auto;
        aspect-ratio: 1 / 0.7875;
    }
    #experience .area-02 .images-wrapper {
        width: 88.889%;
        height: auto;
    }
    #experience .area-02 .images-wrapper picture {
        width: 31.25%;
    }
}
@media screen and (max-width: 880px) {
    #experience .area-02 .contents-lead {
        width: 88.6364%;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(2) {
        padding-top: 80px;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(3) {
        padding-block: 160px 50px;
    }
}
@media screen and (max-width: 800px) {
    #experience .area-02 .images-wrapper picture:nth-of-type(2) {
        padding-top: 100px;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(3) {
        padding-block: 200px 50px;
    }
}
@media screen and (max-width: 700px) {
    #experience .area-02 .contents-lead {
        width: 78.6667%;
        margin-inline: auto;
        font-size: var(--sp-fs16);
    }
    #experience .area-02 {
        height: auto;
        aspect-ratio: unset;
        padding-top: 10.6%;
    }
    #experience .area-02 .contents-lead {
        text-align: left;
        padding-right: 0;
        border: none;
    }
    #experience .area-02 .contents-lead::before {
        width: 89.1526%;
        bottom: 3.7%;
    }
    #experience .area-02 .contents-lead::after {
        content: "";
        display: block;
        width: 64.2543%;
        height: 1px;
        background-color: #FFF;
        transform: rotate(90deg);
        position: absolute;
        bottom: 20.5%;
        right: -37%;      
    }
    #experience .parallax_img {
        width: 100%;
        height: auto;
        aspect-ratio: 0.3153 / 1;
    }
    #experience .area-02 .images-wrapper {
        width: 100%;
        display: block;
        margin-top: 12%;
        overflow: hidden;
    }
    #experience .area-02 .images-wrapper picture {
        width: 58%;
        position: relative;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(1) {
        margin-left: -11%;
        z-index: 1;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(2) {
        padding-top: 0%;
        margin-top: -41.7%;
        margin-left: 52%;
        z-index: 3;
    }
    #experience .area-02 .images-wrapper picture:nth-of-type(3) {
        padding-block: 0 13%;
        margin-top: -22.7%;
        margin-left: 6.7%;
        z-index: 2;
    }
}
/* area-02 */

/* hotels */
#experience .hotels {
    overflow: hidden;
}
#experience .hotels .wrapper_bg01 {
    padding-top: 51px;
}
#experience .hotels .wrapper_bg01,
#experience .hotels .wrapper_bg02,
#experience .hotels .wrapper_bg03,
#experience .hotels .wrapper_bg04 {
    position: relative;
}
#experience .hotels .wrapper_bg04 {
    display: grid;
    grid-template-columns: 490px 490px;
    justify-content: center;
    gap: 0 100px;
    padding-bottom: 60px;
}
#experience .hotels .wrapper_bg01::after {
    content: "";
    display: block;
    width: 100%;
    height: 117%;
    background-image: url(../img/bg_hotels_pc01.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: -190px;
    position: absolute;
    top: 0;
    z-index: 4;
}
#experience .hotels .wrapper_bg02::after {
    content: "";
    display: block;
    width: 100%;
    height: 140%;
    background-image: url(../img/bg_hotels_pc02.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: -30px;
    padding-top: 51px;
    position: absolute;
    top: -440px;
    z-index: 3;
}
#experience .hotels .wrapper_bg03::after {
    content: "";
    display: block;
    width: 100%;
    height: 130%;
    background-image: url(../img/bg_hotels_pc03.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: -30px;
    padding-top: 51px;
    position: absolute;
    top: -290px;
    z-index: 2;
}
#experience .hotels .wrapper_bg04::after {
    content: "";
    display: block;
    width: 100%;
    height: 140%;
    background-image: url(../img/bg_hotels_pc04.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: -30px;
    padding-top: 51px;
    position: absolute;
    top: -290px;
    z-index: 1;
}
#experience .hotels .subheading {
    font-family: "Cormorant", serif;
    font-size: 42px;
    line-height: 2;
    letter-spacing: .04em;
    color: #FFF;
    text-align: center;
    font-weight: 400;
    padding-bottom: 35px;
    position: relative;
    z-index: 5;
}
#experience .hotels-lead_flexbox {
    max-width: 1180px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 80px;
    position: relative;
    z-index: 5;
}
#experience .hotels-lead::before,
#experience .wrapper_decoration::before {
    content: "";
    display: block;
    width: 450px;
    height: 1px;
    background-color: #FFF;
    position: absolute;
}
#experience .hotels-lead::after,
#experience .wrapper_decoration::after {
    content: "";
    display: block;
    width: 166px;
    height: 1px;
    background-color: #FFF;
    transform: rotate(90deg);
    position: absolute;
}
#experience .hotels-lead::before {
    top: -20px;
    left: 0;
}
#experience .hotels-lead::after {
    top: 33px;
    left: -53px;
}
#experience .wrapper_decoration {
    padding-left: 53px;
}
#experience .wrapper_decoration::before {
    bottom: -20px;
    right: 0;
}
#experience .wrapper_decoration::after {
    bottom: 33px;
    right: -53px;
}
#experience .hotels-lead p {
    font-size: 22px;
    line-height: 2;
    padding-bottom: 28px;
}
#experience .hotels-lead li {
    font-size: 17px;
    line-height: 1.3;
    padding-bottom: 10px;
    text-indent: -1em;
    padding-left: 1em;
}
#experience .hotels-lead li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 12px;
    margin-right: 8px;
    background-color: #D9D9D9;
}
#experience .hotels-lead_flexbox .hotels-lead {
    width: 480px;
    margin-top: 115px;
    margin-right: 30px;
    color: #FFF;
    position: relative;
    margin-right: 30px;
    flex-shrink: 0;
}
#experience .hotels-lead_flexbox .hotels-lead_images {
    width: 56.7797%;/*670px*/
    display: grid;
    gap: 2.6866%;/*18px*/
    grid-template-columns: 46.1195% 51.1941%;/*309px 343px*/
}
#experience .hotels-lead_flexbox .hotels-lead_images picture:nth-of-type(2),
#experience .hotels-lead_flexbox .hotels-lead_images picture:nth-of-type(3) {
    grid-column: 2 / 3;
}
#experience .hotels-lead_flexbox .hotels-lead_images picture:nth-of-type(1) {
    grid-row: 1 / 3;
}
#experience #suirankyoto {
    width: 1020px;
    margin-inline: auto;
    display: flex;
    justify-content: right;
    padding-bottom: 80px;
    position: relative;
    z-index: 5;
}
#experience #shisuinara {
    max-width: 1020px;
    margin-inline: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    padding-bottom: 80px;
    position: relative;
    z-index: 5;
}
#experience #iraphsui-okinawamiyako {
    max-width: 1020px;
    margin-inline: auto;
    display: flex;
    justify-content: right;
    padding-bottom: 90px;
    position: relative;
    z-index: 5;
}
#experience .other-hotels {
    width: 100%;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    place-content: start;
    position: relative;
    z-index: 5;
}

#experience .catch-copy {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: 7px;
    font-weight: 400;
    writing-mode: vertical-rl;
    display: flex;
    white-space: nowrap;
    align-items: center;
    padding-block: 41px;
    margin-top: -7px;
}
#experience #iraphsui-okinawamiyako .catch-copy {
    font-size: 40px;
    letter-spacing: 8px;
    padding-block: 13px;
    line-height: 1.4;
}
#experience .other-hotels .catch-copy {
    font-size: 26px;
    line-height: 1.6;
    letter-spacing: .04em;
    text-align: center;
    writing-mode: unset;
    display: block;
    white-space: unset;
    padding-block: unset;
    margin-top: unset;
    padding-bottom: 22px;
}
#experience .catch-copy::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #FFF;
    margin-top: 24px;
}
#experience .other-hotels .catch-copy::after {
    content: none;
}
#experience #iraphsui-okinawamiyako .catch-copy span > span:nth-of-type(2) {
    margin-top: 52px;
}
#experience #iraphsui-okinawamiyako .catch-copy::after {
    margin-top: 37px;
}
#experience .hotel-contents {
    width: 76.4706%;
}
#experience .other-hotels .hotel-contents {
    width: 100%;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    place-content: start;
}
#experience .hotel-contents .hotel-name {
    text-align: center;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .04em;
    font-weight: 500;
    padding-block: 45px 23px;
}
#experience .other-hotels .hotel-contents .hotel-name {
    padding-block: 27px 23px;
    border-bottom: 1px solid #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
#experience .hotel-contents .hotel-name::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 29px;
    background-color: #FFF;
}
#experience .other-hotels .hotel-contents .hotel-name::after {
    content: none;
}
#experience .hotel-contents .hotel-caption {
    font-size: 16px;
    line-height: 2;
    padding-block: 0px 24px;
}
#experience .other-hotels .hotel-contents .hotel-caption {
    padding-block: 24px;
}
#experience .hotel-contents .btn_reserve {
    display: block;
    width: 280px;
    height: 50px;
    margin-inline: auto;
    border: 1px solid #FFF;
    background-color: #B2A59F;
    font-size: 15px;
    font-family: yu-gothic-pr6n, sans-serif;
    font-weight: 600;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 40px;
}
#experience .other-hotels .hotel-contents .btn_reserve {
    margin-bottom: 32px;
}
#experience .hotel-contents .btn_reserve::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: solid 1px #FFF;
    border-right: solid 1px #FFF;
    transform: rotate(45deg);
    position: absolute;
    top: 43%;
    right: 9.5%;
}
#experience .hotel-contents .wrapper_exp {
    background-color: rgb(255 255 255 / .2);
    padding: 10px 40px 35px;
}
#experience .other-hotels .hotel-contents .wrapper_exp {
    padding: 10px 20px 35px;
}
#experience .wrapper_exp hgroup {
    padding-bottom: 30px;
}
#experience .other-hotels .wrapper_exp hgroup {
    padding-bottom: 24px;
}
#experience .wrapper_exp hgroup .eng {
    font-family: "Cormorant", serif;
    font-size: 33px;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1;
    color: #FFFEFA;
    opacity: .45;
}
#experience .wrapper_exp hgroup p {
    font-size: 28px;
    color: #817772;
    line-height: 1;
    margin-top: -9px;
}
#experience .wrapper_exp .exp_flexbox {
    display: flex;
    justify-content: space-between;
}
#experience .wrapper_exp .exp_flexbox li {
    width: 47.145%!important;
}
#experience .wrapper_exp .exp_grid {
    width: 100%;
    display: block !important;/*PC版のみswiper拒否*/
}
#experience .wrapper_exp .exp_grid li {
    width: 450px!important;
    display: grid;
    grid-template-columns: minmax(0, 42.2223%) minmax(0, 53.3334%);
    justify-content: space-between;
}
#experience .wrapper_exp .exp_grid li:nth-of-type(2) {
    grid-template-columns: minmax(0, 53.3334%) minmax(0, 42.2223%);
    padding-top: 13px;
}
#experience .wrapper_exp .exp_grid li picture {
    grid-row: 1 / 3;
}
#experience .wrapper_exp .exp_grid li:nth-of-type(2) picture {
    order: 3;
}
#experience .wrapper_exp .exp_grid li:nth-of-type(2) .exp-name {
    order: 1;
    grid-row: 1 / 2;
}
#experience .wrapper_exp .exp_grid li:nth-of-type(2) .exp-lead {
    order: 2;
    grid-row: 2 / 3;
}
#experience .wrapper_exp .exp-name {
    font-size: 18px;
    line-height: 2;
    font-weight: 400;
    padding-block: 7px 10px;
}
#experience .other-hotels .wrapper_exp .exp-name {
    line-height: 1;
    padding-block: 0 17px;
    margin-top: -3px;
    border-bottom: solid 1px #FFF;
}
#experience .wrapper_exp .exp-name::after {
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #FFF;
    margin-top: 10px;
}
#experience .other-hotels .wrapper_exp .exp-name::after {
    content: none;
}
#experience .wrapper_exp .exp-lead {
    font-size: 16px;
    line-height: 1.8;
}
#experience .other-hotels .wrapper_exp .exp-lead {
    font-size: 15px;
    padding-top: 11px;
}
#experience .wrapper_exp .exp-info {
    font-size: 14px;
    line-height: 1.6;
    padding-top: 6px;
}

@media screen and (max-width: 1240px) {
    #experience .hotels-lead_flexbox {
        max-width: 95.1613%;
    }
    #experience .hotels-lead_flexbox .hotels-lead {
        margin-top: 9.8%;
    }
}
@media screen and (max-width: 1130px) {
    #experience .hotels-lead_flexbox .hotels-lead {
        margin-top: 5%;
    }
    #experience #suirankyoto,
    #experience #shisuinara,
    #experience #iraphsui-okinawamiyako {
        width: 90.2655%;
    }
    #experience .hotel-contents .wrapper_exp {
        padding: 1.7955% 5.1283% 6.2841%;
    }
    #experience .hotels .wrapper_bg04 {
        grid-template-columns: minmax(0, 43.3629%) minmax(0, 43.3629%);
        gap: 0 4%;
    }
    #experience .other-hotels .hotel-contents .wrapper_exp {
        padding-inline: 4.0817%;
    }
    #experience .other-hotels .catch-copy {
        line-height: 1.2;
    }
    #experience .hotel-contents .hotel-name {
        line-height: 1.2;
    }
    #experience .other-hotels .wrapper_exp .exp-name {
        line-height: 1.2;
    }
    #experience .wrapper_exp .exp_grid li {
        width: 100%!important;
    }
}
@media screen and (max-width: 880px) {
    #experience .hotels-lead_flexbox {
        display: block;
    }
    #experience .hotels-lead_flexbox .hotels-lead {
        margin-inline: auto;
    }
    #experience .hotels-lead_flexbox .hotels-lead_images {
        width: 670px;
        gap: 18px;
        grid-template-columns: 309px 343px;
        margin-inline: auto;
        padding-top: 90px;
    }  
}
@media screen and (max-width: 700px) {
    #experience .hotels {
        margin-top: -1%;
    }
    #experience .hotels .wrapper_bg01 {
        padding-top: 7%;
    }
    #experience .hotels .wrapper_bg01::after {
        background-image: url(../img/bg_hotels_sp01.webp);
        height: 130%;
        background-position-y: unset;
        top: -12%;
        z-index: 1;
    }
    #experience .hotels .wrapper_bg02::after {
        background-image: url(../img/bg_hotels_sp02.webp);
        height: 165%;
        background-position-y: unset;
        padding-top: unset;
        top: -18%;
        z-index: 2;        
    }
    #experience .hotels .wrapper_bg03::after {
        background-image: url(../img/bg_hotels_sp03.webp);
        height: 130%;
        background-position-y: unset;
        padding-top: unset;
        top: -20%;
        z-index: 3;
    }
    #experience .hotels .wrapper_bg04::after {
        background-image: url(../img/bg_hotels_sp04.webp);
        height: 133%;
        background-position-y: unset;
        padding-top: unset;
        top: -12%;
        z-index: 4;
    }
    #experience .hotels .subheading {
        font-size: var(--sp-fs34);
        padding-bottom: 3%;
        text-align: center;
    }
    #experience .hotels-lead p {
        font-size: var(--sp-fs18);
        padding-bottom: 6.8%;
        text-align: center;
    }
    #experience .hotels-lead li {
        font-size: var(--sp-fs14);
        padding-bottom: 2.6%;
        text-indent: -1.2em;
        padding-left: 1.2em;
    }
    #experience .hotels-lead_flexbox {
        max-width: 100%;
    }
    #experience .hotels-lead_flexbox .hotels-lead {
        width: 100%;
        margin-top: 4.2%;
    }
    #experience .wrapper_decoration {
        padding-left: unset;
    }
    #experience .hotels-lead::before {
        width: 41.5%;
        top: -10.5%;
    }
    #experience .hotels-lead::after {
        width: 37.5%;
        top: 17.5%;
        left: -16.4%;
    }
    #experience .wrapper_decoration::after {
        width: 37.5%;
        bottom: 17.5%;
        right: -16.4%;
    }
    #experience .wrapper_decoration::before {
        width: 41.5%;
        bottom: -10.5%;
    }
    #experience .hotels-lead ul {
        padding-inline: 8% 4%;
    }
    #experience .hotels-lead li::before {
        width: 2.2667%;
        height: auto;
        aspect-ratio: 0.8334 / 1;
        margin-right: 3%;
    }
    #experience .hotels-lead_flexbox .hotels-lead_images {
        width: 100%;
        gap: 2.9%;
        grid-template-columns: minmax(0, 52%) minmax(0, 45.3334%);
        margin-inline: auto;
        padding-top: 14%;
    }
    #experience .hotels-lead_flexbox {
        padding-bottom: 22.2%;
    }
    #experience .catch-copy {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / .1;
        font-size: var(--sp-fs32);
        position: absolute;
        top: 0;
        left: 0;
        padding-block: unset;
        white-space: unset;
    }
    #experience .catch-copy span {
        display: block;
        white-space: nowrap;
        position: absolute;
    }
    #experience #suirankyoto .catch-copy span:nth-of-type(1) {
        top: -103%;
        left: 15.3%;
    }
    #experience #suirankyoto .catch-copy span:nth-of-type(2) {
        top: 0;
        left: 4%;
    }
    #experience #suirankyoto .catch-copy span:nth-of-type(2)::after {
        content: "";
        display: block;
        width: 17.8667vw;
        height: 1px;
        background-color: #FFF;
        transform: rotate(90deg);
        position: absolute;
        top: 160%;
        left: -35%;
    }

    #experience #shisuinara .catch-copy span:nth-of-type(1) {
        top: -103%;
        right: 5.5%;
    }
    #experience #shisuinara .catch-copy span:nth-of-type(2) {
        top: 0;
        right: 16.3%;
    }

    #experience #iraphsui-okinawamiyako .catch-copy {
        font-size: var(--sp-fs32);
        letter-spacing: .18em;
    }
    #experience #iraphsui-okinawamiyako .catch-copy span > span:nth-of-type(1) {
        top: -103%;
        left: 24.8%;
    }
    #experience #iraphsui-okinawamiyako .catch-copy span > span:nth-of-type(2) {
        margin-top: 0;
        top: 5%;
        left: 14.3%;
    }
    #experience #iraphsui-okinawamiyako .catch-copy span > span:nth-of-type(3) {
        top: 103%;
        left: 3.5%;
    }
    #experience #iraphsui-okinawamiyako .catch-copy span > span:nth-of-type(3)::after {
        content: "";
        display: block;
        width: 22.9334vw;
        height: 1px;
        background-color: #FFF;
        transform: rotate(90deg);
        position: absolute;
        top: 148%;
        left: -42%;
    }
    #experience #iraphsui-okinawamiyako .catch-copy .span-wrapper {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / .1;
    }

    #experience #suirankyoto,
    #experience #shisuinara,
    #experience #iraphsui-okinawamiyako {
        width: 100%;
    }
    #experience #suirankyoto {
        padding-bottom: 30%;
    }
    #experience #shisuinara {
        padding-bottom: 30.6%;
    }
    #experience #iraphsui-okinawamiyako {
        padding-bottom: 25.5%;
    }
    #experience .hotel-contents {
        width: 100%;
    }
    #experience .hotel-contents .hotel-image {
        width: 82.6667%;
        margin-left: 17.3334%;
    }
    #experience #shisuinara .hotel-contents .hotel-image {
        margin-left: unset;
    }
    #experience .catch-copy::after {
        content: none;
    }
    #experience .hotel-contents .hotel-name {
        font-size: 4.6934vw;
        line-height: 1.6;
        padding-block: 4%;
    }
    #experience #iraphsui-okinawamiyako .hotel-contents .hotel-name {
        font-size: 4.24vw;
    }
    #experience .hotel-contents .hotel-name::after {
        width: 89.3334%;
        margin-inline: auto;
        margin-top: 3.7%;
    }
    #experience .hotel-contents .hotel-caption {
        width: 89.3334%;
        margin-inline: auto;
        font-size: 3.68vw;
        padding-block: 1.3% 4.2%;
    }
    #experience .hotel-contents .btn_reserve {
        width: 63.4667%;
        height: auto;
        aspect-ratio: 1 / 0.1786;
        font-size: var(--sp-fs14);
        margin-bottom: 8.7%;
    }
    #experience .hotel-contents .wrapper_exp {
        width: 89.3334%;
        margin-inline: auto;
        position: relative;
    }
    #experience .wrapper_exp hgroup .eng {
        font-size: var(--sp-fs28);
    }
    #experience .wrapper_exp hgroup p {
        font-size: var(--sp-fs23);
        margin-top: -2%;
    }
    #experience .wrapper_exp .exp-name {
        font-size: var(--sp-fs16);
        padding-block: 1.5% 3%;
    }
    #experience .wrapper_exp .exp-lead {
        font-size: var(--sp-fs14);
    }
    #experience .wrapper_exp .exp-info {
        font-size: var(--sp-fs12);
        padding-top: 0.8%;
        line-height: 1.8;
    }
    #experience .hotel-contents .wrapper_exp {
        padding: 1.4% 4.0817% 6.2841%;
    }
    #experience .wrapper_exp hgroup {
        padding-bottom: 5.5%;
    }
    #experience .wrapper_exp .exp_flexbox li {
        width: 100%!important;
        margin-inline: auto;
    }
    #experience .wrapper_exp .exp-name::after {
        margin-top: 3.5%;
    }
    #experience .hotels .wrapper_bg04 {
        display: block;
    }
    #experience .other-hotels .catch-copy {
        font-size: var(--sp-fs26);
        line-height: 1.5;
    }
    #experience .other-hotels {
        display: block;
        padding-bottom: 26%;
    }
    #experience .other-hotels:last-of-type {
        padding-bottom: 12.5%;
    }
    #experience .other-hotels .catch-copy {
        position: unset;
        padding-bottom: 4.5%;
    }
    #experience .other-hotels .hotel-contents .hotel-image {
        width: 89.3334%;
        margin-inline: auto;
    }
    #experience .other-hotels .hotel-contents {
        display: block;
    }
    #experience .other-hotels .hotel-contents .hotel-name {
        font-size: 4.9867vw;
        padding-block: 4% 3.5%;
        width: 89.3334vw;
        margin-inline: auto;
    }
    #experience .other-hotels .hotel-contents .hotel-caption {
        padding-block: 5.3%;
        font-size: 3.6267vw;
    }
    #experience .other-hotels .hotel-contents .btn_reserve {
        margin-bottom: 8.6%;
    }
    #experience .other-hotels .hotel-contents .wrapper_exp {
        padding: 2.9% 4.0817% 6.5%;
    }
    #experience .wrapper_exp .exp_grid {
        display: flex!important;
    }
    #experience .wrapper_exp .exp_grid li {
        display: block;
    }
    #experience .other-hotels .wrapper_exp hgroup {
        padding-bottom: 6%;
    }
    #experience .other-hotels .wrapper_exp .exp-name {
        line-height: 1.2;
        padding-block: 5.5% 4.5%;
    }
    #experience .other-hotels .wrapper_exp .exp-lead {
        font-size: var(--sp-fs14);
        padding-top: 3%;
    }
}
/* /hotels */

/* swiper reset */
@media screen and (min-width: 701px) {
    .swiper-pagination,
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
	.swiper_carousel .swiper-wrapper {
		transform: translate3d(0px, 0px, 0px) !important;
	}
    .swiper_carousel .swiper-wrapper .swiper-slide {
        margin-right: unset!important;
    }
}
@media screen and (max-width: 700px) {
    .swiper-pagination-bullet {
        width: 9.5523%;
        height: auto;
        aspect-ratio: 1 / 0.0625;
        border-radius: 0;
        background: #FFF;
        opacity: .4;
    }
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 1%;
        display: inline-block;
    }
    .swiper-pagination-bullet-active {
        opacity: 1;
        background: #FFF;
    }
    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        right: 0;
        left: 0;
        bottom: -6.6%;
        margin-inline: auto;
    }

    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
        display: none;
    }
    .swiper-button-next,
    .swiper-button-prev {
        width: 10.15%;
        height: auto;
        aspect-ratio: 1 / 2.9412;
        border-radius: .4em 0 0 .4em;
        background-color: rgb(178 165 159 / .9);
        display: flex;
        justify-content: center;
        align-items: center;
        right: -6%;
        left: auto;
        top: 43%;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: "";
        display: block;
        font-family: unset;
        font-size: unset;
        width: 35%;
        height: auto;
        aspect-ratio: 1 / 1.6;
        background-image: url(../img/icon_swiper-vector.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        text-transform: none !important;
    }
    .swiper-button-prev {
        transform: scale(-1, 1);
        left: -6%;
    }
    .swiper_carousel {
        width: 92.15%!important;
        margin-inline: auto;
    }
}
/* /swiper reset */