.column_container {
  max-width      : 1406px;
  margin         : 0 auto;
  padding        : 72px 40px;
  display        : flex;
  justify-content: space-between;
  column-gap     : 40px;
}

.column_container--content {
  max-width: 822px;
  width    : 100%;
}

.column_container--sidebar {
  max-width: 350px;
  width    : 100%;
}

.column_container--content_title {
  font-size  : 32px;
  font-weight: 500;
  line-height: 1.2;
  color      : #000000;
}

.column_container--content_meta {
  margin-top     : 30px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  column-gap     : 20px;
}

.column_container--content_meta-info {
  display        : flex;
  align-items    : center;
  column-gap     : 20px;
  justify-content: flex-start;

  span {
    display    : flex;
    align-items: center;
    column-gap : 4px;
    font-size  : 13px;
  }
}

.column_container--content_meta-social {
  display       : flex;
  align-items   : center;
  flex-direction: row;
  column-gap    : 3px;

  span {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 45px;
    height          : 45px;
    background-color: #F5F5F5;
    font-size       : 20px;
  }
}

.column_container--content_main-image {
  margin-top  : 30px;
  width       : 100%;
  aspect-ratio: 885 / 600;

  img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
  }
}

.column_container--content_main-lead {
  margin-top: 36px;
}

.column_container--content_main-lead-text {
  font-size  : 16px;
  line-height: 1.8;
}

.column_container--content_index {
  margin-top: 50px;
  padding   : 40px;
  border    : 1px solid #707070;
}

.column_container--content_index_title {
  font-size  : 22px;
  font-weight: 500;
  line-height: 1.2;
  color      : #000000;
  position   : relative;

  &::after {
    content         : "";
    position        : absolute;
    left            : -18px;
    top             : 43%;
    transform       : translateY(-50%);
    height          : 26px;
    width           : 5px;
    background-color: #1D2088;
  }
}

.column_container--content_index_list {
  margin-top    : 32px;
  display       : flex;
  flex-direction: column;
  row-gap       : 8px;

  li {
    font-size  : 16px;
    line-height: 1.5;
    font-weight: 500;
    list-style : disc;
    margin-left: 16px;
  }
}

.column_container--content-main {
  margin-bottom: 80px;
}

.column_container--content_main-content {
  h2 {
    margin-top  : 100px;
    font-size   : 22px;
    font-weight : 500;
    line-height : 1.5;
    padding-left: 18px;
    position    : relative;

    &::after {
      content         : "";
      position        : absolute;
      left            : 0;
      top             : 43%;
      transform       : translateY(-50%);
      height          : 26px;
      width           : 5px;
      background-color: #1D2088;
    }

    &:first-of-type {
      margin-top: 60px;
    }
  }

  .content-image {
    margin-top: 32px;
    max-width : 100%;

    &.aligncenter {
      margin-left : auto;
      margin-right: auto;
    }
  }

  p {
    margin-top : 30px;
    font-size  : 16px;
    line-height: 1.8;
  }
}

.column_summary {
  margin-top      : 50px;
  padding         : 60px 80px;
  border          : 1px solid #707070;
  background-color: #F5F5F5;
}

.column_summary_text {
  font-size  : 16px;
  line-height: 1.8;
  margin-top : 27px;
}

.post-pagination {
  margin-top     : 80px;
  display        : flex;
  justify-content: space-between;

  >div {
    min-width : 85px;
    width     : auto;
    text-align: center;

    a {
      font-weight  : 700;
      width        : 160px;
      text-align   : center;
      display      : block;
      padding      : 10px 20px 7px;
      border       : 1px solid #707070;
      border-radius: 50px;

      i {
        color: #1D2088;
      }
    }
  }
}

.column_recommend {
  width    : 100%;
  max-width: 1306px;
  margin   : 0 auto;
}

.column_recommend-container {
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 22px;
  font-weight     : 700;
  border          : 1px solid #707070;
  background-color: #F1F8FE;
  min-height      : 340px;
}

