html,body{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  /* cursor: none; */
}
html{
  font-size: 0px;
  background-color: #fff;
}
a{
  text-decoration: none;
}

#all_wrap{
  position: relative;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  min-width: 1200px;
  max-width: 1920px;
  min-height: 100vh;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  overflow: hidden;
  /*
  background:repeating-linear-gradient(
  -45deg,
  #ffffff,
  #ffffff 7px,
  #fffbf0 0,
  #fffbf0 14px
  );
  */
  background-color: #ffffff;
}

#shop{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center top;
}

#shop > .headerBG{
  position: relative;
  width: 100%;
  height: 370px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
}

#shop > .iconWrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  position: relative;
  width: 1000px;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  padding: 0;
}
#shop > .iconWrap > div{
  display: inline-block;
  position: relative;
  width: 275px;
  height: 62px;
  transition-duration: 0.5s;
  transform: translateY(0px);
  cursor: pointer;
}
#shop > .iconWrap > div > img{
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  transition-duration: 1s;
}
#shop > .iconWrap > div.is_select{
  transform: translateY(-5px);
}
#shop > .iconWrap > div > img:first-child{
  opacity: 1;
}
#shop > .iconWrap > div > img:last-child{
  opacity: 0;
}
#shop > .iconWrap > div.is_select > img:first-child{
  opacity: 0;
}
#shop > .iconWrap > div.is_select > img:last-child{
  opacity: 1;
}

#shop > .hogehoge{
  display: block;
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  padding: 0;
}

#shop > .hogehoge > .shopWrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  position: relative;
  width: 1000px;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 70px; */
  padding: 0;
  transition-duration: 1.0s;
}
#shop > .hogehoge > .shopWrap.is_active{
  position: relative;
  transform: translateY(0px);
  opacity: 1;
}
#shop > .hogehoge > .shopWrap{
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(30px);
  opacity: 0;
}
#shop > .hogehoge > .shopWrap > div.shoper{
  display: inline-block;
  position: relative;
  width: 400px;
  height: 1000px;
  height: auto;
  min-height: 800px;
  top: 0;
  left: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding: 0;
  font-family: "M PLUS Rounded 1c";
  text-align: center;
  color: #5e4949;
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
  paint-order: stroke;
}
#shop > .hogehoge > .shopWrap > div.shoper.sofmap{
  width: 890px;
}
#shop > .hogehoge > .shopWrap > div.shoper > h3{
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
}
#shop > .hogehoge > .shopWrap > div.shoper .dot{
  width: calc(100% - 17px);
  height: 5px;
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto;
  margin: 0 10px 14px;
  border: none;
}
#shop > .hogehoge > .shopWrap > div.shoper .charaName{
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
}
#shop > .hogehoge > .shopWrap > div.shoper .goods{
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
}
#shop > .hogehoge > .shopWrap > div.shoper .sampleTmb{
  top: 0;
  left: 0;
  margin: 0;
  margin-bottom: 33px;
  padding: 0;
  border: solid 1px #5e4949;
}
.sofmap_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.sofmap{
  display: inline-block;
  width: auto;
  height: auto;
}
.perspective {
  justify-items: center;
  perspective: 1000px;
  margin-bottom: 100px;
}
.dobule_shoper {
  width: 400px;
  height: 650px;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  animation-name: dobuleShoperAnim;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
.perspective:hover .dobule_shoper {
  /* transform: rotateY(180deg); */
}
@keyframes dobuleShoperAnim {
  0% {
    transform: rotateY(0deg);
	}
	100% {
    transform: rotateY(360deg);
	}
}
.front, .back {
  width: 100%;
  height: auto;
  position: absolute;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}
#shop > .hogehoge > .shopWrap > div.shoper > a{
  display: block;
  position: relative;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  margin: 0;
  margin-bottom: 26px;
  padding: 0;
  cursor: pointer;
  transition-duration: 0.5s;
  opacity: 1;
  transform: translateY(0px);
}
#shop > .hogehoge > .shopWrap > div.shoper > a:hover{
  opacity: 0.8;
  /*
  transform: translateY(0px);
  */
  animation-name: btnAnim;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

#shop > .hogehoge > .shop02Wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  width: 1000px;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 70px; */
  padding: 0;
  transition-duration: 1.0s;
}
#shop > .hogehoge > .shop02Wrap.is_active{
  position: relative;
  transform: translateY(0px);
  opacity: 1;
}
#shop > .hogehoge > .shop02Wrap{
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(30px);
  opacity: 0;
}

#shop > .hogehoge > .shop03Wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  width: 1000px;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 70px; */
  padding: 0;
  transition-duration: 1.0s;
}
#shop > .hogehoge > .shop03Wrap.is_active{
  position: relative;
  transform: translateY(0px);
  opacity: 1;
}
#shop > .hogehoge > .shop03Wrap{
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(30px);
  opacity: 0;
}
#shop > .hogehoge > .shop03Wrap > div.shoper{
  display: inline-block;
  position: relative;
  width: 400px;
  height: 580px;
  height: auto;
  min-height: 580px;
  top: 0;
  left: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding: 0;
}
#shop > .hogehoge > .shop03Wrap > div.shoper > img{
  top: 0;
  left: 0;
  margin: 0;
  margin-bottom: 33px;
  padding: 0;
}
#shop > .hogehoge > .shop03Wrap > div.shoper > a{
  display: block;
  display: none;
  position: relative;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  margin: 0;
  margin-bottom: 26px;
  padding: 0;
  cursor: pointer;
  transition-duration: 0.5s;
  opacity: 1;
  transform: translateY(0px);
}
#shop > .hogehoge > .shop03Wrap > div.shoper > a:hover{
  opacity: 0.8;
  /*
  transform: translateY(0px);
  */
  animation-name: btnAnim;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes btnAnim {
  0% {
    transform: skew(5deg, 4.2deg);
	}
	10% {
		transform: skew(-4deg, -3deg);
	}
  20% {
    transform: skew(3deg, 2.2deg);
  }
  30% {
    transform: skew(-2deg, -1.5deg);
  }
  40% {
    transform: skew(0.9deg, 0.9deg);
  }
  50% {
    transform: skew(-0.6deg, -0.6deg);
  }
  60% {
    transform: skew(0.3deg, 0.3deg);
  }
  70% {
    transform: skew(-0.2deg, -0.2deg);
  }
  80% {
    transform: skew(0.1deg, 0.1deg);
  }
	100% {
    transform: skew(0deg, 0deg);
	}
}
#shop > .hogehoge > .shopWrap > div.shoper > a[href^="http"],
#shop > .hogehoge > .shop03Wrap > div.shoper > a[href^="http"]{
  display: block;
}

.snowWrap{
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}
.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}