@charset "utf-8";

/* ------------------ media ------------------ */
.pc_only {
}
.mobile_only {
  display:none;
}
/* ------------------ tags ------------------ */
* {
  margin:0;
  padding:0;
  font-weight:normal;
  font-size: 20px;
//  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, sans-serif;
  font-family: "Helvetica Neue", Helvetica, Arial, "Droid Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "돋움", Dotum, sans-serif;
  text-decoration:none;
}
body {
  background-color:#fff;
}
div {
  box-sizing:border-box;
}
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }

/* ------------------ generic class ------------------ */
.left {
  float:left;
}
.right {
  float:right;
}
.clear {
  clear:both;
}
/* ------------------ header navi_bar ------------------ */
.navi_bar_pc {
  background-color:#fff;
  border:none;
//  color:#3d4233;
}
.navi_bar_pc.fixed {
  position:fixed;
  top:0;
  left:0;
//  width:100vw;
  width:100%;
  background-color:#63a7fb;
  box-shadow:0px 0px 3px 0 #345c8e;
}
.navi_bar_pc.fixed.display_none {
//  display:none;
}
.navi_logo {
  width:80px;
}
.navi_logo_box {
  padding:8px 10px 0 10px;
}
.navi_operation_box {
  padding:0 10px 0 10px;
  height:50px;
  line-height:50px;
  color:#1f4170;
}
.navi_operation_box:hover {
  color:#ff4717;
  background-color:#edf4ff;
}
.navi_bar_pc.fixed .navi_operation_box {
  color:#fff;
}
.navi_bar_pc.fixed .navi_operation_box:hover {
  color:#1f4170;
}
.navi_apply_free:hover {
  color:#fff;
  background-color:#transparent;
  opacity:0.8;
}
.navi_bar_mobile {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:45px;
  background-color:#63a7fb;
  background-color:#fff;
//  border-top:solid 1px #5b8bc6;
  border-bottom:solid 1px #5b8bc6;
}
.navi_bar_mobile_menu {
  height:45px;
  width:45px;
  font-size:24px;
  line-height:45px;
  vertical-align:top;
  text-align:center;
  color:#0070c0;
}
.navi_bar_mobile_menu:hover {
  opacity:0.8;
}
.navi_bar_mobile_logo_box {
  padding:5px 0 0 5px;
}
.navi_menu_mobile {
  position:fixed;
  top:45px;
  left:0;
  width:210px;
  height:calc(100vh - 45px);
  background-color:#63a7fb;
  box-shadow:0px 3px 3px 0 #4b5176;
  padding-top:20px;
}
.navi_menu_mobile_line {
  wodth:100%;
  margin:0 0 15px 5px;
  padding:2px 10px;
  font-size:21px;
  color:#fff;
  background-color:#63a7fb;
}
.navi_menu_mobile_line:hover {
  color:#4b5176;
  background-color:#fff;
}
.navi_apply_free {
  display: block;
  background-color:#ff5e39;
  color:#fff;
  padding:0px 15px;
  height:34px;
  line-height:34px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  margin:8px;
}

/* ------------------ header block ------------------ */
.header {
}
.header_title_box {
  color:#header_description_label;
  background-color:#63a7fb;
  overflow:hidden;
}
.header_description_box {
  width:50vw;
}
. {
  margin:10px 0 0 0;
}
._title {
  text-align:center;
  padding:0;
}
._title_logo {
  width:180px;
}
._text {
  margin:0 auto;
  width:560px;
  max-width:100%;
  color:#313158;
  text-align:center;
  font-size:18px;
}
.header_description {
  padding:0 0 0 20px;
  text-align:left;
  color:#fff;
  font-size:38px;
  line-height:64px;
  margin:70px 0 0 0;
}
.header_description_text {
  margin:5px auto;
  text-align:center;
  padding:10px 0 10px 20px;
  vertical-align:middle;
  color:#353f2e;
  font-size:26px;
}
.header_action_box {
 width:50vw;
 text-slign:center;
}
.header_img_box {
  width:48vw;
  max-height:450px;
  overflow:hidden;
}
.header_img {
  width:750px;
  margin:60px 0 0 20px;
  box-shadow:-3px -3px 30px 0 #345c8e;
  border-radius:15px;
}
/* ------------------ header_box ------------------ */
.header_feature_box_outer {
  margin:0 20px;
}
.header_feature_box {
  width:calc((100vw - 60px)/2);
  min-height:280px;
  background-color:#fff;
  float:left;
  box-sizing:border-box;
  padding:8px;
  margin-bottom:10px;
}
.header_feature_box:hover {
  background-color:#ebfffd;
}
.header_feature_title {
  text-align:center;
  font-weight:bold;
  color:#007d70;
  text-decoration:underline;
  min-height:40px;
  overflow:hidden;
  whitespace:nowrap;
}
.header_feature_content {
  box-sizing:border-box;
  text-align:left;
  font-size:0.9em;
  min-height:100px;
}
.header_feature_image {
  min-height:100px;

}
/* ------------------ action block ------------------ */
.action_box {
  margin:40px 0;
  width:100%;
}
.flat-button {
  width:300px;
  height:46px;
  line-height:46px;
  vertical-align:middle;
  text-align:center;
  margin:0 auto;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  font-size:22px;
  text-decoration:none;
  background-color:#f9f7f7;
}
.flat-button:hover, .flat-button:active {
  opacity:0.9;
}
.flat-button.blue {
  color:#fff;
  background-color:#1b7dc8;
}
.flat-button.green {
  color:#fff;
  background-color:#1abb00;
}
.flat-button.orange {
  color:#fff;
  background-color:#ff5e39;
}

