@charset "UTF-8";

*{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

html{
color:#444;
background-color:#fff;
}

body{
-webkit-text-size-adjust:100%;
text-align:center;
}

html, body {
height:100%;
}


::selection {
background: #444;
color: #fff;
}

::-moz-selection {
background: #444;
color: #fff;
}

a, a:visited{
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
opacity:1;
filter:alpha(opacity100);
-ms-filter:"alpha(opacity=100)";
-khtml-opacity:1;
-moz-opacity:1;
}

a:hover, a:visited:hover{
opacity:.5;
filter:alpha(opacity50);
-ms-filter:"alpha(opacity=50)";
-khtml-opacity:.5;
-moz-opacity:.5;
}


hr.line{
display:block;
border:none;
height:1px;
width:0px;
background:#444;
margin:0 auto;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
transition:0.5s;
}

hr.line.disp{
width:54px;
}


 #kimg {
       width:100%;
     height: 570px;
     background: #001248;
     position: relative;
    }

 #kimg .visial{
     width: 960px;
    margin: 0 auto;
     overflow: hidden;
     padding-top:200px;
     overflow:hidden;
     
    }

 #kimg .visial .video{
     -webkit-mask-image:url(../images/logo.png);
mask-image: url(../images/logo.png);
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position:left 50%;
mask-position:left 50%;
-webkit-mask-size: contain;
mask-size: contain;
position: absolute;
     margin-top:30px;
    }

 #kimg .visial .text{
     width:65%;
     overflow: hidden;
     text-align: left;
     float: right;
     padding-top:20px;
     
    }

 #kimg .visial .text p{
       width:100%;
     color: #fff;
     font-weight: bold;
     font-size: 18px;
     letter-spacing: 7px;
     line-height: 2;
     padding-left:30px;
    }

 #kimg .background{
       width:100%;
     position: relative;
    }
 #kimg .background-img{
        display: none;
    }  

.scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-decoration: none;
    padding-top: 60px;
    color: #fff;
}

.scroll span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}

.scroll span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}

@-moz-document url-prefix() {
  .scroll span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
}

@supports (-ms-ime-align: auto) {
	.scroll span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
  }



@supports (-ms-ime-align: auto) {
.scroll span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


header {
    position: fixed;
    top: 0;
    left:0;
    width:100%;
    background-color: rgba(51,51,51,1);
    opacity: 0.7;
    z-index: 1;
}

nav {
    margin:0 auto;
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-size:16px;
    letter-spacing: 0.08em;
    max-width: 1030px;
}
nav ul.nav-global {
  display: flex;
}
 
nav ul.nav-global li{
        width:15%;
    }    
/*nav ul.nav-global li:first-child {
    margin-right: auto;
  }*/
nav ul.nav-global li.info{
    width:20%;
    }


nav ul.nav-global li.logo{
        width:30%;
    text-align: left;
    }
nav ul.nav-global li.tel{
    width:30%;
    font-weight: bold;
    vertical-align: sub;
    color: #fff;
    padding-top:5px;
    text-align: right;
}


nav ul.nav-global li span.nav-title{
        vertical-align: sub;
    }


nav ul.nav-global li a{
    color: #fff;
    text-decoration: none;
}
 header nav ul.nav-global li.tel a[href^="tel:"]{
    pointer-events: none;
}

.content {
background:#fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding-bottom:10px;
}

.content-full {
height:100%;
}

#done {
height:100%;
}


h1{
width:270px;
height:164px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
display:block;
}

h1 img{
width:100%;
}

h1 .img{
display:none;
}

.ie h1 .img{
display:block;
}

.ie h1 .svg{
display:none;
}


/* information */

#information{
padding-top:30px;
padding-bottom:200px;
}

#information h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;
}

#information ul{
max-width:800px;
margin:0 auto;
}

#information ul:after{
content:" ";
display:block;
clear:both;
}

#information ul li{
list-style:none;
vertical-align:middle;
text-align:left;
position:relative;
transition:all 800ms;    
/*max-width: 500px;
display:inline-block;*/
}

#information ul li img{
vertical-align: top;
}


#information ul li a{
	text-decoration: none;
	color:#444;
}


