@charset "utf-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
共通CSS
	ver.20150801
	Common Parts Design CSS（標準文章装飾のスタイルシート）
───────────────────────────────────────────
FileName:		/resources/css/commonPartsDesign.css
Editor:			TRUSTEC
Description:	標準文章装飾のスタイルシート
───────────────────────────────────────────
2015/08/01:		開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/*
--------------------------------------------------------------------------------
□ マージン
--------------------------------------------------------------------------------
*/
.mt_none
{	margin-top : 0;	}

.mt_small
{	margin-top : 1em;	}

.mt_middle
{	margin-top : 2em;	}

.mt_large
{	margin-top : 3em;	}



.mb_none
{	margin-bottom : 0;	}

.mb_small
{	margin-bottom : 1em;	}

.mb_middle
{	margin-bottom : 2em;	}

.mb_large
{	margin-bottom : 3em;	}



.mr_none
{	margin-right : 0;	}

.mr_small
{	margin-right : 1em;	}

.mr_middle
{	margin-right : 2em;	}

.mr_large
{	margin-right : 3em;	}



.ml_none
{	margin-left : 0;	}

.ml_small
{	margin-left : 1em;	}

.ml_middle
{	margin-left : 2em;	}

.ml_large
{	margin-left : 3em;	}



.mt5
{	margin-top : 5px;	}

.mt10
{	margin-top : 10px;	}

.mt15
{	margin-top : 15px;	}

.mt20
{	margin-top : 20px;	}

.mt30
{	margin-top : 30px;	}

.mt40
{	margin-top : 40px;	}

.mt50
{	margin-top : 50px;	}



.mb5
{	margin-bottom : 5px;	}

.mb10
{	margin-bottom : 10px;	}

.mb15
{	margin-bottom : 15px;	}

.mb20
{	margin-bottom : 20px;	}

.mb30
{	margin-bottom : 30px;	}

.mb40
{	margin-bottom : 40px;	}

.mb50
{	margin-bottom : 50px;	}



.mr5
{	margin-right : 5px;	}

.mr10
{	margin-right : 10px;	}

.mr20
{	margin-right : 20px;	}

.mr30
{	margin-right : 30px;	}

.mr40
{	margin-right : 40px;	}

.mr50
{	margin-right : 50px;	}



.ml5
{	margin-left : 5px;	}

.ml10
{	margin-left : 10px;	}

.ml20
{	margin-left : 20px;	}

.ml30
{	margin-left : 30px;	}

.ml40
{	margin-left : 40px;	}

.ml50
{	margin-left : 50px;	}





/*
--------------------------------------------------------------------------------
□ パディング
--------------------------------------------------------------------------------
*/
.pt_none
{	padding-top : 0;	}

.pt_small
{	padding-top : 1em;	}

.pt_middle
{	padding-top : 2em;	}

.pt_large
{	padding-top : 3em;	}



.pb_none
{	padding-bottom : 0;	}

.pb_small
{	padding-bottom : 1em;	}

.pb_middle
{	padding-bottom : 2em;	}

.pb_large
{	padding-bottom : 3em;	}



.pr_none
{	padding-right : 0;	}

.pr_small
{	padding-right : 1em;	}

.pr_middle
{	padding-right : 2em;	}

.pr_large
{	padding-right : 3em;	}



.pl_none
{	padding-left : 0;	}

.pl_small
{	padding-left : 1em;	}

.pl_middle
{	padding-left : 2em;	}

.pl_large
{	padding-left : 3em;	}



.pt5
{	padding-top : 5px;	}

.pt10
{	padding-top : 10px;	}

.pt15
{	padding-top : 15px;	}

.pt20
{	padding-top : 20px;	}

.pt30
{	padding-top : 30px;	}

.pt40
{	padding-top : 40px;	}

.pt50
{	padding-top : 50px;	}



.pb5
{	padding-bottom : 5px;	}

.pb10
{	padding-bottom : 10px;	}

.pb15
{	padding-bottom : 15px;	}

.pb20
{	padding-bottom : 20px;	}

.pb30
{	padding-bottom : 30px;	}

.pb40
{	padding-bottom : 40px;	}

.pb50
{	padding-bottom : 50px;	}



.pr5
{	padding-right : 5px;	}

.pr10
{	padding-right : 10px;	}

