/* ==========================================
   STSR TOP PROMOTION
   デザインカンプ準拠

   PC表示：高さ250px
   HTMLクラス：stsr-promo
========================================== */

/* WPBakeryの不要な余白を除去 */
.wpb_content_element:has(.stsr-promo) {
  margin-top: 0;
  margin-bottom: 0;
}

.wpb_content_element:has(.stsr-promo) > .wpb_wrapper {
  margin: 0;
  padding: 0;
}

/* ==========================================
   メインボックス
========================================== */

.stsr-promo {
  position: relative;
  display: block;

  width: 100%;
  height: 250px;
  min-height: 0;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
  overflow: hidden;

  border: 1px solid #91a97e;
  background-color: #fff;

  text-align: left;

  /* 背景画像 + 白グラデーション */
  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 28%,
      rgba(255,255,255,.93) 43%,
      rgba(255,255,255,.72) 58%,
      rgba(255,255,255,.32) 74%,
      rgba(255,255,255,0) 100%
    ),
    url("/wp-content/uploads/2026/10/top-stsr-intro-tractor.png");

  background-position: center, 72% center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* ==========================================
   内側のレイアウト
========================================== */

.stsr-promo__inner {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  margin: 0;
  padding: 14px 13px 16px;

  text-align: left;
}

/* ==========================================
   上部ラベル
   STSR + シーダーテープ × 水稲
========================================== */

.stsr-promo .stsr-promo__label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  align-items: center;
  justify-content: flex-start;

  flex: 0 0 18px;

  width: 100%;
  height: 18px;

  gap: 3px;

  margin: 0 0 11px;
  padding: 0;

  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

/* 共通：上下の中心を揃える */
.stsr-promo .stsr-promo__badge,
.stsr-promo .stsr-promo__category {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  height: 18px;
  box-sizing: border-box;

  margin: 0;
  padding: 0;

  line-height: 1;
  white-space: nowrap;
}

/* 緑色のSTSRラベル */
.stsr-promo .stsr-promo__badge {
  justify-content: center;

  padding: 0 7px;

  background-color: #4b7e27;
  color: #fff;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
}

/* シーダーテープ × 水稲 */
.stsr-promo .stsr-promo__category {
  justify-content: flex-start;

  color: #777;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ==========================================
   メインキャッチコピー
   指定の2行
========================================== */

.stsr-promo .stsr-promo__title {
  display: block;
  flex: 0 0 auto;

  margin: 0 0 4px;
  padding: 0;

  border: 0;
  background: none;

  color: #4b7e27;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;

  text-align: left;
}

/* ==========================================
   サブキャッチコピー
========================================== */

.stsr-promo .stsr-promo__lead {
  display: block;
  flex: 0 0 auto;

  margin: 0 0 7px;
  padding: 0;

  color: #303030;

  font-size: 10.8px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;

  text-align: left;
  white-space: nowrap;
}

/* ==========================================
   説明文：指定の4行
========================================== */

.stsr-promo .stsr-promo__description {
  display: block;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;

  color: #666;

  font-size: 10.2px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;

  text-align: left;
  white-space: nowrap;
  margin-bottom: 16px;
}

/* ==========================================
   詳細リンク
   丸矢印 + 文字を横1行に配置
========================================== */

.stsr-promo .stsr-promo__link,
.stsr-promo .stsr-promo__link:visited {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;

  align-items: center;
  justify-content: flex-start;

  flex: 0 0 24px;

  gap: 9px;

  width: max-content;
  max-width: 100%;
  height: 24px;

  box-sizing: border-box;

  /* 余白をリンクの上側に配分 */
  margin: auto 0 0;
  padding: 0;

  color: #303030;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;

  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  padding-left: 6px;
}

/* 余計な矢印を生成しない */
.stsr-promo .stsr-promo__link::before,
.stsr-promo .stsr-promo__link::after {
  content: none;
}

/* ==========================================
   緑色の丸
   HTML内の1個だけを使用
========================================== */

.stsr-promo .stsr-promo__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 20px;

  width: 20px;
  height: 20px;

  box-sizing: border-box;

  margin: 0;
  padding: 2px 0 0 1px;

  border: 0;
  border-radius: 50%;

  background-color: #7ba35e;
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
}

