:root{
  --ink:#333;
  --gray:#aaa;
  --line:#ccc;
  --bg:#FAFAF5;
  --accent:#6d5dfc;
}
.wr-container *{box-sizing:border-box;margin:0;padding:0}
.wr-container{font-family:'Hiragino Sans','Noto Sans JP',sans-serif;line-height:1.6;color:var(--ink);background:var(--bg);padding:20px;border-radius:12px}
.wr-container .sec-eyebrow{
	font-size:2.8rem;
	font-weight:700;
	color:var(--ink);
	letter-spacing:.03em;
	text-align: center;
}

.wr-container .sec-title{
		font-size:18px;
		font-weight:700;
		text-align: center;
	margin-bottom: 3rem;
}

@media(min-width: 769px) {
	.wr-container .sec-eyebrow{
	font-size:6.4rem;
	font-weight:700;
	color:var(--ink);
	letter-spacing:.03em }
	
	.wr-container .sec-title{
		font-size:18px;
		font-weight:700;
		margin-bottom:3rem; }

}

.wr-container .sec-eyebrow span{/*color:var(--accent);*/font-weight:800}


/* tabs */
.wr-container .tabs{display:flex;justify-content:flex-start;gap:0;margin-bottom:20px;border-bottom:2px solid var(--ink)}
.wr-container .tab-btn{
  flex:1;text-align:center;padding:10px 0;font-weight:600;font-size:16px;color:var(--ink);background:transparent;border:none;border-radius:10px 10px 0 0;border:2px dashed var(--gray);border-bottom:none;cursor:pointer;transition:all .3s;position:relative;top:2px
}
.wr-container .tab-btn[aria-selected="true"]{
  transform:scale(1.08);border:2px solid var(--ink);border-bottom:2px solid var(--bg);background:var(--bg);z-index:1
}

/* card-ranking */
.wr-container .card-ranking{padding:16px 0;border-bottom:1px solid var(--line); display: block;}
.wr-container .rank-label{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px}
.wr-container .row{display:flex;gap:12px;align-items:flex-start}
.wr-container .thumb{flex-shrink:0;width:96px;height:96px;border-radius:8px;overflow:hidden;background:#fff}
.wr-container .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wr-container .meta{flex:1;display:flex;flex-direction:column;gap:6px}
.wr-container .chip{align-self:flex-start;padding:2px 8px;border-radius:6px;background:#fff;font-size:12px;font-weight:600;color:var(--ink);border:1px solid var(--line)}
.wr-container .title{font-size:15px;font-weight:700;line-height:1.4}
.wr-container .date{font-size:13px;font-weight:700;color:var(--ink)}
.wr-container .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.wr-container .tag{font-size:12px;color:var(--ink);text-decoration:none}
.rank-label b {
    font-size: 25px;
    font-weight: 900;
}

@media (max-width:640px){
  .wr-container .row{flex-direction:column}
  .wr-container .thumb{width:100%;height:auto;aspect-ratio:16/9}
}
/* PC表示／SP表示を切替 */
.wr-pc-only { display:block; }
.wr-sp-only { display:none; }

@media (max-width:959px){
  .wr-pc-only { display:none; }
  .wr-sp-only { display:block; }
}

/* PC版：3カラム */
.wr-grid {
  max-width:1260px;
  margin:auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.wr-col-title {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  border-bottom: 2px dashed var(--line);
  padding-bottom: 4px;
}
@media (max-width:640px){
  /* rowを横並びに維持（縦積みを解除） */
  .wr-container .row {
    flex-direction: row;   /* ← 画像→文字の順番 */
    align-items: flex-start;
  }

  /* サムネサイズをSP向けに調整 */
  .wr-container .thumb {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
  }

  /* 文字部分は可変で広がる */
  .wr-container .meta {
    flex: 1;
  }
}
/* 2カラムレイアウト */
.wr-container .row {
  display: grid;
  grid-template-columns: 120px 1fr; /* 左にrank+画像、右にテキスト */
  gap: 16px;
  align-items: start;
}

/* 左カラム = rank + 画像を縦並び */
.wr-container .left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ランク */
.wr-container .rank-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* 画像 */
.wr-container .thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
}
.wr-container .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== PC時のカードレイアウト：上ランク／下 画像：文字（横並び） ===== */
@media (min-width: 960px){
  .wr-container .card-ranking .rank-label{
    margin-bottom: 8px;         /* ランクと下段の間隔 */
  }
  .wr-container .card-ranking .row{
    display: flex;
    gap: 16px;
    align-items: flex-start;     /* 右カラムを画像の上端に揃える（画像基準） */
  }
  .wr-container .card-ranking .thumb{
    width: 120px;                /* 画像サイズは必要に応じて 110〜140px で微調整可 */
    height: 120px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  .wr-container .card-ranking .thumb img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .wr-container .card-ranking .meta{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}

@media (min-width: 960px){
  .wr-container .card-ranking .rank-label{ margin-bottom:8px; }
  .wr-container .card-ranking .row{
    display:flex; gap:16px; align-items:flex-start; /* 右カラムを画像の上端に揃える */
  }
  .wr-container .card-ranking .thumb{
    width:120px; height:120px; flex-shrink:0;
    border-radius:8px; overflow:hidden; background:#fff;
  }
  .wr-container .card-ranking .thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .wr-container .card-ranking .meta{
    flex:1; display:flex; flex-direction:column; gap:6px;
  }

  /* 大カテゴリー・線・サブカテゴリー */
  .wr-container .parent-cat{
    font-size:12px; font-weight:700; letter-spacing:.02em;
    color:var(--ink); opacity:.8; margin-bottom:2px;
  }
  .wr-container .sub-sep{
    height:2px; background:var(--line); margin:6px 0 4px; width:100%;
  }
  .wr-container .subcats{
    display:flex; flex-wrap:wrap; gap:6px 10px; margin-bottom:6px;
  }
  .wr-container .subcat{
    font-size:12px; text-decoration:none; color:var(--ink); opacity:.9;
  }
}