@charset "utf-8";

/* フォント */
.catalog-list .catalog-commodityName,
.section-ranking .catalog-list .badge,
.section-parts .inward_area h2{
  font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
}
.catalog-list .catalog-price {
  font-family: franklin-gothic-atf, sans-serif;
}

/* section レイアウト */
.section-ranking,
.section-viewHistory,
.section-topCategory,
.section-newArrival,
.section-ridingItem,
.section-seasonalItem,
.section-saleItem,
.section-coordinate,
.section-banner{
  width: 100%;
  height: auto;
  padding-top:50px;
  padding-bottom: 50px;
  border:1px solid transparent;
}
.section-topCategory,
.section-saleItem{
  background: #eee;
  overflow: hidden;
}

.section-saleItem{
  display: none !important;
}


/* タイトル */
.top-title {
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: var(--black);
  font-size: 46px !important;
  line-height: 1.25;
  margin: 0 auto 40px !important;
  text-align: center;
}
.top-title span {
  color: #fa6600;
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
}
.section-saleItem .top-title{
  color: #e91014;
}
.section-saleItem .top-title span{
  color:var(--black);
}

/* カタログ商品 */
/* カラム */
.section-ranking .catalog-list,
.section-newArrival .catalog-list,
.section-saleItem .catalog-list{
  margin:0 auto;
  width:1024px;
}
/* 共通 */
.catalog-list > li {
  position:relative;
  width:  calc((100% - 60px) / 4) !important;
  margin-bottom:30px!important;
}
.catalog-list {
  display: flex;
  justify-content: flex-start !important;
  gap:20px;
  position: relative;
  flex-wrap:wrap;
}
.catalog-list .-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.catalog-list > li a {
  display: block;
  position: relative;
}
.catalog-list .catalog-imgContainer,
.catalog-list .catalog-imgContainer:before{
  aspect-ratio: 8 / 7;
  height:unset !important;
}
.catalog-list .catalog-imgContainer{
  position:relative;  
  display:flex;
  padding:0;
}
.catalog-list .catalog-imgContainer:before{
  position:absolute;
  content: "";
  display: block;
  width: 100%;
  background-color: #000;
  opacity: .03;
}
.catalog-list .catalog-imgContainer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: unset;
  transform: none;
}
.catalog-list > li.-square .catalog-imgContainer img {
  object-fit: contain;
}
.catalog-list > li:hover{
  opacity:.7 !important;
}
/* 文字組み */
.catalog-list .catalog-content {
  text-align: left;
  padding: 12px 5px 0;
  position: relative;
}
.catalog-list .catalog-content > * {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行まで表示 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space:normal;
}
.catalog-list .catalog-brandName {
  color: var(--black);
  font-size: 12px;
  font-weight: bold;
  line-height: 17px;
  display: none !important;
}
.catalog-list .catalog-commodityName {
  color: var(--black);
  width: 100%;
  font-size: 14px;
  font-weight:800;
  line-height:1.6;
  margin-bottom:.2em;
}
.catalog-list .catalog-price {
  color: var(--black);
  font-size: 16px;
  line-height: 23px;
}
.catalog-list .catalog-price.-discount {
  color: var(--sale);
}
.catalog-list .catalog-campaignItem span {
  padding: 0 .3em;
  transform: unset;
  letter-spacing: -.02em;
}