.pr20
{	padding-right : 20px;	}

.pr30
{	padding-right : 30px;	}

.pr40
{	padding-right : 40px;	}

.pr50
{	padding-right : 50px;	}



.pl5
{	padding-left : 5px;	}

.pl10
{	padding-left : 10px;	}

.pl20
{	padding-left : 20px;	}

.pl30
{	padding-left : 30px;	}

.pl40
{	padding-left : 40px;	}

.pl50
{	padding-left : 50px;	}





/*
--------------------------------------------------------------------------------
□ 文章装飾：文字寄せ
--------------------------------------------------------------------------------
*/
.txt_left
{	text-align : left;	}

.txt_cntr
{	text-align : center;	}

.txt_rght
{	text-align : right;	}





/*
--------------------------------------------------------------------------------
□ 文章装飾：フォントサイズ、タイプ
--------------------------------------------------------------------------------
*/
.fnt_big
{	font-size : 130%;
  line-height : 170%;	}

.fnt_min
{	font-size : 80%;
	line-height : 170%;	}

.fnt_fat
{	font-weight : bold;	}

.fnt_under
{	text-decoration : underline;	}

.fnt_italic
{	font-style : italic;	}

.fnt_normal
{	font-weight : normal;	}





/*
--------------------------------------------------------------------------------
□ 文章装飾：インデント
--------------------------------------------------------------------------------
*/
.indent
{	text-indent : 1em;	}





/*
--------------------------------------------------------------------------------
□ 文章装飾：フォントカラー
--------------------------------------------------------------------------------
*/
.clr_error
{	color : #CC3333;
	font-weight : bold;	}

.clr_attention
{	color : #FF6600;
	font-weight : bold;	}

