@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap");

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

.font-tori {
  font-family: "ab-tori-a", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a:hover {
  transition: all 0.15s ease-in-out;
  opacity: 0.75;
}

a {
  transition: all 0.15s ease-in-out;
  opacity: 1;
}

header {
  transition: all 0.15s ease-in-out;
}

#top {
  scroll-margin-top: 150px;
}

.ps0 {
  scroll-margin-top: 60px;
}

.ps {
  scroll-margin-top: 90px;
}

.text-shadow {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

:root {
  --manabiba-50: #fdf5ef;
  --manabiba-100: #fbe7d9;
  --manabiba-200: #f6ccb2;
  --manabiba-300: #f1a980;
  --manabiba-400: #ea7d4d;
  --manabiba-500: #e45826;
  --manabiba-600: #d64320;
  --manabiba-700: #b2321c;
  --manabiba-800: #8e2a1e;
  --manabiba-900: #72251c;
  --manabiba-950: #3e100c;
}

.bg-manabiba-50 {
  background-color: var(--manabiba-50);
}

.bg-manabiba-100 {
  background-color: var(--manabiba-100);
}

.bg-manabiba-200 {
  background-color: var(--manabiba-200);
}

.bg-manabiba-300 {
  background-color: var(--manabiba-300);
}

.bg-manabiba-400 {
  background-color: var(--manabiba-400);
}

.bg-manabiba-500 {
  background-color: var(--manabiba-500);
}

.bg-manabiba-600 {
  background-color: var(--manabiba-600);
}

.bg-manabiba-700 {
  background-color: var(--manabiba-700);
}

.bg-manabiba-800 {
  background-color: var(--manabiba-800);
}

.bg-manabiba-900 {
  background-color: var(--manabiba-900);
}

.text-manabiba-50 {
  color: var(--manabiba-50);
}

.text-manabiba-100 {
  color: var(--manabiba-100);
}

.text-manabiba-200 {
  color: var(--manabiba-200);
}

.text-manabiba-300 {
  color: var(--manabiba-300);
}

.text-manabiba-400 {
  color: var(--manabiba-400);
}

.text-manabiba-500 {
  color: var(--manabiba-500);
}

.text-manabiba-600 {
  color: var(--manabiba-600);
}

.text-manabiba-700 {
  color: var(--manabiba-700);
}

.text-manabiba-800 {
  color: var(--manabiba-800);
}

.text-manabiba-900 {
  color: var(--manabiba-900);
}

/* zoom */
#zoom {
  -webkit-animation: zoom 1s ease-in-out alternate forwards running;
  animation: zoom 1s ease-in-out alternate forwards running;
  animation-timeline: scroll();
}

@keyframes zoom {
  from {
    -webkit-transform: scale(1.08, 1.08);
    transform: scale(1.08, 1.08);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

/* typo */
#typo {
  -webkit-animation: typo 1s ease-in-out alternate forwards running;
  animation: typo 1s ease-in-out alternate forwards running;
}

@keyframes typo {
  from {
    opacity: 0;
    -webkit-transform: scale(0.98, 0.98);
    transform: scale(0.98, 0.98);
  }
  to {
    opacity: 100;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}