/* =========================================
   components.css
   - Cards / Sidebar widgets / Small cards
   Porsche-inspired minimal design
========================================= */

/* -----------------------------------------
   1. Cards（共通）
----------------------------------------- */

.card {
  background-color: var(--jp-color-surface, #ffffff);
  border-radius: var(--jp-radius-md, 0.75rem);
  border: 1px solid var(--jp-color-border-subtle, #e5e7eb);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--jp-shadow-card, 0 8px 24px rgba(15,23,42,0.04));
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out;
}

/* カード全体クリック領域 */
.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

/* サムネイル周り：エッジを効かせつつ、ホバージューム用に隠す */
.card-thumb {
  overflow: hidden;
  position: relative;
}

/* News Card thumbnail: 800x500 → 16/10 */
.card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transform: scale(1);
  transition:
    transform 0.22s ease-out,
    filter 0.22s ease-out;
}

/* 本文部分 */
.card-body {
  padding: 0.8rem 0.95rem 0.95rem;
}

/* 上部メタ情報：日付やセクションなど */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--jp-color-text-sub, #6b7280);
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* セクションやラベル用の小さなピルを想定（任意で活用） */
.card-meta-pill {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(248,250,252,0.85);
}

/* タイトル */
.card-title {
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
  line-height: 1.4;
}

/* 抜粋 */
.card-excerpt {
  font-size: 0.86rem;
  color: #4b5563;
  line-height: 1.7;
}

/* Hover – 「派手すぎない」高級車の動き */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--jp-shadow-soft, 0 12px 40px rgba(15,23,42,0.06));
  border-color: rgba(148,163,184,0.7);
  background-color: #ffffff;
}

.card:hover .card-thumb img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

/* -----------------------------------------
   2. Sidebar Widgets
----------------------------------------- */

/* 汎用サイドバー用ラッパー（任意で使う） */
.sidebar-widget {
  background: var(--jp-color-surface, #ffffff);
  border-radius: var(--jp-radius-md, 0.75rem);
  padding: 1rem 1.1rem;
  box-shadow: var(--jp-shadow-soft, 0 10px 30px rgba(15,23,42,0.03));
  margin-bottom: 1.25rem;
  border: 1px solid var(--jp-color-border-subtle, #e5e7eb);
}

/* single.css の .single-main-right .widget と共存可能 */
.sidebar-widget-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jp-color-text-main);
}

/* -----------------------------------------
   3. Sidebar Small Card (最新記事4件)
   hero-static.php と構造を統一
----------------------------------------- */

.small-card {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(226,232,240,0.8);
}

.small-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* サムネイル：やや横長で、角はシャープめ */
.small-card-thumb img {
  width: 90px;
  aspect-ratio: 3 / 2;   /* 300x200 を小型化 */
  object-fit: cover;
  border-radius: var(--jp-radius-sm, 0.45rem);
}

/* テキスト・メタ */
.small-card-info {
  flex: 1 1 auto;
  min-width: 0;
}

.small-card-info time {
  display: block;
  font-size: 0.72rem;
  color: var(--jp-color-text-muted, #6b7280);
  margin-bottom: 0.18rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.small-card-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

/* 小カードのリンクホバー */
.small-card a {
  display: flex;
  gap: 0.7rem;
  color: inherit;
}

.small-card a:hover .small-card-title {
  text-decoration: underline;
}

/* -----------------------------------------
   4. Buttons – understated performance
----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 1.2rem;
  border-radius: 999px; /* フルピルで精密感 */
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.16s ease-out,
    border-color 0.18s ease-out;
}


/* メインアクションボタン */
.btn-primary {
  background-color: var(--jp-color-primary, #1d4ed8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(15,23,42,0.18);
}

.btn-primary:hover {
  background-color: var(--jp-color-primary-hover, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(15,23,42,0.24);
}

/* キーボードフォーカス（控えめなリング） */
.btn:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 3px rgba(59,130,246,0.6);
}

.btn--nav{
  padding: 0.42rem 1.05rem;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* サブアクション（アウトライン） */
.btn-outline{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  box-shadow: none;
}

.btn-outline:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.75);
  transform: translateY(-1px);
}

/* 目立たせない補助（ゴースト） */
.btn-ghost{
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.86);
  border-color: rgba(15,23,42,0.08);
  box-shadow: none;
}
.btn-ghost:hover{
  background: rgba(15,23,42,0.07);
  border-color: rgba(15,23,42,0.12);
  transform: translateY(-1px);
}

/* ログアウト/退会などの破壊的操作 */
.btn-danger{
  background: #111827; /* 黒寄りで品よく強い */
  color:#fff;
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(17,24,39,0.18);
}
.btn-danger:hover{
  background: #0b1220;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(17,24,39,0.24);
}

/* テキストリンク風（必要なら） */
.btn-link{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--jp-color-primary, #1d4ed8);
}
.btn-link:hover{
  text-decoration: underline;
  transform: none;
}

/* -----------------------------------------
   CSSで「ナビが .btn を壊す」のを止める
----------------------------------------- */

/* アイコンの見た目 */
.menu-item--auth .auth-ic{
  font-size: 0.95em;
  opacity: 0.9;
  line-height: 1;
}

