@charset "utf-8";

/* ===== キービジュアル用 ===== */

@font-face {
  font-family: 'Roboto VF';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Roboto-VF.woff2") format("woff2-variations");
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-weight: 100 900;
}
* {
  box-sizing: border-box;
}
:root {
  --text-weight: 500;
  --text-width: 100;
  --text-slant: 0;
}
#top {
  font-family: "Roboto VF", sans-serif;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(0deg, #343434, #000000);
  color: #fff;
  padding: 7vmin;
}
#top p {
  max-width: 45ch;
  text-align: center;
  font-size: 8vw;
}
.line1,
.line2 {
  display: block;
}
.line1 {
  font-size: 3vw;
  font-weight: 600;
  color: #dcdcdc;
}
.splitting {
  --text-weight-min: 100;
  --text-weight-max: 900;
  --text-slant-min: 1;
  --text-slant-max: 12;
  --text-width-min: 75;
  --text-width-max: 100;
  --glow-hue-min: 0;
  --glow-hue-max: 255;
  --glow-size-min: 0;
  --glow-size-max: 15;
  --glow-lightness: 57%;
  --delay: 0;
  --duration: 3s;
  --percent: 0;
}
.char {
  font-stretch: var(--text-width);
  font-style: oblique var(--text-slant);
  font-weight: var(--text-weight);
  animation: wave var(--duration) ease-in-out var(--delay) 1 forwards;
  animation-fill-mode: backwards;
  --percent: calc(var(--char-index) / var(--char-total));
  // --val1: calc(2 * var(--percent) - 1);
  // --val2: calc((var(--val1) * var(--val1)) * -1 + 1);
  --delay: calc(var(--percent) * var(--duration));
  --glow-hue: calc(var(--percent) * 510);
}
@keyframes wave {
  0%,99% {
    font-variation-settings: 
      "wght" var(--text-weight-min),
      "wdth" var(--text-width-min),
      "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
  50% {
    font-variation-settings: 
      "wght" var(--text-weight-max),
      "wdth" var(--text-width-max),
      "slnt" var(--text-slant-max);
    text-shadow: 0 0 calc(var(--glow-size-max) * 1px) hsla(calc(var(--glow-hue) + 255), 100%, var(--glow-lightness), 1);
  }
  100% {
    font-variation-settings: 
      "wght" var(--text-weight-min),
      "wdth" var(--text-width-min),
      "slnt" var(--text-slant-min);
    text-shadow: 0 0 calc(var(--glow-size-min) * 1px) hsla(var(--glow-hue), 100%, var(--glow-lightness), 1);
  }
}
/* ===== /キービジュアル用 ===== */


/* ===== キャッチフレーズ用 ===== */
.welcome {
	margin: 0 0 50px 0;
	padding: 50px 0;
	width: 100%;
	background: #FFF;
	font-size: 180%;
	font-weight: bold;
	text-align: center;
}
/* アニメーション前のスタイル */
.js-marker {
	display: inline;
	position: relative;
	background-image: linear-gradient(90deg, #F03, #F99); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
	transition: all 1.5s ease-in-out; /* マーカーを引く速度を調整 */
}
/* アニメーション発火時 */
.js-marker.inview {
	background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
}

/* ===== /キャッチフレーズ用 ===== */


@media only screen and (max-width: 845px) {

/* ===== キービジュアル用 ===== */

#top {
  min-height: 45vh;
  padding: 3vmin;
}
#top p {
  max-width: 45ch;
  text-align: center;
  font-size: 10vw;
}
.line1 {
  font-size: 5vw;
}
/* ===== /キービジュアル用 ===== */

/* ===== キャッチフレーズ用 ===== */
.welcome {
	font-size: 4.4vw;
	font-weight: bold;
	text-align: center;
white-space: nowrap;
}
/* ===== /キャッチフレーズ用 ===== */


}