@charset "utf-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del {text-decoration: line-through}
abbr[title], dfn[title] {border-bottom:1px dotted #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}
article { overflow:hidden;}
img{ vertical-align:bottom;}
a img {outline:none; border:none;}
a {outline:none;}
a:focus{outline: none;}
area{
  border:none;
  outline:none;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html,body{ 
	width:100%;
	height:100%;
	-webkit-font-smoothing: antialiased;
}

/* ---- particles.js container ---- */

canvas{
	position:fixed;
  display:block;
  vertical-align:bottom;
  z-index:0;
}

#particles-js{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	position: absolute;
}


/*========================================
 
BASIC
 
=======================================*/



html{-webkit-text-size-adjust:100%; font-size: 62.5%;}
body{font-size: 10px;font-size: 1.0rem; color:#000; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background:#ffffff;}
a{color:#00a6cc; text-decoration:none;}
a:hover{
	color: #999999;
}
 
.over {
	transition: 0.3s ;
}

.over:hover {
	opacity: 0.5 ;
} 

/* page-top */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index:10000;
}


/*clearfix*/
.clearfix:after{content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display:block;}
 
/* COMMON
=======================================*/

#main-visual {
	padding:100px 0 0 0;
	position:relative;
	text-align:center;
	width: 100%;
	height: auto;
	z-index:2;
}

#main-visual img { max-width:100%; height:auto;}
#main-visual div { width:100%; height:auto; position: absolute; bottom:-22px; text-align:center;}


#contents {
	background-color: rgba(255,255,255,0.95);
	width: 100%;
	height: auto;
	position: relative;
}
#address { padding-bottom:70px;}


#address h3 { font-size:20px; font-size:2rem; font-weight:bold; line-height:20px; margin-bottom:25px;}

.a_left { float:left; width:380px; font-size:16px; font-size:1.6rem; line-height:20px; padding-bottom:30px;}
.a_left img { margin-bottom:40px;}
.a_right { float:right; width:600px; padding-bottom:30px;}
.a_right iframe {width:100%; height:300px;}


/* #footer */
footer {
	display: table;
	padding: 0;
	width: 100%;
	height: 100px;
	position: relative;
	z-index: 300;
	background-color: #0a557f;
}

footer #footer_wrap {
	display: table-cell;
	vertical-align:middle;
	font-size:12px; font-size:1.2rem;
	line-height:1.2rem;
	font-family: 'Montserrat Subrayada', sans-serif;
	color:#FFF;
	width:100%;
	height:100px;
	text-align:center;
}



article {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	padding-top: 100px;
}

article h2{
	display:block;
	text-align:center;
	margin:0 auto;
	width:100%;
	max-width:1000px;
	font-family: 'Montserrat Subrayada', sans-serif;
	font-size:48px; font-size:4.8rem;
	line-height:1;
	border-bottom:#000 solid 1px;
	padding-bottom:30px;
}


#works h2 { max-width:990px;}
#address h2 { margin-bottom:35px;}







.inner {
	width: 1000px;
	margin: 0 auto;
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}

/* header */
#top-head {
	background:#ffffff;
	height:100px;
	font-size: 14px;
	position:fixed;
	width: 100%;
	margin: auto 0;
	padding: 0;
	line-height: 1;
	z-index: 5000;
	border-bottom:#b2b2b2 solid 1px;
}
#top-head a,
#top-head {
	text-decoration: none;
}

#top-head .inner {
	position: relative;
}
#top-head .logo {
	float: left;
}
#global-nav ul {
	list-style: none;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 14px;
	font-size: 1.4rem;
	font-family: 'Montserrat Subrayada', sans-serif;
}
#global-nav ul li {
	float: left;
	width:100px;
	height:100px;
	border-left: solid 1px #d9d9d9;
	text-align:center;
	position: relative;
	font-weight:bold;
}


#global-nav ul li a {
	display: table-cell;
	vertical-align:bottom;
	padding-bottom:20px;
	width:100px;
	height:100px;
	bottom:0;
	left:0;
	color:#000000;
}

