@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; 
  }
}



//* ==========================================
   3. 【修正版】閉じる（×）ボタンの設定
   ========================================== */
/* 画像のコンテナにボタンの基準点（relative）を付与 */
.banner-inner {
  position: relative; /* ★追加：これでボタンが画像の右上に張り付きます */
}

/* 閉じるボタンの本体 */
.banner-close-btn {
  position: absolute;
  top: -10px;        /* ★変更：画像の枠から少し上に飛び出す位置 */
  right: 0;          /* ★変更：画像の右端ぴったりに合わせる */
  width: 32px;      
  height: 32px;
  background-color: #333333; 
  color: #ffffff;            
  border: 2px solid #ffffff; 
  border-radius: 50%;        
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;            
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* マウスを載せたときに赤くする（PC向け） */
.banner-close-btn:hover {
  background-color: #ff4d4d; 
}

/* スマホ向け（768px以下）のボタン位置微調整 */
@media screen and (max-width: 768px) {
  .banner-close-btn {
    top: -16px;     /* スマホは縦並びになるため、最上段の画像の上に配置 */
    right: 0;       /* スマホでも画面端ではなく、画像エリアの右端 */
    width: 28px;    
    height: 28px;
    font-size: 16px;
  }
}