/*
 Theme Name: Twenty Twenty-Four Child
 Template: twentytwentyfour
 Version: 1.0.0
*/
/* ===========================
   Nissera / PMPro Account UI
   スコープ：#pmpro_account, .pmpro-account
   Brand: #FFD400
   =========================== */
/* ========================================
   Typography Base Settings
   ======================================== */

/* 1. ベースサイズ（本文などはこれを基準に rem で調整） */
html {
  font-size: 16px; /* PC基準 */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%; /* iOSで文字が勝手に拡大されないように */
}

/* 2. 各デバイスごとの調整 */
@media (max-width: 480px) {
  html {
    font-size: 14px; /* 小さいスマホ */
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  html {
    font-size: 15px; /* 標準スマホ */
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html {
    font-size: 16px; /* タブレット */
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 17px; /* PCはほんのり大きめ */
  }
}

/* 3. 汎用要素のスタイル */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "Segoe UI", "Noto Sans JP", sans-serif;
  font-size: 1rem; /* = htmlのfont-size */
  color: var(--ink, #16202a);
  background: #fff;
}

/* 段落・リスト */
p, li {
  font-size: 1rem;
  margin-bottom: 1em;
}

/* 小さな文字（補足・注釈） */
small {
  font-size: 0.875rem;
  line-height: 1.4;
}

/* 見出しはベースだけ定義（あとで clamp で個別調整推奨） */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .6em;
}


:root {
  /* カラーバリエーション */
  --badge-bg: var(--soft);
  --badge-color: #7A5C00;
  --badge-border: 1px solid rgba(0,0,0,.05);

  /* サイズ */
  --badge-font-size: 0.8rem;
  --badge-width: 80px;
  --badge-height: 80px;

  /* 画像URL（銀・金） */
  --badge-img-free: url("https://blog.peaceful-relax.com/blog/wp-content/uploads/2025/08/free-mark.webp");
  --badge-img-pro:  url("https://blog.peaceful-relax.com/blog/wp-content/uploads/2025/08/pro-mark.webp");
}

/* ベース色と余白 */
#pmpro_account, .pmpro-account {
  --brand: #FFD400;
  --ink: #111827;
  --muted: #6B7280;
  --edge: #E5E7EB;
  --card: #ffffff;
  --soft: #FFFBE6; /* brand薄色 */
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* コンテナの整形 */
#pmpro_account .pmpro_box,
.pmpro-account .pmpro_box {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  padding: clamp(16px, 2.2vw, 24px);
  margin: 20px 0;
}

/* 見出し */
#pmpro_account h2,
.pmpro-account h2 {
  font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem);
  line-height: 1.25;
  margin: 0 0 .8em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#pmpro_account h2::before,
.pmpro-account h2::before {
  content: "";
  width: .75em; height: .75em;
  border-right: 3px solid var(--brand);
  border-bottom: 3px solid var(--brand);
  transform: rotate(-45deg);
  opacity: .9;
}

/* テキスト色の整理 */
#pmpro_account p, #pmpro_account li,
.pmpro-account p, .pmpro-account li {
  color: var(--ink);
}
#pmpro_account .muted, .pmpro-account .muted { color: var(--muted); }

/* テーブル（会員情報・請求など） */
#pmpro_account table,
.pmpro-account table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--edge);
}
#pmpro_account table th,
#pmpro_account table td,
.pmpro-account table th,
.pmpro-account table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--edge);
  vertical-align: middle;
  font-size: .98rem;
}
#pmpro_account table th,
.pmpro-account table th {
  background: var(--soft);
  font-weight: 700;
}
#pmpro_account table tr:last-child td,
.pmpro-account table tr:last-child td { border-bottom: 0; }

/* リンク一覧（会員リンク） */
#pmpro_account-links ul,
.pmpro-account #pmpro_account-links ul {
  padding-left: 0; margin: .6rem 0 0;
}
#pmpro_account-links li,
.pmpro-account #pmpro_account-links li {
  list-style: none;
  margin: .5rem 0;
  padding: .45rem .6rem;
  border-radius: 10px;
  transition: background-color .18s ease, transform .18s ease;
}
#pmpro_account-links a,
.pmpro-account #pmpro_account-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
}
#pmpro_account-links a::before,
.pmpro-account #pmpro_account-links a::before {
  content: "";
  display: inline-block;
  width: .6em; height: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .6;
  vertical-align: middle;
}
#pmpro_account-links li:hover { background: var(--soft); transform: translateY(-1px); }

