@charset "UTF-8";

/*背景色*/
.bg{background-color: #ffedf3;overflow-y: scroll;}

/*学認マーク*/
.gakunin img{width:35px;height:35px;vertical-align: bottom;}

/*リンク*/
a{text-decoration: none;}
a:hover{color : #ff7043;}

/*説明文のフォント*/
.akamoji{
 color: #FF0000;
 }

/* 説明セル内の要素（<p>タグ）のマージンをリセット */
/* .description-text および .access-count-text の上下マージンを解除 */
.description-text,
.access-count-text {
    margin: 0;
}

/* タイトルと説明部分（header） */

header {
    width: 1000px;
    margin: 0 auto; /* 中央寄せ */
}

/* main */

main{
	background-color: #ffffff;
    width: 1000px;
    margin: 0 auto; /* 中央寄せ */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 影をつけて立体感を出す
}

/* カテゴリボタンコンテナ（表の一部として扱う） */
.category-buttons {
    width: 100%;
    margin: 0 auto; /* 中央寄せ */
    
     /* --- タブデザインの追加 --- */
    display: flex; /* ボタンを横に並べる */
    /* flex-wrap: wrap; 必要に応じて折り返し */
    /* border: 1px solid #ff82ac; 枠線をテーブルに合わせる */
     /* border-bottom: none;下の線を削除 */
     /* border-radius: 5px 5px 0 0;上部のみ角を丸く */
    background-color: #fce4ec; /* タブの非アクティブ部分の背景色 */
    padding: 0; /* ボタン自体にパディングを持たせるためコンテナのパディングは解除 */
    margin-bottom: 0; /* リストとの間に隙間を作らない */
}

/* 2. 個別ボタン (.category-buttons button) の修正・追加 */
.category-buttons button {
	width: calc(100%/8);
    background-color: #d9d9d9;
    border: none;
    /*　border-right: 1px solid #ff82ac; /* ボタン間に縦線 */
   	padding: 8px 10px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background-color 0.2s;
    /* 既存のボタンのデフォルトスタイルを上書き */
    border-radius: 0;
    white-space: nowrap; /* 追加: ボタン内のテキスト折り返しを禁止 */
}

.category-buttons button:last-child {
    border-right: none; /* 最後のボタンの右線は不要 */
}

.category-buttons button:hover:not(.active) {
    background-color: #f8bbd0; /* ホバーエフェクト */
}

/* 3. アクティブなタブ (.category-buttons button.active) の追加 */
.category-buttons button.active {
    background-color: #ffffff; /* コンテンツエリアの色に合わせる */
    /* 下線を見えなくすることで、リストとタブが繋がっているように見せる */
    /*  border-bottom: 1px solid #ffffff; */
    font-weight: bold;
    color: #ff82ac; /* フォントの色 */
    position: relative;
    z-index: 1; /* 他のタブの上に表示 */
    margin-bottom: -1px; /* 下の線とわずかに重ねるための調整 */
}

/* リンク一覧コンテナ（表の親要素） */
#link-list {
    width: 90%;
    margin: 0 auto; /* 中央寄せ */
    
    /* --- タブとの接続デザインの修正 --- */
    /* border: 1px solid #ff82ac; /* タブに合わせた枠線 */
    border-top: none; /* タブの下に繋げるため上枠線を削除 */
    /* border-radius: 0 0 5px 5px; 下部のみ角を丸く */
    background-color: #ffffff; /* mainの背景色と統一 */
    padding: 20px;
    /* margin-top: 0 に修正し、タブと接続させる */
    margin-top: 0;     
}

/* カテゴリボタンと全体の見出しは既存のものを利用 */
.link-list h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* --- ここからテーブル用のCSS --- */
.link-table {
    width: 100%; /* 親要素いっぱいに広げる */
    border-collapse: collapse; /* セルの境界線を結合 */
    margin-top: 20px;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); 影をつけて立体感を出す */
    background-color: #fff;
}

.link-table th,
.link-table td {
    border: 1px solid #ff82ac; /* セルの境界線 */
    padding: 4px 0px; /* パディング */
    text-align: left; /* テキストを左寄せ */
}

.link-table th {
    background-color: #ffedf3; /* ヘッダーの背景色 */
    font-weight: bold;
    color: #555;
    text-transform: uppercase; /* 大文字にする（任意） */
}

.link-table tbody tr:nth-child(even) {
    background-color: #ffedf3; /* 偶数行の背景色を変える（シマシマ模様） */
}

/* URLセルで長いURLがはみ出さないように */
.link-table td:nth-child(2) { /* 2列目のURLセルに適用 */
    word-break: break-all; /* 長い単語でも改行を許可 */
}

/* --- 画像表示とテキスト表示の調整 --- */
/* image-cell-content を image-name-cell-content に変更 */
.link-table .image-name-cell-content {
    display: flex;
    flex-direction: column; /* 縦方向 */
    align-items: center; /* 中央寄せ */
    justify-content: center; /* 垂直方向も中央寄せ */
    gap: 5px; /* 画像とテキストの間隔 */
    text-align: center; /* 画像がない場合のテキスト中央寄せ */
}

.link-table .link-icon {
    width: 30px;  /* 画像の幅を少し大きくする */
    height: 30px; /* 画像の高さを少し大きくする */
    object-fit: contain;
}

.link-table .link-name-in-image-cell {
    font-size: 0.8em; /* テキストのフォントサイズ調整 */
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* 各列の幅の調整 */
.link-table th:nth-child(1),
.link-table td:nth-child(1) {
    width: 27%; /* 名前列の幅 */
}

.link-table th:nth-child(2),
.link-table td:nth-child(2) {
    width: 60%; /* 説明列の幅 */
    word-break: break-all; /* 長い単語でも改行を許可 */
}

.link-table th:nth-child(3),
.link-table td:nth-child(3) {
    width: 13%; /* 備考列の幅 */
    text-align: center; /* 備考は中央寄せ */
}

/* 名前セル（1列目）内のリンクのスタイル調整 */
.link-table td:nth-child(1) a {
    /* 行のクリックイベントが機能するため、
       ここでは装飾のみを設定します */
    text-decoration: none; /* 下線なし */
    display: block; /* セルいっぱいにリンクを広げる */
}

/* 小画面向けの調整 (任意) */
@media (max-width: 768px) {
    .link-table th,
    .link-table td {
        /* 修正: 小画面でのパディングを4px 8pxに設定 */
        padding: 4px 8px;
    }
}