@charset "utf-8";


body {
	background-color: #ffd300;
}
.center {
	text-align: center;
}
.container{
    margin: 0px auto;
    position:relative;
    min-height: 100%;
}
body > .container {
    height: auto;
}
.main {
	display: block;
	width: 760px;
	margin: 0 auto;
	padding-bottom: 190px;
}
.title-space{
	text-align: center;
	margin: 50px 0 40px;
}
.soft-logo+img{
    width: 500px;
    height: 125px;
}
.soft-logo{
	display: block;
	margin-bottom: 10px;
}
.soft-logo img,.soft-logo{
	margin: 0 auto 15px;
	width: 240px;
	height: 60px;
}
.sub {
	position: absolute;
	width: 1085px;
	height: 350px;
	left: 0;
	right: 0;
	bottom: 201px;
	margin: auto;
	display: block;
	z-index: -1;
}
.subL {
	display: inline;
	width: 70px;
	height: 154px;
	vertical-align: bottom;
	padding: 0 20px 0 80px;
	margin-right: 370px;
}
.subR {
	display: inline;
	width: 170px;
	height: 350px;
	margin-left: 360px;
}
.index.footer {
	width: 100%;
	text-align:center;
	position:absolute;
    bottom:0px;
}
.index.footer p{
	font-size: 14px;
	color: #693E00;
}

