@charset "utf-8";

:root {
    --color-base: #454545;
    --color-blue: #00859D;
    --color-green: #3CAFA3;
    --color-white: #ffffff;
    --radius-size: 50px;
    --radius-size-small: 30px;
    --width-pc: 1920;
    --inner-width-pc: 1280;
    --inner-width-sp: 750;
}

.content-main {
    padding-bottom: min(calc(100vw*220/var(--inner-width-pc)), 220px);
    font-size: 18px;
    line-height: 1.44;
    color: var(--color-base);
}
@media screen and (max-width: 1280px) {
    .content-main {
        overflow-x: hidden;
    }
}
@media screen and (max-width: 1280px) and (min-width: 788px) {
    .content-main .sec-inner {
        padding: 0 min(calc(100% * 50 / var(--inner-width-pc)), 50px);
    }
}
.content-main p {
    font-size: 18px;
    line-height: 1.44;
}
.content-main p:last-child {
    margin-bottom: 0;
}
.content-main img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.content-main a{
    transition: opacity .25s;
}
.content-main a:hover{
    opacity: .7;
}
.content-main .sec-inner {
    max-width: calc(1px*var(--inner-width-pc));
    margin: 0 auto;
}
.content-main .sec-txt h2, .content-main .sec-txt h3, .content-main .sec-txt h4, .content-main .sec-txt h5, .content-main .sec-txt h4, .content-main .sec-txt p, .content-main .sec-txt li, .content-main .sec-txt dt, .content-main .sec-txt dd, .content-main table p {
    transform: rotate(-0.3deg);
}
.drop-shadow {
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.content-main .grid {
    margin-bottom: min(calc(100vw*100/var(--inner-width-pc)), 100px);
    position: relative;
    display: flex;
}
.content-main .grid.col-2 {
    gap: min(calc(100vw*50/var(--inner-width-pc)), 50px);
}
.content-main .grid.col-3 {
    gap: min(calc(100vw*40/var(--inner-width-pc)), 40px);
}
.content-main .grid .item {
    flex: 1;
}
.content-main .grid .img img {
    border-radius: var(--radius-size-small);
}
.content-main .grid .img:not(:last-child) {
    margin-bottom: min(calc(100vw*30/var(--inner-width-pc)), 30px);
}
.content-main .grid .ti {
    font-weight: bold;
    font-size: inherit;
    margin-bottom: 1em;
}
.content-main .sec-block.-bg-white .grid .ti {
    color: var(--color-blue);
}

.sec-block.-bg-art,
.sec-block-item.-bg-art  {
    color: var(--color-white);
    background-color: var(--color-green);
}
.sec-block a {
    color: var(--color-blue);
    text-decoration: underline;
}
.sec-block .btn {
    margin: 0 auto;
    width: min(calc(100vw*400/var(--inner-width-pc)), 400px);
    height: min(calc(100vw*100/var(--inner-width-pc)), 100px);
}
.sec-block .btn a {
    border-radius: var(--radius-size);
    position: relative;
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
}
.sec-block .btn .btn-txt {
    line-height: 1;
    display: inline-block;
    width: min(calc(100vw*74/var(--inner-width-pc)), 74px);
}
.sec-block .btn .btn-txt img {
    display: block;
}
.sec-block .btn a::after {
    content: "";
    background: url("../images/ico_arrow.svg") no-repeat 50% 50% / 100% 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: min(calc(100vw*35/var(--inner-width-pc)), 35px);
    width: min(calc(100vw*22/var(--inner-width-pc)), 22px);
    height: min(calc(100vw*22/var(--inner-width-pc)), 22px);
}
.sec-block.-bg-white .btn a {
    background: url("../images/bg_btn.jpg") no-repeat 50% 50% / auto 100%;
}
.sec-block.-bg-art .btn a,
.sec-block-item.-bg-art .btn a {
    background: var(--color-white);
}
.sec-block.-bg-white .btn a::after {
    background-image: url("../images/ico_arrow02.svg");
}
.sec-block.-bg-art .btn a::after,
.sec-block-item.-bg-art .btn a::after {
    background-image: url("../images/ico_arrow.svg");
}
.sec-block .head-area {
    display: flex;
    align-items: center;
    position: relative;
    height: min(calc(100vw*625/1280), 625px);
}
.sec-block .head-area .ti-item,
.sec-block .head-area .body-item {
    position: relative;
    z-index: 2;
}
.sec-block .head-area .img-item {
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 75%;
    height: 100%;
}
.sec-block .head-area .img-item .img {
    height: 100%;
}
.sec-block .head-area .img-item img {
    height: 100%;
    object-fit: cover;
}
.sec-block .sec-ti {
    margin-bottom: min(calc(100vw*50/var(--inner-width-pc)), 50px);
}
.sec-block .head-area.-left {
    padding-right: 50%;
}
.sec-block .head-area.-left .img-item {
    left: 50%;
    border-radius: var(--radius-size) 0 0 var(--radius-size);
}
.sec-block .head-area.-left  .img-item img {
    object-position: 100% 50%;
}
.sec-block .head-area.-right {
    padding-left: 50%;
}
.sec-block .head-area.-right .img-item {
    right: 50%;
    border-radius: 0 var(--radius-size) var(--radius-size) 0;
}
.sec-block .head-area.-right  .img-item img {
    object-position: 0 50%;
}

/* summer-header
-----------------------------------------------------------------------*/
.summer-header {
    margin-top: 120px;
    position: relative;
}
.summer-header .img-item {
    position: relative;
    z-index: 1;
}
.summer-header .img-item img {
    object-position: 50% 100%;
}
.summer-header .sec-inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1920px) and (min-width: 788px) {
    .summer-header .sec-inner {
        width: calc(100vw*var(--inner-width-pc)/var(--width-pc));
    }
}
.summer-header .lead {
    position: absolute;
    top: min(calc(100vw*170/var(--width-pc)), 170px);
    left: max(calc(-100vw*310/var(--width-pc)), -310px);
    width: min(calc(100vw*767/var(--width-pc)), 767px);
}
.summer-header .title {
    position: absolute;
    top: min(calc(100vw*280/var(--width-pc)), 280px);
    right: max(calc(-100vw*95/var(--width-pc)), -95px);
    width: min(calc(100vw*540/var(--width-pc)), 540px);
}

