#about-story .fv-inner {
  scale: 1.0;
  background-position: 50% 0%;
}

/* テキストコンテナのスタイル */
.txt-container {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.third-line {
    margin-top: 2rem;
}

.third-line p {
    color: var(--color-navy);
    font-size: calc(var(--font-size-ttl-jp) * 1.2);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* グループのアニメーション調整 */
/* グループ1の基本アニメーション */
.group-1 .txt p {
    animation-delay: calc(0.1s * var(--i));
}

/* グループ2は遅延して表示 - PCでも遅延させる */
.group-2 .txt p {
    animation-delay: calc(0.1s * var(--i) + 1.5s); /* PCでは1.5秒遅延 */
}

.txt {
    display: flex;
    overflow: hidden;
}

/* アニメーションの遅延時間を調整（括弧なしの状態に合わせる） */
.txt p {
    color: var(--color-dark-navy);
    font-size: var(--font-size-ttl-jp);
    font-weight: var(--font-size-ttl-jp-font-weight);
    line-height: var(--font-size-ttl-jp-line-height);
    letter-spacing: var(--font-size-ttl-jp-letter-spacing);
    margin: 0;
    display: inline-block;

    /* ここからアニメーション関係 */
    opacity: 0;
    animation: textanimation 1s forwards;
    animation-delay: calc(0.1s * var(--i)); /* 基本のアニメーション遅延 */
}
.txt.second-line p {
  animation-delay: calc(0.1s * var(--i) + 0.7s); /* PCでは1.5秒遅延 */
}

.txt.third-line p{
    color: var(--color-navy);
    font-size: var(--font-size-text);
}
#about-story .fv-second {
  background-size: 100%;
}
@media screen and (min-width: 1600px) {
  #about-story .fv-second {
    background-size: 104.6%;
  }
}
@media screen and (max-width: 1700px) {
  .description-img {
    align-self: flex-end;
  }
}
@media screen and (max-width: 1200px) {
  #about-story .fv-second {
    background-size: cover;
  }
}
/* メディアクエリを追加 - 1024px以下でのテキスト調整 */
@media screen and (max-width: 1024px) {
    .txt {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 100%;
    }
    
    /* テキストコンテナのスタイル */
    .txt-container {
        gap: 0.5rem;
    }
    
    .third-line {
        margin-top: 2rem;
    }
    

    /* tb-sp-only用のアニメーション遅延設定 */
    /* アニメーション時間を長くして、すべての要素が表示されるように */
    .txt p.tb-sp-only:nth-child(17) { animation-delay: 1.7s; }
    .txt p.tb-sp-only:nth-child(18) { animation-delay: 1.8s; }
    .txt p.tb-sp-only:nth-child(19) { animation-delay: 1.9s; }
    .txt p.tb-sp-only:nth-child(20) { animation-delay: 2.0s; }
    .txt p.tb-sp-only:nth-child(21) { animation-delay: 2.1s; }
    .txt p.tb-sp-only:nth-child(22) { animation-delay: 2.2s; }
    .txt p.tb-sp-only:nth-child(23) { animation-delay: 2.3s; }
    .txt p.tb-sp-only:nth-child(24) { animation-delay: 2.4s; }
    .txt p.tb-sp-only:nth-child(25) { animation-delay: 2.5s; }
    .txt p.tb-sp-only:nth-child(26) { animation-delay: 2.6s; }
    .txt p.tb-sp-only:nth-child(27) { animation-delay: 2.7s; }
    .txt p.tb-sp-only:nth-child(28) { animation-delay: 2.8s; }
    .txt p.tb-sp-only:nth-child(29) { animation-delay: 2.9s; }
    .txt p.tb-sp-only:nth-child(30) { animation-delay: 3.0s; }
    .txt p.tb-sp-only:nth-child(31) { animation-delay: 3.1s; }
}

/* グループ2のアニメーション遅延を調整、すべての文字が表示されるように */
@media screen and (max-width: 1024px) {
    /* タブレット表示では、group-1の後に1.5秒遅延して表示開始 */
    .group-2 .txt p {
        animation-delay: calc(0.1s * var(--i) + 3.1s); /* グループ1の完了（約3.1秒）+ 1.5秒の遅延 */
    }
}

