@charset "utf-8";

/*
 * Readdy faithful visual layer
 * 元Readdyプロジェクト project-13891630.zip の Tailwind 指定を
 * 通常CSSへ置き換えた上書きレイヤー。
 * React / TypeScript / Tailwind の実行環境は不要です。
 */

:root{
    --background-50: 0.985 0.006 92;
    --background-100: 0.975 0.009 92;
    --background-200: 0.95 0.012 92;
    --background-300: 0.91 0.014 92;

    --primary-100: 0.94 0.028 247;
    --primary-200: 0.86 0.04 247;
    --primary-400: 0.55 0.06 250;
    --primary-500: 0.43 0.065 250;
    --primary-600: 0.365 0.06 250;
    --primary-700: 0.31 0.052 250;
    --primary-950: 0.15 0.035 250;

    --accent-50: 0.975 0.025 62;
    --accent-100: 0.95 0.05 60;
    --accent-200: 0.89 0.085 57;
    --accent-300: 0.79 0.11 54;
    --accent-500: 0.58 0.16 50;
    --accent-600: 0.51 0.15 48;
    --accent-700: 0.44 0.13 46;
    --accent-800: 0.37 0.11 44;

    --secondary-50: 0.975 0.02 150;
    --secondary-100: 0.94 0.045 150;
    --secondary-200: 0.87 0.07 150;
    --secondary-400: 0.72 0.16 155;
    --secondary-500: 0.62 0.15 152;
    --secondary-600: 0.53 0.13 150;
    --secondary-700: 0.45 0.11 150;
    --secondary-800: 0.37 0.09 150;
    --secondary-950: 0.22 0.06 149;

    --foreground-400: 0.62 0.012 258;
    --foreground-500: 0.52 0.014 258;
    --foreground-600: 0.44 0.016 256;
    --foreground-700: 0.37 0.016 256;
    --foreground-800: 0.31 0.018 256;
    --foreground-900: 0.27 0.02 255;
}

html{
    -webkit-text-size-adjust: 100%;
}

