.is-pc {
  display: block;
}

.is-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .is-pc {
    display: none;
  }

  .is-sp {
    display: block;
  }
}
/* 下層ページ：スクロールバーを表示（TOP の c-scrollbar と同系統の見た目） */
.page-sub .l-container.lenis {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
  -ms-overflow-style: auto;
}

.page-sub .l-container.lenis::-webkit-scrollbar {
  display: block;
  width: 10px;
}

.page-sub .l-container.lenis::-webkit-scrollbar-track {
  background: transparent;
}

.page-sub .l-container.lenis::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
}

.page-sub .l-container.lenis::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 768px) {
  .page-sub .l-container.lenis::-webkit-scrollbar {
    width: 6px;
  }

  .page-sub .l-container.lenis::-webkit-scrollbar-thumb {
    border-radius: 2px;
  }
}

/* 下層ページ：装飾要素がスクロールを妨げないようにする */
.page-sub .home-fv__bg-item {
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .page-sub .home-fv__bg-item--right,
  .page-sub .home-fv__bg-item--top {
    top: 0;
  }
}

/* news / event / interview / message：メインビジュアルでは WebGL 非表示、フッター追従時のみフェードイン */
.page-sub:has(.p-news-index) .l-main > .webgl-wrapper,
.page-sub:has(.p-detail) .l-main > .webgl-wrapper,
.page-sub:has(.p-event-index) .l-main > .webgl-wrapper,
.page-sub:has(.p-interview-index) .l-main > .webgl-wrapper,
.page-sub:has(.p-interview-detail) .l-main > .webgl-wrapper,
.page-sub:has(.p-message-detail) .l-main > .webgl-wrapper {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.7s ease-out,
    visibility 0s linear 0.7s;
}

.page-sub:has(.p-news-index) .l-main > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-detail) .l-main > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-event-index) .l-main > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-interview-index)
  .l-main
  > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-interview-detail)
  .l-main
  > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-message-detail)
  .l-main
  > .webgl-wrapper.is-footer-webgl-active {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.7s ease-out,
    visibility 0s linear 0s;
}

/* history / about / vision：フッター追従時のみ WebGL フェードイン */
.page-sub:has(.p-history) .l-main > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-about) .l-main > .webgl-wrapper.is-footer-webgl-active,
.page-sub:has(.p-vision) .l-main > .webgl-wrapper.is-footer-webgl-active {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.7s ease-out,
    visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   詳細ページ共通
-------------------------------------------------------------------------- */
.p-detail {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(189, 222, 248, 0.45) 18%,
    rgba(189, 222, 248, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 78%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media screen and (max-width: 768px) {
  .p-detail {
    padding: 70px 0 60px;
  }
}

.p-detail__side-text {
  position: fixed;
  top: 50%;
  left: 26px;
  z-index: 11;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition:
    opacity 0.25s cubic-bezier(0.19, 1, 0.22, 1),
    visibility 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

html.is-footer-reached .p-detail__side-text {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 768px) {
  /* 下層ページ共通：画面固定ではなく、ページ長の中央に配置 */
  .p-detail__side-text {
    position: absolute;
    top: 50%;
    left: 5px;
    font-size: 1rem;
    transform: translateY(-50%);
  }
}

.p-detail__inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

/* パンくず */
.p-detail__breadcrumb {
  margin-bottom: 46px;
}

.p-detail__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-detail__breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.4;
}

.p-detail__breadcrumb-item:not(:last-child)::after {
  content: ">";
  margin: 0 12px;
}

.p-detail__breadcrumb-item a {
  color: #000000;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-detail__breadcrumb-item a:hover {
    opacity: 0.6;
  }
}

.p-detail__breadcrumb-item[aria-current="page"] {
  /* color: #861c3c; */
}

@media screen and (max-width: 768px) {
  .p-detail__breadcrumb {
    margin-bottom: 16px;
  }

  /* セクション上余白100pxのページ：パンくずを70px位置に統一 */
  .p-message-detail .p-detail__breadcrumb,
  .p-news-index .p-detail__breadcrumb,
  .p-event-index .p-detail__breadcrumb,
  .p-interview-index .p-detail__breadcrumb,
  .p-history .p-detail__breadcrumb,
  .p-about .p-detail__breadcrumb,
  .p-vision .p-detail__breadcrumb {
    margin-top: -30px;
  }

  .p-detail__breadcrumb-item {
    font-size: 1.1rem;
  }

  .p-detail__breadcrumb-item:not(:last-child)::after {
    margin: 0 8px;
  }
}

/* カード */
.p-detail__card {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 40px rgba(46, 127, 204, 0.1);
  padding: 0 115px;
  max-width: 1030px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-detail__card {
    width: min(334px, calc(334 / 384 * 100vw));
    max-width: min(334px, calc(334 / 384 * 100vw));
    padding: 0;
  }
}

/* ヘッダーバー（グラデーション） */
.p-detail__head {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .p-detail__head {
  }
}
.p-detail__head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 7px 30px;
  /* background: linear-gradient(90deg, #0075ff 0%, #9a86fa 55%, #de7cfe 100%); */
  background: linear-gradient(
    120deg,
    #13bcf6 0%,
    #034c91 20%,
    #1d2888 40%,
    #0d5fbc 60%,
    #b989f2 90%
  );
  color: #ffffff;
  max-width: 1366px;
  margin: 0 auto;
  border-radius: 20px 20px 0 0;
}

@media screen and (max-width: 768px) {
  .p-detail__head-inner {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px 12px 0 0;
    width: min(300px, calc(300 / 384 * 100vw));
    max-width: min(300px, calc(300 / 384 * 100vw));
  }
}

.p-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 40px;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  .p-detail__meta {
    flex: 1;
    gap: 6px 16px;
  }
}

.p-detail__date {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.2rem;
  white-space: nowrap;
  position: relative;
}

.p-detail__date .small {
  font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
  .p-detail__date {
    font-size: 1.8rem;
  }

  .p-detail__date .small {
    font-size: 1.4rem;
  }
}

.p-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.p-detail__date:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 18px;
  background: linear-gradient(0deg, #dd7cfe 0%, #0075ff 100%);
  display: block;
  top: 0;
  bottom: 0;
  right: -20px;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .p-detail__date {
    gap: 6px;
  }

  .p-detail__date:after {
    display: none;
  }

  .p-detail__tags {
    margin-bottom: 24px;
  }
}

.p-detail__tag {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.2rem;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .p-detail__tag {
    font-size: 1rem;
  }
}

.p-detail__category {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

@media screen and (max-width: 768px) {
  .p-detail__category {
    gap: 6px;
  }
}

.p-detail__category-en {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .p-detail__category-en {
    font-size: 0.7rem;
  }
}

.p-detail__category-icon {
  display: block;
  width: 18px;
}

@media screen and (max-width: 768px) {
  .p-detail__category-icon {
    width: 18px;
  }
}

.p-detail__category-icon--event {
  width: 40px;
}

@media screen and (max-width: 768px) {
  .p-detail__category-icon--event {
    width: 36px;
  }
}

.p-detail__category-icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* サムネイル */
.p-detail__thumb {
  margin: 0;
  line-height: 0;
}

@media screen and (max-width: 768px) {
  .p-detail__thumb,
  .p-detail__thumb-bg {
    padding: 0 5%;
  }
}

.p-detail__thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: auto;
}

.p-detail__thumb-bg {
  margin: 0;
  line-height: 0;
}

.p-detail__thumb-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* サムネ画像は中央、figure / 背景帯 / 本文を同じ幅に揃える */
.p-detail__thumb--match-bg {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  background-color: #e5f3ff;
  padding: 40px 0;
  position: relative;
}

.p-detail__thumb--match-bg > img {
  display: block;
  margin-inline: auto;
}

/* 縦長サムネ（イベント等）：実画像が大きくても 350px で中央表示 */
.p-detail__thumb--match-bg > img[width="350"] {
  width: 350px;
  max-width: 100%;
  height: auto;
}

.p-detail__thumb--match-bg .p-detail__thumb-bg {
  width: 100%;
  padding-bottom: 62px;
  background: url("/150anniversary/assets/images/news/thumbnail_bg.png") no-repeat top center /
    100% 100%;
  position: absolute;
  bottom: -60px;
}

/* NEWS / EVENT詳細：装飾帯の縦を抑える + サムネ画像と同じ幅に揃える */
[data-namespace="news"] .p-detail__thumb--match-bg .p-detail__thumb-bg,
[data-namespace="event"] .p-detail__thumb--match-bg .p-detail__thumb-bg {
  left: 0;
  right: 0;
  width: auto;
  box-sizing: border-box;
  padding-bottom: 28px;
  bottom: -28px;
}

@media screen and (max-width: 768px) {
  .p-detail__thumb--match-bg {
    padding: 0 5%;
  }

  .p-detail__thumb--match-bg .p-detail__thumb-bg {
    padding: 0;
    padding-bottom: 62px;
  }

  [data-namespace="news"] .p-detail__thumb--match-bg .p-detail__thumb-bg,
  [data-namespace="event"] .p-detail__thumb--match-bg .p-detail__thumb-bg {
    /* figure の左右 padding(5%) に合わせて画像幅と一致させる */
    left: 5%;
    right: 5%;
    padding-bottom: 28px;
  }
}

/* 本文（thumb--match-bg と同じ幅） */
.p-detail__body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 120px 0 0;
}

[data-namespace="news"] .p-detail__body,
[data-namespace="event"] .p-detail__body {
  padding-top: 40px;
}

@media screen and (max-width: 768px) {
  .p-detail__body {
    padding: 24px 5% 0;
  }

  [data-namespace="news"] .p-detail__body,
  [data-namespace="event"] .p-detail__body {
    padding-top: 40px;
  }
}

.p-detail__title {
  margin: 0 0 42px;
  font-style: normal;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .p-detail__title {
    margin-bottom: 10px;
    font-size: 1.6rem;
  }
}

.p-detail__content {
  font-style: normal;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8;
}

.p-detail__content p {
  margin: 0 0 1.5em;
  font-size: 1.3rem;
}

.p-detail__content p:last-child {
  margin-bottom: 0;
}

.p-detail__content p a {
  text-decoration: underline !important;
}

.l-main:has(.p-interview-detail) .home-event__fractal--right {
  display: none;
}

[data-namespace="news"] .p-detail__content > div {
  margin-bottom: 48px;
}

[data-namespace="news"] .p-detail__content > div:last-child {
  margin-bottom: 0;
}

[data-namespace="news"] .p-detail__content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 8px 0 8px 14px;
  border-left: 3px solid #0075ff;
}

[data-namespace="news"] .p-detail__content .image {
  margin-bottom: 8px;
}

[data-namespace="news"] .p-detail__content .image img {
  width: 100%;
  height: auto;
  display: block;
}

[data-namespace="news"] .p-detail__content .text {
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 24px;
  color: #555;
}

[data-namespace="news"] .p-detail__content .text:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .p-detail__content {
    font-size: 1.3rem;
    line-height: 1.9;
  }

  [data-namespace="news"] .p-detail__content > div {
    margin-bottom: 32px;
  }

  [data-namespace="news"] .p-detail__content h2 {
    font-size: 1.4rem;
  }
}

/* ページャー */
.p-detail__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 100px 48px;
}

.p-detail__pager-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #000000;
  transition: opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-detail__pager-link:hover {
    opacity: 0.6;
  }
}

.p-detail__pager-link.is-disabled {
  opacity: 0.2;
  pointer-events: none;
}

.p-detail__pager-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #861c3c 0%, #6b2456 45%, #9a86fa 100%);
  box-shadow: none;
}

.p-detail__pager-icon i {
  font-size: 1.6rem;
  line-height: 1;
  color: #ffffff;
  font-weight: bold;
}

.p-detail__pager-link--prev:has(.p-detail__pager-icon-img)
  .p-detail__pager-icon,
.p-detail__pager-link--next:has(.p-detail__pager-icon-img)
  .p-detail__pager-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

.p-detail__pager-icon-img {
  display: block;
  width: 21px;
  height: auto;
}

.p-detail__pager-label {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
}

.p-detail__pager-all {
  flex-shrink: 0;
  margin: 0 auto;
}

