/* ========================================
   ebit inc - 共通スタイル
   Bootstrap 5 + FontAwesome Pro ベース
   ======================================== */

/* ----------------------------------------
   CSS変数（デザイントークン）
   ---------------------------------------- */
:root {
  /* カラー */
  --eb-primary:        #41aed9;
  --eb-primary-hover:  #2e9ec9;
  --eb-primary-dark:   #2c4a6e;
  --eb-primary-light:  #8eb3df;
  --eb-primary-bg:     #ebf5ff;
  --eb-text:           #333333;
  --eb-accent:         #f5b932;
  --eb-accent-hover:   #e0a820;
  --eb-accent-light:   #fbe076;
  --eb-badge-accent:   #ec6b32;
  --eb-bg-light:       #fafafa;
  --eb-bg-gray:        #f5f5f5;
  --eb-border:         #c9c9c9;
  --eb-white:          #ffffff;
  --eb-danger:         #ec3240;
  --eb-success:        #3aaa5c;

  /* タイポグラフィ */
  --eb-font:           'Noto Sans JP', sans-serif;
  --eb-fw-normal:      400;
  --eb-fw-bold:        700;
  --eb-fw-black:       900;

  /* 角丸 */
  --eb-radius-sm:      5px;
  --eb-radius-md:      10px;
  --eb-radius-pill:    50px;

  /* コンテナ */
  --eb-container:      1158px;

  /* トランジション */
  --eb-transition:     background-color 0.2s, color 0.2s;
}

/* ----------------------------------------
   ベース
   ---------------------------------------- */
body {
  font-family: var(--eb-font);
  color: var(--eb-text);
  background-color: var(--eb-white);
  font-size: 16px;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--eb-primary);
}

img {
  max-width: 100%;
  height: auto;
}

