@charset "utf-8";
/*
 * 広告LP専用スタイル（template-lp.php でのみ読み込む）
 * このテンプレートでは bootstrap / dxway-style / block.css / コアブロックCSS / global-styles / WooCommerce CSS を
 * すべて dequeue しているため（functions.php の dxway_lp_scripts_styles）、リセットからすべてここに含める。
 */
:root{
  --teal-900:#045C66;
  --teal-700:#03A0B3;
  --teal-500:#29AEC0;
  --teal-100:#D9F1F4;
  --teal-050:#F2F8F7;
  --ink:#1C2B29;
  --ink-sub:#5A6E6B;
  --line:#D8E4E2;
  --sun:#F2C14E;
  --white:#FFFFFF;
  --radius:16px;
}
.lp, .lp *{margin:0;padding:0;box-sizing:border-box;}
.lp{
  font-family:'Noto Sans JP',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  font-size:16px;
}
.lp h1,.lp h2,.lp h3,.lp .display{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;}
.lp img{max-width:100%;display:block;}
.lp .wrap{max-width:960px;margin:0 auto;padding:0 24px;}

/* ---- ヘッダー（広告LPだけ最小構成） ---- */
.lp-header{
  padding:14px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--teal-700);
  position:relative;
  z-index:20;
}
.lp-header .logo{font-family:'Zen Kaku Gothic New';font-weight:900;font-size:18px;color:var(--white);}
.lp-header .logo span{color:rgba(255,255,255,0.75);}
.lp-header .header-actions{display:flex;gap:10px;}
.lp-header .header-actions a{
  display:inline-block;
  font-size:14.5px;
  font-weight:700;
  padding:8px 18px;
  border-radius:999px;
  border:1.4px solid rgba(255,255,255,0.85);
  color:var(--white);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.lp-header .header-actions a:hover{
  background:rgba(255,255,255,0.15);
  transform:translateY(-1px);
}
.lp-header .header-actions a.filled{
  background:var(--white);
  color:var(--teal-700);
  border-color:var(--white);
}
.lp-header .header-actions a.filled:hover{
  background:var(--teal-050);
  box-shadow:0 6px 14px rgba(0,0,0,0.2);
}

/* ハンバーガーメニュー（720px以下でheader-actionsの代わりに表示） */
.lp-header .menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  background:none;border:none;padding:0;
  cursor:pointer;
}
.lp-header .menu-toggle span{
  display:block;width:100%;height:2px;
  background:var(--white);
  border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.lp-header .menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.lp-header .menu-toggle.is-active span:nth-child(2){opacity:0;}
.lp-header .menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- FV（ファーストビュー） ---- */
.lp .fv{
  background:linear-gradient(160deg,var(--teal-900) 0%,var(--teal-700) 55%,var(--teal-500) 100%);
  color:var(--white);
  padding:48px 24px 52px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.lp .fv h1{
  font-size:clamp(30px,5.5vw,48px);
  font-weight:900;
  line-height:1.45;
  margin-bottom:22px;
}
.lp .fv h1 em{
  font-style:normal;
  color:var(--sun);
}
.lp .fv-sub{
  font-size:17px;
  color:rgba(255,255,255,0.88);
  max-width:520px;
  margin:0 auto 36px;
}
.lp .fv-cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:20px;
}
.lp .cta-btn{
  background:var(--white);
  color:var(--teal-900);
  font-weight:900;
  font-size:17px;
  padding:18px 40px;
  border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,0.25);
  text-decoration:none;
  display:inline-block;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.lp .cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,0.32);
  background:var(--teal-100);
}
.lp .cta-note{font-size:13px;color:rgba(255,255,255,0.75);}

.lp .fv-illust{
  width:100%;
  max-width:600px;
  margin:16px auto 0;
  height:auto;
  border-radius:var(--radius);
}

