@CHARSET "UTF-8";
*{
    margin: 0;
    padding: 0;
}

.verticaltext {
	writing-mode: tb-rl; /* IE独自仕様 */
	writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	-o-writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	text-orientation: upright;
	-ms-text-orientation: upright;
	-o-text-orientation: upright;
	-webkit-text-orientation: upright;
}

#body {
	font-family:'メイリオ',Meiryo;
	background: orange;
	height:100%;
	overflow:auto;
	display:block;
}

.work_table_data {
    margin: 10px;
/*     border: 3px solid #b8c3d9; */
    border-radius: 10px;
    background: #FFFBEF;
    font-size: 12px;
    align-items: center;
    padding: 5px;
    width: 50%;
}

#main {
	width: 100%;
}

#buy_product_table,
#create_product_table {
	width:100%;
}

#right_bar, #left_bar, #center_bar,
#creater_right_bar, #creater_center_bar, #creater_left_bar ,
#search_bar{
	clear:both;
	border: 3px solid #b8c3d9;
	border-radius:10px;
}

#product_cover {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 420px;
}

div#in_2col_main_inner {
	margin-right: 183px;
	/*余白15px;*/
}

div#in_right {
	width: 168px;
	float: left;
	z-index: 1000;
	position: relative;
}

div.left_pr_work dl {
	padding: 0 0 18px;
	line-height: 1.3;
}

table#header_main {
 	width: 100%;
	height: 36px;
	background: url(../images/web/home/header_left_bg.gif) no-repeat left top;
}

table#header_main td {
	vertical-align: top;
}

h3 {
    margin-top: -13px;
    margin-left: -16px;
	width: 110.5%;
	border-radius: 7px;
	font-size: 13px;
	font-weight: bold;
	height: 29px;
	line-height: 29px;
	padding-left: 15px;
	color: #fff;
	background: #555555;
    /* background: url(../images/web/home/left_module_h3.gif) no-repeat; */
}

/* ----- カテゴリナビ ----- */
table#header_main td.category_nav_box {
	width: 355px;
}

td#search_area table {
	width: 100%;
	table-layout: fixed;
}

td#search_select {
	width: 135px;
}

td#search_select select {
	font-size: 12px;
	width: 130px;
	margin: 6px 0 0;
	padding: 2px 0;
}

td.search_t {
	width: 100%;
}

table#outline th {
    min-width: 100px;
    padding: 0 6px 0 0;
    box-sizing: border-box;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

table#outline td {
    vertical-align: top;
    padding-bottom: 2px;
}

table.work_col_table,
table.work_2col_table,
table.work_3col_table,
table.work_4col_table,
table.work_5col_table {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
}

table.work_2col_table div.work_thumb {
	display: table-cell;
	padding: 2px 2px;
	float: none;
	margin: 0;
	vertical-align: middle;
}

dl.work_2col {
	display: table-cell;
	vertical-align: top;
}

div.work_thumb {
	float: left;
	margin: 0 8px 0px 0;
	text-align: center;
}

.cl_work_thumb_img {
	width:100px;
	height:140px;
	border-radius: 10px;
}

dl.work_2col dt.work_name {
    font-weight: bold;
    line-height: 1.3;
    font-size: 16px;
}

dl.work_2col {
	font-size: 14px;
}

dl.work_2col dd.work_price {
    color: #c00;
}

dd.maker_name a, .maker_name a {
    color: #06c;
}

dl.work_2col dd.work_text {
    font-size: 12px;
    word-break: break-all;
}

dl.work_2col dt.work_name a,
dl.work_2col dd.maker_name a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

dl.work_2col dt.work_name a:hover,
dl.work_2col dd.maker_name a:hover {
    color: #639;
    text-decoration: underline;
}
dl.work_2col dt.work_name a::after,
dl.work_2col dd.maker_name a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.2s;
  border-bottom: 2px solid #00f;
}
dl.work_2col dt.work_name a:hover::after,
dl.work_2col dd.maker_name a:hover::after {
  width: 100%;
}

dl.work_2col dt.work_name a:link {
    color: #039;
    text-decoration: none;
}

hr {
	border-width: 1px 0px 0px 0px; /* 太さ */
	border-style: solid; /* 線種 */
	border-color: gray;  /* 線色 */
	height: 1px;         /* 高さ(※古いIE用) */
}

