@charset "UTF-8";

section[id] {
  scroll-margin-top: 80px; /* 固定ヘッダーの高さ分 */
}

/* ==========================================
   1. 全体レイアウト（画面いっぱいの背景と1100px幅）
   ========================================== */
.safety-csr-wrapper {
    width: 100%;
    /* 上部のディープブルーから下部へのグラデーション */
    background: linear-gradient(to bottom, #0a3674 0%, #0a3674 250px, #f4f7f9 250px, #f4f7f9 100%);
    padding: 70px 20px 60px 20px;
    box-sizing: border-box;
}

/* 既存のコードはそのままに、最下部に追加してください */
.scsr-container {
    width: 100% !important;
    max-width: 1100px !important;
    display: block !important; /* Flexboxなどの影響を打ち消す */
}

/* ラッパー内のすべての要素でbox-sizingを統一 */
.scsr-container * {
    box-sizing: border-box;
}

/* ==========================================
   2. ページメインタイトル
   ========================================== */
.scsr-main-title {
    text-align: center;
    color: #ffffff;
    font-size: 34px;
    font-weight: 900;
    font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS Mincho", serif;
    letter-spacing: 0.2em;
    margin: 0 0 55px 0;
    line-height: 1.2;
}

/* ==========================================
   3. ナビゲーションカード
   ========================================== */
.scsr-nav-card {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.04);
    padding: 55px 65px;
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
}

.scsr-nav-block-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    margin: 0 0 12px 0;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 14px;
    line-height: 1.1;
}
.scsr-nav-block-subtitle {
    font-size: 11px;
    color: #a0aec0;
    text-transform: uppercase;
    font-weight: normal;
    display: block;
    margin-top: 8px;
    letter-spacing: 0.05em;
}

.scsr-nav-rows {
    display: flex;
    flex-direction: column;
}

.scsr-nav-row.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px; 
}

.scsr-nav-link-box {
    width: 100%;
    padding: 10px 0;
}

.scsr-nav-item {
    display: flex;
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #0a3674;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #c8d4e2;
    transition: opacity 0.2s ease;
}
.scsr-nav-item:hover {
    opacity: 0.7;
}

.scsr-empty-cell {
    padding: 10px 0;
}

/* 丸背景なしのSVG矢印設定 */
.scsr-nav-item::before {
    content: "";
    display: inline-block;
    width: 12px;  
    height: 12px;
    margin-right: 10px;
    flex-shrink: 0;
    
    background-image: url("../images/safety/arrow.svg");
    background-size: contain; 
    background-position: center center;
    background-repeat: no-repeat;

    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ==========================================
   4. メインコンテンツセクション（カンプ完全トレース仕様）
   ========================================== */
.scsr-visual-flex-group {
    width: 100%;
    margin-bottom: 0; 
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.scsr-visual-text-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
}

.scsr-section-title {
    width: 100%;
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    margin: 0 0 45px 0;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    line-height: 1.0;
}
.scsr-section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 28px;
    background-color: #0a3674;
    margin-right: 12px;
    flex-shrink: 0;
}

.scsr-caption-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scsr-caption-badge-wrapper.scsr-badge-top,
.scsr-caption-badge-wrapper.scsr-badge-bottom {
    padding-left: 0; 
    text-align: left;
}

.scsr-caption-badge {
    background-color: #0b3674;
    color: #ffffff;
    padding: 10px 24px;
    font-size: 32px;
    font-weight: 500;
    font-family: "Times New Roman", "Yu Mincho", "游明朝", "MS Mincho", serif; 
    letter-spacing: 0.08em;
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    border-radius: 0;
    text-align: left;
}

.scsr-caption-badge.scsr-large {
    font-size: 32px; 
    padding: 10px 24px;
}

.scsr-visual-image-side {
    width: 600px;
    flex-shrink: 0;
}

.scsr-visual-banner {
    width: 100%;
    aspect-ratio: 6 / 4;
    border-radius: 6px;
    overflow: hidden;
}

.scsr-visual-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
}

/* 本文文章カード（横幅1000px設定・写真へ50pxの重なり） */
.scsr-info-card {
    max-width: 1000px;         
    width: 100%;
    margin: 0 auto;            
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.02);
    padding: 60px 80px 110px 80px; 
    margin-bottom: 50px;
    position: relative;
    top: -50px;                
    z-index: 5;                
}

.scsr-info-text-block p {
    font-size: 16px;
    color: #333333;
    margin: 0 0 28px 0;
    text-align: justify;
    line-height: 2.0;
    letter-spacing: 0.03em;
}
.scsr-info-text-block p.scsr-highlight-p {
    margin-top: 40px;
    margin-bottom: 0;
}

/* ==========================================
   5. 下部レイアウト: ２カラム（PC版仕様）
   ========================================== */
.scsr-bottom-flex-group {
    display: grid;
    grid-template-columns: 55% 30% 15%; /* 右側に15%のブランク空き */
    align-items: stretch;
    position: relative;
    top: -150px; /* 白枠の手前への潜り込み */
    z-index: 10; 
    margin-bottom: -150px; 
}

