/* リセット */
*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: clip; scroll-padding-top: var(--h-header); }

body,
h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 基準 */
body {
  font-family: var(--ff-ja);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* 器 */
.section {
  width: 100%;
  padding-inline: var(--pad-x);
  padding-block: var(--py-lg);
}

.inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
}

.inner--mid { max-width: var(--w-mid); }
.inner--narrow { max-width: var(--w-narrow); }

/* セクション別の背景と上下余白 */
.site-header { background: var(--c-white); }

.style { background: var(--c-white); padding-block: var(--py-md); }
.features { background: var(--c-bg-features); }
.cta { background: var(--c-black); padding-block: var(--py-md); }
.cases { background: var(--c-bg-cases); }
.numbers { background: var(--c-ink); }
.logos { background: var(--c-bg-logos); padding-block: var(--py-sm); }
.pricing { background: var(--c-ink); }
.faq { background: var(--c-white); }

.site-footer {
  background: var(--c-ink);
  box-shadow: inset 0 1px 0 var(--c-line);
  padding-inline: var(--pad-x);
  padding-block: var(--py-xs);
}

/* ヘッダーとFVは高さが仕様 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  height: var(--h-header);
  padding-inline: var(--pad-x);
  box-shadow: inset 0 -1px 0 var(--c-divider);
}

.fv {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--h-fv);
  padding-inline: var(--pad-x);
}

/* CTAはカンプに左右余白が無い */
.cta { padding-inline: 0; }

@media (min-width: 769px) {
  .cta { padding-inline: var(--pad-x); }
}