/* 
 * SDGsページ専用スタイルシート（クマダカラー版）
 * 株式会社クマダ
 * メインカラー: グリーン系
 */

/* !important を使用してテーマのスタイルを上書き */

/* 基本スタイル */
.sdgs-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

.sdgs-page h1 {
    text-align: center !important;
    font-size: 2.5em !important;
    margin: 40px 0 !important;
    color: #2d5016 !important; /* クマダの深緑 */
}

.sdgs-page h2 {
    font-size: 2em !important;
    margin: 60px 0 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid #5a9a3c !important; /* クマダの緑 */
    color: #2d5016 !important;
}

.sdgs-page h3 {
    font-size: 1.5em !important;
    margin: 40px 0 20px !important;
    color: #3d6b23 !important;
}

.sdgs-page h4 {
    font-size: 1.2em !important;
    margin: 30px 0 15px !important;
    color: #2d5016 !important;
    font-weight: bold !important;
}

/* SDGsアイコングリッド */
.sdgs-icons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 6列→4列で約1.5倍大きく */
    gap: 20px !important;
    margin: 40px auto !important;
    padding: 40px !important;
    background: #f4f7f2 !important; /* 薄い緑がかった背景 */
    border-radius: 8px !important;
    max-width: 800px !important;
}

.sdgs-icons img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
    transition: transform 0.3s ease !important;
}

.sdgs-icons img:hover {
    transform: scale(1.05) !important;
}

/* 社長宣言セクション */
.president-message {
    background: linear-gradient(135deg, #5a9a3c 0%, #3d6b23 100%) !important; /* クマダの緑グラデーション */
    color: white !important;
    padding: 40px !important;
    border-radius: 12px !important;
    margin: 40px 0 !important;
    box-shadow: 0 10px 30px rgba(90, 154, 60, 0.2) !important;
}

.president-message h3 {
    color: white !important;
    font-size: 2em !important;
    margin-top: 0 !important;
    text-align: center !important;
}

.president-message h4 {
    color: #fff !important;
    border-left: 4px solid #fff !important;
    padding-left: 15px !important;
    margin: 30px 0 15px !important;
}

.president-message p {
    font-size: 1.1em !important;
    line-height: 2 !important;
    color: white !important;
}

.priority-items {
    background: rgba(255,255,255,0.15) !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
}

.priority-items p {
    margin: 10px 0 !important;
    padding-left: 20px !important;
    position: relative !important;
    color: white !important;
}

.priority-items p:before {
    content: "◎" !important;
    position: absolute !important;
    left: 0 !important;
    font-weight: bold !important;
    color: #c5e1a5 !important; /* 薄い緑 */
}

.signature {
    text-align: right !important;
    margin-top: 30px !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    color: white !important;
}

/* 取り組みセクション */
.initiative-section {
    margin: 60px 0 !important;
    padding: 40px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(90, 154, 60, 0.1) !important; /* 緑のシャドウ */
    border: 1px solid #e8f5e1 !important; /* 薄い緑のボーダー */
}

.initiative-section h3 {
    text-align: center !important;
    color: #2d5016 !important;
    font-size: 2em !important;
    margin-bottom: 30px !important;
}

/* SDGsアイコン（小） */
.sdgs-icons-small {
    display: grid !important; /* flexからgridに変更 */
    grid-template-columns: repeat(4, 1fr) !important; /* メインアイコンと同じ4列 */
    gap: 20px !important; /* メインアイコンと同じ間隔 */
    justify-content: center !important;
    margin: 20px auto 30px !important;
    max-width: 800px !important; /* メインアイコンと同じ最大幅 */
    padding: 0 40px !important;
}

.sdgs-icons-small img {
    width: 100% !important; /* グリッド幅いっぱいに */
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
}

/* テーブルスタイル */
.initiative-table-wrapper {
    overflow-x: auto !important;
    margin: 30px 0 !important;
    background: #f4f7f2 !important; /* 薄い緑背景 */
    padding: 20px !important;
    border-radius: 8px !important;
}

.initiative-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(90, 154, 60, 0.08) !important;
}

.initiative-table th,
.initiative-table td {
    padding: 15px 20px !important;
    border: 1px solid #d4e7c5 !important; /* 薄い緑のボーダー */
    text-align: left !important;
}

.initiative-table th {
    background: linear-gradient(135deg, #5a9a3c 0%, #3d6b23 100%) !important; /* クマダの緑 */
    color: white !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
}

.initiative-table tr:nth-child(even) {
    background: #f9fcf7 !important; /* 薄い緑の交互色 */
}

.initiative-table tr:hover {
    background: #e8f5e1 !important; /* 緑系のホバー */
    transition: background 0.3s ease !important;
}

/* SDGsとはセクション */
.about-sdgs {
    background: linear-gradient(135deg, #6fb346 0%, #4a8030 100%) !important; /* 明るめの緑グラデーション */
    color: white !important;
    padding: 50px !important;
    border-radius: 12px !important;
    margin: 60px 0 !important;
    box-shadow: 0 10px 30px rgba(90, 154, 60, 0.2) !important;
}

.about-sdgs h3 {
    color: white !important;
    font-size: 2em !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.about-sdgs p {
    font-size: 1.1em !important;
    line-height: 2 !important;
    color: white !important;
}

/* スクロール時の注釈 */
.scroll-hint {
    text-align: center !important;
    color: #5a9a3c !important; /* クマダの緑 */
    font-size: 0.9em !important;
    margin: 10px 0 !important;
    font-style: italic !important;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .sdgs-page {
        padding: 10px !important;
    }

    .sdgs-page h1 {
        font-size: 1.8em !important;
    }

    .sdgs-page h2 {
        font-size: 1.5em !important;
    }

    .sdgs-icons {
        grid-template-columns: repeat(2, 1fr) !important; /* 3列→2列で1.5倍大きく */
        gap: 15px !important;
        padding: 25px !important;
    }

    .president-message,
    .initiative-section,
    .about-sdgs {
        padding: 20px !important;
    }

    .initiative-table th,
    .initiative-table td {
        padding: 10px !important;
        font-size: 0.9em !important;
    }

    .sdgs-icons-small {
        display: grid !important; /* flexからgridに変更 */
        grid-template-columns: repeat(2, 1fr) !important; /* メインアイコンと同じ2列 */
        gap: 15px !important;
    }

    .sdgs-icons-small img {
        width: 100% !important; /* グリッド幅いっぱいに */
        height: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sdgs-icons {
        grid-template-columns: repeat(3, 1fr) !important; /* タブレットは3列 */
    }
    
    .sdgs-icons-small {
        grid-template-columns: repeat(3, 1fr) !important; /* メインアイコンと同じ3列 */
    }
}

/* アクセント要素にクマダカラーを追加 */
.sdgs-page a {
    color: #5a9a3c !important;
}

.sdgs-page a:hover {
    color: #3d6b23 !important;
}