@media (min-width:1181px) {
  #header {
    position: fixed;
  }
}

#main {
  background: #fff;
}

#main .visual {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 62%;
}
#main .visual .inner {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 9;
  max-width: 100%;
  width: 1360px;
  padding: 0 15px;
  margin: 0 auto;
  transform: translateY(-50%);
}
@media (min-width:1181px) and (max-width:1400px) {
  #main .visual .inner {
    top: 55%;
  }
}
#main .visual .inner img {
  max-width: 59%;
}
#main .visual > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .visual .topics {
  max-width: 950px;
  position: relative;
  background: #fff;
  border-radius: 0 2em 2em 0;
  margin-top: 3em;
}
#main .visual .topics:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
}
#main .visual .topics > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#main .visual .topics .logo {
  width: 160px;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: 'Helvetica',sans-serif;
  color: #000;
}
#main .visual .topics .list {
  width: calc(100% - 160px);
}
#main .visual .topics .list .item {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
  padding: .75em 0;
  padding-right: 2em;
}
#main .visual .topics .list .item .time {
  width: 7.5em;
}
#main .visual .topics .list .item .title {
  width: calc(100% - 7.5em);
}
@media (max-width:880px) {
  #main .visual .topics .logo {
    width: 140px;
  }
  #main .visual .topics .list {
    width: calc(100% - 140px);
  }
  #main .visual .topics .list .item .time,
  #main .visual .topics .list .item .title {
    width: 100%;
  }
}
@media (max-width:768px) {
  #main .visual .topics .logo {
    width: 120px;
  }
  #main .visual .topics .list {
    width: calc(100% - 120px);
  }
}
@media (max-width:640px) {
  #main .visual {
    padding-top: 100%;
  }
  #main .visual .topics .logo {
    padding-top: .5em;
  }
  #main .visual .topics .logo,
  #main .visual .topics .list {
    width: 100%;
  }
  #main .visual .topics .list {
    margin-top: -.5em;
  }
}
#main .visual .topics .list .item:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 1.5em;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  margin-top: -5px;
  transform: rotate(45deg);
  transition: .2s;
}
#main .visual .topics .list .item:hover {
  color: var(--c-blue);
}
#main .visual .topics .list .item:hover:after {
  right: 1.25em;
}

#main .bg-gray {
}

#main .layout-1 {
  max-width: 1600px;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 100px 0;
  margin: 0 auto;
}
#main .layout-1 ~ .layout-1 {
  padding-top: 0;
}
#main .layout-1.reverse {
  flex-direction: row-reverse;
}
#main .layout-1 .photo {
  width: 46.875%;
}
#main .layout-1 .photo img {
  
}
#main .layout-1 .content {
  display: flex;
  align-items: center;
  width: 50%;
}
#main .layout-1 .content > div {
  max-width: 540px;
  padding: 0 65px;
  margin-left: auto;
}
#main .layout-1.reverse .content > div {
  margin-left: 0;
  margin-right: auto;
}
#main .layout-1 .catch {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}
#main .layout-1 .catch span {
  color: #fff;
  line-height: 1.33;
  padding: 0 .2em;
  background: #000;
}
#main .layout-1 .btn-1 {
  width: 250px;
  height: 60px;
  font-size: 1.6rem;
  margin: 2em auto 0;
}
@media (max-width:1024px) {
  #main .layout-1 .photo,
  #main .layout-1 .content {
    width: 100%;
  }
  #main .layout-1 .photo {
    text-align: center;
  }
  #main .layout-1 .content > div {
    padding: 0 15px;
    margin: 0 auto !important;
  }
  #main .layout-1 > * ~ * {
    margin-top: 30px;
  }
}
@media (max-width:768px) {
  #main .layout-1 {
    padding: 50px 0;
  }
}

#main .features .content {
  background: url("../images/index/bg-2.png") center center /contain no-repeat;
}
#main .service .content {
  background: url("../images/index/bg-2.png") center center /contain no-repeat;
}
#main .equipment .content {
  background: url("../images/index/bg-2.png") center center /contain no-repeat;
}
#main .sdgs .content {
  background: url("../images/index/bg-2.png") center center /contain no-repeat;
}


#main .works {
  overflow: hidden;
  padding: 100px 0;
  background: url("../images/index/works-bg.jpg") center center /cover no-repeat;
}
#main .works .title-1 {
  color: #fff;
}
#main .works .title-1:before {
  color: #3469d0;
}
#main .works .catch {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-top: 1.5em;
}
@media (max-width:768px) {
  #main .works {
    padding: 50px 15px;
  }
  #main .works .catch {
    font-size: 2.5rem;
  }
}
@media (max-width:540px) {
  #main .works .catch {
    font-size: 2.2rem;
  }
}
#main .works .btn-1 {
  margin: 2em auto 0;
}
#main .works .list-card {
  max-width: 1600px;
  margin: 0 auto;
}
#main .works .list-card .item {
  max-width: 330px;
  display: block;
  overflow: hidden;
  background: #fff;
  border-radius: 0 40px 0 40px;
}
#main .works .list-card .item .photo {
  position: relative;
  padding-top: 66.66%;
}
#main .works .list-card .item .photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main .works .list-card .item .content {
  font-weight: 700;
  text-align: center;
  padding: 1em;
}
#main .works .list-card .item .arrow {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  background: var(--c-blue);
  border-radius: 50%;
  margin: .5em auto;
}
#main .works .list-card .item .arrow:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -7px;
}