#information ul li span.date{
	font-family: 'Roboto', sans-serif;
    font-size:19px;
	letter-spacing:0.3em;
	font-weight: 400;
	margin-right: 10px;
	padding: 10px 10px;
	border:1px #ccc solid;
    display: inline-block;
}

#information ul li p{
	font-size: 18px;
	line-height: 1.8;
    padding-top: 10px;
    padding-left:30px;
}


/* services */

#services{
padding-top:30px;
padding-bottom:180px;
}

#services h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;
}

#services p{
font-size:24px;
letter-spacing:0.08em;
line-height:1.8;
}


#services ul{
/*max-width:870px;*/
max-width:1200px;
margin:0 auto;
}

#services ul:after{
content:" ";
display:block;
clear:both;
}

#services ul li{
list-style:none;
/*border:1px #E5E7E7 solid;
border:1px #444 solid;*/
/*border-radius:100px;*/    
color: #fff;
height:184px;
width:184px;
display:inline-block;
text-align:center;
position:relative;
margin:10px;
   
}

#services ul li .text{
display:block;
width:100%;
height: 100%;
background: #001248;
text-align:center;
/*border-radius:100px;*/
}

#services ul li .text span{
	display: block;
	width: 100%;
position: absolute;
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#services ul li .text h3{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:28px;
margin-bottom:10px;
font-style: italic;     
}

#services ul li .text h3.fs{
font-size:23px;  
}

#services ul li .text p{
font-size:13px;
font-weight:bold;
line-height:1.4;
}




/* works */

#works{
padding-top:30px;
padding-bottom:180px;
}

#works h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:30px;
}

#works .works{
max-width:1030px;    
margin:0 auto;
}

#works ul:after{
content:" ";
display:block;
clear:both;
}

#works .works li{  
width:48%;   
float: left;
display: inline-block;
}

#works .works li:first-child{  
padding-right: 4%;
}

#works .works li .youtube{  
position: relative;
padding-bottom: 56.25%;
}

#works .works li iframe{  
position: absolute;    
width: 100%!important;
height:100%!important;
left: 0;
top: 0;	
}

#works .works li .text{  
font-size:22px;
font-weight: bold;
}

#works .works li .text span{  
font-size:20px;
}


#works .notice,
#works .notice1{
width: 720px;
margin: 0 auto;
font-size: 18px;
}

#works .notice1{
    padding-top: 70px;
    width: 1000px;
    font-size: 24px;
    font-weight: bold;
}

#works .notice1 a{
    text-decoration: none;
    color: #001248;
}

#works .slide-box{
    margin:70px auto;
    width:100%;
    
}

.simply-scroll-container {
    position: relative;
}
.simply-scroll-clip {
    position: relative;
    overflow: hidden;
}
.simply-scroll-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.simply-scroll-list li {
    float: left; 
    padding: 0;
    margin: 0;
    width: 1900px;
    height: auto;
    display: block;
}
.simply-scroll-list li img {
    display: block;
    width: 100%;
}



/* profile */

#profile{
padding-top:30px;
padding-bottom:50px;
}


#profile h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;
}


#profile ul{
margin-bottom:50px;
}

#profile ul li{
list-style:none;
font-size:16px;
line-height:2.4;
letter-spacing:0.05em;
}

#map{
width:100%;
height:500px;
margin-bottom:130px;    
}

.googlemaps iframe{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* contact */

#contact{
padding-top:30px;
padding-bottom:160px;
}

#contact h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;    
}

#contact .lead-form{
  text-align: center;
  font-size:20px;
    margin-bottom:70px;
}
#contact form{
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}
#contact .item{
  overflow: hidden;
  margin-bottom: 20px;
 width:48%; 
float: left;    
   
}
#contact .item:nth-child(odd){
  margin-right:20px;
  margin-left: 10px;    
   
}

#contact .inputs{
width:100%; 
border: none;
border-bottom: solid 1px #aaa; 
padding:10px;
font-size: 18px;    
}


#contact .text{
 width:100%; 
float: none;
padding-top:30px;
}

#contact textarea.inputs{
  border: solid 1px #aaa;
  padding: 10px;
  height: 160px;
  font-size: 15px;
  width:95%;
 margin-top:10px;
}
#contact .btn-area{
  text-align: center;
}
input[type="submit"]{
  background: #001248;;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 1em 5em;
  margin: 0 5px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
resize: none;
border:none;
border-bottom: 3px solid #db4d57;
}

