@charset "UTF-8";

/*---------------------------------------
			bootstrap
---------------------------------------*/
.navbar-default {
     background-color: transparent; 
     border-color: currentColor;
}
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 7px 10px 5px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: #777;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar-default .navbar-toggle {
    border-color: #777;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #777;
}
.container-fluid {
    padding-right: 45px;
    padding-left: 45px;
    margin-right: auto;
    margin-left: auto;
}
@media only screen and (max-width: 767px) {
	.collapse,.navbar-collapse{
	position: absolute;
	z-index: 999;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    background: rgba(255,255,255,0.8);
    width: 100%;
	}
	.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	}
}
/*---------------------------------------
			共通
---------------------------------------*/
html {
  min-height: 100%;
  position: relative;
}
body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	background:#eee;
	color:#444;
	text-align: center;
	margin-bottom: 47px;
}
p{
	color: #444;
	line-height:18px;
	padding: 5px;
}
a{
	color: #444;
	text-decoration: none;
}
a:hover{
	opacity: 0.7;
}
h1{
	color: #444;
	font-size: 24px;
	font-weight: bold;
}
.navbar-brand h1{
	font-size: 30px;
	margin: 0;
	padding: 0;
	color: #777;
}
h2{
	color: #444;
	font-size: 22px;
}
img{
	vertical-align: bottom;
}
/*#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#contents {
    padding-bottom: 47px;
}*/
.title{
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #777;
	padding: 0 0 30px 0;
}
.main{
	background: rgba(255,255,255,0.4);
	border-radius: 15px;
	width: 60%;
	margin: 0 auto;
	padding: 15px;
	height: auto;
	text-align: left;
}
@media only screen and (max-width: 1170px){
	.main{
	width: 80%;
	}
}
@media only screen and (max-width: 767px){
	.main{
	width: 90%;
	background: rgba(255,255,255,0.8);
	}
}

/*---------------------------------------
			トップへ戻るボタン
---------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 60px;
    height: 60px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 30px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}
/*---------------------------------------
			ヘッダー
---------------------------------------*/
header .menu-trigger,
header .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
header .menu-trigger {
	position: relative;
	width: 20px;
	height: 19px;
}
header .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	border-radius: 4px;
}
header .menu-trigger span:nth-of-type(1) {
	top: 0;
}
header .menu-trigger span:nth-of-type(2) {
	top: 8px;
}
header .menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
header .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
header .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
header .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}




/*---------------------------------------
			フッター
---------------------------------------*/
footer{
	font-size: 12px;
	padding: 15px 0;
	color: #000;
	position: absolute;
    bottom: 0;
    width: 100%;
    height: 47px;
    /*z-index: 10000;*/
}
/*---------------------------------------
			index.php
---------------------------------------*/
body.index{
	width: 100%;
	height: 100%;
	/*background: url(../img/top/slide-1.jpg) center center / cover no-repeat fixed;*/
}

body.index .navbar-default .navbar-nav>li>a {
    color: #fff;
}
body.index .navbar-brand h1{
	font-size: 30px;
	margin: 0;
	padding: 0;
	color: #fff;
	text-shadow: 1px 1px 0 #000,
             -1px 1px 0 #000,
             1px -1px 0 #000,
             -1px -1px 0 #000;
}
body.index footer{
	color: #fff;
}
@media only screen and (max-width: 767px){
	body.index .navbar-default .navbar-nav>li>a {
    color: #777;
	}
}
/*---------------------------------------
			news.php
---------------------------------------*/
body.news{
	width: 100%;
	height: 100%;
}
body.news .main{
	margin-bottom: 60px;
}
.inner{
	padding: 15px;
	border-bottom: 1px solid #ddd;
}
.inner:last-child{
	border-bottom: 0;
}
body.news .main table{
	width: 100%;
}
body.news .main table a{
	border-bottom: 1px solid;
}
body.news .main table th{
	width: 40%;
	margin: 1em 0;
	/*padding-top: 1em;*/
	float: left;
	/*min-height: 100px;*/
}
body.news .main table th img{
	max-height: 200px;
	max-width: 100%;
}
body.news .main table td{
	width: 60%;
	float: right;
}
body.news .main table tr p{
	padding: 15px;
}
@media only screen and (max-width: 767px){
	body.news .main table th{
	width: 100%;
	}
	body.news .main table th img{
	max-height: 200px;
	max-width: 100%;
	}
	body.news .main table td{
	width: 100%;
	}
	body.news .main table tr p{
	text-align: left;
	}
}

