﻿@charset "utf-8";

/* //////////////// universal class ////////////////////////////////  */

.center, .tac { text-align:center; }
.tal { text-align:left; }
.tar { text-align:right; }
.cb {	clear: both; }
.cl  {	clear: left; }
.cr  { clear: right; }
.fr { float: right; }
.fl { float: left; }
.ib { display:inline-block;}
.vat {vertical-align:top;}

.posr {position:relative;}
.posa {position:absolute;}
.r-btm {position:absolute; right:1em; bottom:1em;}
.r-btm-1em {position:absolute; right:1em; bottom:1em;}
.l-btm {position:absolute; left:1em; bottom:1em;}
.l-btm-1em {position:absolute; left:1em; bottom:1em;}

/*** text  status ***/
.fix8 {font-size: 8px;}
.fix9 {font-size: 9px;}
.fix10 {font-size: 10px;}
.fix11 {font-size: 11px;}
.fix12 {font-size: 12px;}
.fix13 {font-size: 13px;}
.fix14 {font-size: 14px;}
.fix15 {font-size: 15px;}
.fix16 {font-size: 16px;}
.fix17 {font-size: 17px;}
.fix18 {font-size: 18px;}
.fix20 {font-size: 20px;}
.fix21 {font-size: 21px;}
.fix22 {font-size: 22px;}
.fix24 {font-size: 24px;}
.fix26 {font-size: 26px;}
.fix28 {font-size: 28px;}
.fix30 {font-size: 30px;}
.fix32 {font-size: 32px;}
.fix36 {font-size: 36px;}
.fix40 {font-size: 40px;}
.fix50 {font-size: 50px;}
.fix60 {font-size: 60px;}
.fix70 {font-size: 70px;}
.fix80 {font-size: 80px;}
.fix90 {font-size: 90px;}
.fix100 {font-size: 100px;}

.fs50p {font-size: 50%;}
.fs60p {font-size: 60%;}
.fs70p {font-size: 70%;}
.fs80p {font-size: 80%;}
.fs90p {font-size: 90%;}
.fs100p {font-size: 100%;}
.fs110p {font-size: 110%;}
.fs120p {font-size: 120%;}
.fs130p {font-size: 130%;}
.fs140p {font-size: 140%;}
.fs150p {font-size: 150%;}
.fs160p {font-size: 160%;}
.fs170p {font-size: 170%;}
.fs180p {font-size: 180%;}
.fs190p {font-size: 190%;}
.fs200p {font-size: 200%;}

