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

.logo-img { 
    width: 25vw;
}

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

.wave-divider {
    /* 絶対配置で親要素の底に固定 */
    position: absolute;
    bottom: 0;

    /* 画面幅全体を使う */
    width: 100%;

    /* 画面中央に配置し、自身の幅の半分だけ左に戻す */
    left: 50%;
    transform: translateX(-50%);

    z-index: 10;
}

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


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

.damd_text_container {
    display: inline-flex;
    align-items: center;

}

.damd_text_container p .br-sp {
    display: none;

}

.description {
    font-size: 18px;
    line-height: 3.0rem;
}

.nomado_1 {
    position: absolute;
    transform: translate(-590px, -30px);
}

.nomado_2 {
    position: absolute;
    width: 400px;
    transform: translate(150px, -100px);
    transition: transform 0.3s ease;
    /* 0.3秒かけて滑らかに変化 */
}

/* マウスオーバー時の動作を定義 */
.DAMD_dealer:hover .nomado_2 {
    /* スケールを少し大きくし、Z軸方向もわずかに手前に出す */
    transform: translate(150px, -100px) scale(1.05);
}

/* DAMD_btn の基本的なスタイル */
.DAMD_btn img {
    /* imgタグにスタイルを適用する場合 */
    cursor: pointer;
    /* マウスカーソルをポインターに変更 */
    /* トランジションで変化を滑らかにする */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    /* 立体感のための影（初期状態） */
    box-shadow: 0 3px 0 0 #8b430f;
    /* ボタンの下に影（濃い茶色など） */
    border-radius: 20px;
}

/* 押し込まれた状態 (マウスダウン/クリック時) */
.DAMD_btn img:active {
    /* 1. 縦方向に少し移動して「へこみ」を表現 */
    transform: translateY(5px);

    /* 2. 影を消す、または小さくすることで「へこんだ」印象を強める */
    box-shadow: 0 0 0 0 #582b0a;
}

.Body_repair {
    background-image: url(../img/repair_bk.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    padding-bottom: 30%;
}



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

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

.repair_flower {
    position: relative;
    z-index: 10 !important;
    transform: scaleX(-1);
    transform: translate(110px, 70px);
    width: 300px;

}

.Body_repair .title_logo {
    padding-bottom: 40px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 400px;
    margin: 0 auto;
    margin-bottom: 30px;
    z-index: 5;
}

.maintenance {
    background-image: url(../img/maintenance_bk.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    padding-bottom: 25%;
}

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

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

.maintenance_yashinoki {
    position: relative;
    z-index: 10 !important;
    transform: scaleX(-1);
    transform: translate(-60px, 280px);
    width: 180px;
}

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

.custom_parts {
    background-image: url(../img/custom_bk.png);
    width: 100%;
    height: 100%;
    background-size: cover;
    padding-bottom: 30%;
}

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

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

.custom_juice {
    position: relative;
    z-index: 10 !important;
    transform: scaleX(-1);
    transform: translate(50px, 100px);
    width: 250px;

}

.custom_parts .title_logo {
    padding-bottom: 40px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
    z-index: 5;
}

.coating {
    background-color: #fff;
    margin-top: 100px;
}

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

.coating .title_logo {
    padding-bottom: 40px;
    padding-top: 30px;
    border-bottom: #2db468 2px solid;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 50px;
    z-index: 5;
}

.coating_banner {
    width: 20%;
    margin: 0 auto;
    margin-top: 40px;
    padding-bottom: 150px;
}

.window_film {
padding:  100px 0;
padding-bottom: 30%;
position: relative;
margin-bottom: 15%;
}

.window_film_inner {
max-width: 1200px; /* コンテンツの最大幅 */
    margin: 0 auto;
    position: relative; /* 子要素の基準 */
    height: 600px; /* 高さを確保 */
}

.window_film_img img {
width: 100%;
    height: auto;
}

.window_film_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 70%; /* 画像のサイズ */
    z-index: 5;
}

.window_film_textbox {
    background: #fff;
    left: 60%;
    top: 90%;
    width: 450px;
    border: 3px solid #2d2d2d;
    box-shadow: 6px 6px 0px 0px rgb(0, 0, 0);
    position: absolute;
    z-index: 10 !important;
padding: 40px;
text-align: center;

}

.window_film_textbox p {
    margin: 0;
}

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

.film_yashinoki {
position: absolute;
    right: -60px;
    top: 180%;
    width: 200px;
    z-index: 15; /* 最前面 */
}

.window_film .title_logo {
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: #2db468 2px solid;
}

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

    .DAMD_dealer {
        width: 80%;
        margin: 50px auto;
        background-image: url(../img/right_side.png);
        background-color: rgba(255, 255, 255, 0.721);
        background-blend-mode: lighten;
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 100px;
    }

    .DAMD_dealer .title_logo {
        width: 80%;
        padding-top: 100px;

    }

    .nomado_1 {
        width: 300px;
        transform: translate(-390px, -60px);
    }

    .nomado_2 {
        width: 300px;
        transform: translate(100px, -20px);
    }

    .left_side {
        display: none;
    }

    .right_side {
        display: none;
    }

    .DAMD_dealer p br {
        display: none;
    }

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

    .DAMD_dealer p {
        padding-bottom: 50px;
    }

    .body_repair_textbox {
        width: 80%;
        margin: 50px auto;
    }

    .body_repair_textbox .title_logo {
        width: 80%;
    }

    .body_repair_textbox p br {
        display: none;
    }

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

    .repair_flower {
        transform: translate(200px, 160px);
    }

    .maintenance_textbox {
        width: 80%;
        margin: 50px auto;
    }

    .maintenance_textbox p br {
        display: none;
    }

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

    .maintenance_yashinoki {
        transform: translate(-200px, 260px);
        width: 150px;
    }

    .custom_textbox {
        width: 80%;
        margin: 0 auto;
    }

    .custom_juice {
        width: 200px;
        transform: translate(260px, 100px);
    }

    .custom_parts .title_logo {
        width: 80%;
    }

    .custom_parts p br {
        display: none;
    }

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

    .coating_banner{
        width: 50%;
    }

    .window_film {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 350px;

    }

    .window_film_textbox {
        width: 80%;
        transform: translate(-300px, -180px);
        padding-bottom: 50px;
        padding-top: 20px;
    }

    .window_film .title_logo {
        width: 80%;
        margin: 0 auto;
        padding-top: 30px;
    }

    .film_yashinoki {
margin-top: -40%;
        width: 200px;
    }
}

