/*=================================================
 * CSS for PC
 * ================================================= */

/***************************************
TITLE
****************************************/

.h2_title{
	position: relative;
	font-weight: normal;
	font-family: "Rounded Mplus 1c";
	font-size: 40px;
	font-weight: 300;
	line-height: 50px;
	color: #d1ab59;
	background: #1f1f1f;
	padding: 45px 0 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.h2_title span{
	position: relative;
	display: inline-block;
	vertical-align: top;
	min-width: 130px;
	font-family: "FontA";
	font-size: 16px;
	line-height: 24px;
	color: #000;
	margin-top: 10px;
	padding: 0 10px;
	background: #d1ab59;
	text-align: center;
	border-radius: 12px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.h2_title span:before,
.h2_title span:after{
	content: '';
	display: inline-block;
	width: 20px;
	border-bottom: 1px solid #d1ab59;
}

.h2_title span:before{
	position: absolute;
	top: 11px;
	left: -20px;
}
.h2_title span:after{
	position: absolute;
	top: 11px;
	right: -20px;
}


/***************************************
MAIN CONTENTS
****************************************/



/***************************************
COMMON STYLE
****************************************/

/***** next *****/

.next{
	font-size: 0;
	line-height: 0;
	text-align: center;
	padding: 20px 0 0 0;
}

.next span,
.next a{
	display: inline-block;
	width: 45px;
	padding: 0 0;
	font-size: 20px;
	line-height: 45px;
	margin: 0 5px;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.next span{
	font-weight: bold;
	color: #333;
	background: #d1ab59;
}

.next a{
	color: #333;
	background: #fff;
}

.next a:hover{
	background: #d1ab59;
	text-decoration: none;
}


/***** buttun *****/

.bt_bg{
	font-size: 0;
	line-height: 0;
	padding: 50px 0;
	background: #f5f5f5;
}

.bt_rslt{
	padding: 50px 0;
	background: #fff;
	border-top: 1px solid #d5d9dd;
}

.bt{
	position: relative;
	display: inline-block;
	width: 360px;
	font-size: 16px;
	font-weight: 300;
	font-family		: Meiryo, "MS PGothic", Osaka, sans-serif;
	line-height: 30px;
	text-align: center;
	padding: 15px 0;
	color: #d1ab59;
	background: #1f1f1f;
	border: none;
	border-radius: 0;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.bt_rslt .bt{
	width: 700px;
	font-size: 30px;
	font-family	: "FontA";
	line-height: 40px;
	text-align: center;
	background: url(../img/all/bt_rslt.png) no-repeat calc(50% - 110px) 50% #1f1f1f;
	padding: 30px 0 30px 50px;
	border-radius: 50px;
}

.bt:hover{
	color: #1f1f1f;
	background: #d1ab59;
	text-decoration: none;
}
.bt_rslt .bt:hover{
	background: url(../img/all/bt_rslt_on.png) no-repeat calc(50% - 110px) 50% #d1ab59;
}

.form_bt span{
	position: relative;
	z-index: 1;
	display: inline-block;
}

.form_bt a,
.form_bt input{
	display: inline-block;
	vertical-align: top;
	width: 350px;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	line-height: 40px;
	color: #d1ab59;
	background: #1f1f1f;
	border-radius: 35px;
	text-transform: uppercase;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.form_bt a:hover,
.form_bt input:hover{
	text-decoration: none;
	color: #1f1f1f;
}

.form_bt span:before,
.form_bt span:after {
	content: '';
	background: #d1ab59;
	border-radius: 5px;
	position: absolute;
	z-index: -1;
	-webkit-transition	: 0.3s ease-in-out;
	-moz-transition	: 0.3s ease-in-out;
	-o-transition	: 0.3s ease-in-out;
	transition		: 0.3s ease-in-out;
}



.btgi{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 350px;
	font-size: 22px;
	font-family: "Rounded Mplus 1c";
	font-weight: 500;
	line-height: 30px;
	text-align: center;
	padding: 20px 0;
	color: #1f1f1f;
	background: #d1ab59;
	border: none;
	border-radius: 35px;
	box-shadow:0px 0px 0px 3px #ad8a3e inset;
	-moz-box-shadow:0px 0px 0px 3px #ad8a3e inset;
	-webkit-box-shadow:0px 0px 0px 3px #ad8a3e inset;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.btgi:hover{
	color: #d1ab59;
	background: #1f1f1f;
	text-decoration: none;
}
.btgi span{
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
	line-height: 30px;
	margin: -4px 0 0 0;
}



.bt_res{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 350px;
	font-size: 22px;
	font-family: "Rounded Mplus 1c";
	font-weight: 500;
	line-height: 30px;
	text-align: center;
	padding: 20px 0;
	color: #ffffff;
	background: linear-gradient(to right, #ff6c00 0%, #ffba00 50%, #ff6c00 100%);
	background-size: 200% auto;
	border: none;
	border-radius: 5px;
	z-index: 2;
	will-change: transform, filter;
	transform-style: preserve-3d;
	transition: all .3s ease-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.bt_res::before {
	content: "";
	height: 12px;
	display: inline-block;
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: -5px;
	z-index: -1;
	border-radius: 50px;
	opacity: 0.8;
	filter: blur(10px);
	background: linear-gradient(to right, #ff6c00 0%, #ffba00 50%, #ff6c00 100%);
	background-size: 200% auto;
	transform-style: preserve-3d;
	transition: all .3s ease-out;
}
.bt_res:hover::before {
	bottom: 0;
	filter: blur(0px);
	opacity: 0;
	background-position: right center;
}

.bt_res:hover {
	background-position: right center;
	text-decoration: none;
}

.bt_res span{
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
	line-height: 30px;
	margin: -4px 0 0 0;
}



.bt_pink{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 350px;
	font-size: 22px;
	font-family: "Rounded Mplus 1c";
	font-weight: 500;
	line-height: 30px;
	text-align: center;
	padding: 20px 0;
	color: #ffffff;
	background: linear-gradient(to right, #ff3399 0%, #ff57fd 50%, #ff3399 100%);
	background-size: 200% auto;
	border: none;
	border-radius: 5px;
	z-index: 2;
	will-change: transform, filter;
	transform-style: preserve-3d;
	transition: all .3s ease-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.bt_pink::before {
	content: "";
	height: 12px;
	display: inline-block;
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: -5px;
	z-index: -1;
	border-radius: 50px;
	opacity: 0.8;
	filter: blur(10px);
	background: linear-gradient(to right, #ff3399 0%, #ff57fd 50%, #ff3399 100%);
	background-size: 200% auto;
	transform-style: preserve-3d;
	transition: all .3s ease-out;
}
.bt_pink:hover::before {
	bottom: 0;
	filter: blur(0px);
	opacity: 0;
	background-position: right center;
}

.bt_pink:hover {
	background-position: right center;
	text-decoration: none;
}

.bt_pink span{
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
	line-height: 30px;
	margin: -4px 0 0 0;
}



/***************************************
ROLLOVER
****************************************/

.fade{
	display: inline-block;
	padding: 0;
}

.fade{
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
}

.fade:hover,
.fade:hover{
	opacity: 0.8;
	filter: alpha(opacity=80);
}


/***************************************
GOOGLE FONT
****************************************/

@font-face {
	font-family: FontA;
	src: url('../font/FjallaOne-Regular.ttf') format("truetype");
}


/***** font *****/

footer #copyright,
.font1{
	font-family: FontA;
}

.maru{	font-family: "Rounded Mplus 1c";}
.min{	font-family: "Sawarabi Mincho";}



.anchor{
	display: block;
	padding-top: 160px;
	margin-top: -160px;
}



/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {

	.anchor{
		display: block;
		padding-top: 80px;
		margin-top: -80px;
	}


	/***************************************
	TITLE
	****************************************/
	.h2_title{
		position: relative;
		font-weight: 300;
		font-size: 32px;
		line-height: 32px;
		padding: 18px 0 5px 0;
		border-top: 5px solid #313131;
	}
	.h2_title span{
		position: relative;
		display: inline-block;
		vertical-align: top;
		min-width: 100px;
		font-size: 15px;
		line-height: 18px;
		text-align: center;
		border-radius: 9px;
		margin: 8px 0 0 0;
	}
	.h2_title span:before,
	.h2_title span:after{
		top: 8px;
		width: 20px;
	}

	/***************************************
	MAIN CONTENTS
	****************************************/


	/***************************************
	COMMON STYLE
	****************************************/

	/***** next *****/
	.next{
		padding: 10px 0 15px 0;
	}
	.next span,
	.next a{
		display: inline-block;
		width: 40px;
		padding: 0 0;
		font-size: 20px;
		line-height: 40px;
		margin: 0 2.5px 5px 2.5px;
	}

	/***** buttun *****/
	.bt_bg{
		padding: 10px;
	}
	.bt{
		position: relative;
		display: block;
		width: auto;
		font-size: 14px;
		line-height: 30px;
		padding: 10px 0;
	}
	.bt_rslt{
		padding: 10px;
	}
	.bt_rslt .bt{
		display: block;
		width: auto;
		font-size: 18px;
		font-family	: "FontA";
		line-height: 20px;
		text-align: center;
		background: url(../img/all/bt_rslt.png) no-repeat calc(50% - 65px) 50% #1f1f1f;
		-webkit-background-size: 20px auto;
		background-size: 20px auto;
		padding: 25px 0 25px 25px;
		border-radius: 35px;
	}
	.bt_rslt .bt:hover{
		background: url(../img/all/bt_rslt_on.png) no-repeat calc(50% - 65px) 50% #d1ab59;
		-webkit-background-size: 20px auto;
		background-size: 20px auto;
	}
	.form_bt span{
		display: block;
	}
	.form_bt a,
	.form_bt input{
		display: block;
		width: 100%;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 46px;
	}


	.btgi,
	.dsc_bt .btgi,
	.bt_rslt .btgi{
		width: 100%;
		max-width: 300px;
		font-size: 22px;
		line-height: 30px;
		padding: 15px 0;
		border-radius: 30px;
	}
	.bt_res,
	.bt_pink{
		width: 100%;
		max-width: 300px;
		font-size: 22px;
		line-height: 30px;
		padding: 15px 0;
	}
	.bt_rslt .btgi span,
	.dsc_bt .btgi span,
	.bt_res span,
	.bt_pink span{
		font-size: 30px;
		line-height: 30px;
		margin: -5px 3px 0 0;
	}


	/***************************************
	COMMON STYLE (SP ONLY)
	****************************************/



}