@charset "utf-8";


/* heading
   ----------------------------------------------------------------- */
h1,h2,h3,h4,h5{
	line-height:1.5em;
	  font-family: SourceHanSansJP-Light, YuGothic, 'Yu Gothic', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	clear: both;
}
h1{font-size:25px;} h2{font-size:160%;} h3{font-size:140%;} h4{font-size:120%;} h5{font-size:100%;}

.heading{margin-top:0;font-weight: 700;}

/* table
   ----------------------------------------------------------------- */
.table thead{border-bottom: 1px solid #666;}
tr.selected td {background-color: #C4E2F0;}

/* glyphicon
   ----------------------------------------------------------------- */
.glyphicon{padding:0 5px 0 3px;}


.time{
	padding:20px;
	border-bottom: 1px solid #555;
}

/* popover glyphicon
   ----------------------------------------------------------------- */
.icon-l .glyphicon{font-size: 180%;}
.icon-m .glyphicon{font-size: 140%;}
.icon-s .glyphicon{font-size: 120%;}
.icon-l .glyphicon{line-height: 1.8em;}
.icon-m .glyphicon{line-height: 1.4em;}
.icon-s .glyphicon{line-height: 1.2em;}
h1 .glyphicon,
h2 .glyphicon,
h3 .glyphicon{top:3px;}
.table-heading .glyphicon{vertical-align: bottom;line-height: 1.2em;}
h1 .popover-title,
h1 .popover-content,
h2 .popover-title,
h2 .popover-content,
h3 .popover-title,
h3 .popover-content,
.table-heading .popover-title,
.table-heading .popover-content{font-size:15px;line-height: 150%;}
h1 .popover-content,
h2 .popover-content,
h3 .popover-content,
.table-heading .popover-content{font-weight:normal;}


/* pre
   ----------------------------------------------------------------- */
pre {
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    border-radius: 4px;
    color: #8a6d3b;
    display: block;
    font-size: 13px;
    line-height: 1.42857;
    margin: 0 0 10px;
    padding: 9.5px;
    word-break: break-all;
    word-wrap: break-word;
}

/* color
   ----------------------------------------------------------------- */
.red{color:red;}
.green{color:green;}



.form-entered{background-color:#E8F4FF;}
.has-success .form-entered,
.has-warning .form-entered,
.has-error .form-entered{background-color:#FAFAFA;}

/* ==========================================================================
   day: 20140916
	 user: nmaeda
   ========================================================================== */
	 
/* ==========================================================================
   CSS基本ルール
   ========================================================================== */	 
/*
本CSSは、bootstrap3.0を使用する前提で記載します。
よって本CSSを修正する際には、下記の基本ルールを必ず守ってください。

1. bootstrapのCSS及び、既存のCSSの上書きは基本的に行わないこと

	影響範囲が読めないため、他の箇所のスタイルが崩れる可能性があるため
	既存のスタイルに新しいクラスを加えてください。
	× .table { ・・・ }
	○ .table.table-style { ・・・ }


2. HTMLのセレクタへの指定は基本的に行わないこと

	他ページに影響を与えるため、意味のある名前のスタイルを指定すること
	× h1 { ・・・ }
	○ .heading.heading-1 { ・・・ }


3. IDへのスタイル指定は基本的には行わず、クラス要素へのスタイル指定とすること
IDに対して指定すると、ページ内で汎用的に使用ができなくなるため

	× #title { ・・・ }
	○ .title { ・・・ }
	
	
4. HTML内に直接インラインスタイルを記載しないこと


*/


/* ==========================================================================
   Foundation
   ========================================================================== */
/*【解説】
Reset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルを定義します。
ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。*/

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
	padding: 8px;
}

/*
*ラベルスタイルの調整
*/
.label {
    font-size: 90%;
    padding: 0.3em 0.6em;
}
/*
*ラベルスタイルの調整
*/
.label-fix-100 {
    display:inline-block;
    width:100px;
}
.label-fix-80 {
    display:inline-block;
    width:80px;
}

/*
*ラベルスタイルの調整
*/
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
    margin-top: 4px;
}


/*
*「checkbox-inline」で二段目以降の先頭がさがる問題に対処
*/
/* 上書き */
.radio-inline,
.radio-inline + .radio-inline,
.checkbox-inline,
.checkbox-inline + .checkbox-inline {
	margin: 5px 1% 5px 0;
	width: 48%;
	background:#F4F4F4;
    padding:5px 10px 5px 32px;
    border-radius:4px;
}
.radio-inline.inline,
.radio-inline.inline + .radio-inline.inline,
.checkbox-inline.inline,
.checkbox-inline.inline + .checkbox-inline.inline {
	width: auto;
}
.checkbox-inline.checkbox .icons,
.radio-inline.radio .icons {
  top: 5px;
  }

.checkbox-inline input[type=checkbox] {
    -webkit-transform-origin: right bottom;
		-webkit-transform: scale( 1.3 , 1.3 );
		-moz-transform-origin: right bottom;
		-moz-transform: scale( 1.3 , 1.3 );
}

/* ラジオボタンやチェックボックスの中にテキストインプットが入った場合 */
.checkbox-inline.checkbox.textin .icons,
.radio-inline.radio.textin .icons {
  top: 15px;
}

/*.checkbox-inline:first-child {
	margin-bottom: 5px;
	margin-right: 10px;
}*/


@media (max-width: 979px) {
.radio-inline,
.radio-inline + .radio-inline,
.checkbox-inline,
.checkbox-inline + .checkbox-inline {
	width: auto;
}
}


/* ==========================================================================
   Layout
   ========================================================================== */
/*【解説】
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを使うことを推奨します。
IDセレクタはセレクタの詳細度を高めてしまうため、他のレイヤーやモジュールでは推奨しません。*/


/* Header
   ----------------------------------------------------------------- */



/* Main
   ----------------------------------------------------------------- */

#main { … }


/* ==========================================================================
   Object
   ========================================================================== */
/*【解説】
OOCSSのコンセプトを元に、プロジェクトにおける繰り返されるビジュアルパターンをすべてx**Object**と定義します。*/
	 
/* ボタングループ
[example]
<p class="command_button">
	<a class="btn btn-sm btn-default" title="CSV保存" href="#">
	<a class="btn btn-sm btn-danger" title="削除" href="#">
</p>
   ----------------------------------------------------------------- */
.command_button {
	border: 1px solid #aabbdd;
	background-color: #E5EEF3;
	border-radius: 6px;
	padding: 7px;
	margin: 7px auto;
}


/* Component
   ----------------------------------------------------------------- */
/*【解説】
再利用できるパターンとして、小さな単位のモジュールを定義します。
一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。*/

/**
 * Button
 *
 * Blah Blah Blah
 */
 
 
/**
検索ボックス内検索グループ

<div class="panel">
	<p class="search-btn-group">
		<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search"></span>この条件で検索する</button>
		<button class="btn btn-default" type="submit">クリア</button>
	</p>
</div>
 */
.panel > .search-btn-group{
	text-align: center;
	padding: 5px;
}

/**
モーダル内下部のボタングループ

<div class="modal-footer">
	<div class="modal-footer__leftbox">
		<button class="btn btn-danger" type="button">
		<i class="glyphicon glyphicon-trash"></i>
		削除する
		</button>
	</div>
	<div class="modal-footer__rightbox">
		<button class="btn btn-default" type="button" data-dismiss="modal">閉じる</button>
		<button class="btn btn-primary" type="button">登録する</button>
	</div>
</div>
 */
.modal-footer .modal-footer__leftbox{
	float: left;
}
.modal-footer .modal-footer__rightbox{
	float: right;
}

/**
モーダル内アコーディオン用スタイル
*/
div.modal-body #accordion .panel .panel-heading{
	padding: 0;
}
div.modal-body #accordion .panel .panel-heading .panel-title{
}
div.modal-body #accordion .panel .panel-heading .panel-title a{
	display: block;
	padding: 8px;
	overflow: hidden;
}


