@charset "UTF-8";

html{font-size: 100%;}
body{font-size: 10px; font-size: 1.0rem;}
@media screen and (max-width: 768px){
	html{font-size: 90%;}
}

.PC{display:block;}
.SP{display:none;}
.imgFit{}

@media screen and (max-width: 768px){
.PC{display:none;}
.SP{display:block;}
.imgFit{width:100%;height:auto;}
}

body{
padding:0;
margin:0;}
header,

a{color:##092A61;text-decoration: none;}

#wrapper{
background:url(../img/layer00.jpg) repeat;
width:auto;
margin:0 auto;
padding:15px 15px 0 15px;
margin:0;
position:relative;}


@media screen and (max-width: 768px){
#wrapper{padding:5px 5px 0 5px;}
}

/* clear */
.clear{display:inline-block;}
.clear:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
/* Hides MacIE5 \*/
* html .clear{height:1%;}
.clear{display:block;}
/* Hides MacIE5 */

#MainImage{
height:830px;
width:auto;
position:relative;
overflow:hidden;}

#MainImage .logo{
mix-blend-mode:lighten;
position:absolute;
top: 205px;
left: 0;
right: 0;
margin: auto;
width: 260px;
height: 136px;
z-index:110;
}

#MainImage .logo2{
mix-blend-mode: multiply;
position:absolute;
top: 105px;
left: 0;
right: 0;
margin: auto;
width: 421px;
height: 220px;
z-index:60;
}

#MainImage ul.snslinktop{
	list-style-type: none;
	position:absolute;
	top: 10px;
	right: 10px;
	height: 30px;
	z-index:60;
	padding:0;
	margin:0;}
	#MainImage ul.snslinktop li{display: inline;line-height: 1;}
	#MainImage ul.snslinktop li img{width:30px;height:auto;}

@media screen and (max-width:768px){
	#MainImage .logo{padding-left:5px;box-sizing: border-box;width:200px;height:auto;top:148px;}
}


#MainImage #loader{
position : absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
z-index:50;
width:55px;
height:55px;
}

#MainImage .layer01{
z-index:90;
mix-blend-mode :difference;
background:url(../img/layer01.png) repeat;
height:431px;
width:100%;
position:absolute;
bottom:0;
left:0;
animation:scan 8s linear 0s infinite alternate;
-webkit-animation:scan 8s linear 0s infinite alternate;
}
@keyframes scan {
from {transform: translateY(200px);opacity:1;}
to {transform: translateY(-600px);opacity:0.3;}
}
@-webkit-keyframes scan {
from {-webkit-transform: translateY(200px);opacity:1;}
to {-webkit-transform: translateY(-600px);opacity:0.3;}
}
@media screen and (max-width:768px){
	#MainImage .layer01{mix-blend-mode :screen;
	animation:scan 5.5s ease-out 0s infinite alternate;
	-webkit-animation:scan 5.5s ease-out 0s infinite alternate;
	}
	@keyframes scan {
	from {transform: translateY(200px);opacity:1;}
	to {transform: translateY(-200px);opacity:0.5;}
	}
	@-webkit-keyframes scan {
	from {-webkit-transform: translateY(200px);opacity:1;}
	to {-webkit-transform: translateY(-200px);opacity:0.5;}
	}
}


#MainImage .layer10{
	z-index:90;
	mix-blend-mode :luminosity;
height:100%;
width:auto;
position:absolute;
top:0;
left:0;
animation:scan10 7s ease-in-out 0s infinite alternate;
-webkit-animation:scan10 7s ease-in-out 0s infinite alternate;
}
@keyframes scan10 {
0% {transform: translateX(1200px);opacity:0.1;}
50% {;opacity:0.75;}
100% {transform: translateX(-200px);opacity:0.2;}
}
@-webkit-keyframes scan10 {
	0% {-webkit-transform: translateX(1200px);opacity:0.1;}
	50% {;opacity:0.75;}
	100% {-webkit-transform: translateX(-200px);opacity:0.2;}
}

