@charset "UTF-8";
/* =====================================================================
   tsunagu-blog 共通トークン
   tsunagu-hp（public/css/style.css §3 デザイントークン）からコピー。
   同じトーン＆マナーで実装するため、色はここのCSS変数経由のみで参照する。
   ===================================================================== */
:root {
  /* ブランドカラー */
  --color-primary:       #3D5A80;
  --color-primary-deep:  #2C4363;
  --color-primary-tint:  #E9EEF5;
  --color-caramel:       #A9713D;
  --color-caramel-tint:  #F4E9DA;
  --color-accent:        #C75B27; /* 見学CTA専用テラコッタ */
  --color-base:          #FDFCF9;
  --color-base-warm:     #FAF4E9;
  --color-ink-heading:   #26344E;
  --color-ink-body:      #3C3A36;
  --color-ink-body-light:#5A564C;

  --color-primary-soft:  #5B779C;
  --color-accent-shadow: #A94A1E;
  --color-border:        #E4E0D5;
  --color-border-caramel:#EADFCE;
  --color-muted:         #7A7566;
  --color-muted-2:       #8A8272;
  --color-section:       #F2F0EA;
  --color-footer-deep:   #22344B;
  --color-on-dark:       #C7D3E4;
  --color-on-dark-dim:   #AFC2DC;
  --color-on-dark-faint: #7E93B0;
  --color-white:         #FFFFFF;

  /* 本文カラーパレット（§4.1 実色。キー名で保存→ここで実色定義）
     将来色調整したら全記事に反映される */
  --blog-color-default: var(--color-ink-body);
  --blog-color-blue:    #1d7fae;
  --blog-color-red:     #C0483B;
  --blog-color-orange:  #C75B27;
  --blog-color-green:   #4F7A5B;
  --blog-color-gray:    #7A7566;

  --font-heading: 'Zen Kaku Gothic New', sans-serif;
  --font-body:    'Noto Sans JP', sans-serif;

  --radius-card:   16px;
  --radius-card-lg:20px;
  --radius-photo:  16px;
  --radius-btn:    8px;

  --maxw: 1120px;
  --gutter: 22px;

  --ph-stripe: repeating-linear-gradient(45deg,#E3E8F0,#E3E8F0 12px,#EDF1F7 12px,#EDF1F7 24px);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-ink-body);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-deep); }
h1,h2,h3,p,ul,ol { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 器 */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }

/* ボタン（tsunagu-hpと同じ寸法・角丸8px固定） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700;
  border-radius: var(--radius-btn); text-decoration: none; cursor: pointer;
  border: none; line-height: 1.4; text-align: center;
  min-height: 44px; /* タップ領域44px以上 */
}
.btn-cta {
  background: var(--color-accent); color: #fff; font-size: 16px; padding: 15px 32px;
  box-shadow: 0 3px 0 var(--color-accent-shadow);
}
.btn-cta:hover { color: #fff; filter: brightness(0.97); }
.btn-cta--block { width: 100%; }
.btn-outline {
  background: #fff; border: 1.5px solid #C9D3E2; color: var(--color-primary-deep);
  font-size: 14px; padding: 12px 22px;
}
.btn-outline:hover { color: var(--color-primary-deep); background: var(--color-primary-tint); }
.btn-outline--block { width: 100%; }
.btn-primary {
  background: var(--color-primary); color: #fff; font-size: 15px; padding: 13px 26px;
}
.btn-primary:hover { color: #fff; background: var(--color-primary-deep); }
.btn-ghost {
  background: transparent; color: var(--color-primary); font-size: 14px; padding: 10px 16px;
}
.btn-danger {
  background: #fff; border: 1.5px solid #d9b3ad; color: #a5372b; font-size: 14px; padding: 12px 20px;
}
.btn-danger:hover { background: #fbeeec; color: #a5372b; }

.card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 18px;
}

/* お知らせカテゴリ・状態バッジ */
.badge {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: var(--color-primary-tint); color: var(--color-primary-deep);
}
.badge--important { background: #f7e2da; color: #a5372b; }
.badge--pinned { background: var(--color-caramel-tint); color: var(--color-caramel); }
.badge--draft { background: #eee; color: #777; }
.badge--pending { background: #fdf1dd; color: #a9713d; }
.badge--approved { background: #e3efe6; color: #4F7A5B; }
.badge--published { background: var(--color-primary-tint); color: var(--color-primary-deep); }
.badge--archived { background: #ececec; color: #8a6d3b; }

/* アバター丸 */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}