:root {
    --base-red: #9E1C1C;
    --base-black: #000000;
    --base-gray: #333333;
    --bg-light: #F6F6F6;
    --pc-max-w: 1040px;
    --sp-max-w: 480px;

    
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    --modal-overlay: rgba(0, 0, 0, 0.4);
}

main{
  color : var(--base-gray);
}
@media (max-width: 768px){
  .sp_inline{
    width: auto;
    padding-inline: 40px;
  }
}
.sp_Only{
  display: none;
}
@media (max-width: 768px){
  .pc_Only{
    display: none!important;
  }
  .sp_Only{
    display: block;
  }
}
/* 共通 tit_block -----------------*/
  .tit_block{
      text-align: center;
      margin-bottom: 100px;
  }
  .tit_block .tit_h2{
      color: var(--base-red);
      font-size: 4.2rem;
      line-height: 1;
      font-weight: 500;
      margin-bottom: 18px;
      font-family: "Noto Sans JP", sans-serif;
  }
  .tit_block .tit_p{
      font-size: 1.6rem;
      color: var(--base-gray);
      font-weight: 100;
  }
  @media (max-width: 768px){
    .tit_block .tit_h2{
      font-size: 3.6rem!important;
      letter-spacing: 0.45px!important;
      margin-bottom: 14px!important;
    }
  }
  /* ===================== NAVIGATION BUTTONS ===================== */

  .firsttxt_inline{
    background-color: var(--base-red);
  }
  .firsttxt_wrap{
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    padding-block: 301px;
    line-height: 42px;
  }
  .firsttxt_wrap .txt_block{
    display: flex;
    flex-direction: column;
    gap: 150px;
    letter-spacing: 1.25px;
  }
  @media (max-width: 768px){
    .firsttxt_wrap{
      font-size: 16px;
      padding-block: 150px;
    }
    .firsttxt_wrap .txt_block{
      gap: 75px;
    }
  }

  
  /* ===================== NAVIGATION BUTTONS ===================== */

  .nav-btns_inline {
    padding-block: 150px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--base-red);
  }

  .nav-btn_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    padding: 29px 40px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 330px;
    color: var(--dark);
    transition: all 0.3s;
    background: white;
    cursor: pointer;
    transition: background-color 0.3s linear;
  }

  a.nav-btn_wrap:hover {
    opacity: 1;
  }

  .nav-btn-en {
    font-size: 3.0rem;
    font-weight: 400;
    color: var(--base-red);
    line-height: 1;
    letter-spacing: 0.2px;
  }
  .nav-btn-ja {
    font-size: 1.4rem;
  }
  .nav-btn-arrow {
    position: relative;
    width: 24px;
    margin-top: 12px;
  }
  .nav-btn-arrow::before,.nav-btn-arrow::after{
    position: absolute;
    content: "";
    width: 15px;
    background-color: #33333380;
    height: 1px;
  }
  .nav-btn-arrow::before{
    transform: rotate(45deg);
    right: 9.5px;
  }
  .nav-btn-arrow::after{
    transform: rotate(-45deg);
    left: 9.5px;
  }
    /* ==========================================================================
      NAVIGATION BUTTONS　スマートフォン対応 (幅 768px 以下)
      ========================================================================== */
    @media (min-width: 769px){
    a.nav-btn_wrap:hover {
    background: var(--base-gray);
    }
    .nav-btn_wrap:hover .nav-btn-arrow::before, .nav-btn_wrap:hover .nav-btn-arrow::after{
    background-color: #ffffff;
    }
    }
    @media (max-width: 768px){
    .nav-btns_inline{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-block: 100px 150px;
    }

    .nav-btn_wrap{
    height: 70px;
    padding: 10px;
    position: relative;
    width: 100%;
    gap: 4px;
    padding-top: 13px;
    }

    .nav-btn-en{
    font-size: 2.4rem;
    }
    .nav-btn-ja{
    font-size: 1.3rem;
    }
    .nav-btn-arrow{
    position: absolute;
    content: "";
    bottom: 50%;
    right: 30px;
    left: calc(100% - 50px);
    transform: translateY(-50%);
    }

  }
  
  /* ===================== MESSAGE ===================== */
  
      .message_inline{
        padding-block: 200px;
      }
      .message_wrap{
        color: #000000;
      }

      .message_wrap .subject_txt{
        text-align: center;
        font-size: 2.8rem;
        line-height: 46px;

      }
      
      .message_wrap .txt_block{
        margin: auto;
        margin-top: 80px;
        font-size: 1.6rem;
        line-height: 36px;
        display: flex;
        flex-direction: column;
        gap: 3rem;
      }
      
      .message_wrap + .txt_block > p{
        margin-top: 36px;
      }

      .repres_block{
        margin-top: 100px;
        text-align: center;
      }
      .repres_block .p-home_block{
        line-height: 28px;
      }
      .repres_block .p-name_block{
        margin-top: 31px;
      }
      
      .message_img{
        max-width: 850px;
        margin: auto;
        margin-top: 98px;
      }

        /* ==========================================================================
           スマートフォン対応 (幅 768px 以下) 
           ========================================================================== */
          @media (min-width: 769px){
                .message_wrap .txt_block.sp_inline{
                  width: 600px;
                }
                .nav-btn_wrap:hover .nav-btn-en, .nav-btn_wrap:hover .nav-btn-ja {
                  color: #ffffff; 
                }
          }
          @media (max-width: 768px){
            .message_inline {
              padding-block: 150px;
            }
            .tit_block{
              margin-bottom: 50px;
            }
            .subject_txt{
              font-size: 2.0rem;
              line-height: 32px;
            }
            .message_inline .tit_block{
              margin-bottom: 42px;
            }
            .message_wrap .subject_txt{
              font-size: 2rem;
              line-height: 38px;
            }
            .message_wrap .txt_block.sp_inline{
              margin: 38px auto 0;
              line-height: 34px;
            }
            .repres_block .p-name_block {
                margin-top: 20px;
            }
            .repres_block{
              margin-top: 50px;
            }
            .repres_block .p-home_block{
              line-height: 24px;
            }
            .message_img{
              margin-top: 59px;
            }
          }

  /* ===================== MOVIE ===================== */

    .movie_inline{
      width: 100%;
      background-color: var(--base-gray);
      padding-block: 200px;
    }
    .movie_inline .tit_block {
      margin-bottom: 79px;
    }
    .movie_inline .tit_block .tit_h2,
    .movie_inline .tit_block .tit_p {
      color: #ffffff;
    }

    .movie_block .movie_wrap{
        max-width: 1040px;
        width: 100%;
        margin: 0 auto;
    }

    .movie_block .movie_wrap iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      display: block;
    }

    .movie_block .movie_txt{
      margin-top: 30px;
      font-size: 1.8rem;
      color: #ffffff;
      text-align: center;
    }

    @media (max-width: 768px){
      .movie_inline{
        padding-block: 150px;
      }
      .movie_block .movie_txt{
        margin-top: 20.5px;
        font-size: 1.4rem;
      }
      .movie_inline .tit_block{
        margin-bottom: 50px;
      }
    }

