@charset "utf-8";
body {
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	color: #333;
	background-color: #FFFFFF;
	font-size: 15px;
	line-height: 140%;

}
a {
	color: #06F;
	}
	
a:hover{
	color: #C33;
}

a:hover .over {
	opacity:0.8;
	filter: alpha(opacity=80);
}

#header {
	background-color: #C3D94E;
	height: 70px;
}
#header .head_cont {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	height: 70px;
	position: relative;
}
#header .head_cont_sp {
	display:none;

}
#header .headtext {
	position: absolute;
	right: 0px;
	top: 20px;
	font-size: 19px;
}
#topcontents {
	background-color: #C3D94E;
}
#topimg .s_button {
	position: absolute;
	bottom: 100px;
	left: 214px;
}

#topimg_bg {
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
}

#topimg {
	height: 898px;
	position: relative;
	width: 1180px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/topimg_bg.png);
	background-repeat: no-repeat;
}
#topimg_sp {
	display: none;
}

#contents {
	background-color: #CCCCCC;
}

#contents .contentsbox {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}
#pagebox_sp {
	display: none;
	}
.links {
	text-align: center;
}
.links dl {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
}
.links_sp {
	display: none;
}

.button {
	margin-top: 30px;
}
.button_sp {
	display: none;	
	}
.campaign {
	margin-top: 50px;
}
.campaign_sp {
	display: none;
}
.caracter {
	margin-top: 20px;
}
.caracter_sp {
	display: none;	
	}	
.sns {

}
.page_img {
	margin-top: 30px;
}
.page_img_sp {
	display: none;	
	}
#risk {
	margin-right: auto;
	margin-left: auto;
}
#risk p {
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}
#risk_sp {
	display: none;
}
#company {
	margin-top: 40px;
	text-align: left;
}
#company dd {
	padding-top: 20px;
	padding-left: 20px;
}
.gaiyou  {
	background-color: #ff3b3b;
	text-align: left;
	color: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	font-weight: bold;
	padding-left: 20px;
}
#company_sp {
	display: none;
}

#footer {
	background-color: #ff3b3b;
	height: 120px;
	text-align: center;
	color: #FFF;
	padding-top: 50px;
	font-size: 15px;
}
h2 {
	background-color: #ff3b3b;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #070304;
	font-size: 24px;
	color: #fffefe;
	text-align: left;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	margin-top: 30px;
}


body, html, main {
    /* important */
    height: 100%;
}
.flex-container {
	display:-webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex; 
}



/*totop*/

.page-top
{
	display: none ;
	margin: 0 ;
	padding: 0 ;
}
 
.page-top p
{
	margin: 0;
	padding: 0;
	position: fixed;
	right: 16px;
	bottom: 60px;
}
.move-page-top
{
	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
}
.move-page-top:hover
{
	opacity: 0.85 ;
}
/*新規ボタン*/

/* サイドリンク関連 */
.sidebox_l {
	position: fixed;
	left: 0px;
	top: 100px;
}
.sidebox_l ul li {
	margin-bottom: 3px;
	list-style-type: none;
}

.sidebox_r {
	position: fixed;
	right: 0px;
	top: 105px;
}
.sidebox_r ul li {
	margin-bottom: 3px;
	list-style-type: none;
}

.a_cont_button {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 32px;
	color: #fff;
	line-height: 1.5;
	margin-top: 80px;
	margin-bottom: 30px;
	background-color: #0066CC;
	border-radius: 5px;        /* CSS3草案 */
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
}

