@charset "UTF-8";

/* =========================================================================
   p-feature: Barbour × Norbit by Hiroshi Nozawa LP
   単位方針: PC = テキストrem固定 / ビジュアル要素calc(vw)基準1400、SP = 全要素calc(vw)基準375
   配置は通常フロー + margin (flex含む) を優先し、position は使用しない
   ========================================================================= */

.p-feature {
  overflow-x: hidden;
}

/* ---------- MV ---------- */

.p-feature__mv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- lead (H1 + リード文) ---------- */

.p-feature__lead {
  margin: 0 auto;
  margin-top: calc(130 * (100vw / 1400));
  text-align: center;
}

.p-feature__lead-title {
  margin: 0 0 12.9rem;
  font-family: var(--font-barbour-sans);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: normal;
  color: #000;
}

.p-feature__lead-subtitle {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.p-feature__lead-text {
  margin: 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 2;
  letter-spacing: 0.02em;
  color: #000;
}

/* ---------- movie ---------- */

.p-feature__movie {
  margin: 0 auto;
  margin-top: calc(164 * (100vw / 1400));
  width: calc(960 * (100vw / 1400));
}

.p-feature__movie-title {
  margin: 0 0 calc(40 * (100vw / 1400));
  font-family: var(--font-barbour-sans);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: normal;
  text-align: center;
  color: #000;
}

.p-feature__movie-player {
  width: 100%;
}

/* ---------- caption (価格キャプション、Section01〜06共通) ---------- */

.p-feature-caption {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-size: 1.7rem;
  line-height: 1.5;
  color: #000;
}

.p-feature-caption__label {
  font-weight: 400;
}

.p-feature-caption__name {
  font-weight: 300;
}

.p-feature-caption__price {
  display: inline;
  font-weight: 300;
  color: #000;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ---------- collage (Section01: 6枚コラージュ) ---------- */
/* 通常フロー + margin で配置。img02/img03 のみ縦方向に重なる (フローで表現不可) ため row を flex 化 */

.p-feature__collage {
  margin-top: calc(180 * (100vw / 1400));
  width: calc(1150 * (100vw / 1400));
}

.p-feature__collage-image {
  overflow: hidden;
}

.p-feature__collage-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-feature__collage-row {
  display: flex;
}

.p-feature__collage-image--01 { margin-left: calc(378 * (100vw / 1400)); width: calc(645 * (100vw / 1400)); height: calc(840 * (100vw / 1400)); }
.p-feature__collage-row { margin-top: calc(60 * (100vw / 1400)); }
.p-feature__collage-image--02 { margin-left: calc(250 * (100vw / 1400)); width: calc(430 * (100vw / 1400)); height: calc(560 * (100vw / 1400)); }
.p-feature__collage-image--03 { margin-top: calc(210 * (100vw / 1400)); margin-left: calc(40 * (100vw / 1400)); width: calc(430 * (100vw / 1400)); height: calc(560 * (100vw / 1400)); }
.p-feature__collage-image--04 { margin-top: calc(60 * (100vw / 1400)); margin-left: calc(250 * (100vw / 1400)); width: calc(900 * (100vw / 1400)); height: calc(597 * (100vw / 1400)); }
.p-feature__collage-image--05 { margin-top: calc(60 * (100vw / 1400)); margin-left: calc(550 * (100vw / 1400)); width: calc(500 * (100vw / 1400)); height: calc(651 * (100vw / 1400)); }
.p-feature-caption--01 { margin-top: calc(20 * (100vw / 1400)); margin-left: calc(550 * (100vw / 1400)); width: calc(307 * (100vw / 1400)); }
.p-feature__collage-image--06 { margin-top: calc(120 * (100vw / 1400)); width: calc(1107 * (100vw / 1400)); height: calc(548 * (100vw / 1400)); }

/* ---------- lineup (Section02〜06: 画像+キャプション) ---------- */
/* 通常フロー + margin で配置。左右の画像が縦方向に重なる節のみ row を flex 化 (Section02) */

.p-feature__lineup-image {
  overflow: hidden;
}

.p-feature__lineup-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-feature__lineup-row {
  display: flex;
}

.p-feature__lineup-columns {
  display: flex;
}

.p-feature__lineup--02 { margin: 0 auto; margin-top: calc(155 * (100vw / 1400)); width: calc(1080 * (100vw / 1400)); }
.p-feature__lineup-image--02-1 { width: calc(570 * (100vw / 1400)); height: calc(743 * (100vw / 1400)); }
.p-feature__lineup-image--02-2 { margin-top: calc(458 * (100vw / 1400)); margin-left: calc(40 * (100vw / 1400)); width: calc(470 * (100vw / 1400)); height: calc(709 * (100vw / 1400)); }
.p-feature-caption--02 { margin-top: calc(20 * (100vw / 1400)); margin-left: calc(610 * (100vw / 1400)); width: calc(322 * (100vw / 1400)); }

.p-feature__lineup--03 { margin-top: calc(130 * (100vw / 1400)); margin-left: calc(280 * (100vw / 1400)); width: calc(885 * (100vw / 1400)); }
.p-feature__lineup-image--03-1 { margin-left: calc(315 * (100vw / 1400)); width: calc(570 * (100vw / 1400)); height: calc(743 * (100vw / 1400)); }
.p-feature__lineup-image--03-2 { margin-top: calc(40 * (100vw / 1400)); width: calc(743 * (100vw / 1400)); height: calc(570 * (100vw / 1400)); }
.p-feature-caption--03 { margin-top: calc(20 * (100vw / 1400)); width: calc(300 * (100vw / 1400)); }

.p-feature__lineup--04 { margin-top: calc(130 * (100vw / 1400)); margin-left: calc(329 * (100vw / 1400)); width: calc(876 * (100vw / 1400)); }
.p-feature__lineup-image--04-1 { margin-left: calc(306 * (100vw / 1400)); width: calc(570 * (100vw / 1400)); height: calc(743 * (100vw / 1400)); }
.p-feature__lineup-image--04-2 { margin-top: calc(40 * (100vw / 1400)); width: calc(743 * (100vw / 1400)); height: calc(570 * (100vw / 1400)); }
.p-feature-caption--04 { margin-top: calc(20 * (100vw / 1400)); width: calc(300 * (100vw / 1400)); }

.p-feature__lineup--05 { margin: 0 auto; margin-top: calc(130 * (100vw / 1400)); width: calc(1100 * (100vw / 1400)); }
.p-feature__lineup-col--left { width: calc(570 * (100vw / 1400)); }
.p-feature__lineup-image--05-1 { width: calc(570 * (100vw / 1400)); height: calc(743 * (100vw / 1400)); }
.p-feature__lineup-image--05-4 { margin-top: calc(574 * (100vw / 1400)); width: calc(570 * (100vw / 1400)); height: calc(860 * (100vw / 1400)); }
.p-feature__lineup-col--right { margin-top: calc(197 * (100vw / 1400)); margin-left: calc(86 * (100vw / 1400)); }
.p-feature__lineup-image--05-2 { width: calc(444 * (100vw / 1400)); height: calc(350 * (100vw / 1400)); }
.p-feature__lineup-image--05-3 { margin-top: calc(216 * (100vw / 1400)); margin-left: calc(-26 * (100vw / 1400)); width: calc(470 * (100vw / 1400)); height: calc(709 * (100vw / 1400)); }
.p-feature-caption--05 { margin-top: calc(20 * (100vw / 1400)); margin-left: calc(1 * (100vw / 1400)); width: calc(260 * (100vw / 1400)); }

.p-feature__lineup--06 { margin: 0 auto; margin-top: calc(130 * (100vw / 1400)); width: calc(660 * (100vw / 1400)); }
.p-feature__lineup-image--06-1 { width: calc(660 * (100vw / 1400)); height: calc(860 * (100vw / 1400)); }
.p-feature-caption--06 { margin-top: calc(20 * (100vw / 1400)); width: calc(300 * (100vw / 1400)); }

/* ---------- shop-info (展開店舗案内。デザイン仕様書には無い追加コンテンツ) ---------- */

.p-feature__shop-info {
  margin: 0 auto;
  margin-top: calc(130 * (100vw / 1400));
  width: calc(660 * (100vw / 1400));
}

.p-feature__shop-attention {
  margin: 0 0 3rem;
  font-family: var(--font-zen-kaku-gothic-new);
  font-size: 1.7rem;
  line-height: 2;
  color: #000;
}

.p-feature__shop-list {
  margin: 0;
  padding: 0 0 1.8rem 1.5rem;
  border: 1px solid #000;
}

.p-feature__shop-list-heading {
  width: 11rem;
  margin: -2rem 0 1.5rem;
  background-color: #fff;
  font-family: var(--font-zen-kaku-gothic-new);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.7;
  text-align: center;
  color: #000;
}

.p-feature__shop-list-row {
  display: flex;
  align-items: baseline;
  margin: 0 0 1.8rem 1.5rem;
}

.p-feature__shop-list-name {
  margin: 0 1rem 0 0;
  font-family: var(--font-zen-kaku-gothic-new);
  font-size: 1.7rem;
  line-height: 2;
  color: #000;
}

.p-feature__shop-list-tel {
  margin: 0 1rem 0 0;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: #000;
}

.p-feature__shop-list-num {
  margin: 0;
  font-family: var(--font-barbour-sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: #000;
}

/* ---------- btn-all (COLLECTION ALL ITEMS) ---------- */

.p-feature__btn-all {
  margin: 0 auto;
  margin-top: calc(180 * (100vw / 1400));
  margin-bottom: calc(240 * (100vw / 1400));
  width: calc(660 * (100vw / 1400));
}

.p-feature__btn-all-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: calc(74 * (100vw / 1400));
  border: 1px solid #113e1d;
  background-color: #113e1d;
  font-family: var(--font-barbour-sans);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: calc(74 * (100vw / 1400));
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.4s ease, color 0.4s ease;
}

@media (hover: hover) {
  .p-feature__btn-all-link:hover {
    background-color: #fff;
    color: #113e1d;
  }
}

/* ---------- 画像フェードイン (design-spec.pdf ❷、画像のみが対象) ---------- */

[data-fade] {
  opacity: 0;
  transform: translateY(2rem);
}

[data-fade][data-inview] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* =========================================================================
   SP (767px以下)
   ========================================================================= */

@media (max-width: 767px) {

  .p-feature__lead {
    margin-top: calc(60 * (100vw / 375));
  }

  .p-feature__lead-title {
    margin-bottom: calc(56 * (100vw / 375));
    font-size: calc(17 * (100vw / 375));
  }

  .p-feature__lead-subtitle {
    font-size: calc(9 * (100vw / 375));
  }

  .p-feature__lead-br-pc {
    display: none;
  }

  .p-feature__lead-text {
    width: calc(335 * (100vw / 375));
    margin: 0 auto;
    font-size: calc(13 * (100vw / 375));
    line-height: 1.8;
    /* SP は Figma どおり左揃え (PC のみ中央揃え。見出しは SP も中央揃えのまま) */
    text-align: left;
  }

  .p-feature__movie {
    margin-top: calc(60 * (100vw / 375));
    width: calc(355 * (100vw / 375));
  }

  .p-feature__movie-title {
    margin-bottom: calc(20 * (100vw / 375));
    font-size: calc(17 * (100vw / 375));
  }

  .p-feature-caption {
    font-size: calc(12 * (100vw / 375));
  }

  .p-feature__collage {
    margin-top: calc(60 * (100vw / 375));
    width: calc(375 * (100vw / 375));
  }

  .p-feature__collage-image--01 { margin-left: calc(38 * (100vw / 375)); width: calc(300 * (100vw / 375)); height: calc(391 * (100vw / 375)); }
  .p-feature__collage-row { margin-top: calc(20 * (100vw / 375)); }
  .p-feature__collage-image--02 { margin-left: calc(15 * (100vw / 375)); width: calc(220 * (100vw / 375)); height: calc(285 * (100vw / 375)); }
  .p-feature__collage-image--03 { margin-top: calc(305 * (100vw / 375)); margin-left: calc(-75 * (100vw / 375)); width: calc(200 * (100vw / 375)); height: calc(259 * (100vw / 375)); }
  .p-feature__collage-image--04 { margin-top: calc(20 * (100vw / 375)); margin-left: 0; width: calc(375 * (100vw / 375)); height: calc(250 * (100vw / 375)); }
  .p-feature__collage-image--05 { margin-top: calc(20 * (100vw / 375)); margin-left: calc(87 * (100vw / 375)); width: calc(200 * (100vw / 375)); height: calc(261 * (100vw / 375)); }
  .p-feature-caption--01 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(79 * (100vw / 375)); width: calc(217 * (100vw / 375)); }
  .p-feature__collage-image--06 { margin-top: calc(60 * (100vw / 375)); width: calc(375 * (100vw / 375)); height: calc(188 * (100vw / 375)); }

  .p-feature__lineup--02 { margin-top: calc(60 * (100vw / 375)); margin-left: calc(20 * (100vw / 375)); margin-right: 0; width: calc(355 * (100vw / 375)); }
  .p-feature__lineup-image--02-1 { width: calc(280 * (100vw / 375)); height: calc(365 * (100vw / 375)); }
  .p-feature__lineup-image--02-2 { margin-top: calc(385 * (100vw / 375)); margin-left: calc(-165 * (100vw / 375)); width: calc(240 * (100vw / 375)); height: calc(362 * (100vw / 375)); }
  .p-feature-caption--02 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(115 * (100vw / 375)); width: calc(228 * (100vw / 375)); }

  .p-feature__lineup--03 { margin-top: calc(60 * (100vw / 375)); margin-left: calc(0 * (100vw / 375)); width: calc(345 * (100vw / 375)); }
  .p-feature__lineup-image--03-1 { margin-left: calc(65 * (100vw / 375)); width: calc(280 * (100vw / 375)); height: calc(365 * (100vw / 375)); }
  .p-feature__lineup-image--03-2 { margin-top: calc(20 * (100vw / 375)); width: calc(286 * (100vw / 375)); height: calc(220 * (100vw / 375)); }
  .p-feature-caption--03 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(15 * (100vw / 375)); width: calc(212 * (100vw / 375)); }

  .p-feature__lineup--04 { margin-top: calc(60 * (100vw / 375)); margin-left: calc(30 * (100vw / 375)); width: calc(345 * (100vw / 375)); }
  .p-feature__lineup-image--04-1 { margin-left: 0; width: calc(280 * (100vw / 375)); height: calc(365 * (100vw / 375)); }
  .p-feature__lineup-image--04-2 { margin-top: calc(20 * (100vw / 375)); margin-left: calc(59 * (100vw / 375)); width: calc(286 * (100vw / 375)); height: calc(220 * (100vw / 375)); }
  .p-feature-caption--04 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(60 * (100vw / 375)); width: calc(212 * (100vw / 375)); }

  .p-feature__lineup--05 { margin-top: calc(60 * (100vw / 375)); margin-left: calc(10 * (100vw / 375)); margin-right: 0; width: calc(365 * (100vw / 375)); }
  .p-feature__lineup-col--left { width: calc(250 * (100vw / 375)); }
  .p-feature__lineup-image--05-1 { width: calc(200 * (100vw / 375)); height: calc(261 * (100vw / 375)); }
  .p-feature__lineup-image--05-4 { margin-top: calc(311 * (100vw / 375)); margin-left: calc(20 * (100vw / 375)); width: calc(250 * (100vw / 375)); height: calc(377 * (100vw / 375)); }
  .p-feature__lineup-col--right { margin-top: calc(72 * (100vw / 375)); margin-left: calc(-35 * (100vw / 375)); }
  .p-feature__lineup-image--05-2 { width: calc(150 * (100vw / 375)); height: calc(118 * (100vw / 375)); }
  .p-feature__lineup-image--05-3 { margin-top: calc(91 * (100vw / 375)); margin-left: calc(-60 * (100vw / 375)); width: calc(180 * (100vw / 375)); height: calc(271 * (100vw / 375)); }
  .p-feature-caption--05 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(20 * (100vw / 375)); width: calc(184 * (100vw / 375)); }

  .p-feature__lineup--06 { margin-top: calc(60 * (100vw / 375)); width: calc(340 * (100vw / 375)); }
  .p-feature__lineup-image--06-1 { width: calc(340 * (100vw / 375)); height: calc(443 * (100vw / 375)); }
  .p-feature-caption--06 { margin-top: calc(10 * (100vw / 375)); margin-left: calc(1 * (100vw / 375)); width: calc(212 * (100vw / 375)); }

  .p-feature__shop-info {
    margin-top: calc(60 * (100vw / 375));
    width: calc(340 * (100vw / 375));
  }

  .p-feature__shop-attention {
    margin-bottom: calc(20 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
  }

  .p-feature__shop-list {
    padding: 0 0 calc(17 * (100vw / 375)) calc(15 * (100vw / 375));
  }

  .p-feature__shop-list-heading {
    width: calc(92 * (100vw / 375));
    margin-top: calc(-20 * (100vw / 375));
    margin-bottom: calc(15 * (100vw / 375));
    font-size: calc(17 * (100vw / 375));
  }

  .p-feature__shop-list-row {
    margin-bottom: calc(10 * (100vw / 375));
    margin-left: calc(15 * (100vw / 375));
  }

  .p-feature__shop-list-name {
    font-size: calc(13 * (100vw / 375));
  }

  .p-feature__shop-list-tel,
  .p-feature__shop-list-num {
    font-size: calc(12 * (100vw / 375));
  }

  .p-feature__btn-all {
    margin-top: calc(140 * (100vw / 375));
    margin-bottom: calc(180 * (100vw / 375));
    width: calc(340 * (100vw / 375));
  }

  .p-feature__btn-all-link {
    height: calc(62 * (100vw / 375));
    font-size: calc(13 * (100vw / 375));
    line-height: calc(62 * (100vw / 375));
  }

}