@charset "utf-8";

*{
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 150px 0px;
    overflow-x: hidden;
    color: #2f3945;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    background-color: #fbfaf5;
}

body.menuOpen,
body.cartOpen,
body.modalOpen{
    overflow: hidden;
}

img,
video{
    max-width: 100%;
    vertical-align: bottom;
}

button,
input{
    font-family: inherit;
}

button,
a{
    -webkit-tap-highlight-color: transparent;
}

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

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

p,
h1,
h2,
h3,
h4,
dl,
dd{
    margin: 0px 0px 0px 0px;
}

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

.wrap{
    margin: 0px auto;
    padding: 0px 24px 0px 24px;
    max-width: 1120px;
}

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

.center{
    text-align: center;
}

.small{
    font-size: 12px;
}

.mt50{
    margin-top: 50px!important;
}

.bgWhite{
    background-color: #ffffff;
}

.bgCream{
    background-color: #f7f4ec;
}

.sectionBox{
    margin: 0px 0px 0px 0px;
    padding: 88px 0px 88px 0px;
}

.sectionHead{
    margin: 0px auto 44px;
    max-width: 760px;
}

.sectionHead h2,
.costGrid h2,
.storeGrid h2{
    margin: 14px 0px 0px 0px;
    color: #223548;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.45;
}

.sectionHead p,
.costGrid > div > p,
.storeGrid > div > p{
    margin: 16px 0px 0px 0px;
    color: #66717d;
    font-size: 15px;
    line-height: 1.9;
}

.sectionLabel{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 6px 16px 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
}

.sectionLabel.orange{
    color: #a74f23;
    background-color: #fbe9de;
}

.sectionLabel.green{
    color: #287350;
    background-color: #e2f3e9;
}

.sectionLabel.navy{
    color: #ffffff;
    background-color: #263d53;
}

.redBadge{
    display: inline-flex;
    margin: 10px 0px 0px 8px;
    padding: 5px 12px 5px 12px;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    color: #ffffff;
    background-color: #d85044;
    font-size: 11px;
    font-weight: bold;
}

.btn{
    display: inline-flex;
    padding: 12px 24px 12px 24px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: opacity .2s ease, transform .2s ease;
}

.btn:hover{
    opacity: .88;
}

.btn.primary{
    color: #ffffff;
    background-color: #273e55;
}

.btn.navy{
    color: #ffffff;
    background-color: #273e55;
}

.btn.green{
    color: #ffffff;
    background-color: #43a772;
}

.btn.white{
    color: #273e55;
    background-color: #ffffff;
}

.btn.full{
    width: 100%;
}