/* sec-stay
-----------------------------------------------------------------------*/
.sec-stay {
    padding-bottom: min(calc(100vw*300/var(--inner-width-pc)), 300px);
}
.sec-stay .head-area {
    margin-bottom: min(calc(100vw*104/var(--inner-width-pc)), 104px);
    height: auto;
}
.sec-stay .ti-en {
    margin-bottom: min(calc(100vw * 50 / var(--inner-width-pc)), 50px);
    width: min(calc(100vw*480/var(--inner-width-pc)), 480px);
}
.sec-stay .sec-ti {
    width: min(calc(100vw*482/var(--inner-width-pc)), 482px);
}
.video-item {
    margin: 0 auto;
    border-radius: var(--radius-size);
    overflow: hidden;
    position: relative;
    width: min(calc(100vw*800/var(--inner-width-pc)), 800px);
    aspect-ratio: 16/9;
}
.video-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* sec-pool-beach
-----------------------------------------------------------------------*/
.sec-pool-beach {
    padding: min(calc(100vw*485/var(--inner-width-pc)), 485px) 0 min(calc(100vw*480/var(--inner-width-pc)), 480px);
    background-repeat: no-repeat;
    background-image: url("../images/bg_pb02.svg"), url("../images/bg_pb03.svg");
    background-position: 50% -1px, 50% calc(100% + 1px);
    background-size: 100% auto, 100% auto;
}
.sec-pool-beach .sec-intro .head-area {
    margin-bottom: min(calc(100vw*100/var(--inner-width-pc)), 100px);
    display: block;
    height: auto;
}
.sec-pool-beach .sec-intro .head-area .head-area-inner {
    display: flex;
    flex-direction: column;
}
.sec-pool-beach .sec-intro .head-area .ti-item {
    order: 0;
}
.sec-pool-beach .sec-intro .head-area .ti-en {
    margin-bottom: min(calc(100vw*70/var(--inner-width-pc)), 70px);
    width: min(calc(100vw*530/var(--inner-width-pc)), 530px);
}
.sec-pool-beach .sec-intro .head-area .sec-ti {
    width: min(calc(100vw*428/var(--inner-width-pc)), 428px);
}
.sec-pool-beach .sec-intro .head-area .img-item {
    order: 2;
    margin-top: max(calc(-100vw*295/var(--inner-width-pc)), -295px);
    margin-left: max(calc(-100vw*120/var(--inner-width-pc)), -120px);
    position: relative;
    left: 0;
    width: min(calc(100vw*1906/var(--inner-width-pc)), 1906px);
}
.sec-pool-beach .sec-intro .head-area .body-item {
    order: 1;
}
.map-item .ti-en {
    position: absolute;
    top: max(calc(-100vw*60/var(--inner-width-pc)), -60px);
    left: min(calc(100vw*20/var(--inner-width-pc)), 20px);
    width: min(calc(100vw*423/var(--inner-width-pc)), 423px);
}
.map-item .map {
    margin-bottom: min(calc(100vw*50/var(--inner-width-pc)), 50px);
    position: relative;
}
.map-item .img {
    border-radius: var(--radius-size);
    overflow: hidden;
}
.map-item .btn .btn-txt {
    width: min(calc(100vw*193/var(--inner-width-pc)), 193px);
}
.sec-pool,
.sec-beach {
    padding-top: min(calc(100vw*300/var(--inner-width-pc)), 300px);
}
.sec-pool .head-area,
.sec-beach .head-area {
    margin-bottom: min(calc(100vw*100/var(--inner-width-pc)), 100px);
}
.sec-pool .ti-item,
.sec-pool .body-item {
    padding-left: min(calc(100vw*100/var(--inner-width-pc)), 100px);
}
.sec-pool .ti-item .sec-ti {
    width: min(calc(100vw*480/var(--inner-width-pc)), 480px);
}
.sec-beach .ti-item .sec-ti {
    width: min(calc(100vw*553/var(--inner-width-pc)), 553px);
}
.sec-beach .body-item {
    padding-right: min(calc(100vw*100/var(--inner-width-pc)), 100px);
}
.sec-beach .body-item .ti {
    margin: min(calc(100vw*58/var(--inner-width-pc)), 58px) 0 1em;
    font-weight: bold;
    font-size: inherit;
}
.sec-beach .grid {
    margin-bottom: min(calc(100vw*80/var(--inner-width-pc)), 80px);
}
.sec-beach .item {
    position: relative;
}
.sec-beach .item .ti {
    margin-bottom: 0;
    font-size: inherit;
}
.sec-beach .item .label-en {
    position: absolute;
    top: max(calc(-100vw*5/var(--inner-width-pc)), -5px);
    left: min(calc(100vw*10/var(--inner-width-pc)), 10px);
    width: min(calc(100vw*147/var(--inner-width-pc)), 147px);
}

