@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(icon_pdf_small.png);
}

li.icon_pdf_none{
	background-image : url(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 : url(effectPaper_wall.png) right center / auto auto repeat-y scroll padding-box border-box #ffffff;
	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;
}