@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Yuji+Boku&family=Shippori+Mincho:wght@700;800&family=Noto+Serif+JP:wght@700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ============================================
   十三店サイト カスタムスタイル(上書き調整)
   ============================================ */

/* オーバーレイ廃止:画像自体を十三店専用に差し替え済み */

/* ============================================
   お知らせセクション:カレンダー画像を非表示・お知らせを中央寄せ
   ============================================ */
#top_information .calendar_box {
  display: none !important;
}
#top_information .info_area {
  display: block !important;
  width: 100% !important;
}
#top_information .news_box {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  float: none !important;
}
#top_information .news_box .scl {
  max-height: 500px !important;
  overflow-y: auto !important;
}

/* ============================================
   top_campaign セクション:横長キャンペーン画像を全幅表示
   ============================================ */
/* #top_campaign セクション本体の全幅bg(camp_bg.jpg)を解除して、
   アクセスマップ(.container max-width:1000px)と横幅揃える(2026-05-14) */
#top_campaign,
section#top_campaign {
  background-image: none !important;
  background-color: #ffffff !important;
}
#top_campaign .container_w {
  max-width: 1000px !important;
  width: 94% !important;
}
#top_campaign .campaign-wrapper {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  text-align: center;
  padding: 20px 0;
}
#top_campaign .campaign-wrapper img {
  width: 100% !important;
  max-width: 1000px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 遺品整理バナーセクションの赤背景(pt03.png+base-color01)を白に(2026-05-14) */
#cleanup_bana_area {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* 店舗情報(#access)セクションの縦バランス改善(2026-05-14)
   ※ HTMLのセクションIDは #access、内側のdivは .access_area
   store_info(住所/営業時間/休日/古物商の4行)が store_img(店舗写真)より
   背が低くて下に余白できてた問題を解消。 */
@media only screen and (min-width: 1025px) {
  .access_wrap {
    align-items: stretch !important;
    padding-bottom: 1% !important;
  }
  .access_wrap .store_info {
    display: flex !important;
    flex-direction: column;
  }
  .access_wrap .store_info ul {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-evenly !important;
    margin: 0 !important;
  }
  .access_wrap .store_info ul li:not(:first-child) {
    margin-top: 0 !important;
  }
}
/* スマホ版での余白削減(2026-05-14)
   ※ スマホでは store_img(order:1) → store_info(order:2) の順で並ぶ。
   store_info の直下に .store_contact (margin-top:3% + padding-top:3%) があり、
   これが「下の余白」の正体。あわせて削減 */
@media only screen and (max-width: 1024px) {
  .access_wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .access_wrap .store_info {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .access_wrap .store_img {
    margin-bottom: 0.5rem !important;
  }
  .access_area .store_contact {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
  #access .container {
    padding-bottom: 20px !important;
  }
  #access .store_info ul li:not(:first-child) {
    margin-top: 8px !important;
  }
}
/* スマホ・タブレット(縦並び)の余白も詰める(2026-05-14)
   store_info の下、.access_wrap 下のパディングを圧縮 */
@media only screen and (max-width: 1024px) {
  .access_wrap {
    padding-bottom: 0 !important;
  }
  .access_wrap .store_info {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .access_wrap .store_info ul {
    margin-bottom: 0 !important;
  }
  .access_wrap .store_info ul li:last-child {
    margin-bottom: 0 !important;
  }
  #top_access .container {
    padding-bottom: 20px !important;
  }
}
#top_campaign .campaign-wrapper img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 4px;
}



/* ============================================
   ロゴ:十三店画像ロゴ(Retina対応)
   - ヘッダー:logo_h.png(940×140 を CSS で 470×70 表示)
   - フッター:logo_f.png(1320×320 を CSS で 660×160 表示)
   ============================================ */

#header h1 a img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 470px;
  max-height: 70px;
}
#header h1 .logo-icon-circle,
#header h1 .logo-text-block {
  display: none !important;
}

