@charset "UTF-8";
/* ==========================================================
   base.css
   リセット / 共通（本文・幅・見出し・ボタン）
   数値・配色は参考LP（らくらくAD）に準拠
     本文幅 1280px（左右24px）/ 見出し32px / 本文16px / CTA 480×100
   ========================================================== */

*, ::before, ::after { box-sizing: border-box; }
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  scroll-behavior: smooth;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #333;
  font-weight: 400;
  letter-spacing: 0.08rem;
  line-height: 1.5;
}
body {
  font-size: 16px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* かなの余白を詰めて（palt）締める */
  font-feature-settings: "palt";
}
main { display: block; }
h1, h2, h3, h4, h5, p, dl, dt, dd { margin: 0; padding: 0; }
ul, ol, li { list-style: none; margin: 0; padding-left: 0; }
img { display: block; height: auto; max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; background-color: transparent; }
b, strong { font-weight: bolder; }
/* フォーム部品も本文と同じ書体にする（行間・字間はブラウザ標準のまま） */
input, textarea, button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: #333;
  font-family: inherit;
  margin: 0;
}
button, select { text-transform: none; }
input:focus, textarea:focus, button:focus { outline: none; }
textarea {
  border-radius: 0;
  overflow: auto;
  resize: vertical;
}
label { cursor: pointer; display: flex; }
@media (max-width: 767px) {
  label { display: block; }
}
input[type="checkbox"], input[type="radio"] { display: none; }

/* ---------- 表示切り替え ---------- */
.is-pc { display: block; }
.is-sp, .is-phone { display: none; }
br.is-pc { display: inline; }
@media (max-width: 767px) {
  .is-pc, br.is-pc { display: none !important; }
  .is-sp, .is-phone { display: block; }
  br.is-sp { display: inline; }
}

/* ---------- 幅（参考LPと同じ 1280px） ---------- */
.inner {
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 24px;
  position: relative;
  width: 100%;
}
@media (max-width: 767px) {
  .inner { padding: 0 10px; }
}

/* ---------- セクション・見出し ---------- */
.section { padding: 80px 0; }
@media (max-width: 767px) {
  .section { padding: 40px 0; }
}
.section_head2 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 767px) {
  .section_head2 { font-size: 20px; }
}
.color-green { color: #2ecc71; }

/* ---------- ボタン ---------- */
/* CTAの配色。<html class="cta-green"> にすると明るい緑に切り替わる */
:root {
  --cta-light: #ffb347;   /* グラデーション上 */
  --cta-main: #ff7a00;    /* グラデーション下 */
  --cta-border: #ffc98a;  /* 縁取り */
  --cta-drop: #c45500;    /* 下の立体影 */
  --cta-glow: 255, 122, 0; /* 光の輪（RGB） */
  --cta-drop-size: 8px;
}
.cta-green {
  --cta-light: #6ee79a;
  --cta-main: #1fbf5f;
  --cta-border: #a8f0c2;
  --cta-drop: #12863f;
  --cta-glow: 31, 191, 95;
}
@media (max-width: 767px) {
  :root { --cta-drop-size: 5px; }
}

.btnShadow {
  border-radius: 50px;
  color: #fff;
  display: grid;
  font-size: 36px;
  font-weight: 700;
  height: 100px;
  margin: 40px auto 0;
  max-width: 480px;
  place-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
@media (max-width: 767px) {
  .btnShadow {
    font-size: 20px;
    height: 50px;
    margin-top: 20px;
    max-width: 240px;
  }
}

/* メインCTA：グラデーション＋光が走る＋数秒おきに弾む＋光の輪 */
.btnShadow.is-cta {
  animation: cta-bounce 3.2s ease-in-out infinite, cta-glow 2.4s ease-out infinite;
  background: linear-gradient(180deg, var(--cta-light) 0%, var(--cta-main) 100%);
  border: 4px solid var(--cta-border);
  box-shadow: 0 var(--cta-drop-size) 0 var(--cta-drop);
  overflow: hidden;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.btnShadow.is-cta::after {
  animation: cta-shine 3.2s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-160%) skewX(-20deg);
  width: 30%;
}
@media (max-width: 767px) {
  .btnShadow.is-cta { border-width: 2px; }
}
/* サブのボタン（電話）：白地にCTA色の縁取り。動きはつけない */
.btnShadow.is-cta.is-re {
  animation: none;
  background: #fff;
  color: #333;
  text-shadow: none;
}
.btnShadow.is-cta.is-re::after { content: none; }

/* マウスを乗せると押し込まれる */
.btnShadow.is-cta:hover,
.btnShadow.is-cta:focus-visible {
  animation: none;
  box-shadow: 0 calc(var(--cta-drop-size) / 2) 0 var(--cta-drop);
  transform: translateY(calc(var(--cta-drop-size) / 2));
}
.btnShadow.is-cta:focus-visible { outline: 3px solid var(--cta-drop); outline-offset: 4px; }

@keyframes cta-shine {
  0% { transform: translateX(-160%) skewX(-20deg); }
  55%, 100% { transform: translateX(420%) skewX(-20deg); }
}
@keyframes cta-bounce {
  0%, 76%, 100% { transform: translateY(0); }
  82% { transform: translateY(-6px); }
  88% { transform: translateY(0); }
  93% { transform: translateY(-3px); }
}
@keyframes cta-glow {
  0% { box-shadow: 0 var(--cta-drop-size) 0 var(--cta-drop), 0 0 0 0 rgba(var(--cta-glow), 0.55); }
  70%, 100% { box-shadow: 0 var(--cta-drop-size) 0 var(--cta-drop), 0 0 0 16px rgba(var(--cta-glow), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .btnShadow.is-cta,
  .btnShadow.is-cta::after { animation: none; }
}

/* ---------- 未確定情報（差し替え後にクラスを外す） ---------- */
.ph {
  background: #fff3b0;
  outline: 1px dashed #d4a300;
  outline-offset: 1px;
}