@charset "UTF-8";
/*
 * common/ad/ad.css  ―  広告スタイル
 * ============================================================
 * ■ 対象要素
 *   #ad-banner           : 320×50 バナー（画面下部固定エリア）
 *   #ad-banner .ad-link  : バナー内のリンク・画像
 *   #ad-rect             : 300×250 レクタングル
 *   #ad-rect   .ad-link  : レクタングル内のリンク・画像
 *
 * ■ 読み込み順
 *   1. app-shell.css（--ad-height / --safe-area-bottom 等の変数定義元）
 *   2. ad.css（本ファイル）
 *   3. app-screens.css
 * ============================================================
 */

/* ============================================================
   共通変数（app-shell.css で定義済み、ここで上書きも可）
   ============================================================ */
:root {
  --ad-height: 50px;
}

/* ============================================================
   最優先：hidden が付いたら必ず消す
   ============================================================ */
#ad-banner.hidden {
  display: none !important;
}

/* ============================================================
   320×50 バナー（.fixed-ad と併用）
   - SafeArea 込みで背景は全幅
   - 表示エリアは常に --ad-height (50px)
   ============================================================ */
#ad-banner.fixed-ad {
  width: 100%;
  background: #eeeeee;

  /* SafeArea 込みの高さ */
  height:     calc(var(--ad-height) + var(--safe-area-bottom));
  min-height: calc(var(--ad-height) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);

  box-sizing: border-box;
  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: flex-end;  /* SafeArea 分を下に逃がすため flex-end */

  position: relative;  /* PRラベルのabsolute基準 */
}

/* バナー内のリンク */
#ad-banner .ad-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          var(--ad-height);
  width:           100%;
  max-width:       var(--app-max-width);
  line-height:     0;
  position:        relative; /* PRラベルの基準 */
}

/* バナー内の画像 */
#ad-banner img {
  display:    block;
  height:     var(--ad-height);
  width:      auto;
  max-width:  100%;
  object-fit: contain;
  border:     0;
}

/* ============================================================
   300×250 レクタングル
   ============================================================ */
#ad-rect {
  width:        300px;
  height:       250px;
  margin:       20px auto;
  background:   #f5f5f5;
  border-radius: 8px;
  display:      block;
  flex-shrink:  0;
  position:     relative;  /* PRラベルのabsolute基準 */
}

/* レクタングル内のリンク */
#ad-rect .ad-link {
  display:     block;
  width:       300px;
  height:      250px;
  line-height: 0;
}

/* AdSenseのinsタグを強制固定（自動的に0×0になるのを防ぐ） */
#ad-rect ins.adsbygoogle {
  display:    block !important;
  width:      300px !important;
  height:     250px !important;
  min-width:  300px !important;
  min-height: 250px !important;
}

/* レクタングル内の画像 */
#ad-rect img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  border:     none;
  display:    block;
}

/* ============================================================
   PRラベル
   ■ 320×50バナー：バナー左の余白に表示（高さ変更不要・overflow不要）
   ■ 300×250レクタングル：内側左上にz-indexで重ねる
   ============================================================ */

/* バナー左余白のPRラベル（#ad-bannerの直接の子として配置） */
#ad-banner > .ad-pr-label {
  position:       absolute;
  left:           4px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      9px;
  font-weight:    bold;
  color:          rgba(0, 0, 0, 0.4);
  line-height:    1;
  padding:        2px 3px;
  pointer-events: none;
  letter-spacing: 0.5px;
  font-family:    sans-serif;
  user-select:    none;
  white-space:    nowrap;
  z-index:        10;
}

/* レクタングル内側左上のPRラベル（#ad-rectの直接の子として配置） */
#ad-rect > .ad-pr-label {
  position:       absolute;
  top:            -12px;
  left:           0;
  font-size:      9px;
  font-weight:    bold;
  color:          rgba(0, 0, 0, 0.45);
  line-height:    1;
  padding:        2px 3px;
  pointer-events: none;
  letter-spacing: 0.5px;
  font-family:    sans-serif;
  user-select:    none;
  white-space:    nowrap;
  z-index:        9999;
}

/* ============================================================
   AdSense内部要素の強制固定
   Google が動的生成する内部divのwidth:0pxを上書き
   ============================================================ */
#ad-rect ins.adsbygoogle > div {
  width:   300px !important;
  height:  250px !important;
  display: block !important;
}

#ad-rect ins.adsbygoogle iframe {
  width:   300px !important;
  height:  250px !important;
}