@charset "UTF-8";
/*//////////////////////////////////////////////////////////////////////////////////////////*/
/* CUSTOM CSS (ADD YOUR CSS HERE!) */
/*//////////////////////////////////////////////////////////////////////////////////////////*/

/* PLUGIN CSS */
@import url('../plugins/camera-slider/camera-slider-1.3.4.min.css');
@import url('../plugins/fancybox/fancybox-1.3.4.min.css');
@import url('../plugins/fancybox/photoswipe-3.0.5.min.css');
@import url('../plugins/hover-animations/hover-animations-1.0.min.css');
@import url('../plugins/justinaguilar-animations/animations.css');
@import url('../plugins/validation/validation-2.2.min.css');
@import url('../plugins/fotorama/fotorama.css');
@import url('../plugins/slick/slick.css');
@import url('../plugins/slick/slick-theme.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700');

/*[Reset]
--------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-style:normal;font-weight:normal;font-size:100%;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
html{overflow-y:scroll;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
input,textarea,{margin:0;padding:0;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
a:focus {outline:none;}
/* Reset bootstrap */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left:0;
padding-right:0;
}
body img{width:auto;}

/*[total page]
--------------------------------------------------*/
/* body設定 */
body{
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;/*全体の書体*/
font-size:14px;/*全体の文字サイズ*/
color:#444444;/*全体の文字の色*/
line-height:1.5;/*全体の行間*/
}

/* bootstrap用body設定 */
.colWidth{
margin:0 auto;/*中央に表示*/
padding:0 20px!important;/*外側の空き*/
max-width:1000px!important;
position:relative;/*colWidthが外側の基準*/
}
/* リンク設定 */
a{
color:#00a0e9;/*リンクの色*/
text-decoration:none;/*リンクの装飾*/
font-weight:normal;/*リンクの文字の太さ*/
}
a:hover{
color:#;/*ホバー時のリンクの色*/
text-decoration:underline;/*ホバー時の装飾*/
font-weight:normal;/*ホバー時の文字の太さ*/
}
/* 強調設定 */
strong{
font-weight:bold;
}

/* 文字色設定 */
.mint{color:#3aa984;font-weight:bold;}
.blue{color:#00a1e9;font-weight:bold;}
.red{color:#ee7a33;font-weight:bold;}
/* 背景色設定 */
.bk-mint{background:#d8eee6;}
.bk-blue{background:#d1eefb;}
.bk-red{background:#fce4d6;}

/* 見出し設定 */
.h2{
margin-bottom:30px;
padding-bottom:20px;
border-bottom:1px solid #000;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
letter-spacing:0.2em;
text-align:center;
}
.h3{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
letter-spacing:0.2em;
}

/* コンテンツ設定 */
.content-block{
margin:50px auto;
padding:0 20%;
}
.content-wrap{
margin:50px auto;
padding:0 12%;
}
/* skrollrcss */
* {
		padding:0;
		margin:0;
	}

	html, body {
		height:100%;
	}

	.skrollr-desktop body {
		height:100% !important;
	}

	body {
		font-family:sans-serif;
	}

	p {
		margin:1em 0;
	}

	.parallax-image-wrapper {
		position:fixed;
		left:0;
		width:100%;
		overflow:hidden;
	}

	.parallax-image-wrapper-50 {
		height:50%;
		top:-50%;
	}

	.parallax-image-wrapper-100 {
		height:100%;
		top:-100%;
	}

	.parallax-image {
		display:none;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}

	.parallax-image-50 {
		height:200%;
		top:-50%;
	}

	.parallax-image-100 {
		height:100%;
		top:0;
	}

	.parallax-image.skrollable-between {
		display:block;
	}

	.no-skrollr .parallax-image-wrapper {
		display:none !important;
	}

	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
	}

	.gap {
		background:transparent center no-repeat;
		background-size:cover;
	}

	.skrollr .gap {
		background:transparent !important;
	}

	.gap-50 {
		height:50%;
	}

	.gap-100 {
		height:100%;
	}

	.header, .content {
		background:#fff;
		padding:1em;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	.content-full {
		height:100%;
	}

	#done {
		height:100%;
	}
/*[Header]
--------------------------------------------------*/
header #starting-navbar,#index #starting-navbar{
padding:0 0 10px 0;
/*background:rgba(255,255,255,0.9);*/
}

.parallax-window {
     min-height: 800px;
     background: transparent;
}

/*[Nav]
--------------------------------------------------*/
#starting-navbar{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:0.2em;
color:#333333;
}
#starting-navbar a{
color:#333333;
}
.flex{
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.smart {
display: none;
}
@media (max-width: 797px) {
.pc {
display: none;
}
.smart {
display: inline;
}
h1{
font-size: 12px;
}
.navi{
font-size: 12px;
}
}

@media (max-width: 420px) {
	.navi .flex{
		flex-wrap:wrap;
	}
	.navi .flex li{
		width:50%;
		padding-bottom:10px;
	}
}
/*
.navbar-toggle {
position: relative;
float:none;
margin-right: 0;
padding: 12px 0;
margin-top: 8px;
margin-bottom: 8px;
background: 0 0;
background-image: none;
border: 0;
border-radius: 0;
text-align:center;
}
.navbar-default {
 background-color: #fff;
 border-color: #fff;
}
@media (min-width: 1022px){
.container {
text-align: center;
}
}
.navbar-nav {
float: none;
flex: auto;
margin: 0;
}

@media (max-width: 797px) {
#starting-navbar ul li {
	padding: 15px;
}
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#ccc;
}
.navbar-toggle .icon-bar {
display: block;
width:100%;
height: 4px;
border-radius: 0;
}
@media (max-width: 797px) {
.navbar-nav > li{
	border-bottom:1px solid #ccc;
}
.navbar-collapse {
border-top: 0;
background: #FFF;
}

}
*/
/*[Concept]
--------------------------------------------------*/
#concept{
padding:50px 0;
background:#FFF;
line-height:2.5;
}
#concept h2 img{
width:auto;
max-width:320px;
display: block;
margin:0 auto;
}

/*[Topics]
--------------------------------------------------*/
#topics{
padding:50px 0;
background:#e2d5cb;
}


