/* -----------------------------------
   全体レイアウト
----------------------------------- */
.history_hero {
  display: flex;
  align-items: center;
  width: 100%;
}

/* -----------------------------------
   左側：テキストエリア
----------------------------------- */
.hishero_left {
  flex: 3;
  padding: 32px 24px 32px 48px; /* 余白も少しスッキリ調整 */
  box-sizing: border-box;
}

.hishero_left h1 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #222;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.spec-label {
  color: #555;
  font-weight: 500;
}

.spec-value {
  color: #111;
  font-weight: bold;
}

/* -----------------------------------
   右側：画像エリア（右端ピッタリ＋左だけ波型）
----------------------------------- */
/* 右側の画像エリア（基準位置にする） */
.hishero_right {
  flex: 7;
  position: relative; /* SVGの配置基準 */
  overflow: hidden;   /* はみ出し防止 */
}

.hishero_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ★ 左端に被せる波SVGの指定 */
.wave-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 22%; /* お好みの横幅 */
  
  /* ★ ここが決定打！上下の隙間・段差を殺す指定 */
  height: calc(100% + 2px); /* 2pxだけ縦に伸ばす */
  top: -1px;                /* 上に1px食い込ませる */
  bottom: -1px;             /* 下に1px食い込ませる */
  
  pointer-events: none;
}
.wave-overlay path {
  fill: #d2b48c; /* ★ここに背景色のカラーコード（例: #d1b894 など）を入れてください */
}


/* 1. 枠全体の設定 */
/* 枠全体の設定 */
.expl_frame {
  width: 75%;         /* ★画面の50%の幅にする（＝左右に25%ずつの余白ができる） */
  margin: 0 auto;     /* ★左右の余白を自動計算して「ど真ん中」に配置する */
  
  border: 2px solid #e0dcd3;
  border-radius: 16px;
  padding: 40px;
  background-color: #fff;
  text-align: left;
}

/* 2. 見出し（h1）の余白リセット */
.expl_frame h1 {
  margin-top: 0;
  margin-bottom: 24px;
  padding: 0;    
  font-size:1.7rem;          /* ★左の変な余白を消してビシッと揃える */
  font-weight: bold;
}

/* 3. 上段（テキストと画像） */
.expl_upper {
  display: flex;
  align-items: flex-start; /* 上揃えにする */
  gap: 32px;               /* 文字と画像の間のすきま */
  margin-bottom: 24px;
}

/* ★ 左側のテキスト：h1と完全に左端を揃える */
.expl_txt1 {
  flex: 1;                 /* 余ったスペースをテキスト側に広げる */
  padding: 0;              /* 左余白をゼロにする */
  font-size:1.1rem;
}

/* ★ 右側の画像：大きさを制限して、内側（中心寄り）に寄せる */
.expl_img {
  border: 1px;
  width: 560px;            /* ★画像の横幅を固定して、でかくなりすぎるのを防ぐ */
  max-width: 30%;          /* 画面が狭くてもはみ出ないようにする */
  flex-shrink: 0;          /* 画像がつぶれるのを防ぐ */
}

.expl_img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;     /* 画像の角丸 */
}

/* 4. 下段のテキスト：こちらもh1と左端を揃える */
.expl_bottom {
  width: 100%;
}

.expl_txt2 {
  padding: 0;              /* 左余白をゼロにする */
  font-size:1.1rem;
}

.expl_txt1 h2{
  font-weight: bold;
  font-size:1.3rem;
}
.expl_txt2 h2{
  font-weight: bold;
  font-size:1.3rem;
}
.expl_txt2 h3{
  font-weight: bold;
  font-size:1.1rem;
}