@charset "UTF-8";
/* Scss Document */
/* Scss Document */
.blogPage {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif; }
  .blogPage .pageHeading__image img {
    object-position: center; }

.blogLayout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: calc(100% - 80px);
  max-width: 1440px;
  margin: 86px auto 0; }

.blogCategory {
  display: inline-block;
  padding: 2px 5px;
  color: #FFF;
  background-color: #173e43;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap; }

.blogList {
  flex: 1;
  min-width: 0; }
  .blogList__upper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px; }
  .blogList__title {
    padding-left: 13px;
    border-left: 4px solid #004ca1;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3; }
  .blogList__count {
    font-size: 1rem; }
  .blogList__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 20px;
    margin: 0;
    padding: 0;
    list-style: none; }
  .blogList__item {
    min-width: 0; }
  .blogList__photo {
    display: block;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #000; }
    .blogList__photo img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      transition: opacity 0.3s ease; }
    .blogList__photo:hover img, .blogList__photo:focus-visible img {
      opacity: 0.75; }
    .blogList__photo .blogCategory {
      position: absolute;
      top: 0;
      right: 0; }
  .blogList__name {
    margin-top: 14px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere; }
    .blogList__name a:link, .blogList__name a:visited {
      color: #000; }
    .blogList__name a:hover, .blogList__name a:focus-visible {
      color: #004ca1;
      text-decoration: underline;
      text-underline-offset: 4px; }
  .blogList__date {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5; }

.blogPagination {
  margin-top: 50px;
  font-family: "Barlow", sans-serif; }
  .blogPagination__list {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none; }
    .blogPagination__list a,
    .blogPagination__list span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      box-sizing: border-box;
      border-radius: 50%;
      color: #004ca1;
      font-size: 1.125rem; }
    .blogPagination__list a:hover,
    .blogPagination__list a:focus-visible {
      background-color: #f2f7fb;
      text-decoration: none; }
  .blogPagination__list .blogPagination__current {
    color: #FFF;
    background-color: #004ca1; }
  .blogPagination__arrow {
    position: relative; }
    .blogPagination__arrow::before {
      content: '';
      width: 5px;
      height: 5px;
      border-top: 1px solid currentColor;
      border-left: 1px solid currentColor;
      transform: rotate(-45deg); }
    .blogPagination__arrow--next::before {
      transform: rotate(135deg); }

.blogSidebar {
  flex: 0 0 300px; }
  .blogSidebar__box {
    padding: 32px 20px 40px;
    background-color: #f2f7fb; }
    .blogSidebar__box + .blogSidebar__box {
      margin-top: 40px; }
  .blogSidebar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 22px;
    color: #004ca1;
    font-size: 1.25rem;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    line-height: 1.2; }
    .blogSidebar__title img {
      object-fit: contain; }
  .blogSidebar__list {
    margin: 0;
    padding: 0;
    list-style: none; }
  .blogSidebar__anchor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #FFF;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.3s ease; }
    .blogSidebar__anchor:link, .blogSidebar__anchor:visited {
      color: #000; }
    .blogSidebar__anchor:hover, .blogSidebar__anchor:focus-visible {
      background-color: #d0ecfc;
      text-decoration: none; }
    .blogSidebar__anchor[aria-current] {
      color: #FFF;
      background-color: #004ca1; }
      .blogSidebar__anchor[aria-current] .blogSidebar__count {
        color: #FFF;
        background-color: #00a8e0; }
  .blogSidebar__count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #004ca1;
    background-color: #f2f7fb;
    font-size: 1rem;
    font-family: "Barlow", sans-serif; }
  .blogSidebar__select {
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid #BBB;
    border-radius: 0;
    box-sizing: border-box;
    color: #000;
    background-color: #FFF;
    font-size: 1rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    cursor: pointer; }

@media (max-width: 1000px) {
  .blogSidebar {
    flex-basis: 260px; }
    .blogSidebar__anchor {
      padding-right: 12px;
      padding-left: 12px;
      font-size: 0.875rem; } }

@media (max-width: 700px) {
  .blogSidebar {
    width: 100%;
    flex-basis: auto; }
    .blogSidebar__box + .blogSidebar__box {
      margin-top: 25px; } }

.blogDetail {
  flex: 1;
  min-width: 0; }
  .blogDetail__header {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 54px;
    margin-top: -7px;
    padding-bottom: 18px;
    border-bottom: 1px solid #DDD; }
  .blogDetail__category {
    flex-shrink: 0; }
  .blogDetail__title {
    flex: 1;
    min-width: 0;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere; }
  .blogDetail__date {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap; }
  .blogDetail .system-free {
    height: auto;
    margin-top: 60px;
    overflow: auto;
    color: #000;
    background-color: #FFF;
    font-size: 1.125rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    font-weight: 500;
    line-height: 2;
    overflow-wrap: anywhere; }
    .blogDetail .system-free p,
    .blogDetail .system-free li,
    .blogDetail .system-free dt,
    .blogDetail .system-free dd,
    .blogDetail .system-free th,
    .blogDetail .system-free td,
    .blogDetail .system-free figcaption,
    .blogDetail .system-free blockquote {
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit; }
    .blogDetail .system-free p,
    .blogDetail .system-free ul,
    .blogDetail .system-free ol,
    .blogDetail .system-free dl,
    .blogDetail .system-free figure,
    .blogDetail .system-free table,
    .blogDetail .system-free blockquote {
      margin: 0 0 1.5em; }
    .blogDetail .system-free > :last-child {
      margin-bottom: 0; }
    .blogDetail .system-free ul,
    .blogDetail .system-free ol {
      padding-left: 1.5em; }
    .blogDetail .system-free figure,
    .blogDetail .system-free blockquote {
      margin-right: 0;
      margin-left: 0; }
    .blogDetail .system-free h3,
    .blogDetail .system-free h4,
    .blogDetail .system-free h5,
    .blogDetail .system-free h6 {
      margin: 1.5em 0 0.75em;
      font-family: inherit;
      font-weight: 700;
      line-height: 1.6; }
    .blogDetail .system-free h3 {
      font-size: 1.5rem; }
    .blogDetail .system-free h4,
    .blogDetail .system-free h5,
    .blogDetail .system-free h6 {
      font-size: 1.25rem; }
    .blogDetail .system-free a {
      text-decoration: underline;
      text-underline-offset: 3px; }
      .blogDetail .system-free a:link, .blogDetail .system-free a:visited {
        color: #004ca1; }
      .blogDetail .system-free a:hover, .blogDetail .system-free a:focus-visible {
        color: #00aaa5; }
    .blogDetail .system-free img,
    .blogDetail .system-free video,
    .blogDetail .system-free iframe {
      max-width: 100%; }
    .blogDetail .system-free img,
    .blogDetail .system-free video {
      height: auto; }
    .blogDetail .system-free table {
      width: 100%;
      border-collapse: collapse; }
    .blogDetail .system-free th,
    .blogDetail .system-free td {
      padding: 12px;
      border: 1px solid #DDD;
      text-align: left; }
    .blogDetail .system-free th {
      background-color: #f2f7fb; }
    .blogDetail .system-free hr {
      margin: 2em 0;
      border-top-color: #DDD; }
  .blogDetail .system-free .blogDetail__photo {
    width: 450px;
    max-width: 100%;
    margin: 0 auto 50px; }
    .blogDetail .system-free .blogDetail__photo img {
      display: block;
      width: 100%;
      height: auto; }
  .blogDetail__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 80px; }
  .blogDetail__nav--previous, .blogDetail__nav--back, .blogDetail__nav--next {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none; }
    .blogDetail__nav--previous:link, .blogDetail__nav--previous:visited, .blogDetail__nav--back:link, .blogDetail__nav--back:visited, .blogDetail__nav--next:link, .blogDetail__nav--next:visited {
      color: #000; }
    .blogDetail__nav--previous:hover, .blogDetail__nav--previous:focus-visible, .blogDetail__nav--back:hover, .blogDetail__nav--back:focus-visible, .blogDetail__nav--next:hover, .blogDetail__nav--next:focus-visible {
      color: #004ca1;
      text-decoration: underline;
      text-underline-offset: 4px; }
  .blogDetail__nav--previous {
    justify-self: start; }
  .blogDetail__nav--back {
    justify-self: center; }
  .blogDetail__nav--next {
    justify-self: end; }

.blogMain--detail .breadcrumb {
  margin-top: 90px; }

@media (max-width: 1000px) {
  .blogLayout {
    gap: 25px; }
  .blogList__items {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blogDetail__header {
    flex-wrap: wrap;
    gap: 10px 20px; }
  .blogDetail__date {
    width: 100%;
    text-align: right; }
  .blogDetail__title {
    font-size: 1.875rem; } }

@media (max-width: 700px) {
  .blogLayout {
    flex-direction: column;
    gap: 50px;
    width: calc(100% - 40px);
    margin-top: 55px; }
  .blogList,
  .blogDetail {
    width: 100%; }
  .blogList__title {
    font-size: 1.125rem; }
  .blogList__name {
    font-size: 1.125rem; }
  .blogList__date {
    font-size: 0.875rem; }
  .blogCategory {
    font-size: 0.75rem; }
  .blogDetail__header {
    margin-top: 0;
    column-gap: 16px; }
  .blogDetail__title {
    font-size: 1.75rem; }
  .blogDetail__date {
    font-size: 0.875rem; }
  .blogDetail .system-free {
    margin-top: 35px;
    font-size: 1rem; }
  .blogDetail .system-free .blogDetail__photo {
    margin-bottom: 30px; }
  .blogDetail__nav {
    gap: 8px;
    margin-top: 55px; }
  .blogDetail__nav--previous, .blogDetail__nav--back, .blogDetail__nav--next {
    font-size: 0.8125rem; } }

@media (max-width: 480px) {
  .blogList__items {
    grid-template-columns: 1fr; } }

@media (max-width: 380px) {
  .blogDetail__nav {
    grid-template-columns: 1fr 1fr; }
  .blogDetail__nav--back {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 10px; } }

@media (prefers-reduced-motion: reduce) {
  .innerPage {
    animation: none; }
    .innerPage *,
    .innerPage *::before,
    .innerPage *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto; } }