@charset "utf-8";
/**
 * 1. import
 */
@import "import/reset.css";
@import "import/util.css";

/**
 * 2. html, body
 */
	body {
		background-color: #fff;
		background-image: url(../imgs/space.gif);
		background-repeat: repeat-x;
		background-position: center top;
	}
	.page {
		color: #333333;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: 0.1em;
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
/**
 * 3. HTMLtag, siteCommonClass
 */
/* anchor */
	a {
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: top left;
		color: #0000ff;
		text-decoration: underline;
	}
	a:visited {}
	a:hover {
		color: #ff0000;
		text-decoration: underline;
	}
	a:active {}
	
	a:hover img {
    		filter: alpha(opacity=70);
    		-moz-opacity:0.7;
    		-khtml-opacity: 0.7;
    		opacity:0.7;
    		zoom:1;
	}
	.logo a:hover img {
    		filter: alpha(opacity=100);
    		-moz-opacity:1;
    		-khtml-opacity: 1;
    		opacity:1;
    		zoom:1;
	}
	
	
/* img */
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	
	@media only screen and (max-width: 960px) {
	.img,.img img{
		width: 100% !important;
	}
	}
	
	.imgBox{
		
	}
	@media only screen and (max-width: 640px) {
	.imgBox div{
		float:none !important;
		width:auto !important;
		margin-left:0px !important;
		margin-right:0px !important;
		padding-top:0px !important;
	}
	}



/* heading */
	.siteTitle {
		float:left;
	}
	.siteTitle a:hover img{
	    	filter: alpha(opacity=100);
    		-moz-opacity:1;
    		-khtml-opacity:1;
    		opacity:1;
	}
	

	
	@media only screen and (max-width: 640px) {
	.siteTitle {
		width:48%;
		float:none;
	}
	}

/* cap */
	.cap,
	.caption {
		background: none;
		color: #7d7d7d;
		font-size: 10px;
		line-height: 15px;
	}
	.cap {
		padding-top: 5px;
	}

/**
 * 4. Layout
 */
  	.wrap {
		position:relative;
		width: 960px;
		margin-right: auto;
		margin-left: auto;
	}
	 .wrapper {
		 position:relative;
		width: 960px;
		margin-right: auto;
		margin-left: auto;
	}
	@media only screen and (max-width: 960px) {
	.wrap {
		width: auto;
		padding-left:10px;
		padding-right:10px;
	}
	.wrapper {
		width: auto;
	}
	} 
 
	body #container {
		margin-right: auto;
		margin-left: auto;
		text-align: left;
	}

/* mainContent */
	@media only screen and (max-width: 640px) {
	#mainContent{
		margin-top:-40px;
	}
	}


/* gHeader */
	body #gHeader {
		padding-top:10px;
		background:url(../imgs/bg-bottom.jpg) no-repeat top center;
		height:180px;
	}
	@media only screen and (max-width: 640px) {
	body #gHeader {
		padding-top:0px;
	}	
	}	

	
	
/* sns */
	#sns {
		float:right;
	}
	#sns li{
		float:left;
	}
	@media only screen and (max-width: 640px) {
	#sns {
		display:none;
	}
	#sns li{
		float:none;
		display: inline-block;
    		/* For IE 6/7 */
    		*display: inline;
    		*zoom: 1;
	}
	}
	
/* snsbtm */
	#snsbtm {
		display:none;
	}
	@media only screen and (max-width: 640px) {
	#snsbtm {
		display:block;
	}
	#snsbtm li{
		float:none;
		display: inline-block;
    		/* For IE 6/7 */
    		*display: inline;
    		*zoom: 1;
	}
	}

/* gNav */
	#gNav {
		text-align:center;
		position: relative;
		left:0;
		right:0;
		top:-80px;
		margin-bottom:-80px;
	}
	#gNav li{
		padding:10px;
		text-align: center;
		display: inline-block;
    		/* For IE 6/7 */
    		*display: inline;
    		*zoom: 1;
	}
	#gNav li span{
		display:none;
	}
	
#gNav .subNavi {
	width: 109px;
	position: absolute;
	display: none;
	top:50px;
	padding-top: 0px;
	margin-left: -10px;
	z-index: 5;
}

#gNav .subNavi li {
	width: 109px;
	float: none;
	font-size: 11px;
	line-height: 115%;
	text-align: center;
	padding: 0;
	border-bottom: 1px #d7dce3 solid;
	margin-bottom: 1px;
	background-color: rgba( 255, 255, 255, 0.8 );
}

