/* LP（new.npopv.com）の見た目。旧サイト（TCD drop_tcd087）の公開ページから寸法と色を読み取って合わせた
   色：ヘッダー #1364ef／ボタン #114cb2／組の面 青 #1995e8・水色 #7fffd4／組の文字 紺 #191970／コピーライト #222 */
:root { --hdr: #1364ef; --btn: #114cb2; --blue: #1995e8; --aqua: #7fffd4; --navy: #191970; }
* { box-sizing: border-box; }
body { margin: 0; color: #000; font-family: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; font-size: 16px; line-height: 2.4; background: #fff; -webkit-font-smoothing: antialiased; }
a { color: var(--btn); }
img { max-width: 100%; height: auto; }
p { margin: 0; }

/* ヘッダー：青い帯を上に固定し、サイト名を白で出す */
.lp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 70px; background: var(--hdr); }
.lp-header nav { height: 100%; padding: 0 30px; display: flex; align-items: center; }
.lp-header nav a { color: #fff; text-decoration: none; }
.lp-logo { font-size: 32px; line-height: 1; font-weight: 500; }
.lp-logo:hover { opacity: .5; }

/* 固定ページ（お問い合わせなど） */
.lp-main { max-width: 850px; margin: 0 auto; padding: 180px 20px 150px; line-height: 2.4; }
.lp-main h1 { font-size: 34px; line-height: 1.5; font-weight: 600; text-align: center; margin: 0 0 40px; }

/* ヒーロー：画面いっぱいの写真を切り替える */
.lp-hero { position: relative; height: 100vh; overflow: hidden; background: #000; }
.lp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: lp-fade calc(var(--n) * 6s) infinite; animation-delay: calc(var(--i) * 6s); }
.lp-hero img:first-child { opacity: 1; }
@keyframes lp-fade { 0% { opacity: 0; transform: scale(1.06); } 5% { opacity: 1; } 33% { opacity: 1; } 38% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }

/* セクション：幅850pxの列に、中央寄せの見出し34px・本文16px */
.lp-sec { padding: 110px 0 118px; }
.lp-sec--endcard { padding-bottom: 0; }
.lp-inner { width: 850px; max-width: calc(100% - 40px); margin: 0 auto; }
.lp-head h2 { font-size: 34px; line-height: 1.5; font-weight: 600; text-align: center; margin: 0; }
.lp-flow { margin-top: 50px; text-align: center; }
.lp-flow:has(+ .lp-card) { margin-bottom: 118px; }
.lp-flow ul { text-align: left; }

/* リンクだけの段落 → ボタン */
.lp-flow p:has(> a:only-child) { margin: 52px 0 0; }
.lp-flow p > a:only-child { display: inline-block; min-width: 300px; max-width: 100%; height: 60px; line-height: 60px; padding: 0 20px; border-radius: 60px; background: var(--btn); color: #fff; font-weight: 600; text-decoration: none; transition: opacity .3s; }
.lp-flow p > a:only-child:hover { opacity: .8; }

/* スライダー：1枚ずつ横に送る */
.lp-carousel { position: relative; margin-top: 45px; }
.lp-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lp-carousel__track::-webkit-scrollbar { display: none; }
.lp-carousel__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 850 / 450; object-fit: cover; scroll-snap-align: start; display: block; }
.lp-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 34px; line-height: 1; cursor: pointer; color: #000; padding: 8px; }
.lp-carousel__prev { left: -45px; }
.lp-carousel__next { right: -45px; }

/* 画像と色付きの面の1組：幅いっぱい・高さ600px・半分ずつ */
.lp-card { display: flex; min-height: 600px; }
.lp-card--imgright { flex-direction: row-reverse; }
.lp-card__img, .lp-card__text { width: 50%; position: relative; }
.lp-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lp-card__text { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.lp-card__inner { width: 370px; max-width: calc(100% - 40px); }
.lp-card--blue .lp-card__text { background: var(--blue); color: #fff; }
.lp-card--aqua .lp-card__text { background: var(--aqua); color: var(--navy); }
.lp-card h3 { font-size: 22px; line-height: 1.7; font-weight: 600; margin: 0 0 20px; }
.lp-card a { color: inherit; }

/* 円グラフ（ドーナツ型）：直径290px・中央に見出し・下に凡例 */
.lp-charts { display: flex; gap: 50px; margin: 10px 0 52px; }
.lp-chart { flex: 1 1 0; margin: 0; }
.lp-donut { position: relative; width: 290px; height: 290px; margin: 0 auto; border-radius: 50%; }
.lp-donut::before { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: #fff; }
.lp-donut__title { position: absolute; left: 25%; right: 25%; top: 50%; transform: translateY(-50%); text-align: center; font-size: 14px; line-height: 1.4; }
.lp-donut__val { position: absolute; transform: translate(-50%, -50%); font-size: 12px; line-height: 1; white-space: nowrap; }
.lp-chart__legend { text-align: center; margin: 35px 0 0; line-height: 1.4; }
.lp-chart__item { display: inline-flex; align-items: center; font-size: 14px; margin: 5px 6px; }
.lp-chart__color { width: 14px; height: 14px; margin-right: 4px; display: inline-block; }
.lp-sec:has(.lp-charts) { padding-bottom: 60px; }
.lp-sec:has(.lp-charts) .lp-flow { margin-top: 60px; }

/* よくある質問：押すと開く */
.lp-faq { margin-top: 50px; }
.lp-faq__item + .lp-faq__item { margin-top: -1px; }
.lp-faq__q { list-style: none; cursor: pointer; font-weight: 500; font-size: 16px; line-height: 1.8; padding: 23px 55px 19px 30px; border: 1px solid #ddd; position: relative; background: #fff; }
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q::before { content: ""; position: absolute; right: 22px; top: 36px; width: 13px; height: 1px; background: #000; }
.lp-faq__q::after { content: ""; position: absolute; right: 28px; top: 30px; width: 1px; height: 13px; background: #000; }
.lp-faq__item[open] .lp-faq__q::after { display: none; }
.lp-faq__a { border: 1px solid #ddd; border-top: none; padding: 48px 55px 50px; background: #fafafa; }
.lp-faq__a ul { margin: 0; padding-left: 1.4em; }

/* 表（円グラフにならなかったもの） */
.lp-sec table, .lp-main table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.lp-sec table { --color-surface: #f2f2f2; }
.lp-sec th, .lp-sec td, .lp-main th, .lp-main td { border: 1px solid #ddd; padding: 10px 8px; }

/* フッター */
.lp-footer__space { height: 100px; }
.lp-footer__copy { background: #222; color: #fff; text-align: center; font-size: 12px; line-height: 60px; margin: 0; }
.lp-totop { position: fixed; right: 0; bottom: 0; z-index: 99; width: 60px; height: 60px; line-height: 60px; text-align: center; background: var(--btn); color: #fff; text-decoration: none; font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .lp-hero img { animation: none; } }

/* スマホ（旧テーマの切り替え幅 750px） */
@media (max-width: 750px) {
  .lp-header { height: 60px; }
  .lp-header nav { padding: 0 20px; }
  .lp-logo { font-size: 18px; }
  .lp-sec { padding: 60px 0 70px; }
  .lp-head h2 { font-size: 22px; }
  .lp-flow { margin-top: 30px; text-align: left; }
  .lp-flow p:has(> a:only-child) { text-align: center; margin-top: 30px; }
  .lp-flow p > a:only-child { min-width: 240px; height: 50px; line-height: 50px; font-size: 14px; }
  .lp-flow:has(+ .lp-card) { margin-bottom: 70px; }
  .lp-carousel__arrow { display: none; }
  .lp-card, .lp-card--imgright { flex-direction: column; min-height: 0; }
  .lp-card__img, .lp-card__text { width: 100%; }
  .lp-card__img { aspect-ratio: 4 / 3; }
  .lp-card__text { padding: 40px 0; }
  .lp-card h3 { font-size: 18px; }
  .lp-charts { flex-direction: column; gap: 40px; }
  .lp-donut { width: 260px; height: 260px; }
  .lp-faq { margin-top: 20px; }
  .lp-faq__q { font-size: 14px; padding: 15px 45px 15px 15px; }
  .lp-faq__q::before { top: 28px; }
  .lp-faq__q::after { top: 22px; }
  .lp-faq__a { padding: 15px 20px; line-height: 2; }
  .lp-main { padding: 120px 20px 80px; }
  .lp-totop { width: 50px; height: 50px; line-height: 50px; }
}