/*
Theme Name: JCN リサイクルパーツ紹介
Template: twentytwentyfive
Description: recycle.j-carnet.com 用の子テーマ。本文は標準ブロックで編集し、装飾はブロックの「スタイル」（KM: 〜）で切り替える。ヘッダー・フッターはテンプレートパーツで全ページ共通。
Version: 1.0.0
Author: 日本カーネット株式会社
Text Domain: jcn-recycleparts
*/
:root{--km-g:#1e6b47;--km-g2:#0e3a26;--km-y:#f39a2b;--km-y2:#fde8cf;--km-c:#f5f6f0;--km-c2:#e9ece2;--km-ink:#17201b;--km-gray:#56615a;--km-line:#dde2d6;--km-head:64px}
html{scroll-behavior:smooth}
body{font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:.02em;background:#fff}
[id]{scroll-margin-top:calc(var(--km-head) + 12px)}
img{max-width:100%;height:auto}
.km-main{margin:0!important;padding:0!important}
.km-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}

/* ヘッダー（上に残る） */
.km-header-wrap{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--km-line);backdrop-filter:blur(6px)}
.admin-bar .km-header-wrap{top:32px}
.km-header{max-width:1200px;margin:0 auto;min-height:var(--km-head);padding:0 20px;gap:16px}
.km-logo{margin:0;font-weight:900;font-size:20px;line-height:1.2}
.km-logo a{color:var(--km-g);text-decoration:none;display:flex;align-items:center;gap:10px}

.km-logo small{display:block;font-size:11px;font-weight:500;color:var(--km-gray);letter-spacing:.06em}
.km-nav a{color:var(--km-ink)!important;font-size:14px;font-weight:600}
.km-nav a:hover{color:var(--km-g)!important}
.km-header-right{gap:18px}
@media(max-width:860px){.km-header .km-header-cta{display:none}.km-logo{font-size:17px}}

