/* =========================================================
   scarecrow LP — スタイルシート
   SWELL子テーマ page-lp.php 専用
   ブランドカラー：ネイビー #004183 / レッド #C63031
   フォント：Zen Old Mincho × Zen Kaku Gothic New
   ========================================================= */

:root{
  --sc-navy:#004183;
  --sc-navy-dark:#002B54;
  --sc-accent:#C63031;
  --sc-accent-dark:#A82526;
  --sc-blue:#3E7C9A;
  --sc-cream:#FFFFFF;
  --sc-cream-2:#FFFFFF;
  --sc-cream-3:#F5F7FA;
  --sc-ink:#2C2824;
  --sc-ink-soft:#4A4339;
  --sc-ink-mute:#5A5249;
  --sc-line:rgba(0,65,131,0.10);
  --sc-head:'Zen Old Mincho', serif;
  --sc-body:'Zen Kaku Gothic New', sans-serif;
  --sc-radius:20px;
  --sc-shadow:0 10px 30px rgba(0,65,131,0.08);
  --sc-shadow-lg:0 20px 48px rgba(0,65,131,0.22);
  --sc-max:1180px;
}

/* ---- リセット ---- */
body{margin:0;overflow-x:hidden;}
.sc-lp *{box-sizing:border-box;}
.sc-lp{
  font-family:var(--sc-body);
  color:var(--sc-ink);
  background:var(--sc-cream);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.sc-lp ::selection{background:var(--sc-accent);color:#fff;}
.sc-lp img{max-width:100%;height:auto;display:block;}

/* ---- 汎用 ---- */

.sc-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.2em;color:var(--sc-accent);}
.sc-h2{font-family:var(--sc-head);font-weight:700;font-size:36px;line-height:1.5;color:var(--sc-navy);margin:16px 0 14px;text-align:center;}
.sc-lead{font-size:15.5px;color:var(--sc-ink-mute);margin:0 auto 52px;text-align:center;max-width:640px;text-wrap:balance;}
.sc-section{padding:96px 0;}
.sc-bg-cream{background:var(--sc-cream);}
.sc-bg-cream2{background:var(--sc-cream-2);}
.sc-bg-cream3{background:var(--sc-cream-3);}

/* ---- ボタン ---- */
.sc-btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;
  text-decoration:none;border-radius:999px;font-family:inherit;cursor:pointer;
  transition:transform .15s ease,background .2s ease,border-color .2s ease;}
.sc-btn--primary{background:var(--sc-accent);color:#fff;font-size:15.5px;padding:17px 30px;
  box-shadow:0 8px 22px rgba(198,48,49,0.30);border:none;}
.sc-btn--primary:hover{background:var(--sc-accent-dark);transform:translateY(-1px);}
.sc-btn--navy{background:var(--sc-navy);color:#fff;font-size:15px;padding:15px 28px;border:none;}
.sc-btn--navy:hover{background:var(--sc-navy-dark);}
.sc-btn--ghost{background:transparent;color:var(--sc-navy);font-size:15.5px;padding:16px 28px;
  border:1.5px solid rgba(0,65,131,0.25);}
.sc-btn--ghost:hover{background:rgba(0,65,131,0.05);border-color:rgba(0,65,131,0.45);}
.sc-btn--line{background:#06C755;color:#fff;font-size:15px;padding:15px 28px;border:none;}
.sc-btn--line:hover{background:#05a648;transform:translateY(-1px);}
.sc-btn small{font-weight:500;opacity:0.75;font-size:13px;}

/* ---- ヘッダー ---- */

/* ---- ヘッダードロップダウン（お客様の声・お問い合わせ） ---- */

/* ---- ハンバーガーメニュー（SP用） ---- */

/* ---- ヒーロー ---- */
.sc-hero{position:relative;min-height:calc(100vh - 73px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--sc-navy-dark);}
.sc-hero__bg{position:absolute;inset:0;z-index:0;}
.sc-hero__photo{width:100%;height:100%;object-fit:cover;display:block;}

/* 動画タグ（<video>使用時） */
.sc-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}

.sc-hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(0,30,60,0.78) 0%,rgba(0,30,60,0.50) 38%,rgba(0,30,60,0.10) 68%,rgba(0,30,60,0) 85%),
             linear-gradient(0deg,rgba(0,20,40,0.55) 0%,rgba(0,20,40,0) 32%);}