/* SP：PREV | VIEW ALL | NEXT を1行に */
@media screen and (max-width: 768px) {
  .p-detail__pager {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 48px 24px 40px;
  }

  .p-detail__content p {
    font-size: 1.2rem;
  }

  .p-detail__pager-link {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
  }

  .p-detail__pager-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    /* border: none; */
    /* background: linear-gradient(135deg, #861c3c 0%, #6b2456 45%, #9a86fa 100%); */
    /* box-shadow: none; */
  }

  .p-detail__pager-icon i {
    font-size: 1rem;
    color: #ffffff;
  }

  .p-detail__pager-icon-img {
    width: 20px;
  }

  .p-detail__pager-label {
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
  }

  .p-detail__pager-all {
    width: 136px;
    height: 34px;
    margin: 0;
    flex-shrink: 0;
  }

  .p-detail__pager-all .c-btn__text {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   イベント詳細
-------------------------------------------------------------------------- */
.p-event-detail__section {
  margin-top: 64px;
}

@media screen and (max-width: 768px) {
  .p-event-detail__section {
    margin-top: 40px;
  }
}

.p-event-detail__heading {
  position: relative;
  margin: 0 0 32px;
  padding-left: 20px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.6;
}

.p-event-detail__heading::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 6px;
  background: linear-gradient(180deg, #de7cfe 0%, #0075ff 100%);
}

@media screen and (max-width: 768px) {
  .p-event-detail__heading {
    margin-bottom: 20px;
    padding-left: 14px;
    font-size: 1.3rem;
  }

  .p-event-detail__heading::before {
    width: 5px;
  }
}

.p-event-detail__figure {
  margin: 48px 0 0;
  line-height: 0;
}

.p-event-detail__figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .p-event-detail__figure {
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   イベント一覧
-------------------------------------------------------------------------- */
.p-event-index {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
}

@media screen and (max-width: 768px) {
  .p-event-index {
    padding: 100px 0 60px;
  }
}

.p-event-index__inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

.p-event-index__head {
  margin-bottom: 64px;
}

@media screen and (max-width: 768px) {
  .p-event-index__head {
    margin-bottom: 40px;
  }
}

.p-event-index__section-head {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.p-event-index__body {
  position: relative;
  z-index: 10;
  max-width: 896px;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .p-event-index__body {
    padding: 0 20px;
  }
}

/* 縦長サムネ（app.css の aspect-ratio を上書き） */
.c-event__thumb--portrait {
  aspect-ratio: 350 / 494;
}

.p-event-index__list .c-event__item {
  width: 435px;
  position: relative;
  z-index: 1;
}

/* SP：1列＋カード間余白（PC用の段差レイアウトを解除） */
@media screen and (max-width: 768px) {
  .p-event-index__list.c-event__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 0;
    row-gap: 40px;
    padding: 0;
    padding-bottom: 40px;
  }

  .p-event-index__list .c-event__item {
    width: 100%;
  }

  /* 1列時は PC 用の段差・margin をリセット（重なり防止） */
  .p-event-index__list .c-event__item:nth-child(even) {
    transform: none;
  }

  .p-event-index__list .c-event__item:nth-child(n + 3) {
    margin-top: 0;
  }
}

.p-event-index__list .c-event__item[data-event-inview] {
  opacity: 0;
  visibility: hidden;
}

.p-event-index__list .c-event__item[data-event-inview].is-inview {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.8s ease-out,
    visibility 0s linear 0s;
}

.p-event-index__pagination {
  margin-top: 260px;
}

@media screen and (max-width: 768px) {
  .p-event-index__pagination {
    margin-top: 98px;
  }
}

.p-event-index__pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-event-index__pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 33px;
  padding: 0 15px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: #000000;
  transition: opacity 0.3s ease;
}

.p-event-index__pagination-link.is-current {
  background: url(/150anniversary/assets/images/news/pager-active.png) center / contain
    no-repeat;
  color: #ffffff;
}

.p-event-index__pagination-link--next,
.p-event-index__pagination-link--last {
  min-width: auto;
  padding: 0 12px;
  background: none;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.p-event-index__pagination-icon {
  display: block;
  width: auto;
  height: auto;
}

.p-event-index__pagination-link--next .p-event-index__pagination-icon {
  width: 10px;
}

.p-event-index__pagination-link--last .p-event-index__pagination-icon {
  width: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .p-event-index__pagination-link:not(.is-current):hover {
    opacity: 0.6;
  }
}

@media screen and (max-width: 768px) {
  .p-event-index__pagination-list {
    gap: 4px;
  }

  .p-event-index__pagination-link {
    min-width: 28px;
    height: 28px;
    font-size: 1.3rem;
    padding: 0 10px;
  }

  .p-event-index__pagination-link.is-current {
    min-width: 28px;
    height: 28px;
    padding: 0 12px;
  }

  .p-event-index__pagination-link--next .p-event-index__pagination-icon {
    width: 5px;
  }

  .p-event-index__pagination-link--last .p-event-index__pagination-icon {
    width: 10px;
  }

  .p-event-index__pagination-link--next,
  .p-event-index__pagination-link--last {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   お知らせ一覧
-------------------------------------------------------------------------- */
.p-news-index {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(189, 222, 248, 0.45) 18%, rgba(189, 222, 248, 0.55) 45%, rgba(255, 255, 255, 0.85) 78%, rgba(255, 255, 255, 0) 100%); */
}

@media screen and (max-width: 768px) {
  .p-news-index {
    padding: 100px 0 60px;
  }
}

.p-news-index__inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

.p-news-index__head {
  margin-bottom: 64px;
}

@media screen and (max-width: 768px) {
  .p-news-index__head {
    margin-bottom: 40px;
  }
}

.p-news-index__section-head {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.p-news-index__body {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 114px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .p-news-index__body {
    max-width: 83.33333vw;
    padding: 0;
  }
}

.p-news-index__body .home-history__fractal--right {
  top: 0;
  bottom: 0;
  right: calc(50% - 50vw);
  margin: auto;
  width: clamp(72px, 7vw, 104px);
  height: fit-content;
  z-index: 0;
}

.p-news-index__body .home-history__fractal-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.45;
}

.p-news-index__figure01 {
  position: absolute;
  top: 0;
  left: -50px;
  bottom: 0;
  margin: auto;
  height: 200px;
  z-index: 1;
}

.p-news-index__figure01 img {
  width: auto;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .p-news-index__body .home-history__fractal--right {
    top: 72px;
    bottom: auto;
    right: calc(50% - 50vw);
    margin: 0;
    width: 52px;
  }

  .p-news-index__body .home-history__fractal-img {
    opacity: 0.35;
  }

  .p-news-index__figure01 {
    left: -10px;
    top: inherit;
    height: 60px;
  }
}

.p-news-index .p-news-index__list {
  width: 100%;
  max-width: 726px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.p-news-index .p-news-index__list .c-news__time {
  font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
  .p-news-index .p-news-index__list {
    max-width: 100%;
    margin-left: 0;
  }

  .p-news-index .p-news-index__list .c-news__time {
    font-size: 1.2rem;
  }
  .p-news-index .c-news__link {
    padding: 24px 16px;
    align-items: center;
  }
}

/* ページネーション */
.p-news-index__pagination {
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .p-news-index__pagination {
    margin-top: 48px;
  }
}

.p-news-index__pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-news-index__pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 33px;
  padding: 0 15px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: #000000;
  transition: opacity 0.3s ease;
}

.p-news-index__pagination-link.is-current {
  background: url(/150anniversary/assets/images/news/pager-active.png) center / contain
    no-repeat;
  color: #ffffff;
}

.p-news-index__pagination-link--first,
.p-news-index__pagination-link--prev,
.p-news-index__pagination-link--next,
.p-news-index__pagination-link--last {
  min-width: auto;
  padding: 0 12px;
  background: none;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.p-news-index__pagination-icon {
  display: block;
  width: auto;
  height: auto;
}

.p-news-index__pagination-link--prev .p-news-index__pagination-icon {
  width: 10px;
}

.p-news-index__pagination-link--next .p-news-index__pagination-icon {
  width: 10px;
}

.p-news-index__pagination-link--first .p-news-index__pagination-icon,
.p-news-index__pagination-link--last .p-news-index__pagination-icon {
  width: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .p-news-index__pagination-link:not(.is-current):hover {
    opacity: 0.6;
  }
}

@media screen and (max-width: 768px) {
  .p-news-index__pagination-list {
    gap: 4px;
  }

  .p-news-index__pagination-link {
    min-width: 28px;
    height: 28px;
    font-size: 1.3rem;
    padding: 0 10px;
  }

  .p-news-index__pagination-link.is-current {
    min-width: 28px;
    height: 28px;
    padding: 0 12px;
  }

  .p-news-index__pagination-link--next .p-news-index__pagination-icon {
    width: 5px;
  }
  .p-news-index__pagination-link--last .p-news-index__pagination-icon {
    width: 10px;
  }
  .p-news-index__pagination-link--next,
  .p-news-index__pagination-link--last {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   メッセージ詳細
-------------------------------------------------------------------------- */
.p-message-detail {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .p-message-detail::before,
  .p-message-detail::after {
    width: 12px;
    height: 100px;
  }

  .p-message-detail::before {
    left: auto;
    right: 0;
    top: 42%;
  }

  .p-message-detail::after {
    right: auto;
    left: 0;
    bottom: 18%;
  }
}

@media screen and (max-width: 768px) {
  .p-message-detail {
    --message-detail-sp-width: min(334px, calc(334 / 384 * 100vw));
    padding: 100px 0 40px;
  }
}

.p-message-detail__inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

/* ニューラルネットワーク装飾（トップ MESSAGE セクション準拠） */
.p-message-detail__neural-network {
  position: absolute;
  width: 820px;
  height: 480px;
  pointer-events: none;
  z-index: 0;
}

.p-message-detail__neural-network canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.p-message-detail__neural-network:nth-child(1) {
  left: -200px;
  top: 1910px;
  transform: rotate(90deg);
}

.p-message-detail__neural-network:nth-child(2) {
  right: -520px;
  bottom: 600px;
  transform: rotate(90deg);
}

.p-message-detail__neural-network:nth-child(3) {
  right: -260px;
  bottom: 640px;
  transform: rotate(-90deg);
  width: 1210px;
  height: 710px;
}

/* SP専用（PCでは非表示） */
.p-message-detail__neural-network--sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-message-detail__neural-network {
    width: 400px;
    height: 240px;
  }

  .p-message-detail__neural-network:nth-child(1) {
    left: -210px;
    top: 268vw;
    width: 100vw;
    height: 500px;
    right: inherit;
  }

  .p-message-detail__neural-network:nth-child(2) {
    right: -260px;
    bottom: 590px;
    width: 470px;
    height: 470px;
  }

  .p-message-detail__neural-network:nth-child(3) {
    bottom: 570px;
    width: 1110px;
    height: 560px;
  }

  .p-message-detail__neural-network--sp {
    display: block;
    left: auto;
    right: -120px;
    top: auto;
    /* bottom: 200px; */
    transform: rotate(-90deg);
    width: 400px;
    height: 240px;
    left: -49px;
    top: 366vw;
    width: 80vw;
    height: 500px;
    right: inherit;

  }
}

/* --------------------------------------------------------------------------
   FV：パンくず + ブランド + MESSAGE 見出しを 1 画面に収める
-------------------------------------------------------------------------- */
.p-message-detail__fv {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100svh;
  margin-top: -110px;
  padding: 0;
  background: transparent;
}

.p-message-detail__fv-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  margin-bottom: 0;
  padding-top: 110px;
  padding-left: 70px;
  padding-right: 70px;
  text-align: left;
  pointer-events: auto;
  box-sizing: border-box;
}

.p-message-detail__fv .p-detail__breadcrumb {
  flex: 0 0 auto;
  position: relative;
  z-index: 40;
  margin-bottom: 0;
}

/* ブランドビジュアル（PC）— history 同様 fixed + スクロールフェード */
.p-message-detail__brand {
  position: relative;
  z-index: 20;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-width: none;
  margin: 0 0 40px;
  padding: 0;
}

/* FV 内では残り高さを使い、見出しを同画面に残す */
.p-message-detail__fv .p-message-detail__brand {
  flex: 1 1 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: 0;
}

.p-message-detail__brand-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 110px 70px 40px;
  box-sizing: border-box;
  will-change: opacity, filter;
}

.p-message-detail__fv .p-message-detail__brand-inner {
  inset: auto;
  top: 0;
  left: 0;
  height: var(--message-brand-fv-height, 50svh);
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
}

.p-message-detail__brand-inner.is-brand-fv-hidden {
  visibility: hidden;
  pointer-events: none;
}

.p-message-detail .p-detail__breadcrumb {
  position: relative;
  z-index: 40;
}

.p-message-detail__brand-copy {
  grid-column: 1;
  flex-shrink: 0;
  max-width: 340px;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

.p-message-detail__brand-visual {
  position: relative;
  z-index: 2;
  grid-column: 2;
  min-height: clamp(400px, 50vw, 620px);
  margin: 0 -24px;
}

.p-message-detail__fv .p-message-detail__brand-visual {
  min-height: 0;
  height: 100%;
  overflow: visible;
}

.p-message-detail__brand-webgl {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(130%, 760px);
  height: clamp(400px, 54vw, 640px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ABOUT のフルスクリーン WebGL に近い見え方になるよう、キャンバスを大きめに */
.p-message-detail__fv .p-message-detail__brand-webgl {
  width: min(100vw, 1100px);
  height: clamp(520px, 68svh, 820px);
}

.p-message-detail__brand-webgl canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.p-message-detail__brand-logo {
  grid-column: 3;
  flex-shrink: 0;
  justify-self: end;
  width: 23.4260614934vw;
  max-width: 320px;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

.p-message-detail__brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .p-message-detail__brand-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1.4fr) minmax(
        0,
        0.9fr
      );
    padding: 110px 24px 40px;
  }

  .p-message-detail__brand-copy {
    max-width: 260px;
  }

  .p-message-detail__brand-visual {
    min-height: clamp(320px, 48vw, 480px);
  }

  .p-message-detail__brand-webgl {
    width: min(140%, 600px);
    height: clamp(320px, 100vw, 520px);
  }

  .p-message-detail__brand-logo {
    width: 23.4260614934vw;
    max-width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .p-message-detail__fv {
    margin-top: -100px;
    min-height: 100svh;
    --message-sp-fv-head: clamp(132px, 23svh, 172px);
  }

  .p-message-detail__fv-head {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 20;
    width: 100%;
    padding-top: 100px;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 0;
  }

  .p-message-detail .p-detail__breadcrumb {
    margin-bottom: clamp(6px, calc(8 / 384 * 100vw), 10px);
  }

  .p-message-detail__fv .p-detail__breadcrumb {
    margin-top: -30px;
  }

  .p-message-detail__brand {
    --message-detail-brand-logo-width: 46.9333333333vw;
    --message-detail-brand-logo-max: 176px;
    --message-detail-brand-logo-gap: clamp(20px, calc(32 / 384 * 100vw), 36px);
    --message-detail-brand-fv-offset: calc(
      70px + 1.1rem + clamp(6px, calc(8 / 384 * 100vw), 10px) + 0.25rem
    );
    z-index: 10;
    height: auto;
    min-height: calc(100svh - var(--message-detail-brand-fv-offset));
    margin: 0 0 clamp(24px, calc(32 / 384 * 100vw), 40px);
    padding: 0;
  }

  .p-message-detail__fv .p-message-detail__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: calc(100svh - var(--message-sp-fv-head));
    margin: 0;
  }

  .p-message-detail__brand-inner {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: calc(100svh - var(--message-detail-brand-fv-offset));
    padding: var(--message-detail-brand-fv-offset) 24px 0;
    gap: 0;
  }

  .p-message-detail__fv .p-message-detail__brand-inner {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0 24px;
  }

  .p-message-detail__brand-copy {
    display: none;
  }

  .p-message-detail__brand-visual {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  .p-message-detail__fv .p-message-detail__brand-visual {
    min-height: clamp(280px, 48svh, 420px);
  }

  .p-message-detail__brand-webgl {
    width: 100%;
    height: clamp(280px, 100vw, 400px);
  }

  .p-message-detail__fv .p-message-detail__brand-webgl {
    width: min(100vw, 520px);
    height: clamp(320px, 52svh, 460px);
  }

  /* MESSAGE SP：FV はメイン WebGL（history / about 同様）。PC は従来どおり非表示 */
  .page-sub:has(.p-message-detail) .l-main > .webgl-wrapper {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transition: none;
  }

  .p-message-detail__brand-webgl {
    display: none;
  }

  .p-message-detail__head {
    flex: 0 0 auto;
  }

  .p-message-detail__fv .p-message-detail__brand-inner {
    justify-content: flex-end;
    padding: 0 24px clamp(36px, 8svh, 68px);
  }

  .p-message-detail__fv .p-message-detail__brand-visual {
    flex: 0 0 auto;
    min-height: 0;
  }

  .p-message-detail__brand-logo {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    justify-self: unset;
    width: var(--message-detail-brand-logo-width);
    max-width: var(--message-detail-brand-logo-max);
    margin: 0 auto var(--message-detail-brand-logo-gap);
  }

  .p-message-detail__fv .p-message-detail__brand-logo {
    margin: 0 auto clamp(12px, 2.5svh, 24px);
  }
}

/* セクションヘッド */
.p-message-detail__head {
  margin-bottom: 64px;
}

.p-message-detail__fv .p-message-detail__head {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  margin-bottom: 0;
  padding: clamp(8px, 1.5vh, 20px) 0 clamp(16px, 2.5vh, 36px);
  text-align: center;
}

.p-message-detail__fv .p-message-detail__section-head .c-section-head__img,
.p-message-detail__fv .c-section-head--message .c-section-head__img {
  width: clamp(56px, 6.5vh, 80px);
}

.p-message-detail__fv .p-message-detail__section-head .c-section-head__en {
  font-size: clamp(4.2rem, 6.5vh, 5.6rem);
  margin-top: clamp(4px, 0.8vh, 12px);
  line-height: 1.1;
}

.p-message-detail__fv .p-message-detail__section-head .c-section-head__jp {
  font-size: clamp(1.2rem, 1.6vh, 1.4rem);
}

.p-message-detail__section-head {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .p-message-detail__head {
    margin-bottom: 40px;
  }

  .p-message-detail__fv .p-message-detail__head {
    margin-bottom: 0;
    padding: 8px 0 16px;
  }

  .p-message-detail__fv .p-message-detail__section-head .c-section-head__img,
  .p-message-detail__fv .c-section-head--message .c-section-head__img {
    width: 44px;
  }

  .p-message-detail__fv .p-message-detail__section-head .c-section-head__en {
    font-size: 3.2rem;
    margin-top: 4px;
  }

  .p-message-detail__fv .p-message-detail__section-head .c-section-head__jp {
    font-size: 1.1rem;
  }
}

.p-message-detail__article {
  max-width: 1070px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-message-detail__article {
    width: var(--message-detail-sp-width);
    max-width: var(--message-detail-sp-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}

/* ヒーロー */
.p-message-detail__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: stretch;
  gap: 0;
  background: linear-gradient(
    135deg,
    #4fddff 0%,
    #076e9d 20%,
    #143a92 38%,
    #1a288f 52%,
    #607bc9 100%
  );
}

.p-message-detail__hero-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: 56px 64px 48px 48px;
  color: #ffffff;
}

.p-message-detail__hero-copy-wrap {
  position: relative;
  padding-left: 24px;
}

.p-message-detail__hero-copy-wrap::before {
  content: "";
  position: absolute;
  top: 0.15em;
  bottom: 0.15em;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #0075ff 0%, #de7cfe 100%);
}

.p-message-detail__hero-copy {
  margin: 0;
  font-family: "Noto Serif Japanese", serif;
  font-weight: 700;
  font-size: clamp(3.9rem, 3.2vw, 3.9rem);
  line-height: 1.64;
  letter-spacing: 0.08em;
}

.p-message-detail__hero-info {
  margin-top: 48px;
}

.p-message-detail__hero-role {
  margin: 0 0 16px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 1.8rem;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.p-message-detail__hero-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.p-message-detail__hero-name {
  margin: 0;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: clamp(4rem, 3vw, 4rem);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.p-message-detail__hero-name-en {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.p-message-detail__hero-thumb {
  position: relative;
  z-index: 1;
  margin: 0;
  margin-left: clamp(-48px, -4vw, -24px);
  line-height: 0;
  background-color: #ffffff;
  border-radius: 54px 0 0 54px;
  overflow: hidden;
  z-index: 2;
}

.p-message-detail__hero-thumb img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: top center;
}

.p-message-detail__hero-thumb img.is-pc {
  display: block;
}

.p-message-detail__hero-thumb img.is-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-message-detail__hero {
    display: flex;
    flex-direction: column;
    background: #1d258f;
  }

  .p-message-detail__hero-thumb {
    order: 1;
    margin: 0;
    border-radius: 0 0 0 clamp(72px, 18vw, 120px);
  }

  .p-message-detail__hero-thumb img {
    min-height: 0;
    aspect-ratio: 1.45 / 1;
    object-position: center top;
  }

  .p-message-detail__hero-thumb img.is-pc {
    display: none;
  }

  .p-message-detail__hero-thumb img.is-sp {
    display: block;
  }

  .p-message-detail__hero-panel {
    order: 2;
    position: relative;
    z-index: 2;
    min-height: 0;
    margin-top: 0;
    padding: 28px 22px 22px;
    border-radius: 0;
    background:
      radial-gradient(
        circle at 88% 76%,
        rgba(222, 124, 254, 0.75) 0%,
        rgba(222, 124, 254, 0) 30%
      ),
      linear-gradient(135deg, #20208b 0%, #004fb4 58%, #8f75f1 100%);
  }

  .p-message-detail__hero-copy-wrap {
    padding-left: 22px;
  }

  .p-message-detail__hero-copy-wrap::before {
    width: 4px;
  }

  .p-message-detail__hero-copy {
    font-size: 2.1rem;
    line-height: 1.6;
  }

  .p-message-detail__hero-info {
    margin-top: 20px;
    padding-left: 28px;
  }

  .p-message-detail__hero-role {
    margin-bottom: 14px;
    font-size: 1.1rem;
    line-height: 1.6;
    white-space: nowrap;
  }

  .p-message-detail__figure01 {
    margin-bottom: 28px;
  }

  .p-message-detail__hero-name-row {
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
  }

  .p-message-detail__hero-name {
    min-width: 168px;
    font-size: 2.2rem;
    letter-spacing: 0.14em;
  }

  .p-message-detail__hero-name-en {
    max-width: 128px;
    font-size: 1.1rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
}

/* 本文 */
.p-message-detail__content-panel {
  position: relative;
  max-width: 1070px;
  margin: 0 auto;
  padding: 90px 70px 86px;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 44px rgba(0, 39, 76, 0.06);
  container-type: inline-size;
  --message-panel-padding-x: 70px;
  --message-content-max: 850px;
  --message-content-bleed: max(0px, (100cqw - var(--message-content-max)) / 2);
  --message-panel-edge-outset: calc(
    var(--message-content-bleed) + var(--message-panel-padding-x)
  );
}

.p-message-detail__content-panel::before,
.p-message-detail__content-panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 190px;
  /* background: linear-gradient(180deg, #dd7cfe 0%, #0075ff 100%); */
  background: linear-gradient(
    200deg,
    #c388fa 0%,
    #07709d 28%,
    #1a288f 55%,
    #076e9d 78%,
    #4fddff 100%
  );
  pointer-events: none;
}

.p-message-detail__content-panel::before {
  left: 0;
  top: 230px;
}

.p-message-detail__figure01 {
  margin-bottom: 90px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.p-message-detail__accent-bar {
  display: none;
}

.p-message-detail__accent-section {
  display: contents;
}

.p-message-detail__content-panel::after {
  right: 0;
  bottom: 250px;
}

.p-message-detail__body {
  position: relative;
  z-index: 1;
}

.p-message-detail__content {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.4rem;
  line-height: 2.05;
  letter-spacing: 0.02em;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.p-message-detail__content p {
  margin: 0 0 2.2em;
}

.p-message-detail__content p:last-child {
  margin-bottom: 0;
}

.p-message-detail__lead {
  margin: 0 auto 64px !important;
  font-weight: 500;
}

.p-message-detail__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: start;
  margin: 64px 0 58px;
}

.p-message-detail__row--figure-left {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.p-message-detail__row--figure-left .p-message-detail__row-figure {
  grid-column: 1;
  grid-row: 1;
}

.p-message-detail__row--figure-left .p-message-detail__row-text {
  grid-column: 2;
  grid-row: 1;
}

.p-message-detail__row--figure-right .p-message-detail__row-text {
  position: static;
  padding-left: 0;
}

.p-message-detail__row--figure-right .p-message-detail__row-text::before {
  display: none;
}

.p-message-detail__row--figure-left .p-message-detail__row-text {
  position: static;
  padding-right: 20px;
}

.p-message-detail__row--figure-left .p-message-detail__row-text::after {
  display: none;
}

.p-message-detail__row-figure {
  margin: 0;
  line-height: 0;
}

.p-message-detail__row--figure-right .p-message-detail__row-figure {
  width: calc(100% + var(--message-panel-edge-outset));
  margin-right: calc(-1 * var(--message-panel-edge-outset));
}

.p-message-detail__row--figure-left .p-message-detail__row-figure {
  width: calc(100% + var(--message-panel-edge-outset));
  margin-left: calc(-1 * var(--message-panel-edge-outset));
}

.p-message-detail__row-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-message-detail--02
  .p-message-detail__row--figure-left
  .p-message-detail__row-figure
  img {
  aspect-ratio: 4 / 4.4;
  object-position: center top;
}

@media screen and (max-width: 768px) {
  .p-message-detail__figure01 {
    margin-bottom: 28px;
  }

  .p-message-detail__content-panel::before {
    display: none;
  }

  .p-message-detail__row--figure-right:has(+ .p-message-detail__accent-section),
  .p-message-detail__row--figure-left:has(+ .p-message-detail__accent-section) {
    margin-bottom: 0;
  }

  .p-message-detail__accent-section {
    display: grid;
    column-gap: 14px;
    align-items: start;
    margin: 40px 0;
  }

  .p-message-detail__accent-section--left {
    grid-template-columns: 7px minmax(0, 1fr);
    width: calc(100% + var(--message-panel-edge-outset));
    margin-left: calc(-1 * var(--message-panel-edge-outset));
  }

  .p-message-detail__accent-section--right {
    grid-template-columns: minmax(0, 1fr) 7px;
    width: calc(100% + var(--message-panel-edge-outset));
    margin-right: calc(-1 * var(--message-panel-edge-outset));
  }

  .p-message-detail__accent-section--right .p-message-detail__accent-bar {
    grid-column: 2;
    grid-row: 1;
  }

  .p-message-detail__accent-section--right > p {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .p-message-detail__accent-section .p-message-detail__accent-bar {
    display: block;
    width: 7px;
    height: 200px;
    margin: -30px 0 0;
    background: linear-gradient(
      200deg,
      #c388fa 0%,
      #07709d 28%,
      #1a288f 55%,
      #076e9d 78%,
      #4fddff 100%
    );
    pointer-events: none;
  }

  .p-message-detail__accent-section > p {
    margin: 0;
  }

  .p-message-detail__accent-section--left > p {
    grid-column: 2;
    grid-row: 1;
  }

  .p-message-detail__accent-section--left .p-message-detail__accent-bar {
    grid-column: 1;
    grid-row: 1;
  }

  .p-message-detail__accent-section > .p-message-detail__lead {
    margin-bottom: 0 !important;
  }

  .p-message-detail__content-panel {
    padding: 40px 24px 56px;
    --message-panel-padding-x: 24px;
  }

  .p-message-detail__content-panel::after {
    width: 7px;
    height: 200px;
    bottom: 160px;
  }

  .p-message-detail__body {
    padding: 0;
  }

  .p-message-detail__content {
    font-size: 1.2rem;
    line-height: 1.9;
  }

  .p-message-detail__lead {
    margin-bottom: 40px !important;
  }

  .p-message-detail__row,
  .p-message-detail__row--figure-left {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px 0;
  }

  .p-message-detail__row--figure-left .p-message-detail__row-figure {
    grid-column: auto;
    grid-row: auto;
    width: calc(100% + var(--message-panel-edge-outset));
    margin-right: 0;
    margin-left: calc(-1 * var(--message-panel-edge-outset));
  }

  .p-message-detail__row--figure-left .p-message-detail__row-text {
    grid-column: auto;
    grid-row: auto;
  }

  .p-message-detail__row--figure-right .p-message-detail__row-figure {
    width: calc(100% + var(--message-panel-edge-outset));
    margin-right: calc(-1 * var(--message-panel-edge-outset));
    margin-left: 0;
  }

  .p-message-detail__row--figure-right .p-message-detail__row-text,
  .p-message-detail__row--figure-left .p-message-detail__row-text {
    padding-left: 0;
    padding-right: 0;
  }

  .p-message-detail__row--figure-left .p-message-detail__row-text::after {
    right: auto;
    left: 0;
  }

  .p-message-detail__row--figure-right .p-message-detail__row-text::before,
  .p-message-detail__row--figure-left .p-message-detail__row-text::after {
    width: 3px;
  }
}

/* ナビゲーション */
.p-message-detail__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin-top: 78px;
}

.p-message-detail__nav-link {
  flex-shrink: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #de7cfe 0%, #0075ff 100%) border-box;
  background-color: transparent;
}

.p-message-detail__nav-link::before {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .p-message-detail__nav-link:hover {
    background:
      linear-gradient(90deg, #de7cfe 0%, #ffffff 50%) padding-box,
      linear-gradient(90deg, #de7cfe 0%, #0075ff 100%) border-box;
  }
}

.p-message-detail__nav-link:active {
  background:
    linear-gradient(270deg, #de7cfe 0%, #0075ff 100%) padding-box,
    linear-gradient(90deg, #de7cfe 0%, #0075ff 100%) border-box;
}

@media screen and (max-width: 768px) {
  .p-message-detail__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 48px;
    width: 100%;
  }

  .p-message-detail__nav-link {
    width: 136px;
    flex: 0 0 136px;
    height: 34px;
  }
}

/* 関連メッセージ */
.p-message-detail__related {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  margin-top: 120px;
  position: relative;
}

.p-message-detail__related:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100vw;
  height: 468px;
  background-image: linear-gradient(
    0deg,
    transparent,
    #afd7f6 40% 60%,
    transparent
  );
  z-index: -1;
}

.p-message-detail__related-item {
  display: block;
  width: min(43%, 520px);
  max-width: 520px;
  color: #000000;
  transition: transform 0.8s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-message-detail__related-item:not(.is-current):hover {
    transform: translateY(-4px);
  }

  .p-message-detail__related-item:not(.is-current):hover
    .p-message-detail__related-thumb::after {
    opacity: 1;
  }
}

.p-message-detail__related-item.is-current {
  pointer-events: none;
}

.p-message-detail__related-thumb {
  position: relative;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.22 / 1;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 74% 18%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 32%
    ),
    linear-gradient(135deg, #f4f6fb 0%, #e5e8f2 58%, #f5eefb 100%);
}

.p-message-detail__related-thumb::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 10px;
  background: linear-gradient(90deg, #1d2888 0%, #316e98 74%, #b989f2 100%);
}

.p-message-detail__related-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      circle at 112% 90%,
      rgba(222, 124, 254, 0.82) -10%,
      rgba(223, 124, 254, 0) 40%
    ),
    radial-gradient(
      circle at 52% 24%,
      rgba(19, 188, 246, 0.44) 0%,
      rgba(19, 188, 246, 0) 34%
    ),
    linear-gradient(135deg, #20208b 0%, #063081 48%, #7f7fdf 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.p-message-detail__related-item.is-current
  .p-message-detail__related-thumb::after {
  opacity: 1;
}

.p-message-detail__related-thumb-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.42;
  filter: blur(46px) brightness(1.15);
  transform: scale(1.2);
  z-index: 0;
}

.p-message-detail__related-item:not(.is-current)
  .p-message-detail__related-thumb-bg.is-pc {
  display: block;
}

.p-message-detail__related-thumb img.is-sp {
  display: none;
}

.p-message-detail__related-item:not(.is-current)
  .p-message-detail__related-thumb {
  background: #ffffff;
  box-shadow: inset 0 0 72px 40px rgba(255, 255, 255, 0.82);
}

.p-message-detail__related-thumb-img.is-pc {
  display: block;
}

.p-message-detail__related-thumb-img.is-sp {
  display: none;
}

.p-message-detail__related-thumb-img {
  position: relative;
  z-index: 1;
  width: 65%;
  aspect-ratio: 1.3 / 1;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.p-message-detail__related-label {
  margin: 18px 0 0;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #861c3c;
  text-align: center;
}

.p-message-detail__related-divider {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  margin-top: -44px;
}

@media screen and (max-width: 768px) {
  .p-message-detail__related {
    position: relative;
    left: auto;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    width: 100vw;
    max-width: 100vw;
    margin-top: 64px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
    transform: none;
  }

  .p-message-detail__related-item {
    flex: 0 0 calc((100vw - 32px) / 2);
    width: calc((100vw - 32px) / 2);
    max-width: none;
  }

  .p-message-detail__related-thumb {
    aspect-ratio: 0.56 / 1;
  }

  .p-message-detail__related-thumb::before {
    height: 8px;
  }

  .p-message-detail__related-thumb img.is-pc,
  .p-message-detail__related-thumb-img.is-pc {
    display: none;
  }

  .p-message-detail__related-thumb img.is-sp,
  .p-message-detail__related-thumb-img.is-sp {
    display: block;
  }

  .p-message-detail__related-thumb-img {
    width: 62%;
    height: 70%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center top;
  }

  .p-message-detail__related-divider {
    flex: 0 0 32px;
    width: 32px;
    margin-top: 0;
    padding-top: 40%;
    transform: none;
  }

  .p-message-detail__related-divider svg {
    width: 40px;
  }

  .p-message-detail__related-label {
    margin-top: 12px;
    font-size: 1.4rem;
  }

  .p-message-detail__related-item.is-current
    .p-message-detail__related-thumb::after {
    opacity: 0;
  }

  .p-message-detail__related-item:not(.is-active)
    .p-message-detail__related-thumb {
    background: #ffffff;
    box-shadow: inset 0 0 72px 40px rgba(255, 255, 255, 0.82);
  }

  .p-message-detail__related-item.is-active
    .p-message-detail__related-thumb-bg.is-sp {
    display: none;
  }

  .p-message-detail__related-item:not(.is-active)
    .p-message-detail__related-thumb-bg.is-sp {
    display: block;
  }

  .p-message-detail__related-item.is-active
    .p-message-detail__related-thumb::after {
    opacity: 1;
  }
}

/* ==========================================================================
   HISTORY PAGE  /history/
========================================================================== */

/* --------------------------------------------------------------------------
   Section wrapper
-------------------------------------------------------------------------- */
.p-history {
  position: relative;
  z-index: 40;
  padding: 110px 0 0;
}

@media screen and (max-width: 768px) {
  .p-history {
    padding-top: 70px;
    padding-bottom: 120px;
  }
}

.p-history .c-section-head--history .c-section-head__img {
  width: 32px;
}

@media screen and (max-width: 768px) {
  .p-history .c-section-head--history .c-section-head__img {
    width: 32px;
  }
}

/* --------------------------------------------------------------------------
   FV：ブランド + セクションヘッド + ナビを 1 画面に収める
-------------------------------------------------------------------------- */
.p-history__fv {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100svh;
  margin-top: -110px;
  padding: 0;
  background: transparent;
}

.p-history__brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: 1366px;
  margin: 0 auto 40px;
  padding: 0 0 80px;
  min-height: clamp(480px, 54vw, 680px);
}

.p-history__brand-copy {
  flex-shrink: 0;
  max-width: none;
  font-size: clamp(24px, calc(44 / 1366 * 100vw), 44px);
}

.p-about .p-history__brand-copy,
.p-vision .p-history__brand-copy {
  transform: none;
}

.p-history__brand-visual {
  position: relative;
  z-index: 2;
  min-height: clamp(400px, 50vw, 620px);
  margin: 0 -24px;
}

.p-history__brand-logo {
  flex-shrink: 0;
  justify-self: end;
  width: 23.4260614934vw;
  max-width: 320px;
}

.p-history__brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .p-history__brand {
    grid-template-columns: minmax(0, 0.9fr) minmax(240px, 1.4fr) minmax(
        0,
        0.9fr
      );
    min-height: clamp(400px, 60vw, 560px);
    padding: 48px 24px 64px;
    margin-bottom: 96px;
  }

  .p-history__brand-copy {
    max-width: none;
  }

  .p-history__brand-visual {
    min-height: clamp(320px, 48vw, 480px);
  }

  .p-history__brand-logo {
    width: 23.4260614934vw;
    max-width: 320px;
  }
}

@media screen and (max-width: 768px) {
  .p-history__brand {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 56px;
    padding: 0;
    gap: 20px;
  }

  .p-history__brand-copy {
    display: none;
  }

  .p-history__brand-visual {
    width: 100%;
    min-height: clamp(280px, 72vw, 400px);
    margin: 0;
  }

  .p-history__brand-logo {
    justify-self: center;
    width: 46.9333333333vw;
    max-width: 100%;
  }
}

/* HISTORY / ABOUT / VISION — FV ブランド（WebGL + ロゴ） */
.p-history .p-history__brand,
.p-about .p-history__brand,
.p-vision .p-history__brand {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-width: none;
  margin: -110px 0 0;
  padding: 40px 0;
  display: block;
}

.p-history .p-history__brand-inner,
.p-about .p-history__brand-inner,
.p-vision .p-history__brand-inner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 110px 24px 40px;
  box-sizing: border-box;
  will-change: opacity, filter;
}

.p-history .p-history__brand-inner.is-brand-fv-hidden,
.p-about .p-history__brand-inner.is-brand-fv-hidden,
.p-vision .p-history__brand-inner.is-brand-fv-hidden {
  visibility: hidden;
  pointer-events: none;
}

.p-history .p-history__brand-copy,
.p-about .p-history__brand-copy,
.p-vision .p-history__brand-copy {
  grid-column: 1;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

.p-history .p-history__brand-visual,
.p-about .p-history__brand-visual,
.p-vision .p-history__brand-visual {
  grid-column: 2;
}

.p-history .p-history__brand-logo,
.p-about .p-history__brand-logo,
.p-vision .p-history__brand-logo {
  grid-column: 3;
  justify-self: end;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

.p-history .p-history__brand-logo img,
.p-about .p-history__brand-logo img,
.p-vision .p-history__brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-history .p-history__fv-head,
.p-about .p-history__fv-head,
.p-vision .p-history__fv-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  margin-bottom: 0;
  padding-top: 110px;
  text-align: left;
  pointer-events: auto;
}

@media screen and (max-width: 768px) {
  .p-history .p-history__brand,
  .p-about .p-history__brand,
  .p-vision .p-history__brand {
    --history-brand-logo-width: 46.9333333333vw;
    --history-brand-logo-max: 176px;
    --history-brand-logo-gap: clamp(20px, calc(32 / 384 * 100vw), 36px);
    --history-brand-fv-offset: calc(
      70px + 1.1rem + clamp(6px, calc(8 / 384 * 100vw), 10px) + 0.25rem
    );
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .p-history .p-history__brand-inner,
  .p-about .p-history__brand-inner,
  .p-vision .p-history__brand-inner {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1;
    padding: 0;
    gap: 0;
    grid-template-columns: none;
  }

  .p-history .p-history__brand-copy,
  .p-about .p-history__brand-copy,
  .p-vision .p-history__brand-copy {
    display: none;
  }

  .p-history .p-history__brand-visual,
  .p-about .p-history__brand-visual,
  .p-vision .p-history__brand-visual {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  .p-history .p-history__brand-logo,
  .p-about .p-history__brand-logo,
  .p-vision .p-history__brand-logo {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    width: var(--history-brand-logo-width);
    max-width: var(--history-brand-logo-max);
    margin: 0 auto var(--history-brand-logo-gap);
    justify-self: center;
  }

  .p-history .p-history__fv-head,
  .p-about .p-history__fv-head,
  .p-vision .p-history__fv-head {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 20;
    width: 100%;
    padding-top: 0;
    margin-bottom: 0;
    pointer-events: auto;
  }

  .p-history .p-history__fv-head .p-detail__breadcrumb,
  .p-about .p-history__fv-head .p-detail__breadcrumb,
  .p-vision .p-history__fv-head .p-detail__breadcrumb {
    margin-bottom: clamp(6px, calc(8 / 384 * 100vw), 10px);
  }
}

/* セクションヘッド（中央揃え） */
.p-history__fv-head {
  position: relative;
  z-index: 10;
  padding-bottom: 0;
  margin-bottom: 64px;
  text-align: center;
}

.p-history__section-head {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

.p-history .p-history__section-head {
  position: relative;
  z-index: 25;
  margin-top: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 1366px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 70px;
  padding-right: 70px;
}

.p-history .p-history__fv-nav {
  position: relative;
  z-index: 25;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .p-history .p-history__section-head {
    margin-top: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .p-history .p-history__fv-nav {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* INTRODUCTION グラデーションボックス */
.p-history__intro {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 40px auto 0;
  padding: 34px 78px 58px;
  background: linear-gradient(
    105deg,
    #8ed4ef 0%,
    #182286 40%,
    #2d74d9 68%,
    #bb8def 100%
  );
}

.p-history__intro-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.p-history__intro-label {
  display: inline-block;
  min-width: 240px;
  margin-bottom: 24px;
  padding: 7px 28px 8px;
  background: linear-gradient(90deg, #de7cfe 0%, #2f82ff 100%);
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #000000;
}

.p-history__intro-text {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 2;
  color: #fff;
  text-align: left;
}

.p-history__intro-bg {
  max-width: 1240px;
  margin: 0 auto;
}

.p-history__intro-bg-img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .p-history__intro {
    padding: 28px 24px 40px;
    margin: 32px 0 0;
  }

  .p-history__intro-label {
    min-width: 190px;
    margin-bottom: 20px;
    font-size: 1.2rem;
  }

  .p-history__intro-text {
    font-size: 1.4rem;
    line-height: 1.9;
    font-weight: 500;
  }
}

/* --------------------------------------------------------------------------
   タイムライン
-------------------------------------------------------------------------- */
.p-history__timeline {
  --era-transition-top: 170px;
  position: relative;
  overflow: visible;
}

/* スクロール連動：タイムライン縦ライン */
.p-history__timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.p-history__timeline-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #0075ff 0%, #de7cfe 100%);
  transform-origin: top center;
  will-change: height;
}

@media screen and (max-width: 768px) {
  .p-history__timeline {
    --era-transition-top: 90px;
  }

  .p-history__timeline-line {
    left: 20px;
    transform: none;
  }
}

/* 右側スティッキー年代ラベル */
.p-history__era-nav {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.p-history__era-nav.is-visible {
  opacity: 1;
  visibility: visible;
}

.p-history__era-nav-item {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  padding: 12px 8px;
  border-left: 2px solid #861c3c;
}

.p-history__era-nav-item.is-active {
  display: flex;
}

.p-history__era-nav-range {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: #861c3c;
  writing-mode: vertical-rl;
  line-height: 1;
}

.p-history__era-nav-sub {
  font-size: 1rem;
  color: rgba(134, 28, 60, 0.65);
  writing-mode: vertical-rl;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .p-history__era-nav {
    display: none;
  }
}

/* 各時代ブロック */
.p-history__era {
  --era-circle-size: 262px;
  --era-circle-half: calc(var(--era-circle-size) / 2);
  position: relative;
  padding: 80px 0 40px;
  overflow: visible;
  background: transparent;
}

.p-history__era .figure01 {
  position: absolute;
  top: 90px;
  right: 10vw;
  z-index: 0;
  width: 104px;
}

.p-history__era .figure02 {
  position: absolute;
  bottom: 30px;
  right: 9vw;
  z-index: 0;
  width: 26px;
}

.p-history__era .figure03 {
  position: absolute;
  top: 770px;
  left: 10vw;
  z-index: 0;
  width: 50px;
}

.p-history__era .figure05 {
  position: absolute;
  top: 1250px;
  right: 9vw;
  z-index: 0;
  width: 26px;
}

.p-history__era .figure06 {
  position: absolute;
  top: 510px;
  left: 7vw;
  z-index: 0;
  width: 121px;
}

.p-history__era .figure07 {
  position: absolute;
  top: 1780px;
  left: 6vw;
  z-index: 0;
  width: 104px;
}

.p-history__era .figure08 {
  position: absolute;
  top: 770px;
  right: 7vw;
  z-index: 0;
  width: 121px;
}

.p-history__era .figure09 {
  position: absolute;
  top: 1740px;
  left: 7vw;
  z-index: 0;
  width: 90px;
}

.p-history__era .figure10 {
  position: absolute;
  top: 550px;
  left: 6vw;
  z-index: 1;
  width: 26px;
}

.p-history__era .figure11 {
  position: absolute;
  top: 240px;
  right: 10.4vw;
  z-index: 0;
  width: 26px;
}

.p-history__era .figure14 {
  position: absolute;
  top: 1180px;
  left: 5vw;
  z-index: 0;
  width: 140px;
}

.p-history__era .figure15 {
  position: absolute;
  top: 1420px;
  right: 7vw;
  z-index: 0;
  width: 110px;
}

.p-history__era::before {
  content: "";
  position: absolute;
  top: 270px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 800px;
  width: 90%;
  z-index: 1;
  pointer-events: none;
  background: url("/150anniversary/assets/images/history/era-section-bg.png") center top / 100%
    100% no-repeat;
}

.p-history__era:has(+ .p-history__era)::before {
  bottom: calc(-1 * var(--era-transition-top));
}

.p-history__era + .p-history__era::before {
  top: var(--era-transition-top);
}

/* 次の時代の circle 上半分が重なる余白 */
.p-history__era:has(+ .p-history__era) {
  padding-bottom: calc(var(--era-circle-half) + 169px);
}

/* 2つ目以降：circle 中心をセクション境界に合わせる */
.p-history__era + .p-history__era {
  padding-top: 0;
}

@media screen and (max-width: 768px) {
  .p-history__era {
    --era-circle-size: 170px;
    padding: 0 0 32px;
  }

  .p-history__era:has(+ .p-history__era) {
    padding-bottom: calc(var(--era-circle-half) + 100px);
  }

  .p-history__era .figure01 {
    right: 1vw;
    top: 1272px;
    width: 28px;
  }

  .p-history__era .figure02 {
    top: 70px;
    left: 2vw;
  }
  .p-history__era .figure03 {
    top: 1020px;
    left: 0.4vw;
    z-index: 1;
    width: 20px;
  }

  .p-history__era .figure05 {
    top: 720px;
    right: 1.3vw;
    width: 18px;
  }

  .p-history__era .figure06 {
    top: 260px;
    left: -1.3vw;
    width: 34px;
  }

  .p-history__era .figure07 {
    top: 1120px;
    left: 3vw;
    width: 44px;
  }

  .p-history__era .figure08 {
    top: 360px;
    right: -0.5vw;
    width: 28px;
  }

  .p-history__era .figure09 {
    top: 980px;
    left: -2.2vw;
    width: 42px;
  }

  .p-history__era .figure10 {
    top: 180px;
    left: 4vw;
    width: 18px;
  }

  .p-history__era .figure11 {
    top: 560px;
    right: 3vw;
    width: 18px;
  }

  .p-history__era .figure14 {
    top: 820px;
    left: -3vw;
    width: 72px;
  }

  .p-history__era .figure15 {
    top: 1180px;
    right: -2vw;
    width: 62px;
  }

  .p-history__era::before,
  .p-history__era-inner {
    width: min(292px, calc(292 / 384 * 100vw));
    max-width: min(292px, calc(292 / 384 * 100vw));
    margin-left: auto;
    margin-right: auto;
  }

  .p-history__era::before {
    top: 200px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(/150anniversary/assets/images/history/era-section-bg-sp.png) center top /
      100% 100% no-repeat;
  }
}

/* フラクタル背景（トップページと同じコンポーネント） */
.p-history__era .home-history__fractal,
.p-history__era .home-about__fractal,
.p-history__era .home-interview__fractal {
  z-index: 0;
}

.p-history__era .home-history__fractal-img,
.p-history__era .home-about__fractal-img,
.p-history__era .home-interview__fractal-img {
  opacity: 0.5;
}

/* 内側コンテンツ */
.p-history__era-inner {
  position: relative;
  z-index: 10;
  max-width: 800px;
}

/* 時代ラベル（中央軸上） */
.p-history__era-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 76px;
  text-align: center;
}

.p-history__era-label-range {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 4.6rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #000;
}

.p-history__era-label-sub {
  font-family: "Noto Serif Japanese", serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #000;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .p-history__era-label {
    align-items: flex-start;
    margin-bottom: 20px;
    text-align: left;
  }

  .p-history__era-label-range {
    font-size: 1.8rem;
  }

  .p-history__era-label-sub {
    font-size: 1.3rem;
  }
}

/* センターライン本体 */
.p-history__era-body {
  position: relative;
}

.p-history__era-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  width: min(100%, 920px);
  height: calc(100% - 120px);
  background: radial-gradient(
    ellipse 80% 40% at 50% 0%,
    rgba(189, 222, 248, 0.55) 0%,
    rgba(189, 222, 248, 0.2) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  pointer-events: none;
  z-index: 0;
}

.p-history__era-line {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-history__era-line {
    display: none;
  }
}

/* 時代開始：ラベル + 円 + キャプション */
.p-history__era-start {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;
}

/* 年代円 */
.p-history__era-circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(200px, 22vw, 300px);
  height: clamp(200px, 22vw, 300px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 32px rgba(100, 100, 200, 0.12);
}

.p-history__era-circle .bar01 {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 4px;
}

/* グラデーションボーダー */
.p-history__era-circle::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  z-index: -1;
}

.p-history__era-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
}

.p-history__era-circle-year {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(4.8rem, 6.5vw, 9.3rem);
  line-height: 1;
  color: #000;
}

.p-history__era-circle-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.p-history__era-circle-chevron {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.p-history__era-circle-chevron i {
  display: block;
}

/* キャプション */
.p-history__era-caption {
  margin: 28px 0 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #000;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 768px) {
  .p-history__era-start {
    align-items: flex-start;
    padding-left: 48px;
    margin-bottom: 48px;
  }

  .p-history__column .figure01 {
    display: none;
  }

  .p-history__column-inner {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }

  .p-history__era-circle {
    width: clamp(140px, 36vw, 180px);
    height: clamp(140px, 36vw, 180px);
    padding-bottom: 16px;
  }

  .p-history__era-circle-year {
    font-size: clamp(3.2rem, 9vw, 4.4rem);
  }

  .p-history__era-circle-label {
    font-size: 1.2rem;
    margin-top: 4px;
  }

  .p-history__era-circle-chevron {
    bottom: 16px;
    font-size: 1rem;
  }

  .p-history__era-caption {
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.7;
    margin-top: 20px;
  }
}

/* 1881：左側ビジュアル */
.p-history__era-visual {
  position: absolute;
  z-index: 4;
  margin: 0;
  width: min(38%, 360px);
}

.p-history__era-visual--left {
  left: 0;
  top: clamp(400px, 42vw, 560px);
}

.p-history__era-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.p-history__era-visual-caption {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

/* イベントラッパー（フロート要素用） */
.p-history__events-wrap {
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

.p-history__event-float {
  position: absolute;
  z-index: 3;
  margin: 0;
}

.p-history__event-float--portrait {
  top: 0;
  right: 0;
  width: min(34%, 300px);
}

.p-history__events-wrap:has(.p-history__event-float--portrait) {
  min-height: 480px;
}

.p-history__event-float-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 480px;
  object-fit: cover;
  object-position: top center;
}

.p-history__event-float-caption {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-history__era-visual {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 280px;
    margin: 32px 0 0;
  }

  .p-history__event-float--portrait {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 240px;
    margin: 0 0 32px auto;
  }

  .p-history__event-float-img {
    max-height: none;
  }

  .p-history__events-wrap {
    margin-top: 32px;
  }
}

/* イベントリスト */
.p-history__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

@media screen and (max-width: 768px) {
  .p-history__events {
    gap: 64px;
  }
}

/* 個別イベント */
.p-history__event {
  position: relative;
  min-height: 100px;
}

.p-history__event:has(.p-history__event-media) {
  min-height: 280px;
}

/* 中央ドット（era-circle と同じグラデーションリング構造） */
.p-history__event::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  box-shadow: 0 4px 32px rgba(100, 100, 200, 0.12);
  z-index: 5;
}

.p-history__event::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  z-index: 6;
}

.p-history__event.is-active::before {
  width: 24px;
  height: 24px;
}

.p-history__event.is-active::after {
  width: 20px;
  height: 20px;
  animation: p-history-marker-pulse 1.8s ease-in-out infinite;
}

@keyframes p-history-marker-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-history__event.is-active::after,
  .p-history__milestone.is-active::after,
  .p-history__era-start.is-active .p-history__era-circle {
    animation: none;
  }
}

/* ── 情報ブロック ── */
.p-history__event-info {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}

.p-history__event--info-right .p-history__event-info,
.p-history__event:not(.p-history__event--rev):not(.p-history__event--info-left)
  .p-history__event-info {
  width: 50%;
  margin-left: 50%;
  padding-left: 40px;
  text-align: left;
}

.p-history__event--info-right:not(.p-history__event--media-left):not(
    .p-history__event--media-right
  )
  .p-history__event-info {
  max-width: calc(50% + 240px);
}

.p-history__event--info-left .p-history__event-info,
.p-history__event--rev .p-history__event-info {
  width: 50%;
  margin-left: 0;
  margin-right: auto;
  padding-right: 40px;
  text-align: right;
}

/* ── メディアブロック（absolute配置） ── */
.p-history__event-media {
  position: absolute;
  z-index: 2;
  width: min(38%, 360px);
  margin: 0;
}

/* 左配置（デフォルト） */
.p-history__event--media-left .p-history__event-media,
.p-history__event:not(.p-history__event--rev):not(
    .p-history__event--media-right
  )
  .p-history__event-media {
  left: 0;
  right: auto;
  top: 0;
}

/* 右配置 */
.p-history__event--media-right .p-history__event-media,
.p-history__event--rev .p-history__event-media {
  left: auto;
  right: 0;
  top: 0;
}

/* 左：情報の下に画像 */
.p-history__event--info-left.p-history__event--media-left {
  min-height: 520px;
}

.p-history__event--info-left.p-history__event--media-left
  .p-history__event-media {
  left: 0;
  right: auto;
  top: clamp(160px, 18vw, 220px);
}

/* 1883：肖像フロート分 */
.p-history__events-wrap:has(.p-history__event-float--portrait)
  .p-history__event:first-child {
  min-height: 60px;
}

/* 旧モディファイア互換 */
.p-history__event--side-right .p-history__event-info {
  width: 50%;
  margin-left: 50%;
  padding-left: 40px;
  text-align: left;
}

.p-history__event--side-right .p-history__event-media {
  left: auto;
  right: 0;
  top: clamp(160px, 18vw, 220px);
}

.p-history__event--side-left .p-history__event-info {
  width: 50%;
  margin-right: auto;
  padding-right: 40px;
  text-align: right;
}

.p-history__event--side-left .p-history__event-media {
  left: 0;
  right: auto;
  top: clamp(160px, 18vw, 220px);
}

/* 写真 */
.p-history__event-figure {
  margin: 0;
}

.p-history__event-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-history__event--info-left.p-history__event--media-left
  .p-history__event-figure {
  margin-left: auto;
}

.p-history__event--media-left .p-history__event-figure {
  margin-right: auto;
}

.p-history__event--media-right .p-history__event-figure,
.p-history__event--rev .p-history__event-figure {
  margin-left: auto;
}

.p-history__event-caption {
  display: block;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin-top: 10px;
  line-height: 1.6;
  text-align: center;
}

/* 年 */
.p-history__event-year {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(5rem, 7.5vw, 9.6rem);
  line-height: 0.92;
  color: #000;
  letter-spacing: -0.03em;
}

.p-history__event-era {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.04em;
  margin: 4px 0 20px;
}

.p-history__event-title {
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.7;
  color: #000;
}

@media screen and (max-width: 768px) {
  .p-history__event {
    padding-left: 48px;
    min-height: 0;
  }

  .p-history__event:has(.p-history__event-media) {
    min-height: 0;
    padding-bottom: 24px;
  }

  .p-history__event--info-left.p-history__event--media-left {
    min-height: 0;
  }

  .p-history__event::before {
    left: 20px;
    top: 28px;
    transform: translateY(-50%);
  }

  .p-history__event::after {
    left: 20px;
    top: 28px;
    transform: translateY(-50%);
  }

  .p-history__event.is-active::before {
    width: 20px;
    height: 20px;
  }

  .p-history__event.is-active::after {
    width: 16px;
    height: 16px;
  }

  .p-history__event-info,
  .p-history__event--info-right .p-history__event-info,
  .p-history__event--info-left .p-history__event-info,
  .p-history__event--rev .p-history__event-info,
  .p-history__event:not(.p-history__event--rev):not(
      .p-history__event--info-left
    )
    .p-history__event-info {
    width: 100%;
    margin-left: 0;
    padding: 0;
    text-align: left;
    max-width: none;
  }

  .p-history__event-media,
  .p-history__event--media-left .p-history__event-media,
  .p-history__event--media-right .p-history__event-media,
  .p-history__event--rev .p-history__event-media,
  .p-history__event--info-left.p-history__event--media-left
    .p-history__event-media,
  .p-history__event:not(.p-history__event--rev):not(
      .p-history__event--media-right
    )
    .p-history__event-media {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 280px;
    margin-top: 24px;
  }

  .p-history__event--info-left .p-history__event-figure,
  .p-history__event--media-left .p-history__event-figure,
  .p-history__event--media-right .p-history__event-figure,
  .p-history__event--rev .p-history__event-figure {
    margin-left: 0;
    margin-right: 0;
  }

  .p-history__events-wrap:has(.p-history__event-float--portrait)
    .p-history__event:first-child {
    min-height: 0;
  }

  .p-history__event-year {
    font-size: clamp(3.6rem, 12vw, 5.6rem);
  }

  .p-history__event-era {
    font-size: 1.2rem;
    margin-bottom: 14px;
  }

  .p-history__event-title {
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   1915 マイルストーン + 時代移行
-------------------------------------------------------------------------- */
.p-history__milestone {
  position: relative;
  min-height: clamp(560px, 65vw, 720px);
  margin-top: 120px;
  padding-bottom: 80px;
}

.p-history__milestone::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  box-shadow: 0 4px 32px rgba(100, 100, 200, 0.12);
  z-index: 5;
}

.p-history__milestone::after {
  content: "";
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  z-index: 6;
}

.p-history__milestone.is-active::before {
  width: 24px;
  height: 24px;
}

.p-history__milestone.is-active::after {
  width: 20px;
  height: 20px;
  animation: p-history-marker-pulse 1.8s ease-in-out infinite;
}

.p-history__era-start.is-active .p-history__era-circle {
  animation: p-history-era-pulse 2s ease-in-out infinite;
}

@keyframes p-history-era-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.p-history__milestone-visual {
  position: absolute;
  z-index: 3;
  margin: 0;
  width: min(32%, 280px);
}

.p-history__milestone-visual--doc {
  left: 0;
  top: 0;
}

.p-history__milestone-visual--building {
  right: 0;
  top: 48px;
}

.p-history__milestone-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.p-history__milestone-visual-caption {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

.p-history__milestone-body {
  position: relative;
  z-index: 4;
  padding-top: 8px;
  text-align: center;
}

.p-history__milestone-year {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(5rem, 7.5vw, 9.6rem);
  line-height: 0.92;
  color: #000;
  letter-spacing: -0.03em;
}

.p-history__milestone-era {
  display: block;
  margin-top: 4px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.04em;
}

.p-history__milestone-title {
  margin: 20px 0 0;
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  font-weight: 600;
  line-height: 1.7;
  color: #000;
}

.p-history__milestone-graphic {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  width: min(58%, 520px);
  z-index: 2;
  pointer-events: none;
}

.p-history__milestone-graphic-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Era 2：移行エリア */
.p-history__era--transition {
  margin-top: -60px;
  padding-top: 160px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(210, 190, 240, 0.25) 12%,
    rgba(189, 222, 248, 0.45) 40%,
    rgba(255, 255, 255, 0.9) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.p-history__era--transition .p-history__era-body::before {
  background: radial-gradient(
    ellipse 70% 50% at 50% 20%,
    rgba(180, 150, 230, 0.35) 0%,
    rgba(189, 222, 248, 0.15) 50%,
    rgba(255, 255, 255, 0) 75%
  );
}

.p-history__era--transition .p-history__era-start {
  margin-top: 0;
  margin-bottom: 80px;
}

.p-history__era-visual--honda {
  left: 0;
  top: clamp(100px, 12vw, 160px);
  width: min(32%, 280px);
}

@media screen and (max-width: 768px) {
  .p-history__milestone {
    min-height: 0;
    margin-top: 64px;
    padding-bottom: 48px;
  }

  .p-history__milestone-visual {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 260px;
    margin-bottom: 24px;
  }

  .p-history__milestone-visual--building {
    margin-left: auto;
  }

  .p-history__milestone-graphic {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: min(100%, 320px);
    margin: 40px auto 0;
  }

  .p-history__era--transition {
    padding-top: 80px;
  }

  .p-history__era-visual--honda {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 260px;
    margin: 32px 0 0;
  }
}

/* 2031 Future */
.p-history__future {
  text-align: center;
  padding: 80px 0 40px;
}

.p-history__future-year {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(8rem, 14vw, 18rem);
  line-height: 1;
  background: linear-gradient(135deg, #6495ed 0%, #9a66ea 50%, #de7cfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.p-history__future-text {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.3em;
  color: rgba(100, 149, 237, 0.8);
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  .p-history__future {
    padding: 48px 0 24px;
  }
  .p-history__future-year {
    font-size: clamp(6rem, 22vw, 10rem);
  }
  .p-history__future-text {
    font-size: 1.4rem;
    letter-spacing: 0.15em;
  }
}

/* --------------------------------------------------------------------------
   TOPICS
-------------------------------------------------------------------------- */
.p-history__topics {
  position: relative;
  padding-top: 100px;
}

@media screen and (max-width: 768px) {
  .p-history__topics {
    padding-top: 72px;
  }
}

/* 右固定：TOPICS サイドナビ */
.p-history__topics-side {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 12px 4px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.p-history__topics-side.is-visible {
  opacity: 1;
  visibility: visible;
}

.p-history__topics-side-label {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
  color: rgba(134, 28, 60, 0.55);
  writing-mode: vertical-rl;
  text-align: center;
}

.p-history__topics-side-label [data-topics-num] {
  letter-spacing: 0.1em;
}

.p-history__topics-side-bars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.p-history__topics-side-bar {
  display: block;
  width: 2px;
  height: 18px;
  background: rgba(134, 28, 60, 0.18);
  transition:
    background 0.35s ease,
    height 0.35s ease;
}

.p-history__topics-side-bar.is-active {
  height: 26px;
  background: #861c3c;
}

@media screen and (max-width: 768px) {
  .p-history__topics-side {
    display: none;
  }
}
.p-history__topics-head {
  text-align: center;
  padding: 0 24px 64px;
}

.p-history__topics-en {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(5rem, 9vw, 12rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.p-history__topics-jp {
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  color: #888;
  margin-bottom: 32px;
}

.p-history__topics-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(
    180deg,
    rgba(100, 149, 237, 0.8),
    rgba(154, 102, 234, 0.8)
  );
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-history__topics-head {
    padding-bottom: 48px;
  }
  .p-history__topics-en {
    font-size: clamp(4rem, 14vw, 7rem);
  }
}

/* 各トピック共通 */
.p-history__topic {
  padding: 80px 0;
  border-top: 1px solid rgba(134, 28, 60, 0.12);
}

@media screen and (max-width: 768px) {
  .p-history__topic {
    padding: 56px 0;
  }
}

.p-history__topic-head {
  text-align: center;
  margin-bottom: 56px;
}

.p-history__topic-num {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(4rem, 6vw, 6.4rem);
  line-height: 1;
  color: #8ec4ef;
  margin-bottom: 12px;
}

.p-history__topic-title {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 2.8vw, 3.2rem);
  letter-spacing: 0.05em;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.2;
}

.p-history__topic-subtitle {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 24px;
}

.p-history__topic-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(100, 149, 237, 0.8),
    rgba(154, 102, 234, 0.8)
  );
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-history__topic-head {
    margin-bottom: 36px;
  }
}

/* --------------------------------------------------------------------------
   Topic 01: RESEARCH
-------------------------------------------------------------------------- */
.p-history__research-scroll {
  position: relative;
  height: calc(var(--research-steps, 3) * 100vh);
}

.p-history__research-scroll[data-research-steps="3"] {
  --research-steps: 3;
}

.p-history__research-steps {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.p-history__research-step {
  height: calc(100% / var(--research-steps, 3));
}

.p-history__research-sticky {
  position: sticky;
  top: 120px;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 240px);
  padding: 40px 0 80px;
}

.p-history__research {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  width: 100%;
}

/* 左：写真 */
.p-history__research-media {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
}

.p-history__research-thumb {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.p-history__research-thumb.is-active {
  opacity: 1;
  visibility: visible;
}

.p-history__research-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右：リスト + テキスト */
.p-history__research-body {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.p-history__research-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-history__research-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 12px 0;
  color: #c5c5c5;
  transition: color 0.35s ease;
}

.p-history__research-item.is-active {
  color: #000;
}

.p-history__research-num {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  white-space: nowrap;
  line-height: 1.3;
  color: inherit;
}

.p-history__research-name {
  font-size: clamp(1.4rem, 1.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.55;
  color: inherit;
}

.p-history__research-item.is-active .p-history__research-name {
  font-size: clamp(1.6rem, 1.8vw, 1.9rem);
}

.p-history__research-desc {
  position: relative;
  margin-top: 32px;
  padding-top: 28px;
  min-height: 150px;
  max-height: 150px;
  overflow: hidden;
}

.p-history__research-desc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(100, 149, 237, 0.15) 0%,
    rgba(154, 102, 234, 0.6) 50%,
    rgba(100, 149, 237, 0.15) 100%
  );
}

.p-history__research-desc-item {
  position: absolute;
  inset: 28px 0 0;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.85;
  color: #333;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.p-history__research-desc-item.is-active {
  position: absolute;
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .p-history__research-scroll {
    height: calc(var(--research-steps, 3) * 80vh);
  }

  .p-history__research-sticky {
    position: sticky;
    top: 80px;
    min-height: calc(80vh - 160px);
    padding: 0 0 48px;
  }

  .p-history__research {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-history__research-media {
    max-width: none;
  }

  .p-history__research-desc {
    min-height: 130px;
    max-height: 130px;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Topic 02: ALUMNI
-------------------------------------------------------------------------- */
.p-history__topic--alumni {
  position: relative;
  overflow: hidden;
  padding-bottom: 120px;
}

.p-history__topic--alumni .p-history__topic-subtitle {
  color: #1a1a1a;
}

.p-history__alumni {
  position: relative;
  padding-top: 8px;
}

.p-history__alumni-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.p-history__alumni-fractal {
  position: absolute;
  top: 50%;
  width: min(28vw, 320px);
  transform: translateY(-50%);
  opacity: 0.55;
}

.p-history__alumni-fractal--left {
  left: 0;
}

.p-history__alumni-fractal--right {
  right: 0;
}

.p-history__alumni-fractal-img {
  display: block;
  width: 100%;
  height: auto;
}

.p-history__alumni-sphere {
  position: absolute;
  top: 8%;
  right: 12%;
  width: clamp(56px, 6vw, 88px);
}

.p-history__alumni-sphere-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(100, 149, 237, 0.25));
}

.p-history__alumni-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 0;
}

.p-history__alumni-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.p-history__alumni-list {
  --alumni-card-width: clamp(250px, 22vw, 322px);
  --alumni-card-gap: clamp(16px, 2.4vw, 40px);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--alumni-card-gap);
  list-style: none;
  margin: 0;
  padding: 24px calc(50% - (var(--alumni-card-width) / 2)) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.p-history__alumni-list::-webkit-scrollbar {
  display: none;
}

.p-history__alumni-item {
  flex: 0 0 var(--alumni-card-width);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.p-history__alumni-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
}

.p-history__alumni-visual {
  position: relative;
  width: 100%;
  max-width: var(--alumni-card-width);
  aspect-ratio: 55 / 94;
  margin: 0 auto;
  transition: transform 0.45s cubic-bezier(0.32, 0.94, 0.6, 1);
}

.p-history__alumni-item.is-active .p-history__alumni-visual {
  transform: scale(1);
}

.p-history__alumni-item:not(.is-active) .p-history__alumni-visual {
  transform: scale(0.93);
}

.p-history__alumni-hex-shell {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  clip-path: polygon(50% 0%, 100% 21%, 100% 79%, 50% 100%, 0% 79%, 0% 21%);
  clip-path: url(#alumni-hex-clip);
  background: linear-gradient(
    180deg,
    #452768 0%,
    #6640a0 38%,
    #8f62c4 68%,
    #b57fd8 100%
  );
  filter: drop-shadow(0 0 12px rgba(154, 102, 234, 0.26));
}

.p-history__alumni-hex {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #edf1f9;
}

.p-history__alumni-photo {
  position: relative;
  flex: 0 0 68%;
  min-height: 0;
  overflow: hidden;
  background: #d8dce6;
}

.p-history__alumni-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  transition: transform 0.5s ease;
}

.p-history__alumni-item.is-active .p-history__alumni-img {
  transform: scale(1.04);
}

.p-history__alumni-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(154, 102, 234, 0.65) 0%,
    rgba(100, 149, 237, 0.5) 55%,
    rgba(134, 28, 60, 0.38) 100%
  );
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.p-history__alumni-item.is-active .p-history__alumni-overlay {
  opacity: 0;
}

.p-history__alumni-open {
  position: absolute;
  right: 3.5%;
  bottom: 7.5%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0075ff 0%, #6a52d8 52%, #de7cfe 100%);
  box-shadow: 0 2px 10px rgba(0, 117, 255, 0.34);
  transform: translate(28%, 28%);
  pointer-events: none;
}

.p-history__alumni-open i {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  transform: rotate(-45deg);
}

.p-history__alumni-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 20px 26px;
  background: #edf1f9;
  text-align: center;
}

.p-history__alumni-label {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
}

.p-history__alumni-name {
  margin: 0 0 4px;
  font-size: clamp(1.65rem, 1.75vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.p-history__alumni-role {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #1a1a1a;
}

.p-history__alumni-item:not(.is-active) .p-history__alumni-meta {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .p-history__topic--alumni {
    padding-bottom: 72px;
  }

  .p-history__alumni-list {
    --alumni-card-width: min(78vw, 268px);
    --alumni-card-gap: 12px;
    padding-top: 12px;
  }

  .p-history__alumni-fractal {
    width: 36vw;
    opacity: 0.35;
  }

  .p-history__alumni-sphere {
    top: 2%;
    right: 6%;
    width: 48px;
  }

  .p-history__alumni-open {
    width: 28px;
    height: 28px;
    right: 2%;
    bottom: 6%;
    transform: translate(24%, 24%);
  }

  .p-history__alumni-open i {
    font-size: 1.1rem;
  }

  .p-history__alumni-name {
    font-size: 1.45rem;
  }

  .p-history__alumni-label {
    font-size: 1.1rem;
  }

  .p-history__alumni-meta {
    padding: 12px 14px 22px;
  }
}

/* ポップアップ */
.p-history__alumni-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.p-history__alumni-popup[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.p-history__alumni-popup-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 380px) 1fr;
  gap: 0;
  background: #fff;
  max-width: 800px;
  width: calc(100% - 48px);
  max-height: 90vh;
  overflow: auto;
}

.p-history__alumni-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.p-history__alumni-popup-close:hover {
  background: rgba(134, 28, 60, 0.9);
}

.p-history__alumni-popup-photo {
  overflow: hidden;
}

.p-history__alumni-popup-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.p-history__alumni-popup-content {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-history__alumni-popup-label {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 8px;
}

.p-history__alumni-popup-name {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.p-history__alumni-popup-role {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: rgba(134, 28, 60, 0.7);
  margin-bottom: 24px;
}

.p-history__alumni-popup-desc {
  font-size: 1.4rem;
  line-height: 1.85;
  color: #555;
}

@media screen and (max-width: 768px) {
  .p-history__alumni-popup-inner {
    grid-template-columns: 1fr;
    max-height: 85vh;
  }
  .p-history__alumni-popup-photo {
    max-height: 320px;
  }
  .p-history__alumni-popup-content {
    padding: 32px 24px;
  }
}

/* --------------------------------------------------------------------------
   Topic 03: SOCIAL IMPACT（zeroten.jp WE THINK 方式: sticky stack + fade/scale 退場）
-------------------------------------------------------------------------- */
.p-history__social-scroll {
  position: relative;
  padding-bottom: var(--social-scroll-pad, 0);
}

.p-history__social {
  width: 100%;
}

.p-history__social-panels {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.p-history__social-panel {
  position: sticky;
  top: var(--social-sticky-top, 120px);
  z-index: var(--social-panel-z, 1);
  padding: 32px 40px 40px;
  background: linear-gradient(
    120deg,
    #8ed4ef 0%,
    #5a9fd4 22%,
    #4a6fc9 48%,
    #7b6fd4 72%,
    #bb8def 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform-origin: center top;
  will-change: transform, opacity;
}

.p-history__social-panel[data-social-panel="0"] {
  --social-panel-z: 1;
}
.p-history__social-panel[data-social-panel="1"] {
  --social-panel-z: 2;
}

.p-history__social-panel-label {
  display: inline-block;
  margin-bottom: 24px;
  padding: 7px 20px 8px;
  background: linear-gradient(90deg, #de7cfe 0%, #2f82ff 100%);
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: #000;
}

.p-history__social-panel-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border: 2px solid #fff;
}

.p-history__social-panel-body {
  margin-top: 24px;
}

.p-history__social-title {
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 16px;
}

.p-history__social-desc {
  font-size: 1.4rem;
  line-height: 1.9;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .p-history__social-scroll {
    padding-bottom: 0;
  }
  .p-history__social-panels {
    gap: 24px;
  }
  .p-history__social-panel {
    position: relative;
    top: auto;
    will-change: auto;
  }
  .p-history__social-panel {
    padding: 24px 20px 28px;
  }
  .p-history__social-panel-label {
    margin-bottom: 16px;
    padding: 6px 14px 7px;
    font-size: 1rem;
  }
  .p-history__social-panel-body {
    margin-top: 16px;
  }
  .p-history__social-panel-img {
    aspect-ratio: 16 / 9;
  }
  .p-history__social-title {
    font-size: 1.8rem;
  }
  .p-history__social-desc {
    font-size: 1.3rem;
    line-height: 1.85;
  }
}

/* --------------------------------------------------------------------------
   RELATED BOOKS & MATERIALS
-------------------------------------------------------------------------- */
.p-history__books {
  padding: 50px 0;
  overflow-x: clip;
}

.p-history__books-head {
  position: relative;
  text-align: center;
}

.p-history__books-title {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 5.5rem;
  letter-spacing: 0.08em;
  color: #861c3c;
  margin: 0 0 8px;
  line-height: 1.2;
}

.p-history__books-subtitle {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.08em;
}

.p-history__books-section {
  margin-top: 50px;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
  background-image: url(/150anniversary/assets/images/history/bg01.png);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.p-history__books-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  z-index: 1;
  pointer-events: none;
}

.p-history__books-category-bar {
  display: none;
  position: relative;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(20px, 3vw, 28px) 0;
  border-top: 1px solid rgba(154, 102, 234, 0.35);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.p-history__books-category-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 2px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__books-category {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: #1a1a1a;
  margin: 0;
}

.p-history__books-category-sub {
  margin: 0;
  font-size: clamp(1.2rem, 1.3vw, 1.3rem);
}

.p-history__books-layout {
  display: grid;
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
  min-height: clamp(320px, 38vw, 420px);
}

.p-history__books-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 3.5vw, 40px) clamp(20px, 3vw, 32px)
    clamp(24px, 3vw, 32px);
  border-right: 1px solid rgba(154, 102, 234, 0.35);
}

.p-history__books-category {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.p-history__books-category-sub {
  font-size: 1.3rem;
  font-weight: 700;
}

.p-history__books-next {
  position: absolute;
  top: 50%;
  right: clamp(12px, 2vw, 20px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #9a86fa;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.p-history__books-next i {
  font-size: 2.4rem;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__books-next:hover {
    opacity: 0.65;
    transform: translateY(-50%) translateX(2px);
  }
}

.p-history__books-pagination-list {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-history__books-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: #861c3c;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
}

.p-history__books-pagination-btn.is-current {
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #861c3c 0%, #6b2456 45%, #9a86fa 100%);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__books-pagination-btn:not(.is-current):hover {
    opacity: 0.6;
  }
}

.p-history__books-viewport {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(142, 212, 239, 0.28) 0%,
      rgba(154, 102, 234, 0.12) 28%,
      rgba(255, 255, 255, 0) 52%
    ),
    #fff;
}

.p-history__books-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-history__books-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  min-height: clamp(320px, 38vw, 420px);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 48px)
    clamp(28px, 4vw, 48px);
}

.p-history__books-slide-body {
  min-width: 0;
}

.p-history__books-slide-title {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  font-weight: 700;
  line-height: 1.65;
  color: #1a1a1a;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.p-history__books-slide-desc {
  font-size: clamp(1.3rem, 1.4vw, 1.4rem);
  line-height: 1.9;
  color: #444;
}

.p-history__books-slide-thumb {
  flex-shrink: 0;
  width: clamp(120px, 14vw, 168px);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.p-history__books-slide-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .p-history__books-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .p-history__books-nav {
    min-height: 0;
    padding: 24px 56px 20px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(154, 102, 234, 0.35);
  }

  .p-history__books-next {
    top: 28px;
    right: 16px;
    transform: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .p-history__books-next:hover {
      transform: translateX(2px);
    }
  }

  .p-history__books-pagination {
    margin-top: 20px;
  }

  .p-history__books-slide {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 28px 20px 32px;
  }

  .p-history__books-slide-thumb {
    width: min(140px, 42vw);
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   RELATED LINKS
-------------------------------------------------------------------------- */
.p-history__links {
  padding: 0 0 64px;
  overflow-x: clip;
  background-image: url(/150anniversary/assets/images/history/bg01.png);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.p-history__links-inner {
  max-width: 1080px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .p-history__links {
    padding: 0 0 40px;
  }
}

.p-history__links-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-bottom: clamp(32px, 4vw, 48px);
  padding: clamp(20px, 3vw, 28px) clamp(24px, 5vw, 70px);
  background: linear-gradient(
    90deg,
    rgba(134, 28, 60, 0.05) 0%,
    rgba(154, 134, 250, 0.1) 40%,
    rgba(142, 212, 239, 0.08) 70%,
    rgba(255, 220, 100, 0.06) 100%
  );
}

.p-history__links-header::before,
.p-history__links-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  pointer-events: none;
}

.p-history__links-header::before {
  top: 0;
}

.p-history__links-header::after {
  bottom: 0;
}

.p-history__links-title {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 3.3rem;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  line-height: 1.2;
}

.p-history__links-desc {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .p-history__links-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .p-history__links-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
  }

  .p-history__links-desc {
    white-space: normal;
    font-weight: 700;
    font-size: 1.1rem;
  }
}

.p-history__links-slider {
  --links-visible: 4;
  --links-slots: 5;
  --links-edge-offset: 0.5;
  --links-slide-count: 1;
  --links-gap: clamp(28px, 4vw, 48px);
  --links-item-width: calc(
    (100vw - (var(--links-slots) - 1) * var(--links-gap)) / var(--links-slots)
  );
  --links-step: calc(var(--links-item-width) + var(--links-gap));
  --links-arrow-shift: clamp(12px, 1.6vw, 23px);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}

.p-history__links-viewport {
  overflow: hidden;
}

.p-history__links-list {
  display: flex;
  gap: var(--links-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-history__links-item {
  flex: 0 0 var(--links-item-width);
  max-width: var(--links-item-width);
}

.p-history__links-prev,
.p-history__links-next {
  position: absolute;
  top: calc(var(--links-item-width) / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.p-history__links-prev {
  left: calc(
    var(--links-step) * var(--links-edge-offset) - var(--links-arrow-shift)
  );
}

.p-history__links-next {
  left: calc(
    var(--links-step) * (var(--links-edge-offset) + var(--links-visible)) -
      var(--links-arrow-shift)
  );
  right: auto;
}

.p-history__links-arrow-img {
  display: block;
  width: clamp(20px, 2.4vw, 24px);
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__links-prev:hover,
  .p-history__links-next:hover {
    opacity: 0.65;
  }

  .p-history__links-prev:hover {
    transform: translate(calc(-50% - 2px), -50%);
  }

  .p-history__links-next:hover {
    transform: translate(calc(-50% + 2px), -50%);
  }
}

.p-history__links-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.p-history__links-link:hover {
  opacity: 0.75;
}

.p-history__links-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-history__links-thumb--empty {
  background: #ececec;
}

.p-history__links-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.p-history__links-name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.6;
  color: #1a1a1a;
  text-align: left;
}

.p-history__links-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.p-history__links-more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #861c3c;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.p-history__links-more-icon i {
  font-size: 1.4rem;
  font-weight: 700;
}

.p-history__links-more-text {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 1024px) {
  .p-history__links-slider {
    --links-visible: 2;
    --links-slots: 3;
    --links-edge-offset: 0.5;
  }
}

@media screen and (max-width: 768px) {
  .p-history__links-slider {
    --links-visible: 2;
    --links-slots: 3;
    --links-edge-offset: 0.49;
    --links-slide-count: 2;
    --links-gap: clamp(20px, 6vw, 32px);
    --links-arrow-shift: clamp(8px, 2vw, 14px);
  }

  .p-history__links-arrow-img {
    width: clamp(9px, 2.6vw, 17px);
  }

  .p-history__links-link {
    gap: clamp(8px, 2.5vw, 12px);
  }

  .p-history__links-name {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .p-history__links-more-icon {
    width: clamp(18px, 5vw, 22px);
    height: clamp(18px, 5vw, 22px);
  }

  .p-history__links-more-icon i {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }

  .p-history__links-more-text {
    font-size: 1.2rem;
  }
}

.page-sub .home-history__fractal--right {
  top: 700px;
}

@media screen and (max-width: 768px) {
  .page-sub .home-history__fractal--right {
    top: 400px;
  }
}

/* --------------------------------------------------------------------------
   History：FV 時代ナビゲーション
-------------------------------------------------------------------------- */
.p-history__fv-nav {
  margin-top: 48px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

.p-history__fv-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.p-history__fv-nav-list::-webkit-scrollbar {
  display: none;
}

.p-history__fv-nav-item {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
}

.p-history__fv-nav-item:nth-of-type(1)::before,
.p-history__fv-nav-item::after {
  content: "";
  position: absolute;
  top: 24%;
  bottom: 24%;
  width: 2px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__fv-nav-item:nth-of-type(1)::before {
  left: 0;
}

.p-history__fv-nav-item::after {
  right: 0;
}

.p-history__fv-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 24px 16px 28px;
  text-decoration: none;
  transition: background 0.25s ease;
  text-align: center;
}

.p-history__fv-nav-title {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

.p-history__fv-nav-range {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #1a1a1a;
}

.p-history__fv-nav-indicator {
  position: absolute;
  display: block;
  width: 48px;
  height: 14px;
  margin-top: 4px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.p-history__fv-nav-indicator::before,
.p-history__fv-nav-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.p-history__fv-nav-indicator::before {
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(0deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__fv-nav-indicator::after {
  bottom: 0;
  width: 12px;
  height: 2px;
  background: linear-gradient(0deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__fv-nav-link.is-active .p-history__fv-nav-indicator::before,
.p-history__fv-nav-link.is-active .p-history__fv-nav-indicator::after {
  opacity: 1;
}

/* History / ABOUT：FVナビ SVGインジケーター（初期非表示 → ホバーでアニメーション） */
.p-history .p-history__fv-nav-indicator::before,
.p-history .p-history__fv-nav-indicator::after,
.p-about .p-history__fv-nav-indicator::before,
.p-about .p-history__fv-nav-indicator::after {
  display: none;
}

.p-history
  .p-history__fv-nav-link.is-active
  .p-history__fv-nav-indicator::before,
.p-history
  .p-history__fv-nav-link.is-active
  .p-history__fv-nav-indicator::after,
.p-about .p-history__fv-nav-link.is-active .p-history__fv-nav-indicator::before,
.p-about .p-history__fv-nav-link.is-active .p-history__fv-nav-indicator::after {
  opacity: 0;
}

.p-history .p-history__fv-nav-indicator,
.p-about .p-history__fv-nav-indicator {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  margin: 0 auto;
}

.p-history .p-history__fv-nav-indicator-svg,
.p-about .p-history__fv-nav-indicator-svg {
  display: block;
  width: 20px;
  height: auto;
  overflow: visible;
}

.p-history .p-history__fv-nav-indicator-circle,
.p-about .p-history__fv-nav-indicator-circle {
  opacity: 0;
  transform: translateY(10px);
}

.p-history .p-history__fv-nav-title,
.p-history .p-history__fv-nav-range,
.p-about .p-history__fv-nav-title,
.p-about .p-history__fv-nav-range {
  transition: color 0.25s ease;
}

/* History：FVナビ テキスト位置（年代のベースライン揃え） */
.p-history .p-history__fv-nav-list {
  align-items: stretch;
}

.p-history .p-history__fv-nav-item {
  display: flex;
}

.p-history .p-history__fv-nav-link {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-content: start;
  gap: 0;
  min-height: 102px;
  padding: 12px 8px 30px;
}

.p-history .p-history__fv-nav-title {
  align-self: end;
  margin-bottom: 6px;
}

.p-history .p-history__fv-nav-item:nth-of-type(1)::before,
.p-history .p-history__fv-nav-item::after {
  top: 50%;
  bottom: auto;
  height: 50px;
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .p-history .p-history__fv-nav-link:hover .p-history__fv-nav-title,
  .p-history .p-history__fv-nav-link:hover .p-history__fv-nav-range,
  .p-about .p-history__fv-nav-link:hover .p-history__fv-nav-title,
  .p-about .p-history__fv-nav-link:hover .p-history__fv-nav-range {
    background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #861c3c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

.p-history__fv-nav-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-history__fv-nav {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    max-width: 100%;
  }

  .p-history__fv-nav-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    flex: 1;
    min-width: 0;
    overflow: visible;
  }

  .p-history__fv-nav-item {
    flex: unset;
  }

  .p-history__fv-nav-item:nth-child(1) {
    grid-column: 1 / 4;
  }

  .p-history__fv-nav-item:nth-child(2) {
    grid-column: 4 / 7;
  }

  .p-history__fv-nav-item:nth-child(3) {
    grid-column: 1 / 3;
  }

  .p-history__fv-nav-item:nth-child(4) {
    grid-column: 3 / 5;
  }

  .p-history__fv-nav-item:nth-child(5) {
    grid-column: 5 / 7;
  }

  .p-history__fv-nav-item::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 2px;
    display: block;
    background: linear-gradient(180deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  }

  .p-history__fv-nav-item::after {
    display: none;
  }

  .p-history__fv-nav-item:nth-child(2)::after,
  .p-history__fv-nav-item:nth-child(5)::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    left: auto;
    width: 2px;
    display: block;
    background: linear-gradient(180deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  }

  .p-history__fv-nav-link {
    min-height: 80px;
    padding: 12px 6px 18px;
    gap: 4px;
  }

  .p-history__fv-nav-title {
    font-size: clamp(0.7rem, 3.2vw, 0.95rem);
    line-height: 1.45;
  }

  .p-history__fv-nav-range {
    font-size: 1.7rem;
  }

  .p-history__fv-nav-item:nth-child(-n + 2) .p-history__fv-nav-title {
    font-size: 1rem;
  }

  .p-history__fv-nav-item:nth-child(-n + 2) .p-history__fv-nav-range {
    font-size: 1.7rem;
  }

  .p-history__fv-nav-indicator {
    width: 36px;
    height: 10px;
    display: none;
  }

  .p-history .p-history__fv-nav-indicator,
  .p-about .p-history__fv-nav-indicator {
    display: none;
  }

  .p-history .p-history__fv-nav-list {
    row-gap: 0;
  }

  .p-history .p-history__fv-nav-link {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    width: 100%;
    height: 100%;
    min-height: 72px;
    padding: 8px 6px 10px;
  }

  .p-history .p-history__fv-nav-title {
    align-self: end;
    margin-bottom: 4px;
  }

  .p-history .p-history__fv-nav-item:nth-of-type(1)::before,
  .p-history .p-history__fv-nav-item::after,
  .p-history .p-history__fv-nav-item::before {
    top: 18%;
    bottom: 18%;
    height: auto;
    transform: none;
  }

  .p-history .p-history__fv-nav-item::after {
    display: none;
  }

  .p-history .p-history__fv-nav-item:nth-child(2)::after,
  .p-history .p-history__fv-nav-item:nth-child(5)::after {
    display: block;
    top: 18%;
    bottom: 18%;
    height: auto;
    transform: none;
  }

  .p-history__fv-nav-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    margin: 0;
    padding: 8px 2px;
    font-family: din-2014, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(0.85rem, 3.5vw, 1.2rem);
    line-height: 1;
    letter-spacing: 0.08em;
    color: #1a1a1a;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .p-history__fv-nav-menu::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  }
}

/* --------------------------------------------------------------------------
   History：タイムライン 右スティッキー年代ラベル
-------------------------------------------------------------------------- */
.p-history__era-sticky {
  position: sticky;
  top: 40%;
  float: right;
  z-index: 30;
  pointer-events: none;
  margin-right: 0;
}

.p-history__era-sticky > img.is-pc {
  display: block;
  width: 39px;
  height: auto;
}

.p-history__era-sticky > img.is-sp {
  display: none;
  width: 20px;
  height: auto;
}

.p-history__era-sticky-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 48px;
  padding: 24px 4px;
  background: linear-gradient(180deg, #861c3c 0%, #7a3568 42%, #9a86fa 100%);
  border-right: 1px solid #1a1a1a;
  box-sizing: border-box;
  gap: 16px;
}

.p-history__era-sticky-range {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  white-space: nowrap;
}

.p-history__era-sticky-ruler {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 72px;
}

.p-history__era-sticky-ruler::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
}

.p-history__era-sticky-ruler::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow:
    0 24px 0 #fff,
    0 48px 0 #fff,
    0 72px 0 #fff;
}

.p-history__era-sticky-chevron {
  position: absolute;
  left: calc(50% + 10px);
  display: block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-135deg);
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 全時代共通：<（右側）・位置のみ年代ごとに移動 */
[data-era-step="0"] .p-history__era-sticky-chevron {
  top: -3px;
}

[data-era-step="1"] .p-history__era-sticky-chevron {
  top: 21px;
}

[data-era-step="2"] .p-history__era-sticky-chevron {
  top: 45px;
}

[data-era-step="3"] .p-history__era-sticky-chevron {
  top: 69px;
}

@media (prefers-reduced-motion: reduce) {
  .p-history__era-sticky-chevron {
    transition: none;
  }
}

@media screen and (max-width: 768px) {
  .p-history__era-sticky {
    top: 35%;
  }

  .p-history__era-sticky > img.is-pc {
    display: none;
  }

  .p-history__era-sticky > img.is-sp {
    display: block;
  }

  .p-history__era-sticky-bar {
    width: 20px;
    padding: 8px 1px;
    gap: 6px;
  }

  .p-history__era-sticky-range {
    font-size: 1.4rem;
  }

  .p-history__era-sticky-ruler {
    width: 14px;
    height: 36px;
  }

  .p-history__era-sticky-ruler::after {
    width: 7px;
    box-shadow:
      0 12px 0 #fff,
      0 24px 0 #fff,
      0 36px 0 #fff;
  }

  .p-history__era-sticky-chevron {
    width: 4px;
    height: 4px;
    left: calc(50% + 6px);
  }

  [data-era-step="0"] .p-history__era-sticky-chevron {
    top: -2px;
  }

  [data-era-step="1"] .p-history__era-sticky-chevron {
    top: 9px;
  }

  [data-era-step="2"] .p-history__era-sticky-chevron {
    top: 21px;
  }

  [data-era-step="3"] .p-history__era-sticky-chevron {
    top: 33px;
  }
  .p-history__era-sticky-chevron {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  .p-history__era-sticky-ruler::before {
    width: 1px;
  }
  .p-history__era-sticky-ruler::after {
    height: 1px;
  }
}

.p-history__era-sticky--column .p-history__era-sticky-bar {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   History：タイムライン 時代ヘッダー（新円コンテンツ）
-------------------------------------------------------------------------- */
.p-history__era-head {
  display: flex;
  justify-content: center;
  margin-bottom: 138px;
  padding-top: 20px;
}

/* セクション間：circle 中心で背景切り替え */
.p-history__era + .p-history__era .p-history__era-head {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--era-circle-half));
  padding-top: 0;
}

.p-history__era + .p-history__era .p-history__era-head::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1366px;
  height: clamp(260px, 32vw, 380px);
  z-index: 0;
  pointer-events: none;
}

.p-history__era + .p-history__era .p-history__era-head::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1366px;
  height: clamp(64px, 8vw, 92px);
  z-index: 1;
  pointer-events: none;
  filter: blur(30px);
  opacity: 0.92;
}

.p-history__era-head .p-history__era-circle {
  position: relative;
  z-index: 2;
  width: var(--era-circle-size);
  height: var(--era-circle-size);
  padding: 34px 24px 40px;
  overflow: visible;
  box-shadow: 0 6px 40px rgba(100, 120, 190, 0.18);
}

.p-history__era-head .p-history__era-circle::before {
  inset: -1px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__era-head .p-history__era-circle .bar01 {
  top: auto;
  bottom: -64px;
  width: 4px;
  height: 64px;
  z-index: -2;
}

.p-history__era-head .p-history__era-circle .bar02 {
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 94px;
  z-index: -2;
}

.p-history__era-head
  .p-history__era-circle
  .bar02
  .p-history__era-circle-bar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.p-history__era-head .p-history__era-circle .bar01::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-history__era-head .p-history__era-circle-bar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.p-history__era-circle-range {
  display: block;
  position: relative;
  z-index: 1;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #000;
  text-align: center;
}

.p-history__era-range-slots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.02em;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.p-history__era-odometer {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.p-history__era-odometer-digit {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.p-history__era-odometer-spacer {
  display: inline-block;
  visibility: hidden;
}

.p-history__era-odometer-inner {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-align: left;
}

.p-history__era-odometer-ribbon,
.p-history__era-odometer-ribbon-inner {
  display: block;
}

.p-history__era-odometer-ribbon-inner {
  backface-visibility: hidden;
}

.p-history__era-odometer-value {
  display: block;
  line-height: 1.1;
  text-align: center;
}

.p-history__era-odometer.is-counting .p-history__era-odometer-ribbon-inner {
  transition: transform var(--odometer-duration, 1800ms) ease;
  transform: translateY(0);
}

.p-history__era-odometer.is-counting.is-animating
  .p-history__era-odometer-ribbon-inner {
  transform: translateY(calc(-100% * var(--odometer-end, 0)));
}

.p-history__era-range-start {
  display: inline-block;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.p-history__era-range-sep {
  display: inline-block;
  line-height: 1.1;
  padding: 0 0.06em;
}

.p-history__era-circle-sub {
  display: block;
  position: relative;
  z-index: 1;
  font-family: "Noto Serif Japanese", serif;
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.04em;
  line-height: 1.55;
  text-align: center;
}

.p-history__era-head .p-history__era-circle-chevron {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
}

.p-history__era-head .p-history__era-circle-chevron-img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .p-history__era-head {
    margin-bottom: 94px;
  }

  .p-history__era + .p-history__era .p-history__era-head::before {
    height: clamp(200px, 54vw, 280px);
  }

  .p-history__era + .p-history__era .p-history__era-head::after {
    height: 56px;
    filter: blur(22px);
  }

  .p-history__era-head .p-history__era-circle {
    padding: 22px 16px 34px;
  }

  .p-history__era-head .p-history__era-circle .bar01 {
    bottom: -52px;
    height: 52px;
  }

  .p-history__era-head .p-history__era-circle .bar02 {
    top: -52px;
    height: 52px;
  }

  .p-history__era-head .p-history__era-circle .bar01::after {
    width: 8px;
    height: 8px;
    bottom: -5px;
  }

  .p-history__era-head .p-history__era-circle-chevron {
    bottom: 16px;
    width: 18px;
  }

  .p-history__era-circle-range {
    font-size: clamp(2.4rem, 7vw, 2.4rem);
  }

  .p-history__era-circle-sub {
    font-size: 0.9em;
  }
}

/* --------------------------------------------------------------------------
   History：タイムライン イントロ文
-------------------------------------------------------------------------- */
.p-history__era-intro {
  max-width: 720px;
  margin: 0 auto 40px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-history__era-intro {
    font-size: clamp(1.2rem, 3.2vw, 1.2rem);
    line-height: 1.61538462;
    margin-bottom: 10px;
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   History：サブセクション
-------------------------------------------------------------------------- */
.p-history__subsection {
  margin-bottom: 70px;
}

.p-history__subsection:last-of-type {
  margin-bottom: 0;
}

.p-history__subsection-head {
  margin-bottom: 32px;
}

.p-history__subsection-title {
  font-family: "Noto Serif Japanese", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.65;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  text-align: center;
}

.p-history__subsection-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-history__subsection-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.p-history__subsection-media--triple {
  grid-template-columns: repeat(3, 1fr);
}

.p-history__subsection-media--quad {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
  max-width: 728px;
  margin-inline: auto;
}

.p-history__subsection-media--quad .p-history__subsection-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-history__subsection-media--quad .p-history__subsection-caption {
  width: 100%;
  text-align: left;
}

.p-history__subsection-media--quad .p-history__subsection-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.p-history__subsection-body:has(.p-history__subsection-media--quad)
  .p-history__subsection-text {
  width: 100%;
  max-width: 728px;
  margin-inline: auto;
}

.p-history__subsection-media--pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.p-history__subsection-media-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 26px;
  width: 100%;
  max-width: 728px;
  margin-inline: auto;
}

.p-history__subsection-media-row:has(
  .p-history__subsection-figure > .p-history__subsection-caption
) {
  align-items: flex-start;
}

.p-history__subsection-media--pair .p-history__subsection-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  max-width: min(46%, 340px);
}

.p-history__subsection-media--pair
  .p-history__subsection-figure
  > .p-history__subsection-caption {
  width: 100%;
  text-align: left;
}

.p-history__subsection-media--pair .p-history__subsection-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(200px, 28vw, 320px);
  aspect-ratio: auto;
  object-fit: contain;
}

.p-history__subsection-media--pair .p-history__subsection-caption {
  margin-top: 4px;
}

.p-history__subsection-media--pair-asymmetric .p-history__subsection-media-row {
  justify-content: flex-start;
  align-items: flex-start;
}

.p-history__subsection-media--pair-asymmetric
  .p-history__subsection-figure--narrow {
  max-width: min(30%, 220px);
}

.p-history__subsection-media--pair-asymmetric
  .p-history__subsection-figure--wide {
  flex: 1 1 auto;
  max-width: min(62%, 460px);
}

.p-history__subsection-body:has(.p-history__subsection-media--pair-asymmetric)
  .p-history__subsection-text {
  width: 100%;
  max-width: 728px;
  margin-inline: auto;
}

.p-history__subsection-figure {
  margin: 0;
}

.p-history__subsection-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.p-history__subsection-caption {
  display: block;
  margin-top: 8px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

.p-history__subsection-text p {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.71428571;
  color: #333;
  letter-spacing: 0.02em;
}

.p-history__subsection-text-content.is-collapsed p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.p-history__subsection-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-history__subsection-text-toggle {
  align-self: flex-end;
}

.p-history__subsection-readmore {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #000;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.p-history__subsection-readmore[hidden],
.p-history__subsection-close[hidden] {
  display: none;
}

.p-history__subsection-readmore::after {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 2.4vw, 28px);
  height: clamp(28px, 2.4vw, 28px);
  border-radius: 50%;
  background: linear-gradient(135deg, #de7cfe 0%, #0075ff 100%);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__subsection-readmore:hover {
    opacity: 0.65;
  }
}

.p-history__subsection-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.2vw, 1.6rem);
  letter-spacing: 0.08em;
  color: #000;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.p-history__subsection-close::after {
  content: "×";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 2.4vw, 28px);
  height: clamp(28px, 2.4vw, 28px);
  border-radius: 50%;
  background: linear-gradient(135deg, #de7cfe 0%, #0075ff 100%);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__subsection-close:hover {
    opacity: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-history__era-odometer-ribbon-inner {
    transition: none !important;
    transform: none !important;
  }
}

@media screen and (max-width: 768px) {
  .p-history__subsection {
    margin-bottom: 40px;
    padding-top: 28px;
  }

  .p-history__subsection-title {
    font-size: 1.3rem;
  }

  .p-history__subsection-readmore {
    font-size: 1.1rem;
  }

  .p-history__subsection-readmore::after {
    width: 17px;
    height: 17px;
    font-size: 1.4rem;
  }

  .p-history__subsection-media:not(.p-history__subsection-media--pair),
  .p-history__subsection-media--triple,
  .p-history__subsection-media--quad {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .p-history__subsection-media--pair .p-history__subsection-media-row {
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 5vw, 24px);
  }

  .p-history__subsection-media--pair .p-history__subsection-figure {
    max-width: min(88vw, 320px);
    width: 100%;
    align-items: center;
  }

  .p-history__subsection-media--pair
    .p-history__subsection-figure
    > .p-history__subsection-caption {
    /* text-align: center; */
  }

  .p-history__subsection-media--pair .p-history__subsection-img {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .p-history__subsection-media--pair .p-history__subsection-caption {
    font-size: clamp(1.1rem, 4vw, 1.1rem);
    text-align: left;
    width: 100%;
  }

  .p-history__subsection-media--pair-asymmetric
    .p-history__subsection-media-row {
    gap: clamp(24px, 7vw, 36px);
  }

  .p-history__subsection-media--pair-asymmetric
    .p-history__subsection-figure--narrow {
    max-width: min(56vw, 200px);
    margin: auto;
  }

  .p-history__subsection-media--pair-asymmetric
    .p-history__subsection-figure--wide {
    max-width: min(88vw, 320px);
  }

  .p-history__subsection-media--pair-asymmetric
    .p-history__subsection-figure
    > .p-history__subsection-caption {
  }

  .p-history__subsection-text p {
    font-size: 1.3rem;
    line-height: 1.9;
  }
}

/* --------------------------------------------------------------------------
   History：Column セクション
-------------------------------------------------------------------------- */
.p-history__column {
  position: relative;
  padding: 160px 0 80px;
  overflow: visible;
  background: transparent;
}

.p-history__column .figure01 {
  position: absolute;
  top: 300px;
  left: 3vw;
  z-index: 0;
  width: 104px;
}

.p-history__column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  z-index: 1;
  pointer-events: none;
}

.p-history__column-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 880px;
}

.p-history__column-body {
  display: flex;
  flex-direction: column;
}

.p-history__column-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.p-history__column-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-history__column-content {
  display: grid;
  grid-template-columns: 364px 362px;
  gap: 66px;
  align-items: center;
}

.p-history__column-label {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.04em;
  color: #000;
}

.p-history__column-title {
  font-family: "Noto Serif Japanese", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: 0.04em;
}

.p-history__column-desc {
  margin: 0;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2;
  color: #333;
  letter-spacing: 0.02em;
}

.p-history__column-figure {
  flex-shrink: 0;
  margin: 0;
  width: 362px;
  max-width: 362px;
  justify-self: end;
}

.p-history__column-img {
  display: block;
  width: 100%;
  height: auto;
}

.p-history__column-caption {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif Japanese", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  line-height: 1.6;
  text-align: left;
}

.p-history__column-text-wrap {
  display: contents;
}

.p-history__column-text-toggle {
  display: none;
}

.p-history__column-text-content.is-collapsed .p-history__column-desc {
  display: block;
}

.p-history__column-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.2rem, 1.2vw, 1.6rem);
  letter-spacing: 0.08em;
  color: #000;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.p-history__column-close::after {
  content: "×";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(28px, 2.4vw, 28px);
  height: clamp(28px, 2.4vw, 28px);
  border-radius: 50%;
  background: linear-gradient(135deg, #de7cfe 0%, #0075ff 100%);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__column-close:hover {
    opacity: 0.65;
  }
}

@media screen and (max-width: 768px) {
  .p-history__column {
    padding: 12px 0 56px;
  }

  .p-history__column::before {
    top: 32px;
    height: calc(100% - 64px);
  }

  .p-history__column-body {
    gap: 0;
  }

  .p-history__column-main {
    display: contents;
  }

  .p-history__column-head {
    order: 1;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .p-history__column-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .p-history__column-figure {
    order: 2;
    max-width: 100%;
    width: 100%;
  }

  .p-history__column-text-wrap {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .p-history__column-text-toggle {
    display: flex;
    align-self: flex-end;
  }

  .p-history__column-text-content.is-collapsed .p-history__column-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .p-history__column-label {
    font-size: 1.5rem;
  }

  .p-history__column-title {
    font-size: 1.3rem;
  }

  .p-history__column-desc {
    font-size: 1.3rem;
    line-height: 1.9;
  }

  .p-history__column-caption {
    font-size: 1.1rem;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   History：RELATED BOOKS 単冊表示
-------------------------------------------------------------------------- */
.p-history__books-single {
  display: grid;
  grid-template-columns: 300px 290px;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
  padding: clamp(100px, 4vw, 100px) 0 clamp(40px, 5vw, 64px);
}

.p-history__books-single-thumb {
  flex-shrink: 0;
  justify-self: center;
  width: clamp(200px, 18vw, 280px);
  filter: drop-shadow(6px 10px 20px rgba(0, 0, 0, 0.18));
}

.p-history__books-single-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 11 / 15;
  object-fit: contain;
}

.p-history__books-single-body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 24px);
  align-items: center;
  text-align: center;
}

.p-history__books-single-title {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 4.5rem;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  line-height: 1.2;
}

.p-history__books-single-btn.c-btn {
  width: 240px;
  height: 48px;
  border-radius: 24px;
  margin-top: 4px;
}

.p-history__books-single-btn.c-btn::before {
  border-radius: 24px;
}

.p-history__books-single-btn .c-btn__enzyme {
  width: 45px;
  height: 48px;
}

.p-history__books-single-btn .c-btn__enzyme svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-history__books-single-btn .c-btn__text {
  font-size: 2.2rem;
}

.p-history__books-single-btn .c-btn__substrate {
  width: 27px;
  height: 22px;
  left: 198px;
}

@media (hover: hover) and (pointer: fine) {
  .p-history__books-single-btn.c-btn:hover .c-btn__text {
    right: 22px;
  }

  .p-history__books-single-btn.c-btn:hover .c-btn__substrate {
    left: 23px;
  }
}

@media screen and (max-width: 768px) {
  .p-history__books-single-btn.c-btn {
    width: 136px;
    height: 34px;
    border-radius: 17px;
  }

  .p-history__books-single-btn.c-btn::before {
    border-radius: 17px;
  }

  .p-history__books-single-btn .c-btn__enzyme {
    width: 34px;
    height: 34px;
  }

  .p-history__books-single-btn .c-btn__text {
    font-size: 1.2rem;
  }

  .p-history__books-single-btn .c-btn__substrate {
    width: 19px;
    height: 15px;
    left: 107px;
  }

  .p-history__books-single-btn.c-btn:hover .c-btn__substrate {
    left: 16px;
  }
}

.p-history__books-single-note {
  margin: 0;
  font-size: clamp(1.4rem, 1.3vw, 1.6rem);
  color: #1a1a1a;
  letter-spacing: 0.04em;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .p-history__books {
    padding: 28px 0;
  }

  .p-history__books-section {
    margin-top: 28px;
    padding-inline: 20px;
  }

  .p-history__books-title {
    font-size: 3.3rem;
  }

  .p-history__books-subtitle {
    font-size: 1.2rem;
  }

  .p-history__books-category-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 0;
    margin-bottom: 24px;
  }

  .p-history__books-category {
    font-size: clamp(1.2rem, 4.6vw, 2rem);
    font-weight: 700;
    margin-bottom: 0;
  }

  .p-history__books-category-sub {
    font-size: clamp(1rem, 3.2vw, 1.4rem);
  }

  .p-history__books-single {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
    padding: 0 0 32px;
    max-width: 100%;
  }

  .p-history__books-single-thumb {
    width: clamp(160px, 48vw, 240px);
    margin: 0 auto;
  }

  .p-history__books-single-body {
    align-items: center;
    gap: clamp(12px, 3.5vw, 16px);
  }

  .p-history__books-single-title {
    font-size: 2rem;
  }

  .p-history__books-single-note {
    font-size: 1rem;
  }
}

.p-news-index .c-section-head__img {
  width: 28px;
}

@media screen and (max-width: 768px) {
  .p-news-index .c-section-head__img {
    width: 22px;
  }
}

.p-message-detail .c-section-head--message .c-section-head__img {
  width: 68px;
}

@media screen and (max-width: 768px) {
  .p-message-detail .c-section-head--message .c-section-head__img {
    width: 54px;
  }
}

.page-sub .home-about__fractal--left {
  top: 1570px;
  bottom: inherit;
}

.page-sub .home-about__fractal--right {
  top: 2500px;
  bottom: inherit;
  transform: inherit;
}

.p-event-index .c-section-head__img {
  width: 64px;
}

@media screen and (max-width: 768px) {
  .p-event-index .c-section-head__img {
    width: 52px;
  }
}

.p-event-index__figure01 {
  position: absolute;
  top: 0;
  right: 190px;
  width: 32px;
}

.p-event-index__figure02 {
  position: absolute;
  top: 1300px;
  right: 0;
  width: 140px;
}

.p-event-index__figure03 {
  position: absolute;
  top: 2000px;
  left: -40px;
  width: 146px;
}

.p-event-index__figure04 {
  position: absolute;
  bottom: 180px;
  left: 30vw;
  width: 42px;
}

@media screen and (max-width: 768px) {
  .p-event-index__figure01 {
    top: -70px;
    right: 20px;
    width: 26px;
  }
  .p-event-index__figure02,
  .p-event-index__figure03 {
    display: none;
  }

  .p-event-index__figure04 {
    bottom: 70px;
    left: 1vw;
    width: 28px;
  }
}

/* ============================================================
   p-interview-detail
   ============================================================ */

/* インタビュー詳細：トップ同様の縦長フラクタル */
.l-main:has(.p-interview-detail) {
  position: relative;
}

.l-main:has(.p-interview-detail) [class*="__fractal"],
.l-main:has(.p-interview-detail) .home-fv__bg-item {
  z-index: 0;
  pointer-events: none;
}

.l-main:has(.p-interview-detail) [class*="__fractal"] img,
.l-main:has(.p-interview-detail) .home-fv__bg-item-img {
  display: block;
  width: 100%;
  height: auto;
}

.l-main:has(.p-interview-detail) .home-interview__fractal--left {
  top: 720px;
  transform: none;
}

.l-main:has(.p-interview-detail) .home-interview__fractal--right {
  top: 2100px;
  bottom: auto;
}

.l-main:has(.p-interview-detail) .home-history__fractal--right {
  top: 1280px;
}

.l-main:has(.p-interview-detail) .home-about__fractal--left {
  top: 2900px;
  bottom: auto;
}

.l-main:has(.p-interview-detail) .home-about__fractal--right {
  top: 4200px;
  bottom: auto;
  transform: none;
}

.l-main:has(.p-interview-detail) .home-history__fractal--left {
  top: 4800px;
}

.l-main:has(.p-interview-detail) .home-event__fractal--left {
  top: 5300px;
}

.l-main:has(.p-interview-detail) .home-event__fractal--right {
  top: 5700px;
}

.l-main:has(.p-interview-detail) .home-donation__fractal--left {
  top: 6100px;
  transform: none;
}

.l-main:has(.p-interview-detail) .home-vision__fractal--left {
  top: 6500px;
  bottom: auto;
  height: auto;
}

.l-main:has(.p-interview-detail) .home-vision__fractal--right {
  top: 6800px;
  bottom: auto;
  height: auto;
}

@media screen and (max-width: 768px) {
  .l-main:has(.p-interview-detail) .home-fv__bg-item--top {
    display: none;
  }

  .l-main:has(.p-interview-detail) .home-fv__bg-item--left {
    top: 8%;
    width: 34%;
  }

  .l-main:has(.p-interview-detail) .home-fv__bg-item--right {
    top: 0;
    width: 52%;
  }

  .l-main:has(.p-interview-detail) .home-interview__fractal--left {
    top: 520px;
    bottom: auto;
    width: 38%;
    max-width: 150px;
    transform: none;
  }

  .l-main:has(.p-interview-detail) .home-interview__fractal--right {
    top: 1180px;
    bottom: auto;
    width: 38%;
    max-width: 200px;
  }

  .l-main:has(.p-interview-detail) .home-history__fractal--right {
    top: 900px;
    bottom: auto;
  }

  .l-main:has(.p-interview-detail) .home-about__fractal--left {
    top: 2000px;
    bottom: auto;
  }

  .l-main:has(.p-interview-detail) .home-about__fractal--right {
    top: 2800px;
    bottom: auto;
    transform: none;
  }

  .l-main:has(.p-interview-detail) .home-history__fractal--left {
    top: 3200px;
    bottom: auto;
    width: 160px;
  }

  .l-main:has(.p-interview-detail) .home-event__fractal--left {
    top: 3600px;
    bottom: auto;
    width: 80px;
  }

  .l-main:has(.p-interview-detail) .home-event__fractal--right {
    top: 4000px;
    bottom: auto;
    width: 200px;
  }

  .l-main:has(.p-interview-detail) .home-donation__fractal--left {
    top: 4400px;
    bottom: auto;
    width: 160px;
    transform: none;
  }

  .l-main:has(.p-interview-detail) .home-vision__fractal--left {
    top: 520px;
    bottom: auto;
    width: 38%;
    max-width: 150px;
    height: auto;
  }

  .l-main:has(.p-interview-detail) .home-vision__fractal--right {
    top: 520px;
    bottom: auto;
    width: 38%;
    max-width: 150px;
    height: auto;
  }
}

.p-interview-detail {
  position: relative;
  z-index: 40;
  padding: 110px 0 120px;
}

@media screen and (max-width: 768px) {
  .p-interview-detail {
    padding: 70px 0 80px;
  }
}

.p-interview-detail__inner {
  position: relative;
  z-index: 10;
  max-width: 1210px;
}

/* セクションヘッド */
.p-interview-detail__head {
  margin-bottom: 56px;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__head {
    margin-bottom: 40px;
  }
}

.c-section-head--interview .c-section-head__img {
  width: 72px;
}

@media screen and (max-width: 768px) {
  .c-section-head--interview .c-section-head__img {
    width: 48px;
  }
}

/* ヒーロー */
.p-interview-detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 64px;
  background: linear-gradient(
    135deg,
    #4fddff 0%,
    #076e9d 20%,
    #143a92 38%,
    #1a288f 52%,
    #607bc9 100%
  );
}

.p-interview-detail__hero-profile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px 48px 48px;
  color: #ffffff;
}

.p-interview-detail__hero-meta {
  position: relative;
  padding-left: 24px;
  margin-bottom: 32px;
}

.p-interview-detail__hero-meta::before {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #de7cfe 0%, #0075ff 100%);
}

.p-interview-detail__hero-role {
  margin: 0 0 12px;
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 600;
}

.p-interview-detail__hero-name {
  margin: 0 0 8px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: clamp(3.6rem, 2.8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.p-interview-detail__hero-name-en {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

.p-interview-detail__hero-lead {
  flex: 1;
  margin-bottom: 40px;
}

.p-interview-detail__hero-lead p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9;
}

.p-interview-detail__hero-logo {
  width: 140px;
}

.p-interview-detail__hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-interview-detail__hero-portrait {
  position: relative;
  z-index: 2;
  margin: 0;
  margin-left: clamp(-40px, -3.5vw, -20px);
  line-height: 0;
  background-color: #ffffff;
  border-radius: clamp(40px, 7vw, 80px) 0 0 clamp(40px, 7vw, 80px);
  overflow: hidden;
}

.p-interview-detail__hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: center top;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__hero {
    display: flex;
    flex-direction: column;
    background: #1d258f;
    margin-bottom: 40px;
  }

  .p-interview-detail__hero-portrait {
    order: 1;
    margin: 0;
    border-radius: 0 0 0 clamp(60px, 16vw, 100px);
  }

  .p-interview-detail__hero-portrait img {
    min-height: 0;
    aspect-ratio: 1 / 0.9;
    object-position: center top;
  }

  .p-interview-detail__hero-profile {
    order: 2;
    padding: 28px 22px 40px;
  }

  .p-interview-detail__hero-meta {
    padding-left: 18px;
    margin-bottom: 24px;
  }

  .p-interview-detail__hero-role {
    font-size: 1.3rem;
  }

  .p-interview-detail__hero-name {
    font-size: clamp(2.8rem, 7vw, 3.2rem);
  }

  .p-interview-detail__hero-lead {
    margin-bottom: 28px;
  }

  .p-interview-detail__hero-lead p {
    font-size: 1.4rem;
  }

  .p-interview-detail__hero-logo {
    width: 110px;
  }
}

/* 記事 */
.p-interview-detail__article {
  max-width: 1366px;
  margin: 0 auto;
  padding: 90px 60px 0;
  background-image: url(../images/interview/figure02.png);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  container-type: inline-size;
  --interview-article-padding-x: 60px;
  --interview-article-edge-outset: var(--interview-article-padding-x);
}

@media screen and (max-width: 768px) {
  .p-interview-detail__article {
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    --interview-article-padding-x: 20px;
  }
}

/* フル幅画像 */
.p-interview-detail__figure-full {
  margin: 0 0 48px;
  line-height: 0;
}

.p-interview-detail__figure-full img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__figure-full {
    width: calc(100% + 2 * var(--interview-article-edge-outset));
    margin-left: calc(-1 * var(--interview-article-edge-outset));
    margin-right: calc(-1 * var(--interview-article-edge-outset));
    margin-bottom: 32px;
  }
}

/* 本文エリア */
.p-interview-detail__body {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__body {
    padding: 0 22px;
  }
}

/* テキストブロック */
.p-interview-detail__content {
  margin-bottom: 48px;
}

.p-interview-detail__content p {
  margin: 0 0 1.4em;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
}

.p-interview-detail__content p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__content {
    margin-bottom: 32px;
  }

  .p-interview-detail__content p {
    font-size: 1.2rem;
    line-height: 1.9;
  }
}

/* プルクオート */
.p-interview-detail__pullquote {
  position: relative;
  margin: 0 0 48px;
  padding: 24px 32px;
  background: rgba(0, 117, 255, 0.05);
  border: none;
}

.p-interview-detail__pullquote::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #0075ff 0%, #de7cfe 100%);
}

.p-interview-detail__pullquote p {
  margin: 0;
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(1.7rem, 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1.8;
  color: #1a288f;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__pullquote {
    margin-bottom: 32px;
    padding: 20px 24px;
  }

  .p-interview-detail__pullquote p {
    font-size: 1.6rem;
    line-height: 1.75;
  }
}

/* セクション見出し */
.p-interview-detail__section-heading {
  margin: 0 0 32px;
  font-family: "Noto Serif Japanese", serif;
  font-size: clamp(2rem, 2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.6;
  color: #1a288f;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__section-heading {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    margin-bottom: 24px;
  }
}

/* テキスト＋画像 行 */
.p-interview-detail__row {
  display: grid;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.p-interview-detail__row--figure-left {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.p-interview-detail__row--figure-right {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.p-interview-detail__row--figure-right .p-interview-detail__row-figure {
  order: 2;
}

.p-interview-detail__row--figure-right .p-interview-detail__row-text {
  order: 1;
}

.p-interview-detail__row-figure {
  margin: 0;
  line-height: 0;
}

.p-interview-detail__row--figure-right .p-interview-detail__row-figure {
  width: calc(100% + var(--interview-article-edge-outset));
  margin-right: calc(-1 * var(--interview-article-edge-outset));
}

.p-interview-detail__row--figure-left .p-interview-detail__row-figure {
  width: calc(100% + var(--interview-article-edge-outset));
  margin-left: calc(-1 * var(--interview-article-edge-outset));
}

.p-interview-detail__row-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-interview-detail__row-text p {
  margin: 0 0 1.8em;
  font-size: 1.6rem;
  line-height: 2;
}

.p-interview-detail__row-text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__row {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }

  .p-interview-detail__row--figure-right .p-interview-detail__row-figure,
  .p-interview-detail__row--figure-left .p-interview-detail__row-figure {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .p-interview-detail__row--figure-right .p-interview-detail__row-figure {
    order: 1;
  }

  .p-interview-detail__row--figure-right .p-interview-detail__row-text {
    order: 2;
  }

  .p-interview-detail__row-text p {
    font-size: 1.5rem;
  }
}

/* 関連インタビュー */
.p-interview-detail__related {
  margin-top: 100px;
  padding: 0 44px;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__related {
    margin-top: 64px;
    padding: 0 22px;
  }
}

.p-interview-detail__related-head {
  margin-bottom: 40px;
  text-align: center;
}

.p-interview-detail__related-en {
  margin: 0 0 8px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0.06em;
  color: #1a288f;
}

.p-interview-detail__related-jp {
  margin: 0;
  font-size: 1.3rem;
  color: #555;
  letter-spacing: 0.1em;
}

.p-interview-detail__related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__related-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.p-interview-detail__related-link {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  padding: 24px;
  background: rgba(26, 40, 143, 0.03);
  border: 1px solid rgba(26, 40, 143, 0.1);
  transition: background 0.3s;
}

.p-interview-detail__related-link:hover {
  background: rgba(26, 40, 143, 0.08);
}

@media screen and (max-width: 768px) {
  .p-interview-detail__related-link {
    padding: 16px;
    gap: 16px;
  }
}

.p-interview-detail__related-num {
  flex-shrink: 0;
  width: 40px;
  align-self: flex-start;
}

.p-interview-detail__related-num span {
  display: block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #1a288f;
}

.p-interview-detail__related-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  line-height: 0;
}

.p-interview-detail__related-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-interview-detail__related-info {
  flex: 1;
  min-width: 0;
}

.p-interview-detail__related-role {
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #666;
}

.p-interview-detail__related-name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: #111;
}

/* ============================================================
   p-interview-index
   ============================================================ */

.p-interview-index {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
}

@media screen and (max-width: 768px) {
  .p-interview-index {
    padding: 100px 0 60px;
  }
}

.p-interview-index__inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

.p-interview-index__head {
  margin-bottom: 64px;
}

@media screen and (max-width: 768px) {
  .p-interview-index__head {
    margin-bottom: 40px;
  }
}

.p-interview-index__section-head {
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
}

/* news一覧と同じアイコンサイズ感 */
.p-interview-index .c-section-head__img {
  width: 28px;
}

@media screen and (max-width: 768px) {
  .p-interview-index .c-section-head__img {
    width: 22px;
  }
}

.p-interview-index__lead {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-interview-index__lead {
    margin-bottom: 48px;
    text-align: left;
    padding: 0 4px;
  }
}

.p-interview-index__lead-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
  letter-spacing: 0.05em;
  text-align: left;
  max-width: 570px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .p-interview-index__lead-text {
    font-size: 1.3rem;
    max-width: 58vw;
  }
}

.p-interview-index__body {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

/* NEWS一覧と同じ控えめな右フラクタル */
.p-interview-index__body .home-history__fractal--right {
  top: 0;
  bottom: 0;
  right: calc(50% - 50vw);
  margin: auto;
  width: clamp(72px, 7vw, 104px);
  height: fit-content;
  z-index: 0;
}

.p-interview-index__body .home-history__fractal-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.45;
}

@media screen and (max-width: 768px) {
  .p-interview-index__body .home-history__fractal--right {
    top: 72px;
    bottom: auto;
    right: calc(50% - 50vw);
    margin: 0;
    width: 52px;
  }

  .p-interview-index__body .home-history__fractal-img {
    opacity: 0.35;
  }

  .p-interview-index > .p-detail__side-text {
    top: 67%;
  }
}

.c-icon__movie:before {
  content: "\e90e";
}

/* YouTube モーダル */
.c-movie-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.c-movie-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.c-movie-modal__inner {
  position: relative;
  width: min(960px, 100%);
}

.c-movie-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  background: transparent;
  border: none;
  color: #fff;
  font-family: din-2014, sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  padding: 8px 4px;
  cursor: pointer;
}

.c-movie-modal__close:hover {
  opacity: 0.7;
}

.c-movie-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.c-movie-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 768px) {
  .c-movie-modal {
    padding: 16px;
  }

  .c-movie-modal__close {
    top: -40px;
    font-size: 1.2rem;
  }
}

.c-interview__arrow {
  top: 82%;
  left: 88%;
  right: auto;
  transform: translate(-50%, -50%);
}

.c-interview__back-label {
  font-size: 9px;
  letter-spacing: 0.06em;
}

.c-interview__back-role {
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.88;
}

/* interview info below circle */

.c-interview__info {
  padding: 20px 8px 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .c-interview__info {
    padding: 12px 4px 0;
  }
}

.c-interview__info-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.c-interview__info-label {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: #1a288f;
}

.c-interview__info-num {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #1a288f;
}

.c-interview__info-name {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .c-interview__info-name {
    font-size: 1.3rem;
  }
}

.c-interview__info-role {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #666;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .c-interview__info-role {
    font-size: 1rem;
  }
}

.c-interview__info-read {
  display: inline-block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: #1a288f;
}

/* ============================================================
   p-interview-detail (new design)
   ============================================================ */

/* ---- white card ---- */

.p-interview-detail__page-head {
  position: relative;
}

.p-interview-detail__card {
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .p-interview-detail__card {
    max-width: 86.9791vw;
    margin: auto;
  }
}

/* ---- intro (header + hero) ---- */

.p-interview-detail__intro {
  margin-bottom: 0;
}

/* ---- interview header (head2) ---- */

.p-interview-detail__head2 {
  margin-bottom: 0;
}

.p-interview-detail__head2-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: 21px 0;
}

.p-interview-detail__head2-id {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}

.p-interview-detail__head2-icon {
  display: block;
  width: 67px;
  height: 67px;
  flex-shrink: 0;
}

.p-interview-detail__head2-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-interview-detail__head2-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 50px;
}

.p-interview-detail__head2-label {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #111;
  line-height: 1;
}

.p-interview-detail__head2-name-block {
  min-width: 0;
}

.p-interview-detail__head2-name {
  margin: 0 0 8px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #111;
}

.p-interview-detail__head2-name-suffix {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 0.2em;
  letter-spacing: 0.05em;
}

.p-interview-detail__head2-role {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.55;
  font-weight: 500;
  color: #111;
}

.p-interview-detail__head2-read {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111;
}

.p-interview-detail__head2-read-text {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}

.p-interview-detail__head2-read img {
  display: block;
  width: 15px;
  height: auto;
  flex-shrink: 0;
  margin-top: 1px;
}

.p-interview-detail__page-head .p-interview-detail__head2-read.is-sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-interview-detail .p-detail__breadcrumb {
    margin-bottom: 0;
    padding-right: 108px;
  }

  .p-interview-detail .p-detail__breadcrumb-list {
    flex-wrap: wrap;
    gap: 6px 0;
  }

  .p-interview-detail .p-detail__breadcrumb-item[aria-current="page"] {
    flex-basis: 100%;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
  }

  .p-interview-detail__page-head {
    margin-bottom: 20px;
  }

  .p-interview-detail__page-head .p-interview-detail__head2-read.is-sp {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    gap: 8px;
    padding: 0;
  }

  .p-interview-detail__head2-aside {
    display: none;
  }

  .p-interview-detail__head2-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0 20px;
  }

  .p-interview-detail__head2-id {
    flex: 1;
    min-width: 0;
    gap: 16px;
  }

  .p-interview-detail__head2-name-block {
    flex: 1;
    min-width: 0;
  }

  .p-interview-detail__head2-icon {
    width: 32px;
    height: 32px;
  }

  .p-interview-detail__head2-read-text {
    font-size: 0.9rem;
  }

  .p-interview-detail__head2-read img {
    width: 16px;
    margin-top: 0;
  }

  .p-interview-detail__head2-name {
    font-size: 2.1rem;
    margin-bottom: 2px;
    letter-spacing: 0.06em;
    line-height: 1.35;
  }

  .p-interview-detail__head2-name-suffix {
    font-size: 1.1rem;
  }

  .p-interview-detail__head2-role {
    font-size: 1.1rem;
    line-height: 1.45;
  }
}

/* ---- hero image (full-width) ---- */

.p-interview-detail__hero-img {
  margin: 0;
  line-height: 0;
}

.p-interview-detail__hero-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: center top;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__hero-img img {
    max-height: 320px;
  }
}

/* ---- series intro (150th logo + description) ---- */

.p-interview-detail__series {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  padding: 56px 80px 64px;
}

.p-interview-detail__series-logo {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  flex-shrink: 0;
}

.p-interview-detail__series-logo-img {
  display: block;
  width: 144px;
  height: auto;
  flex-shrink: 0;
}

.p-interview-detail__series-sep {
  display: block;
  width: auto;
  height: clamp(56px, 6.3vw, 88px);
  flex-shrink: 0;
}

.p-interview-detail__series-title {
  flex-shrink: 0;
}

.p-interview-detail__series-en {
  margin: 0 0 6px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  color: #111;
  line-height: 1.15;
}

.p-interview-detail__series-jp {
  margin: 0;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #861c3c;
  line-height: 1.4;
}

.p-interview-detail__series-text {
  padding-top: 10px;
}

.p-interview-detail__series-text p {
  margin: 0 0 0.4em;
  font-size: 1.4rem;
  line-height: 2;
  color: #111;
  font-weight: 600;
}

.p-interview-detail__series-text p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__series {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 20px 44px;
  }

  .p-interview-detail__series-logo {
    gap: 14px;
    justify-content: center;
  }

  .p-interview-detail__series-logo-img {
    width: 100px;
  }

  .p-interview-detail__series-sep {
    height: 52px;
  }

  .p-interview-detail__series-text {
    padding-top: 0;
  }

  .p-interview-detail__series-text p {
    font-size: 1.2rem;
    line-height: 1.95;
  }
}

/* ---- profile (profile2) ---- */

.p-interview-detail__profile2 {
  margin-bottom: 72px;
  padding: 0 160px;
}

.p-interview-detail__profile2-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(40px, 5vw, 72px);
}

.p-interview-detail__profile2-content {
  min-width: 0;
}

.p-interview-detail__profile2-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.p-interview-detail__profile2-heading {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.12em;
  color: #111;
  flex-shrink: 0;
}

.p-interview-detail__profile2-heading-bar {
  display: block;
  flex: 1;
  max-width: 560px;
  height: 18px;
  overflow: hidden;
}

.p-interview-detail__profile2-heading-bar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.p-interview-detail__profile2-text p {
  margin: 0 0 1.2em;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 2;
  color: #111;
}

.p-interview-detail__profile2-text p:last-of-type {
  margin-bottom: 0;
}

.p-interview-detail__profile2-links {
  margin-top: 36px;
}

.p-interview-detail__profile2-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}

.p-interview-detail__profile2-link-row:last-child {
  margin-bottom: 0;
}

.p-interview-detail__profile2-link-label {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: #111;
  flex-shrink: 0;
  min-width: 36px;
}

.p-interview-detail__profile2-link-url {
  color: #3576ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  font-size: 1.6rem;
  line-height: 1.5;
}

.p-interview-detail__profile2-link-url:hover {
  opacity: 0.7;
}

.p-interview-detail__profile2-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 2rem;
  color: #3576ff;
  transition: opacity 0.2s;
}

.p-interview-detail__profile2-sns-link:hover {
  opacity: 0.6;
}

.p-interview-detail__profile2-photo {
  position: relative;
  margin: 0;
  width: clamp(200px, 18vw, 260px);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  line-height: 0;
}

.p-interview-detail__profile2-photo .c-interview__thumb {
  position: relative;
  z-index: 10;
  border-radius: 50%;
  overflow: hidden;
}

.p-interview-detail__profile2-photo .c-interview__thumb-img {
  border-radius: 50%;
}

.p-interview-detail__profile2-photo .c-interview__back {
  transform: translate(4%, -4%);
}

@media screen and (max-width: 768px) {
  .p-interview-detail__profile2 {
    margin-bottom: 48px;
    padding-left: 0;
    padding-right: 0;
  }

  .p-interview-detail__series-en {
    font-size: 1.8rem;
  }

  .p-interview-detail__series-jp {
    font-size: 1.1rem;
  }

  .p-interview-detail__profile2-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .p-interview-detail__profile2-photo {
    order: -1;
    width: min(100%, 220px);
    margin: 0 auto 4px;
  }

  .p-interview-detail__profile2-head {
    margin-bottom: 20px;
    gap: 12px;
  }

  .p-interview-detail__profile2-content {
    padding: 0 20px;
  }

  .p-interview-detail__profile2-heading {
    font-size: 1.6rem;
  }

  .p-interview-detail__profile2-heading-bar {
    flex: 1;
    max-width: none;
    height: 18px;
  }

  .p-interview-detail__profile2-links {
    margin-top: 24px;
  }

  .p-interview-detail__profile2-link-label,
  .p-interview-detail__profile2-link-url {
    font-size: 1.3rem;
  }

  .p-interview-detail__profile2-text p {
    font-size: 1.1rem;
    line-height: 1.95;
    margin-bottom: 0px;
  }
}

/* ---- article heading ---- */

.p-interview-detail__article-heading {
  margin: 0 0 56px;
  padding: 6px 0 6px 24px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: #111;
  background: linear-gradient(180deg, #0075ff 0%, #de7cfe 100%) left / 3px 100% no-repeat;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__article-heading {
    margin-bottom: 40px;
    font-size: 2rem;
    padding-left: 16px;
    background-size: 1px 100%;
  }
}

/* ---- Q&A blocks ---- */

.p-interview-detail__qa {
  margin-bottom: 64px;
}

.p-interview-detail__qa-head {
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.p-interview-detail__qa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #de7cfe 0%, #0075ff 100%);
  flex-shrink: 0;
}

.p-interview-detail__qa-icon--category {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: none;
}

.p-interview-detail__qa-icon--category img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-interview-detail__qa-icon span {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.6rem;
  color: #ffffff;
  line-height: 1;
}

.p-interview-detail__qa-title {
  margin: 0;
  display: flex;
  align-items: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: clamp(12px, 1.4vw, 16px);
  row-gap: 4px;
  font-size: 1.7rem;
  font-weight: 700;
  color: #111;
  line-height: 1.55;
}

.p-interview-detail__qa-title-lead {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(6px, 1.2vw, 8px);
  height: 24px;
}

.p-interview-detail__qa-title-body {
  min-width: 0;
  flex: 1 1 auto;
}

.p-interview-detail__qa-num {
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: #861c3c;
  flex-shrink: 0;
}

.p-interview-detail__qa-sep {
  display: block;
  width: clamp(10px, 3vw, 12px);
  height: 3px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #de7cfe 0%, #0075ff 100%);
}

.p-interview-detail__qa-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: start;
}

