/* =========================================================
   BULK SERVER  Rebrand Overrides
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* === BULK SERVER ブランドカラー (Aqua Terminal) ===
     深い海ブルー＋鮮やかなアクアでテック・信頼感を演出。 */
  --bs-deep: #1c557f; /* メイン：淡めのネイビーブルー（ヘッダ/フッタ/タイトル） */
  --bs-deep-2: #2a73a3; /* deepのグラデ用ライト側 */
  --bs-blue: #0e7ab8; /* サブ：海ブルー（ボタン/リンク） */
  --bs-sky: #7fceea; /* アクセント：ライトアクア */
  --bs-mint: #10b5a0; /* セカンダリアクセント：エメラルド */
  --bs-coral: #ff6b4a; /* ポイント：ビビッドコーラル（CTA/強調） */
  --bs-rose: #e94b7c; /* ポイント補助：フレッシュピンク */

  /* === 機能別エイリアス（CSSはこちらを使う） === */
  --brand-deep: var(--bs-deep);
  --brand-deep-2: var(--bs-deep-2);
  --brand-deep-grad: linear-gradient(
    to bottom,
    var(--bs-deep) 0%,
    var(--bs-deep-2) 100%
  );
  --brand-main: var(--bs-blue);
  --brand-sky: var(--bs-sky);
  --brand-mint: var(--bs-mint);
  --brand-cta: var(--bs-coral);
  --brand-rose: var(--bs-rose);

  /* 背景：氷水色のトーンで統一 */
  --bg-soft: #e6f4fa; /* メインの薄水色 */
  --bg-soft-alt: #d2e8f3; /* もう少し濃い水色 */
  --bg-gray: #f2f8fb; /* ほぼ白に近い水色 */
  --bg-news: #e6f4fa;

  /* 文字色：深い水色寄りのグレー */
  --fg-1: #102b3f;
  --fg-2: #45627a;
  --fg-3: #6b8195;

  --font-sans:
    "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic",
    Meiryo, sans-serif;
  --font-display: "M PLUS 1p", "Noto Sans JP", sans-serif;
}

/* ---------- 2. グローバル ---------- */
body {
  font-family: var(--font-sans) !important;
  color: var(--fg-1);
  letter-spacing: 0.4px;
  line-height: 1.7;
  background: #fff !important;
}
body,
td,
th,
p,
div,
span,
li,
dt,
dd,
a,
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-sans);
}
/* Material Icons は ligature font-family を保持する */
.material-icons {
  font-family: "Material Icons" !important;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand-main);
  transition: color 0.4s ease;
  text-decoration: none;
}
a:hover {
  color: var(--brand-mint);
}

/* ---------- 3. サイトヘッダ ( #header ) ---------- */
/* body 全幅は白 */
body {
  background: #fff;
}
#header {
  background: #fff;
  border-bottom: 1px solid #eef0f2;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
  box-sizing: border-box;
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 24px;
}
#header::before,
#header::after {
  display: none !important;
  content: none !important;
}
#header .logo {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  flex-grow: 0;
  position: static !important;
  background: none !important;
  max-width: none !important;
}
#header .logo img {
  height: 50px !important;
  width: auto !important;
}
#header .sub_menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: static !important;
  background: none !important;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0;
}
#header .sub_menu li {
  font-size: 14px;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
}
#header .sub_menu li a {
  color: var(--fg-1);
  white-space: nowrap;
}
#header .sub_menu li a:hover {
  color: var(--brand-main);
}
#header .sub_menu li a.login {
  color: var(--brand-cta) !important;
  font-weight: 500;
}
#header .sub_menu li.tel {
  color: var(--brand-deep);
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  width: auto !important;
  flex-wrap: nowrap !important;
}
#header .sub_menu li.tel * {
  white-space: nowrap;
}
/* 電話番号画像 (service_contact_number.png) の高さ統制 */
#header .sub_menu li.tel > img {
  height: 28px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  vertical-align: middle;
}
/* 受付時間ブロック */
#header .sub_menu li.tel p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px !important;
  color: var(--fg-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}
#header .sub_menu li.tel .hours {
  background: var(--brand-deep) !important;
  color: #fff !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* ---------- 4. グローバルナビ ( #main_menu ) ---------- */
#main_menu {
  background: var(--brand-deep-grad) !important;
  border: none !important;
  height: 50px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
}
#main_menu::before,
#main_menu::after {
  display: none !important;
  content: none !important;
}
#main_menu ul {
  display: flex;
  height: 100%;
  align-items: stretch;
  margin: 0 auto !important;
  padding: 0;
  list-style: none;
  max-width: 1140px;
  width: 100%;
  box-sizing: border-box;
}
#main_menu ul li {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#main_menu ul li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}
#main_menu ul li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}
#main_menu ul li:last-child > a {
  border-right: none !important;
}
#main_menu ul li > a {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: transparent !important;
  text-decoration: none;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition:
    color 0.4s ease,
    background 0.4s ease;
}
#main_menu ul li:hover > a,
#main_menu ul li.selected_bg > a {
  color: var(--brand-mint) !important;
  background: rgba(30, 187, 168, 0.08) !important;
}
/* 旧色付き選択ボーダーを上書き */
#main_menu ul li.selected_border_dedicated,
#main_menu ul li.selected_border_management,
#main_menu ul li.selected_border_migration,
#main_menu ul li.selected_border_ssl,
#main_menu ul li.selected_border_datacenter {
  border-bottom: 3px solid var(--brand-mint) !important;
}
/* dropdown menu-list */
#main_menu .menu-list {
  background: var(--brand-deep-grad) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  z-index: 50;
  display: none;
  flex-direction: column;
}
#main_menu ul li:hover .menu-list {
  display: flex;
}
#main_menu .menu-list a {
  color: #fff !important;
  font-size: 13px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  justify-content: flex-start;
}
#main_menu .menu-list a:hover {
  color: var(--brand-mint) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ---------- 5. サブナビ ( #dedicated_menu 等 ) ---------- */
#dedicated_menu,
#management_menu,
#migration_menu,
#ssl_menu,
#datacenter_menu {
  background: #fff !important;
  border-bottom: 1px solid #e5e8eb !important;
}
#dedicated_menu ul,
#management_menu ul,
#migration_menu ul,
#ssl_menu ul,
#datacenter_menu ul {
  display: flex;
  max-width: 1140px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
#dedicated_menu li a,
#management_menu li a,
#migration_menu li a,
#ssl_menu li a,
#datacenter_menu li a {
  color: var(--fg-2) !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  padding: 14px 20px !important;
  font-weight: 500;
  border-bottom: 2px solid transparent !important;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
}
#dedicated_menu li a:hover,
#management_menu li a:hover,
#migration_menu li a:hover,
#ssl_menu li a:hover,
#datacenter_menu li a:hover {
  color: var(--brand-main) !important;
  border-bottom-color: var(--brand-main) !important;
}

/* ---------- 6. ページタイトルバー ( #pkz ) ---------- */
#pkz {
  background: var(--bg-soft) !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: left !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
}
#pkz::before,
#pkz::after {
  display: none !important;
  content: none !important;
}
#pkz .pkz_wrapper {
  max-width: 1140px;
  margin: 0 auto !important;
  padding: 0 24px !important;
  font-size: 13px;
  color: var(--fg-3);
  width: 100% !important;
  box-sizing: border-box;
  text-align: left !important;
  background: none !important;
  line-height: 1.5;
}
/* パンくず行とh1を1行に並べるためのclearfix */
#pkz .pkz_wrapper::after {
  content: "";
  display: block;
  clear: both;
}
#pkz .pkz_wrapper > a {
  color: var(--fg-3);
  font-size: 13px;
}
#pkz h1 {
  color: var(--brand-deep) !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  letter-spacing: normal;
  background: none !important;
  text-shadow: none !important;
  float: right !important;
  width: auto !important;
  max-width: 60% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.5;
  text-align: right;
  box-sizing: border-box;
}
#pkz h1::after {
  display: none;
}
#pkz.top {
  padding: 10px 0 !important;
  background: var(--bg-soft) !important;
}
#pkz.top .pkz_wrapper {
  padding: 0 24px;
}
#pkz.top h1 {
  font-size: clamp(11px, 1vw, 13px) !important;
  color: var(--brand-deep) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.5;
  text-align: right;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box;
}
#pkz.top h1::after {
  display: none;
}

/* ---------- 7. セクションタイトル ( h2 / .content h3 ) ---------- */
h2 {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  border: none !important;
  border-left: 5px solid var(--brand-mint) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 6px 0 6px 16px !important;
  margin: 36px 0 22px !important;
  background: none !important;
  line-height: 1.4;
}
h2::before,
h2::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
.dedicated h2,
.management h2,
.migration h2,
.ssl h2,
.datacenter h2 {
  border-top: none !important;
  border-left: 5px solid var(--brand-mint) !important;
}
.content > h3,
.content h3 {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--fg-1) !important;
  text-align: center;
  border: none !important;
  padding: 14px 0 16px !important;
  margin: 40px auto 22px !important;
  background: none !important;
  position: relative;
  display: block;
}

