@charset "utf-8";

/* ========================================
Common
======================================== */

.layout_main section {
  margin: 0;
  padding-top: 56px;
  padding-bottom: 56px;
}

.layout_main section.-no-pt {
  padding-top: 0;
}

.cb {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* --------------------
link
-------------------- */

section a,
aside a {
  text-decoration: none;
}

/* --------------------
headline
-------------------- */

.hl {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
}

.hl_plan-fanc {
  margin: 30px 0 10px;
}

/* --------------------
btn
-------------------- */

@media (min-width: 600px) {
  .btn {
    width: 350px;
  }
}

/* --------------------
device
-------------------- */

.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 599px) {
  .cb {
    width: calc(100% - 40px);
  }

  #hero .cb {
    width: calc(100% - 30px);
  }

  .hl {
    font-size: 22px;
    line-height: 1.3;
  }

  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* ========================================
hero
======================================== */

#hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

#lite #hero,
#standard #hero,
#premium #hero {
  background-color: #faf5f0;
  color: #163954;
}

#business #hero,
#pro #hero,
#managedserver #hero {
  background-color: #4a7ea1;
  color: #fff;
}

.hero-label {
  font-size: 14px;
  font-weight: normal;
  display: flex;
  margin-bottom: 13px;
}

.hero-plan {
  border: 1px solid;
  padding: 1px 7px;
}

#lite .hero-plan,
#standard .hero-plan,
#premium .hero-plan {
  border-color: #718492;
}

.hero-label .emphasis {
  background: #ff001e;
  color: #fff;
  font-size: 11px;
  margin-right: 2px;
  padding: 4px 8px;
}

.hero-title {
  margin-bottom: 5px;
  font-size: 28px;
}

.hero-description {
  margin-bottom: 34px;
  font-size: 16px;
  font-weight: normal;
}

#lite .hero-description,
#lite .hero-annotation,
#standard .hero-description,
#premium .hero-description {
  text-shadow: 1px 1px 2px #faf5f0, 0 0 10px #faf5f0;
}

.hero-unit {
  display: flex;
  align-items: center;
}

.hero-performance {
  display: flex;
  align-items: baseline;
}

.hero-performance .head {
  font-size: 12px;
}

.hero-performance .monthly-price,
.hero-performance .disk-space {
  font-size: 18px;
}

.hero-performance .monthly-price {
  border-right: 1px solid;
  margin-right: 10px;
  padding-right: 10px;
}

.hero-performance .storage-tag {
  margin-left: 5px;
  color: #f80;
}

#lite .hero-performance .monthly-price,
#standard .hero-performance .monthly-price,
#premium .hero-performance .monthly-price {
  border-right-color: #718492;
}

.hero-performance .emphasis {
  font-size: 28px;
  line-height: 1;
  margin-left: 2px;
}

.hero_btn-apply {
  border-radius: 3px;
  background-color: #f80;
  color: #fff;
  display: block;
  font-size: 14px;
  line-height: 39px;
  margin-left: 21px;
  text-align: center;
  text-decoration: none;
  width: 210px;
}

.hero_btn-apply:hover {
  opacity: 0.8;
}

.hero-annotation {
  display: flex;
  margin-top: 16px;
}

.hero-annotation::before {
  content: '※';
  margin-right: 0.2rem;
}

.hero-annotation-link {
  color: #568cc5;
}

