@charset "utf-8";

/* MAIN EREA ID NAME
#concept
#mainInformation
#service
#company
#access
#recruit
#contact
*/


/* default CSS ======================================================================>>> */
#container {
  width: 100%;
  background: url("../image/key-visual03.jpg") center center / cover no-repeat fixed;
  margin-bottom: 360px;
}
#key-visual {
  width: 100%;
  height: auto;
  background: rgba(0,116,192,.70);
  position: absolute;
}
/* Mobile用タイトルテキスト非表示 */
#key-visual .sp-key-inner { display: none; }
#key-visual .key-inner {
  display: block;
  width: 880px;
  height: 80px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#key-visual .key-office-name {
  font-size: 28px;
  letter-spacing: .2em;
  font-weight: 100;
  text-align: center;
}
#key-visual .key-office-name span span {
  color: #fff;
}
#key-visual .key-line {
  height: 1px;
  background: #fff;
  width: 0;
}
#key-visual .key-line.over-load {}
#key-visual .key-office-concept {
  padding-top: 4px;
  color: #343434;
  font-size: 28px;
  font-weight: 100;
  text-align: center;
}

#backTop {
  position: fixed;
  bottom: -30px;
  right: 20px;
}

/****************************
  h2 CSS
****************************/
#concept-area h2,
#service-area h2,
#office-area h2,
#access-area h2,
#contact-area h2 {
  font-size: 82px;
  font-weight: 100;
  border-bottom: 3px solid #232323;
  line-height: .65;
  color: #232323;
}
#main .main-content h2 br { display: none; }

#concept-area h2 > span,
#service-area h2 > span,
#office-area h2 > span,
#access-area h2 > span,
#contact-area h2 > span {
  font-size: 14px;
/*   padding: 0 0 24px 24px; */
  margin-left: 16px;
  position: relative;
  bottom: 12px;
}


/****************************
  Main Area CSS
****************************/
#main #concept-area,
#main #service-area,
#main #office-area,
#main #access-area,
#main #contact-area {
  padding: 40px 0;
}
#main #concept-area { padding-top: 32px; }


#main .sub-key-area {
  position: relative;
}
#main .sub-key-area img.sub-key {
  width: 100%;
  display: block;
  position: absolute;
  margin-bottom: 80px;
}
#main .sub-key-area p {
  position: absolute;
  top: 40%;
  width: 100%;
}
#main .sub-key-area p > span { display: block; }
#main .sub-key-area .sub-key-rightdesc > span {
  text-align: right;
  padding-right: 20px;
}
#main .sub-key-area .sub-key-leftdesc > span {
  text-align: left;
  padding-left: 20px;
}
#main .sub-key-area p .sub-text-white {
  color: #fff;
  font-size: 28px;
  font-family: sans-serif;
  font-weight: 100;
  visibility: hidden;
}
#main .sub-key-area p .sub-text-white span span {
  color: #232323!important;
  letter-spacing: .2em;
}
#main .sub-key-area p .sub-key-line {
  height: 3px;
}
#main .sub-key-area p .sub-text-black {
  color: #fff;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 100;
  letter-spacing: .08em;
}
/* スマホ sub-key非表示 */
#main .sp-sub-key { display: none; }

#main .content-description {
  width: 70%;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
#main .content-description br { display: block; }


/****************************
  Concept Area CSS
****************************/
#concept-area .concept-contents .concept-description {
  margin: 120px auto 80px;
  font-family: sans-serif;
  position: relative;
}
#concept-area .concept-contents .concept-contents-inner {
  width: 70%;
  margin: 0 auto;
}
#concept-area .concept-contents .concept-contents-inner dt {
  font-size: 34px;
  font-weight: bold;
  color: #0081c1;
  letter-spacing: .1em;
  margin-bottom: 24px;
  padding: 0 72px;
  text-align: center;
}
#concept-area .concept-contents .concept-contents-inner dt img {
  padding-right: 16px;
}
#concept-area .concept-contents .concept-contents-inner dd {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 2px dotted #ccc;
}



/****************************
  Service Area CSS
****************************/
#service-area {
  padding-top: 0;
  margin-bottom: 240px;
}
#service-area .service-contents .service-description {
  width: 70%;
  margin: 120px auto 80px;
  font-family: sans-serif;
}
#service-area .service-contents #service-slide-container {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
}
#service-area .service-contents #service-slide-container li {}
#service-area .service-contents #service-slide-container img { width: 100%; }
/* スマホ用スライド非表示 */
#service-area .service-contents #sp-service-slide-container { display: none; }




