@charset "utf-8";

input[type="range"] {
	width:85%;
}

.relative {
    position: relative;
	overflow: hidden;
}


.absolute {
    position: absolute;
    right: 2%;
    bottom: 2%;
}
.absolute2 {
    	position: absolute;
    	top:200px;
	left:50px;
	display:inline-block;
	color:#ffffff;
	font-size:100px;
	letter-spacing:4px;
	text-shadow:
			2px  2px 6px #696969,
		 -2px  2px 6px #696969,
			2px -2px 6px #696969,
		 -2px -2px 6px #696969,
			2px  0px 6px #696969,
			0px  2px 6px #696969,
		 -2px  0px 6px #696969,
			0px -2px 6px #696969;  /* 文字の影 */
}
/*ふわっと*/
.absolute2,
.top,
.second,
.background2,
#worksbox,
.background3
{
  opacity : 0;
  transform: translateY(20px);
  transition: all 0.5s;
}
/*ふわっと*/


.textLeft{
text-align:left;
}
.textRight{
text-align:right;
}

body {
	width: 100%;
	box-sizing : border-box;
	font-family: "M PLUS Rounded 1c";
  margin: 0;
}



.top {
	width: 70%;
	height: fit-content;
	padding: 16px;
	margin: 16px auto;
	margin-top: 600px;
}
.second {
	width: 70%;
	height: fit-content;
	padding: 16px;
	margin: 16px auto;
}
.background1 {
	width: 300px;
	padding: 20px 0;
	margin: 8px auto;
	text-align: center;
}

a {
  text-decoration: none;
  
}


.button {
	width: 200px;
	font-size: 24px;
	color: #333;
	padding:5px 10px;
	border: solid 4px
	text-align: center;
	height: 50px;
	border-radius: 5px;
}
.button:hover {
	background-color: #fff;
	color: rgba(100,100,255,0.5);
	transition: background-color 1s;
}
.right {
	text-align: right;
	margin-right: 2%;
}
.maru {
	position: fixed;
	padding:1px;
	text-align: center;
	font-size: 35px;
	bottom: 1%;
	right: 2%;
	width: 50px;
	height: 150px;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	z-index: 1;
	color: #333;
}

.about {
	width: 180px;
	margin: 50px;
	font-size: 24px;
	letter-spacing:4px;
	color: #696969;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.works {
	width: 220px;
	margin: 20px;
	font-size: 30px;
	color: #696969;
	letter-spacing:4px;
}

#worksbox {
	overflow: hidden;
    max-width: 480px;  
    margin: 0 auto; 
	text-align:center;
	
}

	
.game-t {
	color:#333;
}
.game-t:hover {
	color:#0099cc;
	font-size:30px;
	transition: font-size 0.5s;
}
p {
	margin: 5px 10px;
}
form {
	margin: 10px;
}

/*
#fab-twitter:hover:after {
	display: inline-block;
	content: "";
	background: url(https://yam-lab.com/top/img/TwMeIcon.png) no-repeat;
	width: 250px;
	height: 250px;
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	margin-top: 30%;
	margin-left: -35%;
}
*/

.background2 {
	width: 100%;
	/*background-color:rgba(247,221,51,0.9);*/
	padding: 20px 0;
	margin-top: 100px;
}
.background3 {
	width: 100%;
	/*background-color:rgba(34,133,53,0.9);*/
	padding: 20px 0;
	margin: 20px 0 0 0;
	text-align: center;
}
/*float解除*/
.background3 {
	clear: both;
}
.Copyright {
	text-align: center;
	background-color: #fff;
	margin: 0;
}

/*worksページ*/
.worksMain {
	max-width: 1200px;
	margin: 1rem auto 0;
}


/* /ボタンデザイン/ */
.normal {
  display: inline-block;
  width: 180px;
  text-align: center;
  background-color: #000;
  font-size: 16px;
  line-height: 48px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin: 8px;
}
.normal:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.normal:hover{
  color: #000;
}
.normal:hover:after{
  height: 240%;
  opacity: 1;
}
.normal:active:after{
  height: 340%;
  opacity: 1;
}

/*アンダーバー*/
.under{
	position: relative;
	display: inline-block;
	font-size: 16px;
  }
  
  .under:before{
	position: absolute;
	top: 1.3em;
	left: 0;
	content: "";
	display: inline-block;
	width: 0;
	height: 2px;
	background: #34BBF3;
	transition: 2s;
  }
  
  .under:hover:before{
	width: 100%;
  }
  


/*スマホ*/
@media screen and (max-width:480px){
	#rect {
		top:80px;
		font-size:26px;
		margin-top:100px;
	}
	.absolute2 {
		font-size: 22px;
	}
	.flexBox {
		display: block;
	}
	.top,
	.second,
	.MqUse
	{
		width:85%;
	}
	.background1 {
		width:100%;
	}
	.background2 {
		margin:24px 0;
	}
	#fab-twitter:hover:after {
		width:100px;
		height: 100px;
	}
	
	
}

/*タブレット*/
@media (min-width: 481px) and (max-width: 1000px){
	#rect {
		font-size:32px;
	}
	.absolute2 {
		font-size: 60px;
	}
	.flexBox {
		display: block;
	}
	.top,
	.second,
	.MqUse
	{
		width:85%;
	}
	.background1 {
		width:100%;
	}
	.background2 {
		margin:24px 0;
	}
	#fab-twitter:hover:after {
		width:150px;
		height: 150px;
		margin-top: -150px;
		margin-left: 0;
	}
	
	
}