/* Main Content Styles */
/* Section-specific border colors - customize these as needed */
.heroSection .sectionTitle::after {
    background: var(--hero-border-color, var(--section-title-border-color));
}

.problemsSection .sectionTitle::after {
    background: var(--problems-border-color, var(--section-title2-border-color));
}

.serviceSection .sectionTitle::after {
    background: var(--service-border-color, var(--section-title-border-color));
}

.reasonSection .sectionTitle::after {
    background: var(--reason-border-color, var(--section-title-border-color));
}

.flowSection .sectionTitle::after {
    background: var(--flow-border-color, var(--section-title-border-color));
}

.faqSection .sectionTitle::after {
    background: var(--faq-border-color, var(--section-title-border-color));
}

.contactSection .sectionTitle::after {
    background: var(--contact-border-color, var(--section-title-border-color));
}

body {
    padding-top: 80px;
}

/* Hero Section */
.heroSection {
    /* 背景画像を設定し、グラデーションから画像背景に変更 */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../images/09.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .heroContainer {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;

        .heroContent {
            .heroTitle {
                font-size: 3.5rem;
                font-weight: bold;
                line-height: 1.2;
                margin-bottom: 1.5rem;
                /* テキストを白色に変更して画像背景でも読みやすくする */
                color: white;
                text-shadow: 2px 2px 6px rgba(0, 102, 204, 0.8);

                .highlight {
                    /* ハイライト部分も白色に変更し、より強い影を追加 */
                    color: yellow;
                    text-shadow: 2px 2px 6px rgba(0, 102, 204, 0.8);
                    display: block;
                    margin-top: 0.5rem;
                }
            }

            .heroSubtitle {
                font-size: 1.2rem;
                /* サブタイトルも白色に変更して可読性を向上 */
                color: white;
                text-shadow: 4px 4px 12px rgba(0, 102, 204, 0.8);
                margin-bottom: 2.5rem;
                line-height: 1.6;
                /* 四角い枠を追加 */

                padding: 1.5rem 2rem;
                border-radius: 20px;
                background: rgba(0, 102, 204, 0.4);
                backdrop-filter: blur(5px);
                display: inline-block;
            }

            .heroCta {
                display: flex;
                gap: 1.5rem;
                flex-wrap: wrap;
            }
        }

        .heroImage {
            text-align: center;

            figure {
                position: relative;
                display: inline-block;

                img {
                    border-radius: 20px;
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                    transition: transform 0.3s ease;

                    &:hover {
                        transform: translateY(-10px);
                    }
                }
            }
        }
    }

    .portalLogos {
        margin-top: 4rem;
        text-align: center;

        .logoSlider {
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 1rem;
            background: white;
            padding: 1rem 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

            .logoItem {
                display: inline-block;
                padding: 0 3rem;
                font-size: 1.5rem;
                font-weight: bold;
                color: #0066CC;
                animation: slide 20s infinite linear;
            }
        }

        .portalText {
            font-size: 2.5rem;
            font-weight: bold;
            /* ポータルテキストも白色に変更し、影を追加 */
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            margin-top: 2rem;
        }
    }
}

@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Problems Section */
.problemsSection {
    padding: 6rem 0;
    background: #FFF8F0;

    .problemsGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;

        .problemCard {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.1);
            border: 2px solid #FFE5E5;
            transition: all 0.3s ease;
            position: relative;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px rgba(255, 107, 107, 0.15);
                border-color: #FF6B6B;
            }

            &::before {
                content: '!';
                position: absolute;
                top: -10px;
                right: -10px;
                width: 30px;
                height: 30px;
                background: #FF6B6B;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 1.2rem;
            }

            .problemIcon {
                margin-bottom: 2rem;
                width: 100%;
                height: 120px;
                overflow: hidden;

                figure {
                    width: 100%;
                    height: 100%;
                    margin: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        border-radius: 15px;
                        border: none;
                        filter: none;
                    }
                }
            }

            p {
                color: #555;
                line-height: 1.6;
                font-size: 1rem;
                font-weight: 500;
            }
        }
    }
}