/* コンテナ上書き（Bootstrap の .container-xl に合わせる） */
.eb-container {
  max-width: var(--eb-container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ----------------------------------------
   ヘッダー
   ---------------------------------------- */
.site-header {
  background-color: var(--eb-white);
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.site-header .header-logo {
  width: 186px;
  flex-shrink: 0;
}

.site-header .header-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* PCナビゲーション（Bootstrap d-none d-lg-flex で制御） */
.header-nav {
  align-items: center;
  gap: 24px;
}

/* PCアクション（ログイン＋新規登録） */
.header-actions {
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.header-register,
.sp-nav-register {
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.12px;
  transition: color 0.2s;
}
.header-register {
  white-space: nowrap;
}
.header-register:hover,
.sp-nav-register:hover {
  color: var(--eb-primary);
}

/* SPヘッダー */
@media (max-width: 991.98px) {
  .site-header {
    height: 62px;
  }

  .site-header .header-logo {
    width: 131px;
  }
}

/* ----------------------------------------
   ページヘッダー（内部ページ共通）
   ---------------------------------------- */
.page-hero {
  height: 150px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero > .eb-container {
  width: 100%;
}

.page-hero-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-hero-icon {
  height: 64px;
  object-fit: contain;
}

.page-hero-icon--lg {
  height: 80px;
}

.page-hero-title {
  font-size: clamp(20px, 1.02vw + 16px, 28px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

@media (max-width: 991.98px) {
  .page-hero {
    height: 90px;
  }


  .page-hero-icon {
    height: 45px;
  }

  .page-hero-icon--lg {
    height: 56px;
  }
}

/* パンくずリスト */
.breadcrumb-bar {
  background-color: var(--eb-bg-light);
  height: 24px;
  display: flex;
  align-items: center;
}

.breadcrumb-bar > .eb-container {
  width: 100%;
}

.breadcrumb-bar .breadcrumb {
  margin: 0;
  padding: 0;
  font-size: 10px;
  color: var(--eb-text);
  background: transparent;
}

.breadcrumb-bar .breadcrumb-item a {
  text-decoration: underline;
  color: var(--eb-text);
}

.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  content: '>';
  color: var(--eb-text);
}

/* ----------------------------------------
   セクション共通
   ---------------------------------------- */
.section {
  padding: 80px 0;
}

.section-bg-light {
  background-color: var(--eb-bg-light);
}

.section-bg-gray {
  background-color: var(--eb-bg-gray);
}

.section-bg-gradient {
  background: linear-gradient(160deg, #f4ebfb 0%, #e6f0fc 100%);
}

.section-bg-dark {
  background: linear-gradient(180deg, #1a3a5c 0%, #0d1f30 100%);
}

/* セクションタイトル共通 */
.section-title,
.section-title-center,
.section-subtitle {
  color: var(--eb-text);
}
.section-title,
.section-title-center {
  font-weight: var(--eb-fw-bold);
}

/* セクションタイトル（左青ボーダーあり） */
.section-title {
  font-size: 20px;
  padding-left: 12px;
  border-left: 4px solid var(--eb-primary);
  line-height: 1.4;
  margin-bottom: 32px;
}

/* セクションタイトル（中央揃え） */
.section-title-center {
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.96px;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.672px;
  margin-bottom: 40px;
}

.section-bg-dark .section-title-center,
.section-bg-dark .section-subtitle {
  color: var(--eb-white);
}

/* ----------------------------------------
   ボタン
   ---------------------------------------- */

/* 標準ボタン共通ベース（primary / outline / outline-accent / accent / login / back） */
.btn-eb-primary,
.btn-eb-outline,
.btn-eb-outline-accent,
.btn-eb-accent,
.btn-eb-login,
.btn-eb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  border-radius: var(--eb-radius-sm);
  height: 55px;
  padding: 0 32px;
  transition: var(--eb-transition);
}

/* プライマリ（塗りつぶし青） */
.btn-eb-primary {
  background-color: var(--eb-primary);
  color: var(--eb-white);
  border: none;
  letter-spacing: 0.16px;
}
.btn-eb-primary:hover {
  background-color: var(--eb-primary-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

/* アウトライン（青枠） */
.btn-eb-outline {
  background-color: var(--eb-white);
  color: var(--eb-primary);
  border: 1px solid var(--eb-primary);
  letter-spacing: 0.16px;
}
.btn-eb-outline:hover {
  background-color: var(--eb-primary);
  color: var(--eb-white);
}

/* アウトライン（アクセント枠） */
.btn-eb-outline-accent {
  background-color: var(--eb-white);
  color: var(--eb-accent);
  border: 1px solid var(--eb-accent);
  height: 52px;
}
.btn-eb-outline-accent:hover {
  background-color: var(--eb-accent);
  color: var(--eb-white);
}

/* アクセント（塗りつぶし黄） */
.btn-eb-accent {
  background-color: var(--eb-accent);
  color: var(--eb-white);
  border: none;
}
.btn-eb-accent:hover {
  background-color: var(--eb-accent-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

/* ログイン（丸型・小） */
.btn-eb-login {
  background-color: var(--eb-primary);
  color: var(--eb-white);
  border: none;
  border-radius: var(--eb-radius-pill);
  font-size: 14px;
  height: 40px;
  padding: 0 24px;
  transition: background-color 0.2s;
}
.btn-eb-login:hover {
  background-color: var(--eb-primary-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

/* 戻る（薄背景） */
.btn-eb-back {
  background-color: var(--eb-bg-light);
  color: var(--eb-text);
  border: none;
  padding: 14px 28px;
  transition: background-color 0.2s;
}
.btn-eb-back:hover {
  background-color: #ebebeb;
  color: var(--eb-text); /* a:hover の上書き */
}

/* ----------------------------------------
   フォーム
   ---------------------------------------- */
.eb-form-label {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 8px;
  display: block;
}

.eb-form-control {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  height: 46px;
  font-size: 16px;
  color: var(--eb-text);
  padding: 0 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: var(--eb-white);
}

.eb-form-control:focus {
  border-color: var(--eb-primary);
  box-shadow: 0 0 0 3px rgba(65, 174, 217, 0.2);
}

/* Bootstrapのfocus上書き */
.form-control:focus {
  border-color: var(--eb-primary);
  box-shadow: 0 0 0 3px rgba(65, 174, 217, 0.2);
}

/* テキストエリア */
textarea.eb-form-control {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.7;
}

/* ラジオ・チェックボックス共通 */
.eb-form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.eb-form-check input[type="radio"],
.eb-form-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--eb-border);
  background-color: var(--eb-white);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  transition: border-color 0.2s, background-color 0.2s;
}

.eb-form-check input[type="radio"] {
  border-radius: 50%;
}

.eb-form-check input[type="checkbox"] {
  border-radius: 3px;
}

.eb-form-check input[type="radio"]:checked {
  border-color: var(--eb-primary);
  background: radial-gradient(circle, var(--eb-white) 35%, var(--eb-primary) 40%);
}

.eb-form-check input[type="checkbox"]:checked {
  border-color: var(--eb-primary);
  background-color: var(--eb-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.eb-form-check input[type="radio"]:focus,
.eb-form-check input[type="checkbox"]:focus {
  outline: none;
  border-color: var(--eb-primary);
  box-shadow: 0 0 0 3px rgba(65, 174, 217, 0.2);
}

.eb-form-check-label {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  cursor: pointer;
  user-select: none;
}

.eb-form-check-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eb-form-check-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 24px;
}

/* セレクトボックス */
.eb-form-select {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  height: 46px;
  font-size: 16px;
  color: var(--eb-text);
  padding: 0 36px 0 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: var(--eb-white);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
  font-family: var(--eb-font);
}

.eb-form-select:focus {
  border-color: var(--eb-primary);
  box-shadow: 0 0 0 3px rgba(65, 174, 217, 0.2);
}

.eb-form-select:disabled {
  background-color: var(--eb-bg-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

/* バリデーション状態 */
.eb-form-control.is-error,
.eb-form-select.is-error {
  border-color: var(--eb-danger);
}

.eb-form-control.is-error:focus,
.eb-form-select.is-error:focus {
  box-shadow: 0 0 0 3px rgba(236, 50, 64, 0.2);
}

.eb-form-control.is-success,
.eb-form-select.is-success {
  border-color: var(--eb-success);
}

.eb-form-control.is-success:focus,
.eb-form-select.is-success:focus {
  box-shadow: 0 0 0 3px rgba(58, 170, 92, 0.2);
}

.eb-form-error-text {
  font-size: 12px;
  color: var(--eb-danger);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.eb-form-success-text {
  font-size: 12px;
  color: var(--eb-success);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.eb-form-help-text {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* トグルスイッチ */
.eb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.eb-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.eb-toggle-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--eb-border);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.eb-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--eb-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.eb-toggle input[type="checkbox"]:checked + .eb-toggle-track {
  background-color: var(--eb-primary);
}

.eb-toggle input[type="checkbox"]:checked + .eb-toggle-track .eb-toggle-thumb {
  transform: translateX(20px);
}

.eb-toggle input[type="checkbox"]:focus + .eb-toggle-track {
  box-shadow: 0 0 0 3px rgba(65, 174, 217, 0.2);
}

.eb-toggle-label {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  user-select: none;
}

/* ----------------------------------------
   カード
   ---------------------------------------- */

/* フィーチャーカード（白） */
.eb-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 32px 28px;
}

.eb-card .eb-card-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 12px;
}

.eb-card .eb-card-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin-bottom: 12px;
}

.eb-card .eb-card-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
}


/* ----------------------------------------
   ナンバーバッジ（特徴の01/02/03）
   ---------------------------------------- */
.eb-feature-item {
  display: flex;
  gap: 12px;
}


.eb-feature-item .eb-feature-title {
  font-size: 20px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-primary-dark);
  margin-bottom: 8px;
}

.eb-feature-item .eb-feature-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
}

/* ----------------------------------------
   サポートバナー
   ---------------------------------------- */
.eb-support-banner {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  display: flex;
  align-items: stretch;
  min-height: 196px;
}

.eb-support-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  gap: 8px;
  border-right: 1px solid var(--eb-border);
  transition: background-color 0.2s;
}

.eb-support-item:last-child {
  border-right: none;
}

.eb-support-item:hover {
  background-color: var(--eb-bg-light);
}

.eb-support-item .eb-support-icon {
  font-size: 40px;
  margin-bottom: 4px;
  --fa-primary-color: var(--eb-primary-light);
  --fa-secondary-color: var(--eb-primary-bg);
  --fa-secondary-opacity: 0.9;
}

.eb-support-item-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.eb-support-item .eb-support-label {
  font-size: clamp(14px, 0.26vw + 13px, 16px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.eb-support-item .eb-support-arrow {
  color: var(--eb-primary);
  font-size: 14px;
}


.eb-search-input-group {
  display: flex;
  border-radius: var(--eb-radius-sm);
  overflow: hidden;
  border: 1px solid var(--eb-border);
  height: 51px;
  width: 560px;
  max-width: 100%;
}

.eb-search-input {
  flex: 1;
  border: none;
  font-size: 14px;
  color: var(--eb-text);
  padding: 0 16px;
  outline: none;
  font-family: var(--eb-font);
}

.eb-search-input::placeholder {
  color: #c2c2c2;
}

.eb-search-btn {
  background-color: var(--eb-accent);
  border: none;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  font-family: var(--eb-font);
  transition: background-color 0.2s;
  white-space: nowrap;
  border-radius: 0 var(--eb-radius-sm) var(--eb-radius-sm) 0;
}

.eb-search-btn:hover {
  background-color: var(--eb-accent-hover);
}

/* ----------------------------------------
   ステップ表示
   ---------------------------------------- */
.eb-step-list {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.eb-step-chevron {
  display: none;
  flex-shrink: 0;
  justify-content: center;
  color: var(--eb-primary-light);
  font-size: 18px;
  padding-top: 76px;
}

@media (min-width: 768px) {
  .eb-step-chevron {
    display: flex;
  }
}

.eb-step-item {
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.eb-step-badge {
  display: inline-block;
  background-color: var(--eb-primary-dark);
  color: var(--eb-white);
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  padding: 4px 8px;
  margin-bottom: 16px;
}

.eb-step-circle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background-color: var(--eb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  color: var(--eb-primary-dark);
}

.eb-step-title {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 8px;
}

.eb-step-desc {
  font-size: 12px;
  color: var(--eb-text);
  line-height: 1.6;
  text-align: left;
}

/* ----------------------------------------
   ニュースリスト
   ---------------------------------------- */
.eb-news-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--eb-border);
  color: var(--eb-text);
  transition: color 0.2s;
}

.eb-news-item:hover {
  color: var(--eb-primary);
}

.eb-news-date {
  color: var(--eb-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.eb-news-category {
  display: inline-block;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.eb-news-title {
  line-height: 1.6;
}

/* ----------------------------------------
   フッター
   ---------------------------------------- */
.site-footer {
  background-color: var(--eb-primary-dark);
  padding: 56px 0 16px;
}

.site-footer .footer-logo {
  display: block;
  width: 205px;
  margin-bottom: 32px;
}

.site-footer .footer-logo img {
  width: 100%;
}

.site-footer .footer-nav-grid {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.site-footer .footer-nav-group h4 {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin-bottom: 10px;
}

.site-footer .footer-nav-group h4 a {
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
}

.site-footer .footer-nav-group h4 a:hover {
  color: var(--eb-primary-light);
}

.site-footer .footer-nav-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer .footer-nav-group li,
.site-footer .footer-nav-group a {
  font-size: 14px;
  color: var(--eb-primary-light);
}

.site-footer .footer-nav-group a:hover {
  color: var(--eb-white);
}

.site-footer .footer-divider {
  border: none;
  border-top: 1px solid rgba(142, 179, 223, 0.3);
  margin: 0 0 16px;
}

.site-footer .footer-sub-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--eb-primary-light);
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.site-footer .footer-sub-nav a {
  color: var(--eb-primary-light);
}

.site-footer .footer-sub-nav a:hover {
  color: var(--eb-white);
}

.footer-jprs-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.site-footer .footer-jprs {
  width: 67px;
  flex-shrink: 0;
}

.site-footer .footer-note {
  font-size: 12px;
  color: var(--eb-primary-light);
  margin: 0;
}

.site-footer .footer-copy {
  font-size: 12px;
  color: var(--eb-primary-light);
  text-align: center;
  margin: 0;
}

/* ----------------------------------------
   ユーティリティ
   ---------------------------------------- */
.eb-text-primary      { color: var(--eb-primary); }
.eb-text-primary-dark { color: var(--eb-primary-dark); }
.eb-text-accent       { color: var(--eb-accent); }
.eb-text-light        { color: var(--eb-primary-light); }

.eb-bg-primary        { background-color: var(--eb-primary); }
.eb-bg-dark           { background-color: var(--eb-primary-dark); }
.eb-bg-light-blue     { background-color: var(--eb-primary-bg); }

.eb-link {
  color: var(--eb-text);
  text-decoration: underline;
  transition: color 0.2s;
}

.eb-link:hover {
  color: var(--eb-primary);
}

.eb-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--eb-text);
}

.eb-divider-text::before,
.eb-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--eb-border);
}

/* ========================================
   TOPページスタイル（ヒーロー・各セクション）
   ======================================== */

/* ----------------------------------------
   ヘッダー：ナビゲーション・ドロップダウン・言語ボタン
   ---------------------------------------- */

.header-nav-home {
  font-size: 18px;
  color: var(--eb-text);
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}

.header-nav-home:hover {
  color: var(--eb-primary);
}

.header-nav-link,
.nav-dropdown-toggle {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.14px;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-nav-link:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle {
  color: var(--eb-primary);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.nav-dropdown-toggle .fa-chevron-down {
  font-size: 10px;
  color: var(--eb-primary);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  transform: none;
  background-color: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  list-style: none;
  margin: 0;
  min-width: 220px;
  z-index: 100;
}

/* トグルとメニューの隙間をホバー継続させる透明ブリッジ */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: var(--eb-fw-normal);
  color: var(--eb-text);
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.nav-dropdown-menu li a:hover {
  background-color: var(--eb-bg-light);
  color: var(--eb-primary);
}

.nav-dropdown-menu-top > a {
  color: var(--eb-primary-dark);
  border-bottom: 1px solid var(--eb-border);
  margin-bottom: 4px;
}

.nav-dropdown-menu .nav-dropdown-menu-top > a {
  font-weight: var(--eb-fw-bold);
}

.nav-dropdown-menu-top > a i {
  margin-right: 8px;
}

.nav-dropdown-menu-top > a:hover {
  background-color: var(--eb-primary-bg);
  color: var(--eb-primary-dark); /* a:hover の上書き */
}

/* SPハンバーガーボタン */
.header-hamburger {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 22px;
  color: var(--eb-text);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color 0.2s;
}

.header-hamburger:hover {
  color: var(--eb-primary);
}

/* SP ヘッダー言語切り替え（ハンバーガー横） */
.sp-header-lang {
  position: relative;
}

.sp-header-lang-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--eb-font);
  line-height: 1;
  transition: color 0.2s;
}

.sp-header-lang-btn .fa-globe {
  font-size: 20px;
  color: var(--eb-primary);
  transition: color 0.2s;
}

.sp-header-lang-btn:hover .fa-globe {
  color: var(--eb-primary-hover);
}


.sp-header-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-md);
  padding: 6px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 1100;
  flex-direction: column;
  min-width: 130px;
}

.sp-header-lang.is-open .sp-header-lang-dropdown {
  display: flex;
}

.sp-header-lang-dropdown .sp-lang-btn {
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  font-size: 13px;
  justify-content: flex-start;
  width: 100%;
}

.sp-header-lang-dropdown .sp-lang-btn:hover {
  background-color: var(--eb-primary-bg);
  color: var(--eb-primary);
}

.sp-header-lang-dropdown .sp-lang-btn.is-active {
  background-color: var(--eb-primary-bg);
  color: var(--eb-primary);
}


.sp-icon-dropdown {
  position: relative;
}

.sp-icon-dropdown.is-open .header-dropdown-panel {
  display: block;
}

.sp-icon-btn {
  position: relative;
  background: var(--eb-primary-bg);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--eb-primary-dark);
  font-size: 16px;
  padding: 0;
  transition: background 0.2s;
}

.sp-icon-btn:hover {
  background: var(--eb-primary-light);
}

/* SPナビゲーションドロワー（全画面幅） */
#spNavMenu {
  --bs-offcanvas-width: 100%;
}

#spNavMenu .offcanvas-body {
  display: flex;
  flex-direction: column;
}

/* SP nav body: flex column でsearch を最下部に押し出す */
.sp-nav-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sp-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-nav-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  border-bottom: 1px solid var(--eb-border);
  transition: color 0.2s;
}

.sp-nav-list li a:hover {
  color: var(--eb-primary);
}

/* アコーディオンボタン（サブメニューあり項目） */
.sp-nav-accordion-btn {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--eb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  cursor: pointer;
  font-family: var(--eb-font);
  text-align: left;
  transition: color 0.2s;
}

.sp-nav-accordion-btn:hover {
  color: var(--eb-primary);
}

.sp-nav-accordion-btn .fa-chevron-down {
  font-size: 11px;
  color: var(--eb-primary);
  transition: transform 0.25s;
  flex-shrink: 0;
}

.sp-nav-item-has-sub.is-open .sp-nav-accordion-btn .fa-chevron-down {
  transform: rotate(180deg);
}

/* サブメニューリスト */
.sp-nav-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background-color: var(--eb-bg-gray);
}

.sp-nav-item-has-sub.is-open .sp-nav-sub-list {
  display: block;
}

.sp-nav-sub-list li a {
  display: block;
  padding: 12px 20px 12px 36px;
  font-size: 14px;
  font-weight: var(--eb-fw-normal);
  color: var(--eb-text);
  border-bottom: 1px solid var(--eb-border);
  transition: color 0.2s;
}

.sp-nav-sub-list li a:hover {
  color: var(--eb-primary);
}

.sp-nav-sub-top a {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  background-color: var(--eb-primary-bg);
}

.sp-nav-cta {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* SPメニュー検索エリア（最下部に配置） */
.sp-nav-search {
  padding: 16px 20px;
  background-color: var(--eb-bg-light);
  margin-top: auto;
}

.sp-nav-search .eb-search-input-group {
  width: 100%;
}

/* SP検索ボタン：「検索」テキストを非表示にしてアイコンのみ表示 */
.sp-nav-search .sp-nav-search-btn-text {
  display: none;
}

.sp-nav-search .eb-search-btn {
  padding: 0 16px;
}

/* ----------------------------------------
   言語切り替え
   ---------------------------------------- */

/* PC：ドロップダウントグルボタン */
.lang-switcher-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--eb-font);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.lang-switcher-btn:hover,
.nav-dropdown:hover .lang-switcher-btn {
  color: var(--eb-primary);
}
.lang-switcher-btn .fa-globe {
  font-size: 15px;
  color: var(--eb-primary);
}
.lang-switcher-btn .fa-chevron-down {
  font-size: 10px;
  color: var(--eb-primary);
}

/* PC：ドロップダウンを右端基準で開く */
.lang-switcher .nav-dropdown-menu {
  left: auto;
  right: 0;
  min-width: 140px;
}

.sp-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  cursor: pointer;
  background: none;
  font-family: var(--eb-font);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.sp-lang-btn:hover {
  border-color: var(--eb-primary);
  color: var(--eb-primary);
}
.sp-lang-btn.is-active {
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
  color: var(--eb-white);
}

/* ----------------------------------------
   ヒーローセクション
   ---------------------------------------- */
.hero-section {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--eb-white);
  padding: 100px 0 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-sub {
  font-size: clamp(10.5px, 1.3vw + 6px, 18px);
  font-weight: var(--eb-fw-black);
  color: var(--eb-text);
  letter-spacing: clamp(0.7px, 0.13vw + 0.25px, 1.9px);
  margin-bottom: 16px;
}

.hero-heading {
  font-size: clamp(20px, 3vw + 11px, 41px);
  font-weight: var(--eb-fw-black);
  color: var(--eb-text);
  letter-spacing: clamp(1.5px, 0.3vw + 0.8px, 4px);
  margin-bottom: 0;
  line-height: 1.2;
}

.hero-heading-em {
  color: var(--eb-primary);
}

/* ----------------------------------------
   検索セクション（ヒーロー直下）
   ---------------------------------------- */
.section-search {
  background-color: var(--eb-primary-dark);
  padding: 56px 0 48px;
  position: relative;
}

.section-search-pre-footer {
  background-color: var(--eb-bg-light);
  padding: 20px 0;
}

.search-section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-main-group {
  width: 690px;
  max-width: 100%;
}

.search-main-group.eb-search-input-group {
  height: 78px;
}

/* 吹き出しバッジ：ヒーローセクションとの境目に absolute で配置 */
.eb-badge.search-hero-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: auto;
  font-size: 24px;
  padding: 4px 24px;
}

.search-section-caption {
  font-size: clamp(14px, 0.26vw + 13px, 16px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0 0 16px;
}

#searchSection .eb-search-input {
  font-size: clamp(16px, 0.51vw + 14px, 20px);
}

#searchSection .eb-search-btn {
  font-size: clamp(16px, 1.02vw + 12px, 24px);
  padding: 0 36px;
}

.search-section-links {
  display: flex;
  gap: 40px;
  margin-top: 16px;
  width: 690px;
  max-width: 100%;
  justify-content: flex-end;
}

.search-section-link {
  font-size: 14px;
  color: var(--eb-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.search-section-link:hover {
  opacity: 0.75;
  color: var(--eb-white); /* a:hover の上書き */
}

/* ----------------------------------------
   おすすめドメイン
   ---------------------------------------- */
.section-domains {
  background-color: var(--eb-white);
}



.domains-label {
  font-size: 14px;
  color: var(--eb-primary);
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.section-domains .section-title-center {
  font-size: clamp(22px, 0.77vw + 19px, 28px);
  font-weight: var(--eb-fw-black);
  text-align: left;
  letter-spacing: 0.076em;
  margin-bottom: 20px;
}

.domain-card {
  background-color: var(--eb-white);
  border: 1px solid var(--eb-primary);
  border-radius: var(--eb-radius-sm);
  padding: 40px 16px 24px;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  position: relative;
}

.domain-card-featured {
  background-color: var(--eb-white);
  border-width: 4px;
  box-shadow: 0 4px 20px rgba(65, 174, 217, 0.18);
}

.domain-card-top {
  margin: -40px -16px 0;
  padding: 40px 16px 40px;
}

.domain-card-featured .domain-card-top {
  background-color: var(--eb-primary-bg);
  border-radius: 6px 6px 0 0;
}

.domain-badge-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.domain-badge-wrap .eb-badge {
  position: relative;
  margin-bottom: 0;
}

.domain-ext {
  font-size: 60px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-primary);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: 0.024em;
}

.domain-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  margin-bottom: 0;
}

.price-amount {
  font-size: 28px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-text);
  letter-spacing: 0.076em;
}

.price-unit {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.076em;
}

.domain-divider {
  border: none;
  border-top: 1px solid var(--eb-border);
  margin: 0;
}

.domain-search-link {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  background-color: var(--eb-primary);
  color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  text-align: center;
  transition: background-color 0.2s;
  letter-spacing: 0.014em;
}

.domain-search-link:hover {
  background-color: var(--eb-primary-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

.domain-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.domain-features li {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.032em;
  padding: 10px 0;
}

.domain-features li + li {
  border-top: 1px solid var(--eb-border);
}

.domain-features li i {
  color: var(--eb-primary);
  flex-shrink: 0;
}

.domain-recommend {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--eb-border);
  text-align: left;
  margin-bottom: 20px;
}

.domain-recommend-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--eb-primary-bg);
  border-radius: var(--eb-radius-sm);
  padding: 4px 10px;
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 8px;
}

