@charset "utf-8";
/* =========================================================
   common
========================================================= */
.contents-body {
}

.contents-body p {
  font-family: Roboto, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'Noto Sans Japanese', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
  margin: 0 15px 15px;
}

ul{
	margin:0;
	padding:0;
}

ul li{
	list-style:none;
}
.contents-body.form th:first-child {
	width:160px;
}
	
/* mein-Menu - page 
--------------------------------------------------------- */
#main-Menu {
	width:1150px;
	margin:0 auto;
}

#main-Menu .section {
	margin: 0 0 30px; 
}

#main-Menu .section .news {
  float: left;
	width: 900px;
}

#main-Menu .section .news h2 {
  background: #208bbd !important;
  color: #fff;
  margin: 0;
  padding: 0 0 0 10px; 
}

#main-Menu .section .news .inner {
	background: #fff;
  border-color: #ccc;
  border-style: solid;
  border-width: 0 1px 1px;
  height: 66px;
	overflow: auto;
  padding: 10px;
}

#main-Menu .section .news .inner dl {
	font-size: 13px;
	margin: 0;
  padding: 0;
  width: 700px; 
}

#main-Menu .section .news .inner dt {
 font-weight: bold;
 margin: 0 0 5px;
}

#main-Menu .section .news .inner dd {
 margin: 0 0 20px;
 padding: 0;
}

#main-Menu .section .news .inner dd p {
	margin: 0; 
}

#main-Menu .section .user-Menu {
  border: #ccc solid 1px;
	float: right;
  height: 120px;
  margin: 0;
  padding: 0;
  width: 198px;
}

#main-Menu .section .user-Menu li {
  height: 60px;
	list-style: none;
  margin: 0;
  padding: 0;
}

#main-Menu .section h2 {
  color: #333;
  margin: 0px 0 0px;
  padding: 0 0 0 10px;
  font-size:18px;
}

#main-Menu .section h2 strong {
	color: #c60f13;
  margin: 0 2px; 
}

#main-Menu .section .Menu-list {
  margin: 0;
  padding: 0;
	width: 1150px; 
}
.menu_block{
	background-color:#F9F9F9;
  	padding: 20px 10px 30px;
	margin-bottom:30px;
}
#main-Menu .section .Menu-list ul {
  margin-right: -20px;
	box-sizing:border-box;
	margin-top:10px;
}

#main-Menu .section .Menu-list li {
  	float: left;
  	list-style: none;
  	margin: 0 8px 8px 0;
	width: 276px; 
	background-color:#FFF;
	border: 1px solid #ccc;
	box-sizing:border-box;
	position:relative;
	border-radius:3px;
	transition: all .5s ease;

}

#main-Menu .section .Menu-list li.menu_matool a:hover{
	background-color:#2c3f51;
	color:#fff;
}
#main-Menu .section .Menu-list li.menu_matool a{
	background-color:#25b2f5;
	color:#fff;
}

#main-Menu .section .Menu-list li.menu_inqbtn a:hover{
	background-color:#2c3f51;
	color:#fff;
}
#main-Menu .section .Menu-list li.menu_inqbtn a{
	background-color:#208BBD;
	color:#fff;
}
#main-Menu .section .Menu-list li:nth-child(4n) {
	margin-right:0;
}
/* backgroundimage button */
#main-Menu .section .Menu-list li .btnLink {
	display: block;
	color: #4d4d4d;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	transition: all .5s ease;
	padding:15px 12px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	width:250px;
	margin:0 auto;
	}

#main-Menu .section .Menu-list li:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #ccc;
  border-right: solid 2px #ccc;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 4%;
  margin-top: -4px;
}
#main-Menu .section .Menu-list li.blank_btn:before{
  width: 8px;
  height: 8px;
  color: #ccc;
  margin-top: -10px;
  font-weight: bold;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
  border: solid 2px #ccc;
}
#main-Menu .section .Menu-list li.blank_btn:after{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-bottom: solid 2px #ccc;
  border-left: solid 2px #ccc;
  position: absolute;
  top: 50%;
  right: 6%;
  margin-top: -5px;
}

