/* □定点観測_eachplace */
:root{
  /* ※color.cssに移行予定 */
  --primary:#4FA09B;
  --secondary:#fda305;
  --accent:#dce03f;

  --bg:#f6f7f8;
  --panel:#ffffff;
  --text:#1b1f23;
  --muted:#667085;
  --softline:#e6e8ec;
  --definition:#414141;

  --pc-max-width:1200px;

  /* 16px = 1.6rem */
  --gap22: 2.2rem;

  --gap2: 0.2rem;

  --snap-ar: 236 / 369;
  --b1-thumb-h: 207px;

  --card-w: 23.6rem;
  --card-h: 36.9rem;
  --gap: 1.5rem;

  --snap-caption-mt: 1rem;
  --snap-caption-lh: 1.4;
  --snap-caption-lines: 2;
  --snap-caption-fz: 1.2rem;
}

img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ★左右の一番外側paddingなし */
.wrap{
  max-width: calc(var(--pc-max-width) + 4.0rem);
  margin: 0 auto;
  padding: 0;
}

/* ------------------------------
   ブロック分割（枠線なし／角丸なし）
------------------------------ */
.frame{
  background:#fff;
  display:grid;
  grid-template-columns: 1fr 30rem;
  gap:0;
}
.left{
  display:grid;
  grid-template-rows: auto 1fr;
  min-width:0;
}
.topWide{
  padding: 0 0 1.6rem;
  min-width:0;
}
.bottom3{
  display:grid;
  grid-template-columns: repeat(3, 30rem);
  min-width:0;
  column-gap: var(--gap22); /* ★横並び間 22px */
}

/* column-gap を使うのでカラムの左右paddingは中身側へ */
.b1, .b2, .b3{
  min-width:0;
  /*max-height: 47.1rem;
  overflow: hidden;*/
}

.wr-teiten-lower__banner{
  padding: 0 0 0 2.4rem;
  min-width:0;
}

/* ------------------------------
   上横長：タイトル/日付/シェア
------------------------------ */
.headRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 1.2rem;
}
/* .badge の一個親（.headRow直下のdiv）に左の縦線 */
.headRow > div:first-child{
  position: relative;
  padding-left: 1.2rem; /* 縦線と文字の間隔 */
}