/* 左側の活動写真 */
.scsr-activity-photos {
    width: 100%;
    padding-right: 40px; 
}
.scsr-activity-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* 右側: 輸送安全マネジメントコンテナ（全体の30%幅、高さ250px固定） */
.scsr-management-box {
    grid-column: 2 / 3; 
    background-color: #0a3674;
    border-radius: 4px;
    padding: 24px 30px; 
    color: #ffffff;
    height: 250px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
}
.scsr-management-title {
    font-size: 18px; 
    font-weight: bold;
    margin: 0; 
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.scsr-download-btn {
    background-color: #ffffff;
    color: #0a3674;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px; 
    border-radius: 4px;
    margin-bottom: 0; 
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.scsr-download-btn:hover {
    background-color: #f0f4f8;
}

.scsr-btn-arrow-circle {
    width: 12px;  
    height: 12px;
    position: relative;
    flex-shrink: 0;
    
    background-image: url("../images/safety/arrow.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(-90deg); 

    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ==========================================
   6. レスポンシブ対応 (タブレット・ノートPC)
   ========================================== */
@media (min-width: 1025px) and (max-width: 1200px) {
  .scsr-visual-image-side {
    width: 50%;
  }
}
@media (max-width: 1024px) {
    .scsr-visual-flex-group {
        gap: 30px;
    }
    .scsr-caption-badge {
        font-size: 24px;
    }
    .scsr-caption-badge.scsr-large {
        font-size: 24px;
    }
}

@media (max-width: 960px) {
    .scsr-nav-card {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 45px 40px;
    }
    .scsr-bottom-flex-group {
        grid-template-columns: 1fr; 
        gap: 40px;
        top: 0; 
        margin-bottom: 0;
    }
    .scsr-activity-photos {
        padding-right: 0;
    }
    .scsr-info-card {
        padding: 40px 40px;
        max-width: 100%; 
        top: 0; 
    }
    .scsr-management-box {
        height: auto; 
        padding: 35px 25px;
        gap: 20px;
    }
    .scsr-download-btn {
        padding: 16px 20px;
    }
}

/* ==========================================
   7. レスポンシブ対応 (スマホ専用)
   ========================================== */
@media (max-width: 768px) {
    .scsr-visual-flex-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    
    .scsr-visual-image-side {
        width: 100%;
    }
    
    .scsr-caption-badge {
        font-size: 20px;
        padding: 8px 16px;
    }
    .scsr-caption-badge.scsr-large {
        font-size: 18px;
        padding: 8px 16px;
    }
}

@media (max-width: 600px) {
    .safety-csr-wrapper {
        padding: 50px 15px 30px 15px;
    }
    .scsr-main-title {
        font-size: 26px;
        margin-bottom: 40px;
    }
    
    .scsr-nav-card {
        padding: 40px 24px;
        gap: 45px;
    }
    
    .scsr-nav-block-title {
        font-size: 24px;
        margin-bottom: 0px;
        padding-bottom: 12px;
    }

    .scsr-nav-row.col-2 {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 0;
    }

    .scsr-nav-row.col-2 .scsr-nav-link-box {
        flex: 1;
        width: 50%;
    }
    
    .scsr-nav-row.col-2 .scsr-nav-link-box:only-child,
    .scsr-nav-row.col-2 .scsr-nav-link-box:first-child:nth-last-child(1) {
        flex: none;
        width: 100%;
    }
    
    .scsr-nav-row.col-2 .scsr-nav-link-box:nth-child(1) {
        padding-right: 15px;
    }
    .scsr-nav-row.col-2 .scsr-nav-link-box:nth-child(2) {
        padding-left: 15px;
    }

    .scsr-empty-cell {
        display: none;
    }
    
    /* ------------------------------------------
       【重要修正】スマホ時の下部エリア最適化
       ------------------------------------------ */
    .scsr-bottom-flex-group {
        display: flex;
        flex-direction: column; /* 確実に縦並びにする */
        align-items: center;     /* 横方向の中央揃えを保証 */
        gap: 30px;               /* 縦に並んだアイテム同士の間隔 */
	}
	/* 左側：現場でのミーティング写真 /
	.scsr-activity-photos {
	width: 80% !important; / 【ご指示】横幅を確実に80%に制限 /
	margin: 0 auto; / センター寄せ /
	padding-right: 0; / PC用の余白をリセット */
	}
	/* 右側：青背景の安全マネジメントリンクボックス /
	.scsr-management-box {
	width: 80% !important; / 【ご指示】横幅を確実に80%に制限 /
	margin: 0 auto; / センター寄せ /
	height: auto; / 縦のボタン配列がスマホでも崩れないように高さ制限を解除 /
	padding: 30px 20px;
	gap: 15px; / ボタン同士のスマートな隙間 */
	}
	.scsr-download-btn {
	padding: 14px 16px;
	}
}

@charset "UTF-8";

/* ==========================================
   6. 安全強化の日セクション（クラス名統一・余白復元スタイル）
   他セクションのネガティブマージンによる侵入を完全に防ぎ、120pxの余白を強制有効化します
   ========================================== */

.scsr-day-section {
    /* 他のネガティブマージンの潜り込みを完全に押し返す物理障壁 */
    
    /* 前の要素の回り込みや絶対配置の干渉をこのセクションの手前で完全にリセット */
    display: block !important;
    clear: both !important;
}
/* 内部要素限定のbox-sizingの安全リセット */
.scsr-day-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 1100pxコンテナ内 */
.scsr-day-section .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    margin-top: 120px !important; 
    
    /* 上下の余白（120px / 80px）をブラウザへ最優先で適用 */
    padding-top: 20px !important;
    padding-bottom: 80px !important;
}

/* セクションタイトル（左寄せ ＆ 青マーカー） */
.scsr-day-section .scsr-day-section-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    display: inline-flex; 
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 24px;
    text-align: left;
}
.scsr-day-section .scsr-day-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    background-color: #0056b3;
    margin-right: 12px;
    display: inline-block;
}

