@media screen and (min-width: 737px) {
  html {
    font-size: clamp(1rem, 0.55rem + 0.5vw, 1.125rem);
  }
  .for-large {
    display: block;
  }
  .for-small {
    display: none;
  }
  .layout-max,
  .layout-primary,
  .layout-secondary {
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--margin-side);
    padding-left: var(--margin-side);
  }
  .layout-max {
    max-width: calc(var(--content-max) + var(--margin-side) * 2);
  }
  .layout-primary {
    max-width: calc(var(--content-primary) + var(--margin-side) * 2);
  }
  .layout-secondary {
    max-width: calc(var(--content-secondary) + var(--margin-side) * 2);
  }
  .site-button-main:hover {
    background-position: right center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
  }
  .site-button-sub:hover {
    background-color: var(--color-white);
    color: var(--color-project-brown);
  }
  .site-button-sns:hover::after {
    transform: translateX(4px);
  }
}