@charset "UTF-8";
#global_header_wrap{position:absolute;top:0;left:0;width:100%;background-color:#fff;z-index:100;-webkit-transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out;-o-transition:transform .5s ease-out;transition:transform .5s ease-out,-webkit-transform .5s ease-out}
#global_header_wrap.hide{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
#melfa_contents_1col{width:100%}
#content_footer{display:none!important}
.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:url(/fa/jpsup/mecha/common/img/loading.gif) 50% 50% no-repeat #fff;z-index:1000}
.no_scroll{height:100%;overflow:hidden}
.main{position:relative;display:block;font-family:'Noto Sans JP',sans-serif;overflow:hidden;color:#000}
.main .bg_line{position:absolute;top:0;left:0;display:block;width:100%;height:50%;background:url(/fa/jpsup/mecha/common/img/bg_line.png) 57% 0 no-repeat;z-index:-1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.main img{vertical-align:top}
.section{position:relative}
.section header.container{position:relative;z-index:10}
.section__header--vertical::before{content:"";position:absolute;top:130px;left:0;display:block;width:calc(50% - 507px);height:1px;background-color:#000;z-index:10}
.section__header--vertical>.container{position:relative}
.section__header--vertical .inner{display:block;position:absolute;left:0;top:-1em;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);line-height:1;font-family:Lato,sans-serif}
.section__header--vertical+.section__body{position:relative}
.section__bg{position:absolute;z-index:-1}
.section__text p[lang=en]{font-family:arial,sans-serif;line-height:1.71}
.section--bg .section__header{color:#fff}
.section--bg .section__bg{top:0;left:0;height:100%;z-index:-1;overflow:hidden}
.section--bg .section__bg::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:#d61515}
.section--bg .section__text{color:#fff}
.section--bg .section__bg.animated::before{visibility:hidden}
.section--bg .section__bg.animated::after{content:"";position:absolute;width:0;height:100%;display:block;background-color:#191919}
.section--bg .section__bg.show::before{visibility:visible;-webkit-transition:visibility 1s linear .75s;-o-transition:visibility 1s linear .75s;transition:visibility 1s linear .75s}
.section--bg .section__bg.show::after{-webkit-animation:1.5s cubic-bezier(.645,.045,.355,1) slide_bg1;animation:1.5s cubic-bezier(.645,.045,.355,1) slide_bg1}
.buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.button a{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;background-color:#fff;color:#000;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border:1px solid #e6e6e6;-webkit-box-sizing:border-box;box-sizing:border-box}
.button__icon{position:absolute}
.rarr{text-align:right}
.rarr a{position:relative;display:block;color:#000;white-space:nowrap}
.rarr .inner{position:relative;display:inline-block}
.rarr .inner::after,.rarr .inner::before{content:"";position:absolute;top:53%;display:block;background-color:#000}
.rarr .inner::before{height:1px}
.rarr .inner::after{right:10px;height:1px;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.rarr--white a{color:#fff}
.rarr--white .inner::after,.rarr--white .inner::before{background-color:#fff}
/*!メカトロナビ*/
.mecha_nav_wrap{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:100;overflow-y:auto}
.mecha_nav__container{position:relative;border-top:1px solid #ccc}
.mecha_nav__header{font-family:Lato,sans-serif;text-align:center}
.mecha_nav__body{display:-webkit-box;display:-ms-flexbox;display:flex}
.mecha_nav--top{text-align:center}
.mecha_nav--top a{position:relative;display:inline-block;color:#000}
.mecha_nav--top a::after,.mecha_nav--top a::before{content:"";position:absolute;top:50%;display:block;background-color:#000}
.mecha_nav--top a::before{height:1px}
.mecha_nav--top a::after{left:0;height:1px;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.mecha_nav--top a .inner{display:inline-block}
.mecha_nav__item a{display:block;text-align:center;color:#000}
.mecha_nav_button{z-index:90}
.mecha_nav_open{border:none;cursor:pointer;z-index:90}
.mecha_nav_close{position:absolute;border:none;cursor:pointer}
/*!LINKS*/
/*!INFORMATION*/
#section_info::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(../img/bg_info.png) left bottom no-repeat #dcdcdc;z-index:-1}
#section_info.show::before{-webkit-animation:1s cubic-bezier(.645,.045,.355,1) w100;animation:1s cubic-bezier(.645,.045,.355,1) w100}
/*!ページトップ*/
.mecha_pagetop{position:relative;width:100%;height:0;z-index:90}
.mecha_pagetop>.container{position:relative}
.mecha_pagetop a{position:absolute;right:25px;display:block;color:#000;font-family:Lato,sans-serif;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;text-decoration:none}
.mecha_pagetop a::before{position:absolute;left:0;top:50%;content:"";display:inline-block;height:1px;background-color:#262626;vertical-align:middle}
.animated{opacity:0;visibility:hidden;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.show{opacity:1;visibility:visible}
.fadeIn{visibility:visible;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1.3s;animation-duration:1.3s}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s}
@media only screen and (max-width:640px) and (min-width:641px){
#section_info .button__img{background-repeat:no-repeat}
}
@media print,screen and (min-width:641px){
.w980 #module_titleArea{padding-bottom:8px}
.main{min-width:980px;font-size:.88em;line-height:1.86}
.container{width:980px;margin:0 auto;padding:0 13px;-webkit-box-sizing:border-box;box-sizing:border-box}
.section__header--vertical{font-size:3em}
.section__header--vertical+.section__body>.container{padding-left:100px}
.section__text p+p{margin-top:25px}
.section--bg .section__header--vertical::before{background-color:#fff}
.section--bg .section__header--vertical .inner{top:calc(130px - 1em)}
.section--bg .section__bg{width:calc(50% + 83px)}
.section--bg .section__body{padding:130px 0}
.section--bg .section__text{width:362px}
.section__header--vertical.animated::before{left:-50%}
.section__header--vertical.show::before{left:0;-webkit-transition:left .6s cubic-bezier(.645,.045,.355,1) .3s;-o-transition:left .6s cubic-bezier(.645,.045,.355,1) .3s;transition:left .6s cubic-bezier(.645,.045,.355,1) .3s}
#svg_canvas{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%}
.buttons__item{width:260px}
.buttons__item+.buttons__item{margin-left:43px}
.buttons__item:nth-child(n+4){margin-top:40px}
.buttons__item:nth-child(3n+1){margin-left:0}
.button a{padding:30px 12px 20px;-webkit-transition:color .2s ease-out,border-color .2s ease-out;-o-transition:color .2s ease-out,border-color .2s ease-out;transition:color .2s ease-out,border-color .2s ease-out}
.button a:hover{color:#d61515;border-color:#d61515;text-decoration:none}
.button__container{min-height:180px}
.button__img+.button__name{margin-top:15px}
.button__img+.button__name--s{margin-top:10px}
.button__name{font-size:1.07em;text-align:center}
.button__name--s{font-size:.86em}
.button__icon{top:10px;right:10px}
.button__icon img{width:20px;height:auto}
.rarr .inner{font-size:1em;padding-right:160px;min-height:60px;line-height:60px}
.rarr .inner::after,.rarr .inner::before{-webkit-transition:background-color .1s ease-out .2s;-o-transition:background-color .1s ease-out .2s;transition:background-color .1s ease-out .2s}
.rarr .inner::before{right:10px;width:138px}
.rarr .inner::after{width:30px}
.rarr a{overflow:hidden;-webkit-transition:color .1s ease-out .15s,padding .2s ease-out;-o-transition:color .1s ease-out .15s,padding .2s ease-out;transition:color .1s ease-out .15s,padding .2s ease-out}
.rarr a::before{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background-color:#d61515;-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top;-webkit-transition:-webkit-transform .4s cubic-bezier(.645,.045,.355,1);transition:transform .4s cubic-bezier(.645,.045,.355,1);-o-transition:transform .4s cubic-bezier(.645,.045,.355,1);transition:transform .4s cubic-bezier(.645,.045,.355,1),-webkit-transform .4s cubic-bezier(.645,.045,.355,1);-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1)}
.rarr a:hover{color:#fff;padding-left:10px}
.rarr a:hover::before{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1)}
.rarr a:hover .inner::after,.rarr a:hover .inner::before{background-color:#fff}
.rarr--white a::before{background-color:#fff}
.rarr--white a:hover{color:#000}
.rarr--white a:hover .inner::after,.rarr--white a:hover .inner::before{background-color:#000}
.none_pc{display:none}
/*!メカトロナビ*/
.mecha_nav_wrap{padding-top:150px}
.mecha_nav__container{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:50px;padding:50px 0 150px}
.mecha_nav__header{font-size:2.29em}
.mecha_nav__body{margin-top:20px}
.mecha_nav--top .mecha_nav__header{margin-bottom:10px}
.mecha_nav--top a{font-size:1.29em;padding-left:55px;min-height:40px;line-height:40px}
.mecha_nav--top a::before{right:calc(100% - 35px);width:35px;-webkit-transition:width .2s ease-out;-o-transition:width .2s ease-out;transition:width .2s ease-out}
.mecha_nav--top a::after{width:16px;-webkit-transition:left .2s ease-out;-o-transition:left .2s ease-out;transition:left .2s ease-out}
.mecha_nav--top a:hover::before{width:65px}
.mecha_nav--top a:hover::after{left:-30px}
.mecha_nav--top a .inner{padding-right:20px}
.mecha_nav--magazine{border-left:1px solid #ccc;margin-left:33px}
.mecha_nav__item{width:296px}
.mecha_nav__item+li{margin-left:33px}
.mecha_nav__item a{font-size:1.14em}
.mecha_nav__item .thumb img{-webkit-transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}
.mecha_nav__item .name{margin-top:20px}
.mecha_nav__item a:hover .thumb img{-webkit-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}
.mecha_nav_button{position:absolute;top:178px;width:100%;-webkit-transition:top .5s ease-out;-o-transition:top .5s ease-out;transition:top .5s ease-out}
.mecha_nav_button>.container{position:relative}
.mecha_nav_button--fixed{position:fixed;top:0}
.mecha_nav_open{position:absolute;right:0;top:calc(100% + 25px);width:69px;height:69px}
.mecha_nav_close{top:50px;right:50px;width:69px;height:69px}
/*!LINKS*/
#section_link{padding:130px 0}
#section_link .button__img img{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}
#section_link .button a:hover .button__img img{opacity:0}
#section_link .buttons__item--01 .button__img{background-image:url(../img/logo_mmeg_ov.png)}
#section_link .buttons__item--02 .button__img{background-image:url(../img/logo_msw_ov.png)}
#section_link .buttons__item--03 .button__img{background-image:url(../img/logo_youtube_ov.png)}
#section_link .buttons__item--04 .button__img{background-image:url(../img/logo_facebook_ov.png)}
/*!INFORMATION*/
#section_info::before{background-size:auto 100%;background-position-x:-60px}
#section_info{padding:95px 0 85px}
#section_info .section__header--vertical::before{top:130px}
#section_info .button__img img{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}
#section_info .button a:hover .button__img img{opacity:0}
#section_info .buttons__item--01 .button__img{background-image:url(../img/icon_catalog_ov.png)}
#section_info .buttons__item--02 .button__img{background-image:url(../img/icon_biz_members_ov.png)}
#section_info .buttons__item--03 .button__img{background-image:url(../img/icon_fa_members_ov.png)}
#section_info .buttons__item--04 .button__img{background-image:url(../img/logo_e-factory_ov.png)}
#section_info .buttons__item--05 .button__img{background-image:url(../img/icon_case_ov.png)}
#section_info .buttons__item--06 .button__img{background-image:url(../img/icon_exhibition_ov.png)}
#section_info .buttons__item--07 .button__img{background-image:url(../img/icon_product_ov.png)}
#section_info .buttons__item--08 .button__img{background-image:url(../img/icon_solutioncentor_ov.png)}
#section_info .buttons__item--09 .button__img{background-image:url(../img/icon_mechtroplus_ov.png)}
#section_info .buttons__item--10 .button__img{background-image:url(../img/icon_mecha_ov.png)}
/*!ページトップ*/
.mecha_pagetop>.container{width:100%;min-width:980px}
.mecha_pagetop a{padding-left:72px;font-size:1.14em;top:-2em}
.mecha_pagetop a::before{width:60px;-webkit-animation:2s cubic-bezier(.645,.045,.355,1) infinite scroll-anim;animation:2s cubic-bezier(.645,.045,.355,1) infinite scroll-anim}
.mecha_pagetop--fixed{position:fixed;bottom:0}
}
@media only screen and (max-width:640px){
.w980 #module_titleArea #stitle{padding:15px 0}
.w980 #module_titleArea #stitle img{vertical-align:top}
.loading{background-size:100px 100px}
.main{font-size:14px;line-height:1.64;border-top:1px solid #ccc}
.main img:not([width]){max-width:100%;height:auto}
.main .bg_line{background-position:67% 0;background-size:268% auto}
.container{margin:0 25px}
.section__header--vertical{font-size:1.57em}
.section__header--vertical+.section__body>.container{padding-left:55px}
.section__text p+p{margin-top:15px}
.section--bg .section__header--vertical .inner{top:calc(55px - 1em)}
.section--bg .section__bg{width:100%}
.section--bg .section__body{padding:55px 0}
#svg_canvas{display:none}
.buttons__item{width:47.38%}
.buttons__item+.buttons__item{margin-left:5.23%}
.buttons__item:nth-child(n+3){margin-top:20px}
.buttons__item:nth-child(2n+1){margin-left:0}
.button a{padding:30px 10px 20px}
.button__img+.button__name{margin-top:15px}
.button__img+.button__name--s{margin-top:10px}
.button__name--s{font-size:.86em}
.button__icon{top:8px;right:8px}
.button__icon img{width:15px;height:auto}
.rarr .inner{font-size:.86em;padding-right:81px;min-height:25px;line-height:25px}
.rarr .inner::before{right:10px;width:69px}
.rarr .inner::after{width:15px}
.none_sp{display:none}
/*!メカトロナビ*/
.mecha_nav_wrap{padding-top:88px}
.mecha_nav{text-align:center}
.mecha_nav__container{margin:25px -25px 0;padding:18px 0 45px}
.mecha_nav__header{padding-bottom:18px;border-bottom:1px solid #ccc;font-size:1.5em}
.mecha_nav__body{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.mecha_nav--top .mecha_nav__header{padding-bottom:0;border:none}
.mecha_nav--top a{font-size:.86em;padding-left:27px;min-height:40px;line-height:40px}
.mecha_nav--top a::before{left:0;width:17px}
.mecha_nav--top a::after{width:8px}
.mecha_nav--top a .inner{padding-right:10px}
.mecha_nav--magazine{padding-top:18px;border-top:1px solid #ccc}
.mecha_nav--magazine .mecha_nav__body{padding-bottom:50px}
.mecha_nav__item{width:50%}
.mecha_nav__item+li{border-left:1px solid #ccc}
.mecha_nav__item a{padding:35px 30px;font-size:.86em}
.mecha_nav__item .thumb img{height:85px}
.mecha_nav__item .name{margin-top:15px}
.mecha_nav_open{position:fixed;right:20px;bottom:25px;width:52px;height:52px}
.mecha_nav_close{top:25px;right:25px;width:35px;height:35px}
/*!LINKS*/
#section_link{padding:55px 0 60px}
#section_link .section__header--vertical{margin-bottom:35px;text-align:center}
#section_link .section__header--vertical .inner{position:static;-webkit-transform:none;-ms-transform:none;transform:none}
#section_link .section__header--vertical+.section__body>.container{padding-left:0}
#section_link .button__img img{width:auto;height:24px}
/*!INFORMATION*/
#section_info::before{background-size:auto 60%}
#section_info{padding:55px 0 60px}
#section_info .section__header--vertical{margin-bottom:35px;text-align:center}
#section_info .section__header--vertical .inner{position:static;-webkit-transform:none;-ms-transform:none;transform:none}
#section_info .section__header--vertical+.section__body>.container{padding-left:0}
#section_info .button__img img{width:auto;height:40px}
/*!ページトップ*/
.mecha_pagetop{position:fixed;bottom:0}
.mecha_pagetop>.container{margin:0}
.mecha_pagetop a{padding-left:26px;font-size:.86em;top:-98px}
.mecha_pagetop a::before{width:20px;-webkit-animation:2s cubic-bezier(.645,.045,.355,1) infinite scroll-anim-sp;animation:2s cubic-bezier(.645,.045,.355,1) infinite scroll-anim-sp}
}
@-webkit-keyframes scroll-anim{
0%{width:0;left:60px}
50%{width:60px;left:0}
100%{width:0;left:0}
}
@keyframes scroll-anim{
0%{width:0;left:60px}
50%{width:60px;left:0}
100%{width:0;left:0}
}
@-webkit-keyframes scroll-anim-sp{
0%{width:0;left:20px}
50%{width:20px;left:0}
100%{width:0;left:0}
}
@keyframes scroll-anim-sp{
0%{width:0;left:20px}
50%{width:20px;left:0}
100%{width:0;left:0}
}
@-webkit-keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
@-webkit-keyframes slideInUp{
from{-webkit-transform:translate3d(0,80px,0);transform:translate3d(0,80px,0);opacity:0;visibility:visible}
to{-webkit-transform:none;transform:none;opacity:1;visibility:visible}
}
@keyframes slideInUp{
from{-webkit-transform:translate3d(0,80px,0);transform:translate3d(0,80px,0);opacity:0;visibility:visible}
to{-webkit-transform:none;transform:none;opacity:1;visibility:visible}
}
@-webkit-keyframes w100{
0%{width:0%}
100%{width:100%}
}
@keyframes w100{
0%{width:0%}
100%{width:100%}
}
@-webkit-keyframes slide_bg1{
0%{width:0%;left:0}
50%{width:100%;left:0}
100%{width:100%;left:100%}
}
@keyframes slide_bg1{
0%{width:0%;left:0}
50%{width:100%;left:0}
100%{width:100%;left:100%}
}
@-webkit-keyframes slide_bg2{
0%,100%{width:0%;left:100%}
50%{width:100%;left:0}
}
@keyframes slide_bg2{
0%,100%{width:0%;left:100%}
50%{width:100%;left:0}
}
@-webkit-keyframes mask{
0%{top:50%;left:0;width:0%;height:0%}
10%,20%{top:0;left:0;width:.3%;height:100%}
50%{top:0;left:0;width:100%;height:100%}
100%{top:0;left:100%;width:0%;height:100%}
}
@keyframes mask{
0%{top:50%;left:0;width:0%;height:0%}
10%,20%{top:0;left:0;width:.3%;height:100%}
50%{top:0;left:0;width:100%;height:100%}
100%{top:0;left:100%;width:0%;height:100%}
}