/* リード文（左寄せ） */
.scsr-day-section .scsr-day-section-lead {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 70px;
    padding-left: 16px; /* タイトルの文字頭と縦ラインをピタッと揃える余白 */
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-align: left;
    width: 100%;
}

/* 4行のリストコンテナ（項目間のスペースを100pxに拡張） */
.scsr-day-section .scsr-day-report-list {
    display: flex;
    flex-direction: column;
    gap: 100px; 
    width: 100%;
}

/* 各レポート（PC版：左右並列・最上部トップ揃え） */
.scsr-day-section .scsr-day-report-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

/* 左側：写真ボックス（横幅410px固定 ＆ 縦の仕切り線） */
.scsr-day-section .scsr-day-report-img {
    width: 410px;
    flex-shrink: 0;
    display: block;
    border-right: 1px solid #dcdcdc; /* PC用の縦の仕切り線 */
    padding-right: 50px;            
}
.scsr-day-section .scsr-day-report-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 右側：テキストボックス（仕切り線からの右側余白） */
.scsr-day-section .scsr-day-report-text {
    flex: 1;
    padding-left: 50px;            
    padding-top: 8px;              /* 写真の上端と文字頭を一直線に揃える微調整 */
    display: block;
    text-align: left;              
}

/* レポート見出し */
.scsr-day-section .scsr-day-report-text h3 {
    font-size: 22px;
    color: #004494;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}
.scsr-day-section .scsr-day-report-text h3 span {
    display: block;
    margin-top: 4px;
}

/* 説明文テキスト */
.scsr-day-section .scsr-day-report-text p {
    font-size: 14px;
    color: #444444;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

/* ==========================================
   安全強化の日セクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
    .scsr-day-section .scsr-container {
        align-items: flex-start; 
    }

    .scsr-day-section .scsr-day-report-img {
        width: 350px;
        padding-right: 35px;
    }
    .scsr-day-section .scsr-day-report-text {
        padding-left: 35px;
    }
}

@media (max-width: 768px) {
    /* スマホ表示時のpadding指定 */
    .scsr-day-section {
    }
    .scsr-day-section .scsr-container {
         margin-top: 60px !important;
        padding-top: 20px !important;
        padding-bottom: 60px !important;
       align-items: flex-start; 
    }

    .scsr-day-section .scsr-day-section-title {
        margin-left: 10%; /* スマホ時の文字ブロック(90%幅)の左端位置に綺麗に連動 */
    }
    .scsr-day-section .scsr-day-section-lead {
        width: 90%;
        margin: 20px auto 45px auto;
        padding-left: 0;
    }

    /* スマホ時は綺麗に縦並び（1カラム）へスイッチ */
    .scsr-day-section .scsr-day-report-item {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
    
    /* 画像ボックスは横幅70%のセンター揃え ＆ 【仕切り線は非表示】 */
    .scsr-day-section .scsr-day-report-img {
        border-right: none !important; 
        padding-right: 0 !important;   
        width: 70% !important;
        margin: 0 auto;
    }
    
    /* テキストボックスは横幅90%のセンター揃え */
    .scsr-day-section .scsr-day-report-text {
        padding-left: 0 !important;
        padding-top: 0;
        width: 90% !important;
        margin: 0 auto;
        text-align: left; 
    }
    
    .scsr-day-section .scsr-day-report-list {
        gap: 70px; 
    }
}

@media (max-width: 600px) {
    .scsr-day-section .scsr-day-section-title {
        font-size: 24px;
        margin-left: 5%; 
    }
    .scsr-day-section .scsr-day-section-lead {
        width: 95%;
        font-size: 13px;
    }
    .scsr-day-section .scsr-day-report-text h3 {
        font-size: 18px;
    }
    .scsr-day-section .scsr-day-report-text h3 span {
        font-size: 18px;
    }
}
@charset "UTF-8";

/* ==========================================
   7. 認証セクション（クラス名統一・余白復元スタイル）
   他要素への潜り込みを防ぐため、安全強化の日と同様に最前面レイヤー化を適用しています
   ========================================== */

/* セクション全体のトップ余白、背景、および最前面レイヤー化 */
.scsr-cert-section {
    position: relative;
    z-index: 20; /* 前のセクションのネガティブマージンに潰されないよう独立化 */
    
    padding: 120px 20px 80px 20px !important; /* 安全強化の日と同じ美しい120pxの統一余白 */
    background-color: #f4f7f9;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    display: block;
    width: 100%;
}

/* 内部要素限定のbox-sizingの安全リセット */
.scsr-cert-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 1100pxコンテナ設定 */
.scsr-cert-section .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ基準 */
}

/* セクションタイトル（左寄せ ＆ 青マーカー） */
.scsr-cert-section .scsr-cert-section-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    display: inline-flex; 
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 75px; 
    text-align: left;
}
.scsr-cert-section .scsr-cert-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    background-color: #0056b3;
    margin-right: 12px;
    display: inline-block;
}

