@charset "UTF-8";

/*
 * コンテンツタイトル 背景画像
 */

/* 証明書詳細 */
.layout_content-title {
  background: url(../common/images/bg_content-title_brand.png) no-repeat right bottom;
  background-size: cover;
  color: #fff;
}

/* ブランドトップ */
.layout_content-title.side-logo {
  background: url(../common/images/bg_content-title_brand-top.png) repeat-x center bottom #777;
  background-size: cover;
}

/*
 * 料金・仕様
 */

.brand-price_table {
  margin: 0 0 1rem;
}

.brand-price_table .fa {
  vertical-align: middle;
  margin: 0 1rem 0 0;
}

/*
 * 料金・仕様
 */

/* 認証レベル キーアイコン */
.brand-price_table .brand-price_icon-key {
  vertical-align: baseline;
}

/*
 * ご利用の流れ フロー図
 */

.symantec-flow {
  display: flex;
  margin: 0 0 2rem;
}

.symantec-flow .symantec-flow-box {
  flex: auto;
  white-space: nowrap;
  text-align: center;
  position: relative;
  line-height: 5rem;
  margin: 0 2rem 0 1rem;
}

.symantec-flow .symantec-flow-box::before {
  /*
  フロー図の左側につけるための三角形
  border-top, border-botomの色指定はそれぞれ個別に指定する
  */
  content: "";
  height: 0;
  border-top: solid 2.5rem;
  border-bottom: solid 2.5rem;
  border-left: solid 2rem #fff;
  position: absolute;
  top: 0;
  left: -2rem;
}

.symantec-flow .symantec-flow-box::after {
  /*
  フロー図の右側につけるための三角形
  border-top, border-botomの色指定はそれぞれ個別に指定する
  */
  content: "";
  height: 0;
  border-top: solid 2.5rem rgba(0, 0, 0, 0);
  border-bottom: solid 2.5rem rgba(0, 0, 0, 0);
  border-left: solid 2rem;
  position: absolute;
  top: 0;
  right: -2rem;
  z-index: 4;
}

/* フロー図 CSRの作成 */
.symantec-flow .symantec-flow-box:first-child {
  margin-left: 0;
  background-color: #fddb2b;
}

.symantec-flow .symantec-flow-box:first-child::before {
  display: none;
  border: none;
}

.symantec-flow .symantec-flow-box:first-child::after {
  border-left-color: #fddb2b;
}

/* フロー図 お申し込み */
.symantec-flow .symantec-flow-box:nth-child(2) {
  background-color: #fcd825;
}

.symantec-flow .symantec-flow-box:nth-child(2)::before {
  border-top-color: #fcd825;
  border-bottom-color: #fcd825;
}

.symantec-flow .symantec-flow-box:nth-child(2)::after {
  border-left-color: #fcd825;
}

/* フロー図 お支払い */
.symantec-flow .symantec-flow-box:nth-child(3) {
  background-color: #fbd41d;
}

.symantec-flow .symantec-flow-box:nth-child(3)::before {
  border-top-color: #fbd41d;
  border-bottom-color: #fbd41d;
}

.symantec-flow .symantec-flow-box:nth-child(3)::after {
  border-left-color: #fbd41d;
}

/* フロー図 書類の準備・審査 */
.symantec-flow .symantec-flow-box:nth-child(4) {
  background-color: #f9cf14;
}

.symantec-flow .symantec-flow-box:nth-child(4)::before {
  border-top-color: #f9cf14;
  border-bottom-color: #f9cf14;
}

.symantec-flow .symantec-flow-box:nth-child(4)::after {
  border-left-color: #f9cf14;
}

/* フロー図 証明書発行インストール */
.symantec-flow .symantec-flow-box:last-child {
  background-color: #f8cb0d;
  line-height: 1.5;
  padding: 1rem 0;
}

.symantec-flow .symantec-flow-box:last-child::before {
  border-top-color: #f8cb0d;
  border-bottom-color: #f8cb0d;
}

.symantec-flow .symantec-flow-box:last-child::after {
  border-left-color: #f8cb0d;
}

/* さくらのレンタルサーバをご利用中の方 */
.section_user {
  border: 1px solid #b5b5b5;
  border-radius: 0.3rem;
  margin: 2rem 1rem;
  padding: 1rem;
}

.section_user .layout_link-box {
  margin: 0;
}

.section_user .head4_default {
  margin: 0 0 1rem 2rem;
  text-indent: -0.9rem;
}

.table_th-top {
  margin: 0 0 1rem;
}

/* スマホ 幅が 0px - 599px */
@media screen and (max-width: 599px) {
  /*
   * 料金・仕様 認証レベル
   */
  .brand-price_address-bar .address-bar_browser {
    display: block;
  }

  .brand-price_address-bar .address-bar_image {
    display: block;
    padding: 0;
    margin: 0 0 1rem;
  }

  .brand-price_address-bar .address-bar_image.ev img {
    width: 240px;
    height: auto;
  }

  /*
  * ご利用の流れ フロー図
  */
  .symantec-flow {
    margin: 0 1rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .symantec-flow .symantec-flow-box {
    margin-bottom: 1rem;
  }

  .symantec-flow .symantec-flow-box:nth-child(4),
  .symantec-flow .symantec-flow-box:last-child {
    /* 書類の準備・審査と証明書発行インストールの長さを調整 */
    flex: initial;
  }
}

/* PC 幅が 600px 以上 */
@media screen and (min-width: 600px) {
  /*
   * コンテンツタイトル 背景画像
   */
  .contents-title-inner {
    padding: 2rem 0;
  }

  /* ブランドトップ */
  .layout_content-title.side-logo {
    background-size: contain;
  }

  .layout_content-title.side-logo .contents-title-inner {
    padding: 4rem 0;
  }

  /*
   * 料金・仕様
   */

  /* ブラウザアドレスバー表示 */
  .brand-price_table .address-bar_image {
    padding: 0.5rem 1rem;
  }

  /* 料金・仕様 ボタン */
  .brand-price_table .brand-price_table-btn {
    width: 14rem;
  }

  /* さくらのレンタルサーバをご利用中の方 */
  .section_user {
    margin: 2rem 0;
    padding: 1rem 2rem;
  }
}