@charset "UTF-8";

/* ============================================================
   footer パーシャル用スタイル
   common/partials/footer.html とセットで使う
   ※ このパーシャルを読み込むページで <link> してください
   ============================================================ */


:root {
  --text-primary: #1e1e1e;
  --text-secondary: #808080;
  --text-inverse: #ffffff;
  --text-accent: #961414;
  --border-primary: #dadada;
  --surface-primary: #f3f3f3;
  --surface-secondary: #ffffff;
  --surface-accent: #961414;
  --color-gray-200: #eaeaea;

  --font-sans: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Inter", sans-serif;

  --inner-max: 1500px;
  --inner-pad: 80px;
}

.inner {
  width: min(100% - (var(--inner-pad) * 2), var(--inner-max));
  margin-inline: auto;
}

/* 矢印アイコン (→) — フッターボタン用 */
.arrow {
  display: inline-block;
  width: 11px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M8.129 3.33866C7.29929 2.7332 6.26214 1.69528 5.55343 0.709249L6.81529 0C7.99072 1.52229 9.42857 3.33866 11 4.12504C9.42857 4.91134 7.99072 6.72771 6.81529 8.25L5.55343 7.54075C6.26214 6.55472 7.29929 5.5168 8.129 4.91134L0 4.91134L0 3.33866L8.129 3.33866Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M8.129 3.33866C7.29929 2.7332 6.26214 1.69528 5.55343 0.709249L6.81529 0C7.99072 1.52229 9.42857 3.33866 11 4.12504C9.42857 4.91134 7.99072 6.72771 6.81529 8.25L5.55343 7.54075C6.26214 6.55472 7.29929 5.5168 8.129 4.91134L0 4.91134L0 3.33866L8.129 3.33866Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  /* color: var(--text-primary); */
  flex: none;
}

/* ---- Footer ---- */
.footer {
  background: var(--surface-primary);
  padding-block: 48px 55px;
  font-family: var(--font-sans) !important;
  line-height: 1.7 !important;
}
.footer__inner { position: relative; }
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 96px;
  border-bottom: 1px solid var(--border-primary);
}
.footer__logo {
  width: 335px; /* Figma: 335x104 */
  height: auto;
  margin-top: 16px;
  display: block;
  max-width: 100%;
}
.footer dl {
  margin: 0;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer__actions { width: 310px; display: flex; flex-direction: column; gap: 16px; }
.footer__btn {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
}
.footer__btn-en {
  font-family: var(--font-en) !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
}
.footer__btn-ja {
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
.footer__btn--download { background: var(--surface-accent); color: var(--text-inverse)!important; }
.footer__btn--contact { background: var(--surface-secondary); color: var(--text-primary); }
.footer__btn--contact .footer__btn-en { color: var(--text-accent); }
.footer__btn-icon--download {
  width: 12px; height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15'%3E%3Cpath d='M6 0v10M2 6l4 4 4-4M0 14h12' fill='none' stroke='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15'%3E%3Cpath d='M6 0v10M2 6l4 4 4-4M0 14h12' fill='none' stroke='black'/%3E%3C/svg%3E") no-repeat center / contain;
}
.footer__bottom {
  display: flex;
  gap: 64px;
  padding-top: 56px;
  position: relative;
}
.footer__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
.footer__row { display: flex; gap: 16px; }
.footer__row dt {
  width: 78px;
  flex: none;
  color: var(--text-secondary);
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.footer__row dd {
  color: var(--text-primary);
  line-height: 1.7 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.footer__copy {
  position: absolute;
  right: 0; bottom: 0;
  font-family: var(--font-en) !important;
  font-weight: 500 !important;
  font-size: 0.625rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary);
}

/* ---- Floating CTA ---- */
.side-cta {
  position: fixed;
  right: 10px;
  top: auto;
  bottom: 16px;
  z-index: 40;
  width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: none;
}
.side-cta.is-animated {
  transition: opacity .4s ease, transform .4s ease;
}
.side-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.side-cta.is-dismissed { display: none; }
.side-cta__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--surface-accent);
  color: var(--text-inverse);
  transition: opacity .2s;
}
.side-cta__link:hover { opacity: .9; }
.side-cta__arrow {
  flex: none;
  width: 8px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10'%3E%3Cpath d='M4.46486 7.39C5.01527 6.63572 5.95884 5.69286 6.85523 5.04857L7.5 6.19571C6.1161 7.26429 4.46486 8.57143 3.74997 10C3.03514 8.57143 1.3839 7.26429 0 6.19571L0.644771 5.04857C1.54116 5.69286 2.48473 6.63572 3.03514 7.39L3.03514 0L4.46486 0L4.46486 7.39Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10'%3E%3Cpath d='M4.46486 7.39C5.01527 6.63572 5.95884 5.69286 6.85523 5.04857L7.5 6.19571C6.1161 7.26429 4.46486 8.57143 3.74997 10C3.03514 8.57143 1.3839 7.26429 0 6.19571L0.644771 5.04857C1.54116 5.69286 2.48473 6.63572 3.03514 7.39L3.03514 0L4.46486 0L4.46486 7.39Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.side-cta__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.7 !important;
  font-family: var(--font-sans) !important;
}
.side-cta__ja {
  font-family: var(--font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
.side-cta__en {
  font-family: var(--font-en) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
}
.side-cta__close {
  position: absolute;
  top: -11px;
  right: -8px;
  width: 22px;
  height: 22px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  flex: none;
  border-radius: 50%;
  background: var(--color-gray-200);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.side-cta__close::before,
.side-cta__close::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.5px;
  background: var(--text-primary);
}
.side-cta__close::before { transform: rotate(45deg); }
.side-cta__close::after { transform: rotate(-45deg); }

/* ---------- SP (max-width: 1023px) ---------- */
@media (max-width: 1023px) {
  :root { --inner-pad: 24px; }

  .inner { width: 100%; padding-inline: var(--inner-pad); }

  /* フローティングCTA（SP）:*/
  .side-cta {
    right: 6px;
    top: auto;
    bottom: 6px;
    width: 192px;
  }
  .side-cta__link { gap: 10px; padding: 10px 12px 10px 13px; }
  .side-cta__arrow { width: 6px; height: 8px; }
  .side-cta__ja { font-size: 0.75rem !important; }
  .side-cta__en { font-size: 0.5rem !important; }
  .side-cta__close {
    top: -8px;
    right: -3px;
    width: 20px;
    height: 20px;
  }
  .side-cta__close::before,
  .side-cta__close::after { width: 9px; }

  .footer { padding-block: 32px 28px; }
  .footer__top { flex-direction: column; gap: 64px; padding-bottom: 40px; }
  .footer__logo { width: min(276px, 100%); margin-top: 0; }
  .footer__actions { width: 100%; }
  .footer__btn { width: 100%; }
  .footer__bottom { flex-direction: column; gap: 16px; }
  .footer__row { align-items: flex-start; }
  .footer__row dd { flex: 1; min-width: 0; }
  .footer__copy { position: static; margin-top: 40px; }
}