/* メーカー・イベント事業者向けページ専用スタイル（Figma 325:1710 PC / 476:1081 SP） */

/* ---------- ページ固有トークン（スクリーンショットからのピクセル実測値） ---------- */
.mk {
  --mk-red: var(--color-red);
  /* #cc242b ＝ Figma書き出しSVGの実測値 */
  --mk-blush: #fcf4f4;
  /* ヒーロー上端／サービスカードの淡赤 */
  --mk-blush-end: #f7ebec;
  /* ヒーロー下端 */
  --mk-deco: #eed8d9;
  /* ヒーロー写真の背面装飾ブロック */
  --mk-lavender: #eef2f8;
  /* STRENGTH背景 */
  --mk-num-ghost: #e7eaef;
  /* STRENGTHの装飾大数字 */
  --mk-cta-from: #cb232a;
  /* CTA帯グラデーション上端 */
  --mk-cta-to: #8f171e;
  /* CTA帯グラデーション下端 */
  --mk-heading: var(--color-navy-dark);
  /* 見出し色 #0f2547 */

  /* Figmaは約物を詰めない（palt無効）状態で文字幅を算出している。
     common.cssのグローバルなpaltを打ち消し、折り返し位置とタグ幅をFigmaと一致させる */
  font-feature-settings: normal;
}

/* ---------- 共通パーツ ---------- */
.mk-sec-head {
  text-align: center;
}

.mk-sec-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2em;
  color: var(--mk-red);
}

.mk-sec-title {
  margin-top: 16px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 36px;
  line-height: 50px;
  color: var(--mk-heading);
}

/* サービスセクションのみ外枠が狭い（Figma: 1072 / 内容1008） */
.mk-container-service {
  max-width: 1072px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   ヒーロー（Figma 325:1769 / 476:1584）
   ============================================================ */
.mk-hero {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--mk-blush) 0%, var(--mk-blush-end) 100%);
}

/* flexコンテナにしてインライン要素のベースライン余白を殺す（Figmaの行高と一致させるため） */
.mk-back {
  display: flex;
  margin-bottom: 8px;
}

.mk-back__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-sub);
}

.mk-back__link:hover {
  color: var(--mk-red);
}

.mk-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.mk-hero__body {
  width: 100%;
  min-width: 0;
}

.mk-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--mk-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.mk-badge__icon {
  width: 20px;
  height: 20px;
}

.mk-hero__title {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 48px;
  line-height: 62px;
  color: var(--mk-heading);
}

.mk-hero__accent {
  color: var(--mk-red);
}

.mk-hero__lead {
  margin-top: 20px;
  font-size: 16px;
  line-height: 31px;
  color: var(--color-text-sub);
}

.mk-hero__actions {
  margin-top: 20px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

/* 2段組みの赤ボタン（上段に小ラベル、下段に本文＋矢印） */
.mk-btn-primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 256px;
  height: 64px;
  padding: 0 32px;
  border-radius: var(--radius);
  background: var(--mk-red);
  color: #fff;
  transition: opacity .2s ease;
}

.mk-btn-primary:hover {
  opacity: .88;
}

.mk-btn-primary__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  color: rgba(255, 255, 255, .6);
}

.mk-btn-primary__main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.mk-btn-primary__main img {
  width: 24px;
  height: 24px;
}

.mk-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 208px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}

.mk-btn-ghost:hover {
  border-color: var(--color-navy);
}

.mk-btn-ghost img {
  width: 20px;
  height: 20px;
}

/* 写真＋背面の装飾ブロック（Figma 325:1797 / 325:1798） */
.mk-hero__figure {
  position: relative;
  width: 100%;
  min-width: 0;
}

.mk-hero__deco {
  position: absolute;
  left: 15%;
  top: 16%;
  width: 88%;
  height: 88%;
  background: var(--mk-deco);
  border-radius: 16px;
  z-index: 0;
}

.mk-hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  /* Figmaの影パラメータはメタデータに含まれないため、スクショの減衰（直下で約16%暗化・
     約35pxでフェード・青寄りの色味）から近似した値 */
  box-shadow: 0 16px 36px rgba(24, 35, 56, .22);
}

/* ============================================================
   提供サービス（Figma 325:1801 / 476:1149）
   ============================================================ */
.mk-service {
  padding: 80px 0;
  background: #fff;
}

.mk-svc-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Figmaは枠線を内側に描くため、内容の余白(32/20)から枠線2pxを引いた値をpaddingにする
   → 外周からの見た目は 32px / 20px、カード総高は142pxで一致する */
.mk-svc {
  position: relative;
  min-height: 142px;
  padding: 30px 18px;
  background: var(--mk-blush);
  border: 2px solid var(--mk-red);
  border-radius: var(--radius);
}

.mk-svc__num {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
  color: var(--mk-red);
}

/* Figma同様、見出しは幅280pxいっぱいを使い、右上の大数字とは重ねて配置する
   （最長の「会員獲得・募集プロモーション」でも18pxなら1行に収まる） */
.mk-svc__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-text);
}

.mk-svc__desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 23px;
  color: var(--color-text-sub);
}

.mk-svc__border {
  border: 1px solid var(--mk-lavender);
  margin-top: 30px;
}

