@charset "UTF-8";

body {
	color: #333;
}

/* webアイコンの強調表示 */
.fa-emphasis {
	font-size: 1.4em;
	font-weight: bold;
	vertical-align: middle;
}

/* アプリ内のカラーパレット */
/* ロゴカラー(Light) */
.cl-brand1 {
	color: #e9f1db;
}
.bcl-brand1 {
	background-color: #e9f1db;
}

/* ロゴカラー */
.cl-brand2 {
	color: #8dc031;
}
.bcl-brand2 {
	background-color: #8dc031;
}

/* ロゴカラー(LightDark) */
.cl-brand3 {
	color: #76bf32;
}
.bcl-brand3 {
	background-color: #76bf32;
}

/* ロゴカラー(Dark) */
.cl-brand4 {
	color: #50B043;
}
.bcl-brand4 {
	background-color: #50B043;
}

/* 主機能ボタン色 */
.cl-primary1 {
	color: #ffb10a;
}
.bcl-primary1 {
	background-color: #ffb10a;
}

/* 主機能ボタン派生色 */
.cl-primary2 {
	color: #ff7900;
}
.bcl-primary2 {
	background-color: #ff7900;
}

/* 最重要ボタン色 */
.cl-primary3 {
	color: #eb6600;
}
.bcl-primary3 {
	background-color: #eb6600;
}

/* コンテンツ強調色 */
.cl-primary4 {
	color: #f56f6f;
}
.bcl-primary4 {
	background-color: #f56f6f;
}

/* アクセントカラー色 */
.cl-accent1 {
	color: #00acf0;
}
.bcl-accent1 {
	background-color: #00acf0;
}

/* 見出しカラー色 */
.cl-accent2 {
	color: #0080c9;
}
.bcl-accent2 {
	background-color: #0080c9;
}

/* 最濃アクセントカラー色 */
.cl-accent3 {
	color: #4350b0;
}
.bcl-accent3 {
	background-color: #4350b0;
}

/* ベースカラー色 */
.cl-accent4 {
	color: #54687A;
}
.bcl-accent4 {
	background-color: #54687A;
}

/*========================================================================================
  swfhome.cssの上書き
========================================================================================*/
@media screen and (max-width:480px) {
	.grid {
		padding: 4px;
	}
}

.grid-half {
	width: 50%;
}

@media (max-width:768px) {
	.grid-half {
		width: 100%;
	}
}

/* gridを打ち消すCSS */
.reset-grid {
	float: none;
	padding: 0;
	width: auto;
}

/* カテゴリタイトルの開閉アイコン「＋」「－」の位置がセンターにくるよう微調整 */
.swfhome_parts_head_frame img {
	margin-top: 4px;
	margin-right: 0;
}

/* カテゴリ内のリンクボタンデザイン */
.swfhome_parts_menu a {
	display: inline-block;
	margin: 0;
	padding: 0 4px;
	height: auto;
	background-color: transparent;
	color: #595959;
	font-size: 12px;
	font-weight: normal;

}

.swfhome_parts_menu a:hover {
	background-color: transparent;
	color: #838383;
}

/* お知らせポートレットの一覧デザインを調整(余白・行間を全体的に縮小) */
.gl-tr {
	padding: 8px;
}

.gl-tr-hd,
.gl-tr-cnt {
	margin-bottom: 8px;
}

.avatar-bg {
	margin-right: 8px;
}

.profile-img-li {
	width: 32px;
	height: 32px;
}

.meta-group,
ul .meta-group {
	line-height: 1.2;
}

.meta-data {
	font-size: 12px;
}

.li-title {
	margin-top: 16px;
	margin-bottom: 8px;
	line-height: 1.4;
	font-weight: 600;
}

.li-contents {
	font-size: 14px;
}

/*========================================================================================
  sccstyle.cssの上書き
========================================================================================*/
/* インプットの文字色のみアプリに合わせて変更 */
input,
textarea,
select,
.imitate-input {
	color: #2c3643;
}

textarea#ErrorMessage {
    min-height: 150px;
}

/* キャンセルボタン */
.csbtn {
	border: solid 1px #b7bfc6;
  background-color: transparent;
  color: #646f79;
}

/* サービス固有の不可逆機能実行ボタン */
.btn-update {
	border: solid 1px #eb6600;
	background-color: #eb6600;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	color: #FFF;
}

/* サービス固有の主機能実行ボタン */
.btn-execute {
	border: solid 1px #f59f05;
	background-color: #f59f05;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	color: #fff;
}

.btn-execute-o {
	border: solid 1px #DD5617;
	background-color: #fff;
	color: #DD5617;
}

.btn-execute-o:hover {
	background-color: rgba(252,170,0,0.2);
}

/* サービス固有の機能実行ボタン */
.btn-fn {
	border: solid 1px #50B043;
	background-color:#50B043;
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
	color: #FFF;
}

.btn-fn-o {
	border: solid 1px #008040;
	background-color: transparent;
	color: #008040;
}

.btn-fn-o2 {
	border: solid 2px #008040;
	background-color: transparent;
  color: #008040;
}

.btn-fn-o-ntl {
	border: solid 1px #b7bfc6;
	background-color: transparent;
	color: #008040;
}

.btn-fn-o:hover,
.btn-fn-o2:hover,
.btn-fn-o-ntl:hover {
	background-color: rgba(118,191,50,0.1);
}

.btn-accentCl {
	border: solid 1px #00acf0;
	background-color: #00acf0;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	color: #FFF;
}

.btn-accentCl-o {
	border: solid 1px #00acf0;
	background-color: transparent;
	color: #00acf0;
}

.btn-accentCl-o-ntl {
	border: solid 1px #b7bfc6;
	background-color: transparent;
	color: #00acf0;
}

.btn-accentCl-o:hover,
.btn-accentCl-o-ntl:hover {
	background-color: rgba(0,172,240,0.1);
}

.btn-baseCl {
	border: solid 1px #54687A;
	background-color: #54687A;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	color: #fff;
}