.norm {font-weight: normal;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.oblique {font-style: oblique;}

.overline {text-decoration: overline;}
.underline {text-decoration: underline;}
.wline {text-decoration: overline underline;}
.blink {text-decoration: blink;}

.underdash {border-bottom: dotted 1px gray;}

.wh {color: #fff;}
.bk {color: #000;}
.bk2 {color: #222;}
.bk3 {color: #333;}
.bk4 {color: #444;}
.bk5 {color: #555;}
.bk6 {color: #666;}
.pink {color: pink;}
.hpink {color: hotpink;}
.red {color: red;}
.dred {color: crimson;}
.tred {color: #C04641;}
.ered {color: #965755;}
.sred {color:#E95513;}
.orange {color: orange;}
.yellow {color: yellow;}
.gold {color: gold;}
.green {color: green;}
.lgreen {color: limegreen;}
.msgreen {color: mediumseagreen;}
.ngreen {color:#009146;}
.egreen { color:#225A4B; }/**/
.edbrown { color:#534741; }/**/
.elbrown { color:#736357; }/**/
.teal {color: teal;}
.lime {color: lime;}
.silver {color: silver;}
.gray {color: gray;}
.dsgray {color: darkslategray;}
.cyan {color: cyan;}
.blue {color: blue;}
.dblue {color: darkblue;}
.dsblue {color: darkslateblue;}
.eblue {color: #476582;}


/*** background ***/
.bgw1 {	background:rgba(255,255,255,0.1);}
.bgw2 {	background:rgba(255,255,255,0.2);}
.bgw3 {	background:rgba(255,255,255,0.3);}
.bgw4 {	background:rgba(255,255,255,0.4);}
.bgw5 {	background:rgba(255,255,255,0.5);}
.bgw6 {	background:rgba(255,255,255,0.6);}
.bgw7 {	background:rgba(255,255,255,0.7);}
.bgw8 {	background:rgba(255,255,255,0.8);}
.bgw9 {	background:rgba(255,255,255,0.9);}
.bgw10 { background:rgba(255,255,255,1);}

.bgk0 {	background:rgba(0,0,0,0.05);}
.bgk1 {	background:rgba(0,0,0,0.1);}
.bgk2 {	background:rgba(0,0,0,0.2);}
.bgk3 {	background:rgba(0,0,0,0.3);}
.bgk4 {	background:rgba(0,0,0,0.4);}
.bgk5 {	background:rgba(0,0,0,0.5);}

.bgs0 {	background:rgba(68,22,10,0.05);}
.bgs1 {	background:rgba(68,22,10,0.1);}
.bgs2 {	background:rgba(68,22,10,0.2);}
.bgs3 {	background:rgba(68,22,10,0.3);}
.bgs4 {	background:rgba(68,22,10,0.4);}
.bgs5 {	background:rgba(68,22,10,0.5);}

/*** boxsha-border ***/
.bdr-0-1 {border:1px solid #000; box-shadow: 0 0 1px #000 inset;}
.bdr-1-1 {border:1px solid #111; box-shadow: 0 0 1px #111 inset;}
.bdr-2-1 {border:1px solid #222; box-shadow: 0 0 1px #222 inset;}
.bdr-3-1 {border:1px solid #333; box-shadow: 0 0 1px #333 inset;}
.bdr-4-1 {border:1px solid #444; box-shadow: 0 0 1px #444 inset;}
.bdr-8-1 {border:1px solid #888; box-shadow: 0 0 1px #888 inset;}
.bdr-a-1 {border:1px solid #aaa; box-shadow: 0 0 1px #aaa inset;}
.bdr-b-1 {border:1px solid #bbb; box-shadow: 0 0 1px #bbb inset;}
.bdr-d-1 {border:1px solid #ddd; box-shadow: 0 0 1px #ddd inset;}
.bdr-f-1 {border:1px solid #fff; box-shadow: 0 0 1px #fff inset;}
/**/
.bdr-0-2 {border:1px solid #000; box-shadow: 0 0 2px #000 inset;}
.bdr-1-2 {border:1px solid #111; box-shadow: 0 0 2px #111 inset;}
.bdr-2-2 {border:1px solid #222; box-shadow: 0 0 2px #222 inset;}
.bdr-3-2 {border:1px solid #333; box-shadow: 0 0 2px #333 inset;}
.bdr-4-2 {border:1px solid #444; box-shadow: 0 0 2px #444 inset;}
.bdr-8-2 {border:1px solid #888; box-shadow: 0 0 2px #888 inset;}
.bdr-a-2 {border:1px solid #aaa; box-shadow: 0 0 2px #aaa inset;}
.bdr-b-2 {border:1px solid #bbb; box-shadow: 0 0 2px #bbb inset;}
.bdr-d-2 {border:1px solid #ddd; box-shadow: 0 0 2px #ddd inset;}
.bdr-f-2 {border:1px solid #fff; box-shadow: 0 0 2px #fff inset;}

/*** border-radius ***/
.br2 {border-radius:2px;}
.br3 {border-radius:3px;}
.br4 {border-radius:4px;}
.br5 {border-radius:5px;}
.br6 {border-radius:6px;}
.br8 {border-radius:8px;}
.br10 {border-radius:10px;}
.br12 {border-radius:12px;}
.br16 {border-radius:16px;}
.br100 {border-radius:100%; }


/*** margin  ***/
.mg36 {margin:3px 6px;}
.mg48 {margin:4px 8px;} /*default*/
.mg510 {margin:5px 10px;}
.mg612 {margin:6px 12px;}
.mg816 {margin:8px 16px;}
.mg1020 {margin:10px 20px;}
.mg08 {margin:0 8px;}
.mg010 {margin:0 10px;}
.mg012 {margin:0 12px;}
.mg016 {margin:0 16px;}
.mg020 {margin:0 20px;}
.mg0 {margin:0px;}
.mg2 {margin:2px;}
.mg4 {margin:4px;}
.mg5 {margin:5px;}
.mg6 {margin:6px;}
.mg8 {margin:8px;}
.mg10 {margin:10px;}
.mg12 {margin:12px;}
.mg16 {margin:16px;}
.mg20 {margin:20px;}

/*** padding  ***/
.pd36 {padding:3px 6px;}
.pd48 {padding:4px 8px;} /*default*/
.pd510 {padding:5px 10px;}
.pd612 {padding:6px 12px;}
.pd816 {padding:8px 16px;}
.pd1020 {padding:10px 20px;}
.pd08 {padding:0 8px;}
.pd010 {padding:0 10px;}
.pd012 {padding:0 12px;}
.pd016 {padding:0 16px;}
.pd020 {padding:0 20px;}
.pd0 {padding:0px;}
.pd2 {padding:2px;}
.pd4 {padding:4px;}
.pd5 {padding:5px;}
.pd6 {padding:6px;}
.pd8 {padding:8px;}
.pd10 {padding:10px;}
.pd12 {padding:12px;}
.pd16 {padding:16px;}
.pd20 {padding:20px;}


/*** box-sizing ***/
.sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*** box-shadow ***/
.bxsha1 { box-shadow: 0 3px 5px rgba(20, 20, 20, 0.3);}
.bxsha2 { box-shadow: 0 3px 5px rgba(20, 20, 20, 0.8);}
.bxsha3 { box-shadow: 2px 3px 6px 2px rgba(20, 20, 20, 0.6);}



.wakupika, .wakuiro, .hajipika, .wakulir, .wakulig, .wakulib, .wakuliy {
	/*box-shadow: none;*/
	-webkit-transition: 0.36s linear all;
	-moz-transition: 0.36s linear all;
	transition: 0.36s linear all;
}
.wakupika:hover {
	box-shadow: 0 0 5px 5px rgba(255,255,255,0.7); 
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.hajipika:hover {
	box-shadow: 0 0 5px 5px rgba(255,255,255,0.7) inset; 
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.wakuiro:hover {
	box-shadow: 0 0 3px 1px rgba(0,55,200,0.8); 
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.wakulir:hover {
	box-shadow: 0 0 3px 1px #E3007F; 
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.wakulig:hover {
	box-shadow: 0 0 3px 1px #8DC21F; 
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.wakulib:hover {
	box-shadow: 0 0 3px 1px #009FE8;
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}
.wakuliy:hover {
	box-shadow: 0 0 3px 1px #E89F00;
	-webkit-transition: 0.18s linear all;
	-moz-transition: 0.18s linear all;
	transition: 0.18s linear all;
}

/* accent color effect */
.li-r {color:#E3007F; }
.li-y {color:#FEE6A5; }
.li-g {color:#8DC21F; }
.li-b {color:#009FE8; }
.bdrb-dot-li-r {border-bottom: 2px dotted #E3007F;}
.bdrb-dot-li-y {border-bottom: 2px dotted #EFA71E;/*#E8C080;*/}
.bdrb-dot-li-g {border-bottom: 2px dotted #7AC21F/*#8DC21F;*/}
.bdrb-dot-li-b {border-bottom: 2px dotted #009FE8;}
.bdrb-dot-gr8 {border-bottom: 2px dotted #888;}
.bdrb-dot-e-g {border-bottom: 2px dotted #225A4B; }
.bdrb-dot-d-bw {border-bottom: 2px dotted #534741; }
.bdrb-dot-li-bw{border-bottom: 2px dotted #736357; }
.bdrb-dot-e-b {border-bottom: 2px dotted #476582;}
.bdrb-dot-e-r {border-bottom: 2px dotted #965755;}
.bg-li-r {background: #FBE2D8;}
.bg-li-y {background: #FEE6A5;}
.bg-li-g {background: #DCDFCE;}
.bg-li-b {background: #C1DAE5;}