@charset "UTF-8";
/* CSS Document */






.sp-slide .inner{
position:absolute;
width:100%;
      top: 45%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
text-align:center;
	  }
.sp-slide .title{
color:#fff;
font-weight:900;
font-size:2.8rem;
letter-spacing:1em;
padding:80px 0 25px 0.7em;
}

.sp-slide .title.cl333 {
color:#333;
}

.sp-slide .title_box{
background-color:rgba(255,255,255,0.8);
text-align:center;
display:inline-block;
    padding: 25px 0;
    width: 380px;
}
.sp-slide h1{
font-size:2.4rem;
line-height:1.6;
padding-left:0.5em;
font-weight:500;
}

.sp-slide .logo{
padding-top:20px;
}

.row3.sp-slide .title_box{
	padding: 16px 0 20px;
}

.row3.sp-slide h1{
	line-height:1.3;
}

.row3.sp-slide .logo {
    padding-top: 16px;
}

.sp-slide .logo svg{
}

.main_txt2{
position:absolute;
max-width: 1260px;
		width: 100%;
			top: 50%;
			left: 0;
			right: 0;
			margin: 0 auto;
			text-align: left;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}



@media screen and (max-width: 767px){
	
#main_logo h1.sp{
    text-align: center;
    padding: 70px 30px 20px;
}
	
.sp-slide{
background-position:50% 50px;
height:inherit;
position:relative;
padding-bottom:100px;
}
.sp-slide h1.sp{
text-align:center;
padding:70px 30px;
}

.sp-slide .inner{
    position: absolute;
    width: 100%;
    text-align: center;
	  }
.sp-slide .title{
font-size:2.2rem;
letter-spacing:1em;
padding:50px 0 25px 0.7em;
}
.sp-slide .title_box{
background-color:rgba(255,255,255,0.8);
text-align:center;
display:inline-block;
    padding: 25px 0;
    max-width: 300px;
    width: 100%;
}
.sp-slide h1{
font-size:2rem;
line-height:1.6;
padding-left:0.5em;
font-weight:500;
}
	
.main_txt2 {
	padding: 0 5%;
}
.main_txt2 img{
	max-width: 400px;
	width: 100%;
}
	
}








#header{
position:absolute;
z-index:5;
background-color:transparent;
}

#header li:nth-child(1) a {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
	color: #008842;
	display: inline-block;
	pointer-events: none;
}
#header li:nth-child(1) a:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

#mainimage{
background-image:url(../../img/mainimage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:50%;
height:870px;
position:relative;
text-align:center;
}

#mainimage .inner{
position:absolute;
width:100%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
text-align:center;
	  }
#mainimage .title{
/* color:#fff; */
font-weight:900;
font-size:2.8rem;
letter-spacing:1em;
padding:80px 0 25px 0.7em;
}
#mainimage .title_box{
background-color:rgba(255,255,255,0.8);
text-align:center;
display:inline-block;
padding:25px 20px;
}
#mainimage h1{
font-size:2.4rem;
line-height:1.6;
padding-left:0.5em;
font-weight:500;
}
#mainimage .logo{
padding-top:20px;
}
#mainimage .logo svg{
}

#bukenbox{
padding:173px 0 118px 0;
}
#works{
margin-top:-150px;
padding-bottom:100px;
}
#bukenbox h2,#works h2{
position:absolute;
background-color:#000;
color:#fff;
width:347px;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
	z-index:3;
}

.boximg{
z-index:2;
}
#bukenbox a:hover h2,#works a:hover h2{
background-color:#008842;
}
#bukenbox h2 span.txt,#works h2 span.txt{
font-size:3.4rem;
font-weight:900;
line-height:1;
}
#bukenbox h2 p,#works h2 p{
text-align:right;
font-size:2rem;
font-weight:normal;
padding-top:10px;
}
#bukenbox .leftbox h2,#works .leftbox h2{
top:-50px;
left:-60px;
}
#bukenbox .right h2,#works .right h2{
bottom:-50px;
right:-60px;}
#bukenbox .leftbox,#works .leftbox{
position:absolute;
top:-62px;
left:0;
z-index:3;
}
#bukenbox .right,#works .right{
position:relative;
}
#bukenbox a,#works a{
display:block;
}