footer h1 img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 330px;
  max-height: 80px;
}
footer h1 .logo-icon-circle,
footer h1 .logo-text-block {
  display: none !important;
}

#header h1 a {
  display: inline-block !important;
  text-decoration: none !important;
}

.logo-icon-circle {
  width: 56px;
  height: 56px;
  background: #2d6e3e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN", serif;
  border: 2px solid #1d4f2c;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
}

.logo-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-tagline {
  font-size: 13px;
  background: #c8102e;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  width: fit-content;
  font-weight: 600;
  font-family: "游ゴシック体", "Yu Gothic", sans-serif;
  letter-spacing: 0.05em;
}

.logo-main {
  font-family: "Yuji Boku", "Shippori Mincho", "ヒラギノ明朝 ProN W6", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.logo-main .otakaraya {
  color: #c8102e;
}

.logo-main .juso {
  color: #1a1a1a;
}

@media screen and (max-width: 768px) {
  .logo-icon-circle { width: 44px; height: 44px; font-size: 11px; }
  .logo-tagline { font-size: 10px; padding: 2px 6px; }
  .logo-main { font-size: 24px; }
  #header h1 a img { max-width: 360px; max-height: 54px; }
}

@media screen and (max-width: 599px) {
  .logo-main { font-size: 22px; }
  #header h1 a img { max-width: 280px; max-height: 42px; }
}

@media screen and (max-width: 380px) {
  #header h1 a img { max-width: 240px; max-height: 36px; }
}

/* フッターロゴ もテキスト化 */
footer .ft_left h1,
footer .shop_name h1 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: none !important;
}

footer .logo-icon-circle {
  width: 50px;
  height: 50px;
  background: #2d6e3e;
  border: 2px solid #1d4f2c;
  font-size: 12px;
}

footer .logo-main {
  font-size: 28px;
  color: #1a1a1a;
}

footer .logo-tagline {
  font-size: 11px;
}

/* ============================================
   ブランド一覧:商品画像をしっかり表示
   ============================================ */
#brand_list {
  background: #fffbe8 !important;
  background-image: none !important;
  padding: 60px 0 !important;
}

#brand_list h2.t_title2,
#brand_list h2.t_title2 span,
#brand_list p.rmess {
  color: #c8102e !important;
}

#brand_list .blist_area {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 30px 0 !important;
  list-style: none !important;
}

#brand_list .blist_area li {
  background: #ffffff !important;
  border: 1px solid #d8af11 !important;
  border-radius: 6px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  list-style: none !important;
  width: auto !important;
  margin: 0 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  display: block !important;
}

#brand_list .blist_area li:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(200,16,46,0.18) !important;
  border-color: #c8102e !important;
}

#brand_list .blist_area li img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 80px !important;
  height: auto !important;
  margin: 0 auto 10px !important;
  object-fit: contain !important;
}

#brand_list .blist_area li p {
  font-size: 13px !important;
  color: #6b4f00 !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: normal !important;
}

@media screen and (max-width: 1024px) {
  #brand_list .blist_area {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media screen and (max-width: 599px) {
  #brand_list .blist_area {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  #brand_list .blist_area li {
    padding: 10px 6px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  #brand_list .blist_area li p {
    font-size: 11px !important;
  }
  #brand_list .blist_area li img {
    max-height: 60px !important;
  }
}

/* ============================================
   アクセスセクション(.access_title)の背景を茶色 → 赤に変更(2026-04-29)
   ============================================ */
.access_area {
  border-color: #c8102e !important;
}
.access_title {
  background-color: #c8102e !important;
  background-image: none !important;
}

/* ============================================
   お知らせセクション(.news_box h2)の茶色 → 赤に変更
   ============================================ */
.news_box {
  border-color: #c8102e !important;
}
.news_box h2 {
  background-color: #c8102e !important;
}

/* ============================================
   #purchase_way の見出し「買取方法」 余白とサイズ調整(2026-04-29)
   上の余白を詰めて、見出しと帯文字を大きく
   ============================================ */