@media (max-width: 599px) {
  #hero {
    height: 460px;
    background: no-repeat center center;
    background-size: cover;
  }

  #lite #hero {
    background-image: url("../images/plan/sp_visual_lite.png");
  }

  #standard #hero {
    background-image: url("../images/plan/sp_visual_standard.png");
  }

  #premium #hero {
    background-image: url("../images/plan/sp_visual_premium.png");
  }

  #business #hero {
    background-image: url("../images/plan/sp_visual_business.png");
  }

  #pro #hero {
    background-image: url("../images/plan/sp_visual_businesspro.png");
  }

  #managedserver #hero {
    background-image: url("../images/plan/sp_visual_managed.png");
  }

  .hero-label {
    font-size: 16px;
    margin-bottom: 24px;
    justify-content: center;
  }

  .hero-label .emphasis {
    font-size: 13px;
  }

  .hero-title {
    margin-bottom: 13px;
    text-align: center;
  }

  .hero-description {
    text-align: center;
  }

  .hero-description br {
    display: none;
  }

  .hero-unit {
    flex-direction: column;
  }

  .hero-performance .head {
    font-size: 14px;
  }

  .hero_btn-apply {
    line-height: 48px;
    font-size: 18px;
    margin-left: 0;
    margin-top: 40px;
    width: calc(100% - 30px);
  }

  .hero-annotation {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 30px);
  }

  .hero-performance .storage-tag {
    display: none;
  }
}

/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  #hero {
    height: 307px;
  }

  #hero::before {
    content: url("../images/plan/sub_orange_left.svg");
    display: block;
    left: calc(50% - 700px);
    position: absolute;
    top: 0;
    width: 203px;
  }

  #hero::after {
    content: url("../images/plan/sub_orange_right.svg");
    display: block;
    position: absolute;
    right: calc(50% - 700px);
    top: 0;
    width: 169px;
  }

  #hero {
    background: no-repeat center right;
  }

  #lite #hero {
    background-image: url("../images/plan/pc_visual_lite.jpg");
  }

  #standard #hero {
    background-image: url("../images/plan/pc_visual_standard.jpg");
  }

  #premium #hero {
    background-image: url("../images/plan/pc_visual_premium.jpg");
  }

  #business #hero {
    background-image: url("../images/plan/pc_visual_business.jpg");
  }

  #pro #hero {
    background-image: url("../images/plan/pc_visual_businesspro.jpg");
  }

  #managedserver #hero {
    background-image: url("../images/plan/pc_visual_managed.jpg");
  }
}

@media (min-width: 1400px) {
  #hero::before {
    left: 0;
  }

  #hero::after {
    right: -2px;
  }
}

/* ----- mailbox ----- */

#mailbox #hero {
  background-color: #fcefe2;
  color: #163954;
}

#mailbox .hero-icon-figure {
  margin: 30px auto;
  width: 84px;
}

#mailbox .hero-performance {
  margin: 30px auto 25px;
  width: 260px;
}

#mailbox .hero-performance .monthly-price {
  border-right-color: #718492;
}

#mailbox .hero-icon-img {
  filter: drop-shadow(10px 15px 8px #d1ae86);
  height: auto;
  width: 100%;
}

#mailbox .hero_btn-apply {
  margin: 0 auto;
}

#mailbox .hero-functions {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px 20px 0;
}

#mailbox .hero-functions .function-icon {
  border: none;
  flex-basis: 40px;
  margin-bottom: 20px;
}

#mailbox .hero-functions .function-content {
  flex-basis: calc((100% - 40px*2) / 2);
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 0;
}

@media screen and (max-width: 599px) {
  #mailbox #hero {
    height: auto;
    padding: 50px 0;
  }
}

@media screen and (min-width: 600px) {
  #mailbox .hero-icon-figure {
    filter: drop-shadow(50px 50px 20px #d1ae86);
    left: 50%;
    margin: 0 0 0 250px;
    position: absolute;
    top: 30px;
    width: 150px;
    z-index: 0;
  }

  #mailbox .hero-performance {
    margin-left: 0;
  }

  #mailbox .hero_btn-apply {
    margin: 0;
  }

  #mailbox .hero-functions {
    float: right;
    margin-top: -95px;
    position: relative;
    width: 630px;
  }

  #mailbox .hero-functions .function-icon {
    flex-basis: 60px;
    font-size: 14px;
    text-align: center;
  }

  #mailbox .hero-functions .function-icon-img {
    height: auto;
    width: 43px;
  }

  #mailbox .hero-functions .function-content {
    flex-basis: auto;
    flex-grow: 1;
  }
}