.p-interview-detail__qa-row--figure-left {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 56px);
}

.p-interview-detail__qa-content .p-interview-detail__qa-head {
  margin-bottom: 24px;
}

.p-interview-detail__qa-text p {
  margin: 0 0 1.4em;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  color: #111;
}

.p-interview-detail__qa-text p:last-child {
  margin-bottom: 0;
}

.p-interview-detail__qa-text p.annotation,
.p-interview-detail__qa-text .annotation {
  font-size: 1.2rem;
}

.p-interview-detail__qa-figure {
  margin: 0;
  line-height: 0;
}

.p-interview-detail__qa-row--figure-left .p-interview-detail__qa-figure {
  width: calc(100% + var(--interview-article-edge-outset));
  margin-left: calc(-1 * var(--interview-article-edge-outset));
}

.p-interview-detail__qa-row:not(.p-interview-detail__qa-row--figure-left)
  .p-interview-detail__qa-figure {
  width: calc(100% + var(--interview-article-edge-outset));
  margin-right: calc(-1 * var(--interview-article-edge-outset));
}

.p-interview-detail__qa-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.p-interview-detail__qa-row--figure-left .p-interview-detail__qa-figure img {
  object-position: center top;
}

.p-interview-detail__qa-images {
  margin: 32px 0;
}

