/* ==================================================================
   Paid 記事内 お役立ち資料CTAブロック  paid-cta.css  v2.0
   設置：子テーマ直下に配置、または「外観 > カスタマイズ > 追加CSS」に貼付
   ------------------------------------------------------------------
   v2.0 変更点：「お役立ち資料」であることが一目で伝わるよう
     ・上部に「お役立ち資料 ／ 無料ダウンロード」のヘッダー帯を追加
     ・表紙を冊子風（ページ重なり）表現に変更
     ・ボタン文言を「この資料を無料でダウンロード」に変更
   ================================================================== */

.pd-cta{
  --pd-green:#03AF7A;
  --pd-green-d:#07845E;
  --pd-green-l:#E6F7F0;
  --pd-green-b:#C9EBDD;
  --pd-blue:#1E95D4;
  --pd-blue-d:#1276B0;
  --pd-ink:#1B2E29;
  --pd-sub:#46584F;
  --pd-line:#DCEEE7;

  box-sizing:border-box;
  max-width:740px;
  margin:40px auto;
  background:#fff;
  border:1px solid var(--pd-line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(3,175,122,.07);
  font-family:inherit;
  line-height:1.7;
}
.pd-cta *{box-sizing:border-box;}

/* ===== ヘッダー帯：お役立ち資料であることを明示 ===== */
.pd-cta__header{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 22px;
  background:var(--pd-green-l);
  border-bottom:1px solid var(--pd-green-b);
}
.pd-cta__icon{
  width:26px; height:26px;
  flex:none;
  border-radius:6px;
  background:var(--pd-green);
  display:flex; align-items:center; justify-content:center;
}
.pd-cta__label{
  font-size:14px;
  font-weight:700;
  color:var(--pd-green-d);
  letter-spacing:.04em;
}
.pd-cta__free{
  margin-left:auto;
  font-size:11.5px;
  font-weight:700;
  color:#fff;
  background:var(--pd-green);
  padding:4px 11px;
  border-radius:20px;
  white-space:nowrap;
}

/* ===== 本体 ===== */
.pd-cta__inner{padding:22px 24px 24px;}

/* 資料カテゴリタグ（副次情報なのでグレー） */
.pd-cta__tag{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  color:#5A6B62;
  background:#F2F5F3;
  border:1px solid #E2E8E5;
  padding:3px 10px;
  border-radius:4px;
  margin:0 0 14px;
  line-height:1.5;
}

.pd-cta__head{display:flex; gap:22px; align-items:flex-start;}

/* 冊子風サムネイル（ページの重なりで「資料」であることを示す） */
.pd-cta__thumbwrap{position:relative; width:230px; flex:none;}
.pd-cta__thumbwrap::before,
.pd-cta__thumbwrap::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #E3E8F0;
  border-radius:6px;
  background:#fff;
}
.pd-cta__thumbwrap::before{transform:translate(7px,7px); z-index:0;}
.pd-cta__thumbwrap::after{transform:translate(3.5px,3.5px); z-index:1;}
.pd-cta__thumb{
  position:relative;
  z-index:2;
  width:100%;
  height:auto;                 /* HTMLのheight属性を打ち消す（必須） */
  aspect-ratio:1181 / 835;
  object-fit:cover;
  border:1px solid #DDE3EA;
  border-radius:6px;
  display:block;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
}

.pd-cta__title{
  font-size:21px;
  font-weight:700;
  color:var(--pd-ink);
  line-height:1.5;
  margin:0 0 10px;
}
.pd-cta__title em{font-style:normal; color:var(--pd-green);}
.pd-cta__desc{
  font-size:13.5px;
  color:var(--pd-sub);
  line-height:1.85;
  margin:0;
}

/* 「この資料で分かること」 */
.pd-cta__know{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:var(--pd-green-d);
  margin:24px 0 10px;
}
.pd-cta__know svg{flex:none;}
.pd-cta__list{list-style:none; margin:0; padding:0;}
.pd-cta__list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14px;
  color:#33433C;
  line-height:1.7;
  margin:0 0 7px;
  padding:0;
}
.pd-cta__list li::before{content:none;}
.pd-cta__list svg{flex:none; margin-top:3px;}

/* ボタン */
.pd-cta__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:22px;
  padding:16px;
  background:var(--pd-blue);
  color:#fff !important;
  font-size:17px;
  font-weight:700;
  text-decoration:none !important;
  border-radius:9px;
  transition:background .2s ease, transform .1s ease;
}
.pd-cta__btn:hover{background:var(--pd-blue-d); color:#fff !important;}
.pd-cta__btn:active{transform:translateY(1px);}
.pd-cta__btn:focus-visible{outline:3px solid #A9D6F0; outline-offset:2px;}

/* スマホ */
@media (max-width:600px){
  .pd-cta{margin:28px auto; border-radius:12px;}
  .pd-cta__header{padding:10px 16px; gap:7px;}
  .pd-cta__label{font-size:13px;}
  .pd-cta__free{font-size:10.5px; padding:3px 9px;}
  .pd-cta__inner{padding:18px 16px 20px;}
  .pd-cta__head{flex-direction:column; gap:18px;}
  .pd-cta__thumbwrap{width:calc(100% - 8px);}
  .pd-cta__title{font-size:18px;}
  .pd-cta__btn{font-size:15px; padding:14px;}
}

/* テーマの svg{fill:currentColor} でアイコンが塗りつぶされるのを打ち消す（本テーマでの追加） */
.pd-cta svg{fill:none;}