@charset "UTF-8"  ;

table.planListTable {
  width: 100%  ;
  margin-top: 20px  ;
  margin-bottom: 20px  ;
  border-collapse: collapse  ;
  border-spacing: 0  ;
border-bottom: solid 1px #d6d6d6  ;
  table-layout: fixed  ;
  background: #FFFFFF  ;
  font-size: 12px  ;
}

table.planListTable th{
  padding: 10px 10px 12px  ;
  border-top: solid 1px #d6d6d6  ;
  border-left: solid 1px #d6d6d6  ;
  text-align: left  ;
  line-height: 1.2em  ;
  font-weight: normal  ;
}

table.planListTable td{
  border-top: solid 1px #d6d6d6  ;
  border-left: solid 1px #d6d6d6  ;
  text-align: center  ;
  vertical-align: middle  ;
}

table.planListTable th:last-child {border-right: solid 1px #d6d6d6  ;}
table.planListTable td:last-child {border-right: solid 1px #d6d6d6  ;}

table.planListTable td:nth-child(2){color: #4575b4  ;}
table.planListTable td:nth-child(3){color: #e4555e  ;}
table.planListTable td:nth-child(4){color: #7054b1  ;}
table.planListTable td:nth-child(5){color: #1a1a1a  ;}

table.planListTable td.midashi {
  padding: 15px 13px 11px  ;
  background: #e6e6e6  ;
  text-align: left  ;
  vertical-align: middle  ;
  font-weight: bold ;
}

  table.planListTable td.midashi span {
    float: right  ;
  }

table.planListTable td i {font-size: 15px  ;}

table.planListTable th.emptyBox {
  background: #F9F9F9  ;
  border-top:none  ;
  border-left: none  ;
}

table.planListTable th.btn {
  padding-top: 0  ;
  text-align: center  ;
  border-top:none  ;
}

/*--------------------------------
3つのプラン
--------------------------------*/
.plan3Box {
  margin-bottom: 65px  ;
  text-align: center  ;
}

.adhocBox {
  margin-top: 30px;
  margin-bottom: 25px  ;
  text-align: center  ;
}

.enterpriseInLinebox {
  text-align: center;
}

.planInlinebox {
  width: 27%  ;
  margin: 10px 40px;
  padding: 20px  ;
  display: inline-block  ;
  vertical-align: top  ;
  background-color: #fff  ;
  box-shadow: 0 0 6px rgba(55,71,79,0.2)  ;
  text-align: left  ;
  position: relative  ;
}

.planInlinebox2 {
  width: 27%  ;
  margin: 10px  ;
  padding: 20px  ;
  display: inline-block  ;
  vertical-align: top  ;
  background-color: #fff  ;
  box-shadow: 0 0 6px rgba(55,71,79,0.2)  ;
  text-align: left  ;
  position: relative  ;
}


.planInlinebox p {
  padding-left: 4px  ;
  line-height: 1.3em  ;
  padding-bottom: 8px  ;
  font-size: 100%;
  vertical-align: baseline;
}

.planInlinebox2 p {
  padding-left: 4px  ;
  line-height: 1.3em  ;
  padding-bottom: 8px  ;
  font-size: 14px;
  vertical-align: baseline;
}


  .planInlinebox p span {font-weight: bold !important ;font-size: 14px  ;}
  .planInlinebox2 p span {font-weight: bold !important ;font-size: 18px  ;}

  .planList {
    padding-bottom: 5px  ;
    font-size: 32px  ;
    color: #e4555e  ;
  }
  .planList2 {
    padding-bottom: 5px  ;
    font-size: 32px  ;
    color: #e4555e  ;
  }

.planInlinebox a:link,
.planInlinebox a:visited {
  width: 50px  ;
  margin: 0 auto  ;
  padding: 15px 0  ;
  position: absolute  ;
  display: block  ;
  text-align: center  ;
  background: #e4555e  ;
  color: #FFFFFF  ;
  font-size: 18px  ;
  left: 0  ;
  right: 0  ;
  border-radius: 50%  ;
  bottom: -28px;
}

.planInlinebox a:hover {
  background: #c71620  ;
}

/*--------------------------------
中間タイトル＋テキスト
--------------------------------*/
.titleSub {
  font-size: 32px  ;
  text-align: center  ;
  background: url(../images/title_border.png) repeat-x center  ;
  margin-top: 30px;
}

  .titleSubInline {
    background: #f9f9f9  ;
    font-weight: bold !important ;
  }

.introTxt {
    padding-top: 25px;
    text-align: center  ;
    font-size: 18px  ;
    line-height: 30px  ;
    font-weight: bold !important  ;
}

.introTxt a:link, .introTxt a:visited {
  color: #e4555e  ;
  text-decoration: underline  ;
}

  .introTxt a:hover {
    color: #999999  ;
    text-decoration: none  ;
  }

/*--------------------------------
各プラン見出し
--------------------------------*/
table.planListTable th.planth {
  padding: 0 0 10px  ;
  vertical-align: top  ;
  text-align: center  ;
}

.freeplan {
  padding-top: 20px  ;
  border-top: solid 10px #4575b4  ;
}

.basicplan {
  padding-top: 20px  ;
  border-top: solid 10px #e4555e  ;
}

.businessplan {
  padding-top: 20px  ;
  border-top: solid 10px #7054b1  ;
}

.premiumplan {
  padding-top: 20px  ;
  border-top: solid 10px #1a1a1a  ;
}

.plan_name {padding-bottom: 20px  ; font-size: 24px  ;font-weight: bold !important  ;}
.plan_price {padding-bottom: 20px  ;font-size: 24px  ;font-weight: bold !important  ;}
.plan_term {padding-bottom: 20px  ; font-size: 14px  ;}

/* リンクボタン */
a:link.freebtn, a:visited.freebtn {
  width: 80%  ;
  margin: 0 auto 12px  ;
  padding: 21px 0 19px  ;
  display: block  ;
  background: #4575b4  ;
  color: #FFFFFF  ;
  border-radius: 5px  ;
  font-size: 14px  ;
  font-weight: bold  ;
  text-decoration: none;
}
a:visited.freebtn {color: #FFFFFF  ;}
a:hover.freebtn {background: #28527f  ;}

a:link.basicbtn, a:visited.basicbtn {
  width: 80%  ;
  margin: 0 auto  12px;
  padding: 21px 0 19px  ;
  display: block  ;
  background: #e4555e  ;
  color: #FFFFFF  ;
  border-radius: 5px  ;
  font-size: 14px  ;
  font-weight: bold  ;
  text-decoration: none;
}
a:visited.basicbtn {color: #FFFFFF  ;}
a:hover.basicbtn {background: #c71620  ;}

a:link.businessbtn, a:visited.businessbtn {
  width: 80%  ;
  margin: 0 auto  12px;
  padding: 21px 0 19px  ;
  display: block  ;
  background: #7054b1  ;
  color: #FFFFFF  ;
  border-radius: 5px  ;
  font-size: 14px  ;
  font-weight: bold  ;
  text-decoration: none;
}
a:visited.businessbtn {color: #FFFFFF  ;}
a:hover.businessbtn {background: #331d67  ;}

a:link.premiumbtn, a:visited.premiumbtn {
  width: 80%  ;
  margin: 0 auto  12px;
  padding: 21px 0 19px  ;
  display: block  ;
  background: #1a1a1a  ;
  color: #FFFFFF  ;
  border-radius: 5px  ;
  font-size: 14px  ;
  font-weight: bold  ;
  text-decoration: none;
}
a:visited.premiumbtn {color: #FFFFFF  ;}
a:hover.premiumbtn {background: #000000  ;}

.plan_list .cancel {
  background: #bdbdbd !important;
  color: #444444 !important;
}

.btn .cancel-request, .btn .cancel-payment, .btn .cancel-downgrade {
  font-size: 10px !important;
  padding: 10px 0 8px !important;
}

/*--------------------------------
アドホック申込ボタン
--------------------------------*/
a:link.adhocbtn {
    text-decoration:none;
    max-width: 486px  ;
    width: 47%   ;
    height: 73px  ;
    margin: 0 auto 0px  ;
    line-height: 73px  ;
    font-size: 22px  ;
    color: #fff   ;
    background: #e4555e url(../ja/assets/images/common/cv_arrow.png) no-repeat 94% 50%   ;
    text-align: center  ;
    font-weight: bold  ;
    border-radius: 8px  ;
    letter-spacing: 1px  ;
    display: block  ;
    /*display: inline-block;*/
  }

  a:hover.adhocbtn {
    background: #c71620 url(../assets/images/common/cv_arrow.png) no-repeat 94% 50%   ;
  }

/*--------------------------------
共通
--------------------------------*/
.txt_center {
  text-align: center  ;
}

.txt_s {
  font-size: 18px  ;
  font-weight: normal  ;
}

.txt_m {
  padding-bottom: 60px  ;
  line-height: 1.3em  ;
}
.mgnt_s {margin-top: 30px  ;}

.qst-mrk-mckup{
    padding-left: 5px;
    margin-bottom: -5px;
}
.qst-mrk-mckup-sp{
   padding-left: 5px;
   margin-bottom: -5px;
}

.plan_list_sp {
  display: none;
}

.yearPlanDetail2 {
  display: none;
}
@media screen and ( max-width:1024px) {
  .plans .inframe {
    width: auto;
  }
  .plans.methodselect {
    padding-bottom: 15px;
  }
  .plans {
    padding: 0 10px;
  }
  .cv--dl {
		height: 49px;
		padding: 0 !important;
		line-height: 49px !important;
  }
  table.planListTable {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-collapse: collapse;
    border-spacing: 0;
    border-bottom: solid 1px #d6d6d6;
    background: #FFFFFF;
    font-size: 12px;
  }

  table.planListTable th {
    max-width: 150px;
    padding: 10px 10px 12px;
    border-top: solid 1px #d6d6d6;
    border-left: solid 1px #d6d6d6;
    text-align: left;
    line-height: 1.2em;
    font-weight: normal;
  }

  table.planListTable td {
    border-top: solid 1px #d6d6d6;
    border-left: solid 1px #d6d6d6;
    text-align: center;
    vertical-align: middle;
    word-break: normal;
  }

  table.planListTable th:last-child {
    border-right: solid 1px #d6d6d6;
  }

  table.planListTable td:last-child {
    border-right: solid 1px #d6d6d6;
  }

  table.planListTable td:nth-child(2) {
    color: #4575b4;
  }

  table.planListTable td:nth-child(3) {
    color: #e4555e;
  }

  table.planListTable td:nth-child(4) {
    color: #7054b1;
  }

  table.planListTable td:nth-child(5) {
    color: #1a1a1a;
  }

  table.planListTable td.midashi {
    padding: 12px 10px 8px;
    background: #e6e6e6;
    text-align: left;
    vertical-align: middle;
  }

  table.planListTable td.midashi span {
    float: right;
  }

  table.planListTable td i {
    font-size: 15px;
  }

  /*--------------------------------
  3つのプラン
  --------------------------------*/
  .plan3Box {
    margin-bottom: 80px;
    text-align: center;
  }

  .adhocBox {
    margin-bottom: 80px;
    text-align: center;
  }

  .planInlinebox {
    margin: 10px 0 50px;
    padding: 10px;
    vertical-align: top;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(55, 71, 79, 0.2);
    text-align: left;
    position: relative;
  }

  .planInlinebox2 {
    margin: 10px auto 50px;
    padding: 10px;
    vertical-align: top;
    background-color: #fff;
    box-shadow: 0 0 6px rgba(55, 71, 79, 0.2);
    text-align: left;
    position: relative;
    max-width: 480px;
  }

  .planInlinebox p {
    padding-left: 4px;
    line-height: 1.3em;
    padding-bottom: 8px;
  }

  .planInlinebox2 p {
    padding-left: 4px;
    line-height: 1.3em;
    padding-bottom: 8px;
  }

  .planInlinebox p span {
    font-weight: bold;
    font-size: 14px;
  }

  .planInlinebox2 p span {
    font-weight: bold !important;
  }

  .planList {
    padding-bottom: 5px;
    font-size: 24px;
    color: #e4555e;
  }

  .planInlinebox a:link,
  .planInlinebox a:visited {
    width: 50px;
    margin: 0 auto;
    padding: 15px 0;
    position: absolute;
    display: block;
    text-align: center;
    background: #e4555e;
    color: #FFFFFF;
    font-size: 18px;
    left: 0;
    right: 0;
    border-radius: 50%;
  }

  .planInlinebox a:hover {
    background: #c71620;
  }

  /*--------------------------------
  中間タイトル＋テキスト
  --------------------------------*/
  .titleSub {
    font-size: 24px;
    text-align: center;
    background: url(../images/title_border.png) repeat-x center;
    margin-top: 30px;
  }

  .titleSubInline {
    padding: 0 10px;
    background: #f9f9f9;
    font-weight: bold !important;
  }

  .introTxt {
    padding: 30px 0;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: bold !important;
  }

  .introTxt a:link, .introTxt a:visited {
    color: #e4555e;
    text-decoration: underline;
  }

  .introTxt a:hover {
    color: #999999;
    text-decoration: none;
  }

  /*--------------------------------
  各プラン見出し
  --------------------------------*/
  table.planListTable th.planth {
    padding: 0 0 10px;
    vertical-align: top;
    text-align: center;
  }
}
@media screen and (max-width:767px) {
  .plans.methodselect {
    padding-bottom: 15px;
  }
  .plans {
    padding: 0 10px;
  }
  .plans .inframe {
    width: auto;
  }
  .freeplan {
    padding: 15px 0;
    margin-bottom: 20px;
    border-top: solid 10px #4575b4;
    border-right: solid 1px #d6d6d6;
    border-left:solid 1px #d6d6d6;
    border-bottom:solid 1px #d6d6d6;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    background: #FFFFFF;
    text-align: center;
  }

  .basicplan {
    padding: 15px 0;
    margin-bottom: 20px;
    border-top: solid 10px #e4555e;
    border-right: solid 1px #d6d6d6;
    border-left:solid 1px #d6d6d6;
    border-bottom:solid 1px #d6d6d6;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    background: #FFFFFF;
    text-align: center;
  }

  .businessplan {
    padding: 15px 0;
    margin-bottom: 20px;
    border-top: solid 10px #7054b1;
    border-right: solid 1px #d6d6d6;
    border-left:solid 1px #d6d6d6;
    border-bottom:solid 1px #d6d6d6;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    background: #FFFFFF;
    text-align: center;
  }

  .premiumplan {
    padding: 15px 0;
    margin-bottom: 20px;
    border-top: solid 10px #1a1a1a;
    border-right: solid 1px #d6d6d6;
    border-left:solid 1px #d6d6d6;
    border-bottom:solid 1px #d6d6d6;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    background: #FFFFFF;
    text-align: center;
  }
}
@media screen and ( max-width:1024px) {
  .plan_name {padding-bottom: 10px; font-size: 18px;font-weight: bold !important;}
  .plan_price {padding-bottom: 10px;font-size: 18px;}

  /* リンクボタン */
  a:link.freebtn, a:visited.freebtn {
    width: 90%;
    margin: 0 auto 12px;
    padding: 12px 0px;
    display: block;
    background: #4575b4;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
  }
  a:visited.freebtn {color: #FFFFFF;}
  a:hover.freebtn {background: #28527f;}

  a:link.basicbtn, a:visited.basicbtn {
    width: 90%;
    margin: 0 auto;
    padding: 12px 0px;
    display: block;
    background: #e4555e;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
  }
  a:visited.basicbtn {color: #FFFFFF;}
  a:hover.basicbtn {background: #c71620;}

  a:link.businessbtn, a:visited.businessbtn {
    width: 90%;
    margin: 0 auto;
    padding: 12px 0px;
    display: block;
    background: #7054b1;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
  }
  a:visited.businessbtn {color: #FFFFFF;}
  a:hover.businessbtn {background: #331d67;}

  a:link.premiumbtn, a:visited.premiumbtn {
    width: 90%;
    margin: 0 auto;
    padding: 12px 0px;
    display: block;
    background: #1a1a1a;
    color: #FFFFFF;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
  }
  a:visited.premiumbtn {color: #FFFFFF;}
  a:hover.premiumbtn {background: #000000;}

  .plan_list .cancel, .plan_list_sp .cancel {
    background: #bdbdbd !important;
    color: #444444 !important;
  }

  .btn .cancel-request, .btn .cancel-payment, .btn .cancel-downgrade {
    font-size: 10px !important;
    padding: 10px 0 8px !important;
  }

  .detail {
    padding-bottom: 15px;
    font-size: 10px;
  }

  /*--------------------------------
  アドホック申込ボタン
  --------------------------------*/
  .adhocBtns {
    text-align: center;
    margin-left: -20px;
  }

  a:link.adhocbtn {
      text-decoration: none;
      max-width: 486px;
      width: 47%;
      height: 73px;
      margin: 0 auto 0px;
      line-height: 73px;
      font-size: 22px;
      color: #fff;
      background: #e4555e url(../ja/assets/images/common/cv_arrow.png) no-repeat 94% 50%;
      text-align: center;
      font-weight: bold;
      border-radius: 8px;
      letter-spacing: 1px;
      display: block;
  }

  a:link.adhocbtn2 {
    background: #e4555e url(../ja/assets/images/common/cv_arrow.png) no-repeat 94% 50% !important;
  }

  a:hover.adhocbtn {
    background: #c71620 url(../ja/assets/images/common/cv_arrow.png) no-repeat 94% 50% !important;
  }

  /*--------------------------------
  共通
  --------------------------------*/
  .txt_center {
    text-align: center;
  }

  .txt_s {
    font-size: 0.8em;
    font-weight: normal;
  }

  .txt_m {
    padding-bottom: 60px;
    line-height: 1.3em;
  }
  .mgnt_s {margin-top: 30px;}

  .cv--dl{
  background-image: url(../ja/assets/images/common/cv_arrow.png) !important;
  border-radius: 8px !important;
  }

  .qst-mrk-mckup-sp{
     padding-left: 5px;
     margin-bottom: -5px;
  }

  .plan_list {
    display: none;
  }
  .plan_list_sp {
    display: block;
  }

  .yearPlanDetail1 {
    display: none;
  }
  .yearPlanDetail2 {
    display: inline;
  }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
  /*　for iPad 　*/
  table.planListTable{
    table-layout: fixed;
  }

  table.planListTable th{
    padding: 6px 5px 7px;
  }

  table.planListTable td.midashi {
    padding: 7px 13px 7px 5px;
  }

  table.planListTable th.emptyBox {
    background: #F9F9F9;
    border-top:none;
    border-left: none;
  }

  table.planListTable th.btn {
    padding-top: 0;
    text-align: center;
    border-top:none;
  }

  /*--------------------------------
  3つのプラン
  --------------------------------*/
  .plan3Box {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
  }

  .planInlinebox {
    width: 27%;
    margin: 7px;
    padding: 12px;
    display: inline-block;
  }

  .planInlinebox2 {
    width: 27%  ;
    margin: 10px  ;
    padding: 20px  ;
    display: inline-block  ;
  }

  .planInlinebox2 p {
    font-size: 100%;
    vertical-align: baseline;
  }

  .planInlinebox a:link,
  .planInlinebox a:visited {
    bottom: -28px;
  }

  /*--------------------------------
  中間タイトル＋テキスト
  --------------------------------*/
  .introTxt {
      padding: 25px 0;
      line-height: 30px;
  }

  /*--------------------------------
  各プラン見出し
  --------------------------------*/
  .freeplan {
    padding-top: 20px;
    border-top: solid 10px #4575b4;
  }

  .basicplan {
    padding-top: 20px;
    border-top: solid 10px #e4555e;
  }

  .businessplan {
    padding-top: 20px;
    border-top: solid 10px #7054b1;
  }

  .premiumplan {
    padding-top: 20px;
    border-top: solid 10px #1a1a1a;
  }

  .plan_name {padding-bottom: 20px; font-size: 24px;font-weight: bold !important;}
  .plan_price {padding-bottom: 20px;font-size: 24px;font-weight: bold !important;}
  .plan_term {padding-bottom: 20px; font-size: 12px;}

  /* リンクボタン */
  a:link.freebtn {
    width: 80%;
    padding: 21px 0 19px;
    font-weight: bold;
  }
  a:link.basicbtn {
    width: 80%;
    padding: 21px 0 19px;
    font-weight: bold;
  }

  a:link.businessbtn {
    width: 80%;
    padding: 21px 0 19px;
    font-weight: bold;
  }

  a:link.premiumbtn {
    width: 80%;
    padding: 21px 0 19px;
    font-weight: bold;
  }
  .plan_list {
    display: table-header-group;
  }
  .plan_list_sp {
    display: none;
  }

  .yearPlanDetail1 {
    display: inline;
  }
  .yearPlanDetail2 {
    display: none;
  }
}

  /*--------------------------------
  スマホ版とPC/タブレッド版で料金プラン表の表側/表内の文言を変更する
  --------------------------------*/
@media screen and (min-width: 768px) {
  .plan_list_sp_side {
    display: none;
  }
}

@media screen and (max-width: 767px) {
    .plan_list_sp_side {
    font-size: 10px;
  }

  .plan_list_pc_tablet_inside {
    display: none;
  }
}