/* detailsの中にある、summary以外の要素に余白をつける */
details > *:not(summary) {
    margin-left: 20px; /* ここでずらす距離を調整 */
    padding: 10px;    /* 読みやすくするための内側の余白 */
    border-left: 2px solid #e6e6e6ed; /* 視覚的に「階層」とわかりやすくする線（任意） */
}

.summary-1 {
    cursor: pointer; 
    padding: 10px; 
    /*background: #F2F2F2;*/
    background: #f2f2f2b1;
    transition: background-color 0.2s;
}

.summary-1:hover {
    background-color: #b9dcf898;
    /*background-color: #e4edf5*/
}
.summary-2 {
    cursor: pointer; 
    padding: 10px;
    transition: background-color 0.2s;
}

.summary-2:hover {
    background-color: #b9dcf898;
    /*background-color: #e4edf5*/
}

.indented {
    padding-left: 30px; /* セクションの内側、左側に余白を作る */
    /*border-left: 2px solid #ccc;*/ /* 階層をわかりやすくするための装飾（任意） */
    /* 太さ 種類 色 (青色) */
    /* 角を少し丸くする（任意） */
}

.flex-container {
    /*margin-left: 20px;*/ /* ここでずらす距離を調整 */
    display: flex; /* 横並びにする魔法の言葉 */
    gap: 10px;     /* 要素同士の隙間を指定（便利！） */
    /*border: 1px solid #ccc;*/
    /*padding-left: 10px;*/
}
.item {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
}

.borderTopBlue {
    border-top: 1px solid #3498db;
}

.borderTopGray {
    border-top: 1px solid #ccc; 
    width: 40%;
}

.custom-table tr {
    height: 10px;
    /*background-color: #f9f9f9;*/
}


.custom-list {
    list-style: square;    /* 黒丸を消す */
    /*padding: 0*/;          /* デフォルトの余白をリセット */
    padding-left: 30px;
    /*width: 300px;*/
}

.custom-list li {
    padding: 5px;
    /*border-bottom: 1px solid #ddd;*/ /* 下線を入れる */
    transition: background-color 0.3s;
}


.custom-list a {
    /*color: #007bff;*/          /* 清潔感のある青 */
    display: block;         /* 行全体をクリック可能にする（おすすめ） */
    transition: background-color 0.3s;
}

.custom-list a:hover {
    cursor: pointer;
    color: #ff5722;         /* オレンジ色に変わる */
}



a.fancy-link {
    color: #333;
    text-decoration: none;
    position: relative;      /* 下線の位置の基準 */
    padding-bottom: 2px;
}

a.fancy-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;                /* 最初は幅0 */
    height: 2px;
    background: #ff4757;     /* 下線の色 */
    transition: width 0.3s;  /* 横幅の変化をアニメーションに */
}

a.fancy-link:hover::after {
    width: 100%;             /* ホバーで全開 */
}



.a-outline {
    display: inline-block;
    padding: 12px 24px;
    background-color: transparent;   /* 背景を透明にする */
    /*color: #28a745;*/                  /* 文字の色（緑） */
    /*color: #007bff;*/
    color: #2e8df3;
    text-decoration: none;
    /*border: 2px solid #28a745;*/       /* 枠線をつける */
    /*border: 2px solid #007bff;*/
    border: 2px solid #2e8df3;
    border-radius: 10px;             /* 完全に丸い角（カプセル型） */
    font-weight: bold;
    transition: all 0.3s ease;
}

/* マウスを乗せたとき（ホバー効果） */
.a-outline:hover {
    /*background-color: #28a745;*/      /* 背景色を満たす */
    /*background-color: #007bff;*/
    background-color: #2e8df3;
    color: #ffffff;                  /* 文字の色を白にする */
}

.a-disabled {
    display: inline-block;
    padding: 12px 24px;
    background-color: #dcdcdc; /* 薄いグレー */
    color: #888888;           /* 文字も薄いグレーにしてコントラストを下げる */
    text-decoration: none;    /* 下線を消す */
    border-radius: 10px;
    font-weight: bold;
    cursor: not-allowed;      /* マウスを乗せた時に「禁止マーク」を出す */
    pointer-events: none;     /* 重要：クリックイベントを完全に無効化する */
    border: 2px solid #cccccc; /* ぼんやりした枠線 */
}
.a-disabled:hover {
    /*background-color: #28a745;*/      /* 背景色を満たす */
    /*background-color: #007bff;*/
    background-color: #2e8df3;
    color: #ffffff;                  /* 文字の色を白にする */
}