@charset "EUC-JP";

/*------------------------------------
top before/after
------------------------------------*/
#pagebody {
    width: auto;
    margin: 0;
    padding: 0;
}
#mainAreaInner {
    width: 960px;
    margin: 0 auto;
}
#featureAreaInner01 {
    width: 960px;
    margin:  0 auto;
}
#infoAreaInner {
    width: 960px;
    margin:  0 auto;
}
#mainArea #featureArea {
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    background: #f7f8f9 url(/img/bg_featureArea_01.png) repeat-x left top;
}
#mainArea #featureAreaInner02 div {
    float: left;
    margin: 0 1px;
    display: inline;
}
#mainArea #featureAreaInner02 h2 a,
#mainArea #featureAreaInner02 h2 span {
    display: block;
    margin-bottom: 2px;
    padding-top: 82px;
    font-size: 14px;
    text-align: center;
    background-position: top center;
    background-repeat: no-repeat;
}

#mainArea #infoArea #info {
    float: left;
    width: 700px;
    margin-left: 10px;
    display: inline;
}
#mainArea #infoArea #banner {
    float: right;
    width: 220px;
    margin: 10px 10px 0 0;
    display: inline;
}
#mainArea #infoArea #banner li {
    margin-bottom: 10px;
}
#mainArea #infoArea #banner li:last-child {
    margin-bottom: 0;
}
#mainArea #infoArea #banner img {
    vertical-align: bottom;
}


/* before
--------------------------*/
#mainArea.before {
    position: relative;
    z-index: 1;
}
#mainArea.before #mainAreaInner {
    position: relative;
    width: 960px;
    height: 320px;
}
#mainArea.before h1 span {
    position: absolute;
    z-index: -1;
    color: #fff;
}
#mainArea.before #featureAreaInner01 {
    background: url(/img/bg_before_featureArea_01.png) repeat-y left top;
}
#mainArea.before #featureAreaInner02 {
    background: url(/img/bg_before_featureArea_02.png) no-repeat left top;
}
#mainArea.before #featureAreaInner02 div {
    width: 278px;
    padding: 20px;
}

