/* Fragrance LP (page-fragrance.php) */
.fragrance-contents {
    --frg-beige: #C5AA61;
    --frg-green: #369F65;
    --frg-green-dk: #2b7d50;
    --frg-sage: #5b7452;
    --frg-sage-lt: #eef2ea;
    --frg-cream: #faf8f3;
    --frg-text: #3e3e3e;
    --frg-sub: #6b6b6b;
    color: var(--frg-text);
    font-weight: 400;
    font-size: min(3.733vw, 16px);
    letter-spacing: 0;
    line-height: 1.9;
}
.fragrance-contents h1,
.fragrance-contents h2,
.fragrance-contents h3 {
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
}
.fragrance-contents img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fragrance-contents figure {
    margin: 0;
}
.fragrance-contents ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fragrance-contents section {
    position: relative;
}
.fragrance-contents .frg-inner {
    margin: 0 auto;
    max-width: 1200px;
    padding: min(14vw, 120px) 0;
    position: relative;
    width: 90%;
    z-index: 1;
}

/* placeholder (shown until an image is set) */
.fragrance-contents .frg-ph {
    align-items: center;
    background: #e3e7df;
    border: 1px dashed #9aa894;
    color: #5d6b58;
    display: flex;
    font-size: 12px;
    height: 100%;
    justify-content: center;
    line-height: 1.5;
    padding: 8px;
    text-align: center;
    width: 100%;
}

/* heading */
.fragrance-contents .frg-head {
    margin-bottom: min(8vw, 48px);
    text-align: center;
}
.fragrance-contents .frg-head .en {
    color: var(--frg-beige);
    font-size: min(3.4667vw, 15px);
    letter-spacing: .2em;
    margin-bottom: .8em;
}
.fragrance-contents .frg-head .jp {
    font-size: min(6.4vw, 33px);
}
.fragrance-contents .frg-lead,
.fragrance-contents .frg-text {
    text-align: center;
}
.fragrance-contents .frg-lead {
    color: var(--frg-sub);
    margin: calc(-1 * min(4vw, 24px)) auto min(8vw, 48px);
    max-width: 760px;
}
.fragrance-contents .frg-note {
    color: var(--frg-sub);
    font-size: min(3.4667vw, 14px);
    margin-top: 2em;
    text-align: center;
}

/* button */
.fragrance-contents .frg-btn-wrap {
    margin-top: min(8vw, 40px);
}
.fragrance-contents .frg-btn {
    background: var(--frg-green);
    border-radius: 60px;
    color: #fff;
    display: inline-block;
    font-size: min(4vw, 17px);
    letter-spacing: .08em;
    padding: 1.1em 3em;
    text-decoration: none;
    transition: .3s ease-in-out;
}
@media (hover: hover) {
    .fragrance-contents .frg-btn:hover {
        background: var(--frg-green-dk);
        color: #fff;
    }
}

/* MV */
.fragrance-contents .frg-mv {
    align-items: center;
    display: flex;
    min-height: min(100vh, 860px);
    overflow: hidden;
}
.fragrance-contents .frg-mv-bg {
    inset: 0;
    position: absolute;
    z-index: 0;
}
.fragrance-contents .frg-mv-bg::after {
    background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 75%);
    content: "";
    inset: 0;
    position: absolute;
}
.fragrance-contents .frg-mv-inner {
    padding-top: min(30vw, 180px);
}
.fragrance-contents .frg-mv-label {
    color: var(--frg-beige);
    font-size: min(3.4667vw, 15px);
    letter-spacing: .25em;
    margin-bottom: 1.2em;
}
.fragrance-contents .frg-mv-title {
    font-size: min(8.5vw, 52px);
    margin-bottom: .6em;
}
.fragrance-contents .frg-mv-sub {
    font-size: min(4vw, 19px);
}

/* concept */
.fragrance-contents .frg-concept .frg-text {
    margin: 0 auto;
    max-width: 760px;
}
.fragrance-contents .frg-concept-img {
    margin: min(10vw, 64px) auto 0;
    max-width: 960px;
}

/* scene */
.fragrance-contents .frg-scene {
    background: var(--frg-cream);
}
.fragrance-contents .frg-scene-list {
    display: grid;
    gap: min(8vw, 48px) min(4vw, 32px);
    grid-template-columns: repeat(3, 1fr);
}
.fragrance-contents .frg-scene-list figure {
    aspect-ratio: 4 / 3;
    margin-bottom: 1em;
    overflow: hidden;
}
.fragrance-contents .frg-scene-list h3 {
    font-size: min(4.5vw, 20px);
    margin-bottom: .4em;
}
.fragrance-contents .frg-scene-list p {
    color: var(--frg-sub);
    font-size: min(3.4667vw, 15px);
}

