/*	===============================================================
	● COMMON CSSファイル
	---------------------------------------------------------------
	Release 2018.08.15                                Powerd by TDR
	=============================================================== */

	/****************************
	 * タグの初期化
	 ****************************/
	html, body
	{
		width:100%; height:100%;
		margin:0px; padding:0px;
		font-size:13px; color:#333333;
		line-height:170%; letter-spacing:1px;
		background:#FFFFFF;
	}

	*, *:before, *:after
	{
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			 -o-box-sizing: border-box;
			-ms-box-sizing: border-box;
				box-sizing: border-box;
	}

	h1, h2, h3, h4, h5, h6, div, p, ul, ol, dt, dd, table, form, img
	{
		margin:0px; padding:0px;
		font-size:100%;
	}

	ul,ol
	{
		list-style-type: none;
	}

	dt
	{
		font-weight:bold;
	}

	dd
	{
		margin-left:20px;
	}

	table
	{
		border-collapse:collapse;
		border-spacing:0px;
	}

	th
	{
		text-align:center;
		vertical-align:top;
	}

	td
	{
		padding:8px 5px;
	}

	img
	{
		border:0px;
	}

	hr.dot
	{
		margin:10px 0px;
		border:none;
		border-bottom:1px dotted gray;
	}

	*, *:before, *:after
	{
		-webkit-box-sizing:border-box;
		   -moz-box-sizing:border-box;
			 -o-box-sizing:border-box;
			-ms-box-sizing:border-box;
				box-sizing:border-box;
	}


	/****************************
	 * フォーム
	 ****************************/
	form
	{
		margin:0px;
	}

	input[type="text"], input[type="password"], input[type="tel"], input[type="email"], textarea:not(.ckeditor)
	{
		padding:5px;
		font-size:12px;
		border:1px solid #AAA;
		background-color:#FFF;
		border-radius:5px;
        -webkit-appearance:none;
           -moz-appearance:none;
                appearance:none;
	}

	input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, textarea:not(.ckeditor):focus, select:focus
	{
		border-color:#FFA500;
		box-shadow:0px 0px 3px #FFA500;
		outline:0;
	}

    input[type="submit"], input[type="button"], button
    {
        margin:0px; padding:4px 15px;
        border:1px solid #A0A0A0;
        border-radius:5px;
        background:linear-gradient( to bottom, #F6F6F6,#D4D4D4 );
        font-size:100%; letter-spacing:1px;
        -webkit-appearance:none;
           -moz-appearance:none;
                appearance:none;
    }

	select
	{
		padding:2px;
		font-size:12px;
	}

	datalist { display:none; }

	/** TinyMCE **/
	#mceu_21 { z-index:50; }

	/** IE 10以上 ハック **/
	@media all and (-ms-high-contrast:none)
	{
		select
		{
			padding:5px;
			border:1px solid #A0A0A0;
			border-radius:5px;
		}

		input[type="submit"], input[type="button"], button
		{
			padding:7px 15px;
		}

		input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, textarea:not(.ckeditor):focus, select:focus
		{
			box-shadow:0px 0px 6px #FFA500;
		}
	}

	/** Chrome ハック **/
	@media screen and (-webkit-min-device-pixel-ratio:0)
	{
		select
		{
			padding:5px;
			border:1px solid #A0A0A0;
			border-radius:5px;
			background:linear-gradient( to top, #EEE, #F7F7F7 );
		}

		input[type="submit"], input[type="button"], button
		{
			padding:7px 15px;
		}

		input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, textarea:not(.ckeditor):focus, select:focus
		{
			box-shadow:0px 0px 6px #FFA500;
		}
	}


	/****************************
	 * フォームサイズ
	 ****************************/
	.w10  { width:10%; }
	.w15  { width:15%; }
	.w20  { width:20%; }
	.w25  { width:25%; }
	.w30  { width:30%; }
	.w35  { width:35%; }
	.w40  { width:40%; }
	.w45  { width:45%; }
	.w50  { width:50%; }
	.w55  { width:55%; }
	.w60  { width:60%; }
	.w65  { width:65%; }
	.w70  { width:70%; }
	.w75  { width:75%; }
	.w80  { width:80%; }
	.w85  { width:85%; }
	.w90  { width:90%; }
	.w95  { width:95%; }
	.w100 { width:98%; }

	.h50  { height:50px; }
	.h100 { height:100px; }
	.h150 { height:150px; }
	.h200 { height:200px; }
	.h250 { height:250px; }
	.h300 { height:300px; }
	.h400 { height:400px; }
	.h500 { height:500px; }
	.h600 { height:600px; }


	/****************************
	 * マージンとパディング
	 ****************************/
	.m3   { margin:       3px;  }
	.m8   { margin:       8px;  }
	.m10  { margin:       10px; }
	.m15  { margin:       15px; }
	.m20  { margin:       20px; }
	.m25  { margin:       25px; }
	.m30  { margin:       30px; }
	.mt8  { margin-top:   8px;  }
	.mb8  { margin-bottom:8px;  }
	.ml8  { margin-left:  8px;  }
	.mr8  { margin-right: 8px;  }
	.mt10 { margin-top:   10px; }
	.mb10 { margin-bottom:10px; }
	.ml10 { margin-left:  10px; }
	.mr10 { margin-right: 10px; }
	.mt15 { margin-top:   15px; }
	.mb15 { margin-bottom:15px; }
	.ml15 { margin-left:  15px; }
	.mr15 { margin-right: 15px; }
	.mt20 { margin-top:   20px; }
	.mb20 { margin-bottom:20px; }
	.ml20 { margin-left:  20px; }
	.mr20 { margin-right: 20px; }
	.mt25 { margin-top:   25px; }
	.mb25 { margin-bottom:25px; }
	.ml25 { margin-left:  25px; }
	.mr25 { margin-right: 25px; }
	.mt30 { margin-top:   30px; }
	.mb30 { margin-bottom:30px; }
	.ml30 { margin-left:  30px; }
	.mr30 { margin-right: 30px; }

	.p3   { padding:       3px;  }
	.p8   { padding:       8px;  }
	.p10  { padding:       10px; }
	.p15  { padding:       15px; }
	.p20  { padding:       20px; }
	.p25  { padding:       25px; }
	.p30  { padding:       30px; }
	.pt3  { padding-top:   3px;  }
	.pb3  { padding-bottom:3px;  }
	.pl3  { padding-left:  3px;  }
	.pr3  { padding-right: 3px;  }
	.pt8  { padding-top:   8px;  }
	.pb8  { padding-bottom:8px;  }
	.pl8  { padding-left:  8px;  }
	.pr8  { padding-right: 8px;  }
	.pt10 { padding-top:   10px; }
	.pb10 { padding-bottom:10px; }
	.pl10 { padding-left:  10px; }
	.pr10 { padding-right: 10px; }
	.pt15 { padding-top:   15px; }
	.pb15 { padding-bottom:15px; }
	.pl15 { padding-left:  15px; }
	.pr15 { padding-right: 15px; }
	.pt20 { padding-top:   20px; }
	.pb20 { padding-bottom:20px; }
	.pl20 { padding-left:  20px; }
	.pr20 { padding-right: 20px; }
	.pt25 { padding-top:   25px; }
	.pb25 { padding-bottom:25px; }
	.pl25 { padding-left:  25px; }
	.pr25 { padding-right: 25px; }
	.pt30 { padding-top:   30px; }
	.pb30 { padding-bottom:30px; }
	.pl30 { padding-left:  30px; }
	.pr30 { padding-right: 30px; }


	/****************************
	 * フォント
	 ****************************/
	.s8			{ font-size:8px;  }
	.s10		{ font-size:10px; }
	.s12		{ font-size:12px; }
	.s14		{ font-size:14px; }
	.s16		{ font-size:16px; }
	.s18		{ font-size:18px; }
	.s20		{ font-size:20px; }
	.s22		{ font-size:22px; }
	.s24		{ font-size:24px; }

	.f50		{ font-size: 50%;  }
	.f60		{ font-size: 60%;  }
	.f70		{ font-size: 70%;  }
	.f80		{ font-size: 80%;  }
	.f90		{ font-size: 90%;  }
	.f100		{ font-size:100%;  }
	.f110		{ font-size:110%; }
	.f120		{ font-size:120%; }
	.f130		{ font-size:130%; }
	.f140		{ font-size:140%; }
	.f150		{ font-size:150%; }
	.f160		{ font-size:160%; }
	.f170		{ font-size:170%; }
	.f180		{ font-size:180%; }
	.f190		{ font-size:190%; }
	.f200		{ font-size:200%; }

	.l100		{ line-height:100%; }
	.l120		{ line-height:120%; }
	.l140		{ line-height:140%; }
	.l160		{ line-height:160%; }
	.l180		{ line-height:180%; }
	.l200		{ line-height:200%; }

	.normal		{ font-weight:100; }
	.bold		{ font-weight:bold; }
	.notpp		{ font-family:monospace; }

	.icoMark	{ display:inline-block; margin-top:-2px; font-size:20px; margin-right:10px; }
	.icoMarkMenu{ display:inline-block; margin-top:-2px; font-size:16px; margin-right:5px; }

	.ico_mark	{ display:inline-block; margin-top:-2px; font-size:20px; margin-right:10px; }
	.ico_menu	{ display:inline-block; margin-top:-2px; font-size:16px; margin-right:5px; }


	/****************************
	 * カラー
	 ****************************/
	.black		{ color:#000000; }	/** 黒 **/
	.white		{ color:#FFFFFF; }	/** 白 **/
	.gray		{ color:#666666; }	/** 灰 **/
	.red		{ color:#FF0000; }	/** 赤 **/
	.brown		{ color:#CC0000; }	/** 茶 **/
	.green		{ color:#4BB20D; }	/** 緑 **/
	.lgreen		{ color:#CBE26F; }	/** 緑 **/
	.orange		{ color:#FF9900; }	/** 橙 **/
	.blue		{ color:#3784C6; }	/** 青 **/
	.sky		{ color:#0066CC; }	/** 水 **/
	.yellow		{ color:#FFFF00; }	/** 黄 **/


	/****************************
	 * 文章
	 ****************************/
	.indent
	{
		padding-left:1em;
		text-indent:-1em;
	}


	/****************************
	 * フロート（左右の寄せ）
	 ****************************/
	.fl { float:left; }
	.fr { float:right; }


	/****************************
	 * フレックスボックス
	 ****************************/
	.flex
	{
		display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
	}

	.flex.split > *
	{
		width:29%;
		height:100%;
		margin-right:35px;
	}

	.flex.row
	{
		-webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
		-ms-flex-wrap: wrap;
                flex-wrap: wrap;
		align-content:space-between;
	}
	.flex.row > *
	{
		margin-right:20px;
	}

	.flex.column
	{
		flex-direction:column;
		align-content:space-between;
	}

	.flex.wrap
	{
		-ms-flex-wrap: wrap;
                flex-wrap: wrap;
	}

	.flex.center
	{
		-webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
	}


	/****************************
	 * リンク
	 ****************************/
	a         { color:#0066CC; font-weight:normal; text-decoration:none; }
	a:hover   { color:#CC0000; text-decoration:underline; }

	a[ bold ] { font-weight:bold; text-decoration:none; }


	/****************************
	 * 画像
	 ****************************/
	.frmImg
	{
		padding:2px;
		border:2px solid #DDD;
	}

	.frmImg:hover
	{
		border:2px solid #AAA;
		opacity:0.6; filter:alpha( opacity=60 );
	}

	.zoomImg
	{
		border:1px solid #DDD;
	}

	.zoomImg:hover
	{
		border:3px solid white;
		box-shadow:10px 10px 25px #BBB,
		            5px  5px 20px #999,
		            3px  3px 10px #666;
		-webkit-animation:zoomImage 0.3s ease forwards;
		   -moz-animation:zoomImage 0.3s ease forwards;
			 -o-animation:zoomImage 0.3s ease forwards;
			-ms-animation:zoomImage 0.3s ease forwards;
				animation:zoomImage 0.3s ease forwards;
		-webkit-filter:brightness( 1.05 );
		   -moz-filter:brightness( 1.05 );
		    -ms-filter:brightness( 1.05 );
		        filter:brightness( 1.05 );
		z-index:100;
	}

	@keyframes zoomImage
	{
		from { transform:scale( 1.0 ); }
		to   { transform:scale( 1.1 ); }
	}


	/****************************
	 * ナビゲーションタブ
	 ****************************/
	.navTag
	{
		margin-bottom:30px;
		border-bottom:1px solid #AAA;
		display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
	}

	.navTag li
	{
		width:130px; height:37px;
		margin:0px 35px -0px 0px;
		background:#DDD;
		border:1px solid #AAA;
		border-bottom:none;
		border-top-right-radius:5px;
	}

	.navTag  a
	{
		padding:5px 15px;
		color:#666; font-size:105%;
		display:block;
	}

	.navTag li:hover a, .navTag .stay
	{
		border:1px solid #96ccff;
		border-top-right-radius:5px;
		background:#96ccff;
		color:white; text-decoration:none;
	}

	.navTag .stay
	{
		border:1px solid #3897F0;
		border-top-right-radius:5px;
		background:#3897F0;
		color:white; font-weight:bold;
	}


	/****************************
	 * 表示・非表示
	 ****************************/
	.show { display:block; }
	.hide { display:none; }


	/****************************
	 * ボックス
	 ****************************/
	.box
	{
		margin:10px 0px; padding:10px 15px;
		border:1px solid gray;
	}
	.box.gray { color:black; background:#F7F7F7; }
	.radius { border-radius:8px;}


	/****************************
	 * 吹き出し
	 ****************************/
	.leftBalloon
	{
		width:185px;
		background-color:#ddeeff;
		border-radius:5px 5px 5px 5px;
		color:black;
		position:relative;
	}
	.leftBalloon:after
	{
		content:'';
		margin-top:-9px;
		border-left:9px solid #ddeeff;
		border-top:9px solid transparent;
		border-bottom:9px solid transparent;
		position:absolute;
		top:50%; right:-8px;
	}

	/****************************
	 * タグ色
	 ****************************/
	.tag_tag { color:#009999; }
	.tag_opt { color:#cc6600; }
	.tag_var { color:#0000ff; }
	.tag_php { color:#ff0004; }
	.tag_php { color:#ff0004; }
	.tag_phpfnc { color:#0080ff; }
	.tag_phpvar { color:#cc0000; }
	.tag_phpcmd { color:#ff9900; }

	/****************************
	 * モーダル
	 ****************************/
	/*
	.modal
	{
		width:80%;
		height:100px;
		margin:5px;
		padding:5px;
		border-radius:10px;
		background:white;
		box-shadow:5px 5px 15px #444;
		position:fixed;
		z-index:500;
		display:none;
	}
	*/
	.modal_back
	{
		width:100%;
		height:100vh;
		background:black;
		opacity:0.2;
		position:fixed;
		top:0px; left:0px;
		z-index:100;
	}



	/****************************
	 * その他
	 ****************************/
	.clear { clear:both; }

	.center
	{
		height:100%;
		display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
		justify-content:center;
		align-items:center;
	}

	.fix
	{
		color:#CC0000; font-size:12px; font-weight:bold;
	}