/* ===================================================
  shop-nishishingai-top.css（西新涯TOP専用）
  目印：.nishishingai-top でTOP全体を包んだ前提
  ※ page-id に依存しない（テーマ差分に強い）
=================================================== */

/* ---------------------------------------------------
  TOP全体：固定フッターメニューが被る場合の保険
--------------------------------------------------- */
.nishishingai-top{
  padding-bottom: 76px; /* 必要なら 64〜92px で調整 */
}

/* ---------------------------------------------------
  ヒーロー画像（TOP専用）
--------------------------------------------------- */
/* ヒーロー画像：文字を切らない（PC/スマホ共通の基本） */
section.content section.hero .hero__img{
  width: 100%;
  height: auto !important;     /* 固定高さをやめる */
  object-fit: contain;         /* 切らない */
  object-position: center;
  display: block;
  background: #fff;            /* 余白が出た時の背景（好みで） */
}


/* スマホ：全体表示（今のままでOK） */
@media (max-width: 640px){
  section.content section.hero .hero__img{
    height: auto;
    object-fit: contain;
  }
}


/* ---------------------------------------------------
  TOPでのPC/SP画像切替（TOP専用）
--------------------------------------------------- */
.nishishingai-top .toppc{ display: block !important; }
.nishishingai-top .topsp{ display: none !important; }

@media (max-width: 500px){
  .nishishingai-top .toppc{ display: none !important; }
  .nishishingai-top .topsp{
    display: block !important;
    margin: 0 calc(50% - 50vw) !important;
    width: unset !important;
    max-width: unset !important;
  }
}

/* ---------------------------------------------------
  top_up（文法ミス修正）
--------------------------------------------------- */
.nishishingai-top .top_up{
  position: absolute !important;
  margin-top: -40px !important;
}

/* ---------------------------------------------------
  おしらせの余白（TOP専用）
--------------------------------------------------- */
.nishishingai-top div.whatsnew dt{
  margin: 0;
}

/* ---------------------------------------------------
  電話CTA（TOP専用）
--------------------------------------------------- */
.nishishingai-top #tel-cta{
  position: relative;
  padding-top: 28px;
}
.nishishingai-top #tel-cta .button2.button2-c{
  text-align: center;
  padding: 22px 14px 18px !important;
}
.nishishingai-top #tel-cta .tel-cta__main{
  display: block;
  font-weight: 800;
  line-height: 1.1;
  font-size: 3rem !important;
  letter-spacing: .05em;
  color: #fff;
}
.nishishingai-top #tel-cta .tel-cta__tag{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,-50%);
  z-index: 3;
  display: inline-block;
  white-space: nowrap;
  background: #fff;
  color: #22ac38;
  border: 2px solid #22ac38;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.nishishingai-top #tel-cta .tel-cta__tag::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px;
  border:8px solid transparent;
  border-top-color:#fff;
}