.sc-video-tag{position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,65,131,0.55);color:#fff;font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px;}
.sc-hero__inner{position:relative;z-index:1;width:100%;padding-top:84px;padding-bottom:96px;}
.sc-hero__col{max-width:620px;}
.sc-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;}
.sc-kicker__bar{width:24px;height:1.5px;background:var(--sc-accent);}
.sc-kicker__text{font-size:12px;font-weight:700;letter-spacing:0.22em;color:#fff;}
.sc-hero h1{font-family:var(--sc-head);font-weight:700;font-size:clamp(40px,4.4vw,54px);
  line-height:1.4;letter-spacing:0.01em;color:#fff;margin:0 0 22px;word-break:keep-all;
  text-shadow:0 2px 18px rgba(0,0,0,0.25);}
.sc-hero__sub{font-size:17.5px;line-height:1.95;color:rgba(255,255,255,0.92);margin:0 0 28px;max-width:440px;
  text-shadow:0 1px 12px rgba(0,0,0,0.22);}
.sc-hero__cta{display:flex;flex-wrap:wrap;gap:14px;}

/* ---- 実績パネル ---- */
.sc-stats{background:var(--sc-navy);border-radius:24px;padding:54px 56px;
  box-shadow:var(--sc-shadow-lg);margin:70px 0;}
.sc-stats__title{text-align:center;margin-bottom:42px;font-family:var(--sc-head);
  font-size:25px;font-weight:600;color:var(--sc-cream);letter-spacing:0.04em;}
.sc-stats__grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:stretch;}
/* 2行積みの combo 項目だけ縦に長くなるため、flex-end揃えで3項目のラベル位置を底辺で揃える */
.sc-stat{flex:1 1 140px;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;}
.sc-stat + .sc-stat{border-left:1px solid rgba(255,255,255,0.14);}
.sc-stat__num{font-family:var(--sc-head);font-size:46px;font-weight:700;color:#fff;line-height:1;}
.sc-stat__num em{font-style:normal;color:var(--sc-accent);}
/* 【2026-09-05】Illustrator入稿どおり、単位（年・軒・カ国）を1.08px持ち上げて
   目視でのベースラインを整える（ユーザー指示：意図的な調整） */
.sc-stat__num small{font-size:21px;vertical-align:1.08px;}
/* 【2026-09-05】特許項目：数字「4」だけ63px（他の数字46pxの約1.37倍）に拡大し、
   実績パネル内で最も目を引く要素にする。
   line-height:0 で行ボックスを46pxのまま保つのが要点。これを付けないと行が63pxに広がり、
   3項目を底辺で揃えている flex-end のバランスが崩れる。 */
.sc-stat__num--patent em{font-size:63px;line-height:0;vertical-align:baseline;}
.sc-stat__patent-word{vertical-align:3.36px;}
.sc-stat__num--patent small{vertical-align:0.36px;}
/* 【2026-08-27】「3,000軒」×「31カ国」を1枚のカードに融合した統合表記 */
.sc-stat--combo{flex:1 1 220px;}
/* 【2026-08-27追加修正】他2項目（46px）と文字サイズが違って見えると指摘あり。
   横幅に収めるための縮小ではなく、同じ46pxのまま「数字／×／数字」の3行積みにする。
   ×の上下だけ行間を詰め、センター揃えにする指示のためflex columnで各行を個別制御。 */
.sc-stat__num--combo{font-size:46px;display:flex;flex-direction:column;align-items:center;}
.sc-stat__combo-line{line-height:1.15;}
.sc-stat__combo-sep{display:block;line-height:1;margin:1px 0;color:var(--sc-accent);font-weight:400;font-size:0.5em;}
.sc-stat__label{font-size:13px;color:rgba(255,255,255,0.72);margin-top:12px;}
.sc-stats__link{text-align:center;margin-top:42px;}
/* 【2026-09-05】SP2行組み対応でリンク本文を2つのspanに分割したため、gapを8px→0に変更。
   PCでは1文として連続表示させる必要があり、8pxのままだと不要な隙間が入る。 */
.sc-stats__link a{text-decoration:none;display:inline-flex;align-items:center;gap:0;
  color:#9DBCE6;font-size:14.5px;font-weight:600;}
.sc-stats__link a:hover{color:#fff;}

/* ---- 診断（写真リズム対応：モバイル=縦積み／PC=左右分割） ---- */
.sc-diag{max-width:760px;margin:0 auto;text-align:center;}
.sc-diag h2{margin-top:16px;}
.sc-diag__cta{margin-top:8px;}

/* モバイル基本形：写真→コピー→CTAの縦一本道。崩れる要素（動画・横並び）を持たない */
.sc-diag__photo{
  aspect-ratio:4/3; border-radius:var(--sc-radius); overflow:hidden;
  margin:0 auto 32px; box-shadow:var(--sc-shadow);
}
.sc-diag__photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* PC（901px以上）：写真とコピーを左右分割し、間延びを防止 */
@media (min-width:901px){
  .sc-diag--split{
    max-width:980px; display:grid; grid-template-columns:minmax(280px,380px) 1fr;
    gap:56px; align-items:center; text-align:left;
  }
  .sc-diag--split .sc-diag__photo{ margin-bottom:0; aspect-ratio:1/1; }
  .sc-diag--split .sc-lead{ margin-left:0; margin-right:0; text-align:left; }
  .sc-diag--split .sc-eyebrow,
  .sc-diag--split h2{ text-align:left; }
}

/* ---- 製品（2ライン） ---- */
.sc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.sc-card{background:#fff;border-radius:var(--sc-radius);padding:40px;position:relative;
  overflow:hidden;box-shadow:var(--sc-shadow);border:1px solid rgba(0,65,131,0.06);}

/* 製品画像プレースホルダー（画像納品後、中のspanをimgタグに差し替え） */
.sc-card__img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  margin-bottom:28px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(0,65,131,0.06),rgba(0,65,131,0.02));
  display:flex;align-items:center;justify-content:center;
}
.sc-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-card__img__ph{font-size:12px;line-height:1.7;text-align:center;color:var(--sc-ink-mute);padding:0 20px;}
.sc-card__img__ph strong{display:block;font-size:13.5px;color:var(--sc-navy);margin-bottom:4px;}
.sc-card__tag{display:inline-block;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;}
.sc-card h3{font-family:var(--sc-head);font-size:30px;font-weight:700;color:var(--sc-navy);margin:20px 0 12px;}
.sc-card p{font-size:15px;color:var(--sc-ink-mute);margin:0 0 32px;line-height:1.85;}
.sc-card--feature{box-shadow:0 14px 36px rgba(0,65,131,0.12);border-color:rgba(198,48,49,0.18);}
.sc-card__ribbon{position:absolute;top:0;right:0;background:var(--sc-accent);color:#fff;
  font-size:12px;font-weight:700;padding:8px 18px;border-bottom-left-radius:14px;}

/* 製品セクション下部：全16製品・獣医師専用製品への橋渡し一文 */
.sc-products__more{text-align:center;max-width:560px;margin:44px auto 0;}
.sc-products__more p{font-size:13.5px;color:var(--sc-ink-mute);line-height:1.85;margin:0 0 14px;}
.sc-products__more a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  color:var(--sc-navy);font-size:14.5px;font-weight:700;}
.sc-products__more a:hover{color:var(--sc-accent);}

