/* @import url('http://fonts.googleapis.com/earlyaccess/notosansjapanese.css'); */
@import url('font.css');
html,body{
	font-family: 'Noto Sans Japanese', 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-size: 12pt;
	line-height: 1;
}
body {
	margin:0px;
	padding:0px;
	overflow:hidden;
}
div.base {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
div.container {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	position: absolute;
	display: none;
}
div.copyright {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 50px;
}

/* icon color */
.icon-color-red:before {
  color: #dc143c;
}
.icon-color-orange:before {
  color: #ff7f50;
}
.icon-color-green:before {
  color: #228b22;
}
.icon-color-yellow:before {
  color: #daa520;
}
.icon-color-blue:before {
  color: #4682b4;
}
.icon-color-violet:before {
  color: #c71585;
}

/* button style */
input.grid_button {
	height: 21px;
    width: 60px;
	margin-top: -1px;
	padding-bottom: 1px;
}
button.grid_button {
	height: 21px;
    width: 60px;
	margin-top: -1px;
	color: gray;
}
input.grid_button_l {
	height: 21px;
    width: 100px;
	margin-top: -1px;
	padding-bottom: 1px;
}
button.grid_button_l {
	height: 21px;
    width: 100px;
	margin-top: -1px;
	color: gray;
}
.adminButton {
	font-size: 14px;
	line-height: 28px;
	white-space: nowrap;
	word-break: keep-all;
	font-weight: 700;
	border-radius: 4px;
	border: 2px solid #00aeef;
	width: 110px;
	height: 32px;
	background-color: #fff;
	color: #00aeef!important;
	display: block;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box
}
.adminButton:hover {
	background-color: #e8f7fc;
	color: #00aeef
}
.adminButton:before {
	content: "";
	background-image: url("../img/icon/config.svg");
	background-repeat: no-repeat;
	background-position: center;
	width: 18px;
	height: 18px;
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle
}
.logoutButton {
	cursor: pointer;
	font-size: 14px;
	line-height: 28px;
	white-space: nowrap;
	word-break: keep-all;
	font-weight: 700;
	border-radius: 4px;
	border: 2px solid #00aeef;
	width: 110px;
	height: 32px;
	background-color: #fff;
	color: #00aeef!important;
	display: block;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box
}
.logoutButton:hover {
	background-color: #e8f7fc;
	color: #00aeef
}
.logoutButton:before {
	content: "";
	background-image: url("../img/icon/logout.svg");
	background-repeat: no-repeat;
	background-position: center;
	width: 18px;
	height: 18px;
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle
}
button.gallery_button {
    margin: 0px 0px 0px auto;
    display: block;
    width: 80px;
    height: 30px;
    font-weight: bold;
    color: #ff1493;
    background-color: #ffffff;
    border-color: #dc143c;
    border-radius: 15px 15px 15px 15px;
    cursor: pointer;
}
button.gallery_button:hover {
	background-color: #d3d3d3;
}

/* login panel */
#login {
	background-color: #F5F6F7;
}
div.login_base {
	position: relative;
	top: 50px;
	width: 325px;
	height: 260px;
	margin:0 auto 0 auto;
	background-color: #ffffff;
	border: solid 1px #000000;
	border-radius: 3px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	-o-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	-ms-box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
div.login_title {
	position: relative;
	top: 5px;
	left: 20px;
}
#login_logo {
/*	font-family: 'AngelicGarden'; */
	font-size: 160%;
	font-weight: bold;
}
#login_logo_a {
	color: #FF0000;
}
div.login_box {
	position: absolute;
	top: 40px;
	left: 20px;
	width: 280px;
	height: 190px;
	background-color: #ffffff;
	border: solid 2px #0000ff;
	border-radius: 3px;
}
.input_group {
	position: relative;
	width: 205px;
}
.input_group label {
	position: absolute;
	display: table-cell;
	top: 0px;
	left: 0px;
	width: 32px;
	height: 18px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right: 0;
	border-radius: 4px 0px 0px 4px;
}
.input_group input {
	position: absolute;
	top: 0px;
	left: 33px;
	width: 160px;
	height: 18px;
	border-radius: 0px 4px 4px 0px;
}
.input_group#login_login {
	top: 30px;
	left: 40px;
}
.input_group#login_pass {
	top: 70px;
	left: 40px;
}
.login_button {
	width: 203px;
	height: 30px;
	border-radius: 4px;
	position: relative;
	top: 110px;
	left: 40px;
	font-weight: bold;
}

