/* ============================================================
   TEIJIN MALL TOPリニューアル 追加スタイル
   prefix "rn-" = renewal。既存クラスと衝突しません
   ============================================================ */
.rn-block{ position:relative; }

/* --- 横スクロール共通機構 --- */
.rn-scroller{
  display:flex; gap:1.5%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  margin:0; padding:0 0 10px; list-style:none;
}
.rn-scroller::-webkit-scrollbar{ display:none; }
.rn-scroller > li{ flex:0 0 23%; scroll-snap-align:start; }
.rn-scroller.is-grab{ cursor:grab; }
.rn-scroller.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.rn-scroller.is-dragging a{ pointer-events:none; }
.rn-arrow{
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  z-index:2; transition:opacity .2s;
}
.rn-arrow:disabled{ opacity:0; pointer-events:none; }
.rn-arrow::before{
  content:""; width:10px; height:10px;
  border-top:2px solid #222; border-right:2px solid #222;
}
/* 矢印はコンテンツの内側に置く（外側に出すと768〜900px幅で画面外にはみ出すため） */
.rn-arrow.prev{ left:0; }
.rn-arrow.prev::before{ transform:rotate(-135deg); margin-left:4px; }
.rn-arrow.next{ right:0; }
.rn-arrow.next::before{ transform:rotate(45deg); margin-right:4px; }

/* --- (1) EVENT（季節のイベント） --- */
.sec_event{ padding:3em 0 1em; }
.rn-scroller > li{ display:flex; }          /* カードの高さを揃える */
.rn-event-card a{
  display:flex; flex-direction:column; width:100%;
  text-decoration:none; color:#222;
}
.rn-event-card .thumb{
  width:100%; aspect-ratio:1920/893; overflow:hidden; background:#f1f1f1; border-radius:4px;
}
.rn-event-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rn-event-card h3{
  margin:.9em 0 .8em; font-size:.95rem; line-height:1.6; font-weight:500;
  /* 改行なしで流し、2行を超えたら「…」で省略 */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
}
/* VIEW MORE：メインスライドと同じ .more を使う。
   幅はカードの50%、margin-top:auto でカード下端に揃える */
.rn-event-card .more{
  display:block; width:50%; min-width:0; margin-top:auto;
  padding:.75em .5em; font-size:.75rem; line-height:1.2;
  background-color:#222; color:#fff; transition:background-color .2s;
}
/* ホバー色はメインスライド・他ボタンと同じ #D9171A。既存CSSに負けないよう明示 */
.rn-event-card a:hover .more,
.rn-event-card .more:hover{ background-color:#D9171A; color:#fff; }

/* --- (2) SHOP BY CATEGORY（カテゴリーメニュー） --- */
.sec_category .rn-tabs{
  display:flex; flex-wrap:wrap; gap:0; list-style:none;
  margin:0; padding:0; border-bottom:1px solid #ddd;
}
.sec_category .rn-tabs li{ flex:1 1 0; }
.sec_category .rn-tabs button{
  width:100%; padding:1em .5em; background:none; border:none; cursor:pointer;
  font-size:.95rem; color:#888; font-weight:500; line-height:1.4;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s;
}
.sec_category .rn-tabs button:hover{ color:#222; }
.sec_category .rn-tabs button[aria-selected="true"]{ color:#222; border-bottom-color:#DC000C; }
.sec_category .rn-panel[hidden]{ display:none; }
/* タブ見出しと下のカテゴリ一覧の間隔。
   ul の margin は既存CSSに打ち消されるため、パネル側の padding で確保する */
.sec_category .rn-panel{ padding-top:15px; }
.sec_category .rn-cats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
  list-style:none; margin:0; padding:0;
}
.sec_category .rn-cats a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:56px; padding:.6em .8em; background:#fff; border:1px solid #ddd; border-radius:4px;
  font-size:.9rem; line-height:1.4; color:#222; text-decoration:none; transition:.2s;
}
.sec_category .rn-cats a:hover{ border-color:#DC000C; color:#DC000C; }
.sec_category .rn-cats .is-empty{
  grid-column:1/-1; color:#888; font-size:.9rem; padding:1em 0;
}

/* --- (3) BRAND ピックアップ --- */
.rn-brand-pickup{
  display:flex; gap:4%; align-items:center;
  background:#F7F7F7; border-radius:8px; padding:3%; margin-bottom:3.5em;
}
.rn-brand-pickup .img{ flex:0 0 40%; }
.rn-brand-pickup .img img,
.rn-brand-pickup .img .rn-ph{ width:100%; aspect-ratio:4/3; border-radius:4px; }
.rn-brand-pickup .img img{ object-fit:cover; display:block; }
.rn-brand-pickup .txt{ flex:1 1 auto; }
/* 見出しの太さは既存テーマのID指定（400）に潰されるので !important */
.rn-brand-pickup .txt h3{ font-size:1.5rem; font-weight:700 !important; margin:0 0 .8em; line-height:1.4; }
.rn-brand-pickup .txt p{ font-size:.95rem; line-height:1.9; margin:0 0 1.8em; }

/* --- 画像プレースホルダー（本番画像に差し替え） --- */
.rn-ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(-45deg,#ececec,#ececec 8px,#e3e3e3 8px,#e3e3e3 16px);
  color:#999; font-size:.72rem; line-height:1.6; border-radius:4px; padding:.5em;
  font-family:"Yu Gothic",sans-serif; word-break:break-all;
}

/* --- SP --- */
@media screen and (max-width:767px){
  .rn-scroller{ gap:3%; }
  .rn-scroller > li{ flex:0 0 55%; }
  .rn-arrow{ display:none; }
  .sec_event{ padding:2em 0 .5em; }
  .rn-event-card h3{ font-size:.85rem; }
  .rn-event-card .more{ font-size:.68rem; padding:.7em .4em; }
  .sec_category .rn-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .sec_category .rn-tabs::-webkit-scrollbar{ display:none; }
  .sec_category .rn-tabs li{ flex:0 0 auto; }
  .sec_category .rn-tabs button{ font-size:.85rem; padding:.9em 1.2em; white-space:nowrap; }
  .sec_category .rn-cats{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .sec_category .rn-cats a{ min-height:52px; font-size:.82rem; }
  .rn-brand-pickup{ display:block; padding:6%; }
  .rn-brand-pickup .img{ margin-bottom:1.5em; }
  .rn-brand-pickup .txt h3{ font-size:1.2rem; }
}