@charset "UTF-8";

 /* 全体の基本設定 */
 :root {
     --bg-color: #eef2f6;
     /* 全体の背景色 */
     --card-bg: #ffffff;
     --primary-color: #0056b3;
 }

 body {
     font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
     background-color: var(--bg-color);
     color: #333;
     margin: 0;
     padding: 0;
 }

 /* -----------------------------------
           上部：イメージ画像
           ----------------------------------- */
 .hero-section {
     width: 100%;
     max-width: 1300px;
     /* 下の画像と適切な間隔を空ける（重ねない） */
     margin: 20px auto 40px;
     position: relative;
 }

 /* 疑似要素でフチだけをほんのりぼかす */
 .hero-section::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* ぼかしを最小限にし、文字が読みにくくならないように調整 */
     box-shadow: inset 0 0 15px 5px var(--bg-color);
     pointer-events: none;
 }

 .hero-section img {
     width: 100%;
     display: block;
 }

 /* -----------------------------------
           下部：説明画像
           ----------------------------------- */
 .explanation-section {
     max-width: 1100px;
     /* マイナスマージンをなくし、通常の配置に戻す */
     margin: 0 auto 60px;
     padding: 0 20px;
 }

 .explanation-card {
     background: var(--card-bg);
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     /* 影も少し自然に */

 }

 .explanation-title {
     text-align: center;
     font-size: 1.2rem;
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 20px;
     color: var(--primary-color);
 }

 .explanation-card img {
     width: 100%;
     height: auto;
     display: block;
 }