/* ==========================================================================
  「チーム美らサンゴ」とは
========================================================================== */
.about-photo{
  margin-top: calc(-10rem - 10vw);
  margin-bottom: 3.75rem;
}

.about-box{
  margin-bottom: calc(3.5rem + 2.5vw) !important;
}

@media (max-width: 866px) {
  .about-box .mr-20{
    margin-right: 0 !important;
  }
  .about-box .ml-20{
    margin-left: 0 !important;
    margin-top: 4rem;
  }
}

#about .bg_wave::before {
  right: 20px !important;
  left: initial;
  top: clamp(6rem, 12vw, 11.25rem);
}
#about .bg_wave::after {
	left: 20px;
}

.bg_GRAY {
  width: 90% !important;
  max-width: 1280px !important;
  border-radius: clamp(2.5rem, 4vw, 3.75rem);
  background: #F4F4F4;
  padding: clamp(2.5rem, 8vw, 5rem);  
}

/* スライダー */
.about-slider-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  gap: 2rem;
}
.about-slider-container *{
  min-height: 0;
  min-width : 0;
}
.about-slider-box {
  width: 50%;
}
.about-slider-container .slick-slider {
  width: auto;
}
.about-slider-container .about-slide-item {
  margin-bottom: 1rem;
}
.about-slide-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(4rem, 6vw, 6.25rem) 0;
  margin: 0 auto;
}
/* コンテンツ側 */
.content-box {
  width: 50%;
}

/* ドットの親要素 */
.slick-dots {
  display: flex !important;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  gap: 0.75rem; /* ドット同士の間隔 */
}

.slick-dots li {
  width: 20px; /* SVGの幅に合わせて調整 */
  height: 7px;  /* SVGの高さに合わせて調整 */
}

.slick-dots li button {
  font-size: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  
  /* --- 非アクティブ時の色 --- */
  background-color: #BBB !important;
  
  /* SVGをマスクとして指定 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="7" viewBox="0 0 20 7" fill="none"%3E%3Cpath d="M4.66623 4.77733C11.7149 8.87752 17.0491 5.73084 19.2544 3.75242C19.4612 3.56693 19.4612 3.24886 19.2544 3.06336C17.0491 1.08491 11.7149 -2.06209 4.66623 2.0381C4.46738 2.15377 4.21224 2.12623 4.04273 1.97071C3.09965 1.10548 1.85442 0.290505 0.551383 0.0103418C0.16009 -0.0737892 -0.113053 0.375232 0.0462476 0.742399C0.411622 1.58454 0.796588 2.75383 0.796588 3.40771C0.796588 4.0616 0.411622 5.23089 0.0462476 6.07303C-0.113053 6.4402 0.16009 6.88922 0.551383 6.80509C1.85442 6.52492 3.09965 5.70995 4.04273 4.84472C4.21224 4.6892 4.46738 4.66166 4.66623 4.77733Z" fill="black"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="7" viewBox="0 0 20 7" fill="none"%3E%3Cpath d="M4.66623 4.77733C11.7149 8.87752 17.0491 5.73084 19.2544 3.75242C19.4612 3.56693 19.4612 3.24886 19.2544 3.06336C17.0491 1.08491 11.7149 -2.06209 4.66623 2.0381C4.46738 2.15377 4.21224 2.12623 4.04273 1.97071C3.09965 1.10548 1.85442 0.290505 0.551383 0.0103418C0.16009 -0.0737892 -0.113053 0.375232 0.0462476 0.742399C0.411622 1.58454 0.796588 2.75383 0.796588 3.40771C0.796588 4.0616 0.411622 5.23089 0.0462476 6.07303C-0.113053 6.4402 0.16009 6.88922 0.551383 6.80509C1.85442 6.52492 3.09965 5.70995 4.04273 4.84472C4.21224 4.6892 4.46738 4.66166 4.66623 4.77733Z" fill="black"/%3E%3C/svg%3E');
  
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* --- アクティブ時の色 --- */
.slick-dots li.slick-active button {
  background-color: #005CAC !important;
  transform: scale(1.1); /* わずかに強調 */
}

/* チームの歴史 */
.timeline-wrapper {
  margin: 0 auto;
  padding: 3rem 0;
  position: relative;
}

/* 垂直ライン（縦棒） */
.timeline-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-color: #bbb;
}