#main-Menu .section .Menu-list li:hover {
	background:#2c3f51;
}
#main-Menu .section .Menu-list li .btnLink:hover {
	color:#fff;
}

#main-Menu .section .Menu-list li.oauth .btnLink{
	transition: none;
}
#main-Menu .section .Menu-list li.oauth.youtube a{
/*	background-image: url(sns/yt_icon_Color.png);*/
	background-image: url(sns/yt_logo_rgb_light.png);
	background-size: 45% auto;
	background-repeat: no-repeat;
	background-position: 70px center;
    height: 30px;
}
#main-Menu .section .Menu-list li.oauth.youtube a:hover{
/*	background-image: url(sns/yt_icon_White.png);*/
	background-image: url(sns/yt_logo_mono_dark.png);
	background-color: #FF0000;
	color:white;
}

#main-Menu .section .Menu-list li.oauth.twitter a{
	color: #1DA1F2;
	background-image: url(sns/Twitter_Logo_Blue.png);
	background-size: 36px 36px;
	background-repeat: no-repeat;
	background-position: 50px center;
}
#main-Menu .section .Menu-list li.oauth.twitter a:hover{
	background-image: url(sns/Twitter_Logo_WhiteOnBlue.png);
	background-color: #1DA1F2;
	color:white;
}

#main-Menu .section .Menu-list li.oauth.facebook a{
	color: #1877f2;
	background-image: url(sns/f_logo_Blue.png);
	background-size: 28px 28px;
	background-repeat: no-repeat;
	background-position: 45px center;
}
#main-Menu .section .Menu-list li.oauth.facebook a:hover{
	background-image: url(sns/f_logo_White.png);
	background-color: #1877f2;
	color:white;
}

/* Client-Management - page 
--------------------------------------------------------- */
#client {
}

#client h2 {
	background: #15416e;
  border-color: #208bbd #208bbd #d8dfea #d8dfea;
  border-style: solid;
  border-width: 1px 0;
  font: bold 14px/34px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  height: 34px;
  padding: 0 0 0 10px;
  color: #fff;
  border-radius: 3px;
}

#client .Result {
	height: 40px;
  margin: 0 auto 10px;
  position: relative;
  width: 940px; 
}
.pop #client .Result{
  width: 100%; 
}

#client .Result .Number {
  font-size: 12px;
  left: 0;
	position: absolute;
  top: 0;
}

#client .Result .Number b {
	margin: 0 2px 0 0; 
}

#client .Result .Number input[type="text"] {
  border: #bbb solid 1px;
  margin: 0 0 0 20px;
  outline: none;
	padding: 2px;
	width: 110px; 
}

#client .Result .Number .btn-search {
  height: 24px;
	width: 70px; 
}

#client .Result .Copy {
  font-size: 12px;
	position: absolute;
  right: 0;
  top: -10px;
}

#client .Result .Copy select {
  border: #bbb solid 1px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
  height: 24px;
  margin: 0 0 0 4px;
  outline: none;
	padding: 2px 0 2px 2px;
	width: auto; 
}

#client .Result .Copy a.btn-Newpage {
  height: 24px;
	width: 130px; 
}

#client .Add {
	width: 250px;
	margin:0 auto 20px;
    	position: absolute;
    	right: 0;
    	top: 0;
   	text-align: right;
}
#client .Result.tokusyu_btn{
	width: 250px;
	margin:0 auto 20px;
   	text-align: center;
	position:relative;
	height:58px;
}
#client table {
  font-size: 12px;
  margin: 0 auto 10px;
	width: 1000px;
}

.pop #client table{
	width: 100%;
}

#client th input[type="checkbox"] {
	margin: 0 0 0 2px;
  vertical-align: middle; 
}

#client th {
  border: #999 solid 1px;
  background: #9FD5EE;
  padding: 8px;
	text-align: center; 
	font-size:14px;
}

#client th:first-child {
	text-align: left;
  width: 250px; 
}
#client th.table_no {
	text-align: center;
  width: 50px; 
}
#client th.Operation {
	width: 252px; 
}

#client th.Operation-Delete {
	width: 60px; 
}