.btn-baseCl-o {
	border: solid 1px #34495e;
	background-color: transparent;
	color: #34495e;
}

.btn-baseCl-o:hover {
	background-color: rgba(84,104,122,0.1);
}

/* 削除系の注意して押してほしいボタンデザイン */
.btn-caution-o {
	border: none;
	background-color: #fff;
	border: solid 1px #e60033;
	color: #e60033;
}

.btn-caution-o:hover,
.btn-warning-o:hover {
	background-color: rgba(230,0,51,0.1);
}

/* 親ボタンクラス 自ボタン内でアイコンを絶対値で配置したい場合に使用（例：沿線：駅から探すボタンの">"） */
.btn-relative {
	position: relative;
	margin: 0;
	padding: 10px 30px;
	width: 100%;
	border-radius: 10px;
	line-height: normal;
}

/* メインカラー(緑)ベタ塗りボタン */
.btn-menuCl-green {
	border: solid 1px #50B043;
	background-color: #50B043;
	color: #fff;
}

.btn-menuCl-green:hover {
	color: #fff;
}

/* アクセントカラー(朱)ベタ塗りボタン */
.btn-acCl-verm {
	border: solid 1px #f56f6f;
	background-color: #f56f6f;
	color: #fff;
}

.btn-acCl-verm:hover {
	color: #fff;
}

/* 大き目ボタンデザイン */
.btn-lg {
	margin: 8px;
	padding: 1.2em 2.4em;
	border-radius: 6px;
	font-size: 18px;
}

/*「<<」アイコン */
.icon-double-back:before {
	content: "\f100";
}

/* 「>>」アイコン */
.icon-double-next:after {
	content: "\f101";
}

/*お医者さんのアイコン*/
.icon-user-md:before {
	content: "\f0f0";
}

/* ✔入りカレンダーアイコン */
.icon-calendar-check:before {
	content: "\f274";
}

/*リストマーク代わりにつかうアイコン*/
.icon-3dot-listmark:before {
	content: "\f142 \f142";
	font-size: 1.4em;
	letter-spacing: 0.1em;
	vertical-align: middle;
}

/* 外部リンクのアイコン */
.icon-external-link:after {
	content: "\f08e";
}

/* 救急車アイコン */
.icon-ambulance:before {
	content: "\f0f9";
}

/* Vアイコン（下向きの展開表示アイコン） */
.icon-chevron-down:after {
	content: "\f078";
}

/* Vアイコン（上のやつより線が細い） */
.icon-angle-down:after {
	content: "\f107";
}

/* 「＞」アイコンを右に表示する */
.icon-angle-right-R:after {
	content: "\f105";
}

/* 鎖が切れたアイコン */
.icon-chain-broken:before {
	content: "\f127";
}

/* スマイルフェイス */
.icon-smile:before {
	content: "\f118";
}

/* 哀しいフェイス */
.icon-sad:before {
	content: "\f119";
}

/* プリンターアイコン */
.icon-printer:before {
	content: "\f02f";
}

/* 医療バッグアイコン */
.icon-medkit:before {
	content: "\f0fa";
}

/* スター（塗りつぶし）アイコン */
.icon-star:before {
	content: "\f005";
}

.ufad-datagrid-line img {
	margin-top: 0;
}

/* 2018/10/10 とりあえずコメントアウト
@media (max-width:920px) {
	.parent {
  	display: flex;
		flex-wrap: wrap;
	}

	.children {
		flex-basis: calc(50% - 16px);
	}
}
*/

/* 480px以下用（スマホ用）の記述 */
@media (max-width:480px) {
	.btn {
		width: calc(100% - 1em);
	}

	.btn-sm,
	.btn-lg {
		width: calc(100% - 20px);
	}
}

/*========================================================================================
  swfnote.cssの上書き
========================================================================================*/
.swfNoteProgramMainCnt .h3 {
	font-size: 20px;
}

/*
.swfNoteInfoTbl .formItemSeparatorLeft,
.swfNoteInfoTbl .formItemSeparatorRight {
	vertical-align: middle;
}
*/

#search-container .swfNoteWrapper {
	width: calc(100% - 16px);
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.ifad_form_design .swfNoteWrapper {
		width: 98%;
	}

	#search-container .swfNoteWrapper {
		width: calc(100% - 16px);
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.ifad_form_design .swfNoteWrapper {
		width: 98%;
	}

	#search-container .swfNoteWrapper {
		width: calc(100% - 16px);
	}
}

@media only screen and (max-width: 479px) {
	.ifad_form_design .swfNoteWrapper {
		width: 98%;
	}

	#search-container .swfNoteWrapper {
		width: calc(100% - 16px);
	}

	.swfCol {
		padding: 0;
	}
}

.swfNoteInfoTbl .ifad_radio th, .swfNoteInfoTbl .ifad_radio td {
	padding: 0;
}

.swfNoteInfoTbl th,
.swfNoteInfoTbl td {
	padding: 0;
}


/*========================================================================================
  swfplain.cssの上書き
========================================================================================*/
/* フォームのキャプションの色 */
.swfNoteProgramMainCnt .h2 .ifad_text_view {
	color: #3b444f;
}


/*========================================================================================
  swfglmaster.cssの上書き
========================================================================================*/
/* 一覧上のボタンエリアの下余白を4px拡張 */
.commandButton .imitate-td {
	padding-bottom: 8px;
}

/* [新規追加]glmasterの行内画像 */
.ufad-datagrid-column img {
	width: auto;
	height: auto;
	max-height: 300px;
	max-width: 300px;
	vertical-align: top;
}

/* 各行の最後にclear:both */
.ufad-datagrid-line:after{
	content: "";
	clear: both;
	display: block;
}

/* [新規追加]glmasterの行内に配置するボタンデザイン */
.colButtonField input[type="button"] {
	margin: 0;
	padding: 4px 1em;
	border: 1px solid #0080C9;
	background-color: #fff;
	box-shadow: 0px 1px 0px rgba(0,0,0,0.2);
	color: #0080C9;
	font-size: 12px;
	line-height: 1;
}

