/* myblog/templates/myblog/site-boss.html */


/* ==========================
   プロフィール Header
========================== */
/* Header 全体のスタイリング */
#profile-boss-header {
    background-color: #f9f9f9; /* 背景色 */
    margin-top: 6px; /* 上の余白を追加 */
    margin-bottom: 6px; /* 下の余白を追加 */
}
/* Header コンテナのスタイリング */
#profile-boss-header .container {
    padding: 0.5rem; /* 内側余白を追加 */
}
/* Header テキスト部分 */
#profile-boss-header .header-title {
    font-size: 2rem; /* テキストのサイズ */
    margin: 0; /* 上下余白をリセット */
    color: #010101; /* テキストカラー */
    font-weight: 600; /* 強調 */
}
/* Header プロフィール画像 */
#profile-boss-header .profile-image {
    max-width: 200px; /* 最大幅 */
    max-height: 400px; /* アスペクト比を維持 */
    border-radius: 90%; /* 完全に丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
/* Header プロフィール画像のホバー効果 */
#profile-boss-header .profile-image:hover {
    transform: scale(1.1); /* 少し拡大 */
}
/* ==========================
   プロフィール 内容
========================== */
/* プロフィール　リストのスタイル */
ol.list-unstyled {
    padding-left: 5px;
}
ol.list-unstyled li {
    margin-bottom: 5px;
}
/* プロフィール　背景スタイル */
.profile-text-section {
    background-color: #f0eff0; /* 明るいグレーで背景を区別 */
    padding: 10px; /* テキストの周りに余白を追加 */
    border-radius: 10px; /* 少し丸みをつける */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}
/* プロフィール　h3タグ の文字サイズを調整 */
.profile-text-section h3 {
    font-size: 2.0rem; /* サイズを小さく設定 */
    font-weight: bold; /* 見出しを強調 */
    color: #333; /* テキストカラーをやや濃く */
}
/* プロフィール　h3タグ の画像（アイコン） */
.profile-text-section h3 img.profile-image {
    max-width: 50px; /* 最大幅 */
    max-height: 50px; /* アスペクト比を維持 */
    border-radius: 90%; /* 完全に丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    transition: transform 0.3s ease; /* ホバー時のアニメーション */
}
/* プロフィール　h3タグ の画像：ホバーアニメーション */
.profile-text-section h3 img.profile-image:hover {
    transform: scale(1.1);
}

/* ==========================
   レスポンシブ調整
========================== */
/* スマホ画面: max-width: 767px */
@media (max-width: 767px) {
    /* プロフィールセクションの背景スタイル */
    .profile-text-section {
        padding: 8px; /* スマホでは余白を少し狭く */
    }
    /* 管理者(#プロフィール) */
    #profile-boss-header .header-title {
        font-size: 1.25rem; /* テキストのサイズ */
        margin: 0; /* 上下余白をリセット */
        color: #010101; /* テキストカラー */
        font-weight: 600; /* 強調 */
    }
    /* h3タグの文字サイズを調整 */
    .profile-text-section h3 {
        font-size: 1.5rem; /* サイズを小さく設定 */
        font-weight: bold; /* 見出しを強調 */
        color: #333; /* テキストカラーをやや濃く */
    }
    /* h3タグ内の p タグの文字サイズを調整 */
    .profile-text-section p {
        font-size: 0.65rem; /* スマホ画面用に小さく設定 */
    }
    /* <ol>内の<li>タグの文字サイズを調整 */
    .profile-text-section ol li {
        font-size: 0.7rem; /* サイズを小さく設定 */
    }
}