@charset "UTF-8";
/* ==========================================================================
   乾杯までがスポーツだ！PROJECT キャンペーンLP
   - 既存CSS（common / lower-pages / company）より後に読み込むこと
   - すべて .kanpai-lp 配下にスコープしているため他ページへの影響なし
   - デザイン基準幅 1920px / コンテンツ幅 1010px
   ========================================================================== */

/* main-container の既存余白・最大幅を打ち消す（LPページのみ） */
.main-container--kanpai {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.kanpai-lp {
  /* --- カラー --- */
  --kl-blue: #5bc1da;
  --kl-lime: #ddff48;
  --kl-white: #fff;
  --kl-note: #a8a8a8;
  --kl-blue-0: rgba(91, 193, 218, 0); /* --kl-blue の透明版（グラデーション用） */
  --kl-gray: #b3b3b3;

  /* --- スケール単位 -----------------------------------------------------
     デザイン1px = 1u。1120px以上のビューポートで 1u = 1px。
     それ以下では画面幅に比例して縮小し、0.6px で下限を打つ。       */
  --u: clamp(0.6px, 0.0893vw, 1px);

  --kl-cont: 1010px;

  position: relative;
  width: 100%;
  color: var(--kl-white);
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

/* 見出し・図版まわりの初期値をリセット（親CSSに依存しない）
   :where() を使い詳細度を 0 にすることで、以降の個別指定が必ず勝つようにする */
:where(.kanpai-lp) :where(h1, h2, h3, h4, p, figure, figcaption, ol) {
  margin: 0;
  padding: 0;
  font-weight: 700;
}


:where(.kanpai-lp) img {
  display: block;
  max-width: 100%;
  height: auto;
}

.kl-inner {
  width: min(var(--kl-cont), 88%);
  margin-inline: auto;
}

/* .kl-br    … PCでのみ有効な改行（SPでは解除して自然に折り返す）
   .kl-br-sp … SPでのみ有効な改行 */
.kanpai-lp .kl-br-sp { display: none; }

@media (max-width: 767px) {
  .kanpai-lp .kl-br { display: none; }
  .kanpai-lp .kl-br-sp { display: inline; }
}

/* ==========================================================================
   青背景（ドット）
   ========================================================================== */
.kl-blue {
  position: relative;
  background-color: var(--kl-blue);
  background-image: url("../imgs/kanpai/bg_dots_left.png"),
    url("../imgs/kanpai/bg_dots_right.png");
  background-position: left top, right top;
  background-repeat: repeat-y, repeat-y;
  background-size: 240px auto, 240px auto;
}

@media (max-width: 1120px) {
  .kl-blue { background-size: 18vw auto, 18vw auto; }
}
@media (max-width: 767px) {
  /* SPは帯幅を絞った専用タイルに差し替え（縦の密度をPCと揃える） */
  .kl-blue {
    background-image: url("../imgs/kanpai/bg_dots_left_sp.png"),
      url("../imgs/kanpai/bg_dots_right_sp.png");
    background-size: 100px auto, 100px auto;
  }
}

/* --- 文字の視認性プレート ------------------------------------------------
   SPでは背景のドットが小さくなり文字と重なって読みづらいため、
   テキストブロックの背後にだけ背景色を敷いてドットを隠す。
   同色の放射グラデーションなので境界が出ない。                        */
@media (max-width: 767px) {
  /* 帯は画面幅いっぱいに敷き、上下だけフェードさせる。
     横幅を揃えることでドットが文字の脇に半端にかからない。 */
  .kl-plate {
    position: relative;
    isolation: isolate; /* ::before の z-index:-1 を要素内に閉じ込める */
    padding: 2.5vw 0;
  }

  .kl-plate::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-image: linear-gradient(
      to bottom,
      var(--kl-blue-0) 0,
      var(--kl-blue) 14px,
      var(--kl-blue) calc(100% - 14px),
      var(--kl-blue-0) 100%
    );
  }

  /* STEP2 の吹き出しだけは全幅にせず、バッジの背後にのみ敷く */
  .kl-flow__fig--2 .kl-flow__badge {
    background-image: radial-gradient(
      86% 40% at 50% 20%,
      var(--kl-blue) 58%,
      var(--kl-blue-0) 100%
    );
  }
}

/* ==========================================================================
   1. ファーストビュー
   ========================================================================== */
.kl-fv {
  margin: 0;
  background-color: var(--kl-blue);
}

.kl-fv img {
  width: 100%;
}

/* ==========================================================================
   2. コンセプト / ムービー
   ========================================================================== */
.kl-concept {
  padding-top: calc(105 * var(--u)); /* 調整前 189 */
}

.kl-lead {
  font-size: calc(25 * var(--u));  /* 調整前 23 */
  line-height: calc(52 * var(--u));
}

.kl-movie-ttl {
  margin: calc(124 * var(--u)) 0 0;
}

.kl-movie-ttl img {
  width: calc(571 * var(--u));
  margin-inline: auto;
}

.kl-movie {
  width: min(832px, 100%);
  margin: calc(32 * var(--u)) auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.kl-movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   3. キャンペーン
   ========================================================================== */
.kl-campaign {
  padding-top: calc(189 * var(--u));
}

.kl-campaign__ttl {
  margin: 0;
}

.kl-campaign__ttl img {
  width: calc(850 * var(--u));
  margin-inline: auto;
}

.kl-term {
  margin-top: calc(89 * var(--u));
}

.kl-term img {
  width: calc(811 * var(--u));
  margin-inline: auto;
}

.kl-campaign__desc {
  margin-top: calc(77 * var(--u));
  font-size: calc(23 * var(--u));  /* 調整前 19 */
  line-height: calc(46 * var(--u));
}

/* --- 賞品 --- */
.kl-prize {
  position: relative;
  width: calc(1010 * var(--u));
  max-width: 100%;
  margin: calc(30 * var(--u)) auto 0;
}


/* --- 参加の流れ --- */
.kl-flow__ttl {
  margin: calc(250 * var(--u)) 0 0;
}

.kl-flow__ttl img {
  width: calc(418 * var(--u));
  margin-inline: auto;
}

.kl-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0;
  row-gap: calc(85 * var(--u));
  width: calc(1030 * var(--u));
  max-width: 100%;
  margin: calc(69 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}

.kl-flow__item { margin: 0; }

.kl-flow__fig {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: calc(303 * var(--u));
}

.kl-flow__fig img { width: auto; }

.kl-flow__fig--1 img { height: calc(274 * var(--u)); }
.kl-flow__fig--3 img { height: calc(277 * var(--u)); }
.kl-flow__fig--4 img { height: calc(277 * var(--u)); }

/* STEP2 はアイコン＋吹き出しバッジの2点構成 */
.kl-flow__fig--2 {
  align-items: flex-end;
}

.kl-flow__fig--2 .kl-flow__icon {
  height: calc(270 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.kl-flow__badge {
  height: calc(303 * var(--u));
  margin-left: calc(-5 * var(--u));
}

.kl-flow__head {
  margin: calc(31 * var(--u)) 0 0;
  font-size: calc(22 * var(--u));
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-weight: 800;
  white-space: nowrap; /* デザイン通り1行で表示（カンプ実測 最長517px / カラム515px） */
  color: var(--kl-lime);
}

.kl-flow__text {
  margin-top: calc(14 * var(--u));
  font-size: calc(21 * var(--u));  /* 調整前 19 */
  line-height: calc(42 * var(--u));
}

/* --- CTA --- */
.kl-cta {
  margin-top: calc(117 * var(--u));
}

.kl-cta__btn {
  display: inline-block;
  width: calc(500 * var(--u));
  max-width: 88%;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.kl-cta__btn img { width: 100%; }

.kl-cta__btn:hover,
.kl-cta__btn:focus-visible {
  transform: translateY(calc(-3 * var(--u)));
  filter: brightness(1.06);
}

.kl-cta__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
  border-radius: 999px;
}

/* 受付開始前のグレーアウト状態 */
.kl-cta__btn--disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(500 * var(--u));
  max-width: 88%;
  min-height: calc(100 * var(--u));
  padding: calc(10 * var(--u)) calc(24 * var(--u));
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--kl-gray);
  color: #fff;
  font-size: calc(26 * var(--u));
  line-height: 1.3;
  letter-spacing: 0.06em;
  font-weight: 800;
  cursor: default;
}

.kl-cta__btn--disabled:hover {
  transform: none;
  filter: none;
}

.kl-cta__note {
  margin-top: calc(29 * var(--u));
  font-size: calc(20 * var(--u));  /* 調整前 19 */
  line-height: calc(41 * var(--u));
}

.kl-cta__note a {
  color: var(--kl-lime);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.kl-cta__note a:hover { text-decoration: none; }

.kl-campaign > .kl-inner {
  padding-bottom: calc(179 * var(--u));
}

/* ==========================================================================
   4. 写真帯＋青→白グラデーション
   ========================================================================== */
/* 白フェードは擬似要素で重ねる。背景そのものを塗ると親 .kl-blue の
   ドットが途中で切れてしまうため。transparent → #fff なので水玉も一緒にフェードする */
.kl-outro {
  position: relative;
  width: 100%;
  padding-bottom: 8.3%;
}

.kl-outro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 54%,
    #ffffff 100%
  );
}

.kl-outro img {
  position: relative;
  z-index: 1; /* 写真は白フェードより手前 */
  width: 100%;
}

/* ==========================================================================
   5. 「乾杯までがスポーツだ！PROJECT」とは？（白背景）
   ========================================================================== */
.kl-about {
  position: relative;
  background: #fff;
  color: var(--kl-blue);
  padding-bottom: calc(240 * var(--u));
}

.kl-about__ttl {
  margin: 0;
  padding-top: calc(103 * var(--u));
  font-size: calc(32 * var(--u));
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--kl-blue);
}

