/*
Theme Name: JCN DP LP
Template: twentytwentyfive
Description: dp.j-carnet.com 販促LP用の子テーマ。本文は標準ブロックで編集し、色や装飾はブロックの「スタイル」（DP: 〜）で切り替える。
Version: 1.0.0
Author: 日本カーネット株式会社
Text Domain: jcn-dp-lp
*/

:root{
  --dp-navy:#0b2259; --dp-deep:#06153a; --dp-red:#e5132b; --dp-orange:#ff6a00;
  --dp-yellow:#ffd400; --dp-light:#eef2f8; --dp-ink:#151a26; --dp-r:4px;
  --dp-num:"Barlow Condensed","Noto Sans JP",sans-serif;
}
html{scroll-behavior:smooth}
body{font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden}
.dp-main{margin:0!important;padding:0!important}
.dp-main > .entry-content, .dp-main .wp-block-post-content{margin-top:0!important}
.wp-block-post-content > *{margin-block-start:0}
.wp-block-post-content > .alignfull{margin-top:0!important;margin-bottom:0!important}
img{max-width:100%;height:auto}
.wp-block-image img{border-radius:var(--dp-r)}

/* ===== 共通セクション ===== */
.is-style-dp-section,.is-style-dp-light,.is-style-dp-dark,.is-style-dp-red,.is-style-dp-final{
  padding:clamp(56px,8vw,100px) 16px!important;
}
.is-style-dp-light{background:var(--dp-light)}
.is-style-dp-dark{background:var(--dp-navy);color:#fff}
.is-style-dp-red{background:var(--dp-red);color:#fff}
.is-style-dp-dark a:not(.wp-block-button__link),.is-style-dp-red a:not(.wp-block-button__link){color:var(--dp-yellow)}

/* セクション見出し：黄色マーカー */
h2.is-style-dp-title{
  font-size:clamp(26px,4.2vw,42px);text-align:center;margin:0 auto .4em!important;letter-spacing:.02em;
}
h2.is-style-dp-title strong{
  background:linear-gradient(transparent 58%,var(--dp-yellow) 58%);color:inherit;padding:0 .1em;
}
.is-style-dp-dark h2.is-style-dp-title strong,.is-style-dp-red h2.is-style-dp-title strong{background:none;color:var(--dp-yellow)}
h3.wp-block-heading{font-size:clamp(19px,2.2vw,23px)}

.is-style-dp-label{
  display:block;width:max-content;max-width:100%;margin:0 auto .6em!important;
  background:var(--dp-red);color:#fff;font-weight:900;font-size:14px;letter-spacing:.12em;
  padding:.25em 1em;transform:skewX(-10deg);
}
.is-style-dp-lead{font-size:clamp(16px,1.9vw,19px);text-align:center;max-width:820px;margin-left:auto!important;margin-right:auto!important}
.is-style-dp-note{font-size:13px;opacity:.8;text-align:center}

/* ===== ヒーロー ===== */
.is-style-dp-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px),
    linear-gradient(160deg,var(--dp-deep) 0%,var(--dp-navy) 55%,#123a8a 100%);
  padding:clamp(40px,6vw,80px) 16px clamp(70px,9vw,120px)!important;
}
.is-style-dp-hero::after{ /* 下端の赤×黄の斜めライン */
  content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:clamp(28px,4vw,54px);
  background:linear-gradient(90deg,var(--dp-red),var(--dp-orange) 60%,var(--dp-yellow));
  clip-path:polygon(0 70%,100% 0,100% 100%,0 100%);
}
.is-style-dp-hero .dp-hero-kicker{
  display:inline-block;background:var(--dp-yellow);color:var(--dp-deep);font-weight:900;
  font-size:clamp(14px,1.6vw,17px);padding:.3em .9em;margin:0 0 .8em!important;transform:skewX(-10deg);
}
.is-style-dp-hero h1{
  font-size:clamp(30px,5.2vw,58px);line-height:1.25;margin:0 0 .35em!important;letter-spacing:.01em;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
}
.is-style-dp-hero h1 strong{display:block;font-family:var(--dp-num);font-weight:800;font-size:1.15em;letter-spacing:.04em;color:#fff}
.dp-hero-sub{font-size:clamp(16px,1.9vw,19px);font-weight:700;opacity:.95}
.dp-price{
  display:inline-block;margin:.6em 0 .2em!important;font-weight:900;line-height:1;
  background:#fff;color:var(--dp-red);padding:.35em .6em .3em;transform:rotate(-2deg);
  box-shadow:6px 6px 0 var(--dp-yellow);font-size:clamp(18px,2.2vw,22px);
}
.dp-price strong{font-family:var(--dp-num);font-size:2.6em;font-weight:800;letter-spacing:.01em;vertical-align:-.12em}
.dp-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.2em!important}
.dp-hero-tags{font-weight:700}
.is-style-dp-hero .wp-block-list.dp-hero-points{list-style:none;padding:0;margin:1.1em 0 0;display:flex;flex-wrap:wrap;gap:8px}
.is-style-dp-hero .dp-hero-points li{border:1px solid rgba(255,255,255,.55);padding:.25em .8em;font-weight:700;font-size:15px;border-radius:2px}
.is-style-dp-hero .dp-hero-points li::before{content:"✓ ";color:var(--dp-yellow)}
.is-style-dp-hero .wp-block-image img{box-shadow:0 20px 50px rgba(0,0,0,.45)}
.dp-hero-cols{align-items:center!important;gap:clamp(20px,4vw,48px)!important}

/* ===== ボタン ===== */
.wp-block-button.is-style-dp-cta .wp-block-button__link{
  background:linear-gradient(180deg,#ff3b2f 0%,var(--dp-red) 55%,#c40c20 100%);color:#fff;
  font-weight:900;font-size:clamp(17px,1.8vw,20px);padding:1.05em 2.4em;border-radius:var(--dp-r);
  box-shadow:0 5px 0 #8f0716,0 10px 22px rgba(229,19,43,.35);transition:transform .12s,box-shadow .12s;
}
.wp-block-button.is-style-dp-cta .wp-block-button__link::after{content:" ›";font-weight:900}
.wp-block-button.is-style-dp-cta .wp-block-button__link:hover{transform:translateY(2px);box-shadow:0 3px 0 #8f0716,0 6px 14px rgba(229,19,43,.35);color:#fff}
.wp-block-button.is-style-dp-tel .wp-block-button__link{
  background:#fff;color:var(--dp-navy);border:2px solid var(--dp-navy);font-weight:900;
  font-size:clamp(16px,1.7vw,19px);padding:1em 1.8em;border-radius:var(--dp-r);
}
.wp-block-button.is-style-dp-tel .wp-block-button__link::before{content:"☎ "}
.wp-block-button.is-style-dp-ghost .wp-block-button__link{
  background:transparent;color:#fff;border:2px solid #fff;font-weight:900;padding:1em 1.8em;border-radius:var(--dp-r)
}
.wp-block-button.is-style-dp-ghost .wp-block-button__link:hover{background:#fff;color:var(--dp-navy)}
.dp-ctas{gap:14px!important;margin-top:1.6em!important}
.dp-ctas-center{justify-content:center}

/* ===== 黄色帯の数字 ===== */
.is-style-dp-band{
  background:var(--dp-yellow);padding:clamp(28px,4vw,44px) 16px!important;color:var(--dp-deep);
}
.is-style-dp-stat{text-align:center;padding:6px 4px!important}
.is-style-dp-stat p{margin:0!important;line-height:1.2}
.is-style-dp-stat .dp-stat-label{font-weight:900;font-size:clamp(13px,1.4vw,16px)}
.is-style-dp-stat .dp-stat-num{font-family:var(--dp-num);font-weight:800;font-size:clamp(46px,6vw,76px);line-height:1;color:var(--dp-red)}
.is-style-dp-stat .dp-stat-num small{font-family:"Noto Sans JP",sans-serif;font-size:.36em;font-weight:900;color:var(--dp-deep);margin-left:.1em}
.is-style-dp-stat .dp-stat-note{font-size:12px;opacity:.75}
.dp-stats{gap:10px!important}
.dp-stats > .wp-block-group + .wp-block-group{border-left:2px dashed rgba(6,21,58,.25)}

/* ===== カード ===== */
.is-style-dp-card{
  background:#fff;color:var(--dp-ink);border-radius:var(--dp-r);padding:26px 22px!important;
  box-shadow:0 2px 0 rgba(11,34,89,.08),0 8px 24px rgba(11,34,89,.08);border-top:5px solid var(--dp-navy);
}
.is-style-dp-card h3{margin-top:0!important;color:var(--dp-navy)}
.is-style-dp-card p{font-size:15px}
.is-style-dp-dark .is-style-dp-card{border-top-color:var(--dp-yellow)}
.dp-pains .is-style-dp-card{border-top-color:var(--dp-red)}
.dp-pains .is-style-dp-card h3{color:var(--dp-red)}
.dp-num{font-family:var(--dp-num);font-weight:800;font-size:44px;line-height:1;color:var(--dp-red);margin:0 0 .2em!important}
.dp-feature .wp-block-image{margin:-26px -22px 16px!important}
.dp-feature .wp-block-image img{border-radius:var(--dp-r) var(--dp-r) 0 0;aspect-ratio:16/10;object-fit:cover;width:100%}

/* 矢印（お悩み→解決） */
.dp-arrow{width:0;height:0;margin:28px auto 0!important;border-left:60px solid transparent;border-right:60px solid transparent;border-top:34px solid var(--dp-red)}

/* ===== チェックリスト ===== */
ul.is-style-dp-checks{list-style:none;padding-left:0}
ul.is-style-dp-checks li{position:relative;padding-left:1.9em;margin:.45em 0;font-weight:700}
ul.is-style-dp-checks li::before{
  content:"";position:absolute;left:0;top:.35em;width:1.2em;height:1.2em;background:var(--dp-red);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
.is-style-dp-dark ul.is-style-dp-checks li::before{background:var(--dp-yellow)}

/* ===== 表 ===== */
.wp-block-table.is-style-dp-table{overflow-x:auto}
.wp-block-table.is-style-dp-table table{border-collapse:collapse;width:100%;min-width:520px;background:#fff;font-size:15px}
.wp-block-table.is-style-dp-table th,.wp-block-table.is-style-dp-table td{border:1px solid #cfd8e6;padding:.75em .8em;text-align:center}
.wp-block-table.is-style-dp-table thead th{background:var(--dp-navy);color:#fff;font-weight:900;border-color:var(--dp-navy)}
.wp-block-table.is-style-dp-table tbody td:first-child{text-align:left;font-weight:700;background:#f6f8fc}
.wp-block-table.is-style-dp-table thead{border-bottom:0}
.wp-block-table.is-style-dp-table figcaption{font-size:13px;text-align:left}

/* ===== 料金ボックス ===== */
.dp-pricebox{text-align:center;background:#fff;border:3px solid var(--dp-red);border-radius:var(--dp-r);padding:28px 18px!important;position:relative}
.dp-pricebox .dp-pricebox-big{font-weight:900;color:var(--dp-red);font-size:22px;line-height:1.1;margin:0!important}
.dp-pricebox .dp-pricebox-big strong{font-family:var(--dp-num);font-size:3.6em;font-weight:800}

/* ===== お客様の声 ===== */
.dp-voice{background:#fff;border-radius:var(--dp-r);padding:24px!important;color:var(--dp-ink);gap:20px!important}
.dp-voice h3{color:var(--dp-red)!important;margin-top:0!important}
.dp-voice .dp-voice-name{font-weight:700;font-size:14px;color:var(--dp-navy);border-top:1px solid #dbe2ee;padding-top:.6em}

/* ===== ステップ ===== */
.dp-steps .is-style-dp-card{border-top-color:var(--dp-orange);text-align:center}
.dp-steps .dp-num{color:var(--dp-orange)}

/* ===== FAQ ===== */
details.is-style-dp-faq{background:#fff;border:1px solid #d5dceb;border-radius:var(--dp-r);margin-top:0!important;margin-bottom:10px!important;padding:0;max-width:900px}
details.is-style-dp-faq summary{cursor:pointer;font-weight:900;padding:1em 2.6em 1em 3em;position:relative;list-style:none;color:var(--dp-navy)}
details.is-style-dp-faq summary::-webkit-details-marker{display:none}
details.is-style-dp-faq summary::before{content:"Q";position:absolute;left:1em;top:.85em;font-family:var(--dp-num);font-size:22px;color:var(--dp-red);line-height:1}
details.is-style-dp-faq summary::after{content:"+";position:absolute;right:1em;top:.7em;font-size:22px;font-weight:700}
details.is-style-dp-faq[open] summary::after{content:"−"}
details.is-style-dp-faq > :not(summary){padding:0 1.2em 0 3em;margin-top:0}
details.is-style-dp-faq > :last-child{padding-bottom:1.1em}

/* ===== 最後のCTA ===== */
.is-style-dp-final{
  color:#fff;text-align:center;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px),
    linear-gradient(135deg,var(--dp-red),#b80b20);
}
.is-style-dp-final h2{font-size:clamp(26px,4.4vw,44px);color:#fff}
.is-style-dp-final h2 strong{background:none;color:var(--dp-yellow)}
.is-style-dp-final .wp-block-buttons{justify-content:center}
.is-style-dp-final .wp-block-button.is-style-dp-cta .wp-block-button__link{background:var(--dp-yellow);color:var(--dp-deep);box-shadow:0 5px 0 #b39500,0 10px 22px rgba(0,0,0,.25)}
.dp-tel-big{font-family:var(--dp-num);font-weight:800;font-size:clamp(38px,6vw,60px);line-height:1;margin-top:.2em!important}
.dp-tel-big a{color:#fff!important;text-decoration:none}

/* ===== フッター ===== */
.dp-footer{background:var(--dp-deep);color:#c9d3e6;padding:28px 16px!important;font-size:13px;text-align:center}
.dp-footer p{margin:.3em 0!important}
.jcn-flinks{clear:both;padding:14px 4% 18px;text-align:center;line-height:1.9;}
.jcn-flinks a{font-size:11px!important;color:#9a9a9a!important;text-decoration:none;margin:0 .45em;white-space:nowrap;}
.jcn-flinks a:hover{color:#6b6b6b!important;text-decoration:underline;}
.jcn-flinks .sep{font-size:11px;color:#cfcfcf;}
.jcn-flinks .sep::after{content:"​";}

/* 画面下に固定する申込バー（スマホのみ） */
.dp-sticky-cta{display:none!important}
@media (max-width:781px){
  .dp-sticky-cta{
    display:flex!important;position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0!important;
    background:rgba(6,21,58,.96);padding:8px 10px!important;
  }
  .dp-sticky-cta .wp-block-buttons{flex-wrap:nowrap!important;gap:8px!important;width:100%}
  .dp-sticky-cta .wp-block-button{flex:1}
  .dp-sticky-cta .wp-block-button__link{width:100%;font-size:15px!important;padding:.8em .4em!important;box-shadow:none!important}
  body{padding-bottom:70px}
  .dp-stats > .wp-block-group + .wp-block-group{border-left:0}
  .dp-ctas .wp-block-button{width:100%}
  .dp-ctas .wp-block-button__link{width:100%}
  .dp-voice{flex-wrap:wrap!important}
}

/* ===== 調整 ===== */
strong,b{font-weight:900}
.is-style-dp-lead strong{color:var(--dp-red);font-size:1.25em}
.is-style-dp-dark .is-style-dp-lead strong,.is-style-dp-red .is-style-dp-lead strong{color:var(--dp-yellow)}
.is-style-dp-hero .dp-hero-note{text-align:left;margin-top:.8em!important}
.is-style-dp-hero .wp-block-image img{box-shadow:none}
.dp-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.is-style-dp-stat .dp-stat-num{white-space:nowrap;font-size:clamp(40px,5vw,70px)}
ul.dp-check-grid{columns:3 220px;column-gap:28px}
ul.dp-check-grid li{break-inside:avoid;margin-top:0}
@media (max-width:781px){
  .dp-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:18px!important}
}
.wp-block-table.dp-plan{max-width:820px;margin-left:auto!important;margin-right:auto!important}
.wp-block-table.dp-plan th,.wp-block-table.dp-plan td{padding:.55em .8em}
.wp-block-table.dp-plan td{color:var(--dp-red);font-weight:900}
.wp-block-table.dp-plan td:first-child{color:var(--dp-ink)}
.wp-block-table.dp-compare thead th:last-child{background:var(--dp-red);border-color:var(--dp-red)}
.wp-block-table.dp-compare td:last-child{background:#fff8d6;font-weight:900;color:var(--dp-red)}
.wp-block-table.dp-compare td:nth-child(2){color:#5b6476}

.dp-tel-label{margin-top:1.6em!important;font-weight:700}
.is-style-dp-red .is-style-dp-label,.is-style-dp-final .is-style-dp-label{background:var(--dp-yellow);color:var(--dp-deep)}
.dp-voice{margin-bottom:20px!important}
.dp-voice > .wp-block-column:first-child{flex-basis:32%!important;flex-grow:0!important}
.dp-voice > .wp-block-column:first-child img{width:100%;aspect-ratio:450/484;object-fit:cover}
@media (max-width:781px){.dp-voice > .wp-block-column:first-child{flex-basis:100%!important}}
@media (max-width:781px){.is-style-dp-lead{text-align:left}}