@charset "utf-8";

/*
 * site-ec.css — EC機能ページ（ログイン/会員登録/マイページ/カート等）用の補助スタイル。
 * モック(wellwash)のフォント・ブランド色(#2d98da)に合わせる。モックの .l-content 等と併用。
 */

:root {
    --ec-primary: #3cbee6;
    --ec-primary-dark: #007bab;
    --ec-ink: #333;
    --ec-line: #e2e6ea;
    --ec-muted: #7a8590;
    --ec-bg: #f5f8fa;
}

.u-hidden { display: none !important; }

/* フラッシュ */
.c-flash {
    max-width: 1120px;
    margin: 20px auto;
    padding: 12px 16px;
    border-radius: 8px;
    background: #e8f4fc;
    color: var(--ec-primary-dark);
    border: 1px solid #bfe0f5;
    font-size: 14px;
}

.ec-login-form { max-width: 380px; margin: 0 auto; }
.ec-actions--stack { flex-direction: column; align-items: stretch; }
.ec-section-title {
    font-family: "Shippori Mincho B1", serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ec-primary);
}

/* フォーム */
.ec-field { margin-bottom: 18px; }
.ec-field > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-ink);
    margin-bottom: 6px;
}
.ec-req { display: inline-block; background: #333; color: #fff; font-size: 11px; font-weight: 500; line-height: 1; padding: 4px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
.ec-input,
.ec-select,
.ec-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cdd5dd;
    border-radius: 8px;
    font-size: 15px;
    color: var(--ec-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.ec-input:focus,
.ec-select:focus,
.ec-textarea:focus {
    outline: none;
    border-color: var(--ec-primary);
    box-shadow: 0 0 0 3px rgba(45, 152, 218, 0.15);
}
.ec-hint { margin-top: 4px; font-size: 12px; color: var(--ec-muted); }
.ec-error { margin-top: 4px; font-size: 13px; color: #e0245e; }
.ec-alert {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fdecef;
    border: 1px solid #f5c2ce;
    color: #c02a4b;
    font-size: 14px;
}
.ec-alert--success { background: #e8f6ee; border-color: #b7e2c7; color: #1e7d47; }
.ec-resend { max-width: 560px; margin: 0 auto 20px; text-align: center; }
.ec-resend__text { font-size: 13px; color: var(--ec-muted); margin-bottom: 10px; }
.ec-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ec-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ec-ink); }
/* reset.css が全 input に appearance:none を当てるため、チェックボックス/ラジオの表示を復帰させる */
.ec-check input[type="checkbox"],
.ec-check input[type="radio"],
.ec-co-pay input[type="radio"],
.ec-buy__mode input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--ec-primary);
    cursor: pointer;
}
.ec-check input[type="checkbox"] { border-radius: 4px; }
/* ラジオはブラウザ既定の見た目に頼らず、リング+中央ドットのデザインで統一する */
.ec-check input[type="radio"],
.ec-co-pay input[type="radio"],
.ec-buy__mode input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ec-primary);
    border-radius: 50%;
    background: #fff;
    position: relative;
}
.ec-check input[type="radio"]:checked::after,
.ec-co-pay input[type="radio"]:checked::after,
.ec-buy__mode input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--ec-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ボタン */
.ec-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s, opacity .15s;
    text-decoration: none;
}
.ec-btn--primary { background: var(--ec-primary); color: #fff; }
.ec-btn--primary:hover { background: var(--ec-primary-dark); }
.ec-btn--block { width: 100%; }
.ec-btn--ghost { background: #fff; border-color: #cdd5dd; color: var(--ec-ink); }
.ec-btn--ghost:hover { background: var(--ec-bg); }
.ec-btn--outline-primary { background: #fff; border-color: var(--ec-primary); color: var(--ec-primary); }
.ec-btn--outline-primary:hover { background: var(--ec-primary); color: #fff; }

.ec-actions { margin-top: 24px; display: flex; gap: 12px; align-items: center; justify-content: center; }
.ec-links { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ec-muted); }
.ec-links a { color: var(--ec-primary); text-decoration: none; }
.ec-links a:hover { text-decoration: underline; }

/* 説明リスト（マイページ会員情報など） */
.ec-dl { display: grid; grid-template-columns: 140px 1fr; gap: 12px 16px; font-size: 14px; }
.ec-dl dt { color: var(--ec-muted); }
.ec-dl dd { color: var(--ec-ink); }

/* 商品グリッド（トップ おすすめ等） */
.ec-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ec-product-card { background: #fff; border: 1px solid var(--ec-line); border-radius: 12px; overflow: hidden; }
.ec-product-thumb { aspect-ratio: 1 / 1; background: var(--ec-bg); display: flex; align-items: center; justify-content: center; }
.ec-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-product-body { padding: 12px 14px; }
.ec-product-name { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
.ec-product-price { color: var(--ec-primary-dark); font-weight: 700; font-size: 15px; }
.ec-product-price small { font-weight: 400; color: var(--ec-muted); font-size: 11px; }

.ec-menu-list { list-style: none; margin: 0; padding: 0; }
.ec-menu-list li { border-bottom: 1px solid var(--ec-line); }
.ec-menu-list li a { display: block; padding: 14px 4px; font-size: 14px; color: var(--ec-ink); text-decoration: none; }
.ec-menu-list li a:hover { color: var(--ec-primary); }
.ec-menu-list li.is-disabled { padding: 14px 4px; font-size: 14px; color: #c3cbd3; }

@media (max-width: 768px) {
    .ec-row-2 { grid-template-columns: 1fr; }
    .ec-products { grid-template-columns: repeat(2, 1fr); }
    .ec-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .ec-dl dt { margin-top: 8px; }
}

/* ---- お問い合わせ確認画面のボタン ---- */
.c-confirm-btns { display: flex; flex-direction: column; align-items: center; }
.c-confirm-btns .l-btn-02-01 { margin-top: 24px; }
.c-confirm-btns .l-btn-02-01:first-child,
.c-confirm-btns form:first-child .l-btn-02-01 { margin-top: 40px; }
.ec-btn-secondary::after { display: none; }
.ec-btn-secondary input { background: #fff; color: #09b4e6; border: 2px solid #09b4e6; }
.ec-btn-secondary input:hover { background: #09b4e6; color: #fff; }

/* =========================================================
   商品一覧 / 商品詳細（EC）
   ========================================================= */
.ec-page { padding-top: 75px; font-family: "Noto Sans JP", sans-serif; color: var(--ec-ink); }
@media screen and (max-width: 930px) { .ec-page { padding-top: 60px; } }

/* ---- ECサブヘッダー（XD準拠：キーワード検索・お気に入り・ログイン）---- */
.ec-subhead__inner { display: flex; align-items: center; justify-content: flex-end; gap: 36px; padding: 18px 10px; flex-wrap: wrap; }
.ec-searchbar { display: flex; align-items: center; background: #fff; border: 1px solid #cdd5dd; border-radius: 6px; overflow: hidden; width: 320px; max-width: 100%; }
.ec-searchbar__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 8px 11px 16px; font-size: 14px; color: var(--ec-ink); }
.ec-searchbar__input:focus { outline: none; }
.ec-searchbar__btn { border: none; background: transparent; cursor: pointer; color: #8a939c; padding: 0 14px 0 4px; display: flex; align-items: center; }

.ec-usernav { display: flex; align-items: center; gap: 28px; }
.ec-usernav__item { display: inline-flex; align-items: center; gap: 7px; color: var(--ec-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.ec-usernav__item svg { color: var(--ec-primary); }
.ec-usernav__item:hover { opacity: .75; }

/* ヘッダーロゴ：メインビジュアル（写真）に重なっている間だけ白ロゴ。
   下層ページ(.l-lower)やスクロール後(.is-scrolled)は通常ロゴ。 */
.c-header-logo--default { display: none; }
.c-header-logo--white { display: block; }
.l-header.l-lower .c-header-logo--default,
.l-header.is-scrolled .c-header-logo--default { display: block; }
.l-header.l-lower .c-header-logo--white,
.l-header.is-scrolled .c-header-logo--white { display: none; }

/* SPヘッダー：ハンバーガーの左に常時表示するカートアイコン */
.l-drawer__cart { display: none; }
@media screen and (max-width: 930px) {
    .l-drawer {
        display: flex;
        align-items: center;
    }
    .l-drawer__cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin-right: 4px;
    }
    .l-drawer__cart img { width: 28px; height: 28px; }
    .l-drawer__item--login .l-drawer__item-inner { font-size: 12px; }
}

/* ---- 一覧レイアウト ---- */
.ec-list { display: grid; grid-template-columns: 1fr 260px; gap: 40px; padding-top: 40px; padding-bottom: 80px; align-items: start; }
.ec-list__head { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #CCCCCC; }
.ec-sort { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.ec-list__title { font-family: "Shippori Mincho B1", serif; font-size: 22px; font-weight: 600; }
.ec-sort__select { appearance: none; -webkit-appearance: none; border: 1px solid #cdd5dd; border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center; padding: 8px 32px 8px 14px; font-size: 13px; color: var(--ec-ink); cursor: pointer; }
.ec-list__result { font-size: 14px; color: var(--ec-muted); margin-bottom: 16px; }
.ec-list__empty { padding: 60px 0; text-align: center; color: var(--ec-muted); }

/* ---- 商品グリッド / カード ---- */
.ec-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.ec-pcard { display: block; text-decoration: none; color: var(--ec-ink); }
.ec-pcard__thumb { position: relative; aspect-ratio: 1 / 1; background: #f3f5f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-pcard__thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.ec-pcard:hover .ec-pcard__thumb img { transform: scale(1.03); }
.ec-pcard__noimg { font-size: 40px; color: #cdd5dd; }
.ec-pcard__badge { position: absolute; right: 0; bottom: 0; background: #1a1a1a; color: #fff; font-size: 12px; padding: 5px 12px; }
.ec-pcard__body { padding: 12px 2px; }
.ec-pcard__name { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.ec-pcard__price { font-size: 15px; font-weight: 700; }
.ec-pcard__price small { font-size: 11px; font-weight: 400; color: var(--ec-muted); }

/* ---- カテゴリサイドバー ---- */
.ec-side__title { font-family: "Shippori Mincho B1", serif; font-size: 18px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid #CCCCCC; margin-bottom: 6px; }
.ec-side__list { list-style: none; margin: 0; padding: 0; }
.ec-side__list li { border-bottom: 1px solid var(--ec-line); }
.ec-side__list a { display: flex; align-items: center; gap: 8px; padding: 13px 4px; font-size: 14px; color: var(--ec-ink); text-decoration: none; }
.ec-side__list a:hover, .ec-side__list a.is-active { color: var(--ec-primary); }
.ec-side__arrow { color: var(--ec-primary); font-weight: 700; }

/* ---- ページネーション ---- */
.ec-pager { margin-top: 48px; }
.ec-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ec-pagination__num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 14px; color: var(--ec-ink); text-decoration: none; border-radius: 50%; }
.ec-pagination__num.is-active { color: var(--ec-primary); font-weight: 700; }
.ec-pagination__num:hover { background: #eef2f5; }
.ec-pagination__dots { color: var(--ec-muted); }
.ec-pagination__arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #b9c2ca; color: #fff; text-decoration: none; font-size: 20px; line-height: 1; }
.ec-pagination__arrow:hover { background: var(--ec-primary); }
.ec-pagination__arrow.is-disabled { opacity: .4; pointer-events: none; }

/* ---- 詳細レイアウト ---- */
.ec-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-top: 40px; padding-bottom: 40px; align-items: start; max-width: 1120px; }
.ec-detail__gallery { position: sticky; top: 90px; min-width: 0; }
.ec-gallery__main { margin-bottom: 12px; background: #f3f5f7; aspect-ratio: 1 / 1; }
.ec-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.ec-gallery__noimg { background: #f3f5f7; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 60px; color: #cdd5dd; }
.ec-gallery__thumbs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ec-gallery__thumb-grid-item { display: block; border: none; background: none; padding: 0; cursor: pointer; }
.ec-gallery__thumb-grid-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f3f5f7; opacity: .6; transition: opacity .2s; }
.ec-gallery__thumb-grid-item.is-active img, .ec-gallery__thumb-grid-item:hover img { opacity: 1; }

.ec-detail__badge { display: inline-block; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 600; padding: 3px 12px; margin-bottom: 0px; }
.ec-detail__subcatch { font-size: 20px; color: #e74c3c; font-weight: 600; font-family: "Shippori Mincho B1", serif; }
.ec-detail__name { font-family: "Shippori Mincho B1", serif; font-size: 26px; font-weight: 600; line-height: 1.5; }
.ec-detail__catch { color: var(--ec-muted); font-size: 14px; margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--ec-line); }
.ec-detail__regular { font-size: 14px; color: var(--ec-ink); margin-top: 20px; }
.ec-detail__regular span { font-size: 12px; color: var(--ec-muted); }
.ec-detail__price { font-size: 30px; font-weight: 700; color: var(--ec-ink); margin: 4px 0 20px; }
.ec-detail__price span { font-size: 14px; font-weight: 400; }

.ec-spec { font-size: 14px; padding: 10px 0; border-top: 1px solid var(--ec-line); }
.ec-spec__row { display: grid; grid-template-columns: 90px 1fr; gap: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--ec-line); }
.ec-spec__row:last-child { border-bottom: none; }
.ec-spec dt { color: var(--ec-muted); }
.ec-spec dd { color: var(--ec-ink); line-height: 1.6; }

.ec-buy { margin-top: 8px; }
.ec-buy__qty { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ec-buy__qty label { font-size: 14px; color: var(--ec-muted); }
.ec-buy__qty input { width: 72px; padding: 8px 10px; border: 1px solid #cdd5dd; border-radius: 8px; font-size: 15px; text-align: center; }
.ec-buy__submit { display: block; width: 100%; max-width: 350px; margin: 8px auto 0; font-size: 16px; padding: 15px; }
.ec-buy__fav { display: block; width: auto; margin: 12px auto 0; background: none; border: none; padding: 4px; font-size: 14px; color: var(--ec-ink); cursor: pointer; text-decoration: none; text-align: center; }
.ec-buy__fav:hover { color: var(--ec-primary-dark); text-decoration: underline; }

.ec-buy__mode { border: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; }
.ec-buy__mode-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.ec-buy__sub { flex: 1 1 auto; min-width: 0; }
.ec-buy__mode-item--sub { border: 1px solid var(--ec-line); border-radius: 10px; padding: 14px; }
.ec-buy__mode-item input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 3px 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--ec-primary);
    cursor: pointer;
}
/* 定期購入トグル：ラジオ同様に見せたいが、自分自身のクリックでオン/オフしたいのでcheckboxで実装 */
.ec-buy__mode-toggle {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #cdd5dd;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.ec-buy__mode-toggle:checked {
    border-color: var(--ec-primary);
}
.ec-buy__mode-toggle:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ec-primary);
}
.ec-buy__sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ec-buy__sub-label { font-weight: 700; color: #0E0E0E; }
.ec-buy__sub-head b { font-weight: 700; color: #0E0E0E; font-size: 17px; }
.ec-buy__sub-tax { font-weight: 400; color: #525263; font-size: 12px; }
.ec-buy__sub-note { display: block; color: var(--ec-muted); font-size: 12px; margin-top: 4px; line-height: 1.7; }

.ec-buy__teaser-badge { position: relative; display: inline-block; background: #70A1FF; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 16px; border-radius: 6px; margin-bottom: 16px; }
.ec-buy__teaser-badge::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #70A1FF;
}

/* こちらもおすすめ（アップセル） */
.ec-upsell { margin-top: 28px; }
.ec-upsell__label { position: relative; display: inline-block; background: #70A1FF; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 16px; border-radius: 6px; margin-bottom: 18px; }
.ec-upsell__label::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #70A1FF;
}
.ec-upsell__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #ECF9FF; border-radius: 10px; padding: 14px; text-decoration: none; color: var(--ec-ink); margin-bottom: 10px; }
.ec-upsell__item:hover { background: #dcf1fb; }
.ec-upsell__badge { display: inline-block; background: #1a1a1a; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; margin-bottom: 4px; }
.ec-upsell__name { font-size: 14px; line-height: 1.5; font-weight: 600; }
.ec-upsell__price { font-size: 15px; font-weight: 700; margin-top: 4px; }
.ec-upsell__price small { font-size: 11px; font-weight: 400; color: var(--ec-muted); }
.ec-upsell__thumb { width: 96px; height: 96px; flex-shrink: 0; background: #fff; border-radius: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-upsell__thumb img { width: 100%; height: 100%; object-fit: contain; }

/* 説明・関連 */
.ec-detail__desc { margin-top: 28px; font-size: 15px; line-height: 2; color: var(--ec-ink); }
.ec-related { padding-bottom: 90px; max-width: 1080px; }
.ec-related__title { font-family: "Shippori Mincho B1", serif; font-size: 18px; font-weight: 600; text-align: left; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--ec-line); }
.ec-related .ec-pgrid { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 900px) {
    .ec-list { grid-template-columns: 1fr; gap: 32px; }
    .ec-list__side { order: -1; }
    .ec-detail { grid-template-columns: 1fr; gap: 10px; padding-top: 10px; }
    .ec-detail__gallery { position: static; }
    .ec-related .ec-pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
    .ec-pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    .ec-subhead__inner { gap: 12px; flex-wrap: nowrap; padding: 10px 10px; }
    .ec-searchbar { width: auto; flex: 1 1 auto; min-width: 0; }
    .ec-usernav { gap: 8px; width: auto; justify-content: flex-end; flex-shrink: 0; }
    .ec-usernav__item { font-size: 12px; }
    .ec-detail__price { font-size: 26px; }
}
@media screen and (max-width: 600px) {
    .ec-detail__name { font-size: 22px; }
}

/* =========================================================
   購入フロー ステップ / カート
   ========================================================= */
.ec-steps { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 640px; margin: 32px auto 52px; }
.ec-steps__item { position: relative; flex: 0 0 44px; width: 44px; }
.ec-steps__num { width: 44px; height: 44px; border-radius: 50%; background: #454c54; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; }
.ec-steps__label { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #454c54; white-space: nowrap; }
.ec-steps__item.is-active .ec-steps__num { background: var(--ec-primary); }
.ec-steps__item.is-active .ec-steps__label { color: var(--ec-primary); font-weight: 600; }
.ec-steps__bar { flex: 1; height: 2px; background: #454c54; min-width: 30px; }
@media screen and (max-width: 600px) {
    .ec-steps__item { flex: 0 0 36px; width: 36px; }
    .ec-steps__num { width: 36px; height: 36px; font-size: 15px; }
    .ec-steps__label { font-size: 10px; }
}

/* ---- カート ---- */
.ec-cart { padding-top: 40px; padding-bottom: 90px; }
.ec-cart__title { font-family: "Noto Sans JP", sans-serif; font-size: 20px; font-weight: 600; color: var(--ec-primary); padding-bottom: 18px; margin-bottom: 32px; border-bottom: 1px solid var(--ec-line); }
.ec-cart__empty { text-align: center; color: var(--ec-muted); padding: 60px 0 30px; }
.ec-cart__sum-lead { text-align: center; font-size: 16px; margin: 24px 0 28px; }
.ec-cart__sum-lead b { color: var(--ec-primary); font-size: 20px; }

.ec-cart__table { border-top: 1px solid var(--ec-line); }
.ec-cart__thead { display: grid; grid-template-columns: 80px 1fr 140px 120px; align-items: center; background: #f2f4f6; font-size: 14px; font-weight: 600; }
.ec-cart__thead span { padding: 14px 8px; text-align: center; }
.ec-cart__col-item { text-align: center; }

.ec-cart__row { display: grid; grid-template-columns: 80px 1fr 140px 120px; align-items: center; padding: 24px 0; border-bottom: 1px dashed var(--ec-line); }
.ec-cart__cell-del { text-align: center; }
.ec-cart__del { background: none; border: none; font-size: 26px; color: #b9c2ca; cursor: pointer; line-height: 1; }
.ec-cart__del:hover { color: #3CBEE6; }

.ec-cart__cell-item { display: flex; align-items: center; gap: 18px; }
.ec-cart__thumb { width: 96px; height: 96px; flex-shrink: 0; background: #f3f5f7; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ec-cart__name { color: #333; font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.5; }
.ec-cart__name:hover { text-decoration: underline; }
.ec-cart__unit { font-size: 14px; margin-top: 6px; }
.ec-cart__unit small { color: var(--ec-muted); font-size: 11px; }
.ec-cart__tag { display: inline-block; margin-top: 6px; background: #eaf5fb; color: var(--ec-primary-dark); font-size: 12px; padding: 3px 10px; border-radius: 4px; }

.ec-cart__cell-qty { display: flex; justify-content: center; }
.ec-qty { display: inline-flex; align-items: center; gap: 10px; }
.ec-qty__num { min-width: 28px; text-align: center; font-size: 15px; }
.ec-qty__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cdd5dd; background: #fff; color: var(--ec-ink); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ec-qty__btn:hover { border-color: var(--ec-primary); color: var(--ec-primary); }
.ec-cart__cell-sub { text-align: right; font-size: 16px; font-weight: 700; padding-right: 8px; }

/* 定期便切替 / サイクル */
.ec-cart__sub-area { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.ec-subbox, .ec-cyclebox { border: 1px solid var(--ec-line); border-radius: 8px; padding: 18px; }
.ec-subbox__head, .ec-cyclebox__head { color: var(--ec-primary); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.ec-subbox__opt { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; cursor: pointer; }
.ec-subbox__opt input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ec-primary);
    cursor: pointer;
}
.ec-subbox__price b { color: var(--ec-primary-dark); font-size: 17px; }
.ec-subbox__note, .ec-cyclebox__note { color: var(--ec-muted); font-size: 12px; line-height: 1.8; margin-top: 8px; }
.ec-cyclebox__row { display: flex; align-items: center; gap: 14px; }
.ec-cyclebox__label { font-size: 14px; }
.ec-cyclebox .ec-select { width: auto; min-width: 180px; }

.ec-cart__total { text-align: right; font-size: 18px; margin: 28px 0; }
.ec-cart__total b { color: #e0492f; font-size: 26px; margin-left: 12px; }
.ec-cart__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 340px; margin: 40px auto 0; }
.ec-cart__checkout { font-size: 16px; padding: 16px; }

@media screen and (max-width: 767px) {
    .ec-cart__thead { display: none; }
    .ec-cart__row { grid-template-columns: 40px 1fr 90px; grid-template-areas: "del item item" "del qty sub"; row-gap: 12px; }
    .ec-cart__cell-del { grid-area: del; }
    .ec-cart__cell-item { grid-area: item; }
    .ec-cart__cell-qty { grid-area: qty; justify-content: flex-start; }
    .ec-cart__cell-sub { grid-area: sub; }
    .ec-cart__sub-area { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .ec-cart__thumb { width: 72px; height: 72px; }
}

/* =========================================================
   購入手続き / 確認 / 完了
   ========================================================= */
.ec-checkout { padding-top: 40px; padding-bottom: 90px; }
.ec-checkout__grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; margin-top: 32px; }
.ec-checkout__main { min-width: 0; }

.ec-co-block { margin-bottom: 36px; }
.ec-co-heading { background: #eaf5fb; color: var(--ec-primary); font-size: 16px; font-weight: 600; padding: 12px 16px; margin-bottom: 18px; }
.ec-co-customer p { font-size: 14px; line-height: 1.9; }
.ec-co-cust-name { font-size: 16px; font-weight: 600; }

.ec-co-group { padding-bottom: 24px; margin-bottom: 24px; }
.ec-co-group__title { font-size: 15px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid #0099d4; margin-bottom: 16px; color: #0099d4; }
.ec-co-item { display: flex; gap: 16px; align-items: center; padding: 10px 0; }
.ec-co-item__thumb { width: 84px; height: 84px; flex-shrink: 0; background: #f3f5f7; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-co-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ec-co-item__name { font-size: 14px; line-height: 1.5; }
.ec-co-item__price { font-size: 13px; color: var(--ec-muted); margin-top: 6px; }

.ec-co-sub { margin-top: 16px; }
.ec-co-sub__head { background: #f2f4f6; font-size: 14px; font-weight: 600; padding: 10px 14px; margin-bottom: 12px; }
.ec-co-sub__head--sub { margin-top: 16px; }
.ec-co-sub__label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ec-co-addr { font-size: 14px; line-height: 1.8; margin-bottom: 12px; }
.ec-co-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; padding: 6px 0; }
.ec-co-line dt { font-weight: 600; min-width: 84px; }
.ec-co-line dd { margin: 0; }
.ec-co-note { font-size: 13px; color: #333; margin-top: 10px; margin-bottom: 10px; }
.ec-co-note-text { font-size: 14px; line-height: 1.8; }
.ec-co-payment-value { font-size: 14px; }
.ec-select--sm { width: auto; min-width: 160px; display: inline-block; padding: 7px 30px 7px 12px; }
.ec-co-pays { display: flex; flex-direction: column; gap: 10px; }
.ec-co-pay { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }

/* サイドバー集計 */
.ec-checkout__side { position: sticky; top: 90px; background: #f5f8fa; border-radius: 10px; padding: 22px; }
.ec-sum { display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; font-size: 14px; }
.ec-sum dt { color: var(--ec-ink); }
.ec-sum dd { margin: 0; text-align: right; }
.ec-sum__total { text-align: right; font-size: 15px; margin: 16px 0 20px; padding-top: 16px; border-top: 1px solid var(--ec-line); }
.ec-sum__total b { font-size: 24px; color: var(--ec-ink); margin: 0 4px; }
.ec-sum__total span { font-size: 12px; color: var(--ec-muted); }
.ec-checkout__side .ec-btn { margin-bottom: 12px; }
.ec-sum__back { margin-bottom: 0 !important; }

/* 完了 */
.ec-complete { text-align: center; padding: 48px 20px 40px; }
.ec-complete__lead { font-family: "Shippori Mincho B1", serif; font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.ec-complete__no { font-size: 15px; margin-bottom: 20px; }
.ec-complete__no b { color: var(--ec-primary-dark); font-size: 18px; }
.ec-complete__text { font-size: 14px; line-height: 2; color: var(--ec-ink); margin-bottom: 32px; }
.ec-complete__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 完了ページ：未手続き（別会計）の残りへの導線 */
.ec-complete__pending { max-width: 720px; margin: 0 auto 36px; padding: 22px; text-align: left; background: var(--ec-bg); border: 1px solid #bfe0f5; border-radius: 10px; }
.ec-complete__pending-head { font-size: 16px; font-weight: 600; color: var(--ec-primary-dark); margin-bottom: 8px; }
.ec-complete__pending-note { font-size: 13px; line-height: 1.9; color: var(--ec-muted); margin-bottom: 18px; }
.ec-complete__pending-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ec-line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.ec-complete__pending-label { font-size: 14px; font-weight: 600; line-height: 1.6; }
.ec-complete__pending-label small { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--ec-muted); }
.ec-complete__pending-sub { font-size: 13px; color: var(--ec-muted); margin-top: 6px; }
.ec-complete__pending-sub b { font-size: 16px; color: var(--ec-ink); margin-left: 4px; }
.ec-complete__pending-group .ec-btn { flex-shrink: 0; }
.ec-complete__pending-cart { font-size: 13px; text-align: right; margin-top: 12px; }
.ec-complete__pending-cart a { color: var(--ec-primary-dark); text-decoration: underline; }

@media screen and (max-width: 900px) {
    .ec-checkout__grid { grid-template-columns: 1fr; }
    .ec-checkout__side { position: static; }
}

@media screen and (max-width: 767px) {
    .ec-complete__pending-group { flex-direction: column; align-items: stretch; }
    .ec-complete__pending-group .ec-btn { width: 100%; text-align: center; }
}

/* =========================================================
   マイページ（タブ / 注文履歴）
   ========================================================= */
.ec-mypage { padding-top: 40px; padding-bottom: 90px; }
.ec-mytabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 28px 0 8px; border: 1px solid var(--ec-line); border-radius: 6px; overflow: hidden; }
.ec-mytab { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px 8px; font-size: 14px; font-weight: 600; color: var(--ec-ink); text-decoration: none; border-right: 1px solid var(--ec-line); background: #fff; }
.ec-mytab:last-child { border-right: none; }
.ec-mytab.is-active { color: var(--ec-primary); }
.ec-mytab:not(.is-active):not(.is-disabled):hover { background: var(--ec-bg); color: var(--ec-primary); }
.ec-mytab.is-disabled { color: #c3cbd3; cursor: default; }

.ec-mypage__lead { font-size: 14px; color: var(--ec-muted); margin: 24px 0 8px; padding-bottom: 16px; border-bottom: 1px solid var(--ec-line); }
.ec-mypage__empty { text-align: center; color: var(--ec-muted); padding: 60px 0; }

.ec-order-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--ec-line); align-items: start; }
.ec-order-row__date { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ec-order-row__no, .ec-order-row__status { font-size: 14px; margin-bottom: 4px; }
.ec-order-row__no b { font-weight: 700; }
.ec-order-row__status span { color: var(--ec-muted); }
.ec-order-row__tag { display: inline-block; margin-top: 8px; background: #eaf5fb; color: var(--ec-primary-dark); font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 4px; }
.ec-order-row__btn { display: inline-block; margin-top: 14px; background: #f2f4f6; border: 1px solid var(--ec-line); border-radius: 6px; padding: 9px 22px; font-size: 14px; color: var(--ec-ink); text-decoration: none; }
.ec-order-row__btn:hover { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-order-row__items { display: flex; flex-direction: column; gap: 16px; }
.ec-order-row__item { display: flex; gap: 16px; align-items: center; }
.ec-order-row__thumb { width: 120px; height: 120px; flex-shrink: 0; background: #f3f5f7; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ec-order-row__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ec-order-row__name { font-size: 14px; line-height: 1.5; }
.ec-order-row__price { font-size: 14px; color: var(--ec-muted); margin-top: 8px; }

.ec-order-head { font-size: 14px; line-height: 2; margin: 24px 0 8px; }
.ec-order-head b { font-weight: 700; }
.ec-order-head__status { color: var(--ec-muted); }
.ec-co-pay-text { font-size: 14px; }
.ec-order-detail__back { margin-top: 24px; }

@media screen and (max-width: 767px) {
    .ec-mytabs { grid-template-columns: repeat(2, 1fr); }
    .ec-mytab { border-bottom: 1px solid var(--ec-line); }
    .ec-order-row { grid-template-columns: 1fr; gap: 16px; }
    .ec-order-row__items { order: -1; }
}

/* ---- アカウント情報編集フォーム ---- */
.ec-pform { margin-top: 28px; }
.ec-pform__row { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px dashed var(--ec-line); }
.ec-pform__label { font-size: 15px; font-weight: 600; color: var(--ec-ink); padding-top: 10px; }
.ec-pform__label .ec-req { margin-left: 10px; }
.ec-pform__body { max-width: 640px; }
.ec-pform__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ec-pform__postal { display: flex; align-items: center; gap: 8px; }
.ec-pform__postal-mark { font-size: 16px; color: var(--ec-muted); }
.ec-pform__postal-help { font-size: 13px; color: var(--ec-primary); text-decoration: none; white-space: nowrap; }
.ec-pform__postal-help:hover { text-decoration: underline; }
.ec-pform__agree { text-align: center; margin-top: 32px; }
.ec-pform__agree .ec-check { display: inline-flex; }
.ec-pform__agree a { color: var(--ec-primary); text-decoration: underline; }
.ec-confirm-dl { margin-top: 28px; }
.ec-confirm-dl dt { font-weight: 600; color: var(--ec-ink); }
.ec-confirm-dl dd { line-height: 1.8; }
.ec-pform__lead { font-size: 14px; color: var(--ec-muted); margin-top: 20px; }
.ec-pform--confirm { margin-top: 20px; }
.ec-pform--confirm .ec-pform__row:first-child { border-top: 1px dashed var(--ec-line); }
.ec-pform__value { padding-top: 10px; font-size: 15px; line-height: 1.9; color: var(--ec-ink); word-break: break-word; }
.ec-pform__submit { display: flex; justify-content: center; margin-top: 40px; }
.ec-pform__submit .ec-btn { min-width: 320px; }
.ec-pform__submit--stack { flex-direction: column; align-items: center; gap: 12px; }
@media screen and (max-width: 767px) {
    .ec-pform__row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
    .ec-pform__label { padding-top: 0; }
    .ec-pform__value { padding-top: 0; }
    .ec-pform__submit .ec-btn { min-width: 0; width: 100%; }
}

/* ---- お届け先一覧 ---- */
.ec-addr-add { margin: 28px 0 8px; }
.ec-addr-add__btn { display: inline-block; background: #f2f4f6; border: 1px solid var(--ec-line); border-radius: 6px; padding: 12px 24px; font-size: 14px; font-weight: 600; color: var(--ec-ink); text-decoration: none; }
.ec-addr-add__btn:hover { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-addr-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px dashed var(--ec-line); }
.ec-addr-row:first-of-type { border-top: 1px dashed var(--ec-line); }
.ec-addr-row__del { background: none; border: none; font-size: 24px; color: #b9c2ca; cursor: pointer; line-height: 1; }
.ec-addr-row__del:hover { color: #e0492f; }
.ec-addr-row__body { font-size: 14px; line-height: 1.9; }
.ec-addr-row__name { font-weight: 600; }
.ec-addr-row__edit { background: #f2f4f6; border: 1px solid var(--ec-line); border-radius: 6px; padding: 9px 22px; font-size: 14px; color: var(--ec-ink); text-decoration: none; }
.ec-addr-row__edit:hover { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-pform__submit--2 { gap: 16px; }
.ec-addr-cancel { min-width: 200px !important; }
@media screen and (max-width: 767px) {
    .ec-addr-row { grid-template-columns: 32px 1fr; }
    .ec-addr-row__edit { grid-column: 2; justify-self: start; margin-top: 8px; }
}

/* ---- 購入手続き お届け先セレクト ---- */
.ec-co-addrrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ec-co-addrsel { max-width: 480px; margin-bottom: 0; }
.ec-co-addradd { display: inline-block; font-size: 13px; line-height: 1.4; color: var(--ec-primary); text-decoration: none; background: #f2f4f6; border: 1px solid var(--ec-line); border-radius: 6px; padding: 8px 16px; cursor: pointer; font-family: inherit; }
.ec-co-addradd:hover { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }

/* ---- 定期便 ---- */
.ec-sub-next { font-size: 14px; margin-top: 4px; }
.ec-sub-next b { font-weight: 700; }
.ec-co-sub__head--flat { background: #f2f4f6; }
.ec-sub-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ec-sub-label { font-size: 14px; }
.ec-sub-date { font-size: 16px; font-weight: 700; }
.ec-sub-btn { background: #f2f4f6; border: 1px solid var(--ec-line); border-radius: 6px; padding: 8px 20px; font-size: 13px; color: var(--ec-ink); cursor: pointer; text-decoration: none; }
.ec-sub-btn:hover { background: var(--ec-primary); color: #fff; border-color: var(--ec-primary); }
.ec-sub-qty .ec-input { width: 80px; padding: 7px 10px; text-align: center; }
.ec-sub-swap { margin-top: 20px; border-top: 1px solid var(--ec-line); padding-top: 16px; }
.ec-sub-swap__head { font-size: 13px; color: var(--ec-primary); font-weight: 600; margin-bottom: 12px; }
.ec-sub-swap__grid { grid-template-columns: repeat(4, 1fr); }
.ec-sub-free { font-size: 11px; color: var(--ec-muted); margin-left: 4px; }
.ec-sub-history { list-style: none; margin: 4px 0 0; padding: 0; }
.ec-sub-history__item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ec-line); font-size: 13px; }
.ec-sub-history__item:last-child { border-bottom: 0; }
.ec-sub-history__date { flex: 0 0 auto; color: var(--ec-muted); white-space: nowrap; }
.ec-sub-history__body { color: var(--ec-ink); }
.ec-sub-history__diff { display: block; margin-top: 2px; color: var(--ec-muted); font-size: 12px; }
@media screen and (max-width: 767px) {
    .ec-sub-swap__grid { grid-template-columns: repeat(2, 1fr); }
    .ec-sub-history__item { flex-direction: column; gap: 2px; }
}

/* ---- 退会手続き ---- */
.ec-withdraw { text-align: center; padding: 56px 20px 60px; }
.ec-withdraw__title { font-size: 24px; font-weight: 700; color: var(--ec-ink); margin-bottom: 24px; }
.ec-withdraw__text { font-size: 15px; line-height: 2; color: var(--ec-muted); margin-bottom: 36px; }
.ec-withdraw__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ec-btn--wide { min-width: 420px; max-width: 100%; }
.ec-withdraw__primary { border-color: var(--ec-primary); color: var(--ec-primary); }
.ec-withdraw__primary:hover { background: var(--ec-primary) !important; color: #fff !important; }
.ec-withdraw__cancel { background: #f2f4f6; border-color: var(--ec-line); color: var(--ec-ink); }
.ec-withdraw__cancel:hover { background: #e9edf1; }

/* ---- 登録完了 ---- */
.ec-complete { text-align: center; padding: 64px 20px 80px; }
.ec-complete__title { font-size: 32px; font-weight: 700; color: var(--ec-ink); margin-bottom: 40px; }
.ec-complete__text { font-size: 15px; line-height: 2; color: #000; margin-bottom: 48px; }
.ec-complete__actions { display: flex; justify-content: center; }
.ec-complete__primary { border-color: var(--ec-primary); color: var(--ec-primary); border-radius: 999px; }
.ec-complete__primary:hover { background: var(--ec-primary) !important; color: #fff !important; }

@media screen and (max-width: 767px) {
    .ec-btn--wide { min-width: 0; width: 100%; }
    .ec-withdraw__text br { display: none; }
    .ec-complete__title { font-size: 24px; }
    .ec-complete__text br { display: none; }
}

/* ---- お気に入り一覧 ---- */
.ec-fav-grid { grid-template-columns: repeat(4, 1fr); margin-top: 28px; }
.ec-fav-card { position: relative; }
.ec-fav-card__link { display: block; text-decoration: none; color: var(--ec-ink); }
.ec-fav-card__del { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(120,133,144,.85); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ec-fav-card__del:hover { background: #e0492f; }
/* お気に入りボタン(商品詳細) 登録済み状態 */
.ec-buy__fav.is-on { background: #fdeef1; border-color: #e7a6b6; color: #d63b63; }

/* ---- パスワード再発行 ---- */
.ec-pw-lead { font-size: 15px; line-height: 1.9; color: var(--ec-ink); margin: 28px 0 24px; }
.ec-pw-sent { padding: 40px 0 30px; }
.ec-pw-sent__title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 24px; }
.ec-pw-sent__text { font-size: 15px; line-height: 2; color: var(--ec-muted); max-width: 760px; margin: 0 auto; }

/* =========================================================
   クーポン（ご注文手続きのサイドバー）
   ========================================================= */
.ec-coupon { background: #fff; border: 1px solid var(--ec-line); border-radius: 10px; padding: 16px; margin-bottom: 18px; }
.ec-coupon__head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ec-primary-dark); margin: 0 0 10px; }
.ec-coupon__row { display: flex; gap: 8px; }
.ec-coupon__input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #cdd5dd; border-radius: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.ec-coupon__apply { flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--ec-primary); border-radius: 6px; background: #fff; color: var(--ec-primary-dark); font-size: 13px; font-weight: 600; cursor: pointer; }
.ec-coupon__apply:hover { background: var(--ec-primary); color: #fff; }
.ec-coupon__note { font-size: 11px; color: var(--ec-muted); margin: 8px 0 0; line-height: 1.7; }
.ec-coupon__error { margin: 8px 0 0; padding: 8px 10px; background: #fdecef; border: 1px solid #f5c2ce; border-radius: 6px; color: #c02a4b; font-size: 12px; }
.ec-coupon--applied { background: #f0faf4; border-color: #b7e2c7; }
.ec-coupon__applied { display: flex; align-items: flex-start; gap: 10px; }
.ec-coupon__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #1e7d47; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.ec-coupon__body { flex: 1; min-width: 0; }
.ec-coupon__code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 700; color: #1e7d47; letter-spacing: .04em; }
.ec-coupon__name { font-size: 12px; color: #3f6b52; margin: 2px 0 0; }
.ec-coupon__amount { font-size: 13px; font-weight: 700; color: #c02a4b; margin: 6px 0 0; }
.ec-coupon__remove { background: none; border: 0; padding: 0; color: var(--ec-muted); font-size: 11px; text-decoration: underline; cursor: pointer; margin-top: 6px; }

/* 集計欄の割引行 */
.ec-sum dt.is-discount, .ec-sum dd.is-discount { color: #c02a4b; font-weight: 600; }
.ec-sum dt.is-discount small { display: block; font-weight: 400; font-size: 11px; }

/* 明細のクーポン対象バッジ */
.ec-co-item__tag { display: inline-block; margin-top: 6px; background: #eaf5fb; color: var(--ec-primary-dark); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }

/* クーポン：適用中の一覧（併用対応） */
.ec-coupon__item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; margin-bottom: 8px; border-radius: 8px; }
.ec-coupon__item.is-applied { background: #f0faf4; border: 1px solid #b7e2c7; }
.ec-coupon__item.is-skipped { background: #f4f6f8; border: 1px solid var(--ec-line); }
.ec-coupon__item .ec-coupon__body { flex: 1; min-width: 0; }
.ec-coupon__item.is-skipped .ec-coupon__code { color: var(--ec-muted); }
.ec-coupon__skip { font-size: 11px; color: var(--ec-muted); margin: 4px 0 0; line-height: 1.6; }
.ec-coupon__item .ec-coupon__remove { flex: 0 0 auto; margin-top: 2px; }
.ec-sum dd small { display: block; font-size: 11px; color: var(--ec-muted); }

/* ============================================================
 * ブログ（/blogs 一覧・/blogs/{slug} 記事詳細）
 * ============================================================ */
.blog-list__heading { font-family: "Shippori Mincho B1", serif; font-size: 22px; font-weight: 600; margin-bottom: 24px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.blog-card { display: block; text-decoration: none; color: var(--ec-ink); }
.blog-card__thumb { aspect-ratio: 1200 / 630; overflow: hidden; background: #f3f5f7; border-radius: 6px; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.03); }
.blog-card__body { padding: 14px 2px 0; }
.blog-card__title { font-size: 16px; font-weight: 600; line-height: 1.6; margin-top: 6px; }
.blog-card:hover .blog-card__title { color: var(--ec-primary-dark); }
.blog-card__excerpt { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ec-muted); }

.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--ec-muted); }
.blog-meta__cat { display: inline-block; padding: 2px 10px; border: 1px solid var(--ec-primary); border-radius: 999px; color: var(--ec-primary-dark); font-size: 12px; line-height: 1.6; text-decoration: none; }
a.blog-meta__cat:hover { background: var(--ec-primary); color: #fff; }

.blog-article-main { min-width: 0; max-width: 860px; }
@media screen and (max-width: 900px) {
    .blog-detail .ec-list__side { order: 1; }
}
.blog-preview-note { margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background: #fff7e0; border: 1px solid #f3d27a; color: #7a5a00; font-size: 14px; }
.blog-article__head { padding-bottom: 20px; border-bottom: 1px solid var(--ec-line); margin-bottom: 28px; }
.blog-article__title { margin-top: 12px; font-family: "Shippori Mincho B1", serif; font-size: 28px; font-weight: 600; line-height: 1.6; }

/* 本文（Tiptap エディタの出力） */
.blog-body { font-size: 16px; line-height: 2; color: var(--ec-ink); word-break: break-word; }
.blog-body > * + * { margin-top: 1.2em; }
.blog-body h2 { margin-top: 2.4em; padding: 10px 0 10px 16px; border-left: 4px solid var(--ec-primary); background: var(--ec-bg); font-size: 22px; font-weight: 700; line-height: 1.6; }
.blog-body h3 { margin-top: 2em; padding-bottom: 8px; border-bottom: 1px solid var(--ec-line); font-size: 19px; font-weight: 700; line-height: 1.6; }
.blog-body h4 { margin-top: 1.8em; font-size: 17px; font-weight: 700; line-height: 1.6; }
.blog-body a { color: var(--ec-primary-dark); text-decoration: underline; }
.blog-body strong, .blog-body b { font-weight: 700; }
.blog-body em, .blog-body i { font-style: italic; }
.blog-body u { text-decoration: underline; }
.blog-body s { text-decoration: line-through; }
.blog-body ul, .blog-body ol { padding-left: 1.6em; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body li { list-style: inherit; }
.blog-body li + li { margin-top: .3em; }
.blog-body li > p { margin: 0; }
.blog-body blockquote { margin-left: 0; margin-right: 0; padding: 12px 20px; border-left: 4px solid #cfd8df; background: var(--ec-bg); color: #555; }
.blog-body blockquote > * + * { margin-top: .8em; }
.blog-body pre { padding: 16px; border-radius: 6px; background: #1f2933; color: #f5f7fa; font-size: 14px; line-height: 1.7; overflow-x: auto; }
.blog-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.blog-body :not(pre) > code { padding: 1px 6px; border-radius: 4px; background: #eef2f5; }
.blog-body hr { border: none; border-top: 1px solid var(--ec-line); margin: 2.4em 0; }
.blog-body img { max-width: 600px; width: 100%; height: auto; border-radius: 6px; margin: 0 auto; text-align: center; display: flex; }

.blog-back { margin-top: 48px; }
.blog-back .l-btn-02 { max-width: 360px; margin: 0 auto; }
.blog-recent { margin-top: 64px; }
.blog-recent__title { font-family: "Shippori Mincho B1", serif; font-size: 20px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid #ccc; margin-bottom: 24px; }
.blog-recent .blog-card__title { font-size: 14px; }

@media screen and (max-width: 767px) {
    .blog-grid, .blog-grid--3 { grid-template-columns: 1fr; gap: 28px; }
    .blog-article__title { font-size: 22px; }
    .blog-body { font-size: 15px; }
    .blog-body h2 { font-size: 19px; }
    .blog-body h3 { font-size: 17px; }
}
.award-03 { max-width: 227px; margin: 0 auto; }
@media screen and (max-width: 700px) {
    .c-top-sec09-ul-02 li {
        width: 240px;
        margin: 0 auto 20px;
    }
    .c-top-sec09-ul-02 li p {
        height: auto;
    }
}
@media screen and (max-height: 730px) {
    .c-top-main-catch-title {
        font-size: 28px;
    }
    .column {
        padding-left: 60px;
    }

    .outside-left {
        padding-top: 100px;
    }
    .c-mainv-bottom {
        bottom: 60px;
    }
}

@media screen and (max-height: 640px) {
    .outside-left {
        padding-top: 50px;
    }
    .c-mainv-bottom {
        bottom: 50px;
    }
}
.underline { border-bottom: solid 1px #ea5e79; }
.gothick { font-family: "Noto Sans JP", sans-serif; }