@charset "utf-8";
/* 健康常備学キャラクター健康くんカラー版グラデーション*/
:root {
  --smp--gradient--spring: radial-gradient(rgba(241, 211, 223, 0.50), rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 1));
  --smp--gradient--summer: radial-gradient(rgba(165, 210, 231, 0.30), rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 1));
  --smp--gradient--autumn: radial-gradient(rgba(201, 175, 142, 0.50), rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 1));
  --smp--gradient--winter: radial-gradient(rgba(189, 196, 222, 0.50), rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, 1));
}

/* コンテナ幅を固定する */
@media screen and (min-width: 1280px){
  h1, .introduction, .smp-inner{
      width: 1062px;
      margin: 0 auto;
    }
}
@media screen and (min-width: 1920px){
  h1, .introduction, .smp-inner{
    width: 75%;
    margin: 0 auto;
  }
}

/* イラストの位置を中央に配置する */
.smp-illustration-column {
    display: grid;
    place-items: center;
  }

/* コンテンツは春夏秋冬に区別されているため、掲載年月日に応じて背景色を変更する。mix-blend-mode: multiply;を用いて画像を編集することなく乗算などのエフェクトをかける。 */

  /* 3~5月 */
.smp-illustration-column.smp-bgc-spring{
  background: var(--smp--gradient--spring);
}
  /* 6~8月 */
.smp-illustration-column.smp-bgc-summer{
  background: var(--smp--gradient--summer);
}
  /* 9~11月 */
.smp-illustration-column.smp-bgc-autumn{
  background: var(--smp--gradient--autumn);
}
  /* 12~2月 */
.smp-illustration-column.smp-bgc-winter{
  background: var(--smp--gradient--winter);
}

/* 背景のエフェクト */
.smp-mix-blend-multiply {
  mix-blend-mode:multiply;
}
.smp-mix-blend-darken {
  mix-blend-mode:darken;
}
.smp-mix-blend-luminosity {
  mix-blend-mode:luminosity;
}
.smp-mix-blend-normal {
  mix-blend-mode:normal;
}