/* フォーム要素（プロフィール編集など） */
#pmpro_account input[type="text"],
#pmpro_account input[type="email"],
#pmpro_account input[type="password"],
#pmpro_account select,
#pmpro_account textarea,
.pmpro-account input[type="text"],
.pmpro-account input[type="email"],
.pmpro-account input[type="password"],
.pmpro-account select,
.pmpro-account textarea {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#pmpro_account input:focus,
#pmpro_account select:focus,
#pmpro_account textarea:focus,
.pmpro-account input:focus,
.pmpro-account select:focus,
.pmpro-account textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255,212,0,.35);
}

/* ボタン（統一） */
#pmpro_account .pmpro_btn, #pmpro_account .button,
.pmpro-account .pmpro_btn, .pmpro-account .button,
#pmpro_account input[type="submit"], .pmpro-account input[type="submit"] {
  appearance: none;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--brand);
  color: #111;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
#pmpro_account .pmpro_btn:hover, #pmpro_account .button:hover,
.pmpro-account .pmpro_btn:hover, .pmpro-account .button:hover,
#pmpro_account input[type="submit"]:hover, .pmpro-account input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,212,0,.35);
}

/* アラート/メッセージ */
#pmpro_account .pmpro_message,
.pmpro-account .pmpro_message {
  border-radius: 12px;
  padding: 10px 14px;
}
#pmpro_account .pmpro_success,
.pmpro-account .pmpro_success {
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
}
#pmpro_account .pmpro_error,
.pmpro-account .pmpro_error {
  background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B;
}
#pmpro_account .pmpro_alert,
.pmpro-account .pmpro_alert {
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
}

/* 右側カードに使える“現在のプラン”バッジ（任意） */

.plan-badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-color);
  font-size: var(--badge-font-size);
  border: var(--badge-border);
}

/* 細かな整え */
#pmpro_account hr, .pmpro-account hr {
  border: 0;
  height: 1px;
  background: var(--edge);
  margin: 16px 0;
}
#pmpro_account a, .pmpro-account a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  #pmpro_account .pmpro_box, .pmpro-account .pmpro_box { padding: 16px; }
  #pmpro_account table th, #pmpro_account table td,
  .pmpro-account table th, .pmpro-account table td {
    padding: 10px 12px;
    font-size: .95rem;
  }
}

/* 会員ブロックの見出しにバッジを付ける */
#pmpro_account-profile h2,
.pmpro-account #pmpro_account-profile h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 無料＝銀 */
.membership-free #pmpro_account-profile h2::after {
  content: "";
  display: inline-block;
  width: var(--badge-width);
  height: var(--badge-height);
  background: var(--badge-img-free) no-repeat center / contain;
}

/* 有料＝金 */
.membership-professional #pmpro_account-profile h2::after,
.membership-paid #pmpro_account-profile h2::after {
  content: "";
  display: inline-block;
  width: var(--badge-width);
  height: var(--badge-height);
  background: var(--badge-img-pro) no-repeat center / contain;
}
/*レッスン関連のCSS*/