.domain-recommend-label i {
  color: var(--eb-accent);
}

.domain-recommend-text {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0;
  letter-spacing: 0.1em;
}

/* ----------------------------------------
   イービットが選ばれる理由
   ---------------------------------------- */
.section-why-ebit {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: linear-gradient(0deg, #E3F2FD 1.9%, #F3E5F5 94.97%);
}

.section-why-ebit .eb-container {
  position: relative;
}

.why-ebit-eyebrow {
  font-size: clamp(13px, 0.13vw + 13px, 14px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.why-ebit-heading {
  font-size: clamp(22px, 0.77vw + 19px, 28px);
  font-weight: var(--eb-fw-black);
  color: var(--eb-text);
  letter-spacing: 0.076em;
  margin-bottom: 20px;
}

.why-ebit-desc {
  color: var(--eb-text);
  line-height: 1.8;
  letter-spacing: 0.032em;
  margin: 0;
}

.why-ebit-top-row {
  position: relative;
  z-index: 1;
}

.why-ebit-photo {
  border-radius: var(--eb-radius-sm);
  object-fit: cover;
  display: block;
}

@media (max-width: 991.98px) {
  .why-ebit-photo {
    display: none;
  }
}

/* 理由カードグリッド（写真の手前に引き上げ） */
.why-reason-grid {
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .why-reason-grid {
    margin-top: -80px;
  }
}

/* 理由カード（横長・白ボーダー） */
.why-reason-card {
  background-color: var(--eb-white);
  border: 1px solid var(--eb-primary-dark);
  border-radius: var(--eb-radius-sm);
  padding: 24px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.why-reason-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 130px;
}

.why-reason-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.why-reason-num {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  background-color: var(--eb-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-accent-light);
}

.why-reason-title {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0;
}

.why-reason-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 12px;
}

.why-reason-link {
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
  text-align: left;
  display: block;
  letter-spacing: 0.028em;
  transition: color 0.2s;
}

.why-reason-link:hover {
  color: var(--eb-primary);
}

/* 仕切り線スタイル（ドメインページ用・カードなし） */
.why-reason-divider-row .why-reason-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 32px 40px;
  height: 100%;
}

.why-reason-divider-row .col-lg-4:not(:last-child) .why-reason-card {
  border-bottom: 1px solid var(--eb-border);
}

@media (min-width: 992px) {
  .why-reason-divider-row .col-lg-4:not(:last-child) .why-reason-card {
    border-bottom: none;
    border-right: 1px solid var(--eb-border);
  }

  .why-reason-divider-row .col-lg-4:first-child .why-reason-card {
    padding-left: 0;
  }
}

.why-reason-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-reason-icon-circle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--eb-primary-dark);
  background-color: var(--eb-bg-light);
}

/* ----------------------------------------
   お知らせ
   ---------------------------------------- */
.news-title {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  line-height: 1.4;
  margin-bottom: 32px;
}

.section-news {
  background-color: var(--eb-white);
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.news-more-link {
  color: var(--eb-text);
  text-decoration: underline;
  letter-spacing: 0.076em;
  transition: color 0.2s;
}

.news-more-link:hover {
  color: var(--eb-primary);
}

.eb-news-cat-failure   { background-color: #e05252; }
.eb-news-cat-campaign  { background-color: #41aed9; }
.eb-news-cat-important { background-color: #e05252; }
.eb-news-cat-press     { background-color: #8eb3df; }

/* ----------------------------------------
   キャンペーン情報
   ---------------------------------------- */
.section-campaign {
  padding: 20px 0;
}

.campaign-banners {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.campaign-banner-link {
  display: block;
  width: 250px;
  flex-shrink: 0;
  overflow: hidden;
  transition: opacity 0.2s;
}

.campaign-banner-link:hover {
  opacity: 0.9;
}

.campaign-banner-img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  display: block;
}


.purpose-card-outer {
  position: relative;
  padding-top: 14px;
}

.purpose-card-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--eb-primary-dark);
  color: var(--eb-white);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  height: 28px;
  line-height: 28px;
  padding: 0 16px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  z-index: 1;
}

.purpose-card {
  background-color: var(--eb-primary-bg);
  border-radius: var(--eb-radius-sm);
  padding: 40px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.purpose-icon {
  font-size: 60px;
  align-self: center;
  margin-bottom: 20px;
  --fa-primary-color: var(--eb-primary);
  --fa-secondary-color: var(--eb-primary);
  --fa-secondary-opacity: 0.3;
}

.purpose-card-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  text-align: center;
  margin-bottom: 16px;
}

.purpose-card-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  letter-spacing: 0.028em;
  text-align: left;
  flex: 1;
  margin-bottom: 20px;
}

.purpose-card-link {
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
  letter-spacing: 0.032em;
  text-align: right;
  transition: color 0.2s;
}

.purpose-card-link:hover {
  color: var(--eb-primary);
}

/* ----------------------------------------
   はじめてドメインを取得する方へ
   ---------------------------------------- */
.section-beginner {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background-color: var(--eb-primary-bg);
}


.beginner-section-title {
  font-size: clamp(18px, 0.26vw + 17px, 20px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  text-align: center;
  letter-spacing: 0.048em;
  margin-bottom: 48px;
}

/* ドメインとは？カード */
.what-is-domain-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 32px 28px;
  height: 100%;
}

.what-is-domain-heading {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 16px;
  letter-spacing: 0.048em;
}

.what-is-domain-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  letter-spacing: 0.048em;
  margin-bottom: 12px;
}

.what-is-domain-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.what-is-domain-text-col {
  flex: 1;
}

.what-is-domain-illust {
  width: 132px;
  height: 132px;
  object-fit: contain;
  flex-shrink: 0;
}

.what-is-domain-more {
  display: block;
  text-align: left;
  font-size: 14px;
  margin-bottom: 0;
}

.what-is-domain-divider {
  border: none;
  border-top: 1px solid var(--eb-border);
  margin: 0 0 20px;
}

.what-is-domain-sub {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 16px;
  letter-spacing: 0.048em;
}

.what-is-domain-can-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.what-is-domain-can-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.what-is-domain-can-list li i {
  color: var(--eb-primary);
  font-size: 16px;
  flex-shrink: 0;
}

.what-is-domain-note {
  font-size: 12px;
  color: var(--eb-text);
  margin: 0;
}

.what-is-domain-note a {
  text-decoration: underline;
}

/* 3ステップパネル */
.steps-panel {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 32px 28px;
  height: 100%;
}

.steps-panel-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.048em;
  margin-bottom: 28px;
}

.beginner-support-title {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  text-align: center;
  letter-spacing: 0.048em;
  margin-bottom: 28px;
}

/* ----------------------------------------
   関連サービス・ソリューション
   ---------------------------------------- */
.section-services {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #1a3a5c 0%, #0d1f30 100%);
  padding: 80px 0;
}

.services-heading {
  font-size: clamp(22px, 0.77vw + 19px, 28px);
  font-weight: var(--eb-fw-black);
  color: var(--eb-white);
  letter-spacing: 0.076em;
  margin-bottom: 16px;
}

.services-lead {
  font-size: clamp(14px, 0.26vw + 13px, 16px);
  color: var(--eb-primary-light);
  line-height: 1.7;
  letter-spacing: 0.032em;
  margin: 0;
}