/* ナビのリンク装飾がボタンを“リンク化”しないように */
.site-header a.btn,
.global-nav a.btn,
.header-drawer-nav a.btn{
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================
   Header auth buttons – visual only (components.css)
   ・layout.cssの配置には触れない（見た目のみ）
========================================= */

/* 共通：ヘッダー上のボタンを同一トーンに揃える */
.site-header .header-auth .btn{
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;

  /* “枠線でボタン感”ではなく“面の縁”で品よく見せる */
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;

  /* ダークヘッダー上での読みやすさ */
  color: rgba(255,255,255,0.94);

  /* 触感（サイズはデザイン扱いとしてOK） */
  padding: 0.42rem 1.05rem;

  /* 文字の見栄え */
  font-feature-settings: "palt";
  -webkit-tap-highlight-color: transparent;

  transition:
    background 0.18s ease-out,
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.16s ease-out,
    border-color 0.18s ease-out;
}

/* ========== Login (Primary) : 発光を“少し落ち着かせて高級感” ========== */
.site-header .header-auth .btn-primary{
  /* ほんのり青い縁：やりすぎない */
  border-color: rgba(147,197,253,0.22);

  /* 透明感のある深いブルー（派手すぎない） */
  background: linear-gradient(
    180deg,
    rgba(96,165,250,0.90) 0%,
    rgba(37,99,235,0.92) 55%,
    rgba(29,78,216,0.95) 100%
  );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.site-header .header-auth .btn-primary:hover{
  border-color: rgba(191,219,254,0.30);
  background: linear-gradient(
    180deg,
    rgba(147,197,253,0.94) 0%,
    rgba(59,130,246,0.94) 55%,
    rgba(30,64,175,0.98) 100%
  );
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.site-header .header-auth .btn-primary:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* ========== Logout (Outline classを“ガラス面のセカンダリ”として使う) ========== */
/* 枠線で主張せず、面＋内側ハイライトで境界を作る。ログインと同じ世界観に。 */
.site-header .header-auth .btn-outline{
  /* class名は outline でも見た目は“secondary filled”にする */
  border-color: rgba(255,255,255,0.12);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(147,197,253,0.07) 55%,
    rgba(255,255,255,0.06) 100%
  );

  box-shadow:
    0 10px 22px rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.14);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header .header-auth .btn-outline:hover{
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.14) 0%,
    rgba(191,219,254,0.10) 55%,
    rgba(255,255,255,0.08) 100%
  );
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.site-header .header-auth .btn-outline:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Focus: ダーク背景で確実に見える（両ボタン共通） */
.site-header .header-auth .btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px rgba(2,6,23,0.78),
    0 0 0 4px rgba(147,197,253,0.88),
    0 10px 22px rgba(0,0,0,0.18);
}

/* アイコン運用しない方針なら：あっても崩れないが非表示 */
.site-header .header-auth .auth-ic{ display:none; }


