@import url(base.css);

.sp {
	display: none !important; }

/* 共通 */
br.tiny {
	display: block;
	content: "";
	margin: -0.3em 0;
}

/* 全体表示フレーム */
.summary_frame {
	margin: 30px 5% 30px 5%;
	display: block;
	text-align: center;
}

.title_logo {
	/*
	width: 400px;;
	text-align: left;
	margin-bottom: 15px;
	*/
	vertical-align: middle;
	width: 250px;;
	float: left; 
	margin: 0.8em 0.8em 0.8em 0;
}

/* 閉じるボタン用 */
.c_button {
    width: 90%;
	margin: auto auto auto 30px;
	padding: 1px 2px 1px 2px;
    border: 1px solid #0000bb;
    border-radius: 5px;
    text-align: center;
}
/* マウスオーバー時のカラー */
.c_button:hover {
    background-color: #0000bb;
}
/* リンク領域のスタイル */
.c_button-a {
    padding: 1px 0;
    text-align: center;
	text-decoration: none;
	font-size: 16px;
}


/* 小さいボタンのスタイル */
.s_button {
    width: 25px;
	margin: auto auto auto 5px;;
	padding: 1px;
	color: #888888;
    border: 1px solid #888888;
    border-radius: 5px;
	text-align: center;
	font-size: 10px;
	display: inline-block;
}
/* マウスオーバー時のカラー */
.s_button:hover {
    background-color: #888888;
}
/* リンク領域のスタイル */
.s_button-a {
/*    display: block;	*/
    padding: 2px 0;
    text-align: center;
	text-decoration: none;
	color: #888888;
}
/* マウスホバー時のカラー*/
.s_button-a:hover {
    color: #ffffff;
}

/* ページタイトル */
.page_title {
	text-align: left;
	padding-top: 40px;
	font-size: 130%;
	font-weight: bolder;
	vertical-align: middle;
}
.logout_botton {
	text-align: right;
	padding-top: 20px;
	font-size: 13px;
}
.block_name {
	margin-top: 20px;
	margin-bottom: 5px;
	text-align: left;
	font-size: 120%;
	font-weight: bolder;
}
.block-title-desc {
	font-size: 14px;
}


/* TOPページ */
/* お知らせ */
div.top_message{
	text-align: left;
	font-size: 90%; 
	max-width: 700px; 
	margin: -20px auto 30px -40px;
}
ol.top_message{
	counter-reset:list;
	list-style-type:none;
	font: 14px/1.6 'arial narrow', sans-serif;
	padding: 0;
  }
  ol.top_message li{
	position:relative;
	line-height: 20px;
	margin: 7px 0 10px 40px;
	padding-left:10px;
/*	font-weight: bold;*/
	font-size:14px;
	border-bottom:solid 1px #6c757d;
  }
  ol.top_message li:before{
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: -20px;
	width: 20px;
	height: 22px;
	background: #6c757d;
	text-align: center;
	color: #fff;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
  }

/* 売上概要 */
table td.pad-right2{
	width: 10em;
	padding-right:1.1em !important;
}

/* 会員アクション概要 */
div.member_overview{
	text-align: left !important;
	font-size: 90% !important;
	margin-left: -40px;
}
div.member_overview .overview_blobk{
	margin: 10px auto auto 18px;
}
table.member_overview{
	text-align: left !important; 
	margin: auto 0 !important; 
	max-width: 700px !important; 
	font-size:80% !important;
}
table td.pad-right{
	padding-right:1.1em !important;
}
table tr.high-light{
	background: #dff !important;
}

/* モーダル（使い方・改訂履歴）CSS  BEGIN */
.modalArea {
	display: none;
	position: fixed;
	z-index: 10; /*サイトによってここの数値は調整 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 70%;
	max-width: 800px;
	padding: 10px 30px;
	background-color: #fff;
	height: 50%; 		/*お好みの高さで固定*/
	overflow: auto; 	/*状況に応じて縦スクロールバーが出現*/
	border-radius: 0.3rem;
}

.closeModal {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	cursor: pointer;
}
p.modal-date {
	display: inline-block;
	width: 5.3em;
	font-size: 10pt;
	margin-bottom: 5px;
}
p.modal-title {
	display: inline-block;
	text-decoration : underline;
	font-size: 10pt;
	margin-bottom: 5px;
}
p.modal-desc {
	margin-left: 30px;
	font-size: 10pt;
	margin-bottom: 3px;
}
p.usage-abstruct {
	vertical-align: top;
	text-indent: 1em;
	margin-left: 10px;
	font-size: 9pt;
	margin-bottom: 10px;
}
div.usage-title {
	display: inline-block;
	vertical-align: top;
	width:20%; 
	height: auto;
	font-size:9pt; 
	font-weight: bolder;
}
div.usage-desc {
	display: inline-block;
	vertical-align: top;
	width: 78%;
	height: auto;
	font-size:9pt; 
}

span.usage-title {
	display: inline-block;
	vertical-align: top;
	width:20%; 
	height: auto;
	font-size:9pt; 
	font-weight: bolder;
	vertical-align: top;
}
span.usage-desc {
	display: inline-block;
	vertical-align: top;
	width: 78%;
	height: auto;
	font-size:9pt; 
	vertical-align: top;
}


div.usage-block {
	display: block;
	margin-left: 20px;
	margin-bottom: 5px;
}

hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #cccccc;
	height: 1px;
}

/* 以下ボタンスタイル */
#openModal {
	color: #888;
	font-size: 8pt;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #888;
	border-radius: 5px;
	cursor: pointer;
}
.openModalButton {
	color: #888;
	font-size: 8pt;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #888;
	border-radius: 5px;
	cursor: pointer;
}
/* モーダル（使い方・改訂履歴）CSS  END */

/* 日付に曜日・祝祭日の色指定 CSS BEGIN */
.daySun {
	background-color: #f00;
	color: #fff;
}
.daySat {
	background: #00f;
	color: #fff;
}
.dayHoli {
	background: red;
	color: #fff;
}
/* 日付に曜日・祝祭日の色指定 CSS END */

/* MULTIPLE SELECT 用 BEGIN */
.toggle-multiselect {
    margin-right: 5px;
    cursor: pointer;
}
.icon-only {
    background-position: 0% 50%;
    background-repeat: no-repeat;
    padding-left: 16px;
    display: inline-block;
    width: 0;
    height: 16px;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 8px;
    vertical-align: middle;
}
.icon-toggle-plus {
    background-image: url(../images/bullet_toggle_plus.png);
}
/* MULTIPLE SELECT 用 END*/

/* SPINNER 用 BEGIN */
.spinner {
	width: 100vw;
	height: 20vw;
	position: absolute;
	z-index: 30;
	transform: translate(-5%,30%);
}
.spinner:before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100px;
	width: 100px;
	margin-top: -50px;
	margin-left: -50px;
	border-radius: 50%;
	border: 8px solid lightgrey;
	border-top-color: gray;
	animation: spinner 0.5s linear infinite;
}
@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}
/* SPINNER 用 END */