@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: #f03128;
}
.bcl-brand2 {
	background-color: #f03128;
}

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

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

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

/* 主機能ボタン派生色 */
.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: #46BDC6;
}
.bcl-accent4 {
	background-color: #46BDC6;
}

/*========================================================================================
  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;
}

/* キャンセルボタン */
.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;
}

.btn-wide {
	padding-left: 4em;
	padding-right: 4em;
}

/*「<<」アイコン */
.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";
}

/* 外部リンクアイコン */
.icon-external-link-square:before {
	content: "\f14c";
}

/* リストアイコン */
.icon-list-ul:before {
	content: "\f0ca";
}

/* リストアイコン（見出し列あり）*/
.icon-list-alt:before {
	content: "\f022";
}
/*棒グラフアイコン*/
.icon-bar-chart:before {
    content: "\f080";
}
/* フォルダーアイコン */
.icon-folder:before {
    content: "\f114";
}
/* 複数ファイルアイコン */
.icon-files-o:before {
    content: "\f0c5";
}
.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の上書き
========================================================================================*/
/* ログインボタンの色をi・karadaのカラーパレットに合わせる */
#buttonLogin {
	border: none;
	background-color: #f03128;
	color: #fff;
}

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

#labelLogin::before {
display:inline-block;
content:'';
background:url(../images/sukoyaka_symbol.png) no-repeat;
background-size:100%;
width: 24px;
height: 30px;
vertical-align:middle;
position:relative;
top:-3px;
margin-right: 12px
}

/*========================================================================================
  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;
}
*/
::placeholder {
    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;
}

/* 旧Edge */
::-ms-input-placeholder {
    color: #d3d3d3;
}

/* 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 {
    flex-basis: 100%;
    margin-bottom: 32px;
}
.children-flex-half {
/*	flex-grow: 1; */
	flex-basis: calc(50% - 16px);
	margin-bottom: 16px;;
}
.children-flex:hover,
.children-flex-half:hover {
	text-decoration: none;
}

.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;
}
/* トップメニューのマニュアルエリア */
.manual-area {
    margin: 32px auto;
    text-align: center;
}
.manual-area .fa-file-pdf-o {
    color: #C50102;
}
.manual-area a {
    display: block;
    margin-bottom: 8px;
}
/* 事務スタッフメニューのカテゴリタイトルデザイン */
.title-category-default {
	margin: 0 8px;
	padding: 8px;
	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;
}

/* 匿名受診者パターンの医療機関メニューデザイン */
.btn-baseCl2-o {
	border: solid 1px #3e658c;
	background-color: #fff;
	color: #3e658c;
}

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

.flex-item {
	flex-basis: 174px;
	margin: 8px;
}

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

/* 機能ボタンのデザイン */
.btn-menu {
	padding: 16px;
	height: 100%;
	border: solid 1px #9DA5AB;
	border-radius: 8px;
	background-color: #fff;
	color: #333333;
	text-align: center;
	font-size: 16px;
}

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

.btn-menu .sub-label {
	margin: 16px 0 0;
	line-height: 1.3;
}

.btn-menu .caption {
	margin: 0;
	padding: 16px;
	line-height: 1.3;
}

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

/* トップメニューの機能ボタンのホバーエフェクト */
.btn-menu:hover {
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
}

/* メイン業務の機能ボタンのホバーエフェクト */
.ctg-main .btn-menu:hover {
	border-color: #4285F4;
	background-color: #4285F4;
}

/* 設定カテゴリ群のホバーエフェクト */
.ctg-setting .btn-menu:hover {
	border-color: #46BDC6;
	background-color: #46BDC6;
}

.ctg-main .btn-menu:hover>.cl-primary1,
.ctg-main .btn-menu:hover>.caption {
	color: #fff;
}

.ctg-setting .btn-menu:hover>.cl-accent4,
.ctg-setting .btn-menu:hover>.sub-label {
	color: #fff;
}

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

/* 医療機関詳細＆コース選択画面のタブ */
.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: 10%;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.1);
	background-color: #f3f3f3;
	white-space: normal;
}

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

@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;
	}

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

.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: calc(100% - 40px);
	/* 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;
	background-color: transparent;
    border: solid 1px #d4354d;
    border-radius: 2px;
	color: #d4354d;
	font-size: 10.5px;
    font-weight: 600;
}

.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: transparent;
    border: solid 1px #d4354d;
    border-radius: 2px;
	color: #d4354d;
	font-size: 10.5px;
    font-weight: 600;
}

/* 任意アイコンデザイン（ラベルの左または右に並べて配置するバージョン） */
.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;
}
/*-----------------------------------------------
| ボタンエリアのレイアウト
-----------------------------------------------*/
.btn-area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 24px;
}
.btn-area .left {
    position: absolute;
    left: 0;
}
.btn-area .right {
    position: absolute;
    rifht: 0;
}

/*-----------------------------------------------
| 営業用ツールのデザイン
-----------------------------------------------*/
/* 機能ボタンのデザイン */
.btn-menu-scc {
	padding: 16px;
	height: 100%;
	border: solid 1px #9DA5AB;
	border-radius: 8px;
	background-color: #fff;
	color: #333333;
	font-size: 0.8rem;
}
/* 機能ボタンのホバーエフェクト */
.ctg-main .btn-menu-scc:hover {
	border-color: #4285F4;
	background-color: #4285F4;
}
.ctg-main .btn-menu-scc:hover>.cl-primary1,
.ctg-main .btn-menu-scc:hover>.caption {
	color: #fff;
}
/* 機能ボタンのラベル */
.btn-menu-scc .label {
	margin: 16px 0;
	line-height: 1.3;
	font-size: 24px;
}

.btn-menu-scc .sub-label {
	margin: 16px 0 0;
	line-height: 1.3;
}

.btn-menu-scc .caption {
	margin: 0;
	padding: 16px;
	line-height: 1.3;
}

/* flex */
.flex-container-sales {
	display:-webkit-flex;
	display: flex;
	flex-wrap: wrap;
    padding:  10px;
	align-items:stretch;        /* 一番大きい高さに合わせる */
	justify-content:flex-start;       /* 最初と最後一番端に配置しあとはバランスよく配置 */
}
.flex-container-sales .btn {
	display: block;
}
.flex-children-sales {
	background-color: #fff; 
    color:  #54687A;               /* 文字色 */
    margin:  10px;              /* 外側の余白 */
    border-radius:  5px;        /* 角丸指定 */
	flex-basis: 30%;
}
.flex-children-sales:hover {
	text-decoration: none;
}
/* 480px以下用（タブレット用）の記述 */
@media (max-width:660px) {
.flex-children-sales {
	flex-basis: 100%;
	}
.title-L {
	width: 96%;
	margin: 0 auto;
	}
}

/* タブメニューの設定 */
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 5px;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #54687A;
  display: block;
  order: -1;
}
.tab-label {
  color: #fff;
  background: #64C99B;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  white-space: nowrap;
  text-align: center;
  padding: 10px .8rem;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
　display: none;	
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #54687A;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  background: #eaf1f7;
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}