/* ヘッダー全体のスタイル: フレックスボックスでロゴとメニューを左右に配置 */
header {
    display: flex; /* ロゴとメニューを横並びにする */
    justify-content: space-between; /* ロゴとメニューを左右に分ける */
    align-items: center; /* 垂直方向で中央揃え */
    padding: 10px 20px; /* 上下左右に余白を設定 */
    background-color: #fff; /* ヘッダー背景を白色に設定 */
}

/* ロゴ部分のスタイル: ロゴ画像と会社名を横並びに配置 */
header .logo {
    display: flex; /* 横並び配置 */
    align-items: center; /* 縦方向で中央揃え */
    gap: 10px; /* ロゴ画像と会社名の間にスペースを追加 */
}

/* ロゴ画像のサイズ設定 */
header .logo img {
    height: 50px; /* ロゴの高さを50pxに設定 */
}

/* 会社名のスタイル */
header .logo span {
    font-size: 28px; /* フォントサイズを28pxに設定 */
    font-weight: bold; /* 太字に設定 */
    color: #000; /* 黒色に設定 */
    text-transform: uppercase; /* すべて大文字に変換 */
}

/* コラム一覧のスタイル */
.section-title {
    display: block; /* タイトルを独立したブロックとして表示 */
    text-align: center; /* タイトルを中央揃え */
    font-size: 32px; /* タイトルの文字サイズ */
    margin-bottom: 20px; /* タイトルとカード間に余白を追加 */
    color: #333; /* タイトルの文字色 */
}

/* メニューのスタイル: 横並びに表示 */
header nav ul {
    display: flex; /* 横並び配置 */
    list-style: none; /* リストの点を非表示 */
    margin: 0; /* 外側の余白を削除 */
    padding: 0; /* 内側の余白を削除 */
    gap: 10px; /* 各メニュー項目の間にスペースを追加 */
}

/* メニューリンクのスタイル: クリック可能な領域を広げる */
header nav ul li a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #000; /* 文字色を黒に設定 */
    font-size: 16px; /* フォントサイズを16pxに設定 */
    font-weight: bold; /* 太字に設定 */
    padding: 10px 15px; /* リンクに余白を追加してクリックしやすくする */
    display: block; /* 全体がクリック可能になるように設定 */
}

/* コラム一覧セクション */
.column-list {
    display: block; /* 親要素をデフォルトの配置に戻す */
    text-align: center; /* セクション内のテキストを中央揃え */
}

/* コラム一覧セクション */
.column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横3列の等間隔グリッド */
    gap: 10px; /* 各カード間の隙間を10pxに調整 */
    justify-items: center; /* 各アイテム（カード）を中央揃え */
    width: 100%; /* 親要素の幅に合わせる */
    max-width: 1200px; /* 最大幅を設定して余白を調整 */
    margin: 0 auto; /* 親要素内で中央に配置 */
}

/* コラムカード */
/* コラムカード */
.column-card {
    display: flex; /* フレックスボックスで配置を管理 */
    flex-direction: row; /* 横並びに配置 */
    justify-content: space-between; /* 左に説明文、右に画像 */
    align-items: center; /* 垂直方向を中央揃え */
    background-color: #fff; /* カード背景色 */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* シャドウ効果 */
    padding: 15px; /* 内側の余白 */
    width: 100%; /* カードの幅をグリッド内で調整 */
    max-width: 300px; /* カード幅の最大値を設定 */
    height: auto; /* 高さを内容に合わせる */
    box-sizing: border-box; /* パディングを含めたサイズ調整 */
}

/* テキスト部分のスタイル */
.column-card .text-content {
    text-align: left; /* タイトルと説明文を左揃え */
    flex: 1; /* テキスト部分を拡張 */
}

/* タイトルのスタイル */
.column-card .text-content h3 {
    margin: 0 0 10px 0; /* タイトル下に余白を追加 */
    font-size: 18px; /* タイトルのフォントサイズ */
    color: #333; /* タイトルの色 */
}

/* 説明文のスタイル */
.column-card .text-content p {
    margin: 0; /* 余白をリセット */
    font-size: 16px; /* 説明文のフォントサイズ */
    color: #666; /* 説明文の文字色 */
}

