@charset "UTF-8";
/* ==================================================
   Basic Styles
================================================== */
body {
	background: url(../img/mainbg.jpg) center center / cover no-repeat fixed;
	height:100%;
	font-family: 'Titillium Web', "ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

@media only screen and (max-width: 767px) {
  body {
    background: url('../img/mainbg_mobile.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
  }
}

@media only screen and (max-width: 1200px) {
  body {
    background: url('../img/mainbg_mobile.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	padding-bottom:500px;
  }
}

.bg-top-service01 {
	background: url(../img/bg-service01.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}

@media only screen and (max-width: 767px) {
  .bg-top-service01 {
    background: url('../img/bg-service01.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-service01 {
    background: url('../img/bg-service01.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-service02 {
	background: url(../img/bg-service02.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}

@media only screen and (max-width: 767px) {
  .bg-top-service02 {
    background: url('../img/bg-service02.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-service02 {
    background: url('../img/bg-service02.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-service03 {
	background: url(../img/bg-service03.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}

@media only screen and (max-width: 767px) {
  .bg-top-service03 {
    background: url('../img/bg-service03.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-service03 {
    background: url('../img/bg-service03.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-service04 {
	background: url(../img/bg-service04.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}

@media only screen and (max-width: 767px) {
  .bg-top-service04 {
    background: url('../img/bg-service04.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-service04 {
    background: url('../img/bg-service04.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-service05 {
	background: url(../img/bg-service05.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-service05 {
    background: url('../img/bg-service05.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-service05 {
    background: url('../img/bg-service05.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy01 {
	background: url(../img/bg-casestudy01.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy01 {
    background: url('../img/bg-casestudy01.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy01 {
    background: url('../img/bg-casestudy01.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy02 {
	background: url(../img/bg-casestudy02.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy02 {
    background: url('../img/bg-casestudy02.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy02 {
    background: url('../img/bg-casestudy02.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy03 {
	background: url(../img/bg-casestudy03.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy03 {
    background: url('../img/bg-casestudy03.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy03 {
    background: url('../img/bg-casestudy03.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy04 {
	background: url(../img/bg-casestudy04.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy04 {
    background: url('../img/bg-casestudy04.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy04 {
    background: url('../img/bg-casestudy04.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy05 {
	background: url(../img/bg-casestudy05.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy05 {
    background: url('../img/bg-casestudy05.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy05 {
    background: url('../img/bg-casestudy05.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}

.bg-top-casestudy06 {
	background: url(../img/bg-casestudy06.jpg) center center / cover no-repeat fixed;
	margin-top:-300px;
}
@media only screen and (max-width: 767px) {
  .bg-top-casestudy06 {
    background: url('../img/bg-casestudy06.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:300px;
  }
}

@media only screen and (max-width: 1200px) {
  .bg-top-casestudy06 {
    background: url('../img/bg-casestudy06.jpg') 0 0 no-repeat;
    background-size: cover;
	background-position: center center;
	margin-top:-50px;
  }
}


h1 {
	font-size:8px;
	color:#666666;
	margin:0;
}
h2 {
	font-family:"メイリオ";
	font-size:28px;
	font-weight:100;
	margin:35px 0 35px 0;
}

h3{
	font-size:45px;
	font-weight:300;
}

h4{
	font-size:28px;
	font-weight:300;
	margin-top:-10px;
}

a {
	color:#FFFFFF;
}

.gray {
	background-color:#F8F8F8;
}
.white {
	background-color:#FFFFFF;
}
.claarfix {
	width:100%;
	height:100px;
}

/* ==================================================
   Navigation
================================================== */
*{
  margin:0;
  padding:0;
}

/* Fixed Navbar styles
-------------------------------------------------- */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right:0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

/* Smooth scroll
-------------------------------------------------- */
.no-js .back-to-top {
	display:none;
}


/* Sticky footer styles
-------------------------------------------------- */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
nav {
  height:60px;
  background-color:#FFFFFF;
  filter:alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.navbar-fixed-top {
  -webkit-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}
.nav-contents {
	color:#000000;
	font-weight:900;
	margin-top:40px;
	float:right;
}


#footer {
  background-color:#333333;
  height:auto;
}
#footcont {
	width: auto;
	height: auto;
	margin-bottom:50px;
	padding: 17px 0 0 0;
	text-align: center;
	font-weight:900;
}
	#footcont ul {
		width: auto;
		height: 26px;
		margin-top:20px;
	}
	#footcont ul li {
		display: inline;
		padding: 0 30px 0 0;
		color: #ffffff;
	}
	#footcont ul li a {
		padding: 0 5px 0 0;
		color: #ffffff;
	}
.footlogo {
	margin:50px auto;
}
.credit {
	color:#FFFFFF;
	text-align:center;
}
.nowrap {
	white-space:nowrap;
}


/* ==================================================
   Contents
================================================== */

.kiyakulist{margin:60px auto 0 auto ; width:260px; }
.kiyakulist li{ list-style: none;}
.kiyakulist li:first-child{}
.kiyakulist li a{ display: block; color: #333!important; font-size:11px; padding:6px 0;}
.kiyakulist li:after {content: ".";display: block;height: 0;font-size: 0; clear: both;visibility: hidden; }
@media only screen and (max-width: 480px) {
.kiyakulist{width:100%; }
.kiyakulist li{ padding-left:4px;}
.nowrap {white-space:normal;}
 img {max-width: 90%; height: auto;}   
}

.catch {
	background:#FFFFFF;
	padding:40px -15px 40px -15px;
}

.title {
	background-color:#F8F8F8;
	text-align:center;
	height:auto;
	padding:30px;
	margin:0;
}

.title-white {
	background-color:#FFFFFF;
	text-align:center;
	height:auto;
	padding:30px;
	margin:0;
}

.title-contact {
	background-color:#F8F8F8;
	text-align:center;
	height:auto;
	padding:30px auto 0 auto;
	margin:0;
}

.lede {
	font-size:18px;
}

.services {
	padding:30px 10% 30px 10%;
	background-color:#FFFFFF;
}

.service-menu {
	margin:0 20px 10px 0;
}

.service-menu2 {
	margin:0 20px -150px 0;
}

.casestudy01 {
	background-image:url(../img/casestudy01.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 9% 4%;
}

.casestudy02 {
	background-image:url(../img/casestudy02.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 0 4% 9%;
}

.casestudy03 {
	background-image:url(../img/casestudy03.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 9% 4%;
}

.casestudy04 {
	background-image:url(../img/casestudy04.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 0 4% 9%;
}

.casestudy05 {
	background-image:url(../img/casestudy05.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 0 4% 9%;
}

.casestudy06 {
	background-image:url(../img/casestudy06.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
	padding:4% 0 4% 9%;
}

#casestudy-right {
	width:280px;
	height:auto;
	margin-left:auto;
	font-size:16px;
}

#casestudy-left {
	width:280px;
	height:auto;
	margin-right:auto;
	font-size:16px;
}

.button {
	width:280px;
	background:#000000;
	filter:alpha(opacity=70);
  	-moz-opacity: 0.7;
  	opacity: 0.7;
	text-align:center;
	padding:2px;
	font-size:16px;
}

.bg-aboutus {
	background-color:#F8F8F8;
	margin:0 auto;
	padding:2% 5% 2% 5%;
}

.bg-members {
	background-color:#F8F8F8;
	height:auto;
	padding:30px;
}

.bg-access {
	background-color:#FFFFFF;
	height:auto;
	width:100%;
	margin:0 auto;
	padding:30px;
	text-align:center;
}

.profile-img {
  width: 300px;
  border-radius: 300px;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
}

.circle{
	width:250px;
	height:250px;
	-webkit-border-radius:50%;
	border-radius:50%;
	border:5px solid #0099CC;
	margin:0 10px;
	background:url(../img/member_tokuyama.jpg);
	background-size:contain;
}

.img-circle{
	width:250px;
	height:250px;
	border:5px solid #0099CC;
}

.switch {
    visibility: hidden;
}

.contact-button {
	text-align:center;
	background:#333333;
	color:#FFFFFF;
	font-size:18px;
	padding:15px;
	margin:40px auto 100px auto;
}

/* 汎用テーブル */
.tableA {
	width: 100%;
	margin: 0 0 15px 0;
	line-height: 1.8;
	border: solid #eeeeee;
	border-width: 1px 0 0 1px;
}
	.tableA th {
		background-color:#CCCCCC;
		color:#FFFFFF;
		width: 25%;
		white-space: nowrap;
		padding:20px;
		text-align: left;
		vertical-align: top;
		border: solid #eeeeee;
		border-width: 0 1px 1px 0;
	}
	.tableA td {
		background-color:#FFFFFF;
		padding:20px;
		border: solid #eeeeee;
		border-width: 0 1px 1px 0;
	}

.footerarea {
	background-color:#333333;
	height:60px;
	padding:20px -15px 20px -15px;
}

/* ==================================================
   Services
================================================== */

.title-service {
	font-size:36px;
}

.lead-service {
	font-size:18px;
	margin:20px 20px 20px 30px;
	text-align:left;
}

.subtitle-service {
	font-size:28px;
	font-weight:300;
	text-align:center;
	margin:40px auto 40px auto;
	word-break:keep-all;
}

.subtitle-white {
	background-color:#FFFFFF;
	text-align:center;
	height:auto;
	margin:0;
	padding-left:20px;
}

.subtitle-gray {
	background-color:#F8F8F8;
	text-align:center;
	height:auto;
	margin:0;
	padding-left:20px;
}

.arrow {
	text-indent:1em;
	list-style-position: inside;
	margin:15px 0;
	padding-bottom:2px;
	padding-left:0px;
	margin-bottom:60px;
	font-size:18px;
}
.arrow li {
	display:block;
	padding-left:10px;
	margin-bottom:10px;
	background:url(../img/arrow.png) 0 2px no-repeat;
}

.keeplus {
	padding:0 45px 50px 45px;
}

.title-keeplus {
	font-size:20px; font-weight:500;
}

.contact {
	padding:50px 0 50px 0;
}

.contact-label {
	font-size:18px;
}


/* ==================================================
   Hover Effect
================================================== */

.tiles .tile {
  display: inline-block;
  margin: 10px;
  text-align: right;
  opacity: .99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
}
.tiles .tile:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.tiles .tile img {
  display: block;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
  font-size: 20px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1;
  font-weight: 600;
  font-size: 18px;
}
.tiles .tile .details .info {
  line-height: 1.2;
  margin: 5px 10px auto auto;
  font-size: 20px;
  text-align:right;
}
.tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:hover span {
  top: 0;
}
.tiles .tile:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.tiles .tile:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}


/* ==================================================
   Case Study
================================================== */
.webstudy {
	margin:0 20px 0 20px;
	padding-bottom:50px;
}

.webimage {
	margin-bottom:30px;
}


/* ==================================================
   お問い合わせフォーム
================================================== */
/* テーブル */
table.form {
	border: 1px solid #7777bb;
	border-collapse: collapse;
	margin-top: 1em;
}
table.form th, table.form td {
	text-align: left;
	border: 1px solid #7777bb;
	padding: 8px;
	font-weight: normal;
}
table.form th {
	white-space: nowrap;
	background: #cccce6;
}
table.form td {
	background: #f0f0f0;
}

/* タイトル装飾 */
strong.ttl {
	text-align: left;
	border-left: solid 4px #cc0000;
	display: block;
	padding: 2px 5px;
	margin-top: 2em;
}

/* メッセージ */
p.msg {
	color: #dd0000;
	margin: 2em;
}
span.msg {
	color: #dd0000;
}

/* 戻りボタン */
form.back {
	margin-top: 2em;
}