.services-photo {
  position: absolute;
  top: -113px;
  right: 200px;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.services-grid {
  display: flex;
  border-top: 1px solid rgba(142, 179, 223, 0.3);
  border-bottom: 1px solid rgba(142, 179, 223, 0.3);
}

.services-grid-item {
  flex: 1;
  padding: 28px 20px;
  border-right: 1px solid rgba(142, 179, 223, 0.3);
  display: flex;
  flex-direction: column;
}

.services-grid-item:last-child {
  border-right: none;
}

.services-icon {
  font-size: 34px;
  margin-bottom: 16px;
  --fa-primary-color: var(--eb-primary-light);
  --fa-secondary-color: var(--eb-accent-light);
  --fa-secondary-opacity: 0.9;
}

.services-item-title {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  letter-spacing: 0.032em;
  margin-bottom: 12px;
}

.services-item-body {
  font-size: 14px;
  color: var(--eb-primary-light);
  line-height: 1.7;
  letter-spacing: 0.028em;
  flex: 1;
  margin-bottom: 16px;
}

.services-item-link {
  font-size: 14px;
  color: var(--eb-primary-light);
  text-decoration: underline;
  letter-spacing: 0.028em;
  transition: color 0.2s;
  align-self: flex-end;
}

.services-item-link:hover {
  color: var(--eb-white);
}

/* ----------------------------------------
   スティッキー検索バー
   ---------------------------------------- */
.sticky-search {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--eb-bg-light);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
  padding: 16px 0;
  z-index: 900;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

@media (min-width: 992px) {
  .sticky-search {
    display: block;
  }
}

.sticky-search.is-visible {
  transform: translateY(0);
}

.sticky-search-inner {
  display: flex;
  justify-content: center;
}

.sticky-search-group {
  width: 620px;
  max-width: 100%;
}

/* ========================================
   コンポーネントパーツ（Figma 1:5355）
   ======================================== */

/* ----------------------------------------
   テーブル（ダブルヘッダー / シングルヘッダー）
   ---------------------------------------- */
.eb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--eb-text);
}

.eb-table th,
.eb-table td {
  border: 1px solid var(--eb-border);
  padding: 12px 16px;
  height: 49px;
  vertical-align: middle;
  text-align: center;
}

.eb-table th {
  background-color: var(--eb-bg-gray);
  font-weight: var(--eb-fw-bold);
  white-space: nowrap;
  width: 200px;
}

.eb-table td {
  background-color: var(--eb-white);
}

/* tbody th は行見出し（左揃え・幅固定） */
.eb-table tbody th {
  text-align: left;
}

/* ダブルヘッダー: thead th は列見出し（primary-dark背景・白テキスト） */
.eb-table--double thead th {
  background-color: var(--eb-primary-dark);
  color: #fff;
}

@media (max-width: 767px) {
  .eb-table,
  .eb-table tbody,
  .eb-table tr,
  .eb-table th,
  .eb-table td {
    display: block;
    width: 100%;
  }
  .eb-table th,
  .eb-table td {
    height: auto;
    text-align: left;
    border-bottom: none;
  }
  .eb-table tr {
    border: 1px solid var(--eb-border);
    margin-bottom: 12px;
  }
  .eb-table tr:last-child {
    margin-bottom: 0;
  }
  .eb-table th {
    border-bottom: 1px solid var(--eb-border);
    white-space: normal;
  }
}

/* ----------------------------------------
   説明リスト
   ---------------------------------------- */
.eb-desc-list {
  display: flex;
  flex-direction: column;
}

.eb-desc-item {
  padding: 20px 0;
  border-top: 1px solid var(--eb-border);
}

.eb-desc-item:last-child {
  border-bottom: 1px solid var(--eb-border);
}

.eb-desc-term {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 8px;
  padding-left: 12px;
  position: relative;
}

.eb-desc-term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 3px;
  background-color: var(--eb-primary);
}

.eb-desc-detail {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  margin: 0;
}

/* ----------------------------------------
   タブデザイン
   ---------------------------------------- */
.eb-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--eb-border);
  margin-bottom: 20px;
  gap: 0;
}

.eb-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-border);
  cursor: pointer;
  font-family: var(--eb-font);
  position: relative;
  bottom: -1px;
  letter-spacing: 0.028em;
  transition: color 0.2s;
  white-space: nowrap;
}

.eb-tab-btn.is-active {
  color: var(--eb-primary);
  border-bottom-color: var(--eb-primary);
}

.eb-tab-panel {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  display: none;
}

.eb-tab-panel.is-active {
  display: block;
}

/* ----------------------------------------
   バッジデザイン（下中央吹き出し型）
   ---------------------------------------- */
.eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  letter-spacing: 0.036em;
  white-space: nowrap;
  margin-bottom: 10px;
}

.eb-badge::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--eb-badge-bg);
}

.eb-badge .fa-crown {
  color: var(--eb-accent);
}


.eb-badge-primary {
  --eb-badge-bg: var(--eb-primary);
  background-color: var(--eb-badge-bg);
}

.eb-badge-primary-dark {
  --eb-badge-bg: var(--eb-primary-dark);
  background-color: var(--eb-badge-bg);
}

.eb-badge-accent {
  --eb-badge-bg: var(--eb-badge-accent);
  background-color: var(--eb-badge-bg);
}

.eb-badge-badge-accent {
  --eb-badge-bg: var(--eb-badge-accent);
  background-color: var(--eb-badge-bg);
}

.eb-badge-yellow {
  --eb-badge-bg: var(--eb-accent);
  background-color: var(--eb-badge-bg);
}

/* ----------------------------------------
   アラートボックス（Bootstrap .alert 上書き）
   ---------------------------------------- */
.alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left-width: 9px;
  border-radius: var(--eb-radius-sm);
  padding: 12px 48px 12px 20px;
  margin-bottom: 12px;
}

.alert-info {
  background-color: var(--eb-white);
  border-color: var(--eb-primary);
  color: var(--eb-text);
}
.alert-info .eb-alert-icon {
  color: var(--eb-primary);
}

.alert-warning {
  background-color: #fff6e2;
  border-color: var(--eb-accent);
  color: var(--eb-text);
}
.alert-warning .eb-alert-icon,
.alert-warning .eb-alert-title {
  color: var(--eb-accent);
}

.alert-danger {
  background-color: #ffeaeb;
  border-color: var(--eb-danger);
  color: var(--eb-text);
}
.alert-danger .eb-alert-icon,
.alert-danger .eb-alert-title {
  color: var(--eb-danger);
}

.eb-alert-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eb-alert-icon {
  flex-shrink: 0;
  font-size: 20px;
}

.eb-alert-title {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  margin-bottom: 0;
}

.eb-alert-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.6;
  margin-bottom: 6px;
}

.eb-alert-link {
  font-size: 14px;
  text-decoration: underline;
  color: var(--eb-text);
}

/* ----------------------------------------
   リスト（アイコン・数字・中点）
   ---------------------------------------- */
.eb-list-icon,
.eb-list-num,
.eb-list-dot {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* アイコンリスト */
.eb-list-icon li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.032em;
}

.eb-list-icon li i {
  color: var(--eb-primary);
  font-size: 14px;
  flex-shrink: 0;
}

/* 数字付きリスト */
.eb-list-num {
  counter-reset: eb-list-num;
}

.eb-list-num li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.032em;
}

.eb-list-num li::before {
  counter-increment: eb-list-num;
  content: counter(eb-list-num);
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-size: 13px;
  font-weight: var(--eb-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中点リスト */
.eb-list-dot li {
  display: flex;
  align-items: baseline;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.032em;
}

.eb-list-dot li::before {
  content: "・";
  flex-shrink: 0;
}

/* ----------------------------------------
   2カラムカード（アイコン＋タイトル＋テキスト）
   ---------------------------------------- */
.eb-card-2col {
  background-color: var(--eb-primary-bg);
  border-radius: var(--eb-radius-sm);
  padding: 33px 25px 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  height: 100%;
}

.eb-card-2col-icon {
  grid-column: 1;
  grid-row: 1;
  font-size: 20px;
  color: var(--eb-primary-dark);
}

.eb-card-2col-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0;
}

.eb-card-2col-text {
  grid-column: 1 / 3;
  grid-row: 2;
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  margin: 12px 0 0;
}

/* ----------------------------------------
   3カラムカード（画像＋タイトル＋テキスト＋リンク）
   ---------------------------------------- */
.eb-card-3col {
  background-color: var(--eb-primary-bg);
  border-radius: var(--eb-radius-sm);
  display: flex;
  flex-direction: column;
  color: var(--eb-text);
  height: 100%;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.eb-card-3col:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  color: var(--eb-text); /* a:hover の上書き */
}

.eb-card-3col-img {
  margin: 22px 15px 0;
  background-color: var(--eb-bg-gray);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.eb-card-3col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.eb-card-3col-body {
  padding: 16px 15px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.eb-card-3col-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  text-align: center;
  margin-bottom: 12px;
}

.eb-card-3col-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  letter-spacing: 0.028em;
  flex: 1;
  margin-bottom: 12px;
}

.eb-card-3col-link {
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
  text-align: right;
  display: block;
  letter-spacing: 0.028em;
}

/* ----------------------------------------
   バナーリンクカード（暗幕タイプ）
   ---------------------------------------- */
.eb-banner-overlay {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--eb-radius-sm);
  color: var(--eb-white);
  aspect-ratio: 350 / 196;
  transition: opacity 0.2s;
}

.eb-banner-overlay:hover {
  opacity: 0.88;
  color: var(--eb-white); /* a:hover の上書き */
}

.eb-banner-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eb-banner-overlay-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.34);
}

.eb-banner-overlay-body {
  position: relative;
  z-index: 1;
  padding: 63px 25px 0;
}

.eb-banner-overlay-title {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin-bottom: 8px;
}

.eb-banner-overlay-lead {
  font-size: 12px;
  color: var(--eb-white);
}

/* ----------------------------------------
   バナーリンクカード（白ボックスタイプ）
   ---------------------------------------- */
.eb-banner-thumb {
  display: block;
  color: var(--eb-text);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.2s;
}

.eb-banner-thumb:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  color: var(--eb-text); /* a:hover の上書き */
}

.eb-banner-thumb-img {
  width: 100%;
  aspect-ratio: 228 / 128;
  object-fit: cover;
  display: block;
}

.eb-banner-thumb-body {
  background-color: var(--eb-white);
  padding: 12px 8px 8px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}

.eb-banner-thumb-title {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 4px;
}

.eb-banner-thumb-lead {
  font-size: 14px;
  color: var(--eb-text);
  margin-bottom: 4px;
}

.eb-banner-thumb-link {
  font-size: 12px;
  color: var(--eb-text);
  text-align: right;
  display: block;
}

/* ----------------------------------------
   バナーリンクカルーセル（Bootstrap カスタマイズ）
   ---------------------------------------- */
.eb-carousel {
  padding: 0 32px;
}

.eb-carousel-row {
  display: flex;
  gap: 20px;
}

.eb-carousel-col {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
}

/* 前へ・次へボタン */
.eb-carousel .carousel-control-prev,
.eb-carousel .carousel-control-next {
  width: 32px;
  opacity: 1;
  color: var(--eb-primary-dark);
}

.eb-carousel .carousel-control-prev-icon,
.eb-carousel .carousel-control-next-icon {
  display: none;
}

.eb-carousel .carousel-control-prev i,
.eb-carousel .carousel-control-next i {
  font-size: 20px;
}

/* インジケーター（ドット） */
.eb-carousel .carousel-indicators {
  position: static;
  margin: 14px 0 0;
  gap: 6px;
}

.eb-carousel .carousel-indicators button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--eb-border);
  border-top: none;
  border-bottom: none;
  opacity: 1;
  flex: 0 0 8px;
  transition: background-color 0.2s;
}

.eb-carousel .carousel-indicators button.active {
  background-color: var(--eb-primary);
  opacity: 1;
}

/* 3列バリアント（CPページ等の狭いコンテキスト用） */
.eb-carousel--3col .eb-carousel-col {
  flex: 0 0 calc(33.333% - 14px);
}

/* SP：カルーセル余白調整 */
@media (max-width: 767.98px) {
  .eb-carousel {
    padding: 0 28px;
  }
}

