@charset "UTF-8";

	
#cont {
	margin: auto;
	width: 1027px;
}


/* ==========================================
   1. 基本設定（PC向け：横並びで大きく表示）
   ========================================== */
.floating-banner-container {
  position: fixed;
  bottom: 0; 
  left: 0;
  width: 100%;
  padding: 20px; /* PCはリッチに余白を広く */
  background: rgba(255, 255, 255, 0.95); /* 背景を少し透過した白に */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* 上部に綺麗に影をつける */
  z-index: 9999; /* 他のコンテンツより必ず手前に表示 */
  box-sizing: border-box;
}

.banner-inner {
  display: flex;
  justify-content: center; /* ★変更：1つの時は中央、2つの時は中央に寄せて並べる */
  gap: 20px; /* PCでの画像と画像の隙間 */
  max-width: 1100px; /* PC画面でしっかり大きく見える最大幅 */
  margin: 0 auto; /* 画面の中央に寄せる */
}

.banner-inner a {
  /* ★変更：最大幅を半分（隙間引き）にしつつ、1つの時はその画像の本来のサイズ（最大100%）に */
  max-width: calc(50% - 10px); 
  width: 100%;
}

/* ★追加：もし広告が1つ（最初の子要素かつ最後の子要素）なら、幅を最大100%にする */
.banner-inner a:first-child:last-child {
  max-width: 100%;
}

.banner-inner img {
  width: 100%; /* リンクの枠いっぱいに画像を広げる */
  height: auto; /* 画像の縦横比を崩さずに自動伸縮 */
  vertical-align: bottom; /* 画像の下の隙間を無くす */
  border-radius: 6px; /* 角をほんのり丸く */
}

/* ★変更：コンテンツの高さに合わせて「自動」で余白を作るためのモダンな設定 */
html {
  scroll-padding-bottom: env(safe-area-inset-bottom);
}
body {
  /* margin-bottom ではなく、コンテナの高さ分だけ自動で下に余白を開ける（被り防止） */
  padding-bottom: 0; 
}
/* バナー表示中のフッター調整（JSなしでバナーの高さ分の余白を自動確保するテクニック） */
@supports (anchor-name: none) or (display: block) {
  body::after {
    content: "";
    display: block;
    height: 400px; /* おおよその最大高さを目安に調整してください */
  }
}

/* ==========================================
   2. スマホ向け設定（画面幅768px以下）
   ========================================== */
@media screen and (max-width: 768px) {
  .floating-banner-container {
    padding: 12px; /* スマホの画面幅に合わせた適度な余白 */
  }

  .banner-inner {
    /* ★変更：1つの時は横並び（そのまま）、2つある時だけ「縦2段」に変える特殊な設定 */
    flex-wrap: wrap; 
    flex-direction: row; /* 横並びベースにする */
    gap: 10px; /* ★上下左右のバナーの隙間 */
    max-width: 100%; 
  }

  .banner-inner a {
    /* ★変更：2つの時はスマホで横幅100%（結果的に縦2段になる） */
    max-width: 100%; 
    width: 100%;
  }
  
  /* スマホでのホームページ下部の被り防止 */
  body::after {
    /* ★修正：5Z00pxのタイポ修正と、縦2段を考慮した高さ自動調整用（目安） */
    height: 300px; 
  }
}