@charset "utf-8";

main , main section { max-width: none; }
main img { width: 100%; height: auto; }
main p { text-align: left; }
main a { text-decoration: none; color: inherit; }
main ul , main li { list-style: none; }

.section-eyecatch { max-width: none; width: auto; margin-top: 0; background: #FFF; padding: 60px 0; }
.section-eyecatch img { width: 100%; height: auto; }
.section-eyecatch a { text-decoration: none; }
.section-footer-contact div a img , .section-footer-contact div img { width: 46px; height: auto; }

/* font */
#mv p ,
#lead .lead_heading , #lead .lead_text ,
.section .lead_heading , .section .lead_text ,
.brand p , .product h4 , .product p , .product div ul li {
  font-family: "Noto Serif","Noto Serif JP",serif; font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: .1em; list-style: none; text-decoration: none; }

/* 共通 */
.section { background: #FFF; margin-bottom: 100px;}
.pc-block { display: block;}
.sp-block { display: none;}
@media screen and (max-width: 767px) {
  .section { background: #FFF; margin-bottom: 50px;}
  .pc-block { display: none;}
  .sp-block { display: block;}
}

/* MV */
#mv {
  width: 100%;
  height: 830px;
  padding: 50px 20px;
  text-align: center;
  background: url(../images/sale/watchbrand-ranking-2024/pic-mv-bg.jpg) no-repeat center;
  background-size: cover;
  border-bottom: solid 10px #897152;
  position: relative;
}
#mv::before {
  content: "";
  display: block;
  width: clamp(180px, 15.5vw, 206px);;
  height: 153px;
  margin-bottom: 40px;
  background: url(../images/sale/watchbrand-ranking-2024/icon-king.svg) no-repeat center ;
  background-size: contain;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
#mv .mv-ttl {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 510px;
  left: 50%;
  transform: translate(-50% , -50%);
}
#mv .mv-ttl .mv-ttl_heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
#mv .mv-ttl .mv-ttl_heading span {
  font-family: "Lexend Exa";
  font-size: clamp(113px, 13vw, 133px);
  font-weight: 500;
  line-height: .8;
  color: #AF936C;
  letter-spacing: .15em;
}
#mv .mv-ttl .mv-ttl_text {
  display: inline-block;
  margin-bottom: 20px;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  text-align: center;
  color: #fff;
  letter-spacing: .45em;
  text-indent: -1em;
  line-height: 1.2;
  white-space: nowrap;
}
#mv .mv-ttl .mv-ttl_img {
  max-width: clamp(400px, 40%, 600px);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #mv {
    height:  clamp(440px, 110vw, 660px);
    background: url(../images/sale/watchbrand-ranking-2024/pic-mv-bg_sp.jpg) no-repeat top center;
    background-size: cover;
  }
  #mv::before {
    width: clamp(100px, 20vw, 180px);
    height: 100px;
    margin-bottom: 0;
    top: 10vw;
  }
  #mv .mv-ttl {
    top:clamp(243px, 63vw, 395px);
  }
  #mv .mv-ttl .mv-ttl_heading {
    margin-bottom: 0;
  }
  #mv .mv-ttl .mv-ttl_heading span {
    font-size: clamp(50px, 15vw, 100px);
  }
  #mv .mv-ttl .mv-ttl_text {
    font-size: clamp(15px, 4vw, 20px);
    text-indent: .25em;
    margin-bottom: 5px;
    letter-spacing: .25em;
  }
  #mv .mv-ttl .mv-ttl_img {
    max-width: clamp(200px, 60vw, 400px);
    transform: translateY(-10px);
  }
}

