.page-download { max-width: 100%; overflow-x: hidden; color: #333333; background-color: #F5F7FA; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .page-download__hero-section { padding-top: 10px; } .page-download__hero-image-wrapper { width: 100%; display: flex; justify-content: center; padding: 0 10px; box-sizing: border-box; } .page-download__hero-image { width: 100%; max-width: 1200px; height: auto; max-height: auto; aspect-ratio: 16/6; object-fit: cover; display: block; border-radius: 20px; box-shadow: 0 8px 20px rgba(229,57,53,0.25); } .page-download__hero-content { margin: -30px auto 0; max-width: 800px; padding: 0 20px 30px; position: relative; text-align: center; background: transparent; } .page-download__main-title { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: #E53935; background: linear-gradient(180deg, #FF5A4F 0%, #E53935 100%); -webkit-background-clip: text; background-clip: text; color: #E53935; margin-bottom: 12px; max-width: 1100px; margin-left: auto; margin-right: auto; } .page-download__hero-description { font-size: 1.0rem; line-height: 1.6; color: #444444; max-width: 800px; margin: 0 auto 25px; text-align: center; padding: 0 16px; } .page-download__hero-cta-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 0 16px; } .page-download__btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.5; padding: 14px 32px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; text-align: center; min-width: 180px; box-sizing: border-box; box-shadow: 0 6px 15px rgba(0,0,0,0.15); } .page-download__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .page-download__btn--primary { background: linear-gradient(180deg, #FF5A4F 0%, #E53935 100%); color: #ffffff !important; } .page-download__btn--secondary { background: #ffffff; color: #E53935 !important; border: 2px solid #E53935; } .page-download__intro-section, .page-download__security-section, .page-download__warning-section { padding: 45px 20px; } .page-download__intro-inner, .page-download__security-inner, .page-download__warning-inner, .page-download__faq-inner, .page-download__guide-inner, .page-download__app-highlight-inner { max-width: 1150px; margin: 0 auto; } .page-download__section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; font-weight: 800; color: #E53935; text-align: center; margin-bottom: 30px; letter-spacing: -0.02em; } .page-download__intro-text, .page-download__security-text, .page-download__warning-text, .page-download__guide-intro, .page-download__faq-question, .page-download__faq-answer { font-size: 1.05rem; line-height: 1.7; color: #444444; text-align: justify; margin-bottom: 15px; } .page-download__app-highlight-section { padding: 20px 20px 45px; background: rgba(255,255,255,0.6); } .page-download__feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .page-download__feature-item, .page-download__guide-step { background: #FFFFFF; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #E0E0E0; box-shadow: 0 3px 10px rgba(0,0,0,0.06); transition: transform .3s ease; } .page-download__feature-item:hover { transform: translateY(-5px); } .page-download__feature-item { padding-bottom: 15px; } .page-download__feature-image, .page-download__guide-image { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: opacity 0.3s ease; display: block; border-bottom: 1px solid #E0E0E0; } .page-download__feature-item:hover .page-download__feature-image, .page-download__guide-step:hover .page-download__guide-image { opacity: 0.9; } .page-download__feature-title, .page-download__guide-title { font-size: 1.3rem; font-weight: 700; color: #E53935; margin: 20px 0 10px; padding-left: 15px; padding-right: 15px; text-align: left; } .page-download__guide-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin-bottom: 10px; } .page-download__feature-desc, .page-download__guide-desc { font-size: 0.95rem; line-height: 1.6; color: #555555; padding: 0 15px; margin: 0 0 15px; } .page-download__guide-section { padding: 40px 20px 30px; } .page-download__guide-title { text-align: center; margin-bottom: 20px; } .page-download__guide-intro { max-width: 800px; margin: 0 auto 40px; font-size: 1.1rem; text-align: center; color: #555; } .page-download__guide-steps { display: flex; flex-direction: column; gap: 25px; max-width: 1000px; margin: 0 auto 40px; } .page-download__guide-step { flex-direction: column; padding: 0 0 25px; } .page-download__guide-step-title { font-size: 1.2rem; font-weight: 700; color: #E53935; margin: 20px 15px 10px; } .page-download__guide-cta { text-align: center; margin-top: 30px; } .page-download__security-section { background: #ffffff; } .page-download__warning-section { background: #fff5f5; } .page-download__faq-section { padding: 30px 20px 20px; } .page-download__faq-item { background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px; margin-bottom: 12px; padding: 0; overflow: hidden; } .page-download__faq-question { list-style: none; font-weight: 600; font-size: 1.05rem; padding: 20px 45px 20px 20px; cursor: pointer; color: #333333; position: relative; display: block; } .page-download__faq-question::-webkit-details-marker { display: none; } .page-download__faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: #E53935; font-weight: 400; } details[open] .page-download__faq-question::after { content: '−'; } .page-download__faq-answer { padding: 0 20px 20px; margin: 0; font-size: 1rem; } .page-download__warning-title { margin: 0 0 20px; font-size: 1.6rem; font-weight: 700; color: #E53935; text-align: center; } .page-download__warning-text { text-align: center; font-size: 0.95rem; max-width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .page-download__hero-section { padding-top: 0; } .page-download__hero-content { margin-top: -10px; } .page-download__main-title { margin-top: 20px; } .page-download__hero-cta-group { flex-direction: column; } .page-download__btn { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; word-wrap: break-word; } .page-download__hero-image-wrapper, .page-download__hero-content, .page-download__intro-section, .page-download__security-section, .page-download__warning-section, .page-download__faq-section, .page-download__guide-section, .page-download__app-highlight-section { padding-left: 10px; padding-right: 10px; } .page-download__app-highlight-section { padding-top: 20px; } .page-download__image-grid, .page-download__feature-grid { gap: 15px; } .page-download img { max-width: 100% !important; height: auto !important; } .page-download { overflow-x: hidden; } .page-download__guide-step, .page-download__app-highlight-section { border-radius: 8px; } .page-download__feature-item, .page-download__guide-step { padding: 0; } .page-download__guide-content { padding: 0; } .page-download__feature-title, .page-download__feature-desc, .page-download__guide-step-title, .page-download__guide-desc { padding-left: 10px; padding-right: 10px; } .page-download__hero-image { max-height: 170px; aspect-ratio: 16/9; } .page-download__section-title { font-size: 1.3rem; } .page-download__intro-text, .page-download__guide-intro, .page-download__hero-description { font-size: 1rem; line-height: 1.6; } .page-download__btn--secondary { border: 2px solid #E53935; } img { max-width: 100%; height: auto; } } @media (min-width: 600px) and (max-width: 900px) { .page-download__hero-content { margin-top: -20px; } .page-download__hero-cta-group { gap: 15px; } .page-download__btn { min-width: 160px; } }