/* sec-all-inclusive
-----------------------------------------------------------------------*/
.sec-all-inclusive {
    margin-bottom: min(calc(100vw*305/var(--inner-width-pc)), 305px);
}
.sec-all-inclusive .sec-intro {
    margin: min(calc(100vw*220/var(--inner-width-pc)), 220px) 0 min(calc(100vw*195/var(--inner-width-pc)), 195px);
    padding-top: min(calc(100vw*80/var(--inner-width-pc)), 80px);
}
.sec-all-inclusive .sec-intro .head-area {
    margin-bottom: min(calc(100vw*100/var(--inner-width-pc)), 100px);
}
.sec-all-inclusive .sec-intro .ti-item,
.sec-all-inclusive .sec-intro .body-item {
    padding-right: 100px;
}
.sec-all-inclusive .sec-intro .ti-item {
    position: relative;
}
.sec-all-inclusive .sec-intro .ti-en {
    position: absolute;
    left: 0;
    top: max(calc(-100vw*245/var(--inner-width-pc)), -245px);
    width: min(calc(100vw*509/var(--inner-width-pc)), 509px);
}
.sec-all-inclusive .sec-intro .sec-ti {
    width: min(calc(100vw*482/var(--inner-width-pc)), 482px);
}

.sec-lounge {
    padding-top: min(calc(100vw*105/var(--inner-width-pc)), 105px);
}
.sec-lounge.-bg-art {
    background: transparent;
}
.sec-lounge .ti-item,
.sec-lounge .body-item {
    padding-left: 100px;
}
.sec-lounge .head-area {
    margin-bottom: min(calc(100vw*66/var(--inner-width-pc)), 66px);
}
.sec-lounge .head-area .sec-ti {
    width: min(calc(100vw*479/var(--inner-width-pc)), 479px);
    font-size: 100%;
}
.sec-lounge .head-area .sec-ti .label {
    margin-bottom: min(calc(100vw*27/var(--inner-width-pc)),27px);
    padding: 0 min(calc(100vw*15/var(--inner-width-pc)), 15px);
    background: var(--color-white);
    color: var(--color-blue);
    line-height: 2.14;
    font-weight: bold;
    font-size: 77%;
    display: inline-block;
}
.sec-lounge .btn {
    margin: min(calc(100vw*50/var(--inner-width-pc)),50px) 0 0;
}
.sec-lounge .grid {
    margin-bottom: 0;
}