body{
    color: oklch(var(--foreground-900));
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    font-feature-settings: "palt";
    line-height: 1.5;
    background-color: oklch(var(--background-50));
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.fontHeading{
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
}

.wrap{
    padding-right: 24px;
    padding-left: 24px;
    max-width: 1200px;
}

.wrap.wide{
    max-width: 1328px;
}

.bgWhite{
    background-color: oklch(var(--background-50));
}

.bgCream,
.deliveryBox{
    background-color: oklch(var(--background-100));
}

.sectionBox{
    padding-top: 96px;
    padding-bottom: 96px;
}

.sectionHead{
    margin-bottom: 48px;
    max-width: 672px;
}

.sectionHead h2,
.costGrid h2,
.storeGrid h2{
    margin-top: 20px;
    color: oklch(var(--foreground-900));
    font-size: 36px;
    font-weight: 900;
    line-height: 1.25;
}

.sectionHead p,
.costGrid > div > p,
.storeGrid > div > p{
    margin-top: 20px;
    color: oklch(var(--foreground-700));
    font-size: 16px;
    line-height: 1.75;
}

.sectionLabel{
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.sectionLabel.orange{
    color: oklch(var(--accent-700));
    background-color: oklch(var(--accent-100));
}

.sectionLabel.green{
    color: oklch(var(--secondary-700));
    background-color: oklch(var(--secondary-100));
}

.sectionLabel.navy{
    color: oklch(var(--primary-700));
    background-color: oklch(var(--primary-100));
}

.redBadge{
    padding: 6px 16px;
    gap: 8px;
    border-radius: 999px;
    background-color: #dc2626;
    font-size: 12px;
}

.sectionHead > .redBadge{
    margin: 20px auto 0px;
    display: flex;
    width: fit-content;
}

.btn{
    border-radius: 999px;
}

.btn.primary,
.btn.navy{
    background-color: oklch(var(--primary-500));
}

.btn.green{
    background-color: oklch(var(--secondary-400));
}

/* header -------------------------------------------------- */
.siteHeader{
    color: oklch(var(--background-50));
    background-color: transparent;
    border-bottom: solid 1px transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.siteHeader.scrolled,
.siteHeader.menuOpened{
    color: oklch(var(--foreground-800));
    background-color: oklch(var(--background-50) / .95);
    border-bottom-color: oklch(var(--background-200));
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    backdrop-filter: blur(10px);
}

.headerBox{
    padding: 0px 24px;
    max-width: 1200px;
    min-height: 72px;
    height: 72px;
}

.headerLogo{
    width: 48px;
    height: 48px;
}

.headerNav{
    margin-left: auto;
    margin-right: auto;
    gap: 4px;
}

.headerNav > a,
.navGroupBtn{
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.navDropdown{
    top: 44px;
    padding: 8px;
    border-color: oklch(var(--background-200));
    border-radius: 12px;
    background-color: oklch(var(--background-50));
}

.lineBtn{
    padding: 8px 16px;
    background-color: oklch(var(--secondary-400));
    font-size: 14px;
}

.cartBtn,
.menuBtn{
    width: 40px;
    height: 40px;
}

/* hero ---------------------------------------------------- */
.heroBox{
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.heroMovie{
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.heroShade{
    position: absolute;
    inset: 0px;
    background-color: oklch(var(--secondary-950) / .50);
}

.heroInner{
    position: relative;
    z-index: 2;
    margin: 0px auto;
    padding: 96px 24px;
    width: 100%;
    max-width: 896px;
    text-align: center;
}

.heroInner h1{
    margin: 0px;
    color: oklch(var(--background-50));
    font-size: 36px;
    font-weight: 900;
    line-height: 1.375;
    letter-spacing: -0.025em;
}

.heroCta,
.fullCta{
    border-radius: 999px;
    color: oklch(var(--background-50));
    background-color: oklch(var(--accent-500));
}

.heroCta{
    margin: 32px auto 0px;
    padding: 14px 28px;
    display: inline-flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.heroCta strong,
.fullCta strong{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
}

.heroCta span,
.fullCta span{
    font-size: 12px;
    font-weight: 600;
    opacity: .9;
}

.heroBottom{
    position: absolute;
    z-index: 2;
    right: 0px;
    bottom: 40px;
    left: 0px;
    margin: 0px auto;
    padding: 0px 24px;
    width: 100%;
    max-width: 944px;
    color: oklch(var(--background-50));
    text-align: center;
}

.trustGrid,
.tocBox{
    border: none;
    background: transparent;
    box-shadow: none;
}

.trustGrid{
    margin: 0px auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.trustGrid div{
    padding: 0px;
    min-width: 0px;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: none!important;
    color: oklch(var(--background-50));
    background: transparent!important;
}

.trustGrid div + div{
    border: none;
}

.trustGrid div > i{
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px oklch(var(--background-50) / .50);
    border-radius: 50%;
    color: oklch(var(--background-50));
    background-color: oklch(var(--background-50) / .25);
    font-size: 24px;
    backdrop-filter: blur(8px);
}

.trustGrid div > span{
    color: oklch(var(--background-50));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.375;
}

.tocBox{
    margin-top: 24px;
    padding: 0px;
}

.tocBox > p{
    color: oklch(var(--background-50) / .70);
    font-size: 12px;
    font-weight: 700;
}

.tocBox > div{
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

.tocBox a{
    padding: 0px;
    border: none;
    border-radius: 0px;
    color: oklch(var(--background-50));
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: oklch(var(--background-50) / .40);
    text-underline-offset: 4px;
}

/* trial --------------------------------------------------- */
#trial{
    background-color: oklch(var(--background-50));
}

.soldBadge{
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.soldBadge span,
.soldBadge strong{
    margin: 0px;
    border-radius: 6px;
    font-size: 12px;
}

.soldBadge span{
    padding: 4px 10px;
    color: oklch(var(--foreground-400));
    background-color: oklch(var(--background-100));
    text-decoration: line-through;
}

.soldBadge strong{
    padding: 6px 16px;
    color: #ffffff;
    background-color: #dc2626;
    font-size: 14px;
}

.trialGrid{
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: start;
    gap: 24px;
}

.trialCard{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: solid 1px oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
    box-shadow: none;
}

.trialCardHead{
    padding: 12px 16px;
    min-height: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: solid 1px oklch(var(--background-200));
    color: oklch(var(--foreground-900));
    background-color: oklch(var(--background-50));
}

.trialCardHead span{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: oklch(var(--background-50));
    background-color: oklch(var(--accent-500));
    font-size: 10px;
    font-weight: 900;
}

.trialCardHead strong{
    color: oklch(var(--foreground-900));
    font-size: 14px;
    font-weight: 900;
}

.trialPic{
    position: relative;
    padding: 0px;
    min-height: 0px;
    overflow: hidden;
    background-color: oklch(var(--background-50));
}

.trialPic > img:first-child{
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    background-color: oklch(var(--background-50));
}

.trialPic .recipePic{
    position: absolute;
    inset: auto 0px 0px 0px;
    width: 100%;
    height: 60%;
    object-fit: cover;
    object-position: center;
    border: none;
    border-radius: 0px;
}

.trialCardBody{
    padding: 24px;
    flex: 1;
}

.trialTagline{
    color: oklch(var(--foreground-900));
    font-size: 14px;
    font-weight: 700;
}

.ingredientGroup{
    margin-top: 20px;
}

.ingredientGroup strong{
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: solid 1px;
    border-radius: 999px;
    font-size: 12px;
}

.ingredientGroup.meat strong{
    color: oklch(var(--accent-800));
    border-color: oklch(var(--accent-200));
    background-color: oklch(var(--accent-100));
}

.ingredientGroup.veg strong{
    color: oklch(var(--secondary-800));
    border-color: oklch(var(--secondary-200));
    background-color: oklch(var(--secondary-100));
}

.ingredientGroup.carb strong{
    color: oklch(var(--primary-700));
    border-color: oklch(var(--primary-200));
    background-color: oklch(var(--primary-100));
}

.ingredientGroup ul{
    margin-top: 8px;
    gap: 6px;
}

.ingredientGroup li{
    padding: 4px 10px;
    border-radius: 6px;
    color: oklch(var(--foreground-700));
    background-color: oklch(var(--background-100));
    font-size: 12px;
}

/* delivery ----------------------------------------------- */
.deliveryBox{
    padding: 40px 0px;
}

.deliveryGrid{
    margin-bottom: 12px;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.deliveryGrid div{
    padding: 10px 12px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: solid 1px oklch(var(--primary-500));
    border-radius: 8px;
    color: oklch(var(--primary-700));
    background-color: oklch(var(--background-50));
}

.deliveryGrid div i{
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: oklch(var(--primary-500));
    font-size: 18px;
}

.deliveryGrid div span{
    font-size: 12px;
    font-weight: 700;
    line-height: 1.375;
}

.deliveryBox .fullCta{
    padding: 14px 28px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

/* about --------------------------------------------------- */
#about,
#factory,
#instagram,
#consult,
#catalog{
    background-color: oklch(var(--background-100));
}

.aboutMainPic{
    margin-top: 0px;
    overflow: hidden;
    border-radius: 24px;
}

.aboutMainPic img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
}

.aboutBlock{
    margin-top: 24px;
    padding: 36px;
    border: solid 1px oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.aboutBlock + .aboutBlock{
    margin-top: 24px;
}

.aboutIndex{
    display: flex;
    align-items: center;
    gap: 12px;
}

.aboutIndex span{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: oklch(var(--background-50));
    background-color: oklch(var(--primary-500));
    font-size: 12px;
    font-weight: 700;
}

.aboutIndex small{
    color: oklch(var(--accent-600));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aboutBlock > .redBadge{
    margin: 12px 0px 0px 0px;
}

.aboutBlock h3{
    margin-top: 16px;
    color: oklch(var(--foreground-900));
    font-size: 24px;
    font-weight: 900;
    line-height: 1.4;
}

.aboutBlock > p{
    margin-top: 12px;
    color: oklch(var(--foreground-700));
    font-size: 16px;
    line-height: 1.625;
}

.fadeGallery{
    margin-top: 24px;
}

.fadeGalleryStage{
    margin: 0px auto;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: solid 1px oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.fadeGalleryStage > img{
    object-fit: cover;
    object-position: center;
}

.galleryCount{
    left: 16px;
    top: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    color: oklch(var(--foreground-700));
    background-color: oklch(var(--background-50) / .85);
    font-size: 12px;
}

.galleryPrev,
.galleryNext,
.scrollPrev,
.scrollNext{
    width: 44px;
    height: 44px;
    border: solid 1px oklch(var(--background-200));
    border-radius: 50%;
    color: oklch(var(--foreground-700));
    background-color: oklch(var(--background-50));
    box-shadow: none;
}

.galleryNext,
.scrollNext{
    border-color: transparent;
    color: oklch(var(--background-50));
    background-color: oklch(var(--primary-500));
}

.galleryCaption{
    margin: 16px auto 0px;
    max-width: 420px;
    color: oklch(var(--foreground-600));
    font-size: 12px;
    line-height: 1.625;
    text-align: center;
}

.galleryDots{
    margin-top: 16px;
}

.galleryDots button{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: oklch(var(--background-300));
}

.galleryDots button.active{
    width: 24px;
    background-color: oklch(var(--primary-500));
}

.oneImage{
    margin: 24px auto 0px;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: solid 1px oklch(var(--background-200));
    border-radius: 16px;
}

.oneImage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.wideImage,
.wideVideo{
    margin-top: 24px;
    border: solid 1px oklch(var(--background-200));
    border-radius: 16px;
}

.featurePills{
    margin-top: 24px;
    gap: 12px;
}

.featurePills span{
    padding: 6px 12px;
    color: oklch(var(--secondary-700));
    background-color: oklch(var(--secondary-100));
    font-size: 12px;
}

.blendGrid{
    margin-top: 24px;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
}

.blendCard{
    padding: 20px;
    border: solid 1px oklch(var(--background-200));
    border-radius: 16px;
    background-color: oklch(var(--background-50));
}

.blendCard img{
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    background-color: oklch(var(--background-100));
}

.blendCard h4{
    margin-top: 12px;
    color: oklch(var(--foreground-900));
    font-size: 16px;
}

.blendCard p{
    margin-top: 4px;
    color: oklch(var(--foreground-600));
    font-size: 12px;
    line-height: 1.625;
}

.seasonNote{
    margin-top: 16px!important;
    padding: 16px;
    border-radius: 16px;
    color: oklch(var(--accent-800))!important;
    background-color: oklch(var(--accent-50));
    font-size: 12px!important;
    font-weight: 600;
    text-align: center;
}

/* factory ------------------------------------------------- */
#factory .sectionHead{
    margin-bottom: 40px;
}

.scrollGallery{
    margin-top: 0px;
}

.scrollTrack{
    padding-bottom: 16px;
    gap: 16px;
    scroll-snap-type: x mandatory;
}

.scrollCard{
    width: calc(33.333% - 11px);
    min-width: calc(33.333% - 11px);
    scroll-snap-align: center;
    overflow: hidden;
    border: solid 1px oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.scrollCard .pic{
    height: 288px;
}

.scrollCard .pic span{
    left: 16px;
    top: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    color: oklch(var(--foreground-700));
    background-color: oklch(var(--background-50) / .85);
    font-size: 12px;
}

.scrollCard .txt{
    padding: 20px;
}

.scrollCard .txt strong{
    color: oklch(var(--foreground-900));
    font-size: 14px;
}

.scrollCard .txt p{
    margin-top: 4px;
    color: oklch(var(--foreground-600));
    font-size: 12px;
    line-height: 1.625;
}

/* store --------------------------------------------------- */
#store,
#voice,
#buy{
    background-color: oklch(var(--background-50));
}

.storeGrid{
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: center;
    gap: 40px;
}

.storeGrid > div:first-child > .center{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.storeGrid > div:first-child > .center .redBadge{
    margin: 16px 0px 0px 0px;
}

.storeGrid h2{
    margin-top: 20px;
}

.storeGrid .wideImage{
    margin-top: 28px;
    border: none;
}

.storeMovie{
    overflow: hidden;
    border-radius: 24px;
}

.storeMovie video{
    height: 384px;
    object-fit: cover;
    object-position: center;
}

.consultBand{
    margin-top: 40px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 24px;
    color: oklch(var(--background-50));
    background-color: oklch(var(--primary-500));
}

.consultBand h3{
    color: oklch(var(--background-50));
    font-size: 18px;
    font-weight: 900;
}

.consultBand p{
    margin-top: 12px;
    color: oklch(var(--background-50) / .85);
    font-size: 14px;
    line-height: 1.625;
}

.consultBand .btn{
    margin-top: 24px;
    padding: 12px 24px;
}

/* instagram ----------------------------------------------- */
.instaHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.instaHead > div{
    gap: 12px;
}

.instaHead > div > i{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: oklch(var(--accent-600));
    background-color: oklch(var(--accent-100));
    font-size: 30px;
}

.instaHead strong{
    color: oklch(var(--foreground-900));
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 900;
}

.instaHead p{
    margin-top: 2px;
    color: oklch(var(--foreground-600));
    font-size: 14px;
}

.instaHead p b{
    margin: 0px 4px;
    color: oklch(var(--accent-600));
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 900;
}

.instaHead .btn{
    padding: 12px 24px;
    background-color: oklch(var(--accent-500));
}

.instaGallery{
    margin-top: 40px;
}

.instaCard{
    width: calc(25% - 12px);
    min-width: calc(25% - 12px);
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    scroll-snap-align: center;
}

.instaCard i{
    right: 14px;
    bottom: 14px;
}

#instagram .galleryDots button.active{
    background-color: oklch(var(--accent-500));
}

/* cost simulator ------------------------------------------ */
.costGrid{
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: center;
    gap: 40px;
}

.costCalc{
    padding: 32px;
    border: solid 2px oklch(var(--primary-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.calcLabel{
    padding: 6px 16px;
    border-radius: 999px;
    color: oklch(var(--accent-700));
    background-color: oklch(var(--accent-100));
}

.costCalc > .small.center{
    margin-top: 16px;
    color: oklch(var(--foreground-500));
}

.costCalc label{
    margin-top: 24px;
    color: oklch(var(--foreground-700));
}

.weightControl{
    margin-top: 8px;
    gap: 12px;
}

.weightControl button{
    width: 44px;
    height: 44px;
    border-color: oklch(var(--background-200));
    background-color: oklch(var(--background-50));
}

.weightControl input{
    padding: 12px 20px;
    height: auto;
    border-color: oklch(var(--background-200));
    border-radius: 999px;
    color: oklch(var(--foreground-900));
    background-color: oklch(var(--background-50));
    font-size: 20px;
    font-weight: 900;
}

.costResultGrid{
    margin-top: 20px;
    gap: 12px;
}

.costResultGrid > div{
    padding: 16px;
    border: none;
    border-radius: 16px;
}

.costResultGrid > div:first-child{
    background-color: oklch(var(--secondary-50));
}

.costResultGrid > div:last-child{
    background-color: oklch(var(--accent-50));
}

.costResultGrid img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

.costResultGrid strong{
    margin-top: 12px;
    font-size: 12px;
}

.costResultGrid > div:first-child strong{
    color: oklch(var(--secondary-700));
}

.costResultGrid > div:last-child strong{
    color: oklch(var(--accent-700));
}

.costResultGrid b{
    margin-top: 8px;
    color: oklch(var(--foreground-900));
    font-family: "Shippori Mincho", serif;
    font-size: 24px;
    font-weight: 900;
}

.monthlyGrid{
    margin-top: 16px;
    gap: 12px;
}

.monthlyGrid div{
    padding: 16px;
    border-radius: 16px;
    background-color: oklch(var(--background-100));
}

.planNote{
    margin-top: 16px;
    padding: 12px;
    border-radius: 16px;
    color: oklch(var(--foreground-600));
    background-color: oklch(var(--background-100));
}

.costCalc > .redBadge{
    margin: 20px auto 0px;
    display: flex;
    width: fit-content;
}

.costCalc > .btn{
    margin-top: 16px;
    padding: 14px 24px;
    background-color: oklch(var(--accent-500));
}

/* testimonials -------------------------------------------- */
#voice{
    padding-top: 96px;
    padding-bottom: 96px;
}

.voiceWindow{
    margin: 40px auto 0px;
    width: 100%;
    max-width: 576px;
    height: 52vh;
    min-height: 360px;
    mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}

.voiceTrack{
    display: block;
    animation-duration: 60s;
}

.voiceCard{
    margin-bottom: 16px;
    padding: 20px;
    border-color: oklch(var(--background-200));
    border-radius: 16px;
    background-color: #ffffff;
}

.voiceCard p{
    margin-top: 12px;
    color: oklch(var(--foreground-700));
    font-size: 14px;
    line-height: 1.625;
}

/* purchase guide ------------------------------------------ */
.lineupTitle{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: oklch(var(--foreground-900));
    font-size: 18px;
    font-weight: 700;
}

.lineupGrid,
.methodGrid{
    gap: 16px;
}

.lineupCard{
    border-color: oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.lineupCard > img{
    height: 224px;
    object-fit: cover;
    object-position: top;
}

.lineupBody{
    padding: 24px;
}

.methodCard{
    padding: 24px;
    border-color: oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.methodCard.featured{
    border-color: #ef4444;
    background-color: oklch(var(--accent-50));
}

.fridayCta{
    margin-top: 40px;
    padding: 24px 32px;
    border-radius: 24px;
    background-color: oklch(var(--primary-500));
}

/* catalog ------------------------------------------------- */
.catalogGroup{
    margin-top: 64px;
}

.catalogGroup > h3{
    margin-bottom: 32px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    color: oklch(var(--primary-700));
    background-color: oklch(var(--primary-100));
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.catalogGrid{
    gap: 20px;
}

.catalogGrid.multi{
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.catalogGrid.two{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
}

.catalogGrid.single{
    grid-template-columns: minmax(0,1fr);
    justify-content: stretch;
}

.steamGroup{
    margin-top: 40px;
}

.productCard{
    border-color: oklch(var(--background-200));
    border-radius: 24px;
    background-color: oklch(var(--background-50));
}

.catalogNote{
    margin-top: 56px;
    padding: 28px;
    border-color: oklch(var(--background-200));
    border-radius: 24px;
    color: oklch(var(--foreground-600));
    background-color: oklch(var(--background-50));
    font-size: 12px;
    line-height: 1.625;
}

/* footer -------------------------------------------------- */
.siteFooter{
    padding: 56px 0px;
    color: oklch(var(--background-50));
    background-color: oklch(var(--primary-700));
}

.footerGrid{
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 32px;
}

.footerInfo > img{
    width: 48px;
    height: 48px;
}

.footerInfo > p{
    margin-top: 16px;
    color: oklch(var(--background-50) / .80);
}

.footerInfo dl{
    margin-top: 16px;
    color: oklch(var(--background-50) / .60);
}

.footerLink > strong{
    color: oklch(var(--background-50));
}

.footerLink ul{
    color: oklch(var(--background-50) / .80);
}

/* responsive --------------------------------------------- */
@media (max-width: 1023px){
    .pcNav{
        display: none!important;
    }

    .menuBtn{
        display: flex;
    }

    .headerAction{
        margin-left: auto;
    }

    .scrollCard{
        width: calc(50% - 8px);
        min-width: calc(50% - 8px);
    }

    .instaCard{
        width: calc(50% - 8px);
        min-width: calc(50% - 8px);
    }
}

@media (max-width: 767px){
    body{
        padding-bottom: 112px;
    }

    .wrap,
    .wrap.wide{
        padding-right: 10px;
        padding-left: 10px;
    }

    .sectionBox{
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .sectionHead{
        margin-bottom: 48px;
    }

    .sectionHead h2,
    .costGrid h2,
    .storeGrid h2{
        font-size: 24px;
    }

    .sectionHead p,
    .costGrid > div > p,
    .storeGrid > div > p{
        font-size: 14px;
    }

    .headerBox{
        padding-right: 16px;
        padding-left: 16px;
        min-height: 64px;
        height: 64px;
    }

    .headerLogo{
        width: 40px;
        height: 40px;
    }

    .lineBtn{
        padding: 8px 12px;
        gap: 6px;
        font-size: 12px;
    }

    .heroBox{
        min-height: 720px;
    }

    .heroInner{
        padding: 96px 16px;
    }

    .heroInner h1{
        font-size: 24px;
    }

    .heroCta{
        padding: 14px 28px;
        width: 100%;
        max-width: 440px;
    }

    .heroBottom{
        bottom: 24px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .trustGrid{
        gap: 20px;
    }

    .trustGrid div > i{
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .tocBox{
        margin-top: 24px;
    }

    .trialGrid{
        gap: 10px;
    }

    .trialCard{
        border-radius: 16px;
    }

    .trialCardHead{
        padding: 8px 10px;
        gap: 6px;
    }

    .trialCardHead span{
        width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .trialCardHead strong{
        font-size: 11px;
    }

    .trialPic > img:first-child{
        aspect-ratio: 4 / 5;
        object-fit: contain;
        object-position: center;
        background-color: oklch(var(--background-100));
    }

    .trialPic .recipePic{
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    .trialCardBody{
        padding: 12px;
    }

    .trialTagline{
        font-size: 12px;
    }

    .ingredientGroup{
        margin-top: 12px;
    }

    .ingredientGroup strong{
        padding: 2px 8px;
        gap: 4px;
        font-size: 10px;
    }

    .ingredientGroup ul{
        margin-top: 6px;
        gap: 4px;
    }

    .ingredientGroup li{
        padding: 2px 6px;
        font-size: 10px;
    }

    .deliveryBox{
        padding: 32px 0px;
    }

    .deliveryGrid{
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .aboutBlock{
        padding: 24px;
    }

    .aboutBlock h3{
        font-size: 20px;
    }

    .aboutBlock > p{
        font-size: 14px;
    }

    .blendGrid{
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
    }

    .blendCard{
        padding: 12px;
    }

    .scrollCard{
        width: 85%;
        min-width: 85%;
    }

    .scrollCard .pic{
        height: 256px;
    }

    .storeGrid,
    .costGrid{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .storeMovie video{
        height: 288px;
    }

    .instaHead{
        align-items: stretch;
        flex-direction: column;
    }

    .instaHead > div > i{
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .instaHead .btn{
        width: fit-content;
    }

    .instaCard{
        width: 70%;
        min-width: 70%;
    }

    .costCalc{
        padding: 24px;
    }

    #voice{
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .voiceWindow{
        margin-top: 24px;
    }

    .lineupGrid,
    .methodGrid{
        grid-template-columns: 1fr;
    }

    .fridayCta{
        padding: 24px;
        align-items: flex-start;
        flex-direction: column;
    }

    .catalogGrid.multi{
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .catalogGrid.two{
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 16px;
    }

    .footerGrid{
        grid-template-columns: 1fr;
    }
}

/* PC: お試しサンプルの商品画像は、パッケージ＋調理後を並べて表示 */
@media (min-width: 768px){
    .trialPic{
        height: 260px;
        min-height: 260px;
        padding: 18px 18px 12px 18px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
        background-color: oklch(var(--background-50));
    }

    .trialPic > img:first-child{
        width: 50%;
        height: 100%;
        aspect-ratio: auto;
        flex: 0 0 auto;
        object-fit: contain;
        object-position: center bottom;
        background-color: transparent;
    }

    .trialPic .recipePic{
        position: static;
        width: 44%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0px 0px 10px -5%;
        flex: 0 0 auto;
        object-fit: contain;
        object-position: center;
        border: none;
        border-radius: 0px;
        background-color: transparent;
        box-shadow: none;
    }
}