/* before-ja */
#mainArea.before.ja #mainAreaInner {
    background: url(/img/img_beforetop_ja_1.png) no-repeat left top;
}
#mainArea.before.ja #loginArea {
    width: 200px;
    padding: 48px 0 0 25px;
}
#mainArea.before.ja #loginArea dt {
    margin-bottom: 5px;
    font-weight: bold;
}
#mainArea.before.ja #loginArea dd {
    margin-bottom: 10px;
}
#mainArea.before.ja #loginArea input[type="text"],
#mainArea.before.ja #loginArea input[type="password"] {
    width: 200px;
}
#mainArea.before.ja #loginArea input[type="submit"] {
    margin-bottom: 10px;
    min-width: 82px;
}
#mainArea.before.ja #loginArea input[type="submit"]:hover {
    background: -webkit-gradient(linear, center top, center bottom, from(#f7f8f9), to(#e1e2e3));
    background: -moz-linear-gradient(center top , #f7f8f9, #e1e2e3);
    background: linear-gradient(center top , #f7f8f9, #e1e2e3);
    background-position:0 0, 0 0;
    background-repeat:no-repeat, no-repeat;
}

#mainArea.before.ja #loginArea .registBtn {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}
#mainArea.before.ja #loginArea .registBtn span {
    display: inline-block;
    min-width: 200px;
    padding: 4px 0;
    border: #3ac 1px solid;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    background: -webkit-gradient(linear, center top, center bottom, from(#3be), to(#09c));
    background: -moz-linear-gradient(center top , #3be, #09c);
    background: linear-gradient(center top , #3be, #09c);
    background-color: #09c;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 2px #09c;
    cursor: pointer;
}
#mainArea.before.ja #loginArea .registBtn a:hover span {
    background: -webkit-gradient(linear, center top, center bottom, from(#2ae), to(#07c));
    background: -moz-linear-gradient(center top , #2ae, #07c);
    background: linear-gradient(center top , #2ae, #07c);
}
#mainArea.before.ja #feature01 h2 a {
    background-image: url(/img/icon_feature01.png);
}
#mainArea.before.ja #feature02 h2 a {
    background-image: url(/img/icon_feature02.png);
}
#mainArea.before.ja #feature03 h2 a {
    background-image: url(/img/icon_feature03.png);
}

/* before-en */
#mainArea.before.en #mainAreaInner {
    background: url(/img/img_beforetop_en.png) no-repeat left top;
}

#mainArea.before.en #mainAreaInner #directLink {
    position: absolute;
    top: 207px;
    left: 688px;
    line-height: 1.7;
    font-size: 16px;
}
#mainArea.before.en #loginArea {
    width: 200px;
    padding: 40px 0 0 20px;
}
#mainArea.before.en #loginArea p {
    margin-bottom: 12px;
    line-height: 1.75;
    font-size: 18px;
}
#mainArea.before.en #loginArea dt {
    margin-bottom: 10px;
    font-size: 14px;
}
#mainArea.before.en #loginArea dd input[type="text"],
#mainArea.before.en #loginArea dd input[type="password"] {
    width: 180px;
    margin-bottom: 15px;
    padding: 5px 10px;
    border: 1px solid #ccc;
}
#mainArea.before.en #loginBtn {
    text-align: right;
}
#mainArea.before.en #loginBtn input[type="submit"] {
    display: inline-block;
    min-width: 100px;
    padding: 4px 0;
    border: #3ac 1px solid;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    background: -webkit-gradient(linear, center top, center bottom, from(#3be), to(#09c));
    background: -moz-linear-gradient(center top , #3be, #09c);
    background: linear-gradient(center top , #3be, #09c);
    background-color: #09c;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 2px #09c;
    cursor: pointer;
}
#mainArea.before.en #loginBtn input[type="submit"]:hover {
    background: -webkit-gradient(linear, center top, center bottom, from(#2ae), to(#07c));
    background: -moz-linear-gradient(center top , #2ae, #07c);
    background: linear-gradient(center top , #2ae, #07c);
}
#mainArea.before #featureAreaInner02 div {
    text-align: center;
}
#mainArea.before.en #feature01 h2 a {
    background-image: url(/img/icon_feature04.png);
}
#mainArea.before.en #feature02 h2 a {
    background-image: url(/img/icon_feature05.png);
}
#mainArea.before.en #feature052 h2 a {
    background-image: url(/img/icon_feature05_02.png);
}
#mainArea.before.en #feature03 h2 a {
    background-image: url(/img/icon_feature06.png);
}
#mainArea.before.en #feature10 h2 a {
    background-image: url(/img/icon_feature10.png);
}

/* after
--------------------------*/
/* after-ja */
#mainArea.after.ja #featureArea {
    padding-top: 30px;
}
#mainArea.after.ja #featureAreaInner01 {
    padding-bottom: 30px;
    background: url(/img/bg_after_featureArea_01.png) repeat-y left bottom;
}
#mainArea.after.ja #featureAreaInner02 div {
    width: 208px;
    padding: 0 15px 0 14px;
}
#mainArea.after.ja #featureAreaInner02 #feature01 {
    margin-left: 2px;
}
#mainArea.after.ja #featureAreaInner02 #feature04 {
    margin-right: 2px;
}
#mainArea.after.ja #featureAreaInner02 h2 {
    margin-bottom: 20px;
}
#mainArea.after.ja #feature01 h2 span {
    background-image: url(/img/icon_feature05.png);
}
#mainArea.after.ja #feature02 h2 span {
    background-image: url(/img/icon_feature02.png);
}
#mainArea.after.ja #feature03 h2 span {
    background-image: url(/img/icon_feature03.png);
}
#mainArea.after.ja #feature04 h2 span {
    background-image: url(/img/icon_feature07.png);
}
#mainArea.after.ja #featureAreaInner02 .linkTxt {
    margin-left: 10px;
}
#mainArea.after.ja #featureAreaInner02 .linkTxt a {
    margin-left: -10px;
}


