@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-m{ display: none;}

#motorcycle .indexNavMain{ position: relative;}
.section01{ position: relative; display: block; width: 100%; height: 43vw; background: url(../images/motorcycle/banner-bg.jpg) no-repeat center top; background-size: 100% 100%; overflow: hidden; }
.section01 .txt{ width: 75.2vw; padding-top: 5vw; margin: 0 auto;}
.section01 .txt img{ float: left; width: 16.6vw; margin-left: 2.08vw; margin-right: 1vw;}
.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 1.04vw/2.18vw 'Noto Sans JP'; color: #fff; letter-spacing: .1vw;}
.section01 p{ float: right; margin-right: 2vw; font: 700 italic .9375vw/1.56vw 'Noto Sans JP'; color: #fff; text-align: right;letter-spacing: .1vw;}
.section01 h1,.section01 .h1{ font: 900 italic 7.4vw/9.6vw 'Jiao-Std-W8'; color: rgba(255,255,255); text-align: center; letter-spacing: 1.7vw; z-index: 1;}
.section01 .h1{ position: absolute; left: 0; top: 8.2vw; width: 100%; height: 9.6vw; opacity: 0.46; z-index: 3;}

.section01 .img01{ position: absolute; left: 0; bottom: -1vw; width: 57vw; z-index: 2;}
.section01 .img02{ position: absolute; right: 0; bottom: 3.4vw; width: 51.1vw; z-index: 2;}


.section02{ padding-top: 3vw;}
.section02 .img-logo{ display: block; width: 25vw; margin: 0 auto 2.6vw;}
.section02 .wrap01{ position: relative; background-image: linear-gradient(90deg, #d3d7d6,#dce1df);}
.section02 .title{ margin-bottom: .26vw;}
.section02 .title h2{ font: 500 1.56vw/4.68vw 'Noto Sans JP'; color: #000; letter-spacing: .2vw; box-sizing: border-box; }
.section02 .title h2 span{ font: 600 1.56vw/4.68vw 'Jost';}
.section02 .title h2:nth-child(1){ float: left; width: 50.57%; height: 4.68vw; padding-right: 10.9vw; background: url(../images/motorcycle/txt-bg01.png) no-repeat left top; background-size: 100% 100%; text-align: right; }
.section02 .title h2:nth-child(2){ float: right; width: 51.25%; height: 4.68vw; padding-left: 10vw; margin-left: -2%;  background: url(../images/motorcycle/txt-bg02.png) no-repeat right top; background-size: 100% 100%;}
.section02 .title h2 a{ color: #000;}
.section02 .tag{ position: absolute; top: 15.4vw; left: 6vw; color: #dce1df; font: 800 15.4vw/11.5vw 'Jost';}
.section02 .X600{ float: left; width: 42.76vw; padding-bottom: 3vw;  margin-top: 12.24vw; margin-left: 9.6vw;}
.section02 .X600 img{ display: block; width: 100%;}

.swiper-pagination .swiper-pagination-bullet{ position: relative; width: 1.66vw; height: 1.66vw;  border: 1px solid #dadada; margin-right: 1.14vw !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{ 
   border: none;
   box-shadow: 0 0 0 .208vw #fff, 0 0 0 .26vw #333;
   z-index: 2;
}

.section02 .txt{ float: left; margin-top: 5.2vw; margin-left: 3.5vw;}
.section02 h3{ font: 500 1.04vw/3.125vw 'Noto Sans JP'; color: #000; letter-spacing: .15vw;}
.section02 h3 b{ font-weight: 700; font-size: 1.56vw;}
.section02 h3 strong{ font: 600 4.68vw/3.125vw 'Jost';}
.section02 h3 span{ display: block; font-weight: 900; font-size: 1.875vw;}
.section02 ul{ display: flex; flex-wrap: wrap; width: 30vw; margin: 2.08vw 0 4.3vw;}
.section02 ul li{ width: 13.6vw; margin-bottom: .625vw;}
.section02 ul li img{ display: block; height: 3.54vw; width: auto; transition: all .5s;}
.section02 ul li p{ font-size: .9375vw; line-height: 2.4vw; letter-spacing: .1vw;}
.section02 ul li:hover img{ transform: scale(1.08);}

.section02 .btnbox{ display: flex; margin-bottom: 8.33vw;}
.section02 .btnbox a{ position: relative; width: 11.66vw; padding-left: 1.5vw; height: 2.86vw; border-radius: 2.86vw; background-color: #000; margin-right: .4vw; font-size: .9375vw; line-height: 2.86vw; color: #fff; letter-spacing: .1vw; box-sizing: border-box;  transition: all .5s; }
.section02 .btnbox a::after{ content: ''; position: absolute; right: .36vw; top: .36vw; width: 2.08vw; height: 2.08vw; 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;}
.section02 .btnbox .btn-store::after{ background-image: url(../images/motorcycle/icon14.png);}
.section02 .btnbox a:hover{ transform:translateY(-5px);}


.section02 .wrap02{ position: relative; background-color: #f5f5f5;}
.section02 .wrap02 .tag{ left: 47.8vw; top: 10.04vw; color: #fff; transform: skewY(-5deg);}
.section02 .wrap02 .txt{ margin-left: 14.8%; margin-right: -10vw; margin-top: 4.68vw;}
.section02 .wrap02 h3{ margin-left: 1.8vw;}
.section02 .wrap02 ul{ margin-left: 1.875vw; margin-bottom: 2vw;}
.section02 .wrap02 ul li{ margin-bottom: 1.2vw;}
.section02 .wrap02 ul li img{ height: 3.125vw; margin-bottom: .6vw;}
.section02 .wrap02 ul li p{ line-height: 1.3vw;}
.section02 .wrap02 .btnbox a::after{ background-color: #851200;}
.section02 .X500{ float: right; width: 60.3%; padding-bottom: 5vw; margin-top: 2.6vw;}
.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: 7vw; background: url(../images/motorcycle/sec-bg.jpg) no-repeat center top; background-size: 100% auto; }
.section03 .text-en{ width: 100%; font: 700 .9375vw/3.125vw 'Jiao-Std-W8'; text-align: center; letter-spacing: .2vw;}
.section03 h2{ width: 100%; margin-bottom: 3.9vw; font: 900 3.75vw/5vw 'Noto Sans JP'; color: #000; text-align: center;  letter-spacing: .5vw;}
.section03 h2 span{ color: #767676; font-style: italic;}
.section03 .img{ width: 62.18vw; z-index: 3;}
.section03 .txt{ width: 40.1vw; height: 40vw; padding: 5.2vw 0 0 8.3vw; margin-left: -10vw; background: url(../images/motorcycle/txt-bg03.png) no-repeat center top; background-size: 100% auto; box-sizing: border-box;}
.section03 .txt p{ padding-left: 2.6vw; background: url(../images/motorcycle/icon15.png) no-repeat left center; background-size: 1.61vw auto; font: 700 1.875vw/3.64vw 'Noto Sans JP'; color: #fff;  letter-spacing: .4vw;}

.section03 .intro{ width: 100%; margin-bottom: 6vw; font-size: .9375vw; line-height: 1.3vw; color: #fff; text-align: center;letter-spacing: .2vw;}


.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: 50vw; padding: 3vw; transform: translate(-50%,-50%); background-color: #fff; text-align: center; }
.pup-up .cont h3{  margin-bottom: 1em; font-size: 1.25vw; line-height: 3em; }
.pup-up .cont p{ font-size: 1.04vw; line-height: 2em; }
.pup-up .cont span{ position: absolute; right: 1vw; top: 1vw; width: 2vw; height: 2vw; border-radius: 50%; background-color: #000; font-size: 1.25vw; line-height: 2vw; color: #fff; cursor: pointer;}