@charset "UTF-8";


/*----------------------------------------------------
  # 共通項目
----------------------------------------------------*/
#crmWrap {
	margin: 20px 0px 0px 0px;
	padding: 0px;
	color: #000000;
	font-size: 14px;
}

#crmWrap h2 {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	color: #000000;
	font-size: 26px;
	line-height: 100%;
}

#crmWrap h3 {
	margin: 0px 20px 5px 0px;
	padding: 3px 0px 3px 5px;
	color: #000000;
	font-size: 20px;
	line-height: 100%;
	border-left: #CCCCCC 3px solid;
	border-bottom: #CCCCCC 1px solid;
}

#crmWrap h3.buttonSlide {
	cursor: pointer;
}

#crmWrap h3.buttonSlide span {
	display: inline-block;
	margin: 0px 5px 0px 0px;
}


#crmWrap .hide {
	display: none;
}

#crmWrap .nowrap {
	white-space: nowrap;
}

#crmWrap .messageUpdate {
	margin: 0px 0px 20px 0px;
	padding: 10px;
	color: #000000;
	font-size: 16px;
	background-color: #FFFFFF;
	border-left: #19C636 5px solid;
}

#crmWrap span.example {
	display: block;
	margin: 5px 0px 0px 0px;
	padding: 0px;
	color: #999999;
	font-size: 12px;
}

.clearboth {
	float: none;
	clear: both;
}


/*----------------------------------------------------
  # 共通／リストテーブル要素
----------------------------------------------------*/
table.list {
	min-width: 98%;
	margin: 0px 20px 20px 0px;
	padding: 0px;
	border-collapse: separate;
	border-spacing: 2px 5px;
}

table.list th[scope='col'] {
	margin: 0px;
	padding: 5px;
	font-size: 13px;
	vertical-align: middle;
	background-color: #DDDDDD;
	border-radius: 5px;
}

table.list td {
	margin: 0px;
	padding: 5px;
	font-size: 13px;
	text-align: center;
	vertical-align: middle;
}

table.list td.l {
	text-align: left;
}

table.list td.sel {
	margin: 0px;
	padding: 5px;
	font-size: 13px;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFFF;
}

table.list tr:nth-child(2n+1) {
	background-color: #E8E8E8;
}


/*----------------------------------------------------
  # 共通／編集テーブル要素
----------------------------------------------------*/
table.formTable {
	min-width: 98%;
	margin: 0px 20px 10px 0px;
	padding: 0px;
	border-collapse: separate;
	border-spacing: 5px 5px;
}

table.formTable th[scope="row"] {
	width: 20%;
	margin: 0px;
	padding: 5px;
	font-size: 16px;
	vertical-align: middle;
	background-color: #DDDDDD;
	border-radius: 5px;
}

table.formTable td {
	width: 80%;
	margin: 0px;
	padding: 5px;
	font-size: 16px;
	vertical-align: middle;
}

table.formTable th.half {
	width: 20%;
}

table.formTable td.half {
	width: 30%;
}

table.formTable td p {
	display: block;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-size: 14px;
}

table.formTable td #backPict {
	display: inline-block;
	width: auto;
	height: 50px;
	margin: 0px 5px 0px 0px;
	vertical-align: middle;
}

table.formTable td #thumbArea img {
	display: inline-block;
	margin: 0px 5px 5px 0px;
	padding: 0px;
}

table.formTable input[type='button'] {
	margin: 0px 10px 0px 0px;
	padding: 2px 5px;
	font-size: 14px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}


