@charset "utf-8";
/* CSS Document */

    :root{
      --gap:16px;
      --card-height:80px;
      --bg:#fafafa;
      --muted:#666;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Roboto,"メイリオ",sans-serif;background:var(--bg);color:#111;}

    /* 全体センタリング＆左右余白なし */
    .wrap{
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
	width: 100%;
	background-color: #FFFFFF;
}



    /* セクション全体 */
    .insurance-section{
	padding: 24px;
	margin-bottom: 24px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


/* 見出し部分 */
.section-head {
  margin-bottom: 16px;
}

/* 見出しのh2を横幅いっぱい＆ネイビー背景に */
.section-head h2 {
	background-color: #477FCD; /* ネイビー */
	color: #fff;
	font-size: 1.2rem;
	margin: 0; /* デフォルトの余白をリセット */
	padding: 8px 0; /* 上下の余白を調整 */
	text-align: center; /* 中央寄せ */
	width: 100vw; /* 画面いっぱい */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw; /* コンテンツ幅に関係なく横幅いっぱいに */
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



    /* グリッド */
    .banner-grid{display:grid;gap:var(--gap);justify-content:center;}
    .banner{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eee;border-radius:8px;height:var(--card-height);padding:8px;transition:transform .18s ease;}
    .banner img{max-height:100%;max-width:100%;object-fit:contain;}
.banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ふんわり浮く感じを追加 */
}

    /* 損害保険 */
    .nonlife-grid{grid-template-columns:repeat(2,1fr);}
    /* 生命保険 */
    .life-grid{grid-template-columns:repeat(2,1fr);}

    @media (min-width:600px){
      .nonlife-grid{grid-template-columns:repeat(3,1fr);}
      .life-grid{grid-template-columns:repeat(3,1fr);}
    }
    @media (min-width:900px){
      .nonlife-grid{grid-template-columns:repeat(4,1fr);}
      .life-grid{grid-template-columns:repeat(4,1fr);}
    }
    @media (min-width:1200px){
      .life-grid{grid-template-columns:repeat(6,1fr);}
    }

    @media (max-width:400px){
      :root{--card-height:64px;}
    }