@charset "UTF-8";
/* ============================================================
   DOLL GARDEN リニューアル用デザインCSS

   旧サイト (EC-ORANGE / user_data/css/common.css 2,384行) の
   世界観をEC-CUBE4で再現するための土台です。

   【方針: B案】
   ・バナー・見出し・背景テクスチャなど「世界観」を担う画像は
     旧サイトのものをそのまま流用します。
   ・カテゴリリンク・電話番号・ナビなど「機能」を担う部分は
     テキスト化してスマホで潰れないようにします。

   【旧サイトの実測値】
   ・全体幅   980px (中身 960px)
   ・メイン   760px / 右サイド 183px の2カラム
   ・本文     メイリオ 12px / 行間 1.5 / 文字色 #555
   ・背景     bg_body.png のリピート (リネン地テクスチャ)

   旧サイトはメディアクエリが0件で、スマホ非対応でした。
   ここでは同じ見た目をPCで保ちつつ、スマホで組み替えます。
   ============================================================ */

:root {
    /* --- 配色 (旧 common.css の使用頻度順に採用) --- */
    --dg-beige:        #e3c9b5;  /* 最頻出。枠線・見出し帯の地色 */
    --dg-brown:        #59493f;  /* 見出し・強調文字の焦げ茶 */
    --dg-beige-dark:   #d3bda7;  /* 罫線・境界 */
    --dg-beige-light:  #efdfd0;  /* ボタン地・薄い背景 */
    --dg-cream:        #fff6ee;  /* ボックスの地 */
    --dg-text:         #555;     /* 本文。旧サイトは真っ黒を使わない */
    --dg-text-sub:     #7d7d7d;  /* 補足文 */
    --dg-orange:       #eb6100;  /* アクセント(セール等) */
    --dg-orange-light: #f19149;

    /* カートボタンの緑。旧サイトは画像に焼き込まれていたため
       画像から拾った近似値をCSSで再現します。 */
    --dg-green:        #7fb241;
    --dg-green-dark:   #6a9636;

    /* --- レイアウト --- */
    --dg-width:      980px;  /* 旧 #wrapper */
    --dg-inner:      960px;  /* 旧 #contentWrap */
    /* 本番サイト(www.dollgarden.jp)をブラウザで実測した値です。
       トップページは3カラム構成でした。
         topLeft 183px | topMain 560px | rightCol 183px
       商品一覧・詳細は左カラムがなく2カラムです。 */
    --dg-main:       760px;  /* 旧 #mainContent (左カラム+中央) */
    --dg-center:     560px;  /* 旧 #topMain     (中央) */
    --dg-side:       183px;  /* 旧 #topLeft / #rightCol */

    /* --- 文字サイズ ---
       旧サイトは12px固定でしたが、スマホでは小さすぎるため
       本文を14pxへ上げています。PCの見た目は12pxを維持します。 */
    --dg-font-base:  12px;
    --dg-font-sp:    14px;
}

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */

body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
                 "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: var(--dg-font-base);
    line-height: 1.5;
    color: var(--dg-text);
    /* 旧サイトのリネン地テクスチャ。リピートで全面に敷きます。
       EC-CUBE4 が読み込む Bootstrap が
       body { background-color: var(--bs-body-bg) } で白を指定しているため、
       background-color も明示して上書きします。 */
    background-color: #efdfcf;
    background-image: url(../img/design/bg_body.png);
    background-repeat: repeat;
}

a {
    color: var(--dg-text);
    text-decoration: none;
}

a:hover {
    color: var(--dg-brown);
}

/* ------------------------------------------------------------
   レイアウト

   旧サイトは float ですが、ここは Flexbox で組みます。
   スマホで縦積みにする際に order で順番を変えられるためです。
   ------------------------------------------------------------ */

.dg-wrapper {
    /* 旧サイトは width:980px 固定でした。
       max-width にすることで、狭い画面でも横スクロールが
       出ないようにします。 */
    width: 100%;
    max-width: var(--dg-width);
    margin: 0 auto;
    background-color: #fff;
}

.dg-contentWrap {
    display: flex;
    gap: 17px;              /* 旧 960 - (760+183) = 17px */
    max-width: var(--dg-inner);
    margin: 18px auto 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.dg-main {
    flex: 1 1 var(--dg-main);
    min-width: 0;           /* flex内で画像がはみ出すのを防ぎます */
}

.dg-side {
    flex: 0 0 var(--dg-side);
}

/* ------------------------------------------------------------
   スマホ対応

   旧サイトにはメディアクエリが1件もありませんでした。
   ここが今回の追加分です。
   ------------------------------------------------------------ */

@media screen and (max-width: 768px) {
    body {
        /* 12px はスマホで読みづらいため引き上げます */
        font-size: var(--dg-font-sp);
    }

    .dg-contentWrap {
        /* 2カラムを解除して縦積みにします */
        display: block;
    }

    .dg-side {
        margin-top: 30px;
    }
}

/* ============================================================
   ヘッダー
   ============================================================ */

.dg-header {
    position: relative;
    max-width: var(--dg-width);
    margin: 0 auto;
    background-color: #fff;
}

.dg-header__lead {
    font-size: 10px;
    padding: 6px 0 9px 20px;
    color: var(--dg-text-sub);
}

.dg-header__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 17px 10px;
    gap: 10px;
}

.dg-header__logo { flex: 0 0 auto; }
.dg-header__logo img { display: block; max-width: 100%; height: auto; }

/* 連絡先。旧サイトでは画像だったものをテキストで組み直しています */
.dg-header__contactArea {
    /* 電話番号・メール・ユーティリティリンクを
       右上の1ブロックとして縦に積みます。 */
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dg-header__contact {
    text-align: right;
    /* 旧サイトは電話番号とメールが1つの画像で密に組まれていました。
       行間を詰めて近い印象にします。 */
    line-height: 1.2;
}

.dg-header__tel {
    font-size: 20px;
    color: var(--dg-brown);
    letter-spacing: .05em;
}

.dg-header__telLabel {
    font-size: 11px;
    margin-right: 4px;
    letter-spacing: 0;
}

.dg-header__tel a { color: var(--dg-brown); }
.dg-header__mail { font-size: 12px; }

.dg-header__utility {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    list-style: none;
    padding: 0;
    /* width:100% にすると flex の行が分かれて
       電話番号ブロックとの間に大きな空きができてしまいます。
       幅を内容なりにして、連絡先の直下に置きます。 */
    width: auto;
    margin: 2px 0 0;
    font-size: 11px;
    justify-content: flex-end;
}

/* 区切りの縦棒。
   ::before だと折り返したときに行頭へ区切りが来てしまうため
   ::after で「項目の後ろ」に置き、最後だけ消します。 */
.dg-header__utility li:not(:last-child)::after {
    content: "｜";
    margin-left: 10px;
    color: var(--dg-beige-dark);
}

.dg-header__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: flex-end;
}

/* ============================================================
   グローバルナビ

   旧サイトは bg_gnav.png (下端がちぎれた布のような輪郭) を
   背景に敷いていました。幅可変にするため横方向リピートで
   使います。
   ============================================================ */

.dg-gnav {
    /* bg_gnav.png は 980x70 の1枚絵です。
       ベタ塗りの帯ではなく、下端がちぎれた紙のような
       「飾り枠」で、大部分は白く縁だけが薄いグレーです。

       旧サイトは高さを固定せず padding で余白を作り、
       画像を原寸(no-repeat)で敷いていました。
       縦に潰すとちぎれた輪郭が歪むため、同じ作りにします。 */
    background-image: url(../img/design/bg_gnav.png);
    background-repeat: no-repeat;
    background-position: center top;
    /* 横は可変に追従させ、縦は原寸のまま保ちます */
    background-size: 100% auto;
    padding: 12px 0 10px;
}

.dg-gnav__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.dg-gnav__list > li { position: relative; }

.dg-gnav__list > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 高さは固定せず、帯の padding に収まるようにします */
    padding: 2px 12px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var(--dg-brown);
    font-weight: bold;
}

.dg-gnav__list > li + li > a {
    border-left: 1px solid rgba(89, 73, 63, .2);
}

.dg-gnav__list > li > a:hover {
    background-color: rgba(255, 255, 255, .35);
}

/* スマホ用の開閉ボタン。PCでは隠します */
.dg-gnav__toggle { display: none; }

/* ============================================================
   フッター
   ============================================================ */

.dg-footer {
    max-width: var(--dg-width);
    margin: 40px auto 0;
    background-color: #fff;
}

.dg-sitemap {
    padding: 20px 10px;
}

.dg-sitemap__title {
    border-bottom: 2px solid var(--dg-beige);
    padding-bottom: 6px;
    margin-bottom: 16px;
}

.dg-sitemap__titleEn {
    font-size: 20px;
    color: var(--dg-brown);
    font-style: italic;
    margin-right: 8px;
}

.dg-sitemap__titleJa {
    font-size: 12px;
    color: var(--dg-text-sub);
}

/* 6カラム。grid なら列数の切り替えが1行で済みます */
.dg-sitemap__cols {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.dg-sitemap__heading {
    font-size: 12px;
    font-weight: bold;
    color: var(--dg-brown);
    border-bottom: 1px dotted var(--dg-beige-dark);
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.dg-sitemap__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-sitemap__col li { margin-bottom: 4px; }

.dg-sitemap__col a {
    font-size: 11px;
    color: var(--dg-text);
}

.dg-sitemap__col a:hover {
    color: var(--dg-brown);
    text-decoration: underline;
}

/* フッターバー。旧サイトの bg_footer.png を敷きます */
.dg-footer__bar {
    /* bg_footer.png も 980x88 の1枚絵のため引き伸ばします */
    background-image: url(../img/design/bg_footer.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    padding: 20px 10px;
    text-align: center;
}

.dg-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    gap: 0 8px;
    font-size: 11px;
}

.dg-footer__nav li:not(:last-child)::after {
    content: "｜";
    margin-left: 8px;
    color: var(--dg-beige-dark);
}

.dg-footer__copy {
    font-size: 11px;
    color: var(--dg-text-sub);
}

/* ============================================================
   スマホ対応 (骨格まわり)
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- ヘッダー --- */
    .dg-header__lead {
        /* 旧サイトの雰囲気を残すため、消さずに小さく表示します。
           取扱商品を説明する文なので検索面でも残す価値があります。 */
        font-size: 10px;
        padding: 6px 12px;
        line-height: 1.4;
    }

    .dg-header__body {
        align-items: center;
        padding: 8px 12px;
    }

    .dg-header__logo img { width: 200px; }

    .dg-header__contact { text-align: right; }
    .dg-header__tel { font-size: 16px; }

    .dg-header__utility {
        font-size: 12px;
        justify-content: center;
        margin-top: 6px;
    }

    /* --- グローバルナビをハンバーガーに --- */
    .dg-gnav {
        /* スマホでも縦の比率は保ちます */
        background-size: 100% auto;
        padding: 0;
    }

    .dg-gnav__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: 41px;
        padding: 0 14px;
        background: none;
        border: none;
        color: var(--dg-brown);
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
    }

    /* ハンバーガーの3本線 */
    .dg-gnav__toggleBar,
    .dg-gnav__toggleBar::before,
    .dg-gnav__toggleBar::after {
        display: block;
        width: 18px;
        height: 2px;
        background-color: var(--dg-brown);
        transition: transform .2s;
    }

    .dg-gnav__toggleBar {
        position: relative;
    }

    .dg-gnav__toggleBar::before,
    .dg-gnav__toggleBar::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .dg-gnav__toggleBar::before { top: -6px; }
    .dg-gnav__toggleBar::after  { top: 6px; }

    .dg-gnav__list {
        display: none;
        flex-direction: column;
        background-color: var(--dg-cream);
    }

    /* 開いた状態 */
    .dg-gnav__list.is-open { display: flex; }

    .dg-gnav__list > li > a {
        height: auto;
        min-height: 44px;   /* タップしやすい高さを確保します */
        justify-content: flex-start;
        padding: 10px 16px;
        font-size: 14px;
        text-align: left;
        border-bottom: 1px solid var(--dg-beige);
    }

    .dg-gnav__list > li + li > a { border-left: none; }

    /* 改行用の br はスマホでは不要です */
    .dg-gnav__list > li > a br { display: none; }

    /* --- フッター --- */
    .dg-sitemap__cols {
        /* 6列は入らないので2列にします */
        grid-template-columns: repeat(2, 1fr);
    }

    .dg-sitemap__col a { font-size: 13px; }

    /* タップ領域を確保します */
    .dg-sitemap__col li { margin-bottom: 8px; }

    .dg-footer__nav { font-size: 12px; }
}