/*---------------------------------------
			works.php
---------------------------------------*/
body.works{
	width: 100%;
	height: 100%;
}
body.works .main{
	margin-bottom: 60px;
}
body.works .main p{
	font-size: 20px;
	margin: 40px;
}
@media only screen and (max-width: 767px){
	body.works .main p{
	margin: 12px;
}
}

/*---------------------------------------
			works.php/子要素
---------------------------------------*/
body.works_child{
	background: #222;
}
body.works_child .title{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #777;
	padding: 15px 0 5px 0;
	background: #222;
}
body.works_child .photo_xs{
	margin-bottom: 35px;
}
body.works_child .photo_xs img{
	width: 90%;
	height: auto;
	margin-bottom: 15px;
}

/*---------------------------------------
			biography.php
---------------------------------------*/
body.biography{
	width: 100%;
	height: 100%;
}
body.biography .main{
	margin-bottom: 60px;
}
@media only screen and (max-width: 767px){
	body.biography h2{
		text-align: center;
	}
}
body.biography .main table{
	width: 100%;
}
body.biography .main table th{
	width: 40%;
	float: right;
}
body.biography .main table th img{
	max-height: 460px;
	max-width: 100%;
}
body.biography .main table td{
	width: 60%;
	float: left;
}
body.biography .main table tr p{
	padding: 15px;
}
body.biography .main table tr p.p_title{
	padding-top: 30px;
	padding-bottom: 0;
}
@media only screen and (max-width: 767px){
	body.biography .main{
	padding: 0;
	}
	body.biography .main table th{
	width: 100%;
	}
	body.biography .main table th img{
	max-height: 200px;
	max-width: 100%;
	}
	body.biography .main table td{
	width: 100%;
	}
	body.biography .main table tr p{
	text-align: center;
	}
}
/*---------------------------------------
			contact.php
---------------------------------------*/
body.contact{
	width: 100%;
	height: 100%;
}
body.contact p.c_top{
	margin-bottom: 1em;
}
body.contact .main form label{
	margin-bottom: 5px;
}
body.contact .main form b{
	background: red;
	color: #fff;
	margin-left: 1em;
	font-size: 12px;
	padding: 2px;
}
body.contact .main form button.btn{
	padding: 0.5em 3em;
	background: #000;
	color: #fff;
}
/*---------------------------------------
			confirm.php
---------------------------------------*/
body.confirm{
	width: 100%;
	height: 100%;
}
body.confirm .main h1{
	margin-bottom: 15px;
}
body.confirm .main form label{
	margin-bottom: 5px;
}
body.confirm .main form button.btn{
	margin: 1em;
	padding: 0.5em 3em;
	background: #000;
	color: #fff;
	float: right;
}
body.confirm .main form input.btn{
	margin: 1em;
	padding: 0.5em 3em;
	background: #fff;
	color: #000;
	float: left;
}
body.confirm .main form label{
	background: #eee;

}
@media only screen and (max-width: 767px){
	body.confirm .main form button.btn{
	margin: 0;
	padding: 0.5em 2em;
}
body.confirm .main form input.btn{
	margin: 0;
	padding: 0.5em 2em;
}
}
/*---------------------------------------
			thanks.php
---------------------------------------*/
body.thanks{
	width: 100%;
	height: 100%;
}
body.thanks .main button.btn{
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 0.5em 3em;
	background: #000;
	color: #fff;
}
body.thanks .main h1{
	margin-bottom: 15px;
}