/*
type.css

(c) 2014 Makoto Kamimura (typgestalt.com)
Contact: info@typgestalt.com
*/


/* webfont */




/* Text Alignment */
.centerd {
	text-align: center;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.ragged-right{
	text-align: left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.ragged-left{
	text-align: right;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.justify {
	-ms-text-justify: inter-ideograph;
	text-justify: inter-ideograph;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

.nowrap {
	white-space: nowrap;
}



/* Text Transformation */
.lowercase{
	text-transform: lowercase;
}

.uppercase{
	text-transform: uppercase;
}

.capitalize{
	text-transform: capitalize;
}



/* SP or PC Only */
.sponly {display:none;}
.pconly {display:inline-block;}

@media screen and (max-width: 640px) {
	.sponly {display:inline-block;}
	.pconly {display:none;}
}



/* nowrap */
.nowrap{white-space: nowrap;}
.inline{display: inline-block;}



/* Table */
.table{display:table;}
.table1{display:table-cell;}
.table2{display:table-cell;}
.table3{display:table-cell;}
.table4{display:table-cell;}
.table5{display:table-cell;}
.table6{display:table-cell;}
.table7{display:table-cell;}
.table8{display:table-cell;}
.table9{display:table-cell;}



/* Width */
.wid10per {width:10%;}
.wid15per {width:15%;}
.wid20per {width:20%;}
.wid25per {width:25%;}
.wid30per {width:30%;}
.wid35per {width:35%;}
.wid40per {width:40%;}
.wid45per {width:45%;}
.wid50per {width:50%;}
.wid55per {width:55%;}
.wid60per {width:60%;}
.wid65per {width:65%;}
.wid70per {width:70%;}
.wid75per {width:75%;}
.wid80per {width:80%;}
.wid85per {width:85%;}
.wid90per {width:90%;}
.wid95per {width:95%;}



/* Type Options */
.anti-off {
	-webkit-font-smoothing: none;
	-moz-font-smoothing: none;
	-ms-font-smoothing: none;
	-o-font-smoothing: none;
	font-smoothing: none;
	letter-spacing: 0;
}

.sans {
	font-family: "Verdana", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
.mono {
  font-family: "Courier New", monospace;
}

.italic, em {
	font-style: italic;
}

.bold, strong, b {
	font-weight:600;
}

.mark, mark {
	padding: 0.1em 0.3em;
	background-color: #ccc;
}

.weight100{font-weight:100;}
.weight200{font-weight:200;}
.weight300{font-weight:300;}
.weight400{font-weight:400;}
.weight500{font-weight:500;}
.weight600{font-weight:600;}
.weight700{font-weight:700;}
.weight800{font-weight:800;}
.weight900{font-weight:900;}

/* Kerning */
.kern-200{letter-spacing: -0.200em;}
.kern-195{letter-spacing: -0.195em;}
.kern-190{letter-spacing: -0.190em;}
.kern-185{letter-spacing: -0.185em;}
.kern-180{letter-spacing: -0.180em;}
.kern-175{letter-spacing: -0.175em;}
.kern-170{letter-spacing: -0.170em;}
.kern-165{letter-spacing: -0.165em;}
.kern-160{letter-spacing: -0.160em;}
.kern-155{letter-spacing: -0.155em;}
.kern-150{letter-spacing: -0.150em;}
.kern-145{letter-spacing: -0.145em;}
.kern-140{letter-spacing: -0.140em;}
.kern-135{letter-spacing: -0.135em;}
.kern-130{letter-spacing: -0.130em;}
.kern-125{letter-spacing: -0.125em;}
.kern-120{letter-spacing: -0.120em;}
.kern-115{letter-spacing: -0.115em;}
.kern-110{letter-spacing: -0.110em;}
.kern-105{letter-spacing: -0.105em;}
.kern-100{letter-spacing: -0.10em;}
.kern-95{letter-spacing: -0.095em;}
.kern-90{letter-spacing: -0.090em;}
.kern-85{letter-spacing: -0.085em;}
.kern-80{letter-spacing: -0.080em;}
.kern-75{letter-spacing: -0.075em;}
.kern-70{letter-spacing: -0.070em;}
.kern-65{letter-spacing: -0.065em;}
.kern-60{letter-spacing: -0.060em;}
.kern-55{letter-spacing: -0.055em;}
.kern-50{letter-spacing: -0.050em;}
.kern-45{letter-spacing: -0.045em;}
.kern-40{letter-spacing: -0.040em;}
.kern-35{letter-spacing: -0.035em;}
.kern-30{letter-spacing: -0.030em;}
.kern-25{letter-spacing: -0.025em;}
.kern-20{letter-spacing: -0.020em;}
.kern-15{letter-spacing: -0.015em;}
.kern-10{letter-spacing: -0.010em;}
.kern-5{letter-spacing: -0.005em;}
.kern0{letter-spacing: 0;}
.kern5{letter-spacing: 0.005em;}
.kern10{letter-spacing: 0.010em;}
.kern15{letter-spacing: 0.015em;}
.kern20{letter-spacing: 0.020em;}
.kern25{letter-spacing: 0.025em;}
.kern30{letter-spacing: 0.030em;}
.kern35{letter-spacing: 0.035em;}
.kern40{letter-spacing: 0.040em;}
.kern45{letter-spacing: 0.045em;}
.kern50{letter-spacing: 0.050em;}
.kern55{letter-spacing: 0.055em;}
.kern60{letter-spacing: 0.060em;}
.kern65{letter-spacing: 0.065em;}
.kern70{letter-spacing: 0.070em;}
.kern75{letter-spacing: 0.075em;}
.kern80{letter-spacing: 0.080em;}
.kern85{letter-spacing: 0.085em;}
.kern90{letter-spacing: 0.090em;}
.kern95{letter-spacing: 0.095em;}
.kern100{letter-spacing: 0.100em;}
.kern105{letter-spacing: 0.105em;}
.kern110{letter-spacing: 0.110em;}
.kern115{letter-spacing: 0.115em;}
.kern120{letter-spacing: 0.120em;}
.kern125{letter-spacing: 0.125em;}
.kern130{letter-spacing: 0.130em;}
.kern135{letter-spacing: 0.135em;}
.kern140{letter-spacing: 0.140em;}
.kern145{letter-spacing: 0.145em;}
.kern150{letter-spacing: 0.150em;}
.kern155{letter-spacing: 0.155em;}
.kern160{letter-spacing: 0.160em;}
.kern165{letter-spacing: 0.165em;}
.kern170{letter-spacing: 0.170em;}
.kern175{letter-spacing: 0.175em;}
.kern180{letter-spacing: 0.180em;}
.kern185{letter-spacing: 0.185em;}
.kern190{letter-spacing: 0.190em;}
.kern195{letter-spacing: 0.195em;}
.kern200{letter-spacing: 0.200em;}

.up50 {vertical-align:0.5em;}
.up45 {vertical-align:0.45em;}
.up40 {vertical-align:0.4em;}
.up35 {vertical-align:0.35em;}
.up30 {vertical-align:0.3em;}
.up25 {vertical-align:0.25em;}
.up20 {vertical-align:0.2em;}
.up15 {vertical-align:0.15em;}
.up10 {vertical-align:0.1em;}
.up5 {vertical-align:0.05em;}

.down50 {vertical-align:-0.5em;}
.down45 {vertical-align:-0.45em;}
.down40 {vertical-align:-0.4em;}
.down35 {vertical-align:-0.35em;}
.down30 {vertical-align:-0.3em;}
.down25 {vertical-align:-0.25em;}
.down20 {vertical-align:-0.2em;}
.down15 {vertical-align:-0.15em;}
.down10 {vertical-align:-0.1em;}
.down5 {vertical-align:-0.05em;}



/* Size */
.line0 {line-height: 1.0em;}
.line10 {line-height: 1.1em;}
.line20 {line-height: 1.2em;}
.line30 {line-height: 1.3em;}
.line40 {line-height: 1.4em;}
.line50 {line-height: 1.5em;}
.line60 {line-height: 1.6em;}
.line70 {line-height: 1.7em;}
.line80 {line-height: 1.8em;}
.line90 {line-height: 1.9em;}
.line100 {line-height: 2.0em;}



/* Size */
.size-90{font-size: 0.1em;}
.size-80{font-size: 0.2em;}
.size-70{font-size: 0.3em;}
.size-60{font-size: 0.4em;}
.size-50{font-size: 0.5em;}
.size-40{font-size: 0.6em;}
.size-30{font-size: 0.7em;}
.size-20{font-size: 0.8em;}
.size-10{font-size: 0.9em;}
.size10{font-size: 1.1em;}
.size20{font-size: 1.2em;}
.size30{font-size: 1.3em;}
.size40{font-size: 1.4em;}
.size50{font-size: 1.5em;}
.size60{font-size: 1.6em;}
.size70{font-size: 1.7em;}
.size80{font-size: 1.8em;}
.size90{font-size: 1.9em;}
.size100{font-size: 2.0em;}
.size110{font-size: 2.1em;}
.size120{font-size: 2.2em;}
.size130{font-size: 2.3em;}
.size140{font-size: 2.4em;}
.size150{font-size: 2.5em;}
.size160{font-size: 2.6em;}
.size170{font-size: 2.7em;}
.size180{font-size: 2.8em;}
.size190{font-size: 2.9em;}
.size200{font-size: 3.0em;}



/* Color */
.white{color:#fff;}
.gray10{color:#eee;}
.gray20{color:#ddd;}
.gray30{color:#ccc;}
.gray40{color:#aaa;}
.gray50{color:#999;}
.gray60{color:#777;}
.gray70{color:#555;}
.gray80{color:#333;}
.gray90{color:#222;}
.gray100{color:#111;}



/* Opacity */
.opacity0{opacity: 0;}
.opacity10{opacity: 0.1;}
.opacity20{opacity: 0.2;}
.opacity30{opacity: 0.3;}
.opacity40{opacity: 0.4;}
.opacity50{opacity: 0.5;}
.opacity60{opacity: 0.6;}
.opacity70{opacity: 0.7;}
.opacity80{opacity: 0.8;}
.opacity90{opacity: 0.9;}
.opacity100{opacity: 1.0;}



/* Vignette */
hr {
	border:solid #888;
	border-width:1px 0 0 0;
	margin: 1.4em 0;
}



/* Indentation */
.indent1:before {content:"\2003";}
.indent2:before {content:"\2003\2003";}
.indent3:before {content:"\2003\2003\2003";}



/* Space */
.en-space:after {
	font-family: vignette;
	content:"\2002";
}
.em-space:after {
	font-family: vignette;
	content:"\2003";
}
.figure-space:after {
	font-family: vignette;
	content:"\2007";
}
.punctuation-space:after {
	font-family: vignette;
	content:"\2008";
}
.thin-space:after {
	font-family: vignette;
	content:"\2009";
}
.hair-space:after {
	font-family: vignette;
	content:"\200A";
}



/* Social Icon */
.vignette-facebook:before {
	font-family: vignette;
	content:"\f001";
}
.vignette-twitter:before {
	font-family: vignette;
	content:"\f002";
}
.vignette-google:before {
	font-family: vignette;
	content:"\f003";
}
.vignette-tumblr:before {
	font-family: vignette;
	content:"\f004";
}
.vignette-instgram:before {
	font-family: vignette;
	content:"\f005";
}
.vignette-pinterest:before {
	font-family: vignette;
	content:"\f006";
}
.vignette-rss:before {
	font-family: vignette;
	content:"\f007";
}
.vignette-rss2:before {
	font-family: vignette;
	content:"\f008";
}



/* Button */
button {
	display: inline-block;
	width: 100%;
	height: 3.4em;
	margin: 1em 0;
	font-size: 1.3rem;
	color: #eee;
	background-color: #222;
	border: 1px solid transparent;
	border-radius: 0.3em;
	outline: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}

button:hover {
	background-color: #900;
	-webkit-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	transition: all 2s cubic-bezier(0,0.9,0.3,1);
}

button:active {
	background-color: #a00;
	-webkit-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
}



/* form */
form input[type="email"],
form input[type="text"]{
	font-family: "Verdana", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	display: block;
	width: 100%;
	height: 3.2em;
	padding: 0 0.8em;
	margin: 0.4em 0 1em;
	font-size: 1.3rem;
	color: #444;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 0.3em;
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
}

form input[type="email"]:focus,
form input[type="text"]:focus,
form textarea:focus{
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
}

form textarea{
	font-family: "Verdana", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	display: block;
	width: 100%;
	height: 16em;
	padding: 0.8em 0.8em;
	margin: 0.4em 0 1em;
	font-size: 1.3rem;
	color: #444;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 0.3em;
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
}

button[type="submit"] {
	display: inline-block;
	width: 100%;
	height: 3.4em;
	margin: 1em 0;
	font-size: 1.3rem;
	color: #eee;
	background-color: #222;
	border: 1px solid transparent;
	border-radius: 0.3em;
	outline: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}

button[type="submit"]:hover {
	background-color: #900;
	-webkit-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: all 2s cubic-bezier(0,0.9,0.3,1);
	transition: all 2s cubic-bezier(0,0.9,0.3,1);
}

button[type="submit"]:active {
	background-color: #a00;
	-webkit-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-moz-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-ms-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	-o-transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
	transition: all 0.2s cubic-bezier(0,0.9,0.3,1);
}

@media only screen and (max-width: 640px) {
	form input[type="email"],
	form input[type="text"]{
		height: 4em;
	}
	form textarea{
		height: 18em;
	}
	button[type="submit"] {
		height: 4.2em;
	}
}