/* ==========================================================
   基本（body・フォント・共通のレイアウト）
   .l-container  … コンテンツ幅（左右の余白込み）
   .l-section    … 下層ページのセクションの上下の余白
   .u-sp-show / .u-pc-show … SP だけ・PC だけ表示（<br class="u-sp-show"> など）
   ========================================================== */
@font-face {
  font-family: "segoe";
  src: url("../../font/segoe.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: .05em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body.is-drawer-open {
  overflow: hidden;
}

a,
button {
  transition: opacity .3s;
}

a:hover {
  opacity: .75;
}

.l-site {
  overflow-x: clip;
}

.l-container {
  width: min(100% - var(--gutter) * 2, var(--container-width));
  margin-inline: auto;
}

.l-container--narrow {
  --container-width: 960px;
}

.l-section {
  padding-block: var(--section-space);
}

.u-sp-show {
  display: none;
}

@media (max-width: 767px) {
  .u-sp-show {
    display: revert;
  }

  .u-pc-show {
    display: none;
  }
}