@charset "UTF-8";

:root {
  --noto: "Noto Sans JP", sans-serif;
  --mont: "Montserrat", sans-serif;
  --word: #1a1a1a;
  --footerBg: #2a2b2c;
  --white: #ffffff;
  --grayBg: #f3f3f3;
  --grayLine: #eeeeee;
  --blue: #1779cd;
  --green: #23bdbf;
  --ggreen: #2a2b2c;
  --beige: #f3f3f3;
  --fw4: 400;
  --fw5: 500;
  --fw6: 600;
  --fw7: 700;
  --fz10: calc(10 / 16 * 1rem);
  --fz12: calc(12 / 16 * 1rem);
  --fz14: calc(14 / 16 * 1rem);
  --fz16: 1rem;
  --fz18: calc(18 / 16 * 1rem);
  --fz20: calc(20 / 16 * 1rem);
  --fz24: calc(24 / 16 * 1rem);
  --fz28: calc(28 / 16 * 1rem);
  --fz32: calc(32 / 16 * 1rem);
  --fz40: calc(40 / 16 * 1rem);
  --fz48: calc(48 / 16 * 1rem);
  --pad: 32px;
  --max: 1024px;
}

@media (min-width: 520px) {
  :root {
    --pad: 80px;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: var(--fz14);
  font-family: var(--noto);
  font-weight: var(--fw4);
  background-color: var(--white);
  color: var(--word);
  overflow-wrap: break-word;
  line-height: 1.75;
  letter-spacing: 0.08em;
  overflow-x: hidden;
}

/* メインコンテンツ */
.main {
  padding-top: 120px;
  background-color: var(--beige);
}

.article-section {
  padding: 40px 20px;
}

.article-section .container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--white);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.article-section h1 {
  font-size: var(--fz28);
  font-weight: var(--fw6);
  margin-bottom: 20px;
  color: var(--ggreen);
  text-align: center;
  position: relative;
  padding-bottom: 10px;
}

.article-section h1::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--blue);
}

.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: var(--ggreen);
  margin-top: 30px;
  margin-bottom: 15px;
  line-height: 1.4;
  position: relative;
  padding-bottom: 8px;
}

.article-content h2::after,
.article-content h3::after,
.article-content h4::after,
.article-content h5::after,
.article-content h6::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--green);
}

.article-content h2 {
  font-size: var(--fz24);
  font-weight: var(--fw6);
}

.article-content h3 {
  font-size: var(--fz20);
  font-weight: var(--fw6);
}

.article-content h4 {
  font-size: var(--fz18);
  font-weight: var(--fw5);
}

.article-content h5 {
  font-size: var(--fz16);
  font-weight: var(--fw5);
}

.article-content h6 {
  font-size: var(--fz14);
  font-weight: var(--fw5);
}

.article-image-container {
  margin: 20px 0;
  text-align: center;
}

.article-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.article-content {
  font-size: var(--fz16);
  line-height: 1.75;
  color: var(--word);
}

.article-content p {
  margin-bottom: 25px;
  line-height: 1.8;
  text-align: justify;
}

.article-content ol,
.article-content ul {
  margin: 20px 0;
  padding-left: 20px;
}

.article-content ol li,
.article-content ul li {
  margin-bottom: 15px;
  line-height: 1.6;
}

.article-category {
  margin-top: 20px;
  font-size: var(--fz14);
  color: var(--grayLine);
  text-align: center;
}

.footer {
  background-color: var(--footerBg);
  color: var(--white);
  padding: 20px 0;
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: var(--fz12);
}

/* レスポンシブスタイル */
@media (max-width: 768px) {
  .header nav ul {
    flex-direction: column;
    align-items: center;
  }

  .header nav ul li {
    margin-left: 0;
    margin-top: 10px;
  }

  .main {
    padding-top: 100px;
  }

  .article-section {
    padding: 20px;
  }

  .article-section h1 {
    font-size: var(--fz24);
  }

  .article-content {
    font-size: var(--fz14);
  }

  .article-content h2 {
    font-size: var(--fz20);
  }

  .article-content h3 {
    font-size: var(--fz18);
  }

  .article-content h4 {
    font-size: var(--fz16);
  }
}


/* リンクのスタイルを強調するCSS */
.article-content a {
  color: var(--blue); /* リンクのテキストカラーをブルーに */
  font-weight: var(--fw6); /* リンクの文字を太字に */
  text-decoration: underline; /* リンクに下線を追加 */
  transition: color 0.3s ease; /* ホバー時の色変更にスムーズなトランジションを追加 */
}

.article-content a:hover {
  color: var(--green); /* ホバー時にリンクの色をグリーンに変更 */
  text-decoration: none; /* ホバー時に下線を除去 */
}