.worksback{
background-color:#f2f2f2;
}
#works ul{
clear:both;
padding-top:100px;
}
#works li{
display:inline-block;
vertical-align:bottom;
width:25%;
text-align:center;
font-size:2.2rem;
margin:0 3%;
}
#works li p{
font-size:2.2rem;
font-weight:500;
padding-top:20px;
}
#works li span{
font-size:14rem;}
#works li:nth-child(2) span{
font-size:14.5rem;}
#works li:last-child span{
font-size:11rem;}
#works li a{
display:block;
}


#recommend{
padding:75px 0;
background-color:#1b1b1b;
}
#recommend h3{
font-size:2rem;
font-weight:normal;
color:#fff;
padding-bottom:65px;
}
#recommend h3 span.txt{
font-size:3.4rem;
font-weight:900;
line-height:1;
}
#recommend .reco_list{}
#recommend .reco_list div{
padding:0 25px;
}
#recommend .recobtn{
padding-top:85px;
text-align:center;
}
#recommend .recobtn a{
display:block;
width:257px;
margin:0 auto;
padding:10px 0;
text-align:center;
color:#fff;
border:1px solid #707070;
}
#recommend .recobtn a:hover{
border:1px solid #fff;
background-color:#008842;
}

.b_news{
padding:55px 0 65px 0;
background-color:#f2f2f2;
}
.b_news h3{
font-size:2rem;
font-weight:normal;
padding-bottom:50px;
}
.b_news h3 span{
font-size:3.4rem;
font-weight:900;
line-height:1;
}
.b_news dl{
padding:8px 80px 8px 120px;
}
.b_news dt{
float:left;
}
.b_news dd{
padding-left:97px;
}

#concept{
background-image:url(../../img/concept_back.jpg);
background-repeat:no-repeat;
background-position:50%;
background-size:cover;
padding:187px 0 80px 0;
}
#concept .inner{
position:relative;
width:690px;
padding:85px 50px 80px 40px;
background-color:rgba(0,0,0,0.8);
color:#fff;
}
#concept h2{
position:absolute;
background-color:#000;
color:#fff;
width:347px;
top:-50px;
left:-50px;
}
#concept h2 span.txt{
font-size:3.4rem;
font-weight:900;
line-height:1;
}
#concept h2 p{
text-align:right;
font-size:2rem;
font-weight:normal;
}


#conceptlink{
padding:115px 0 95px 0;
}
#conceptlink ul{
letter-spacing:-.4em;
	text-align: center;
}
#conceptlink li{
display:inline-block;
letter-spacing:normal;
vertical-align:top;
width:366px;
}
#conceptlink li:nth-child(2){
margin:0 50px;
}
#conceptlink a{
display:block;
}
#conceptlink .title{
font-weight:500;
font-size:1.8rem;
padding:20px 0 5px 0;
}

#imagearea{
background-image:url(../../img/work_back.jpg);
background-repeat:no-repeat;
background-position:50%;
background-size:cover;
}

#imagearea:before {
    content: "";
    display: block;
    padding-top: 44.6%;
}

#access{
padding-top:145px;
background-image:url(../../img/access_back.jpg);
background-position:50% 0%;
background-repeat:no-repeat;
background-size:cover;
}
#access ul{
letter-spacing:-.4em;
margin:0 -55px;
}
#access li{
display:inline-block;
letter-spacing:normal;
vertical-align:top;
margin-right:27px;
margin-bottom:30px;
  position:relative;
  width:305px;
  background:#000;
  }
 #access li:nth-child(4n){
 margin-right:0;
 }
#access li a{
display:block;
  width:100%;
  height:80px;
  position:relative;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  font-size:1.8rem;
  padding-top:27px;
  z-index:3;
}

