@charset "UTF-8";
/*
 * LP改良の追加分（2026-08-17・lowgear）
 * application.css は生成物なので触らず、追加分だけをこのファイルに置く。
 * 戻すときはこのファイルの読み込みを外せば元の見た目に戻る。
 *
 * サイズはページ既存の流体式に合わせる:
 *   P px → max(min(P/750*100 vw, P px), P/1440*100 vw)
 */

:root {
  --lpa-8: max(min(1.0666666667vw, 8px), 0.5555555556vw);
  --lpa-12: max(min(1.6vw, 12px), 0.8333333333vw);
  --lpa-16: max(min(2.1333333333vw, 16px), 1.1111111111vw);
  --lpa-20: max(min(2.6666666667vw, 20px), 1.3888888889vw);
  --lpa-24: max(min(3.2vw, 24px), 1.6666666667vw);
  --lpa-28: max(min(3.7333333333vw, 28px), 1.9444444444vw);
  --lpa-30: max(min(4vw, 30px), 2.0833333333vw);
  /* 小さめの文字はここまで。これ未満にすると390px幅で13px を切る
     （このLPの寸法は750px設計。24px指定はスマホ実寸で12.5px になる） */
  --lpa-26: max(min(3.4666666667vw, 26px), 1.8055555556vw);
  --lpa-32: max(min(4.2666666667vw, 32px), 2.2222222222vw);
  --lpa-38: max(min(5.0666666667vw, 38px), 2.6388888889vw);
  --lpa-40: max(min(5.3333333333vw, 40px), 2.7777777778vw);
  --lpa-48: max(min(6.4vw, 48px), 3.3333333333vw);
  --lpa-60: max(min(8vw, 60px), 4.1666666667vw);
  --lpa-75: max(min(10vw, 75px), 5.2083333333vw);
  --lpa-56: max(min(7.4666666667vw, 56px), 3.8888888889vw);
  --lpa-inner: max(min(100vw, 750px), 52.0833333333vw);
  --lpa-orange: #f26510;
  --lpa-blue: #0052cc;
  --lpa-lightblue: #d8eef7;
  --lpa-cream: #fff3d7;
  --lpa-line: #8dbacc;
  --lpa-navy: #14315c;
  --lpa-navy-dark: #0f2545;
  /* スマホの追従バーの高さ。ここを直せばバーの高さと、footer の下余白が一緒に変わる */
  --lpa-fixedbar-h: max(min(13.8666666667vw, 104px), 7.2222222222vw);
}

/* ============================================================
   お客様の声
   ============================================================ */

.voices {
  position: relative;
  padding: var(--lpa-75) 0 var(--lpa-60);
  background-color: var(--lpa-cream);
  overflow: hidden;
}

.voices__inner {
  width: var(--lpa-inner);
  margin: 0 auto;
  padding: 0 var(--lpa-40);
}

.voices__head {
  text-align: center;
  margin-bottom: var(--lpa-48);
}

.voices__title {
  font-size: var(--lpa-38);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.voices__title .voices__title-accent {
  color: var(--lpa-orange);
}

.voices__title-sub {
  display: block;
  font-size: var(--lpa-28);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #666666;
  margin-top: var(--lpa-8);
}

.voices__face {
  display: block;
  width: max(min(14.6666666667vw, 110px), 7.6388888889vw);
  height: auto;
  margin: 0 auto var(--lpa-12);
}

.voices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lpa-32);
}

.voices__item {
  background-color: #ffffff;
  border: max(min(0.4vw, 3px), 0.2083333333vw) solid var(--lpa-line);
  border-radius: var(--lpa-24);
  padding: var(--lpa-32) var(--lpa-30) var(--lpa-30);
  text-align: left;
}

/* 業種と地域を1行目、会社名を2行目に固定する。
   1行に流すと、社名の長さで折り返し位置が変わり、カードごとに揃わなくなる */
.voices__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--lpa-12);
  row-gap: var(--lpa-8);
  margin-bottom: var(--lpa-20);
}

.voices__industry {
  display: inline-block;
  background-color: var(--lpa-orange);
  color: #ffffff;
  font-size: var(--lpa-28);
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
  padding: var(--lpa-8) var(--lpa-20);
  white-space: nowrap;
}

.voices__area {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--lpa-28);
  color: #666666;
  line-height: 1.4;
}

.voices__company {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--lpa-30);
  font-weight: 700;
  line-height: 1.4;
}

