/* =========================================================
   common.css（全ページ共通） 
   - Reset（Eric Meyer）
   - ベースレイアウト
   - ヘッダー / フッター / ナビ 共通
   ========================================================= */


/* ------------------------------ reset css */

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    overflow-x: hidden;   /* 横スクロール防止は OK */
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================
   ベース
========================= */
:root {
    --pnk: #E36B71;
    --pnk-light: #fff7f8;
    --border-soft: #f0d4d7;
    --text-main: #333333;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ☑モバイルファースト(一般スマホベース) */
body {
  font-family: "Times New Roman", "Lusitana", 'Yu Mincho', "メイリオ", serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #fff7f8;
  color: #333;  
  line-height: 1.4;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
}

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

a:hover {
    opacity: 0.85;
}

/* 共通ラッパー */
.page-main {
    max-width: 1040px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

/* 見出し */
h1,
h2,
h3 {
    margin: 0 0 16px;
    font-weight: 500;
}

/* =========================
   ヘッダー・フッター
========================= */

.site-header {
    position: fixed;                 /* ← sticky から fixed に変更 */
    top: 0;
    left: 0;
    right: 0;                        /* 横幅いっぱいに固定 */
    z-index: 100;                    /* 他パーツより前に出す */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(240, 212, 215, 0.7);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.site-header__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ロゴまわり */
.site-logo a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 45px;
}

.logo-mark {
    font-size: 18px;
}

.logo-text {
    font-size: 14px;
}

/* ナビゲーション */
.site-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.nav-icon {
    font-size: 15px;
    line-height: 1;
}

.nav-label {
    letter-spacing: 0.06em;
}

/* ホバー */
.nav-item:hover {
    background: #fff5f6;
    border-color: #f0d4d7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* アクティブページ */
.nav-item.is-active {
    color: inherit;
    box-shadow: none;
}

/* フッター */
.site-footer {
    border-top: 1px solid rgba(240, 212, 215, 0.8);
    padding: 16px;
    text-align: center;
    font-size: 11px;
    background-color: #ffffff;
}

/* スマホ調整（旧ベース） */
@media (max-width: 767px) {
    .site-header__inner {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .site-nav {
        gap: 6px;
        font-size: 12px;
    }

    .nav-item {
        padding: 5px 10px;
    }

    .nav-label {
        letter-spacing: 0.04em;
    }
}


/* =========================
   ボタン・リンク
========================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #e68b90, #e36b71);
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(227, 107, 113, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(227, 107, 113, 0.4);
}

/* パスワード表示ボタン専用 */
#togglePassword{
  background: #777;
  color: #fff;
  box-shadow: none;
}

.link-back {
    display: inline-block;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px; /* ← アンダーラインを下に離す */
    text-decoration-thickness: 0.5px; /* おしゃれに細く */    
    margin-top: 12px;
}


/* =========================
   TOP
========================= */

.hero {
    text-align: center;
    padding: 48px 24px 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.hero h2 {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.8;
}

.hero p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.9;
}


/* =========================
   商品一覧
========================= */

.page-main > h2 {
    font-size: 18px;
    letter-spacing: 0.12em;
    text-align: center;
    margin-bottom: 12px;
}

.product-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    max-width: 1040px;
}

.product-item {
    background-color: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    max-width: 320px;
    width: 100%;
    margin: 0;
}

.product-item a {
    display: block;
    padding: 12px 12px 14px;
}

.product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.08);
}

.product-thumb {
    width: 100%;
    padding-top: 66%;
    position: relative;
    margin-bottom: 10px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffeef1, #fbe3e6);
}

.product-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info h3 {
    font-size: 15px;
    margin-bottom: 4px;
}

.product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--pnk);
}


/* =========================
   商品詳細
========================= */

.product-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

.product-detail__img {
    flex: 0 0 250px;   /* 画像の幅：好みで 280〜360 に調整OK */
    max-width: 250px;  /* ←ここが重要：100%にしない */
    align-self: flex-start;
}


.product-detail__img img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07);
}

.product-detail__info {
    flex: 1;
    min-width: 260px;
}

.product-detail__price {
    font-size: 24px;
    font-weight: 700;
    color: var(--pnk);
    margin-bottom: 12px;
}

