@charset "UTF-8";

/* NEWS記事詳細：共通CSS・他ページには影響させない */
.news-detail {
  background: #fff;
  color: #000;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

.news-detail__header { padding: 64px 56px 80px; }
.news-detail__header-inner { max-width: 1040px; margin: 0 auto; }

.news-detail__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  color: rgb(0 0 0 / 45%);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 2.2px;
}
.news-detail__breadcrumb [aria-current] { color: #000; }
.news-detail__breadcrumb a,
.news-detail__back {
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-detail__heading {
  margin-top: 96px;
  border-top: 2px solid #000;
  padding-top: 36px;
}
.news-detail__label,
.news-detail__meta time,
.news-detail__arrow { font-family: 'Barlow Condensed', sans-serif; }
.news-detail__label {
  color: #e21717;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.52px;
}
.news-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 28px;
}
.news-detail__category {
  padding: 8px 12px;
  background: #e21717;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1.4px;
  overflow-wrap: anywhere;
}
.news-detail__meta time {
  color: rgb(0 0 0 / 60%);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 2.24px;
}
.news-detail__title {
  max-width: 920px;
  margin-top: 28px;
  font-size: clamp(2rem, 5.2vw, 4.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.045em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.news-detail__image {
  max-width: 1280px;
  margin: 0 auto;
  background: rgb(0 0 0 / 5%);
}
.news-detail__image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 760px;
  margin: 0 auto;
  object-fit: contain;
}
.news-detail__body { padding: 112px 56px; }
/* 写真のない記事に空の画像領域・余分な上余白を作らない */
.news-detail__article--text-only .news-detail__body { padding-top: 0; }
.news-detail__content,
.news-detail__nav { max-width: 800px; margin: 0 auto; }
.news-detail__content {
  display: flow-root;
  color: rgb(0 0 0 / 78%);
  font-size: 16px;
  line-height: 2.1;
  overflow-wrap: anywhere;
}
.news-detail__content > * + * { margin-top: 32px; }
/* 通常段落同士だけを調整し、空段落や他のブロックの間隔は維持する。 */
.news-detail__content > p:not(:empty) + p:not(:empty) { margin-top: 24px; }
.news-detail__content h2 {
  margin-top: 72px;
  border-top: 2px solid #171717;
  padding-top: 24px;
  color: #000;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.025em;
}
.news-detail__content h3 {
  margin-top: 56px;
  border-left: 4px solid #e21717;
  padding-left: 16px;
  color: #000;
  font-size: 22.4px;
  font-weight: 700;
  line-height: 1.6;
}
.news-detail__content strong { color: #000; font-weight: 700; }
.news-detail__content a {
  color: #c91414;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: none;
}
.news-detail__content ul,
.news-detail__content ol { padding: 28px 28px 28px 52px; background: #f1f0ec; }
.news-detail__content ul { list-style: square; }
.news-detail__content ol { list-style: decimal; }
.news-detail__content li + li { margin-top: 12px; }
.news-detail__content li::marker { color: #e21717; font-weight: 700; }
.news-detail__content li > ul,
.news-detail__content li > ol { margin-top: 12px; }
.news-detail__content figure { max-width: 100%; margin-top: 56px; margin-bottom: 56px; }
.news-detail__content img { max-width: 100%; height: auto; }
.news-detail__content .aligncenter { margin-left: auto; margin-right: auto; }
.news-detail__content .alignleft { float: left; margin-right: 24px; }
.news-detail__content .alignright { float: right; margin-left: 24px; }
.news-detail__content figcaption {
  margin-top: 12px;
  color: rgb(0 0 0 / 50%);
  font-size: 12px;
  line-height: 1.7;
}
.news-detail__content > :first-child { margin-top: 0; }
.news-detail__content > :last-child { margin-bottom: 0; }
.news-detail__nav { margin-top: 96px; border-top: 1px solid rgb(0 0 0 / 20%); padding-top: 40px; }
.news-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #000;
  padding-bottom: 12px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.news-detail__arrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-detail a:focus-visible { outline: 2px solid #e21717; outline-offset: 5px; }
@media (hover: hover) {
  .news-detail__breadcrumb a:hover { color: #e21717; }
  .news-detail__back:hover { color: #e21717; border-color: #e21717; }
  .news-detail__back:hover .news-detail__arrow { transform: translateX(-4px); }
  .news-detail__content a:hover { text-decoration-thickness: 2px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .news-detail__header { padding: 64px 40px; }
  .news-detail__body { padding: 96px 40px; }
}
@media (max-width: 767px) {
  .news-detail__header { padding: 48px 20px; }
  .news-detail__heading { margin-top: 64px; padding-top: 28px; }
  .news-detail__body { padding: 64px 20px; }
  .news-detail__content { font-size: 15px; line-height: 2; }
  .news-detail__content > * + * { margin-top: 24px; }
  .news-detail__content > p:not(:empty) + p:not(:empty) { margin-top: 20px; }
  .news-detail__content h2 { margin-top: 56px; padding-top: 20px; font-size: 24px; }
  .news-detail__content h3 { margin-top: 44px; font-size: 18.4px; }
  .news-detail__content ul,
  .news-detail__content ol { padding: 20px 20px 20px 40px; }
  .news-detail__content figure { margin-top: 40px; margin-bottom: 40px; }
  .news-detail__content > :first-child { margin-top: 0; }
  .news-detail__content > :last-child { margin-bottom: 0; }
  .news-detail__nav { margin-top: 64px; padding-top: 32px; }
  .news-detail__back { font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-detail__breadcrumb a,
  .news-detail__back,
  .news-detail__arrow { transition: none; }
  .news-detail__back:hover .news-detail__arrow { transform: none; }
}