@charset "utf-8";

/*==================================================
 ロゴアウトラインアニメーション
===================================*/

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  z-index: 9999;

  width: 100%;
  height: 100%;

  text-align: center;

  color: #fff;
  background: #3e2058;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg {
  width: 100px;
}

/*==================================================
 背景色が伸びる（右から左）
===================================*/

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg {
  display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;

  display: block;

  width: 100%;
  height: 100vh;

  content: "";
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-animation-name: PageAnime;
  animation-name: PageAnime;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  background-color: #3e2058; /*伸びる背景色の設定*/

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes PageAnime {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  50% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  50.001% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@keyframes PageAnime {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  50% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  50.001% {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

/*画面遷移の後現れるコンテンツ設定*/

#container {
  opacity: 0; /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  -webkit-animation-name: PageAnimeAppear;
  animation-name: PageAnimeAppear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;

  opacity: 0;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
  -webkit-transition: fill-opacity 0.5s;
  -o-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/

  fill-opacity: 0; /*最初は透過0で見えない状態*/
  fill: none; /*塗りがない状態*/
  stroke: #fff; /*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path {
  fill: #fff; /*塗りの色*/
  fill-opacity: 1; /*透過1で見える状態*/
  stroke: none; /*線の色なし*/
}

/*==================================================
 クリックしたら円形背景が拡大（下から）
===================================*/
/*========= ナビゲーションのためのCSS ===============*/

@media screen and (max-width: 990px) {
  /*アクティブになったエリア*/
  #g-nav.panelactive {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    /*IE11対応のために今回は記述を削除
    position:fixed;
    z-index: 999;
	top: 0; */
    width: 100%;
    height: 100vh;
  }

  /*丸の拡大*/
  .circle-bg {
    position: fixed;
    z-index: 3;
    bottom: -50px;
    left: calc(50% - 50px); /*50%から円の半径を引いた値*/
    /*丸の形*/

    width: 100px;
    height: 100px;

    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s; /*0.6秒かけてアニメーション*/
    /*丸のスタート位置と形状*/
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0); /*scaleをはじめは0に*/

    border-radius: 50%;
    background: #3e2058;
  }

  .circle-bg.circleactive {
    -webkit-transform: scale(50);
    -ms-transform: scale(50);
    transform: scale(50); /*クラスが付与されたらscaleを拡大*/
  }

  /*ナビゲーションの縦スクロール*/
  #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;

    display: none; /*はじめは表示なし*/
    overflow: auto;

    width: 100%;
    height: 100vh;

    -webkit-overflow-scrolling: touch;
  }

  #g-nav.panelactive #g-nav-list {
    display: block; /*クラスが付与されたら出現*/
  }

  /*ナビゲーション*/
  #g-nav ul {
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top: 40%;
    left: 50%;

    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
    transform: translate(-50%, -40%);

    opacity: 0; /*はじめは透過0*/
  }

  /*背景が出現後にナビゲーションを表示*/
  #g-nav.panelactive ul {
    opacity: 1;
  }

  /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
  #g-nav.panelactive ul li {
    -webkit-animation-name: gnaviAnime;
    animation-name: gnaviAnime;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; /*0.2 秒遅らせて出現*/

    opacity: 0;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
}

@-webkit-keyframes gnaviAnime {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes gnaviAnime {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

/*========= ボタンのためのCSS ===============*/

.openbtn {
  display: none;
}

@media screen and (max-width: 990px) {
  /*==================================================
 MENUが×に
===================================*/

  /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
  .openbtn {
    position: fixed;
    z-index: 9999;
    top: 10px;
    right: 10px;

    display: block;

    width: 55px;
    height: 55px;

    cursor: pointer;

    border: 1px solid #fff;
  }

  /*ボタン内側*/
  .openbtn span {
    position: absolute;

    display: inline-block;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s; /*アニメーションの設定*/
  }

  .openbtn span:nth-of-type(1),
  .openbtn span:nth-of-type(3) {
    left: 10px;

    width: 62%;
    height: 1px;

    background: #fff;
  }

  .openbtn span:nth-of-type(1) {
    top: 13px;
  }

  .openbtn span:nth-of-type(2) {
    font-size: 0.55rem;

    top: 19px;
    left: 9px;

    text-transform: uppercase;

    color: #fff;
  }

  .openbtn span:nth-of-type(3) {
    top: 41px;
  }

  /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
  .openbtn.active span:nth-of-type(1) {
    top: 22px;
    left: 18px;

    width: 30%;

    -webkit-transform: translateY(6px) rotate(-45deg);
    -ms-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }

  .openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }

  .openbtn.active span:nth-of-type(3) {
    top: 34px;
    left: 18px;

    width: 30%;

    -webkit-transform: translateY(-6px) rotate(45deg);
    -ms-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
  }
}

/*==================================================
 縦線が動いてスクロールを促す
===================================*/

/*スクロールダウン全体の場所*/
.scrolldown1 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  top: 36vh;
  left: 50%;
  /*全体の高さ*/

  height: 100px;
}