.colButtonField input[type="button"]:hover {
	background-color: #0080C9;
	color: #fff;
}

.colButtonField a:hover {
	color: #0080C9;
	line-height: 1;
	font-size: 124%;
}

.glmasterBtnAccentCl input[type="button"] {
	padding: 8px 24px;
	border: none;
	border-radius: 5px;
	background-color: #00acf0;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	color: #fff;
}



/* glmasterのタイトル */
.heading {
	color: #3b444f;
}

/* 表の各セル余白を調整 */
table#MasterTable td {
	padding: 4px 8px;
	border: solid 1px #cccccc;
	line-height: 1.3;
}

/*========================================================================================
  login.cssの上書き
========================================================================================*/
.flex-container-login {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}

#userFlowLine {
	text-align: center;
	line-height: 1.3;
	flex-basis: 60%;
}

#userFlowLine .h2 {
	margin: 32px 0;
	font-size: 30px;
	font-weight: 600;
}

.btn-userFlowLine {
	display: block;
	border-width: 6px;
	box-shadow:0px 0px 0px 4px #ffffff inset;
	font-size: 24px;
}

/*
.flex-item-login {
	flex-basis: 50%;
}
*/

/* 数字の協調 */
.em_number {
	font-size: 32px;
	font-weight: 600;
}

#loginContent {
	flex-basis: 40%;
	margin-top: 16px;
	padding: 8px;
	background-color: #F8F7F4;
}

#loginBox h1 {
	font-size: 22px;
}

/* #Passwdだけだと、アカウント情報画面の「パスワードの変更」ボタンとidが被るので、#loginBoxを頭につけています */
#loginBox #Passwd {
	height: 30px;
}

/* ログインボタンの色をi・karadaのカラーパレットに合わせる */
#buttonLogin {
	border: solid 2px #76bf32;
	background-color: #fff;
	color: #76bf32;
}

.login_btn {
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 830px以下用の記述 */
@media (max-width:830px) {
	#userFlowLine,
	#loginContent {
		flex-basis: 100%;
	}

	#userFlowLine {
		margin-bottom: 32px;
	}
}

/* 480px以下用（スマホ用）の記述 */
@media (max-width:480px) {
	.btn-userFlowLine {
		padding: 1.2em 1em;
		font-size: 22px;
	}
	.login_btn {
		width: 100%;
	}
}

/*========================================================================================
  ifadinputform.cssの上書き
========================================================================================*/
.ifad_form table,
.ifad_form_design table,
.ifad_form_attachment table {
	color: #3c4a60;
}

.ifad_label,
.ifad_label span {
	display: inline-block;
}

.ifad_label {
	margin-bottom: 0;
	vertical-align: middle;
	color: #2c3e50;
}

.ifad_choice {
	display: inline-block;
	vertical-align: top;
	line-height: 1;
}

.ifad_choice .ifad_label {
	vertical-align: middle;
	font-size: 14px;
	font-weight: 400;
	color: #2c3643;
}

.ifad_choice img {
	vertical-align: middle;
}

.ifad_date_container select {
	height: 30px;
}

.ifad_date_container .ifad_dy,
.ifad_date_container .ifad_dm,
.ifad_date_container .ifad_dd,
.ifad_date_container .ifad_th,
.ifad_date_container .ifad_tm {
	vertical-align: baseline;
}

input[type="text"] {
	height: 30px;
}

/*========================================================================================
  ajaxlist.cssの上書き
========================================================================================*/
.topAnnai .listTitle a {
	color: #4682b4;
	text-decoration: none;
	font-weight: normal;
}

.topAnnai .listTitle a:hover {
	color:#1c1c1c;
}

.swfliststatusicon {
	background-size: contain;
	margin-bottom: 6px;
}


/*========================================================================================
  既存クラスで使用していないものを再利用
========================================================================================*/
.category_header_link {
	text-shadow: none;
}

/* カテゴリ内リンクボタンの左側に「えんぴつ」アイコンを追加する */
.category_header_link_edit:before {
	font-family: FontAwesome;
	margin-right: 8px;
	content: "\f14b";
	display: inline-block;
}

.swfCol hr {
	border: none;
	height: 0;
	margin: 0;
}

/* 線は消すけど自分でindex貼るときの線は残す */
.swfCol .swfNoteIndexBorderDotted {
	border-bottom: dotted 1px #ccc;
}

/* タブレットサイズ以下になったら、新着メッセージのデザインを変える */
@media only screen and (max-width: 768px) {
	/* 新着メッセージのタイトルは、日付の横から折り返さないようにする */
	#dgAjaxListProgress .listTitle {
		display: inline-block;
	}
	/* ステータスアイコンのフロート解除 */
	.topAnnai dt {
		float: none;
	}
	/* 「回答する」や「確認する」は非表示にする */
	#dgAjaxListProgress .colLink {
		display: none;
	}
}

/* 新着メッセージのステータスアイコン */
#dgAjaxListProgress img {
	height: 21px;
}

/* メールの進捗状況確認のステータスアイコン */
/*
.ufad-datagrid-line img {
	height: 21px;
}
*/

/* STEP1~3のプログレスバー画像 */
#agreement_input_flow01 img,
#agreement_input_flow02 img,
#agreement_input_flow03 img {
	width: 198px;
	height:52px;
}

#agreement_flow01 img,
#agreement_flow02 img,
#agreement_flow03 img {
	width: 198px;
	height:52px;
}

/* 項目の左側／右側の挿入文字列 */
.formItemSeparatorRightFrame,
.formItemSeparatorRight,
.formItemSeparatorLeftFrame,
.formItemSeparatorLeft {
	vertical-align: middle;
}

/*------------------------------------
　　リストタイプのポートレットデザイン
------------------------------------*/
/* リストタイプのポートレットの外枠 */
/*
.master-list1 {
	border: 1px solid rgba(0,0,0,0.1);
}
*/

