html,body {
    width: 100%;
    height: 100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.sp_none{display: block;}
.pc_none{display:none;}
a{ color:#666; text-decoration:underline;}
a:hover{color:#0D6EB8;}
	
@media(min-width:769px) {
	
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	z-index:99999;
}


/* nav*/
.nav_logo{
	display:none;
}

.sidebar-nav {
	position:absolute;
	right:0;
	width:100%;
	z-index:9998;
	
}

.sidebar-nav li{
	float: left;
	padding:24px 30px 8px 30px;
	vertical-align:bottom;
	list-style-type:none;
	font-weight:bold;
	border-bottom:0px solid #fff;
	transition: all ease 0.1s;
}

.sidebar-nav li:hover{
		border-bottom:3px solid #fff;
	}
	
	ul.sidebar-nav{
	color:#fff;
	}
.sidebar-nav li a{
	color:#fff !important;
}
	
.fixed	.sidebar-nav li{
	float: left;
	padding:24px 30px 8px 30px;
	vertical-align:bottom;
	list-style-type:none;
	font-weight:bold;
	border-bottom:0px solid #aaa;
	transition: all ease 0.1s;
}

.fixed .sidebar-nav li:hover{
		border-bottom:3px solid #888;
	}
	
	

.fixed ul.sidebar-nav{
	width:100%;
	position:fixed;
	height:56px;
	background: rgba(255,255,255,0.80);
	color:#888;
	z-index:99999;
	}
	
.fixed .sidebar-nav li a{
	color:#666 !important;
}
	
.fixed .nav_logo{
	float:left;
	display:block;
	margin-right:16px;
	margin-top:10px
}

.fixed .sidebar-nav li{
	float: left;
	width:auto;
	padding:16px 20px;
	vertical-align:bottom;
	list-style-type:none;
}

.sidebar-nav li a{
	color:#ffffff;
	text-decoration:none;
	font-size:16px;
}
}




/* Header */
#top{
	width:100%;
	height:100%;
	background-image: url(../img/bg_2.png);
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#0D6EB8;
}

#top img{
    position: absolute;
	top: -100%;
	left: -100%;
	right: -100%;
	bottom: -100%;
	margin: auto;
	width:80%;
	height:auto;
}
.top_sp{display:none; width:0; margin:0; height:0;}









/* Custom Button Styles */

.btn-dark { border-radius: 0; color: #fff; background-color: rgba(0,0,0,0.4);}
.btn-dark:hover,.btn-dark:focus,.btn-dark:active {
    color: #fff; background-color: rgba(0,0,0,0.7);
}

.btn-white { border-radius: 0; color: #0B6EB8; background-color:#fff; border:2px solid #0B6EB8;}
.btn-white:hover,.btn-white:focus,.btn-dark:active {
    color:  #fff; background-color: #337AB7; border:2px solid #337AB7;
}


.btn-light {
    border-radius: 0;
    color: #ccc;
    background-color: rgb(0,0,0,0.8);
}

.btn-light:hover,.btn-light:focus,.btn-light:active {
    color: #fff;
    background-color: rgba(0,0,0,0.2);
}

/* Custom Horizontal Rule */
hr.small {max-width: 100px;}

/* About */
.about {padding: 0px 0; background:rgba(255,255,255,0.1);}
.about h2{line-height:1.6em; margin-bottom:0px;}

/* Services */
.services {padding: 50px 0;}
.service-item {margin-bottom: 30px;}

/* Callout */
.callout {
    display: table;
    width: 100%;
    height: 400px;
    color: #fff;
    background: url(../img/callout.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/* Portfolio */

.portfolio {
    padding: 50px 0;
}

.portfolio-item {
    margin-bottom: 30px;
	position: relative;
}
.portfolio-item img{
	width:100%;
	display: block;
	text-align:center;
}
	
.portfolio-item .tbox{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

.img-portfolio {
    margin: 0 auto;
	width:100%;
}

.img-portfolio:hover {
    opacity: 0.8;
}

/* Call to Action */

.call-to-action {
    padding: 50px 0;
}

.call-to-action .btn {
    margin: 0px;
}

/* Map */
.map {height: 400px;}

/* Footer */
footer{padding:0 0 100px 0;}
.btn_officeyou{ padding:2px 4px; background: rgba(51,122,183,0.00); border:1px solid #666;  transition:all ease 0.2s; font-size:0.8em; color:#666; text-decoration:none;}
.btn_officeyou:hover{ background: rgba(51,122,183,1.00); text-decoration:none;  border:1px solid rgba(51,122,183,1.00); color:#fff;}




figure {
	position: relative;
	overflow: hidden;
	width:100%;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .1s;
	transition: .1s;
	opacity: 0;
}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	width: 500px;
	-webkit-transition: .05s;
	transition: .05s;
	color:white;
}
figcaption h3 {
	text-align:left;
	top: 10px;
	font-size:14px;
	color:white;
}
figcaption p {
	text-align:left;
	margin:0;
	padding:0;
	top:70px;
}
figure:hover figcaption {
	opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
	left:10%;
}
figure:hover figcaption h3 {
	-webkit-transition-delay: .05s;
	transition-delay: .05s;
}
figure:hover figcaption p {
	-webkit-transition-delay: .1s;
	transition-delay: .1s;
}




@media(max-width:768px) {
	.sp_none{ display:none;}
	.pc_none{ display:block;}
    .map { height: 75%; }
	.top_sp{
	display:block;
    position: absolute;
	top: -100%;
	left: -100%;
	right: -100%;
	bottom: -100%;
	margin: auto;
	width:80%;
	height:auto;
}
	.top_pc{display:none;}
	
	
/* Side Menu */
nav,nav .fixed{position:fixed !important; top:0; right:0;}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: rgba(100,100,100,1.00);
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li hr{
width:90%;
color:#666;
border-color:#777;
height:1px;
margin:0 auto;
padding:0;
}


.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
	font-size:1.2em;
	padding:8px;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-toggle{
    z-index: 990;
	display:block;
	position:fixed;
	top:0px;
	right:0px;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}

}