@media print, screen and (min-width: 768px) {
    .br-pc {
        display: block;
      }
    
      .br-sp {
        display: none;
      }
    
      .disp_sp {
        display: none;
      }
      .disp_pc {
        display: block;
      }
      img{
        max-width: 100%;
      }

a:hover img {
    opacity: 0.8; } 

/* main------------------- */


 /* hero------------------- */

 .hero{
    position: relative;
    text-align: center;
    background-image: url(../img/CMotameshi_202509/CMotameshi_top_img01_pc.webp); 
    background-repeat: no-repeat;
    background-size: auto;
    background-position:  center 0 ;
    padding-top: 20px;
    padding-bottom: 15px;
    height: 825px;
    } 

.hero-content-pc{
    margin: 0 auto;
    position: relative;
    max-width: 1100px;
}
.main-ttl-wrap{
    margin-left: auto;
    width: 545px;
}
.main-ttl01{
    position: relative;
    z-index: 3;

}

.main-ttl-btn-wrap{
    margin-top: 10px;
}


.main-ttl-btn{
    position: relative;
    display: block;
    width: 468px;
    height: 89px;
    box-shadow: #555 5px 5px 5px ;
    transition: all .2s;
    z-index: 2;
    border-radius: 40px;
    border: #ff0000 solid 2px;
    overflow: hidden;
    margin-left: 40px;
}

.main-ttl-btn:hover{
    transform: translateX(2px) translateY(2px);
    box-shadow: #555 3px 3px 3px ;
  }

.main-ttl-btn img{
    margin: 0 auto;
    width: 468px;
}

.main-ttl-btn img:hover{
    opacity: 1;
}

.nagare{
    display:inline-block;
    margin-top: 5px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    position: relative;
    text-underline-offset:0.2em;
}
.nagare::after{
    content:"";
    position: absolute;
    top:5px;
    left: -28px;
    width: 25px;
    height: 25px;
    background-image:url(../img/CMotameshi_202509/btn_arrow01_pc.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.hero-ill01{
    position: absolute;
    top: 10px;
    left: -70px;

}
.hero-ill02{
    position: absolute;
    top: 200px;
    left: 495px;
}


/*item-area------------------- */
.CMotameshi_item-area_deco{
    position: relative;
    padding: 0 10px;
}
 .CMotameshi_item-area_deco::before{
    content: "";
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: url(../img/CMotameshi_202509/CMotameshi_back_deco_pc.webp); 
    background-position: center 0;
    background-size: auto;
    background-repeat: no-repeat;
    z-index: 5;
    
}

.CMotameshi_item-area{
    position: relative;
    padding: 0px 0px 20px;
    background-color: #f2e8c8;
}

.CMotameshi_item{
    position: relative;
    margin-bottom: 5px;
}
.CMotameshi_item img{
    position: relative;
    margin: 0 auto;
    z-index: 1;
}
.CMotameshi_item-plus{
    position: relative;
    margin-top: 0;
}
.CMotameshi_item-plus img{
    position: relative;
    margin: 0 auto;
    z-index: 1;
}

.allergy{
    position: relative;
    margin: 20px auto 0 ;
    max-width: 800px;
    font-size: 16px;
    line-height: 30px;
    padding-top: 5px;
    text-align: justify;
    z-index: 1;
}



/* .cvbtn------------------- */
.cvbtn_01_wrap-pc{
    position: relative;
    display: block;
    width: 700px;
    margin: 30px auto 0;
}

.cvbtn_01-btn{
    position: absolute;
    bottom: 15px;
    left: 125px;
    width: 450px;
    height: 85px;
    border-radius: 40px;
    border: #d90614 solid 2px;
    text-align: center;
    box-shadow: #333 5px 5px 5px ;
    animation-name: btn-action-oneday; 
    animation-duration: 2.5s;
    animation-iteration-count: infinite; 
    overflow: hidden;
}
.cvbtn_01-btn img{
    width: 100%;
}
.cvbtn_01-btn:hover{
    animation-play-state: paused;
    transform: translateX(3px) translateY(3px);
    box-shadow: #111 2px 2px 2px ;
}




    @keyframes btn-action-oneday{
        0% {
            transform: translateX(0) translateY(0);
            box-shadow: #111 5px 5px 5px ;
            
        }
        10% {
            transform: translateX(3px) translateY(3px);
            box-shadow: #333 2px 2px 2px ;
            
        }
        20% {
            transform: translateX(0) translateY(0);
            box-shadow: #111 5px 5px 5px ;
            
        }
        30% {
            transform: translateX(3px) translateY(3px);
            box-shadow: #333 2px 2px 2px ;
           
        }
        40% {
            transform: translateX(0) translateY(0);
            box-shadow: #111 5px 5px 5px ;
    
        }
    }

.catch{
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 10px;
    width: 592px;
}

.info-flow{
    padding: 50px 0 0;
    
    text-align: center;
}


.info{
    margin: 0 auto;
    padding: 0 20px;
    max-width: 700px;
}

.info_head{
width: 100%;
padding: 5px;
background-color: #f2464a;
}

.info-txt{
    position: relative;
    text-align: justify;
    font-size: 16px;
    margin-left: 16px;
    margin-top: 15px;
}

.info-txt::before{
    position: absolute;
    content: "●";
    color: #f2464a;
    font-size: 16px;
    left: -16px;
}
.info01{
    margin-top: 30px;
}
.info02,.info03{
margin-top: 30px;
}

.CMotameshi_flow{
    padding: 60px 0;
    max-width: 680px;
    margin: 0 auto ;
}
.CMotameshi_flow-content{
    margin-top: 10px;
    margin-left: -20px;
}

.CMotameshi_flow-note{
    margin: 50px auto 0;
}

/*CPbanner------------------- */
.CPbanner{
    width: 450px;
    margin: 50px auto 100px;
    text-align: center;
}
.tokuten-cm-btn{
    position: relative;
    margin: -80px auto 0;
}
.tokuten-cm-btn img:hover{
opacity: .8;
}
/* totop------------------- */
.CMotameshi_totop{
    display: block;
    margin: 55px auto 80px;
    width: 382px;
    border-radius: 30px;
    border: #ff4385 5px solid;
    background-color: #fff;
    box-shadow: #ff4385 0 5px ;
    padding: 10px;
    transition: all .2s;
    position: relative;
    z-index: 1;
    text-align: center;
}
.CMotameshi_totop img{
    padding-top: 5px;
}
.CMotameshi_totop:hover{
    transform: translateX(3px) translateY(3px);
    box-shadow: #ff4385 0 2px ;
}


/* .cvbtn_bottom------------------- */
.cvbtn_02{
    position: relative;
    display: block;
    width: 736px;
    margin: 100px auto 80px;
    
}

}
@media print, screen and (min-width: 768px) and (max-width: 1100px) {
   .hero{zoom: 0.8;}

}
@media print, screen and (min-width: 768px) and (max-width: 900px) {
    .hero-ill02{
        position: absolute;
        width: 274px;
        top: 200px;
        left: 320px;
    }

    .CMotameshi_item-area_deco::before{
        background-image: none;  
    }
    
 
 }
    
@media print, screen and (max-width: 768px) {
    .disp_pc {
        display: none;
      }
    .disp_sp {
        display: block;
      }
    
      .br-pc {
        display: none;
      }
    
      .br-sp {
        display: block;
      }

    img {
        max-width: 100%;
      }

      .hero{
        position: relative;
        text-align: center;
        background-image: url(../img/CMotameshi_202509/CMotameshi_top_img01_sp.webp); 
        background-size: cover;
        background-repeat: no-repeat;
        height: 175vw;
        padding-top: 3vw;
        } 

   

    .main-ttl-btn-wrap{
        position: relative;
        margin-top: -2vw;
        z-index: 1;
    }
    .main-ttl-btn{
        display: block;
        margin: 3vw auto 0;
        width: 90vw;
        height: 18vw;
        border-radius: 8vw;
        border: #ff0000 solid .5vw;
        overflow: hidden;
        box-shadow: #555 1vw 1vw 1vw ;
    }

    .nagare{
        position: relative;
        display: inline-block;
        margin: 1vw 0 0 4vw;
        color: #000;
        font-size: 4.2vw;
        text-underline-offset:0.2em;
    }
    .nagare::after{
        content:"";
        position: absolute;
        top:1.2vw;
        left: -4.8vw;
        width: 4.8vw;
        height: 4.8vw;
        background-image:url(../img/CMotameshi_202509/btn_arrow02_pc.webp);
        background-repeat: no-repeat;
        background-size: contain;
    }
 

    .CMotameshi_item-area{
        padding-top: 4vw;
        padding-bottom: 4vw;
        background-color: #f2e8c8;
    }



    .CMotameshi_item{
        position: relative;    
    }
    .CMotameshi_item img{
        position: relative;
        z-index: 1;
        
    }

    .allergy{
        margin: 4vw auto 0;
        width: 90vw;
        font-size: 3.45vw;
        line-height: 5vw;
        font-weight: bold;
        padding-top: 3vw;
        text-align: justify;
    }

    .present01{
        margin: 8vw auto 0;
        width: 89vw;

    }
    .cvbtn_01_wrap-sp{
        position: relative;
        margin: 12vw auto 0;
        padding: 0  5vw;
    }

    .cvbtn_01-btn{
        position: absolute;
        bottom: 3.8vw;
        left: 8vw;
        width: 80vw;
        height: 16vw;
        border-radius: 7vw;
        border: #ff0000 solid .5vw;;
        text-align: center;
        box-shadow: #333 1vw 1vw ;
        transition: all .2s;
        animation-name: btn-action-oneday; 
        animation-duration: 2.5s;
        animation-iteration-count: infinite;   
        overflow: hidden;
    }
  
        @keyframes btn-action-oneday{
            0% {
                transform: translateX(0) translateY(0);
                box-shadow: #111 1vw 1vw ;
                
            }
            10% {
                transform: translateX(3px) translateY(3px);
                box-shadow: #333 .4vw .4vw ;
                
            }
            20% {
                transform: translateX(0) translateY(0);
                box-shadow: #111 1vw 1vw ;
                
            }
            30% {
                transform: translateX(3px) translateY(3px);
                box-shadow: #333 .4vw .4vw ;
               
            }
            40% {
                transform: translateX(0) translateY(0);
                box-shadow: #111 1vw 1vw ;
        
            }
    }
 

    .catch{
        margin-top: 10vw;
    }



.info-flow{
    padding: 8vw 0;
    text-align: center;
    background-color: #ffffff;
}

.info{
    margin: 0 auto;
    padding: 0 5vw;
}

.info_head{
    width: 90vw;
    padding: 2vw 10vw;
    background-color: #f2464a;
    }

.info-txt{
    font-size: 3.7vw;
    position: relative;
    text-align: justify;
    margin-left: 3.7vw;
    margin-top: 4vw;
}

.info-txt::before{
    position: absolute;
    content: "●";
    color: #f2464a;
    font-size: 3.7vw;
    left: -3.7vw;
}
.info01{
    margin-top: 6.6vw;
}

.info02,.info03{
    margin-top: 6.6vw;
}


.CMotameshi_flow{
    padding: 20vw 5vw 0;
    margin-top: -5vw;
}
.CMotameshi_flow-content{
    margin-top: 3vw;
}

.CMotameshi_flow-note{
    margin-top: 9vw;
}

.cvbtn_02{
    position: relative;
    margin-top: 12vw;
}

/*CPbanner------------------- */
.CPbanner{
    margin-top: 10vw;
}
.tokuten-cm-btn{
    margin: -16vw auto 0;
    width: 82.4vw;
}

/* totop------------------- */
.CMotameshi_totop{
    display: block;
    margin: 8vw auto 8vw;
    width: 73vw;
    border-radius: 4.5vw;
    border: #ff4385 .75vw solid;
    background-color: #fff;
    box-shadow: #ff4385 0 .5vw ;
    text-align: center;

}
.CMotameshi_totop img{
    width: 44.8vw;
}



}