/* --- documents.css (完全統合・視認性最大化版) --- */

.header-docs {
    background-image: url('../img/sub-hero-docs.jpg');
    background-color: #888;
}

/* 1. 導入テキスト：ゆったりとした広さを確保 */
.doc-intro {
    max-width: 900px;
    margin: 0 auto 100px; /* 下方向の余白を大きく */
    text-align: center;
    color: #444;
    line-height: 2.4;     /* 行間を極限まで広げました */
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

/* 2. テーブル全体の包み込み */
.doc-list-wrap {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    padding: 30px; 
}

.doc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 20px; /* 行と行の間の隙間をさらに広く */
}

/* 3. テーブル見出し */
.doc-table th {
    background: transparent;
    color: #999;
    font-size: 0.85rem;
    text-align: left;
    padding: 0 35px 10px;
    border: none;
    letter-spacing: 0.1em;
}

/* 4. 各セルの余白（ここが重要です） */
.doc-table td {
    padding: 45px 35px; /* 上下の余白を45pxに設定して、行間を広げました */
    background: #fdfdfe;
    border-top: 1px solid #f2f6f9;
    border-bottom: 1px solid #f2f6f9;
    vertical-align: middle;
}

/* 角の丸み */
.doc-table td:first-child { border-left: 1px solid #f2f6f9; border-radius: 15px 0 0 15px; }
.doc-table td:last-child { border-right: 1px solid #f2f6f9; border-radius: 0 15px 15px 0; }

.doc-date {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #999;
    width: 15%;
    font-weight: 500;
}

.doc-category {
    width: 20%;
}

.doc-name {
    width: 50%;
}

/* 5. 資料名リンク */
.doc-link {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-black);
    text-decoration: none;
    transition: 0.3s ease;
}

.doc-link:hover {
    color: #ff5e5e;
    transform: translateX(8px);
    display: inline-block;
}

/* 6. 表示バッジ */
.pdf-icon {
    display: inline-block;
    background: #777;
    color: #fff;
    font-size: 0.8rem;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: 0.3s;
}

/* 行ホバー時の演出 */
.doc-table tr:hover td {
    background-color: #f7faff;
}
.doc-table tr:hover .pdf-icon {
    background-color: #ff5e5e;
    box-shadow: 0 4px 12px rgba(94, 151, 255, 0.3);
}

/* --- スマホ対応 (Responsive) --- */
@media (max-width: 768px) {
    /* 導入文の調整 */
    .doc-intro { 
        line-height: 1.8; 
        margin-bottom: 40px; 
        font-size: 0.95rem; /* 文字サイズを適切に縮小 */
        text-align: left;   /* スマホでは左寄せが見やすい */
        padding: 0 10px;
    }
    
    /* 余白を削減し、横にはみ出さないように */
    .doc-list-wrap {
        padding: 10px; 
        background: transparent;
        box-shadow: none;
    }

    /* テーブルをリスト型の「カード」レイアウトに変換 */
    .doc-table, .doc-table tbody, .doc-table tr, .doc-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    .doc-table thead {
        display: none; /* スマホでは見出し行を隠す */
    }
    
    .doc-table tr {
        background: #fff;
        margin-bottom: 20px;
        border: 1px solid #eee;
        border-radius: 15px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        padding: 20px;
    }
    
    .doc-table td {
        padding: 0 !important; /* PC用の大きな余白をリセット */
        border: none !important;
        background: transparent !important;
    }

    .doc-table td:first-child, .doc-table td:last-child {
        border-radius: 0;
    }
    
    /* 日付とカテゴリを横並びにスッキリと */
    .doc-table td.doc-date {
        display: inline-block;
        width: auto !important;
        font-size: 0.85rem;
        margin-right: 15px;
        margin-bottom: 10px;
    }
    
    .doc-table td.doc-category {
        display: inline-block;
        width: auto !important;
        margin-bottom: 10px;
    }
    
    /* 資料名を少し小さくして、見やすく改行させる */
    .doc-table td.doc-name {
        margin-bottom: 15px;
        padding-bottom: 15px !important;
        border-bottom: 1px dashed #eee !important;
    }
    
    .doc-link { 
        font-size: 1.05rem; 
        line-height: 1.5;
        display: block; 
    }

    /* 「内容を表示」ボタンを右寄せに */
    .doc-table td.doc-type {
        text-align: right;
    }
    
    .pdf-icon {
        padding: 8px 25px;
        font-size: 0.8rem;
    }
}