/* ========================================
feature
======================================== */

#feature {
  padding-bottom: 30px;
}

#mailbox #feature {
  padding-top: 0;
  padding-bottom: 0;
}

.feature-box-wrap {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.feature-box {
  width: 280px;
}

.feature-box_link {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-box_link:hover {
  opacity: 0.7;
}

.feature-box_icon-img {
  display: flex;
  justify-content: center;
}

.feature-box_head {
  margin-top: 21px;
  text-align: center;
  font-size: 16px;
  color: #163954;
}

.feature-box_description {
  margin-top: 21px;
  color: #444;
}

@media (max-width: 599px) {
  .feature-box-wrap {
    flex-direction: column;
  }

  .feature-box {
    width: 100%;
  }

  .feature-box:nth-of-type(n+2) {
    margin-top: 34px;
  }
}

/* ========================================
plan
======================================== */

#plan {
  background-color: #eff4f8;
  border-top: 26px solid #fff;
}

#mailbox #plan {
  /* メールボックスプランページ　CSS */
  border-top: none;
  padding-bottom: 0;
}

/* --------------------
navigation
-------------------- */

.plans-nav {
  display: flex;
  list-style: none;
  margin-bottom: 48px;
}

.plans-nav-item {
  color: #163954;
  text-align: center;
  width: 192px;
}

.plans-nav-item.selected {
  border-bottom: 3px solid #426077;
}

.plans-nav-item_link {
  border-bottom: 3px solid transparent;
  box-shadow: 0 1px 0 0 #dbdbdb;
  color: inherit;
  display: block;
  height: 30px;
  text-decoration: none;
}

.plans-nav-item_link:hover {
  border-bottom: 3px solid #426077;
  box-shadow: none;
  color: #568cc5;
  margin: 0 2px;
  width: 188px;
}

@media (max-width: 599px) {
  .plans-nav {
    display: none;
  }
}

/* --------------------
function_comparison
-------------------- */

.function_comparison {
  margin: 50px 0 10px;
}

ul.func-list {
  display: flex;
  width: 960px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0 0;
}

ul.func-list li.func-list_none {
  opacity: 0.4;
  pointer-events: none;
}

ul.func-list li.func-list_none a {
  color: #444;
}

ul.func-list li {
  width: 155px;
  list-style: none;
  text-align: center;
  margin: 0 0 30px;
}

ul.func-list li a {
  color: #568cc5;
}

ul.func-list li figure {
  margin: 0 0 15px;
}

ul.func-list li a:hover {
  text-decoration: underline;
}

@media (max-width: 599px) {
  ul.func-list {
    width: 100%;
  }

  ul.func-list li {
    width: 30%;
  }

  .sp-none {
    display: none;
  }
}

/* --------------------
fanc_all
-------------------- */

.fanc_all p {
  margin: 0 auto;
  width: 580px;
  text-align: center;
}

.fanc_all .headline {
  font-size: 18px;
  margin: 0 0 20px;
  text-align: center;
}

@media (max-width: 599px) {
  .fanc_all p {
    width: 100%;
  }
}

/* --------------------
overview
-------------------- */