.clr_required
{	color : #FF0000;	}

.clr_black
{	color : #000000; }





/*
--------------------------------------------------------------------------------
□ 文章装飾：背景色
--------------------------------------------------------------------------------
*/





/*
--------------------------------------------------------------------------------
□ 文章装飾：フレーム
--------------------------------------------------------------------------------
*/
.frm_normal
{	padding : 1em;	}

.frm_radius
{	border-radius : 5px;	}

.frm_circle
{	border-radius : 50%;	}





/*
--------------------------------------------------------------------------------
□ エラーメッセージ
--------------------------------------------------------------------------------
*/
.error
{	background : #FFFFCC;
	border : solid 2px #AA0000;
	padding : 10px;	}

.error h1, .error h2
{	color : #AA0000;
	margin-bottom : 15px;	}

.error h1
{	font-size : 120%;
	text-align : center;	}

.error h2
{	font-size : 100%;
	text-align : left;
	padding : 0px 5px;
	border-bottom : dotted 1px #CC8888;	}





/*
--------------------------------------------------------------------------------
□ イメージの装飾設定：まわり込み
--------------------------------------------------------------------------------
*/
.float_left, .float_right
{	display : block;	}

.float_left
{	float : left;	}

.float_right
{	float : right;	}



.float_image_left, .float_image_right
{	text-align : center;	}

.float_image_left
{	float : left;	}

.float_image_right
{	float : right;	}





/*
--------------------------------------------------------------------------------
□ リスト：標準
--------------------------------------------------------------------------------
*/
ul.list_normal
{	list-style-type : desc;
	padding-left : 5px;	}

ol.list_normal
{	list-style-type : decimal;
	padding-left : 5px;	}

.list_normal li
{	margin-left : 2em;
	margin-bottom : 5px;	}

table .list_normal li
{	margin-left : 1em;	}





/*
--------------------------------------------------------------------------------
□ リスト：アイコンなし
--------------------------------------------------------------------------------
*/
ul.list_none, ul.list_none li
{	list-style-type : none;	}

.list_none li:last-child
{	margin-bottom : 0;	}





/*
--------------------------------------------------------------------------------
□ リスト：PDFアイコン
--------------------------------------------------------------------------------
*/
li.icon_pdf,
li.icon_pdf_none
{	background : no-repeat left;
	padding-left : 20px;	}

li.icon_pdf
{	background-image : url("../common/icon_pdf_small.png");	}

li.icon_pdf_none
{	background-image : url("../common/icon_pdf_small_none.png");
	color : #606060;	}





/*
--------------------------------------------------------------------------------
□ リスト：フラット
--------------------------------------------------------------------------------
*/
ul.list_flat, .list_flat>li
{	list-style-type : none;	}

.list_flat
{	letter-spacing : -.40em; /* 文字間を詰めて隙間を削除する */	}

.list_flat>li
{	letter-spacing : normal; /* 文字間を通常に戻す */
	display : inline-block;	}






.list_flat.radius>li:first-child img
{	border-radius : 5px 0 0 5px;	}

.list_flat.radius>li:last-child img
{	border-radius : 0 5px 5px 0;	}





/*
--------------------------------------------------------------------------------
□ テーブル：標準
--------------------------------------------------------------------------------
*/
table.tbl_normal
{	background : #FFFFFF;
	width : 100%;
	margin-left : auto;
	margin-right : auto;
	border : solid 1px #A0A0A0;	}



.tbl_normal caption
{	font-size : 90%;
	font-weight : bold;
	line-height : 1.5em;	}



.tbl_normal th,
.tbl_normal td
{	border : solid 1px #A0A0A0;	}



.tbl_normal th
{	background : #E0E0E0;
	font-size : 85%;
	line-height : 150%;
	padding : 0.5em;	}

.tbl_normal th.cap_left
{	text-align : right;	}

.tbl_normal th.cap_top
{	text-align : center;	}



.tbl_normal td
{	vertical-align : top;
	border : solid 1px #A0A0A0;
	padding : 10px;	}





/*
--------------------------------------------------------------------------------
□ テーブル：境界線結合
--------------------------------------------------------------------------------
*/
table.tbl_collapse
{	border-collapse : collapse;
	border-spacing : 0;	}





/*
--------------------------------------------------------------------------------
□ テーブル：セパレート
--------------------------------------------------------------------------------
*/
table.tbl_separate
{	background : none;
	border : none;
	border-collapse : separate;
	border-spacing : 3px;	}



.tbl_separate th,
.tbl_separate td
{	border : none;	}



.tbl_separate td
{	padding : 0;
	padding : 9px 0;	}





/*
--------------------------------------------------------------------------------
□ テーブル：セルの垂直方向の文字よせ
--------------------------------------------------------------------------------
*/
.vertical_top th,
.vertical_top td
{	vertical-align : top !important;	}



.vertical_middle th,
.vertical_middle td
{	vertical-align : middle !important;	}





/*
--------------------------------------------------------------------------------
□ テーブル：罫線なし
--------------------------------------------------------------------------------
*/
table.tbl_noborder, 
.tbl_noborder th,  
.tbl_noborder td 
{	background : none;
	border : none;	}





/*
--------------------------------------------------------------------------------
□ 更新：記事一覧（スクロール付表示エリア）
--------------------------------------------------------------------------------
*/
.area_scroll
{	width : 100%;
	display : block;
	overflow : auto;	}

.scroll_inner
{	width : calc(100% - 20px);
	height : 100%;
	display : block;	}





/*
--------------------------------------------------------------------------------
□ 更新：記事一覧（共通）
--------------------------------------------------------------------------------
*/
table.list_log, 
ol.list_log, 
ul.list_log
{		}





.list_log a, 
.list_log li .noLink
{	color : #404040;
	text-decoration : none;
	padding : 10px 5px;
	display : block;	}





.list_log li .noLink
{		}





.list_log .colDate
{	font-size : 80%;
	font-weight : normal;
	line-height : 1.5em;	}





/*
--------------------------------------------------------------------------------
□ 更新：記事一覧（リスト形式）
--------------------------------------------------------------------------------
*/
.list_log ol, 
.list_log ul, 
.list_log li
{	list-style-type : none;	}





.list_log ol, 
.list_log ul
{		}





.list_log li
{	border-bottom : dotted 1px rgba(200, 200, 200, 1);	}





.list_log li a:hover
{	background : rgba(150, 150, 150, 0.1);	}





.list_log li .colDate
{	margin-right : 10px;
	padding-right : 10px;
	border-right  : solid 1px rgba(50, 50, 50, 0.3);
	box-shadow : 1px 0 0 rgba(255, 255, 255, 1);
	display : inline-block;	}






/*
--------------------------------------------------------------------------------
□ 更新：記事一覧（テーブル形式）
--------------------------------------------------------------------------------
*/
table.list_log
{	width : 100%;
	border : none;
	border-collapse : collapse;
	border-spacing : 0;	}





.list_log tr:hover
{	background : rgba(150, 150, 150, 0.1);	}





.list_log th, 
.list_log td
{	vertical-align : middle;
	border-bottom : dotted 1px rgba(200, 200, 200, 1);	}





.list_log td a
{	padding-left : 10px;	}





table.list_log .colDate
{	width : 100px;	}

.list_log th.colDate
{	font-size : 80%;
	font-weight : normal;
	line-height : 1.5em;
	border-right  : solid 1px rgba(150, 150, 150, 0.3);	}






/*
--------------------------------------------------------------------------------
□ エラー：
--------------------------------------------------------------------------------
*/
.area_error
{	background : rgba(255, 0, 0, 0.1);
	width : 90%;
	margin-left : auto;
	margin-right : auto;
	padding : 1.5em;
	border-radius : 5px;	}






/*
--------------------------------------------------------------------------------
□ 更新：
--------------------------------------------------------------------------------
*/
.area_effect
{		}





.area_effect li, 
.effectPaper
{	background : #FFFFFF url("../common/effectPaper_wall.png") repeat-y center right;
	min-height : 100px;
	padding : 10px;
	border : solid 1px rgba(0, 0, 0, 0.1);
	border-radius : 2px;
	display : block;
	position : relative;	}

.area_effect li::after, 
.effectPaper::after
{	background : #777;
	content : "";
	width : 50%;
	z-index : -1;
	position : absolute;
	bottom : 15px;
	right : 10px;
	left : auto;
	top : 80%;
	-webkit-box-shadow : 0 15px 10px #777;
	-moz-box-shadow : 0 15px 10px #777;
	box-shadow : 0 15px 10px #777;
	-webkit-transform : rotate(3deg);
	-moz-transform : rotate(3deg);
	-o-transform : rotate(3deg);
	-ms-transform : rotate(3deg);
	transform : rotate(3deg);	}

.area_effect li:nth-child(2n), 
.effectPaper:nth-of-type(2n)
{	background-color : #D0ECA5;	}

.area_effect li:nth-child(2n+1), 
.effectPaper:nth-of-type(2n+1)
{	background-color : #FFFFD0;	}





.area_effect li
{	margin-bottom : 10px;	}





.area_effect li a
{	color : #000000;
	text-decoration : none;
	min-height : 80px;
	height : 100%;
	border-radius : 5px;
	display : block;	}

.area_effect li a:hover
{	background : rgba(100, 100, 100, 0.2);	}





.area_effect li .colDate
{	font-size : 80%;
	font-weight : normal;
	line-height : 1.5em;
	margin-bottom : 5px;
	padding : 2px 5px;
	display : block;	}






/*
--------------------------------------------------------------------------------
□ 
--------------------------------------------------------------------------------
*/
.area_note
{	background : #D5D5D5;
	font-size : 90%;
	line-height : 1.5em;
	margin : auto 1em;
	padding : 10px;
	border-radius : 10px;	}





/*
--------------------------------------------------------------------------------
□ GoogleAPI：アクセスマップ
--------------------------------------------------------------------------------
*/
.area_accessmap
{	border : solid 1px rgba(100, 100, 100, 0.3);
	border-radius : 5px;	}





/*
--------------------------------------------------------------------------------
□ GoogleAPI：カレンダー
--------------------------------------------------------------------------------
*/
.area_calendar
{	background : #FFFFFF;
	padding : 5px;
	border : solid 1px rgba(100, 100, 100, 0.3);
	border-radius : 5px;	}





/*
--------------------------------------------------------------------------------
□ Adobe：ダウンロード
--------------------------------------------------------------------------------
*/
.area_adobeDL
{	font-size : 13px;
	line-height : 1.2em;
	text-align : center;
	width : 80%;
	margin-left : auto;
	margin-right : auto;
	padding : 1.5em 1em;
	border : 1px #C0C0C0;
	border-style : solid none;	}

.area_adobeDL .icon
{	text-align : right;
	width : 50%;
	padding-right : 5px;
	display : block;
	float : left;	}

.area_adobeDL .description
{	text-align : left;
	width : 50%;
	padding-left : 5px;
	display : block;
	float : right;	}