/* 4行の認証リストコンテナ */
.scsr-cert-section .scsr-cert-list {
    display: flex;
    flex-direction: column;
    gap: 100px; 
    width: 100%;
}

/* 各認証アイテム（PC版：左テキスト・右ロゴマーク、上端フラット揃え） */
.scsr-cert-section .scsr-cert-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 60px;
}

/* 左側：テキストエリア（60%幅に制限・左側にスペースを創出） */
.scsr-cert-section .scsr-cert-text {
    width: 60%; 
    flex-shrink: 0;
    padding-top: 10px; 
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

/* 認証タイトル見出し（真下に仕切り線を配置） */
.scsr-cert-section .scsr-cert-text h3 {
    width: 100%;
    font-size: 22px;
    color: #004494;
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 14px; 
    border-bottom: 1px solid #dcdcdc; /* <h3>の真下の仕切り線（グレー） */
    margin-bottom: 24px;
    letter-spacing: 0.02em;
    text-align: left; 
}

/* 認証説明文章 */
.scsr-cert-section .scsr-cert-text p {
    width: 100%;
    font-size: 14px;
    color: #444444;
    line-height: 2.0;
    letter-spacing: 0.03em;
    text-align: justify;
}

/* 右側：ロゴマークの親エリア（PC環境での残りの40%幅を満たす） */
.scsr-cert-section .scsr-cert-img-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-end; 
}

/* ロゴマークを包む、白い背景枠（比率を41：22に完全固定） */
.scsr-cert-section .scsr-cert-img-box {
    width: 100%;
    max-width: 410px; 
    aspect-ratio: 41 / 22; /* 横41：縦22のスマートな長方形比率に固定 */
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); 
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px; 
}

/* 認証ロゴ画像本体 */
.scsr-cert-section .scsr-cert-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    display: block;
}

/* ==========================================
   認証セクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
    .scsr-cert-section .scsr-cert-item {
        gap: 40px;
    }
    .scsr-cert-section .scsr-cert-text {
        width: 55%; 
    }
}

@media (max-width: 768px) {
    .scsr-cert-section {
        padding: 80px 15px 60px 15px !important;
    }

    /* スマホ時は綺麗に縦並び（1カラム）へスイッチ */
    .scsr-cert-section .scsr-cert-item {
        flex-direction: column-reverse; 
        align-items: center;
        gap: 25px;
    }
    
    /* ロゴマークボックスは横幅「50%」のセンター揃え */
    .scsr-cert-section .scsr-cert-img-wrap {
        width: 50% !important; 
        margin: 0 auto;
    }
    
    /* スマホ時も「41:22」の長方形比率を完全に固定 */
    .scsr-cert-section .scsr-cert-img-box {
        max-width: 100%; 
        aspect-ratio: 41 / 22 !important; 
        padding: 10px 15px; 
    }
    
    /* テキストボックスは全体の調和を保つため横幅90%のセンター揃え */
    .scsr-cert-section .scsr-cert-text {
        width: 90% !important; 
        margin: 0 auto;
        align-items: flex-start; 
    }
    
    .scsr-cert-section .scsr-cert-section-title {
        margin-left: 5%; 
        margin-bottom: 45px;
    }
    .scsr-cert-section .scsr-cert-list {
        gap: 70px; 
    }
}

@media (max-width: 600px) {
    .scsr-cert-section .scsr-cert-section-title {
        font-size: 24px;
    }
    .scsr-cert-section .scsr-cert-text h3 {
        font-size: 18px;
        padding-bottom: 10px;
        margin-bottom: 18px;
    }
    .scsr-cert-section .scsr-cert-img-wrap {
        width: 65% !important; 
    }
}

/* ==========================================
   JICAセクション（単独カプセル化スタイル）
   背景比率150:105 ＆ グレーカード900px中央揃え（左上に赤ライン） ＆ 下部50px前面重なり
   ========================================== */

/* セクション全体のトップ余白、およびフォント指定 */
.scsr-jica-section {
    padding: 120px 20px 80px 20px; 
    background-color: #ffffff;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    display: block;
    width: 100%;
}

