@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	background-color: #cccccc;
	color: #333333;
	font-size: 15px;
	line-height: 2;
}

/* ブラウザ規定のスタイルを解除 */
p,h1,h2,h3,h4,h5,h6 {
	margin-top: 0;
}

/* 全画像を下端揃え */
img {
	vertical-align: bottom;
}

/* リスト項目の余白を無くす */
ul {
	margin: 0;
	padding: 0;
}

/* リンクに関するスタイル */
a {
	color: #3583aa;
	text-decoration: none;
}

/* 訪問済み */
a:visited {
	color: #788d98;
}

/* マウスオーバー */
a:hover {
	text-decoration: none;
}

/* ヘッダー */
header {
	/*width: 960px;*/
	height: 50px;
	margin: 0 auto;
}

/* index ロゴ */
.logo {
	float: left;
	margin: 20px 20px 0 10%;
	color: #ffffff;
	font-size: 40px;
	font-family: 'Poller One', cursive;
}

.logo a {
	color: #ffffff;
}

/* contact ロゴ */
#contact .logo {
	float: left;
	margin: 20px 20px 0 10px;
	color: #ffffff;
	font-size: 40px;
	font-family: 'Poller One', cursive;
}

.logo a {
	color: #ffffff;
}

/* index ナビ */
.global-nav {
	float: right;
	margin: 30px 10% 0 0;
}

.global-nav li {
	float: left;
	margin: 0 20px;
	font-size: 20px;
	list-style: none;
	font-family: 'Bitter', serif;
}

.global-nav li a {
	color: #ffffff;
}

.global-nav li a:hover {
  color: #DCDCDC;
	border-bottom: 2px solid #DCDCDC;
	padding-bottom: 3px;
	text-decoration: none;
}

/* contact ナビ */
#contact .global-nav {
	float: right;
	margin: 30px 10px 0 0;
}

#contact .global-nav li {
	float: left;
	margin: 0 20px;
	font-size: 20px;
	list-style: none;
	font-family: 'Bitter', serif;
}

#contact .global-nav li a {
	color: #ffffff;
}

#contact .global-nav li a:hover {
  color: #DCDCDC;
	border-bottom: 2px solid #DCDCDC;
	padding-bottom: 3px;
	text-decoration: none;
}



/* コンテンツエリア */
#wrap {
	clear: both;
	background-color: #ffffff;
	margin-top: 220px;
	padding: 35px 0;
}

/* indexのみのコンテンツエリア */
#index #wrap {
	background-color: transparent;
	margin-top: 0;
	padding: 0;
	}

#contactend #wrap {
	clear: both;
	background-color: #ffffff;
	margin-top: 100px;
	padding: 35px 0 300px 0;
}

.content {
	width: 960px;
	margin: 0 auto 100px auto;
}


#index h1 {
	font-size: 100px;
	line-height: 1.2;
	text-align: center;
	color: #ffffff;
	font-family: 'Bitter', serif; 
	margin: 200px 0 30px 0;
	border: none;
	}

#jobs {
  font-size: 23px;
  display: block;
  color: #ffffff;
  margin: 0 150px 30px 0;
  text-align: right;
  font-family: 'Rock Salt', cursive;
}

#index .content {
	margin-top: 150px;
}

#index p {
	font-size: 16px;
	color: #ffffff;
	text-align: center;
}

.btn a {
	background-color: #009cd3;
	color: #ffffff;
	font-size: 20px;
	font-family: 'Bitter', serif;
	width: 185px;
	display: block;
	text-align: center;
	line-height: 50px;
	margin: 80px auto 0 auto;
	border-radius: 5px;
	border: 3px solid #009cd3;
}

.btn a:hover {
	text-decoration: none;
	background-color: #ffffff;
	color: #009cd3;
}

#link {
  float: right;
  margin: 20px 10% 20px 0;
  font-size: 20px;
  color: #ffffff;
  display: block;
}

#link li {
  list-style: none;
  text-align: right;
}

#link a {
  color: #ffffff;
}

#link a:hover {
  text-decoration: none;
  color: #cccccc;
}

#indexvideo {
  float: left;
  margin: 30px 0px 20px 5%;
  color: #ffffff;
}

#indexvideo2 {
  float: left;
  margin: 30px 0px 20px 5%;
  color: #ffffff;
}

.link {
  float: right;
  margin: 20px 10% 20px 0;
  font-size: 20px;
  color: #ffffff;
  display: block;
}

.link li {
  list-style: none;
  text-align: right;
}

.link a {
  color: #ffffff;
}

.link a:hover {
  text-decoration: none;
  color: #cccccc;
}

/* フッター */
footer {
  clear: both;
	text-align: center;
	color: #ffffff;
	padding: 20px 0;
	background-color: #767671;
}

#index footer {
	width: 960px;
	margin: 90px auto 5px auto;
	text-align: center;
	color: #ffffff;
	background-color: transparent;
}

footer small {
  font-size: 18px;
}

footer img {
  float: right;
  margin-right: 8%;
}