/* -----------------------------------------
   5. Badges – subtle information chips
----------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* カテゴリ用：淡いグレー × ブルーラインで上品に */
.badge-category {
  background-color: var(--jp-color-surface-soft, #f9fafb);
  color: var(--jp-color-primary, #2563eb);
  border-color: rgba(37,99,235,0.28);
}

/* 「New」などの強調バッジ：少しだけアグレッシブに */
.badge-new {
  background-color: #fef2f2;
  color: #b91c1c;
  border-color: rgba(248,113,113,0.6);
}

/* -----------------------------------------
   6. News List (カードとは別系統)
   – フロントのニュース一覧用
----------------------------------------- */

/* NEWS 一覧のグリッド */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* NEWS 単体コンポーネント本体 */
.news-item {
  background-color: var(--jp-color-surface, #ffffff);
  border-radius: var(--jp-radius-md, 0.75rem);
  border: 1px solid var(--jp-color-border-subtle, #e5e7eb);
  box-shadow: var(--jp-shadow-card, 0 8px 24px rgba(15,23,42,0.04));
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out;
}

/* クリック範囲全体 */
.news-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* 共通サムネイルコンテナ */
.thumb {
  overflow: hidden;
  position: relative;
}

/* 共通サムネイル画像（四角） */
.thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transform: scale(1);
  transition:
    transform 0.22s ease-out,
    filter 0.22s ease-out;
}

/* NEWS 専用のサムネイル比率など */
.thumb--news img {
  aspect-ratio: 16 / 10;
}

/* テキスト部分 */
.news-body {
  padding: 0.78rem 0.95rem 0.95rem;
}

/* 日付やセクションなどのメタ情報 */
.news-meta {
  font-size: 0.78rem;
  color: var(--jp-color-text-sub, #6b7280);
  margin-bottom: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  letter-spacing: 0.04em;
}

/* メタ内に小さなピルを置きたい場合の補助クラス（任意） */
.news-meta-pill {
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(248,250,252,0.85);
}

/* タイトル */
.news-title {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
  line-height: 1.45;
}

/* 抜粋 */
.news-excerpt {
  font-size: 0.86rem;
  color: #4b5563;
  line-height: 1.7;
}

/* Hover – ボディがわずかに浮き、画像が少しだけズーム */
.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--jp-shadow-soft, 0 12px 40px rgba(15,23,42,0.06));
  border-color: rgba(148,163,184,0.7);
  background-color: #ffffff;
}

.news-item:hover .thumb img {
  transform: scale(1.03);
  filter: brightness(1.03);
}

/* タイトルの色は少しだけ強調（過度な色変化はしない） */
.news-link:hover .news-title {
  color: var(--jp-color-primary, #1d4ed8);
}

/* -----------------------------------------
   7. 人気記事ランキング（widget-ranking）
------------------------------------------ */

/* カード本体：共通 */
.widget.widget-ranking {
  /* 周囲とのギャップ */
  margin-top: 1rem;
  margin-bottom: 1.6rem;

  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: 0 10px 24px rgba(15,23,42,0.06);
  background: radial-gradient(circle at top left, #f9fafb 0, #ffffff 55%);
  padding: 1rem 1rem 0.95rem;
}

/* サイドバー系レイアウトで念のため上マージンを保証 */
.front-main-right .widget.widget-ranking,
.archive-main-right .widget.widget-ranking,
.single-main-right .widget.widget-ranking {
  margin-top: 1rem;
}

/* 見出し */
.widget-ranking .widget-title {
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  margin: 0 0 0.55rem;
}

/* -----------------------------------------
   期間タブ（24h / 7d / 30d）
------------------------------------------ */

.widget-ranking .ranking-switch {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.12rem;
  border-radius: 999px;
  background: rgba(148,163,184,0.08);
  gap: 0.12rem;
  margin-bottom: 0.55rem;
}

.widget-ranking .ranking-pill {
  border: none;
  background: transparent;
  padding: 0.16rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--jp-color-text-sub, #6b7280);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.widget-ranking .ranking-pill:hover {
  background: rgba(255,255,255,0.96);
  color: var(--jp-color-primary, #2563eb);
  box-shadow: 0 0 0 1px rgba(148,163,184,0.45);
}

.widget-ranking .ranking-pill.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.75);
  transform: translateY(-1px);
}

/* -----------------------------------------
   パネル＆ローディング状態
------------------------------------------ */

.widget-ranking .ranking-panel {
  margin-top: 0.1rem;
  transition: opacity 0.18s ease-out;
}

.widget-ranking .ranking-panel.is-loading {
  opacity: 0.65;  /* ローディング時は中身を少し淡く */
}

/* 読み込み中（スピナー＋テキスト） */
.widget-ranking .ranking-loading {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--jp-color-text-sub, #6b7280);
  margin-bottom: 0.3rem;
}

.widget-ranking .ranking-panel.is-loading .ranking-loading {
  display: inline-flex;
}

/* スピナー */
.widget-ranking .ranking-spinner {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(148,163,184,0.6);
  border-top-color: var(--jp-color-primary, #2563eb);
  animation: jp-ranking-spin 0.8s linear infinite;
}

@keyframes jp-ranking-spin {
  to { transform: rotate(360deg); }
}

/* エラー・空のとき */
.widget-ranking .ranking-error,
.widget-ranking .ranking-empty {
  font-size: 0.8rem;
  color: var(--jp-color-text-sub, #6b7280);
  list-style: none;
  padding: 0.3rem 0;
}

/* -----------------------------------------
   ランキングリスト
------------------------------------------ */

.widget-ranking .ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各アイテム行 */
.widget-ranking .ranking-list li {
  padding: 0.48rem 0.18rem;
  border-radius: 0.55rem;
  margin-bottom: 0.08rem;
  transition:
    background-color 0.16s ease-out,
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out;
}

.widget-ranking .ranking-list li:last-child {
  margin-bottom: 0;
}

/* クリック範囲 */
.widget-ranking .ranking-list li > a {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

/* ホバー時のカード感 */
.widget-ranking .ranking-list li:hover {
  background-color: rgba(248,250,252,0.98);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,0.04);
}

/* -----------------------------------------
   順位バッジ
------------------------------------------ */

.widget-ranking .ranking-order {
  flex: 0 0 1.7rem;
  max-width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  background: #e5edff;
  color: var(--jp-color-primary, #2563eb);
}

/* 1〜3位にグラデーションで差をつける */
.widget-ranking .ranking-list li:nth-child(1) .ranking-order {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #ffffff;
}

.widget-ranking .ranking-list li:nth-child(2) .ranking-order {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  color: #ffffff;
}

.widget-ranking .ranking-list li:nth-child(3) .ranking-order {
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #111827;
}

/* -----------------------------------------
   タイトル／メタ情報
------------------------------------------ */

.widget-ranking .widget-body {
  flex: 1 1 auto;
  min-width: 0;
}

.widget-ranking .widget-body .widget-post-title {
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0 0 0.08rem;
  font-weight: 500;

  /* 2行でトリミング */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.widget-ranking .widget-body .widget-post-meta {
  font-size: 0.76rem;
  color: var(--jp-color-text-muted, #6b7280);
  margin: 0;
}

/* -----------------------------------------
   レスポンシブ（モバイルで細身の縦長カードに）
------------------------------------------ */

@media (max-width: 1023px) {

  /* カードの横幅を絞ってセンター寄せ */
  .widget.widget-ranking {
    width: min(360px, 90vw);  /* 最大360px、画面に対して少し余白 */
    margin-left: auto;
    margin-right: auto;
  }

  /* タブは中央寄せ気味に */
  .widget-ranking .ranking-switch {
    justify-content: center;
  }
}

/* -----------------------------------------
   ログイン関連
------------------------------------------ */


.login-required-message {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: #f8fafc;
  border-left: 4px solid #2563eb;
  font-size: 0.95rem;
}

.login-required-message a {
  font-weight: 600;
  text-decoration: underline;
}


.login-required-message {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: #f8fafc;
  border-left: 4px solid #2563eb;
  font-size: 0.95rem;
}
.login-required-message a {
  font-weight: 600;
  text-decoration: underline;
}



/* -----------------------------------------
   ログインモーダル関連
------------------------------------------ */

/* ========== Auth Modal (JPN) ========== */

:root{
  --auth-bg: #fff;
  --auth-text: #0f172a;
  --auth-muted: #64748b;
  --auth-border: rgba(15, 23, 42, .12);
  --auth-shadow: 0 24px 80px rgba(2, 6, 23, .22);
  --auth-radius: 16px;

  --auth-primary: #0ea5e9;          /* メインボタン */
  --auth-primary-hover: #0284c7;
  --auth-danger: #dc2626;

  --auth-focus: 0 0 0 4px rgba(14,165,233,.22);
}

/* 背景（背面クリックで閉じる） */
.jpn-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(6px);
  z-index: 9998;
  display: none;
}

/* 本体 */
.jpn-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(92vw, 420px);
  background: var(--auth-bg);
  color: var(--auth-text);
  border-radius: var(--auth-radius);
  box-shadow: var(--auth-shadow);
  border: 1px solid var(--auth-border);
  z-index: 9999;
  display: none;
  overflow: hidden;
}

/* 表示アニメーション（控えめ） */
@media (prefers-reduced-motion: no-preference){
  .jpn-modal{
    opacity: 0;
    transform: translate(-50%, -46%) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
  }
  .jpn-modal.is-open{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ヘッダー */
.jpn-modal__hd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--auth-border);
  background: linear-gradient(to bottom, rgba(2,6,23,.03), rgba(2,6,23,0));
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}

.jpn-modal__close{
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--auth-muted);
  font-size: 22px;
  line-height: 1;
}
.jpn-modal__close:hover{
  background: rgba(15,23,42,.06);
  color: var(--auth-text);
}

/* 本文 */
.jpn-modal__bd{
  padding: 16px 18px 18px;
}

/* メッセージ（エラー/案内） */
.jpn-auth-msg{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,.18);
  background: rgba(220,38,38,.06);
  color: #991b1b;
  font-size: 13px;
  line-height: 1.5;
}

/* 入力行 */
.jpn-auth-row{
  margin: 12px 0;
}
.jpn-auth-row label{
  display: block;
  font-size: 12.5px;
  color: var(--auth-muted);
  margin: 0 0 6px;
}
.jpn-auth-row input[type="text"],
.jpn-auth-row input[type="password"]{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--auth-border);
  background: #fff;
  color: var(--auth-text);
  font-size: 15px;
  outline: none;
}
.jpn-auth-row input[type="text"]:focus,
.jpn-auth-row input[type="password"]:focus{
  border-color: rgba(14,165,233,.65);
  box-shadow: var(--auth-focus);
}

/* チェックボックス */
.jpn-auth-row input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 8px;
}
.jpn-auth-row label:has(input[type="checkbox"]){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--auth-text);
}

/* 操作エリア */
.jpn-auth-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* ボタン */
.jpn-auth-actions button[type="submit"]{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(2, 132, 199, .25);
  background: var(--auth-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.jpn-auth-actions button[type="submit"]:hover{
  background: var(--auth-primary-hover);
}
.jpn-auth-actions button[type="submit"]:focus{
  box-shadow: var(--auth-focus);
}

/* 登録リンク（ボタン風） */
.jpn-auth-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--auth-border);
  color: var(--auth-text);
  text-decoration: none;
  font-weight: 700;
  background: rgba(15,23,42,.03);
}
.jpn-auth-actions a:hover{
  background: rgba(15,23,42,.06);
}

/* 画面が低い時：ちょい上に寄せる */
@media (max-height: 640px){
  .jpn-modal{ top: 46%; }
}

/* モーダルを開いている間はbodyスクロール抑制（JSでclass付ける） */
body.jpn-modal-open{
  overflow: hidden;
}


/* -----------------------------------------
   ログインボタン関連
------------------------------------------ */


/* ヘッダーのログイン/ログアウトをボタン化 */
.header-login,
.menu-item a[data-open-login="1"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;               /* ヘッダーが濃色前提 */
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
}

.header-login:hover,
.menu-item a[data-open-login="1"]:hover{
  background: rgba(255,255,255,.14);
}

.header-login:focus,
.menu-item a[data-open-login="1"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(14,165,233,.22);
}

/* --------------------------
   パスワードを忘れた場合のリンク
--------------------------- */

/* パスワードを忘れた場合のリンク */
.jpn-auth-forgot{
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
}

.jpn-auth-forgot a{
  color: var(--auth-muted);
  text-decoration: underline;
}

.jpn-auth-forgot a:hover{
  color: var(--auth-primary);
}

/* --------------------------
   登録ページ
--------------------------- */

.register-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.register-page .page-header {
  margin-bottom: 18px;
}

.register-page .page-title {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: .02em;
}

.register-form{
  margin-top: 18px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}

.register-form p{
  margin: 0 0 14px;
}

.register-form label{
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  color: rgba(0,0,0,.78);
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form select{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

.register-form input:focus,
.register-form select:focus{
  outline: none;
  border-color: rgba(11,26,58,.55);
  box-shadow: 0 0 0 4px rgba(11,26,58,.14);
}

/* fieldset */
.register-form fieldset{
  margin: 18px 0 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(11,26,58,.03);
}

.register-form legend{
  padding: 0 6px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.78);
}

/* checkboxes: make them look like “chips” */
.register-form fieldset label{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 8px 10px 0 0;
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
  user-select: none;
}

.register-form fieldset input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

/* submit button */
.register-form button[type="submit"]{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #0b1a3a;
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.register-form button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 46px rgba(0,0,0,.22);
}
.register-form button[type="submit"]:active{
  transform: translateY(0);
  opacity: .92;
}


/* =========================================
   ARTICLE BOTTOM – PURPOSE NAV
   （カテゴリ＋タグの横断ナビ ／区切り）
========================================= */

.purpose-nav-block {
  border-top: 1px solid var(--jp-color-border-subtle, #e2e8f0);
  margin-top: 1.0rem;
  padding: 1.8rem 0 0;
}

.purpose-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
}

/* 各グループの箱：かなりミニマルに */
.purpose-group {
  padding: 0.1rem 0;
}

/* 見出し：小さなラベル風 */
.purpose-heading {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jp-color-text-muted, #64748b);
  margin: 0 0 0.25rem;
}

/* リスト全体を横並び／折り返し */
.purpose-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

/* 各項目：横一列に並べる */
.purpose-menu li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* ／ 区切り（2つ目以降の li の先頭に付ける） */
.purpose-menu li + li::before {
  content: "/";
  margin: 0 0.55rem;
  color: var(--jp-color-text-muted, #64748b);
  opacity: 0.7;
  font-size: 0.84rem;
}

/* リンク本体：シンプル＋下線アニメーション */
.purpose-menu a {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.88rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--jp-color-text-main, #0f172a);
  transition: color 0.16s ease-out;
}

/* 下線（ホバー時にスッと出る） */
.purpose-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08rem;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.0;
  transition: width 0.18s ease-out, opacity 0.18s ease-out;
}

.purpose-menu a:hover {
  color: var(--jp-color-primary, #2563eb);
}

.purpose-menu a:hover::after {
  width: 100%;
  opacity: 0.8;
}

/* フォーカス（キーボード操作時） */
.purpose-menu a:focus-visible {
  outline: 2px solid var(--jp-color-primary, #2563eb);
  outline-offset: 2px;
}

/* モバイル：1カラム＋少し余白狭め */
@media (max-width: 767px) {
  .purpose-nav-block {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
  }

  .purpose-nav-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .purpose-heading {
    margin-bottom: 0.18rem;
  }

  .purpose-menu li + li::before {
    margin: 0 0.45rem;
  }

  .purpose-menu a {
    font-size: 0.86rem;
  }
}

/* =========================================
  ranking ログイン必要なぼかし
========================================= */

.ranking-stack{
  display: grid;
  gap: 16px;
}

.ranking-card{
  position: relative;
  overflow: hidden;
}

.ranking-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.ranking-badge{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  white-space: nowrap;
}

/* ぼかす対象を body に限定（ヘッダーはシャープに残す） */
.ranking-card__body{
  position: relative;
}

/* 対象をランキングカード内に限定 */
.ranking-card__body .ranking-item {
  padding: 6px 0;
}

/* 横並び構造 */
.ranking-card__body .ranking-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* 順位表示 */
.ranking-card__body .ranking-order {
  flex: 0 0 22px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: #2563eb; /* 必要に応じて調整 */
}

/* 本文側 */
.ranking-card__body .ranking-body {
  flex: 1;
  min-width: 0; /* 2行省略に必須 */
}

/* タイトルを2行に制限 */
.ranking-card__body .ranking-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* メタ情報は非表示（構造は残す） */
.ranking-card__body .ranking-meta {
  display: none;
}

/* ロック時：body上に“ぼかし幕”を1枚だけ */
.widget-ranking.is-locked .ranking-card__body::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 2;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ロック時：中身は触れない */
.widget-ranking.is-locked .ranking-card__body *{
  pointer-events: none;
  user-select: none;
}

/* プレースホルダーの密度を上げる */
.widget-ranking.is-locked .ranking-list{
  margin: 0;
  padding: 8px 0;
}

.widget-ranking.is-locked .ranking-item--placeholder{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin: 0;
}

.widget-ranking.is-locked .ranking-item--placeholder .ranking-order{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
  color: transparent;
}

.widget-ranking.is-locked .ranking-item--placeholder .widget-body{
  display: grid;
  gap: 7px;
}

.widget-ranking.is-locked .ranking-item--placeholder .widget-post-title,
.widget-ranking.is-locked .ranking-item--placeholder .widget-post-meta{
  margin: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.08);
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
}

.widget-ranking.is-locked .ranking-item--placeholder .widget-post-title{
  height: 14px;
  width: 88%;
}

.widget-ranking.is-locked .ranking-item--placeholder .widget-post-meta{
  height: 12px;
  width: 62%;
}

/* ゲート（幕の上に出す）：ここだけはクリック可能に戻す */
.ranking-gate{
  position:absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(92%, 360px);
  padding: 14px 14px 12px;
  text-align:center;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 3;
  display:flex;
  flex-direction: column;
  gap: 10px;

  pointer-events: auto;
  user-select: auto;
}

.ranking-gate__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.ranking-gate a,
.ranking-gate button{
  pointer-events: auto;
}

/* =========================================
   My Page – Product-grade refinement
========================================= */

/* ページ全体 */
.mypage-page .page-content{
  display: grid;
  gap: 28px;
}

/* セクションカード */
.mypage-card{
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
}

/* セクション見出し */
.mypage-card h2{
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: none; /* ←ここがポイント */
}


/* メタ情報（ユーザー名・メール） */
.mypage-meta{
  font-size: 14px;
  color: #334155;
}
.mypage-meta strong{
  font-weight: 600;
  color: #0f172a;
}

/* アクション行 */
.mypage-actions{
  margin-top: 18px;
}

/* ===== フォーム共通 ===== */

.mypage-card form{
  max-width: none;
}

.mypage-card .form-block{
  max-width: 520px;
}

/* label */
.mypage-card label > span{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

/* input */
.mypage-card input[type="text"],
.mypage-card input[type="email"],
.mypage-card input[type="password"],
.mypage-card select{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.18);
  background: #fff;
  font-size: 15px;
  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    transform .12s ease;
}

.mypage-card input:focus,
.mypage-card select:focus{
  outline: none;
  border-color: rgba(37,99,235,.65);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}

/* パスワード条件テキスト */
.mypage-card small{
  font-size: 12px;
  color: #64748b;
}

/* 通知 */
.mypage-card .notice{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,.04);
  font-size: 13px;
}

.mypage-card .notice-error{
  background: rgba(220,38,38,.08);
  color: #991b1b;
  border: 1px solid rgba(220,38,38,.25);
}

/* ===== ACF調整 ===== */


.mypage-acf .acf-label label{
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
}

.mypage-acf .acf-input select{
  height: 44px;
  border-radius: 12px;
}

/* checkbox → チップ化 */

.mypage-acf .acf-checkbox-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mypage-acf .acf-checkbox-list li label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  cursor: pointer;
  transition:
    background .14s ease,
    border-color .14s ease,
    transform .12s ease;
}

.mypage-acf .acf-checkbox-list li label:hover{
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.45);
  transform: translateY(-1px);
}

