#wrapper {
  background: #000000;
  color: #FFFFFF;
}

.btn a {
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px 0 19px;
  border-radius: 40px;
  position: relative;
  background-image: -moz-linear-gradient(0deg, #003b87 0%, #0092ee 100%);
  background-image: -webkit-linear-gradient(0deg, #003b87 0%, #0092ee 100%);
  background-image: -ms-linear-gradient(0deg, #003b87 0%, #0092ee 100%);
}

.btn a::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg);
}

.btn.btn_center a {
  margin-left: auto;
  margin-right: auto;
}

h2 {
  text-align: center;
}

h2 span {
  font-weight: 400;
}

h2 span.en, h2 span.ja {
  display: block;
  line-height: 1;
}

h2 span.en {
  font-size: 3.2rem;
}

h2 span.ja {
  margin-top: 13px;
  font-size: 1rem;
}

#first_contents_area {
  position: relative;
}

#works_area {
  background: #000000;
}

#project {
  background: #001238;
}

#works_area .result_list > li .image_area,
#project .result_list > li .image_area {
  position: relative;
}

#works_area .result_list > li .image_area h4,
#project .result_list > li .image_area h4 {
  position: absolute;
  left: 0;
  top: 50%;
  background: #FFFFFF;
  color: #000000;
  width: 150px;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.07rem;
  padding: 5px 0 3px;
  line-height: 1;
}

#works_area .result_list > li .image_area h4 .num,
#project .result_list > li .image_area h4 .num {
  font-size: 2.93rem;
  margin-left: 12px;
  padding-bottom: 5px;
}

#about .about_link {
  background: #002e8c;
}

#top_anniversary_area_wrapper {
  background: #FFFFFF;
  color: #000000;
}

#top_contact {
  background: #f2f4f9;
  color: #000000;
}

#top_contact .tel_area a {
  color: #000000;
}

