@charset "utf-8";
/*------ recet ------*/
#snpit ul {
  margin: 0;
}
#snpit li:before {
  content: "";
}
#snpit img {
  width: 100%;
}
/*------ common ------*/
#snpit .pc {
  display: inline;
}
#snpit .sp {
  display: none;
}
/*------ color ------*/
#snpit {
  --white-color: #fafafa;
  --balck-color: #121212;
  --snpit-color: #47a3a1;
}
.snpit-color {
  color: var(--snpit-color);
}
#about {
  background-color: #cdcdcd;
}
#gshock-cam {
  background-color: #a5a5a5;
}
#gshock-mint-scroll {
  background-color: #5d5d5d;
}
#sales-info {
  background-color: #121212;
}
#about :where(h2, p, li, dt, dd) {
  color: var(--balck-color);
}
#gshock-cam :where(h2, p, li, dt, dd, a) {
  color: var(--balck-color);
}
#gshock-mint-scroll :where(h2, p, li, dt, dd, a) {
  color: var(--white-color);
}
#sales-info :where(h2, p, li, dt, dd, a) {
  color: var(--white-color);
}
/*--------------- font ---------------*/
#snpit h2 {
  font-size: min(9vw, 40px);
  line-height: 1.5;
}
#snpit h3 {
  font-size: min(7vw, 40px);
  line-height: 1.5;
  text-align: center;
  color: var(--snpit-color);
}
#snpit :where(p, li, dt, dd) {
  font-size: min(4.3vw, 18px);
  line-height: 1.8;
  margin-bottom: 1em;
}
#snpit a {
  text-decoration: none;
  transition: .3s ease-out;
  color: var(--snpit-color);
}
#snpit #about a:hover {
  text-decoration: underline;
}
#snpit .note {
  font-size: min(4.0vw, 14px);
}
#snpit .orbitron {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
/*--------------- btn ---------------*/
#snpit .snpit-btn {
  background: var(--snpit-color);
  border-color: var(--snpit-color);
  color: #ffffff;
  transition: .3s ease-out;
  max-width: 500px;
  border-radius: 30px;
  font-size: min(4vw, 18px);
  font-weight: bold;
  margin: 0 auto 1rem;
}
#snpit .snpit-btn .cmp-button__text {
  position: relative;
}
#snpit .snpit-btn .cmp-button__text::after {
  content: "";
  position: absolute;
  transition: right .2s ease-out, border-color.3s ease-out;
  top: 50%;
  right: -1rem;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-color: #ffffff;
  transform: translateY(-50%) rotate(45deg);
}
#snpit .snpit-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--snpit-color);
}
#snpit .snpit-btn:hover .cmp-button__text::after {
  right: -2rem;
  border-color: var(--snpit-color);
}
/*------ all ------*/
#about > .aem-Grid, #gshock-cam > .aem-Grid, #gshock-mint-scroll > .aem-Grid, #sales-info > .aem-Grid {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
/*------ kv ------*/
.switch-container:has(>#kv-bg) {
  display: flex;
  justify-content: flex-end;
}
#kv {
  background: #ffffff;
}
#kv .aem-Grid {
  position: relative;
}
#kv-bg {
  width: 100%;
}
#kv-text {
  position: absolute;
  width: 50%;
  top: 40%;
  left: 100px;
  transform: translateY(-50%);
  text-align: center;
}
#kv-text p {
  color: var(--balck-color);
}
#kv-text > .aem-Grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#kv-text h1 {
  width: 100%;
}
/*------ lead ------*/
#lead {
  width: 40%;
  margin: 0 auto 100px;
  text-align: center;
}
#lead p {
  font-size: min(4.5vw, 22px);
  margin-bottom: 2rem;
}
#lead .image {
  border: solid 1px #c5c5c5;
}
/*------ about ------*/
#about {
  padding: 50px 0;
}
#about > .aem-Grid {
  display: flex;
  align-items: center;
}
#about > .aem-Grid > .container {
  width: 40%;
}
#about > .aem-Grid > .text {
  width: 60%;
}
.about__text {
  margin-left: 50px;
}
#about #logo {
  width: 300px;
  margin: 0 auto 30px;
  display: block;
}
/*------ gshock-cam ------*/
#gshock-cam > .aem-Grid {
  padding: 50px 0;
}
.gshock-cam__lead__img {
  width: min(35%, 300px);
  float: right;
  margin: 0 0 0 20px;
}
#gshock-cam h2 {
  text-align: left;
}
#gshock-cam h3 {
  font-size: min(7vw, 40px);
  line-height: 1.5;
  text-align: center;
  color: var(--snpit-color);
  font-weight: normal;
}
#gshock-cam .gcam-contents {
  background: #5d5d5db0;
  border-radius: 30px;
  padding: 30px;
  margin: 30px 0;
}
#gshock-cam .products-name {
  color: #ffffff;
}
.gcam-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gcam-image {
  width: 60%;
}
.watch-product {
  width: 20%;
  text-align: center;
  position: relative;
}
.watch-product::before {
  --size: 50px;
  content: "";
  position: absolute;
  left: -60%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: calc(var(--size) / 2) solid transparent;
  border-bottom: calc(var(--size) / 2) solid transparent;
  border-right: calc(var(--size) / 2 * 1.732) solid #ffffff;
}
.watch-product::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  border: solid 3px var(--snpit-color);
  border-radius: 20px;
  opacity: 0;
  transition: .2s ease-out;
}
.watch-product:hover::after {
  opacity: 1;
}
#snpit-products {
  width: 100%;
  margin: 100px auto;
}
/*------ gshock-mint-scroll ------*/
#gshock-mint-scroll {
  padding: 50px 0;
}
#gshock-mint-scroll__inner > .aem-Grid {
  display: flex;
}
#gshock-mint-scroll__inner > .aem-Grid > .text:nth-child(1) {
  margin-right: 30px;
  width: calc(60% - 30px);
}
#gshock-mint-scroll__inner > .aem-Grid > .text:nth-child(2) {
  width: 40%;
}
.gshock-mint-scroll__image {
  display: flex;
  text-align: center;
}
.gshock-mint-scroll__products img {
  clip-path: polygon(30px 0%, calc(100% - 30px) 0%, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0% calc(100% - 30px), 0% 30px);
}
.gshock-mint-scroll__products + .gshock-mint-scroll__products {
  margin-left: 30px;
}
/*------ sales-info ------*/
#sales-info {
  padding: 50px 0 100px;
}
#sales-info .sales-info-list {
  max-width: 900px;
  margin: 0 auto 30px;
}
#sales-info .sales-info-list :where(p, li, dt, dd) {
  margin: 0;
}
#sales-info h2 {
  text-align: center;
}
.pre-sale .note {
  color: #ffffff;
  border: solid 1px #ffffff;
  margin-left: 10px;
  padding: 10px;
}
.sales-info__price-title {
  display: inline-block;
  width: 18rem;
}
.sales-info-list {
  margin-bottom: 30px;
}
.sales-info-list dl {
  display: grid;
  grid-template-columns: 16rem 1fr;
  border: 1px solid #ffffff;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.sales-info-list dt {
  font-weight: bold;
  padding: 1rem;
  margin: 0;
  background: #316f6d;
  border-bottom: 1px solid #ffffff;
}
.sales-info-list dd {
  padding: 1rem;
  margin: 0;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  line-height: 1.6;
}
.sales-info-list dt:last-of-type, .sales-info-list dd:last-of-type {
  border-bottom: none;
}
#sales-info .note {
  text-align: center;
}
#sales-info .button {
  text-align: center;
}
@media (max-width: 767px) {
  /*------ common ------*/
  #snpit .pc {
    display: none;
  }
  #snpit .sp {
    display: inline;
  }
  /*--------------- font ---------------*/
  #snpit h2 {
    text-align: center;
  }
  /*--------------- kv ---------------*/
  #kv-bg {
    width: 100%;
    padding-top: 40vw;
  }
  #kv-text {
    width: 91%;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
  }
  #kv-text h1 {
    width: 100%;
    padding-bottom: 0;
  }
  #kv-text .kv-text {
    width: 100%;
  }
  /*------ lead ------*/
  #lead {
    width: 100%;
    margin: 0 auto 10vw;
  }
  /*------ about ------*/
  #about {
    padding: 50px 0;
  }
  #about > .aem-Grid {
    display: flex;
    flex-direction: column;
  }
  #about > .aem-Grid > .container {
    width: 100%;
  }
  #about > .aem-Grid > .text {
    width: 100%;
  }
  .about__text {
    margin-left: 0;
    margin-top: 10px;
  }
  /*------ gshock-cam ------*/
  #gshock-cam h2 {
    text-align: left;
  }
  #gshock-cam > .aem-Grid {
    padding: 10vw 0;
  }
  .gcam-inner {
    flex-direction: column-reverse;
    gap: 100px;
  }
  .gcam-image {
    width: 100%;
  }
  .watch-product {
    width: 50%;
  }
  .watch-product::before {
    --size: 50px;
    top: 75vw;
    left: 50%;
    transform: translate(-50%) rotate(-90deg);
  }
  #snpit-products {
    width: 100%;
    margin: 50px auto;
  }
  /*------ gshock-mint-scroll ------*/
  #gshock-mint-scroll__inner > .aem-Grid {
    display: flex;
    flex-direction: column;
  }
  #gshock-mint-scroll__inner > .aem-Grid > .text:nth-child(1) {
    margin-right: 0;
    margin-bottom: 30px;
    width: 100%;
  }
  #gshock-mint-scroll__inner > .aem-Grid > .text:nth-child(2) {
    width: 100%;
  }
  /*------ sales-info ------*/
  .sales-info-list dl {
    grid-template-columns: 1fr;
  }
  .sales-info-list dd {
    border-left: 0 solid #ffffff;
  }
  .sales-info-list dt:last-of-type {
    border-bottom: 1px solid #ffffff;
  }
}