/* main panel */
div.main_base {
	position: relative;
	top: 5px;
	width: 1000px;
	margin:0 auto 0 auto;
}
div.main_title {
	position: relative;
	top: 0px;
	left: 0px;
}
table.main_table {
	position: relative;
	top: 10px;
	left: 0px;
}
td.main_table_title {
	width: 100px;
	padding: 2px 5px;
	background-color: #49839b;
	color: #ffffff;
	font-weight: bold;
}
td.main_table_value {
	width: 900px;
	padding: 2px 5px;
	background-color: #aaaaaa;
}
#main_func {
	width: 200px;
}
#main_token {
	width: 500px;
}
#main_admin {
	width: 20px;
	text-align: center;
}
#main_button {
	position: relative;
	top: 12px;
	left: 400px;
	width: 200px;
	height: 30px;
	font-weight: bold;
	font-size: 100%;
	z-index: 99;
}
#main_logout_button {
    position: absolute;
    top: 5px;
    left: 845px;
    width: 150px;
    height: 30px;
    font-weight: bold;
    font-size: 100%;
    z-index: 99;
}
div.main_copyright {
	position: relative;
	width: 1000px;
	margin: 0 auto 0 auto;
	text-align: right;
}
iframe.adview {
    width: 100%;
    height: 100%;
	max-width: 100%;
	max-height: 100%;
}
img.new_icon {
    width: 32px;
    height: 12px;
}

/* title */
div.title_deco {
    display: inline-block;
    position: relative;
    top: -14px;
    left: 13px;
    font-size: 2em;
    font-weight: bold;
    line-height: 0.95em;
    color: beige;
    text-shadow: 0 0 0.3em rgba(0,0,0,1);
}