#global-nav ul li.cr a {
	width:100px;
	position: absolute;
	bottom:0;
	left:0;
	color:#ed6d00;
}

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

#global-nav ul li:nth-child(3)  {border-right: solid 1px #d9d9d9;}

#global-nav ul li:nth-child(1) a {background:url(../img/h_nvi_bg00.png) no-repeat top left;}
#global-nav ul li:nth-child(2) a {background:url(../img/h_nvi_bg01.png) no-repeat top left;}
#global-nav ul li:nth-child(3) a {background:url(../img/h_nvi_bg02.png) no-repeat top left;}

#global-nav ul li.cr:nth-child(1) a:hover {background:url(../img/h_nvi_bg00_ov.png) no-repeat top left;}
#global-nav ul li.cr:nth-child(2) a:hover {background:url(../img/h_nvi_bg01_ov.png) no-repeat top left;}
#global-nav ul li.cr:nth-child(3) a:hover {background:url(../img/h_nvi_bg02_ov.png) no-repeat top left;}

#global-nav ul li:nth-child(1) a:hover {background:url(../img/h_nvi_bg00_ov.png) no-repeat top left;}
#global-nav ul li:nth-child(2) a:hover {background:url(../img/h_nvi_bg01_ov.png) no-repeat top left;}
#global-nav ul li:nth-child(3) a:hover {background:url(../img/h_nvi_bg02_ov.png) no-repeat top left;}



/* Sweep To Top */
.navover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.navover:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a557f;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.navover:hover, .navover:focus, .navover:active {
  color: white;
}
.navover:hover:before, .navover:focus:before, .navover:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}





/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}

#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #000000;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 12px;
}
#nav-toggle span:nth-child(2) {
	top: 23px;
}
#nav-toggle span:nth-child(3) {
	top: 34px;
}


.left_480 {
	width:100%;
	max-width:480px;
	float:left;
}

.right_480 {
	width:100%;
	max-width:480px;
	float:right;
}


/* #filter
--------------------------- */
#filter {
	margin: 0 auto;
	padding: 15px 0;
	width: 100%;
	max-width: 990px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1;
	border-bottom: #000 solid 1px;
	margin-bottom: 30px;
}
	


#filter a:link { text-decoration:none; color: #000;font-family: 'Montserrat Subrayada', sans-serif;}
#filter a:visited { text-decoration:none; color: #000;}
#filter a:active { text-decoration:none; color: #000;}
#filter a:hover { text-decoration:none; color: #00a6cc;}

#filter .active {font-weight: bold; color: #00a6cc;}

#filter a.active:link { text-decoration:none; color: #00a6cc;font-family: 'Montserrat Subrayada', sans-serif;}
#filter a.active:visited { text-decoration:none; color: #00a6cc;}
#filter a.active:active { text-decoration:none; color: #00a6cc;}
#filter a.active:hover { text-decoration:none; color: #00a6cc;}

/* #filterlist
--------------------------- */
#filterlist {
	font-size:0;
	width: 100%;
	text-align: left;
}

#filterlist ul {
	padding: 0;
	max-width: 1000px;
	width:100%;
	text-align: left;
	margin:0 0 0 -0.6%;
}

#filterlist ul li {
	padding: 0 0 1.2% 1.2%;
	width: 25%;
	text-align: left;
	float: left;
	display: inline;
	overflow: hidden;
}

#filterlist ul li:nth-child(4n)  {
	
}

#filterlist ul li img {
	width: 100%;
}


/* =======================================
	ClearFixElements
======================================= */
#filterlist ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#filterlist ul {
	position: relative;
	display: block;
	overflow: hidden;
}



figure {
	position: relative;
	overflow: hidden;
	width: 100%;
}
figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-image:url(../img/img_over.png);
	background-size:cover;
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}

li.WEB figcaption {
	background-image:url(../img/img_over_web.png);
}

figure:hover figcaption {
	top: 0;
	left: 0;
}

@media screen and (min-width: 980px) {
.teikei{
	border:#000 1px solid; height:237px; width:241px; padding:15px; font-size:14px; text-align:center; display:table-cell; vertical-align:middle;
}
}