/* ---------------------------------------------------
  下固定バーの色（TOPだけ変えるならここ）
  ※全店共通にしたいなら shops-common.css へ移動
--------------------------------------------------- */
.nishishingai-top .controllerFooter__topBtn{ background:#2e2f31; }
.nishishingai-top .controllerFooter__item:last-child{ background:#2e2f31; }

/* ---------------------------------------------------
  赤帯（rc-redband）※TOP内だけ
  重要：赤帯にしたい見出しに class="rc-redband" を付ける
--------------------------------------------------- */
.nishishingai-top h2.rc-redband{
  font-size: clamp(16px, 4.0vw, 22px) !important;
  padding: 10px 8px !important;
  margin: 10px 0 12px !important;
  line-height: 1.2 !important;

  text-align: center;
  border-top: 2px solid #2e2f31;
  border-bottom: 2px solid #2e2f31;
  background: #ff0000;
  color: #fff;
  font-weight: 800;
}

/* PCだけ少し戻す（好みで 24〜28px） */
@media (min-width: 769px){
  .nishishingai-top h2.rc-redband{
    font-size: 26px !important;
    padding: 14px 12px !important;
  }
}

/* ---------------------------------------------------
  セクション見出し（区切り）：TOP内だけに限定
  ※全ページでも使うなら shops-common.css へ移すのがおすすめ
--------------------------------------------------- */
.nishishingai-top .rc-section-title{
  margin: 28px 0 14px;
  padding: 12px 14px;
  background: #f7f7f7;
  border-left: 6px solid #22ac38;
  color: #111;
  font-weight: 800;
  line-height: 1.25;
  border-radius: 10px;
}
@media (max-width: 768px){
  .nishishingai-top .rc-section-title{
    margin: 22px 0 12px;
    padding: 10px 12px;
    font-size: 1.05em;
  }
}

/* ヒーロー内の文字ブロックの余白を締める */
.nishishingai-top .hero__content{
  padding: 12px 16px !important; /* 既存があれば上書き */
}

.nishishingai-top .hero__content h1{
  margin: 10px 0 8px !important;
  line-height: 1.25 !important;
  font-size: clamp(18px, 4.8vw, 24px) !important;
}

/* 赤帯の上の余白も少しだけ */
.nishishingai-top h2.rc-redband{
  margin-top: 8px !important;
}

/* ヒーロー説明文の読みやすさ */
.nishishingai-top .hero__content p{
  margin: 10px 0 0 !important;
  padding: 0 !important;
  line-height: 1.8 !important;
  font-size: 16px !important;
}

/* 下固定バー対策：スマホだけ厚めに */
.nishishingai-top{ padding-bottom: 64px; }

@media (max-width: 768px){
  .nishishingai-top{ padding-bottom: 92px; }
}

/* TOPヒーロー：H1が切れない＆読みやすく */
section.content section.hero .hero__content.rc-hero > h1{
  font-size: clamp(18px, 5.0vw, 24px) !important; /* 14px潰しを上書き */
  line-height: 1.3 !important;
  margin: 12px 0 10px !important;
  padding: 0 12px 6px !important; /* 下の“欠け”対策 */
  overflow: visible !important;
  height: auto !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
}

/* iPhone SE(<=360px)だけ少し詰める */
@media (max-width: 360px){
  section.content section.hero .hero__content.rc-hero > h1{
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
}

/* TOPヒーロー：H1を適正サイズに＆見切れ防止（確実版） */
section.content section.hero .hero__content.rc-hero > h1{
  font-size: clamp(16px, 4.6vw, 20px) !important; /* ← まずは控えめ */
  line-height: 1.35 !important;
  margin: 12px 0 10px !important;
  padding: 0 12px 10px !important; /* 下の欠け対策を強める */
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  word-break: keep-all;            /* 日本語を変に切らない */
  overflow-wrap: anywhere;         /* Cube福山西新涯店みたいな長い塊は折る */
  text-align: center;
}

/* iPhoneSE等の狭幅はさらに少し詰める */
@media (max-width: 360px){
  section.content section.hero .hero__content.rc-hero > h1{
    font-size: 16px !important;
    line-height: 1.3 !important;
    padding-bottom: 12px !important;
  }
}

/* PC：｜表示、改行なし（ヒーロー内のH1限定で当てる） */
section.content section.hero .hero__content.rc-hero .top-h1 .h1-sep{ display:inline; }
section.content section.hero .hero__content.rc-hero .top-h1 .h1-break{ display:none; }

/* スマホ：｜を消して、そこで改行 */
@media (max-width: 768px){
  section.content section.hero .hero__content.rc-hero .top-h1 .h1-sep{ display:none; }
  section.content section.hero .hero__content.rc-hero .top-h1 .h1-break{ display:block; height:0; }
  section.content section.hero .hero__content.rc-hero .top-h1 .h1-name{ font-weight:900; }
}


/* ヒーロー全体の上下余白を詰める */
section.content section.hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 画像ブロック（figure）由来の余白を詰める */
section.content section.hero .wp-block-image,
section.content section.hero figure{
  margin: 0 !important;
}

/* 画像そのもの下にできる余白対策 */
section.content section.hero .hero__img{
  display: block;
  margin: 0 auto !important;
}

/* === TOP 3CTA（ヒーロー内） === */
section.content section.hero .top-cta{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:12px 0 0;
  padding:0 12px;
}

section.content section.hero .top-cta__btn{
  display:block;
  text-align:center;
  padding:12px 14px;
  border-radius:12px;
  font-weight:900;
  text-decoration:none !important;
  line-height:1.1;
}

section.content section.hero .top-cta__btn.is-route{ background:#111; color:#fff; }
section.content section.hero .top-cta__btn.is-tel{ background:#22ac38; color:#fff; }
section.content section.hero .top-cta__btn.is-visit{ background:#f3f4f6; color:#111; border:2px solid #111; }

@media (min-width: 520px){
  section.content section.hero .top-cta{ grid-template-columns:repeat(3,1fr); }
}


/* === ヒーロー上下の余白を強制的に詰める（TOPだけ） === */
section.content section.hero,
section.content section.hero *{
  margin-top: 0 !important;
}

section.content section.hero{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

section.content section.hero .hero__img{
  margin: 0 !important;
}

/* ===========================
   TOP：ヘッダー直下〜ヒーローの隙間を潰す（DOM直指定）
   =========================== */

/* まず “上側の余白” の本丸をまとめて0 */
body.page-id-2 .l-wrapper,
body.page-id-2 main.l-main,
body.page-id-2 .dividerBottom,
body.page-id-2 .page,
body.page-id-2 section.content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ヒーロー自体の余白も0 */
body.page-id-2 section.content > section.hero{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 画像タグのデフォ挙動（inline隙間）を潰す */
body.page-id-2 section.content > section.hero > img{
  display: block !important;
  margin-top: 0 !important;
}

/* 回遊ボタン（nishishingai-top内だけ / 強制） */
.nishishingai-top .rc-linkbtn{
  margin: 14px 0 6px !important;
  text-align: center !important;
}

.nishishingai-top a.rc-linkbtn__a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 18px !important;
  border-radius: 999px !important;
  border: 2px solid #111 !important;

  text-decoration: none !important;
  font-weight: 800 !important;

  color: #111 !important;
  background: #fff !important;
}

.nishishingai-top a.rc-linkbtn__a"→"{
  content: "?" !important;
  margin-left: 10px !important;
  font-size: 1.2em !important;
  line-height: 1 !important;
}

@media (max-width: 768px){
  .nishishingai-top a.rc-linkbtn__a{
    width: calc(100% - 24px) !important;
  }
}

@media (max-width: 768px){
  .nishishingai-top a.rc-linkbtn__a{
    white-space: normal !important;
    line-height: 1.3 !important;
    padding: 12px 16px !important;
    text-align: center !important;
  }
}

/* PCは改行しない（1行） */
.nishishingai-top .sp-only{ display:none; }

/* スマホだけ、そこで改行 */
@media (max-width: 768px){
  .nishishingai-top .sp-only{ display:inline; }
}

.nishishingai-top a.rc-linkbtn__a{
  display:block;
  text-align:center;
  font-weight:800;
  text-decoration:none;
  border:2px solid #111;
  border-radius:999px;
  padding:14px 18px;
  max-width:520px;
  margin:12px auto;  /* ← divがやってた「中央寄せ＋余白」をここで */
}

.nishishingai-top a.rc-inline-link{
  display:inline-block;
  margin: 6px 0 12px;
  font-weight:700;
  text-decoration: underline;
}

/* 取扱品目一例：右端が欠けて見える対策（TOPだけ） */
.nishishingai-top h2.rc-section-title.wp-block-heading{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  /* “1pxだけ内側に”で端数描画の欠けを潰す */
  padding-right: 14px;          /* もともと12pxなら +2px 程度 */
  border-right: 1px solid transparent;

  /* 角丸の描画崩れ対策（端末差あり） */
  background-clip: padding-box;
  transform: translateZ(0);
}

/* テーマ側の装飾が被ってるケースを潰す */
.nishishingai-top h2.rc-section-title.wp-block-heading::before,
.nishishingai-top h2.rc-section-title.wp-block-heading::after{
  content:none !important;
  display:none !important;
}

.nishishingai-top .entry-content,
.nishishingai-top section.content{
  overflow: visible !important;
}

/* =========================
  西新涯TOP：ハブ導線（家電/釣具/工具）
========================= */
.ns-hub{
  margin-top: 18px;
}
.ns-hub__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ns-hub__card{
  display: block;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 14px 14px;
  text-decoration: none;
  background: #fff;
}
.ns-hub__card:active{
  transform: translateY(1px);
}
.ns-hub__label{
  display: block;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
}
.ns-hub__sub{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(0,0,0,.72);
}

/* 画面に余裕がある端末だけ2列 */
@media (min-width: 520px){
  .ns-hub__grid{
    grid-template-columns: 1fr 1fr;
  }
  /* 3つ目だけ横幅いっぱいにしたい場合（見栄え良い） */
  .ns-hub__card:nth-child(3){
    grid-column: 1 / -1;
  }
}

/* ns-hub内のrc-section-titleだけ、ボタン感を消して“見出し”に戻す */
.ns-hub > .rc-section-title{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 10px !important;
  text-align: left; /* お好みで center に */
}

.ns-hub > .rc-section-title{
  position: relative;
  padding-bottom: 10px !important;
}

.ns-hub > .rc-section-title::after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 1px;
  background: rgba(0,0,0,.10);
}



/* PC：赤帯の圧を少し下げる（サイズと余白を控えめに） */
@media (min-width: 900px){
  .rc-redband{
    padding: 14px 16px;
    letter-spacing: .02em;
  }
  .rc-redband, .rc-redband *{
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.35;
  }
}

/* PC：大見出しの圧を落とす */
@media (min-width: 900px){
  .ns-hub > .rc-section-title{
    font-size: 28px;     /* 大きすぎるなら下げる */
    font-weight: 800;    /* 900相当なら少し落とす */
    margin-top: 22px !important;
  }
}

/* 520px以上は2列 */
@media (min-width: 520px){
  .ns-hub__grid{
    grid-template-columns: 1fr 1fr;
  }
  /* これがあると3つ目が下に固定されるので無効化 */
  .ns-hub__card:nth-child(3){
    grid-column: auto;
  }
}

/* PCは3列（家電・釣具・工具を横一列に） */
@media (min-width: 900px){
  .ns-hub__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* PC：赤帯〜CTA周りの“息継ぎ”を作る */
@media (min-width: 900px){
  .rc-redband{
    margin-top: 18px;
    margin-bottom: 14px;  /* 赤帯の直下に余白 */
  }

  /* 3CTAの上に余白を足す（詰まり解消） */
  .rc-redband + *{
    margin-top: 10px;
  }
}

/* PC：赤帯の主張を少し落とす（サイズと余白） */
@media (min-width: 900px){
  .rc-redband{
    padding: 12px 14px;
  }
  .rc-redband, .rc-redband *{
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.35;
  }
}

/* PCだけ：.top-cta の直後に来る .ns-hub に余白を作る（確実） */
@media (min-width: 900px){
  .nishishingai-top .top-cta + .ns-hub{
    margin-top: 26px !important;     /* 18〜32で好み調整 */
    padding-top: 0 !important;
  }
}