/* kamui tracker (PoC) 補助CSS トップFVパターン（className駆動）のスタイル。色・値は theme.json の CSS変数を参照。 ブロックには className だけ付け、見た目はここで当てる（バリデーション崩れ回避）。 */ /* ---- セクション枠 ---- */ .kt-fv{ background:var(--wp--preset--color--bg); padding:var(--wp--preset--spacing--section-y) 0; } .kt-fv__inner{ max-width:1200px;margin:0 auto;padding:0 var(--wp--preset--spacing--pad-x); display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center; } @media (max-width:781px){ .kt-fv__inner{grid-template-columns:1fr;} } /* ---- eyebrow ---- */ .kt-eyebrow{ font-family:var(--wp--preset--font-family--display); font-weight:800;font-size:13px;letter-spacing:0.16em;text-transform:uppercase; color:var(--wp--preset--color--tracker-ink,#CE4234); /* カンプ: 全ページ共通でコーラル文字＋ドット */ display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 18px;align-items:center; } .kt-eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wp--preset--color--tracker);margin-right:-4px;} /* ---- リード ---- */ .kt-lead{ color:var(--wp--preset--color--ink-2); font-size:var(--wp--preset--font-size--lead); max-width:40em;margin:18px 0 0; } /* ---- CTA ---- */ .kt-cta{margin-top:28px;gap:14px;} /* primary は theme.json の button 既定（コーラル/pill）を継承。影だけ足す */ .kt-btn-primary .wp-block-button__link{ box-shadow:var(--wp--custom--shadow--cta); transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease); } .kt-btn-primary .wp-block-button__link:hover{ transform:translateY(-3px);box-shadow:var(--wp--custom--shadow--cta-hover); } /* outline は白地＋枠線に上書き */ .kt-btn-outline .wp-block-button__link{ background:var(--wp--preset--color--bg); color:var(--wp--preset--color--ink); border:1.5px solid var(--wp--custom--line-2); transition:transform .3s var(--wp--custom--ease),background-color .25s,color .25s; } .kt-btn-outline .wp-block-button__link:hover{ transform:translateY(-3px); background:var(--wp--preset--color--ink);color:var(--wp--preset--color--bg); } /* ---- 実績スタット ---- */ .kt-stats{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px);margin-top:clamp(38px,5vw,56px);margin-bottom:clamp(32px,5vw,48px);} /* 5-1 */ .kt-stat{position:relative;flex:1 1 200px;background:#fff;border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:20px 24px;overflow:hidden;text-align:center;} /* ===== H-3(2026-08-04): 事例詳細の全幅オーバービュー（B案: wrap1072直下に stat-bar + grid-2） ===== */ .kt-sec.kt-sec--ov{background:var(--wp--preset--color--bg);padding:0 0 clamp(8px,1.5vw,16px);} /* 縞背景の自動適用を無効化・ヒーロー直下に詰める */ .kt-caseov{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);align-items:stretch;} .kt-caseov > .kt-stats{grid-column:1/-1;} /* 数値タイルは全幅1行（3列×約343px） */ .kt-caseov > .kt-card,.kt-caseov > .kt-softpanel{margin:0;} @media(max-width:960px){.kt-caseov{grid-template-columns:1fr;}} /* 移設後のカード体裁（記事内スコープの規則から引き継ぎ）: B案 .card.soft */ .kt-caseov .kt-card{background:var(--wp--preset--color--bg-off);border-color:transparent;padding:clamp(20px,2.2vw,28px);} .kt-caseov .kt-card > h3{font-size:24px;font-weight:800;line-height:1.3;} .kt-caseov .kt-card p{font-size:14.5px;line-height:1.8;} .kt-caseov .kt-card p.kt-eyebrow,.kt-caseov .kt-softpanel p.kt-eyebrow{font-size:13px;} .kt-caseov .kt-stats{margin-top:0;margin-bottom:clamp(10px,1.5vw,14px);} /* セクション内では上下余白を圧縮 */ /* H-2(2026-08-04): 事例末尾の一覧導線（B案: バンド下の白ピルボタン） */ .kt-backlist-wrap{text-align:center;margin-top:26px;} .kt-backlist{display:inline-flex;align-items:center;gap:9px;background:var(--wp--preset--color--bg);color:var(--wp--preset--color--ink);border:1.5px solid var(--wp--custom--line-2);border-radius:999px;padding:13px 26px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:15px;line-height:1;text-decoration:none;transition:transform .3s cubic-bezier(0.16,1,0.3,1),background-color .25s,color .25s,border-color .25s;} .kt-backlist:hover{transform:translateY(-3px);background:var(--wp--preset--color--ink);color:var(--wp--preset--color--bg);border-color:var(--wp--preset--color--ink);} /* Part B(2026-08-04): 事例詳細の数値タイルを3列で維持する。 content-boxでは200px+padding48+border3=251px実効となり本文カラム701pxに3枚が収まらず折返すため。 min-width:0はコンテナが本文カラム(701px)の前提（B案の200pxはコンテナ1072px前提） */ .kt-stats > .kt-stat{box-sizing:border-box;flex:1 1 0%;min-width:200px;} /* Part K: B案.statと同値（border-boxなのでPC701pxでも3列） */ @media (max-width:560px){.kt-stats > .kt-stat{min-width:100%;}} /* SPは1列（B案同値） */ .kt-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;} .kt-stat:nth-child(1)::before{background:var(--wp--preset--color--tracker);} .kt-stat:nth-child(2)::before{background:var(--wp--preset--color--ads);} .kt-stat:nth-child(3)::before{background:var(--wp--preset--color--prod);} .kt-stat__num{color:var(--wp--preset--color--ink);font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;line-height:1;margin:0;} .kt-stat__num small{font-size:.6em;} .kt-stat__label{color:var(--wp--preset--color--ink-2);font-size:13.5px;font-weight:600;margin:9px 0 0;} /* ---- ヒーロー画像枠＋装飾ブロブ ---- */ .kt-fv__media{ position:relative; background:var(--wp--preset--color--bg-off); border-radius:var(--wp--custom--radius--l); min-height:340px; display:flex;align-items:center;justify-content:center; padding:var(--wp--preset--spacing--pad-x); } .kt-fv__media::before{ content:"";position:absolute;right:-8%;top:-12%;width:150px;height:150px; border-radius:50%;background:var(--wp--preset--color--tracker);z-index:0; } .kt-fv__media::after{ content:"";position:absolute;left:-6%;bottom:-8%;width:90px;height:90px; border-radius:50%;background:var(--wp--preset--color--connect);z-index:0; } .kt-hero-ph{ position:relative;z-index:1;margin:0;text-align:center; color:var(--wp--preset--color--ink-2); font-size:var(--wp--preset--font-size--body); } /* ============ ヘッダー ============ */ .kt-header{position:relative;border-bottom:1px solid var(--wp--custom--line);} /* ====== グローバルナビ（ドロップダウン・CSS hover） ====== */ .kt-nav-wrap{display:flex;align-items:center;gap:14px;} .kt-nav{display:flex;align-items:center;} .kt-nav__item{position:relative;} .kt-nav__link{display:inline-flex;align-items:center;gap:5px;padding:10px 12px;font-size:14.5px;font-weight:700;color:var(--wp--preset--color--ink);text-decoration:none;border-radius:10px;transition:background-color .2s;white-space:nowrap;} .kt-nav__link:hover{background:var(--wp--preset--color--bg-off);} .kt-nav__link svg{width:12px;height:12px;transition:transform .2s;} .kt-nav__item:hover .kt-nav__link svg{transform:rotate(180deg);} .kt-dd{position:absolute;top:calc(100% + 6px);left:0;min-width:288px;background:var(--wp--preset--color--bg);border:1px solid var(--wp--custom--line);border-radius:18px;box-shadow:0 22px 50px rgba(26,26,31,0.14);padding:9px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s var(--wp--custom--ease),transform .18s var(--wp--custom--ease),visibility 0s linear .18s;z-index:60;} /* Part F: 影のみB案.ddの規約値へ（トークンは変更しない） */ .kt-nav__item::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px;} .kt-nav__item:hover .kt-dd{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s;} .kt-dd a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:500;color:var(--wp--preset--color--ink);text-decoration:none;transition:background-color .18s,transform .18s;} .kt-dd a:hover{background:var(--wp--preset--color--bg-off);transform:translateX(3px);} .kt-dd__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;} .kt-dd__name{font-weight:700;display:block;line-height:1.3;} .kt-dd__sub{display:block;font-size:11.5px;color:var(--wp--preset--color--ink-2);font-weight:500;margin-top:1px;line-height:1.4;} /* 右側ユーティリティ（無料登録・ログイン） */ .kt-navutil{display:flex;align-items:center;gap:12px;} .kt-navutil__reg{background:var(--wp--preset--color--tracker-ink);color:#fff;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14.5px;line-height:1;padding:10px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:var(--wp--custom--shadow--cta);transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease),background-color .25s,color .25s;} .kt-navutil__reg:hover{transform:translateY(-3px);box-shadow:var(--wp--custom--shadow--cta-hover);} .kt-navutil__login{color:var(--wp--preset--color--ink);font-weight:700;font-size:14px;line-height:1.4;padding:0;border-radius:0;text-decoration:none;white-space:nowrap;} .kt-navutil__login:hover{color:var(--wp--preset--color--tracker-ink);} /* バーガー & モバイルメニュー */ .kt-burger{display:none;width:44px;height:44px;border:1.5px solid var(--wp--custom--line-2);border-radius:12px;background:var(--wp--preset--color--bg);align-items:center;justify-content:center;cursor:pointer;color:var(--wp--preset--color--ink);} .kt-burger svg{width:24px;height:24px;} .kt-mobile{display:none;} @media(max-width:980px){ .kt-nav,.kt-navutil{display:none;} .kt-burger{display:inline-flex;} /* SPメニュー内スクロール対応（2026-08-08 デザイン側指示書）: max-heightもoverflowも無く、 親headerがsticky固定のためビューポート下にはみ出た項目（無料登録/ログイン等）へ永久に到達できなかった。 box-sizing:border-boxは必須（content-boxのままだとpadding分32pxが依然はみ出す・実測済み）。 max-heightの76pxは.kt-headerの高さ（全ページ77pxで一定・実測）。ヘッダー高さを変えたら必ず追従させること */ .kt-mobile.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--wp--preset--color--bg);border-top:1px solid var(--wp--custom--line);box-shadow:var(--wp--custom--shadow--card);padding:8px clamp(20px,5vw,40px) 24px;z-index:90;box-sizing:border-box;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom));} .kt-mobile a{display:block;padding:11px 4px;font-weight:600;color:var(--wp--preset--color--ink);text-decoration:none;border-bottom:1px solid var(--wp--custom--line);} .kt-mobile__head{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--wp--preset--color--ink-2);margin:16px 0 2px;text-transform:uppercase;} .kt-mobile__cta{display:flex;gap:10px;margin-top:18px;} .kt-mobile__cta a{border:none;text-align:center;border-radius:999px;padding:12px;font-weight:700;flex:1;} .kt-mobile__reg{background:var(--wp--preset--color--tracker-ink);color:#fff!important;} .kt-mobile__login{border:1.5px solid var(--wp--custom--line-2)!important;color:var(--wp--preset--color--ink)!important;} } .kt-header__bar{padding:16px 0;align-items:center;} .kt-logo a{color:var(--wp--preset--color--ink);text-decoration:none;font-size:20px;} /* サイトロゴ（画像。サイト基本情報で設定した kamui tracker ロゴを表示） */ .kt-logo.wp-block-site-logo img,.kt-header .wp-block-site-logo img{height:34px;width:auto;display:block;} .kt-logo.wp-block-site-logo,.kt-header .wp-block-site-logo{width:auto!important;line-height:0;} .kt-nav{gap:6px;}/* 旧フラットナビ定義は撤去。ドロップダウン定義（上部）が正 */ .kt-header__cta{align-items:center;gap:8px;} .kt-btn-sm .wp-block-button__link{padding:9px 20px;font-size:14px;} .kt-btn-text .wp-block-button__link{background:transparent;color:var(--wp--preset--color--ink);padding:9px 10px;box-shadow:none;} @media (max-width:900px){.kt-nav{display:none;}} /* ============ 汎用セクション ============ */ .kt-sec{padding:var(--wp--preset--spacing--section-y) 0;} .kt-sec:nth-of-type(even){background:var(--wp--preset--color--bg-off);} .kt-sec__inner{max-width:1200px;margin:0 auto;padding:0 var(--wp--preset--spacing--pad-x);} .kt-sec__inner > h2{margin:6px 0 0;} .kt-mini-label{ font-family:var(--wp--preset--font-family--display);font-weight:700; color:var(--wp--preset--color--ink-2);font-size:14px;margin:36px 0 14px; } /* アイコンタイル */ .kt-ico{ width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center;margin-bottom:14px; background:var(--card-accent,var(--wp--preset--color--tracker));color:#fff; } .kt-ico svg{width:24px;height:24px;} /* データ基盤フィーチャー（コーラル塗り＋装飾円） */ .kt-feature{ position:relative;overflow:hidden; background:var(--wp--preset--color--tracker);color:#fff; border-radius:var(--wp--custom--radius--l); padding:clamp(24px,3vw,44px);margin-top:28px; } .kt-feature::before{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12);} .kt-feature::after{content:"";position:absolute;right:90px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);} .kt-feature > *{position:relative;z-index:1;} .kt-feature .kt-ico{background:rgba(255,255,255,.18);} .kt-feature .kt-mini-label{color:rgba(255,255,255,.9);margin:0 0 4px;} .kt-feature__name{color:#fff;margin:0 0 10px;} .kt-feature p{color:rgba(255,255,255,.92);} .kt-more-light{color:#fff;font-weight:700;font-family:var(--wp--preset--font-family--display);margin:16px 0 0;font-size:14px;} /* 数値ピル */ .kt-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;} .kt-pills > *{margin-top:0;margin-block-start:0;} .kt-pill{background:rgba(255,255,255,.16);border-radius:14px;padding:10px 18px;min-width:96px;} .kt-pill__num{color:#fff;font-family:var(--wp--preset--font-family--display);font-size:22px;margin:0;line-height:1.1;} .kt-pill__label{color:rgba(255,255,255,.9);font-size:12px;margin:2px 0 0;} /* 横並びカードは行内で等高にする（中身の量が違っても高さを揃える） */ /* フロント／エディタ両対応：直下要素（エディタのブロックラッパー含む）とカード自体の両方に height:100% */ .kt-cards,.kt-steps,.kt-plans,.kt-flow{align-items:stretch;} /* 注意: グリッドの子に height:100% を当てると複数行時に行トラック計算が壊れて カードがはみ出す（FAQ導線ボタン被り不具合）。行内等高は grid の stretch で足りるため kt-cards 系は height 指定なし。flex 系（steps/plans/flow）のみ従来通り。 */ .kt-problem{height:100%;} /* サービスカード グリッド */ .kt-cards{display:grid;gap:clamp(14px,2vw,20px);} .kt-cards--4{grid-template-columns:repeat(4,1fr);} @media (max-width:1024px){.kt-cards--4{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.kt-cards--4{grid-template-columns:1fr;}} /* カード（製品色テーマ＋装飾ブロブ） */ .kt-card{ position:relative;overflow:hidden; background:var(--card-soft,var(--wp--preset--color--bg)); border:1.5px solid var(--wp--custom--line); border-radius:var(--wp--custom--radius--m); padding:clamp(18px,2vw,26px); transition:transform .4s var(--wp--custom--ease),box-shadow .4s var(--wp--custom--ease); } a.kt-card:hover{transform:translateY(-4px);box-shadow:var(--wp--custom--shadow--card);} /* 装飾円は最終カンプで廃止（.cardはプレーン） */ .kt-card > *{position:relative;z-index:1;} .kt-card__label{color:var(--card-accent,var(--wp--preset--color--ink-2));font-size:12.5px;font-weight:700;margin:0 0 6px;} .kt-card__name{margin:0 0 10px;} .kt-card__more{color:var(--card-accent,var(--wp--preset--color--tracker));font-weight:700;font-family:var(--wp--preset--font-family--display);margin:12px 0 0;font-size:14px;} /* リンク化した「詳しく見る」等は親の色を継承・下線なし（ホバーで下線） */ .kt-card__more a,.kt-more-light a{color:inherit;text-decoration:none;} .kt-card__more a:hover,.kt-more-light a:hover{text-decoration:underline;} /* 製品色マッピング */ .kt-card--consult{--card-accent:var(--wp--preset--color--consult);--card-soft:var(--wp--preset--color--consult-soft);} .kt-card--prod{--card-accent:var(--wp--preset--color--prod);--card-soft:var(--wp--preset--color--prod-soft);} .kt-card--connect{--card-accent:var(--wp--preset--color--connect-ink);--card-soft:var(--wp--preset--color--connect-soft);} .kt-card--ads{--card-accent:var(--wp--preset--color--ads);--card-soft:var(--wp--preset--color--ads-soft);} .kt-card--consult,.kt-card--prod,.kt-card--connect,.kt-card--ads{border-color:transparent;} /* WPのblock-gap余白がflex/grid子要素に付いて縦ズレする問題を打ち消す */ .kt-fv__inner > *, .kt-cards > *, .kt-stats > *{margin-top:0;margin-block-start:0;} /* 等高はflexのstretch既定に委任（旧align-items:flex-startは行数差で高さが不揃いになるため撤去 2026-08-04） */ .kt-stat{display:flex;flex-direction:column;justify-content:center;} /* カードグリッド 2列 / 3列 */ .kt-cards--2{grid-template-columns:repeat(2,1fr);} .kt-cards--3{grid-template-columns:repeat(3,1fr);} @media (max-width:820px){.kt-cards--2,.kt-cards--3{grid-template-columns:1fr;}} /* WHY: 専門家タグ */ .kt-tags{color:var(--wp--preset--color--ink-2);font-size:13.5px;font-weight:700;} /* CASE STUDY */ .kt-case{ background:var(--wp--preset--color--bg); border:1.5px solid var(--wp--custom--line); border-radius:var(--wp--custom--radius--m); padding:clamp(20px,2.2vw,28px); transition:transform .4s var(--wp--custom--ease),box-shadow .4s var(--wp--custom--ease); } .kt-case:hover{transform:translateY(-4px);box-shadow:var(--wp--custom--shadow--card);} .kt-case__metric{color:var(--wp--preset--color--tracker);font-family:var(--wp--preset--font-family--display);font-size:clamp(30px,4vw,44px);margin:0;line-height:1.05;} .kt-case__kpi{color:var(--wp--preset--color--ink-2);font-size:13px;font-weight:700;margin:2px 0 14px;} .kt-case__company{font-weight:700;margin:0 0 6px;} /* 事例カード リッチ版（写真サムネ＋タグ＋ロゴ）: kt-case--media で有効化。text-only版kt-caseは非影響 */ .kt-case--media{padding:0;overflow:hidden;display:flex;flex-direction:column;} .kt-case__thumb{margin:0;min-height:150px;background:var(--wp--preset--color--bg-off);} .kt-case__thumb img{display:block;width:100%;height:150px;object-fit:cover;} .kt-case__body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1;gap:0;} .kt-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;} /* 5-4: B案.tags */ /* タグ基底の体裁のみ（色・地・太さはB案の正であるL701側の.kt-tag定義に委譲。tracker-soft地はkt-tag--softの仕様） */ .kt-tag{border-radius:999px;padding:6px 14px;font-size:13.5px;margin:0;line-height:1.8;} .kt-case__logo{margin:12px 0 4px;} .kt-case__logo img{height:26px;width:auto;max-width:160px;object-fit:contain;object-position:left center;display:block;} .kt-note{color:var(--wp--preset--color--ink-2);font-size:13.5px;line-height:1.95;margin:0 0 22px;} /* C30: 記事本文内でも13.5pxを維持（.kt-article .wp-block-post-content p の17.5pxに負けないよう詳細度を確保） */ .kt-article .wp-block-post-content p.kt-note{font-size:13.5px;margin:0 0 22px;} /* 最終CTAセクション（中央寄せ） */ .kt-cta-sec{background:var(--wp--preset--color--tracker-soft);} .kt-cta-sec__inner{text-align:center;max-width:760px;} .kt-cta-sec .kt-lead{margin-left:auto;margin-right:auto;} .kt-cta-sec .kt-cta{justify-content:center;} /* ============ 見出しサイズ（theme.jsonのelementsが詳細度で負ける環境向けに明示） ============ */ .kt-fv__text h1{ font-size:clamp(38px,6.5vw,80px);line-height:1.1;letter-spacing:-.02em;font-weight:800; max-width:16em; } .kt-sec h2,.kt-cta-sec h2{ font-size:clamp(28px,4.4vw,52px);line-height:1.15;letter-spacing:-.01em;font-weight:800; } /* ============ タッチ端末向け：ホバーの浮き止め＋タップの手応え ============ */ @media (hover:none){ .kt-card:hover,.kt-case:hover{transform:none;box-shadow:none;} .kt-btn-primary .wp-block-button__link:hover{transform:none;box-shadow:var(--wp--custom--shadow--cta);} .kt-btn-outline .wp-block-button__link:hover{transform:none;background:var(--wp--preset--color--bg);color:var(--wp--preset--color--ink);} } .wp-block-button__link:active{transform:translateY(1px);} .kt-card:active,.kt-case:active{transform:translateY(-2px);} /* ============ サービスLP 共通 ============ */ /* セクション単位の製品アクセント（connect＝金） */ .kt-accent-connect .kt-card__num{color:var(--wp--preset--color--connect-ink);} /* ページヒーロー */ .kt-page-hero{padding-top:clamp(48px,7vw,96px);} .kt-page-hero h1{font-size:var(--wp--preset--font-size--h-1,clamp(38px,6.5vw,80px));line-height:1.1;letter-spacing:-.02em;font-weight:800;} /* C19: lh1.1 */ .kt-page-hero .kt-lead{max-width:44em;} /* 写真ヒーロー（core/cover使用・左=白グラデスクリムでテキスト可読性を確保／画像未設定でもbg-offで崩れない） */ .kt-hero-photo.wp-block-cover{align-items:center;justify-content:flex-start;background:var(--wp--preset--color--bg-off);} /* core/coverは内側テキストを白にするので、濃色に戻す（H1が白飛びするのを防ぐ） */ .kt-hero-photo .wp-block-cover__inner-container{width:100%;position:relative;z-index:3!important;color:var(--wp--preset--color--ink);} .kt-hero-photo h1{color:var(--wp--preset--color--ink);} /* 左=白でテキスト帯を確実に可読に、右=透明で写真（人物）を見せる */ .kt-hero-photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0.98) 0%,rgba(255,255,255,0.97) 32%,rgba(255,255,255,0.9) 52%,rgba(255,255,255,0.5) 72%,rgba(255,255,255,0) 100%);} /* テキスト列を左側に寄せ、写真の明るい中央にH1がかからないようにする */ .kt-hero-photo .kt-lead{max-width:34em;} /* ページ別監査: DS=34em（680px@20px/544px@16px） */ @media(max-width:680px){.kt-hero-photo::after{background:rgba(255,255,255,0.92);}.kt-hero-photo h1{max-width:none;}} /* 課題カード */ .kt-problem{ background:var(--wp--preset--color--bg-off); border-radius:var(--wp--custom--radius--m); padding:clamp(18px,2vw,24px); border-left:4px solid var(--wp--preset--color--connect-ink); } .kt-problem p{margin:0;font-weight:500;} /* 強みカードの番号 */ .kt-card__num{ font-family:var(--wp--preset--font-family--display);font-weight:800; font-size:28px;color:var(--wp--preset--color--tracker);margin:0 0 6px;line-height:1; } /* 仕組みフロー（企業⇄エビリー⇄YouTuber） */ .kt-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;} .kt-flow > *{margin-top:0;margin-block-start:0;} @media(max-width:820px){.kt-flow{grid-template-columns:1fr;}} .kt-flow__node{background:var(--wp--preset--color--bg-off);border-radius:var(--wp--custom--radius--m);padding:clamp(18px,2vw,26px);text-align:center;} .kt-flow__node--mid{background:var(--wp--preset--color--connect-soft);} .kt-flow__role{font-family:var(--wp--preset--font-family--display);font-weight:800;margin:0 0 8px;} .kt-flow__node p:last-child{color:var(--wp--preset--color--ink-2);font-size:14px;margin:0;} /* データコールアウト */ .kt-callout{background:var(--wp--preset--color--connect-soft);border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.5vw,32px);margin-top:24px;} .kt-callout__title{font-weight:700;margin:0 0 14px;} .kt-callout .kt-stat__num{color:var(--wp--preset--color--connect-ink);} /* チェックリスト */ .kt-checklist{list-style:none;margin:14px 0 0;padding:0;} .kt-checklist li{position:relative;padding-left:24px;margin:8px 0;font-size:14px;line-height:1.6;} .kt-checklist li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--wp--preset--color--tracker);} .kt-accent-connect .kt-checklist li::before{color:var(--wp--preset--color--connect-ink);} /* 進め方ステップ（横1列・コンパクト・カンプ準拠。STEP強調＋バッジ＋アイコン対応） */ .kt-steps{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:stretch;} .kt-steps > *{margin-top:0;margin-block-start:0;} .kt-step{flex:1 1 150px;min-width:150px;position:relative;background:var(--wp--preset--color--bg-off);border:1.5px solid transparent;border-radius:var(--wp--custom--radius--s);padding:16px;text-align:center;display:flex;flex-direction:column;} .kt-step__icon{display:flex;justify-content:center;color:var(--wp--preset--color--tracker);line-height:0;margin-bottom:6px;} .kt-step__icon svg{width:24px;height:24px;} .kt-step__no{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--wp--preset--color--tracker);margin:0 0 6px;} .kt-step__name{margin:0 0 6px;font-size:clamp(15px,1.8vw,18px);} .kt-step p{font-size:13px;color:var(--wp--preset--color--ink-2);line-height:1.7;margin:0;} .kt-step__dur{color:var(--wp--preset--color--tracker);font-size:12.5px;font-weight:700;margin:8px 0 0;} /* 強調ステップ（初期費用など） */ .kt-step--hl{flex:1.7 1 210px;background:var(--wp--preset--color--tracker-soft);border-color:var(--wp--preset--color--tracker);} .kt-step__badge{position:absolute;top:-13px;left:14px;background:var(--wp--preset--color--tracker);color:#fff;font-family:var(--wp--preset--font-family--display);font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;white-space:nowrap;} @media(max-width:820px){.kt-step,.kt-step--hl{flex:1 1 100%;}} /* アクセント別（connect=黄ink / prod=緑 / consult=グレー） */ .kt-accent-connect .kt-step--hl{background:var(--wp--preset--color--connect-soft);border-color:var(--wp--preset--color--connect-ink);} .kt-accent-connect .kt-step__badge{background:var(--wp--preset--color--connect-ink);} .kt-accent-prod .kt-step__icon,.kt-accent-prod .kt-step__dur{color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-step--hl{background:var(--wp--preset--color--prod-soft);border-color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-step__badge{background:var(--wp--preset--color--prod);} .kt-accent-consult .kt-step__icon,.kt-accent-consult .kt-step__dur{color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-step--hl{background:var(--wp--preset--color--consult-soft);border-color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-step__badge{background:var(--wp--preset--color--consult);} /* 料金プラン */ .kt-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;align-items:stretch;} .kt-plans > *{margin-top:0;margin-block-start:0;} @media(max-width:900px){.kt-plans{grid-template-columns:1fr;}} .kt-plan{position:relative;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(22px,2.5vw,32px);} .kt-plan--featured{border-width:2px;border-color:var(--wp--preset--color--tracker);box-shadow:0 20px 50px rgba(242,107,98,.16);} .kt-plan__badge{position:absolute;top:-13px;left:22px;transform:none;background:var(--wp--preset--color--tracker-ink);color:#fff;border-radius:var(--wp--custom--radius--pill);padding:5px 16px;font-size:12px;font-weight:700;margin:0;white-space:nowrap;} .kt-plan__name{font-family:var(--wp--preset--font-family--display);font-weight:800;margin:0 0 4px;font-size:clamp(17px,2vw,20px);} .kt-plan__note{color:var(--wp--preset--color--ink-2);font-size:13px;margin:0 0 12px;} .kt-plan__price{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(28px,3.5vw,40px);color:var(--wp--preset--color--ink);margin:0;line-height:1.05;} .kt-plan__unit{color:var(--wp--preset--color--ink-2);font-size:13px;margin:2px 0 0;} /* ============ 記事（single.html / 投稿本文） ============ */ .kt-article{padding:clamp(48px,6vw,80px) 0 var(--wp--preset--spacing--section-y);} .kt-article__title{ font-size:clamp(26px,3.6vw,42px);line-height:1.3;letter-spacing:-.01em;font-weight:800; margin:0 0 10px; } .kt-article__date{color:var(--wp--preset--color--ink-2);font-size:13px;margin:0 0 32px;} /* 本文の見出し（記事はLPより控えめなスケール） */ .kt-article .wp-block-post-content h2{ font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.01em; margin:2.2em 0 .8em;padding-bottom:.4em; border-bottom:2px solid var(--wp--preset--color--tracker-soft); } .kt-article .wp-block-post-content h3{ font-size:clamp(17px,2vw,21px);font-weight:700;margin:1.8em 0 .6em; } /* テーブル（相場表など） */ .kt-article .wp-block-table table{border-collapse:collapse;width:100%;font-size:14.5px;} .kt-article .wp-block-table th{ background:var(--wp--preset--color--bg-off);font-weight:700;text-align:left; } .kt-article .wp-block-table th,.kt-article .wp-block-table td{ border:1px solid var(--wp--custom--line-2);padding:10px 14px; } /* 引用 */ .kt-article .wp-block-quote{ border-left:4px solid var(--wp--preset--color--tracker); background:var(--wp--preset--color--bg-off); border-radius:0 var(--wp--custom--radius--s) var(--wp--custom--radius--s) 0; margin:1.6em 0;padding:16px 22px;font-weight:700; } .kt-article .wp-block-quote p{margin:0;} /* 業種タグ */ .kt-taglist{list-style:none;margin:16px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:8px;} .kt-taglist li{background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--pill);padding:6px 13px;font-size:13px;} /* ============ グラフ部品（Charts・記事/事例用） ============ */ /* 共通枠 */ .kt-chart{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:24px 26px;max-width:640px;margin:1.6em 0;} .kt-chart__title{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:17px;margin:0 0 4px;} .kt-chart__sub{color:var(--wp--preset--color--ink-2);font-size:12.5px;margin:0 0 18px;} /* 出典バッジ */ .kt-source{display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--pill);padding:5px 13px;font-size:11.5px;color:var(--wp--preset--color--ink-2);font-weight:600;} .kt-source::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wp--preset--color--tracker);} .kt-source--solid{background:var(--wp--preset--color--tracker);border-color:var(--wp--preset--color--tracker);color:#fff;font-weight:700;} .kt-source--solid::before{background:#fff;} /* 引用ガイド */ .kt-cite{background:var(--wp--preset--color--bg-off);border-left:4px solid var(--wp--preset--color--tracker);border-radius:0 12px 12px 0;padding:12px 16px;font-size:12.5px;color:var(--wp--preset--color--ink-2);max-width:560px;margin:1.2em 0;} .kt-cite b{color:var(--wp--preset--color--ink);} /* 横棒ランキング */ .kt-rankbar{display:grid;grid-template-columns:34px 1fr 72px;gap:8px 10px;align-items:center;} .kt-rankbar__pos{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:14px;color:var(--wp--preset--color--ink-2);text-align:center;} .kt-rankbar__pos--1{color:#fff;background:var(--wp--preset--color--tracker);border-radius:8px;padding:2px 0;} .kt-rankbar__track{background:var(--wp--preset--color--bg-off);border-radius:var(--wp--custom--radius--pill);height:22px;overflow:hidden;} .kt-rankbar__fill{height:100%;border-radius:var(--wp--custom--radius--pill);background:var(--wp--preset--color--tracker);opacity:.35;} .kt-rankbar--1 .kt-rankbar__fill{opacity:1;} .kt-rankbar__val{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:14px;text-align:right;} .kt-rankbar__name{grid-column:2/4;font-size:12.5px;font-weight:700;margin:-2px 0 6px;} /* 縦棒 */ .kt-cols{display:flex;align-items:flex-end;gap:18px;height:150px;padding-top:8px;} .kt-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center;gap:6px;} .kt-col__bar{background:var(--wp--preset--color--prod);border-radius:10px 10px 4px 4px;opacity:.45;} .kt-col--hero .kt-col__bar{opacity:1;} .kt-col__val{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;} .kt-col__label{font-size:11.5px;color:var(--wp--preset--color--ink-2);} /* 折れ線（SVGはインライン。軸テキストのみCSS） */ .kt-linechart text{font-family:var(--wp--preset--font-family--display);font-size:11px;fill:var(--wp--preset--color--ink-2);} /* ドーナツ（conic-gradientはインラインstyleで%指定） */ .kt-donut-wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;} .kt-donut{position:relative;width:170px;height:170px;border-radius:50%;} .kt-donut::after{content:"";position:absolute;inset:22%;background:var(--wp--preset--color--bg);border-radius:50%;} .kt-donut__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;} .kt-donut__num{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:26px;line-height:1;} .kt-donut__cap{font-size:10.5px;color:var(--wp--preset--color--ink-2);margin-top:3px;} .kt-legend{display:grid;gap:9px;font-size:13px;} .kt-legend__item{display:flex;align-items:center;gap:9px;} .kt-legend__dot{width:11px;height:11px;border-radius:4px;flex-shrink:0;} .kt-legend__val{font-family:var(--wp--preset--font-family--display);font-weight:800;margin-left:auto;padding-left:16px;} /* ビフォーアフター */ .kt-ba{display:grid;gap:14px;} .kt-ba__row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;} .kt-ba__tag{font-size:11.5px;font-weight:700;color:var(--wp--preset--color--ink-2);text-align:center;background:var(--wp--preset--color--bg-off);border-radius:var(--wp--custom--radius--pill);padding:4px 0;} .kt-ba__row--after .kt-ba__tag{background:var(--wp--preset--color--tracker);color:#fff;} .kt-ba__bar{height:30px;border-radius:10px;display:flex;align-items:center;padding:0 12px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;white-space:nowrap;} .kt-ba__row--before .kt-ba__bar{background:var(--wp--preset--color--bg-off);color:var(--wp--preset--color--ink-2);border:1.5px solid var(--wp--custom--line);} .kt-ba__row--after .kt-ba__bar{background:var(--wp--preset--color--tracker);color:#fff;} .kt-ba__badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);border-radius:var(--wp--custom--radius--pill);padding:8px 18px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:18px;} .kt-ba__badge small{font-size:11.5px;font-weight:700;color:var(--wp--preset--color--ink-2);} /* KPIスパークライン */ .kt-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.6em 0;} .kt-kpis > *{margin-top:0;margin-block-start:0;} @media(max-width:560px){.kt-kpis{grid-template-columns:1fr;}} .kt-kpi{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:16px 18px;} .kt-kpi__label{font-size:11.5px;color:var(--wp--preset--color--ink-2);font-weight:700;margin:0 0 2px;} .kt-kpi__num{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:24px;line-height:1.1;margin:0;} .kt-kpi__num small{font-size:12px;} .kt-kpi__spark{margin-top:8px;display:block;} .kt-kpi__delta{font-size:11px;font-weight:800;color:var(--wp--preset--color--prod);font-family:var(--wp--preset--font-family--display);} /* ============ FAQアコーディオン（details/summary・JS不要） ============ */ .kt-faq{display:grid;gap:12px;margin-top:24px;max-width:880px;} .kt-faq__item{ background:var(--wp--preset--color--bg); border:1.5px solid var(--wp--custom--line); border-radius:var(--wp--custom--radius--s); padding:0;overflow:hidden; } .kt-faq__item summary{ cursor:pointer;list-style:none; padding:18px 48px 18px 52px;position:relative; font-weight:700;font-size:15.5px; } .kt-faq__item summary::-webkit-details-marker{display:none;} .kt-faq__item summary::before{ content:"Q";position:absolute;left:16px;top:50%;margin-top:-13px; width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--wp--preset--color--tracker);color:#fff; font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:14px; } .kt-faq__item summary::after{ content:"+";position:absolute;right:20px;top:14px; font-family:var(--wp--preset--font-family--display);font-weight:700; font-size:22px;color:var(--wp--preset--color--ink-2);transition:transform .2s; } .kt-faq__item[open] summary::after{transform:rotate(45deg);} .kt-faq__item p{margin:0;padding:0 20px 18px 52px;color:var(--wp--preset--color--ink-2);font-size:14.5px;} /* ============ 製品アクセント: prod（緑・production LP用） ============ */ .kt-accent-prod .kt-card__num{color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-card__more{color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-checklist li::before{color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-plan--featured{border-color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-plan__badge{background:var(--wp--preset--color--prod-ink);} .kt-accent-prod .kt-problem{border-left-color:var(--wp--preset--color--prod);} /* 課題カード内の見出し・詳細リスト（production LP） */ .kt-problem__title{font-weight:800;font-size:16px;margin:0 0 10px;} .kt-problem .wp-block-list{margin:0;padding-left:1.2em;} .kt-problem .wp-block-list li{font-size:13.5px;color:var(--wp--preset--color--ink-2);} /* 転換メッセージ（中央強調・小） */ .kt-turn__inner{text-align:center;max-width:760px;} /* セクション下のインラインリンク（例: ツールについて詳しく） */ .kt-more-inline{margin:20px 0 0;font-weight:700;font-family:var(--wp--preset--font-family--display);font-size:14px;} .kt-more-inline a{color:var(--wp--preset--color--tracker);text-decoration:none;} .kt-accent-prod .kt-more-inline a{color:var(--wp--preset--color--prod);} .kt-more-inline a:hover{text-decoration:underline;} /* ============ 製品アクセント: consult（グレー・consulting LP用） ============ */ .kt-accent-consult .kt-card__num{color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-card__more{color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-checklist li::before{color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-plan--featured{border-color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-plan__badge{background:var(--wp--preset--color--consult);} .kt-accent-consult .kt-problem{border-left-color:var(--wp--preset--color--consult);} .kt-accent-consult .kt-more-inline a{color:var(--wp--preset--color--consult);} /* ============ 製品アクセント: tracker（コーラル・ブランド主色。グレー系LPの機能セクション用） ============ */ .kt-accent-tracker .kt-card__num{color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-card__more{color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-checklist li::before{color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-step__no,.kt-accent-tracker .kt-step__icon,.kt-accent-tracker .kt-step__dur{color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-step--hl{background:var(--wp--preset--color--tracker-soft);border-color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-step__badge{background:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-plan--featured{border-color:var(--wp--preset--color--tracker);} .kt-accent-tracker .kt-plan__badge{background:var(--wp--preset--color--tracker-ink);} .kt-accent-tracker .kt-more-inline a{color:var(--wp--preset--color--tracker);} /* ============ プラン比較テーブル（consulting LP・kt-spec） ============ */ .kt-spec-wrap{overflow-x:auto;margin-top:24px;} .kt-spec{width:100%;border-collapse:collapse;font-size:14px;min-width:640px;} .kt-spec th,.kt-spec td{border:1px solid var(--wp--custom--line);padding:11px 13px;text-align:left;vertical-align:top;} .kt-spec thead th{background:var(--wp--preset--color--bg-off);font-weight:700;text-align:center;} .kt-spec thead th:first-child{text-align:left;} .kt-spec thead th small{display:block;font-size:12px;color:var(--wp--preset--color--ink-2);font-weight:600;} .kt-spec .kt-spec__group td{background:var(--wp--preset--color--bg-off);font-weight:700;} .kt-spec td.kt-spec__y{text-align:center;color:var(--wp--preset--color--consult);font-weight:700;} .kt-spec td.kt-spec__n{text-align:center;color:var(--wp--preset--color--ink-2);} .kt-spec td.kt-spec__y small{display:block;font-size:12px;color:var(--wp--preset--color--ink-2);font-weight:500;} /* ============ お問い合わせフォーム（Pardotへ直POST・素のHTMLフォーム） ============ */ .kt-form{max-width:640px;margin:8px auto 0;display:flex;flex-direction:column;gap:18px;text-align:left;} .kt-field{display:flex;flex-direction:column;gap:7px;} .kt-field>label{font-weight:700;font-size:14.5px;} .kt-req{color:var(--wp--preset--color--tracker);font-size:11px;font-weight:800;margin-left:6px;background:var(--wp--preset--color--tracker-soft);padding:2px 8px;border-radius:999px;} .kt-opt{color:var(--wp--preset--color--ink-2);font-size:11px;font-weight:700;margin-left:6px;background:var(--wp--preset--color--bg-off);padding:2px 8px;border-radius:999px;} .kt-form input[type=text],.kt-form input[type=email],.kt-form input[type=tel],.kt-form select,.kt-form textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:15.5px;color:var(--wp--preset--color--ink);background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line-2);border-radius:14px;padding:13px 15px;transition:border-color .2s;} .kt-form input:focus,.kt-form select:focus,.kt-form textarea:focus{outline:none;border-color:var(--wp--preset--color--tracker);box-shadow:0 0 0 3px var(--wp--preset--color--tracker-soft);} .kt-form textarea{resize:vertical;min-height:120px;} .kt-field__2{display:grid;grid-template-columns:1fr 1fr;gap:12px;} @media(max-width:520px){.kt-field__2{grid-template-columns:1fr;}} .kt-agree{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--wp--preset--color--ink-2);cursor:pointer;} .kt-agree input{margin-top:3px;flex-shrink:0;width:18px;height:18px;accent-color:var(--wp--preset--color--tracker);} .kt-agree a{color:var(--wp--preset--color--tracker);text-decoration:underline;} .kt-form__submit{margin-top:6px;text-align:center;} .kt-form__submit button{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:16px;color:#fff;background:var(--wp--preset--color--tracker-ink);border:none;border-radius:999px;padding:15px 44px;cursor:pointer;transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease);box-shadow:var(--wp--custom--shadow--cta);} .kt-form__submit button:hover{transform:translateY(-3px);box-shadow:var(--wp--custom--shadow--cta-hover);} /* Pardot ハニーポット（bot対策・人には非表示。DOMには必ず残す） */ .kt-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;} /* チェックボックス／ラジオ群（trial の目的選択・youtuber の区分など） */ .kt-checks{display:flex;flex-wrap:wrap;gap:10px 18px;} .kt-checks label{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer;background:var(--wp--preset--color--bg-off);border:1.5px solid var(--wp--custom--line);border-radius:12px;padding:10px 15px;} .kt-checks input{width:18px;height:18px;accent-color:var(--wp--preset--color--tracker);} /* ============ 記事/事例のアーティクルヘッダー（single-casestudy 等） ============ */ .kt-article-hero{padding-bottom:clamp(18px,2.5vw,28px);} .kt-crumb{display:flex;flex-wrap:wrap;gap:6px 8px;font-family:var(--wp--preset--font-family--display);font-size:12.5px;font-weight:600;color:var(--wp--preset--color--ink-2);margin:0 0 14px;} .kt-crumb a{color:var(--wp--preset--color--ink-2);text-decoration:none;} .kt-crumb a:hover{color:var(--wp--preset--color--tracker);} .kt-crumb span{opacity:.4;} .kt-article-hero__title{letter-spacing:-.01em;max-width:24em;font-weight:800;} .kt-article-eyecatch{margin-top:clamp(16px,2vw,24px)!important;} .kt-article-eyecatch img{border-radius:var(--wp--custom--radius--l);width:100%;display:block;} /* 事例のリード写真（カンプ .a-lede--photo）: コンテンツ幅・PC21/9・SP16/9・角丸・枠線・下余白clamp */ .kt-case-eyecatch{max-width:1200px;margin:clamp(16px,2vw,24px) auto clamp(24px,3.5vw,34px)!important;padding:0 var(--wp--preset--spacing--pad-x);} .kt-case-eyecatch img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--wp--custom--radius--l);border:1px solid var(--wp--custom--line);display:block;} @media(max-width:560px){.kt-case-eyecatch img{aspect-ratio:16/9;}} .kt-case-eyecatch .wp-element-caption{font-size:13px;color:var(--wp--preset--color--ink-2);margin-top:10px;line-height:1.7;text-align:left;} /* 事例本文の企業情報ボックス（kt-cards--2 内で使うfacts） */ .kt-facts{background:var(--wp--preset--color--bg-off);border:1.5px solid transparent;} .kt-facts .wp-block-list{margin:0;padding-left:1.1em;} .kt-facts .wp-block-list li{font-size:14px;margin:6px 0;} /* アーカイブのページネーション（archive-casestudy / archive-guide） */ .kt-pagination{margin-top:clamp(28px,4vw,44px);gap:4px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14px;} .kt-pagination a,.kt-pagination span{color:var(--wp--preset--color--ink-2);padding:8px 13px;border-radius:10px;text-decoration:none;} .kt-pagination a:hover{background:var(--wp--preset--color--bg-off);color:var(--wp--preset--color--tracker);} .kt-pagination .current{background:var(--wp--preset--color--tracker);color:#fff;} /* ====== トップ ロゴマーキー（導入企業・流れる帯） ====== */ .kt-logos-sec{padding:clamp(28px,4vw,44px) 0;background:var(--wp--preset--color--bg-off);} .kt-logos-sec .kt-sec__inner{text-align:center;} .kt-marquee__label{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12.5px;letter-spacing:.08em;color:var(--wp--preset--color--ink-2);text-transform:uppercase;margin:0 0 18px;} .kt-marquee{overflow:hidden;position:relative;} .kt-marquee::before,.kt-marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;} .kt-marquee::before{left:0;background:linear-gradient(90deg,var(--wp--preset--color--bg-off),transparent);} .kt-marquee::after{right:0;background:linear-gradient(270deg,var(--wp--preset--color--bg-off),transparent);} .kt-marquee__track{display:flex;align-items:center;gap:18px;width:max-content;animation:kt-marq 38s linear infinite;} /* hover時の一時停止は廃止（2026-08-06 しのねさん指摘: ロゴはリンクでないため停止不要） */ @keyframes kt-marq{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* 白ピル枠＋カラーロゴ（最終カンプ01準拠。旧グレースケール表示は廃止） */ .kt-marquee__track img{box-sizing:border-box;width:180px;height:64px;padding:15px 18px;background:#fff;border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);object-fit:contain;} @media(prefers-reduced-motion:reduce){.kt-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;gap:32px;}} /* ====== トップ データパネル（カンプ01準拠: コーラルソフト面＋スクショ＋白枠ハンドオフ） ====== */ .kt-ci--ads{background:var(--wp--preset--color--ads-soft)!important;} .kt-dp{background:var(--wp--preset--color--tracker-soft);border:1.5px solid rgba(242,107,98,.22);border-radius:var(--wp--custom--radius--l);padding:clamp(26px,3.5vw,46px);margin-top:clamp(44px,6vw,76px);} .kt-dp__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3.5vw,48px);align-items:center;} @media(max-width:860px){.kt-dp__grid{grid-template-columns:1fr;}} .kt-dp__title{display:flex;align-items:flex-start;gap:13px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(21px,2.6vw,30px);line-height:1.4;letter-spacing:-.01em;margin:0;} .kt-dp__title img{width:30px;height:30px;object-fit:contain;flex-shrink:0;margin-top:6px;} .kt-dp__lead{font-size:clamp(14.5px,1.6vw,16.5px);color:var(--wp--preset--color--ink-2);line-height:2;margin:16px 0 24px;} .kt-dp .kt-cta{margin-top:0;} .kt-dp__shot{border-radius:18px;border:1.5px solid rgba(242,107,98,.25);background:#fff;box-shadow:0 24px 54px rgba(242,107,98,.16);overflow:hidden;} .kt-dp__shot img{width:100%;height:clamp(220px,24vw,300px);object-fit:cover;object-position:center top;display:block;} .kt-dp__hand{margin-top:clamp(24px,3vw,36px);background:var(--wp--preset--color--bg);border:2px solid var(--wp--preset--color--tracker);border-radius:20px;padding:clamp(22px,2.8vw,34px);display:flex;gap:18px;align-items:flex-start;} @media(max-width:640px){.kt-dp__hand{flex-direction:column;}} .kt-dp__arrow{width:46px;height:46px;border-radius:50%;background:var(--wp--preset--color--tracker);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .kt-dp__arrow svg{width:24px;height:24px;} .kt-dp__hand h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(18px,2.2vw,24px);margin:4px 0 10px;line-height:1.5;} .kt-dp__hand p{font-size:14.5px;color:var(--wp--preset--color--ink-2);line-height:2;margin:0 0 18px;max-width:46em;} /* ダークボタン */ .kt-btn-dark .wp-block-button__link{background:var(--wp--preset--color--ink);color:#fff;transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease);} .kt-btn-dark .wp-block-button__link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,26,31,.28);} /* ====== ヒーロー: H1マーカー（hl）・サービスロゴ・製品色スクリム（最終カンプ0719） ====== */ .kt-hl{--hl:var(--wp--preset--color--connect);background-image:linear-gradient(transparent 62%,var(--hl) 62%);padding:0 2px;} .kt-accent-prod .kt-hl{--hl:var(--wp--preset--color--prod);} .kt-accent-consult .kt-hl{--hl:var(--wp--preset--color--consult);} .kt-accent-ads .kt-hl{--hl:var(--wp--preset--color--ads);} .kt-hero-logo{margin:0 0 clamp(18px,2.4vw,26px);line-height:0;} .kt-hero-logo img{height:30px;width:auto;display:block;} /* 製品色ソフトのスクリム（カンプFV準拠: 白でなく製品soft色のグラデ） */ .kt-accent-prod.kt-hero-photo::after{background:linear-gradient(90deg,rgba(237,244,230,.97) 0%,rgba(237,244,230,.92) 38%,rgba(237,244,230,.55) 64%,rgba(237,244,230,0) 100%);} .kt-accent-connect.kt-hero-photo::after{background:linear-gradient(90deg,rgba(253,246,214,.97) 0%,rgba(253,246,214,.92) 38%,rgba(253,246,214,.55) 64%,rgba(253,246,214,0) 100%);} .kt-accent-consult.kt-hero-photo::after,.kt-accent-ads.kt-hero-photo::after{background:linear-gradient(90deg,rgba(240,240,241,.97) 0%,rgba(240,240,241,.92) 38%,rgba(240,240,241,.55) 64%,rgba(240,240,241,0) 100%);} @media(max-width:680px){.kt-accent-prod.kt-hero-photo::after{background:rgba(237,244,230,.92);}.kt-accent-connect.kt-hero-photo::after{background:rgba(253,246,214,.92);}.kt-accent-consult.kt-hero-photo::after,.kt-accent-ads.kt-hero-photo::after{background:rgba(240,240,241,.92);}} /* adsアクセント（YouTube広告LP用・最小セット） */ .kt-accent-ads .kt-card__num{color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-card__more{color:var(--wp--preset--color--ads);} /* カンプ準拠: ADページでもステップ/プランのアクセントはコーラル（2026-07-28撤去） */ .kt-accent-ads .kt-problem{border-left-color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-more-inline a{color:var(--wp--preset--color--ads);} /* connectのH1マーカーは可読性のため濃い金（カンプFV指定 #E0A81E） */ .kt-accent-connect .kt-hl{--hl:#E0A81E;} /* ヒーローロゴの白チップ（connect透過ロゴ用） */ .kt-hero-logo--chip{display:inline-flex;background:rgba(255,255,255,.6);border-radius:10px;padding:7px 13px;backdrop-filter:blur(2px);} /* ヒーロー内キッカーは大文字化しない（カンプ準拠） */ .kt-hero-photo .kt-eyebrow{text-transform:none;letter-spacing:.06em;} /* ステップの成果物ラベル（casting 6ステップ） */ .kt-step p.kt-step__deliv{color:var(--wp--preset--color--tracker);font-size:12.5px;font-weight:700;margin:auto 0 0;padding-top:6px;} /* ====== トップFV: 装飾シェイプ（最終カンプ01=画像なし・浮遊シェイプ） ====== */ .kt-fv{position:relative;overflow:clip;} .kt-fv__inner{grid-template-columns:1fr;} .kt-fv__text{position:relative;z-index:3;} .kt-fv__shapes{position:absolute;inset:0;pointer-events:none;} .kt-shape{position:absolute;border-radius:50%;display:block;} .kt-shape--1{width:clamp(220px,30vw,420px);height:clamp(220px,30vw,420px);background:radial-gradient(circle at 35% 30%,rgba(242,107,98,.95),rgba(242,107,98,.55));top:-90px;right:-60px;opacity:.92;animation:kt-floaty 9s ease-in-out infinite;} .kt-shape--2{width:clamp(120px,16vw,230px);height:clamp(120px,16vw,230px);background:radial-gradient(circle at 40% 35%,#FFE05A,var(--wp--preset--color--connect));top:34%;right:8%;animation:kt-floaty 7.5s ease-in-out infinite .6s;} .kt-shape--3{width:clamp(90px,12vw,170px);height:clamp(90px,12vw,170px);background:radial-gradient(circle at 40% 35%,#7DB650,var(--wp--preset--color--prod));bottom:6%;right:24%;animation:kt-floaty 8.5s ease-in-out infinite 1.1s;} .kt-shape--4{width:clamp(140px,18vw,260px);height:clamp(140px,18vw,260px);background:radial-gradient(circle at 40% 35%,#5C9CFF,var(--wp--preset--color--ads));bottom:-80px;right:30%;opacity:.5;animation:kt-floaty 10s ease-in-out infinite .3s;} .kt-band{position:absolute;height:clamp(54px,7vw,88px);width:160%;left:-30%;display:block;} .kt-band--1{background:var(--wp--preset--color--ads);transform:rotate(-7deg);bottom:9%;opacity:.10;} .kt-band--2{background:var(--wp--preset--color--prod);top:18%;transform:rotate(6deg);opacity:.08;} @keyframes kt-floaty{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-18px) translateX(6px);}} @media(prefers-reduced-motion:reduce){.kt-shape{animation:none!important;}} @media(max-width:781px){.kt-shape--3,.kt-shape--4{display:none;}.kt-shape--1{opacity:.5;}} /* ====== 課題カード（kt-problem）カンプ準拠へ刷新: 中央揃え・アイコン丸・白カード ====== */ .kt-problem{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-left-width:1.5px!important;border-left-color:var(--wp--custom--line)!important;border-radius:var(--wp--custom--radius--m);padding:clamp(22px,2.6vw,32px);text-align:center;} .kt-problem p{color:var(--wp--preset--color--ink-2);} /* R-05: B案 .card p{color:var(--ink-2)} */ .kt-problem__icon{width:68px;height:68px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 14px;} .kt-problem__icon img{width:34px;height:34px;display:block;} .kt-accent-prod .kt-problem__icon{background:var(--wp--preset--color--prod-soft);} .kt-accent-connect .kt-problem__icon{background:var(--wp--preset--color--connect-soft);} .kt-accent-consult .kt-problem__icon{background:var(--wp--preset--color--consult-soft);} .kt-accent-ads .kt-problem__icon{background:var(--wp--preset--color--ads-soft);} .kt-problem__title{text-align:center;} .kt-problem .wp-block-list{list-style:none;padding:0;margin:0;} .kt-problem .wp-block-list li{margin:8px 0;font-size:13.5px;color:var(--wp--preset--color--ink-2);line-height:1.8;} /* ====== 導入事例一覧（カンプ11: kcaseカード＋サービス絞り込み） ====== */ .kt-sec--alt{background:var(--wp--preset--color--bg-off);} .kt-cs-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3.5vw,36px);} .kt-tag{background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;color:var(--wp--preset--color--ink);transition:background-color .2s,color .2s,border-color .2s;} a.kt-tag:hover,button.kt-tag:hover{border-color:var(--wp--preset--color--tracker-ink);color:var(--wp--preset--color--tracker-ink);} /* R-14: button型の絞り込みタグも対象（退行修正） */ .kt-tag--soft{background:var(--wp--preset--color--tracker-soft);color:#CE4234;border-color:transparent;font-weight:700;} .kt-cs-count{color:var(--wp--preset--color--ink-2);font-size:14px;margin:-4px 0 20px;} .kt-cs-empty{display:none;color:var(--wp--preset--color--ink-2);padding:28px;text-align:center;border:1px dashed var(--wp--custom--line-2);border-radius:16px;} .kt-kcase{display:flex;flex-direction:column;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);overflow:hidden;text-decoration:none;color:var(--wp--preset--color--ink);height:100%;transition:transform .4s var(--wp--custom--ease),box-shadow .4s var(--wp--custom--ease);} .kt-kcase:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(26,26,31,.13);} .kt-kcase__img{height:190px;background:var(--wp--preset--color--bg-off);overflow:hidden;} .kt-kcase__img img{width:100%;height:100%;object-fit:cover;display:block;} .kt-kcase__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;} .kt-kcase__svc{display:inline-flex;align-items:center;gap:9px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13.5px;color:var(--wp--preset--color--ink);margin-bottom:14px;} .kt-kcase__ico{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .kt-kcase__ico svg{width:16px;height:16px;} .kt-svc-tracker{background:var(--wp--preset--color--tracker);color:#fff;} .kt-svc-connect{background:var(--wp--preset--color--connect);color:var(--wp--preset--color--ink);} .kt-svc-prod{background:var(--wp--preset--color--prod);color:#fff;} .kt-kcase__metric{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(26px,3vw,34px);color:var(--wp--preset--color--tracker);line-height:1.05;margin-bottom:12px;} .kt-kcase__metric span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;color:var(--wp--preset--color--ink-2);font-weight:600;margin-top:7px;line-height:1.4;overflow:hidden;} .kt-kcase__co{font-size:14px;color:var(--wp--preset--color--ink-2);margin-bottom:5px;} .kt-kcase__h{font-family:var(--wp--preset--font-family--display);font-size:15.5px;font-weight:700;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.65em*2);} .kt-kcase__more{margin-top:auto;padding-top:16px;color:#CE4234;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;} .kt-kcase__more svg{width:16px;height:16px;transition:transform .3s var(--wp--custom--ease);} .kt-kcase:hover .kt-kcase__more svg{transform:translateX(4px);} /* ====== セミナー一覧（カンプ34 FV版: 写真ヒーロー＋semfeat＋年別アーカイブ） ====== */ .kt-semhero{position:relative;overflow:hidden;min-height:clamp(420px,44vw,560px);display:flex;} .kt-semhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;} .kt-semhero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(237,244,230,.97) 0%,rgba(237,244,230,.92) 38%,rgba(237,244,230,.55) 64%,rgba(237,244,230,0) 100%);} .kt-semhero__inner{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--wp--preset--spacing--pad-x);} .kt-semhero__inner h1{font-size:clamp(32px,5vw,60px);line-height:1.15;letter-spacing:-.02em;max-width:16em;margin:0 0 8px;} .kt-semhero__inner .kt-lead{max-width:34em;} .kt-semhero .kt-hl{--hl:var(--wp--preset--color--connect);} /* ページ別監査: 参加無料バッジもDS規定のtracker系に統一（旧: prod緑） */ .kt-tag--free{background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker-ink);border-color:transparent;font-weight:700;} /* ページ別監査: セミナー詳細ヒーローの素タグ（開催終了）はink-2。soft/freeバリアントは除外 */ .kt-article-hero .kt-cs-filter .kt-tag:not(.kt-tag--soft):not(.kt-tag--free){color:var(--wp--preset--color--ink-2);} .kt-sf-tags{margin-bottom:12px;} .kt-semfeat{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,2.8vw,40px);align-items:center;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.6vw,32px);} .kt-semfeat__visual img{width:100%;height:auto;display:block;border-radius:var(--wp--custom--radius--m);border:1px solid var(--wp--custom--line);box-shadow:0 14px 32px rgba(26,26,31,.10);} .kt-semfeat__body{min-width:0;} .kt-sf-event{font-size:13px;color:var(--wp--preset--color--ink-2);font-weight:600;margin:0 0 10px;line-height:1.6;} .kt-sf-title{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(19px,2.4vw,26px);line-height:1.4;letter-spacing:-.01em;margin:0 0 14px;} .kt-sf-desc{font-size:14.5px;color:var(--wp--preset--color--ink-2);line-height:1.9;margin:0 0 20px;} .kt-sf-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-bottom:22px;} .kt-sf-meta__row{display:flex;gap:10px;font-size:13.5px;line-height:1.6;} .kt-sf-meta__row svg{width:18px;height:18px;color:var(--wp--preset--color--tracker);flex-shrink:0;margin-top:1px;} .kt-sf-meta__row--wide{grid-column:1 / -1;} .kt-sf-meta__k{display:inline-block;color:var(--wp--preset--color--ink-2);font-weight:600;margin-right:8px;} .kt-sf-meta__v{color:var(--wp--preset--color--ink);font-weight:600;} .kt-sf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .kt-sf-btn{display:inline-flex;align-items:center;gap:8px;box-shadow:var(--wp--custom--shadow--cta);} .kt-sf-btn:hover{box-shadow:var(--wp--custom--shadow--cta-hover);} /* ラッパーなしボタンのhover影（サイドカードと同対応） */ .kt-sf-btn svg{width:17px;height:17px;} .kt-sem-empty{text-align:center;background:var(--wp--preset--color--bg-off);border:1.5px dashed var(--wp--custom--line-2);border-radius:var(--wp--custom--radius--l);padding:clamp(34px,5vw,56px);} .kt-sem-empty__ic{width:64px;height:64px;border-radius:50%;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);color:var(--wp--preset--color--tracker);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;} .kt-sem-empty__ic svg{width:30px;height:30px;} .kt-sem-empty h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(18px,2.2vw,22px);margin:0 0 10px;} .kt-sem-empty p{font-size:14.5px;color:var(--wp--preset--color--ink-2);line-height:1.85;max-width:34em;margin:0 auto 20px;} .kt-sem-empty__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .kt-arc-year{display:flex;align-items:center;gap:14px;margin:clamp(28px,3.4vw,40px) 0 16px;} .kt-arc-year__y{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;line-height:1;} .kt-arc-year__rule{flex:1;height:1px;background:var(--wp--custom--line);} .kt-arc-list{display:flex;flex-direction:column;gap:10px;} .kt-arc-row{display:flex;align-items:center;gap:16px;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:16px 20px;text-decoration:none;color:var(--wp--preset--color--ink);transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease),border-color .3s var(--wp--custom--ease);} .kt-arc-row:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(26,26,31,.10);border-color:var(--wp--preset--color--tracker);} .kt-arc-thumb{width:112px;height:60px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);display:flex;align-items:center;justify-content:center;} .kt-arc-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .kt-arc-date{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14px;color:var(--wp--preset--color--ink-2);min-width:92px;flex-shrink:0;} .kt-arc-kind{font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;min-width:104px;text-align:center;flex-shrink:0;} .kt-arc-kind--own{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);} .kt-arc-kind--guest{background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);} .kt-arc-title{flex:1;min-width:0;font-weight:700;font-size:clamp(14.5px,1.7vw,16px);line-height:1.55;} .kt-arc-sub{display:block;font-weight:600;font-size:12.5px;color:var(--wp--preset--color--ink-2);margin-top:4px;line-height:1.6;} .kt-arc-end{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--wp--preset--color--tracker);} .kt-arc-end svg{width:18px;height:18px;} .kt-arc-note{margin-top:18px;font-size:13px;color:var(--wp--preset--color--ink-2);line-height:1.8;} @media(max-width:781px){ .kt-semfeat{grid-template-columns:1fr;gap:20px;} .kt-sf-meta{grid-template-columns:1fr;} .kt-arc-row{flex-wrap:wrap;gap:10px 12px;} .kt-arc-thumb{width:84px;height:46px;} .kt-arc-date{min-width:0;} .kt-arc-title{flex:1 0 100%;order:3;} .kt-arc-end{order:4;margin-left:auto;} } /* ====== kamui tracker 製品ページ（カンプ10） ====== */ /* 写真ヒーロー trackerスクリム */ .kt-accent-tracker.kt-hero-photo::after{background:linear-gradient(90deg,rgba(253,238,236,.97) 0%,rgba(253,238,236,.92) 38%,rgba(253,238,236,.55) 64%,rgba(253,238,236,0) 100%);} /* データバンド */ .kt-databand{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:24px;} .kt-databand__d{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--s);padding:34px 16px;min-height:150px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;} .kt-databand__l{font-size:13px;color:var(--wp--preset--color--ink-2);font-weight:600;line-height:1.3;} .kt-databand__l .sub{font-size:.82em;} .kt-databand__n{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(34px,4vw,46px);color:var(--wp--preset--color--tracker);line-height:1;} .kt-databand__n span{font-size:.4em;font-weight:700;margin-left:2px;} .kt-h2small{font-size:12px;font-weight:400;color:var(--wp--preset--color--ink-2);margin-left:4px;} /* 中央揃えカード＋アイコン丸＋番号 */ .kt-card--center{text-align:center;} .kt-knum{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:14px;color:var(--wp--preset--color--tracker);display:block;margin-bottom:6px;} .kt-ci{width:68px;height:68px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 16px;} .kt-ci img{width:84%;height:84%;object-fit:contain;display:block;} a.kt-cardlink{display:block;text-decoration:none;color:var(--wp--preset--color--ink);} a.kt-cardlink:hover{border-color:var(--wp--preset--color--tracker);} /* 機能紹介 2カラム行 */ .kt-frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:center;margin-bottom:clamp(20px,3vw,32px);} .kt-frow__check{display:flex;flex-direction:column;gap:9px;margin-top:14px;} .kt-frow__check div{font-size:15px;display:flex;gap:8px;line-height:1.8;} .kt-frow__check img{width:16px;height:16px;flex-shrink:0;margin-top:5px;} .kt-frow h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(20px,2.4vw,26px);line-height:1.4;margin:10px 0 12px;} .kt-lede-img{width:100%;border-radius:var(--wp--custom--radius--l);border:1px solid var(--wp--custom--line);display:block;} @media(max-width:781px){.kt-frow{grid-template-columns:1fr;}.kt-frow--imgleft > div:first-child{order:2;}} /* 料金カードのアイコン・価格表記 */ .kt-plan__pi{width:46px;height:46px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;} .kt-plan__pi--ads{background:var(--wp--preset--color--ads-soft);color:var(--wp--preset--color--ads);} .kt-plan__pi img{width:26px;height:26px;object-fit:contain;} .kt-plan__pi svg{width:24px;height:24px;} .kt-plan__price span{font-size:.4em;font-weight:700;} .kt-plan__price .per{color:var(--wp--preset--color--ink-2);font-weight:600;} .kt-plan--featured{border-width:2px;box-shadow:0 20px 50px rgba(242,107,98,.16);} /* 関連サービスカード（map-grid svc-card） */ .kt-smap{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,20px);margin-top:24px;} @media(max-width:781px){.kt-smap{grid-template-columns:1fr;}} .kt-scard{position:relative;display:flex;flex-direction:column;border-radius:var(--wp--custom--radius--l);padding:clamp(24px,3vw,38px);overflow:hidden;text-decoration:none;color:var(--wp--preset--color--ink);border:1.5px solid transparent;transition:transform .45s var(--wp--custom--ease),box-shadow .45s var(--wp--custom--ease);} /* Part E: リンクであるカード（TOP=a.kt-scard）・リンク内包カードのみhover演出（/youtube-adの非リンクdivは対象外） */ a.kt-scard:hover,.kt-scard:has(a):hover{transform:translateY(-8px) scale(1.012);box-shadow:0 28px 56px rgba(26,26,31,.16);} .kt-scard__deco{position:absolute;border-radius:50%;opacity:.5;pointer-events:none;width:200px;height:200px;top:-70px;right:-50px;} .kt-scard__top{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative;z-index:2;} .kt-scard__icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .kt-scard__icon svg{width:28px;height:28px;} .kt-scard__role{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;} .kt-scard__name{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;line-height:1.2;margin-top:3px;} .kt-scard__desc{position:relative;z-index:2;font-size:14.5px;line-height:1.8;margin-bottom:20px;color:var(--wp--preset--color--ink-2);} .kt-scard__foot{position:relative;z-index:2;margin-top:auto;display:flex;align-items:center;gap:8px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14px;} .kt-scard__foot svg{width:17px;height:17px;transition:transform .3s var(--wp--custom--ease);} a.kt-scard:hover .kt-scard__foot svg,.kt-scard:has(a):hover .kt-scard__foot svg{transform:translateX(5px);} .kt-scard--prod{background:var(--wp--preset--color--prod-soft);} .kt-scard--prod .kt-scard__icon{background:var(--wp--preset--color--prod);color:#fff;} .kt-scard--prod .kt-scard__role,.kt-scard--prod .kt-scard__foot{color:var(--wp--preset--color--prod-ink);} .kt-scard--consult{background:var(--wp--preset--color--consult-soft);} .kt-scard--consult .kt-scard__icon{background:var(--wp--preset--color--consult);color:#fff;} .kt-scard--consult .kt-scard__role,.kt-scard--consult .kt-scard__foot{color:var(--wp--preset--color--consult);} .kt-scard--connect{background:var(--wp--preset--color--connect-soft);} .kt-scard--connect .kt-scard__icon{background:var(--wp--preset--color--connect);color:var(--wp--preset--color--ink);} .kt-scard--connect .kt-scard__role,.kt-scard--connect .kt-scard__foot{color:#8a7400;} .kt-scard--ads{background:var(--wp--preset--color--ads-soft);} .kt-scard--ads .kt-scard__icon{background:var(--wp--preset--color--ads);color:#fff;} .kt-scard--ads .kt-scard__role,.kt-scard--ads .kt-scard__foot{color:var(--wp--preset--color--ads-ink);} .kt-scard--prod .kt-scard__deco{background:var(--wp--preset--color--prod);} .kt-scard--consult .kt-scard__deco{background:var(--wp--preset--color--consult);} .kt-scard--connect .kt-scard__deco{background:var(--wp--preset--color--connect);} .kt-scard--ads .kt-scard__deco{background:var(--wp--preset--color--ads);} /* コーラルCTAバンド */ .kt-ctaband{background:var(--wp--preset--color--tracker);color:#fff;border-radius:var(--wp--custom--radius--l);padding:clamp(28px,4vw,46px);text-align:center;} .kt-ctaband h2{color:#fff;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(22px,3vw,33px);margin:0 0 8px;line-height:1.3;} .kt-ctaband p{color:rgba(255,255,255,.92);margin:0 0 22px;} .kt-ctaband .kt-cta{justify-content:center;margin-top:0;} .kt-ctaband .kt-btn-w .wp-block-button__link{background:#fff;color:var(--wp--preset--color--tracker);} .kt-ctaband .kt-btn-o .wp-block-button__link{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);} /* ====== 第1弾改修: フロー図・仕組み図・パネル・サービスマップ・CTAカード・フッター ====== */ /* アイコン丸のアクセント連動＋白抜き */ .kt-accent-prod .kt-ci{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);} .kt-accent-connect .kt-ci{background:var(--wp--preset--color--connect-soft);color:var(--wp--preset--color--ink);} .kt-accent-ads .kt-ci{background:var(--wp--preset--color--ads-soft);color:var(--wp--preset--color--ads);} .kt-ci--white{background:#fff!important;} /* ソフトパネル（帯状の薄色枠） */ .kt-softpanel{border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.6vw,32px);background:var(--wp--preset--color--tracker-soft);border:1.5px solid rgba(242,107,98,.3);} .kt-softpanel--prod{background:var(--wp--preset--color--prod-soft);border-color:rgba(97,151,51,.3);} .kt-softpanel--connect{background:var(--wp--preset--color--connect-soft);border-color:rgba(240,200,0,.32);} .kt-softpanel__shot{width:100%;height:190px;object-fit:cover;object-position:center top;display:block;border:1px solid var(--wp--custom--line);border-radius:12px;margin-bottom:18px;background:#fff;} .kt-softpanel__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .kt-softpanel__row img{width:24px;height:24px;flex-shrink:0;} .kt-softpanel__row div{flex:1;min-width:260px;font-size:15px;line-height:1.85;} .kt-softpanel .kt-databand{margin:0 0 20px;} .kt-softpanel .kt-cards{margin-top:0;} .kt-badge-tag{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;margin-bottom:16px;} .kt-badge-tag img{width:18px;height:18px;object-fit:contain;} /* フロー図（flowline） */ .kt-flow{background:var(--wp--preset--color--bg-off);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(28px,3.4vw,46px) clamp(16px,2.4vw,30px);display:grid;grid-auto-columns:1fr;grid-auto-flow:column;margin-top:24px;} .kt-flow__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(12px,1.8vw,26px);} .kt-flow__step:not(:last-child)::after{content:"";position:absolute;top:46px;right:-9px;width:18px;height:18px;border-top:2.5px solid var(--kt-flow-c,var(--wp--preset--color--tracker));border-right:2.5px solid var(--kt-flow-c,var(--wp--preset--color--tracker));transform:rotate(45deg);opacity:.4;} .kt-accent-prod .kt-flow{--kt-flow-c:var(--wp--preset--color--prod);} .kt-accent-ads .kt-flow{--kt-flow-c:var(--wp--preset--color--ads);} .kt-flow__num{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--kt-flow-c,var(--wp--preset--color--tracker));} .kt-flow__ic{width:66px;height:66px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);display:flex;align-items:center;justify-content:center;margin:14px 0 13px;} .kt-accent-prod .kt-flow__ic{background:var(--wp--preset--color--prod-soft);} .kt-accent-ads .kt-flow__ic{background:var(--wp--preset--color--ads-soft);} .kt-flow__ic img{width:58%;height:58%;object-fit:contain;display:block;} .kt-flow__step h4{font-weight:800;font-size:15.5px;line-height:1.4;margin:0;font-family:var(--wp--preset--font-family--display);} .kt-flow__step p{font-size:13px;color:var(--wp--preset--color--ink-2);margin:8px 0 0;line-height:1.75;} .kt-flow__dur{display:inline-block;background:#fff;border:1px solid var(--wp--custom--line);border-radius:999px;padding:3px 12px;font-weight:700;font-size:12.5px;color:var(--wp--preset--color--ink);} @media(max-width:781px){.kt-flow{grid-auto-flow:row;gap:30px;}.kt-flow__step:not(:last-child)::after{top:auto;bottom:-24px;right:auto;left:50%;transform:translateX(-50%) rotate(135deg);}} /* 仕組み図（cmech） */ .kt-cmech{margin-top:24px;} .kt-cmech__flow{display:grid;grid-template-columns:1fr auto 1.28fr auto 1fr;gap:clamp(8px,1.2vw,16px);align-items:stretch;} .kt-cmech__col{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;min-width:0;} .kt-cmech__ic{width:60px;height:60px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;} .kt-cmech__ic--green{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);} .kt-cmech__ic svg{width:30px;height:30px;} .kt-cmech__h{text-align:center;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(19px,2.2vw,24px);line-height:1.2;margin:0;} .kt-cmech__d{text-align:center;font-size:13.5px;color:var(--wp--preset--color--ink-2);line-height:1.75;margin:8px 0 0;} .kt-cmech__div{height:1px;background:var(--wp--custom--line);margin:16px 0;} .kt-cmech__sub{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;margin-bottom:10px;color:var(--wp--preset--color--tracker);} .kt-cmech__sub--green{color:var(--wp--preset--color--prod);} .kt-cmech__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .kt-cmech__list li{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:600;line-height:1.6;} .kt-cmech__list li svg{flex-shrink:0;width:19px;height:19px;color:var(--wp--preset--color--tracker);margin-top:2px;} .kt-cmech__list--green li svg{color:var(--wp--preset--color--prod);} .kt-cmech__conn{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 2px;color:var(--wp--preset--color--tracker);} .kt-cmech__conn--green{color:var(--wp--preset--color--prod);} .kt-cmech__arw{display:flex;align-items:center;gap:6px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:13px;white-space:nowrap;} .kt-cmech__arw svg{width:20px;height:20px;} .kt-cmech__center{background:var(--wp--preset--color--tracker-soft);border-color:transparent;} .kt-cmech__badge{align-self:center;background:var(--wp--preset--color--tracker-ink);color:#fff;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:15px;padding:9px 22px;border-radius:999px;} .kt-cmech__csub{text-align:center;font-weight:700;font-size:13.5px;margin:12px 0 14px;} .kt-cmech__role{display:flex;align-items:center;gap:12px;background:var(--wp--preset--color--bg);border-radius:16px;padding:13px 16px;margin-bottom:10px;} .kt-cmech__roleic{width:42px;height:42px;border-radius:12px;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .kt-cmech__roleic svg{width:22px;height:22px;} .kt-cmech__rolen{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:15px;line-height:1.3;} .kt-cmech__roled{font-size:12.5px;color:var(--wp--preset--color--ink-2);line-height:1.6;margin-top:2px;} .kt-cmech__down{text-align:center;color:var(--wp--preset--color--tracker);margin:2px 0 10px;} .kt-cmech__down svg{width:24px;height:24px;} .kt-cmech__result{text-align:center;font-weight:700;font-size:14.5px;line-height:1.7;margin:0;} .kt-cmech__result strong{color:var(--wp--preset--color--tracker);font-weight:800;} .kt-cmech__banner{margin-top:16px;background:var(--wp--preset--color--tracker-soft);border-radius:var(--wp--custom--radius--l);padding:18px 26px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;font-weight:700;font-size:clamp(15px,1.8vw,18px);line-height:1.6;} .kt-cmech__banner svg{width:26px;height:26px;color:var(--wp--preset--color--tracker);flex-shrink:0;} .kt-cmech__banner strong{color:var(--wp--preset--color--tracker);font-weight:800;} @media(max-width:900px){.kt-cmech__flow{grid-template-columns:1fr;}.kt-cmech__conn{flex-direction:row;justify-content:center;gap:32px;padding:6px 0;}.kt-cmech__arw svg{transform:rotate(90deg);}} /* PHASE画像カード（castingの圧倒的な強み） */ .kt-phaseshot{width:100%;height:124px;object-fit:cover;object-position:top;border:1px solid var(--wp--custom--line);border-radius:12px;margin-bottom:12px;background:#fff;display:block;} .kt-h3ico{width:22px;height:22px;object-fit:contain;vertical-align:-5px;display:inline-block;} /* サービスマップ: tracker全幅カード＋レイヤーラベル＋バッジ */ .kt-scard--tracker{grid-column:1 / -1;background:var(--wp--preset--color--tracker-soft);} .kt-scard--tracker .kt-scard__icon{background:var(--wp--preset--color--tracker);color:#fff;} .kt-scard--tracker .kt-scard__role,.kt-scard--tracker .kt-scard__foot{color:#CE4234;} .kt-scard--tracker .kt-scard__deco{background:var(--wp--preset--color--tracker);} .kt-scard__badge{position:absolute;top:16px;right:18px;z-index:2;background:var(--wp--preset--color--ads-ink);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;} .kt-scard--tracker .kt-tmini{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2;margin:6px 0 14px;} .kt-tmini__d{flex:1;min-width:96px;background:#fff;border-radius:16px;padding:16px;border:1px solid var(--wp--custom--line);} .kt-tmini__n{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(20px,2.6vw,30px);line-height:1;color:var(--wp--preset--color--tracker);} .kt-tmini__l{font-size:12px;color:var(--wp--preset--color--ink-2);margin-top:7px;font-weight:600;} .kt-slayer{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--ink-2);} .kt-slayer::after{content:"";flex:1;height:1px;background:var(--wp--custom--line);} .kt-slayer i{width:10px;height:10px;border-radius:50%;background:var(--wp--preset--color--tracker);display:inline-block;} .kt-slayer--svc i{background:linear-gradient(135deg,var(--wp--preset--color--prod),var(--wp--preset--color--ads));} /* トップ末尾CTAカード */ .kt-ctacards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px);margin-top:24px;} @media(max-width:781px){.kt-ctacards{grid-template-columns:1fr;}} .kt-ctacard{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(24px,3vw,38px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--wp--preset--color--ink);transition:transform .35s var(--wp--custom--ease),box-shadow .35s var(--wp--custom--ease);} .kt-ctacard:hover{transform:translateY(-5px);box-shadow:var(--wp--custom--shadow--card);} .kt-ctacard h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(17px,2vw,21px);margin:0;} .kt-ctacard p{font-size:14px;color:var(--wp--preset--color--ink-2);margin:0;line-height:1.8;} .kt-ctacard .kt-ctacard__btn{margin-top:auto;padding-top:10px;} /* フッター（カンプ準拠） */ .kt-footer{background:var(--wp--preset--color--bg);border-top:1px solid var(--wp--custom--line);} .kt-footer__top{max-width:1200px;margin:0 auto;padding:clamp(36px,5vw,60px) var(--wp--preset--spacing--pad-x) clamp(28px,4vw,44px);display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:clamp(18px,2.6vw,32px);} @media(max-width:980px){.kt-footer__top{grid-template-columns:repeat(2,1fr);}} .kt-footer__brand img{height:32px;width:auto;display:block;margin-bottom:12px;} .kt-footer__brand p{font-size:13.5px;color:var(--wp--preset--color--ink-2);line-height:1.8;margin:0;} .kt-footer .wp-block-site-logo img{height:32px;width:auto;} .kt-footer__col h4{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px;color:var(--wp--preset--color--ink-2);} .kt-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .kt-footer__col a{font-size:14px;line-height:1.45;color:var(--wp--preset--color--ink);text-decoration:none;} /* H-8: 14px・実寸高さ約20px */ .kt-footer__col a:hover{color:var(--wp--preset--color--tracker-ink);} .kt-footer__bar{border-top:1px solid var(--wp--custom--line);} .kt-footer__barin{max-width:1200px;margin:0 auto;padding:16px var(--wp--preset--spacing--pad-x);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--wp--preset--color--ink-2);} .kt-footer__legal{display:flex;gap:18px;} .kt-footer__legal a{color:var(--wp--preset--color--ink-2);text-decoration:none;} .kt-footer__legal a:hover{color:var(--wp--preset--color--tracker-ink);} .kt-softpanel--row{margin-top:16px;} .kt-ico img{width:26px;height:26px;object-fit:contain;display:block;} .kt-ctacard__btn--outline{background:var(--wp--preset--color--bg);color:var(--wp--preset--color--ink);border:1.5px solid var(--wp--custom--line-2);box-shadow:none;} /* R-13 */ /* ====== 第2弾: FAQ・資料DL一覧/フォーム・ガイドハブ ====== */ /* FAQリッチ版（Qバッジ・開時ハイライト。既存kt-faqを拡張） */ .kt-faq--rich details{transition:border-color .2s,box-shadow .25s var(--wp--custom--ease);background:var(--wp--preset--color--bg);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--s);} /* C24: kt-faq__itemと同体裁 */ .kt-faq--rich details:has(summary:hover){border-color:var(--wp--custom--line-2);} /* Part E: 操作対象=summaryのhoverに限定 */ .kt-faq--rich details[open]{border-color:var(--wp--preset--color--tracker);box-shadow:0 12px 30px rgba(242,107,98,.10);} .kt-faq--rich summary{display:flex;justify-content:space-between;align-items:center;gap:12px;} .kt-faq__q{display:flex;align-items:center;gap:11px;} .kt-faq__qm{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--wp--preset--color--tracker);color:#fff;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--display);} .kt-faq__ic{transition:transform .2s;color:var(--wp--preset--color--ink-2);flex-shrink:0;width:20px;height:20px;} .kt-faq--rich details[open] .kt-faq__ic{transform:rotate(45deg);} /* FAQカテゴリカード（上部色ライン） */ .kt-cat-cards .kt-card{border-top:3px solid var(--wp--custom--line);} .kt-cat-cards .kt-card:nth-child(1){border-top-color:var(--wp--preset--color--tracker);} .kt-cat-cards .kt-card:nth-child(2){border-top-color:var(--wp--preset--color--ads);} .kt-cat-cards .kt-card:nth-child(3){border-top-color:var(--wp--preset--color--prod);} .kt-cat-cards .kt-card:nth-child(4){border-top-color:var(--wp--preset--color--connect);} .kt-cat-cards .kt-ci{width:72px;height:72px;} /* FAQ節見出し（アイコンバッジ付き） */ .kt-faqhead{display:flex;align-items:center;gap:clamp(14px,2vw,20px);margin-bottom:clamp(28px,4vw,44px);} .kt-faqhead__ic{flex-shrink:0;width:clamp(58px,6vw,74px);height:clamp(58px,6vw,74px);border-radius:20px;background:var(--wp--preset--color--tracker-soft);display:inline-flex;align-items:center;justify-content:center;} .kt-faqhead__ic img{width:82%;height:82%;object-fit:contain;display:block;} .kt-faqhead .kt-eyebrow{margin-bottom:2px;} .kt-faqhead h2{margin:0;} /* FAQ導線パネル */ .kt-faqlead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--wp--preset--color--tracker-soft);border-radius:var(--wp--custom--radius--l);padding:clamp(24px,3vw,40px);} .kt-faqlead__ic{flex-shrink:0;width:60px;height:60px;border-radius:16px;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(242,107,98,.14);} .kt-faqlead__ic img{width:78%;height:78%;object-fit:contain;display:block;} .kt-faqlead__txt{flex:1;min-width:260px;} .kt-faqlead__txt h2{margin:0 0 6px;font-size:clamp(19px,2.4vw,26px);} .kt-faqlead__txt p{margin:0;color:var(--wp--preset--color--ink-2);font-size:14.5px;line-height:1.8;} /* 資料DL: PICK UP大型カード */ .kt-dlcard{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(22px,3vw,44px);align-items:center;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(22px,3vw,40px);overflow:hidden;} @media(max-width:781px){.kt-dlcard{grid-template-columns:1fr;gap:22px;}} .kt-dl-figure{position:relative;} .kt-dl-figure img{width:100%;display:block;border-radius:var(--wp--custom--radius--m);border:1px solid var(--wp--custom--line);box-shadow:0 18px 44px rgba(26,26,31,.16);background:#fff;} .kt-dl-flag{position:absolute;top:-12px;left:-10px;z-index:3;background:var(--wp--preset--color--tracker);color:#fff;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;padding:8px 15px;border-radius:999px;box-shadow:0 10px 22px rgba(242,107,98,.34);transform:rotate(-3deg);} .kt-dl-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--wp--preset--color--tracker-ink);margin-bottom:12px;} .kt-dl-kicker i{width:8px;height:8px;border-radius:50%;background:var(--wp--preset--color--tracker);display:inline-block;} .kt-dl-toc{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:0 0 20px;padding:0;} @media(max-width:781px){.kt-dl-toc{grid-template-columns:1fr;}} .kt-dl-toc li{list-style:none;display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.6;} .kt-dl-toc li svg{color:var(--wp--preset--color--tracker);width:17px;height:17px;flex-shrink:0;margin-top:1px;} .kt-dl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;} .kt-dl-meta .m{display:inline-flex;align-items:center;gap:6px;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--wp--preset--color--ink-2);} /* 資料DL: 絞り込み＋カードグリッド */ .kt-rq-filter{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:clamp(18px,2.2vw,26px);margin-bottom:clamp(26px,3vw,36px);} .kt-rq-frow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;} .kt-rq-frow + .kt-rq-frow{margin-top:14px;padding-top:14px;border-top:1px solid var(--wp--custom--line);} .kt-rq-flabel{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--wp--preset--color--ink-2);min-width:76px;} .kt-rq-btn{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14px;line-height:1;padding:11px 18px;border-radius:999px;border:1.5px solid var(--wp--custom--line);background:var(--wp--preset--color--bg);color:var(--wp--preset--color--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;} .kt-rq-btn .n{font-size:12px;color:var(--wp--preset--color--ink-2);margin-left:6px;font-weight:600;} .kt-rq-btn[aria-pressed="true"]{background:var(--wp--preset--color--tracker-ink);border-color:var(--wp--preset--color--tracker-ink);color:#fff;} .kt-rq-btn[aria-pressed="true"] .n{color:rgba(255,255,255,.78);} .kt-rq-count{margin-top:16px;font-size:13.5px;color:var(--wp--preset--color--ink-2);} .kt-rq-count b{font-family:var(--wp--preset--font-family--display);font-size:17px;color:var(--wp--preset--color--ink);} .kt-rq-reset{margin-left:10px;font-size:13px;font-weight:700;color:var(--wp--preset--color--tracker);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;} .kt-rq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:clamp(16px,1.8vw,22px);} .kt-rq-card{display:flex;flex-direction:column;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);overflow:hidden;color:inherit;text-decoration:none;transition:transform .35s var(--wp--custom--ease),box-shadow .35s var(--wp--custom--ease);} .kt-rq-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,26,31,.14);} .kt-rq-card[hidden]{display:none;} .kt-rq-fig{position:relative;aspect-ratio:16/10;background:var(--wp--preset--color--bg-off);border-bottom:1px solid var(--wp--custom--line);overflow:hidden;} .kt-rq-fig img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;} .kt-rq-cat{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:11px;padding:6px 12px;border-radius:999px;color:#fff;box-shadow:0 6px 16px rgba(26,26,31,.18);} .kt-rq-cat--service{background:var(--wp--preset--color--tracker-ink);} .kt-rq-cat--plan{background:var(--wp--preset--color--prod-ink);} .kt-rq-cat--case{background:var(--wp--preset--color--ads-ink);} /* PartF: ads-ink 白5.83:1 */ .kt-rq-cat--useful{background:var(--wp--preset--color--consult);} .kt-rq-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px;} .kt-rq-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;} .kt-rq-tags span{background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--wp--preset--color--ink-2);} .kt-rq-title{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:15.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .kt-rq-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:7px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:13.5px;color:var(--wp--preset--color--tracker);} .kt-rq-foot svg{width:16px;height:16px;} .kt-rq-empty{text-align:center;padding:60px 20px;color:var(--wp--preset--color--ink-2);font-size:15px;display:none;} /* 資料DLフォーム（2カラム） */ .kt-formwrap{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,3vw,36px);align-items:start;} @media(max-width:900px){.kt-formwrap{grid-template-columns:1fr;}} .kt-docaside{background:var(--wp--preset--color--bg-off);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.4vw,28px);} .kt-docaside img{width:100%;display:block;border-radius:var(--wp--custom--radius--m);border:1px solid var(--wp--custom--line);background:#fff;margin-bottom:14px;} .kt-docaside h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(16px,2vw,19px);margin:8px 0 8px;} .kt-docaside p{font-size:13.5px;color:var(--wp--preset--color--ink-2);line-height:1.85;margin:0 0 14px;} /* ガイドハブ */ .kt-gsteps .kt-card{border-top:3px solid var(--wp--preset--color--tracker);} .kt-gsteps .kt-ci{width:72px;height:72px;} .kt-ghead{display:flex;align-items:center;gap:14px;padding-left:15px;border-left:4px solid var(--wp--custom--line);margin:clamp(30px,4vw,44px) 0 16px;} .kt-ghead--analysis{border-left-color:var(--wp--preset--color--tracker);} .kt-ghead--trend{border-left-color:var(--wp--preset--color--prod);} .kt-ghead--search{border-left-color:var(--wp--preset--color--ads);} .kt-ghead--tieup{border-left-color:var(--wp--preset--color--connect);} .kt-ghead__ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;background:var(--wp--preset--color--tracker-soft);border-radius:14px;} .kt-ghead__ic img{width:82%;height:82%;object-fit:contain;display:block;} .kt-ghead h3{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(18px,2.2vw,23px);margin:0;} .kt-gcard{border-top:3px solid var(--wp--custom--line);} .kt-gcard .kt-knum{margin:10px 0 0;} .kt-gcard--prep{opacity:.5;pointer-events:none;box-shadow:none;background:var(--wp--preset--color--bg-off);} .kt-gcard--prep .kt-knum{color:var(--wp--preset--color--ink-2)!important;font-weight:700;} .kt-knum--prod{color:var(--wp--preset--color--prod);} .kt-knum--ads{color:var(--wp--preset--color--ads);} .kt-knum--connect{color:#8a7400;} /* ====== 第3弾: 詳細2カラム・サイドカード・目次・表・記事メタ・contact 2カラム ====== */ .kt-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);align-items:start;} .kt-detail__main{min-width:0;} /* 2カラム内では本文とサイドバーの頭を揃える（カンプ.detail=align-items:start・両列とも余白0） */ .kt-detail__main.kt-article{padding-top:0;} .kt-detail__main.kt-article > .wp-block-post-content{margin-block-start:0;} .kt-detail > .kt-daside{margin-block-start:0;} .kt-daside{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;} @media(max-width:960px){.kt-detail{grid-template-columns:1fr;}.kt-daside{position:static;}} .kt-sidecard{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.4vw,26px);box-shadow:0 18px 40px rgba(26,26,31,.08);} .kt-sc-h{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:16px;margin:0 0 12px;line-height:1.4;} .kt-sc-sub{font-size:13px;color:var(--wp--preset--color--ink-2);margin:0 0 14px;line-height:1.7;} .kt-sidecard .kt-scbtn{display:block;width:100%;text-align:center;box-sizing:border-box;} .kt-sidecard .kt-scbtn + .kt-scbtn{margin-top:10px;} .kt-scbtn--o,.kt-scbtn--outline{background:var(--wp--preset--color--bg)!important;color:var(--wp--preset--color--ink)!important;border:1.5px solid var(--wp--custom--line-2);box-shadow:none;} /* R-13: 白地ボタンは影なし（B案は塗りのみ影） */ /* サイドカードのボタンは.wp-block-buttonラッパーがないため、hoverの影/反転を明示付与（他ボタンと同挙動に） */ .kt-scbtn:not(.kt-scbtn--outline):hover{box-shadow:var(--wp--custom--shadow--cta-hover);} .kt-scbtn--o:hover,.kt-scbtn--outline:hover{background:var(--wp--preset--color--ink)!important;color:var(--wp--preset--color--bg)!important;border-color:var(--wp--preset--color--ink);box-shadow:none;} /* Part D②: B案は反転のみ・影は変化なし（A32期待値） */ .kt-proflist{list-style:none;margin:12px 0 0;padding:0;} .kt-proflist li{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px dashed var(--wp--custom--line);} .kt-proflist li:last-child{border-bottom:none;} .kt-proflist .k{color:var(--wp--preset--color--ink-2);flex-shrink:0;} .kt-proflist .v{font-weight:600;text-align:right;} .kt-siderel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;} .kt-siderel a{display:block;padding:9px 0;font-size:13.5px;line-height:1.6;color:var(--wp--preset--color--ink);text-decoration:none;border-bottom:1px solid var(--wp--custom--line);} .kt-siderel li:last-child a{border-bottom:none;} .kt-siderel a:hover{color:var(--wp--preset--color--tracker);} /* 目次（Part M: B案 .toc。margin32pxはWPブロック余白との整合で維持） */ .kt-toc{background:var(--wp--preset--color--bg-off);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:clamp(18px,2.4vw,24px);margin:0 0 32px;} /* カンプ準拠: 上は詰めてサイドバーと頭を揃える（下32pxはWPブロック余白との整合で維持） */ .kt-toc__h{font-size:12.5px;margin:0 0 12px;font-family:var(--wp--preset--font-family--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--ink-2);display:flex;align-items:center;gap:9px;} .kt-toc__h i{width:9px;height:9px;border-radius:50%;background:var(--wp--preset--color--tracker);display:inline-block;} .kt-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;} .kt-toc li{counter-increment:toc;} .kt-toc a{display:flex;gap:11px;align-items:baseline;padding:7px 0;font-size:14.5px;line-height:1.6;color:var(--wp--preset--color--ink);text-decoration:none;border-bottom:1px solid var(--wp--custom--line);transition:color .2s,padding-left .2s;} /* カンプ .toc a{color:ink}（Part M整理で欠落していた色を復元） */ .kt-toc li:last-child a{border-bottom:none;} .kt-toc a:hover{color:var(--wp--preset--color--tracker);padding-left:4px;} .kt-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;color:var(--wp--preset--color--tracker);flex-shrink:0;} /* 表 */ .kt-tblwrap{overflow-x:auto;} .kt-ktable{width:100%;border-collapse:collapse;font-size:14.5px;} .kt-ktable th,.kt-ktable td{border:1px solid var(--wp--custom--line);padding:12px 14px;text-align:left;vertical-align:top;} .kt-ktable th{background:var(--wp--preset--color--bg-off);font-weight:700;white-space:nowrap;} /* 終了ノート */ .kt-ended{display:flex;gap:14px;align-items:flex-start;background:var(--wp--preset--color--bg-off);border:1.5px solid var(--wp--custom--line);border-left:4px solid var(--wp--preset--color--ink-2);border-radius:var(--wp--custom--radius--m);padding:clamp(16px,2vw,20px);margin-bottom:clamp(24px,3vw,30px);} .kt-ended svg{color:var(--wp--preset--color--ink-2);width:22px;height:22px;flex-shrink:0;margin-top:2px;} .kt-ended__h{font-weight:800;font-size:15.5px;margin:0 0 5px;} .kt-ended__b{font-size:14px;color:var(--wp--preset--color--ink-2);line-height:1.8;margin:0;} .kt-ended__b a{color:#CE4234;font-weight:700;} /* 記事メタチップ */ .kt-artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13.5px;color:var(--wp--preset--color--ink-2);margin-top:16px;} .kt-artmeta .m{display:inline-flex;align-items:center;gap:6px;} .kt-artmeta svg{width:15px;height:15px;color:var(--wp--preset--color--tracker);} .kt-lede{margin:0 0 clamp(24px,3.5vw,34px);} .kt-lede img{display:block;width:100%;height:auto;border-radius:var(--wp--custom--radius--l);border:1px solid var(--wp--custom--line);} .kt-lede--banner{max-width:680px;} /* ニュース行リスト */ .kt-newsrows{display:flex;flex-direction:column;gap:10px;} .kt-newsrow{display:flex;align-items:center;gap:16px;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:16px 20px;} .kt-newsrow .wp-block-post-date{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:14px;color:var(--wp--preset--color--ink-2);min-width:92px;flex-shrink:0;margin:0;} .kt-newsrow .wp-block-post-title{flex:1;min-width:0;font-weight:700;font-size:clamp(14.5px,1.7vw,16px);line-height:1.55;margin:0;} .kt-newsrow .wp-block-post-title a{text-decoration:none;color:var(--wp--preset--color--ink);} .kt-newsrow:hover{border-color:var(--wp--preset--color--tracker);} .kt-newsrow .wp-block-post-terms{font-size:12px;font-weight:700;margin:0;flex-shrink:0;} .kt-newsrow .wp-block-post-terms a{background:var(--wp--preset--color--tracker-soft);color:#CE4234;border-radius:999px;padding:5px 12px;text-decoration:none;} /* contact/trial 2カラム */ .kt-contacthero{display:grid;grid-template-columns:.9fr 1.1fr;column-gap:clamp(26px,3.6vw,56px);row-gap:clamp(20px,3vw,30px);align-items:start;} @media(max-width:960px){.kt-contacthero{grid-template-columns:1fr;}} .kt-ch-copy{min-width:0;padding-top:clamp(2px,1vw,12px);} .kt-ch-tel{background:rgba(255,255,255,.72);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);padding:15px 20px;margin-top:18px;display:inline-block;} .kt-ch-tel-lbl{display:block;font-size:13.5px;color:var(--wp--preset--color--ink-2);font-weight:600;} .kt-ch-tel-num{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:26px;line-height:1.25;display:inline-block;margin:2px 0;color:var(--wp--preset--color--ink);text-decoration:none;} .kt-ch-tel-time{display:block;font-size:12.5px;color:var(--wp--preset--color--ink-2);} .kt-ch-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;} .kt-ch-trust li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;} .kt-ch-trust svg{color:var(--wp--preset--color--tracker);width:22px;height:22px;flex-shrink:0;} .kt-ch-dl{margin-top:14px;font-size:14.5px;color:var(--wp--preset--color--tracker);font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;} .kt-ch-dl:hover{text-decoration:underline;} .kt-contacthero .kt-form{margin-top:0;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(20px,2.6vw,32px);box-shadow:0 18px 40px rgba(26,26,31,.08);} /* thanks この後の流れ */ .kt-ststeps{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;} .kt-ststep{flex:1;min-width:140px;background:var(--wp--preset--color--bg-off);border-radius:var(--wp--custom--radius--s);padding:16px;} .kt-ststep .sn{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:13px;color:var(--wp--preset--color--tracker);display:block;margin-bottom:6px;} .kt-ststep h4{font-weight:700;font-size:15px;margin:0;} .kt-ststep p{font-size:13px;color:var(--wp--preset--color--ink-2);margin:4px 0 0;line-height:1.7;} /* contact/trial 左カラムの見出しサイズ（カンプ .ch-copy h1 準拠） */ .kt-ch-copy h1{font-size:clamp(30px,4.1vw,50px);line-height:1.25;letter-spacing:-.01em;margin:10px 0 0;} .kt-ch-copy .kt-lead{margin-top:14px;max-width:38em;} /* C-1(2026-08-04): B案 .hero-lead=38em（PC760px/SP608px） */ /* ====== ブログ一覧（カンプ25: PICK UPカード＋テーマチップ＋左色ラインカード） ====== */ .kt-bl-pickhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;} .kt-bl-picktag{display:inline-flex;align-items:center;gap:7px;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--wp--preset--color--tracker-ink);background:var(--wp--preset--color--tracker-soft);padding:7px 14px;border-radius:999px;} .kt-bl-picktx{font-size:14px;font-weight:700;color:var(--wp--preset--color--ink-2);} .kt-bl-featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-bottom:clamp(40px,5.5vw,68px);} @media(max-width:781px){.kt-bl-featgrid{grid-template-columns:1fr;}} .kt-bl-feat{display:flex;flex-direction:column;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);overflow:hidden;transition:transform .4s var(--wp--custom--ease),box-shadow .4s var(--wp--custom--ease);} .kt-bl-feat:has(a:hover){transform:translateY(-8px);box-shadow:0 28px 56px rgba(26,26,31,.16);} /* Part E: リンクhover起点（カード全面はstretched-linkで被覆済み） */ .kt-bl-feat .wp-block-post-featured-image{aspect-ratio:16/10;overflow:hidden;background:var(--wp--preset--color--bg-off);margin:0;} .kt-bl-feat .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;} .kt-bl-feat__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;} .kt-bl-feat__body .wp-block-post-title{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(16px,1.9vw,18.5px);line-height:1.55;margin:12px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .kt-bl-feat__body .wp-block-post-title a{text-decoration:none;color:var(--wp--preset--color--ink);} .kt-bl-badge .wp-block-post-terms,.kt-bl-badge{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:11px;margin:0;} .kt-bl-badge a{background:var(--wp--preset--color--tracker-soft);color:#CE4234;padding:5px 11px;border-radius:999px;text-decoration:none;white-space:nowrap;} .kt-bl-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;} .kt-bl-foot .wp-block-post-date{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:12.5px;color:var(--wp--preset--color--ink-2);margin:0;} .kt-bl-more{display:inline-flex;align-items:center;gap:5px;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:12.5px;color:var(--wp--preset--color--tracker);} /* テーマチップ（カテゴリリンク） */ .kt-bl-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:clamp(16px,2vw,22px);background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);margin-bottom:clamp(20px,2.5vw,28px);} .kt-bl-flabel{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--wp--preset--color--ink-2);} .kt-bl-chips{display:flex;flex-wrap:wrap;gap:9px;} .kt-bl-chip{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:13.5px;line-height:1;padding:10px 16px;border-radius:999px;border:1.5px solid var(--wp--custom--line);background:var(--wp--preset--color--bg);color:var(--wp--preset--color--ink);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s;} .kt-bl-chip:hover{border-color:var(--wp--custom--line-2);} .kt-bl-chip[aria-current="page"],.kt-bl-chip--active{background:var(--wp--preset--color--ink);border-color:var(--wp--preset--color--ink);color:#fff;} /* 記事グリッドカード（左色ライン） */ .kt-bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(14px,1.8vw,20px);} @media(max-width:640px){.kt-bl-grid{grid-template-columns:1fr;}} .kt-bl-card{position:relative;display:flex;flex-direction:column;background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);overflow:hidden;transition:transform .35s var(--wp--custom--ease),box-shadow .35s var(--wp--custom--ease);} .kt-bl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wp--preset--color--tracker);z-index:2;} .kt-bl-card:has(a:hover){transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,26,31,.13);} /* Part E: 同上 */ .kt-bl-card .wp-block-post-featured-image{aspect-ratio:16/9;overflow:hidden;background:var(--wp--preset--color--bg-off);margin:0;} .kt-bl-card .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;} .kt-bl-card__body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px 24px;} .kt-bl-card__body .wp-block-post-title{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:16px;line-height:1.6;margin:13px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .kt-bl-card__body .wp-block-post-title a{text-decoration:none;color:var(--wp--preset--color--ink);} .kt-softpanel--consult{background:var(--wp--preset--color--consult-soft);border-color:rgba(109,111,113,.3);padding:16px 20px;} .kt-softpanel--consult .kt-softpanel__row svg{width:22px;height:22px;color:var(--wp--preset--color--consult);flex-shrink:0;} .kt-softpanel--consult .kt-softpanel__row div{font-size:15px;line-height:1.8;min-width:0;} /* AEフォーム埋め込み枠（案C） */ .kt-aeframe{background:var(--wp--preset--color--bg);border:1.5px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--l);padding:clamp(14px,2vw,24px);box-shadow:0 18px 40px rgba(26,26,31,.08);} /* ====== v10反映: ダーク最終CTA（トップ） ====== */ .kt-sec.kt-endcta,.kt-sec.kt-endcta:nth-of-type(even){background:var(--wp--preset--color--ink);color:#fff;position:relative;overflow:hidden;} .kt-endcta .kt-eshape{position:absolute;border-radius:50%;pointer-events:none;} .kt-endcta .kt-eshape--1{width:360px;height:360px;background:radial-gradient(circle,rgba(242,107,98,.45),transparent 68%);top:-120px;left:-80px;} .kt-endcta .kt-eshape--2{width:320px;height:320px;background:radial-gradient(circle,rgba(45,127,249,.42),transparent 68%);bottom:-120px;right:-60px;} .kt-endcta .kt-eshape--3{width:200px;height:200px;background:radial-gradient(circle,rgba(240,200,0,.3),transparent 68%);top:40%;right:30%;} .kt-endcta .kt-sec__inner{position:relative;z-index:2;} .kt-endcta h2{color:#fff;} .kt-endcta .kt-eyebrow{color:var(--wp--preset--color--tracker);} .kt-endcta .kt-lead{color:rgba(255,255,255,.82);} .kt-endcta .kt-ctacards{margin-top:24px;} .kt-endcta .kt-ctacard{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff;} .kt-endcta .kt-ctacard:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.3);box-shadow:none;} .kt-endcta .kt-ctacard h3{color:#fff;} .kt-endcta .kt-ctacard p{color:rgba(255,255,255,.78);} .kt-endcta .kt-ctacard .kt-ci{background:#fff;width:68px;height:68px;border-radius:17px;} .kt-endcta .kt-ctacard__btn--outline{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.4);} /* ====== v10反映: 記事系シェイプヒーロー（事例/ニュース/セミナー詳細・compact） ====== */ .kt-article-hero{position:relative;overflow:clip;background:var(--wp--preset--color--bg);} .kt-article-hero .kt-fv__shapes{z-index:0;} .kt-article-hero .kt-sec__inner{position:relative;z-index:2;} .kt-article-hero .kt-shape--1{width:clamp(140px,16vw,220px);height:clamp(140px,16vw,220px);top:-60px;right:-40px;} .kt-article-hero .kt-shape--2{width:clamp(70px,9vw,120px);height:clamp(70px,9vw,120px);top:auto;bottom:-24px;right:10%;} .kt-article-hero .kt-shape--3,.kt-article-hero .kt-shape--4,.kt-article-hero .kt-band--2{display:none;} .kt-article-hero .kt-band{height:clamp(30px,4vw,48px);} .kt-article-hero__title{font-size:clamp(26px,3.4vw,44px)!important;line-height:1.3!important;max-width:24em;margin-top:0;} /* R-06: ブロック既定margin-block-start打ち消し */ /* クラスなし素h1の記事型ヒーロー（資料DL・request一覧・ガイドハブ等）もカンプ28のサイズに */ .kt-article-hero h1.wp-block-heading{font-size:clamp(26px,3.4vw,44px);line-height:1.3;letter-spacing:-.01em;max-width:24em;font-weight:800;} .kt-article-hero .kt-lead{font-size:clamp(15px,1.9vw,17px);max-width:44em;margin-top:14px;} /* C-2(2026-08-04): B案44em（PC748px/SP660px）。固定pxをem化 */ @media(max-width:600px){.kt-article-hero__title,.kt-article-hero h1.wp-block-heading{font-size:21px!important;max-width:504px;}} .kt-article-hero .kt-crumb a:hover{color:var(--wp--preset--color--tracker);} .kt-article-hero .kt-tag{margin-bottom:0;} /* 5-4: 余白はコンテナ(.kt-tags/.kt-cs-filter)側に一本化 */ /* 料金プラン注記の防御（重なり対策） */ .kt-plans{position:relative;z-index:1;} .kt-sec__inner .kt-note{position:relative;z-index:2;clear:both;display:block;} /* LPヒーローをより高く（v10: PCでほぼ1画面） */ .kt-hero-photo.wp-block-cover{min-height:clamp(520px,68vh,760px);} /* ===== セミナー詳細: モバイル下部固定CTA（カンプ68 mcta） ===== */ .kt-mcta{display:none} @media (max-width:781px){ .kt-mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;align-items:stretch;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(0,0,0,.08)} .kt-mcta .p{flex:1;display:flex;align-items:center;justify-content:center;background:var(--wp--preset--color--tracker-ink);color:#fff;font-weight:700;border-radius:999px;padding:12px 10px;text-decoration:none;font-size:.95rem} .kt-mcta .s{flex:0 0 auto;display:flex;align-items:center;padding:12px 18px;border:1px solid rgba(0,0,0,.15);border-radius:999px;text-decoration:none;color:inherit;font-weight:600;background:#fff} /* バーに隠れないよう最終CTA帯の下余白を確保 */ .single-seminar main{padding-bottom:72px} } /* ===== 優先度中対応 v0.26.0 ===== */ /* 事例本文: インタビュー質問行（――）をアクセント強調（カンプD11） */ .kt-article .kt-q{color:var(--wp--preset--color--tracker);font-weight:700;margin-top:1.8em;} .kt-article .kt-q strong{font-weight:inherit;} /* 事例本文: 引用（プルクオート）をカンプ準拠に強化（D12） */ .kt-article .wp-block-quote{border-left:4px solid var(--wp--preset--color--tracker);background:var(--wp--preset--color--tracker-soft,#FDEEEC);border-radius:0 14px 14px 0;padding:22px 26px;margin:2em 0;} .kt-article .wp-block-quote p{font-size:1.12em;font-weight:700;line-height:1.9;margin:0;} .kt-article .wp-block-quote cite{display:block;margin-top:12px;font-style:normal;font-size:.85em;font-weight:600;color:var(--wp--preset--color--ink-2);} /* FAQリッチ版: 基礎版のQ/+擬似要素と二重になる問題を解消（r171） */ .kt-faq--rich summary::before,.kt-faq--rich summary::after{display:none!important;} .kt-faq--rich .kt-faq__item p{padding-left:57px;} /* テーブル: SPスクロールヒント（r163/r372/r67） */ .kt-tblwrap{position:relative;} @media (max-width:781px){ .kt-tblwrap::before{content:"→ 横にスクロールできます";display:block;font-size:11.5px;color:var(--wp--preset--color--ink-2,#6b7280);margin:0 0 6px;} .kt-tblwrap--auto{overflow-x:auto;-webkit-overflow-scrolling:touch;} .kt-tblwrap--auto table{min-width:560px;} } /* 開催概要テーブルのカード化（r391） */ .kt-tblwrap--card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:6px 14px;} .kt-tblwrap--card .kt-ktable th{background:var(--wp--preset--color--bg-off);} /* eyebrowの丸ドット（r373/r390） */ .kt-eyebrow--dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wp--preset--color--tracker);margin-right:8px;vertical-align:1px;} /* Part M(2026-08-04): 旧・粗い目次定義はL1103側の正実装へ統合済み（二重定義の後勝ち事故防止のためここには書かない） */ /* ヒーロー装飾のSP退避（r6/r36: 円がテキストに重ならないよう縮小・後退） */ @media (max-width:781px){ .kt-fv__shapes .kt-shape,.kt-article-hero .kt-shape{opacity:.35;transform:scale(.6);transform-origin:top right;} .kt-fv__shapes .kt-band,.kt-article-hero .kt-band{opacity:.3;} } /* チェック丸リスト（セッションのポイント等 r374） */ ul.kt-checks{list-style:none;padding:0;margin:14px 0;} ul.kt-checks li{position:relative;padding-left:32px;margin:10px 0;} ul.kt-checks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--wp--preset--color--tracker);} ul.kt-checks li::after{content:"";position:absolute;left:5px;top:8px;width:10px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg);} /* consulting: 2段階ステップの丸数字＋矢印コネクタ（r24） */ .kt-stephead{display:flex;align-items:center;gap:12px;} .kt-stepnum{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--wp--preset--color--tracker);color:#fff;font-weight:800;font-size:17px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--display);} .kt-accent-consult .kt-stepnum{background:var(--wp--preset--color--consult);} .kt-stepconn{display:flex;align-items:center;gap:8px;margin:22px 0;color:var(--wp--preset--color--ink-2);font-size:13.5px;font-weight:600;} /* youtube-ad: 原因コンパクトカード（r164） */ .kt-causecard{background:var(--wp--preset--color--ads-soft,#EAF3FB);border:2px solid rgba(45,127,249,.3);border-radius:18px;padding:clamp(20px,2.6vw,28px);margin-top:clamp(28px,4vw,40px);text-align:center;} .kt-causecard .kt-causecard__t{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(20px,2.8vw,26px);line-height:1.5;margin:0;} .kt-causecard p{margin:10px auto 0;} /* ナビ最上位のbutton化に伴うリセット（r28: ドロップダウン開閉のみ・遷移しない） */ button.kt-nav__link{background:none;border:0;cursor:pointer;font-family:inherit;} /* SPではサービスカードのバッジを独立行に（r165: 小ラベルとの重なり解消） */ @media (max-width:781px){ .kt-scard__badge{position:static;display:inline-block;margin:0 0 10px;align-self:flex-start;} } /* TOP FV: タイトル2行目はPCで折り返さない（カンプ: .hero h1 .hl nowrap＋wbr） */ .kt-fv__text h1 .kt-hl{white-space:nowrap;} @media (max-width:980px){.kt-fv__text h1 .kt-hl{white-space:normal;}} /* TOP FV: kicker（色ドット付き・カンプ準拠） */ .kt-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--wp--preset--color--ink);margin-bottom:18px;} .kt-kicker span{display:inline-flex;align-items:center;gap:7px;} .kt-kicker i{width:9px;height:9px;border-radius:50%;display:inline-block;} .kt-kicker .sep{color:var(--wp--preset--color--ink-2);opacity:.55;font-weight:600;} /* TOP FV: 実績スタットはヒーロー全幅の独立行（カンプ stat-bar 準拠） */ .kt-fv__inner--stats{display:block;position:relative;z-index:2;margin-top:clamp(30px,4vw,48px);} .kt-fv__inner--stats .kt-stats{margin-top:0;margin-bottom:0;} /* TOPヒーローは5-1の下余白対象外 */ /* TOP FV: カンプ（画像FV版）は1カラム構成——テキストを全幅化してタイトル1行を確保 */ .kt-fv__inner{display:block;} .kt-fv__text{max-width:none;} .kt-fv__text h1{max-width:14em;} .kt-fv__text .kt-lead{max-width:38em;} /* 見出しの改行品質（カンプcommon.css準拠）: 行長バランス＋文節単位改行（対応ブラウザのみ・段階的適用） */ h1.wp-block-heading,h2.wp-block-heading,h3.wp-block-heading{text-wrap:balance;} h1.wp-block-heading,h2.wp-block-heading,h3.wp-block-heading{word-break:auto-phrase;} /* SPのFVタイトルは語中で折らずwbr位置でのみ改行（Safari等auto-phrase未対応の保険） */ @media (max-width:980px){.kt-fv__text h1 .kt-hl{word-break:keep-all;}} /* 改行ポリシー（カンプcommon.css準拠・サイト全体）: 文節単位でのみ改行（auto-phrase対応ブラウザ）＋禁則処理強化。 「キックオ/フ資料」のような語中改行を全域で防ぐ。 */ body{word-break:auto-phrase;line-break:strict;} .kt-lead,.kt-article p,.kt-card p,.kt-step p,.kt-step__deliv{text-wrap:pretty;} /* ===== プラン別 詳細比較テーブル（カンプ04 .ktable 移植・kt-cmp） ===== */ .kt-cmphead{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:clamp(30px,4.4vw,48px) 0 16px;} .kt-cmphead h3{font-size:clamp(19px,2.2vw,25px);font-weight:800;margin:0;} .kt-cmpscroll{font-size:12.5px;color:var(--wp--preset--color--ink-2);display:inline-flex;align-items:center;gap:5px;} .kt-cmpscroll svg{color:var(--wp--preset--color--tracker);} .kt-tblwrap--cmp{overflow-x:auto;border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--m);box-shadow:0 14px 40px rgba(26,26,31,.06);-webkit-overflow-scrolling:touch;background:#fff;padding:0;} .kt-tblwrap--cmp::before{display:none!important;/* ヒントはkt-cmphead側に集約 */} .kt-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;background:#fff;min-width:760px;} .kt-cmp th,.kt-cmp td{padding:14px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--wp--custom--line);} .kt-cmp tbody tr:last-child td{border-bottom:none;} .kt-cmp td+td,.kt-cmp th+th{border-left:1px solid var(--wp--custom--line);} .kt-cmp td.center,.kt-cmp th.center{text-align:center;} .kt-cmp thead th.center{width:15%;min-width:120px;} .kt-cmp td:first-child{font-weight:600;color:var(--wp--preset--color--ink);line-height:1.6;} .kt-cmp thead th{background:var(--wp--preset--color--ink);color:#fff;font-weight:700;text-align:center;font-size:13.5px;line-height:1.5;border-bottom:none;vertical-align:bottom;} .kt-cmp thead th:first-child{text-align:left;font-size:13px;color:rgba(255,255,255,.72);} .kt-cmp thead th+th{border-left:1px solid rgba(255,255,255,.14);} .kt-cmp thead th .th-price{display:block;font-family:var(--wp--preset--font-family--display);font-size:12px;font-weight:700;color:rgba(255,255,255,.66);margin-top:4px;} .kt-cmp thead th.rec{background:var(--wp--preset--color--tracker-ink,#CE4234);border-left-color:transparent;} .kt-cmp thead th.rec .rec-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;background:#fff;color:var(--wp--preset--color--tracker-ink,#CE4234);border-radius:999px;padding:2px 10px;margin-bottom:6px;} .kt-cmp thead th.rec .th-price{color:rgba(255,255,255,.85);} .kt-cmp tbody td.rec{background:var(--wp--preset--color--tracker-soft);border-left-color:rgba(206,66,52,.14);border-right:1px solid rgba(206,66,52,.14);} .kt-cmp tr.grp td{background:var(--wp--preset--color--bg-off);font-weight:800;font-size:13px;letter-spacing:.02em;color:var(--wp--preset--color--ink);padding-top:11px;padding-bottom:11px;} .kt-cmp tr.grp td .gi{color:var(--wp--preset--color--tracker);margin-right:9px;vertical-align:-3px;display:inline-block;} .kt-cmp .yes{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker-ink,#CE4234);} .kt-cmp td.rec .yes{background:#fff;box-shadow:0 2px 6px rgba(206,66,52,.14);} .kt-cmp .no{color:var(--wp--custom--line-2,#c9c9ce);font-size:16px;font-weight:700;} .kt-cmp .lim{display:block;font-size:11.5px;color:var(--wp--preset--color--ink-2);margin-top:5px;line-height:1.4;} .kt-cmp tbody tr:hover td{background:rgba(26,26,31,.022);} .kt-cmp tbody tr:hover td.rec{background:#FBE1DD;} .kt-cmp tbody tr.grp:hover td{background:var(--wp--preset--color--bg-off);} /* ===== youtube-ad カンプ39準拠（2026-07-28） ===== */ /* グレー地セクション上でもステップカードが見えるように */ .kt-sec--alt .kt-step,.kt-sec:nth-of-type(even) .kt-step{background:#fff;} /* CTAバンドの文字サイズ（カンプ: h2=clamp(22,3vw,33)・中間バンドはさらにコンパクト） */ .kt-ctaband h2{font-size:clamp(22px,3vw,33px);line-height:1.3;margin:0 0 8px;} .kt-ctaband > p{margin:0 0 22px;color:rgba(255,255,255,.92);} .kt-ctaband__t{font-weight:800;font-size:clamp(17px,2.2vw,21px);line-height:1.4;margin:0 0 20px;color:#fff;} /* 広告フォーマット表（カンプ .ktable ads版） */ .kt-tblwrap--ad{overflow-x:auto;border-radius:var(--wp--custom--radius--m);border:1px solid var(--wp--custom--line);background:#fff;-webkit-overflow-scrolling:touch;} .kt-adtable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px;background:#fff;} .kt-adtable th,.kt-adtable td{padding:15px 22px;text-align:left;vertical-align:middle;} .kt-adtable thead th{background:var(--wp--preset--color--ads-soft);color:var(--wp--preset--color--ink);font-size:13px;font-weight:700;letter-spacing:.05em;} .kt-adtable tbody tr+tr th,.kt-adtable tbody tr+tr td{border-top:1px solid var(--wp--custom--line);} .kt-adtable tbody th{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:15px;color:var(--wp--preset--color--ink);white-space:nowrap;} .kt-adtable tbody td{color:var(--wp--preset--color--ink-2);line-height:1.8;} .kt-fee{display:inline-block;padding:4px 16px;border-radius:999px;background:var(--wp--preset--color--ads-soft);color:#1655C0;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12.5px;} /* STEPラベルの色: .kt-step p より高い詳細度で確実にコーラル（カンプ: 全ページ共通） */ .kt-step p.kt-step__no{color:var(--wp--preset--color--tracker);} /* ブログカードのテーマバッジ（カンプ25 .bl-badge 準拠・6テーマ配色） */ .kt-bl-badge a.kt-blb{display:inline-block;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:11px;letter-spacing:.02em;padding:5px 11px;border-radius:999px;text-decoration:none;} .kt-bl-badge a.kt-blb--tie{background:var(--wp--preset--color--connect-soft);color:#8a7400;} .kt-bl-badge a.kt-blb--ops{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);} .kt-bl-badge a.kt-blb--seo{background:var(--wp--preset--color--ads-soft);color:var(--wp--preset--color--ads);} .kt-bl-badge a.kt-blb--cre{background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);} .kt-bl-badge a.kt-blb--short{background:var(--wp--preset--color--consult-soft);color:var(--wp--preset--color--consult);} .kt-bl-badge a.kt-blb--res{background:#ECECEE;color:var(--wp--preset--color--ink);} /* ブログカードの等高（クエリループはli包みのため、liをflex化してカードを行高いっぱいに） PICK UP（kt-bl-featgrid）も同構造のため同じ対処 */ .kt-bl-grid > *,.kt-bl-featgrid > *{display:flex;} .kt-bl-grid > * > .kt-bl-card,.kt-bl-grid > .kt-bl-card, .kt-bl-featgrid > * > .kt-bl-feat,.kt-bl-featgrid > .kt-bl-feat{width:100%;} /* クエリループ(li)へのWP自動マージン(margin-block-start)を無効化（グリッド内で2枚目以降が下がる） */ .kt-bl-featgrid > * + *,.kt-bl-grid > * + *{margin-block-start:0!important;} /* フッターのサービスリンクは1行固定（「kamui コンサルティング」の途中折返し防止） */ .kt-footer__col li a{white-space:nowrap;} /* 「記事を読む →」を実リンク化＋カード全体をクリック可能に（stretched-link方式） */ .kt-bl-card,.kt-bl-feat{position:relative;} a.kt-bl-more{color:var(--wp--preset--color--tracker);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;} a.kt-bl-more::after{content:"";position:absolute;inset:0;z-index:1;} /* カード内の個別リンク（テーマバッジ・タイトル）は上に重ねてクリック可能を維持 */ .kt-bl-badge a,.kt-bl-card .wp-block-post-title a,.kt-bl-feat .wp-block-post-title a{position:relative;z-index:2;} /* ===== デザイン監査2026-07-31 対応（C02/C11: ボタン基底インタラクション） ===== */ .wp-element-button, .wp-block-button__link{ transition:transform .3s var(--wp--custom--ease),box-shadow .3s var(--wp--custom--ease), background-color .25s,color .25s; } .wp-element-button:hover, .wp-block-button__link:hover{ transform:translateY(-3px); } .wp-block-button:not(.kt-btn-outline):not(.kt-btn-w):not(.kt-btn-o):not(.kt-btn-text) .wp-block-button__link:hover{ box-shadow:var(--wp--custom--shadow--cta-hover); } .kt-btn-outline .wp-block-button__link:hover{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--bg); border-color:var(--wp--preset--color--ink); } /* バンド上ボタンのhover: 他ボタンと同じ「浮き上がり」（色は変えない）。浮きはボタン基底の translateY(-3px) が担う */ .kt-btn-w .wp-block-button__link:hover{ box-shadow:0 14px 30px rgba(26,26,31,.25); } .kt-btn-o .wp-block-button__link:hover{ background:rgba(255,255,255,.14); } .kt-btn-outline .wp-block-button__link, .kt-btn-w .wp-block-button__link, .kt-btn-o .wp-block-button__link, .kt-btn-text .wp-block-button__link{ box-shadow:none; } /* C05: テキストリンク型ボタンのhover色 */ .kt-btn-text .wp-block-button__link:hover{ color:var(--wp--preset--color--tracker-ink); } /* ボタンの浮き上がりはreduced-motionでも維持する（デザイン意図優先・2026-08-01決定。 OS「視差効果を減らす」ON環境で全ボタンが無反応に見える問題の恒久対策） */ /* 【根本原因修正】サーバー描画（HTML直書き）のボタンはWPのボタンブロックCSSが読み込まれず display:inline のままになる → inline要素にはtransformが効かず「色は変わるが浮かない」。 コアと同じ display:inline-block を :where(詳細度0) で全ボタンに保証する （kt-scbtn=block / kt-sf-btn=inline-flex 等の個別指定はそのまま勝つ） */ :where(a.wp-block-button__link,.wp-element-button){display:inline-block;} /* ===== 事例末尾CTAバンドのボタン: 環境非依存の専用hover/focus（レビュアー指摘 2026-08-01）===== 共通ルールはCSS変数(--wp--custom--ease等)に依存しており、変数解決に失敗する環境では 遷移・影が無効化されうる。ここではリテラル値のみで自己完結させる */ .kt-ctaband .wp-block-button__link, .kt-article .wp-block-button__link, .kt-sidecard .wp-block-button__link{ /* C02関連: 規約値に統一（cubic-bezier(0.16,1,0.3,1)=--wp--custom--easeと同値のリテラル） */ transition:transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s cubic-bezier(0.16,1,0.3,1), background-color .25s, color .25s; } /* Part D(2026-08-04): transformだけ残す。影は種別ごとの規則（塗り=cta-hover/btn-w/btn-o/outline=none）に委ねる */ .kt-ctaband .wp-block-button__link:hover, .kt-ctaband .wp-block-button__link:focus-visible, .kt-article .wp-block-button__link:hover, .kt-article .wp-block-button__link:focus-visible, .kt-sidecard .wp-block-button__link:hover, .kt-sidecard .wp-block-button__link:focus-visible{ transform:translateY(-3px); } /* C03: ヘッダーをスクロール追従に（B案 .site-header 準拠） 注意: FSEはヘッダーを
で包むため、 sticky はラッパー側に当てないと親の高さ内でしか固定されない */ header.wp-block-template-part{position:sticky;top:0;z-index:100;} /* R-12追補: bcbar(top:100%)の基準を.kt-header自身に（ラッパー基準だと実測-11pxずれ） */ .kt-header{position:relative;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);} /* ===== 監査C15/C16/C17/C20-22: 記事タイポ・部品体裁 ===== */ /* R-05②(C17): 本文の基調色はコンテナに当てる（B案 .prose.reading{color:var(--ink-2)}）。見出しはinkを維持 */ .kt-article .wp-block-post-content{color:var(--wp--preset--color--ink-2);} .kt-article .wp-block-post-content h2, .kt-article .wp-block-post-content h3{color:var(--wp--preset--color--ink);} /* C15+R-15: 本文h2に節の区切り（上マージンはB案のclamp。SP375=40px） */ .kt-article .wp-block-post-content h2{ border-top:1px solid var(--wp--custom--line);padding-top:24px; margin:clamp(40px,5vw,56px) 0 16px;font-size:clamp(22px,3vw,30px);line-height:1.35; } /* R-15: 本文の最初のh2（導入文の後でも）と、区切り部品（CTAパネル・図版等）直後のh2には罫線を出さない */ .kt-article .wp-block-post-content h2:first-of-type, .kt-article .wp-block-post-content > *:not(h2,h3,p,ul,ol,figure,table) + h2{ border-top:none;padding-top:0; } .kt-article .wp-block-post-content > h2:first-child{margin-top:0;} /* C16: 本文p */ .kt-article .wp-block-post-content p{font-size:clamp(16px,1.8vw,17.5px);line-height:1.95;margin:0 0 1.1em;} /* R-08(C20): 記事本文h3（B案 .prose.reading h3） */ .kt-article .wp-block-post-content h3{font-weight:800;font-size:clamp(18px,2.2vw,21px);margin:28px 0 10px;} /* C17/C21: カード段落 */ .kt-card p{font-size:14.5px;color:var(--wp--preset--color--ink-2);} /* C21/R-10（回答書§3）: 記事本文内の企業情報カードはB案 .card.soft 体裁（bg-off地・枠線なし）。事例8ページの会社概要ボックスが該当 */ .kt-article .wp-block-post-content .kt-card{background:var(--wp--preset--color--bg-off);border-color:transparent;} /* E-1(2026-08-04): 記事本文内のカードは .card p の14.5pxを維持（本文p 17.5pxに負けないよう詳細度を確保） */ .kt-article .wp-block-post-content .kt-card p, .kt-article .wp-block-post-content .kt-softpanel p{font-size:14.5px;line-height:1.8;} /* Part L-4: eyebrowは13pxを維持（E-1の14.5pxに巻き込まれない） */ .kt-article .wp-block-post-content .kt-card p.kt-eyebrow, .kt-article .wp-block-post-content .kt-softpanel p.kt-eyebrow{font-size:13px;} /* Part L: 記事本文内の数値タイルは .stat の規約値を維持（本文h3/pに負けないよう詳細度を確保） */ .kt-article .wp-block-post-content .kt-stat__num{font-size:clamp(28px,3.6vw,42px);line-height:1;margin:0;} .kt-article .wp-block-post-content .kt-stat__label{font-size:13.5px;line-height:1.8;margin:9px 0 0;} /* Part M②: 事例詳細の「目次」見出しも本文pに潰されない詳細度で */ .kt-article .wp-block-post-content .kt-toc__h{font-size:12.5px;margin:0 0 12px;} /* 5-2: 話者行はB案.metaのflex（span2つの間隔） */ .kt-article .wp-block-post-content p.kt-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;} /* 5-3: 企業情報カードの内側余白（B案 PC28/SP20） */ .kt-article .wp-block-post-content .kt-card{padding:clamp(20px,2.2vw,28px);} /* Part I(2026-08-04): 事例詳細「企業情報」カードの会社名（B案 .card h3 = 24px/800） */ .kt-article .wp-block-post-content .kt-card > h3{font-size:24px;font-weight:800;line-height:1.3;} /* C20: 見出しウェイト統一とカード見出しサイズ */ .kt-sec h3{font-weight:800;} .kt-card__name{font-size:20px;} /* E-2(2026-08-04): B案 .card h3 = 20px / line-height 1.4（8/3指示の16pxは誤りと判定確定・A04） */ .kt-softpanel .kt-card__name,.kt-softpanel .kt-card h3{font-size:20px;line-height:1.4;} /* サイドカード見出しはカンプ.sc-h=16px（基底定義）。旧24px上書きは撤去(2026-08-04・発注元指示でカンプ実CSSに一致) */ /* C22: ブロック既定の見出しマージン打ち消し */ h1.wp-block-heading{margin-top:0;} .kt-sec__inner > h2.wp-block-heading{margin-top:14px;} /* ===== 装飾シェイプは常にコンテンツの下（/contact等でフォームに被る問題の恒久対策） ===== */ .kt-fv__shapes{z-index:0;pointer-events:none;} .kt-fv__shapes .kt-shape,.kt-fv__shapes .kt-band{pointer-events:none;} .kt-sec__inner,.kt-fv__inner{position:relative;z-index:1;} /* shapesがinnerの内側に置かれたページ（contact/faq/trial/request/TOP等）: innerは上のルールでスタッキングコンテキスト(z:1)になるため、負のz-indexで 「セクション背景より上・コンテンツより下」に沈む */ .kt-sec__inner .kt-fv__shapes,.kt-fv__inner .kt-fv__shapes{z-index:-1;} /* ページ別監査: SPでの横スクロール抑止（request-formで380px>375px検出。監査指定のoverflow-x:clip） */ html,body{overflow-x:clip;} /* 全幅化の副作用ガード: kt-sec__innerの外に直置きされた注記（出典等）はコンテンツ幅に整列 */ .kt-sec > .kt-note{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--wp--preset--spacing--pad-x);padding-right:var(--wp--preset--spacing--pad-x);} /* 見出し内の強調色（インラインstyle排除用）: 各ページのアクセント色に追従 */ .kt-c-accent{color:var(--wp--preset--color--tracker);} .kt-accent-prod .kt-c-accent{color:var(--wp--preset--color--prod);} .kt-accent-consult .kt-c-accent{color:var(--wp--preset--color--consult);} .kt-accent-connect .kt-c-accent{color:var(--wp--preset--color--connect-ink);} .kt-accent-ads .kt-c-accent{color:var(--wp--preset--color--ads);} /* ===== 10TH ANNIVERSARY BANNER（TOPのみ / カンプ .anniv 準拠・指示書2026-08-04） ===== */ .kt-anniv{ padding:clamp(34px,4.6vw,58px) 0; background:linear-gradient(180deg,#fff 0%,var(--wp--preset--color--tracker-soft) 100%); border-bottom:1px solid var(--wp--custom--line); } .kt-anniv .kt-sec__inner{ display:flex; justify-content:center; } .kt-anniv__slot{ width:100%; max-width:900px; } .kt-anniv__bnr{ display:block; width:100%; border-radius:var(--wp--custom--radius--m); overflow:hidden; box-shadow:0 18px 44px rgba(26,26,31,0.16); transition:transform .3s var(--wp--custom--ease), box-shadow .3s var(--wp--custom--ease); } .kt-anniv__bnr:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(242,107,98,0.30); } .kt-anniv__bnr:focus-visible{ outline:3px solid var(--wp--preset--color--tracker-ink); outline-offset:4px; } .kt-anniv__bnr img{ display:block; width:100%; height:auto; aspect-ratio:1672/941; } @media(max-width:640px){ .kt-anniv__slot{ max-width:340px; } .kt-anniv__bnr img{ aspect-ratio:880/1100; } } /* ===== v2最終チェック指摘対応（2026-08-06） ===== */ /* しのね指摘: SPでヒーローの正式名称（括弧部）が3行化 → SPでは括弧部を省略し1行に */ @media(max-width:600px){.kt-page-hero .kt-eyebrow__sub{display:none;}} /* 佐野指摘: castingの6ステップが5+1に折返し。基準150px+padding32+枠3=実効185pxで6個が収まらないcontent-box問題 → border-box化（6×150+gap60=960 ≤ 1072で1行に収まる。5ステップのLPは余裕が増えるだけで非影響） */ .kt-step,.kt-step--hl{box-sizing:border-box;} /* ===== トップページ最終チェック指摘対応（2026-08-06 その2） ===== */ /* 川上・佐野指摘: カード上の役割ラベルが「YOUTUBE広告」等の全大文字表示になる → 正体はuppercase指定（ソースは「YouTube広告運用」で正しい）。日本語混在ラベルのため解除 */ .kt-scard__role{text-transform:none;} /* しのね指摘: SPでヘッダーの左右余白ゼロ（ロゴが画面端に接触） → 本文セクション(.kt-sec__inner)と同じpad-x変数で左右を揃える（PC=64px・SP=20px、本文と左位置が一致） */ .kt-header__bar{padding:16px var(--wp--preset--spacing--pad-x);} /* ===== ガイド詳細の情報設計改善（2026-08-06 しのね指摘→改善仕様書対応） ===== 余白過剰の原因: 汎用kt-secのsection-y(最大128px)とkt-articleの上余白がヘルプ記事には過剰だった → ガイド系(.single-guide/.post-type-archive-guide)限定で余白スケールを圧縮し、 ヘルプ記事用の共通部品（kt-gbox=おすすめボックス / kt-gstep=操作手順）を追加。他ページ非影響 */ .single-guide .kt-sec,.post-type-archive-guide .kt-sec{padding:clamp(40px,5vw,64px) 0;} .single-guide .kt-sec__inner{max-width:1000px;} .single-guide .kt-article-hero{padding-top:clamp(20px,3vw,32px);padding-bottom:0;} .single-guide .kt-crumb{margin:0 0 24px;} .single-guide .kt-article-hero .kt-eyebrow{margin:0 0 10px;} .single-guide .kt-article-hero__title{margin:0 0 18px;} .single-guide .kt-article-hero .kt-lead{margin:0;max-width:44em;} .single-guide .kt-article{padding:clamp(32px,4vw,40px) var(--wp--preset--spacing--pad-x) clamp(48px,6vw,72px);} /* 左右pad-x: SPで本文・画像が画面端に接触しないように */ .single-guide .wp-block-post-content > p{margin:0 0 14px;} .single-guide .wp-block-post-content h2{margin:clamp(40px,5vw,56px) 0 14px;} .single-guide .wp-block-post-content > h2:first-child{margin-top:0;} .single-guide .wp-block-post-content h3{margin:30px 0 12px;} .single-guide .wp-block-post-content img{display:block;max-width:100%;height:auto;border:1px solid var(--wp--custom--line);border-radius:8px;} .single-guide .wp-block-post-content figure{margin:clamp(20px,3vw,28px) 0;} .single-guide .wp-block-post-content figcaption{font-size:12.5px;color:var(--wp--preset--color--ink-2);margin-top:8px;} /* こんな方におすすめ（薄背景のコンパクトな案内ボックス） */ .kt-gbox{background:var(--wp--preset--color--bg-off);border:1px solid var(--wp--custom--line);border-radius:8px;padding:22px 24px;} .kt-gbox ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;} .kt-gbox li{position:relative;padding-left:27px;line-height:1.6;} .kt-gbox li::before{content:"";position:absolute;left:0;top:.2em;width:17px;height:17px;background:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="12" cy="12" r="10" stroke="%23F26B62" stroke-width="2.4"/%3E%3Cpath d="M8 12.3l2.6 2.6L16 9.6" stroke="%23F26B62" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center/contain;} /* 操作手順（番号バッジ付きステップ） */ .kt-gstep{margin:0 0 clamp(28px,4vw,40px);} .kt-gstep__h{display:flex;align-items:center;gap:12px;} .kt-gstep__n{flex:none;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--wp--preset--color--tracker);border:1.5px solid currentColor;border-radius:999px;padding:2px 12px;} .kt-gstep ul{margin:0 0 14px;padding-left:1.4em;display:grid;gap:6px;} .kt-gstep--media{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px 32px;align-items:start;} .kt-gstep--media > figure{margin:6px 0 0;} .kt-gstep__shot--tall{max-width:340px;} .kt-gstep__shot--tall img{width:100%;} /* 横長スクリーンショットは本文幅(760px)を超えて最大1000pxまで広げる */ .single-guide .wp-block-post-content .kt-gstep__shot--wide{--w:min(1000px,calc(100vw - 48px));width:var(--w);margin-left:calc((100% - var(--w))/2);} /* 関連ガイドのカード（名前＋説明＋矢印のコンパクト構成） */ .single-guide .kt-cards--3{gap:20px;} .single-guide .kt-cards .kt-card{padding:22px;} .single-guide .kt-card__name a{text-decoration:none;color:inherit;} .single-guide .kt-card__name a::after{content:"→";margin-left:8px;color:var(--wp--preset--color--tracker);} /* 末尾CTAは操作説明より目立たない横長コンパクトバナーに（グローバルのcta-bandは非影響） */ .single-guide .kt-ctaband{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;align-items:center;} .single-guide .kt-ctaband h2{font-size:clamp(20px,2.4vw,26px);margin:0;grid-column:1;} .single-guide .kt-ctaband p{margin:0;grid-column:1;} .single-guide .kt-ctaband .kt-cta{grid-column:2;grid-row:1/span 2;margin:0;} @media(max-width:900px){ .single-guide .kt-ctaband{grid-template-columns:1fr;} .single-guide .kt-ctaband .kt-cta{grid-column:1;grid-row:auto;margin-top:14px;} } /* モバイル（767px以下: H1 28-32px・本文15-16px・ステップ縦積み） */ @media(max-width:767px){ .single-guide .kt-article-hero__title{font-size:30px;} .single-guide .wp-block-post-content{font-size:15.5px;} .single-guide .kt-gstep--media{grid-template-columns:1fr;} .kt-gstep__shot--tall{max-width:min(320px,100%);} } /* ===== /seminar トップの写真ヒーロー化（2026-08-07 青木さん指示・top_seminar.jpg） ===== セミナー一覧のヒーローは動的ブロック(kamui/seminar-index)出力のテキストヒーローのため、 CSSで背景写真＋サービスLPと同系のグラデ白パネル(kt-hero-photo tracker系)を再現。相対URLでドメイン切替に自動追従 */ .post-type-archive-seminar .kt-article-hero-like.kt-fv{background:url('/wp-content/uploads/2026/08/top_seminar4.jpg') center/cover no-repeat,var(--wp--preset--color--bg-off);} .post-type-archive-seminar .kt-article-hero-like.kt-fv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(253,238,236,.97) 0%,rgba(253,238,236,.92) 38%,rgba(253,238,236,.55) 64%,rgba(253,238,236,0) 100%);} .post-type-archive-seminar .kt-article-hero-like .kt-fv__inner{position:relative;z-index:2;} .post-type-archive-seminar .kt-article-hero-like .kt-fv__shapes{display:none;} @media(max-width:680px){.post-type-archive-seminar .kt-article-hero-like.kt-fv::after{background:rgba(253,238,236,.92);}}