@charset "utf-8";

/* CSS Document */



.gero {
  color: #2e5ba9;
  font-family: var(--font-family-serif);
}

/***********
gero header
************/
.gero header{
  font-weight: 600;
}
.gero .l-header-navi-list a small,
.gero .l-header-navi-list a span{
  font-weight: 600;
} 
.gero .l-header-cv{
  border: 1px solid #2e5ba9;
} 
.gero .l-footer-sns {
  border-bottom: 1px solid #2e5ba9;
}
  .gero .l-menu-btn span{
    background-color: #2e5ba9;
  }
/***********
gero pageVisual
************/
.gero .pageVisual{
  padding-top: 100px;
}
.gero .pageVisual h1{
  text-align: left;
  font-size: 270%;
  letter-spacing: 0.2rem;
  font-weight: 500;
}
.gero .pageVisual h1 span{
  display: block;
  font-size: 50%; 
  letter-spacing: 0.1rem;
  font-weight: 600;
}
/***********
project
************/
.project a{
  color: #2e5ba9;
  border: 1px solid #2e5ba9;
}
.project a:hover{
  color: #78a0d4!important;
  border: 1px solid #78a0d4!important;
  background: transparent!important;
}
.project .l-btn[target="_blank"]::after{
  background: url(../../img/icon/external_bl.png) no-repeat center center / 100% auto ;
}
.project .l-btn[target="_blank"]:hover::after{
  opacity: 0.5;
}
.project .object{
  width: 100%;
  height: 600px;
  object-fit: cover;
}
.project .object-narrow{
  width: 100%;
  height: 650px;
  object-fit: cover;
  padding: 0 230px;
}
.project .block01{
  border-bottom: 1px solid #2e5ba9;
  padding-bottom: 20px;
  position: relative;
}
.project h2{
  letter-spacing: 0.3rem;
  font-size: 220%;
  line-height: 3.5rem;
  width: 100%;
}
.project h2 span{
  display: block;
  font-size: 65%;
  line-height: 2.5rem;
  letter-spacing: 0.1rem;
}
.project h2 img{
  margin-right: 10px;  
}
.project .illust01{
  position: absolute;
  left: 430px;
  bottom: 40px;
}
.project .block02{
  width: 610px;
  position: relative;
}
 .project h3 img{
  margin-right: 10px;
}
.project h3{
  font-size: 162%;
  letter-spacing: 0.2rem;
}
.project h3 span{
  display: block;
}
.project p{
  font-weight: 600;
  line-height: 2.0;
  margin-bottom: 1.5rem;
}
.project .illust02{
  position: absolute;
  left: 640px;
  top: -120px;
}
.project .illust03{
  position: absolute;
  left: 730px;
  bottom: 30px;
}
.project .block03{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.project .block03 .photo{
  width: 45%;
}
.project .block03 .photo span{
  font-size: 124%;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.project .block03 .space{
  margin-bottom: 200px;
}
.project .box{
  display: flex;
  width: 100%;
}
.project .box01{
  width: 610px;
  margin-left: auto;
}
.project .illust04{
  position: absolute;
  left: 30px;
  bottom: 160px;
}
.project .illust05{
  position: absolute;
  left: 710px;
  bottom: 20px;
}
.project .illust06{
  position: absolute;
  left: 800px;
  bottom: 60px;
}
.project .illust07{
  position: absolute;
  right: 20px;
  bottom: 810px;
}
.project .illust08{
  position: absolute;
  left: -40px;
  bottom: 100px;
}
.project .object-narrow-c{
  width: 1280px;
  margin: 0 auto;
}
.project .object-narrow{
  height: 600px;
  object-fit: cover;
}
.project .illust09{
  position: absolute;
  right: 0;
  bottom: 80px;
}
.project .block04{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.project .block04-first{
  width: 53%;
}
.project .block04-second{
  width: 40%;
}
.project .block04.reverse{
  flex-direction: row-reverse;
  align-items: start;
}
.project .media{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.project .media li{
  width: 25%;
  margin: 1% 3%;
}

@media screen and (max-width:1600px) {
.project .object-narrow{
  height: 600px;
  padding: 0;
}
}


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

/***********
gero pageVisual
************/
.gero .pageVisual h1{
  font-size: 200%;
  line-height: 1.8rem;
  letter-spacing: 0.1rem;
}
/***********
project
************/
.project .object{
  height: 250px;
}
.project .object-narrow{
  height: 250px;
  padding: 0;
}
.project .block01{
  position: relative;
  padding-bottom: 15px;
}
.project h2{
  font-size: 154%;
  line-height: 2.3rem;
  letter-spacing: 0.2rem;
}
.project h2 span{
  font-size: 55%;
  line-height: 1.2rem;
}
.project h2 img.hito{
  width: 80px;
}
.project h2 img.mirai{
  width: 130px;
}
.project .illust01{
  left: 67%;
  bottom: 30%;
  width: 30%;
  height: auto;
}
.project .block02{
  width: 100%;
}
.project h3{
  font-size: 139%;
  letter-spacing: 0.2rem;
}
.project h3 img{
  width: 90px;
}
.project p{
  line-height: 2.0;
}
.project .illust02-c{
  width: 80%;
  margin: 0 auto;
}
.project .illust02{
  position: static;
}
.project .illust03-c{
  width: 70%;
  margin: 0 auto;
}
.project .illust03{
  position: static;
}
.project .block03{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.project .block03 .photo{
  width: 44%;
  margin: 3%;
}
.project .block03 .photo span{
  font-size: 108%;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.project .l-linkWrap{
  padding: 0;
  text-align: left;
}
.l-linkWrap.-right{
  text-align: left;
}
.project .box{
  display: block;
  width: 100%;
}
.project .box01{
  width: 100%;
  margin-left: 0;
  display: flex;
  align-items: end;
}
.project .half{
  width: 60%;
}
.project .illust04-c{
  width: 40%;
  padding: 0 1% 10px 2%;
}
.project .illust04{
  position: static;

}
.project .illust05-c{
  width: 65%;
  margin: 0 auto;
}
.project .illust05{
  position: static;
}
.project .illust06-c{
  width: 55%;
  margin: 0 auto;
}
.project .illust06{
  position: static;
}
.project .illust07{
  position: static;
}
.project .illust08{
  position: static;
}
.project .illust09{
  position: static;
  width: 80%;
  margin-top: 10px;
}
.project .illust10{
  width: 48%;
}
.project .block04{
  display: block;
  width: 100%;
}
.project .block04.reverse{
  flex-direction: row;
}
.project .block04-first{
  width: 65%;
  margin: 0 auto 40px;
}
.project .block04-second{
  width: 100%;
}
.project .media{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.project .media li{
  width: 29%;
  margin: 1% 2%;
}

}