/** Shopify CDN: Minification failed

Line 322:14 Expected identifier but found whitespace
Line 322:43 Unexpected ";"

**/
@charset "UTF-8";
/* common */
.contentContainer {
  margin-top: 70px;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
}

.contentContainer img {
  vertical-align: top;
}

@media screen and (max-width: 768px) {
  .contentContainer {
    margin-top: 0px;
  }
}
@media screen and (min-width: 769px) {
  .contentContainer {
    margin-top: 66px;
  }
}
.footer-navigation {
  margin-top: 0 !important;
  padding-bottom: 100px !important;
}

/* ----------import---------- */
/* media-queries */
@media screen and (max-width: 767px) {
  .orientation_landscape .landscape {
    display: block;
  }
  .orientation_landscape .portrait {
    display: none;
  }
  .orientation_portrait .landscape {
    display: none;
  }
  .orientation_portrait .portrait {
    display: block;
  }
}
.sp {
  display: none;
}

.tb {
  display: none;
}

.pc {
  display: none;
}

.sp-tb {
  display: none;
}

.tb-pc {
  display: none;
}

.js-media-queries {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
  .sp-tb {
    display: block;
  }
  .tb-pc {
    display: none;
  }
  .pc {
    display: none;
  }
  .js-media-queries {
    font-family: "sp";
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sp {
    display: none;
  }
  .tb {
    display: block;
  }
  .sp-tb {
    display: block;
  }
  .tb-pc {
    display: block;
  }
  .js-media-queries {
    font-family: "tb";
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .sp {
    display: none;
  }
  .tb-pc {
    display: block;
  }
  .pc {
    display: block;
  }
  .js-media-queries {
    font-family: "pc";
  }
}
@media screen and (min-width: 1440px) {
  .sp {
    display: none;
  }
  .tb-pc {
    display: block;
  }
  .pc {
    display: block;
  }
  .js-media-queries {
    font-family: "pc";
  }
}
@media print {
  .sp {
    display: none;
  }
  .tb {
    display: none;
  }
  .pc {
    display: block;
  }
}
/*! http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* modified */
.contentContainer {
  /*! HTML5 display-role reset for older browsers */
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
.contentContainer html, .contentContainer body, .contentContainer div, .contentContainer span, .contentContainer applet, .contentContainer object, .contentContainer iframe,
.contentContainer h1, .contentContainer h2, .contentContainer h3, .contentContainer h4, .contentContainer h5, .contentContainer h6, .contentContainer p, .contentContainer blockquote, .contentContainer pre,
.contentContainer a, .contentContainer abbr, .contentContainer acronym, .contentContainer address, .contentContainer big, .contentContainer cite, .contentContainer code,
.contentContainer del, .contentContainer dfn, .contentContainer em, .contentContainer img, .contentContainer ins, .contentContainer kbd, .contentContainer q, .contentContainer s, .contentContainer samp,
.contentContainer small, .contentContainer strike, .contentContainer strong, .contentContainer sub, .contentContainer sup, .contentContainer tt, .contentContainer var,
.contentContainer b, .contentContainer u, .contentContainer i, .contentContainer center,
.contentContainer dl, .contentContainer dt, .contentContainer dd, .contentContainer ol, .contentContainer ul, .contentContainer li,
.contentContainer fieldset, .contentContainer form, .contentContainer label, .contentContainer legend,
.contentContainer table, .contentContainer caption, .contentContainer tbody, .contentContainer tfoot, .contentContainer thead, .contentContainer tr, .contentContainer th, .contentContainer td,
.contentContainer article, .contentContainer aside, .contentContainer canvas, .contentContainer details, .contentContainer embed,
.contentContainer figure, .contentContainer figcaption, .contentContainer footer, .contentContainer header, .contentContainer hgroup,
.contentContainer menu, .contentContainer nav, .contentContainer output, .contentContainer ruby, .contentContainer section, .contentContainer summary,
.contentContainer time, .contentContainer mark, .contentContainer audio, .contentContainer video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
.contentContainer ul li,
.contentContainer ol li {
  list-style: none;
}
.contentContainer article, .contentContainer aside, .contentContainer details, .contentContainer figcaption, .contentContainer figure,
.contentContainer footer, .contentContainer header, .contentContainer hgroup, .contentContainer menu, .contentContainer nav, .contentContainer section {
  display: block;
}
.contentContainer body {
  line-height: 1;
}
.contentContainer ol, .contentContainer ul {
  list-style: none;
}
.contentContainer blockquote, .contentContainer q {
  quotes: none;
}
.contentContainer blockquote:before, .contentContainer blockquote:after,
.contentContainer q:before, .contentContainer q:after {
  content: "";
  content: none;
}
.contentContainer table {
  border-collapse: collapse;
  border-spacing: 0;
}
.contentContainer *,
.contentContainer *:before,
.contentContainer *:after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.contentContainer * {
  margin: 0;
  padding: 0;
  border: none;
}
.contentContainer *:focus {
  outline: none;
}
.contentContainer img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.inview {
  opacity: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.inview.is-inview {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

/**
.loader {
  position: fixed;
  inset: 0;
  z-index: 999 !important;
  pointer-events: none;
  color: #000;
}
.loader .loader__bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  pointer-events: all;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
  transition: transform 1.2s ease, -webkit-transform 1.2s ease;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.loader.is-loaded .loader__bg {
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}
.loader.is-loaded .loader__circle {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

.loader__circle {
  position: absolute;
  bottom: 15%;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-left: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 100px;
  -webkit-animation: loader-rotate 1s linear infinite;
          animation: loader-rotate 1s linear infinite;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  .loader__circle {
    left: calc(50% - 25px);
  }
}

@-webkit-keyframes loader-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loader-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* ----------fonts---------- */
  font-family: JINS_NextRegular, sans-serif;
  color: #000 !important;
}

/* ----------pages---------- */
body {
  background-color: #000;
  color: #fff;
}

/*
* SplitType
*/
.word {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  line-height: 1;
  padding-bottom: 4px !important;
}

.char {
  -webkit-transform: translateY(120px);
      -ms-transform: translateY(120px);
          transform: translateY(120px);
  -webkit-transition: transfrom 0.2s;
  transition: transfrom 0.2s;
}

.fontJinsNextMedium .char {
  padding-top: 2px !important;
}

/*
* inview
*/
.inview {
  opacity: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.inview.is-inview {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

.u-link .gits-product__lineup-link-ja {
  position: relative;
  display: inline-block;
}
.u-link .gits-product__lineup-link-ja::after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: #000000;
  bottom: -4px;
  -webkit-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.u-link:hover .gits-product__lineup-link-ja::after {
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}

.u-mouse-cursor,
.u-mouse-follower {
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .u-mouse-cursor,
  .u-mouse-follower {
    display: none;
  }
}

.u-mouse-cursor {
  width: 2px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 101;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
  transition: width 0.15s ease, height 0.15s ease, background-color 0.15s ease;
}
.u-mouse-cursor.is-active {
  background-color: white;
  mix-blend-mode: overlay;
  width: 100px;
  height: 100px;
}

.u-mouse-follower {
  width: 2px;
  height: 2px;
  border: 0.5px solid #000;
  z-index: 100;
  -webkit-transition: 0.1s ease;
  transition: 0.1s ease;
  -webkit-transition-property: width height;
  transition-property: width height;
}

/* 3D GLB Viewer */
.gits-kv {
  position: relative;
  background-color: #000;
  background-image: url(/cdn/shop/files/jins-gits-bg-01.webp);
  background-size: 100% auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .gits-kv {
    background-image: url(/cdn/shop/files/jins-gits-bg-01.webp);
    background-size: 200% auto;
    background-repeat: no-repeat;
  }
}
.gits-kv__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-kv__logo {
  padding: 10px 4px 0 !important;
  text-align: center;
  overflow: hidden;
}
.gits-kv__logo svg {
  width: calc(100% - 8px);
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1419/80;
  overflow: visible;
}
.gits-kv__logo path,
.gits-kv__logo polygon {
  transform-box: fill-box;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.gits-kv__bgmovie {
  position: absolute;
  width: 100%;
  aspect-ratio: 1920/1080;
  top: 0;
  left: 0;
  mix-blend-mode: color-dodge;
  opacity: 0.3;
}
.gits-kv__bgmovie-shadow-top, .gits-kv__bgmovie-shadow-bottom {
  position: absolute;
  width: 100%;
  height: 20vw;
  z-index: 9;
}
.gits-kv__bgmovie-shadow-top {
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
  background: linear-gradient(to bottom, #000, transparent);
}
.gits-kv__bgmovie-shadow-bottom {
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
  background: linear-gradient(to bottom, transparent, #000);
}
.gits-kv__bgmovie-movie {
  position: relative;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1920/1080;
  line-height: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.gits-kv-bottom {
  position: absolute;
  top: 32vw;
  width: 100%;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom {
    top: 70vw;
  }
}
.gits-kv-bottom__text {
  position: relative;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__text {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}
.gits-kv-bottom__text-productname {
  font-family: "Astra", sans-serif !important;
  font-size: 4.5vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
.gits-kv-bottom__text-productname::before, .gits-kv-bottom__text-productname::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  pointer-events: none;
  color: transparent;
  opacity: 0;
}
.gits-kv-bottom__text-productname::before {
  -webkit-text-stroke: 1px rgba(0, 255, 255, 0.7);
  -webkit-transform: translateX(-1px);
      -ms-transform: translateX(-1px);
          transform: translateX(-1px);
}
.gits-kv-bottom__text-productname::after {
  -webkit-text-stroke: 1px rgba(255, 0, 120, 0.65);
  -webkit-transform: translateX(1px);
      -ms-transform: translateX(1px);
          transform: translateX(1px);
}
.gits-kv-bottom__text-productname.is-outline-idle::before, .gits-kv-bottom__text-productname.is-outline-idle::after {
  opacity: 0.45;
}
.gits-kv-bottom__text-productname.is-outline-glitch::before, .gits-kv-bottom__text-productname.is-outline-glitch::after {
  opacity: 1;
}
.gits-kv-bottom__text-copy-ja {
  padding-top: 1.8vw !important;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 2.2vw !important;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  font-weight: 200;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__text-copy-ja {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 18px !important;
    letter-spacing: 0.1em;
    line-height: 1;
  }
}
.gits-kv-bottom__text-copy-en {
  padding-top: 1.8vw !important;
  font-family: "Astra", sans-serif !important;
  font-size: 0.6vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: #fff;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-kv-bottom__text-text-en {
  position: relative;
}
.gits-kv-bottom__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content {
    width: 100%;
  }
}
.gits-kv-bottom__content-time {
  position: absolute;
  top: 40%;
  left: 0;
}
@media screen and (min-width: 768px) {
  .gits-kv-bottom__content-time {
    top: 300px !important;
    left: 50% !important;
    right: auto !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-time {
    top: 100%;
    left: auto;
    right: 0;
  }
}
.gits-kv-bottom__content-time-time {
  font-family: "glitch", sans-serif;
  font-size: 11px !important;
  letter-spacing: 0.3em;
  line-height: 1;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-time-time {
    font-family: "glitch", sans-serif;
    font-size: 9px !important;
    letter-spacing: 0.3em;
    line-height: 1;
  }
}
.gits-kv-bottom__content-time-time .time-char {
  display: inline-block;
}
.gits-kv-bottom__content-time-time .time-digit {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.gits-kv-bottom__content-time-time .time-digit__inner {
  display: block;
  -webkit-animation: digitUp 0.45s ease;
          animation: digitUp 0.45s ease;
}
.gits-kv-bottom__content-time-time .time-colon {
  -webkit-animation: colonBlink 1s steps(1, end) infinite;
          animation: colonBlink 1s steps(1, end) infinite;
}
@-webkit-keyframes digitUp {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes digitUp {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@-webkit-keyframes colonBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes colonBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
.gits-kv-bottom__content-time-text {
  position: relative;
}
.gits-kv-bottom__content-circle {
  position: absolute;
  top: 10vw;
  right: 14vw;
  width: 10vw;
  aspect-ratio: 1;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-circle {
    top: 40vw;
    right: 14vw;
    width: 20vw;
  }
}
.gits-kv-bottom__content-circle span {
  position: absolute;
  inset: 0;
  border: 0.1px solid #fff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: circlePulse 3.4s ease-out infinite;
          animation: circlePulse 3.4s ease-out infinite;
}
.gits-kv-bottom__content-circle .circle1 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.gits-kv-bottom__content-circle .circle2 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.gits-kv-bottom__content-circle .circle3 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
@-webkit-keyframes circlePulse {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  8% {
    opacity: 0.2;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes circlePulse {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  8% {
    opacity: 0.2;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}
.gits-kv-bottom__content-number {
  position: absolute;
  top: -5vw;
  right: 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-number {
    top: 85vw;
  }
}
.gits-kv-bottom__content-number .num {
  font-family: "glitch", sans-serif;
  font-size: 10px !important;
  letter-spacing: 0.2em;
  line-height: 0.5;
  color: #fff;
  opacity: 0.8;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-kv-bottom__content-number .bar {
  width: 6vw;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-kv-bottom__content-bar-vertical {
  top: -8vw;
  right: -10px;
  width: 14vw;
}
.gits-kv-bottom__content-bar-angle {
  top: 10vw;
  width: 28vw;
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-bar-angle {
    top: 30vw;
  }
}
.gits-kv-bottom__content-dot {
  position: absolute;
  width: 50%;
  right: 0;
  top: 10vw;
}
@media screen and (min-width: 768px) {
  .gits-kv-bottom__content-dot {
    top: 20vw !important;
    right: -25vw !important;
    left: auto !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__content-dot {
    top: 60vw;
    width: 50%;
  }
}

.gits-kv-glasses {
  margin-top: 40vw !important;
}

.u-animation-dot {
  line-height: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1 / 1; /* force container to be square — prevents height collapse if SVG has no intrinsic dimensions */
}
.u-animation-dot img {
  display: block;
  width: 100%;
  height: 100% !important;   /* fill container regardless of SVG intrinsic height */
  object-fit: fill;           /* stretch SVG to fill — fine for a dot pattern */
  opacity: 0.2;
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(15%, rgba(0, 0, 0, 0.05)), color-stop(28%, rgba(0, 0, 0, 0.25)), color-stop(42%, rgba(0, 0, 0, 0.6)), color-stop(52%, #000), color-stop(62%, rgba(0, 0, 0, 0.6)), color-stop(76%, rgba(0, 0, 0, 0.25)), color-stop(90%, rgba(0, 0, 0, 0.05)), to(transparent));
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.25) 28%, rgba(0, 0, 0, 0.6) 42%, #000 52%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.25) 76%, rgba(0, 0, 0, 0.05) 90%, transparent 100%);
  mask-size: 420% 100%;
  mask-position: 150% 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(15%, rgba(0, 0, 0, 0.05)), color-stop(28%, rgba(0, 0, 0, 0.25)), color-stop(42%, rgba(0, 0, 0, 0.6)), color-stop(52%, #000), color-stop(62%, rgba(0, 0, 0, 0.6)), color-stop(76%, rgba(0, 0, 0, 0.25)), color-stop(90%, rgba(0, 0, 0, 0.05)), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.25) 28%, rgba(0, 0, 0, 0.6) 42%, #000 52%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.25) 76%, rgba(0, 0, 0, 0.05) 90%, transparent 100%);
  -webkit-mask-size: 420% 100%;
  -webkit-mask-position: 150% 0;
  -webkit-animation: dotMaskScan 6s linear infinite, dotGlow 6s ease-in-out infinite, dotGlitch 9s steps(1) infinite;
          animation: dotMaskScan 6s linear infinite, dotGlow 6s ease-in-out infinite, dotGlitch 9s steps(1) infinite;
}

@-webkit-keyframes dotMaskScan {
  0%   { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  100% { mask-position: 0% 0;   -webkit-mask-position: 0% 0;   }
}
@keyframes dotMaskScan {
  0%   { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  100% { mask-position: 0% 0;   -webkit-mask-position: 0% 0;   }
}

@-webkit-keyframes dotGlow {
  0%   { opacity: 0.05; -webkit-filter: brightness(1);   filter: brightness(1);   }
  35%  { opacity: 0.15; -webkit-filter: brightness(1);   filter: brightness(1);   }
  50%  { opacity: 0.85; -webkit-filter: brightness(2.2); filter: brightness(2.2); }
  65%  { opacity: 0.6;  -webkit-filter: brightness(1.6); filter: brightness(1.6); }
  100% { opacity: 0.05; -webkit-filter: brightness(1);   filter: brightness(1);   }
}
@keyframes dotGlow {
  0%   { opacity: 0.05; filter: brightness(1);   }
  35%  { opacity: 0.15; filter: brightness(1);   }
  50%  { opacity: 0.85; filter: brightness(2.2); }
  65%  { opacity: 0.6;  filter: brightness(1.6); }
  100% { opacity: 0.05; filter: brightness(1);   }
}


@-webkit-keyframes dotGlitch {
  0%, 95%, 100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  95.2% {
    -webkit-transform: translate(2px, -1px);
            transform: translate(2px, -1px);
  }
  95.4% {
    -webkit-transform: translate(-1px, 2px);
            transform: translate(-1px, 2px);
  }
  95.6% {
    -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
  }
  95.8% {
    -webkit-transform: translate(-2px, 0);
            transform: translate(-2px, 0);
  }
  96% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes dotGlitch {
  0%, 95%, 100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  95.2% {
    -webkit-transform: translate(2px, -1px);
            transform: translate(2px, -1px);
  }
  95.4% {
    -webkit-transform: translate(-1px, 2px);
            transform: translate(-1px, 2px);
  }
  95.6% {
    -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
  }
  95.8% {
    -webkit-transform: translate(-2px, 0);
            transform: translate(-2px, 0);
  }
  96% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes cyberGlitch {
  0%, 92%, 100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    text-shadow: -1px 0 rgba(0, 255, 255, 0.35), 1px 0 rgba(255, 0, 120, 0.35);
  }
  93% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px);
  }
  94% {
    -webkit-transform: translateX(1px);
            transform: translateX(1px);
  }
  95% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    text-shadow: -3px 0 rgba(0, 255, 255, 0.7), 3px 0 rgba(255, 0, 120, 0.7);
  }
  96% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes cyberGlitch {
  0%, 92%, 100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    text-shadow: -1px 0 rgba(0, 255, 255, 0.35), 1px 0 rgba(255, 0, 120, 0.35);
  }
  93% {
    -webkit-transform: translateX(-1px);
            transform: translateX(-1px);
  }
  94% {
    -webkit-transform: translateX(1px);
            transform: translateX(1px);
  }
  95% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    text-shadow: -3px 0 rgba(0, 255, 255, 0.7), 3px 0 rgba(255, 0, 120, 0.7);
  }
  96% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.u-bar-vartical,
.u-bar-angle {
  position: absolute;
  opacity: 0.35;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.u-bar-vartical img,
.u-bar-angle img {
  display: block;
  width: 100% !important;
  height: auto;
  -webkit-animation-delay: 1.2s, 1.2s, 0s;
          animation-delay: 1.2s, 1.2s, 0s;
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(25%, transparent), color-stop(45%, #000), color-stop(58%, #000), color-stop(78%, transparent), to(transparent));
  mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 45%, #000 58%, transparent 78%, transparent 100%);
  mask-size: 260% 100%;
  mask-position: 100% 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(25%, transparent), color-stop(45%, #000), color-stop(58%, #000), color-stop(78%, transparent), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 25%, #000 45%, #000 58%, transparent 78%, transparent 100%);
  -webkit-mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  -webkit-animation: barImgMaskScan 5s linear infinite, barImgGlow 5s ease-in-out infinite, barImgGlitch 8s steps(1) infinite;
          animation: barImgMaskScan 5s linear infinite, barImgGlow 5s ease-in-out infinite, barImgGlitch 8s steps(1) infinite;
}

@-webkit-keyframes barImgMaskScan {
  0% {
    mask-position: 150% 0;
    -webkit-mask-position: 150% 0;
  }
  100% {
    mask-position: -150% 0;
    -webkit-mask-position: -150% 0;
  }
}

@keyframes barImgMaskScan {
  0% {
    mask-position: 150% 0;
    -webkit-mask-position: 150% 0;
  }
  100% {
    mask-position: -150% 0;
    -webkit-mask-position: -150% 0;
  }
}
@-webkit-keyframes barImgGlow {
  0%, 100% {
    opacity: 0.15;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  45% {
    opacity: 0.35;
    -webkit-filter: brightness(2.4);
            filter: brightness(2.4);
  }
}
@keyframes barImgGlow {
  0%, 100% {
    opacity: 0.15;
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  45% {
    opacity: 0.35;
    -webkit-filter: brightness(2.4);
            filter: brightness(2.4);
  }
}
@-webkit-keyframes barImgGlitch {
  0%, 94%, 100% {
    -webkit-transform: translate(0) scaleX(1);
            transform: translate(0) scaleX(1);
  }
  94.3% {
    -webkit-transform: translateX(2px) scaleX(1.03);
            transform: translateX(2px) scaleX(1.03);
  }
  94.6% {
    -webkit-transform: translateX(-1px) scaleX(0.98);
            transform: translateX(-1px) scaleX(0.98);
  }
  94.9% {
    -webkit-transform: translateX(1px) scaleX(1.01);
            transform: translateX(1px) scaleX(1.01);
  }
}
@keyframes barImgGlitch {
  0%, 94%, 100% {
    -webkit-transform: translate(0) scaleX(1);
            transform: translate(0) scaleX(1);
  }
  94.3% {
    -webkit-transform: translateX(2px) scaleX(1.03);
            transform: translateX(2px) scaleX(1.03);
  }
  94.6% {
    -webkit-transform: translateX(-1px) scaleX(0.98);
            transform: translateX(-1px) scaleX(0.98);
  }
  94.9% {
    -webkit-transform: translateX(1px) scaleX(1.01);
            transform: translateX(1px) scaleX(1.01);
  }
}
.gits-glasses {
  margin-top: -30vw !important;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 100/120;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-glasses {
    margin-top: -30vw !important;
    margin-bottom: 30vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-glasses {
    margin-top: 0vw !important;
    aspect-ratio: 100/100 !important;
    /* Keep container in flow on mobile to preserve KV section height.
       JS skips 3D init on mobile — canvas stays empty.
       Static product image (.gits-kv-glasses.sp) handles the visual. */
  }
  .gits-glasses-viewer__canvas {
    display: none !important; /* hide empty WebGL canvas on mobile */
  }
}

.gits-glasses-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 6/6;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .gits-glasses-viewer {
    aspect-ratio: 6/12;
  }
}
.gits-glasses-viewer__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.gits-glasses-viewer__status {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  font-size: 10px;
  color: #000;
}
.gits-glasses-viewer.is-loaded .gits-glasses-viewer__canvas {
  -webkit-animation: gitsGlassesFadeIn 0.8s ease forwards;
          animation: gitsGlassesFadeIn 0.8s ease forwards;
}
@-webkit-keyframes gitsGlassesFadeIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes gitsGlassesFadeIn {
  from {
    opacity: 0;
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.js-terminal-lines {
  margin-top: 0.8vw !important;
  font-family: "Astra", sans-serif !important;
  font-size: 3.5px !important;
  letter-spacing: 0.1em;
  line-height: 2.6;
  color: #fff;
  opacity: 0.6;
  display: block;
  height: 45.5px;
  overflow: hidden;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.js-terminal-lines .terminal-lines__inner {
  display: block;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.js-terminal-lines .terminal-lines__inner.is-shifting {
  -webkit-transform: translateY(-9.1px);
      -ms-transform: translateY(-9.1px);
          transform: translateY(-9.1px);
  -webkit-transition: -webkit-transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-terminal-lines .terminal-line {
  display: block;
  white-space: nowrap;
  line-height: 2.6;
}
.js-terminal-lines .terminal-line.is-current {
  text-shadow: -1px 0 rgba(0, 255, 255, 0.35), 1px 0 rgba(255, 0, 120, 0.35);
}

.gits-visual {
  margin-top: 0vw !important;
  position: relative;
  width: 100%;
  line-height: 0;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .gits-visual {
    margin-top: 5vw !important;
  }
}
.gits-visual__inner {
  position: relative;
  width: 80%;
  margin-left: auto !important;
  margin-right: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-visual__inner {
    width: 90%;
  }
}
.gits-visual__image {
  width: 100%;
  line-height: 0;
}

.gits-concept {
  margin-top: -20vw !important;
  position: relative;
  width: 100%;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .gits-concept {
    margin-top: -90vw !important;
    aspect-ratio: 100/100;
  }
}
@media screen and (max-width: 767px) {
  .gits-concept {
    margin-top: -90vw !important;
    aspect-ratio: auto;
  }
}
.gits-concept__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10vw;
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
  background: linear-gradient(to top, #000 0%, transparent 100%);
}
.gits-concept__movie {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1080;
  line-height: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, #000), color-stop(20%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 20%, transparent 100%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, #000), color-stop(20%, #000), to(transparent));
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 20%, transparent 100%);
}
@media screen and (max-width: 767px) {
  .gits-concept__movie {
    aspect-ratio: 100/200;
  }
}
.gits-concept__movie-movie {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: brightness(1) contrast(1.2);
          filter: brightness(1) contrast(1.2);
}
@media screen and (max-width: 767px) {
  .gits-concept__movie-movie {
    width: 200% !important;
    margin-left: -50% !important;
  }
}
.gits-concept__movie-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-concept__movie-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-dot-filter.webp);
  background-size: 72px 72px;
  opacity: 1;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-concept__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .gits-concept__content {
    position: relative;
    height: auto;
    aspect-ratio: 100/180;
  }
}
@media screen and (max-width: 767px) {
  .gits-concept__content {
    position: relative;
    height: auto;
    aspect-ratio: auto;
    padding-bottom: 20px;
  }
}
.gits-concept__content-concept {
  position: absolute;
  right: 0;
  bottom: 20vw;
  color: #fff;
  width: 48%;
  max-width: 700px;
  padding-right: 3vw;
  padding-left: 1vw;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-concept__content-concept {
    position: absolute;
    bottom: 40vw;
    width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept {
    position: relative;
    bottom: auto;
    top: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}
/* Force white on all concept text — Dawn override */
#jins-ghost-in-the-shell .gits-concept__content-concept,
#jins-ghost-in-the-shell .gits-concept__content-concept * {
  color: #fff !important;
  text-transform: none !important;
}
.gits-concept__content-concept .subtitle-en {
  font-family: 'Astra', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  line-height: 1 !important;
  padding-bottom: 1vw !important;
  margin-left: 0 !important;
  text-transform: none !important;
}
.gits-concept__content-concept .concept-ja {
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
  font-family: JINS_NextMedium, sans-serif !important;
  font-size: 1.9vw !important;
  letter-spacing: 0.05em !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  padding-bottom: 1vw !important;
  text-align: left !important;
  text-transform: none !important;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .concept-ja {
    font-family: JINS_NextMedium, sans-serif !important;
    font-size: 18px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.4;
    text-align: left !important;
    text-transform: none !important;
  }
}
.gits-concept__content-concept .concept-ja .indent-0 {
  display: inline-block;
  width: 1em;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .concept-ja .indent-0 {
    width: 0em;
  }
}
.gits-concept__content-concept .text-ja {
  margin-left: 0;
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  text-align: left !important;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .text-ja {
    font-family: JINS_NextRegular, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.03em;
    line-height: 1.6;
    padding-top: 1em !important;
    margin-left: 0;
    text-align: left !important;
  }
}
.gits-concept__content-concept .text-ja .indent-1 {
  display: inline-block;
  width: 1em;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .text-ja .indent-1 {
    width: 0.5em !important;
  }
}
.gits-concept__content-concept .text-ja .indent-2 {
  display: inline-block;
  width: 2em;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .text-ja .indent-2 {
    width: 1em !important;
  }
}
.gits-concept__content-concept .text-ja .indent-3 {
  display: inline-block;
  width: 3em;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-concept .text-ja .indent-3 {
    width: 1.5em !important;
  }
}
.gits-concept__content-date {
  position: absolute;
  left: 0;
  bottom: 10vw;
  color: #fff;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-concept__content-date {
    bottom: 20vw;
  }
}
@media screen and (max-width: 767px) {
  .gits-concept__content-date {
    top: 50vw;
    bottom: auto;
    position: relative;
  }
}
.gits-concept__content-date .date-ja {
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 1.8vw !important;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-weight: 200 !important;
  padding-bottom: 1vw !important;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-date .date-ja {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 16px !important;
    letter-spacing: 0.1em;
    line-height: 1.3;
  }
}
.gits-concept__content-date .date-text-ja {
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
  margin-left: 0em;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 16px !important;
  letter-spacing: 0.2em;
  line-height: 2;
  font-weight: 200 !important;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-date .date-text-ja {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 13px !important;
    letter-spacing: 0.1em;
    line-height: 2;
  }
}
.gits-concept__content-date .date-text-ja .indent-1 {
  display: inline-block;
  width: 1em;
}
.gits-concept__content-date .date-btn {
  position: relative;
  width: 390px;
  height: 60px;
  margin-top: 40px !important;
  margin-left: 0vw !important;
}
.gits-concept__content-date .date-btn .date-btn-svg {
  position: relative;
  width: 100%;
}
.gits-concept__content-date .date-btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Astra', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  padding: 0 30px 0 0 !important;
  color: #fff !important;
  text-decoration: none;
  text-transform: none !important;
}
.gits-concept__content-design-text {
  position: absolute;
  top: 10vw;
  left: 0;
}
@media screen and (max-width: 767px) {
  .gits-concept__content-design-text {
    display: none;
  }
}

.gits-detail {
  position: relative;
  padding-top: 10vw !important;
  padding-bottom: 10vw !important;
  width: 100%;
  background-color: #000;
  background-image: url(/cdn/shop/files/jins-gits-bg-02.webp);
  background-size: 100% auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .gits-detail {
    padding-top: 40px !important;
    padding-bottom: 0 !important;
  }
}
.gits-detail__bottom {
  display: none;
}
.gits-detail__bar-1, .gits-detail__bar-2 {
  position: absolute;
  width: 1px;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(5%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.2) 95%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  z-index: 3;
}
.gits-detail__bar-1, .gits-detail__bar-2 {
  overflow: hidden;
}
.gits-detail__bar-1::after, .gits-detail__bar-2::after {
  content: "";
  position: absolute;
  left: -1px;
  top: -20%;
  width: 3px;
  height: 20%;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(rgba(255, 255, 255, 0.9)), to(transparent));
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9), transparent);
}
.gits-detail__bar-1::after {
  -webkit-animation: scanLine1 4s linear infinite;
          animation: scanLine1 4s linear infinite;
}
.gits-detail__bar-2 {
  height: 95%;
  margin-top: 5% !important;
}
.gits-detail__bar-2::after {
  -webkit-animation: scanLine2 4s linear infinite;
          animation: scanLine2 4s linear infinite;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
@-webkit-keyframes scanLine1 {
  from {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  to {
    -webkit-transform: translateY(600%);
            transform: translateY(600%);
  }
}
@keyframes scanLine1 {
  from {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  to {
    -webkit-transform: translateY(600%);
            transform: translateY(600%);
  }
}
@-webkit-keyframes scanLine2 {
  from {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  to {
    -webkit-transform: translateY(600%);
            transform: translateY(600%);
  }
}
@keyframes scanLine2 {
  from {
    -webkit-transform: translateY(-120%);
            transform: translateY(-120%);
  }
  to {
    -webkit-transform: translateY(600%);
            transform: translateY(600%);
  }
}
.gits-detail__bar-1 {
  left: 24%;
}
.gits-detail__bar-2 {
  left: 76%;
}
.gits-detail__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}

.gits-detail-column {
  position: relative;
  line-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.gits-detail-column.is-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
@media screen and (max-width: 767px) {
  .gits-detail-column {
    display: block;
  }
}
.gits-detail-column__movie {
  position: relative;
  width: 70%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-detail-column__movie {
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .gits-detail-column__movie {
    width: 90%;
  }
  .gits-detail-column__movie.is-detail-movie-1, .gits-detail-column__movie.is-detail-movie-3 {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}
.gits-detail-column__movie-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(104, 10, 213, 0.4);
}
.gits-detail-column__movie-movie {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1920/1080;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  mix-blend-mode: luminosity;
  opacity: 0.7;
  -webkit-filter: contrast(120%);
          filter: contrast(120%);
}
.gits-detail-column__movie-movie video {
  width: 100% !important;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__movie-movie {
    aspect-ratio: 1/1;
  }
}
.gits-detail-column__movie-movie-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-detail-column__text {
  width: 30%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-detail-column__text {
    width: 20%;
  }
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text {
    width: 100%;
    display: block;
    margin-top: -20px !important;
    padding-top: 0px !important;
    padding-bottom: 50px !important;
  }
}
.gits-detail-column__text-inner {
  position: relative;
  background: transparent;
  color: #fff;
  margin-right: -10vw !important;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-detail-column__text-inner.is-detail-3 {
    margin-right: -30vw !important;
  }
@media screen and (min-width: 768px) {
  .gits-detail-column__text-inner.is-detail-3 .text-ja--indent,
  .gits-detail-column__text-inner.is-detail-3 .notice-ja--indent {
    text-align: center !important;
    margin-left: 0 !important;
    max-width: 400px !important;
  }
}
}
.is-reverse .gits-detail-column__text-inner {
  margin-right: auto !important;
  margin-left: -10vw !important;
}
@media screen and (max-width: 767px) {
  .is-reverse .gits-detail-column__text-inner {
    margin-left: 0vw !important;
  }
}
.gits-detail-column__text-inner .title {
  font-family: "Astra", sans-serif !important;
  font-size: 1.8vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  padding-bottom: 10px !important;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-inner .title {
    font-family: "Astra", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 0.2em;
    line-height: 1.2;
  }
}
.gits-detail-column__text-inner .subtitle {
  font-family: "Astra", sans-serif !important;
  font-size: 0.7vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: #fff;
  padding-bottom: 20px !important;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-inner .subtitle {
    font-family: "Astra", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.2em;
    line-height: 1.2;
  }
}
.gits-detail-column__text-inner .text-ja--indent {
  max-width: 400px;
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.1em;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  padding-bottom: 1vw !important;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
  margin-left: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-inner .text-ja--indent {
    font-family: JINS_NextRegular, sans-serif !important;
    margin-left: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    width: 90%;
    padding-left: 5vw !important;
  }
}
.gits-detail-column__text-inner .notice-ja--indent {
  max-width: 400px;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  line-height: 1.8;
  font-weight: 200 !important;
  padding-bottom: 1vw !important;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
  margin-left: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-inner .notice-ja--indent {
    font-family: JINS_NextRegular, sans-serif !important;
    margin-left: 0 !important;
    font-size: 12px !important;
    padding-left: 5vw !important;
  }
}
.gits-detail-column__text-inner .subtitle-en {
  font-family: "Astra", sans-serif !important;
  font-size: 7px !important;
  letter-spacing: 0.2em;
  line-height: 1;
  padding-bottom: 1vw !important;
}
.gits-detail-column__text-inner .title-ja {
  font-family: JINS_NextRegular, sans-serif;
  font-size: 1.4vw !important;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-weight: 200 !important;
  padding-bottom: 1vw !important;
}
.gits-detail-column__text-inner .title-ja .small {
  font-size: 70%;
  margin-left: 0.7em;
}
.gits-detail-column__text-inner .text-ja {
  font-family: JINS_NextRegular, sans-serif;
  font-size: 0.9vw !important;
  letter-spacing: 0.2em;
  line-height: 2;
  font-weight: 200 !important;
}
.gits-detail-column__text-inner .text-ja .indent-1 {
  display: inline-block;
  width: 1em;
}
.gits-detail-column__text-inner .text-ja .indent-2 {
  display: inline-block;
  width: 2em;
}
.gits-detail-column__text-inner .text-ja .indent-3 {
  display: inline-block;
  width: 3em;
}
.gits-detail-column__dot-1 {
  position: absolute;
  left: 0;
  bottom: -4vw;
  width: 60%;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__dot-1 {
    left: auto;
    right: 0;
    width: 30%;
  }
}
.gits-detail-column__text-1 {
  position: absolute;
  left: 10vw;
  bottom: -4vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-1 {
    left: auto;
    right: 0;
  }
}
.gits-detail-column__angle-1 {
  position: absolute;
  right: 0;
  width: 30vw;
  bottom: -10vw;
  z-index: 3;
}
.gits-detail-column__text-2 {
  position: absolute;
  left: 3vw;
  bottom: 3vw;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__text-2 {
    left: auto;
    right: 0;
  }
}
.gits-detail-column__dot-2 {
  position: absolute;
  right: -15vw;
  bottom: -12vw;
  width: 70%;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__dot-2 {
    width: 30%;
  }
}
.gits-detail-column__dot-3 {
  position: absolute;
  right: 0;
  bottom: -8vw;
  width: 30%;
  z-index: 2;
}
.gits-detail-column__text-3 {
  position: absolute;
  right: 10vw;
  bottom: 3vw;
  z-index: 2;
}
.gits-detail-column__angle-3 {
  position: absolute;
  left: 12vw;
  width: 20vw;
  bottom: -10vw;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .gits-detail-column__angle-3 {
    width: 40vw;
    bottom: -30vw;
  }
}

/* ============================================================
   TV ANIME SECTION
   ============================================================ */
#jins-ghost-in-the-shell .gits-tvanime {
  position: relative;
  margin-top: 0;
  width: 100%;
}
#jins-ghost-in-the-shell .gits-tvanime img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 767px) {
  #jins-ghost-in-the-shell .gits-tvanime {
    margin-top: 0 !important;
  }
}

.gits-product {
  position: relative;
  padding-top: 0vw !important;
  padding-bottom: 0vw !important;
  width: 100%;
  background-color: #000;
  background-image: url(/cdn/shop/files/jins-gits-bg-03.webp);
  background-size: 100% auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  .gits-product {
    padding-top: 60px !important;
  }
}
.gits-product__movie {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1080;
  line-height: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, #000), color-stop(20%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 20%, transparent 100%);
          mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, #000), color-stop(20%, #000), to(transparent));
          mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 20%, transparent 100%);
}
.gits-product__movie-movie {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: brightness(1) contrast(1.2);
          filter: brightness(1) contrast(1.2);
}
.gits-product__movie-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-product-column__dot {
  position: absolute;
  aspect-ratio: 1 / 1;
  /* Matches the dot SVG used in KV and detail sections for consistency */
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.gits-product-column__dot img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: fill;
  opacity: 0.25;
  mask-image: none;
  -webkit-mask-image: none;
  animation: dotMaskScan 6s linear infinite, dotGlow 6s ease-in-out infinite, dotGlitch 9s steps(1) infinite;
  -webkit-animation: dotMaskScan 6s linear infinite, dotGlow 6s ease-in-out infinite, dotGlitch 9s steps(1) infinite;
}
/* TYPE-SUNGLASSES — upper right corner, console-confirmed at -25vw */
.gits-product-column__dot.is-tr {
  top: -25vw;
  right: 0;
  width: 22vw;
}
/* TYPE-OPTICAL — left side, console-confirmed at 30vw */
.gits-product-column__dot.is-bl {
  top: 30vw;
  left: 0;
  width: 22vw;
}
@media screen and (max-width: 767px) {
  .gits-product-column__dot.is-tr {
    width: 44vw;
    top: -8vw;
  }
  .gits-product-column__dot.is-bl {
    width: 44vw;
    top: 60vw;
  }
}

.gits-product-column {
  position: relative;
  padding-top: 0vw !important;
  padding-bottom: 10vw !important;
}
.gits-product-column__techmovie {
  position: absolute;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.1;
  overflow: hidden;
}
.gits-product-column__techmovie-movie {
  width: auto;
  height: 100%;
  aspect-ratio: 1920/1080;
  mix-blend-mode: exclusion;
  z-index: 0;
}
.gits-product-column__main {
  padding-top: 5vw !important;
  width: 100%;
  line-height: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gits-product-column__main.is-optical {
  display: block;
  aspect-ratio: 100/45;
}
@media screen and (min-width: 768px) {
  .gits-product-column__main.is-optical {
    position: relative; /* desktop only — contains absolutely positioned photos */
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__main.is-optical {
    aspect-ratio: 100/60;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__main.is-optical {
    aspect-ratio: 100/100;
  }
}
.gits-product-column__main-photo {
  width: 100%;
  max-width: 50%;
  line-height: 0;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__main-photo {
    max-width: 60%;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__main-photo {
    max-width: 70%;
  }
}
.gits-product-column__main-photo-optical-1, .gits-product-column__main-photo-optical-2 {
  width: 55%;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__main-photo-optical-1, .gits-product-column__main-photo-optical-2 {
    width: 65%;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__main-photo-optical-1, .gits-product-column__main-photo-optical-2 {
    width: 80%;
  }
}
.gits-product-column__main-photo-optical-1 {
  position: absolute;
  left: 10%;
}
@media screen and (min-width: 768px) {
  .gits-product-column__main-photo-optical-1 {
    top: 0 !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__main-photo-optical-1 {
    left: 5%;
  }
}
.gits-product-column__main-photo-optical-2 {
  position: absolute;
  top: 20%;
  right: 10%;
}
@media screen and (min-width: 768px) {
  .gits-product-column__main-photo-optical-2 {
    top: 30% !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__main-photo-optical-2 {
    margin-top: -12vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__main-photo-optical-2 {
    margin-top: -44vw !important;
    right: 5%;
  }
}
.gits-product-column__column {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.gits-product-column__column.is-optical {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
@media screen and (min-width: 768px) {
  .is-optical .gits-product-column__column-text {
    padding-top: 60px !important;
    padding-left: 1.5vw !important;
  }
  .is-optical .gits-product-column__column-text-title {
    margin-left: 0 !important;
    text-align: left !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column {
    display: block;
  }
}
.gits-product-column__column-photo {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column-photo {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-photo {
    width: 100%;
  }
}
.is-optical .gits-product-column__column-photo {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767px) {
  .is-optical .gits-product-column__column-photo {
    display: block;
  }
}
.gits-product-column__column-photo-photo {
  width: 80%;
  margin-top: -5vw !important;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column-photo-photo {
    width: 60%;
    margin-top: 0vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-photo-photo {
    width: 60%;
    margin-top: 5vw !important;
    margin-bottom: 5vw !important;
  }
}
@media screen and (max-width: 767px) {
  .is-optical .gits-product-column__column-photo-photo {
    width: 70%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media screen and (max-width: 767px) {
  .is-optical .gits-product-column__column-photo-photo:nth-child(1) {
    margin-top: -20vw !important;
  }
}
.is-optical .gits-product-column__column-photo-photo:nth-child(2) {
  margin-left: -3em !important;
  margin-top: 8vw !important;
}
@media screen and (max-width: 767px) {
  .is-optical .gits-product-column__column-photo-photo:nth-child(2) {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -8vw !important;
  }
}
.gits-product-column__column-photo-photo.is-glasses-front {
  padding-top: 5vw !important;
}
.gits-product-column__column-text {
  width: 50%;
  padding-left: 1.5vw !important;
  padding-right: 1.5vw !important;
  text-align: left !important;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column-text {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text {
    width: 100%;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}
.gits-product-column__column-text-title {
  font-family: "Astra", sans-serif !important;
  font-size: 1.4vw !important;
  letter-spacing: 0.1em !important;
  line-height: 1.3 !important;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
  text-transform: none !important;
  text-align: left !important;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text-title {
    font-size: 20px !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
    -webkit-text-stroke: 0.5px #fff;
  }
}
.gits-product-column__column-text-title .char {
  padding-top: 5px !important;
}
.gits-product-column__column-text-subtitle {
  font-family: "Astra", sans-serif !important;
  font-size: 0.9vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: #fff;
  padding-bottom: 10px !important;
  margin-left: 0 !important;
  text-transform: none !important;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }
}
.gits-product-column__column-text-subtitle .char {
  padding-top: 5px !important;
}
.gits-product-column__column-text-text {
}
.gits-product-column__column-text-text p {
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  color: #fff;
  font-weight: 200 !important;
  padding-bottom: 1em !important;
}
.gits-product-column__column-text-text p span {
  display: block;
}
.gits-product-column__column-text-text p span.line1,
.gits-product-column__column-text-text p span.line2,
.gits-product-column__column-text-text p span.line3,
.gits-product-column__column-text-text p span.line4,
.gits-product-column__column-text-text p span.line5,
.gits-product-column__column-text-text p span.line6 {
  margin-left: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text-text p span {
    display: inline;
  }
  .gits-product-column__column-text-text p span.line1 {
    margin-left: 0em !important;
  }
  .gits-product-column__column-text-text p span.line2 {
    margin-left: 0em !important;
  }
  .gits-product-column__column-text-text p span.line3 {
    margin-left: 0em !important;
  }
  .gits-product-column__column-text-text p span.line4 {
    margin-left: 0em !important;
  }
  .gits-product-column__column-text-text p span.line5 {
    margin-left: 0em !important;
  }
  .gits-product-column__column-text-text p span.line6 {
    margin-left: 0em !important;
  }
}
.gits-product-column__column-text-text p sup {
  font-size: 70%;
  margin-left: 2px;
  margin-right: 2px;
}
.gits-product-column__column-text-spec {
  display: flex;
  align-items: center;
  padding-bottom: 2em !important;
  margin-left: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text-spec {
    margin-left: 0em !important;
  }
}
.gits-product-column__column-text-spec .number {
  display: inline !important;
  vertical-align: middle !important;
  font-family: "glitch", sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.2em;
  line-height: 20px;
  color: #fff;
  margin-right: 2em !important;
}
.gits-product-column__column-text-spec .price {
  display: inline !important;
  vertical-align: middle !important;
  font-family: "glitch", sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.2em;
  line-height: 20px;
  color: #fff;
  margin-right: 2em !important;
}
.gits-product-column__column-text-spec .yen {
  font-family: JINS_NextRegular, sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.gits-product-column__column-text-spec .limited {
  font-family: JINS_NextRegular, sans-serif;
  font-size: 13px !important;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-text-spec {
    flex-wrap: wrap;
  }
  .gits-product-column__column-text-spec .limited {
    width: 100%;
    margin-top: 4px;
  }
}
.gits-product-column__column-btn {
  margin-left: 1.5vw !important;
  position: relative;
  width: 360px;
  height: 60px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column-btn {
    width: 288px;
    height: 48px;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 288px !important;
    height: 48px !important;
  }
}
.gits-product-column__column-btn a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #540578;
  text-decoration: none;
  font-family: 'Astra', sans-serif !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}
.gits-product-column__column-btn::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 12px;
  height: 100%;
  background: #fff;
  -webkit-transform: skewX(-35deg);
      -ms-transform: skewX(-35deg);
          transform: skewX(-35deg);
}
.gits-product-column__column-btn::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: 8px;
  height: 100%;
  background: #fff;
  -webkit-transform: skewX(-35deg);
      -ms-transform: skewX(-35deg);
          transform: skewX(-35deg);
}
.gits-product-column__column-btn:hover a {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  background: #5d1fd2;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-btn {
    width: 100%;
    height: 88px;
  }
  .gits-product-column__column-btn a {
    font-size: 14px !important;
    line-height: 1 !important;
  }
  .gits-product-column__column-btn::before {
    left: -28px;
    width: 12px;
  }
  .gits-product-column__column-btn::after {
    left: -12px;
    width: 6px;
  }
}
.gits-product-column__column-notice {
  position: absolute;
  bottom: 0;
  right: 2vw;
  width: 420px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-product-column__column-notice {
    margin-left: 30px !important;
    margin-top: 30px !important;
    position: relative;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-notice {
    margin-left: 0px !important;
    margin-top: 13px !important;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}
@media screen and (min-width: 768px) {
  /* Sunglasses notice only — optical notice is position:relative, would shift down */
  .gits-product-column__column-notice:not(.is-optical) {
    top: 300px !important;
  }
}
.gits-product-column__column-notice.is-optical {
  width: 500px;
  position: relative;
  left: 1.5vw;
  right: auto;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-notice.is-optical {
    width: 100%;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-notice ul {
    padding-inline-start: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}
.gits-product-column__column-notice ul li {
  position: relative;
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color: #fff;
  padding-bottom: 4px !important;
  list-style: none;
}
.gits-product-column__column-notice ul li::before {
  display: none;
}
.gits-product-column__column-notice ul li:nth-child(2),
.gits-product-column__column-notice ul li:nth-child(3),
.gits-product-column__column-notice ul li:nth-child(4),
.gits-product-column__column-notice ul li:nth-child(5),
.gits-product-column__column-notice ul li:nth-child(6) {
  margin-left: 0 !important;
}
@media screen and (max-width: 767px) {
  .gits-product-column__column-notice ul li:nth-child(2) {
    margin-left: 0em;
  }
  .gits-product-column__column-notice ul li:nth-child(3) {
    margin-left: 0em;
  }
  .gits-product-column__column-notice ul li:nth-child(4) {
    margin-left: 0em;
  }
  .gits-product-column__column-notice ul li:nth-child(5) {
    margin-left: 0em;
  }
  .gits-product-column__column-notice ul li:nth-child(6) {
    margin-left: 0em;
  }
}
.gits-product-column__accessory {
  width: 45%;
  margin-left: auto !important;
  margin-right: 2vw !important;
}
@media screen and (min-width: 768px) {
  .gits-product-column__accessory {
    margin-top: -50px !important; /* pulls accessory block up, reducing section height */
  }
}
@media screen and (max-width: 767px) {
  .gits-product-column__accessory {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
  }
}
.gits-product-column__accessory-inner {
  position: relative;
}
.gits-product-column__accessory-photo {
  position: relative;
}
.gits-product-column__accessory-text p {
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .gits-product-column__accessory-text {
    padding-right: 5vw !important;
  }
}

.gits-tv__copyright {
  text-align: center;
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 12px !important;
  color: #fff !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  font-weight: 200 !important;
  padding-top: 3vw;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .gits-tv__copyright {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    padding-bottom: 20px !important;
  }
}

.gits-tv {
  width: 100%;
  position: relative;
  background-color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  flex-wrap: wrap;
  padding-top: 10vw !important;
  padding-bottom: 4vw !important;
}
@media screen and (max-width: 767px) {
  .gits-tv {
    display: block;
  }
}
.gits-tv__inner {
  width: 100%;
  max-width: 940px;
  padding-left: 30px !important;
  padding-right: 30px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 5vw !important;
}
@media screen and (min-width: 1140px) and (max-width: 1279px) {
  .gits-tv__inner {
    max-width: 75%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1139px) {
  .gits-tv__inner {
    max-width: 70%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-tv__inner {
    max-width: 80%;
  }
}
@media screen and (max-width: 767px) {
  .gits-tv__inner {
    display: block;
  }
}
.gits-tv__photo {
  width: 45%;
}
@media screen and (max-width: 767px) {
  .gits-tv__photo {
    width: 100%;
  }
}
.gits-tv__text {
  width: 55%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  .gits-tv__text {
    display: block;
    width: 100%;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}
.gits-tv__text-inner {
  width: 90%;
}
@media screen and (max-width: 767px) {
  .gits-tv__text-inner {
    width: 100%;
  }
}
.gits-tv__text-logo {
  width: 80%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 20px !important;
}
@media screen and (max-width: 767px) {
  .gits-tv__text-logo {
    margin-top: 30px !important;
    width: 90%;
  }
}
.gits-tv__text-text p {
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  color: #fff;
  font-weight: 200 !important;
  padding-bottom: 20px !important;
}
@media screen and (max-width: 767px) {
  .gits-tv__text-text p {
    font-size: 13px !important;
    text-align: center !important;
  }
}
.gits-tv__text-info p {
  font-family: JINS_NextRegular, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  color: #fff;
  font-weight: 200 !important;
  padding-bottom: 30px !important;
}
@media screen and (max-width: 767px) {
  .gits-tv__text-info p {
    font-size: 12px !important;
    text-align: center !important;
  }
}
.gits-tv__text-link {
  position: relative;
}
.gits-tv__text-link a {
  position: relative;
  display: block;
  width: 100%;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 14px !important;
  letter-spacing: 0;
  line-height: 50px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-decoration: none;
  padding-left: 30px !important;
  background-image: url(/cdn/shop/files/jins-gits-icon-link.svg);
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 9px 7px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-tv__text-link a {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 13px !important;
    letter-spacing: 0;
    line-height: 50px;
  }
}
@media screen and (max-width: 767px) {
  .gits-tv__text-link a {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 12px !important;
    letter-spacing: 0;
    line-height: 50px;
  }
}

.gits-copyright {
  width: 100%;
  background-color: #000;
  text-align: center;
  height: 100px;
}
.gits-copyright p {
  font-size: 12px;
  color: #fff;
}

.gits-foot {
  position: relative;
  background-color: #000;
  background-image: url(/cdn/shop/files/jins-gits-bg-01.webp);
  background-size: 100% auto;
  line-height: 0;
  width: 100%;
  aspect-ratio: 10/6;
  z-index: 1;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-foot {
    aspect-ratio: 10/8;
  }
}
@media screen and (max-width: 767px) {
  .gits-foot {
    aspect-ratio: 10/12;
  }
}
.gits-foot__copy {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Astra", JINS_NextRegular, sans-serif !important;
  font-size: 4vw !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  white-space: nowrap;
  text-align: center;
  font-weight: 200 !important;
  color: #fff !important;
  overflow: hidden;
}
.gits-foot__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/cdn/shop/files/jins-gits-bg-noise-animation.webp);
  background-size: 256px 256px;
  opacity: 0.5;
  background-repeat: repeat;
  mix-blend-mode: color-burn;
}
.gits-foot__bgmovie {
  position: absolute;
  width: 100%;
  aspect-ratio: 1920/1080;
  top: 0;
  left: 0;
  mix-blend-mode: color-dodge;
}
.gits-foot__bgmovie-shadow-top, .gits-foot__bgmovie-shadow-bottom {
  position: absolute;
  width: 100%;
  height: 20vw;
  z-index: 9;
}
.gits-foot__bgmovie-shadow-top {
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
  background: linear-gradient(to bottom, #000, transparent);
}
.gits-foot__bgmovie-shadow-bottom {
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
  background: linear-gradient(to bottom, transparent, #000);
}
.gits-foot__bgmovie-movie {
  position: relative;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1920/1080;
  line-height: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0.3;
}

.gits-foot-glasses {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 35%;
  transform: translateY(-50%);
}
.gits-foot-glasses__btns {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .gits-foot-glasses {
    width: 95%;
    top: 10vw;
    left: 5vw;
    transform: none;
  }
}
.gits-foot-glasses__glasses {
  position: relative;
}
.gits-foot-glasses__btns {
  margin-top: 12vw !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 28px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-foot-glasses__btns {
    margin-top: 12vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-foot-glasses__btns {
    margin-top: 40vw !important;
  }
}
.gits-foot-glasses__btns-btn {
  position: relative;
  width: 360px;
  height: 60px;
  aspect-ratio: 360/60;
  /* 左の太いライン */
  /* 左の細いライン */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-foot-glasses__btns-btn {
    width: 288px;
    height: 48px;
    margin-left: -120px !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-foot-glasses__btns-btn {
    width: 288px !important;
    height: 48px !important;
  }
}
.gits-foot-glasses__btns-btn:first-child {
  margin-right: -6vw !important;
}
.gits-foot-glasses__btns-btn a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #540578;
  text-decoration: none;
  font-size: 2rem;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 16px !important;
  letter-spacing: 0;
  line-height: 1;
  /* 右側を斜めに */
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  -webkit-transition: background 0.35s ease, color 0.35s ease, -webkit-transform 0.35s ease;
  transition: background 0.35s ease, color 0.35s ease, -webkit-transform 0.35s ease;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease, -webkit-transform 0.35s ease;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .gits-foot-glasses__btns-btn a {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 14px !important;
    letter-spacing: 0;
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .gits-foot-glasses__btns-btn a {
    font-family: JINS_NextRegular, sans-serif;
    font-size: 12px !important;
    letter-spacing: 0;
    line-height: 1;
  }
}
.gits-foot-glasses__btns-btn::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 12px;
  height: 100%;
  background: #fff;
  -webkit-transform: skewX(-35deg);
      -ms-transform: skewX(-35deg);
          transform: skewX(-35deg);
}
.gits-foot-glasses__btns-btn::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: 8px;
  height: 100%;
  background: #fff;
  -webkit-transform: skewX(-35deg);
      -ms-transform: skewX(-35deg);
          transform: skewX(-35deg);
}
.gits-foot-glasses__btns-btn:hover a {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  background: #5d1fd2;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .gits-foot-glasses__btns-btn {
    width: 100%;
    height: 88px;
  }
  .gits-foot-glasses__btns-btn a {
    font-size: 1.5rem;
  }
  .gits-foot-glasses__btns-btn::before {
    left: -2px;
    width: 12px;
  }
  .gits-foot-glasses__btns-btn::after {
    left: -14px;
    width: 6px;
  }
}

.gits-foot-bottom {
  position: absolute;
  top: 32vw;  /* mobile default */
  width: 100%;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}
@media screen and (min-width: 768px) {
  .gits-foot-bottom {
    top: 10vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom {
    top: 40vw;
  }
}
.gits-foot-bottom__text {
  position: relative;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__text {
    position: absolute;
    top: -30vw;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}
.gits-foot-bottom__text-productname {
  position: relative;
  font-family: "Astra", sans-serif !important;
  font-size: 2.5vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__text-productname {
    font-family: "Astra", sans-serif !important;
    font-size: 5vw !important;
    letter-spacing: 0.2em;
    line-height: 1.2;
  }
}
.gits-foot-bottom__text-productname::before, .gits-foot-bottom__text-productname::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  pointer-events: none;
  color: transparent;
  opacity: 0;
}
.gits-foot-bottom__text-productname::before {
  -webkit-text-stroke: 1px rgba(0, 255, 255, 0.7);
  -webkit-transform: translateX(-1px);
      -ms-transform: translateX(-1px);
          transform: translateX(-1px);
}
.gits-foot-bottom__text-productname::after {
  -webkit-text-stroke: 1px rgba(255, 0, 120, 0.65);
  -webkit-transform: translateX(1px);
      -ms-transform: translateX(1px);
          transform: translateX(1px);
}
.gits-foot-bottom__text-productname.is-outline-idle::before, .gits-foot-bottom__text-productname.is-outline-idle::after {
  opacity: 0.45;
}
.gits-foot-bottom__text-productname.is-outline-glitch::before, .gits-foot-bottom__text-productname.is-outline-glitch::after {
  opacity: 1;
}
.gits-foot-bottom__text-copy-ja {
  padding-top: 1.8vw !important;
  font-family: JINS_NextRegular, sans-serif;
  font-size: 2.2vw !important;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #fff;
  font-weight: 200;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-foot-bottom__text-copy-en {
  padding-top: 1.8vw !important;
  font-family: "Astra", sans-serif !important;
  font-size: 0.6vw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: #fff;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-foot-bottom__text-text-en {
  position: relative;
}
.gits-foot-bottom__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  aspect-ratio: 1/1;
}
.gits-foot-bottom__content-time {
  position: absolute;
  top: 30%;
  right: 20%;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__content-time {
    top: 100%;
    right: 0;
  }
}
.gits-foot-bottom__content-time-time {
  font-family: "glitch", sans-serif;
  font-size: 11px !important;
  letter-spacing: 0.3em;
  line-height: 1;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__content-time-time {
    font-family: "glitch", sans-serif;
    font-size: 9px !important;
    letter-spacing: 0.3em;
    line-height: 1;
  }
}
.gits-foot-bottom__content-time-time .time-char {
  display: inline-block;
}
.gits-foot-bottom__content-time-time .time-digit {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.gits-foot-bottom__content-time-time .time-digit__inner {
  display: block;
  -webkit-animation: digitUp 0.45s ease;
          animation: digitUp 0.45s ease;
}
.gits-foot-bottom__content-time-time .time-colon {
  -webkit-animation: colonBlink 1s steps(1, end) infinite;
          animation: colonBlink 1s steps(1, end) infinite;
}
@keyframes digitUp {
  from {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}
@keyframes colonBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
.gits-foot-bottom__content-time-text {
  position: relative;
}
.gits-foot-bottom__content-buyonline {
  position: absolute;
  right: 2vw;
  width: 10vw;
  aspect-ratio: 1/1;
  cursor: pointer;
  pointer-events: all;
}
.gits-foot-bottom__content-buyonline:hover .gits-foot-bottom__content-buyonline-circle-1 {
  opacity: 1;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
.gits-foot-bottom__content-buyonline:hover .gits-foot-bottom__content-buyonline-circle-2 {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.gits-foot-bottom__content-circle {
  position: absolute;
  top: 10vw;
  right: 14vw;
  width: 10vw;
  aspect-ratio: 1;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__content-circle {
    right: 7vw;
    width: 20vw;
  }
}
.gits-foot-bottom__content-circle span {
  position: absolute;
  inset: 0;
  border: 0.1px solid #fff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: circlePulse 3.4s ease-out infinite;
          animation: circlePulse 3.4s ease-out infinite;
}
.gits-foot-bottom__content-circle .circle1 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.gits-foot-bottom__content-circle .circle2 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.gits-foot-bottom__content-circle .circle3 {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
@keyframes circlePulse {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  8% {
    opacity: 0.2;
  }
  70% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 0;
  }
}
.gits-foot-bottom__content-number {
  position: absolute;
  top: -5vw;
  right: 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  .gits-foot-bottom__content-number {
    top: -20vw;
    right: 0vw;
  }
}
.gits-foot-bottom__content-number .num {
  font-family: "glitch", sans-serif;
  font-size: 10px !important;
  letter-spacing: 0.2em;
  line-height: 0.5;
  color: #fff;
  opacity: 0.8;
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-foot-bottom__content-number .bar {
  width: 6vw;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-animation: cyberGlitch 3s infinite;
          animation: cyberGlitch 3s infinite;
}
.gits-foot-bottom__content-bar-vertical {
  top: -8vw;
  right: -10px;
  width: 14vw;
}
.gits-foot-bottom__content-bar-angle.is-foot-angle-1 {
  top: 10vw;
  width: 28vw;
}
.gits-foot-bottom__content-bar-angle.is-foot-angle-2 {
  top: -40vw;
  right: -10vw;
  width: 28vw;
}
.gits-foot-bottom__content-dot {
  position: absolute;
  width: 50%;
  right: 0;
  top: 10vw;
}
/* ============================================
   CSS Logo Animation (replaces GSAP DrawSVG)
   ============================================ */
@keyframes gitsLogoDraw {
  0%   { stroke-dashoffset: 2000; fill-opacity: 0; stroke-opacity: 0.6; }
  40%  { stroke-dashoffset: 0;    fill-opacity: 0; stroke-opacity: 0.6; }
  65%  { stroke-dashoffset: 0;    fill-opacity: 1; stroke-opacity: 0;   }
  85%  { stroke-dashoffset: 0;    fill-opacity: 1; stroke-opacity: 0;   }
  95%  { stroke-dashoffset: 0;    fill-opacity: 0; stroke-opacity: 0.3; }
  100% { stroke-dashoffset: 2000; fill-opacity: 0; stroke-opacity: 0;   }
}

.gits-kv__logo.is-animating path,
.gits-kv__logo.is-animating polygon {
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill-opacity: 0;
  animation: gitsLogoDraw 6s ease-in-out infinite;
}

.gits-kv__logo.is-animating path:nth-child(odd),
.gits-kv__logo.is-animating polygon:nth-child(odd) {
  animation-delay: 0.15s;
}

/* ============================================
   JINS US — page wrapper + section gap fix
   ============================================ */
#jins-ghost-in-the-shell {
  overflow-x: hidden;
}

/* Remove white gap — Dawn adds 55px margin-top to the footer section */
#shopify-section-footer {
  margin-top: 0 !important;
}

/* ============================================
   KV Section Navigation (not in JP HTML —
   added to match live JP site)
   ============================================ */
.gits-kv-bottom__content-nav {
  position: absolute;
  right: 0;
  top: 38%;
  text-align: right;
  pointer-events: none;
}
.gits-kv-bottom__content-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.gits-kv-bottom__content-nav li {
  font-family: "Astra", sans-serif !important;
  font-size: 0.65vw !important;
  letter-spacing: 0.15em;
  color: #fff;
  line-height: 2;
  opacity: 0.6;
  white-space: nowrap;
}
.gits-kv-bottom__content-nav .nav-prefix {
  opacity: 0.5;
  margin-right: 0.2em;
}

/* ============================================
   Left edge breathing room
   ============================================ */
@media screen and (min-width: 768px) {
  .gits-kv-bottom__text,
  .gits-concept__content,
  .gits-concept__content-date,
  .gits-foot-bottom__text {
    padding-left: 1.5vw !important;
  }
}
@media screen and (max-width: 767px) {
  .gits-kv-bottom__text,
  .gits-concept__content,
  .gits-concept__content-date,
  .gits-concept__content-concept,
  .gits-detail-column__text-inner,
  .gits-foot-bottom__text {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .gits-concept__content-concept .subtitle-en {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}
/* ============================================
   KV bottom text positioning — desktop only
   ============================================ */
@media screen and (min-width: 768px) {
  .gits-kv-bottom__text-copy-ja {
    margin-top: -4vw !important;
  }
  .gits-kv-bottom__text-copy-en {
    margin-top: -2vw !important;
  }
  #jins-ghost-in-the-shell .gits-kv-bottom__text-text-en {
    margin-top: 2vw !important;  /* higher specificity to override JP negative margin */
  }
}
/* ============================================
   Section transition gradients — subtle dark
   purple tones for smooth seams
   ============================================ */

/* Concept → Detail: very subtle fade */
.gits-concept::after {
  content: '';
  position: absolute;
  bottom: -5vw;
  left: 0;
  width: 100%;
  height: 12vw;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,2,12,0.6) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Detail top: gentle fade from dark into purple */
.gits-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15vw;
  background: linear-gradient(to bottom, rgba(5,2,12,0.7) 0%, rgba(5,2,12,0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Detail → Product: subtle bottom fade */
.gits-detail::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12vw;
  background: linear-gradient(to bottom, transparent 0%, rgba(5,2,12,0.7) 100%);
  pointer-events: none;
  z-index: 2;
}
/* ============================================================
   PROMOTION — YouTube embed
   ============================================================ */
#jins-ghost-in-the-shell .gits-promotion {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #jins-ghost-in-the-shell .gits-promotion {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
#jins-ghost-in-the-shell .gits-promotion__movie-wrap {
  position: relative;
  width: 1240px;
  aspect-ratio: 1920/1080;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
  background-color: #000;
}
#jins-ghost-in-the-shell .gits-promotion__player {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  background-color: #000;
}
#jins-ghost-in-the-shell .gits-promotion__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#jins-ghost-in-the-shell .gits-promotion__player.is-active {
  display: block;
}
#jins-ghost-in-the-shell .gits-promotion__movie-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s ease;
  background-color: #000;
}
#jins-ghost-in-the-shell .gits-promotion__movie-thumb iframe {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border: 0;
}
#jins-ghost-in-the-shell .gits-promotion__movie-thumb.is-hide {
  opacity: 0;
  pointer-events: none;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play.is-hide {
  opacity: 0;
  visibility: hidden;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-inner {
  display: block;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn {
  width: 120px;
  height: 120px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 40px !important;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-rotate {
  transform-origin: center;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-rotate-1 {
  animation: playCircleRotate1 8s linear infinite;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-rotate-2 {
  animation: playCircleRotate2 9.5s linear infinite;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-line {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 0 302;
  stroke-dashoffset: 0;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-line-1 {
  animation: playCircleDash1 2.4s ease-in-out infinite;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-circle-line-2 {
  opacity: 0.3;
  animation: playCircleDash2 2.4s ease-in-out infinite 0.35s;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-btn .play-triangle {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: playTriangleOutlineFill 2.4s ease-in-out infinite;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-text {
  text-align: center;
  display: block;
  color: #fff;
  font-family: 'Astra', sans-serif;
  font-size: 14px !important;
  letter-spacing: 0.1em;
  line-height: 1;
  width: 180px;
  margin: 10px auto 0;
  overflow: hidden;
  white-space: nowrap;
}
#jins-ghost-in-the-shell .gits-promotion__movie-btn-play-marquee {
  display: flex;
  width: max-content;
  animation: movieMarquee 32s linear infinite;
}
@keyframes playCircleDash1 {
  0%  { stroke-dasharray: 0 302;   stroke-dashoffset: 0;    opacity: 1; }
  32% { stroke-dasharray: 190 112; stroke-dashoffset: 0;    opacity: 1; }
  56% { stroke-dasharray: 230 72;  stroke-dashoffset: -80;  opacity: 1; }
  82% { stroke-dasharray: 0 302;   stroke-dashoffset: -302; opacity: 1; }
  100%{ stroke-dasharray: 0 302;   stroke-dashoffset: -302; opacity: 0; }
}
@keyframes playCircleDash2 {
  0%  { stroke-dasharray: 0 276;   stroke-dashoffset: 0;    opacity: 0; }
  28% { stroke-dasharray: 150 126; stroke-dashoffset: -20;  opacity: 0.3; }
  58% { stroke-dasharray: 210 66;  stroke-dashoffset: -90;  opacity: 0.3; }
  88% { stroke-dasharray: 0 276;   stroke-dashoffset: -276; opacity: 0.3; }
  100%{ stroke-dasharray: 0 276;   stroke-dashoffset: -276; opacity: 0; }
}
@keyframes playCircleRotate1 {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
@keyframes playCircleRotate2 {
  from { transform: rotate(40deg); }
  to   { transform: rotate(-320deg); }
}
@keyframes playTriangleOutlineFill {
  0%, 22% { opacity: 0; fill: transparent; stroke: #fff; transform: scale(0.8); }
  36%     { opacity: 1; fill: transparent; stroke: #fff; transform: scale(1); }
  54%     { opacity: 1; fill: #fff;        stroke: #fff; transform: scale(1); }
  76%     { opacity: 1; fill: #fff;        stroke: #fff; transform: scale(1); }
  100%    { opacity: 0; fill: transparent; stroke: #fff; transform: scale(0.85); }
}
@keyframes movieMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Global CTA font override — Astra on all button/link anchors */
#jins-ghost-in-the-shell .date-btn a,
#jins-ghost-in-the-shell .gits-product-column__column-btn a,
#jins-ghost-in-the-shell .gits-tv__text-link a,
#jins-ghost-in-the-shell .gits-foot-glasses__btns-btn a {
  font-family: 'Astra', sans-serif !important;
  letter-spacing: 0.1em !important;
}

/* ============================================================
   FOOTER — Shop Collection button spacing
   ============================================================ */
#jins-ghost-in-the-shell .gits-foot-glasses__btns-btn--collection {
  margin-top: 20px !important;
}

/* ============================================================
   PRODUCT COLUMNS — breathing space below CTA before asterisk copy
   ============================================================ */
#jins-ghost-in-the-shell .gits-product-column__column-btn {
  margin-bottom: 32px !important;
}

/* ============================================================
   OPTICAL — spacing between the two SKU/CTA rows
   ============================================================ */
#jins-ghost-in-the-shell .gits-product-column__column-text-spec + .gits-product-column__column-btn + .gits-product-column__column-text-spec {
  margin-top: 32px !important;
}

/* ============================================================
   OPTICAL — mobile image interleaving
   ============================================================ */

/* Hide mobile duplicate images on desktop */
#jins-ghost-in-the-shell .gits-optical-photo-mobile {
  display: none;
}

/* On mobile: hide the desktop photo wrapper, show inline images */
@media screen and (max-width: 767px) {
  #jins-ghost-in-the-shell .gits-optical-photo-desktop {
    display: none !important;
  }
  #jins-ghost-in-the-shell .gits-optical-photo-mobile {
    display: block;
    width: 70%;
    margin: 5vw auto !important;
  }
  #jins-ghost-in-the-shell .gits-optical-photo-mobile img {
    width: 100%;
    display: block;
  }
}

/* ============================================================
   OPTICAL — mobile: nudge background optical-2 image up
   ============================================================ */
@media screen and (max-width: 767px) {
  #jins-ghost-in-the-shell .gits-product-column__main-photo-optical-2 {
    margin-top: -200px !important;
  }
}

/* ============================================================
   OPTICAL — mobile inline images size increase
   ============================================================ */
@media screen and (max-width: 767px) {
  #jins-ghost-in-the-shell .gits-optical-photo-mobile {
    width: 85% !important;
  }
}