body {
  font-family: "Noto Sans JP", sans-serif;
  box-sizing: border-box;
  font-weight: 400;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

img {
  box-sizing: border-box;
}

span {
  display: inline-block;
}

section {
  padding: 300px;
  margin-top: 50px;
  width: 100%;
}

.section:nth-of-type(odd) {
  background-color: #fff;
}

.works__inner {
  max-width: 1000px;
  margin: 0 auto;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hide,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
hide,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*==================================================
共通 横並びのための設定
===================================*/

.gnavi {
  display: flex;
  flex-wrap: wrap; /*スマホ表示折り返し用なのでPCのみなら不要*/
  margin: 0 0 50px 0;
  list-style: none;
}

.gnavi li a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.gnavi li {
  margin-bottom: 20px;
}

/* ------------------------------------------------- */

/*==================================================
　5-3-8 円が線に変化
===================================*/

.gnavi li a {
  /*円の基点とするためrelativeを指定*/
  position: relative;
}

/* ヘッダーボタンホバー時 */
.gnavi li.current a,
.gnavi li a:hover {
  color: #ee7800;
}

.gnavi li a::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線になる丸の形状*/
  width: 100%;
  height: 5px;
  border-radius: 50%;
  background: #ee7800;
  /*アニメーションの指定*/
  transition: all 0.3s;
  transform: scale(0.04, 1); /*X方向0.04、Y方向1*/
  transform-origin: center bottom; /*中央下部基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  height: 2px; /*縦幅を変化*/
  border-radius: 0; /*丸みをなくす*/
  transform: scale(0.8, 1); /*X方向0.8、Y方向1にスケール拡大*/
}

/*　画像のマスク　*/

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

/* 文字がふわっと出て来る */
.fadeUpTrigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;

    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-400px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(-400px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

.leftAnime {
  opacity: 0;
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

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

/*左右のアニメーション*/
.rightAnime {
  opacity: 0; /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*========= くるくる回るテキスト ===============*/

.rollAnime.roll span {
  transition-property: opacity, transform;
  transform: rotateY(360deg);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  display: inline-block;
}

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
  margin-bottom: -10px;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: -10px;
  background-color: #4169e1; /*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}