@charset "UTF-8";
/* from common.css */
body {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #363636;
}

dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, p, blockquote, fieldset, div {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

ul li, ol li {
  list-style: none;
}

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}

caption {
  text-align: left;
}

table, pre, code, select, input, textarea, kbd, var, ins, del, samp {
  font-size: 100%;
  font-family: "MS PGothic", sans-serif;
}

address, cite, dfn, em, strong, var, th, ins, del, samp {
  font-weight: normal;
  font-style: normal;
}

a img {
  border: 0;
}

hr.separation {
  display: none;
}

fieldset {
  border: none;
}

#uhd div table {
  text-align: left;
}

#uhd img {
  display: block;
}

#uhd br {
  display: none;
}

#masthead {
  height: 41px;
  margin: 4px auto 10px auto;
  text-align: left;
}

#masthead strong {
  font-weight: bold;
}

#msthd .msthdtxt {
  text-align: left;
}

#emg, #emg2, #emg3 {
  margin-bottom: 10px;
  text-align: center;
}

#emg table, #emg2 table, #emg3 table {
  margin: 0 auto;
}

body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  _height: 100%;
  /* panel hack */
}

#wrapper {
  padding: 0 10px;
}

#content {
  margin-bottom: 10px;
  text-align: left;
}

.tmpl950_1 #wrapper {
  width: 950px;
  margin: 0 auto;
}

#footer {
  text-align: center;
}

#footer address {
  padding: 10px 0 20px;
  border-top: 1px solid #cccccc;
}

.clearFix {
  zoom: 1;
}

.clearFix:after {
  content: "";
  display: block;
  clear: both;
}

a {
  color: #06c;
  text-decoration: none;
}

a:visited {
  color: #639;
}

a:hover {
  text-decoration: underline;
  color: #f00;
}

.errorMessage {
  font-weight: 700;
  color: #f00;
}

.icon16 {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  margin-top: -3px;
  margin-right: 5px;
  _margin-right: 2px;
  background: url(../img/icon.png) 0 0 no-repeat;
  vertical-align: middle;
}

a .icon16 {
  text-indent: -9999px;
  cursor: pointer;
}

.alert16 {
  background-position: -1138px 0;
}

/* ------ promoModule -------------------------- */
/* sprite */
.planSelectContainer h2 {
  background: url(../../../common/1.0.1/img/promo_bg.png) repeat-x;
}

.promoModule {
  position: relative;
  float: left;
}

.promoModule .navigation {
  float: left;
}

.promoModule .navigation ul li {
  float: left;
}

.promoModule .navigation ul li h1, .promoModule .navigation ul li a, .promoModule .navigation ul li span {
  display: block;
  width: 190px;
  height: 33px;
  overflow: hidden;
}

.promoModule .navigation ul li.about a {
  background-position: 0 0;
}

.promoModule .navigation ul li.about a:hover {
  background-position: 0 -32px;
}

.promoModule .navigation ul li.about h1 {
  background-position: 0 -64px;
}

.promoModule .navigation ul li.getStart a {
  background-position: -190px 0;
}

.promoModule .navigation ul li.getStart a:hover {
  background-position: -190px -32px;
}

.promoModule .navigation ul li.getStart h1 {
  background-position: -190px -64px;
}

.promoModule .navigation ul li.guide a {
  background-position: -380px 0;
}

.promoModule .navigation ul li.guide a:hover {
  background-position: -380px -32px;
}

.promoModule .navigation ul li.guide h1 {
  background-position: -380px -64px;
}

.promoModule .navigation ul li.print a {
  background-position: -570px 0;
}

.promoModule .navigation ul li.print a:hover {
  background-position: -570px -32px;
}

.promoModule .navigation ul li.print h1 {
  background-position: -570px -64px;
}

.promoModule .navigation ul li.myBox a {
  background-position: -760px 0;
}

.promoModule .navigation ul li.myBox a:hover {
  background-position: -760px -32px;
}

.promoModule .navigation ul li.myBox h1 {
  background-position: -760px -64px;
}

/* --- promoModule ---*/
/* navigation */
/* ------ promoModule -------------------------- */
/* --- promoFormModule ---*/
.promoFormModule {
  width: 870px;
  float: left;
  clear: both;
  padding: 0 40px;
  margin-top: 10px;
}

