@charset "utf-8";


/* ===============================================
 *
 * メディアクエリ PCワイド (1440px ~ )
 *
 * ============================================ */


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

.hero {
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
}

.hero__background {
    width: 100%;
    min-height: calc(100svh - var(--header-height));
    background-image: url(/image/hero-background.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero__content {
    padding: 20px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,0.1)
    );
    display: inline-block;
    text-align: center;
    border-radius: 50%;
}

.hero__title {
    color: var(--text-color-inverse);
    text-shadow: 4px 4px 14.8px #000, 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --hero-title-size: 4.4rem;
    font-size: var(--hero-title-size);
    font-weight: 600;
}

.hero__titleEmphasis--primary {
    font-size: 1.18em;
    font-weight: 600;
}

.hero__titleEmphasis--secondary {    
    font-size: 1.14em;
    font-weight: 600;
}

.hero__titleEmphasis--punctuation {
    font-size: 0.73em;
    font-weight: 600;
}

.hero__text {
    margin-top: 61px;
    color: #FFF;
    text-shadow: 0px 3px 6.6px #000;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 2.8rem;
    line-height: 1.786;
}

.hero__buttonWrapper {
    margin: 103px auto 20px;
    max-width: 236px;
    width: 100%;
    height: 79px;
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid #F76944;
    border-radius: 15px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__button {
    max-width: 219px;
    width: 100%;
    height: 66px;
    background-color: #F76944;
    border-radius: 15px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-inverse);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 3.2rem;
}

.hero__buttonWrapper:active .hero__button {
    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: none;
}

/* ===============================================
 * About Section
 * ============================================ */

.about {
    margin-top: 82px;
    max-width: 1920px;
    width: 100%;
}

.about__container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1440px;
    width: 100%;
    min-height: 600px;
}

