@charset "UTF-8";
/* 注意: このファイルを使用する前に、必ず bgl-common.css を読み込んでください。 */

/* =========================================
   Component: 料金カード (基本スタイル)
   ========================================= */

/* キャッチコピー */
.bgl-price-catch {
  text-align: center;
  color: #0077D9;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  /* 3カラム時の高さ崩れ防止用デフォルト */
  box-sizing: border-box;
}

.bgl-price-catch::before,
.bgl-price-catch::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  background-color: #0077D9;
}

.bgl-price-catch::before { transform: rotate(-25deg); }
.bgl-price-catch::after { transform: rotate(25deg); }

@media screen and (max-width: 767px) {
  .bgl-price-catch {
    font-size: 16px;
    margin-bottom: 20px;
  }
}

/* カード本体 */
.bgl-price-card {
  background-color: var(--bgl-bg-base);
  border: 1px solid var(--bgl-border-color);
  border-radius: 8px;
  box-shadow: var(--bgl-shadow-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* カードヘッダー */
.bgl-price-card__header {
  background-color: var(--bgl-bg-dark-blue);
  color: var(--bgl-color-white);
  padding: 30px 20px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .bgl-price-card__header { padding: 20px 15px; }
}

/* ヘッダー内の文字色強制 */
.bgl-price-card__header .bgl-text-body-m,
.bgl-price-card__header .bgl-text-body-s,
.bgl-price-card__header .bgl-text-price,
.bgl-price-card__header span,
.bgl-price-card__header p {
  color: #FFFFFF !important;
}

/* カードボディ */
.bgl-price-card__body {
  padding: 25px 30px;
  flex-grow: 1;
}

@media screen and (max-width: 767px) {
  .bgl-price-card__body { padding: 20px; }
}

/* スペックリスト (dl) */
.bgl-spec-list { margin: 0; }
.bgl-spec-list__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bgl-border-color);
  padding: 15px 0;
}
.bgl-spec-list__row:last-child { border-bottom: none; }

.bgl-spec-list__dt {
  font-weight: 500;
  width: 170px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-right: 20px;
}

.bgl-spec-list__dd {
  margin: 0;
  flex-grow: 1;
  box-sizing: border-box;
}

/* チェックリスト (ul) */
.bgl-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bgl-check-list__item {
  border-bottom: 1px solid var(--bgl-border-color);
  padding: 15px 0;
  position: relative;
  line-height: 1.6;
}
.bgl-check-list__item:last-child { border-bottom: none; }

/* SP調整 */
@media screen and (max-width: 767px) {
  .bgl-spec-list__row { display: block; }
  .bgl-spec-list__dt {
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
    padding-right: 0;
  }
}

/* =========================================
   Component: お問い合わせボックス (Contact Box)
   ========================================= */

.bgl-contact-box {
  background-color: var(--bgl-bg-light-blue);
  padding: 40px 60px; /* 余白調整済み */
  box-sizing: border-box;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bgl-contact-box__header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.bgl-contact-box__icon {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}

.bgl-contact-box__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.bgl-contact-box__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--bgl-color-link);
  line-height: 1.4;
  margin: 0;
}

.bgl-contact-box__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.bgl-contact-box__btn-area {
  margin-top: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .bgl-contact-box { padding: 30px 20px; }
  .bgl-contact-box__header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .bgl-contact-box__title { font-size: 18px; }
}

/* =========================================
   3カラム表示時のレイアウト最適化
   (この設定は .bgl-grid-3 を使った時のみ適用されます)
   ========================================= */