/* .top-hero */
.top-hero {
  background: #000;
  position: relative;
  margin-bottom: 60px !important;
}
.top-hero .swiper-wrapper {
  width: auto !important;
  height: 640px;
  margin: 0 auto;
}
.top-hero li.swiper-slide {
  width: 100% !important;
height: 540px;
margin: 50px auto;
background: #000;
}
.top-hero .swiper-wrapper a {
  max-width: 1280px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 auto;
}
.top-hero .main_text {
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 62px !important;
  margin-bottom: 20px;
  text-align: left;
  line-height: 1em;
  padding: 0.5em;
}
.top-hero .main_text span {
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 16px !important;
  line-height: 1em;
}
.top-hero .hero-text {
  width: calc(100% - 40%) !important;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  align-self: center;
  align-items: start !important;
}
.top-hero .hero-visual01 {
  width: 100% !important;
  height: 540px !important;
  overflow: hidden;
  background-size: cover !important;
  background: url(https://qamedia.aws.locondo.jp/harleydavidsonqastatic/common/img/kv_03.png)
    no-repeat;
}
.top-hero .hero-visual02 {
  width: 100% !important;
  height: 540px !important;
  overflow: hidden;
  background-size: cover !important;
  background: url(https://qamedia.aws.locondo.jp/harleydavidsonqastatic/common/img/kv_04.png)
    no-repeat;
}
.top-hero .hero-visual03 {
  width: 100% !important;
  height: 540px !important;
  overflow: hidden;
  background-size: cover !important;
  background: url(https://qamedia.aws.locondo.jp/harleydavidsonqastatic/common/img/kv_05.png)
    no-repeat;
}

/*　　genderTab　　*/
.topNav{
  width: 100%;
  height: auto;
  border-bottom: solid #000 3px;
  width: 1280px;
  width: 1024px;
  height: auto;
  border-bottom: solid #d5d5d5 2px;
  margin: 0 auto;
}
.genderTab{
  width: 1024px;
  height: 70px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 0 auto;
}
.genderTab > li {
  width: 28%;
  height: 100%;
  text-align: center;
  align-content:center;
}
.genderTab > li{
  font-size: 34px;
  font-weight: 900;
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif !important;
  color: #BBB;
  border: 2px solid transparent;
  border-bottom:none;
  cursor: pointer;
  transform:translateY(2px);
}
.genderTab > li.active{
  color: var(--black);
  border-top-color: #d5d5d5;
  border-left-color: #d5d5d5;
  border-right-color: #d5d5d5;
  background-color:#fff;
}

/* .section-newArrival */
.section-newArrival .catalog-list li:nth-child(n + 5){
  display: none !important;
}

/* .section-ranking */
/* フェイドイン */
.section-ranking .catalog-list{
  opacity:0;
  transition: opacity .2s ease-in-out;
}
.section-ranking .-load .catalog-list{
  opacity:1;
}
.section-ranking .note_zeroItem{
  margin:3em;
  text-align:center;
  font-size:13px;
  color:var(--text);
}
.section-ranking .catalog-list > li:nth-child(n + 9){
  display:none;
}
.section-ranking.-isAll .catalog-list > li:nth-child(n + 9){
  display:block;
}
.section-ranking.-isAll .catalog-list > li:nth-child(n + 33){
  display:none;
}
/* more-btn (さらに表示、ランキングページへ遷移) の表示 */
/* デフォルト表示 */
/* : 「ランキングページへ遷移」消す */
/* : 「さらに表示」(ランキング数が8以下の時) 消す */
/* : 「さらに表示」(ランキング数が9-32の時) 表示 */
.section-ranking #ranking-isAll-btn {
  display:block;
}
.section-ranking .-toRankingPage,
.section-ranking[data-count="less-than-8"] #ranking-isAll-btn {
  display:none;
}
/* 全表示(-isAll) */
/* : 「ランキングページへ遷移」 (ランキング数が32以下の時)消す */
/* : 「ランキングページへ遷移」 (ランキング数が33以上の時)表示 */
/* :「さらに表示」消す */
.section-ranking.-isAll[data-count="range-9-32"] .-toRankingPage,
.section-ranking.-isAll #ranking-isAll-btn{
  display:none;
}
.section-ranking.-isAll[data-count="more-than-32"] .-toRankingPage{
  display:block;
}

/* seasonalItem, ridingItem */
.section-ridingItem ul,
.section-seasonalItem ul{
  display:flex;
  width:1024px;
  margin:0 auto;
  gap:20px;
}
.section-ridingItem li,
.section-seasonalItem li{
  width:calc((100% - 60px) / 3)
}
.section-ridingItem p,
.section-seasonalItem p{
  text-align:center;
  font-size:15px;
  font-weight:800; 
  color:var(--black);
}
.section-ridingItem li:hover,
.section-seasonalItem li:hover{
  opacity: .7;
}

/* .section-viewHistory */
.section-viewHistory ul{
  margin:0 auto;
  width:1024px;
  gap:10px;
}
.section-viewHistory li{
  width: calc((100% - 90px) / 10) !important;
  margin-bottom:0 !important;
}
/* 文字組み */
.section-viewHistory :is(
  .badge,
  .catalog-campaignGroup,
  .catalog-content
) {
  display:none;
}
.section-viewHistory img{
  font-size:0;
}

/* section-saleItem */
.section-saleItem .fail{
  text-align:center;
  color:#999;
}
.section-saleItem.-noResult{
  display:none;
}

/* .section-banner */
.section-banner ul {
  width: 1024px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 0 auto;
  flex-wrap: nowrap;
}
.section-banner ul li {
  width:33%;
  height: auto;
}
.section-banner ul li img {
  width:100%;
  height: auto;
  display: block;
}
.section-banner li:hover{
  opacity: .7;
}