/*----------------------------------------------------
  # 共通／ボタン要素
----------------------------------------------------*/
.buttonArea {
	margin: 20px 0px 20px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

.buttonArea input[type='button'] {
	margin: 0px 10px 0px 0px;
	padding: 5px 10px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.buttonArea input[name='Delete'] {
	margin: 0px 30px 0px 30px;
}

.buttonArea input.prime {
	color: #FFFFFF;
	text-shadow: 1px 1px 1px #000000;
	background-color: #0073aa;
	box-shadow: 1px 1px 1px 1px #034878;
	-webkit-box-shadow: 1px 1px 1px 1px #034878;
}

.buttonArea input.mini {
	margin: 0px 10px 0px 0px;
	padding: 2px 5px;
	font-size: 14px;
}

.buttonArea input.second {
	color: #000000;
	background-color: #CCCCCC;
	box-shadow: 1px 1px 1px 1px #666666;
	-webkit-box-shadow: 1px 1px 1px 1px #666666;
}


/*----------------------------------------------------
  # ミニ／ボタン要素
----------------------------------------------------*/
.miniButton {
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

.miniButton input[type='button'] {
	margin: 0px 5px 0px 0px;
	padding: 3px 10px;
	font-size: 14px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.miniButton input[name='Delete'] {
	margin: 0px 30px 0px 30px;
}

.miniButton input.prime {
	color: #FFFFFF;
	text-shadow: 1px 1px 1px #000000;
	background-color: #0073aa;
	box-shadow: 1px 1px 1px 1px #034878;
	-webkit-box-shadow: 1px 1px 1px 1px #034878;
}

.miniButton input.second {
	color: #000000;
	background-color: #CCCCCC;
	box-shadow: 1px 1px 1px 1px #666666;
	-webkit-box-shadow: 1px 1px 1px 1px #666666;
}


/*----------------------------------------------------
  # 顧客詳細
----------------------------------------------------*/
#crmDetailBack {
	display: block;
	margin: 0px 0px 0px -20px;
	padding: 0px;
	background-size: 100% auto;
	background-repeat: repeat-y;
}

#crmDetailBack .alpha {
	height:	100%;
}

#crmDetail {
	display: block;
	margin: 0px 20px 0px 20px;
	padding: 20px 0px;
	color: #000000;
	font-size: 16px;
}

#crmDetail .colWrap {
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#crmDetail table {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}

#crmDetail tr th {
	width: 20%;
	margin: 0px;
	padding: 9px 0px;
	text-align: center;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #333333;
	border-radius: 5px 0px 0px 5px;
}

#crmDetail tr td {
	width: 80%;
	margin: 0px;
	padding: 5px 5px 5px 10px;
	word-break: break-all;
	background-color: #FFFFFF;
	border-radius: 0px 5px 5px 0px;
}

#crmDetail tr td.col2 {
	width: 30%;
	margin: 0px 10px 0px 0px;
	padding: 5px 5px 5px 10px;
}

#crmDetail tr td.col2:nth-child(2n) {
	margin: 0px;
}



#crmDetail .pictArea {
	float: left;
	width: 240px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #FFFFFF;
	border-radius: 5px;
}

#crmDetail .pictArea img {
	display: block;
	width: 220px;
	height: auto;
	margin: 10px;
}

#crmDetail .pictArea .buttonArea {
	margin: 5px 0px 5px 0px;
	padding: 0px;
}

#crmDetail .pictArea .buttonArea input[type='button'] {
	margin: 0px 10px 0px 0px;
	padding: 2px 5px;
	font-size: 12px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

#crmDetail .pictArea .buttonArea input.prime {
	color: #FFFFFF;
	text-shadow: 1px 1px 1px #000000;
	background-color: #0073aa;
	box-shadow: 1px 1px 1px 1px #034878;
	-webkit-box-shadow: 1px 1px 1px 1px #034878;
}

#crmDetail .pictArea .buttonArea input.second {
	color: #000000;
	background-color: #CCCCCC;
	box-shadow: 1px 1px 1px 1px #666666;
	-webkit-box-shadow: 1px 1px 1px 1px #666666;
}

#crmDetail .baseArea {
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#crmDetail ul {
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

#crmDetail ul li {
	display: block;
	width: calc(100% - 25px);
	margin: 0px 10px 10px 0px;
	padding: 0px;
	background-color: #FFFFFF;
	border-radius: 5px;
}

#crmDetail ul li.col2 {
	display: inline-block;
	width: calc(50% - 20px);
	margin: 0px 10px 10px 0px;
}

#crmDetail ul li.colSmall {
	display: block;
	width: calc(50% - 20px);
	margin: 0px 10px 10px 0px;
}

#crmDetail ul li p {
	display: table-cell;
	width: 150px;
	margin: 0px;
	padding: 9px 0px;
	text-align: center;
	color: #FFFFFF;
	background-color: #333333;
	border-radius: 5px 0px 0px 5px;
}

#crmDetail ul li span {
	display: table-cell;
	margin: 0px;
	padding: 5px 5px 5px 10px;
	word-break: break-all;
}

#crmDetail ul li span.text {
	margin: 1px 5px 1px 0px;
	padding: 4px;
}