/* lineup */
.fragrance-contents .frg-lineup-list {
    display: grid;
    gap: min(5vw, 28px);
    grid-template-columns: repeat(4, 1fr);
}
.fragrance-contents .frg-lineup-list > li {
    background: #fff;
    border: 1px solid #e2e5de;
    display: flex;
    flex-direction: column;
}
.fragrance-contents .frg-lineup-list .card-head {
    align-items: center;
    background: var(--frg-sage);
    color: #fff;
    display: flex;
    gap: .7em;
    min-height: 4.6em;
    padding: .7em 1em;
}
.fragrance-contents .frg-lineup-list .card-head .no {
    font-family: "Lato", sans-serif;
    font-size: min(6vw, 26px);
    line-height: 1;
}
.fragrance-contents .frg-lineup-list .card-head .en {
    font-size: min(4vw, 17px);
    line-height: 1.35;
}
.fragrance-contents .frg-lineup-list .card-head .ja {
    font-size: min(2.9333vw, 11px);
    line-height: 1.4;
    margin-top: .2em;
    opacity: .9;
}
.fragrance-contents .frg-lineup-list figure {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.fragrance-contents .frg-lineup-list .card-body {
    flex: 1;
    font-size: min(3.4667vw, 14px);
    padding: 1em 1.1em 1.2em;
}
.fragrance-contents .frg-lineup-list .tag {
    background: var(--frg-sage-lt);
    border-radius: 20px;
    color: var(--frg-sage);
    display: inline-block;
    font-size: 11px;
    margin-top: .8em;
    padding: .2em 1em;
}

/* diffuser */
.fragrance-contents .frg-diffuser {
    background: var(--frg-cream);
}
.fragrance-contents .frg-diffuser-list {
    display: grid;
    gap: min(6vw, 32px);
    grid-template-columns: repeat(2, 1fr);
}
.fragrance-contents .frg-diffuser-list > li {
    align-items: start;
    background: #fff;
    border: 1px solid #e2e5de;
    display: grid;
    gap: min(5vw, 32px);
    grid-template-columns: 42% 1fr;
    padding: min(6vw, 36px);
}
.fragrance-contents .frg-diffuser-list figure {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.fragrance-contents .frg-diffuser-list h3 {
    font-size: min(5.5vw, 26px);
}
.fragrance-contents .frg-diffuser-list .size {
    color: var(--frg-green);
    font-weight: 700;
    margin-bottom: .6em;
}
.fragrance-contents .frg-diffuser-list .uses {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1em;
}
.fragrance-contents .frg-diffuser-list .uses li {
    border: 1px solid var(--frg-sage);
    border-radius: 20px;
    color: var(--frg-sage);
    font-size: min(3.2vw, 13px);
    padding: .15em .9em;
}

/* contact */
.fragrance-contents .frg-contact {
    background: var(--frg-sage-lt);
}
.fragrance-contents .frg-contact-box {
    background: rgba(255,255,255,.85);
    margin: 0 auto;
    max-width: 880px;
    padding: min(10vw, 64px) min(6vw, 48px);
    text-align: center;
}

/* closing */
.fragrance-contents .frg-closing {
    overflow: hidden;
}
.fragrance-contents .frg-closing-bg {
    inset: 0;
    position: absolute;
    z-index: 0;
}
.fragrance-contents .frg-closing-bg::after {
    background: rgba(255,255,255,.55);
    content: "";
    inset: 0;
    position: absolute;
}
.fragrance-contents .frg-closing-inner {
    padding: min(24vw, 180px) 0;
    text-align: center;
}

@media screen and (max-width: 960.0px) {
    .fragrance-contents .frg-lineup-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .fragrance-contents .frg-diffuser-list {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 769.0px) {
    .fragrance-contents .frg-scene-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .fragrance-contents .frg-mv {
        min-height: 100svh;
    }
    .fragrance-contents .frg-mv-bg::after {
        background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.8) 60%);
    }
    .fragrance-contents .frg-mv-inner {
        align-self: flex-end;
        padding-bottom: 12vw;
    }
}
@media screen and (max-width: 560.0px) {
    .fragrance-contents .frg-scene-list,
    .fragrance-contents .frg-lineup-list {
        grid-template-columns: 1fr;
    }
    .fragrance-contents .frg-diffuser-list > li {
        grid-template-columns: 1fr;
    }
}

/* background placeholders: keep label out of the copy area */
.fragrance-contents .frg-mv-bg .frg-ph,
.fragrance-contents .frg-closing-bg .frg-ph {
    align-items: flex-end;
    border: 0;
    justify-content: flex-end;
    padding: 24px;
}

/* lineup card alignment */
/* align header / image / body rows across each row of cards */
.fragrance-contents .frg-lineup-list {
    gap: min(6vw, 40px) min(3vw, 24px);
}
.fragrance-contents .frg-lineup-list > li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
}
.fragrance-contents .frg-lineup-list .card-head {
    align-items: flex-start;
    background: #fff;
    border-bottom: 1px solid #e2e5de;
    color: var(--frg-text);
    gap: .9em;
    min-height: 0;
    padding: 1.1em 1.2em 1em;
}
.fragrance-contents .frg-lineup-list .card-head .no {
    color: var(--frg-beige);
    font-size: min(7vw, 30px);
    line-height: 1;
    min-width: 1.3em;
}
.fragrance-contents .frg-lineup-list .card-head .name {
    padding-top: .15em;
}
.fragrance-contents .frg-lineup-list .card-head .en {
    color: var(--frg-sage);
    font-size: min(4.2vw, 18px);
    line-height: 1.3;
}
.fragrance-contents .frg-lineup-list .card-head .ja {
    color: var(--frg-sub);
    font-size: min(3vw, 12px);
    line-height: 1.5;
    margin-top: .35em;
    opacity: 1;
}
.fragrance-contents .frg-lineup-list .card-body {
    display: flex;
    flex-direction: column;
    line-height: 1.8;
    padding: 1.1em 1.2em 1.3em;
}
.fragrance-contents .frg-lineup-list .card-body .tag {
    align-self: flex-start;
    margin-top: auto;
}
.fragrance-contents .frg-lineup-list .card-body p {
    margin-bottom: 1em;
}