/* textarea { */
/* 	background: hsl(60, 80%, 90%) -webkit-gradient( */
/* 	linear, */
/* 	left top, left bottom, */
/* 	from(rgba(0, 0, 0, 0)), */
/* 	color-stop(0.96, rgba(0, 0, 0, 0)), */
/* 	color-stop(0.98, rgba(0, 0, 0, 0.5)), */
/* 	to(rgba(0, 0, 0, 0)) */
/* 	); */
/* 	background-size: auto 2em; */
/* 	font-size: 1rem; */
/* 	line-height: 2rem; */
/* 	border: 1px solid #aaa; */
/* 	border-radius: 2px; */
/* 	overflow: hidden; */
/* } */

.cl_textarea {
	font-size: 1rem;
	line-height: 2rem;
	border: 1px solid #aaa;
	border-radius: 2px;
	overflow: hidden;
}

.cl_default_btn:hover {
	background: navy;
	color: white;
	cursor: pointer;
	/* 	border: 1px solid navy; */
}

.cl_default_btn {
	display: block;
	text-decoration: none;
	color: black;
/* 	background: linear-gradient(#05FBFF, #1E00FF); */
	border-radius: 6px;
	text-align: center;
	-webkit-transition: background 0.2s,color 0.2s;
	transition: background 0.2s,color 0.2s;
	padding: 5px;
	font-size: 13px;
/* 	border: 1px solid navy; */
}

bt#logout_exe:hover {
	background: navy url(../images/icon/logout_hover.png) no-repeat 13px center;
	background-size: 25px 25px;
}

bt#logout_exe {
	background:lightgray url(../images/icon/logout.png) no-repeat 18px center;
	background-size: 15px 15px;
}

.writing-mode-vertical-rl {
	 -webkit-writing-mode: vertical-rl;
	 -moz-writing-mode: vertical-rl;
	 -o-writing-mode: vertical-rl;
	 writing-mode: vertical-rl;
	 -ms-writing-mode: vertical-rl;
	 -ms-writing-mode: tb-rl;
}

/* #save_user { */
/* 	width:100%; */
/* 	height:30px; */
/* 	display: block; */
/*     text-decoration: none; */
/*     color: black; */
/*     background: linear-gradient(#05FBFF, #1E00FF); */
/*     border-radius: 6px; */
/*     text-align: center; */
/*     -webkit-transition: background 0.2s,color 0.2s; */
/*     transition: background 0.2s,color 0.2s; */
/*     border: 1px solid navy; */
/* } */

/* #save_user:hover { */
/*     background: navy; */
/*     color: white; */
/*     border: 1px solid navy; */
/*     cursor: pointer; */
/* } */


/********************************************************** 下記、修正中***********************************************************/

html,body{
    height: 100%;
}

.cl_body {
	font-family:'メイリオ',Meiryo;
	background: white;
	overflow:auto;
	display:block;
	overflow-x: hidden;
}

/* .cl_conteiner { */
/* 	position: relative; */
/* 	min-height: 100%; */
/* 	display:none; */
/* } */

.cl_main_content {
	padding-bottom: 100px
}

.cl_conter_area_box{
/* 	border: 1px solid #b8c3d9; */
	border-radius:10px;
	overflow: hidden;
}

.cl_conter_border_area_box{
	border: 1px solid #555555;
	border-radius:10px;
	overflow: hidden;
}

.cl_overlay_conter_area_box {
	border: 3px solid #b8c3d9;
	border-radius:10px;
	overflow: hidden;
	position: absolute;
	top: 50%;
}

.cl_horizonal_center {
	margin: auto;
}

.cl_ttl_header  {
	width: 110.5%;
	height: 29px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: bold;
	line-height: 29px;
	padding-left: 15px;
	margin-left: -5px;
	color: #fff;
	background: #555555;
	text-align: justify;
}

.cl_inner_area {
	padding: 10px;
}

.cl_horizonal_list {
	text-decoration: none;
	display: -webkit-box;
	display: -moz-box;
	display: box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}

.cl_padding_side {
	padding: 0px 10px 0px 10px;
}

.cl_horizonal_list li {
	list-style:none;
}

.cl_horizonal_margin_right  {
	margin-right: 10px;
}

.cl_vertical_list {
/* 	margin: 10px; */
	text-decoration: none;
}

.cl_vertical_list li {
	list-style:none;
}

.cl_genre_list {
	text-decoration: none;
}

.cl_genre_list li {
	list-style:none;
}

.cl_common_btn:hover {
	background: navy;
	color: white;
	border: 1px solid navy;
	cursor: pointer;
}