#confirmation{
padding-top:50px;
}

#confirmation h2{
font-family: 'Encode Sans', sans-serif;
font-style: italic;
font-weight: normal;
font-size:50px;
letter-spacing:0.08em;
position:relative;
margin-bottom:60px;    
}

#confirmation form{
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

#confirmation table{
width:90%; 
margin: 0 auto;
}

#confirmation table td{
width:50%; 
border: solid 1px #aaa; 
padding:15px;
font-size: 18px;    
}

#confirmation input[type="submit"]{
  background: #001248;;
  border: none;
  color: white;
  font-size:17px;
  font-weight:bold;
  padding: 1em 5em;
  margin: 20px 5px;
}


small{
font-size:12px;
line-height:1.8;
letter-spacing:0.1em;
}



.pagetop{
	display: block;
	width: 80px;
	height: 0px;
	padding-top: 80px;
	line-height: 2;
	overflow: hidden;
	position: relative;
	margin: 0 auto 60px auto;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 1px #666 solid;
}

.pagetop:after{
	margin: auto;
	content: "";
	vertical-align: middle;
	position: absolute;
	display: block;
	top:35px;
	left: 30px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


span.sp{
display:none;
}

br.sp{
display:none;
}




.fadein {
opacity:0;
transform:translate(0, 30px);
transition:all 800ms;
}
 

.fadein.scrollin {
opacity:1;
transform:translate(0, 0);
}

.sveffect .s01,
.sveffect .s02,
.sveffect .s03,
.sveffect .s04,
.sveffect .s05,
.sveffect .s06,
.sveffect .s07,
.sveffect .s08,
.sveffect .s09,
.sveffect .s010,
.sveffect .s011,
.sveffect .s012,
.sveffect .s013,
.sveffect .s014,
.sveffect .s015,
.sveffect .s016,
.sveffect .s017,
.sveffect .s018,
.sveffect .s019,
.sveffect .s020,
.sveffect .s021,
.sveffect .s022,
.sveffect .s023,
.sveffect .s024,{   
opacity:0;
transform:translate(0, 20px);
transition:all 1000ms;
}

.sveffect .s01,
.sveffect .s02,
.sveffect .s03,
.sveffect .s04,
.sveffect .s05,
.sveffect .s06,
.sveffect .s07,
.sveffect .s08,
.sveffect .s09,
.sveffect .s010,
.sveffect .s011,
.sveffect .s012,
.sveffect .s013,
.sveffect .s014,
.sveffect .s015,
.sveffect .s016,
.sveffect .s017,
.sveffect .s018,
.sveffect .s019,
.sveffect .s020,
.sveffect .s021,
.sveffect .s022,
.sveffect .s023,
.sveffect .s024,{
opacity:1;
transform:translate(0, 0);
}

.sveffect.scrollin .s01{transition-delay:0.0s;}
.sveffect.scrollin .s02{transition-delay:0.2s;}
.sveffect.scrollin .s03{transition-delay:0.4s;}
.sveffect.scrollin .s04{transition-delay:0.6s;}
.sveffect.scrollin .s05{transition-delay:0.8s;}
.sveffect.scrollin .s06{transition-delay:1.0s;}
.sveffect.scrollin .s07{transition-delay:1.2s;}
.sveffect.scrollin .s08{transition-delay:1.4s;}
.sveffect.scrollin .s09{transition-delay:1.6s;}
.sveffect.scrollin .s010{transition-delay:1.8s;}


.sveffect .s01 .text,
.sveffect .s02 .text,
.sveffect .s03 .text,
.sveffect .s04 .text,
.sveffect .s05 .text,
.sveffect .s06 .text,
.sveffect .s07 .text,
.sveffect .s08 .text,
.sveffect .s09 .text,
.sveffect .s010 .text{
opacity:0;
transition:all 1000ms;
}

.sveffect.scrollin .s01 .text,
.sveffect.scrollin .s02 .text,
.sveffect.scrollin .s03 .text,
.sveffect.scrollin .s04 .text,
.sveffect.scrollin .s05 .text,
.sveffect.scrollin .s06 .text,
.sveffect.scrollin .s07 .text,
.sveffect.scrollin .s08 .text,
.sveffect.scrollin .s09 .text,
.sveffect.scrollin .s010 .text,
.sveffect.scrollin .s011 .text,
.sveffect.scrollin .s012 .text,
.sveffect.scrollin .s013 .text,
.sveffect.scrollin .s014 .text,
.sveffect.scrollin .s015 .text,
.sveffect.scrollin .s016 .text,
.sveffect.scrollin .s017 .text,
.sveffect.scrollin .s018 .text,
.sveffect.scrollin .s019 .text,
.sveffect.scrollin .s020 .text,
.sveffect.scrollin .s021 .text,
.sveffect.scrollin .s022 .text,
.sveffect.scrollin .s023 .text,
.sveffect.scrollin .s024 .text{
opacity:1;
}

.sveffect.scrollin .s01 .text{transition-delay:0.8s;}
.sveffect.scrollin .s02 .text{transition-delay:1.0s;}
.sveffect.scrollin .s03 .text{transition-delay:1.2s;}
.sveffect.scrollin .s04 .text{transition-delay:1.4s;}
.sveffect.scrollin .s05 .text{transition-delay:1.6s;}
.sveffect.scrollin .s06 .text{transition-delay:1.8s;}
.sveffect.scrollin .s07 .text{transition-delay:2.0s;}
.sveffect.scrollin .s08 .text{transition-delay:2.2s;}
.sveffect.scrollin .s09 .text{transition-delay:2.4s;}
.sveffect.scrollin .s010 .text{transition-delay:2.6s;}
.sveffect.scrollin .s011 .text{transition-delay:2.8s;}
.sveffect.scrollin .s012 .text{transition-delay:3.0s;}
.sveffect.scrollin .s013 .text{transition-delay:3.2s;}
.sveffect.scrollin .s014 .text{transition-delay:3.4s;}
.sveffect.scrollin .s015 .text{transition-delay:3.6s;}
.sveffect.scrollin .s016 .text{transition-delay:3.8s;}
.sveffect.scrollin .s017 .text{transition-delay:4.0s;}
.sveffect.scrollin .s018 .text{transition-delay:4.2s;}
.sveffect.scrollin .s019 .text{transition-delay:4.4s;}
.sveffect.scrollin .s020 .text{transition-delay:4.6s;}
.sveffect.scrollin .s021 .text{transition-delay:4.8s;}
.sveffect.scrollin .s022 .text{transition-delay:5.0s;}
.sveffect.scrollin .s023 .text{transition-delay:5.2s;}
.sveffect.scrollin .s024 .text{transition-delay:5.4s;}



.sveffect .s01 .text span,
.sveffect .s02 .text span,
.sveffect .s03 .text span,
.sveffect .s04 .text span,
.sveffect .s05 .text span,
.sveffect .s06 .text span,
.sveffect .s07 .text span,
.sveffect .s08 .text span,
.sveffect .s09 .text span,
.sveffect .s010 .text span,
.sveffect .s011 .text span,
.sveffect .s012 .text span,
.sveffect .s013 .text span,
.sveffect .s014 .text span,
.sveffect .s015 .text span,
.sveffect .s016 .text span,
.sveffect .s017 .text span,
.sveffect .s018 .text span,
.sveffect .s019 .text span,
.sveffect .s020 .text span,
.sveffect .s021 .text span,
.sveffect .s022 .text span,
.sveffect .s023 .text span,
.sveffect .s024 .text span{
opacity:0;
transition:all 1000ms;
}

.sveffect.scrollin .s01 .text span,
.sveffect.scrollin .s02 .text span,
.sveffect.scrollin .s03 .text span,
.sveffect.scrollin .s04 .text span,
.sveffect.scrollin .s05 .text span,
.sveffect.scrollin .s06 .text span,
.sveffect.scrollin .s07 .text span,
.sveffect.scrollin .s08 .text span,
.sveffect.scrollin .s09 .text span,
.sveffect.scrollin .s010 .text span,
.sveffect.scrollin .s011 .text span,
.sveffect.scrollin .s012 .text span,
.sveffect.scrollin .s013 .text span,
.sveffect.scrollin .s014 .text span,
.sveffect.scrollin .s015 .text span,
.sveffect.scrollin .s016 .text span,
.sveffect.scrollin .s017 .text span,
.sveffect.scrollin .s018 .text span,
.sveffect.scrollin .s019 .text span,
.sveffect.scrollin .s020 .text span,
.sveffect.scrollin .s021 .text span,
.sveffect.scrollin .s022 .text span,
.sveffect.scrollin .s023 .text span,
.sveffect.scrollin .s024 .text span{
opacity:1;
}

.sveffect.scrollin .s01 .text span{transition-delay:1.2s;}
.sveffect.scrollin .s02 .text span{transition-delay:1.4s;}
.sveffect.scrollin .s03 .text span{transition-delay:1.6s;}
.sveffect.scrollin .s04 .text span{transition-delay:1.8s;}
.sveffect.scrollin .s05 .text span{transition-delay:2.0s;}
.sveffect.scrollin .s06 .text span{transition-delay:2.2s;}
.sveffect.scrollin .s07 .text span{transition-delay:2.4s;}
.sveffect.scrollin .s08 .text span{transition-delay:2.6s;}
.sveffect.scrollin .s09 .text span{transition-delay:2.8s;}
.sveffect.scrollin .s011 .text span{transition-delay:3.0s;}
.sveffect.scrollin .s011 .text span{transition-delay:3.2s;}
.sveffect.scrollin .s012 .text span{transition-delay:3.4s;}
.sveffect.scrollin .s013 .text span{transition-delay:3.6s;}
.sveffect.scrollin .s014 .text span{transition-delay:3.8s;}
.sveffect.scrollin .s015 .text span{transition-delay:4.0s;}
.sveffect.scrollin .s016 .text span{transition-delay:4.2s;}
.sveffect.scrollin .s017 .text span{transition-delay:4.4s;}
.sveffect.scrollin .s018 .text span{transition-delay:4.6s;}
.sveffect.scrollin .s019 .text span{transition-delay:4.8s;}
.sveffect.scrollin .s020 .text span{transition-delay:5.0s;}
.sveffect.scrollin .s021 .text span{transition-delay:5.2s;}
.sveffect.scrollin .s022 .text span{transition-delay:5.4s;}
.sveffect.scrollin .s023 .text span{transition-delay:5.6s;}
.sveffect.scrollin .s024 .text span{transition-delay:5.8s;}


@media screen and (max-width: 800px) {
 
header {
    position: fixed;
    top: 0;
    left:auto;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background:#333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2;
    opacity: 0.9;
    
}
    
header nav ul.nav-global {
        display: block;
}   
    
header nav ul.nav-global li {
    display:block;
    padding: 20px 0;
    width: auto;
}
    
    
header nav ul.nav-global li,    
header nav ul.nav-global li.logo,
header nav ul.nav-global li.info,
header nav ul.nav-global li.works,
header nav ul.nav-global li.tel{
    width:auto;
    text-align: center;
}   
    
header nav ul.nav-global li.tel{
    padding-top:30px;
}
    
 header nav ul.nav-global li.tel a[href^="tel:"]{
    pointer-events:all;
}
   
 
header nav ul.nav-global li a {
    text-decoration: none;
    color: #ddd
}
 
header .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
header .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
 
header .btn-gnavi span:nth-child(1) {
    top: 0
}
 
header .btn-gnavi span:nth-child(2) {
    top: 10px
}
 
header .btn-gnavi span:nth-child(3) {
    top: 20px
}
 
.header btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
 
header .btn-gnavi.open span {
    background: #fff
}
 
header .btn-gnavi.open span {
    width: 24px;
}

span.sp{
display:inline;
}

br.sp{
display:block;
}

br.pc{
display:none;
}    

#kimg{
background-attachment:scroll;
    height: 400px;
}

#kimg .visial {
    width: 100%;
    padding-top: 130px;
}    
    
 #kimg .visial .video{