.button-space01,.button-space02 {
	text-align: center;
	border-spacing: 20px 8px;
}
.button-space01 li{
	display: inline-block;
	width: 224px;
	vertical-align: middle;
	margin: 5px 2px;
}
.button-space01 li a {
	display: table;
	width: 100%;
}
.btn-01, .btn-05, .btn-06{
	padding: 2px 0 2px;
	box-shadow: rgba(0,0,0,0.15) 0 -4px 0 0 inset,rgba(0,0,0,0.2) 0 2px 2px 0;
	border-radius: 28px;
}
.btn-01 {background: #FF5154;}
.btn-05 {background: #4EB91A;}
.btn-06 {background: #0096DC;}
.btn-01 .anim-icon {
	background: url(../img/ico_index_make01.png) no-repeat;
	background-position: 50% 5px;
	width: 100%;
	height: 82px;
}
.btn-05 .anim-icon {
	background: url(../img/ico_index_robot01.png) no-repeat;
	background-position: 50% 5px;
	width: 100%;
	height: 82px;
}
.btn-06 .anim-icon {
	background: url(../img/ico_index_play01.png) no-repeat;
	background-position: 50% 5px;
	width: 100%;
	height: 82px;
}
.btn-01.select  {
	background: #F13C3F;
	box-shadow: #C32729 0 4px 1px 0 inset, #F13C3F 0 2px 0 0;
	padding: 4px 0 0px;
}
.btn-05.select{
	background: #2CAA22;
	box-shadow: #1E9241 0 4px 1px 0 inset, #2CAA22 0 2px 0 0;
	padding: 4px 0 0px;
}
.btn-06.select{
	background: #3A91BB;
	box-shadow: #0385A6 0 4px 1px 0 inset, #3A91BB 0 2px 0 0;
	padding: 4px 0 0px;
}
.btn-01.select .anim-icon, .btn-05.select .anim-icon, .btn-06.select .anim-icon{
	width: 100%;
	height: 82px;
}
.btn-01.select .anim-icon{
	background: url(../img/ico_index_make02.png) no-repeat;
	background-position: 50% 10px;
}
.btn-05.select .anim-icon{
	background: url(../img/ico_index_robot02.png) no-repeat;
	background-position: 50% 10px;
}
.btn-06.select .anim-icon{
	background: url(../img/ico_index_play02.png) no-repeat;
	background-position: 50% 10px;
}

.button-space02 li {
	display: inline-block;
	width: 224px;
	vertical-align: middle;
	margin: 5px 2px;
}
.button-space02 li a {
	width: 100%;	
	display: block;
	padding: 5px 0;
	border-spacing: 2px 0px;
}
.btn {
	background: #F5F5F5;
	box-shadow: rgba(0,0,0,0.15) 0 -4px 0 0 inset,rgba(0,0,0,0.1) 0 2px 2px 0;
	border-radius: 10px;
}
.btn.select {
	background: #FFFADB;
	box-shadow: #EBD67E 0 2px 1px 0 inset;
}
.btn .btn-icon {
	display: table-cell;
	width: 40px;
	vertical-align: middle;
	padding: 2px 5px 2px;
}
.btn.select .btn-icon{
	padding: 4px 5px 0px;
}
.page-icon {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.page-icon img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 28px;
	height: 28px;
}
.font_btn {
	display: block;
	width: 100%;
	height: 55px;
	vertical-align: middle;
	font-size: 20px;
	color: #fff;
	text-shadow: 0 -2px rgba(9, 77, 128, 0.2);
}
.btn .font_btn_w {
	display: table-cell;
	height: 45px;
	vertical-align: middle;
	color: #555;
	padding: 2px 0 2px 5px;
	text-align: left;
	overflow: hidden;
}
.btn.select .font_btn_w {
	color: #EFAA00;
	padding: 4px 0 0px 5px;
}

.button-space03{
	display: block;
	margin: 40px auto;
	text-align: center;	
}
.button-space03 li.btn{
	display: inline-block;
	width: 210px;
	margin-bottom: 5px;
	background: #555;
	border-radius: 20px;
	text-align: center;
	-webkit-background-size: 10px 10px;
	background-size: 10px 10px;
	background-image: -webkit-gradient( linear, left top, right bottom, from(#545454), color-stop(0.15, #545454), color-stop(0.15, #5b5b5b), color-stop(0.35, #5b5b5b), color-stop(0.35, #545454), color-stop(0.65, #545454), color-stop(0.65, #5b5b5b), color-stop(0.85, #5b5b5b), color-stop(0.85, #545454), color-stop(0.100, #545454), to(#545454) );
    box-shadow: rgba(0,0,0,0.1) 0 2px 2px 0;
}
.button-space03 li.btn.select{
	background: #888;;
}
.button-space03>.btn .font_btn_w,.button-space03>.btn.select .font_btn_w{
	color: #555;
	padding: 1px 0;
	font-size: 12px;
	display: inline;
	color: #fff;
}
span>img{
	height: 1.2rem;
	vertical-align: middle;
}
.button-space03 li a  {
	width: 100%;
    display: block;
	padding: 3px 0px;
}

@media screen and (max-width: 1080px) {
.sub{
    width: 100%;
}
.subR {
    position: absolute;
    bottom: 0;
    right: 0;		
}
.subL {
    position: absolute;
    bottom: 0;
}
}
@media screen and (max-width: 975px) {
.sub{
	display: none;
}		
}
@media screen and (max-width: 768px) {
.main {
	height: auto;
	width: 90%;
	max-width: 380px;
	padding-bottom: 0;
}
.soft-logo+img {
    width: 380px;
    height: 95px;
}
.index.footer {
	position: static;
	height: 174px;
}
.sub {
	display: block;
	position: static;
	bottom: 64px;
	height: 350px;
	width: 246px;
	margin: auto;
}
.subL,.subR {
	position: static;
	margin: 0;
	padding: 0;
}
.title-space{
	margin: 40px 0 20px;
}

.button-space01, .button-space02 {
	border-spacing: 20px 0;
}
.button-space01 li,.button-space02 li{
	display: block;
	width: auto;
	margin-bottom: 10px;
}
.button-space01 li a{
	height: 82px;
	padding: 5px 0;
	border-spacing: 2px 0px;
}
.btn-01 .anim-icon,.btn-05 .anim-icon,.btn-06 .anim-icon {
	width: 110px;
	height: auto;
	display: table-cell;
    background-position: 0px 7px;
}
.btn-01.select .anim-icon, .btn-05.select .anim-icon, .btn-06.select .anim-icon{
	width: 110px;
	height: auto;
	display: table-cell;
    background-position: 0px 10px;
}

.btn .btn-icon {
	padding: 2px 0 2px 5px;
}
.btn.select .btn-icon{
	padding: 4px 0 0px 5px;
}
.font_btn {
	display: table-cell;
	width: auto;
	height: 76px;
    text-align: left;
    padding: 2px 0 2px 10px;
}
.btn.select>.font_btn {
    padding: 4px 0 0px 10px;
	background: #FF0004;
}
}

@media screen and (max-width: 480px) {
.sub{
	margin-top:30px;
	width: 70px;
	height: 154px;
}
.subR{
	display: none;
}
.title-space{
	margin-top: 30px;
}
.soft-logo img,.soft-logo{
	margin: 0 auto 6px;
    width: 180px;
	height: 45px;
}
.soft-logo+img {
    width: 240px;
    height: 60px;
}
}