/* ===================================
   LP楽天アフィリエイトテンプレート専用スタイル
   =================================== */

body.page-template-page-lp-rakutenAffi {
  background-color: #f3f3f3;
  color: #333;
}

.page-template-page-lp-rakutenAffi .main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 10px 0 10px;
  background-color: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

/* コンテンツ上部の余白を削除 */
.page-template-page-lp-rakutenAffi #content,
.page-template-page-lp-rakutenAffi .site-main,
.page-template-page-lp-rakutenAffi .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* HTMLタグの上部マージン（アドミンバー用など）を強制的に削除 */
html {
  margin-top: 0 !important;
}

/* メインビジュアルと<PR>ラベルの間の余白を削除 */
.page-template-page-lp-rakutenAffi .wp-block-image {
  margin-bottom: 0 !important;
}

.page-template-page-lp-rakutenAffi p.has-text-align-right {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
  line-height: 1;
}

/* ===================================
   セクション用デザイン
   =================================== */

/* セクションタイトル */
.lp-section-title {
  background-color: #bf0000; /* 楽天レッド */
  color: #fff;
}

/* ===================================
   ランキングカード詳細デザイン
   =================================== */

/* ランキングカードのタイトル */
.ranking-card__title {
  color: #bf0000;
  border-bottom: 3px solid #bf0000;
}

.ranking-card__title::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  background-color: #bf0000;
}

/* サブタイトル（キャッチコピー） */
.ranking-card__subtitle {
  color: #bf0000;
  background: linear-gradient(transparent 60%, #fff4cb 60%);
}

/* スペック表 */
.ranking-card__spec-table th {
  background-color: #eeeeee;
  color: #333;
}

/* ===================================
   編集部コメント
   =================================== */
.editor-comment-new {
  background-color: #fff4cb;
  border: 2px solid #ffcc00;
}

.editor-comment-new::before {
  border-bottom: 12px solid #ffcc00;
}

.editor-comment-new::after {
  border-bottom: 10px solid #fff4cb;
}

.editor-comment-new__title {
  background-color: #bf0000;
  color: #fff;
}

.editor-comment-new__text strong {
  background: linear-gradient(transparent 60%, gold 60%);
  color: #bf0000;
}

/* ===================================
   CTAボタン（楽天風）
   =================================== */
.custom-cta-button {
  background: linear-gradient(to bottom,
      #e60012 0%,
      #bf0000 50%,
      #8c0000 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 0 #660000, 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
  font-weight: bold !important;
  border-radius: 8px !important;
}

.custom-cta-button:hover {
  box-shadow: 0 2px 0 #660000, 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(2px);
}

/* ===================================
   比較表デザイン
   =================================== */

#dynamic-comparison-table-app th {
  background-color: #bf0000;
  color: #fff;
}

#dynamic-comparison-table-app td:first-child {
  background-color: #eeeeee;
  color: #333;
}

/* ===================================
   レスポンシブ対応
   =================================== */
@media (max-width: 768px) {
  .page-template-page-lp-rakutenAffi .main {
    padding: 15px 8px 0 8px;
  }

  .lp-section {
    padding: 20px 12px;
    margin: 0 0 20px 0;
    width: 100%;
    box-sizing: border-box;

    .lp-section-title {
      margin-left: -12px !important;
      margin-right: -12px !important;
      margin-top: -20px !important;
      width: calc(100% + 24px) !important;
      box-sizing: border-box;
      border-radius: 4px 4px 0 0;
    }
  }
}

/* ===================================
   ユーティリティクラス
   =================================== */

.rakuten-red {
  color: #bf0000 !important;
}

.red {
  color: #e60012 !important;
}

.b {
  font-weight: bold !important;
}

.yellow_line,
.bgyellow {
  background: linear-gradient(transparent 60%, gold 60%);
}

/* 青背景バージョン（楽天に合わせて調整） */
.wp-block-group.has-very-light-gray-background-color {
  background-color: #fce4e4 !important; /* 薄い赤背景 */
  border: 1px solid #ffcccc;
}

.wp-block-group.has-very-light-gray-background-color h2,
.wp-block-group.has-very-light-gray-background-color h3,
.wp-block-group.has-very-light-gray-background-color p {
  color: #bf0000;
}

.summary-cta-button {
  display: block;
  background: linear-gradient(to bottom, #e60012 0%, #bf0000 100%);
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  padding: 15px 5px;
  border-radius: 8px;
  box-shadow: 0 4px 0 #660000;
  transition: all 0.2s;
  position: relative;
}

.summary-cta-button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #660000;
}

.summary-cta-button::after {
  content: "▶";
  font-size: 0.7em;
  margin-left: 8px;
  vertical-align: middle;
}