#gNav .subNavi li a {
	padding: 12px 8px;
	display: block;
	color: #445365;
	text-decoration: none;
}
#gNav .subNavi li a:hover {
	color: #62abde;
}
	
	@media only screen and (max-width: 960px) {
	#gNav li{
		width:25%;
		text-align: center;
	}
	#gNav .subNavi {
	  width:25%;
	  position: absolute;
	  display: none;
	  top: 40px;
	  padding-top: 45px;
	  z-index: 5;
	}
	#gNav .subNavi li {
	  float: none;
	  margin-left: 20px;
	  text-align: center;
	  background-color: rgba( 255, 255, 255, 0.8 );
	}

	}
	@media only screen and (max-width: 640px) {
	#gNav{
		position:absolute;
		top:73px !important;
		background-color:#279cd8;
		color:#FFF;
		display:none;
		padding-top:0px;
		z-index:999;
	}
	#gNav ul{
		box-sizing: border-box;
		border-top: 1px solid #238cc2;
		border-bottom: 1px solid #52b0e0;
	}
	#gNav li{
		font-size:14px;
		display:block;
		width: 50%;
		padding: 0px;
		box-sizing: border-box;
		border-top: 1px solid #52b0e0;
		border-right: 1px solid #52b0e0;
		border-bottom: 1px solid #238cc2;
		border-right: 1px solid #238cc2;
		float: left;
	}
	#gNav li:hover{
    		filter: alpha(opacity=70);
    		-moz-opacity:0.7;
    		-khtml-opacity: 0.7;
    		opacity:0.7;
    		zoom:1;
	}
	#gNav li a{
		color:#FFF;
		text-decoration:none;
	}
	#gNav li span{
		display:block;
	}
	#gNav li img{
		display:none;
	}
	#gNav li:last-child{
		width: 100%;
	}
	#gNav li::nth-child(2){
		border-right:none;
	}
	#gNav li a{
		display:block;
		padding:15px;
	}
	#gNav .subNavi {
		visibility: hidden;
	}
	
	}
	
/* menu */	
	#menubtn {
		display: none;
	}
	#menubtn a:hover img{
	    	filter: alpha(opacity=100);
    		-moz-opacity:1;
    		-khtml-opacity:1;
    		opacity:1;
	}	
	@media only screen and (max-width:640px) {
	#menubtn {
		display:block;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	}
	
	
	
/* main */
	#main {
		float:left;
		width:71.875%;
	}
	@media only screen and (max-width: 640px) {
	#main{
		float:none;
		width:auto;
	}
	}
	
/* side */
	#side {
		float:right;
		width:23.9583333%;
	}
	@media only screen and (max-width: 640px) {
	#side{
		float:none;
		width:auto;
		text-align:center;
	}
	}
	
/* side logo */
	@media only screen and (max-width: 640px) {
	#side .logo{
		display:none;
	}
	}
	
/* side map */
	#side .map{
		margin-bottom:10px;
	}
	#side .map iframe {
		height:230px;
	}
	@media only screen and (max-width: 640px) {
	#side .map{
		margin:0px 20px 10px;
	}	
	}
	
/* side address */
	#side .address {
		margin-bottom:10px;
	}
	#side .address p{
		font-size:11px;
	}
	#side .address p.tel{
		font-size:15px;
	}

/* side sns */
	#side .facebook {
		margin-bottom:10px;
	}
	#side .facebook iframe {
		width:100%;
	}
	#side .twitter {
		margin-bottom:10px;
	}
	@media only screen and (max-width: 640px) {
	#side .facebook{
		margin:0px 20px 10px;
	}	
	#side .twitter{
		margin:0px 20px 10px;
	}	
	}
	