#crmDetail hr {
	margin: 0px 0px 30px 0px;
}


/*----------------------------------------------------
  # 購入履歴
----------------------------------------------------*/
#orderHistory {
	display: block;
	margin: 0px 20px 0px 0px;
	padding: 10px;
	color: #000000;
	font-size: 14px;
	background-color: #FFFFFF;
	border-radius: 5px;
}

#orderHistory h3 {
	margin: 10px 0px 10px 0px;
	padding: 0px;
	color: #000000;
	font-size: 24px;
	line-height: 100%;
	border: none;
}

#orderHistory table.orderList {
	width: 100%;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	border-collapse: separate;
	border-spacing: 2px 5px;
}

#orderHistory table.orderList tr.orderCell:hover {
	background-color: #EEEEEE;
}

#orderHistory table.orderList tr.orderCell {
	cursor: pointer;
}

#orderHistory table.orderList th {
	padding: 5px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #999999;
}

#orderHistory table.orderList td {
	padding: 2px 5px 2px 5px;
	text-align: center;
	border-bottom: #999999 1px solid;
}

#orderHistory table.orderList td.r {
	text-align: right;
}

#orderHistory table.orderList td.cartCell {
	display: none;
	padding: 0px 0px 2px 5px;
	border: none;
}

#orderHistory table.cartList {
	width: 80%;
	margin: 0px 0px 10px auto;
	padding: 0px;
	border-collapse: separate;
	border-spacing: 2px 5px;
}

#orderHistory table.cartList th {
	padding: 2px;
	font-weight: normal;
	color: #000000;
	background-color: #EEEEEE;
}

#orderHistory table.cartList td {
	padding: 0px 2px 2px 2px;
	text-align: left;
	border-bottom: #EEEEEE 1px solid;
}

#orderHistory table.cartList td.r {
	text-align: right;
}

#orderHistory table.cartList td img {
	display: inline-block;
	width: auto;
	height: 30px;
	margin: 0px 5px 0px 0px;
	vertical-align: middle;
}


/*----------------------------------------------------
  # フォーム要素
----------------------------------------------------*/
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
	width: auto;
	padding: 0px;
}

#crmWrap input[type='text'],
#crmWrap input[type='number'],
#crmWrap input[type='email'],
#crmWrap input[type='tel'] {
	width: 100%;
	margin: 1px 5px 1px 0px;
	padding: 3px;
	color: #000000;
	font-size: 14px;
}

#crmWrap select {
	margin: 0px 5px 0px 0px;
	padding: 0px;
	color: #000000;
	font-size: 14px;
}

#crmWrap textarea {
	width: 100%;
	margin: 1px 5px 1px 0px;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	vertical-align: text-top;
}

#crmWrap label {
	display: inline-block;
	min-width: 200px;
	margin: 2px 20px 2px 0px;
}

#crmWrap input.name,
#crmWrap input.pass,
#crmWrap input.tel {
	width: 200px;
}

#crmWrap input.year {
	width: 70px;
}

#crmWrap input.mon,
#crmWrap input.day {
	width: 50px;
}

#crmWrap input.address,
#crmWrap input.subject {
	width: 500px;
}

#crmWrap input.mail,
#crmWrap input.note {
	min-width: 400px;
}

#crmWrap input.fromname {
	width: 170px;
}

#crmWrap input.frommail {
	width: 320px;
}

#crmWrap input.optExt {
	width: 50px;
}

#crmWrap input.etc {
	margin-left: 5px;
	width: 100px;
}

#crmWrap ::-webkit-input-placeholder{
	color: #E0E0E0;
}

#crmWrap ::-moz-placeholder{
	color: #E0E0E0;
}

#crmWrap :-moz-placeholder{
	color: #E0E0E0;
}

#crmWrap :-ms-input-placeholder{
	color: #E0E0E0;
}

/* メール配信履歴 */
#crmWrap ul.mailHistory {
	margin: 10px 20px 30px 0px;
	padding: 0px;
}

#crmWrap ul.mailHistory p.subject {
	margin: 0px;
	padding: 5px;
	font-size: 13px;
	background-color: #DDDDDD;
}

#crmWrap ul.mailHistory li {
	height: 70px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-size: 12px;
	line-height: 120%;
	border: #CCCCCC 1px solid;
	box-sizing: border-box;
	overflow-y: scroll;
}