@charset "UTF-8";

/* =============================================
   J:COM BUSINESS 2周年記念キャンペーン
   - biz_ren デザインシステム準拠
   - スペーシング/フォントは jcom_business.css の
     セマンティックトークン・流体タイポを優先
   ============================================= */

.anniversary-header,
.anniversary-lead,
.anniversary-kv,
.anniversary-info {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
}

/* ---------- ヘッダー（/smb/pc/ の content-header を踏襲） ---------- */
.anniversary-header {
  flex-direction: column;
  width: 100%;
  background: url("../images/header_bg-sp.png") no-repeat center center/cover;
  min-height: 208px;
}
@media (min-width: 47.9375em) {
  .anniversary-header {
    min-height: 240px;
    background: url("../images/header_bg.png") no-repeat center center/cover;
  }
}
.anniversary-header h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  font-weight: 900;
  line-height: 1.4;
  gap: 8px;
  margin: 0;
  padding: 0 16px;
}
.anniversary-header h1::after {
  display: none;
}
.anniversary-header__sub {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.anniversary-header__main {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
/* タブレット帯（768〜1160px）— jcom_business.css の流体タイポと同じ式 */
@media (min-width: 47.9375em) {
  .anniversary-header h1 {
    gap: 12px;
  }
  .anniversary-header__sub {
    font-size: calc(22px + 8 * (100vw - 768px) / 392);
  }
  .anniversary-header__main {
    font-size: calc(28px + 12 * (100vw - 768px) / 392);
  }
}
@media (min-width: 72.5em) {
  .anniversary-header__sub {
    font-size: 30px;
  }
  .anniversary-header__main {
    font-size: 40px;
  }
}

/* ---------- リード文 ---------- */
/* font-size / weight / align は HTML側のユーティリティ（fs-20-18 fs-16-sp fw-bold text-center）に委譲 */
.anniversary-lead {
  margin: 0 auto;
  max-width: 1040px;
  line-height: 1.8;
  /* 末尾の「た。」だけが折り返される孤立行を防ぐ */
  text-wrap: pretty;
}
@media (min-width: 47.9375em) {
  .anniversary-lead {
    line-height: 1.7;
  }
}

/* ---------- KV ---------- */
.anniversary-kv {
  max-width: 740px;
  margin: 0 auto;
}
.anniversary-kv picture,
.anniversary-kv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- インフォブロック（グレー角丸ボックス） ---------- */
.anniversary-info {
  max-width: 842px;
  margin: 0 auto;
  background: #f2f2f2; /* DS: surface / gray-bg */
  border-radius: 20px; /* DS: box-card 標準 */
  padding: 24px 20px;
}
@media (min-width: 47.9375em) {
  .anniversary-info {
    padding: 60px 80px;
    border-radius: 32px; /* DS: box-white-lg / board-cv と同じ大型ボックスの角丸 */
  }
}

.anniversary-info__list {
  margin: 0;
}
.anniversary-info__term {
  position: relative;
  font-size: 16px; /* SP base — fs-16-15 相当 */
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  padding-left: 20px;
  margin: 0 0 12px;
}
.anniversary-info__term::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
  font-weight: 700;
}
.anniversary-info__list > .anniversary-info__term:not(:first-of-type) {
  margin-top: 32px; /* DS: lg = 32px（セクション内構造の区切り） */
}
@media (min-width: 47.9375em) {
  .anniversary-info__term {
    font-size: 18px; /* PC */
    margin-bottom: 16px; /* DS: sm = 16px */
  }
  .anniversary-info__list > .anniversary-info__term:not(:first-of-type) {
    margin-top: 40px;
  }
}

.anniversary-info__desc {
  margin: 0;
  font-size: 15px; /* SP — fs-15-13 系統に近い */
  line-height: 1.8;
  color: #333;
}
.anniversary-info__desc p {
  margin: 0;
}
.anniversary-info__desc p + p {
  margin-top: 8px; /* DS: xs = 8px */
}
.anniversary-info__desc a {
  color: #0c0b86; /* brand / navy */
  text-decoration: underline;
  word-break: break-all;
}
.anniversary-info__desc a:hover {
  text-decoration: none;
}
@media (min-width: 47.9375em) {
  .anniversary-info__desc {
    font-size: 16px;
    line-height: 1.75;
  }
}

.anniversary-info__strong {
  font-weight: 700;
  color: #e93817; /* brand / red */
}

.anniversary-info__sub {
  margin-top: 12px !important;
}