.a_cont_button a {
	color: #fff;
	text-decoration: none;
	padding: 16px;
	display: block;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.a_cont_button a:hover {
	opacity: 0.6;
}
.a_cont_button_text {
	display: block;
}




/* ウィンドウ幅が0〜640pxの場合に適用するCSS */
@media screen and (max-width: 640px) {
	#header {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	}
	#header .head_cont {
	display: none;
	}
	#header .head_cont_sp {
	display: block;
	}
	#topimg {
	display: none;
	}
	#topimg_sp {
	display: block;
	}
	#contents .contentsbox {
	width: 100%;
	background-color: #FFF;
	text-align: center;
	}
	.start_b_sp {
	display: block;
	padding: 10px;
	}
	.account_b {
	display: none;	
	}
	.account_b_sp {
	display: block;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 10px;
	}
	.button {
	display: none;	
	}
	.button_sp {
	display: block;
	margin-top: 20px;
	}
	.caracter {
	display: none;	
	}
	.caracter_sp {
	display: block;
	margin-top: 20px;
	}
	.campaign {
	display: none;
	}
	.campaign_sp {
	display: block;
	margin-top: 30px;
	}
	#company {
	display: none;
	}
	#company_sp {
	display: block;
	margin-top: 30px;
	text-align: left;
	}
	#risk {
	display: none;
	}
	#risk_sp p {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: left;
	font-size: 12px;
	}
	#risk_sp {
	display: block;
	}
	#page-top {
	display: none;
	}
	.page-top {
	display: none;
	}
	#move-page-top {
	display: none;
	}
	.move-page-top {
	display: none;
	}
	#pagebox {
	display: none;
	}
	#pagebox_sp {
	display: block;
	}
	.links_sp {
	text-align: center;
	display: block;
	}
	.links_sp dl {
	width: 100%;
	}
	.links {
	display: none;
	}
	.links_sp p {
	padding-top: 15px;
	padding-right: 90px;
	padding-left: 90px;
	}
	.page_img_sp {
	display: block;
	margin-top: 30px;
	}
	.page_img {
	display: none;	
	}
	.sidebox_l {
	display: none;
	}
	.sidebox_r {
	display: none;
	}
	.a_cont_button {
	width: 100%;
	}
	.sp_block{
	display: block;
	}
}


/* ********** */
.onlySP{
	display: none;
}
.lp-comic #header .head_inner{
	width: 970px;
	max-width: 100%;
	margin: 0 auto;
	padding: 10px 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lp-comic #pagebox{
	display: block;
}
.lp-comic #pagebox .pageList img{
	max-width: 100%;
	height: auto;
}
.lp-comic img,
.lp-comic .a_cont_button,
.lp-comic #contents .contentsbox{
	max-width: 100%;
}
.lp-comic #fixed-btn{
	position: sticky;
	left: 0;
	right: 0;
	bottom: 15px;
	z-index: 9;
	margin: 0 auto;
	max-width: 870px;
	width: 94%;
}
.lp-comic #fixed-btn > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lp-comic #fixed-btn p{
	max-width: 49.5%;
}
.lp-comic .page-top p{
	z-index: 99;
}
.lp-comic .contentsbox{
	padding-bottom: 30px;
}
.lp-comic .btnBlock > p{
	margin-bottom: 30px;
}
.lp-comic .btnBlock{
	margin-bottom: 50px;
	overflow: hidden;
}
.lp-comic .btnBlock .stepnagare{
	margin: 30px -3.765%;
}
.lp-comic .btnBlock .a_cont_button {
	margin-top: 0;
}

@media screen and (max-width: 640px) {
	.onlyPC{
		display: none;
	}
	.onlySP{
		display: block;
	}
	.lp-comic #header .head_inner{
		padding-top: 0;
	}
	.lp-comic #fixed-btn p{
		width: 49.5%;
	}
	.lp-comic #fixed-btn p a{
		border-radius: 10px;
		background: #ff0033;
		display: block;
	}
	.lp-comic .btnBlock > p{
		margin-bottom: 15px;
	}
	.lp-comic .btnBlock .a_cont_button{
		margin: 0 auto 15px;
		max-width: 370px;
	}
	.lp-comic .btnBlock .a_cont_button a{
		font-size: 22px;
		padding: 10px 20px;
	}
	.lp-comic .btnBlock .stepnagare{
		margin: 30px 0;
	}
}