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

/***************************
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; color: #766a63; }

/******************************
general settings
*******************************/

#orderWrap {
width:750px;/*コンテンツ幅*/
/*height:1200px;コンテンツ高さ*/
border-bottom: 1px solid #cccccc;
overflow: hidden;
}

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

#orderWrap .tool-contents li a.link {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
z-index: 99;
opacity: 0;
}

/*マウスオーバーアクション（基本設定）*/
#orderWrap .tool-contents li {
display: inline-block;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
background-color: #fff;
overflow:hidden;
}
#orderWrap .tool-contents li::before,
#orderWrap .tool-contents li::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
#orderWrap .tool-contents li,
#orderWrap .tool-contents li::before,
#orderWrap .tool-contents li::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

/*マウスオーバーアクション（オプション）*/

/* じわっと */
#orderWrap .tool-contents li:hover {
background-color: #f4f4f4;
}

/* タイトル */
#orderWrap .tool-contents p.order-title {
padding: 5px 10px;
border-bottom: #CCCCCC solid 1px;
background: #eeeeee;
font-size: 13px;
font-weight: bold;
text-align: right;
}

#orderFrm li {
opacity: 1;
display: list-item;
}


/****************************************
order settings
***************************************/

#orderWrap .orderCell {
padding: 15px 10px;
border-bottom: 1px solid #cccccc;
font-size: 11px;
margin: 0 5px;
}

#orderWrap .orderCell dl {
display: table;
width: 100%;
}

#orderWrap .orderCell dt {
border-right: 1px dotted #cccccc;
width: 15%;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
}

#orderWrap .orderCell dt img {
width: 92%;
}

#orderWrap .orderCell dd {
display: table-cell;
vertical-align: middle;
}

.orderCell .description {
box-sizing: border-box;
display: table;
width: 73%;
border-right: 1px dotted #cccccc;
}

.orderCell .price {
box-sizing: border-box;
display: table;
width: 12%;
padding: 0 0 0 2%;
text-align: center;
}

#orderWrap .orderCell .description .inline-text {
width: 94%;
box-sizing: border-box;
display: inline-block;
padding: 0 3%;
display: table-cell;
vertical-align: middle;
}

#orderWrap span.orderName {
visibility: hidden;
color: #3d3734;
font-weight: bold;
}