@charset "UTF-8";

/* =========================================================
　◆Basic
========================================================= */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { -webkit-text-size-adjust: none; 
  font-size: 62.5%;
}

body {  
  background: #fff;
  font: 1.4rem / 2.0 "Julius Sans One","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #000510;
}

@media screen and (min-width: 601px){

	body{
		font-size: 1.8rem;
	}
}

/* =========================================================
　◆Link Style
========================================================= */
/*a { -webkit-transition:all 0.5s; transition: all 0.5s; }*/
a:link, a:visited, a:active{ 
  text-decoration: none;
  color:#000510;
}
a img { 
  border: none; 
  -webkit-transition:all 0.5s;
  transition: all 0.5s;
}
a:hover{ 
  text-decoration: underline;
}
a:hover img { 
  opacity: 0.8;
}

/* =========================================================
　◆Wrap
========================================================= */
.ly_wrap { 
  width: 100%; margin: auto;
}

.contentsWrap{
	margin:0 auto;
	padding: 0 10px;
}

.contentsWrap_wide{
	margin:0 auto;
}
.contentsWideWrap{
	margin:0 auto;
}

@media screen and (min-width:950px){
	.contentsWrap{
		max-width:950px; 
	}
	.contentsWideWrap{
		max-width:1200px; 
	}
}

.ly_btmLine{
	border-bottom: 1px #eeeeee solid;
}


/* =========================================================
　◆Head
========================================================= */

.ly_header_wrapper{
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
}

.ly_header_wrapper header{
  width: 100%;
  margin:0px auto;
  position:relative;
  background-color: #fff;
  opacity:0.7;
}

header .ly_headerLogo{
	float: left;
	width: 76px;
	padding-top: 20px;
  display:inline-block;
}

header .ly_headerLogo2 {
  float: left;
  font-size:80%;
  padding-top: 50px;
  padding-left: 10px;
  display: inline-block;
}

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

/* header */
#top-head {
  top: -100px;
  position: absolute;
  width: 100%;
  margin: 100px auto 0;
  line-height: 1;
  z-index: 999;
  padding-bottom: 20px;
}
#top-head a,
#top-head {
  color: #000510;
  text-decoration: none;
}
#top-head .inner {
  position: relative;
}

#global-nav ul {
  list-style: none;
  position: absolute;
  right: 0;
  bottom: 35px;
  font-size: 1.6rem;
  
}
#global-nav ul li {
  float: left;
}
#global-nav ul li a {
 -moz-padding: 5px 20px 30px 20px;
 padding: 5px 20px 30px 20px;

}

#top-head .scroll_appear{
	display: none;
}

#top-head.fixed#global-nav ul li a:hover {
 border-bottom:3px #6181C9 solid;
}

#top-head.fixed #nav-toggle span {
  background: #333333;
}

#top-head.fixed .scroll_appear{
	display: block;
}
#top-head.fixed .scroll_disappear{
	display: none;
}

#top-head #nav-map.fixed {
  position: absolute;
  right: 60px;
  top: 12px;
  width: 30px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
  font-size: 2.7rem;
}

/*タブレット*/

@media screen and (max-width: 1200px) and (min-width: 961px) {

  #top-head{
   padding-right:20px;
   padding-left:20px;
 }

 .inner{
   width:100%;
 }

}


/*sp*/
@media screen and (max-width: 960px) {
  #top-head,
  .inner {
    width: 100%;
    padding: 0;
  }
  #top-head {
    top: 0;
    /*position: fixed;*/
    margin-top: 0;
  }

  header .ly_headerLogo {
    float: left;
    width: 80px;
    padding-top: 15px;
    padding-left: 12px;
  }

  header .ly_headerLogo2 {
    float: left;
    font-size:100%;
    padding-top: 40px;
    padding-left: 10px;
    display: inline-block;
  }

  #top-head.fixed {
    background: #fff;
    height: 50px;
  }

  #top-head.fixed .ly_headerLogo {
    float: left;
    width: 120px;
    padding-top: 15px;
    padding-left: 10px;
  }

  #global-nav ul {
    display:none;
  }
}

/* =========================================================
　◆MainVisual（スライダー）
========================================================= */

.ly_mainvis .slider li{
 font-size: 1.8rem;
 width: 100%;
 top: 0px;
 background-repeat: repeat, no-repeat;
 background-position: center center;
 background-size: auto, cover;
 min-height: 500px;
 position: relative;
}


