@charset "utf-8";
/* CSS Document */


/*==========
base
==========*/

.simulator{
  position: relative;
  margin-top: 30px;
  margin-bottom: 100px;
}


.simulator-canvas {
  width: 360px;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 15px 20px;
}
.simulator-tshirt {
  width: 210px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 15px 10px;
  position: absolute;
  left: 0;
  top: 0;
}
.simulator-print {
  width: 210px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 15px 10px;
  position: absolute;
  right: 0;
  top: 0;
}


.simulator-title{

}


@media screen and (max-width:768px) {



  .simulator{
    position: relative;
    margin-top: 20px;
    margin-bottom: 50px;
  }


  .simulator-canvas {
    width: auto;
    margin: 0 auto;
    padding: 15px 10px;
    margin-bottom: 8px;
  }
  .simulator-tshirt {
    width: auto;
    padding: 5px 5px;
    position: static;
    margin-bottom: 8px;
  }
  .simulator-print {
    width: auto;
    padding: 5px 5px;
    position: static;
  }



}

/*==========
center
==========*/


.simulator-wear{
  width: 260px;
  margin: 0 auto 20px auto;
  position: relative;
}

.simulator-logo{
	position: absolute;
	top: 72px;
	left: 34px;
	width: 200px;
	z-index: 999;
	text-align: center;
}
.simulator-logo svg{
  width: 140px;
  height: 70px;
  transition:all 0.5s ease;
}


.simulator-data {
  display: table;
  width: 100%;
  border: 1px solid #ccc;
  margin-top: 8px;
}
.simulator-data dt {
  display: table-cell;
  background-color: #f0f0f0;
  width: 40%;
  padding: 8px 10px;
}
.simulator-data dd {
  display: table-cell;
  padding: 8px 10px;
}


@media screen and (max-width:768px) {


  .simulator-wear{;
    margin: 0 auto 10px auto;
  }

  .simulator-logo{
    position: absolute;
    top: 72px;
    left: 34px;
    width: 200px;
    z-index: 999;
    text-align: center;
  }
  .simulator-logo svg{
    width: 140px;
    height: 70px;
    transition:all 0.5s ease;
  }


  .simulator-data {
    margin-top: 4px;
  }
  .simulator-data dt {
    width: 40%;
    padding: 4px 10px;
  }
  .simulator-data dd {
    padding: 4px 10px;
  }

}


/*==========
left
==========*/

.simulator-tshirt-color{
}
.simulator-tshirt-color a{
  display: block;
  width: 30px;
  height: 30px;
  margin: 2px;
  background: url(../../img/design/simulator/bg_shirt.png) no-repeat 0 0 ;
  background-size: contain;
  cursor: pointer;
  float: left;
}


/*
right
*/

.simulator-color-list{

}
.simulator-color-list li{
  float: left;
  margin: 2px;
}
.simulator-color-list li a{
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #454545;
  box-sizing: border-box;
  cursor: pointer;
}




.is-active{
  animation:blink .8s ease-in-out infinite alternate;
}


@keyframes blink{
    0% {opacity:0.2;}
    100% {opacity:1;}
}