/* ----------------------------------------
   縦ステップ
   ---------------------------------------- */
.eb-steps-v {
  display: flex;
  flex-direction: column;
}

.eb-steps-v-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

/* ステップ間の縦連結線 */
.eb-steps-v-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 67px;
  bottom: 0;
  width: 4px;
  background-color: var(--eb-primary);
  z-index: 0;
}

.eb-steps-v-num {
  flex-shrink: 0;
  width: 67px;
  height: 67px;
  background-color: var(--eb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-white);
  letter-spacing: 0.048em;
  position: relative;
  z-index: 1;
}

.eb-steps-v-body {
  flex: 1;
  padding: 8px 0 40px;
}

.eb-steps-v-item:last-child .eb-steps-v-body {
  padding-bottom: 0;
}

.eb-steps-v-title {
  font-size: clamp(16px, 0.51vw + 14px, 20px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.048em;
  margin-bottom: 8px;
}

.eb-steps-v-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  letter-spacing: 0.048em;
  margin: 0;
}

/* ----------------------------------------
   アコーディオン（Q&A）
   ---------------------------------------- */
.eb-accordion {
  display: flex;
  flex-direction: column;
}

.eb-accordion-item {
  border-top: 1px solid var(--eb-border);
}

.eb-accordion-item:last-child {
  border-bottom: 1px solid var(--eb-border);
}

.eb-accordion-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: var(--eb-font);
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.eb-accordion-toggle {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-size: 13px;
  font-weight: var(--eb-fw-black);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.eb-accordion-toggle::before {
  content: '＋';
}

.eb-accordion-item.is-open .eb-accordion-toggle {
  background-color: var(--eb-primary-light);
}

.eb-accordion-item.is-open .eb-accordion-toggle::before {
  content: '－';
}

.eb-accordion-panel {
  color: var(--eb-text);
  line-height: 1.7;
  padding: 0 0 20px;
  display: none;
}

.eb-accordion-panel.is-visible {
  display: block;
}

/* ----------------------------------------
   サイド見出し（画像＋テキスト）
   ---------------------------------------- */
.eb-side-block {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 48px;
}

.eb-side-block.is-reverse {
  flex-direction: row-reverse;
}

.eb-side-block-img {
  flex: 0 0 44%;
  overflow: hidden;
}

.eb-side-block-img img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.eb-side-block-body {
  flex: 1;
  padding-top: 4px;
}

.eb-side-block-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.8;
  margin-top: 16px;
}

/* ----------------------------------------
   フッターレイアウト
   ---------------------------------------- */
/* ========================================
   コンポーネント確認ページ（components.html）
   ======================================== */

.comp-section {
  padding: 56px 0;
  border-bottom: 2px dashed #ddd;
}

.comp-label {
  display: inline-block;
  background: #333;
  color: #fff;
  font-size: 11px;
  font-weight: var(--eb-fw-bold);
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 20px;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.comp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.comp-hint {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.comp-hint--md { margin-bottom: 12px; }
.comp-hint--lg { margin-bottom: 16px; }
.comp-hint--gap { margin: 32px 0 12px; }

.comp-page-hero-demo {
  height: 132px;
  background-image: url('img/page-hero-bg.png');
}

.comp-h3 {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  letter-spacing: 0.024em;
  margin-bottom: 24px;
}

.comp-h4 {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.024em;
  margin: 0;
}

.comp-demo-narrow {
  max-width: 720px;
}

.comp-demo-steps {
  max-width: 580px;
}

.comp-row-2x {
  height: 67px;
}

.comp-small {
  font-weight: var(--eb-fw-normal);
  font-size: 12px;
}


.comp-svg {
  width: 100%;
  height: auto;
  display: block;
}

.comp-svg-fill {
  width: 100%;
  height: 100%;
  display: block;
}



/* ========================================
   SP（スマートフォン）レスポンシブ
   ======================================== */

@media (max-width: 991.98px) {

  /* ---- セクション共通 ---- */
  .section {
    padding: 48px 0;
  }

  .section-campaign {
    padding: 20px 0;
  }


  /* ---- ヒーロー ---- */
  .hero-section {
    padding: 24px 0 20px;
    min-height: 0;
  }

  .hero-sub {
    margin-bottom: 8px;
  }

  .hero-heading {
    line-height: 1.3;
  }

  /* ---- ドメイン検索セクション ---- */
  .section-search {
    padding: 24px 0;
  }

  .eb-badge.search-hero-badge {
    display: none;
  }


  .search-main-group.eb-search-input-group {
    height: 57px;
  }


  #searchSection .eb-search-btn {
      padding: 0 20px;
  }

  .search-section-links {
    width: 100%;
    justify-content: center;
    gap: 20px;
  }

  /* ---- おすすめドメイン ---- */
  .section-domains .section-title-center {
      text-align: left;
  }



  /* SP: .co.jp（フィーチャーカード）を先頭に表示 */
  .section-domains .row > div:has(.domain-card-featured) {
    order: -1;
  }

  /* ---- イービットが選ばれる理由 ---- */


  .why-ebit-photo {
    display: none;
  }

  .why-reason-content {
    min-height: 0;
  }

  .why-reason-icon-wrap {
    display: none;
  }

  /* ---- 関連サービス ---- */
  .section-services {
    padding-top: 0;
    padding-bottom: 48px;
  }

  .services-photo {
    display: none;
  }

  .section-services .eb-container {
    padding-top: 48px;
  }



  .services-grid {
    flex-direction: column;
  }

  .services-grid-item {
    border-right: none;
    border-bottom: 1px solid rgba(142, 179, 223, 0.3);
    padding: 20px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 8px;
    align-items: start;
  }

  .services-grid-item:last-child {
    border-bottom: none;
  }

  .services-grid-item .services-icon {
    font-size: 22px;
    margin-bottom: 0;
    align-self: center;
    line-height: 1;
  }

  .services-grid-item .services-item-title {
    margin-bottom: 0;
    align-self: center;
  }

  .services-grid-item .services-item-body {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .services-grid-item .services-item-link {
    grid-column: 1 / -1;
  }

  /* ---- はじめてドメイン ---- */
  .beginner-section-title {
      margin-bottom: 32px;
  }

  .what-is-domain-main {
    flex-direction: column;
  }

  .what-is-domain-main .what-is-domain-illust {
    align-self: center;
  }

  .steps-panel-title {
    font-size: 18px;
  }


  /* ---- サポートバナー（2×2グリッド） ---- */
  .eb-support-banner {
    flex-wrap: wrap;
    min-height: 0;
  }

  .eb-support-item {
    flex: 0 0 50%;
    border-right: 1px solid var(--eb-border);
    border-bottom: 1px solid var(--eb-border);
    min-height: 120px;
    padding: 20px 12px;
  }

  .eb-support-item:nth-child(even) {
    border-right: none;
  }

  .eb-support-item:nth-child(3),
  .eb-support-item:nth-child(4) {
    border-bottom: none;
  }


  /* ---- スティッキー検索・フッター前検索 ---- */
  .sticky-search-group .search-btn-label,
  .section-search-pre-footer .search-btn-label {
    display: none;
  }

  .sticky-search-group .eb-search-btn,
  .section-search-pre-footer .eb-search-btn {
    padding: 0 16px;
  }

  /* ---- お知らせ ---- */
  .news-title {
    margin-bottom: 20px;
  }

  .eb-news-item {
    flex-direction: column;
    gap: 4px;
  }

  /* ---- フッター ---- */
  .site-footer {
    padding: 40px 0 16px;
  }

  .site-footer .footer-nav-grid {
    flex-wrap: wrap;
    gap: 0;
  }

  .site-footer .footer-nav-group {
    flex: 0 0 50%;
    padding: 16px 8px;
    border-bottom: 1px solid rgba(142, 179, 223, 0.15);
  }

  .site-footer .footer-nav-group:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* ========================================
   料金シミュレーションページ (calc.html)
   ======================================== */

/* ページヒーロー背景 */
.page-hero-secondary {
  background-image: url('img/page-hero-bg.png');
}

/* =============================================
   SP固定シミュレーターフッター
   ============================================= */



.calc-sp-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
 background: linear-gradient(183deg, #41AED9 4%, #8EB3DF 90%);
}

.calc-sp-footer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.calc-sp-total-card {
  flex: 1;
  position: relative;
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 6px 8px 8px;
  min-height: 47px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-sp-total-label {
  font-size: 9px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0;
  line-height: 1.4;
}

.calc-sp-total-amount {
  font-weight: var(--eb-fw-black);
  color: var(--eb-primary);
  letter-spacing: 1.216px;
  margin: 0;
  line-height: 1.2;
}

.calc-sp-total-tax {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 8px;
  color: var(--eb-text);
  margin: 0;
  letter-spacing: 0.608px;
}

.calc-sp-toggle-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--eb-white);
  font-size: 20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.calc-sp-toggle-btn i {
  transition: transform 0.3s ease;
}

.calc-sp-footer.is-open .calc-sp-toggle-btn i {
  transform: rotate(180deg);
}

/* アコーディオン本体 */
.calc-sp-footer-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.calc-sp-footer.is-open .calc-sp-footer-body {
  max-height: 600px;
}

.calc-sp-breakdown {
  margin: 0;
  padding: 0 12px;
}

.calc-sp-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.calc-sp-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.calc-sp-item-name {
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0;
}

.calc-sp-item-amount {
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  white-space: nowrap;
  margin: 0;
}

.calc-sp-item-detail {
  font-size: 12px;
  color: var(--eb-white);
  margin: 0;
}

.calc-sp-item-detail-line {
  margin: 0;
  font-size: 12px;
}

/* CTAボタン */
.calc-sp-footer-cta {
  display: flex;
  gap: 9px;
  padding: 10px 10px 14px;
}

.calc-sp-btn-apply,
.calc-sp-btn-consult {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--eb-radius-sm);
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.12px;
}

.calc-sp-btn-apply {
  background-color: var(--eb-accent);
  color: var(--eb-white);
}

.calc-sp-btn-consult {
  border: 1px solid var(--eb-white);
  color: var(--eb-white);
}

/* =============================================
   ドメイン選択モーダル
   ============================================= */

.domain-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.domain-modal-overlay.is-open {
  display: flex;
}

.domain-modal-dialog {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  width: 100%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.domain-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--eb-border);
  flex-shrink: 0;
}

.domain-modal-title {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0;
}

.domain-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--eb-border);
  font-size: 18px;
  border-radius: 50%;
  transition: background-color 0.15s, color 0.15s;
}

.domain-modal-close:hover {
  background-color: var(--eb-bg-gray);
  color: var(--eb-text);
}

.domain-modal-body {
  overflow-y: auto;
}

.domain-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.domain-modal-list li + li {
  border-top: 1px solid var(--eb-border);
}

.domain-modal-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: var(--eb-text);
  cursor: pointer;
  transition: background-color 0.15s;
}

.domain-modal-item-link:hover {
  background-color: var(--eb-primary-bg);
  color: var(--eb-primary);
}

.domain-modal-item-link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.domain-modal-item-avail {
  font-size: 11px;
  font-weight: var(--eb-fw-bold);
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.domain-modal-item-ext {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  flex: 1;
}

.domain-modal-item-price {
  font-size: 14px;
  color: var(--eb-text);
  font-weight: 400;
  min-width: 90px;
  text-align: right;
}

/* ========================================
   ドメインサービスTOPページ
   ======================================== */

/* ─ ドメインとは？ ─ */
.page-what-is-inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.page-what-is-text {
  flex: 0 0 auto;
  max-width: 600px;
}

.page-what-is-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.8;
  letter-spacing: 0.024em;
  margin: 0;
}

.page-what-is-lead {
  color: var(--eb-primary);
  font-weight: var(--eb-fw-bold);
}

.page-what-is-illust-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.page-what-is-illust {
  width: 287px;
  height: auto;
  display: block;
}

