/* ==========================================================================
   Anker あんしんサポート (/solixhome-safety-support)
   Studio 版 DOM を手書き HTML/CSS で再現。ブレークポイントは 990px の 1 点。
   ========================================================================== */

.page-safety-support{
  font-family:'Noto Sans JP',sans-serif;
  color:#1A1A1A;
  background:#fff;
  /* Studio 版のリセットが全要素に効かせていた値。
     これが無いと注釈 ※1 の折り返し位置が 1 行分ずれるため踏襲する */
  word-spacing:1px;
}
.page-safety-support *{box-sizing:border-box}
.page-safety-support :where(p){margin:0}
.page-safety-support :where(h1,h2){margin:0;font-weight:500}
.page-safety-support :where(ul){margin:0;padding:0;list-style:none}
.page-safety-support :where(img){display:block;max-width:100%}
.page-safety-support :where(strong){font-weight:500}
.page-safety-support :where(sup){
  font-size:10px;
  line-height:1.25;
  vertical-align:baseline;
  font-feature-settings:'palt' 1;
}
/* 本文と同じ級数で置く注釈マーク (対象機器末尾の ※3) */
.page-safety-support .ss-ref--plain{
  font-size:inherit;
  line-height:inherit;
  font-feature-settings:normal;
}

/* ---------- Hero (ブルーグラデーション) ---------- */
.ss-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:160px 0 100px;
  background:linear-gradient(125.63deg,#68CDED 0%,#00A9E0 50%,#2488C1 100%);
}
.ss-hero__in{
  width:90%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.ss-hero__head{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.ss-hero__icon{width:104px;height:auto}
.ss-hero__ttl{
  font-size:48px;
  font-weight:700;
  line-height:1.25;
  color:#fff;
  text-align:center;
  font-feature-settings:'palt' 1;
}
.ss-hero__lead{
  width:100%;
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.05em;
  color:rgba(255,255,255,.8);
  text-align:center;
}

/* ---------- 製品カード (10年間無料) ---------- */
.ss-plan{
  width:542px;
  max-width:100%;
  padding:30px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.ss-plan__in{
  width:480px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.ss-plan__img{width:109px;height:auto}
.ss-plan__txt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ss-plan__lbl{
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:.05em;
  color:rgba(255,255,255,.8);
}
.ss-plan__free{
  margin:10px 0;
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:.05em;
  color:#fff;
}
.ss-plan__free strong{font-size:24px;line-height:1}

/* ---------- 白カード 2 枚 + 注釈 ---------- */
.ss-body{
  width:1280px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.ss-cards{
  width:100%;
  display:flex;
  align-items:stretch;
  gap:30px;
}
.ss-card{
  flex:1 1 0;
  min-width:0;
  padding:80px 40px;
  background:#fff;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
}
.ss-card__logo{width:300px;height:auto}
.ss-card__in{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.ss-card__ttl{
  font-size:32px;
  font-weight:500;
  line-height:1.25;
  color:#1A1A1A;
  text-align:center;
  font-feature-settings:'palt' 1;
}
.ss-card__ttl .l{display:block}
.ss-card__ttl strong{color:#00A9E0}
.ss-card__txt{
  width:100%;
  font-size:14px;
  font-weight:500;
  line-height:1.75;
  color:#1A1A1A;
}
.ss-card__dev{
  width:100%;
  font-size:12px;
  font-weight:500;
  line-height:1.75;
  color:#666;
}
.ss-card__note{
  width:100%;
  font-size:10px;
  font-weight:500;
  line-height:1.75;
  color:#666;
}

/* ---------- 割引サービス例 ---------- */
.ss-coupons{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
}
.ss-coupon{
  flex:1 1 0;
  min-width:0;
  padding:10px;
  background:#EDFBFF;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ss-coupon__ic{width:24px;height:auto}
.ss-coupon__name{
  width:100%;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.1em;
  text-align:center;
  color:#1A1A1A;
}
.ss-coupon__price{
  width:100%;
  padding:5px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:#fff;
  border:1px solid #00A9E0;
  border-radius:48px;
}
.ss-coupon__price .was{
  font-size:10px;
  font-weight:500;
  line-height:1;
  color:#666;
  text-decoration:line-through;
}
.ss-coupon__price .arw{width:3px;height:auto;flex:none;transform:rotate(90deg)}
.ss-coupon__price .now{
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:#00A9E0;
}

/* ---------- ページ末尾の注釈 ※1〜※3 ---------- */
.ss-notes{
  width:100%;
  font-size:10px;
  font-weight:500;
  line-height:1.75;
  color:#fff;
}

/* ==========================================================================
   SP (<= 990px)
   ========================================================================== */
@media (max-width:990px){
  .ss-hero{padding:72px 0 48px}
  .ss-hero__in{width:95%;gap:16px}
  .ss-hero__head{gap:8px}
  .ss-hero__ttl{font-size:28px}
  .ss-hero__lead{font-size:14px;letter-spacing:.05em}

  .ss-plan{width:auto;max-width:100%;padding:14px;gap:8px}
  .ss-plan__in{width:auto;max-width:100%;gap:8px}
  .ss-plan__txt{gap:4px}
  .ss-plan__lbl{font-size:13px}
  .ss-plan__free{font-size:13px}
  .ss-plan__free strong{font-size:15px}

  .ss-body{width:100%;gap:4px}
  .ss-cards{flex-direction:column;gap:14px}
  .ss-card{padding:36px 16px;gap:14px}
  .ss-card__in{gap:8px}
  .ss-card__ttl{font-size:18px}
  .ss-card__txt{font-size:13px}
  .ss-card__dev{font-size:13px}
  .ss-card__note{font-size:13px}

  .ss-coupons{flex-direction:column;gap:4px}
  .ss-coupon{width:100%;padding:4px;gap:4px}
  .ss-coupon__name{height:auto;font-size:13px}
  .ss-coupon__price{width:auto;padding:2px 0;gap:2px}
  .ss-coupon__price .was{font-size:13px}
  .ss-coupon__price .now{font-size:13px}
  .ss-coupon__price--off{padding:5px 20px}

  .ss-notes{font-size:13px}
}