/* rd_header (作り直しの mock): ヘッダ ・ SP の menu ・ ジャンルのパネル。店の色は赤 #7E0308 と金 #D99A23 */
.rd-hd { background: #7E0308; position: relative; }
.rd-hd__bar { display: flex; align-items: center; height: 70px; padding: 0 20px; gap: 16px; background: #7E0308; }
.rd-hd .headerLogo { margin: 0; flex: none; line-height: 0; }
.rd-hd .headerLogo img { display: block; width: 165px; height: auto; }

/* 標準の「ロゴ」「カテゴリナビ(PC)」ブロックは中身が見出しだけ ・ 空なので出さない (以前は固定の内側のヘッダの裏に隠れていた) */
.ec-layoutRole__header > .ec-headerRole, .ec-layoutRole__header > .ec-categoryNaviRole { display: none; }

/* ジャンルから探す (PC) */
.rd-genre { position: relative; height: 70px; display: flex; align-items: center; flex: none; }
.rd-genre__btn { height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: #D99A23; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: .05em; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rd-genre__btn:hover, .rd-genre__btn[aria-expanded="true"] { background: #C48A1B; }
.rd-genre__caret { width: 0; height: 0; border: 6px solid transparent; border-top: 8px solid #fff; border-bottom: 0; transition: transform .2s; }
.rd-genre__btn[aria-expanded="true"] .rd-genre__caret { transform: rotate(180deg); }
.rd-genre__panel { position: absolute; top: 100%; left: 0; z-index: 120; width: 900px; max-width: calc(100vw - 40px); box-sizing: border-box; max-height: calc(100vh - 90px); overflow-x: hidden; overflow-y: auto; padding: 14px; background: #fff; border-top: 3px solid #D99A23; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.rd-genre__panel[hidden] { display: none; }
.rd-genre__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.rd-gtile { display: block; position: relative; aspect-ratio: 291 / 110; background: #eee; border: 1px solid #ddd; overflow: hidden; text-decoration: none; }
.rd-gtile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-gtile--text { background: #FBF1DC; border-color: #E5C98F; display: flex; align-items: center; justify-content: center; padding: 2px 6px; }
.rd-gtile--text span { color: #7E0308; font-size: 12px; font-weight: bold; text-align: center; line-height: 1.25; }
.rd-gtile:hover { outline: 2px solid #D99A23; outline-offset: -2px; opacity: 1; }
.rd-gtile.is-current { outline: 3px solid #D99A23; outline-offset: -3px; }

/* 検索窓: 角丸なしの四角、虫眼鏡は店の赤 */
.rd-search { display: flex; flex: 1 1 auto; min-width: 0; max-width: 560px; height: 42px; margin: 0; background: #fff; border: 0; border-radius: 0; }
.rd-search__input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 12px; border: 0; border-radius: 0; outline: 0; background: #fff; color: #222; font-size: 14px; -webkit-appearance: none; appearance: none; }
.rd-search__input::placeholder { color: #888; text-overflow: ellipsis; }
.rd-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rd-search:focus-within { box-shadow: 0 0 0 3px #D99A23; }
.rd-search__btn { flex: none; width: 46px; height: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid #ddd; border-radius: 0; background: #fff; color: #B80A11; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rd-search__btn:hover { background: #FBF1DC; }

/* ガイド ・ お問い合わせ ・ お知らせ ・ ログイン ・ カート (PC) */
.rd-links { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: none; }
.rd-links a { color: #fff; text-decoration: none; font-size: 13px; font-weight: bold; white-space: nowrap; }
.rd-links a.rd-links__text:hover { text-decoration: underline; opacity: 1; }
.rd-links__login, .rd-links__cart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 0; }
.rd-links__login { border: 1px solid #fff; }
.rd-links__login:hover { background: rgba(255, 255, 255, .15); opacity: 1; }
.rd-links__cart { background: #D99A23; }
.rd-links__cart:hover { background: #C48A1B; opacity: 1; }
.rd-links__price { font-size: 12px; font-weight: normal; opacity: .95; }

/* 本文の位置 (固定ヘッダ 70px) */
@media only screen and (min-width: 961px) {
    .ec-layoutRole { padding-top: 70px; }
    .rd-hd .rd-sp { display: none !important; }
}

/* SP: ヘッダ 60px + 検索窓。menu ボタンは右上の金のまま */
@media only screen and (max-width: 960px) {
    .rd-hd__bar { height: 60px; padding: 0 70px 0 10px; gap: 8px; }
    .rd-hd .headerLogo img { width: 100px; }
    .rd-search { height: 36px; max-width: none; }
    .rd-search__input { font-size: 16px; padding: 0 8px; }
    .rd-search__btn { width: 38px; }
    .rd-hd .headerBtnSp { display: flex; flex: none; align-items: center; }
    .rd-hd .headerBtnSp a { width: 32px; margin: 0; }
    .rd-hd .headerBtnSp a img { display: block; width: 32px; height: 32px; }

    /* menu の中身 */
    #gNavi.rd-menu { padding: 10px 10px 24px; background: #fff; }
    .rd-menu ul { margin: 0; padding: 0; list-style: none; }
    .rd-menu__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
    .rd-menu__links a { display: flex; align-items: center; justify-content: center; height: 40px; padding: 2px; border: 1px solid #7E0308; border-radius: 0; background: #fff; color: #7E0308; font-size: 12px; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; }
    .rd-menu__links a.is-first { background: #7E0308; color: #fff; }
    .rd-menu__heading { margin: 16px 2px 8px; padding-bottom: 4px; border-bottom: 2px solid #7E0308; color: #7E0308; font-size: 14px; font-weight: bold; }
    .rd-menu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .rd-mtile { display: flex; flex-direction: column; height: 106px; overflow: hidden; background: #fff; color: #222; text-decoration: none; border: 3px solid transparent; }
    .rd-mtile img { display: block; width: 100%; height: auto; aspect-ratio: 291 / 110; object-fit: cover; border: 1px solid #ddd; box-sizing: border-box; flex: none; }
    .rd-mtile__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; padding: 0 2px; font-size: 12px; font-weight: bold; line-height: 1.3; }
    .rd-mtile--text { background: #7E0308; border-color: #7E0308; align-items: center; justify-content: center; }
    .rd-mtile__text { padding: 2px 8px; color: #fff; font-size: 12px; font-weight: bold; line-height: 1.3; text-align: center; }
    .rd-mtile.is-current { border-color: #D99A23; }
    .rd-mtile.is-current img { border-color: transparent; }
    .rd-menu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 14px; }
    .rd-menu__foot a { display: inline-block; padding: 12px 4px; color: #555; font-size: 12px; text-decoration: underline; } /* 押せる高さ 40px (11-04 見比べ、14px だった) */
}
@media only screen and (max-width: 359px) {
    .rd-hd .headerLogo img { width: 84px; }
}

/* 広い画面では本文 (.ec-inner02 の 1480px) と同じ幅に揃える。ロゴが左端に離れない */
@media only screen and (min-width: 961px) {
    .rd-hd__bar { max-width: 1480px; margin: 0 auto; box-sizing: border-box; }
}