/* ========== ========== ========== ========== ========== ========== ==========
   update Default Style
   ========== ========== ========== ========== ========== ========== ========== */

/* -- Text / Background Color --
   ========== ========== ========== */
#area-Contents {
  color: #fff;
  background-color: #4A579E;
}

.tl-hero-section .l-PageTitle--v2__h1,
.tl-year-section .l-HeadingTitle--v2:not(.is-link) .l-HeadingTitle--v2__h2,
.tl-year-section .l-HeadingTitle--v2:not(.is-link) .l-HeadingTitle--v2__h3 {
  color: #fff;
}


/* ========== ========== ========== ========== ========== ========== ==========
   tl-hero-section
   ========== ========== ========== ========== ========== ========== ========== */
/* -- Section --
   ========== ========== */
/* Largeのみ余白を調整（同等の余白を .tl-scroll-section 側に付与） */
@media only screen and (min-width: 1025px) {
  .tl-hero-section .l-Section__inner {
    padding-bottom: 0;
  }
}

/* -- heading:lv1 --
   ========== ========== */
@media only screen and (min-width: 1025px) {
  .tl-hero-section .l-PageTitle--v2 {
    border-bottom: none;
  }

  .tl-hero-section .l-PageTitle--v2__h1 {
    font-size: 48px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-hero-section .l-PageTitle--v2 {
    border-bottom: none;
  }

  .tl-hero-section .l-PageTitle--v2__h1 {
    font-size: 48px;
  }
}

@media only screen and (max-width: 640px) {
  .tl-hero-section .l-PageTitle--v2__h1 {
    font-size: 30px;
  }
}


/* ========== ========== ========== ========== ========== ========== ==========
   tl-scroll-section
   ========== ========== ========== ========== ========== ========== ========== */

/* -- TextLink --
   ========== ========== */
/* Container */
.tl-scroll-section .tl-scroll__link-group {
  margin: 0 auto;
  max-width: 1245px;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (min-width: 1025px) {
  .tl-scroll-section .tl-scroll__link-group {
    padding: 40px 40px 0;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-scroll-section .tl-scroll__link-group {
    padding: 0 40px;
  }
}

@media only screen and (max-width: 640px) {
  .tl-scroll-section .tl-scroll__link-group {
    padding: 0 24px;
  }
}

/* Element */
.tl-scroll-section .l-TextLinkP {
  margin-bottom: 0;
  padding: 25px 0;
}

@media only screen and (min-width: 1025px) {
  .tl-scroll-section .l-TextLinkP {
    text-align: right;
  }
}

@media only screen and (max-width: 640px) {
  .tl-scroll-section .l-TextLinkP {
    padding: 12px 0;
  }
}

.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link,
.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link:link,
.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link:visited,
.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link>.cmn-icon {
  color: #fff;
}

.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link:hover .cmn-richtext,
.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link:focus .cmn-richtext,
.tl-scroll-section .is-colorset--1 .l-TextLinkUnit__link:active .cmn-richtext {
  text-decoration: underline;
}


/* ========== ========== ==========
   横スクロール（年表）
   ========== ========== ========== */

.tl-scroll-section {
  position: relative;
  overflow: hidden;
  z-index: 2;
  --track-max-height: 1300px;
}

/* -- Author 画面用: 画像を縮小して全体表示 -- */
.tl-scroll-section__track img {
  display: block;
  width: 100%;
  height: auto;
}

/* -- Preview / 公開: --active 付与時 --
   ========== ========== ========== */
.tl-scroll-section>.l-Section__inner {
  max-width: none;
  padding: 0;
}

.tl-scroll-section--active>.l-Section__inner {
  height: 100vh;
  height: 100dvh;
  /* max-height は JS の updateSizing() で動的に設定 */
}

/* __track までの AEM 中間 div に高さを伝播 */
.tl-scroll-section--active>.l-Section__inner .l-Column,
.tl-scroll-section--active>.l-Section__inner .l-Column__inner,
.tl-scroll-section--active>.l-Section__inner .l-Column__cols,
.tl-scroll-section--active>.l-Section__inner .g-ColumnUnit {
  height: 100% !important;
}

/* g-ColumnUnit を flex 縦積みにしてページ内リンクと年表を上下に配置 */
.tl-scroll-section--active .g-ColumnUnit {
  display: flex;
  flex-direction: column;
}

/* -- SP アコーディオンパネル: flex レイアウト -- */
.tl-scroll-section--active div:has(.tl-sp-accordion__panel) {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

@media only screen and (max-width: 640px) {
  .tl-scroll-section--active div:has(.tl-sp-accordion__panel) {
    flex-direction: column;
  }
}

.tl-scroll-section--active .tl-sp-accordion__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media only screen and (min-width: 1025px) {
  .tl-scroll-section--active .tl-sp-accordion__panel {
    padding-bottom: 120px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-scroll-section--active .tl-sp-accordion__panel {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 640px) {
  .tl-scroll-section--active .tl-sp-accordion__panel {
    padding-bottom: 12px;
  }
}

/* -- テキスト代替（g-ColumnUnit 内） -- */
/* .tl-scroll-section--active .tl-scroll-alternate-section {
  flex: 0 0 auto;
  overflow-y: auto;
  max-height: 20vh;
} */

/* -- track -- */
.tl-scroll-section--active .tl-scroll-section__track {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  max-height: var(--track-max-height);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  height: 100%;
}

.tl-scroll-section--active .tl-scroll-section__track>* {
  height: 100%;
}

.tl-scroll-section--active .tl-scroll-section__track img {
  width: auto;
  height: min(100%, var(--track-max-height));
  flex-shrink: 0;
}

/* -- 非 active 時: 横スクロール領域化 -- */
.tl-scroll-section:not(.tl-scroll-section--active) .tl-scroll-section__track {
  overflow-x: auto;
}

.tl-scroll-section:not(.tl-scroll-section--active) .tl-scroll-section__track img {
  width: auto;
  max-height: calc(100vh - 122px);
}


/* ========== ========== ==========
   年表用アコーディオン（SP時のみ）
   ========== ========== ========== */

/* -- トリガーボタン --
   ========== ========== ========== */
.tl-sp-accordion__trigger {
  display: none;
}

@media only screen and (max-width: 640px) {
  .tl-sp-accordion__triggerwrap {
    padding: 2px 24px;
  }

  .tl-sp-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-family: "FP-ヒラギノUD角ゴ StdN W6", FP-HiraginoUDSansStdN-W6, sans-serif;
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
    position: relative;
    padding-left: 2.8rem;
  }

  /* 円形の輪郭 */
  .tl-sp-accordion__trigger::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
  }

  /* chevron */
  .tl-sp-accordion__trigger::after {
    content: "";
    position: absolute;
    left: calc(0.875rem - 0.25rem);
    top: calc(47% - 0.075rem);
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .tl-sp-accordion__trigger[aria-expanded="true"]::after {
    top: calc(53% + 0.075rem);
    transform: translateY(-50%) rotate(-135deg);
  }

  /* -- パネル --
   ========== ========== ========== */
  .tl-sp-accordion__panel {
    margin-top: 1rem;
  }

  .tl-sp-accordion__panel[hidden] {
    display: none;
  }

  /* 横スクロール固定状態: トリガーを縮めて track が viewport 全体を使う */
  .tl-scroll-section--scrolling .tl-sp-accordion__triggerwrap {
    flex: 0 0 0;
    margin: 0;
  }

  /* SP: 巻物画像を横スクロール可能な静的表示にする */
  .tl-scroll-section__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tl-scroll-section__track img {
    width: auto;
    max-height: 50vh;
  }

  /* SP: テキスト代替の余白調整 */
  .tl-scroll-alternate-section:not([hidden]) {
    margin-top: 0;
    padding-top: 1rem;
  }

  .tl-scroll-alternate-section .l-Section__inner {
    padding-top: 0;
  }

  .tl-scroll-section--active .tl-scroll-section__track {
    height: 100%;
  }

  .tl-scroll-section--active .tl-scroll-section__track img {
    max-height: none !important;
  }
}


/* ========== ========== ==========
   横スクロール テキスト代替（アコーディオン）
   ========== ========== ========== */

/* -- Container -- */
/* .tl-scroll-section .tl-scroll-alternate-section {
  margin: 0 auto;
  max-width: 1245px;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (min-width: 1025px) {
  .tl-scroll-section .tl-scroll-alternate-section {
    padding: 20px 40px 0;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-scroll-section .tl-scroll-alternate-section {
    padding: 20px 40px 0;
  }
}

@media only screen and (max-width: 640px) {
  .tl-scroll-section .tl-scroll-alternate-section {
    padding: 24px;
  }
} */


/* ========== ========== ========== ========== ========== ========== ==========
   tl-scroll-alternate-section
   ========== ========== ========== ========== ========== ========== ========== */
.tl-scroll-alternate-section .l-AccordionUnit__titleBlock {
  padding: 10px 10px 10px 1.875em;
  background-color: transparent;
}

.tl-scroll-alternate-section .l-HeadingTitle.l-HeadingTitle--h2 {
  margin-bottom: 0;
  border-bottom: none;
}

.tl-scroll-alternate-section .l-AccordionUnit__titleBlock .l-HeadingTitle:not(.is-link) .l-HeadingTitle__h2 {
  font-size: 16px;
  color: #fff;
}

/* -- アコーディオン開閉アイコン -- */
.tl-scroll-alternate-section .l-AccordionUnit__titleBlock__icon {
  right: auto;
  left: 0;
  top: 0;
  color: #fff;
  margin-top: .2em;
}

/* 円形の輪郭 */
.tl-scroll-alternate-section .l-AccordionUnit__titleBlock__icon::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

/* chevron */
.tl-scroll-alternate-section .l-AccordionUnit__titleBlock__icon::after {
  content: "";
  position: absolute;
  left: calc(0.875rem - 0.25rem);
  top: calc(50% - 0.075rem);
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(50%) rotate(45deg);
  transition: transform 0.2s ease;
}

.tl-scroll-alternate-section .l-AccordionUnit__titleBlock__icon.cmn-icon--up::after {
  top: 0.3rem;
  transform: translateY(50%) rotate(-135deg);
}

.tl-scroll-alternate-section .l-AccordionUnit__contentBlock {
  color: #fff;
  background-color: #4A579E;
}

.tl-scroll-alternate-section .l-HeadingTitle--v2:not(.is-link) .l-HeadingTitle--v2__h3 {
  color: #fff;
  font-size: 20px;
}

.tl-scroll-alternate-section .l-HeadingTitle--v2--h4 {
  margin-bottom: 0;
}

.tl-scroll-alternate-section .l-HeadingTitle--v2:not(.is-link) .l-HeadingTitle--v2__h4 {
  color: #fff;
  font-size: 18px;
}


/* ========== ========== ========== ========== ========== ========== ==========
   tl-year-section
   ========== ========== ========== ========== ========== ========== ========== */

/* ==========
   Timeline wrapper
   ========== */
.tl-timeline-wrapper {
  position: relative;
  overflow: hidden;
  background: #D9F0E8;
}

/* ==========
   Year Section
   ========== */
.tl-year-section {
  position: relative;
  padding: 3rem 0;
  overflow: visible;
}

.tl-year-section::before {
  content: "";
  position: absolute;
  top: -8rem;
  bottom: -8rem;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.tl-year-section::after {
  content: "";
  position: absolute;
  top: -8rem;
  left: 0;
  right: 0;
  height: 20rem;
  z-index: 1;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tl-year-section .l-Section__inner {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* -- Heading Position : right -- */
.tl-year-section--heading-right::before {
  clip-path: polygon(0 0,
      100% 16rem,
      100% calc(100% - 16rem),
      0 100%);
}

.tl-year-section--heading-right::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='-12.49' y2='15.62'%3E%3Cstop offset='0' stop-color='black' stop-opacity='0.15'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 100,80 100,100 0,100' fill='url(%23s)'/%3E%3C/svg%3E");
}

/* -- Heading Position : left -- */
.tl-year-section--heading-left::before {
  clip-path: polygon(0 16rem,
      100% 0,
      100% 100%,
      0 calc(100% - 16rem));
}

.tl-year-section--heading-left::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' gradientUnits='userSpaceOnUse' x1='0' y1='80' x2='12.49' y2='95.62'%3E%3Cstop offset='0' stop-color='black' stop-opacity='0.15'/%3E%3Cstop offset='1' stop-color='black' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,80 100,0 100,100 0,100' fill='url(%23s)'/%3E%3C/svg%3E");
}

/* -- Background Color --
   ========== */
.tl-year-section--2020 {
  background: #4A579E;
}

.tl-year-section--2020::before {
  background: #3E4E98;
}

.tl-year-section--2021::before {
  background: #334492;
}

.tl-year-section--2022::before {
  background: #2A3E8D;
}

.tl-year-section--2023::before {
  background: #1E3885;
}

.tl-year-section--2024::before {
  background: #143281;
}

.tl-year-section--2025::before {
  background: #002878;
}

.tl-year-section--2026::before {
  background: #002878;
}

.tl-year-section--2026 {
  background: #002878;
}


/* -- Year Section : body and contents --
   ========== ========== */
.tl-year-section__grid {
  min-height: 17rem;
}

.tl-year-body {
  min-width: 0;
}

/* -- Desktop & Tablet -- */
@media only screen and (min-width: 641px) {

  .tl-year-section__grid {
    display: grid;
    column-gap: 2rem;
    align-items: center;
  }

  .tl-year-section--heading-left .tl-year-section__grid {
    grid-template-columns: 4fr 6fr;
  }

  .tl-year-section--heading-right .tl-year-section__grid {
    grid-template-columns: 6fr 4fr;
  }

  .tl-year-section--heading-left .l-HeadingTitle--v2--h2.tl-year-heading {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    text-align: left;
    margin-top: calc(5.5rem - 0vw);
    transform: rotate(atan2(-16rem, 100vw));
    transform-origin: left top;
  }

  .tl-year-section--heading-left .tl-year-body {
    grid-column: 2;
  }

  .tl-year-section--heading-right .l-HeadingTitle--v2--h2.tl-year-heading {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    text-align: right;
    margin-bottom: calc(5rem - 0vw);
    transform: rotate(atan2(-16rem, 100vw));
    transform-origin: right bottom;
  }

  .tl-year-section--heading-right .tl-year-body {
    grid-column: 1;
    grid-row: 1 / -1;
  }
}

/* -- Heading font size -- */
@media only screen and (min-width: 1025px) {
  .tl-year-heading .l-HeadingTitle--v2__h2 {
    font-size: 128px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-year-heading .l-HeadingTitle--v2__h2 {
    font-size: 96px;
  }
}

/* -- Mobile -- */
@media only screen and (max-width: 640px) {
  .tl-year-section--heading-right::before {
    clip-path: polygon(0 0, 100% 8rem, 100% calc(100% - 8rem), 0 100%);
  }

  .tl-year-section--heading-left::before {
    clip-path: polygon(0 8rem, 100% 0, 100% 100%, 0 calc(100% - 8rem));
  }

  .tl-year-section::after {
    height: 10rem;
  }

  .tl-year-heading .l-HeadingTitle--v2__h2 {
    font-size: 64px;
    margin-bottom: 0.5rem;
  }

  .tl-year-section {
    padding: 5rem 0;
  }

  .tl-year-section::before {
    top: -4rem;
    bottom: -4rem;
  }

  .tl-year-section::after {
    top: -4rem;
  }

  .tl-year-section--heading-left .l-HeadingTitle--v2--h2.tl-year-heading,
  .tl-year-section--heading-right .l-HeadingTitle--v2--h2.tl-year-heading {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

/* -- heading:lv2 --
   ========== ========== */
.tl-year-section .tl-year-heading .l-HeadingTitle--v2__h2 {
  font-weight: 800;
  font-style: italic;
  line-height: 0.95;
  color: #ccc;
  white-space: nowrap;
}

/* -- heading:lv3 --
   ========== ========== */
.tl-year-section .tl-year-heading.l-HeadingTitle--v2--h3 {
  margin-top: 2rem;
}

.tl-year-section .tl-year-heading .l-HeadingTitle--v2__h3 {
  color: #ccc;
}

@media only screen and (min-width: 1025px) {
  .tl-year-section .l-HeadingTitle--v2__h3 {
    font-size: 20px;
  }
}

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tl-year-section .l-HeadingTitle--v2__h3 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 640px) {
  .tl-year-section .l-HeadingTitle--v2__h3 {
    font-size: 18px;
  }
}

/* -- list --
   ========== ========== */
.tl-year-section .tl-year-body .tl-listitem-highlight {
  list-style-type: none;
}

@media only screen and (min-width: 641px) {
  .tl-year-section .tl-year-body .tl-listitem-highlight {
    margin-left: -20px;
  }
}

@media only screen and (max-width: 640px) {
  .tl-year-section .tl-year-body .tl-listitem-highlight {
    margin-left: -40px;
  }
}




/* -- button --
   ========== ========== */
.tl-year-section .l-ButtonUnit__link {
  border-radius: 9999px;
  border-style: none;
}