/* ボタン */
.wp-block-button.is-style-km-cta .wp-block-button__link{background:var(--km-y);color:#fff;font-weight:900;font-size:18px;padding:1.05rem 2.4rem;border-radius:4px;box-shadow:0 4px 0 #b8650c;color:#0f1d16;transition:transform .12s,box-shadow .12s}
.wp-block-button.is-style-km-cta .wp-block-button__link:after{content:"";display:inline-block;width:.55em;height:.55em;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg);margin-left:.7em;vertical-align:.08em}
.wp-block-button.is-style-km-cta .wp-block-button__link:hover{transform:translateY(2px);box-shadow:0 2px 0 #b8650c}
.wp-block-button.is-style-km-small .wp-block-button__link{background:var(--km-y);color:#0f1d16;font-weight:800;font-size:14px;padding:.55rem 1.1rem;border-radius:4px}
.wp-block-button.is-style-km-ghost .wp-block-button__link{background:transparent;color:var(--km-g);border:2px solid var(--km-g);font-weight:700;border-radius:4px}

/* セクション */
.is-style-km-section{padding:72px 20px!important}
.is-style-km-cream{background:var(--km-c);padding:72px 20px!important}
.is-style-km-green{background:var(--km-g);color:#fff;padding:72px 20px!important}
.is-style-km-green h2,.is-style-km-green h3,.is-style-km-green a{color:#fff}
.is-style-km-label{color:#c4670c;font-weight:800;font-size:13px;letter-spacing:.24em;margin-bottom:6px!important;text-align:center}
.is-style-km-green .is-style-km-label{color:var(--km-y)}
.is-style-km-title{text-align:center;font-size:clamp(24px,3.4vw,34px)!important;font-weight:900!important;margin-bottom:12px!important}
.is-style-km-lead{text-align:center;color:var(--km-gray);max-width:46em;margin-inline:auto!important}
.is-style-km-green .is-style-km-lead{color:#d8eadf}
.is-style-km-note{font-size:13px;color:var(--km-gray);line-height:1.8}

/* ファーストビュー（夜の街の動画＋暗幕） */
.is-style-km-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,14,.95) 0%,rgba(14,58,38,.85) 45%,rgba(14,58,38,.45) 100%);z-index:0}
.is-style-km-hero{position:relative;overflow:hidden;background:#0f1d16 url(img/ph-hero.webp) center/cover no-repeat;color:#fff;padding:120px 20px 56px!important;min-height:min(92vh,820px);display:flex;flex-direction:column;justify-content:center}
.km-hv-unused{position:absolute!important;inset:0;z-index:0;pointer-events:none;max-width:none!important;width:auto!important;margin:0!important}
.km-hv video{width:100%;height:100%;object-fit:cover;display:block}
.km-hv:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,14,.94) 0%,rgba(14,58,38,.82) 42%,rgba(14,58,38,.35) 100%),linear-gradient(0deg,rgba(8,20,14,.9) 0%,transparent 40%)}
.is-style-km-hero>*:not(.km-hv){position:relative;z-index:1;box-sizing:border-box;width:min(1160px,100%);max-width:none!important;margin-left:auto!important;margin-right:auto!important}
.km-hero-k{font-size:13px!important;font-weight:800;letter-spacing:.32em;color:var(--km-y)!important;margin-bottom:18px!important;display:flex;align-items:center;gap:14px}
.km-hero-k:before{content:"";width:44px;height:2px;background:var(--km-y)}
.is-style-km-hero h1{color:#fff;font-size:clamp(36px,6.4vw,82px)!important;font-weight:900!important;line-height:1.18!important;letter-spacing:.01em;margin:0 0 26px!important;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.km-hero-lead{color:#dfeee5!important;font-size:clamp(15px,1.4vw,17px)!important;line-height:2!important;padding-right:min(520px,42%)}
.is-style-km-hero .wp-block-buttons{margin-top:26px!important}
.km-hero-n{list-style:none;padding:0!important;margin-top:56px!important;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.22)}
.km-hero-n li{padding:22px 18px 4px 0;border-right:1px solid rgba(255,255,255,.14);margin-right:18px}
.km-hero-n li:last-child{border-right:0}
.km-hero-n b{display:block;font-size:clamp(26px,3vw,40px);font-weight:900;color:#fff;line-height:1.1;letter-spacing:.01em}
.km-hero-n b small{font-size:.5em;margin-left:2px}
.km-hero-n span{display:block;font-size:13px;color:#a8c4b4;margin-top:6px}
.km-hero-note{color:#8fae9c!important;margin-top:14px!important}
@media(max-width:900px){.is-style-km-hero{padding:96px 18px 40px!important;min-height:0}.km-hero-lead{padding-right:0}.km-hero-n{grid-template-columns:1fr 1fr;margin-top:36px!important}.km-hero-n li:nth-child(2){border-right:0}.km-hv:after{background:linear-gradient(0deg,rgba(8,20,14,.95) 0%,rgba(14,58,38,.78) 100%)}}

/* 暗い背景のセクション */
.is-style-km-dark{background:#12221a;color:#e3efe8;padding:84px 20px!important;position:relative}
.is-style-km-dark:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 120px);pointer-events:none}
.is-style-km-dark>*{position:relative}
.is-style-km-dark .is-style-km-title,.is-style-km-dark h3{color:#fff}
.is-style-km-dark .is-style-km-label{color:var(--km-y)}
.is-style-km-dark .is-style-km-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--km-y)}
.is-style-km-dark .is-style-km-card h3{color:#fff}
.is-style-km-dark .is-style-km-card p{color:#b6cbbe}
.is-style-km-dark .km-num{font-size:44px;color:var(--km-y)}

/* しくみ（写真つき） */
.km-flow-ph{border:0!important;background:transparent!important;gap:22px!important}
.km-flow-ph>.wp-block-group{background:#fff;border:1px solid var(--km-line)!important;border-radius:4px;padding:0 0 22px!important;overflow:hidden}
.km-flow-ph>.wp-block-group>*:not(.km-photo){margin-left:22px!important;margin-right:22px!important}
.km-flow-ph>.wp-block-group+.wp-block-group{border-left:1px solid var(--km-line)!important;border-top:1px solid var(--km-line)!important}
.km-flow-ph>.wp-block-group+.wp-block-group:before{display:none}
.km-photo{margin:0 0 16px!important}
.km-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.km-step-n{font-size:12px;font-weight:800;letter-spacing:.24em;color:#c4670c;margin-bottom:2px!important}
@media(max-width:780px){.km-flow-ph{grid-template-columns:1fr}}

/* 写真と文の2分割 */
.km-split>.wp-block-columns{max-width:1160px;margin-inline:auto;gap:48px;align-items:center}
.km-split-ph .km-photo img{aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);border-radius:4px}
.km-split-title{font-size:clamp(24px,3vw,34px)!important;font-weight:900!important;margin:0 0 18px!important}
.km-left{text-align:left!important}
.km-split h3{font-size:18px!important;margin-top:22px!important;color:var(--km-g)}
@media(max-width:780px){.km-split-ph .km-photo img{aspect-ratio:3/2;clip-path:none}}

.km-sub-title{text-align:center;margin-top:44px!important;font-size:20px!important}

/* カード */
.is-style-km-card{background:#fff;border:1px solid var(--km-line);border-top:4px solid var(--km-g);padding:26px 24px!important;border-radius:4px;height:100%}
.is-style-km-card h3{font-size:19px!important;color:var(--km-g);margin-bottom:10px!important}
.is-style-km-card p{color:#3d4642;font-size:15px}
.is-style-km-cream .is-style-km-card{border-color:#dde2d6;border-top-color:var(--km-g)}
.km-num{display:block;font-family:Georgia,serif;font-size:30px;font-weight:700;color:var(--km-y);line-height:1;margin-bottom:8px}

/* 仕組みの図 */
.is-style-km-flowbox{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0!important;border:2px solid var(--km-g);border-radius:4px;background:#fff}
.is-style-km-flowbox>.wp-block-group{padding:24px 22px!important;position:relative;margin:0!important}
.is-style-km-flowbox>.wp-block-group+.wp-block-group{border-left:2px dashed var(--km-line)}
.is-style-km-flowbox>.wp-block-group+.wp-block-group:before{content:"";position:absolute;left:-13px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--km-y);clip-path:polygon(0 0,100% 50%,0 100%)}
.is-style-km-flowbox h3{color:var(--km-g);font-size:18px!important}
@media(max-width:780px){.is-style-km-flowbox{grid-template-columns:1fr}.is-style-km-flowbox>.wp-block-group+.wp-block-group{border-left:0;border-top:2px dashed var(--km-line)}.is-style-km-flowbox>.wp-block-group+.wp-block-group:before{left:50%;top:-12px;margin:0 0 0 -11px;clip-path:polygon(0 0,100% 0,50% 100%)}}

/* 手順 */
.km-steps{counter-reset:s;list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.km-steps li{counter-increment:s;background:#fff;border:1px solid var(--km-line);border-radius:4px;padding:20px 14px 18px;font-weight:700;text-align:center;position:relative}
.km-steps li:before{content:"STEP " counter(s,decimal-leading-zero);display:block;color:#c4670c;font-size:12px;letter-spacing:.18em;margin-bottom:6px}
.km-steps li span{display:block;font-weight:400;font-size:13px;color:var(--km-gray);margin-top:6px;text-align:left}
@media(max-width:900px){.km-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.km-steps{grid-template-columns:1fr}}

/* チェックリスト */
.is-style-km-checks{list-style:none;padding:0!important}
.is-style-km-checks li{position:relative;padding:4px 0 4px 32px;margin-bottom:6px}
.is-style-km-checks li:before{content:"";position:absolute;left:2px;top:.55em;width:18px;height:18px;border-radius:3px;background:var(--km-g)}
.is-style-km-checks li:after{content:"";position:absolute;left:8px;top:.72em;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.is-style-km-ng li:before{background:#8a8f99}

/* 表 */
.is-style-km-table table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
.is-style-km-table th,.is-style-km-table td{border:1px solid var(--km-line);padding:12px 14px;text-align:left;vertical-align:top}
.is-style-km-table thead th,.is-style-km-table tr th{background:var(--km-g);color:#fff}
.is-style-km-table tbody tr:nth-child(even) td{background:#f8f9f5}
.is-style-km-table td:first-child{font-weight:700;background:var(--km-c2)!important;width:32%}

/* 注意の枠 */
.is-style-km-notice{background:#fff3e3;border-left:6px solid var(--km-y);padding:20px 22px!important;border-radius:0 4px 4px 0}
.is-style-km-notice h3{font-size:17px!important;margin-bottom:6px!important}

/* FAQ */
.is-style-km-faq{border-bottom:1px solid var(--km-line);padding:0}
.is-style-km-faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 44px;font-weight:700;position:relative}
.is-style-km-faq summary::-webkit-details-marker{display:none}
.is-style-km-faq summary:before{content:"Q";position:absolute;left:4px;top:14px;width:28px;height:28px;line-height:28px;text-align:center;background:var(--km-g);color:#fff;border-radius:3px;font-family:Georgia,serif}
.is-style-km-faq summary:after{content:"";position:absolute;right:12px;top:24px;width:9px;height:9px;border-right:2px solid var(--km-g);border-bottom:2px solid var(--km-g);transform:rotate(45deg);transition:transform .2s}
.is-style-km-faq[open] summary:after{transform:rotate(-135deg);top:28px}
.is-style-km-faq>*:not(summary){padding:0 8px 18px 44px;color:#3d4642;margin:0}

/* 申込エリア */
.is-style-km-final{background:linear-gradient(90deg,rgba(8,20,14,.92),rgba(20,80,52,.78)),url(img/ph-night.webp) center/cover no-repeat;color:#fff;text-align:center;padding:96px 20px!important}
.is-style-km-final .is-style-km-label{color:var(--km-y)}
.is-style-km-final .is-style-km-title{color:#fff;font-size:clamp(26px,3.6vw,40px)!important}
.is-style-km-final h2{color:#fff}
.is-style-km-final p{color:#dfeee5}

/* 記事 */
.km-page{padding:44px 20px 72px!important}
.km-page .wp-block-post-title{font-size:clamp(24px,3.6vw,34px);font-weight:900;line-height:1.45;margin-bottom:.6em}
.km-page .wp-block-post-content h2{font-size:clamp(20px,2.6vw,25px);margin:2.2em 0 .8em!important;padding:12px 16px;background:var(--km-c);border-left:6px solid var(--km-g);border-radius:0 4px 4px 0}
.km-page .wp-block-post-content h3{font-size:19px;margin:1.8em 0 .6em!important;padding-bottom:6px;border-bottom:2px solid var(--km-y)}
.km-page .wp-block-post-content p,.km-page .wp-block-post-content li{line-height:1.95}
.km-page .wp-block-post-content>*{max-width:820px}
.km-crumb{font-size:13px;color:var(--km-gray);margin-bottom:10px!important}
.km-crumb a{color:var(--km-gray)}
.is-style-km-answer{background:var(--km-c);border:1px solid #dde2d6;padding:18px 20px!important;border-radius:4px}
.is-style-km-answer p:first-child{font-weight:800;color:var(--km-g)}

/* コラム一覧 */
.km-cols{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.km-cols li{background:#fff;border:1px solid var(--km-line);border-radius:4px}
.km-cols a{display:block;padding:18px 20px;text-decoration:none;color:var(--km-ink);font-weight:700;line-height:1.6}
.km-cols a span{display:block;font-weight:400;font-size:13px;color:var(--km-gray);margin-top:6px}
.km-cols a:hover{background:var(--km-c)}

/* 写真つきのコラムカード */
.km-cols.has-img{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.km-cols.has-img li{overflow:hidden;transition:transform .2s,box-shadow .2s}
.km-cols.has-img li:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,58,38,.12)}
.km-cols.has-img a{padding:0 0 18px}
.km-cols.has-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px;transition:transform .4s}
.km-cols.has-img li:hover img{transform:scale(1.04)}
.km-cols.has-img b,.km-cols.has-img span{display:block;padding:0 18px}
.km-cols.has-img b{font-size:15.5px;line-height:1.6}

/* 記事の見出し帯（写真＋暗幕） */
.km-page>.wp-block-post-title{position:relative;color:#fff;margin:-44px -20px 34px!important;padding:96px max(20px,calc(50% - 560px)) 56px!important;max-width:none!important;width:auto!important;background:#12221a var(--km-ph,none) center/cover no-repeat;font-size:clamp(24px,3.8vw,40px)!important;line-height:1.45!important}
.km-page>.wp-block-post-title:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,14,.93) 0%,rgba(14,58,38,.72) 60%,rgba(14,58,38,.45) 100%);z-index:-1}
.km-page>.wp-block-post-title:after{content:"COLUMN";position:absolute;left:max(20px,calc(50% - 560px));top:58px;font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--km-y)}
.km-page>.wp-block-post-title{isolation:isolate}
.km-page>.wp-block-post-title>*{position:relative}



body.km-ph-hero{--km-ph:url(img/ph-hero.webp)}body.km-ph-bumper{--km-ph:url(img/ph-bumper.webp)}body.km-ph-engine{--km-ph:url(img/ph-engine.webp)}body.km-ph-lamp{--km-ph:url(img/ph-lamp.webp)}body.km-ph-head{--km-ph:url(img/ph-head.webp)}body.km-ph-brake{--km-ph:url(img/ph-brake.webp)}body.km-ph-battery{--km-ph:url(img/ph-battery.webp)}body.km-ph-susp{--km-ph:url(img/ph-susp.webp)}body.km-ph-hub{--km-ph:url(img/ph-hub.webp)}body.km-ph-arm{--km-ph:url(img/ph-arm.webp)}body.km-ph-shelf{--km-ph:url(img/ph-shelf.webp)}
body.km-ph-none .km-page>.wp-block-post-title:after{content:""}

/* フッター */
.km-footer{background:#0f1d16;color:#c8d6cd;padding:48px 20px 36px!important;font-size:14px}
.km-footer a{color:#fff}
.km-footer-logo{font-weight:900;color:#fff;font-size:18px}
.km-footer-links a{margin-right:18px;display:inline-block;margin-bottom:6px}
.km-footer-note{font-size:12px;color:#94a99c;line-height:1.9}

/* 出現の動き */
.km-rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.km-rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.km-rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* 追加の部品 */
.km-screen img{display:block;width:100%;height:auto}
.km-case{background:#fff;border:1px solid var(--km-line);border-radius:4px;overflow:hidden;height:100%}
.km-case img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.km-case>*:not(figure){padding-left:20px;padding-right:20px}
.km-case h3{color:var(--km-g);font-size:18px!important;margin-top:16px!important}
.km-kpi td:nth-child(3){font-weight:900;color:var(--km-y)}
.km-sys .wp-block-image img{background:#fff;border-radius:4px}


/* recycle 追加 */
.km-footer-logo img{height:31px;width:auto;display:block;margin-bottom:6px}
.km-souba{max-width:420px;margin-inline:auto!important}
.km-il img{max-width:220px;margin:0 auto;display:block}
.km-split-ph.km-shot .km-photo img{aspect-ratio:auto;clip-path:none;object-fit:contain;border:1px solid var(--km-line);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.km-photo img[src*="/sp-"],.km-photo img[src*="/il-"]{aspect-ratio:auto!important;object-fit:contain}
.km-photo img[src*="/sp-items"]{max-width:1100px;margin-inline:auto}
.km-photo img[src*="/sp-shop"],.km-photo img[src*="/sp-dp-"]{border:1px solid var(--km-line)}