@media print, screen and (min-width:640px) {
header{
	text-align:center;
	padding:5px;
}

footer{
	text-align:center;
	color:#ffffff;
	margin:30px 0 10px 0;
}
footer a{
	text-decoration:none;
	color:#ffffff;
}

header img{
	max-width:350px;
}

body {
	width:90%;
	margin:auto;
	background-color: #7A5078;
	background-image: repeating-linear-gradient(45deg,
	#431A66, #431A66 3px,
	transparent 0, transparent 6px);
	font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}


article{
	border-radius:10px;
	background:#D1D1D2;
	padding:20px;
	text-align:center;
	line-height:200%;
}

article img{
	margin:20px auto;
	width:700px;
	max-width:90%;
}

article form{
	margin-bottom:30px;
}

#hide{
	visibility:hidden;
}

.link{
	display:inline-block;
}

.link a{
  background-color:white;
  border:1px solid black;
  border-radius: 5px;
  color: #333333;
  display:inline-block;
  font-size: 14px;
  padding: 14px;
  text-align: center;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  margin:10px 30px;
}

.link a:hover {
  background-color: #999999;
  color: #FFFFFF;
}


.ip input[type="text"]{
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	margin: 0.3em;
	padding: 0.6em;
	transition: 0.3s;
	letter-spacing: 1px;
	color:white;
	border: none;
	border-bottom: 2px solid #1b2538;
	background: transparent;
}

.ip input[type="text"]:focus{
	border-bottom: 2px solid #7fffd4;
	outline: none;
}

.bt input[type="button"]{
	display: inline-block;
	width: 95px;
	padding: 0.6em;
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
	color:#191970;
	font-weight:bold;
	border: 3px solid #69ffb4;
	border-radius: 0.5em;
	box-shadow: 3px 0 0 0 #49b37e, 3px 3px 0 0 #49b37e, 3px 3px 0 0 #49b37e;
	background:white;
}

.bt input[type="button"]:hover{
	transform: translate(-2px, -2px);
	box-shadow: 5px 0 0 0 #49b37e, 5px 5px 0 0 #49b37e, 0 5px 0 0 #49b37e;
	border: 3px solid #69ffb4;
	color: #008b8b;
}

.bt input[type="button"]:active{
	transition-duration: 0.1s;
	-webkit-transform: translate(4px, 4px);
	transform: translate(4px, 4px);
	color: #ffffff;
	border: 3px solid #69ffb4;
	background-color: #69ffb4;
	box-shadow: 1px 0 0 0 #49b37e, 1px 1px 0 0 #49b37e, 0 1px 0 0 #49b37e;
}

}