@charset "utf-8";

/* ==============================
tokens
============================== */

:root {
    --pink: #F56267;
    --blue: #6565C9;
    --beige: #F5F0EB;
    --beige_shade: #E0D3C5;
    /* ver.2 */
    --beige_shade: #CCB8AB;
    --brown: #663C33;
    --white: #fff;
}

/* ==============================
base
============================== */

html {
    font-size: 62.5%;
}

body {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-size: 1.4rem;
    font-size: clamp(1.4rem, 1.3429rem + 0.179vw, 1.6rem);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-feature-settings: "palt" 1;
    color: var(--brown);
    background-color: var(--beige);
}

img {
    inline-size: 100%;
}

/* ==============================
utilities
============================== */

.u-pink {
    color: var(--pink);
}

@media (min-width: 1024px) {
    .u-spBr {
        display: none;
    }
}

/* ==============================
components
============================== */

/* topic */
.topic {
    text-align: center;
    display: grid;
    gap: 1.2rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pink);
}

.topic h2 {
    font-family: hwt-roman-extended-light-fac, serif;
    font-size: clamp(4rem, 3.7714rem + 0.714vw, 4.8rem);
}

.topic p {
    font-family: dnp-shuei-mincho-pr6n, sans-serif;
    font-weight: 600;
    transform: scaleY(0.8);
}

 .topic--white {
    color: var(--white);
 }

/* subtopic */
.subtopic {
    font-family: dnp-shuei-mincho-pr6n, serif;
    font-size: clamp(2.4rem, 2.1714rem + 0.714vw, 3.2rem);
    line-height: 1;
    letter-spacing: 0;
    color: var(--pink);
    transform: scaleY(0.8);
}

.subtopic--white {
    color: var(--white);
}

/* button */
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding-inline-start: 2.4rem;
    padding-inline-end: 1.6rem;
    block-size: 4.4rem;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    color: var(--white);
    background-color: var(--blue);
    transition: 0.4s;
}

.button--white {
    color: var(--blue);
    background-color: var(--white);
}

.button:hover {
    background-color: #5642B8;
}

.button--white:hover {
    background-color: #EBEBFF;
}

/* ==============================
layout
============================== */

.l-outer {
    padding-inline-start: clamp(1.2rem, -0.8rem + 6.25vw, 4rem);
    background-image: url(assets/images/bg-base.webp);
    background-position: top center;
    background-size: 1440px auto;
    background-repeat: repeat;
    z-index: 0;
}

.l-outer--pink {
    color: var(--white);
    background-image: url(assets/images/bg-pink.webp);
    background-size: max(1440px, 100vw) auto;
}

.l-outer--blue {
    color: var(--white);
    background-image: url(assets/images/bg-blue.webp);
    background-size: max(1440px, 100vw) auto;
}

@media (min-width: 768px) {
    .l-outer {
        padding-inline: 4rem;
    }
}

.l-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 8rem;
    max-inline-size: 1360px;
    margin-inline: auto;
    padding-inline: 2.4rem;
    padding-block: 8rem;
    border-inline-start: var(--pink) 1px solid;
    overflow: hidden;
}

@media (min-width: 768px) {
    .l-inner {
        border-inline-end: var(--pink) 1px solid;
    }
}

/* ============================================================
Js
============================================================ */

/* ==============================
cherry
============================== */

.cherry {
    position: absolute;
    will-change: transform;
}

.cherry--1 {
    inline-size: clamp(80px, -47.273px + 39.773vw, 360px);
    inset-inline-end: -18%;
    inset-block-start: -12dvh;
}

@media (min-width: 1024px) {
    .cherry--1 {
        inline-size: clamp(320px, 123.077px + 19.231vw, 400px);
        inset-inline-end: -12%;
        inset-block-start: -28dvh;
    }
}

.cherry--2 {
    inline-size: clamp(120px, -43.636px + 51.136vw, 480px);
    inset-inline-start: -16%;
    inset-block-start: clamp(256px, 237.714px + 5.714vw, 320px);
}

@media (min-width: 1024px) {
    .cherry--2 {
        inline-size: clamp(400px, -151.385px + 53.846vw, 624px);
        inset-inline-start: -12%;
        inset-block-start: 0;
    }
}