.product-detail__desc {
    margin-bottom: 16px;
    line-height: 1.8;
    font-size: 14px;
    white-space: pre-line;
}

.product-detail__form {
    margin-bottom: 20px;
}

/* ※数量バリデーションは HTML 側で
   min="1" max="999" step="1" を指定してね */
.product-detail__form input[type="number"] {
    width: 72px;
    padding: 4px 6px;
    margin-left: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
}

.product-detail__form button {
    margin-left: 20px;
}


/* =========================
   カート
========================= */

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 18px;
    overflow: hidden;
}

.cart-table th,
.cart-table td {
    padding: 10px 10px;
    font-size: 14px;
    border-bottom: 1px solid #f5dde1;
}

/* 行の縦中央揃え */
.cart-table th,
.cart-table td {
    vertical-align: center;
}

.cart-table th {
    background: linear-gradient(90deg, #ffeef1, #fbe3e6);
    text-align: left;
    font-weight: 500;
}

.cart-table tr:last-child td {
    border-bottom: none;
}

.cart-total {
    text-align: right;
    font-weight: 700;
    margin-top: 8px;
}

.btn--ghost {
    margin-top: 20px;
    padding: 12px 28px;
    font-size: 15px;
}

/* 1列目（商品名）は左寄せ */
.cart-table th:nth-child(1),
.cart-table td:nth-child(1) {
    text-align: center;
}

/* 2〜5列目（数量・単価・小計・削除）は中央寄せ */
.cart-table th:nth-child(2),
.cart-table th:nth-child(3),
.cart-table th:nth-child(4),
.cart-table th:nth-child(5) {
    text-align: center;
}

.cart-table td:nth-child(2),
.cart-table td:nth-child(3),
.cart-table td:nth-child(4),
.cart-table td:nth-child(5) {
    text-align: right;
}


/* 削除ボタン共通スタイル（PC・スマホ） */
.cart-table td:last-child button,
.cart-table td:last-child input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 1;           /* 上下のズレ防止 */
    border-radius: 999px;
    white-space: nowrap;
}


/* =========================
   チェックアウト
========================= */

.checkout-form {
    margin-top: 0px;
}

.form-row {
    margin-bottom: 16px;
}

.form-row label {
    display: block;
    font-size: 14px;
}

/* ★テキスト・メール・パスワード・テキストエリアを同じ形に */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row textarea {
    width: 100%;
    padding: 9px 10px;
    margin-top: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background-color: #fff;
    font-size: 14px;
}

.form-row textarea {
    resize: vertical;
    min-height: 80px;
}

/* ★ログイン／チェックアウト用の入力欄を統一（メールアドレスの見た目に合わせる） */
.checkout-form input[type="email"],
.checkout-form input[type="password"] {
    width: 100%;
    padding: 9px 10px;
    margin-top: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background-color: #fff;
    font-size: 14px;
}

.required {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: var(--pnk);
    color: #fff;
    font-size: 11px;
}

/* エラー表示 */
.error-messages {
    background-color: #ffeef1;
    border-left: 4px solid var(--pnk);
    padding: 8px 12px;
    margin-bottom: 16px;
    list-style: none;
    font-size: 13px;
}


/* ログイン画面：新規登録・パスワード再発行リンク */
.login-extra {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #f0d4d7;
    text-align: center;
    font-size: 14px;
    line-height: 1.9;
}

/* 各リンクを余白つきブロック化して読みやすく */
.login-extra__link {
    display: block;
    margin-bottom: 10px;   /* ← ここでゆとり */
    color: #666;
}

.login-extra__link:last-child {
    margin-bottom: 0;       /* 最後だけ余白なし */
}

.login-extra__link:hover {
    color: #E36B71;
    opacity: 0.9;
}

/* 2行目（パスワード忘れ）は控えめスタイル */
.login-extra__link--sub {
    font-size: 14px;
    color: #666;
}


/* =========================
   ログイン：パスワード表示/非表示トグル用（追加）
========================= */

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

.password-wrap input[type="password"],
.password-wrap input[type="text"] {
    flex: 1;
    min-width: 0;
}


/* =========================
   レスポンシブ（ヘッダーなど）
========================= */

