@charset "Shift_JIS";
body { margin:0; padding:0; font:15px/26px wf_segoe-ui_normal, 'Segoe UI', Arial, Meiryo, Tahoma, sans-serif; color:#333; }
.clear { clear:both;}
.details {width:1090px; padding:0 5px; margin:0 auto;}
img{ vertical-align:middle; border:0;}
h1, h2, h3, h4, h5, p, h6, ul, li, ol, dd, dl, dt, input { padding:0; margin:0; list-style:none; font-weight:400;}
a{color: inherit;text-decoration: none;}
.detail{width: 1200px;margin: 0 auto;}

.header-nav{
    background: #ffffff;position: relative; color: #333333;z-index: 1000;height: 70px;position: fixed;top:0;left: 0;right: 0;border-bottom: 1px solid #e0e0e0;
}
.header-nav .detail{
    width: 1200px;margin: 0 auto;
}
.header-nav .logo{
    float: left;display: flex;height: 70px;justify-content: center;align-items: center;
}
.header-nav .shop-car{float: right;width: 75px;}
.header-nav .shop-car a{display: block;padding: 0 25px;height: 70px;line-height: 70px;position: relative;}
.header-nav .shop-car a img{position: absolute;top:50%;left: 25px;transform: translateY(-50%);}
.header-nav .shop-car a img:nth-of-type(2){display: none;}
.header-nav .shop-car:hover img:nth-of-type(1){display: none;}
.header-nav .shop-car:hover img:nth-of-type(2){display: block;}

.header-nav .nav-list{
    float: right;
}
.header-nav .nav-list>li{
    float: left;font-size: 16px;
}
.header-nav .nav-list>li>a{
    color: inherit;display: block;padding: 0 25px;height: 70px;line-height: 70px;position: relative;font-weight: 600;
}
.header-nav .nav-list>li>a img{
    position: absolute;top:5px;z-index: 1000;
}
.header-nav .nav-list>li.active>a{
    color: #ffa600;
}


.header-nav .menus{
    position: absolute;left: 0;right: 0;z-index: 1000;background: #ffffff;padding: 35px 0 10px;box-sizing: border-box;top:71px;display: none;border-bottom: 1px solid #e0e0e0;
}
/* 下拉菜单左边 */
.header-nav .menus .menu-left{
    width: 400px;float: left;height: 100%;padding: 40px 0 40px 70px;box-sizing: border-box;border-right:1px solid #e8e8e8;
}
.header-nav .menus .menu-left h2{
    font-size: 30px;font-weight: 510;padding: 0;text-align: left;
}
.header-nav .menus .menu-left h4{
    font-size: 18px;color: #333;opacity: .6;font-weight: 400;margin-top: 5px;
}
.header-nav .menus .menu-left p{
    font-size: 16px;line-height: 24px;padding: 20px 0 40px;
}


/* 下拉菜单右边 */
.header-nav .menus .menu-right{
    padding: 0 35px;display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;text-align: center;min-height: 280px;
}
.header-nav .menus .menu-right li{
    box-sizing: border-box;width: 50%;transition: opacity .6s;
}
.header-nav .menus .menu-right li a{
    display: block;padding: 0 40px;border-right: 1px solid #e8e8e8;color: #333;
}
.header-nav .menus .menu-right li:hover{
    opacity: 0.7;
}
.header-nav .menus .menu-right li:hover a{
    color: #ff9d00;
}
.header-nav .menus .menu-right li:nth-of-type(3)::before{
    display: block;content: "";height: 1px;border-top:1px solid #e8e8e8;width: 200%;
}
.header-nav .menus .menu-right li:nth-of-type(3) a{
    padding-top:15px;
}
.header-nav .menus .menu-right li:nth-of-type(4) a{
    padding-top:15px;
}
.header-nav .menus .menu-right li:nth-of-type(even) a{
    border-right: none;
}

.header-nav .menus .menu-right li .product{
    background: url("../nav-jp/more-gray.png")no-repeat right center;padding: 5px 0;
}
.header-nav .menus .menu-right li:hover .product{
    background: url("../nav-jp/more.png")no-repeat right center;animation:myfirstani .8s;
}
@keyframes myfirstani
{
    from {background-position: 230px center;}
    to {background-position: right center;}
}
/* 下拉菜单最底栏 */
.header-nav .menus .more{text-align: right;padding-right: 75px;}
.header-nav .menus .more a{color: #666666;}
.header-nav .menus .more a:hover{color: #ff9d00;}
/* 下拉菜单的按钮效果 */
@keyframes explode {
    0% {
      width: 0px;
      height: 0px;
      margin-left: 0px;
      margin-top: 0px;
      background-color: #fff;
    }
    100% {
      width: 800px;
      height: 800px;
      margin-left: -400px;
      margin-top: -400px;
      background-color: #ffa600;
    }
  }
  
  @keyframes desplode {
    0% {
        width: 800px;
        height: 800px;
        margin-left: -400px;
        margin-top: -400px;
      background-color: #ffa600;
    }
    100% {
      width: 0px;
      height: 0px;
      margin-left: 0px;
      margin-top: 0px;
      background-color: #fff;
    }
  }
  
  .button_su{
      overflow: hidden;position: relative;display: inline-block;width: 200px;height: 50px;border-radius: 5px;
  }
  .su_button_circle{
     border-radius: 1000px; position: absolute; left:0;top:0;width: 0px;height: 0px;margin-left: 0px;margin-top: 0px;pointer-events: none; animation-timing-function: ease-in-out;
  }
  .button_su_inner{
      display: inline-block;font-size: 16px;font-weight: normal;text-align: center;transition: 400ms;text-decoration: none;z-index: 100000;text-align: center;color: inherit;width: 100%;height: 50px;line-height: 50px;background: #fff;border: 1px solid #ff9d00;cursor: pointer;border-radius: 5px;color: #ff9d00;
  }
  .button_su_inner>a{
      display: inline-block;height: 100%;width: 100%;
  }
  .button_su_inner>a:hover{
      color: #fff;
  }
  .button_text_container{
      position:relative;z-index: 300;
  }

  .origin{ color: #fff;}

  .explode-circle {
      animation: explode 0.8s forwards;
      background: #ff9d00;color: #fff;
  }
  .desplode-circle{
      animation: desplode 0.8s forwards;
  }


/* 移动端导航 */
.mobile-nav{display: none;background: #fff;position: fixed;top:0;left: 0;right: 0;z-index: 1000;user-select: none;}
.mobile-nav .detail{position: relative;border-bottom:1px solid #e6e6e6;}

.humbgr { width: 70px;height: 70px;border: none;background-color: #fff;align-items: center;outline: none;cursor: pointer;display: block;border-right: 1px solid #e6e6e6;position: absolute;top: 0;left: 0;text-align: center;}
.humbgr .bars {width: 21px; height: 15px; margin-left: auto; margin-right: auto; position: relative; display: inline-block; transition: all .4s; margin-top: 20px; }
.humbgr .bars span {background-color: #f4810a;height: 3px;width: 21px;position: absolute;left: 0;transition: all .4s; }
.humbgr .bars span:nth-of-type(1) {top: 0; }
.humbgr .bars span:nth-of-type(2) {top: 6px; }
.humbgr .bars span:nth-of-type(3) {bottom: 0px; }
.humbgr .bars::after {display: inline-block;content: "MENU"; position: absolute; left: 0; bottom: -25px; font-size: 12px; color: #787878; margin-left: -0.5em; }


.nav-change::after {content: "";width: 0;height: 0;border-style: solid;border-width: 7px 7.5px 0 7.5px;border-color: #ffffff transparent transparent transparent;position: absolute;bottom: -7px;left: 25px; z-index: 1001;}
.nav-change .bars::after {content: "CLOSE";margin-left: -0.7em; }
.nav-change .bars span:nth-of-type(1) {-webkit-transform: translateY(6px) rotate(-45deg);transform: translateY(6px) rotate(-45deg); }
.nav-change .bars span:nth-of-type(2) {left: 50%;opacity: 0;-webkit-animation: active-menu-bar02 .8s forwards;animation: active-menu-bar02 .8s forwards; }
@-webkit-keyframes active-menu-bar02 { 
    100% {height: 0; }
 }

@keyframes active-menu-bar02 { 
    100% { height: 0; }
 }
.nav-change .bars span:nth-of-type(3) {-webkit-transform: translateY(-6px) rotate(45deg);transform: translateY(-6px) rotate(45deg); }

.nav-logo{margin-left: 70px;display: flex;height: 70px;justify-content: center;align-items: center;}

.nav-menu{background: #c0c0c0;height: auto;padding: 15px;box-sizing: border-box;display: none;}
.nav-menu ul{background: #fff;border-radius: 8px;}
.nav-menu ol{display: none;}
.nav-menu ul>li{padding: 18px 20px;position: relative; border-bottom: 1px solid #cccccc}
.nav-menu ul>li img{vertical-align: middle;margin-left: 15px;}
.nav-menu ul>li.nav-active::after{content: "";display: inline-block;width: 12px;height: 12px;background: url(../nav-jp/icon_minus.png) center center no-repeat;background-size: 12px 12px;position: absolute;right: 35px;top: 50%;margin-top: -6px; }
.nav-menu ul>li::after {content: "";display: inline-block;width: 12px;height: 12px;background: url(../nav-jp/icon_plus.png) center center no-repeat;background-size: 12px 12px;position: absolute;right: 35px;top: 50%;margin-top: -6px; }
.nav-menu ol>li a{display: block;padding: 14px 20px;position: relative;background: #f4810a;color: #fff;border-bottom: 1px solid #f7b068;font-weight: 600;}
.nav-menu ol>li a::after {display: block;content: "";background: url(../nav-jp/icon_arw_wht.png) center center no-repeat;background-size: 8px auto;width: 8px;height: 14px;position: absolute;right: 35px;top: 20px; } 

@media screen and (max-width: 979px) {
    .detail{width: 100%;padding: 0 15px;box-sizing: border-box;}
	.header-nav{display: none;}
    .mobile-nav{display: block;}
    .nav-menu{padding: 15px !important;}
}

@media screen and (max-width: 767px) {
	
	
}

@media screen and (max-width: 479px) {
	body { margin:0; padding:0; font:13px/23px wf_segoe-ui_normal, 'Segoe UI', Arial, Meiryo, Tahoma, sans-serif; color:#333; text-align:justify; }
	
}


/* 底栏 */
.MainFoot{background: #fff;padding: 50px 0 30px;text-align: left;color: #41444d;font-size: 14px;}
.MainFoot .details{width: 1080px;margin: auto;}
.MainFoot .foot-logo span{color: #f07d0c;font-size: 18px;margin-left: 15px;height:50px; border-left:2px solid #f07d0c;padding:0 10px;position: relative;top:5px;}
.MainFoot .foot-list{padding: 50px 0;border-bottom: 1px solid #ddd;}
.MainFoot .foot-list h5{font-size: 19px;color: #f07d0c;padding-bottom: 30px;}
.MainFoot .foot-list ul{width: 30%;float: left;}
.MainFoot .foot-list ul:nth-of-type(2){margin: 0 5%;}
.MainFoot .foot-list ul li{margin-bottom: 24px;}
.MainFoot .foot-list ul li a{color: #0B1938;display: block;position: relative;display: block;background: url("../img/next.png")no-repeat right center;background-size: 17px;background-position-x: 280px;transition: background-position-x .5s ease;}
.MainFoot .foot-list ul li a:hover{color: #f08618;background-position-x: 311px;}
.MainFoot .website-records{text-align: center;padding-top: 20px;}
.MainFoot .website-records p{padding: 5px 0;font-size: 13px;line-height:1.5;}
.MainFoot .website-records a:hover{color: #f07d0c}
.MainFoot .website-records p:nth-of-type(1){font-size: 15px;}
.MainFoot .share{float: left;}
.MainFoot .share a{margin-right:15px;}

@media screen and (max-width: 979px){
    .details{width: 100%;padding: 0 15px;box-sizing: border-box;}
    .MainFoot{padding: 30px 0;font-size: 15px;}
    .MainFoot .detail{width: 100%;padding: 0 15px;box-sizing: border-box;}
    .MainFoot .foot-list{padding: 30px 0;}
    .MainFoot .foot-list ul{min-width: 324px;}
}
@media screen and (max-width: 767px){
    .MainFoot{padding: 30px 0;font-size: 13px;}
    .MainFoot .foot-logo{text-align: center;}
    .MainFoot .foot-list{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;border-bottom: none;}
    .MainFoot .foot-list h5{padding-bottom: 15px;}
    .MainFoot .foot-list ul{width: 100%;float: none;}
    .MainFoot .foot-list ul:nth-of-type(2){margin: 0;}
    .MainFoot .foot-list ul li{padding: 5px 0;border-bottom:1px solid #d0d0d0;}
    .MainFoot .foot-list ul li a{padding: 5px 0 20px;}
    .MainFoot .foot-list ul li a{color: #0B1938;display: block;position: relative;display: block;background: url("../img/next.png")no-repeat right center;background-size: 17px;background-position-x: 100%;transition:none;}
    .MainFoot .foot-list ul li a:hover{color: #f08618;background-position-x: 100%;}
    .MainFoot .website-records{padding-top: 15px;}
    .MainFoot .website-records p:nth-of-type(1){font-size: 13px;}
}
@media screen and (max-width: 479px){
    body { margin:0; padding:0; font:13px/23px wf_segoe-ui_normal, 'Segoe UI', Arial, Meiryo, Tahoma, sans-serif; color:#333; text-align:justify; }
}