/* ==========================================================
   two-pillars.css
   ========================================================== */

/* ----------------------------------------
   セクション全体
   ---------------------------------------- */
.p-two-pillars {
  /* ページ先頭の開始間隔（上側）は共通CSS（customize.css の .p-page-bg padding-block-start /
     --page-content-gap）で一元管理。下側（次セクション前の余白）はページ内部の指定として維持。 */
  padding-block-end: 6rem;
}

/* ----------------------------------------
   イントロ
   ---------------------------------------- */
.p-two-pillars__intro {
  margin-block-end: 4rem;
}

.p-two-pillars__ttl {
  text-align: left;
  margin-block-end: 2rem;
}

/* .p-two-pillars__ttl .c-ttl__en の display は共通 .c-ttl__en (block) と同値のため削除 */

.p-two-pillars__ttl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-start: 0.5rem;
  flex-wrap: wrap;
}

.p-two-pillars__ttl .c-ttl__ja {
  display: inline;
  font-size: 1rem;
  line-height: 1.4;
}

.p-two-pillars__ttl-row .c-ttl__dots {
  display: flex;
  align-items: center;
  /* デフォルトの margin-block: 1em をフル上書き */
  margin: 0;
  margin-block: 0;
  padding: 0;
  line-height: 1;
  transform: translateY(7px);
}

.p-two-pillars__ttl-row .c-ttl__dots span {
  display: block;
  flex-shrink: 0;
}

.p-two-pillars__lead {
  font-size: 2rem;
  font-weight: 700;
  color: var(--font-color-03);
  line-height: 1.5;
  margin-block: 0 3.25rem;
}

.p-two-pillars__body {
  font-size: 1rem;
  color: var(--font-color-03);
  line-height: 1.8;
  margin-block: 0 5.25rem;
}

/* ----------------------------------------
   各セクション（ストーリー・リズムストーリー）
   ---------------------------------------- */
.p-two-pillars__section {
  margin-block-start: 3.5rem;
}

.p-two-pillars__section.--rhythm {
  margin-block-start: 8.75rem; /* 140px */
}

/* サブタイトル（Outline subtitle と同スタイル） */
.p-two-pillars__subtitle {
  font-size: 1.6875rem;
  font-weight: 700;
  color: var(--font-color-03);
  padding-left: 20px;
  border-left: 3px solid var(--font-color);
  margin-block: 0 2.5rem;
}

/* ----------------------------------------
   左右カラム
   ---------------------------------------- */
.p-two-pillars__cols {
  display: flex;
  align-items: stretch;
  gap: 3.5%;
}

/* ----------------------------------------
   画像エリア（左）
   ---------------------------------------- */
.p-two-pillars__img-wrap {
  flex: 0 0 47.5%;
  border-radius: 20px;
  overflow: hidden;
}

.p-two-pillars__img {
  display: none;
  width: 100%;
  height: auto; /* 画像比率そのまま・トリミングなし */
}

.p-two-pillars__img.is-active {
  display: block;
  animation: tp-slide-up 0.55s ease;
}

@keyframes tp-slide-up {
  from { transform: translateY(16px); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1;   }
}

/* ----------------------------------------
   カード（右）
   ---------------------------------------- */
.p-two-pillars__card {
  flex: 1;
  background-color: #82BEDF;
  border-radius: 10px;
  padding: 2.5rem 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  min-height: 400px;
}

/* ----------------------------------------
   スライドコンテンツ
   ---------------------------------------- */
.p-two-pillars__slide {
  display: none;
}

.p-two-pillars__slide.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-block-end: 100px; /* PC: カードフッターとの間隔 */
}

.p-two-pillars__card-body {
  flex: 1;
}

.p-two-pillars__card-ttl {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  margin-block: 0 1.25rem;
}

.p-two-pillars__card-body p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #fff;
  margin-block: 0 1em;
}

.p-two-pillars__card-body p:last-child {
  margin-block-end: 0;
}

/* ----------------------------------------
   カードフッター（ラベル + ドット）
   ---------------------------------------- */
.p-two-pillars__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 1.5rem;
  flex-shrink: 0;
}

.p-two-pillars__card-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.05em;
}

/* ドットボタン */
.p-two-pillars__dots {
  display: flex;
  gap: 0.5rem;
}

.p-two-pillars__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.p-two-pillars__dot.is-active {
  background: #fff;
}

/* ----------------------------------------
   SP（768px以下）
   ---------------------------------------- */
@media (max-width: 768px) {
  .p-two-pillars__slide.is-active {
    margin-block-end: 0; /* SP はマージン不要 */
  }

  /* JAの文字サイズ・上マージンが下層ページ共通CSS（customize.css）で変わったため、
     PC向けに調整されていたtransform: translateY(7px)（JAとの縦中央を合わせるための
     オフセット）がJAより下にズレる原因になった。SPのみtransformを打ち消し、
     align-items:centerの自然な縦中央揃えに任せる（PCのtranslateY(7px)は変更しない）。 */
  .p-two-pillars__ttl-row .c-ttl__dots {
    transform: none;
  }

  .p-two-pillars {
    padding-block-end: 4rem;
  }

  .p-two-pillars__intro {
    margin-block-end: 2.5rem;
  }

  .p-two-pillars__lead {
    font-size: 1.375rem;
    margin-block: 0 2.25rem;
  }
    .p-two-pillars__body {
      margin-block: 0;
    }
  .p-two-pillars__section {
    margin-block-start: 2.5rem;
  }

  .p-two-pillars__section.--rhythm {
    margin-block-start: 4rem;
  }

  .p-two-pillars__subtitle {
    font-size: 1.25rem;
    margin-block: 0 2rem;
 }

  .p-two-pillars__cols {
    flex-direction: column;
    gap: 0;
  }

  .p-two-pillars__img-wrap {
    flex: none;
    width: 100%;
    border-radius: 16px;
    margin-block-end: 1.25rem;
  }

  .p-two-pillars__card {
    flex: none;
    width: 100%;
    padding: 1.75rem 1.25rem 1.25rem;
    min-height: auto;
  }

  .p-two-pillars__card-ttl {
    font-size: 1.0625rem;
  }

  .p-two-pillars__card-body p {
    font-size: 0.875rem;
  }
}