#client th.w50{
	width: 50px; 
}
#client th.w70{
	width: 70px; 
}
#client th.w75{
	width: 75px; 
}
#client th.w100{
	width: 100px; 
}
#client th.w120{
	width: 120px; 
}
#client th.w150{
	width: 150px; 
}
#client th.w180{
	width: 180px; 
}

#client td span{
	margin-left: 5px;
}

#client td {
  border: #999 solid 1px;
  padding:12px 5px;
  font-size:14px;
}

#client td input[type="checkbox"] {
	margin: 0 0 0 12px;
  vertical-align: middle; 
}

#client td a.Edit,
#client td a.Delete {
	text-decoration: none;
  width: 70px; 
}

#client td a.Preview {
	text-decoration: none;
  width: 100px; 
}

#client .Bulk {
  height: 45px;
  margin: 0 10px;
	width: 100px;
	
}

#client .Bulk button{
	display:none;
}

#client a:hover img {
	-ms-filter: "alpha(opacity=75)";
				filter: alpha(opacity=75);
							-khtml-opacity: .75;
								-moz-opacity: .75;
										 opacity: .75;
}




/* Client-Management - Newpage ~ 03 - page 
--------------------------------------------------------- */
#client .Newpage {
  border: #999 solid 1px;
  font-size: 12px;
  margin: 0 auto 10px;
	width: 940px; 
}

#client .Newpage th {
	background: #Ddf2ff;
  border: #999 solid 1px;
  padding: 8px;
  text-align: center;
  width: 240px; 
}

#client .Newpage td {
  border-color: #999;
  border-style: dotted;
  border-width: 1px 0 0;
  padding: 10px;
  text-align: center;
}

#client .Newpage td ul {
	margin: 0;
  padding: 0;
  width: 918px;
}

#client .Newpage td ul li {
  display: block;
  float: left;
  height: 145px;
  list-style: none;
  margin: 0;
  padding: 4px;
  text-align: center;
	width: 145px; 
	cursor: pointer;
}

#client .Newpage td li img {
	margin-bottom: 4px; 
}

#client .Newpage td table {
	border: none;
  float: left;
  margin: 0 6px 0 0;
  padding: 0;
  width: 300px;
}

#client .Newpage td table th {
  background: #b3e4fb;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0 0 4px;
  color: #004bd1;
	font-weight: bold;
  padding: 4px;
  text-align: center;
}

#client .Newpage td table th:first-child {
	border: none;
}

#client .Newpage td table td {
  border-color: #fff;
  border-style: solid;
  border-width: 4px 0 0 4px;
  padding: 4px;
  text-align: center;
}

#client .Newpage td select {
	float: left; 
}

#client .Newpage td select {
	border: 1px solid #bbb;
	font-family: "ＭＳ ゴシック","MS Gothic","Osaka－等幅",Osaka-mono,monospace;
	margin: 0 0 0 4px;
	outline: medium none;
	padding: 2px 0 2px 2px;
	width: auto;
}

/* グループ */
#client .Newpage2 {
  border: #999 solid 1px;
  font-size: 12px;
  margin: 0 auto 10px;
	width: 940px; 
}

#client .Newpage2 th {
	background: #Ddf2ff;
  border: #999 solid 1px;
  padding: 8px;
  text-align: center;
  width: 240px; 
}

#client .Newpage2 td {
  border-color: #999;
  border-style: dotted;
  border-width: 1px 0 0;
  padding: 10px;
  text-align: center;
}

#client .Newpage2 td ul {
	margin: 0;
  padding: 0;
  width: 918px;
}

#client .Newpage2 td ul li {
  display: block;
  float: left;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 4px;
  text-align: center;
	width: 145px; 
	cursor: pointer;
}

#client .Newpage2 td li img {
	margin-bottom: 4px; 
}

#client .Newpage2 td table {
	border: none;
  float: left;
  margin: 0 6px 0 0;
  padding: 0;
  width: 300px;
}

#client .Newpage2 td table th {
  background: #b3e4fb;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0 0 4px;
  color: #004bd1;
	font-weight: bold;
  padding: 4px;
  text-align: center;
}

#client .Newpage2 td table th:first-child {
	border: none;
}