/* ---- 研究（3カラム） ---- */
.sc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px;}
/* 【2026-08-30】CEO指摘（スマホで余白が多く間延びして見える）への対応で、
   左寄せ・52pxアイコンのカードから「イラスト上／テキスト下・中央揃え」へ変更。 */
.sc-feature{background:#fff;border-radius:18px;padding:30px 26px 34px;
  border:1px solid rgba(0,65,131,0.07);box-shadow:0 8px 24px rgba(0,65,131,0.06);
  text-align:center;}
/* 旧アイコン用スタイル。現在 page-lp.php からは未使用だが切り戻し用に温存。 */
.sc-feature__ic{width:52px;height:52px;border-radius:14px;background:rgba(0,65,131,0.06);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.sc-feature__img{max-width:280px;margin:0 auto 22px;}
.sc-feature__img img{display:block;width:100%;height:auto;}
.sc-feature h3{font-family:var(--sc-head);font-size:19px;font-weight:700;color:var(--sc-navy);margin:0 0 10px;}
.sc-feature p{font-size:14px;color:var(--sc-ink-mute);margin:0;line-height:1.8;}
.sc-center{text-align:center;}

/* ---- 病院検索 ---- */
.sc-finder{display:flex;gap:12px;background:#fff;border:1px solid rgba(0,65,131,0.12);
  border-radius:14px;padding:10px 10px 10px 20px;align-items:center;
  box-shadow:0 8px 24px rgba(0,65,131,0.07);max-width:620px;margin:0 auto 44px;}
.sc-finder span{flex:1;font-size:15px;color:#8A8175;}
.sc-quote{background:#fff;border-radius:16px;padding:30px;border:1px solid rgba(0,65,131,0.06);position:relative;}
.sc-quote__badge{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(0,65,131,0.07);color:var(--sc-navy);font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;}
.sc-quote__badge svg{flex:none;}
.sc-quote__mark{font-family:var(--sc-head);font-size:34px;color:var(--sc-accent);line-height:0.6;margin-bottom:10px;}
.sc-quote p{font-size:15.5px;color:#3A342C;line-height:1.9;margin:0 0 16px;}
.sc-quote small{font-size:12px;color:#9A9185;}

/* ---- アフターケア ---- */
.sc-care{background:var(--sc-navy);border-radius:var(--sc-radius);padding:40px;color:#fff;}
.sc-care h3{font-family:var(--sc-head);font-size:24px;font-weight:700;margin:0 0 12px;}
.sc-care p{font-size:14.5px;color:rgba(255,255,255,0.80);margin:0 0 28px;line-height:1.85;}
.sc-care__ic{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,0.10);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;}

/* ---- フッター ---- */
.sc-footer{background:var(--sc-navy-dark);color:rgba(255,255,255,0.85);padding:64px 0 28px;}
.sc-footer__top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.12);}
.sc-footer__brand{max-width:320px;}
.sc-footer__brand p{font-size:13.5px;line-height:1.9;margin:0;color:rgba(255,255,255,0.62);}

/* ---- 公式SNSアイコン列（2026-08-30追加） ----
   マークアップの管理元は footer-sns.php（TOP・診断・共通フッターで共有）。
   ただしTOPは site-footer.css を読み込まない設計（functions.php の $is_lp 分岐）
   のため、スタイルだけはこちらにも同内容を持つ必要がある。
   ★site-footer.css 側の .sc-footer__sns 系を変更したら必ずここも揃えること。 */
.sc-footer__sns{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:20px;}
.sc-footer__sns-link{display:inline-flex;align-items:center;justify-content:center;padding:5px;
  color:rgba(255,255,255,0.72);text-decoration:none;transition:color .2s ease,transform .2s ease;}
.sc-footer__sns-link:hover,.sc-footer__sns-link:focus-visible{color:#fff;transform:translateY(-2px);}
.sc-footer__sns-link:focus-visible{outline:2px solid rgba(255,255,255,0.7);outline-offset:4px;border-radius:4px;}
.sc-footer__sns-link svg{display:block;}
@media (max-width:767px){
  .sc-footer__sns{gap:2px;margin-top:16px;}
  .sc-footer__sns-link{padding:9px;}
  .sc-footer__sns-link:hover{transform:none;}
}

.sc-footer__cols{display:flex;gap:72px;flex-wrap:wrap;}
.sc-footer__h{font-size:12px;font-weight:700;letter-spacing:0.1em;color:#9DBCE6;margin-bottom:18px;}
.sc-footer__links{display:flex;flex-direction:column;gap:12px;}
.sc-footer__links a{text-decoration:none;color:rgba(255,255,255,0.72);font-size:13.5px;}
.sc-footer__links a:hover{color:#fff;}
.sc-footer__copy{padding-top:24px;text-align:center;font-size:12px;color:rgba(255,255,255,0.45);}

/* ---- 製品ラインナップ（パッケージ画像スライド） ---- */
.sc-lineup{padding-bottom:88px;}
.sc-lineup .sc-lead{margin-bottom:48px;}
.sc-lineup__viewport{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);}
/* 【2026-08-28】iPhone 8での描画カクつき対策。36枚の画像を載せたレイヤーを毎フレーム
   合成し直すとA11では負荷が高いため、あらかじめ合成レイヤーへ昇格させて再描画を防ぐ。 */
.sc-lineup__track{display:flex;width:max-content;gap:28px;padding:0 28px;
  animation:sc-lineup-slide 46s linear infinite;
  will-change:transform;backface-visibility:hidden;}
.sc-lineup__viewport:hover .sc-lineup__track{animation-play-state:paused;}
.sc-lineup__item{flex:none;width:150px;background:#fff;border-radius:16px;padding:20px 16px 16px;
  border:1px solid rgba(0,65,131,0.07);box-shadow:0 8px 22px rgba(0,65,131,0.06);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  text-decoration:none;transition:box-shadow .2s ease,transform .2s ease;}
.sc-lineup__item:hover{box-shadow:0 10px 26px rgba(0,65,131,0.14);transform:translateY(-2px);}
/* 【2026-08-28】img を picture でラップしたため、フレックスの子となる picture 側に
   幅指定が必要（picture は既定で display:inline のため指定なしだと潰れる）。 */
.sc-lineup__item picture{display:block;width:100%;}
.sc-lineup__item img{width:100%;height:120px;object-fit:contain;}
.sc-lineup__item span{font-size:12.5px;font-weight:700;color:var(--sc-navy);line-height:1.5;}

@keyframes sc-lineup-slide{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

@media (prefers-reduced-motion:reduce){
  .sc-lineup__track{animation:none;}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:900px){
  .sc-grid-3{grid-template-columns:1fr;}
  /* 【2026-08-30】1カラム化するとカードが画面幅いっぱいに広がり、中身が小さいままだと
     左右に大きな余白が残る（CEO指摘の「間が抜けている」状態）。イラストを大きめに使い、
     テキストは中央揃えのまま下に配置してカード内のバランスを取る。 */
  .sc-feature{padding:28px 20px 30px;}
  .sc-feature__img{max-width:320px;margin-bottom:20px;}
}

@media (max-width:680px){
  
  .sc-section{padding:64px 0;}
  /* 【2026-09-05】縦組み化で情報量が縦に伸びるため、入稿データの実測どおり上下の余白を広げる。
     左右は24pxを維持する（入稿アートボードは幅406pxで実機SPより広く、そのまま左右52pxにすると
     「国内の動物病院導入 ＋ 海外への輸出実績」が横に収まらないため。ここだけ入稿値を採らない） */
  .sc-stats{padding:42px 24px 50px;}
  .sc-grid-2{grid-template-columns:1fr;}
  /* =========================================================
     【2026-09-05】SP縦組み（Illustrator入稿 _design-handoff/top-stats-section.svg 準拠）
     従来は680px以下でborder-leftを消すだけで、縦積み時に3項目の区切りが消えていた。
     入稿指示どおり、縦罫→横罫2本に置き換えて区切りを復活させる。
     flex-wrap任せだと折り返し位置が幅次第で変わるため、flex-direction:columnで明示する。
     区切り線の上下余白47pxは入稿データの実測値。
     ========================================================= */
  .sc-stats__grid{flex-direction:column;gap:0;}
  .sc-stat{flex:1 1 auto;}
  .sc-stat + .sc-stat{border-left:none;
    border-top:1px solid rgba(255,255,255,0.14);margin-top:47px;padding-top:47px;}
  /* タイトルは2行組み。SPでは「—」を落とす指示（PCは1行・ダッシュありのまま） */
  .sc-stats__title{line-height:1.6;margin-bottom:54px;}
  .sc-stats__link{margin-top:70px;}
  .sc-stats__title-dash{display:none;}
  .sc-stats__title-a,
  .sc-stats__title-b{display:block;}
  /* リンクも2行組みにする */
  .sc-stats__link a{flex-direction:column;line-height:1.2;}
  /* 【2026-08-27追加修正】2行積み（brで改行）に変更したため、狭い画面でも46pxのまま収まる。
     縮小の必要がなくなったため個別指定を削除。 */
  .sc-h2{font-size:28px;}
  .sc-hero{min-height:78vh;}
  .sc-hero__scrim{background:
    linear-gradient(180deg,rgba(0,30,60,0.35) 0%,rgba(0,30,60,0.20) 40%,rgba(0,20,40,0.78) 100%);}
  .sc-lineup{padding-bottom:64px;}
  .sc-lineup__track{gap:18px;padding:0 18px;animation-duration:34s;}
  .sc-lineup__item{width:112px;padding:14px 10px 12px;border-radius:12px;}
  .sc-lineup__item img{height:88px;}
  .sc-lineup__item span{font-size:11px;}
}

/* =========================================================
   NEWS（TOPの更新情報／page-lp.php の #news セクション）
   2026-09-05新規追加。
   ★経緯：このセクションのHTML（.sc-news__*）は以前から存在していたが、
     対応するCSSがどのファイルにも一度も定義されておらず、ブラウザ既定の
     箇条書きリストのまま表示されていた（2026-09-05の実測で判明）。
     /news/ 一覧ページ新設にあわせて、news-style.css の .nw-item と
     同じ設計思想（日付＋出自ラベル＋タイトルの横並び／SPは2段組み）で新規に定義する。
   ========================================================= */
.sc-news__list{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--sc-line);max-width:900px;margin-left:auto;margin-right:auto;}
.sc-news__item{border-bottom:1px solid var(--sc-line);}
.sc-news__link{display:flex;align-items:baseline;gap:18px;padding:18px 6px;
  text-decoration:none;color:inherit;transition:background-color 0.2s ease;}
.sc-news__link:hover{background:rgba(0,65,131,0.03);}
.sc-news__meta{flex:0 0 auto;display:flex;align-items:center;gap:12px;width:250px;}
.sc-news__date{font-size:13px;color:var(--sc-ink-mute);letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.sc-news__tag{flex:0 0 auto;display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:0.04em;line-height:1;padding:6px 10px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap;}
.sc-news__tag.is-own{color:var(--sc-accent);background:rgba(198,48,49,0.06);}
.sc-news__tag.is-column{color:var(--sc-navy);background:rgba(0,65,131,0.06);}
.sc-news__tag.is-blog{color:#4A6B3F;background:rgba(74,107,63,0.07);}
.sc-news__title{flex:1 1 auto;font-size:15px;font-weight:500;color:var(--sc-ink);line-height:1.7;}
.sc-news__link:hover .sc-news__title{color:var(--sc-navy);text-decoration:underline;text-underline-offset:3px;}
.sc-news__ext{margin-left:6px;font-size:0.82em;color:var(--sc-ink-mute);}
.sc-news__more{margin-top:36px;}

@media (max-width:780px){
  /* SPでは日付＋ラベルを上段、タイトルを下段の2段組みにする */
  .sc-news__link{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 2px;}
  .sc-news__meta{width:auto;gap:10px;}
  .sc-news__title{font-size:14.5px;}
  .sc-news__more{margin-top:28px;}
}