.overview {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.overview-table_head,
.overview-table_thead-head {
  width: 120px;
  min-width: 120px;
  padding: 15px;
  background: #426077;
  color: #fff;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

.overview-table_row {
  width: 100px;
}

.overview-table_data,
.overview-table_thead-data {
  padding: 16px;
  background: #fff;
  vertical-align: middle;
}

.overview-table_row:nth-of-type(n+2) .overview-table_head,
.overview-table_row:nth-of-type(n+2) .overview-table_data {
  border-top: 1px solid #e0e0e0;
}

.overview-table_data .emphasis.price {
  margin-bottom: 10px;
}

.emphasis-balloon {
  position: relative;
  background: #fff;
  display: inline-block;
  padding: 4px 12px;
  text-align: center;
  border: 1px solid #ff0001;
  color: #ff0001;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  margin-left: 24px;
}

.emphasis-balloon::after,.emphasis-balloon::before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  right: 100%;
  top: 50%;
}

.emphasis-balloon::after {
  border-color: rgba(255, 255, 255, 0);
  border-width: 8px;
  margin-top: -8px;
  border-right-color: #fff;
}

.emphasis-balloon::before {
  border-color: rgba(255, 0, 1, 0);
  border-width: 8px;
  margin-top: -8px;
  margin-right: 1px;
  border-right-color: #ff0001;
}

.emphasis-balloon-strong {
  font-weight: bold;
  margin: 6px;
}

.overview-table_data .emphasis.storage {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.overview-table_data .disk-space {
  font-style: normal;
}

.overview-table_data .storage-wrap {
  display: flex;
  align-items: flex-start;
}

.overview-table_data .part-name {
  margin: 0 0 0 5px;
  padding: 2px 6px 1px;
  display: inline-block;
  color: #fff;
  background: #fba24a;
  border-radius: 20px;
  box-sizing: border-box;
  font-size: 10px;
}

.overview-table_data .small {
  font-size: 12px;
}

.overview-table_data .emphasis-num {
  font-size: 32px;
  color: #f80;
  padding-left: 3px;
}

.present2023-convert {
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.present2023-convert .small {
  margin-left: 3px;
  color: #f80;
  font-weight: bold;
  font-size: 15px;
}

.overview-table_data .emphasis-present2023 {
  font-weight: bold;
}

.overview-table_data .emphasis-present2023-convert {
  padding: 8px;
  background-color: #f6f6f6;
  margin: 8px 8px 8px 24px;
}

.overview-table_data .additional-explanation {
  position: relative;
  margin-left: 11px;
  padding: 4px 3px;
  border: 1px solid #f80;
  color: #f80;
  border-radius: 4px;
}

.overview-table_data .additional-explanation::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 4px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right: 7px solid #f80;
}

.overview-table_data .additional-explanation::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 4px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right: 7px solid #fff;
}

/* ----- managed ----- */

#managedserver .overview-table_thead-data {
  color: #fff;
  background: #677f92;
  text-align: center;
}

#managedserver .overview-table_head,#managedserver .overview-table_data {
  border-top: 1px solid #e0e0e0;
}

#managedserver .overview-table_thead-data,
#managedserver .overview-table_data {
  border-left: 1px solid #e0e0e0;
}

#managedserver .emphasis-balloon {
  margin-top: 16px;
  margin-left: 0;
}

#managedserver .emphasis-balloon::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 20px;
  margin-left: -15px;
  border: 8px solid transparent;
  border-bottom: 8px solid #fff;
  z-index: 2;
}

#managedserver .emphasis-balloon::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  margin-left: -17px;
  border: 8px solid transparent;
  border-bottom: 8px solid #ff0001;
  z-index: 1;
}

@media (max-width: 599px) {
  .overview-table + .overview-table {
    margin-top: 30px;
  }

  .overview-table_thead,
  .overview-table_tbody {
    display: block;
  }

  .overview-table_row {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .overview-table_head,
  .overview-table_thead-head {
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0;
    width: 100%;
  }

  .overview-table_data,
  .overview-table_thead-data {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0;
  }

  .overview-table_thead-head,
  .overview-table_thead-data,
  .overview-table_row:first-of-type .overview-table_data:first-of-type {
    border-top: 0;
  }

  .overview-table_data .additional-explanation {
    display: block;
    width: 144px;
    margin: 13px 0 0;
    text-align: center;
  }

  .overview-table_data .additional-explanation::before {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    top: -15px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #f80;
  }

  .overview-table_data .additional-explanation::after {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    top: -13px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom: 8px solid #fff;
  }

  .overview-table .overview-table_row .align_row {
    border-top: none;
  }

  .emphasis-balloon::before,::after {
    display: none;
  }

  .emphasis-balloon {
    margin-left: 0;
    margin-top: 16px;
    padding: 4px;
  }

  #managedserver .overview-table_head {
    border: 0;
  }

  #managedserver .overview-table_thead-data, #managedserver .overview-table_data {
    border-left: 0;
  }
}