/* ------------------ content block ------------------ */
.content_block {
  margin:0;
  padding:10px 0 20px 0;
}
.content_block_title {
  margin-top:10px;
  padding:40px 10px 10px 10px;
  text-align:center;
}
.content_block_title h2 {
  font-size:38px;
}
.content_block_body {
  
}
.content_block_body_line {
  padding:20px 0 20px 0px;
}
.content_block_body_line:hover {
//  background-color:#ffffe6;
}
.content_block_body_line.yellow {
  background-color:#ffffd9;
}
.content_block_body_line.yellow:hover {
//  background-color:#ffffcc;
}
.content_block_description {
  width:calc(52vw - 20px);
  margin:60px 0;
}
.content_block_description_left {
  padding:0 20px;
  float:left;
}
.content_block_description_right {
  padding:0 20px;
  float:right;
}
.content_block_description_title {
  text-align:center;
  margin:30px 0 20px 0;
}
.content_block_description_title h3 {
  font-size:28px;
}
.content_block_description_content {
  font-size:24px;
}
.content_block_image_box {
  width:48vw;
  height:400px;
  overflow:hidden;
  border-radius:10px;
}
.content_block_image_box_right {
  float:right;
}
.content_block_image_box_left {
  float:left;
}
.content_block_image {
  overflow:hidden;
}
/* ------------------ price_baord ------------------ */
.price_baord_outer {
  width:1105px;
  margin:0 auto;
  padding:10px 20px;
  text-align:;
}
.price_baord_server_type {
//  border:solid 1px #ddd;
  margin-bottom:3px;
  text-align:center;
  margin-right:3px;
  background-color:#eee;
  color:#53534c;
}
.price_baord_server_type.shared {
//  border:solid 1px #f45a37;
}
.price_baord_server_type.designated {
//  border:solid 1px #12bc6a;
}
.price_baord {
  width:210px;
  margin-right:3px;
}
.price_baord_head {
  background-color:#ddd;
  color:#fff;
  font-weight:bold;
  text-align:center;
  height:50px;
  line-height:50px;
  box-sizing: border-box;
}
.price_baord_head._1 {
  background-color:#fff;
  border:solid 2px #b8e0e3;
  color:#035960;
}
.price_baord_head._2 {
  background-color:#3bcbd6;
}
.price_baord_head._3 {
  background-color:#2cb3bd;
}
.price_baord_head._4 {
  background-color:#228f98;
}
.price_baord_head._5 {
  background-color:#11747c;
}
.push_plan {
  position:relative;
  left: -60px;
  top: -77px;
  display: inline-block;
  padding: 6px 8px;
  background: #ffd800;
  color: #444;
  line-height: 1;
  font-size: 13px;
  border-radius: 3px;
  font-weight: bold;
}
.price_baord_body {
  background-color:#fff;
  border:solid 1px #ddd;
  border-top:none;
  min-height:700px;
}
// .price_baord_body:hover {
//   background-color:#f5fff8;
// }
.price_baord_body_price {
  text-align:center;
  text-align:center;
  padding:10px 0;
}
.price_baord_body_price_text {
  display:inline;
  font-size:20px;
  line-height:40px;
  vertical-align:bottom;
  color:#777;
}
.price_baord_body_price_price {
  display:inline;
  font-size:38px;
  line-height:45px;
  vertical-align:bottom;
  color:#333;
}
.price_baord_body_desctiption {
  padding:10px 5px;
  font-size:16px;
  min-height:60px;
}
.price_baord_body_limitation {
  background-color:#fafafa;
  padding:5px 0;
  min-height:130px;
}
.price_baord_body:hover .price_baord_body_limitation {
  background-color:#e7ebeb;
}
.price_baord_body_limitation_line {
  text-align:center;
//  border-bottom:dotted 1px #eee;
  margin:0 2px;
  font-size:16px;
}
.price_baord_body_limitation_line_title {
  font-size:14px;
  text-align:right;
  line-height:24px;
  vertical-align:middle;
}
.price_baord_body_limitation_line_value {
  font-size:18px;
  font-weight:bold;
  text-align:left;
  color:#555;
  line-height:24px;
  vertical-align:middle;
}
.price_baord_body_finction {
  padding:15px 3px;
}
.price_baord_body_finction_line {
  font-size:16px;
  color:#717461;
  padding:7px 2px;
}
.price_baord_body_finction_line_icon {
  font-size:18px;
  margin-right:5px;
}
.price_baord_body_finction_line_icon._1 {
  color:#b8e0e3;
}
.price_baord_body_finction_line_icon._2 {
  color:#3bcbd6;
}
.price_baord_body_finction_line_icon._3 {
  color:#2cb3bd;
}
.price_baord_body_finction_line_icon._4 {
  color:#228f98;
}
.price_baord_body_finction_line_icon._5 {
  color:#11747c;
}
/* ------------------ apply free dialog ------------------ */
.apply_free_dialog {
  position:fixed;
  margin-left:5px;
  top:40px;
  right:0;
//  background-color:#fff;
  z-index:100;
}
.apply_free_dialog_head {
  padding:5px 10px;
  border:solid 1px #999;
  border-right:none;
  border-bottom:solid 1px #e5e5e5;
  text-align: left;
//  background-color:#fff;
  background-color:#e4ffd3;
  border-top-left-radius: 7px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 7px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-top-left-radius: 7px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
}
.apply_free_dialog_logo {
  width:70px;
}
.apply_free_dialog_title {
  padding-left:3px;
  line-height:32px;
  vertical-align:bottom;
}
.apply_free_close {
  cursor:pointer;
  padding:0 7px;
}
.apply_free_close_icon {
  font-size: 14px;
  color: #264b41;
  font-weight:100;
}
.apply_input_icon_box {
  padding:7px 5px 5px 0;
  width:25px;
}
.apply_input_icon {
  font-size:0.9em;
  color:#4d5582;
}
.apply_free_dialog_body {
  font-size: 0.9em;
  border:solid 1px #999;
  border-top:none;
  border-right:none;
//  background-color:#fff;
  background-color:#f8fff3;
  padding:7px 5px 10px 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 7px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 7px;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 7px;
}
.apply_free_dialog_body * {
  font-size: inherit;
}
.message_box_outer {
}
.message_box {
  padding:3px;
  margin-bottom:5px;
  font-size:0.9em;
  background-color:#fff;
}
.message_box.red {
  border:solid 1px #f00;
}
.apply_free_body_description {
  max-width:400px;
}
.apply_free_body_icon {
  width:90px;
}
.apply_input {
//  width:calc(100% - 40px);
//  width:300px;
  width:100%;
}
.notice_box {
  padding:5px 0 5px 0;
  font-size:0.9em;
  text-align:center;
}
.submit_box {
//  padding:5px;
  text-align:center;
}
/* ------------------ apply free result dialog ------------------ */
.apply_free_result_dialog {
  position:fixed;
  width:500px;
//  height:500px;
  background-color:#fff;
  z-index:290;
  border:solid 1px #999;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}
.apply_free_result_dialog_header {
  padding:5px;
  background-color:#bdd6fe;
  border-bottom:solid 1px #e5e5e5;
}
.body_block {
  padding:15px 10px;
  margin:0 auto;
}
.top_message {
  font-size: 0.9em;
  font-weight:bold;
  padding:0 5px;
}
.login_desc_box {
  font-size: 0.9em;
  padding:0 5px;
}
.login_desc_icon {
  width:130px;
}
.login_info_box {
  font-size: 0.9em;
  border:solid 1px #bbb;
  padding:10px;
  margin:5px 0 10px 0;
  background-color:#fff8f3;
}
.login_info_box_td {
  padding:3px 5px;
  font-size: 0.9em;
}
.login_info_box_td_label {
  white-space: nowrap;
}
.login_info_box_td_content {
  text-align:left;
  word-break: break-all;
}
.login_confirm_box {
  text-align:center;
}

@media screen and (min-width: 0px) and (max-width: 720px) {
  .apply_free_result_dialog {
    width:calc(100vw - 10px);
    margin:0 auto;
  }
  .top_message {
    font-size:1.2em;
  }
}

/* ------------------ inpage_submit_btn ------------------ */
.inpage_submit_btn {
  position:relative;
}
.inpage_submit_btn.on_loading {
}
.inpage_submit_label {
}
.inpage_submit_loading {
  width:30px;
  height:30px;
  position:absolute;
//  left:100px;
  left:calc(100% / 2 - 20px);
//  width:100%;
  text-align:center;
  display:inline;
//  display:inline-block;
  margin-top:8px;
}
.inpage_submit_loading>img {
}
.inpage_submit_btn>.inpage_submit_loading {
  display:none;
}
.inpage_submit_btn.on_loading>.inpage_submit_loading {
  display:inline;
}


/* ------------------ footer ------------------ */
.footer {
  margin-top:10px;
  border-top:solid 1px #eee;
  background-color:#f7f9ff;
//  height:30px;
  line-height:30px;
  vertical-align:middle;
  text-align:center;
  color:#666;
  width:100vw;
  padding:3px 0;
}
.copyright {
  border-top:solid 2px #ddd;
  background-color:#f9f9f9;
  padding-bottom:10px;
//  height:30px;
  line-height:30px;
  vertical-align:middle;
  text-align:center;
  color:#666;
}