@charset "UTF-8";
/* sb-g : ソニー銀行WALLET「年会費0円」記事LP ― lp002 忠実複製
   計測(dom-style-extract)値に基づく再現。全て .p-lp.-sbg 配下にスコープ。 */
.p-lp.-sbg {
  line-height: 1.8;
  background: #fff;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 15px 20px 2rem;
  font-family: "Hiragino Sans", Arial, sans-serif;
  font-size: 17px;
  color: #000;
  -webkit-text-size-adjust: 100%;
}

.p-lp.-sbg * {
  box-sizing: border-box;
}

/* ---- PR ラベル ---- */
.p-lp.-sbg .pr-label {
  text-align: right;
  font-size: 10px;
  color: #888;
  margin: 0.4em 0 0;
}

/* ---- 見出し要素の基本(destyle上書き・階層はclassで) ---- */
.p-lp.-sbg h1, .p-lp.-sbg h2, .p-lp.-sbg h3, .p-lp.-sbg h4 {
  font-weight: 700;
}

/* ---- メインタイトル(原本: 20px navy #191970 + 下線 3px #ff9900) ---- */
.p-lp.-sbg .main-ttl {
  color: #191970;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.43;
  text-align: center;
  padding: 5px 5px 0;
  margin: 0 0 20px;
  border-bottom: 3px solid #ff9900;
}

/* ---- 段落 ---- */
.p-lp.-sbg p {
  font-size: inherit;
  margin: 0 0 3.6em;
}

.p-lp.-sbg .text p:last-child {
  margin-bottom: 3.6em;
}

.p-lp.-sbg b, .p-lp.-sbg .bold {
  font-weight: 700;
}

.p-lp.-sbg .blue {
  color: #0047b2;
  font-weight: 700;
}

.p-lp.-sbg .red {
  color: #ff0000 !important;
  font-weight: 700;
}

.p-lp.-sbg .center {
  text-align: center !important;
}

.p-lp.-sbg .left {
  text-align: left !important;
}

.p-lp.-sbg small {
  display: inline-block;
  font-size: 10px;
  color: inherit;
  line-height: inherit;
}

/* ---- 黄色マーカー(実測 solid #ffff00) ---- */
.p-lp.-sbg .mk {
  background: #ffff00;
  font-weight: 700;
  padding: 0 0.1em;
}

/* イントロ強調(原本: 中央寄せ div > inline strong bg#ffff00 19px) */
.p-lp.-sbg .hl-wrap {
  text-align: center;
  line-height: 1.9;
  margin: 0;
}

.p-lp.-sbg .hl {
  background: #ffff00;
  font-weight: 700;
  font-size: 19px;
}