/* sec-recommendation
-----------------------------------------------------------------------*/
.sec-recommendation .ti-en {
    margin-bottom: min(calc(100vw*75/var(--inner-width-pc)), 75px);
    width: min(calc(100vw*690/var(--inner-width-pc)), 690px);
}
.sec-recommendation .sec-ti {
    width: min(calc(100vw*440/var(--inner-width-pc)), 440px);
}
.sec-recommendation .txt-lead {
    margin-bottom: min(calc(100vw*50/var(--inner-width-pc)), 50px);
}
.sec-recommendation .item a {
    color: var(--color-base);
    text-decoration: none;
}
.sec-recommendation .cate {
    margin-bottom: min(calc(100vw*12/var(--inner-width-pc)), 12px);
    padding: 0 min(calc(100vw*15/var(--inner-width-pc)), 15px);
    border: 1px solid var(--color-blue);
    color: var(--color-blue);
    line-height: 2.14;
    font-weight: bold;
    font-size: 77%;
    display: inline-block;
}
.sec-recommendation .title {
    font-weight: normal;
    font-size: 100%;
}
.sec-recommendation .attention {
    margin-top: min(calc(100vw*100/var(--inner-width-pc)), 100px);
    padding: min(calc(100vw*54/var(--inner-width-pc)), 54px) min(calc(100vw*50/var(--inner-width-pc)), 50px) min(calc(100vw*50/var(--inner-width-pc)), 50px);
    border: 1px solid var(--color-base);
    border-radius: var(--radius-size-small);
}
.sec-recommendation .attention .note {
    list-style: none;
}

