/*
 *= require_self
 *= require_tree .
 */

:root {
  --color-text: #403234;
  --color-surface: #ffffff;
  --color-button-bg: #d8d0c8;
  --color-accent: #C26800;
  --color-brand-yellow: #F4CD1F;
  --color-brand-red: #E13935;
  --color-brand-wine: #86263E;

  --header-height: 80px;
  --radius-sm: 6px;

  --size-square-pc: 50vw;
  --size-square-sp: 100vw;
  --size-half-square: 25vw;

  --space-line-height-pc: 25vw;
  --space-line-height-sp: 50vw;

  --instagram-gap: 32px;
  --instagram-embed-min-width: 326px;

  --footer-height: 200px;
  --footer-padding-bottom: 20px;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--color-text);
}

img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.about-button {
  display: inline-block;
  padding: 12px 28px;

  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;

  color: var(--color-text, #403234);
  background: var(--color-button-bg, #d8d0c8);
  border-radius: var(--radius-sm, 6px);

  transition: opacity 0.2s ease;
}

.about-button:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .about-button {
    padding: 8px 20px;
    font-size: 12px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}