@charset "UTF-8";
/* CSS Document */


/*PC用スタイル*/
@media (min-width: 992px) {
/*01*/
.btn01{
	font-size:20px;
	color:#fff;
	padding:10px 40px;
	background:#555;
	border:1px solid #444;
}
.btn01:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn01:focus{
	color:#fff;
	text-decoration:none;
}
/*02*/
.btn02{
	font-size:30px;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:bold;
	text-shadow: 1px 1px 2px #1C1B1A;
	width:100%;
	color:#fff;
	padding:20px 40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fccd32+0,fc7d0f+50,fc6c19+51,f74611+100 */
	background: rgb(252,205,50); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(252,205,50) 0%, rgb(252,125,15) 50%, rgb(252,108,25) 51%, rgb(247,70,17) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccd32', endColorstr='#f74611',GradientType=0 ); /* IE6-9 */
	border-radius:15px;
}
.btn02:hover{
	text-decoration:none;
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9d766+0,fcb50f+50,fca519+51,f97c07+100 */
	background: rgb(249,215,102); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(249,215,102) 0%, rgb(252,181,15) 50%, rgb(252,165,25) 51%, rgb(249,124,7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d766', endColorstr='#f97c07',GradientType=0 ); /* IE6-9 */
}
.btn02:focus{
	color:#fff;
	text-decoration:none;
}
/*03*/
.btn03{
	font-size:20px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
}
.btn03:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn03:focus{
	text-decoration:none;
}
/*04*/
.btn04{
	font-size:20px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
	border-radius:5px;
}
.btn04:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn04:focus{
	text-decoration:none;
}
/*05*/
.btn05{
	font-size: 25px;
    padding: 20px 100px;
	position: relative;
	background-color: #158888;
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #116565;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn05:hover {
	background-color: #31c8aa;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 0 #23a188;
}
.btn05:active {
	top: 3px;
	box-shadow: none;
}
.btn05:focus {
	text-decoration: none;
	color:#fff;
}
/*06*/
.btn06 {
	font-size: 20px;
	padding: 10px 40px;
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
	background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn06:hover {
	border:1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
	color: #fff;
	text-decoration: none;
}
.btn06:active {
	background: #1a92c2;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.btn06:focus {
	text-decoration: none;
	color:#fff;
}
/*07*/
.btn07 {
	font-size: 20px;
	padding: 10px 40px;
	position: relative;
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0px 1px 0px #f56778;
}
.btn07,
.btn07:hover {
	border-bottom: 4px solid #cb5462;
	background-color: #f56778;
	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
	background-image: linear-gradient(to bottom, #f997b0, #f56778);
	box-shadow: inset 1px 1px 0 #fbc1d0;
	text-decoration: none;
}
.btn07::before,
.btn07::after {
	bottom: -1px;
	left: -1px;
	width: 200px;
	height: 50px;
	border: 1px solid #ee8090;
	border-bottom: 1px solid #b84d5a;
	border-radius: 4px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
}
.btn07::before {
	height: 48px;
	bottom: -4px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}
.btn07:hover {
	background: #f56778;
	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
	background-image: linear-gradient(to bottom, #f56778, #f997b0);
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
.btn07:active {
	bottom: -4px;
	margin-bottom: 4px;
	border: none;
	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.btn07:active::before,
.btn07:active::after {
	border: none;
	box-shadow: none;
}
.btn07:focus {
	text-decoration: none;
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
}


/*タブレット用スタイル*/
@media (min-width: 768px) and (max-width: 991px) {
/*01*/
.btn01{
	font-size:20px;
	color:#fff;
	padding:10px 40px;
	background:#555;
	border:1px solid #444;
}
.btn01:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn01:focus{
	color:#fff;
	text-decoration:none;
}
/*02*/
.btn02{
	font-size:20px;
	width:100%;
	color:#fff;
	padding:20px 20px;
	border-radius:15px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fccd32+0,fc7d0f+50,fc6c19+51,f74611+100 */
	background: rgb(252,205,50); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(252,205,50) 0%, rgb(252,125,15) 50%, rgb(252,108,25) 51%, rgb(247,70,17) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccd32', endColorstr='#f74611',GradientType=0 ); /* IE6-9 */
}
.btn02:hover{
	text-decoration:none;
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9d766+0,fcb50f+50,fca519+51,f97c07+100 */
	background: rgb(249,215,102); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(249,215,102) 0%, rgb(252,181,15) 50%, rgb(252,165,25) 51%, rgb(249,124,7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d766', endColorstr='#f97c07',GradientType=0 ); /* IE6-9 */
}
.btn02:focus{
	color:#fff;
	text-decoration:none;
}
/*03*/
.btn03{
	font-size:20px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
}
.btn03:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn03:focus{
	text-decoration:none;
}
/*04*/
.btn04{
	font-size:20px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
	border-radius:5px;
}
.btn04:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn04:focus{
	text-decoration:none;
}
/*05*/
.btn05{
	font-size:20px;
	padding:20px 60px;
	position: relative;
	background-color: #158888;
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #116565;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn05:hover {
	background-color: #31c8aa;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 0 #23a188;
}
.btn05:active {
	top: 3px;
	box-shadow: none;
}
.btn05:focus {
	text-decoration: none;
	color:#fff;
}
/*06*/
.btn06 {
	font-size: 20px;
	padding: 10px 40px;
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
	background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn06:hover {
	border:1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
	color: #fff;
	text-decoration: none;
}
.btn06:active {
	background: #1a92c2;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.btn06:focus {
	text-decoration: none;
	color:#fff;
}
/*07*/
.btn07 {
	font-size: 20px;
	padding: 10px 40px;
	position: relative;
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0px 1px 0px #f56778;
}
.btn07,
.btn07:hover {
	border-bottom: 4px solid #cb5462;
	background-color: #f56778;
	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
	background-image: linear-gradient(to bottom, #f997b0, #f56778);
	box-shadow: inset 1px 1px 0 #fbc1d0;
	text-decoration: none;
}
.btn07::before,
.btn07::after {
	bottom: -1px;
	left: -1px;
	width: 200px;
	height: 50px;
	border: 1px solid #ee8090;
	border-bottom: 1px solid #b84d5a;
	border-radius: 4px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
}
.btn07::before {
	height: 48px;
	bottom: -4px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}
.btn07:hover {
	background: #f56778;
	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
	background-image: linear-gradient(to bottom, #f56778, #f997b0);
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
.btn07:active {
	bottom: -4px;
	margin-bottom: 4px;
	border: none;
	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.btn07:active::before,
.btn07:active::after {
	border: none;
	box-shadow: none;
}
.btn07:focus {
	text-decoration: none;
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
}


/*スマホ用スタイル*/
@media screen and (max-width: 767px){
/*01*/
.btn01{
	font-size:16px;
	color:#fff;
	padding:10px 40px;
	background:#555;
	border:1px solid #444;
}
.btn01:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn01:focus{
	color:#fff;
	text-decoration:none;
}
/*02*/
.btn02{
	font-size:13px;
	font-weight:bold;
	padding: 15px 0px;
	width:100%;
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fccd32+0,fc7d0f+50,fc6c19+51,f74611+100 */
	background: rgb(252,205,50); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(252,205,50) 0%, rgb(252,125,15) 50%, rgb(252,108,25) 51%, rgb(247,70,17) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(252,205,50) 0%,rgb(252,125,15) 50%,rgb(252,108,25) 51%,rgb(247,70,17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccd32', endColorstr='#f74611',GradientType=0 ); /* IE6-9 */
	border-radius:8px;
}
.btn02:hover{
	text-decoration:none;
	color:#fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9d766+0,fcb50f+50,fca519+51,f97c07+100 */
	background: rgb(249,215,102); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(249,215,102) 0%, rgb(252,181,15) 50%, rgb(252,165,25) 51%, rgb(249,124,7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(249,215,102) 0%,rgb(252,181,15) 50%,rgb(252,165,25) 51%,rgb(249,124,7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d766', endColorstr='#f97c07',GradientType=0 ); /* IE6-9 */
}
.btn02:focus{
	color:#fff;
	text-decoration:none;
}
/*03*/
.btn03{
	font-size:16px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
}
.btn03:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn03:focus{
	text-decoration:none;
}
/*04*/
.btn04{
	font-size:16px;
	color:#555;
	padding:10px 40px;
	background:#fff;
	border:1px solid #555;
	border-radius:5px;
}
.btn04:hover{
	text-decoration:none;
	color:#fff;
	background:#333;
	border:1px solid #000;
}
.btn04:focus{
	text-decoration:none;
}
/*05*/

.btn05{
	font-size:16px;
	padding:20px 30px;
	position: relative;
	background-color: #158888;
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #116565;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn05:hover {
	background-color: #31c8aa;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 0 #23a188;
}
.btn05:active {
	top: 3px;
	box-shadow: none;
}
.btn05:focus {
	text-decoration: none;
	color:#fff;
}
/*06*/
.btn06 {
	font-size: 16px;
	padding: 10px 40px;
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
	background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
	border-radius: 4px;
	color: #fff;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.btn06:hover {
	border:1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
	color: #fff;
	text-decoration: none;
}
.btn06:active {
	background: #1a92c2;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.btn06:focus {
	text-decoration: none;
	color:#fff;
}
/*07*/
.btn07 {
	font-size: 20px;
	padding: 10px 40px;
	position: relative;
	border-radius: 4px;
	color: #fff;
	line-height: 50px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0px 1px 0px #f56778;
}
.btn07,
.btn07:hover {
	border-bottom: 4px solid #cb5462;
	background-color: #f56778;
	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
	background-image: linear-gradient(to bottom, #f997b0, #f56778);
	box-shadow: inset 1px 1px 0 #fbc1d0;
	text-decoration: none;
}
.btn07::before,
.btn07::after {
	bottom: -1px;
	left: -1px;
	width: 200px;
	height: 50px;
	border: 1px solid #ee8090;
	border-bottom: 1px solid #b84d5a;
	border-radius: 4px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: none;
	transition: none;
}
.btn07::before {
	height: 48px;
	bottom: -4px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 1px 1px 0px #bfbfbf;
}
.btn07:hover {
	background: #f56778;
	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
	background-image: linear-gradient(to bottom, #f56778, #f997b0);
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
.btn07:active {
	bottom: -4px;
	margin-bottom: 4px;
	border: none;
	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.btn07:active::before,
.btn07:active::after {
	border: none;
	box-shadow: none;
}
.btn07:focus {
	text-decoration: none;
	color: #913944;
	text-shadow: 0px 1px 0px #f9a0ad;
}
}
