@charset "UTF-8";

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

.section01 {
    margin: 10rem 0 0;
}

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

.section .row {
    display: grid;
    grid-template-areas: "left right";
    grid-template-columns: 34% auto;
}

.section .left {
    height: 100%;
    position: relative;
    grid-area: left;
}

.section .left .inner {
    padding: 10rem 6vw 0 0;
    position: relative;
}

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

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

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

.section .right {
    padding: 0 0 0 6vw;
    grid-area: right;
}

.section .gallery li:nth-child(1) {
    width: 100%;
    margin: 0 0 0 auto;
}

.section .gallery li:nth-child(2) {
    width: 90%;
    margin: 4rem 0 0;
}

.section .gallery li:nth-child(3) {
    width: 80%;
    margin: 4rem 0 0 auto;
}

.section .gallery li:nth-child(4) {
    width: 70%;
    margin: 4rem 0 0;
}

.section .gallery li:nth-child(5) {
    width: 60%;
    margin: 4rem 0 0 auto;
}

.section .gallery li:nth-child(6) {
    width: 50%;
    margin: -8rem 0 0;
}

.section .gallery li:nth-child(7) {
    width: 40%;
    margin: -8rem 2.4rem 0 auto;
}

.section .gallery li:nth-child(8) {
    width: 70%;
    margin: 4rem 0 0 4rem;
}

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

/*================================================================
# 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: 16rem 6.4rem 8rem;
    background: var(--back03);
    position: relative;
}

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

.accommodation-plan .p-offers-plan {
    margin: 0;
    list-style: none;
    position: relative;
    display: grid;
    z-index: 0;
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem;
}

.accommodation-plan .p-offers-plan .item a {
    padding: 0;
    border: 1px solid transparent;
    display: flex;
    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 {
    width: 30%;
    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: 70%;
    margin: 0;
    padding: 2.4rem 1.6rem 2.4rem 2.4rem;
}

.accommodation-plan .p-offers-plan .item .contents .plan-name {
    font-size: 1.6rem;
    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;
}