@media screen and (max-width: 980px) {

.teikei{
	border:#000 1px solid; height:auto; width:241px; padding:10px; font-size:14px; text-align:center; display:table-cell; vertical-align:middle;
}

article {
	margin:0 auto;
	width:95%;
	text-align:center;
}


.a_left { float:none; width:100%; font-size:16px; font-size:1.6rem; line-height:20px; padding-bottom:30px; text-align:center;}
.a_right { float:none; width:100%; padding-bottom:40px;}


img {max-width: 100%; height:auto; vertical-align:bottom;} 

	#top-head,
	.inner {
		width: 100%;
		padding: 0;
	}
	#top-head {
		top: 0;
		position: fixed;
		margin-top: 0;
	}
	/* Fixed reset */

	#top-head .logo {
		position: absolute;
		left: 10px;
		z-index:9999;
	}




}

@media screen and (max-width: 768px) {

}




@media screen and (max-width: 640px) {

}





@media screen and (max-width: 480px) {

.teikei{
	border:#000 1px solid; height:auto; width:241px; padding:5px; font-size:12px; text-align:center; display:table-cell; vertical-align:middle;
}

#top-head,
	.inner {
		width: 100%;
		padding: 0;
	}
	#top-head {
		top: 0;
		position: fixed;
		margin-top: 0;
	}
	/* Fixed reset */


	#mobile-head {
		background: #fff;
		width: 100%;
		height: 100px;
		z-index: 999;
		position: relative;
		border-bottom:#b2b2b2 solid 1px;
	}


	#global-nav {
		position: absolute;
		/* 開いてないときは画面外に配置 */
		top: -480px;
		background: #ffffff;
		width: 100%;
		text-align: center;
		padding: 0 0 0 0;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
	}
	#global-nav ul {
		list-style: none;
		position: static;
	}
	#global-nav ul li {
		width: 100%;
		height:50px;
		float: none;
		position: static;
		border-bottom: solid 1px #b2b2b2;
		border-left: none;
		padding:10px 0 8px 0;
		margin:0;
		height:auto;
	}
	#global-nav ul li:after  {
		display: none;
	}
	#top-head #global-nav ul li a,
	#top-head.fixed #global-nav ul li a {
		width: 100%;
		height:auto;
		display: block;
		color: #000000;
		padding:10px 0 10px; 0;
		margin:0;
		position:static;
	}
	
	
	#top-head #global-nav ul li a:hover,
	#top-head.fixed #global-nav ul li a:hover {
		color: #ffffff;
	}
	
#global-nav ul li:nth-child(1) a {background:url(../img/h_nvi_bg00.png) no-repeat -20px -20px;}
#global-nav ul li:nth-child(2) a {background:url(../img/h_nvi_bg01.png) no-repeat -20px -20px;}
#global-nav ul li:nth-child(3) a {background:url(../img/h_nvi_bg02.png) no-repeat -20px -20px;}

#global-nav ul li.cr:nth-child(1) a:hover {background:url(../img/h_nvi_bg00_ov.png) -20px -20px;}
#global-nav ul li.cr:nth-child(2) a:hover {background:url(../img/h_nvi_bg01_ov.png) -20px -20px;}
#global-nav ul li.cr:nth-child(3) a:hover {background:url(../img/h_nvi_bg02_ov.png) -20px -20px;}

#global-nav ul li:nth-child(1) a:hover {background:url(../img/h_nvi_bg00_ov.png) no-repeat -20px -20px;}
#global-nav ul li:nth-child(2) a:hover {background:url(../img/h_nvi_bg01_ov.png) no-repeat -20px -20px;}
#global-nav ul li:nth-child(3) a:hover {background:url(../img/h_nvi_bg02_ov.png) no-repeat -20px -20px;}


	#nav-toggle {
		display: block;
	}
	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:nth-child(1) {
		top: 23px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 23px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	/* #global-nav スライドアニメーション */
	.open #global-nav {
		/* #global-nav top + #mobile-head height */
		-moz-transform: translateY(580px);
		-webkit-transform: translateY(580px);
		transform: translateY(580px);
	}
	


