/* note風カスタムCSS */

/* 全体のフォント設定 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
  color: #333;
  background-color: #fff;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* リンク色：noteっぽいグリーンまたは黒 */
a {
  color: #2cb696; /* note green-ish */
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.7;
  color: #2cb696;
}

/* ヘッダーエリアの調整 */
header.bg-top {
  background-position: center 30% !important; /* 画像の顔が見える位置に調整 */
  height: 60vh; /* 高さ確保 */
  max-height: 500px;
}

/* ヘッダータイトル */
h1.f2.f-subheadline-l {
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 画像上の文字を読みやすく */
}

/* 記事本文のコンテナ幅をnote風に狭くする */
.nested-copy-line-height {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

/* 記事タイトル */
h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* 見出しのデザイン */
h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee; /* さりげない区切り線 */
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 記事一覧（トップページ）の調整 */
.pa3-l {
  padding: 2rem;
}

/* 記事カードのスタイル */
.mb3-l {
  margin-bottom: 3rem;
}

/* 記事カード内のタイトル */
h1.f3-l {
  font-size: 1.5rem;
  font-weight: 700;
}

/* 記事カード内の抜粋文 */
.f5-l {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}

/* 不要なボーダーなどを消す */
.bt {
  border-top: none;
}
.bb {
  border-bottom: 1px solid #f0f0f0;
}

/* フッターをシンプルに */
footer {
  background-color: #f9f9f9 !important;
  color: #666 !important;
  margin-top: 4rem;
}