.column_CTA {
  max-width    : 1386px;
  margin       : 80px auto 0;
  padding-left : 40px;
  padding-right: 40px;
}

.column_CTA_title {
  font-size    : 22px;
  font-weight  : 700;
  line-height  : 1.5;
  border-bottom: 1px solid #707070;
  position     : relative;

  &::after {
    content         : "";
    position        : absolute;
    left            : 0;
    bottom          : -2px;
    width           : 270px;
    height          : 5px;
    background-color: #1D2088;
  }
}

.column_CTA_text {
  margin-top   : 24px;
  margin-bottom: 24px;
  font-size    : 16px;
  line-height  : 1.8;
  font-size    : 18px;
  font-weight  : 700;

  a {
    text-decoration: underline !important;
    color          : #1D2088;

    &:hover {
      text-decoration: none !important;
    }
  }
}

/* MARK:右カラム */
.column_container--sidebar_title {
  font-size  : 22px;
  font-weight: 700;
  line-height: 1.5;
  position   : relative;

  &::after {
    content         : "";
    position        : absolute;
    left            : 0;
    bottom          : -2px;
    width           : 110px;
    height          : 3px;
    background-color: #1D2088;

  }

  &+ul {
    padding         : 30px 17px;
    border-top      : #1D2088 1px solid;
    background-color: #F5F5F5;
    display         : flex;
    flex-direction  : column;
    row-gap         : 30px;
    margin-bottom   : 56px;

    li {
      a {
        display    : flex;
        align-items: flex-start;
        column-gap : 7px;
        line-height: 1.5;

        &:hover {
          text-decoration: underline !important;
        }

        img {
          width     : 77px;
          height    : 77px;
          object-fit: cover;
        }

        .date {
          font-weight: 700;
        }
      }
    }
  }
}

.column_container--sidebar-popular-item {
  position: relative;
}

.column_container--sidebar-popular-rank {
  position        : absolute;
  left            : 0;
  top             : 0;
  width           : 36px;
  height          : 36px;
  transform       : translateY(-50%);
  border-radius   : 50%;
  background-color: #004996;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 16px;
  font-weight     : 700;
  color           : #FFFFFF;
}

.column_container--sidebar-popular-item {
  &:nth-of-type(2) .column_container--sidebar-popular-rank {
    background-color: #4A94E2;
  }

  &:nth-of-type(3) .column_container--sidebar-popular-rank {
    background-color: #A7D2FF;
  }
}

.column_container--sidebar-tags-list {
  flex-direction: row !important;
  flex-wrap     : wrap;
  gap           : 14px;

  a {
    display: inline-block;
    width  : auto;

    &:hover {
      text-decoration: underline !important;
    }
  }
}

.column_container--sidebar-category {
  ul {
    background-color: transparent;
    padding-left    : 0;
    padding-right   : 0;
    row-gap         : 3px;

    li {
      background-color: #f5f5f5;
      padding         : 20px;

      a {
        &:hover {
          text-decoration: underline !important;
        }
      }
    }
  }
}

/* MARK:一覧ページ用 */

.column_container--archive-title {
  font-size    : 30px;
  font-weight  : 500;
  position     : relative;
  border-bottom: #1D2088 1px solid;
  line-height  : 1.5;

  &::after {
    content         : "";
    position        : absolute;
    left            : 0;
    bottom          : -3px;
    width           : 110px;
    height          : 5px;
    background-color: #1D2088;
  }
}

.column_container--archive-list {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top           : 51px;
  column-gap           : 8%;
  row-gap              : 60px;
}

.column_container--archive-item {
  display           : grid;
  grid-template-rows: subgrid;
  grid-row          : span 4;
  row-gap           : 0;

}

.column_container--archive-item-thumbnail {
  width       : 100%;
  height      : 100%;
  aspect-ratio: 403 / 331;
  object-fit  : cover;
}

.column_container--archive-item-meta {
  display        : flex;
  justify-content: space-between;
  margin-top     : 30px;

  .date {
    font-size: 20px;
  }

  .category {
    font-size: 18px;
    color    : #ACACAC;
  }
}