/* 内部要素限定のbox-sizingの安全リセット */
.scsr-jica-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* コンテンツ最大横幅1100px・中央揃えコンテナ */
 .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* タイトルは左寄せ */
}

/* セクションタイトル（左寄せ ＆ 青マーカー） */
 .scsr-jica-section-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    display: inline-flex; 
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 50px; 
    text-align: left;
}
 .scsr-jica-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    background-color: #0056b3;
    margin-right: 12px;
    display: inline-block;
}

/* 背景地図を敷くメインラッパー（1100px幅・中央揃え・比率150:105固定） */
 .scsr-jica-bg-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 150 / 105; 
    background-image: url("../images/safety/csr_bg.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    position: relative; 
}

/* ------------------------------------------
   上段：グレーのテキスト＆イラストカード（左上に赤ラインを追加）
   ------------------------------------------ */
 .scsr-jica-info-card {
    position: absolute;
    top: 60px; 
    left: 0; right: 0;
    max-width: 900px;
    margin: 0 auto; 
    background-color: #f1f4f8; 
    border-radius: 6px;
    padding: 50px 60px 150px 60px; 
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    z-index: 5;
}

/* 【完全再現】グレーカードの左上に配置された赤色のアクセントライン（擬似要素） */
 .scsr-jica-info-card::before {
    content: "";
    position: absolute;
    /* カードの左端から少し内側（カンプ同様に約60pxの位置）に配置 */
    left: 60px;
    /* カードの上枠線（ボーダーライン）にちょうど半分またがるようにピッタリ配置 */
    top: -3px; 
    /* カンプ特有のシャープで存在感のある細長いサイズ */
    width: 70px;
    height: 6px;
    background-color: #e60012; /* カンプに合わせた鮮やかな純赤 */
    border-radius: 99px; /* 角を少し滑らかにする場合（完全に直角なら削除してください） */
    display: block;
    z-index: 6;
}

/* 左側：テキストエリア（60%幅・右寄せ） */
 .scsr-jica-text {
    width: 60%; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}
 .scsr-jica-text p {
    width: 100%;
    font-size: 15px;
    color: #444444;
    line-height: 2.2; 
    letter-spacing: 0.03em;
    text-align: justify;
}

/* 右側：パラオのイラストマップエリア */
 .scsr-jica-map-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
 .scsr-jica-map-box img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

/* ------------------------------------------
   下段：2枚の写真レイアウト（グレーの枠に50px前面重なり）
   ------------------------------------------ */
 .scsr-jica-photos-layout {
    position: absolute;
    bottom: 50px; 
    left: 0; right: 0;
    max-width: 780px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
    z-index: 10; 
}
 .scsr-jica-photo-item {
    width: 100%;
    aspect-ratio: 3 / 2; 
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
}
 .scsr-jica-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   JICAセクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
     .scsr-jica-bg-wrapper {
        aspect-ratio: auto; 
        background-size: contain;
    }
     .scsr-jica-info-card {
        position: relative;
        top: 0; left: 0; right: 0;
        max-width: 100%;
        padding: 40px;
    }
     .scsr-jica-photos-layout {
        position: relative;
        bottom: 0; left: 0; right: 0;
        max-width: 100%;
        margin-top: 30px;
    }
     .scsr-jica-text {
        width: 55%;
    }
    /* タブレット環境等でも赤ラインの位置を微調整維持 */
     .scsr-jica-info-card::before {
        left: 40px;
    }
}

@media (max-width: 768px) {
    .scsr-jica-section {
        padding: 80px 15px 60px 15px;
    }
     .scsr-jica-section-title {
        margin-left: 5%;
        margin-bottom: 40px;
    }

     .scsr-jica-info-card {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 35px 20px;
    }

    /* スマホ縦並び時は赤ラインが文章の頭（90%幅の左端）に綺麗に揃うよう配置を同期 */
     .scsr-jica-info-card::before {
        left: 5%; 
    }

    /* 【全体同期共通ルール】テキスト：横幅90%センター揃え */
     .scsr-jica-text {
        width: 90% !important;
        margin: 0 auto;
        align-items: flex-start;
    }

    /* 【全体同期共通ルール】イラスト：横幅70%センター揃え */
     .scsr-jica-map-box {
        width: 70% !important;
        margin: 0 auto;
    }

    /* 【全体同期共通ルール】下部写真：横幅70%縦並び中央揃え */
     .scsr-jica-photos-layout {
        grid-template-columns: 1fr; 
        width: 70% !important;
        margin: 40px auto 0 auto;
        gap: 25px;
    }
}

@media (max-width: 600px) {
     .scsr-jica-section-title {
        font-size: 24px;
    }
     .scsr-jica-text p {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* ==========================================
   5. 被災地支援セクション（単独カプセル化スタイル）
   グレー背景幅100% ＆ コンテンツ1100px中央揃え ＆ 白カード左上に赤ライン仕様
   ========================================== */

/* セクション全体の背景に薄グレー（幅100%）を敷き詰め、トップ余白とフォントを設定 */
.scsr-support-section {
    padding: 120px 20px; 
    background-color: #f4f7f9; /* カンプ通りの品のある薄いグレー背景 */
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    display: block;
    width: 100%;
}

/* 内部要素限定のbox-sizingの安全リセット */
.scsr-support-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* コンテンツ最大横幅1100px・中央揃えコンテナ */
 .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* タイトル・リード文は左寄せ */
}

/* セクションタイトル（左寄せ ＆ 青マーカー） */
 .scsr-support-section-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    display: inline-flex; 
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 24px;
    text-align: left;
}
 .scsr-support-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    background-color: #0056b3;
    margin-right: 12px;
    display: inline-block;
}

