/* ===== 基本設定 ===== */
:root{
  --maxw: 430px; /* スマホ幅固定 */
  --cta: #1677ff;
  --text: #111;
  --muted: rgba(0,0,0,.6);
  --line: rgba(0,0,0,.08);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: var(--text);

  background-image: url("img/kv-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* 画像が暗い/うるさい時の保険 */
  background-color: #f6f7fb;
}


/* ===== LP全体 ===== */
.lp{
  max-width: var(--maxw);
  margin: 16px auto;

  background: rgba(255,255,255,.95);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  overflow: hidden; /* 角丸の外にはみ出さない */
}


/* ===== 画像セクション ===== */
.section img{
  display: block;
  width: 100%;
  height: auto;
}

/* ===== CTAブロック ===== */
.cta{
  text-align: center;
  padding: 18px 12px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta__lead{
  margin: 0 0 10px;
  font-weight: 700;
}

.cta__btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  background: var(--cta);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.cta__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ===== 下固定CTA（2ボタン） ===== */
.sticky{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: row;
  background-color: #fff;
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1000;
  transition: transform .25s ease, opacity .25s ease;
}

.sticky.is-hide{
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.sticky__btn{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  transition: opacity .15s ease;
}

.sticky__btn:active{
  opacity: .85;
}

.sticky__btn--tel{
  background-color: #1497b4;
}

.sticky__btn--line{
  background-color: #06c755;
}

.sticky__btn-icon{
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 1;
}

.sticky__btn-label{
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.image-block{
  position: relative;
}

.image-block img{
  display: block;
  width: 100%;
  height: auto;
}

.overlay-cta{
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  padding: 16px 14px 18px;
  text-align: center;


  /* 初期状態（アニメ用） */
  opacity: 0;
  transform: translate(-50%, 12px);
}

.overlay-cta__lead{
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
}

.overlay-cta__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}

.overlay-cta__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  width: 100%;

  background: #1677ff;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;

  box-shadow: 0 8px 22px rgba(22,119,255,.45);
}

.overlay-cta.is-show{
  opacity: 1;
  transform: translate(-50%, 0);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

#contact .overlay-cta{
  bottom: 4%;
}

/* ==========================
  フッター
========================== */

.site-footer {
  border-top: 1px solid #eee;
  padding: 16px;
  font-size: 12px;
  color: #666;
  background-color: #ffffff;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-footer__link {
  color: inherit;
  text-decoration: none;
}

.site-footer__link:hover {
  text-decoration: underline;
}

/* デフォルト非表示→SP表示 */
@media screen and (max-width: 430px){
  .sticky{
    display: flex;
  }
}


.reveal{
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-show{
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .9s ease,
    transform .9s ease;
}