@charset "utf-8";

/* ============================================================
   BUZZU 法人向けLP（/event/business/）SP調整
   ------------------------------------------------------------
   既存の business.css は変更せず、その「後ろ」に読み込んで使います。

     <link rel="stylesheet" href="/event/business/business.css">
     <link rel="stylesheet" href="/event/business/business_sp_fix.css">   ← これを追加

   すべての指定を @media (max-width: 767px) の中に閉じ込めてあるため、
   PC表示（768px以上）には一切影響しません。
   不要になったら link を1行消すだけで元に戻ります。
   ============================================================ */

@media screen and (max-width: 767px) {

  /* ------------------------------------------------------------
     1. ファーストビュー
     もとは margin-top:55vw の決め打ちで、商品写真の上に文字が乗る構造。
     写真の下に地色の帯を作り、リード文とボタンをそこへ逃がす。
     ------------------------------------------------------------ */

  /* 写真の下にリード文＋ボタン用の帯を作る（地色はFV画像と同じ） */
  .fv {
    background: #f5efe6;
    padding-bottom: min(22vw, 100px);
  }

  /* 見出しと商品写真の間隔を空けつつ、写真を少し小さくして
     リード文とボタンを実機の初期表示内に収める */
  .fv-img--sp {
    display: block;
    width: 86%;
    margin: 11vw auto 0;
  }

  /* 見出しは上端、リード文＋ボタンは下端へ自動で振り分ける */
  .fv-content {
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 4% 0 4vw;
  }

  /* .fv は <main class="business"> の外にあるためページ側のリセットが効かず、
     サイト共通CSSの h1 余白（上下padding 12px ＋ margin-bottom 12px）が乗る。
     その分だけ見出しが下がり、商品写真に重なっていた */
  .fv-title {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }

  .fv-title span {
    font-size: clamp(22px, 6.2vw, 46px);
    line-height: 1.4;
  }

  .fv-lead {
    /* 決め打ちの 55vw をやめ、下端へ寄せる */
    margin-top: auto;
    /* 2.6vw = 390px幅で10.1px しかなく読めない */
    font-size: clamp(13px, 3.4vw, 20px);
    /* PC用brを消した箇所の空白でだけ折り返す＝「販／売用」のような語中改行を防ぐ */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* PC用の br。どこにも定義されておらず、SPでも常に改行されていた
     （商品6「CRC」と商品8「寄付Tシャツ」の商品名） */
  .is-pc {
    display: none;
  }

  /* ------------------------------------------------------------
     2. おすすめの活用シーン
     SPはカード1枚の中身が約133pxしかなく、20pxの見出しでは
     「スポーツチー／ム」「フェス・ライ／ブ」と語の途中で折れていた。
     ------------------------------------------------------------ */

  .support-card {
    min-height: 330px;
    padding: 18px 12px;
  }

  .support-card__icon img {
    width: 40px;
    height: 40px;
  }

  .support-card h3 {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 12px;
    min-height: 3em;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .support-card h3 span {
    font-size: 13px;
  }

  .support-card__items {
    font-size: 12px;
    line-height: 1.7;
    /* 「ボトル」の途中で折れないよう、区切りのスペースだけで改行させる */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* ------------------------------------------------------------
     3. BUZZUが選ばれる理由
     SPも本文幅が58%(205px)のままで1行14文字。さらに白いグラデーションが
     68%で薄くなるため、文末が写真の暗い部分に載って読めなかった。
     ------------------------------------------------------------ */

  .reason-card {
    min-height: 240px;
  }

  .reason-card::before {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.95) 58%,
      rgba(255,255,255,0.72) 78%,
      rgba(255,255,255,0.05) 100%
    );
  }

  .reason-card__content {
    width: 72%;
    padding: 22px 16px;
  }

  .reason-card p {
    font-size: 13px;
    line-height: 1.85;
  }

  /* ------------------------------------------------------------
     4. 12px未満だった文字に下限をつける
     max() / clamp() なので、画面が広いときの見え方は従来のまま。
     ------------------------------------------------------------ */

  .business_subTitle {
    font-size: max(14px, 3.599vw);
  }

  .business_cap {
    font-size: max(11px, 2.667vw);
  }

  .recommendInfo_text {
    font-size: max(12px, 3vw);
    /* 2行になるとき「1点あ／たり」で割れないように行を均す */
    text-wrap: balance;
  }

  .recommendInfo_price {
    font-size: max(12px, 3vw);
  }

  .recommendInfo_price span {
    font-size: max(16px, 4vw);
  }

  .recommendInfo_name {
    font-size: max(13px, 3.2vw);
  }

  .recommend_text {
    font-size: max(13px, 3.2vw);
  }

  .cta_button {
    font-size: max(13px, 3.2vw);
  }

  .c-faq-acc__q {
    font-size: max(14px, 3.2vw);
  }

  .c-faq-acc__q button::before {
    font-size: max(14px, 3.466vw);
  }

  .c-faq-acc__a {
    font-size: max(13px, 3.466vw);
  }

  .c-faq-acc__a::before {
    font-size: max(14px, 3.466vw);
  }

  /* ------------------------------------------------------------
     5. 追従CTAバー
     ※ここは元の原稿には無い追加分です。
       このブロックと、HTMLの <div class="fixedCta"> を消せば元に戻ります。
       class に cta_button を含めているので既存のGTM計測にそのまま乗り、
       --fixed で通常のCTAと分けて集計できます。
     ------------------------------------------------------------ */

  .fixedCta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);

    /* 既定は画面の外に隠しておく。ファーストビューのボタンが見えている間は
       出さない（同じボタンが2つ重なるのを防ぐ）。
       JSが動かない環境では出ないままなので、レイアウトは崩れません */
    transform: translateY(110%);
    transition: transform 0.25s ease;
    pointer-events: none;
  }

  .fixedCta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .fixedCta .cta_button {
    width: 92vw;
    padding: 3vw 4vw;
  }

  /* 追従バーが最後のボタンに被らないよう、本文の下に逃げしろを作る。
     追従CTAをHTMLに入れなかった場合は、この余白も付きません */
  .business:has(.fixedCta) {
    padding-bottom: 84px;
  }

}

/* 追従CTAはSP専用。PCでは非表示にする。
   ※このファイルで唯一 768px 以上に効く指定ですが、対象は今回追加した
     .fixedCta（元の原稿には存在しない要素）だけなので、
     既存のPCレイアウトには影響しません。 */
@media screen and (min-width: 768px) {
  .fixedCta {
    display: none;
  }
}