.column_container--archive-item-title {
  margin-top : 16px;
  font-size  : 20px;
  font-weight: 700;
  line-height: 1.5;
  min-height : 2em;
}

.column_container--archive-item-tags {
  margin-top: 13px;
  display   : flex;
  gap       : 5px;
  flex-wrap : wrap;

  .tag {
    font-size       : 15px;
    padding         : 2px 8px 1px;
    background-color: #231815;
    color           : #FFFFFF;
  }
}

.column_container--archive-item--latest {
  grid-column: span 2;
  position   : relative;
  grid-row   : span 1;

  .column_container--archive-item-thumbnail-wrapper {
    position: relative;

    &::after {
      content         : '';
      position        : absolute;
      left            : 0;
      top             : 0;
      width           : 100%;
      height          : 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }

  }

  .column_container--archive-item-thumbnail {
    aspect-ratio: 882 / 593;
  }

  .column_container--archive-item-meta {
    flex-wrap      : wrap;
    align-items    : baseline;
    justify-content: flex-start;
    column-gap     : 13px;

    .date {
      width      : 100%;
      font-weight: 700;
      font-size  : 20px;
    }

    .category {
      color      : #fff;
      font-weight: 700;
      font-size  : 24px;
    }

    .tag {
      background-color: transparent;
      font-size       : 18px;
    }
  }

  .column_container--archive-item-title {
    font-size: 30px;
  }

  .column_container--archive-item-more {
    font-size: 20px;
    color    : #FFFFFF;

    &::before {
      content     : '';
      display     : inline-block;
      width       : 10px;
      height      : 10px;
      border-top  : 4px solid #FFFFFF;
      border-right: 4px solid #FFFFFF;
      transform   : rotate(45deg);
      margin-right: 14px;
    }
  }

}

.column_container--archive-item--latest_content {
  position     : absolute;
  left         : 5.7%;
  top          : 50%;
  transform    : translateY(-50%);
  color        : #FFFFFF;
  padding-right: 30px;

  .column_container--archive-item-meta {
    margin-top: 0;
  }
}

.column_container--pickup-content {
  width    : 100%;
  max-width: 100%;
}

.column_container--pickup-list {
  grid-template-columns: repeat(3, 1fr);

  .column_container--pickup-item--latest {
    grid-column          : span 3;
    display              : grid;
    grid-template-columns: 1fr 1fr;
    column-gap           : 60px;
    grid-row             : span 1;

    .column_container--pickup-item-thumbnail {
      width       : 100%;
      height      : 100%;
      aspect-ratio: 882 / 593;
      object-fit  : cover;
    }

    .column_container--pickup-item-thumbnail-wrapper {
      position: relative;
    }

    .column_container--pickup-item-label {
      content         : '';
      position        : absolute;
      left            : 0;
      top             : 0;
      width           : 123px;
      height          : 64px;
      background-color: #fff;
      color           : #333;
      display         : flex;
      align-items     : center;
      justify-content : center;
      font-size       : 22px;
      border          : 1px solid #707070;
      font-weight     : 700;
    }

    .column_container--pickup-item--latest_content {
      display       : flex;
      flex-direction: column;
      padding-bottom: 30px;
    }

    .column_container--pickup-item-meta {
      flex-wrap      : wrap;
      align-items    : baseline;
      justify-content: flex-start;

      .date {
        width    : 100%;
        font-size: 20px;
      }

      .category {
        font-size   : 24px;
        font-weight : 700;
        margin-right: 14px;
        color       : #000000;
      }

      .tag {
        background-color: #231815;
        color           : #FFFFFF;
        padding         : 2px 8px 1px;
        font-size       : 15px;
        margin-right    : 2px;
      }
    }

    .column_container--archive-item-more {
      font-size : 20px;
      margin-top: auto;

      &::before {
        content     : '';
        display     : inline-block;
        width       : 10px;
        height      : 10px;
        border-top  : 4px solid #000000;
        border-right: 4px solid #000000;
        transform   : rotate(45deg);
        margin-right: 14px;
      }
    }
  }

}

