.article-template {
  font-family: "Helvetica Neue", sans-serif;
  line-height: 1.8;
  color: #333;
  max-width: 100％;
  margin: 0 auto;
  padding: 0px;
}

.article-template h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: linear-gradient(to right, #66cc99, #339966); /* 💚 緑グラデーション */
  color: #fff;
  padding: 1em;
  border-radius: 0px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;
  box-sizing: border-box;
  font-size: clamp(12px, 2.5vw, 18px);
}

.article-template h2 {
  font-size: 1.5em;
  margin-top: 2em;
  color: #444;
  background-color: #f0f0f0;
  padding: 0.4em 0.6em;
  border-left: 4px solid #0073aa;
}

.article-template h3 {
  font-size: 1.2em;
  margin-top: 1.5em;
  color: #666;
  background-color: #f7f7f7;
  padding: 0.3em 0.5em;
  border-left: 3px solid #ccc;
}

.article-template ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.article-template dl dt {
  font-weight: bold;
  margin-top: 1em;
}

.article-template dl dd {
  margin-left: 1em;
  margin-bottom: 1em;
}

.article-template a {
  color: #0073aa;
  text-decoration: underline;
}

.article-template a:hover {
  text-decoration: none;
}
.article-template h1.yellow {
  background: linear-gradient(to right, #ffcc66, #ff9933); /* 🟡 イエロー系 */
}

.article-template h1.red {
  background: linear-gradient(to right, #ff6666, #cc3333); /* 🔴 レッド系 */
}

.article-template h1.pink {
  background: linear-gradient(to right, #ff99cc, #ff66b2); /* 🌸 ピンク系 */
}