@charset "utf-8";

/* トリボ定期便：リピストLP上部商品選択。LP全体への影響を避ける */
.treatsCustom {
    margin: 0px auto;
    padding: 44px 0px 64px;
    background: #fffdfa;
    color: #282821;
    font-family: "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
}
.treatsCustom *, .treatsCustom *::before, .treatsCustom *::after { box-sizing: border-box; }
.treatsCustom button { font: inherit; cursor: pointer; }
.treatsCustom__inner { width: 94%; max-width: 1100px; margin: 0px auto; }
.treatsCustom__heading { margin: 0px 0px 30px; }
.treatsCustom__heading > span { display: block; margin-bottom: 10px; color: #b56243; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.treatsCustom__heading h2 { margin: 0px 0px 12px; font-size: clamp(24px, 4vw, 38px); line-height: 1.5; font-weight: 700; }
.treatsCustom__heading em { color: #b56243; font-style: normal; }
.treatsCustom__heading p { margin: 0px; color: #716f69; font-size: 14px; line-height: 1.9; }
.treatsCustom__step { display: flex; align-items: center; gap: 12px; margin: 36px 0px 15px; }
.treatsCustom__step b { display: inline-block; border: 1px solid #b56243; border-radius: 30px; padding: 5px 9px; color: #b56243; font-size: 11px; white-space: nowrap; }
.treatsCustom__step h3 { margin: 0px; font-size: 20px; font-weight: 700; }
.treatsCustom__courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.treatsCustom__courses button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border: 2px solid #dfdad3; border-radius: 14px; background: #fff; color: #282821; text-align: left; }
.treatsCustom__courses button strong { font-size: 18px; }
.treatsCustom__courses button span { font-size: 25px; font-weight: 700; }
.treatsCustom__courses button small { color: #b56243; font-size: 12px; }
.treatsCustom__courses button.is-active { border-color: #b56243; background: #fff3ec; }
.treatsCustom__filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.treatsCustom__filtergroup { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.treatsCustom__filtergroup button { padding: 7px 12px; border: 1px solid #ddd4cb; border-radius: 24px; background: #fff; color: #665e55; font-size: 12px; }
.treatsCustom__filtergroup button.is-active { border-color: #a45b42; background: #a45b42; color: #fff; }
.treatsCustom__status { margin: 18px 0px; padding: 15px; border: 1px solid #e4dcd3; border-radius: 9px; background: #fff; font-size: 14px; font-weight: 700; }
.treatsCustom__bar { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 10px; background: #efeae4; }
.treatsCustom__bar i { display: block; height: 100%; width: 0%; background: #b56243; transition: width .15s ease; }
.treatsCustom__message { margin: 10px 0px; padding: 12px; border: 1px solid #b44242; background: #fff4f4; color: #a12d2d; font-size: 13px; }
.treatsCustom__catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.treatsCustom__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e1dbd4; border-radius: 12px; background: #fff; }
.treatsCustom__item.is-selected { border-color: #b56243; background: #fffaf6; }
.treatsCustom__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #f7f5f3; }
.treatsCustom__itemContent { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 13px; }
.treatsCustom__itemName { margin: 0px; font-size: 14px; line-height: 1.6; font-weight: 700; }
.treatsCustom__itemMaterial { margin: 0px; color: #807971; font-size: 11px; line-height: 1.7; }
.treatsCustom__itemMeta { color: #786e62; font-size: 11px; }
.treatsCustom__tag { display: inline-block; align-self: flex-start; padding: 2px 6px; border-radius: 4px; background: #edf3e8; color: #47613d; font-size: 10px; }
.treatsCustom__qty { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; padding-top: 10px; border-top: 1px solid #eee7de; }
.treatsCustom__qty button { min-width: 34px; height: 34px; padding: 0px; border: 1px solid #b56243; border-radius: 7px; background: #fff; color: #a45136; font-weight: 700; }
.treatsCustom__qty button:disabled { border-color: #ddd; color: #aaa; background: #f6f6f6; cursor: not-allowed; }
.treatsCustom__qty span { flex: 1; text-align: center; font-size: 15px; font-weight: 700; }
.treatsCustom__summary { margin-top: 24px; padding: 22px; border: 1px solid #e4dcd3; border-radius: 12px; background: #fff; }
.treatsCustom__summary h3 { margin: 0px 0px 12px; font-size: 17px; }
.treatsCustom__summary ul { margin: 0px 0px 12px; padding-left: 20px; line-height: 1.9; font-size: 13px; }
.treatsCustom__note { margin: 12px 0px; font-size: 12px; color: #736c64; }
.treatsCustom__anchor { color: #a45136; font-size: 12px; text-decoration: underline; }
@media (max-width: 767px) {
    .treatsCustom { padding: 28px 0px 42px; }
    .treatsCustom__courses { gap: 7px; }
    .treatsCustom__courses button { padding: 12px 8px; border-radius: 8px; }
    .treatsCustom__courses button strong { font-size: 12px; }
    .treatsCustom__courses button span { font-size: 17px; }
    .treatsCustom__catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .treatsCustom__itemContent { padding: 10px; }
    .treatsCustom__itemName { font-size: 12px; }
    .treatsCustom__itemMeta { font-size: 10px; }
    .treatsCustom__summary { padding: 14px; }
}

/* ReaddyのSTEP構成・商品カードのラベルを再現する追加スタイル */
.treatsCustom__stepHint { font-size: 12px; color: #888178; }
.treatsCustom__filterHelp { margin: -2px 0px 30px; font-size: 12px; line-height: 1.7; color: #82786f; }
.treatsCustom__filters--series { flex-direction: row; align-items: center; gap: 12px; }
.treatsCustom__filterLabel { min-width: 54px; font-size: 12px; font-weight: 700; color: #746b62; }
.treatsCustom__legend { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 13px 15px; margin: 12px 0px 22px; border-radius: 6px; background: #f5f1ec; font-size: 11px; color: #746b62; }
.treatsCustom__legend b { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.treatsCustom__legend .is-ok { background: #e9f4eb; color: #258048; }
.treatsCustom__legend .is-no { background: #fff0f0; color: #b84b54; }
.treatsCustom__legend .is-season { background: #349963; color: #fff; }
.treatsCustom__item { position: relative; }
.treatsCustom__item .treatsCustom__tag { position: absolute; top: 9px; left: 9px; padding: 4px 8px; border-radius: 30px; background: #31995f; color: #fff; font-size: 11px; font-weight: 700; }
.treatsCustom__careBadges { display: flex; flex-wrap: wrap; gap: 4px; }
.treatsCustom__careBadge { display: inline-block; padding: 2px 5px; border: 1px solid; border-radius: 3px; font-size: 10px; line-height: 1.4; }
.treatsCustom__careBadge.is-ok { color: #26824e; background: #ecf8ee; border-color: #b5dfbf; }
.treatsCustom__careBadge.is-no { color: #b6535e; background: #fff3f4; border-color: #efc9d0; }
.treatsCustom__itemContent { gap: 7px; }
.treatsCustom__qty button:last-child { background: #d76b47; color: #fff; border-color: #d76b47; }
.treatsCustom__qty button:disabled { background: #f6f6f6; color: #aaa; border-color: #ddd; }
@media (max-width: 767px) {
    .treatsCustom__step { gap: 7px; flex-wrap: wrap; }
    .treatsCustom__step h3 { font-size: 17px; }
    .treatsCustom__stepHint { font-size: 11px; }
    .treatsCustom__careBadge { font-size: 9px; }
    .treatsCustom__legend { font-size: 10px; }
}

/* 2026.10 トリボ定期便 キービジュアル（Readdyレイアウト準拠） */
.treatsCustom__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
    margin: 0px 0px 52px;
}
.treatsCustom__heroText { min-width: 0px; }
.treatsCustom__heroEyebrow {
    margin: 0px 0px 16px;
    color: #77716b;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.13em;
}
.treatsCustom__heroTitle {
    margin: 0px 0px 24px;
    color: #181512;
    font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN", serif;
    font-size: clamp(26px, 2.9vw, 39px);
    font-weight: 700;
    line-height: 1.27;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}
.treatsCustom__heroTitle span { color: #d86440; }
.treatsCustom__heroDescription {
    margin: 0px 0px 27px;
    color: #625b55;
    font-size: 13px;
    line-height: 1.9;
}
.treatsCustom__heroBenefits {
    display: grid;
    gap: 10px;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.treatsCustom__heroBenefits li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #24211f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.treatsCustom__heroBenefits li span {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fde2d5;
    color: #ad452b;
    font-size: 12px;
}
.treatsCustom__heroVisual { min-width: 0px; margin: 0px; }
.treatsCustom__heroImage { overflow: hidden; border: 1px solid #efe8df; border-radius: 12px; background: #fff; }
.treatsCustom__heroImage img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.treatsCustom__heroVisual figcaption { margin: 11px 0px 0px; color: #858079; font-size: 12px; text-align: center; }
@media (max-width: 767px) {
    .treatsCustom__hero { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 38px; }
    .treatsCustom__heroTitle { font-size: clamp(25px, 7vw, 34px); line-height: 1.38; }
    .treatsCustom__heroBr { display: none; }
    .treatsCustom__heroDescription { font-size: 13px; }
    .treatsCustom__heroImage { max-width: 520px; margin: 0px auto; }
    .treatsCustom__heroBenefits li { font-size: 12px; }
}

/* 2026.10 STEP 1：Readdy新コースカード */
.treatsCustom__courses { gap: 16px; }
.treatsCustom__courses .treatsCustom__course {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    min-height: 238px;
    padding: 20px;
    border: 2px solid #ede8e1;
    border-radius: 12px;
    background: transparent;
    color: #171512;
    transition: border-color .2s, background-color .2s;
}
.treatsCustom__courses .treatsCustom__course.is-active { border-color: #e46b42; background: #fff1eb; }
.treatsCustom__courseCheck {
    display: none;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #d96842;
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
}
.treatsCustom__course.is-active .treatsCustom__courseCheck { display: block; }
.treatsCustom__courses .treatsCustom__courseBadge {
    display: inline-block;
    height: 22px;
    margin: 0px 0px 14px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #def3e4;
    color: #21633b;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}
.treatsCustom__courses .treatsCustom__courseBadge--empty { visibility: hidden; }
.treatsCustom__courses .treatsCustom__courseName { font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 19px; line-height: 1.4; }
.treatsCustom__courses .treatsCustom__courseDesc { color: #756e66; font-size: 12px; line-height: 1.6; }
.treatsCustom__courses .treatsCustom__coursePrice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.treatsCustom__courses .treatsCustom__coursePrice del { color: #a5a09a; font-size: 12px; }
.treatsCustom__courses .treatsCustom__coursePrice b { font-family: Arial, sans-serif; font-size: 30px; letter-spacing: .025em; line-height: 1.2; }
.treatsCustom__courses .treatsCustom__coursePrice small { color: #77716c; font-size: 12px; }
.treatsCustom__courses .treatsCustom__courseSaving { margin-top: 6px; color: #32744d; font-size: 12px; }
.treatsCustom__courses .treatsCustom__courseSaving--empty { visibility: hidden; }
.treatsCustom__courses .treatsCustom__courseGift {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f44348;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.treatsCustom__courseFootnote { margin: 12px 0px 0px; color: #817972; font-size: 12px; line-height: 1.6; }
@media (max-width: 767px) {
    .treatsCustom__courses { grid-template-columns: 1fr; gap: 10px; }
    .treatsCustom__courses .treatsCustom__course { min-height: 0px; padding: 16px; }
    .treatsCustom__courses .treatsCustom__courseName { font-size: 18px; }
    .treatsCustom__courses .treatsCustom__coursePrice b { font-size: 27px; }
}

/* 2026.10 STEP 2 / STEP 3：Readdy画面に沿った絞り込み・進捗・凡例 */
.treatsCustom__step--filter { margin-top: 46px; }
.treatsCustom__step--catalog { margin-top: 45px; }
.treatsCustom__step { flex-wrap: wrap; gap: 12px; }
.treatsCustom__step b { padding: 4px 9px; border-color: #e7633f; color: #dc5c38; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .05em; }
.treatsCustom__step h3 { color: #1a1715; font-size: 19px; }
.treatsCustom__stepHint { color: #77716b; font-size: 13px; }
.treatsCustom__filters--care { margin-top: 20px; margin-bottom: 18px; }
.treatsCustom__filtergroup { gap: 9px; }
.treatsCustom__filtergroup button { padding: 10px 17px; border: 1px solid #e7dbce; border-radius: 30px; background: transparent; color: #544a42; font-size: 13px; line-height: 1.3; transition: background .2s, color .2s; }
.treatsCustom__filtergroup button.is-active { border-color: #171411; background: #171411; color: #fff; }
.treatsCustom__filterHelp { margin: 0px 0px 15px; color: #7d746b; font-size: 12px; line-height: 1.9; }
.treatsCustom__status { margin: 20px 0px 19px; padding: 19px 18px; border: 1px solid #ebe5dc; border-radius: 11px; background: transparent; font-size: 13px; font-weight: 400; }
.treatsCustom__statusRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.treatsCustom__statusRow strong { color: #766e64; font-size: 13px; font-weight: 700; white-space: nowrap; }
.treatsCustom__bar { height: 8px; margin-top: 12px; border-radius: 20px; background: #f0e9e1; }
.treatsCustom__bar i { background: #e16946; }
.treatsCustom__filters--series { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0px 0px 20px; }
.treatsCustom__filterLabel { color: #77706a; font-size: 13px; white-space: nowrap; }
.treatsCustom__filters--series .treatsCustom__filtergroup button { padding: 8px 17px; }
.treatsCustom__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin: 0px 0px 23px; padding: 12px 15px; border-radius: 10px; background: #f8f2eb; color: #766e65; font-size: 11px; line-height: 1.6; }
.treatsCustom__legend > span { display: inline-flex; align-items: center; gap: 4px; }
.treatsCustom__legend b { display: inline-block; padding: 0px 5px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.treatsCustom__legend .is-ok { border: 1px solid #b7ddc2; background: #e5f4e9; color: #27884a; }
.treatsCustom__legend .is-no { border: 1px solid #f0c5c8; background: #fff0f1; color: #e64d59; }
.treatsCustom__legend .is-season { border-radius: 12px; background: #51a774; color: #fff; font-size: 10px; }
.treatsCustom__legend strong { margin-right: 4px; }
@media (max-width: 767px) {
    .treatsCustom__step--filter, .treatsCustom__step--catalog { margin-top: 34px; }
    .treatsCustom__step { gap: 7px 9px; }
    .treatsCustom__step h3 { font-size: 17px; }
    .treatsCustom__stepHint { font-size: 11px; }
    .treatsCustom__filtergroup { gap: 7px; }
    .treatsCustom__filtergroup button { padding: 8px 12px; font-size: 12px; }
    .treatsCustom__status { padding: 14px 12px; }
    .treatsCustom__statusRow { align-items: flex-start; }
    .treatsCustom__statusRow strong { font-size: 11px; }
    .treatsCustom__filters--series { gap: 9px; }
    .treatsCustom__legend { padding: 10px; gap: 8px 12px; }
}

/* v7 商品シリーズ見出し・Readdyに合わせた正方形サムネイル */
.treatsCustom__catalog { display: block; }
.treatsCustom__seriesGroup { margin: 0px 0px 30px; }
.treatsCustom__seriesHeading { display: flex; align-items: baseline; gap: 10px; margin: 0px 0px 13px; }
.treatsCustom__seriesHeading h3 { margin: 0px; color: #211c19; font-size: 17px; line-height: 1.4; font-weight: 700; }
.treatsCustom__seriesHeading span { color: #8c827a; font-size: 12px; white-space: nowrap; }
.treatsCustom__seriesHeading i { flex: 1; height: 1px; background: #e8dfd6; }
.treatsCustom__seriesGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.treatsCustom__item img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
@media (max-width: 767px) {
    .treatsCustom__seriesGroup { margin-bottom: 24px; }
    .treatsCustom__seriesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .treatsCustom__seriesHeading h3 { font-size: 15px; }
}


/* v8 ご注文内容：Readdyのコース明細・送料・合計を再現 */
.treatsCustom__order { margin-top: 42px; padding: 27px 25px 24px; border: 1px solid #ebe5dc; border-radius: 10px; background: transparent; color: #211c19; }
.treatsCustom__order > h3 { margin: 0 0 22px; font-size: 19px; font-weight: 700; }
.treatsCustom__orderMain { display: flex; align-items: center; gap: 12px; margin-bottom: 19px; font-size: 13px; }
.treatsCustom__orderCircle { width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: #d96945; font-weight: 700; }
.treatsCustom__orderCourseName { flex: 1; }
.treatsCustom__orderCoursePrice { margin-left: auto; white-space: nowrap; font-size: 14px; }
.treatsCustom__orderSelected { margin: 0 0 17px 37px; font-size: 12px; color: #7b726a; }
.treatsCustom__orderSelected ul { margin: 0; padding-left: 18px; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 5px; }
.treatsCustom__orderDetail { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; color: #71685f; font-size: 13px; }
.treatsCustom__orderDetail span:last-child { color: #211c19; white-space: nowrap; }
.treatsCustom__orderTotal { display: flex; justify-content: space-between; gap: 15px; align-items: center; border-top: 1px solid #ebe5dc; margin-top: 8px; padding-top: 16px; }
.treatsCustom__orderTotal strong:first-child { font-size: 17px; }
.treatsCustom__orderTotal strong:last-child { font-size: 25px; white-space: nowrap; }
.treatsCustom__orderNote { margin: 11px 0 0; color: #776d64; font-size: 12px; }
.treatsCustom__orderDisclaimer { margin: 10px 0 0; color: #8b8076; font-size: 11px; line-height: 1.6; }
.treatsCustom__order .treatsCustom__anchor { display: inline-block; margin-top: 15px; font-size: 12px; }
@media (max-width: 767px) {
    .treatsCustom__order { padding: 21px 16px; margin-top: 32px; }
    .treatsCustom__order > h3 { font-size: 17px; }
    .treatsCustom__orderSelected { margin-left: 0; }
    .treatsCustom__orderTotal strong:last-child { font-size: 22px; }
}

/* v9 トリボ定期便のご利用条件：Readdyの3カラムカード */
.treatsCustom__terms { margin: 48px 0 0; padding: 34px 0 32px; border-top: 1px solid #eee8df; color: #211c19; }
.treatsCustom__termsHead { display: flex; gap: 15px; align-items: baseline; flex-wrap: wrap; margin: 0 0 9px; }
.treatsCustom__termsTag { display: inline-flex; align-items: center; border: 1px solid #df6842; border-radius: 20px; padding: 3px 9px; color: #d55c35; font: 700 12px/1.2 Arial,sans-serif; }
.treatsCustom__termsHead h2 { margin: 0; font-size: 25px; font-weight: 700; line-height: 1.4; }
.treatsCustom__termsLead { margin: 0 0 28px; font-size: 14px; color: #665d54; line-height: 1.7; }
.treatsCustom__termsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.treatsCustom__termsCard { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid #ece4db; border-radius: 9px; background: #fbf9f6; }
.treatsCustom__termsCardTop { display: flex; align-items: center; gap: 15px; }
.treatsCustom__termsIcon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #ffe6dc; color: #d86741; font-size: 21px; font-weight: 700; }
.treatsCustom__termsNumber { font: 700 12px/1.4 monospace; letter-spacing: .14em; color: #9a918a; }
.treatsCustom__termsCard h3 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 700; }
.treatsCustom__termsCard > p { margin: 0; color: #615951; font-size: 13px; line-height: 1.7; flex: 1; }
.treatsCustom__termsNote { padding: 8px 11px; border: 1px solid #bfe3c8; border-radius: 6px; background: #e7f6ea; color: #275b3b; font-size: 12px; line-height: 1.5; }
.treatsCustom__termsNote span { display: inline; margin-right: 7px; font-size: 15px; }
.treatsCustom__termsFootnote { margin: 22px 0 0; font-size: 12px; line-height: 1.7; color: #746c64; }
@media (max-width: 767px) {
 .treatsCustom__terms { margin-top: 34px; padding: 27px 0; }
 .treatsCustom__termsHead { gap: 10px; }
 .treatsCustom__termsHead h2 { font-size: 20px; }
 .treatsCustom__termsLead { font-size: 13px; margin-bottom: 18px; }
 .treatsCustom__termsGrid { grid-template-columns: 1fr; gap: 11px; }
 .treatsCustom__termsCard { padding: 18px; gap: 11px; }
 .treatsCustom__termsCard h3 { font-size: 15px; }
 .treatsCustom__termsFootnote { font-size: 11px; margin-top: 18px; }
}

/* v10 おやつの注意事項：Readdyデザインに合わせた折りたたみ */
.treatsCustom__caution { padding: 8px 0 42px; color: #766d65; font-size: 12px; line-height: 1.8; }
.treatsCustom__caution > p { margin: 0 0 10px; }
.treatsCustom__notice { margin: 34px 0 0; border: 1px solid #e9e2d8; border-radius: 9px; background: #f9f4ee; overflow: hidden; }
.treatsCustom__notice > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 17px; cursor: pointer; color: #4d463f; font-size: 13px; list-style: none; }
.treatsCustom__notice > summary::-webkit-details-marker { display: none; }
.treatsCustom__noticeArrow { display: inline-block; font-size: 19px; transition: transform .2s ease; transform: rotate(0deg); line-height: 1; }
.treatsCustom__notice[open] .treatsCustom__noticeArrow { transform: rotate(180deg); }
.treatsCustom__noticeBody { padding: 9px 17px 16px; border-top: 1px solid #ece5dc; font-size: 12px; color: #746b63; }
.treatsCustom__noticeBody > p { margin: 0 0 12px; }
.treatsCustom__noticeBody > p:last-child { margin: 13px 0 0; }
.treatsCustom__noticeBody ul { margin: 0; padding: 0; list-style: none; }
.treatsCustom__noticeBody li { position: relative; padding-left: 18px; margin: 0 0 10px; }
.treatsCustom__noticeBody li::before { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; top: 5px; left: 0; background: #a19a92; }
.treatsCustom__noticeBody li strong { display: block; font-size: 12px; color: #4a433d; font-weight: 700; }
.treatsCustom__noticeBody li span { display: block; margin-top: 2px; }
@media (max-width: 767px) {
  .treatsCustom__caution { padding-bottom: 30px; font-size: 11px; }
  .treatsCustom__notice { margin-top: 23px; }
  .treatsCustom__notice > summary { padding: 12px; font-size: 12px; }
  .treatsCustom__noticeBody { padding: 11px 12px 15px; }
}

/* v12 Instagram：Readdy同様の横スクロール4投稿 */
.treatsCustom__instagram { padding: 54px 0 68px; border-top: 1px solid #ece7df; }
.treatsCustom__instagramHead { text-align: center; margin-bottom: 34px; }
.treatsCustom__instagramHead > span { display: block; margin-bottom: 10px; color: #d75d38; font-size: 13px; letter-spacing: .13em; }
.treatsCustom__instagramHead h2 { margin: 0 0 10px; color: #211c19; font-size: clamp(26px,3vw,38px); font-weight: 500; line-height: 1.4; }
.treatsCustom__instagramHead p { margin: 0; font-size: 14px; color: #665d54; line-height: 1.7; }
.treatsCustom__instagramScroll { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 0 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.treatsCustom__instagramItem { flex: 0 0 350px; min-width: 0; scroll-snap-align: start; }
.treatsCustom__instagramItem .instagram-media { margin: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; background: #fff; border: 1px solid #e3ddd5; border-radius: 4px; }
.treatsCustom__instagramItem iframe { max-width: 100% !important; }
.treatsCustom__instagramItem blockquote > a { display: block; padding: 28px 12px; color: #d65d38; text-align: center; }
@media (max-width: 767px) {
  .treatsCustom__instagram { padding: 40px 0 50px; }
  .treatsCustom__instagramHead { margin-bottom: 24px; }
  .treatsCustom__instagramHead h2 { font-size: 28px; }
  .treatsCustom__instagramHead p { font-size: 12px; }
  .treatsCustom__instagramScroll { gap: 12px; }
  .treatsCustom__instagramItem { flex-basis: min(82vw, 330px); }
}

/* v13 Instagramフォローボタン */
.treatsCustom__instagramFollow { display: flex; justify-content: center; margin: 28px 0 0; }
.treatsCustom__instagramFollow a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; border-radius: 999px; color: #fff; background: #dc673e; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: opacity .2s ease; }
.treatsCustom__instagramFollow a:hover { opacity: .85; color: #fff; }
.treatsCustom__instagramFollow svg { flex: 0 0 auto; }
@media (max-width: 767px) { .treatsCustom__instagramFollow { margin-top: 22px; } .treatsCustom__instagramFollow a { min-height: 48px; padding: 11px 24px; font-size: 14px; } }


/* v14 代々木公園店・トリボ定期便の案内ヘッダー */
.treatsCustom {
    padding-top: 0px;
}
.treatsCustom__topbar {
    margin: 0px 0px 44px;
    border-bottom: 1px solid #eee7de;
    background: #fffdfa;
}
.treatsCustom__topbarInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 94%;
    max-width: 1100px;
    min-height: 92px;
    margin: 0px auto;
    padding: 16px 0px;
}
.treatsCustom__topbarBrand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.treatsCustom__topbarIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #dc673e;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.treatsCustom__topbarText {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.treatsCustom__topbarText strong {
    color: #211c19;
    font-size: 19px;
    line-height: 1.3;
}
.treatsCustom__topbarText span,
.treatsCustom__topbarNote {
    color: #81786f;
    font-size: 14px;
    line-height: 1.5;
}
.treatsCustom__topbarNote {
    flex-shrink: 0;
    margin: 0px;
    text-align: right;
}
@media (max-width: 767px) {
    .treatsCustom__topbar {
        margin-bottom: 26px;
    }
    .treatsCustom__topbarInner {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 0px;
        padding: 14px 0px;
    }
    .treatsCustom__topbarBrand {
        gap: 10px;
    }
    .treatsCustom__topbarIcon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .treatsCustom__topbarText strong {
        font-size: 14px;
    }
    .treatsCustom__topbarText span {
        font-size: 11px;
    }
    .treatsCustom__topbarNote {
        margin-left: 46px;
        font-size: 11px;
        text-align: left;
    }
}

/* =========================================================
   代々木公園店グローバルナビ / トリボLP (v16)
   既存のリピストフォームにはスタイルを適用しない
========================================================= */
.treatsGlobalNav,
.treatsGlobalNav * { box-sizing: border-box; }
.treatsGlobalNav {
    position: relative;
    z-index: 999;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #faf8f3;
    border-bottom: 1px solid #e9e3da;
    color: #1b1917;
    font-family: "游ゴシック", YuGothic, "Yu Gothic", sans-serif;
}
.treatsGlobalNav a { color: inherit; text-decoration: none; }
.treatsGlobalNav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 80px;
    padding: 0px 24px;
}
.treatsGlobalNav__brand,
.treatsGlobalNav__actions,
.treatsGlobalNav__desktop {
    display: flex;
    align-items: center;
}
.treatsGlobalNav__brand { gap: 7px; flex-shrink: 0; }
.treatsGlobalNav__logo,
.treatsGlobalNav__cat { position: relative; display: block; width: 38px; height: 38px; flex-shrink: 0; }
.treatsGlobalNav__logo img,
.treatsGlobalNav__cat img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.treatsGlobalNav__cat { opacity: .55; filter: grayscale(1); }
.treatsGlobalNav__cat > span { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font-size: 12px; background: #faf8f355; border-radius: 50%; }
.treatsGlobalNav__brandText { display: flex; flex-direction: column; margin-left: 4px; line-height: 1.15; }
.treatsGlobalNav__brandText strong { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.treatsGlobalNav__brandText small { margin-top: 4px; font-size: 9px; letter-spacing: .14em; }
.treatsGlobalNav__desktop { justify-content: center; gap: clamp(12px, 1.35vw, 28px); flex: 1; }
.treatsGlobalNav__desktop > a,
.treatsGlobalNav__dropdown > a { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; }
.treatsGlobalNav__desktop a:hover { color: #db673f; }
.treatsGlobalNav__dropdown { position: relative; }
.treatsGlobalNav__dropdownPanel {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 300px;
    padding: 8px;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e9e3da;
    border-radius: 10px;
    box-shadow: 0px 12px 30px #00000018;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}
.treatsGlobalNav__dropdownPanel:before { content: ''; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
.treatsGlobalNav__dropdown:hover .treatsGlobalNav__dropdownPanel,
.treatsGlobalNav__dropdown:focus-within .treatsGlobalNav__dropdownPanel { opacity: 1; visibility: visible; pointer-events: auto; }
.treatsGlobalNav__dropdownPanel a { padding: 10px 12px; border-radius: 6px; font-weight: 700; font-size: 13px; }
.treatsGlobalNav__dropdownPanel a:hover { background: #f6f2ec; }
.treatsGlobalNav__dropdownPanel small { display: block; margin-top: 3px; color: #7a736d; font-size: 11px; font-weight: 400; }
.treatsGlobalNav__actions { flex-shrink: 0; gap: 10px; }
.treatsGlobalNav__social { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 32px; font-size: 10px; font-weight: 800; }
.treatsGlobalNav__social--insta { font-size: 25px; font-weight: 400; }
.treatsGlobalNav__cart { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.treatsGlobalNav__contact { padding: 9px 14px; border: 1px solid #e36c41; border-radius: 5px; color: #cc5c35!important; font-size: 12px; white-space: nowrap; }
.treatsGlobalNav__contact:hover { background: #fff0e9; }
.treatsGlobalNav__toggle,
.treatsGlobalNav__mobile { display: none; }
@media (max-width: 1099px) {
    .treatsGlobalNav__inner { min-height: 64px; padding: 0px 16px; gap: 8px; }
    .treatsGlobalNav__desktop,
    .treatsGlobalNav__contact { display: none; }
    .treatsGlobalNav__brand { gap: 5px; }
    .treatsGlobalNav__logo,
    .treatsGlobalNav__cat { width: 34px; height: 34px; }
    .treatsGlobalNav__brandText strong { font-size: 17px; }
    .treatsGlobalNav__brandText small { font-size: 8px; }
    .treatsGlobalNav__actions { gap: 5px; margin-left: auto; }
    .treatsGlobalNav__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 38px;
        height: 38px;
        padding: 5px;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .treatsGlobalNav__toggle span { display: block; width: 23px; height: 2px; background: #26221f; }
    .treatsGlobalNav__mobile:not([hidden]) {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 65px);
        overflow-y: auto;
        padding: 8px 16px 16px;
        background: #faf8f3;
        border-top: 1px solid #e9e3da;
    }
    .treatsGlobalNav__mobile > a,
    .treatsGlobalNav__mobile summary { display: block; padding: 13px 10px; border-bottom: 1px solid #ece6dd; font-size: 14px; font-weight: 700; cursor: pointer; }
    .treatsGlobalNav__mobile details > div { display: flex; flex-direction: column; padding: 4px 0px 4px 15px; }
    .treatsGlobalNav__mobile details > div a { padding: 11px 10px; font-size: 13px; }
}
@media (max-width: 390px) {
    .treatsGlobalNav__brandText strong { font-size: 15px; }
    .treatsGlobalNav__brandText small { font-size: 7px; }
    .treatsGlobalNav__social { min-width: 24px; }
    .treatsGlobalNav__social--insta { font-size: 22px; }
    .treatsGlobalNav__cart { width: 29px; }
    .treatsGlobalNav__toggle { width: 32px; }
}

/* =========================================================
   スマホ展開ナビ：Readdyメニューに合わせた縦レイアウト
========================================================= */
@media (max-width: 1099px) {
    .treatsGlobalNav__mobile:not([hidden]) {
        display: block;
        padding: 12px 16px 24px;
        text-align: left;
        overscroll-behavior: contain;
    }
    .treatsGlobalNav__mobileSection { margin: 14px 0px 26px; }
    .treatsGlobalNav__mobileSection h2 {
        margin: 0px 0px 12px;
        padding: 0px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.6;
        color: #201d1a;
    }
    .treatsGlobalNav__mobileLinks { display: grid; grid-template-columns: 1fr; gap: 0px; padding-left: 16px; }
    .treatsGlobalNav__mobileLinks a {
        display: block;
        padding: 10px 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #302a27;
    }
    .treatsGlobalNav__mobileLinks a.is-featured { font-weight: 700; color: #ce5833; }
    .treatsGlobalNav__mobileConcern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0px 14px; padding-left: 16px; }
    .treatsGlobalNav__mobileConcern a { display: block; padding: 8px 0px; font-size: 13px; line-height: 1.5; color: #302a27; }
    .treatsGlobalNav__mobileSecondary { display: flex; flex-direction: column; gap: 0px; }
    .treatsGlobalNav__mobileSecondary > a { display: block; padding: 16px 0px; font-size: 14px; font-weight: 500; line-height: 1.6; }
    .treatsGlobalNav__mobileSecondary .treatsGlobalNav__mobileChecker { color: #27211c; }
    .treatsGlobalNav__mobileChecker span { color: #db673f; margin-right: 4px; }
    .treatsGlobalNav__mobileSecondary a.treatsGlobalNav__mobileContact {
        display: block;
        margin: 4px 0px 0px;
        padding: 10px 12px;
        border: 1px solid #db673f;
        border-radius: 6px;
        color: #c95e3a;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
    }
    .treatsGlobalNav.is-open .treatsGlobalNav__toggle { position: relative; }
    .treatsGlobalNav.is-open .treatsGlobalNav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .treatsGlobalNav.is-open .treatsGlobalNav__toggle span:nth-child(2) { opacity: 0; }
    .treatsGlobalNav.is-open .treatsGlobalNav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .treatsGlobalNav__toggle span { transition: transform .2s ease, opacity .2s ease; }
    .treatsGlobalNav__mobile a:focus-visible, .treatsGlobalNav__toggle:focus-visible { outline: 2px solid #db673f; outline-offset: 2px; }
}

/* v17: ヘッダーSNSアイコンをReaddy準拠の図形に統一 */
.treatsGlobalNav__social { color: #56514d; text-decoration: none; }
.treatsGlobalNav__social .treatsGlobalNav__icon { display: block; width: 19px; height: 19px; flex: none; }
.treatsGlobalNav__social:hover { color: #c95e3a; }
.treatsGlobalNav__mobileSecondary .treatsGlobalNav__icon { display: inline-block; width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; }


/* 2026.10 トリボ固定注文バナー（リピストの元カートを変更しない） */
body:has(#treatsFloating) { padding-bottom: 125px; }
.treatsFloating,
.treatsFloating * { box-sizing: border-box; }
.treatsFloating {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
    background: rgba(255,253,250,.98);
    border-top: 1px solid #ede7de;
    box-shadow: 0px -3px 15px rgba(35,29,22,.05);
    color: #191714;
    font-family: "游ゴシック体", YuGothic, "Yu Gothic", sans-serif;
}
.treatsFloating__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 94%;
    max-width: 1100px;
    min-height: 85px;
    padding: 12px 0px;
    margin: 0px auto;
}
.treatsFloating__count { width: 150px; flex: 0 0 150px; }
.treatsFloating__counter { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.treatsFloating__counter strong { font-size: 27px; line-height: 1; font-weight: 700; }
.treatsFloating__counter span { font-size: 11px; color: #7b756e; }
.treatsFloating__track { overflow: hidden; height: 6px; margin-top: 9px; background: #eee8df; border-radius: 20px; }
.treatsFloating__track span { display: block; width: 0%; height: 100%; background: #dc6a43; transition: width .2s; }
.treatsFloating__guide { flex: 1 1 auto; min-width: 0px; margin: 0px; font-size: 14px; color: #6d665e; line-height: 1.5; }
.treatsFloating__checkout { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; }
.treatsFloating__price { display: flex; flex-direction: column; white-space: nowrap; }
.treatsFloating__price[hidden] { display: none !important; }
.treatsFloating__price span { font-size: 11px; color: #7b756e; }
.treatsFloating__price strong { font-size: 21px; line-height: 1.2; font-weight: 700; }
.treatsFloating__button {
    padding: 15px 25px;
    border: 0px;
    border-radius: 13px;
    background: #db6b43;
    color: white;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.treatsFloating__button:disabled { background: #f1ede7; color: #a7a19a; cursor: not-allowed; }
.treatsFloating__button:focus-visible { outline: 2px solid #db6b43; outline-offset: 2px; }
@media (max-width: 767px) {
    body:has(#treatsFloating) { padding-bottom: 165px; }
    .treatsFloating__inner { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; row-gap: 9px; min-height: 118px; padding: 10px 0px max(12px, env(safe-area-inset-bottom)); }
    .treatsFloating__count { width: 128px; }
    .treatsFloating__counter strong { font-size: 24px; }
    .treatsFloating__guide { font-size: 12px; }
    .treatsFloating__checkout { grid-column: 1 / -1; justify-content: flex-start; gap: 12px; }
    .treatsFloating__price { min-width: 74px; }
    .treatsFloating__price strong { font-size: 19px; }
    .treatsFloating__button { padding: 12px 20px; font-size: 13px; }
}

/* STEP 1 が見えるまではフローティング注文バーを非表示 */
.treatsFloating.is-before-step1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
}
.treatsFloating {
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .treatsFloating { transition: none; }
}

/* ==========================================================
   v21: リピスト標準「よりどり商品選択欄」の表示のみ非表示
   DOMは残し、上部UIから標準の＋／－ボタンを操作する。
   お客様情報・配送・決済フォームは非表示にしない。
   ========================================================== */
#bundle_product_block_1 {
    display: none !important;
}

/* 非表示にした標準選択欄への確認リンクは表示しない */
.treatsCustom__order .treatsCustom__anchor[href="#bundle_product_block_1"] {
    display: none !important;
}


/* v30 Instagram埋め込み：iframe生成時もページ全体の横幅を広げない */
.treatsCustom__instagram {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.treatsCustom__instagramScroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.treatsCustom__instagramItem {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.treatsCustom__instagramItem iframe.instagram-media-rendered,
.treatsCustom__instagramItem iframe {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .treatsCustom__instagramItem {
        flex: 0 0 min(82vw, 330px);
    }
}

/* v31: Instagram埋め込みの再描画によるレイアウト波及を抑制 */
.treatsCustom__instagram {
    contain: layout paint;
}
.treatsCustom__instagramScroll {
    contain: layout paint;
}

/* トリボ定期便：スマホのメインタイトル直下の説明文 */
@media screen and (max-width: 767px) {
    .treatsCustom__heroDescription {
        font-size: 15px;
        line-height: 1.85;
    }
}

.l-contents__frame {
    padding: 0px;
}