/* PickleK お知らせ機能（トップ抜粋・一覧ページ・記事ページ）共通スタイル。
   common.css の上に重ねる、school/style.css・recruit/style.css と同じ構成。
   PickleK/index.html（トップ抜粋）と PickleK/announcements/ 配下の全ページから読み込む。 */

/* .section-sub は common.css 側の定義を使う */

/* ========== カテゴリ内部名 → バッジ表示文言の対応
   お知らせ     → お知らせ
   イベント     → イベント
   キャンペーン → キャンペーン
   メディア掲載 → メディア（バッジは熟読されないため短縮。他バッジとの文字数バランスも優先）
   カテゴリによる色分けはしない（単色navy） ========== */
.news-tag{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:5px 12px;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;line-height:1;
  border:1px solid var(--c-navy);color:var(--c-navy);background:var(--c-white);white-space:nowrap;
}

/* ---- トップ抜粋・一覧共通：日付＋バッジ＋タイトルの行 ---- */
/* 行全体をaにしてクリック範囲を拡張し、hoverで薄い青背景を敷く（news-titleは行内のspanに変更） */
/* 日付+バッジは.news-row-metaでひとまとめにする。分けたままモバイルでflex-wrap時にgapを付けると、
   min-widthの余白（日付↔バッジ用）とgapの列間隔（480px以下のみ）が二重にかかって余白が広がりすぎるため */
.news-list{border-top:1px solid rgba(31,58,138,.14)}
.news-row{
  display:flex;align-items:center;
  padding:16px 4px;border-bottom:1px solid rgba(31,58,138,.14);
  transition:background-color .15s ease;
}
/* --c-sky（#9CC9E8）を35%の透過で使うため rgba で直書き */
.news-row:hover{background:rgba(156,201,232,.35)}
.news-row-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.news-row time{
  font-family:var(--font-display);font-weight:600;color:var(--c-grey);
  font-size:16px;white-space:nowrap;min-width:80px;
}
.news-row .news-tag{margin-right:24px}
.news-row .news-title{
  flex:1;color:var(--c-charcoal);font-weight:600;font-size:16px;min-width:0;
}
.news-row:hover .news-title{color:var(--c-navy)}
/* バッジ自体は白背景固定のため、hover時は透明にして行の薄青がそのまま透けるようにする */
.news-row:hover .news-tag{background:transparent}
@media (max-width:480px){
  /* .news-row-metaが1行目に単独で収まり、.news-titleがflex-basis:100%で2行目に折り返すため、
     行間はrow-gapのみで足りる（column-gapは同一行に2要素が並ぶ場合のみ効くので不要） */
  .news-row{flex-wrap:wrap;row-gap:8px}
  .news-row-meta{order:1}
  .news-row .news-title{order:2;flex-basis:100%}
}

/* ---- トップページ抜粋（PickleK/index.html の #news 内でのみ使用） ---- */
/* section標準paddingは96px（index.css の section）。Newsは他セクションを圧迫しないよう半分に圧縮。
   ブレークポイントはサイト既存の992px/480px（index.css・common.cssの全箇所と同じ）に合わせる。
   96/64/56pxの半分＝48/32/28px */
.news-section{padding:48px 0;background:var(--c-ivory)}
.news-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:8px;flex-wrap:wrap;
}
.news-head .kicker-h2 .section-kicker{margin-bottom:10px}
.news-head .kicker-h2 h2{margin-bottom:0}
/* hover のときだけアンダーラインを左から引く方式。
   「一覧を見る」は目立たせる要素ではないため線は1px */
.news-more{
  display:inline-block;flex-shrink:0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-navy);
  text-decoration:none;white-space:nowrap;
}
.news-more::before{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.news-more:hover::before{transform:scaleX(1)}
/* 抜粋は一覧性を優先して1行に収め、はみ出す分は省略する（全文は一覧ページ・記事側で読める） */
.news-section .news-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:992px){
  .news-section{padding:32px 0}
}
@media (max-width:480px){
  .news-section{padding:28px 0}
  /* 抜粋は1行表示で文字数が限られるため、行を .container の左右余白ぶん画面端まで広げ、
     行の内側の余白を半分（8px）にしてタイトルの表示幅を稼ぐ。上下の余白と日付行との間隔も詰める */
  .news-section .news-list{margin-inline:calc(var(--container-pad,18px) * -1)}
  .news-section .news-row{padding:12px 8px;row-gap:4px}
  /* 日付とバッジは補足情報なので一段小さくする。バッジは高さ(24px)を保つため、文字が小さくなったぶん上下の余白を足す */
  /* min-width は日付の文字幅（14px で約66px）にそろえ、日付の長さが違う行でもバッジの左端がそろうようにする */
  .news-section .news-row time{font-size:14px;min-width:70px}
  .news-section .news-tag{font-size:11px;padding-block:5.5px}
}

/* ---- 一覧ページ（PickleK/announcements/index.html） ---- */
.list-page-head{padding:48px 0 8px}
.list-page-body{padding:8px 0 64px}

