@charset "utf-8";
/* ==========================================================================
   recet
   ========================================================================== */
#watch .cmp-brand_menu__wrapper.is-fixed {
  width: 100vw !important;
  left: 50%;
  position: relative;
  top: 0 !important;
  transform: translateX(-50%);
  transition: top .3s ease-out;
  z-index: 9;
}
/* ==========================================================================
   Base
   ========================================================================== */
/*--brand---*/
#oceanus {
  --brand-color: #1c305c;
  --brand-font-family: "Noto Serif JP", serif;
  --brand-font-family-heading: "Marcellus", serif;
  --brand-font-weight-heading: 400;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#protrek {
  --brand-color: #183028;
  --brand-font-family-heading: "Roboto", sans-serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#edifice {
  --brand-color: #000000;
  --brand-font-family: "Noto Serif JP", serif;
  --brand-font-family-heading: "Marcellus", serif;
  --brand-font-weight-heading: 400;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#baby-g {
  --brand-color: #00BFB3;
  --brand-font-family-heading: "Roboto Condensed", sans-serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#classic, #collection {
  --brand-color: #000000;
  --brand-font-family-heading: "din-2014", sans-serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#gshock {
  --brand-color: #000000;
  --brand-font-family-heading: "Roboto", sans-serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#mrg {
  --brand-color: #000000;
  --brand-font-family: "Shippori Mincho", serif;
  --brand-font-family-heading: "Shippori Mincho", serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
#mog {
  --brand-color: #000000;
  --brand-font-family: "Roboto", sans-serif;
  --brand-font-family-heading: "Roboto", sans-serif;
  --brand-font-weight-heading: 700;
  --brand-font-style-heading: normal;
  --brand-font-letter-spacing: 0em;
}
/*-------------------------font----------------------------*/
#watch h1 {
  font-family: var(--brand-font-family-heading);
  font-weight: var(--brand-font-weight-heading);
  font-style: var(--brand-font-style-heading);
  letter-spacing: var(--brand-font-letter-spacing);
  color: var(--brand-color);
  line-height: 1.5;
}
#watch h2 {
  font-size: min(10vw, 60px);
  font-family: var(--brand-font-family-heading);
  font-weight: var(--brand-font-weight-heading);
  font-style: var(--brand-font-style-heading);
  letter-spacing: var(--brand-font-letter-spacing);
  color: var(--brand-color);
  text-align: center;
  line-height: 1.5;
}
#watch .title h2 {
  font-size: min(8vw, 45px);
}
#watch h3 {
  font-size: min(8vw, 45px);
  font-family: var(--brand-font-family-heading);
  font-weight: var(--brand-font-weight-heading);
  font-style: var(--brand-font-style-heading);
  letter-spacing: var(--brand-font-letter-spacing);
  line-height: 1.5;
}
#watch p {
  font-size: min(3.5vw, 16px);
  font-family: var(--brand-font-family);
  line-height: 2.0;
}
#watch #brand-nav, #watch .content-panel-list, #watch .product-panel-list-filter {
  font-family: var(--brand-font-family);
}
#watch p.note {
  font-size: 12px;
}
#watch .brand-font-heading {
  font-family: var(--brand-font-family-heading);
  font-weight: var(--brand-font-weight-heading);
  letter-spacing: var(--brand-font-letter-spacing);
}
#watch .brand-font {
  font-family: var(--brand-font-family);
}
#watch .brand-color {
  color: var(--brand-color);
}
/* ==========================================================================
   Components
   ========================================================================== */
/*---section---*/
#watch .section-container {
  width: 90%;
  max-width: 1920px;
  margin-inline: auto;
  margin-bottom: min(20vw, 100px);
}
/* carousel */
#watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-next, #watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-prev {
  background-image: url(/content/dam/casio/global/watch/common/carousel-arrow-white.svg) !important;
  background-color: transparent !important;
  height: 60px;
  width: 60px;
  z-index: 1;
}
#watch .swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
#watch .swiper-button-next, .swiper-rtl .swiper-button-prev {
  left: auto;
  right: 10px;
}
#watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-next:after, #watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-prev:after {
  font-size: 30px;
}
/* nav */
.nav-watch{
    margin-bottom: min(20vw,100px);
}
#watch #nav-watch {
  overflow: hidden;
}
#watch .container:has(>.switch-container > #brand-nav) {
  position: sticky;
  top: 0px;
  z-index: 9;
  background-color: #ffffff;
}
.cmp-header:has(#watch) {
  z-index: 8 !important;
}
#watch #brand-nav {
  padding: 0 56px;
  background: #ffffff;
}
#watch .switch-container:has(> #brand-nav) {
  position: relative;
}
#watch .switch-container:has(> #brand-nav)::before, #watch .switch-container:has(> #brand-nav)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: #323232;
  filter: blur(8px);
  z-index: -1;
  mix-blend-mode: multiply;
  opacity: .1;
}
#watch .switch-container:has(> #brand-nav)::after {
  top: 0;
  bottom: auto;
}
#watch #brand-nav h1, #watch #brand-nav h2 {
  padding: 0;
  display: flex;
}
#watch #brand-nav .cmp-product-navigation {
  height: 60px;
}
#watch #brand-nav .logo {
  width: 105px;
}
#watch #brand-nav > .aem-Grid {
  display: flex;
  align-items: center;
}
#watch #brand-nav > .aem-Grid > .container:nth-child(1) {
  width: fit-content;
}
#watch #brand-nav .cmp-product-navigation__ttl {
  width: 0px;
  height: 0px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#watch .cmp-container--body > .switch-container:has(>#brand-nav-inner) {
  margin: 0;
}
/*---new-products---*/
#watch #new-products {
  width: 90%;
  max-width: 1920px;
  margin: min(20vw,100px) auto;
}
#watch #new-products h2 {
  font-size: min(8vw, 45px);
}
#watch #new-products .cmp-content_panel .cmp-content_panel__info {
  background-color: #ffffff;
  color: #000000;
}
/*---all-products---*/
#watch #all-products h2 {
  font-size: min(8vw, 45px);
}

@media (max-width: 767px) {
  /* nav */
  #watch #brand-nav {
    padding: 0 10px 0 15px;
  }
  #watch #brand-nav .cmp-product-navigation {
    height: 50px;
  }
  /* nav */
  #watch #brand-nav .cmp-product-navigation .cmp-product-navigation-spnav__head__ttl {
    font-family: var(--brand-font-family-heading);
    font-weight: var(--brand-font-weight-heading);
  }
  #watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-next, #watch .cmp-swipe-carousel.swiper-horizontal .swiper-button-prev {
    height: 50px;
    width: 50px;
  }
  #watch .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 0;
    right: auto;
  }
  #watch .swiper-button-next, .swiper-rtl .swiper-button-prev {
    left: auto;
    right: 0;
  }
}