/* ==========================================
   詳細リンク文字
   丸と上下中央揃え
========================================== */

.stsr-promo .stsr-promo__link-text {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  flex: 0 0 auto;

  height: 24px;

  margin: 0;
  padding: 0;

  color: inherit;

  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;

  text-align: left;
  white-space: nowrap;
  padding-left: 5px;
}

/* ホバー */
.stsr-promo .stsr-promo__link:hover {
  color: #4b7e27;
  text-decoration: none;
}

/* キーボードフォーカス */
.stsr-promo .stsr-promo__link:focus-visible {
  outline: 2px solid #4b7e27;
  outline-offset: 3px;
}

/* ==========================================
   スマートフォン
========================================== */

@media only screen and (max-width: 690px) {

  .stsr-promo {
    height: auto;
    min-height: 250px;

    background-position: center, 68% center;
  }

  .stsr-promo__inner {
    height: auto;
    min-height: 250px;

    padding: 18px 14px;
  }

  .stsr-promo .stsr-promo__label {
    gap: 7px;
    margin-bottom: 10px;
  }

  .stsr-promo .stsr-promo__title {
    font-size: 16px;
    line-height: 1.55;
  }

  .stsr-promo .stsr-promo__lead {
    white-space: normal;
  }

  .stsr-promo .stsr-promo__description {
    white-space: normal;
  }

  .stsr-promo .stsr-promo__link {
    margin-top: 18px;
  }
}


/* STSR詳細リンク：横方向の余白調整 */
.stsr-promo .stsr-promo__link,
.stsr-promo .stsr-promo__link:visited {
  gap: 0;
  margin-left: -7px;
}

/* ==========================================
   グローバルナビ
========================================== */
plantseeder-nav8 #globalnav-stsr { text-indent: 0; }
.plantseeder-nav8 #globalnav-stsr > a {
    display: block; background: none; color: #000; font-weight: bold; text-decoration: none;
}
@media (min-width: 1025px) {
    .plantseeder-nav8 #globalnav > ul { display: flex; width: 980px; margin: 0; padding: 0; }
    .plantseeder-nav8 #globalnav > ul > li { float: none; flex-shrink: 0; }
    .plantseeder-nav8 #globalnav > ul > li:not(#globalnav-stsr) > a { transform: scaleX(0.91836734694); transform-origin: left center; }
    .plantseeder-nav8 #globalnav-stsr { width: 80px; }
    .plantseeder-nav8 #globalnav-stsr > a { width: 80px; height: 36px; text-align: center; font-size: 14px; box-sizing: border-box; background: linear-gradient(#6f9c41, #6f9c41) no-repeat right top / 1px 21px; }
    .plantseeder-nav8 #globalnav-stsr > a:hover,
    .plantseeder-nav8 #globalnav-stsr > a:focus-visible,
    .plantseeder-nav8 #globalnav-stsr.main_current > a { border-bottom: 3px solid #6f9c41; }
    .plantseeder-nav8 #globalnav01 { width: 104.693878px; }
    .plantseeder-nav8 #globalnav02 { width: 157.040816px; }
    .plantseeder-nav8 #globalnav03 { width: 112.040816px; }
    .plantseeder-nav8 #globalnav04 { width: 112.959184px; }
    .plantseeder-nav8 #globalnav05 { width: 134.081633px; }
    .plantseeder-nav8 #globalnav06 { width: 193.775510px; }
    .plantseeder-nav8 #globalnav07 { width: 85.408163px; }
}
@media (max-width: 1024px) {
    .plantseeder-nav8 #globalnav-stsr > a { width: 100%; padding: 10px 20px; box-sizing: border-box; border-bottom: 1px solid #6f9c41; }
    .plantseeder-nav8 #globalnav-stsr > a:hover { opacity: .7; }
}