@media screen and (min-width: 1025px) {

  /* カードの高さ設定を解除（中身の量に合わせる） */
  .bgl-grid-3 .bgl-price-card {
    height: auto;
  }

  /* 白い部分(body)の高さを固定して見た目を揃える */
  .bgl-grid-3 .bgl-price-card__body {
    height: 340px;
  }

  /* キャッチコピーエリアの高さを揃える */
  .bgl-grid-3 .bgl-price-catch {
    min-height: 60px;
    align-items: center;
  }
  .bgl-grid-3 .bgl-price-catch::before,
  .bgl-grid-3 .bgl-price-catch::after {
    flex-shrink: 0;
  }

  /* ヘッダーの高さを揃える */
  .bgl-grid-3 .bgl-price-card__header {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 10px;
  }

  /* 3カラム時は文字サイズを少し小さく */
  .bgl-grid-3 .bgl-text-price { font-size: 32px; }
  .bgl-grid-3 .bgl-text-price span { font-size: 14px; }

  /* スペックリストの調整 */
  .bgl-grid-3 .bgl-spec-list__dt { width: 90px; font-size: 14px; }
  .bgl-grid-3 .bgl-check-list__item { font-size: 14px; padding: 10px 0; }
}

/* =========================================
   Component: ユーティリティエリア (Download & Account)
   ========================================= */

/* 外枠コンテナ */
.bgl-utility-area {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--bgl-border-color);
  border-bottom: 2px solid var(--bgl-border-color);
  margin-bottom: var(--bgl-section-margin);
}

/* 各セクション共通 */
.bgl-utility-section {
  padding: 30px 0;
  box-sizing: border-box;
}

/* --- 資料ダウンロードエリア --- */
.bgl-utility-section--download {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.bgl-utility-dl-icon {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
}

.bgl-utility-dl-icon img {
  width: 100%;
  height: auto;
}

.bgl-utility-content {
  flex-grow: 0;
  max-width: 300px;
}

/* --- 公式アカウントエリア --- */
.bgl-utility-section--account {
  border-top: 2px solid var(--bgl-border-color);
}

/* アカウントリスト */
.bgl-account-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

/* アカウントアイテム */
.bgl-account-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  width: auto;
}

/* アイコン共通スタイル */
.bgl-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.bgl-account-icon--blog {
  width: 100%;
  max-width: 120px;
}

.bgl-account-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bgl-account-text {
  text-align: left;
  line-height: 1.3;
}

/* --- PC表示 (1025px以上) --- */
@media screen and (min-width: 1025px) {
  .bgl-utility-area {
    flex-direction: row;
    border: none;
    align-items: stretch;
  }

  .bgl-utility-section {
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .bgl-utility-section--download {
    width: 50%;
    border-right: 2px solid var(--bgl-border-color);
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;
  }

  .bgl-utility-content {
    flex-grow: 1;
    max-width: none;
  }

  .bgl-utility-section--account {
    width: 50%;
    border-top: none;
    padding-left: 40px;
  }

  .bgl-account-icon {
    height: auto;
  }

  .bgl-account-icon--blog {
    width: 120px;
  }
}

/* =========================================
   Component: 導入フロー (Flow List)
   ========================================= */

.bgl-flow-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

/* --- ベーススタイル（SP表示を基準に作成） --- */
.bgl-flow-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row; /* SP: アイコンと文字を横並び */
  align-items: center;
  padding-bottom: 30px; /* 下に矢印を表示するスペースを確保 */
  box-sizing: border-box;
}

/* 画像エリア */
.bgl-flow-img {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px; /* SP: 右側に余白 */
  margin-bottom: 0;
  flex-shrink: 0;
}

.bgl-flow-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* テキストエリア */
.bgl-flow-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bgl-color-text-main);
  margin: 0;
  text-align: left; /* SP: 左揃え */
}

/* 矢印 (SP: アイコンの下に下向き三角) */
.bgl-flow-item::after {
  content: "";
  position: absolute;
  left: 40px; /* アイコン(80px)の中心 */
  bottom: 8px; /* 余白エリアに配置 */
  transform: translateX(-50%); /* 左右中央配置 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px; /* 下向き三角形 */
  border-color: var(--bgl-color-primary) transparent transparent transparent;
}

/* 最後の項目には矢印をつけない */
.bgl-flow-item:last-child {
  padding-bottom: 0;
}
.bgl-flow-item:last-child::after {
  display: none;
}

