/* ===== Webサイト全体のスタイル ===== */
/* html */
html {
  height: 100%;
}

a{
  text-decoration: none;
  color: #b22222;
}

header {
  
  
}




.image-color1{
  background-image: url("img/paper02.jpg"); /* 切り抜きたい画像 */
  -webkit-background-clip: text;       /* 画像を文字で切り抜く指定 */
  color: transparent;                  /* 文字色を透明にする */
  animation: fadein1 1s ease-in 0s;
}
.image-color2{
  background-image: url("img/paper02.jpg"); /* 切り抜きたい画像 */
  -webkit-background-clip: text;       /* 画像を文字で切り抜く指定 */
  color: transparent;                  /* 文字色を透明にする */
  animation: fadein2 2s ease-in 0s;
}
.image-color3{
  background-image: url("img/metal01.jpg"); /* 切り抜きたい画像 */
  -webkit-background-clip: text;       /* 画像を文字で切り抜く指定 */
  color: transparent;                  /* 文字色を透明にする */
  animation: fadein3 3s ease-in 0s;
}
.image-color4{
  background-image: url("img/metal01.jpg"); /* 切り抜きたい画像 */
  -webkit-background-clip: text;       /* 画像を文字で切り抜く指定 */
  color: transparent;                  /* 文字色を透明にする */
  animation: fadein4 4s ease-in 0s;
}

@keyframes fadein1{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes fadein2{
  0%{
    opacity:0;
  }
  50%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes fadein3{
  0%{
    opacity:0;
  }
  66%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes fadein4{
  0%{
    opacity:0;
  }
  75%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

/* body */



.TextTyping span {
	display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "";
	animation: typinganime .8s ease infinite;
}

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


@media only screen and (max-width: 1050px) /*smartphone*/ 
{
  h1 {
  font-size: 100px;/* フォントの大きさ */
  font-family: 'Shippori Mincho B1', serif;* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: #e6e6fa;/* 線の色 */
  border-width: 20px;/* 線の太さ */
  text-align: center;/* 文字・画像を中央にそろえる *//* 枠線の角丸 */
  padding-top: 80px;/* 内側の余白 */
  padding-left: 0px;
 /* 外側の余白 */
  width: 95%;
}
  
}


@media only screen and (min-width: 1050px) /*PC*/ 
{
  h1 {
  font-size: 150px;/* フォントの大きさ */
  font-family: 'Shippori Mincho B1', serif;* フォントの種類 */
  border-style: solid;/* 線の種類 */
  border-color: #e6e6fa;/* 線の色 */
  border-width: 10px;/* 線の太さ */
  text-align: center;/* 文字・画像を中央にそろえる *//* 枠線の角丸 */
  padding-top: 300px;/* 内側の余白 */
  /* 外側余白 */
  width: 100%;
}