@charset "utf-8";

/* ==================================================
ショップ（お取り寄せ）導線　2026-11 追加
新規要素のみ。既存セクションの見た目は変更しない。
色：既存LPに合わせる（紺 #353c5d／グレー #F5F5F7／罫線 #dcdde4／補助テキスト #5d6278）。赤 #B83A26 はスコアとリンク文字のみ
================================================== */

/*BUTTON*/
.sl_btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 32px;
    border-radius:6px;
    border:2px solid #353c5d;
    background:#353c5d;
    color:#fff;
    font-weight:700;
    letter-spacing:1px;
    line-height:140%;
    text-align:center;
    transition:opacity .3s;
}

.sl_btn:hover {
    opacity:.75;
}

.sl_btn.sl_btn_sub {
    background:#fff;
    color:#353c5d;
}



/*HEADER*/
.sl_header {
    background:#fff;
    border-bottom:1px solid #dcdde4;
}

.sl_header .sl_header_in {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 40px;
}

.sl_header .logo {
    display:flex;
    align-items:center;
    min-height:44px;
    width:140px;
}

.sl_header .gnav {
    display:flex;
    align-items:center;
    gap:28px;
}

.sl_header .gnav a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:#353c5d;
    font-size:95%;
}

.sl_header .gnav a.sl_btn {
    color:#fff;
    padding:10px 24px;
    font-size:90%;
}

.sl_header .sp_shop_btn {
    display:none;
}



/*HERO BUTTONS*/
.sl_hero_btns {
    display:flex;
    justify-content:center;
    gap:16px;
    padding:30px 20px 60px;
}

.sl_hero_btns .sl_btn {
    min-height:56px;
    padding:10px 40px;
}



/*TASTING（ステップの下）*/
#tasting .sl_step_shop {
    text-align:center;
}

#tasting .sl_step_shop .sl_btn {
    min-height:56px;
    padding:10px 48px;
}



/*TAKE HOME*/
#takehome {
    background:#F5F5F7;
    padding:100px 0;
}

#takehome .sl_titles {
    text-align:center;
    padding-bottom:40px;
}

#takehome .sl_titles .category {
    font-size:80%;
    letter-spacing:4px;
    color:#353c5d;
    padding-bottom:8px;
}

#takehome .sl_titles h2 {
    font-size:200%;
    font-weight:700;
    letter-spacing:3px;
    line-height:140%;
    color:#353c5d;
    padding-bottom:16px;
}

#takehome .sl_titles .tx {
    line-height:190%;
    color:#353c5d;
}

#takehome .sl_titles .score_about {
    padding-top:10px;
    font-size:75%;
    color:#5d6278;
}

#takehome .items {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
}

#takehome .items .item {
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #dcdde4;
    border-radius:6px;
    overflow:hidden;
    transition:opacity .3s;
}

#takehome .items .item:hover {
    opacity:.8;
}

#takehome .items .item .photo img {
    aspect-ratio:1 / 1;
    object-fit:cover;
}

#takehome .items .item .detail {
    display:flex;
    flex-direction:column;
    flex-grow:1;
    gap:8px;
    padding:16px 16px 20px;
}

#takehome .items .item .cat {
    font-size:75%;
    color:#5d6278;
}

#takehome .items .item .name {
    flex-grow:1;
    font-size:95%;
    font-weight:700;
    line-height:160%;
    color:#353c5d;
}

/*スコアは js/shoplink.js で取得してから表示。取得前は高さだけ確保しておく*/
#takehome .items .item .score {
    visibility:hidden;
    min-height:63px;
}

#takehome .items .item .score.is-ready {
    visibility:visible;
}

#takehome .items .item .score.is-error {
    display:none;
}

#takehome .items .item .score_main {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0 6px;
    line-height:140%;
}

#takehome .items .item .score_main .label {
    font-size:12px;
    color:#353c5d;
}

#takehome .items .item .score_main .num {
    font-size:22px;
    font-weight:700;
    color:#B83A26;
}

#takehome .items .item .score_note {
    padding-top:2px;
    font-size:12px;
    line-height:150%;
    letter-spacing:0;
    color:#5d6278;
}

#takehome .items .item .price {
    font-size:105%;
    color:#353c5d;
}

#takehome .items .item .price span {
    font-size:65%;
    margin-left:4px;
    color:#353c5d;
}

#takehome .more {
    text-align:center;
    padding-top:40px;
}



/*SHOP INFORMATION*/
#shop .sl_hours {
    padding-bottom:30px;
}

#shop .sl_hours .label {
    font-size:70%;
    color:#353c5d;
}

#shop .sl_hours .tx {
    color:#353c5d;
    letter-spacing:2px;
}

#shop .sl_hours .note {
    font-size:75%;
    color:#353c5d;
}

#shop .sl_info_box {
    margin-top:25px;
    padding:16px 18px;
    background:#F5F5F7;
    border-radius:6px;
}

#shop .sl_info_box .tx {
    font-size:90%;
    line-height:180%;
    color:#353c5d;
}

#shop .sl_info_box a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:#B83A26;
    font-weight:700;
    font-size:90%;
}



/*FOOTER*/
footer .sl_footer_nav {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0 28px;
    padding:10px 20px;
}

footer .sl_footer_nav a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    color:#353c5d;
    font-size:90%;
}

footer .sl_footer_nav a.strong {
    font-weight:700;
}



/* ==================================================
SP（既存のブレークポイント 999px に合わせる）
================================================== */
@media(max-width:999px){

.sl_header .sl_header_in {
    padding:8px 5%;
}

.sl_header .logo {
    width:110px;
}

.sl_header .gnav {
    display:none;
}

.sl_header .sp_shop_btn {
    display:inline-flex;
    min-height:44px;
    padding:6px 18px;
    font-size:85%;
}

.sl_hero_btns {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:25px 5% 40px;
}

.sl_hero_btns .sl_btn {
    padding:10px 20px;
}

#tasting .sl_step_shop {
    padding-bottom:20px;
}

#tasting .sl_step_shop .sl_btn {
    display:flex;
    padding:10px 20px;
}

#takehome {
    padding:70px 0;
}

#takehome .sl_titles {
    padding-bottom:25px;
}

#takehome .sl_titles h2 {
    font-size:140%;
    letter-spacing:1px;
}

#takehome .sl_titles .tx {
    font-size:90%;
    text-align:left;
}

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

#takehome .items .item .detail {
    padding:12px 12px 14px;
}

#takehome .items .item .name {
    font-size:85%;
}

#takehome .items .item .score {
    min-height:80px;
}

#takehome .items .item .score_main .label {
    font-size:11px;
}

#takehome .items .item .score_main .num {
    font-size:20px;
}

#takehome .items .item .score_note {
    font-size:11px;
}

#shop .sl_hours {
    padding-bottom:20px;
}

#takehome .more {
    padding-top:25px;
}

#takehome .more .sl_btn {
    display:flex;
}

#shop .sl_info_box {
    margin-top:20px;
}

footer .sl_footer_nav {
    gap:0 20px;
    padding:15px 5% 5px;
}

}

/*タブレット幅では商品カードを4列に*/
@media(min-width:700px) and (max-width:999px){

#takehome .items {
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

#takehome .more .sl_btn {
    display:inline-flex;
}

}