@media screen and (max-width: 480px) {
    .dg-header__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .dg-header__contact {
        margin-left: 0;
        text-align: left;
    }

    .dg-header__utility { justify-content: flex-start; }

    .dg-sitemap__cols {
        /* 極端に狭い画面では1列にします */
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   スマホでの追加調整

   レビューで見つかった不具合への対応です。
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- 横方向のはみ出しを止める ---
       375px (iPhone SE / 8) でヘッダーのカートアイコンが
       画面外に切れていました。EC-CUBE標準のヘッダー要素が
       固定幅を持っているためです。 */
    .dg-header,
    .dg-header__body,
    .dg-header__nav {
        max-width: 100%;
        box-sizing: border-box;
    }

    .dg-header__nav {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* アイコン類は横1列に並べ、タップ領域を確保します */
    .dg-header__login .ec-headerNav,
    .dg-header__nav .ec-headerNav {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
    }

    .dg-header__nav .ec-headerNav__item,
    .dg-header__nav .ec-headerNav__itemIcon {
        /* 指で押せる大きさ(44px)を確保します */
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* --- サイトマップをアコーディオンにする ---
       スマホで6カラムを縦に積むとフッターだけで
       画面5〜6スクロール分になってしまうため、
       見出しをタップして開く形にします。 */
    .dg-sitemap__cols {
        display: block;
    }

    .dg-sitemap__col {
        border-bottom: 1px dotted var(--dg-beige-dark);
    }

    .dg-sitemap__heading {
        position: relative;
        margin: 0;
        padding: 14px 30px 14px 4px;
        border-bottom: none;
        cursor: pointer;
        /* 見出し自体をタップ領域にします */
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    /* 開閉を示す + / - の記号 */
    .dg-sitemap__heading::after {
        content: "＋";
        position: absolute;
        right: 8px;
        color: var(--dg-beige-dark);
        font-size: 16px;
    }

    .dg-sitemap__col.is-open .dg-sitemap__heading::after {
        content: "−";
    }

    /* 中身は初期状態では閉じておきます */
    .dg-sitemap__col ul {
        display: none;
        padding: 0 4px 12px;
    }

    .dg-sitemap__col.is-open ul {
        display: block;
    }

    .dg-sitemap__col li {
        margin-bottom: 0;
    }

    .dg-sitemap__col a {
        /* リンク自体もタップしやすい高さにします */
        display: block;
        padding: 10px 4px;
        font-size: 13px;
    }
}

/* ============================================================
   EC-CUBE標準スタイルの打ち消し

   body に背景を敷いても、EC-CUBE標準の style.css が
   .ec-layoutRole { background: #fff } でページ全体を白く
   塗りつぶすため、テクスチャが見えなくなります。
   透過させて body の背景を活かします。
   ============================================================ */

.ec-layoutRole {
    background: transparent;
}

/* コンテンツ部分は白地のままにします。
   旧サイトも「リネン地の上に白いコンテンツ枠」の構造でした。 */
.ec-layoutRole__contents,
.ec-layoutRole__main,
.ec-layoutRole__mainWithColumn,
.ec-layoutRole__mainBetweenColumn {
    background-color: #fff;
}

/* ============================================================
   ヘッダー右上ブロックの詰め

   line-height だけでは詰まりませんでした。
   空きの本体は要素間のマージンだったためです。
   ============================================================ */

.dg-header__contact p {
    margin: 0;
}

.dg-header__utility {
    /* 電話番号ブロックの直下に寄せます */
    margin-top: 4px;
    margin-bottom: 0;
}

.dg-header__body {
    /* ロゴと右ブロックの縦位置を揃えます */
    align-items: flex-start;
    padding-bottom: 6px;
}

/* ============================================================
   グローバルナビの収まり
   ============================================================ */

.dg-gnav__list > li > a {
    /* 「THE コレ！アンティーク」だけ2行になるため、
       他項目と高さが揃うよう字間と行間を詰めます。 */
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.15;
    box-sizing: border-box;
}

/* 区切り線を帯の高さに収めます */
.dg-gnav__list > li + li > a {
    border-left: 1px solid rgba(89, 73, 63, .18);
}

/* ============================================================
   トップページのバナー

   旧サイトは 556x125px のバナーを7本、縦に並べていました。
   余白は旧サイトの margin-bottom:20px を踏襲します。
   ============================================================ */

.dg-topBanners {
    margin-bottom: 20px;
}

.dg-topBanners__item {
    display: block;
    margin-bottom: 20px;
}

.dg-topBanners__item img {
    display: block;
    /* 旧サイトは556px固定でしたが、画面幅に追従させます。
       縦横比は保つので画像が歪みません。 */
    width: 100%;
    max-width: 556px;
    height: auto;
}

.dg-topBanners__item:hover img {
    opacity: .85;
}

/* ============================================================
   コンテンツ幅の制限

   EC-CUBE4 標準は .ec-layoutRole__contents が画面いっぱいに
   広がる作りで、白い箱が1150pxまで伸びてリネン地をほぼ
   覆い隠していました。

   旧サイトは「980pxの白いコンテンツ列が、ベージュのリネン地に
   浮いている」構造だったので、幅を絞って地を見せます。
   ============================================================ */

/* EC-CUBE標準が .ec-layoutRole .ec-layoutRole__contents { max-width:1150px }
   と2クラスで指定しているため、こちらも同じ詳細度で上書きします。 */
.ec-layoutRole .ec-layoutRole__contents,
.ec-layoutRole .ec-layoutRole__header,
.ec-layoutRole .ec-layoutRole__footer {
    max-width: var(--dg-width);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   グローバルナビの高さ

   bg_gnav.png (980x70) は水平な帯ではなく、
   左下から右上へ上がっていく「斜めのリボン」でした。

     x=10  のとき 帯は 29〜69行
     x=960 のとき 帯は  0〜40行

   そのため箱を低くすると、左側のちぎれた端が切り落とされます。
   旧サイトは画像ボタン41px + padding(15/10) で計66pxを
   確保していたので、それに合わせます。
   ============================================================ */

.dg-gnav {
    /* 斜めのリボン全体が入る高さを確保します */
    min-height: 70px;
    padding: 0;
    display: flex;
    align-items: center;
}

.dg-gnav__list {
    width: 100%;
}

/* ============================================================
   グローバルナビの画像ボタン (PC)

   旧サイトは gnav01〜08 (高さ41px、合計幅979px) を
   float:left で左から詰めて並べ、#gnav に padding 15px 0 10px
   を持たせていました。合計 66px の帯になります。
   一度テキストにしていましたが「前と同じに」との要望で、
   PC は旧サイトの画像をそのまま使います。
   スマホでは逆に画像を隠してテキストを出します (下の media query)。
   ============================================================ */

.dg-gnav {
    /* 旧サイトと同じ上下余白。min-height 70px で背景の
       ちぎれた縁が切れないようにするのは従来どおりです */
    padding: 15px 0 10px;
    box-sizing: border-box;
    align-items: flex-start;
}

.dg-gnav__list {
    /* 旧サイトは float:left で左詰め。中央寄せにしません */
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.dg-gnav__list > li > a {
    /* テキスト用の余白・区切り線・ホバー背景は画像には不要です */
    display: block;
    padding: 0;
    line-height: 0;
    border-left: none;
    background-color: transparent;
}

.dg-gnav__list > li + li > a { border-left: none; }
.dg-gnav__list > li > a:hover { background-color: transparent; }

.dg-gnav__img {
    display: block;
    width: auto;
    height: 41px;
}

/* PC ではテキストは読み上げ用にも不要 (img の alt で足ります) */
.dg-gnav__text { display: none; }

/* ============================================================
   フッター帯

   bg_footer.png も 980x88 の1枚絵です。
   ナビと同じ理由で縦に潰さないようにします。
   ============================================================ */

.dg-footer__bar {
    background-size: 100% auto;
    min-height: 88px;
    box-sizing: border-box;
}

/* ============================================================
   スマホでの追加調整 (レビュー指摘分)
   ============================================================ */

@media screen and (max-width: 768px) {

    /* --- 左右の余白を確保 ---
       バナーなどが画面端にぴったり接していて窮屈でした。 */
    .ec-layoutRole .ec-layoutRole__contents {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    /* --- ナビの背景 ---
       980px幅の斜めリボンを375pxに圧縮すると、
       斜めが潰れて灰色のにじみになってしまいます。
       スマホでは画像をやめてベタ色にします。 */
    .dg-gnav {
        background-image: none;
        background-color: var(--dg-beige);
        min-height: 0;
        display: block;
        padding: 0;
    }

    /* --- ナビの項目 ---
       スマホは幅979pxの画像ボタンが入らないので、
       画像を隠してテキストのメニューに戻します。 */
    .dg-gnav__img { display: none; }
    .dg-gnav__text { display: inline; }

    .dg-gnav__list { flex-wrap: wrap; }

    .dg-gnav__list > li > a {
        /* PC 用に消した余白・行間・区切り線を戻します */
        display: flex;
        padding: 10px 16px;
        line-height: 1.2;
        border-bottom: 1px solid var(--dg-beige);
    }

    /* --- フッター帯も同様 --- */
    .dg-footer__bar {
        background-image: none;
        background-color: var(--dg-beige-light);
        min-height: 0;
    }
}

/* ============================================================
   3カラムのレイアウト

   本番サイト(www.dollgarden.jp)をブラウザで実測した値です。

     #topLeft 183px | #topMain 560px | #rightCol 183px
     (contentWrap 960px の中に配置)

   EC-CUBE4 標準は 245 / 490 / 245 なので、旧サイトに合わせます。
   商品一覧・詳細は左カラムがなく2カラムです。
   ============================================================ */

.ec-layoutRole .ec-layoutRole__contents {
    display: flex;
    gap: 17px;
    box-sizing: border-box;
}

/* 旧サイトは 980px の #wrapper の中に 960px の #contentWrap を
   中央寄せし (左右 10px ずつ空く)、ナビ帯との間に margin-top:18px
   を持たせていました。本文 760 + 隙間 17 + 右カラム 183 = 960 で、
   これがないと本文と右カラムが旧サイトより 10px 左に寄り、
   パンくずがナビ帯に接してしまいます。スマホは別の余白を使うので
   PC だけに適用します。 */
@media screen and (min-width: 769px) {
    .ec-layoutRole .ec-layoutRole__contents {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 18px;
    }
}

/* 左カラム (旧 #topLeft) */
.ec-layoutRole .ec-layoutRole__left {
    flex: 0 0 var(--dg-side);
    max-width: var(--dg-side);
}

/* 右カラム (旧 #rightCol) */
.ec-layoutRole .ec-layoutRole__right {
    flex: 0 0 var(--dg-side);
    max-width: var(--dg-side);
}

/* 中央 (旧 #topMain)。3カラムのとき */
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    flex: 1 1 var(--dg-center);
    min-width: 0;   /* flex内で画像がはみ出さないようにします */
}

/* 中央。2カラム(商品一覧・詳細など)のとき
   本番サイトの #mainContent が760pxのため、それに合わせます。
   EC-CUBE標準は width:75% で、980pxのうち735px相当になります。 */
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    flex: 1 1 var(--dg-main);   /* 760px */
    width: var(--dg-main);
    max-width: var(--dg-main);
    min-width: 0;
}

.ec-layoutRole .ec-layoutRole__main {
    flex: 1 1 auto;
    min-width: 0;
}

@media screen and (max-width: 768px) {
    /* スマホでは縦積みにします */
    .ec-layoutRole .ec-layoutRole__contents {
        display: block;
    }

    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        max-width: 100%;
        margin-top: 24px;
    }
}
/* ============================================================
   サイドカラムのカテゴリ一覧 (Block/dg_category.twig)

   旧サイトの #topCategorySearch を再現します。
   旧CSS (user_data/css/common.css 326行目〜) の値をそのまま使っています。

   構造は3グループです。
     THE コレ!      … 見出し h3_sidenav-thecolle.png (180x75)
     Texture モダン … 見出し h3_sidenav-modern.jpg   (180x80)
     レア度100%     … 見出し h3_sidenav-rare.png     (180x75)
                       ※トップページのみ

   PCは旧サイトの画像をそのまま使い、スマホでは
   画像を隠してテキストのリンクへ切り替えます。
   180px固定の画像はスマホでは字が読めないためです。
   ============================================================ */

.dg-sideCategory {
    width: 180px;
    overflow: hidden;
}

/* --- 見出し --- */
/* 旧サイトは h3 に画像を入れ、line-height:0 で下の余白を潰していました */
.dg-sideHeading {
    line-height: 0;
    margin: 0;
}

.dg-sideHeading__img {
    display: block;
    width: 180px;
    height: auto;
    vertical-align: bottom;
}

/* スマホ用の見出しテキスト。PCでは隠します */
.dg-sideHeading__text {
    display: none;
}

/* --- グループごとの外側の余白 --- */
/* 旧CSS の #sidenavTheColle / #sidenavTexture / #sidenavRare と同じ値です */
.dg-sideCategory__group {
    width: 180px;
    overflow: hidden;
}

.dg-sideCategory__group--thecolle {
    padding-bottom: 27px;
}

.dg-sideCategory__group--rare {
    padding: 32px 0 29px;
}

/* --- 枠線の内側 --- */
/* 旧CSS の #sidenavTheColleInner などと同じ、左右下だけの枠線です。
   上は見出し画像が接するため枠線を引きません。 */
.dg-sideCategory__inner {
    width: 178px;
    overflow: hidden;
    border-left: 1px solid var(--dg-beige);
    border-right: 1px solid var(--dg-beige);
    border-bottom: 1px solid var(--dg-beige);
}

/* --- リード文 (THE コレ! のみ) --- */
.dg-sideCategory__lead {
    font-size: 11px;
    margin: 6px 3px;
    padding: 5px 4px;
    background-color: var(--dg-cream);
    color: var(--dg-brown);
    font-weight: bold;
    line-height: 1.4;
}

/* --- バナーの並び --- */
.dg-sideCategory__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-sideCategory__item {
    line-height: 0;
}

.dg-sideCategory__item > a {
    display: block;
}

.dg-sideCategory__img {
    width: 178px;
    height: auto;
    vertical-align: bottom;
}

/* スマホ用のテキスト。PCでは隠します */
.dg-sideCategory__text {
    display: none;
}

/* Texture グループだけ、旧サイトは左右に余白を取って
   バナーの間隔も空けていました (旧CSS #sidenavTextureInner) */
.dg-sideCategory__group--texture .dg-sideCategory__list {
    width: 160px;
    margin: 0 auto;
    padding: 10px 0;
}

.dg-sideCategory__group--texture .dg-sideCategory__item {
    padding: 4px 0;
}

.dg-sideCategory__group--texture .dg-sideCategory__img {
    width: 160px;
}

/* レア度グループの内側の余白 (旧CSS #sidenavRareInner ul) */
.dg-sideCategory__group--rare .dg-sideCategory__list {
    padding: 10px 0 14px;
}

/* ------------------------------------------------------------
   スマホ (768px以下)

   180px固定の画像は画面幅に対して小さすぎ、
   画像に焼き込まれた文字が読めません。
   画像を隠してテキストのリンクに切り替えます。

   タップ領域は44px以上を確保します。
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {

    .dg-sideCategory,
    .dg-sideCategory__group,
    .dg-sideCategory__inner {
        width: auto;
    }

    /* 左右の枠線はスマホでは外します。
       見出しの背景(ベージュ)と枠線が同じ色のため、
       画面幅いっぱいになると見出しと枠が溶け合って
       グループの区切りが分からなくなるためです。
       下線だけ残してグループの終わりを示します。 */
    .dg-sideCategory__inner {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--dg-beige);
    }

    .dg-sideCategory__group--thecolle,
    .dg-sideCategory__group--rare {
        padding: 0 0 16px;
    }

    /* 見出しを画像からテキストへ */
    .dg-sideHeading__img {
        display: none;
    }

    .dg-sideHeading__text {
        display: block;
        line-height: 1.4;
        /* 「THE コレ! 超こだわりのアンティークアイテム」は長く、
           14pxだと最後の1文字だけが次の行に落ちて見た目が悪くなります。
           13pxに下げ、左右の余白も詰めて1〜2行に収めます。 */
        font-size: 13px;
        font-weight: bold;
        color: var(--dg-brown);
        background: var(--dg-beige);
        padding: 10px;
    }

    /* リード文はスマホでは隠します。
       PCでは画像の見出しと文字のリード文で役割が分かれていましたが、
       スマホは見出しも文字になるため、ほぼ同じ文言が2回続いて
       読みづらくなるためです。 */
    .dg-sideCategory__lead {
        display: none;
    }

    /* バナー画像を隠してテキストのリンクへ */
    .dg-sideCategory__img {
        display: none;
    }

    .dg-sideCategory__text {
        display: block;
        line-height: 1.4;
        font-size: 14px;
        color: var(--dg-text);
        /* 上下12px + 行20px = 44px 以上のタップ領域 */
        padding: 12px;
        border-bottom: 1px solid var(--dg-beige-light);
    }

    /* 最後の項目の下線は、グループ枠の下線と二重になるため消します */
    .dg-sideCategory__item:last-child .dg-sideCategory__text {
        border-bottom: none;
    }

    /* Texture グループのPC用の余白はスマホでは不要です */
    .dg-sideCategory__group--texture .dg-sideCategory__list {
        width: auto;
        padding: 0;
    }

    .dg-sideCategory__group--texture .dg-sideCategory__item {
        padding: 0;
    }

    .dg-sideCategory__item {
        line-height: normal;
    }

    .dg-sideCategory__lead {
        font-size: 12px;
    }
}

/* ============================================================
   右カラムの案内バナー (Block/dg_side_info.twig)

   旧サイトの支払い情報・ポイント情報・ラッピング・
   コンテンツリンクをまとめたブロックです。
   どれも180px幅のバナー画像1枚です。

   旧CSS は #topPaymentInfo / #topWrapping などで
   line-height:0 と下余白を指定していました。
   ============================================================ */

.dg-sideInfo__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-sideInfo__item {
    /* 画像の下に隙間ができないようにします */
    line-height: 0;
    margin-bottom: 16px;
}

.dg-sideInfo__item img {
    width: 180px;
    height: auto;
    vertical-align: bottom;
}

/* 支払い情報のバナー
   枠だけの画像 (sidenav_payment_frame.png) の上に、支払方法の名前を重ねます。
   旧画像では文字が焼き込まれていましたが、表記を変えるたびに画像を
   作り直さずに済むよう HTML にしています (dg_side_info.twig の冒頭を参照)。 */
.dg-sideInfo__payment {
    position: relative;
    display: inline-block;
    color: #59493f;
    text-decoration: none;
}

.dg-sideInfo__payment:hover {
    color: #59493f;
    text-decoration: none;
}

/* 「Payment」の見出しの下、点線の枠の内側に収めます */
.dg-sideInfo__paymentList {
    position: absolute;
    top: 48px;
    left: 22px;
    right: 14px;
    font-size: 13px;
    line-height: 1.4;
}

.dg-sideInfo__paymentRow {
    display: block;
    margin-bottom: 5px;
}

.dg-sideInfo__paymentLabel {
    display: inline-block;
    padding: 1px 4px;
}

/* ラベルの背景色は旧画像から拾った色です */
.dg-sideInfo__paymentLabel--bank {
    background: #c8cfe9;
}

.dg-sideInfo__paymentLabel--yucho {
    background: #edd4e0;
}

.dg-sideInfo__paymentLabel--cod {
    background: #f2d8c7;
}

@media screen and (max-width: 768px) {
    /* 180pxの画像を引き伸ばすと粗くなるため、
       原寸のまま中央に寄せます。
       カテゴリのバナーと違い、180pxあればスマホでも文字が読めます。 */
    .dg-sideInfo__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .dg-sideInfo__item {
        margin-bottom: 0;
    }
}

/* ============================================================
   スマホでサイドカラムを表示する

   EC-CUBE標準の style.css は、スマホでは左右のカラムを
   丸ごと display:none にしています。

     .ec-layoutRole .ec-layoutRole__left,
     .ec-layoutRole .ec-layoutRole__right { display: none; }

   PC専用のサイドバーという前提の作りですが、DOLL GARDEN の
   サイドカラムにはカテゴリ一覧・カレンダー・新着商品といった
   買い物に必要なものが入っています。スマホで丸ごと消えると
   カテゴリから商品を探せなくなるため、表示に戻します。

   左右に並べる余裕はないので、本文の下に縦に積みます。

   ※ 打ち消す相手が2クラスのセレクタなので、
      こちらも同じ強さ以上にする必要があります。
   ============================================================ */
@media screen and (max-width: 768px) {

    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        display: block;
        /* PC用の183px固定を解除して画面幅に合わせます */
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* 本文 → 左カラム → 右カラム の順に積みます。
       この順にしないと、カテゴリ一覧(縦に長い)が本文より上に来てしまい、
       トップページを開いた人が商品にたどり着けません。

       EC-CUBE標準はスマホで contents を display:block に戻すため、
       order が効きません。flex に戻したうえで縦積みにします。 */
    .ec-layoutRole .ec-layoutRole__contents {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .ec-layoutRole .ec-layoutRole__main,
    .ec-layoutRole .ec-layoutRole__mainWithColumn,
    .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ec-layoutRole .ec-layoutRole__left  { order: 2; }
    .ec-layoutRole .ec-layoutRole__right { order: 3; }
}

/* ============================================================
   新着商品 (Block/new_item.twig)

   旧サイトの #topNewItems の再現です (common.css 618〜660行の実測値)。
   ・枠      幅 544 + 左右 13px、上 16px / 下 13px、背景 bg_top-new.png、h2 との間 15px
   ・li      幅 100、右 9px、下 15px、5 列 (5 番目は右余白なし)
             旧は heightLine.js で行ごとに高さを揃えていました → flex の stretch で同じ
   ・写真    100x100 の白い枠の中央に、白い縁 5px 付きで最大 90px
   ・商品名  11px / 行間 18px、左右 5px、全文表示
   旧CSSは content-box 前提なので、このブロックの中だけ content-box に戻します。
   ============================================================ */

.dg-newItem,
.dg-newItem * {
    box-sizing: content-box;
}

.dg-newItem {
    padding: 0 0 20px;
    font-size: 11px;
    line-height: 18px; /* 旧サイトは body の line-height 18px 固定 */
}

.dg-newItem__heading {
    line-height: 0;
    margin: 0;
}

.dg-newItem__heading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 見出しはPCでは画像、スマホではテキストにします */
.dg-newItem__headingText {
    display: none;
}

.dg-newItem__box {
    width: 544px;
    margin: 15px 0 0;
    padding: 16px 13px 13px;
    background: url(../img/design/bg_top-new.png) 0 0 repeat;
}

.dg-newItem__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 542px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.dg-newItem__item {
    width: 100px;
    margin: 0 9px 0 0;
    padding-bottom: 15px;
}

/* 5 列目は右余白なし (旧の li.last と同じ)。
   これが無いと 5 個目の余白が枠に収まらず 4 列に折り返します */
.dg-newItem__item:nth-child(5n) {
    margin-right: 0;
}

/* 100x100 の白い枠。写真は中央寄せ */
.dg-newItem__image {
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dg-newItem__image a {
    line-height: 0;
}

.dg-newItem__image img {
    border: 5px solid #fff;
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

.dg-newItem__name,
.dg-newItem__price {
    margin: 0;
    padding: 0 5px;
    font-size: 11px;
    line-height: 18px;
    color: var(--dg-text);
}

.dg-newItem__name a {
    color: var(--dg-text);
    text-decoration: none;
}

.dg-newItem__name a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    /* 中央カラムが画面幅になるため、固定幅を解除して 3 列に落とします */
    .dg-newItem__box {
        width: auto;
        padding: 12px 8px 8px;
    }

    .dg-newItem__list {
        width: auto;
        justify-content: center;
    }

    .dg-newItem__item,
    .dg-newItem__item:nth-child(5n) {
        width: 30%;
        margin: 0 1.5% 0;
    }

    .dg-newItem__image {
        width: 100%;
    }

    /* 見出しは560px固定の画像なのでテキストへ切り替えます */
    .dg-newItem__heading img {
        display: none;
    }

    .dg-newItem__headingText {
        display: block;
        line-height: 1.4;
        font-size: 16px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 4px;
    }
}

/* ============================================================
   下層ページ (商品一覧・商品詳細) の2カラム

   本番サイトを実測した構成に合わせます。

     トップページ … 左183 + 中央560 + 右183 (3カラム)
     下層ページ   … 本文760 + 右183         (2カラム)

   下層ページに左カラムはなく、カテゴリ一覧は右に移ります。
   ============================================================ */

/* ------------------------------------------------------------
   商品一覧のグリッド

   旧サイトは1行4件、1件175px幅でした。
   EC-CUBE標準も4列ですが、幅が980px前提で広すぎるため
   760pxのカラムに合わせ直します。
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
    .ec-shelfGrid .ec-shelfGrid__item {
        /* 4列。旧サイトと同じ */
        width: 25%;
    }
}

/* スマホは2列。375px幅で1列だと縦に長くなりすぎ、
   4列だと1件90px以下で商品が判別できないためです。 */
@media screen and (max-width: 768px) {
    .ec-shelfGrid .ec-shelfGrid__item {
        width: 50%;
    }
}

/* ============================================================
   商品詳細の Size / Material / Country / Condition

   旧サイトの .itemDetailText 系を再現します
   (旧CSS common.css 2106行〜)。

   見出しは 346x28px の画像です。
   PCでは画像、スマホではテキストに切り替えます。
   346px固定の画像はスマホの画面幅に収まらないためです。
   ============================================================ */

.dg-productSpec__heading {
    line-height: 0;
    margin: 0 0 8px;
}

.dg-productSpec__heading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* スマホ用の見出しテキスト。PCでは隠します */
.dg-productSpec__headingText {
    display: none;
}

/* 本文。旧 .itemDetailText と同じ値です */
.dg-productSpec__text {
    padding: 0 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--dg-text);
}

/* 状態の星。旧 .itemDetailTextStar は18pxでした */
.dg-productSpec__stars {
    padding: 0 0 20px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--dg-brown);
    /* 星が詰まって見えないように少し空けます */
    letter-spacing: 2px;
}