.ly_mainvis{
  width: 100%;
  top: 0px;
}

.ly_mainvis_inner{
  width: 1140px;
  margin:0 auto;
}

.ly_mainvis_inner h1{
  margin:0 auto;
  width:500px;
  padding-top:160px;
}

.el_ttlLv1_top{
  font-size: 2.8rem;
  font-family: "Yu Mincho", "YuMincho", serif;
  letter-spacing: 2px;
}


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

  .el_ttlLv1_top{
   font-size: 4.5vw;
   letter-spacing: 0.5rem;
 }
 .ly_mainvis_inner p{
   font-size: 2.2rem;
 }

 .ly_mainvis_inner {
  width: 100%;
}
.ly_mainvis_inner h1 {
  width: 50vw;
}

}

@media screen and (max-width:600px){
 .ly_mainvis_inner h1 {
  padding-top: 35vw;
}
.ly_mainvis_inner h1 {
  width: 70vw;
}


}


/*スクロール*/

.el_vertical_line{
  border-right:1px solid #000510;
  width:50%;
  height:200px;
  text-align: center;
}


#el_icon_scroll{
  padding-top: 60px;
  position:relative;
}
#el_icon_scroll span{
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #333333;
  border-radius: 50px;
  box-sizing: border-box;
}
#el_icon_scroll span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color:#333333;
  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;
  }
}

/* =========================================================
  ◆見出し
  ========================================================= */

  /*h2見出し（メイン）*/

  .el_ttlLv2_v1{
    margin: 0 auto;
    text-align: center;
    color: #333333;
  } 

  .el_ttlLv2_v1 h2{
    font-family: "Julius Sans One", serif;
    font-size: 3.0rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 0px;
  }



  /*h3見出し（メイン）*/

  .el_ttlLv3_v1 h3{
   font-weight: bold;
   font-size:4.8rem;
   line-height:1.5;
 }

 .el_ttlLv3_v1 p{
   line-height:2.5;
 }

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

  .el_ttlLv3_v1 h3{
   font-size:2.6rem;
 }

 .el_ttlLv3_v1 p{
   line-height:2.0;
   font-size:1.4rem;
 }
 .el_ttlLv2_v1 h2{
  font-size: 2.0rem;
}

}



/* =========================================================
  ◆ボタン
  ========================================================= */
  /* ベーシック */
  .el_btnBox{
   width: 100%;
   margin: 20px auto;
   padding-left: 20px;
   padding-right: 20px;
 }

 .el_btnBox .arrow {
  display: inline-block;
  position: relative;
  color: #000510;
  text-decoration: none;
  transition: 0.5s;
}

.el_btnBox .arrow::after {
 position: absolute;
 top: 50%;
 right: 8%;
 display: block;
 content: '';
 width: 10px;
 height: 10px;
 margin-top: -4px;
 border-top: 2px solid #000510;
 border-right: 2px solid #000510;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}

a.el_btn {
  line-height: 1.2;
  text-decoration: none;
  padding: 25px 120px 25px 100px;
  display: inline-block;
  transform: rotate(.03deg);
  max-width: 570px;
  transition: 0.5s;
  color: #000510;
  border: 1px solid #000510;
}

.el_btnBox a.el_btn:hover{
  color: #fff;
  background: #000510;
  border: 1px solid #000510;
}

.el_btnBox .arrow:hover::after{
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
}

@media screen and (max-width: 600px){
  a.el_btn {
    padding: 6vw 16vw 6vw 13vw;
    font-size:3vw;
  }

}



/* =========================================================
　◆contents01
========================================================= */

#contents01{
  background-image:url(images/about_image01.png);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  padding-bottom:100px;
  background-color: #fcfcfc;
}

#contents01 .contentsWrap{
  position: relative;
}

#contents01 .about_image02{
  position:absolute;
  top: -50px;
  left: -150px;
  width: 300px;
}

#contents01 .about_image03{
  position:absolute;
  top: -150px;
  right: -140px;
  width: 220px;
}

#contents01 .about_image04{
  position:absolute;
  top: 400px;
  right: -50px;
  width: 150px;
}

#contents01 .about_image05{
  position:absolute;
  top: 500px;
  left: -50px;
  width: 150px;
}