.p-interview-detail__qa-images--gallery {
  display: block;
  margin: 36px 0;
}

.p-interview-detail__qa-images--gallery .p-interview-detail__qa-image {
  margin: 0;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.16);
}

.p-interview-detail__qa-image {
  margin: 0;
  line-height: 0;
}

.p-interview-detail__qa-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__qa {
    margin-bottom: 48px;
  }

  .p-interview-detail__qa:has(> .p-interview-detail__qa-images--gallery) {
    display: flex;
    flex-direction: column;
  }

  .p-interview-detail__qa:has(> .p-interview-detail__qa-images--gallery) > * {
    order: 3;
  }

  .p-interview-detail__qa:has(> .p-interview-detail__qa-images--gallery)
    > .p-interview-detail__qa-head {
    order: 1;
  }

  .p-interview-detail__qa:has(> .p-interview-detail__qa-images--gallery)
    > .p-interview-detail__qa-images--gallery {
    order: 2;
  }

  .p-interview-detail__qa-text p.annotation,
  .p-interview-detail__qa-text .annotation {
    font-size: 1rem;
  }

  .p-interview-detail__qa-text p {
    font-size: 1.2rem;
  }

  .p-interview-detail__qa-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 5px;
    row-gap: 0;
    margin-bottom: 20px;
  }

  .p-interview-detail__qa-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 0;
    font-size: 1.4rem;
    line-height: 1.55;
  }

  .p-interview-detail__qa-title-lead {
    height: 16px;
    padding-top: 0;
  }

  .p-interview-detail__qa-title-body {
    min-width: 0;
  }

  .p-interview-detail__qa-title-body br {
    display: none;
  }

  .p-interview-detail__qa-num {
    font-size: 1.3rem;
  }

  .p-interview-detail__qa-sep {
    width: 6px;
    height: 1px;
  }

  .p-interview-detail__qa-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .p-interview-detail__qa-row--figure-left .p-interview-detail__qa-figure,
  .p-interview-detail__qa-row:not(.p-interview-detail__qa-row--figure-left)
    .p-interview-detail__qa-figure {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .p-interview-detail__qa-row--figure-left .p-interview-detail__qa-figure img {
    aspect-ratio: auto;
  }

  .p-interview-detail__qa-content .p-interview-detail__qa-head {
    margin-bottom: 20px;
  }

  .p-interview-detail__qa-icon--category {
    margin-top: 0;
    width: 16px;
    height: 16px;
  }

  .p-interview-detail__qa-icon:not(.p-interview-detail__qa-icon--category) {
    width: 32px;
    height: 32px;
    margin-top: 0.28em;
  }

  .p-interview-detail__qa-images {
    gap: 8px;
    margin: 24px 0;
  }

  .p-interview-detail__qa-images--gallery {
    width: calc(100% + 2 * var(--interview-article-edge-outset));
    margin-left: calc(-1 * var(--interview-article-edge-outset));
    margin-right: calc(-1 * var(--interview-article-edge-outset));
    margin-top: 0;
  }
}

