@charset "utf-8";

.page-section-title {
    background-color: var(--main-color);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    margin-bottom: 40px;
}

/* CTA Section */
.cta-section {
    padding: 40px 0;
    background-color: #fdf0e4;
    border: 2px solid var(--accent-color);
    text-align: center;
    border-radius: 8px;
    margin: 20px auto;
}
.cta-section h3 { font-size: 24px; font-weight: bold; margin-bottom: 15px; }
.cta-section p { font-size: 16px; margin-bottom: 25px; padding: 10px 30px; }
.cta-btn {
    display: inline-block;
    width: 60%;
    padding: 15px 20px;
    background-color: var(--accent-color);
    color: #fff;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}
.cta-btn:hover { background-color: var(--hover-link-color); }

.p_txt {
    padding: 0 0 10px;
}

/* 運営会社table */
.company-profile-wrapper {
    font-family: 'Helvetica', 'Arial', 'Hiragino Sans', 'Meiryo', sans-serif;
    width: 100%;
    margin: 2em auto;
}

/* テーブル基本設定 */
.company-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
}

/* テーブルのセル（thとtd）の共通設定 */
.company-table th,
.company-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top; /* 内容が複数行になる場合も上揃えに */
}

/* テーブルヘッダー（th）の設定 */
.company-table th {
    background-color: #f7f7f7;
    font-weight: bold;
    width: 25%; /* PC表示時の幅を指定 */
}

/* 所在地や連絡先の詳細情報 */
.office-info {
    margin: 0;
    padding: 0;
}
.office-info + .office-info {
    margin-top: 1em; /* 本社と横浜オフィスの間隔 */
}
.office-info p {
    margin: 0.3em 0;
}
.office-title {
    font-weight: bold;
}


/* --- レスポンシブ対応 (画面幅が768px以下の場合) --- */
@media screen and (max-width: 768px) {
    /* テーブルとしての表示を解除し、thとtdを縦に積むスタイルに変更 */
    .company-table,
    .company-table tbody,
    .company-table tr,
    .company-table th,
    .company-table td {
        display: block;
        width: 100%;
        box-sizing: border-box; /* paddingを含めて幅100%にするため */
    }

    /* テーブル全体の枠線をリセット */
    .company-table {
        border: none;
    }

    /* 各行（tr）をカードのように見せる */
    .company-table tr {
        border: 1px solid #e0e0e0;
    }

    /* ヘッダーセル（th）のスタイル調整 */
    .company-table th {
        width: 100%;
        border: none;
        border-bottom: 1px dashed #ccc; /* 項目名と内容の区切り線 */
        background-color: #e0e0e0; /* 背景色をリセット */
        padding-bottom: 8px;
        text-align: left;
    }

    /* データセル（td）のスタイル調整 */
    .company-table td {
        width: 100%;
        border: none;
        padding-top: 8px;
        text-align: left;
    }

    /* 所在地や連絡先の調整 */
    .office-info + .office-info {
        margin-top: 0.8em;
    }
}