/* website/assets/css/about-us.css */
/* about-us.php 専用のスタイル */

/* --- ページヒーローセクション --- */
#page-hero.about-us-hero {
    height: 70px;               /* 表示される帯の高さをヘッダーの高さに合わせる (ヘッダー高さ70pxの場合) */
    /* 背景画像関連のスタイルは、もし背景画像を使わないなら削除しても良い */
    background-size: cover;
    background-position: center;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #4474c5;
}

.page-hero-content {
    position: relative; /* オーバーレイより手前に */
    z-index: 1;
}

.page-hero-content h1 {
    font-size: 2.5rem; /* タイトルのサイズ */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 文字に影をつける */
}

/* --- メインコンテンツエリア --- */
#about-us-content {
    padding: 60px 0;
}

/* 代表挨拶セクション */
.greeting-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 60px;
    max-width: 1000px; /* 例: 最大幅を1000pxに (値は調整してください) */
    margin-left: auto;
    margin-right: auto;
    /* box-shadow: #333 0px 2px 4px; */
    /* padding: 20px;  */
    /* ▼▼▼ フェードインアニメーション適用 ▼▼▼ */
    opacity: 0; /* 初期状態は透明 */
    animation: fadeIn 2s ease-out 0.3s forwards; /* アニメーション適用 (0.3秒遅延) */
    
}

.greeting-image {
    flex: 1 1 200px;
    align-self: flex-start; /* ★ アイテム自身を上揃えにする */
    margin-top: 5rem; /* ★ 画像の上にマージンを追加 (値はお好みで調整) */
    max-width: 400px;
}

.greeting-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block; /* 余白対策 */
}

.greeting-text {
    flex: 2 1 400px;
}

.greeting-text h2 {
    font-family: "noto serif jp", serif; /* serif フォントを指定 */
    font-size: 1.8rem; /* style.css との兼ね合いで調整 */
    margin-bottom: 20px;
}

