/* ===============================================
	歌詞や俳句などのHTML用
   サンディさんの紹介エリア
=============================================== */
/* アイコンとテキストを横並びにするための設定 */
.sandy-intro {
    display: flex; /* Flexboxレイアウトを有効にする */
	flex-direction: row-reverse !important;	/* 右に配置 */
    align-items: center; /* アイテムを垂直方向の中央に揃える */
    gap: 20px; /* アイコンとテキストの間に20pxの間隔を空ける */
    margin: 20px 0; /* 上下に20px、左右に0の余白を設ける */
    padding: 15px; /* 内側の余白 */
    border-radius: 8px; /* 角を少し丸くする */
    background-color: wheat !important;  /*サンディさんエリアの背景色*/

}

/* サンディさんのアイコン画像のための設定 */
.sandy-icon {
    width: 120px; /* アイコンの幅を120pxに指定 */
    height: auto; /* 高さは幅に合わせて自動調整 */
    flex-shrink: 0; /* コンテナが小さくなっても画像が縮まないようにする */
}

/* ===============================================
   歌詞エリア
=============================================== */
.lyrics-container {
    margin-top: 30px; /* 画像との間に余白を設ける */
}

.lyrics {
    text-align: center; /* 歌詞を中央揃えにする */
    line-height: 2;   /* 行間を広げて読みやすくする */
}

.lyrics p {
    margin-bottom: 1.5em; /* 各番の歌詞の間に少し余白を設ける */
}

.credits {
    text-align: right; /* 作詞・作曲者名を右揃えにする */
    margin-top: 20px;
    font-size: 0.9em;
    color: #555;
}

/* ===============================================
   その他
=============================================== */
.card-image-large {
    display: block; /* ブロック要素として扱う */
    margin: 20px auto; /* 上下左右の余白を自動で調整し、中央に配置 */
    max-width: 100%;   /* 親要素の幅に合わせて最大幅を100%にする */
    height: auto;      /* 高さは自動調整 */
    border-radius: 8px; /* 画像の角を少し丸くする */
}