/****************************
  Office Area CSS
****************************/
#office-area .office-description {
  margin: 120px auto 80px;
  font-family: sans-serif;
}

/* dl Element */
#office-area .office-information {
  width: 70%;
  margin: 0 auto 80px;
}
#office-area .office-information div {
  overflow: hidden;
  position: relative;
  padding: 24px;
  border-bottom: 2px dotted #ccc;
}
#office-area .office-information dt {
  float: left;
  width: 15%;
  color: #0074c0;
}
#office-area .office-information dd {
  float: left;
  width: 70%;
}





/****************************
  Access Area CSS
****************************/
#access-area {
  margin-bottom: 80px;
}
#access-area .access-description {
  margin: 120px auto 80px;
  font-family: sans-serif;
}
.access-map {
  width: 70%;
  margin: 0 auto 40px;
}
.access-map iframe {
  width: 100%;
  height: 300px;
  margin: 0 auto;
}
#access-area .access-info {
  text-align: center;
  margin: 0 auto 32px;
  padding-bottom: 32px;
  width: 70%;
  border-bottom: 2px dotted #ccc;
}
#access-area .access-info li {
  font-family: sans-serif;
  text-align: center;
}

#access-area .parking-info {
  margin-bottom: 32px;
  border-bottom: 2px dotted #ccc;
  padding-bottom: 32px;
}
#access-area .parking-info li {
  text-align: center;
  line-height: 1.5;
}
#access-area .parking-info li:nth-child(2) {
  margin-bottom: 24px;
}


/****************************
  Contact Area CSS
****************************/
#contact-area {
  margin-bottom: 32px;
}
#contact-area .contact-contents {}
#contact-area .contact-contents .contact-description {
  margin: 120px auto 40px;
  padding-bottom: 80px;
  font-family: sans-serif;
  padding-bottom: 24px;
  border-bottom: 2px dotted #ccc;
}
#contact-area .contact-contents .contact-info { text-align: center; }
#contact-area .contact-contents .contact-info ul { display: block; }
#contact-area .contact-contents .contact-info ul.sp-contact-info { display: none; }
#contact-area .contact-contents .contact-info ul li {
  margin-bottom: 16px;
}
#contact-area .contact-contents .contact-info ul li:first-child img {
  margin-bottom: 8px;
}
#contact-area .contact-contents .contact-info ul li span {
  font-size: 32px;
  color: #232323;
  font-weight: 100;
  letter-spacing: .08em;
  position: relative;
  top: -10px;
}


/****************************
  Contact btn Area CSS
****************************/

#contact-btn-area { text-align: center; }
#contact-btn-area .contact-btn {
  font-family: sans-serif;
  border: 1px solid #0074c0;
  width: 150px;
  height: 40px;
  margin: 0 auto;
}
#contact-btn-area .contact-btn-text {
  margin-bottom: 16px;
}
#contact-btn-area .contact-btn a {
  color: #0074c0;
  font-weight: 100;
  display: block;
  padding: 8px 0 8px;
}
.service-slide-container button { display: inline; }

.service-slide-container button.slick-prev,
.service-slide-container button.slick-next {
  height: auto;
}


/* END  default CSS =================================================================>>> */