/* ----- mailbox scification ------ */

.specification {
  padding-bottom: 0;
}

@media (min-width: 600px) {
  .specification .overview-table {
    font-size: 12px;
  }

  .specification .title-link {
    color: #fff;

    /* 項目テキストのクリックイベントを無効にする */
    pointer-events: none;
  }

  /*
    ツールチップの設定
   */
  .specification .overview-table_head {
    cursor: default;
  }

  .overview-table_head .fas {
    display: inline-block;
    font-style: normal;
    font-size: 15px;
    font-weight: normal;
    margin: 0 auto;
    position: relative;
    width: 18px;
  }

  .overview-table_head .fas::before {
    position: absolute;
    top: -12px;
  }

  .tooltip {
    background-color: #163954;
    bottom: 28px;
    color: #fff;
    display: none;
    font-size: 12px;
    font-weight: normal;
    left: -15px;
    padding: 12px;
    position: absolute;
    text-align: right;
    width: 146px;
    z-index: 1;
  }

  .tooltip::before {
    border-top: 10px solid #163954;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: -9px;
    content: "";
    display: block;
    left: 12px;
    position: absolute;
  }

  .tooltip-description {
    display: block;
    text-align: left;
  }

  .tooltip-link {
    color: #fff;
    display: block;
    margin-top: 3px;
    text-align: right;
    text-decoration: none;
  }

  .tooltip-link::after {
    content: " >";
  }

  .tooltip-link:hover {
    text-decoration: underline;
  }
}

/*
  ツールチップ リンクの設定
 */

@media (max-width: 599px) {
  .specification .title-link {
    color: #80bfff;
    display: block;
  }

  /* ?アイコン 非表示 */
  .overview-table_head .fas {
    display: none;
  }
}

/* --------------------
planList
-------------------- */
.planList {
  display: flex;
  list-style: none;
}

.planList__item {
  width: 33%;
}

.planList__item:nth-child(3n + 2) {
  width: 34%;
}

.planList__item.-reco.-label .planList__item__wrap {
  padding: 0;
}

.planList__item.-reco .planListTtl {
  background: #4a7ea1;
}

.planList__item.-reco.-label .planListTtl {
  padding-top: 36px;
}

.planList__item:nth-child(3n + 2) {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
}

.planList__item:nth-child(3n + 2) .planListSpec {
  border-right: 1px solid #dbdbdb;
  border-left: 1px solid #dbdbdb;
}

.planList__item.-reco.-label .planListTtl::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 74px;
  height: 74px;
  background: url("../images/plan/planList_reco.png") top right / cover no-repeat;
}

.planList__item.-reco.-label .planListSpec {
  padding-bottom: 40px;
}

.planList__item.-reco .planListTtl__name {
  border-bottom: 1px solid #3d6f90;
}

.planList__item.-reco .planListTtl__entry__Cta {
  color: #fff;
  background: #ff7d00;
}

.planList__item:first-child .planListSpec {
  border-left: 1px solid #dbdbdb;
}

.planList__item:last-child .planListSpec {
  border-right: 1px solid #dbdbdb;
}

.planList__item__wrap {
  padding-top: 20px;
}

.planListTtl {
  padding: 16px 25px;
  position: relative;
  background: #6893b0;
  font-weight: 400;
  text-align: center;
  color: #fff;
}

.planListTtl__name {
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid #60859e;
}

.planListTtl__price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
}

