@charset "utf-8";


/* content===========================================

	utility.css
	
		Utilities
		Fonts
		Colors
		Spacing
		Border radius
		Table (Responsive)


	KABOSU MEDIA WORKS

===================================================== */


/*	 Utilities
===================================================== */
	
	.u-clear { clear: both; }
	.u-clearfix:after {
		content: " ";
		display: block;
		clear: both;
		}

	.u-dn { display: none; }
	.u-di { display: inline; }
	.u-db { display: block; }
	.u-dib { display: inline-block; }
	.u-vh { visibility: hidden; }

	.u-fln { float: none; }
	.u-fll { float: left; }
	.u-flr { float: right; }
	
	.u-tal { text-align: left; }
	.u-tac { text-align: center; }
	.u-tar { text-align: right; }




/*	Fonts
===================================================== */

	.u-fontMincho { font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
	.u-fontKakugo { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
	.u-fontMarugo { font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; }
	.u-fontBold { font-weight: bold; }


/*	Colors
===================================================== */

	/* cRed:Red, cBlue:Blue, cGreen:Green, cYellow:Yellow, cGrey:Grey  */
	/*** 参考元 --> http://t32k.me/wisteria/ ***/

		.u-cRed-light 	{ color: #FFCDD2; }
		.u-cRed 				{ color: #F44336; }
		.u-cRed-dark 		{ color: #B71C1C; }
		
		.u-cBlue-light 	{ color: #BBDEFB; }
		.u-cBlue			 	{ color: #2196F3; }
		.u-cBlue-dark	 	{ color: #0D47A1; }
		
		.u-cGreen-light { color: #C8E6C9; }
		.u-cGreen 			{ color: #4CAF50; }
		.u-cGreen-dark 	{ color: #1B5E20; }
		
		.u-cYellow-light { color: #FFF9C4; }
		.u-cYellow			 { color: #FFEB3B; }
		.u-cYellow-dark	 { color: #F57F17; }
		
		.u-cGrey-light 	{ color: #F5F5F5; }
		.u-cGrey			 	{ color: #9E9E9E; }
		.u-cGrey-dark	 	{ color: #212121; }


		/* background color */
		
		.u-bgcRed-light 	{ background-color: #FFCDD2; }
		.u-bgcRed 				{ background-color: #F44336; }
		.u-bgcRed-dark 		{ background-color: #B71C1C; }
		
		.u-bgcBlue-light 	{ background-color: #BBDEFB; }
		.u-bgcBlue 				{ background-color: #2196F3; }
		.u-bgcBlue-dark 	{ background-color: #0D47A1; }
		
		.u-bgcGreen-light { background-color: #C8E6C9; }
		.u-bgcGreen 			{ background-color: #4CAF50; }
		.u-bgcGreen-dark 	{ background-color: #1B5E20; }
		
		.u-bgcYellow-light 	{ background-color: #FFF9C4; }
		.u-bgcYellow 				{ background-color: #FFEB3B; }
		.u-bgcYellow-dark 	{ background-color: #F57F17; }
		
		.u-bgcGrey-light 	{ background-color: #F5F5F5; }	
		.u-bgcGrey 				{ background-color: #9E9E9E; }
		.u-bgcGrey-dark 	{ background-color: #212121; }
	




/*	Spacing
===================================================== */

	/*margin (rem) */
		.u-ma { margin: auto; }
		.u-mn { margin: 0; }
		
		.u-mtn { margin-top: 0; }
		.u-mts { margin-top: .4rem; }
		.u-mtm { margin-top: 1.6rem; }
		.u-mtl { margin-top: 3.2rem; }
		.u-mtx { margin-top: 4.8rem; }
		
		.u-mbn { margin-bottom: 0; }
		.u-mbs { margin-bottom: .4rem; }
		.u-mbm { margin-bottom: 1.6rem; }
		.u-mbl { margin-bottom: 3.2rem; }
		.u-mbx { margin-bottom: 4.8rem; }
	
	/*margin (px) */
	
		.u-ma5 { margin:    5px !important;}
		.u-ma10 { margin:  10px !important;}
		.u-ma15 { margin:  12px !important;}
		.u-ma20 { margin:  20px !important;}
		.u-ma25 { margin:  25px !important;}
		.u-ma30 { margin:  30px !important;}
		.u-ma40 { margin:  40px !important;}
		.u-ma50 { margin:  50px !important;}
		
		.u-mt5 { margin-top:    5px !important;}
		.u-mr5 { margin-right:  5px !important;}
		.u-mb5 { margin-bottom: 5px !important;}
		.u-ml5 { margin-left:   5px !important;}
			 
		.u-mt10 { margin-top:    10px !important;}
		.u-mr10 { margin-right:  10px !important;}
		.u-mb10 { margin-bottom: 10px !important;}
		.u-ml10 { margin-left:   10px !important;}
		
		.u-mt15 { margin-top:    15px !important;}
		.u-mr15 { margin-right:  15px !important;}
		.u-mb15 { margin-bottom: 15px !important;}
		.u-ml15 { margin-left:   15px !important;}
		
		.u-mt20 { margin-top:    20px !important;}
		.u-mr20 { margin-right:  20px !important;}
		.u-mb20 { margin-bottom: 20px !important;}
		.u-ml20 { margin-left:   20px !important;}
		
		.u-mt25 { margin-top:    25px !important;}
		.u-mr25 { margin-right:  25px !important;}
		.u-mb25 { margin-bottom: 25px !important;}
		.u-ml25 { margin-left:   25px !important;}
		
		.u-mt30 { margin-top:    30px !important;}
		.u-mr30 { margin-right:  30px !important;}
		.u-mb30 { margin-bottom: 30px !important;}
		.u-ml30 { margin-left:   30px !important;}
		
		.u-mt40 { margin-top:    40px !important;}
		.u-mr40 { margin-right:  40px !important;}
		.u-mb40 { margin-bottom: 40px !important;}
		.u-ml40 { margin-left:   40px !important;}
		
		.u-mt50 { margin-top:    50px !important;}
		.u-mr50 { margin-right:  50px !important;}
		.u-mb50 { margin-bottom: 50px !important;}
		.u-ml50 { margin-left:   50px !important;}	
	
	
	/*padding (rem) */
		.u-pn { padding: 0; }
		
		.u-ptn { padding-top: 0; }
		.u-pts { padding-top: .4rem; }
		.u-ptm { padding-top: 1.6rem; }
		.u-ptl { padding-top: 3.2rem; }
		.u-ptx { padding-top: 4.8rem; }
		
		.u-pbn { padding-bottom: 0; }
		.u-pbs { padding-bottom: .4rem; }
		.u-pbm { padding-bottom: 1.6rem; }
		.u-pbl { padding-bottom: 3.2rem; }
		.u-pbx { padding-bottom: 4.8rem; }
	
	/*padding (px) */
	
		.u-pa5 { padding:    5px !important;}
		.u-pa10 { padding:  10px !important;}
		.u-pa15 { padding:  12px !important;}
		.u-pa20 { padding:  20px !important;}
		.u-pa25 { padding:  25px !important;}
		.u-pa30 { padding:  30px !important;}
		.u-pa40 { padding:  40px !important;}
		.u-pa50 { padding:  50px !important;}
		
		.u-pt5 { padding-top:      5px !important;}
		.u-pr5 { padding-right:    5px !important;}
		.u-pb5 { padding-bottom:   5px !important;}
		.u-pl5 { padding-left:     5px !important;}
		
		.u-pt10 { padding-top:    10px !important;}
		.u-pr10 { padding-right:  10px !important;}
		.u-pb10 { padding-bottom: 10px !important;}
		.u-pl10 { padding-left:   10px !important;}
		
		.u-pt15 { padding-top:    15px !important;}
		.u-pr15 { padding-right:  15px !important;}
		.u-pb15 { padding-bottom: 15px !important;}
		.u-pl15 { padding-left:   15px !important;}
		
		.u-pt20 { padding-top:    20px !important;}
		.u-pr20 { padding-right:  20px !important;}
		.u-pb20 { padding-bottom: 20px !important;}
		.u-pl20 { padding-left:   20px !important;}
		
		.u-pt25 { padding-top:    25px !important;}
		.u-pr25 { padding-right:  25px !important;}
		.u-pb25 { padding-bottom: 25px !important;}
		.u-pl25 { padding-left:   25px !important;}
		
		.u-pt30 { padding-top:    30px !important;}
		.u-pr30 { padding-right:  30px !important;}
		.u-pb30 { padding-bottom: 30px !important;}
		.u-pl30 { padding-left:   30px !important;}

		.u-pt40 { padding-top:    40px !important;}
		.u-pr40 { padding-right:  40px !important;}
		.u-pb40 { padding-bottom: 40px !important;}
		.u-pl40 { padding-left:   40px !important;}
		
		.u-pt50 { padding-top:    50px !important;}
		.u-pr50 { padding-right:  50px !important;}
		.u-pb50 { padding-bottom: 50px !important;}
		.u-pl50 { padding-left:   50px !important;}
	

/*	Border
===================================================== */

		.u-bDashed{ border-style:dashed; }
		.u-bDotted{ border-style:dotted; }


/*	Border radius
===================================================== */

	.c-br-4 {
		-webkit-border-radius: 4px;
			 -moz-border-radius: 4px;
						border-radius: 4px;
				-ms-border-radius: 4px;
	}
	
	.c-br-8 {
		-webkit-border-radius: 8px;
			 -moz-border-radius: 8px;
						border-radius: 8px;
				-ms-border-radius: 8px;
	}
	
	.c-br-12 {
		-webkit-border-radius: 12px;
			 -moz-border-radius: 12px;
						border-radius: 12px;
				-ms-border-radius: 12px;
	}
	
	.c-br-16 {
		-webkit-border-radius: 16px;
			 -moz-border-radius: 16px;
						border-radius: 16px;
				-ms-border-radius: 16px;
	}
	




/*	Table (Responsive)
===================================================== */
	
	.p-table-responsive {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		}
	
	@media only screen and (max-width: 40em) {
		
		.p-table-responsive {
			width: 100%;
			margin-bottom: 16.5px;
			overflow-y: hidden;
			-ms-overflow-style: -ms-autohiding-scrollbar;
			}
		
		.p-table-responsive th,
		.p-table-responsive td {
			white-space: nowrap;
			}
		
		}
	
	.u-touchGesture {
		text-align: center;
		color: #999;
		padding: 3%;
		margin-bottom: 12px;
		border: solid 1px #ddd;
		background-color: #000;/* #eee */
		}
		.u-touchGesture img {
			max-width: 80%;
			vertical-align: bottom;
			}