/* リード文（左寄せ） */
 .scsr-support-section-lead {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 50px;
    padding-left: 16px; 
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-align: left;
    width: 100%;
}

/* パノラマメイン写真コンテナ（1100px幅・110:35比率固定） */
 .scsr-support-main-banner {
    width: 100%;
    aspect-ratio: 110 / 35; 
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
 .scsr-support-main-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ------------------------------------------
   下段：白い文章＆右側写真カード（左上に赤ラインを追加）
   ------------------------------------------ */
 .scsr-support-info-card {
    max-width: 1000px; 
    width: 100%;
    margin: 0 auto; 
    
    background-color: #ffffff; 
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); 
    padding: 60px 60px;
    
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
    
    /* 上のメインバナー写真に50pxだけ正確に上に重ねてめり込ませる設定 */
    position: relative;
    top: -50px; 
    z-index: 5; 
    margin-bottom: -50px; 
}

/* 【完全再現】白い背景カードの左上に配置された赤色のアクセントライン（擬似要素） */
 .scsr-support-info-card::before {
    content: "";
    position: absolute;
    /* カードの左端から少し内側（カンプ同様に約60pxの位置）に配置 */
    left: 60px;
    /* カードの上枠線（ボーダーライン）にちょうど半分またがるようにピッタリ配置 */
    top: -3px; 
    /* カンプ特有のシャープで存在感のある細長いサイズ */
    width: 70px;
    height: 6px;
    background-color: #e60012; /* カンプに合わせた鮮やかな純赤 */
    border-radius: 99px; 
    display: block;
    z-index: 6;
}

/* 左側：テキストエリア（60%幅・右寄せ） */
 .scsr-support-text-side {
    width: 60%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

/* 通常の段落文章スタイル */
 .scsr-support-paragraph {
    width: 100%;
    font-size: 15px;
    color: #444444;
    line-height: 2.0;
    letter-spacing: 0.03em;
    text-align: justify;
    margin-bottom: 28px;
}
 .scsr-support-paragraph:last-child {
    margin-bottom: 0;
}

/* 中央の強調メッセージ */
 .scsr-support-paragraph.scsr-highlight-blue {
    width: 100%;
    font-size: 15px;
    color: #004494; 
    font-weight: bold;
    line-height: 1.8;
    margin-top: 5px;
    margin-bottom: 32px;
}

/* 右側：縦長現場作業写真エリア（274:430比率固定） */
 .scsr-support-img-side {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
 .scsr-support-img-side img {
    width: 100%;
    max-width: 320px; 
    aspect-ratio: 274 / 430; 
    object-fit: cover;
    border-radius: 4px; 
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* ==========================================
   被災地支援セクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
     .scsr-support-info-card {
        gap: 35px;
        padding: 40px;
    }
     .scsr-support-text-side {
        width: 55%; 
    }
    /* タブレット環境等でも赤ラインの位置を微調整維持 */
     .scsr-support-info-card::before {
        left: 40px;
    }
}

@media (max-width: 768px) {
    .scsr-support-section {
        padding: 80px 15px 60px 15px;
    }
     .scsr-support-section-title {
        margin-left: 5%; 
        margin-bottom: 40px;
    }
     .scsr-support-section-lead {
        width: 90%;
        margin: 20px auto 45px auto;
        padding-left: 0;
    }

    /* スマホ時は写真の上に重なるネガティブ配置を安全に解除 */
     .scsr-support-info-card {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 35px 20px;
        top: 0;
        max-width: 100%;
        margin-top: 30px;
        margin-bottom: 0;
    }

    /* スマホ縦並び時は赤ラインが文章の頭（90%幅の左端）に綺麗に揃うよう配置を同期 */
     .scsr-support-info-card::before {
        left: 5%; 
    }

    /* 【全体同期共通ルール】テキスト：横幅90%センター揃え */
     .scsr-support-text-side {
        width: 90% !important;
        margin: 0 auto;
        align-items: flex-start; 
    }

    /* 【全体同期共通ルール】右側の縦長現場写真も、スマホ時は横幅70%の中央揃えへスイッチ */
     .scsr-support-img-side {
        width: 70% !important;
        margin: 0 auto;
        justify-content: center;
    }
     .scsr-support-img-side img {
        max-width: 70%;
        aspect-ratio: 274 / 430 !important; 
    }
}

@media (max-width: 600px) {
     .scsr-support-section-title {
        font-size: 24px;
    }
     .scsr-support-paragraph {
        font-size: 15px;
        line-height: 1.8;
    }
     .scsr-support-paragraph.scsr-highlight-blue {
        font-size: 15px;
    }
}

/* ==========================================
   6. 感謝米PJセクション（単独カプセル化スタイル）
   グレーカード900px中央揃え（左上に赤ライン） ＆ 下部写真50px前面重なり仕様
   ========================================== */

/* セクション全体のトップ余白、およびフォント指定 */
.scsr-rice-section {
    padding: 120px 20px 80px 20px; 
    background-color: #ffffff; /* 白背景ベース */
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    display: block;
    width: 100%;
}

/* 内部要素限定のbox-sizingの安全リセット */
.scsr-rice-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* コンテンツ最大横幅1100px・中央揃えコンテナ */
 .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* タイトルは左寄せ */
}

/* セクションタイトル（左寄せ ＆ 青マーカー） */
 .scsr-rice-section-title {
    font-size: 28px;
    color: #0a3674;
    font-weight: bold;
    display: inline-flex; 
    align-items: center;
    letter-spacing: 0.05em;
    line-height: 1.0;
    margin-bottom: 50px; 
    text-align: left;
}
 .scsr-rice-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    background-color: #0056b3;
    margin-right: 12px;
    display: inline-block;
}

