@charset "UTF-8";

/* =====================================================
   Reset
===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;
    font-family:
        "Noto Sans JP",
        sans-serif;

    color: #333;
    background: #fff;

    line-height: 1.8;

    font-size: 16px;

    letter-spacing: 0.05em;
}


img {
    width: 100%;
    height: auto;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


p,
h1,
h2,
h3 {
    margin: 0;
}


ul {
    list-style: none;
    padding: 0;
    margin: 0;
}



/* =====================================================
   Common
===================================================== */


.container {

    width: min(1200px, calc(100% - 40px));

    margin: 0 auto;

}


.narrow {

    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

}



section {

    padding: 120px 0;

}



.section-heading {

    text-align: center;

    margin-bottom: 70px;

}



.section-en {

    display: block;

    font-size: 12px;

    letter-spacing: 0.3em;

    color: #8b9278;

    margin-bottom: 20px;

    text-transform: uppercase;

}



.section-heading h2 {

    font-size: 36px;

    line-height: 1.5;

    font-weight: 500;

}



h2 {

    font-weight: 500;

    line-height: 1.6;

}



p {

    font-weight: 300;

}







/* =====================================================
   Button
===================================================== */


.btn {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    min-width: 260px;

    height: 58px;

    padding: 0 30px;

    border-radius: 40px;

    font-size: 14px;

    transition: .3s ease;

}



.btn-primary {

    background: #31382c;

    color: #fff;

}



.btn-primary:hover {

    opacity: .8;

}



.btn-outline {

    border: 1px solid #31382c;

    color: #31382c;

    background: #fff;

}



.btn-outline:hover {

    background: #31382c;

    color: #fff;

}



/* =====================================================
   Header
===================================================== */


.site-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 10;

    padding: 30px 0;

}



.logo {

    display: block;

    width: 120px;

}







/* =====================================================
   Hero
===================================================== */


.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

}



.hero-bg {

    position: absolute;

    inset: 0;

    z-index: -1;

}



.hero-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,.9),
        rgba(255,255,255,.35)
    );

}



.hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}



.hero-text {

    width: 55%;

}



.hero-subtitle {

    font-size: 13px;

    letter-spacing: .25em;

    margin-bottom: 25px;

    color: #737b60;

}



.hero h1 {

    font-size: 52px;

    font-weight: 500;

    line-height: 1.4;

    margin-bottom: 30px;

}



.hero .lead {

    font-size: 20px;

    line-height: 1.8;

    margin-bottom: 30px;

}



.hero-copy {

    margin-bottom: 40px;

}



