@charset "utf-8";
/* =========================================
   社会的責任（CSR）セクションのスタイル
========================================= */

.csr-activity-sec {
    padding: 60px 20px 100px;
    background-color: #f9fafb; /* ごく薄いグレーで優しい雰囲気に */
}

.csr-inner {
    max-width: 900px; /* 少し幅を絞って上品に */
    margin: 0 auto;
}

/* 白いカード部分 */
.csr-card {
    background-color: #ffffff;
    border-radius: 24px; /* 大きめの角丸で「優しさ」を表現 */
    box-shadow: 0 15px 40px rgba(26, 54, 93, 0.06); /* 紺色ベースの柔らかい影 */
    padding: 70px 60px 60px; /* 内側の余白 */
    position: relative;
    margin-top: 60px; /* 上に飛び出すロゴの分のスペースを空ける */
}

/* 丸いロゴ（カードから上に半分はみ出させる、スタイリッシュな配置） */
.csr-logo {
    position: absolute;
    top: -50px; /* 半分上にズラす */
    left: 60px;
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 50%; /* 完璧な丸にする */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* ロゴ周りの余白 */
}

.csr-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* テキストエリア */
.csr-text-area {
    margin-bottom: 50px;
}

/* 見出し */
.csr-heading {
    font-size: 22px;
    color: #1a365d; /* 誠実な紺色 */
    font-weight: bold;
    margin-bottom: 25px;
    letter-spacing: 0.1em;
}

/* リード文 */
.csr-lead {
    font-size: 18px;
    color: #333333;
    line-height: 1.8;
    margin-bottom: 20px;
}

.csr-lead strong {
    color: #e50012; /* アクセントカラー（赤）でチーム名を目立たせる */
    font-size: 20px;
}

/* 注釈（チームの説明） */
.csr-note {
    background-color: #f0f4f8; /* 薄いブルーグレーで囲む */
    padding: 20px 25px;
    border-radius: 12px; /* 優しい角丸 */
}

.csr-note p {
    font-size: 16px;
    color: #000000;
    line-height: 1.7;
    margin: 0;
}

/* ギャラリー（写真が増えても自動調整される魔法のレイアウト） */
.csr-gallery {
    display: grid;
    /* 写真の最低幅を280pxにし、親要素の幅に合わせて自動で列数を増やす */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* 写真同士の隙間 */
}

.csr-photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; /* 写真をすべて美しい横長（16:9）に統一 */
    object-fit: cover; /* 比率が違う写真を入れても綺麗に切り抜く */
    border-radius: 12px; /* 写真の角も少し丸くして優しく */
    transition: transform 0.3s ease;
}

/* 写真にマウスを乗せると少しフワッと大きくなる（カッコよさ） */
.csr-photo:hover img {
    transform: scale(1.03);
}

/* =========================================
   スマートフォン用（レスポンシブ）
========================================= */
@media (max-width: 767px) {
    .csr-card {
        padding: 60px 25px 30px; /* スマホでは内側の余白を狭く */
        border-radius: 16px;
    }

    .csr-logo {
        left: 50%;
        transform: translateX(-50%); /* スマホではロゴを「ど真ん中」に配置 */
        width: 80px;
        height: 80px;
        top: -40px;
    }

    .csr-heading {
        font-size: 20px;
        text-align: center; /* タイトルも中央寄せ */
        margin-top: 10px;
        lile-height:1.6;
    }

    .csr-lead {
        font-size: 18px;
    }

    .csr-lead strong {
        font-size: 18px;
    }

    .csr-note {
        padding: 16px;
    }
    
    .csr-photo img {
        aspect-ratio: 4 / 3; /* スマホでは写真を少し縦に厚くする */
    }
}
/* =========================================
   CSRセクション追加パーツ（復興支援など）
========================================= */

/* 2つ目以降のカードの上部余白（丸いアイコンがないため余白を少し調整） */
.csr-card.mt-80 {
    margin-top: 80px;
}

/* 左上に配置するスタイリッシュな日付タグ */
.csr-date-tag {
    position: absolute;
    top: -20px;
    left: 60px;
    background-color: #1a365d; /* 誠実なネイビー */
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 30px; /* 角丸で優しく */
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.2);
    display: flex;
    align-items: baseline; /* 文字の底辺を揃える */
    gap: 5px; /* 年と月日の間隔 */
}

.csr-date-tag .year {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.csr-date-tag .month-day {
    font-size: 22px;
    font-weight: bold;
    font-family: 'Arial', sans-serif; /* 数字が綺麗に見えるフォント */
    letter-spacing: 0.05em;
}

/* 通常の本文用テキスト（リード文の下に配置） */
.csr-body-text {
    font-size: 18px;
    color: #444444;
    line-height: 1.9;
    margin-bottom: 40px;
}
/* =========================================
   写真キャプションと美しいホバーエフェクト
========================================= */

/* 画像を囲む枠（この枠の中でだけ画像が拡大するようにします） */
.csr-photo .img-wrapper {
    border-radius: 12px; /* 枠の角を丸くする */
    overflow: hidden; /* ★重要：枠からはみ出した部分を隠す魔法 */
    margin-bottom: 12px; /* キャプションとの隙間 */
}

.csr-photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block; /* 画像の下にできる謎の隙間を消す */
    border-radius: 0; /* 角丸は枠に任せるのでリセット */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* より滑らかなアニメーションに */
}

/* マウスホバー時：画像だけが枠の中で少し大きくなる */
.csr-photo:hover img {
    transform: scale(1.05); /* 1.05倍に拡大 */
}

/* キャプション（説明文）のスタイル */
.csr-caption {
    font-size: 16px;
    color: #666666; /* 少し落ち着いたグレー */
    text-align: center; /* 写真の中央に揃える */
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

/* スマホ用のキャプション調整 */
@media (max-width: 767px) {
    .csr-caption {
        font-size: 16px; /* スマホでは少し小さく */
        margin-bottom: 20px; /* 縦並びになった時の写真同士の余白 */
    }
}
/* =========================================
   スマートフォン用（レスポンシブ追加分）
========================================= */
@media (max-width: 767px) {
    .csr-card.mt-80 {
        margin-top: 60px;
    }

    .csr-date-tag {
        top: -15px;
        left: 50%;
        transform: translateX(-50%); /* スマホでは中央寄せ */
        padding: 8px 20px;
    }
    
    .csr-date-tag .year {
        font-size: 16px;
    }
    
    .csr-date-tag .month-day {
        font-size: 22px;
    }
}