@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*ヘッダー*/
/*メイン*/
#top_navi {
  width: 70%;
  margin: 200px auto 0;
  padding: 0 0 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; }
  #top_navi li {
    width: 12%; }

#construction {
  background-color: #009fe6; }

#civil_engineering {
  background-color: #f39800; }

#transportation {
  background-color: #8fc31f; }

#food_service {
  background-color: #e61673; }

#real_estate {
  background-color: #b28247; }

.area {
  width: 100%;
  padding: 2.5em 0;
  background-image: radial-gradient(circle, #ffffff40 6.5px, transparent 6.5px);
  background-position: 0 0;
  background-size: 33px 33px; }
  .area .area_inner {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    .area .area_inner h2 {
      width: 480px; }
    .area .area_inner dl {
      width: calc(100% - 500px);
      font-weight: bold;
      color: #fff; }
      .area .area_inner dl dt {
        font-style: italic; }
      .area .area_inner dl dd {
        font-size: 200%; }
  .area ul {
    width: 80%;
    margin: 3em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    .area ul li {
      width: 29.333%;
      background-color: #fff;
      padding: 0.5em 1% 0; }
      .area ul li figure {
        width: 100%; }
        .area ul li figure figcaption {
          text-align: center; }
      .area ul li:nth-child(n+4) {
        margin: 2em 0 0; }

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1300px) and (max-width: 1500px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet2 */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #top_navi {
    margin: 150px auto 0; }
    #top_navi li {
      width: 12%; }

  .area .area_inner h2 {
    width: 380px; }
  .area .area_inner dl {
    width: calc(100% - 400px); }

  /*フッター*/ }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #top_navi {
    margin: 100px auto 0; }
    #top_navi li {
      width: 12%; }

  .area .area_inner h2 {
    width: 280px; }
  .area .area_inner dl {
    width: calc(100% - 300px); } }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #top_navi {
    width: 90%;
    margin: 100px auto 0;
    padding: 0 0 2em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    #top_navi::after {
      content: "";
      display: block;
      width: 31.333%; }
    #top_navi li {
      width: 31.333%; }
      #top_navi li:nth-child(n+4) {
        margin: 1em 0 0; }

  .area {
    width: 100%; }
    .area .area_inner {
      width: 90%;
      flex-direction: column; }
      .area .area_inner h2 {
        width: 280px; }
      .area .area_inner dl {
        width: 100%; }
        .area .area_inner dl dt {
          font-style: italic; }
    .area ul {
      width: 90%; }
      .area ul li {
        width: 46%; }
        .area ul li:nth-child(n+3) {
          margin: 2em 0 0; }

  #slider_position {
    margin: 0 0 2.5em; }
    #slider_position #container .swiper02 {
      margin: 0; }

  .fixed-header {
    display: none; }

  #m_top {
    width: 90%;
    margin: 2.5em auto 0; }
    #m_top #m_inner {
      width: 100%;
      padding: 0; }
      #m_top #m_inner h2 {
        font-size: 180%; }
      #m_top #m_inner p {
        margin: 1em 0 0; }
    #m_top figure {
      position: static;
      width: 90%;
      margin: 0 auto; }

  .back01 {
    margin: 1.5em 0 0;
    padding: 1.5em 0; }

  #business {
    width: 90%; }
    #business h2 {
      width: 80%;
      font-size: 156%; }
    #business ul {
      margin: 1em 0 0; }
      #business ul li {
        width: 48%; }
        #business ul li:nth-child(n+3) {
          margin: 1em 0 0; }

  #info {
    margin: 1.5em 0 0;
    position: relative; }
    #info .b01 {
      display: none; }
    #info .b02 {
      display: none; }
    #info h3 {
      font-size: 156%;
      color: #fff;
      text-align: center;
      width: 90%;
      margin: 0 auto 0.25em; }
    #info ul {
      width: 100%;
      margin: 0; }
      #info ul li {
        width: 100%; }
        #info ul li:nth-child(n+2) {
          margin: 1em 0 0; }

  #introduction {
    width: 90%;
    margin: 2.5em auto 0; }
    #introduction li {
      flex-direction: column; }
      #introduction li .inner {
        width: 100%;
        flex-direction: column; }
        #introduction li .inner h3 {
          width: 30%;
          margin: 0 auto 1em; }
        #introduction li .inner dl {
          width: 100%;
          position: relative; }
          #introduction li .inner dl dt {
            font-size: 156%;
            line-height: 1.2;
            font-weight: bold; }
          #introduction li .inner dl dd {
            width: 100%;
            margin: 1em 0 0;
            font-size: 100%; }
            #introduction li .inner dl dd a {
              width: 80%;
              margin: 1em auto 0;
              display: block;
              position: static;
              bottom: 0; }
      #introduction li figure {
        width: 100%;
        margin: 1em 0 0; }

  #message {
    margin: 4em 0 0; }
    #message h2 {
      width: 90%;
      margin: 0 0 0 5%; }
      #message h2 img {
        width: 100%; }
    #message .m_inner {
      position: relative;
      width: 100%;
      margin: 2.5em 0 0;
      padding: 2.5em 0 4em;
      background-color: #009fe6;
      background-image: radial-gradient(circle, #ffffff40 6.5px, transparent 6.5px);
      background-position: 0 0;
      background-size: 33px 33px; }
      #message .m_inner p {
        width: 90%;
        color: #fff;
        margin: 0 0 0 5%; }
      #message .m_inner figure {
        position: static;
        bottom: 0;
        right: 0;
        width: 80%;
        margin: 0 auto; }

  #bottom {
    width: 90%;
    margin: 2.5em auto 0;
    flex-direction: column; }
    #bottom section {
      width: 100%; }
      #bottom section h2 {
        font-size: 156%;
        background-size: 35px;
        padding: 0 0 0 40px; }
      #bottom section table {
        margin: 1em 0; }
        #bottom section table tr {
          width: 100%; }
      #bottom section .gmap {
        margin: 1em 0 0; }

  /*フッター*/ }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }