/* jisaku : 自分で作る vs CAR-X-WEB（インフォグラフィック・方眼紙） */
.js{--js-ink:#15171c;--js-self:#7c8597;--js-self-l:#eceef2;--js-cxw:#1f5bff;--js-cxw-l:#e8efff;--js-yel:#ffd60a;--js-line:#dde1e8;color:var(--js-ink)}
.js-sec{padding:clamp(60px,8vw,104px) 16px!important}
.js h1,.js h2,.js h3,.js-side-who,.js-topic,.js-count,.js-fit-h,.js-summary{font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
.js h2.wp-block-heading{font-size:clamp(25px,3.6vw,38px);text-align:center;line-height:1.4;margin:0 auto .6em!important;color:var(--js-ink)}
.js h2.js-left{text-align:left;margin-left:0!important}
.js-label{display:block;width:max-content;max-width:100%;margin:0 auto .7em!important;font-family:"Outfit",sans-serif;font-weight:800;font-size:13px;letter-spacing:.22em;background:var(--js-ink);color:#fff;padding:.25em .8em}
.js-dark .js-label{background:var(--js-yel);color:var(--js-ink);margin-left:0!important}
.js-center{text-align:center;max-width:780px;margin-left:auto!important;margin-right:auto!important}
.js-src{font-size:12.5px;color:#6b7280;max-width:900px;margin:1.2em auto 0!important}
.js-white{background:#fff}
.js-paper,.js-fv{background-color:#f6f8fb;background-image:linear-gradient(rgba(31,91,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,91,255,.07) 1px,transparent 1px);background-size:28px 28px}
.js-ctas{justify-content:center;margin-top:1.8em!important}
.js-dark .js-ctas{justify-content:flex-start}
.js .is-layout-flex > *,.js .js-vs > *,.js .js-row > *,.js .js-head > *,.js .js-tally > *,.js .js-bars > *,.js .js-bar-row > *,.js .js-tasks > *,.js .js-phones > *{margin-block-start:0!important}

/* FV */
.js-fv{padding:clamp(40px,6vw,80px) 16px clamp(48px,6vw,80px)!important;text-align:center;border-bottom:1px solid var(--js-line)}
.js-kicker{display:inline-block;width:max-content;margin:0 auto 1em!important;background:var(--js-yel);color:var(--js-ink);font-weight:900;font-size:15px;padding:.3em 1em;transform:rotate(-2deg)}
.js-fv h1{font-size:clamp(30px,4.8vw,58px);line-height:1.3;margin:0 auto .45em!important;letter-spacing:.01em}
.js-fv h1 strong{color:var(--js-cxw);background:linear-gradient(transparent 68%,var(--js-yel) 68%);padding:0 .08em}
.js-fv-lead{max-width:760px;margin:0 auto 1.8em!important;font-size:clamp(15px,1.6vw,17px)}
.js-vs{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0!important;max-width:900px!important;margin:0 auto!important}
.js-side{padding:26px 18px 22px!important;border:3px solid var(--js-ink);background:#fff;margin:0!important}
.js-side p{margin:0!important}
.js-side-who{font-weight:900;font-size:clamp(15px,1.7vw,18px)}
.js-side-price{font-family:"Outfit",sans-serif;font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.15;white-space:nowrap;margin:.15em 0!important}
.js-side-price small{font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:.36em;margin-left:.1em}
.js-side-note{font-size:14px;font-weight:700}
.js-self{background:var(--js-self-l);border-color:var(--js-self)}
.js-self .js-side-price{color:#4b5363}
.js-cxw{background:var(--js-cxw);border-color:var(--js-cxw);color:#fff;box-shadow:8px 8px 0 var(--js-yel)}
.js-vs-mark{align-self:center;width:64px;height:64px;border-radius:50%;background:var(--js-ink);color:var(--js-yel);font-family:"Outfit",sans-serif;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 -14px!important;position:relative;z-index:2}

/* スコアカード */
.js-head,.js-row{display:grid!important;grid-template-columns:1fr 210px 1fr;gap:0!important;max-width:1040px!important;margin:0 auto!important}
.js-head{margin-top:1.6em!important}
.js-head p{margin:0!important;font-weight:900;text-align:center;padding:.6em!important;font-size:15px}
.js-head-self{background:var(--js-self);color:#fff}
.js-head-mid{background:var(--js-ink);color:#fff}
.js-head-cxw{background:var(--js-cxw);color:#fff}
.js-row{border-bottom:1px solid var(--js-line)}
.js-cell{margin:0!important;padding:22px 22px!important;font-size:14.5px;line-height:1.7;color:#3b4251}
.js-cell strong{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:clamp(19px,2vw,24px);line-height:1.35;margin-bottom:.3em;color:var(--js-ink)}
.js-cell-self{background:#fafbfc;text-align:right}
.js-cell-self strong{color:#4b5363}
.js-cell-cxw{background:#f5f8ff}
.js-cell-cxw strong{color:var(--js-cxw)}
.js-mid{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 8px!important;background:#fff;border-left:1px solid var(--js-line);border-right:1px solid var(--js-line)}
.js-mid p{margin:0!important}
.js-topic-n{font-family:"Outfit",sans-serif;font-weight:800;font-size:28px;line-height:1;color:var(--js-ink)}
.js-topic{font-weight:900;font-size:16px;margin:.25em 0 .5em!important}
.js-verdict{font-size:12px;font-weight:900;padding:.25em .7em;border-radius:2px;line-height:1.4}
.js-v-cxw{background:var(--js-cxw);color:#fff}
.js-v-self{background:var(--js-self);color:#fff}
.js-v-even{background:var(--js-yel);color:var(--js-ink)}
.js-tally{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;max-width:760px!important;margin:2.2em auto 0!important}
.js-tally p{margin:0!important;text-align:center;font-weight:900;padding:12px 8px!important;border:2px solid var(--js-ink);background:#fff;font-size:14px}
.js-tally span{display:block;font-size:13px}
.js-tally strong{font-family:"Outfit",sans-serif;font-size:40px;line-height:1.05;margin-right:.1em}
.js-tally-cxw{color:var(--js-cxw)}.js-tally-cxw{border-color:var(--js-cxw)!important}
.js-tally-self{color:#4b5363}.js-tally-self{border-color:var(--js-self)!important}
.js-tally-even{background:var(--js-yel)!important}
.js-summary{text-align:center;font-weight:900;font-size:clamp(17px,2vw,21px);max-width:820px;margin:1.4em auto 0!important}

/* 5年の費用 */
.js-bars{max-width:920px!important;margin:1.8em auto 0!important;display:flex!important;flex-direction:column;gap:18px!important}
.js-bar-row{display:grid!important;grid-template-columns:200px 1fr;align-items:center;gap:14px!important}
.js-bar-row p{margin:0!important}
.js-bar-label{font-weight:900;font-size:17px;line-height:1.3}
.js-bar-label small{display:block;font-size:12.5px;font-weight:700;color:#6b7280}
.js-bar{min-height:62px;display:flex;align-items:center;padding:0 16px!important;font-family:"Outfit","Noto Sans JP",sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,30px);white-space:nowrap}
.js-bar-self{width:100%;justify-content:flex-end;color:#3b4251;background:repeating-linear-gradient(-45deg,#d9dde5 0 10px,#eceef2 10px 20px);border:2px dashed var(--js-self)}
.js-bar-cxw{width:max(12.5%,170px);background:var(--js-cxw);color:#fff;box-shadow:5px 5px 0 var(--js-yel)}
.js-memo{max-width:920px!important;margin:2.2em auto 0!important;gap:16px!important}
.js-memo > .wp-block-column{background:#fff;border:2px solid var(--js-ink);padding:18px 20px}
.js-memo p{margin:0!important;font-size:15px}
.js-memo-h{font-weight:900;font-size:16px!important;margin-bottom:.4em!important}
.js-memo > .wp-block-column:first-child .js-memo-h{color:#4b5363}
.js-memo > .wp-block-column:last-child .js-memo-h{color:var(--js-cxw)}

/* 作業の数 */
.js-work{max-width:1000px!important;margin:2em auto 0!important;gap:24px!important;align-items:flex-start!important}
.js-count{margin:0 0 .6em!important;font-weight:900;font-size:19px;display:flex;align-items:baseline;gap:.3em;padding-bottom:.4em;border-bottom:3px solid}
.js-count strong{font-family:"Outfit",sans-serif;font-size:56px;line-height:1}
.js-count-self{color:#4b5363;border-color:var(--js-self)}
.js-count-cxw{color:var(--js-cxw);border-color:var(--js-cxw)}
.js-tasks{display:flex!important;flex-direction:column;gap:8px!important}
.js-task{margin:0!important;display:flex;align-items:center;gap:12px;padding:11px 14px!important;font-weight:700;font-size:15px;border-radius:3px}
.js-task span{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Outfit",sans-serif;font-weight:800;font-size:14px;color:#fff}
.js-tasks-self .js-task{background:var(--js-self-l)}
.js-tasks-self .js-task span{background:var(--js-self)}
.js-tasks-cxw .js-task{background:var(--js-cxw-l);color:#11318f;padding:16px 14px!important}
.js-tasks-cxw .js-task span{background:var(--js-cxw)}
.js-task-note{font-size:13.5px;color:#4b5363;margin-top:1em!important}

/* 向き不向き */
.js-fit{max-width:1000px!important;margin:2em auto 0!important;gap:20px!important}
.js-fit > .wp-block-column{background:#fff;border:3px solid var(--js-ink);padding:22px 24px 14px;position:relative}
.js-fit > .wp-block-column:first-child{border-color:var(--js-self)}
.js-fit > .wp-block-column:last-child{border-color:var(--js-cxw);box-shadow:8px 8px 0 var(--js-yel)}
.js-fit-img{position:absolute;right:12px;top:-46px;margin:0!important;width:86px}
.js-fit-img img{border-radius:0!important}
.js-fit-h{font-weight:900;font-size:19px;margin:0 0 .6em!important;padding-right:80px}
.js-fit-h-self{color:#4b5363}
.js-fit-h-cxw{color:var(--js-cxw)}
.js-fit-list{list-style:none;padding:0!important;margin:0!important}
.js-fit-list li{padding:.6em 0 .6em 1.6em;border-top:1px dashed var(--js-line);position:relative;font-weight:700;font-size:15px}
.js-fit-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.35}
.js-fit > .wp-block-column:first-child li::before{background:var(--js-self);opacity:1}
.js-fit > .wp-block-column:last-child li::before{background:var(--js-cxw);opacity:1}

/* 並べて比べる */
.js-dark{background:var(--js-ink);color:#fff}
.js-dark h2.wp-block-heading{color:#fff}
.js-dark .js-src{color:#aab2c0;margin-left:0!important}
.js-trial{max-width:1100px!important;align-items:center!important;gap:clamp(24px,4vw,56px)!important}
.js-phones{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important}
.js-phones .wp-block-image{margin:0!important}
.js-phones img{border-radius:20px!important;border:6px solid #000;aspect-ratio:9/18;object-fit:cover;object-position:top;box-shadow:0 0 0 2px #3a3f4a}
.js-phones .wp-block-image:nth-child(2){transform:translateY(-22px)}
.js-phones figcaption{color:#cfd5df;font-size:13px;font-weight:700;text-align:center;margin-top:.5em}

/* FAQ */
.js details.is-style-cx-faq{border-radius:0;border:2px solid var(--js-ink)}
.js details.is-style-cx-faq summary::before{color:var(--js-cxw)}

/* 締め */
.js-close{background:var(--js-yel);padding:clamp(56px,7vw,88px) 16px!important}
.js-close-in{max-width:900px!important;margin:0 auto!important;text-align:center}
.js-close h2.wp-block-heading{font-size:clamp(25px,3.8vw,40px)}
.js-close h2 strong{color:var(--js-cxw)}
.js-links{font-size:14px;margin-top:1.4em!important}
.js-links a{color:var(--js-ink);font-weight:700}

@media (max-width:781px){
  .js-vs{grid-template-columns:1fr}
  .js-vs-mark{margin:-14px auto!important;width:52px;height:52px;font-size:18px}
  .js-cxw{box-shadow:5px 5px 0 var(--js-yel)}
  .js-head{display:none!important}
  .js-row{grid-template-columns:1fr 1fr;border:2px solid var(--js-ink);margin-bottom:14px!important}
  .js-mid{grid-column:1/-1;grid-row:1;flex-direction:row;flex-wrap:wrap;gap:6px 10px;border:0;background:var(--js-ink);color:#fff;padding:10px 12px!important;justify-content:flex-start}
  .js-topic-n{font-size:20px;color:var(--js-yel)}
  .js-topic{margin:0!important;color:#fff}
  .js-verdict{margin-left:auto!important}
  .js-cell{padding:14px 12px!important;font-size:13px;text-align:left}
  .js-cell strong{font-size:17px}
  .js-cell-self::before{content:"自分で作る";display:block;font-size:11px;font-weight:900;color:var(--js-self);margin-bottom:.3em}
  .js-cell-cxw::before{content:"CAR-X-WEB";display:block;font-size:11px;font-weight:900;color:var(--js-cxw);margin-bottom:.3em}
  .js-tally strong{font-size:32px}
  .js-tally p{font-size:12px;padding:10px 4px!important}
  .js-bar-row{grid-template-columns:1fr;gap:6px!important}
  .js-bar{min-height:52px}
  .js-fit{row-gap:56px!important}
  .js-fit > .wp-block-column:first-child{margin-top:30px}
  .js-phones .wp-block-image:nth-child(2){transform:none}
  .js-dark .js-ctas .wp-block-button{width:100%}
  .js h2.js-left{font-size:26px}
}
.js .js-vs > *,.js .js-row > *,.js .js-head > *,.js .js-tally > *,.js .js-phones > *,.js .js-bars > *{margin-left:0!important;margin-right:0!important;max-width:none!important}
.js .js-vs > .js-vs-mark{margin:0 -14px!important}
@media (max-width:781px){.js .js-vs > .js-vs-mark{margin:-14px auto!important}}
.js-bar{box-sizing:border-box}
.js h2.js-left{font-size:clamp(26px,3vw,34px)}
@media (max-width:781px){.js-fit-h{font-size:17px;padding-right:70px}.js-close h2.wp-block-heading{font-size:22px}}
.js-sp{display:none}@media (max-width:781px){.js-sp{display:inline}}