.timeline-item {
  display: flex;
  gap: 2.5rem;
  position: relative;
  margin-left: 3.9rem;
  margin-bottom: 4rem;

}

.timeline-date {
  flex: 0 0 6rem 5rem;
  color: #005CAC;
  position: relative;
  display: flex;
  align-items: baseline;
}
.timeline-date span{
  font-size: 24px;
  font-family: Outfit;
  letter-spacing: 1.2px;
  margin-right: .3rem;
  margin-left: .6rem;
}

.timeline-date::before {
  content: "";
  position: absolute;
  right: 100%;
  width: 3.875rem;
  height: 1px;
  background-color: #bbb;
  top: 1.5rem;
  transform: translateY(-50%);
}
.timeline-item.active .timeline-date::before {
  background-color: #005CAC;
}
.timeline-item.active .timeline-date::after {
  content: "";
  position: absolute;
  left: calc(-3.875rem - 6px);
  top: 1.5rem;
  transform: translateY(-50%);
  width: 0.75rem;  /* 12px */
  height: 0.75rem; /* 12px */
  background-color: #005CAC;
  border-radius: 50%;
  z-index: 2;
}

.timeline-content {
  flex: 1;
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
}
.timeline-item.active .timeline-content {
  background: #005CAC;
  color: #fff;
}
.timeline-item.active .timeline-content h3{
  color: #fff;
}
.timeline-content.flex {
  align-items: flex-start;
  gap: 1.5rem;
}
/* 初期で隠す用 */
/* =====================================
   Timeline 折りたたみアニメーション用
===================================== */

/* 折りたたみ対象を包むJS生成ラッパー */
.timeline-collapsible {
  overflow: hidden;
  height: 0;
  display: none; /* 閉じた状態 */
  transition: height 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: height;
}

/* アニメ中の操作防止 */
.timeline-collapsible.is-animating {
  pointer-events: none;
}

/* ボタンベース（既存btn-lを壊さない範囲） */
.timeline-more .btn-l {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.timeline-more .btn-l:hover {
  opacity: 0.7;
}

/* クリック中の視覚補助（任意） */
.timeline-more .btn-l:active {
  transform: translateY(1px);
}

/* スマホ時の高さ揺れ対策 */
@media (max-width: 768px) {
  .timeline-collapsible {
    transition: height 900ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
}

/* 画像があるflex構造の高さブレ防止（保険） */
.timeline-collapsible .timeline-content {
  box-sizing: border-box;
}

/* flex内画像が高さ計算を邪魔しないように */
.timeline-collapsible img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* moreボタンが開いたら文言差し替えたい場合用（任意） */
.timeline-more.is-open .btn-l::after{
  content: " Close";
}
.timeline-content.flex .text{
  width: calc(100% - 16rem);
}
.timeline-content.flex .text.w-full{
  width:100%;
}
.timeline-content.flex .text.w-full h3 {
    margin-bottom: 0;
}
.timeline-content.flex .img{
  width: clamp(10rem, 20vw, 15.8125rem);
}

.timeline-content h3 {
  margin: 0 0 0.5rem 0;
}

/* スマホ対応：横並びを維持しつつフォントサイズを調整 */
@media (max-width: 768px) {
  .bg_GRAY {
    padding: 5%;  
  }
  .timeline-item {
    gap: 1.5rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
    display: block;
  }
  .timeline-date::before {
    width: 2rem;
  }
  .timeline-date::after {
    left: calc(-2rem - 6px) !important;
  }
  .timeline-content.flex .text{
    width: 100%;
  }
  .timeline-content.flex .text h3{
    text-align: left;
  }
  .timeline-content.flex .img{
    width: 100%;
    margin-top: 2rem;
  }
  .timeline-content.flex .img img{
    width: 100%;
  }
  #about .bg_wave::before {
    right: -1rem !important;
    top: 3rem;
    background-position: right top;
}
  #about .bg_wave::after {
    left: 0;
    background-position: left bottom .5rem;

  }
  .about-slider-container {
    display: block;
  }
  .about-slider-box,
  .content-box{
    width: 100%;
  }
}