/* motion */
.fragrance-contents {
    --frg-ease: cubic-bezier(.22, .61, .21, 1);
}

/* scroll reveal (enabled only when JS adds .frg-js to <html>) */
.frg-js .fragrance-contents .frg-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 1s var(--frg-ease) var(--frg-delay, 0s),
        transform 1s var(--frg-ease) var(--frg-delay, 0s);
}
.frg-js .fragrance-contents .frg-reveal.is-in {
    opacity: 1;
    transform: none;
}
.frg-js .fragrance-contents .frg-head.frg-reveal .en {
    display: inline-block;
    letter-spacing: .5em;
    transition: letter-spacing 1.4s var(--frg-ease) .1s;
}
.frg-js .fragrance-contents .frg-head.frg-reveal.is-in .en {
    letter-spacing: .2em;
}

/* MV: slow zoom-out of the photo + staggered copy */
@keyframes frgZoomOut {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}
@keyframes frgFadeUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes frgFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.frg-js .fragrance-contents .frg-mv .frg-mv-img {
    transform: scale(1.12);
}
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-img {
    animation: frgZoomOut 3.2s var(--frg-ease) both;
}
.frg-js .fragrance-contents .frg-mv-inner > * {
    opacity: 0;
}
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-inner > * {
    animation: frgFadeUp 1.2s var(--frg-ease) both;
}
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-inner > :nth-child(1) { animation-name: frgFade; animation-delay: .3s; }
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-inner > :nth-child(2) { animation-delay: .5s; }
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-inner > :nth-child(3) { animation-delay: .8s; }
.frg-js .fragrance-contents .frg-mv.is-loaded .frg-mv-inner > :nth-child(4) { animation-delay: 1.05s; }

/* closing: gentle drift of the background */
.fragrance-contents .frg-closing-img {
    transform: scale(1.06);
    transition: transform 6s var(--frg-ease);
}
.frg-js .fragrance-contents .frg-closing:has(.frg-closing-inner.is-in) .frg-closing-img {
    transform: scale(1);
}

/* image hover zoom in cards */
.fragrance-contents .frg-scene-list figure img,
.fragrance-contents .frg-lineup-list figure img,
.fragrance-contents .frg-diffuser-list figure img {
    transition: transform 1.2s var(--frg-ease);
}
@media (hover: hover) {
    .fragrance-contents .frg-scene-list li:hover figure img,
    .fragrance-contents .frg-lineup-list li:hover figure img,
    .fragrance-contents .frg-diffuser-list li:hover figure img {
        transform: scale(1.06);
    }
    .fragrance-contents .frg-lineup-list > li,
    .fragrance-contents .frg-diffuser-list > li {
        transition: box-shadow .6s var(--frg-ease), border-color .6s var(--frg-ease);
    }
    .fragrance-contents .frg-lineup-list > li:hover,
    .fragrance-contents .frg-diffuser-list > li:hover {
        border-color: #d5dccf;
        box-shadow: 0 18px 40px -24px rgba(47, 74, 43, .35);
    }
}

/* button: sheen + lift */
.fragrance-contents .frg-btn {
    overflow: hidden;
    position: relative;
    transition: background .4s var(--frg-ease), transform .4s var(--frg-ease), box-shadow .4s var(--frg-ease);
}
.fragrance-contents .frg-btn::after {
    background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-120%);
}
@media (hover: hover) {
    .fragrance-contents .frg-btn:hover {
        box-shadow: 0 12px 28px -14px rgba(43, 125, 80, .6);
        transform: translateY(-2px);
    }
    .fragrance-contents .frg-btn:hover::after {
        transform: translateX(120%);
        transition: transform .9s var(--frg-ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fragrance-contents *,
    .fragrance-contents *::after {
        animation: none !important;
        transition: none !important;
    }
}