@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300..900&display=swap");
/* ==========================================================================
   ポサコLP（ポサコLP_改訂版1.psd 完全再現 / カンバス1200×4730）
   背景=セクション横幅100%フルブリード / コンテンツ=.cv 最大1300px中央寄せ
   .cv がコンテナ（1cqw=コンテンツ幅の1%・1200デザインpx=100cqw）
   画像パス: 本番移行時は /assets/img/lp/ → /assets/img/lp/
   ========================================================================== */
:root{
  --navy:#064286;
  --text:#222222;
  --or1:#FEB504; --or2:#FF8700;
  --font:'Noto Sans JP',-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --din:'Noto Sans JP',sans-serif; /* 数字もサイト標準フォントに統一 */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);color:var(--text);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;}
a{text-decoration:none;}

/* ---------- 共通 ---------- */
/* グロナビ密着回避の上余白（marginは相殺されるためpadding） */
.lp-root{padding-top:36px;background:#fff;}
/* 本番LPレイアウトは ≥992px で .theme-nav が fixed（実測: トップバー+グロナビ133px＋告知バー43px）。
   .lp-main の padding-top(2.4rem) は告知バー分のみのため、残り133px＋見た目の余白36pxを確保する。
   .lp-page は本番のみ付与される body クラス（ローカルプレビューには影響しない） */
@media (min-width:992px){
  .lp-page .lp-root{padding-top:169px;}
}
/* 本ページ限定: フッター共通の無料トライアルCTAバンドはクロージングと重複するため非表示
   （lp-focus.css は本LPのみが読み込むため全体セレクタでよい） */
.footer-trial-cta{display:none!important;}
.sec{position:relative;width:100%;container-type:inline-size;}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cv{position:relative;max-width:1300px;margin-inline:auto;container-type:inline-size;}
.s1 .cv{aspect-ratio:1200/750;}
.s2 .cv{aspect-ratio:1200/1085;}
.s3 .cv{aspect-ratio:1200/1200;}
.s4 .cv{aspect-ratio:1200/1122;}
.s5 .cv{aspect-ratio:1200/573;}
.abs{position:absolute;}
.ctr{left:0;right:0;text-align:center;}
/* Photoshopメトリクス詰め相当（約物半角） */
.s1-lead1,.s2-title,.s2-br1,.s2-br2 span,.s3-title,.f-h3,
.s4-eyebrow,.s4-titlerow .naracou,.s4-titlerow .kawari,.s4-f1,.s4-f2,
.s5-h2,.s5-body{font-feature-settings:"halt";}

/* CTAボタン */
.cta{
  position:absolute;display:flex;align-items:center;justify-content:center;gap:1.9167cqw;
  width:45.5833cqw;height:5.25cqw;border-radius:2.625cqw;
  background:linear-gradient(90deg,var(--or1) 0%,var(--or2) 100%);
  box-shadow:0 0.5cqw 1.3333cqw rgba(20,60,90,.35);
  color:#fff;font-size:2.0833cqw;font-weight:400;letter-spacing:.015em;line-height:1;white-space:nowrap;
  transition:filter .2s,transform .2s;
}
.cta:hover{filter:brightness(1.06);transform:translateY(-0.1667cqw);}
.cta img{width:2.1667cqw;height:auto;}

/* ==========================================================================
   1. FV（カンバス0–750）
   ========================================================================== */
.s1 .copy{color:#fff;text-shadow:0 0.1667cqw 0.6667cqw rgba(9,53,97,.45);}
.s1-h1{left:8.4167cqw;top:11.9167cqw;font-size:4.1667cqw;font-weight:700;letter-spacing:.015em;line-height:1;white-space:nowrap;}
.s1-h1 .p{font-size:3.5cqw;font-weight:500;}
.s1-sub{left:8.4167cqw;top:17.9167cqw;font-size:2.0833cqw;font-weight:500;letter-spacing:.015em;line-height:1;display:flex;align-items:center;gap:0.75cqw;white-space:nowrap;}
.s1-sub img{width:6.25cqw;height:auto;}
.s1-lead1{left:8.4167cqw;top:23.5cqw;font-size:2.0833cqw;font-weight:400;letter-spacing:.015em;line-height:1;white-space:nowrap;}
.s1-lead2{left:8.4167cqw;top:27cqw;font-size:2.0833cqw;font-weight:400;letter-spacing:.015em;line-height:1;white-space:nowrap;}
.badge{
  top:33.5833cqw;width:16.0833cqw;height:6.9167cqw;padding-top:1.3333cqw;
  background:linear-gradient(115deg,#1E8AC9 0%,#187FBF 20%,#093573 100%);
  box-shadow:0 0.3333cqw 0.8333cqw rgba(9,53,97,.35);
  color:#fff;font-size:1.3333cqw;font-weight:400;letter-spacing:.015em;line-height:2.1667cqw;text-align:center;
  border-radius:0;
}
.badge.b1{left:8.25cqw;}
.badge.b2{left:24.9167cqw;}
.s1-pc{left:44.75cqw;top:6.8333cqw;width:50.75cqw;height:auto;}
.s1 .cta{left:27.1667cqw;top:49cqw;}

/* ==========================================================================
   2. 悩む層（カンバス750–1835）
   ========================================================================== */
/* 水色帯: フルブリード。上辺は中央がV字に100デザインpx下がる（cqwは.sec基準・1300px上限でキャンバス比率固定） */
.s2-band{
  position:absolute;left:0;right:0;bottom:0;
  top:min(45.8333cqw,595.8333px);
  background:linear-gradient(180deg,#DDF0F8 0%,#FDFEFF 100%);
  clip-path:polygon(0 0,50% min(8.3333cqw,108.3333px),100% 0,100% 100%,0 100%);
}
.s2-title{top:8.4167cqw;font-size:4.1667cqw;font-weight:500;color:var(--navy);letter-spacing:.015em;line-height:1;white-space:nowrap;}
.s2-panelimg{left:8.3333cqw;top:16.6667cqw;width:83.3333cqw;height:auto;}
.s2-person{left:0;top:9.6667cqw;width:49.6667cqw;height:auto;}
.check-list{list-style:none;}
.check-list li{
  position:absolute;left:41.4167cqw;width:45.0833cqw;padding-left:2.75cqw;
  font-size:1.3333cqw;font-weight:350;color:var(--text);letter-spacing:.015em;line-height:2.3333cqw;white-space:nowrap;
  text-shadow:0 0 0.5cqw #fff,0 0 0.8333cqw #fff;
}
.check-list li:nth-child(1){top:24.9167cqw;}
.check-list li:nth-child(2){top:28.1667cqw;}
.check-list li:nth-child(3){top:33.5833cqw;}
.check-list li:nth-child(4){top:39cqw;}
.check-list li:nth-child(5){top:42.4167cqw;}
.check-list li::before{
  content:"";position:absolute;left:0;top:0.3333cqw;width:1.75cqw;height:1.75cqw;
  background:url("/assets/img/lp/lp-check.png") center/contain no-repeat;
}
.check-list li::after{content:"";position:absolute;left:-0.0833cqw;width:45.0833cqw;height:2px;background:#fff;}
.check-list li:nth-child(1)::after{top:2.5833cqw;}
.check-list li:nth-child(2)::after{top:4.5833cqw;}
.check-list li:nth-child(3)::after{top:4.6667cqw;}
.check-list li:nth-child(4)::after{top:2.5833cqw;}
.check-list li:nth-child(5)::after{top:2.5833cqw;}
.s2-br1{top:58.3333cqw;font-size:2.0833cqw;font-weight:400;color:var(--navy);letter-spacing:.015em;line-height:1;white-space:nowrap;}
.s2-br2{top:61.6667cqw;display:flex;align-items:center;justify-content:center;gap:0.9167cqw;left:0;right:0;}
.s2-br2 img{width:9.1667cqw;height:auto;}
.s2-br2 span{font-size:2.0833cqw;font-weight:400;color:var(--navy);letter-spacing:.015em;line-height:1;white-space:nowrap;}
.s2-chev{position:absolute;left:36.5cqw;top:69.25cqw;display:flex;gap:4.6667cqw;}
.s2-chev img{width:5.9167cqw;height:auto;}

/* ==========================================================================
   3. 特徴（カンバス1835–3035）
   ========================================================================== */
/* ポリゴン背景は上下を白へフェード（元デザインのセクション境界ぼかしを再現） */
.s3{background:#fff;}
.s3 .bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 9%,#000 22%,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 9%,#000 22%,#000 78%,rgba(0,0,0,.45) 91%,transparent 100%);
}
.s3-title{top:-12.25cqw;font-size:4.1667cqw;font-weight:500;color:var(--navy);letter-spacing:.015em;line-height:4.25cqw;white-space:nowrap;}
.s3-title .n3{font-family:var(--din);font-size:5.4167cqw;font-weight:600;letter-spacing:.025em;}
.s3-title .tsu{font-size:3.3333cqw;}
.s3-title .grad{
  background:linear-gradient(90deg,var(--or1),var(--or2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.f-num{font-family:var(--din);font-size:8.3333cqw;font-weight:400;letter-spacing:.025em;line-height:1;color:rgba(6,66,134,.3);}
.f-h3{font-size:2.5cqw;font-weight:500;color:var(--navy);letter-spacing:.025em;line-height:1;white-space:nowrap;}
.f-h3 .p{font-size:2.0833cqw;}
.f-h3 .din{font-family:var(--din);font-size:3.5833cqw;font-weight:600;}
.f-h3 .lg{font-size:2.9167cqw;}
.f-body{font-size:1.3333cqw;font-weight:350;color:var(--text);letter-spacing:.025em;line-height:2.1667cqw;white-space:nowrap;}
/* 特徴写真は影内包の透過PNG（キャンバス切出座標に合わせて配置） */
.f1-img{left:0;top:-0.9167cqw;width:51.6667cqw;}
.f1-num{left:85.0833cqw;top:1.0833cqw;}
.f1-h3{left:54.1667cqw;top:4.0417cqw;}
.f1-body{left:54.1667cqw;top:9cqw;}
.f2-img{left:46.6667cqw;top:26.6667cqw;width:53.3333cqw;}
.f2-num{left:39.1667cqw;top:33.75cqw;}
.f2-h3a{left:8.4167cqw;top:37.5cqw;}
.f2-h3b{left:8.4167cqw;top:40.9167cqw;}
.f2-body{left:8.25cqw;top:45.5833cqw;}
.f3-img{left:0;top:65.9167cqw;width:51.6667cqw;}
.f3-num{left:83.9167cqw;top:67cqw;}
.f3-h3a{left:54.25cqw;top:70.3333cqw;}
.f3-h3b{left:54.1667cqw;top:74.0833cqw;}
.f3-body{left:54.1667cqw;top:78.75cqw;}

/* ==========================================================================
   4. 比較（カンバス3035–4157）
   ========================================================================== */
/* 会場写真背景: 上端基準で表示し原素材のタイトル周りの白さを維持。下端は白へフェード */
.s4{background:#fff;}
.s4 .bg{
  object-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
}
.s4-eyebrow{top:8.0833cqw;font-size:2.5cqw;font-weight:500;color:var(--navy);letter-spacing:.025em;line-height:1;white-space:nowrap;}
.s4-eyebrow .p{font-size:2.0833cqw;}
.s4-titlerow{top:11.8333cqw;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;}
.s4-titlerow img{width:11.25cqw;height:auto;margin-bottom:0.25cqw;}
.s4-titlerow .naracou{font-size:2.5cqw;font-weight:500;color:var(--navy);letter-spacing:.025em;line-height:1;padding:0 0.5833cqw 0.3333cqw 0.3333cqw;white-space:nowrap;}
.s4-titlerow .kawari{
  font-size:4.1667cqw;font-weight:500;letter-spacing:.025em;line-height:1;white-space:nowrap;
  background:linear-gradient(90deg,var(--or1),var(--or2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.s4-table{left:14.6667cqw;top:24.5cqw;width:70.5833cqw;height:auto;}
.s4-f1{top:78.5cqw;font-size:2.5cqw;font-weight:500;color:var(--navy);letter-spacing:.025em;line-height:1;white-space:nowrap;}
.s4-f1 .p{font-size:2.0833cqw;}
.s4-f2{top:82.8333cqw;font-size:3.3333cqw;font-weight:500;color:var(--navy);letter-spacing:.025em;line-height:1;white-space:nowrap;}
.s4-f2 .p{font-size:2.9167cqw;}
.s4-f2 .sm{font-size:2.5cqw;}

/* ==========================================================================
   5. クロージング（カンバス4157–4730）
   ========================================================================== */
.s5-wm{color:rgba(6,66,134,.2);font-weight:900;font-size:12.5cqw;letter-spacing:.025em;line-height:1;white-space:nowrap;pointer-events:none;user-select:none;}
.s5-wm.w1{left:25.8333cqw;top:6.9167cqw;}
.s5-wm.w2{left:5.5833cqw;top:20.9167cqw;}
.s5-h2{top:8.5833cqw;font-size:4.1667cqw;font-weight:700;color:#fff;letter-spacing:.025em;line-height:1;white-space:nowrap;text-shadow:0 0.1667cqw 0.6667cqw rgba(20,70,100,.4);}
.s5-h2 .p{font-size:3.75cqw;font-weight:500;}
.s5-b1{top:19.4167cqw;}
.s5-b2{top:23.9167cqw;}
.s5-body{font-size:2.5cqw;font-weight:400;color:#fff;letter-spacing:.025em;line-height:1;white-space:nowrap;text-shadow:0 0.1667cqw 0.6667cqw rgba(20,70,100,.4);}
.s5 .cta{left:27.25cqw;top:34.25cqw;}


/* ==========================================================================
   モバイル（<768px）: PSDはPC版のみのため同素材で再構成
   ========================================================================== */
@media (max-width:767px){
  .lp-root{padding-top:0;}
  .sec{width:100%;height:auto;overflow:hidden;}
  .cv{max-width:none;aspect-ratio:auto;}
  .bg{z-index:0;}
  .abs{position:relative;top:auto;left:auto;right:auto;bottom:auto;z-index:1;}
  .ctr{text-align:center;}
  br.d{display:none;}
  .cta,.s1 .cta,.s5 .cta{position:relative;z-index:1;top:auto;left:auto;width:min(92%,420px);height:56px;border-radius:28px;font-size:15px;margin:0 auto;gap:10px;white-space:nowrap;}
  .cta img{width:18px;}

  /* FV */
  .s1 .cv{padding:40px 20px 48px;}
  .s1 .bg{object-position:70% top;}
  .s1-h1,.s1-sub,.s1-lead1,.s1-lead2{white-space:normal;}
  .s1-h1{font-size:34px;margin-bottom:14px;}
  .s1-h1 .p{font-size:28px;}
  .s1-sub{font-size:16px;margin-bottom:20px;display:flex;gap:8px;align-items:center;}
  .s1-sub img{width:52px;}
  .s1-lead1,.s1-lead2{font-size:15px;line-height:1.9;}
  .s1-badges{position:relative;display:flex;gap:10px;margin:22px 0;}
  .badge{position:static;width:auto;flex:1;height:auto;padding:10px 8px;font-size:12px;line-height:1.6;}
  .s1-pc{position:relative;width:100%;max-width:480px;margin:6px auto 26px;}

  /* 悩む層 */
  .s2 .cv{padding:48px 0 56px;}
  .s2{background:linear-gradient(180deg,#fff 55%,#E9F5FA 100%);}
  .s2-band{display:none;}
  .s2-panelimg{display:none;}
  .s2-title{font-size:26px;margin-bottom:24px;white-space:normal;}
  .s2-person{width:78%;max-width:420px;margin:0 0 4px;}
  .s2-panel{background:#F0F0F0;padding:20px 18px;margin:0 0 40px;}
  .check-list li{position:relative;left:auto;top:auto!important;width:auto;font-size:14px;line-height:1.75;padding:10px 0 10px 30px;white-space:normal;border-bottom:2px solid #fff;}
  .check-list li::before{width:18px;height:18px;top:12px;}
  .check-list li::after{display:none;}
  .s2-br1{font-size:15px;line-height:1.9;padding:0 22px;margin-bottom:10px;white-space:normal;}
  .s2-br2{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;}
  .s2-br2 img{width:72px;}
  .s2-br2 span{font-size:15px;white-space:normal;}
  .s2-chev{position:relative;left:auto;top:auto;display:flex;justify-content:center;gap:24px;margin-top:26px;}
  .s2-chev img{width:40px;}

  /* 特徴 */
  .s3 .cv{padding:52px 0 56px;}
  .s3-title{position:relative;font-size:24px;line-height:1.4;white-space:normal;padding:0 16px;margin-bottom:34px;top:auto;}
  .s3-title .n3{font-size:34px;}
  .s3-title .tsu{font-size:20px;}
  .feat{position:relative;margin-bottom:44px;padding:0 22px;}
  .feat .fimg{position:relative;width:100%;margin-bottom:16px;left:auto;top:auto;}
  /* 番号は見出し右に重ねて行高を取らせない（見出し2行の間延び防止） */
  .f-head{position:relative;display:block;margin-bottom:2px;}
  .f-num{position:absolute;right:2px;top:-14px;font-size:48px;z-index:0;}
  .f-h3{position:relative;z-index:1;font-size:20px;line-height:1.5;white-space:normal;}
  .f-h3 .p{font-size:17px;}
  .f-h3 .din{font-size:26px;}
  .f-h3 .lg{font-size:22px;}
  .f-body{font-size:14px;line-height:1.85;width:auto;white-space:normal;margin-top:8px;}

  /* 比較 */
  .s4 .cv{padding:52px 0 56px;}
  .s4-eyebrow{position:relative;font-size:18px;margin-bottom:8px;white-space:normal;}
  .s4-eyebrow .p{font-size:15px;}
  .s4-titlerow{position:relative;display:flex;align-items:flex-end;justify-content:center;margin-bottom:22px;}
  .s4-titlerow img{width:82px;margin-bottom:2px;}
  .s4-titlerow .naracou{font-size:18px;padding:0 4px 3px 3px;}
  .s4-titlerow .kawari{font-size:30px;}
  .s4-hint{position:relative;text-align:right;font-size:11px;color:#456;padding:0 18px 4px;}
  .s4-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 18px 6px;}
  .s4-table{position:static;width:640px;max-width:none;}
  .s4-f1{position:relative;font-size:17px;margin:30px 0 8px;white-space:normal;}
  .s4-f1 .p{font-size:15px;}
  .s4-f2{position:relative;font-size:21px;padding:0 16px;line-height:1.5;white-space:normal;}
  .s4-f2 .p{font-size:19px;}
  .s4-f2 .sm{font-size:17px;}

  /* クロージング */
  .s5 .cv{padding:56px 20px 60px;}
  .s5-wm{position:absolute;font-size:64px;}
  .s5-wm.w1{left:18%;top:36px;}
  .s5-wm.w2{left:-4%;top:150px;}
  .s5-h2{position:relative;font-size:24px;margin-bottom:24px;white-space:normal;}
  .s5-h2 .p{font-size:21px;}
  .s5-body{position:relative;font-size:14px;line-height:2;white-space:normal;}
  .s5-b2{margin-bottom:34px;}
}
@media (min-width:768px){
  .s1-inner,.s1-badges,.s2-panel,.feat,.f-head,.s4-scroll{display:contents;}
  .s4-hint{display:none;}
}