/* General Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


body {
	font-family: 'Lato', Calibri, Arial, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #483F33;
	background:url(../img/bg.png) repeat;
	-webkit-text-size-adjust:100%;
}

.fb_ icon {
	position:absolute;
	bottom:34px;
	left:0;
	z-index:2000;
	}

#fb_icon {
	display:block;
	position:relative;
	position:absolute;
	top:10%;
	left:-55px;
	z-index:2000;
	overflow:hidden;
}

#f b_icon img {
	position:absolute;
}

# fb_icon {
    z-index: 99;
  	cursor: pointer;
  	position: fixed;
 	 top: 40%;
  	right: -140px;
  	width: 180px;
	}

.la zy {
	margin-right:;
	}

.navli a {
	color: #333;
	text-decoration: none;
}

.navli a:hover {
	color: #fff;
}

.section a {
	color:#483F33;
	text-decoration:none;
	}

.section a:hover {
	color:#7A6B56;
	}

h2 {
	font-family:'Lato', Calibri, Arial, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.3em;
	font-weight:normal;
	color:#f0f0f0;
	margin:0;
	}

h3 {
	font-family:'Lato', Calibri, Arial, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1.2em;
	font-weight:normal;
	color: #483F33;
	margin:0 10px -5px 17px;
	}

h4 {
	font-family:'Lato', Calibri, Arial, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:1em;
	font-weight:normal;
	color: #483F33;
	}

.container {
	position:relative;
	z-index:0;
	}

.wrapper {
	position:relative;
	z-index:5;
	padding-bottom:100px;
	}

.main {
	max-width: 1000px;
	overflow:hidden;
	min-height: 40em;
	position:relative;
	z-index:10;
	}

.slide_box {
	}

.header {
	position:relative;
	z-index:10;
	}

.titleset {
	position:relative;
	z-index:15;
	}
.ttlimg_sub {
	position:relative;
	margin-top:-16px;
	z-index:16;
	}

.logomark_sub {
	position:relative;
	margin-top:14px;
	z-index:17;
	}

.main,
.container > header {
	width: 100%;
	margin: -10px auto 0;
	padding: 10px;
}

.nav {
	position:relative;
	z-index:20;
	}

.section {
	position:relative;
	z-index:20;
	}

.container > header {
	text-align: center;
	font-size: 16px;
	padding: 4em 0 0;
	background: rgba(0,0,0,0.01);
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	color: #ceccc6;
	padding: 0 0 0.6em 0.1em;
}

/* Header Style */

.container > header {
	background-color:#FFF;
	}

.container > header img {
	margin-top:-65px;
	}

.codrops-top {
	background: #fff;
	background: rgba(220, 220, 220, 0.4);
	text-transform: uppercase;
	position: fixed;
	top:0;
	width: 100%;
	font-size: 0.7em;
	line-height: 2.2;
	z-index:1000;
}

.centering {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #888;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.9);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
	content: "\e001";
}
.codrops-icon-prev:before {
	content: "\e004";
}
.codrops-icon-archive:before {
	content: "\e002";
}
.codrops-icon-next:before {
	content: "\e000";
}
.codrops-icon-about:before {
	content: "\e003";
}

.bg {
	position:fixed;
	bottom:0;
	z-index:0;
	}

.footer {
	background: #fff;
	background: rgba(220, 220, 220, 0.6);
	position: fixed;
	bottom:0;
	width: 100%;
	z-index:1000;
	max-height:40px;
	text-align:center;
	
	padding:0;
}

.footer img {
	margin:-6px 5px 0 0;
	}
.footer p {
	baseline:middle;
	margin-left:auto;
	margin-right:auto;
	font-size: 0.7em;
	line-height: 2.2;
	vertical-align:middle;
	}

.footer table {
	margin-left:auto;
	margin-right:auto;
	}


@media screen and (max-width: 25em) { 
	.codrops-icon span {
		display: none;
	}
	.container > header {
		font-size: 75%;
	}
}

/* alignment */

.fl {
	float:left;
	}

.fl_info {
	float:left;
	margin-left:10px;
	}
	
.fr {
	float:right;
	}

.fr_info {
	float:right;
	margin-right:10px;
	}

/* Background color selection */

.mbg_pink {
	background: rgba(236,148,190,0.2);
	}

.mbg_yellow {
	background: rgba(255,191,34,0.2);
	}

.mbg_green {
	background: rgba(176,210,95,0.2);
	}

.mbg_blue {
	background: rgba(87,133,201,0.15);
	}

.mbg_brown {
	background: rgba(171,74,32,0.1);
	}

.atclbg_white {
	background:rgba(255,255,255,0.6);
	}

.atclbg_grey {
	background:rgba(150,153,152,0.2);
	}

.atclbg_pink {
	background:rgba(242,98,132,0.15);
	}

.atclbg_yellow {
	background:rgba(255,214,153,0.4);
	}

.atclbg_green {
	background:rgba(60,179,108,0.2);
	}

.atclbg_blue {
	background:rgba(28,110,205,0.15);
	}

.atclbg_brown {
	background:rgba(162,85,60,0.15);
	}