.infinite-scroll-gl-master {
	display: table;
	width: calc(100% - 1px);
}

/* リストタイプポートレットの行とコンテンツ部分 */
.master-list1 .swfhvl {
	display: table-row-group;
	margin: 0;
	padding: 0;
}

.master-list1 .swfhvl li {
	display: table-row;
}

/* 表のヘッダー部デザイン */
.swfhvl_first {
	background-color: #f3f3f3;
}

.master-list1 .swfhvl li div {
	display: table-cell;
	padding: 2px 4px;
	border: 1px solid rgba(0,0,0,0.1);
	vertical-align: top;
}

/*========================================================================================
  プレースホルダーの色設定
========================================================================================*/
/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
    color: #d3d3d3;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    color: #d3d3d3;
}

/* Firefox 18- */
:-moz-placeholder {
    color: #d3d3d3; opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
    color: #d3d3d3; opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
    color: #d3d3d3;
}



/*========================================================================================
  オリジナルクラス
========================================================================================*/
/* メニュー上のお知らせ数 */
.information-number {
	display: block;
	float: right;
	width: 24px;
	height: 24px;
	padding: 2px 4px;
	border-radius: 20px;
	background-color: #e60033;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
}

.information-number-big {
	display: block;
	float: right;
	width: 40px;
	height: 40px;
	padding: 8px 4px;
	border-radius: 40px;
	background-color: #e60033;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
}

/* タグ挿入のためだけの隠し項目 */
.stealth-item {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	width: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	border: none !important;
}

/*============================================
　フォーム共通クラス
============================================*/
table.swfNoteInfoTbl .form-title {
	font-size: 28px;
	color: #2C3643;
}


/*============================================
　フォーム内疑似テーブル用CSSクラス
============================================*/
.im-th {
	width: auto;
	padding: 3px 20px 3px 10px;
	font-weight: 600;
	color: #8dc031;
}

.im-td {
	width: auto;
	padding: 3px 10px;
}

/*============================================
　liを使ったカードデザイン
============================================*/
/* 2分割のカード */
.card-half {
	display: list-item;
	list-style-type: none;
 	float: left;
 	position: relative;
 	width: calc(100% * .50 - 30px - 32px + .50 * 30px);
 	height: auto;
 	margin: 0 30px 30px 0;
	padding: 16px;
}

.card-half:last-child {
	margin-right: 0;
}

@media (max-width: 700px) {
	.card-half {
		width: calc(100% - 32px);
		height: auto;
		margin-right: 0;
		float: none;
	}
}

/*============================================
　flexを使ったカードデザイン
============================================*/
.parent-flex {
  display: flex;
	flex-wrap: wrap;
}

.children-flex-half {
/*	flex-grow: 1; */
	flex-basis: calc(50% - 16px);
	min-height: 80px;
}

.children-flex-quarter {
/*	flex-grow: 1; */
	flex-basis: calc(25% - 16px);
	min-height: 80px;
}

@media (max-width:920px) {
	.children-flex-quarter {
		flex-basis: calc(50% - 16px);
	}
}

/* 480px以下用（タブレット用）の記述 */
@media (max-width:660px) {
	.children-flex-half,
	.children-flex-quarter {
		flex-basis: 100%;
	}
}

.children-flex-one-third {
  flex-basis: calc(100% / 3);
}

.children-flex-032 {
	flex-basis: calc(100% / 3);
}

.children-flex-one-third .btn,
.children-flex-032 .btn {
	display: block;
}

.children-flex-one-fifth {
	flex-basis: calc(20% - 16px);
}

@media (max-width:920px) {
	.children-flex-one-third,
	.children-flex-032,
	.children-flex-one-fifth {
		flex-basis: 50%;
	}
}

/* 480px以下用（タブレット用）の記述 */
@media (max-width:660px) {
	.children-flex-one-third,
	.children-flex-032,
	.children-flex-one-fifth {
		flex-basis: 100%;
	}
}

/*============================================
　タグ用デザインクラス（成功／注意／通常／警告／無効）
============================================*/
/* 共通タグクラス */
.tag {
	display: inline-block;
	width: auto;
	margin: 0 4px;
	padding: 2px 4px;
	border-style: solid;
	border-width: 1px;
	background-color: transparent;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

/* 成功 */
.tag-success {
	border-color: #25B877;
	color: #25B877;
}

/* 警告 */
.tag-error {
	border-color: #C04949;
	color: #C04949;
}

/* 注意 */
.tag-warning {
	border-color: #EEB128;
	color: #EEB128;
}

/* 通常 */
.tag-info {
	border-color: #437EC4;
	color: #437EC4;
}

/* 無効 */
.tag-secondary {
	border-color: #999999;
	color: #999999;
}

/*============================================
　メニュー画面デザイン
============================================*/
/* トップメニューは最大サイズ1024pxの中央寄せ */
#jquery-ui-sortable {
	max-width: 1024px;
	margin: 0 auto;
}

/* 幅100%のボタンメニューの親クラスで使う */
.parent-fullButton .btn {
	display: block;
}

/* 事務スタッフメニューのカテゴリタイトルデザイン */
.title-category-default {
	margin: 0 8px;
	padding: 16px;
	padding-bottom: 0;
	background-color: transparent;
	border-bottom: solid 4px #2C3E50;
	font-size: 16px;
	color: #2C3E50;
}

.title-category-borderY {
	border-bottom: solid 4px #ffb10a;
}

.title-category-borderB {
	border-bottom: solid 4px #4350b0;
}

.title-category-borderP {
	border-bottom: solid 4px #f56f6f;
}

/* 事務スタッフメニューのカテゴリタイトルデザイン */
.title-category-green {
	margin: 0;
	padding: 16px;
	background-color: #e9f1db;
	font-size: 16px;
	color: #3c4a60;
}

.title-category-blue {
	margin: 0;
	padding: 16px;
	background-color: #dbe6ec;
	font-size: 16px;
	color: #3c4a60;
}

.content-menu-area {
	margin: 0 8px 32px;
}

