/* ===== KNOQ サブページ共通スタイル ===== */
:root{
  --primary:#00D183; --dark:#111827; --gray-bg:#F8FAFC;
  --border:#E5E7EB; --text-sub:#4B5563; --text-mute:#6B7280;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter','Noto Sans JP',sans-serif;color:var(--dark);line-height:1.9;background:#fff;-webkit-font-smoothing:antialiased;}
a{color:#0a8a5e;text-decoration:none;}
a:hover{text-decoration:underline;}
img{display:block;max-width:100%;}

.p-header{position:sticky;top:0;z-index:10;height:72px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);}
.p-header .inner{max-width:1000px;margin:0 auto;height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;}
.p-header img{height:48px;width:auto;}
.p-back{font-size:14px;font-weight:600;color:var(--text-sub);}
.p-back:hover{color:var(--dark);text-decoration:none;}

.p-main{max-width:840px;margin:0 auto;padding:56px 24px 80px;}
.p-eyebrow{color:var(--primary);font-weight:800;font-size:13px;letter-spacing:1px;display:block;margin-bottom:10px;}
.p-main h1{font-size:32px;font-weight:800;margin-bottom:10px;letter-spacing:-.5px;}
.p-lead{color:var(--text-mute);font-size:15px;margin-bottom:40px;}
.p-main h2{font-size:18px;font-weight:700;margin:34px 0 12px;padding-left:12px;border-left:4px solid var(--primary);}
.p-main p{font-size:15px;color:var(--text-sub);margin-bottom:12px;}
.p-main ol,.p-main ul{margin:0 0 14px 1.4em;color:var(--text-sub);font-size:15px;}
.p-main li{margin-bottom:6px;}

table.p-table{width:100%;border-collapse:collapse;margin:8px 0 24px;}
.p-table th,.p-table td{border:1px solid var(--border);padding:14px 16px;text-align:left;font-size:14.5px;vertical-align:top;line-height:1.8;}
.p-table th{background:var(--gray-bg);width:34%;font-weight:700;color:var(--dark);}
.p-table td{color:var(--text-sub);}

/* 未記入プレースホルダー（公開前に差し替え） */
.tbd{display:inline-block;color:#b45309;background:#fff7ed;border:1px dashed #f59e0b;padding:1px 8px;border-radius:6px;font-size:13px;font-weight:700;}

.p-updated{color:var(--text-mute);font-size:13px;margin-top:44px;text-align:right;}
.p-footer{background:var(--dark);color:#9CA3AF;text-align:center;padding:34px 24px;font-size:13px;}
.p-footer a{color:#9CA3AF;}

@media(max-width:640px){
  .p-main{padding:40px 20px 64px;}
  .p-main h1{font-size:25px;}
  .p-table th{width:42%;}
  .p-table th,.p-table td{padding:11px 12px;font-size:13.5px;}
}

/* ===== 機能詳細ページ ===== */
.f-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eefbf6,#fff);border-bottom:1px solid var(--border);padding:64px 24px 56px;text-align:center;}
.f-hero-inner{position:relative;z-index:2;max-width:780px;margin:0 auto;}
/* ヒーロー右下からマスコットがのぞく（広い画面のみ） */
.f-mascot{position:absolute;bottom:0;right:max(24px,calc(50% - 584px));width:178px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(17,24,39,.16));}
@media(max-width:1180px){.f-mascot{display:none;}}
/* スマホ：機能ページのキャラを見出し下に中央表示 */
@media(max-width:900px){.f-mascot{display:block;position:static;width:132px;margin:16px auto 0;right:auto;bottom:auto;}}
.f-icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#00D183,#09b877);display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 12px 26px rgba(0,209,131,.4);}
.f-icon svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.f-icon-img{width:74px;height:74px;display:block;margin:0 auto 22px;filter:drop-shadow(0 12px 26px rgba(0,209,131,.38));}
.f-hero h1{font-size:38px;font-weight:800;letter-spacing:-.5px;margin-bottom:14px;}
.f-lead{font-size:17px;color:var(--text-sub);line-height:1.9;margin-bottom:28px;}
.f-cta-btn{display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 30px;border-radius:12px;background:var(--primary);color:var(--dark);font-weight:800;box-shadow:0 8px 20px rgba(0,209,131,.35);transition:transform .15s ease;}
.f-cta-btn:hover{transform:translateY(-2px);text-decoration:none;}
.p-main.wide{max-width:920px;}

.f-pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 20px;}
.f-pain{background:var(--gray-bg);border:1px solid var(--border);border-radius:14px;padding:20px;font-size:14px;color:var(--text-sub);line-height:1.8;}
.f-pain b{display:block;color:var(--dark);font-size:15px;margin-bottom:6px;}

.f-points{display:flex;flex-direction:column;gap:14px;margin:8px 0 20px;}
.f-point{display:flex;gap:16px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm);}
.f-point .n{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(0,209,131,.14);color:#0a8a5e;font-weight:800;display:grid;place-items:center;}
.f-point h3{font-size:17px;font-weight:700;margin:2px 0 6px;}
.f-point p{font-size:14.5px;color:var(--text-sub);margin:0;line-height:1.8;}

.f-chat{max-width:430px;margin:6px 0 20px;background:#eef2f7;border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.f-chat .u{align-self:flex-end;background:#9be15d;color:#0c2e12;padding:9px 13px;border-radius:14px 14px 4px 14px;font-size:13.5px;max-width:88%;line-height:1.7;}
.f-chat .b{align-self:flex-start;background:#fff;color:#1f2937;padding:9px 13px;border-radius:14px 14px 14px 4px;font-size:13.5px;max-width:88%;line-height:1.7;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.f-chat .b b{color:#0a8a5e;font-size:11px;display:block;margin-bottom:2px;}

.f-note{background:#eefbf6;border-left:4px solid var(--primary);border-radius:0 10px 10px 0;padding:18px 20px;font-size:14.5px;color:var(--text-sub);line-height:1.9;margin:6px 0 20px;}

.f-related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
.f-rel{display:block;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s;}
.f-rel:hover{transform:translateY(-3px);border-color:rgba(0,209,131,.5);text-decoration:none;}
.f-rel .rt{display:block;font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px;}
.f-rel .rm{font-size:13px;color:#0a8a5e;font-weight:700;}

.f-bottom-cta{background:linear-gradient(135deg,var(--primary),#12cf93);text-align:center;padding:56px 24px;}
.f-bottom-cta h2{font-size:26px;font-weight:800;margin-bottom:10px;border:none;padding:0;color:var(--dark);}
.f-bottom-cta p{color:var(--dark);opacity:.85;margin-bottom:22px;}
.f-bottom-cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.f-bottom-cta .b1{background:#fff;color:var(--dark);height:52px;padding:0 26px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;}
.f-bottom-cta .b2{background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#fff;height:52px;padding:0 26px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;}
.f-bottom-cta a:hover{text-decoration:none;transform:translateY(-2px);}

@media(max-width:760px){
  .f-hero{padding:48px 20px 44px;}
  .f-hero h1{font-size:28px;}
  .f-pains,.f-related{grid-template-columns:1fr;}
}

/* ===== よくある質問（FAQアコーディオン） ===== */
.faq-cat{margin:46px 0 14px;font-size:20px;font-weight:800;display:flex;align-items:center;gap:11px;}
.faq-cat:first-of-type{margin-top:8px;}
.faq-cat .ci{flex:none;width:36px;height:36px;border-radius:10px;background:rgba(0,209,131,.14);display:grid;place-items:center;font-size:18px;}
details.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:#fff;}
details.faq-item[open]{box-shadow:var(--shadow-sm);border-color:rgba(0,209,131,.45);}
details.faq-item summary{list-style:none;cursor:pointer;padding:17px 50px 17px 52px;font-weight:700;font-size:15.5px;position:relative;color:var(--dark);line-height:1.7;}
details.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{position:absolute;left:16px;top:15px;width:24px;height:24px;border-radius:7px;background:rgba(0,209,131,.14);color:#0a8a5e;font-weight:800;font-size:13px;display:grid;place-items:center;}
details.faq-item summary::after{content:"+";position:absolute;right:18px;top:11px;font-size:24px;font-weight:400;color:#9CA3AF;transition:transform .2s;}
details.faq-item[open] summary::after{content:"\2212";color:#0a8a5e;}
.faq-a{padding:0 22px 18px 52px;color:var(--text-sub);font-size:14.5px;line-height:1.95;}
.faq-a a{font-weight:700;}
.faq-help{margin-top:50px;background:var(--gray-bg);border:1px solid var(--border);border-radius:16px;padding:30px 26px;text-align:center;}
.faq-help h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.faq-help p{font-size:14.5px;color:var(--text-sub);margin-bottom:18px;}
.faq-help .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.faq-help .b1{background:var(--primary);color:var(--dark);height:50px;padding:0 24px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;box-shadow:0 8px 18px rgba(0,209,131,.32);}
.faq-help .b2{background:#fff;color:var(--dark);border:1.5px solid var(--border);height:50px;padding:0 24px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;}
.faq-help a:hover{text-decoration:none;}
@media(max-width:640px){
  .faq-a{padding-left:20px;}
  details.faq-item summary{padding-left:46px;}
}

/* ===== 実画面スクリーンショット枠 ===== */
.shot{max-width:900px;margin:16px auto 6px;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff;}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#f3f4f6;border-bottom:1px solid var(--border);}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#d1d5db;display:inline-block;}
.shot-bar .u{margin-left:10px;font-size:12px;color:var(--text-mute);background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 14px;}
.shot img{display:block;width:100%;height:auto;}
.shot .ph{display:none;align-items:center;justify-content:center;text-align:center;min-height:300px;
  background:repeating-linear-gradient(45deg,#f8fafc,#f8fafc 12px,#eef2f7 12px,#eef2f7 24px);
  color:#0a8a5e;font-weight:700;font-size:13px;padding:20px;line-height:1.9;}
.shot-cap{text-align:center;font-size:13px;color:var(--text-mute);margin:8px 0 20px;}