/* ==========================================================
   無償化 上限額UP のお知らせ(.fi-free)
   - growing-forest.com テーマの配色に準拠
     green #00885d / #00802b, brown #663300 / #462c00,
     cream #e5e2c1, yellow #fbc600, CTA #e7370d
   - 親テーマの .main .box p / .page h2 等の影響を受けないよう
     段落は div、見出しは .fi-free 配下のクラスで上書き
   - 幅は親のコンテンツ幅に追従(container query)
   ========================================================== */

.fi-free {
  --ff-green: #00885d;
  --ff-green-text: #00802b;
  --ff-green-pale: #eef5ea;
  --ff-brown: #663300;
  --ff-text: #462c00;
  --ff-cream: #e5e2c1;
  --ff-cream-pale: #f8f7ee;
  --ff-yellow: #fbc600;
  --ff-yellow-pale: #fdf3c4;
  --ff-chip: #fffbea;
  --ff-chip-line: #f1e3a6;
  --ff-red: #e7370d;
  --ff-red-dark: #c92e0a;
  --ff-radius: 8px;
  --ff-btn-h: 56px;

  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 2em;
  font-family: inherit;
  color: var(--ff-text);
  line-height: 1.6;
}
.fi-free *,
.fi-free *::before,
.fi-free *::after { box-sizing: border-box; }

.fi-free .fi-free__inner {
  padding: 28px 16px;
  background: #fff;
  border: 3px solid var(--ff-green);
  border-radius: var(--ff-radius);
  text-align: center;
}

/* ---------- badges ---------- */
.fi-free .fi-free__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.fi-free .fi-free__badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.fi-free .fi-free__badge--brown { background: var(--ff-brown); color: #fff; }
.fi-free .fi-free__badge--yellow { background: var(--ff-yellow); color: var(--ff-text); padding: 8px 22px; font-size: 14px; }

/* ---------- title(親テーマの h2 装飾を解除) ---------- */
.fi-free .fi-free__title {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
  text-indent: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ff-text);
}
.fi-free .fi-free__title-line { display: block; }
.fi-free .fi-free__up {
  margin-right: .15em;
  font-size: 1.6em;
  line-height: 1;
  color: var(--ff-red);
  letter-spacing: .02em;
}

/* ---------- price ---------- */
.fi-free .fi-free__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding: 22px 16px 24px;
  background: var(--ff-cream-pale);
  border: 2px solid var(--ff-cream);
  border-radius: var(--ff-radius);
}
.fi-free .fi-free__age {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 22px;
  border-radius: 999px;
  background: var(--ff-green);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.fi-free .fi-free__before,
.fi-free .fi-free__after {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fi-free .fi-free__label {
  font-size: 12px;
  color: var(--ff-brown);
}
.fi-free .fi-free__before-amount {
  font-size: 19px;
  font-weight: 700;
}
.fi-free .fi-free__arrow {
  width: 0;
  height: 0;
  margin: 12px 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 14px solid var(--ff-green);
}
.fi-free .fi-free__date {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 16px;
  border-radius: 999px;
  background: var(--ff-brown);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.fi-free .fi-free__after-amount {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ff-red);
  letter-spacing: .01em;
}
.fi-free .fi-free__unit { font-size: .45em; margin-right: .3em; }
.fi-free .fi-free__yen { font-size: .5em; margin-left: .1em; }
.fi-free .fi-free__nb { display: inline-block; }

/* ---------- target ---------- */
.fi-free .fi-free__target {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  padding: 18px 12px;
  background: var(--ff-green-pale);
  border: 2px dashed var(--ff-green);
  border-radius: var(--ff-radius);
}
.fi-free .fi-free__target-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--ff-green-text);
}
.fi-free .fi-free__target-main {
  font-size: 17px;
  font-weight: 700;
}

/* ---------- points ---------- */
.fi-free .fi-free__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.fi-free .fi-free__points > li {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  background: var(--ff-chip);
  border: 1px solid var(--ff-chip-line);
  border-radius: var(--ff-radius);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* ---------- notice ---------- */
.fi-free .fi-free__notice {
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--ff-yellow-pale);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- CTA ---------- */
.fi-free .fi-free__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ff-btn-h);
  padding-inline: 20px;
  border-radius: 999px;
  background: var(--ff-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .25s ease;
}
.fi-free .fi-free__btn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.fi-free .fi-free__btn:hover {
  background: var(--ff-red-dark);
  color: #fff;
  text-decoration: none;
}
.fi-free .fi-free__btn:focus-visible {
  outline: 2px solid var(--ff-green);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .fi-free .fi-free__btn { transition: none; }
}

/* ---------- 親コンテンツ幅 560px 以上 ---------- */
@container (min-width: 560px) {
  .fi-free .fi-free__inner { padding: 36px 28px; }
  .fi-free .fi-free__title { font-size: 26px; }
  .fi-free .fi-free__price { padding: 26px 24px 28px; }
  .fi-free .fi-free__after-amount { font-size: 44px; }
  .fi-free .fi-free__target-sub { font-size: 15px; }
  .fi-free .fi-free__target-main { font-size: 20px; }
  /* .fi-free .fi-free__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } */
  .fi-free .fi-free__notice { text-align: center; }
  .fi-free .fi-free__btn { font-size: 17px; }
}