@charset "UTF-8";

/*================================================================
# kv
================================================================ */
.kv {
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    overflow: hidden;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-font-feature-settings: "pkna";
    font-feature-settings: "pkna";
    text-orientation: upright;
}

.kv__words {
    width: 20%;
    margin: 8rem 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
}

.kv__title {
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: 2s cubic-bezier(0.65, 0.05, 0.36, 1) 0s 1 normal forwards maskFadeIn;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
}

.kv__title .inner {
    margin: 0;
    font-size: 4.4rem;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: 0.2em;
}

@keyframes maskFadeIn {
    0% {
        -webkit-mask-position: 200% 0;
        mask-position: 200% 0;
    }

    100% {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

.kv__img {
    width: 80%;
    animation: 2s cubic-bezier(0.65, 0.05, 0.36, 1) 0s 1 normal forwards maskFadeIn;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
}

.kv__title::after {
    display: none;
}

/*================================================================
# intro
================================================================ */
.intro02 {
    margin: 8rem 0 0;
    text-align: center;
}

.intro02 .intro02__title01 {
    padding: 2px 24px 4px;
    background-color: var(--white);
    display: inline-block;
    line-height: 1;
    color: var(--black);
}

.intro02 .intro02__title02 {
    font-size: 24px;
    line-height: 1.618;
    color: var(--gold);
}

.intro02 .intro02__title03 {
    margin: 24px 0 0;
    font-size: 32px;
    font-weight: 400;
}

.intro02 .intro02__title03 span {
    padding: 0 0 8px;
    position: relative;
}

.intro02 .intro02__title03 span:before {
    width: calc(100% + 48px);
    height: 1px;
    background-color: var(--beige);
    position: absolute;
    content: "";
    bottom: 0;
    left: -24px;
}

.intro02 .intro02__title03 strong {
    padding: 16px 0 0;
    display: block;
    font-size: 56px;
    font-weight: 400;
}

.intro02 .intro02__text {
    margin: 32px 0 0;
}

/*================================================================
# 中面 - アンカー
================================================================ */
.anchor--list a {
    flex-direction: column;
}

.anchor__link strong {
    display: block;
    font-size: 20px;
}

.anchor--list a::after {
    margin: 16px 0 0;
}

/*================================================================
# point
================================================================ */
.layout01 {
    margin: 0;
}

.layout01.img-gallery .row {
    padding: 0 6vw;
}

.layout01 .row {
    padding: 0 6vw;
    align-items: flex-start;
}

.layout01 .row .left {
    width: 50%;
    margin: 0;
    position: relative;
}

.layout01 .row .right {
    width: 50%;
    margin: 0;
}

.layout01 .row .popup {
    width: 16rem;
    height: 16rem;
    padding: 4px 15px;
    border: 1px solid var(--white);
    border-radius: 9999px;
    position: absolute;
    top: -8rem;
    left: -16rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    z-index: 1;
}

.layout01 .row .popup:before {
    width: 24px;
    height: 24px;
    border-right: 1px solid var(--white);
    background-color: var(--back03);
    position: absolute;
    content: "";
    top: 80%;
    right: 16px;
    transform: skew(40deg);
}

.layout01 .row .popup strong {
    font-size: 18px;
}

.layout01 .img01 {
    margin: 16rem 0 0;
    z-index: 0;
}

.layout01 .img02 {
    width: 48rem;
    margin: 0 0 4rem -10rem;
}

.heading02 .title-jp span {
    font-size: 2.4rem;
}

.heading02 .title-jp02 {
    margin: 4rem 0 0;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.4;
}

.heading02 .title-jp02 strong {
    font-size: 6.4rem;
    font-weight: 400;
}

.section-wrap .text02 {
    width: calc(100% + 4em);
}

/*================================================================
# plan-box
================================================================ */
.plan-box {
    max-width: 1420px;
    margin: 0 auto;
    padding: 8rem 0 0;
}

.plan-box .row {
    width: 100%;
    margin: 6.4rem 0 0;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.plan-box .left {
    width: 60%;
    margin: 0 -4rem 0 0;
    display: flex;
    flex-direction: column;
}

.plan-box .right {
    width: 48%;
    margin: 8rem 0 0 auto;
    padding: 5.4rem;
    background: var(--white);
    color: var(--blue);
}

.plan-box .plan-tag {
    margin: 1.6rem 0 0;
    position: relative;
}

.plan-box .plan-tag span {
    padding: 0.5rem 1.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--gold);
    letter-spacing: 0.05em;
}

.plan-box .plan-name {
    margin: 1.6rem 0 0;
    position: relative;
    font-size: 3rem;
    font-weight: bold;
    color: var(--blue);
}

.plan-box .plan-text {
    margin: 2.4rem 0 0;
    position: relative;
    font-size: 1.4rem;
    line-height: 2;
    color: var(--blue);
}

.plan-box .list-title {
    margin: 2.4rem 0 0;
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--blue);
    text-align: center;
}

.plan-box .list-title em {
    margin: 0 0.4rem;
    font-size: 3.2rem;
}

.plan-box .box {
    margin: 0.8rem 0 0;
    padding: 3.2rem;
    background-color: rgba(210, 197, 191, 0.5);
    position: relative;
    font-size: 1.4rem;
    font-weight: 600;
}

.plan-box .box .list {
    margin: 0 0 0 16px;
    list-style: none;
}

.plan-box .box .list>li {
    text-indent: -16px;
}

.plan-box .box .list>li::before {
    margin-right: 0.4rem;
    content: "★";
    font-size: 1.4rem;
    color: var(--blue);
}

.plan-box .box .list>li+li {
    margin: 0.8rem 0 0;
}

.plan-box .plan-btn {
    margin-top: 2.4rem;
    text-align: center;
}

.plan-box .plan-btn a {
    width: 100%;
    padding: 2.4rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #866b0b, #cfaf3b);
    box-shadow: 0 5px 15px rgba(67, 53, 3, 0.457);
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.plan-box .plan-btn a .arrow-icon {
    width: 24px;
    height: 24px;
    margin: 0 0 0 8px;
    transition: transform 0.3s ease-in-out;
}

.plan-box .plan-btn a:hover {
    background: linear-gradient(135deg, #554301, #a58921);
    transform: translateY(5px);
}

.plan-box .plan-btn a:hover .arrow-icon {
    transform: translateX(5px);
}

.plan-box .note {
    margin: 0.4rem 0;
    opacity: 0.7;
    font-size: 1.1rem;
    color: var(--blue);
    text-indent: 0;
}

/*================================================================
# slider
================================================================ */
.splide {
    width: 800px;
    margin: 4rem 0 0;
}

.custom-pagination {
    margin-top: 2rem;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
}

.custom-pagination-dot {
    width: 4px;
    height: 4px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 50%;
    background: #ccc;
    transition: 0.3s ease;
}

.custom-pagination-dot.is-active {
    background: var(--gold);
    transform: scale(2);
}

/*================================================================
# スイカ割り
================================================================ */
.suika {
    width: 160px;
    position: absolute;
    top: -64px;
    right: -16px;
}