/* 親要素のスタイル */
.director_greeting {
    display: flex;
    flex-direction: column;
    /* 縦方向に並べる */
    align-items: center;
    /* 子要素を水平方向に中央揃え */
    justify-content: center;
    /* 子要素を垂直方向に中央揃え */
    background-color: #f9f9f9;
    /* 背景色 */
    border: 1px solid #e0e0e0;
    /* 境界線 */
    border-radius: 10px;
    /* 角を丸める */
    padding: 20px;
    /* 内側の余白 */
    max-width: 800px;
    /* セクションの最大幅 */
    margin: 40px auto;
    /* 上下中央揃え */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* ソフトな影 */
    text-align: center;
    /* テキストを中央揃え */
}

.director_greeting p {
    font-size: 16px;
    /* テキストサイズ */
    line-height: 1.6;
    /* 行間 */
    word-wrap: break-word;
    /* 長い単語を折り返す */
    overflow-wrap: break-word;
}

/* 見出しのスタイル */
.director_greeting_cb_headline {
    font-size: 1.8rem;
    /* 見出しのフォントサイズ */
    font-weight: bold;
    color: #333333;
    /* 見出しの色 */
    margin-bottom: 15px;
    margin-top: 15px;
}

.director_greeting_cb_contents_inner {
    max-width: 100%;
    /* 親要素を超えないように設定 */
    width: 100%;
    /* 親要素に合わせる */
    box-sizing: border-box;
    /* パディングやボーダーを幅に含める */
    margin: 0 auto;
    /* 中央揃え */
    text-align: center;
    /* テキストの中央揃え */
    display: flex;
    /* Flexbox を適用 */
    flex-direction: column;
    /* 縦方向に並べる */
    align-items: center;
    /* 水平方向の中央揃え */
    justify-content: center;
    /* 垂直方向の中央揃え */
}

/* 挨拶メッセージ */
.director_greeting_greeting_message {
    font-size: 1rem;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
    /* テキストの中央揃え */
}

/* 画像のスタイル */
.director_greeting_director_image img {
    display: block;
    max-width: 150px;
    /* 画像の最大幅 */
    width: 100%;
    height: auto;
    /* アスペクト比を維持 */
    border-radius: 50%;
    /* 画像を丸くする */
    margin: 20px auto;
    /* 中央揃え */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff;
    /* 画像の境界線 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .director_greeting {
        padding: 15px;
        /* 余白を少し小さめに */
        max-width: 95%;
        /* 幅をさらに広げる */
    }

    .director_greeting p {
        padding: 10px;
        /* 内側余白を追加 */
        font-size: 14px;
        /* 文字サイズを調整 */
        word-wrap: break-word;
        /* テキストを折り返し */
        overflow-wrap: break-word;
    }

    .director_greeting .cb_headline {
        font-size: 1.5rem;
        /* 見出しを少し小さめに */
    }

    .director_greeting .greeting_message {
        font-size: 0.9rem;
        /* メッセージも縮小 */
    }


}