#purchase_way {
  padding-top: 30px !important;
}
#purchase_way h2.t_title {
  margin-bottom: 16px !important;
}
#purchase_way .flex_box li h3 {
  font-size: 2.6rem !important;
  padding: 20px 5px 6px !important;
  line-height: 1.2 !important;
}
#purchase_way .flex_box li h3 span {
  font-size: 0.9rem !important;
}
#purchase_way .flex_box p {
  font-size: 1.25rem !important;
  padding: 12px 5px !important;
  font-weight: 700 !important;
}
@media screen and (max-width: 599px) {
  #purchase_way {
    padding-top: 20px !important;
  }
  #purchase_way .flex_box li h3 {
    font-size: 2.2rem !important;
    padding: 18px 5px 5px !important;
  }
  #purchase_way .flex_box li h3 span {
    font-size: 0.8rem !important;
  }
  #purchase_way .flex_box p {
    font-size: 1.15rem !important;
    padding: 12px 5px !important;
  }
}

/* ============================================
   #reason「選ばれている３つの理由」のカード中央寄せ(2026-04-29)
   元 li が flex-direction:column なので align-items:center で揃える
   h3 内の <strong> 以外のテキスト(「多数！」など)が白文字で見えなかったため
   見える色に変更し、見出し全体が中央寄せに見えるよう調整
   ============================================ */
#reason .rlist ul li {
  align-items: center !important;
  text-align: center !important;
}
#reason .rlist ul li img {
  display: block !important;
  margin: 0 auto 12px !important;
}
#reason .rlist ul li h3 {
  text-align: center !important;
  text-indent: 0 !important;
  width: 100% !important;
  color: #c8102e !important; /* 「多数！」等を赤で表示(白背景でも見える) */
}
#reason .rlist ul li p {
  text-align: center !important;
  width: 100% !important;
}

/* ============================================
   買取品目一覧(items/index.html)のカード高さ揃え(2026-04-29)
   各カードの中身(画像+テキスト)で高さが変わると枠がガタつくのを防ぐ
   ============================================ */
.items-list-grid {
  align-items: stretch !important;
}
.items-list-grid > a {
  display: flex !important;
  height: 100% !important;
}
.items-list-grid > a > div {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 180px !important;
}
.items-list-grid > a > div > img {
  display: block !important;
  margin: 0 auto 8px !important;
  object-fit: contain !important;
  max-height: 100px !important;
  max-width: 100% !important;
  height: auto !important;
}
.items-list-grid > a > div > h3 {
  width: 100% !important;
  margin: 0 !important;
}

/* ============================================
   #line_assessment(Instagram誘導) → #brand_list の間の余白詰め(2026-04-29)
   ============================================ */
#line_assessment .container {
  padding-bottom: 30px !important;
}
#brand_list {
  padding: 30px 0 60px !important;
}

/* ============================================
   #promise「５つの約束」と #reason「選ばれている３つの理由」見出しを太く濃く(2026-04-29)
   ============================================ */
#promise h2,
#reason h2 {
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  color: #c8102e !important;
}
#promise h2 span,
#reason h2 span {
  font-weight: 900 !important;
  color: #1a1a1a !important;
}
#reason h2 strong {
  font-weight: 900 !important;
  color: #c8102e !important;
}

/* ============================================
   #achievement「最新買取実績」見出しを太く・濃く(2026-04-29)
   ============================================ */
#achievement h2.t_title2 {
  font-weight: 900 !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
}
#achievement h2.t_title2 strong {
  color: #ffd700 !important; /* より明るい金色で視認性UP */
  font-weight: 900 !important;
  -webkit-text-stroke: 0.5px #6b4f00;
}
#achievement h2.t_title2 span {
  color: #ffffff !important;
  font-weight: 900 !important;
}
#achievement p.rmess {
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* ============================================
   #reason → #bnr_area(求人バナー)の間の余白詰め(2026-04-29)
   ============================================ */
