/* CSS Document */
/*----------------------------ボタン---------------------*/
/*--------------------ベース--------------------------------*/
.button {
	display: inline-block;
	width:24em;
	height: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 100px;
	outline: none;
	font-size: 25px;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#btn,.button,
.button::before,
.button::after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0s;
	transition: all 0s;
}
@media screen and (max-width: 640px) {
	#btn {
	font-size: 10px;
	height:auto;
	line-height: 500%;
	}
}
@media screen and (max-width: 899px) {
	#btn {
	font-size: 12px;
	height: auto;
	line-height: 400%;
	}
}
#btn {
	display: block;
	text-align: left;
	text-decoration: none;
	outline: none;
	line-height: 100px;
	font-size: 20px;
	padding-left:1em;
	font-weight:900;
	height:100px;
	position:relative;
	margin:0 auto 0;
}

#btn::after {
	font-family: 'FontAwesome';
	content: '\f149 ';
	position:absolute;
	top:0%;
	left:90%;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.btn a{
	color:white;
}
.btn::before,
.btn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
#btn,.button,
.button::before,
.button::after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .7s;
	transition: all .7s;
}
/*----------------ボタンの形--------------*/
.marugata {
	border-radius: 50px;
}
.kadomaru{
	border-radius: 10px;
}
/*----------------マウスオーバーアクションＣＳＳ--------------------*/
/*---1. 背景カラーをふわっと変更する---*/
.change {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(144,144,255,1.00)), to(rgba(0,0,229,1.00)));
	background: linear-gradient(to bottom, rgba(158, 206, 255, .6), rgba(0, 101, 204, .6));
	background-color: rgba(31,31,255,1.00);
	-webkit-transition: background-color .7s;
	transition: background-color .7s;
}
.change:hover {
	background-color: rgba(186,255,253,1.00);
}
/*---2. 背景・ボーダー・文字カラーをふわっと変更する---*/
.all_change {
	border: 3px solid #0000ff;
	color: white;
	-webkit-transition: background-color .7s;
	transition: background-color .7s;
}
.all_change:hover {
	border-color: #111111;
	color: #111111;
	background-image:none;
	-webkit-transition: background-color .7s;
	transition: background-color .7s;
	background-color: red;
}
/*-----3. 背景カラーが左右に分かれていく--------*/
.center_open {
	position: relative;
	z-index: 2;
	color:black;
	font-weight:900;
	font-size:24px;
	border-radius: 10px;
}
.center_open:hover {
	color:red;
	background-color: white;
	background-image: linear-gradient(-45deg, rgba(0, 0, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(0, 0, 255, 0.55) 50%, rgba(0, 0, 255, 0.55) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(0, 0, 255, 0.55) 25%, transparent 25%, transparent 50%,  rgba(0, 0, 255, 0.55) 50%, rgba(0, 0, 255, 0.55) 75%, transparent 75%, transparent 100%);
	background-size: 15px 15px;
	background-size: 15px 15px;
}
.center_open::before,
.center_open::after {
	top: 0;
	width: 50%;
	height: 100%;
}
.center_open::before {
	right: 0;
}
.center_open::after {
	left: 0;
}
.center_open:hover::before,
.center_open:hover::after {
	width: 0;
	background-color: white;
}
/*-----4. 背景カラーが上下に分かれていく--------*/
.middle_open {
	position: relative;
	z-index: 2;
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 100px;
}
.middle_open:hover {
	background-color: #fff;
	border-color: #59b1eb;
	color: #59b1eb;
}
.middle_open::before,
.middle_open::after {
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #333;
}
.middle_open::before {
	top: 0;
}
.middle_open::after {
	bottom: 0;
}
.middle_open:hover::before,
.middle_open:hover::after {
	height: 0;
	background-color: #59b1eb;
}
/*-----5. 文字間隔を広げる--------*/
.text_spread {
	background-color: #333;
	color: #fff;
}
.text_spread:hover {
	letter-spacing: 5px;
	background-color: #333;
	color: #fff;
}
/*-----7. ボーダースタイルを変更する--------*/
.bos_change {
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
	transition: border-style 2s;
}
.bos_change:hover {
	 border-style: dashed;
}
/*-----8. 内側にブロックを表示する--------*/
.inseide_block {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
}
.inseide_block::after {
	top: 4px;
	left: 4px;
	width: 488px;
	height: 88px;
	border: 2px solid #333;
	opacity: 0;
}
.inseide_block:hover::after {
	opacity: 1;
}
/*-----9. 上から背景がするっと降りてくる--------*/
.topto_bg {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
	overflow: hidden;
}
.topto_bg:hover {
	color: #fff;
}
.topto_bg::after {
	top: -100%;
	width: 100%;
	height: 100%;
}
.topto_bg:hover::after {
	top: 0;
	background-color: #333;
}
/*-----10. 左上から背景がするっと降りてくる--------*/
.lefttopto_bg {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
	overflow: hidden;
}
.lefttopto_bg:hover {
	color: #fff;
}
.lefttopto_bg::after {
	top: -100%;
	left: -100%;
	width: 100%;
	height: 100%;
}
.lefttopto_bg:hover::after {
	top: 0;
	left: 0;
	background-color: #333;
}
/*-----11. 奥から背景をふわっと表示させる #1--------*/
.backto_bg {
	position: relative;
	z-index: 2;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(144,144,255,1.00)), to(rgba(0,0,229,1.00)));
	background: linear-gradient(to bottom, rgba(158, 206, 255, .6), rgba(0, 101, 204, .6));
	background-color: rgba(31,31,255,1.00);
	-webkit-transition: background-color .7s;
	transition: background-color .7s;
	border: 2px solid #333;
	color: white;
	line-height: 100px;
	overflow: hidden;
}
.backto_bg:hover {
	color: #111;
}
.backto_bg::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}
.backto_bg:hover::after {
	background-color: rgba(186,255,253,1.00);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.backto_bg::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
/*-----12. 奥から背景をふわっと表示させる #2--------*/
.backto_bg2 {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
	overflow: hidden;
}
.backto_bg2:hover {
	color: #fff;
}
.backto_bg2::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.backto_bg2:hover::after {
	-webkit-transform: scale(2) rotate(180deg);
	transform: scale(2) rotate(180deg);
	background: #333;
}
/*-----13. 上からパタッと要素が落ちてくる--------*/
.toptobatan {
	position: relative;
	z-index: 2;
	border: 2px solid #333;
	color: #333;
	line-height: 100px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.toptobatan:hover {
	color: #fff;
}
.toptobatan::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center top;
	transform-origin: center top;
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	opacity: 0;
}
.toptobatan:hover::after {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 1;
}
/*-----14. 要素がパタッと開く--------*/
.batanto_open {
	position: relative;
	z-index: 2;
	border: 2px solid #333;
	color: #fff;
	line-height: 100px;
	-webkit-perspective: 300px;
	perspective: 300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.batanto_open:hover {
	color: #333;
}
.batanto_open::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}
.batanto_open:hover::after {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}
/*-----15. キューブ状にクルッと回転する--------*/
.cube_spin {
	display: inline-block;
	width: 500px;
	height: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.cube_spin::before,
.cube_spin::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.cube_spin,
.cube_spin::before,
.cube_spin::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.cube_spin {
	position: relative;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.cube_spin span {
	display: block;
	position: absolute;
	width: 500px;
	height: 100px;
	border: 2px solid #333;
	text-align: center;
	line-height: 100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	pointer-events: none;
}
.cube_spin span:nth-child(1) {
	background-color: #333;
	color: #fff;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.cube_spin span:nth-child(2) {
	background-color: #fff;
	color: #333;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -30px;
	-moz-transform-origin: 50% 50% -30px;
	transform-origin: 50% 50% -30px;
}
.cube_spin:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.cube_spin:hover span:nth-child(2) {
	background-color: #333;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

/*-----16.ボタンにカーソルを合わせるとキラリと光る---------*/
.shiney {
	display: inline-block;
	position: relative;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	line-height: 100px;
	font-size:24px;
	font-weight:900;
	margin: 0px auto 0px;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	background-image: -webkit-linear-gradient(270deg,rgba(255,194,194,1.00) 0%,rgba(255,9,9,1.00) 40.41%,rgba(255,0,0,1.00) 98.96%);
	background-image: linear-gradient(180deg,rgba(255,194,194,1.00) 0%,rgba(255,9,9,1.00) 40.41%,rgba(255,0,0,1.00) 98.96%);
}
.shiney:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100px;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -8em;
	opacity:0;
}
.shiney:hover {
  background-color: #2194E0;
  color: #fff;
  border-bottom: 4px solid #1977b5;
  background-image:none;
}
.shiney:hover:before {
  animation: sheen 0.5s ease-in-out; 
animation-iteration-count: 1; 
-webkit-animation: sheen 0.5s ease-in-out; 
-webkit-animation-iteration-count: 1; 
opacity:0;
}
@-webkit-keyframes sheen {
  0% {
    -webkit-transform: skewY(-45deg) translateX(0);
            transform: skewY(-45deg) translateX(0);
			opacity:1;
  }
  100% {
    -webkit-transform: skewY(-45deg) translateX(12.5em);
            transform: skewY(-45deg) translateX(12.5em);
			opacity:0;
  }
}
@keyframes sheen {
  0% {
    -webkit-transform: skewY(-45deg) translateX(0);
            transform: skewY(-45deg) translateX(0);
  }
  100% {
    -webkit-transform: skewY(-45deg) translateX(12.5em);
            transform: skewY(-45deg) translateX(12.5em);
  }
}
.shiney:active {
	border-bottom:none;
}
@media screen and (max-width: 640px) {
	.shiney {
	width: 100%;
	height: auto;
	font-size:100%;
	}
}

/*---------テキストアニメーション用ボタンwith300角丸背景色赤---------*/

/*#btn {
    padding: 30px 30px 30px 50px;
	width:600px;
	height:90px;
    font-size: 30px;
    text-align: left;
    border-radius: 10px;
	display:block;
	text-decoration:none;
	line-height:30px;
	position:relative;
	margin:0 auto;
	overflow: hidden;
}
#btn a{
    padding: 30px 30px 30px 50px;
	width:600px;
	height:90px;
}*/

.test {
	float:right;
}

.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.sample3-2::before{
left: 30px;
box-sizing: border-box;
width: 30px;
height: 80px;
border-right: 30px solid transparent;
border-left: 30px solid #7a0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
.sample3-2::after{
left: 0;
width: 30px;
height: 56px;
border-left: 30px solid #7a0;
}