.kl-about__body {
  position: relative;
  width: min(1200px, 92%);
  margin: calc(69 * var(--u)) auto 0;
}

.kl-about__text {
  font-size: calc(23 * var(--u));  /* 調整前 20 */
  line-height: calc(64 * var(--u));
  letter-spacing: 0.05em;
}

.kl-about__text + .kl-about__text {
  margin-top: calc(60 * var(--u));
}

.kl-about__message {
  margin-top: calc(60 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(72 * var(--u));
  letter-spacing: 0.06em;
}

.kl-about__mascot {
  margin: calc(57 * var(--u)) 0 0;
  text-align: center;
}

.kl-about__mascot img {
  width: calc(230 * var(--u));
  margin-inline: auto;
}

.kanpai-lp .kl-about__mascot figcaption {
  margin-top: calc(24 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-align: center;
  color: var(--kl-blue);
}

.kl-about__note {
  margin-top: calc(110 * var(--u));
  font-size: calc(15 * var(--u));  /* 調整前 14 */
  line-height: calc(30 * var(--u));
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--kl-note);
}

/* --- 本文まわりのマスコット（PC：絶対配置） --- */
.kl-mascots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kl-mascot {
  position: absolute;
  width: auto;
}

/* top は .kl-about（白背景セクション）上端からの距離 */
.kl-mascot--01 { left: calc(50% - 532 * var(--u)); top: calc(235 * var(--u)); width: calc(188 * var(--u)); }
.kl-mascot--02 { left: calc(50% + 380 * var(--u)); top: calc(235 * var(--u)); width: calc(162 * var(--u)); }
.kl-mascot--03 { left: calc(50% - 613 * var(--u)); top: calc(518 * var(--u)); width: calc(220 * var(--u)); }
.kl-mascot--04 { left: calc(50% + 443 * var(--u)); top: calc(556 * var(--u)); width: calc(184 * var(--u)); }
.kl-mascot--05 { left: calc(50% - 579 * var(--u)); top: calc(867 * var(--u)); width: calc(112 * var(--u)); }
.kl-mascot--06 { left: calc(50% + 439 * var(--u)); top: calc(904 * var(--u)); width: calc(122 * var(--u)); }

/* 本文幅とマスコットが干渉する幅からは、本文下に横並びで配置 */
/* 本文幅とマスコットが干渉する幅からは、見出しの上に3列で並べる。
   各イラストは小物（ボール・旗・ゴルフクラブ等）の分だけ画像サイズが違うため、
   キャラ本体の見た目が揃うよう個別に幅を指定している。 */
@media (max-width: 1180px) {
  .kl-mascots {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    justify-items: center;
    gap: 5vw 1vw;
    width: 86%;
    margin: 0 auto;
  }
  .kl-mascots--top { padding-top: 11vw; }      /* 見出しの上 */
  .kl-mascots--bottom { padding-top: 10vw; }   /* みちの助のキャプションの下 */

  .kl-mascot { position: static; }

  .kl-mascot--01 { width: 21.2vw; max-width: 163px; }
  .kl-mascot--02 { width: 17.8vw; max-width: 137px; }
  .kl-mascot--03 { width: 26.2vw; max-width: 201px; }
  .kl-mascot--04 { width: 21.0vw; max-width: 161px; }
  .kl-mascot--05 { width: 13.7vw; max-width: 105px; }
  .kl-mascot--06 { width: 14.8vw; max-width: 114px; }

  .kl-about__ttl { padding-top: calc(60 * var(--u)); }
}

/* ==========================================================================
   スマートフォン（〜767px）
   ========================================================================== */
@media (max-width: 767px) {
  .kanpai-lp {
    letter-spacing: 0.02em;
  }

  .kl-inner {
    width: 88%;
  }

  /* --- コンセプト --- */
  .kl-concept { padding-top: 7vw; } /* 調整前 12vw */

  .kl-lead {
    font-size: 13px;
    line-height: 2.15;
  }

  .kl-movie-ttl { margin-top: 12vw; }
  .kl-movie-ttl img { width: 62%; }

  .kl-movie { margin-top: 5vw; }

  /* --- キャンペーン --- */
  .kl-campaign { padding-top: 16vw; }

  .kl-campaign__ttl img { width: 82%; }
  .kl-term { margin-top: 7vw; }
  .kl-term img { width: 100%; }

  .kl-campaign__desc {
    margin-top: 6vw;
    font-size: 13px;
    line-height: 2.1;
  }

  .kl-prize {
    width: 100%;
    margin-top: 8vw;
  }


  /* --- 参加の流れ：1カラム --- */
  .kl-flow__ttl { margin-top: 24vw; }
  .kl-flow__ttl img { width: 52%; }

  .kl-flow {
    grid-template-columns: 1fr;
    width: 100%;
    row-gap: 11vw;
    margin-top: 9vw;
  }

  .kl-flow__fig { min-height: 0; }
  .kl-flow__fig img { height: auto; }
  .kl-flow__fig--1 img { width: 58%; }
  .kl-flow__fig--3 img { width: 60%; }
  .kl-flow__fig--4 img { width: 40%; }

  .kl-flow__fig--2 .kl-flow__icon {
    width: 38%;
    height: auto;
    margin-bottom: 2vw;
  }
  .kl-flow__fig--2 .kl-flow__badge {
    width: 34%;
    height: auto;
    margin-left: -1.5vw;
  }

  .kl-flow__body { margin-top: 4vw; }

  .kl-flow__head {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
  }

  .kl-flow__text {
    margin-top: 2.5vw;
    font-size: 13px;
    line-height: 2;
  }

  /* --- CTA --- */
  .kl-cta { margin-top: 14vw; }
  .kl-cta__btn { width: 78%; max-width: none; }
  .kl-cta__note {
    margin-top: 5vw;
    font-size: 12px;
    line-height: 2.1;
  }

  .kl-campaign > .kl-inner { padding-bottom: 18vw; }

  /* --- 写真帯 --- */
  .kl-outro { padding-bottom: 10%; }

  /* --- とは？ --- */
  .kl-about { padding-bottom: 20vw; }

  .kl-about__ttl {
    padding-top: 11vw;
    font-size: 17px;
    line-height: 1.6;
  }

  .kl-about__body {
    width: 86%;
    margin-top: 8vw;
  }

  .kl-about__text {
    font-size: 14px;
    line-height: 2.2;
  }
  .kl-about__text + .kl-about__text { margin-top: 7vw; }

  .kl-about__message {
    margin-top: 12vw;
    font-size: 22px;
    line-height: 2;
  }

  .kl-about__mascot { margin-top: 9vw; }
  .kl-about__mascot img { width: 40%; }
  .kl-about__mascot figcaption {
    margin-top: 4vw;
    font-size: 12px;
  }

  .kl-about__note {
    margin-top: 12vw;
    font-size: 10px;
    line-height: 2;
  }
}

/* ==========================================================================
   スクロールでのフェードイン
   is-fade-ready は JS が付与する。JSが動かない場合は常に表示されたまま。
   ========================================================================== */
.kanpai-lp.is-fade-ready .kl-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}

.kanpai-lp.is-fade-ready .kl-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* PCで絶対配置しているマスコットは transform を使わず、透過のみでフェード */
@media (min-width: 1181px) {
  .kanpai-lp.is-fade-ready .kl-mascots.kl-fade { transform: none; }
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kanpai-lp * {
    transition: none !important;
    animation: none !important;
  }
  .kanpai-lp .kl-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}