@charset "utf-8";

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

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

  width: 100%;
  height: 100%;

  text-align: center;

  color: #fff;
  background: #504237;
}

/* 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: 250px;
}

/*=============== 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; /*線の色なし*/
}

/*==================================================
 背景色が伸びる（上から下）
===================================*/

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

body.appear .splashbg {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;

  display: block;

  width: 100%;
  height: 100vh;

  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(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: #504237; /*伸びる背景色の設定*/

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

@-webkit-keyframes PageAnime {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  50.001% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

@keyframes PageAnime {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  50.001% {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }
}

/*画面遷移の後現れるコンテンツ設定*/
#container {
  position: relative;
  z-index: 1;

  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;
  }
}

/*==================================================
 中心から外に線が伸びる（中央）
===================================*/
#menu li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}

#menu li a::after {
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 34px;
  left: 10%;
  /*線の形状*/

  width: 80%;
  height: 1px;

  content: "";
  /*アニメーションの指定*/
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1); /*X方向0、Y方向1*/
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top; /*上部中央基点*/

  background: #fff;
}

/*現在地とhoverの設定*/
#menu li a:hover::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1); /*X方向にスケール拡大*/
}

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

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

  height: 50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
  font-size: 0.7rem;
  /*描画位置*/

  position: absolute;
  top: -15px;
  left: -15px;

  letter-spacing: 0.05em;
  /*テキストの形状*/

  color: #eee;
}

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

  width: 1px;
  height: 30px;

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

  opacity: 0;
  background: #eee;
}

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

    height: 0;

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

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

    height: 0;

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

    height: 0;

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

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

    height: 0;

    opacity: 0;
  }
}

/*==================================================
 背景が流れる（左から右）
===================================*/

/*== ボタン共通設定 */
.btn {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;

  display: inline-block;
  overflow: hidden;

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

  -webkit-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  transition: ease 0.2s;
  text-align: center;
  /*ボタンの形状*/
  text-decoration: none;

  border: 1px solid #fff; /* ボーダーの色と太さ */
  outline: none;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3; /*z-indexの数値をあげて文字を背景よりも手前に表示*/

  color: #fff;
}

/*== 左から右 */
.bgleft:before {
  /*絶対配置で位置を指定*/
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  content: "";
  /*アニメーション*/
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  -o-transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s,
    -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  /*色や形状*/

  background: #333; /*背景色*/
}

/*hoverした際の形状*/
.bgleft:hover:before {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

/*===========================================================*/
/* テキストがタイピング風に出現*/
/*===========================================================*/

.TextTyping span {
  display: none;
}

.TextTyping::after {
  font-weight: normal;

  padding: 0 0 0 10px;

  content: "|";
  -webkit-animation: typinganime 0.8s ease infinite;
  animation: typinganime 0.8s ease infinite;
}

@-webkit-keyframes typinganime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes typinganime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*===========================================================*/
/* 雪が降る、桜が散る*/
/*===========================================================*/

.particle {
  position: absolute; /*描画固定*/
  top: 0;
  left: 0;

  width: 100%;
  height: 100vh;
}

/*==================================================
/* スクロールすると画面分割した左右がそれぞれ動く*/
/*===================================*/

/*全体のエリア設定*/

.ms-section {
  padding: 20px;

  color: #fff;
}

.ms-section a {
  color: #fff;
}

/*右にある丸ナビゲーション色*/

#multiscroll-nav span {
  border-color: #fff !important;
  background: transparent !important;
}

/*右にある丸のナビゲーション現在地色*/

#multiscroll-nav li .active span {
  background: #fff !important;
}

/*左上のナビゲーション*/

#menu li {
  display: inline-block;
}

#menu li a {
  display: inline-block;

  padding: 20px;

  text-decoration: none;

  color: #fff;
}

/*左エリア画像設定*/
#left1 {
  background: url("../img/main-left.jpg") no-repeat center right;
  background-size: cover;
}

#right1 {
  background: url("../img/main-right.jpg") no-repeat center left;
  background-size: cover;
}

#right2 {
  background: url("../img/01.jpg") no-repeat center;
  background-size: cover;
}

#right3 {
  background: url("../img/02.jpg") no-repeat center;
  background-size: cover;
}

#right4 {
  background: url("../img/03.jpg") no-repeat center;
  background-size: cover;
}

#left4 {
  background: url("../img/04.jpg") no-repeat center;
  background-size: cover;
}

#right5 {
  background: url("../img/05.jpg") no-repeat center;
  background-size: cover;
}

#left5 {
  background: url("../img/06.jpg") no-repeat center;
  background-size: cover;
}

#right6 {
  background: url("../img/07.jpg") no-repeat center;
  background-size: cover;
}

/*＝＝＝＝＝＝＝＝＝＝＝550px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width: 550px) {
  #header {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  /*全体のボックスについている余白をリセット*/
  .ms-section {
    padding: 0;
  }

  /*天地中央になっている見せ方を上ぞろえに上書き*/
  .ms-tableCell {
    vertical-align: top;
  }

  /*左上ナビゲーションと左エリア非表示*/
  #menu,
  .ms-right {
    display: none;
  }

  /*右エリアを横幅100%にして画像＋テキストを出す設定*/
  .ms-left {
    width: 100% !important;
  }

  /*右エリア上部画像設定*/

  #left1 {
    background: url("../img/main-right.jpg") center;
    background-size: cover;
  }

  #left2 .sp-top {
    height: 50vh;

    background: url("../img/01.jpg") no-repeat center;
    background-size: cover;
  }

  #left3 .sp-top {
    height: 50vh;

    background: url("../img/02.jpg") no-repeat top center;
    background-size: cover;
  }

  #left4 .sp-top {
    height: 50vh;

    background: url("../img/03.jpg") no-repeat top center;
    background-size: cover;
  }

  #left4 .sp-bottom {
    height: 50vh;

    background: url("../img/04.jpg") no-repeat top center;
    background-size: cover;
  }

  #left5 .sp-top {
    height: 50vh;

    background: url("../img/05.jpg") no-repeat top center;
    background-size: cover;
  }

  #left5 .sp-bottom {
    height: 50vh;

    background: url("../img/07.jpg") no-repeat center;
    background-size: cover;
  }

  #left6 {
    background: url("../img/06.jpg") no-repeat center;
    background-size: cover;
  }

  /*右エリア下部テキスト余白設定*/
  .sp-bottom {
    padding: 20px;
  }
}