/* gFooter */	
	body #gFooter {
		background:url(../imgs/bg-ftr01.jpg) repeat-x top;
		padding-top:14px;
	}
	body #gFooter .Inner{
		background:url(../imgs/bg-ftr02.jpg) repeat-x top;
		background-size:cover;
		padding-top:30px;
	}
	body #gFooter .contact{
		font-size:11px;
		width:30%;
		float:left;
	}
	body #gFooter .telBox{
		display:none;
	}
	body #gFooter .sitemap{
		font-size:11px;
		width:65%;
		float:right;
	}
	body #gFooter .sitemap ul{
		vertical-align:top;
		display: inline-block;
    		/* For IE 6/7 */
    		*display: inline;
    		*zoom: 1;
		padding:0px 10px;
	}
	body #gFooter .sitemap ul li a{
		color:#000;
		text-decoration:none;
	}
	@media only screen and (max-width: 960px) {
	body #gFooter .contact{
		width:auto;
		float:none;
		text-align:center;
		margin-bottom:20px;
	}
	body #gFooter .sitemap{
		width:auto;
		float:none;
		display:table;
	}
	body #gFooter .sitemap ul{
		display:table-cell;
		width:20%;	
		padding:0px;
	}
	}
	@media only screen and (max-width: 640px) {
	body #gFooter .contact{
		width:70%;
		float:left;
		text-align:left;
		margin-bottom:20px;
		border-right:1px solid #ccc;
	}
	body #gFooter .telBox{
		display:block;
		position:relative;
		width:20%;
		float:right;
		margin-bottom:20px;
	}
	body #gFooter .telBox p{
		padding-top:40px;
		text-align:center;
	}
	body #gFooter .sitemap{
		display:none;
	}
	}
	
/* copyright */	
	#copyright {
		clear:both;
		font-size:11px;
		text-align:right;
		padding:10px 0px;
		letter-spacing:normal;
	}
	@media only screen and (max-width: 960px) {
	#copyright {
		text-align:center;
	}
	}
	
/* pagetop */	
	.pagetop {
		clear:both;
		font-size:11px;
		text-align:right;
		padding:10px 0px;
	}
	.pagetop a{
		color:#e92a55;
	}
	@media only screen and (max-width: 960px) {
	.pagetop {
		text-align:center;
	}
	}
	
	
/* sttl */
	.sttl{
		background:url(../imgs/bg-sttl.png) repeat-x bottom;
		padding-bottom:10px;
		margin-bottom:20px;		
	}
	.sttl2{
		background:url(../imgs/bg-sttl02.png) repeat-x center center;
		margin-bottom:20px;		
	}
	.sttl3{
		background:url(../imgs/bg-line01.png) repeat-x bottom;
		padding-bottom:10px;
		margin-bottom:20px;		
	}

/* table */
	table.menu01{
		width:100%;
		padding: 0px;
		border-collapse: collapse;
	}
	
	table.menu01 th{
		width:60%;
		padding: 2px;
		text-align: left;
		vertical-align: top;
		border: 1px solid #98c3e2;
		font-weight:normal;
	}
	
	table.menu01 td{
		padding: 2px;
		text-align: right;
		vertical-align: top;
		border: 1px solid #98c3e2;
	}
	@media only screen and (max-width: 960px) {
	table.menu01{
		margin-bottom:20px;
	}
	}


	
/* title */
	.titleA, .titleB, .titleC {
		font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	}
	.titleA {
		font-size: 24px;
	}
	.titleB {
		font-size: 18px;
	}
	.titleC {
		font-size: 14px;
	}
	.titleA span,
	.titleB span,
	.titleC span{
		display: none;
	}
	@media only screen and (max-width: 640px) {
	.titleA img,
	.titleB img,
	.titleC img{
		display: none;
	}
	.titleA span,
	.titleB span,
	.titleC span {
		display: block;
	}
	.titleA span br,
	.titleB span br,
	.titleC span br{
		display:none;		
	}
	.text br{
		display: none;
	}
	}
	@media only screen and (max-width: 480px) {
	.titleA {
		font-size: 18px;
	}
	.titleB {
		font-size: 16px;
	}
	.titleC {
		font-size: 12px;
	}
	}	
	
/* colum */
	.col2 {
		width:49%;
	}	
	
	
	
/* etc */
	.bold {
		font-weight:bold;
	}	
	.blue {
		color:#0379c3;
	}
	.blue2 {
		color:#25A6BA;
	}
	.red {
		color:#ff0000;
	}
		
		
@charset "utf-8";



/* mainContent */
	#mainContent{
		padding-top:60px;
	}
	
	@media only screen and (max-width: 960px) {
	#mainContent{
		padding-top:0px;
	}	
	}
	

/* concept */
	#concept .bgBox01{
		border-bottom:1px solid #e3eff4;
		border-top:1px solid #e3eff4;
		background:url(../../imgs/concept/bg-img01.jpg) no-repeat top center;
		background-size:cover;
		padding:40px 20px;
	}
	#concept .bgBox01 .fl{
		width:48%;
	}
	#concept .bgBox01 .fr{
		width:48%;
	}
	@media only screen and (max-width: 960px) {
	#concept .bgBox01{
		background-size:100% 100%;
	}
	#concept .bgBox01 .fl{
		margin-bottom:20px;
	}
	}
	
	@media only screen and (max-width: 640px) {
	#concept .logo{
		margin:0px auto 20px;
		width:65%;
	}
	}
	
	
	
