@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;
}
/*--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: #3C563D;
  --brand-font-family-heading: "Lisu Bosa", serif;
  --brand-font-weight-heading: 500;
  --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 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);
}
/* 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;
}
#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 */
#watch #watch-nav {
  overflow: hidden;
}
#watch .container:has(>.switch-container > #brand-nav) {
  position: sticky;
  top: 0px;
  z-index: 1000;
  background-color: #ffffff;
}
#watch #brand-nav {
  box-shadow: 0 0 10px 0 #e3e3e3;
  padding: 0 56px;
}
#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;
}
/*---new-products---*/
#watch #new-products {
  width: 84%;
  max-width: 1920px;
  margin: 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) {
  #watch .cmp-brand_menu__wrapper {
    width: 100%;
  }
  /* 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;
  }
}
/*--------------スクロールアニメーション---------------*/
/*フェード*/
[id*="js-fade"], [id*="js-fade"][id*="child"] > * > *, [class*="js-fade"] {
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 1s ease-out;
}
[id*="js-fade-up"], [id*="js-fade-up"][id*="child"] > * > *, .js-fade-up {
  transform: translateY(50px);
}
[id*="js-fade-left"], [id*="js-fade-left"][id*="child"] > * > *, .js-fade-left {
  transform: translateX(50px);
}
[id*="js-fade-down"], [id*="js-fade-down"][id*="child"] > * > *, .js-fade-down {
  transform: translateY(-50px);
}
[id*="js-fade-right"], [id*="js-fade-right"][id*="child"] > * > *, .js-fade-right {
  transform: translateX(-50px);
}
[id*="js-fade"].is-active, [class*="js-fade"].is-active {
  opacity: 1;
  overflow-x: hidden;
  transform: translate(0, 0);
}
/*ブラー*/
[id*="js-blur"], [id*="js-blur"][id*="child"] > * > *, [class*="js-blur"] {
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  transition: transform 0.8s, opacity 1s ease-out .3s, filter 1s ease-out .3s, -webkit-filter 1s ease-out .3s;
}
[id*="js-blur-up"], [id*="js-blur-up"][id*="child"] > * > *, .js-blur-up {
  transform: translateY(50px);
}
[id*="js-blur-left"], [id*="js-blur-left"][id*="child"] > * > *, .js-blur-left {
  transform: translateX(50px);
}
[id*="js-blur-down"], [id*="js-blur-down"][id*="child"] > * > *, .js-blur-down {
  transform: translateY(-50px);
}
[id*="js-blur-right"], [id*="js-blur-right"][id*="child"] > * > *, .js-blur-right {
  transform: translateX(-50px);
}
[id*="js-blur"].is-active, [class*="js-blur"].is-active {
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
  transform: translate(0, 0);
}
/*クリップ*/
[id*="js-clip"], [id*="js-clip"][id*="child"] > * > *, [class*="js-clip"] {
  --duration: 2s;
  transition: clip-path var(--duration), -webkit-clip-path var(--duration);
}
[id*="js-clip-up"], [id*="js-clip-up"][id*="child"] > * > *, .js-clip-up {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
}
[id*="js-clip-left"], [id*="js-clip-left"][id*="child"] > * > *, .js-clip-left {
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
}
[id*="js-clip-down"], [id*="js-clip-down"][id*="child"] > * > *, .js-clip-down {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
[id*="js-clip-right"], [id*="js-clip-right"][id*="child"] > * > *, .js-clip-right {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
[id*="js-clip"].is-active, [class*="js-clip"].is-active {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}