/* ============================================================
   Rafale Holdings ― BUSINESS 05 / MARKETING
   ------------------------------------------------------------
   このファイルは
     css/style.css → css/business-detail.css → css/marketing.css
   の順で読み込まれる「差分だけ」のファイルです。

   HEROの組み方、Rの置き方、料金カード、PROCESS、FAQ、CONTACT は
   WEB PRODUCTION ページ（business-detail.css）のものをそのまま使うので、
   2つの事業詳細ページのデザインは必ず揃います。
   business-detail.css は書き換えていません。このページだけ違う部分は、
   すべてここで .mk- を付けて足すか、.mk-page を付けて上書きしています。

   スクロール性能について:
   このページで新しく足しているのは、静的な余白・文字・罫線の指定だけです。
   常時まわるアニメーション、filter / backdrop-filter、will-change、
   JavaScript は1つも追加していません（js/script.js は共通のものを
   そのまま読み込むだけ）。
   ============================================================ */

/* ------------------------------------------------------------
   セクションの光
   このページで新しく増えるのは WEB PRODUCTION 連携セクションだけ。
   （#services / #plan / #process / #faq / #contact の光は
     business-detail.css と style.css のものがそのまま効きます）
   動きは既存のキーフレームを使い回していて、新しい動きは足していない。
   ------------------------------------------------------------ */
#web-production::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(50% 38% at 20% 20%, rgba(250, 246, 240, 0.66), rgba(250,246,240,0) 74%), radial-gradient(44% 34% at 82% 60%, rgba(226, 238, 246, 0.46), rgba(226,238,246,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightComp 25s ease-in-out infinite;
}

/* ------------------------------------------------------------
   HERO の説明文
   サービスが増えて1行が長くなったため、この行が入りきる幅を確保する。
   （共通の 34em のままだと「…構築・運用、」の最後の数文字だけが
     次の行へ落ちて、不自然な改行になる）
   改行位置は <br class="only-pc"> で指定しているので、
   幅を広げても3行の組みは変わらない。スマホは元から幅の制限なし。
   ------------------------------------------------------------ */
.mk-page .bd-hero-desc { max-width: 40em; }

/* 文節ごとに区切って、その中では折り返させない。
   固定の <br> と違い、画面幅が変わっても文節の途中で切れない。 */
.mk-clause > span { display: inline-block; }

/* ------------------------------------------------------------
   SERVICES ― サービスの範囲についての注記
   組み方・文字・罫線は既存のまま。番号と本文の下に、
   一段小さい文字で条件を置くだけ。出方も番号→事業名→説明と
   同じ流れに乗せ、説明の次（0.28秒）に現れる。
   ------------------------------------------------------------ */
.mk-note {
  max-width: 740px;
  margin-top: clamp(12px, 1.6vh, 18px);
  padding-left: 16px;
  border-left: 1px solid rgba(170, 138, 86, 0.35);
  font-size: clamp(0.85rem, 1.4vw, 0.92rem);
  line-height: 2.0;
  letter-spacing: 0.03em;
  color: var(--label);
}
.biz-row .mk-note {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.85s, 0.85s, 0.85s;
  transition-timing-function: var(--ease-out);
}
.biz-row.is-visible .mk-note {
  opacity: 1; transform: none; filter: blur(0); transition-delay: 0.28s;
}
.biz-row:hover .mk-note { transform: translateX(6px); transition-delay: 0s; }

/* ------------------------------------------------------------
   PLAN ― カードの見た目は .bd-plan のまま、並びだけ4枚用に変える
   （WEB PRODUCTION は3枚で3列、こちらは4枚なので2列×2段）
   ------------------------------------------------------------ */