/* ===================== TIME LINE ===================== */
.timeline-next{
    width: 100%;
    background-color: #ffffff;
    padding-block: 60px;
    text-align: center;
}
.timeline-next .timeline-next_subtit{
    font-size: 2.2rem;
    font-weight: bold;
}
.timeline-next .timeline-next_tit{
  color: var(--base-red);
  font-size: 5.4rem;
  font-weight: bold;
  padding-block: 17px 30px;
}
.timeline-next .timeline-next_txt{
  font-size: 1.6rem;
  line-height: 28px;
}
        /* ==========================================================================
           スマートフォン対応 (幅 768px 以下) 
           ========================================================================== */
          @media (max-width: 768px){
            .timeline-next {
              padding-block: 30px 28px;
            }
            .timeline-next .timeline-next_subtit{
              font-size: 1.4rem;
            }
            .timeline-next .timeline-next_tit{
              font-size: 2.4rem;
              padding-block: 7px 21px;
            }
            .timeline-next .timeline-next_subtit{
              font-size: 1.4rem;
              line-height: 22px;
            }
          }

          
  /* ===================== TIME LINE ===================== */
 
       .history_inline {
            background-color: var(--bg-light);
            padding: 60px 20px;
        }
        @media (min-width: 769px){
          .history_inline {
            padding-top: 190px;
          }
        }
      /* --- タイムラインコンテナ --- */
        .timeline-container {
            width: 100%;
            max-width: var(--pc-max-w);
            margin: 0 auto;
        }

      /* --- 時代タイトル見出し --- */
        .period-header {
          text-align: center;
          margin-block: 100px 80px;
          position: relative;
          display: inline-block;
          left: 50%;
          transform: translateX(-50%);
          padding: 0 40px;
          height: 105px;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
        } 
        .period-header.fst{
          margin-top: 0px;
        }

        .period-header::before,
        .period-header::after {
            content: "";
            position: absolute;
            top: 1px;
            width: 20px;
            height: 105px;
            border-color: var(--base-red);
            border-style: solid;
        }
        .period-header::before {
            left: 0;
            border-width: 1px 0 1px 1px; /* 左のブラケット [ */
        }
        .period-header::after {
            right: 0;
            border-width: 1px 1px 1px 0; /* 右のブラケット ] */
        }

        .period-header_wrapper .period-years {
          font-size: 4.2rem;
          font-weight: bold;
          color: var(--base-red);
          letter-spacing: -0.05rem;
          line-height: 1.25;
          margin-bottom: 3px;
          font-family: "Noto Sans JP", sans-serif;
        }

         .period-header_wrapper .period-title {
          font-size: 1.8rem;
          color: var(--base-gray);
          font-weight: 700;
        }

      /* --- テーブルヘッダーラベル（PC only) --- */
        .timeline-table-header {
            display: flex;
            gap: 20px;
            width: 100%;
            margin-bottom: 20px;
            padding-bottom: 5px;
        }

        .header-label-box {
            border: 1px solid var(--base-red);
            color: var(--base-red);
            border-radius: 10px;
            padding-block: 16px;
            font-size: 1.4rem;
            text-align: center;
            background-color: transparent;
            letter-spacing: 0.03em;
        }

        /* 下のコンテンツカードの flex 比率 (105px : flex 2 : flex 1) と完全に一致させます */
        .label-year {
            max-width: 105px;
            width: 10.1%;
            flex-shrink: 0;
        }

        .label-history {
            flex: 2;
        }

        .label-topics {
            flex: 1;
        }

        /* --- PC版 タイムライングリッド構造 --- */
        .timeline-list {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* 年号裏縦ライン（左側の年号バッジの後ろを通る） */
        .timeline-list::before {
          content: "";
          position: absolute;
          left: 5%;
          top: 40px;
          bottom: 40px;
          width: 2px;
          background-color: #9E1C1C4D;
          z-index: 1;
        }

        .timeline-list .timeline-row {
            display: flex;
            align-items: stretch;
            gap: 20px;
            position: relative;
            z-index: 2;
        }

        /* 年号バッジ */
        @media (min-width: 769px){
        .year-size{
            max-width: 105px;
            width: 10.1%;
        }
      }
        .timeline-list .timeline-row .year-badge {
            background-color: var(--base-red);
            color: #ffffff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            box-shadow: var(--card-shadow);
            font-family: "Noto Sans JP", sans-serif;
        }

        .timeline-list .timeline-row .year-badge .year-num {
          font-size: 2.4rem;
          font-weight: bold;
          letter-spacing: 0.02em;
          line-height: 1.2;
        }

        .timeline-list .timeline-row .year-badge .era-num {
            font-size: 1.4rem;
        }

        /* メインコンテンツカード */
        .timeline-list .timeline-row .card-base{
            background-color: #ffffff;
            border-radius: 10px;
            border: 1px solid #3333331A;
        }
        .timeline-list .timeline-row .content-card {
            flex: 2;
            padding: 24px 35px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }
        @media (min-width: 769px){
        .timeline-list .timeline-row .content-size{
            width: 60.5%;
            max-width: 630px;
            min-height: 130px;
        }
        }

        .timeline-list .timeline-row .content-card .card-text {
            font-size: 1.8rem;
        }

        /* ピックアップボタン */
        .timeline-list .timeline-row .content-card .btn-pickup {
          background-color: var(--base-gray);
          color: #ffffff;
          border-radius: 25px;
          padding: 10px 24px;
          font-size: 1.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 12px;
          transition: background-color 0.3s, transform 0.3s;
          flex-shrink: 0;
          border: unset;
          position: relative;
        }

        .timeline-list .timeline-row .content-card .btn-pickup:hover {
            background-color: var(--base-red);
        }

        .timeline-list .timeline-row .content-card .btn-pickup::after {
            content: "";
            position: absolute;
            width: 6px;
            height: 6px;
            border: 1px solid;
            border-color: #ffffff #ffffff transparent transparent;
            transform: rotate(45deg);
            right: 1.25rem;
        }

        /* 右側トピックスカード */
        @media (min-width: 769px){
        .topics-size{
            width: 27%;
            max-width: 280px;
        }
        }
        .timeline-list .timeline-row .topics-card {
            flex: 1;
            padding: 24px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }

        .timeline-list .timeline-row .topics-card .topics-text {
            font-size: 1.6rem;
        }

        /* 空白プレースホルダー（トピックスがない年用） */
        .timeline-list .timeline-row .topics-empty {
            flex: 1;
            background-color: transparent;
            box-shadow: none;
            border: none;
        }

        /* 小さい上部ラベル（SPデザインで使用されるあしらい） */
        .card-label {
            display: none;
        }


        /* ==========================================================================
           ポップアップ モーダルウィンドウ (3枚目スクリーンショット再現)
           ========================================================================== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-overlay);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            padding: 20px;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-wrapper {
          background-color: #ffffff;
          width: 100%;
          max-width: 1040px;
          border-radius: 16px;
          padding: 50px 60px;
          position: relative;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
          /* transform: translateY(-20px); */
          transition: transform 0.3s ease;
        }

        .modal-overlay.active .modal-wrapper {
            /* transform: translateY(0); */
        }

        /* 閉じる×ボタン */
        .modal-close-top {
          position: absolute;
          top: 30px;
          right: 30px;
          background: none;
          border: none;
          width: 50px;
          height: 50px;
          cursor: pointer;
          line-height: 1;
          transition: color 0.2s;
          padding: 0;
        }
        .nav-link-btn-close{
          display: block;
          position: relative;
          width: 50px;
          height: 50px;
        }
        .nav-link-btn-close::before,.nav-link-btn-close::after{
          position: absolute;
          content: "";
          background-color: var(--base-gray);
          width: 50px;
          height: 1px;
          left: 0;
          top: 50%;
          bottom: 50%;
        }
        .nav-link-btn-close::before{
          transform: translateY(-50%) rotateZ(45deg);
        }
        .nav-link-btn-close::after{
          transform: translateY(-50%) rotateZ(-45deg);
        }

        .modal-close-top:hover {
        color: var(--base-gray);
        }

        /* モーダル内部ヘッダー */
        .modal-txt{
          color: var(--base-gray);
        }
        .modal-header-tag {
          text-align: center;
          color: var(--base-red);
          font-size: 1.6rem;
          letter-spacing: -0.15px;
          line-height: 1;
        }

        .modal-header-tag::after {
          content: "";
          display: block;
          width: 20px;
          height: 1px;
          background-color: var(--base-red);
          margin: 20px auto 0 auto;
        }

        .modal-year {
          text-align: center;
          font-size: 3.6rem;
          font-family: "Noto Sans JP", sans-serif;
          font-weight: bold;
          color: var(--base-gray);
          line-height: 1;
          margin-block: 50px 18px;
        }

        .modal-era {
          text-align: center;
          font-size: 1.6rem;
          font-family: "Noto Sans JP", sans-serif;
          color: var(--base-gray);
          margin-bottom: 30px;
        }

        .modal-title {
          text-align: center;
          font-size: 2.4rem;
          font-weight: bold;
          margin-bottom: 35px;
        }

        /* モーダルコンテンツボディ */
        .modal-body {
          display: flex;
          gap: 35px;
          align-items: center;
          margin-bottom: 40px;
        }

        .modal-body .modal-img-box {
            flex: 1.1;
            position: relative;
            overflow: hidden;
        }

        /* モノクロ写真風のあしらい表現 */
        .modal-body .modal-img-box::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.85rem;
            color: #666;
            text-align: center;
            white-space: pre-wrap;
            line-height: 1.5;
        }

        .modal-body .modal-desc {
            flex: 1;
            font-size: 1.6rem;
            line-height: 1.8;
        }
        .modal-body .modal-desc.onlyTxt{
            max-width: 600px;
            margin: auto;
            margin-block: 15px 40px;
        }

        /* 下部ナビゲーションエリア */
        .modal-footer-nav {
          display: flex;
          justify-content: center;
          font-size: 0.9rem;
          color: var(--base-gray);
          height: 34px;
          max-width: 450px;
          margin: auto;
          align-items: center;
          position: relative;
        }
        .modal-footer-nav::before,.modal-footer-nav::after{
          position: absolute;
          content: "";
          width: 1px;
          background: var(--base-gray);
          height: 34px;
          z-index: 1;
        }
        .modal-footer-nav::before{
          left: calc(100% / 3);
        }
        .modal-footer-nav::after{
          right: calc(100% / 3);
        }

        .nav-link-btn {
          width: calc(100% / 3);
          height: 100%;
          background: none;
          border: none;
          cursor: pointer;
          display: flex;
          align-items: center;
          transition: color 0.2s;
          font-size: 1.4rem;
          display: flex;
          justify-content: center;
          transition: background-color 0.3s, transform 0.3s;
          text-decoration: none;
          color: var(--base-gray);
        }

        .nav-link-btn-L {
          position: relative;
          display: inline-block;
          width: 10px;
          height: 1px;
          margin: 4.3px 0;
          border-radius: 9999px;
          background-color: var(--base-gray);
          right: 20px;
          text-decoration: none;
          color: var(--base-gray);
        }
        .nav-link-btn-L::before,
        .nav-link-btn-L::after {
          content: "";
          position: absolute;
          top: calc(50% - 0.5px);
          left: 0;
          width: 7px;
          height: 1px;
          border-radius: 9999px;
          background-color: var(--base-gray);
          transform-origin: 0.5px 50%;
        }
        .nav-link-btn-L::before {
          transform: rotate(45deg);
        }
        .nav-link-btn-L::after {
          transform: rotate(-45deg);
        }

        .nav-link-btn-R {
          position: relative;
          display: inline-block;
          width: 10px;
          height: 1px;
          margin: 4.3px 0;
          border-radius: 9999px;
          background-color: var(--base-gray);
          left: 20px;
          text-decoration: none;
          color: var(--base-gray);
        }

        .nav-link-btn-R::before,
        .nav-link-btn-R::after {
          content: "";
          position: absolute;
          top: calc(50% - 0.5px);
          right: 0;
          width: 7px;
          height: 1px;
          border-radius: 9999px;
          background-color: var(--base-gray);
          transform-origin: calc(100% - 0.5px) 50%;
        }

        .nav-link-btn-R::before {
          transform: rotate(45deg);
        }

        .nav-link-btn-R::after {
          transform: rotate(-45deg);
        }

        .nav-link-btn-C{
          position: relative;
          width: 12px;
          height: 12px;
          right: 6px;
        }
        .nav-link-btn-C::before,.nav-link-btn-C::after{
          position: absolute;
          content: "";
          width: 14px;
          height: 1px;
          background-color: var(--base-gray);
          top: calc(50% - 0.5px);
          left: 0;
        }
        .nav-link-btn-C::before{
          transform: rotateZ(45deg);
        }
        .nav-link-btn-C::after{
          transform: rotateZ(-45deg);
        }

        @media (min-width: 769px) {
          .nav-link-btn:hover {
            color: #ffffff;
            background: var(--base-gray);
          }
          .nav-link-btn:hover .nav-link-btn-L::before,
          .nav-link-btn:hover .nav-link-btn-L::after,
          .nav-link-btn:hover .nav-link-btn-L,
          .nav-link-btn:hover .nav-link-btn-R::before,
          .nav-link-btn:hover .nav-link-btn-R::after,
          .nav-link-btn:hover .nav-link-btn-R,
          .nav-link-btn:hover .nav-link-btn-C::before,
          .nav-link-btn:hover .nav-link-btn-C::after{
            background-color: #ffffff;
          }
        }
        .btn-close-center {
            font-weight: 500;
            color: var(--base-gray);
        }

        @media (max-width: 768px) {
        .modal-footer-nav::before{
          left: calc(calc(100% / 3) - 7px );
        }
        .modal-footer-nav::after{
          right: calc(calc(100% / 3) - 7px );
        }
      }

        /* ==========================================================================
           スマートフォン対応 (幅 768px 以下)
           ========================================================================== */
        @media (max-width: 768px) {

            .period-header {
                margin: 50px auto 30px;
                padding: 0 40px;
                height: 60px;
            }
            .period-header::before, .period-header::after{
              height: 68px;
              top: -4px;
            }
            .period-header_wrapper {
              display: flex;
              flex-direction: column;
              gap: 3px;
            }
            .period-header_wrapper .period-years {
                font-size: 2.8rem;
                line-height: 1;
            }

            .period-header_wrapper .period-title {
                font-size: 1.4rem;
            }

            /* ラインを消去し、縦にシンプルに並べる */
            .timeline-list{
              gap: 14px;
            }
            .timeline-list::before {
                display: none;
            }

            .timeline-list .timeline-row {
                flex-direction: column;
                gap: 10px;
                margin-bottom: 16px;
            }

            .timeline-list .timeline-row .topics-card{
              text-align: left;
              gap: 2px;
              padding: 15px 20px;
            }

            /* 年号バッジを全幅の細長いバーに変形 */
            .timeline-list .timeline-row .year-badge {
                width: 100%;
                min-height: auto;
                height: 48px;
                flex-direction: row;
                justify-content: flex-start;
                padding: 15px 13px;
                border-radius: 6px;
                gap: 20px;
            }

            .timeline-list .timeline-row .year-badge .year-num {
                font-size: 2.0rem;
            }

            .timeline-list .timeline-row .year-badge .era-num {
                margin-top: 0;
                font-size: 1.3rem;
            }
            .timeline-list .timeline-row .content-card{
                padding: 15px 20px;
            }
            .timeline-list .timeline-row .content-card .content-card_wrap{
              width: 100%;
            }
            /* カード類の調整 */
            .content-card, .topics-card {
                width: 100%;
                flex: none;
                border-radius: 6px;
                padding: 20px;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .timeline-list .timeline-row .content-card .card-text,
            .timeline-list .timeline-row .topics-card .topics-text,
            .card-text, .topics-text {
                font-size: 1.4rem;
                line-height: 1.6;
            }

            /* ラベルあしらいを表示 */
            .card-label {
                display: block;
                font-size: 1.0rem;
                color: var(--base-red);
                text-decoration: underline;
                margin-bottom: 5px;
                letter-spacing: 0.05em;
                }

            .timeline-list .timeline-row .content-card .btn-pickup {
                align-self: flex-end;
                font-size: 1.2rem;
                padding: 8px 24px 8px 19px;
            }

            .topics-empty {
                display: none; /* 空白プレースホルダーはSPでは非表示 */
            }

            /* ★ここを追加：SP時はヘッダーラベルを非表示にする ★ */
            .timeline-table-header {
                display: none;
            }

            /* モーダルのレスポンシブ */

            .modal-overlay{
                padding: 0;
                height: auto;
            }

            .modal-wrapper {
                padding: 40px 40px;
                border-radius: 0;
                height: 100vh;
                top: 0px;
                position: relative;
            }

            .modal-close-top {
                top: 15px;
                right: 20px;
            }
            .modal-header-tag::after{
                margin: 10px auto 0 auto;
            }
            .modal-year{
                margin-block: 25px 6px;
                font-size: 2.8rem;
            }
            .modal-era{
              font-size: 1.3rem;
              margin-bottom: 15px;
            }
            .modal-title {
                font-size: 2.0rem;
                margin-bottom: 25px;
            }

            .modal-body {
                flex-direction: column;
                gap: 20px;
                margin-bottom: 50px;
            }
            
            .modal-body.modal_2img .modal-img-box{
                max-width: 232px;
            }

            .modal-body .modal-img-box img{
                max-height: 24vh;
            }
            .modal-body .modal-desc.onlyTxt{
              margin-bottom: 0;
            }
            .modal-footer-nav {
              gap: 20px;
              font-size: 0.8rem;
              position: absolute;
              /* bottom: 35px; */
              width: calc(100% - 80px);
              left: 50%;
              right: 50%;
              transform: translateX(-50%);
            }
        }
  /* TIMELINE*/


  /* ENDING 01 */
    
    .ending__1{
      background-color: var(--base-red);
    }
    .ending__1 .logo-area {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-block: 377px;
    }
    @media (min-width: 769px) {
    .ending__1 .logo-area img{
      max-width: 324px;
      position: relative;
      left: 1.6%;
    }
    }
    @media (min-width: 1800px) {
    .ending__1 .logo-area img{
      left: 1.1%;
    }
    }
    @media (max-width: 768px) {
      .ending__1{
      }
      .ending__1 .logo-area {
        padding-block: unset;
        height: calc(100vh - 65px);
        width: 50vw;
        margin: auto;
      }
      .ending__1 .logo-area img{
        position: relative;
        left: 2.26vw;
      }
    }

  /* ENDING 02 */
    .ending__2{
      background-image: url('../../assets/img/jal_pc.webp') ;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      height: 850px;
    }
    .ending__2 .ending_txt{
      font-size: 2.8rem;
      font-weight: bold;
      position: absolute;
      content: "";
      transform: translateX(25%);
      top: calc(850px /2);
      right: 50%;
      left: 50%;
      width: 14.5em;
      display: inline;
      letter-spacing: 5px;
    }
  @media (max-width: 768px) {
    .ending__2{
      background-image: url('../../assets/img/jal_sp.webp') ;
        width: 100%;
        height: calc(100vh - 65px);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .ending__2 .ending_txt {
        font-size: 1.8rem;
        line-height: 36px;
        font-weight: bold;
        letter-spacing: 2.5px;
        transform: translateX(2%);
        top: unset;
        width: 14rem;
        bottom: 23vh;
    }
  }

  /* TOTOP */
  .to_top{
    background-color: #F5F5F5;
  }
   .to_top a{
    width: 100%;
    display: block;
    padding-block: 35px;
   }
  .to_top .c-btn-arwlink{
    position: relative;
    display: inline;
    font-size: 1.8rem;
  }
  @media (min-width: 835px) {
    .to_top .c-btn-arwlink{
      left: calc(50% - 4rem);
      right: 50%;
      transform: translateX(-50%);
    }
  }
@media only screen and (max-width: 834px) {
    .to_top .c-btn-arwlink{
        right: -40vw;
        font-size: calc(16 / 375 * 100vw);
    }
    .to_top .c-btn-arwlink.-rarw::before{
          right: -35px;
    }
    
}
@media only screen and (max-width: 480px) {
    .to_top a{
      text-align: center;
    }
    .to_top .c-btn-arwlink{
        right: 10px;
    }
    .to_top .c-btn-arwlink.-rarw::before{
          right: -18px;
    }
}