/* スマホ時のヘッダー修正版 */
@media (max-width: 767px) {

    .site-header__inner {
        max-width: 100%;
        padding: 6px 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .site-logo a {
        font-size: 26px;
        gap: 4px;
    }

    .logo-mark {
        font-size: 16px;
    }

    .logo-text {
        font-size: 11px;
    }

    .site-nav {
        gap: 4px;
        font-size: 11px;
    }

    .nav-item {
        padding: 4px 8px;
    }

    .nav-label {
        letter-spacing: 0.04em;
    }

    .page-main {
        margin: 28px auto 60px;
        padding: 0 14px;
    }

    .hero {
        padding: 32px 18px 26px;
    }

    .product-detail {
        flex-direction: column;
    }

    .product-detail__img {
        flex: 0 0 auto;
    }
}


.product-result-meta {
    font-size: 16px;
    color: #777;
    margin-bottom: 10px;
}


/* =========================
   共通ページヘッダー・パンくず
========================= */

.breadcrumb {
    display: none;
}

.breadcrumb a {
    text-decoration: underline;
}

.page-main {
    padding-top: 40px;  /* 好きな余白量に調整（20〜60pxくらいでお好み） */
}

.page-header {
    margin-bottom: 26px;
}

.page-header__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 4px;
}

.page-header__title {
    font-size: 20px;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

.page-header__lead {
    font-size: 15px;
    color: #666;
}


/* 空状態カード */
.empty-state {
    padding: 32px 20px;
    text-align: center;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
    font-size: 14px;
}

.empty-state p + p {
    margin-top: 16px;
}


/* =========================
   カートまわり共通
========================= */

.cart-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.btn--ghost {
    background: transparent;
    color: #555;
    box-shadow: none;
    border: 1px solid #e1cfd2;
}

.btn--ghost:hover {
    background: #ffffff;
}


/* =========================
   チェックアウトレイアウト
========================= */

/* PC・タブレット：左右2カラムのGridで高さをそろえる */
.checkout-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);  /* 左固定 / 右は残り全部 */
    gap: 28px;
}

/* 左：ご注文内容 / 右：お客様情報 共通のカード */
.checkout-cart,
.checkout-form {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 18px 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

/* 見出しの余白そろえ */
.checkout-cart h3,
.checkout-form h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

/* ご注文内容側：テーブル＋合計金額 */
.checkout-cart .cart-table {
    margin-top: 6px;
    margin-bottom: 10px;
}

/* 合計金額はテーブルのすぐ下に */
.checkout-cart .cart-total {
    margin-top: 12px;
}

/* 小計列はflexにしない（削除列だけflexにしたいので上書き） */
.checkout-cart .cart-table td:last-child {
    display: table-cell;
    align-items: initial;
    justify-content: initial;
}

/* お客様情報側：フォームをカードいっぱいに */
.checkout-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ログインは .form-row の margin-bottom で余白を取る（gap二重回避） */
.checkout-form--login form {
    gap: 0;
}

/* 一番下のボタンの行をカードの下側に寄せるイメージ */
.checkout-form .form-row:last-of-type {
    margin-top: auto;
}

/* ログイン用フォームのベース（PC・タブレット） */
.checkout-form--login {
    width: 100%;        /* ★ 横幅いっぱい */
    max-width: none;    /* ★ 640px 制限を解除 */
    margin: 0 auto;
    grid-column: 1 / -1;   /* 🔹 2カラム分ぜんぶをまたぐ */
    justify-self: center;  /* 🔹 グリッド内で中央寄せ */
}


/* =========================
   マイページ レイアウト
========================= */

.mypage-layout {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.mypage-sidebar {
    flex: 0 0 260px;
    max-width: 100%;
}

.mypage-main {
    flex: 1;
    min-width: 260px;
}

/* カード共通 */

.mypage-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 18px 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
    margin-bottom: 18px;
}

.mypage-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mypage-card__icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #fff0f2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mypage-card h3 {
    font-size: 15px;
    letter-spacing: 0.08em;
    margin: 0;
}

.mypage-meta {
    font-size: 13px;
    color: #777;
    line-height: 1.8;
}

/* 左メニュー用（ベース） */

.mypage-card--menu {
    padding-top: 20px;
}

.mypage-menu {
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

.mypage-menu li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 4px;
}

.mypage-menu li::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    color: #E36B71;
}

/* バッジ */

.mypage-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ffeef1;
    color: #E36B71;
    font-size: 11px;
    margin-left: auto;
}


