@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* nomal */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: normal;
  src: url("../font/notoserif/NotoSerifJP-Regular.woff2") format("woff2");
  font-display: swap;
}
/* 300 */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 300;
  src: url("../font/notoserif/NotoSerifJP-Light.woff2") format("woff2");
  font-display: swap;
}
/* 400*/
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 400;
  src: url("../font/notoserif/NotoSerifJP-Regular.woff2") format("woff2");
  font-display: swap;
}
/* 500 */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 500;
  src: url("../font/notoserif/NotoSerifJP-Medium.woff2") format("woff2");
  font-display: swap;
}
/* 600*/
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 600;
  src: url("../font/notoserif/NotoSerifJP-Bold.woff2") format("woff2");
  font-display: swap;
}
.c-mv {
  background: var(--c-light) url("../images/top/mv.webp") no-repeat center/cover;
  aspect-ratio: 1440/920;
  border-bottom: 1rem solid var(--c-red);
}
.c-mv .l-container {
  height: 100%;
  position: relative;
}

.c-mv__copy--wrap {
  position: absolute;
  right: 0;
  top: 6.6rem;
}

.c-mv__copy {
  font-family: var(--f-sans);
  font-size: var(--c-fs-h1);
  font-weight: var(--c-fw-semibold);
  line-height: var(--c-lh-medium);
  display: inline;
  padding: 0.1em 0.2em;
  background: rgba(255, 255, 255, 0.8980392157);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.85;
}

.c-mv__lead {
  font-family: var(--f-sans);
  font-size: var(--c-fs-main-big);
  font-weight: var(--c-fw);
  line-height: var(--c-lh-heading);
  font-weight: 600;
  position: absolute;
  left: 0;
  bottom: 6.4rem;
}

.c-contentLink {
  padding: 10rem 0;
}

.c-contentLink__grid {
  max-width: 72rem;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem;
}

.c-contentLink__item {
  max-width: 33rem;
  text-align: center;
  color: var(--c-black);
  border: 0.5rem solid var(--c-blue);
}

.c-contentLink__thumb {
  position: relative;
}

.c-contentLink__title {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: var(--f-sans);
  font-size: var(--c-fs-h3);
  font-weight: var(--c-fw-medium);
  line-height: var(--c-lh-heading);
  color: var(--c-white);
}

.c-contentLink__body {
  padding: 2rem;
}

.c-contentLink__text {
  margin-bottom: 2.4rem;
  font-family: var(--f-sans);
  font-size: var(--c-fs-main-big);
  font-weight: var(--c-fw);
  line-height: var(--c-lh-heading);
}

.c-topics {
  background-color: var(--c-bg-light-blue);
  padding: 5rem 0 8rem;
}

.c-topics__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--c-white);
  border-radius: 1rem;
  padding: 0.8rem 2rem;
  color: var(--c-black);
  gap: 1.2rem;
}
.c-topics__item + .c-topics__item {
  margin-top: 4rem;
}

.c-topics__date {
  width: 8.4rem;
  color: var(--c-light-gray);
  padding-top: 0.2rem;
}

.c-topics__text {
  font-family: var(--f-sans);
  font-size: var(--c-fs-main-big);
  font-weight: var(--c-fw);
  line-height: var(--c-lh-heading);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media (751px <= width < 1440px) {
  .c-mv__copy--wrap {
    right: 1.5rem;
    top: 4.5833333333vw;
  }
  .c-mv__copy {
    font-size: 3.3333333333vw;
  }
  .c-mv__lead {
    left: 1.5rem;
    bottom: 4.4444444444vw;
    font-size: 1.3888888889vw;
  }
}
@media (width < 830px) {
  .c-contentLink__grid {
    gap: 6rem 3rem;
  }
  .c-contentLink__text {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 750px) {
  .c-mv {
    aspect-ratio: 375/781;
    background-image: url("../images/top/sp-mv.webp");
    background-size: 100%;
    background-position: top center;
  }
  .c-mv__copy--wrap {
    right: initial;
    left: 1.5rem;
    top: 18.8rem;
  }
  .c-mv__copy {
    font-family: var(--f-sans);
    font-size: var(--c-fs-h4);
    font-weight: var(--c-fw-medium);
    line-height: var(--c-lh-heading);
    line-height: 1.85;
  }
  .c-mv__lead {
    font-size: 1.8rem;
    left: 2rem;
    bottom: 6.1rem;
  }
  .c-contentLink {
    padding: 8rem 0;
  }
  .c-contentLink__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 5rem;
  }
  .c-contentLink__thumb img {
    width: 100%;
  }
  .c-contentLink__text {
    font-family: var(--f-sans);
    font-size: var(--c-fs-main-big);
    font-weight: var(--c-fw);
    line-height: var(--c-lh-heading);
  }
  .c-topics {
    padding: 5rem 0 6.2rem;
  }
  .c-topics__item a {
    padding: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-color: transparent;
  }
  .c-topics__item + .c-topics__item {
    margin-top: 2rem;
  }
  .c-topics__text {
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    width: 100%;
    background-color: var(--c-white);
    border-radius: 1rem;
    padding: 0.8rem 1.2rem;
    font-family: var(--f-sans);
    font-size: var(--c-fs-main);
    font-weight: var(--c-fw);
    line-height: var(--c-lh-medium);
  }
}