/* ---- 帯見出し h2(原本: solid #267989, 角丸なし, text-shadow) ---- */
.p-lp.-sbg .ttl-band {
  color: #fff;
  background: #267989;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  padding: 0.6rem 1rem 0.5rem 1rem;
  margin: 2em 0 20px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

/* ---- 小見出し h3 ---- */
.p-lp.-sbg .h3-sub {
  font-size: min(5.1vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  border-left: 5px solid #999999;
  padding: 2px 5px 2px 10px;
  margin: 19.89px 0 18px;
}

/* ---- 画像(原本: 前後に空行2つ分≈61pxのギャップ、balloon-9と同じリズム) ---- */
.p-lp.-sbg figure {
  text-align: center;
  padding: 0;
  margin: 3.6em 0;
}

.p-lp.-sbg figure img {
  max-width: 100%;
  height: auto;
}

.p-lp.-sbg .w-70 {
  width: 70%;
}

.p-lp.-sbg .w-80 {
  width: 80%;
}

.p-lp.-sbg .w-90 {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .p-lp.-sbg .w-70 {
    width: 85%;
  }
}
/* ---- 吹き出し(原本 balloon-9: アバター+バブルの flex, 尾は左) ---- */
.p-lp.-sbg .balloon-9 {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 0 22px;
  margin: 3.6em 0;
}

.p-lp.-sbg .balloon-9 img {
  width: 120px;
  height: auto;
  border-radius: 50%;
  flex-shrink: 0;
}

.p-lp.-sbg .balloon-9 p {
  position: relative;
  width: 100%;
  margin: 3px 0 0;
  padding: 0.8em 1em;
  border-radius: 5px;
  background: #BBFFFF;
  color: #333;
  font-weight: 700;
  line-height: 1.7;
}

.p-lp.-sbg .balloon-9 p::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 14px;
  width: 15px;
  height: 30px;
  background: #BBFFFF;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

@media screen and (max-width: 767px) {
  .p-lp.-sbg .balloon-9 img {
    width: 88px;
  }
}
/* ---- 💡POINTボックス(原本 box27: 枠3px+box-shadow, ラベルは絶対配置タブ top:-33px) ---- */
.p-lp.-sbg .point-box {
  position: relative;
  margin-top: 4em;
  margin-bottom: 2em;
  padding: 0.5em 1em;
  border: solid 3px #62c1ce;
  box-shadow: 2px 2px 4px gray;
}

.p-lp.-sbg .point-box .point-ttl {
  position: absolute;
  display: inline-block;
  top: -33px;
  left: -3px;
  margin: 0;
  padding: 5px 15px 3px 5px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #62c1ce;
  color: #fff;
  font-weight: 700;
  border-radius: 5px 5px 0 0;
  box-sizing: content-box;
}

.p-lp.-sbg .point-box p {
  margin: 0;
  padding: 0;
}

/* ---- ⚠️警告ボックス(原本 box27: 赤見出し + 白本文 + 赤枠 + 影) ---- */
.p-lp.-sbg .warn-box {
  margin: 3.6em 0;
  border: 2px solid #ff0000;
  box-shadow: 2px 2px 4px gray;
  background: #fff;
}

.p-lp.-sbg .warn-box .warn-ttl {
  background: #ff0000;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: min(5.2vw, 20px);
  padding: 0.45em;
  margin: 0;
  line-height: 1.4;
}

.p-lp.-sbg .warn-box p:not(.warn-ttl) {
  margin: 0;
  padding: 1em 1.5em;
  line-height: 1.8;
  background: #fff;
}

.p-lp.-sbg > .warn-ttl {
  background: #ff0000;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: min(5.2vw, 20px);
  padding: 0.45em;
  border-radius: 5px;
  margin: 1.6em 0 0.9em;
}

/* ---- Q&A アコーディオン(実測 Qバー rgb(102,102,102)) ---- */
.p-lp.-sbg .qa {
  background: #f2f2f2;
  border-radius: 0;
  margin: 0 0 7px;
  overflow: hidden;
}

.p-lp.-sbg .qa > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  background: #666;
  color: #fff;
  font-weight: 600;
  padding: 15px;
  position: relative;
  font-size: 17px;
  line-height: 1.8;
  border-radius: 5px;
}

.p-lp.-sbg .qa > summary::-webkit-details-marker {
  display: none;
}

.p-lp.-sbg .qa > summary:after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 10px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.3s;
  flex: 0 0 auto;
}

.p-lp.-sbg .qa[open] > summary:after {
  transform: rotate(225deg);
}

.p-lp.-sbg .qa .qa-body {
  padding: 1em 2em;
  line-height: 200%;
  color: #333;
}

.p-lp.-sbg .qa .qa-body p {
  margin: 0;
}

.p-lp.-sbg .qa .qa-body .mk {
  padding: 0;
}

.p-lp.-sbg .qa .qa-body .note {
  font-size: 10px;
}

.p-lp.-sbg .qa .qa-body small {
  display: inline;
  font-size: 10px;
  line-height: inherit;
}

.p-lp.-sbg .qa .qa-body p:last-child {
  margin-bottom: 0;
}

/* ---- 5つのポイント(番号 / 実測 navy rgb(0,41,102)) ---- */
.p-lp.-sbg .num-item {
  margin: 2em auto;
}

.p-lp.-sbg .num-item .num-ttl {
  color: #002966;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
}