/* ***************************************************
    SP
*************************************************** */
@media screen and (max-width: 787px) {
    :root {
        --radius-size: min(calc(100vw*50/var(--inner-width-sp)), 50px);
        --radius-size-small: min(calc(100vw*30/var(--inner-width-sp)), 30px);
    }

    .content-main {
        padding-bottom: 0;
        overflow-x: hidden;
    }

    .content-main,
    .content-main p {
        font-size: 14px;
        line-height: 1.42;
    }
    .content-main .sec-inner {
        max-width: min(calc(100vw*650/var(--inner-width-sp)), 650px);
    }
    .drop-shadow {
        box-shadow: 0 0 calc(100vw*10/var(--inner-width-sp)) rgba(0,0,0,0.25);
    }
    .sec-block .sec-ti {
        margin-bottom: min(calc(100vw*52/var(--inner-width-sp)), 52px);
    }
    .content-main .grid {
        margin-bottom: min(calc(100vw*105/var(--inner-width-sp)), 105px);
        display: flex;
    }
    .content-main .grid-scroll-cover {
        margin: 0 max(calc(-100vw*50/var(--inner-width-sp)), -50px) min(calc(100vw*70/var(--inner-width-sp)), 70px);
        padding: 0 0 min(calc(100vw*35/var(--inner-width-sp)), 35px) min(calc(100vw*50/var(--inner-width-sp)), 50px);
        overflow-x: scroll;
    }
    .content-main .grid.col-2 {
        margin-bottom: min(calc(100vw*112/var(--inner-width-sp)), 112px);
        gap: min(calc(100vw*105/var(--inner-width-sp)), 105px);
        flex-direction: column;
    }
    .content-main .grid-scroll-cover .grid.col-2,
    .content-main .grid.col-3 {
        margin-bottom: 0;
        flex-direction: row;
        gap: min(calc(100vw*50/var(--inner-width-sp)), 50px);
    }
    .content-main .grid-scroll-cover .grid.col-2 .item,
    .content-main .grid.col-3 .item {
        min-width: min(calc(100vw*512/var(--inner-width-sp)), 512px);
    }
    .content-main .grid-scroll-cover .grid .item:last-child {
        padding-right: min(calc(100vw*50/var(--inner-width-sp)), 50px);
        min-width: min(calc(100vw*562/var(--inner-width-sp)), 562px);
    }
    .content-main .grid .img:not(:last-child) {
        margin-bottom: min(calc(100vw*25/var(--inner-width-sp)), 25px);
    }
    .sec-block .btn {
        width: min(calc(100vw*450/var(--inner-width-sp)), 450px);
        height: min(calc(100vw*120/var(--inner-width-sp)), 120px);
    }
    .sec-block .btn a {
        border-radius: min(calc(100vw*60/var(--inner-width-sp)), 60px);
    }
    .sec-block .btn .btn-txt {
        width: min(calc(100vw*86/var(--inner-width-sp)), 86px);
    }
    .sec-block .btn a::after {
        right: min(calc(100vw*35/var(--inner-width-sp)), 38px);
        width: min(calc(100vw*22/var(--inner-width-sp)), 22px);
        height: min(calc(100vw*22/var(--inner-width-sp)), 22px);
    }

    .sec-block .head-area {
        display: block;
        height: auto;
    }
    .sec-block .head-area .img-item {
        margin-bottom: min(calc(100vw*58/var(--inner-width-sp)), 58px);
        position: static;
        width: auto;
        height: auto;
    }
    .sec-block .head-area.-left,
    .sec-block .head-area.-right {
        padding: 0;
    }
    .sec-block .head-area.-left .img-item {
        margin-right: max(calc(-100vw*50/var(--inner-width-sp)), -50px);
        margin-left: max(calc(-100vw*25/var(--inner-width-sp)), -25px);
    }
    .sec-block .head-area.-right .img-item {
        margin-left: max(calc(-100vw*50/var(--inner-width-sp)), -50px);
        margin-right: max(calc(-100vw*25/var(--inner-width-sp)), -25px);
    }

    /* summer-header
    -----------------------------------------------------------------------*/
    .summer-header {
        margin-top: 100px;
    }
    .summer-header .img-item {
        background-image: url("../images/bg_head_sp.jpg");
    }
    .summer-header .lead {
        top: min(calc(100vw*520/var(--inner-width-sp)), 520px);
        left: auto;
        right: max(calc(-100vw*50/var(--inner-width-sp)), -50px);
        width: min(calc(100vw*610/var(--inner-width-sp)), 610px);
    }
    .summer-header .title {
        top: min(calc(100vw*170/var(--inner-width-sp)), 170px);
        right: auto;
        left: max(calc(-100vw*25/var(--inner-width-sp)), -25px);
        width: min(calc(100vw*465/var(--inner-width-sp)), 465px);
    }

    /* sec-stay
    -----------------------------------------------------------------------*/
    .sec-stay {
        padding: min(calc(100vw*120/var(--inner-width-sp)), 120px) 0 min(calc(100vw*300/var(--inner-width-sp)), 300px);
    }
    .sec-stay .head-area {
        margin-bottom: min(calc(100vw*106/var(--inner-width-sp)), 106px);
    }
    .sec-stay .ti-en {
        margin-bottom: min(calc(100vw*50/var(--inner-width-sp)), 50px);
        width: min(calc(100vw*480/var(--inner-width-sp)), 480px);
    }
    .sec-stay .sec-ti {
        width: min(calc(100vw*547/var(--inner-width-sp)), 547px);
    }
    .video-item {
        width: 100%;
    }

    /* sec-pool-beach
    -----------------------------------------------------------------------*/
    .sec-pool-beach {
        padding: min(calc(100vw*350/var(--inner-width-sp)), 350px) 0 min(calc(100vw*370/var(--inner-width-sp)), 370px);
        background-image: url("../images/bg_pb02_sp.svg"), url("../images/bg_pb03_sp.svg");
        background-size: 100% auto, 100% auto;
    }
    .sec-pool-beach .sec-intro .head-area {
        margin-bottom: min(calc(100vw*196/var(--inner-width-sp)), 196px);
        padding-bottom: 0;
    }
    .sec-pool-beach .sec-intro .head-area .ti-en {
        margin-bottom: min(calc(100vw*75/var(--inner-width-sp)), 75px);
        width: min(calc(100vw*536/var(--inner-width-sp)), 536px);
    }
    .sec-pool-beach .sec-intro .head-area .sec-ti {
        width: min(calc(100vw*486/var(--inner-width-sp)), 486px);
    }
    .sec-pool-beach .sec-intro .head-area .img-item {
        margin-top: max(calc(-100vw*140/var(--inner-width-sp)),-140px);
        margin-left: max(calc(-100vw*300/var(--inner-width-sp)),-300px);
        order: 1;
        width: calc(100vw*1502/var(--inner-width-sp));
    }
    .sec-pool-beach .sec-intro .head-area .body-item {
        order: 2;
    }
    .map-item .map {
        margin: 0 max(calc(-100vw*25/var(--inner-width-sp)), -25px) min(calc(100vw*100/var(--inner-width-sp)), 100px);
    }
    .map-item .ti-en {
        top: max(calc(-100vw*82/var(--inner-width-sp)), -82px);
        left: min(calc(100vw*20/var(--inner-width-sp)), 25px);
        width: min(calc(100vw*423/var(--inner-width-sp)), 416px);
    }
    .map-item .btn .btn-txt {
        width: min(calc(100vw*225/var(--inner-width-sp)), 225px);
    }
    .sec-pool,
    .sec-beach {
        padding-top: min(calc(100vw*300/var(--inner-width-sp)), 257px);
    }
    .sec-pool .head-area,
    .sec-beach .head-area {
        margin-bottom: min(calc(100vw*95/var(--inner-width-sp)), 95px);
    }
    .sec-pool .ti-item,
    .sec-pool .body-item {
        padding-left: 0;
    }
    .sec-pool .ti-item .sec-ti {
        width: min(calc(100vw*546/var(--inner-width-sp)), 546px);
    }
    .sec-beach .ti-item .sec-ti {
        width: min(calc(100vw*559/var(--inner-width-sp)), 559px);
    }
    .sec-beach .body-item {
        padding-right: 0;
    }
    .sec-beach .body-item .ti {
        margin-top: min(calc(100vw*63/var(--inner-width-sp)), 63px);
    }
    .sec-beach .grid.col-2 {
        margin-bottom: min(calc(100vw*80/var
        (--inner-width-sp)), 80px);
    }
    .sec-beach .grid-scroll-cover {
        margin-top: max(calc(100vw*-20/var(--inner-width-sp)), -20px);
        padding-top: min(calc(100vw*20/var(--inner-width-sp)), 20px);
    }
    .sec-beach .item .label-en {
        top: max(calc(-100vw*18/var(--inner-width-sp)), -18px);
        left: min(calc(100vw*10/var(--inner-width-sp)), 10px);
        width: min(calc(100vw*204/var(--inner-width-sp)), 204px);
    }

    /* sec-all-inclusive
    -----------------------------------------------------------------------*/
    .sec-all-inclusive {
        margin-bottom: min(calc(100vw*310/var(--inner-width)), 310px);
    }
    .sec-all-inclusive .sec-intro {
        margin: min(calc(100vw*300/var(--inner-width-sp)), 300px) 0 min(calc(100vw*168/var(--inner-width-sp)), 168px);
        padding-top: 0;
    }
    .sec-all-inclusive .sec-intro .head-area {
        margin-bottom: min(calc(100vw*95/var(--inner-width-sp)), 95px);
    }
    .sec-all-inclusive .sec-intro .ti-item,
    .sec-all-inclusive .sec-intro .body-item {
        padding-right: 0;
    }
    .sec-all-inclusive .sec-intro .ti-en {
        margin-bottom: min(calc(100vw*75/var(--inner-width-sp)), 75px);
        position: static;
        width: min(calc(100vw*510/var(--inner-width-sp)), 510px);
    }
    .sec-all-inclusive .sec-intro .sec-ti {
        width: min(calc(100vw*482/var(--inner-width-sp)), 482px);
    }

    .sec-lounge {
        padding-top: min(calc(100vw*132/var(--inner-width-sp)), 132px);
    }
    .sec-lounge .ti-item,
    .sec-lounge .body-item {
        padding-left: 0;
    }
    .sec-lounge .head-area {
        margin-bottom: min(calc(100vw*100/var(--inner-width-sp)), 100px);
    }
    .sec-lounge .head-area .sec-ti {
        width: min(calc(100vw*479/var(--inner-width-sp)), 479px);
    }
    .sec-lounge .head-area .sec-ti .label {
        margin-bottom: min(calc(100vw*25/var(--inner-width-sp)),25px);
        padding: 0 min(calc(100vw*15/var(--inner-width-sp)), 15px);
        line-height: 1.9;
        font-size: 78.5%;
    }
    .sec-lounge .btn {
        margin: min(calc(100vw*50/var(--inner-width-sp)),50px) auto 0;
    }
    .sec-lounge .grid.col-2 {
        margin-bottom: 0;
        gap: min(calc(100vw * 50 / var(--inner-width-sp)), 50px);
    }

    /* sec-recommendation
    -----------------------------------------------------------------------*/
    .sec-recommendation {
        padding: min(calc(100vw*300/var(--inner-width-sp)),310px) 0 0;
    }
    .sec-recommendation .ti-en {
        margin-bottom: min(calc(100vw*60/var(--inner-width-sp)), 60px);
        width: min(calc(100vw*685/var(--inner-width-sp)), 685px);
    }
    .sec-recommendation .sec-ti {
        width: min(calc(100vw*387/var(--inner-width-sp)), 387px);
    }
    .sec-recommendation .txt-lead {
        margin-bottom: min(calc(100vw*56/var(--inner-width-sp)), 56px);
    }
    .sec-recommendation .cate {
        margin-bottom: min(calc(100vw*30/var(--inner-width-sp)), 30px);
        padding: 0 min(calc(100vw*15/var(--inner-width-sp)), 15px);
        line-height: 1.9;
        font-size: 78.5%;
    }
    .sec-recommendation .attention {
        margin-top: min(calc(100vw*50 /var(--inner-width-sp)), 50px);
        padding: min(calc(100vw*50/var(--inner-width-sp)), 50px);
    }
}