/* Service Section */
.serviceSection {
    padding: 6rem 0;
    background: white;

    .comparisonTable {
        .propertyPrice {
            text-align: center;
            margin-bottom: 3rem;

            h3 {
                font-size: 1.5rem;
                color: white;
                padding: 1rem 2rem;
                background: #0066CC;
                border-radius: 20px;
                display: inline-block;
            }
        }

        .comparisonGrid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;

            .comparisonCard {
                background: white;
                border-radius: 20px;
                padding: 2rem;
                text-align: center;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;
                position: relative;

                &:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
                }

                &.general {
                    border: 2px solid #FF6B6B;

                    .price {
                        color: #FF6B6B;
                        font-size: 2rem;
                        font-weight: bold;
                        margin: 1rem 0;
                    }
                }

                &.partner {
                    border: 2px solid #0066CC;

                    .price {
                        color: #0066CC;
                        font-size: 1.2rem;
                        font-weight: bold;
                        margin: 1rem 0;

                        &.discount {
                            background: linear-gradient(135deg, #0066CC, #004AAD);
                            color: white;
                            padding: 0.5rem 1rem;
                            border-radius: 25px;
                            display: inline-block;
                        }
                    }

                    .finalPrice {
                        font-size: 1.8rem;
                        font-weight: bold;
                        color: #0066CC;
                        margin-top: 1rem;
                    }
                }

                h4 {
                    font-size: 1.1rem;
                    margin-bottom: 1rem;
                    color: #333;
                }

                p {
                    font-size: 0.9rem;
                    color: #666;
                }
            }
        }
    }
}

/* Reason Section */
.reasonSection {
    padding: 6rem 0;
    background: #F8F9FA;

    .reasonGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 3rem;

        .reasonCard {
            background: white;
            border-radius: 20px;
            padding: 0 0 2rem 0; /* 上部パディングを削除して画像を上端に配置 */
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            overflow: hidden; /* 画像が角丸からはみ出さないように */

            &:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            }

            .reasonIcon {
                margin-bottom: 0; /* 下部マージンを削除 */
                width: 100%; /* 画像コンテナを全幅に */
                height: 200px; /* 固定高さを設定 */
                overflow: hidden; /* 画像がはみ出さないように */

                figure {
                    width: 100%; /* figure要素を全幅に */
                    height: 100%; /* figure要素を全高に */
                    margin-top: 10px;

                    img {
                        width: 100%; /* 画像を全幅に */
                        height: 100%; /* 画像を全高に */
                        object-fit: cover; /* 画像のアスペクト比を保ちながらコンテナにフィット */
                        border-radius: 0; /* 丸枠を削除 */
                        border: none; /* ボーダーを削除 */
                    }
                }
            }

            h3 {
                font-size: 1.5rem;
                margin: 1.5rem 0 1rem 0; /* 上部マージンを追加してテキストと画像の間隔を調整 */
                color: #333;
                padding: 0 2rem; /* 左右にパディングを追加 */
            }

            p {
                color: #666;
                line-height: 1.6;
                padding: 0 2rem; /* 左右にパディングを追加してテキストを中央寄せ */
            }
        }
    }
}

/* Flow Section */
.flowSection {
    padding: 6rem 0;
    background: white;

    .flowSteps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;

        .flowStep {
            flex: 1;
            min-width: 250px;
            max-width: 300px;
            text-align: center;

            .stepNumber {
                width: 80px;
                height: 80px;
                background: linear-gradient(135deg, #0066CC, #004AAD);
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
                font-weight: bold;
                margin: 0 auto 1.5rem;
                box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3);
            }

            .stepContent {
                h3 {
                    font-size: 1.3rem;
                    margin-bottom: 1rem;
                    color: #333;
                }

                p {
                    color: #666;
                    line-height: 1.6;
                }
            }
        }

        .flowArrow {
            font-size: 2rem;
            color: #0066CC;
            font-weight: bold;
        }
    }
}

/* FAQ Section */
.faqSection {
    padding: 6rem 0;
    background: #F8F9FA;

    .faqList {
        max-width: 800px;
        margin: 0 auto;

        .faqItem {
            background: white;
            border-radius: 15px;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;

            .faqQuestion {
                padding: 2rem;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 0.3s ease;

                &:hover {
                    background: #F8F9FA;
                }

                h3 {
                    font-size: 1.1rem;
                    color: #333;
                    margin: 0;
                }

                .faqToggle {
                    font-size: 1.5rem;
                    color: #0066CC;
                    font-weight: bold;
                    transition: transform 0.3s ease;
                }
            }

            .faqAnswer {
                padding: 0 2rem 2rem;
                display: none;

                p {
                    color: #666;
                    line-height: 1.6;
                }
            }

            &.active {
                .faqQuestion .faqToggle {
                    transform: rotate(45deg);
                }

                .faqAnswer {
                    display: block;
                }
            }
        }
    }
}

