/* ==========================================
   国際尚礼会 公式スタイルシート
   最終更新: 2026.02.13 (CIRB第3次修正版)
   ========================================== */

/* ナビゲーションアンダーバー */
.nav-item::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d4af37;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-item:hover::after {
  width: 100%;
}

/* メインビジュアル文字装飾 */
.stylized-text {
  background: linear-gradient(to bottom, #d4af37 20%, #b8860b 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  position: relative;
  display: inline-block;
  padding: 0 10px;
}
.stylized-text::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d4af37;
  opacity: 0.6;
}

/* 麻の葉（あさのは）模様背景 */
.asanoha-pattern {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'%3E%3Cpath d='M0 0 L40 23 L80 0 M0 46 L40 23 L80 46 M40 23 L40 69 M0 46 L0 92 L40 115 L80 92 L80 46 M0 92 L40 69 L80 92 M40 69 L40 115 M0 138 L40 115 L80 138' fill='none' stroke='%23ea1c16' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");
}

/* 麻の葉模様背景 - ダーク */
.asanoha-pattern-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='138' viewBox='0 0 80 138'%3E%3Cpath d='M0 0 L40 23 L80 0 M0 46 L40 23 L80 46 M40 23 L40 69 M0 46 L0 92 L40 115 L80 92 L80 46 M0 92 L40 69 L80 92 M40 69 L40 115 M0 138 L40 115 L80 138' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 138px;
}

/* 市松（いちまつ）模様背景：標準 */
.ichimatsu-pattern {
  background-image:
    linear-gradient(
      45deg,
      #0000000a 25%,
      transparent 25%,
      transparent 75%,
      #0000000a 75%,
      #0000000a
    ),
    linear-gradient(
      45deg,
      #0000000a 25%,
      transparent 25%,
      transparent 75%,
      #0000000a 75%,
      #0000000a
    );
  background-size: 40px 40px;
  background-position:
    0 0,
    20px 20px;
}

/* 市松グラデーション背景 (ヒーロー用修正版): 明瞭性を向上 */
.ichimatsu-gradient-dark {
  background-color: #262626; /* 真っ黒から消炭色へ */
  background-image:
    linear-gradient(135deg, rgba(38, 38, 38, 0.4) 0%, rgba(20, 20, 20, 1) 100%),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 75%,
      rgba(255, 255, 255, 0.1)
    ),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 75%,
      rgba(255, 255, 255, 0.1)
    );
  background-size:
    100% 100%,
    60px 60px,
    60px 60px;
  background-position:
    0 0,
    0 0,
    30px 30px;
}

/* 波（Wave）アニメーション */
.waves > use {
  animation: wave-move 20s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
@keyframes wave-move {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* フェードアップ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.9s ease-out;
}
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* 上下浮遊アニメーションの定義 */
@keyframes floating {
  0% {
    transform: translateY(0) rotate(3deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
  100% {
    transform: translateY(0) rotate(3deg);
  }
}

/* クラスへの適用 */
.floating-img {
  animation: floating 4s ease-in-out infinite;
}

/* 内規用 */
#rules {
  margin-bottom: 30px;
}

#rules p {
  font-size: 15px;
  line-height: 1.7em;
  text-align: justify;
}

#rules p.chapter {
  font-weight: bold;
  margin: 1em 0;
  padding-left: 5em;
}

#rules p.setsu {
  font-weight: bold;
  padding-left: 8em;
}

#rules p.kan {
  font-weight: bold;
  padding-left: 11em;
}

#rules p.honbun {
  margin-left: 1em;
  text-indent: -1em;
}

#rules p.gou {
  margin-left: 2em;
  text-indent: -1em;
}

#rules p.iroha {
  margin-left: 2em;
  text-indent: -1em;
}

@media (max-width: 1000px) {
  #rules p {
    font-size: 14px;
  }
}