/* ---- closing photo ---- */

.p-interview-detail__closing-photo {
  margin: 0 0 56px;
  line-height: 0;
}

.p-interview-detail__closing-photo img {
}

@media screen and (max-width: 768px) {
  .p-interview-detail__closing-photo {
    width: calc(100% + 2 * var(--interview-article-edge-outset));
    margin-left: calc(-1 * var(--interview-article-edge-outset));
    margin-right: calc(-1 * var(--interview-article-edge-outset));
    margin-bottom: 40px;
  }

  .p-interview-detail__closing-photo img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
  }
}

/* ---- closing button ---- */

.p-interview-detail__closing-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 88px;
}

.p-interview-detail__closing-btn .c-btn {
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #de7cfe 0%, #0075ff 100%) border-box;
}

.p-interview-detail__closing-btn .c-btn::before {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .p-interview-detail__closing-btn .c-btn:hover {
    background:
      linear-gradient(90deg, #de7cfe 0%, #ffffff 50%) padding-box,
      linear-gradient(90deg, #de7cfe 0%, #0075ff 100%) border-box;
  }
}

@media screen and (max-width: 768px) {
  .p-interview-detail__closing-btn {
    margin-bottom: 60px;
  }
}

/* ---- OTHER INTERVIEW (related2) ---- */

.p-interview-detail__related2 {
  --related2-visible: 3;
  --related2-size-divisor: 2.75;
  --related2-slide-count: 1;
  /* 1200px 時のサイズを上限に（4.5vw of 1200 = 54px） */
  --related2-gap: clamp(36px, 4.5vw, 54px);
  --related2-item-width: calc(
    (min(100vw, 1200px) - 2 * var(--related2-gap)) /
      var(--related2-size-divisor)
  );
  --related2-step: calc(var(--related2-item-width) + var(--related2-gap));
  --related2-edge-offset: 0;
  padding-top: 64px;
}

.p-interview-detail__related2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 100px;
}

.p-interview-detail__related2-en {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 2.9rem;
  letter-spacing: 0.04em;
  color: #111;
}

.p-interview-detail__related2-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.p-interview-detail__related2-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: opacity 0.2s;
}

