@charset "UTF-8";
@font-face {
    font-family: "Jiao-Std-W8";
    src: url("../fonts/ヒラギノ角ゴシック\ W8.ttc");
  }
  @font-face {
    font-family: "Jiao-Std-W6";
    src: url("../fonts/ヒラギノ角ゴシック\ W6.ttc");
  }
  @font-face {
    font-family: "Jiao-Std-W4";
    src: url("../fonts/ヒラギノ角ゴシック\ W4.ttc");
  }

  * {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.5); /* 强制所有浏览器使用相同渲染方式 */
    -webkit-text-stroke: 0.45px transparent; /* 改善Retina屏显示 */
    }
    body { font-family: 'Noto Sans JP'; font-weight: 400;
      -webkit-font-smoothing: antialiased; /* 抗锯齿优化（macOS有效） */
      text-rendering: optimizeLegibility; /* 提升渲染精度 */
    }
  
    @media (-webkit-min-device-pixel-ratio: 2) {
      body {
        font-weight: 300; /* 在高DPI屏幕下使用更细字重 */
      }
    }

.animate__animated.animate__delay-0s{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}
.animate__animated.animate__delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-delay)}
.animate__animated.animate__delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-delay)*2)}
.animate__animated.animate__delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--animate-delay)*3)}
.animate__animated.animate__delay-4s{-webkit-animation-delay:4s;animation-delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-delay:calc(var(--animate-delay)*4)}
.animate__animated.animate__delay-5s{-webkit-animation-delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-delay)*5);animation-delay:calc(var(--animate-delay)*5)}

:root {
  --animate-delay: 0.5s;
}