.headRow > div:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:.2rem;
  bottom:.2rem;
  width:6px;
  background:#c7c7c7; /* グレー */
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-weight:800;
  font-size:1.3rem;
  color: var(--secondary);
}
.badgeDot{
  width:.8rem; height:.8rem; border-radius:999px;
  background: var(--secondary);
  display:inline-block;
}
.headMeta{
  color:var(--muted);
  font-weight:700;
  font-size:1.2rem;
}
.icons{
  display:flex;
  gap:1.0rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.iconBtn{
  width:3.2rem; height:3.2rem;
  border:1px solid var(--softline);
  border-radius:999px; /* ボタンも角丸を消すなら 0 に */
  display:grid; place-items:center;
  background:#fff;
  color:#475467;
}
.iconBtn:hover{ background:#f3f4f6; text-decoration:none; }

/* ------------------------------
   下左：2段構成（要望の配置）
------------------------------ */

.b1Grid{
  display:grid;
  grid-template-rows: auto auto;
  row-gap: var(--gap2);
}

.b1Row{
  display:grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--gap2);
  align-items: start;
  min-width:0;
}
/* 1段目（monthCard + thumb1）は「残り幅 + サムネ」 */
.b1Row:has(.monthCard){
  grid-template-columns: 1fr auto;
}
/* 2段目（thumb2 + metaPanel）は「サムネ + 残り幅」 */
.b1Row:has(.metaPanel){
  grid-template-columns: auto 1fr;
}

/* 画像が作った行の高さに合わせて、隣カラムを埋める */
.monthCard,
.metaPanel{
  height: 100%;
  box-sizing: border-box;
}

.monthCard{
  background:#979797;
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 20rem;
}
.monthCard .ym{ font-weight:500; font-size:2.0rem; color:#fff; }
.monthCard .big{ font-weight:600; font-size:6.0rem; line-height:1; color:#fff; }
.monthCard .place{ font-weight:700; font-size:4.5rem; color:#fff; text-align: right;}

.thumb{
  overflow:hidden;
  background:#000;
  position:relative;
  min-height: 20rem;
}
.hero{
  aspect-ratio: var(--snap-ar);
  width: 100%;
  height: auto;
  min-height: 0;      /* 既存の min-height を無効化 */
}
.thumb1,
.thumb2{
  aspect-ratio: var(--snap-ar);
  height: var(--b1-thumb-h);
  width: auto;
  min-height: 0;
}
/* 中の画像は枠いっぱい */
.thumb1 img,
.thumb2 img,
.hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb.thumb2{ min-height: 16rem; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .cap{
  position:absolute;
  left:1.0rem; bottom:1.0rem;
  padding:.3rem .8rem;
  border-radius:999px;
  background: rgba(17,24,39,.72);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
}
/* monthCard / metaPanel：高さをサムネに合わせて、横は残り幅いっぱい */
.monthCard,
.metaPanel{
  height: var(--b1-thumb-h);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* はみ出しを隠す */
}

.metaPanel{
  padding:1.2rem;
  background:#fff;
  min-height: 16rem;
  background: #e0e0e0;
}
.metaTitle{
  margin:0 0 .8rem 0;
  font-size:1.4rem;
  font-weight:900;
}
.metaList{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:.4rem;
  font-size:1.2rem;
  color:var(--muted);
}
.metaList b{ color:#344054; }

/* metaPanel：入りきらないテキストは省略（…）
※要素が複数（title + li）なので、li単位で省略します */
.metaPanel .metaTitle{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metaPanel .metaList{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden; /* 高さからはみ出す分を隠す */
}

.metaPanel .metaList li{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters{
  margin-top: 0.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  padding: 1.1rem;
  background: #bfbfbf;
}
.selectWrap{
  position:relative;
  display:inline-block;
}
.selectWrap::after{
  content:"";
  position:absolute;
  right:1.2rem; top:50%;
  width:.7rem; height:.7rem;
  border-right:2px solid #667085;
  border-bottom:2px solid #667085;
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
}
.select{
  appearance:none;
  border:1px solid var(--softline);
  background:#fff;
  border-radius:0;
  padding: .8rem 2.8rem .7rem .8rem;
  font-size:1.3rem;
  font-weight:700;
  line-height:1;
  border-radius: 0.6rem;
}
.goBtn{
  width:3.0rem; height:3.0rem;
  border:none;
  background:#fff;
  color:#000;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:2.0rem;
  line-height:1;
  border-radius: 50%;
  position: relative;
}
.goBtn::before{
  content:"";
  position:absolute;
  left:47%;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #000;
  border-bottom:2px solid #000;
  transform: translate(-55%, -50%) rotate(-45deg);
}

/* ------------------------------
   下中央：カウントデータ
------------------------------ */
.countTop{
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  align-items:flex-start;
  padding: 0 1.8rem;
}
.countTop h2{
  margin:0;
  font-size:1.8rem;
  font-weight:900;
}
.countTop .sub{
  margin-top:.2rem;
  font-size:1.3rem;
  color:var(--muted);
  font-weight:700;
}
.trendBtn{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding: .9rem 1.2rem;
  border-radius:0;
  background: rgba(219,96,39,.10);
  border:1px solid rgba(219,96,39,.25);
  color: var(--secondary);
  font-weight:900;
  font-size:1.3rem;
  white-space:nowrap;
  height: fit-content;
}
.trendBtn .arrow{
  width:2.8rem; height:2.8rem;
  border-radius:0;
  background: var(--secondary);
  color:#fff;
  display:grid; place-items:center;
  font-weight:900;
}
.legend{
  margin: 1.2rem 0 0 0;
  padding:0 1.8rem;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: .8rem 1.4rem;
  font-size:1.2rem;
  font-weight:800;
  color:#344054;
}
.swatch{
  width:1.1rem; height:1.1rem;
  border-radius:0;
  display:inline-block;
  margin-right:.6rem;
  vertical-align:-.1rem;
}
.sw1{ background:#3b82f6; }
.sw2{ background:#ef4444; }
.sw3{ background:#f59e0b; }

.chart{
  margin-top:1.2rem;
  border:1px solid var(--softline);
  border-radius:0;
  padding:1.2rem;
  background:#f8fafc;
  margin-left:1.8rem;
  margin-right:1.8rem;
}
.barRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items:end;
  min-height: 22rem;
}
.barStack{
  height: 18rem;
  display:flex;
  flex-direction:column-reverse;
  border:1px solid #d0d5dd;
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.seg{ width:100%; }
.seg.m{ background:#3b82f6; }
.seg.f{ background:#ef4444; }
.seg.s{ background:#f59e0b; }
.barLabel{
  margin-top:.7rem;
  font-size:1.2rem;
  color:var(--muted);
  font-weight:800;
}
.note{
  margin-top:1.0rem;
  font-size:1.2rem;
  color:#344054;
  display:grid;
  gap:.4rem;
}
.note span{ color:var(--muted); }

/* ------------------------------
   下右：メインスナップ（枠いっぱい）
   ★hero の width/height 100% は削除（要望）
------------------------------ */
.b3{ padding:0; }
.hero{
  min-height: 44rem;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#000;
  position:relative;
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.heroCap{
  position:absolute;
  left:1.0rem; top:1.0rem;
  padding:.4rem .9rem;
  border-radius:0;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:1.2rem;
  font-weight:800;
}

/* ------------------------------
   右縦：バナー
------------------------------ */
.rightTall{ background:#fff; }
.adPanel{
  border:1px solid var(--softline);
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.adImg{
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg,#1f2937,#0b1220);
  position:relative;
}
.adImg::after{
  content:"PARCO";
  position:absolute;
  right:1.2rem; bottom:1.2rem;
  color:#fff;
  font-weight:900;
  letter-spacing:.08em;
  font-size:2.0rem;
  opacity:.9;
}
.adBody{ padding:1.2rem; }
.adTitle{
  margin:0 0 .8rem 0;
  font-weight:900;
  font-size:1.6rem;
}
.buyBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.0rem;
  padding: 1.0rem 1.2rem;
  border-radius:0;
  border:1px solid var(--softline);
  background:#fff;
  font-weight:900;
  font-size:1.4rem;
  cursor:pointer;
}
.buyBtn + .buyBtn{ margin-top:.8rem; }
.buyBtn:hover{ background:#f9fafb; }
.chev{
  width:2.4rem; height:2.4rem;
  border-radius:0;
  background:#f2f4f7;
  display:grid; place-items:center;
  font-weight:900;
  color:#475467;
}

/* ------------------------------
   アイテム
------------------------------ */

.countitems{
    margin-top: 2.0rem;
    padding: 1.2rem 0 1.2rem;
    border-bottom: 1px solid #c7c7c7; /* 画像の上の横線 */
    display: flex;
  }

  .countitem{
    flex: 1 1 0;
    display: flex;
    gap: .8rem;
    align-items: center;
    min-width: 0;
    padding: 0 1.2rem;
  }
  .countitem img {
    max-width: 4.4rem;
    height: auto;
  }

  .countitem:first-child{ padding-left: 0; }
  .countitem:last-child{ padding-right: 0; }

  .countitem + .countitem{
    border-left: 1px solid #c7c7c7; /* 縦の区切り線 */
  }

  .countitem__img{
    width: 4.8rem;
    height: 4.8rem;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .countitem__txt{ min-width: 0; }
  .countitem__ttl{
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.2;
  }
  .countitem__sub{
    margin-top: .2rem;
    font-size: 1.1rem;
    color: var(--muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* ------------------------------
   countItems 固定ナビ化
------------------------------ */

:root{
  /* 固定ヘッダーがある場合は 37px などに変更 */
  --count-items-sticky-top: 38px;
}

.countitems{
  position: sticky;
  top: var(--count-items-sticky-top);
  z-index: 5;
  background: rgba(255,255,255,1);
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* stickyで画面上部に張り付いた時 */
.countitems.is-stuck{
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
}

/* クリックできるナビとして見せる */
.countitem{
  cursor: pointer;
  transition: opacity .15s ease;
}

.countitem:hover{
  text-decoration: none;
}

/* hover時はタイトル文字色だけ変更 */
.countitem:hover .countitem__ttl{
  color: #f37000;
}

/* current時もタイトル文字色だけ変更 */
.countitem.is-current .countitem__ttl{
  color: #f37000;
}

/* current時にサブテキストを変えたい場合だけ */
.countitem.is-current .countitem__sub{
  color: var(--muted);
}

/* スクロール先が固定ナビに隠れにくいように */
.wr-card-list{
  scroll-margin-top: calc(var(--count-items-sticky-top) + 8rem);
}

/* ------------------------------
   カードリスト
------------------------------ */

/* 外側は必要に応じて。既に全体レイアウトがあるなら省略OK */
.wr-lower-cards{
  background:#fff;
  margin: var(--gap) 0;
}
.wr-lower-cards__inner{
  /* 左右余白なし指定なら 0、必要なら調整 */
  padding: 0;
  margin: 0;
}

/* カード列：枚数可変 */
.wr-card-list{
  list-style:none;
  margin:0 0 4.0rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;     /* 折り返したい場合 */
  gap: var(--gap);
  align-items:flex-start;
}
.wr-card-list__item{
  width: var(--card-w);
}

/* 共通 */
.wr-card{ color:#111; }
.wr-card a{ color:inherit; text-decoration:none; }
.wr-card a:hover{ text-decoration:none; }

/* 先頭（テキストカード） */
.wr-card--lead{
  background:#f37000;
  color:#fff;
  padding: 6px;
  position:relative;
  box-sizing:border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wr-card--lead__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}
.wr-card--lead__top img {
  max-width: 6.0rem;
  height: auto;
}
.wr-card--lead__title{
  margin:6px 0 0 6px;
  font-size: 20px;
  line-height:1.05;
  font-weight: 900;
  letter-spacing:.02em;
}
.wr-card--lead__thumb{
  width: 6.0rem;
  height: 6.0rem;
  object-fit: cover;
  background:#fff;
  flex: 0 0 auto;
}
.wr-card--lead__sub{
  margin: 12px 5px 10px;
  font-weight: 900;
  font-size: 12px;
  line-height:1.35;
  flex: 0 0 auto;
}
.wr-card--lead__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 5px 3.2rem;
  display: flex;
  flex-direction: column;
}
.wr-card--lead__label{
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  line-height: 1.4;
  flex: 0 0 auto;
  color: var(--definition);
  font-weight: 700;
}

.wr-card--lead__desc{
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--definition);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 11;
}
.wr-card--lead__desc strong {
  font-weight: 700;
  display: block;
}
.wr-card--lead__body p{
  margin: 8px 0 0;
}
.wr-card--lead__body b{ font-weight: 900; }

.wr-card--lead__more{
  position:absolute;
  right: 5px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  background:#fff;
  display:grid;
  place-items:center;
  border-radius: 50%;
}
.wr-card--lead__moreIcon{
  width: 7px;
  height: 7px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(-45deg);
  display:block;
  margin-left: -3px;
}

/* 通常カード（スナップ） */
.wr-card--snap__media{
  display:block;
  position:relative;
  width: 100%;
  height: auto;
  aspect-ratio: 236 / 369;
  background:#eee;
  overflow:hidden;
}

.wr-card--snap__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.wr-card--snap__btn{
  position:absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(220,220,220,.85);
  color:#111;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.wr-card--snap__caption{
  margin: var(--snap-caption-mt) 0 0;
  font-size: var(--snap-caption-fz);
  line-height: var(--snap-caption-lh);
  color:#111;
  max-height: calc(var(--snap-caption-fz) * var(--snap-caption-lh) * var(--snap-caption-lines));
  overflow: hidden;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wr-card__btnIcon{
  width: 7px;
  height: 7px;
  border-right: 2px solid #111;  /* ボタン文字色に合わせる */
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
  display: inline-block;
  margin-left: .2rem;
}

/* ホバーで少し浮く（カードのリンク全体） */
.wr-card__media,
.wr-card--snap__media{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
  aspect-ratio: var(--snap-ar);
}

.wr-card__media:hover,
.wr-card--snap__media:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* キーボード操作でも同じ見た目に（任意） */
.wr-card__media:focus-visible,
.wr-card--snap__media:focus-visible{
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* ホバーで少し浮く（カードのリンク全体） */
.wr-card__media,
.wr-card--snap__media{
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* hoverで少し拡大（共通） */
.iconBtn,
.wr-card--lead__more,
.goBtn{
  transition: transform .15s ease;
  transform-origin: center;
}

/* マウス hover */
.iconBtn:hover,
.wr-card--lead__more:hover,
.goBtn:hover{
  transform: scale(1.06);
}

/* キーボード操作でも同等に（任意） */
.iconBtn:focus-visible,
.wr-card--lead__more:focus-visible,
.goBtn:focus-visible{
  transform: scale(1.06);
}

/* ------------------------------
   site.css上書き
------------------------------ */
html{
  min-width: 0;
}

body{
  min-width: 0;
  overflow-x: hidden;
}

footer{
  min-width: 0;
}

.contents,
.topBannerWrapper,
.footer_links,
.search,
#google_translate_element{
  width: auto;
  max-width: 100%;
}

@media (max-width: 1000px){
  .contents{
    width: auto;
    margin: 1rem;
    overflow: visible;
  }

  .mainContents,
  .AD{
    float: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  }

  .AD{
    margin-top: 1.6rem;
  }

  .globalNavi,
  .mWrapper,
  .contentsMenuInner,
  .footer_links{
    width: auto;
    max-width: 100%;
    margin-left: 1rem;
    margin-right: 1rem;
    box-sizing: border-box;
  }
}


/* ------------------------------
   グラフ上書き
------------------------------ */
#countDatagraph_wrapper {
    width: 300px;
    height: 421px;
}
#countDatagraph,
.countDate {
  width: 100%;
  max-width: 300px;
}
.countDate strong {
  font-size: 1.4rem;
}
.countDate span {
  font-size: 1.2rem;
}
#countDatagraph {
  height: 421px;
}
#countDatagraph_thumb {
  top: 40px;
}
#countDatagraph_base {
  height: 421px;
}
#countDatagraph_list {
  top:78px;
}

#countDatagraph_list .cd_bar,
#countDatagraph_list .cd_bar_open,
#countDatagraph_list .cd_current,
#countDatagraph_list .cd_bar .man,
#countDatagraph_list .cd_bar .woman,
#countDatagraph_list .cd_bar .skirt,
#countDatagraph_list .cd_current .man,
#countDatagraph_list .cd_current .woman,
#countDatagraph_list .cd_current .skirt,
#countDatagraph_list .cd_current .countitem1,
#countDatagraph_list .cd_current .countitem1_sub,
#countDatagraph_list .cd_current .countitem2,
#countDatagraph_list .cd_current .countitem2_sub,
#countData_timeline_m .countData_m {
  box-sizing: border-box;
}
#countData_timeline_m,
#countData_timeline_y {
  width: auto;
  box-sizing: border-box;
}

#countData_timeline_m .countData_m,
#countData_timeline_y .countData_y {
  box-sizing: border-box;
}

/* ------------------------------
   レスポンシブ
------------------------------ */
/* タブレット：bottom3 を段落ち（2カラム）して重なり回避 */
@media (max-width: 1240px) and (min-width: 901px){
  .bottom3{
    display: grid;
    grid-template-columns: repeat(2, 300px);
    gap: 1.6rem;
    align-items: start;
    justify-content: center;
  }

  .b3{
    grid-column: 1 / -1;
  }

  .hero{
    min-height: 32rem;
  }
}

@media (max-width: 1100px){
  .frame{ grid-template-columns: 1fr 30rem; }
}

/* SP：wr-card-list を2カラム／画像は比率維持で可変 */
@media (max-width: 900px){
  .frame{ grid-template-columns: 1fr; }
  .bottom3{
    column-gap: 0;
    row-gap: var(--gap22);
    grid-template-columns: 1fr;
  }
  .b1, .b2{ padding: 1.6rem 0; }
  .b3{ display:none; }
  .hero{ min-height: 38rem; }
  .countitem__sub {display: none;}

  .b1Row{
    grid-template-columns: 17rem 1fr;
  }

  .b1Row:has(.monthCard){
    grid-template-columns: 1fr 17rem;
  }

  .b1Row:has(.metaPanel){
    grid-template-columns: 17rem 1fr;
  }

  .thumb1,
  .thumb2{
    width: 100%;
    height: auto;
    aspect-ratio: var(--snap-ar);
  }

  .monthCard,
  .metaPanel{
    height: 100%;
    min-height: 0;
  }
  .b1, .b2, .b3{
    max-height: 100%;
  }
  main.wrap{
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .wr-card-list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;           /* カード間 18px を維持 */
    align-items: stretch;
  }

  /* 固定幅を解除（liの width:236px を上書き） */
  .wr-card-list__item{
    width: auto;
    display: flex;
  }

  .wr-card-list__item > .wr-card{
    width: 100%;
    height: 100%;
  }

  /* 画像枠：高さ固定369pxをやめて、比率で決める */
  .wr-card__media,
  .wr-card--snap__media{
    height: auto;
    aspect-ratio: 236 / 369;  /* ★縦横比そのまま */
  }

  .wr-card__media img,
  .wr-card--snap__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wr-teiten-lower__banner {
    padding: 0;
  }

  .countitem {
    padding: 0 0.8rem;
  }

  .countitem__img{
    width: 4.4rem;
    height: 4.4rem;
  }

  :root{
    --card-h: 28rem;
    --snap-caption-mt: .8rem;
    --snap-caption-fz: 1.1rem;
    --snap-caption-fz: 1.1rem;
    --snap-caption-lh: 1.4;
    --snap-caption-lines: 2;
  }

  .wr-card--lead{
    padding: .5rem;
  }

  .wr-card--lead__title{
    margin: .5rem 0 0 .5rem;
    font-size: 1.6rem;
  }

  .wr-card--lead__thumb{
    width: 4.8rem;
    height: 4.8rem;
  }

  .wr-card--lead__sub{
    margin: .8rem .4rem .8rem;
    font-size: 1.1rem;
  }

  .wr-card--lead__body{
    font-size: 1rem;
    line-height: 1.45;
  }

  .wr-card--lead__more{
    width: 2.2rem;
    height: 2.2rem;
    right: .4rem;
    bottom: .4rem;
  }
  .wr-card--lead__label{
    font-size: 1rem;
  }

  .wr-card--lead__desc{
    font-size: 1rem;
    line-height: 1.45;
    -webkit-line-clamp: 11;
  }
}
@media print{

}