/* 見出し下にグラデーションライン ▼▼▼ */
.greeting-text h2::after {
    content: ""; /* 疑似要素には必須 */
    display: block; /* ブロック要素として表示 */
    width: 100%; /* ラインの幅 (お好みで調整してください) */
    height: 3px; /* ラインの高さ */
    background: linear-gradient(to right, #013ec4, #ffffff00); /* グラデーションの色 (左から右へ) */
    margin-top: 0.75rem; /* 見出しとラインの間の余白 */
}

.greeting-text p {
    font-family: "noto serif jp", serif; /* serif フォントを指定 */
    line-height: 1.8; /* 行間調整 */
    margin-bottom: 1em;
}

/* 代表者署名部分を左寄せにする */
.representative-signature {
    color: rgb(70, 70, 70);
    text-shadow: #000000b6 0.3px 0.3px 0.3px;
    font-size: 1.2rem; /* フォントサイズ調整 */
    text-align: right;
    margin-top: 2rem;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* 少し下から表示 (任意) */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 会社概要テーブルのスタイル (既存のスタイルと必要に応じてマージ) --- */
.company-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 60px; /* 既存のマージンを維持 */
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* ▼▼▼ テーブルの最大幅を設定して中央寄せ ▼▼▼ */
    max-width: 1000px; /* 代表挨拶セクションと同じ幅に */
    margin-left: auto;
    margin-right: auto;
    box-shadow: #333 0px 2px 4px; /* ヘッダーの影 */
}

.company-info-table th,
.company-info-table td {
    border: 1px solid #ddd;
    padding: 15px;
    text-align: left;
    vertical-align: top;
}

.company-info-table th {
    background-color: #f8f9fa;
    width: 25%;
    font-weight: bold;
}

/* --- ▼▼▼ 役員リストのスタイル (ここから追記) ▼▼▼ --- */
.company-info-table .officer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-info-table .officer-list li {
    /* margin-bottom: 0.6em; ← 下で調整するので一旦コメントアウト */
    line-height: 1.5;   /* 行間を少し調整 */
    margin-bottom: 1em; /* 役職と次の役職の間のスペースを調整 */
}

/* 最後の役員の下の余白は不要 */
.company-info-table .officer-list li:last-child {
    margin-bottom: 0;
}

/* 役職名のスタイル (HTMLでstrongタグを使用した場合) */
.company-info-table .officer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.company-info-table .officer-list li {
    line-height: 1.5;
    margin-bottom: 1em; /* 役職ごとの間隔 */
    /* padding-left: 1.5em; ← ★削除: li全体のパディングは不要 */
    position: relative;
}

.company-info-table .officer-list li:last-child {
    margin-bottom: 0;
}

/* 役職名のスタイル (strongタグ) */
.company-info-table .officer-list li strong {
    display: block; /* ★ブロック要素にして改行させる */
    font-weight: bold;
    margin-bottom: 0.2em; /* ★役職と氏名の間のわずかなスペース */
    /* color: #333; */
}

/* ★氏名部分のスタイル (span.officer-name) */
.company-info-table .officer-list li .officer-name {
    display: block;      /* ★ブロック要素にする */
    margin-left: 2.5em; /* ★氏名を右にインデントさせるためのマージン (値は調整可) */
}
/* --- ▲▲▲ 役員リストのスタイル (ここまで追記) ▲▲▲ --- */


/* --- 事業内容などの他のリストスタイル (既存のスタイルがあれば調整) --- */
.company-info-table td ul:not(.officer-list) { /* officer-list以外のul */
    list-style: disc; /* 通常の黒丸マーカー */
    padding-left: 1.5em; /* 左にパディング */
    margin: 0;
}
.company-info-table td ul:not(.officer-list) li {
    margin-bottom: 0.5em;
}
.company-info-table td ul:not(.officer-list) li:last-child {
    margin-bottom: 0;
}

/* ▼▼▼ 会社概要セクションのタイトルを右寄せにする ▼▼▼ */
.company-info-section .section-title {
    text-align: left;
    margin-left: 10rem;
}

/* ▲▲▲ 会社概要セクションのタイトルを右寄せにする ▲▲▲ */

/* 社歴セクション */
.history-section { /* セクション全体の設定 */
    text-align: center; /* 中の h2 を中央寄せ */
    padding-top: 4rem; /* 上下の余白 (任意) */
    padding-bottom: 4rem;
}

.history-section h2.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.history-list {
    list-style: none;
    padding: 0; /* デフォルトのpaddingを削除 */
    /* ★中央寄せのための設定 */
    max-width: 600px; /* リストの最大幅を指定 (コンテンツに合わせて調整してください) */
    margin: 0 auto;   /* 左右のマージンをautoにして中央寄せ */
    text-align: left; /* リスト内のテキストは左寄せ */
    /* ★タイムライン線とマーカーのための設定 */
    position: relative; /* ::before, ::after の基準点 */
    padding-left: 40px; /* 左側にスペースを確保 (マーカーと線のため) */
}

/* タイムラインの縦線 */
.history-list::before {
    content: "";
    position: absolute;
    left: 15px; /* padding-left の内側、マーカーの中心を通るように調整 */
    top: 5px; /* 最初のマーカーの上端あたりから開始 */
    bottom: 5px; /* 最後のマーカーの下端あたりまで */
    width: 3px; /* 線の太さ */
    background-color: #007bff; /* 線の色 */
    border-radius: 2px;
}


.history-list li {
    margin-bottom: 25px; /* ★マージン調整 (少し広げる) */
    position: relative; /* ::before の基準点 */
    /* padding-left: 25px; ← 不要 */
}
/* 最後のリスト項目の下のマージンを削除 */
.history-list li:last-child {
    margin-bottom: 0;
}

/* タイムラインのマーカー (ドット) */
.history-list li::before {
    content: "";
    position: absolute;
    /* ★left の値を調整 (padding-left と線の位置を考慮) */
    left: -27px; /* -(padding-left - 線位置 - マーカー半径 - border) = -(40 - 18 - 5 - 2) = -15 ではなく、線の左に配置するので調整 */
                 /* padding-left(40) - 線の左端(18 - 3/2 = 16.5) - マーカー半径(5) - border(2) = 16.5 */
                 /* 線の中心(18px)からマーカー半径(5px)とborder(2px)を引いた位置 = 18 - 5 - 2 = 11px */
                 /* padding-left(40px) から 11px を引くと 29px。あれ？計算が合わない */
                 /* 単純に padding-left(40px) の内側、線の中心(18px)にマーカーの中心が来るようにする */
                 /* マーカーの左端 = 線の中心(18px) - マーカー半径(5px) - border(2px) = 11px */
                 /* padding-left(40px) から 11px を引くと left: -29px か？ */
                 /* 既存の -16px は padding-left: 25px が基準だった？ */
                 /* 新しい padding-left(40) - 既存の padding-left(25) = 15px */
                 /* 既存の left(-16) - 15 = -31px ? */
                 /* 線の左端が left: 16.5px なので、マーカーの左端は left: 16.5 - 5 - 2 = 9.5px */
                 /* padding-left(40px) から 9.5px を引くと left: -30.5px -> -30px or -31px */
                 /* 見た目で調整: -30px くらいか？ */
    left: -30px;
    top: 5px; /* 位置調整 (維持) */
    width: 10px; /* マーカー幅 (維持) */
    height: 10px; /* マーカー高さ (維持) */
    border-radius: 50%;
    background-color: #007bff; /* マーカーの色 (維持) */
    border: 2px solid #fff; /* 白い縁取り (維持) */
    box-shadow: 0 0 0 3px #007bff; /* さらに外側に影 (維持) */
    z-index: 1; /* 線より手前に */
}

.history-list li span { /* 年月などを強調する場合 */
    font-weight: bold;
    margin-right: 10px; /* (維持) */
    display: inline-block; /* 年号部分の幅を確保する場合 (任意) */
    /* width: 6em; */ /* 必要であれば幅を指定 */
}

/* --- アクセスセクション --- */
.access-section {
    display: flex;
    flex-wrap: wrap; /* 折り返しは維持 */
    gap: 2rem;
    align-items: flex-start; /* 上端揃えを維持 */
    margin-top: 4rem;
    margin-bottom: 4rem;
}

/* ★マップの幅を広く */
.access-map {
    /* flex: 1 1 400px; を変更 */
    flex: 2 1 0; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0 -> スペースを2の比率で取る */
    min-width: 300px; /* あまりにも狭くなりすぎないように最小幅を指定 (任意) */
}

/* ★画像の幅を狭く */
.access-image {
    /* flex: 1 1 400px; を変更 */
    flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 -> スペースを1の比率で取る */
    min-width: 200px; /* あまりにも狭くなりすぎないように最小幅を指定 (任意) */
    overflow: hidden; /* 画像がはみ出さないように念のため */
}

.access-map h2,
.access-image h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Google Map iframe のスタイル */
.access-map iframe {
    width: 100%;
    height: 400px; /* ★高さを維持 (または変更したい高さに) */
    border: 1px solid #ddd;
    display: block;
}

/* 会社外観画像のスタイル */
.access-image img {
    width: 100%;
    height: 400px;       /* ★マップのiframeと同じ高さに設定 */
    object-fit: cover;   /* ★これでアスペクト比を保ちつつ見切れる */
    display: block;
    border: 1px solid #ddd;
}

/* --- レスポンシブ対応 (変更なし) --- */
@media (max-width: 768px) {
    .access-section {
        flex-direction: column; /* 縦積みに変更 */
    }

    .access-map,
    .access-image {
        flex-basis: auto; /* 基本幅をリセット */
        width: 100%;     /* 幅を100%にする */
        min-width: unset; /* 最小幅指定を解除 */
    }

    .access-map iframe,
    .access-image img {
        height: 300px; /* モバイルでの高さを調整 */
    }
}