/* コラムカードの画像のスタイル */
.column-card img {
    width: 64px; /* 画像の幅を適切に調整 */
    height: auto; /* 高さは自動調整 */
    margin-left: 10px; /* テキストと画像の間に余白を追加 */
}



/* ホバー効果 */
.column-card:hover {
    transform: translateY(-5px); /* ホバー時の浮き上がり効果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ホバー時のシャドウ強化 */
}

/* 外部リンクセクション */
.external-links {
    padding: 40px 0; /* 上下の余白 */
}

.divider {
    border: 0;
    border-top: 5px solid #ff69b4; /* 太めのピンク色の横線 */
    margin-bottom: 20px; /* セクションと横線の間に余白 */
}

/* 外部リンクのコンテナ */
.external-links-container {
    display: flex; /* カードを横並びにする */
    justify-content: center; /* 全体を中央揃え */
    align-items: flex-start; /* 上詰めで揃える */
    gap: 20px; /* カード間の隙間を調整 */
    flex-wrap: wrap; /* 横幅を超えた場合、折り返す */
    margin: 0 auto; /* 親要素内で中央揃え */
    max-width: 1200px; /* 必要に応じて幅を制限 */
}

/* 外部リンクカード */
.external-link-card {
    background-color: #fff; /* カードの背景色 */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* シャドウ効果 */
    padding: 15px; /* 内側の余白 */
    width: 300px; /* カードの幅 */
    text-align: center; /* 内容を中央揃え */
    height: auto; /* 高さを自動調整 */
    display: flex; /* フレックスボックスで縦方向の配置を管理 */
    flex-direction: column; /* 縦方向に要素を配置 */
    justify-content: flex-start; /* 上詰めに配置 */
    align-items: center; /* 中央揃え（必要なら） */
    box-sizing: border-box; /* パディングを含めたサイズを調整 */
    margin: 0 auto; /* 個別カードの中央揃え */
}

/* 各外部リンク */
.external-link a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #000; /* デフォルトの文字色を黒に設定 */
}

/* 各外部リンクの案内文字 　外部コラム・記事連載のご案内　*/
.external-links-title {
    text-align: center; /* 中央配置 */
    margin: 0 auto; /* 余白を自動調整 */
    margin-bottom: 1em; /* 1行分の余白を追加 */
}

.company-logo {
    width: 100px; /* ロゴ画像の幅を固定 */
    height: auto; /* 高さはアスペクト比に合わせて自動調整 */
    margin-bottom: 10px; /* ロゴと企業名の間に余白を追加 */
}

.company-name {
    font-size: 18px; /* 企業名のフォントサイズ */
    font-weight: bold; /* 企業名を太字に設定 */
    color: #333; /* 文字色を少し薄く設定 */
}

.series-summary {
    font-size: 14px; /* 記事概要のフォントサイズ */
    color: #666; /* 記事概要の文字色 */
    margin: 10px 0 0 0; /* 上余白: 10px、下余白: 0 */
    text-align: left; /* 説明文を左揃え */
    line-height: 1.5; /* 行間を少し広げる */
}


/* カード全体のコンテナ */
.external-link {
    flex: 1; /* 各カードの高さを均等に */
    margin: 0 1em; /* 各カードの横余白 */
    display: flex;
    align-items: flex-start; /* 上詰めに配置 */
}

/* ホバー効果 */
.external-link a:hover .company-name {
    color: #ff69b4; /* マウスオーバー時に企業名の色をピンクに変更 */
}

.external-link a:hover .company-logo {
    transform: scale(1.05); /* ロゴに少し拡大のホバー効果 */
    transition: transform 0.3s ease;
}

/* 背景と全体のスタイル */
#policy-links {
    background-color: #f5f5f5; /* 背景色をwhitesmokeに設定 */
    padding: 20px 0; /* 上下に余白を追加 */
    text-align: center;
}

/* リンクリストのスタイル */
#policy-links ul {
    list-style: none; /* リストマーカーを非表示 */
    margin: 0; /* 外側の余白をリセット */
    padding: 0; /* 内側の余白をリセット */
    display: flex; /* リンクを横並びに配置 */
    justify-content: center; /* リンクを中央揃え */
    gap: 20px; /* リンク間の余白を設定 */
}

