@charset "UTF-8";
/* CSS Document */
/* 全体 */
/* line 5, ../sass/style.scss */

@font-face {
	font-family:'mplus-1p-light';
	src: url('../webfonts/mplus-1p-light-sub.eot') format('eot');
	src: url('../webfonts/mplus-1p-light-sub.woff') format('woff');
	src: url('../webfonts/mplus-1p-light-sub.ttf') format('truetype');
}

@font-face {
	font-family:'Lato';
	src: url('http://fonts.googleapis.com/css?family=Lato:100,300,400');
}

body {
  color: #555555;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Gothic ProN','Helvetica','Lucida Grande',Meiryo, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 20px;
  margin:0;
  padding:0;
}
/* line 11, ../sass/style.scss */
body h1 {
  font-family: 'Lato', serif;
  font-size: 25px;
  letter-spacing: 9.3px;
  font-weight: 100;
  color: #666666;
}
/* line 18, ../sass/style.scss */
body h2 {
  font-family: 'Gilda Display', serif;
  font-size: 16px;
  color: #555555;
  letter-spacing: 2px;
  font-weight: bold;
  margin-top: 30px;
}
/* line 26, ../sass/style.scss */
body h3 {
  font-size: 19px;
  letter-spacing: 3px;
}
/* line 30, ../sass/style.scss */
body a {
  color: #555555;
}
/* line 32, ../sass/style.scss */
body a:hover {
  color: #999999;
  text-decoration: none;
}
/* line 37, ../sass/style.scss */
body p {
  margin-bottom: 5px;
}


/* 共通部分 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

p.left{
	text-align: left!important;
}

p.center{
	text-align: center!important;
}

p.right{
	text-align: right!important;
}




/* Container - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.container-fluid{
  margin:0;
  padding:0;
  width:100%;
/*  min-width:800px;
  border:1px #000 solid;*/
}


/* タイトル部分 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

div.title{
	text-align:center;
	margin-top:32px;
}




/* メニュー部分 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

div.top_menu{
//  margin:auto;
  margin-top:16px;
//  border:1px #000 solid;

/*  width:800px;
  position:fixed;
  left:50%;
  margin-left:-400px;*/
}


ul{
  margin:auto;
  padding:0;
  list-style: none;
}

ul.navi li{
	float:left;
	padding:3px 20px;
	margin:0px 0px 0px 0px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 12pt;
	width:117px;
	text-align: center;
	border:1px #bbb solid;
}

ul.navi li a{
	text-decoration: none;
	color:#999;
}

ul.navi li a:hover{
	color:#444;
}


/* Contents部分 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

div.contents{
	width:100%;
	margin:auto;
}


/* スプラッシュ部分 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

div.splash{
	position:absolute;
	top:50%;
	height:500px;
	margin-top:-200px;
	width:100%;
/*	border:1px #eee solid;*/
}


div.splash p{
	/*color:#aaa;*/
	font-family:'mplus-1p-light';
}


div.splash p.splashBigText{
	font-size:20pt;
	line-height: 60px;
	letter-spacing: 0.01em;
}

div.splash p.splashMidText{
	font-size:16pt;
	line-height: 170%;
	letter-spacing: 0.04em;
	text-align: left;
}

div.splash p.splashSmallText{
	font-size:12pt;
	line-height: 170%;
	letter-spacing: 0.04em;
}



div.splash div{
	color:#a3a3a3;
	text-align: center;
	padding:0 0;
}

div.splash .splashDelay1{
	position:relative;
	top:0;
	left:50%;
	margin-left: -400px;
	width:800px;
}


div.splash .splashDelay2, div.splash .splashDelay3, div.splash .splashDelay4{
	position:absolute;
	top:0;
	left:50%;
	margin-left: -400px;
	width:800px;
}



div.splash img{
	margin-top:64px;
}

div#splashFooter{
	position:relative;
	width:800px;
	top:64px;
	left:50%;
	margin-left:-400px;
	text-align:right;
	font-family:'mplus-1p-light';
	font-size: 14pt;
}

div#splashFooter a{
	text-decoration: none;
	color:#ccc;
}

/*
.splashDelay1, .splashDelay2, .splashDelay3{
	margin-top:100px;
}
*/


/* スプラッシュ部分 - - - - - - - - - - - - */

@-webkit-keyframes fadeIn { 0％ { opacity:0; } 17% { opacity:1; } 100% { opacity:1; } }
@-moz-keyframes fadeIn { 0％ { opacity:0; } 17% { opacity:1; } 100% { opacity:1; } }
@keyframes fadeIn { 0％ { opacity:0; } 17% { opacity:1; } 100% { opacity:1; } }

@-webkit-keyframes fadeOut { 0％ { opacity:1; } 100% { opacity:0; } }
@-moz-keyframes fadeOut { 0％ { opacity:1; } 100% { opacity:0; } }
@keyframes fadeOut { 0％ { opacity:1; } 100% { opacity:0; } }


@-webkit-keyframes fadeInSlow { 0％ { opacity:0; } 6% { opacity:1; } 100% { opacity:1; } }
@-moz-keyframes fadeInSlow { 0％ { opacity:0; } 6% { opacity:1; } 100% { opacity:1; } }
@keyframes fadeInSlow { 0％ { opacity:0; } 6% { opacity:1; } 100% { opacity:1; } }


.initialFader{
    opacity:0;
    -webkit-animation:fadeIn ease-in-out;
    -moz-animation:fadeIn ease-in-out;
    animation:fadeIn ease-in-out;


		animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;

		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:forwards;

 
    -webkit-animation-duration:4s;
    -moz-animation-duration:4s;
    animation-duration:4s;
}