/* Break Point ======================================================================>>> 1024px以下 */
@media screen and ( max-width:1024px ){
  #container {
    width: 100%;
  background: url("../image/key-visual03.jpg") center center / cover no-repeat fixed;
    margin-bottom: 360px;
  }
  #key-visual {
    width: 100%;
    height: auto;
    background: rgba(0,116,192,.75);
    position: absolute;
  }
  #key-visual .key-inner { display: none; }
  #key-visual .sp-key-inner {
    display: block;
    width: 80%;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  #key-visual .sp-key-inner .sp-key-office-name {
    width: 100%;
    font-size: 20px;
    color: #fff;
    font-weight: 100;
    letter-spacing: .12em;
  }
  #key-visual .sp-key-inner .sp-key-office-name span span {
    color: #fff;
  }

  #backTop {
    position: fixed;
    bottom: -30px;
    right: 20px;
  }

  /****************************
    h2 CSS
  ****************************/
  #concept-area h2,
  #service-area h2,
  #office-area h2,
  #access-area h2,
  #contact-area h2 {
    width: 100%;
    font-size: 48px;
    font-weight: 100;
    border-bottom: 3px solid #232323;
    line-height: .65;
    color: #232323;
    padding-left: 5px;
  }
  #main .main-content h2 br { display: block; }
  #concept-area h2 > span,
  #service-area h2 > span,
  #office-area h2 > span,
  #access-area h2 > span,
  #contact-area h2 > span {
    font-size: 14px;
    margin-left: 0;
    position: relative;
    bottom: 12px;
  }


  /****************************
    Main Area CSS
  ****************************/
  #main #concept-area,
  #main #service-area,
  #main #office-area,
  #main #access-area,
  #main #contact-area {
    padding: 40px 0;
  }
  #main #concept-area { padding-top: 32px; }

  #main .sub-key-area {
    position: relative;
  }
  #main .sp-sub-key-area {
    position: relative;
  }
  #main .sub-key-area img.sub-key { display: none; }
  #main .sp-sub-key {
    display: block;
    position: relative;
    width: 100%;
  }
  #main .sp-sub-key p { width: 100%; }
  #main .sub-key-area p span span { font-size: 28px; }
  #main .sub-key-area p .sub-text-black {
    font-size: 14px;
  }
  #main .sub-key-area .sub-key-rightdesc > span {
    text-align: center;
    padding-right: 0;
  }
  #main .sub-key-area .sub-key-leftdesc > span {
    text-align: center;
    padding-left: 0;
  }

  #main .content-description {
    width: 70%;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }
  #main .content-description br { display: none; }


  /****************************
    Concept Area CSS
  ****************************/
  #concept-area .concept-contents .concept-description {
    width: 95%;
    margin: 80px auto 32px;
    font-family: sans-serif;
  }
  #concept-area .concept-contents .concept-contents-inner {
    width: 100%;
    margin: 0 auto;
  }
  #concept-area .concept-contents .concept-contents-inner dt {
    width: 100%;
    font-size: 21px;
    font-weight: bold;
    color: #0081c1;
    letter-spacing: .1em;
    margin-bottom: 24px;
    padding: 0 72px;
    text-align: center;
  }
  #concept-area .concept-contents .concept-contents-inner dt img {
    padding-right: 16px;
  }
  #concept-area .concept-contents .concept-contents-inner dd {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: 2px dotted #ccc;
  }



  /****************************
    Service Area CSS
  ****************************/
  #service-area {
    padding-top: 0;
    margin-bottom: 240px;
  }
  #service-area .service-contents .service-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }
  #service-area .service-contents #service-slide-container {display: none;}
  #service-area .service-contents #service-slide-container li {}
  #service-area .service-contents #service-slide-container img { width: 100%; }

  #service-area .service-contents #sp-service-slide-container {
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
  }
  #service-area .service-contents #sp-service-slide-container li {}
  #service-area .service-contents #sp-service-slide-container img { width: 100%; }


  /****************************
    Office Area CSS
  ****************************/
  #office-area .office-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }

  /* dl Element */
  #office-area .office-information {
    width: 100%;
    margin: 0 auto 80px;
  }
  #office-area .office-information div {
    overflow: hidden;
    position: relative;
    padding: 8px;
    border-bottom: 2px dotted #ccc;
  }
  #office-area .office-information dt {
    float: left;
    width: 19%;
    color: #0074c0;
    padding-bottom: 4px;
  }
  #office-area .office-information dd {
    float: left;
    width: 85%;
    padding-left: 3%;
  }





  /****************************
    Access Area CSS
  ****************************/
  #access-area {
    margin-bottom: 80px;
  }
  #access-area .access-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }
  .access-map {
    width: 90%;
    margin: 0 auto 40px;
  }
  .access-map iframe {
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #access-area .access-info {
    text-align: center;
    margin: 0 auto 32px;
    padding-bottom: 32px;
    width: 80%;
    border-bottom: 2px dotted #ccc;
  }
  #access-area .access-info li {
    font-family: sans-serif;
    text-align: center;
    font-size: 14px;
    
  }

  #access-area .parking-info {
    margin-bottom: 56px;
  }
  #access-area .parking-info li {
    text-align: center;
    line-height: 1.5;
  }
  #access-area .parking-info li:nth-child(2) {
    margin-bottom: 24px;
  }


  /****************************
    Contact Area CSS
  ****************************/
  #contact-area {
    margin-bottom: 32px;
  }
  #contact-area .contact-contents {}
  #contact-area .contact-contents .contact-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
    padding-bottom: 24px;
    border-bottom: 2px dotted #ccc;
  }
  #contact-area .contact-contents .contact-info {
    text-align: center;
  }
  #contact-area .contact-contents .contact-info ul { display: none; }
  #contact-area .contact-contents .contact-info ul.sp-contact-info { display: block; }
  #contact-area .contact-contents .contact-info ul li {
    margin-bottom: 16px;
  }
  #contact-area .contact-contents .contact-info ul li span {
    font-size: 32px;
    color: #232323;
    font-weight: 100;
    position: relative;
    top: -10px;
  }
  
  #contact-area .contact-contents .sp-contact-info {
    text-align: center;
  }
  #contact-area .contact-contents .sp-contact-info ul { display: none; }
  #contact-area .contact-contents .sp-contact-info ul.sp-contact-info { display: block; }
  #contact-area .contact-contents .sp-contact-info ul li {
    margin-bottom: 16px;
  }
  #contact-area .contact-contents .sp-contact-info ul li span {
    font-size: 32px;
    color: #232323;
    font-weight: 100;
    position: relative;
    top: -10px;
  }


  /****************************
    Contact btn Area CSS
  ****************************/

  #contact-btn-area { text-align: center; }
  #contact-btn-area .contact-btn {
    font-family: sans-serif;
    border: 1px solid #0074c0;
    width: 150px;
    height: 40px;
    margin: 0 auto;
  }
  #contact-btn-area .contact-btn-text {
    margin-bottom: 16px;
    margin: 5% auto;
    width: 90%;
  }
  #contact-btn-area .contact-btn a {
    color: #0074c0;
    font-weight: 100;
    display: block;
    padding: 8px 0 8px;
  }


  .service-slide-container button.slick-prev,
  .service-slide-container button.slick-next { display: none!important; }
  .sp-service-slide-container button.slick-prev,
  .sp-service-slide-container button.slick-next { display: none!important; }


}
/* END Break Point ==================================================================>>> 1024px以下 */
















