/* ??新しく追加するCSS：2つを左右に並べる */
.main-container {
  display: flex;          /* 左右に並べるおまじない */
  justify-content: space-between; /* 左右に適度なスキマを空ける */
  align-items: flex-start; /* 上のラインで高さを揃える */
  width: 90vw;            /* 全体の横幅 */
  max-width: 1100px;      /* 最大の横幅 */
  margin: 0 auto;         /* 画面の真ん中に配置 */
  gap: 10px;              /* 写真と文章の間のスキマ（好みで調整） */
}


.slideshow {
  width: 45%;
  height: 330px;  
  position: relative;
  background-color: #e1e6e7; /* 余白をバックに合わす */
  overflow: hidden; /* 枠からはみ出さないようにする */
}

.slideshow img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;  /* ??親要素いっぱいに広げる（50%から修正） */
  height: 100% !important; /* ??px漏れを修正し、100%に */
  object-fit: contain;     /* ??背景と同じくcontainに統一 */
  object-position: center;
  transition: opacity 2s ease-in-out; /* ??JSの2000（2秒）と合わせる */
  display: block !important; 
}

/* 右側：文章ブロックのCSS */
#main {
  width: 85%;            /* ??全体の50%の幅にする */
}

.joho01 {
  width: 100%;           /* #mainの幅（50%）いっぱいに広げる */
  text-align: left;
}


/* ___________________________________________________________ */

/* 画面の横幅が 768px 以下のとき（スマホ・タブレット向け） */
@media screen and (max-width: 768px) {
  
  /* 1. 左右並びを「縦並び」に変更する */
  .main-container {
    flex-direction: column; 
    gap: 20px; /* 写真と文章の間のすき間を少し狭くする */
  }

  /* 2. 写真の横幅を画面いっぱいに広げる */
  .slideshow {
    width: 100%; 
    height: 250px; /* スマホ用に高さを少し低く調整（お好みで変えてOK） */
  }

  /* 3. 文章の横幅も画面いっぱいに広げる */
  #main {
    width: 100%; 
  }
}