@media screen and (max-width:768px){
	#MainImage .layer10{
		display:none;
		mix-blend-mode:luminosity;
		animation:scan10b 5s ease-in-out 0s infinite alternate;
		-webkit-animation:scan10b 5s ease-in-out 0s infinite alternate;
	}
		@keyframes scan10b {
		from {transform: translateX(-100px);opacity:0.75;}
		to {transform: translateX(500px);opacity:0.1;}
		}
		@-webkit-keyframes scan10b {
		from {-webkit-transform: translateX(-100px);opacity:0.75;}
		to {-webkit-transform: translateX(500px);opacity:0.1;}
		}
}


#MainImage .layer11{
z-index:100;
mix-blend-mode:normal;
background:url(../img/stump.png) no-repeat;
background-size: contain;
width:100px;
height:103px;
position:absolute;
top:0;
right:10%;
animation:scan11 15s ease-out 0s 1;
-webkit-animation:scan11 15s ease-out 0s 1;
}
#MainImage .layer11b{
z-index:100;
mix-blend-mode :normal;
background:url(../img/stump.png) no-repeat;
background-size: contain;
width:100px;
height:103px;
position:absolute;
top:-84px;
opacity:0;
right:13%;
animation:scan11 15s ease-out 1s 1;
-webkit-animation:scan11 15s ease-out 1s 1;
}
#MainImage .layer11c{
z-index:100;
mix-blend-mode :normal;
background:url(../img/stump.png) no-repeat;
background-size: contain;
width:100px;
height:103px;
position:absolute;
top:-148px;
opacity:0;
right:8%;
animation:scan11 15s ease-out 2s 1;
-webkit-animation:scan11 15s ease-out 2s 1;
}
#MainImage .layer11d{
z-index:100;
mix-blend-mode :normal;
background:url(../img/stump.png) no-repeat;
background-size: contain;
width:100px;
height:103px;
position:absolute;
top:-208px;
opacity:0;
right:13%;
animation:scan11 15s ease-out 3s 1;
-webkit-animation:scan11 15s ease-out 3s 1;
}
#MainImage .layer11e{
z-index:100;
mix-blend-mode :normal;
background:url(../img/stump.png) no-repeat;
background-size: contain;
width:100px;
height:103px;
position:absolute;
top:-287px;
opacity:0;
right:9%;
animation:scan11 15s ease-out 4s 1;
-webkit-animation:scan11 15s ease-out 4s 1;
}

@keyframes scan11 {
0% {transform: translateY(-50px);opacity:1;}
3% {transform: translateY(737px);opacity:1;}
100% {transform: translateY(737px);opacity:1;}
}
@-webkit-keyframes scan11 {
	0% {-webkit-transform: translateY(-50px);opacity:1;}
	3% {-webkit-transform: translateY(757px);opacity:1;}
	100% {-webkit-transform: translateY(757px);opacity:1;}
}


.layer01,
.layer08,
.layer10{display:none;}


#MainImage .fade.PC{
position : absolute;
mix-blend-mode :difference;
top:0;
left:0;
margin:0;
z-index:100;
width:100%;
padding:0;
height:830px;
overflow:hidden;
opacity:0.0;
transition : opacity 2s;
}

#MainImage .fade .slick-prev,
#MainImage .fade .slick-next{display: none!important;}

@media only screen and (max-width:768px){
	#MainImage .fade.PC{display:none;}
	#MainImage .fade.SP{
	display: block;
	mix-blend-mode :difference;
	top:0;
	left:0;
	width:auto;
	padding:0;
	height:380px;
	margin:0;
	z-index:100;
	overflow:hidden;
	}
	#MainImage .fade img{height:380px;margin-left:-150px;}
}

#MainImage .layer04{
mix-blend-mode :luminosity;
position : absolute;
top:311px;
left:260px;
z-index:39;
}

#MainImage .layer05{
position : absolute;
background: url(../img/layer05.png) no-repeat;
background-size:200px 198px;
width:200px;
height:198px;
/*top:450px;*/
left:20px;
z-index:65;
animation:shadow_neko 6s linear 0s infinite alternate;
-webkit-animation:shadow_neko 6s linear 0s infinite alternate;
}
@keyframes shadow_neko {
0% { opacity:0;transform: rotate(0deg) translateY(500px);}
10% { opacity:0.7;transform: rotate(0deg) translateY(480px);}
50% { opacity:0;transform: rotate(10deg) translateY(500px);}
80% { opacity:0;transform: rotate(0deg) translateY(460px);}
100% { opacity:0;transform: rotate(0deg) translateY(500px);}
}
@-webkit-keyframes shadow_neko {
0% { opacity:0;-webkit-transform: rotate(-10deg);}
10% { opacity:0.7;-webkit-transform: rotate(0deg);}
50% { opacity:0;-webkit-transform: rotate(0deg);}
100% { opacity:0;-webkit-transform: rotate(-10deg);}
}