@media screen and (max-width: 768px) {
    /* 346px固定の見出し画像はスマホでは使えないためテキストへ */
    .dg-productSpec__heading img {
        display: none;
    }

    .dg-productSpec__headingText {
        display: block;
        line-height: 1.4;
        font-size: 15px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 6px;
        margin-bottom: 8px;
    }

    .dg-productSpec__text {
        font-size: 14px;
        padding-bottom: 16px;
    }
}

/* ============================================================
   商品一覧の見た目を旧サイトに合わせる

   本番サイト(www.dollgarden.jp/products/list6.html)を
   ブラウザで実測した値です。

     1商品の幅   175px (右に10pxの余白)
     画像の枠    175x175px の白い正方形、画像は上下中央
     商品名      12px / 左寄せ / #555 / 下線なし
     価格        12px / 左寄せ
     アイコン    33x33px を横並び

   EC-CUBE標準はカード風(枠線・中央寄せ・大きな余白)なので、
   旧サイトの素朴な見た目に寄せます。
   ============================================================ */

@media screen and (min-width: 769px) {
    /* 商品の枠。旧サイトは枠線も影もありません */
    .ec-shelfGrid .ec-shelfGrid__item {
        padding: 14px 5px 16px;
    }
}

.ec-shelfGrid .ec-shelfGrid__item-image {
    /* 旧サイトは 175x175 の白い箱に画像を上下中央で置いていました。
       商品ごとに縦横比が違うため、箱を固定しないと
       商品名の高さが揃いません。 */
    height: 175px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.ec-shelfGrid .ec-shelfGrid__item-image img {
    /* 枠に収まるように縮めます。拡大はしません */
    max-width: 155px;
    max-height: 155px;
    width: auto;
    height: auto;
}

/* 商品名と価格。旧サイトは12pxの左寄せでした */
.ec-shelfGrid .ec-shelfGrid__item p {
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    color: var(--dg-text);
    margin: 0;
}

.ec-shelfGrid .ec-shelfGrid__item .ec-shelfGrid__item-image + p,
.ec-shelfGrid .ec-shelfGrid__item a > p:first-of-type {
    margin-top: 10px;   /* 旧サイトの .mt10 */
}

.ec-shelfGrid .ec-shelfGrid__item a {
    text-decoration: none;
    color: var(--dg-text);
}

.ec-shelfGrid .ec-shelfGrid__item a:hover {
    text-decoration: underline;
}

/* 価格。EC-CUBE標準は赤系の強調色ですが、旧サイトは本文と同じ色でした */
.ec-shelfGrid .ec-shelfGrid__item .ec-price__price,
.ec-shelfGrid .ec-shelfGrid__item .price02-default {
    font-size: 12px;
    color: var(--dg-text);
    font-weight: normal;
    padding: 0;
}

/* ------------------------------------------------------------
   商品アイコン (送料無料・アンティークなど)

   旧サイトは商品ごとに 33x33px のアイコンを並べていました。
   移行時にEC-CUBE4のタグへ入れてあります。

     アンティーク 1,232件 / 限定品 420件 / 送料無料 351件
     オススメ 75件 / NEW 14件
   ------------------------------------------------------------ */
.dg-productIcons {
    list-style: none;
    margin: 0 3px;
    padding: 0;
    /* アイコンが無い商品でも高さを取り、行の頭を揃えます。
       旧サイトも height:50px を確保していました。 */
    min-height: 43px;
}

.dg-productIcons > li {
    float: left;
    margin: 0 12px 0 0;
    padding: 0 0 10px;
    line-height: 0;
    list-style: none;
}

.dg-productIcons > li img {
    width: 33px;
    height: 33px;
}

/* float の解除 */
.dg-productIcons::after {
    content: "";
    display: block;
    clear: both;
}

/* ------------------------------------------------------------
   ページャ

   旧サイトはピンク(#f215c1)の文字に
   クリーム色(#fbdfcc)の背景、点線の枠でした。
   ------------------------------------------------------------ */
/* 塗りと枠線は li (.ec-pager__item) に付いています。
   a に指定しても効きません。 */
.ec-pagerRole .ec-pager .ec-pager__item a {
    font-size: 12px;
    color: var(--dg-text);
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    /* スマホでは175pxの箱は大きすぎるので、正方形を保ったまま縮めます */
    .ec-shelfGrid .ec-shelfGrid__item-image {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .ec-shelfGrid .ec-shelfGrid__item-image img {
        max-width: 90%;
        max-height: 90%;
    }

    .ec-shelfGrid .ec-shelfGrid__item p {
        font-size: 13px;
    }

    .dg-productIcons {
        min-height: 0;
    }
}

/* ============================================================
   ページャの位置と塗り

   旧サイトは右寄せで、現在のページだけが
   クリーム色に塗られ、他は塗られていませんでした。
   EC-CUBE標準は中央寄せで全ボタンが塗られています。
   ============================================================ */

.ec-pagerRole .ec-pager {
    text-align: right;
    margin: 0;
}

/* 現在のページ以外は塗りません (標準は薄いグレーで塗られます) */
.ec-pagerRole .ec-pager .ec-pager__item,
.ec-pagerRole .ec-pager .ec-pager__item:hover {
    background: transparent;
}

/* 現在のページだけクリーム色に塗り、点線で囲みます */
.ec-pagerRole .ec-pager .ec-pager__item--active {
    background: #fbdfcc;
    border: 1px dotted #ccc;
}

.ec-pagerRole .ec-pager .ec-pager__item--active a {
    color: #f215c1;
    font-weight: bold;
}

/* 一覧の上のページャ。下よりは控えめな余白にします */
.dg-pager--top {
    margin-bottom: 12px;
    padding: 0;
}

/* ============================================================
   カテゴリの説明 (商品一覧の上)

   旧サイトの #mainV を再現します (旧CSS 1025行〜)。
   中身は渡辺様が書かれたHTMLで、旧サイトのクラス名
   (lh0 / mt10 / mt20) をそのまま使っているため、
   それらも定義しておきます。
   ============================================================ */

.dg-categoryDesc {
    /* 旧サイトは750px固定でしたが、本文カラム(760px)に収めます */
    max-width: 100%;
    overflow: hidden;
    padding: 0 0 46px;
}

.dg-categoryDesc img {
    /* 750px幅の画像がカラムからはみ出さないようにします */
    max-width: 100%;
    height: auto;
}

.dg-categoryDesc p {
    line-height: 1.7;
    color: var(--dg-text);
    margin: 0 0 10px;
}

/* 子カテゴリのバナーは table で組まれています */
.dg-categoryDesc table {
    max-width: 100%;
    border-collapse: collapse;
}

.dg-categoryDesc table td {
    padding: 2px;
}

/* 表の中のバナーは縮めません。
   旧サイトの HTML は <table width="340"> に 182px の画像を4枚並べるなど、
   表の幅より中身が大きい書き方をしています。旧サイトはブラウザが表を
   中身に合わせて広げていましたが、上の max-width: 100% があると
   表が広がらず、画像が半分以下に縮んで並びます (2026年10月27日 本番設置時に判明)。 */
.dg-categoryDesc table img {
    max-width: none;
}

/* 旧サイトのHTMLが使っているクラス。
   本文中に直接書かれているため、こちらでも定義が必要です。 */
.dg-categoryDesc .lh0 {
    line-height: 0;
}

.dg-categoryDesc .lh0 img {
    vertical-align: bottom;
}

.dg-categoryDesc .mt10 { margin-top: 10px; }
.dg-categoryDesc .mt20 { margin-top: 20px; }

@media screen and (max-width: 768px) {
    .dg-categoryDesc {
        padding-bottom: 24px;
    }

    /* テーブルで組まれたバナーはスマホで横に長くなるため、
       セルを縦に積みます */
    .dg-categoryDesc table,
    .dg-categoryDesc tbody,
    .dg-categoryDesc tr,
    .dg-categoryDesc td {
        display: block;
        width: auto;
    }

    .dg-categoryDesc td {
        text-align: center;
    }
}

/* ============================================================
   How to USE シーン別に選ぶ (Block/dg_side_scene.twig)

   旧サイトの #sidenavScene を再現します
   (旧CSS common.css 1400行〜)。

   160px幅のバナーを縦に並べ、枠の中に背景画像を敷きます。
   ============================================================ */

.dg-sideScene {
    width: 180px;
    overflow: hidden;
    background: url(../img/design/bg_side-scene.png) 0 0 repeat;
    margin: 0 0 16px;
}

/* 枠線は左右下の3辺だけ。上は見出し画像が接します */
.dg-sideScene__inner {
    width: 178px;
    overflow: hidden;
    padding: 0 0 7px;
    border-left: 1px solid var(--dg-beige);
    border-right: 1px solid var(--dg-beige);
    border-bottom: 1px solid var(--dg-beige);
}

.dg-sideScene__list {
    list-style: none;
    width: 160px;
    margin: 0 auto;
    padding: 15px 0 0;
}

.dg-sideScene__item {
    padding: 0 0 9px;
    line-height: 0;
}

.dg-sideScene__img {
    width: 160px;
    height: auto;
    vertical-align: bottom;
}

/* スマホ用のテキスト。PCでは隠します */
.dg-sideScene__text {
    display: none;
}

/* ============================================================
   QRコード (Block/dg_side_qr.twig)
   ============================================================ */

.dg-sideQr {
    padding: 20px 0 0;
    text-align: center;
    line-height: 0;
    margin: 0;
}

@media screen and (max-width: 768px) {
    /* 180px固定を解除し、画面幅に合わせます */
    .dg-sideScene,
    .dg-sideScene__inner {
        width: auto;
        background: none;
    }

    /* 左右の枠線を外します。カテゴリ一覧と同じ理由です
       (見出しの背景色と同系色で区切りが分からなくなるため) */
    .dg-sideScene__inner {
        border-left: none;
        border-right: none;
        padding: 0;
    }

    .dg-sideScene__list {
        width: auto;
        padding: 0;
    }

    /* 160pxの画像は字が読めないためテキストへ切り替えます */
    .dg-sideScene__img {
        display: none;
    }

    .dg-sideScene__item {
        padding: 0;
        line-height: normal;
    }

    .dg-sideScene__text {
        display: block;
        line-height: 1.4;
        font-size: 14px;
        color: var(--dg-text);
        /* 上下12px + 行20px で44px以上のタップ領域 */
        padding: 12px;
        border-bottom: 1px solid var(--dg-beige-light);
    }

    .dg-sideScene__item:last-child .dg-sideScene__text {
        border-bottom: none;
    }

    /* QRコードはスマホでは役割がないため隠します。
       スマートフォンから直接開いている画面に、
       スマートフォンで読むためのQRコードを出す意味がありません。 */
    .dg-sideQr {
        display: none;
    }
}

/* ============================================================
   商品詳細ページ

   本番サイトを実測した値に合わせます
   (旧CSS common.css 2005行〜)。
   ============================================================ */

/* 商品名。旧サイトは帯の背景画像に文字を乗せていました */
.ec-productRole .ec-productRole__title .ec-headingTitle {
    background: url(../img/design/bg_detail-title.png) 0 0 no-repeat;
    background-size: contain;
    font-size: 16px;
    font-weight: bold;
    color: var(--dg-text);
    padding: 8px 0 13px 44px;
    margin: 0 0 12px;
    line-height: 1.4;
}

/* 価格。旧サイトはオレンジの太字16pxでした */
.ec-productRole .ec-productRole__price .ec-price__price {
    font-size: 16px;
    font-weight: bold;
    color: #f19149;
}

/* --- FAX注文用紙 --- */
.dg-faxOrder {
    font-size: 12px;
    line-height: 1.6;
    color: var(--dg-text);
    margin: 16px 0 0;
}

.dg-faxOrder a {
    display: inline-block;
    margin-top: 8px;
    line-height: 0;
}

/* --- メッセージカード / ラッピングのバナー --- */
.dg-optionBnr {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.dg-optionBnr li {
    line-height: 0;
    margin-bottom: 10px;
}

.dg-optionBnr img,
.dg-itemActions img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* --- 問い合わせ / 友達に教える --- */
.dg-itemActions {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dg-itemActions li {
    line-height: 0;
}

@media screen and (max-width: 768px) {
    .ec-productRole .ec-productRole__title .ec-headingTitle {
        /* 750px前提の背景画像はスマホで崩れるため外し、
           下線で見出しらしさを出します */
        background: none;
        padding: 0 0 8px;
        border-bottom: 2px solid var(--dg-beige);
        font-size: 17px;
    }

    /* バナーは原寸だと横にはみ出すので中央に寄せます */
    .dg-optionBnr li,
    .dg-itemActions li {
        text-align: center;
    }

    .dg-itemActions {
        justify-content: center;
    }
}

/* ============================================================
   商品詳細の左右を旧サイトに合わせる

   本番サイトを実測した結果:
     左  346px … 商品コード・価格・Size・Material・Country・Condition
     右  380px … 商品画像とサムネイル

   EC-CUBE標準は左が画像・右が情報で、旧サイトと逆です。
   テンプレートの順序は変えず、CSS の order で入れ替えます。
   HTMLの順序(画像が先)は変わらないため、スマホで縦積みに
   なったときに「画像 → 商品情報」の自然な順になります。
   ============================================================ */

@media screen and (min-width: 769px) {
    .ec-productRole .ec-grid2 {
        display: flex;
        align-items: flex-start;
    }

    /* 1つ目のセル(画像)を右へ */
    .ec-productRole .ec-grid2 > .ec-grid2__cell:first-child {
        order: 2;
        flex: 0 0 380px;
        max-width: 380px;
    }

    /* 2つ目のセル(商品情報)を左へ */
    .ec-productRole .ec-grid2 > .ec-grid2__cell:nth-child(2) {
        order: 1;
        flex: 0 0 346px;
        max-width: 346px;
        margin-right: 24px;
    }
}

/* --- EC-CUBE標準のボタンを旧サイトのトーンに合わせる --- */

/* カートに入れる。旧サイトは緑系のボタン画像でした。
   画像だと文言を変えられないためCSSで作ります。 */
.ec-productRole .ec-productRole__btn .ec-blockBtn--action {
    background-color: #7ba05b;
    border-color: #7ba05b;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
}

.ec-productRole .ec-productRole__btn .ec-blockBtn--action:hover {
    background-color: #8fb06d;
    border-color: #8fb06d;
}

/* 品切れ時のボタン */
.ec-productRole .ec-productRole__btn .ec-blockBtn--action[disabled] {
    background-color: #c9c2b8;
    border-color: #c9c2b8;
}

/* お気に入りボタン。標準は濃紺でトーンから浮くため、
   ベージュ系にして枠線で控えめにします。 */
.ec-productRole .ec-blockBtn--cancel {
    background-color: var(--dg-cream);
    border: 1px solid var(--dg-beige);
    color: var(--dg-brown);
    border-radius: 4px;
}

.ec-productRole .ec-blockBtn--cancel:hover {
    background-color: var(--dg-beige-light);
    border-color: var(--dg-beige-dark);
    color: var(--dg-brown);
}

/* 価格に「販売価格」のラベルを付けます (旧サイトと同じ) */
.ec-productRole .ec-productRole__price .ec-price::before {
    content: "販売価格 ";
    font-size: 13px;
    font-weight: normal;
    color: var(--dg-text);
}

/* 税込の表記。旧サイトは「（税込）」の括弧付きでした */
.ec-productRole .ec-productRole__price .ec-price__tax::before { content: "（"; }
.ec-productRole .ec-productRole__price .ec-price__tax::after  { content: "）"; }

/* 商品コード。旧サイトは「No. ababy08」の形でした */
.ec-productRole .ec-productRole__code {
    font-size: 12px;
    color: var(--dg-text);
}

/* メッセージカード/ラッピングのバナーを横並びに (旧サイトと同じ)
   旧 #optionBnr01 は 345px のバナー2枚を左右15pxの余白で並べていました。
   画像は原寸(345px)のまま、引き伸ばしません。 */
.dg-optionBnr {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

.dg-optionBnr li {
    flex: 0 1 345px;
    margin-bottom: 0;
}

.dg-optionBnr img {
    width: auto;
    max-width: 100%;
}

/* ============================================================
   ショッピングガイド (Block/dg_shopping_guide.twig)

   旧サイトの #shoppingGuide02 を再現します。
   支払方法・お届け・キャンセル返品の3列です。
   ============================================================ */

.dg-shoppingGuide {
    margin: 40px 0 0;
    clear: both;
}

.dg-shoppingGuide__heading {
    line-height: 0;
    margin: 0 0 16px;
}

.dg-shoppingGuide__heading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* スマホ用の見出しテキスト。PCでは隠します */
.dg-shoppingGuide__headingText,
.dg-shoppingGuide__subText {
    display: none;
}

.dg-shoppingGuide__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
}

.dg-shoppingGuide__item {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--dg-text);
}

.dg-shoppingGuide__subHeading {
    line-height: 0;
    margin: 0 0 10px;
}

.dg-shoppingGuide__subHeading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-shoppingGuide__item p {
    margin: 0 0 10px;
}

.dg-shoppingGuide__item img {
    max-width: 100%;
    height: auto;
}

.dg-bold {
    font-weight: bold;
    color: var(--dg-brown);
}

/* 代引手数料。旧サイトは枠で囲んでいました */
.dg-shoppingGuide__charge {
    background: var(--dg-cream);
    border: 1px solid var(--dg-beige);
    padding: 8px 10px;
}

/* 送料無料の条件。目立たせます */
.dg-shoppingGuide__free {
    font-weight: bold;
    color: var(--dg-brown);
}

.dg-shoppingGuide__contact {
    line-height: 0;
}

@media screen and (max-width: 768px) {
    /* 3列はスマホで読めないため縦積みにします */
    .dg-shoppingGuide__list {
        display: block;
    }

    .dg-shoppingGuide__item {
        margin-bottom: 28px;
        font-size: 13px;
    }

    /* 960px / 111px 固定の見出し画像はスマホで小さすぎるため
       テキストに切り替えます */
    .dg-shoppingGuide__heading img,
    .dg-shoppingGuide__subHeading img {
        display: none;
    }

    .dg-shoppingGuide__headingText {
        display: block;
        line-height: 1.4;
        font-size: 16px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 6px;
    }

    .dg-shoppingGuide__subText {
        display: block;
        line-height: 1.4;
        font-size: 14px;
        font-weight: bold;
        color: var(--dg-brown);
        background: var(--dg-beige-light);
        padding: 8px 10px;
    }

    /* 問い合わせ画像は原寸のまま中央に置きます */
    .dg-shoppingGuide__contact {
        text-align: center;
    }
}

/* ============================================================
   注文エリアと3つのボタン (商品詳細)

   旧サイトの #itemOrder / #itemDetailOption を再現します。
   ============================================================ */

/* --- 「Order ご注文」の見出し --- */
.dg-orderHeading {
    line-height: 0;
    margin: 32px 0 16px;
    clear: both;
}

.dg-orderHeading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-orderHeading__text {
    display: none;
}

/* --- FAX注文のご案内 --- */
.dg-orderArea__fax {
    font-size: 12px;
    line-height: 1.6;
    color: var(--dg-text);
}

.dg-orderArea__fax p {
    margin: 0 0 8px;
}

.dg-orderArea__faxBtn {
    font-size: 0;
}

/* 120pxの小さなボタンなので原寸のままにします。
   幅いっぱいに広げると画像が横に伸びます。 */
.dg-orderArea__faxBtn img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* --- 問い合わせ / お気に入り / 友達に教える --- */
/* 旧サイトはベージュの枠で囲み、3つを横1列に並べていました */
.dg-itemActions {
    list-style: none;
    margin: 24px 0;
    padding: 20px 12px 12px;
    border: 1px solid var(--dg-beige);
    display: flex;
    gap: 12px;
}

.dg-itemActions__item {
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--dg-text);
}

.dg-itemActions__item > a {
    display: block;
    /* line-height:0 は画像の下の隙間を消すためですが、
       この要素に付けると子の <p> にも継承されて
       文章の高さが0になり、行が重なって潰れます。
       画像だけに効かせます。 */
    font-size: 0;
}

.dg-itemActions__item img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-itemActions__item p {
    margin: 10px 0 0;
    /* 親から font-size:0 / line-height:0 が降りてこないように
       ここで明示します */
    font-size: 11px;
    line-height: 1.6;
}

.dg-itemActions__tel {
    font-size: 0;
}

@media screen and (max-width: 768px) {
    /* 750px固定の見出し画像はスマホで使えないためテキストへ */
    .dg-orderHeading img {
        display: none;
    }

    .dg-orderHeading__text {
        display: block;
        line-height: 1.4;
        font-size: 16px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 6px;
    }

    /* 3列はスマホで狭すぎるため縦積みにします */
    .dg-itemActions {
        display: block;
        padding: 16px 12px;
    }

    .dg-itemActions__item {
        margin-bottom: 20px;
        font-size: 13px;
        text-align: center;
    }

    .dg-itemActions__item:last-child {
        margin-bottom: 0;
    }

    .dg-itemActions__item p {
        text-align: left;
    }
}

/* ============================================================
   新着情報 Information (Block/dg_information.twig)

   旧サイトの #relatedInformation を再現します。
   日付と本文を横並びにした素朴なリストです。
   ============================================================ */

.dg-information {
    margin: 32px 0 0;
    clear: both;
}

.dg-information__heading {
    line-height: 0;
    margin: 0 0 12px;
}

.dg-information__heading img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-information__headingText {
    display: none;
}

.dg-information__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-information__item {
    display: flex;
    gap: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--dg-text);
    padding: 8px 0;
    border-bottom: 1px dotted var(--dg-beige);
}

.dg-information__date {
    flex: 0 0 80px;
    color: var(--dg-text-sub);
}

.dg-information__body {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-information__body a {
    color: var(--dg-text);
}

@media screen and (max-width: 768px) {
    /* 750px固定の見出し画像はスマホで使えないためテキストへ */
    .dg-information__heading img {
        display: none;
    }

    .dg-information__headingText {
        display: block;
        line-height: 1.4;
        font-size: 16px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 6px;
    }

    /* 日付と本文を縦に積みます。横並びだと本文が狭くなりすぎます */
    .dg-information__item {
        display: block;
        font-size: 13px;
    }

    .dg-information__date {
        display: block;
        margin-bottom: 2px;
    }
}

/* ============================================================
   商品詳細のサムネイル

   旧サイトは1行4枚で、メイン画像の幅にきれいに収まっていました。
   EC-CUBE標準は3枚なので4枚にそろえます。
   ============================================================ */

@media screen and (min-width: 769px) {
    .ec-sliderItemRole .item_nav,
    .ec-productRole .item_nav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 6px 0 0;
    }

    .ec-sliderItemRole .item_nav .slideThumb,
    .ec-productRole .item_nav .slideThumb {
        /* 4列。gapの6px×3本ぶんを差し引きます */
        flex: 0 0 calc((100% - 18px) / 4);
        max-width: calc((100% - 18px) / 4);
        margin: 0;
    }

    .ec-sliderItemRole .item_nav .slideThumb img,
    .ec-productRole .item_nav .slideThumb img {
        width: 100%;
        height: auto;
    }
}

/* ============================================================
   本文カラムの余白対策

   EC-CUBE標準は contents を flex にしているため、
   本文と右カラムのうち背の高いほうに合わせて
   両方が引き伸ばされます。

   商品詳細のように本文が短いページでは、右カラムの
   長さに引っ張られて本文の下に1,000px以上の
   白い空白ができていました。

   align-items: flex-start にすると、それぞれが
   中身ぶんの高さで止まります。
   ============================================================ */
@media screen and (min-width: 769px) {
    .ec-layoutRole .ec-layoutRole__contents {
        align-items: flex-start;
    }
}

/* ============================================================
   注文エリアを2カラムにする

   旧サイトは注文エリアを左右に分けていました。
     左 220px … FAX注文のご案内
     右 510px … 価格・数量・カートボタン

   本文カラム(346px)の中なので原寸どおりには入りませんが、
   左右に分ける構成は同じにします。
   ============================================================ */

.dg-orderArea {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

/* 注文エリアは本文の全幅 (約720px) に置いているので、
   旧サイトと同じ 220px (FAX案内) + 510px (価格・数量・カート) の
   横並びにします (#orderDetailL / #orderDetailR)。 */
@media screen and (min-width: 769px) {
    .dg-orderArea__fax {
        flex: 0 0 220px;
        order: 1;
    }

    .dg-orderArea__cart {
        flex: 1 1 0;
        min-width: 0;
        order: 2;
    }
}

@media screen and (max-width: 768px) {
    /* スマホは縦積み。カートを先に、FAXは補足として下に */
    .dg-orderArea {
        flex-direction: column;
    }

    .dg-orderArea__cart {
        order: 1;
        width: 100%;
    }

    .dg-orderArea__fax {
        order: 2;
        width: 100%;
        border-top: 1px dotted var(--dg-beige);
        padding-top: 12px;
    }
}

/* カートボタンは幅いっぱいに。旧サイトも帯状のボタンでした */
.dg-orderArea__cart .ec-productRole__btn {
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    /* スマホでは縦積み。カートを先に出します
       (買う操作のほうが優先されるため) */
    .dg-orderArea {
        display: flex;
        flex-direction: column;
    }

    .dg-orderArea__cart { order: 1; margin-bottom: 20px; }
    .dg-orderArea__fax  { order: 2; }
}

/* ============================================================
   商品詳細の仕上げ (旧サイトとの差分埋め)

   パンくず / アイコンの間隔 / お気に入り画像ボタン /
   メイン画像の収まり / ショッピングガイドの枠 / ページトップ
   ============================================================ */

/* --- パンくず (旧 #breadCrumb) ---
   旧サイトは「HOME > 全商品 > 商品名」を1行に並べ、
   区切りに bg_bc.png (5x10 の「>」) を使っていました。 */
.dg-breadCrumb {
    list-style: none;
    /* .ec-productRole の左右パディング(20px)と揃えます */
    margin: 0 20px 22px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 18px;  /* 旧 #breadCrumb li の実測値 (12px/18px) */
    color: #59493f;
}

.dg-breadCrumb li {
    padding: 0 5px 0 0;
    /* 長い商品名は折り返さず末尾を省略します */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dg-breadCrumb li a {
    color: #59493f;
    text-decoration: none;
    padding: 0 11px 0 0;
    background: url(../img/design/bg_bc.png) right 4px no-repeat;
}

.dg-breadCrumb li a:hover {
    text-decoration: underline;
}

/* --- アイコン (詳細ページだけ間隔を広げる) ---
   旧サイトは一覧では 12px、詳細では 45px の間隔でした (#itemDetailIcon li)。 */
@media screen and (min-width: 769px) {
    .ec-productRole .dg-productIcons {
        margin: 0;
        padding: 12px 0 24px;
        min-height: 0;
    }

    .ec-productRole .dg-productIcons > li {
        margin: 0 45px 0 0;
        padding: 0;
    }
}

/* --- お気に入りの画像ボタン ---
   button 要素に画像を入れるため、ボタンの見た目を全て消します */
.dg-itemActions__favForm {
    margin: 0;
}

.dg-itemActions__favBtn {
    display: block;
    /* button は display:block でも中身の幅に縮むため、
       幅を明示しないと画像が小さく潰れます */
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.dg-itemActions__favBtn img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 登録済みは薄くして押せない見た目に */
.dg-itemActions__favBtn.is-done {
    cursor: default;
    opacity: .45;
}

.dg-itemActions__favDone {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--dg-brown);
}

/* --- メイン画像 ---
   旧サイトは 380px 幅のカラムに 380x344 程度の画像を
   中央寄せで置いていました。EC-CUBE標準の 550px 指定を
   カラム幅に収めます。 */
.ec-productRole .item_visual .slide-item img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --- ショッピングガイドの3列を枠で囲む ---
   旧サイトは bg_guide02.png (750x274) という背景画像で
   ベージュの枠を3つ描いていました。高さが固定の画像は
   文章量が変わると枠からはみ出すため、CSS の枠線で
   同じ見た目を作ります。 */
@media screen and (min-width: 769px) {
    .dg-shoppingGuide__list {
        gap: 10px;
        margin-top: 22px;
    }

    .dg-shoppingGuide__item {
        border: 1px solid var(--dg-beige);
        background: #fff;
        padding: 18px 14px 20px;
    }
}

/* --- このページのトップへ (旧 #pagetop) ---
   右寄せで、先頭に icon_btt.png (10x8 の上向き矢印) を付けます */
.dg-pagetop {
    margin: 24px 0 0;
    text-align: right;
    font-size: 12px;
}

.dg-pagetop a {
    color: #59493f;
    padding-left: 14px;
    background: url(../img/design/icon_btt.png) 0 5px no-repeat;
}

/* スマホでは EC-CUBE 標準の浮いたボタンがあるため隠します */
@media screen and (max-width: 768px) {
    .dg-pagetop {
        display: none;
    }
}

/* メイン画像のカラム。EC-CUBE標準の .ec-sliderItemRole は左右に
   20px ずつパディングを持つため、380px のカラムで画像が 340px に
   縮んでいました。旧サイトは 380px いっぱいに表示していたので、
   PCではパディングを外します。 */
@media screen and (min-width: 769px) {
    .ec-productRole .ec-sliderItemRole {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================================
   商品詳細の仕上げ (2) スクリーンショット比較で見つかった差分
   ============================================================ */

/* EC-CUBE標準は PC で profile に margin-left:16px を付けるため、
   左カラムが 346px より 16px 狭くなり「cm」が折り返していました */
@media screen and (min-width: 769px) {
    .ec-productRole .ec-productRole__profile {
        margin-left: 0;
    }
}

/* 商品名の帯。2カラムの外に出したので background-size は原寸で、
   旧サイトと同じ 750px の帯として表示します */
@media screen and (min-width: 769px) {
    .ec-productRole .ec-productRole__title {
        margin: 0 0 17px;
    }

    .ec-productRole .ec-productRole__title .ec-headingTitle {
        background-size: auto;
        margin: 0;
    }
}

/* 商品コードの帯 (旧 #itemId span) */
.dg-itemId {
    margin: 0;
    line-height: 1;
}

.dg-itemId > span {
    display: inline-block;
    background-color: #d2b59c;
    padding: 2px 18px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
}

/* 価格の配色。旧サイトは「販売価格」がオレンジ太字16px、
   金額はグレー(#666)太字16px でした。逆になっていたので合わせます */
.ec-productRole .ec-productRole__price .ec-price::before {
    color: #f19149;
    font-size: 16px;
    font-weight: bold;
    margin-right: 8px;
}

.ec-productRole .ec-productRole__price .ec-price__price {
    color: #666;
    font-size: 16px;
    font-weight: bold;
}

.ec-productRole .ec-productRole__price .ec-price__tax {
    color: #666;
    font-size: 16px;
    font-weight: bold;
}

/* 商品説明。旧 .itemDetailText02 は 13px / 1.8 でした */
.ec-productRole .ec-productRole__description {
    font-size: 13px;
    line-height: 1.8;
}

/* 商品メモ(アンティーク雑貨についてのリンク)。旧 .itemDetailTextLink */
.dg-itemDetailTextLink {
    margin: 0;
    padding: 0 0 20px;
    text-align: right;
    font-size: 14px;
}

.dg-itemDetailTextLink a {
    text-decoration: underline;
}

/* サムネイル。縦横比の違う画像でも 90px 角に揃えます (旧 .sub-image-outer) */
.ec-productRole .item_nav .slideThumb img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* メイン画像とサムネイルの間。slick の margin-bottom:30px を詰めます */
.ec-productRole .item_visual.slick-slider {
    margin-bottom: 10px;
}

/* サムネイルの下の注記 (旧 #itemImagesText、虫眼鏡アイコン付き) */
.dg-itemImagesText {
    margin: 6px 0 0;
    padding: 0 0 0 25px;
    background: url(../img/design/bg_detail02.png) 0 0 no-repeat;
    font-size: 11px;
    line-height: 1.5;
    color: var(--dg-text);
}

/* 注文エリア右側。旧 #orderDetail02 は右寄せでした */
.dg-orderArea__price {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--dg-text);
}

@media screen and (min-width: 769px) {
    .dg-orderArea__cart {
        text-align: right;
    }

    .dg-orderArea__cart .ec-numberInput {
        justify-content: flex-end;
    }
}

/* カートボタン (画像)。button の見た目を消して画像だけにします */
.dg-cartBtn {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
}

.dg-cartBtn img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-cartBtn:hover img {
    opacity: .85;
}

.dg-cartBtn[disabled] img {
    opacity: .5;
}

/* バナー2枚は下端を揃えます (旧サイトは li.last に margin-top:20px) */
.dg-optionBnr {
    align-items: flex-end;
}

/* 3つのボタンの枠。旧サイトはクリーム色の地模様
   (bg_category-recommend.png) とベージュの細枠でした */
.dg-itemActions {
    background: url(../img/design/bg_category-recommend.png) 0 0 repeat;
    border-color: #e3c9b5;
}

/* 説明文の続き(「*会員様のみ」など)は詰めます */
.dg-itemActions__item p + p {
    margin-top: 0;
}

/* ============================================================
   ショッピングガイドの3列を旧サイトの枠画像で描く

   bg_guide02.png (750x274) は3つのベージュ枠を描いた背景画像です。
   上下方向には装飾が無いので、文章量に合わせて縦に伸ばしても
   歪みません (background-size: 100% 100%)。
   列の幅・余白は旧 #shoppingGuide02 ul li と同じ値です。
   ============================================================ */
@media screen and (min-width: 769px) {
    .dg-shoppingGuide {
        /* 本文カラム(760px)の左右 20px を空け、旧サイトの 750px に近づけます */
        margin: 40px 20px 0;
    }

    .dg-shoppingGuide__list {
        gap: 0;
        margin: 22px 0 0;
        padding: 23px 0 40px;
        background: url(../img/design/bg_guide02.png) 0 0 no-repeat;
        background-size: 100% 100%;
    }

    .dg-shoppingGuide__item {
        flex: 0 0 216px;
        margin: 0 16px 0 18px;
        border: 0;
        background: none;
        padding: 0;
        font-size: 11px;
        line-height: 1.6;
        color: #7d7d7d;
    }

    .dg-shoppingGuide__item:last-child {
        margin-right: 0;
    }

    .dg-shoppingGuide__subHeading {
        text-align: center;
    }
}

/* メイン画像のスライド。slick はいちばん背の高いスライドに合わせて
   高さを取るため、縦長の画像が混ざると 1枚目の下に空白ができます。
   旧サイトと同じく 380px 角の枠に収めて高さを揃えます。 */
@media screen and (min-width: 769px) {
    .ec-productRole .item_visual .slide-item img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        background: #fff;
    }
}

/* ショッピングガイドの列幅。枠画像(750px)を 720px に縮めて敷いているので、
   列の幅と余白も同じ比率 (0.96) で縮めます: 216→207, 18→17, 16→15 */
@media screen and (min-width: 769px) {
    .dg-shoppingGuide__item {
        flex: 0 0 207px;
        margin: 0 15px 0 17px;
    }
}

/* ============================================================
   アンティーク雑貨について (user_data/antique.twig)

   旧 user_data/antique.php の再現です。
   旧サイトは 750px 固定で、見出し画像(750x41) の下に
   「文章 350px / 画像 360px」の2カラムを並べていました
   (packages/default/css/add.css の .float_left / .w350 / .antique_bg1)。
   ============================================================ */

.dg-antique {
    color: var(--dg-text);
}

.dg-antique img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-antique__title,
.dg-antique__heading {
    line-height: 0;
    margin: 0 0 20px;
}

.dg-antique__heading {
    margin-top: 10px;
}

/* スマホ用のテキスト見出し。PCでは隠します */
.dg-antique__titleText,
.dg-antique__headingText {
    display: none;
}

.dg-antique__hero,
.dg-antique__condition {
    margin: 0 0 20px;
    line-height: 0;
}

.dg-antique__condition {
    margin-bottom: 50px;
}

.dg-antique__lead {
    margin: 0 0 20px;
    font-size: 12px;
    line-height: 1.5; /* 旧サイトは 12px/18px */
    text-align: justify;
}

/* 文章と画像の2カラム */
.dg-antique__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 50px;
    padding: 10px;
}

.dg-antique__text {
    flex: 0 0 350px;
    font-size: 12px;
    line-height: 1.5; /* 旧サイトは 12px/18px */
    text-align: justify;
}

.dg-antique__text--wide {
    flex-basis: 430px;
}

.dg-antique__image {
    flex: 0 1 auto;
    line-height: 0;
}

/* 「選びかた」の節だけ背景画像 (bg1.gif 750x313) が敷かれていました。
   高さ固定は文章量で崩れるので、画像は上に寄せて下は地色で受けます */
.dg-antique__row--selection {
    background: #fdf7f0 url(../img/antique/bg1.gif) 0 0 no-repeat;
    padding: 20px;
}

.dg-antique__catch {
    font-size: 14px;
    font-weight: bold;
    color: var(--dg-brown);
}

@media screen and (max-width: 768px) {
    /* 750px の見出し画像は読めないのでテキストにします */
    .dg-antique__title img,
    .dg-antique__heading img {
        display: none;
    }

    .dg-antique__title,
    .dg-antique__heading {
        line-height: 1.4;
    }

    .dg-antique__titleText {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: var(--dg-brown);
        border-bottom: 2px solid var(--dg-beige);
        padding-bottom: 6px;
    }

    .dg-antique__headingText {
        display: block;
        font-size: 15px;
        font-weight: bold;
        color: var(--dg-brown);
        background: var(--dg-beige-light);
        padding: 8px 10px;
    }

    /* 2カラムは縦積み。画像を上、文章を下に */
    .dg-antique__row {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 32px;
        padding: 0;
    }

    .dg-antique__row--selection {
        padding: 16px;
    }

    .dg-antique__text,
    .dg-antique__text--wide {
        flex-basis: auto;
        font-size: 13px;
        order: 2;
    }

    .dg-antique__image {
        order: 1;
        text-align: center;
    }
}

/* ============================================================
   商品詳細の仕上げ (3) 2回目のスクリーンショット比較の差分

   本文カラム(760px)の左右 20px を空けていたため中身が 720px になり、
   左 346px + 間 24px + 右 380px = 750px の2カラムだけが
   右へ 30px はみ出していました。
   左を 10px 空けて中身を 750px にし、旧サイトと同じ幅にそろえます。
   パンくず・ショッピングガイドも同じ 10px にそろえます。
   ============================================================ */
@media screen and (min-width: 769px) {
    .ec-productRole {
        padding-left: 10px;
        padding-right: 0;
    }

    .dg-breadCrumb {
        margin: 0 0 22px 10px;
    }

    .dg-shoppingGuide {
        margin: 40px 0 0 10px;
    }

    /* 幅が 750px になったので、列幅は原寸に戻します。
       枠画像は横は原寸ですが、縦は文章量に合わせて伸ばします
       (274px 固定だと中央の「お届けについて」が枠の下にはみ出します) */
    .dg-shoppingGuide__list {
        background-size: 100% 100%;
    }

    .dg-shoppingGuide__item {
        flex: 0 0 216px;
        margin: 0 16px 0 18px;
    }

    /* 注文エリアの右側。旧 #orderDetail02 は 510px の右ブロックの中で
       価格・数量・カートボタンを左そろえの1かたまりにして、
       ブロックの右寄りに置いていました。同じ形にします。 */
    .dg-orderArea__cart {
        text-align: left;
    }

    .dg-orderArea__cart > form {
        width: 260px;
        margin-left: auto;
    }

    .dg-orderArea__cart .ec-numberInput {
        justify-content: flex-start;
    }
}

/* 数量の入力欄。標準は 100px 幅で大きすぎるため詰めます (旧は小さな select) */
.dg-orderArea__cart .ec-numberInput input {
    width: 70px;
}

/* 価格の下に EC-CUBE の余白と罫線が付いていました。旧サイトは
   Price の見出し画像に破線が含まれているので、余計な線を消します */
.ec-productRole .ec-productRole__price {
    border-bottom: 0;
    padding: 0;
    margin: 0 0 20px;
}

.ec-productRole .ec-productRole__price .ec-price {
    border: 0;
}

/* メイン画像とサムネイルの間は旧サイトと同じ 10px に */
@media screen and (min-width: 769px) {
    .ec-productRole .item_visual.slick-slider {
        margin-bottom: 5px;
    }
}

/* 送料無料の条件。旧サイトは太字ではありませんでした */
.dg-shoppingGuide__free {
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    /* スマホは slick のドット(下 45px)が出るので、その分の余白を戻します。
       ドットがサムネイルの注記に重なっていました */
    .ec-productRole .item_visual.slick-slider {
        margin-bottom: 55px;
    }

    /* 注記はスマホでは出しません (ドットで切り替えられるため) */
    .dg-itemImagesText {
        display: none;
    }

    /* TEL&FAX の画像は原寸(229px)より大きくしません */
    .dg-itemActions__tel img {
        width: 229px;
        max-width: 100%;
    }

    /* ショッピングガイドの各列は右側にも余白を取ります */
    .dg-shoppingGuide__item {
        padding: 0 12px;
        box-sizing: border-box;
    }
}

/* ============================================================
   ラッピング&メッセージカード (user_data/message.twig)

   antique.twig と同じ骨格 (.dg-antique) を使い、差分だけ足します。
   旧 add.css の .message_bg1 (#fff6ee 地・#e9d8c9 の 3px 破線枠) と
   .message_font_color1/2 を再現しています。
   ============================================================ */

/* ラッピングの節は 画像485px + 文章220px、
   メッセージカードの節は 画像361px + 文章345px でした */
@media screen and (min-width: 769px) {
    .dg-message__row {
        justify-content: flex-start;
    }

    .dg-message__text--narrow {
        flex-basis: 220px;
    }

    .dg-message__text--card {
        flex-basis: 345px;
    }
}

/* 選べるメッセージカード。クリーム地に破線の枠 */
.dg-message__cards {
    background-color: #fff6ee;
    border: 3px dashed #e9d8c9;
    padding: 20px;
    margin: 0 0 50px;
}

.dg-message__cardsHeading {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: bold;
    color: #a79076;
}

.dg-message__square {
    color: #eaa169;
    margin-right: 5px;
}

.dg-message__cardList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.dg-message__cardList li {
    flex: 0 0 220px;
    font-size: 12px;
    line-height: 1.5;
}

.dg-message__cardList li span {
    display: block;
    margin-top: 4px;
}

@media screen and (max-width: 768px) {
    .dg-message__cards {
        padding: 12px;
    }

    .dg-message__cardList {
        justify-content: center;
    }

    .dg-message__cardList li {
        flex: 0 1 220px;
        text-align: center;
    }
}

/* コンディション説明の画像 (txt1.jpg 752px) は文字が焼き込まれているため、
   スマホで幅に合わせて縮めると読めません。600px を下限にして
   横スクロールで見られるようにします */
@media screen and (max-width: 768px) {
    .dg-antique__condition {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dg-antique__condition img {
        min-width: 600px;
        max-width: none;
    }
}

/* ============================================================
   ラガディアン＆アンディの話 (/user_data/raggedy)

   旧サイトは float とインラインの幅クラス (.w350 / .w285 / .w400) で
   2カラムを作っていました。ブラウザで実測した値に合わせています。

     本文      #555555 / 12px / line-height 18px / text-align justify
     見出しの■ #eaa169
     見出し文字 #a79076 (太字)
     節の背景  bg1.gif (8x8 のタイル)
     節の余白  padding 10px、節下 margin 20〜50px
   ============================================================ */

.dg-raggedy__row {
    /* 旧 .clearfix.p10 と同じ。左右10pxの余白を持たせます */
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

/* 背景付きの節 (旧 .raggedy_bg1) */
.dg-raggedy__row--shaded {
    background-image: url(../img/raggedy/bg1.gif);
    background-repeat: repeat;
    margin-bottom: 20px;
}

/* 文章の幅は旧サイトの実測値そのままです */
.dg-raggedy__text--w350 { flex: 0 0 350px; max-width: 350px; }
.dg-raggedy__text--w285 { flex: 0 0 285px; max-width: 285px; }
.dg-raggedy__text--w400 { flex: 0 0 400px; max-width: 400px; }

.dg-raggedy .dg-antique__text {
    /* 旧サイトは両端揃えでした */
    text-align: justify;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}

/* 小見出し (■ + 文字) */
.dg-raggedy__heading {
    margin: 0 0 10px;
}

.dg-raggedy__square {
    color: #eaa169;
    font-weight: bold;
    margin-right: 5px;
}

.dg-raggedy__headingText {
    color: #a79076;
    font-weight: bold;
}

/* 商品一覧へのボタン (旧 .raggedy_btn1 は中央寄せ) */
.dg-raggedy__btn {
    margin: 0 0 50px;
    text-align: center;
}

.dg-raggedy__btn img {
    display: inline-block;
}

@media screen and (max-width: 768px) {
    /* 固定幅をやめて縦積みにします */
    .dg-raggedy__text--w350,
    .dg-raggedy__text--w285,
    .dg-raggedy__text--w400 {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .dg-raggedy__row {
        padding: 10px 0;
    }
}

/* ============================================================
   店舗紹介＆イベント情報 (/event)

   旧サイトの実測値:
     カテゴリバナー 149x128 を5枚、横に並べる (合計745px)
     紹介文  bg_about01.png (735x138) を敷き、padding 57px 24px 88px 156px
     店舗案内 bg_category-recommend.png のタイル、padding 13px 5px 35px 8px
     写真    372px (左) + 355px ×2 (右に縦2枚)
     地図    305x305 を dt (368px) に、住所を dd (360px、左padding 28px) に
     イベント 1件 702px。文章340px (左) + 画像325px (右)
             見出し 16px、日程 14px/23.8px、紹介文は #eaa169 の枠線
             区切りに line_event.png (702x3) を下端へ
   ============================================================ */

/* --- カテゴリバナー5枚 --- */
.dg-event__catBnr {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 25px 0 0;
}

.dg-event__catBnr li {
    /* 旧サイトは float で隙間なく詰めていました */
    flex: 0 0 auto;
}

.dg-event__catBnr img {
    display: block;
}

/* --- 紹介文 --- */
.dg-event__introText {
    /* 背景画像に文字の逃げ場が焼き込まれているため、
       旧サイトと同じ padding で位置を合わせます */
    background-image: url(../img/event/bg_about01.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    padding: 57px 24px 88px 156px;
    margin: 0;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}

/* --- 店舗案内 --- */
.dg-event__shopInfo {
    background-image: url(../img/design/bg_category-recommend.png);
    background-repeat: repeat;
    padding: 13px 5px 35px 8px;
    box-sizing: border-box;
}

.dg-event__shopHeading {
    margin: 0;
    line-height: 0;   /* 画像の下の隙間を消します */
}

/* 見出しはPCでは画像、スマホではテキストに切り替えます */
.dg-event__shopHeadingText { display: none; }

.dg-event__photos {
    /* 旧サイトは float で「左に372pxの大きい写真1枚、
       右に355pxの写真を縦2枚」という並びでした。
       これを grid の2列2行で作ります。
       (flex では大きい写真を2行ぶんにまたがらせられません) */
    display: grid;
    grid-template-columns: 372px 355px;
    grid-template-rows: auto auto;
    list-style: none;
    margin: 0;
    padding: 10px 0 12px;
}

.dg-event__photos img {
    display: block;
}

/* 左の大きい写真は2行ぶんの高さを占めます */
.dg-event__photoLarge {
    grid-row: 1 / 3;
    grid-column: 1;
}

/* --- 地図と住所 --- */
.dg-event__access {
    display: flex;
    margin: 0;
}

.dg-event__access dt {
    flex: 0 0 368px;
}

.dg-event__access dd {
    flex: 0 0 360px;
    margin: 0;
    padding-left: 28px;
    box-sizing: border-box;
}

/* 住所の枠。
   bg_about02.png (315x340) に「吹き出しアイコン・筆記体のロゴ・
   オレンジの囲み枠」が焼き込まれています。旧サイトはこの画像を
   <p> の背景に敷き、padding 107px 62px 40px で文字を枠の中へ
   逃がしていました。同じ作りにします。 */
.dg-event__access dd p {
    background-image: url(../img/event/bg_about02.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    /* 画像が 315x340 なので箱も同じ幅にします。
       旧サイトは padding を含めて 315px でした。 */
    width: 315px;
    padding: 107px 62px 40px;
    margin: 0;
    box-sizing: border-box;
    /* 旧サイトはここだけ 16px / 24px でした */
    font-size: 16px;
    line-height: 24px;
    color: #7d7d7d;
}

.dg-event__map iframe {
    display: block;
    border: 0;
    max-width: 100%;
}

.dg-event__map small {
    display: block;
    font-size: 11px;
}

/* --- イベント情報 --- */
.dg-event__list {
    list-style: none;
    /* 旧サイトは #eventInfo に margin:26px 0 35px、
       その中の ul に margin:3px 3px 3px 9px を持たせていました。
       合わせて左に 9px 寄り、幅は 702px になります。 */
    margin: 29px 3px 38px 9px;
    padding: 0;
}

.dg-event__list > li {
    /* 区切り線は画像を下端に敷いています (旧サイトと同じ) */
    background-image: url(../img/event/line_event.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding: 14px 0 18px;
    /* 区切り線の画像が 702px なので、箱もその幅に合わせます */
    max-width: 702px;
}

.dg-event__list dl {
    display: flex;
    /* 旧サイトは文章が左 (float:left)、画像が右 (float:right) でした。
       内側の幅は 698px です。 */
    justify-content: space-between;
    margin: 0;
    max-width: 698px;
}

.dg-event__list dt {
    /* 画像を右に置くため順番を入れ替えます */
    order: 2;
    flex: 0 0 325px;
    line-height: 0;
}

.dg-event__list dt img {
    display: block;
    width: 325px;
    height: auto;
}

.dg-event__list dd {
    order: 1;
    flex: 0 0 340px;
    margin: 0 0 0 8px;
    color: #59493f;
}

.dg-event__list h3 {
    /* 見出しの左にアイコンが入ります */
    background-image: url(../img/event/icon_event-h3.png);
    background-repeat: no-repeat;
    background-position: 4px 0;
    padding-left: 26px;
    margin: 0;
    font-size: 16px;
    line-height: 18px;
    color: #59493f;
}

.dg-event__list h3 a {
    color: #59493f;
}

.dg-event__list dd > p {
    margin: 0;
    padding-top: 6px;
    font-size: 14px;
    line-height: 1.7;
}

/* 紹介文だけ枠で囲みます */
.dg-event__list .dg-event__comment {
    border: 1px solid #eaa169;
    padding: 12px 10px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 24px;
}

@media screen and (max-width: 768px) {
    /* 見出しはテキストに切り替えます */
    .dg-event__shopHeading img { display: none; }

    .dg-event__shopHeadingText {
        display: block;
        font-size: 15px;
        font-weight: bold;
        color: #59493f;
        line-height: 1.4;
    }

    /* バナーは2列に折り返します */
    .dg-event__catBnr {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding-top: 16px;
    }

    /* 背景に文字の逃げ場が焼き込まれた紹介文は、
       スマホでは背景をやめて素のテキストにします */
    .dg-event__introText {
        background-image: none;
        padding: 16px 0;
    }

    .dg-event__shopInfo {
        padding: 12px;
    }

    /* 写真・地図・イベントは縦積みにします */
    .dg-event__access,
    .dg-event__list dl {
        flex-direction: column;
    }

    /* 写真は2列の grid をやめて1列にします */
    .dg-event__photos {
        display: block;
        padding: 10px 0;
    }

    .dg-event__photos li {
        margin-bottom: 8px;
    }

    .dg-event__photoLarge {
        /* grid をやめたので行またぎの指定も外します */
        grid-row: auto;
        grid-column: auto;
    }

    .dg-event__access dt,
    .dg-event__access dd,
    .dg-event__list dt,
    .dg-event__list dd {
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* 住所の枠は 315px 固定の画像で、375px の画面に
       そのまま置くと窮屈です。枠をやめてテキストにします。 */
    .dg-event__access dd p {
        background-image: none;
        width: auto;
        padding: 0;
        font-size: 14px;
        line-height: 1.8;
    }

    .dg-event__photos img,
    .dg-event__list dt img {
        width: 100%;
        height: auto;
    }

    .dg-event__access dd {
        padding: 12px 0 0;
    }

    /* 画像を先に、文章を後ろに置きます (縦積みのときは画像が上) */
    .dg-event__list dt { order: 1; }
    .dg-event__list dd { order: 2; margin: 12px 0 0; }
}

/* ============================================================
   アルバム (/album)

   旧サイトの実測値:
     新着2件  枠308px を2列 (画像270px)。#newAlbum は
              bg_category-recommend.png のタイル、padding 16px
     一覧     枠228px を3列 (画像200px)。右マージン24px、下14px。
              #albumList は bg_album01.jpg のタイル、padding 11px 8px 14px
     ページ送り 右寄せ、項目25px

   枠は「上端の画像 + 背景を繰り返す本文 + 下端の画像」の3段構えです。
   ============================================================ */

.dg-album__lead {
    padding: 16px 0 0;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}

/* --- 新着アルバム --- */
.dg-album__new {
    background-image: url(../img/design/bg_category-recommend.png);
    background-repeat: repeat;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 30px;
}

.dg-album__newHeading {
    margin: 0;
    line-height: 0;
}

.dg-album__newHeadingText { display: none; }

.dg-album__newList {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
    /* 308 + 42 + 308 = 658。旧サイトの左端 209 / 559 と同じ間隔です */
    gap: 0 42px;
    justify-content: center;
}

.dg-album__newList > li {
    flex: 0 0 308px;
    max-width: 308px;
}

/* --- 一覧 --- */
.dg-album__body {
    padding: 0 0 44px;
}

.dg-album__list {
    background-image: url(../img/album/bg_album01.jpg);
    background-repeat: repeat;
    padding: 11px 8px 14px;
    margin: 0 0 14px;
    box-sizing: border-box;
}

.dg-album__list > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-album__list > ul > li {
    flex: 0 0 228px;
    max-width: 228px;
    /* 旧サイトは右24px・下14px。3件目だけ右マージンなし */
    margin: 0 24px 14px 0;
}

.dg-album__list > ul > li.is-last {
    margin-right: 0;
}

/* --- 枠 (上端・本文・下端) --- */
.dg-album__frameTop,
.dg-album__frameBottom {
    line-height: 0;
}

.dg-album__frameTop img,
.dg-album__frameBottom img {
    display: block;
    width: 100%;
    height: auto;
}

.dg-album__frameBody {
    background-repeat: repeat-y;
    background-position: 0 0;
    box-sizing: border-box;
}

/* 2列用 (308px) */
.dg-album__frameBody--large {
    background-image: url(../img/album/bg_album-imgbody01.png);
    padding: 8px 19px 28px;
}

/* 3列用 (228px) */
.dg-album__frameBody--small {
    background-image: url(../img/album/bg_album-imgbody02.png);
    padding: 6px 14px 18px;
}

.dg-album__frameBody img {
    display: block;
    width: 100%;
    height: auto;
}

.dg-album__frameBody p {
    margin: 0;
    padding-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}

.dg-album__frameBody--small p {
    padding-top: 3px;
}

/* --- ページ送り --- */
.dg-album__pager {
    padding: 0 0 14px;
    text-align: right;
}

.dg-album__pager ul {
    display: inline-flex;
    /* 項目の高さを中身に合わせます。
       既定の stretch だと一番高い項目に引き伸ばされます。 */
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-album__pager li {
    /* 旧サイトはページ番号が 25px 幅の箱でした */
    flex: 0 0 25px;
    width: 25px;
    text-align: center;
}

/* ページ番号のリンク。
   旧サイトは薄いオレンジの地に点線の枠という見た目でした
   (background #fbdfcc / border 1px dotted #ccc / padding 2px 0)。 */
.dg-album__pager a {
    display: block;
    box-sizing: border-box;
    padding: 2px 0;
    background-color: #fbdfcc;
    border: 1px solid #ccc;
    border-style: dotted;
    font-size: 12px;
    line-height: 12px;
    color: #555;
    text-decoration: none;
}

.dg-album__pager a:hover {
    text-decoration: underline;
}

/* 表示中のページは太字にします (旧サイトは区別していませんでしたが、
   リンクで飛べるようにした都度どこを見ているか分かるようにします) */
.dg-album__pager li.is-current a {
    font-weight: bold;
}

/* 「前へ」「次へ」は枠なしのテキストリンクで、幅は中身ぶんでした */
.dg-album__pager li.dg-album__pagerPrev,
.dg-album__pager li.dg-album__pagerNext {
    flex: 0 0 auto;
    width: auto;
}

.dg-album__pagerPrev a,
.dg-album__pagerNext a {
    padding: 3px 6px 0;
    background-color: transparent;
    border: none;
    line-height: 12px;
}

@media screen and (max-width: 768px) {
    .dg-album__newHeading img { display: none; }

    .dg-album__newHeadingText {
        display: block;
        font-size: 15px;
        font-weight: bold;
        color: #59493f;
        line-height: 1.4;
    }

    /* 固定幅の枠はスマホでは幅に追従させます。
       枠の画像は横に伸びますが、308px / 228px の枠を
       375px の画面に並べると収まらないためです。 */
    .dg-album__new {
        padding: 12px;
    }

    .dg-album__newList {
        gap: 20px 0;
    }

    .dg-album__newList > li,
    .dg-album__list > ul > li {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 0 14px;
    }

    .dg-album__list {
        padding: 10px;
    }
}

/* ============================================================
   独自ページの本文幅

   旧サイトは #mainContent (760px) の中に 750px のコンテンツを置き、
   左に 10px の余白がありました (#breadCrumb や #undercolumn が 750px)。
   商品詳細では .ec-productRole に padding-left:10px を当てて
   同じ位置に揃えていますが、独自ページ (アンティーク雑貨について・
   ラッピング・ラガディアン・店舗紹介・アルバム) は全幅 760px の
   ままだったため、旧サイトより 10px 左に寄っていました。

   パンくずは個別に margin-left:10px を持っているので、
   ここでは二重に効かないよう打ち消します。
   ============================================================ */
@media screen and (min-width: 769px) {
    .dg-antique {
        padding-left: 10px;
        box-sizing: border-box;
    }

    /* パンくずの margin-left:10px と重ならないようにします */
    .dg-antique > .dg-breadCrumb {
        margin-left: 0;
    }
}

/* ============================================================
   購入手続きのメッセージカードとラッピング (DOLL GARDEN 独自)

   旧サイトの「お支払い方法」画面 (#cartMessage / #cartMessageSelect /
   #cartWrapping) の見た目を EC-CUBE4 の購入手続きに移したものです。
   旧CSSの実測値:
     カード3枚  235px 幅、間隔 12px、画像枠は #efdfd0 の地に padding 9px
     テキスト   14px、textarea 730x150 / 枠 #d3bda7
     ラッピング 左 324px (文章) / 右 345px (画像、#efdfd0 の地)
   ============================================================ */

.dg-giftOption__lead {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: #666;
    margin-top: 4px;
}

.dg-giftOption__body {
    font-size: 14px;
}

.dg-giftOption__check {
    /* 旧 #cartMessage: 下に区切り線の画像 */
    padding: 10px 0 15px;
    margin: 0 0 10px;
    background: url(../img/shopping/line_cart.png) left bottom no-repeat;
    background-size: 100% 3px;
}

.dg-giftOption__check input {
    margin-right: 10px;
}

/* カード3枚 */
.dg-giftOption__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
    list-style: none;
    margin: 0;
    padding: 16px 0 20px;
}

.dg-giftOption__cards > li {
    flex: 0 0 235px;
    max-width: 235px;
}

.dg-giftOption__cardImage {
    padding: 9px 9px 12px;
    background-color: #efdfd0;
    text-align: center;
}

.dg-giftOption__cardImage img {
    display: block;
    width: 100%;
    height: auto;
}

.dg-giftOption__cardImage p {
    margin: 0;
    padding: 10px 0 0;
    font-size: 14px;
}

.dg-giftOption__cardRadio {
    padding: 12px 8px 0;
    margin: 0;
    font-size: 16px;
}

.dg-giftOption__cardRadio input {
    margin-right: 8px;
}

.dg-giftOption__text {
    margin: 0 0 6px;
}

.dg-giftOption__textarea {
    resize: none;
    border: 1px solid #d3bda7;
}

/* カードを付けないときは種類とメッセージを畳みます (JSで切替) */
.dg-giftOption__cardArea.is-hidden {
    display: none;
}

/* ラッピング: 左に文章、右に画像 */
.dg-giftOption__wrapping {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.dg-giftOption__wrappingL {
    flex: 1 1 324px;
}

.dg-giftOption__wrappingSelect select {
    width: 120px;
    margin-left: 18px;
    display: inline-block;
}

.dg-giftOption__caution {
    color: #f00;
}

.dg-giftOption__wrappingR {
    flex: 0 0 345px;
    padding: 21px 17px;
    background-color: #efdfd0;
    box-sizing: content-box;
}

.dg-giftOption__wrappingR img {
    display: block;
    width: 100%;
    height: auto;
}

.dg-giftOption__wrappingR p {
    margin: 10px 0 0;
    font-size: 13px;
}

/* 確認画面・マイページ・管理画面の表示用 */
.dg-giftOption__confirm {
    margin: 0;
}

.dg-giftOption__confirm dt {
    font-weight: bold;
    margin-top: 8px;
}

.dg-giftOption__confirm dd {
    margin: 2px 0 0 1em;
}

@media screen and (max-width: 768px) {
    .dg-giftOption__cards > li {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .dg-giftOption__wrapping {
        flex-direction: column;
    }

    .dg-giftOption__wrappingR {
        flex: 1 1 auto;
        box-sizing: border-box;
        width: 100%;
    }
}

/* ============================================================
   マイページ (DOLL GARDEN 独自)

   旧サイトの mypage.css / mypage/*.tpl の再現です。実測値:
     #mypagecolumn  700px 中央寄せ、上 15px
     h2.title       title.jpg 700x40
     #mynavarea     左 185px、画像ボタン 170x30 を縦に5枚
     #mycontentsarea 右 515px、h3 は subtitle 画像 515x32
     table          510px、外枠 1px #ccc、th は #f0f0f0 地・中央寄せ・padding 8px
     文字           12px / #555
   body.mypage は EC-CUBE4 のマイページ系テンプレートが付けるクラスです。
   ============================================================ */

body.mypage .ec-layoutRole__main {
    /* 旧 #mypagecolumn。タイトル(全幅) + ナビ(左) + 本文(右) を並べます */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 700px;
    max-width: 100%;
    margin: 15px auto 0;
    padding: 0;
    font-size: 12px;
    color: #555;
}

/* 標準の外枠 (ページ見出しとナビを包む箱) は箱としては消し、
   中身をそのまま flex の子にします */
body.mypage .ec-layoutRole__main > .ec-mypageRole {
    display: contents;
}

.dg-mypage__title {
    flex: 0 0 100%;
    margin: 0 0 15px;
    line-height: 0;
}

/* --- ナビ (旧 #mynavarea) --- */
.dg-mypage__nav {
    flex: 0 0 185px;
    width: 185px;
}

.dg-mypage__navList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-mypage__navItem {
    height: 30px;
    margin: 0;
}

/* 画像ボタン。通常は navi0x.jpg、選択中とホバーで navi0x_on.jpg */
.dg-mypage__navItem > a {
    display: block;
    width: 170px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* 文字は読み上げ用に残し、画面には出しません */
.dg-mypage__navItem > a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dg-mypage__navItem--01 > a { background-image: url(../img/mypage/navi01.jpg); }
.dg-mypage__navItem--02 > a { background-image: url(../img/mypage/navi02.jpg); }
.dg-mypage__navItem--03 > a { background-image: url(../img/mypage/navi03.jpg); }
.dg-mypage__navItem--04 > a { background-image: url(../img/mypage/navi04.jpg); }
.dg-mypage__navItem--05 > a { background-image: url(../img/mypage/navi05.jpg); }
.dg-mypage__navItem--01.is-active > a, .dg-mypage__navItem--01 > a:hover { background-image: url(../img/mypage/navi01_on.jpg); }
.dg-mypage__navItem--02.is-active > a, .dg-mypage__navItem--02 > a:hover { background-image: url(../img/mypage/navi02_on.jpg); }
.dg-mypage__navItem--03.is-active > a, .dg-mypage__navItem--03 > a:hover { background-image: url(../img/mypage/navi03_on.jpg); }
.dg-mypage__navItem--04.is-active > a, .dg-mypage__navItem--04 > a:hover { background-image: url(../img/mypage/navi04_on.jpg); }
.dg-mypage__navItem--05.is-active > a, .dg-mypage__navItem--05 > a:hover { background-image: url(../img/mypage/navi05_on.jpg); }

/* ようこそ (旧サイトはナビ下に左寄せ) */
.dg-mypage__welcome {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}

.dg-mypage__welcome em {
    font-style: normal;
    font-weight: bold;
}

/* --- 本文 (旧 #mycontentsarea) --- */
.dg-mypage__contents {
    flex: 0 0 515px;
    width: 515px;
    font-size: 12px;
}

.dg-mypage__contents p {
    margin: 0 0 10px;
    line-height: 1.5;
}

.dg-mypage__subtitle {
    margin: 0 0 10px;
    line-height: 0;
}

/* 表 (旧 div#mypagecolumn table) */
.dg-mypage__table {
    width: 510px;
    max-width: 100%;
    margin: 0 0 15px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-size: 12px;
    /* EC-CUBE標準の style.css (Bootstrap 5) が table { caption-side: bottom; } を
       指定しているため、そのままだと「▼お届け先」の caption が表の下に回ってしまう。
       旧サイトと同じく見出しを表の上に出すため、明示的に top を指定する。
       (caption-side は caption ではなく table 側に指定するプロパティ) */
    caption-side: top;
}

.dg-mypage__table th,
.dg-mypage__table td {
    padding: 8px;
    border: 1px solid #ccc;
    vertical-align: top;
    line-height: 1.5;
}

.dg-mypage__table th {
    background-color: #f0f0f0;
    text-align: center;
    font-weight: bold;
}

/* お届け先の表は見出しを左寄せ・幅140px (旧 table.delivname th) */
.dg-mypage__table--deliv th {
    text-align: left;
    width: 140px;
}

.dg-mypage__table caption {
    padding: 8px;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #f0f0f0;
    text-align: left;
    font-weight: bold;
    color: #000;
}

.dg-mypage__th--result { text-align: right !important; }
.dg-mypage__td--price  { text-align: right; white-space: nowrap; }
.dg-mypage__td--center { text-align: center; }

.dg-mypage__attention { color: #f00; }

/* 注文情報の枠 (旧 p.myconditionarea) */
.dg-mypage__condition {
    width: 500px;
    max-width: 100%;
    margin: 0 auto 15px;
    padding: 5px;
    border: 1px solid #333;
    box-sizing: border-box;
}

/* 退会の枠 (旧 #completetext) */
.dg-mypage__completeText {
    width: 470px;
    max-width: 100%;
    margin: 15px auto 0;
    padding: 15px;
    border: 5px solid #ccc;
    box-sizing: content-box;
}

.dg-mypage__mini { font-size: 11px; }

.dg-mypage__delivEmpty {
    width: 500px;
    max-width: 100%;
    margin: 30px auto;
    padding: 10px 0;
    border: 5px solid #ccc;
    text-align: center;
}

.dg-mypage__btnArea {
    margin: 15px 0;
    text-align: center;
}

.dg-mypage__btnArea .dg-mypage__imgBtn { margin: 0 8px; }

/* 画像ボタン。通常画像と _on 画像を背景で切り替えます */
.dg-mypage__imgBtn {
    display: inline-block;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer;
    vertical-align: middle;
}

.dg-mypage__imgBtn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dg-mypage__imgBtn--back       { width: 150px; height: 30px; background-image: url(../img/mypage/b_back.gif); }
.dg-mypage__imgBtn--back:hover { background-image: url(../img/mypage/b_back_on.gif); }
.dg-mypage__imgBtn--reorder    { width: 180px; height: 30px; background-image: url(../img/mypage/b_reorder.gif); }
.dg-mypage__imgBtn--reorder:hover { background-image: url(../img/mypage/b_reorder_on.gif); }
.dg-mypage__imgBtn--refuse     { width: 180px; height: 30px; background-image: url(../img/mypage/b_refuse.gif); }
.dg-mypage__imgBtn--refuse:hover { background-image: url(../img/mypage/b_refuse_on.gif); }
.dg-mypage__imgBtn--newaddress { width: 160px; height: 22px; background-image: url(../img/mypage/newadress.gif); }
.dg-mypage__imgBtn--newaddress:hover { background-image: url(../img/mypage/newadress_on.gif); }

.dg-mypage__addBtn { margin: 0 0 15px; }

/* 文字のボタン (会員登録内容変更の「登録する」)。旧 b_confirm.gif に似せた見た目 */
.dg-mypage__btn {
    display: inline-block;
    min-width: 150px;
    padding: 7px 20px;
    border: 1px solid #7c9a3b;
    border-radius: 4px;
    background: linear-gradient(#b7d27e, #7c9a3b);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

/* --- 会員登録内容変更のフォームを旧サイトの表の見た目に --- */
body.mypage .ec-borderedDefs {
    border: 1px solid #ccc;
    border-bottom: none;
    font-size: 12px;
}

body.mypage .ec-borderedDefs dl {
    display: flex;
    margin: 0;
    padding: 0;
    border-top: none;
    border-bottom: 1px solid #ccc;
}

body.mypage .ec-borderedDefs dt {
    flex: 0 0 140px;
    padding: 8px;
    background-color: #f0f0f0;
    border-right: 1px solid #ccc;
    font-weight: bold;
}

body.mypage .ec-borderedDefs dd {
    flex: 1 1 auto;
    padding: 8px;
    margin: 0;
}

body.mypage .ec-borderedDefs .ec-label {
    font-size: 12px;
    font-weight: bold;
}

/* 「必須」バッジ → 旧サイトの赤い「※」 */
body.mypage .ec-required {
    display: inline-block;
    padding: 0;
    margin-left: 4px;
    border: none;
    background: none;
    color: #f00;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

body.mypage .ec-required::before { content: "※"; }
body.mypage .ec-required { font-size: 0; }
body.mypage .ec-required::before { font-size: 12px; }

body.mypage .ec-borderedDefs input[type="text"],
body.mypage .ec-borderedDefs input[type="email"],
body.mypage .ec-borderedDefs input[type="password"],
body.mypage .ec-borderedDefs input[type="tel"],
body.mypage .ec-borderedDefs select {
    font-size: 12px;
    height: auto;
    padding: 4px;
}

body.mypage .ec-RegisterRole__actions { text-align: center; }
body.mypage .ec-off4Grid__cell { margin: 0 auto; width: auto; }

/* 標準のページ送り・件数表示を小さく */
.dg-mypage__pager { margin: 0 0 10px; }

@media screen and (max-width: 768px) {
    body.mypage .ec-layoutRole__main {
        width: 100%;
        display: block;
        margin-top: 0;
    }

    .dg-mypage__title img { width: 100%; height: auto; }

    /* スマホはナビを横並び (2列) にします */
    .dg-mypage__nav { width: 100%; margin-bottom: 10px; }
    .dg-mypage__navList { display: flex; flex-wrap: wrap; gap: 4px; }
    .dg-mypage__navItem { flex: 0 0 170px; }

    .dg-mypage__contents { width: 100%; }
    .dg-mypage__subtitle img { width: 100%; height: auto; }
    .dg-mypage__table { width: 100%; }
    .dg-mypage__condition, .dg-mypage__completeText, .dg-mypage__delivEmpty { width: auto; }
    body.mypage .ec-borderedDefs dl { flex-direction: column; }
    body.mypage .ec-borderedDefs dt { flex: none; border-right: none; border-bottom: 1px solid #ccc; }
}

/* 会員登録内容変更: 性別のラジオが行末で折り返し「その他」だけ次行に落ちるのを防ぎます */
body.mypage .ec-borderedDefs .ec-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

body.mypage .ec-borderedDefs .ec-radio label,
body.mypage .ec-borderedDefs .ec-radio > div {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   営業日カレンダー (旧 #sidenavCalender)

   旧サイトの実測値:
     幅 176px、背景 bg_sidenav-calender.png (180x248) 左上・繰り返しなし
     padding 60px 2px 0、文字色 #59493f
     月 h3 中央寄せ太字 / 曜日 25px×7 (9px、日曜 #eb6100)
     日付 25px×22px (太字、上 padding 2px)、下に 11px
     休業日は bg_holiday.png (20x20) を 3px 1px に敷く
     凡例 10px 太字、アイコン 14x14 を左に、下線 #D1C0A5
   ============================================================ */

.dg-calendar {
    width: 176px;
    overflow: hidden;
    padding: 60px 2px 0;
    background: url(../img/design/bg_sidenav-calender.png) 0 0 no-repeat;
    color: #59493f;
    font-size: 12px;
    line-height: 1.5;
    box-sizing: content-box;
}

.dg-calendar__month {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 18px;   /* 旧サイトの実測 (h3 の高さ 18px) */
    font-weight: bold;
}

.dg-calendar__week,
.dg-calendar__date {
    display: flex;
    flex-wrap: wrap;
    width: 175px;   /* 25px × 7 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-calendar__week li {
    width: 25px;
    text-align: center;
    font-size: 9px;
    line-height: 18px;   /* 旧サイトの実測 (曜日行の高さ 18px) */
}

.dg-calendar__sun { color: #eb6100; }

.dg-calendar__date {
    padding-bottom: 11px;
}

.dg-calendar__date li {
    width: 25px;
    height: 22px;
    padding: 2px 0 0;
    /* 旧サイトは height 22 + 上 padding 2 = 24px の箱でした (content-box) */
    box-sizing: content-box;
    text-align: center;
    font-weight: bold;
}

/* 定休日 (管理画面の定休日カレンダー設定) */
.dg-calendar__holiday {
    background: url(../img/design/bg_holiday.png) 3px 1px no-repeat;
}

.dg-calendar__legend {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #D1C0A5;
    line-height: 18px;   /* 旧サイトの実測 (p の高さ 19px = 18 + 下線 1) */
}

.dg-calendar__teikyu,
.dg-calendar__rinji {
    padding-left: 23px;
    font-size: 10px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: 2px 0;
}

.dg-calendar__teikyu { background-image: url(../img/design/icon_holiday.png); }
.dg-calendar__rinji  { background-image: url(../img/design/icon_holiday2.png); }

/* EC-CUBE 標準のブロック外枠 (.ec-role) が付ける余白を打ち消します */
.ec-layoutRole__left .dg-calendar,
.ec-layoutRole__right .dg-calendar {
    margin: 0 auto 20px;
}

/* ============================================================
   トップページの新着情報 (旧 #topInformation)

   旧サイトの実測値:
     見出し h2_top-information.png 560x37
     内側 560px、padding 12px 0 29px
     左 #topNews 376px、padding 3px 2px、bg_info380.png (380x151)
       ul 365x145 (はみ出しはスクロール)、margin 1px 10px 0
       li padding 13px 0、下線 line_news.png (355x3) を左下に
       span は icon_top-new.png (41x17) を左に敷き padding-left 50px
     右 btn_eventinfo.png 171x140 を右寄せ
   ============================================================ */

.dg-topInfo {
    width: 560px;
    max-width: 100%;
    /* 旧サイトは見出しの前に <br> が1つ入っていました (18px)。
       箱の高さも旧と同じ 248px になるよう padding で確保します */
    padding-top: 18px;
}

.dg-topInfo__heading {
    margin: 0;
    line-height: 0;
}

.dg-topInfo__headingText { display: none; }

.dg-topInfo__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 560px;
    max-width: 100%;
    padding: 12px 0 29px;
    box-sizing: border-box;
}

.dg-topInfo__news {
    width: 376px;
    padding: 3px 2px;
    background: url(../img/design/bg_info380.png) 0 0 no-repeat;
    box-sizing: content-box;
}

.dg-topInfo__list {
    width: 365px;
    height: 145px;
    overflow: auto;
    margin: 1px 10px 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.5;
    color: #59493f;
}

.dg-topInfo__list li {
    padding: 13px 0;
    background: url(../img/design/line_news.png) left bottom no-repeat;
}

.dg-topInfo__item {
    /* 旧サイトは inline の span でした。折り返した2行目以降は
       字下げされず左端から始まります (block にすると全行が下がります) */
    display: inline;
    padding-left: 50px;
    background: url(../img/design/icon_top-new.png) 0 0 no-repeat;
}

.dg-topInfo__item a { color: #59493f; }

/* 「Check it out! イベント情報」バナーの枠。
   2026年10月14日に渡辺様のご要望でバナーを外したため、現在は使われていません
   (Block/dg_top_information.twig)。戻す可能性があるので残しています。 */
.dg-topInfo__event {
    margin: 0;
    line-height: 0;
}

@media screen and (max-width: 768px) {
    .dg-topInfo__heading img { display: none; }
    .dg-topInfo__headingText {
        display: block;
        font-size: 15px;
        font-weight: bold;
        color: #59493f;
        line-height: 1.4;
        padding: 6px 0;
    }
    .dg-topInfo__inner { flex-direction: column; width: 100%; padding: 8px 0 16px; }
    .dg-topInfo__news { width: 100%; box-sizing: border-box; background-size: 100% 100%; }
    .dg-topInfo__list { width: auto; }
    .dg-topInfo__event { margin-top: 12px; text-align: center; }
    .dg-calendar { margin: 0 auto; }
}

/* ============================================================
   週間ランキング Best 10 (トップページ右カラム)

   旧サイトの #weeklyRanking (common.css 719〜800行) の再現です。
   テンプレートは Block/dg_weekly_ranking.twig。

   【旧CSSの実測値】
   ・全体      180px、背景 bg_top-ranking.png を敷き詰め、
               下余白 11px、ブロック下 34px
   ・Best1〜3  写真の背景 bg_top-ranking-body.png (縦リピート)、
               写真 135px を中央寄せ、上下を帯画像で挟む
   ・Best4     幅 159 / 余白 11px 10px 16px 11px
               番号 (53px) が左で上 27px 下げ、写真 95px が右
   ・Best5     幅 159 / 余白 0 10px 20px 11px
               写真 95px が左、番号 (42px) が右で上 24px 下げ
   ・Best6〜9  幅 164 / 左右余白 8px、2列 (各 80px)、下余白 11px
   ・Best10    幅 180、中央寄せ
   ・写真 (Best4 以降) は白い枠 3px
   旧の float を flex に置き換えていますが、寸法は同じです。

   【box-sizing について】
   EC-CUBE4 の style.css は全要素を border-box にしています。
   旧CSSの寸法 (width 159 + padding 21 = 180 など) は content-box
   前提なので、このブロックの中だけ content-box に戻します。
   border-box のままだと Best6〜9 の2列が収まらず縦に積まれ、
   写真の白枠 3px が内側に食い込んで一回り小さくなります。
   ============================================================ */

.dg-ranking,
.dg-ranking * {
    box-sizing: content-box;
}

.dg-ranking {
    width: 180px;
    overflow: hidden;
    padding: 0 0 11px;
    margin: 0 0 34px;
    background: url(../img/design/bg_top-ranking.png) 0 0 repeat;
}

.dg-ranking p {
    margin: 0;
}

.dg-ranking__heading,
.dg-ranking__band,
.dg-ranking__photo {
    /* 画像の下に隙間ができないようにします */
    line-height: 0;
    margin: 0;
}

.dg-ranking__heading img,
.dg-ranking__band img,
.dg-ranking__photo img {
    vertical-align: bottom;
}

/* Best1〜3 の写真: 帯の間を専用の背景でつなぎ、中央に置く */
.dg-ranking__photo {
    text-align: center;
    background: url(../img/design/bg_top-ranking-body.png) 0 0 repeat-y;
}

.dg-ranking__photo img {
    width: 135px;
    height: auto;
}

/* Best4 以降の写真の白枠 */
.dg-ranking__frame {
    border: 3px solid #fff;
    height: auto;
}

/* Best4 / Best5: 番号と写真を横に並べる */
.dg-ranking__pair {
    display: flex;
    justify-content: space-between;
    width: 159px;
    overflow: hidden;
}

.dg-ranking__pair--4 {
    padding: 11px 10px 16px 11px;
}

.dg-ranking__pair--5 {
    padding: 0 10px 20px 11px;
}

.dg-ranking__pair .dg-ranking__label,
.dg-ranking__pair .dg-ranking__pairPhoto {
    line-height: 0;
}

.dg-ranking__pair--4 .dg-ranking__label {
    width: 53px;
    padding: 27px 0 0 3px;
    flex: 0 0 auto;
}

.dg-ranking__pair--5 .dg-ranking__label {
    width: 42px;
    padding: 24px 3px 0 0;
    flex: 0 0 auto;
}

.dg-ranking__pairPhoto img {
    width: 95px;
}

/* Best6〜9: 2列 */
.dg-ranking__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 164px;
    padding: 0 8px;
}

.dg-ranking__cell {
    width: 80px;
    text-align: center;
    padding: 0 0 11px;
}

.dg-ranking__cell p,
.dg-ranking__last p {
    padding: 0 0 5px;
    line-height: 0;
}

.dg-ranking__cell img,
.dg-ranking__last img {
    vertical-align: bottom;
}

.dg-ranking__cell a img,
.dg-ranking__last a img {
    width: 74px;
}

/* Best10: 中央に1つ */
.dg-ranking__last {
    width: 180px;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 768px) {
    /* スマホではサイドカラムが本文の下に縦に積まれるため、
       180px のブロックを中央に寄せます (案内バナーと同じ扱い) */
    .dg-ranking {
        margin: 0 auto 24px;
    }
}

/* ============================================================
   ご注文ガイド (/guide)

   旧サイトの user_data/shopguide.php の再現です。
   テンプレートは Help/guide.twig。

   【旧CSSの実測値】 (packages/default/css/add.css)
   ・本文幅 750px、見出し画像 750x38 / 750x35
   ・小見出し (.shopguide_sub1) … 背景 #eaa169、白文字、太字 14px、左右 5px
   ・■印 (.shopguide_font_color1) … #a68e74
   ・口座などの枠 (.shopguide_bg1) … 背景 #f6ede0、太字 14px、余白 10px、幅 250px
   ・段落の下余白 30px (.mb30)、小見出しの下余白 10px (.mb10)
   ============================================================ */

.dg-guide {
    color: var(--dg-text);
    font-size: 12px;
    line-height: 1.5;
}

.dg-guide img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.dg-guide__title,
.dg-guide__heading {
    line-height: 0;
    margin: 0 0 20px;
}

.dg-guide__heading {
    margin-top: 10px;
}

/* スマホ用のテキスト見出し。PCでは隠します */
.dg-guide__titleText,
.dg-guide__headingText {
    display: none;
}

/* ページ内リンク (旧は「・」区切りの1行) */
.dg-guide__nav {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

.dg-guide__nav li::before {
    content: "・";
}

/* 小見出し (旧 .shopguide_sub1) */
.dg-guide__sub {
    margin: 0 0 10px;
    line-height: 1.5;
}

.dg-guide__sub span {
    display: inline-block;
    background-color: #eaa169;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 0 5px;
}

.dg-guide__body {
    margin: 0 0 30px;
}

.dg-guide__body--last {
    margin-bottom: 50px;
}

.dg-guide__body p {
    margin: 0;
}

/* ■印 */
.dg-guide__mark {
    color: #a68e74;
    font-weight: bold;
    margin-right: 5px;
}

.dg-guide__small {
    font-size: 11px;
}

/* step1〜4 のアイコン付き見出し */
.dg-guide__step {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 5px;
}

/* 口座番号などの枠 (旧 .shopguide_bg1) */
.dg-guide__box {
    background-color: #f6ede0;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
}

@media screen and (max-width: 768px) {
    /* 750px の見出し画像は読めないので、テキストの見出しに切り替えます */
    .dg-guide__title img,
    .dg-guide__heading img {
        display: none;
    }

    .dg-guide__title,
    .dg-guide__heading {
        line-height: 1.4;
    }

    .dg-guide__titleText {
        display: block;
        font-size: 20px;
        font-weight: bold;
    }

    .dg-guide__headingText {
        display: block;
        font-size: 16px;
        font-weight: bold;
        border-left: 4px solid #eaa169;
        padding-left: 8px;
    }
}

/* ============================================================
   トップ中央カラム: シーン別に選ぶ / ギフトセレクション / 特集バナー
   下層ページ: セレクション

   旧サイトの #topScene / #topGift / #new_banner / #selection の再現です
   (common.css 538〜625行、1244〜1392行、2322行)。
   テンプレートは Block/dg_top_scene.twig, dg_top_gift.twig,
   dg_top_feature.twig, dg_selection.twig。

   旧CSSは content-box 前提の寸法なので、週間ランキングと同じく
   この4ブロックの中だけ content-box に戻します。
   ============================================================ */

.dg-topScene, .dg-topScene *,
.dg-topGift, .dg-topGift *,
.dg-topFeature, .dg-topFeature *,
.dg-selection, .dg-selection * {
    box-sizing: content-box;
}

/* ---- シーン別に選ぶ (旧 #topScene) ---- */
.dg-topScene {
    width: 540px;
    overflow: hidden;
    background: url(../img/design/bg_top-scene.png) 0 0 no-repeat;
    padding: 14px 10px 42px;
}

.dg-topScene__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 540px;
    display: flex;
    flex-wrap: wrap;
}

.dg-topScene__item {
    width: 180px;
    padding-bottom: 11px;
    line-height: 0;
}

.dg-topScene__item h3 {
    margin: 0;
    line-height: 0;
}

.dg-topScene__item img {
    vertical-align: bottom;
}

/* ---- ギフトセレクション (旧 #topGift) ----
   2026年10月20日に渡辺様のご指示でトップから外したため、現在は使われていません
   (ImportBlockCommand で配置していません)。戻す可能性があるので残しています。 */
.dg-topGift {
    width: 560px;
    overflow: hidden;
    padding: 0 0 16px;
}

.dg-topGift__heading {
    margin: 0;
    line-height: 0;
}

.dg-topGift__list {
    list-style: none;
    margin: 0;
    padding: 26px 0 0;
    width: 560px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.dg-topGift__item {
    width: 181px;
    padding: 0 0 15px;
}

.dg-topGift__banner {
    line-height: 0;
}

.dg-topGift__banner img {
    vertical-align: bottom;
}

.dg-topGift__link {
    margin: 0;
    padding: 2px 0 0;
    text-align: right;
    font-size: 10px;
    line-height: 18px; /* 旧サイトは body の line-height 18px 固定 */
}

.dg-topGift__link a {
    text-decoration: underline;
}

/* ---- 特集バナー (旧 #new_banner) ---- */
.dg-topFeature {
    width: 560px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.dg-topFeature__item {
    width: 270px;
    padding-bottom: 20px;
    line-height: 0;
}

.dg-topFeature__item img {
    vertical-align: bottom;
}

/* ---- 下層セレクション (旧 #selection) ---- */
.dg-selection {
    width: 750px;
    overflow: hidden;
    padding: 0 0 100px;
    font-size: 12px;
}

.dg-selection p {
    margin: 0;
}

.dg-selection__colorList,
.dg-selection__giftList,
.dg-selection__boxLinks,
.dg-selection__rareList,
.dg-selection__contents {
    /* ".dg-selection ul" と書くと、この後の padding 指定 (クラス1つ) より
       強くなって上書きしてしまうため、クラス名で個別に初期化します */
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-selection__heading,
.dg-selection__banner,
.dg-selection__rareHeading h3 {
    margin: 0;
    line-height: 0;
}

.dg-selection img {
    vertical-align: bottom;
}

/* 10px の下線付きリンク (旧 .smallRLink) */
.dg-selection__smallLink {
    text-align: right;
    font-size: 10px;
    padding: 3px 0 0;
    line-height: 18px; /* 旧サイトは body の line-height 18px 固定 */
}

.dg-selection__smallLink a {
    text-decoration: underline;
}

/* (1) 色で選ぶ / ギフト の枠 (旧 #selection01)
   2026年10月20日に枠ごと外したため、ここから .dg-selection__boxLinks a までは
   現在使われていません (Block/dg_selection.twig)。戻す可能性があるので残しています。 */
.dg-selection__box {
    width: 750px;
    overflow: hidden;
    padding: 0 0 36px;
}

.dg-selection__inner {
    width: 750px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    background: url(../img/design/bg_category-recommend.png) 0 0 repeat;
}

.dg-selection__color {
    width: 340px;
    padding: 16px 4px 8px 18px;
    background: url(../img/design/line_related-color.png) right 16px no-repeat;
}

.dg-selection__colorList {
    width: 340px;
    overflow: hidden;
    padding: 11px 0 0;
    display: flex;
    flex-wrap: wrap;
}

.dg-selection__colorList li {
    width: 66px;
    margin: 0 19px 12px 0;
    /* 旧サイトはここに line-height:0 が無く、画像の下に
       ベースライン分の隙間 (約4px) が出ていました。同じにします */
    line-height: 18px;
}

.dg-selection__colorList li img {
    vertical-align: baseline;
}

.dg-selection__gift {
    width: 370px;
    padding: 16px 6px 8px 12px;
}

.dg-selection__giftList {
    width: 370px;
    overflow: hidden;
    padding: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
}

.dg-selection__giftList li {
    width: 117px;
    margin: 0 6px 8px 0;
}

.dg-selection__boxLinks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    line-height: 18px;
}

.dg-selection__boxLink--left {
    width: 346px;
    padding: 8px 14px 0 0;
    text-align: right;
}

.dg-selection__boxLink--right {
    width: 390px;
    padding: 8px 0 0;
    text-align: right;
}

.dg-selection__boxLinks a {
    text-decoration: underline;
}

/* (2) レア度100% (旧 #selection02) */
.dg-selection__rare {
    width: 750px;
    overflow: hidden;
    padding: 0 0 28px;
}

.dg-selection__rareList {
    width: 740px;
    overflow: hidden;
    margin: 0 0 0 10px;
    display: flex;
    background: url(../img/design/bg_related-rare.png) right top no-repeat;
}

.dg-selection__rareList li {
    line-height: 0;
}

.dg-selection__rare .dg-selection__smallLink {
    padding-top: 8px;
}

/* (3) 読みもの (旧 #selection03) */
.dg-selection__contents {
    width: 750px;
    overflow: hidden;
    display: flex;
    gap: 0 22px;
}

.dg-selection__contents li {
    width: 235px;
}

.dg-selection__contents .dg-selection__smallLink {
    padding-top: 8px;
}

@media screen and (max-width: 768px) {
    /* 中央カラムが画面幅になるため、固定幅を解除して 2 列に落とします */
    .dg-topScene {
        width: auto;
        padding: 14px 8px 24px;
        background-size: 100% auto;
    }

    .dg-topScene__list {
        width: auto;
        justify-content: center;
    }

    .dg-topScene__item {
        width: 50%;
        max-width: 180px;
        text-align: center;
    }

    .dg-topScene__item img {
        max-width: 100%;
        height: auto;
    }

    .dg-topGift,
    .dg-topGift__list,
    .dg-topFeature,
    .dg-selection,
    .dg-selection__box,
    .dg-selection__inner,
    .dg-selection__rare,
    .dg-selection__contents {
        width: auto;
    }

    .dg-topGift__heading img {
        max-width: 100%;
        height: auto;
    }

    .dg-topGift__list {
        justify-content: center;
    }

    .dg-topFeature {
        justify-content: center;
    }

    .dg-topFeature__item img {
        max-width: 100%;
        height: auto;
    }

    .dg-selection {
        padding-bottom: 40px;
    }

    /* 色とギフトは縦に積みます */
    .dg-selection__inner {
        flex-direction: column;
    }

    .dg-selection__color,
    .dg-selection__gift,
    .dg-selection__colorList,
    .dg-selection__giftList {
        width: auto;
        background-image: none;
    }

    .dg-selection__boxLinks {
        flex-direction: column;
    }

    .dg-selection__boxLink--left,
    .dg-selection__boxLink--right {
        width: auto;
        padding: 8px 0 0;
    }

    /* レア度は 3 列に折り返して並べます (画像は幅に合わせて少し縮めます) */
    .dg-selection__rareList {
        width: auto;
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
        background-image: none;
    }

    .dg-selection__rareList li {
        width: 33.33%;
        text-align: center;
    }

    .dg-selection__rareList li img {
        max-width: 100%;
        height: auto;
    }

    .dg-selection__contents {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   EC-CUBE 標準ページ (カート・購入手続き・会員登録・ログイン・
   お問い合わせ・パスワード再発行) の色味をサイトに揃える

   旧サイトのこれらのページは EC-CUBE 2.4 の標準デザインそのままで、
   再現する価値のある作り込みはありませんでした。そのため構造は
   EC-CUBE4 標準のまま使い、標準の赤 (#DE5D50) と紺 (#525263) だけを
   サイトの配色 (焦げ茶・ベージュ・オレンジ・カートの緑) に置き換えます。

   ・進む系のボタン (.ec-blockBtn--action / .ec-inlineBtn--action)
       … 商品詳細の「カートに入れる」と同じ緑
   ・戻る/ログイン系のボタン (.ec-blockBtn--cancel / .ec-inlineBtn--cancel)
       … 標準は紺。焦げ茶にします (ログイン画面の「ログイン」ボタンもこのクラスです)
   ・必須バッジ (.ec-required) … 赤 → オレンジ
   ・警告帯 (.ec-alert-warning) … 赤 → 薄いオレンジの地に焦げ茶の文字
   ・合計金額など赤字の価格 … オレンジ (旧サイトのセール色)
   ・入力欄のフォーカス枠 … 青 → ベージュ
   エラーメッセージの赤はそのまま残します (意味のある色のため)。
   商品詳細のボタンは別に指定済み (.ec-productRole …) で、そちらが優先されます。
   ============================================================ */

/* 進む系のボタン */
.ec-blockBtn--action,
.ec-inlineBtn--action {
    background-color: #7ba05b;
    border-color: #7ba05b;
    color: #fff;
    border-radius: 4px;
}

.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus {
    background-color: #8fb06d;
    border-color: #8fb06d;
    color: #fff;
}

.ec-blockBtn--action:disabled,
.ec-blockBtn--action.disabled,
.ec-inlineBtn--action:disabled,
.ec-inlineBtn--action.disabled {
    background-color: #c9c2b8;
    border-color: #c9c2b8;
    color: #fff;
}

/* 戻る / ログイン系のボタン */
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel {
    background-color: var(--dg-brown);
    border-color: var(--dg-brown);
    color: #fff;
    border-radius: 4px;
}

.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:focus,
.ec-inlineBtn--cancel:hover,
.ec-inlineBtn--cancel:focus {
    background-color: #7a675a;
    border-color: #7a675a;
    color: #fff;
}

/* 必須バッジ */
.ec-required {
    color: var(--dg-orange);
}

/* 警告帯 (カートの「ご確認ください」など) */
.ec-alert-warning {
    background: #fbe3cc;
}

.ec-alert-warning .ec-alert-warning__icon {
    /* 標準のアイコン画像は白抜きなので、薄い地では見えるように焦げ茶の丸を敷きます */
    background-color: var(--dg-brown);
    border-radius: 50%;
    padding: 4px;
}

.ec-alert-warning .ec-alert-warning__text {
    color: var(--dg-brown);
}

/* 赤字の価格をオレンジに */
.ec-cartRole .ec-cartRole__totalAmount,
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel,
.ec-login .ec-login__link {
    color: var(--dg-orange);
}

/* 入力欄のフォーカス枠 */
.ec-input input:focus,
.ec-birth input:focus,
.ec-select input:focus,
.ec-telInput input:focus,
.ec-zipInput input:focus,
.ec-numberInput input:focus,
.ec-halfInput input:focus,
.ec-input textarea:focus,
.ec-halfInput textarea:focus {
    border-color: var(--dg-beige-dark);
    box-shadow: 0 0 0 2px rgba(227, 201, 181, .35);
}

/* 購入手続きのステップ表示 (標準は青緑 #5CB1B1)。完了済みの丸を焦げ茶に */
.ec-progress .is-complete .ec-progress__number {
    background: var(--dg-brown);
}

.ec-progress .is-complete .ec-progress__label {
    color: var(--dg-brown);
}

/* ============================================================
   サイドカラムの検索ボックス・会員ボタン・カート・店舗紹介・QR (トップ左)
   とヘッダーの挨拶文

   旧サイトの #topItemSearch / #member / #chkCart / #topShopInfo /
   QRcode.tpl / #header_text の再現です (common.css の実測値)。
   旧サイトのヘッダーには検索・ログイン・カートが無く、
   検索は左カラム、ログイン・カートは右カラムの画像ボタンでした。
   EC-CUBE4 標準のヘッダー検索行 (.dg-header__nav) はスマホ専用にします。
   ============================================================ */

/* ---- ヘッダーの挨拶文 (旧 #header_text: ロゴの右、11px / 行間 1.8、幅 345) ---- */
.dg-header__text {
    /* 旧は幅 345px でロゴの右に絶対配置していました。
       ここでは flex の残り幅 (ロゴ 274 と連絡先 347 を引いた約 305px) に収め、
       文は br の位置で 3 行、長い行は折り返します (旧も 345px で 4 行に折れていました) */
    flex: 1 1 0;
    min-width: 0;
    max-width: 345px;
    margin: 7px 0 0;
    font-size: 11px;
    line-height: 1.8;
    color: var(--dg-text);
    align-self: flex-start;
}

/* ---- PC では標準の検索/ログイン/カート行を隠す (スマホ専用) ---- */
.dg-header__nav--sp {
    display: none;
}

/* ---- 検索ボックス (旧 #topItemSearch) ---- */
.dg-sideSearch,
.dg-sideSearch * {
    box-sizing: content-box;
}

.dg-sideSearch {
    width: 160px;
    overflow: hidden;
    margin: 0 0 23px;
    padding: 41px 10px 7px;
    background: url(../img/design/bg_sidenav-search.png) 0 0 no-repeat;
}

.dg-sideSearch p {
    margin: 0;
}

.dg-sideSearch__input input {
    width: 158px;
    height: 21px;
    padding: 1px 2px;
    border: 1px solid #a9a9a9;
    border-radius: 0;
    font-size: 12px;
    background: #fff;
}

.dg-sideSearch__btn {
    line-height: 0;
}

.dg-sideSearch__btn button {
    margin: 8px 0 0 122px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.dg-sideSearch__btn img {
    vertical-align: bottom;
}

/* ---- 会員ボタン (旧 #member) ---- */
.dg-sideMember {
    width: 180px;
    overflow: hidden;
    padding-bottom: 15px;
}

.dg-sideMember__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 180px;
}

.dg-sideMember__list li {
    line-height: 0;
}

.dg-sideMember__list img {
    vertical-align: bottom;
}

.dg-sideMember__welcome {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: bold;
    color: var(--dg-brown);
    text-align: center;
}

.dg-sideMember__logout {
    margin: 6px 0 0;
    font-size: 11px;
    text-align: right;
}

.dg-sideMember__logout a {
    color: var(--dg-brown);
    text-decoration: underline;
}

/* ---- カートの状態 (旧 #chkCart) ---- */
.dg-sideCart,
.dg-sideCart * {
    box-sizing: content-box;
}

.dg-sideCart {
    width: 180px;
    overflow: hidden;
    margin-top: 15px;
    padding: 40px 0 30px;
    background: url(../img/design/bg_sidenav-cart.png) 0 0 no-repeat;
}

.dg-sideCart__btn {
    margin: 0 10px;
    padding: 0 0 16px 12px;
    line-height: 0;
    text-align: left;
}

.dg-sideCart__btn img {
    vertical-align: bottom;
}

.dg-sideCart__text {
    margin: 0 10px;
    text-align: center;
    color: #59493f;
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    text-indent: -1em;
}

/* ---- 店舗紹介バナー (旧 #topShopInfo) と QR (旧 QRcode.tpl) ---- */
.dg-leftShopinfo {
    margin: 0;
    padding-bottom: 5px;
    line-height: 0;
}

.dg-leftShopinfo img {
    vertical-align: bottom;
}

.dg-topQr {
    margin: 0 0 0 30px;
    line-height: 0;
}

@media screen and (max-width: 768px) {
    /* スマホでは標準の検索/ログイン/カート行を出し、
       画像ボタンの会員ブロックとカートは中央に寄せます */
    .dg-header__nav--sp {
        display: flex;
    }

    .dg-header__text {
        display: none;
    }

    .dg-sideSearch,
    .dg-sideMember,
    .dg-sideCart {
        margin-left: auto;
        margin-right: auto;
    }

    .dg-sideSearch {
        margin-bottom: 16px;
    }

    .dg-leftShopinfo,
    .dg-topQr {
        text-align: center;
        margin-left: 0;
    }
}

/* ============================================================
   ヘッダーの連絡先画像とスマホ専用の検索・会員・カート

   連絡先は旧サイトと同じ画像 (header_contact1.png 267x58) に戻しました。
   スマホ専用の行 (.dg-header__sp) は、旧と同じ検索ボックス (dg_side_search) と
   文字のボタンで組みます。EC-CUBE4 標準の検索行は使いません。
   ============================================================ */

.dg-header__contactImg {
    margin: 0;
    line-height: 0;
}

.dg-header__contactImg img {
    vertical-align: bottom;
}

/* PC では出さない */
.dg-header__sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .dg-header__sp {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 4px 0 6px;
        gap: 6px;
    }

    /* 検索ボックスは旧の 180px の箱をそのまま中央に */
    .dg-header__sp .dg-sideSearch {
        margin: 0;
    }

    /* ログイン / 会員登録 / カート の文字ボタン */
    .dg-header__spNav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .dg-header__spNav a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--dg-beige-dark);
        border-radius: 4px;
        background: var(--dg-cream);
        color: var(--dg-brown);
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
    }

    /* 連絡先画像は 267px なので狭い画面でも縮めずそのまま */
    .dg-header__contactArea {
        width: 100%;
        align-items: center;
        margin-left: 0;
    }
}

@media screen and (max-width: 768px) {
    /* スマホではユーティリティリンクを中央に寄せ、
       折り返したときに行末に区切り線が残らないようにします */
    .dg-header__utility {
        justify-content: center;
        gap: 4px 0;
    }

    .dg-header__utility li:not(:last-child)::after {
        margin: 0 6px;
    }
}