width:30%;
margin-top:50px;
margin-left:20;
} 

#kimg .visial .text {
    width: 60%;
    overflow: hidden;
    text-align: left;
    float: right;
    padding-top: 20px;
}

#kimg .visial .text p {
    width: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 5px;
    line-height: 2;
    padding-left: 0;
} 
    
.scroll {
    display: none;
}
 
    
#information{  
width: 90%; 
margin: 0 auto;    
}  
    
#information ul li{
max-width: 100%;
}
    
#information ul li img {
    display: none;
}     

#information ul li p{
padding-left:0;
}    

#information ul li dl dt span.date {
    font-size: 15px;
    letter-spacing: 0.1em;
    margin-right: 0;
    border: none;
    }

#information ul li dl dd{
	font-size: 14px;
}
    
#works{
    width: 90%;
    margin: 0 auto;
}
 
#works .notice,    
#works .notice1{
    width: 85%;
    font-size: 20px;
    line-height: 1.2;
}
    
#contact .item:nth-child(odd){
  margin-right:auto;
  margin-left: auto;    
   
}     
    
#contact .item{
 width:90%; 
margin:0 auto;
float:none; 
   
}    
}



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

#kimg{
background-image: url(../images/main.gif);
    height: 650px;
    background-position: top center;
    background-repeat: no-repeat;
}    

