body{
  background-color: #F8F8F8;
  margin: auto;
  color: #202223;
  font-family: sans-serif;
}

header{
  margin: -90px 0 0 0;
  height: 150px;
  background: -webkit-linear-gradient(82deg, rgb(33, 142, 187), rgb(31, 16, 107));
  background: linear-gradient(82deg, rgb(33, 142, 187), rgb(31, 16, 107));
}
h1{
  text-align: center;
  font-size: 48px;
  color: #F8F8F8; 
}
h2{
position: relative;
padding: 0.5em;
background: #578bbf;
color: white;
}

h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}
h3 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
}

h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
width: 0;
height: 0;
}

textarea{
  width: 90%;
  font-family : inherit;
  font-size   : 100%;
}

#responsive{
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
}
.area{
  text-align: center;
  width: 100%;
}
.area .input{
  float: left;
  width: 48%;
  
}
.area .output{
  float: right;
  width: 48%;
}

/*以下 https://copypet.jp/417/ から引用*/
a.cp_btn {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.8em;
	text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
	text-decoration: none;
	color: #fff;
	border:1px solid #578bbf;
	background: #578bbf;
	overflow: hidden;
	z-index: 1 !important;
}
a.cp_btn:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
}
a.cp_btn:hover {
	color: #da3c41;
}
a.cp_btn:hover:after {
	height: 250%;
	opacity: 1;
}
a.cp_btn:active:after {
	height: 350%;
	opacity: 1;
}