@charset "UTF-8";
/* ============================================================
   店長インタビュー / 北上店 (interview-kitakami)
   Figma canvas: 1440px wide
   ============================================================ */

/* ----------------------------------------------------------
   ページ専用スクロールアニメーション
   WOW.js の fadeInUp をこのページだけゆっくり・大きく上昇
   ---------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity  : 0;
    transform: translate3d(0, 48px, 0);
  }
  to {
    opacity  : 1;
    transform: translate3d(0, 0, 0);
  }
}

.iv-wrap .wow {
  /* expo-out 的なイージングでふわっと収まる */
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ----------------------------------------------------------
   共通変数
   ---------------------------------------------------------- */
:root {
  --iv-inner-max : 1440px;
  --iv-content-w : 1024px;   /* 左右余白 208px × 2 = 416px */
  --iv-side-pad  : 208px;
  --iv-img-w     : 400px;
  --iv-img-h     : 300px;
  --iv-gap       : 64px;
  --iv-color-txt : #222;
  --iv-font-ko   : 'KoHo', sans-serif;
  --iv-font-yu   : 'Yu Gothic', 'YuGothic', sans-serif;
  --iv-font-noto : 'Noto Sans JP', sans-serif;
}

/* ----------------------------------------------------------
   ラッパー
   ---------------------------------------------------------- */
.iv-wrap {
  overflow-x: hidden;
  background: #fff;
}

/* ----------------------------------------------------------
   ヒーローセクション（白背景・黒テキスト）
   ---------------------------------------------------------- */
.iv-hero {
  position       : relative;
  width          : 100%;
  height         : 403px;
  background     : #fff;
  border-bottom  : 1px solid #222;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
}

.iv-hero__title {
  font-family: var(--iv-font-noto);
  font-size  : 52px;
  font-weight: bold;
  color      : var(--iv-color-txt);
  line-height: 1.2;
  margin-bottom: 16px;
}

.iv-hero__sub {
  font-family   : var(--iv-font-ko);
  font-size     : 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--iv-color-txt);
}

/* ----------------------------------------------------------
   店舗全景写真（ヒーロー下 40px・全幅 640px）
   Figma: y=443, hero bottom y=403 → gap 40px
   ---------------------------------------------------------- */
.iv-store-wide {
  width     : 100%;
  margin-top: 40px;
}

.iv-store-wide img {
  width  : 100%;
  height : auto;
  display: block;
}

/* ----------------------------------------------------------
   パンくずリスト（ヒーロー内・右下に絶対配置）
   ---------------------------------------------------------- */
.iv-bclist {
  position: absolute;
  bottom  : 8px;
  right   : var(--iv-side-pad);
  text-align: right;
  padding : 0;
}

/* ----------------------------------------------------------
   人物紹介カード
   Figma: store bottom y=1083, person top y=1203 → gap 120px
   ---------------------------------------------------------- */
.iv-person-section {
  position  : relative;
  max-width : var(--iv-inner-max);
  margin    : 120px auto 0;
  height    : 487px;
}

.iv-person-photo {
  width   : var(--iv-content-w);
  height  : 487px;
  position: absolute;
  left    : 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.iv-person-photo img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center bottom;   /* Figma: object-bottom */
}

.iv-person-card {
  position  : absolute;
  right     : 248px;
  bottom    : 40px;
  width     : 474px;
  background: rgba(255, 255, 255, 0.8);
  padding   : 28px;
}

.iv-person-role {
  font-family: var(--iv-font-noto);
  font-size  : 16px;
  color      : var(--iv-color-txt);
  margin-bottom: 28px;
}

.iv-person-name-row {
  display    : flex;
  align-items: baseline;
  gap        : 12px;
}

.iv-person-name-ja {
  font-family: var(--iv-font-noto);
  font-size  : 34px;
  font-weight: bold;
  color      : var(--iv-color-txt);
}

.iv-person-name-en {
  font-family: var(--iv-font-ko);
  font-size  : 18px;
  color      : var(--iv-color-txt);
}

/* ----------------------------------------------------------
   Q&A セクション群ラッパー
   ---------------------------------------------------------- */
.iv-sections {
  background: #fff;
}

/* ----------------------------------------------------------
   個別 Q&A セクション
   ---------------------------------------------------------- */
.iv-sec {
  max-width: var(--iv-inner-max);
  margin   : 0 auto;
  padding  : 80px var(--iv-side-pad);
  display  : flex;
  align-items: center;
  gap      : var(--iv-gap);
}

/* テキスト左・画像右 */
.iv-sec--txt-left .iv-sec__txt { order: 1; flex: 1 0 0; min-width: 0; }
.iv-sec--txt-left .iv-sec__img { order: 2; flex: none; }

/* 画像左・テキスト右 */
.iv-sec--img-left .iv-sec__img { order: 1; flex: none; }
.iv-sec--img-left .iv-sec__txt { order: 2; flex: 1 0 0; min-width: 0; }

/* テキストのみ（全幅） */
.iv-sec--full {
  display: block;
}
.iv-sec--full .iv-sec__txt {
  max-width: 100%;
}

/* テキストのみ（狭め・中央揃え） */
.iv-sec--narrow {
  max-width: var(--iv-content-w);
  padding-left : 0;
  padding-right: 0;
}

/* 画像コンテナ: 幅固定・縦横比 4:3 で自動スケール */
.iv-sec__img {
  width       : var(--iv-img-w);
  aspect-ratio: 4 / 3;
  overflow    : hidden;
  flex-shrink : 0;
  position    : relative;
}