.fader{
    opacity:0;
    -webkit-animation:fadeIn ease-in-out;
    -moz-animation:fadeIn ease-in-out;
    animation:fadeIn ease-in-out;

    -webkit-animation-iteration-count:2;
    -moz-animation-iteration-count:2;
    animation-iteration-count:2;
 
    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    animation-direction:alternate;
 
    -webkit-animation-duration:4s;
    -moz-animation-duration:4s;
    animation-duration:4s;
}


.splashDelay1 {
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    animation-delay:0.5s;
}

.splashDelay2 {
    -webkit-animation-delay:8.5s;
    -moz-animation-delay:8.5s;
    animation-delay:8.5s;
}

.splashDelay3 {
    -webkit-animation-delay:16.5s;
    -moz-animation-delay:16.5s;
    animation-delay:16.5s;
}

.faderSlow{
		opacity:0;
		-webkit-animation:fadeInSlow ease-in-out;
		-moz-animation:fadeInSlow ease-in-out;
		animation:fadeInSlow ease-in-out;

		-webkit-animation-iteration-count:2;
		-moz-animation-iteration-count:2;
		animation-iteration-count:2;

		-webkit-animation-direction:alternate;
		-moz-animation-direction:alternate;
		animation-direction:alternate;

		-webkit-animation-duration:15s;
		-moz-animation-duration:15s;
		animation-duration:15s;
}

.splashDelay4 {
		-webkit-animation-delay:25s;
		-moz-animation-delay:25s;
		animation-delay:25s;
		-webkit-animation-duration:2.5s !important;
		-moz-animation-duration:2.5s !important;
		animation-duration:2.5s !important;

}

.splashDelay5 {
		-webkit-animation-delay:47.5s;
		-moz-animation-delay:47.5s;
		animation-delay:47.5s;
}


div#splashFooter, .fadeOut{
		-webkit-animation:fadeOut ease-in-out;
		-moz-animation:fadeOut ease-in-out;
		animation:fadeOut ease-in-out;

		animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;

		-webkit-animation-fill-mode:forwards;
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:forwards;

		-webkit-animation-duration:1.5s;
		-moz-animation-duration:1.5s;
		animation-duration:1.5s;

}

div#splashFooter{
		opacity:1;
		-webkit-animation-delay:23s;
		-moz-animation-delay:23s;
		animation-delay:23s;
}



/* line 42, ../sass/style.scss */
.content-box {
/*  width: 750px;
  height: 600px;*/
/*  margin: 100px 100px 0 100px;*/
  border-bottom: 1px solid #555555;
}

/* line 49, ../sass/style.scss */
.view-field {
  margin-top: 70px;
}

/* line 53, ../sass/style.scss */
.menu {
  font-family: 'Gilda Display', serif;
  font-size: 13px;
  letter-spacing: 5px;
}
/* line 58, ../sass/style.scss */
.menu ul.nav-pills li {
  margin: 0;
  border-left: 1px solid #555555;
}
/* line 61, ../sass/style.scss */
.menu ul.nav-pills li a {
  padding: 0 10px;
  color: #555555;
  border-radius: 0;
  margin: 0 15px;
}
/* line 66, ../sass/style.scss */
.menu ul.nav-pills li a:hover {
  background-color: #f2f2f2;
}
/* line 69, ../sass/style.scss */
.menu ul.nav-pills li a.active {
  background-color: #f2f2f2;
}
/* line 74, ../sass/style.scss */
.menu ul.nav-pills li:last-child {
  border-right: 1px solid #212121;
}

/* line 80, ../sass/style.scss */
i.portlait {
  width: 100px;
  height: 133px;
  background: url('/images/portlait.jpg?1330391785') no-repeat;
}

/* line 87, ../sass/style.scss */
footer {
  width: 750px;
  text-align: right;
  margin: 0 100px;
}

/* line 94, ../sass/style.scss */
.portfolio p, .etc p {
  display: inline-block;
}
/* line 97, ../sass/style.scss */
.portfolio a, .etc a {
  opacity: 0.7;
}
/* line 99, ../sass/style.scss */
.portfolio a:hover, .etc a:hover {
  opacity: 1.0;
}

/* line 105, ../sass/style.scss */
.right {
  text-align: right;
  font-family: 'Gilda Display', serif;
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 10px;
}
/* line 111, ../sass/style.scss */
.right a {
  padding-right: 10px;
}

/* line 116, ../sass/style.scss */
.textarea {
  margin-top: 40px;
}
/* line 118, ../sass/style.scss */
.textarea textarea {
  width: 100%;
  height: 400px;
  border: 0;
}

/* line 125, ../sass/style.scss */
.full-view {
  margin-top: 50px;
}

/* line 129, ../sass/style.scss */
.right-menu {
  width: 250px;
  min-width: 250px;
  margin-bottom: 10px;
  margin-top: 150px;
}
/* line 134, ../sass/style.scss */
.right-menu ul {
  list-style-type: none;
}
/* line 136, ../sass/style.scss */
.right-menu ul li {
  display: inline-block;
  padding-bottom: 10px;
}

/* line 143, ../sass/style.scss */
.left-field {
  width: 500px;
  min-width: 500px;
  height: 400px;
}

/* line 149, ../sass/style.scss */
.volo-title {
  float: right;
  margin-top: 310px;
  margin-right: 0;
}