#reason .container {
  padding-bottom: 30px !important;
}
#bnr_area {
  padding-top: 0 !important;
}
#bnr_area .wide_img_box {
  margin-top: 0 !important;
}

/* ============================================
   #top_greeting と次セクションの間の余白詰め(2026-04-29)
   元の top.css は padding-bottom: 160-200px と過剰やったので調整
   ============================================ */
#top_greeting .container {
  padding-bottom: 60px !important;
}
@media screen and (max-width: 768px) {
  #top_greeting .container { padding-bottom: 50px !important; }
}
@media screen and (max-width: 429px) {
  #top_greeting .container { padding-bottom: 40px !important; }
}

/* ============================================
   Google口コミバナー(2026-04-29)
   ============================================ */
#google_review_banner {
  background: #fffbe8;
  padding: 30px 0;
  width: 100%;
  display: block;
}
#google_review_banner .g-review-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}
#google_review_banner .g-review-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #ffffff;
  border: 2px solid #d8af11;
  border-radius: 12px;
  padding: 20px 40px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
#google_review_banner .g-review-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(200,16,46,0.18);
  border-color: #c8102e;
}
#google_review_banner .g-review-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  line-height: 1.1;
}
#google_review_banner .g-review-score {
  color: #c8102e;
  font-size: 2.6rem;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.02em;
}
#google_review_banner .g-review-stars {
  color: #f4b400;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
#google_review_banner .g-review-count {
  color: #666;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
}
#google_review_banner .g-review-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
#google_review_banner .g-review-text strong {
  display: block;
  color: #c8102e;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
#google_review_banner .g-review-text small {
  display: block;
  color: #1a1a1a;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
}
#google_review_banner .g-review-arrow {
  color: #c8102e;
  font-size: 2.5rem;
  font-weight: bold;
  flex-shrink: 0;
}
@media screen and (max-width: 599px) {
  #google_review_banner { padding: 20px 0; }
  #google_review_banner .g-review-link { padding: 14px 14px; gap: 10px; }
  #google_review_banner .g-review-score { font-size: 1.6rem; }
  #google_review_banner .g-review-stars { font-size: 0.85rem; margin-top: 2px; }
  #google_review_banner .g-review-count { font-size: 0.75rem; margin-top: 2px; }
  #google_review_banner .g-review-text strong { font-size: 1.05rem; }
  #google_review_banner .g-review-text small { font-size: 1.05rem; color: #1a1a1a; font-weight: 700; margin-top: 4px; }
  #google_review_banner .g-review-arrow { font-size: 1.6rem; }
}

/* ============================================
   サイトテーマ:赤+黄色ミックス
   ============================================ */
