:root {
  /* 文字の色 */
  --main-text1: rgba(0, 0, 0, 0.87);
  --main-text2: rgba(0, 0, 0, 0.6);
  --main-text3: rgba(0, 0, 0, 0.38);
  --main-text4: #ffffff;
  --main-text5: rgba(255, 255, 255, 0.7);
  --main-text6: rgba(255, 255, 255, 0.3);

  /* 影 */
  --shadow1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  --shadow2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  --shadow3: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow4: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  --shadow5: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);

  /* font family */
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a,
a:hover {
  transition: 0.4s all;
}
#material {
  font-size: 16px;
}
#material h1,
#material h2,
#material h3,
#material h4,
#material h5,
#material h6 {
  margin: 0;
  padding: 0;
}
#material h1,
#material h2,
#material h3,
#material h4,
#material h5,
#material h6 {
  color: var(--main-text1);
}
#material p {
  color: var(--main-text2);
}
#material h1 {
  font-size: 6em;
  font-weight: 300;
}
#material h2 {
  font-size: 3.75em;
  font-weight: 300;
}
#material h3 {
  font-size: 3em;
  font-weight: 500;
}
#material h4 {
  font-size: 2.125em;
  font-weight: 500;
}
#material h5 {
  font-size: 1.5em;
  font-weight: 500;
}
#material h6 {
  font-size: 1.25em;
  font-weight: 700;
}
#material p {
  font-size: 1em;
  line-height: 32px;
}
#material img {
  width: 100%;
}
#material .jpese {
  font-family: "Noto Sans JP", sans-serif;
}
#material .anton {
  font-family: "Anton", sans-serif;
}
@media screen and (max-width: 920px) and (min-width: 521px) {
}
@media screen and (max-width: 521px) {
  #material h2 {
    font-size: 40px;
  }
  #material h4 {
    font-size: 24px;
  }
  #material h6 {
    font-size: 16px;
  }
  #material p {
    font-size: 14px;
    line-height: 28px;
  }
}

#material .textcomment {
  width: 520px;
  text-align: left;
  margin-bottom: 24px;
}
#material .textcomment2 {
  margin-top: 24px;
}
#material .textcentercomment {
  text-align: center;
}

#material .textbtn {
  margin-top: 32px;
  width: max-content;
}
#material .topborder {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 24px;
}
#material .m_top24 {
  margin-top: 24px;
}
#material .m_top48 {
  margin-top: 48px;
}
#material .m_top64 {
  margin-top: 64px;
}
#material .m_top128 {
  margin-top: 128px;
}
#material .m_bottom24 {
  margin-bottom: 24px;
}
#material .m_bottom48 {
  margin-bottom: 48px;
}
#material .m_bottom64 {
  margin-bottom: 64px;
}
#material .m_bottom128 {
  margin-bottom: 128px;
}
#material div.contentsToptext_material p.coupon_code {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 32px;
  font-size: 27px;
  font-weight: 700;
}
@media screen and (max-width: 521px) {
  #material .textcomment {
    width: 100%;
    text-align: left;
  }
  #material .textbtn {
    margin: 32px auto;
  }
  #material div.contentsToptext_material p.coupon_code {
    font-size: 20px;
    padding: 16px;
  }
}
/* top mainimg */
#material div.contentsTopimg_material {
  width: 1024px;
  margin: 0 auto;
}
#material div.contentsTopimg_material img {
  width: 100%;
}

/* top text */
#material div.contentsToptext_material {
  width: 1024px;
  margin: 0 auto 48px auto;
  padding: 24px;
}
#material div.contentsToptext_material h4 {
  margin-bottom: 24px;
}
#material div.contentsToptext_material h6 {
  margin-bottom: 24px;
}
#material div.contentsToptext_material p {
  padding-top: 0;
}
#material div.material_with1024 {
  width: 1024px;
  margin: 0 auto;
}
@media screen and (max-width: 1025px) {
  #material div.contentsTopimg_material,
  #material div.contentsToptext_material,
  #material div.material_with1024 {
    width: 100%;
  }
}
@media screen and (max-width: 521px) {
  #material div.contentsToptext_material {
    padding: 16px;
  }
  #material div.contentsToptext_material h4 {
    margin-bottom: 16px;
  }
  #material div.contentsToptext_material h6 {
    margin-bottom: 16px;
  }
}

