h3.MyClass03 {
	padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
	color: #000000;/*文字色*/
	background: #FAFAFA;/*背景色*/
	border-left: solid 5px #1D2089;/*左線*/
	border-bottom: solid 3px #d7d7d7;/*下線*/
	font-size: 15pt;
}

div.writing1{
	line-height: 180%;
	letter-spacing:1.8px;
	font-size: 12pt;
}

.btn {
   display: block;
   margin: 20px auto;
   width: 250px;
   height: 60px;
   font-size: 130%;
   text-align: center;
   line-height: 60px;
}
.btn:before,
.btn:after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
}
.btn,
.btn:before,
.btn:after {
   box-sizing: border-box;
   transition: all 0.5s;
}
.btn {
   position: relative;
   perspective: 300px;
}
.btn span {
   display: block;
   position: absolute;
   width: 250px;
   height: 60px;
   border: 2px solid #0069B7;
   text-align: center;
   line-height: 60px;
   box-sizing: border-box;
   transition: all 0.5s;
   pointer-events: none;
}
.btn span:nth-child(1) {
   /* 最初に表示されてる部分のボタン */
   background-color: #fff;
   color: #0069B7;
   transform: rotateX(0deg);
   transform-origin: 50% 50% -30px;
}
.btn span:nth-child(2) {
   /* hover時に表示されるボタン */
   background-color: #0069B7;
   color: #fff;
   transform: rotateX(-90deg);
   transform-origin: 50% 50% -30px;
}
.btn:hover span:nth-child(1) {
    background-color: #0069B7;
    transform: rotateX(90deg);
}
.btn:hover span:nth-child(2) {
   transform: rotateX(0deg);
}

.btn2 {
   display: block;
   margin: 20px auto;
   width: 250px;
   height: 60px;
   font-size: 130%;
   text-align: center;
   line-height: 60px;
}
.btn2:before,
.btn2:after {
   content: "";
   display: block;
   position: absolute;
   z-index: -1;
}
.btn2,
.btn2:before,
.btn2:after {
   box-sizing: border-box;
   transition: all 0.5s;
}
.btn2 {
   position: relative;
   perspective: 300px;
}
.btn2 span {
   display: block;
   position: absolute;
   width: 250px;
   height: 60px;
   border: 2px solid #4D8A00;
   text-align: center;
   line-height: 60px;
   box-sizing: border-box;
   transition: all 0.5s;
   pointer-events: none;
}
.btn2 span:nth-child(1) {
   /* 最初に表示されてる部分のボタン */
   background-color: #fff;
   color: #4D8A00;
   transform: rotateX(0deg);
   transform-origin: 50% 50% -30px;
}
.btn2 span:nth-child(2) {
   /* hover時に表示されるボタン */
   background-color: #4D8A00;
   color: #fff;
   transform: rotateX(-90deg);
   transform-origin: 50% 50% -30px;
}
.btn2:hover span:nth-child(1) {
    background-color: #4D8A00;
    transform: rotateX(90deg);
}
.btn2:hover span:nth-child(2) {
   transform: rotateX(0deg);
}