/* h3 内の <span> 装飾は無効化 */
.content > h3 span {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* ---------- 8. ボタン共通 ---------- */
/* 旧 .button.w25 / w50 / w80 / w100 のラッパーをリセットして中央寄せ */
.button.w25,
.button.w50,
.button.w80,
.button.w100,
.button_double.w50 {
  background: transparent !important;
  padding: 0 !important;
  margin: 18px 0 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}
.button.w25 a,
.button.w50 a,
.button.w80 a {
  width: auto !important;
  margin: 0 auto !important;
  display: inline-flex !important;
}

.button a,
.button input[type="submit"],
a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 1px;
  min-width: 220px;
  padding: 12px 28px !important;
  border-radius: 9999px !important;
  border: none !important;
  text-decoration: none !important;
  transition:
    background 0.4s ease,
    transform 0.15s ease !important;
  box-shadow: none !important;
  background-image: none !important; /* 旧グラデを潰す */
  text-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.button a:active,
a.btn:active {
  transform: translateY(1px);
}
/* カラーバリアント ( <a> でも <input type="submit"> でも適用 ) */
.button a.blue,
.button input[type="submit"].blue {
  background: var(--brand-main) !important;
  color: #fff !important;
}
.button a.blue:hover,
.button input[type="submit"].blue:hover {
  background: var(--brand-sky) !important;
}

.button a.orange,
.button input[type="submit"].orange,
.button input[type="submit"].pink {
  background: var(--brand-cta) !important;
  color: #fff !important;
}
.button a.orange:hover,
.button input[type="submit"].orange:hover,
.button input[type="submit"].pink:hover {
  background: var(--brand-sky) !important;
}

.button a.green,
.button input[type="submit"].green {
  background: var(--brand-mint) !important;
  color: #fff !important;
}
.button a.green:hover,
.button input[type="submit"].green:hover {
  background: var(--brand-cta) !important;
}

.button a.gray,
.button input[type="submit"].gray {
  background: var(--brand-main) !important;
  color: #fff !important;
}
.button a.gray:hover {
  background: var(--brand-sky) !important;
}

.button a.pink {
  background: var(--brand-rose) !important;
  color: #fff !important;
}
.button a.pink:hover {
  background: var(--brand-cta) !important;
}

/* TOPへ戻るボタン
   ラッパー .move_top 自体に .button クラスが付いているので、
   ラッパーには inline-flex を効かせず、内側の <a> だけボタン化する */
.move_top,
.move_top.button {
  display: block !important;
  text-align: right !important;
  margin: 30px 0 24px !important;
  padding: 0 !important;
  background: none !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  position: static !important;
}
.move_top a,
.move_top a.blue {
  min-width: 180px !important;
  padding: 10px 22px !important;
  background: var(--brand-deep) !important;
  color: #fff !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
}
.move_top a.blue:hover {
  background: var(--brand-main) !important;
}

/* ---------- 9. ホスティング・サービスカード ( .service_type_wrapper ) ---------- */
.service_type {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin: 30px 0;
  width: 100% !important;
  float: none !important;
}
.service_type::before,
.service_type::after {
  display: none !important;
  content: none !important;
}
.service_type_wrapper {
  background: var(--bg-soft) !important;
  border-radius: 6px !important;
  border: none !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  display: block;
}
.service_type_wrapper h3.title {
  background: linear-gradient(
    to bottom,
    var(--bs-blue) 0%,
    #0a5e94 100%
  ) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  text-align: center;
  border: none !important;
}
.service_type_wrapper.dedicated h3.title {
  background: var(--brand-deep-grad) !important;
}
.service_type_box {
  padding: 24px 22px 26px !important;
  background: transparent !important;
}
.service_type_box p {
  font-size: 14px;
  line-height: 26px;
  margin: 0 0 14px;
  color: var(--fg-1);
}
.service_type_box ul.character {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
}
.service_type_box ul.character li {
  font-size: 14px;
  padding: 4px 0 4px 22px;
  position: relative;
  color: var(--fg-1);
}
.service_type_box ul.character li::before,
.service_type_box ul.character li > span {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 12px;
  background: var(--brand-main);
  border-radius: 2px;
  display: inline-block;
}
.service_type_box ul.character li > span {
  background: var(--brand-main) !important;
}
/* サービスカード内のボタンを中央寄せ */
.service_type_box .button,
.service_type_box .button.w50 {
  text-align: center !important;
  width: 100% !important;
  float: none !important;
  margin: 18px 0 0 !important;
  background: none !important;
  padding: 0 !important;
}
.service_type_box .button.w50 a {
  width: auto !important;
  margin: 0 !important;
}

/* ---------- 10. 専用サーバ プランカード ( .plan_list ) ---------- */
.plan_list_text {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 18px 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}
.plan_list_text::before,
.plan_list_text::after {
  content: none !important;
  display: none !important;
}
.plan_list_wrapper {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
.plan_list_text .plan_list,
.plan_list_text .plan_list * {
  box-sizing: border-box;
}
.plan_list_text .plan_list {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.plan_list_text .plan_list:hover {
  box-shadow: 0 4px 16px rgba(8, 43, 73, 0.08);
  transform: translateY(-2px);
}
.plan_list_text .plan_list .index_plan_title {
  display: block;
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 12px 8px !important;
  text-align: center;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
  text-decoration: none;
}
.plan_list_text .plan_list .index_plan_title:hover {
  background: var(--brand-main) !important;
}
.plan_list_text .plan_list .plan_making {
  background: var(--brand-mint) !important;
  color: #fff !important;
  font-size: 12px !important;
  text-align: center;
  padding: 6px !important;
  font-weight: 500;
}
.plan_list_text .plan_list .plan_spec {
  display: flex;
  background: var(--bg-soft);
  padding: 14px 8px;
  gap: 4px;
}
.plan_list_text .plan_list .plan_spec dl {
  flex: 1;
  text-align: center;
  margin: 0;
  border-right: 1px solid rgba(8, 43, 73, 0.08);
}
.plan_list_text .plan_list .plan_spec dl:last-child {
  border-right: none;
}
.plan_list_text .plan_list .plan_spec dt {
  font-size: 11px;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.plan_list_text .plan_list .plan_spec dt span {
  background: transparent !important;
  color: var(--fg-3) !important;
  padding: 0 !important;
}
.plan_list_text .plan_list .plan_spec dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg-1);
}
.plan_list_text .plan_list .plan_spec dd strong {
  font-size: 16px !important;
  color: var(--brand-main) !important;
  font-weight: 700;
  display: block;
  line-height: 1.2;
}
.plan_list_text .plan_list .plan_spec .cpu_core {
  font-size: 11px;
  color: var(--fg-3);
}

.plan_list_text .plan_list .plan_body {
  padding: 14px;
  background: #fff;
}
.plan_list_text .plan_list .firstcost_no_title,
.plan_list_text .plan_list .firstcost_yes_title {
  font-size: 12px;
  color: #fff !important;
  font-weight: 700;
  background: var(--brand-cta) !important;
  text-align: center;
  padding: 6px 8px !important;
  margin: 10px 0 4px !important;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.plan_list_text .plan_list .firstcost_yes_title {
  background: var(--brand-main) !important;
}
.plan_list_text .plan_list .plan_body dl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 6px 0;
}
.plan_list_text .plan_list .plan_body dt {
  font-size: 13px;
  color: var(--fg-2);
}
.plan_list_text .plan_list .plan_body dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
}
.plan_list_text .plan_list .plan_body dd .plan_strongA,
.plan_list_text .plan_list .plan_body dd .plan_strongB {
  font-size: 20px !important;
  font-weight: 700;
  color: var(--brand-cta) !important;
  margin-right: 2px;
  line-height: 1.1;
}
.plan_list_text .plan_list .plan_body dd .plan_strongB {
  color: var(--fg-1) !important;
}
.plan_list_text .plan_list .plan_body .tax {
  font-size: 11px;
  color: var(--fg-3);
}

.plan_list_text .plan_list .plan_button {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 14px;
  background: #fff;
  margin-top: auto;
  box-sizing: border-box;
  width: 100%;
}
.plan_list_text .plan_list .plan_button > div {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
}
.plan_list_text .plan_list .plan_button .button {
  width: 100%;
  box-sizing: border-box;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}
.plan_list_text .plan_list .plan_button .button a {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 9px 8px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  box-sizing: border-box;
}

/* ---------- 11. 「BULK SERVERのポイント」カード ( .point_wrapper ) ---------- */
.point {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin: 18px 0 !important;
  width: 100% !important;
}
.point::before,
.point::after {
  content: none !important;
  display: none !important;
}
.point_wrapper {
  background: var(--bg-soft-alt) !important;
  border-radius: 6px !important;
  border: none !important;
  padding: 18px 16px !important;
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  box-sizing: border-box;
}
.point_wrapper,
.point_wrapper * {
  box-sizing: border-box;
}
.point_wrapper dl {
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  display: block !important;
}
.point_wrapper dt {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  margin: 0 0 12px !important;
  text-align: center;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}
.point_wrapper dd {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}
.point_wrapper dd > div {
  width: auto !important;
  display: block !important;
  text-align: center;
  padding: 0 !important;
}
.point_wrapper dd img {
  max-width: 80px;
  height: auto;
  display: inline-block;
}
.point_wrapper dd p {
  font-size: 13px;
  line-height: 22px;
  color: var(--fg-1);
  text-align: left;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.point_wrapper .button,
.point_wrapper .button.w50 {
  margin-top: auto !important;
  padding: 14px 0 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}
.point_wrapper .button.w50 a {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* point-contents の上部リンクボタン群 */
.point-contents {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
  justify-content: center;
}
.point-contents li.button {
  flex: 0 1 auto;
}

/* ---------- 12. お知らせ ( dl.information ) ---------- */
.information_type_wrapper.news h3 {
  font-size: 22px !important;
  color: var(--fg-1) !important;
  font-weight: 500 !important;
  text-align: center;
  margin: 30px 0 20px !important;
  background: none !important;
  padding: 14px 0 16px !important;
  border: none !important;
}
dl.information {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  min-height: 64px;
  border-bottom: 1px solid #eef0f2;
  margin: 0 !important;
}
dl.information dt {
  flex: 0 0 220px;
  font-size: 13px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}
dl.information dt span.news,
dl.information dt span.release {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  padding: 3px 12px !important;
  margin: 0 !important;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  background: var(--brand-main);
  line-height: 1.4;
}
dl.information dt span.release {
  background: var(--brand-cta);
}
dl.information dd {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.5;
}
dl.information dd a {
  color: var(--brand-main);
}
dl.information dd a:hover {
  color: var(--brand-mint);
  text-decoration: underline;
}

/* ---------- 13. 価格表示・強調文字 ---------- */
strong {
  color: inherit;
}

/* ---------- 14. フッター ( #footer ) ---------- */
#footer {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  border-top: none !important;
  margin-top: 60px;
}
#footer * {
  color: inherit;
}
#footer .menu::before,
#footer .menu::after,
#footer .menu_box::before,
#footer .menu_box::after,
#footer .contact::before,
#footer .contact::after {
  content: none !important;
  display: none !important;
}
#footer .footer_content {
  background: transparent !important;
  padding: 50px 24px 30px !important;
  max-width: 1140px;
  margin: 0 auto;
}
#footer .menu {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  width: 100% !important;
  vertical-align: initial;
}
#footer .contact {
  display: block !important;
  width: auto !important;
}
#footer .contact p {
  font-size: 13px;
  line-height: 22px;
  opacity: 0.85;
  margin: 0;
}
#footer .contact h5 {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 500 !important;
  text-transform: none;
  margin: 18px 0 8px !important;
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
#footer .contact .tel,
#footer .contact .email {
  float: none !important;
  margin: 14px 0 0 !important;
  display: block;
}
#footer .contact .tel strong {
  font-size: 24px !important;
  font-weight: 700;
  color: #fff !important;
  font-family: var(--font-display);
}
#footer .contact .tel strong a {
  color: #fff !important;
}
#footer .contact .tel span {
  font-size: 12px;
  opacity: 0.7;
}
#footer .contact .email .button a.gray {
  background: var(--brand-cta) !important;
  color: #fff !important;
  min-width: 240px !important;
  display: inline-block;
}
#footer .contact .email .button a.gray:hover {
  background: var(--brand-sky) !important;
}