.voices__before {
  background-color: #f5f5f5;
  border-radius: var(--lpa-16);
  padding: var(--lpa-20) var(--lpa-24);
  margin-bottom: var(--lpa-24);
}

.voices__label {
  font-size: var(--lpa-28);
  font-weight: 700;
  color: #666666;
  margin: 0 0 var(--lpa-12);
}

.voices__before-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.voices__before-item {
  position: relative;
  padding-left: var(--lpa-32);
  font-size: var(--lpa-28);
  line-height: 1.6;
}

.voices__before-item + .voices__before-item {
  margin-top: var(--lpa-8);
}

.voices__before-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: max(min(1.6vw, 12px), 0.8333333333vw);
  width: var(--lpa-20);
  height: var(--lpa-20);
  background-image: url("../img/icon-checked.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.voices__after {
  position: relative;
  background-color: var(--lpa-lightblue);
  border-radius: var(--lpa-16);
  padding: var(--lpa-24) var(--lpa-24) var(--lpa-20);
}

.voices__after .voices__label {
  color: var(--lpa-blue);
}

.voices__quotes {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2026-08-17 追記: 導入後の変化を2点だけ大きく出し、その下に実際のコメントを短く置く。
   スマホで流し見しても Before→After が一瞬で分かるようにするため（先方ご要望） */
.voices__gains {
  list-style: none;
  margin: 0 0 var(--lpa-20);
  padding: 0;
}

.voices__gain {
  position: relative;
  padding-left: var(--lpa-40);
  font-size: var(--lpa-32);
  font-weight: 700;
  line-height: 1.5;
  color: #0a2a4a;
}

.voices__gain + .voices__gain {
  margin-top: var(--lpa-8);
}

.voices__gain::before {
  content: "";
  position: absolute;
  left: 0;
  top: max(min(1.7333333333vw, 13px), 0.9027777778vw);
  width: var(--lpa-28);
  height: var(--lpa-28);
  background-image: url("../img/icon-checked.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* コメントは変化の根拠として下に添える。主役は上の2点なので一段落ち着かせる */
.voices__quote {
  font-size: var(--lpa-26);
  line-height: 1.7;
  font-weight: 500;
  color: #33475b;
}

.voices__quote + .voices__quote {
  margin-top: var(--lpa-8);
}

/* 2026-08-18 追記: 実際に更新しているブログへの導線（先方ご要望・掲載3社のリンク許可済）。
   「更新代行を頼むと、こうなる」を実物で見てもらうための出口。
   主役はあくまで導入後の変化なので、控えめな文字リンクにして、
   別のサイトへ移ることが分かるよう矢印を添える */
.voices__link {
  display: inline-block;
  margin-top: var(--lpa-16);
  font-size: var(--lpa-26);
  font-weight: 700;
  line-height: 1.6;
  color: var(--lpa-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.voices__link::after {
  content: "↗";
  margin-left: 0.35em;
  font-weight: 400;
  text-decoration: none;
}

.voices__link:hover {
  opacity: 0.8;
}

.voices__note {
  font-size: var(--lpa-26);
  color: #666666;
  line-height: 1.6;
  text-align: center;
  margin: var(--lpa-32) 0 0;
}

/* ============================================================
   無料相談（予約）への導線
   ============================================================ */

.booking {
  width: var(--lpa-inner);
  margin: 0 auto var(--lpa-48);
  padding: 0 var(--lpa-40);
}

.booking__box {
  background-color: var(--lpa-lightblue);
  border-radius: var(--lpa-24);
  padding: var(--lpa-40) var(--lpa-30) var(--lpa-32);
  text-align: center;
}

.booking__title {
  font-size: var(--lpa-32);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 var(--lpa-16);
}

.booking__text {
  font-size: max(min(3.4666666667vw, 26px), 1.8055555556vw);
  line-height: 1.8;
  margin: 0 0 var(--lpa-32);
}

.booking__button {
  display: inline-block;
  background-color: var(--lpa-orange);
  color: #ffffff;
  font-size: var(--lpa-32);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 999px;
  padding: var(--lpa-24) var(--lpa-60);
  box-shadow: 0 max(min(0.5333333333vw, 4px), 0.2777777778vw) 0 #c14f0a;
  transition: all 0.15s ease;
}

.booking__button:hover {
  opacity: 0.9;
}

.booking__note {
  font-size: var(--lpa-26);
  color: #666666;
  line-height: 1.6;
  margin: var(--lpa-20) 0 0;
}

/* ============================================================
   追従CTA
   ・SPの左7.5pxはみ出しを直す
   　（100vw はスクロールバーを含むため、position:fixed の % に替える）
   ・3つ目を「無料相談を予約」に差し替え（背景は既存の青を流用）
   ============================================================ */

@media (max-width: 1199px) {
  .fixed-cta {
    width: max(min(100%, 750px), 52.0833333333vw);
  }
  /* 3つを同じ幅にする。元は flex:none で文字数ぶんの幅になっていたため、
     文字数の少ないボタンだけ細くなり、丸い背景が途中で切れていた */
  .fixed-cta .fixed-cta__apply,
  .fixed-cta .fixed-cta__booking,
  .fixed-cta .fixed-cta__line {
    flex: 1 1 0;
    min-width: 0;
    width: max(min(33.3333333333vw, 250px), 17.3611111111vw);
  }
  /* 文字サイズは既存のまま（30px指定＝390px幅で15.6px）。
     小さくする必要はなかった。上の小見出しだけ既存の applyIntro と同じ扱いにする */
  .fixed-cta .fixed-cta__bookingIntro,
  .fixed-cta .fixed-cta__lineIntro {
    display: block;
    font-size: max(min(2.9333333333vw, 22px), 1.5277777778vw);
    margin-bottom: max(min(0.8vw, 6px), 0.4166666667vw);
  }

  /* ------------------------------------------------------------
     2026-08-17 追記: バーを低くする（本文が隠れるとのご指摘）
     ・ラベルを2行に収めたぶん、箱の高さを 126 → 104（設計px）へ。
       390px幅で 65.5px → 54.1px（17%低い）
     ・背景は「幅100%・高さは自動・上寄せ」にして、余る下側を切る。
       高さを縮めて描くと雲形の波が潰れるが、下端は単色なので切る側は見えない
     ・行数が減ったので、上詰めではなく上下中央に置き直す
     ------------------------------------------------------------ */
  .fixed-cta .fixed-cta__apply,
  .fixed-cta .fixed-cta__booking,
  .fixed-cta .fixed-cta__line {
    height: var(--lpa-fixedbar-h);
    background-size: 100% auto;
    background-position: top center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* パソコン用の長い文言はスマホでは出さない */
  .fixed-cta .fixed-cta__labelPc {
    display: none;
  }

  /* バーの下に隠れる部分が残らないように、フッターに下余白を足す。
     追従バーはスクロール中だけ出てくるので、常時ぶんの余白はここだけで足りる */
  .footer {
    padding-bottom: calc(var(--lpa-fixedbar-h) + var(--lpa-20));
  }
}

@media (min-width: 1200px) {
  /* パソコンは従来どおりの文言。スマホ用の短いラベルと小見出しは出さない */
  .fixed-cta .fixed-cta__labelSp,
  .fixed-cta .fixed-cta__lineIntro {
    display: none;
  }
}

.fixed-cta .fixed-cta__booking {
  background-image: url("../img/bg-btn-fixed-to-form-sp.png");
  background-size: max(min(33.3333333333vw, 250px), 17.3611111111vw) max(min(16.8vw, 126px), 8.75vw);
  background-repeat: no-repeat;
  flex: none;
}

@media (min-width: 1200px) {
  .fixed-cta .fixed-cta__booking {
    background-image: url("../img/bg-btn-fixed-to-form.png");
    background-size: max(min(29.6vw, 222px), 15.4166666667vw) max(min(28.8vw, 216px), 15vw);
    width: max(min(29.6vw, 222px), 15.4166666667vw);
    height: max(min(28.8vw, 216px), 15vw);
  }
  .fixed-cta .fixed-cta__bookingIntro {
    font-size: max(min(3.2vw, 24px), 1.6666666667vw);
    display: block;
    margin-bottom: max(min(0.5333333333vw, 4px), 0.2777777778vw);
  }
}

/* ============================================================
   お問い合わせフォームの「任意」ラベル
   ご住所を必須から任意にしたことに合わせて追加。
   形は既存の .contact .required と揃え、色だけ落ち着かせる
   ============================================================ */

.contact .optional {
  margin-left: max(min(1.6vw, 12px), 0.8333333333vw);
  padding: max(min(0.6666666667vw, 5px), 0.3472222222vw) max(min(1.6vw, 12px), 0.8333333333vw)
    max(min(0.8vw, 6px), 0.4166666667vw);
  border-radius: 4px;
  background-color: #8a8a8a;
  font-size: max(min(2.4vw, 18px), 1.25vw);
  color: #fff;
}

/* ============================================================
   フッターの運営会社表記（2026-08-17 追加）
   広告や紹介で初めて来た方に、運営元がすぐ分かるようにする
   ============================================================ */

.footer__company {
  font-size: max(min(3.4666666667vw, 26px), 1.8055555556vw);
  line-height: 1.6;
  margin: 0 0 var(--lpa-20);
  text-align: center;
}

.footer__company a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 0.2em;
}

/* ============================================================
   相談ボタンの動き（2026-08-17 追加）
   「目が滑る」とのご指摘への対応。ゆっくり脈打たせて視線を止める。
   ・当初は無料相談とLINEの2つだけにしていた（常時見えているものを動かすと落ち着かないため）。
   　2026-08-18 先方ご要望により、お申し込みボタン2箇所にも付けた。追従CTAは対象外のまま
   ・動きを減らす設定にしている方には動かさない

   2026-08-17 追記（2点）
   ・「もう少し目立つように」とのご要望を受け、1回の脈動から心拍のような二連打へ。
     大きさは1.05倍まで。これ以上にすると、LINEボタンが親（overflow:hidden）から
     はみ出して端が切れる（390px幅で左右の余白が12.5pxしかない）
   ・🔴 中央寄せに transform を使っている要素は、scale だけの keyframes を当てると
     translateX(-50%) が打ち消され、要素が幅の半分ぶん右へずれる。
     実際に8/17午前の版でLINEボタンが右へ336px ずれ、親の overflow:hidden で
     文字が切れていた（先方 IMG_5196）。中央寄せ用の keyframes を別に用意する
   ============================================================ */

@keyframes lpaPulse {
  0%, 34%, 100% { transform: translateY(0) scale(1); }
  41% { transform: translateY(-3px) scale(1.05); }
  48% { transform: translateY(0) scale(.995); }
  55% { transform: translateY(-3px) scale(1.05); }
  62% { transform: translateY(0) scale(.995); }
  69% { transform: translateY(-2px) scale(1.035); }
  76% { transform: translateY(0) scale(1); }
}

/* 中央寄せぶんを含めた版。translateX(-50%) を必ず書き足す */
@keyframes lpaPulseCentered {
  0%, 34%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  41% { transform: translateX(-50%) translateY(-3px) scale(1.05); }
  48% { transform: translateX(-50%) translateY(0) scale(.995); }
  55% { transform: translateX(-50%) translateY(-3px) scale(1.05); }
  62% { transform: translateX(-50%) translateY(0) scale(.995); }
  69% { transform: translateX(-50%) translateY(-2px) scale(1.035); }
  76% { transform: translateX(-50%) translateY(0) scale(1); }
}

.booking__button,
.ctaLineAnchor {
  animation: lpaPulse 1.6s ease-in-out infinite;
  will-change: transform;
}

/* .ctaWrapper の中のLINEボタンだけは left:50% + translateX(-50%) で中央に置かれている。
   セレクタが1段深いので、上の指定より優先される */
.ctaWrapper .ctaLineAnchor {
  animation: lpaPulseCentered 1.6s ease-in-out infinite;
}

/* 押している間は動きを止める。指を置いたまま動くと押しにくい */
.booking__button:active,
.ctaLineAnchor:active,
.booking__button:hover,
.ctaLineAnchor:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .booking__button,
  .ctaLineAnchor,
  .ctaWrapper .ctaLineAnchor {
    animation: none;
  }
}

/* ============================================================
   無料AIホームページ診断への導線（2026-08-17 追加）
   「一瞬で解決します」の直後、特徴セクションの前に置く。
   まだ申し込むほどではない方に、まず一度接点を持っていただくための入口。
   色は診断ツールの結果画面と同じ濃紺で、続きの画面とつながって見えるようにした
   ============================================================ */

.shindan {
  width: var(--lpa-inner);
  margin: 0 auto var(--lpa-60);
  padding: 0 var(--lpa-40);
}

.shindan__box {
  position: relative;
  background: linear-gradient(160deg, var(--lpa-navy) 0%, var(--lpa-navy-dark) 100%);
  border-radius: var(--lpa-24);
  padding: var(--lpa-48) var(--lpa-30) var(--lpa-40);
  text-align: center;
  color: #ffffff;
  box-shadow: 0 var(--lpa-8) 0 rgba(10, 22, 40, 0.35);
}

/* ヤットク太郎（眼鏡と指し棒）。診断ツールでも同じ絵柄を使っている */
.shindan__taro {
  display: block;
  width: max(min(20vw, 150px), 10.4166666667vw);
  height: auto;
  margin: 0 auto var(--lpa-12);
}

.shindan__badge {
  display: inline-block;
  background-color: var(--lpa-orange);
  color: #ffffff;
  font-size: var(--lpa-26);
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
  padding: var(--lpa-8) var(--lpa-24);
  margin: 0 0 var(--lpa-20);
}

.shindan__title {
  font-size: var(--lpa-40);
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 var(--lpa-20);
}

.shindan__title-accent {
  color: #ffd24a;
}

.shindan__text {
  font-size: var(--lpa-26);
  line-height: 1.8;
  margin: 0 0 var(--lpa-24);
  color: #dce6f2;
}

.shindan__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lpa-12);
  margin: 0 0 var(--lpa-28);
  padding: 0;
}

.shindan__chip {
  font-size: var(--lpa-26);
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  border: max(min(0.2666666667vw, 2px), 0.1388888889vw) solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: var(--lpa-8) var(--lpa-20);
}

.shindan__button {
  display: inline-block;
  background-color: var(--lpa-orange);
  color: #ffffff;
  font-size: var(--lpa-32);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 999px;
  padding: var(--lpa-24) var(--lpa-60);
  box-shadow: 0 max(min(0.5333333333vw, 4px), 0.2777777778vw) 0 #c14f0a;
  transition: opacity 0.15s ease;
  animation: lpaPulse 1.6s ease-in-out infinite;
  will-change: transform;
}

.shindan__button:hover,
.shindan__button:active {
  opacity: 0.9;
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .shindan__button {
    animation: none;
  }
}

.shindan__note {
  font-size: max(min(3.2vw, 24px), 1.6666666667vw);
  line-height: 1.7;
  color: #b6c6d8;
  margin: var(--lpa-20) 0 0;
}

/* ============================================================
   フッターリンクのタップ領域（SPで20px前後しかなかった）
   ============================================================ */

@media (max-width: 1199px) {
  .footer__link a {
    display: inline-block;
    padding: max(min(1.0666666667vw, 8px), 0.5555555556vw) 0;
  }
}

/* ============================================================
   お申し込みボタンの動き（2026-08-18 追加）
   先方より「この辺のボタンも動きを」とのご要望（IMG_8690 / IMG_8691）。
   対象はオレンジの「お申し込みはこちら」2箇所。
   ・ファーストビュー（.cta__anchor）
   ・料金セクション（.ctaAnchor）
   追従CTAは対象外のまま。常に画面にあるものが動き続けると落ち着かない。

   🔴 transform ではなく translate / scale の個別プロパティで書いている理由
   　 出現アニメの [data-scroll-animation].is-animated が
   　 transform: translate(0,0) scale(1) rotate(0deg) !important; を当てている。
   　 !important はキーフレームより強いので、transform の keyframes を書いても
   　 出現後は打ち消されて一切動かない（.cta__anchor は data-scroll-animation を
   　 自分自身に持っているため直撃する）。
   　 translate / scale は transform とは別プロパティなので、!important の影響を受けず
   　 合成される。動きは lpaPulse と同じ（1.6秒・3連打・最大1.05倍・上下3px）。
   ============================================================ */

@keyframes lpaPulseIndep {
  0%, 34%, 100% { translate: 0 0; scale: 1; }
  41% { translate: 0 -3px; scale: 1.05; }
  48% { translate: 0 0; scale: .995; }
  55% { translate: 0 -3px; scale: 1.05; }
  62% { translate: 0 0; scale: .995; }
  69% { translate: 0 -2px; scale: 1.035; }
  76% { translate: 0 0; scale: 1; }
}

.cta__anchor,
.ctaAnchor {
  animation: lpaPulseIndep 1.6s ease-in-out infinite;
  will-change: translate, scale;
}

/* 押している間は止める。指を置いたまま動くと押しにくい */
.cta__anchor:hover,
.cta__anchor:active,
.ctaAnchor:hover,
.ctaAnchor:active {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .cta__anchor,
  .ctaAnchor {
    animation: none;
  }
}