.mypage-acf input[type="checkbox"]{
  accent-color: #2563eb;
}

/* ACF submit */
.mypage-acf + .acf-form-submit{
  margin-top: 16px;
}

.mypage-acf + .acf-form-submit .acf-button{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  background: #0b1a3a;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

/* モバイル */
@media (max-width: 767px){
  .mypage-card{
    padding: 18px 16px;
  }
}

/* =========================
   My Page Toast
========================= */
.jpn-toast{
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 12px 16px;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

.jpn-toast--success{
  background: rgba(15,23,42,.92);
}

.jpn-toast--error{
  background: rgba(127,29,29,.92);
}


/* =========================================
   二段階認証


========================================= */

.mypage-security-status {
  margin-top: 8px;
}

.status-enabled {
  color: #0a7a2f;
  font-weight: 600;
}

.status-disabled {
  color: #b00020;
  font-weight: 600;
}

.form-note {
  margin-top: 8px;
  font-size: 0.9em;
  color: #666;
}



.mypage-warning {
  margin-top: 20px;
  padding: 14px;
  background: #fff5f5;
  border: 1px solid #f1b0b7;
  border-radius: 6px;
  color: #842029;
  font-size: 0.95em;
  line-height: 1.6;
}



/* =========================================
   JPNMEDICAL Article CSS
   Namespace: .jm-
   Editorial Grade: World-Class
========================================= */

/* ---------- Base ---------- */

.jm-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1rem 3rem;
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
  line-height: 1.85;
  background: #ffffff;
}

/* 段落の基本設計（最重要） */
.jm-article p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* 段落最後の余白整理 */
.jm-article p:last-child {
  margin-bottom: 0;
}


/* ---------- Lead ---------- */

.jm-lead-block {
  margin-bottom: 0.8rem;
}

.jm-lead {
  font-size: 1.02rem;
  color: #334155;
}

/* ---------- Sections ---------- */

.jm-section {
  margin-top: 1.2rem;
}

/* 見出しは「主張しすぎない」 */
.jm-section-title {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: 0.7rem;
  letter-spacing: 0.04em;
  color: #020617;
}

/* セクション導入文 */
.jm-section-intro {
  font-size: 0.92rem;
  color: #475569;
  margin-bottom: 1rem;
}

.mypage-2fa-banner {
  margin-bottom: 20px;
  padding: 16px;
  background: #f1f8ff;
  border: 1px solid #cfe2ff;
  border-radius: 6px;
}

.mypage-2fa-banner strong {
  display: block;
  margin-bottom: 6px;
}

.mypage-2fa-banner .note {
  margin-top: 8px;
  font-size: 0.9em;
  color: #555;
}

.twofa-card{
  padding:24px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.twofa-head{ margin-bottom:14px; }
.twofa-title{ font-size:20px; margin:0 0 6px; }
.twofa-lead{ margin:0; color:rgba(0,0,0,.65); line-height:1.6; }

.twofa-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:20px;
  align-items:start;
  margin-top:18px;
}

.twofa-qr{
  width:220px;
  padding:10px;
  border-radius:14px;
  background:#f6f7f9;
  display:flex;
  justify-content:center;
  align-items:center;
}

.twofa-qr img{
  display:block;
  border-radius:10px;
}

.twofa-steps{
  margin:0;
  padding-left:18px;
  color:rgba(0,0,0,.75);
  line-height:1.8;
}

.twofa-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* OTP（6桁） */
.otp{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.otp-box{
  width:48px;
  height:56px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  text-align:center;
  font-size:22px;
  font-weight:600;
  outline:none;
}

.otp-box:focus{
  border-color: rgba(0,0,0,.45);
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

@media (max-width: 680px){
  .twofa-grid{ grid-template-columns: 1fr; }
  .twofa-qr{ width:100%; }
  .otp{ justify-content:space-between; }
  .otp-box{ width:14.5%; min-width:44px; }
}


/* =========================================
   JPNMEDICAL – Keypoints (Refined)
========================================= */

.jm-keypoints {
  position: relative;
  margin: 1.6rem 0 1.4rem;
  padding: 1.2rem 1.4rem 1.25rem;
  background:
    linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.04) 0%,
      rgba(37, 99, 235, 0.015) 100%
    );
  border-radius: 0.75rem;
}

/* 左側の静かなアクセントライン */
.jm-keypoints::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    #2563eb,
    rgba(37, 99, 235, 0.25)
  );
  border-radius: 2px;
}