/* ---- 記事ページ（PickleK/announcements/<slug>/index.html） ---- */
.article-meta{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.article-meta time{font-family:var(--font-display);font-weight:500;color:var(--c-charcoal);font-size:16px;margin-left:auto}
.article-meta time::before{content:"公開日：";font-size:14px}

/* 縦長の個人プレー写真を横並びにするギャラリー。
   PC幅ではgridで3等分し、680px全幅を埋める（object-fit:coverで縦長写真を9:16トリミング）。
   480px以下は1枚が小さくなりすぎるため、高さ固定+横スクロールに切り替える */
/* グリッド内の画像間隔(10px)と、直前の画像との上下間隔を揃える */
.article-fig:has(+ .photo-scroll){margin-bottom:10px}
.article .photo-scroll{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:10px 0 24px;
}
.article .photo-scroll img{
  width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--radius-sm);margin:0;
}
@media (max-width:480px){
  .article .photo-scroll{
    display:flex;overflow-x:auto;padding-bottom:4px;
    scroll-snap-type:x mandatory;
  }
  .article .photo-scroll img{
    flex:0 0 auto;width:auto;height:220px;aspect-ratio:auto;
    scroll-snap-align:start;
  }
}

/* リンクプレビューカード（PR TIMES等、公式埋め込みが無い外部リンクを実OGPデータで静的にハードコードしたもの）。記事本文の全幅 */
/* hoverは .about-card 等の枠付きカードと同じ「浮き上がり+影が伸びる」パターン（index.css参照） */
.link-card{
  display:flex;gap:0;border:3px solid var(--c-navy);border-radius:var(--radius);
  overflow:hidden;background:var(--c-white);box-shadow:var(--shadow-sm);
  width:100%;margin:8px 0 24px;
  transition:transform .15s, box-shadow .15s;
}
.link-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--c-navy)}
.link-card .thumb{
  width:260px;flex-shrink:0;background:var(--c-cream);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.link-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.link-card .body{padding:16px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.link-card .domain{
  font-family:var(--font-display);font-size:12px;color:var(--c-grey);
  text-transform:uppercase;letter-spacing:.08em;
}
.link-card .title{font-weight:700;font-size:16px;color:var(--c-navy-deep);line-height:1.5}
.link-card .desc{font-size:13.5px;color:var(--c-grey);line-height:1.6}
@media (max-width:480px){
  .link-card{flex-direction:column}
  .link-card .thumb{width:100%;height:140px}
}

/* 変更前→変更後の比較表。単位は caption に一度だけ書き、セルは数字のみにする */
.article-table{
  width:100%;border-collapse:collapse;margin:8px 0 18px;
  background:var(--c-white);font-size:16px;line-height:1.5;
}
.article-table caption{
  caption-side:top;text-align:right;font-size:13px;color:var(--c-grey);padding-bottom:4px;
}
.article-table th,
.article-table td{padding:10px 12px;border:1px solid rgba(31,58,138,.25);text-align:left}
.article-table thead th{background:var(--c-navy);color:var(--c-white);font-weight:700;font-size:14px}
.article-table tbody th{font-weight:500}
/* 変更前は読み込み済みOutfitの最細(500)にし、太字navyの変更後と差をつける */
.article-table td{width:22%;text-align:center;font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--c-charcoal)}
.article-table td:last-child{color:var(--c-navy);font-weight:800}
/* 途中で打ち切った表の「以降も同様」行。見出しではないので、数字セル用の装飾を打ち消して控えめに出す */
.article-table tr.more td{
  width:auto;text-align:left;padding:6px 12px;
  font-family:var(--font-jp);font-weight:500;font-size:12px;color:var(--c-grey);
}
/* 文字の「⋮」はどの書体でも点が詰まってコロンに見えるため、縦三点は CSS で描く */
.article-table tr.more td::before{
  content:"";display:inline-block;vertical-align:middle;
  width:3px;height:15px;margin:0 20px 0 12px;
  background:radial-gradient(circle,currentColor 1.2px,transparent 1.5px) 0 0/3px 5px repeat-y;
}
/* 表内の区分見出し行（対象プラン・付与周期ごとに行をまとめる） */
.article-table tr.group th{
  padding:6px 12px;background:rgba(156,201,232,.35);
  color:var(--c-navy);font-weight:700;font-size:14px;
}
@media (max-width:480px){
  .article-table{font-size:15px}
  .article-table th,
  .article-table td{padding:8px}
  /* 「レッスン平日会員・全日会員」が1行に収まるよう、数字列を狭めてプラン列に幅を回す */
  .article-table td{width:18%}
  .article-table tr.group th{padding:6px 8px}
}

/* 変更開始日など、記事で最も伝えたい日付を本文より大きく見せる */
.article .article-lead-date{
  /* navy にすると h2/h3 と見分けがつかず見出しに見えるため、本文と同じ色にする */
  font-family:var(--font-jp);font-weight:800;font-size:28px;line-height:1.4;color:var(--c-charcoal);
  margin-bottom:12px;
}
/* ※の注記は本文(18px)より一段小さくする */
.article .note{font-size:16px}
@media (max-width:480px){
  .article .article-lead-date{font-size:24px}
}

/* 変更前→変更後の1行。ラベルで何の期限かを示し、変更前は打ち消し、変更後は大きく太い黒で強調する */
.article .change-label{margin:20px 0 4px;font-size:16px;font-weight:700;color:var(--c-navy)}
.article .change-line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 16px;
  font-family:var(--font-jp);line-height:1.4;
}
.change-line .before{font-size:20px;font-weight:600;color:var(--c-grey);text-decoration:line-through;text-decoration-thickness:2px}
.change-line .arrow{font-size:20px;font-weight:700;color:var(--c-navy)}
.change-line .after{font-size:28px;font-weight:800;color:var(--c-charcoal)}
@media (max-width:480px){
  .change-line .after{font-size:24px}
}