#filter {
	font-size:16px; font-size:1.6rem;
}

footer #footer_wrap {

	font-size:10px; font-size:1rem;
	line-height:1;
}

}



.mb00{ margin-bottom:0; }
.mb03{ margin-bottom:3px; }
.mb04{ margin-bottom:4px; }
.mb05{ margin-bottom:5px; }
.mb07{ margin-bottom:7px; }
.mb08{ margin-bottom:8px; }
.mb10{ margin-bottom:10px; }
.mb12{ margin-bottom:12px; }
.mb13{ margin-bottom:13px; }
.mb14{ margin-bottom:14px; }
.mb15{ margin-bottom:15px; }
.mb16{ margin-bottom:16px; }
.mb20{ margin-bottom:20px; }
.mb21{ margin-bottom:21px; }
.mb23{ margin-bottom:23px; }
.mb24{ margin-bottom:24px; }
.mb30{ margin-bottom:30px; }
.mb32{ margin-bottom:32px; }
.mb35{ margin-bottom:35px; }
.mb40{ margin-bottom:40px; }
.mb45{ margin-bottom:45px; }
.mb50{ margin-bottom:50px; }
.mb60{ margin-bottom:60px; }
.mb70{ margin-bottom:70px; }
.mb_top00{ margin-top:0; }
.mb_top10{ margin-top:10px; }
.mb_top12{ margin-top:12px; }
.mb_top15{ margin-top:15px; }
.mb_top20{ margin-top:20px; }
.mb_top25{ margin-top:25px; }
.mb_top28{ margin-top:28px; }
.mb_top30{ margin-top:30px; }
.mb_top35{ margin-top:35px; }
.mb_top45{ margin-top:45px; }
.mb_top05{ margin-top:5px; }
.mb_left02{ margin-left:2px; }
.mb_left07{ margin-left:7px; }
.mb_left15{ margin-left:15px; }
.mb_left20{ margin-left:20px; }
.mb_left143{ margin-left:143px; }
.mb_right07{ margin-right:7px; }
.mb_right11{ margin-right:11px; }
.mb_right15{ margin-right:15px; }
.mb_right20{ margin-right:20px; }

.lh_12 { line-height:1.2rem; }
.lh_14 { line-height:1.4rem; }
.lh_15 { line-height:1.5rem; }
.lh_16 { line-height:1.6rem; }
.lh_17 { line-height:1.7rem; }
.lh_18 { line-height:1.8rem; }
.lh_19 { line-height:1.9rem; }
.lh_20 { line-height:2rem; }
.lh_22 { line-height:2.2rem; }
.lh_28 { line-height:2.8rem; }

.txt_center { text-align:center;}
.hr_bottom {
	padding: 0 0 30px 0;
	border-bottom: #9c8484 solid 1px;
}


.fc663300 { color: #663300; }
.fce5eee1 { color: #e5eee1; }
.fc660000 { color: #660000; }
.fc333333 { color: #333 }
.fc993366 { color: #993366; }
.fc647815 { color: #4c8029; }
.fcFF6666 { color: #FF6666; }
.fc990000 { color: #990000; }
.fcCC3333 { color: #CC3333; }
.fc3399cc { color: #3399cc; }
.fcFFFFFF { color: #FFFFFF; }
.fcef7b18 { color: #ef7b18; }
.fc513636 { color: #513636; }


.txt28rem { font-size:28px;font-size:2.8rem;}
.txt26rem { font-size:26px;font-size:2.6rem;}
.txt22rem { font-size:22px;font-size:2.2rem;}
.txt18rem { font-size:18px;font-size:1.8rem;}
.txt16rem { font-size:16px;font-size:1.6rem;}
.txt14rem { font-size:14px;font-size:1.4rem;}
.txt12rem { font-size:12px;font-size:1.2rem;}
.txt11rem { font-size:11px;font-size:1.1rem;}
.txt10rem { font-size:10px;font-size:1rem;}

.undraggable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}