/* myproject/static/css/pages/lp.css */

    :root{
      --brand: #5b21b6;
      --brand-light: #8b5cf6;
      --gold: #d4af37;
      --gold-light: #fef3c7;
      --ink: #0f172a;
      --muted: #64748b;
      --light-bg: #f8fafc;
      --shadow: 0 10px 30px rgba(0,0,0,0.08);
      --shadow-hover: 0 20px 40px rgba(0,0,0,0.12);
      --radius: 16px;
      --maxw: 1200px;
      --narrow: 920px;
      --section-gap: 100px;
      --transition: all 0.3s ease;
    }
    *{box-sizing:border-box; margin:0; padding:0}
    html,body{font-family: 'Noto Sans JP', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); line-height:1.7; background:#fff; scroll-behavior: smooth;}
    a{color:inherit; text-decoration:none; transition: var(--transition);}
    h1, h2, h3, h4, h5 {font-weight: 700; line-height: 1.3;}
    .serif {font-family: 'Playfair Display', serif;}

    /* ====== ヘッダー ====== */
    header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(255, 255, 255, 0.95);
      border-bottom:1px solid rgba(229, 231, 235, 0.8);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: var(--transition);
    }
    .nav{
      max-width:var(--maxw);
      height:80px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 28px;
    }
    .brand{
      font-weight:800;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .brand::before {
      content: "";
      display: inline-block;
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, var(--brand), var(--brand-light));
      border-radius: 6px;
    }
    .nav-links {
      display: flex;
      gap: 4px;
    }
    .nav a{
      padding:10px 16px;
      border-radius:10px;
      font-weight: 500;
      font-size: 0.95rem;
    }
    .nav a:hover{
      background:var(--light-bg);
      color: var(--brand);
    }
    .nav-cta {
      background: var(--brand);
      color: white !important;
      padding: 10px 20px;
    }
    .nav-cta:hover {
      background: var(--brand-light) !important;
      transform: translateY(-2px);
    }

    /* ====== 共通レイアウト ====== */
    .container{
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 28px;
    }
    section{
      padding:var(--section-gap) 0;
      position: relative;
    }
    .section-title {
      font-size: 2.8rem;
      margin: 0 0 16px;
      position: relative;
    }
    .section-title::after {
      content: "";
      position: absolute;
      bottom: -12px;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--gold));
      border-radius: 2px;
    }
    .section-sub{
      color:var(--muted);
      margin: 28px 0 40px;
      font-size: 1.1rem;
      max-width: 700px;
    }

    /* ====== ボタン ====== */
    .btn{
      display:inline-flex;
      align-items: center;
      gap: 8px;
      padding:16px 32px;
      border-radius:12px;
      font-weight:700;
      border:0;
      cursor:pointer;
      box-shadow:var(--shadow);
      transition:var(--transition);
      font-size: 1rem;
    }
    .btn:hover{
      transform:translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
    .btn.primary{
      background: var(--gold);
      color:#111;
    }
    .btn.primary:hover {
      background: #fbbf24;
    }
    .btn.secondary{
      background: var(--brand);
      color: white;
    }
    .btn.secondary:hover {
      background: var(--brand-light);
    }
    .btn.outline{
      background:transparent;
      color:var(--brand);
      border:2px solid var(--brand);
    }
    .btn.outline:hover {
      background: var(--brand);
      color: white;
    }
    .btn.ghost{
      background:transparent;
      color:#fff;
      border:2px solid rgba(255,255,255,0.5);
    }
    .btn.ghost:hover{
      background:rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.8);
    }
    .btn.dark{
      background:#0f172a;
      color:#fff;
    }
    .btn i {
      font-size: 1.1rem;
    }
    .mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
    .mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-40{margin-bottom:40px}

    /* ====== ヒーロー ====== */
    .hero{
      position:relative;
      color:#fff;
      text-align:center;
      overflow: hidden;
      min-height: 60vh; /* 高さを画面の60%に制限 */
      display: flex;
      align-items: center;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      /*
      background:
        linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.52)),
        url('{% static "L000_lp/images/LP01/top.jpg" %}') center/cover no-repeat;
      */
    }
    /* ヒーローセクションの高さを調整 - 縦長すぎないように */
    .hero-inner{
      position:relative;
      padding: 80px 0; /* 上下の余白を減らして高さを調整 */
      max-width: 1000px;
      margin:0 auto;
      width: 100%;
    }
    .kicker{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:10px 20px;
      border-radius:100px;
      background:rgba(255,255,255,0.15);
      color:#fff;
      border:1px solid rgba(255,255,255,0.2);
      font-weight:700;
      backdrop-filter:blur(10px);
      margin-bottom: 24px;
    }
    .hero h1{
      font-size:3.5rem;
      margin:16px 0 24px;
      text-shadow:0 2px 12px rgba(0,0,0,.6);
      line-height: 1.2;
    }
    .hero p{
      max-width:780px;
      margin:0 auto 32px;
      color:rgba(255,255,255,0.9);
      font-size: 1.2rem;
      text-shadow:0 2px 6px rgba(0,0,0,.4);
    }
    .cta{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      justify-content: center;
    }

    /* ====== カード/グリッド ====== */
    .grid{display:grid; gap:28px;}
    .card{
      background:#fff;
      border:1px solid rgba(229,231,235,0.8);
      border-radius:var(--radius);
      padding:32px;
      box-shadow:var(--shadow);
      transition:var(--transition);
      height: 100%;
    }
    .card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-hover);
    }
    .card h3 {
      font-size: 1.4rem;
      margin-bottom: 16px;
      color: var(--brand);
    }

    /* 主な機能：PC=3カラム */
    .features-grid{grid-template-columns:repeat(3,1fr)}
    @media (max-width:1000px){ .features-grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:680px){ .features-grid{grid-template-columns:1fr} }

    /* 導入フロー：常に縦並び */
    .flow-vertical .card{
      margin-bottom:20px;
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }
    .flow-vertical .card::before {
      content: "";
      display: block;
      min-width: 40px;
      height: 40px;
      background: var(--light-bg);
      border-radius: 50%;
      border: 2px solid var(--brand);
      position: relative;
    }
    .flow-vertical .card:nth-child(1)::before { content: "1"; }
    .flow-vertical .card:nth-child(2)::before { content: "2"; }
    .flow-vertical .card:nth-child(3)::before { content: "3"; }
    .flow-vertical .card::before {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: var(--brand);
    }

    /* 課題→解決（縦に読み進める） */
    .problem-solution{
      max-width:var(--narrow);
      margin:0 auto;
      background: var(--light-bg);
      padding: 48px;
      border-radius: var(--radius);
    }
    .problem,.solution{
      margin:24px 0;
      padding-left: 28px;
      position: relative;
    }
    .problem::before {
      content: "❌";
      position: absolute;
      left: 0;
      top: 0;
      font-size: 1.2rem;
    }
    .solution::before {
      content: "✅";
      position: absolute;
      left: 0;
      top: 0;
      font-size: 1.2rem;
    }
    .problem h3, .solution h3 {
      margin-bottom: 8px;
    }
    .divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
      margin:28px 0;
    }

    /* バンドCTA */
    .band{
      background:linear-gradient(90deg, var(--brand), var(--brand-light));
      color:#fff;
      padding: 60px 0;
    }
    .band .wrap{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .band p {
      font-size: 1.4rem;
      font-weight: 700;
      margin: 0;
      max-width: 600px;
    }

    /* 縦並びカードは横幅を狭めて中央に */
    .stacked-cards{
      max-width:var(--narrow);
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr;
      gap:24px;
    }
    .stacked-cards .card{
      width:100%;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
    .stacked-cards .card::before {
      content: "✓";
      display: block;
      background: var(--gold-light);
      color: var(--gold);
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
    }

    /* 導入店舗の声：縦並び＆課題ベース */
    .voice-vertical{
      max-width:var(--narrow);
      margin:0 auto;
      display:flex;
      flex-direction:column;
      gap:24px;
    }
    .ba{
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:20px;
      box-shadow:var(--shadow);
      padding:28px;
      position: relative;
    }
    .ba::before {
      content: "“";
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 4rem;
      color: var(--light-bg);
      font-family: 'Playfair Display', serif;
    }
    .pill{
      display:inline-block;
      font-size:12px;
      font-weight:800;
      border-radius:999px;
      padding:6px 14px;
      margin-right:8px;
    }
    .pill.before{background:#fee2e2; color:#991b1b}
    .pill.after{background:#dcfce7; color:#065f46}

    /* 動画セクション */
    .video-wrap{
      position:relative;
      width:100%;
      padding-top:56.25%;
      border-radius:20px;
      overflow:hidden;
      box-shadow:var(--shadow-hover);
    }
    .video-wrap iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    /* FAQ */
    #faq {
      padding-bottom: calc(var(--section-gap) + 28px);
    }
    .faq-list{
      max-width:var(--narrow);
      margin:0 auto;
      display:grid;
      gap:16px;
    }
    details{
      border:1px solid #e5e7eb;
      border-radius:16px;
      padding:20px 24px;
      background:#fff;
      transition: var(--transition);
    }
    details:hover {
      border-color: var(--brand-light);
    }
    details[open] {
      box-shadow: var(--shadow);
      border-color: var(--brand);
    }
    summary{
      cursor:pointer;
      font-weight:700;
      font-size: 1.1rem;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    summary::-webkit-details-marker {
      display: none;
    }
    summary::after {
      content: "+";
      font-size: 1.5rem;
      color: var(--brand);
      transition: var(--transition);
    }
    details[open] summary::after {
      content: "-";
    }
    details p {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #f1f5f9;
    }

    /* 料金プラン */
    .pricing-grid {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 28px;
    }
    .pricing-card {
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .pricing-card.featured::before {
      content: "人気";
      position: absolute;
      top: 20px;
      right: -34px;
      background: var(--gold);
      color: #111;
      padding: 4px 40px;
      font-size: 0.9rem;
      font-weight: 700;
      transform: rotate(45deg);
    }
    .pricing-card h3 {
      font-size: 1.5rem;
      margin-bottom: 16px;
    }
    .price {
      font-size: 3rem;
      font-weight: 800;
      margin: 16px 0;
      color: var(--brand);
    }
    .price span {
      font-size: 1rem;
      color: var(--muted);
      font-weight: 500;
    }
    .pricing-features {
      list-style: none;
      text-align: left;
      margin: 24px 0;
    }
    .pricing-features li {
      margin-bottom: 12px;
      padding-left: 28px;
      position: relative;
    }
    .pricing-features li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--brand);
      font-weight: bold;
    }

    /* 共通の特徴セクション */
    .features-common {
      max-width: var(--narrow);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }
    .feature-card {
      text-align: center;
      padding: 32px 24px;
      background: var(--light-bg);
      border-radius: var(--radius);
      transition: var(--transition);
    }
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }
    .feature-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--brand), var(--brand-light));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      color: white;
    }
    .feature-card h3 {
      font-size: 1.4rem;
      margin-bottom: 16px;
      color: var(--brand);
    }

    /* フッター */
    footer{
      padding:80px 0 40px;
      background:#0b1220;
      color:#cbd5e1;
    }
    footer a{
      color:#fff;
      text-decoration:underline;
    }
    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }
    .footer-brand {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .footer-brand::before {
      content: "";
      display: inline-block;
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, var(--brand), var(--brand-light));
      border-radius: 6px;
    }
    .footer-links h4 {
      color: white;
      margin-bottom: 20px;
      font-size: 1.2rem;
    }
    .footer-links ul {
      list-style: none;
    }
    .footer-links li {
      margin-bottom: 12px;
    }
    .footer-links a {
      text-decoration: none;
      opacity: 0.8;
      transition: var(--transition);
    }
    .footer-links a:hover {
      opacity: 1;
      color: var(--gold);
    }

    /* モバイル固定CTA */
    .sticky-cta{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:60;
      display:none;
      background:#ffffffee;
      backdrop-filter:blur(12px);
      border-top:1px solid #e5e7eb;
      padding: 12px 0;
    }
    .sticky-cta .inner{
      max-width:var(--maxw);
      margin:0 auto;
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:center;
      padding:0 20px;
    }
    .sticky-cta .btn {
      padding: 12px 20px;
      flex: 1;
      justify-content: center;
    }

    /* レスポンシブ調整 */
    @media (max-width:900px){
      .sticky-cta{display:flex}
      .hero h1{font-size:2.5rem}
      .section-title {font-size: 2.2rem;}
      .band .wrap {
        flex-direction: column;
        text-align: center;
      }
      .nav-links {
        display: none;
      }
      .hero {
        min-height: 50vh; /* モバイルではさらに高さを縮小 */
      }
      .hero-inner {
        padding: 60px 0; /* モバイルでも余白を調整 */
      }
    }
    @media (max-width:680px){
      .hero h1{font-size:2rem}
      .hero p {
        font-size: 1rem;
        margin-bottom: 24px;
      }
      .section-title {font-size: 1.8rem;}
      .cta {
        flex-direction: column;
        align-items: center;
      }
      .cta .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
      }
      .features-common {
        grid-template-columns: 1fr;
      }
      .hero {
        min-height: 45vh; /* 小型モバイルではさらに高さを調整 */
      }
    }