/*
#index {
	background-image: url("../images/bg-index.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
}
*/

/* 背景動画 */
#bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url('video/renganet_000.gif') no-repeat;
background-size: cover;
}


/* Aboutに関するスタイル */
#about {
	background-image: url("../images/bg-about.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

/* About メインエリアに関するスタイル */

.main-center {
	width: 940px;
	margin: 0 auto;
}

h1 {
	font-family: 'Bitter', serif;
	font-size: 36px;
	border-bottom: 1px solid #cccccc;
}

h2 {
	font-family: 'Bitter', serif;
	font-size: 24px;
}

.icon:before {
	content:"";
	padding-right: 10px;
	border-left: 7px solid #9cb4a4;
}

#about .profile-txt {
	width: 540px;
	float: left;
}

#about .profile-txt span {
	font-weight: bold;
}

#about .profile-image {
	float: right;
}

.clearfix:after {
	content:"";
	display: block;
	clear: both;
}

section { 
	margin-bottom: 35px;
}

/* contact 表エリアに関するスタイル */

.career th {
	width: 240px;
	background-color: #f0f0f0;
	padding: 12px 0;
	border: 1px solid #cccccc;
}

.career td {
	width: 660px;
	padding: 12px 0 12px 40px;
	border: 1px solid #cccccc;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
  margin-bottom: 100px;
}

.career table img {
  margin-right: 20px;
}

.list th {
	background-color: #f0f0f0;
	padding: 12px 0;
	border: 1px solid #cccccc;
}

.list td {
	padding: 12px 0 12px 40px;
	border: 1px solid #cccccc;
}



/* Portfolioに関するスタイル */
#portfolio {
	background-image: url("../images/bg-portfolio.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

.main {
	width: 700px;
	margin: 0 10px;
	float: left;
}

.sidebar {
	width: 200px;
	margin: 0 10px 0 30px;
	float: right;
	font-family: 'Bitter', serif;
}

.sidebar h2 {
	margin-bottom: 10px;
	border-bottom: 1px solid #cccccc;
}

.sidebar ul {
	font-size: 16px;
	margin-left: 30px;
}

.sidebar ul a {
	color: #333333;
}

.sidebar ul a:hover {
	opacity: 0.5;
}

a img:hover {
	opacity: 0.8;
}

/* Photographに関するスタイル */
#photograph {
	background-image: url("../images/bg-photograph.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

#photograph .photograph-list li {
	float: left;
	list-style: none;
	margin: 0 20px 20px 0;
}

#photograph .photograph-list li:nth-child(3n){
  margin-right: 0;
}

/* Designに関するスタイル */
#design {
	background-image: url("../images/bg-design.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

#design .photograph-list li {
	float: left;
	list-style: none;
	margin: 0 20px 20px 0;
}

#design .photograph-list li:nth-child(3n){
  margin-right: 0;
}

/* Listに関するスタイル */
#list {
	background-image: url("../images/bg-list.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

#design .photograph-list li {
	float: left;
	list-style: none;
	margin: 0 20px 20px 0;
}

#design .photograph-list li:nth-child(3n){
  margin-right: 0;
}



/* Videoに関するスタイル */
#video {
	background-image: url("../images/bg-video.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

/* Contactに関するスタイル */
#contact {
	background-image: url("../images/bg-contact.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}

#contact .access table {
	float: left;
}

#contact .access th,
#contact .access td {	
	text-align: left;
	vertical-align: top;
	line-height: 2.5;
}

#contact .access td {
	padding-left: 30px;
}

#contact .access iframe {
	width: 460px;
	float: right;
}

#contact .form {
	background-color: #eaeaea;
	padding: 30px 50px;
}

#contact .form dl dt {
	width: 165px;
	padding: 10px 0;
	float: left;
	clear: both;
}

#contact .form dl dd {
	padding: 10px 0;
}

/* 名前入力欄*/
#contact .form .name {
	width: 300px;
	height: 30px;
}

/* Email入力欄*/
#contact .form .email {
	width: 300px;
	height: 30px;
}

/* 電話番号入力欄*/
#contact .form .tel {
	width: 300px;
	height: 30px;
}

/* お問合せ種別*/
#contact .form .type {
	width: 300px;
	height: 30px;
}

/* メッセージ入力欄*/
#contact .form .message {
	width: 660px;
	height: 150px;
}

/* ボタン*/
#contact .form button {
	background-color: #009cd3;
	color: #ffffff;
	font-size: 20px;
	width: 120px;
	display: block;
	text-align: center;
	line-height: 30px;
	margin-left: 165px;
	border-radius: 5px;
	border: 3px solid #009cd3;
}

#contact .form button:hover {
	background-color: #ffffff;
	color: #009cd3;
	cursor: pointer;
}

/*赤い印*/
#contact .form .required:after {
	content: " * ";
	color: #ff0000;
}

/*注意書き*/
#contact .form .attention {
	margin: 20px 0 0 165px;
}

/* Contactendに関するスタイル */
#contactend {
	background-image: url("../images/bg-contact.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	background-size: 100% auto;
}