/* =========================
   マイページ：最近のご注文カード
========================= */

.mypage-card--recent {
    position: relative;
}

.recent-order {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
}

.recent-order__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.recent-order__label {
    color: #999;
}

.recent-order__value {
    font-weight: 500;
}

.recent-order__value--total {
    color: var(--pnk);
    font-size: 16px;
}

.recent-order__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* 既存の .order-status-badge を流用しつつ微調整してもOK */
.recent-order__detail {
    font-size: 13px;
    padding: 6px 16px;
}

.recent-order__all {
    margin-left: auto;
    font-size: 13px;
    text-decoration: underline;
    color: #777;
}


/* =========================
   スマホ調整（レイアウト共通）
========================= */

@media (max-width: 767px) {

    /* チェックアウト：1カラム縦並びに */
    .checkout-layout {
        display: block;
    }

    .checkout-cart,
    .checkout-form {
        margin-bottom: 20px;
        max-width: 100%;
    }

    .checkout-form--login {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    .mypage-layout {
        flex-direction: column;
    }

    .cart-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 24px;
    }

    .cart-actions .btn,
    .cart-actions .btn--ghost{
      height: 42px;            /* 好みで 44〜52 */
      padding: 0 22px;         /* 縦paddingは消す */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;          /* 文字の上下ズレ防止 */
      white-space: nowrap;     /* 2行になって高さが変わるのを防ぐ */
    }

    .mypage-sidebar {
        flex: 0 0 auto;
    }
}


/* カテゴリタブ＋検索 */
.product-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.product-filters__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-filters__cat {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e1cfd2;
    font-size: 14px;
    background-color: #fff;
}

.product-filters__cat.is-active {
    background-color: #E36B71;
    color: #fff;
    border-color: #E36B71;
}

.product-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-search input[type="text"] {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e1cfd2;
    font-size: 12px;
    min-width: 180px;
}

.product-search button {
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background-color: #555;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .product-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .product-search {
        justify-content: flex-end;
    }
}


/* =========================================================
   ▼ マイページサイドメニューのリッチ化（上書き）
   ========================================================= */

.mypage-card--menu {
    padding-top: 16px;
}

.mypage-card__header {
    margin-bottom: 10px;
}

.mypage-card__icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
}

/* リスト項目をカード風にする */
.mypage-menu {
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mypage-menu li {
    padding: 0;
    margin: 0;
}

/* 先頭の「・」を消す */
.mypage-menu li::before {
    content: none;
}

/* 各リンクをふんわりカードに */
.mypage-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid #f0d4d7;
    background: #fffdfd;
    font-size: 13px;
    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.mypage-menu a:hover {
    background: #fff5f6;
    border-color: #E36B71;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

/* アクティブメニュー */
.mypage-menu a.is-active {
    background: #E36B71;
    border-color: #E36B71;
    color: #fff;
    box-shadow: 0 8px 22px rgba(227, 107, 113, 0.35);
}

/* バッジを右側でアクセントに */
.mypage-menu a .mypage-badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* スマホ調整：少しコンパクトに */
@media (max-width: 767px) {
    .mypage-card--menu {
        padding: 16px 14px 18px;
    }

    .mypage-menu a {
        padding: 7px 10px;
        font-size: 12px;
    }
}


/* =========================
   ハンバーガーメニュー（スマホ用）
========================= */

.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 6px;
    cursor: pointer;
}

.nav-toggle__line {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #444;
    margin: 3px 0;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

/* 開いたときのアニメーション */
.nav-toggle.is-open .nav-toggle__line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__line:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-open .nav-toggle__line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}


/* =========================
   スマホ時のメニュー挙動
========================= */

@media (max-width: 767px) {

    .site-header__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        gap: 12px;
    }

    .nav-toggle {
        display: block;
        position: relative;
        z-index: 210;
    }

    /* フルスクリーン背景のスマホメニュー */
    .site-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        padding: 90px 24px 32px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        gap: 18px;
        z-index: 200;
        overflow-y: auto;
    }

    .site-nav.is-open {
        display: flex;
        animation: fadeDown 0.25s ease-out;
    }

    @keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 18px;
        font-size: 15px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #f2d6d9;
        box-shadow: 0 4px 10px rgba(227, 107, 113, 0.05);
        width: 100%;
        justify-content: flex-start;
    }

    .nav-item:hover {
        background: #fff5f6;
    }

    .nav-icon {
        font-size: 18px;
        margin-top: 2px;
    }
}