#menuButton_staff .btn,
#menuButton_admin .btn,
.content-menu-area .btn {
	font-size: 14px;
}

.title-category-flex {
	display: flex;
	align-items: center;
}

.title-category-flex .emphasis {
	padding: 0 8px 0 16px;
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
}

.title-category-flex .tail {
	font-size: 12px;
}

.btn-o4 {
	padding: 0.5em 2em;
	border-width: 4px;
	border-radius: 10px;
	background-color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

/* 団体-管理者メニューと団体-医療機関メニューで使う機能ボタンデザイン */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	flex-basis: 166px;
	margin: 4px 8px 16px;
}

.flex-item:hover {
	opacity: 1;
	transition: none;
	text-decoration: none;
}

/* 機能ボタンのデザイン */
.btn-orgMenu {
	padding: 16px 8px;
	height: 100%;
	border: solid 1px #9DA5AB;
	border-radius: 8px;
	color: #333333;
	text-align: center;
	font-size: 16px;
}
/* 予約業務カテゴリ群のホバーエフェクト */
.ctg-yoyaku .btn-orgMenu:hover {
	background-color: #ecf7d8;
}
/* 設定カテゴリ群のホバーエフェクト */
.ctg-setting .btn-orgMenu:hover {
	background-color: #ebf0f4;
}

/* 機能ボタンノラベル */
.btn-orgMenu .label {
	margin: 0;
	margin-top: 16px;
	line-height: 1.3;
}

/* カテゴリ名 */
.ctg-title {
	margin: 16px 16px 8px;;
	font-size: 22px;
	font-weight: bold;
	color: #476077;
}

/*============================================
　予約申し込み
============================================*/

/* 医療機関詳細＆コース選択画面のタブ */
.tab-button {
	padding: 12px;
	width: 160px;
	border: 0;
	border: 1px solid #8dc031;
	background-color: #fff;
	text-align: center;
	color: #8dc031;
	font-size: 16px;
}

.under_line {
	border-bottom: 3px solid #8dc031;
}