/* ------------------------------------------
   上段：グレーのテキストカード（最大幅900px・中央揃え）
   ------------------------------------------ */
 .scsr-rice-info-card {
    width: 100%;
    max-width: 900px; /* カンプ通りの引き締まった横幅 */
    margin: 0 auto; /* 1100pxコンテナ内で美しく中央揃え */
    background-color: #f1f4f8; /* カンプ特有の品のある薄グレー */
    border-radius: 6px;
    /* 下部の写真が50px前面に重なるため、底パディングを100pxに拡張 */
    padding: 55px 65px 100px 65px; 
    position: relative;
    z-index: 5;
}

/* 【カンプ完全再現】グレーカードの左上に配置された赤色のアクセントライン */
 .scsr-rice-info-card::before {
    content: "";
    position: absolute;
    left: 60px; /* カードの左端からのマージン */
    top: -3px; /* 枠線上にピッタリまたがる配置 */
    width: 70px;
    height: 6px;
    background-color: #e60012; /* 鮮やかな赤色 */
    border-radius: 99px;
    display: block;
    z-index: 6;
}

/* テキストエリア（JICAの美学を継承し、中央に美しく収まる幅に調整） */
 .scsr-rice-text {
    width: 100%;
    display: flex;
    flex-direction: column;
}
 .scsr-rice-text p {
    width: 100%;
    font-size: 15px;
    color: #444444;
    line-height: 2.2; /* カンプ同様のゆったりと読みやすい行間 */
    letter-spacing: 0.03em;
    text-align: justify;
}

/* ------------------------------------------
   下段：2枚の写真レイアウト（上のグレーカードに50px前面重なり）
   ------------------------------------------ */
 .scsr-rice-photos-layout {
    width: 100%;
    max-width: 780px; /* グレーカードの内側余白と美しく揃う横幅制限 */
    margin: -50px auto 0 auto; /* 【重要】絶対配置の崩れを防ぐため、ネガティブマージンで正確に50px引き上げ */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 写真を綺麗に2分割並列 */
    gap: 30px; /* 写真同士の間の綺麗な溝余白 */
    position: relative;
    z-index: 10; /* グレーカードの手前に重ねる前面配置 */
}
 .scsr-rice-photo-item {
    width: 100%;
    aspect-ratio: 3 / 2; /* 2枚の写真の高さが綺麗にシンメトリーに揃う3:2比率 */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* 淡く上品な影 */
}
 .scsr-rice-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================
   感謝米PJセクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
     .scsr-rice-info-card {
        max-width: 1000px;
        padding: 40px 40px 80px 40px;
    }
     .scsr-rice-photos-layout {
        max-width: 880px;
    }
     .scsr-rice-info-card::before {
        left: 40px;
    }
}

@media (max-width: 768px) {
    .scsr-rice-section {
        padding: 80px 15px 60px 15px;
    }
     .scsr-rice-section-title {
        margin-left: 5%;
        margin-bottom: 40px;
    }

    /* スマホ表示時は窮屈さを防ぐため、写真のネガティブ重なりを安全に解除して縦並びへ */
     .scsr-rice-info-card {
        padding: 35px 20px;
        margin-bottom: 0;
    }
     .scsr-rice-info-card::before {
        left: 5%; 
    }

    /* 【全体同期共通ルール】テキスト：横幅90%センター揃え */
     .scsr-rice-text {
        width: 90% !important;
        margin: 0 auto;
    }
     .scsr-rice-text p {
        font-size: 15px;
        line-height: 1.8;
    }

    /* 【全体同期共通ルール】下部写真：横幅70%縦並び中央揃え */
     .scsr-rice-photos-layout {
        grid-template-columns: 1fr; 
        width: 70% !important;
        margin: 40px auto 0 auto;
        gap: 25px;
    }
     .scsr-rice-photo-item {
        aspect-ratio: 3 / 2 !important; /* 縦並び時も美しい3:2をキープ */
    }
}