.cherry--3 {
    inline-size: clamp(84px, 39.429px + 13.929vw, 240px);
    inset-inline-end: clamp(-36px, -2.5vw, -8px);
    inset-block-start: clamp(24px, 10.286px + 4.286vw, 72px);
}

.cherry--4 {
    inline-size: clamp(72px, 53.714px + 5.714vw, 136px);
    inset-inline-start: -20px;
    inset-block-end: clamp(420px, 397.143px + 7.143vw, 500px);
}

.cherry--5 {
    inline-size: clamp(84px, 39.429px + 13.929vw, 240px);
    inset-inline-end: -8%;
    inset-block-end: 0;
}

.cherry--8 {
    inline-size: clamp(42px, 24.286px + 5.536vw, 104px);
    inset-inline-start: -8px;
    inset-block-start: clamp(20px, 5.143px + 4.643vw, 72px);
}

.cherry--9 {
    inline-size: clamp(114px, 66.571px + 14.821vw, 280px);
    inset-inline-end: clamp(-88px, -21.143px - 4.643vw, -36px);
    inset-block-start: clamp(124px, 86.286px + 11.786vw, 256px);
}

.cherry--10 {
    inline-size: clamp(160px, 123.429px + 11.429vw, 288px);
    inset-inline-start: -10%;
    inset-block-end: -3.2rem;
}

/* ==============================
bg-pic
============================== */

.bg-pic {
    position: fixed;
    inline-size: 100%;
    block-size: 120dvh;
    background-image: url(assets/images/bg-pic1.webp);
    background-size: cover;
    background-position: top center;
    z-index: -1000;
    will-change: transform;
}

/* ==============================
concept
============================== */

.concept p span {
    color: var(--beige_shade);
}

.concept p span.is-active {
    color: var(--pink);
}

/* ==============================
fade-in
============================== */

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================
header
============================== */

.header {
    position: sticky;
    top: 0;
    background-color: var(--beige);
    border-block-end: var(--pink) 1px solid;
    z-index: 1000;
}

.header.l-outer {
    padding-inline: clamp(1.2rem, -0.8rem + 6.25vw, 4rem);
}

.header .l-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-inline: 0;
    padding-block: 1.2rem;
    border: none;
}

.header h1 img{
    display: block;
    inline-size: clamp(96px, 32.429px + 19.866vw, 185px);
}

/* ==============================
FV
============================== */

.FV {
    color: var(--pink);
}

.FV.l-outer {
    block-size: calc(100vh - 6.9rem);
    block-size: calc(100dvh - 6.9rem);
    padding-inline: clamp(1.2rem, -0.8rem + 6.25vw, 4rem);
    border-block-end: var(--pink) 1px solid;
}

.FV .l-inner {
    position: relative;
    block-size: 100%;
    padding-inline: clamp(1.2rem, 0.5143rem + 2.143vw, 3.6rem);
    padding-block: 3.2rem;
    justify-content: space-between;
    row-gap: normal;
    border-inline-end: var(--pink) 1px solid;
}

.FV__deco {
    position: absolute;
    font-family: dm-sans, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--beige_shade);
}

.FV__deco--sp {
    inset-inline-start: clamp(1.2rem, 0.5143rem + 2.143vw, 3.6rem);
    inset-block-start: 3.2rem;
    font-size: 0.8rem;
    line-height: 1;
}

.FV__deco--pc {
    display: none;
}

.FV__topic {
    font-family: dnp-shuei-mincho-pr6n, serif;
    font-size: clamp(4rem, 2.8571rem + 3.571vw, 8rem);
    /* ver.2 */
    font-size: clamp(40px, 3.636px + 11.364vw, 120px);
    font-weight: 500;
    line-height: 1.2em;
    text-align: center;
    transform: scaleY(0.8);
    z-index: 500;
}

.FV__topic span {
    font-size: clamp(3rem, 2.1429rem + 2.679vw, 6rem);
    /* ver.2 */
    font-size: 75%;
}

.FV__img {
    display: block;
    max-inline-size: 64rem;
    margin-inline: auto;
}

.FV__desc {
    display: flex;
    justify-content: center;
    column-gap: 2.4rem;
    margin-block-start: 2.4rem;
    /* ver.2 */
    margin-block-start: clamp(8px, -2.909px + 3.409vw, 32px);
    margin-block-start: clamp(4px, -8.727px + 3.977vw, 32px);
    z-index: 500;
}