.under_line:after {
	content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

/* 選択中のタブ */
.tab-button-active {
	border: 1px solid #8dc031;
	background-color: #8dc031;
	color: #fff;
}

/* クリック可能なタブ */
.tab-button-cursor {
	cursor: pointer;
}
.tab-button-cursor:hover {
	color: #50B043;
	background-color: rgba(141,192,49,0.3);
}

/* 医療機関詳細＆コース選択画面の「施設紹介」のカテゴリのくくり */
.foundations {
	display: table;
	width: 100%;
	max-width: 1024px;
	height: auto;
	margin: 20px auto 0;
	padding: 0;
	vertical-align: middle;
	clear: both;
}

.foundations .title {
	display: block;
	width: 100%;
	margin: 0;
	margin-bottom: 8px;
	padding: 0;
	padding-left: 8px;
	border-left: 8px solid #8dc031;
	text-align: left;
	font-weight: bold;
	font-size: 14px;
}

.infoLeft {
	display: table-cell;
	margin: 0;
	padding: 0;
	padding-right: 16px;
	text-align: left;
	vertical-align: top;
}

.infoRight {
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	height: auto;
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
	border: 0;
}

.infoRight-btarea {
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	height: auto;
	margin: 0;
	padding: 4px;
	text-align: center;
}

.catchCopy {
	padding-bottom: 0.5em;
	font-weight: bold;
	font-size: 16px;
}

.informationTable {
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.informationTable-row {
	display: table-row;
}

.informationTable .th {
	display: table-cell;
	width: 15%;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #f3f3f3;
	white-space: normal;
	vertical-align: top;
}

.informationTable .td {
	display: table-cell;
	width: 40%;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	white-space: normal;
}

.informationTable2 {
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.informationTable-row2 {
	display: table-row;
}

.informationTable2 .th {
	display: table-cell;
	width: 15%;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #f3f3f3;
	white-space: normal;
	vertical-align: top;
}

.informationTable2 .td {
	display: table-cell;
	width: 40%;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	white-space: normal;
}

.cs_button {
	text-align : center;
}

.cs_button2 {
	text-align : center;
}

.label_float {
	float : right;
}

.label_fix {
	display: inline-block;
	width : auto;
}

.label_pankuzu {
	text-align : center;
}


.label_pankuzu2 {
	text-align : center;
}


.calender_cell {
	width:100px;
	float:left;
	background: url(../images/cell.png);
}

.calender_cell_week {
	width:100px;
	float:left;
	text-align:center;
        font-size:24px;
}

.calender_cell_day {
	border:0px;
	width:100px;
	height:30px;
	text-align:center;
	font-size:20px;
	display:block;
}

.calender_cell_am {
	border:0px;
	color:black;
	width:100px;
	height:35px;
	text-align:center;
	font-size:14px;
	cursor:pointer;
	display:block;
}

.calender_cell_pm {
	border:0px;
	color:black;
	width:100px;
	height:35px;
	text-align:center;
	font-size:14px;
	cursor:pointer;
	display:block;
}

.calender_cell_padding {
	padding-left : 8%;
}

@media (max-width:800px) {
	.tab-button {
		display: block;
		float: left;
		width: 33%;
		height: 60px;
		padding: 8px;
		font-size: 14px;
	}

	.foundations {
		max-width: 98%;
		margin: 20px 4px;
	}

	.under_line {
		border-bottom: none;
	}

	.infoLeft,
	.infoRight {
		display: block;
		width: 100%;
		text-align: center;
	}

	.infoLeft .ifad_text_view {
		text-align: left;
	}

	.informationTable,
	.informationTable-row,
	.informationTable .th,
	.informationTable .td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.informationTable2,
	.informationTable-row2,
	.informationTable2 .th,
	.informationTable2 .td {
		width: 850px;
		box-sizing: border-box;
	}


	.informationTable {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.informationTable2 {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}


	.informationTable .th,
	.informationTable .td {
		border-bottom: none;
	}

	.informationTable2 .th,
	.informationTable2 .td {
		border-bottom: none;
	}

        .cs_button {
		display: block;
		padding-left: 120px;
                text-align : left;

	}

        .cs_button2 {
		display: block;
                 text-align : left;
	}

                .label_float {
		float : left;
	}

	.label_pankuzu {
		float: left;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_fix {
		width:400px;
	}

        .calender_fix {
 		text-align : center;
        }

	.calender_cell {
		width:90px;
		height:90px;
		float:left;
		background: url(../images/cell.png);
		background-size: 90px;
	}

	.calender_cell_day {
		border:0px;
		width:90px;
		height:30px;
		text-align:center;
		display:block;
	}

	.calender_cell_am {
		border:0px;
		color:black;
		width:90px;
		height:25px;
		text-align:center;
		cursor:pointer;
		display:block;
	}

	.calender_cell_pm {
		border:0px;
		color:black;
		width:90px;
		height:18px;
		text-align:center;
		cursor:pointer;
		display:block;
	}

	.calender_cell_week {
		border:0px;
		width:90px;
		float:left;
		text-align:center;
	        font-size:18px;
	}

	.calender_cell_padding {
		padding-left : 7%;
	}


}

@media (max-width:610px) {
	.tab-button {
		display: block;
		float: left;
		width: 33%;
		height: 60px;
		padding: 8px;
		font-size: 14px;
	}

	.foundations {
		max-width: 98%;
		margin: 20px 4px;
	}

	.under_line {
		border-bottom: none;
	}

	.infoLeft,
	.infoRight {
		display: block;
		width: 100%;
		text-align: center;
	}

	.infoLeft .ifad_text_view {
		text-align: left;
	}

	.informationTable,
	.informationTable-row,
	.informationTable .th,
	.informationTable .td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.informationTable2,
	.informationTable-row2,
	.informationTable2 .th,
	.informationTable2 .td {
		width: 850px;
		box-sizing: border-box;
	}


	.informationTable {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.informationTable2 {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}


	.informationTable .th,
	.informationTable .td {
		border-bottom: none;
	}

	.informationTable2 .th,
	.informationTable2 .td {
		border-bottom: none;
	}

        .cs_button {
		display: block;
		padding-left: 120px;
                text-align : left;

	}

        .cs_button2 {
		display: block;
                 text-align : left;
	}

                .label_float {
		float : left;
	}

	.label_pankuzu {
		float: left;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_pankuzu2 {
		float: left;
		max-width : 300px;
		padding-left: 20px;
		padding-bottom: 5px;
	}


	.label_fix {
		width:400px;
	}

        .calender_fix {
 		text-align : center;
        }

	.calender_cell {
		width:48px;
		height:48px;
		float:left;
		background: url(../images/cell.png);
		background-size: 48px;
	}

	.calender_cell_day {
		border:0px;
		width:50px;
		height:10px;
		text-align:center;
		font-size:10px;
		display:block;
	}

	.calender_cell_am {
		border:0px;
		color:black;
		width:50px;
		height:17px;
		text-align:center;
		font-size:10px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_pm {
		border:0px;
		color:black;
		width:50px;
		height:18px;
		text-align:center;
		font-size:10px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_week {
		border:0px;
		width:48px;
		float:left;
		text-align:center;
	        font-size:18px;
	}

	.calender_cell_padding {
		padding-left : 4%;
	}


}

@media (max-width:365px) {
	.tab-button {
		display: block;
		float: left;
		width: 33%;
		height: 60px;
		padding: 8px;
		font-size: 14px;
	}

	.foundations {
		max-width: 98%;
		margin: 20px 4px;
	}

	.under_line {
		border-bottom: none;
	}

	.infoLeft,
	.infoRight {
		display: block;
		width: 100%;
		text-align: center;
	}

	.infoLeft .ifad_text_view {
		text-align: left;
	}

	.informationTable,
	.informationTable-row,
	.informationTable .th,
	.informationTable .td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.informationTable2,
	.informationTable-row2,
	.informationTable2 .th,
	.informationTable2 .td {
		width: 850px;
		box-sizing: border-box;
	}


	.informationTable {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.informationTable2 {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}


	.informationTable .th,
	.informationTable .td {
		border-bottom: none;
	}

	.informationTable2 .th,
	.informationTable2 .td {
		border-bottom: none;
	}

        .cs_button {
		display: block;
		padding-left: 120px;
                text-align : left;

	}

        .cs_button2 {
		display: block;
                 text-align : left;
	}

                .label_float {
		float : left;
	}

	.label_pankuzu {
		float: left;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_pankuzu2 {
		float: left;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_pankuzu2 {
		float: left;
		max-width : 300px;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_fix {
		width:400px;
	}

        .calender_fix {
 		text-align : center;
        }

	.calender_cell {
		width:45px;
		height:45px;
		float:left;
		background: url(../images/cell.png);
		background-size: 45px;
	}

	.calender_cell_day {
		border:0px;
		width:45px;
		height:10px;
		text-align:center;
		font-size:9px;
		display:block;
	}

	.calender_cell_am {
		border:0px;
		color:black;
		width:45px;
		height:17px;
		text-align:center;
		font-size:9px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_pm {
		border:0px;
		color:black;
		width:45px;
		height:18px;
		text-align:center;
		font-size:9px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_week {
		border:0px;
		width:45px;
		float:left;
		text-align:center;
	        font-size:15px;
	}
	.calender_cell_padding {
		padding-left : 4%;
	}


}

@media (max-width:325px) {
	.tab-button {
		display: block;
		float: left;
		width: 33%;
		height: 60px;
		padding: 8px;
		font-size: 14px;
	}

	.foundations {
		max-width: 98%;
		margin: 20px 4px;
	}

	.under_line {
		border-bottom: none;
	}

	.infoLeft,
	.infoRight {
		display: block;
		width: 100%;
		text-align: center;
	}

	.infoLeft .ifad_text_view {
		text-align: left;
	}

	.informationTable,
	.informationTable-row,
	.informationTable .th,
	.informationTable .td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.informationTable2,
	.informationTable-row2,
	.informationTable2 .th,
	.informationTable2 .td {
		width: 850px;
		box-sizing: border-box;
	}


	.informationTable {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.informationTable2 {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}


	.informationTable .th,
	.informationTable .td {
		border-bottom: none;
	}

	.informationTable2 .th,
	.informationTable2 .td {
		border-bottom: none;
	}

        .cs_button {
		display: block;
		padding-left: 120px;
                text-align : left;

	}

        .cs_button2 {
		display: block;
                 text-align : left;
	}

                .label_float {
		float : left;
	}

	.label_pankuzu {
		float: left;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_pankuzu2 {
		float: left;
		max-width : 270px;
		padding-left: 20px;
		padding-bottom: 5px;
	}

	.label_fix {
		width:400px;
	}

        .calender_fix {
 		text-align : center;
        }

	.calender_cell {
		width:40px;
		height:40px;
		float:left;
		background: url(../images/cell.png);
		background-size: 40px;
	}

	.calender_cell_day {
		border:0px;
		width:40px;
		height:10px;
		text-align:center;
		font-size:8px;
		display:block;
	}

	.calender_cell_am {
		border:0px;
		color:black;
		width:40px;
		height:15px;
		text-align:center;
		font-size:7px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_pm {
		border:0px;
		color:black;
		width:40px;
		height:15px;
		text-align:center;
		font-size:8px;
		cursor:pointer;
		display:block;
	}

	.calender_cell_week {
		border:0px;
		width:40px;
		float:left;
		text-align:center;
	        font-size:13px;
	}
	.calender_cell_padding {
		padding-left : 4%;
	}


}

.under_line_simple {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* オプション選択画面で使用 */
.simple_frame {
	border: 1px solid rgba(0,0,0,0.1);
	padding: 8px;
	box-sizing: border-box;
	border-collapse: collapse;
}

/* div要素の重なり線を消す */
.border_top_banish {
	border-top: none;
}

/* オプション一覧の「オプション名」 */
.sp-div-option-name {
	display: inline-block;
	width: 300px;
	font-weight: 400;
}

.sp-div-price {
	display: inline-block;
	margin: 0 16px;
}

/* オプション一覧の「備考」 */
.sp-div-notes {
	display: inline-block;
	width: auto;
}

@media (max-width:480px) {
	.sp-div-option-name {
		width: auto;
		font-weight: 600;
	}

	.sp-div-price {
		display: block;
		margin: 0;
	}

	.sp-div-notes {
		display: block;
		margin-top: 8px;
	}
}

/* 希望日指定フォームの「まだ予約していません」ボタンで使用 */
.direct_booking_comment1 {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 4px 8px;
	border: 3px solid #3c8947;
	border-radius: 8px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	color: #3c8947;
	text-align: center;
	font-size: 18px;
}

.direct_booking_comment1:after {
	content: "(Webから受診希望日を申し込みます)";
  display: block;
  font-size: 12px;
	text-align: center;
}

.direct_booking_comment1:hover {
	background-color: #3c8947;
	color: #fff;
}

/* 希望日指定フォームの「すでに予約済みです」ボタンで使用 */
.direct_booking_comment2 {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 4px 8px;
	border: 3px solid #0080c9;
	border-radius: 8px;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	color: #0080c9;
	text-align: center;
	font-size: 18px;
}

.direct_booking_comment2:after {
	content: "(確定した受診日をWebから申告します)";
  display: block;
  font-size: 12px;
	text-align: center;
}

.direct_booking_comment2:hover {
	background-color: #0080c9;
	color: #fff;
}

/* 選択済ラベル */
.selected-label {
	display: inline-block;
	width: auto;
	padding: 0 8px;
	border-radius: 3px;
	background-color: #fa7C92;
	color: #fff;
	font-size: 12px;
}

/* 必須ラベル */
.required-label {
	display: inline-block;
	width: auto;
	padding: 0 8px;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	font-size: 12px;
}

/* 自己負担額の右寄せレイアウト */
.self-payment {
	float: right;
	width: auto;
	font-weight: 600;
}

/* 必須アイコン */
.required-icon {
	width: auto;
	margin-left: 8px;
	padding: 0 8px;
	border:1px solid #d4354d;
	border-radius: 3px;
	color: #d4354d;
	font-size: 12px;
}

/* 任意アイコン */
.optional-icon {
	width: auto;
	margin-left: 8px;
	padding: 0 8px;
	border: 1px solid #67747c;
	border-radius: 3px;
	color: #67747c;
	font-size: 12px;
}

/* separate=プログレスバー型メニューの区切り線 */
.separate:before {
	position: absolute;
	display: block;
	content: "";
	border-style: solid;
	border-color: transparent transparent transparent #afabab;
	border-width: 16px 0 16px 13px;
	right: 10px;
	top: -1px;
}

.separate:after {
	position: absolute;
	display: block;
	content: "";
	border-style: solid;
	border-color: transparent transparent transparent #FFFFFF;
	border-width: 16px 0 16px 13px;
	right: 11px;
	top: -1px;
}

/* PC/スマホで表示/非表示を切り替える */
.spmenu{display:none;}

@media screen and (max-width:620px){
	.pcmenu{display:none;}
	.spmenu{display:block;}
}

.wire-frame {
	display: table;
}

.wire-frame:after {
	content: "";
	display: block;
	clear: both;
}

.wire-frame .left-frame,
.wire-frame .right-frame {
	display: table-cell;
}

@media screen and (max-width:620px){
	.wire-frame,
	.wire-frame .left-frame,
	.wire-frame .right-frame {
		display: block;
	}
}


/*-----------------------------------------------
| 受診者メニューの広告エリアデザイン
-----------------------------------------------*/
.advertisement-area {
	margin: 16px;
	text-align: center;
}

.advertisement-area a {
	display: inline-block;
	margin: 0 4px;
}

.advertisement-area a img {
	height: 75px;
}

@media (max-width:560px) {
	.advertisement-area a img {
		height: auto;
		width: 100%;
	}
}

/*-----------------------------------------------
| メニュー画面の薄グレー背景上のボタンデザイン
-----------------------------------------------*/
.carpet_lightGray {
	padding: 16px;
	background-color: #f8f7f4;
}

.carpet_lightGray .btn-baseCl-o {
	background-color: #fff;
}

/*-----------------------------------------------
| メニュー画面のカテゴリラベルデザイン
-----------------------------------------------*/
.label_category_w130 {
	position: relative;
	padding: 12px 4px 4px;
	background-color: #fff;
	border-bottom: solid 6px #ccc;
}

.label_category_w130:after {
	content: ".";
	line-height: 0;
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 130px;
	border-bottom: 6px solid #8dc031;
}

.label_category_w240 {
	position: relative;
	padding: 12px 4px 4px;
	background-color: #fff;
	border-bottom: solid 6px #ccc;
}

.label_category_w240:after {
	content: ".";
	line-height: 0;
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 240px;
	border-bottom: 6px solid #6b7a8f;
}

.label_category_w240_mainBlue {
	position: relative;
	padding: 12px 4px 4px;
	background-color: #fff;
	border-bottom: solid 6px #ccc;
}

.label_category_w240_mainBlue:after {
	content: ".";
	line-height: 0;
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 240px;
	border-bottom: 6px solid #0080c9;
}

/*-----------------------------------------------
| 検索フォームデザイン
-----------------------------------------------*/
.parent-table {
	display: table;
	width: 100%;
}

.parent-table .children-tr {
	display: table-row;
}

.parent-table .children-th {
	display: table-cell;
	margin: 8px 0;
}

.parent-table .children-td {
	display: table-cell;
	margin: 8px 0;
}

/*-----------------------------------------------
| フォームのラベル項目デザイン
-----------------------------------------------*/
.label-standard {
	display: block;
	margin-bottom: 4px;
	padding: 0;
	color: #67747c ;
	font-weight: bold;
	font-size: 16px;
}

.input-standard {
	margin-bottom: 16px;
}

/*-----------------------------------------------
| マスタ検索の項目で使うサーチアイコンつき入力フィールド
-----------------------------------------------*/
.swfNoteInfoTbl .search_field {
	display: inline-block;
	width: 100%;
	max-width: 504px;
	border: none;
}

.swfNoteInfoTbl .search_icon {
	display: none;
	width: auto;
	margin-right: 4px;
	padding: 4px 8px 3px;
	border: none;
	border-radius: 20px;
	background-color: #fff;
	color: #fff;
	font-family: FontAwesome;
}

.swfNoteInfoTbl .search_inputarea {
	display: inline-block;
	width: 100%;
	max-width: 469px;
	border: solid 1px #ccc;
	border-radius: 3px;
	box-shadow; inner 0 0 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
	background-color: transparent;
}

.swfNoteInfoTbl .search_field:active .search_icon,
.swfNoteInfoTbl .search_field:focus-within .search_icon {
	display: inline-block;
	background-color: #848f99;
}

/* 入力項目につけるラベルデザイン */
.swfNoteInfoTbl .input_field_label {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	color: #0080c9;
	line-height: 1.3;
}

/* 表示項目につけるラベルデザイン */
.swfNoteInfoTbl .display_field_label {
	display: inline-block;
	width: auto;
	color: #0080c9;
	vertical-align: middle;
}

/* 必須アイコンデザイン(見出しセルに右寄せ表示バージョン) */
.swfNoteInfoTbl .icon-required {
	display: inline;
	float: right;
	width: auto;
	margin: 2px;
	padding: 1px 6px;
	color: #fff;
	font-size: 10.5px;
}

.swfNoteInfoTbl .icon-required:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
	clear: both;
}

/* 必須アイコンデザイン（ラベルの左または右に並べて配置するバージョン） */
.swfNoteInfoTbl .icon-required-inner {
	display: inline-block;
	width: auto;
	margin: 2px;
	padding: 1px 6px;
	background-color: #d4354d;
	color: #fff;
	font-size: 10.5px;
}

/* 任意アイコンデザイン（ラベルの左または右に並べて配置するバージョン） */
.swfNoteInfoTbl .icon-optional-inner {
	display: inline-block;
	width: auto;
	margin: 2px;
	padding: 1px 6px;
	border: solid 1px #67747c;
	background-color: transparent;
	color: #67747c;
	font-size: 10.5px;
}

/*-----------------------------------------------
| コンテンツごとの見出しデザイン
-----------------------------------------------*/
/* 見出しデザイン */
.heading-contents {
	margin: 4px 0 8px;
	padding: 4px;
	padding-left: 1em;
	border-left: 24px solid #54687A;
	font-size: 18px;
	font-weight: bold;
	color: #54687A;
}

/* 見出しデザインの背景色カスタマイズ */
.viewColor {
	background-color: #848F99;
}
/* 見出しデザインの背景色カスタマイズ */
.inputColor {
	background-color: #8dc031;
}

/* 都庁Web予約　予約状況一覧画面用CSS */
.reserve-table {
    display: flex;
    flex-flow: column nowrap;
	border: 1px solid rgba(0,0,0,0.1);
}

.reserve-row {
    display: grid;
    grid-template-columns: 10% 30% 20% 20% 20%;
}

.reserve-cell {
    padding: 4px;
	border: 1px solid rgba(0,0,0,0.1);
	border-collapse: collapse;
}

@media (max-width:480px) {
    .reserve-table {
        display: grid;
        grid-template-columns: 32% 68%;
    }

    .reserve-header {
        display: flex;
        flex-flow: column nowrap;
    }

    .reserve-body {
        display: flex;
        flex-flow: row nowrap;
        overflow: auto;
    }

    .reserve-row {
        display: flex;
        flex-flow: column wrap;
    }

    .reserve-body .reserve-row {
        min-width: 100%;
    }

    .reserve-cell {
        text-align: center;
        height: 2.0em;
    }
}