/* 価格表示のスタイル */
.original-price {
  text-decoration: line-through;
  color: #666;
  margin-right: 8px;
  display: inline-block;
}

.discount-price {
  color: #e02222;
  font-weight: bold;
  display: inline-block;
}

.price-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.discount-notice {
  font-size: 0.9em;
  margin-top: 20px;
  font-style: italic;
  text-align: right;
  color: #666;
}

/* プロモーションコードを強調 */
.discount-notice code {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-style: normal;
  font-weight: bold;
  color: #e02222;
}

.currency-notice {
  font-size: 0.9em;
  margin-top: 10px;
  font-style: italic;
  text-align: center;
  color: #666;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

/* 機能説明テキストのスタイル強化 */
.icon-box-text {
  color: #444 !important;
}

/* アイコンボックスのタイトルも強調 */
.icon-box-title {
  font-weight: 600;
  font-size: 1.1em;
  margin-bottom: 8px;
  display: block;
}

/* アイコンボックス全体の間隔調整 */
.media.icon-box {
  margin-bottom: 3rem;
}

/* レスポンシブコマンドテーブル用スタイル */
.command-table-container table {
  width: 100%;
  border-collapse: collapse;
}

.command-table-container th,
.command-table-container td {
  padding: 0.75rem;
  vertical-align: top;
}

/* コマンドカード（モバイル向け）のスタイル */
.command-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.command-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

/* コマンド名をタイトルとして表示 */
.command-card-title {
  font-weight: 600;
  font-size: 1.2rem;
  background-color: #f5f5f5;
  padding: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  color: #b62025;
}

/* 詳細情報のコンテナ */
.command-card-details {
  padding: 0.75rem 1rem;
}

/* 各詳細項目のスタイル */
.command-card-detail-item {
  display: flex;
  margin-bottom: 0.5rem;
  align-items: baseline;
}

.command-card-detail-item:last-child {
  margin-bottom: 0;
}

/* ラベル（見出し）のスタイル */
.command-card-detail-label {
  font-weight: 600;
  color: #666;
  min-width: 7.5rem;
  margin-right: 0.5rem;
}

/* 非表示ラベルのスタイル - 空間だけ確保して位置揃え用 */
.command-card-detail-label-hidden {
  visibility: hidden;
}

/* 値（内容）のスタイル */
.command-card-detail-value {
  flex: 1;
}

/* マークダウンリストの余分なマージンを抑制 */
.command-card-detail-value p {
  margin: 0;
}

.command-card-detail-value ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

/* カード内のマークダウンリンクスタイル調整 */
.command-card a,
.command-card-title a {
  color: #b62025;
  text-decoration: none;
}

.command-card a:hover,
.command-card-title a:hover {
  text-decoration: underline;
}

/* コマンド例のスタイル - 統合済み */
.command-example {
  background-color: whitesmoke;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* コンテンツの長さに合わせて幅を調整しつつ、行は占有する */
  display: flex;
  width: fit-content;

  gap: 4px;
  padding: 5px;
  margin: 12px 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  border: 1px solid #e5e8eb;
}

.command-inline-example {
  background-color: #f5f5f5;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  display: inline-flex !important;
  gap: 4px;
  padding: 1px;
  margin: 0 2px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  border: 1px solid #e5e8eb;
}

.command-name {
  background-color: whitesmoke;
}

.command-arg {
  background-color: #ffffff;
  border: 1px solid #dfe2e5;
  border-radius: 4px;
  margin: 0 3px;
  padding: 0px 4px;
  color: #24292e;
  display: inline-block;
}

/* 水平線のカスタムスタイル */
hr {
  margin: 2rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(14, 7, 45, 0.5), rgba(114, 137, 218, 0.5), rgba(114, 137, 218, 0));
}

/* === ナビゲーションメニューのレスポンシブ設定 === */

/* 共通スタイル - すべての画面サイズに適用 */
.navbar>.container {
  display: flex !important;
  flex-wrap: nowrap !important;
  padding-left: 1rem !important;
}

.navbar-brand img {
  max-width: 100% !important;
  /* 画像が親要素を超えないように */
}

/* navbar-menuの基本設定 */
.navbar-menu,
#cloned-navbar-menu {
  flex-grow: 1 !important;
  flex-basis: auto !important;
}


/* コマンドテーブル表示切替 */
@media screen and (min-width: 768px) {
  .command-cards-container.is-hidden-tablet {
    display: none !important;
  }

  .command-table-container.is-hidden-mobile {
    display: block !important;
  }
}


/* === ナビバー（モバイルハンバーガー）=== */
@media screen and (max-width: 539.98px) {

  /* モバイル用の表示調整 */
  .is-hidden-mobile {
    display: none !important;
  }

  /* ハンバーガーメニュー配置調整 */
  .navbar>.container {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: relative !important;
  }

  .navbar-brand {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ハンバーガーアイコンを右側に配置 */
  .navbar-burger {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* メニュー展開時のスタイル */
  .navbar-menu.is-active {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    top: 100% !important;
    z-index: 100 !important;
  }
}

/* === ナビバー（not ハンバーガー）=== */
@media screen and (min-width: 540px) {

  /* ハンバーガーメニュー非表示、通常メニュー表示 */
  .navbar-burger {
    display: none !important;
  }

  /* メニューを水平方向に表示 */
  .navbar-menu {
    display: flex !important;
    box-shadow: none !important;
    background-color: transparent !important;
    position: static !important;
  }

  /* メニュー項目を水平に配置、1行に収める */
  .navbar-end {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  /* 要素が1行に収まるよう調整 */
  .navbar>.container {
    align-items: center !important;
  }

  /* メニュー項目サイズ調整 */
  .navbar-item {
    padding: 0.4rem 0.4rem !important;
    font-size: 0.9rem !important;
  }

  /* ロゴ部分の余白調整 */
  .navbar-brand {
    flex-shrink: 1 !important;
  }

  /* ドロップダウンメニュー調整 */
  .navbar-dropdown {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1) !important;
    display: none !important;
  }

  /* ホバー時のドロップダウン表示 */
  .navbar-item.has-dropdown:hover .navbar-dropdown {
    display: block !important;
  }
}