#footer .menu_box {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: auto !important;
}
#footer .menu_box ul {
  list-style: none;
  padding: 0;
  margin: 0 !important;
  float: none !important;
}
#footer .menu_box ul li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#footer .menu_box ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px;
  text-decoration: none;
}
#footer .menu_box ul li a:hover {
  color: var(--brand-mint) !important;
}

#footer .docs_menu {
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 14px 24px !important;
  margin: 0 !important;
}
#footer .docs_menu ul {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  padding: 0;
}
#footer .docs_menu ul li a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px;
}
#footer .docs_menu ul li a:hover {
  color: #fff !important;
}

#footer .copyright {
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 18px 24px !important;
}
#footer .copyright_wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
#footer .copyright_wrap img {
  height: 36px;
  filter: brightness(0) invert(1);
}
#footer .copyright_wrap p {
  font-size: 11px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* ---------- 15. メインスライダー ( .bxslider ) ---------- */
/* 既存CSSで .dedicated/.management/.migration/.ssl/.datacenter ごとに
   背景や枠の装飾が当たっている可能性があるので、ここで打ち消す */
ul.bxslider {
  margin: 24px 0 !important;
  padding: 0 !important;
  list-style: none;
}
ul.bxslider > li {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
ul.bxslider > li > a {
  display: block;
}
.bxslider li img,
.bx-slider .slide img {
  border-radius: 6px;
  width: 100%;
  height: auto;
}
.bx-pager.bx-default-pager a {
  background: rgba(8, 43, 73, 0.2) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: none !important;
}
.bx-pager.bx-default-pager a.active {
  background: var(--brand-cta) !important;
}
.bx-wrapper {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  height: auto !important;
  margin: 0 auto 60px !important;
}
.bx-wrapper .bx-viewport {
  box-shadow: none !important;
  border: none !important;
  left: 0 !important;
  background: transparent !important;
  border-radius: 6px;
  height: auto !important;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: static !important;
  bottom: auto !important;
  margin-top: 16px;
  padding-top: 0 !important;
}
.bx-wrapper .bx-controls-direction a {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ---------- 16. レイアウト幅の統一 ---------- */
#main,
#main.single_column {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100% !important;
  float: none !important;
}
.content_wrapper {
  max-width: 1140px;
  margin: 0 auto;
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#footer .footer_content {
  max-width: 1140px;
  margin: 0 auto;
  width: 100% !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box;
}
.content {
  width: 100% !important;
  float: none !important;
  clear: both;
}

/* ============================================================
   23. /management/ 専用リブランド
   ============================================================ */

/* ---- 23-1. ヒーロー ( .management-title ) ---- */
.management-title {
  text-align: center !important;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  padding: 36px 20px 30px !important;
  border-radius: 8px;
  margin: 18px 0 30px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.management-title h2 {
  border: none !important;
  border-left: none !important;
  background: none !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: 1px;
  font-family: var(--font-display);
}
.management-title h2::before,
.management-title h2::after {
  content: none !important;
  display: none !important;
}
.management-title h2 span {
  display: inline-block;
  margin: 6px 8px !important;
  padding: 4px 14px !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  color: #fff !important;
  background: var(--brand-cta);
  border-radius: 4px;
  letter-spacing: 1px;
}
.management-title .icon {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px auto 18px !important;
  max-width: 720px;
  width: 100% !important;
}
.management-title .icon_wrap {
  display: block !important;
  width: auto !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  padding: 16px 12px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.management-title .icon_wrap p {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: none !important;
  text-align: center;
}
.management-title .icon_wrap img {
  width: auto !important;
  height: 64px !important;
  margin: 0 auto 8px !important;
  display: block;
}
.management-title .icon_wrap strong {
  display: block;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
  margin: 4px 0 0 !important;
  letter-spacing: 1px;
}
.management-title > p {
  margin: 18px auto 0 !important;
  padding: 0 !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  color: var(--fg-1) !important;
  line-height: 1.7 !important;
}
.management-title .f_orange {
  color: var(--brand-cta) !important;
  font-weight: 700;
  font-style: normal;
}

/* ---- 23-2. 悩みリスト ( .management-trouble ) ---- */
.management-trouble {
  background: var(--bg-soft) !important;
  background-color: var(--bg-soft) !important;
  border-radius: 8px !important;
  padding: 30px 24px !important;
  margin: 30px 0 !important;
  text-align: center;
}
.management-trouble h3 {
  width: auto !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--brand-cta) !important;
  display: inline-block !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  color: var(--brand-deep) !important;
  font-weight: 700 !important;
  padding: 0 14px 10px !important;
  margin: 0 auto 20px !important;
}
.management-trouble ul {
  background: #fff !important;
  border-radius: 8px;
  padding: 18px 22px !important;
  margin: 18px auto !important;
  max-width: 880px;
  text-align: left;
  list-style: none;
}
.management-trouble li {
  background: none !important;
  padding: 8px 0 8px 28px !important;
  margin: 0 !important;
  position: relative;
  font-size: 14px !important;
  color: var(--fg-1) !important;
  font-weight: 500 !important;
  border-bottom: 1px dashed #eef0f2;
  line-height: 1.6;
}
.management-trouble li:last-child {
  border-bottom: none;
}
.management-trouble li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--brand-cta);
  border-bottom: 3px solid var(--brand-cta);
  transform: rotate(-45deg);
}

/* ---- 23-3. プラン3カード ( .management-plan ) ---- */
.management-plan {
  margin: 30px 0 !important;
}
.management-plan::before {
  content: "▼" !important;
  display: block !important;
  text-align: center !important;
  color: var(--brand-cta) !important;
  font-size: 28px !important;
  margin: 0 0 4px !important;
  border: none !important;
  width: auto !important;
  grid-column: 1 / -1 !important;
}
.management-plan h3 {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  text-align: center;
  font-size: clamp(20px, 2.4vw, 28px) !important;
  color: var(--brand-deep) !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  line-height: 1.5 !important;
}
.management-plan .description {
  text-align: center;
  font-weight: 500 !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  margin: 0 0 24px !important;
  padding: 24px !important;
  color: var(--fg-2) !important;
}
.management-plan .table {
  width: auto !important;
  display: block !important;
  padding: 0 !important;
}
/* 3カードを grid でラップ：直前の .description の次のフローでカードを並べる */
/* HTML 側を変えずに、 .table カード(1/2/3) を常に3列横並びにする */
.management-plan {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px;
}
.management-plan > h3,
.management-plan > .description,
.management-plan > p {
  grid-column: 1 / -1;
}
.management-plan .table:before {
  content: none !important;
}
.management-plan .wrap {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.management-plan .wrap:hover {
  box-shadow: 0 4px 16px rgba(8, 43, 73, 0.08);
  transform: translateY(-2px);
}
.management-plan h4 {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  text-align: center;
  margin: 0 !important;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
  border: none !important;
}
.management-plan h4 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #fff !important;
  color: var(--brand-deep) !important;
  font-weight: 700 !important;
  border-radius: 50%;
  font-size: 12px !important;
  margin-right: 8px !important;
  padding: 0 !important;
  text-align: center;
}
.management-plan .wrap .img {
  width: auto !important;
  height: auto !important;
  text-align: center;
  margin: 16px 0 8px !important;
  padding: 0 !important;
}
.management-plan .wrap .img img {
  height: 64px !important;
  width: auto !important;
  margin: 0 auto !important;
}
.management-plan .wrap p {
  font-size: 13px !important;
  line-height: 22px !important;
  color: var(--fg-1) !important;
  padding: 4px 16px 14px !important;
  margin: 0 !important;
  flex: 1;
}
.management-plan .wrap .button,
.management-plan .wrap .button.w100 {
  margin: 0 !important;
  padding: 0 16px 16px !important;
  background: transparent !important;
  text-align: center;
}
.management-plan .wrap .button.w100 a {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ---- 23-4. サービス詳細 ( .management-service-content ) ---- */
.management-service-content {
  margin: 30px 0 !important;
}
.management-service-content h3 {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: left !important;
  border: none !important;
  margin: 30px 0 18px !important;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
}
.management-service-content .h3-description-down {
  width: 100% !important;
  margin: 0 0 22px !important;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 18px;
  overflow: visible !important;
  box-sizing: border-box;
}
.management-service-content .h3-description-down .img {
  flex: 0 0 auto;
  display: block !important;
  float: none !important;
  border: 1px solid #e0e6ec !important;
  background: #fff;
  margin: 0 !important;
  padding: 8px;
  border-radius: 6px;
}
.management-service-content .h3-description-down .img img {
  height: 80px !important;
  width: auto !important;
  margin: 0 !important;
  display: block;
}
.management-service-content .h3-description-down p {
  flex: 1;
  font-size: 14px !important;
  line-height: 24px !important;
  margin: 0 !important;
  color: var(--fg-1) !important;
}

.management-service-content dl {
  margin: 18px 0 24px !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
}
.management-service-content dt {
  background: var(--bg-soft) !important;
  border-bottom: 1px solid #e0e6ec !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  font-size: 14px !important;
  margin: 0 !important;
}
.management-service-content dd {
  margin: 0 !important;
  padding: 14px 18px !important;
  color: var(--fg-1) !important;
  font-size: 14px !important;
  line-height: 1.7;
}
.management-service-content dd ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.management-service-content dd ul li {
  padding: 4px 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--fg-1) !important;
}
.management-service-content .list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0 !important;
  border-bottom: 1px dashed #eef0f2;
}
.management-service-content .list li:last-child {
  border-bottom: none;
}
.management-service-content .list span {
  flex: 0 0 160px;
  width: auto !important;
  display: inline-block;
  background: var(--brand-mint) !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
}
.management-service-content .list span::after {
  content: none !important;
}
.management-service-content .notification-settings {
  color: var(--brand-cta) !important;
  font-weight: 600;
}