#access .border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
	z-index:2;
}

#access li>.border:nth-of-type(1){
  top:10px;
  left:10px;
  border-left:1px solid #707070;
  border-top:1px solid #707070;
  width:10px;
  height:10px;
}

#access li>.border:nth-of-type(2){
  bottom:10px;
  right:10px;
  border-right:1px solid #707070;
  border-bottom:1px solid #707070;
  width:10px;
  height:10px;
}
#access li>.border:nth-of-type(3){
  top:10px;
  right:10px;
  border-right:1px solid #707070;
  border-top:1px solid #707070;
  width:10px;
  height:10px;
}

#access li>.border:nth-of-type(4){
  bottom:10px;
  left:10px;
  border-left:1px solid #707070;
  border-bottom:1px solid #707070;
  width:10px;
  height:10px;
}

#access li:hover .border{
  width:97%;
  height:87%;
  border-color:#fff;
}

.accessbox{
padding:100px 0 95px 0;
}
.accessbox h3{
font-size:2rem;
font-weight:normal;
}
.accessbox h3 span.txt{
font-size:3.4rem;
font-weight:900;
line-height:1;
}
.accessbox .left{
width:370px;
}
.accessbox .txt{
padding:48px 0 25px 0;
}
.accessbox .tel{
font-size:2.4rem;
font-weight:500;
}
.accessbox .tel span{
font-size:3.2rem;
color:#23ac38;
vertical-align:text-bottom;
}
.accessbox .right{
width:770px;
height:395px;
}

#bukenbox h2 .motion_txt,#works h2 .motion_txt,#concept h2 .motion_txt{
padding:15px 23px;}

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

#drawer li:nth-child(1) a {
    color: #fff;
    background-color: #008842;
		display: inline-block;
		pointer-events: none;
}
	
#header{
display:none;
}

#mainimage{
background-position:50% 50px;
height:inherit;
position:relative;
padding-bottom:100px;
}
#mainimage h1.sp{
text-align:center;
padding:70px 30px;
}

#mainimage .inner{
position:relative;
width:100%;
      top: auto;
      -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
      transform: translateY(0%);
text-align:center;
	  }
#mainimage .title{
font-size:2.2rem;
letter-spacing:1em;
padding:50px 0 25px 0.7em;
}
#mainimage .title_box{
background-color:rgba(255,255,255,0.8);
text-align:center;
display:inline-block;
padding:25px 10px;
}
#mainimage h1{
font-size:2rem;
line-height:1.6;
padding-left:0.5em;
font-weight:500;
}
#mainimage .logo{
padding-top:20px;
}

#bukenbox{
padding:80px 0 80px 0;
}
#works{
margin-top:0;
padding-bottom:80px;
}
#bukenbox .container,#works .container {
    padding: 0;
}
#bukenbox h2,#works h2{
padding:10px 15px;
width:65%;
}
#bukenbox h2 .motion_txt,#works h2 .motion_txt,#concept h2 .motion_txt{
padding:10px 15px;}
#bukenbox h2 span.txt,#works h2 span.txt{
font-size:2rem;
line-height:1;
}
#bukenbox h2 p,#works h2 p{
font-size:1.5rem;
padding-top:0;
}
#bukenbox .leftbox h2,#works .leftbox h2{
left:0;
}
#bukenbox .right h2,#works .right h2{
right:0;}
#bukenbox .leftbox,#works .leftbox{
position:relative;
top:auto;
left:auto;
padding-bottom:30px;
}
#bukenbox .right,#works .right{
position:relative;
}
#bukenbox a,#works a{
display:block;
}

#works ul{
clear:both;
padding-top:100px;
}
#works li{
display:block;
width:100%;
text-align:center;
margin:40px 0;
}
#works li p{
font-size:2rem;
font-weight:500;
padding-top:10px;
}
#works li span{
font-size:14rem;}
#works li:nth-child(2) span{
font-size:14.5rem;}
#works li:last-child span{
font-size:11rem;}
#works li a{
display:block;
}


