/* 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--ink-2); display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 18px; } /* ---- リード ---- */ .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(20px,3vw,40px);margin-top:40px; } .kt-stat{flex:1 1 120px;} .kt-stat__num{ color:var(--wp--preset--color--tracker); font-family:var(--wp--preset--font-family--display); margin:0; } .kt-stat__label{ color:var(--wp--preset--color--ink-2); font-size:var(--wp--preset--font-size--body);margin:4px 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);background:var(--wp--preset--color--bg);} /* ====== グローバルナビ（ドロップダウン・CSS hover） ====== */ .kt-nav-wrap{display:flex;align-items:center;gap:14px;} .kt-nav{display:flex;align-items:center;gap:2px;} .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:270px;background:var(--wp--preset--color--bg);border:1px solid var(--wp--custom--line);border-radius:16px;box-shadow:var(--wp--custom--shadow--card);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;} .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);color:#fff;font-weight:700;font-size:14px;padding:9px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px rgba(242,107,98,.28);} .kt-navutil__reg:hover{transform:translateY(-1px);} .kt-navutil__login{color:var(--wp--preset--color--ink);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;} .kt-navutil__login:hover{color:var(--wp--preset--color--tracker);} /* バーガー & モバイルメニュー */ .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;} .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;} .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);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;} .kt-btn-text .wp-block-button__link:hover{color:var(--wp--preset--color--tracker);} @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;} .kt-cards > *,.kt-steps > *,.kt-plans > *,.kt-flow > *{height:100%;} .kt-card,.kt-case,.kt-step,.kt-plan,.kt-flow__node,.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); } .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;} .kt-stats{align-items:flex-start;} /* カードグリッド 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;margin:14px 0 8px;} /* 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 12px;} .kt-tag{background:var(--wp--preset--color--tracker-soft);color:var(--wp--preset--color--tracker);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;margin:0;line-height:1.4;} .kt-accent-consult .kt-tag{background:var(--wp--preset--color--consult-soft);color:var(--wp--preset--color--consult);} .kt-accent-prod .kt-tag{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);} .kt-accent-connect .kt-tag{background:var(--wp--preset--color--connect-soft);color:var(--wp--preset--color--connect-ink);} .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:12.5px;margin:14px 0 0;} /* 最終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-eyebrow{color:var(--wp--preset--color--connect-ink);} .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:clamp(32px,5vw,60px);line-height:1.15;letter-spacing:-.02em;font-weight:800;max-width:18em;} .kt-page-hero .kt-lead{max-width:44em;} /* 写真ヒーロー（core/cover使用・左=白グラデスクリムでテキスト可読性を確保／画像未設定でもbg-offで崩れない） */ .kt-hero-photo.wp-block-cover{min-height:clamp(440px,50vw,580px);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 h1{max-width:12em;} .kt-hero-photo .kt-lead{max-width:27em;} @media(max-width:680px){.kt-hero-photo::after{background:rgba(255,255,255,0.92);}.kt-hero-photo h1,.kt-hero-photo .kt-lead{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__no,.kt-accent-connect .kt-step__icon,.kt-accent-connect .kt-step__dur{color:var(--wp--preset--color--connect-ink);} .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-color:var(--wp--preset--color--tracker);box-shadow:var(--wp--custom--shadow--card);} .kt-accent-connect .kt-plan--featured{border-color:var(--wp--preset--color--connect-ink);} .kt-plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--wp--preset--color--tracker);color:#fff;border-radius:var(--wp--custom--radius--pill);padding:5px 16px;font-size:12px;font-weight:700;margin:0;white-space:nowrap;} .kt-accent-connect .kt-plan__badge{background:var(--wp--preset--color--connect-ink);} .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:820px;} .kt-faq__item{ background:var(--wp--preset--color--bg); border:1.5px solid var(--wp--custom--line); border-radius:var(--wp--custom--radius--m); 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:18px;top:16px; font-family:var(--wp--preset--font-family--display);font-weight:800; color:var(--wp--preset--color--tracker);font-size:17px; } .kt-accent-connect .kt-faq__item summary::before{color:var(--wp--preset--color--connect-ink);} .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-eyebrow{color:var(--wp--preset--color--prod);} .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-step__no{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);} .kt-accent-prod .kt-faq__item summary::before{color:var(--wp--preset--color--prod);} .kt-accent-prod .kt-problem{border-left-color:var(--wp--preset--color--prod);} /* 課題カード内の見出し・詳細リスト（production LP） */ .kt-problem__title{font-weight:700;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);margin:5px 0;} /* 転換メッセージ（中央強調・小） */ .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-eyebrow{color:var(--wp--preset--color--consult);} .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-step__no{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-faq__item summary::before{color: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-eyebrow{color:var(--wp--preset--color--tracker);} .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);} .kt-accent-tracker .kt-faq__item summary::before{color:var(--wp--preset--color--tracker);} .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);} .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);border:none;border-radius:999px;padding:15px 44px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 26px rgba(242,107,98,.34);} .kt-form__submit button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(242,107,98,.42);} /* 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{font-size:clamp(24px,3.4vw,40px)!important;line-height:1.3;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;} /* 事例本文の企業情報ボックス（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:70px;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 42s linear infinite;} .kt-marquee:hover .kt-marquee__track{animation-play-state:paused;} @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--tracker);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-connect .kt-hl{--hl:var(--wp--preset--color--connect);} .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-eyebrow{color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-card__num{color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-card__more{color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-step__no,.kt-accent-ads .kt-step__icon,.kt-accent-ads .kt-step__dur{color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-step--hl{background:var(--wp--preset--color--ads-soft);border-color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-step__badge{background:var(--wp--preset--color--ads);} .kt-accent-ads .kt-plan--featured{border-color:var(--wp--preset--color--ads);} .kt-accent-ads .kt-plan__badge{background:var(--wp--preset--color--ads);} .kt-accent-ads .kt-faq__item summary::before{color:var(--wp--preset--color--ads);} .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);} .kt-accent-ads .kt-tag{background:var(--wp--preset--color--ads-soft);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;max-width:44em;} .kt-fv__shapes{position:absolute;inset:0;z-index:1;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__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;} .kt-tag:hover{border-color:#CE4234;color:#CE4234;} .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);} .kt-tag--free{background:var(--wp--preset--color--prod-soft);color:var(--wp--preset--color--prod);border-color:transparent;font-weight:700;} .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 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);} .kt-scard: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);} .kt-scard: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);} .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);} .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);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);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-off);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;margin:0 0 12px;color:var(--wp--preset--color--ink);} .kt-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;} .kt-footer__col a{font-size:13.5px;color:var(--wp--preset--color--ink-2);text-decoration:none;} .kt-footer__col a:hover{color:var(--wp--preset--color--tracker);} .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);} .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);} /* ====== 第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);} .kt-faq--rich details:hover{border-color:var(--wp--custom--line-2);} .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);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);border-color:var(--wp--preset--color--tracker);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);} .kt-rq-cat--plan{background:var(--wp--preset--color--prod);} .kt-rq-cat--case{background:var(--wp--preset--color--ads);} .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;} .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--outline{background:var(--wp--preset--color--bg)!important;color:var(--wp--preset--color--ink)!important;border:1.5px solid var(--wp--custom--line-2);} .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);} /* 目次 */ .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);} .kt-toc__h{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--ink-2);display:flex;align-items:center;gap:9px;margin:0 0 12px;} .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;} .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;} /* ====== ブログ一覧（カンプ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);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:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(26,26,31,.16);} .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:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(26,26,31,.13);} .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);}