.only-pc{ display: none;}
.section01{ position: relative; display: block; width: 100%; height: 6.8rem; margin-top: 1rem; background: url(../images/motorcycle/banner-bg.jpg) no-repeat center top; background-size: 100% 100%; overflow: hidden; }
.section01 .txt{ padding: .4rem .3rem;}
.section01 .txt img{ float: left; width: 2.8rem; margin-top: .1rem; margin-right: .15rem;}
.section01 .txt span{ float: left; padding: 0 1em; background: url(../images/motorcycle/banner-txt-bg.png) no-repeat center center; background-size: 100% 100%; 
    font: 700 .24rem/.48rem 'Noto Sans JP'; color: #fff;}
.section01 p{ float: right;  margin-bottom: .3rem;font: 700 italic .24rem/.48rem 'Noto Sans JP'; color: #fff; text-align: right;}
.section01 h1{ font: 900 italic .76rem/1rem 'Jiao-Std-W6'; color: rgba(255,255,255); text-align: center; letter-spacing: .1rem; z-index: 1;}
.section01 .h1{ display: none;}

.section01 .img01{ position: absolute; left: -10%; bottom: 0; width: 68%; z-index: 2;}
.section01 .img02{ position: absolute; right: -10%; bottom: .4rem; width: 66%; z-index: 2;}


.section02{ padding-top: .4rem;}
.section02 .img-logo{ display: block; width: 4.8rem; margin: 0 auto .4rem;}
.section02 .wrap01{ position: relative; padding-top: .4rem; background-image: linear-gradient(90deg, #d3d7d6,#dce1df);}



.section02  h2{ font: 500 .36rem/.9rem 'Noto Sans JP'; color: #000; text-align: center; background-image: linear-gradient(90deg, #d3d7d6,#dce1df); }
.section02  h2 a{ color: #000;}
.section02  h2 span{ font: 600 .36rem/.9rem 'Jost';}

.section02 .tag{ position: absolute; top: 1.2rem; left: .6rem; color: #dce1df; font: 800 1.8rem/1.8rem 'Jost';}
.section02 .X600{ width: 100%; padding-bottom: 1rem;}
.section02 .X600 img{ display: block; width: 100%;}

.swiper-pagination .swiper-pagination-bullet{ position: relative; width: .32rem; height: .32rem; margin-right: .26rem !important; opacity: 1; z-index: 3;}
.swiper-pagination .swiper-pagination-bullet:nth-child(1){ background-color: #485048;}
.swiper-pagination .swiper-pagination-bullet:nth-child(2){ background-color: #fff;}
.swiper-pagination .swiper-pagination-bullet:nth-child(3){ background-color: #000;}
.swiper-pagination .swiper-pagination-bullet-active{ 
   /* outline: 2px solid #fff;outline-offset: 3px; */
   box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333;
   z-index: 2;
}

.section02 .txt{ padding: .4rem .6rem;}
.section02 h3{ font: 500 .26rem/.6rem 'Noto Sans JP'; color: #000;}
.section02 h3 b{ font-weight: 700; font-size: .3rem;}
.section02 h3 strong{ font: 600 .9rem/.6rem 'Jost';}
.section02 h3 span{ display: block; font-weight: 900; font-size: .36rem;}
.section02 ul{ display: flex; flex-wrap: wrap; width:100%; margin: .4rem 0;}
.section02 ul li{ width: 48%; margin-right: 4%; margin-bottom: .3rem;}
.section02 ul li:nth-child(2n){ margin-right: 0;}
.section02 ul li img{ display: block; height: .68rem; width: auto; transition: all .5s;}
.section02 ul li p{ font-size: .26rem; line-height: .6rem;}

.section02 .btnbox{ display: flex; margin-bottom: .6rem;}
.section02 .btnbox a{ position: relative; width: 48%; margin-right: 4%; height: .6rem; border-radius: .6rem; background-color: #000; margin-right: .2rem; font-size: .28rem; line-height: .6rem; color: #fff; text-align: center;}
.section02 .btnbox a::after{ content: ''; position: absolute; right: .1rem; top: .1rem; width: .4rem; height: .4rem; border-radius: 50%; background: #485048 url(../images/motorcycle/icon13.png) no-repeat center center; background-size: 100% 100%;}
.section02 .btnbox .btn-store{ background-color: #6d6f6e; margin-right: 0;}
.section02 .btnbox .btn-store::after{ background-image: url(../images/motorcycle/icon14.png);}



.section02 .wrap02{ position: relative; background-color: #f5f5f5;}
.section02 .wrap02 h2{ background: #f5f5f5;}
.section02 .wrap02 .tag{ left: 2rem; color: #fff; transform: skewY(-3deg);}

.section02 .wrap02 .btnbox a::after{ background-color: #851200;}
.section02 .X500 {padding-bottom: 1rem;}
.section02 .X500 img{ display: block; width: 100%;}
.section02 .X500 .swiper-pagination .swiper-pagination-bullet:nth-child(1){ background-color: #fff;}
.section02 .X500 .swiper-pagination .swiper-pagination-bullet:nth-child(2){ background-color: #851200;}
.section02 .X500 .swiper-pagination .swiper-pagination-bullet:nth-child(3){ background-color: #000;}

.section03{ display: flex; flex-wrap: wrap; padding-top: .6rem; background:#000 url(../images/motorcycle/sec-bg.jpg) no-repeat center top; background-size: 100% auto; }
.section03 .text-en{ width: 100%; font: 700 .28rem/.6rem 'Jiao-Std-W6'; text-align: center;}
.section03 h2{ width: 100%; margin-bottom: .6rem; font: 900 .48rem/1rem 'Noto Sans JP'; color: #000; text-align: center; letter-spacing: .05rem;}
.section03 h2 span{ color: #767676; font-style: italic;}
.section03 .img{ width: 100%; z-index: 3;}
.section03 .txt{ width: 80%; margin-left: 10%; padding: .6rem; background: url(../images/motorcycle/txt-bg03.png) no-repeat center top; background-size: 100% auto; box-sizing: border-box;}
.section03 .txt p{ padding-left: .5rem; background: url(../images/motorcycle/icon15.png) no-repeat left center; background-size: .32rem auto; font: 700 .28rem/.8rem 'Noto Sans JP'; color: #fff;}

.section03 .intro{ width: 100%; padding: .3rem; margin-bottom: .6rem; font-size: .26rem; line-height: .52rem; color: #fff; text-align: center;}


.pup-up{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none;}
.pup-up .cont{ position: absolute; left: 50%; top: 50%; width: 80%; padding: .5rem .3rem; transform: translate(-50%,-50%); background-color: #fff; text-align: center; }
.pup-up .cont h3{  margin-bottom: 1em; font-size: .32rem; line-height: .52rem; }
.pup-up .cont p{ font-size: .26rem; line-height: 2em; }
.pup-up .cont span{ position: absolute; right: .1rem; top: .1rem; width: .4rem; height: .4rem; border-radius: 50%; background-color: #000; font-size: .28rem; line-height: .4rem; color: #fff; cursor: pointer;}