@charset "UTF-8";
/* ==========================================================================
   FV（ヘッダー含む） — Figma 10202:19111 / 1440x628
   座標はカンプ実測値。中間幅は静的退避MQで積み直す
   ========================================================================== */

/* --------------------------------------------------
   ヘッダー（FV上に重なる。カンプ 0,0 1440x84）
   -------------------------------------------------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 84px;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 16px 50px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__mark {
  flex-shrink: 0;
  width: 27px;
  height: 40px;
}

.header__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-text);
}

.header__cta {
  flex-shrink: 0;
  min-height: 52px;
  gap: 4px;               /* カンプ実測: icon40 + gap4 + text */
}
.header__cta .c-btn__icon { width: 40px; height: 40px; }

/* --------------------------------------------------
   FV本体
   -------------------------------------------------- */
.fv {
  position: relative;
  height: 628px;
  overflow: hidden;
  background: var(--c-base-green);
}

/* 装飾（奥→手前） */
.fv__factory { position: absolute; z-index: 1; }
.fv__factory--right { top: 420px; left: 800px; width: 618px; height: 168px; }
.fv__factory--left  { top: 421px; left: 32px;  width: 680px; height: 152px; }

.fv__base {
  position: absolute;
  z-index: 2;
  top: 570px;
  left: 0;
  width: 100%;
  height: 59px;
  background: var(--c-white);
}

.fv__worker { position: absolute; z-index: 3; width: 232px; height: 232px; }
.fv__worker--right { top: 397px; left: 1139px; }
.fv__worker--left  { top: 394px; left: 53px; }

/* SVGは影のぶん上下左右10pxのブリードを含む（実寸232x251 / 中身212x231）
   → 座標を-10して中身をカンプ位置に合わせる */
.fv__bubble { position: absolute; z-index: 5; width: 232px; height: 251px; }
.fv__bubble--left  { top: 141px; left: 69px; }
.fv__bubble--right { top: 141px; left: 1157px; }

/* --------------------------------------------------
   コンテンツ（カンプ 297,84 847x444 / 縦gap48）
   -------------------------------------------------- */
.fv__content {
  position: absolute;
  z-index: 4;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 847px;
}

/* コピー群（縦gap24） */
.fv__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* リード（縦gap10） */
.fv__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 744px;
}

/* --- タグ行（カンプ 519x51） --- */
.fv__tags {
  position: relative;
  width: 519px;
  height: 51px;
}

/* 線幅1pxの半分がSVG外周にブリードするため -0.5px 補正 */
.fv__bracket { position: absolute; top: -0.5px; }
.fv__bracket--1 { left: -0.5px;  width: 310px; height: 52px; }
.fv__bracket--2 { left: 87.5px;  width: 432px; height: 41px; }

.fv__taglist {
  position: absolute;
  top: 3px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.fv__tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: var(--c-text);
  white-space: nowrap;
}
.fv__tag img { width: 24px; height: 24px; }

/* --- 見出し（縦gap12 → 内側gap15） --- */
.fv__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 699px;
}

.fv__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: center;
}

.fv__title-1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.92px;
  color: var(--c-text);
}

/* 白帯（カンプ 699x71） */
.fv__title-2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 71px;
  background: var(--c-white);
  color: var(--c-main);
  white-space: nowrap;
}
.fv__title-2 em { font-style: normal; font-weight: 700; }
.fv__lg { font-size: 56px; line-height: 1.2; letter-spacing: 2.24px; }
.fv__sm { font-size: 48px; line-height: 1.2; letter-spacing: 1.92px; }

/* サブコピー */
.fv__sub {
  padding: 0 0 4px 12px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.96px;
  color: var(--c-text);
  white-space: nowrap;
}

.fv__strong {
  position: relative;
  margin: 0 4px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.28px;
  color: var(--c-accent);
}
/* 黄色マーカー（カンプ 105x12・文字より左右5px広い） */
.fv__strong::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  bottom: 0;
  width: calc(100% + 10px);
  height: 12px;
  background: var(--c-accent-yellow);
}

/* --- バッジ列（カンプ 847x40 / gap16） --- */
.fv__badges {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.fv__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--c-main);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.8px;
  color: var(--c-white);
  white-space: nowrap;
}
.fv__badge img { width: 20px; height: 20px; }

/* --- CTA（カンプ 652x72 / gap16） --- */
.fv__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fv__btn {
  position: relative;
  width: 318px;
  height: 72px;
}

