@charset "UTF-8";   /* 文字化けを防ぐ */



/*--------------------------------------------------------------------------------------------------------------------
共通部分 ★★★
--------------------------------------------------------------------------------------------------------------------*/
html {
  font-size: 100%;   /* 設定した文字サイズを正しく反映させる */
  background-color: #FFF;   /* 制作時にBOXを確認するための背景　おわったら白に */
}

/*----------------------------- fede ふわっと出現するCSS　できればすべてに適用 ★★★ -----------------------------*/
.fade {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fade.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------- フォントこれで統一　源真ゴシックmedium ★★★ -----------------------------*/
@font-face {
  font-family: 'GenShinGothic';
  font-style: medium;
  font-weight: 500;
  src: url("../font/subset_GenShinGothic-Medium.woff2") format("woff2"), url("../font/subset_GenShinGothic-Medium.woff") format("woff"), url("../font/subset_GenShinGothic-Medium.ttf") format("truetype");
}
body {
  font-family: "GenShinGothic", sans-serif;
}

/*----------------------------- 隠してる改行　ディスプレイサイズが狭くなったら出現 ★ -----------------------------*/
.hide-br {
  display: none;
}

/*----------------------------- 表示してる改行　ディスプレイサイズが狭くなったら消える ★ -----------------------------*/
.appear-br {
  display: block;
}







/*--------------------------------------------------------------------------------------------------------------------
準備中
--------------------------------------------------------------------------------------------------------------------*/
.in-preparation {
  text-align: center;
  font-size: 20px;
  margin: 200px 0 200px 0;
  letter-spacing: 0.1rem;
  color: #595757;
}






/*--------------------------------------------------------------------------------------------------------------------
細くなる箇所のラッパー ★★★
--------------------------------------------------------------------------------------------------------------------*/
.wrappar {
  max-width: 960px;
  margin: 0 auto;
}



/*--------------------------------------------------------------------------------------------------------------------
画面幅MAXラッパー ★★★
--------------------------------------------------------------------------------------------------------------------*/
.wrappar-mkppp-animation {
  max-width: 100%;
  margin: 0 0 8rem 0;
}



/*--------------------------------------------------------------------------------------------------------------------
メディアクエリー ★
--------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 1480px) {   /* 1480はじまり */
  
  .hide-br {   /* 隠し改行を表示 */
    display: block;
  }
  .appear-br {   /* 表示改行を隠し */
    display: none;
  }
  

  /*----------------------------- 細くなる箇所のラッパー -----------------------------*/
  .wrappar {
    max-width: 800px;
    margin: 0 auto;
  }
}   /* 1480おわり */



/*--------------------------------------------------------------------------------------------------------------------
メディアクエリー　スマホで見たとき用 ★
--------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 900px) {   /* 900はじまり */

  .wrappar {
    max-width: 90%;
    margin: 0 auto;
  }
}   /* 900おわり */