@media screen and (max-width: 481px) {
    .logo-area img {
        width: 80%;
    }

    .DAMD_dealer {
        width: 80%;
        margin: 0 auto;
        margin-top: 100px;
        padding-top: 20px;
        margin-bottom: 80px;
        background-image: url(../img/right_side.png);
        background-color: rgba(255, 255, 255, 0.818);
        background-blend-mode: lighten;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .DAMD_dealer .title_logo img {
        width: 85%;
    }

    .DAMD_dealer .title_logo {
        width: 80%;
    }

    .left_side {
        display: none;
    }

    .right_side {
        display: none;
    }

    .DAMD_dealer p {
        width: 80%;
        margin: 0 auto;
        font-size: 15px;
    }

    .DAMD_dealer p br {
        display: none;
    }

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

    .DAMD_dealer p.description {
        width: 100%;
        padding-bottom: 30px;
         line-height: 2.5;
    }

    .DAMD_btn img {
        width: 80%;
    }

    .nomado_1 {

        width: 200px;
        transform: translate(-200px, -90px);
    }

    .nomado_2 {
        width: 250px;
        transform: translate(-40px, 0px);
    }

.Body_repair {
    padding-bottom: 300px;
}

    .body_repair_textbox {
        width: 80%;
        margin: 0 auto;
        padding-bottom: 50px;
    }

    .Body_repair .title_logo {
        width: 80%;
    }

    .Body_repair .title_logo img {
        width: 85%;
    }

    .repair_flower {
        width: 200px;
    }

    .Body_repair p {
        width: 80%;
        margin: 0 auto;
        font-size: 15px;
    }

    .Body_repair p br {
        display: none;
    }

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

    .Body_repair p.description {
        width: 100%;
        padding-bottom: 30px;
                 line-height: 2.5;
    }

.maintenance{
    padding-bottom: 400px;
}
    
    .maintenance_textbox {
        width: 80%;
        margin: auto;
        padding: 0px 10px;
        padding-bottom: 50px;
    }

    .maintenance_textbox .title_logo {
        width: 80%;
    }

    .maintenance_textbox .title_logo img {
        width: 85%;
    }

    .maintenance_yashinoki {
        width: 130px;
        transform: translate(120px, 740px);
    }

    .maintenance_textbox p {
        width: 80%;
        margin: 0 auto;
        font-size: 15px;
    }

    .maintenance_textbox p br {
        display: none;
    }

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

    .maintenance_textbox p.description {
        width: 100%;
        padding-bottom: 30px;
                 line-height: 2.5;
    }

 .custom_textbox {
        width: 80%;
        margin: auto;
        padding: 0px 10px;
        padding-bottom: 50px;
    }

  .custom_textbox .title_logo {
        width: 80%;
    }

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

.custom_juice {
        width: 130px;
transform: translate(-110px, 30px);
    }

.custom_textbox p {
        width: 80%;
        margin: 0 auto;
        font-size: 15px;
    }

.custom_textbox p br {
        display: none;
    }

.custom_textbox p .br-sp {
        display: inline-block;
    }
.custom_textbox p.description {
        width: 100%;
        padding-bottom: 30px;
                 line-height: 2.5;
    }

    .custom_parts{
        padding-bottom: 300px;

    }

.coating_banner{
    width: 80%;
}

        .coating p{
         line-height: 2.5;
        font-size: 15px;
    }

.coating p br{
        display: none !important;
    }

.coating p .br-sp{

        display: inline-block !important;
    }

    .coating .title_logo{
        width: 80%;
    }

    .coating_banner img{
        width: 80%;
    }

    .window_film_textbox{
        width: 60%;
        margin: 0 auto;
        transform: translate(-150px, -300px);
        padding-left: 15px;
                padding-right: 15px;
                padding-bottom: 50px;
    }

    .window_film_textbox .title_logo {
        width: 80%;
        margin: 0 auto;
    }

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

.custom_juice {
        width: 130px;
transform: translate(-110px, 30px);
    }

    .window_film_textbox p {
        width: 80%;
        margin: 0 auto;
        font-size: 15px;
    }

    .window_film_textbox p br {
        display: none;
    }

    .window_film_textbox p .br-sp {
        display: inline-block;
    }
    .window_film_textbox p.description {
        width: 100%;
        line-height: 2.5;
        padding-top: 10px;
    }

.window_film_img img {
        width: 80vw;
    }

    .window_film_img{
        left: 5%;
    }

    .film_yashinoki{
            transform: translate(-100px, -380px);
    width: 150px;
    }

    .window_film {
    margin-bottom: 70%;}

}