@charset "utf-8";

/*====================
ページベース変更
====================*/
.st-container{
  position: relative;
  padding: 100px 0 0;
  background-image: linear-gradient(135deg, #e7cda9, #c4baac 8%, #738eb2 20%, #567eb4 35%, #446a9e 50% 55%, #35598c 65%, #294c7e 80%, #284b7d);
  width: 100%;
  max-width: 100%;

}
.support-title{
  color: #FFF;
  border-bottom: 1px solid #FFF;
}
.support-pankuzu p{
  color: #FFF;
}
.support-pankuzu a p{
  color: #FFF;
}
.support-pankuzu a:after{
  color: #FFF;
}
.support-title h1{
  color: #FFF;
}

/*====================
信用への取り組み
====================*/
.st-wrap{
  margin: 5rem auto;
  width: 80%;
}

.st-desc h2{
  font-size: 3rem;
  color: #FFF;
  font-family: "Noto Serif JP", sans-serif;
  line-height:2;
  text-align: center;
  margin-bottom: 5rem;
}

.st-desc p{
  font-size: 1rem;
  color: #FFF;
  font-family: "Noto Serif JP", sans-serif;
  line-height:2;
  text-align: center;
}

@media (max-width: 960px) {
  .st-wrap{
    margin: 3rem auto;
    width: 90%;
  }

  .st-desc h2{
    font-size: 1.5rem;
    color: #FFF;
    margin-bottom: 3rem;
  }
}

/* ====================
  基本変数
==================== */
:root {
  --numcards: 4;
  --card-top-offset: 3rem;
}

/* ====================
  全体ラッパー
==================== */
.st-cont {
  position: relative;
  margin: 8rem auto;
  padding: 3rem 0;
}

.st-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

@media (max-width: 960px) {
  .st-cont {
    position: relative;
    margin: 3rem auto;
    padding: 2rem 0;
  }
}

/* ====================
  カード一覧
==================== */
#cards {
  position: relative;
  list-style: none;
  padding-bottom: 5rem;

  /* sticky が止まるための高さ（最重要） */
  min-height: calc(
    (var(--numcards) * 100vh) +
    (var(--numcards) * var(--card-offset))
  );
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--numcards), var(--card-height));
  gap: var(--card-margin);
}

/* ====================
  各カード
==================== */
#card_1 { --index: 1; }
#card_2 { --index: 2; }
#card_3 { --index: 3; }
#card_4 { --index: 4; }

.card {
  position: sticky;
  top: 120px;
  height: 100%;
  background-color: transparent;
  border: none;
  /* 新しいカードほど上に */
  z-index: calc(10 + var(--index));
}

@media screen and (max-height: 760px) {
  .card {
    position: relative;
    top: auto;
    height: 100%;
    background-color: transparent;
    border: none;
    /* 新しいカードほど上に */
    z-index: calc(10 + var(--index));
  }
}

/* ====================
  カード中身
==================== */
.card__content {
  width: 60%;
  margin: 0 auto 1rem;
  padding: 1rem 5% 2rem;
  height: 600px;
  background: #fff;
  border-radius: 10px;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;

  box-shadow:
    0 0.2em 1em rgba(0, 0, 0, 0.1),
    0 1em 2em rgba(0, 0, 0, 0.1);

  transform-origin: 50% 0%;
  will-change: transform;
}

.card-btn {
    border-bottom: solid 1px #A9A9A9;
}

/* ====================
  テキスト
==================== */
.card__content h2 {
  font-size: 2rem;
  line-height: 1.5;
  color: #284B7D;
  font-family: "Noto Serif JP", sans-serif;
}

.card__content p {
  font-size: 14px;
  line-height: 1.5;
}

.card__content-st {
  font-size: 1.25rem;
  color: #284B7D;
  font-family: "Noto Serif JP", sans-serif;
}

/* ====================
  画像
==================== */
.card__content img {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* ====================
  スクロールドリブンアニメーション
==================== */
@supports (animation-timeline: works) {

  @scroll-timeline cards-scroll {
    source: selector(#cards);
    orientation: block;
  }

  .card {
    --index0: calc(var(--index) - 1);
    --reverse-index: calc(var(--numcards) - var(--index0));
    --reverse-index0: calc(var(--reverse-index) - 1);
  }

  .card__content {
    --duration: calc(var(--reverse-index0) * 1s);
    --delay: calc(var(--index0) * 1s);

    animation: scale linear forwards;
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timeline: cards-scroll;
  }

  @keyframes scale {
    to {
      transform: scale(
        calc(
          1.1 - (0.1 * var(--reverse-index))
        )
      );
    }
  }
}

/* ====================
  SP調整
==================== */
@media (max-width: 960px) {
  :root {
    --card-top-offset: 1.5rem;
  }

  .card__content {
    width: 90%;
    padding: 2rem .5rem;
    font-size: 12px;
    height: auto;
  }
  .card__content p {
    font-size: 12px;
  }

  .card__content h1 {
    font-size: 1.8rem;
  }
  
  .card__content h2 {
    font-size: 20px;
    line-height: 1.5;
    color: #284B7D;
    font-family: "Noto Serif JP", sans-serif;
  }
}