@charset "utf-8";
/* ==========================
変数
============================= */

:root {
  --primary-black: #2f2f27;
  --primary-gray: #C1C4C2;
  --primary-green: #1CFF69;
  --contentWidth: 93.6%;
  --contentPadding: 0 3.47%;
  /* 50px/2 */
  --contentPadding2: 0 8%;
  /* 30px/2 */
  --contentPadding3: 0 10.6%;
  /* 40px/2 */
  --contentPadding4: 0 16.1%;
  /* 232px/2 */
  --contentPadding5: 0 5.3%;
  /* 77px/2 */
}

/* =====================
common
======================== */
html {
  scroll-behavior: auto;
  font-size: 62.5%;
  /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}

body {
  font-family:
    ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1vw;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--primary-black, #2f2f27);
  text-align: center;
  font-feature-settings: "palt";
  background-color: var(--primary-gray, #C1C4C2);
  width: 100%;
  overflow-x: hidden;

  background-image: url(../images/bg.png);
}

/* =====================
======================== */

.topicHeading {
  text-align: center;
  color: var(--primary-black, #2f2f27);
}

.topic {
  font-family: "darker-grotesque", sans-serif;
  font-size: 10vw;
  font-weight: 600;
  line-height: 0.4;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 2.2vw;
  color: var(--primary-black, #2f2f27);
}

.topic__ja {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-size: 2.3vw;
  line-height: 1;
  letter-spacing: 0.07em;
  position: relative;
  color: var(--primary-black, #2f2f27);
}

.newsTopicHeading,
.massegeTopHeading {
  text-align: left;
  color: var(--primary-black, #2f2f27);
  margin-bottom: 4.1vw;
}

.n__topic,
.m__topic {
  font-family: "darker-grotesque", sans-serif;
  font-size: 10vw;
  font-weight: 600;
  line-height: 0.4;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 10px;
  color: var(--primary-black, #2f2f27);
}

.n__topic__ja,
.m__topic__ja {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-size: 2.3vw;
  line-height: 1;
  letter-spacing: 0.07em;
  position: relative;
  color: var(--primary-black, #2f2f27);
}

.none {
  display: none;
}

a {
  color: var(--primary-black, #2f2f27);
  text-decoration: none;
}

::selection {
  color: #fff;
  background-color: var(--primary-green, #1CFF69);
}

p {
  color: var(--primary-black, #2f2f27);
}

li {
  list-style: none;
}

.matched-radius {
  --matched-radius-padding: 8px;
  --matched-radius-inner-size: 12px;

  /* padding: var(--matched-radius-padding); */
  border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding));
}

.matched-radius__inner {
  border-radius: var(--matched-radius-inner-size);
}


@media screen and (min-width: 768px) {
  .topicHeading {
    text-align: center;
    color: var(--primary-black, #2f2f27);
  }

  .topic {
    font-family: "darker-grotesque", sans-serif;
    font-size: 4vw;
    font-weight: 600;
    line-height: 0.4;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 10px;
    color: var(--primary-black, #2f2f27);
  }

  .topic__ja {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1;
    letter-spacing: 0.07em;
    position: relative;
    color: var(--primary-black, #2f2f27);
  }

  .newsTopicHeading,
  .massegeTopHeading {
    text-align: left;
    color: var(--primary-black, #2f2f27);
    margin-bottom: 4.1vw;
  }

  .n__topic,
  .m__topic {
    font-family: "darker-grotesque", sans-serif;
    font-size: 4vw;
    font-weight: 600;
    line-height: 0.4;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 10px;
    color: var(--primary-black, #2f2f27);
  }

  .n__topic__ja,
  .m__topic__ja {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1;
    letter-spacing: 0.07em;
    position: relative;
    color: var(--primary-black, #2f2f27);
  }

  .none {
    display: none;
  }

  a {
    color: var(--primary-black, #2f2f27);
    text-decoration: none;
  }

  ::selection {
    color: #fff;
    background-color: var(--primary-green, #1CFF69);
  }

  p {
    color: var(--primary-black, #2f2f27);
  }

  li {
    list-style: none;
  }

  .matched-radius {
    --matched-radius-padding: 8px;
    --matched-radius-inner-size: 12px;

    /* padding: var(--matched-radius-padding); */
    border-radius: calc(var(--matched-radius-inner-size) + var(--matched-radius-padding));
  }

  .matched-radius__inner {
    border-radius: var(--matched-radius-inner-size);
  }
}



.br-sp {
  display: block;
}
.pagination {
  display: none;
}


@media screen and (min-width: 768px) {
  .br-sp {
    display: none;
  }
  .pagination {
    display: block;
  }
}