.promoFormModule .errorModule {
  clear: both;
  margin: 0 auto 10px;
  border: 5px solid #f4a9bd;
  clear: both;
  padding: 7px 10px;
  background: #fbf7f8;
}

.promoFormModule .errorModule p {
  position: relative;
  color: #f3092a;
  font-weight: 700;
}

.promoFormModule .errorModule p .errorinfo16 {
  _margin-top: 0;
  _height: 17px;
  margin-right: 7px;
  background-position: 0 -210px;
}

.promoFormModule .errorModule p .attentioninfo16 {
  _margin-top: 0;
  _height: 17px;
  margin-right: 7px;
  background-position: 0 0;
}

.promoFormModule .attentionModule {
  clear: both;
  margin: 0 auto 10px;
  border: 5px solid #fdd66b;
  clear: both;
  padding: 7px 10px;
  background: #f9fbe0;
}

.promoFormModule .attentionModule p {
  position: relative;
  color: #f3092a;
  font-weight: 700;
}

.promoFormModule .infoModule {
  clear: both;
  margin: 0 auto 10px;
  border: 5px solid #d3e3f5;
  clear: both;
  padding: 7px 10px;
  background: #f7fbfb;
}

.promoFormModule .infoModule p {
  position: relative;
}

.promoFormModule .bannerModule {
  margin: 0 auto 10px;
}

.promoFormModule .bannerModule p {
  margin: 0 auto 10px;
  text-align: center;
}

/* --- promoError ---*/
/* --- noticeModule ---*/
/* --- normalInfoModule ---*/
/* --- bannerModule ---*/
/* campaignFormBanner*/
.planSelectContainer .planModule .campaignFormBanner {
  width: 800px;
  margin: 0 auto 15px;
}

.planSelectContainer .planModule table.priceTable {
  width: 870px;
  table-layout: fixed;
}

.planSelectContainer .planModule table.priceTable tr.subject th {
  width: 289px;
  height: 74px;
  padding: 0;
  text-indent: -9999px;
  border: none;
  border-right: 1px solid #e2b501;
}

.planSelectContainer .planModule table.priceTable tr.subject th.planType {
  width: 289px;
  background-position: 0 0;
  border-left: 1px solid #e7b901;
}

.planSelectContainer .planModule table.priceTable tr.subject th.planPlus {
  background-position: -579px 0;
}

.planSelectContainer .planModule table.priceTable tr.subject th.planBasic {
  background-position: -289px 0;
}

/* priceTable */
/* --- bottomLinkModule ---*/
.bottomLinkModule {
  clear: both;
}

/* --- linkContainer ---*/
#S8 {
  border-top: 1px solid #cccccc;
  padding: 10px 0 8px;
}

/* info */
.planInfoModule {
  clear: both;
  margin: 0 auto 20px;
  width: 100%;
  background: #fff;
}

.planInfoModule h2 {
  margin-bottom: 0;
}

.planInfoModule dl {
  border: 1px solid #d6d8da;
  border-top: none;
  padding: 10px 20px 10px;
}

.planInfoModule dl.last {
  border: 1px solid #d6d8da;
  border-top: none;
  border-bottom: none;
  padding: 10px 20px 10px;
}

.planInfoModule dl dt {
  font-size: 116.4%;
  margin: 10px 0 5px;
  border-left: 5px solid #cacaca;
  padding-left: 7px;
  font-weight: 700;
}

.planInfoModule dl dt.dtFirst {
  margin-top: 0;
}

.planInfoModule dl dd {
  margin-left: 8px;
  padding-left: 8px;
  background-position: -950px 8px;
  font-size: 116.4%;
  line-height: 1.2;
}

.planInfoModule p.top {
  border: 1px solid #d6d8da;
  border-top: none;
  border-bottom: none;
  padding: 10px 10px 5px;
}

.planInfoModule p.bottom {
  border: 1px solid #d6d8da;
  border-top: none;
  padding: 5px 10px 15px;
}

/* --- planSelectContainer ---*/
/* common */
.planSelectContainer {
  width: 870px;
  margin: 0 auto;
}

.planSelectContainer h2 {
  margin-bottom: 15px;
  border: 1px solid #cad5de;
  background-position: 0 -143px;
  padding: 6px 7px 6px 10px;
  font-size: 116.4%;
  font-weight: 700;
  color: #4e5c6f;
}

table.meterContainer {
  background-color: #F4F8FC;
  margin-bottom: 15px;
  padding: 10px 7px;
  font-weight: 700;
}