/* --- PC表示 (1025px以上) --- */
@media screen and (min-width: 1025px) {
  .bgl-flow-item {
    width: calc(100% / 6); /* 6等分 */
    flex-direction: column; /* PC: 縦並びに戻す */
    justify-content: flex-start;
    padding-bottom: 0; /* SP用の余白リセット */
    padding: 0 10px;
  }

  .bgl-flow-img {
    width: 100px;
    height: 100px;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .bgl-flow-text {
    text-align: center; /* PC: 中央揃え */
  }

  /* 矢印 (PC: アイコンの右に右向き三角) */
  .bgl-flow-item::after {
    /* SPの設定をリセット */
    left: auto;
    bottom: auto;
    transform: none;

    /* PC用の配置 */
    position: absolute;
    top: 50px; /* アイコン(100px)の中心高さ */
    right: -5px; /* 右端に配置 */
    margin-top: -8px; /* 垂直中央補正 */

    /* 三角形の向きを右に変更 */
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent var(--bgl-color-primary);
  }
}

/* --- SP表示用ユーティリティ --- */
@media screen and (max-width: 767px) {
  .u-pc {
    display: none; /* 改行タグを消して1行にする */
  }
}

/* =========================================
   SP表示時の余白調整（料金表エリア）
   ========================================= */
@media screen and (max-width: 767px) {
  .bgl-grid-3 {
    /* カードと次の吹き出しの間隔を広げる (元50px → 80px) */
    gap: 80px;

    /* 3つ目のカードの下（グリッド全体の下）に余白を作る */
    margin-bottom: 60px;
  }
}

/* =========================================
   Component: 導入フロー (5カラム用バリエーション)
   ========================================= */

/* PC表示時のみ幅を上書き変更する */
@media screen and (min-width: 1025px) {

  /* .bgl-flow-list--5col クラスがついている場合 */
  .bgl-flow-list--5col .bgl-flow-item {
    width: calc(100% / 5); /* 6等分から5等分に変更 */
  }

}

/* =========================================
   Component: 業務サーバパック比較 (Hosting Pack)
   ========================================= */

.bgl-hosting-pack {
  display: flex;
  flex-direction: column; /* SP: 縦並び */
  width: 100%;
  gap: 0; /* 隙間はConnectorで調整するため0にする */
}

/* --- 共通ボックススタイル --- */
.bgl-hosting-pack__box {
  /* 枠線：グレー */
  border: 2px solid var(--bgl-border-color);
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bgl-bg-base);
  /* PCではflex:1で幅を確保 */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ヘッダー */
.bgl-hosting-pack__title {
  background-color: var(--bgl-bg-light-blue);
  padding: 15px;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--bgl-color-text-main);
  border-bottom: 2px solid var(--bgl-border-color);
}

/* ボディ */
.bgl-hosting-pack__body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- 連結用プラスアイコン（Gap兼アイコン） --- */
.bgl-hosting-pack__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;

  /* 【SP】高さ30pxの隙間を作る */
  height: 30px;
  width: 100%;
}

.bgl-hosting-pack__connector span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--bgl-color-primary);
  color: #FFF;
  font-size: 28px;
  font-weight: 400;
  border-radius: 50%;
  line-height: 1;

  /* 白いフチをつけて、線の上に乗っている感を出す */
  border: 4px solid var(--bgl-bg-base);
  box-sizing: border-box;

  /* フレックスアイテムとしての縮小を防ぐ */
  flex-shrink: 0;
}

/* --- 左ボックス：図解エリア --- */
.bgl-hosting-pack__diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.bgl-hosting-pack__cloud {
  width: 120px;
  text-align: center;
}
.bgl-hosting-pack__cloud img {
  width: 100%;
  height: auto;
}

.bgl-hosting-pack__plus-small {
  font-size: 24px;
  color: var(--bgl-color-primary);
  font-weight: 700;
}

