@charset "UTF-8";

/*================================================================
# 共通スタイル
================================================================ */
.section {
    padding: 0 6vw;
}

.section01 {
    margin: 10rem 0 0;
}

.section:not(.section01) {
    margin: 16rem 0 0;
}

.section .left {
    position: relative;
}

.section .left .inner {
    position: relative;
}

.section .left .inner:before {
    width: calc(90.7rem / 4);
    height: calc(105.7rem / 4);
    background: url(../../common/img/illust01.png) no-repeat center top / contain;
    position: absolute;
    content: "";
    top: -4rem;
    right: -10rem;
    z-index: -1;
    transform: scale(-1, 1);
}

.section .left .inner::after {
    width: calc(68.3rem / 4);
    height: calc(192rem / 4);
    mix-blend-mode: lighten;
    background: url(../../common/img/texture02.png) no-repeat center top / contain;
    position: absolute;
    content: "";
    top: -16rem;
    right: 0vw;
    z-index: -1;
}

.section .heading02,
.section .text02 {
    text-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.5);
}

.section .right {
    margin: 4rem 0 0;
}

.section .plan-box {
    margin: 6.4rem 0 0;
}

/*
------------------------------------------------------ */
.gallery-slider {
    margin: 0 -6vw 0 0;
}

.gallery-slider .splide__slide {
    width: 70% !important;
}

.gallery-slider .splide__slide img {
    width: 100%;
    height: 32rem;
    object-fit: cover;
}

.gallery-slider .splide__slide.fade.fade-wave {
    opacity: 1;
    filter: none;
    transition: none;
    transform: none;
}

.splide__arrow--prev {
    display: none;
}

.splide__arrow--next {
    width: calc(60px / 1.5);
    height: calc(144px / 1.5);
    opacity: 1;
    background: url(../../top/img/slider_arrows.webp) no-repeat 0 0 / contain;
    top: 64%;
    right: auto;
    left: -2.4rem;
}

.splide__arrow svg {
    display: none;
}

.splide__pagination {
    right: auto;
    bottom: -2.4rem;
    left: -1.6rem;
}

.splide__pagination__page {
    width: 4px;
    height: 4px;
    margin: 5px;
    opacity: 1;
    background: var(--white);
    position: relative;
}

.splide__pagination__page.is-active {
    background: var(--white);
    transform: scale(1);
}

.splide__pagination__page::after {
    width: 16px;
    height: 16px;
    margin: auto;
    opacity: 0;
    border: 1px solid var(--white);
    border-radius: 9999px;
    position: absolute;
    content: "";
    top: -6px;
    left: -6px;
    display: block;
    transition: scale 1s ease, opacity 1s ease;
    transform-origin: center;
    scale: 0;
}

.splide__pagination__page.is-active::after {
    opacity: 0.5;
    scale: 1;
}

/*================================================================
# accommodation-plan
================================================================ */
.accommodation-plan {
    margin: 16rem 0 0;
}

.accommodation-plan .heading05 {
    margin: 0 auto -11rem;
    position: relative;
    z-index: 1;
}

.accommodation-plan .p-plan__container {
    position: relative;
}

.accommodation-plan .p-plan__container__contents {
    padding: 14rem 2.4rem 8rem;
    background: var(--back03);
    position: relative;
}

.accommodation-plan .heading04 {
    position: absolute;
    top: -2rem;
    right: -0.8rem;
}

.accommodation-plan .p-offers-plan {
    margin: 0;
    list-style: none;
    position: relative;
    display: grid;
    z-index: 0;
    gap: 4rem;
}

.accommodation-plan .p-offers-plan .item a {
    padding: 0 0 1.43rem;
    border: 1px solid transparent;
    display: block;
    text-decoration: none;
    transition: all 0.6s;
}

.accommodation-plan .p-offers-plan .item a:hover {
    border: 1px solid #2c436f;
    background: rgba(44, 67, 111, 0.3);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
    color: var(--white);
}

.accommodation-plan .p-offers-plan .item .img {
    overflow: hidden;
    aspect-ratio: 16/9;
}

.accommodation-plan .p-offers-plan .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
    transform: scale(1);
}

.accommodation-plan .p-offers-plan .item a:hover .img img {
    transform: scale(1.1);
}

.accommodation-plan .p-offers-plan .item .contents {
    width: 81.63%;
    margin: 1.07rem auto 0;
}

.accommodation-plan .p-offers-plan .item .contents .plan-name {
    margin: 1.6rem 0 0;
    font-size: 1.8rem;
    color: var(--white);
}

.accommodation-plan .p-offers-plan .item .contents .plan-text {
    margin: 2.4rem 0 0;
    font-size: 1.3rem;
}

.accommodation-plan .p-offers-plan .item .contents .plan-btn {
    margin: 2.4rem 0 0;
    display: grid;
    align-items: center;
    font-size: 1.3rem;
    grid-template-columns: 1fr auto;
    grid-template-areas: "line txt";
    gap: 0.71rem;
}

.accommodation-plan .p-offers-plan .item .contents .plan-btn::before,
.accommodation-plan .p-offers-plan .item .contents .plan-btn::after {
    width: 100%;
    height: 1px;
    opacity: 0.5;
    content: "";
    grid-area: line;
}

.accommodation-plan .p-offers-plan .item .contents .plan-btn::before {
    background: var(--beige);
}

.accommodation-plan .p-offers-plan .item .contents .plan-btn::after {
    background: var(--border);
    transition: transform 0.6s;
    transform: scaleX(0);
    transform-origin: left;
}

.accommodation-plan .p-offers-plan .item a:hover .plan-btn::after {
    transform: scaleX(1);
}

.accommodation-plan .btn01 {
    display: flex;
    justify-content: center;
}

/*================================================================
#
================================================================ */
.section04 .btn01,
.section05 .btn01 {
    margin: 2.4rem 0 0;
}