@charset "UTF-8";

.page-lead-space h2{
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.page-lead-space {
  display: flex; /* Flexboxを使って2カラムレイアウトを実現 */
  align-items: start; /* コンテンツを上揃えにする */
  gap: 20px; /* カラム間の間隔（必要に応じて変更） */
  width: 80vw; /* 画面の80%の幅に設定 */
  margin: 0 auto; /* 水平方向の中央に配置するための設定 */
  padding: 10rem 0 5rem 0;
}


.page-lead-space > div {
  flex: 1; /* 各カラムを均等に幅を取るようにする */
  text-align: left; /* 文章を左揃えにする */
}

.page-lead-space img {
  max-width: 100%; /* 画像がコンテナを超えないようにする */
  height: auto; /* 画像のアスペクト比を保持 */
}
.page-lead-space > div:first-child { /* 左側のコンテンツ領域を指定 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 子要素を下に寄せる */
}

.page-lead-space {
  /* ... 既存のスタイル ... */
  align-items: stretch; /* 子要素を伸ばして全高さを占有させる */
}

.page-lead-space > div {
  /* ... 既存のスタイル ... */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 子要素を下に寄せる */
}

.page-lead-back {
  position: relative; /* 子要素のpositioningの基準となる */
  /* background-image: url('../image/back-deco-sakura.png');  */
  /* 画像のパスを適切に指定してください */
  background-repeat: no-repeat; /* 画像が繰り返されないようにする */
  /* background-position: -62px -266px;  */
  /* 画像を右上に配置 */
  background-size: contain; /* 必要に応じて画像のサイズを調整。'cover'や具体的なピクセル値も選べます */
  z-index: -1;
}

.page-lead-back {
  position: relative;
}

/* 疑似要素を使用して背景画像を配置 */
.page-lead-back::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../image/back-deco-sakura.png');
  background-repeat: no-repeat;
  background-position: -90px -108px; 
  background-size: 35%;
  /* 透明度の調整 */
  opacity: 0.2; /* 50%の透明度。希望の透明度に応じてこの値を調整してください。 */

  z-index: -1; /* 他の要素の下に配置します */
}


@media screen and (max-width: 768px) {
  .page-lead-space {
    display: block; /* 1カラム表示にする */
    padding: 5rem 0; /* 余白の調整 */
    
  }
  .page-lead-space p{
    margin-bottom: 2rem;
  }
  .page-lead-back::before{
    display: none;
  }
}