@charset "utf-8";

/* ===== 2コラムレイアウトの基本設定 ===== */
.sidebar {
    box-sizing: border-box;
    padding: 15px 0;
    min-height: 400px;
    overflow: visible;
    /* z-index: 1; */
    position: sticky;
    top: 220px;
    
}
/* 画面幅768px以上の場合のスタイル */
.two-column {
    display: flex;
    flex-direction: row;
    flex: 1;

}
.main-inner {
    display: flex;
    flex-direction: column;
    
}
.sidebar {
    width: 300px;
    position: sticky;
    top: 20px; /* 固定位置を調整 */
}
.sidebar-tab-buttons {
    gap: 10px; /* タブ間の隙間を広げる */
}
.sidebar-tab-button {
    flex: 1 0 calc(30% - 10px); /* タブを横に広げる */
}
.sidebar-tab-wrapper {
    position: relative;
    width: 100%;
    padding-left: 5px; /* 左側に余白を追加 */
    padding-right: 5px; /* 右側に余白を追加 */
}
.sidebar-tab-container {
    display: flex;
    flex-direction: column;
}

.sidebar-tab-buttons {
    display: flex; 
    flex-wrap: wrap;
    background-color: #D6E5F5;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 10px;
    justify-content: flex-start; /* 左寄せ */
    gap: 3px; /* ボタン間の隙間 */
    padding: 5px 5px 5px 5px; /* 左側に余白を追加 */
    position: relative;
}
.sidebar-tab-buttons .caption {
    position: absolute;
    top: -30px; /* ボタンと重ならないように */
    left: 10px;
    font-size: 1em;
    font-weight: bold;
    padding: 2px 8px;
    background-color: #fff;
    border-radius: 5px;
}
.sidebar-tab-buttons.active {
    display: flex; /* トグルで表示する */
}
.sidebar-tab-button {
    flex: 1 1 calc(33.33% - 5px); /* 1行に4つのタブを並べる */
    padding: 5px; /* コンパクトに */
    font-size: 12px; /* 文字サイズを小さく */
    text-align: center;
    background-color: #fff;
    border: 2px solid #191d88;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    color: #191d88;
    border-radius: 30px;
    white-space: nowrap;
    font-weight: bold;
}
.sidebar-tab-button.hover {
    background-color: #1450a3; /* アクティブタブの背景色 */
    color: #fff;
    font-weight: bold;
    border: 2px solid #1450a3;
}

.sidebar-tab-button.active {
    background-color: #1450a3; /* アクティブタブの背景色 */
    color: #fff;
    font-weight: bold;
    border: 2px solid #1450a3;
    /*box-shadow: 0 0 8px rgba(0, 123, 255, 0.8); /* 輪郭を強調 */
}

.sidebar-tab-button.completed {
    background-color: #191d88; /* 入力完了タブの色 */
    color: #fff;
    font-weight: normal;
}

.sidebar-tab-button.active.completed {
    background-color: #1450a3; /* アクティブかつ入力完了タブの色 */
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px #1450a3; /* 緑の輪郭を追加 */
}

.input-tab-content {
    display: none;
    padding: 10px;
    
}

.input-tab-content.active {
    display: block;
}

/* タブとタブの間の余白を追加 */
.sidebar-tab-button:not(:last-child) {
    margin-right: 0;
}

.active-tab-button {
    width: 100%;
    background-color: #6e84e9;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    font-weight: bold;
}

.active-tab-button:hover {
    background-color: #6e84e9;
}

#active-tab {
    display: block;
    position: relative;
    width: 100%;
    background-color: transparent; /* 背景を透明にする */
    padding: 10px;
    font-weight: bold;
    font-size: 18px; /* 見出しらしいフォントサイズ */
    text-align: center;
    border: none;
    cursor: default;
    text-decoration: none; /* 下線をなくす */
}

/* 完了時のスタイル */
#active-tab.completed::after {
    content: "✔"; /* 完了時のマーク */
    color: #28a745; /* 緑色（明るめの緑で目立つ） */
    font-weight: bold; /* チェックマークを強調 */
    margin-left: 10px; /* 表題との間にスペース */
    font-size: 20px; /* チェックマークを少し大きめに */
    vertical-align: middle; /* 表題とマークを中央揃え */
}
/* タブ切り替えボタン */
#toggle-tabs {
    display: block;
    background-color: #6e84e9;
    color: white;
    padding: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-bottom: 5px;
    text-align: center;
    font-weight: bold;
}


/* ====== サイドバーの選択フォーム部分 ====== */
form.selectbox {
    overflow-y: scroll; /* スクロールバーを有効化 */
    /* max-height: 90vh; /* 画面高さに応じた最大表示範囲 */
    padding-right: 10px; /* スクロールバーの重なり防止 */
    scrollbar-width: thin; /* スクロールバーを細く */
    height: 100;
    position: sticky;
    top: 120px;
    margin-top: 100px;
}
.selectbox {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: 90vh; /* 画面の高さの90%に制限 */
    margin-left: 0;
    box-sizing: border-box;
    border: 1px solid #859dcc;
    background: #fff;
    overflow-y: scroll; /* 縦スクロールを有効化 */
    overflow-x: hidden; /* 横スクロールバーを非表示にする */

    scrollbar-width: thin; /* スクロールバーの幅を小さくする (Firefox用) */
    scrollbar-color: #ccc #fff; /* スクロールバーの色を指定 (Firefox用) */
}
/* Webkit系ブラウザ (Chrome, Edge, Safari) のスクロールバー */
.selectbox::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
}

.selectbox::-webkit-scrollbar-thumb {
    background-color: #ccc; /* スクロールバーの色 */
    border-radius: 4px; /* 丸みをつける */
}

.selectbox::-webkit-scrollbar-thumb:hover {
    background-color: #bbb; /* ホバー時の色 */
}

.selectbox::-webkit-scrollbar-track {
    background-color: #fff; /* スクロールバーの背景色 */
}
/* ====== メインエリアの結果表示部分 ====== */
.main-inner {
    flex: 1;
    box-sizing: border-box;
    padding: 15px 0;
    /* width: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); */

}

/* .afi-example {
    display: block;
    box-sizing: border-box;
    border: 1px solid #859dcc;
    margin-top: 30px;
    height: 80px;
    background: #fff;
} */

.cover_type{
    flex-wrap: wrap; 
}