.front{
	display:block;
	width:100%;
	height:7.1rem;
	background-image:url(//sakura1.firestorage.jp/assets/images/me/up-back.png);
        border:solid 5px #f2f2f2;
        margin:0 auto;
        font-size:0.8rem;
        padding-top:2.0rem;
          box-sizing: border-box;
}
.flipped{
	display:block;
        width:100%;
                height: 6rem;
                margin:0 auto;
}


.flip-boards .board {
    width:100%;
       height:7.1rem;
    margin:0 auto;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

}
.flip-boards .board div {
    width: 100%;
    height: 100%;
         max-width:350px;
      max-height:110px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:     hidden;
    position:absolute;
          box-sizing: border-box;
  

 }


.flip-boards .board.left:hoverx {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

.flip-boards .board.left .flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

#upload_dd{
	display:block;
	width:322px;
	height:104px;
	background-image:url(//sakura1.firestorage.jp/assets/images/me/upload_dd.jpg);
	text-indent:-10000px;
	list-style:none;
}

#uploadbtn{
	display:block;
	width:322px;
	height:32px;
	background-image:url(//sakura1.firestorage.jp/assets/images/me/upload_button.png);
	text-indent:-10000px;
	list-style:none;
	margin-top:10px;
}

#uploadstopbtnxx{
	display:block;
	width:322px;
	height:32px;
	background-image:url(//sakura1.firestorage.jp/assets/images/me/upload_stop_button.png);
	text-indent:-10000px;
	list-style:none;
	margin-top:10px;
}

#delete_btn{
	display:block;
	width:32px;
	height:32px;
	background-image:url(//sakura1.firestorage.jp/assets/images/me/gear32.png);
	text-indent:-10000px;
	list-style:none;
	margin-top:10px;
}
#delete_btn:hover{
	opacity:0.6;
	cursor: pointer;
	cursor: hand;
}


#uploadbtn:hover{
	opacity:0.6;
	cursor: pointer;
	cursor: hand;
}
#uploadstopbtnxx:hover{
	opacity:0.6;
	cursor: pointer;
	cursor: hand;
}

.btn:hover{
	opacity:0.6;
	cursor: pointer;
	cursor: hand;
}

.uploadaddbtn{
  display:block;
  width:322px;
  height:32px;
  background-image:url(//sakura1.firestorage.jp/assets/images/me/upload_add_button.png);
  text-indent:-10000px;
  list-style:none;
  margin-top:10px;
}

.uploadaddbtn:hover{
	opacity:0.6;
	cursor: pointer;
	cursor: hand;
}

.load {
	width: 40px;
	height: 40px;
	-webkit-animation: spin 1.5s linear infinite;
	-moz-animation: spin 1.5s linear infinite;
	-ms-animation: spin 1.5s linear infinite;
	-o-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
	display: inline;
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}


/*吹き出し*/

/*上向き*/
.arrow_box {
  display:none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #333333;
  color: #ffffff;
  opacity: 0.8;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(51, 51, 51, 1.0);
  border-left: 10px solid transparent; 
  pointer-events: none;
  content: " ";
}


/*下向き*/
.arrow_box-down{
display:none;
popsition:absolute;
padding:16px;
-webkit-radius:8px;
-moz-border-radius:8px
border-radius:8px;
background:#333333;
color:#fffff;
opacity:0.8;
}

.arrow_box-down:after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-top: 10px solid rgba(51, 51, 51, 1.0);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}


/*左向き*/
.arrow_box-left {
  display:none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #333333;
  color: #ffffff;
  opacity: 0.8;
}
.arrow_box-left:after {
  position: absolute;
  top: 30%;
  left:0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(51, 51, 51, 1.0);
  border-bottom: 10px solid transparent;
  content:" ";
}

/*右向き*/
.arrow_box-right {
  display:none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #333333;
  color: #ffffff;
  opacity: 0.8;
}

.arrow_box-right:after {
  position: absolute;
  bottom: 100%;
  top: 30%;
  left:100%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgba(51, 51, 51, 1.0);
  content: " ";
}

.sort.desc:after {
  content:"▼";
}
.sort.asc:after {
  content:"▲";
}