/* 768px以下のスタイル追加 */
@media screen and (max-width: 768px) {
    /* スマホで一行表示にする */
    #about-story .description {
        margin-top: 0;
    }
    
    .txt-container {
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .group-1, .group-2 {
        display: inline-flex;
    }
    
    /* .txt {
        margin-right: 0.5rem;
    } */
    .txt p {
      line-height: 2.8125rem;
      letter-spacing: normal;
  }
    
    .third-line {
        margin-top: 0.5rem;
    }
    #about-story .description-container {
      margin-top: 4.38rem;
    }
    /* アニメーションの遅延時間を調整（括弧なしの状態に合わせる） */
.txt p {
  font-size: 1.8rem;
}
}

/* グループ1の文字に共通の遅延変数を設定 */
.txt p:nth-child(n) {
    --i: attr(data-index int, 0);
}

/* 1文字目 */
.txt p:nth-child(1) {
    --i: 1;
}
/* 2文字目 */
.txt p:nth-child(2) {
    --i: 2;
}
/* 3文字目 */
.txt p:nth-child(3) {
    --i: 3;
}
/* 4文字目 */
.txt p:nth-child(4) {
    --i: 4;
}
/* 5文字目 */
.txt p:nth-child(5) {
    --i: 5;
}
/* 6文字目 */
.txt p:nth-child(6) {
    --i: 6;
}
/* 7文字目 */
.txt p:nth-child(7) {
    --i: 7;
}
/* 8文字目 */
.txt p:nth-child(8) {
    --i: 8;
}
/* 9文字目 */
.txt p:nth-child(9) {
    --i: 9;
}
/* 10文字目 */
.txt p:nth-child(10) {
    --i: 10;
}
/* 11文字目 */
.txt p:nth-child(11) {
    --i: 11;
}
/* 12文字目 */
.txt p:nth-child(12) {
    --i: 12;
}
/* 13文字目 */
.txt p:nth-child(13) {
    --i: 13;
}
/* 14文字目 */
.txt p:nth-child(14) {
    --i: 14;
}
/* 15文字目 */
.txt p:nth-child(15) {
    --i: 15;
}
/* 16文字目 */
.txt p:nth-child(16) {
    --i: 16;
}
/* 17文字目 */
.txt p:nth-child(17) {
    --i: 17;
}
/* 18文字目（ピリオド） */
.txt p:nth-child(18) {
    --i: 18;
}

@keyframes textanimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* #about-story .description {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
} */

#about-story .description-img {
    width: 40%;
}

#about-story .description-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    .description-img {
        width: 100%;
        max-width: 600px;
        margin: 0;
        order: 0;
    }
    #about-story .description-img {
      width: 60%;
  }
}
@media screen and (max-width: 768px) {
  .philosophy-container {
    margin-top: 6.25rem;
  }
}

.about-story {
  position: relative;
  margin-bottom: 5rem;
}
.philosophy-container {
  /* display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: auto; */
  display: block;
  /* width: 100%; */
  position: relative;
  margin-top: 5rem;
}