.hero-btns {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.hero-product {

    width: 40%;

}



.hero-product img {

    max-width: 450px;

    margin: auto;

}







/* =====================================================
   Brand Message
===================================================== */


.brand-message {

    background: #fff;

}



.brand-grid {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.brand-text p {

    margin-bottom: 30px;

}



.brand-image img {

    border-radius: 4px;

}







/* =====================================================
   Story
===================================================== */


.story {

    background: #f8f6f0;

}



.story-grid {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.story-image img {

    border-radius: 4px;

}



.story-text h2 {

    font-size: 38px;

    margin-bottom: 35px;

}



.story-text p {

    margin-bottom: 25px;

}

 /* =====================================================
   Concept
===================================================== */


.concept {

    background: #fff;

}



.concept-grid {

    display: grid;

    grid-template-columns:
    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.concept-text p {

    margin-bottom: 25px;

}



.concept-list {

    margin-top: 40px;

}



.concept-list li {

    position: relative;

    padding-left: 30px;

    margin-bottom: 15px;

    font-size: 15px;

}



.concept-list li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 12px;

    width: 10px;

    height: 1px;

    background: #8b9278;

}



.concept-image img {

    border-radius: 4px;

}





/* =====================================================
   Philosophy
===================================================== */


.philosophy {

    background: #f8f6f0;

    text-align: center;

}



.philosophy h2 {

    font-size: 42px;

    margin-bottom: 50px;

}



.philosophy p {

    margin-bottom: 30px;

}



.philosophy .message {

    margin-top: 50px;

    font-size: 22px;

    line-height: 2;

    font-weight: 500;

}







/* =====================================================
   Wellness Habit
===================================================== */


.wellness-habit {

    background: #fff;

}



.habit-intro {

    text-align: center;

    margin-bottom: 70px;

}



.habit-intro p {

    margin-bottom: 20px;

}



.habit-cards {

    display: grid;

    grid-template-columns:

    repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 80px;

}



.habit-card {

    padding: 45px 35px;

    background: #f8f6f0;

    text-align: center;

}



.habit-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #31382c;

    color: #fff;

    font-size: 14px;

}



.habit-card h3 {

    font-size: 20px;

    margin-bottom: 20px;

    font-weight: 500;

}



.habit-card p {

    font-size: 14px;

}



.habit-image {

    margin-top: 80px;

}



.habit-image img {

    border-radius: 4px;

}







/* =====================================================
   Why Yuzu
===================================================== */


.why-yuzu {

    background: #f8f6f0;

}



.why-text {

    max-width: 800px;

    margin: 0 auto 70px;

    text-align: center;

}



.why-text p {

    margin-bottom: 25px;

}





/* =====================================================
   Compare Box
===================================================== */


.yuzu-compare {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-bottom: 80px;

}



.compare-box {

    width: 360px;

    padding: 50px 35px;

    background: #fff;

    text-align: center;

}



.compare-box span {

    display: block;

    font-size: 14px;

    margin-bottom: 20px;

    color: #777;

}



.compare-box strong {

    display: block;

    font-size: 48px;

    font-weight: 500;

    line-height: 1;

    margin-bottom: 25px;

}



.compare-box p {

    font-size: 14px;

}



.compare-box.featured {

    background: #31382c;

    color: #fff;

}



.compare-box.featured span {

    color: #fff;

}



.compare-center {

    font-size: 20px;

    color: #888;

}



.yuzu-image img {

    border-radius: 4px;

}

/* =====================================================
   Whole Yuzu
===================================================== */


.whole-yuzu {

    background: #fff;

}



.whole-content {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.whole-text p {

    margin-bottom: 25px;

}



.whole-image img {

    border-radius: 4px;

}



.ingredient-list {

    display: grid;

    grid-template-columns:

    repeat(3, 1fr);

    gap: 25px;

    margin-top: 80px;

}



.ingredient-item {

    padding: 35px 25px;

    background: #f8f6f0;

    text-align: center;

}



.ingredient-item span {

    display: block;

    font-size: 22px;

    margin-bottom: 15px;

    font-weight: 500;

}



.ingredient-item p {

    font-size: 14px;

}







/* =====================================================
   Product Section
===================================================== */


.product-section {

    padding: 140px 0;

}



.product-section.liquid {

    background: #f8f6f0;

}



.product-grid {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 90px;

    align-items: center;

}



.product-grid.reverse {

    grid-template-columns:

    1fr 1fr;

}



.product-image img {

    border-radius: 8px;

}



.product-content h2 {

    font-size: 40px;

    margin-bottom: 25px;

}



.product-content h3 {

    font-size: 26px;

    font-weight: 500;

    line-height: 1.7;

    margin-bottom: 35px;

}



.product-content p {

    margin-bottom: 25px;

}







/* =====================================================
   Product Feature Cards
===================================================== */


.liquid-feature {

    background: #fff;

}



.feature-cards {

    display: grid;

    grid-template-columns:

    repeat(3, 1fr);

    gap: 30px;

}



.feature-card {

    padding: 45px 30px;

    background: #f8f6f0;

    text-align: center;

}



.feature-card h3 {

    font-size: 22px;

    margin-bottom: 20px;

}



.feature-card p {

    font-size: 14px;

}







/* =====================================================
   Enjoy Liquid
===================================================== */


.enjoy-liquid {

    background: #fff;

}



.enjoy-list {

    max-width: 850px;

    margin: 0 auto;

}



.enjoy-item {

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid #e5e2d9;

}



.enjoy-item span {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #31382c;

    color: #fff;

    font-size: 13px;

    flex-shrink: 0;

}







/* =====================================================
   Jam
===================================================== */


.product-section.jam {

    background: #fff;

}



.jam-story {

    background: #f8f6f0;

}



.jam-story-grid {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.jam-story-image img {

    border-radius: 8px;

}



.jam-story-text h2 {

    font-size: 38px;

    margin-bottom: 35px;

}



.jam-story-text p {

    margin-bottom: 25px;

}







/* =====================================================
   Enjoy Jam
===================================================== */


.enjoy-jam {

    background: #fff;

}



.enjoy-cards {

    display: grid;

    grid-template-columns:

    repeat(4, 1fr);

    gap: 25px;

}



.enjoy-card {

    padding: 35px 25px;

    background: #f8f6f0;

}



.enjoy-number {

    font-size: 13px;

    color: #8b9278;

    margin-bottom: 20px;

}



.enjoy-card h3 {

    font-size: 18px;

    line-height: 1.6;

    margin-bottom: 15px;

}



.enjoy-card p {

    font-size: 14px;

}
/* =====================================================
   Collection Cards
===================================================== */


.product-selection {

    background: #f8f6f0;

}



.collection-cards {

    display: grid;

    grid-template-columns:

    repeat(2, 1fr);

    gap: 40px;

}



.collection-card {

    background: #fff;

    overflow: hidden;

}



.collection-card img {

    aspect-ratio: 1 / 1;

    object-fit: cover;

}



.collection-content {

    padding: 40px;

}



.collection-content h3 {

    font-size: 24px;

    font-weight: 500;

    margin-bottom: 20px;

}



.collection-content p {

    margin-bottom: 30px;

}







/* =====================================================
   Reason
===================================================== */


.reason {

    background: #fff;

}



.reason-cards {

    display: grid;

    grid-template-columns:

    repeat(3, 1fr);

    gap: 30px;

}



.reason-card {

    padding: 45px 30px;

    border: 1px solid #eee;

    text-align: center;

}



.reason-icon {

    width: 55px;

    height: 55px;

    margin: 0 auto 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #31382c;

    color: #fff;

}



.reason-card h3 {

    font-size: 19px;

    line-height: 1.7;

    margin-bottom: 20px;

}



.reason-card p {

    font-size: 14px;

}







/* =====================================================
   Sustainability
===================================================== */


.sustainability {

    background: #f8f6f0;

}



.sustainability-grid {

    display: grid;

    grid-template-columns:

    1fr 1fr;

    gap: 80px;

    align-items: center;

}



.sustainability-image img {

    border-radius: 8px;

}



.sustainability-text h2 {

    font-size: 38px;

    margin-bottom: 35px;

}



.sustainability-text p {

    margin-bottom: 25px;

}







/* =====================================================
   Final Message
===================================================== */


.final-message {

    background: #fff;

    text-align: center;

}



.final-inner {

    max-width: 800px;

    margin: 0 auto;

}



.final-inner h2 {

    font-size: 42px;

    margin-bottom: 40px;

}



.final-inner p {

    margin-bottom: 25px;

}



.large-message {

    margin-top: 50px;

    font-size: 28px;

    font-weight: 500;

}







/* =====================================================
   Purchase CTA
===================================================== */


.purchase {

    padding: 100px 0;

    background: #31382c;

    color: #fff;

}



.purchase-box {

    text-align: center;

}



.purchase-box h2 {

    font-size: 34px;

    margin-bottom: 20px;

}



.purchase-box > p {

    font-size: 22px;

    margin-bottom: 40px;

}



.purchase-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 50px;

}



.purchase .btn-primary {

    background: #fff;

    color: #31382c;

}



.purchase .btn-outline {

    border-color: #fff;

    color: #fff;

    background: transparent;

}



.collection-copy {

    font-size: 18px;

    letter-spacing: .15em;

}







/* =====================================================
   Footer
===================================================== */


.footer {

    padding: 50px 0;

    text-align: center;

    background: #fff;

}



.footer-logo {

    width: 120px;

    margin: 0 auto 25px;

}



.footer small {

    display: block;

    margin-top: 20px;

    color: #777;

}







/* =====================================================
   Animation
===================================================== */


.fade-up {

    opacity: 0;

    transform: translateY(30px);

    transition: .8s ease;

}



.fade-up.active {

    opacity: 1;

    transform: translateY(0);

}







/* =====================================================
   Tablet
===================================================== */


@media screen and (max-width: 1024px) {


    section {

        padding: 90px 0;

    }


    .hero h1 {

        font-size: 42px;

    }


    .brand-grid,
    .story-grid,
    .concept-grid,
    .whole-content,
    .product-grid,
    .jam-story-grid,
    .sustainability-grid {

        gap: 50px;

    }


    .habit-cards,
    .feature-cards,
    .reason-cards {

        grid-template-columns:

        repeat(2, 1fr);

    }


    .enjoy-cards {

        grid-template-columns:

        repeat(2, 1fr);

    }


}







/* =====================================================
   Mobile
===================================================== */


@media screen and (max-width: 767px) {


    body {

        font-size: 15px;

    }


    .container {

        width:

        calc(100% - 30px);

    }



    section {

        padding: 70px 0;

    }



    .section-heading {

        margin-bottom: 45px;

    }



    .section-heading h2 {

        font-size: 27px;

    }



    .site-header {

        padding: 20px 0;

    }



    .logo {

        width: 100px;

    }



    /* Hero */


    .hero {

        min-height: auto;

        padding-top: 130px;

        padding-bottom: 70px;

    }


    .hero-inner {

        flex-direction: column;

        gap: 40px;

    }


    .hero-text,
    .hero-product {

        width: 100%;

    }


    .hero h1 {

        font-size: 34px;

    }


    .hero .lead {

        font-size: 17px;

    }


    .hero-btns {

        flex-direction: column;

    }


    .btn {

        width: 100%;

        min-width: auto;

    }



    /* Grid */


    .brand-grid,
    .story-grid,
    .concept-grid,
    .whole-content,
    .product-grid,
    .jam-story-grid,
    .sustainability-grid {


        grid-template-columns:

        1fr;


    }



    .story-grid,
    .product-grid {

        display: flex;

        flex-direction: column;

    }



    .story-image,
    .product-image {

        order: -1;

    }



    .habit-cards,
    .feature-cards,
    .reason-cards,
    .ingredient-list,
    .collection-cards,
    .enjoy-cards {


        grid-template-columns:

        1fr;


    }



    /* Compare */


    .yuzu-compare {

        flex-direction: column;

    }


    .compare-box {

        width: 100%;

    }


    .compare-center {

        transform: rotate(90deg);

    }



    /* CTA */


    .purchase-buttons {

        flex-direction: column;

    }


    .final-inner h2 {

        font-size: 30px;

    }


    .large-message {

        font-size: 22px;

    }



}