@media (min-width: 769px) {
  .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* プラン名（英語）の下に置く日本語。英語が主、日本語が従。 */
.mk-plan-jp {
  margin-top: clamp(8px, 1vh, 11px);
  font-size: 0.9rem; line-height: 1.8; letter-spacing: 0.06em; color: var(--ink-2);
}
/* 料金の上の間隔は、日本語が入ったぶんだけ詰め直す */
.mk-plans .bd-plan-price { margin-top: clamp(12px, 1.6vh, 18px); }

/* カード内の注記。カードの高さが違っても下端で揃うように、
   余った空間を上に寄せている。 */
.mk-plan-note {
  margin-top: auto;
  padding-top: clamp(18px, 2.4vh, 24px);
  font-size: 0.82rem; line-height: 1.95; letter-spacing: 0.03em; color: var(--label);
}

/* ------------------------------------------------------------
   GOOGLE BUSINESS PROFILE セクション
   既存の「番号・罫線・余白」の語彙だけで組んでいる。
   Googleカラー（赤・青・緑・黄）や地図風の装飾は使わない。
   ------------------------------------------------------------ */
#gbp::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(52% 40% at 76% 22%, rgba(228, 236, 244, 0.6), rgba(228,236,244,0) 74%), radial-gradient(44% 34% at 16% 70%, rgba(250, 247, 242, 0.56), rgba(250,247,242,0) 76%) */
  background-image: url(data:image/webp;base64,UklGRq4HAABXRUJQVlA4WAoAAAAwAAAARwAARwAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZBTFBIzgMAAAV3oKhtG6jlT7i/awMREQl++YGStv9t4wacFcdpInWBCLT3eQg4XqUKSO8hmN5DpZyCkwql9xDyBUzoyQFEjA8QE7wBeRjpDw2Quo7oPwO3bRspzerti1+BAoxSSnKcJgmK5VpttO4CeIhRSrJ8sZihWirVam383M0YWxKC8RFadwHh4YIxp11EByBv/WHGOYeUZYvorG5utLrr/DzHDwsSxlEkGwW59/Ki4IJxSDhBsoHcG28vhBBFAclB621vzn08KCrurCXBKZJKd7fMufXxfCkqwQUvKM1SJFttTO/nPVEJUYqCc0rSM6k7cC+irEQpSsE5J/NIadP31g6+M6tKlGXlnEWzSBlj7WhHnwCqyi3gLBLtjLXDuA8+yiODDfZJZ0c7DIOPe6ojc4pfxiMLxXnSp/aIwKaCA/STHRwZ/Ze5lXMhJ2c3+v5w5T745rJ/2gWDodlZs3XG4p3d+4fhwYgLzgg+a3YdjHf0S9IVSsEoSZHcbM35XgN+LTkqEQVjxNHSrjPntke+W4lyr0lweqRJbUCTPntEgI4gz08iqVpQXO/lBXDIWXoSyaaF5OfBApwRgtMTVDdK684Y5LWiYIwtSTZPE+CQQniOMUYpyXECNButt3v8xq6yJSEYiBun7fb4Dy8pJZmLVNBuUYA9vCQkx4skOkNyrTZadwjNkgQhKeMLFiVZhtMkQnW9Vm2rNcrTFGia9pgZyfEx0J7SDCdJ5Lzp5vS4yLI0TWaolnLdqlN0bf85TnBGcMFaXIBCCF3LMY4iBH/OM4EkmaFYSucd7iX5IonqgyRgStdRgEEgeZrO4oO0QBH9qRc30BxDUG0H8tuGQnAaOcoyfd/bsMQZyRezeL0BgfbWfhPEI2yZQ9hsHbc3wwKnBEe10p3jwxjUFpxRnEjV3er70Q7DcHsI73NOs5N6Y1yfxm+DQsk5SaQ21qmG6Y8QXixLztKms9appmEI4d2qLPn8Rm+ncRqnaRqnEN5Zraryyp/jOE3DBBbE86vValWOcN+DQYoD+HBVrcSV3TBBCg4vryrhbB+ucQ+E8HElOE2brrfjOEB5MwjBr14++aE11o5OETSXV2G+iWwPMtkvKILm+zpnJIvqdgdyG8ZxvC2EJ/kym0d1o7e9s2yQ3p5iJMOzWLXa1e15kG6fppezNKobpY2zbg+E4CSqpdJdB1txGCSbp7O4abTuTN9fR4FgNyi9NaaPw7gPQAjQptsfD+N+gtNkFstG6V2nEQoMOV5EUV2v1UZ3CIUGjFNoGqX2dTCXFjiBRqo1+kuWQCPR/4QhVlA4IOoBAABQDACdASpIAEgAPm0wlEYkIyIhL1VZOIANiWkAz7H495r+qBG3MWLMthAHNf91PUA/UnqRfs77AH6gFZl9ByOF/zDLq9VtN5D+OOnn4mEjmVvAo5FXLn/n6oxVXL1jzpBry3/2GMCEULIjMAD+/F0P/+iN1vnFpvXc54H6NXvIN6LlFDFyQpdW4B7KCg82EQMeDgbAE03AKKKx3SPjnonx7Ty1Y/kFQrEHzJaa/VjxG+oiWJP8nu8/U3tD+tT6zzXiB+xKsR4YBBSJSCIqNjNupFPssj/UC7jnPWJHQYj9R1p2X2HgdMASe0zU39W5JG1MhAsOdv23R+MsyySL+1x4cbzM31q1ErIb5E6WgbgbeG07WPRSOvzorv+AjInMvoTiy1ZcAzlSJaAWeQ92engaX+5+uc6sOP/9wt7bLYeeEpeXtFVAAPmitnbLkIv2sqM5KeybAof8KtApA9Y2oLNnYblHURJG5XTD5FCiF6tnsUH9SSADra4garb2hJq/EonNQbjugfot0TbVCPPfoYeArOkbjx1fo0xNTfxzbmum2ckALnGhmkSgs0mIH3WFUvkx9+a4VWfsN03o3OzWqdD1XNibdlM/uQPD7ILbB3w2t4MTZ/c9QipedHMNBLv1UAoVcly/jtgAAAAA);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightBiz 25s ease-in-out infinite;
}
#monthly::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(48% 38% at 22% 20%, rgba(250, 246, 240, 0.62), rgba(250,246,240,0) 74%), radial-gradient(44% 34% at 80% 62%, rgba(226, 238, 246, 0.44), rgba(226,238,246,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightMsg 23s ease-in-out infinite;
}

