@charset "UTF-8";

/* ============================================================
   Kizuna Design 集客用LP — 画像LP
   画像を隙間なく積み、ボタン用の空白に透過PNGを重ねる構成
   ============================================================ */

:root {
  --lp-max-width: 680px;      /* PCで見た時の本文幅 */
  --lp-bg: #e6f3fb;           /* 画像の左右に出る背景色(FV画像の左端から拾った色) */
  --cta-aspect: 663 / 180;    /* ボタン画像の縦横比 */
  --accent: #1a8fd9;
  --footer-bg: #0e3a58;
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lp-bg);
  color: #1c2f3d;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 1. 画像を積む ---------- */

.lp-stack {
  max-width: var(--lp-max-width);
  margin-inline: auto;
  padding-block: 0;           /* 上下の余白を作らない。継ぎ目が出るため */
  background: #fff;
}

.lp-stack img {
  display: block;             /* 画像下の余白を消す */
  width: 100%;
  height: auto;
  margin: 0;                  /* 継ぎ目を見せない */
  border: 0;
  border-radius: 0;
}

/* ---------- 2. 画面に出さないテキスト ---------- */

/* display:none は使わない。隠しテキストと判定される恐れがあるため、
   位置とサイズで視覚的にだけ隠す */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 3. 画像内のCTAボタン ---------- */

.lp-cta-image { position: relative; }

/* 画像の空白の中央にボタン本体(影を除いた部分)が来るよう、
   cta.png の透明な余白(上3px・下14px)を差し引いて置いている。
   手計算せず、build_lp.py で算出すること。 */
.lp-hotspot {
  position: absolute;
  left: 5.80%;
  width: 88.40%;
  aspect-ratio: var(--cta-aspect);   /* 画像を差し替えても比率が崩れない */
}

.lp-hotspot > img { width: 100%; }

.lp-hotspot--s02 { top: 81.00%; }
.lp-hotspot--s05 { top: 79.07%; }
.lp-hotspot--s08 { top: 89.58%; }
.lp-hotspot--s17 { top: 80.98%; }

/* ---------- 常時の動き：光が走る ----------

   光はボタンの形の外へ出さない。CSSのマスクは file:// で
   読み込みに失敗すると要素ごと消えるので使わず、角丸で切る。
   光の層(.lp-fx)は、影を除いたボタン本体の範囲にだけ重ねる。
   角丸は最上部の不透明行から実測(横11.1%・縦43.6%)。 */

@keyframes ctaShine {
  /* 通過は4秒のうち0.9秒だけ。残りは画面外で待つ。
     乗りっぱなしだと文字が白く飛んで読めなくなる。 */
  0%       { transform: translateX(-200%) rotate(14deg); }
  22%,100% { transform: translateX(460%)  rotate(14deg); }
}

.lp-fx {
  position: absolute;
  left: 1.66%;
  right: 1.81%;
  top: 1.67%;
  bottom: 7.78%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 11.1% / 43.6%;
}

.lp-fx::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 0;
  width: 26%;
  height: 180%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  animation: ctaShine 4s linear infinite;
}

/* ---------- 常時の動き：大きくなって、元に戻る ----------

   1.6秒周期で、原寸(100%)から104%まで拡大して戻る。
   上下に4px浮かせる動きは小さくて目に留まらなかったため、変えた。
   104%にしているのは、画像内の白いカードの幅(690px)に、
   ボタン(663px)が拡大してちょうど収まる大きさのため。
   ボタン全体(画像と光の層)をいっしょに拡大して、光がずれないようにする。
   scale は transform とは別のプロパティなので、
   押した時の :active の沈み込み(transform)とぶつからない。 */
@keyframes ctaPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}
.lp-hotspot {
  animation: ctaPulse 1.6s ease-in-out infinite;
}

/* ---------- カーソルを合わせた時：明るくなるだけ ----------
   位置も形も動かさない(マウス環境でのみ。タップ端末では不要) */
@media (hover: hover) {
  .lp-hotspot {
    transition: filter .2s ease;
  }
  .lp-hotspot:hover {
    filter: brightness(1.10);
    /* カーソルを合わせている間は、ふわふわを止める。
       動きながら明るくなると、ぶれて見えるため(大きさもその場で止まる) */
    animation-play-state: paused;
  }
}

/* ---------- 押した時：1px沈む ---------- */
.lp-hotspot:active {
  transform: translateY(1px);
}

/* ---------- 4. フッター ---------- */

.lp-footer {
  max-width: var(--lp-max-width);
  margin-inline: auto;
  padding: 28px 16px 32px;
  background: var(--footer-bg);
  color: #cfe3f1;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

.lp-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
}

.lp-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.lp-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.lp-footer p { margin: 10px 0 0; }

/* ---------- 5. PC表示 ---------- */

@media (min-width: 681px) {
  .lp-stack { box-shadow: 0 0 40px rgba(20, 60, 90, .10); }
}

/* ---------- 6. 動きを抑える設定への配慮 ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .lp-fx::after { display: none; }
}