#MainImage .layer05.escape{
	top:50px;
	opacity:1;
	background-size:70px 66px;
}
#MainImage .layer05.escape2{
	top:35%;
	opacity:1;
	background-size:800px 755px;
}
#MainImage .layer05.escape3{
	top:20%;
	opacity:1;
	background-size:150px 142px;
}
#MainImage .layer05 span{position:absolute;left:3rem;top:1rem;font-size:120%;color:#000;font-weight:bold;line-height: 2;display: inline-block;margin-top:-50px;}


#MainImage .layer05b{
transform: rotate(0deg);
mix-blend-mode :overlay;
position : absolute;
top:60%;
right:40%;
z-index:55;
width:200px;
height:auto;
transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
animation:shadow_neko2 10s linear 0s infinite alternate;
-webkit-animation:shadow_neko2 10s linear 0s infinite alternate;
}
@keyframes shadow_neko2 {
  0%  { transform: skew(0deg,0deg);opacity:0;}
  25% { transform: skew(20deg, 20deg);opacity:0;}
  75% { transform: skew(-20deg, -20deg);opacity:1;}
  100% { transform: skew(0deg,0deg);opacity:0;}
}
@-webkit-keyframes shadow_neko2 {
  0%  { -webkit-transform: skew(0deg,0deg);opacity:0;}
  25% { -webkit-transform: skew(20deg, 20deg);opacity:0;}
  75% { -webkit-transform: skew(-20deg, -20deg);opacity:1;}
  100% { -webkit-transform: skew(0deg,0deg);opacity:0;}
}



#MainImage .layer06{
background:url(../img/metal02.jpg) repeat-x left top;
position : absolute;
mix-blend-mode : multiply;
top:-40px;
left:0px;
z-index:41;
width:100%;
height:420px;
overflow:hidden;
}


#MainImage .layer07{
position : absolute;
mix-blend-mode : multiply;
top:240px;
left:0px;
overflow:hidden;
z-index:32;
}

#MainImage .layer08{
mix-blend-mode:saturation;
position : absolute;
top:500px;
left:50px;
z-index:92;
}

#MainImage .layer09{
mix-blend-mode: difference;
position : absolute;
top:380px;
right:200px;
z-index:39;
}

h2{text-align:center;padding:60px 0 20px 0;margin:0;}
@media screen and (max-width: 768px){
h2{padding:30px 0 10px 0;max-width:150px;margin:0 auto;}
h2 img{width:100%;height:auto;}
#MainImage{height:380px;}
#MainImage .layer01{height:270px;}
#MainImage .layer02{height:380px;width:auto;top: 0;left:-250px;}
#MainImage .layer02 img{height:380px;width:auto;overflow: hidden;}
#MainImage .layer02b{height:380px;top: 0;left:-150px;width:auto;}
#MainImage .layer02b img{height:380px;width:auto;overflow: hidden;}
/*#MainImage .layer05{top:150px;left:-10px;}*/
#wrapper .layer05sp{
	width:80px;
	height:auto;
	position : absolute;
	top:-50px;
	right:20px;
	z-index:120;
	animation:shadow_neko3 50s linear 0s infinite;
	-webkit-animation:shadow_neko3 50s linear 0s infinite;
}
#wrapper .layer05sp span{font-size:80%;color:#000;font-weight:bold;line-height: 1;}
#wrapper .layer05sp img{width:100%;height:auto;}
@keyframes shadow_neko3 {
0% { opacity:0;transform: rotate(0deg) translateY(0px) scale(1);}
30% { opacity:0.8;transform: rotate(10deg) translateY(800px) scale(1.3);}
50% { opacity:0.1;transform: rotate(10deg) translateY(1100px) scale(0.6);}
70% { opacity:0.4;transform: rotate(0deg) translateY(2000px) scale(0.3);}
100% { opacity:0.7;transform: rotate(-10deg) translateY(3000px) scale(1);}

}
@-webkit-keyframes shadow_neko3 {
0% { opacity:0;-webkit-transform: rotate(0deg) translateY(0px) scale(1);}
30% { opacity:0.8;-webkit-transform: rotate(10deg) translateY(800px) scale(1.3);}
50% { opacity:0.1;-webkit-transform: rotate(10deg) translateY(1100px) scale(0.6);}
70% { opacity:0.4;-webkit-transform: rotate(0deg) translateY(2000px) scale(0.3);}
100% { opacity:0.7;-webkit-transform: rotate(-10deg) translateY(3000px) scale(1);}
}