#kimg .visial{
    width: 100%;
}
   

#kimg .visial .text{
    display: none;
}

#kimg .visial .video{
    display:none;
}
 
    
/*br.sp{
    display: none;
}*/ 
br.pc{
    display: block;
}   

h1{
width:200px;
height:121px;
}

.content {
padding-left:20px;
padding-right:20px;
}

.scroll {
    display: block;
}
	
#information{
padding-top:20px;
padding-bottom:140px;
}
    
#information h2{
font-size:35px;
margin-bottom:60px;
}
    
#information ul li{
    max-width:100%;
}    
    
#information ul li img {
    display: none;
} 
    
#information ul li span.date {
    letter-spacing: 0.05em;
    margin-right: 0;
    line-height: 1.4;

}    
	   
#information ul li p {
    font-size: 16px;
    line-height: 1.8;
    padding-top: 15px;
    padding-left: 0;
}	

#services{
padding-top:30px;
padding-bottom:120px;
}

#service h2{
font-size:35px;
margin-bottom:20px;
}

    
#services p {
font-size: 22px;
letter-spacing: 0.08em;
line-height: 1.8;
}
    

#services ul{
width:100%;
}

#services ul li{
height:138px;
width:138px;
margin:5px;
}

#services ul li .text{
width:138px;
}

