/***************************

  css reset
  
***************************/
html, body, div, span, strong, iframe,
h1, h2, h3, h4, h5, h6, p,
a, address, img, pre,
dl, dt, dd, ol, ul, li,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: bottom;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, p, div, ul, li, dl, dt, dd,
h1, h2, h3, h4, h5, h6{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
a:hover{
	text-decoration:underline;
}
body {
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
}

/***************************

  font
  
***************************/
[class^="icon-"], [class*=" icon-"] {
	  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}


.icon-media-play:before {
	content: "\f054";
}

.icon-tokei:before {
	content: "\f017";
}

.icon-cart:before {
	content: "\f07a";
}

/******************************

contents

*******************************/
span.itemname {
  height: 50px;
  text-overflow: ellipsis;
  display: block;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

	/*マウスオーバーアクション*/
	.order .tool-contents li {
	display: inline-block;
	text-decoration: none;
	outline: none;
	}
	.order .tool-contents li::before,
	.order .tool-contents li::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	.order .tool-contents li,
	.order .tool-contents li::before,
	.order .tool-contents li::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .3s;
		transition: all .6s;
	}
	
	.order .tool-contents li{
	position: relative;
	z-index: 2;
	background-color: #fff;
	color: #333;
	overflow:hidden;
	}
	.order .tool-contents li::after {
		top: -100%;
		width: 100%;
		height: 100%;
	}
	.order .tool-contents li:hover::after {
		top: 0;
		background-color:#FFFFCC;
	}
    
    
/****************************************

contents

***************************************/
	.order .tool-contents p.order-title{
	margin:0px 5px;
	padding:15px 10px;
	border-bottom:#CCCCCC solid 1px;
	}
	.order .clearfix:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0;
	line-height: 0;
	clear: both;
	}
	.left{
	float:left;
	}
	.order .revBox {
	padding: 10px;
	border-bottom:1px #CCCCCC solid;
	font-size:12px;
	margin:0 5px;
	}
	.order .revBox dt{
	border-right:1px #CCCCCC solid;
	overflow:hedden;
	width:30%;
	box-sizing:border-box;
	float:left;
	}
	.order .revBox dd{
	float: left;
	}
	.revBox p.i-name{
	padding:5px;
  	box-sizing:border-box;
	float:left;
	width: 60%;	
	}
	
	.order .revBox dt p.img{
	float: left;
	padding-right: 10px;
	max-width:100px;
  	box-sizing:border-box;
	width:40%;
	}
	.order .revBox dt p.img img{
	max-width:80px;
	width:100%;
	}
	
	.order .icon-cart{
	font-size:28px;
	}
	.inline{
	margin-top:20px;
	display:block;
	margin-right:20px;
	overflow:hidden;
	float:left;
	}
	.order .inline-text{
	width: 70%;
  	box-sizing: border-box;
	display:inline-block;
	margin-right:20px;
	overflow:hidden;
	margin-top:10px;
	}
	.revBox .description{
	padding-top:0;
	padding-left:20px;
	float:right;
	width:70%;
  	box-sizing: border-box;
	}
	.order .tool-contents li a.link{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
z-index:99;
opacity:0;
	}
	
	.order .tool-contents li{
	position:relative;
	}
	.order .icon-media-play{
	font-size:20px;
	}
	.order .next-icon{
	float: right;
	margin-top:25px;
	}
	.order span.str strong {
	color: #FF9900;
	font-weight: normal;
	}
	.order .red{
	color:#FF0000;
	font-weight:bold;
	}
	.order .i-text{
	height:52px;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp:3;
	}
	.order .i-price{
	float:right;
	}
	
	.order span.title2{
	font-size:24px;
	}
	
    
    /***タイトル***/
	.order .tool-title{
	font-family:'Oswald';
	font-size:16px;
	overflow: hidden;
    position: relative;
	padding:10px;
	}
	.order .talkbubble {
	width: 118px;
	height: 35px;
	position: relative;
	padding:5px 10px 5px;
	font-size:22px;
	font-family:'Oswald';
	font-size:16px;
	}
	
	.order .talkbubble:before {
	content: "";
	position: absolute;
	top: 100%;
	bottom: 0;
	width: 0;
	left: 0;
	border-right: 5px solid transparent;
	}
	.order .update{
	position:absolute;
	right: 10px;
	top: 5px;
	border-radius: 10px;
	padding: 1px 15px 1px;
        width: 280px;
	}

	/*コンテンツ*/
	.order .tool-contents{
	border:#CCCCCC solid 1px;
	overflow:hidden;
	}