#main .company {
  padding: 120px 0;
  background: url("../images/index/company-bg.png") center 0 /contain no-repeat #f2f2f2;
}
#main .company .body {
  width: 1200px;
}
#main .company .box {
  padding: 60px;
  background: #fff;
  border-radius: 100px 100px 0 0;
}
#main .company .box .flex-col-3 {
  
}
#main .company .box .item {
  display: block;
  position: relative;
  width: 30.56%;
  overflow: hidden;
  border-radius: 0 100px 0 0;
}
#main .company .box .item .photo {
  
}
#main .company .box .item .content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  font-size: 2.5rem;
  font-weight: 700;
  padding: .5em;
  padding-right: 50px;
  color: #fff;
}
#main .company .box .item .content .arrow {
  position: absolute;
  top: 1em;
  right: 1em;
  display: block;
  width: 30px;
  height: 30px;
  background: var(--c-blue);
  border-radius: 50%;
}
#main .company .box .item .content .arrow:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -7px;
}
@media (max-width:1180px) {
  #main .company .box .item .content {
    font-size: 2.2rem;
  }
  #main .company .box .item .content .arrow {
    right: .5em;
  }
}
@media (max-width:1024px) {
  #main .company .box {
    padding: 40px;
    border-radius: 40px 40px 0 0;
  }
  #main .company .box .item {
    width: 32%;
  }
  #main .company .box .item .content {
    padding-right: 40px;
  }
}
@media (max-width:960px) {
  #main .company .box .item .content {
    font-size: 2rem;
  }
  #main .company .box .item .content .arrow {
    margin-top: -5px;
  }
}
@media (max-width:880px) {
  #main .company .box .flex-col-3 {
    justify-content: center;
    gap: 3%;
  }
  #main .company .box .item {
    width: 47%;
  }
  #main .company .box .item .photo img {
    width: 100%;
  }
  #main .company .box .item:nth-child(n+3) {
    margin-top: 3%;
  }
}
@media (max-width:768px) {
  #main .company {
    padding-top: 30px;
    padding-bottom: 50px;
  }
  #main .company .box {
    padding: 30px;
  }
  #main .company .box .flex-col-3 {
    gap: 0;
  }
  #main .company .box .item {
    width: 49%;
    border-radius: 0 25px 0 0;
  }
  #main .company .box .item:nth-child(2n+2) {
    margin-left: 2%;
  }
  #main .company .box .item:nth-child(n+3) {
    margin-top: 2%;
  }
  #main .company .box .item .content {
    font-size: 1.5rem;
    padding-right: 2em;
  }
  #main .company .box .item .content .arrow {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
  }
  #main .company .box .item .content .arrow::before {
    width: 7px;
    height: 7px;
    border-top-width: 1px;
    border-right-width: 1px;
    margin-top: -4px;
    margin-left: -5px;
  }
}
/*
@media (max-width:640px) {
  #main .company {
    padding-top: 50px;
  }
  #main .company .box {
    max-width: 540px;
    margin: 0 auto;
  }
  #main .company .box .flex-col-3 {
    max-width: 330px;
    display: block;
    margin: 0 auto;
  }
  #main .company .box .flex-col-3 .item {
    width: 100%;
  }
  #main .company .box .flex-col-3 .item ~ .item {
    margin-top: 30px;
  }
}
*/
@media (max-width:540px) {
  #main .company {
    padding-top: 20px;
  }
}

#main .recruit {
  padding-top: 0;
  padding-bottom: 0;
}
#main .recruit .header {
  aspect-ratio: 1600 / 720;
  padding-top: 5vw;
  background: url("../images/index/recruit-visual.jpg") center center /cover no-repeat #000;
}
#main .recruit .header .title-1 {
  font-size: 3rem;
  color: #fff;
}
#main .recruit .header .title-1:before {
  font-size: 4em;
  color: #3469d0;
  margin-bottom: .1em;
}
@media (min-width:1600px) {
  #main .recruit .header {
    min-height: 720px;
  }
}
@media (max-width:1180px) {
  #main .recruit .header .title-1:before {
    font-size: 3em;
  }
}
@media (max-width:880px) {
  #main .recruit .header .title-1 {
    font-size: 2.5rem;
  }
}
@media (max-width:768px) {
  #main .recruit .header {
    aspect-ratio: 4 / 3;
  }
}
#main .recruit .contents {
  padding: 100px 0 120px;
  background: url("../images/index/recruit-bg.png") center center no-repeat #f2f2f2;
}
#main .recruit .contents .catch {
  font-size: 6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  color: #000;
}
#main .recruit .contents .catch rt {
  position: relative;
  font-size: 2rem;
}
@media (min-width:769px) {
  #main .recruit .contents .catch rt {
    top: .1em;
  }
}
#main .recruit .contents .btn-1 {
  margin: 3em auto 0;
}
@media (max-width:1180px) {
  #main .recruit .contents .catch {
    font-size: 5rem;
  }
}
@media (max-width:980px) {
  #main .recruit .contents {
    padding: 80px 0;
    background-size: contain;
  }
}
@media (max-width:540px) {
  #main .recruit .contents {
    padding: 50px 0;
    background-position: center 25%;
  }
  #main .recruit .contents .catch {
    font-size: 3.6rem;
  }
}