/* セクション4のスタイル */
.section-4 {
    height: 100vh; /* ビューポートの高さ全体に設定 */
    display: flex; /* 子要素をフレックスボックスとして配置 */
    flex-direction: column; /* 子要素を縦に配置 */
    align-items: center; /* 子要素を中央に配置 */
    justify-content: space-between; /* 子要素を上下に分ける */
    font-family: 'Arial', sans-serif; /* フォントをArialに設定 */
    text-align: center; /* テキストを中央揃えにする */
    padding: 0; /* 上下の余白をなくす */
    margin: 0; /* 全体の余白をなくす */
    box-sizing: border-box; /* ボックスのサイズ計算にpaddingとborderを含める */
    background-image: url('/project/sdgs/sdgsbg.jpg'); /* 背景画像を設定 */
    background-size: cover; /* 画像が全体をカバーするようにする */
    background-position: center; /* 背景画像を中央に配置 */
  min-width: 1458px;
}

/* スクロールボタンがセクション4に来たときのスタイル */
.scroll-button.white {
    border: 2px solid white; /* 白いボーダー線を維持 */
    color: white; /* テキストの色を白に維持 */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9); /* 影を強めに変更 */
}

body, html {
    margin: 0; /* 全体の余白をなくす */
    padding: 0; /* 全体のパディングをなくす */
    height: 100%; /* 高さを100%に設定 */
}

/* SDGsタイトルとアイコンのスタイル */
.sdgs-title-container {
    display: flex; /* アイコンとテキストを横並びに配置 */
    align-items: center; /* アイコンとテキストの垂直位置を中央に揃える */
    justify-content: center; /* アイコンとテキストを中央に配置 */
    margin-bottom: 0.5em; /* タイトルの下に余白を追加 */
    text-align: center; /* タイトルとアイコンを中央揃え */
}

.sdgs-icon {
    width: 30px; /* アイコンの幅を指定 */
    height: 30px; /* アイコンの高さを指定 */
    margin-right: 0.5em; /* アイコンとテキストの間に余白を追加 */
}

.sdgs-title {
    font-size: 1.5em; /* タイトルのフォントサイズを指定 */
    color: #00bfff; /* タイトルの色を指定 */
    font-weight: bold; /* タイトルを太字に */
}

/* 取組方針のスタイル */
.policy-container {
    margin-bottom: 2em; /* 下に余白を追加して次の要素と分ける */
    text-align: center; /* テキストを中央揃え */
    padding: 1em; /* 内側に余白を追加 */
    color: #FFF; /* テキストの色を白に */
    max-width: 800px; /* コンテンツの幅を制限して読みやすくする */
    margin: 0 auto; /* 中央揃えにする */
}

.policy-title {
    font-size: 1.5em; /* 見出しのフォントサイズを指定 */
    font-weight: bold; /* 見出しを太字に */
    color: #FFF; /* テキストの色を白に */
    margin-bottom: 0.5em; /* 見出しと本文の間に余白を追加 */
}

.policy-text {
    font-size: 0.8em; /* 本文のフォントサイズを指定 */
    color: #FFF; /* テキストの色を少し薄めにして見やすく */
    line-height: 1.5; /* 行間を広げて読みやすくする */
}

/* 各ボックスのスタイル */
.section-4 .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.25em;
    gap: 20px;
    width: 100%; /* 画面幅に応じて調整 */
    font-size: 0.8em;
}

.section-4 .box {
    flex: 1 1 300px; /* 横並びで固定幅 */
    max-width: 300px;
    min-width: 300px; /* 固定幅または最低幅に変更 */
    height: 400px; /* 固定の縦幅を設定（例: 400px） */
    border: 1px solid #000; /* 黒色の境界線を1pxの太さで設定 */
    padding: 1em; /* 内側に16pxの余白を持たせる */
    box-sizing: border-box; /* ボックスのサイズ計算にpaddingとborderを含める */
    background-color: #ffffff; /* ボックスの背景色を白に設定 */
    text-align: center; /* テキストを中央揃えにする */
    display: flex; /* フレックスボックスに設定 */
    flex-direction: column; /* 子要素を縦方向に配置 */
    justify-content: space-between; /* 子要素を均等に配置 */
}

/* アイコンの大きさを100x100に変更 */
.sdgs-wheel-icon {
    width: 100px;
    height: 100px;
    animation: spin 3s linear infinite;
}

/* 回転アニメーションの定義 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* アイコンコンテナのスタイル */
.section-4 .icon-container {
    display: flex; /* 子要素（アイコン）を横並びに配置 */
    justify-content: center; /* 子要素を中央に揃え */
    gap: 0.625em; /* 子要素の間に10pxの間隔を設定 */
    margin-top: 1em; /* 上に余白を追加 */
    margin-bottom: 1em; /* 下に余白を追加 */
}

.section-4 .icon-container img {
    width: 70px; /* 画像の幅を70pxに設定 */
    height: 70px; /* 画像の高さを70pxに設定 */
}

/* 経済、社会、環境、取組内容、目標に背景色と余白を追加 */
.section-4 .highlighted {
    background-color: #00bfff; /* 背景に水色を設定 */
    color: #fff; /* テキストの色を白に変更（見やすくするため） */
    padding: 0.2em; /* 内側に余白を追加してテキストを中央に揃える */
    border-radius: 5px; /* 角を丸くする（オプション） */
    display: inline-block; /* 背景色をテキスト部分だけに適用 */
    margin-top: 0.5em; /* 上に余白を追加 */
    margin-bottom: 0em; /* 下に余白を追加 */
}

/* 著作権表示のスタイル */
.section-4 .copyright {
    margin-top: 2em; /* 上に余白を追加してセクションの内容と分ける */
    text-align: center; /* 著作権表示を中央に配置 */
    font-size: 0.9em; /* 少し小さめのフォントサイズにする */
    color: #FFF; /* テキストの色を白にして表示 */
}


.copyright {
    font-size: 0.9em; /* フォントサイズを少し小さめに設定 */
    color: #FFF; /* 白のテキスト */
}

.section-4 {
    background-image: url('/project/sdgs/sdgsbg.jpg'); /* 背景画像を設定 */
    background-size: cover; /* 画像が全体をカバーするようにする */
    background-position: center; /* 背景画像を中央に配置 */
}

.section-4 .icon-container img {
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    cursor: pointer;
    transform-origin: center;
    z-index: 1;  /* 通常状態の z-index */
}

.section-4 .icon-container img:hover {
    transform: scale(2.5);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    z-index: 10;  /* 他の要素の前面に表示 */
}

/* 吹き出しスタイル */
.tooltip {
    display: none;
    position: absolute;
    background-color: #fff;
    color: #333;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1em;
    white-space: nowrap;
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    z-index: 1000;
}

.tooltip.show {
    display: block;
    transform: scale(1);
    opacity: 1;
}