/*===================================
    overwrite
=====================================*/
article {
    margin: 10.0rem auto 3.5rem;
}

article dl,
article li,
article h4 {
    margin-bottom: 1em;
}

article p {
    margin-bottom: 1.5em;
}



/**********　1024px～768px　**********/
@media print,
screen and (max-width: 1023px) {

    article {
        margin: 6.0rem auto 3.5rem;
    }

}



/**********　767px↓　**********/
@media print,
screen and (max-width: 767px) {

    article {
        margin: 2.3em auto;
    }

}





/*===================================

=====================================*/
#lead {
    width: 88%;
    margin: auto auto 3.5em;
}

.midashi {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;


    align-items: center;
}

.midashi h2 {
    font-size: 2.8rem;
    /**/
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 1.2px;
    margin: 0 1em;
}

/*.midashi img{
margin-bottom: 1.0rem;
}*/

.outline {
    background-color: #d13a3a;
    /*#f4eeeb*/
    border-radius: 15px;
    padding: 4.0rem 3.0rem;
    margin-bottom: 90px;
    /*15em*/
    position: relative;
}

.outline img {
    position: absolute;
    display: inline-block;
    width: 19%;
}

.outline #sax {
    top: 0%;
    left: -4%;
}

.outline #clarinet {
    top: -50%;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
    right: -6%;
}

.outline #mouthpiece01 {
    top: 50%;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    left: -6%;
}

.outline #mouthpiece02 {
    top: -30%;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    right: 0%;
}

.outline #midashi_mob, .outline #midashi_mob2 {
    display: none;
}

.outline p {
    font-size: 1.6rem;
    display: block;
    width: 69%;
    margin: 0 auto;
    line-height: 2.0em;
    letter-spacing: 0.5px;
    color: #fff;
}

.outline #much {
    width: 69%;
    margin: 0 auto;
    display: block;
    color: #fff;
}

.midashi-br {
    display: block;
}

.MDS {
    display: none;
}



/**********　1024px～768px　**********/
@media print,
screen and (max-width: 1023px) {

    #lead {
        width: 90%;
        margin: 0 auto 5rem auto;
    }

    .midashi h2 {
        font-size: 2.5rem;
        /*margin:0 0.5em;*/
    }

    .outline {
        margin-bottom: 10em;
    }

    .outline #sax {
        top: 25%;
        left: -8%;
    }

    .outline #clarinet {
        top: -20%;
        right: -7%;
    }

    .outline #mouthpiece01 {
        top: 60%;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
        left: -8%;
    }

    .outline #mouthpiece02 {
        top: -10%;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
        right: -8%;
    }

    .outline p {
        width: 77%;
    }

    .outline #much {
        width: 77%;
        margin: 0 auto;
        display: block;
    }

    .midashi-br {
        display: none;
    }

}



/**********　767px↓　**********/
@media print,
screen and (max-width: 767px) {
    #lead {
        width: 100%;
        margin: auto auto 5rem;
    }

    /*.midashi{
 display:flex;
justify-content:center;
margin-bottom: 15px;
}*/

    .midashi h2 {
        font-size: 2.0rem;
        /*2.0*/
        margin: 0 32px;
        /*0 25*/
    }

    #shisou {
        margin: 0 0px;
    }


    /*.midashi img{
margin-bottom: 10px;
}*/

    .outline {
        padding: 3.5rem 3.5rem 1.5rem;
        /*4.0  4.0*/
        margin-bottom: 6em;
        position: static;
    }

    .outline img {
        position: static;
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .outline #sax, .outline #clarinet, .outline #mouthpiece01, .outline #mouthpiece02 {
        display: none;
    }

    .outline #midashi_mob, .outline #midashi_mob2 {
        display: block;
        margin: 2em auto 0em;
        /*3.5 auto 2*/
    }

    .outline p {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .outline #much {
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .MDS {
        display: block;
    }


}




/*===================================
    // id main
=====================================*/
#main {
    width: 88%;
    /* margin:20em auto 45px; */
    margin: 120px auto 0;
}

#modelcopy {
    margin-bottom: 5em;
}

#modelcopy h3 {
    /*border-top:#d13a3a 3px solid;
    border-bottom:#d13a3a 3px solid;
    color: #000;
    font-size: 2.8rem;
    text-align: center;
    padding: 10px 0;
    display:block;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 10px;*/

    border-top: #d13a3a 3px solid;
    border-bottom: #d13a3a 3px solid;
    color: #000;
    font-size: 3.2rem;
    text-align: center;
    padding: 20px 0;
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;

}

#modelcopy p {
    /*width:61%;
    margin: auto;
    margin-bottom: 15px;
    line-height: 1.6em;
    font-size:1.6rem;
    letter-spacing: 1px;*/

    width: auto;
    margin: auto;
    margin-bottom: 15px;
    line-height: 1.6em;
    font-size: 1.8rem;
    letter-spacing: 1px;
    text-align: center;
}