/**
モーダル内画像ギャラリー
*/
.col_box.gallery {
	height: 100px;
	text-align:center;
}
.col_box {
	height: 155px;
	text-align:center;
}
.col_box .col_box_inner{
	border:3px solid #FFF;
	height: 106px;
	background:#EEE;
	text-align:center;
	cursor:pointer;
}
.col_box .col_box_inner:hover{
	border:3px solid #CCC;
}
.col_box .col_box_inner img {
	max-width:100%;
	max-height: 100px;
	display: inline;
}
.col_box .col_btn{
	margin-top:5px;
}

/**
 add-input
*/
.add-input-wrap ul{
	padding-left:0px;
	list-style:none;
	margin-bottom:0px;
}
.add-input-wrap ul li{
	clear:both;
}
.add-input-wrap .add-input-form {
	width:55%;
	position:relative;
	float:left;
	margin:3px auto;
}
.add-input-wrap .add-input-btn-wrap{
	float:left;
	margin:3px 0 3px 10px;
}
.add-input-wrap .add-input-add-btn{
	margin-left:4px;
}

/**
テーブルの行が無効状態用スタイル
*/
.selected.selected-disable > td{
	background: #eee;
}

/**
ラジオボタンスタイル
*/
/**
若干高さがある場合は、middleを追加する
*/
.radio.middle, .checkbox.middle {
    min-height: 25px;
}

