@charset "utf-8";
/* ============================================================
   /plugin リニューアル：WordPress会員サイトを“売れて・続く”サブスクに
   共感→差別化→しくみ→できること→安心→比較表（名前空間 .pl-）
   ============================================================ */

/* ページ内アンカー：固定ヘッダー＋追従ナビ分のオフセット＆スムーススクロール */
html{ scroll-behavior:smooth; scroll-padding-top:118px; }

/* 追従セクションナビ（グローバルヘッダー直下に貼り付く） */
.pl-nav{ position:sticky; top:67px; z-index:30; background:#fff; border-bottom:1px solid #e3eef5; box-shadow:0 5px 16px -12px rgba(7,59,82,.35); }
.pl-nav__inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:2px; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pl-nav__inner::-webkit-scrollbar{ display:none; }
.pl-nav__link{ flex:0 0 auto; padding:14px 14px 11px; font-size:.9rem; font-weight:700; color:#5f7480; text-decoration:none; border-bottom:3px solid transparent; transition:color .15s, border-color .15s; white-space:nowrap; }
.pl-nav__link:hover{ color:#01a0e9; }
.pl-nav__link.is-active{ color:#01a0e9; border-bottom-color:#01a0e9; }
.pl-nav__cta{ flex:0 0 auto; margin-left:auto; padding:7px 18px; background:linear-gradient(150deg,#fcb06c,#ff7700); color:#fff; font-size:.84rem; font-weight:800; border-radius:99px; text-decoration:none; white-space:nowrap; }
.pl-nav__cta:hover{ filter:brightness(1.03); color:#fff; }
@media (max-width:767px){
  html{ scroll-padding-top:115px; }
  .pl-nav{ top:64px; }
  .pl-nav__link{ font-size:.86rem; padding:13px 11px 10px; }
  .pl-nav__cta{ display:none; }
}

/* FV：見出しテキストの上下余白を均一に（page.css の padding-top:366/bottom:0 を上書き・追従ナビと近すぎ解消） */
#fv_low.fv_plugin .fv_low_wrap{ padding-bottom:44px; }
@media (min-width:991px){
  #fv_low.fv_plugin .fv_low_wrap{ padding-top:224px; padding-bottom:150px; }
}

/* 共感（悩み） */
.pl-pain__grid{ max-width:900px; margin:34px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pl-pain__card{ background:#fff; border:1px solid #ffe2a8; border-left:4px solid #f0b000; border-radius:14px; padding:22px 20px; }
.pl-pain__card h3{ font-size:1rem; font-weight:800; color:#26323a; margin:0 0 6px; }
.pl-pain__card p{ font-size:.88rem; color:#6b7d88; line-height:1.7; margin:0; }

/* 3つの差別化 */
.pl-diff__list{ max-width:920px; margin:36px auto 0; display:flex; flex-direction:column; gap:16px; }
.pl-diff{ display:flex; gap:22px; background:#fff; border:1px solid #e3eef5; border-radius:18px; padding:26px 28px; box-shadow:0 22px 50px -36px rgba(1,160,233,.45); }
.pl-diff__icon{ flex:0 0 auto; width:56px; height:56px; border-radius:15px; background:linear-gradient(150deg,#51bfeb,#01a0e9); display:flex; align-items:center; justify-content:center; }
.pl-diff--core .pl-diff__icon{ background:linear-gradient(150deg,#0a4a63,#073b52); }
.pl-diff__icon svg{ width:28px; height:28px; color:#fff; }
.pl-diff__body{ flex:1; min-width:0; }
.pl-diff__num{ font-family:"Poppins",sans-serif; font-weight:700; font-size:.78rem; color:#9fc4d6; letter-spacing:.1em; }
.pl-diff__title{ font-size:1.26rem; font-weight:800; color:#073b52; margin:2px 0 8px; }
.pl-diff__desc{ font-size:.95rem; color:#39474f; line-height:1.8; margin:0; }

/* しくみ */
.pl-how__fig{ max-width:900px; margin:32px auto 0; background:#fff; border:1px solid #e3eef5; border-radius:18px; padding:18px; }
.pl-how__fig img{ width:100%; height:auto; display:block; }
.pl-how__autotag{ max-width:900px; margin:30px auto 0; font-size:.92rem; font-weight:800; color:#0288c2; display:flex; align-items:center; justify-content:center; gap:9px; }
.pl-how__pulse{ width:10px; height:10px; border-radius:50%; background:#34d39e; box-shadow:0 0 0 0 rgba(52,211,158,.5); animation:plPulse 1.8s infinite; }
@keyframes plPulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,158,.5);} 70%{box-shadow:0 0 0 11px rgba(52,211,158,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,158,0);} }
.pl-how__grid{ max-width:920px; margin:18px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pl-how__card{ background:#fff; border:1px solid #e3eef5; border-radius:14px; padding:24px 20px; text-align:center; }
.pl-how__ico{ width:48px; height:48px; border-radius:12px; background:#eaf6fe; color:#01a0e9; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.pl-how__ico svg{ width:26px; height:26px; }
.pl-how__card h3{ font-size:1rem; font-weight:800; color:#073b52; margin:0 0 7px; }
.pl-how__card p{ font-size:.86rem; color:#6b7d88; line-height:1.75; margin:0; }

/* できること */
.pl-feat__grid{ max-width:920px; margin:34px auto 0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; }
.pl-feat__item{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #e3eef5; border-radius:12px; padding:16px 18px; }
.pl-feat__item svg{ flex:0 0 auto; width:22px; height:22px; color:#01a0e9; margin-top:2px; }
.pl-feat__item b{ display:block; font-size:.95rem; color:#26323a; }
.pl-feat__item span{ font-size:.84rem; color:#6b7d88; line-height:1.6; }
/* ショートコードで囲むだけ */
.pl-sc{ max-width:920px; margin:24px auto 0; background:#073b52; border-radius:16px; padding:24px 26px; }
.pl-sc__head{ color:#fff; font-size:.98rem; line-height:1.75; margin:0; }
.pl-sc__head b{ color:#ffd64d; }
.pl-sc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.pl-sc__item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:14px; }
.pl-sc__tag{ display:inline-block; font-size:.7rem; font-weight:800; color:#073b52; background:#9fe1cb; border-radius:99px; padding:3px 10px; margin-bottom:9px; }
.pl-sc__item code{ display:block; font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:.74rem; line-height:1.85; color:#cfe6f1; word-break:break-word; }
.pl-sc__item code b{ color:#ffd64d; font-weight:700; }
.pl-sc__note{ color:#9fb6c4; font-size:.82rem; margin:14px 0 0; }

/* どんなサイトが作れる（ユースケース） */
.pl-usecase__grid{ max-width:980px; margin:36px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pl-usecase__card{ background:#fff; border:1px solid #e3eef5; border-radius:16px; padding:20px 20px 24px; box-shadow:0 20px 46px -36px rgba(1,160,233,.4); }
.pl-usecase__fig{ background:#f4f9fd; border:1px solid #eef3f7; border-radius:12px; padding:14px; }
.pl-usecase__fig svg{ width:100%; height:auto; display:block; }
.pl-usecase__card h3{ font-size:1.05rem; font-weight:800; color:#073b52; margin:16px 0 7px; }
.pl-usecase__card p{ font-size:.88rem; color:#6b7d88; line-height:1.8; margin:0; }
.pl-usecase__tag{ display:inline-block; font-size:.7rem; font-weight:800; color:#0561c5; background:#eef6fc; border-radius:99px; padding:3px 10px; margin-top:10px; }

/* 安心 */
.pl-trust{ max-width:920px; margin:32px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.pl-trust__card{ background:#fff; border:1px solid #e3eef5; border-radius:14px; padding:20px; text-align:center; }
.pl-trust__card svg{ width:26px; height:26px; color:#01a0e9; }
.pl-trust__card b{ display:block; margin-top:8px; font-size:.92rem; color:#073b52; }
.pl-trust__card span{ font-size:.8rem; color:#6b7d88; }

/* 比較表 */
.pl-compare{ max-width:760px; margin:34px auto 0; border:1px solid #e3eef5; border-radius:16px; overflow:hidden; }
.pl-compare table{ width:100%; border-collapse:collapse; }
.pl-compare th,.pl-compare td{ padding:15px 14px; font-size:.92rem; border-top:1px solid #eef3f7; }
.pl-compare thead th{ border-top:0; background:#f4f9fd; font-weight:800; line-height:1.4; }
.pl-compare thead th:nth-child(2){ color:#01a0e9; }
.pl-compare thead th:nth-child(3){ color:#9fb6c4; }
.pl-compare tbody td:first-child{ text-align:left; font-weight:700; color:#26323a; }
.pl-compare th:not(:first-child),.pl-compare td:not(:first-child){ text-align:center; width:25%; }
.pl-compare .pl-tk{ background:#f4fbff; font-weight:800; color:#0288c2; }
.pl-compare .pl-yes{ color:#0f6e56; font-weight:800; }
.pl-compare .pl-yes svg{ width:17px; height:17px; vertical-align:-3px; }
.pl-compare .pl-no{ color:#b6c6d0; }
.pl-compare__note{ font-size:.78rem; color:#9fb6c4; text-align:center; margin:12px auto 0; max-width:760px; }

/* 料金 */
.pl-price__grid{ max-width:760px; margin:36px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pl-price__card{ position:relative; background:#fff; border:1px solid #e3eef5; border-radius:18px; padding:30px 26px 26px; box-shadow:0 22px 50px -36px rgba(1,160,233,.45); }
.pl-price__card--reco{ border:2px solid #01a0e9; }
.pl-price__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(150deg,#fcb06c,#ff7700); color:#fff; font-size:.72rem; font-weight:800; padding:4px 15px; border-radius:99px; box-shadow:0 4px 10px rgba(255,119,0,.3); white-space:nowrap; }
.pl-price__name{ font-size:1.2rem; font-weight:800; color:#073b52; margin:0 0 6px; text-align:center; }
.pl-price__desc{ font-size:.85rem; color:#6b7d88; line-height:1.7; margin:0 0 16px; text-align:center; }
.pl-price__row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 4px; border-top:1px solid #eef3f7; }
.pl-price__row span{ font-size:.9rem; color:#6b7d88; font-weight:700; }
.pl-price__row b{ font-size:1.45rem; font-weight:800; color:#073b52; font-family:"Poppins",sans-serif; }
.pl-price__row b small{ font-size:.7rem; font-weight:700; color:#6b7d88; margin-left:2px; }
.pl-price__card--reco .pl-price__row b{ color:#01a0e9; }
.pl-price__note{ font-size:.8rem; color:#9fb6c4; text-align:center; margin:16px auto 0; }

@media (max-width:767px){
  .pl-pain__grid{ grid-template-columns:1fr; }
  .pl-diff{ flex-direction:column; gap:14px; padding:22px 20px; }
  .pl-diff__icon{ width:50px; height:50px; }
  .pl-how__grid{ grid-template-columns:1fr; }
  .pl-feat__grid{ grid-template-columns:1fr; }
  .pl-usecase__grid{ grid-template-columns:1fr; max-width:420px; }
  .pl-sc__grid{ grid-template-columns:1fr; }
  .pl-price__grid{ grid-template-columns:1fr; }
  .pl-compare th,.pl-compare td{ padding:12px 8px; font-size:.82rem; }
}