/* Break Point ======================================================================>>> 480px以下 */
@media screen and ( max-width:480px ){
  #container {
    width: 100%;
  background: url("../image/key-visual03.jpg") center center / cover no-repeat fixed;
    margin-bottom: 200px;
  }
  #key-visual {
    width: 100%;
    height: auto;
    background: rgba(0,116,192,.75);
    position: absolute;
  }
  #key-visual .sp-key-inner {
    display: block;
    width: 80%;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  #key-visual .sp-key-inner .sp-key-office-name {
    width: 100%;
    font-size: 20px;
    color: #fff;
    font-weight: 100;
    letter-spacing: .12em;
  }
  #key-visual .sp-key-inner .sp-key-office-name span span {
    color: #fff;
  }
  #key-visual .key-inner { display: none; }

  #backTop {
    position: fixed;
    bottom: -30px;
    right: 20px;
  }

  /****************************
    h2 CSS
  ****************************/
  #concept-area h2,
  #service-area h2,
  #office-area h2,
  #access-area h2,
  #contact-area h2 {
    width: 100%;
    font-size: 48px;
    font-weight: 100;
    border-bottom: 3px solid #232323;
    line-height: .65;
    color: #232323;
    padding-left: 5px;
  }
  #main .main-content h2 br { display: block; }
  #concept-area h2 > span,
  #service-area h2 > span,
  #office-area h2 > span,
  #access-area h2 > span,
  #contact-area h2 > span {
    font-size: 14px;
    margin-left: 0;
    position: relative;
    bottom: 12px;
  }


  /****************************
    Main Area CSS
  ****************************/
  #main #concept-area,
  #main #service-area,
  #main #office-area,
  #main #access-area,
  #main #contact-area {
    padding: 40px 0;
  }
  #main #concept-area { padding-top: 32px; }
  #main .sub-key-area {
    position: relative;
  }
  #main .sub-key-area img.sub-key { display: none; }
  #main .sp-sub-key {
    display: block;
    position: relative;
    width: 100%;
  }
  #main .sp-sub-key p {
    width: 100%;
  }
  #main .sub-key-area p span span {
    font-size: 18px;
  }

  #main .content-description {
    width: 70%;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }
  #main .content-description br { display: none; }



  /****************************
    Concept Area CSS
  ****************************/
  #concept-area .concept-contents .concept-description {
    width: 95%;
    margin: 80px auto 32px;
    font-family: sans-serif;
  }
  #concept-area .concept-contents .concept-contents-inner {
    width: 100%;
    margin: 0 auto;
  }
  #concept-area .concept-contents .concept-contents-inner dt {
    width: 100%;
    font-size: 21px;
    font-weight: bold;
    color: #0081c1;
    letter-spacing: .1em;
    margin-bottom: 24px;
    padding: 0 72px;
    text-align: center;
  }
  #concept-area .concept-contents .concept-contents-inner dt img {
    padding-right: 16px;
  }
  #concept-area .concept-contents .concept-contents-inner dd {
    text-align: left;
    margin-bottom: 32px;
    padding-bottom: 24px;
    margin-left: 5%;
    margin-right: 5%;
    border-bottom: 2px dotted #ccc;
  }



  /****************************
    Service Area CSS
  ****************************/
  #service-area {
    padding-top: 0;
    margin-bottom: 240px;
  }
  #service-area .service-contents .service-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }
  #service-area .service-contents #service-slide-container {display:none;}
  #service-area .service-contents #service-slide-container li {}
  #service-area .service-contents #service-slide-container img { width: 100%; }

  #service-area .service-contents #sp-service-slide-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
  }
  #service-area .service-contents #sp-service-slide-container li {}
  #service-area .service-contents #sp-service-slide-container img { width: 100%; }


  /****************************
    Office Area CSS
  ****************************/
  #office-area .office-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }

  /* dl Element */
  #office-area .office-information {
    width: 100%;
    margin: 0 auto 80px;
  }
  #office-area .office-information div {
    overflow: hidden;
    position: relative;
    padding: 8px;
    border-bottom: 2px dotted #ccc;
  }
  #office-area .office-information dt {
    float: left;
    width: 95%;
    color: #0074c0;
  }
  #office-area .office-information dd {
    float: left;
    width: 95%;
    padding-left: 3%;
  }





  /****************************
    Access Area CSS
  ****************************/
  #access-area {
    margin-bottom: 80px;
  }
  #access-area .access-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
  }
  .access-map {
    width: 90%;
    margin: 0 auto 40px;
  }
  .access-map iframe {
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #access-area .access-info {
    text-align: center;
    margin: 0 auto 32px;
    padding-bottom: 32px;
    width: 80%;
    border-bottom: 2px dotted #ccc;
  }
  #access-area .access-info li {
    font-family: sans-serif;
    text-align: center;
    font-size: 14px;
  }

  #access-area .parking-info {
    margin-bottom: 56px;
  }
  #access-area .parking-info li {
    text-align: center;
  }
  #access-area .parking-info li:nth-child(2) {
    margin-bottom: 24px;
  }


  /****************************
    Contact Area CSS
  ****************************/
  #contact-area {
    margin-bottom: 32px;
  }
  #contact-area .contact-contents {}
  #contact-area .contact-contents .contact-description {
    width: 95%;
    margin: 80px auto;
    font-family: sans-serif;
    padding-bottom: 24px;
    border-bottom: 2px dotted #ccc;
  }
  #contact-area .contact-contents .contact-info {
    text-align: center;
  }
  #contact-area .contact-contents .contact-info ul { display: none; }
  #contact-area .contact-contents .contact-info ul.sp-contact-info { display: block; }
  #contact-area .contact-contents .contact-info ul li {
    margin-bottom: 16px;
  }
  #contact-area .contact-contents .contact-info ul li span {
    font-size: 24px;
    color: #232323;
    font-weight: 100;
    position: relative;
    top: -10px;
  }
  #contact-area .contact-contents .contact-info ul li span a {
    width: 95%;
  }
  
  #contact-area .contact-contents .sp-contact-info { text-align: center; }
  #contact-area .contact-contents .sp-contact-info ul li { margin-bottom: 16px; }
  #contact-area .contact-contents .sp-contact-info ul li span {
    font-size: 24px;
    color: #232323;
    font-weight: 100;
    position: relative;
    top: -10px;
  }
  #contact-area .contact-contents .sp-contact-info ul li span a { width: 95%; }
  #contact-area .contact-contents .sp-contact-info ul li:nth-child(2) img { padding-bottom: 8px; }
    


  /****************************
    Contact btn Area CSS
  ****************************/

  #contact-btn-area { text-align: center; }
  #contact-btn-area .contact-btn {
    font-family: sans-serif;
    border: 1px solid #0074c0;
    width: 150px;
    height: 40px;
    margin: 0 auto;
  }
  #contact-btn-area .contact-btn-text {
    margin-bottom: 16px;
    margin: 5% auto;
    width: 90%;
  }
  #contact-btn-area .contact-btn a {
    color: #0074c0;
    font-weight: 100;
    display: block;
    padding: 8px 0 8px;
  }

}
/* END Break Point ==================================================================>>> 480px以下 */