#MainImage .layer05b,
#MainImage .layer08{display:none;}
#MainImage .layer09{display:none;}
#MainImage .layer03 img{display:none;}
#MainImage .layer03{
	background:url(../img/layer03.jpg) repeat;
	position : absolute;
	top:0px;
	right:360px;
	z-index:30;
	height:5;
	width:507px;
	animation:scan2 6s linear 0s infinite alternate;
	-webkit-animation:scan2 6s linear 0s infinite alternate;}
	@keyframes scan2 {
	from {transform: translateX(-50px);opacity:0.3;}
	to {transform: translateX(800px);opacity:1;}
	}
	@-webkit-keyframes scan2 {
	from {-webkit-transform: translateX(-50px);opacity:0.3;}
	to {-webkit-transform: translateX(800px);opacity:1;}
	}
}

/*----------------------------------
nav
------------------------------------*/
body.top .nav{width:auto;z-index:100;position:absolute;top:680px;left:0;right:0;margin:0 0;}
body.top .nav.fixed,
body.inquiry .nav.fixed {position: fixed;top: 0;left: 0;width: 100%;background:url(../img/bg_blue.gif) repeat;display: table;}


	.nav p.navlogo{display: none;}
	.nav.fixed p.navlogo{display:table-cell;vertical-align: middle;line-height: 1;padding: 4px 30px 0 20px;}

	.nav ul.snslink{display:none;}
	.nav.fixed ul.snslink{position:static;display:table-cell;width:100px;padding:0 10px;box-sizing: border-box;text-align: center;list-style-type: none;vertical-align: middle;}
	.nav ul.snslink li{display: inline;}
	.nav ul.snslink li img{width:30px;height:auto;vertical-align: bottom;}
		@media screen and (max-width:1147px){
			.nav ul.snslink li{display: block;}
			.nav ul.snslink li img{width:20px;height:auto;}
			}
	.nav .menu{width:100%;display:none;padding:0;}
	.nav .menu ul.gn{width:980px;margin:0 auto;padding:0;list-style-type:none;mix-blend-mode:color-dodge;}
		@media screen and (max-width:1020px){.nav .menu ul.gn{width:100%;padding:0 20px;box-sizing: border-box;}}

	.nav.fixed .menu{display:table-cell;text-align: right;margin:0;padding:0;}
	.nav.fixed .menu ul.gn{width:100%;margin:0;padding:0;mix-blend-mode:normal;float:none;}
		@media screen and (min-width:1254px){.nav.fixed .menu ul.gn{width:980px;float:right;}}
		.nav ul.gn li{display:table-cell;width:10%;box-sizing: border-box;line-height:1.6;text-align:center;border-right:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff;}
		.nav ul.gn li:first-child{border-left:1px solid #fff;}
			.nav ul.gn li a{
				font-size:123%;
				color:#fff;
				padding:20px 0 25px 0;
				display:block;
				text-decoration:none;
				opacity:1;
				font-weight:bold;
				font-family: 'Maven Pro';
				border-top:2px solid rgba(211,156,105,0);
				border-bottom:2px solid rgba(211,156,105,0);
			}
		@media screen and (max-width:1147px){.nav ul.gn li a{font-size:110%;}}
			.nav ul.gn li.current a,
			.nav ul.gn li:hover a,
			.nav ul.gn li a.active{background:url(../img/layer01b.png) repeat;mix-blend-mode:normal;color:#000;}

			.nav.fixed ul.gn li{border-top:none;border-bottom:none;}
			.nav.fixed ul.gn li a{padding:15px 15px 20px;}
		@media screen and (max-width:1147px){.nav.fixed ul.gn li a{padding:15px 5px 20px;}}



@media screen and (max-width: 768px){
body.top .nav.fixed,
body.inquiry .nav.fixed{display:none;}
.nav ul.gn{width:100%;display:none;}
.nav ul.gn li{display:block;width:100%;border-left:1px solid #fff;border-bottom:none;box-sizing:border-box;background:url(../img/bg_blue.gif) repeat;}
.nav ul.gn li a{font-size:100%;padding:15px 0 20px 0;}
}
@media screen and (max-width: 768px){.nav.fixed{display:none;}}

/*----------------------------------
SP nav
------------------------------------*/
.spnavbtn{display: none;}
.spnav{display: none;}
@media screen and (max-width:768px){
	body{
		position: relative;
    left: 0;
    overflow-x: hidden;
		transition: all .5s;}
		body.cover{
			position: relative;
	    left: 160px;
	    overflow-x: hidden;
			transition: all .5s;}
	.spnavbtn{display: block;
	position: fixed;
	left:0;
	top:20px;
	width:45px;
	height: 45px;
	background: url(../img/bg_blue.gif) no-repeat left top;
	font-size:0;
	z-index:900;
	transition: left .5s;
	}
	.spnavbtn.active{left:160px;transition: left .5s;}
	#btnicon{
	  display: block;
	  position: absolute;
	  top: 13px;
	  left: 6px;
	  width: 30px;
	  height: 2px;
	  margin: 0px 0 0 0px;
	  background: #fff;
	  transition: .2s;
	}
	#btnicon:before, #btnicon:after{
	  display: block;
	  content: "";
	  position: absolute;
	  top: 14px;
	  left: 0;
	  width: 30px;
	  height: 2px;
	  background: #fff;
	  transition: .3s;
	}
	#btnicon:before{margin-top: -6px;}
	#btnicon:after{margin-top: 2px;}

.spnav{
	background:url("../img/bg_blue.gif") repeat-y left top;
	position: fixed;
	top: 0;
	left: -160px;
	width: 160px;
	height: 100%;
	transition: left .5s;
	display: block;
	}
	.spnav.active{left: 0;transition: left .5s;}
	.spnav ul{list-style-type:none;margin:0;padding: 0;}
	.spnav ul li a{
		font-weight:bold;
		font-family: 'Maven Pro';
		color:#fff;
		font-size:110%;
		display:block;
		text-decoration: none;
		padding: 20px 10px;
		border-bottom:1px solid #fff;}
}
.spnav ul li.current a{background: #fff;color: #000;}

/*----------------------------------
custom
------------------------------------*/
#custom{
	z-index:30;
padding:60px 0 60px;
/*margin-top:-60px;*/
background:url(../img/layer01b.png) repeat;
width:auto;
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;}

#custom .intro{width:980px;margin:0 auto;padding:50px 0 40px;border-bottom:4px solid #000;display:table;}
#custom .intro .leftarea{width:35%;display:table-cell;vertical-align: middle;}
#custom .intro .leftarea h2{padding:30px 20px 0 0;text-align:center;}
#custom .intro .rightarea{width:65%;display:table-cell;vertical-align: top;}
#custom .intro .rightarea p{font-size:100%;font-weight:500;line-height:1.8;}

#custom article{width:980px;padding:0 0 60px;margin:0 auto;font-size:100%;font-weight:bold;border:none;border-bottom: 4px solid #000;}
#custom article p{margin:0 0 35px;padding:0;opacity:1;}
#custom article p.large{font-size:120%;text-align: center;}
#custom article ul{margin:0 auto 35px;padding-left:200px;color:#666;}

@media screen and (max-width:980px){
#custom article{width:100%;}
#custom article p.large{font-size:120%;text-align: center;}
#custom article p.btn{}
#custom article ul{padding-left:1.5rem;width:auto;font-size:115%;}
#custom article ul li{margin:0 0 5px 0;}
#custom .intro{width:100%;padding: 0 20px 20px 0;box-sizing: border-box;}
#custom .intro .rightarea p{font-size:100%;}
}

@media screen and (max-width: 768px){
#custom{padding:0 10px;margin-top:0;}
#custom .intro{width:auto;margin:0 auto;padding:30px 0 20px;border-bottom:4px solid #000;display:block;}
#custom .intro .leftarea{width:100%;display:block;text-align:center;}
#custom .intro .leftarea h2{padding:20px 0;max-width:130px;margin:0 auto;}
#custom .intro .leftarea h2 img{width:100%;height:auto;}
#custom .intro .rightarea{width:100%;display:block;padding:0 8px 0 10px;font-size:80%;box-sizing: border-box;}
#custom article{width:auto;padding:0 10px 30px;margin:0 auto;font-size:85%;font-weight:bold;border:none;border-bottom: 4px solid #000;}
#custom article ul{margin:0 auto 30px;padding:0 5px 0 30px;color:#666;}
}


#custom .techBlock{
  display:flex;
  justify-content: space-around;
  margin:0 30px 0 0;
  padding: 0;
}
.techBlock div{
  margin:0;
  padding: 0 0;
  line-height: 1;
  width:25%;
  height:180px;
  display:block;
  text-align: right;
  font-size: 120%;
  color:#000;
}
  .tech01,  .tech02,  .tech03{
    position: relative;
    overflow: hidden;
  }
  .tech01 a,  .tech02 a,  .tech03 a{outline: none;}
  .tech01 h3,  .tech02 h3,  .tech03 h3{
    font-size:105%;
    margin:0;
    position:absolute;
    right: 178px;
    top:80px;
    padding: 0 25px 0 0;
    display: block;
    background: url(../img/tech_icon.png) no-repeat right center;}

  .tech01 img,  .tech02 img,  .tech03 img{
    margin:0 -50px 0 0;
    padding: 0;
    width:270px;
    clip-path: circle(68px at center);
    -webkit-clip-path: circle(68px at center);
    zoom:1;
    transition: 0.5s;
    border:none;
    border:0;
    outline: none;
  }
  .tech01 img:hover,  .tech02 img:hover,  .tech03 img:hover{
    outline: none;
    cursor:pointer;
    width:270px;
    clip-path: circle(78px at center);
    -webkit-clip-path: circle(78px at center);}

.fancybox-slide .modal p.img{width:350px;float:right;margin:0 0 0 20px;padding:0;text-align: right;}
#custom .modal .text{}
#custom .techBlock2{margin:40px 0 0 0;padding:0;width: 100%;}
#custom .bnr{margin:0 auto;padding:0;width:347px;height:123px;background:url(../img/bg_blue.gif) repeat-x left top;zoom:0.9;}
#custom .bnr a{display: block;margin:0;padding:0;display: table;overflow: hidden;width:347px;height:123px;}
#custom .bnr a span{background: url(../img/tech_bnr.png) no-repeat right top;width:347px;height:123px;display: block;transition: 0.3s;font-size:0;}
#custom .bnr a span:hover{background: url(../img/tech_bnr.png) no-repeat right -200px top;}

@media screen and (max-width:768px){
#custom .techBlock{margin: -20px 0 0 0;}
    .techBlock div{width:auto;text-align: left;height:auto;}
    .tech01 h3, .tech02 h3, .tech03 h3{right:0;left:30px;top:55px;margin:auto;z-index: 100;color:#fff;
    background:none;width:50px;}
      .tech01 img, .tech02 img, .tech03 img{width:195px;clip-path: circle(44px at center);
    -webkit-clip-path: circle(44px at center);margin:0 0px 0 -52px;}
    .tech01 img:hover,  .tech02 img:hover,  .tech03 img:hover{
      width:200px;
      clip-path: circle(60px at center);
      -webkit-clip-path: circle(60px at center);}
    #custom .bnr{float:none;zoom:0.6;margin:0 auto;}
    #custom .techBlock2{margin:20px 0 0 0;}
  .fancybox-slide .modal p.img{width:auto;height:auto;margin:0 0 10px;}
  .fancybox-slide .modal p.img img{width: 100%;height:auto;}
}



/*----------------------------------
example
------------------------------------*/
#example{
background:url(../img/layer01b.png) repeat;
width:auto;
margin:-60px auto 0;
padding:60px 0 20px 0;
font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;}
#example h2{padding-top:30px;}
#example article{}
#example article .itemArea{margin:0 auto;width:auto;letter-spacing: -0.4em;border-top:1px dotted #999;}
#example article .item{width:25%;border-right:1px dotted #999;border-bottom:1px dotted #999;margin:0;padding:0;box-sizing: border-box;position:relative;vertical-align:top;}
#example article .itemArea{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#example article .item .itemcover{display:none;background:rgba(15,63,120,0.7);width:100%;position:absolute;top:0;left:0;padding:130px 0 0 0;box-sizing:border-box;text-align:center;}
#example article .item .itemcover span{border-top:1px solid #fff;border-bottom:1px solid #fff;padding:10px;color:#fff;font-size:110%;font-weight:bold;text-align:center;letter-spacing:normal;}
#example article .item p.img{display:block;margin:0 auto;padding:10px 10px 0 10px;vertical-align: middle;text-align: center;box-sizing: border-box;width:100%;max-width:326px;}
#example article .item p.img img{
	object-fit: contain;
  width: 100%;
  height: auto;
	max-height:326px;
}
#example article .item p.img a{margin:0;padding:0;display:block;}
#example article .item p.img a:hover{display:block;}
#example article .item .txtArea a{text-decoration:none;color:#000;}
#example article .item .txtArea a:hover{display:block;}
#example article .item h3{font-size:100%;font-weight:bold;text-align:center;margin:0;padding:15px 10px 5px;letter-spacing:normal;}
#example article .item p.txt{font-size:90%;font-weight:500;line-height:1.6;margin:0 5px;padding:0 5px 20px 10px;letter-spacing:normal;}

