@charset "UTF-8";

.arc-section {
  padding: 70px 5% 180px;
}
.arc-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.arc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
  list-style: none;
  margin-bottom: 44px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: #8fa0af;
}
.arc-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.55em;
  color: #c6d0d8;
}
.arc-breadcrumb a {
  color: #8fa0af;
  text-decoration: none;
  transition: color 0.3s ease;
}
.arc-breadcrumb a:hover {
  color: #E00000;
}

.arc-filter {
  margin-bottom: 46px;
}
.arc-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.arc-filter a {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid #dfe5ea;
  border-radius: 100px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: #5a6672;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.arc-filter a:hover {
  border-color: #002842;
  color: #002842;
}
.arc-filter a.is-current {
  background-color: #002842;
  border-color: #002842;
  color: #fff;
}

.arc-list {
  list-style: none;
  border-top: 1px solid #e4e8ec;
}
.arc-item {
  border-bottom: 1px solid #e4e8ec;
}

.arc-item.is-hidden {
  display: none;
}
.arc-item > a {
  display: grid;
  grid-template-columns: 7.5em 8.5em 1fr;
  gap: 0 clamp(14px, 2vw, 26px);
  align-items: center;
  padding: 26px 4px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.arc-item > a:hover {
  opacity: 0.65;
}

.arc-date {
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  color: #8fa0af;
}

.arc-cat {
  display: inline-block;
  justify-self: start;
  padding: 2px 12px;
  border: 1px solid #002842;
  border-radius: 100px;
  background-color: transparent;
  color: #002842;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  white-space: nowrap;
}
.arc-post-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #002842;
  transition: color 0.3s ease;
}
.arc-item > a:hover .arc-post-title {
  color: #E00000;
}

.arc-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: #8fa0af;
}
.arc-empty[hidden] {
  display: none;
}

.arc-more {
  position: relative;
  margin-top: 54px;
  text-align: center;
}

.arc-sentinel {
  position: absolute;
  top: -160px;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}
.arc-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 44px 15px 34px;
  border: 1px solid #002842;
  border-radius: 100px;
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: #002842;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.arc-more-btn:hover {
  background-color: #002842;
  color: #fff;
}
.arc-more-btn[hidden] {
  display: none;
}

.arc-more-icon {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.arc-more-btn:hover .arc-more-icon {
  transform: rotate(45deg) translate(2px, 2px);
}

.arc-loading {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: #8fa0af;
}
.arc-loading[hidden] {
  display: none;
}

@media screen and (max-width: 900px) {
  .arc-item > a {
    grid-template-columns: 7.5em 1fr;
    gap: 6px clamp(12px, 2vw, 20px);
    padding: 22px 4px;
  }
  .arc-post-title {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 768px) {
  .arc-section {
    padding: 46px 20px 110px;
  }
  .arc-breadcrumb {
    margin-bottom: 30px;
  }
  .arc-filter {
    margin-bottom: 32px;
  }
  .arc-filter ul {
    gap: 8px;
  }
  .arc-filter a {
    padding: 8px 16px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }
  .arc-item > a {

    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 6px;
    padding: 20px 2px;
  }
  .arc-post-title {
    font-size: 0.9rem;
  }
  .arc-more {
    margin-top: 40px;
  }
}

/* ------------------------------------------------------------------
   スクロール演出の無効化（読み込み時点で全表示）
   information.js の RK.reveal() を停止したことに対する補助。
   lower.js の splitLinesAll() が .sec-title-ja に rv-lines を付与するため、
   .arc-section 内に該当の見出しがある場合に非表示のまま残るのを防ぐ。
   .arc-section 配下に限定しているので page-hero の演出には影響しない。
------------------------------------------------------------------ */
.js-motion .arc-section .rv-lines .ln-i {
  transform: none;
  transition: none;
  will-change: auto;
}