.mk-gbp-lead {
  max-width: 860px;
  margin-bottom: clamp(48px, 7vh, 84px);
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  line-height: 2.2; color: var(--sub);
}

.mk-gbp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.4vw, 54px) clamp(24px, 3vw, 44px);
  align-items: start;
}
.mk-gbp-item {
  padding-top: clamp(18px, 2.4vh, 24px);
  border-top: 1px solid rgba(30, 50, 70, 0.12);
}
.mk-gbp-num {
  display: block;
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.8rem; letter-spacing: 0.16em; color: #8A6A3C; opacity: 0.85;
}
.mk-gbp-name {
  margin-top: clamp(12px, 1.6vh, 16px);
  font-family: var(--font-jp-title); font-weight: 500;
  font-feature-settings: "palt" 1;
  font-size: clamp(1.02rem, 1.8vw, 1.16rem);
  line-height: 1.6; letter-spacing: 0.06em; color: var(--ink);
}
.mk-gbp-en {
  display: block; margin-top: clamp(6px, 0.9vh, 9px);
  font-family: var(--font-en); font-weight: 300;
  font-size: 0.74rem; line-height: 1.5; letter-spacing: 0.14em; color: #7B8794;
}
.mk-gbp-list { margin-top: clamp(14px, 1.8vh, 20px); }
.mk-gbp-list li {
  position: relative; padding-left: 20px;
  font-size: 0.92rem; line-height: 2.05; color: var(--ink-2);
}
.mk-gbp-list li::before {
  content: ""; position: absolute; left: 0; top: 1.02em;
  width: 9px; height: 1px; background: rgba(170, 138, 86, 0.5);
}

/* 注記をセクションの締めに単独で置くとき */
.mk-note--block { max-width: 880px; margin-top: clamp(34px, 4.6vh, 52px); }

/* ------------------------------------------------------------
   PLAN のグループ見出し
   料金がGoogleビジネスプロフィールとマーケティングの2群に分かれるので、
   どちらの料金かが分かるラベルを置く。新しい装飾は足していない。
   ------------------------------------------------------------ */
.mk-plan-group {
  display: flex; flex-direction: column; gap: 8px;
  margin: clamp(10px, 1.4vh, 16px) 0 clamp(24px, 3.2vh, 34px);
  padding-top: clamp(14px, 1.8vh, 20px);
  border-top: 1px solid rgba(30, 50, 70, 0.10);
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  letter-spacing: 0.06em; color: var(--ink-2);
}
.mk-plan-group span {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.78rem; letter-spacing: 0.28em; color: #8A6A3C;
}
/* 2群目の見出しは、1群目の注記から十分に離す */
.bd-note + .mk-plan-group,
.mk-note--block + .mk-plan-group { margin-top: clamp(56px, 8vh, 96px); }

/* MONTHLY SUPPORT は2枚なので2列 */
@media (min-width: 769px) {
  .mk-monthly-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
}

/* ------------------------------------------------------------
   WEB PRODUCTION 連携
   ボタンは実績で使っているものと同じ .bd-work-link。
   ------------------------------------------------------------ */
.mk-cross-text {
  max-width: 780px;
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  line-height: 2.2; color: var(--sub);
}
.mk-cross-link { margin-top: clamp(28px, 4vh, 40px); }

/* FAQ の本文中から WEB PRODUCTION へ渡すリンク */
.mk-inline-link {
  color: #7A6136;
  border-bottom: 1px solid rgba(170, 138, 86, 0.32);
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.mk-inline-link:hover { color: #6B5430; border-bottom-color: rgba(170, 138, 86, 0.6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* business-detail.css では SELECTED WORKS → PLAN の境目だけを
     詰めているが、このページに SELECTED WORKS は無い。
     セクション間の余白を、サイト共通の値へ戻しておく。 */
  .mk-page #plan { padding-top: clamp(120px, 17vh, 220px); }


  /* スマホは画面が狭い。文節を固定すると折り返しが増えて
     HEROが1行ぶん高くなってしまうため、通常の折り返しに戻す。
     （CLSへの効果も無いことを実測で確認済み） */
  .mk-clause > span { display: inline; }

  .mk-gbp { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vh, 36px); }
  .mk-gbp-lead { font-size: 0.95rem; line-height: 2.15; margin-bottom: clamp(36px, 5vh, 52px); }
  .mk-gbp-list li { font-size: 0.9rem; }
  .mk-plan-group { font-size: 0.95rem; }

  .mk-note { padding-left: 13px; font-size: 0.84rem; line-height: 1.95; }
  .mk-plan-jp { font-size: 0.88rem; }
  .mk-plan-note { font-size: 0.8rem; }
  .mk-cross-text { font-size: 0.95rem; line-height: 2.15; }
}

/* タブレットだけ2列。max-width だけで書くとスマホ側の1列指定より
   後ろに来てしまい、スマホでも2列になるため範囲を区切っている。 */
@media (min-width: 769px) and (max-width: 1024px) {
  .mk-gbp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .mk-cross-link { width: 100%; justify-content: center; }
}