/* layout
-----------------------------------------------------------------------------*/
/*必要なフォントのみ読み込んでください。不要なフォントおよび太さは削除でお願いします。*/
@font-face {
  font-family: "Noto Sans JP";
  src:
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Regular.woff2") format("woff2"),
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Regular.woff") format("woff");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src:
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Medium.woff2") format("woff2"),
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Medium.woff") format("woff");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src:
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Bold.woff2") format("woff2"),
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Bold.woff") format("woff");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src:
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Black.woff2") format("woff2"),
    url("../../fonts/Noto_Sans_JP/NotoSansJP-Black.woff") format("woff");
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}
/*
  @font-face {
      font-family: 'Noto Serif JP';
      src: url("../../fonts/Noto_Serif_JP/NotoSerifJP-Regular.woff2") format("woff2"),url("../../fonts/Noto_Serif_JP/NotoSerifJP-Regular.woff") format("woff");
      font-display: swap;
      font-weight: 400;
      font-style: normal;
  }
  @font-face {
      font-family: 'Noto Serif JP';
      src: url("../../fonts/Noto_Serif_JP/NotoSerifJP-Medium.woff2") format("woff2"),url("../../fonts/Noto_Serif_JP/NotoSerifJP-Medium.woff") format("woff");
      font-display: swap;
      font-weight: 500;
      font-style: normal;
  }
  @font-face {
      font-family: 'Noto Serif JP';
      src: url("../../fonts/Noto_Serif_JP/NotoSerifJP-Bold.woff2") format("woff2"),url("../../fonts/Noto_Serif_JP/NotoSerifJP-Bold.woff") format("woff");
      font-display: swap;
      font-weight: 700;
      font-style: normal;
  }
  @font-face {
      font-family: 'Noto Serif JP';
      src: url("../../fonts/Noto_Serif_JP/NotoSerifJP-Black.woff2") format("woff2"),url("../../fonts/Noto_Serif_JP/NotoSerifJP-Black.woff") format("woff");
      font-display: swap;
      font-weight: 900;
      font-style: normal;
  }*/

/* base
---------------------------------------------------------------------------- */
/*------------- General Elements -------------*/
html {
  font-size: 62.5%;
}

body {
  font-family:
    "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  color: #333;
  font-size: 1.5rem;
}
@media screen and (max-width: 1280px) and (min-width: 767.01px) {
  html {
    font-size: 0.7421875vw;
  }
}
@media screen and (max-width: 767px) {
  body {
    min-width: inherit;
  }
}

/*------------- .l-content -------------*/
.l-content {
  width: 100%;
  max-width: 120rem;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .l-content {
    max-width: 100%;
    padding-inline: 5.3333333333vw;
  }
  .l-content._sp-px-0 {
    padding-inline: 0;
  }
}

/* common
---------------------------------------------------------------------------- */
.m-demo-main {
  padding-block: 5rem;
}

@media (max-width: 767px) {
  .m-demo-main {
    padding-block: calc(50 / 375 * 100vw);
  }
}

.m-template-note {
  background-color: #f0f0f0;
  padding-block: 2rem;
}
.m-template-note-text:not(:last-of-type) {
  margin-bottom: 1rem;
}

/*------------- .l-footer -------------*/
.l-footer {
  padding-block: 1rem;
  background-color: #303030;
  color: #fff;
}

.l-footer-bottom-copy {
  text-align: center;
}
.l-footer-bottom-copy small {
  font-size: 1.4rem;
  line-height: 1.4285714286;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 767px) {
  .l-footer {
    padding-block: 3.4666666667vw 3.2vw;
  }

  .l-footer-bottom-copy small {
    font-size: 3.7333333333vw;
  }
}

/* print
---------------------------------------------------------------------------- */
/* 印刷設定
---------------------------------------------------------------------------- */
@media print {
  * html body {
    zoom: 70%;
  }
}