@charset "utf-8";

/* cssリセット */

/*利用するタグによってこちらの内容は増やす*/

html {
  scroll-behavior: smooth;
}

h1,
h3,
p {
  margin: 0;
}

dl,
dt,
dd,
ul {
  list-style: none;
}

dd {
  margin: 0;
}

h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: normal;
  color: inherit;
}

li {
  margin: 0;
  padding: 0;
  line-height: 1;
}

a {
  /*下線を消す*/
  text-decoration: none;
  /*色を消す*/
  color: inherit;
  transition: 0.3s;
}

a:hover {
  opacity: 0.5;
}

ul {
  /*左の「・」を消す*/
  list-style: none;
}

img {
  overflow-clip-margin: initial; /* デフォルトを上書き */
  overflow: hidden; /* 影響を緩和するためにoverflowをhiddenに設定 */
  max-width: 100%;
  vertical-align: bottom;
  border: none;
}

video,
canvas {
  overflow-clip-margin: initial; /* overflow-clip-marginを初期値に設定 */
  overflow: hidden; /* 影響を緩和するためにoverflowをhiddenに設定 */
}

/* ==右側のスクロール表示== */
/*スクロールリンクの形状*/
.scroll-top {
  /*表示位置*/
  position: fixed;
  right: 6%;
  bottom: 100px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s; /*それぞれに0.5秒の変化のアニメーション*/
  /*縦書き*/
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*改行禁止*/
  white-space: nowrap;
  /*矢印の動き*/
  animation: arrowmove 2s ease-in-out infinite;
}

@keyframes arrowmove {
  0% {
    bottom: 100px;
  }
  50% {
    bottom: 105px;
  }
  100% {
    bottom: 100px;
  }
}

/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
  opacity: 1;
  visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size: 16px;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 400;
  letter-spacing: 0.07em;
  display: block;
}

/*スクロールリンクの形状*/
.js-scroll a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

.js-scroll a::before {
  content: "";
  position: absolute;
  top: 30px;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x),
.js-scroll a::before {
  right: -11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 50px;
  background: #666;
}

.js-pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x),
.js-pagetop a::before {
  right: 0;
}

/*=== 上から流れてくるテキスト ===*/
/*全共通*/

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_innerupAnimeInner {
  display: inline-block;
}

/* 上下のアニメーション*/
.upAnimeLoad,
.upAnimeScroll {
  opacity: 0; /* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
  animation-name: slideTextY100;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextY100 {
  from {
    transform: translateY(100%); /* 要素を上の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeUpDown {
  animation-name: slideTextY-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextY-100 {
  from {
    transform: translateY(-100%); /* 要素を下の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}

/*== ランダム表示テキスト ==*/
.randomAnime {
  visibility: hidden;
}

/*== リンク画像のホバーアクション ==*/
.zoomOut img {
  transform: scale(1);
  transition: 0.6s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOut a:hover img {
  /*hoverした時の変化*/
  transform: scale(0.95); /*拡大の値を変更したい場合はこの数値を変更*/
}

/*画像のマスク*/
.mask {
  display: block;
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

/* ==ページ読み込みでフワッと表示== */
.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}