/*=============================================
=            PAGE HEAD            =
=============================================*/
#pageHead .companyImgWrapper .imgBg {
  background-image: url(./img/pageHead.jpg);
}

/*=====  End of PAGE HEAD  ======*/

/*=============================================
=           NAVI           =
=============================================*/

#navi {
  margin-top: 0px;
}
#navi .container{
	padding: 1em 0;
}
#navi .container a{
	font-size:3.6vw;
	color: #333;
	font-style: italic;
transition:all 0.5s;}
#navi .container a:hover{color: red;}

@media only screen and (min-width: 768px) {
#navi .container a{font-size: 1.4em;}
}

/*=============================================
=            LEAD            =
=============================================*/
#lead {
  margin-top: 0px;
}

/* MEDIA QUERY MEDIUM */
@media only screen and (min-width: 768px) {
  #lead {
    margin-top: 100px;
  }
  .solidBtn {
    width: 90%;
    left: 0;
    top: 3em;
    margin: 0 0 1em;
}
}
/*=====  End of LEAD  ======*/
/*=============================================
=           WORKS            =
=============================================*/

.worksRow{margin: 3em 0;
	padding: 0;
}
.worksTitle{position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1% 2%;
	background-color: rgba(0, 0, 0, 0.68);
	
}
.worksTitle a{color: #fff;
	font-size: 0.8em;
}
.worksBlock2  {
  position: relative;
padding: 0;
  overflow: hidden;
  border:1px solid rgb(243, 243, 243);
}
a.worksCat{margin-right: 1em;}

.worksBlock2 .hover-text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0,0,0,0.65);
  /*透明にして表示させない*/
  opacity: 0;
  /*ホバーの動き方*/
  transition: .3s ease-in-out;
}
.worksBlock2 .hover-text .text1 {
  font-size: 16px;
  padding: 4px 20px;
  margin: 0;
  line-height: 1.8em
}
.worksBlock2 .hover-text .text2 {
  font-size: 10px;
  padding: 20% 20px 0;
  margin: 0;
}
/*ホバーエフェクト*/
.worksBlock2:hover .hover-text {
  /*不透明にして表示*/
  opacity: 1;
}

.worksBlock2 .hover-img {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.worksBlock2 .hover-img:before{
  content: "";
  display: block;
  padding-top: 60%;
}

.worksBlock2 .hover-img img {
position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
/*ホバーエフェクト*/
.worksBlock2 .hover-img img{
  transform: scale(1);
  transition: .6s ease-in-out;
}
.worksBlock2:hover .hover-img img {
  transform: scale(1.1);
}

@media only screen and (min-width: 768px) {
#works {
    padding: 8% 0;
}
.worksRow{margin: 3em 0;
	padding: 0 10%;
}
}

/*=============================================
=            BUSINESS            =
=============================================*/
#business { 
  background-color: rgba(249, 216, 157, 0.1);
}

#business .businessWrapper {
  text-align: center;
  position: relative;
  margin-bottom: 60px;
}

#business .businessWrapper .businessTitle {
  font-weight: bold;
  color: #f15a24;
  letter-spacing: 0.2em;
}
#business .businessWrapper .dscBox {
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
#business {
    padding-top: 120px;
    padding-bottom: 120px;
}
}

/*=============================================
=            SERVICE           =
=============================================*/

.solidBtn {
    width: 90%;
    left: 0;
    top: 1em;
    margin: 0.5em;
}
.solidBtn .inner {
	font-size:0.8em;
	letter-spacing: 0;
font-weight: bold;
color: #ffbd00;
}
@media only screen and (min-width: 768px) {
#service {
    padding: 8% 0;
}
}
@media only screen and (min-width: 992px) {
.solidBtn {
    width: 90%;
    left: 5%;
    top: 3em;
    margin: 0 0 1em;
}
}
/*=============================================
=            OUTLINE           =
=============================================*/
#outline .outlineWrapper{background: none;
}
@media only screen and (min-width: 992px) {
#outline .outlineWrapper{background: url(./img/r-com-back.svg);
	background-repeat: no-repeat;
    background-position: center right;
    background-size: 500px;
}
}