@media screen and (max-width: 1200px) {#example article .item{width:33.3%;}}
@media screen and (max-width: 768px) {
	#example{margin:0 auto;padding:0 0 20px;}
	#example article .item{width:50%;}
	#example article .item:last-child{border-bottom:none;}
	#example article .item h3{padding:8px 10px 5px;font-size: 90%;}
	#example article .item p.img{padding:10px 5px 0;}
	#example article .item p.img img{max-height:260px;}
	#example article .item p.txt{font-size:80%;}
}
@media screen and (max-width: 480px) {#example article .item{width:auto;margin:0 10px;border-right:none;}}

/*--modal---*/
.itemLarge{
	display:none;
	padding:30px 20px 20px 20px;
	overflow:visible;
	height:100%;
	width:auto;
}

.itemLarge p img{margin:0 auto;height:100%;width:auto;}
.modal-content h3{font-size:100%;font-weight:bold;margin:5px 0 7px 0;padding:0;line-height:1.3;}
.modal-content p {margin:0;padding:0;font-size:90%;}
.modal-content p img{width:100%;height:auto;}


/*----------------------------------
contact
------------------------------------*/
#contact{
	padding-top:60px;
	margin-top:-60px;
	background:url(../img/layer01b.png) repeat;padding-bottom:70px;}
#contact article{width:980px;margin:0 auto;}
#contact article p{text-align:center;}
#contact article ul.btn{
list-style-type:none;
margin:60px auto 0;
padding:0;
text-align:center;}
#contact article ul.btn li{display: inline-block;background:url(../img/bg_blue.gif) repeat;width:430px;height:105px;font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;border:none;text-align:center;}
/*#contact article ul.btn li:first-child{margin:0 60px 0 0;}*/
#contact article ul.btn li a{color:#fff;text-decoration:none;font-size:140%;font-weight:bold;padding:35px;display:block;line-height:1.6;}
#contact article ul.btn li:hover a{background:#000;border-radius:0px;}
#contact article p{font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;font-size:110%;font-weight:bold;border:none;}

