@charset "utf-8";

.group-overview-image-section {
    padding: 60px 0 100px;
    background-color: #fff;
    text-align: center;
}

.group-overview-image-section .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 画像の基本スタイル（親要素をはみ出さないように） */
.group-overview-image-section img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* =========================================
   PC・スマホの表示切り替え（レスポンシブ）
========================================= */

/* デフォルト（PC）ではスマホ用を隠す */
.sp-only-image {
    display: none;
}

/* 1024px以下（タブレット・スマホ）になった時の挙動 */
@media (max-width: 1024px) {
    /* PC用を隠す */
    .pc-only-image {
        display: none;
    }
    /* スマホ用を表示する */
    .sp-only-image {
        display: block;
    }
}

/* =========================================
   概要（Overview）リード文エリア 迫力リデザイン
   - 特大白文字 & 図とのシームレスな融合
========================================= */
/* コンテナ全体をフルワイド化し、社会的責任の図と共有する背景を設置 */
.overview-impact-area.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 120px 0 0px; /* 下余白をなくして図と融合 */
    position: relative;
    background: linear-gradient(135deg, #1a1c6a 0%, #00aced 100%); /* ネイビーから水色への力強いグラデーション */
    overflow: hidden; /* 動的なラインのはみ出しを防ぐ */
}

/* 背景に動的なライン模様を追加（図との融合感） */
.overview-impact-area.full-width::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 20px, transparent 20px, transparent 40px);
    opacity: 0.5;
    z-index: 0;
}

.overview-lead-inner-l {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1; /* テキストを前に */
    padding: 0 20px;
}

/* 見出し（特大キャッチコピー） */
.lead-catch-xl {
    font-size: 80px; /* 特大（例: 8rem 相当） */
    font-weight: 900; /* 最も太いゴシック体 */
    color: #fff; /* 白文字で迫力を出す */
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: 50px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 視認性と重みを確保 */
}
.lead-catch-xl span { display: block; }

/* 見出し上の小さな英語/サブタイトル（白） */
.lead-catch-xl .small-text-l {
    font-size: 20px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
    font-weight: normal;
}

/* 迫力を出すための文字サイズの微調整 */
.lead-catch-xl .main-line-2 {
    font-size: 72px; /* 少し変化をつけてインパクト */
}

/* 本文（大きく読みやすく、白） */
.lead-text-xl {
    font-size: 20px; /* 大きく（例: 1.25rem 相当） */
    line-height: 2.2;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.05em;
    max-width: 850px;
    margin: 0 auto 0px; /* 下余白をなくす */
    padding-bottom: 120px; /* 図への接続スペース */
}

/* 図への接続を示す動的なグラデーションライン */
.diagram-connect-line {
    width: 2px;
    height: 120px;
    background: linear-gradient(to bottom, #00aced, transparent);
    margin: 0 auto;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

/* スマホ用（767px以下）のレイアウト調整 */
@media (max-width: 767px) {
    .overview-impact-area.full-width {
        padding: 80px 0 0px;
    }
    .overview-lead-inner-l {
        padding: 0 15px;
    }
    .lead-catch-xl {
        font-size: 48px; /* スマホでも大きく */
        margin-bottom: 30px;
        line-height: 1.3;
    }
    .lead-catch-xl .small-text-l {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .lead-catch-xl .main-line-2 {
        font-size: 42px;
    }
    .lead-text-xl {
        font-size: 16px;
        text-align: left; /* スマホ画面では左揃え */
        padding-bottom: 80px;
        line-height: 2.0;
    }
    .lead-text-xl br.pc {
        display: none; /* スマホでは意図しない改行を防ぐ */
    }
    .diagram-connect-line {
        height: 80px;
    }
}