/*	===============================================================
	● テンプレート COMMON CSSファイル
	---------------------------------------------------------------
	Release 2021.08.04                                Powerd by TDR
	=============================================================== */

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

	body
	{
		-webkit-text-size-adjust:100%;
	}

	*, *:before, *:after
	{
		box-sizing:border-box;
		outline:none !important;
	}

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

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

	/****************************
	 * サイズ
	 ****************************/
	.w5   { width: 5%  !important; }
	.w10  { width:10%  !important; }
	.w15  { width:15%  !important; }
	.w20  { width:20%  !important; }
	.w25  { width:25%  !important; }
	.w30  { width:30%  !important; }
	.w35  { width:35%  !important; }
	.w40  { width:40%  !important; }
	.w45  { width:45%  !important; }
	.w50  { width:50%  !important; }
	.w55  { width:55%  !important; }
	.w60  { width:60%  !important; }
	.w65  { width:65%  !important; }
	.w70  { width:70%  !important; }
	.w75  { width:75%  !important; }
	.w80  { width:80%  !important; }
	.w85  { width:85%  !important; }
	.w90  { width:90%  !important; }
	.w95  { width:95%  !important; }
	.w100 { width:100% !important; }
    
	.h50  { height: 50px !important; }
	.h100 { height:100px !important; }
	.h150 { height:150px !important; }
	.h200 { height:200px !important; }
	.h250 { height:250px !important; }
	.h300 { height:300px !important; }
	.h400 { height:400px !important; }
	.h500 { height:500px !important; }
	.h600 { height:600px !important; }

	.min100 { min-width:100px  !important; }
	.min150 { min-width:150px  !important; }
	.min200 { min-width:200px  !important; }
	.min250 { min-width:250px  !important; }
	.min300 { min-width:300px  !important; }
	.min350 { min-width:350px  !important; }
	.min400 { min-width:400px  !important; }
	.min450 { min-width:450px  !important; }
	.min500 { min-width:500px  !important; }
	.min550 { min-width:550px  !important; }
	.min600 { min-width:600px  !important; }
	.min650 { min-width:650px  !important; }
	.min700 { min-width:700px  !important; }
	.min750 { min-width:750px  !important; }
	.min800 { min-width:800px  !important; }
	.min850 { min-width:850px  !important; }
	.min900 { min-width:900px  !important; }
	.min950 { min-width:950px  !important; }
	.min1000{ min-width:1000px !important; }

	.max100 { max-width:100px  !important; }
	.max150 { max-width:150px  !important; }
	.max200 { max-width:200px  !important; }
	.max250 { max-width:250px  !important; }
	.max300 { max-width:300px  !important; }
	.max350 { max-width:350px  !important; }
	.max400 { max-width:400px  !important; }
	.max450 { max-width:450px  !important; }
	.max500 { max-width:500px  !important; }
	.max550 { max-width:550px  !important; }
	.max600 { max-width:600px  !important; }
	.max650 { max-width:650px  !important; }
	.max700 { max-width:700px  !important; }
	.max750 { max-width:750px  !important; }
	.max800 { max-width:800px  !important; }
	.max850 { max-width:850px  !important; }
	.max900 { max-width:900px  !important; }
	.max950 { max-width:900px  !important; }
	.max1000{ max-width:1000px !important; }

	/****************************
	 * マージンとパディング
	 ****************************/
	/** 全体マージン *************/
	.m3   { margin:3px  !important; }
	.m5   { margin:5px  !important; }
	.m8   { margin:8px  !important; }
	.m10  { margin:10px !important; }
	.m15  { margin:15px !important; }
	.m20  { margin:20px !important; }
	.m25  { margin:25px !important; }
	.m30  { margin:30px !important; }
	.m35  { margin:35px !important; }
	.m40  { margin:40px !important; }
	.m45  { margin:45px !important; }
	.m50  { margin:50px !important; }

	/** 全体マージン（調整） *****/
	.mm3  { margin:2px 3px   !important; }
	.mm5  { margin:3px 5px   !important; }
	.mm8  { margin:5px 8px   !important; }
	.mm10 { margin:8px 10px  !important; }
	.mm15 { margin:10px 15px !important; }
	.mm20 { margin:15px 20px !important; }
	.mm25 { margin:20px 25px !important; }
	.mm30 { margin:25px 30px !important; }
	.mm35 { margin:30px 35px !important; }
	.mm40 { margin:35px 40px !important; }
	.mm45 { margin:40px 45px !important; }
	.mm50 { margin:45px 50px !important; }

	/** 個別マージン *************/
	.mt-10 { margin-top:   -10px !important; }
	.mb-10 { margin-bottom:-10px !important; }
	.ml-10 { margin-left:  -10px !important; }
	.mr-10 { margin-right: -10px !important; }
	.mt-20 { margin-top:   -20px !important; }
	.mb-20 { margin-bottom:-20px !important; }
	.ml-20 { margin-left:  -20px !important; }
	.mr-20 { margin-right: -20px !important; }
	.mt0   { margin-top:   0px  !important; }
	.mb0   { margin-bottom:0px  !important; }
	.ml0   { margin-left:  0px  !important; }
	.mr0   { margin-right: 0px  !important; }
	.mt3   { margin-top:   3px  !important; }
	.mb3   { margin-bottom:3px  !important; }
	.ml3   { margin-left:  3px  !important; }
	.mr3   { margin-right: 3px  !important; }
	.mt5   { margin-top:   5px  !important; }
	.mb5   { margin-bottom:5px  !important; }
	.ml5   { margin-left:  5px  !important; }
	.mr5   { margin-right: 5px  !important; }
	.mt8   { margin-top:   8px  !important; }
	.mb8   { margin-bottom:8px  !important; }
	.ml8   { margin-left:  8px  !important; }
	.mr8   { margin-right: 8px  !important; }
	.mt10  { margin-top:   10px !important; }
	.mb10  { margin-bottom:10px !important; }
	.ml10  { margin-left:  10px !important; }
	.mr10  { margin-right: 10px !important; }
	.mt15  { margin-top:   15px !important; }
	.mb15  { margin-bottom:15px !important; }
	.ml15  { margin-left:  15px !important; }
	.mr15  { margin-right: 15px !important; }
	.mt20  { margin-top:   20px !important; }
	.mb20  { margin-bottom:20px !important; }
	.ml20  { margin-left:  20px !important; }
	.mr20  { margin-right: 20px !important; }
	.mt25  { margin-top:   25px !important; }
	.mb25  { margin-bottom:25px !important; }
	.ml25  { margin-left:  25px !important; }
	.mr25  { margin-right: 25px !important; }
	.mt30  { margin-top:   30px !important; }
	.mb30  { margin-bottom:30px !important; }
	.ml30  { margin-left:  30px !important; }
	.mr30  { margin-right: 30px !important; }
	.mt35  { margin-top:   35px !important; }
	.mb35  { margin-bottom:35px !important; }
	.ml35  { margin-left:  35px !important; }
	.mr35  { margin-right: 35px !important; }
	.mt40  { margin-top:   40px !important; }
	.mb40  { margin-bottom:40px !important; }
	.ml40  { margin-left:  40px !important; }
	.mr40  { margin-right: 40px !important; }
	.mt45  { margin-top:   45px !important; }
	.mb45  { margin-bottom:45px !important; }
	.ml45  { margin-left:  45px !important; }
	.mr45  { margin-right: 45px !important; }
	.mt50  { margin-top:   50px !important; }
	.mb50  { margin-bottom:50px !important; }
	.ml50  { margin-left:  50px !important; }
	.mr50  { margin-right: 50px !important; }

	/** 全体パディング ************/
	.p3   { padding:3px  !important; }
	.p5   { padding:5px  !important; }
	.p8   { padding:8px  !important; }
	.p10  { padding:10px !important; }
	.p15  { padding:15px !important; }
	.p20  { padding:20px !important; }
	.p25  { padding:25px !important; }
	.p30  { padding:30px !important; }
	.p35  { padding:35px !important; }
	.p40  { padding:40px !important; }
	.p45  { padding:45px !important; }
	.p50  { padding:50px !important; }

	/** 全体パディング（調整） ****/
	.pp3  { padding:2px 3px   !important; }
	.pp5  { padding:3px 5px   !important; }
	.pp8  { padding:5px 8px   !important; }
	.pp10 { padding:8px 10px  !important; }
	.pp15 { padding:10px 15px !important; }
	.pp20 { padding:15px 20px !important; }
	.pp25 { padding:20px 25px !important; }
	.pp30 { padding:25px 30px !important; }
	.pp35 { padding:30px 35px !important; }
	.pp40 { padding:35px 40px !important; }
	.pp45 { padding:40px 45px !important; }
	.pp50 { padding:45px 50px !important; }

	/** 個別パディング ***********/
	.pt3  { padding-top:   3px  !important; }
	.pb3  { padding-bottom:3px  !important; }
	.pl3  { padding-left:  3px  !important; }
	.pr3  { padding-right: 3px  !important; }
	.pt5  { padding-top:   5px  !important; }
	.pb5  { padding-bottom:5px  !important; }
	.pl5  { padding-left:  5px  !important; }
	.pr5  { padding-right: 5px  !important; }
	.pt8  { padding-top:   8px  !important; }
	.pb8  { padding-bottom:8px  !important; }
	.pl8  { padding-left:  8px  !important; }
	.pr8  { padding-right: 8px  !important; }
	.pt10 { padding-top:   10px !important; }
	.pb10 { padding-bottom:10px !important; }
	.pl10 { padding-left:  10px !important; }
	.pr10 { padding-right: 10px !important; }
	.pt15 { padding-top:   15px !important; }
	.pb15 { padding-bottom:15px !important; }
	.pl15 { padding-left:  15px !important; }
	.pr15 { padding-right: 15px !important; }
	.pt20 { padding-top:   20px !important; }
	.pb20 { padding-bottom:20px !important; }
	.pl20 { padding-left:  20px !important; }
	.pr20 { padding-right: 20px !important; }
	.pt25 { padding-top:   25px !important; }
	.pb25 { padding-bottom:25px !important; }
	.pl25 { padding-left:  25px !important; }
	.pr25 { padding-right: 25px !important; }
	.pt30 { padding-top:   30px !important; }
	.pb30 { padding-bottom:30px !important; }
	.pl30 { padding-left:  30px !important; }
	.pr30 { padding-right: 30px !important; }
	.pt35 { padding-top:   35px !important; }
	.pb35 { padding-bottom:35px !important; }
	.pl35 { padding-left:  35px !important; }
	.pr35 { padding-right: 35px !important; }
	.pt40 { padding-top:   40px !important; }
	.pb40 { padding-bottom:40px !important; }
	.pl40 { padding-left:  40px !important; }
	.pr40 { padding-right: 40px !important; }
	.pt45 { padding-top:   45px !important; }
	.pb45 { padding-bottom:45px !important; }
	.pl45 { padding-left:  45px !important; }
	.pr45 { padding-right: 45px !important; }
	.pt50 { padding-top:   50px !important; }
	.pb50 { padding-bottom:50px !important; }
	.pl50 { padding-left:  50px !important; }
	.pr50 { padding-right: 50px !important; }

	/****************************
	 * フォント
	 ****************************/
	/** フォントサイズ ***********/
	.fs8  { font-size: 8px !important; }
	.fs10 { font-size:10px !important; }
	.fs12 { font-size:12px !important; }
	.fs14 { font-size:14px !important; }
	.fs16 { font-size:16px !important; }
	.fs18 { font-size:18px !important; }
	.fs20 { font-size:20px !important; }
	.fs22 { font-size:22px !important; }
	.fs24 { font-size:24px !important; }

	/** フォントパーセンテージ ****/
	.fp50  { font-size: 50% !important; }
	.fp60  { font-size: 60% !important; }
	.fp70  { font-size: 70% !important; }
	.fp80  { font-size: 80% !important; }
	.fp90  { font-size: 90% !important; }
	.fp100 { font-size:100% !important; }
	.fp110 { font-size:110% !important; }
	.fp120 { font-size:120% !important; }
	.fp130 { font-size:130% !important; }
	.fp140 { font-size:140% !important; }
	.fp150 { font-size:150% !important; }
	.fp160 { font-size:160% !important; }
	.fp170 { font-size:170% !important; }
	.fp180 { font-size:180% !important; }
	.fp190 { font-size:190% !important; }
	.fp200 { font-size:200% !important; }
	.fp210 { font-size:210% !important; }
	.fp220 { font-size:220% !important; }
	.fp230 { font-size:230% !important; }
	.fp240 { font-size:240% !important; }
	.fp250 { font-size:250% !important; }
	.fp260 { font-size:260% !important; }
	.fp270 { font-size:270% !important; }
	.fp280 { font-size:280% !important; }
	.fp290 { font-size:290% !important; }
	.fp300 { font-size:300% !important; }

	/** 行間 *********************/
	.l100 { line-height:100% !important; }
	.l120 { line-height:120% !important; }
	.l130 { line-height:130% !important; }
	.l140 { line-height:140% !important; }
	.l150 { line-height:150% !important; }
	.l160 { line-height:160% !important; }
	.l170 { line-height:170% !important; }
	.l180 { line-height:180% !important; }
	.l190 { line-height:190% !important; }
	.l200 { line-height:200% !important; }
	.l220 { line-height:220% !important; }
	.l240 { line-height:240% !important; }
	.l260 { line-height:260% !important; }
	.l280 { line-height:280% !important; }
	.l300 { line-height:300% !important; }

	/** 装飾 *********************/
	.normal { font-weight:100       !important; }
	.bold   { font-weight:bold      !important; }
	.mono   { font-family:monospace !important; }

	/****************************
	 * カラー 
	 ****************************/
	.black  { color:#000000 !important; }
	.white  { color:#ffffff !important; }
	.gray   { color:#666666 !important; }
	.red    { color:#ff0000 !important; }
	.brown  { color:#cc0000 !important; }
	.green  { color:#4bb20d !important; }
	.lgreen { color:#cbe26f !important; }
	.orange { color:#ff9900 !important; }
	.blue   { color:#3784c6 !important; }
	.sky    { color:#0066cc !important; }
	.yellow { color:#ffff00 !important; }

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

	/****************************
	 * フロート
	 ****************************/
	.center { margin:auto;  }
	.left   { float:left;   }
	.right  { float:right;  }
	.clear  { clear:both;   }

	/****************************
	 * フレックス
	 ****************************/
	*[ class^='flex' ]							{ display:flex; }
	*[ class^='flex' ][ class*='-fit' ]			{ justify-content:space-between; }
	*[ class^='flex' ][ class*='-wrap' ]		{ flex-wrap:wrap; }
	*[ class^='flex' ][ class*='-auto' ] > * 	{ width:100%; margin-right:20px; }
	*[ class^='flex' ][ class*='-normal' ] > *	{ margin-right:20px; }
	*[ class^='flex' ][ class*='-2' ] > * 		{ width:calc( ( 100% / 2 ) - 20px ); margin-right:20px; }
	*[ class^='flex' ][ class*='-4' ] > *		{ width:calc( ( 100% / 4 ) - 20px ); margin-right:20px; }
	*[ class^='flex' ][ class*='-3' ] > *		{ width:calc( ( 100% / 3 ) - 20px ); margin-right:20px; }
	*[ class^='flex' ][ class*='-5' ] > *		{ width:calc( ( 100% / 5 ) - 20px ); margin-right:20px; }
	*[ class^='flex' ][ class*='-range' ] > *:nth-child(1), *[ class^='flex' ][ class*='-range' ] > *:nth-child(3) { width:15%; }
	*[ class^='flex' ][ class*='-range' ] > *:nth-child(2) { width:5%; padding:8px; text-align:center; }
	*[ class^='flex' ] > *:last-child   		{ margin-right:10px; }

	/****************************
	 * フォーム
	 ****************************/
	input[ type='text' ], input[ type='password' ], textarea, select
	{
		padding:5px 8px;
		background:white;
		border-radius:5px;
		border:1px solid #bbb;
		color:#666;
		font-size:100%;
	}

	input[ type='text' ]:hover, input[ type='password' ]:hover, textarea:hover, select:hover
	{ 		
		border-color:#777777;
	}

	input[ type='text' ]:focus, input[ type='password' ]:focus, textarea:focus, select:focus
	{ 		
		border-color:#7b96cd;
		box-shadow:0px 0px 3px #7b96cd, 0px 0px 4px #7b96cd;
		color:black;
		outline:0;
	}

	td.main input { color:black; }

	input::placeholder { color: #bbb; }

	/****************************
	 * フォーム内のオブジェクト表示
	 ****************************/
	label.in_form
	{
		position:relative;
	}

	label.in_form i
	{
		font-size:160%;
		color:#AAA;
		position:absolute;
		top:-3px;
		left:15px;
		z-index:1;
	}

	/****************************
	 * リンク 
	 ****************************/

	/****************************
	 * デフォルト
	 ****************************/
	main { font-size:1rem;  line-height:160%; }
	h1   { font-size:2.30rem; margin-bottom:30px; }
	h2   { font-size:1.60rem; margin-bottom:30px; }
	h3   { font-size:1.20rem; margin-bottom:20px; }
	h4   { font-size:1rem; margin-bottom:10px; }
	p    { margin:0 0 40px 0; }