/**
 * Section Title with Rotating Stamp Styles
 * シンプルなタイトル+回転画像コンポーネント
 */

/* コンテナ */
.section-title-stamp-container {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  text-align: left;
}

/* タイトル */
.section-title-stamp-container .section-title {
  font-family: Hiragino Kaku Gothic StdN;
  font-size: 80px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  color: rgba(0, 87, 172, 1);
  position: relative;
  z-index: 2;
  margin: 0;
}

/* 回転する画像 */
.section-title-stamp-container .section-stamp {
  width: 285px;
  height: auto;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* 他の要素が被ることができるように低く設定 */
  animation: rotate360 7s linear infinite;
}

/* 回転アニメーション */
@keyframes rotate360 {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .section-title-stamp-container {
    padding: 60px 20px;
  }

  .section-title-stamp-container .section-title {
    font-size: 60px;
  }

  .section-title-stamp-container .section-stamp {
    width: 180px;
    right: 10px;
  }
}

@media screen and (max-width: 500px) {
  .section-title-stamp-container {
    padding: 40px 20px;
  }

  .section-title-stamp-container .section-title {
    font-size: 50px;
  }

  .section-title-stamp-container .section-stamp {
    width: 150px;
    right: 5px;
  }
}

/* オプション: タイトルカラーバリエーション */
.section-title-stamp-container.title-white .section-title {
  color: #ffffff;
}

.section-title-stamp-container.title-dark .section-title {
  color: #091142;
}

.section-title-stamp-container.title-blue .section-title {
  color: rgba(0, 87, 172, 1);
}

/* オプション: 背景バリエーション */
.section-title-stamp-container.bg-gradient {
  background: linear-gradient(180deg, #FFF 0%, #D9E5EE 100%);
}

.section-title-stamp-container.bg-transparent {
  background: transparent;
}