@media screen and (max-width:980px){
#contact article{width:100%;}
}
@media screen and (max-width: 768px){
#contact{padding:0 10px 40px;margin:0;}
#contact article{width:auto;margin:0 auto;border-top:4px solid #000;}
body.inquiry #contact article{border-top:none;}
#contact article ul.btn{text-align:center;margin:20px auto 0;}
#contact article ul.btn li:first-child{margin:0 auto 10px;}
#contact article ul.btn li{background:url(../img/bg_blue.gif) repeat;background-color: none;display:block;width:80%;margin:0 auto;height:auto;}
#contact article ul.btn li a{font-size:100%;padding:20px;line-height:1;display:block;}
#contact article ul.btn li a img{width:100%;}
#contact article p{font-size:90%;}
}

/*----------------------------------
map
------------------------------------*/
#map{padding:50px 5% 70px;margin:0;
	background:url(../img/layer01b.png) repeat;overflow:hidden;position: relative;}
#map p{text-align: center;	font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;margin:0 0 40px 0;font-weight: bold;}
#map .mapinner{overflow: hidden!important;}
/*#map .mask{position:absolute;left:5%;top:5px;width:90%;height:46px;background:url(../img/layer01b.png) repeat;}*/
#map iframe{border:none!important;margin:0 auto;}
.i4ewOd-pzNkMb-haAclf{display:none!important;}


