h2 {width: 95%; max-width: 740px; margin: 0 auto;}
h2 p { margin: 0; text-align: left;}
.h2-side { display: table-cell; vertical-align: top; text-align: left; width: 56px; max-width: 56px;}
.h2-main { display: table-cell; vertical-align: top; text-align: left; padding-top: 4px;}
h2 span a{font-size: 14px; color: #fff;}


h3{font-size:30px; width: 95%; max-width: 730px; margin: 0 auto 10px auto; border-bottom: solid 1px #c6264a; padding-top: 10px;}
h3 span{font-size: 16px; color: #e4748d; display:inline-block; margin-left: 5px;}
h3 strong{color: #fff; display:inline-block; font-size: 35px; font-weight: bold; background:#c6264a; padding: 0 10px; margin-right: 3px; margin-bottom: 3px;}

h3.h3_lead{font-size:30px; width: 95%; max-width: 730px; margin: 0 auto 10px auto; border-bottom: solid 1px #501981; padding-top: 10px;}
h3.h3_lead span{font-size: 16px; color: #994fdd; display:inline-block; margin-left: 5px;}
h3.h3_lead strong{color: #fff; display:inline-block; font-size: 35px; font-weight: bold; background:#501981; padding: 0 10px; margin-right: 3px; margin-bottom: 3px;}



.ss_box{width: 95%; max-width: 730px; margin: 0 auto 10px auto;}
.ss_box img{width: 100%;}
.ss_box li{width: 48.5%; margin: 10px 0.5%; float: left; border: solid 1px #fff;}
.ss_box li:nth-child(even){float: right;}

.lead{font-size:18px; width: 95%; max-width: 730px; margin: 0 auto;}

.lead_cp{width: 95%; max-width: 730px; margin: 0 auto 30px auto;}

.lead_cp strong{color: #ba8ec8;}


.ss_box2{width: 95%; max-width: 730px; margin: 0 auto 10px auto;}
.ss_box2 img{width: 100%;}
.ss_box2 li{width: 32%; margin: 10px 0.5%; float: left; border: solid 1px #fff;}
.ss_box2 li:nth-child(even+1){float: right;}

.ss_box3{width: 95%; max-width: 730px; margin: 0 auto 10px auto;}
.ss_box3 img{width: 100%;}
.ss_box3 li{width: calc(24% - 2px); margin: 10px 0.5%; float: left; border: solid 1px #fff;}



.menu{width: 95%; max-width: 675px; margin: 0 auto; padding-top: 10px;}
.menu li{float: left; width: 48%; padding: 3px 0.50%; max-width: 161px;}
.menu li img{width: 100%;}
.menu a{padding-top: 32%; display: block; background-position: 0 0;}
.menu a:hover{background-position: 100% 0;}

.menu_basic1 a{ max-width: 161px; background: url(../images/basic/btn_menu1.png) no-repeat left top; -moz-background-size:200% auto; background-size:200% auto;}
.menu_basic2 a{ max-width: 161px; background: url(../images/basic/btn_menu2.png) no-repeat left top; -moz-background-size:200% auto; background-size:200% auto;}
.menu_basic3 a{ max-width: 161px; background: url(../images/basic/btn_menu3.png) no-repeat left top; -moz-background-size:200% auto; background-size:200% auto;}
.menu_basic4 a{ max-width: 161px; background: url(../images/basic/btn_menu4.png) no-repeat left top; -moz-background-size:200% auto; background-size:200% auto;}

.basic1 .menu_basic1 a{background-position: 100% 0;}
.basic2 .menu_basic2 a{background-position: 100% 0;}
.basic3 .menu_basic3 a{background-position: 100% 0;}
.basic4 .menu_basic4 a{background-position: 100% 0;}


.update-icon{width: 95%; max-width: 730px; margin: 0 auto 0 auto;}


/* dlc */
.charalist{width: 95%; max-width: 730px; margin: 0 auto 0 auto;}
.charalist h4{border-bottom: solid 1px #fff; margin-bottom: 5px; font-size: 20px;}

.charalist-box{padding-bottom: 16px;}
.charalist00{color: #ca4a6a; }
.charalist01{color: #8187d8; }
.charalist02{color: #78b8f8; }
.charalist03{color: #b82b18; }
.charalist04{color: #e0b048; }
.charalist05{color: #80e088; }
.charalist06{color: #8fb1ab; }
.charalist07{color: #bb76c2; }
.charalist08{color: #8787be; }
.charalist09{color: #e0d868; }

label{border: solid 1px #c6264a; padding: 5px 10px;  background:#c6264a; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
input[type="checkbox"].on-off{ display: none;}
input[type="checkbox"].on-off + div.indate{ height: 0; overflow: hidden;}
input[type="checkbox"].on-off:checked + div.indate{ height: auto;}
.info-box{width: 95%; max-width: 700px; margin: 0 auto 20px auto; text-align: center;}
.info-box li{float: left; border: solid 1px #c6264a; width: calc(33% - 2px);}
.info-box a{color: #c6264a; display: block; width: 100%;}
.info-box a:hover{background: #c6264a; color: #fff;}

.card-box{width: 100%; max-width: 700px; margin-bottom: 10px;}
.card-box th, .card-box td{padding: 5px; border: solid 1px #fff; text-align: left;}
.card-box td{text-align: center; width: 150px;}

.card-box tr:nth-child(even) { background:#490e1c;}
.card-box tr:nth-child(odd) {background:#000;}

th.setcard, td.setcard{ background:#c6264a;}
.card-icon img{width: 100%; max-width: 50px;}
.card-icon{width: 50px;}

.at{font-size: 14px; color: #ffff00;}





@media screen and (max-width: 700px) {
.menu{width: 90%; max-width: 350px; margin: 0 auto; padding-top: 10px;}

.ss_box li{width: 48%;}
.ss_box2 li{width: 31%;}

}


@media screen and (max-width: 640px) {
.menu{width: 90%; max-width: 350px; margin: 0 auto; padding-top: 10px;}
.ss_box{width: 90%;}
.ss_box2{width: 90%;}
.ss_box2 li{width: 47%; margin: 5px 0.5%;}
.ss_box3 li{width: calc(48% - 2px); margin: 0 0.5% 5px 0.5%;}
/* 
.ss_box li{width: 100%; float: none; margin: 5px 0;}
*/

}

@media screen and (max-width: 520px) {
.menu li{display:block;}
.card-box th{font-size:3.375vw;}
.card-box td{text-align: center; width: 90px; font-size:3.375vw;}
}