:root {
  --base-color01: #c8102e;
  --nav-color: #c8102e;
  --pway-color01: #d8af11; /* 1枚目の「初めての方も大歓迎」の帯色を黄色/金に */
}
.nav.is-fixed,
.nav,
nav.nav { background-color: #c8102e !important; }
.nav .nav-menu .menu-link,
.nav .menu-item,
.nav .menu-link { color: #fff !important; }
/* ドロップダウン内は白背景なので、リンクは赤文字に戻す(モバイル) */
.nav .nav-menu .nav-dropdown .menu-link {
  color: #c8102e !important;
}
/* PC では赤背景に戻るため白文字を維持 */
@media (min-width: 1025px) {
  .nav .nav-menu .nav-dropdown .menu-link {
    color: #ffffff !important;
  }
}
h2.t_title strong { color: #c8102e !important; }
h2.t_title2 strong { color: #d8af11 !important; }

/* ============================================
   モバイル対応修正(2026-04-29)
   - 下部固定ボタン(.fixed-btn)がコンテンツに被る
   - お知らせ/買取実績の内部スクロールがタッチ操作で誤爆
   - 画像のずれ・タップしづらいリンクの修正
   ============================================ */

/* スマホでは下部固定バー(.fixed-btn 約60px)の分だけ本文末尾に余白を入れて、
   フッター末尾のリンクや「Googleマップで開く」ボタンが隠れないようにする */
@media only screen and (max-width: 1024px) {
  body { padding-bottom: 80px; }
  /* 下部固定バーのタップ判定確保(z-indexは固定バー>マップiframe) */
  .fixed-btn { z-index: 50 !important; }
  .fixed-btn dl dd a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(255,255,255,0.2);
  }
  /* 固定バーのボタン全体調整 */
  .fixed-btn dl {
    display: flex !important;
    align-items: stretch !important;
  }
  .fixed-btn dl dd {
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .fixed-btn dl dd .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  /* アイコン画像が存在しないので CSS だけで Font Awesome アイコン表示 */
  .fixed-btn dl dd .inner::before {
    background-image: none !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 2px !important;
    color: #fff !important;
  }
  .fixed-btn dl dd.fixed-btn-shop .inner::before { content: "\f54e"; } /* store */
  .fixed-btn dl dd.fixed-btn-line .inner::before { content: "\f4ad"; } /* comment-dots(LINE) */
  .fixed-btn dl dd.fixed-btn-tel .inner::before  { content: "\f095"; } /* phone */
  .fixed-btn dl dd.fixed-btn-top .inner::before  { content: "\f077"; } /* chevron-up */
  /* TOPボタンは白背景+赤文字で電話(赤)と区別(2026-05-14) */
  .fixed-btn dl dd.fixed-btn-top {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }
  .fixed-btn dl dd.fixed-btn-top .inner {
    color: #c8102e !important;
  }
  .fixed-btn dl dd.fixed-btn-top .inner::before {
    color: #c8102e !important;
  }
  /* LINE 査定ボタンは LINE 公式緑(2026-05-14) */
  .fixed-btn dl dd.fixed-btn-line {
    background-color: #06c755 !important;
    background-image: none !important;
  }
  /* ボーダー調整 */
  .fixed-btn dl dd + dd {
    border-left: 1px solid rgba(255,255,255,0.4) !important;
  }
}

/* PC では下バー .fixed-btn ごと非表示(共通CSSが fixed-btn-line の縦長緑タブを
   PC右端に出すデフォルト挙動を持つため、それも一緒に消す)(2026-05-14) */
@media only screen and (min-width: 1025px) {
  .fixed-btn {
    display: none !important;
  }
}

/* お知らせの内部スクロール(max-height:500px overflow:auto)は
   スマホでタッチがハマって本ページがスクロールできない事象が起きるため解除 */
@media only screen and (max-width: 768px) {
  #top_information .news_box .scl {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* 買取実績の text 内スクロールも同様にスマホでは解除し、文章は全文表示 */
@media only screen and (max-width: 768px) {
  .achievement_txt .text {
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: visible !important;
  }
}

/* main_view (ヒーロー画像)の z-index:-1 が一部スマホブラウザで
   画像消失を起こすことがあるため、親側で stacking context を作る
   ※ z-index:0 や isolation を使うと PC でナビのドロップダウンが裏に
     回り込む(TOPページのみ)ので、stacking context は使わず
     position:relative だけで slide_inner の position 基準を確保 */
#main_view {
  position: relative;
}
/* PC でナビのドロップダウンが main_view (Swiper含む)より前面に出るよう、
   nav 系全体に超高い z-index と position:relative を付与 */
@media screen and (min-width: 1025px) {
  header { position: relative !important; z-index: 99999 !important; }
  .nav { position: relative !important; z-index: 99999 !important; }
  .nav-menu { position: relative !important; z-index: 99999 !important; }
  .has-dropdown { position: relative !important; z-index: 99999 !important; }
  .nav-dropdown {
    z-index: 99999 !important;
    background-color: #c8102e !important;
  }
  .has-dropdown:hover .nav-dropdown {
    z-index: 99999 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* ドロップダウン項目にホバーした時、薄い色背景で文字が見えなくなるのを防ぐ */
  .nav-dropdown .menu-item:hover {
    background-color: #a30d24 !important; /* ベース赤より少し濃い赤 */
  }
  .nav-dropdown .menu-item:hover a,
  .nav-dropdown .menu-item:hover .menu-link {
    color: #ffffff !important;
  }
}

/* ヘッダーの h1 内に <img> と隠しテキストロゴが同居しているため、
   不要要素は flex 計算からも完全に除外する */
#header h1 a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}
#header h1 .logo-icon-circle,
#header h1 .logo-text-block,
footer h1 .logo-icon-circle,
footer h1 .logo-text-block {
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 中段キャンペーン画像(#top_campaign)はスマホで両端余白を確保 */
@media only screen and (max-width: 599px) {
  #top_campaign .campaign-wrapper {
    padding: 16px 12px;
  }
}

/* 取扱いアイテム16カテゴリ:スマホでテキストが画像とずれる現象の修正 */
@media only screen and (max-width: 599px) {
  .itemsBox a {
    align-items: center !important;
  }
  .items_img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .items_img img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .items_txt h3 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    padding: 6px 4px !important;
    word-break: keep-all !important;
  }
}

/* アクセス案内の4ステップ写真:スマホで縦横比を統一して並びを綺麗に */
@media only screen and (max-width: 768px) {
  .ac_area .flex_box li img {
    width: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
  }
}

/* タップ可能なリンク・ボタンの最小サイズ確保(モバイルUX指針:44px以上) */
@media only screen and (max-width: 768px) {
  .btn_links a,
  .nav-menu .menu-link,
  .access_area .store_contact .tel_number a {
    min-height: 44px;
  }
}

/* 地図iframeの高さをスマホでも確保 + タップで操作できるよう余白 */
@media only screen and (max-width: 599px) {
  #map_area iframe {
    height: 320px !important;
  }
}

/* お知らせの内部 dl の余白がスマホで詰まりすぎる現象の調整 */
@media only screen and (max-width: 599px) {
  #top_information .news_box .scl dl {
    padding: 12px 0 !important;
  }
  #top_information .news_box .scl dt {
    margin-bottom: 6px !important;
  }
}

/* 「お知らせ」「LINE査定」「Googleマップで開く」など
   スマホで全幅化してタップしやすくする */
@media only screen and (max-width: 599px) {
  .btn_links a {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* サブページ用:ヘッダー固定分のオフセット崩れ対策
   header が position:fixed のため、ページ先頭にスクロールアンカーで
   飛んだ時にタイトルが隠れる事象を防ぐ */
@media only screen and (max-width: 1024px) {
  body.subpage { padding-top: 0; }
  body.subpage main,
  body.subpage section:first-of-type { scroll-margin-top: 80px; }
}
@media only screen and (max-width: 599px) {
  body.subpage main,
  body.subpage section:first-of-type { scroll-margin-top: 60px; }
}

/* ============================================
   アクセスセクションの店名表示(2026-04-29)
   - アイコン(マスコット)はそのまま画像で表示
   - テキスト「おたからや十三店」は白文字
   - 背景はブラウンのまま、白文字でくっきり
   ============================================ */
.access_title h2.juso-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  background-image: none !important;
  height: auto !important;
  padding: 10px 8px !important;
  margin: 0 auto !important;
  border: 0 !important;
}
.access_title h2.juso-logo .juso-mascot {
  display: block !important;
  height: 140px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.access_title h2.juso-logo .juso-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.access_title h2.juso-logo .juso-tagline {
  display: none !important;
}
.access_title h2.juso-logo .juso-name {
  color: #ffffff;
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W6", "HG明朝E", serif;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
@media screen and (max-width: 768px) {
  .access_title h2.juso-logo .juso-mascot { height: 120px !important; }
  .access_title h2.juso-logo .juso-name { font-size: 2.1rem; }
}
@media screen and (max-width: 599px) {
  .access_title h2.juso-logo { gap: 10px !important; }
  .access_title h2.juso-logo .juso-mascot { height: 100px !important; }
  .access_title h2.juso-logo .juso-name { font-size: 1.8rem; }
}
@media screen and (max-width: 380px) {
  .access_title h2.juso-logo .juso-mascot { height: 85px !important; }
  .access_title h2.juso-logo .juso-name { font-size: 1.55rem; }
}

/* ============================================
   メインビジュアル背景の廃止(2026-05-14)
   理由:本部テンプレの青海波金背景・新規生成画像ともヒーロー画像と被って見づらいため、
        背景画像なし(白)に変更。ヒーロー画像(juso_hero_red.png)だけで成立させる方針。
   元背景は img/index/main_bg_honbu_backup.jpg に保管済、復元可。
   ============================================ */
#main_view .slide_inner,
.caption,
.sliderArea {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* ============================================
   ヒーロー画像を画面幅いっぱい+上下余白なし(2026-05-14 v3)
   左右0、上下padding 0、margin-top は追加しない。
   ヘッダー(position:fixed)分は元の位置関係に任せる。
   ============================================ */
#main_view .slide_inner,
.sliderArea {
  padding: 0 !important;
}
#main_view .swiper-container,
.sliderArea .swiper-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.swiper-slide picture,
.swiper-slide picture img,
.swiper-slide > img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* ============================================
   ヘッダー背景画像(hbg.png)の廃止(2026-05-14)
   理由:本部テンプレ汎用の画像で十三店独自感が出ない。商品が薄く敷かれた装飾だが、
        じょー判断で「なし(白)」のシンプル版に変更。
   元画像 img/hbg.png は残置(削除しない)、いつでもこの上書きを外せば復元可能。
   ============================================ */
header {
  background-image: none !important;
  background-color: #ffffff !important;
}

/* ============================================
   ヘッダーの電話番号にアイコン追加(2026-05-14)
   ============================================ */
.tel_set dt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.tel_set dt .tel-icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  color: #c8102e;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

/* スマホヘッダー:電話番号・営業時間は隠したまま、WEBチラシボタンだけ表示(2026-05-14)
   電話は下部固定バーで代替できるから不要。チラシだけ目立たせる。
   元の chirashi ボタンは padding:20px15px22px で巨大化するため、ヘッダー用に詰める。 */
@media only screen and (max-width: 1024px) {
  header .inner article:nth-child(2) {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding-right: 90px !important;
    box-sizing: border-box;
  }
  header .inner article .contact_box {
    justify-content: flex-end !important;
  }
  header .inner article .contact_box li.Tel {
    display: none !important;
  }
  header .inner article .contact_box li.Bana {
    padding: 0 !important;
  }
  header .inner article .contact_box li.Bana .btn_links.chirashi {
    padding: 0 !important;
    width: auto !important;
  }
  header .inner article .contact_box li.Bana .btn_links.chirashi a {
    width: auto !important;
    padding: 4px 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
  }
  header .inner article .contact_box li.Bana .btn_links.chirashi a img {
    max-width: 90px !important;
    height: auto !important;
  }
}
@media only screen and (max-width: 599px) {
  header .inner article:nth-child(2) {
    padding-right: 75px !important;
  }
  header .inner article .contact_box li.Bana .btn_links.chirashi a img {
    max-width: 75px !important;
  }
}

/* ============================================
   PCヘッダー固定追従(fixed)(2026-05-14)
   スマホ版と同じく、PCでも常時 position:fixed で画面上端に張り付く。
   元の common.css L382 の position:static !important を上書き。
   ヘッダー高さ = inner 120px + 赤ナビ 60px = 180px、安全マージンで190px。
   ============================================ */
@media only screen and (min-width: 1025px) {
  header#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
  }
  body {
    padding-top: 190px;
  }
}