@media (max-width: 991.98px) {
  .page-what-is-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .page-what-is-illust {
    width: 220px;
    height: auto;
  }
}

/* ─ メリットカード ─ */
.eb-feature-card {
  background-color: var(--eb-white);
  border: 1px solid var(--eb-primary-light);
  border-radius: var(--eb-radius-sm);
  padding: 20px 24px;
  height: 100%;
}

.eb-feature-card--primary {
  background-color: var(--eb-primary-bg);
  border: none;
}

.eb-feature-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.eb-feature-title i {
  color: var(--eb-primary-dark);
  font-size: 18px;
}

.eb-feature-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  margin: 0;
}

/* ─ 価格テーブル ─ */
.domain-price-table {
  width: 100%;
  border-collapse: collapse;
}

.domain-price-table th,
.domain-price-table td {
  border: 1px solid var(--eb-border);
  padding: 13px 16px;
  text-align: center;
  font-size: 16px;
  vertical-align: middle;
  background-color: var(--eb-white);
}

.domain-price-table thead th {
  background-color: var(--eb-primary-dark);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
  font-size: clamp(13px, 0.64vw + 11px, 18px);
}

.domain-price-table td.col-name {
  background-color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
  position: relative;
}

.domain-price-table td.col-free {
  font-weight: var(--eb-fw-bold);
}

.domain-price-table tr.price-more-row td {
  text-align: center;
  font-weight: normal;
  font-size: 14px;
  cursor: pointer;
  color: var(--eb-primary);
  text-decoration: underline;
  background-color: var(--eb-white);
}

.domain-price-note {
  font-size: 11px;
  color: var(--eb-text);
  margin-top: 6px;
  margin-bottom: 0;
}

.domain-price-more-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
  color: var(--eb-primary);
  text-decoration: underline;
  cursor: pointer;
}


/* ─ シミュレーションCTAバナー ─ */
.eb-sim-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: var(--eb-accent);
  border-radius: var(--eb-radius-sm);
  padding: 14px 40px;
  margin: 20px auto 0;
  max-width: 480px;
  transition: background-color 0.15s;
}

.eb-sim-cta:hover {
  background-color: #e0a820;
}

.eb-sim-cta-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--eb-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--eb-accent);
  font-size: 14px;
}

.eb-sim-cta-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  display: block;
  line-height: 1.3;
}

.eb-sim-cta-label {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  display: block;
}

/* ─ 更新・移管カード ─ */
.domain-action-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 28px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.domain-action-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.domain-action-icon {
  font-size: 24px;
  flex-shrink: 0;
  --fa-primary-color: var(--eb-primary);
  --fa-secondary-color: var(--eb-primary);
  --fa-secondary-opacity: 0.3;
}

.domain-action-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0;
}

.domain-action-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 14px;
}

.domain-action-link {
  display: block;
  text-align: right;
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
}


.eb-faq-more {
  font-size: 14px;
  color: var(--eb-text);
  margin-top: 20px;
  margin-bottom: 0;
}

/* ─ 関連サービスカード ─ */
.eb-related-card {
  background-color: var(--eb-primary-bg);
  border-radius: var(--eb-radius-sm);
  padding: 24px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eb-related-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.eb-related-card-icon {
  font-size: 32px;
  flex-shrink: 0;
  --fa-primary-color: var(--eb-accent-light);
  --fa-secondary-color: var(--eb-primary-light);
  --fa-secondary-opacity: 0.9;
}

.eb-related-card-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  text-align: left;
  margin: 0;
}

.eb-related-card-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 12px;
}

.eb-related-card-link {
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
  text-align: right;
  display: block;
}

[aria-labelledby="heading-related"] .services-heading,
[aria-labelledby="heading-support"] .section-title-center {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  .domain-price-table th,
  .domain-price-table td {
    font-size: 13px;
    padding: 10px 8px;
  }

  .domain-price-table thead th {
    font-size: 14px;
  }

  .domain-action-card {
    padding: 20px 20px;
  }
}

@media (max-width: 767.98px) {
  /* ─ ドメインとは？ ─ */
  .page-what-is-illust {
    width: 180px;
  }

  /* ─ 価格テーブル ─ */
  .domain-price-table th,
  .domain-price-table td {
    font-size: 12px;
    padding: 8px 6px;
  }


  /* ─ シミュレーションCTA ─ */
  .eb-sim-cta {
    max-width: 100%;
    padding: 14px 16px;
  }

  /* ─ 選ばれる理由カード ─ */
  .why-reason-divider-row .why-reason-card {
    padding: 24px 20px;
  }

  /* ─ ドメイン取得の流れ：2列グリッド ─ */
  .eb-step-list {
    flex-wrap: wrap;
    gap: 32px 0;
  }

  .eb-step-item {
    flex: 0 0 50%;
  }

  /* ─ IT初心者も安心のサポート：2×2グリッド ─ */
  .eb-support-banner {
    flex-wrap: wrap;
    min-height: 0;
  }

  .eb-support-item {
    flex: 0 0 50%;
    border-right: none;
    border-bottom: 1px solid var(--eb-border);
  }

  .eb-support-item:nth-child(odd) {
    border-right: 1px solid var(--eb-border);
  }

  .eb-support-item:nth-last-child(-n+2) {
    border-bottom: none;
  }

  /* ─ 関連サービスカード ─ */
  .eb-related-card {
    padding: 20px 16px;
  }
}

/* ========================================
   レンタルサーバーTOPページ
   ======================================== */

/* ─ プランカード ─ */
.server-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.server-plan-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  border: 1px solid var(--eb-primary);
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: relative;
}

.server-plan-head {
  background-color: var(--eb-primary);
  padding: 18px 24px;
  text-align: center;
  border-radius: var(--eb-radius-sm) var(--eb-radius-sm) 0 0;
}

.server-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -80%);
  z-index: 1;
}

.server-plan-name {
  font-size: 20px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-white);
  margin: 0;
  letter-spacing: 0.04em;
}

.server-plan-body {
  padding: 20px 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--eb-bg-gray);
}

.server-plan-target {
  font-size: 14px;
  color: var(--eb-text);
  margin: 0 0 8px;
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.04em;
}
.server-plan-target::before {
  content: "＼";
  margin-right: 4px;
  color: var(--eb-primary);
}
.server-plan-target::after {
  content: "／";
  margin-left: 4px;
  color: var(--eb-primary);
}

.server-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: center;
}

.server-plan-price-amount {
  font-size: clamp(36px, 1.53vw + 30px, 48px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary);
  line-height: 1;
}

.server-plan-price-yen {
  font-size: clamp(18px, 0.77vw + 15px, 24px);
}

.server-plan-price-unit {
  font-size: 14px;
  color: var(--eb-text);
}

.server-plan-features {
  list-style: none;
  padding: 0 24px;
  margin: 0;
  flex: 1;
}

.server-plan-features li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--eb-bg-gray);
  font-size: 14px;
}

.server-plan-features li:last-child {
  border-bottom: none;
}

.server-plan-feat-label {
  color: #969696;
  font-weight: var(--eb-fw-regular);
}