/* menu */

	
	
	
/* gallery */		
	#gallery .listBox .box{
		margin-right:2.85714286%;
		float:left;
		width:22.8571429%;
		margin-bottom:20px;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
		position: relative;
		overflow: hidden;
	}
	#gallery .listBox .box:nth-of-type(4n){
		margin-right:0%;
	}
	#gallery .listBox .last{
		margin-right:0px !important;
	}	
	
	@media only screen and (max-width:640px) {
	#gallery .listBox .box{
		width:48%;
	}
	#gallery .listBox .box:nth-of-type(2n){
		float:right;
		margin-right:0%;
	}
	}
	
	
	#gallery .detailBox .box{
		margin-right:2.85714286%;
		float:left;
		width:22.8571429%;
		margin-bottom:20px;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
		position: relative;
		overflow: hidden;
	}
	#gallery .detailBox .photo span{
		height: 0;
		padding-bottom: 80%;
		overflow: hidden;
		display: block;
	}
	#gallery .detailBox .box:nth-of-type(4n){
		margin-right:0%;
	}
	#gallery .detailBox .last{
		margin-right:0px !important;
	}
	#gallery .detailBox .box .caption {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
		-webkit-transition: .3s;
		transition: .3s;
		opacity: 0;
	}
	#gallery .detailBox .box:hover .caption {
		opacity: 1;
	}
	#gallery .detailBox .caption .Inner {
		position:absolute;
		z-index: 2;
		bottom:0px;
		padding:5px;
	}
	#gallery .detailBox .caption h3{
		color:#FFF;
	}
	#gallery .detailBox .box .caption p{
		color:#FFF;
	}
	#gallery .detailBox .box .caption a{
		z-index:999;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	
	@media only screen and (max-width:640px) {
	#gallery .detailBox .box{
		width:48%;
	}
	#gallery .detailBox .box:nth-of-type(2n){
		float:right;
		margin-right:0%;
	}
	}
	
/* access */	
	#access #main .map iframe{
		height:500px;
	}
	@media only screen and (max-width:640px) {
	#access #main .map{
		margin:0px 20px;
		display:none;
	}
	}
	
/* contact */		
	#contact .wpcf7-form table {
		margin-bottom: 5px;
		width: 100%;
		border-bottom: 1px solid #ECECEC;
	}
	
	#contact .wpcf7-form th {
		border-top: 1px solid #ECECEC;
		color: #545454;
		font-size: 1.3em;
		padding: 0 2px 0 5px;
		text-align: left;
		vertical-align: middle;
	}
	
	#contact .wpcf7-form .special {
		margin: 0 0 20px 5px;
		font-size: 1.0em;
	}
	
	#contact .wpcf7-form .vTop {
		padding-top: 16px;
		vertical-align: top;
	}
	
	#contact .wpcf7-form th span {
		color: #C51010 ;
	}
	
	#contact .wpcf7-form td {
		border-top: 1px solid #ECECEC;
		padding: 6px 0 5px;
		text-align: left;
		vertical-align: middle;
	}
	
	#contact .wpcf7-form .submit {
		text-align: center;
	}
	
	#contact .wpcf7-form .submit input {
		border: 0;
	}
	
	#contact #fName,.wpcf7-text {
		height: 34px;
		width: 100%;
	}
	
	#contact #fEmail,.wpcf7-email {
		height: 34px;
		width: 100%;
	}
	
	#contact #fMessage,.wpcf7-textarea {
		border: 1px solid #D1D1D1;
		height: 156px;
		width: 100%;
	}
	
	#contact * input {
		border: 1px solid #D1D1D1;
	}
	@media only screen and (max-width:640px) {
	#contact .wpcf7-form th {
		width:40%;
	}
	#contact #fName,.wpcf7-text,
	#contact #fEmail,.wpcf7-email {
		width: 84%;
	}
	#contact #fMessage,.wpcf7-textarea {
		width: 90%;
	}
	}
	
	
/* staff */	
	#staff .profileBox h3{
		font-size:24px;
		color:#6d032b;
		font-weight:bold;
	}
	#staff .profileBox .photo{
		width:34.7826087%
	}
	#staff .profileBox .photo{
		width:34.7826087%
	}
	#staff .profileBox .textbox{
		width:59.4202899%
	}
	
	@media only screen and (max-width:640px) {
	#staff .profileBox .photo{
		margin-bottom:20px;
	}
	}