@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ============================================================
   Credit Card Comparison Design System (sp- prefix)
   Added: 2026-07-04
   ============================================================ */
:root{
  --sp-blue:#7cc5f0;
  --sp-blue-d:#4aa8e0;
  --sp-blue-dd:#5a8bb0;
  --sp-blue-bg:#eaf6fd;
  --sp-blue-bg2:#f5fbfe;
  --sp-mint:#5ec7c0;
  --sp-mint-bg:#e6f7f5;
  --sp-mint-bg2:#f3fbfa;
  --sp-pink:#ff9ec4;
  --sp-line:#d9f0ed;
  --sp-warn:#f5b940;
  --sp-ink:#2b3a4a;
  --sp-ink2:#6b7d8d;
}

/* --- 1. hero --- */
.sp-hero{
  background:var(--sp-blue-bg);
  border-bottom:2px dashed var(--sp-blue);
  border-radius:0;
  padding:1.5rem 1.2rem;
  margin:0 0 1.5rem;
}
.sp-hero-badge{
  display:inline-block;
  background:var(--sp-mint);
  color:#fff;
  border-radius:0;
  padding:5px 14px;
  font-size:13px;
  font-weight:500;
  margin-bottom:.6rem;
}
.sp-hero h1,
.sp-hero .sp-hero-title{
  color:var(--sp-ink);
  font-weight:500;
  line-height:1.5;
  margin:0;
}
.sp-hero-accent{
  color:var(--sp-blue-d);
}

/* --- 2/3. ranking card --- */
.sp-rank-card{
  position:relative;
  background:#fff;
  border:2px solid var(--sp-line);
  border-radius:0;
  padding:1.1rem;
  margin:0 0 1.5rem;
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  color:var(--sp-ink);
  box-sizing:border-box;
}
.sp-rank-num{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sp-blue-bg);
  color:var(--sp-blue-d);
  border-radius:0;
  font-size:18px;
  font-weight:500;
  margin-bottom:.8rem;
}
.sp-spec-row{
  display:flex;
  gap:6px;
  margin:.8rem 0;
}
.sp-spec-cell{
  flex:1 1 0;
  background:var(--sp-blue-bg);
  border-radius:0;
  padding:.6rem .4rem;
  text-align:center;
  box-sizing:border-box;
}
.sp-spec-label{
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--sp-ink2);
  margin-bottom:.2rem;
}
.sp-spec-value{
  display:block;
  font-size:17px;
  font-weight:500;
  color:var(--sp-ink);
}
.sp-spec-cell.sp-spec-issue{
  background:var(--sp-mint-bg);
}
.sp-spec-cell.sp-spec-issue .sp-spec-label,
.sp-spec-cell.sp-spec-issue .sp-spec-value{
  color:var(--sp-mint);
}

.sp-rank-card.sp-rank1{
  border:2px solid var(--sp-blue);
  background:var(--sp-blue-bg2);
  padding-top:2.6rem;
}
.sp-rank1-badge{
  position:absolute;
  top:0;
  left:0;
  background:var(--sp-pink);
  color:#fff;
  border-radius:0;
  padding:6px 16px;
  font-size:13px;
  font-weight:500;
}

/* --- 4/5. CTA buttons --- */
.sp-cta,
.sp-cta-outline{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  border-radius:0;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  box-sizing:border-box;
  padding:.4rem 1rem;
}
.sp-cta{
  background:var(--sp-pink);
  color:#fff;
  border:none;
}
.sp-cta-outline{
  background:#fff;
  color:var(--sp-blue-d);
  border:2px solid var(--sp-blue);
}

/* --- 6. compare table --- */
.sp-table-wrap{
  overflow-x:auto;
  border:2px solid var(--sp-line);
  margin:0 0 1.5rem;
  -webkit-overflow-scrolling:touch;
}
.sp-compare-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  font-weight:400;
}
.sp-compare-table th,
.sp-compare-table td{
  padding:.7rem .6rem;
  text-align:left;
  white-space:nowrap;
  border-bottom:1px solid var(--sp-line);
}
.sp-compare-table thead th{
  background:var(--sp-blue);
  color:#fff;
  font-weight:500;
}
.sp-compare-table tbody tr:nth-child(even){
  background:var(--sp-blue-bg2);
}
.sp-compare-table th:first-child,
.sp-compare-table td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:#fff;
}
.sp-compare-table thead th:first-child{
  background:var(--sp-blue);
  z-index:2;
}
.sp-compare-table tbody tr:nth-child(even) td:first-child{
  background:var(--sp-blue-bg2);
}
.sp-ic-ok,
.sp-ic-warn{
  font-weight:500;
}
.sp-ic-ok{ color:var(--sp-mint); }
.sp-ic-ok::before{ content:"◎ "; }
.sp-ic-warn{ color:var(--sp-warn); }
.sp-ic-warn::before{ content:"△ "; }

/* --- 7. section heading --- */
.sp-h2{
  border-left:5px solid var(--sp-pink);
  border-radius:0;
  padding-left:10px;
  color:var(--sp-ink);
  font-weight:500;
  line-height:1.5;
  margin:2rem 0 1rem;
}

/* --- 8. FAQ (details/summary, no JS) --- */
.sp-faq{
  border:2px solid var(--sp-line);
  border-radius:0;
  padding:13px 15px;
  margin:0 0 .8rem;
}
.sp-faq summary{
  min-height:48px;
  display:flex;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:var(--sp-ink);
  cursor:pointer;
}
.sp-faq[open] summary{
  margin-bottom:.6rem;
}
.sp-faq-body{
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  color:var(--sp-ink);
}

/* --- 9. notice box --- */
.sp-notice{
  background:var(--sp-mint-bg2);
  border-left:4px solid var(--sp-blue);
  border-radius:0;
  padding:.8rem 1rem;
  font-size:11px;
  line-height:1.7;
  font-weight:400;
  color:var(--sp-ink2);
  margin:1.5rem 0;
}

/* --- responsive: ～599px --- */
@media screen and (max-width:599px){
  .sp-spec-row{
    flex-wrap:wrap;
  }
  .sp-spec-cell{
    flex:1 1 30%;
    font-size:13px;
  }
  .sp-compare-table{
    font-size:12px;
  }
  .sp-rank-card.sp-rank1{
    padding-top:2.8rem;
  }
}