main {
    background-image: url(../img/main_bk.png);
    overflow: hidden;
}

.logo-img { 
    width: 30vw;
}

.main-image {
    background-image: url(../img/car_sale_main.png);
    width: 100%;
    height: 1500px;
    background-size: cover;
    background-position: center bottom 20%;
}

/* .header クラスを .main-header に変更 */
.main-header {
    /* ... 既存のスタイル ... */
    position: relative;
    /* ★★★ 必須: SVGを絶対配置するための親要素の設定 ★★★ */
    overflow: hidden;
    height: fit-content;
    padding: 0;
    overflow: hidden;
}

.container {
    width: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    padding-top: 60px;
    height: fit-content;
    background-image: url(../img/used_car_bk.png);
    background-size: cover;
    margin-bottom: 20%;
}

.content-box p .br-sp {
    display: none;
}

/* 装飾イラスト共通 */
.decor {
    position: absolute;
    opacity: 0.7;
}

.guitar {
    width: 300px;
    left: 18%;
    top: 20%;
}

.flowers {
    z-index: 15;
    top: 10%;
    left: 50%;
    width: 300px;
}

.leaf {
    bottom: -30%;
    right: 20%;
    width: 250px;
    z-index: 5 !important;
}

.bird {
    z-index: 20;
    width: 200px;
    transform: translate(180%, -120%);
    opacity: 0.4;
}

.shop {
    opacity: 1 !important;
    top: 80%;
    width: 25%;
    z-index: 20;
    left: 30%;
    /* ★★★ 修正後のアニメーション適用 ★★★ */
    animation-name: sway-horizontal;
    animation-duration: 4s;
    /* 揺れをゆっくりにするため時間を長めに設定 */
    animation-timing-function: ease-in-out;
    /* 動きを滑らかにする */
    animation-iteration-count: infinite;
    /* 永遠に繰り返す */
    animation-direction: alternate;
    /* 往復運動にする（左右の揺れに最適） */
}


@keyframes sway-horizontal {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        /* わずかに右に移動し、わずかに右に傾ける */
        transform: translateX(5px) rotate(1deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}


/* 中央ボックス */
.content-box {
    background: #fff;
    border: 3px solid #2d2d2d;
    padding: 60px 10px;
    width: 500px;
    margin: 100px auto;
    left: 15%;
    text-align: center;
    box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
    position: relative;
    z-index: 10;
}


.subtitle {
    letter-spacing: 0.3rem;
    margin-bottom: 20px;
}

.line {
    width: 70%;
    height: 2px;
    background: #2db468;
    margin: 20px auto;
}

.description {
    text-align: center;
    font-size: 0.95rem;
    width: 80%;
}

.kosyo-hosyo {
position: relative; /* z-indexを効かせるために必要 */
    z-index: 1;
    display: block; /* inline-blockから変更して幅を安定させる */
    padding-top: 150px; /* .containerのpadding-bottomに合わせて調整 */
    padding-bottom: 150px;
}

.ansin_bn {
    width: 50%;
}

.kosyo-hosyo_img {
    width: 35%;
    margin-left: 30%;
}

.kosyo-hosyo_img:hover {
    /* 垂直方向に-5px（上に）移動させる */
    transform: translateY(-10px);
}

.title_logo {
    /* .title_logo が絶対配置でなくなったため、マージンが効くようになる */
    margin-bottom: 50px;
}

.carsensor_list .title_logo {
    margin-bottom: 50px;
}

.stock_list_carsensor {
    margin-bottom: 0;
    /* マージン相殺を防ぐため 0 にするか削除 */
    padding-bottom: 100px;
    /* ★下側の余白を padding で確保 */
    background: rgba(255, 255, 255, 8.1);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.81) 0%, rgba(255, 255, 255, 0.7) 100%);
}

.section-review {
    margin-top: 100px;
    background: #fff;
    border: 3px solid #2d2d2d;
    width: 100%;
    text-align: center;
    box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
    position: relative;
    z-index: 10;
    padding-bottom: 80px;
}