/* ===== 変数 ===== */
.nissera-hero{--brand:#FFD400;--ink:#111827;--muted:#6B7280;
  --card:#e6f3fb;--mint:#e9fbf3;--radius:18px;--shadow:0 12px 30px rgba(0,0,0,.08);
  max-width:1200px;margin:28px auto;padding:0 5vw;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans JP',sans-serif}
.brand-head{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-bottom:12px}
.brand-logo{width:28px;height:28px;object-fit:contain}
.brand-name{font-weight:700;color:var(--ink);opacity:.85}

/* ===== スライダー枠 ===== */
.hero-slider{position:relative}
.hero-track{display:flex;gap:16px;transition:transform .3s ease}
.hero-card{position:relative;flex:0 0 100%;display:grid;grid-template-columns:280px 1fr;gap:20px;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;overflow:hidden}
.hero-card.theme-blue{--card:#bfe6f8}
.hero-card.theme-mint{--card:var(--mint)}
.hero-card::before{/*小さなデコ（＋）*/content:"＋ ＋";position:absolute;left:14px;top:12px;
  font-weight:700;color:rgba(0,0,0,.08);letter-spacing:.3em}
.hero-card .hero-media{display:flex;align-items:center;justify-content:center}
.hero-card .hero-media img{width:100%;max-width:220px;height:auto;display:block}
.hero-copy{align-self:center}
.hero-title{font-size:clamp(1.2rem,1rem + 1.2vw,1.8rem);line-height:1.35;margin:0 0 .4rem;color:var(--ink);font-weight:800}
.hero-desc{margin:.2rem 0 .6rem;color:var(--ink);opacity:.9}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem;padding:0;list-style:none}
.hero-chips li{padding:.35rem .7rem;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.06);font-size:.9rem}
.hero-ctas{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.55rem 1rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .06s ease, box-shadow .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#fff}
.btn.ghost{background:#fff;color:#111827;border:1px solid rgba(0,0,0,.08)}
.corner-ribbon{position:absolute;right:-38px;top:14px;transform:rotate(35deg);background:#ff6fa5;color:#fff;
  font-weight:800;letter-spacing:.04em;padding:.25rem 2.2rem;border-radius:6px;box-shadow:0 6px 18px rgba(255,111,165,.35)}

/* ナビ */
.hero-nav{position:absolute;inset:0 10px 0 auto;display:flex;align-items:center;gap:8px;pointer-events:none}
.nav-btn{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;
  font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.nav-btn:disabled{opacity:.4;cursor:not-allowed}

/* レスポンシブ */
@media (max-width: 920px){
  .hero-card{grid-template-columns:200px 1fr}
  .hero-card .hero-media img{max-width:180px}
}
@media (max-width: 680px){
  .hero-card{grid-template-columns:1fr;gap:10px;padding:16px}
  .hero-card .hero-media img{max-width:220px;margin:4px auto 0}
  .hero-nav{right:6px}
  .corner-ribbon{transform:none;right:10px;top:10px;border-radius:999px;padding:.2rem .6rem}
}
/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .hero-track{transition:none}
}

.member-home{max-width:1200px;margin:32px auto;padding:0 5vw;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif}

.section-heading{font-size:clamp(1.25rem,1.1rem+1vw,1.6rem);margin:28px 0 6px}
.section-desc{color:#6b7280;margin:0 0 14px}

/* グリッド */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:10px}

/* ベースカード（背景なしの従来型） */
.card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-radius:14px;
      background:#f8fafc;border:1px solid #e5e7eb;text-decoration:none;color:#111827;transition:transform .08s ease,box-shadow .08s ease}
.card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.card-title{font-weight:700}
.badge{font-size:.8rem;padding:.15rem .55rem;border-radius:999px;border:1px solid rgba(0,0,0,.06);background:#fff}

/* FREE/LOCKED表示 */
.card.free .badge{background:#fff8cc}
.card.locked{filter:saturate(.85)}
/* --- 重なり解消：lockedの ::after を使わず、バッジ内に鍵アイコンを表示 --- */
/* 文字でも表示したい場合の代替（右上ピル） */
.card.locked::after{
  content:"会員限定";
  position:absolute; top:10px; right:10px;
  font-size:.72rem; color:#374151;
  background:rgba(255,255,255,.92);
  border:1px solid #e5e7eb; border-radius:999px;
  padding:.12rem .5rem; z-index:1;
}


.card.locked .badge::before{
  content:"?";
  display:inline-block;
  margin-right:.35em;
  transform:translateY(.5px);
}

/* モバイルでの読みやすさ微調整（任意） */
@media (max-width:480px){
  .card.locked .badge{ font-size:.78rem; }
}

/* 背景画像カード（has-bg を付けるだけで切替） */
.card.has-bg{
  position:relative; z-index:0; isolation:isolate;
  overflow:hidden; aspect-ratio:4/3; align-items:flex-end;
  padding:14px 16px; color:#fff; border:0; background:transparent;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.card.has-bg .card-bg{
  position:absolute; inset:0; background:#dfe7ee center/cover no-repeat;
  transform:scale(1.02); z-index:0;
  filter:saturate(.95) contrast(1.02);
  transition:transform .35s ease, filter .35s ease;
}
.card.has-bg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.45) 100%);
  z-index:0;
}
.card-label{ position:relative; z-index:1; display:flex; align-items:center; gap:.5rem; }
.card.has-bg .badge{background:rgba(255,255,255,.92); color:#111827; border:0}
.card.has-bg .card-title{font-weight:800; font-size:1.05rem; letter-spacing:.02em}
.card.has-bg:hover .card-bg{ transform:scale(1.06) }

/* 注意書き */
.note{margin:10px 0 24px;color:#6b7280;font-size:.9rem}

/* モバイル微調整 */
@media (max-width: 480px){
  .card{padding:14px 16px}
  .card-title{font-size:1rem}
}

/* ====== 見出しの共通変数 ====== */
:root{ --brand:#FFD400; --ink:#111827; --muted:#6B7280; }

/* ベース見出し */
.section-heading{
  color:var(--ink); font-weight:800; letter-spacing:.02em; line-height:1.25;
  font-size:clamp(1.28rem,1.05rem + 1.2vw,1.9rem); margin:28px 0 8px;
}
.section-desc{ color:var(--muted); margin:0 0 16px; }

/* ? アクセント下線（おすすめ） */
.section-heading.is-accent{ position:relative; padding-bottom:.4rem; display:inline-block; }
.section-heading.is-accent::after{
  content:""; position:absolute; left:0; bottom:0;
  width:min(42%,180px); height:8px; border-radius:8px;
  background:linear-gradient(90deg,var(--brand),rgba(255,212,0,.45));
}

/* ? リボン（左帯） */
.section-heading.is-ribbon{ position:relative; padding-left:14px; }
.section-heading.is-ribbon::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  width:6px; border-radius:999px; background:linear-gradient(180deg,var(--brand),rgba(255,212,0,.6));
}

/* ? マーカー（テキストにハイライト） */
.section-heading.is-marker{ display:inline; box-shadow:inset 0 -10px 0 #FFF3A3; }

/* アイブロー（小見出しラベル） */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; letter-spacing:.06em; color:var(--muted); margin-bottom:6px;
}
.section-eyebrow::before{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 4px rgba(255,212,0,.18);
}

/* 配置ユーティリティ */
.heading-center{ text-align:center; }
.heading-center .section-heading,
.heading-center .section-desc,
.heading-center .section-eyebrow{ margin-left:auto; margin-right:auto; }

.pmpro-locked-box{
  --brand:#FFD400; --ink:#16202a; --edge:#e5e7eb;
  background:#fff; border:1px solid var(--edge); border-radius:14px;
  padding:24px; box-shadow:0 10px 28px rgba(0,0,0,.06); max-width:780px;
}
.pmpro-locked-icon{font-size:22px; line-height:1; margin-bottom:6px}
.pmpro-locked-title{margin:0 0 6px; font-size:1.25rem}
.pmpro-locked-desc{margin:0 0 16px; color:#6b7280}
.pmpro-locked-actions{display:flex; gap:10px; flex-wrap:wrap}
.pmpro-locked-actions .btn{
  display:inline-block; padding:.6rem 1rem; border-radius:999px; text-decoration:none;
}
.pmpro-locked-actions .btn-primary{background:var(--brand); color:var(--ink)}
.pmpro-locked-actions .btn-ghost{border:1px solid var(--edge); color:#111827; background:#fff}
.pmpro-locked-actions .btn-link{color:#111827; text-decoration:underline; text-underline-offset:2px}


:root{
  --brand:#FFD400; --ink:#16202a; --muted:#6b7280;
  --edge:#e5e7eb; --soft:#f9fafb;
  --ok:#16a34a; --ng:#ef4444; --note:#0ea5e9;
}

/* 記事・レッスン内の通常ULを上品に */
.blog-article ul,
.lesson-section ul{
  list-style:none; margin:0 0 1.1rem; padding:0;
}
.blog-article ul li,
.lesson-section ul li{
  position:relative; line-height:1.85; color:var(--ink);
  padding-left:1.5rem;
}
.blog-article ul li+li,
.lesson-section ul li+li{ margin-top:.4rem; }

/* 丸いブランドドット */
.blog-article ul li::before,
.lesson-section ul li::before{
  content:""; position:absolute; left:0; top:0.95em;
  width:.55rem; height:.55rem; border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(255,212,0,.18);
  transform:translateY(-50%);
}

/* ネスト時は控えめに */
.blog-article ul ul li::before,
.lesson-section ul ul li::before{
  background:#fff; border:2px solid var(--brand); box-shadow:none;
  width:.5rem; height:.5rem;
}


/* ========== NisSera List Style ========== */
:root{
  --brand:#FFD400; 
  --ink:#16202a; 
  --muted:#6b7280;
  --edge:#e5e7eb; 
  --soft:#f9fafb;
  --ok:#16a34a; 
  --ng:#ef4444; 
  --note:#0ea5e9;
}

/* ベースリセットと装飾 */
.blog-article ul,
.lesson-section ul{
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
}
.blog-article ul li,
.lesson-section ul li{
  position:relative;
  line-height:1.85;
  color:var(--ink);
  padding-left:1.5rem;
}
.blog-article ul li+li,
.lesson-section ul li+li{
  margin-top:.4rem;
}

/* 丸いブランドドット */
.blog-article ul li::before,
.lesson-section ul li::before{
  content:"";
  position:absolute;
  left:0; top:0.95em;
  width:.55rem; height:.55rem;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(255,212,0,.18);
  transform:translateY(-50%);
}

/* ネスト時は控えめに */
.blog-article ul ul li::before,
.lesson-section ul ul li::before{
  background:#fff;
  border:2px solid var(--brand);
  box-shadow:none;
  width:.5rem; height:.5rem;
}

/* ========== バリエーション ========== */

/* ===== Fix: 二重の黒丸を消す（list-style / ::marker / 既存::before を無効化） ===== */

/* 対象ULは完全に箇条書き記号を消す */
ul.list-check,
ul.list-ng,
ul.list-note,
ul.list-tags,
.blog-article ul.list-check,
.blog-article ul.list-ng,
.blog-article ul.list-note,
.blog-article ul.list-tags,
.lesson-section ul.list-check,
.lesson-section ul.list-ng,
.lesson-section ul.list-note,
.lesson-section ul.list-tags{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0;
}

/* テーマが付ける ::marker を無効化 */
ul.list-check li::marker,
ul.list-ng li::marker,
ul.list-note li::marker,
ul.list-tags li::marker{
  content: "" !important;
}

/* テーマが li::before で黒丸を作る場合に備えて一旦リセット */
ul.list-check > li::before,
ul.list-ng   > li::before,
ul.list-note > li::before,
ul.list-tags > li::before{
  content: none;           /* まず消す */
  box-shadow: none;
  background: transparent;
  border: 0;
  width: 0; height: 0;
}

/* ここから “ニッセラ記号” を改めて描画（上書き） */
ul.list-check li{
  position: relative;
  padding-left: 1.9rem;    /* 記号ぶん余白 */
  list-style: none !important;
}
ul.list-check li::before{
  content:"✓";
  display:grid; place-items:center;
  position:absolute; left:0; top:0.95em; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; font-size:.7rem; font-weight:700;
  color:#111; background:var(--brand); border-radius:999px;
}

/* list-ng / list-note も同様に再描画（既存定義の再掲で確実に上書き） */
ul.list-ng li{
  position: relative; padding-left:1.9rem; list-style:none !important;
}
ul.list-ng li::before{
  content:"✕";
  display:grid; place-items:center;
  position:absolute; left:0; top:0.95em; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; font-size:.72rem; font-weight:700;
  color:#fff; background:var(--ng); border-radius:999px;
}

ul.list-note li{
  position: relative; padding-left:1.9rem; list-style:none !important;
}
ul.list-note li::before{
  content:"i";
  display:grid; place-items:center;
  position:absolute; left:0; top:0.95em; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; font-size:.74rem; font-weight:700;
  color:#fff; background:var(--note); border-radius:999px;
}

/* タグ風だけは記号を出さない */
ul.list-tags li{
  list-style:none !important;
}
ul.list-tags li::before{ content:none !important; }

/*ロゴとナビゲーション*/

.app-header .hdr-container{
  max-width:1200px; margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* 左側：ロゴ＋ナビを横並び */
.hdr-left{display:flex; align-items:center; gap:28px}

/* ロゴ */
.brand{display:flex; align-items:center; text-decoration:none; color:inherit}
.brand-logo{width:28px; height:28px; border-radius:6px; object-fit:cover}

/* ナビ（ロゴのすぐ隣） */
.gnav-list{display:flex; gap:22px; margin:0; padding:0; list-style:none}
.gnav-list a{color:#0f1e2b; text-decoration:none; font-weight:600}
.gnav-list a:hover{color:#0b5c7a; text-decoration:underline; text-underline-offset:3px}

/* 右側アカウント */
.account-area{display:flex; align-items:center; gap:14px}