/* ==========================================================================
   Components — header / buttons / area band
   ========================================================================== */

/* --- LINE button (PC/Header, SP/Header, 追従) ---------------------------- */
.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 2px solid var(--secondary-100);
  border-radius: var(--radius-full);
  background: var(--grad-line);
  filter: drop-shadow(0 4px 0 #399060);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  transition: filter 0.2s, translate 0.2s;
}

.btn-line:hover {
  translate: 0 2px;
  filter: drop-shadow(0 2px 0 #399060);
}

.btn-line__free {
  position: absolute;
  top: 50%;
  left: 3px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  translate: 0 -50%;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--secondary-500);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.btn-line__small {
  font-size: 14px;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 0 12px 0 8px;
  background: var(--white);
  box-shadow: var(--shadow-400);
}

.site-header__logo {
  display: block;
  width: 217px;
  margin-top: 3px;
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-600);
}

.site-header__tel {
  display: none;
}

.site-header .btn-line {
  width: 125px;
  margin-top: -2px;
  padding-left: 32px;
  padding-right: 8px;
}

@media (min-width: 768px) {
  .site-header {
    height: 72px;
    padding: var(--space-400) var(--space-600);
  }

  .site-header__logo {
    width: auto;
    height: 40px;
    margin-top: 0;
  }

  .site-header__logo img {
    width: auto;
    height: 100%;
  }

  .site-header__tel {
    display: flex;
    align-items: flex-end;
    gap: var(--space-200);
  }

  .site-header .btn-line {
    width: 200px;
    height: 40px;
    margin-top: 0;
    padding-left: 34px;
  }
}

/* 狭いPC幅では営業時間を隠して電話番号を優先 */
@media (min-width: 768px) and (max-width: 959px) {
  .tel-block__hours { display: none; }
}

/* --- Tel block (header / CV) --------------------------------------------- */
.tel-block__num {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-100);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.tel-block__num img {
  width: 28px;
  height: 28px;
  flex: none;
}