.p-interview-detail__related2-nav-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-interview-detail__related2-nav-btn:hover {
  opacity: 0.7;
}

.p-interview-detail__related2-nav-btn.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.p-interview-detail__related2-slider {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
}

.p-interview-detail__related2-viewport {
  touch-action: pan-y;
}

.p-interview-detail__related2-list {
  display: flex;
  gap: var(--related2-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.p-interview-detail__related2-item {
  flex: 0 0 var(--related2-item-width);
  max-width: var(--related2-item-width);
}

.p-interview-detail__related2-link {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.26, 1, 0.48, 1);
}

.p-interview-detail__related2-link .c-interview__back {
  transform: translate(4%, -4%);
}

@media (hover: hover) and (pointer: fine) {
  .p-interview-detail__related2-link:hover {
    transform: translateY(6px) scale(0.97);
  }
}

.p-interview-detail__related2-thumb {
  position: relative;
  z-index: 10;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.p-interview-detail__related2-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.p-interview-detail__related2-arrow {
  position: absolute;
  bottom: 6%;
  right: -3%;
  z-index: 40;
  width: clamp(32px, 5.8vw, 40px);
  height: clamp(32px, 5.8vw, 40px);
  line-height: 0;
}

.p-interview-detail__related2-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-interview-detail__related2-info {
  text-align: left;
}

.p-interview-detail__related2-info-inner {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: none;
  margin: 0;
}

.p-interview-detail__related2-label {
  flex-shrink: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #111;
}

.p-interview-detail__related2-sep {
  display: block;
  flex-shrink: 0;
  width: 2px;
  align-self: stretch;
  background: linear-gradient(180deg, #0075ff 0%, #de7cfe 100%);
}

.p-interview-detail__related2-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-interview-detail__related2-name {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.p-interview-detail__related2-role {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #111;
  line-height: 1.8;
}

.p-interview-detail__related2-read {
  display: inline-block;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #111;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__related2 {
    --related2-visible: 1;
    --related2-size-divisor: 1.22;
    --related2-gap: 20px;
    margin-top: 40px;
    padding-top: 40px;
  }

  .p-interview-detail__related2-head {
    margin-bottom: 28px;
  }

  .p-interview-detail__related2-en {
    font-size: 1.8rem;
    line-height: 1.15;
    max-width: 5.5em;
  }

  .p-interview-detail__related2-nav-btn {
    width: 36px;
    height: 36px;
  }

  .p-interview-detail__related2-viewport {
    overflow: hidden;
  }

  .p-interview-detail__related2-list {
    padding-left: 24px;
    padding-top: 20px;
  }

  .p-interview-detail__related2-link {
    margin-bottom: 16px;
  }

  .p-interview-detail__related2-arrow {
    width: 32px;
    height: 32px;
  }

  .p-interview-detail__related2-info-inner {
    gap: 8px;
  }

  .p-interview-detail__related2-label {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }

  .p-interview-detail__related2-name {
    font-size: 1.2rem;
  }

  .p-interview-detail__related2-role {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 8px;
  }

  .p-interview-detail__related2-read {
    font-size: 0.9rem;
  }
}

/* About：LOGO 再構築中のスクロールロック */
html.is-about-scroll-locked,
body.is-about-scroll-locked,
.l-container.is-about-scroll-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* --------------------------------------------------------------------------
   ABOUT PAGE  /about/
========================================================================== */

.p-about {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
}

/* bg02 はシンボル・フラクタルより背面に敷く（横幅いっぱい） */
.page-sub:has(.p-about) .l-main,
.page-sub:has(.p-history) .l-main,
.page-sub:has(.p-vision) .l-main {
  position: relative;
}

.page-sub:has(.p-about) .l-main::before,
.page-sub:has(.p-history) .l-main::before,
.page-sub:has(.p-vision) .l-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url(/150anniversary/assets/images/about/bg02.png);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .page-sub:has(.p-about) .l-main::before,
  .page-sub:has(.p-history) .l-main::before,
  .page-sub:has(.p-vision) .l-main::before {
    background-image: url(/150anniversary/assets/images/about/bg02-sp.png);
  }
}

.page-sub:has(.p-about) .l-main > .home-fv__bg-item,
.page-sub:has(.p-about) .l-main > .home-history__fractal,
.page-sub:has(.p-about) .l-main > .home-about__fractal,
.page-sub:has(.p-history) .l-main > .home-fv__bg-item,
.page-sub:has(.p-history) .l-main > .home-history__fractal,
.page-sub:has(.p-history) .l-main > .home-about__fractal,
.page-sub:has(.p-vision) .l-main > .home-fv__bg-item,
.page-sub:has(.p-vision) .l-main > .home-history__fractal,
.page-sub:has(.p-vision) .l-main > .home-about__fractal {
  z-index: 25; /* bg02(0) より前面、webglシンボル(30)・本文(40) より背面 */
}

/* FV フラクタルは bg02 より前面、webglシンボル / ブランド・ロゴより背面 */
.page-sub:has(.p-about) .l-main > .home-fv__bg-item,
.page-sub:has(.p-history) .l-main > .home-fv__bg-item,
.page-sub:has(.p-vision) .l-main > .home-fv__bg-item {
  z-index: 25;
  pointer-events: none;
}

/* Haze / inview で opacity:0 のまま消えないようにする */
.page-sub:has(.p-about) .l-main > .home-fv__bg-item > img,
.page-sub:has(.p-about) .l-main > .home-fv__bg-item > canvas,
.page-sub:has(.p-history) .l-main > .home-fv__bg-item > img,
.page-sub:has(.p-history) .l-main > .home-fv__bg-item > canvas,
.page-sub:has(.p-vision) .l-main > .home-fv__bg-item > img,
.page-sub:has(.p-vision) .l-main > .home-fv__bg-item > canvas {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   FV：ブランド + セクションヘッド + ナビを 1 画面に収める
-------------------------------------------------------------------------- */
.p-about__fv {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100svh;
  margin-top: -110px;
  padding: 0;
  background: transparent;
}

/* ブランド領域は残り高さを使い、copy/logo は fixed でフェードアウト */
.p-about .p-history__brand,
.p-history .p-history__brand,
.p-vision .p-history__brand {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.p-about .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--about-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
}

.p-history .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--history-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
}

.p-vision .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vision-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
}

/* WebGL を見出し帯と被らないよう少し上へ */
.page-sub:has(.p-about) .l-main > .webgl-wrapper:not(.is-footer-webgl-active),
.page-sub:has(.p-history) .l-main > .webgl-wrapper:not(.is-footer-webgl-active),
.page-sub:has(.p-vision) .l-main > .webgl-wrapper:not(.is-footer-webgl-active) {
  transform: translate3d(0, calc(-1 * clamp(48px, 7vh, 96px)), 0);
}

/* HISTORY / ABOUT / VISION FV：トップ（home-fv__main）と同じ配置 */
.p-history .p-history__brand-inner,
.p-about .p-history__brand-inner,
.p-vision .p-history__brand-inner {
  display: block;
  padding-top: 110px;
  padding-bottom: 40px;
  padding-left: 70px;
  padding-right: 70px;
}

.p-history .p-history__brand-inner .home-fv__content,
.p-about .p-history__brand-inner .home-fv__content,
.p-vision .p-history__brand-inner .home-fv__content {
  width: 100%;
  height: 100%;
}

.p-history .p-history__brand-inner .home-fv__main,
.p-about .p-history__brand-inner .home-fv__main,
.p-vision .p-history__brand-inner .home-fv__main {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.p-history .p-history__brand-copy,
.p-about .p-history__brand-copy,
.p-vision .p-history__brand-copy {
  grid-column: unset;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.p-history .p-history__brand-logo,
.p-about .p-history__brand-logo,
.p-vision .p-history__brand-logo {
  grid-column: unset;
  justify-self: unset;
  width: 23.4260614934vw;
  max-width: 320px;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* ABOUT / HISTORY / VISION：ブランド内オーバーレイの余白を再指定（共有ルール上書き） */
.p-about .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--about-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
  padding-left: 70px;
  padding-right: 70px;
}

.p-history .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--history-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
  padding-left: 70px;
  padding-right: 70px;
}

.p-vision .p-history__brand-inner {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vision-brand-fv-height, 50svh);
  max-width: 100%;
  padding-top: 110px;
  padding-bottom: clamp(12px, 2vh, 24px);
  padding-left: 70px;
  padding-right: 70px;
}

@media screen and (max-width: 768px) {
  .p-history .p-history__brand-inner,
  .p-about .p-history__brand-inner,
  .p-vision .p-history__brand-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 24px;
    width: 100%;
    min-height: 0;
  }

  .p-history .p-history__brand-inner .home-fv__content,
  .p-about .p-history__brand-inner .home-fv__content,
  .p-vision .p-history__brand-inner .home-fv__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }

  .p-history .p-history__brand-inner .home-fv__main,
  .p-about .p-history__brand-inner .home-fv__main,
  .p-vision .p-history__brand-inner .home-fv__main {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .p-history .home-fv__copy-wrapper,
  .p-about .home-fv__copy-wrapper,
  .p-vision .home-fv__copy-wrapper,
  .p-history .home-fv__copy,
  .p-about .home-fv__copy,
  .p-vision .home-fv__copy,
  .p-history .p-history__brand-copy,
  .p-about .p-history__brand-copy,
  .p-vision .p-history__brand-copy {
    display: none;
  }

  .p-history .p-history__brand-inner .home-fv__main,
  .p-about .p-history__brand-inner .home-fv__main,
  .p-vision .p-history__brand-inner .home-fv__main {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 clamp(4px, 1svh, 12px);
  }

  .p-about .home-fv__logo-wrapper,
  .p-history .home-fv__logo-wrapper,
  .p-vision .home-fv__logo-wrapper {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .p-history .home-fv__logo,
  .p-about .home-fv__logo,
  .p-vision .home-fv__logo,
  .p-history .p-history__brand-logo,
  .p-about .p-history__brand-logo,
  .p-vision .p-history__brand-logo {
    width: 46.9333333333vw;
    max-width: 100%;
    margin-top: 0;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }
}

@media screen and (max-width: 768px) {
  .p-about {
    padding-top: 70px;
    padding-bottom: 0;
  }

  .p-about__fv,
  .p-history__fv,
  .p-vision__fv {
    margin-top: -70px;
    min-height: 100svh;
  }

  .p-history,
  .p-vision {
    padding-top: 70px;
  }

  .p-history {
    padding-bottom: 0;
  }

  .p-about .p-history__brand,
  .p-history .p-history__brand,
  .p-vision .p-history__brand {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  /* SP：パンくず + ロゴ + HISTORY 見出しまでを 1 画面に収める */
  .p-history__fv {
    --history-sp-fv-head: clamp(128px, 22svh, 156px);
  }

  .p-history .p-history__brand {
    flex: 1 1 auto;
    min-height: calc(100svh - var(--history-sp-fv-head));
  }

  /* SP：パンくず + ロゴ + VISION タイトルまでを 1 画面に収める */
  .p-vision__fv {
    --vision-sp-fv-head: clamp(132px, 23svh, 172px);
  }

  .p-vision .p-history__brand {
    flex: 1 1 auto;
    min-height: calc(100svh - var(--vision-sp-fv-head));
  }

  .p-vision__head-section {
    flex: 0 0 auto;
    padding: 4px 20px 20px;
  }

  /* SP：パンくず + ロゴ + ABOUT 見出し・ナビまでを 1 画面に収める */
  .p-about__fv {
    --about-sp-fv-head: clamp(220px, 34svh, 300px);
  }

  .p-about .p-history__brand {
    flex: 1 1 auto;
    min-height: calc(100svh - var(--about-sp-fv-head));
  }

  .p-about__head-section {
    flex: 0 0 auto;
  }

  .p-history__head-section {
    flex: 0 0 auto;
    padding: 0 0 12px;
  }

  .p-history__fv > .p-history__fv-nav {
    flex: 0 0 auto;
    margin-top: clamp(12px, 2.5svh, 24px);
  }

  .p-about .p-history__brand-inner,
  .p-history .p-history__brand-inner,
  .p-vision .p-history__brand-inner {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    height: auto;
    padding: 0 24px;
  }

  .p-about .p-history__brand-inner .home-fv__main,
  .p-history .p-history__brand-inner .home-fv__main,
  .p-vision .p-history__brand-inner .home-fv__main {
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 clamp(4px, 1svh, 12px);
  }

  .p-history .p-history__brand-inner .home-fv__main {
    justify-content: flex-end;
    padding: 0 0 clamp(36px, 8svh, 68px);
  }

  .p-history .p-history__brand-logo,
  .p-history .home-fv__logo {
    width: min(42vw, 156px);
    max-width: 156px;
    margin-bottom: 0;
  }

  .page-sub:has(.p-about) .l-main > .webgl-wrapper:not(.is-footer-webgl-active),
  .page-sub:has(.p-history)
    .l-main
    > .webgl-wrapper:not(.is-footer-webgl-active),
  .page-sub:has(.p-vision)
    .l-main
    > .webgl-wrapper:not(.is-footer-webgl-active),
  .page-sub:has(.p-message-detail)
    .l-main
    > .webgl-wrapper:not(.is-footer-webgl-active) {
    transform: translate3d(0, calc(-1 * clamp(72px, 17svh, 132px)), 0) scale(0.88);
    transform-origin: center center;
  }
}

/* FV WebGL：ロゴセクション表示時にメインシンボルを非表示 */
.page-sub:has(.p-about) .l-main > .webgl-wrapper.is-fv-webgl-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

.page-sub:has(.p-about) .l-main > .webgl-wrapper.is-footer-webgl-active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.p-about__logo.is-sequence-active .p-about__logo-symbol {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   ABOUT / HISTORY セクションヘッド + アンカーナビ（FV 下部）
-------------------------------------------------------------------------- */
.p-about__head-section,
.p-history__head-section {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  text-align: center;
  padding: clamp(8px, 1.5vh, 20px) 0 clamp(16px, 2.5vh, 36px);
  background: transparent;
}

.p-about__head-section .p-history__section-head,
.p-history__head-section .p-history__section-head {
  margin-top: 0;
  padding-left: 70px;
  padding-right: 70px;
}

.p-about__head-section .c-section-head--about .c-section-head__img {
  width: clamp(56px, 6.5vh, 80px);
}

.p-history__head-section .c-section-head--history .c-section-head__img {
  width: 32px;
}

.p-about__head-section .c-section-head__en,
.p-history__head-section .c-section-head__en {
  font-size: clamp(4.2rem, 6.5vh, 5.6rem);
  margin-top: clamp(4px, 0.8vh, 12px);
  line-height: 1.1;
}

.p-about__head-section .c-section-head__jp,
.p-history__head-section .c-section-head__jp {
  font-size: clamp(1.2rem, 1.6vh, 1.4rem);
}

.p-about__head-section .p-history__fv-nav,
.p-history__fv > .p-history__fv-nav {
  margin-top: clamp(8px, 1.5vh, 20px);
}

.p-about__head-section .p-history__fv-nav-link,
.p-history__fv > .p-history__fv-nav .p-history__fv-nav-link {
  position: relative;
  min-height: clamp(72px, 12vh, 104px);
  padding: clamp(12px, 1.8vh, 20px) 12px clamp(26px, 3vh, 32px);
}

@media screen and (max-width: 768px) {
  .p-about__head-section,
  .p-history__head-section {
    padding: 8px 0 16px;
    background: transparent;
  }

  .p-history__head-section {
    /* ブランド側 min-height と合わせ、見出しだけを FV 末尾に置く */
    padding: 4px 0 8px;
  }

  .p-about__head-section .p-history__section-head,
  .p-history__head-section .p-history__section-head {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-about__head-section .c-section-head--about .c-section-head__img {
    width: 44px;
  }

  .p-history__head-section .c-section-head--history .c-section-head__img {
    width: 32px;
  }

  .p-about__head-section .c-section-head__en,
  .p-history__head-section .c-section-head__en {
    font-size: 3.2rem;
    margin-top: 4px;
  }

  .p-about__head-section .c-section-head__jp,
  .p-history__head-section .c-section-head__jp {
    font-size: 1.1rem;
  }

  .p-about__head-section .p-history__fv-nav-link,
  .p-history__fv > .p-history__fv-nav .p-history__fv-nav-link {
    min-height: 64px;
    padding: 6px 6px 10px;
  }
}

/* --------------------------------------------------------------------------
   CONCEPT
-------------------------------------------------------------------------- */
.p-about__concept {
  position: relative;
  z-index: 10;
  padding: 120px 0 100px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .p-about__concept {
    padding: 80px 0 60px;
  }
}

.p-about__concept-bubble {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

.p-about__concept-bubble--01 {
  bottom: 8%;
  left: clamp(12px, 4vw, 80px);
  width: clamp(80px, 10vw, 160px);
  opacity: 0.7;
}

.p-about__concept-bubble-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-about__concept-inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

.p-about__concept-head .c-section-head__en {
  margin-top: 0;
  color: #1a1a1a;
  font-size: 4.8rem;
}

.p-about__concept-head .c-section-head__jp {
  color: #1a1a1a;
  font-family: "Noto Serif Japanese", serif;
  font-size: 2.4rem;
  font-weight: 700;
}

.p-about__concept-head-line,
.p-about__message-head-line {
  display: block;
  width: 2px;
  height: 14px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-about__concept-body {
  max-width: 800px;
  margin: 80px auto 0;
  padding: 0 24px;
}

.p-about__concept-hero {
  position: relative;
  margin-bottom: 64px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .p-about__concept-body {
    margin-top: 28px;
    padding: 0 24px;
  }
}

@media screen and (max-width: 768px) {
  .p-about__concept-hero {
    margin-bottom: 40px;
  }
}

.p-about__concept-smoke {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 900px);
  height: clamp(200px, 40vw, 360px);
  pointer-events: none;
  z-index: 0;
}

.p-about__concept-logo {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.p-about__concept-logo-img {
  display: block;
  width: 100%;
  max-width: 538px;
  height: auto;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-about__concept-logo-img {
    max-width: 100%;
  }
}

.p-about__concept-text {
  text-align: left;
  max-width: 570px;
  margin: 0 auto;
}

.p-about__concept-desc {
  font-family: "Noto Serif Japanese", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.2;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .p-about__concept-desc {
    font-size: 1.2rem;
    line-height: 2;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   LOGO
-------------------------------------------------------------------------- */
.p-about__logo {
  /* --about-logo-symbol-height: clamp(360px, 42vw, 460px); */
  --about-logo-symbol-height: clamp(360px, 42vw, 410px);
  --about-logo-symbol-gap: 32px;
  --about-logo-bg-height: clamp(520px, 86.89vw, 1564px);
  --about-logo-bg-bottom: clamp(280px, 36vw, 370px);
  position: relative;
  z-index: 10;
  padding: 120px 0 0;
}

.p-about__logo::before {
  content: "";
  position: absolute;
  top: calc(var(--about-logo-bg-bottom) - var(--about-logo-bg-height));
  left: 50%;
  z-index: 0;
  width: 900px;
  height: var(--about-logo-bg-height);
  transform: translateX(-50%);
  background-image: url(/150anniversary/assets/images/about/bg01.png);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

.p-about .c-message__list {
  padding: 0px 164px;
}

@media screen and (max-width: 768px) {
  .p-about__logo {
    --about-logo-symbol-height: clamp(280px, 72vw, 400px);
    --about-logo-symbol-gap: 24px;
    --about-logo-bg-height: clamp(420px, 110vw, 760px);
    --about-logo-bg-bottom: clamp(180px, 52vw, 260px);
    padding: 80px 0 60px;
  }
}

.p-about__logo-fractal {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.p-about__logo-fractal--left {
  top: 0;
  left: 0;
  width: clamp(200px, 22vw, 340px);
}

.p-about__logo-fractal-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.5;
}

.p-about__logo-inner {
  position: relative;
  z-index: 10;
  max-width: 100% !important;
}

.p-about__logo-head .c-section-head__en {
  margin-top: 0;
  color: #1a1a1a;
}

.p-about__logo-head .c-section-head__jp {
  margin-top: 8px;
  color: #1a1a1a;
}

.p-about__logo-head-line {
  display: block;
  width: 2px;
  height: 14px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-about__logo-body {
  max-width: 670px;
  margin: clamp(36px, 4.5vw, 64px) auto 0;
  padding: 80px 0 0;
}

@media screen and (max-width: 768px) {
  .p-about__logo-body {
    margin-top: 48px;
    padding: 0 24px;
  }
}

.p-about__logo-hero {
  position: relative;
  display: block;
  margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
  .p-about__logo-hero {
    margin-bottom: 40px;
  }
}

.p-about__logo-hero-main {
  position: relative;
  width: clamp(360px, 42vw, 520px);
  max-width: 100%;
  margin: 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-about__logo-symbol {
  position: relative;
  width: 100%;
  min-height: 440px;
  pointer-events: none;
}

.p-about__logo-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.p-about__logo-webgl canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.p-about__logo-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 1;
  /* padding-bottom: 40px; */
  padding-bottom: 20px;
}

.p-about__logo-visual-img {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
  margin: 0 auto;
}

.p-about__logo-side {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
  width: clamp(150px, 16vw, 210px);
}

.p-about__logo-side-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-about__logo-side-line {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: linear-gradient(0deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  pointer-events: none;
}

.p-about__logo-side-dash {
  position: absolute;
  right: 0;
  width: 128px;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    #861c3c 0 3px,
    transparent 2px 7px
  );
}

.p-about__logo-side-dash--top {
  top: 0;
}

.p-about__logo-side-dash--mid {
  top: var(--about-logo-symbol-height);
}

.p-about__logo-side-dash--top::after,
.p-about__logo-side-dash--mid::after,
.p-about__logo-side-dash--bottom::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 19px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 100%);
}

.p-about__logo-side-dash--bottom {
  bottom: 0;
}

.p-about__logo-side-zone {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-left: clamp(120px, 16.3vw, 200px);
  position: relative;
  top: -5px;
  right: -36px;
}

.p-about__logo-side-zone--symbol {
  flex: 0 0 var(--about-logo-symbol-height);
}

.p-about__logo-side-zone--type {
  flex: 1;
  align-items: flex-start;
  padding-top: 0;
  position: relative;
  top: -5px;
  min-height: clamp(120px, 18vw, 180px);
}

.p-about__logo-side-item {
  margin: 0;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.4vw, 1.6rem);
  letter-spacing: 0.12em;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}

.p-about__logo-side-num {
  display: block;
}

.p-about__logo-side-label {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media screen and (max-width: 768px) {
  .p-about__logo-side {
    display: block;
    right: 16px;
    width: clamp(50px, 12vw, 88px);
  }

  .p-about__logo-side-line {
    right: 18px;
  }

  .p-about__logo-side-zone {
    padding-left: clamp(42px, 14vw, 64px);
  }

  .p-about__logo-side-item {
    gap: 6px;
    font-size: 1rem;
    letter-spacing: 0.1em;
  }

  .p-about__logo-side-dash {
    width: clamp(28px, 1vw, 64px);
  }

  .p-about__logo-symbol {
    min-height: 320px;
  }
}

.p-about__logo-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  margin-bottom: 48px;
}

.p-about__logo-accordion-item {
  display: contents;
}

.p-about__logo-tab[data-logo-tab="symbol"] {
  grid-column: 1;
  grid-row: 1;
}

.p-about__logo-tab[data-logo-tab="logotype"] {
  grid-column: 2;
  grid-row: 1;
}

.p-about__logo-detail-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: none;
  padding: 40px 0;
}

.p-about__logo-detail-panel.is-active {
  display: block;
}

.p-about__logo-tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 0 16px 40px;
  border: none;
  background: none;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  color: #c8c8c8;
  cursor: pointer;
  transition: color 0.3s ease;
}

.p-about__logo-tab-num {
  display: block;
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0;
}

.p-about__logo-tab-label {
  display: block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.p-about__logo-tab-mark {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 2px;
  height: 14px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.3s ease;
}

.p-about__logo-tab.is-active {
  color: #1a1a1a;
}

.p-about__logo-tab.is-active .p-about__logo-tab-mark {
  /* background: linear-gradient(180deg, #de7cfe 0%, #0075ff 100%); */
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-about__logo-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #c8c8c8 0%, #c8c8c8 35%, #c8c8c8 100%);
}

.p-about__logo-tab.is-active::after {
  background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
}

.p-about__logo-detail-text {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 2;
  margin: 0;
  text-align: left;
  color: #1a1a1a;
}

@media screen and (max-width: 768px) {
  .p-about__logo-detail-text {
    font-size: 1.3rem;
    line-height: 1.9;
  }
}

.p-about .p-history__fv-nav {
  max-width: 1000px;
}

.p-about .p-about__logo .figure01 {
  position: absolute;
  bottom: 0;
  right: 7vw;
  z-index: 1;
  pointer-events: none;
  width: 177px;
}

/* --------------------------------------------------------------------------
   ABOUT PAGE — SP 調整
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .p-about > .p-detail__side-text {
    display: block;
    top: 52%;
    left: 4px;
    z-index: 12;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
  }

  .p-about .p-about__logo .figure01 {
    display: none;
  }

  .p-about__logo-side-zone {
    right: 0;
  }

  /* FV */
  .p-about .p-history__fv-nav {
    margin-top: 24px;
    padding: 0 26px;
  }

  .p-about .p-history__fv-nav-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }

  .p-about .p-history__fv-nav-item {
    flex: unset;
    min-width: 0;
  }

  .p-about .p-history__fv-nav-item:nth-child(1),
  .p-about .p-history__fv-nav-item:nth-child(2),
  .p-about .p-history__fv-nav-item:nth-child(3) {
    grid-column: auto;
  }

  .p-about .p-history__fv-nav-item::before,
  .p-about .p-history__fv-nav-item::after {
    top: 10%;
    bottom: 10%;
    background: linear-gradient(180deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  }

  .p-about .p-history__fv-nav-item:nth-child(1)::before {
    display: block;
  }

  .p-about .p-history__fv-nav-item:nth-child(1)::after,
  .p-about .p-history__fv-nav-item:nth-child(2)::after {
    display: none;
  }

  .p-about .p-history__fv-nav-item:nth-child(3)::after {
    display: block;
  }

  .p-about .p-history__fv-nav-link {
    min-height: 66px;
    padding: 4px 4px 6px;
    gap: 2px;
  }

  .p-about .p-history__fv-nav-title {
    font-size: clamp(0.75rem, 3.45vw, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }

  .p-about .p-history__fv-nav-range {
    font-size: clamp(1rem, 5.2vw, 1.375rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
  }

  .p-about .p-history__fv-nav-item:nth-child(1) .p-history__fv-nav-title,
  .p-about .p-history__fv-nav-item:nth-child(2) .p-history__fv-nav-title,
  .p-about .p-history__fv-nav-item:nth-child(3) .p-history__fv-nav-title {
    font-size: 0.9rem;
  }

  .p-about .p-history__fv-nav-item:nth-child(1) .p-history__fv-nav-range,
  .p-about .p-history__fv-nav-item:nth-child(2) .p-history__fv-nav-range,
  .p-about .p-history__fv-nav-item:nth-child(3) .p-history__fv-nav-range {
    font-size: 1.2rem;
  }

  .p-about .p-history__section-head {
    padding: 0 20px;
  }

  /* CONCEPT */
  .p-about__concept-bubble--01 {
    bottom: 2%;
    left: 4px;
    width: clamp(48px, 16vw, 88px);
    opacity: 0.45;
  }

  .p-about__concept-smoke {
    height: clamp(140px, 36vw, 220px);
  }

  .p-about__concept-head .c-section-head__en,
  .p-about__logo-head .c-section-head__en {
    font-size: 3.2rem;
  }

  .p-about__concept-head .c-section-head__jp,
  .p-about__logo-head .c-section-head__jp {
    font-size: 1.2rem;
  }

  /* MESSAGE */
  .p-about .home-message {
    overflow: hidden;
  }

  .p-about .home-message::before,
  .p-about .home-message::after {
    display: block;
    width: 10px;
    height: clamp(100px, 32vw, 100px);
  }

  .p-about .home-message::before {
    right: 0;
    left: auto;
    top: 42%;
  }

  .p-about .home-message::after {
    left: 0;
    right: auto;
    bottom: 18%;
  }

  .p-about .home-message__neural-network {
    opacity: 0.55;
    z-index: 0;
  }

  .p-about .home-message__neural-network:nth-child(1) {
    right: -24.8vw;
    top: 200px;
    width: min(360px, 88vw);
    height: 220px;
  }

  .p-about .home-message__neural-network:nth-child(2) {
    left: -24.8vw;
    top: auto;
    bottom: 60px;
    width: min(360px, 88vw);
    height: 220px;
  }

  .p-about .home-message__head .c-section-head {
    align-items: center;
  }

  .p-about .home-message__body {
    margin-top: 32px;
  }

  .p-about .c-message__list {
    row-gap: 0;
    padding: 0;
  }

  /* 1枚目：左寄せ / 2枚目：右寄せ（トップページ SP と同様） */
  .p-about .c-message__item {
    width: 80%;
    max-width: 80%;
    align-self: flex-start;
    position: relative;
    left: 0;
  }

  .p-about .c-message__thumb {
    position: relative;
  }

  .p-about .c-message__item:nth-child(even) {
    align-self: flex-end;
    left: auto;
    right: -24px;
    margin-top: 0;
  }

  .p-about .c-message__thumb-img-sp {
    display: block;
    width: 100%;
    height: auto;
  }

  /* LOGO */
  .p-about__logo {
    --about-logo-symbol-height: clamp(200px, 72vw, 280px);
    --about-logo-symbol-gap: 16px;
    --about-logo-bg-height: clamp(420px, 110vw, 760px);
    --about-logo-bg-bottom: clamp(180px, 52vw, 260px);
    padding: 64px 0 48px;
  }

  .p-about__logo::before {
    top: 30px;
    width: min(calc(100vw - 32px), 608px);
    height: clamp(580px, 168vw, 1024px);
    background-image: url(/150anniversary/assets/images/about/bg01-sp.png);
    background-size: 100% auto;
    background-position: center top;
  }

  .p-about__logo-fractal--left {
    width: clamp(80px, 28vw, 140px);
    opacity: 0.4;
    top: 8%;
  }

  .p-about__logo-body {
    margin-top: 32px;
    padding: 58px 0 40px;
    position: relative;
    isolation: isolate;
  }

  .p-about__logo-hero {
    gap: 8px;
    margin-bottom: 0;
    padding-right: 4px;
    position: relative;
    z-index: 1;
  }

  .p-about__logo-visual {
    padding: 0;
    margin-top: -30px;
  }

  .p-about__logo-visual-img {
    max-width: min(100%, 184px);
  }

  /* アコーディオン形式 */
  .p-about__logo-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 32px auto 0;
    padding: 0 16px;
    border-bottom: none;
    grid-template-columns: none;
  }

  .p-about__logo-accordion-item {
    display: flex;
    flex-direction: column;
  }

  .p-about__logo-tab[data-logo-tab="symbol"],
  .p-about__logo-tab[data-logo-tab="logotype"] {
    grid-column: auto;
    grid-row: auto;
  }

  .p-about__logo-accordion-item .p-about__logo-detail-panel {
    grid-column: auto;
    grid-row: auto;
    display: none;
    padding: 12px 0 20px;
  }

  .p-about__logo-accordion-item.is-open .p-about__logo-detail-panel {
    display: block;
  }

  .p-about__logo-tab {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 14px 0 16px;
    color: #1a1a1a;
    border-bottom: none;
    gap: 8px;
  }

  .p-about__logo-tab-num {
    display: inline;
    margin-bottom: 0;
    margin-right: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .p-about__logo-tab-label {
    display: inline;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
  }

  .p-about__logo-tab-mark {
    display: block;
    position: relative;
    left: auto;
    bottom: auto;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 auto;
    transform: none;
    background: none;
  }

  .p-about__logo-tab-mark::before,
  .p-about__logo-tab-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    background: #861c3c;
    opacity: 1;
    transform: translate(-50%, -50%);
    border-radius: 0;
  }

  .p-about__logo-tab-mark::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .p-about__logo-tab.is-active .p-about__logo-tab-mark {
    background: none;
  }

  .p-about__logo-tab.is-active .p-about__logo-tab-mark::before {
    transform: translate(-50%, -50%);
  }

  .p-about__logo-tab.is-active .p-about__logo-tab-mark::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .p-about__logo-tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #861c3c 0%, #861c3c 35%, #9a86fa 100%);
  }

  .p-about__logo-detail-text {
    font-size: 1.1rem;
    line-height: 1.85;
  }
}

.p-about .p-about__concept .c-section-head__en,
.p-about .p-about__logo .c-section-head__en,
.p-about .home-message .c-section-head__en {
  color: #1a1a1a;
  font-size: 4rem;
}

.p-about .p-about__concept .c-section-head__jp,
.p-about .p-about__logo .c-section-head__jp,
.p-about .home-message .c-section-head__jp {
  color: #1a1a1a;
  font-family: "Noto Serif Japanese", serif;
  font-size: 2rem;
  font-weight: 700;
}

.p-about .home-message {
  padding-top: 100px;
}

@media screen and (max-width: 768px) {
  .p-about .home-message {
    padding-top: 72px;
  }
}

.p-about .home-message::after {
  bottom: -100px;
}

@media screen and (max-width: 768px) {
  .p-about .p-about__concept .c-section-head__en,
  .p-about .p-about__logo .c-section-head__en,
  .p-about .home-message .c-section-head__en {
    font-size: 2.4rem;
  }

  .p-about .p-about__concept .c-section-head__jp,
  .p-about .p-about__logo .c-section-head__jp,
  .p-about .home-message .c-section-head__jp {
    font-size: 1.2rem;
  }

  .p-about .home-message::after {
    bottom: 80px;
  }

  .p-about__logo-side-dash {
    height: 2px;
    background-image: repeating-linear-gradient(
      90deg,
      #861c3c 0 2px,
      transparent 2px 4px
    );
  }

  .p-about__logo-side-dash--top::after,
  .p-about__logo-side-dash--mid::after,
  .p-about__logo-side-dash--bottom::after {
    right: -7px;
    width: 15px;
  }
}

/* --------------------------------------------------------------------------
   ABOUT：右サイド セクション連動インジケーター
-------------------------------------------------------------------------- */
.p-about__indicator {
  position: fixed;
  top: 50%;
  right: 28px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.32, 0.94, 0.6, 1),
    visibility 0s linear 0.4s;
}

.p-about__indicator.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.32, 0.94, 0.6, 1),
    visibility 0s linear 0s;
}

html.is-footer-reached .p-about__indicator {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}

.p-about__indicator-label {
  display: block;
  margin-bottom: 16px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  color: #000;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: opacity 0.25s ease;
}

.p-about__indicator-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-about__indicator-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-about__indicator-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.p-about__indicator-bar {
  display: block;
  width: 10px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b7cff 0%, #e05a8c 100%);
  transition:
    height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1),
    width 0.3s cubic-bezier(0.32, 0.94, 0.6, 1),
    opacity 0.3s ease;
  opacity: 0.85;
}

.p-about__indicator-item.is-active .p-about__indicator-bar {
  width: 10px;
  height: 2px;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .p-about__indicator {
    right: 10px;
  }

  .p-about__indicator-label {
    margin-bottom: 3px;
    font-size: 1rem;
  }

  .p-about__indicator-list {
    gap: 0px;
  }

  .p-about__indicator-bar {
    width: 6px;
    height: 1px;
  }

  .p-about__indicator-item.is-active .p-about__indicator-bar {
    width: 6px;
    height: 2px;
  }
  .p-about__concept-text {
    max-width: 66.145vw;
  }
}

/* --------------------------------------------------------------------------
   INTERVIEW DETAIL：右サイド QUESTION 連動インジケーター
-------------------------------------------------------------------------- */
.p-interview-detail__indicator {
  position: fixed;
  top: 50%;
  right: 28px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.32, 0.94, 0.6, 1),
    visibility 0s linear 0.4s;
}