/* 見出し */
.jm-keypoints .jm-section-title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e3a8a;
  margin-bottom: 0.6rem;
}

/* リスト */
.jm-keypoints-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各要点 */
.jm-keypoints-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: #0f172a;
}

/* 小さなドット（派手にしない） */
.jm-keypoints-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2563eb;
  opacity: 0.85;
}

/* 最後は余白を消す */
.jm-keypoints-list li:last-child {
  margin-bottom: 0;
}

.jm-content {
  margin-top: 1.4rem;
}
/* ---------- Details (Fact Panel) ---------- */

.jm-detail-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: rgba(15, 23, 42, 0.025);
  border-radius: 0.6rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* 各行を「項目行」に見せる */
.jm-detail-list li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  column-gap: 0.6rem;
  align-items: start;

  margin: 0;
  padding: 0.35rem 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #0f172a;
}

/* 行間で“文章感”を出さない */
.jm-detail-list li + li {
  border-top: 1px dotted rgba(15, 23, 42, 0.08);
}

/* ラベル（左側） */
.jm-detail-list strong {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

/* 値（右側）は少し落ち着かせる */
.jm-detail-list li span,
.jm-detail-list li {
  color: #020617;
}

/* 数値・件数が目立ちすぎないように */
.jm-detail-list li em {
  font-style: normal;
  font-weight: 500;
}

/* モバイル調整 */
@media (max-width: 640px) {
  .jm-detail-list li {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }

  .jm-detail-list strong {
    font-size: 0.8rem;
    color: #475569;
  }
}

/* ---------- Tables（将来対応） ---------- */

.jm-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

.jm-section th,
.jm-section td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.jm-section th {
  font-weight: 600;
  color: #020617;
  background: rgba(15, 23, 42, 0.03);
}

/* ---------- Figures / Notes ---------- */

.jm-note {
  margin: 1.2rem 0;
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
  color: #334155;
  background: rgba(15, 23, 42, 0.025);
  border-left: 3px solid rgba(37, 99, 235, 0.35);
  border-radius: 0.4rem;
}

/* ---------- Blockquote ---------- */

.jm-section blockquote {
  margin: 1.2rem 0;
  padding-left: 1rem;
  border-left: 3px solid rgba(15, 23, 42, 0.15);
  color: #475569;
  font-size: 0.92rem;
}

/* ---------- Ads（視覚ノイズ制御） ---------- */

.ad-slot {
  display: none;
}


/* =========================================
   JPNMEDICAL – References (Refined)
========================================= */

.jm-references {
  margin-top: 1.8rem;
  padding: 1.2rem 1.4rem 1.25rem;
  background: rgba(15, 23, 42, 0.02);
  border-radius: 0.75rem;
  position: relative;
}

/* 左側の控えめなライン */
.jm-references::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.55),
    rgba(37, 99, 235, 0.15)
  );
  border-radius: 2px;
}