/* ---- 課題提起 ---- */
.lp .pain{padding:64px 24px;background:var(--teal-050);}
.lp .pain h2{
  text-align:center;
  font-size:24px;
  font-weight:900;
  color:var(--teal-900);
  margin-bottom:8px;
}
.lp .pain-sub{text-align:center;color:var(--ink-sub);font-size:16px;margin-bottom:36px;}
.lp .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lp .pain-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px;
  text-align:center;
}
.lp .pain-card p{font-size:15px;color:var(--ink-sub);}
.lp .pain-card strong{display:block;font-size:16px;color:var(--ink);margin-bottom:6px;}

/* 課題カードのアイコン（kses対策で <svg> ではなく背景画像化） */
.lp_card_icon{
  display:block;
  width:64px;
  height:64px;
  margin:0 auto 14px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.lp_card_icon--tabs{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='10' width='34' height='24' rx='4' fill='%23D9F1F4' stroke='%2303A0B3' stroke-width='2' transform='rotate(-8 23 22)'/%3E%3Crect x='16' y='18' width='34' height='24' rx='4' fill='%23EEF9FA' stroke='%2303A0B3' stroke-width='2' transform='rotate(5 33 30)'/%3E%3Crect x='12' y='30' width='34' height='24' rx='4' fill='%23FFFFFF' stroke='%2303A0B3' stroke-width='2.4' transform='rotate(-3 29 42)'/%3E%3C/svg%3E");
}
.lp_card_icon--repeat{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='12' width='20' height='26' rx='3' fill='%23FFFFFF' stroke='%2303A0B3' stroke-width='2.4'/%3E%3Cline x1='14' y1='19' x2='26' y2='19' stroke='%2303A0B3' stroke-width='2'/%3E%3Cline x1='14' y1='24' x2='26' y2='24' stroke='%2303A0B3' stroke-width='2'/%3E%3Crect x='34' y='20' width='20' height='26' rx='3' fill='%23D9F1F4' stroke='%2303A0B3' stroke-width='2.4'/%3E%3Cline x1='38' y1='27' x2='50' y2='27' stroke='%2303A0B3' stroke-width='2'/%3E%3Cline x1='38' y1='32' x2='50' y2='32' stroke='%2303A0B3' stroke-width='2'/%3E%3C/svg%3E");
}
.lp_card_icon--sheet{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='12' width='44' height='34' rx='4' fill='%23FFFFFF' stroke='%2303A0B3' stroke-width='2.4'/%3E%3Cline x1='10' y1='22' x2='54' y2='22' stroke='%2303A0B3' stroke-width='1.6'/%3E%3Cline x1='24' y1='22' x2='24' y2='46' stroke='%2303A0B3' stroke-width='1.6'/%3E%3Cline x1='38' y1='22' x2='38' y2='46' stroke='%2303A0B3' stroke-width='1.6'/%3E%3Cline x1='10' y1='32' x2='54' y2='32' stroke='%2303A0B3' stroke-width='1.6'/%3E%3Cline x1='10' y1='39' x2='54' y2='39' stroke='%2303A0B3' stroke-width='1.6'/%3E%3Cpath d='M46 40 l7 -7 l4 4 l-7 7 l-5 1 z' fill='%23F2C14E' stroke='%23045C66' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- 3ステップフロー ---- */
.lp .flow{padding:64px 24px;background:var(--white);}
.lp .flow h2{text-align:center;font-size:24px;font-weight:900;color:var(--teal-900);margin-bottom:8px;}
.lp .flow-sub{text-align:center;color:var(--ink-sub);font-size:16px;margin-bottom:44px;}
.lp .flow-line{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  position:relative;
  max-width:820px;
  margin:0 auto;
  gap:20px 44px;
}
.lp .flow-step{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(4,92,102,0.08);
  text-align:center;
  padding:28px 16px 24px;
  position:relative;
  z-index:1;
}
/* ステップ間の矢印（PC: 右向き、カードの間の隙間に重ねて表示） */
.lp .flow-step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:50%;right:-34px;
  transform:translateY(-50%);
  width:0;height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid var(--teal-500);
}
.lp .flow-num{
  width:64px;height:64px;border-radius:50%;
  background:var(--teal-100);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  position:relative;
  background-repeat:no-repeat;
  background-position:center;
  background-size:40px 40px;
}
.lp .flow-num [class^="lp_step_icon"]{display:block;width:100%;height:100%;}
.lp .flow-num .step-badge{
  position:absolute;bottom:-4px;right:-4px;
  width:22px;height:22px;border-radius:50%;
  background:var(--teal-700);color:var(--white);
  font-size:13px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.lp .flow-step strong{display:block;font-size:16px;margin-bottom:4px;}
.lp .flow-step span{font-size:15px;color:var(--ink-sub);}

.lp_step_icon--ask{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='6' y='6' width='28' height='28' rx='6' fill='none' stroke='%2303A0B3' stroke-width='2.4'/%3E%3Ccircle cx='14' cy='16' r='3' fill='none' stroke='%2303A0B3' stroke-width='2.2'/%3E%3Cline x1='21' y1='15' x2='30' y2='15' stroke='%2303A0B3' stroke-width='2'/%3E%3Ccircle cx='14' cy='25' r='3' fill='%2303A0B3'/%3E%3Cline x1='21' y1='24' x2='30' y2='24' stroke='%2303A0B3' stroke-width='2'/%3E%3C/svg%3E");
}
.lp_step_icon--match{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='18' r='8' fill='%23F2C14E'/%3E%3Cpath d='M16.5 18.5 L19 21 L24 15' stroke='%23045C66' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='30' r='3.4' fill='none' stroke='%2303A0B3' stroke-width='2'/%3E%3Ccircle cx='20' cy='33' r='3.4' fill='none' stroke='%2303A0B3' stroke-width='2'/%3E%3Ccircle cx='34' cy='30' r='3.4' fill='none' stroke='%2303A0B3' stroke-width='2'/%3E%3C/svg%3E");
}
.lp_step_icon--result{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='5' y='8' width='30' height='24' rx='4' fill='%23FFFFFF' stroke='%2303A0B3' stroke-width='2.2'/%3E%3Crect x='9' y='14' width='10' height='3.2' rx='1.6' fill='%2329AEC0'/%3E%3Crect x='9' y='20' width='7' height='3.2' rx='1.6' fill='%2329AEC0'/%3E%3Cpath d='M27 13 l3 3 l5.5 -6' stroke='%23F2C14E' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- マッチ度の考え方 ---- */
.lp .match-logic{padding:0 24px 56px;background:var(--white);}
.lp .match-logic-box{
  max-width:820px;
  margin:0 auto;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--teal-050);
  text-align:center;
}
.lp .match-logic-box h2{font-size:20px;font-weight:900;color:var(--teal-900);}
.lp .match-logic-box p{font-size:15px;color:var(--ink-sub);}
.lp .match-logic-box strong{color:var(--ink);}

/* ---- 実績帯 ---- */
.lp .trust{padding:56px 24px;background:var(--teal-900);color:var(--white);}
.lp .trust-inner{
  max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  text-align:center;
}
.lp .trust-item .num{font-size:30px;font-weight:900;color:var(--sun);}
.lp .trust-item .lbl{font-size:14px;color:rgba(255,255,255,0.75);margin-top:6px;}

/* ---- 最終CTA ---- */
.lp .final-cta{padding:72px 24px;text-align:center;background:var(--teal-050);}
.lp .final-cta h2{font-size:24px;font-weight:900;color:var(--teal-900);margin-bottom:12px;}
.lp .final-cta p{color:var(--ink-sub);font-size:16px;margin-bottom:32px;}
.lp .final-cta .cta-btn{background:var(--teal-700);color:var(--white);}
.lp .final-cta .cta-btn:hover{background:var(--teal-900);}

/* ---- 既存/導入済みユーザー向けCTA ---- */
.lp .return-cta{padding:40px 24px;text-align:center;background:var(--white);border-top:1px solid var(--line);}
.lp .return-cta-label{font-size:14.5px;color:var(--ink-sub);margin-bottom:16px;}
.lp .return-cta-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.lp .return-btn{
  display:inline-block;
  font-size:15.5px;
  font-weight:700;
  padding:13px 26px;
  border-radius:999px;
  border:1.6px solid var(--teal-700);
  color:var(--teal-700);
  text-decoration:none;
  background:var(--white);
  transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.lp .return-btn:hover{
  background:var(--teal-050);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(4,92,102,0.12);
}
.lp .return-btn.filled{background:var(--teal-700);color:var(--white);}
.lp .return-btn.filled:hover{
  background:var(--teal-900);
  box-shadow:0 6px 14px rgba(4,92,102,0.25);
}

/* ---- フッター ---- */
.lp .site-footer{background:var(--white);padding:36px 24px 28px;text-align:center;}
.lp .footer-links{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  font-size:14px;margin-bottom:34px;
}
.lp .footer-links a{color:var(--teal-700);text-decoration:underline;}
.lp .footer-links span{color:var(--line);}
.lp .footer-logo{
  width:180px;
  margin:0 auto 24px;
}
.lp .footer-bar{
  background:var(--teal-700);
  color:var(--white);
  font-size:14.5px;
  padding:14px 24px;
  text-align:center;
}
.lp .footer-bar strong{font-weight:700;}

/* ---- 取り扱い製品一覧（詳細）ページ専用 ---- */
.lp .page-head{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:16px 24px;
  position:sticky;top:0;z-index:20;
}
.lp .head-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
}
.lp .page-head .logo{
  font-family:'Zen Kaku Gothic New';font-weight:900;font-size:18px;
  color:var(--teal-900);letter-spacing:.5px;
}
.lp .page-head .logo span{color:var(--ink);font-weight:400;font-size:14.5px;margin-left:8px;}
.lp .back-link{font-size:15px;color:var(--ink-sub);text-decoration:none;transition:color .15s ease;}
.lp .back-link:hover{color:var(--teal-900);}

.lp .intro{max-width:720px;margin:48px auto 32px;padding:0 24px;text-align:center;}
.lp .intro h1{font-size:24px;margin-bottom:12px;color:var(--ink);font-weight:900;}
.lp .intro p{color:var(--ink-sub);font-size:16px;}
.lp .intro .note{
  display:inline-block;margin-top:16px;
  background:var(--teal-050);color:var(--teal-900);
  font-size:14px;padding:7px 16px;border-radius:999px;font-weight:700;
}

.lp .jump-nav{
  max-width:1080px;margin:0 auto 48px;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
}
.lp .jump-nav a{
  font-size:14px;color:var(--teal-900);background:var(--white);
  border:1px solid var(--line);padding:6px 14px;border-radius:16px;
  text-decoration:none;font-weight:700;
  transition:background-color .15s ease;
}
.lp .jump-nav a:hover{background:var(--teal-050);}

.lp .products{
  max-width:880px;margin:0 auto;padding:0 24px 80px;
  display:flex;flex-direction:column;gap:24px;
}
.lp .product-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 36px;scroll-margin-top:90px;
}
.lp .product-card.is-target{
  box-shadow:0 0 0 3px var(--teal-500), 0 8px 24px rgba(4,92,102,0.15);
}
.lp .product-card.owned{
  border-color:var(--teal-700);
  background:linear-gradient(180deg,var(--white) 0%,var(--teal-050) 100%);
}

.lp .card-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.lp .card-title-group h2{font-size:20px;margin:0 0 4px;font-weight:900;color:var(--ink);}
.lp .card-title-group .vendor{font-size:14px;color:var(--ink-sub);}
.lp .badge-own{
  display:inline-block;background:var(--sun);color:var(--teal-900);
  font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;
  margin-left:8px;vertical-align:middle;
}
.lp .price-tag{text-align:right;white-space:nowrap;}
.lp .price-tag .label{font-size:13px;color:var(--ink-sub);display:block;}
.lp .price-tag .amount{font-size:19px;font-weight:900;color:var(--teal-900);}
.lp .price-tag .amount span{font-size:13px;font-weight:400;color:var(--ink-sub);}

.lp .features{margin:18px 0 20px;color:var(--ink);font-size:16px;}
.lp .features p{margin:0;}

.lp .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.lp .tag{
  font-size:12.5px;background:var(--teal-050);color:var(--teal-900);
  padding:4px 10px;border-radius:10px;font-weight:700;
}

.lp .cta-row{display:flex;gap:10px;flex-wrap:wrap;}

/* このページ専用の .btn 系（.cta-btn とは別系統） */
.lp .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 24px;border-radius:999px;font-size:15px;font-weight:700;
  text-decoration:none;cursor:pointer;border:none;
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.lp .btn-primary{background:var(--teal-700);color:var(--white);}
.lp .btn-primary:hover{background:var(--teal-900);}
.lp .btn-secondary{background:var(--white);color:var(--teal-900);border:1px solid var(--teal-700);}
.lp .btn-secondary:hover{background:var(--teal-050);}
.lp .btn-own{background:var(--sun);color:var(--teal-900);}
.lp .btn-own:hover{background:#E0AF3F;}

.lp .to-top{
  position:fixed;right:24px;bottom:24px;
  background:var(--teal-700);color:var(--white);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:18px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:background-color .15s ease,transform .15s ease;
}
.lp .to-top:hover{background:var(--teal-900);transform:translateY(-2px);}

/* ---- AIチャットページ専用 ---- */
.lp .chat-frame-wrap{
  max-width:780px;
  margin:0 auto 80px;
  padding:0 24px;
  position: relative;
  z-index: 10;
}
.lp .chat-frame-wrap .chat-frame,
.lp .chat-frame-wrap .chat-frame-placeholder{
  display:block;width:100%;
  height:70vh;min-height:480px;max-height:760px;
  border-radius:var(--radius);
}
.lp .chat-frame{border:1px solid var(--line);background:var(--white);}

@media(max-width:720px){
  .lp-header{padding:10px 14px;}
  .lp-header .logo{font-size:14px;}

  .lp-header .menu-toggle{display:flex;}

  .lp-header .header-actions{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    gap:0;
    background:var(--teal-700);
    padding:4px 14px 14px;
    box-shadow:0 12px 24px rgba(0,0,0,0.15);
  }
  .lp-header .header-actions.is-open{display:flex;}
  .lp-header .header-actions a{
    font-size:13px;padding:12px 10px;white-space:normal;text-align:center;
    border:none;border-bottom:1px solid rgba(255,255,255,0.25);
    border-radius:0;
  }
  .lp-header .header-actions a:last-child{border-bottom:none;}
  .lp-header .header-actions a.filled{background:none;color:var(--white);}

  .lp .fv{padding:40px 18px 44px;}
  .lp .fv h1{font-size:clamp(28px,8vw,36px);margin-bottom:18px;}
  .lp .fv-illust{margin-top:14px;}
  .lp .match-logic{padding:0 18px 44px;}
  .lp .match-logic-box{padding:20px 18px;text-align:left;}
  .lp .pain-grid{grid-template-columns:1fr;}
  .lp .flow-line{grid-template-columns:1fr;gap:40px;}
  .lp .flow-step:not(:last-child)::after{
    top:auto;right:auto;
    bottom:-28px;left:50%;
    transform:translateX(-50%) rotate(90deg);
  }
  .lp .trust-inner{grid-template-columns:1fr;gap:20px;}

  .lp .product-card{padding:24px 20px;}
  .lp .card-top{flex-direction:column;}
  .lp .price-tag{text-align:left;}
  .lp .to-top{right:16px;bottom:16px;width:40px;height:40px;font-size:16px;}

  .lp .chat-frame-wrap{padding:0 16px;}
  .lp .chat-frame-wrap .chat-frame,
  .lp .chat-frame-wrap .chat-frame-placeholder{height:75vh;min-height:420px;}
}