.meterContainer .td_plan {
  background-color: #e8f1f9;
  padding-left: 10px;
}

.meterContainer .td_max {
  font-size: 120%;
  text-align: center;
}

.meterContainer .td_max span {
  color: #F60;
}

.meterContainer strong {
  font-weight: 700;
}

.meterWrap {
  border: 1px solid #b5ca1e;
  background-color: #fff;
  font-size: 0;
  height: 28px;
  overflow: hidden;
  position: relative;
  width: 378px;
  _width: 377px;
}

table.meterContainer th, table.meterContainer td {
  padding: 10px 0;
}

.meter {
  border: 1px solid white;
}

.planSelectContainer .alert {
  color: #fff;
  border: 1px solid #ca1e1e;
}

.planSelectContainer .meter .percent {
  background: url("../img/promo_bg_form2.png") repeat-x 0 0;
  display: block;
  height: 26px;
}

.planSelectContainer .alert .percent {
  background: url("../img/promo_bg_form2.png") repeat-x 0 -26px;
  display: block;
  height: 26px;
}

.planSelectContainer .meter .percentText {
  display: block;
  font-size: 16px;
  left: 0;
  line-height: 26px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 380px;
}

.planSelectContainer .getStartModule {
  clear: both;
  width: 848px;
  border: 1px solid #d6d8da;
  padding: 10px;
  *padding: 15px 10px 10px;
  text-align: center;
  background: #fff;
  margin: 0 0 15px;
}

.planSelectContainer .getStartModule.noFrame {
  border: none;
  padding-left: 0;
}

.planSelectContainer .getStartModule p.description {
  text-align: center;
}

.planSelectContainer .getStartModule p.descriptionL {
  text-align: left;
}

.planSelectContainer .getStartModule .loginButton a {
  display: block;
  width: 327px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}

.planSelectContainer .getStartModule span {
  display: block;
  margin: 10px auto;
  width: 327px;
}

.planSelectContainer .getStartModule .loginButton a {
  background: url("../img/promo_sprite_form2.png") no-repeat 0 0;
}

.planSelectContainer .getStartModule .loginButton a:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.planSelectContainer .noticeModule {
  clear: both;
  margin: 0 auto 20px;
  width: 100%;
  background: #fff;
}

.planSelectContainer .noticeModule h2 {
  margin-bottom: 0;
}

.planSelectContainer .noticeModule dl {
  border: 1px solid #d6d8da;
  border-top: none;
  padding: 10px 20px 15px;
}

.planSelectContainer .noticeModule dl dt {
  font-size: 116.4%;
  margin: 10px 0 5px;
  border-left: 5px solid #cacaca;
  padding-left: 7px;
  font-weight: 700;
}

.planSelectContainer .noticeModule dl dt.dtFirst {
  margin-top: 0;
}

.planSelectContainer .noticeModule dl dd {
  background: url(../../../common/1.0.1/img/promo_navi.png) no-repeat;
  margin-left: 8px;
  padding-left: 8px;
  background-position: -950px 8px;
  font-size: 116.4%;
  line-height: 1.2;
}

/* plan */
/* --- getStartModule ---*/
/* --- noticeModule ---*/
/* priceTable */
.priceTable {
  padding: 0 0 15px;
}

.priceTable h4 {
  font-size: 116.4%;
  margin: 10px 0;
  border-left: 5px solid #cacaca;
  padding-left: 7px;
  font-weight: 700;
}

.priceTable table {
  text-align: center;
}

.priceTable table th, .priceTable table td {
  padding: 3px 0;
}

.priceTable table .a {
  font-weight: 700;
  color: #fff;
  font-size: 110%;
}

.priceTable table .a span.gbText {
  position: relative;
  display: inline-block;
}

.priceTable table .a span.gb {
  text-indent: -9999px;
  display: block;
  background: url("../img/100gb.gif") 0 0 no-repeat;
  width: 52px;
  height: 41px;
  position: absolute;
  top: -1.7em;
  right: -3.5em;
}

.priceTable table .a .small {
  font-size: 90%;
}

.priceTable table .b, .priceTable table .c {
  color: #333;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  border-right: 1px solid white;
}

.priceTable table .b {
  font-size: 180%;
}

.priceTable table .c {
  font-size: 130%;
  padding-top: 10px;
}