/* 見出し */
.jm-references .jm-section-title {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 0.7rem;
}

/* 文献リスト */
.jm-references-list p {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #0f172a;
}

/* URL */
.jm-references-list a {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
  opacity: 0.85;
}

/* Hover：派手にしない */
.jm-references-list a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* 最後の余白調整 */
.jm-references-list p:last-child {
  margin-bottom: 0;
}


/* =========================================
   セクション種別
========================================= */

.jm-summary {}
.jm-context {}
.jm-details {}

  /* =========================================
     記事タイプ修飾子
  ========================================= */

.jm-article--statistics {}
.jm-article--policy {}
.jm-article--research {}



  /* =========================================================
     SHARE (Scriptless) – Before Footer + Drawer
     - Full-width band before footer
     - Centered rounded card
     - Drawer: compact, dark-friendly
  ========================================================= */


  /* ---------------------------
     Before Footer wrapper
  ---------------------------- */
  .jpn-share-area--before-footer{
    padding: 26px 0 34px;
    background: #f3f6fb;
  }

  /* 共通カード */
  .jpn-share-area__card{
    max-width: 980px;
    margin: 0 auto;
    padding: 22px 26px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 18px 40px rgba(2,6,23,.08);
  }

  /* content-inner を挟む構造でも“二重余白”にならないよう保険 */
  .jpn-share-area--before-footer .content-inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* shareブロックの余計な上下余白を切る */
  .jpn-share-area__card .scriptlesssocialsharing{
    margin: 0;
  }

  /* ---------------------------
     Share block (common)
  ---------------------------- */
  .scriptlesssocialsharing__heading{
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(15,23,42,.78);
  }

  .scriptlesssocialsharing__buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* normal buttons */
  .scriptlesssocialsharing__buttons .button{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px;

    border: 1px solid rgba(15,23,42,.10);
    border-radius: 999px;
    background: #fff;

    text-decoration: none;
    line-height: 1;

    box-shadow: 0 2px 10px rgba(2,6,23,.06);
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  }

  .scriptlesssocialsharing__buttons .button:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
    border-color: rgba(15,23,42,.18);
  }

  .scriptlesssocialsharing__icon{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
  }

  /* Email SVGにも確実に */
  .scriptlesssocialsharing__icon.email{
    width: 18px;
    height: 18px;
    display: block;
  }

  .scriptlesssocialsharing__buttons .sss-name{
    font-size: 13px;
    color: rgba(15,23,42,.82);
    white-space: nowrap;
  }

  /* ---------------------------
     Compact variant (Drawer)
  ---------------------------- */
  .scriptlesssocialsharing--compact .sss-name{
    display: none;
  }

  .scriptlesssocialsharing--compact .scriptlesssocialsharing__buttons{
    gap: 12px;
  }

  /* compact buttons: “詰まり”解消（余白＆タップ領域UP） */
  .scriptlesssocialsharing--compact .button{
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }

  /* Drawer wrapper card（暗背景でも“呼吸”させる） */
  .jpn-share-area--drawer{
    margin-top: 14px;
  }

  .jpn-share-area--drawer .jpn-share-area__card{
    padding: 14px 14px 16px;        /* ←詰まりを解消 */
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
  }

  /* drawer内はボタンも暗背景向けに */
  .jpn-share-area--drawer .scriptlesssocialsharing--compact .button{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    box-shadow: none;
  }

  .jpn-share-area--drawer .scriptlesssocialsharing--compact .button:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.10);
  }

  /* drawer内で“下に詰まって見える”のを防ぐ：下余白を確保 */
  .jpn-share-area--drawer .scriptlesssocialsharing{
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* Mobile */
  @media (max-width: 600px){
    .jpn-share-area__card{
      padding: 16px 14px;
      border-radius: 16px;
    }
    .scriptlesssocialsharing__buttons{
      gap: 10px;
    }
    .scriptlesssocialsharing--compact .button{
      width: 46px;  /* モバイルは少し大きく */
      height: 46px;
    }
  }



  /* =========================
     Floating share (Desktop)
  ========================= */
  .jpn-share-float{
    position: fixed;
    left: 24px;         /* 画面左からの距離 */
    top: 140px;         /* ヘッダー下に合わせる */
    z-index: 50;
    width: 56px;
  }

  /* 縦並び＆折返し禁止 */
  .jpn-share-float .scriptlesssocialsharing__buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: nowrap !important;
  }

  /* 浮いてる感じ */
  .jpn-share-float .scriptlesssocialsharing--compact .button{
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 10px 24px rgba(2,6,23,.10);
  }

  /* 記事下部が見えたらPC縦バーは薄くして邪魔しない */
  .jpn-share-float.is-hidden{
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .jpn-share-float{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
  }


  /* =========================
     Bottom share (Mobile)
  ========================= */
  /* 既存の before-footer を“記事下用カード”として使ってもOKだが、
     ここでは「モバイル専用の下部バー」を用意 */
  .jpn-share-mobile-bottom{
    display: none;
  }

  /* モバイル：記事下に出す */
  @media (max-width: 900px){
    .jpn-share-float{ display: none; }

    .jpn-share-mobile-bottom{
      display: block;
      margin-top: 18px;
      padding: 14px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: 0 14px 34px rgba(2,6,23,.10);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .25s ease, transform .25s ease;
    }
    .jpn-share-mobile-bottom.is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    /* モバイル下部は横並びでOK */
    .jpn-share-mobile-bottom .scriptlesssocialsharing__buttons{
      flex-wrap: wrap;
      gap: 10px;
    }
  }