@charset "utf-8";


/*
#wrap{background-image: url(../_dm_/PC_catalog01.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;}#content{opacity:0.5;}
*/

/*
#wrap{background-image: url(../_dm_/SP_catalog01.png);background-repeat: no-repeat;background-position: 0 -45px;background-size: 100% auto;}#content{opacity:0.5;}
*/


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@media all and (min-width: 769px){
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/



/********/
section.catalog{
    position: relative;
    margin: 0 0 -20px 0;
    z-index: 1;
}
/*----*/
section.catalog h1{
    padding: 70px 0 30px 0;
    text-align: center;
}
section.catalog h1 p{
    padding: 0 0 15px 0;
    font-size: 84px;
    font-weight: 300;
}
/*----*/
section.catalog div.framebox{
    position: relative;
    width: 520px;
    margin: 0 auto 0 auto;
}
section.catalog div.framebox i.line{
    position: absolute;left: 0;
    width: 100%;
    height: 2px;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration:2s;transition-duration:2s;
    -webkit-transform: scale(0,0);transform: scale(0,0);
}
section.catalog div.framebox i.line.n1{
    top: 0;
    -webkit-transform-origin: right center;transform-origin: right center;
}
section.catalog div.framebox i.line.n2{
    top: 530px;
    -webkit-transform-origin: left center;transform-origin: left center;
}
section.catalog div.framebox.appear i.line{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
section.catalog div.framebox i.line svg{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    fill: url(#gradient2);
}
/*----*/
section.catalog div.picbox{
    padding: 70px 0 30px 0;
    text-align: center;
}
section.catalog div.picbox p{
    display: inline-block;
    width: 442px;
    height: 312px;
    vertical-align: top;
    background-image: url(../image/catalog/pic_catalog_01.jpg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}
/*----*/
section.catalog div.buttonbox{
    text-align: center;
}
section.catalog div.buttonbox a{
    display: inline-block;
    position: relative;
    width: 240px;
    height: 50px;
    vertical-align: top;
    overflow: hidden;
    border-radius: 40px;
    border-style: solid;border-width: 1px;border-color: rgba(31,146,132,1);
}
section.catalog div.buttonbox a i.base{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(58,201,178,1),rgba(14,103,164,1));
    opacity: 0;
    -webkit-transition-property: opacity;transition-property: opacity;
    -webkit-transition-duration: 0.8s;transition-duration: 0.8s;
}
section.catalog div.buttonbox a span{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    line-height: 50px;
    text-indent: -30px;
    color: rgba(31,146,132,1);
    font-size: 20px;
    letter-spacing: 3px;
    font-family: "Montserrat",sans-serif;
    font-weight: 300;
    -webkit-transition-property: color;transition-property: color;
    -webkit-transition-duration: 0.8s;transition-duration: 0.8s;
}
section.catalog div.buttonbox a i.mark{
    position: absolute;right: 22px;top: 20px;
    width: 30px;
    height: 7px;
}
section.catalog div.buttonbox a i.mark>svg{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    fill: rgba(31,146,132,1);
    -webkit-transition-property: fill;transition-property: fill;
    -webkit-transition-duration: 0.8s;transition-duration: 0.8s;
}
section.catalog div.buttonbox a:hover i.base{
    opacity: 1;
}
section.catalog div.buttonbox a:hover span{
    color: rgba(255,255,255,1);
}
section.catalog div.buttonbox a:hover i.mark>svg{
    fill: rgba(255,255,255,1);
}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
} @media all and (max-width: 768px){
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/********/
section.catalog{
}
/*----*/
section.catalog h1{
    padding: 1.000rem 0 2.000rem 0;
    text-align: center;
}
section.catalog h1 p{
    padding: 0 0 0.500rem 0;
    font-size: 2.500rem;
    font-weight: 300;
}
/*----*/
section.catalog div.framebox{
    position: relative;
    width: 17.334rem;
    margin: 0 auto 0 auto;
}
section.catalog div.framebox i.line{
    position: absolute;left: 0;
    width: 100%;
    height: 1px; ;;
    -webkit-transition-property: transform;transition-property: transform;
    -webkit-transition-duration:2s;transition-duration:2s;
    -webkit-transform: scale(0,0);transform: scale(0,0);
}
section.catalog div.framebox i.line.n1{
    top: 0;
    -webkit-transform-origin: right center;transform-origin: right center;
}
section.catalog div.framebox i.line.n2{
    top: 19.167rem;
    -webkit-transform-origin: left center;transform-origin: left center;
}
section.catalog div.framebox.appear i.line{
    -webkit-transform: scale(1,1);transform: scale(1,1);
}
section.catalog div.framebox i.line svg{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    fill: url(#gradient2);
}
/*----*/
section.catalog div.picbox{
    padding: 2.833rem 0 1.000rem 0;
    text-align: center;
}
section.catalog div.picbox p{
    display: inline-block;
    width: 14.734rem;
    height: 10.400rem;
    vertical-align: top;
    background-image: url(../image/catalog/pic_catalog_01.jpg);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}
/*----*/
section.catalog div.buttonbox{
    padding: 0 0 15.667rem 0;
    text-align: center;
}
section.catalog div.buttonbox a{
    display: inline-block;
    position: relative;
    width: 10.667rem;
    height: 2.167rem;
    vertical-align: top;
    overflow: hidden;
    border-radius: 1.333rem;
    border-style: solid;border-width: 1px;border-color: rgba(31,146,132,1); ;;
}
section.catalog div.buttonbox a i.base{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(58,201,178,1),rgba(14,103,164,1));
    opacity: 0;
}
section.catalog div.buttonbox a span{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    line-height: 2.167rem;
    text-indent: -1.000rem;
    color: rgba(31,146,132,1);
    font-size: 0.900rem;
    letter-spacing: 0.067rem;
    font-family: "Montserrat",sans-serif;
    font-weight: 300;
}
section.catalog div.buttonbox a i.mark{
    position: absolute;right: 0.733rem;top: 0.900rem;
    width: 1.000rem;
    height: 0.233rem;
}
section.catalog div.buttonbox a i.mark>svg{
    position: absolute;left: 0;top: 0;
    width: 100%;
    height: 100%;
    fill: rgba(31,146,132,1);
}


/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
} /* End of media query */
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/