.p-interview-detail__indicator.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.32, 0.94, 0.6, 1),
    visibility 0s linear 0s;
}

html.is-footer-reached .p-interview-detail__indicator {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}

.p-interview-detail__indicator-label {
  display: block;
  margin-bottom: 16px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  color: #000;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.p-interview-detail__indicator-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-interview-detail__indicator-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-interview-detail__indicator-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.p-interview-detail__indicator-bar {
  display: block;
  width: 10px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b7cff 0%, #e05a8c 100%);
  transition:
    height 0.3s cubic-bezier(0.32, 0.94, 0.6, 1),
    width 0.3s cubic-bezier(0.32, 0.94, 0.6, 1),
    opacity 0.3s ease;
  opacity: 0.85;
}

.p-interview-detail__indicator-item.is-active
  .p-interview-detail__indicator-bar {
  width: 10px;
  height: 2px;
  opacity: 1;
}

.p-interview-detail__indicator-num {
  display: block;
  margin-top: 14px;
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  color: #000;
  transition: opacity 0.25s ease;
}

@media screen and (max-width: 768px) {
  .p-interview-detail__indicator {
    right: 10px;
  }

  .p-interview-detail__indicator-label {
    margin-bottom: 3px;
    font-size: 1rem;
  }

  .p-interview-detail__indicator-list {
    gap: 0px;
  }

  .p-interview-detail__indicator-bar {
    width: 6px;
    height: 1px;
  }

  .p-interview-detail__indicator-item.is-active
    .p-interview-detail__indicator-bar {
    width: 6px;
    height: 2px;
  }

  .p-interview-detail__indicator-num {
    margin-top: 3px;
    font-size: 1rem;
  }
}

