@charset "utf-8";

/* カスタムプロパティ */
:root {
  --brand-color: #eac34b;
}

/*画面遷移アニメーション--------------------------- */
.splashbg1,
.splashbg2 {
  display: none;
  border-radius: 0 0 0 0;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2 {
  display: block;
}

/*右に消えるエリア*/
body.appear .splashbg1 {
  animation-name: PageAnime;
  animation-duration: 1.7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: '';
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 50%;
  transform: translateY(0) scaleX(1);
  background-color: var(--brand-color); /*伸びる背景色*/
}

@keyframes PageAnime {
  0% {
    transform-origin: top left;
    transform: translateY(0) scaleX(1);
    border-radius: 0 0 0 0;
  }
  50% {
    transform-origin: top right;
    border-radius: 0 0 0 100%;
  }
  100% {
    transform-origin: top right;
    transform: translateY(-100%) scaleX(0);
    border-radius: 0 0 0 300%;
  }
}

/*左に消えるエリア*/
body.appear .splashbg2 {
  animation-name: PageAnime2;
  animation-duration: 1.7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: '';
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 50%;
  transform: translateY(0) scaleX(1);
  background-color: var(--brand-color); /*伸びる背景色*/
}

@keyframes PageAnime2 {
  0% {
    transform-origin: top right;
    transform: translateY(0) scaleX(1);
    border-radius: 0 0 0 0;
  }
  50% {
    transform-origin: top left;
    border-radius: 0 0 100% 0;
  }
  100% {
    transform-origin: top left;
    transform: translateY(-100%) scaleX(0);
    border-radius: 0 0 300% 0;
  }
}

/* 画面遷移の後に現れるコンテンツ */
#wrapper {
  opacity: 0;
}

/* bodyにappearクラスがついたら出現 */
body.appear #wrapper {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

#splash {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: var(--brand-color);
  text-align: center;
  color: #fff;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

#splash_logo svg {
  max-width: 500px;
  width: 85%;
  stroke-width: 0.5px;
  margin: 0 auto;
}

#mask {
  display: none;
}

#mask path {
  fill-opacity: 0;
  transition: fill-opacity 0.5s;
  fill: none;
  stroke: #333;
}

#mask.done path {
  fill: #333;
  fill-opacity: 1;
  stroke: none;
}

/* ハンバーガーメニュー ---------------------------*/
.openbtn {
  position: fixed;
  z-index: 99999; /*ボタンを最前面に*/
  top: 10px;
  right: 10px;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

/* ボタン内側 */
.openbtn span {
  display: inline-block;
  transition: all 0.4s; /*アニメーションの設定*/
  position: absolute;
  left: 13px;
  height: 3px;
  background-color: #eee;
}
.openbtn span:nth-of-type(1) {
  top: 22px;
  width: 50%;
}

.openbtn span:nth-of-type(2) {
  top: 29px;
  width: 30%;
}

/* activeクラスが付与されると線が回転してxに */
.openbtn.active span:nth-of-type(1) {
  top: 20px;
  left: 16px;
  transform: translateY(6px) rotate(-45deg);
  width: 35%;
}

.openbtn.active span:nth-of-type(2) {
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(45deg);
  width: 35%;
}

/* ハンバーガーメニュー */
/* クリックでナビ背景コンテンツがぼかされる ※IE11非対応 */

/* ぼかしのためのCSS */
.mainblur {
  filter: blur(8px);
}
/* ナビゲーションのためのCSS */
#g-nav {
  position: fixed;
  z-index: -1;
  opacity: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(234, 195, 75, 0.8);
  transition: all 0.3s;
}
/* panelactiveクラスがついたら透過無しにして最前面へ */
#g-nav.panelactive {
  opacity: 1;
  z-index: 999;
}
/* ナビゲーションの縦スクロール */
#g-nav.panelactive #g-nav-list {
  /* ナビの数が増えた場合の縦スクロール */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* ナビゲーション */
#g-nav ul {
  display: none;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
  display: block;
}
/* リストのレイアウト設定 */
#g-nav li {
  list-style: none;
  text-align: center;
}
#g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/* フォーム -------------------------------- */
#contact-form form {
  width: 80%;
  max-width: 800px;
  margin: 0 auto 100px;
}

#contact-form form input,
#contact-form form textarea {
  border-style: solid;
  border-width: 1px;
  border-color: #333;
}

/* スクロールダウン--------------------------- */

/* スクロールダウン場所 */
.scrolldown2 {
  position: fixed;
  bottom: 10px;
  left: 50%;
  z-index: 2;
}