.section-review .title_logo {
    padding-bottom: 20px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 600px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.thankyou {
    /* 重ねる対象（thankyou）は man より奥にしたいので z-index を低くする */
    z-index: 1;
    transform: translate(20px, -100px);
}

.man {
    z-index: 2;
}

.man_sp {
    display: none;
}

.woman {
    z-index: 10;
    position: relative;
}

.woman_sp {
    display: none;
}

/* ★補足: 親要素の display: flex; はそのまま利用します */
.review_1,
.review2 {
    display: flex;
    justify-content: center;
    padding: 20px 50px;
    width: 80%;
    margin: 0 auto;
    /* 重ね合わせを正しく行うために、親要素に position: relative; は必要ありません (flexアイテムとして機能するため) */
}

.nice {
    z-index: 1;
    transform: translate(-25px, -20px);
}

.fade-in-target {
    opacity: 0;
    /* 最初は透明 */
    transform: translateY(20px);
    /* 画面の下から20pxの位置に待機 */
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* 変化を1秒かけて滑らかに行う */
}

/* 2. フェードイン後の状態 */
.fade-in-target.is-visible {
    opacity: 1;
    /* 不透明にして表示 */
    transform: translateY(0);
    /* 元の位置に戻る (フェードイン) */
}

.carsensor_btn {
    margin-top: 50px;
    /* 変化を滑らかにする設定 */
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;

    /* ボタンの初期の影を設定 (立体感を出すため) */
    box-shadow: 0 6px 0px #df8200;
    /* 下に影を設定 */
    border-radius: 15px;

    /* インライン要素なのでブロック化（またはインラインブロック化）してtransformを効きやすくする */
    display: inline-block;
}

/* 2. ホバー時のスタイル (押し込み) */
.carsensor_btn:hover {
    /* わずかに縮小 (98%に) して押し込まれたように見せる */
    transform: scale(0.98);

    /* 影を浅く/小さくし、ボタンが地面に近づいたように見せる */
    box-shadow: 0 3px 0px #4b2201;

    /* さらに押し込まれた感じを出すために、上にわずかに移動させる（任意） */
    transform: translateY(3px) scale(0.98);
}

.section-review p .br-sp {
    display: none;
}

/* --- 新車販売セクションのスタイル --- */

.new_car_section {
    position: relative;
    /* 子要素の絶対配置の基準 */
    width: 90%;
    max-width: 1200px;
    margin: 200px auto;
    padding: 50px 0;
    /* 確実にコンテンツを包含できるように、最低限の高さを設定 */
    min-height: 700px;
}

.new_car_section p .br-sp {
    display: none;
}

/* 中央のコンテンツボックス */
.newcar-content-box {
    background: #fff;
    padding: 60px 20px;
    width: 50%;
    margin-left: 5%;
    position: relative;
    z-index: 10;
    text-align: center;
    box-shadow: 4px 4px 0px 0px rgb(0, 0, 0);
    border: 2px solid #2d2d2d;
}

.new_car_section .title_logo {
    padding-bottom: 30px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
}



/* 右側の円形メーカーロゴエリア */
.logo_container {
    /* 円形を表現する領域 */
    width: 500px;
    height: 500px;
    border-radius: 50%;
    /* 完全な円形 */
    background: #fff;
    position: absolute;
    top: 45%;
    right: 5%;
    z-index: 15;
    box-shadow: 4px 4px 0px 0px rgb(0, 0, 0);
    border: 2px solid #2d2d2d;


    /* さらに効果を高めるには、左上角の値を大きくする */
    border-top-left-radius: 190px 150px;
    border-left: none;
    /* 左の線を完全に消す */
    border-top: none;
    /* 上の線を完全に消す */
}

.maker-logo-area {
    /* ロゴを内部で配置するためFlexboxを使用 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 450px;
    position: absolute;
    transform: translate(60px, 70px);
}

.maker-logo {
    width: 25%;
    /* ロゴのサイズを調整 */
    height: auto;
    margin: 5px;

}

/* 装飾イラスト (絶対配置) */
.decor {
    position: absolute;
    opacity: 0.8;
    z-index: 20;
}

.newcar-shell-top {
    width: 200px;
    top: -30px;
    right: 120px;
}

.payment_options {
    margin: 0 auto;
    margin-bottom: 50px;
}

.payment_container {
    background: #fff;
    padding: 60px 20px;
    width: 70%;
    position: relative;
    z-index: 10;
    text-align: center;
    box-shadow: 4px 4px 0px 0px rgb(0, 0, 0);
    border: 2px solid #2d2d2d;
    margin: 0 auto;
}

.payment_options .title_logo {
    padding-bottom: 40px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 700px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.option {
    margin: 0 auto;
    margin-bottom: 50px;
}

.option_title {
    padding: 0 35px;
    padding-bottom: 10px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.logos {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.rental_car {
    margin: 200px 0;
    margin-bottom: 400px;
}

.rental_car_textbox {
    background: #fff;
    padding: 70px 20px;
    width: 30%;
    position: relative;
    z-index: 10;
    text-align: center;
    box-shadow: 4px 4px 0px 0px rgb(0, 0, 0);
    border: 2px solid #2d2d2d;
    margin-left: 53%;
    z-index: 10;
}

.rental_car .title_logo {
    padding-bottom: 30px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 400px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.rental_car p .br-sp {
    display: none;
}

.sun_wave {
    position: absolute;
    z-index: 20;
    transform: translate(-90px, -100px);
}

.rentalcar_1 {
    position: absolute;
    transform: translate(-380px, -460px);
}

.rentalcar_2 {
    position: absolute;
    transform: translate(-320px, -230px);
    z-index: 20;
}

@media (min-width: 482px) and (max-width: 1024px) {
    .main-image {
        height: 600px;
    }

    .logo-area {
        top: 220px;
    }


    .container {
        background-size: auto;
    }

    .content-box {
        width: 460px;
        margin: 0 auto;
        left: 10%;
    }

    .guitar {
        width: 180px;
        left: 2%;
        top: 30%;
    }

    .flowers {
        width: 250px;
        top: 2%;
        left: 10%;
    }

    .shop {
        width: 40%;
        top: 90%;
        left: 10%;
    }

    .bird {
        width: 180px;
                transform: translate(150px, -120px);
                opacity: 0.4 !important;
    }

    .leaf {
        width: 180px;
        bottom: -25%;
        right: 3%;
    }

.ansin_bn{
    width: 70%;
}

    .kosyo-hosyo_img {
        width: 60%;
        margin: 0 auto;
    }

    .section-review {
        border: none;
        border-top: 2px solid #000000;
    }

    .section-review .title_logo {
        width: 400px;
    }

    .review_1 {
        flex-direction: column;
        padding: 0 0;
    }

    .thankyou {
        z-index: -1;
        transform: translate(-60px, -60px);
        width: 300px;
        position: absolute;
        opacity: 0.5;
    }

    .review_2 {
        display: flex;
        flex-direction: column;
        margin-top: 50px;
    }

    .woman {
        width: 80%;
    }

    .nice {
        z-index: -1;
transform: translate(160%, 0%);
        width: 350px;
        position: absolute;
        opacity: 0.5;
    }

    .new_car_section {
        margin-top: 100px;
        margin-bottom: 400px;
    }

    .newcar-shell-top {
        display: none;
    }

    .newcar-content-box {
        width: 500px;
    }

    .Customer_review p br {
        display: none;
    }

    .Customer_review p .br-sp {
        display: inline-block;
    }

    .newcar-content-box p br {
        display: none;
    }

    .newcar-content-box p .br-sp {
        display: inline-block;
    }

    .logo_container {
        width: 350px;
        height: 350px;
        border-radius: 50%;
        top: 90%;
        right: 15%;
    }

    .maker-logo-area {
        width: 300px;
        transform: translate(45px, 55px);
    }

    .payment_options .title_logo {
        width: 80%;
    }

    .payment_options .title_logo {
        width: 80%;
    }

    .rental_car_textbox {
        margin: 0 auto;
        width: 400px;
        padding: 30px 20px;
    }

    .rental_car_textbox p br {
        display: none;
    }

    .rental_car_textbox p .br-sp {
        display: inline-block;
    }

    .sun_wave {
        position: absolute;
        z-index: 20;
        transform: translate(-340px, -70px);
        width: 200px;
    }

    .rentalcar_1 {
        position: absolute;
        transform: translate(-360px, 30px);
        width: 350px;
    }

    .rentalcar_2 {
        position: absolute;
        transform: translate(-70px, 50px);
        z-index: 20;
        width: 450px;
    }
}

@media screen and (max-width: 481px) {
    .main-image {
        height: 400px;
    }

    .logo-area img {
        width: 200px;
    }

    .content-box {
        width: 330px;
        padding: 30px 10px;
        left: 0%;
        margin-bottom: 300px;
    }
    
    .container {
        /* fit-contentだけに頼らず、下の要素（shopなど）が収まる余白を作る */
        padding-bottom: 30px !important; 
        margin-bottom: 0; 
    }
    .content-box p {
        width: 100%;
        padding-bottom: 50px;
    }

    .content-box p br {
        display: none;
    }

    .content-box p .br-sp {
        display: inline-block;
    }

    .guitar {
        display: none;
    }

    .flowers {
        width: 200px;
        transform: translate(-10%, 1%);
    }

    .bird {
        opacity: 0.4;
        transform: translate(-20%, -229%);
    }

    .leaf {
        width: 200px;
top: auto;
        bottom: 160px; /* shopより少し上に配置するなど */
        right: 0;
        transform: none;
    }

    .shop {
        width: 300px;
top: auto;
        bottom: 40px;
        left: 10%;
        transform: translateX(-50%); /* 中央寄せ */

    }

    .kosyo-hosyo {
        padding-top: 50px;
        margin: 0 auto;
        width: 90%;
        padding-bottom: 50px;
    }

    .ansin_bn {
        width: 100%;
    }

    .kosyo-hosyo_img {
        width: 350px;
        margin-left: 0;
    }

    .stock_list_carsensor {
        margin-top: 80px;
    }

    .section-review {
        border: none;
        border-top: 3px solid #000000;
        margin: 0 auto;
        align-items: center;
    }

    .section-review .title_logo {
        width: 80%;
    }


    .man {
        display: none;
    }

    .woman {
        display: none;
    }

    .man_sp,
    .woman_sp {
        display: block;
        width: 85%;
    }

    .man_sp {
        margin: 0 auto;
        margin-top: -50%;
    }

    .woman_sp {
        margin: 0 auto;
    }



    .review_1,
    .review_2 {
        display: block;
        padding: 0 0;
        width: 100%;
    }

    .thankyou {
        opacity: 0.3;
        width: 150px;
        transform: translate(120px, -150px);
    }

    .nice {
        width: 150px;
        opacity: 0.3;
        transform: translate(-100px, -0px);
    }

    .Customer_review p br {
        display: none;
    }

    .Customer_review p .br-sp {
        display: inline-block;
    }

    .Customer_review p {
        width: 90%;
    }

    .newcar-shell-top {
        width: 150px;
        transform: translate(100px, -100px);
    }

    .logo_container {
        width: 350px;
        height: 350px;
        border-radius: 50%;
        top: 90%;
        right: 15%;
    }

    .maker-logo-area {
        width: 300px;
        transform: translate(45px, 55px);
    }

    .new_car_section .title_logo {
        width: 80%;
    }

    .newcar-content-box {
        width: 90%;
        margin-left: 0;
        padding: 30px 10px;
        padding-bottom: 40px
    }

    .newcar-content-box p {
        width: 100%;
    }

    .newcar-content-box p br {
        display: none;
    }

    .newcar-content-box p .br-sp {
        display: inline-block;
    }

    .logo_container {
        transform: translate(50px, 50px);
        margin-top: 20px;
        margin-bottom: 50px;
    }

    .new_car_section {
        margin-bottom: 450px;
    }

    .payment_options .title_logo {
        width: 100%;
    }

    .payment_options .title_logo img {
        width: 100%;
    }

    .payment_container {
        width: 80%;
    }

    .option_title {
        width: 50%;
    }

    .logos {
        flex-direction: column;
    }

    .rental_car_textbox {
        width: 80%;
        margin-left: 0;
        margin: 0 auto;
    }

    .rental_car .title_logo {
        width: 80%;
    }

    .rental_car p br {
        display: none;
    }

    .rental_car p .br-sp {
        display: inline-block;
    }

    .rental_car p {
        width: 90%;
    }

    .sun_wave {
        width: 150px;
        transform: translate(20%, -40%);
    }

    .rentalcar_1 {
        width: 80%;
        transform: translate(-150px, 60px);
    }

    .rentalcar_2 {
        width: 80%;
        transform: translate(-140px, -100px);
    }

}