.FV__desc img {
    inline-size: 8rem;
    inline-size: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    z-index: 500;
}

.FV__desc div {
    font-weight: 500;
    text-align: center;
}

.FV__desc-jp {
    font-size: clamp(1.2rem, 1.0857rem + 0.357vw, 1.6rem);
}

.FV__desc-en {
    margin-block-start: 0.4rem;
    font-family: dm-sans, sans-serif;
    font-size: clamp(0.6rem, 0.4857rem + 0.357vw, 1rem);
    line-height: 1.5em;
    letter-spacing: 0;
    color: var(--beige_shade);
}

.FV__info {
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    line-height: 1;
    text-align: center;
    z-index: 500;
}

.FV__date {
    font-family: dm-sans, sans-serif;
    font-size: 2.8rem;
    font-size: clamp(2.8rem, 0.3619rem + 7.619vw, 3.6rem);
    font-weight: 400;
    letter-spacing: 0;
}

.FV__date span {
    font-size: 50%;
}

.FV__price {
    font-size: clamp(2.4rem, -0.00381rem + 7.619vw, 3.2rem);
    font-weight: 500;
    transform: scaleY(1.3);
}

.FV__price span {
    margin-inline-start: 0.4rem;
    font-size: 72%;
}

@media (min-width: 1024px) {
    .FV .l-inner {
        padding-block-start: 8rem;
        padding-block-end: 4rem;
    }
    .FV__deco--sp {
        display: none;
    }
    .FV__deco--pc {
        display: block;
        font-size: 1.2rem;
        line-height: 1.5em;
    }
    .FV__topic {
        order: 2;
    }
    .FV__topic,
    .FV__topic span {
        font-size: clamp(7.1rem, -1.0231rem + 7.933vw, 10.4rem);
    }
    .FV__topic span {
        margin-inline-end: 2.4rem;
    }
    .FV__MV {
        order: 1;
        flex-grow: 1;
        display: flex;
        min-block-size: 0;
        align-items: center;
        justify-content: center;
    }
    .FV__img {
        max-inline-size: none;
        inline-size: auto;
        max-block-size: 88%;
    }
    .FV__desc {
        position: absolute;
        inset-inline-end: 4%;
        inset-block-end: 50%;
        grid-column: 3;
        flex-direction: column;
        align-items: center;
        row-gap: 3.6rem;
        margin-block-start: 0;
    }
    .FV__info {
        order: 3;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .FV__date {
        font-size: 5.6rem;
        font-size: clamp(5.6rem, -0.6031rem + 6.058vw, 8.12rem);
    }
    .FV__price {
        font-size: clamp(3.2rem, -0.3446rem + 3.462vw, 4.64rem);
    }
}

/* ==============================
concept
============================== */

.concept {
    font-family: dnp-shuei-mincho-pr6n, serif;
    line-height: 2;
    letter-spacing: 0;
    color: var(--pink);
}

.concept.l-outer {
    margin-block-start: 100dvh;
    border-block-start: var(--pink) 1px solid;
    border-block-end: var(--pink) 1px solid;
}

.concept .l-inner {
    padding-block-start: 2.4rem;
}

.concept h2 {
    font-size: clamp(2.2rem, 1.4571rem + 2.321vw, 4.8rem);
    transform: scaleY(0.8);
}

.concept p {
    font-size: clamp(1.8rem, 1.4rem + 1.25vw, 3.2rem);
    transform: scaleY(0.8);
}

.concept__deco-text {
    display: flex;
    justify-content: space-between;
    font-family: dm-sans, sans-serif;
    font-size: clamp(1rem, 0.9429rem + 0.179vw, 1.2rem);
    font-weight: 500;
    line-height: 1;
    color: var(--beige_shade);
}

@media (min-width: 768px) {
    .concept {
        text-align: center;
    }
}

/* ==============================
features
============================== */

.features.l-outer {
    border-block-end: var(--pink) 1px solid;
}

.features .l-inner {
    row-gap: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    padding-block: clamp(8rem, 5.7143rem + 7.143vw, 16rem);
}

.features__list {
    display: flex;
    flex-direction: column;
    row-gap: 8rem;
    max-inline-size: 400px;
    margin-inline: auto;
}

.features__item {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 3.2rem;
}

.features__image {
    position: relative;
}

.features__desc {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
    margin-block-start: 1.6rem;
}

.features__number {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    font-family: dm-sans, sans-serif;
    font-size: clamp(1.4rem, 1.1143rem + 0.893vw, 2.4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--pink);
}

.features__image--1::before,
.features__image--2::before {
    display: block;
    content: "";
    position: absolute;
    aspect-ratio: 1 / 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.features__image--1::before {
    inline-size: clamp(32px, 22.857px + 2.857vw, 64px);
    inset-inline-start: 0;
    inset-block-end: 20%;
    background-image: url(assets/images/cherry/c6.webp);
}

.features__image--2::before {
    inline-size: clamp(32px, 22.857px + 2.857vw, 64px);
    inset-inline-end: 8%;
    inset-block-start: 16%;
    background-image: url(assets/images/cherry/c7.webp);
}

@media (min-width: 1024px) {
    .features .l-inner {
        padding-inline: 8rem;
    }
    .features__list {
        row-gap: 12rem;
        max-inline-size: 1126px;
    }
    .features__item {
        flex-direction: row;
        align-items: center;
        column-gap: 4rem;
    }
    .features__item:nth-of-type(even) {
        flex-direction: row-reverse;
    }
    .features__image {
        flex: 0 0 calc(660 / 1126 * 100%);
    }
}

/* ==============================
gourmet
============================== */

.gourmet.l-outer {
    /* margin-block-start: 100dvh; */
    padding-inline: 0;
}

.gourmet .l-inner {
    row-gap: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    padding-block: clamp(8rem, 5.7143rem + 7.143vw, 16rem);
    border: none;
}

.gourmet__list {
    display: flex;
    flex-direction: column;
    row-gap: 8rem;
    max-inline-size: 400px;
    margin-inline: auto;
}

.gourmet__item {
    display: flex;
    flex-direction: column;
}

.gourmet__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-block-start: 3.2rem;
}

.gourmet__desc {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
    flex-grow: 1;
    margin-block-start: 1.6rem;
}

.gourmet__note {
    font-size: clamp(1.2rem, 1.1429rem + 0.179vw, 1.4rem);
}

.gourmet__price {
    margin-block-start: 1.6rem;
    font-family: dm-sans, sans-serif;
    font-size: clamp(2.1rem, 2.0143rem + 0.268vw, 2.4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
}

.gourmet__price span {
    margin-inline-start: 0.8rem;
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    font-size: clamp(1.2rem, 1.1429rem + 0.179vw, 1.4rem);
    font-weight: 600;
}

@media (min-width: 1024px) {
    .gourmet__list {
        flex-direction: row;
        column-gap: 4rem;
        max-inline-size: none;
    }
    .gourmet.l-outer {
        padding-inline: 4rem;
    }
    .gourmet .l-inner {
        padding-inline: 0;
    }
}

/* ==============================
info
============================== */

.info .l-inner {
    row-gap: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    padding-inline: 0;
    padding-block: clamp(8rem, 5.7143rem + 7.143vw, 16rem);
}

.info .topic h2 {
    font-size: 3.2rem;
}

.table {
    max-inline-size: 66rem;
    margin-inline: auto;
}

tr {
    display: block;
    padding-inline: 1.2rem;
    padding-block: 1.6rem;
    border-block-end: var(--pink) solid 1px;
}

tr:first-of-type {
    border-block-start: var(--pink) solid 1px;
}

th {
    inline-size: clamp(6.4rem, 1.9143rem + 14.018vw, 22.1rem);
    color: var(--pink);
}

.info__map {
    display: table-row;
    padding: 0;
}

.info__map iframe {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
}

.info__ctr .button {
    margin-block-start: 1.6rem;
}

/* ==============================
footer
============================== */

.footer {
    text-align: center;
}

.footer.l-outer {
    padding-inline-start: 0;
}

.footer .l-inner {
    row-gap: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    padding-block-start: clamp(8rem, 6.8571rem + 3.571vw, 12rem);
    padding-block-end: 2.4rem;
    border-inline-start: none;
    border-inline-end: none;
}

.footer p {
    font-family: dnp-shuei-mincho-pr6n, serif;
    font-size: 4rem;
    font-size: clamp(3.2rem, 2.9714rem + 0.714vw, 4rem);
    font-weight: 600;
    letter-spacing: 0;
    transform: scaleY(0.8);
}

.footer .button {
    margin-block-start: 3.2rem;
}

small {
    font-family: dm-sans, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}