.iv-sec__img img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center top;  /* 全写真で顔が上部にあるため上部基準 */
  display        : block;
}

/* ヘッダー行（Qナンバー ＋ 区切り線） */
.iv-sec__hd {
  display    : flex;
  align-items: center;
  gap        : 16px;
  width      : 100%;
  margin-bottom: 8px;
}

.iv-sec__qnum {
  font-family: var(--iv-font-ko);
  font-size  : 24px;
  font-weight: bold;
  color      : #000;
  white-space: nowrap;
  flex-shrink: 0;
}

.iv-sec__line {
  flex       : 1 0 0;
  height     : 1px;
  background : #222;
  min-width  : 0;
}

/* 質問タイトル */
.iv-sec__qtitle {
  font-family: var(--iv-font-yu);
  font-size  : 26px;
  font-weight: bold;
  color      : #000;
  line-height: 1.4;
  margin-bottom: 20px;
}

/* 回答テキスト */
.iv-sec__body,
.iv-sec__body p {
  font-family: var(--iv-font-yu);
  font-size  : 16px;
  color      : #000;
  line-height: 2;
}

.iv-sec__body strong {
  font-weight: bold;
  /* Yu Gothicはbold未内蔵のため疑似ボールドを補完 */
  -webkit-text-stroke: 0.3px currentColor;
}

.iv-sec__body p + p {
  margin-top: 1em;
}

/* ----------------------------------------------------------
   帯画像セクション（パララックスなし・静止）
   ---------------------------------------------------------- */
.iv-band {
  width   : 100%;
  height  : 400px;
  overflow: hidden;
}

.iv-band img {
  display  : block;
  margin   : 0 auto;
  max-width: 488px;
  width    : 100%;
  height   : auto;
}

/* parallax02・03: 全幅カバー */
.iv-band--wide img {
  max-width      : none;
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center;
}

/* ----------------------------------------------------------
   レスポンシブ: タブレット (1040px以下)
   ---------------------------------------------------------- */
@media only screen and (max-width: 1040px) {
  :root {
    --iv-side-pad: 40px;
    --iv-gap     : 40px;
  }

  .iv-hero {
    height: 250px;
  }

  .iv-hero__title {
    font-size: 36px;
  }

  .iv-hero__sub {
    font-size: 16px;
  }

  .iv-store-wide {
    margin-top: 24px;
  }

  .iv-person-section {
    height    : 360px;
    margin-top: 80px;
  }

  .iv-person-photo {
    height: 360px;
  }

  .iv-person-card {
    right  : var(--iv-side-pad);
    width  : 360px;
    padding: 24px 32px;
  }

  .iv-person-name-ja {
    font-size: 36px;
  }

  .iv-person-name-en {
    font-size: 18px;
  }

  .iv-person-role {
    font-size    : 16px;
    margin-bottom: 24px;
  }

  .iv-sec {
    padding: 60px var(--iv-side-pad);
  }

  .iv-sec__qtitle {
    font-size: 22px;
  }

  .iv-sec--narrow {
    padding-left : var(--iv-side-pad);
    padding-right: var(--iv-side-pad);
    max-width    : 100%;
  }

  .iv-band {
    height: 280px;
  }
}

/* ----------------------------------------------------------
   レスポンシブ: スマートフォン (767px以下)
   ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  :root {
    --iv-side-pad: 20px;
    --iv-gap     : 24px;
  }

  .iv-hero {
    height: 180px;
  }

  .iv-hero__title {
    font-size  : 22px;
    padding    : 0 16px;
    margin-bottom: 10px;
  }

  .iv-hero__sub {
    font-size: 12px;
  }

  .iv-store-wide {
    margin-top: 16px;
  }

  /* 人物紹介：スマホでは縦積み */
  .iv-person-section {
    height    : auto;
    display   : flex;
    flex-direction: column;
    margin-top: 40px;
  }

  .iv-person-photo {
    position : relative;
    left     : 0;
    transform: none;
    width    : 100%;
    height   : 260px;
  }

  .iv-person-card {
    position: relative;
    right   : auto;
    bottom  : auto;
    width   : 100%;
    padding : 24px 20px;
  }

  .iv-person-name-ja {
    font-size: 28px;
  }

  .iv-person-name-en {
    font-size: 16px;
  }

  .iv-person-role {
    font-size    : 14px;
    margin-bottom: 16px;
  }

  /* Q&A：スマホでは縦積み */
  .iv-sec,
  .iv-sec--txt-left,
  .iv-sec--img-left {
    flex-direction: column;
    align-items   : flex-start;
    padding: 48px var(--iv-side-pad);
  }

  .iv-sec--txt-left .iv-sec__txt,
  .iv-sec--img-left .iv-sec__txt { order: 2; }
  .iv-sec--txt-left .iv-sec__img,
  .iv-sec--img-left .iv-sec__img { order: 1; }

  .iv-sec__img {
    width       : 100%;
    aspect-ratio: 4 / 3;
    height      : auto;
  }

  .iv-sec__qtitle {
    font-size: 18px;
  }

  .iv-sec__qnum {
    font-size: 18px;
  }

  .iv-sec__body,
  .iv-sec__body p {
    font-size: 14px;
  }

  .iv-sec--narrow {
    padding-left : var(--iv-side-pad);
    padding-right: var(--iv-side-pad);
    max-width    : 100%;
  }

  .iv-band {
    height: 200px;
  }
}