.column-archive_pagination {
  display        : flex;
  justify-content: center;
  margin-top     : 40px;
  column-gap     : 24px;

  .page-numbers {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    height         : 52px;
    font-size      : 18px;
  }

  .current {
    font-weight: 700;
  }

  .next,
  .prev {
    width : 52px;
    border: 1px solid #707070;
  }
}

.column-archive_recommend {
  padding: 0 40px;

  .column-archive_recommend-container {
    width    : 100%;
    max-width: 1306px;
    margin   : 0 auto;
  }

  .solution_item {
    border       : 1px solid #ccc;
    padding      : 40px;
    margin-bottom: 40px;
  }

  .solution_item h3.title {
    font-size    : 24px;
    margin-bottom: 20px;
  }

  .solution_item .item_box {
    display        : flex;
    justify-content: flex-start;
    align-items    : flex-start;
    flex-wrap      : wrap;
  }

  .solution_item .item_box .item_image {
    border-radius: 10px;
    overflow     : hidden;
    width        : 300px;
  }

  .solution_item .item_box .item_image img {
    object-fit: cover;
    width     : 100%;
    height    : 100%;
    display   : block;
  }

  .solution_item .item_box .item_image a {
    display: block;
    width  : 100%;
    height : 100%;
  }

  .solution_item .item_box .item_image a:hover {
    opacity: 0.6;
  }

  .solution_item .item_box .item_content {
    flex        : 1;
    padding-left: 30px;
  }

  .solution_item .item_box ul.tag {
    margin-bottom: 10px;
  }

  .solution_item .item_box ul.tag li {
    display      : inline-block;
    margin-right : 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    background   : #f0f0f0;
    color        : #333;
    text-align   : center;
    width        : 220px;
    padding      : 5px 10px;
  }

  .solution_item .item_box p.sub_title {
    color        : #1d2088;
    line-height  : 1.7;
    font-size    : 18px;
    font-weight  : bold;
    margin-bottom: 20px;
  }

  .solution_item .item_box ul.list {
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    flex-wrap      : wrap;
    margin-bottom  : 28px;
  }

  .solution_item .item_box ul.list li {
    width          : auto;
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    padding-right  : 20px;
  }

  .solution_item .item_box ul.list li span.icon {
    width          : 70px;
    height         : 70px;
    border-radius  : 100vmax;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    background     : rgb(190, 2, 11);
    background     : linear-gradient(138deg,
        rgba(190, 2, 11, 1) 0%,
        rgba(116, 11, 75, 1) 100%);
    margin-right: 16px;
  }

  .solution_item .item_box ul.list li span.icon img {
    width: 35px;
  }

  .solution_item .item_box ul.list li p {
    flex       : 1;
    line-height: 1.6;
    font-size  : 14px;
  }

  .solution_item .item_box .item_box_footer {
    display        : flex;
    justify-content: space-between;
  }

  .solution_item .item_box .item_box_footer .thumb {
    display        : flex;
    justify-content: space-between;
    margin-right   : 26px;
    width          : 345px;
  }

  .solution_item .item_box .item_box_footer .thumb .thumb_image {
    width: 180px;
  }

  .solution_item .item_box .item_box_footer .thumb .thumb_txt {
    flex       : 1;
    font-weight: bold;
    line-height: 1.6;
    font-size  : 16px;
    text-align : left;
  }

  .solution_item .item_box .item_box_footer .content_txt {
    flex: 1;
  }

  .solution_item .item_box .item_box_footer .content_txt a {
    display    : block;
    line-height: 1.7;
    font-size  : 16px;
  }

  .solution_item .item_box .item_box_footer .content_txt a>div {
    text-align : right;
    padding-top: 10px;
  }

  .solution_item .item_box .item_box_footer .content_txt a>div>span {
    text-decoration: underline;
  }
}

/* 「さらに見る」ボタンスタイル */
.load-more-container {
  text-align: center;
  margin-top: 40px;
  display   : none;
  /* デフォルトは非表示、JSで制御 */
}