.management-service-content table.price {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 0 12px;
  border: 1px solid #e0e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.management-service-content table.price th {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-right: 1px solid #e0e6ec !important;
  width: 35%;
  text-align: left;
  font-size: 13px;
}
.management-service-content table.price td {
  padding: 8px 12px !important;
  background: #fff;
  border-bottom: 1px solid #eef0f2 !important;
  font-size: 14px;
  color: var(--fg-1);
  font-weight: 600;
}
.management-service-content ul.list_triangle_pink {
  list-style: none;
  padding: 10px 14px !important;
  margin: 8px 0 0 !important;
  background: #fff8e1;
  border-left: 3px solid var(--brand-rose);
  border-radius: 4px;
  font-size: 12px;
}
.management-service-content ul.list_triangle_pink li {
  padding: 2px 0 !important;
  color: var(--fg-1);
  background: none !important;
  background-image: none !important;
  list-style: none;
}
.management-service-content ul.point {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 !important;
  background: none !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.management-service-content ul.point li {
  background: var(--bg-soft) !important;
  color: var(--fg-1) !important;
  border: none !important;
  border-left: 3px solid var(--brand-mint) !important;
  border-radius: 0 4px 4px 0;
  padding: 8px 14px !important;
  font-size: 13px;
  font-weight: 500;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  list-style: none !important;
}
.management-service-content ul.point li::before {
  content: none !important;
}

/* ---- 23-5. 料金体系 ( .management-service-price / table.price-table ) ---- */
.management-service-price {
  margin: 40px 0 30px !important;
}
table.price-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 18px 0 !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
}
table.price-table th,
table.price-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eef0f2 !important;
  border-right: 1px solid #eef0f2 !important;
  vertical-align: middle;
  line-height: 1.5;
}
table.price-table th:last-child,
table.price-table td:last-child {
  border-right: none !important;
}
table.price-table tr:last-child th,
table.price-table tr:last-child td {
  border-bottom: none !important;
}
/* 1行目の先頭thが空の場合だけ「ヘッダ行」として
   ブランドディープグラデーションを適用 (例: management の料金体系)。
   migration の料金表のように1行目からデータ行 (th+td) の場合は通常スタイル */
table.price-table tr:first-child:has(> th:first-child:empty) th {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-weight: 600;
  text-align: center;
}
table.price-table th {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600 !important;
  text-align: left;
  width: auto;
}
table.price-table th span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-3);
  margin-top: 2px;
}
table.price-table td {
  color: var(--fg-1);
  background: #fff;
  text-align: center;
  font-weight: 600;
}