#client .Newpage2 td table td {
  border-color: #fff;
  border-style: solid;
  border-width: 4px 0 0 4px;
  padding: 4px;
  text-align: center;
}

#client .Newpage2 td select {
	float: left; 
}

#client .Newpage2 td select {
	border: 1px solid #bbb;
	font-family: "ＭＳ ゴシック","MS Gothic","Osaka－等幅",Osaka-mono,monospace;
	margin: 0 0 0 4px;
	outline: medium none;
	padding: 2px 0 2px 2px;
	width: auto;
}

#client .Next {
  height: 24px;
  margin: 0 auto;
	width: 100px;
}

#client a:hover img {
	-ms-filter: "alpha(opacity=75)";
				filter: alpha(opacity=75);
							-khtml-opacity: .75;
								-moz-opacity: .75;
										 opacity: .75;
}




/* Client-Detail - page 
--------------------------------------------------------- */
#client .category {
  font-size: 12px;
  margin: 10px auto 10px;
	width: 940px; 
}

.Required {
    color:#fff;
    background: #c00;
    border-radius: 3px;
    font-size: 12px;
    padding: 0 5px;
    float: right;
    display: block;
    margin-left:6px;
}
.Required.dirmasta {
   color:#c00;
   background:none;
   margin:0;
}
.Any {
	color: #208BBD;
  float: right;
  font: 10px/1.4 Arial, Helvetica, sans-serif;
  margin: 0 0 0 4px; 
}

#client .category th {
	background: #9FD5EE;
  border: #208bbd solid 1px;
  padding:10px 8px;
	text-align: right;
  width: 240px; 
	font-size:14px;
}

#client .category td {
	border: #208bbd solid 1px;
 	padding: 8px;
	font-size:13px;
	word-break: break-word;
}

#client .category td select {
  border: #bbb solid 1px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
  margin: 0 4px 0 0;
  outline: none;
	padding: 3px;
	width: auto; 
}

#client td input[type="text"] {
  border: #bbb solid 1px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
  height: 24px;
  margin: 0;
  outline: none;
	padding: 0;
	width: 600px; 

 	/* IE input Adjustment */
  line-height: 1.8em;
	padding-left: 0.5em;
}
.pop #client td input[type="text"]{
	width: 60%; 
}
.top_w100{
	width:100% !important;
	box-sizing:border-box;
}
#client td textarea {
  border: #bbb solid 1px;
  font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
  line-height: 1.4;
  margin: 0;
  min-height: 100px;
	padding: 2px;
	width: 744px; 
}
.pop #client td textarea{
	width: 90%;
}

#client .detail {
  font-size: 12px;
  margin: 0 auto 10px;
	width: 940px; 
}

#client .detail th {
	background: #e0ffff; 
  border: #999 solid 1px;
  margin: 0 4px 0 0;
  padding: 8px;
	text-align: right;
  width: 240px; 
}