.load-more-btn {
  display         : inline-block;
  padding         : 12px 40px;
  font-size       : 16px;
  font-weight     : 700;
  color           : #1D2088;
  background-color: #fff;
  border          : 2px solid #1D2088;
  border-radius   : 50px;
  cursor          : pointer;
  transition      : all 0.3s ease;

  &:hover {
    background-color: #1D2088;
    color           : #fff;
  }

  &:active {
    transform: scale(0.98);
  }

  &:disabled {
    opacity: 0.6;
    cursor : not-allowed;
  }
}

.loading-spinner {
  display   : none;
  font-size : 16px;
  color     : #666;
  margin-top: 12px;
}

@media screen and (max-width: 960px) {
  .load-more-container {
    display: block;
  }

  .column_container {
    flex-direction: column;
    padding       : 40px 20px;
  }

  .column_container--content {
    max-width: 100%;
    width    : 100%;
  }

  .column_container--sidebar {
    max-width    : 100%;
    width        : 100%;
    margin-bottom: 40px;
    margin-top   : 80px;
  }

  .column-archive_pagination {
    display: none;
  }

  .column_container--archive-item-meta {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 0;

    .category {
      font-size: 13px;
    }
  }

  .column_container--archive-item--latest {
    .column_container--archive-item-title {
      font-size: 22px;
    }

    .column_container--archive-item-tags {
      margin-top: 3px;
    }
  }

  .column_container--archive-item-thumbnail {
    aspect-ratio: 882 / 593;
    height: auto;
  }

  .column_container--sidebar-category {
    ul {
      margin-bottom: 30px;
    }
  }

  .column-archive_recommend {
    padding: 0 16px;

    .solution_item {
      border       : 1px solid #ccc;
      padding      : 24px 12px;
      margin-bottom: 40px;
    }

    .solution_item h3.title {
      font-size    : 20px;
      line-height  : 1.5;
      margin-bottom: 20px;
    }

    .solution_item .item_box ul.list {
      justify-content: center;
    }

    .solution_item .item_box .item_image {
      width: 100%;
    }

    .solution_item .item_box .item_content {
      flex        : 1;
      padding-left: 0;
      margin-top  : 20px;
    }

    .solution_item .item_box ul.tag li {
      margin-right: 5px;
      width       : 47%;
      padding     : 5px 7px;
      font-size   : 14px;
    }

    .solution_item .item_box ul.list li {
      padding-right  : 0;
      padding-bottom : 10px;
      width          : 33%;
      justify-content: center;
    }

    .solution_item .item_box .item_box_footer {
      flex-direction: column;
    }

    .solution_item .item_box .item_box_footer .thumb {
      margin-right : 0;
      width        : 100%;
      margin-bottom: 30px;
      display      : block;
    }

    .solution_item .item_box .item_box_footer .thumb .thumb_image {
      width : 90%;
      margin: 0 auto;
    }

  }

}

@media screen and (max-width: 600px) {
  .column_container--archive-list {
    grid-template-columns: 1fr;
  }

  .post-pagination {
    .back-to-list {
      display: none;
    }

    a {
      font-size: 14px;
      width    : 140px !important;
    }
  }

  .column_container--archive-item--latest {
    grid-column: span 1;
    .column_container--archive-item-meta {
      .date {
        font-size: 14px;

      }
      .category {
        font-size: 16px;
      }
    }
    .column_container--archive-item-tags {
      gap: 1px;
      .tag {
        font-size: 12px;
      }
    }
    .column_container--archive-item-title {
      font-size: 20px;
    }
    .column_container--archive-item-more {
      font-size: 16px;
      &::before {
        border-right: 2px solid #fff;
        border-top: 2px solid #fff;
      }
    }
  }

  .column_container--pickup-list {
    row-gap: 30px;

    .column_container--pickup-item--latest {
      grid-template-columns: 1fr;
      grid-row             : span 2;
      grid-column          : span 1;
    }
  }

  .column_summary {
    padding: 30px 20px;
  }

  iframe {
    width: 100%;
  }
}