/* art
-----------------------------------------------------------------------*/
@media screen and (min-width: 788px) {
    .sec-block .head-area::before {
        content: "";
        background: no-repeat 50% 50% / 100% 100%;
        position: absolute;
        pointer-events: none;
    }
    .sec-stay .head-area::before {
        background-image: url("../images/bg_stay.png");
        top: 0;
        left: max(calc(100vw*-290/var(--inner-width-pc)), -290px);
        width: min(calc(100vw*1010/var(--inner-width-pc)), 1010px);
        height: min(calc(100vw*1401/var(--inner-width-pc)), 1401px);
    }
    .sec-pool-beach .sec-intro .head-area::before {
        background-image: url("../images/bg_pb01.png");
        top: max(calc(100vw*-500/var(--inner-width-pc)), -500px);
        left: max(calc(100vw*-645/var(--inner-width-pc)), -645px);
        width: min(calc(100vw*1963/var(--inner-width-pc)), 1963px);
        height: min(calc(100vw*1844/var(--inner-width-pc)), 1844px);
    }
    .sec-pool .head-area::before {
        background-image: url("../images/bg_pool.png");
        top: max(calc(100vw*-380/var(--inner-width-pc)), -380px);
        left: max(calc(100vw*-805/var(--inner-width-pc)), -805px);
        width: min(calc(100vw*1590/var(--inner-width-pc)), 1590px);
        height: min(calc(100vw*1225/var(--inner-width-pc)), 1225px);
    }
    .sec-beach .head-area::before {
        background-image: url("../images/bg_beach.png");
        top: max(calc(100vw*-770/var(--inner-width-pc)), -770px);
        right: max(calc(100vw*-1240/var(--inner-width-pc)), -1240px);
        width: min(calc(100vw*2344/var(--inner-width-pc)), 2344px);
        height: min(calc(100vw*2187/var(--inner-width-pc)), 2187px);
    }
    .sec-all-inclusive .sec-intro .head-area::before {
        background-image: url("../images/bg_all.png");
        top: max(calc(100vw*-390/var(--inner-width-pc)), -390px);
        right: max(calc(100vw*-1050/var(--inner-width-pc)), -1050px);
        width: min(calc(100vw*1765/var(--inner-width-pc)), 1765px);
        height: min(calc(100vw*1602/var(--inner-width-pc)), 1602px);
    }
    .sec-lounge .head-area::before {
        background-image: url("../images/bg_lounge.jpg");
        top: max(calc(100vw*-115/var(--inner-width-pc)), -115px);
        left: max(calc(100vw*-540/var(--inner-width-pc)), -540px);
        width: min(calc(100vw*2106/var(--inner-width-pc)), 2106px);
        height: min(calc(100vw*1119/var(--inner-width-pc)), 1119px);
    }
}