.philosophy-images-container {
  position: sticky;
  align-self: flex-start; 
  top: 0vh;
  right: 0;
  height: 75vh;
  /* width: calc(40vw - 8.5rem); */
  position: absolute;
  right: 0;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.philosophy-images-container.fixed {
  position: fixed;
  top: 20vh;
  right: 0;
  height: 75vh;
  right: 0;
  width: calc(40vw - 8.5rem);
  z-index: 10;
  transform: translateX(0);
  
}

.philosophy-images-container.stop-fixed {
  position: sticky;
  align-self: flex-start; 
  top: 0vh;
  right: 0;
  height: 75vh;
  width: calc(40vw - 8.5rem);
  position: absolute;
  right: 0;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.philosophy-texts {
  /* flex: 1 1 60%; */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  order: 1;
  margin: 4.5rem 0 0rem 9.37rem;

  width: 90%;
  margin-right: auto;
}

.philosophy-image {
  position: absolute;
  top: 0;
  right: 0px;
  opacity: 0;
  width: 550px;
  height: 100%;
  transition: all 2s ease;
  z-index: 0;
  object-fit: cover;
  -webkit-backface-visibility:hidden;
 backface-visibility:hidden;
}

.philosophy-image.active {
  opacity: 1;
  z-index: 1;
}

/* 最初の画像だけ表示 */
.philosophy-image[data-image="1"] {
  opacity: 1;
}

.philosophy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* テキストセクションのスタイル */
.philosophy-section {
  position: relative;
  width: 55%; /* グリッド内で100%幅 */
  margin-bottom: 2rem;
  z-index: 2;
  grid-column: 1; /* 左列に配置 */
}

.philosophy-section:nth-child(1) {
  grid-row: 1;
}

.philosophy-section:nth-child(2) {
  grid-row: 2;
}

.philosophy-section:nth-child(3) {
  grid-row: 3;
}

.philosophy-section:last-child {
  margin-bottom: 10rem;
}

.philosophy-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1500px) { 
  .philosophy-image {
    width: 500px;
    right: 0;
  }


.philosophy-texts {
  /* flex: 1 1 60%; */
  margin: 4.5rem 0 0rem 9.37rem;
}


  .philosophy-section {
    position: relative;
    width: 55%; /* グリッド内で100%幅 */
  }
  
  
}
@media screen and (max-width: 1400px) {
  .philosophy-texts {
    margin: 4.5rem 0 0rem 5.37rem;
    gap: 1rem;
  }
    .philosophy-image {
      width: 400px;
      right: 0px;
    }
    .philosophy-section:last-child {
      margin-bottom: 5rem;
    }
    .philosophy-section {
      margin-bottom: 2rem;
    }
}

/* スマホ・タブレット用のスタイル */
@media screen and (max-width: 1200px) {
  .philosophy-container {
    padding-bottom: 0;
    display: block;
  }
  
  .philosophy-images-container {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 3rem 0;
  }

  .philosophy-image {
    width: 100%;
    height: 100%;
  }
  
  .philosophy-texts {
    margin: 0;
    gap: 1.2rem;
    width: 100%;
    
  }

  .philosophy-image.tb-sp-only {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 2.4;
    margin: 0 auto;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
    overflow: hidden;
    padding: 0;
  }


  .philosophy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }
  /* 1枚目の画像（data-section="0"）を拡大 */
  .philosophy-section[data-section="0"] .philosophy-image.tb-sp-only img {
    object-fit: cover;
    object-position: 50% 60%;
    transform: scale(1.3); /* 画像を1.5倍に拡大 */
  }

  .content-wrapper.tb-sp-only {
    position: relative;
  }

  .content-wrapper.tb-sp-only .image-caption-container {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    z-index: 2;
    width: 140px;
  }

  .content-wrapper.tb-sp-only .image-caption {
    font-size: 0.75rem;
    padding: 5px 12px 10px;
    margin-left: -1.5rem;
  }

  .content-wrapper.tb-sp-only .image-caption-name {
    font-size: 0.875rem;
  }

  .content-wrapper.tb-sp-only .image-caption-container svg {
    width: 140px;
    height: 60px;
  }
  .philosophy-section {
    margin-bottom: 3.75rem;
    width: 100%;
  }

  .philosophy-section:last-child {
    margin-bottom: 0;
  }
  .about-story {
    margin-bottom: 0;
  }

}

@media screen and (max-width: 1024px) {
  .philosophy .content-wrapper {
    padding: 0 6rem;
  }
  
  .philosophy-text {
    padding: 0 7rem;
    gap: 1rem;
  }
}
/* 小型スマホ用 */
@media screen and (max-width: 768px) {

  .philosophy-container {
    margin-top: 6.25rem;
  }
  .content-wrapper.tb-sp-only {
    position: relative;
    padding: 0 1.87rem;
  }
  .philosophy-image.tb-sp-only {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1/1;
    padding: 0;
  }
  
  .philosophy-text {
    gap: 1.87rem;
    padding: 0 1.88rem;
  }

  .content-wrapper.tb-sp-only .image-caption-container {
    width: 120px;
    bottom: -0.25rem;
    left: -0.38rem;
    margin-left: 0.4rem;
  }
  .content-wrapper.tb-sp-only .image-caption-container svg {
    width: 8rem;
    height: 3rem;
  }

  .content-wrapper.tb-sp-only .image-caption {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.00625rem;
    padding: 10px 10px 7px;
    margin-left: -1rem;
  }

  .content-wrapper.tb-sp-only .image-caption-name {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3rem; 
    letter-spacing: 0.055rem;
  }

  .philosophy-texts {
    margin: 0 auto;
    gap: 0;
    width: 100%;
  }
  .philosophy-section {
    margin-bottom: 1.5rem;
  }

  .philosophy-section:last-child {
    margin-bottom: 0;
  }
  
}