.p-lp.-sbg .num-item p,
.p-lp.-sbg .corner-box.num-item .num-ttl {
  margin: 0 !important;
}

/* ---- まとめ 3行 ---- */
.p-lp.-sbg .sum3, .p-lp.-sbg .corner-list {
  margin: 17px 0;
  padding: 0;
  position: relative;
}

.p-lp.-sbg .sum3 li, .p-lp.-sbg .corner-list li {
  list-style: none !important;
  background: transparent;
  border-left: 0;
  color: #000;
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.5em;
  margin: 0;
  border-bottom: 2px dotted #c0c0c0;
  font-weight: 400;
  position: relative;
}

.p-lp.-sbg .sum3 li:before, .p-lp.-sbg .corner-list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 18px;
  height: 18px;
  background: #ff9900;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-35.8 181.3L198.6 378.9c-4.7 4.7-12.3 4.7-17 0l-97.8-97.8c-4.7-4.7-4.7-12.3 0-17l28.3-28.3c4.7-4.7 12.3-4.7 17 0l61 61 129.7-129.7c4.7-4.7 12.3-4.7 17 0l28.3 28.3c4.7 4.7 4.7 12.3 0 17z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-35.8 181.3L198.6 378.9c-4.7 4.7-12.3 4.7-17 0l-97.8-97.8c-4.7-4.7-4.7-12.3 0-17l28.3-28.3c4.7-4.7 12.3-4.7 17 0l61 61 129.7-129.7c4.7-4.7 12.3-4.7 17 0l28.3 28.3c4.7 4.7 4.7 12.3 0 17z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.p-lp.-sbg .sum3 li:last-child, .p-lp.-sbg .corner-list li:last-child {
  border-bottom: 0;
}

/* ---- 原本 cstm-box-corner-accent / border-frame ---- */
.p-lp.-sbg .corner-box {
  margin: 2em auto;
  padding: 2em 1em;
  border: 3px solid #003366;
  position: relative;
  z-index: 0;
  max-width: 800px;
}

.p-lp.-sbg .corner-box::before {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  z-index: 1;
  border-top: 5px solid #ff9900;
  border-left: 5px solid #ff9900;
}

.p-lp.-sbg .border-frame {
  font-size: 16px;
  margin: 0 auto 2em;
  padding: 2em;
  background: #fff;
  box-shadow: 0 0 6px 1px #6d6965, 0 0 6px 7px #d5cec6 inset;
  border-radius: 30px;
}

.p-lp.-sbg .text .border-frame p,
.p-lp.-sbg .border-frame p {
  margin: 0;
}

/* ---- 早見表(月別キャッシュバック / 原本 tableList_area 実測値) ---- */
.p-lp.-sbg .hayami {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 15px;
  line-height: 27px;
}

.p-lp.-sbg .hayami th, .p-lp.-sbg .hayami td {
  border: 0;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  line-height: 18px;
  color: #333;
  background: #f2f8fa;
  font-weight: 400;
}

.p-lp.-sbg .hayami thead th {
  background: #1565c0;
  color: #fff;
  font-weight: 700;
  line-height: 18px;
}

.p-lp.-sbg .hayami thead th + th {
  border-left: 1px dotted #fff;
}

.p-lp.-sbg .hayami tbody th {
  width: 31.7%;
  background: #f2f8fa;
  color: #333;
  font-weight: 400;
}

.p-lp.-sbg .hayami tbody td {
  width: 68.3%;
  background: #f2f8fa;
  color: #333;
  font-weight: 400;
}

.p-lp.-sbg .hayami tbody th, .p-lp.-sbg .hayami tbody td {
  border-bottom: 1px dotted #fff;
}

.p-lp.-sbg .hayami tbody tr:nth-child(even) th, .p-lp.-sbg .hayami tbody tr:nth-child(even) td {
  background: #fff;
}

.p-lp.-sbg .table-note {
  font-size: 6px;
  line-height: 30.6px;
  color: #000;
  text-align: right;
  margin: 0 0 55.2px;
}

