@charset "utf-8";

/*----------------------------------------------
    BASE
----------------------------------------------*/

:root {
  --font-size-base: 14px;
  --font-size-title: 24px;
  --max-width-inner: inherit;
  --padding-top-content: 30px;
  --padding-bottom-content: 30px;
  --padding-side-content: 15px;
  --width-inner: 100%;
}

body {
  letter-spacing: .05em;
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-noscroll {
  overflow-y: hidden;
}

a[href*="tel:"] {
  cursor: pointer;
  pointer-events: auto;
}


/*----------------------------------------------
    COMMON(共通)
----------------------------------------------*/

.pc {
  display: none !important;
}

.tb {
  display: none !important;
}

.sp {
  display: block !important;
}


/*   HEADER   */

.h-inner {
  display: block;
  padding: 15px 10px;
}

.h-info {
  width: 100%;
}

.h-logo {
  position: relative;
  z-index: 100;
}

.h-logo img {
  height: auto;
  width: 200px;
}

.h-tel {
  display: none;
}

.h-menubtn {
  display: block;
}

.h-menubtn,
.h-menubtn span {
  display: inline-block;
  transition: all .3s;
}

.h-menubtn {
  height: 18px;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25px;
  z-index: 100;
}

.h-menubtn span {
  background-color: #000;
  height: 1px;
  position: absolute;
  left: 0;
  width: 100%;
}

.h-menubtn .t {
  top: 0;
}

.h-menubtn .m {
  top: 50%;
}

.h-menubtn .b {
  bottom: 0;
}

.h-menubtn.is-active .t {
  transform: translateY(8.5px) rotate(-135deg);
}

.h-menubtn.is-active .m {
  opacity: 0;
}

.h-menubtn.is-active .b {
  transform: translateY(-8.5px) rotate(135deg);
}

.h-nav {
  background-color: #fff;
  display: block;
  height: 100%;
  padding: 80px 15px;
  position: fixed;
  top: 0;
  left: 100%;
  text-align: center;
  transition: .4s all ease-in-out; 
  width: 100%;
  z-index: 99;
}

.h-nav.is-open {
  left: 0;
  transition: .4s all ease-in-out; 
}

.h-nav-btn {
  display: inline-block;
  max-width: 172px;
  width: 46%;
}

.h-nav-tel {
  font-size: min(10vw,36px);
  letter-spacing: .05em;
  margin-top: 30px;
}


/*   MAIN   */

.section2 {
  padding: 40px 0 20px;
}

.section2-title::before,
.section2-title::after {
  flex: 1;
  width: 100%;
}

.photo-container {
  column-gap: .5em;
  margin-bottom: 20px;
}

.photo-gallery .photo-container {
  row-gap: 30px;
}

.photo-arrow img {
  height: 16px;
  width: 16px;
}

.photo-caption {
  font-size: .9em;
  margin-top: .25em;
}

.cta-text {
  letter-spacing: .1em;
  line-height: 1.75;
}

/*   FOOTER   */

#footer {
  padding: 20px;
}


/*----------------------------------------------
    TOP PAGE  .home
----------------------------------------------*/

.home-concept-title {
  font-size: 18px;
  line-height: 1.5;
}

.home-concept-title-main {
  display: block;
  margin-top: .25em;
}

#home-concept .section-text {
  text-align: left;
}

.home-works-business-container {
  text-align: left;
}

.home-works-business-list {
  display: block;
}

.home-works-business-list-item {
  line-height: 1.75;
  margin-bottom: .5em;
  margin-left: 1.2em;
  text-indent: -1.2em;
}

#home-flow {
  padding-top: 20px;
}

.home-flow-inner {
  padding: 30px 0 50px;
}

.home-flow-tagline {
  font-size: 17px;
  line-height: 1.5;
}

.home-flow-workflow {
  overflow-x: scroll;
}

.home-flow-container {
  padding: 0 30px;
  width: 1080px;
}


.home-company-logo {
  margin-bottom: 20px;
}

.home-company-container {
  display: block;
}

.home-company-table {
  width: 100%;
}

.home-company-container .home-company-table:first-of-type {
  border-bottom: 0;
  border-right: 1px solid #000;
}

.home-company-table th,
.home-company-table td {
  display: block;
  line-height: 1.75;
  padding: 15px;
}

.home-company-table th {
  width: 100%;
}

.home-access-map iframe {
  height: 300px;
}


/*----------------------------------------------
    求人情報  .recruit
----------------------------------------------*/

.recruit-job-table {
  max-width: inherit;
}

.recruit-job-table th,
.recruit-job-table td {
  padding: 15px;
}

.recruit-job-table th {
  width: 25%;
}


/*----------------------------------------------
    お問い合わせ  .contact
----------------------------------------------*/

.contact-form-container {
  padding: 20px;
}

.btn-container {
  padding: 30px 0 15px;
}


/*----------------------------------------------
    送信完了  .thanks
----------------------------------------------*/

.thanks .section-text {
  text-align: left;
}