/* FILE: assets/css/kairos-jss-promo.css */
/* KAIROS（クロスボーダー領域）ページに置く、JSS LPへのバナー専用。
   クラス名はすべて .jss-banner 接頭辞で閉じてあり、既存CSSと衝突しません。
   本体のトークン（tokens.css）にも依存しません。 */

.jss-banner {
  --jss-y: #F9EC1E;
  --jss-k: #000000;

  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--jss-k);
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Archivo", "Jost", "Zen Kaku Gothic New", "Meiryo", sans-serif;
}

/* 広い画面では幅を絞る。ページ幅いっぱいに広げない */
@media (min-width: 700px) {
  .jss-banner {
    width: 55%;
    min-width: 430px;
    padding: 18px 22px;
  }
}

/* LPと同じ斜め分割。文字に重ならない範囲に収めています */
.jss-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jss-y);
  clip-path: polygon(100% 0, 100% 30%, 88% 0);
  pointer-events: none;
}
@media (min-width: 700px) {
  .jss-banner::before { clip-path: polygon(100% 0, 100% 100%, 82% 0); }
}

.jss-banner > * {
  position: relative;
  z-index: 1;
  display: block;
}

.jss-banner__crest {
  width: 30px;
  height: auto;
  margin-bottom: 8px;
}

.jss-banner__eyebrow {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--jss-y);
  margin-bottom: 5px;
}

.jss-banner__title {
  font-size: clamp(1.1rem, 2.1vw, 1.34rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.jss-banner__jp {
  font-family: "Zen Kaku Gothic New", "Meiryo", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.6;
  color: #FFFFFF;
}

.jss-banner__more {
  margin-top: 8px;
  font-family: "Zen Kaku Gothic New", "Meiryo", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--jss-y);
}
.jss-banner__more span {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* 広い画面では、文字が斜め帯にかからないよう幅を制限する */
@media (min-width: 700px) {
  .jss-banner__eyebrow,
  .jss-banner__title,
  .jss-banner__jp,
  .jss-banner__more { max-width: 76%; }
}

.jss-banner:hover .jss-banner__more span,
.jss-banner:focus-visible .jss-banner__more span {
  border-bottom-width: 2px;
}
.jss-banner:focus-visible {
  outline: 3px solid var(--jss-y);
  outline-offset: 3px;
}