@media screen and (max-width: 787px) {
    .sec-block,
    .sec-block-item {
        position: relative;
    }
    .sec-block::before,
    .sec-block-item::before {
        content: "";
        background: no-repeat 50% 50% / 100% 100%;
        position: absolute;
        left: 0;
        width: 100vw;
        pointer-events: none;
    }
    .sec-stay::before {
        background-image: url("../images/bg_stay_sp.png");
        position: absolute;
        bottom: 0;
        height: min(calc(100vw*800/var(--inner-width-sp)), 800px);
    }
    .sec-pool-beach .sec-intro::before {
        background-image: url("../images/bg_pb01_sp.png");
        top: max(calc(100vw*-200/var(--inner-width-sp)), -200px);
        height: min(calc(100vw*1770/var(--inner-width-sp)), 1770px);
    }
    .sec-pool::before {
        background-image: url("../images/bg_pool_sp.png");
        top: 0;
        height: min(calc(100vw*912/var(--inner-width-sp)), 912px);
    }
    .sec-beach::before {
        background-image: url("../images/bg_beach_sp.png");
        top: min(calc(100vw*50/var(--inner-width-sp)), 50px);
        height: min(calc(100vw*810/var(--inner-width-sp)), 810px);
    }
    .sec-all-inclusive::before {
        background-image: url("../images/bg_all_sp.png");
        top: min(calc(100vw*200/var(--inner-width-sp)), 200px);
        height: min(calc(100vw*818/var(--inner-width-sp)), 818px);
    }
    .sec-lounge::before {
        background-image: url("../images/bg_lounge_sp.png");
        top: 0;
        height: min(calc(100vw*2170/var(--inner-width-sp)), 2170px);
    }
}