#services ul li .text h3{
font-size:22px;
margin-bottom:6px;
}

#services ul li .text h3.fs{
font-size:20px;
margin-bottom:6px;
}    

#services ul li .text p{
font-size:10px;
font-weight:bold;
}
    
#works .works{  
padding-left:0;
}    

#works h2{
font-size:35px;
margin-bottom:30px;
}
    
#works .works li{  
width:100%;
padding:0;
padding-bottom:15px;
float: none;
display: inline-block;
}

    
#works .works li iframe{  
width:100%;
}

#works .works li .text{  
font-size:15px;
}

#works .works li .text span{  
font-size:12px;
}    
    
#works .notice,
#works .notice1{
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.3;
}

#works .notice1{
    padding:30px 0px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}    
    
#works .slide-box{
    margin:0 auto;
    margin-bottom:30px;
    width:100%;
    
} 

#profile{
padding-top:30px;
padding-bottom:120px;
}


#profile h2{
font-size:35px;
margin-bottom:30px;
}

#profile ul{
margin-bottom:50px;
}

#profile ul li{
font-size:13px;
line-height:2.2;
letter-spacing:0em;
}

#map{
height:auto;
}

#contact{
padding-top:30px;
padding-bottom:140px;
}

#contact h2{
font-size:40px;
margin-bottom:60px;
}
    
#contact .lead-form {
    font-size: 20px;
    line-height: 1.3;
    width:80%;
    margin: 0 auto;
} 
    
#contact form {
    padding-top: 20px;
}    
    
#contact .item {
    overflow: hidden;
    margin-bottom: 20px;
    width: 100%;
}
    
#contact .item:nth-child(odd){
  margin-right:0;
  margin-left: 0;    
   
}    
    
#contact textarea.inputs {
    width: 93%;
}    

#contact a.btn{
font-size:16px;
padding:20px 40px;
}

span.sp{
display:inline;
}
}