@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
  /* overflow: hidden; */
}
body {
  color: #242424; /* RGB */
  background: #fdfdfd;
  font-family: "Noto Sans JP";
  /* Noto sans jp フォントサイズ
font-weight: 400; Regular
font-weight: 500; Medium
font-weight: 700; Bold
font-weight: 900; Black*/
  font-size: 1.6em;
  letter-spacing: .072em;
  /* overflow: hidden; */
}

p {
    line-height: 2.5; /* 40px */
}

.none {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  touch-action: manipulation;
  color: #242424;
}

a:hover {
  /* カーソルを合わせると半透明になる */
  /* opacity: 0.5; */
}

h1 {
    font-size: 56px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

/*== ボタン共通設定 */
.global-btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
overflow: hidden;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
   border: 1px solid #242424;/* ボーダーの色と太さ */
  padding: 3px 51px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
  font-size: 12px;
  /* height:12px; 場所によって高さが変わるので指定 */
}

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

.global-btn:hover span{
color:#fff;
}

/*== 背景が流れる（左から右） */
.bg-left:before {
 content: '';
  /*絶対配置で位置を指定*/
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
  /*色や形状*/
 background:#242424;/*背景色*/
 width: 100%;
height: 100%;
  /*アニメーション*/
 transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 transform: scale(0, 1);
transform-origin: right top;
}

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




/*== ホワイトボタン設定 */
.global-btn-w{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
overflow: hidden;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
   border: 1px solid #fff;/* ボーダーの色と太さ */
  padding: 3px 51px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
  font-size: 12px;
   /* height:12px;場所によって高さが変わるので指定 */
}

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

.global-btn-w:hover span{
color:#242424;
}

/*== 背景が流れる（左から右） */
.bg-left-w:before {
 content: '';
  /*絶対配置で位置を指定*/
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
  /*色や形状*/
 background:#fdfdfd;/*背景色*/
 width: 100%;
height: 100%;
  /*アニメーション*/
 transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 transform: scale(0, 1);
transform-origin: right top;
}

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

/*== ボタン共通設定 */
.references-btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
overflow: hidden;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
   border: 1px solid #242424;/* ボーダーの色と太さ */
  padding: 12px 51px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
  font-size: 12px;

}

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

.references-btn:hover span{
color:#fff;
}

/*== 背景が流れる（左から右） */
.bg-left:before {
 content: '';
  /*絶対配置で位置を指定*/
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
  /*色や形状*/
 background:#242424;/*背景色*/
 width: 100%;
height: 100%;
  /*アニメーション*/
 transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 transform: scale(0, 1);
transform-origin: right top;
}

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




/*  == ナビゲーションメニュー */

/*表示するテキストが切り替わる*/
.textchange{
  /*テキストの基点とするためrelativeを指定*/
position: relative;
  /*アニメーションの指定*/
  transition: all .2s;
}

/*hoverした際の変化*/
.textchange:hover{
color:#fff;
}

.textchange span{
  /*絶対配置でテキストの位置を決める*/
position: absolute;
left: 50%;
top:50%;
  transform:translate(-50%,-50%);
  /*アニメーションの指定*/
  transition: all .5s;
/*ブロック要素にしてテキスト折り返しなし*/
display: block;
white-space: nowrap;
}

/*差し替わるテキストの設定*/
.textchange span:nth-child(2){
opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.textchange:hover span:nth-child(1){
opacity:0;/*透過0に*/
}

.textchange:hover span:nth-child(2){
opacity:1;/*不透明に*/
}