/*----------------------------------
insta
------------------------------------*/
#insta{padding:50px 0 70px;margin:0;
	/*background:url(../img/layer01b.png) repeat;*/overflow:hidden;position: relative;}
#insta #instafeed{
	padding:0;
	height:250px;
	overflow:hidden;
	}
#insta #instafeed div img{height:250px;width:250px;}
/*#insta #instafeed div{display:inline;}*/

#insta #instafeed .slick-prev,
#insta #instafeed .slick-next{top:50%!important;}
#insta #instafeed .slick-prev:before,
#insta #instafeed .slick-next:before{font-size:70px;}

/*----------------------------------
about
------------------------------------*/
#about{font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;}
#about article{width:980px;margin:0 auto;padding-bottom:60px;}
#about article:after{display: block;content: "";clear: both;overflow: hidden;}
#about article h3{font-size:180%;font-weight:bold;color:#fff;}
#about article p.photo{float:right;}
#about article dl{font-size:95%;color:#fff;}
#about article dt{line-height:1.4;float:left;clear:left;padding:0px 0 5px;width:4em;}
#about article dd{line-height:1.4;padding:0px 0 5px 4em;margin:0;}

@media screen and (max-width:980px){
	#about article{width:auto;padding:0 3rem 60px;}
	#about article h3{text-align: center;}
	#about article p.photo{float:none;text-align: center;}
}
@media screen and (max-width: 768px){
#about article{width:auto;margin:0 auto;padding:0 0.5rem 60px;}
#about article p.photo{float:none;text-align:center;width:120px;margin:0 auto;}
#about article p.photo img{width:100%;height:auto;}
#about article h3{font-size:120%;font-weight:bold;color:#fff;text-align:center;}
#about article dl{font-size:80%;margin:20px 0 0 10px;}
}


