/* ===========================
   Shimano Ayu 2026 page polish
   (override layer)
   =========================== */

.section { padding: 32px 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.clearfix::after { content:""; display:block; clear:both; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 12px; }

/* Hero */
.main-visual .trim{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.main-visual img{ width:100%; display:block; }

/* Title */
h2.title1{
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 6px solid #1e3a8a;
}

/* Intro */
.title-copy1{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  line-height: 1.9;
  margin: 0;
}

/* Anchor navi */
.anchor-navi{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin: 0 0 18px;
}
.anchor-navi li{ margin:0; }
.anchor-navi a{
  display:inline-block;
  padding:10px 14px;
  border-radius: 999px;
  background:#0f172a;
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
.anchor-navi a:hover{ opacity:.85; }

/* Comment line */
.comments{
  margin: 10px 0 14px;
  color:#6b7280;
}
.comments span{
  display:inline-block;
  width: 22px; height:22px;
  line-height:22px;
  text-align:center;
  border-radius: 999px;
  background:#111827;
  color:#fff;
  margin-right: 6px;
  font-weight:800;
}

/* Rod lineup card */
.rod-lineup{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.rod-lineup dl{ margin:0; }
.rod-lineup dt{
  font-size: 16px;
  line-height:1.7;
  margin: 0 0 12px;
}
.rod-lineup dd{ margin:0; }

.type-title1{
  font-size: 16px;
  margin: 14px 0 6px;
  font-weight:800;
}
.type-copy1{
  margin: 0 0 10px;
  line-height: 1.9;
  color:#111827;
}

/* Product links */
.list1{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.list1 li{ margin: 8px 0; }
.list1 a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  text-decoration:none;
  color:#111827;
}
.list1 a:hover{ background:#f3f4f6; }

/* Old font tag compatibility */
font[color="red"]{ color:#d61f1f !important; font-weight:800; }

/* HR */
hr{
  border:0;
  height:1px;
  background:#e5e7eb;
  margin: 18px 0;
}

/* Technology blocks */
.technology dl{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background:#fff;
}
.technology dt{ flex: 0 0 140px; }
.technology dt img{ width:100%; display:block; border-radius: 10px; }
.technology dd{ margin:0; }
.sub-title1{ font-weight:800; margin:0 0 6px; }
.sub-copy1{ margin:0; line-height:1.9; color:#111827; }
.note1{ color:#6b7280; margin: 10px 0 0; }

/* Buttons */
.btn1{ margin: 14px 0; }
.btn1 a{
  display:inline-block;
  padding: 14px 18px;
  border-radius: 14px;
  background:#1e3a8a;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.btn1 a:hover{ opacity:.9; }

/* Bottom brand list */
.brand-rod-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.brand-rod-list a.rod-lineup{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  text-decoration:none;
  color:#111827;
}
.brand-rod-list a.rod-lineup span img{
  width: 56px; height:56px;
  object-fit: cover;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .brand-rod-list{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .technology dl{ flex-direction:column; }
  .technology dt{ width: 160px; }
}


/* ===========================
   New product highlight (★) - SHIMANO BLUE
   =========================== */

:root{
  --shimano-blue: #009ddd;
  --shimano-blue-dark: #007bb3;
  --shimano-blue-soft: rgba(0, 157, 221, .10);
  --shimano-blue-shadow: rgba(0, 157, 221, .45);
  --shimano-blue-shadow-strong: rgba(0, 157, 221, .65);
}

/* タイトル行が新製品のとき（★付きモデル名） */
.type-title1.is-new{
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--shimano-blue-soft), #ffffff 70%);
  border: 1px solid rgba(0,157,221,.45);
  box-shadow:
    0 10px 26px var(--shimano-blue-shadow),
    0 0 0 2px rgba(0,157,221,.12) inset;
}

/* 商品リスト行が新製品のとき（★付き番手リンク） */
.list1 li.is-new a{
  background: linear-gradient(135deg, rgba(0,157,221,.12), #ffffff 70%);
  border-color: rgba(0,157,221,.55);
  box-shadow: 0 10px 22px var(--shimano-blue-shadow);
  transform: translateY(-1px);
}
.list1 li.is-new a:hover{
  box-shadow: 0 14px 28px var(--shimano-blue-shadow-strong);
  transform: translateY(-2px);
}

/* ★バッジ：シマノブルーで強調（より目立つ） */
.new-badge{
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.new-badge sup{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #33b8ea, var(--shimano-blue));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 6px 14px var(--shimano-blue-shadow-strong),
    0 0 0 2px rgba(255,255,255,.65) inset;
}

/* 「NEW」っぽさをさらに出したい場合：バッジ右に小さくNEW文字（任意） */
.type-title1.is-new .new-badge::after,
.list1 li.is-new .new-badge::after{
  content: "NEW";
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,157,221,.12);
  color: var(--shimano-blue-dark);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid rgba(0,157,221,.25);
}

/* 空のli / 空のa を強制的に非表示 */
.list1 li:empty { display: none !important; }
.list1 a:empty  { display: none !important; }
.list1 a[href=""] { display: none !important; }
.list1 li:not(:has(a)) { display: none !important; }

/* 小見出し（モデル名） */
p.type-title1{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  font-size: 18px;          /* ←少し大きく */
  font-weight: 900;
}

/* 左にシマノブルーのバー */
p.type-title1::before{
  content:"";
  width: 8px;
  height: 22px;
  border-radius: 99px;
  background: var(--shimano-blue);
  box-shadow: 0 6px 14px rgba(0,157,221,.35);
}

/* strong が入っていても崩れないように */
p.type-title1 strong{ font-weight: 900; }

@media (max-width: 768px){
  h2.title1{
    font-size: 22px;
    padding: 12px 12px 12px 46px;
  }
  h2.title1::before{ left: 12px; width: 18px; height: 18px; }
  h2.title1::after{ left: 34px; top: 10px; bottom: 10px; }

  p.type-title1{
    font-size: 16px;
    padding: 10px 12px;
  }
}

/* PC：16:9で綺麗に表示 */
.main-visual .trim{
  width: 100%;
  aspect-ratio: 16 / 9;        /* 800x450に合わせる */
  overflow: hidden;
  border-radius: 16px;
}

.main-visual .trim img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* はみ出した分はトリミング */
}

/* スマホ：少し縦を詰めて見栄えを良くする */
@media (max-width: 768px){
  .main-visual .trim{
    aspect-ratio: 4 / 3;        /* スマホで見やすい比率に */
    border-radius: 14px;
  }
}

/* ===== Main image responsive fix (force override) ===== */
#main .main-visual,
#main .main-visual .trim{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  margin: 0 auto 16px !important;
}

#main .main-visual .trim img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 見栄え重視：比率を固定して cover トリミング */
#main .main-visual .trim{
  overflow: hidden !important;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
}

#main .main-visual .trim img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center; /* ロゴが切れるなら center top へ */
}

@media (max-width: 768px){
  #main .main-visual .trim{ aspect-ratio: 4 / 3; }
}

/* ===== Brand cards: PC layout fix ===== */
@media (min-width: 900px){
  .brand-rod-list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .brand-card{
    height: 96px;                 /* 高さを揃える */
    padding: 18px 18px;
    border-radius: 18px;
  }

  .brand-card__img{
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 16px;
  }

  .brand-card__text{
    font-size: 18px;
    white-space: nowrap;           /* 2行になって崩れるのを防止 */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-card__arrow{
    display: none;                 /* PCは矢印無しが綺麗（崩れ防止にも） */
  }
}

/* ===== Brand cards: PC broken layout fix ===== */
@media (min-width: 900px){

  /* 3カラムで、潰れない最小幅を保証 */
  .brand-rod-list{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    justify-content: center;
    align-items: stretch;
  }

  /* カードの横幅が潰されるのを防ぐ */
  .brand-card{
    display: flex !important;
    flex-direction: row !important;   /* 縦並びにされているのを強制修正 */
    align-items: center !important;
    width: 100% !important;
    min-width: 260px !important;
    height: 96px;
    padding: 18px 18px !important;
  }

  /* 画像は固定サイズ */
  .brand-card__img{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
  }

  /* 文字が1文字改行になるのを防ぐ */
  .brand-card__text{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 18px !important;
  }

  /* PCは矢印を消す（残すと幅がさらに厳しくなることがある） */
  .brand-card__arrow{
    display: none !important;
  }
}

@media (min-width: 900px){
  .brand-rod-list{
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 900px){
  .brand-rod-list{
    grid-template-columns: 1fr !important;
    max-width: 820px !important;
    margin: 0 auto !important;
  }
  .brand-card__arrow{ display: inline-block !important; }
}

@media (min-width: 900px){
  .brand-rod-list{
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
}

/* ===== Brand cards: center align on PC ===== */
@media (min-width: 900px){
  .brand-rod-list{
    /* 縦並びのまま中央寄せ */
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 26px !important;

    /* ブロック全体の最大幅（好みで調整） */
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  .brand-card{
    width: 100% !important;      /* max-width内で100% */
    max-width: 520px !important; /* 上と揃える */
  }
}

@media (min-width: 900px){
  .brand-rod-list{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 26px !important;
  }

  .brand-card{
    width: min(640px, 92vw) !important;  /* 画面に合わせて伸びる */
    min-width: 420px !important;         /* 潰れ防止だけ残す */
  }
}

/* ===== Brand cards: center + keep width on PC ===== */
@media (min-width: 900px){

  /* リスト全体：中央寄せ */
  .brand-rod-list{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 26px !important;
    width: 100% !important;
    max-width: none !important;     /* ←細くなる原因を無効化 */
    margin: 0 auto !important;
  }

  /* カード：幅を保証（ここが最重要） */
  .brand-card{
    width: 520px !important;        /* ←PCでの見た目を固定 */
    max-width: 90vw !important;     /* 画面が狭いPCでもはみ出さない */
    min-width: 420px !important;    /* ←潰れ防止 */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* 文字が縦に折れるのを止める */
  .brand-card__text{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 矢印はPCでは消す方が崩れにくい */
  .brand-card__arrow{
    display: none !important;
  }
}

/* ===== Brand cards: left edge alignment fix ===== */
@media (min-width: 900px){

  /* リストは中央、カードは同一幅 */
  .brand-rod-list{
    align-items: center !important;
  }

  .brand-card{
    width: 520px !important;
    max-width: 90vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 左の縦線（区切り）を出している要素/疑似要素を無効化 */
  .brand-rod-list > div{
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .brand-rod-list > div::before,
  .brand-rod-list > div::after,
  .brand-card::before,
  .brand-card::after{
    content: none !important;
    display: none !important;
  }
}