.tel-block__hours {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* --- Area band (愛知県全域の家具/家電を出張査定) ------------------------ */
/* Figma: 帯はヘッダーの影より手前 */
.area-band {
  position: relative;
  z-index: 51;
  display: grid;
  place-items: center;
  height: 34px;
  background: var(--highlight);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.area-band em {
  font-style: normal;
  font-size: 20px;
  color: var(--primary-500);
}

.area-band strong {
  font-size: 20px;
  font-weight: inherit;
}

@media (min-width: 768px) {
  .area-band {
    height: 50px;
    font-size: 24px;
  }

  .area-band em,
  .area-band strong {
    font-size: 30px;
  }
}

/* --- Footer (Figma: PC/Footer / SP/Footer) ------------------------------- */
.site-footer {
  display: grid;
  gap: var(--space-600);
  justify-items: center;
  padding: var(--space-600) var(--space-600) var(--space-400);
  border-top: 1px solid var(--grey-1);
  background: var(--white);
}

.site-footer__main {
  display: grid;
  justify-items: center;
  gap: var(--space-200);
}

.site-footer__logo {
  position: relative;
  display: block;
  width: 100px;
  height: 80px;
  overflow: hidden;
}

.site-footer__logo img {
  position: absolute;
  left: -7%;
  top: 1.89%;
  width: 114%;
  max-width: none;
  height: 95%;
}

.site-footer__tel {
  display: grid;
  justify-items: center;
  gap: var(--space-200);
}

.site-footer__tel .tel-block__num {
  gap: var(--space-200);
}

.site-footer__copy {
  font-family: "Zen Kaku Gothic New", var(--font-jp);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
}

.site-footer__copy small { font-size: inherit; }

@media (min-width: 768px) {
  .site-footer {
    gap: var(--space-400);
    padding: var(--space-800) var(--space-1600);
  }

  .site-footer__main {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .site-footer__tel {
    justify-items: end;
  }
}

/* --- Sticky CTA (Figma: PC/追従 1440x150 / SP/追従 390x110) --------------
   注記「最初のCVエリアを過ぎた直後に出現 / 下部に固定表示」
   ------------------------------------------------------------------------ */
.sticky-cta {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  translate: 0 110%;
  transition: translate 0.4s ease;
  pointer-events: none;
}

.sticky-cta.is-visible {
  translate: none;
  pointer-events: auto;
}

/* 帯（白 + 水色）は画面幅いっぱいに敷く */
.sticky-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 22.73%, var(--white) 22.73%, var(--white) 45.45%, var(--primary-100) 45.45%);
}

.sticky-cta__inner {
  --u: calc(100cqw / 390);
  max-width: 480px;
  margin-inline: auto;
  aspect-ratio: 390 / 110;
  overflow: hidden;
}

.sticky-cta__inner .ab__canvas {
  --u: calc(100cqw / 390);
}

.sticky-cta__badge {
  left: calc(-10 * var(--u));
  top: 0;
  width: calc(135 * var(--u));
  height: calc(97 * var(--u));
  max-width: none;
}

@media (max-width: 767px) {
  /* Figma: the blue lower band covers the bottom of the yellow badge. */
  .sticky-cta__badge.u-sp {
    clip-path: inset(0 0 calc(47 * var(--u)) 0);
  }
}

.sticky-cta__free {
  left: calc(62.5 * var(--u));
  top: calc(31 * var(--u));
  translate: -50% -50%;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sticky-cta__free > span {
  position: relative;
  display: block;
  grid-area: 1 / 1;
}

.sticky-cta__free {
  display: grid;
}

.sticky-cta__free .back {
  translate: calc(2 * var(--u)) calc(3 * var(--u));
  color: var(--white);
}

.sticky-cta__free .a { font-size: calc(22 * var(--u)); }
.sticky-cta__free .b { font-size: calc(26 * var(--u)); }
.sticky-cta__free .front .a { color: var(--black); }
.sticky-cta__free .front .b { color: var(--primary-700); }

.sticky-cta__lead {
  left: calc(232.5 * var(--u));
  top: calc(36.5 * var(--u));
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sticky-cta__lead small { font-size: 0.875em; }

.sticky-cta__lead::before,
.sticky-cta__lead::after {
  content: "";
  width: calc(14 * var(--u));
  height: calc(12 * var(--u));
  background: var(--primary-700);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sticky-cta__staff {
  right: calc(-41 * var(--u));
  bottom: calc(-51 * var(--u));
  width: calc(252 * var(--u));
  height: calc(168 * var(--u));
  max-width: none;
  object-fit: cover;
}

.sticky-cta__btns {
  left: calc(12 * var(--u));
  top: calc(57 * var(--u));
  display: flex;
  gap: calc(6 * var(--u));
  width: calc(300 * var(--u));
}

.sticky-cta__btn {
  --btn-shadow: #399060;
  --btn-border: var(--secondary-100);
  --btn-grad: linear-gradient(98.24deg, #24d0b9 0%, #10b75c 100.37%);
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  height: calc(40 * var(--u));
  padding-bottom: calc(2 * var(--u));
  border: calc(2 * var(--u)) solid var(--btn-border);
  border-radius: var(--radius-full);
  background: var(--btn-grad);
  box-shadow: 0 calc(4 * var(--u)) 0 var(--btn-shadow);
  color: var(--white);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: translate 0.2s, box-shadow 0.2s;
}

.sticky-cta__btn:hover {
  translate: 0 calc(2 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) 0 var(--btn-shadow);
}

.sticky-cta__btn img {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.sticky-cta__btn .en {
  font-size: 1.1em;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.sticky-cta__btn--tel {
  --btn-shadow: #cd5900;
  --btn-border: #ffd08a;
  --btn-grad: linear-gradient(101.11deg, #f19100 0%, #ea6500 100.86%);
}

.sticky-cta__btn--web {
  --btn-shadow: var(--primary-700);
  --btn-border: var(--primary-100);
  --btn-grad: linear-gradient(111deg, #0062ed 0%, #064c97 100%);
}

@media (min-width: 768px) {
  .sticky-cta::before {
    background: linear-gradient(transparent 14%, var(--white) 14%, var(--white) 42%, var(--primary-100) 42%);
  }

  .sticky-cta__inner {
    --u: calc(100cqw / 1440);
    max-width: 1440px;
    aspect-ratio: 1440 / 150;
  }

  .sticky-cta__inner .ab__canvas {
    --u: calc(100cqw / 1440);
  }

  .sticky-cta__badge { left: calc(330 * var(--u)); width: calc(142 * var(--u)); height: calc(142 * var(--u)); }
  .sticky-cta__free { left: calc(401 * var(--u)); top: calc(69.5 * var(--u)); line-height: 1.1; text-align: center; }
  .sticky-cta__free > span > span { display: block; }
  .sticky-cta__free .back { translate: calc(1.34 * var(--u)) calc(3.61 * var(--u)); }
  .sticky-cta__free .a { font-size: calc(27.57 * var(--u)); }
  .sticky-cta__free .b { font-size: calc(43.4 * var(--u)); }

  .sticky-cta__lead { left: calc(720.5 * var(--u)); top: calc(41.75 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(24 * var(--u)); }
  .sticky-cta__lead::before,
  .sticky-cta__lead::after { width: calc(21 * var(--u)); height: calc(18 * var(--u)); }

  .sticky-cta__staff { right: calc(282 * var(--u)); bottom: calc(-51 * var(--u)); width: calc(317 * var(--u)); height: calc(211 * var(--u)); }

  .sticky-cta__btns { left: calc(495 * var(--u)); top: calc(71 * var(--u)); gap: calc(12 * var(--u)); width: calc(456 * var(--u)); }
  .sticky-cta__btn { height: calc(55 * var(--u)); border-width: calc(3 * var(--u)); box-shadow: 0 calc(6 * var(--u)) 0 var(--btn-shadow); font-size: calc(30 * var(--u)); gap: calc(6 * var(--u)); }
  .sticky-cta__btn img { width: calc(29 * var(--u)); height: calc(29 * var(--u)); }
}

/* PC幅が狭いときは縮小しすぎないよう最小サイズを確保 */
@media (min-width: 768px) and (max-width: 1199px) {
  .sticky-cta__inner {
    width: 1200px;
    max-width: none;
    margin-left: 50%;
    translate: -50% 0;
  }
}