@media screen and ( min-width:800px ){
    .gazou{width: 700px;display: block;margin:10px auto;}
    a.btn-c {
        width: 500px;
        border: 1px solid #1b7e40;
        border-radius: 1rem;
        background: #1b7e40;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #1b7e40), to(#20b958));
        background: -webkit-linear-gradient(bottom, #1b7e40 50%, #20b958 100%);
        background: linear-gradient(0deg, #1b7e40 50%, #20b958 100%);
        -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
        display: block;
        color: #fff;
        text-align: center;
        padding: 20px;
        font-size: 28px;
        margin: 20px auto;
      }
  #btn {
    background: #eee;
    border-radius: 16px;
    margin: 0 auto 2em;
    font-weight: bold;
    padding: 8px 16px;
    width: 80%;
    cursor: pointer;
}
.main{width: 800px;
    margin: 0 auto;}

    h2{font-weight: 500;
        background: #ff3e95;
        box-shadow: 0px 0px 0px 5px #ff3e95;
        border: dashed 2px white;
        padding: 0.2em 0.5em;
        text-align: left;
        margin: 0 auto;
        color: #fff;
        padding: 5px;
        width: 90%;}
        .coupon{    width: 500px;
            margin: 30px auto 10px;
            background-color: #28aeff;
            text-align: center;
            color: #fff;
            font-size: 31px;
        }
        .text{text-align: center;}
        .text2{    width: 600px;
            margin: 20px auto;
        text-align: center;}
            .ribbon9 {
                display: inline-block;
                position: relative;
                height: 45px;
                text-align: center;
                box-sizing: border-box;
                margin: 10px auto 50px;
                width: 100%;
              }
              .ribbon9:before {/*左側のリボン端*/
                content: '';
                position: absolute;
                width: 10px;
                bottom: -10px;
                left: -35px;
                z-index: -2;
                border: 20px solid #56adf3;
                border-left-color: transparent;/*山形に切り抜き*/
              }
              
              .ribbon9:after {/*右側のリボン端*/
                content: '';
                position: absolute;
                width: 10px;
                bottom: -10px;
                right: -35px;
                z-index: -2;
                border: 20px solid #56adf3;
                border-right-color: transparent;/*山形に切り抜き*/
              }
              
              .ribbon9 h3 {
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 25px;
                line-height: 53px;
                font-size: 23px;
                color: #FFF;
                width: 100%;
                background: #2196F3;
                text-align: center;
            
              }
              .ribbon9 h3:before {
                position: absolute;
                content: '';
                top: 100%;
                left: 0;
                border: none;
                border-bottom: solid 10px transparent;
                border-right: solid 15px #397eb5;/*左の折り返し部分*/
              }
              .ribbon9 h3:after {
                position: absolute;
                content: '';
                top: 100%;
                right: 0;
                border: none;
                border-bottom: solid 10px transparent;
                border-left: solid 15px #397eb5;/*右の折り返し部分*/
              }
}







@media screen and ( max-width:799px ){
    .gazou{width: 100%;display: block;margin:10px auto;}
    a.btn-c {
        width: 90%;
        border: 1px solid #1b7e40;
        border-radius: 1rem;
        background: #1b7e40;
        background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #1b7e40), to(#20b958));
        background: -webkit-linear-gradient(bottom, #1b7e40 50%, #20b958 100%);
        background: linear-gradient(0deg, #1b7e40 50%, #20b958 100%);
        -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 5px 10px rgba(0, 0, 0, .1);
        display: block;
        color: #fff;
        text-align: center;
        padding: 11px;
        font-size: 18px;
        margin: 20px auto;
      }
  #btn {
    background: #eee;
    border-radius: 16px;
    margin: 0 auto 2em;
    font-weight: bold;
    padding: 8px 16px;
    width: 80%;
    cursor: pointer;
}
.main{width: 98%;
    margin: 0 auto;}

    h2{font-weight: 500;
        background: #ff3e95;
        box-shadow: 0px 0px 0px 5px #ff3e95;
        border: dashed 2px white;
        padding: 0.2em 0.5em;
        text-align: left;
        margin: 0 auto;
        color: #fff;
        padding: 5px;
        width: 90%;}
        .coupon{    width:80%;
            margin: 30px auto 10px;
            background-color: #28aeff;
            text-align: center;
            color: #fff;
            font-size: 31px;
        }
        .text{text-align: center;}
        .text2{    width:90%;
            margin: 20px auto;
        text-align: center;}
            .ribbon9 {
                display: inline-block;
                position: relative;
                height: 45px;
                text-align: center;
                box-sizing: border-box;
                margin: 10px auto 18px;
                width: 100%;
              }
              .ribbon9:before {/*左側のリボン端*/
                content: '';
                position: absolute;
                width: 10px;
                bottom: -10px;
                left: -35px;
                z-index: -2;
                border: 20px solid #56adf3;
                border-left-color: transparent;/*山形に切り抜き*/
              }
              
              .ribbon9:after {/*右側のリボン端*/
                content: '';
                position: absolute;
                width: 10px;
                bottom: -10px;
                right: -35px;
                z-index: -2;
                border: 20px solid #56adf3;
                border-right-color: transparent;/*山形に切り抜き*/
              }
              
              .ribbon9 h3 {
                display: block;
                position: relative;
                margin: 0 auto;
                padding: 0 25px;
                line-height: 53px;
                font-size: 23px;
                color: #FFF;
                width: 100%;
                background: #2196F3;
                text-align: center;
            
              }
              .ribbon9 h3:before {
                position: absolute;
                content: '';
                top: 100%;
                left: 0;
                border: none;
                border-bottom: solid 10px transparent;
                border-right: solid 15px #397eb5;/*左の折り返し部分*/
              }
              .ribbon9 h3:after {
                position: absolute;
                content: '';
                top: 100%;
                right: 0;
                border: none;
                border-bottom: solid 10px transparent;
                border-left: solid 15px #397eb5;/*右の折り返し部分*/
              }
}