/* ===============================

	ごあいさつセクションの文字設定

================================ */

.message-section p {

    text-align: center;

    font-size: 1.2rem;  /* お好みに合わせて 1.1〜1.3rem 程度で調整 */

    line-height: 2.0;   /* 行間を広めに取ると高級感が出ます */

    margin-bottom: 2em; /* 段落同士の隙間 */

    color: #333;

}



.anywork-highlight {

    color: #333;

    font-weight: 800;

    letter-spacing: 0.05em;

    border-bottom: 2px solid #2563eb; /* 下線のみで強調 */

}

/* ===============================

   テーブル設定

================================ */

.info-table {

    width: 100%;            /* 親要素（max-width: 900px）の限界まで広げる */

    max-width: 900px;       /* アクセスマップの幅と一致 */

    margin: 0 auto 40px;    /* 左右中央寄せ、下に余白 */

    border-collapse: collapse;

    table-layout: fixed;    /* ★重要：これを入れることで、中身に関わらず幅を強制固定します */

}



/* 1列目（項目吊・社吊）の幅を完全に統一 */

.info-table th {

    width: 300px;           /* 長い社吊（ITエンタープライズ等）が収まる幅 */

    text-align: left;

    vertical-align: top;

    padding: 15px;

    background-color: #f9f9f9;

    border-bottom: 1px solid #ddd;

    box-sizing: border-box;

}



/* 2列目以降のデータセル */

.info-table td {

    padding: 15px;

    vertical-align: top;

    border-bottom: 1px solid #ddd;

    word-break: break-all;  /* 長いURLや住所が枠を突き破るのを防ぐ */

    box-sizing: border-box;

}



/* 協力企業テーブル（3列構成）の幅を微調整 */

/* 2列目（業務内容） */

.info-table td:nth-child(2) {

    width: auto;            /* 残りのスペースを柔軟に使う */

}



/* 3列目（URL）がある場合、少し狭める（バランス調整） */

.info-table td:nth-child(3) {

    width: 25%;             /* 右端に寄せすぎず、読みやすい幅を確保 */

    font-size: 1.00rem;     /* URLは少し小さくして控えめに */

}

/* =================================================

   アクセスマップのスタイル

================================================= */

.access-map {

    padding: 60px 0;      /* 上下に十分な余白を作ってセクションを分ける */

    max-width: 900px;     /* 企業情報のテーブルと同じ幅に制限して統一感を出す */

    margin: 0 auto;       /* 左右中央に配置 */

}



/* 地図を包む外枠のデザイン */

.map-container {

    position: relative;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);/* 周囲に柔らかい影をつけて浮かせる */

    border-radius: 12px;                      /* 角を丸くして今風のデザインに */

    overflow: hidden;                         /* 角丸からはみ出す地図を隠す */

    border: 1px solid #eee;                   /* 地図と背景の境目をはっきりさせる */

    line-height: 0;                           /* iframe下部にできる謎の隙間を解消 */

}



/* =================================================

   スマホ対応（タブレット以下：768px未満）

================================================= */

@media (max-width: 768px) {

    .access-map {

        padding: 40px 15px; /* スマホでは左右に少し余白を作る */

    }



	.menu-btn {

        display: block; /* スマホの時だけ出す */

    }

    

    /* ついでにナビゲーションを隠す設定 */

    nav {

        display: none; 

    }

    nav.active {

        display: flex; /* ボタンを押した時に出す設定 */

    }

    

    .map-container iframe {

        height: 350px;      /* スマホで見やすい高さに調整 */

    }

}