/* ---- 3ステップ(見出し) ---- */
.p-lp.-sbg .step-ttl {
  font-size: min(4.8vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  color: #002966;
  margin: 1.2em 0 0.4em;
}

.p-lp.-sbg .step-ttl .step-no {
  display: inline-block;
  background: #267989;
  color: #fff;
  border-radius: 4px;
  padding: 0.05em 0.6em;
  font-size: min(4vw, 15px);
  margin-right: 0.5em;
  letter-spacing: 0.03em;
}

.p-lp.-sbg .step-arrow {
  text-align: center;
  margin: 0.2em 0;
  padding-top: 30.59px;
  padding-bottom: 36.79px;
}

.p-lp.-sbg .step-arrow img {
  width: 150px;
  height: 154px;
}

.p-lp.-sbg .step-box {
  margin-bottom: 20px;
  background: #fff;
  border: 2px solid #6699cc;
  box-shadow: 2px 2px 4px gray;
}

.p-lp.-sbg .step-box .box-title {
  font-size: 18px;
  background: #6699cc;
  padding: 4px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.p-lp.-sbg .step-box p {
  padding: 15px 20px;
  margin: 0;
}

.p-lp.-sbg .step-box + .text {
  padding-top: 61.19px;
}

/* ---- 小アイコン画像(実測 88x88) ---- */
.p-lp.-sbg figure.icon img {
  width: auto;
  max-width: 120px;
}

/* ---- 引用元 ---- */
.p-lp.-sbg .refs {
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: 7px;
  color: #000;
  line-height: 150%;
  word-break: break-all;
}

.p-lp.-sbg .refs a {
  color: inherit;
}

/* ---- 矢印テキスト ---- */
.p-lp.-sbg .arrow-txt {
  text-align: center;
  font-weight: 700;
  color: #ff0000;
  font-size: min(6vw, 26px);
  line-height: 1.3;
  margin: 0.4em 0;
}

/* ---- 大結論(実測 block121 red center ~24px) ---- */
.p-lp.-sbg .verdict {
  text-align: center;
  color: #ff0000;
  font-weight: 700;
  font-size: min(6.2vw, 25px);
  line-height: 1.5;
  margin: 1.4em 0 1em;
}

.p-lp.-sbg .verdict {
  background: #ff0;
  border: 5px solid #ff0000;
  box-shadow: 2px 2px 4px gray;
  padding: 12px 20px 10px 15px;
  margin: 0 0 20px;
  font-size: 140%;
}

/* ---- CTA バナー(原本: リンクではない単体img。#sb-part-811直下、text-align:centerの非リンクdiv) ---- */
.p-lp.-sbg .cta-banner {
  text-align: center;
  margin: 3.2em 0 0;
}

.p-lp.-sbg .cta-banner img {
  display: block;
  width: 100%;
  max-width: 570px;
  height: auto;
  margin: 0 auto;
}

/* ---- CTA ボタン(原本 puyoBtn__area: 幅400px/max-width95%、aは幅100%、画像に拡縮アニメーション) ---- */
.p-lp.-sbg .cta-btn {
  width: 400px;
  max-width: 95%;
  margin: 1rem auto 5.5rem;
  padding: 10px 0;
}

.p-lp.-sbg .cta-btn a {
  display: block;
  width: 100%;
  height: auto;
}

.p-lp.-sbg .cta-btn a img {
  display: block;
  width: 100%;
  height: auto;
  animation: sbgPuyoBtn 1.6s ease-in infinite;
}

@media screen and (max-width: 500px) {
  .p-lp.-sbg .cta-btn {
    overflow-x: hidden;
  }
  .p-lp.-sbg .cta-btn a img {
    max-width: 94%;
    margin-inline: auto;
  }
}
@keyframes sbgPuyoBtn {
  0% {
    transform: scale(1.09);
  }
  10% {
    transform: scale(1.09);
  }
  30% {
    transform: scale(1.01);
  }
  40% {
    transform: scale(1.01);
  }
  50% {
    transform: scale(1, 1.04);
  }
  60% {
    transform: scale(1.09);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1.09);
  }
}