@charset "UTF-8";

.main {
    background-color: #ffffff !important;
}

.title {
    height: 310px;
    background-image: url(../images/Ree/image2.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 1px 1px 10px #4b2c14;
}

.title h1 {
    font-family: 'montserrat', sans-serif;
    font-size: 32px;
    font-weight: bold;
}

.title p {
    font-size: 14px;
    margin-top: 15px;
}

/* ★全体の枠：最大横幅を 1060px に広げ、左右の余白を小さくしました */
.feature {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* 動画とテキストの間の隙間を40pxに固定 */
    width: 100%;
    max-width: 1100px;
    height: 430px;
    overflow: hidden;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.feature img {
    width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* ★テキストのブロック：最大幅を 660px に広げました */
.feature-text {
    width: 100%;
    max-width: 660px;
    /* 560px から 660px に変更 */
    margin-right: 0;
    display: block;
}

.feature-video {
    width: 400px;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.feature-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reverse {
    flex-direction: row-reverse;
}

.reverse .feature-text {
    margin-left: 0;
    margin-right: 0;
}

.feature-text h2 {
    font-size: 22px;
    font-weight: bolder;
    line-height: 30px;
}

.feature-text h2::after {
    content: '';
    display: block;
    width: 35px;
    height: 3px;
    background-color: #000000;
    margin-top: 20px;
}

.feature-text p {
    font-size: 17px;
    line-height: 28px;
    margin-top: 25px;
}

.feature+.feature {
    margin-top: 0;
}

.footer {
    background-color: #fcfaf2;
    margin-top: 80px;
}

.policy-text {
    width: 100%;
    max-width: 900px;
    margin: 40px auto 0 auto;
    text-align: left;
}


@media (max-width: 800px) {

    .feature {
        display: flex;
        flex-direction: column;
        /* 縦並びに変更 */
        align-items: center;
        /* 中の要素をすべて横方向で中央に揃える */
        text-align: center;
        /* テキストも中央寄せに */
        width: 100%;
        /* 500pxから100%に変更して画面幅にフィット */
        max-width: 100%;
        height: auto;
        /* 高さを自動調整に */
        margin-top: 45px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
        /* 左右に画面端の安全な余白を作る */
        box-sizing: border-box;
    }

    /* 2. 画像：サイズをスマホ向けにちょうどいい大きさに調整し、中央に配置します */
    .feature img {
        width: 100%;
        max-width: 320px;
        /* 大きくなりすぎないよう上限を指定 */
        height: auto;
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 8px;
        /* ほんのり角を丸くして上品に */
    }

    /* 3. 動画の枠：こちらも100%にして、スマホ画面から浮かないようにします */
    .movie {
        width: 100%;
        /* 500pxから100%に変更 */
        max-width: 400px;
        /* 動画が大きくなりすぎないように制限 */
        padding: 20px 0;
        /* 左右の固定パディングを無くし、スッキリさせます */
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* 4. YouTubeなどの動画本体（iframe）：横幅を枠いっぱいに広げる */
    .movie iframe {
        width: 100%;
        height: 240px;
        display: block;
    }

    /* 5. テキスト部分：左右の余白（margin）をリセットして中央に収める */
    .feature-text {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .reverse .feature-text {
        margin-left: 0;
        margin-right: 0;
    }

    main.main .Policy,
    main.main .Policy .policy-text {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        /* 画面の端に文字がくっつくのを防ぐ */
        margin-top: 40px;
        box-sizing: border-box;
    }

    /* 2. 本文テキスト：文字サイズをスマホ向けに落とし、行間をゆったり広げる */
    main.main .Policy p,
    main.main .Policy .policy-text p {
        font-size: 14px;
        /* 文字を少し小さくして1行に収まる量を増やします */
        line-height: 1.8;
        /* 行間をゆったり（通常の1.8倍）空けて読みやすく */
        text-align: left;
        /* 長文の注意書きは左寄せの方が圧倒的にスムーズに読めます */
        letter-spacing: 0.05em;
        /* 文字同士の横の隙間をわずかに広げて上品に */
    }

    /* 3. 箇条書き（・や＊）の各項目ごとの間に、少しだけ上下の隙間を作りる */
    main.main .Policy br,
    main.main .Policy .policy-text br {
        display: block;
        content: "";
        margin-top: 10px;
        /* 改行が入ったときに少しだけ隙間を開ける */
    }



}