/**
ラジオボタンスタイル2
ラジオボタンが複数並ぶときに先頭のmarginを0にする
*/
.radio-inline.first{
	margin: 0;
}

/**
テーブルに見出しを付ける場合の指定
*/
.table-heading {
    color: #484848;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}
.icon-nuki{
	background:#484848;
	color:#FFF;
	display:inline-block;
	padding:2px 7px;
	margin-right:5px;
	font-size: 14px;
	vertical-align: bottom;
border-radius: 6px; /* CSS3草案 */ 
-webkit-border-radius: 6px; /* Safari,Google Chrome用 */ 
-moz-border-radius: 6px; /* Firefox用 */ 
}

/* ドラッグ＆ドロップ */
.movebtn-group,
.movebtn-group li{
	margin:0 0 10px 0;
	padding:0;
	list-style:none;
}
.movebtn-group li a{
	display:block;
	text-align:left;
	cursor:move;
}
.add-btn{
	display:block;
	text-align:center;
	padding:10px;
	border:3px dashed #CCC;
	background:#EEE;
}
.add-btn:hover{	background:#F6F6F6;}


/* フロー2 */
.flow02 {
	margin: 0 auto 15px;
	width: 80%;
	box-sizing:content-box!important;
}
/* floatを使うのでclearfixの指定 */
.flow02:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

.flow02 .box {
	width: 24%; /* ウィンドウの幅が広くなった時のために％で指定 */
	height: 40px;
	background: #e0e0e0; /* １番目のボックスの色指定 */
	float: left; /* 横並び */
	position: relative;
	font-size: 1.6em; /* テキストの指定 */
	font-weight: bold; /* テキストの指定 */
	line-height: 1.4; /* テキストの指定 */
	box-sizing:content-box!important;
}
.flow02 .box a {
    color: #484848;
    display: block;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    line-height: 25px;
    padding-bottom: 7px;
    padding-left: 35px;
    padding-top: 9px;
}

.flow02 .box02 { background: #d3d3d3; } /* ２番目のボックスの色指定*/
.flow02 .box03 { background: #e0e0e0; } /* ３番目のボックスの色指定*/
.flow02 .box04 { background: #d3d3d3; } /* ４番目のボックスの色指定*/

/* ボックスの左側に三角形を作る */
.flow02 .box:before {
	border-left: 20px solid #FFFFFF; /* １番目の三角形は背景色と同じ色を指定 */
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	content: "";
	position: absolute;
	left: 0; /* ボックスの左に合わせて三角形を作る */
	top: 0;
}

.flow02 .box02:before { border-left-color: #e0e0e0; } /* ２番目の三角形は１番目のボックスと同じ色を指定 */
.flow02 .box03:before { border-left-color: #d3d3d3; } /* ３番目の三角形は２番目のボックスと同じ色を指定 */
.flow02 .box04:before { border-left-color: #e0e0e0; } /* ４番目の三角形は３番目のボックスと同じ色を指定 */

/* 最後のボックスにだけ、右側に付ける三角形を作成する */
.flow02 .box04:after {
	border-left: 20px solid #d3d3d3; /* 最後の三角形は最後のボックスと同じ色を指定 */
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	content: "";
	position: absolute;
	right: -20px; /* 三角形の幅の分だけ右にずらす */
	top: 0;
}

.flow02 .box span {
	padding-left: 30px; /* テキストの位置調整 */
}

.flow02 .box.box-active {
	background: #f0ad4e; /* １番目のボックスの色指定 */
}
.flow02 .box.box-active a{
	color: #fff;
	font-weight: bold;
}
.flow02 .box.box-next:before {
	border-left-color: #f0ad4e;
}
.flow02 .box04.box-active:after {
	border-left: 20px solid #f0ad4e;
}

/* パネル & draggable */
#draggablePanelList .panel-body {
	cursor: move;
}
.panel-parent-title {
	color: #999;
	font-size: 12px;
}
.addListPanel {
	padding: 0px 10px 10px 10px;
}
.clickable-panel {
	cursor: pointer;
}
.clickable-panel:hover {
	border-color: #99ccff;
	color: #3498db;
}


/**
 * Media
 */

.c-media { … }
.c-media__image {
  ...
}

/* Project
   ----------------------------------------------------------------- */
/*【解説】
プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。
例えば、記事一覧や、ユーザープロフィール、画像ギャラリーなどコンテンツを構成する要素などが該当します。*/


/**
 * Articles
 */

.p-articles { … }
.p-article {
  ...
}
.p-article__title {
  ...
}

/* Utitlity
   ----------------------------------------------------------------- */
/*【解説】
ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、
わずかなスタイルの調整のための便利クラスなどを定義します。
marginの代わりに.mbs { margin-bottom: 10px; }のようなUtility Objectを用いて、隣接するモジュールとの間隔をつくるといった役割を担います。

またclearfixテクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。*/

/**
 * bg-color
 */
.bg-gray {
    background-color: #f5f5f5 !important;
}
.bg-black {
    background-color: #222222 !important;
}
.bg-red {
    background-color: #f56954 !important;
}
.bg-yellow {
    background-color: #f39c12 !important;
}
.bg-aqua {
    background-color: #00c0ef !important;
}
.bg-blue {
    background-color: #0073b7 !important;
}
.bg-light-blue {
    background-color: #3c8dbc !important;
}
.bg-green {
    background-color: #00a65a !important;
}
.bg-navy {
    background-color: #001f3f !important;
}
.bg-teal {
    background-color: #39cccc !important;
}
.bg-olive {
    background-color: #3d9970 !important;
}
.bg-lime {
    background-color: #01ff70 !important;
}
.bg-orange {
    background-color: #ff851b !important;
}
.bg-fuchsia {
    background-color: #f012be !important;
}
.bg-purple {
    background-color: #932ab6 !important;
}
.bg-maroon {
    background-color: #85144b !important;
}
.text-red {
    color: #f56954 !important;
}
.text-yellow {
    color: #f39c12 !important;
}
.text-aqua {
    color: #00c0ef !important;
}
.text-blue {
    color: #0073b7 !important;
}
.text-black {
    color: #222222 !important;
}
.text-light-blue {
    color: #3c8dbc !important;
}
.text-green {
    color: #00a65a !important;
}
.text-navy {
    color: #001f3f !important;
}
.text-teal {
    color: #39cccc !important;
}
.text-olive {
    color: #3d9970 !important;
}
.text-lime {
    color: #01ff70 !important;
}
.text-orange {
    color: #ff851b !important;
}
.text-fuchsia {
    color: #f012be !important;
}
.text-purple {
    color: #932ab6 !important;
}
.text-maroon {
    color: #85144b !important;
}




/**
 * table-column
 */
.table .check-column {
    width: 2.2em;
}
.table .ss-column {
	width: 5%;
}
.table .s-column {
	width: 8%;
}
.table .m-column {
	width: 30%;
}

/**
 * width
 */
.w15{
	width: 15%;
}
.w30{
	width: 30%;
}
.w45{
	width: 45%;
}
.w50{
	width: 50%;
}
.w70{
	width: 70%;
}
.w100{
	width: 100%;
}
.w-50{width:50px;}
.w-60{width:60px;}
.w-70{width:70px;}
.w-80{width:80px;}
.w-90{width:90px;}
.w-100{width:100px;}
.w-110{width:110px;}
/**
 * table-cell
 */
.t-cell{
	display: table-cell;
}

/**
 * font-size
*/
.ft10{ font-size: 10px;}
.ft11{ font-size: 11px;}
.ft12{ font-size: 12px;}
.ft13{ font-size: 13px;}
.ft14{ font-size: 14px;}
.ft15{ font-size: 15px;}
.ft16{ font-size: 16px;}
.ft17{ font-size: 17px;}
.ft18{ font-size: 18px;}

/**
 * margin
*/
.mg0{ margin: 0!important;}

.mgt0{ margin-top: 0!important;}
.mgt5{ margin-top: 5px!important;}
.mgt6{ margin-top: 6px!important;}
.mgt7{ margin-top: 7px!important;}
.mgt8{ margin-top: 8px!important;}
.mgt9{ margin-top: 9px!important;}
.mgt10{ margin-top: 10px!important;}
.mgt20{ margin-top: 20px!important;}
.mgt30{ margin-top: 30px!important;}
.mgt40{ margin-top: 40px!important;}
.mgt50{ margin-top: 50px!important;}

.mgr0{ margin-right: 0!important;}
.mgr5{ margin-right: 5px!important;}
.mgr6{ margin-right: 6px!important;}
.mgr7{ margin-right: 7px!important;}
.mgr8{ margin-right: 8px!important;}
.mgr9{ margin-right: 9px!important;}
.mgr10{ margin-right: 10px!important;}
.mgr20{ margin-right: 20px!important;}
.mgr30{ margin-right: 30px!important;}
.mgr40{ margin-right: 40px!important;}
.mgr50{ margin-right: 50px!important;}

.mgl0{ margin-left: 0!important;}
.mgl5{ margin-left: 5px!important;}
.mgl6{ margin-left: 6px!important;}
.mgl7{ margin-left: 7px!important;}
.mgl8{ margin-left: 8px!important;}
.mgl9{ margin-left: 9px!important;}
.mgl10{ margin-left: 10px!important;}
.mgl20{ margin-left: 20px!important;}
.mgl30{ margin-left: 30px!important;}
.mgl40{ margin-left: 40px!important;}
.mgl50{ margin-left: 50px!important;}

.mgb0{ margin-bottom: 0!important;}
.mgb5{ margin-bottom: 5px!important;}
.mgb6{ margin-bottom: 6px!important;}
.mgb7{ margin-bottom: 7px!important;}
.mgb8{ margin-bottom: 8px!important;}
.mgb9{ margin-bottom: 9px!important;}
.mgb10{ margin-bottom: 10px!important;}
.mgb20{ margin-bottom: 20px!important;}
.mgb30{ margin-bottom: 30px!important;}
.mgb40{ margin-bottom: 40px!important;}
.mgb50{ margin-bottom: 50px!important;}

.mgl0{ margin-left: 0!important;}

/**
 * margin
*/
.pd0{ padding: 0!important;}
.pd5{ padding: 5px!important;}
.pd6{ padding: 6px!important;}
.pd7{ padding: 7px!important;}
.pd8{ padding: 8px!important;}
.pd9{ padding: 9px!important;}
.pd10{ padding: 10px!important;}

.pdt0{ padding-top: 0!important;}
.pdt10{ padding-top: 10px!important;}
.pdt20{ padding-top: 20px!important;}
.pdt30{ padding-top: 30px!important;}
.pdt40{ padding-top: 40px!important;}

.pdr0{ padding-right: 0!important;}
.pdr10{ padding-right: 10px!important;}
.pdr20{ padding-right: 20px!important;}
.pdr30{ padding-right: 30px!important;}
.pdr40{ padding-right: 40px!important;}

.pdb0{ padding-bottom: 0!important;}
.pdb10{ padding-bottom: 10px!important;}
.pdb20{ padding-bottom: 20px!important;}
.pdb30{ padding-bottom: 30px!important;}
.pdb40{ padding-bottom: 40px!important;}

.pdl0{ padding-left: 0!important;}
.pdl10{ padding-left: 10px!important;}
.pdl20{ padding-left: 20px!important;}
.pdl30{ padding-left: 30px!important;}
.pdl40{ padding-left: 40px!important;}

/**
 * border
*/
.border_bottom{border-bottom:1px solid #CCC;}


/**
 * label-color
 */

/**
 * float clear
 */
.fl{
	float: left;
}
.fr{
	float: right;
}
.clear{
	clear: both;
}
.cf:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
.cf { display: inline-table; }