/* css/style.css */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.6;
}

.hero-gradient {
    /* 背景画像を少し暗くして文字を読みやすくしつつ、オレンジのグラデーションを重ねています */
    background: linear-gradient(to right bottom, rgba(249, 115, 22, 0.9), rgba(194, 65, 12, 0.8)), url('https://images.unsplash.com/photo-1625246333195-551e5051d939?q=80&w=1974&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}

.section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
    font-weight: 900;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #F97316;
}

/* スムーズスクロール */
html {
    scroll-behavior: smooth;
}

/* SEO用：画面に表示せず読み上げ・検索エンジンには認識させる */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {

  /* bodyの余白は足し算になるので消す */
  body{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 記事の外側コンテナ */
  main > .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }

  /* 記事カードの余白 */
  main article{
    padding: 16px !important;
  }
/* 本文フォントサイズ調整 */
.article-content{
  font-size: 15px !important;   /* ←読みやすいブログサイズ */
  line-height: 1.9 !important;
}

/* 段落 */
.article-content p{
  margin-bottom: 1.6em;
}

/* 見出しは少しだけ大きく */
.article-content h2{
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

.article-content h3{
  font-size: 1.1rem !important;
}
/* 本文 */
  .article-content{
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.02em; /* ←読みやすさUP */
  }

  /* 大見出し（番号付き） */
  .article-content h2{
    font-size: 1.3rem !important;
    line-height: 1.5;
    margin-top: 2.2em;
    margin-bottom: 0.8em;
  }

  /* 小見出し */
  .article-content h3{
    font-size: 1.12rem !important;
    margin-top: 1.8em;
  }

  /* 段落の間隔（これが重要） */
  .article-content p{
    margin-bottom: 1.7em;
  }
}

.live-link {
  display: inline-block;
  color: #ea580c;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.live-link:hover {
  color: #c2410c;
  text-decoration: underline;
  transform: translateY(-1px);
  opacity: 0.9;
}

.live-link:focus {
  outline: 2px solid #f97316;
  outline-offset: 3px;
  border-radius: 4px;
}