@charset "UTF-8";
/* ============================================================
   FARI100 北上店 ページ固有スタイル (fari100-kitakami)
   ============================================================ */

/* ----------------------------------------------------------
   店長インタビュー 導線バナー
   Figma: w=1176, h=280, side-margin=132px, text right ~70%
   ---------------------------------------------------------- */
.fk-iv-banner {
  max-width : 1176px;
  margin    : 60px auto 60px;
  position  : relative;
  overflow  : hidden;
}

.fk-iv-banner a {
  display : block;
  position: relative;
  opacity : 1;
}
.fk-iv-banner a:hover {
  opacity: 0.85;
}

.fk-iv-banner__img {
  width          : 100%;
  height         : 280px;
  object-fit     : cover;
  object-position: left 55%;   /* 人物・机・Masterwalロゴが最適に表示 */
  display        : block;
  max-width      : none;
}

.fk-iv-banner__txt {
  position       : absolute;
  top            : 50%;
  right          : 28%;
  transform      : translateY(-50%);
  color          : #fff;
  text-align     : center;
  text-shadow    : 0 1px 6px rgba(0,0,0,0.6);
  pointer-events : none;
}

.fk-iv-banner__ttl {
  display    : block;
  font-size  : 36px;
  font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}

.fk-iv-banner__sub {
  display    : block;
  font-size  : 30px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   ギャラリー（テーマ管理）
   ---------------------------------------------------------- */
.fk-gallery {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 8px;
  max-width            : 1176px;
  margin               : 0 auto 24px;
}

.fk-gallery__item img {
  width  : 100%;
  height : auto;
  display: block;
}

@media only screen and (max-width: 767px) {
  .fk-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------------------------
   レスポンシブ
   ---------------------------------------------------------- */
@media only screen and (max-width: 1040px) {
  .fk-iv-banner {
    max-width : 100%;
    margin-top: 40px;
  }
  .fk-iv-banner__img {
    height: 220px;
  }
  .fk-iv-banner__ttl { font-size: 26px; }
  .fk-iv-banner__sub  { font-size: 22px; }
}

@media only screen and (max-width: 767px) {
  .fk-iv-banner__img {
    height: 160px;
  }
  .fk-iv-banner__txt {
    right    : 50%;
    transform: translate(50%, -50%);
  }
  .fk-iv-banner__ttl { font-size: 20px; }
  .fk-iv-banner__sub  { font-size: 17px; }
}