/* ===============================================================
   Company Page Styles
   - Page Header (KV)
   - Greeting (代表者挨拶)
   - Overview（会社概要：表 / リスト / 所在地）
   - Access（アクセス：カード）
   - Responsive（1024 / 768）
   Notes:
   * インデントは4スペース
   * BEM命名準拠
   * 可読性のため宣言順は「レイアウト -> ボックス -> タイポ -> その他」
================================================================ */

/* ===============================================================
   Page Header（KV：お問い合わせのトーンを踏襲）
================================================================ */
.page-header {
    position: relative;
    margin-bottom: 24px;
    padding: 220px 0 120px;
    text-align: center;
    background: url("../image/company/kv-company.jpg") center / cover no-repeat;
    color: var(--color-text-accent);
}
.page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(237, 245, 255, 0.82);
}
.page-header__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-header__eyebrow {
    margin: 0 0 0.75em;
    font-size: var(--font-size-text-md);
    color: var(--color-text-main);
}
.page-header__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--font-size-title-hero);
}

/* ===============================================================
   Greeting（代表者挨拶：contact-intro 近似の抑えた見た目）
================================================================ */
.company-greeting {
    margin: 80px 0 100px;
}
.company-greeting__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
}
.company-greeting .section-title {
    margin-bottom: 0.5em;
}
.company-greeting__lead {
    margin: 0 0 1.7em;
    text-align: center;
    font-size: var(--font-size-sub-title-m);
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-main);
}
.company-greeting__body {
    text-align: center;
    line-height: 1.8;
    color: var(--color-text-main);
}
.company-greeting__sign {
    text-align: right;
    font-weight: 700;
}

/* ===============================================================
   Overview（会社概要：表 / リスト / 所在地）
================================================================ */

/* ---- セクションラッパー ---- */
.overview {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
    background-color: var(--color-bg-section-blue);
}
.overview__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}
.table-scroll {
    overflow: auto;
}

/* ---- 会社概要テーブル ---- */
.overview-table {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    border-spacing: 0;
    border-top: 1px solid var(--color-bg-card-blue);
    border-bottom: 1px solid var(--color-bg-card-blue);
    background: #fff;
    font-size: var(--font-size-text-md);
    line-height: 1.8;
}
.overview-table th,
.overview-table td {
    padding: 0.875em 2em;
    vertical-align: top;
    font-size: var(--font-size-text-md);
}
.overview-table th {
    width: 32%;
    background: var(--color-bg-card-sky);
    color: var(--color-text);
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}
.overview-table td {
    text-align: left;
}
.overview-table tr + tr th,
.overview-table tr + tr td {
    border-top: 1px solid #e7ecf2;
}

/* （必要なら）仕様セクションの見出し用 */
.specs-table__section th {
    background: #eaf3ff;
    color: var(--color-text-main);
    text-align: center;
    border-right: none;
}

/* ---- 所在地（都市名太字＋2カラム） ---- */
.overview-locations {
    display: grid;
    gap: 12px 20px;
}
.location {
    margin-bottom: 24px;
}
.location__city {
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
}
.location__text {
    line-height: 1.9;
}

/* ---- リスト（主要業務／取引先企業） ---- */
.overview-list {
    margin: 0;
    padding-left: 1.2em;              /* ● の字下げ */
    list-style: disc;
}
.overview-list li + li {
    margin-top: 0.25em;
}

/* 取引先企業：段組み（横並び） */
.overview-list--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    list-style: disc;
}
.overview-list--cols li {
    margin: 0.2em 0;
}

/* ===============================================================
   Access（アクセス：画像デザインに寄せたカード）
================================================================ */
.company-access {
    padding: 100px 0;
}
.company-access__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}
.access-list {
    display: grid;
    gap: 40px;                         /* カード間の余白（画像準拠） */
    list-style: none;
    margin: 0;
    padding: 0;
}
.access-card {
    border: 1px solid var(--color-bg-card-blue);
    border-radius: 10px;
    padding: 45px 60px;
    background: var(--color-bg-card-lightblue);
}
.access-card__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;  /* 左テキスト / 右地図（固定幅） */
    gap: 28px;
    align-items: start;
}
.access-card__city {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: var(--font-size-text-lg);
}
.access-card__addr {
    margin: 0 0 32px;
    font-style: normal;
    line-height: 1.8;
    color: var(--color-text-main);
    font-size: var(--font-size-text-md);
}
.access-card__howto {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: var(--font-size-text-md);
}
.access-card__note {
    margin: 0;
    color: var(--color-text-sub, #546375);
    font-size: var(--font-size-text-md);
    line-height: 1.9;
}
.access-card__map {
    width: 100%;
    border: 1px solid var(--color-bg-card-blue);
    border-radius: 10px;
}
.access-card__map iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

/* （任意）2カラム並びのヘルパー：使わない場合は削除可
.access-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr 1fr;
}
.access-grid .access-card:last-child {
    grid-column: 1 / -1;  京都を横幅いっぱいに
}
*/

/* ===============================================================
   Responsive
   - 1024px以下
   - 768px以下（SP）
================================================================ */

/* ---- 1024px 以下 ---- */
@media (max-width: 1024px) {
    .page-header {
        padding: 180px 0 100px;
    }
    .access-card__cols {
        grid-template-columns: 1fr;   /* 地図を下に縦並び */
    }
    .access-card__map iframe {
        height: 300px;
    }
}

/* ---- 768px 以下（スマホ） ---- */
@media (max-width: 768px) {
    /* Page Header */
    .page-header {
        padding: 140px 0 80px;
    }

    /* Greeting */
    .company-greeting {
        margin: 0 0 60px;
    }
    .company-greeting__body {
        text-align: left;             /* 本文は左揃え */
    }

    /* Overview */
    .overview {
        padding: 60px 0;
    }
    .overview-table {
        width: initial;
        max-width: initial;
        min-width: 640px;             /* 横スクロール前提 */
    }
    .overview-table th,
    .overview-table td {
        padding: 0.6em 1.2em;
        font-size: var(--font-size-text-md);
        vertical-align: top;
    }
    .overview-table th {
        width: 22%;
    }

    /* Locations */
    .location {
        grid-template-columns: 80px 1fr;  /* 都市名幅をやや狭く */
        gap: 6px 12px;
    }

    /* Lists */
    .overview-list--cols {
        grid-template-columns: 1fr;       /* 1列化 */
    }

    /* Access */
    .company-access {
        padding: 60px 0;
    }
    .access-card {
        padding: 18px;
    }
    .access-list {
        gap: 28px;
    }
    .access-card__map iframe {
        height: 300px;
    }
}