/* 各リンクのスタイル */
#policy-links ul li a {
    text-decoration: none; /* 下線を削除 */
    color: #333; /* テキストの色を設定 */
    font-size: 14px; /* テキストサイズを調整 */
    font-weight: 500; /* 適度な太さを設定 */
    transition: color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
#policy-links ul li a:hover {
    color: #007bff; /* ホバー時に色を変更 (アクセントカラー) */
}

/* フッター */
footer {
    text-align: center;
    padding: 10px 0;
    background-color: #000080; /* navy */
    color: #fff;
}

/* -----------------------------------------------------
   1. column-card 内リンクの下線を除去
   （company 側 a タグと同一条件）
----------------------------------------------------- */
.column-card a {
    text-decoration: none;   /* 下線を表示しない */
    color: inherit;          /* 親要素の文字色を継承 */
}

/* -----------------------------------------------------
   2. company-name と同じ役割：
      column-card 内タイトル（h3）を hover 時にピンク化
----------------------------------------------------- */
.column-card a:hover h3 {
    color: #ff69b4;          /* company-name と同じピンク */
}

/* -----------------------------------------------------
   3. company-logo と同じ役割：
      column-card 内画像を hover 時に軽く拡大
----------------------------------------------------- */
.column-card a:hover img {
    transform: scale(1.05);  /* company-logo と同じ拡大率 */
    transition: transform 0.3s ease;
}


/* =============================================================================================
   レスポンシブ対応（タブレット・スマホ共通設計）
   ================================================ */

/* 800px以下：タブレット対応 */
@media (max-width: 800px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 5vw;
    }
    header .logo {
        margin-bottom: 10px;
    }
    header .logo span {
        font-size: 1.2rem;
    }
    header nav ul {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    header nav ul li a {
        font-size: 15px;
        padding: 8px 0;
    }
    .section-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .column-grid {
        grid-template-columns: repeat(2, 1fr); /* 横2列に縮小 */
        gap: 15px;
    }
    .column-card {
        flex-direction: column; /* 縦並びに変更 */
        max-width: 100%;
        text-align: center;
    }
    .column-card .text-content {
        text-align: center;
    }
    .column-card img {
        margin-left: 0;
        margin-top: 10px;
    }
    .external-links-container {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .external-link-card {
        width: 90%;
        max-width: 350px;
    }
    #policy-links ul {
        flex-direction: column;
        gap: 10px;
    }
    footer {
        font-size: 13px;
        padding: 8px 0;
    }
}

/* 600px以下：スマートフォン対応 */
@media (max-width: 600px) {
    header {
        padding: 10px 4vw;
    }
    header .logo img {
        height: 30px;
    }
    header .logo span {
        font-size: 1.05rem;
    }
    .section-title {
        font-size: 20px;
        margin-bottom: 14px;
    }
    .column-grid {
        grid-template-columns: 1fr; /* 1列に変更 */
        gap: 16px;
    }
    .column-card {
        padding: 10px;
    }
    .column-card .text-content h3 {
        font-size: 16px;
    }
    .column-card .text-content p {
        font-size: 14px;
    }
    .external-link-card {
        width: 94%;
    }
    .company-name {
        font-size: 16px;
    }
    .series-summary {
        font-size: 13px;
    }
    .company-logo {
        width: 80px;
    }
    #policy-links ul {
        flex-direction: column;
        gap: 8px;
    }
    #policy-links {
        padding: 12px 0;
    }
    footer {
        font-size: 0.92rem;
    }
}

/* 480px以下：小型スマホ最適化 */
@media (max-width: 480px) {
    header .logo img {
        height: 24px;
    }
    header .logo span {
        font-size: 1rem;
    }
    .column-card {
        padding: 8px;
    }
    .external-link-card {
        width: 100%;
        padding: 10px;
    }
    .company-logo {
        width: 70px;
    }
    .company-name {
        font-size: 15px;
    }
    .series-summary {
        font-size: 12.5px;
    }
}