/* after-en */
#mainArea.after.en #featureArea {
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    background: none;
}
#mainArea.after.en #featureAreaInner02 {
    margin: 30px 10px 15px;
}
#mainArea.after.en #featureAreaInner02 div {
    display: block;
    float: left;
    width: 470px;
    margin: 0 0 30px 0;
    text-align: left;
}
#mainArea.after.en #featureAreaInner02 h2 a {
    margin: 0;
    padding: 15px 0 50px 75px;
    display: block;
    background: none;
    text-align: left;
    background-position: left top;
    background-repeat: no-repeat;
}
#mainArea.after.en #feature01 h2 a {
    background-image: url(/img/icon_feature05.png);
}
#mainArea.after.en #feature02 h2 a {
    background-image: url(/img/icon_feature04.png);
}
#mainArea.after.en #feature03 h2 a {
    background-image: url(/img/icon_feature06.png);
}
#mainArea.after.en #feature04 h2 a {
    background-image: url(/img/icon_feature08.png);
}
#mainArea.after.en #feature05 h2 a {
    background-image: url(/img/icon_feature05.png);
}
#mainArea.after.en #feature052 h2 a {
    background-image: url(/img/icon_feature05_02.png);
}
#mainArea.after.en #feature06 h2 a {
    background-image: url(/img/icon_feature09.png);
}
#mainArea.after.en #feature10 h2 a {
    background-image: url(/img/icon_feature10.png);
}
#mainArea.after.en #featureAreaInner02 p {
    margin: -50px 0 0 75px;
}



/* News
--------------------------*/
.newsArea {
    margin-top: 10px;
}
.newsTit {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}
.newsList {
    width: 700px;
}
.newsList dt {
    float: left;
    clear: both;
    width: 70px;
}
.newsList dd {
    float: left;
    width: 620px;
    padding: 0 0 10px 10px;
}
.newsList dd:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0.1em;
    height: 0.1px;
    line-height: 0;
    visibility: hidden;
}
.newsList dd {
    min-height: 1px;
    zoom: 1;
}
* html .newsList dd {
    height: 1px;
}
.newsnav {
    margin-top: 10px;
}
.newsnav li {
    display: inline;
    padding-right: 10px;
}
#newsnavRss {
    padding-left: 20px;
    background: url(/img/ico_rss.gif) no-repeat left center;
}
#newsnavTwitter {
    padding-left: 20px;
    background: url(/img/ico_twitter.gif) no-repeat left center;
}
#newsnavFb {
    padding-left: 20px;
    background: url(/img/ico_fb.gif) no-repeat left center;
}
.newsnav .linktxt a {
    padding-left: 10px;
    background: url(/img/ico_triangle.gif) no-repeat left 4px;
}

.objectArea .newsTit {
    float: left;
    width: 110px;
}
.objectList {
    float: right;
    width: 590px;
    text-align: right;
}
.objectList dt {
    display: inline;
    color: #789;
}
.objectList dd {
    display: inline;
    padding-left: 30px;
    color: #888;
    line-height: 1;
}
.objectList #featurep {background: url(/img/ico_featurep.gif) no-repeat 5px 1px;}
.objectList #smartp {background: url(/img/ico_smartp.gif) no-repeat 5px 1px;}
.objectList #ios {background: url(/img/ico_ios.gif) no-repeat 5px 1px;}
.objectList #android {background: url(/img/ico_android.gif) no-repeat 5px 1px;}
.objectList #nonarrow {
    padding-left: 15px;
    background: url(/img/listline.gif) no-repeat 5px 1px;
}

.objecttype {
    float: left;
    width: 90px;
    vertical-align: middle;
}
.objecttype li {
    display: inline;
    margin-right: 5px;
    line-height: 1;
}
.objecttype li:last-child {
    margin-right: 0;
}
.newsList a {
    display: block;
    float: left;
    width: 520px;
}