/* カレンダー表示 */
div.cal_base {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    display: grid;
    height: 100%;
    gap: 2px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 25px 1fr 1fr 1fr 1fr;
}
div.cal_base .cal_header {
    border: solid 1px #666;
    text-align: center;
    background-color: #ffffff;
}
div.cal_base .cal_header span {
    vertical-align: middle;
}
div.cal_base .cal_item {
    border: solid 1px #666;
    background-color: #ffffff;
}
div.cal_base .cal_item ul {
    display: table;
	height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
div.cal_base .cal_item ul li {
    display: table-row;
}
div.cal_base .cal_item ul li:first-child {
	background-color: beige;
    height: 20px;
}
div.cal_base .cal_item ul li span {
    display: table-cell;
    padding: 3px;
}
div.cal_base .cal_item ul li span.cal_contents {
    vertical-align: middle;
    text-align: center;
	color: #000000;
}
div.cal_base .cal_sunday {
	color: #D81B60;
	background-color: #fdf6f9;
}
div.cal_base .cal_saturday {
	color: #1E88E5;
	background-color: #f3fafd;
}
div.cal_base .cal_disable {
	color: #696969;
}
div.cal_base .cal_disable_col {
	background-color: #dcdcdc;
}

/* クリエイティブ表示 */
div.creabase {
	width: 100%;
	background-color: #f2f2f2;
}
div.top_grid {
	width: 100%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
div.creabase div.info_box {
	width: 100%;
    font-size: 14px;
    display: grid;
    gap: 2px;
    grid-template-columns: 100px 1fr;
    background-color: #778899;
    padding: 2px;
    box-sizing: border-box;
}
div.creabase div.color_red {
	background-color: #c13e3e;
}
div.creabase div.info_box .info_title {
    text-align: right;
    background-color: #ffffff;
	min-height: 22px;
    padding-top: 4px;
    padding-right: 5px;
    box-sizing: border-box;
}
div.creabase div.info_box .info_large_title {
    text-align: right;
    background-color: #ffffff;
	min-height: 26px;
	padding-top: 6px;
    padding-right: 5px;
    box-sizing: border-box;
}
div.creabase div.info_box .info_val {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
    background-color: #ffffff;
    padding-top: 4px;
    padding-left: 5px;
    box-sizing: border-box;
}
div.creabase div.info_box .font_bold {
	color: #b22222;
	font-weight: bold;
}
div.creabase div.info_box .info_val_wrap {
    text-align: left;
    background-color: #ffffff;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    box-sizing: border-box;
}
div.creabase a {
	color: inherit;
	text-decoration: none;
}
div.creabase a:link {
	color: inherit;
	text-decoration: none;
}
div.creabase a:visited {
	color: inherit;
	text-decoration: none;
}
div.creabase a:hover {
	color: inherit;
	text-decoration: none;
}
div.creabase a:active {
	color: inherit;
	text-decoration: none;
}
div.creabase div.creabox {
	width: 100%;
	height: 100%;
	border:1px solid #000;
	overflow: auto;
	background-color: #ffffff;
    box-sizing: border-box;
}
div.creabase div.creabox_container {
	position: relative;
	transform-origin: top left;
}
div.creabase div.frame {
	position: absolute;
	height: 100%;
}
div.creabase div.child {
	position: absolute;
	text-align: center;
}
div.creabase div.text {
	position: absolute;
	color: #000000;
	background-color: #fffaf0;
}
div.creabase div.zoombox {
	grid-column: 2;
	text-align: right;
	padding-right: 5px;
	padding-top: 2px;
}
div.creabase div.zoombox div.zoommax {
	display: inline-block;
	color: #5e78d6;
	padding-right: 10px;
}
div.creabase div.zoombox div.zoomin {
	display: inline-block;
	color: #006400;
}
div.creabase div.zoombox div.zoomout {
	display: inline-block;
	color: #c71585;
}
div.creabase div.grid_row {
	margin-top: 4px;
}
div.creabase div.col_title {
	height: 25px;
	font-size: 14px;
	font-weight: bold;
	padding-top: 6px;
	box-sizing: border-box;
}
div.creabase div.col_val {
	box-sizing: border-box;
}
div.creabase div.work_area {
	display: grid;
	grid-template-columns: 1fr 150px;
}
div.creabase div.work_area input[type="text"] {
    width: calc(100% - 80px);
}
div.creabase div.work_area input[type="text"].id_area {
    width: 73px;
}
div.creabase div.work_area .enter_btn {
    width: 100px;
    height: 60px;
    margin-top: 11px;
    margin-left: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    border-radius: 7px;
    background-color: #49a9d4;
    border: solid 1px #335758;
}
div.creabase div.work_area .skip_btn {
	width: 100px;
	height: 60px;
	margin-top: 11px;
	margin-left: 20px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	border-radius: 7px;
	background-color: #006400;
	border: solid 1px #335758;
}
div.creabase div.work_area .gray_btn {
    color: #000;
	background-color: #f2f2f2;
}
div.creabase div.work_area .red_btn {
	background-color: #c13e3e;
}
div.creabase div.p_box_header {
	width: 100%;
	display: table;
	table-layout: fixed;
    box-sizing: border-box;
}
div.creabase div.p_box_header .p_box_th {
	height: 24px;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	color: #ffffff;
    background-color: #21773f;
    border-top: 2px solid #778899;
    border-right: 2px solid #778899;
    border-bottom: 2px solid #778899;
    box-sizing: border-box;
}
div.creabase div.p_box_header .p_box_th:first-child {
    border-left: 2px solid #778899;
}
div.creabase div.p_box_contents {
	width: 100%;
	display: table;
	table-layout: fixed;
    box-sizing: border-box;
    border-bottom: 2px solid #778899;
	overflow: auto;
}
div.creabase div.p_box_contents .p_box_tr {
	display: table-row;
    border-left: 1px solid #778899;
    border-right: 1px solid #778899;
    border-bottom: 1px solid #778899;
}
div.creabase div.p_box_contents .p_box_tr .p_box_td {
	height: 24px;
	font-size: 14px;
	vertical-align: middle;
	display: table-cell;
    border-right: 2px solid #778899;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
    background-color: #ffffff;
    padding-top: 1px;
    padding-left: 5px;
    box-sizing: border-box;
}
div.creabase div.p_box_contents .p_box_tr .p_box_td:first-child {
    border-left: 2px solid #778899;
}
div.contents_box {
	border:1px solid #000;
	overflow: auto;
	background-color: #ffffff;
    box-sizing: border-box;
}
div.contents_box div.creabox_container {
	position: relative;
}
div.contents_box div.frame {
	position: absolute;
	height: 100%;
}
div.contents_box div.child {
	position: absolute;
	text-align: center;
}
div.contents_box div.text {
	position: absolute;
	color: #000000;
	background-color: #fffaf0;
}
div.gallery_container, div.daily_gallery_container, div.fixwork_gallery_container {
	overflow: hidden;
    box-sizing: border-box;
}
div.gallery_container div.gallery_item {
	box-sizing: content-box;
	border: 2px solid #ffffff;
	background-color: #ffffff;
	margin: 2px;
}
div.daily_gallery_container div.gallery_item {
	box-sizing: content-box;
	border: 2px solid #000000;
	background-color: #ffffff;
	margin: 2px;
}
div.fixwork_gallery_container div.gallery_item {
	box-sizing: content-box;
	border: 2px solid #000000;
	background-color: #ffffff;
	margin: 2px;
}
div.gallery_container div.item_color_red {
    border: 2px solid #c13e3e;
}
div.daily_gallery_container div.item_color_red {
    border: 2px solid #c13e3e;
}
div.fixwork_gallery_container div.item_color_red {
    border: 2px solid #c13e3e;
}
div.gallery_item div.item_box {
	position: relative;
	width: 100%;
	height: 100%;
}
div.item_box div.click_info {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 70%);
	z-index: 990;
}
div.item_box div.click_info div {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color: #ffffff;
	font-style: italic;
	transform : translate(-50%,-50%);
	z-index: 991;
}
div.item_box div.frame {
	position: absolute;
	height: 100%;
}
div.item_box div.child {
	position: absolute;
	text-align: center;
}
div.item_box div.text {
	position: absolute;
	color: #000000;
	background-color: #fffaf0;
}
div.gallery_item div.video_base {
	display: table;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}
div.gallery_item div.video_base div.video_play_button {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 64px;
	height: 64px;
	cursor: pointer;
}
/* tooltips on gallery */
div.item_box[data-cid]::before,
div.item_box[data-cid]::after {
  text-transform: none;
  font-size: .9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
div.item_box[data-cid]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}
div.item_box[data-cid]::after {
  content: attr(data-cid);
  font-family: Helvetica, sans-serif;
  text-align: left;
  min-width: 3em;
  max-width: 21em;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}
div.item_box[data-cid]:hover::before,
div.item_box[data-cid]:hover::after {
  display: block;
}
div.item_box[data-cid].hide_tooltip:hover::before,
div.item_box[data-cid].hide_tooltip:hover::after {
  display: none;
}
div.item_box[data-cid]::before {
  top: 0px;
  border-bottom-width: 0;
  border-top-color: #333;
}
div.item_box[data-cid]::after {
  top: 5px;
}
div.item_box[data-cid]::before,
div.item_box[data-cid]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}
div.item_box[data-cid].left_tooltip::before,
div.item_box[data-cid].left_tooltip::after {
  left: 0px;
  transform: none;
}
div.item_box[data-cid].right_tooltip::before,
div.item_box[data-cid].right_tooltip::after {
  left: auto;
  right: 0px;
  transform: none;
}

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-not {
  to {
    opacity: .9;
  }
}

div.item_box[data-cid]:hover::before,
div.item_box[data-cid]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
div.item_box[data-cid].left_tooltip:hover::before,
div.item_box[data-cid].left_tooltip:hover::after {
  animation: tooltips-not 300ms ease-out forwards;
}
div.item_box[data-cid].right_tooltip:hover::before,
div.item_box[data-cid].right_tooltip:hover::after {
  animation: tooltips-not 300ms ease-out forwards;
}
div.max_view {
  width: 100%;
  height: 100%;
  background-color: #000000;
}
div.max_view_close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  color: #000000;
  background-color: #ffffff;
}