.cl_common_btn{
	display: block;
	text-decoration: none;
	color: black;
	background: linear-gradient(#05FBFF, #1E00FF);
	border-radius: 6px;
	text-align: center;
	-webkit-transition: background 0.2s,color 0.2s;
	transition: background 0.2s,color 0.2s;
	border: 1px solid navy;
	width: 100%;
	height: 25px;
}

/* タイトル関連 */
.cl_title {
	font-weight: bold;
	padding: 0 0 0 25px;
	position: absolute;
	color: #555555;
	overflow: auto;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl_title_icon {
	position: absolute;
	width : 20px;
	height : 20px;
}

.cl_title_line {
	height: 30px;
	line-height: 28px;
	margin-bottom: 12px;
	background: url(../images/title_line.png) left bottom repeat-x;
}

.cl_default_button:hover {
	background: navy;
	color: white;
	border: 1px solid navy;
	cursor: pointer;
}

.cl_default_button{
	display: block;
	text-decoration: none;
	color: black;
/* 	background: linear-gradient(#05FBFF, #1E00FF); */
	border-radius: 6px;
	text-align: center;
	-webkit-transition: background 0.2s,color 0.2s;
	transition: background 0.2s,color 0.2s;
	border: 1px solid navy;
}

.cl_btn:hover {
	cursor: pointer;
	background: navy;
	color: white;
	border: 1px solid navy;

}

.cl_btn {
	display: block;
	text-decoration: none;
	color: black;
	background: linear-gradient(#05FBFF, #1E00FF);
	border-radius: 6px;
	text-align: center;
	-webkit-transition: background 0.2s,color 0.2s;
	transition: background 0.2s,color 0.2s;
	border: 1px solid navy;
}

/* フッタ―関連 */
.cl_footer_hr {
	border-width: 5px 0px 0px 0px;
	border-color: grey;
}

.cl_footer{
	overflow: auto;
	color:white;
	background:orange;
	position: absolute;
	bottom:0;
	width:100%;
	height:100px;
}

/* 背景色関連 */
.cl_background_main {
	background:orange;
}

.cl_background_base {
	background:white;
}

.cl_background_accent {
	background:#00A0E6
}

.cl_background_enable {
	background:#555555
}

/* マージン関連 */
.cl_margin_top {
	margin-top: 10px;
}

.cl_margin_auto {
	margin:auto;
}

.cl_input_text {
	ime-mode: disabled;
	height: 47.2px;
	width: 100%;
}

.cl_twitter_area {
	height: 100%;
	width: 220px;
}

/* 検索結果無関連 */
.cl_sorry_area {
	position: relative;
	background: white;
	overflow: hidden;
	border-radius: 10px;
}

.cl_sorry_img {
	position: relative;
	left: 50px;
}

.cl_sorry_message {
	color: red;
	position: absolute;
	top: 100px;
	left: 200px;
}

/* 文字列入力関連 */
.cl_item_list {
	text-decoration: none;
	display: flex;
}

.cl_item_list li {
	list-style:none;
}

.cl_item_title {
	background: orange;
	width: 160px;
	color: white;
	text-align: left;
	display: table-cell;
	vertical-align: middle;
	height: 40px;
	padding-left: 5px;
}

.cl_item_value {
	background: #ffd793;
	display: table-cell;
	padding-left: 5px;
	vertical-align: middle;
	width: 360px;
	height: 40px;
}

.cl_item {
	border: 1px solid orange;
	font-size: 12px;
	align-items: center;
	overflow: hidden;
}

.cl_item_value_input_text {
	ime-mode: disabled;
	font-size: 15px;
	width: 343px;
	height: 20px;
	border: 1px solid orange;
	padding: 0px 5px 0px 5px;

}

.cl_item_value_input_ime_active {
	ime-mode: active;
}

.cl_asterisk {
	color: #00A0E6;
	font-weight: bold;
	font-size: 15px;
	vertical-align: middle;
}

.cl_cannot_select {
	user-select: none; /* CSS3 */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
	-khtml-user-select: none;
}

.cl_li_width_all {
	width:100%;
}

.cl_header_nav{
	margin:auto;
	padding:0 ;
	width:610px;
	height:60px;
}

.cl_step {
	width: 80px;
	color: white;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
}

.cl_img_arrow{
	width: 30px;
	height: 30px;
	padding: 10px 20px 10px 20px;
}

.cl_item_value_width {
	width: 440px;
}

.cl_header_nav_font_size {
	font-size: 10px;
}

.cl_screen_center {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.cl_contract_sentence_area {
	height: 50%;
	resize: none;
	font-size: 12px;
	line-height: 1rem;
}

.cl_required {
	background:orange url("../images/icon/required.jpg") no-repeat right 0.1em;
	background-size: 30px 15px;
	width: 155px;
}