/* ========================================================== */
/* ベース */
/* ========================================================== */
@font-face {
  font-family: 'futura';
  src: url('../fonts/unicode.futurab.ttf') format('ttf');
}

body {
  width: 100%;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;

  /* 文字カラー */
  color: #00693e;
  /* 背景カラー */
  background-color: #f5f5f5;
  /* background-color: #3faf49; */
}

section {
  margin-top: var(--sectionMargin);
}

ul {
  list-style: none;
}

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

button {
  color: inherit;
}

.title-font {
  font-family: "futura-pt", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.title-fs {
  font-weight: 900;
  line-height: calc(70px * 0.583);
  font-size: 70px;
}

.title-fs-sub {
  font-weight: 700;
  font-size: calc(70px * 0.25);
}

@media screen and (max-width: 576px) {
  .title-fs {
    line-height: calc(50px * 0.583);
    font-size: 50px;
  }

  .title-fs-sub {
    font-size: calc(60px * 0.25);
  }
}

@media screen and (max-width: 375px) {
  .title-fs {
    line-height: calc(40px * 0.583);
    font-size: 40px;
  }

}

/* ========================================================== */
/* 効果  */
/* ========================================================== */
/* 効果：ホバー時に拡大 ---------------------------------*/
.impress {
  transform: scale(1);
  transition: transform 0.6s;

  &:hover {
    transform: scale(1.15);
  }
}

/* 効果：タイトル出現時に左に詰めてから表示 ---------------------------------*/
.effect-inner-container {
  opacity: 0;

  &.appear {
    animation: title-effect-anime 1s ease-out 0s forwards;
  }
}

.effect-inner {
  &.appear {
    animation-delay: 0s;
    animation-duration: 1.5s;
  }
}

@keyframes title-effect-anime {
  0% {
    opacity: 0;
    transform: translateX(15px);
  }

  40% {
    transform: translateX(-4px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeIn {
  opacity: 0;

  &.appear {
    animation-name: fadeInAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}