/* .section-parts */
.section-parts{
  margin-bottom:60px;
}
.section-parts .parts_accessories_inner {
  background: url(https://media.aws.locondo.jp/harleydavidsonstatic/common/img/bg_parts_pc.jpg) no-repeat;
  background-size: cover;
  position: relative;
  margin:0 auto;
  width: 1024px;
  height:380px;
  display:flex;
  align-items:center;
}
.section-parts .inward_area{
  padding:50px;
  width:100%;
  height:100%;
  position:relative;
}
.section-parts .inward_area h2{
  font-size: 56px;
  font-weight: 900;
  color: #FFF;
}
.section-parts .inward_area h2 > span{
  display:inline-block;
  font-size: 16px;
}
.section-parts .item_link{
  position:absolute;
  bottom:50px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  width:340px;
  height: 60px;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.2);
  color: #FFF;
  border: solid #FFF 1px;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.section-parts .item_link::after {
  content: '\e5e1';
  font-family: "Material Symbols Outlined";
  display: block;
  font-size: 16px;
  position:absolute;
  right:10px;
}
.section-parts .item_link:hover{
  background-color:var(--color);
  border-color:transparent;
}

/* .section-coordinate */
.section-coordinate ul{
  display:flex;
  margin:0 auto;
  width:1024px;
  gap: 20px;
}
.section-coordinate li{
  width:calc((100% - 30px) / 4);
  margin-bottom:20px;
}
.section-coordinate .coordinate__catalog-thumb{
  margin-bottom:12px;
  aspect-ratio:5 / 7;
  object-fit:cover;
}
.section-coordinate .coordinate__catalog__textwrap{
  padding:0;
}
.section-coordinate .coordinate__catalog__title{
  font-size:15px;
  font-weight:800;
  line-height: 1.6;
  margin-bottom:.5em;
}
.section-coordinate .coordinate__catalog__subtitle{
  display:none;
}
.section-coordinate .coordinate__catalog__date{
  color:var(--text-pale);
}
.section-coordinate li:hover{
  opacity:.7;
}

/* .section-topCategory */
.section-topCategory #top_topCategory{
  position:relative;
}
.section-topCategory .swiper_top_topCategory {
  overflow: visible;
  width: 1024px;
  margin: 0 auto;
}
.section-topCategory .swiper-slide:not(.swiper-slide-visible){
  pointer-events:none;
}
.section-topCategory .slide {
  padding:10px 0;
  border-radius: 4px;
  background-color:#fff;
}
.section-topCategory .slide:hover{
  opacity:.7;
}
.section-topCategory .slide-content {
  background: #FFF;
}
.section-topCategory .slide-title {
  height: 60px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 1em;
}
.section-topCategory .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  opacity: 0.3;
}
.section-topCategory .swiper-button-prev,
.section-topCategory .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.section-topCategory .swiper-button-prev::before,
.section-topCategory .swiper-button-next::before {
  background-color: rgba(250, 102, 0, 0.6);
}
.section-topCategory .swiper-button-prev::after,
.section-topCategory .swiper-button-next::after {
  border-color: #fff;
}
.section-topCategory .swiper-button-prev,
.section-topCategory .swiper-button-next {
  left:calc(50% - 20px);
  right:unset;  
}
.section-topCategory .swiper-button-prev{
  transform:translateX(-512px);
}
.section-topCategory .swiper-button-next{
  transform:translateX(512px);
}
.section-topCategory .slide-media {
  display:flex;
  justify-content:center;
  align-items: center;
  aspect-ratio:1/1;
}
.section-topCategory .slide-media img{
  width: 95%;
  height:auto;
}
.section-topCategory .swiper-button-prev,
.section-topCategory .swiper-button-next {
  display: grid !important;
  place-content: center;
  width: 2.4rem !important;
  height: 2.4rem !important;
  cursor: pointer !important;
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
.section-topCategory .swiper-button-prev::before,
.section-topCategory .swiper-button-next::before {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  content: "" !important;
  border-radius: 50% !important;
}
.section-topCategory .swiper-button-prev::after,
.section-topCategory .swiper-button-next::after {
  width: 0.8rem !important;
  height: 0.8rem !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 3px 3px 0 0 !important;
  content: "";
  border-radius: 50%;
}
.section-topCategory .swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.section-topCategory .swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.section-topCategory .swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}
.section-topCategory .swiper-button-prev::after,
.section-topCategory .swiper-button-next::after {
  width: 1.2rem;
  height: 1.2rem;
  content: "";
  border: solid var(--color-gray);
  border-width: 3px 3px 0 0;
  border-radius: 0 !important;
}
.section-topCategory .swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.section-topCategory .swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.section-topCategory .swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