/*[Access]
--------------------------------------------------*/
#access{
padding:50px 0;
background:URL(../images/access_back.gif) center center repeat;
letter-spacing:0.1em;
}
#access button{
	margin-top:20px;
background:none;
}
#access button a{
color:#444444;
}
#access .box-border1{
border:solid 1px #888;
padding:3px;
}

#access .staff{
border:1px solid #888;
width:20em;
padding-left:1em;
}
#access .kyubo{
font-weight:bold;
text-decoration:underline;
}


/*[Footer]
--------------------------------------------------*/
#footer{
padding:50px 0;
background:#837b76;
color:#FFF;
}

/*[toTop]
--------------------------------------------------*/
#toTop{
padding:30px 0 0 95px;
width:135px;
height:90px;
color:#000;
background:URL(../images/totop.png) no-repeat bottom left;
bottom:0;
right:0;
}

/*[about]
--------------------------------------------------*/
#about h2.h2{
margin-top:80px;
}
#about #wrapper{
background:URL(../images/access_back.gif) center center repeat;
}
#about dt,#about dd{
margin:0 0 5px 0 ;
padding:10px 20px 5px 20px;!important;
letter-spacing:0.1em!important;
text-align:left!important;
}
#about dd{
border-bottom:1px #999 solid!important;
}
#about dl{
padding-bottom:50px;
}
#about .colWidth{
max-width:700px!important;
}

@media (min-width: 1020px) {
#about dt,#about dd{
padding:10px 60px 5px 60px;!important;
}
.dl-horizontal dt {
width:300px;
}
}
#about button{
	margin-top:20px;
background:none;
}
#about button a{
color:#444444;
}
#about .box-border1{
border:solid 1px #888;
padding:3px;
}

/*[workflow]
--------------------------------------------------*/
#flow-main{
margin-top:80px;
}
#flow #wrapper{
background:#e2d5cb;
}
#flow dl{
text-align:left;
}
#flow .colWidth{
margin-bottom:30px;
max-width:700px!important;
border-bottom:1px #999 solid!important;
}
#flow dt{
margin-bottom:10px;
font-weight:bold;
}


/*[works]
--------------------------------------------------*/
#works h2.h2{
margin-top:80px;
}
#works #wrapper{
background:#e2d5cb;
}
#works header{
background:#e2d5cb;
}
#works-main{
background:#e2d5cb;
}
#works-main h3{
margin-bottom:30px;
text-align:center;
font-size:16px;
}
#next-back{
margin:10px auto 70px auto;
max-width:750px;
}
#next-back a{
color:#444444;
}
#works-list a,#works-works-list a{
color:#444444;
text-decoration: underline;
}
#works-list a:hover img,#works-works-list a:hover img{
filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;
}
#works-list h3{
font-size:14px;
}
#works-works-list h3{
font-size:12px;
}
#works-list{
text-align:center;
}
#works-list{
text-align:center;
}
#works-works-list{
max-height:200px;
}
#works-works-list .slick-slide img{
padding:10px;
display: block;
width:100%;
}

.50per{
max-width:50%;
width:234px;	
}

/*[responsive]
--------------------------------------------------*/
/* 全体responsive設定 */
@media (min-width: 1230px) {...}
/*1022px以上に適用*/
@media (min-width: 1022px) {/*最大幅を1022pxにしたい時はコメントアウトを外す.colWidth{width:1022px!important;}*/}
/*1021px以下に適用*/
@media (max-width: 1021px) {...}
/*798px以上に適用*/
@media (min-width: 798px) {...}
/*797px以下に適用*/
@media (max-width: 797px) {...}
/*598px以下に適用*/
@media (max-width: 598px) {...}
/*510px以下に適用*/
@media (max-width: 510px) {...}
/*798px以上1021以下に適用*/
@media (min-width: 798px) and (max-width: 1021px) {...}
/*1022px以上1229以下に適用*/
@media (min-width: 1022px) and (max-width: 1229px) {...}
/*1040px以上に適用*/

 /*[Common]
--------------------------------------------------*/
/*border-bottom*/
.solid{border-bottom:solid 1px #ccc;}
.dotted{border-bottom:dotted 1px #ccc;}
.dashed{border-bottom:dashed 1px #ccc;}
.double{border-bottom:double 1px #ccc;}
/*box-border*/
.box-border1{border:solid 1px #ccc;}
.box-border2{border:solid 2px #ccc;}
/*text-shadow*/
.text-shadow{text-shadow:1px 1px 3px #000;}
/*box-shadow*/
.box-shadow{-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;}
/*box-round*/
.box-round5{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.box-round10{border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
.box-round20{border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;}
/*透明*/
.alpha25{filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;}
.alpha50{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}
.alpha75{filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}