#recommend{
padding:75px 0;
}
#recommend h3{
font-size:1.5rem;
padding-bottom:40px;
}
#recommend h3 span.txt{
font-size:2rem;
}
#recommend .reco_list{
margin:0 25px;
}
#recommend .recobtn{
padding-top:40px;
}
#recommend .recobtn a{
width:200px;
}

.b_news{
padding:55px 0 65px 0;
}
.b_news h3{
font-size:1.5rem;
padding-bottom:30px;
}
.b_news h3 span.txt{
font-size:2rem;
}
.b_news dl{
padding:10px 0;
}
.b_news dt{
float:none;
}
.b_news dd{
padding-left:0;
}

#concept{
background-position:50% 0;
background-size:170% auto;
padding:180px 0 30px 0;
}
#concept .inner{
position:relative;
width:100%;
padding:60px 20px 40px 20px;
}
#concept .container{ padding:0;}
#concept h2{
position:absolute;
width:65%;
top:-50px;
left:0;
}
#concept h2 span.txt{
font-size:2rem;
}
#concept h2 p{
font-size:1.5rem;
}


#conceptlink{
padding:0 0 60px 0;
}
#conceptlink ul{
}
#conceptlink li{
display:block;
width:100%;
}
#conceptlink li:nth-child(2){
margin:40px 0;
}
#conceptlink .title{
font-size:1.8rem;
padding:10px 0 5px 0;
}

#imagearea{
margin-bottom:80px;
}

#imagearea:before {
    content: "";
    display: block;
    padding-top: 70%;
}

#access{
padding-top:50px;
}
#access ul{
letter-spacing:-.4em;
margin:0 -10px;
}
#access li{
		margin-right:4%;
		margin-bottom:15px;
		width:48%;
		height: 60px;
	}
	
 #access li:nth-child(4n),#access li:nth-child(2n){
 margin-right:0;
 }
#access li a{
  width:100%;
  height:inherit;
  color:#fff;
  font-size:1.5rem;
  line-height:1.1;
  padding:22px 0;
}


#access li>.border:nth-of-type(1){
  top:5px;
  left:5px;
}

#access li>.border:nth-of-type(2){
  bottom:5px;
  right:5px;
}
#access li>.border:nth-of-type(3){
  top:5px;
  right:5px;
}

#access li>.border:nth-of-type(4){
  bottom:5px;
  left:5px;
}

#access li:hover .border{
  width:97%;
  height:87%;
}

	
	
#access li:nth-child(8) a{
    padding: 13px 0 0;
}
	
	
	
.accessbox{
padding:50px 0 65px 0;
}
.accessbox h3{
font-size:1.5rem;
font-weight:normal;
}
.accessbox h3 span.txt{
font-size:2rem;
font-weight:900;
line-height:1;
}
.accessbox .left{
width:100%;
padding-bottom:30px;
}
.accessbox .txt{
padding:30px 0 25px 0;
}
.accessbox .tel{
font-size:2.4rem;
font-weight:500;
}
.accessbox .tel span{
font-size:3.2rem;
color:#23ac38;
vertical-align:text-bottom;
}
.accessbox .right{
width:100%;
height:200px;
}




}



.motion_txt {
  display: block;
  position: relative;
  overflow: hidden;
}
.motion_txt:after {
  content: '';
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #008842;
  transform: translate3d(-101%, 0, 0);
}

.box_img  .motion_txt {
  display: inline-block;
}
.box_img .motion_txt:after{
  background-color: #000000;}
.box_title.show .motion_txt:after {
  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(0, 0, 0);
}
.box_title.done .motion_txt:after {
  transition-property: transform;
  transition-duration: 0.5s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: translate3d(103%, 0, 0);
}
.motion-txt .motion_inner {
  display: inline-block;
  opacity: 0;
}
.box_title.done .motion_txt .motion_inner {
  opacity: 1;
}