.about__layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.about__backgroundWrapper {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    margin-left: 53px;
    width: 880px;
    aspect-ratio: 880 / 600;
    border: 4px solid var(--picky-orange-light);
    border-radius: 15px;
    background: rgba(217, 217, 217, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.about__background {
    width: 800px;
    aspect-ratio: 800 / 520;
    object-fit: cover;
    background-color: lightgray;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
    box-shadow: -4px 4px 15px var(--picky-orange);
}

.about__contentWrapper {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    margin: 74px 60px 0 0;
    width: 842px;
    height: 460px;
    border: 4px solid var(--picky-orange-light);
    border-radius: 15px;
    background: rgba(217, 217, 217, 0);
    position: relative;
    z-index: 1;
}

.about__content {
    padding: 20px;
    width: 860px;
    height: 460px;
    background: var(--bg-color);
    border-radius: 15px;
    box-shadow: -4px 4px 15px 0px var(--picky-orange);
    transform: translate(-66px, 61px);
}

.about__title {
    padding-top: 4px;
    text-align: center;
    color: var(--picky-orange-light);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 3.6rem;
    font-weight: 600;
}

.about__titleEmphasis {
    font-weight: 600;
}

.about__divider {
    margin: 0 auto;
    margin-top: 6px;
    border: none;
    border-top: 1px solid var(--picky-orange-light);
    width: 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.about__text {
    margin-top: 20.5px;
    color: var(--text-color-base);
    text-align: center;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --about-text-size: 2.4rem;
    font-size: var(--about-text-size);
    line-height: 30px;
    letter-spacing: -1.6px;
}

.about__emphasis--brand {
    letter-spacing: normal;
}

.about__emphasis--highlight {
    color: var(--picky-orange-light);
}

.about__emphasis--message {
    font-size: 1.08em;
    font-weight: 600;
}

/* ===============================================
 * Feature Section
 * ============================================ */

.feature {
    margin: 95px auto 0;
    max-width: 1920px;
    width: 100%;
}

.feature__container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1440px;
    width: 100%;
    min-height: 600px;
}

.feature__layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.feature__backgroundWrapper {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: start;
    margin-right: 67px;
    width: 880px;
    aspect-ratio: 880 / 600;
    border: 4px solid var(--picky-orange-light);
    border-radius: 15px;
    background-color: rgba(217, 217, 217, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature__background {
    width: 800px;
    aspect-ratio: 800 / 520;
    background-color: lightgray;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 15px;
    box-shadow: 4px 4px 15px 0px var(--picky-orange-light);
}

.feature__contentWrapper {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: start;
    margin: 59px 0 0 64px;
    width: 762px;
    height: 360px;
    border: 4px solid var(--picky-orange-light);
    border-radius: 15px;
    background-color: rgba(217, 217, 217, 0);
    position: relative;
    z-index: 1;
}

.feature__content {
    padding: 20px;
    width: 760px;
    height: 360px;
    border-radius: 15px;
    background-color: var(--bg-color);
    box-shadow: 4px 4px 15px 0px var(--picky-orange);
    text-align: center;
    transform: translate(90px, 55px);
}

.feature__title {
    padding-top: 5px;
    color: var(--picky-orange-light);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 3.6rem;
    font-weight: 600;
    letter-spacing: 0.96px;
}

.feature__divider {
    margin: 0 auto;
    margin-top: 10px;
    border: none;
    border-top: 1px solid var(--picky-orange-light);
    width: 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.feature__text {
    margin-top: 36px;
    color: #000;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --feature-text-size: 2.4rem;
    font-size: var(--feature-text-size);
    line-height: 30px;
    letter-spacing: -1.6px;
}

.feature__emphasis {
    font-size: 1.08em;
    letter-spacing: normal;
}

.feature__emphasis--highlight {
    color: var(--picky-orange-light);
    font-weight: 600;
} 

/* ===============================================
 * Points Section
 * ============================================ */

.points {
    margin-top: 200px;
    max-width: 1920px;
    width: 100%;
}

.points__container {
    margin: 0 auto;
    padding: 20px;
    max-width: 1440px;
    width: 100%;
}

.points__list {
    display: grid;
    justify-content: center;
    column-gap: 67px;
    row-gap: 120px;
    grid-template-columns: repeat(2, minmax(0, 580px));
}

.points__item {
    padding: 20px;
    max-width: 580px;
    width: 44.6%;
    height: 560px;
    border-radius: 20px;
    box-shadow: 3px 4px 9px var(--picky-orange);
    text-align: center;
    position: relative;
}

.points__item--first {
    max-width: 720px;
    width: 100%;
    height: auto;
}

.points__item:nth-child(1):nth-last-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(720px, 100%);
}

.points__item:nth-child(2):nth-last-child(2),
.points__item:nth-child(3):nth-last-child(1) {
    width: min(580px, 100%);
}

.points__item--first {
    background-color: var(--picky-orange-light);
}

.points__badge {
    width: 180px;
    height: 180px;
    background: url(/image/points-badge.svg);
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.points__badgeNumber {
    margin-top: 85px;
    color: #F49A81;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--picky-orange);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 6.4rem;
    line-height: 0;
}

.points__badgeLabel {
    margin-top: 35px;
    color: #FFD4C9;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #F49A81;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -2px;
    text-decoration-line: underline;
}

.points__title {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    position: relative;
    display: inline-block;
}

.points__title--convenience {
    margin-top: 120px;
    color: var(--text-color-inverse);
}

.points__title--convenience::after {
    content: "";
    height: 2px;
    background-color: #FFF;
    border: 1px solid #F49A81; 
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
}

.points__text {
    margin: 0 auto;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 2.8rem;
    line-height: 1.2;
    letter-spacing: -2.8px;
}

.points__text--convenience {
    margin: 40px auto 20px;
    max-width: 38ch;
    color: var(--text-color-inverse);
}

.points__emphasis {
    letter-spacing: 0;
}

.points__item--second,
.points__item--third {
    background-color: var(--bg-color);
    border: 5px solid var(--picky-orange-light);
}

.points__title--fresh,
.points__title--producer {
    margin-top: 115px;
    color: var(--picky-orange-light);
    -webkit-text-stroke-color: #FFC4B5;
}

.points__title::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
}

.points__title--fresh::after,
.points__title--producer::after {
    background-color: var(--picky-orange-light);
    border: 1px solid #F49A81; 
}

.points__text--fresh,
.points__text--producer {
    color: var(--picky-orange-light);
}

.points__text--fresh {
    margin-top: 83px;
    max-width: 32ch;
}

.points__text--producer {
    margin-top: 60px;
    max-width: 32ch;
}


/* ===============================================
 *
 * メディアクエリ 標準PC (1280px ~ 1439px)
 *
 * ============================================ */


@media (max-width: 1439px) {
    .points__list {
        column-gap: clamp(50px, calc(11vw - 91px), 67px);
    }
}


/* ===============================================
 *
 * メディアクエリ 小型PC,タブレット横 (1024px ~ 1279px)
 *
 * ============================================ */


@media (max-width: 1279px) {
    .hero__title {
        --hero-title-size: clamp(3.8rem, calc(2.4vw + 13.4px), 4.4rem);
    }

    .about__contentWrapper {
        width: clamp(782px, calc(31vw + 465px), 862px);
    }

    .about__content {
        width: clamp(780px, calc(31vw + 463px), 860px);
    }

    .about__title {
        font-size: clamp(3.4rem, calc(0.8vw + 26px), 3.6rem);
    }

    .about__text {
        --about-text-size: clamp(2.2rem, calc(0.78vw + 14px), 2.4rem);
    }

    .feature__contentWrapper {
        width: clamp(662px, calc(39vw + 263px), 762px);
    }

    .feature__content {
        width: clamp(660px, calc(39vw + 261px), 760px);
    }

    .feature__title {
        font-size: clamp(3.4rem, calc(0.8vw + 26px), 3.6rem);
    }

    .feature__text {
        --feature-text-size: clamp(2.2rem, calc(0.8vw + 14px), 2.4rem);
    }

    .points__list {
        column-gap: clamp(30px, calc(8vw - 52px), 50px);
    }

    .points__title {
        font-size: clamp(3.6rem, calc(1.6vw + 19.6px), 4rem);
    }

    .points__text {
        font-size: clamp(2.4rem, calc(1.6vw + 7.6px), 2.8rem);
    }
}


/* ===============================================
 *
 * メディアクエリ タブレット縦 (768px ~ 1023px)
 *
 * ============================================ */


@media (max-width: 1023px) {
    .hero__content {
        padding: 10px;
    }

    .hero__title {
        --hero-title-size: clamp(2.9rem, calc(3.5vw + 2px), 3.8rem);
    }

    .hero__text {
        font-size: clamp(2.1rem, calc(3vw - 2px), 2.8rem);
    }

    .about__backgroundWrapper {
        margin: 0;
        max-width: 880px;
        width: 100%;
    }

    .about__background {
        max-width: 800px;
        width: 91%;
    }

    .about__contentWrapper {
        margin: 74px 40px 0 0;
        max-width: 790px;
        width: 86%;
    }

    .about__content {
        padding: 10px;
        max-width: 780px;
        width: 100%;
        height: auto;
        transform: translate(-33px, 30px);
    }

    .about__text {
        margin-bottom: 26px;
        --about-text-size: clamp(1.8rem, calc(1.6vw + 5.7px), 2.2rem);
    }

    .feature__backgroundWrapper {
        margin: 0;
        max-width: 880px;
        width: 100%;
    }

    .feature__background {
        max-width: 800px;
        width: 91%;
    }

    .feature__contentWrapper {
        margin: 59px 0 0 32px;
        max-width: 662px;
        width: 85%;
    }

    .feature__content {
        max-width: 660px;
        width: 99.7%;
        transform: translate(45px, 28px);
    }

    .feature__title {
        font-size: clamp(3.2rem, calc(0.78vw + 26px), 3.4rem);
    }

    .feature__text {
        --feature-text-size: clamp(2rem, calc(0.78vw + 14px), 2.2rem);
    }

    .points__list {
        align-items: center;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .points__item {
        justify-self: center;
    }

    .points__item--first {
        max-width: 580px;
    }

    .points__item--third {
        background-color: var(--picky-orange-light);
    }

    .points__item:nth-child(1):nth-last-child(3),
    .points__item:nth-child(2):nth-last-child(2),
    .points__item:nth-child(3):nth-last-child(1) {
        width: 80%;
    }

    .points__title--producer {
        margin-top: 120px;
        color: var(--text-color-inverse);
    }

    .points__title--producer::after {
        background-color: #FFF;
        border: 1px solid #F49A81; 
    }

    .points__text--producer {
        margin-top: 40px;
        color: var(--text-color-inverse);
    }
}


/* ===============================================
 *
 * メディアクエリ SP標準 (480px ~ 767px)
 *
 * ============================================ */


@media (max-width: 767px) {
    .hero__title {
        --hero-title-size: clamp(3rem, calc(7vw - 3.6px), 5rem);
    }

    .hero__text {
        max-width: 36ch;
        margin: 61px auto 0;
        font-size: clamp(2rem, calc(2vw + 10px), 2.6rem);
    }

    .hero__buttonWrapper {
        margin-top: 60px;
    }

    .about__container {
        min-height: auto;
    }

    .about__layout {
        display: block;
    }

    .about__backgroundWrapper {
        display: none;
    }

    .about__background {
        width: 100%;
        box-shadow: none;
        opacity: 0;
    }

    .about__contentWrapper {
        margin: 0 auto;
        width: 100%;
        height: auto;
        border: none;
        position: relative;
        z-index: 1;
    }

    .about__content {
        position: relative;
        transform: none;
        height: auto;
        width: min(630px, 100%);
        margin: 0 auto;
        padding: 24px 16px 28px;
        border-radius: 15px;
        box-shadow: none;
        background: transparent;
    }

    .about__content::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-image: url("/image/about-background.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        background-color: rgba(255, 255, 255, 0.78);
        background-blend-mode: lighten;

        z-index: -1;
    }

    .about__title {
        font-size: 3.6rem;
    }

    .about__text {
        max-width: 38ch;
        margin: 20.5px auto 0;
        line-height: 1.9;
        letter-spacing: -0.02em;
        text-align: left;
    }

    .about__emphasis--message {
        display: block;
        text-align: center;
        font-size: 2.4rem
    }

    .feature__container {
        min-height: auto;
    }

    .feature__layout {
        display: block;
    }

    .feature__backgroundWrapper {
        display: none;
    }

    .feature__background {
        width: 100%;
        box-shadow: none;
        opacity: 0;
    }

    .feature__contentWrapper {
        margin: 0 auto;
        width: 100%;
        height: auto;
        border: none;
        position: relative;
        z-index: 1;
    }

    .feature__content {
        position: relative;
        transform: none;
        height: auto;
        width: min(630px, 100%);
        margin: 0 auto;
        padding: 24px 16px 28px;
        border-radius: 15px;
        box-shadow: none;
        background: transparent;
    }

    .feature__content::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-image: url("/image/feature-background.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        background-color: rgba(255, 255, 255, 0.78);
        background-blend-mode: lighten;

        z-index: -1;
    }

    .feature__title {
        font-size: clamp(3.2rem, calc(0.78vw + 26px), 3.4rem);
    }

    .feature__text {
        max-width: 40ch;
        margin: 20.5px auto 0;
        font-size: 1.8rem;
        line-height: 1.9;
        letter-spacing: -0.02em;
        text-align: left;
    }

    .feature__emphasis {
        display: block;
        text-align: center;
        font-size: 2.4rem;
    }

    .points__item {
        padding: 10px;
        height: auto;
    }

    .points__item:nth-child(1):nth-last-child(3),
    .points__item:nth-child(2):nth-last-child(2),
    .points__item:nth-child(3):nth-last-child(1) {
        width: 100%;
    }

    .points__text {
        max-width: 36ch;
        letter-spacing: normal;
        text-align: left;
    }

    .points__text--convenience {
        margin: 40px auto;
    }

    .points__text--fresh {
        margin: 40px auto;
    }

    .points__text--producer {
        margin: 40px auto;
    }
}


/* ===============================================
 *
 * メディアクエリ SP ( ~ 479px)
 *
 * ============================================ */


@media (max-width: 479px) {
    .hero__title {
        --hero-title-size: clamp(2.3rem, calc(4.4vw + 9px), 3rem);
    }

    .hero__text {
        max-width: 36ch;
        margin: 61px auto 0;
        font-size: clamp(1.6rem, calc(2.5vw + 8px), 2rem);
    }

    .about__container {
        padding: 10px;
    }

    .about__text {
        --about-text-size: clamp(1.6rem, calc(1.26vw + 12px), 1.8rem);
    }

    .about__emphasis--message {
        font-size: clamp(2.4rem, calc(2.5vw + 16px), 2.8rem);
    }
    
    .feature__container {
        padding: 10px;
    }

    .feature__title {
        font-size: clamp(2.6rem, calc(3.8vw + 14px), 3.2rem);
    }

    .feature__text {
        --feature-text-size: clamp(1.6rem, calc(1.26vw + 12px), 1.8rem);
    }

    .feature__emphasis {
        font-size: clamp(2.4rem, calc(2.5vw + 16px), 2.8rem);
    }

    .points__container {
        padding: 10px;
    }

    .points__title {
        font-size: min(7.5vw, 3.6rem);
    }

    .points__text {
        font-size: clamp(1.6rem, 5vw, 2.4rem);
    }
}