* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #6F61EF;
      --primary-dark: #5E4ED8;
      --secondary: #FFAC4B;
      --white: #FFFFFF;
      --gray-50: #FAFAFA;
      --gray-100: #F4F4F5;
      --gray-200: #E4E4E7;
      --gray-400: #A1A1AA;
      --gray-500: #71717A;
      --gray-600: #52525B;
      --gray-800: #27272A;
      --gray-900: #18181B;
    }

    body {
      font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--gray-900);
      line-height: 1.8;
      font-size: 16px;
      background: var(--white);
    }

    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* Header */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(16px);
      z-index: 100;
      padding: 12px 0;
    }

    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 700;
      font-size: 13px;
    }

    .logo-text {
      font-size: 16px;
      font-weight: 700;
    }

    .header-cta {
      background: var(--gray-900);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    /* Hero */
    .hero {
      padding: 120px 0 60px;
      text-align: center;
      /* 画面いっぱいに広げる */
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      width: 100vw;
    }

    .hero-catch {
      font-size: 32px;
      font-weight: 800;
      line-height: 1.5;
      margin-bottom: 20px;
      color: #fff;
    }

    .hero-catch .highlight {
      background: linear-gradient(transparent 60%, rgba(255, 200, 50, 0.5) 60%);
    }

    .hero-sub {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 32px;
    }

    .hero-phones {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 40px;
    }

/* Hero - 動画背景対応 */
.hero {
    position: relative;
    overflow: hidden;
}

/* 背景コンテナ */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 1;
    overflow: hidden;
    /* 画像背景 */
    background-image: url('https://www.train-with-you.com/product/wp-content/uploads/2026/01/splash.png');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

/* 動画要素は非表示（HTMLに残っていても影響なし） */
.hero-video {
    display: none;
}

/* オーバーレイ無効化 */
.hero-overlay {
    display: none;
}

/* 動画が読み込めない場合のフォールバック背景 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(135deg, #e8f4fc 0%, #f0f4ff 100%);
}

/* コンテンツにz-indexを付与して動画の上に表示 */
.hero .container {
    position: relative;
    z-index: 3;
}

.hero-catch {
    position: relative;
    z-index: 3;
}

.hero-sub {
    position: relative;
    z-index: 3;
}

.hero-phones {
    position: relative;
    z-index: 3;
}

.store-btns {
    position: relative;
    z-index: 3;
}

    .phone {
      background: var(--gray-900);
      border-radius: 28px;
      padding: 8px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .phone.main {
      transform: scale(1);
      z-index: 2;
    }

    .phone.side {
      transform: scale(0.9);
    }

    .phone-screen {
      width: 180px;
      height: 380px;
      background: var(--gray-100);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--gray-400);
      text-align: center;
    }

    .phone-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* 画像がある場合のphone-screen調整 */
    .phone-screen:has(img) {
      padding: 0;
      display: block;
    }

    .store-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }

    .store-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--gray-900);
      color: white;
      padding: 12px 20px;
      border-radius: 12px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
    }

    .store-btn.coming-soon {
      background: var(--gray-400);
      cursor: default;
      height: 44px;
    }

    .app-store-badge {
      height: 44px;
      display: block;
    }

    /* Pain Section */
    .pain-section {
      padding: 80px 0;
      background: var(--gray-50);
    }

    .pain-title {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
    }

    .pain-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 600px;
      margin: 0 auto;
    }

    .pain-item {
      background: white;
      padding: 20px 24px;
      border-radius: 16px;
      font-size: 15px;
      color: var(--gray-600);
      position: relative;
      padding-left: 48px;
    }

    .pain-item::before {
      content: "×";
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #EF4444;
      font-weight: 700;
      font-size: 18px;
    }

    /* Solution Section */
    .solution-section {
      padding: 80px 0;
    }

    .solution-intro {
      text-align: center;
      margin-bottom: 60px;
    }

    .solution-intro h2 {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 12px;
    }

    .solution-intro p {
      color: var(--gray-500);
      font-size: 15px;
    }

    .solution-block {
      display: flex;
      align-items: center;
      gap: 48px;
      margin-bottom: 80px;
      position: relative;
    }

    .solution-block:nth-child(even) {
      flex-direction: row-reverse;
    }

    .solution-block:last-child {
      margin-bottom: 0;
    }

    /* 猫のワンポイント画像 */
    .solution-block::after {
      content: '';
      position: absolute;
      width: 120px;
      height: 120px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.9;
      pointer-events: none;
    }

    /* 1番目: リード猫 - 左下 */
    .solution-block:nth-of-type(2)::after {
      background-image: url('https://www.train-with-you.com/product/wp-content/uploads/2026/01/maru_ugoku.png');
      left: 0;
      bottom: -20px;
    }

    /* 2番目: ゴロン猫 - 右下 */
    .solution-block:nth-of-type(3)::after {
      background-image: url('https://www.train-with-you.com/product/wp-content/uploads/2026/01/maru.png');
      right: 0;
      bottom: -20px;
    }

    /* 3番目: 寝てる猫 - 左下 */
    .solution-block:nth-of-type(4)::after {
      background-image: url('https://www.train-with-you.com/product/wp-content/uploads/2026/01/ryoma_neru.png');
      left: 0;
      bottom: -20px;
    }

    /* 4番目: 箱猫 - 右下 */
    .solution-block:nth-of-type(5)::after {
      background-image: url('https://www.train-with-you.com/product/wp-content/uploads/2026/01/ryoma.png');
      right: 0;
      bottom: -20px;
      width: 140px;
      height: 140px;
    }

    .solution-visual {
      flex-shrink: 0;
    }

    .solution-phone {
      width: 220px;
    }

    .solution-phone .phone {
      width: 100%;
    }

    .solution-phone .phone-screen {
      width: 100%;
      height: 465px;
    }

    .solution-content h3 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .solution-content p {
      color: var(--gray-600);
      font-size: 15px;
      line-height: 1.9;
    }

    .solution-content .point {
      display: inline-block;
      background: rgba(111, 97, 239, 0.1);
      color: var(--primary);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    /* Features */
    .features-section {
      padding: 80px 0;
      background: var(--gray-900);
      color: white;
    }

    .features-title {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 40px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .feature-item {
      background: rgba(255, 255, 255, 0.08);
      padding: 20px;
      border-radius: 16px;
    }

    .feature-image {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      margin-bottom: 16px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--gray-500);
    }

    .feature-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-item h4 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .feature-item p {
      font-size: 13px;
      color: var(--gray-400);
    }

    /* Pricing */
    .pricing-section {
      padding: 80px 0;
    }

    .pricing-title {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 12px;
    }

    .pricing-sub {
      text-align: center;
      color: var(--gray-500);
      font-size: 15px;
      margin-bottom: 40px;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      max-width: 640px;
      margin: 0 auto;
    }

    .pricing-card {
      background: white;
      border: 2px solid var(--gray-200);
      border-radius: 20px;
      padding: 28px 24px;
      text-align: center;
    }

    .pricing-card.pro {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    .pricing-card .plan-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .pricing-card.pro .plan-name {
      opacity: 0.9;
    }

    .pricing-card .price {
      font-size: 36px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .pricing-card .price-note {
      font-size: 13px;
      color: var(--gray-500);
      margin-bottom: 20px;
    }

    .pricing-card.pro .price-note {
      color: rgba(255, 255, 255, 0.8);
    }

    .pricing-card .features {
      text-align: left;
      font-size: 13px;
      line-height: 2;
      color: var(--gray-600);
    }

    .pricing-card.pro .features {
      color: rgba(255, 255, 255, 0.9);
    }

    .pricing-card .trial-badge {
      display: inline-block;
      background: var(--secondary);
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    /* CTA */
    .cta-section {
      padding: 80px 0;
      background: var(--gray-50);
      text-align: center;
    }

    .cta-section h2 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.6;
      color: #000000;
    }

    .cta-section p {
      color: #000000;
      margin-bottom: 32px;
    }

    /* Footer */
    .footer {
      padding: 32px 0;
      border-top: 1px solid var(--gray-200);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--gray-500);
    }

    .footer-links {
      display: flex;
      gap: 20px;
    }

    .footer-links a {
      color: var(--gray-500);
      text-decoration: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-catch {
        font-size: 24px;
        padding-top: 64px;
      }

      .hero-phones {
        gap: 8px;
      }

      .phone-screen {
        width: 140px;
        height: 296px;
      }

      .phone.side {
        display: none;
      }

      .solution-block {
        flex-direction: column !important;
        gap: 32px;
      }

      /* モバイルでは猫をブロック下部中央に */
      .solution-block::after {
        width: 70px;
        height: 70px;
        position: relative;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 20px auto 0;
        display: block;
      }

      .solution-block:nth-of-type(4)::after {
        width: 90px;
        height: 90px;
      }

      .solution-phone {
        width: 200px;
      }

      .solution-phone .phone-screen {
        height: 423px;
      }

      .features-grid {
        grid-template-columns: 1fr;
      }

      .pricing-cards {
        grid-template-columns: 1fr;
      }

      .store-btns {
        flex-direction: column;
        align-items: center;
      }

      .footer-inner {
        flex-direction: column;
        gap: 16px;
      }

      .header-cta {
        display: none;
      }
    }