/* ================================================================
   Kuma-POS 案内ページ専用スタイル
   配置: テーマフォルダ /css/kuma-pos.css
   カラー: ブラウン #774635 / アクセント赤 #9e362f / 金 #c8a45d
   ※ コンテンツは <article class="... kp"> でラップして使用すること
   ================================================================ */

.kp {
  --kp-brown:#85513f;        /* コーポレートブラウンを一段明るく */
  --kp-brown-d:#6d3f31;
  --kp-accent:#9e362f;       /* ブランドの赤 */
  --kp-accent-br:#c64634;    /* 躍動感を出す明るい赤 */
  --kp-gold:#cda45e;
  --kp-amber:#e6a93c;        /* エネルギーの差し色（明るい琥珀） */
  --kp-beige:#f9f4ec;
  --kp-cream:#fffaf2;
}
.kp section { margin-bottom: 56px; }
.kp h2.kp-h2 {
  font-size: 24px; font-weight: bold; color:#3a2a23; border:none;
  margin: 0 0 26px; padding: 4px 0 12px 16px; position: relative;
  border-bottom: 3px solid var(--kp-beige);
}
.kp h2.kp-h2::before {
  content:""; position:absolute; left:0; top:6px; bottom:14px; width:6px;
  background: linear-gradient(180deg, var(--kp-amber), var(--kp-accent)); border-radius:3px;
}
.kp h2.kp-h2 small { display:block; font-size:12px; color:var(--kp-accent-br); font-weight:bold; letter-spacing:.12em; margin-bottom:2px; }

/* ヒーロー（明るいイメージ写真 + クリームの淡いウォッシュ。動く要素なし） */
.kp-hero {
  position: relative; color:#4a3a30; text-align:center; overflow:hidden;
  padding: 64px 20px 45px; margin: 0 -15px 48px; border-radius:0 0 14px 14px;
  background-image:
    linear-gradient(180deg, rgba(255,251,244,.70) 0%, rgba(255,251,244,.70) 100%),
    url(../img/kumapos/hero-kumapos.jpg?v=26);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}
