/* WordPress 版で中身が変わる所の見た目（静的版の CSS に足す分だけ） */

/* 実績の画像（静的版は CSS で描いた絵・本番はスクリーンショット） */
.wimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* 10/29 樋口さん「実績の一覧と詳細の画像が、元の比率のままになっていない」：枠を 2:1・16:9 に固定して切っていたのをやめ、画像の比率のまま全体を出す */
.wk-th{aspect-ratio:auto!important;height:auto!important}
.wk-th .wk-sc{position:relative;inset:auto}
.wk-th .wimg{position:relative;inset:auto;height:auto;object-fit:initial}
.wk-th .wimg--none{aspect-ratio:16/9;height:auto}
.wimg--none{display:grid;place-items:center;background:linear-gradient(135deg,#f3f4f8,#e6e9f1)}
.wimg--none img{position:static;width:22%;height:auto;opacity:.5}
.wk-th .wimg{transition:scale .5s}
.wk-item:hover .wk-th .wimg{scale:1.04}

/* 取引先のロゴの帯
   10/28 樋口さん「白い札は要らない」→ 2回目「帯の背景は全体を白に・1枠の横幅は同じにして見栄えよく」：
   PCは帯を白にして、どのロゴも同じ幅の枠の真ん中に、幅140px×高さ48pxに収まる大きさで置く（横長も正方形も見た目の大きさがそろう）。ロゴの画像は余白を切り詰めてある */
#rv .rv-cl{background:#fff;box-shadow:inset 0 1px 0 #f2c3cf}
#rv .rv-cl__list li{width:200px;height:100%;padding:0;margin-right:0;border-radius:0;background:none;box-shadow:none}
#rv .rv-cl__list li img{display:block;width:auto;height:auto;max-width:140px;max-height:48px;object-fit:contain}
.rsv-cl-list li{width:auto;height:100%;padding:0 16px;margin-right:0;border-radius:0;background:none;box-shadow:none}
.rsv-cl-list li img{display:block;width:auto;height:28px;max-width:110px;object-fit:contain}

/* 業務提携のロゴ（10/28 樋口さん「KAMERADのロゴが見切れる・正方形にしなくても全部見えるように」：PCは高さだけそろえ、横長のロゴは横に広げる） */
.al-logo.has-img,.waa-logo.has-img{background:#fff;box-shadow:inset 0 0 0 1px #e3e5ec;overflow:hidden}
.al-logo.has-img{width:auto;min-width:92px;max-width:200px;padding:12px 14px}
.al-logo.has-img img{display:block;width:auto;height:auto;max-width:172px;max-height:68px;object-fit:contain}
.waa-logo{width:48px;height:48px}
.waa-card:has(.waa-logo.has-img){grid-template-columns:auto 1fr}
.waa-logo.has-img{width:auto;min-width:48px;max-width:104px;padding:6px 8px}
.waa-logo.has-img img{display:block;width:auto;height:auto;max-width:88px;max-height:36px;object-fit:contain}
/* 公式ページのボタン */
.al-link,.waa-link{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--c,#1b1e4b);color:#1b1e4b;font-weight:900;letter-spacing:.04em;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.al-link{margin-top:14px;padding:8px 18px;font-size:15px}
.waa-link{grid-column:1/-1;justify-self:start;margin-top:4px;padding:6px 14px;font-size:12px}
.al-link svg{width:14px;height:14px}.waa-link svg{width:12px;height:12px}
.al-link:hover,.waa-link:hover{background:#1b1e4b;color:#fff;box-shadow:inset 0 0 0 2px #1b1e4b}
.al-link:focus-visible,.waa-link:focus-visible{outline:3px solid #f4d32a;outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.al-logo.no-img,.waa-logo.no-img{background:var(--c,#1b1e4b);color:#fff;font:800 24px Outfit,"Noto Sans JP",sans-serif;letter-spacing:0}
.waa-logo.no-img{font-size:20px}

/* 実績の詳細 */
.wd-ph.has-img{border:0;background:#fff;overflow:hidden;box-shadow:0 0 0 1px #dde1ea}
.wd-ph.has-img img{display:block;width:100%;height:100%;object-fit:contain}
.wd-body{margin-top:40px}
.wd-body p+p{margin-top:1.2em}
.wd-body p{font-size:16px;line-height:2}

/* 記事 */
.nd-body h2{margin:64px 0 20px;padding:0 0 12px;border-bottom:3px solid var(--y,#f4d32a);font-size:24px;font-weight:900;letter-spacing:.03em;line-height:1.5;scroll-margin-top:calc(var(--hd-h,0px) + 24px)}
.nd-body h3{scroll-margin-top:calc(var(--hd-h,0px) + 24px)}
.nd-body > :first-child{margin-top:0}
.nd-body img{max-width:100%;height:auto;border-radius:12px}
.nd-body ul,.nd-body ol{margin:1.2em 0;padding-left:1.4em}
.nd-body table{width:100%;border-collapse:collapse;margin:1.6em 0}
.nd-body th,.nd-body td{border:1px solid #dde1ea;padding:10px 14px;text-align:left;font-size:15px}
.nc-eye img{display:block;width:100%;height:auto;border-radius:20px}
.nc-by .av{overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #e3e5ec}
.nc-by .av img{width:62%;height:auto}
.nc-by .av.is-photo img{width:100%;height:100%;object-fit:cover}
.nc-by-role{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:1.8;color:var(--sub,#5b5e78)}   /* 10/29 紹介文（1行）。前は肩書きの小さな太字 */
.nc-toc li.lv3,.nc-tocbox li.lv3{padding-left:1em;font-size:.94em}
.nc-pn .nx{display:flex;align-items:center;gap:10px}

/* 汎用の固定ページ（プライバシーポリシーなど） */
.plain .nd-body{max-width:860px;margin:0 auto}
.plain .nd-body p,.plain .nd-body li{font-size:16px;line-height:2}
.plain .nd-body h2:first-child,.plain .nd-body h3:first-child{margin-top:0}

/* お問い合わせ（Contact Form 7） */
.ct-cf7 .wpcf7-form-control-wrap{display:block}
.ct-cf7 .ct-rd .wpcf7-form-control{display:flex;flex-wrap:wrap;gap:12px}
.ct-cf7 .wpcf7-list-item{margin:0}
.ct-cf7 .ct-rd .wpcf7-list-item label{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 28px 0 20px;border:2px solid #d9dce6;border-radius:999px;background:#fff;cursor:pointer;font-size:16px;font-weight:700;transition:border-color .2s,background .2s}
.ct-cf7 .ct-rd .wpcf7-list-item label:has(input:checked){border-color:var(--navy,#1b1e4b);background:#f1f2f8}
.ct-cf7 .ct-ck .wpcf7-list-item label{display:inline-flex;align-items:center;gap:14px;min-height:56px;cursor:pointer;font-size:16px;font-weight:700}
.ct-cf7 .ct-ck .wpcf7-list-item-label a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-cf7 .wpcf7-not-valid-tip{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--r,#e60039)}
.ct-cf7 .wpcf7-not-valid{border-color:var(--r,#e60039);background:#fff6f8}
.ct-cf7 .wpcf7-response-output{margin:24px 0 0!important;padding:16px 20px!important;border-radius:12px;border-width:2px!important;font-size:15px;font-weight:700;text-align:center}
.ct-cf7 .wpcf7-spinner{display:none}
.ct-cf7.submitting .ct-send{opacity:.6;pointer-events:none}
.ct-nf{padding:40px 0;text-align:center;font-weight:700}
@media (max-width:820px){
.ct-cf7 .ct-rd .wpcf7-list-item{flex:1 1 100%}
.ct-cf7 .ct-rd .wpcf7-list-item label{display:flex;min-height:56px}
}
.ct-cf7 .wpcf7-not-valid ~ * ,.ct-f:has(.wpcf7-not-valid) .ct-rd .wpcf7-list-item label{border-color:#f3b3c4}

/* 10/28 チャット画面を見出しの裏まで伸ばしたので、見出しはクリックを素通しする（低い画面でトーク一覧の1件目が押せなくなるのを防ぐ） */
#rv .hd{pointer-events:none}

/* 10/28 樋口さん「プライバシーポリシーのページをきちんと整えて・黄色い線は合わないので細めに」：固定ページの本文（.plain）
   バナーとの間をあけ、見出しの下の線は細い灰色にする（コラムの記事は黄色の線のまま） */
.sec-b.nt.plain{padding-top:80px!important;padding-bottom:110px}
.plain .nd-body{max-width:860px;margin:0 auto}
.plain .nd-body h2{margin:56px 0 18px;padding:0 0 12px;border-bottom:1px solid #dfe2ea;font-size:22px}
.plain .nd-body > h2:first-child{margin-top:0}
.plain .nd-body p,.plain .nd-body li{font-size:16px;line-height:2}
.plain .nd-body ul{margin:.6em 0 1em}
.plain .nd-body a{color:#1b1e4b;text-decoration:underline;text-underline-offset:3px}
.plain .nd-body p:empty{display:none}
.plain .nd-body p+p,.plain .nd-body ul+p{margin-top:1em}
@media (max-width:820px){.sec-b.nt.plain{padding-top:44px!important;padding-bottom:72px}.plain .nd-body h2{margin-top:40px;font-size:19px}.plain .nd-body p,.plain .nd-body li{font-size:15px}}

/* 10/28 樋口さん「配下ページの色つきバナーの文字は白でいい」：明るい色のバナー（実績・サービス・採用・コラム）も文字を白に */
.pt,.pt .crumb,.pt .crumb a,.pt .en,.pt h1,
html[data-band="light"] .pt,html[data-band="light"] .pt .crumb,html[data-band="light"] .pt .crumb a,html[data-band="light"] .cta.cta--a{color:#fff}
html[data-band="light"] .pt h1,html[data-band="light"] .pt .en{text-shadow:0 2px 0 rgba(27,30,75,.16)}

/* 10/28 樋口さん「実績のサムネの下の白い影は要らない・薄くくっきり」：影をやめて、細い線で縁取る */
.wk-th{box-shadow:none!important}
.wk-th .wimg{z-index:0}
.wk-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(27,30,75,.12);pointer-events:none;z-index:1}

/* 10/29 樋口さん「プライバシーポリシー・利用規約・会社概要の下の「お問い合わせはこちら」の文字は、赤ではなくサイトの紺に」（白いボタンのページ。明るい帯のページの紺のボタンはそのまま） */
.cta--a .btn{color:#1b1e4b}

/* 10/29 表示速度：画面の外のセクションは、画面に近づくまで組み立てと描画を後回しにする（見た目・動きは同じ。最初の画面はそのまま）
   PC の右のページ送りで全セクションの頭に着地すること、スマホで全セクションが出ることを確かめた
   サービス欄（#service）は、スマホの詳細のシート（画面に固定）を持つので外す（この指定があると、固定の基準が画面でなくセクションになる。Codex 指摘） */
.sec:not(.fv):not(#service){content-visibility:auto;contain-intrinsic-size:auto 900px}