/* =========================
   スマホ時の商品の横幅調整
========================= */
@media (max-width: 767px) {

  .product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;               /* 22pxだと窮屈なのでスマホだけ少し詰める */
    justify-items: stretch;
  }

  .product-item {
    max-width: none;
    width: 100%;
    margin: 0;
  }
}


/* =========================
   カートのスマホ表示調整（修正版）
========================= */
@media (max-width: 767px) {

  .cart-table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px; /* ← 全列共通。ここだけ */
  }

  .cart-table th,
  .cart-table td {
    padding: 8px 6px;
    vertical-align: middle;
  }

  /* 商品名：改行OK、幅を最大限使う */
  .cart-table th:nth-child(1),
  .cart-table td:nth-child(1) {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 数量 */
  .cart-table th:nth-child(2),
  .cart-table td:nth-child(2) {
    width: 44px;
    text-align: center;
    white-space: nowrap;
  }

  /* 単価 */
  .cart-table th:nth-child(3),
  .cart-table td:nth-child(3) {
    width: 72px;
    text-align: center;
    white-space: nowrap;
  }

  /* 小計 */
  .cart-table th:nth-child(4),
  .cart-table td:nth-child(4) {
    width: 72px;
    text-align: center;
    white-space: nowrap;
  }

  /* 削除 */
  .cart-table th:nth-child(5),
  .cart-table td:nth-child(5) {
    width: 62px;
    text-align: center;
    white-space: nowrap;
  }

  /* 削除列は table-cell に戻す */
  .cart-table td:last-child {
    display: table-cell;
  }

  .cart-table td:last-child button,
  .cart-table td:last-child input[type="submit"] {
    height: 28px;
    padding: 0 10px;
    font-size: 12px; /* ← ここも統一 */
  }

  .cart-total {
    text-align: right;
    padding-right: 12px;   /* ← cart-table td の padding と合わせる */
    margin-top: 10px;
  }  
}


/* ============================================
   ボタンの高さを PC・スマホ全体で統一
============================================ */

.btn,
.btn--ghost {
    padding: 12px 22px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 999px;
}

.btn--ghost {
    border: 1px solid #e1cfd2;
    background: #fff;
    box-shadow: none;
}


/* ============================================
   背景の高さ調整（お客様情報表示用）
============================================ */

.customer-info {
    margin-top: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.9;
}

.customer-info-row {
    display: grid;
    grid-template-columns: 8em 1fr; /* ラベル幅 / 値 */
    gap: 12px;
    margin-bottom: 6px;
}

.customer-info-label {
    position: relative;
    padding-right: 0.4em;
}

.customer-info-label::after {
    content: "：";
    position: absolute;
    right: 0;
}

.customer-info-value {
    flex: 1;
    color: var(--text-main);
    word-break: break-all;
}


/* ============================================
   マイページ：アカウント情報の表示
============================================ */

.account-info-list {
    font-size: 16px;
    line-height: 1.8;
}

/* 1行を「ラベル＋値」のflexにして、狭いときは折り返しOKに */
.account-info-list p {
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;       /* 幅が足りないときに下に折り返す */
    align-items: baseline;
}

.account-label {
    flex: 0 0 auto;
    min-width: auto;      /* いままでのラベル幅をキープ */
    white-space: nowrap;
    margin-right: 8px;
    color: #777;
}

/* メールアドレスなど長い文字列の部分 */
.account-value {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;       /* 念のためnowrapを打ち消し */
    word-break: break-all;     /* 長い英数字の途中でも改行可 */
    overflow-wrap: anywhere;   /* どこでも改行OKに */
}

/* 備考テキスト */
.account-note {
    margin-top: 16px;
    font-size: 14px;
    color: #777;
}


/* =========================
   同意チェックエリア
========================= */

.agree-row {
    margin-top: 10px;
}

.agree-label {
    font-size: 15px;
    line-height: 1.8;
    display: block;
}

.agree-check {
    margin-right: 6px;
    transform: translateY(1px);
}

