/* --- 「スピリチュアルメッセージ」タグ専用CSS (spiritual-message.css) --- */
.spiritual-message-box {
  background: linear-gradient(to bottom, #f7faff, #eef6ff);
  border: 1px solid #d0e3ff;
  border-left: 5px solid #a0c4ff;
  border-radius: 8px;
  margin: 2.5em 0;
  padding: 30px 35px 25px 35px;
  position: relative;
  box-shadow: 0 10px 25px rgba(173, 216, 230, 0.3);
  overflow: hidden;
}

.spiritual-message-box::before {
  content: '“';
  font-family: 'Georgia', serif;
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 6em;
  color: #e3f2fd;
  z-index: 1;
}

.spiritual-message-box p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.9;
  color: #1a237e;
  font-style: italic;
  position: relative;
  z-index: 2;
}

.spiritual-message-attribution {
  text-align: right;
  margin-top: 20px;
  font-size: 0.9em;
  color: #5c6bc0;
  font-style: normal;
}

/* --- モーダルウィンドウのスタイル --- */
.sacred-modal {
display: none; /* 初期状態では非表示 */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(13, 71, 161, 0.7); /* 背景を暗くするオーバーレイ */
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
}
.sacred-modal-content {
background: linear-gradient(145deg, #ffffff, #e3f2fd);
margin: auto;
padding: 30px;
border: 1px solid #90caf9;
width: 90%;
max-width: 500px;
border-radius: 16px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
position: relative;
animation: fadeIn 0.5s ease-in-out;
}
.sacred-modal-close {
color: #90caf9;
position: absolute;
top: 10px;
right: 20px;
font-size: 32px;
font-weight: bold;
cursor: pointer;
transition: color 0.2s;
}
.sacred-modal-close:hover {
color: #1e88e5;
}
.sacred-modal-title {
font-size: 1.8em;
font-weight: bold;
color: #1565c0;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #90caf9;
}
.sacred-modal-description {
font-size: 1.1em;
line-height: 1.8;
color: #333;
}
@keyframes fadeIn {
from {opacity: 0; transform: scale(0.9);}
to {opacity: 1; transform: scale(1);}
}

/* --- アコーディオンのスタイル --- */
.sacred-accordion-interactive {
margin: 2.5em 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #b3e5fc;
box-shadow: 0 10px 35px rgba(179, 229, 252, 0.5);
}
.sacred-accordion-interactive details {
border-bottom: 1px solid #b3e5fc;
}
.sacred-accordion-interactive details:last-child {
border-bottom: none;
}
.sacred-accordion-interactive summary {
display: block;
cursor: pointer;
padding: 22px 30px;
background: linear-gradient(135deg, #4fc3f7, #29b6f6);
color: white;
font-size: 1.4em;
font-weight: bold;
letter-spacing: 0.1em;
position: relative;
outline: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: background 0.3s;
}
.sacred-accordion-interactive summary:hover {
background: linear-gradient(135deg, #29b6f6, #03a9f4);
}
.sacred-accordion-interactive summary::-webkit-details-marker {
display: none;
}
.sacred-accordion-interactive summary::after {
content: '＋';
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
font-size: 1.3em;
font-weight: 300;
transition: transform 0.3s ease-in-out;
}
.sacred-accordion-interactive details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.accordion-content-interactive {
background: #f4faff;
padding: 30px 25px;
}
.keyword-category-interactive {
font-weight: bold;
color: #1e88e5;
margin: 0 0 18px 0;
font-size: 1.2em;
padding-bottom: 8px;
border-bottom: 2px solid #90caf9;
}
.keyword-tags-interactive {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.keyword-tag-interactive {
background-color: #ffffff;
color: #0d47a1;
padding: 7px 15px;
border-radius: 20px;
border: 1px solid #90caf9;
font-size: 0.9em;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.keyword-tag-interactive:hover {
transform: translateY(-2px);
background-color: #e3f2fd;
border-color: #42a5f5;
box-shadow: 0 4px 10px rgba(66, 165, 245, 0.2);
}

/* 🌕 光の象徴 */
p.keyword-category-interactive.category-light::before {
  content: '🌕';
  margin-right: 8px;
}

/* 🌑 影の象徴 */
p.keyword-category-interactive.category-shadow::before {
  content: '🌑';
  margin-right: 8px;
}

/* 🌀 魂のステージ */
p.keyword-category-interactive.category-soul::before {
  content: '🌀';
  margin-right: 8px;
}
.sacred-accordion-interactive summary {
  padding: 18px 30px; /* 少しパディングを調整 */
}
.accordion-title-main {
  font-size: 1.2em; /* メインタイトル */
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.accordion-title-sub {
  font-size: 0.7em; /* サブタイトル */
  font-weight: normal;
  letter-spacing: normal;
  opacity: 0.9;
}
/* --- 7. 神託メッセージボックス内 ルビ（ふりがな）スタイル --- */
.spiritual-message-box rt {
  font-size: 50%; /* 親文字に対して、半分のサイズに */
  font-style: normal; /* 斜体ではなく、通常の書体で読みやすく */
  color: #5c6bc0; /* 親文字より、少しだけ淡い色に */
  opacity: 0.9;
}
.spiritual-word {
  text-decoration: underline; /* 下線を引く */
  text-decoration-style: dotted; /* 点線の下線で、押し付けがましくなく */
  text-decoration-color: #7986cb;
  cursor: pointer; /* カーソルを合わせた時に、指の形に変わる */
  transition: all 0.2s ease-in-out;
}
.spiritual-word:hover {
  color: #3f51b5;
  background-color: rgba(227, 242, 253, 0.7); /* ホバー時に、ごく薄い背景色を付ける */
}