/* lead */
#lead {
  padding: 100px 20px;
  text-align: center;
}
#lead .lead_heading {
  display: block;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 auto 20px;
  letter-spacing: .1em;
}
#lead .lead_heading::before {
  content: "";
  display: block;
  margin: 0 auto 20px;
  max-width: 158px;
  width: 100%;
  height: 158px;
  background: url(../images/sale/watchbrand-ranking-2024/icon-kq.svg) no-repeat center;
  background-size: contain;
}
#lead .lead_text {
  display: inline-block;
  font-size: 18px;
  text-align: center;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  #lead { padding: 50px 20px;}
  #lead .lead_heading {
    font-size: 22px;
    margin-bottom: 10px;
  }
  #lead .lead_heading::before {
    margin-bottom: 10px;
    max-width: 100px;
    height: 100px;
  }
  #lead .lead_text {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* ランキング固定背景 */
.bg-wrapper {
  position: relative;
  width: 100%;
  height: clamp(180px, 30vw, 400px);
  clip-path: inset(0);
  background-color: #000518;
  background-image: url(../images/sale/watchbrand-ranking-2024/img-num-bg.png);
  background-repeat: repeat-y;
  background-position: right;
}
.bg10 , .bg9 , .bg8 , .bg7 , .bg6 , .bg5 , .bg4 , .bg3 , .bg2 , .bg1 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .bg-wrapper {
    background-size: contain;
  }
  .bg10 , .bg9 , .bg8 , .bg7 , .bg6 , .bg5 , .bg4 , .bg3 , .bg2 , .bg1 {
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
}

/* brand product */
.brand , .product {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  min-height:  clamp(300px, 30vw, 586px);
  padding-left: 50%;
  position: relative;
}
.product {
  background-color: #FFFBF8;
}
.product--mens {
  padding: 0 50% 0 0;
  background-color: #FBFBFB;
}
.brand::before , .product::before {
  content: "";
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.product--mens::before {
  right: 0;
  left: unset;
}
.brand div , .product div {
  max-width: 600px;
  margin: 40px;
  letter-spacing: .05em;
}
.brand .brand-name , .product .product-brand  {
  font-family: "Lexend Exa";
  margin-bottom: 20px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: .1em;
}
.brand .brand-name  {
  font-size: 28px;
  font-weight: 400;
}
.brand .brand-country {
  width: 50px;
  height: auto;
  margin: 0 0 5px 0;
}
.product .product-name  {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}
.product .product-brand  {
  font-size: 18px;
  margin-bottom: 10px;
}
.product .product-attributes {
  display: flex;
  margin-bottom: 20px;
  letter-spacing: .2em;
}
.product .product-attributes li {
  line-height: 1;
  text-align: center;
}
.product .product-attributes li:first-child {
  border-right: solid 1px #171717;
  padding-right: 10px;
  margin-right: 10px;
}
.brand .brand-info , .product .product-info {
  font-size: 16px;
  text-align: left;
}
.product .product-info {
  margin-bottom: 20px;
}
.product-sale {
  display: inline-flex;
  align-items: baseline; 
  flex-wrap: wrap;
}
.product-sale .product-price:first-child {
  position: relative;
  padding-right: 40px;
  margin: 0 20px 0 0;
}
.product-sale .product-price:first-child::before ,
.product-sale .product-price:first-child::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #171717;
  box-sizing: border-box;
  position: absolute;
  transform: translateY(50%);
  transition: background-color 0.3s;
}
.product-sale .product-price:first-child::before {
  width: 20px;
  top: 50%;
  right: 3px;
}
.product-sale .product-price:first-child::after {
  width: 12px;
  top: calc(50% + -4px);
  right: 0;
  transform: rotate(50deg);
}
.product-sale .product-price:first-child .price {
  font-size: 24px;
  text-decoration: line-through;
}
.product-sale .product-price:last-child {
  color:#BC0000;
}
.product-sale .product-price:last-child::before {
  content: "SALE";
  font-family: "Roboto Condensed";
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
  margin-right: 10px;
  font-size: 14px;
  padding: 0 5px;
  border: solid 1px #BC0000;
}
.product-price {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  display: none;
}
.product-price .price {
  display: inline-block;
  padding: 0 5px;
  font-family: "Roboto Condensed";
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(.1em);
}
.product-btn {
  display: block;
  max-width: 600px;
  padding: 20px 40px;
  font-family: "Noto Serif JP";
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  letter-spacing: .2em;
  background-color: #171717;
  border-width: 1px;
  border-style: solid;
  border-color: #171717;
  position: relative;
  transition: all .3s;
}
.product-btn--other {
  font-family: "Lexend Exa";
  font-weight: 300;
  margin: 0 auto ;
  color: #171717;
  letter-spacing: .1em;
  background-color: #FFF;
}
.product-btn:hover , .product-btn--other:hover {
  background-color: #AF936C;
  border-color: #AF936C;
  color: #FFF;
  transform: translateY(4px);
}
.product-btn--other:hover {
  border-color: #AF936C;
}
.product-btn::before , .product-btn::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #FFF;
  box-sizing: border-box;
  position: absolute;
  transform: translateY(50%);
  transition: background-color 0.3s;
}
.product-btn--other::before , .product-btn--other::after {
  background-color: #171717;
}
.product-btn::before {
  width: 20px;
  top: 50%;
  right: 24px;
}
.product-btn::after {
  width: 12px;
  top: calc(50% + -4px);
  right: 21px;
  transform: rotate(50deg);
}
.product-btn:hover::before , .product-btn:hover::after {
  background-color: #fff;
}
.product-btn_area { padding: 100px 20px;}
@media screen and (max-width: 1080px) {
  .brand , .product , .product--mens { padding: clamp(240px, 40vw, 400px) 0 0 0 ;}
  .brand::before , .product::before {
    width: 100%;
    height: clamp(240px, 40vw, 400px);
  }
  .brand div , .product div { margin: 20px 20px 40px;}
  .brand .brand-name , .product .product-brand  {
    margin-bottom: 10px;
  }
  .brand .brand-name  { font-size: 24px;}
  .product .product-name  { font-size: 20px; }
  .product .product-brand , .product-price , .product-price .tax  { font-size: 16px;}
  .product-btn:hover , .product-btn--other:hover { transform: translateY(0);}
  .product-btn--other:hover {
    border-color: #171717;
    color: #171717;
    background-color: #FFF;
  }
  .product-btn:hover {
    color: #FFF;
    background-color: #171717;
  }
  .product-btn--other:hover {
    color: #171717;
    background-color: #FFF;
  }
  .product-btn--other:hover::before , .product-btn--other:hover::after {
    background-color: #171717;
  }
  .product-btn_area { padding: 40px 20px;}
}

