@charset "utf-8";
/* ==========================================================================
   ステーキガスト｜広島県産 大粒カキフライ＆PRIMEサーロイン フェアLP
   画像を縦に並べる構成。PC/SPはブレークポイント767pxで画像を出し分け。
   （767px＝すかいらーく共通CSSのブレークポイントに準拠）
   ========================================================================== */

html { scroll-behavior: smooth; }

.mod-wrap { width: 100%; }

.pk { background: #070707; font-size: 0; line-height: 0; }
.pk-b { width: 100%; }
.pk-b > picture,
.pk-b > a { display: block; max-width: 1000px; margin: 0 auto; }
.pk-b img { display: block; width: 100%; height: auto; }
.pk-b > a:hover,
.pk-cta a:hover { opacity: .85; transition: opacity .2s; }

#primebeef { scroll-margin-top: 12px; }

/* --- FV 動画 --- */
.pk-movie {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}
.pk-movie iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 木材テクスチャの地色（画像の左右に continuously 伸ばす） --- */
.pk-wood { background: #efe5d6 url(../images/bg_wood.webp) center top / 1200px auto repeat; }
.pk-moku { background: #40190c url(../images/bg_mokume.webp) center top / 1200px auto repeat; }
.pk-sea  { background: #071624 url(../images/bg_sea.webp) center center / cover no-repeat; }
.pk-seawood { background: #e9dfd0 url(../images/bg_duo.webp) center center / cover no-repeat; }
.pk-band { background: #0e0d0c; border-top: 1px solid rgba(201,169,78,.3); border-bottom: 1px solid rgba(201,169,78,.3); }

/* --- 画像内ボタンのリンク領域 --- */
.pk-b--rel { position: relative; max-width: 1000px; margin: 0 auto; }
.pk-hot { position: absolute; display: block; z-index: 2; }
.pk-hot:hover { background: rgba(255,255,255,.14); border-radius: 6px; }

/* --- 単色ブロックの地色 --- */
.pk-b-dark { background: #070707; }
.pk-b01 { background: #070707; }
.pk-b03 { background: #070707; }
.pk-b10 { background: #070707; }
.pk-b11 { background: #070707; }
.pk-b13 { background: #070707; }
.pk-b14 { background: #070707; }
.pk-b17 { background: #070707; }
.pk-b18 { background: #070707; }
.pk-b19 { background: #070707; }

/* --- 揚げたて写真は他セクションと同じ1000px基準。画像の左右端は
       画像内で #070707 に溶かしてあるので、地色と繋がって切れ目は出ない --- */

/* --- CTAボタン（横並び） --- */
.pk-cta-wrap { padding-bottom: 70px; }
.pk-cta {
  display: flex;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}
.pk-cta > a { display: block; flex: 1 1 0; min-width: 0; }
.pk-cta > a img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   SP（767px以下）：画像を画面幅いっぱいに
   ========================================================================== */
@media screen and (max-width: 767px) {
  .pk-b > picture,
  .pk-b > a { max-width: none; }
  .pk-b--rel { max-width: none; }
  /* CTAボタンはSPでは上下に並べる */
  .pk-cta { display: block; max-width: none; margin: 0 24px; }
  .pk-cta > a + a { margin-top: 14px; }
  .pk-cta-wrap { padding-bottom: 46px; }
  .pk-wood, .pk-moku { background-size: 900px auto; }
}