/* ==========================================================================
   VISION PAGE  /vision.html
========================================================================== */

.p-vision {
  position: relative;
  z-index: 40;
  padding: 110px 0 100px;
}

/* ─── FV：ブランド + ビジョン名を 1 画面に収める ─────────────────────────── */
.p-vision__fv {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100svh;
  margin-top: -110px;
  padding: 0;
  background: transparent;
}

/* ビジョン名エリア（FV 下部） */
.p-vision__head-section {
  position: relative;
  z-index: 40;
  flex: 0 0 auto;
  padding: clamp(8px, 1.5vh, 20px) 24px clamp(24px, 4vh, 48px);
  text-align: center;
  background: transparent;
}

.p-vision__fv-title {
  max-width: 960px;
  margin: 0 auto;
}

.p-vision__fv-subtitle {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vh, 4rem);
  color: #1a1a1a;
  letter-spacing: 0.08em;
  margin: 0 0 clamp(8px, 1.2vh, 16px);
}

.p-vision__fv-name {
  font-family: din-2014, sans-serif;
  font-weight: 600;
  font-size: clamp(3.6rem, 7vh, 6.5rem);
  line-height: 1.35;
  letter-spacing: 0.1em;
  color: #1a1a1a;
  margin: 0;
}

/* ─── Light Section ──────────────────────────────────────────────────────── */
.p-vision__light {
  position: relative;
  padding: 80px 24px 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(189, 222, 248, 0.25) 15%,
    rgba(189, 222, 248, 0.4) 45%,
    rgba(255, 255, 255, 0.85) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.p-vision__light-inner {
  position: relative;
  z-index: 2;
  max-width: 1030px;
  margin: 0 auto;
  --vision-stripe-inset: 115px;
  padding: 0 var(--vision-stripe-inset) 110px;
  background: #ffffff;
  background: rgba(255, 255, 255, 0.7);
  clip-path: polygon(
    40px 0,
    calc(100% - 40px) 0,
    100% 40px,
    100% 100%,
    0 100%,
    0 40px
  );
  box-shadow: 0 4px 32px rgba(100, 100, 200, 0.12);
}

/* タイトル画像 */
.p-vision__title-img {
  display: block;
  width: 602px;
  height: auto;
  margin: 28px auto 40px;
}

/* グラデーションストライプ */
.p-vision__bg-stripe {
  display: block;
  width: calc(100% + var(--vision-stripe-inset, 40px) * 2);
  max-width: none;
  height: auto;
  margin-left: calc(var(--vision-stripe-inset, 40px) * -1);
  margin-right: calc(var(--vision-stripe-inset, 40px) * -1);
}

.p-vision__bg-stripe--top {
  margin-top: 0;
  margin-bottom: 48px;
}

/* テキストブロック */
.p-vision__block {
  margin-bottom: 60px;
}

.p-vision__block:last-child {
  margin-bottom: 0;
}

.p-vision__block-head {
  position: relative;
  padding-left: 20px;
  margin-bottom: 24px;
}

.p-vision__block-head::before {
  content: "";
  position: absolute;
  top: 0.1em;
  bottom: 0.1em;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, #de7cfe 0%, #0075ff 100%);
}

.p-vision__block-head--blue::before {
  background: #0075ff;
}

.p-vision__block-heading {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
}

.p-vision__block-text {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #1a1a1a;
}

.p-vision__block-text p {
  margin: 0 0 1.5em;
}

.p-vision__block-text p:last-child {
  margin-bottom: 0;
}

/* 球体装飾 */
.p-vision__figure {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.p-vision__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.p-vision__figure--01 {
  top: 60px;
  left: clamp(8px, 4vw, 80px);
  width: clamp(80px, 10vw, 160px);
}

.p-vision__figure--02 {
  bottom: 80px;
  left: clamp(8px, 4vw, 80px);
  width: clamp(60px, 8vw, 120px);
}

/* ─── Section 2 (Card) ───────────────────────────────────────────────────── */
.p-vision__dark {
  position: relative;
  padding: 20px 24px 100px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(189, 222, 248, 0.25) 15%,
    rgba(189, 222, 248, 0.4) 45%,
    rgba(255, 255, 255, 0.85) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.p-vision__figure--03 {
  bottom: 120px;
  right: clamp(8px, 6vw, 100px);
  width: clamp(80px, 10vw, 160px);
}

.p-vision__dark-inner {
  position: relative;
  z-index: 2;
  max-width: 1030px;
  margin: -40px auto 0;
  --vision-stripe-inset: 115px;
  padding: 0 var(--vision-stripe-inset) 64px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 44px rgba(0, 39, 76, 0.06);
}

.p-vision__dark-title-img {
  display: block;
  width: 595px;
  height: auto;
  margin: 28px auto 46px;
}

/* 理科大の姿 */
.p-vision__figure-box {
  margin-bottom: 48px;
  padding: 30px 46px;
  max-width: 600px;
  background: linear-gradient(
    90deg,
    rgba(222, 124, 254, 0.18) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(0, 117, 255, 0.1) 100%
  );
}

.p-vision__figure-box-heading {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  color: #861c3c;
  margin: 0 0 14px;
}

.p-vision__figure-box-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-vision__figure-box-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.p-vision__figure-box-icon {
  flex-shrink: 0;
  width: 24px;
}

.p-vision__figure-box-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.p-vision__figure-box-text {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  color: #1a1a1a;
  margin: 0;
}

.p-vision__figure-box-close {
  margin: 0;
}

/* SP */
@media screen and (max-width: 768px) {
  .p-vision {
    padding-top: 70px;
    padding-bottom: 0;
  }

  /* タイトル */
  .p-vision__head-section {
    padding: 4px 20px 20px;
  }

  .p-vision__fv-subtitle {
    font-size: 2.0rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
  }

  .p-vision__fv-name {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.35;
    letter-spacing: 0;
  }

  /* ライトセクション */
  .p-vision__light {
    padding: 0 16px 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(189, 222, 248, 0.12) 40%,
      rgba(189, 222, 248, 0.2) 70%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .p-vision__light-inner {
    --vision-stripe-inset: 24px;
    max-width: 86.9791vw;
    padding: 0 24px 100px;
    background: rgba(255, 255, 255, 1);
    clip-path: polygon(
      20px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      0 100%,
      0 20px
    );
    box-shadow: 0 10px 44px rgba(0, 39, 76, 0.06);
  }

  .p-vision__bg-stripe {
    width: calc(100% + var(--vision-stripe-inset) * 2);
    margin-left: calc(var(--vision-stripe-inset) * -1);
    margin-right: calc(var(--vision-stripe-inset) * -1);
  }

  .p-vision__bg-stripe--top {
    margin-top: 0;
    margin-bottom: 0;
  }

  .p-vision__title-img {
    width: 300px;
    max-width: 100%;
    margin: 24px auto 32px;
  }

  .p-vision__block {
    margin-bottom: 36px;
  }

  .p-vision__block-head {
    padding-left: 16px;
    margin-bottom: 20px;
  }

  .p-vision__block-head::before {
    width: 4px;
  }

  .p-vision__block-heading {
    font-size: 1.6rem;
    line-height: 1.45;
  }

  .p-vision__block-text {
    max-width: 73.95833vw;
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: justify;
  }

  .p-vision__figure--01,
  .p-vision__figure--02,
  .p-vision__figure--03 {
    display: none;
  }

  /* ダークセクション */
  .p-vision__dark {
    z-index: 3;
    padding: 0 16px 12px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(189, 222, 248, 0.12) 40%,
      rgba(189, 222, 248, 0.2) 70%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .p-vision__dark-inner {
    --vision-stripe-inset: 24px;
    max-width: 86.9791vw;
    margin-top: -40px;
    padding: 0 24px 48px;
    background: rgba(255, 255, 255, 1);
    clip-path: polygon(
      20px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      0 100%,
      0 20px
    );
    box-shadow: 0 10px 44px rgba(0, 39, 76, 0.06);
  }

  .p-vision__dark-title-img {
    width: 278px;
    max-width: 100%;
    margin: 24px auto 32px;
  }

  /* 理科大の姿 */
  .p-vision__figure-box {
    margin-bottom: 28px;
    padding: 24px 20px;
    max-width: none;
  }

  .p-vision__figure-box-heading {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .p-vision__figure-box-list {
    gap: 10px;
  }

  .p-vision__figure-box-item {
    gap: 10px;
  }

  .p-vision__figure-box-icon {
    width: 16px;
  }

  .p-vision__figure-box-text {
    font-size: 1.4rem;
    line-height: 1.65;
  }

  .p-vision__figure-box-close {
    text-align: justify;
  }
}

/* sample/index.html：下層 WebGL 確認用 */
.p-sample {
  position: relative;
  z-index: 40;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}

.p-sample__inner {
  width: 100%;
}

.p-sample__title {
  margin: 0 0 24px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.p-sample__text {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 2;
  letter-spacing: 0.08em;
}

.l-header__logo-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  pointer-events: auto;
}

.home-about__btn-wrapper {
  display: flex;
}

@media screen and (max-width: 768px) {
  .home-about__btn-wrapper {
    justify-content: flex-end;
  }
}

a.c-message__thumb {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* 写真上のオーバーレイはクリックを透過し、VIEW MOREボタンのみ操作可能にする */
.c-message__content {
  pointer-events: none;
  z-index: 2;
}

.c-message__btn {
  pointer-events: auto;
}

.home-donation__lead {
  display: inline-block;
  margin-bottom: 0.4em;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   下層ページ：フッター左右フラクタル（footer-fractal01 / 02）
-------------------------------------------------------------------------- */
.page-sub .l-footer__fractal--left:has(img[src*="common/footer-fractal"]) {
  top: -18%;
  left: 0;
  width: clamp(100px, 11vw, 168px);
  overflow: visible;
}

.page-sub .l-footer__fractal--right:has(img[src*="common/footer-fractal"]) {
  top: auto;
  bottom: 6%;
  right: 0;
  width: clamp(84px, 9vw, 140px);
  overflow: visible;
}

.page-sub .l-footer__fractal--left:has(img[src*="common/footer-fractal"]) > img,
.page-sub
  .l-footer__fractal--right--pc:has(img[src*="common/footer-fractal"])
  > img,
.page-sub
  .l-footer__fractal--right--sp:has(img[src*="common/footer-fractal"])
  > img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.page-sub
  .l-footer__fractal--left:has(img[src*="common/footer-fractal"])
  > img {
  aspect-ratio: 253 / 1728;
}

.page-sub
  .l-footer__fractal--right--pc:has(img[src*="common/footer-fractal"])
  > img,
.page-sub
  .l-footer__fractal--right--sp:has(img[src*="common/footer-fractal"])
  > img {
  aspect-ratio: 197 / 868;
}

@media screen and (max-width: 768px) {
  .page-sub .l-footer__fractal--left:has(img[src*="common/footer-fractal"]) {
    top: -10%;
    width: 52px;
  }

  .page-sub .l-footer__fractal--right:has(img[src*="common/footer-fractal"]) {
    top: auto;
    bottom: 3%;
    width: 44px;
  }
}