/* ==========================================================
   kpiee 導入アニメーション（イントロ） CSS
   色・サイズはこの変数で調整できます
   ========================================================== */
:root {
  --kpiee-intro-red: #F32F4C;   /* ピン・波紋の色 */
  --kpiee-intro-ink: #232634;   /* キャッチコピーの文字色 */
  --kpiee-intro-bg: #FFFFFF;    /* 背景色 */
}

/* イントロ中：スクロール禁止 */
html.kpiee-intro-active,
html.kpiee-intro-active body {
  overflow: hidden !important;
}

/* チラつき防止：JSでイントロが組み上がるまで、ページを白で覆う */
html.kpiee-intro-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--kpiee-intro-bg);
  z-index: 2147483000;
}

/* イントロ後にふわっと表示したい要素（data-kpiee-intro-reveal）をイントロ中は隠す */
html.kpiee-intro-active [data-kpiee-intro-reveal] {
  opacity: 0;
}

/* ---- イントロ本体 ---- */
.kpiee-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: var(--kpiee-intro-bg);
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kpiee-intro__art {
  position: absolute;
  inset: 0;
}
.kpiee-intro__ripples {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kpiee-intro__shadow {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.kpiee-intro__mark {
  position: absolute;
  height: clamp(110px, 32vmin, 180px);
  aspect-ratio: 98 / 140;
  will-change: transform;
}
.kpiee-intro__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kpiee-intro__copy {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 16px;
  color: var(--kpiee-intro-ink);
  font-family: inherit;          /* サイトのフォントをそのまま使う */
  font-weight: 700;
  font-size: clamp(17px, 4.4vmin, 28px);
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  opacity: 0;
}
.kpiee-intro__copy-inner { display: inline-block; }
.kpiee-intro__seg { display: inline-block; transform-origin: 0 0; }
.kpiee-intro__br { display: none; }
@media (max-width: 600px) {
  .kpiee-intro__br { display: inline; }   /* スマホでは2行に */
}

/* スキップボタン */
.kpiee-intro__skip {
  position: absolute;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #9A9EAB;
  font: inherit;
  font-size: 12px;
  letter-spacing: .12em;
  cursor: pointer;
}
.kpiee-intro__skip:focus-visible {
  outline: 2px solid var(--kpiee-intro-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 293回目：PC（769px以上）では SKIP が小さく見落としやすいため、目立ちすぎない範囲で少し大きく・濃く
   （12px・#9A9EAB → 14px・#868F9C。押せる範囲も少し広げる）。SPは従来どおり */
@media (min-width: 769px) {
  .kpiee-intro__skip {
    right: 28px;
    bottom: max(28px, env(safe-area-inset-bottom));
    padding: 10px 16px;
    font-size: 14px;
    color: #868F9C;
  }
}


/* 299回目：SKIP をボタンのデザインに（グレー）。
   角丸の枠つきボタン。白地に重なっても見えるよう、薄いグレーの地＋グレーの枠・文字。
   押せる範囲は高さ44px以上（方針書⑤-9）。上の指定（位置・PCの大きさ）は活かし、見た目だけ上書き */
.kpiee-intro__skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #C7CCD4;
  border-radius: 999px;
  background: #F2F4F6;
  color: #63636B;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  transition: background-color .2s, border-color .2s;
}
.kpiee-intro__skip::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) {
  .kpiee-intro__skip:hover {
    border-color: #9AA3AE;
    background: #E6E9ED;
  }
}
.kpiee-intro__skip:focus-visible {
  border-radius: 999px;
}
@media (min-width: 769px) {
  .kpiee-intro__skip {
    min-height: 44px;
    padding: 0 22px;
    font-size: 13px;
    color: #63636B;
  }
}