@media screen and (min-width: 768px) {
  .btn a {
    font-size: 1.04rem;
  }
  .contents_area {
    width: 1100px;
    margin-right: auto;
    margin-left: auto;
  }
  #top_main_img_area {
    background: url(../img/client_index/mv.jpg) no-repeat;
    background-size: cover;
    height: 970px;
    background-position: bottom center;
    position: relative;
    padding-top: 345px;
    box-sizing: border-box;
    text-align: center;
  }
  #top_main_img_area #main_copy {
    margin-top: 40px;
    font-size: 7.87rem;
    line-height: 0.8;
    font-family: 'Times New Roman', Times, serif;
  }
  #top_main_img_area #sub_copy {
    margin-top: 43px;
    margin-top: 20px;
    font-size: 1.47rem;
  }
  #top_main_img_area #main_side_navi {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 250px;
  }
  #top_main_img_area #main_side_navi li:nth-of-type(1) {
    margin-bottom: 7px;
  }
  #first_contents_area {
    margin-top: -200px;
  }
  #first_contents_area #sincerity_area {
    min-height: 200px;
  }
  #first_contents_area #sincerity_area h2 {
    font-size: 2.93rem;
    line-height: 1.27;
    transform: translateY(-0.75em);
    text-align: left;
    font-weight: 500;
  }
  #first_contents_area #sincerity_area .btn a {
    margin-top: 2px;
  }
  #top_anniversary_area {
    position: relative;
  }
  #top_anniversary_area .contents_wrapper {
    position: relative;
    background: #000000 url(../img/client_index/100th_img.png) no-repeat;
    background-position: center right;
    z-index: 50;
  }
  #top_anniversary_area .contents_wrapper::after {
    content: "";
    position: absolute;
  }
  #top_anniversary_area::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 1px;
    background: #503c18;
    top: 55px;
    left: 0;
  }
  #top_anniversary_area::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 1px;
    background: #503c18;
    bottom: 60px;
    left: 0;
  }
  #works_area h2,
  #project h2 {
    transform: translateY(-27px);
  }
  #works_area h3,
  #project h3 {
    margin-top: 6px;
    font-size: 2.93rem;
    line-height: 1.27;
    text-align: center;
    font-weight: 500;
  }
  #works_area .description,
  #project .description {
    margin-top: 21px;
    line-height: 1.6;
  }
  #works_area .result_list,
  #project .result_list {
    width: 1200px;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
  }
  #works_area .result_list > li,
  #project .result_list > li {
    width: 360px;
  }
  #works_area .result_list > li .image_area .img,
  #project .result_list > li .image_area .img {
    width: 360px;
    height: 360px;
  }
  #works_area .result_list > li .image_area .img img,
  #project .result_list > li .image_area .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #works_area .result_list .place,
  #project .result_list .place {
    margin-top: 19px;
    display: flex;
  }
  #works_area .result_list .place li,
  #project .result_list .place li {
    border-left: 1px solid #FFFFFF;
    font-size: 0.8rem;
    padding: 0 14px;
    line-height: 1;
  }
  #works_area .result_list .place li:nth-of-type(1),
  #project .result_list .place li:nth-of-type(1) {
    border-left: none;
    padding-left: 0;
  }
  #works_area .result_list h5.name,
  #project .result_list h5.name {
    font-size: 1.2rem;
    line-height: 1.56;
    margin-top: 11px;
  }
  #works_area .result_list .txt,
  #project .result_list .txt {
    line-height: 1.6;
    padding: 9px 60px 9px 0;
    position: relative;
  }
  #works_area .result_list .txt::after,
  #project .result_list .txt::after {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    border-right: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    position: absolute;
    top: 7px;
    right: 0;
    transform: rotate(45deg);
  }
  #works_area .btn,
  #project .btn {
    margin-top: 40px;
  }
  #works_area {
    padding: 0 0 108px;
    position: relative;
  }
  #works_area::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 1200px;
    background: linear-gradient(to bottom right, #1b2233 50%, rgba(163, 126, 57, 0.5) 50.1%) no-repeat top left/100% 50%, linear-gradient(to top right, transparent 50%, rgba(163, 126, 57, 0.5) 50.1%) no-repeat bottom left/100% 50%;
    z-index: 3;
  }
  #works_area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 1200px;
    background: linear-gradient(to bottom left, #1b2233 50%, rgba(0, 45, 176, 0.35) 50.1%) no-repeat top left/100% 50%, linear-gradient(to top left, transparent 50%, rgba(0, 45, 176, 0.35) 50.1%) no-repeat bottom left/100% 50%;
    z-index: 3;
  }
  #works_area .contents_wrapper > * {
    z-index: 15;
    position: relative;
  }
  #project {
    padding: 0 0 90px;
    position: relative;
  }
  #project > * {
    z-index: 15;
    position: relative;
  }
  #project::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2400px;
    background: linear-gradient(to bottom left, transparent 50%, #000000 50%) no-repeat top left/100% 50%;
    z-index: 2;
  }
  #project h2 span.ja {
    margin-top: 21px;
  }
  #project .result_list h5.name {
    margin-top: 24px;
  }
  #top_common_news {
    position: relative;
  }
  #top_common_news > * {
    z-index: 15;
    position: relative;
  }
  #about {
    background: #242524 url(../img/client_index/about_bg.jpg) no-repeat;
    background-position: top center;
    background-size: 100% auto;
    position: relative;
    z-index: 17;
  }
  #about h2 {
    transform: translateY(-1.1em);
  }
  #about h2 .ja {
    margin-top: 8px;
  }
  #about .contents_area {
    padding-top: calc(34.72% - 3em);
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  #about .contents_area .about_area {
    text-align: center;
  }
  #about .contents_area .about_area h4 {
    font-size: 2.93rem;
    line-height: 1.41;
    font-weight: 500;
  }
  #about .contents_area .about_area .txt {
    margin-top: 27px;
    line-height: 1.6;
  }
  #about .contents_area .about_area .btn a {
    margin: 33px auto 0;
  }
  #about .about_link {
    margin-top: 85px;
    padding-bottom: 75px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #about .about_link li {
    margin: 65px 20px 0;
    width: 430px;
  }
  #about .about_link li.big {
    margin: 0;
    width: 50%;
  }
  #about .about_link li.big img {
    width: 100%;
    height: auto;
  }
  #top_anniversary_area_wrapper #top_anniversary_area {
    background: #FFFFFF;
    color: #000000;
  }
  #top_anniversary_area_wrapper #top_anniversary_area .contents_wrapper {
    background: #FFFFFF url(../img/client_index/100th_img.png) no-repeat;
    background-position: center right;
  }
  #top_contact {
    padding: 85px 0 115px;
  }
}