/* ---- 23-6. 実績 ( .management-work / .management-work-content ) ---- */
.management-work {
  margin: 40px 0 !important;
}
.management-work h2 {
  margin-bottom: 22px !important;
}
.management-work-content {
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  padding: 22px;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.management-work-content dl {
  margin: 0 0 12px !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #eef0f2;
  padding-bottom: 10px;
}
.management-work-content dt {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.management-work-content dd {
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--brand-mint) !important;
  background: rgba(16, 181, 160, 0.1);
  padding: 4px 10px !important;
  border-radius: 4px;
}
.management-work-content p {
  margin: 0 !important;
  font-size: 14px;
  line-height: 24px;
  color: var(--fg-1);
}

/* ---- 23-7. 関連リンク ( .sp_management の .button 系) ---- */
.button.sp_management {
  text-align: center !important;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.button.sp_management a {
  width: auto !important;
  min-width: 200px !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
}

/* ============================================================
   24. /migration/ 専用リブランド
   ============================================================ */

/* ---- 24-1. ヒーロー画像群 ( .management-title 内 img) ---- */
.management-title img {
  max-width: 100%;
  height: auto !important;
  display: inline-block;
  margin: 6px auto !important;
  border-radius: 6px;
}
.management-title .management-number {
  margin-top: 14px !important;
}

/* ---- 24-2. アンカーナビ ( .management-link ) ---- */
.management-link {
  background: var(--bg-soft) !important;
  text-align: center !important;
  border-radius: 8px;
  margin: 24px 0 !important;
  padding: 14px 12px !important;
}
.management-link ul {
  display: flex !important;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}
.management-link li {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: inline-flex !important;
}
.management-link li.button {
  padding: 0 !important;
  background: transparent !important;
}
.management-link li.button a {
  display: inline-flex !important;
  background: var(--brand-deep) !important;
  color: #fff !important;
  padding: 8px 22px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  min-width: 0 !important;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.management-link li.button a:hover {
  background: var(--brand-main) !important;
}

/* ---- 24-3. 移行サービスの段落 ( .management-service-content > p.h3-description-down ) ---- */
.management-service-content p.h3-description-down {
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 18px 22px !important;
  margin: 0 0 22px !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ---- 24-4. 流れ ( .migration_process ) ---- */
.migration_process {
  padding: 0 !important;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 18px !important;
  margin: 8px 0 0 !important;
}
.migration_process .step {
  width: 100% !important;
  background: #fff !important;
  margin: 0 0 28px !important;
  border-radius: 6px;
  border: 1px solid #e0e6ec;
  display: flex !important;
  align-items: stretch;
  overflow: hidden;
  position: relative !important;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.migration_process .step:last-of-type {
  margin-bottom: 18px !important;
}
.migration_process .step dt {
  flex: 0 0 110px;
  width: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 8px !important;
  border: none !important;
  border-bottom: none !important;
  font-family: var(--font-display);
  letter-spacing: 1px;
  margin: 0 !important;
}
.migration_process .step dd {
  flex: 1;
  width: auto !important;
  display: flex !important;
  align-items: center;
  background: #fff !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--fg-1) !important;
  line-height: 1.5;
}
.migration_process .step dd span {
  color: var(--brand-cta) !important;
  font-weight: 700 !important;
  margin-right: 8px;
  background: rgba(255, 107, 74, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
/* 下向き矢印 */
.migration_process .step::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -22px !important;
  margin-left: -10px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 12px solid var(--brand-mint) !important;
  border-right: 10px solid transparent !important;
  border-bottom: none !important;
  border-left: 10px solid transparent !important;
  display: block !important;
}
.migration_process .step:last-of-type::after {
  content: none !important;
  display: none !important;
}
.migration_process .finish {
  width: auto !important;
  background: var(--brand-mint) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin: 6px auto 0 !important;
  font-size: 18px !important;
  padding: 12px 32px !important;
  text-align: center;
  border-radius: 8px;
  display: inline-block;
  letter-spacing: 2px;
  font-family: var(--font-display);
}
/* finish を中央寄せにするためのラッパー(dd) */
.migration_process {
  text-align: center;
}
.migration_process .step,
.migration_process > dl {
  text-align: left;
}

/* ---- 24-5. 悩み ( migration の .management-trouble ) ---- */
.management-trouble .management-trouble-title,
img.management-trouble-title {
  display: block !important;
  max-width: 90% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  float: none !important;
  text-align: center;
}
.management-trouble .management-trouble-title {
  position: relative;
  left: 0 !important;
  right: 0 !important;
}
.management-trouble img {
  max-width: 100%;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
/* migration.css 側で li の背景がピンク・180% フォント等になっていた指定を打ち消し */
.management-trouble ul {
  width: auto !important;
  max-width: 880px;
}
.management-trouble li {
  width: auto !important;
  background-color: transparent !important;
  padding: 8px 0 8px 28px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ============================================================
   25. /ssl/ 専用リブランド
   ============================================================ */

/* ---- 25-1. ヒーロー画像 (#main 直下の <img>) ---- */
#main > img:first-of-type {
  display: block;
  margin: 0 auto 18px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ---- 25-2. 全体ラッパー ( .content.ssl ) ---- */
.content.ssl {
  background: transparent !important;
  padding: 0 !important;
}
.content.ssl .content_wrapper {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  padding: 22px !important;
  margin: 0 0 22px !important;
  box-sizing: border-box;
  font-size: 14px !important;
}
.content.ssl .content_wrapper p {
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
  margin: 0 0 12px !important;
}
.content.ssl .content_wrapper p:last-child {
  margin-bottom: 0 !important;
}
.content.ssl > h3 {
  margin: 30px 0 16px !important;
}

/* ---- 25-3. 説明ブロック ( .ssl .description ) ---- */
.content.ssl .description {
  padding: 18px !important;
  background: var(--bg-soft) !important;
  border-radius: 6px !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: flex-start;
  gap: 22px;
}
.content.ssl .description .icon {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
}
.content.ssl .description .icon img {
  width: 140px !important;
  max-width: 100%;
  height: auto !important;
  display: block;
}
.content.ssl .description .text {
  flex: 1;
  min-width: 0;
}
.content.ssl .description .text p {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
}

/* ---- 25-4. 料金テーブル ( .content.ssl table ) ---- */
.content.ssl table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 0 14px !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
  table-layout: auto;
}
.content.ssl table th,
.content.ssl table td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #eef0f2 !important;
  border-right: 1px solid #eef0f2 !important;
  vertical-align: middle;
  line-height: 1.5;
  text-align: center;
}
.content.ssl table th:last-child,
.content.ssl table td:last-child {
  border-right: none !important;
}
.content.ssl table tr:last-child th,
.content.ssl table tr:last-child td {
  border-bottom: none !important;
}
.content.ssl table tr:first-child th {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
}
.content.ssl table th {
  background: var(--bg-soft);
  color: var(--brand-deep);
  font-weight: 600;
}
.content.ssl table td {
  color: var(--fg-1);
  background: #fff;
  font-weight: 500;
}

/* ---- 25-5. プロセスステップ ( .ssl .process_box ) ---- */
.content.ssl .process_box {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.content.ssl .process_box h4 {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  border: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  letter-spacing: 1px;
  font-family: var(--font-display);
}
.content.ssl .process_box p {
  margin: 0 !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
}
.content.ssl .process_box .emphasis {
  color: var(--brand-cta) !important;
  font-weight: 600;
}

/* ---- 25-6. ステップ内補足 ( dl.beside ) ---- */
.content.ssl .beside {
  margin: 10px 18px 14px !important;
  background: var(--bg-soft) !important;
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden;
}
.content.ssl .beside dt {
  display: block;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  background: rgba(28, 85, 127, 0.08) !important;
  border-bottom: 1px solid rgba(28, 85, 127, 0.12) !important;
  color: var(--brand-deep) !important;
  font-size: 13px !important;
}
.content.ssl .beside dd {
  padding: 10px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6;
  color: var(--fg-1) !important;
  background: #fff !important;
}
.content.ssl .beside dd a {
  color: var(--brand-main) !important;
  text-decoration: underline;
}

/* ---- 25-7. 強調文字 ( .emphasis ) ---- */
.content.ssl .emphasis,
.emphasis {
  color: var(--brand-cta) !important;
  font-weight: 600;
}

/* ---- 25-8. 末尾CTA ( .button.w50 ) は共通スタイル流用 ---- */

/* ============================================================
   26. /datacenter/ 専用リブランド
   ============================================================ */

/* datacenter.css に `table { max-width: 70% }` の全 table 制限と
   `table th { width: 20% }` があるため打ち消し、ブランド色で再構築 */

/* ---- 26-1. ヒーロー画像 ---- */
.dedicated-datacenter-hero,
.content > img[src*="datacenter_top"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 6px;
}

/* ---- 26-2. 全テーブル共通 (datacenter_price / datacenter_option / 汎用) ---- */
table.datacenter_price,
table.datacenter_option,
.content table {
  max-width: none !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 0 14px !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.content table th,
.content table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eef0f2 !important;
  border-right: 1px solid #eef0f2 !important;
  vertical-align: middle;
  text-align: left;
  line-height: 1.5;
}
.content table th:last-child,
.content table td:last-child {
  border-right: none !important;
}
.content table tr:last-child th,
.content table tr:last-child td {
  border-bottom: none !important;
}
.content table th {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600 !important;
  width: 35% !important;
}
.content table td {
  color: var(--fg-1);
  background: #fff;
}

/* ---- 26-3. 特徴ブロック ( dl.datacenter_chara ) ---- */
.datacenter_chara {
  width: 100% !important;
  display: flex !important;
  align-items: stretch;
  margin: 0 0 18px !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.datacenter_chara dt {
  width: auto !important;
  flex: 0 0 180px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft) !important;
  padding: 18px !important;
  border-right: 1px solid #e0e6ec;
}
.datacenter_chara dt img {
  width: 110px !important;
  max-width: 100%;
  height: auto !important;
  display: block;
}
.datacenter_chara dd {
  flex: 1;
  display: block !important;
  padding: 18px 22px !important;
  margin: 0 !important;
  min-width: 0;
}
.datacenter_chara strong {
  display: block;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.5px;
}
.datacenter_chara p {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
}
.datacenter_chara p:last-child {
  margin-bottom: 0 !important;
}
.datacenter_chara table {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 4px;
  overflow: hidden;
}
.datacenter_chara table th {
  width: 50% !important;
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.datacenter_chara table td {
  background: #fff !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* ---- 26-4. 仕様ブロック ( .datacenter_specification_wrap ) ---- */
.datacenter_specification_wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 !important;
}
.datacenter_specification {
  width: auto !important;
  display: block !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  padding: 22px 18px !important;
  text-align: center;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.datacenter_specification:hover {
  box-shadow: 0 4px 16px rgba(8, 43, 73, 0.08);
  transform: translateY(-2px);
}
.datacenter_specification dt {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--brand-deep) !important;
  text-align: center;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
}
.datacenter_specification dt img {
  display: block;
  width: 56px !important;
  height: auto;
  margin: 0 auto 10px !important;
}
.datacenter_specification dd {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  color: var(--fg-1) !important;
}

/* ---- 26-5. 問い合わせブロック ( .datacenter_contact ) ---- */
.datacenter_contact {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0 !important;
  overflow: visible !important;
}
.datacenter_contact > div {
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
.datacenter_contact .contact_left,
.datacenter_contact .contact_right {
  float: none !important;
  width: auto !important;
}
.datacenter_contact h4 {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  border-bottom: 2px solid var(--brand-mint);
  padding-bottom: 6px !important;
  display: inline-block;
}
.datacenter_contact strong {
  color: var(--brand-cta) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  padding: 8px 0 6px !important;
  display: block;
  font-family: var(--font-display);
  letter-spacing: 1px;
}
.datacenter_contact p {
  padding: 6px 0 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  color: var(--fg-1) !important;
}
.datacenter_contact .button {
  width: 100% !important;
  text-align: center !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.datacenter_contact .button a {
  width: auto !important;
  margin: 0 auto !important;
  min-width: 220px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
}

/* ---- 26-6. 注意書き ( ul.list_triangle_pink within datacenter content) ---- */
.content ul.list_triangle_pink {
  list-style: none;
  padding: 10px 14px !important;
  margin: 12px 0 0 !important;
  background: #fff8e1;
  border-left: 3px solid var(--brand-rose);
  border-radius: 4px;
  font-size: 13px;
}
.content ul.list_triangle_pink li {
  padding: 2px 0 !important;
  color: var(--fg-1);
  background: none !important;
  background-image: none !important;
  list-style: none;
}

/* ============================================================
   27. /contact/ 専用リブランド
   ============================================================ */

/* ---- 27-1. .content.contact カード ---- */
.content.contact {
  background: transparent !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
.content.contact > h3 {
  margin: 30px 0 14px !important;
  text-align: left !important;
  color: var(--brand-deep) !important;
  font-size: 18px !important;
  border-left: 4px solid var(--brand-mint) !important;
  padding: 6px 0 6px 14px !important;
}
.content.contact .content_wrapper {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  padding: 22px !important;
  margin: 0 0 14px !important;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}

/* ---- 27-2. 電話お問い合わせブロック ---- */
.content.contact .description.cf,
.content.contact .description {
  background: var(--bg-soft) !important;
  border-radius: 6px !important;
  padding: 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 22px;
}
.content.contact .description .icon.tel {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 320px;
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
}
.content.contact .description .icon.tel a {
  display: block;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  border-radius: 0 !important;
}
.content.contact .description .icon.tel img {
  max-width: 100%;
  width: 280px !important;
  height: auto !important;
  display: block;
}
.content.contact .description .icon.tel p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--fg-2) !important;
  text-align: center;
}
.content.contact .description .icon.tel .hours {
  display: inline-block;
  background: var(--brand-mint);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: 600;
}
.content.contact .description .text {
  flex: 1;
  min-width: 0;
}
.content.contact .description .text p {
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--fg-1) !important;
  margin: 0 !important;
}

/* ---- 27-3. 補足リスト ---- */
.content.contact ul.supplementary {
  margin: 14px 0 0 !important;
}

/* ---- 27-4. メールフォーム ---- */
.contact form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.contact form dl {
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: transparent !important;
  border: none !important;
}
.contact form dl dt {
  width: auto !important;
  float: none !important;
  padding: 0 0 4px !important;
  background: transparent !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  border-bottom: none !important;
}
.contact form dl dt.body {
  height: auto !important;
}
.contact form dl dt span {
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  float: none !important;
  background: var(--brand-cta) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 4px;
  text-align: center;
  font-family: inherit;
  line-height: 1.4;
}
.contact form dl dt span.private {
  width: auto !important;
  background: #fff !important;
  border: 1px solid var(--fg-3) !important;
  color: var(--fg-3) !important;
  padding: 1px 8px !important;
}
.contact form dl dd {
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.contact form dl dd input[type="text"] {
  width: 100% !important;
  max-width: 480px;
  padding: 10px 12px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.contact form dl dd input[type="text"]:focus,
.contact form dl dd textarea:focus,
.contact form dl dd select:focus {
  outline: none;
  border-color: var(--brand-main) !important;
  box-shadow: 0 0 0 3px rgba(14, 122, 184, 0.12);
}
.contact form dl dd select {
  padding: 9px 12px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  background: #fff;
  margin: 0 !important;
}
.contact form dl dd textarea {
  width: 100% !important;
  max-width: 720px;
  height: 200px !important;
  padding: 10px 12px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}
.contact form dl dd label {
  padding: 0 12px 0 4px !important;
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
}
.contact form dl dd input[type="radio"],
.contact form input[type="checkbox"] {
  accent-color: var(--brand-main);
  vertical-align: middle;
  margin-right: 4px;
}

/* 個人情報同意行 */
.contact form > p {
  margin: 16px 0 !important;
  padding: 14px 16px !important;
  background: var(--bg-soft);
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-1);
}
.contact form > p label {
  cursor: pointer;
  margin-left: 4px;
}
.contact form > p a {
  color: var(--brand-main);
  text-decoration: underline;
}

/* 送信ボタン */
.contact form .button.submit {
  margin: 24px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
}
.contact form input[type="submit"] {
  background: var(--brand-main) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 36px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  letter-spacing: 1px;
  transition:
    background 0.3s ease,
    transform 0.15s ease;
  min-width: 220px;
  font-family: var(--font-sans) !important;
}
.contact form input[type="submit"]:hover:not(:disabled) {
  background: var(--brand-sky) !important;
  transform: translateY(-1px);
}
.contact form input[type="submit"]:disabled {
  background: #c8d3df !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.contact form input[type="submit"].w300 {
  width: auto !important;
}
.contact form input[type="submit"].btn {
  height: auto !important;
  line-height: normal !important;
}

/* ---- 27-4b. 確認画面 ( /contact/confirm ) ---- */
/* dd が単なるテキスト表示の場合 */
.contact form dl dd:not(:has(input, select, textarea)) {
  background: var(--bg-soft) !important;
  border: 1px solid #e6ecf2 !important;
  border-radius: 6px;
  padding: 10px 14px !important;
  font-size: 14px;
  color: var(--fg-1);
  min-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* エラー時の入力枠強調 */
.contact form input.error,
.contact form textarea.error {
  border-color: var(--brand-cta) !important;
  background: #fff8f4 !important;
}
.contact form .emphasis {
  display: inline-block;
  margin-top: 6px;
  color: var(--brand-cta);
  font-size: 12px;
  font-weight: 600;
}
.content.contact .emphasis {
  color: var(--brand-cta) !important;
  font-weight: 600;
}

/* 確認画面の戻る / 送信する 2 ボタン */
.contact form .button.submit.two {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
.contact form .button.submit.two a,
.contact form .button.submit.two a.w300,
.contact form .button.submit.two input[type="submit"],
.contact form .button.submit.two input[type="submit"].w300 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 46px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  border: none !important;
  cursor: pointer;
  text-decoration: none !important;
  font-family: var(--font-sans) !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-shadow: none !important;
  vertical-align: middle;
  transition:
    background 0.3s ease,
    transform 0.15s ease;
}
.contact form .button.submit.two a.backlink,
.contact form .button.submit.two a.green {
  background: #fff !important;
  color: var(--brand-deep) !important;
  border: 1px solid var(--brand-deep) !important;
  /* border 1px 分の高さ差を中で吸収 */
  line-height: 1 !important;
}
.contact form .button.submit.two a.backlink:hover,
.contact form .button.submit.two a.green:hover {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  transform: translateY(-1px);
}
.contact form .button.submit.two input[type="submit"],
.contact form .button.submit.two input[type="submit"].blue {
  background: var(--brand-main) !important;
  color: #fff !important;
}
.contact form .button.submit.two input[type="submit"]:hover {
  background: var(--brand-sky) !important;
  transform: translateY(-1px);
}

/* ============================================================
   27-6. /login/ 会員ログインフォーム
   ============================================================ */

.content.contact.login,
.content.contact.login + .content.contact {
  background: transparent !important;
}

/* login.css の display: table を解除 */
.contact form .login,
form > .login,
div.login {
  display: block !important;
  width: auto !important;
}
.contact form .login dl,
form > .login dl {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
.contact form .login dl dt,
form > .login dl dt {
  width: auto !important;
  float: none !important;
  background: transparent !important;
  padding: 0 0 4px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--brand-deep) !important;
  font-size: 13px !important;
}
.contact form .login dl dd,
form > .login dl dd {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.contact form .login dl dd input[type="text"],
.contact form .login dl dd input[type="password"],
form > .login dl dd input[type="text"],
form > .login dl dd input[type="password"] {
  width: 100% !important;
  max-width: 360px;
  padding: 10px 12px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.contact form .login dl dd input[type="text"]:focus,
.contact form .login dl dd input[type="password"]:focus,
form > .login dl dd input[type="text"]:focus,
form > .login dl dd input[type="password"]:focus {
  outline: none;
  border-color: var(--brand-main) !important;
  box-shadow: 0 0 0 3px rgba(14, 122, 184, 0.12);
}
.contact form .login dl dd a,
form > .login dl dd a {
  font-size: 13px;
  color: var(--brand-main);
  text-decoration: underline;
  white-space: nowrap;
}
.contact form .login dl dd a:hover,
form > .login dl dd a:hover {
  color: var(--brand-cta);
}
.contact form .login .seal,
form > .login .seal {
  display: block !important;
  margin: 14px 0 0 !important;
  text-align: left;
}
.contact form .login .seal img {
  max-width: 100%;
  height: auto;
}

/* エラーメッセージ */
.contact form .login dl dd .emphasis,
.content.contact.login .emphasis {
  display: inline-block;
  margin-top: 4px;
  color: var(--brand-cta) !important;
  font-size: 12px;
  font-weight: 600;
}

/* ログインボタン (.button.submit > input.blue.w300) を contact form と統一 */
.content.contact form .button.submit input.blue {
  background: var(--brand-main) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 36px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  letter-spacing: 1px;
  min-width: 220px;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition:
    background 0.3s ease,
    transform 0.15s ease;
}
.content.contact form .button.submit input.blue:hover {
  background: var(--brand-sky) !important;
  transform: translateY(-1px);
}

/* ============================================================
   28. /dedicated/service/multi 等 プロセスフロー (#flow .process_box)
   ============================================================ */

#flow.content.process,
#flow.content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 30px !important;
}
#flow .content_wrapper {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none !important;
}
#flow .process_image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

/* プロセスステップ カード */
#flow .process_box {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  padding: 20px 22px !important;
  margin: 0 0 14px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
  border-left: 4px solid var(--brand-mint) !important;
}
#flow .process_box:nth-child(even) {
  background: #fff !important;
}

/* STEP ラベル(バッジ化、背景画像は無効化) */
#flow .process_box h4.step {
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
  background-image: none !important;
  background: var(--brand-deep) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  padding: 6px 14px !important;
  border-radius: 9999px;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  line-height: 1;
  flex: 0 0 auto;
}
#flow .process_box h4.step::before {
  content: "";
}
/* 同じ box に並ぶ 2 つ目以降の STEP ラベルはアクセントカラーに */
#flow .process_box h4.step ~ h4.step {
  background: var(--brand-main) !important;
}
#flow .process_box h4.step ~ h4.step ~ h4.step {
  background: var(--brand-cta) !important;
}

/* テキスト本体 */
#flow .process_box .text {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 4px;
}
#flow .process_box .text p,
#flow .process_box > p {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--fg-1) !important;
}
#flow .process_box .text p:last-child,
#flow .process_box > p:last-child {
  margin-bottom: 0 !important;
}
#flow .process_box .text .emphasis,
#flow .process_box .emphasis {
  color: var(--brand-cta);
  font-weight: 600;
}
#flow .process_box .text ul.supplementary {
  margin: 10px 0 0 !important;
}