/* header */
.siteHeader{
    position: fixed;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    color: #ffffff;
    background-color: rgba(21,40,58,0.12);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.siteHeader.scrolled,
.siteHeader.menuOpened{
    color: #2f3945;
    background-color: rgba(255,255,255,.97);
    box-shadow: 0px 5px 20px rgba(30,45,60,.08);
}

.headerBox{
    margin: 0px auto;
    padding: 10px 22px 10px 22px;
    max-width: 1280px;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.headerLogo{
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
}

.headerLogo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.headerNav{
    margin: 0px auto 0px 0px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.headerNav > a,
.navGroupBtn{
    padding: 9px 11px 9px 11px;
    border: none;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.navGroup{
    position: relative;
}

.navDropdown{
    position: absolute;
    top: 42px;
    left: 0px;
    min-width: 190px;
    padding: 8px 8px 8px 8px;
    display: none;
    border: solid 1px #e7e4dc;
    border-radius: 12px;
    color: #344151;
    background-color: #ffffff;
    box-shadow: 0px 12px 35px rgba(22,38,54,.12);
}

.navGroup.open .navDropdown{
    display: block;
}

.navDropdown a{
    display: block;
    padding: 9px 10px 9px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.navDropdown a:hover{
    background-color: #f4f3ef;
}

.headerAction{
    display: flex;
    align-items: center;
    gap: 8px;
}

.lineBtn{
    display: inline-flex;
    padding: 9px 14px 9px 14px;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #ffffff!important;
    background-color: #43a772;
    font-size: 12px;
    font-weight: bold;
}

.cartBtn,
.menuBtn{
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    color: inherit;
    background-color: rgba(255,255,255,.15);
    cursor: pointer;
    font-size: 21px;
}

.siteHeader.scrolled .cartBtn,
.siteHeader.scrolled .menuBtn,
.siteHeader.menuOpened .cartBtn,
.siteHeader.menuOpened .menuBtn{
    background-color: #f2f1ed;
}

.cartCount{
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0px 5px 0px 5px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    background-color: #ec5700;
    font-size: 10px;
    font-weight: bold;
}

.menuBtn{
    display: none;
}

.spMenu{
    display: none;
}

/* hero */
.heroBox{
    position: relative;
    min-height: 760px;
    overflow: hidden;
    color: #ffffff;
    background-color: #1d3143;
}

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

.heroShade{
    position: absolute;
    inset: 0px;
    background: linear-gradient(90deg, rgba(11,28,42,.70) 0%, rgba(11,28,42,.28) 52%, rgba(11,28,42,.16) 100%);
}

.heroInner{
    position: relative;
    z-index: 2;
    margin: 0px auto;
    padding: 170px 24px 170px 24px;
    max-width: 1120px;
}

.heroInner h1{
    max-width: 760px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.5;
    text-shadow: 0px 2px 18px rgba(0,0,0,.18);
}

.heroCta,
.fullCta{
    display: inline-flex;
    margin: 36px 0px 0px 0px;
    padding: 17px 27px 17px 27px;
    flex-direction: column;
    align-items: center;
    border-radius: 999px;
    color: #ffffff;
    background-color: #dd6a32;
    box-shadow: 0px 10px 30px rgba(85,38,15,.2);
}

.heroCta strong,
.fullCta strong{
    font-size: 16px;
}

.heroCta span,
.fullCta span{
    margin: 3px 0px 0px 0px;
    font-size: 11px;
    font-weight: bold;
}

.heroBottom{
    position: absolute;
    z-index: 3;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 0px 24px 24px 24px;
}

.trustGrid,
.tocBox{
    margin: 0px auto;
    max-width: 1120px;
}

.trustGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: solid 1px rgba(255,255,255,.28);
    border-radius: 16px 16px 0px 0px;
    background-color: rgba(22,43,59,.70);
    backdrop-filter: blur(10px);
}

.trustGrid div{
    padding: 11px 15px 11px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: bold;
}

.trustGrid div + div{
    border-left: solid 1px rgba(255,255,255,.18);
}

.tocBox{
    padding: 12px 16px 12px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 0px 0px 16px 16px;
    color: #354251;
    background-color: rgba(255,255,255,.94);
}

.tocBox > p{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: bold;
}

.tocBox > div{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 15px;
}

.tocBox a{
    font-size: 10px;
    font-weight: bold;
}

/* trial */
.soldBadge{
    margin: 14px auto 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.soldBadge span,
.soldBadge strong{
    padding: 4px 9px 4px 9px;
    border-radius: 999px;
    font-size: 10px;
}

.soldBadge span{
    color: #7a7a7a;
    background-color: #eeeeeb;
}

.soldBadge strong{
    color: #ffffff;
    background-color: #d85145;
}

.trialGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.trialCard{
    overflow: hidden;
    border: solid 1px #e6e3dc;
    border-radius: 22px;
    background-color: #ffffff;
}

.trialCardHead{
    padding: 12px 16px 12px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    background-color: #263d53;
}

.trialCardHead span{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #263d53;
    background-color: #ffffff;
    font-family: "Shippori Mincho", serif;
    font-size: 11px;
    font-weight: 800;
}

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

.trialPic{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f5f3ed;
}

.trialPic > img:first-child{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trialPic .recipePic{
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 31%;
    aspect-ratio: 1;
    object-fit: cover;
    border: solid 3px #ffffff;
    border-radius: 50%;
    box-shadow: 0px 3px 12px rgba(0,0,0,.15);
}

.trialCardBody{
    padding: 16px 16px 18px 16px;
}

.trialTagline{
    margin: 0px 0px 10px 0px;
    color: #3c4957;
    font-size: 12px;
    font-weight: bold;
}

.ingredientGroup{
    margin: 7px 0px 0px 0px;
    padding: 8px 9px 8px 9px;
    border-radius: 9px;
}

.ingredientGroup.meat{
    background-color: #fff0e8;
}

.ingredientGroup.veg{
    background-color: #eaf5ec;
}

.ingredientGroup.carb{
    background-color: #f6f0dd;
}

.ingredientGroup strong{
    display: block;
    font-size: 10px;
}

.ingredientGroup ul{
    margin: 3px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 7px;
}

.ingredientGroup li{
    font-size: 9px;
}

.deliveryBox{
    padding: 26px 0px 30px 0px;
    background-color: #263d53;
}

.deliveryGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    border-radius: 14px;
    background-color: rgba(255,255,255,.12);
}

.deliveryGrid div{
    padding: 13px 8px 13px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #ffffff;
    background-color: rgba(255,255,255,.04);
    font-size: 11px;
    font-weight: bold;
}

.deliveryBox .fullCta{
    margin: 18px auto 0px;
    display: flex;
    max-width: 620px;
}

/* about */
.aboutMainPic{
    margin: 0px auto 40px;
    max-width: 900px;
    overflow: hidden;
    border-radius: 26px;
}

.aboutMainPic img{
    width: 100%;
}

.aboutBlock{
    margin: 0px auto 70px;
    max-width: 920px;
}

.aboutBlock:last-child{
    margin-bottom: 0px;
}

.aboutIndex{
    margin: 0px 0px 14px 0px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aboutIndex span{
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #ec5700;
    font-family: "Shippori Mincho", serif;
    font-size: 12px;
    font-weight: 800;
}

.aboutIndex small{
    color: #697481;
    font-size: 12px;
    font-weight: bold;
}

.aboutBlock h3{
    margin: 10px 0px 0px 0px;
    color: #263d53;
    font-size: 28px;
    line-height: 1.6;
}

.aboutBlock > p{
    margin: 15px 0px 0px 0px;
    color: #65717d;
    font-size: 14px;
}

.fadeGallery{
    margin: 26px auto 0px;
    max-width: 760px;
}

.fadeGalleryStage{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
    background-color: #e9e6df;
}

.fadeGalleryStage > img{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s ease;
}

.fadeGalleryStage > img.active{
    opacity: 1;
}

.galleryCount{
    position: absolute;
    z-index: 3;
    right: 13px;
    top: 13px;
    padding: 4px 9px 4px 9px;
    border-radius: 20px;
    color: #ffffff;
    background-color: rgba(20,30,40,.58);
    font-size: 10px;
}

.galleryPrev,
.galleryNext,
.scrollPrev,
.scrollNext{
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    color: #283b4e;
    background-color: rgba(255,255,255,.90);
    cursor: pointer;
    box-shadow: 0px 5px 15px rgba(0,0,0,.12);
}

.galleryPrev,
.scrollPrev{
    left: 12px;
}

.galleryNext,
.scrollNext{
    right: 12px;
}

.galleryCaption{
    margin: 10px 0px 0px 0px;
    text-align: center;
    color: #697580;
    font-size: 12px;
}

.galleryDots{
    margin: 10px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.galleryDots button{
    width: 7px;
    height: 7px;
    padding: 0px;
    border: none;
    border-radius: 50%;
    background-color: #c5c3bd;
    cursor: pointer;
}

.galleryDots button.active{
    width: 18px;
    border-radius: 6px;
    background-color: #dd6a32;
}

.oneImage,
.wideImage,
.wideVideo{
    margin: 25px auto 0px;
    overflow: hidden;
    border-radius: 22px;
}

.oneImage{
    max-width: 700px;
}

.wideImage,
.wideVideo{
    max-width: 920px;
}

.wideImage img,
.wideVideo video{
    width: 100%;
}

.featurePills{
    margin: 15px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.featurePills span{
    padding: 7px 11px 7px 11px;
    border-radius: 999px;
    color: #40505e;
    background-color: #f0eee7;
    font-size: 11px;
    font-weight: bold;
}

.blendGrid{
    margin: 22px 0px 0px 0px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.blendCard{
    overflow: hidden;
    border: solid 1px #e4e1d9;
    border-radius: 16px;
    background-color: #ffffff;
}

.blendCard img{
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.blendCard h4{
    padding: 10px 11px 0px 11px;
    color: #263d53;
    font-size: 13px;
}

.blendCard p{
    padding: 5px 11px 12px 11px;
    color: #697580;
    font-size: 10px;
}

.seasonNote{
    margin: 12px 0px 0px 0px!important;
    padding: 11px 14px 11px 14px;
    border-radius: 12px;
    background-color: #eef5eb;
    text-align: center;
}

/* scroll gallery */
.scrollGallery{
    position: relative;
    margin: 0px auto;
    max-width: 1000px;
    overflow: hidden;
}

.scrollTrack{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.scrollTrack::-webkit-scrollbar{
    display: none;
}

.scrollCard{
    flex: 0 0 calc(50% - 7px);
    overflow: hidden;
    scroll-snap-align: start;
    border: solid 1px #e4e1d9;
    border-radius: 18px;
    background-color: #ffffff;
}

.scrollCard .pic{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.scrollCard .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scrollCard .pic span{
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 4px 8px 4px 8px;
    border-radius: 20px;
    color: #ffffff;
    background-color: rgba(20,30,40,.58);
    font-size: 9px;
}

.scrollCard .txt{
    padding: 14px 15px 16px 15px;
}

.scrollCard .txt strong{
    color: #2e4050;
    font-size: 13px;
}

.scrollCard .txt p{
    margin: 5px 0px 0px 0px;
    color: #6a7580;
    font-size: 11px;
}

/* store */
.storeGrid{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 45px;
}

.storeMovie{
    overflow: hidden;
    border-radius: 26px;
    aspect-ratio: 4 / 5;
    background-color: #e8e6df;
}

.storeMovie video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consultBand{
    margin: 42px 0px 0px 0px;
    padding: 28px 30px 28px 30px;
    border-radius: 22px;
    color: #ffffff;
    background-color: #273e55;
    text-align: center;
}

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

.consultBand p{
    margin: 8px 0px 17px 0px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

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

.instaHead > div{
    display: flex;
    align-items: center;
    gap: 12px;
}

.instaHead > div > i{
    font-size: 34px;
    color: #263d53;
}

.instaHead strong{
    font-size: 14px;
}

.instaHead p{
    color: #707983;
    font-size: 11px;
}

.instaCard{
    position: relative;
    flex: 0 0 calc(33.333% - 10px);
    aspect-ratio: 1;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 16px;
}

.instaCard img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instaCard i{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: rgba(20,30,40,.58);
}

/* cost */
.costGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.costCalc{
    padding: 28px 30px 28px 30px;
    border: solid 1px #dedbd2;
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0px 15px 45px rgba(29,47,62,.08);
}

.calcLabel{
    display: table;
    margin: 0px auto 8px;
    padding: 6px 12px 6px 12px;
    border-radius: 999px;
    color: #a64d23;
    background-color: #fbe9de;
    font-size: 11px;
    font-weight: bold;
}

.costCalc label{
    display: block;
    margin: 17px 0px 6px 0px;
    font-size: 11px;
    font-weight: bold;
}

.weightControl{
    display: grid;
    grid-template-columns: 45px 1fr 45px;
    gap: 7px;
}

.weightControl button,
.weightControl input{
    height: 46px;
    border: solid 1px #dedbd2;
    border-radius: 12px;
    background-color: #ffffff;
}

.weightControl button{
    cursor: pointer;
    color: #3d4a57;
    font-size: 18px;
}

.weightControl input{
    width: 100%;
    text-align: center;
    color: #263d53;
    font-size: 18px;
    font-weight: bold;
}

.errorTxt{
    margin: 5px 0px 0px 0px;
    min-height: 15px;
    color: #c84e42;
    font-size: 10px;
}

.costResultGrid{
    margin: 15px 0px 0px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.costResultGrid > div{
    padding: 11px 9px 11px 9px;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 3px 8px;
    border-radius: 13px;
    background-color: #f6f4ed;
}

.costResultGrid img{
    grid-row: span 3;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 9px;
}

.costResultGrid strong{
    font-size: 10px;
}

.costResultGrid b{
    color: #dc692f;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
}

.costResultGrid small{
    color: #777f86;
    font-size: 9px;
}

.monthlyGrid{
    margin: 9px 0px 0px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.monthlyGrid div{
    padding: 8px 10px 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: solid 1px #e3e0d8;
    border-radius: 10px;
    font-size: 9px;
}

.monthlyGrid b{
    color: #dc692f;
    font-size: 12px;
}

.planNote{
    margin: 8px 0px 12px 0px;
    padding: 9px 11px 9px 11px;
    border-radius: 10px;
    color: #53705d;
    background-color: #edf5ed;
    font-size: 9px;
}

/* voices */
.voiceWindow{
    height: 430px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}

.voiceTrack{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    animation: voiceScroll 55s linear infinite;
}

.voiceWindow:hover .voiceTrack{
    animation-play-state: paused;
}

@keyframes voiceScroll{
    from{ transform: translateY(0px); }
    to{ transform: translateY(-50%); }
}

.voiceCard{
    padding: 15px 15px 15px 15px;
    border: solid 1px #e5e2da;
    border-radius: 14px;
    background-color: #ffffff;
}

.mediaBadge{
    display: inline-flex;
    padding: 3px 7px 3px 7px;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
}

.mediaBadge.instagram{
    color: #a14466;
    background-color: #f7e6ed;
}

.mediaBadge.line{
    color: #287348;
    background-color: #e4f3e9;
}

.voiceCard p{
    margin: 8px 0px 0px 0px;
    color: #5e6873;
    font-size: 11px;
    line-height: 1.75;
}

/* lineup */
.lineupTitle{
    margin: 0px 0px 14px 0px;
    color: #2e4050;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: bold;
}

.lineupTitle i{
    color: #dd6a32;
}

.lineupGrid,
.methodGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.lineupCard{
    overflow: hidden;
    border: solid 1px #e5e2da;
    border-radius: 23px;
    background-color: #ffffff;
}

.lineupCard > img{
    width: 100%;
    height: 235px;
    object-fit: cover;
}

.lineupBody{
    padding: 24px 24px 24px 24px;
}

.greenPill,
.orangePill{
    display: inline-flex;
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
}

.greenPill{
    color: #2b7451;
    background-color: #e4f3e9;
}

.orangePill{
    color: #ffffff;
    background-color: #c5532b;
}

.lineupName{
    margin: 13px 0px 0px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lineupName h3{
    color: #263d53;
    font-size: 19px;
}

.lineupBody > p{
    margin: 8px 0px 0px 0px;
    color: #66727d;
    font-size: 12px;
}

.lineupList{
    margin: 18px 0px 18px 0px;
    padding: 16px 0px 0px 0px;
    border-top: solid 1px #e9e6df;
}

.lineupList strong{
    display: block;
    margin: 8px 0px 6px 0px;
    font-size: 11px;
}

.lineupList > div{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lineupList span{
    padding: 5px 9px 5px 9px;
    border: solid 1px #e2dfd8;
    border-radius: 20px;
    font-size: 9px;
    font-weight: bold;
}

.methodCard{
    position: relative;
    padding: 25px 25px 25px 25px;
    border: solid 1px #e5e2da;
    border-radius: 23px;
    background-color: #ffffff;
}

.methodCard.featured{
    border: solid 2px #d96a5e;
    background-color: #fff6f4;
}

.recommendBadge{
    position: absolute;
    right: 20px;
    top: 18px;
    padding: 4px 10px 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    background-color: #d85145;
    font-size: 9px;
    font-weight: bold;
}

.methodCard h3{
    font-size: 19px;
    color: #263d53;
}

.methodCard p{
    margin: 8px 0px 0px 0px;
    color: #66727d;
    font-size: 12px;
}

.methodCard ul{
    margin: 16px 0px 0px 0px;
    padding: 14px 0px 0px 0px;
    border-top: solid 1px #e6e1d9;
}

.methodCard li{
    position: relative;
    padding: 4px 0px 4px 20px;
    font-size: 11px;
    font-weight: bold;
}

.methodCard li:before{
    position: absolute;
    left: 0px;
    content: "✓";
    color: #dc692f;
}

.fridayCta{
    position: relative;
    overflow: hidden;
    margin: 38px 0px 0px 0px;
    padding: 25px 28px 25px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 23px;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0px 16px 34px rgba(6,199,85,.22);
    background: linear-gradient(135deg, #2d8059 0%, #11bb5b 58%, #0f9c4d 100%);
}

.fridayCta:before,
.fridayCta:after{
    position: absolute;
    content: "";
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    pointer-events: none;
}

.fridayCta:before{
    top: -44px;
    right: -38px;
    width: 140px;
    height: 140px;
}

.fridayCta:after{
    left: -18px;
    bottom: -34px;
    width: 96px;
    height: 96px;
}

.fridayCta > div,
.fridayCta > a{
    position: relative;
    z-index: 1;
}

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

.fridayCta p{
    margin: 5px 0px 0px 0px;
    color: rgba(255,255,255,.92);
    font-size: 11px;
}

.fridayCta .btn.white{
    color: #2d8059;
    background: #ffffff;
    box-shadow: 0px 10px 24px rgba(0,0,0,.12);
}

.fridayCta .btn.white:hover{
    background: #f4fff8;
}

/* catalog */
.catalogGroup{
    margin: 55px 0px 0px 0px;
}

.catalogGroup > h3{
    margin: 0px 0px 15px 0px;
    color: #263d53;
    font-size: 22px;
}

.catalogGrid{
    display: grid;
    gap: 16px;
}

.catalogGrid.single{
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

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

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

.steamGroup{
    margin: 28px 0px 0px 0px;
}

.steamGroup h4{
    margin: 0px 0px 12px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3d4b58;
    font-size: 15px;
}

.steamGroup h4 span{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e9eee8;
}

.productCard{
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: solid 1px #e4e1d9;
    border-radius: 22px;
    background-color: #ffffff;
}

.productPic{
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #f0eee7;
}

.productPic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.productBadge{
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px 4px 10px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
}

.productBadge.accent{
    background-color: #dd6a32;
}

.productBadge.secondary{
    background-color: #43a772;
}

.productBadge.primary{
    background-color: #273e55;
}

.recipeBadge{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #263d53;
    background-color: rgba(255,255,255,.92);
    font-family: "Shippori Mincho", serif;
    font-size: 11px;
    font-weight: 800;
}

.productBody{
    padding: 17px 17px 18px 17px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.productTitleBox{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.productTitleBox h4{
    color: #263d53;
    font-size: 15px;
    line-height: 1.5;
}

.contentLabel{
    padding: 4px 7px 4px 7px;
    flex: 0 0 auto;
    border-radius: 5px;
    color: #59636c;
    background-color: #f2f0ea;
    font-size: 9px;
    font-weight: bold;
}

.contentLabel i{
    margin-right: 3px;
}

.saveBand{
    margin: 12px 0px 0px 0px;
    padding: 8px 10px 8px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    color: #ffffff;
    background-color: #d85145;
    font-size: 11px;
    font-weight: bold;
}

.productNote{
    margin: 8px 0px 0px 0px;
    color: #6a747e;
    font-size: 10px;
    line-height: 1.6;
}

.ingredientBox{
    margin: 12px 0px 0px 0px;
}

.ingredientTit{
    margin: 0px 0px 5px 0px;
    color: #4f5b67;
    font-size: 10px;
    font-weight: bold;
}

.ingredientBox ul{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ingredientBox li{
    padding: 3px 6px 3px 6px;
    border-radius: 5px;
    color: #56616c;
    background-color: #f3f1eb;
    font-size: 9px;
    font-weight: 500;
}

.ingredientSet{
    margin: 6px 0px 0px 0px;
}

.ingredientSet strong{
    display: block;
    margin: 0px 0px 4px 0px;
    color: #2d8059;
    font-size: 9px;
}

.optionBox{
    margin: 12px 0px 0px 0px;
}

.optionBox > p{
    margin: 0px 0px 5px 0px;
    color: #66717a;
    font-size: 10px;
    font-weight: bold;
}

.optionBtns{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.capacityBtns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.capacityBtn{
    position: relative;
    min-height: 78px;
    padding: 11px 12px 11px 12px;
    text-align: left;
    border: solid 1px #dedbd3;
    border-radius: 11px;
    color: #2f3d4a;
    background-color: #ffffff;
    cursor: pointer;
}

.capacityBtn span{
    display: block;
    font-size: 9px;
    font-weight: bold;
}

.capacityBtn b{
    display: block;
    margin: 2px 0px 0px 0px;
    color: #365c7d;
    font-family: "Shippori Mincho", serif;
    font-size: 13px;
}

.capacityBtn small{
    display: inline-block;
    margin: 4px 0px 0px 0px;
    padding: 2px 7px 2px 7px;
    border-radius: 4px;
    color: #ffffff;
    background-color: #ec5700;
    font-size: 10px;
    font-weight: bold;
}

.capacityBtn.active{
    border-color: #e29a75;
    background-color: #fff5ee;
}

.capacityBtn.active b{
    color: #ec5700;
}

.capacityBtn.active span{
    color: #54372b;
}

.kindBtns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.kindBtn{
    min-height: 78px;
    padding: 11px 12px 11px 12px;
    text-align: left;
    border: solid 1px #dedbd3;
    border-radius: 11px;
    background-color: #ffffff;
    cursor: pointer;
}

.kindBtn span{
    font-size: 9px;
    font-weight: bold;
}

.kindBtn small{
    display: inline-block;
    margin-left: 3px;
    padding: 1px 4px 1px 4px;
    border-radius: 4px;
    color: #ffffff;
    background-color: #dd6a32;
    font-size: 7px;
    font-weight: bold;
}

.kindBtn b{
    display: block;
    margin: 2px 0px 0px 0px;
    color: #ec5700;
    font-family: "Shippori Mincho", serif;
    font-size: 13px;
}

.kindBtn.first.active{
    border-color: #e29a75;
    background-color: #fff5ee;
}

.kindBtn.normal.active{
    border-color: #8da4b8;
    background-color: #f0f5f8;
}

.kindBtn.normal b{
    color: #365c7d;
}

.priceBox{
    margin: 13px 0px 0px 0px;
    padding: 10px 11px 10px 11px;
    border-radius: 13px;
    background-color: #f4f2ec;
}

.originalPrice{
    color: #93979b;
    font-size: 9px;
}

.originalPrice span{
    text-decoration: line-through;
}

.priceMain{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.priceBadge{
    padding: 2px 6px 2px 6px;
    border-radius: 4px;
    color: #ffffff;
    background-color: #ec5700;
    font-size: 8px;
    font-weight: bold;
}

.priceMain strong{
    color: #ec5700;
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
    line-height: 1.3;
}

.priceMain small{
    padding: 0px 0px 3px 0px;
    color: #7a8188;
    font-size: 8px;
}

.normalSave,
.freeShip,
.subNote{
    margin: 3px 0px 0px 0px;
    font-size: 9px;
}

.normalSave{
    color: #365c7d;
    font-weight: bold;
}

.freeShip{
    color: #2d8059;
    font-weight: bold;
}

.subNote{
    color: #788087;
}

.productAction{
    margin: auto 0px 0px 0px;
    padding: 14px 0px 0px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qtyControl{
    display: grid;
    grid-template-columns: 34px 30px 34px;
    align-items: center;
    overflow: hidden;
    border: solid 1px #dedbd3;
    border-radius: 20px;
}

.qtyControl button{
    height: 34px;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
}

.qtyControl span{
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.sampleNote{
    flex: 1;
}

.sampleNote p{
    color: #9d542f;
    font-size: 9px;
    font-weight: bold;
}

.sampleNote p + p{
    margin-top: 2px;
    color: #788087;
    font-weight: normal;
}

.addCartBtn{
    min-height: 37px;
    padding: 8px 13px 8px 13px;
    flex: 1;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    background-color: #273e55;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

.addCartBtn.js-add-cart{
    background-color: #ec5700;
}

.addCartBtn.added{
    background-color: #43a772;
}

.catalogNote{
    margin: 45px auto 0px;
    padding: 22px 24px 22px 24px;
    max-width: 850px;
    border: solid 1px #e1ded5;
    border-radius: 18px;
    background-color: #ffffff;
}

.catalogNote strong{
    color: #263d53;
    font-size: 14px;
}

.catalogNote ul{
    margin: 9px 0px 0px 0px;
}

.catalogNote li{
    position: relative;
    padding: 3px 0px 3px 16px;
    color: #67717b;
    font-size: 11px;
}

.catalogNote li:before{
    position: absolute;
    left: 0px;
    content: "・";
}

/* cart */
.cartOverlay{
    position: fixed;
    z-index: 1190;
    inset: 0px;
    display: none;
    background-color: rgba(0,0,0,.42);
}

.cartOverlay.show{
    display: block;
}

.cartDrawer{
    position: fixed;
    z-index: 1200;
    top: 0px;
    right: -470px;
    width: 100%;
    max-width: 440px;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: -10px 0px 35px rgba(0,0,0,.12);
    transition: right .3s ease;
}

.cartDrawer.open{
    right: 0px;
}

.cartHead{
    padding: 15px 18px 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #e6e3dc;
}

.cartHead p{
    color: #263d53;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 800;
}

.cartHead p span{
    color: #75808a;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
}


.cartHead button{
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: #f2f0ea;
    cursor: pointer;
    font-size: 19px;
}

.cartBody{
    padding: 15px 18px 15px 18px;
    flex: 1;
    overflow-y: auto;
}

.cartEmpty{
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #778089;
}

.cartEmpty > i{
    color: #cbc8c0;
    font-size: 38px;
}

.cartEmpty strong{
    margin: 8px 0px 0px 0px;
    font-size: 12px;
}

.cartEmpty p{
    margin: 4px 0px 0px 0px;
    font-size: 10px;
}

.cartList li{
    margin: 0px 0px 10px 0px;
    padding: 10px 10px 10px 10px;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 10px;
    border: solid 1px #e4e1d9;
    border-radius: 14px;
}

.cartItemPic{
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #f0eee8;
}

.cartItemPic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cartItemTop{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
}

.cartItemTop strong{
    color: #344250;
    font-size: 11px;
}

.cartItemTop small{
    display: block;
    margin: 1px 0px 0px 0px;
    color: #858b90;
    font-size: 8px;
}

.cartSubBadge{
    display: inline-block;
    margin: 3px 0px 0px 0px;
    padding: 2px 5px 2px 5px;
    border-radius: 4px;
    color: #a34d28;
    background-color: #fbe9de;
    font-size: 8px;
    font-weight: bold;
}

.cartRemove{
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    color: #848a90;
    background-color: transparent;
    cursor: pointer;
}

.cartItemBottom{
    margin: 7px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cartQty{
    display: grid;
    grid-template-columns: 27px 25px 27px;
    overflow: hidden;
    border: solid 1px #dedbd3;
    border-radius: 20px;
}

.cartQty button{
    height: 27px;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
}

.cartQty span{
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    line-height: 27px;
}

.cartItemPrice{
    color: #dd6a32;
    font-size: 11px;
    font-weight: bold;
}

.cartFoot{
    padding: 14px 18px 15px 18px;
    border-top: solid 1px #e6e3dc;
    background-color: #ffffff;
}

.cartSummary p{
    padding: 2px 0px 2px 0px;
    display: flex;
    justify-content: space-between;
    color: #69737d;
    font-size: 10px;
}

.cartSummary p b{
    color: #344250;
}

.cartSummary p.total{
    margin: 5px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    border-top: solid 1px #e5e2da;
    color: #2e3d4b;
    font-size: 12px;
    font-weight: bold;
}

.cartSummary p.total b{
    color: #ec5700;
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
}

.shippingBox{
    margin: 10px 0px 0px 0px;
    padding: 9px 10px 9px 10px;
    border: solid 1px #dfe4dd;
    border-radius: 10px;
    background-color: #f2f8f2;
}

.shippingBox p{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #47574d;
    font-size: 9px;
    font-weight: bold;
}

.shippingBox small{
    margin-left: auto;
    color: #7b8580;
    font-size: 8px;
}

.shippingBar,
.stickyShip > div,
.remainingBar{
    overflow: hidden;
    border-radius: 10px;
    background-color: #dfddd7;
}

.shippingBar{
    margin: 7px 0px 0px 0px;
    height: 6px;
}

.shippingBar span,
.stickyShip > div span,
.remainingBar span{
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: #43a772;
    transition: width .4s ease;
}

.checkoutBtn{
    margin: 12px 0px 0px 0px;
    width: 100%;
    min-height: 45px;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    background-color: #ec5700;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.checkoutBtn:disabled{
    opacity: .45;
    cursor: default;
}

.checkoutNote{
    margin: 5px 0px 0px 0px;
    text-align: center;
    color: #858b91;
    font-size: 8px;
}

/* feeding calculator */
.feedingCalculator{
    margin: 16px 0px 0px 0px;
    padding: 13px 13px 13px 13px;
    border: solid 1px #b9e2c2;
    border-radius: 15px;
    background-color: #f4fbf5;
}

.feedingHead{
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    color: #344250;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 11px;
}

.feedingHead i:first-child{
    color: #2d8059;
    font-size: 16px;
}

.feedingHead strong{
    flex: 1;
}

.feedingHeadArrow{
    color: #2d8059;
    font-size: 17px;
}

.feedingHead:hover strong{
    text-decoration: underline;
}

.feedingCalculator > p{
    margin: 4px 0px 0px 0px;
    color: #66756d;
    font-size: 9px;
}

.feedingWeight{
    margin: 10px 0px 0px 0px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    gap: 6px;
}

.feedingWeight button,
.feedingWeight > div{
    height: 40px;
    border: solid 1px #dedbd3;
    border-radius: 10px;
    background-color: #ffffff;
}

.feedingWeight button{
    cursor: pointer;
}

.feedingWeight > div{
    position: relative;
}

.feedingWeight input{
    width: 100%;
    height: 100%;
    padding-right: 32px;
    border: none;
    outline: none;
    text-align: center;
    color: #263d53;
    background: transparent;
    font-size: 15px;
    font-weight: bold;
}

.feedingWeight > div span{
    position: absolute;
    top: 9px;
    right: 10px;
    color: #7c858c;
    font-size: 10px;
    font-weight: bold;
}

.feedingMode{
    margin: 9px 0px 0px 0px;
    padding: 3px 3px 3px 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    border: solid 1px #cfe4d4;
    border-radius: 999px;
    background-color: #ebf6ee;
}

.feedingMode button{
    padding: 4px 6px 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 999px;
    color: #4d6553;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
}

.feedingMode button.active{
    color: #ffffff;
    background-color: #2d8059;
}

.feedingMode img{
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 7px;
}

.feedingDaily{
    margin: 9px 0px 0px 0px;
    padding: 8px 10px 8px 10px;
    border-radius: 9px;
    background-color: #ffffff;
    color: #4f5b65;
    font-size: 9px;
    font-weight: bold;
}

.feedingDaily strong{
    margin-left: 4px;
    color: #2d8059;
    font-size: 11px;
}

.feedingDaily span{
    margin-left: 3px;
    color: #848b91;
    font-size: 8px;
}

.feedingTable{
    margin: 8px 0px 0px 0px;
    overflow: hidden;
    border: solid 1px #e4e1d9;
    border-radius: 9px;
    background-color: #ffffff;
}

.feedingTable table{
    width: 100%;
    border-collapse: collapse;
    font-size: 8px;
}

.feedingTable th,
.feedingTable td{
    padding: 7px 7px 7px 7px;
    border-top: solid 1px #eeeae2;
}

.feedingTable th{
    border-top: none;
    background-color: #edf6ef;
    text-align: left;
}

.feedingTable th:nth-child(2),
.feedingTable th:nth-child(3),
.feedingTable td:nth-child(2),
.feedingTable td:nth-child(3){
    text-align: center;
}

.feedingTable td:last-child{
    color: #2d8059;
    font-weight: bold;
}

.feedingTotal{
    margin: 8px 0px 0px 0px;
    padding: 8px 10px 8px 10px;
    text-align: center;
    border-radius: 9px;
    color: #ffffff;
    background-color: #2d8059;
}

.feedingTotal small,
.feedingTotal strong{
    display: block;
}

.feedingTotal small{
    font-size: 8px;
}

.feedingTotal strong{
    font-family: "Shippori Mincho", serif;
    font-size: 17px;
}

.subscribeBox{
    margin: 8px 0px 0px 0px;
    padding: 9px 10px 9px 10px;
    border: solid 1px #e6e1d8;
    border-radius: 9px;
    background-color: #ffffff;
}

.subscribeBox > strong{
    font-size: 9px;
}

.subscribeBox > div{
    margin: 5px 0px 0px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.subscribeBox > div span{
    padding: 3px 6px 3px 6px;
    border-radius: 20px;
    color: #a5512d;
    background-color: #fbe8dc;
    font-size: 7px;
    font-weight: bold;
}

.subscribeBox p{
    margin: 6px 0px 0px 0px;
    color: #5b6670;
    font-size: 8px;
}

.subscribeBox button{
    margin: 7px 0px 0px 0px;
    width: 100%;
    padding: 7px 8px 7px 8px;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    background-color: #dd6a32;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
}

/* exit modal */
.exitModal{
    position: fixed;
    z-index: 1300;
    inset: 0px;
    padding: 18px 18px 18px 18px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(20,37,52,.65);
}

.exitModal.show{
    display: flex;
}

.exitModalBox{
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: 94vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 24px;
    background-color: #ffffff;
}

.exitClose{
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    color: #606a73;
    background-color: rgba(255,255,255,.92);
    cursor: pointer;
    font-size: 20px;
}

.exitPic{
    height: 175px;
    overflow: hidden;
}

.exitPic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exitBody{
    padding: 18px 28px 25px 28px;
    text-align: center;
}

.exitBody h3{
    margin: 13px 0px 0px 0px;
    color: #263d53;
    font-size: 20px;
}

.exitBody > p{
    margin: 9px 0px 0px 0px;
    color: #69747e;
    font-size: 11px;
}

.exitOffer{
    margin: 15px 0px 0px 0px;
    padding: 10px 13px 10px 13px;
    display: grid;
    grid-template-columns: 1fr 1px 1.5fr;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    background-color: #fff5ee;
}

.exitOffer > span{
    width: 1px;
    height: 38px;
    background-color: #efc4af;
}

.exitOffer small,
.exitOffer strong{
    display: block;
}

.exitOffer small{
    color: #6e7479;
    font-size: 8px;
}

.exitOffer strong{
    color: #a8502b;
    font-size: 11px;
}

.exitOffer > div:first-child strong{
    font-family: "Shippori Mincho", serif;
    font-size: 22px;
}

.exitBody .btn{
    margin: 16px 0px 0px 0px;
}

.bookmarkBtn{
    margin: 8px 0px 0px 0px;
    width: 100%;
    padding: 10px 14px 10px 14px;
    border: solid 1px #e3a686;
    border-radius: 999px;
    color: #a7502c;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
}

.bookmarkTip{
    margin: 8px 0px 0px 0px;
    padding: 10px 12px 10px 12px;
    display: none;
    text-align: left;
    border-radius: 11px;
    color: #456454;
    background-color: #eaf4e9;
    font-size: 9px;
}

.bookmarkTip.show{
    display: block;
}

.bookmarkTip p{
    margin: 3px 0px 0px 0px;
}

.instaId{
    margin: 4px 0px 0px 0px!important;
    font-size: 8px!important;
}

.exitSkip{
    margin: 8px 0px 0px 0px;
    border: none;
    color: #858b90;
    background: transparent;
    cursor: pointer;
    font-size: 9px;
}

/* footer */
.siteFooter{
    padding: 55px 0px 45px 0px;
    color: #ffffff;
    background-color: #29435a;
}

.footerGrid{
    display: grid;
    grid-template-columns: 1.5fr .75fr .75fr;
    gap: 50px;
}

.footerInfo > img{
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
}

.footerInfo > p{
    margin: 10px 0px 0px 0px;
    font-size: 12px;
}

.footerInfo dl{
    margin: 15px 0px 0px 0px;
    color: rgba(255,255,255,.66);
    font-size: 9px;
}

.footerInfo dt{
    margin: 8px 0px 0px 0px;
    color: rgba(255,255,255,.92);
    font-weight: bold;
}

.footerLink > strong{
    font-family: "Shippori Mincho", serif;
    font-size: 13px;
}

.footerLink ul{
    margin: 12px 0px 0px 0px;
}

.footerLink li{
    margin: 5px 0px 0px 0px;
    color: rgba(255,255,255,.74);
    font-size: 10px;
}

.footerLink > a{
    display: inline-block;
    margin: 13px 0px 0px 0px;
    font-size: 10px;
    font-weight: bold;
}

.footerBottom{
    margin: 35px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    border-top: solid 1px rgba(255,255,255,.17);
    color: rgba(255,255,255,.58);
    font-size: 9px;
}

/* sticky */
.stickyCta{
    position: fixed;
    z-index: 900;
    bottom: 0px;
    left: 0px;
    width: 100%;
    pointer-events: none;
}

.stickyBox,
.remainingBar{
    margin: 0px auto;
    max-width: 660px;
    pointer-events: auto;
}

.stickyBox{
    margin-bottom: 0px;
    overflow: hidden;
    border: solid 1px #dfdcd4;
    border-radius: 16px 16px 0px 0px;
    background-color: rgba(255,255,255,.97);
    box-shadow: 0px -8px 26px rgba(30,45,60,.12);
}

.stickyLine{
    padding: 7px 12px 7px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #ffffff;
    background-color: #43a772;
    font-size: 9px;
    font-weight: bold;
}

.stickyDefault > a,
.stickyCart > button{
    width: 100%;
    padding: 10px 14px 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    color: #364451;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.stickyDefault span{
    display: flex;
    align-items: center;
    gap: 7px;
}

.stickyDefault b{
    display: block;
    font-size: 10px;
}

.stickyDefault em{
    padding: 2px 6px 2px 6px;
    border-radius: 20px;
    color: #ffffff;
    background-color: #ec5700;
    font-size: 8px;
    font-style: normal;
    font-weight: bold;
}

.stickyDefault strong{
    color: #ec5700;
    font-size: 10px;
}

.stickyCart button > span{
    display: flex;
    flex-direction: column;
}

.stickyCart button small{
    font-size: 9px;
    font-weight: bold;
}

.stickyCart button span > strong{
    color: #ec5700;
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
}

.stickyCart button em{
    padding: 8px 13px 8px 13px;
    border-radius: 999px;
    color: #ffffff;
    background-color: #ec5700;
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
}

.stickyShip{
    padding: 0px 14px 9px 14px;
}

.stickyShip p{
    color: #4e5a64;
    font-size: 8px;
    font-weight: bold;
}

.stickyShip > div{
    margin: 4px 0px 0px 0px;
    height: 5px;
}

.remainingBar{
    height: 5px;
    border-radius: 0px;
}

@media (max-width: 900px){
    .pcNav{
        display: none;
    }

    .headerBox{
        padding-left: 14px;
        padding-right: 14px;
    }

    .headerAction{
        margin-left: auto;
    }

    .menuBtn{
        display: flex;
    }

    .spMenu{
        padding: 13px 18px 18px 18px;
        border-top: solid 1px #e5e2da;
        color: #344250;
        background-color: #ffffff;
    }

    .spMenu.open{
        display: block;
    }

    .spMenuTit{
        margin: 0px 0px 8px 0px;
        color: #7b838b;
        font-size: 10px;
        font-weight: bold;
    }

    .spMenuGroup{
        margin: 9px 0px 0px 0px;
    }

    .spMenuGroup p{
        color: #9a9e9f;
        font-size: 9px;
        font-weight: bold;
    }

    .spMenuGroup a{
        display: block;
        padding: 5px 8px 5px 12px;
        font-size: 11px;
        font-weight: 600;
    }

    .spMenu .btn{
        margin-top: 7px;
        font-size: 10px;
    }

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

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

@media (max-width: 767px){
    body{
        padding-bottom: 126px;
        font-size: 14px;
    }

    .wrap{
        padding: 0px 14px 0px 14px;
    }

    .sectionBox{
        padding: 58px 0px 58px 0px;
    }

    .sectionHead{
        margin-bottom: 28px;
    }

    .sectionHead h2,
    .costGrid h2,
    .storeGrid h2{
        margin-top: 10px;
        font-size: 24px;
        line-height: 1.55;
    }

    .sectionHead p,
    .costGrid > div > p,
    .storeGrid > div > p{
        margin-top: 10px;
        font-size: 12px;
    }

    .redBadge{
        margin-left: 3px;
        font-size: 9px;
    }

    .headerAction{
        gap: 6px;
    }

    .lineBtn span{
        display: inline;
    }

    .lineBtn{
        width: auto;
        min-width: 138px;
        height: 40px;
        padding: 0px 14px 0px 14px;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    .heroBox{
        min-height: 690px;
    }

    .heroShade{
        background: linear-gradient(0deg, rgba(11,28,42,.75) 0%, rgba(11,28,42,.18) 70%, rgba(11,28,42,.12) 100%);
    }

    .heroInner{
        padding: 155px 17px 220px 17px;
    }

    .heroInner h1{
        font-size: 31px;
        line-height: 1.55;
    }

    .heroCta{
        margin-top: 26px;
        width: 100%;
        padding: 14px 15px 14px 15px;
        text-align: center;
    }

    .heroCta strong,
    .fullCta strong{
        font-size: 12px;
    }

    .heroBottom{
        padding: 0px 10px 10px 10px;
    }

    .trustGrid div{
        padding: 8px 4px 8px 4px;
        gap: 3px;
        font-size: 9px;
    }

    .tocBox{
        padding: 9px 9px 9px 9px;
        align-items: flex-start;
    }

    .tocBox > div{
        gap: 3px 10px;
    }

    .tocBox a{
        font-size: 8px;
    }

    .trialGrid{
        gap: 6px;
    }

    .trialCard{
        border-radius: 12px;
    }

    .trialCardHead{
        padding: 7px 5px 7px 5px;
        gap: 4px;
    }

    .trialCardHead span{
        width: 21px;
        height: 21px;
        font-size: 8px;
    }

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

    .trialPic .recipePic{
        right: 5px;
        bottom: 5px;
        border-width: 2px;
    }

    .trialCardBody{
        padding: 8px 6px 9px 6px;
    }

    .trialTagline{
        margin-bottom: 5px;
        min-height: 28px;
        font-size: 7px;
        line-height: 1.45;
    }

    .ingredientGroup{
        margin-top: 4px;
        padding: 5px 4px 5px 4px;
    }

    .ingredientGroup strong{
        font-size: 7px;
    }

    .ingredientGroup li{
        font-size: 6px;
        line-height: 1.35;
    }

    .deliveryGrid div{
        padding: 9px 3px 9px 3px;
        flex-direction: column;
        gap: 2px;
        text-align: center;
        font-size: 8px;
    }

    .deliveryBox .fullCta{
        width: 100%;
        padding: 13px 12px 13px 12px;
    }

    .aboutBlock{
        margin-bottom: 52px;
    }

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

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

    .galleryPrev,
    .galleryNext,
    .scrollPrev,
    .scrollNext{
        width: 34px;
        height: 34px;
    }

    .blendGrid{
        grid-template-columns: repeat(2, 1fr);
    }

    .scrollCard{
        flex-basis: 82%;
    }

    .storeGrid{
        gap: 25px;
    }

    .storeMovie{
        max-height: 520px;
    }

    .consultBand{
        margin-top: 28px;
        padding: 22px 16px 22px 16px;
    }

    .consultBand h3{
        font-size: 16px;
    }

    .instaHead{
        align-items: flex-end;
    }

    .instaHead .btn{
        padding: 9px 12px 9px 12px;
        font-size: 10px;
    }

    .instaCard{
        flex-basis: 74%;
    }

    .costGrid{
        gap: 25px;
    }

    .costCalc{
        padding: 20px 14px 20px 14px;
    }

    .costResultGrid > div{
        grid-template-columns: 34px 1fr;
        padding: 8px 6px 8px 6px;
    }

    .costResultGrid img{
        width: 34px;
        height: 34px;
    }

    .costResultGrid strong{
        font-size: 8px;
    }

    .costResultGrid b{
        font-size: 14px;
    }

    .voiceWindow{
        height: 390px;
    }

    .voiceTrack{
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .voiceCard{
        padding: 10px 9px 10px 9px;
    }

    .voiceCard p{
        font-size: 9px;
    }

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

    .lineupCard > img{
        height: 190px;
    }

    .lineupBody{
        padding: 18px 16px 18px 16px;
    }

    .fridayCta{
        padding: 20px 17px 20px 17px;
        flex-direction: column;
        text-align: center;
    }

    .fridayCta h3{
        font-size: 17px;
    }

    .catalogGroup{
        margin-top: 38px;
    }

    .catalogGroup > h3{
        font-size: 18px;
    }

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

    .productCard{
        border-radius: 13px;
    }

    .productBadge{
        top: 7px;
        left: 7px;
        padding: 3px 6px 3px 6px;
        font-size: 7px;
    }

    .recipeBadge{
        top: 7px;
        right: 7px;
        width: 25px;
        height: 25px;
        font-size: 8px;
    }

    .productBody{
        padding: 9px 7px 10px 7px;
    }

    .productTitleBox{
        display: block;
    }

    .productTitleBox h4{
        min-height: 34px;
        font-size: 11px;
        line-height: 1.45;
    }

    .contentLabel{
        margin: 4px 0px 0px 0px;
        display: inline-flex;
        font-size: 7px;
    }

    .saveBand{
        margin-top: 7px;
        padding: 5px 6px 5px 6px;
        font-size: 8px;
    }

    .productNote{
        font-size: 7px;
    }

    .ingredientBox{
        margin-top: 7px;
    }

    .ingredientTit,
    .optionBox > p{
        font-size: 7px;
    }

    .ingredientBox li{
        padding: 2px 4px 2px 4px;
        font-size: 6px;
    }

    .ingredientSet strong{
        font-size: 7px;
    }

    .capacityBtns{
        gap: 4px;
    }

    .capacityBtn{
        min-height: 72px;
        padding: 9px 8px 9px 8px;
    }

    .capacityBtn span{
        font-size: 12px;
    }

    .capacityBtn b{
        font-size: 16px;
    }

    .capacityBtn small{
        margin-top: 5px;
        padding: 2px 6px;
        font-size: 9px;
    }

    .kindBtns{
        gap: 3px;
    }

    .kindBtn{
        min-height: 72px;
        padding: 9px 8px 9px 8px;
    }

    .kindBtn span{
        font-size: 7px;
    }

    .kindBtn small{
        margin-left: 1px;
        padding: 1px 2px;
        font-size: 5px;
    }

    .kindBtn b{
        font-size: 10px;
    }

    .capacityBox{
        margin-top: auto;
    }

    .priceBox{
        margin-top: 10px;
        padding: 7px 6px 7px 6px;
    }

    .originalPrice,
    .normalSave,
    .freeShip,
    .subNote{
        font-size: 7px;
    }

    .priceBadge{
        padding: 1px 3px;
        font-size: 6px;
    }

    .priceMain strong{
        font-size: 17px;
    }

    .productAction{
        margin: 10px 0px 0px 0px;
        padding-top: 0px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .qtyControl{
        width: 100%;
        grid-template-columns: 1fr 28px 1fr;
    }

    .qtyControl button{
        height: 30px;
    }

    .addCartBtn{
        min-height: 34px;
        padding: 7px 5px;
        font-size: 8px;
    }

    .sampleNote p{
        font-size: 7px;
    }

    .catalogNote{
        margin-top: 28px;
        padding: 16px 14px;
    }

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

    .footerBottom{
        flex-direction: column;
        gap: 7px;
    }

    .stickyBox,
    .remainingBar{
        max-width: none;
    }

    .stickyBox{
        border-radius: 0px;
    }

    .stickyDefault > a,
    .stickyCart > button{
        padding: 8px 10px;
    }

    .stickyDefault span{
        gap: 5px;
    }

    .stickyDefault b{
        font-size: 8px;
    }

    .stickyDefault strong{
        font-size: 8px;
    }

    .exitModal{
        padding: 9px;
    }

    .exitPic{
        height: 145px;
    }

    .exitBody{
        padding: 15px 18px 18px 18px;
    }

    .cartDrawer{
        max-width: 100%;
    }
}

/* cart loading */
.cartLoading{
    position: fixed;
    z-index: 1400;
    inset: 0px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(20,37,52,.62);
}

.cartLoading.show{
    display: flex;
}

.cartLoadingBox{
    margin: 0px auto;
    padding: 26px 22px 24px 22px;
    width: 88%;
    max-width: 360px;
    border-radius: 18px;
    background-color: #ffffff;
    text-align: center;
}

.cartLoadingSpinner{
    margin: 0px auto 14px;
    width: 34px;
    height: 34px;
    display: block;
    border: solid 3px #e5e2da;
    border-top-color: #dd6a32;
    border-radius: 50%;
    animation: cartLoadingSpin .8s linear infinite;
}

.cartLoadingBox strong{
    display: block;
    color: #273e55;
    font-size: 14px;
}

.cartLoadingBox p{
    margin: 5px 0px 0px 0px;
    color: #7a8289;
    font-size: 10px;
}

.sampleExternalBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@keyframes cartLoadingSpin{
    to{
        transform: rotate(360deg);
    }
}

/* 購入CTAカラー統一 */
.heroCta,
.fullCta,
.addCartBtn,
#consult .btn.primary.full,
.spMenu > .btn.primary.full{
    background-color: #ec5700;
}

/* カート追加完了時は完了状態を優先 */
.addCartBtn.added{
    background-color: #43a772;
}

/* 商品一覧から購入エリアへ進むCTA */
.lineupCard .btn.navy.full{
    background-color: #ec5700;
}

/* LINE導線カラー統一 */
.lineBtn,
.btn.green,
.stickyLine,
.fridayCta{
    background-color: #2d8059;
}

.fridayCta .btn.white{
    color: #2d8059;
}


/* カート内の体重入力：LPの費用シミュレーターと配色・操作感を統一 */
.feedingWeight{
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 10px;
}

.feedingWeight button,
.feedingWeight > div{
    height: 54px;
    border-radius: 14px;
}

.feedingWeight button{
    border: solid 1px #2d8059;
    color: #ffffff;
    background-color: #2d8059;
    box-shadow: 0px 4px 10px rgba(45,128,89,.18);
    font-size: 23px;
    font-weight: bold;
}

.feedingWeight button:active{
    transform: translateY(1px);
}

.feedingWeight > div{
    border: solid 2px #b8d4c0;
}

.feedingWeight > div:focus-within{
    border-color: #2d8059;
    box-shadow: 0px 0px 0px 3px rgba(45,128,89,.10);
}

.feedingWeight input{
    color: #263d53;
    font-size: 22px;
}

.feedingWeight > div span{
    top: 17px;
    font-size: 13px;
}