/*----------------------------------
トップへ戻るボタン
------------------------------------*/
.topBtn {
  position:fixed;
  bottom:33px;
  right:50px;
  display:block;
  background:url(../img/bg_blue.gif) no-repeat;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:80px;
  height:80px;
  text-align:center;
  line-height:22px;
  border-radius:40px;
  padding-top:30px;
  box-sizing:border-box;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
background:#000;
background-image:none;
}

@media only screen and (max-width:768px){
	.topBtn {
	  position:fixed;
	  bottom:10px;
	  right:10px;
	  width:45px;
	  height:45px;
	  border-radius:30px;
	  font-size:0;
	  background:url(../img/bg_blue.gif) no-repeat;
	}
	.topBtn:before {
	  font-size:16px;
	}

	.topBtn:hover {
	background-color:none;
	background:url(../img/bg_blue.gif) no-repeat;
	}
}


/*----------------------------------
footer
------------------------------------*/
footer{
background:url(../img/footer_bg.jpg) no-repeat left top;height:130px;padding:20px 0;}
footer .inner{width:980px;margin:0 auto;color:#fff;font-size:85%;font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;}
footer .inner p{line-height:1.8;margin:1em 0;}
footer .inner a{color:#eba258;text-decoration:none;}
footer p.copyright{text-align:right;margin-bottom:0;}
.center{text-align:center;}
@media screen and (max-width:980px){
	footer{padding:10px 0;height:auto;}
	footer .inner{width:auto;}
	footer .inner p{text-align: center;}
	footer .copyright{text-align: center;}
}
@media screen and (max-width: 768px){
footer{padding:10px;background-position:center center;}
footer .inner{width:auto;font-size:75%;text-align:center;}
footer .copyright{text-align:center;}
}