.philosophy {
    padding: 6rem 0;
    background-color: var(--color-white);
    color: var(--color-black-navy);
}
  
.philosophy .content-wrapper {
    padding: 0 9.37rem;
    position: relative;
}

.image-caption-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.image-caption {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 10px 15px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-contents-description);
  line-height: normal;
  letter-spacing: -0.00875rem;
  text-align: center;
  width: 100%;
}

.image-caption-name {
  color: var(--color-navy);
  font-size: var(--font-size-text);
  letter-spacing: 0.055rem;
}

.image-caption-container svg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.philosophy-title {
  position: relative;
  color: var(--color-black-navy);
  font-size: var(--font-size-ttl-jp);
  font-weight: var(--font-size-ttl-jp-font-weight);
  line-height: var(--font-size-ttl-jp-line-height);
  letter-spacing: var(--font-size-ttl-jp-letter-spacing);
  display: flex;
  align-items: center;
  width: 100%;
}

.philosophy-title::before {
  position: absolute;
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 0.5rem;
  background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-lightblue) 100%);
  margin-right: 0.75rem;
}

.philosophy-paragraph {
  font-size: var(--font-size-text);
  color: var(--color-black-navy);
  font-weight: 400;
  line-height: 2.35rem;
}

.philosophy-paragraph:last-child {
  margin-bottom: 5rem;
}
@media screen and (max-width: 1500px) {
  .philosophy-paragraph {
    line-height: 2rem;
  }
}
@media screen and (max-width: 1200px) {
  .philosophy-title {
    margin-top: 2.5rem;
    }
    .philosophy-paragraph {
      line-height: 2rem;
    }
}

@media screen and (max-width: 768px) {
  .philosophy {
    padding: 3rem 0;
  }

  .philosophy-paragraph {
    line-height: 1.5625rem;
  }
   
  .philosophy .content-wrapper {
    padding: 0 1.5rem;
  }
   
  .philosophy-title {
    font-size: var(--font-size-ttl-jp);
    line-height: 2.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
  }
  .philosophy-title span {
    margin-left: 2rem;
  }
  .philosophy-title::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(0);
    content: "";
    width: 0.9375rem;
    height: 0.3125rem;
    background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-lightblue) 100%);
    padding-right: 1rem;
  }

  #philosophy-image-1 .philosophy-image img {
    object-position: 50% 40%;
    scale: 1.3;
  }


}

/* tb-sp-onlyの表示制御を強制的に上書き */
.txt p.tb-sp-only {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  .txt p.tb-sp-only {
    display: inline-block !important;
  }
  
  .txt.second-line.pc-only {
    display: none !important;
  }
}

/* .philosophy-image {
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

} */
.philosophy-image.active {
  opacity: 1;
  z-index: 10;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ① stickyをやめる。JSで制御するため初期はabsoluteで親内に置く */
.philosophy-images-container {
  position: absolute;           /* ← sticky削除 */
  top: 0;
  right: 0;                     /* 必要なら配置に合わせて */
  height: 75vh;
  order: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ② 親は相対指定でOK（既にある） */
.philosophy-container {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  margin-top: 5rem;
}

/* ③ 状態ごとの明示。start/fixed/stop をCSSで定義 */
.philosophy-images-container.start-fixed {
  position: absolute;
  top: 0;               /* 開始前は親の先頭で待機 */
  left: auto;           /* JSでleftを触る前提なので初期はauto */
  width: auto;
}

.philosophy-images-container.fixed {
  position: fixed;      /* 画面基準 */
  /* topはJSで動的に設定（20vh） */
  /* left/widthもJSで動的に設定して横ズレ防止 */
}

.philosophy-images-container.stop-fixed {
  position: absolute;   /* 親の中で停止 */
  /* topはJSで (wrapper高さ - 自分高さ) を代入 */
}

/* 既存の .fixed / .stop-fixed 定義があれば ↑ の内容で上書き */

/* スクロール中の再レイアウトを減らす小ワザ */
.philosophy-images-container {
  will-change: top;
  /* Windowsでフォント差による再流し込みを軽減したいなら */
  contain: layout style; /* サポート外環境は無視されるので安全 */
}