/* =========================================================================
車楽クラウド — Interior page components
========================================================================= */
/* ===== Page hero / breadcrumb ===== */
.page-hero{position:relative;background:var(--bg-blue);padding:54px 0 56px;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 360px at 88% -10%,rgba(74,111,165,.14),transparent 60%);pointer-events:none}
.page-hero .wrap{position:relative}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-soft);margin-bottom:22px;flex-wrap:wrap}
.breadcrumb a{transition:color .2s}.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .cur{color:var(--navy)}
/* v1.2.20: 見出し上限を44px→38pxに変更。右の画像(最大540px)を避けた実効幅に
15文字級のキャッチ(機能一覧・導入事例)が1行で収まるサイズ */
.page-hero h1{font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--navy-deep);line-height:1.4;letter-spacing:.02em;margin:14px 0 0}
.page-hero .eyebrow{margin-bottom:4px}
.page-hero .lead{margin-top:20px;max-width:640px}
.page-hero__media{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:300px;height:auto}
.page-hero__media--wide{width:540px}
@media(min-width:1081px){.page-hero--media .wrap{padding-right:580px}}
/* ===== Generic prose ===== */
.prose{font-size:15.5px;line-height:1.95;color:var(--text);letter-spacing:.02em}
.prose>*+*{margin-top:22px}
.prose h2{font-size:24px;font-weight:700;color:var(--navy-deep);line-height:1.6;margin-top:48px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.prose h3{font-size:18px;font-weight:700;color:var(--navy-deep);margin-top:36px}
.prose p{color:var(--text)}
.prose ul{list-style:none;display:flex;flex-direction:column;gap:12px;padding-left:0}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.prose strong{color:var(--navy-deep);font-weight:700}
.prose img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:block;width:100%}
/* lede block */
.lede{font-size:18px;line-height:2;color:var(--navy);font-weight:500;letter-spacing:.02em}
/* ===== Section intro (reusable heading block) ===== */
.sec-head{margin-bottom:48px}
.sec-head--center{text-align:center;display:flex;flex-direction:column;align-items:center}
/* ===== Detail feature blocks (option/feature pages) ===== */
.detail-list{display:flex;flex-direction:column;gap:80px}
.detail-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.detail-row:nth-child(even) .detail-row__media{order:2}
.detail-row__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:#fff;aspect-ratio:4/3}
.detail-row__img{width:100%;height:100%;display:block;object-fit:contain}
.detail-row__num{font-family:var(--en);font-size:13px;letter-spacing:.16em;color:var(--blue);font-weight:500;margin-bottom:14px;display:block}
.detail-row h3{font-size:23px;font-weight:700;color:var(--navy-deep);line-height:1.55;margin-bottom:16px}
.detail-row p{color:var(--text);line-height:1.9}
.detail-row .feature__tags{margin-top:20px}
/* ===== Spec / value grid ===== */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.val-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-sm)}
.val-card__ic{width:48px;height:48px;border-radius:12px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:20px}
.val-card h3{font-size:17px;font-weight:700;color:var(--navy-deep);margin-bottom:10px}
.val-card p{font-size:13.5px;color:var(--text-soft);line-height:1.85}
.val-grid--4{grid-template-columns:repeat(4,1fr)}
/* ===== What-you-can-do checklist (features page) ===== */
.cando{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:920px;margin:0 auto}
.cando__item{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cando__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cando__ic{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex-shrink:0}
.cando__t{font-size:15.5px;font-weight:700;color:var(--navy-deep);line-height:1.55}
.cando__item--wide{grid-column:1 / -1;border-color:rgba(255,17,74,.32);background:linear-gradient(0deg,rgba(255,17,74,.045),rgba(255,17,74,.045)),#fff}
.cando__item--wide .cando__ic{background:var(--accent)}
@media(max-width:760px){.cando{grid-template-columns:1fr}}
/* ===== Screen / report gallery (features page) ===== */
.report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 28px}
.report-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.report-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.report-card__media{height:214px;overflow:hidden;background:#fff;border-bottom:1px solid var(--line-soft)}
.report-card__media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.report-card__body{padding:22px 24px 26px}
.report-card__cat{display:inline-flex;align-items:center;gap:9px;font-family:var(--en);font-size:11px;letter-spacing:.12em;color:var(--blue);font-weight:500;text-transform:uppercase;margin-bottom:9px}
.report-card h3{font-size:18px;font-weight:700;color:var(--navy-deep);margin-bottom:10px}
.report-card p{font-size:13.5px;color:var(--text-soft);line-height:1.85}
.report-card--wide{grid-column:1 / -1;flex-direction:row}
.report-card--wide .report-card__media{width:54%;height:auto;min-height:248px;border-bottom:none;border-right:1px solid var(--line-soft)}
.report-card--wide .report-card__body{flex:1;align-self:center;padding:32px 36px}
@media(max-width:760px){
.report-grid{grid-template-columns:1fr}
.report-card--wide{flex-direction:column}
.report-card--wide .report-card__media{width:auto;height:214px;min-height:0;border-right:none;border-bottom:1px solid var(--line-soft)}
}
.report-card__media{cursor:zoom-in}
/* ===== Lightbox (image zoom) ===== */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(18,26,46,.82);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:40px;opacity:0;transition:opacity .25s var(--ease)}
.lightbox.is-open{display:flex;opacity:1}
.lightbox__fig{margin:0;max-width:1120px;max-height:90vh;display:flex;flex-direction:column;gap:14px;align-items:center}
.lightbox__fig img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.lightbox__cap{color:#E9EEF6;font-size:13px;text-align:center;letter-spacing:.02em;line-height:1.6}
.lightbox__close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;transition:background .2s}
.lightbox__close:hover{background:rgba(255,255,255,.26)}
.lightbox__hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.04em}
/* ===== Pain points (airepo) ===== */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pain-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 28px 28px;box-shadow:var(--shadow-sm)}
.pain-card__ic{width:46px;height:46px;border-radius:12px;background:rgba(255,17,74,.08);color:var(--accent);display:grid;place-items:center;margin-bottom:18px}
.pain-card h3{font-size:16.5px;font-weight:700;color:var(--navy-deep);line-height:1.6;margin-bottom:10px}
.pain-card p{font-size:13.5px;color:var(--text-soft);line-height:1.85}
@media(max-width:820px){.pain-grid{grid-template-columns:1fr}}
/* ===== Solution flow (airepo highlight) ===== */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;max-width:1040px;margin:0 auto}
.flow__step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:32px 26px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.flow__step--accent{border-color:rgba(255,17,74,.32);box-shadow:0 10px 32px rgba(255,17,74,.12)}
.flow__num{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--blue);font-weight:500;margin-bottom:16px}
.flow__step--accent .flow__num{color:var(--accent)}
.flow__ic{width:72px;height:72px;border-radius:18px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:20px}
.flow__step--accent .flow__ic{background:rgba(255,17,74,.08);color:var(--accent)}
.flow__t{font-size:17px;font-weight:700;color:var(--navy-deep);line-height:1.55;margin-bottom:10px}
.flow__d{font-size:13px;color:var(--text-soft);line-height:1.8}
.flow__arrow{display:grid;place-items:center;padding:0 8px;color:var(--blue)}
.flow__arrow svg{width:34px;height:34px}
.flow__badge{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--accent);background:rgba(255,17,74,.07);border:1px solid rgba(255,17,74,.22);border-radius:30px;padding:5px 13px}
@media(max-width:860px){
.flow{grid-template-columns:1fr;gap:0}
.flow__arrow{padding:14px 0;transform:rotate(90deg)}
}
/* ===== Benefit cards (airepo) ===== */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 30px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.benefit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.benefit-card__no{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--accent);font-weight:500;margin-bottom:16px}
.benefit-card__ic{width:54px;height:54px;border-radius:14px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:20px}
.benefit-card h3{font-size:19px;font-weight:700;color:var(--navy-deep);margin-bottom:12px}
.benefit-card p{font-size:14px;color:var(--text-soft);line-height:1.9}
@media(max-width:820px){.benefit-grid{grid-template-columns:1fr}}
/* ===== Responsive video embed ===== */
.video-embed{position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ===== Airepo usage image ===== */
.airepo-usage{margin:48px auto 0;max-width:880px}
.airepo-usage img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);background:#fff}
.airepo-usage figcaption{text-align:center;font-size:12.5px;color:var(--text-soft);margin-top:16px;letter-spacing:.02em}
/* ===== Feature index grid ===== */
.fcat{margin-top:64px}
.fcat:first-child{margin-top:0}
.fcat__head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.fcat__head .en{font-size:13px;letter-spacing:.14em;color:var(--blue);font-weight:500}
.fcat__head h2{font-size:22px;font-weight:700;color:var(--navy-deep)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fitem{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fitem:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.fitem__ic{width:42px;height:42px;border-radius:10px;background:var(--bg-blue);color:var(--blue);display:grid;place-items:center;margin-bottom:18px}
.fitem h3{font-size:16px;font-weight:700;color:var(--navy-deep);margin-bottom:9px}
.fitem p{font-size:13px;color:var(--text-soft);line-height:1.8}
/* ===== Full function spec (機能一覧：全機能) ===== */
.func-group{margin-top:60px}
.func-group:first-of-type{margin-top:0}
.func-group__head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;padding-bottom:15px;border-bottom:2px solid var(--navy-deep)}
.func-group__head .en{font-family:var(--en);font-size:13px;letter-spacing:.14em;color:var(--blue);font-weight:500}
.func-group__head h2{font-size:23px;font-weight:700;color:var(--navy-deep)}
.func-group__head .cnt{margin-left:auto;font-size:12px;color:var(--text-soft)}
.func-grid{columns:3 250px;column-gap:18px}
.func-cat{break-inside:avoid;-webkit-column-break-inside:avoid;width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px 22px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.func-cat__t{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;color:var(--navy-deep);padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line-soft)}
.func-cat__t .num{font-family:var(--en);font-size:11px;font-weight:500;color:#fff;background:var(--blue-light);border-radius:20px;padding:2px 9px;letter-spacing:.04em;flex-shrink:0}
.func-cat ul{list-style:none;display:flex;flex-direction:column;gap:7px;padding:0}
.func-cat li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--text);letter-spacing:.01em}
.func-cat li::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;border-radius:1px;background:var(--blue-light)}
.func-cat--note{background:var(--bg-blue);border-color:transparent}
.func-cat--note p{font-size:12.5px;color:var(--text-soft);line-height:1.75}
@media(max-width:760px){.func-grid{columns:1}}
/* ===== 陸送 hero (navy gradient + carrier image) ===== */
.rk-hero{background:linear-gradient(135deg,#1E3360 0%,#2A4373 45%,#4A6FA5 100%);position:relative;overflow:hidden;color:#fff}
.rk-hero::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(107,138,184,.35),transparent 65%);top:-220px;right:-140px}
.rk-hero .wrap{position:relative;padding-block:46px 58px}
.rk-hero .breadcrumb{color:#A9BCDC;margin-bottom:28px}
.rk-hero .breadcrumb a:hover{color:#fff}
.rk-hero .breadcrumb .cur{color:#fff}
.rk-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}
.rk-hero__eyebrow{font-family:var(--en);font-size:12px;letter-spacing:.26em;color:#BFD2EC;font-weight:500;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.rk-hero__eyebrow .tag-new{margin-left:2px}
.rk-hero h1{font-size:clamp(27px,3.1vw,40px);line-height:1.5;font-weight:900;color:#fff;margin-bottom:20px;letter-spacing:.02em}
.rk-hero__sub{font-size:15.5px;line-height:1.95;color:#E4ECF7;max-width:490px;margin-bottom:32px}
.rk-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.rk-hero__img{display:flex;justify-content:center}
.rk-hero__img img{width:100%;max-width:500px;height:auto;filter:drop-shadow(0 20px 34px rgba(0,0,0,.32))} /* v1.2.56: height:auto を追加。img に width/height 属性があると高さが固定され、スマホで縦に引き伸ばされていた（/unso/ で発生） */
.rk-hero .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.rk-hero .btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff}
@media(max-width:860px){.rk-hero__grid{grid-template-columns:1fr;gap:26px}.rk-hero__img{order:-1;max-width:380px;margin-inline:auto}}
/* ===== 陸送 hero (navy gradient + carrier image) END ===== */
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.shot-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease);display:flex;flex-direction:column}
.shot-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.shot-card__img{background:var(--bg-blue);border-bottom:1px solid var(--line-soft);padding:16px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;position:relative}
.shot-card__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;transition:transform .25s var(--ease);box-shadow:0 2px 10px rgba(30,51,96,.1)}
.shot-card__img:hover img{transform:scale(1.03)}
.shot-zoom{position:absolute;top:10px;right:10px;width:28px;height:28px;background:rgba(30,51,96,.78);border-radius:6px;display:grid;place-items:center;opacity:0;transition:opacity .25s;pointer-events:none}
.shot-card__img:hover .shot-zoom{opacity:1}
.shot-card__body{padding:24px 24px 26px;flex:1}
.shot-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--en);font-size:13px;font-weight:500;margin-bottom:14px}
.shot-card h3{font-size:17px;font-weight:700;color:var(--navy-deep);margin-bottom:9px;line-height:1.6}
.shot-card p{font-size:13.5px;color:var(--text-soft);line-height:1.85}
@media(max-width:760px){.shot-grid{grid-template-columns:1fr}}
/* ===== Document screenshot (zoomable, with caption) ===== */
.doc-shot{margin:36px auto 8px;max-width:760px}
.doc-shot__frame{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);cursor:zoom-in;background:#fff;padding:14px;position:relative;transition:box-shadow .25s var(--ease)}
.doc-shot__frame:hover{box-shadow:var(--shadow-lg)}
.doc-shot__frame img{width:100%;display:block;border-radius:4px}
.doc-shot__frame .shot-zoom{opacity:0}
.doc-shot__frame:hover .shot-zoom{opacity:1}
.doc-shot figcaption{text-align:center;font-size:12.5px;color:var(--text-soft);margin-top:14px}
/* ===== Strengths panel (3つの強み) ===== */
.str-panel{background:var(--bg-blue);border-radius:var(--radius-lg);padding:50px 56px;max-width:860px;margin-inline:auto}
.str-panel__head{text-align:center;margin-bottom:34px;display:flex;flex-direction:column;align-items:center}
.str-list{display:flex;flex-direction:column;gap:8px}
.str-item{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:22px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.str-item:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.str-item__no{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--en);font-weight:500;font-size:15px;display:grid;place-items:center;flex-shrink:0}
.str-item h3{font-size:16.5px;font-weight:700;color:var(--navy-deep);margin-bottom:5px}
.str-item p{font-size:13.5px;color:var(--text-soft);line-height:1.8}
@media(max-width:600px){.str-panel{padding:34px 22px}.str-item{padding:18px 18px;gap:14px}}
/* ===== Effect band ===== */
.effect-band{background:var(--bg-blue)}
.effect-band .wrap{max-width:840px;text-align:center}
.effect-band p{font-size:16px;line-height:2.05;color:var(--text);margin:0}
.effect-band strong{color:var(--navy-deep);font-weight:700}
/* ===== func NEW item ===== */
.func-cat li.is-new{color:var(--accent-hover);font-weight:700}
.func-cat li.is-new::before{background:var(--accent)}
.func-cat li.is-new::after{content:"NEW";font-family:var(--en);font-size:8.5px;font-weight:500;background:var(--accent);color:#fff;padding:1px 6px;border-radius:3px;margin-left:7px;vertical-align:middle;letter-spacing:.06em}
/* ===== Lightbox ===== */
.lightbox{position:fixed;inset:0;background:rgba(15,25,50,.88);display:none;align-items:center;justify-content:center;z-index:200;padding:40px;cursor:zoom-out;opacity:0;transition:opacity .25s}
.lightbox.open{display:flex;opacity:1}
.lightbox img{max-width:95%;max-height:92%;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.55);background:#fff}
.lightbox__close{position:absolute;top:22px;right:30px;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.85}
.lightbox__close:hover{opacity:1}
/* ===== Case filter + grid (case index) ===== */
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px 28px;margin-bottom:40px}
.filter-group+.filter-group{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.filter-group__label{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.filter-group__label .en{font-family:var(--en);font-size:10px;color:var(--text-soft);letter-spacing:.12em;font-weight:500}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{font-size:13px;font-weight:500;color:var(--navy);background:var(--bg-blue);border:1px solid transparent;border-radius:30px;padding:8px 16px;cursor:pointer;transition:all .2s var(--ease);line-height:1.3}
.fchip:hover{border-color:var(--line)}
.fchip.is-active{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(59,89,152,.28)}
.filter-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.filter-meta__count{font-size:14px;color:var(--text-soft)}
.filter-meta__count b{font-family:var(--en);color:var(--navy-deep);font-size:18px;font-weight:500;margin:0 2px}
.filter-reset{font-size:13px;color:var(--blue);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.filter-reset:hover{text-decoration:underline}
.case-empty{text-align:center;padding:60px 20px;color:var(--text-soft);font-size:14px;display:none}
.case-card.is-hidden{display:none}
.case-card{animation:cardIn .4s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ===== Case detail (課題→決め手→効果) ===== */
.case-detail__hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.case-meta-table{display:flex;flex-direction:column;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.case-meta-table div{display:flex;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px}
.case-meta-table dt{width:120px;color:var(--text-soft);flex-shrink:0;font-weight:500}
.case-meta-table dd{color:var(--navy-deep);font-weight:500}
.case-step{display:grid;grid-template-columns:auto 1fr;gap:32px;padding:40px 0;border-bottom:1px solid var(--line)}
.case-step:last-child{border-bottom:none}
.case-step__tag{display:flex;flex-direction:column;gap:8px}
.case-step__no{font-family:var(--en);font-size:13px;letter-spacing:.14em;color:var(--blue);font-weight:500}
.case-step__k{font-size:20px;font-weight:900;color:var(--navy-deep);writing-mode:horizontal-tb}
.case-step__badge{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.case-step__body h3{font-size:19px;font-weight:700;color:var(--navy-deep);margin-bottom:14px;line-height:1.6}
.case-step__body p{color:var(--text);line-height:1.95}
.case-quote{background:var(--bg-blue);border-radius:var(--radius-lg);padding:34px 38px;margin-top:24px;position:relative}
.case-quote p{font-size:16px;font-weight:500;color:var(--navy);line-height:2;letter-spacing:.02em}
.case-quote cite{display:block;margin-top:16px;font-size:13px;color:var(--text-soft);font-style:normal}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.result-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.result-card__n{font-family:var(--en);font-weight:500;font-size:40px;color:var(--blue);line-height:1}
.result-card__n .u{font-size:.45em;color:var(--navy-deep)}
.result-card__l{font-size:13px;color:var(--text-soft);margin-top:12px}
/* ===== News list & detail ===== */
.news-page-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.news-filter{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.news-detail__meta{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.news-detail__date{font-family:var(--en);font-size:14px;color:var(--text-soft);letter-spacing:.06em}
/* ===== Product list ===== */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.prod-card{display:flex;gap:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.prod-card__media{width:110px;height:110px;border-radius:12px;background:var(--bg-blue);flex-shrink:0;overflow:hidden}
.prod-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.prod-card__media--empty{display:grid;place-items:center}
.prod-card__media--empty span{font-size:10px;letter-spacing:.12em;color:var(--text-soft)}
.prod-card__media--icon{display:grid;place-items:center;background:linear-gradient(150deg,#FF7A9C 0%,#F0436E 100%);position:relative;overflow:hidden;
/* v1.2.19: アイコンタイルを110px→72pxに縮小(画像タイルは110pxのまま) */
width:72px;height:72px;border-radius:10px}
.prod-card__media--icon::after{content:"";position:absolute;right:-28%;bottom:-28%;width:78%;height:78%;background:radial-gradient(circle,rgba(255,255,255,.32),transparent 70%)}
.prod-card__media--icon svg{width:46%;height:46%;stroke:#fff;position:relative;z-index:1}
.prod-card h3{font-size:17px;font-weight:700;color:var(--navy-deep);margin-bottom:8px}
.prod-card p{font-size:13px;color:var(--text-soft);line-height:1.8}
.prod-card__tag{display:inline-block;font-size:11px;font-weight:700;color:var(--blue);background:var(--bg-blue);border-radius:4px;padding:3px 10px;margin-bottom:12px;letter-spacing:.04em}
/* ===== Forms (contact / download) ===== */
.form-layout{display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:40px}
.field{margin-bottom:24px}
.field__label{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--navy-deep);margin-bottom:10px}
.req{font-size:10px;font-weight:700;color:#fff;background:var(--accent);padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.opt{font-size:10px;font-weight:500;color:var(--text-soft);background:var(--bg-blue);padding:2px 8px;border-radius:4px}
.field input,.field textarea,.field select{
width:100%;font-family:var(--jp);font-size:15px;color:var(--text);
padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);
background:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.02em;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,89,152,.12)}
.field input.invalid,.field textarea.invalid{border-color:#C0563E;box-shadow:0 0 0 3px rgba(192,86,62,.1)}
.field textarea{resize:vertical;min-height:130px;line-height:1.8}
.field__err{font-size:12px;color:#C0563E;margin-top:7px;display:none}
.field__err.show{display:block}
.form-aside{position:sticky;top:100px}
.aside-card{background:var(--navy-deep);color:#D6DEEC;border-radius:var(--radius-lg);padding:34px;margin-bottom:20px}
.aside-card h3{color:#fff;font-size:18px;font-weight:700;margin-bottom:16px}
.aside-card ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.aside-card li{display:flex;gap:12px;font-size:13.5px;color:#B9C6DE;line-height:1.7}
.aside-card li .tick{color:#7FE0AB;flex-shrink:0;margin-top:3px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success__ic{width:64px;height:64px;border-radius:50%;background:#E7F6EE;color:#2E9E6B;display:grid;place-items:center;margin:0 auto 22px}
.form-note{font-size:12.5px;color:var(--text-soft);line-height:1.8;margin-top:8px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--text-soft);line-height:1.7}
.consent input{width:auto;margin-top:4px;accent-color:var(--blue)}
/* ===== Download cards ===== */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.dl-card{display:flex;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);align-items:flex-start;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.dl-card__cover{width:84px;height:112px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--navy-deep));flex-shrink:0;box-shadow:var(--shadow-sm);display:grid;place-items:center;color:rgba(255,255,255,.85);position:relative;overflow:hidden}
.dl-card__cover::after{content:"";position:absolute;left:14px;right:14px;bottom:16px;height:1px;background:rgba(255,255,255,.3);box-shadow:0 6px 0 rgba(255,255,255,.18),0 12px 0 rgba(255,255,255,.12)}
.dl-card__body{flex:1}
.dl-card h3{font-size:16px;font-weight:700;color:var(--navy-deep);margin-bottom:8px}
.dl-card p{font-size:13px;color:var(--text-soft);line-height:1.8;margin-bottom:16px}
.dl-card__link{font-size:13.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.dl-card__dl{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#FF114A 0%,#FF4F80 100%);padding:11px 20px;border-radius:9px;cursor:pointer;box-shadow:0 5px 14px rgba(255,17,74,.28);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.dl-card__dl:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(255,17,74,.36)}
.dl-card__meta{display:block;font-size:11.5px;color:var(--text-soft);margin-top:10px;font-family:var(--en);letter-spacing:.02em}
.dl-card__pending{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text-soft);background:var(--bg-blue);padding:9px 15px;border-radius:8px}
/* ===== CTA strip (interior pages) ===== */
.cta-strip{background:linear-gradient(135deg,var(--blue),var(--navy-deep));border-radius:var(--radius-lg);padding:52px 56px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 10% 120%,rgba(228,81,60,.16),transparent 55%)}
.cta-strip>*{position:relative}
.cta-strip h2{color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:700;margin-bottom:14px}
.cta-strip p{color:#CDD8EC;margin-bottom:28px;max-width:520px;margin-inline:auto}
.cta-strip__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-strip .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.cta-strip .btn--ghost:hover{background:rgba(255,255,255,.18)}
/* ===== Responsive ===== */
@media(max-width:1080px){
.form-layout{grid-template-columns:1fr;gap:36px}
.form-aside{position:static}
.val-grid,.fgrid,.result-grid{grid-template-columns:1fr 1fr}
.page-hero__media{display:none}
}
@media(max-width:760px){
.detail-row,.case-detail__hero{grid-template-columns:1fr;gap:32px}
.detail-row:nth-child(even) .detail-row__media{order:0}
.val-grid,.fgrid,.result-grid,.prod-grid,.dl-grid{grid-template-columns:1fr}
.case-step{grid-template-columns:1fr;gap:18px}
.cta-strip{padding:40px 28px}
.form-card{padding:28px 22px}
}
@media(max-width:480px){
.page-hero{padding:40px 0 44px}
.page-hero h1{font-size:clamp(25px,7.6vw,32px)}
.page-hero > .wrap > div[style*="display:flex"] .btn,
.rk-hero__cta .btn,
.cta-strip__btns .btn{width:100%;justify-content:center}
.prod-card,.dl-card{flex-direction:column;gap:16px}
.prod-card__media{width:84px;height:84px}
.str-panel{padding:30px 18px}
.flow__step{padding:26px 20px}
.benefit-card{padding:28px 24px}
.pain-card{padding:26px 22px}
}
/* ===== Prose (WordPress post / page content) ===== */
.prose{font-size:16px;line-height:2;color:var(--text)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.5em}
.prose h2{font-size:24px;font-weight:800;color:var(--navy-deep);margin:2em 0 .8em;line-height:1.5}
.prose h3{font-size:19px;font-weight:700;color:var(--navy-deep);margin:1.8em 0 .6em;line-height:1.6}
.prose ul,.prose ol{margin:0 0 1.5em;padding-left:1.4em}
.prose li{margin:.4em 0}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose img{max-width:100%;height:auto;border-radius:12px;margin:1em 0}
.prose blockquote{margin:1.5em 0;padding:14px 22px;border-left:3px solid var(--blue);background:var(--bg-blue);border-radius:0 10px 10px 0;color:var(--text-soft)}
.prose strong{font-weight:700;color:var(--navy-deep)}
.pagination{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-family:var(--en);color:var(--text-soft);background:#fff}
.pagination .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}
/* =========================================================
導入事例 ステップ2 追加分（既存スタイルと重複しない新規のみ）
========================================================= */
/* --- TOPカード：リンク全体化＆本物画像＆NEWバッジ --- */
.case-card__link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.case-card__img{width:100%;height:100%;object-fit:cover;display:block}
.case-card__noimg{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.08em;color:var(--text-soft)}
/* v1.2.6: 写真なし事例カードのフォールバックタイル（ルートモチーフ） */
.case-card__fallback{position:absolute;inset:0;background:var(--navy);display:grid;place-items:center;overflow:hidden}
.case-card__fallback-route{position:absolute;inset:0;width:100%;height:100%}
.case-card__fallback-inner{position:relative;display:block;text-align:center;padding:0 20px;max-width:100%}
.case-card__fallback-name{display:block;color:#fff;font-weight:700;font-size:15px;line-height:1.6;letter-spacing:.02em}
.case-card__fallback-ind{display:block;color:#AFC2E4;font-size:11px;margin-top:7px;line-height:1.5}
/* v1.2.7: カードのメタ行の業種は2行まで（超えたら…で省略。詳細ページでは全文表示） */
.case-card__meta{align-items:flex-start}
.case-card__ind{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.case-card__num{font-family:var(--en);font-size:12px;color:var(--blue);letter-spacing:.12em;font-weight:500;margin-bottom:10px;display:block}
/* NEWバッジ（エリアバッジの右上に重ねず、右上に配置） */
.case-card__new{position:absolute;right:14px;top:14px;font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--orange,#F39C12);padding:5px 11px;border-radius:30px;box-shadow:0 4px 12px rgba(243,156,18,.35)}
/* 事例なし時 */
.case-empty{grid-column:1/-1;text-align:center;color:var(--text-soft);padding:40px 0}
/* --- 詳細ページ：チップ列 --- */
.case-detail__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip--area{color:#fff;background:rgba(30,51,96,.78)}
.chip--new{color:#fff;background:var(--orange,#F39C12);font-family:var(--en);font-weight:700;letter-spacing:.06em}
/* --- 詳細ページ：写真3枚 --- */
.case-detail__photos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px}
.case-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-blue);box-shadow:var(--shadow-sm)}
/* v1.2.17: v1.2.9で付与したheight属性がaspect-ratioを打ち消していたため、height:autoを明示して
「どんな縦横比の写真でも4:3に自動トリミングで揃う」挙動を復旧 */
.case-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* --- 詳細ページ：本文＋企業情報の2カラム --- */
.case-detail__layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.case-detail__main{min-width:0}
.case-detail__info{background:var(--bg-blue);border-radius:var(--radius-lg);padding:28px 26px;position:sticky;top:100px}
.case-info__title{font-size:15px;font-weight:700;color:var(--navy-deep);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.case-info__list{display:flex;flex-direction:column;gap:16px}
.case-info__row dt{font-size:11.5px;color:var(--blue-light,#4A6FA5);font-weight:500;margin-bottom:4px;letter-spacing:.04em}
.case-info__row dd{font-size:14px;color:var(--navy-deep);line-height:1.7}
.case-info__row dd a{color:var(--blue);font-weight:500}
/* --- レスポンシブ（スマホは縦積み） --- */
@media(max-width:860px){
.case-detail__layout{grid-template-columns:1fr;gap:32px}
.case-detail__info{position:static}
.case-detail__photos{grid-template-columns:1fr;gap:14px}
}
/* =========================================================
Contact Form 7 を車楽デザインに馴染ませる調整
========================================================= */
/* CF7の入力欄を既存の .field input と同じ見た目に */
.field .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance){
width:100%;font-family:var(--jp);font-size:15px;color:var(--navy-deep);
background:#fff;border:1px solid var(--line);border-radius:8px;
padding:13px 15px;line-height:1.7;transition:border-color .2s,box-shadow .2s;
}
.field .wpcf7-form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,89,152,.12)}
.field textarea.wpcf7-form-control{resize:vertical;min-height:130px;line-height:1.8}
/* 同意チェック */
.consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-soft);line-height:1.7;cursor:pointer}
.consent .wpcf7-list-item{margin:0}
.consent .wpcf7-list-item-label{display:none} /* ラベル文言はlabel側に書くので重複を隠す */
/* CF7のバリデーションメッセージ */
.wpcf7-not-valid-tip{font-size:12px;color:#C0563E;margin-top:6px}
.wpcf7-response-output{font-size:13px;border-radius:8px;margin:18px 0 0;padding:12px 16px}
/* 送信ボタンを全幅に */
.field-input{}
.btn--block{width:100%;justify-content:center}
/* =========================================================
お知らせ一覧（template-news）追加分
========================================================= */
/* カテゴリ絞り込みチップの並び */
.news-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
/* 一覧ページのリストは上線も付ける（TOPと同じ見た目） */
.news-list--full .news-row:first-child{border-top:1px solid var(--line)}
/* =========================================================================
v1.2.0 追加：プラン別 全機能比較表（アコーディオン） .pf-
========================================================================= */
.pf-bar{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;margin:8px 0 16px}
.pf-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--text-soft)}
.pf-legend span{display:inline-flex;align-items:center;gap:6px}
.pf-lg{font-weight:700;width:18px;text-align:center}
.pf-lg-o{color:var(--accent-deep)} .pf-lg-x{color:#c2cbd8} .pf-lg-opt{color:var(--blue)}
.pf-toggle{font-family:var(--jp);font-weight:700;font-size:13px;color:var(--navy-deep);background:var(--white);border:1.5px solid var(--line);border-radius:9px;padding:9px 18px;cursor:pointer;transition:.2s}
.pf-toggle:hover{border-color:var(--navy-deep)}
.pf-acc{display:flex;flex-direction:column;gap:10px}
.pf-cat{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.pf-sum{display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;list-style:none;user-select:none;transition:background .2s}
.pf-sum::-webkit-details-marker{display:none}
.pf-sum:hover{background:#fafbfd}
.pf-name{font-weight:700;font-size:16px;color:var(--navy-deep)}
.pf-tag{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.pf-tag--all{background:#e8f5ee;color:#1d9e75}
.pf-tag--p{background:var(--accent-soft);color:var(--accent-deep)}
.pf-tag--s{background:#eef3fc;color:var(--blue)}
.pf-tag--part{background:#f3f4f7;color:var(--text-soft)}
.pf-cnt{margin-left:auto;font-size:12px;color:var(--text-soft)}
.pf-chev{width:11px;height:11px;border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft);transform:rotate(45deg);transition:transform .25s;flex-shrink:0}
.pf-cat[open] .pf-chev{transform:rotate(-135deg)}
.pf-thead{display:grid;grid-template-columns:1.9fr .8fr .8fr .8fr;background:var(--navy-deep);color:#fff}
.pf-th{padding:10px 16px;text-align:center;font-size:12px;font-weight:700;display:flex;flex-direction:column;justify-content:center}
.pf-th--cat{text-align:left;font-family:var(--en);letter-spacing:.08em;color:#cfe0ff}
.pf-th .pe{font-family:var(--en);font-weight:500;font-size:9.5px;letter-spacing:.1em;color:#9fb4d6}
.pf-th--p{background:rgba(221,76,117,.25)}
.pf-row{display:grid;grid-template-columns:1.9fr .8fr .8fr .8fr;border-top:1px solid var(--line)}
.pf-row:hover{background:#fafbfd}
.pf-fn{padding:11px 16px;font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:7px}
.pf-note{font-size:10.5px;color:var(--text-soft)}
.pf-fm{padding:11px 8px;text-align:center;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line)}
.pf-fm--p{background:rgba(251,234,240,.45)}
.pf-o{color:var(--accent-deep);font-size:17px;font-weight:700;line-height:1}
.pf-x{color:#cdd5e1;font-size:14px}
.pf-opt{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--bg-blue);color:var(--blue);font-size:13px}
.pf-sp{display:none}
@media(max-width:680px){
.pf-cnt{display:none}
.pf-thead{display:none}
.pf-row{grid-template-columns:1fr;padding:13px 16px;gap:8px}
.pf-fn{padding:0;font-weight:700;font-size:14px;color:var(--navy-deep)}
.pf-fm{border-left:none;padding:0;background:none!important;max-width:220px}
.pf-sp{display:inline;font-size:12px;font-weight:500;color:var(--text-soft)}
.pf-cell{display:flex;align-items:center;justify-content:space-between;width:100%}
.pf-sum{gap:10px;padding:15px 16px;flex-wrap:nowrap}
.pf-name{font-size:15px;flex-shrink:0}
.pf-tag{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pf-chev{margin-left:auto;flex-shrink:0}
}
/* ===== v1.2.21: 資料ダウンロード(CF7実装)対応 ===== */
/* 資料カードの補足ラベル */
.dl-card__note{display:inline-block;font-size:11.5px;color:var(--blue);background:var(--bg-blue);padding:5px 12px;border-radius:30px;letter-spacing:.02em}
/* 任意バッジ(必須.reqの対) */
.field__label .opt{font-size:10px;font-weight:700;color:var(--text-soft);background:var(--bg-blue);padding:2px 8px;border-radius:4px;letter-spacing:.06em}
/* 姓・名の2カラム */
.name-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* CF7のコントロールラッパー(spanのままだと幅が効かないためブロック化) */
.form-card .wpcf7-form-control-wrap{display:block}
/* 目的チェックボックス(6択)を縦に並べる */
.form-card .wpcf7-checkbox{display:flex;flex-direction:column;gap:9px}
.form-card .wpcf7-checkbox .wpcf7-list-item{margin:0;display:flex}
.form-card .wpcf7-checkbox .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text);line-height:1.6;cursor:pointer}
.form-card .wpcf7-checkbox input{width:auto;margin-top:3px;accent-color:var(--blue)}
/* 同意チェック(既存.consentの見た目に揃える) */
.form-card .wpcf7-acceptance .wpcf7-list-item{margin:0}
.form-card .wpcf7-acceptance .wpcf7-list-item label{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--text-soft);line-height:1.7;cursor:pointer}
.form-card .wpcf7-acceptance input{width:auto;margin-top:4px;accent-color:var(--blue)}
.form-card .wpcf7-acceptance a{color:var(--blue);font-weight:700;text-decoration:underline}
/* バリデーションエラー(CF7標準クラス) */
.form-card .wpcf7-not-valid{border-color:#C0563E;box-shadow:0 0 0 3px rgba(192,86,62,.1)}
.form-card .wpcf7-not-valid-tip{display:block;font-size:12px;color:#C0563E;margin-top:7px}
/* 送信結果メッセージ */
.form-card .wpcf7-response-output{margin:18px 0 0;padding:14px 18px;border-radius:10px;font-size:13.5px;line-height:1.7;border:1px solid var(--line)}
.form-card .wpcf7 form.sent .wpcf7-response-output{background:#F0F7F1;border-color:#BCd9C2;color:#2E6B3E}
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output{background:#FBF1EE;border-color:#E4C0B5;color:#9C4632}
/* 送信中スピナー */
.form-card .wpcf7-spinner{margin:10px auto 0;display:block}
/* ===== v1.2.22: 資料ダウンロード 左カラム(サンプル画像+資料説明) ===== */
.dl-sample{margin:0 0 26px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.dl-sample img{display:block;width:100%;height:auto}
.dl-info__title{font-size:16px;font-weight:700;color:var(--navy-deep);margin-bottom:14px}
.dl-points{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.dl-points li{position:relative;padding-left:28px;font-size:14px;color:var(--text);line-height:1.7}
.dl-points li::before{content:"";position:absolute;left:0;top:4px;width:17px;height:17px;border-radius:50%;background-color:var(--blue);background-image:url('data:image/svg+xml,');background-size:62%;background-position:center;background-repeat:no-repeat}
.dl-about{background:var(--bg-blue);border-radius:var(--radius-lg);padding:22px 24px}
.dl-about .dl-info__title{margin-bottom:10px;font-size:14.5px}
.dl-about__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.dl-about__list li{position:relative;padding-left:16px;font-size:13px;color:var(--text-soft);line-height:1.7}
.dl-about__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
/* v1.2.31: 機能カードのヘッダーにプランタグを併記（3要素になるため折り返し許容） */
.func-cat__t{flex-wrap:wrap}
.func-cat__t .pf-tag{font-size:10.5px;padding:3px 9px;font-weight:700}
.func-cat__t>span:first-child{flex:1 1 auto;min-width:0}
/* ===== v1.2.34: 倉庫管理ページ ===== */
/* こんな方におすすめ */
/* v1.2.35: 4項目を横一列に固定(タブレット2列・スマホ1列) */
.wh-rec{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1080px;align-items:stretch}
.wh-rec li{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:52px 20px 22px;position:relative;font-size:13.5px;font-weight:700;color:var(--navy-deep);line-height:1.75;box-shadow:var(--shadow-sm)}
.wh-rec li::before{content:"";position:absolute;left:20px;top:20px;width:22px;height:22px;border-radius:50%;background-color:var(--blue);background-image:url('data:image/svg+xml,');background-size:62%;background-position:center;background-repeat:no-repeat}
/* 業務効率アップのポイント */
.wh-points{list-style:none;padding:0;margin:0 auto;max-width:960px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.wh-points li{position:relative;padding-left:26px;font-size:14px;color:var(--text);line-height:1.8}
.wh-points li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.wh-points li.is-opt::before{background:var(--accent-hover)}
.wh-points .opt-mark{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);padding:2px 8px;border-radius:20px;vertical-align:2px}
/* クラウド化のメリット */
.wh-merits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1000px;margin-inline:auto}
.wh-merit{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.wh-merit h3{font-size:15px;font-weight:700;color:var(--navy-deep);margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.wh-merit p{font-size:13.5px;color:var(--text-soft);line-height:1.85}
@media (max-width:900px){ .wh-rec{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .wh-rec{grid-template-columns:1fr} .wh-rec li{padding:20px 20px 20px 52px} .wh-rec li::before{top:22px;left:18px;width:19px;height:19px} }
/* 動作環境 */
.wh-env{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.wh-env th,.wh-env td{padding:14px 18px;font-size:13.5px;text-align:left;border-bottom:1px solid var(--line-soft);line-height:1.7}
.wh-env tr:last-child th,.wh-env tr:last-child td{border-bottom:0}
.wh-env th{width:32%;background:var(--bg-blue);color:var(--navy-deep);font-weight:700;white-space:nowrap}
.wh-env td{color:var(--text)}
@media (max-width:600px){
.wh-env th,.wh-env td{display:block;width:auto}
.wh-env th{border-bottom:0;padding-bottom:6px}
.wh-env td{padding-top:0}
}
/* =========================================================================
* v1.2.42 倉庫管理・陸送版ページに製品色をポイントで入れる
* TOP「3つの入口」の色（倉庫＝グリーン／陸送＝オレンジ）と、飛んだ先のページの色をつなげる。
* ・ページの目印は body のクラス（is-warehouse／is-rikuso。functions.php の syaraku_body_class が付与）
* ・色を入れるのは3か所だけ：見出しの強調語／画面カードの番号の丸／機能一覧の件数バッジ
* ・紺のヒーロー・相談ボタンの赤・セクション背景は変えない（サイト全体の統一感を保つ）
* ・機能一覧の件数バッジは「機能一覧」ページでも使っているが、下の指定は倉庫・陸送ページだけに効く
* ・陸送のオレンジは TOP と同じ見本の色（白文字コントラスト 2.94。判断：くみこさん）
* ========================================================================= */
.is-warehouse{--c-page:var(--c-wh)}
.is-rikuso{--c-page:var(--c-riku)}
.is-warehouse .accent-blue,.is-rikuso .accent-blue{color:var(--c-page)} /* 1. 見出しの強調語 */
.is-warehouse .shot-num,.is-rikuso .shot-num{background:var(--c-page)} /* 2. 画面カードの番号の丸 */
.is-warehouse .func-cat__t .num,.is-rikuso .func-cat__t .num{background:var(--c-page)} /* 3. 機能一覧の件数バッジ */
/* =========================================================================
* v1.2.45 運送系ページ（機能紹介／プラン別 機能一覧／エアレポ連携／実運送体制管理簿）の目印
* ヒーローの英字アイブロウの上に「車楽クラウド（運送）」のラベルを置き、どの製品のページかをひと目で示す。
* 色は TOP「3つの入口」の運送カードと同じブルー（--c-unso・白文字コントラスト 5.29）
* ========================================================================= */
.prod-badge{display:flex;width:fit-content;align-items:center;gap:6px;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;color:#fff;border-radius:30px;padding:6px 12px 6px 10px}
.prod-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}
.prod-badge--unso{background:var(--c-unso)}
/* =========================================================================
* v1.2.47 スマホの拡大表示（ライトボックス）を「本当に拡大される」作りに
* 従来は画像を画面サイズに縮めて表示していたため、横長の図（流れ図・概要イラスト）はスマホで
* ページ上より小さくなっていた（390px幅で 342px → 295px）。
* 768px以下では、画像を実寸（最大1000px）で表示し、指で上下左右にスクロールして見られるようにする。
* ・対象：data-zoom の全画像（流れ図・概要イラスト・倉庫／陸送／機能紹介の画面画像など）
* ・PC（769px以上）の見え方は従来どおり
* ========================================================================= */
@media(max-width:768px){
.lightbox{overflow:auto;-webkit-overflow-scrolling:touch;align-items:flex-start;justify-content:flex-start;padding:64px 16px 48px}
.lightbox img{max-width:none;max-height:none;width:auto;max-width:1000px;margin:auto 0}
.lightbox__close{position:fixed;top:12px;right:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:28px;z-index:2}
.lightbox::after{content:"指で上下左右にスクロールできます";position:fixed;left:0;right:0;bottom:14px;text-align:center;color:rgba(255,255,255,.75);font-size:12px;letter-spacing:.04em;pointer-events:none}
}
/* =========================================================================
* v1.2.48→v1.2.49 製品ラインナップのアイコン
* ピンクのグラデーション＋光沢 → 白地＋紺の丸い枠＋紺のアイコン（白抜き）。全部紺で統一（くみこさん指定）
* ※製品データの 'tone'（色分け用）は残しているが、現在は色に使っていない
* ========================================================================= */
.prod-card__media--icon{background:#fff;border-radius:50%;box-shadow:inset 0 0 0 2px var(--navy-deep)}
.prod-card__media--icon::after{display:none} /* 光沢を外す */
.prod-card__media--icon svg{stroke:var(--navy-deep);stroke-width:1.8;width:44%;height:44%}
/* =========================================================================
* v1.2.48 製品ラインナップ「その他のサービス」：ホームページ制作
* ・アイコンは製品カードと同じ白抜きの紺の丸（v1.2.49）
* ・「事例多数！」はサイトの NEW と同じアクセントの赤
* ・制作事例：PC 4列／タブレット 2列／スマホ 2列。画像が未設定なら社名だけのカード
* ========================================================================= */
.other-svc{padding-top:0}
.other-svc .heading{margin-bottom:24px}
.hp-svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:32px}
.hp-svc__head{display:flex;align-items:flex-start;gap:24px}
.hp-svc__ic{flex-shrink:0;width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--navy-deep);color:var(--navy-deep);display:grid;place-items:center} /* v1.2.49: 製品アイコンと同じ白抜きの丸 */
.hp-svc__ic svg{stroke-width:1.8}
.hp-svc__ic svg{width:46%;height:46%}
.hp-svc__txt{flex:1;min-width:0}
.hp-svc__tags{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hp-svc__tags .prod-card__tag{margin-bottom:0}
.hp-svc__badge{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:30px;padding:3px 12px;letter-spacing:.04em}
.hp-svc h3{font-size:19px;font-weight:700;color:var(--navy-deep);margin-bottom:8px}
.hp-svc__txt p{font-size:14px;color:var(--text-soft);line-height:1.85;text-wrap:balance;word-break:auto-phrase} /* 各行の長さをそろえ（balance）、日本語を文節で改行（auto-phrase。未対応ブラウザは通常の改行） */
.hp-svc__btn{flex-shrink:0;align-self:center}
/* v1.2.51: ボタン＋注記のまとまり。注記の幅はボタンの幅にそろえる */
.hp-svc__cta{flex-shrink:0;align-self:center;display:flex;flex-direction:column;align-items:stretch;max-width:320px}
.hp-svc__cta .hp-svc__btn{align-self:stretch;justify-content:center}
.hp-svc__note{margin-top:8px;font-size:11.5px;line-height:1.6;color:var(--text-soft);text-wrap:balance;word-break:auto-phrase}
.hp-svc__lbl{display:flex;align-items:center;gap:10px;margin:28px 0 14px;font-size:12px;font-weight:700;color:var(--navy-deep)}
.hp-svc__lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.hp-cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} /* minmax(0,1fr)：長い社名でも列からはみ出さない */
.hp-case__link{display:block;color:inherit}
.hp-case__thumb{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--bg-blue)}
.hp-case__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--ease)}
.hp-case__link:hover .hp-case__thumb img{transform:scale(1.04)}
.hp-case__thumb--empty{display:grid;place-items:center;padding:12px}
.hp-case__ph{display:grid;place-items:center;width:44px;height:44px;color:color-mix(in srgb,var(--blue) 55%,#fff)}
.hp-case__ph svg{width:100%;height:100%}
.hp-case__name{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-top:10px;font-size:13px;font-weight:700;line-height:1.55;color:var(--navy-deep)}
.hp-case__co{word-break:auto-phrase} /* v1.2.49: 長い正式社名を文節で改行（「株式会｜社」のような切れ方を防ぐ） */
.hp-case__sama{white-space:nowrap}
.hp-case__ext{font-size:12px;color:var(--blue)}
.hp-case__link:hover .hp-case__name{color:var(--blue)}
@media(max-width:900px){
.hp-svc__head{flex-wrap:wrap}
.hp-svc__btn{width:100%;justify-content:center;order:3}
.hp-svc__cta{width:100%;max-width:none;order:3}
.hp-svc__cta .hp-svc__btn{order:0;width:100%} /* v1.2.51: まとまりの中ではボタン→注記の順（上の order:3 がボタンに効いて注記が上に来ていたため） */
.hp-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.hp-svc{padding:22px}
.hp-svc__head{gap:16px}
.hp-svc__ic{width:56px;height:56px}
.hp-cases{gap:14px}
}
/* v1.2.49: 見出しの文節改行（.nobr は home.css と同じ定義。製品ラインナップページ用） */
.hp-svc h3 .nobr{display:inline-block}
/* v1.2.49: 小さいスマホでは、アイコンを文字の上に置いて見出し・説明の幅を確保（360px以下で見出しが途中で切れ、320pxで横スクロールが出ていたため） */
@media(max-width:560px){
.hp-svc__txt{flex-basis:100%}
.hp-svc h3{font-size:17px}
.hp-svc h3 .nobr{max-width:100%}
}
/* v1.2.49: 440px以下（ほぼ全てのスマホ）は制作事例を1列に。
「香川矢崎サービス株式会社」は文節で区切れない1かたまり（幅160px）で、2列で1行に収まるのは画面幅430px以上（実測）。余裕を見て440px以下を1列に。
さらに長い社名が入力されても、必要なら文字の途中で改行してはみ出さない */
.hp-case__co{overflow-wrap:anywhere}
@media(max-width:440px){.hp-cases{grid-template-columns:minmax(0,1fr)}}
/* v1.2.50: 外部サイトへのボタンの ↗ 印（.sr-only は css/home.css で定義済み。home.css は全ページで読み込み） */
.hp-svc__ext{margin-left:6px;font-size:15px;line-height:1;transition:transform .25s var(--ease)}
.hp-svc__btn:hover .hp-svc__ext{transform:translate(2px,-2px)}
/* v1.2.51: 小さいスマホ（400px以下）ではボタンの文字を文節で2行に折り返す（360px以下で「ホームページ制作のご相談はこちら↗」がはみ出したため） */
/* ボタンの文字と矢印をひとまとまり（.hp-svc__btn-t）にし、折り返すなら「ホームページ制作の｜ご相談はこちら↗」の位置だけで切れるようにする
（.hp-svc__nw の中は改行しない＝矢印だけが次の行に落ちない） */
.hp-svc__nw{white-space:nowrap}
.hp-svc__nw .arw{margin-left:6px}
@media(max-width:400px){
.hp-svc__btn{white-space:normal;line-height:1.5;padding-top:12px;padding-bottom:12px}
.hp-svc__btn-t{display:block;text-align:center}
}
/* =========================================================================
* v1.2.63 サンクスページ（template-thanks.php）
* ========================================================================= */
.thanks-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:44px 48px;text-align:center}
.thanks-card__body p{font-size:15px;line-height:1.9;color:var(--text);margin:0 0 6px}
.thanks-card__body{word-break:auto-phrase;text-wrap:balance} /* 文節で改行し、行の長さをそろえる */
.thanks-tel{margin:28px auto 0;padding:20px 24px;background:var(--bg-blue);border-radius:var(--radius-lg);max-width:420px}
.thanks-tel__label{font-size:13px;font-weight:700;color:var(--navy-deep);margin:0 0 4px}
.thanks-tel__num{font-size:28px;font-weight:500;color:var(--navy-deep);letter-spacing:.02em;margin:0}
.thanks-tel__note{font-size:12px;color:var(--text-soft);margin:4px 0 0}
.thanks-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
@media(max-width:560px){
.thanks-card{padding:30px 20px}
.thanks-btns .btn{width:100%;justify-content:center}
}
/* v1.2.66: 倉庫管理の特長リスト（wh-points）が、1列の最小幅320pxのため320px幅のスマホで24pxはみ出していた。
最小幅を「320px か 横幅いっぱい の小さい方」にして、どの画面でも収まるように */
.wh-points{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}