.planListTtl__price .emphasis {
  margin: 0 5px;
  font-size: 28px;
  font-weight: 500;
}

.planListTtl__copy {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
}

.planListTtl__entry {
  margin-top: 16px;
}

.planListTtl__entry .planListTtl__entry__Cta {
  padding: 10px 20px;
  box-sizing: border-box;
  display: block;
  width: 100%;
  color: #4a7ea1;
  border: 1px solid #fff;
  font-weight: 500;
  border-radius: 2px;
  background: #fff;
}

.planListTtl__entry .planListTtl__entry__Cta:hover {
  opacity: 0.8;
}

.planListTtl__anchor {
  margin-top: 12px;
}

.planListTtl__anchor .planListTtl__anchor__link {
  color: #fff;
  text-decoration: underline;
  font-size: 12px;
  font-weight: 300;
}

.planListTtl__anchor .planListTtl__anchor__link:hover {
  opacity: 0.8;
}

.planListSpec {
  padding: 0 16px 20px;
  background: #fff;
  border-bottom: 1px solid #dbdbdb;
}

.planListSpec__item {
  padding: 10px 0;
  min-height: 40px;
  border-bottom: 1px solid #dbdbdb;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.planListSpec__item.-lg {
  min-height: 50px;
}

.planListSpec__item.-xl {
  min-height: 80px;
}

@media screen and (max-width: 599px) {
  .planListSpec__item.-lg {
    min-height: 40px;
  }

  .planListSpec__item.-xl {
    min-height: 40px;
  }
}

.planListSpec__item .itemCaption {
  width: 88px;
  font-size: 12px;
  color: #6893b0;
  line-height: 1.2;
  flex-shrink: 0;
}

.planListSpec__item .itemDetail {
  font-size: 12px;
  font-weight: 400;
}

.planListSpec__item .itemDetail__list {
  list-style: none;
}

.planListSpec__item .itemDetail__list__item {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.planListSpec__item .itemDetail__list__item.-annotation {
  margin-top: 2px;
  padding-left: 12px;
  position: relative;
  font-size: 11px;
  color: #888;
}

.planListSpec__item .itemDetail__list__item.-annotation::after {
  content: "※";
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  font-size: 10px;
}

.planListSpec__item .itemDetail .emphasis {
  margin-right: 2px;
  font-size: 18px;
  font-weight: 600;
}

.planListSpec__item .itemDetail .emphasis-hira {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 500;
}

@media screen and (max-width: 599px) {
  .planList {
    flex-direction: column;
  }

  .planList__item {
    width: 100%;
  }

  .planList__item:not(:first-child) {
    margin-top: 30px;
  }

  .planList__item.-reco {
    width: 100%;
  }

  .planList__item.-reco .planListTtl {
    padding-top: 20px;
  }

  .planList__item.-reco .planListSpec {
    padding-bottom: 20px;
  }

  .planList__item__wrap {
    padding-top: 0;
  }

  .planListSpec__item .itemCaption {
    width: 100px;
  }
}

/* --------------------
row-table
-------------------- */
.row-table {
  display: flex;
}

.row-table .payment-table:first-child {
  flex-shrink: 0;
  width: 50%;
}

.row-table .payment-table tr {
  height: 55px;
}

.row-table .payment-table:not(:first-child) .payment-table_head:first-child {
  display: none;
}

.row-table ul .notes-list-item {
  margin-top: 12px;
}

@media screen and (max-width: 599px) {
  .row-table {
    flex-direction: column;
  }

  .row-table .payment-table:first-child {
    width: 100%;
  }

  .row-table .payment-table .payment-table_head {
    flex-shrink: 0;
    width: 50%;
  }

  .row-table .payment-table .payment-table_head:first-child {
    width: 35%;
  }

  .row-table .payment-table:not(:first-child) .payment-table_head:first-child {
    display: table-cell;
  }
}

/* --------------------
func
-------------------- */

.func-table {
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
  width: 100%;
}

.func-table_data {
  background-color: #fff;
  overflow: hidden;
  padding: 15px 14px 15px 34px;
  position: relative;
  vertical-align: top;
  width: 25%;
}

.func-table_row:nth-of-type(n+2) .func-table_data {
  border-top: 1px solid #e0e0e0;
}

.func-table_data:nth-of-type(n+2) {
  border-left: 1px solid #e0e0e0;
}

.func-table_data .fa {
  color: #f80;
  left: 15px;
  position: absolute;
  top: 18px;
}

.func-table_data .fa-times {
  color: #444;
}

@media (max-width: 599px) {
  .func-table_data {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .func-table_data:nth-of-type(n+2) {
    border-top: 1px solid #e0e0e0;
    border-left: 0;
  }
}

/* ========================================
usable-service
======================================== */

#usable-service {
  background-color: #eff4f8;
}

.usable-service-wrap {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.usable-service-box {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
}

.usable-service-box_icon {
  width: 76px;
  margin-right: 28px;
}

.usable-service-box_text {
  width: calc(100% - 76px - 28px);
}

.usable-service-box_text .text-head {
  font-size: 18px;
  color: #163954;
}

.usable-service-box_text .text-description {
  margin-top: 13px;
}

.usable-service-box_btn {
  width: 200px;
  height: 34px;
  margin-top: 34px;
}

@media (max-width: 599px) {
  .usable-service-wrap {
    flex-direction: column;
  }

  .usable-service-box {
    width: 100%;
  }

  .usable-service-box + .usable-service-box {
    margin-top: 34px;
  }
}

/* ========================================
usage
======================================== */

/* --------------------
h3
-------------------- */

#usage .sub-headline:nth-of-type(n+2) {
  margin-top: 40px;
}

/* --------------------
table
-------------------- */

.payment-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 30px;
}