/* 線の描写 */
.scrolldown1::after {
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/

  width: 1px;
  height: 100px;

  content: "";
  /*線の動き1.4秒かけて動く。永遠にループ*/
  -webkit-animation: pathmove 2.4s ease-in-out infinite;
  animation: pathmove 2.4s ease-in-out infinite;

  opacity: 0;
  background: #000;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@-webkit-keyframes pathmove {
  0% {
    top: 0;

    height: 0;

    opacity: 0;
  }
  30% {
    height: 100px;

    opacity: 1;
  }
  100% {
    top: 150px;

    height: 0;

    opacity: 0;
  }
}
@keyframes pathmove {
  0% {
    top: 0;

    height: 0;

    opacity: 0;
  }
  30% {
    height: 100px;

    opacity: 1;
  }
  100% {
    top: 150px;

    height: 0;

    opacity: 0;
  }
}

/*==================================================
 矢印が右に移動して背景がつく 
===================================*/

.btnarrow5 {
  font-size: 0.9rem;
  /*矢印の基点とするためrelativeを指定*/

  position: relative;

  display: inline-block;

  padding: 8px 30px;
  /*アニメーションの指定*/

  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  text-align: center;
  text-decoration: none;

  color: #333;
  /*ボタンの形状*/
  border: 1px solid #555;
  outline: none;
}

.btnarrow5:hover {
  color: #fff;
  background: #333;
}

/*矢印と下線の形状*/
.btnarrow5::before {
  /*絶対配置で下線の位置を決める*/
  position: absolute;
  top: 50%;
  right: -26px;
  /*下線の形状*/

  width: 40px;
  height: 1px;

  content: "";
  /*アニメーションの指定*/
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;

  background: #333;
}

.btnarrow5::after {
  /*絶対配置で矢印の位置を決める*/
  position: absolute;
  top: 20%;
  right: -21px;
  /*矢印の形状*/

  width: 1px;
  height: 12px;

  content: "";
  /*アニメーションの指定*/
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  transform: skewX(45deg);

  background: #333;
}

/*hoverした際の移動*/
.btnarrow5:hover::before {
  right: -30px;
}

.btnarrow5:hover::after {
  right: -25px;
}

/*===========================================================*/
/* ページの指定の高さを超えたら出現し、フッター手前で止まる*/
/*===========================================================*/

/*リンクの形状*/
#page-top a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  width: 60px;
  height: 60px;

  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

  color: #6c6c6c;
  border: 1px solid #6c6c6c;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 769px) {
  #page-top a:hover {
    background: #777;
  }
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  z-index: 2;
  right: 10px;

  cursor: pointer;
  -webkit-transform: translateY(100px);
  -ms-transform: translateY(100px);
  transform: translateY(100px);
  /*はじめは非表示*/

  opacity: 0;
}

/*　上に上がる動き　*/

#page-top.UpMove {
  -webkit-animation: UpAnime 0.5s forwards;
  animation: UpAnime 0.5s forwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
@-webkit-keyframes UpAnime {
  from {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}
@keyframes UpAnime {
  from {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
}

/*　下に下がる動き　*/

#page-top.DownMove {
  -webkit-animation: DownAnime 0.5s forwards;
  animation: DownAnime 0.5s forwards;
}
@-webkit-keyframes DownAnime {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 1;
  }
}
@keyframes DownAnime {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);

    opacity: 1;
  }
  to {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    opacity: 1;
  }
}