/* LINEボタン上のフキダシ（カンプ 213x35 + 尾14x6） */
.fv__btn-badge {
  position: absolute;
  bottom: calc(100% - 16px);   /* カンプ実測: フキダシ下端472 / ボタン上端456 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 213px;
  height: 35px;
  border: 2px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.32px;
  color: var(--c-line);
  white-space: nowrap;
}
.fv__btn-badge::after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);       /* 枠線2px分を食い込ませる（カンプ 尾 470-476） */
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 6px 7px 0 7px;
  border-color: var(--c-white) transparent transparent transparent;
}

/* --------------------------------------------------
   中間幅（769〜1365px）— 静的退避
   -------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1365px) {
  .fv__bubble--left  { left: 16px; }
  .fv__bubble--right { left: auto; right: 16px; }
  .fv__worker--left  { left: 0; }
  .fv__worker--right { left: auto; right: 0; }
  .fv__factory--left { left: 0; }
  .fv__factory--right { left: auto; right: 0; }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .fv__bubble, .fv__worker { display: none; }
  .header__inner { padding-inline: 24px; }
}

/* --------------------------------------------------
   SP（〜768px）
   -------------------------------------------------- */
@media (max-width: 768px) {
  .header { height: 60px; }
  .header__inner { padding: 10px var(--sp-pad); gap: 8px; }
  .header__name { font-size: 15px; white-space: nowrap; }
  .header__sub { display: none; }        /* SPは社名のみ（幅確保のため） */
  .header__mark { width: 20px; height: 30px; }
  .header__cta {
    min-height: 40px;
    padding: 4px 14px 4px 6px;
    font-size: 13px;
    letter-spacing: 0.26px;
  }
  .header__cta .c-btn__icon { width: 28px; height: 28px; }

  .fv {
    height: auto;
    padding: 84px 0 132px;   /* 下部に工場シルエットとスタッフの帯を確保 */
  }

  /* 吹き出しはSPでは非表示。工場とスタッフは下部の帯に縮小して残す */
  .fv__bubble { display: none; }
  .fv__factory--left  { top: auto; bottom: 20px; left: -24px; width: 340px; height: auto; }
  .fv__factory--right { top: auto; bottom: 20px; left: auto; right: -150px; width: 309px; height: auto; }
  .fv__worker { top: auto; bottom: 6px; width: 112px; height: 112px; }
  .fv__worker--left  { left: 8px; }
  .fv__worker--right { left: auto; right: 8px; }

  .fv__content {
    position: static;
    transform: none;
    width: 100%;
    gap: 28px;
    padding-inline: var(--sp-pad);
  }

  .fv__copy { gap: 16px; }
  .fv__lead { width: 100%; gap: 8px; }

  /* タグ行はSPでは囲み罫を外して2段組に */
  .fv__tags { width: 100%; height: auto; }
  .fv__bracket { display: none; }
  .fv__taglist {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
  }
  .fv__tag { font-size: 14px; letter-spacing: 0.28px; }
  .fv__tag img { width: 18px; height: 18px; }

  .fv__headline { width: 100%; gap: 8px; }
  .fv__title { gap: 8px; }
  .fv__title-1 { font-size: 24px; letter-spacing: 0.96px; }
  .fv__title-2 { height: auto; padding: 6px 8px; gap: 2px; }
  .fv__lg { font-size: 28px; letter-spacing: 1.12px; }
  .fv__sm { font-size: 24px; letter-spacing: 0.96px; }

  .fv__sub {
    padding: 0;
    font-size: 14px;
    letter-spacing: 0.28px;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
  .fv__strong { font-size: 18px; letter-spacing: 0.72px; }
  .fv__strong::after { height: 8px; }

  .fv__badges {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .fv__badge {
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    font-size: 14px;
    letter-spacing: 0.28px;
  }
  .fv__badge img { width: 15px; height: 15px; }

  .fv__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;      /* フキダシの高さ分を確保 */
  }
  .fv__btn {
    width: 100%;
    max-width: 335px;
    height: 64px;
  }
  .c-btn--fv { padding: 12px 24px 12px 16px; font-size: 17px; }
  .fv__btn .c-btn__icon { width: 40px; height: 40px; }
  .fv__btn-badge {
    width: 190px;
    height: 30px;
    font-size: 13px;
    letter-spacing: 0.26px;
  }

  .fv__base { top: auto; bottom: 0; height: 26px; }
}