#material div.contentsItemlist_material {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 12px;
}
#material div.contentsItemlist_material h4 {
  width: 100%;
  padding: 12px;
}
#material div.contentsItemlist_material p {
  width: calc(100% / 3);
  padding: 12px;
}
#material div.contentsItemlist_material p a {
  position: relative;
  display: block;
  height: 100%;
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}
#material div.contentsItemlist_material p a span {
  display: block;
}
#material div.contentsItemlist_material p a:hover {
  border: 1px solid rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 521px) {
  #material div.contentsItemlist_material {
    padding: 0 8px;
  }
  #material div.contentsItemlist_material h6 {
    padding: 8px;
  }
  #material div.contentsItemlist_material p {
    width: 100%;
    padding: 8px;
  }
}

div.material_attention {
  width: 560px;
  margin: 64px auto;
  padding: 16px;
}
div.material_attention p {
  margin: 24px 0 0 0;
}
@media screen and (max-width: 561px) {
  div.material_attention {
    width: 100%;
    margin: 0px auto;
    padding: 24px;
  }
}
a.black_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  background-color: rgba(0, 0, 0, 0.87);
  color: #fff;
  transition: 0.4s;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
}
a.black_btn:hover {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
}

div.contentsToptext_material_flex {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0;
}
div.contentsToptext_material_flex div.contentsToptext_material_box_50 {
  width: 50%;
  padding: 0 24px;
  margin-bottom: 24px;
}
@media screen and (max-width: 769px) {
  div.contentsToptext_material_flex div.contentsToptext_material_box_50 {
    width: 100%;
    padding: 0 24px;
  }
}

div.material_fab {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  z-index: 4;
  display: flex;
  justify-content: space-evenly;
}
div.material_fab.tm0729 {
  font-family: "Murecho", Regular;
  font-size: 20px;
  letter-spacing: 2px;
}

div.material_fab a {
  font-weight: 700;
  background-color: #000;
  border: 1px solid #000;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  transition: 0.4s;
  display: flex;
  height: 48px;
  justify-content: center;
  align-items: center;
  padding: 0 64px;
  font-size: 16px;
}
div.material_fab.tm0729 a {
  background: #c00000;
  border-radius: 10px;
}
div.material_fab a:hover {
  background-color: #fff;
  color: #000 !important;
}
@media screen and (max-width: 769px) {
  div.material_fab {
    background: rgba(255, 255, 255, 0);
    flex-wrap: wrap;
  }
  div.material_fab a {
    font-weight: 700;
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    border-radius: 48px;
    text-decoration: none;
    transition: 0.4s;
    display: flex;
    height: 48px;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow2);
    padding: 0 64px;
  }
}

#material p.red {
  color: #c00000 !important;
}
#material p.image {
  width: 100%;
  margin-bottom: 24px;
}

div.sns-image {
  position: absolute;
  top: -200vw;
  left: 0;
}
div.sns-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.str {
  display: inline-block; /* ブロック化              */
  font-weight: bold; /* 太字                    */
  font-size: 120%; /* 文字を大きくする        */
  color: #333333; /* 文字色                  */
  background: rgba(255, 127, 127, 0.23); /* 背景色                  */
  padding: 4px; /* 背景色内の余白          */
  margin: 0 2px; /* 背景色のの外左右余白    */
  background: linear-gradient(transparent 30%, rgba(255, 127, 127, 0.23) 65%); /* ラインマーカーを付ける  */
}

/* othercontesnts */

div.ohterContents {
  width: 100%;
  background: #fff;
  position: relative;
  flex-wrap: wrap;
  padding: 128px 8px;
  margin-top: 128px;
}
div.ohterContents h2 {
  width: 100%;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 20px;
}
div.ohterContents img {
  width: 100%;
}
div.ohterContents p {
  width: 30%;
  padding: 16px;
}
div.ohterContents p a {
  display: block;
  border: 1px solid #efefef;
  transition: 0.4s;
}
div.ohterContents p a:hover {
  border: 1px solid #4f4f4f;
}
@media screen and (max-width: 769px) {
  div.ohterContents p {
    width: 40%;
    padding: 16px;
  }
}
@media screen and (max-width: 600px) {
  div.ohterContents {
    padding: 64px 8px;
  }
  div.ohterContents p {
    width: 50%;
    padding: 8px;
  }
}