.priceTable table .c strong {
  font-size: 200%;
  line-height: 1.6em;
  padding-right: 5px;
}

.priceTable table .c .campaign {
  font-size: 140%;
  color: #f00;
  text-shadow: none;
  font-weight: 700;
  line-height: 1.4em;
}

.priceTable table .d {
  font-weight: 700;
}

.priceTable table .btn {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  border-radius: 2px;
  -webkit-background-clip: padding-box;
  border-radius: 2px;
  display: block;
  width: 228px;
  padding: 10px 0;
  margin: 0 auto;
}

.priceTable table .btn.grayout {
  color: #737373;
  background: #cbcbcb;
  border: 1px solid #949494;
}

.priceTable table a.btn {
  color: #fff;
  border: 1px solid #b2000e;
  background: #fd4c40;
  background: -moz-linear-gradient(top, #fd4c40 0%, #cd0614 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd4c40), color-stop(100%, #cd0614));
  background: -webkit-linear-gradient(top, #fd4c40 0%, #cd0614 100%);
  background: -o-linear-gradient(top, #fd4c40 0%, #cd0614 100%);
  background: -ms-linear-gradient(top, #fd4c40 0%, #cd0614 100%);
  background: linear-gradient(to bottom, #fd4c40 0%, #cd0614 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd4c40', endColorstr='#cd0614', GradientType=0 );
  letter-spacing: 0.1px;
}

.priceTable table a.btn:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  letter-spacing: 0.1px;
}

.priceTable table a.btn span {
  background: url("../img/icon.png") 0 -139px no-repeat;
  padding-left: 1em;
}

.basicMember .a {
  background: url("../img/bg1.png") 0 0;
}

.premiumMember .a {
  background: url("../img/bg2.png") 0 0;
}

.sbMember .a {
  background: url("../img/bg3.png") 0 0;
}

.basicMember .b, .basicMember .c, .basicMember .d {
  background: #e8f1f9;
}

.premiumMember .b, .premiumMember .c, .premiumMember .d {
  background: #fff6cf;
}

.sbMember .b, .sbMember .c, .sbMember .d {
  background: #e7e7e7;
}

.yjChviewWrap {
  text-align: center;
}

.yjChview {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #e7e7e7;
  background: #f9f9f9;
  text-align: center;
  margin: 10px 0;
}

.yjChview dl, .yjChview dd, .yjChview p {
  margin: 0;
}

.yjChview dl dt, .yjChview dl dd {
  display: inline;
  font-size: 13px;
  line-height: 1.2em;
}

.yjChview dl dt {
  padding-right: 0.2em;
}

.yjChview dl dd span {
  font-weight: bold;
}

.yjChview dl dd:after {
  content: "\ff5c";
}

.yjChview dl dd.end:after {
  content: "";
}

/* startButton50p_cam */
/* 110811 campaign */
.campaignModule {
  width: 700px;
  padding: 10px 0 0;
  margin: 10px auto;
  text-align: center;
}

.campaignModule p {
  color: #363636;
}

.campaignModule span {
  display: block;
  margin: 10px auto;
}

.startButton50p_cam {
  width: 579px;
  margin-top: 5px;
}

.startButton50p_cam a {
  background-position: 0 -186px;
  width: 579px;
}

.startButton50p_cam a:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.startButtonPC50p_cam {
  width: 579px;
  margin-top: 5px;
}

.startButtonPC50p_cam a {
  background-position: -581px -187px;
  width: 579px;
  background: url(../img/promo_sprite_form.png) no-repeat;
}

.startButtonPC50p_cam a:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.startButton50p_cam a {
  background: url(../img/promo_sprite_form.png) no-repeat;
  display: block;
  width: 327px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}

.startButtonPC50p_cam a {
  display: block;
  width: 327px;
  height: 56px;
  padding: 0;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}

.startButton50p_cam {
  width: 579px;
  margin-top: 5px;
}

.startButton50p_cam a {
  background-position: 0 -186px;
  width: 579px;
}

.planSelectContainer .getStartModule .startButton50p_cam a:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

/* startButton50p_cam */
/* maintenanceNotice */
.maintenanceNotice {
  width: 80%;
  margin: 0 auto 10px;
  background-color: #fff;
  border: #abb9c9 1px solid;
  font-weight: 700;
}

.maintenanceNotice .mainContainer {
  padding: 8px;
}