.payment-table tr.h-md {
  height: 80px;
}

.payment-table_head {
  width: 25%;
  padding: 15px;
  border: 1px solid #e2e2e2;
  background-color: #f6f6f6;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
}

.payment-table_data {
  border: 1px solid #e2e2e2;
  padding: 6px;
  text-align: center;
  font-size: 36px;
  color: #f80;
}

.payment-table_text {
  border: 1px solid #e2e2e2;
  padding: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
}

.payment-table_text b {
  font-size: 16px;
}

.payment-table_text .emphasis {
  color: #f80;
}

@media (max-width: 599px) {
  .payment-table {
    margin-top: 20px;
  }

  .payment-table tr.h-md {
    height: 72px;
  }

  .payment-table_text b {
    font-size: 14px;
  }
}

/* --------------------
aside
-------------------- */

.usage-link-unit {
  margin: 40px 0;
  padding: 20px;
  background-color: #f6f6f6;
}

.usage-link-unit .link-unit-list {
  list-style-type: none;
}

.usage-link-unit .link-unit-list-item + .link-unit-list-item {
  margin-top: 8px;
}

.usage-link-unit .fa {
  margin-right: 5px;
  color: #568cc5;
}

.usage-link-unit .link-unit-list_link {
  color: #568cc5;
}

.usage-link-unit .link-unit-list_link:hover {
  text-decoration: underline;
}

/* ========================================
about
managedserver page only
======================================== */

#about .hl-sub {
  margin-bottom: 21px;
  font-size: 18px;
  color: #163954;
  text-align: center;
}

#about .gfx {
  margin: 0 auto 56px;
  max-width: 765px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#about .gfx .gfx-img {
  width: 100%;
}

/* --------------------
group
-------------------- */

#about .group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px;
}

#about .group-list {
  width: 600px;
  list-style: none;
}

#about .group-list-item + .group-list-item {
  margin-top: 10px;
}

#about .group-list-item .fa {
  margin-right: 4px;
  color: #f80;
}

#about .group-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 330px;
  height: 105px;
  background-color: #eff4f8;
}

