:root{
  --ink:#151726; --ink-soft:#5c5f7a; --paper:#f7f8fd; --paper-shade:#edeffb;
  --accent:#5b4cf0; --accent-2:#22d3ee; --accent-pale:#ece9ff; --line:#e2e3f3;
  --panel:#171933; --panel-soft:#232650;
  --serif:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --grad:linear-gradient(120deg,var(--accent),var(--accent-2));
}
*{box-sizing:border-box;}
body{background:#fff;color:var(--ink);font-family:var(--sans);margin:0;line-height:1.75;}
a{color:var(--accent);}
.app{display:grid;grid-template-columns:210px 1fr;min-height:100vh;}
.nav{background:var(--paper-shade);color:var(--ink);padding:24px 18px;border-right:1px solid var(--line);}
.nav-bar{display:block;}
.nav-toggle{display:none;}
.nav .brand{font-family:var(--serif);font-size:2.15rem;font-weight:800;letter-spacing:0;line-height:1.15;margin-bottom:8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none;display:block;}
.nav .brand .dot{color:var(--accent-2);-webkit-text-fill-color:var(--accent-2);}
.nav .sub{font-size:.72rem;color:#9799b8;letter-spacing:.04em;line-height:1.6;margin-bottom:30px;}
.nav a.item{display:flex;align-items:center;gap:8px;color:var(--ink-soft);text-decoration:none;font-size:.86rem;padding:9px 10px;border-radius:10px;margin-bottom:2px;}
.nav a.item.active,.nav a.item:hover{background:var(--accent-pale);color:var(--accent);}
.nav .badge{margin-top:30px;font-size:.68rem;color:var(--accent);border:1px solid currentColor;padding:3px 10px;border-radius:999px;display:inline-block;letter-spacing:.08em;}
main{padding:24px 30px 80px;max-width:1180px;}
.app:not(.with-feed) main{max-width:1360px;}

@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .nav{padding:14px 18px;border-right:none;border-bottom:1px solid var(--line);}
  .nav-bar{display:flex;align-items:center;justify-content:space-between;}
  .nav .brand{font-size:1.5rem;margin-bottom:0;}
  .nav-toggle{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:1.1rem;line-height:1;padding:7px 12px;cursor:pointer;color:var(--ink);}
  .nav-panel{display:none;padding-top:16px;}
  .nav.open .nav-panel{display:block;}
  .nav .sub{margin-bottom:16px;}
  main{padding:18px 18px 60px;}
}

.home-hero{padding:20px 30px 6px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
@media (max-width:640px){
  .home-hero{flex-direction:column;}
  .home-hero-lead{max-width:none;}
}
.home-hero-title{font-family:var(--serif);font-size:1.9rem;line-height:1.4;margin:0 0 8px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.home-hero-sub{display:inline;font-size:.55em;color:var(--ink-soft);-webkit-text-fill-color:var(--ink-soft);font-weight:600;margin-left:.6em;}
.home-hero-lead{max-width:640px;color:var(--ink-soft);font-size:.9rem;line-height:1.8;margin:0;}
.disclaim-foot{margin-top:56px;border-top:1px solid var(--line);padding-top:16px;font-size:.74rem;color:var(--ink-soft);}

.site-footer{margin-top:56px;border-top:1px solid var(--line);}
.site-footer-cols{display:flex;gap:40px;flex-wrap:wrap;padding:24px 0 20px;}
.site-footer-col{flex:1;min-width:160px;}
.site-footer-col h3{font-size:.78rem;font-weight:700;color:var(--ink);margin:0 0 10px;}
.site-footer-col a{display:block;font-size:.8rem;color:var(--ink-soft);text-decoration:none;margin-bottom:6px;}
.site-footer-col a:hover{color:var(--accent);}
.site-footer-bottom{border-top:1px solid var(--line);padding:16px 0 4px;font-size:.74rem;color:var(--ink-soft);}
@media (max-width:560px){
  .site-footer-cols{flex-direction:column;gap:18px;}
}

/* Open Hearings風 ホームレイアウト */
.app.with-feed{grid-template-columns:210px minmax(0,1fr);}
.center-col{min-width:0;display:flex;flex-direction:column;}
@media (max-width:860px){.app.with-feed{grid-template-columns:1fr;}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 30px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.topbar-copy{min-width:0;}
.topbar .home-hero-title{font-size:1.5rem;margin:0 0 4px;}
.topbar .home-hero-sub{font-size:.85rem;margin:0;}
.topbar .search{flex:0 0 auto;width:260px;max-width:100%;background:var(--paper-shade);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);font-size:.85rem;font-family:var(--sans);}
.topbar .search::placeholder{color:var(--ink-soft);}
.topbar .search:focus{outline:2px solid var(--accent);background:#fff;}
.view-toggle{display:flex;gap:6px;flex-shrink:0;}
.view-toggle-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:.78rem;font-weight:600;font-family:inherit;line-height:1;border:none;border-radius:9px;text-decoration:none;color:var(--ink-soft);background:var(--paper-shade);cursor:pointer;}
.view-toggle-btn.active{color:#fff;background:var(--grad);}
.view-toggle-icon{font-size:1.05rem;}
/* モバイルはリスト/グリッドの見た目がほぼ同一のため切り替え自体を隠す */
@media (max-width:720px){.view-toggle{display:none;}}

.yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;min-width:0;}
.yt-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s;}
.yt-card:hover{box-shadow:0 10px 30px -14px rgba(91,76,240,.28);transform:translateY(-2px);}
.yt-thumb{aspect-ratio:16/9;background:var(--paper-shade);overflow:hidden;}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.yt-info{padding:10px 12px 14px;}
.yt-date{font-size:.7rem;color:var(--accent);letter-spacing:.05em;margin-bottom:4px;font-weight:600;}
.yt-title{font-size:.85rem;line-height:1.5;font-weight:600;}
.feed-main{padding:6px 30px 60px;max-width:none;}
.feed-card{display:flex;flex-direction:column;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:stretch;}
.feed-card:hover .feed-title{color:var(--accent);}
.feed-thumb{width:100%;flex-shrink:0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--paper-shade);}
.feed-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.feed-body{min-width:0;padding-top:2px;display:flex;flex-direction:column;}
.feed-title{order:1;font-family:var(--serif);font-size:1rem;font-weight:700;line-height:1.4;margin:0 0 3px;}
.feed-meta{order:2;display:flex;align-items:baseline;gap:8px;margin-bottom:3px;flex-wrap:wrap;}
.feed-date{font-size:.88rem;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;}
.feed-committee{font-size:.7rem;color:var(--ink-soft);letter-spacing:.02em;}
.badge-complete{font-size:.66rem;color:#b5941f;letter-spacing:.03em;font-weight:700;border:1px solid #b5941f;border-radius:999px;padding:1px 7px;}
.gold-note{color:#b5941f;font-weight:700;}
.badge-interim{font-size:.66rem;color:#c23b3b;letter-spacing:.03em;font-weight:700;border:1px solid #c23b3b;border-radius:999px;padding:1px 7px;}
.red-note{color:#c23b3b;font-weight:700;}
.feed-excerpt-wrap{order:3;}
.feed-excerpt{order:3;font-size:.82rem;color:var(--ink-soft);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.feed-readmore{display:block;text-align:right;font-size:.76rem;color:var(--accent);font-weight:600;margin-top:4px;}
@media (min-width:560px){
  .feed-card{flex-direction:row;align-items:center;gap:16px;}
  /* px固定だと狭い画面で文章側が潰れるため、％可変＋上限で両立させる */
  .feed-thumb{width:min(42%,324px);}
}
@media (min-width:900px){
  .feed-main{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-content:start;}
  .feed-card{grid-column:span 1;}
  .feed-thumb{width:min(45%,270px);}
  .feed-excerpt{-webkit-line-clamp:3;}
  .more-link{grid-column:1/-1;}
  .disclaim-foot{grid-column:1/-1;}
  .site-footer{grid-column:1/-1;}
  .promo-row{grid-column:1/-1;}
}
.more-link{display:block;text-align:center;padding:22px 0;font-size:.85rem;font-weight:600;}

.brand-banner{display:flex;flex-direction:column;gap:10px;margin-top:24px;padding:16px 16px 18px;background:var(--panel);border-radius:16px;text-decoration:none;}
.brand-banner-mark{width:40px;height:40px;border-radius:10px;object-fit:cover;}
.brand-banner-text{font-size:.78rem;color:#c7c9e8;line-height:1.7;}
.brand-banner-text strong{color:#fff;}
.brand-banner-cta{font-size:.74rem;color:var(--accent-2);font-weight:700;}

.promo-row{display:flex;gap:20px;margin-top:32px;align-items:stretch;}
.promo-row .widget{flex:1;background:var(--paper-shade);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;}
.promo-row .widget h2{font-size:.85rem;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:6px;}
.promo-row .widget .empty{font-size:.8rem;color:var(--ink-soft);margin:0;}
.promo-row .cf-banner{flex:1;max-width:none;margin:0;}
@media (max-width:560px){.promo-row{flex-direction:column;}}

.cf-banner{display:block;text-decoration:none;border-radius:14px;overflow:hidden;position:relative;color:#fff;max-width:220px;margin:0 auto;}
.cf-banner:hover{filter:brightness(1.06);}
.cf-banner .cf-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.cf-banner .cf-overlay{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(0deg,rgba(10,8,30,.92),rgba(10,8,30,.1));}
.cf-banner .cf-tag{font-size:.56rem;letter-spacing:.06em;color:#d8d3ff;font-weight:700;margin-bottom:2px;}
.cf-banner .cf-headline{font-family:var(--serif);font-size:.7rem;font-weight:800;line-height:1.4;margin-bottom:6px;}
.cf-banner .cf-cta{display:inline-block;background:#fff;color:var(--ink);font-size:.62rem;font-weight:700;padding:5px 10px;border-radius:999px;}

/* ============================================================
   2026-07-12 デザインリニューアル「ピンク紫×額装×LINE Seed」
   高崎承認済み確定仕様(試作variant_g2)。既存ルールの後段上書き。
   ============================================================ */

:root {
  --accent: #c026d3;
  --accent-2: #ec4899;
  --accent-pale: #fdf0fb;
  --grad: linear-gradient(120deg, #c026d3, #ec4899, #22d3ee);
}

/* 全体フォント: LINE Seed JP(タイトル含め統一) */
body, body * { font-family: "LINE Seed JP", "Hiragino Sans", "Noto Sans JP", sans-serif; }

/* 背景: ドットグリッド(固定・クリック透過) */
body { background: #fbfbfd; }
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(192,38,211,.13) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
body > * { position: relative; z-index: 1; }

/* サイドバー: ごく薄ピンク */
.nav { background: #fdf5fc; }

/* ヒーロータイトル: グラデ文字をやめ黒の強タイポ */
.home-hero-title {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* 4 Japanバナー: 濃紺→深紫グラデ */
.brand-banner { background: linear-gradient(135deg, #4a044e, #86198f 60%, #9d174d); }
.brand-banner-text { color: #f5d0fe; }
.brand-banner-cta { color: #f9a8d4; }

/* フォーマル|カジュアル切替(モック) */
.mode-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; flex: none;
  background: #fff; border: 1px solid #e6e7f0; border-radius: 999px;
  padding: 4px; margin-right: 12px; vertical-align: middle;
}
.mode-toggle .mode-on {
  background: linear-gradient(120deg, #c026d3, #ec4899);
  color: #fff; font-weight: 700; font-size: .82rem;
  padding: 6px 16px; border-radius: 999px;
}
.mode-toggle a.mode-off {
  color: #a21caf; font-size: .82rem; text-decoration: underline;
  padding: 6px 14px;
}

/* ---- リスト表示カード ---- */
.feed-card {
  position: relative;
  border: 1px solid #e6e7f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  overflow: visible;
  transition: border-color .25s ease, transform .3s ease, box-shadow .3s ease;
}
.feed-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(236,72,153,.4);
}
.feed-card:hover .feed-title { color: var(--accent); }

/* メタ: 等幅数字の日付＋チップ */
.feed-date {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: #6b6e8a;
}
.feed-committee {
  font-size: 11px;
  letter-spacing: .05em;
  color: #a21caf;
  background: #fdf0fb;
  border-radius: 999px;
  padding: 2px 10px;
}
.badge-complete {
  font-size: 11px;
  letter-spacing: .05em;
  color: #a16207;
  background: #fdf6e3;
  border-radius: 999px;
  padding: 2px 10px;
}

/* 文字サイズ拡大 */
.feed-title { font-weight: 700; font-size: 1.22rem; line-height: 1.45; letter-spacing: -0.02em; }
.feed-excerpt { font-size: .98rem; line-height: 1.85; }
.feed-readmore { font-size: .88rem; transition: letter-spacing .2s ease; }
.feed-card:hover .feed-readmore { letter-spacing: .06em; }

/* サムネ額装(グラデ枠・スクリムなし) */
.feed-thumb {
  position: relative; overflow: hidden;
  padding: 3px;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(192,38,211,.45);
}
.feed-thumb img {
  filter: saturate(.9) contrast(1.03);
  border-radius: 11px;
  transition: filter .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.feed-card:hover .feed-thumb img { filter: none; transform: scale(1.05); }
.feed-card:hover .feed-thumb { box-shadow: 0 10px 28px -10px rgba(192,38,211,.65); }

/* 虫眼鏡バッジ: カード左上角・白フチ */
.feed-card::before, .yt-card::before {
  content: "";
  position: absolute;
  top: -12px; left: -12px;
  width: 48px; height: 48px;
  z-index: 5;
  border-radius: 50%;
  border: 3px solid #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15.2 15.2l4.8 4.8'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
    linear-gradient(120deg, rgba(192,38,211,.95), rgba(236,72,153,.95));
  box-shadow: 0 6px 18px -6px rgba(192,38,211,.65);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.feed-card:hover::before, .yt-card:hover::before { opacity: 1; transform: scale(1); }

/* ---- グリッド表示カード ---- */
.yt-card {
  position: relative;
  border: 1px solid #e6e7f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  padding: 10px;
  overflow: visible;
  transition: border-color .25s ease, transform .3s ease, box-shadow .3s ease;
}
.yt-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(236,72,153,.4);
}
.yt-thumb {
  position: relative; overflow: hidden;
  padding: 3px;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(192,38,211,.45);
}
.yt-thumb img {
  filter: saturate(.9) contrast(1.03);
  border-radius: 11px;
  transition: filter .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.yt-card:hover .yt-thumb img { filter: none; transform: scale(1.05); }
.yt-card:hover .yt-thumb { box-shadow: 0 10px 28px -10px rgba(192,38,211,.65); }
.yt-title { font-weight: 700; font-size: 1.02rem; line-height: 1.5; }
.yt-card:hover .yt-title { color: var(--accent); }
.yt-date { font-variant-numeric: tabular-nums; letter-spacing: .06em; color: #a21caf; }

/* ---- モバイル ---- */
@media (max-width: 720px) {
  .home-hero-title { font-size: 1.5rem; }
  .feed-title { font-size: 1.08rem; }
  .feed-excerpt { font-size: .92rem; }
  .mode-toggle { margin: 0 0 10px; }
  .feed-card::before, .yt-card::before { top: -8px; left: -8px; width: 40px; height: 40px; }
}

/* Safariはaspect-ratio親+height:100%で画像がパディングにはみ出し、額装の下辺を
   覆うため、高さは画像自身のaspect-ratioで決める(全ブラウザで枠3pxを保証) */
.feed-thumb, .yt-thumb { aspect-ratio: auto; }
.feed-thumb img, .yt-thumb img { height: auto; aspect-ratio: 16/9; }

/* タッチデバイスはタップで:hoverが固着し「ホバー後の絵」のままになるため、
   ホバー演出(ズーム・虫眼鏡バッジ)を無効化する */
@media (hover: none) {
  .feed-card:hover .feed-thumb img, .yt-card:hover .yt-thumb img {
    transform: none; filter: saturate(.9) contrast(1.03);
  }
  .feed-card:hover::before, .yt-card:hover::before { opacity: 0; }
  .feed-card:hover, .yt-card:hover { transform: none; }
}

/* ---- ホームのヒーロー: サブコピーは改行、リード文もコピー側に ---- */
.topbar .home-hero-sub { display: block; margin: 8px 0 0; }
.topbar .home-hero-lead { margin-top: 12px; }
/* 区切り線下の操作列: フォーマル/カジュアル・検索・リスト/グリッドを1行に */
.home-hero { align-items: center; flex-wrap: wrap; }
.home-hero .search {
  flex: 1 1 220px; max-width: 420px;
  background: var(--paper-shade); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px;
  color: var(--ink); font-size: .85rem; font-family: var(--sans);
}
.home-hero .search::placeholder { color: var(--ink-soft); }
.home-hero .search:focus { outline: 2px solid var(--accent); background: #fff; }
.home-hero .mode-toggle { margin: 0; }
/* モバイルは縦積みになるため、flex-basisが高さに化けないよう固定 */
@media (max-width:640px){
  .home-hero .search { flex: none; width: 100%; max-width: none; }
}

/* ---- ホームのヒーロー画像(画像が左・コピーが右) ---- */
.hero-visual {
  flex: 0 1 46%;
  min-width: 260px;
  padding: 3px;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 8px 22px -14px rgba(192,38,211,.45);
}
.hero-visual img {
  display: block; width: 100%; height: auto; border-radius: 11px;
}
.topbar .topbar-copy { flex: 1 1 300px; }
@media (max-width: 720px) {
  .hero-visual { flex-basis: 100%; min-width: 0; }
}

/* 記事ページの動画埋め込みにも額装(トップのサムネと統一) */
.videobox {
  /* 各記事のインラインstyle(.videobox{background:#000})に勝つため!important */
  padding: 3px !important;
  background: var(--grad) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px -14px rgba(192,38,211,.45);
  overflow: hidden;
}
.videobox iframe, .videobox lite-youtube, .videobox img { border-radius: 11px; display: block; }

/* 記事ページ: 速報版注記をブランド色に(各ページのインラインredに勝つ) */
.red-note { color: #a21caf !important; font-weight: 700; }

/* 記事ページ: シェア・リンクコピー(topbar右上) */
.topbar { position: relative; }
.share-tools { position: absolute; top: 16px; right: 0; display: flex; gap: 8px; z-index: 10; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #e6e7f0; border-radius: 999px;
  padding: 8px 14px; font-size: .8rem; color: #a21caf; font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.share-btn:hover { border-color: #c026d3; box-shadow: 0 6px 16px -8px rgba(192,38,211,.5); }
@media (max-width: 720px) {
  .share-tools { position: static; margin: 0 0 10px; }
  .share-btn span { display: none; } /* モバイルはアイコンのみ */
  .share-btn { padding: 8px 10px; }
}


/* 間違い指摘パイプライン: 確認中の状態表示注記(claims_notify.pyが自動追記) */
.claim-notice { color: #a21caf; font-size: .82rem; font-weight: 600; margin: 4px 0 0; }