@charset "utf-8";
img{width:100%;}
.spOnly{display:block;}
.pcOnly{display:none;}
html,body{height: 100%;}

body{
     font-family: serif;
     font-size: 62.5%;
}

#page-top {
    position: fixed;
    bottom: 3%;	right: 3%;
}
#page-top a {
    background: #f3aebe;
    color:#fff;
    display:block;width:40px;line-height:40px;border-radius:50%;text-align:center;opacity:0.8;text-decoration:none;
}

h1 a{
     display: block;
     width: 75%;
     max-width: 440px;
     margin: 1% auto;
     text-indent: -9999px;
     overflow: hidden;
     background: url(../img/logo.svg) center center no-repeat;
}

h2{
     margin-bottom: 3%;
     padding: 1%;
     text-align: center;
     font-size: 1.2rem;
     color: #FFF;
     background: rgba(180,23,73,1);
}

h2 a {
     color: #FFF;
     transition: .7s;
}

h2 a:hover {
     color: #FFF;
     opacity: .7;
     text-decoration: none;
}

h2 span{
     margin: 2%;
     font-size: .8rem;
     display: block;
}

article{
     padding: 3%;
}

.icon{
     max-width: 700px;
     margin: 0 auto 5%;
}

.icon a{
     transition: .5s;
}

#dm_top .icon{
     margin-bottom: 2%;
}

#dm_top .icon a {
     display: inline-block;
     width: 31%;
     height: 100%;
     border-radius: 50%;
     margin-right: 3%;
     position: relative;
}

#dm_top .icon a:nth-of-type(3n){
     margin-right: 0;
}
#dm_top .icon:last-of-type a {
     display: block;
     margin: 0 auto;
}

#dm_top .icon:nth-last-of-type(-n+2) a:hover{
     opacity: 1;
     cursor: default;
}

.icon a span {
     position: absolute;
    top: 18%;
    left: 18%;
    width: 65%;
    height: 65%;
    background: transparent;
    border-radius: 50%;
    transition: 2s;
}

.icon a:hover{
     opacity: .85;
}

.icon a:hover span{
     box-shadow: 0px 3px 10px rgba(0,0,0,.5);
}

#about article section {
     max-width: 800px;
     margin: 0 auto;
     padding: 5%;
}

#about h3 {
     line-height: 1.6;
     margin: 0 0 8%;
     font-size: 1.5rem;
     font-weight: bold;
     text-align: center;
}

#about h3 span{
     font-size: 1rem;
     font-weight: normal;
     display: block;
}

#about article p {
     font-size: 1rem;
     line-height: 1.8;
     margin-bottom: 5%;
}

#about article p:last-of-type{
     text-align: right;
     font-size: .9rem;
}

.icon a {
     display: inline-block;
     width: 15%;
     margin-right: 1%;
}

.mod_thumlist{
     max-width: 1000px;
     margin: 0 auto;
}

.products_right,.products_left{
     display: inline-block;
     vertical-align: top;
}

.products_left p img{
     max-width: 700px;
}
.products_left{
     width: 60%;
     height: auto!important;
     font-size: 1.2rem;
     text-align: center;
}

.products_left p{
     margin-top: 5%;
}

.products_left p::first-line{
     font-size: 1.1rem;
     font-weight: bold;
}

.products_right{
     width: 38%;
     padding-left: 5%;
     list-style: none;
}

.products_right li {
     display: inline-block;
     width: 46%;
}

.products_right a{
     display: inline-block;
     width: 100%;
     height: 80px;
     overflow: hidden;
     position: relative;
}

.products_right a img{
     position: absolute;
     top: 50%;
     left: 50%;
     width: 200%;
     transform: translate(-50%,-50%);
}

#modal-content .prev a, #modal-content .next a {
     display: block;
     width: 40px;
     height: 40px;
     opacity: .5;
     position: absolute;
     top: 45%;
}

#modal-content .prev a{
     right: 101%;
     background: url(../img/prev.png) center center /cover no-repeat;
}

#modal-content .next a{
     left: 101%;
     background: url(../img/next.png) center center /cover no-repeat;
}


footer {
     background: #B41749;
     color: #FFF;
     text-align: center;
     padding: .5% 0;
}
#modal-content {
    margin: 0;
    padding: 10px 20px;
    position: fixed;
    display: none;
    z-index: 999;
}

#modal-content .large{
     left: 50%;
     transform: translateX(-50%);
}

#modal-overlay {
    z-index: 998;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba( 0,0,0, 0.75 );
}

.active{
     position: relative;
     z-index: 8;
}

.active img{
     position: relative;
     z-index: 7;
}

.active::after{
     content: "";
     display: block;
     width: 99%;
     height: 99%;
     border-radius: 50%;
     background: #B41749;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     z-index: 1;
     box-shadow: 0 0 15px #B41749;
}

.drawer-brand{
     font-size: 1.1rem;
}

.drawer-nav{
     text-align: center;
}

.drawer--right .drawer-nav{
     z-index: 10000;
}

.drawer-brand:hover{
     color: #B41749;
}

@media screen and (min-width:758px) {
	.spOnly{display:none;}
	.pcOnly{display:block;}

     h2 span{
          display: inline;
     }

     .products_left{
          width: 70%;
     }

     .products_right{
          width: 29%;
     }

     .products_right a{
          height: 100px;
     }
     .products_right a img{
          width: 130%;
     }
     #about article{
          padding: 3%;
     }

}