/* 1個目の process_box が content_wrapper 内に入っている構造の補正 */
#flow .content_wrapper > .process_box {
  margin: 0 0 14px !important;
}

/* ---- 27-5. 上部の小ノート ( .content > ul.list.point ) ---- */
.content > ul.list.point,
.content ul.list.point {
  background: #fff8e1 !important;
  border-left: 3px solid var(--brand-rose) !important;
  border-radius: 4px;
  padding: 12px 18px !important;
  margin: 18px 0 !important;
  list-style: none !important;
  display: block !important;
  width: auto !important;
}
.content > ul.list.point li,
.content ul.list.point li {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--fg-1) !important;
  list-style: none;
}
.content > ul.list.point li::before,
.content ul.list.point li::before {
  content: none !important;
}

/* ---------- 17. 補足 ( .supplementary ) ---------- */
.supplementary {
  background: #fff8e1;
  border-left: 4px solid var(--brand-rose);
  color: var(--fg-1);
  padding: 12px 18px;
  font-size: 13px;
  border-radius: 4px;
  list-style: none;
  margin: 18px 0;
}
.supplementary li {
  list-style: none;
  padding: 2px 0;
}

/* ---------- 18. 下層ページ：オプション一覧 ( .option .option_list ) ---------- */
.content.option {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  overflow: visible !important;
}
@media (max-width: 720px) {
  .content.option {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .content.option {
    grid-template-columns: 1fr;
  }
}
.content.option::before,
.content.option::after {
  content: none !important;
  display: none !important;
}
/* h3, p, table, description, supplementary などはグリッドの全幅を使う */
.content.option > h3,
.content.option > p,
.content.option > table,
.content.option > .description,
.content.option > ul.supplementary,
.content.option > ul.point {
  grid-column: 1 / -1;
  margin-top: 0 !important;
}
/* オプションカード本体 */
.content.option .option_list {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box;
}
.option_list_wrap {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  padding: 18px 18px 14px !important;
  height: 100% !important;
  position: static !important;
  overflow: visible !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.option_list_wrap:hover {
  box-shadow: 0 4px 16px rgba(8, 43, 73, 0.08);
  transform: translateY(-2px);
}
.option_list_wrap strong {
  display: block !important;
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  margin: -18px -18px 12px -18px !important;
  border-radius: 6px 6px 0 0;
  text-align: center;
  letter-spacing: 0.5px;
}
.option_list_wrap p {
  font-size: 13px !important;
  line-height: 22px !important;
  color: var(--fg-1) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  flex: 1;
}
.option_list_wrap .button,
.option_list_wrap .button.w50 {
  margin: 12px 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  width: 100% !important;
}
.option_list_wrap .button.w50 a {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ---------- 19. 下層ページ：説明ブロック ( .description ) ---------- */
.description {
  display: flex !important;
  align-items: flex-start;
  gap: 24px;
  background: var(--bg-soft);
  padding: 22px;
  border-radius: 6px;
  margin: 18px 0;
  box-sizing: border-box;
}
.description::before,
.description::after {
  content: none !important;
  display: none !important;
}
.description .icon,
.description .icon.button {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 180px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.description .icon img {
  max-width: 160px;
  height: auto;
  display: block;
}
.description .icon.button a {
  margin: 0 !important;
  padding: 8px 16px !important;
  min-width: 0 !important;
  width: auto !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
.description .text,
.description .descritpion {
  flex: 1;
  min-width: 0;
}
.description .text p,
.description .descritpion p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 24px;
  color: var(--fg-1);
}
.description .text p:last-child,
.description .descritpion p:last-child {
  margin-bottom: 0;
}

/* ---------- 20. 下層ページ：サポート比較表 ( table.support_comparison ) ---------- */
table.support_comparison {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 22px 0 !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
table.support_comparison th,
table.support_comparison td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #eef0f2 !important;
  border-right: 1px solid #eef0f2 !important;
  vertical-align: middle;
  text-align: center;
  line-height: 1.5;
}
table.support_comparison th:last-child,
table.support_comparison td:last-child {
  border-right: none !important;
}
table.support_comparison tr:last-child th,
table.support_comparison tr:last-child td {
  border-bottom: none !important;
}
table.support_comparison tr:first-child th {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
}
table.support_comparison th {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600;
  text-align: center;
}
table.support_comparison td {
  color: var(--fg-1);
  background: #fff;
}
table.support_comparison .button {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center;
}
table.support_comparison .button a {
  min-width: 0 !important;
  width: auto !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ---------- 21. 下層ページ：箇条書き ( ul.point ) ---------- */
.content.service ul.point,
.content ul.point {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: none !important;
  width: 100% !important;
  height: auto !important;
}
.content.service ul.point::before,
.content.service ul.point::after,
.content ul.point::before,
.content ul.point::after {
  content: none !important;
  display: none !important;
}
.content.service ul.point li,
.content ul.point li {
  background: var(--bg-soft) !important;
  border-left: 3px solid var(--brand-mint) !important;
  border-radius: 0 4px 4px 0;
  padding: 10px 14px !important;
  font-size: 14px;
  color: var(--fg-1);
  width: auto !important;
  display: block !important;
  margin: 0 !important;
  list-style: none !important;
}
.content.service ul.point li::before,
.content ul.point li::before {
  content: none !important;
}

/* ---------- 21b. 下層ページ：プラン比較テーブル ( table.plan_list ) ---------- */
table.plan_list {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 18px 0 !important;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
/* 1行目のラベル列を 22% に、データ列(td.plan_title)を均等配分。
   旧テンプレート side の inline style="width:20%" / 旧 .plan_title { width:15% } を打ち消し */
table.plan_list th:first-child {
  width: 22% !important;
}
table.plan_list td,
table.plan_list td[style],
table.plan_list .plan_title {
  width: auto !important;
}
table.plan_list th,
table.plan_list td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #eef0f2 !important;
  border-right: 1px solid #eef0f2 !important;
  vertical-align: middle;
  text-align: center;
  line-height: 1.5;
  color: var(--fg-1);
  background: #fff;
}
table.plan_list th:last-child,
table.plan_list td:last-child {
  border-right: none !important;
}
table.plan_list tr:last-child th,
table.plan_list tr:last-child td {
  border-bottom: none !important;
}
table.plan_list th {
  background: var(--bg-soft) !important;
  color: var(--brand-deep) !important;
  font-weight: 600;
}
/* 1行目の td.plan_title (旧:インライン style="background-color:#295bb4") を新ブランドカラーで上書き */
table.plan_list tr:first-child td,
table.plan_list tr:first-child td[style],
table.plan_list .plan_title {
  background: var(--brand-deep-grad) !important;
  background-color: var(--brand-deep) !important;
  color: #fff !important;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}
table.plan_list .firstcost_no_title,
table.plan_list .firstcost_yes_title {
  display: inline-block;
  font-size: 11px;
  color: #fff !important;
  font-weight: 700;
  background: var(--brand-cta) !important;
  text-align: center;
  padding: 3px 10px !important;
  margin: 4px 0 !important;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
table.plan_list .firstcost_yes_title {
  background: var(--brand-main) !important;
}
table.plan_list .initial_monthly_cost {
  font-size: 12px;
  color: var(--fg-1);
  margin: 2px 0 8px;
}
table.plan_list .button {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center;
}
table.plan_list .button a {
  min-width: 0 !important;
  width: auto !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ---------- 21c. お申し込みブロック ( .content.application ) ---------- */
.content.application {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 30px 0 !important;
}
.content.application::before,
.content.application::after {
  content: none !important;
  display: none !important;
}
.application_wrapper {
  width: auto !important;
  display: block !important;
  height: auto !important;
  position: static !important;
  box-sizing: border-box;
}
.application .application_box {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  display: flex;
  flex-direction: column;
}
.application_wrapper h5 {
  background: var(--brand-deep-grad) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 16px !important;
  border: none !important;
  margin: 0 0 14px !important;
  text-align: center;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
}
.application_wrapper .application_box.contact h5 {
  background: linear-gradient(
    to bottom,
    var(--bs-blue) 0%,
    #0a5e94 100%
  ) !important;
}
.application .application_box p {
  font-size: 14px;
  line-height: 24px;
  color: var(--fg-1);
  padding: 0 18px !important;
  margin: 0 0 16px !important;
  flex: 1;
}
.application .application_box .button,
.application .application_box .button.w80 {
  margin: 0 !important;
  padding: 0 18px !important;
  background: transparent !important;
  text-align: center;
}
.application .application_box .button.w80 a {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
}

/* ---------- 22. 下層ページ：説明テキストの汎用 content / content.docs ---------- */
.content.docs,
.content.service,
.content.cf {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.content.cf::after,
.content.docs::after,
.content.service::after {
  content: "";
  display: block;
  clear: both;
}
.content.docs .content_wrapper,
.content.service .content_wrapper {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px !important;
  padding: 22px !important;
  box-sizing: border-box;
}
.content.docs p,
.content.service p {
  font-size: 14px;
  line-height: 24px;
  color: var(--fg-1);
  margin: 0 0 12px;
}
.content.docs p:last-child,
.content.service p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   29. /application/dedicated 等 注文フォーム リブランド
   --------------------------------------------------------------
   注意: フォームの input name / value / id / class の構造には
         一切干渉しない（JS バリデーションを壊さないため）。
         見た目のみを上書きする。
   ============================================================ */

/* ---- 29-1. ヘッダー & 全体 (header/application.html) ---- */
body {
  background: #f7f9fc !important;
}
#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  background: transparent;
  box-sizing: border-box;
}

/* 注文ページのヘッダーは最小限 */
body:has(#main #left form#select_plan) #header,
.application_page #header {
  width: 100% !important;
  height: auto !important;
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  padding: 14px 22px !important;
  margin: 18px 0 !important;
  display: flex !important;
  align-items: center;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
#header > .logo,
#header p.logo {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
#header > .logo a,
#header p.logo a {
  display: inline-block;
}
#header > .logo img,
#header p.logo img {
  height: 36px !important;
  width: auto !important;
  display: block;
}

/* 注文ページの pkz */
#pkz {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 14px !important;
  margin: 0 0 12px !important;
  font-size: 12px !important;
  color: var(--fg-2) !important;
}
#pkz .pkz_wrapper {
  padding: 0 !important;
  background: transparent !important;
}
#pkz a {
  color: var(--brand-main) !important;
  text-decoration: none;
  padding: 0 4px;
}
#pkz a:hover {
  text-decoration: underline;
}
#pkz span {
  display: inline-block;
  width: 12px;
  text-align: center;
  color: var(--fg-3);
}
#pkz span::before {
  content: "›";
  font-size: 14px;
}

/* ---- 29-2. メインレイアウト ----
   ( 右カラム ( #right / #right_wrapper ) を持つページ ( 主に
     /application/dedicated 注文ページ ) でのみ #left を 2 カラム化する。
     右カラムが無いページ ( /dedicated/ /shared/ 等 ) では
     #left を横幅いっぱいに使うため :has() でスコープする ) */
#main {
  display: block;
  padding: 0 !important;
}
#main:has(> #right) > #left,
#main:has(> #right_wrapper) > #left {
  width: calc(100% - 250px) !important;
  float: left !important;
  padding: 0 18px 0 0 !important;
  overflow: visible !important;
  box-sizing: border-box;
}
#main > #right,
#right_wrapper {
  width: 240px !important;
  float: right !important;
  position: relative;
  overflow: visible !important;
}
@media (max-width: 980px) {
  #main:has(> #right) > #left,
  #main:has(> #right_wrapper) > #left {
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
  }
  #main > #right,
  #right_wrapper {
    width: 100% !important;
    float: none !important;
  }
}