#content {
    margin: 0 auto;
    /* margin-bottom: 10rem; */
    margin-bottom: 8rem;
    /* border: #f00 thin solid; */
}

#content h4 {
    border-bottom: solid 1px #d13a3a;
    font-size: 2.6rem;
    /*2.6*/
    font-weight: bold;
    margin-bottom: 30px;
    /*3em*/
}

.maincontent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 8rem; */
    margin-bottom: 6rem;
}

.maincontent img {
    width: 40%;
    display: block;
}

.comment {
    width: 57%;
    display: block;
    margin: auto 0;
    letter-spacing: 0.5px;
    line-height: 1.8em;
}

/*.comment .part{
background-color:#e2e2e2;
font-size:1.1rem;
border-radius:50px;
padding:2px;
width:18%;
text-align: center;
}*/

.comment .brand {
    font-size: 2.4rem;
    /*1.8*/
    font-weight: bold;
    margin-bottom: 0.3em;
    /*0.6*/
}

.comment .brand span {
    font-size: 1.2rem;
    font-weight: normal;
}

.comment .copy {
    font-size: 1.4rem;
    padding-bottom: 1.5em;
    border-bottom: 2px dashed #000;
    line-height: 1.6em;
}

.comment .picup {
    background-color: #d13a3a;
    font-size: 1.2rem;
    border-radius: 50px;
    padding: 3px 0px;
    width: 23%;
    text-align: center;
    color: #fff;
    margin-bottom: 0.5rem;

}

.comment .picupcopy {
    font-size: 1.4rem;

}

/*
.comment .picupcopy span{
    font-size: 1.3rem
}*/



/**********　1024px～768px　**********/
@media print,
screen and (max-width: 1023px) {
    #main {
        width: 100%;
        margin: 9.4em auto 45px;
    }

    #modelcopy p {
        /* width:60%;*/
        width: auto;
        margin: 0 auto;
    }


    #modelcopy h3 {
        font-size: 2.9rem;
        /*2.0rem*/
        padding: 10px 0;
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;

    }



    #content h4 {
        font-size: 2.4rem;
        margin-bottom: 2.5em;
    }

    .maincontent {
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .maincontent img {
        width: 100%;
        margin-bottom: 1.5em;
    }

    .comment {
        width: 98%;
        margin: 0 auto;
    }

    /*.comment .part{
    margin-bottom: 0.8em;
}*/

    .comment .brand {
        margin-bottom: 0.15em;
        /*0.5*/
        font-size: 2.0rem;
    }

    .comment .copy {
        padding-bottom: 1.0em;
        margin-bottom: 1.0em;
    }

    .comment .picup {
        margin-bottom: 0.8rem;
    }

}



/**********　767px↓　**********/
@media print,
screen and (max-width: 767px) {
    #modelcopy h3 {
        font-size: 2.4rem;
        /*2.0*/
        margin-bottom: 10px;
    }


    #modelcopy {
        margin-bottom: 2.5em;
    }

    #modelcopy p {
        width: 100%;
        font-size: 1.6rem;
    }



    #content {
        margin-bottom: 5rem;
    }

    #content h4 {
        margin-bottom: 1.5em;
        font-size: 2.0rem;
        /*1.8*/
    }

    .comment .brand {
        font-size: 1.8rem;
    }

    .maincontent {
        width: 100%;
        margin-bottom: 5rem;
    }

    .comment {
        width: 100%;
    }

    /*.comment .part{
    width:30%;
}*/

    .comment .picup {
        width: 40%;
    }


}



/*===================================
    　　　　// address
=====================================*/
#btn {
    /* margin: 15rem auto 9.5rem; */
    margin: 30px auto 9.5rem;
}

#address {
    /*width: 40%;
    display: block;
    margin: 0 auto;*/

    width: 60%;
    display: block;
    margin: 0 auto;
    padding: 30px 0;
}

#address p {
    margin: auto;
    background: #d13a3a;
    /* padding: 20px; */
    padding: 30px 0;
    /* border-radius: 10px; */
    border-radius: 3em;
    text-align: center;
    letter-spacing: 2px;
    font-size: 2.0rem;
}

#address a {
    color: #fff;
    font-weight: bold;
}



/**********　1024px～768px　**********/
@media print,
screen and (max-width: 1023px) {
    #btn {
        margin: 9rem auto 4.47em;
        /*5.6*/
    }

    #address {
        width: 90%;
    }

    /* #address p{
        font-size:1.8rem;
    }*/

}



/**********　767px↓　**********/
@media print,
screen and (max-width: 767px) {
    #address {
        width: 100%;
    }

    #address p {
        font-size: 1.8rem;
    }
}