/* Scrollテキストの描写 */
.scrolldown2 span {
  /* 描画位置 */
  position: absolute;
  left: 10px;
  bottom: 10px;
  /* テキスtの形状 */
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /* 縦書き設定 */
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: '';
  /* 描画位置 */
  position: absolute;
  bottom: 0;
  left: -4px;
  /* 丸の形状 */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /* 丸の動き：1.6秒かけて透過し、永遠にループ */
  animation: circlemove 1.6s ease-in-out infinite, circlemovehide 1.6s ease-out infinite;
}

/* 下からの距離が変化して丸の全体が上から下に動く */
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes circlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* 線の描写 */
.scrolldown2::after {
  content: '';
  /* 描画位置 */
  position: absolute;
  bottom: 0;
  left: 0;
  /* 線の形状 */
  width: 2px;
  height: 50px;
  background: #eee;
}

/* 線から塗りに変化（上から下） ------------------------------*/
/* ボタン共通設定 */
.btn04 {
  /* 線の起点とするためrelativeを指定 */
  position: relative;
  /* ボタンの形状 */
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #ccc;
  text-decoration: none;
  outline: none;
  /* はみ出す背景色を隠す */
  overflow: hidden;
}

.btn04-dis {
  /* 線の起点とするためrelativeを指定 */
  position: relative;
  /* ボタンの形状 */
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #888;
  text-decoration: none;
  outline: none;
  background-color: #888;
  /* はみ出す背景色を隠す */
  overflow: hidden;
  z-index: 0;
  color: #fff;
}

/* hoverした際のボタンの形状 */
.btn04:hover {
  color: #fff;
  border-color: transparent;
  /* 色の変化を遅らせる */
  transition-delay: 0.2s;
}

/* 線の設定 */
.btn04 span {
  display: block;
  z-index: 2;
}

/* 背景の設定 */
.bordertop::before {
  content: '';
  /* 絶対配置で線の位置を決める */
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  /* 背景の形状 */
  width: 100%;
  height: 0;
  background: var(--title-color);
  /* アニメーションの設定 */
  transition: all 0.3s;
}

/* hoverをすると背景が伸びる */
.bordertop:hover::before {
  height: 100%;
  /* 0.4秒遅れてアニメーション */
  transition-delay: 0.1s;
}

/* テキストがじわっと出現--------------------------- */

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger {
  opacity: 0;
}

/* テキストがほのかに光りながら出現--------------------------- */
.glowAnime span {
  opacity: 0;
}
.glowAnime.glow span {
  animation: glow_anime_on 1s ease-out forwards;
}
@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}

/* 複数画像を並列に見せる---------------------------- */
.slider {
  width: 94%;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

/* slickのJSで書かれるタグ内、スライド左右の余白調整 */
.slider .slick-slide {
  margin: 0 10px;
}

/* 矢印の設定 */
/* 戻る、次へ矢印の位置 */
.slick-prev,
.slick-next {
  position: absolute;
  top: 42%;
  cursor: pointer;
  outline: none;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  height: 15px;
  width: 15px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/* ドットナビゲーションの設定 */
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  height: 8px;
  display: block;
  border-radius: 50%;
  background: #ccc;
}
.slick-dots .slick-active button {
  background: var(--title-color);
}

/* フェード系アニメーション-------------------------------------- */
/* その場でふわっと */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

/* スクロールするとヘッダー背景画像が拡大（エリアの動き）--------------------------- */

#header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#header-img {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url('../img/pexels-vincent-ma-janssen-1310788.jpg') no-repeat top center;
  background-size: cover;
  transform-origin: center;
  transform: scale(1.2);
}

#container,
#footer {
  position: relative; /*#header-imgよりも配置を上にするためにrelativeをつける*/
  z-index: 3; /*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
  background: #f8f9fa;
}

/* ローディング終了時ヘッダー背景画像が拡大（エリアの動き）--------------------------- */

#header-img.headerZoom {
  animation-name: headerZoom;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  transform-origin: center;
  transform: scale(1);
}

@keyframes headerZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/* テキストが流れるように出現（左から右）--------------------- */

/* 全共通 */
.slide-in {
  overflow: hidden;
  display: inline-block;
  padding: 0 10px;
}
.slide-in_inner {
  display: inline-block;
}

/* 左右のアニメーション */
.leftAnime,
.rightAnime {
  opacity: 0;
}
.slideAnimeLeftRight {
  animation-name: slideText-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

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

/* ページ内にある指定の範囲内で下から出現 ----------------------------------*/
/* スクロールトップ */

/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--brand-color);
  width: 60px;
  height: 50px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s;
}

#page-top a:hover {
  background: #999;
  height: 55px;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

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

/*　下に下がる動き　*/

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}