/* .section-saleItem */
.section-saleItem .catalog-list li:nth-child(n + 5){
  display:none;
}

/* 飾り */
.section-ranking .catalog-list>li:nth-child(n + 4) .badge {
  font-weight:600;
  background: #fff;
  border: 1px solid #eee;
}
.section-ranking .catalog-list>li .badge em{
  font-size:14px;
  font-weight:800;
}
.section-saleItem .catalog-list>li:before{
  content:"SALE";
  display:flex;
  justify-content:center;
  align-items:center;
  width:3em;
  height:1.4em;
  font-size:13px;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #e91014;
  position:absolute;
  z-index:1;
  font-family: "franklin-gothic-urw-comp" !important;
}

/* more-btn */
:where(.harleydavidsonTop) .more-btn {
  display:none;
  position: relative;
  background: #ffffff;
  color: #000000;
  border: solid #000000 2px;
  width: 340px;
  height: auto !important;
  line-height: 1 !important;
  margin: 10px auto 10px;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-align: center;
  border-radius: 0 !important;
  padding: 20px 0 !important;
  cursor: pointer;
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  font-family: "Noto Sans JP", sans-serif;
}
.harleydavidsonTop .more-btn:hover {
  position: relative;
  background: #fa6600 !important;
  color: #fff;
  border: solid #fa6600 2px;
}
.harleydavidsonTop .more-btn::after {
  content: '\e5e1';
  font-family: "Material Symbols Outlined";
  display: block;
  font-size: 16px;
  position:absolute;
  right:10px;
  top: 50%;
  transform:translateY(-50%);
}
.harleydavidsonTop .more-btn#ranking-isAll-btn::after{
  content: '\e145';
}
.section-saleItem .more-btn{
  background-color:transparent;
}
.harleydavidsonTop [class^="section-"].-showBtn .more-btn{
  display:block !important;
}
.section-coordinate .more-btn{
  display:block;
}

/* swiper 共通パーツ */
.swiper-pagination-bullets {
  position: static;
  margin-top: 16px;
}
.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #fff !important;
}
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: 17px;
}
.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}
.swiper-pagination-bullet-active {
  background: #fa6600 !important;
}
.section-topCategory .swiper-pagination-bullet{
  background:#000 !important;
}
.section-topCategory .swiper-pagination-bullet-active{
  background:#fa6600 !important;
}

/* #top--hero */
#top--hero{
  background: #000;
}
#top--hero_output article{
  background: #000;
}

#top--hero_output article .contents-wrap{
  margin: 0 auto;
  width: 1024px;
}
#top--hero_output article .contents-wrap > a{
  display:flex;
}
#top--hero .hero-text {
  width: calc(100% - 640px) !important;
  text-align: left;
  min-height: 640px;
  display: flex;
  align-items: center !important;
  flex-flow: nowrap;
}
#top--hero .hero-text-block {
  margin: 0 auto;
  text-align: left;
  padding: 0 30px 0 10px;
  max-width: 560px;
}
#top--hero .hero-text h3 {
  color: #fff;
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 62px !important;
  line-height: 1;
}
#top--hero .hero-text h3 span{
  font-family: "franklin-gothic-urw-comp", "Noto Sans JP", sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 16px !important;
  line-height: 1em;
  display:block;
}
#top--hero .hero-text h3 small{
  font-size:.7em;
}
#top--hero .hero-text-block p {
  color: #fff;
  line-height: 1.75;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding-top:20px;
  padding-bottom:20px;
}
#top--hero .hero-visual {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 640px;
  max-height: 640px;
  overflow: hidden;
  background: #121212;
}
#top--hero .btn{
  display:flex;
  background: #FF6600;
  color: #fff;
  font-weight: 500;
  width: 180px;
  height:50px;
  justify-content:center;
  align-items:center;
  border-radius: 0;
}
#top--hero .btn:hover{
  background: #FFF;
  color: #FF6600;
  border: #FF6600 solid 1px;
}
#top--hero .contents-wrap a{
  position:relative;
}
#top--hero .contents-wrap a:hover{
  cursor:pointer;
}
#top--hero .contents-wrap a:before{
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
}
#top--hero .contents-wrap a:hover:before{
  background-color: rgba(255, 255, 255, 0.2); 
}
.swiper-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
}
.swiper-pagination01 {
  text-align:center;
}
.swiper-pagination-bullet{
  background: #676767 !important;
}