.agree-link {
    text-decoration: underline;
    color: #555;
    transition: color 0.2s ease;
}

.agree-link:hover {
    color: var(--pnk); /* #E36B71 */
}


/* =========================
   上部エラーメッセージ（登録画面など）
========================= */

.form-errors {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffeef1; /* 優しいピンク */
    border-left: 4px solid var(--pnk);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.form-errors__icon {
    background: var(--pnk);
    color: #fff;
    font-weight: 700;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 2px;
}

.form-errors__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-errors__list li {
    color: #c74a50; /* 赤字 */
    font-size: 15px;
    line-height: 1.9; /* 行間を広く */
}


/* =========================
   送料無料案内
========================= */

.shipping-banner{
  margin: 6px 0 14px;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px;
  color: #777;
}

.shipping-banner strong{
  color: #E36B71;
  font-weight: 500;
}

.shipping-banner .sub{
  font-size: 14px;
  color: #999;
  margin-top: 6px;
}

/* =========================
   ポイントUI（左寄せ／超過ピンク）
========================= */
.point-row{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* 既存 .point-input (width:100%) を上書き */
.point-input{
  width: 4.5ch !important;
  flex: none !important;
  max-width: none;
  box-sizing: content-box;
  text-align: right;

  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  font-size: 14px;
  background: #fff;
}

.point-unit{
  font-size: 14px;
  color: #888;
  white-space: nowrap;
}

.point-input.is-over{
  color:#E36B71;
  border-color:#E36B71;
}
.point-input.is-over + .point-unit{
  color:#E36B71;
}

.point-error{
  margin-top: 8px;
  font-size: 13px;
  color: #E36B71;
  line-height: 1.6;
  display: none;
}
.point-error.is-show{
  display: block;
}

/* =========================
   左の表：割引/送料の行
========================= */
tr.point-discount-row td{
  color:#E36B71;
  font-size: 13px;
  padding-top: 10px;
}
tr.point-discount-row td:nth-child(2){
  color: transparent;
}

tr.shipping-row td{
  font-size: 13px;
  padding-top: 10px;
  color: #555;
}
tr.shipping-row td:nth-child(2){
  color: transparent;
}

.shipping-note{
  margin-top: 30px;
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}
.shipping-note strong{
  color:#E36B71;
  font-weight: 700;
}


/* =========================
   admin管理画面
========================= */
.admin-main {
  width: 100%;
  margin: 40px auto 60px;
  padding: 0 20px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-header h1 {
  font-size: 18px;
  letter-spacing: 0.12em;
}

.admin-links a {
  font-size: 12px;
  text-decoration: underline;
  margin-left: 8px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1dde1;
  font-size: 13px;
  vertical-align: top;
}

.admin-table th {
  background: linear-gradient(90deg,#ffeef1,#fbe3e6);
  text-align: left;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-badge-id {
  font-size: 11px;
  color: #777;
}

/* =========================================
   ★追加：注文日時・注文IDの列幅を狭める
   （ここに入れるのが正解）
========================================= */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
  width: 90px;          /* 110〜140で調整 */
  max-width: 90px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.35;
}

.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
  width: 100px;          /* 130〜160で調整 */
  max-width: 100px;
  white-space: normal;
  word-break: break-all;
  font-size: 12px;
  line-height: 1.35;
}

.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
  width: 200px;          /* 110〜140で調整 */
  max-width:200px;
  white-space: normal;
  font-size: 12px;
  line-height: 1.35;
}

.admin-empty {
  padding: 20px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
  text-align: center;
  font-size: 14px;
}

.status-pill {
  display: inline-block;
  min-width: 4em;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-align: center;
  background: #fff0f2;
  color: #e36b71;
}


/* =========================
   admin：フィルターUI（ベースに合わせてカード化）
========================= */
.admin-filter {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
  border: 1px solid rgba(240, 212, 215, 0.55);
  padding: 14px 16px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

/* 年/月の並び（ラベルを右側に見せる） */
.admin-filter__group{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ラベルを右へ */
.admin-filter__label{
  order: 2;
  font-size: 12px;
  color:#777;
  letter-spacing:0.08em;
  white-space: nowrap;
}

/* selectを左へ */
.admin-filter__select{
  order: 1;
  min-width: 180px; /* PCは少し広めで上品に */
}

/* selectの基本スタイル（クラスあり/なし両対応） */
.admin-filter select,
.admin-filter__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #f0d4d7;
  background: linear-gradient(180deg, #ffffff, #fff8f9);
  font-size: 13px;
  line-height: 1.2;
}

/* 既存 .btn を使う前提で、絞り込みボタンの背景を上品に */
.admin-filter .btn,
.admin-filter__btn{
  padding: 10px 18px;
  font-size: 13px;
}

/* 絞り込みボタン：ふわっと上品に */
.admin-filter__btn,
.admin-filter .btn.admin-filter__btn{
  background: linear-gradient(135deg, #ee9aa0, #E36B71);
  box-shadow: 0 12px 30px rgba(227, 107, 113, 0.28);
  border: none;
}

.admin-filter__btn:hover,
.admin-filter .btn.admin-filter__btn:hover{
  box-shadow: 0 16px 40px rgba(227, 107, 113, 0.34);
}

/* フィルター解除：ゴーストボタン化（下線をやめる） */
.admin-filter__clear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 212, 215, 0.9);
  background: #fff;
  color: #777;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}

.admin-filter__clear:hover{
  transform: translateY(-1px);
  border-color: rgba(227,107,113,0.45);
  color: #E36B71;
  box-shadow: 0 14px 34px rgba(227,107,113,0.12);
}

/* 万一、解除リンクにクラスが付いていない場合の保険（admin-filter内のリンク全体） */
.admin-filter a{
  font-size: 12px;
  color: #777;
}

/* =========================
   admin：合計サマリー（カードで揃える）
========================= */
.admin-summary {
  margin-top: 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.05);
  border: 1px solid rgba(240, 212, 215, 0.55);
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 13px;
}

.admin-summary > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, #fff7f8, #fff);
  border: 1px solid rgba(240, 212, 215, 0.6);
}

.admin-summary .label {
  color: #777;
  letter-spacing: 0.06em;
  font-size: 12px;
}

.admin-summary strong {
  color: #E36B71;
  font-size: 16px;
  letter-spacing: 0.02em;
}


/* =========================
   スマホでは「住所」「商品代金」「送料」「合計金額」「決済方法」を非表示
========================= */
@media (max-width:767px){

  .admin-table th:nth-child(4),
  .admin-table td:nth-child(4),

  .admin-table th:nth-child(5),
  .admin-table td:nth-child(5),

  .admin-table th:nth-child(6),
  .admin-table td:nth-child(6),

  .admin-table th:nth-child(7),
  .admin-table td:nth-child(7),

  .admin-table th:nth-child(9),
  .admin-table td:nth-child(9) {
    display: none;
  }

  /* スマホ時はフィルターの横幅を少しコンパクトに */
  .admin-filter__select{
    min-width: 120px;
  }

  /* サマリーは右寄せより見やすく左寄せに */
  .admin-summary {
    justify-content: flex-start;
  }
}


/* =========================
   CSV出力：アイコン付きボタン
========================= */

/* CSV出力アイコン（サイズ固定） */
.admin-filter__csv-icon{
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  object-fit: contain;
  display: block;
}

/* CSVボタン自体：topでずらさず、中央揃えで解決 */
.admin-filter__csv{
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 6〜10pxで好み調整 */
  line-height: 1;
}


/* =========================
   SHOP FOOTER（完成版）
========================= */
.shop-footer {
  background-color: #E36B71; /* ピンク帯 */
  height: 40px;
  display: flex;
  align-items: center;
}

/* 中央コピーライト */
.shop-footer__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コピーライト */
.shop-footer__copyright {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  margin: 0;
}

/* =========================
   ▲ トップへ戻る（赤帯の上）
========================= */
.shop-footer__totop {
  position: fixed;           /* ← footer から切り離す */
  right: 16px;
  bottom: 52px;              /* ← 赤帯の“上”に浮かせる */
  z-index: 1000;             /* ← 必ず最前面 */
  background-color: #E36B71; /* 赤と同色で一体感 */
  border: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
  border-radius: 2px;        /* 角を少しだけ */
}

.shop-footer__totop:hover {
  opacity: 0.85;
}

/* =========================
   既存 toTop の重複防止
========================= */
.site-footer .totop,
.site-footer .page-top,
.site-footer .back-to-top {
  display: none !important;
}