/* ソフトウェアリスト */
.bgl-hosting-pack__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.bgl-hosting-pack__list-item {
  background-color: var(--bgl-bg-light-blue);
  border-radius: 20px;
  padding: 8px 15px;
  margin-bottom: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.bgl-hosting-pack__list-item:last-child {
  margin-bottom: 0;
}

/* --- 右ボックス：ロゴエリア --- */
.bgl-hosting-pack__logos {
  text-align: center;
  margin: 20px 0;
}
.bgl-hosting-pack__logos img {
  max-width: 100%;
  height: auto;
}


/* --- PC表示 (1025px以上) --- */
@media screen and (min-width: 1025px) {
  .bgl-hosting-pack {
    flex-direction: row; /* 横並び */
    align-items: stretch;
    justify-content: center;
  }

  .bgl-hosting-pack__box {
    /* 残りの幅を等分する */
    flex: 1;
    width: auto;
  }

  /* 連結プラスアイコン */
  .bgl-hosting-pack__connector {
    /* 【PC】幅30pxの隙間を作る */
    width: 30px;
    height: auto;
    /* マージンは不要（幅自体がGapになる） */
    margin: 0;
  }


  /* 左ボックス：図解エリア */
  .bgl-hosting-pack__diagram {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }

  .bgl-hosting-pack__cloud {
    width: 140px;
  }

  .bgl-hosting-pack__list {
    width: auto;
    min-width: 180px;
  }
}
/* =========================================
   Component: 特典プランカード (Benefit Card)
   ========================================= */

/* --- レイアウト調整 --- */
@media screen and (max-width: 767px) {
  .bgl-benefit-grid {
    gap: 20px;
  }
}

/* --- カード本体 --- */
.bgl-benefit-card {
  border: 2px solid #59B3F4;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bgl-bg-base);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ヘッダーエリア */
.bgl-benefit-card__header {
  background-color: #DDF2FF;
  padding: 15px 10px;
  text-align: center;
  font-weight: 700;
  color: var(--bgl-color-text-main);
  border-bottom: 1px solid #DDF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  line-height: 1.4;
}

/* 丸数字アイコン */
.bgl-num-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: #59B3F4;
  color: #FFF;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* スラッシュ区切り */
.bgl-slash {
  color: #59B3F4;
  font-weight: 400;
  margin: 0 2px;
}

/* ボディエリア */
.bgl-benefit-card__body {
  /* 【修正】上下パディングをバランスよく設定 */
  padding: 30px 10px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* 【修正】内容を垂直方向の中央に配置 */
  justify-content: center;
  align-items: center;
  /* 【修正】行間の距離を制御（近づける設定） */
  gap: 5px;
}

/* ボディ内のpタグの余白をリセット（gapで制御するため） */
.bgl-benefit-card__body p {
  margin: 0;
}

/* メインの強調テキスト */
.bgl-benefit-price {
  font-size: 26px;
  font-weight: 700;
  color: #59B3F4;
  line-height: 1.2;
}

.bgl-benefit-price .bgl-text-body-m {
  color: var(--bgl-color-text-main);
  font-weight: 700;
  margin-left: 2px;
}

.bgl-benefit-price sup {
  font-size: 12px;
  color: var(--bgl-color-text-main);
  font-weight: 400;
  vertical-align: top;
  margin-left: 2px;
}

/* バッジ配置用ラッパー */
.bgl-benefit-price-wrapper {
  position: relative;
  display: inline-block;
  padding-left: 60px;
}

/* 黄色い「最大」バッジ（復活） */
.bgl-badge-yellow {
  position: absolute;
  top: -20px;
  left: 0;
  width: 50px;
  height: 50px;
  /* 【修正】黄色に戻す */
  background-color: #FFEE00;
  color: #59B3F4; /* 文字色は水色 */

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  z-index: 1;
  transform: rotate(-15deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* SP調整 */
@media screen and (max-width: 767px) {
  .bgl-benefit-card__header {
    font-size: 14px;
  }
  .bgl-benefit-price {
    font-size: 22px;
  }
}

/* =========================================
   Component: 導入フロー (7カラム用バリエーション)
   ========================================= */

@media screen and (min-width: 1025px) {

  /* .bgl-flow-list--7col クラスがついている場合 */
  .bgl-flow-list--7col .bgl-flow-item {
    width: calc(100% / 7); /* 7等分に変更 */
  }

}