/*===========================================================*/
/* フェードイン・アウトさせて全画面で見せる*/
/*===========================================================*/

.slider {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/

  height: 90vh; /*スライダー全体の縦幅を90vhにする*/
}
/*　背景画像設定　*/

.slider-item01 {
  background: url("../img/main_01.jpg");
}

.slider-item02 {
  background: url("../img/main_02.jpg");
}

.slider-item03 {
  background: url("../img/main_03.jpg");
}

.slider-item {
  width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 90vh; /*各スライダー全体の縦幅を90vhにする*/

  background-repeat: no-repeat; /*背景画像をリピートしない*/
  background-position: center; /*背景画像の位置を中央に*/
  background-size: cover; /*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev,
.slick-next {
  position: absolute;
  z-index: 3;
  top: 42%;

  width: 25px;
  height: 25px;

  cursor: pointer; /*マウスカーソルを指マークに*/

  border-top: 2px solid #fff; /*矢印の色*/
  border-right: 2px solid #fff; /*矢印の色*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;

  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;

  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;

  margin: -50px 0 0 0; /*ドットの位置*/

  text-align: center;
}

.slick-dots li {
  display: inline-block;

  margin: 0 5px;
}

.slick-dots button {
  display: block;

  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/

  color: transparent;
  border-radius: 50%;
  outline: none;
  background: #fff; /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}

/*==================================================
 最低限おぼえておきたい動き
===================================*/

/* じわっ（ぼかしから出現） */
.blur {
  -webkit-animation-name: blurAnime;
  animation-name: blurAnime;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes blurAnime {
  from {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);

    opacity: 0;

    -webkit-filter: blur(10px);
    filter: blur(10px);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes blurAnime {
  from {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);

    opacity: 0;

    -webkit-filter: blur(10px);
    filter: blur(10px);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
  opacity: 0;
}

/* スーッ（枠線が伸びて出現）*/

.lineTrigger {
  position: relative; /* 枠線が書かれる基点*/

  opacity: 0;
}

.lineTrigger.lineanime {
  -webkit-animation-name: lineAnimeBase;
  animation-name: lineAnimeBase;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes lineAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;

  width: 0;
  height: 1px;

  content: "";

  background: #333; /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;

  width: 1px;
  height: 0;

  content: "";

  background: #333; /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}

.lineTrigger.lineanime::before {
  -webkit-animation: lineAnime 0.5s linear 0s forwards;
  animation: lineAnime 0.5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2::before {
  -webkit-animation: lineAnime2 0.5s linear 0.5s forwards;
  animation: lineAnime2 0.5s linear 0.5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
  right: 0;
  bottom: 0;
}

.lineTrigger.lineanime::after {
  -webkit-animation: lineAnime 0.5s linear 1s forwards;
  animation: lineAnime 0.5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2::after {
  -webkit-animation: lineAnime2 0.5s linear 1.5s forwards;
  animation: lineAnime2 0.5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@-webkit-keyframes lineAnime {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes lineAnime {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes lineAnime2 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

@keyframes lineAnime2 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear {
  -webkit-animation: lineInnerAnime 0.5s linear 1.5s forwards;
  animation: lineInnerAnime 0.5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/

  opacity: 0; /*初期値を透過0にする*/
}

@-webkit-keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

/*==================================================
 SVG アニメーション
===================================*/

.svganimeblock svg {
  width: 100%; /*SVGのサイズ*/
}

/*アニメーション前の指定*/
.svganimeblock svg path {
  -webkit-transition: fill-opacity 0.5s;
  -o-transition: fill-opacity 0.5s;
  transition: fill-opacity 0.5s; /*カラーがつく際のアニメーション0.5秒で変化*/

  fill-opacity: 0; /*最初は透過0で見えない状態*/
  fill: none; /*塗りがない状態*/
  stroke: #ccc; /*線の色*/
}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
.svganimeblock svg.done path {
  fill: #efefef; /*塗りの色*/
  fill-opacity: 1; /*透過1で見える状態*/
  stroke: none; /*線の色なし*/
}