@media (max-width: 600px) {
     .scsr-rice-section-title {
        font-size: 24px;
    }
}

/* ==========================================
   7. マッチング基金セクション（単独カプセル化スタイル）
   グレー背景幅100% ＆ コンテンツ1100px中央揃え ＆ 左右2カラムレイアウト仕様
   ========================================== */

/* 【重要】セクション全体の背景に薄グレー（幅100%）を敷き詰め、上下余白とフォントを設定 */
.scsr-fund-section {
    padding: 120px 20px; 
    background-color: #f4f7f9; /* 被災地支援セクションと完全に統一した美しい薄グレー背景 */
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    display: block;
    width: 100%;
}

/* 内部要素限定のbox-sizingの安全リセット */
.scsr-fund-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* コンテンツ最大横幅1100px・中央揃えコンテナ */
 .scsr-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* 左右を綺麗に振り分けるフレックスコンテナ（上端フラット揃え） */
 .scsr-fund-flex-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px; /* 左のテキストと右のイラストの間のクリーンな空間余白 */
}

/* ------------------------------------------
   左側：タイトル ＆ テキストエリア（美しい60%幅に制限）
   ------------------------------------------ */
 .scsr-fund-text-side {
    width: 60%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* セクションタイトル（カンプ通りの2行構成、力強い太ゴシック、鮮やかなディープブルー） */
 .scsr-fund-section-title {
    font-size: 32px; /* カンプに合わせた、インパクトのある少し大きめの文字サイズ */
    color: #0a3674;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 40px; /* 文章ブロックまでの心地よい縦マージン */
    letter-spacing: 0.03em;
    display: flex;
    align-items: flex-start;
    text-align: left;
}
/* 左側の青い縦マーカー線 */
 .scsr-fund-section-title::before {
    content: "";
    width: 4px;
    height: 34px; /* タイトルの1行目の文字高さにピッタリ同期する設定 */
    background-color: #0056b3;
    margin-right: 14px;
    margin-top: 4px; /* マーカーの上端を文字の高さに合わせる微調整 */
    display: inline-block;
    flex-shrink: 0;
}

/* 文章カードコンテナ */
 .scsr-fund-desc-block {
    width: 100%;
}

/* 各段落文章スタイル（カンプ通りのゆったりとした読みやすい2.0行間） */
 .scsr-fund-paragraph {
    font-size: 15px;
    color: #444444;
    line-height: 2.0;
    letter-spacing: 0.04em;
    text-align: justify;
    margin-bottom: 24px;
}
 .scsr-fund-paragraph:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------
   右側：イラストマークエリア（40%幅を満たす）
   ------------------------------------------ */
 .scsr-fund-img-side {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* コンテナ全体の右端に吸着 */
    align-items: center;
    padding-top: 20px; /* タイトルとの水平ラインを美しく見せるための調整 */
}

/* イラストを配置するボックス（最大横幅410pxでページ全体のグリッド規則を継承） */
 .scsr-fund-icon-box {
    width: 100%;
    max-width: 410px;
    display: flex;
    justify-content: center;
    align-items: center;
}
 .scsr-fund-icon-box img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain; /* イラストの比率を絶対に崩さない */
    display: block;
}

/* ==========================================
   マッチング基金セクション専用：レスポンス対応
   ========================================== */
@media (max-width: 1024px) {
     .scsr-fund-flex-group {
        gap: 40px;
    }
     .scsr-fund-text-side {
        width: 55%; /* 画面幅が狭い環境では文字幅を自動最適化 */
    }
     .scsr-fund-section-title {
        font-size: 28px;
    }
     .scsr-fund-section-title::before {
        height: 30px;
    }
}

@media (max-width: 768px) {
    .scsr-fund-section {
        padding: 80px 15px 60px 15px;
    }

    /* スマホ表示時は、窮屈さを防ぐため綺麗な縦並び（1カラム）へスマート転換 */
     .scsr-fund-flex-group {
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }

    /* 【全体同期共通ルール】テキスト：横幅90%センター揃え */
     .scsr-fund-text-side {
        width: 90% !important;
        margin: 0 auto;
    }
    
     .scsr-fund-section-title {
        margin-bottom: 30px;
    }

    /* 【全体同期共通ルール】イラストマーク：横幅70%センター揃え */
     .scsr-fund-img-side {
        width: 50% !important;
        margin: 0 auto;
        justify-content: center;
        padding-top: 0;
    }
     .scsr-fund-icon-box {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
     .scsr-fund-section-title {
        font-size: 24px;
    }
     .scsr-fund-section-title::before {
        height: 26px;
        margin-top: 2px;
    }
     .scsr-fund-paragraph {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* スマホ専用改行をPCでは非表示にする */
.sp-only-br {
  display: none;
}
.u-pc-only {
  display: block;
}

@media (max-width: 768px) {
  /* スマホ版のときだけ改行を有効化 */
  .sp-only-br {
    display: block;
  }
  .u-pc-only {
    display: none;
  }
}