@charset "UTF-8";

.hero {
  position: relative;
  padding-top: 30px;
}

.hero .news-item-header {
  display: flex;
}

.hero .news-item-date {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.45;
}

.hero .news-item-categories {
  display: flex;
  gap: 8px;
  border-left: solid 1px #08287F;
  padding-left: 10px;
  margin-left: 10px;
}

.hero .news-item-categories span {
  margin-top: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.45;
}

.content {
  width: 84vw;
  margin-left: auto;
  margin-right: auto;
}

.content-inner a {
  display: inline;
  color: #08287F;
}

.content-block:not(:first-child) {
  padding-top: 50px;
  border-top: 1px solid #CCCCCC;
}

.content-block a {
  text-decoration: underline;
  transition: color 500ms ease;
}

.content-block-list {
  padding: 30px 4vw;
  background: #F0F0F0;
}

.content-block-list .content-block-list-box {
  gap: 26px;
}

.content-block-list-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-block-list-box li {
  position: relative;
  padding-left: 28px;
}

.content-block-list-box li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
  color: #08287F;
}

.content-block-note {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.content-block-note li {
  display: flex;
}

.content-block-note li div:first-child {
  width: 28px;
}

.content-block-note li div:last-child {
  width: calc(100% - 28px);
}

.content-block-note li a {
  color: #08287F;
  text-decoration: underline;
  transition: color 500ms ease;
}

.content-block-attention {
  padding: 30px 8vw;
  border: 1px solid #FF0000;
}

.content-block .qr {
  max-width: 112px;
}

@media screen and (min-width: 768px) {
  .hero {
    padding-top: 58px;
  }

  .hero .news-item-date {
    font-size: 14px;
  }

  .hero .news-item-categories {
    padding-left: 20px;
    margin-left: 20px;
  }

  .hero .news-item-categories span {
    font-size: 14px;
  }

  .content {
    width: 84%;
    max-width: 728px;
  }

  .content-block-list {
    padding: 30px 7.69231%;
  }

  .content-block-attention {
    padding: 30px 7.69231%;
  }

  .content-block-2col {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    justify-content: space-between;
  }
}

@media (hover: hover) {
  .content-block a:hover {
    color: #4B76D2;
  }

  .content-block-note li a:hover {
    color: #4B76D2;
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .content-block a:hover {
    color: #4B76D2;
  }

  .content-block-note li a:hover {
    color: #4B76D2;
  }
}