.kp-hero::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; z-index:3;
  background: linear-gradient(90deg, var(--kp-amber), #ffe6ad, var(--kp-amber)); }
.kp-hero > * { position:relative; z-index:2; }
.kp-hero-eyebrow {
  display:inline-block; font-size:14px; letter-spacing:.07em; color:var(--kp-brown-d); font-weight:bold;
  margin-bottom:16px; padding:4px 16px; border-radius:30px;
  background:rgba(255,250,244,.70);
  border:1.5px solid rgba(133,81,63,.32);
}
.kp-hero-catch {
  display:block; width:80%; max-width:900px; margin:0 auto 40px;
  background:#fffdf8; color:var(--kp-brown);
  font-size:29px; font-weight:bold; line-height:1.5; border-radius:20px;
  padding:26px 36px; box-shadow:0 8px 32px rgba(80,50,30,.12);
  border-top:4px solid var(--kp-amber);
}
.kp-hero-catch .em { color:var(--kp-accent-br); }
.kp-hero-sub {
  display:block; font-size:16.5px; line-height:1.9; margin-bottom:32px;
  color:#3a2a23; font-weight:bold;
}
/* 明るい背景向けに、ヒーロー内ボタンを濃色で視認性確保 */
.kp-hero .kp-btn-onbrown {
  background:linear-gradient(135deg, var(--kp-accent-br), var(--kp-accent)); color:#fff;
  box-shadow:0 6px 18px rgba(198,70,52,.32);
  font-size:21px; padding:22px 52px; font-weight:bold;
}
.kp-hero .kp-btn-onbrown:hover {
  background:linear-gradient(135deg, #d4513e, #ab3a30); color:#fff;
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(198,70,52,.44);
}
.kp-hero .kp-btn-ghost { background:rgba(255,255,255,.92); color:var(--kp-brown); border-color:var(--kp-brown); }
.kp-hero .kp-btn-ghost:hover { background:#fff; color:var(--kp-brown); }
.kp-hero-btns { display:flex; flex-direction:column; align-items:center; gap:10px; }
.kp-hero-btns .kp-btn { margin:0; }
/* ログインボタン（メインラベル＋小見出しの2段） */
.kp-btn-login { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.3; gap:2px; }
.kp-btn-login .kp-btn-login-main { display:block; width:100%; font-size:17px; }
.kp-btn-login .kp-btn-login-sub { display:block; width:100%; font-size:11.5px; font-weight:bold; opacity:.85; }
/* ヒーロー／CTA でのログインボタン: サブ的な小サイズ・薄め表示 */
.kp-hero .kp-btn-ghost.kp-btn-login,
.kp-cta .kp-btn-outline.kp-btn-login {
  font-size:15px; padding:12px 30px;
  border-color:rgba(133,81,63,.35); color:#222;
}
.kp-hero .kp-btn-ghost.kp-btn-login .kp-btn-login-main,
.kp-cta .kp-btn-outline.kp-btn-login .kp-btn-login-main { font-size:16px; }
.kp-hero .kp-btn-ghost.kp-btn-login .kp-btn-login-sub,
.kp-cta .kp-btn-outline.kp-btn-login .kp-btn-login-sub { font-size:11px; }

/* ボタン */
.kp-btn {
  display:inline-block; font-weight:bold; border-radius:4px; text-decoration:none;
  padding:16px 34px; font-size:16px; margin:8px; transition:.2s; border:2px solid transparent;
}
.kp-btn-lg { padding:18px 44px; font-size:17px; }
.kp-btn-primary { background:linear-gradient(135deg, var(--kp-accent-br), var(--kp-accent)); color:#fff; box-shadow:0 6px 18px rgba(198,70,52,.38); }
.kp-btn-primary:hover { background:linear-gradient(135deg, #d4513e, #ab3a30); color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 24px rgba(198,70,52,.45); }
.kp-btn-onbrown { background:#fff; color:var(--kp-brown); }
.kp-btn-onbrown:hover { background:var(--kp-gold); color:#3a2a23; text-decoration:none; }
.kp-btn-ghost { background:transparent; color:#fff; border-color:#fff; }
.kp-btn-ghost:hover { background:#fff; color:var(--kp-brown); text-decoration:none; }
.kp-btn-outline { background:#fff; color:var(--kp-brown); border-color:var(--kp-brown); }
.kp-btn-outline:hover { background:var(--kp-beige); color:var(--kp-brown); text-decoration:none; }

/* 数字 */
.kp-stat {
  text-align:center; padding:28px 16px 24px;
  background:#fff; border-radius:12px;
  box-shadow:0 4px 20px rgba(133,81,63,.12);
  border-bottom:4px solid var(--kp-amber);
}
.kp-stat .kp-stat-ic { font-size:42px; line-height:1; margin-bottom:12px; }
.kp-stat .kp-stat-bar { height:4px; width:64px; margin:0 auto 16px; border-radius:2px;
  background:linear-gradient(90deg, var(--kp-amber), var(--kp-accent-br)); }
.kp-stat .kp-num { font-size:46px; font-weight:bold; color:var(--kp-accent); line-height:1.1; margin:0 0 8px; }
.kp-stat .kp-num span { font-size:20px; }
.kp-stat .kp-cap { margin:0; color:#555; font-size:14px; }

/* 理由カード */
.kp-reason {
  background:#fff; border:none;
  border-radius:12px; padding:30px 24px; height:100%;
  box-shadow:0 6px 22px rgba(133,81,63,.11);
  border-top:5px solid var(--kp-amber);
  transition:transform .22s, box-shadow .22s;
}
.kp-reason:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(133,81,63,.18); }
.kp-reason .kp-reason-ic {
  font-size:36px; line-height:1;
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg, #fff8ec, #ffecc7);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  box-shadow:0 3px 10px rgba(230,169,60,.22);
}
.kp-reason .kp-rno {
  display:inline-block; font-size:11.5px; font-weight:bold; letter-spacing:.1em;
  color:#fff; background:var(--kp-accent-br);
  padding:3px 12px; border-radius:12px; margin:0 0 12px;
}
.kp-reason h3 { font-size:20px; font-weight:bold; color:var(--kp-brown-d); margin:0 0 14px; padding:0; border:none; }
.kp-reason p { margin:0; font-size:14.5px; line-height:1.9; color:#444; }

/* Kuma-POSとは（メイン説明を大きく目立たせる） */
.kp-about {
  background:linear-gradient(135deg, var(--kp-cream) 0%, #fdf0de 100%);
  border-radius:14px; padding:40px 36px 36px;
  box-shadow:0 2px 14px rgba(133,81,63,.07);
  border-left:6px solid var(--kp-amber);
}
.kp-about p { font-size:16.5px; line-height:2; color:#403229; }
.kp-about p.kp-lead {
  font-size:20px; line-height:1.85; font-weight:bold; color:#2f221b;
  margin-bottom:16px; padding:18px 22px;
  background:#fff; border-radius:8px;
  box-shadow:0 2px 8px rgba(133,81,63,.08);
  border-left:4px solid var(--kp-accent-br);
}
.kp-about p.kp-lead .em { color:var(--kp-accent-br); }
@media (max-width:767px){
  .kp-about { padding:28px 20px 24px; }
  .kp-about p.kp-lead { font-size:17px; padding:14px 16px; }
  .kp-about p { font-size:15.5px; }
}

/* テーブル */
.kp .table-detail th { background:#f3f1f1; width:24%; padding:12px 16px; vertical-align:middle; }
.kp .table-detail td { padding:12px 16px; vertical-align:middle; }
.kp-row-em th, .kp-row-em td { background:#fbf3e6 !important; }
.kp-row-em th { color:var(--kp-accent); }

/* プラン比較 */
.kp-plan-table { text-align:center; }
.kp .kp-plan-table thead th { background:var(--kp-brown); color:#fff; vertical-align:middle; border-color:#6a3d2f !important; text-align: center; padding-top:26px; }
.kp-plan-table thead th.kp-reco { background:var(--kp-accent); position:relative; }
.kp-plan-table thead th.kp-reco::before { content:"おすすめ"; position:absolute; top:5px; left:50%;
  transform:translateX(-50%); background:var(--kp-gold); color:#3a2a23; font-size:10px; font-weight:bold;
  padding:2px 12px; border-radius:10px; white-space:nowrap; }
.kp-plan-alphabet {font-family:'Verdana'; font-size: 1.1em;}
.kp-plan-table th.kp-rowhead { background:#f3f1f1; text-align:left; white-space:nowrap; }
.kp-plan-table .kp-price { font-size:21px; font-weight:bold; color:var(--kp-accent); }
.kp-plan-col-reco { background:#fdf6ef; }
/* 「出版POSサービスへのデータ開示」行を強調 */
.kp-plan-table tr.kp-disc th.kp-rowhead { background:#fbeae0; color:var(--kp-accent); font-weight:bold; }
.kp-plan-table tr.kp-disc td { background:#fff6ef; }
.kp-plan-table tr.kp-disc td.kp-plan-col-reco { background:#fce9d9; }
.kp-circle { display:inline-block; color:var(--kp-accent-br); font-size:26px; font-weight:bold; line-height:1; }

.kp-plan-card { border:1px solid #e7e7e7; border-top:3px solid var(--kp-brown); border-radius:6px;
  padding:22px 20px; height:100%; }
.kp-plan-card.reco { border-top-color:var(--kp-accent); box-shadow:0 4px 14px rgba(158,54,47,.12); }
.kp-plan-card .kp-plan-name { font-size:18px; font-weight:bold; color:var(--kp-accent); margin:0 0 2px; }
.kp-plan-card .kp-plan-price { font-size:24px; font-weight:bold; margin:0 0 14px; color:#3a2a23; }
.kp-plan-card .kp-plan-price small { font-size:13px; font-weight:normal; color:#666; }
.kp-plan-card p { font-size:14px; line-height:1.85; margin:0; color:#444; }

/* 出版POSサービス 強調 */
.kp-pospos { border:2px solid var(--kp-accent); border-radius:10px; overflow:hidden;
  box-shadow:0 8px 26px rgba(158,54,47,.16); }
.kp-pospos-head { background:var(--kp-accent); color:#fff; padding:16px 24px; font-size:19px; font-weight:bold;
  display:flex; align-items:center; gap:10px; }
.kp-pospos-head .ic { font-size:22px; }
.kp-pospos-body { background:#fff7f6; padding:24px 26px; }
.kp-pospos-body p { font-size:15px; line-height:1.9; margin:0 0 12px; }
.kp-pospos-body .kp-strong { color:var(--kp-accent); font-weight:bold; }
.kp-pospos-body .kp-note { font-size:14px; color:var(--kp-accent-br); font-weight:bold; background:#fff;
  border-left:4px solid var(--kp-accent-br); padding:11px 14px; margin:0; }

/* フロー（flex 横並びで1行に収める） */
.kp-flow { display:flex; align-items:flex-start; justify-content:center; gap:4px; flex-wrap:nowrap; }
.kp-flow-step { flex:1 1 0; min-width:0; text-align:center; }
.kp-flow-num { background:var(--kp-brown); color:#fff; width:48px; height:48px; border-radius:50%;
  line-height:48px; font-size:20px; font-weight:bold; margin:0 auto 10px; }
.kp-flow-step .t { font-weight:bold; font-size:13.5px; margin-bottom:6px; }
.kp-flow-step .d { font-size:12px; color:#555; margin:0; line-height:1.6; }
.kp-flow-arrow { flex:0 0 auto; align-self:center; font-size:18px; color:var(--kp-gold); padding-top:8px; }

/* CTA */
.kp-cta { background:linear-gradient(135deg, var(--kp-cream), #f7ead7); padding:48px 0; margin:0 -15px 0; text-align:center; }
.kp-cta h2.kp-cta-title { border:none; margin:0 0 14px; color:#3a2a23; font-size:30px; font-weight:bold; }
.kp-cta h2.kp-cta-title::after { content:""; display:block; width:64px; height:4px; margin:12px auto 0;
  border-radius:2px; background:linear-gradient(90deg, var(--kp-amber), var(--kp-accent-br)); }
.kp-cta .kp-cta-lead { font-size:17px; font-weight:bold; color:#403229; line-height:1.85; margin-bottom:30px; }
.kp-cta .kp-btn-primary { font-size:21px; padding:22px 52px; font-weight:bold; }
.kp-cta-btns { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; }
.kp-cta-btns .kp-btn { margin:0; }
.kp address.kp-addr { font-style:normal; color:#555; font-size:14px; line-height:2; }
.kp address.kp-addr a { color:var(--kp-accent); }

/* 本文中のフロー要素（モバイル時に number 左 / text 右で使う） */
.kp-flow-body { display:block; }

@media (max-width:767px){
  .kp-hero-catch { width:96%; font-size:21px; padding:18px 20px; border-radius:14px; }
  .kp-hero-sub { font-size:15px; }
  .kp-hero-btns .kp-btn { display:block; width:100%; margin-left:0; margin-right:0; }
  .kp-cta h2.kp-cta-title { font-size:24px; }
  /* スマホ: 縦1列、番号を左・文章を右に */
  .kp-flow { flex-direction:column; align-items:stretch; gap:0; }
  .kp-flow-step { flex:1 1 auto; display:flex; align-items:center; gap:14px;
    text-align:left; padding:14px 4px; border-bottom:1px solid #eee; }
  .kp-flow-step:last-child { border-bottom:none; }
  .kp-flow-num { margin:0; flex:0 0 auto; text-align: center; }
  .kp-flow-body { flex:1 1 auto; }
  .kp-flow-step .t { margin:0 0 3px; }
  .kp-flow-step .t br { display:none; }
  .kp-flow-arrow { display:none; }
}