/* css/top.css */

.top-container {
    padding: 0; /* TOPページは全幅を使うため、page-containerのpaddingをリセット */
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* 🔥 追加: paddingを含めて100%になるように */
    box-sizing: border-box;
}

/* ヒーローセクション */
.hero-section {
    width: 100%;
    padding: 80px 20px;
    text-align: center;
    background-color: var(--main-color); /* メインカラーを背景に */
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 🔥 追加: paddingを含めて100%になるように */
    box-sizing: border-box;
}

.hero-title {
    font-size: 2.5em;
    margin-bottom: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.hero-subtitle {
    font-size: 1.2em;
    /* 修正: サブタイトルの下の余白を増やし、ボタンとの空間を確保 */
    margin-bottom: 20px; 
    font-weight: 300;
}

.start-now-button {
    /* 修正: 上マージンを増やしてボタンの独立性を高める */
    margin-top: 50px; 
    max-width: 350px;
    font-size: 1.3em;
    padding: 15px;
    background-color: #ff9800; /* 目立つアクセントカラー */
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.start-now-button:hover {
    background-color: #e68900;
    transform: translateY(-2px);
}

/* 特徴セクション */
.feature-section {
    padding: 40px 20px; /* ← この行を修正 */
    max-width: 1000px;
    width: 100%;
    text-align: center;
    
    /* 🔥 修正: 確実に幅を100%に収める */
    box-sizing: border-box; 
    /* 🔥 修正: 左右のパディングを削除し、親の.top-container(body)のpaddingに任せる */
    padding: 40px 0; 
}

.feature-section h2 {
    color: var(--text-color);
    font-size: 2em;
    margin-bottom: 30px;
    position: relative;
}
.feature-section h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--main-color);
    margin: 10px auto 0;
}

.feature-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex: 1 1 300px; /* 3列レイアウトを意識 */
    min-height: 200px;
    text-align: left;
}

.card h3 {
    color: var(--main-color);
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 10px;
}

/* CTAセクション */
.cta-section {
    padding: 40px 20px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    box-sizing: border-box;
}
.cta-button {
    margin-top: 20px;
    background-color: #007bff;
    font-size: 1.1em;
    padding: 12px;
}
.cta-button:hover {
    background-color: #0056b3;
}

.skip-link {
    display: block;
    margin-top: 15px;
    color: var(--sub-text-color);
    font-size: 0.9em;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2em;
    }
    .card {
        flex: 1 1 100%;
    }
}

/* 🔥 追加: SP専用の強制改行を定義 */
.sp-only {
    display: none; /* デフォルト（デスクトップ）では非表示 */
}

@media (max-width: 600px) {
    .sp-only {
        display: block; /* 画面幅が600px以下になったら強制改行を表示 */
    }
    
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2em;
    }
    .card {
        flex: 1 1 100%;
    }
    /* .feature-sectionの修正はメインの定義で行うため削除 */
}