/* ---- 29-3. 注文フォームのコンテンツ枠 ---- */
.content.application,
.content_box {
  background: transparent !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
.content.application > form {
  background: transparent !important;
}
.content.application table,
#plan_area table,
#option_area table,
form#select_plan table {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  margin: 0 0 18px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}

/* STEP セクション見出し ( th.step ) */
.content.application table th.step,
table tr th.step,
form#select_plan table th.step {
  background: linear-gradient(
    180deg,
    var(--brand-deep) 0%,
    #0a5e94 100%
  ) !important;
  color: #fff !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  padding: 12px 18px !important;
  border: none !important;
  border-bottom: 1px solid #e0e6ec !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* 通常 th (グラデを解除) */
.content.application table tr th,
form#select_plan table tr th {
  background: var(--bg-soft) !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid #e6ecf2 !important;
  border-right: 1px solid #e6ecf2 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--brand-deep) !important;
  text-align: left !important;
  padding: 10px 14px !important;
  vertical-align: top;
}
.content.application table tr th.sub-title {
  width: 130px !important;
  background: #fafbfd !important;
  color: var(--fg-1) !important;
}
.content.application table td,
form#select_plan table td {
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #eef0f3 !important;
  font-size: 13px;
  color: var(--fg-1);
  text-align: left !important;
  vertical-align: top;
}
.content.application table tr:last-child td,
.content.application table tr:last-child th {
  border-bottom: none !important;
}

/* ---- 29-4. プラン選択 (#select_plan) ---- */
table tr td ul#select_plan {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
table tr td ul#select_plan > li {
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
table tr td ul#select_plan > li:last-child {
  margin-bottom: 0 !important;
}
table tr td ul#select_plan > li:hover,
table tr td ul#select_plan > li.select {
  border-color: var(--brand-main) !important;
  background: rgba(14, 122, 184, 0.03) !important;
  box-shadow: 0 0 0 3px rgba(14, 122, 184, 0.06);
}
table tr td ul#select_plan > li label {
  display: block;
  cursor: pointer;
  margin: 0 !important;
}
table tr td ul#select_plan > li input[type="radio"] {
  accent-color: var(--brand-main);
  margin-right: 6px;
  vertical-align: middle;
}
table tr td ul#select_plan > li label .name {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--brand-deep);
  letter-spacing: 0.02em;
}
table tr td ul#select_plan > li dl {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 6px 0 !important;
  margin: 4px 0 0 22px !important;
  overflow: visible !important;
  font-size: 12px;
  color: var(--fg-2);
}
table tr td ul#select_plan > li dl dt {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0;
  display: inline-block;
}
table tr td ul#select_plan > li dl dt em {
  display: inline-block;
  background: var(--brand-mint);
  color: #fff;
  padding: 1px 8px;
  border-radius: 9999px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  margin-right: 6px;
  letter-spacing: 0.04em;
}
table tr td ul#select_plan > li dl dd {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0;
  display: inline-block;
  color: var(--fg-1);
}
table tr td ul#select_plan > li p {
  margin: 8px 0 0 22px !important;
  padding: 6px 10px !important;
  background: #fff8e6;
  border-left: 3px solid var(--brand-cta);
  font-size: 12px;
  color: var(--fg-2);
  border-radius: 3px;
}

/* ---- 29-5. 料金タイプ ( #select_is_initial ) ---- */
#select_is_initial,
table tr td ul#select_is_initial {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
#select_is_initial li,
table tr td ul#select_is_initial li {
  border: 1px solid #e0e6ec !important;
  border-radius: 8px;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  background: #fff;
  overflow: visible !important;
}
#select_is_initial li:first-child {
  border-bottom: 1px solid #e0e6ec !important;
}
#select_is_initial li:last-child {
  margin-bottom: 0 !important;
}
#select_is_initial label {
  cursor: pointer;
  display: block;
}
#select_is_initial input[type="radio"] {
  accent-color: var(--brand-main);
  margin-right: 6px;
  vertical-align: middle;
}
#select_is_initial dl {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 8px 18px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: 1.5;
}
/* base.css の .cf::before / .cf::after が flex items として
   余分なスペースを作るのを抑止 */
#select_is_initial dl.cf::before,
#select_is_initial dl.cf::after,
#select_is_initial dl::before,
#select_is_initial dl::after {
  content: none !important;
  display: none !important;
}
#select_is_initial dl dt,
div.content table tr td ul#select_is_initial dl dt {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--fg-1) !important;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
#select_is_initial dl dd,
div.content table tr td ul#select_is_initial dl dd {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px;
  color: var(--fg-2);
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
}
/* span.show_plan_price 内に <dd> が JS で挿入されるため、
   span 自身を flex コンテナにして dd 群を横並びに揃える */
#select_is_initial dl > span,
#select_is_initial dl span.price,
#select_is_initial .show_plan_price,
#select_is_initial .show_plan_price_is_initial {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
#select_is_initial input[type="radio"] {
  margin: 0 4px 0 0 !important;
  vertical-align: middle;
}
.show_plan_price,
.show_plan_price_is_initial {
  font-size: 12px;
  color: var(--brand-deep);
  font-weight: 600;
}

/* ---- 29-6. オプション選択リスト (CPU/RAM/HDD など) ---- */
#select_cpu,
#select_ram,
#select_hdd,
#select_hdd_backup,
#select_line,
#select_os,
#select_install_type {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#select_cpu li,
#select_ram li,
#select_hdd li,
#select_hdd_backup li,
#select_line li,
#select_os li,
#select_install_type li {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 6px;
  padding: 8px 14px !important;
  margin: 0 !important;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#select_cpu li:hover,
