body{
  display:flex;
  background-color: #F8F3F6;
}

/* wordpress */
.wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.wrapper__close{
  position: fixed;
  z-index:999;
  right: 50px;
  top: 10%;
  width: 32px;
  height: 32px;
  background: url("http://a-fukushige.com/common/img/icn_close.png") 0 0 no-repeat;
}
.main{
  width:50%;
  height:100%;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.sub{
  width:50%;
  height:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
}
.sub__wrapper{
  width:100%;
  height:80%;
  padding-left:10%;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
}
.canvas__wrapper{
  height:80%;
  width:80%;
  position:relative;
}
.canvas__wrapper:before{
  content:"";
  padding-top:100%;
  display:block;
}
.figure{
  height:50%;
  width:100%;
}
.big__wrapper{
  height: 100%;
  width: 65%;
  position: relative;
  background-color: #0000001f;
}
.big__wrapper:before{
  content: "";
  padding-top: 100%;
  display: block;
}
.caption{
  height: 50%;
  width: 65%;
  position: relative;
}
.title{
  margin-top: 50px;
  font-size: 1.5rem;
}
.price{
  margin-top:80px;
  font-size: 1.3rem;
}
.info{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.0rem;
  line-height: 1.5rem;
}
.info__title{
  width: 60px;
  display: block;
  float: left;
}
.purchase{
  position: absolute;
  bottom: 0;
  right: 0;
  text-decoration: none;
  font-weight: bold;
  color: #0000008a;
  font-size: 1.0rem;
  line-height: 1.5rem;
}
#canvas,#layer,#resizer{
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

#canvasExplanation{
  position: absolute;
  bottom: 0px;
  display:block;
}

@media screen and (orientation: portrait) {
  .wrapper{
    flex-direction: column;
  }
  .wrapper__close{
    right: 10%;
    top: 10px;
  }
  .canvas__wrapper{
    height: 100%;
    width: 100%;
  }
  #layer{
    display:none;
  }
  #canvasExplanation{
    position: absolute;
    bottom: 0px;
    display:none;
  }
  .main{
    width:80%;
  }
  .sub{
    width:100%;
  }
  .sub__wrapper{
    padding-left: 0px;
    justify-content: center;
  }
  .figure{
    display:none;
  }
  .caption{
    width: 80%;
    height: 100%;
  }
  .title{
    margin-top:30px;
    font-size: 1.5rem;
  }
  .price{
    margin-top:60px;
    font-size: 1.3rem;
  }
  .info{
    position:relative;
    margin-top:30px;
  }
  .purchase{
    position:fixed;
    bottom:15px;
    right:15px;
    font-size: 1.0rem;
  }
}