.server-plan-feat-value {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.server-plan-feat-check {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.server-plan-footer {
  padding: 16px 24px 24px;
}

.server-plan-btn {
  display: block;
  text-align: center;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  padding: 14px 16px;
  border-radius: var(--eb-radius-sm);
  transition: background-color 0.2s;
  letter-spacing: 0.01em;
}

.server-plan-btn:hover {
  background-color: var(--eb-primary-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

/* ─ その他ホスティングサービス ─ */
.server-sub-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 28px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.server-sub-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.server-sub-card-icon {
  font-size: 24px;
  flex-shrink: 0;
  --fa-primary-color: var(--eb-primary);
  --fa-secondary-color: var(--eb-primary);
  --fa-secondary-opacity: 0.3;
}

.server-sub-card-title {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0;
}

.server-sub-card-body {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 14px;
}

.server-sub-card-link {
  display: block;
  text-align: right;
  font-size: 14px;
  color: var(--eb-text);
  text-decoration: underline;
}

/* ─ SP対応 ─ */
@media (max-width: 991.98px) {
  .server-plan-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .server-sub-card {
    padding: 20px;
  }
}

@media (max-width: 767.98px) {
  .server-plan-head {
    padding: 14px 16px;
  }

  .server-plan-body {
    padding: 16px 16px 12px;
  }

  .server-plan-features {
    padding: 0 16px;
  }

  .server-plan-footer {
    padding: 12px 16px 20px;
  }


}

/* セクション */
.section-calc {
  padding: 40px 0 40px;
}

/* ----------------------------------------
   ドメイン料金シミュレーター：対象ドメイン確認ブロック
   ---------------------------------------- */
.calc-domain-target-wrap {
  border-radius: var(--eb-radius-md);
 
  margin-bottom: 28px;
}

.calc-domain-target-label {
  font-size: 13px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 12px;
  text-align: left;
}

.calc-domain-target-wrap .eb-search-input-group {
  width: 100%;
}


.calc-domain-target-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.calc-domain-target-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.calc-domain-target-name {
  font-size: 22px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}


.calc-domain-target-desc {
  font-size: 14px;
  color: var(--eb-text);
}

.calc-domain-target-change {
  background: none;
  border: none;
  color: var(--eb-primary);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  font-family: var(--eb-font);
  text-decoration: underline;
  white-space: nowrap;
}

.calc-domain-target-change:hover {
  color: var(--eb-primary-hover);
}

/* ========================================
   会員規約ページ
   ======================================== */

.section-policy {
  padding: 56px 0 80px;
}

.policy-chapter {
  margin-bottom: 48px;
}

.policy-chapter:last-of-type {
  margin-bottom: 0;
}

.policy-article {
  margin-bottom: 40px;
}

.policy-article-title {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  letter-spacing: 0.38px;
  margin-bottom: 12px;
}

.policy-article-body p {
  color: var(--eb-text);
  line-height: 1.75;
  margin-bottom: 4px;
}

.policy-article-body p:last-child {
  margin-bottom: 0;
}

.policy-lead {
  color: var(--eb-text);
  line-height: 1.75;
  margin-bottom: 12px;
}

.policy-updated {
  text-align: right;
  color: var(--eb-text);
  line-height: 1.75;
  margin-top: 56px;
}

.policy-contact-list {
  margin: 16px 0 0;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-md);
  overflow: hidden;
}

.policy-contact-row {
  display: flex;
  border-bottom: 1px solid var(--eb-border);
}

.policy-contact-row:last-child {
  border-bottom: none;
}

.policy-contact-row dt {
  width: 120px;
  flex-shrink: 0;
  padding: 12px 16px;
  font-weight: var(--eb-fw-bold);
  font-size: 14px;
  background-color: var(--eb-bg-gray);
  border-right: 1px solid var(--eb-border);
}

.policy-contact-row dd {
  padding: 12px 16px;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 575.98px) {
  .policy-contact-row {
    flex-direction: column;
  }

  .policy-contact-row dt {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--eb-border);
    padding: 8px 16px;
  }

  .policy-contact-row dd {
    padding: 10px 16px;
  }
}


/* ── ステップヘッダー ── */
.calc-step {
  margin-bottom: 40px;
}

.calc-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.calc-step-num {
  width: 23px;
  height: 23px;
  background-color: var(--eb-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.calc-step-num span {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  line-height: 1;
}

.calc-step-title {
  font-size: clamp(17px, 0.38vw + 16px, 20px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0;
}

/* ── 選択カード共通 ── */
.calc-select-card {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  background-color: var(--eb-white);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
  user-select: none;
}

.calc-select-card:hover {
  border-color: var(--eb-primary-light);
}

.calc-select-card.is-selected {
  border: 2px solid var(--eb-primary);
  background-color: var(--eb-primary-bg);
}

.calc-select-card-check {
  display: none;
}

/* ── ドメイン選択グリッド ── */
.calc-domain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.calc-domain-card-outer {
  position: relative;
  padding-top: 20px;
}

.calc-domain-card-outer-no-badge {
  padding-top: 0;
}

.calc-domain-badge-wrap {
  position: absolute;
  top: 20px;
  left: 16px;
  transform: translateY(-50%);
  z-index: 1;
}

.calc-domain-badge-wrap .eb-badge {
  position: relative;
  margin-bottom: 0;
  height: 30px;
  font-size: 11px;
}

.calc-domain-card {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  gap: 4px;
  text-align: center;
}

.calc-select-card.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.calc-domain-ext {
  font-size: clamp(16px, 0.51vw + 14px, 20px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.calc-domain-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.calc-domain-price-amount {
  font-size: clamp(12px, 0.26vw + 11px, 14px);
  font-weight: 400;
  color: var(--eb-text);
}

.calc-domain-price-unit {
  font-size: clamp(10px, 0.13vw + 10px, 11px);
  color: var(--eb-text);
}

.calc-domain-full {
  display: none;
  font-size: 11px;
  color: var(--eb-text);
  opacity: 0.5;
}

.calc-domain-full.is-shown {
  display: block;
}

.calc-domain-card-avail {
  font-size: 12px;
  font-weight: var(--eb-fw-bold);
  white-space: nowrap;
}

.calc-domain-card-avail.is-ok { color: var(--eb-text); }
.calc-domain-card-avail.is-ng { color: var(--eb-text); }

.calc-domain-other-text {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}

.calc-domain-other-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--eb-text);
}

.calc-domain-other-change {
  position: absolute;
  bottom: 7px;
  right: 8px;
  font-size: 10px;
  color: var(--eb-primary);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  font-family: var(--eb-font);
}

/* ── サーバープラン選択グリッド ── */
.calc-server-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.calc-server-card {
  height: 129px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  gap: 4px;
}


.calc-server-name {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  line-height: 1.4;
}

.calc-server-name-wrap {
  text-align: center;
}

.calc-server-spec {
  font-size: 12px;
  font-weight: 400;
  color: var(--eb-border);
}

.calc-server-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.calc-server-price-amount {
  font-weight: 400;
  color: var(--eb-text);
}

.calc-server-price-unit {
  font-size: 12px;
  color: var(--eb-text);
}

/* 割引注記 */
.calc-discount-note {
  font-size: 12px;
  color: var(--eb-border);
  margin-top: 12px;
  line-height: 1.6;
  opacity: 0.85;
}

.calc-discount-note strong {
  color: var(--eb-text);
}

/* ── オプション選択カード ── */
.calc-option-card {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  background-color: var(--eb-white);
  overflow: hidden;
}

.calc-option-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s;
}

.calc-option-item:hover {
  background-color: var(--eb-bg-light);
}

.calc-option-item + .calc-option-item {
  border-top: 1px solid var(--eb-border);
}

.calc-option-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--eb-border);
  border-radius: 3px;
  margin: 0;
  background-color: var(--eb-white);
  transition: background-color 0.15s, border-color 0.15s;
}

.calc-option-checkbox:checked {
  background-color: var(--eb-primary);
  border-color: var(--eb-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpolyline points='1,5 4,8 11,1' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 8px;
}

.calc-option-info {
  flex: 1;
}

.calc-option-name {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 4px;
}


.calc-option-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}

.calc-option-price-amount {
  font-weight: 400;
  color: var(--eb-text);
}

.calc-option-price-unit {
  font-size: 12px;
  color: var(--eb-text);
}

/* ── 結果パネル（sticky） ── */
.calc-result-wrap {
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-result-panel {
  background: linear-gradient(183deg, #41AED9 4%, #8EB3DF 90%);
  border-radius: var(--eb-radius-sm);
  padding: 20px 24px 24px;
  color: var(--eb-white);
}

.calc-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.calc-result-header-icon {
  font-size: 24px;
  color: var(--eb-accent);
  flex-shrink: 0;
}

.calc-result-header-title {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0;
}

.calc-result-total-wrap {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

.calc-result-total-label {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin-bottom: 6px;
}

.calc-result-total-amount {
  font-size: 36px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-primary);
  letter-spacing: 2.7px;
  margin: 0;
}

.calc-result-tax-note {
  font-size: 12px;
  color: var(--eb-text);
  text-align: right;
  margin: 4px 0 0;
}

/* 内訳 */
.calc-result-breakdown {
  margin: 0;
}

.calc-result-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.calc-result-item:first-child {
  padding-top: 0;
}

.calc-result-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.calc-result-item-name {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
}

.calc-result-item-amount {
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  white-space: nowrap;
}

.calc-result-item-detail {
  color: var(--eb-white);
  margin: 0;
}

.calc-result-item-detail-line {
  margin: 0;
  font-size: 14px;
}

/* CTA */
.calc-result-note {
  font-size: 14px;
  color: var(--eb-white);
  margin: 16px 0 12px;
  line-height: 1.5;
}

.calc-result-note-link {
  color: var(--eb-white);
  text-decoration: underline;
}

.calc-result-note-link:hover {
  color: var(--eb-accent-light);
}

.calc-result-btn-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: var(--eb-accent);
  color: var(--eb-white);
  border: none;
  border-radius: var(--eb-radius-sm);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.14px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 8px;
}

.calc-result-btn-apply:hover {
  background-color: var(--eb-accent-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

.calc-result-btn-apply.is-disabled,
.calc-sp-btn-apply.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.calc-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--eb-border);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.calc-result-placeholder .fa-magnifying-glass {
  font-size: 28px;
}

.calc-result-btn-consult {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: transparent;
  color: var(--eb-white);
  border: 1px solid var(--eb-white);
  border-radius: var(--eb-radius-sm);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.calc-result-btn-consult:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--eb-white); /* a:hover の上書き */
}

/* ── 決済方法カード ── */
.calc-payment-card {
  border-radius: var(--eb-radius-sm);
  overflow: hidden;
  border: 1px solid var(--eb-border);
}

.calc-payment-header {
 background: linear-gradient(183deg, #41AED9 4%, #8EB3DF 90%);
  padding: 10px 16px;
}

.calc-payment-title {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0;
}

.calc-payment-body {
  background-color: var(--eb-white);
  padding: 16px;
}

.calc-payment-method {
  font-weight: 400;
  color: var(--eb-text);
  margin-bottom: 4px;
}

.calc-payment-method:last-child {
  margin-bottom: 0;
}

.calc-payment-brands {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calc-payment-brands li {
  font-size: 11px;
  font-weight: 400;
  color: var(--eb-primary-dark);
  border: 1px solid var(--eb-border);
  border-radius: 3px;
  padding: 2px 6px;
  background-color: var(--eb-white);
}

/* ── レスポンシブ ── */
@media (max-width: 991.98px) {
  .calc-result-wrap {
    position: static;
  }

  .calc-server-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-domain-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575.98px) {
  .calc-domain-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .calc-domain-card {
    padding: 10px 6px;
    min-height: 76px;
  }




  .calc-server-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ========================================
   システム開発ページ
   ======================================== */

/* ─ 強みセクション 番号ボックス ─ */
.system-strength-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.system-num-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: var(--eb-primary-dark);
  flex-shrink: 0;
}

.system-num-box span {
  font-size: 20px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-accent-light);
  line-height: 1;
}

.system-strength-title {
  font-size: clamp(17px, 0.38vw + 16px, 20px);
  font-weight: var(--eb-fw-black);
  color: var(--eb-primary-dark);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
}

/* ========================================
   SSL証明書ページ
   ======================================== */

/* ─ SSL証明書とは？ ─ */
.ssl-intro-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.85;
  letter-spacing: 0.024em;
  max-width: 940px;
}

/* ─ リスクグリッド ─ */
.ssl-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ssl-risk-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  min-height: 119px;
}

.ssl-risk-icon-wrap {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--eb-primary-dark);
  padding-top: 4px;
}

.ssl-risk-content {
  flex: 1;
}

.ssl-risk-title {
  font-size: 16px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin-bottom: 8px;
}

.ssl-risk-desc {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.7;
  margin: 0;
}

/* ─ SSL証明書の種類 ─ */
.ssl-type-box {
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  background-color: var(--eb-white);
  padding: 24px 28px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 24px;
}

.ssl-type-divider {
  background-color: var(--eb-border);
  align-self: stretch;
}

.ssl-type-label {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  letter-spacing: 0.336px;
  margin-bottom: 8px;
}

.ssl-type-text {
  font-size: 14px;
  color: var(--eb-text);
  line-height: 1.75;
  letter-spacing: 0.336px;
  margin: 0;
}

/* ─ SSL料金表 ─ */
.ssl-price-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

.ssl-price-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  table-layout: fixed;
}

.ssl-price-table th,
.ssl-price-table td {
  border: 1px solid var(--eb-border);
  font-size: 14px;
  padding: 12px 14px;
  vertical-align: middle;
  text-align: center;
}

.ssl-price-table .ssl-th-row {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  background-color: var(--eb-bg-gray);
  text-align: left;
  white-space: nowrap;
}

.ssl-price-table .ssl-th-group-dv {
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
}

.ssl-price-table .ssl-th-group-ov {
  background-color: var(--eb-primary-dark);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
}

.ssl-price-table .ssl-th-col {
  width: 19%;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
  white-space: nowrap;
}

.ssl-price-table .ssl-th-col-ov {
  width: 19%;
  background-color: var(--eb-primary-dark);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
  white-space: nowrap;
}

.ssl-price-table .ssl-price-value {
  font-size: 18px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
}


.ssl-price-note {
  font-size: 12px;
  color: var(--eb-text);
  letter-spacing: 0.288px;
  line-height: 1.7;
}

/* ─ FAQ追加テキスト ─ */
.ssl-faq-more {
  font-size: 14px;
  color: var(--eb-text);
  letter-spacing: 0.672px;
  margin-top: 24px;
}

.ssl-faq-more a {
  text-decoration: underline;
  color: var(--eb-text);
}

/* ─ レスポンシブ ─ */
@media (max-width: 767.98px) {
  .ssl-risk-grid {
    grid-template-columns: 1fr;
  }

  .ssl-type-box {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }

  .ssl-type-divider {
    height: 1px;
    width: 100%;
  }
}

/* ========================================
   サポートTOP
   ======================================== */

/* ── ヒーロー ── */
.support-hero {
  height: 210px;
}

.support-hero-inner {
  text-align: center;
  width: 100%;
}

.support-hero-title {
  font-size: clamp(18px, 0.51vw + 16px, 22px);
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  margin: 0 0 16px;
}

.support-hero-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--eb-white);
  border: 1px solid #707070;
  border-radius: var(--eb-radius-sm);
  max-width: 560px;
  margin: 0 auto 10px;
  padding: 0 16px;
  height: 49px;
}

.support-hero-search-icon {
  color: var(--eb-text);
  flex-shrink: 0;
}

.support-hero-search-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  color: var(--eb-text);
  background: transparent;
}

.support-hero-search-input::placeholder {
  color: #c2c2c2;
}

.support-hero-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── よくある質問・マニュアルクイックリンク ── */
.support-quicklinks-section {
  position: relative;
  background: var(--eb-white);
  padding-bottom: 56px;
}

.support-quicklinks-body {
  padding-top: 64px;
  text-align: center;
}

.support-quicklinks-label {
  font-size: 14px;
  color: var(--eb-primary-dark);
  font-weight: var(--eb-fw-bold);
  margin: 0 0 6px;
}

.support-quicklinks-title {
  font-size: 22px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0 0 28px;
}

.support-quicklinks-btns {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.support-quicklinks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  width: 320px;
  height: 64px;
  background-color: var(--eb-primary);
  color: var(--eb-white);
  font-weight: var(--eb-fw-bold);
  border-radius: var(--eb-radius-sm);
  transition: background-color 0.2s;
}

