/* ==========================================================
       スライダーの基本スタイル
       ========================================================== */
    .slider-container {
      /* width: 512px; */ /* スライドのサイズ */
      /* height: 288px; */
	width: 98%;               /* 画面横幅の80%にする */
/*	min-width: 512px; */
	max-width: 640px;   /* 16:9 -> 640x360 px or 512x288 px */
	aspect-ratio: 16 / 9;     /* ★横幅に対して常に16:9の高さを自動計算する */	  
      position: relative;
      overflow: hidden;
      margin: 40px auto; /* 画面中央に配置 */
      background-color: #222; /* 画像がない時や、テキストページの背景色 */
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);	  
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    }

    /* 各スライドの共通設定（すべて重ねて配置） */
    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;          /* 初期状態は透明（非表示） */
      visibility: hidden;  /* クリックなどを無効化するため完全に隠す */
      transition: opacity 1.5s ease-in-out, visibility 1.5s; /* 1.5秒かけてフェード */
	  
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	  
      /* テキストを中央寄せするためのレイアウト */
      display: flex;
      justify-content: center; /* 縦方向中央 */
      align-items: center;
    }

    /* 「active」クラスがついたスライドだけを表示する */
    .slide.active {
      opacity: 1;
      visibility: visible;
    }

    /* 画像スライドの調整 */
    .slide img {
      width: 100%;
      height: 100%;
      /* object-fit: cover; */ /* 640x360の枠内に綺麗に収める（比率保持） */
	  object-fit: contain; /* 画像全体を収める（切り抜かない） */
	  background: white; /* 余白の色 */
    }

    /* ==========================================================
       各ページのデザイン（カスタマイズ用の一例）
       ========================================================== */
    
    /* パターンA: テキストだけのページ（背景色あり） */
    .text-only-content {
      color: #ffffff;
      /* text-align: center; */
      padding: 30px;
    }
    .text-only-content h2 {
      margin-top: 0;
      font-size: 24px;
      border-bottom: 2px solid rgba(255,255,255,0.3);
      padding-bottom: 20px; /* 横線の下の幅 */
    }
    .text-only-content p {
      font-size: 16px;
      line-height: 1.6;
			margin: 16px 0 0 0;   /* 行ごとの上下余白の調整 */
    }

    /* パターンB: 画像の上にテキストを重ねる場合 */
    .text-overlay {
      position: absolute;
      /* bottom: 25px; */ /* テキスト背景の黒座布団を浮かせる */
      /* left: 25px; */
      /* right: 25px; */
      bottom: 0px; /* テキスト背景の黒座布団を左，下，右に隙間をおかずに配置する */
      left: 0px;
      right: 0px;
      color: #ffffff;
      background: rgba(0, 0, 0, 0.6); /* 黒透過の座布団 */
      padding: 15px 20px;
      /* border-radius: 6px; */ /* 黒座布団の角を4つとも丸める */
	  border-radius: 0px 0px 6px 6px; /* 黒座布団の角を下 2 つだけ丸める */
      backdrop-filter: blur(4px); /* 背景を少しぼかす（モダンなエフェクト） */
	  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); /* 下から上にグラデーションをつける */	  
    }
    .text-overlay h3 {
      margin: 0 0 5px 0;
      font-size: 18px;
    }
    .text-overlay p {
      margin: 0;
      font-size: 14px;
      opacity: 0.9;
    }
	
.clickable-frame {
  display: block; /* 枠全体をクリック可能にする */
  text-decoration: none; /* リンクの下線を消す */
  color: inherit; /* 文字色を親要素に合わせる */
}

/* マウスを乗せたときに「クリックできる感」を出す演出 */
.clickable-frame:hover {
  opacity: 0.8;
}
/* 画面幅が768px以下のときだけ表示（スマホ用） */
@media screen and (max-width: 768px) {
   .text-only-content h2 {
      margin-top: 0;
      font-size: 20px;
      border-bottom: 2px solid rgba(255,255,255,0.3);
      padding-bottom: 8px;
    }
}