@media screen and (max-width: 767px) {
  .product-sale {
    flex-direction: column;
  }
  .product-sale .product-price:first-child {
    position: relative;
    padding: 0;
    margin: 0 0 0 auto;
  }
  .product-sale .product-price:first-child::before ,
  .product-sale .product-price:first-child::after {
    display: none;
  }
}

#no10 .brand::before , #no9 .brand::before , #no8 .brand::before , #no7 .brand::before , #no6 .brand::before , #no5 .brand::before , #no4 .brand::before , #no3 .brand::before , #no2 .brand::before , #no1 .brand::before  {
  background-position: right center;
}
#no10 .product::before , #no9 .product::before , #no8 .product::before , #no7 .product::before , #no6 .product::before , #no5 .product::before , #no4 .product::before , #no3 .product::before , #no2 .product::before , #no1 .product::before {
  background-position: center right 30%;
}
#no10 .product--mens::before , #no9 .product--mens::before , #no8 .product--mens::before , #no7 .product--mens::before , #no6 .product--mens::before , #no5 .product--mens::before , #no4 .product--mens::before , #no3 .product--mens::before , #no2 .product--mens::before , #no1 .product--mens::before {
  background-position: center left 30%;
}
#no10 .bg10 , #no8 .bg8 , #no6 .bg6 , #no4 .bg4 , #no2 .bg2 { left: 12%; height: 460px;}
#no9 .bg9 , #no7 .bg7 , #no5 .bg5 , #no3 .bg3 , #no1 .bg1 { right: 12%; height: 460px;}