.support-quicklinks-btn:hover {
  background-color: var(--eb-primary-hover);
  color: var(--eb-white); /* a:hover の上書き */
}

/* ── FAQカード ── */
.support-faq-card {
  border: 1px solid var(--eb-primary);
  border-radius: var(--eb-radius-sm);
  padding: 20px 20px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.support-faq-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eb-border);
}

.support-faq-card-icon {
  font-size: 22px;
  color: var(--eb-primary);
  flex-shrink: 0;
}

.support-faq-card-title {
  font-size: 15px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary-dark);
  margin: 0;
}

.support-faq-list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
}

.support-faq-list li {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
}

.support-faq-list li a {
  color: var(--eb-text);
  text-decoration: underline;
  transition: color 0.2s;
}

.support-faq-list li a:hover {
  color: var(--eb-primary);
}

.support-faq-more {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--eb-text);
  text-decoration: underline;
  transition: color 0.2s;
  margin-top: 12px;
}

.support-faq-more:hover {
  color: var(--eb-primary);
}

/* ── お問い合わせ ── */
.support-contact-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--eb-bg-gray);
  border-radius: var(--eb-radius-sm);
  padding: 28px 32px;
}

.support-contact-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--eb-text);
  margin: 0;
}

.support-contact-btn {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 200px;
}

@media (max-width: 767.98px) {
  .support-hero {
    height: auto;
    padding: 32px 0;
  }


  .support-quicklinks-btn {
    width: 100%;
    max-width: 400px;
  }

  .support-contact-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

/* ========================================
   コントロールパネル（cp.html）
   ======================================== */

.cp-text-danger {
  color: var(--eb-danger);
}

/* --- ヘッダー：ログイン後アクション --- */
.header-notification-btn {
  position: relative;
  background: var(--eb-primary-bg);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--eb-primary-dark);
  font-size: 16px;
  padding: 0;
  transition: background 0.2s;
}

.header-notification-btn:hover {
  background: var(--eb-primary-light);
}


.header-notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--eb-danger);
  color: var(--eb-white);
  font-size: 9px;
  font-weight: var(--eb-fw-bold);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--eb-text);
  font-family: var(--eb-font);
  padding: 4px;
}

.header-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--eb-primary-bg);
  color: var(--eb-primary-dark);
  flex-shrink: 0;
  transition: background 0.2s;
}

.header-user-btn:hover .header-icon-circle {
  background: var(--eb-primary-light);
}

.header-user-menu-name {
  padding: 10px 20px 8px;
  border-bottom: 1px solid var(--eb-border);
  white-space: nowrap;
}

.header-user-menu-label {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 2px;
}

.header-user-menu-name strong {
  display: block;
  font-size: 14px;
  color: var(--eb-text);
}


.header-lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--eb-text);
  font-family: var(--eb-font);
  cursor: pointer;
  height: 28px;
  letter-spacing: 1.2px;
  transition: border-color 0.2s;
}

.header-lang-btn:hover {
  border-color: var(--eb-primary);
}

/* --- ヘッダードロップダウン共通 --- */
.header-dropdown {
  position: relative;
}

.header-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background-color: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 200;
}

.header-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.header-dropdown:hover .header-dropdown-panel {
  display: block;
}

.header-dropdown-panel-title {
  font-size: 13px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--eb-border);
  margin: 0;
}

.header-dropdown-panel-footer {
  border-top: 1px solid var(--eb-border);
  padding: 8px 16px;
  text-align: center;
  margin: 0;
}

.header-dropdown-panel-footer a {
  font-size: 12px;
  color: var(--eb-primary);
  text-decoration: underline;
}

/* 通知パネル */
.header-notif-panel {
  width: 300px;
}

.header-notif-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.header-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  transition: background-color 0.15s;
  color: var(--eb-text);
}

.header-notif-item:hover {
  background-color: var(--eb-bg-light);
  color: var(--eb-text); /* a:hover の上書き */
}

.header-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background-color: transparent;
}

.header-notif-item--unread .header-notif-dot {
  background-color: var(--eb-primary);
}

.header-notif-body {
  flex: 1;
  min-width: 0;
}

.header-notif-text {
  font-size: 13px;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-notif-item--unread .header-notif-text {
  font-weight: var(--eb-fw-bold);
}

.header-notif-date {
  font-size: 11px;
  color: #888;
}

/* ユーザーメニュー */
.header-user-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 180px;
}

.header-user-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--eb-text);
  transition: background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.header-user-menu li a i {
  width: 16px;
  text-align: center;
}

.header-user-menu li a:hover {
  background-color: var(--eb-bg-light);
  color: var(--eb-primary);
}

.header-user-menu-logout {
  border-top: 1px solid var(--eb-border);
  margin-top: 4px;
  padding-top: 4px;
}

.header-user-menu-logout a {
  color: var(--eb-danger);
}

.header-user-menu-logout a:hover {
  background-color: #fff0f0;
  color: var(--eb-danger); /* a:hover の上書き */
}


/* --- CP ページ全体 --- */
.cp-page-body {
  background-color: var(--eb-bg-light);
  padding: 24px 0 64px;
  min-height: 600px;
}

.cp-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 991.98px) {
  .cp-layout {
    flex-direction: column;
  }
}

/* --- SP サイドバートグル --- */
.cp-sidebar-toggle {
  width: 100%;
  background: linear-gradient(to bottom, #6ecaef, var(--eb-primary));
  border: none;
  padding: 12px 16px;
  color: var(--eb-white);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  border-radius: var(--eb-radius-sm);
  transition: border-radius 0.15s;
}

.cp-sidebar-toggle .fa-chevron-down {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.2s;
}

.cp-sidebar-toggle[aria-expanded="true"] {
  border-radius: var(--eb-radius-sm) var(--eb-radius-sm) 0 0;
}

.cp-sidebar-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

/* --- CP サイドバー --- */
.cp-sidebar {
  width: 250px;
  flex-shrink: 0;
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .cp-sidebar {
    width: 100%;
    border-radius: var(--eb-radius-sm);
  }
}

.cp-nav-top {
  background: linear-gradient(to bottom, #6ecaef, var(--eb-primary));
  padding: 10px 12px;
}

.cp-nav-top a {
  color: var(--eb-white);
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  letter-spacing: 0.288px;
  display: block;
}

.cp-nav-top a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.cp-nav-section {
  padding: 12px 12px 8px;
}

.cp-nav-section-label {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-primary);
  letter-spacing: 0.24px;
  margin: 0 0 6px;
}

.cp-nav-divider {
  border: none;
  border-top: 1px solid var(--eb-border);
  margin: 0 0 6px;
}

.cp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-nav-item a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  padding: 7px 8px;
  margin: 0 -12px;
  letter-spacing: 0.288px;
  transition: color 0.2s, background 0.2s;
}

.cp-nav-item a:hover {
  color: var(--eb-primary);
}

.cp-nav-item a.is-active {
  background: linear-gradient(to bottom, #6ecaef, var(--eb-primary));
  color: var(--eb-white);
  border-radius: 0;
}

.cp-nav-item a.is-active:hover {
  color: rgba(255, 255, 255, 0.85);
}

.cp-nav-item a.is-active .cp-nav-item-alert {
  color: rgba(255, 255, 255, 0.9);
}

.cp-nav-item-alert {
  color: var(--eb-danger);
}

/* --- CP メインエリア --- */
.cp-main {
  flex: 1;
  min-width: 0;
}

.cp-main .section-title {
  margin-bottom: 16px;
}

/* --- 保留中の手続きカード --- */
.cp-card {
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  padding: 20px;
}

.cp-card-heading {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0 0 4px;
}

.cp-pending-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}

.cp-pending-divider {
  border: none;
  border-top: 1px solid var(--eb-border);
  margin: 0;
}

.cp-pending-icon {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: var(--eb-primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-pending-icon i {
  font-size: 15px;
  color: var(--eb-primary-dark);
}

.cp-pending-content {
  flex: 1;
}

.cp-pending-title {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0 0 2px;
}

.cp-pending-desc {
  font-size: 14px;
  color: var(--eb-text);
  margin: 0;
}

.cp-status-badge {
  background-color: var(--eb-primary-light);
  color: var(--eb-white);
  font-size: 10px;
  font-weight: var(--eb-fw-bold);
  padding: 2px 8px;
  border-radius: var(--eb-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

.cp-card-footer-link {
  text-align: right;
  font-size: 12px;
  margin: 8px 0 0;
}

.cp-card-footer-link a {
  text-decoration: underline;
  color: var(--eb-text);
}

.cp-card-footer-link a:hover {
  color: var(--eb-primary);
}

/* --- 統計カード --- */
.cp-stat-card {
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius-sm);
  padding: 16px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cp-stat-label {
  font-size: 14px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  margin: 0 0 8px;
}

.cp-stat-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 0 4px;
}

.cp-stat-number {
  font-size: 32px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  line-height: 1;
}

.cp-stat-unit {
  font-size: 14px;
  font-weight: var(--eb-fw-black);
  color: var(--eb-text);
}

.cp-stat-link {
  font-size: 12px;
  color: var(--eb-text);
  display: block;
  text-align: right;
  margin-top: auto;
  text-decoration: underline;
}

.cp-stat-link:hover {
  color: var(--eb-primary);
}

.cp-stat-card-alert {
  background-color: var(--eb-primary-bg);
  border-color: var(--eb-primary-light);
}

.cp-stat-card-alert .cp-stat-number {
  color: var(--eb-danger);
}

.cp-stat-card-alert .cp-stat-unit {
  color: var(--eb-text);
}

.cp-stat-alert-note {
  font-size: 12px;
  color: var(--eb-danger);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ========================================
   新規会員登録ページ（register.html）
   ======================================== */

body.register-page {
  background-color: var(--eb-bg-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
}

.register-logo {
  width: 180px;
  margin-bottom: 20px;
}

.register-card {
  background-color: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 40px 48px;
  width: 100%;
  max-width: 600px;
}

.register-card h1 {
  font-size: 20px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-text);
  text-align: center;
  margin-bottom: 8px;
}

.register-desc {
  font-size: 14px;
  color: var(--eb-text);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 28px;
}

.eb-form-required {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--eb-fw-bold);
  color: var(--eb-white);
  background-color: var(--eb-danger);
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.8;
}

.register-card .btn-eb-primary {
  width: 100%;
  margin-top: 4px;
}

.register-agree {
  padding: 16px;
  background-color: var(--eb-bg-gray);
  border-radius: var(--eb-radius-sm);
}

.register-login-link {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--eb-text);
  margin-top: 20px;
}

.register-login-link a {
  color: var(--eb-text);
  text-decoration: underline;
}

.register-login-link a:hover {
  color: var(--eb-primary);
}

@media (max-width: 575.98px) {
  .register-card {
    padding: 28px 20px;
  }
}

/* ========================================
   ログインページ (login.html)
   ======================================== */

body.login-page {
  background-color: var(--eb-bg-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}

.login-logo {
  width: 180px;
  margin-bottom: 20px;
}

.login-card {
  background: var(--eb-white);
  border-radius: var(--eb-radius-sm);
  padding: 36px 44px;
  width: 100%;
  max-width: 500px;
}

.login-card h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--eb-text);
  text-align: center;
  margin-bottom: 12px;
}

.login-card .login-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--eb-text);
  margin-bottom: 20px;
  line-height: 1.6;
}

.login-card .btn-eb-primary {
  width: 100%;
  margin-top: 8px;
}

.login-forgot {
  display: block;
  text-align: center;
  font-size: 16px;
  color: var(--eb-text);
  margin-top: 20px;
}

.login-forgot a {
  color: var(--eb-text);
  text-decoration: underline;
}

.login-forgot a:hover {
  color: var(--eb-primary);
}

.btn-eb-outline.btn-register {
  width: 100%;
}