@charset "UTF-8";
/*-----------------------------------------------------------
  TOP（index.html）の長谷川あかりさんLPバナー
  バナー画像 PC 1120×320・SP 350×320
  商品ラインナップ（#lineupWrapper）と 関連サイト・SNS（#sns）の間に置く
  キャンペーン終了で外すときは、各ページ（index.html・organic/index・yogurt・milk・drink-yogurt）の section.bnr-recipe とこのCSSの読み込みを消す
  ・背景は上下（#lineupWrapper・#sns）と同じ #fafaf3 でつなぐ（白い帯にしない）
  ・バナーの下の間隔は #sns .title の上余白（PC 80px）で取る
------------------------------------------------------------*/
.bnr-recipe {
  background-color: #fafaf3;
}
.bnr-recipe a {
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}
.bnr-recipe a:hover {
  opacity: 0.8;
}
.bnr-recipe img {
  display: block;
  width: 100%;
  height: auto;
}

/** 01. PC layout */
@media print, screen and (min-width: 1200px) {
  .bnr-recipe {
    padding-top: 80px; /* ラインナップ→バナー 80（Figma 76:1891） */
  }
  .bnr-recipe a {
    width: 1120px;
  }
}

/** 02. SP layout */
@media screen and (max-width: 1199.98px) { /* 端数の幅対策（recipe.css と同じ） */
  .bnr-recipe {
    padding: 72px 20px 0; /* ラインナップ→バナー 72・左右20（Figma 76:4917） */
  }
  .bnr-recipe a {
    max-width: 560px;
  }
  /* バナー→「関連サイト・SNS」72（既存の #sns .title は上80なので、バナーがある時だけ詰める） */
  .bnr-recipe + #sns .title {
    padding-top: 72px;
  }
}