/* Contact Section */
.contactSection {
    padding: 6rem 0;
    background: white;

    .contactForm {
        max-width: 600px;
        margin: 0 auto;

        form {
            .formGroup {
                margin-bottom: 2rem;

                label {
                    display: block;
                    font-weight: bold;
                    margin-bottom: 0.5rem;
                    color: #333;

                    .required {
                        color: #FF6B6B;
                        margin-left: 0.25rem;
                    }
                }

                input, textarea, select {
                    width: 100%;
                    padding: 1rem;
                    border: 2px solid #E1E5E9;
                    border-radius: 10px;
                    font-size: 16px;
                    transition: all 0.3s ease;

                    &:focus {
                        outline: none;
                        border-color: #0066CC;
                        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
                    }
                }

                textarea {
                    resize: vertical;
                    min-height: 120px;
                }
            }

            .contactExplanation {
                background: #F8F9FA;
                border: 1px solid #E1E5E9;
                border-radius: 10px;
                padding: 1.5rem;
                margin-bottom: 2rem;

              h1{
                color: #333;
                margin-bottom: 10px;
              }

                p {
                    color: #555;
                    line-height: 1.6;
                    margin: 0;
                    font-size: 0.95rem;
                }
            }

            .formSubmit {
                text-align: center;
                margin-top: 3rem;

                .primaryButton {
                    font-size: 1.1rem;
                    padding: 1rem 3rem;
                }
            }
        }
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .heroSection {
        padding: 2rem 0;
        min-height: auto;

        .heroContainer {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: center;

            .heroContent {
                .heroTitle {
                    font-size: 2.2rem;
                }

                .heroSubtitle {
                    font-size: 1rem;
                }

                .heroCta {
                    justify-content: center;
                }
            }
        }

        .portalLogos {
            margin-top: 2rem;

            .logoSlider {
                .logoItem {
                    padding: 0 2rem;
                    font-size: 1.2rem;
                }
            }
                  .portalText {
            font-size: 2rem;
            font-weight: bold;
            /* ポータルテキストも白色に変更し、影を追加 */
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            margin-top: 2rem;
            margin-left: 20px;
            margin-right: 20px;
                    
        }
        }
    }

  .problemsSection {
    padding: 3rem 0;
    background: #FFF8F0;

    .problemsGrid {
        display: grid;
        grid-template-columns: 2fr;
        grid-template-rows: 2fr;
        gap: 2rem;
        max-width: 800px;
        margin: 0 auto;

        .problemCard {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.1);
            border: 2px solid #FFE5E5;
            transition: all 0.3s ease;
            position: relative;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 35px rgba(255, 107, 107, 0.15);
                border-color: #FF6B6B;
            }

            &::before {
                content: '!';
                position: absolute;
                top: -10px;
                right: -10px;
                width: 30px;
                height: 30px;
                background: #FF6B6B;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 1.2rem;
            }

            .problemIcon {
                margin-bottom: 2rem;
                width: 100%;
                height: 120px;
                overflow: hidden;

                figure {
                    width: 100%;
                    height: 100%;
                    margin: 0;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        border-radius: 15px;
                        border: none;
                        filter: none;
                    }
                }
            }

            p {
                color: #555;
                line-height: 1.6;
                font-size: 1rem;
                font-weight: 500;
            }
        }
    }
}

  .serviceSection {
    background: white;

    .comparisonTable {
        .propertyPrice {
            text-align: center;
            margin-bottom: 3rem;

            h3 {
                font-size: 1.3rem;
                color: white;
                padding: 1rem 3rem;
                background: #0066CC;
                border-radius: 20px;
                display: inline-block;
            }
        }
    }
  }

    .serviceSection, .reasonSection, .flowSection, .faqSection, .contactSection {
        padding: 4rem 0;
    }

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

    .reasonGrid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .problemsGrid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .flowSteps {
        flex-direction: column;

        .flowArrow {
            transform: rotate(90deg);
        }
    }

    .faqQuestion {
        padding: 1.5rem !important;
    }

    .faqAnswer {
        padding: 0 1.5rem 1.5rem !important;
    }
}