@charset "UTF-8";
/* 繝吶�繧ｹ繧ｹ繧ｿ繧､繝ｫ */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* 繧ｿ繝悶Γ繝九Η繝ｼ */
.tab-container {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    padding: 10px 0;
}
.tab {
    padding: 3px 20px;
    margin-right: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
    color: white;
}
.tab:nth-child(1) { background: #ff6666; }
.tab:nth-child(2) { background: #ffcc66; }
.tab:nth-child(3) { background: #66cc66; }
.tab:nth-child(4) { background: #66cccc; }
.tab.active {
    background: white;
    border: 2px solid #ccc;
    border-bottom: none;
    color: black;
}

/* 繧ｳ繝ｳ繝�Φ繝��鄂ｮ */
.content-wrapper {
    flex: 1;
    padding-top: 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
}
.tab-content {
    display: none;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.tab-content.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* 2繧ｫ繝ｩ繝 繝ｬ繧､繧｢繧ｦ繝茨ｼ医Γ繧､繝ｳ + 繧ｵ繧､繝峨ヰ繝ｼ�� */
.two-column-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

/* HOME繧ｿ繝門ｰら畑縺ｮ繝｡繧､繝ｳ繧ｨ繝ｪ繧｢�域ｨｪ蟷�ｒ繧ｵ繧､繝峨ヰ繝ｼ縺ｨ蛻�¢蜷医≧�� */
.main-area {
    flex: 3;
    height: 100%;
}
.main-area iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 蜿ｳ繧ｵ繧､繝峨ヰ繝ｼ */
.sidebar {
    flex: 1;
    max-width: 350px;
    min-width: 250px;
    background: #f0f0f0;
    border-left: 2px solid #ccc;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; /* 繧ｵ繧､繝峨ヰ繝ｼ蜀�Κ縺ｮ縺ｿ邵ｦ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧定ｨｱ蜿ｯ */
}
.sidebar-item {
    flex: 1;
    min-height: 200px;
    background: white;
    border: 1px solid #bbb;
}
.sidebar-item iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 莉悶�騾壼ｸｸ繧ｿ繝也畑�亥�髱｢縺�▲縺ｱ縺�↓陦ｨ遉ｺ縺吶ｋ縺溘ａ縺ｮ繧ｹ繧ｿ繧､繝ｫ�� */
.tab-content > iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 導 繧ｹ繝槭�繝ｻ逕ｻ髱｢蟷�′迢ｭ縺�凾縺ｮ繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢懶ｼ�OME繧ｿ繝門��� */
@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column;
        overflow-y: auto; /* 蜈ｨ菴薙せ繧ｯ繝ｭ繝ｼ繝ｫ繧定ｨｱ蜿ｯ縺励※繧ｵ繧､繝峨ヰ繝ｼ繧剃ｸ九∈騾√ｋ */
    }
    body {
        overflow-y: auto;
    }
    .main-area {
        height: 70vh; /* 繧ｹ繝槭�譎ゅ�繝｡繧､繝ｳ繧ｳ繝ｳ繝�Φ繝��鬮倥＆繧貞崋螳夂｢ｺ菫� */
        flex: none;
    }
    .sidebar {
        max-width: 100%;
        min-width: 100%;
        border-left: none;
        border-top: 2px solid #ccc;
        height: auto;
        overflow-y: visible;
    }
    .sidebar-item {
        height: 250px; /* 繧ｹ繝槭�縺ｧ邵ｦ縺ｫ荳ｦ繧薙□髫帙�蜷�ヵ繝ｬ繝ｼ繝 縺ｮ鬮倥＆ */
    }
}

/* 枠全体をリンクボタンにする設定 */
.sidebar-item .profile-link-block {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* 文字の下線を一旦消す */
    background-color: #f7f9fa; /* 💡フレーム内のうっすらとした背景色 */
    transition: background-color 0.2s;
}

/* マウスを乗せたときに少し暗くしてクリックできることを伝える */
.sidebar-item .profile-link-block:hover {
    background-color: #eef2f5;
}

/* 中身の配置調整 */
.sidebar-item .profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;      /* 左右中央揃え */
    justify-content: center;  /* 上下中央揃え */
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* 💡画像を丸く切り抜くための外枠フレーム */
.sidebar-item .avatar-frame {
    width: 110px;             /* 円のサイズ（お好みで調整してください） */
    height: 110px;            /* 横幅と同じにする */
    border-radius: 50%;       /* 正円にする設定 */
    overflow: hidden;         /* 円からはみ出た部分を非表示にする */
    margin-bottom: 12px;
    background-color: white;  /* 画像の背景を白にして綺麗に見せる */
    border: 2px solid #ddd;   /* うっすらとした枠線 */
}

/* 外枠に合わせて画像をぴったり収める */
.sidebar-item .avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 縦横比を崩さずに円にフィットさせる */
}

/* 「プロフィール」の文字の見た目 */
.sidebar-item .profile-text {
    color: #0066cc;
    text-decoration: underline; /* 文字には下線をつける */
    font-size: 14px;
    font-weight: bold;
}