#about .group-icon-img + .group-icon-img {
  margin-left: 34px;
}

/* --------------------
aside
-------------------- */

.about-case_link {
  background: #fff;
  box-sizing: border-box;
  color: #568cc5;
  display: flex;
  justify-content: space-between;
  padding: 30px;
}

.about-case_link:hover {
  opacity: 0.7;
}

.about-case-info {
  width: 100%;
  max-width: 570px;
}

.about-case-info .case-company {
  margin-bottom: 12px;
  font-size: 16px;
  color: #163954;
}

.about-case-info .case-company .category {
  margin-right: 8px;
  padding: 6px;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  background: #426077;
}

.about-case-info .case-team {
  margin-bottom: 13px;
  font-size: 18px;
  color: #163954;
}

.about-case-info .case-details {
  margin-bottom: 13px;
  color: #444;
}

.about-case-info .case-link-text .fa {
  margin-right: 5px;
}

@media (max-width: 599px) {
  #about .gfx .gfx-img {
    width: 100%;
  }

  #about .group {
    flex-direction: column;
  }

  #about .group-icon-wrap {
    width: 100%;
  }

  #about .group-list {
    width: 100%;
    margin-top: 23px;
  }

  .about-case_link {
    flex-direction: column;
  }

  .about-case-picture > .picture-source,
  .about-case-picture > .picture-img {
    width: 100%;
  }

  .about-case-info .case-company {
    margin-top: 20px;
  }
}

/* --------------------
MAIL BOX PAGE only
-------------------- */

#mailbox .usable-webmail .hl {
  display: block;
  text-align: left;
  margin-bottom: 12px;
}

#mailbox .usable-webmail .btn {
  display: flex;
  height: 34px;
  width: 200px;
}

#mailbox .usable-others {
  margin-top: 40px;
  padding: 0 0 56px;
}

#mailbox .text-link {
  color: #568cc5;
  display: inline;
}

#mailbox .text-link:hover {
  text-decoration: underline;
}

#mailbox .usable-others-head {
  color: #163954;
  font-size: 18px;
  margin: 0;
  text-align: left;
}

#mailbox .overview-table + .overview-table {
  margin-top: 10px;
}

/* footer-feature */

#mailbox .footer-feature-item.manual.visible-only-mailbox {
  display: block;
}

#mailbox .footer-feature-item.download {
  /* manualを表示するため download を非表示します */
  display: none;
}

@media (max-width: 599px) {
  #mailbox .usable-webmail .hl {
    font-size: 22px;
  }

  #mailbox .usable-webmail-figure {
    display: block;
    margin: 20px 0;
    width: 100%;
  }

  #mailbox .usable-webmail-img {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 600px) {
  #mailbox .usable-webmail {
    min-height: 204px;
    position: relative;
  }

  #mailbox .usable-webmail .hl {
    font-size: 24px;
  }

  #mailbox .usable-webmail-figure {
    left: 50%;
    margin-left: -58px;
    position: absolute;
    top: 0;
  }

  #mailbox .usable-webmail .btn {
    margin-left: 0;
  }
}

/* --------------------
Font Awesome
-------------------- */

.fas::before {
  font-family: FontAwesome;
  font-style: normal;
}

.fas.fa-times {
  color: #404040;
}

.fas.fa-check {
  color: #f80;
}

/* --------------------
IE11 hack
スペースの調整
-------------------- */
@media all and (-ms-high-contrast: none) {
  .btn {
    box-sizing: border-box;
    padding: 5px 0 0;
  }

  .hero-label .emphasis {
    line-height: 1;
    padding: 8px 8px 0;
  }

  .hero-label .hero-plan {
    line-height: 1;
    padding: 6px 7px 0;
  }

  .hero_btn-apply {
    line-height: 1;
    padding: 15px 0 10px;
  }

  .func-table_data .fa {
    top: 14px;
  }
}