@media screen and (max-width: 600px){
  #contents01{
    background-size: contain;
  }
  #contents01{
    padding-bottom:0px;
  }

  #contents01 .about_image02{
    top: -50px;
    left: -10px;
    width: 30%;
  }

  #contents01 .about_image03{
    top: -100px;
    right: 0px;
    width: 30%;
  }

  #contents01 .about_image04{
    top: 400px;
    right: 10px;
    width: 15%;
  }

  #contents01 .about_image05{
    top: 450px;
    left: 10px;
    width: 15%;
  }
}


/* =========================================================
　◆contents02
========================================================= */

.ly_projectBoxWrap .ly_projectBox_01{
  background-image: url(images/project_01_bg.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}
.ly_projectBoxWrap .ly_projectBox_02{
  background-image: url(images/project_02_bg.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
}

.ly_projectBoxWrap ul li .contentsWrap{
  padding-top:50px;
  padding-bottom:50px;
  overflow: hidden;
}

.ly_projectBoxWrap ul li .contentsWrap .project_contents h3{
  text-align: center;
}

.ly_projectBoxWrap ul li .contentsWrap .project_contents h3 img{
  display: inline-block;
}

.ly_projectBoxWrap ul li:nth-child(odd) .contentsWrap .project_contents{
  float:left;
}

.ly_projectBoxWrap ul li:nth-child(even) .contentsWrap .project_contents{
  float:right;
}


.ly_projectBoxWrap ul li .contentsWrap p{
  width:550px;
}


@media screen and (max-width: 600px){
  .ly_projectBoxWrap ul li .contentsWrap p{
    width:100%;
  }
  .ly_projectBoxWrap ul li:nth-child(odd) .contentsWrap .project_contents{
    float:none;
  }
  .ly_projectBoxWrap ul li:nth-child(even) .contentsWrap .project_contents{
    float:none;
  }

  .ly_projectBoxWrap li {
    background-position: center;
  }

  #contents02 .el_btnBox a.el_btn{
    width:100%;
  }

  .ly_projectBoxWrap ul li .contentsWrap{
    padding-right:30px;
    padding-left:30px;
    height: 100%;
    background: rgba(255,255,255,0.5);
  }

  .ly_projectBoxWrap ul li .contentsWrap .project_contents h3 .icon_prj{
   width:30%;
 }

 .ly_projectBoxWrap ul li .contentsWrap .project_contents h3 .icon_logo{
   width:80%;
 }

}



/* =========================================================
　◆contents03
========================================================= */

#contents03{
  background-repeat: no-repeat;
  background-size: cover;
  padding-top:100px;
}

#contents03 .ly_about{
  margin:0 auto;
  text-align: center;
}

#contents03 .el_btnBox a.el_btn{
  width:440px;
}

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

  #contents03 {
    padding-top: 100px;
  }

  #contents03 .el_btnBox a.el_btn{
    width:100%;
  }

  #contents03 .ly_about img{
    max-width:250px;
  }


}




/* =========================================================
　◆Footer
========================================================= */

.ly_companyArea{
  padding: 20px 0 50px 0;
  background-color:#000510;
  color: #fff;
}

.ly_companyArea a{
  font-size: 80%;
  color: #fff;
}

.ly_companyArea .bl_companyNavBlock{
  text-align: center;
  margin-bottom: 20px;
}


.ly_companyArea .bl_companyNavBlock ul li{
  display: inline-block;
  padding: 0 10px;
}

footer #f_logo{
  text-align: center;
  margin: 30px 0;
}

footer #f_logo img{
  display: inline;
  max-width: 200px;
}

footer #copylight{
  text-align: center;
  font-size: 80%;
  padding-bottom: 20px;
}


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

  .ly_footNavArea {
    padding: 0px 0;
  }
  .ly_footNavArea_inner nav ul{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin:0 auto;
 }

 .ly_footNavArea_inner ul li {
  display: inline-block;
  padding: 15px 0px;
  width: 33%;
}

.ly_companyArea .bl_companyNavBlock ul li {
  display: block;
  padding: 5px;
}
footer #f_logo img{
  max-width: 40%;
}

}


/* =========================================================
　◆pageTop
========================================================= */

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop a {
  display: block;
  z-index: 999;
  /* padding: 8px 0 0 8px; */
  border-radius: 60px;
  width: 70px;
  height: 70px;
  background-color:#dddddd;
  color:#000510;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#pageTop span {
  position: absolute;
  top: 50%;
  right: 43%;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-top: 1px solid #000510;
  border-right: 1px solid #000510;
  transform: rotate(-45deg);
}

@media screen and (max-width: 600px){
  #pageTop a {
    width: 50px;
    height: 50px;
  }

}