/* =========================================
   会社案内ページ (company.html) 専用スタイル
========================================= */

/* --- ページヘッダー（イラスト部分） --- */
.company-header {
    width: 100%;
    height: 350px;
    background-image: url('image/company.png');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid #3d2a1d;
}

/* タイトルの枠 */
.company-header-inner {
    background-color: #ffffff;
    border: 2px solid #b38b4d;
    padding: 25px 80px;
}

.page-title {
    font-size: 2.5rem;
    color: #0f2541;
    margin: 0;
    font-weight: normal;
    letter-spacing: 0.1em;
}

/* --- 代表メッセージセクション --- */
.president-message-section {
    background-color: #cbd2db;
    padding: 80px 20px 100px;
}

.president-container {
    max-width: 900px;
    margin: 0 auto;
}

/* タイトルエリア */
.president-title-area {
    margin-bottom: 30px;
}

.en-title {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #0f2541;
    font-size: 1rem;
    margin-bottom: 5px;
}

.ja-title {
    font-size: 2.4rem;
    color: #0f2541;
    margin: 0;
    font-weight: normal;
}

/* メッセージの白箱 */
.president-content-box {
    background-color: #ffffff;
    padding: 60px 70px;
    color: #333333;
}

.president-content-box p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 25px;
    letter-spacing: 0.03em;
}

.president-content-box p:last-child {
    margin-bottom: 0;
}

/* 署名部分 */
.signature {
    text-align: right;
    margin-top: 50px;
    font-size: 1.1rem !important;
}

/* レスポンシブ対応（スマホ表示） */
@media (max-width: 768px) {
    .company-header {
        height: 200px;
    }
    .company-header-inner {
        padding: 15px 40px;
    }
    .page-title {
        font-size: 1.8rem;
    }
    .president-message-section {
        padding: 50px 15px;
    }
    .ja-title {
        font-size: 1.8rem;
    }
    .president-content-box {
        padding: 30px 20px;
    }
    .president-content-box p {
        font-size: 0.95rem;
    }
}

/* --- 会社概要セクション --- */
.company-profile-section {
    background-color: #ffffff;
    padding: 0 20px 100px; /* 上下の余白 */
}

.company-profile-container {
    max-width: 900px;
    margin: 0 auto;
}

/* タイトルエリア（上の代表メッセージとスタイルを合わせる） */
.profile-title-area {
    margin-bottom: 40px;
}

/* 会社概要テーブル全体 */
.company-table {
    width: 90%; /* 横幅を100%から90%に縮めて余白を作ります */
    max-width: 800px; /* パソコンの大きな画面でも広がりすぎないように最大幅を設定 */
    margin: 0 auto; /* 縮めた表を中央に配置します */
    border-collapse: collapse;
}

/* 行の背景色（ストライプ柄の魔法！）
  nth-child(odd) で奇数行、nth-child(even) で偶数行の色を変えられます
*/
.company-table tr:nth-child(odd) {
    background-color: #eef2f6; /* 少し濃いブルーグレー */
}
.company-table tr:nth-child(even) {
    background-color: #f7f9fc; /* とても薄いブルーグレー */
}

/* 左側の見出しセル（th） */
.company-table th {
    width: 25%;
    padding: 25px 20px;
    font-weight: normal;
    color: #333333;
    text-align: center; /* 画像に合わせて中央揃え */
    border-bottom: 3px solid #ffffff; /* 白い境界線 */
    border-right: 3px solid #ffffff; /* 見出しとデータの間にも白い線 */
}

/* 右側のデータセル（td） */
.company-table td {
    width: 75%;
    padding: 25px 20px;
    color: #0f2541; /* メインカラーの濃いネイビー */
    text-align: center; /* 画像に合わせて中央揃え */
    line-height: 1.8;
    border-bottom: 3px solid #ffffff; /* 白い境界線 */
}


/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    /* スマホでは画面が狭いため、横並びの表を「縦並び」に変形させます */
    .company-table th,
    .company-table td {
        display: block; 
        width: 100%;
        text-align: left; /* 縦並びの時は左寄せの方が見やすくなります */
        padding: 15px 20px;
    }
    
    .company-table th {
        border-right: none;
        border-bottom: none; /* thの下の線を消す */
        padding-bottom: 5px; /* 下のtdとの間隔を詰める */
        font-weight: bold; /* 見出しを目立たせる */
    }
    
    .company-table td {
        padding-top: 0;
    }
}

/* --- 基本方針・個人情報保護方針セクション --- */
.policy-section {
    background-color: #ffffff;
    padding: 0 20px 100px; /* 会社概要と同じ余白 */
}

.policy-container {
    max-width: 900px;
    margin: 0 auto;
}

.policy-block {
    margin-bottom: 80px; /* ブロック同士の余白 */
}

/* タイトルエリア（既存のものを再利用・調整） */
.policy-title-area {
    margin-bottom: 30px;
}

.policy-title-area .en-title {
    display: block;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #0f2541;
    font-size: 1rem;
    margin-bottom: 5px;
}

.policy-title-area .ja-title {
    font-size: 2.4rem;
    color: #0f2541;
    margin: 0;
    font-weight: normal;
}

/* リード文 */
.policy-intro {
    font-size: 1rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 30px;
}

/* リストの共通スタイル */
.policy-list {
    margin: 0;
    padding-left: 1.5em; /* 点や数字の左側の余白 */
    color: #333333;
    line-height: 1.8;
}

.policy-list li {
    margin-bottom: 10px; /* 箇条書き同士の隙間 */
}

/* 番号付きリスト（1. 2. 3...） */
.numbered-list {
    list-style-type: decimal;
}

/* 黒丸リスト（・） */
.bullet-list {
    list-style-type: disc;
}

/* 個人情報保護方針の小見出し */
.policy-sub-block {
    margin-bottom: 30px;
}

.policy-sub-title {
    font-size: 1.1rem;
    color: #333333;
    margin-bottom: 15px;
    font-weight: normal; /* 画像に合わせて太字にはしない */
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    .policy-block {
        margin-bottom: 50px;
    }
    .policy-title-area .ja-title {
        font-size: 1.8rem;
    }
    .policy-intro, 
    .policy-list li, 
    .policy-sub-title {
        font-size: 0.95rem;
    }
}