body, html {
  margin: 0;
  padding: 0;
  height: 100%;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 300;
    position: relative;
}

.img-responsive {
    margin: 0 auto;
    width: 100%;
}

.main-bg {
  background: url('../images/background.png');
  background-size: cover;    
  background-position: center; 
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}


.content-container {
    margin: 0 auto;
    max-width: 800px;
    padding: 30px;
}

.key-visual {  
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 40px;
}

.main-cta {
   max-width: 300px;
   margin: 0 auto;
   padding: 20px 10px;
}

.copysheet {
   margin: 0 auto;
   max-width: 600px;
   padding: 0 30px;  
   text-align: center;
   font-size: 20px;
   font-weight: bold;
}



.double-cta {
    display: flex;
    flex-direction: column;  /* 手機：上下排列 */
    align-items: center;     /* ★ 讓每個 CTA 在 mobile 置中 */
    max-width: 800px;
    margin: 0 auto;
   
}

.double-cta .cta {
     width: 100%;
    max-width: 300px;        /* 手機 CTA 最大 300px */
    margin-bottom: 15px;
    text-align: center;
}


@media (min-width: 500px) {
    .double-cta {
       flex-direction: row;     /* 桌面：左右排列 */
        justify-content: center;
        align-items: center;
        gap: 20px;     
    }

    .double-cta .cta {
      margin-bottom: 0;
        width: auto;    
    }
}