/* lnw_fix.css — 一番上と「SEO × OPERATION」の高さを詰める／制作デモの案内（lnw_webfix_pkg） */

/* 1) 一番上：ヘッダーの下から「現在開発中…」の行までを1画面に収める */
@media (min-width:861px){
  .hero{min-height:0}
  .hero-grid{padding-block:clamp(28px,4.4vh,52px) clamp(28px,4vh,48px);gap:36px}
  .campaign-pill{margin-bottom:clamp(10px,1.6vh,18px)}
  .hero-kicker{margin-bottom:6px}
  .hero h1{font-size:clamp(2.3rem,min(3.6vw,6.8vh),3.4rem);letter-spacing:.02em;line-height:1.22;margin-bottom:clamp(10px,1.8vh,18px)}
  .hero-lead{line-height:1.85;margin-bottom:clamp(8px,1.4vh,16px)}
  .hero-price{margin:clamp(6px,1vh,14px) 0 4px}
  .hero-price strong{font-size:clamp(2.2rem,min(3.6vw,6.4vh),3.6rem)}
  .hero-bonus{margin-bottom:clamp(12px,2vh,22px)}
  .hero-notes{margin-top:clamp(10px,1.6vh,18px)}
}
/* 画面の低いPC（ノートなど） */
@media (min-width:861px) and (max-height:760px){
  .hero-lead{font-size:.92rem}
  .hero-notes{font-size:.7rem}
}
/* スマホ・タブレット：上の空きを詰める */
@media (max-width:860px){
  .hero-grid{padding-block:32px 40px}
}

/* 2) SEO × OPERATION：写真を文章の高さに合わせ、下の空きをなくす */
.statement-grid{min-height:0;align-items:stretch}
.statement-copy{padding:56px 48px 56px 0}
.statement-photo{min-height:0;height:auto;overflow:hidden}
.statement-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
@media (max-width:860px){
  .statement-copy{padding:48px 0 20px}
  .statement-photo{height:min(78vw,420px)}
}

/* 3) 制作デモ */
.demo-section{padding:84px 0;background:linear-gradient(180deg,#070a10,#0a111b 50%,#070a10);border-block:1px solid #172536}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1120px;margin-inline:auto}
.demo-card{display:block;border:1px solid #3b4652;background:#0b121b;border-radius:10px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.demo-card:hover{transform:translateY(-4px);border-color:var(--gold-deep);box-shadow:0 22px 50px rgba(0,0,0,.45)}
.demo-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#05080d;border-bottom:1px solid #2a3949}
.demo-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.demo-card:hover .demo-shot img{transform:scale(1.025)}
.demo-shot .browser-chrome{position:absolute;left:0;right:0;top:0;z-index:2}
.demo-shot img{padding-top:38px}
.demo-tag{position:absolute;z-index:3;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;font:600 .7rem/1 var(--latin);letter-spacing:.14em;color:#090b10;background:linear-gradient(180deg,#e4c475,#b58b34)}
.demo-card.night .demo-tag{background:linear-gradient(180deg,#ff7ab0,#c2186b);color:#fff}
.demo-body{padding:22px 24px 24px}
.demo-body .work-type{margin-bottom:6px}
.demo-body h3{font:600 1.25rem/1.5 var(--serif);color:#e2c37a;margin-bottom:8px}
.demo-body p{font-size:.86rem;color:#a3adb8;margin-bottom:14px}
.demo-points{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.demo-points li{font-size:.72rem;color:#c9ced5;border:1px solid #33465a;border-radius:999px;padding:4px 10px}
.demo-link{display:inline-flex;align-items:center;gap:14px;font-weight:600;color:#edcf86;border-bottom:1px solid #8f6b2f;padding-bottom:3px}
.demo-card.night .demo-link{color:#ff8fbd;border-color:#c2186b}
.demo-note{max-width:1120px;margin:22px auto 0;text-align:center;font-size:.78rem;color:#7f8a97}
@media (max-width:860px){.demo-section{padding:64px 0}.demo-grid{grid-template-columns:1fr;max-width:620px}}
@media (max-width:560px){.demo-body{padding:18px}.demo-body h3{font-size:1.1rem}}

/* 4) 一番上のスマホ：大きさ・形は元のまま。画面の中をデモサイトの画面にし、下のボタンをデモサイトへのリンクにする */
.lnw-shot{flex:1 1 0;height:0;min-height:0;width:100%;object-fit:cover;object-position:top center}
.phone-screen .lnw-shot+.mock-button{margin-top:10px}
a.mock-button{display:block;color:#080b10;transition:filter .2s ease}
a.mock-button:hover{filter:brightness(1.1)}

/* 5) 一番上の文章ブロックを上に寄せる（スマホの高さに合わせて真ん中に下がらないように） */
@media (min-width:861px){
  .hero-grid{align-items:start}
  .hero-copy{padding-top:clamp(4px,1vh,12px)}
  .hero-devices{min-height:660px}   /* スマホ2台（元の大きさ）が下で切れないように */
}

/* 6) 店舗管理システム（NEXUS LUNIGHT）へのリンク */
.lnw-nexus-link{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(237,207,134,.6)}
.lnw-nexus-link:hover{color:#fff}
.lnw-nexus-btn{margin-top:18px}