@charset "UTF-8";

/* ====================================
   会社案内ページ専用スタイル
   ==================================== */

/* ① ページヘッダー (共通) */
.page-header {
    background-color: var(--color-sub);
    color: #fff;
    padding: 120px 0 60px;
    text-align: center;
}
.page-header h1 {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.page-header p {
    font-size: 16px;
    opacity: 0.8;
    letter-spacing: 0.1em;
}

/* ② 会社概要テーブル */
.profile-table-wrapper {
    max-width: 800px;
    margin: 40px auto 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 40px;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.profile-table th,
.profile-table td {
    padding: 20px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}

.profile-table tr:last-child th,
.profile-table tr:last-child td {
    border-bottom: none;
}

/* css/company.css の 35行目付近 */

.profile-table th {
    /* width: 30%;  ← これを削除またはコメントアウト */
    width: 20%;     /* ★変更：30%から20%に狭める */
    color: var(--color-sub);
    font-weight: bold;
    background-color: #fcfcfc;
    white-space: nowrap;
}

.profile-table td {
    /* width: 70%;  ← これを削除またはコメントアウト */
    width: 80%;     /* ★変更：70%から80%に広げる */
    color: #333;
}

.profile-table a {
    color: var(--color-main);
    text-decoration: underline;
}

/* ③ アクセスカード */
.access-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.access-card {
    background: #fff;
    width: 45%;
    min-width: 300px;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.access-header {
    border-bottom: 2px solid var(--color-main);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.access-header h4 {
    font-size: 20px;
    color: var(--color-sub);
    margin-bottom: 5px;
}

.ja-label {
    font-size: 12px;
    color: #888;
    font-weight: bold;
}

.address-text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    flex-grow: 1; /* 高さを揃えるための余白調整 */
}

.note {
    font-size: 13px;
    color: #E65100; /* 注意書き用オレンジ */
    margin-bottom: 20px;
}

/* マップボタン */
.map-btn-area {
    margin-top: auto; /* 一番下に配置 */
}

.btn-map {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-map:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
    color: #333;
}

.btn-map .icon {
    margin-right: 8px;
}

/* ④ CTAエリア（共通） */
.cta-area {
    background-color: var(--color-sub);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}
.cta-area h2 {
    font-size: 28px;
    margin-bottom: 20px;
}
.cta-area p {
    margin-bottom: 40px;
    opacity: 0.9;
}
.btn-cta {
    display: inline-block;
    background: var(--color-main);
    color: #fff;
    padding: 15px 50px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 18px;
    transition: transform 0.3s, background 0.3s;
}
.btn-cta:hover {
    background: var(--color-main-hover);
    transform: scale(1.05);
}

/* レスポンシブ (SP) */
@media (max-width: 768px) {
    .profile-table-wrapper {
        padding: 20px;
        width: 100%;
    }
    
    .profile-table th,
    .profile-table td {
        display: block; /* 縦積みに変更 */
        width: 100%;
    }
    
    .profile-table th {
        background: none;
        padding-bottom: 5px;
        color: var(--color-main);
        border-bottom: none;
    }
    
    .profile-table td {
        padding-top: 0;
        padding-bottom: 30px;
    }

    .access-card {
        width: 100%;
    }
    /* PDFリンクのスタイル */
    .pdf-link {
        color: #0066cc;          /* リンクらしい青色 */
        text-decoration: underline; /* 下線をつける */
        font-size: 14px;         /* 少し文字サイズを調整 */
        display: inline-block;
        margin-top: 5px;         /* 上の行との間隔を少し空ける */
    }

    .pdf-link:hover {
        text-decoration: none;   /* ホバー時に下線を消す */
        opacity: 0.8;
    }
}