/* サイドバーの広告枠（Githubの下）

   実測した空きスペースは 幅500px × 高さ433px。
   ASPで案件数が最も多い 300×250（レクタングル大）が余裕を持って収まる。

   景品表示法（いわゆるステマ規制・2023年10月1日施行）により、
   広告であることの明示が必須である。
   `.ad-slot__label` がその表示にあたるため、削除してはいけない。

   実際の広告タグを入れるときは index.html の img 要素ごと
   ASPが発行したタグに置き換える。バナー画像を自サイトへ保存して
   貼り直すと成果が計測されず、規約違反にもなるため行わないこと。

   本ファイルは style2.css より後に読み込むこと */

/* 上の余白は、直前のGithub項目と広告を視覚的に切り離すためのもの。
   4px では広告がメニューの一部に見えてしまうため32pxまで広げている。
   サイドバー下端までの余裕は119pxあるため、この値でも収まる */
.sidebar_nav > ul > li.ad-slot {
  /* テレビの枠（アンテナと脚）を足した分だけ高さが増えるため、
     上下の余白を詰めてサイドバーの中に収める */
  padding: 12px 0 8px;
  text-align: center;
}

/* 広告であることの明示。見出しの体裁は既存の「- Update -」に揃えている */
.sidebar_nav > ul > li.ad-slot .ad-slot__label {
  margin: 0 0 10px;
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
  line-height: 1.4;
  color: #f7d51d;
  text-align: center;
}

/* style2.css のメニュー項目用の装飾を打ち消す。
   打ち消す対象は次の3つ。
     - `.sidebar_nav ul li a` の padding（1.05em 1em）と display:block
     - `.sidebar_nav > ul > li > a:after` の矢印アイコン（\f0a9）
     - `.sidebar_nav ul li a:hover` の水色の背景
   いずれもメニュー項目のための指定であり、広告バナーには不要 */
.sidebar_nav > ul > li.ad-slot .ad-slot__link {
  display: inline-block;
  max-width: 100%;
  padding: 0;
}

.sidebar_nav > ul > li.ad-slot .ad-slot__link::after {
  content: none;
}

.sidebar_nav > ul > li.ad-slot .ad-slot__link:hover {
  background-color: transparent;
}

/* バナー本体。
   1050px以下ではサイドバーが画面幅いっぱいに広がるが、
   バナーは300pxのまま中央に置く。
   max-width で、画面幅が300pxを下回った場合にだけ縮める */
.sidebar_nav > ul > li.ad-slot .ad-slot__link img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  /* 描画方式は指定しない。
     見本のドット絵を置いていた頃は image-rendering: pixelated を付けていたが、
     ASPの実バナー（600x500の写真・イラスト素材を300x250で表示）では
     縮小時に輪郭がギザついてしまうため外した */
}

/* ===== 記事間の広告枠（.ad-inline）=====

   1050px以下ではサイドバーの高さが足りず、Github下の広告枠が見切れる。
     - サイドバー高: 1051px以上は879px、1050px以下は676px
     - 1050px以下は overflow が hidden のためスクロールでも到達できない
     - 文字サイズが 19.2px→30.4px に拡大し、メニュー6項目だけで高さを使い切る

   そのため画面幅で表示場所を入れ替える。
     1051px以上: サイドバー（.ad-slot）に出す
     1050px以下: 記事間（.ad-inline）に出す

   記事本文の流れの中に置く形のため、読者の閲覧を遮らずに済む。 */

/* 見た目は記事カード（css/quest-card.css）に揃える。
   左の 8px は記事カードの margin-left と同じ値。
   これがないと広告枠だけ左へ8pxはみ出して、カードと縦のラインが揃わない */
.ad-inline {
  margin: 24px 0 24px 8px;
  padding: 14px;
  background: #212529;
  border: 4px solid #fff;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
  text-align: center;
}

/* 広告であることの明示。削除してはいけない。
   `#theme p` がID詳細度で色を指定しているため、`#theme` を前置して上回る */
#theme .ad-inline .ad-inline__label {
  margin: 0 0 10px;
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
  line-height: 1.4;
  color: #f7d51d;
  text-align: center;
}

.ad-inline .ad-inline__link {
  display: inline-block;
  max-width: 100%;
}

.ad-inline .ad-inline__link img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  /* 描画方式は指定しない。
     見本のドット絵を置いていた頃は image-rendering: pixelated を付けていたが、
     ASPの実バナー（600x500の写真・イラスト素材を300x250で表示）では
     縮小時に輪郭がギザついてしまうため外した */
}

/* ===== 記事ページの左カラムの広告枠（.ad-side）=====

   記事ページ（event2601.html など）は index.html と構成が違い、
   サイドバーも記事一覧も無いため、上の2つの枠は使えない。
   目次（.sfloat）の下、position:sticky の .menu の中に置いているため、
   記事を読み進めている間ずっと表示され続ける。

   左カラム（.left_contents）の幅は455pxあり、300×250がそのまま収まる。

   .ad-inline と同じ見た目にしているが、クラスを分けているのは
   .ad-inline が「1051px以上では非表示」の指定を持っており、
   記事ページで使うと広い画面で消えてしまうため */
.ad-side {
  margin: 16px 0 0;
  /* 内側の余白は8px。
     左カラムの幅はページによって異なり、最も狭いもので325px
     （article.html / article2.html）。
     300pxのバナーを縮めずに収めるには
     325 － 枠4px×2 － 余白 ×2 ≧ 300 が必要で、余白は8pxが上限になる。
     14pxにすると289pxまで縮み、ASPが配布する固定サイズのタグが収まらない */
  padding: 8px;
  background: #212529;
  border: 4px solid #fff;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
  text-align: center;
}

/* 広告であることの明示。景品表示法（ステマ規制）で必須のため削除しないこと */
.ad-side .ad-side__label {
  margin: 0 0 10px;
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
  line-height: 1.4;
  color: #f7d51d;
  text-align: center;
}

.ad-side .ad-side__link {
  display: inline-block;
  max-width: 100%;
}

.ad-side .ad-side__link img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  /* 描画方式は指定しない。
     見本のドット絵を置いていた頃は image-rendering: pixelated を付けていたが、
     ASPの実バナー（600x500の写真・イラスト素材を300x250で表示）では
     縮小時に輪郭がギザついてしまうため外した */
}

/* 画面幅による出し分け。この2つが対になっている。
   どちらか一方だけを消すと、広告が二重に出るか一切出なくなる */
@media screen and (min-width: 1051px) {
  .ad-inline {
    display: none;
  }
}

@media screen and (max-width: 1050px) {
  .sidebar_nav > ul > li.ad-slot {
    display: none;
  }
}