@charset "UTF-8";

/* =======================================================
   COMPANYページ専用スタイル
======================================================= */

/* --- セクションタイトル --- */
.page-main .section-title {
    font-size: 1rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: sans-serif;
    margin-bottom: 60px;
    font-weight: 600;
}


/* =======================================================
   会社概要テーブル (エレガントなリスト風デザイン)
======================================================= */
.company-profile {
    background-color: #ffffff;
}

.company-table {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
}

.company-table tr {
    border-bottom: 1px solid #e0e0e0;
}

/* テーブルの一番上にだけブランドカラーのラインを入れる */
.company-table tr:first-child {
    border-top: 2px solid var(--color-primary);
}

.company-table th {
    width: 25%;
    padding: 35px 20px 35px 0;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 1.2rem;
    vertical-align: top;
    letter-spacing: 0.1em;
}

.company-table td {
    width: 75%;
    padding: 35px 0 35px 20px;
    color: var(--color-text-light);
    line-height: 1.9;
    font-size: 1.05rem;
}


/* =======================================================
   アクセス・マップセクション
======================================================= */
.company-access {
    background-color: #FAFAFA;
}

.access-info {
    text-align: center;
    margin-bottom: 50px;
}

.access-station {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.station-icon {
    font-size: 1.5rem;
}

.access-address {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.sp-only { display: none; }

/* 地図の埋め込みエリア */
.map-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 21 / 9; /* PCでは横長のシネマティックな比率に */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    background-color: #eaeaea; /* 読み込み前のプレースホルダー色 */
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* 地図の色味を少し落ち着かせて高級感を出す（お好みで外してもOK） */
    filter: grayscale(15%) contrast(1.05); 
}

/* Google Mapsへ飛ぶボタン */
.access-btn-wrap {
    text-align: center;
    margin-top: 40px;
}

.btn-map {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-text);
    padding-bottom: 5px;
    transition: all 0.3s;
}

.btn-map:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateX(5px);
}


/* =======================================================
   レスポンシブ対応 (スマホ用)
======================================================= */
@media screen and (max-width: 768px) {
    .sp-only { display: block; }
    
    /* テーブルを縦積みに変更 */
    .company-table th, 
    .company-table td {
        display: block;
        width: 100%;
    }
    
    .company-table th {
        padding: 30px 0 10px 0;
        font-size: 1.1rem;
    }
    
    .company-table td {
        padding: 0 0 30px 0;
    }
    
    .access-station {
        font-size: 1.1rem;
    }
    
    .map-wrap {
        aspect-ratio: 4 / 3; /* スマホでは見やすいように少し縦長に */
        border-radius: 12px;
    }
}