#client .select-btn {
  margin: 20px auto 0;
  text-align: center;
	width: 1150px;
	padding:30px 0;
	background-color:#eee;
}
.pop #client .select-btn{
	width: 100%;
}
#client .select-btn.pagem {
	background-color:#FFF;
	padding:10px 0;
	margin:0;
}
#client .select-btn ul{
	display: flex;
    	justify-content: center;
	margin-bottom:10px;
}
#client .select-btn ul.conts_back{
	margin-top:20px;
}
#client .select-btn ul li{
	width:250px;
	margin-right:10px;
}
#client .select-btn ul li:last-child{
	margin-right:0;
}
#client .select-btn ul li a{
	display:block;
	padding:15px;
	font-size:15px;
	color:#2c3f51;
	transition: all .5s ease;
}
#client .select-btn ul li a.btn, #client .select-btn ul li a.btn_pg{
	text-decoration: none;
	border:2px solid #2c3f51;
	border-radius:5px;
	font-weight:bold;
	cursor:pointer;
	background-color:#FFF;
}
#client .select-btn ul li a.btn:hover {
	background-color:#2c3f51;
	color:#fff;
}
#client .select-btn ul li a.btn.kari{
	border:2px solid #2c3f51;
	background-color:#fff;
    	color: #2c3f51;
}
#client .select-btn ul li a.btn.kari{
	margin-right:5px;
}
#client .select-btn ul li a.btn.kari:hover{
	background-color:#2c3f51;
	border:2px solid #2c3f51;
	color:#fff;
}
#client .select-btn ul li a.btn.output{
	border:2px solid #208BBD;
	background-color:#208BBD;
	color:#fff;
}
#client .select-btn ul li a.btn.output:hover{
	background-color:#2c3f51;
	border:2px solid #2c3f51;
	color:#fff;
}
#client .select-btn ul li a.btn_pg.output{
	border:2px solid #F47D20;
	background-color:#F47D20;
	color:#fff;
}
#client .select-btn ul li a.btn_pg.output:hover{
	background-color:#cd5c04;
	border:2px solid #cd5c04;
	color:#fff;
}
#client .select-btn ul li a.btn.page_back{
	border:2px solid #2c3f51;
	background-color:#fff;
	color:#2c3f51;
	padding:10px 0;
	width:170px;
	margin:0 auto;
	font-size:12px;
}
#client .select-btn ul li a.btn.page_back:hover{
	background-color:#2c3f51;
	border:2px solid #2c3f51;
	color:#fff;
}
/* ADD by sasaki*/

#client .templateitem{
  font-size: 12px;
  margin: 0 auto 10px;
	width: 940px;
}

#client .templateitem th input[type="checkbox"] {
	margin: 0 0 0 2px;
  vertical-align: middle; 
}

#client .templateitem th {
  border: #999 solid 1px;
  background: #d7f2ff;
  padding: 8px;
	text-align: center; 
	max-width: 200px;
}

#client .templateitem th:first-child {
	text-align: left;
  width: 44px; 
}

#client .templateitem th.Operation {
	width: 252px; 
}

#client .templateitem th.Operation-Delete {
	width: 60px; 
}

#client .templateitem td {
  border: #999 solid 1px;
  padding: 8px;
	height: 26px;
}

#client .templateitem td input[type="checkbox"] {
	margin: 0 0 0 12px;
  vertical-align: middle; 
}

#client .templateitem td a.Edit,
#client .templateitem td a.Delete {
	text-decoration: none;
  width: 70px; 
}

#client .templateitem td a.Preview {
	text-decoration: none;
  width: 100px; 
}

#client .templateitem td input[type="text"] {
    border: 1px solid #BBBBBB;
    font-family: "ＭＳ ゴシック","MS Gothic","Osaka－等幅",Osaka-mono,monospace;
    height: 24px;
    line-height: 1.8em;
    margin: 0;
    outline: medium none;
    padding: 0 0 0 0.5em;
    width: 180px;
}

#client table.setting {
	width: 500px;
}
#client table.setting th{
	background-color: #b7d6e5;
}

#client table.setting th.th1{
	width: 200px;
}
#client table.setting th.th2{
	width: 80px;
}

#client table.setting td{
	vertical-align: top; 
}

#client div.h20{
	height: 20px;
}
#client div.mtop20{
	margin-top: 20px;
}
#client div.right{
	float: right;
}

#main-Menu .section .Menu-list li.ctop {
	height: 20px;
	text-align: center;
	padding: 10px 0px;
}
.righttop_mark:after{
	content: attr(data-mark);
	color: white;
	background-color: red;
	display: none;
	border: 2px solid white;
	border-radius: 15px;
	font-size: 75%;
	font-weight: bold;
	position: absolute;
	top: -8px;
	right: -6px;
	padding: 1px 6px;
}
.righttop_mark.mark_show:after{
	display: inline-block;
}

span.righttop_mark{
	position: relative;
}
span.righttop_mark:after{
	top: -15px;
	right: -8px;
}

input[type=passowrd],
input[type=email]{
	border: #bbb solid 1px;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	height: 24px;
	margin: 0;
	outline: none;
	padding: 0;
	width: 600px; 
	/* IE input Adjustment */
	line-height: 1.8em;
	padding-left: 0.5em;
}
.pop input[type=passowrd],
.pop input[type=email]{
	width: 60%; 
}
/* CSS end */