/* --------------------------------------------------

   🖥 PC（1024px〜）

-------------------------------------------------- */

@media screen and (min-width: 1024px) {

  article { width: 950px; margin: 0 auto 50px; color: #444444; }



  #hero { 

    width: 100%;

    margin-top: 30px;

    margin-bottom:50px;

  }

  .hero-content {

    width: 100%;

    height: 440px;

    background-image: url("/static/img/ai_platform/hero-visual-AI-pc.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0; /* PC版はパディング不要 */

  }

 

  .hero-content h1 { font-size: 2.5rem; margin-bottom: 20px; margin-left: 80px; color: #ffffff; }

  .hero-content .hero-copy { font-size: 1.5rem; line-height: 1.6; margin-bottom: 12px; margin-left: 80px; color: #ffffff;}

  .hero-content .hero-sub { font-size: 1.25rem; line-height: 1.7; margin-left: 80px; color: #ffffff;}



  h2{font-size: 1.75rem;}

  .feature-list { list-style: none; margin: 30px auto 70px; padding: 0; }

  .feature-item { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }

  .feature-item img { width: 66px; height: 66px; object-fit: contain; margin: 0; flex-shrink: 0; }

  .feature-text h3 { font-size: 1.5rem; margin: 0; }

  .feature-text p { font-size: 1.25rem; margin: 0; }



  #security{margin-bottom: 75px;}

  #security-intro { font-size: 1.5rem; }

  #security .security-list { max-width: 950px; margin: 30px auto; list-style: none; padding-left: 0; }

  #security .security-list li { margin-bottom: 0.2rem; font-size: 1.25rem; }



  #pricing-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }

  #pricing .pricing-card h4 { font-size: 1.5rem; margin-bottom: 8px; color: #111827; }

  #pricing h3 { font-size: 1.5rem; margin: 30px 0 24px; }

  #cost-in { font-size: 1.5rem; font-weight: bold; margin: 0; color: #111827; }

  #initial-cost-desc { font-size: 1.13rem; line-height: 1.6; margin: 6px 0 50px; }

  #pricing { margin: 0 auto 70px; }

  #pricing .pricing-card { background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); padding: 25px 18px; position: relative; }

  #pricing .pricing-price { font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; color: #111827; }

  .ex-tax { font-size: 1.25rem; }

  #pricing .pricing-features { list-style: none; padding: 0; margin: 0; }

  #pricing .pricing-features li { font-size: 1.13rem; line-height: 1.6; color: #374151; margin-bottom: 6px; }

  #pricing .pricing-card-recommended { border-color: #2563eb; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18); }

  #pricing .pricing-badge { position: absolute; top: 12px; right: 16px; background-color: #2563eb; color: #ffffff; font-size: 0.8rem; padding: 4px 8px; border-radius: 999px; }

  #pricing-note { margin: 30px 0 20px; }

  #contact p { font-size: 1.5rem; margin-bottom: 20px; }

}



/* --------------------------------------------------

   📱 モバイル・タブレット共通（〜1023px）ベース

-------------------------------------------------- */

@media screen and (max-width: 1023px) {

  article { width: 95%; margin: 0 auto 50px; color: #444444; }



  #hero { 

    width: 100%; 

    text-align: center; 

    margin-left: calc(50% - 50vw);

    margin-right: calc(50% - 50vw);

  }



  .hero-content {

    width: 100vw;

    height: auto;

    background-image: url("/static/img/ai_platform/hero-visual-AI-mobile.png"); 

    background-size: cover;

    background-position: center bottom;

    background-repeat: no-repeat;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

  }



  /* テキスト共通設定 */

  .hero-content h1 { font-size: 2.5rem; margin-bottom: 15px; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

  .hero-content .hero-copy { font-size: 1.5rem; line-height: 1.5; margin-bottom: 10px; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }

  .hero-content .hero-sub { font-size: 1.25rem; line-height: 1.5; color: #ffffff; }



  /* 下部コンテンツ共通設定 */

  .feature-list { list-style: none; margin: 30px auto 50px; padding: 0; }

  .feature-item { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }

  .feature-item img { width: 66px; height: 66px; object-fit: contain; margin: 0; flex-shrink: 0; }

  .feature-text h3 { font-size: 1.13rem; margin: 0; }

  .feature-text p { font-size: 1rem; margin: 0; }

  #security{margin-bottom: 50px;}

  #security-intro { font-size: 1.13rem; }

  .security-list { margin: 30px auto; list-style: none; padding-left: 0; }

  .security-list li { margin-bottom: 0.8rem; }

  #pricing-list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 18px; margin-top: 30px; }

  #pricing .pricing-card h4 { font-size: 1.25rem; margin: 0 auto 8px; color: #111827; }

  #pricing h3 { font-size: 1.25rem; margin: 30px 0 24px; }

  #cost-in { font-size: 1.25rem; font-weight: bold; margin: 0; color: #111827; }

  #initial-cost-desc { line-height: 1.6; margin: 6px 0 50px; }

  #pricing { margin: 0 auto 50px; }

  #pricing .pricing-card { background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); padding: 25px 18px; position: relative; }

  #pricing .pricing-price { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; color: #111827; }

  .ex-tax { font-size: 1rem; }

  #pricing .pricing-features { list-style: none; padding: 0; margin: 0; }

  #pricing .pricing-features li { font-size: 1.13rem; line-height: 1.6; color: #374151; margin-bottom: 6px; }

  #pricing .pricing-card-recommended { border-color: #2563eb; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18); }

  #pricing .pricing-badge { position: absolute; top: 12px; right: 16px; background-color: #2563eb; color: #ffffff; font-size: 0.8rem; padding: 4px 8px; border-radius: 999px; }

  #pricing-note { margin: 30px 0 20px; }

  #contact p { font-size: 1.25rem; margin-bottom: 20px; }

}



/* --------------------------------------------------

   📏 タブレット大（701px〜1023px）の余白調整

-------------------------------------------------- */

@media screen and (min-width: 701px) and (max-width: 1023px) {

  #hero { 

    margin-top: 30px;

    margin-bottom:40px;

  }

  .hero-content {

    min-height: 450px;

    padding: 60px 30px 40px;

  }

  /* 文字の視認性を確保 */

  .hero-content h1, .hero-content .hero-copy, .hero-content .hero-sub {

    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.5);

  }

}



/* --------------------------------------------------

   📏 タブレット小（461px〜700px）の余白調整

-------------------------------------------------- */

@media screen and (min-width: 461px) and (max-width: 700px) {

  #hero { 

    margin-top: 20px;

    margin-bottom:30px;

  }

  .hero-content {

    min-height: 450px; /* 高さを450pxに抑制 */

    padding: 50px 25px 30px;

  }

  .hero-content h1 { font-size: 2.25rem; }

  .hero-content .hero-copy { font-size: 1.5rem; }

  .hero-content .hero-sub { font-size: 1.25rem; }

  /* 文字の視認性を確保 */

  .hero-content h1, .hero-content .hero-copy, .hero-content .hero-sub {

    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.5);

  }

}



/* --------------------------------------------------

   📱 スマホ専用（〜460px）の余白調整

-------------------------------------------------- */

@media screen and (max-width: 460px) {

  article { width: 100%; }

  #hero { 

    margin-top: 20px;

    margin-bottom:30px;

  }

  .hero-content {

    min-height: 450px;

    padding: 40px 20px 20px; 

    justify-content: center;

  }

  .hero-content h1 { font-size: 2rem; margin-bottom: 10px; }

  .hero-content .hero-copy { font-size: 1.25rem; margin-bottom: 8px; }

  .hero-content .hero-sub { font-size: 1.13rem; }

  /* 全ての文字に強力なシャドウを適用 */

  .hero-content h1, .hero-content .hero-copy, .hero-content .hero-sub {

    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.5);

  }

}