/* no10img */
#no10 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_10.jpg);}
#no10 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_10l.jpg);}
#no10 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_10m.jpg);}
#no10 .bg10 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_10.svg"); width: 892px;}

/* no9img */
#no9 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_9.jpg);}
#no9 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_9l.jpg);}
#no9 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_9m.jpg);}
#no9 .bg9 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_9.svg"); width:677px;}

/* no8img */
#no8 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_8.jpg);}
#no8 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_8l.jpg);}
#no8 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_8m.jpg);}
#no8 .bg8 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_8.svg"); width:684px;}

/* no7img */
#no7 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_7.jpg);}
#no7 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_7l.jpg);}
#no7 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_7m.jpg);}
#no7 .bg7 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_7.svg"); width:752px;}

/* no6img */
#no6 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_6.jpg);}
#no6 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_6l.jpg);}
#no6 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_6m.jpg);}
#no6 .bg6 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_6.svg"); width:612px;}

/* no5img */
#no5 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_5.jpg);}
#no5 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_5l.jpg);}
#no5 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_5m.jpg);}
#no5 .bg5 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_5.svg"); width:652px;}

/* no4img */
#no4 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_4.jpg);}
#no4 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_4l.jpg);}
#no4 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_4m.jpg);}
#no4 .bg4 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_4.svg"); width:627px;}

/* no3img */
#no3 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_3.jpg);}
#no3 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_3l.jpg);}
#no3 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_3m.jpg);}
#no3 .bg3 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_3.svg"); width:666px;}

/* no2img */
#no2 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_2.jpg);}
#no2 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_2l.jpg);}
#no2 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_2m.jpg);}
#no2 .bg2 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_2.svg"); width:707px;}

/* no1img */
#no1 .brand::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-brand_1.jpg);}
#no1 .product::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_1l.jpg);}
#no1 .product--mens::before { background-image: url(../images/sale/watchbrand-ranking-2024/pic-product_1m.jpg);}
#no1 .bg1 { background-image: url("../images/sale/watchbrand-ranking-2024/icon-num_1.svg"); width:627px;}

@media screen and (max-width: 1080px) {
  #no10 .product::before , #no9 .product::before , #no8 .product::before , #no7 .product::before , #no6 .product::before , #no5 .product::before , #no4 .product::before , #no3 .product::before , #no2 .product::before , #no1 .product::before ,
  #no10 .product--mens::before , #no9 .product--mens::before , #no8 .product--mens::before , #no7 .product--mens::before , #no6 .product--mens::before , #no5 .product--mens::before , #no4 .product--mens::before , #no3 .product--mens::before , #no2 .product--mens::before , #no1 .product--mens::before {
    background-position: center;
  }
  #no10 .bg10 , #no9 .bg9 , #no8 .bg8 , #no7 .bg7 , #no6 .bg6 , #no5 .bg5 , #no4 .bg4 , #no3 .bg3 , #no2 .bg2 , #no1 .bg1 {
    left: 50%; transform: translate(-50% , -50%);
  }  
  #no10 .bg10 { width: clamp(250px, 60vw, 892px);}
  #no9 .bg9 { width: clamp(202px, 60vw, 677px);}
  #no8 .bg8 { width: clamp(202px, 60vw, 684px);}
  #no7 .bg7 { width: clamp(248px, 60vw, 752px);}
  #no6 .bg6 { width: clamp(176px, 60vw, 612px);}
  #no5 .bg5 { width: clamp(195px, 60vw, 652px);}
  #no4 .bg4 { width: clamp(180px, 60vw, 627px);}
  #no3 .bg3 { width: clamp(196px, 60vw, 666px);}
  #no2 .bg2 { width: clamp(210px, 60vw, 707px);}
  #no1 .bg1 { width: clamp(182px, 60vw, 627px);}
}