@charset "UTF-8";

.display_clear{
  visibility: hidden;
}

#top_text_2 {
    opacity: 0;
    font-size: 32px;
    padding-left: 20px;
    letter-spacing: 4;
    font-style: italic;
}

#top_text_3 {
  padding: 20px;
  visibility:hidden;             /* 最初は非表示 */
  opacity: 0;                 /* 【初期状態】透明 */
  transform: translateY(5px); /* 【初期状態】30px下に下げておく */
  filter: blur(5px);         /* 【初期状態】強くぼかしておく */

  /* ↓ 変化するときの時間と滑らかさの設定（GSAPの代わりになります） */
  transition: opacity 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              transform 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              filter 1.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* 6秒後にこのクラスがつくと、上の transition に従って滑らかに表示されます */
#top_text_3.active {
  opacity: 1;                 /* 【最終状態】完全に表示 */
  transform: translateY(0);    /* 【最終状態】元の位置に上げる */
  filter: blur(0px);          /* 【最終状態】ぼかしを消す */
}




/* ---------------------------------- */
/* トップ画像アニメーション */
/* ---------------------------------- */
/* 親コンテナ：全体を mask-image で 7分割にくり抜く */
.split-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
  top: 150px;
  left: 500px;
  width: 65%;
  aspect-ratio: 16 / 9;

  /* 枠外からはみ出る初期状態のアニメーション要素を完全に隠す */
  overflow: hidden;
  background-color: transparent;

  /* 全体を 5px の隙間で7分割くり抜き（60px = 10px × 6本分） */
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    black 0px,
    black calc((100% - 60px) / 7),
    transparent calc((100% - 60px) / 7),
    transparent calc((100% - 60px) / 7 + 10px) /* 10px に統一 */
  );
  mask-image: repeating-linear-gradient(
    to right,
    black 0px,
    black calc((100% - 60px) / 7),
    transparent calc((100% - 60px) / 7),
    transparent calc((100% - 60px) / 7 + 10px) /* 10px に統一 */
  );
}

/* 背景画像（色が消えたあともマスクにより7分割に見える） */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0; /* 初期状態は透明 */
  animation: fadeInImage 1s ease forwards;
  animation-delay: 2s;
}

/* 共通の列スタイル（スライドインアニメーション） */
.column {
  position: relative;
  z-index: 2;
  height: 100%;
  background-size: 700% 100%;
  background-position-y: center;
  overflow: hidden;
  animation-duration: 1.6s, 1.2s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1), ease;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
}
.column::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--cover-color);
  animation:fadeOutColor 1s ease forwards;
  animation-delay:2.1s;
}
/* 各列の背景画像の位置 */
.col-1 { background-position-x: 0%; }
.col-2 { background-position-x: 16.66%; }
.col-3 { background-position-x: 33.33%; }
.col-4 { background-position-x: 50%; }
.col-5 { background-position-x: 66.66%; }
.col-6 { background-position-x: 83.33%; }
.col-7 { background-position-x: 100%; }

/* 上下アニメーションの割り当て と 初期位置（画面外）の設定 */
.col-1, .col-3, .col-5, .col-7 {
  animation-name: slideFromTop;
  transform: translateY(-100%); /* アニメーション前は上枠外に隠す */
}
.col-2, .col-4, .col-6 {
  animation-name: slideFromBottom;
  transform: translateY(100%); /* アニメーション前は下枠外に隠す */
}

/* 塗りつぶしの7色とタイミング設定 */
.col-1{ --cover-color:#d6000f; }
.col-2{ --cover-color:#f18d00; }
.col-3{ --cover-color:#90c31f; }
.col-4{ --cover-color:#007440; }
.col-5{ --cover-color:#0068b7; }
.col-6{ --cover-color:#023894; }
.col-7{ --cover-color:#751385; }


#rect1 {
  width: 100%;
}

/* --- アニメーション定義 --- */
@keyframes slideFromTop {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes slideFromBottom {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes fadeOutColor{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

@keyframes fadeInImage {
  to { opacity: 1; }
}



/* -------------------------------------- */
/* レスポンシブ */
/* -------------------------------------- */
@media (max-width: 1205px) {

  .split-container {
    top: 0px;
    left: 0px;
    margin: 200px 0 20px 0;
    width: 80%;
  }

   #top_text_2  {
    padding-top: 30px;
    padding-left: 60px;
}

   #top_text_3  {
    padding-left: 60px;
}
}

@media (max-width: 600px) {

    .split-container {
      margin-top: 200px;
    }

    #top_text_2  {
    padding-left: 30px;
}

   #top_text_3  {
    padding-left: 30px;
}
}