#select_ram li:hover,
#select_hdd li:hover,
#select_hdd_backup li:hover,
#select_line li:hover,
#select_os li:hover,
#select_install_type li:hover,
#select_cpu li.select,
#select_ram li.select,
#select_hdd li.select,
#select_hdd_backup li.select,
#select_line li.select,
#select_os li.select,
#select_install_type li.select {
  border-color: var(--brand-main) !important;
  background: rgba(14, 122, 184, 0.05) !important;
}
#select_cpu li label,
#select_ram li label,
#select_hdd li label,
#select_hdd_backup li label,
#select_line li label,
#select_os li label,
#select_install_type li label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#select_cpu input[type="radio"],
#select_ram input[type="radio"],
#select_hdd input[type="radio"],
#select_hdd_backup input[type="radio"],
#select_line input[type="radio"],
#select_os input[type="radio"],
#select_install_type input[type="radio"] {
  accent-color: var(--brand-main);
  margin: 0;
}

/* ---- 29-6b. JS で style="display: inline" が付与される行/セルを
   テーブルレイアウトとして正しく描画するよう強制
   ( :not([style*="none"]) を使って display: none は除外 →
     .hide() は壊れない ) ---- */
tr.install_detail:not([style*="none"]) {
  display: table-row !important;
}
/* TD 側は TD 自身に display:none が無い場合だけ table-cell に矯正
   ( TR の style に none が無くても、TD ごとに hide される可能性があるため
     必ず TD 自身の style 属性で判定する ) */
tr.install_detail > td:not([style*="none"]) {
  display: table-cell !important;
}

/* ---- 29-7. インストール詳細 (install_detail) 選択状態を視覚的に明確化 ----
   ( 注意: 上で .content.application table td / form#select_plan table td に
     padding: 12px 16px !important を設定済み。 install_detail の左側に
     アイコン分のスペースを確保するため、 form#select_plan を含めた
     より高い specificity のセレクタで padding を上書きする ) */
/* 非選択: 薄背景 + ミント丸 + グレー文字で「候補」感 */
form#select_plan table tr.install_detail td,
div.content table tr.install_detail td,
.content.application table tr.install_detail td {
  background: #fafbfd !important;
  background-image: none !important;
  padding: 14px 18px 14px 56px !important;
  font-size: 12px !important;
  color: var(--fg-3) !important;
  position: relative;
  border-bottom: 1px solid #eef0f3 !important;
  opacity: 0.65;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}
form#select_plan table tr.install_detail td::before,
div.content table tr.install_detail td::before,
.content.application table tr.install_detail td::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
  box-sizing: border-box;
}

/* 選択中 ( JS が install_type クラスを付与 ): ブランドメインの強調表示 */
form#select_plan table tr.install_detail td.install_type,
div.content table tr.install_detail td.install_type,
.content.application table tr.install_detail td.install_type {
  background: linear-gradient(
    90deg,
    rgba(14, 122, 184, 0.12) 0%,
    rgba(14, 122, 184, 0.04) 100%
  ) !important;
  color: var(--fg-1) !important;
  opacity: 1;
  font-weight: 500;
  border-left: 4px solid var(--brand-cta) !important;
  padding: 14px 18px 14px 52px !important;
}
form#select_plan table tr.install_detail td.install_type::before,
div.content table tr.install_detail td.install_type::before,
.content.application table tr.install_detail td.install_type::before {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  box-shadow: 0 0 0 4px rgba(232, 119, 34, 0.18);
}
form#select_plan table tr.install_detail td.install_type::after,
div.content table tr.install_detail td.install_type::after,
.content.application table tr.install_detail td.install_type::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(45deg);
  pointer-events: none;
}

/* 「最小構成 / 標準構成 / その他構成」のラベルバッジ
   ( 注意: .minimum-install / .standard-install / .software-install は
     <td> 自身に付くクラスなので display:inline などを設定しない ) */
tr.install_detail td.minimum-install > div,
tr.install_detail td.standard-install > div,
tr.install_detail td.software-install > div,
.minimum-install > div,
.standard-install > div,
.software-install > div {
  display: inline-block !important;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: var(--fg-3);
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 10px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
/* 選択中行のバッジは色付きで強調 */
.install_type .minimum-install div,
.install_type .standard-install div,
.install_type .software-install div,
td.install_type > .minimum-install div,
td.install_type > .standard-install div,
td.install_type > .software-install div,
td.install_type .minimum-install div,
td.install_type .standard-install div,
td.install_type .software-install div {
  background: var(--brand-deep) !important;
  border-color: var(--brand-deep) !important;
  color: #fff !important;
}

/* ---- 29-8. ホスト名入力 ---- */
.input_host {
  margin: 8px 0 !important;
  padding: 0 !important;
}
.input_host dt {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 14px;
  color: var(--fg-1);
}
.input_host dt input[type="text"] {
  width: 220px !important;
  padding: 8px 10px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  margin-right: 6px;
}
.input_host dt input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-main) !important;
  box-shadow: 0 0 0 3px rgba(14, 122, 184, 0.12);
}
.input_host dd {
  color: var(--brand-cta) !important;
  font-size: 12px;
  padding: 4px 0 !important;
  margin: 0 !important;
}
.host_check {
  font-size: 12px;
  color: var(--fg-2);
}

/* ---- 29-9. 要望テキストエリア ---- */
.demand textarea,
textarea[name="demand"] {
  width: 100% !important;
  min-height: 120px !important;
  padding: 10px 12px !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  resize: vertical;
  box-sizing: border-box;
  background: #fff;
  color: var(--fg-1);
}
.demand textarea:focus,
textarea[name="demand"]:focus {
  outline: none;
  border-color: var(--brand-main) !important;
  box-shadow: 0 0 0 3px rgba(14, 122, 184, 0.12);
}

/* ---- 29-10. リスト (.list_triangle_pink) ---- */
.content.application ul.list_triangle_pink {
  margin: 8px 0 !important;
  padding: 8px 12px !important;
  list-style: none;
  background: #fff8e6;
  border-left: 3px solid var(--brand-cta);
  border-radius: 0 4px 4px 0;
}
.content.application ul.list_triangle_pink li {
  background: none !important;
  background-image: none !important;
  padding: 2px 0 2px 14px !important;
  margin: 0 !important;
  position: relative;
  font-size: 12px;
  color: var(--fg-2);
  list-style: none;
}
.content.application ul.list_triangle_pink li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--brand-cta);
  font-size: 11px;
  top: 3px;
}

/* ---- 29-11. 規約セクション #rule ---- */
#rule {
  margin: 28px 0 !important;
}
#rule .content {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px !important;
  padding: 16px 18px !important;
  margin: 0 0 14px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
}
#rule .content h3,
#rule .content h4 {
  margin: 0 0 8px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #e6ecf2 !important;
  font-size: 14px !important;
  color: var(--brand-deep) !important;
  background: none !important;
  background-image: none !important;
}
#rule textarea {
  width: 100% !important;
  height: 12em !important;
  padding: 12px !important;
  margin: 6px 0 !important;
  border: 1px solid #d6deea !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  line-height: 1.7;
  font-family: var(--font-sans) !important;
  background: #fafbfd;
  color: var(--fg-1);
  resize: vertical;
  box-sizing: border-box;
}
#rule p {
  text-align: center !important;
  font-size: 12px;
  color: var(--fg-2);
  padding: 6px 0 !important;
}
#rule .button.submit {
  text-align: center !important;
  margin: 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#rule .button.submit input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--brand-cta) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 36px !important;
  height: auto !important;
  line-height: 1.3 !important;
  min-width: 240px;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, transform 0.15s ease;
}
#rule .button.submit input[type="submit"]:hover:not(:disabled) {
  background: #d97a17 !important;
  transform: translateY(-1px);
}
#rule .button.submit input[type="submit"]:disabled,
#rule .button.submit input[type="submit"].gray {
  background: #c8d3df !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: 0.8;
}

/* ---- 29-12. 右側 floatMenu (見積もりサマリー) ---- */
#floatMenu {
  width: 240px !important;
  font-size: 13px;
  background: transparent !important;
  overflow: visible !important;
  z-index: 5;
}
#floatMenu .floatmenu_box {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  color: var(--fg-1) !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(8, 43, 73, 0.06);
}
#floatMenu .floatmenu_box.step {
  padding: 12px !important;
  text-align: center;
  background: var(--bg-soft) !important;
}
#floatMenu .floatmenu_box.step img {
  max-width: 100%;
  height: auto;
  border: none !important;
  padding: 0 !important;
  display: block;
  margin: 0 auto;
}
#floatMenu .step:not(.floatmenu_box) {
  background: var(--brand-deep) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-size: 12px;
  letter-spacing: 0.04em;
}
#floatMenu .step h4.type1 {
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 700;
  border: none !important;
  background: transparent !important;
}
#floatMenu .step img {
  display: none;
}
#floatMenu #plan_box,
#floatMenu #spec_box,
#floatMenu #option_cost_box,
#floatMenu #total_box {
  background: transparent !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #eef0f3;
}
#floatMenu #total_box {
  background: var(--bg-soft) !important;
  border-bottom: none !important;
}
#floatMenu dl {
  width: 100% !important;
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 !important;
  margin: 0 !important;
  border: none !important;
}
#floatMenu dt,
#floatMenu dd {
  display: inline !important;
  color: var(--fg-2) !important;
  padding: 0 !important;
  font-size: 12px !important;
  text-align: left;
}
#floatMenu dt {
  flex: 0 0 auto;
}
#floatMenu dd {
  flex: 1 1 auto;
  text-align: right !important;
  color: var(--fg-1) !important;
  font-weight: 500;
}
#floatMenu dd.plan em,
#floatMenu dd em {
  color: var(--brand-deep) !important;
  font-style: normal;
  font-weight: 700;
}
#floatMenu #total_box h5 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  font-size: 11px;
  color: var(--brand-cta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#floatMenu #total_box dd em {
  color: var(--brand-deep) !important;
  font-size: 16px;
  font-weight: 700;
}

/* hide サンプルラベル等 (JSが管理) */
.application_selector.hide {
  display: none !important;
}

/* ---- 29-13. 共通 .content_title ---- */
.content_title {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--brand-deep);
  margin: 24px 0 12px !important;
  padding: 0 0 8px !important;
  border-bottom: 2px solid var(--brand-mint);
}

/* ---- 29-14. 上部ご案内ブロック ---- */
.content > p.content {
  background: #fff !important;
  border: 1px solid #e0e6ec !important;
  border-radius: 8px;
  padding: 16px 20px !important;
  margin: 0 0 18px !important;
  box-shadow: 0 1px 2px rgba(8, 43, 73, 0.04);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-1);
}
.content > p.content ul.supplementary {
  margin: 6px 0 !important;
}