/* 対応商材例タグ帯（Figma 325:1854 / 476:3268）
   Figmaの帯フレームは上に20pxの余白を内包するため、カード下32px＋20px＝52px */
.mk-tags {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mk-tags__label {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text-sub);
}

.mk-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mk-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 17px;
  border-radius: 999px;
  background: var(--color-bg-light);
  color: var(--color-text-sub);
  font-size: 14px;
  line-height: 1;
  border: 1.5px solid var(--mk-lavender);
}

.mk-tags__list .mk-tag:last-child {
  background-color: #fff;
}

/* ============================================================
   メーカーに選ばれる理由（Figma 325:1871 / 476:1193）
   ============================================================ */
.mk-strength {
  padding: 80px 0;
  background: var(--mk-lavender);
}

.mk-str-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.mk-str {
  min-height: 254px;
  padding: 25px 33px 33px;
  background: #fff;
  border-radius: var(--radius);
}

.mk-str__num {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 56px;
  line-height: 56px;
  color: var(--mk-num-ghost);
}

.mk-str__title {
  padding-top: 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: var(--mk-heading);
}

.mk-str__desc {
  padding-top: 16px;
  font-size: 16px;
  line-height: 27px;
  color: var(--color-text-sub);
}

/* ============================================================
   メーカー向けの実績（Figma 325:1900 / 476:1220）
   ============================================================ */
.mk-works {
  padding: 80px 0;
  background: #fff;
}

.mk-works-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.mk-work {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mk-work__figure {
  position: relative;
}

.mk-work__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mk-work__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 12px;
  border-radius: 5px;
  background: var(--mk-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.mk-work__badge img {
  width: 20px;
  height: 20px;
}

.mk-work__body {
  padding: 24px;
}

.mk-work__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-text);
}

.mk-work__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 25px;
  color: var(--color-text-sub);
}

.mk-works__note {
  margin-top: 32px;
  text-align: center;
  font-size: 13px;
  line-height: 14px;
  color: var(--color-text-sub);
}

/* ============================================================
   CTAバンド（Figma 325:1954 / 476:1816）
   ============================================================ */
.mk-cta {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--mk-cta-from) 0%, var(--mk-cta-to) 100%);
  text-align: center;
}

.mk-cta__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 32px;
  line-height: 48px;
  color: #fff;
}

.mk-cta__lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 30px;
  color: rgba(255, 255, 255, .92);
}

.mk-cta__actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mk-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 320px;
  height: 56px;
  padding: 0 42px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--mk-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: opacity .2s ease;
}

.mk-cta__btn:hover {
  opacity: .9;
}

.mk-cta__btn img {
  width: 24px;
  height: 24px;
}

.mk-cta__note {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #fff;
}

.mk-cta__note img {
  width: 20px;
  height: 20px;
}

/* PCでは強制改行を無効化（SP版のみ2行組み） */
.mk-br-sp {
  display: none;
}

/* ============================================================
   SP（Figma 0812_SP 440幅・375〜440px可変）
   ============================================================ */
@media (max-width: 768px) {
  .mk-container-service {
    padding: 0 20px;
  }

  .mk-sec-head {
    text-align: left;
  }

  .mk-sec-title {
    font-size: 28px;
    line-height: 39px;
  }

  /* ヒーロー */
  .mk-hero {
    padding: 60px 0;
  }

  .mk-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mk-hero__title {
    font-size: 36px;
    line-height: 47px;
  }

  .mk-hero__lead {
    line-height: 27px;
  }

  .mk-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mk-hero__figure {
    width: 100%;
  }

  .mk-hero__deco {
    left: 15%;
    top: 16%;
    width: 88%;
    height: 88%;
  }

  /* 提供サービス */
  .mk-service {
    padding: 60px 0;
  }

  .mk-svc-grid {
    margin-top: 32px;
    grid-template-columns: 1fr;
  }

  /* SPは1カラムのため、説明文が1行で済むカード（05 物販イベント）は
     Figma同様119pxに縮む。142pxの下限を外して内容なりの高さにする */
  .mk-svc {
    min-height: 0;
  }

  .mk-tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 44px;
  }

  /* 選ばれる理由 */
  .mk-strength {
    padding: 60px 0;
  }

  .mk-str-grid {
    margin-top: 32px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mk-str {
    min-height: 0;
    padding: 25px;
  }

  .mk-str__num {
    font-size: 40px;
    line-height: 40px;
  }

  /* 実績 */
  .mk-works {
    padding: 60px 0;
  }

  .mk-works-grid {
    margin-top: 32px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* SPはカード群と注記の間隔がFigma実数値で24px（PCは32px） */
  .mk-works__note {
    margin-top: 24px;
    text-align: left;
  }

  /* CTA */
  .mk-cta {
    padding: 60px 0;
  }

  .mk-cta__title {
    font-size: 24px;
    line-height: 36px;
  }

  .mk-cta__lead {
    line-height: 27px;
  }

  .mk-cta__btn {
    width: 100%;
    max-width: 320px;
  }

  .mk-br-sp {
    display: inline;
  }
}

/* 360px以下の小型端末でボタンがはみ出さないように */
@media (max-width: 400px) {
  .mk-btn-primary {
    width: 100%;
    max-width: 256px;
  }
}