@charset "UTF-8";

/* //////////////////////////////// 
スマホ
//////////////////////////////////*/

/* -------------------------------- 
挨拶
-----------------------------------*/
.greeting {
  background: url(../img/company/bg/bg1.png), url(../img/company/bg/bg2.png);
  background-size: 70%, 80%;
  background-repeat: no-repeat;
  background-position: -100% 10%, 250% 100%;
}
.greeting p:nth-of-type(2) {
  padding: 1.5em 0;
}

/* -------------------------------- 
会社概要
-----------------------------------*/
tr {
  /* height: 7em; */
  line-height: 1.5;
  border-bottom: 1px solid var(--primary-color);
}
table tr:last-of-type {
  border-bottom: none;
}
th {
  padding: 1.5em 0 1.5em 0.5em;
  width: fit-content;
}
td {
  padding: 1.5em 0.5em 1.5em 1em;
  width: fit-content;
}
td .contact__form a {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
td ul li {
  white-space: nowrap !important;
}

/* -------------------------------- 
オフィス画像
-----------------------------------*/
.office {
  /* width: 90%; */
  margin: 0 auto 13vh;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.office1 {
  width: 65%;
  height: auto;
  margin-left: 5%;
}
.office2 {
  width: 50%;
  height: auto;
  margin-right: 5%;
  align-self: flex-end;
}
.office1 img,
.office2 img {
  width: 100%;
  vertical-align: bottom;
  border-radius: 15px;
}
.office__line {
  width: 100%;
  height: auto;
  position: absolute;
  top: 15%;
  z-index: 1;
  overflow: hidden;
}
.main_string .svg-elem-1 {
  stroke-dashoffset: 2029.0360107421875px;
  stroke-dasharray: 2029.0360107421875px;
  -webkit-transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715)
    0s;
  transition: stroke-dashoffset 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

.main_string.active .svg-elem-1 {
  stroke-dashoffset: 4058.072021484375px;
}

/* //////////////////////////////// 
タブレット
//////////////////////////////////*/
@media screen and (width>=550px) {
  /* -------------------------------- 
挨拶
-----------------------------------*/
  .greeting {
    background-position: 10% 0, 105% 105%;
  }
  /* -------------------------------- 
会社概要
-----------------------------------*/
  table {
    width: 100%;
  }
  th {
    width: fit-content;
    padding: 1.5em 0 1.5em 1.5em;
  }
  td {
    padding: 1.5em 1.5em 1.5em 3rem;
  }
  /* -------------------------------- 
オフィス画像
-----------------------------------*/
  .office {
    margin: 0;
    gap: 0;
  }
  .office1 {
    width: 45%;
    margin-left: 7%;
  }
  .office2 {
    width: 35%;
    margin-right: 7%;
    position: relative;
    bottom: 10vh;
    z-index: -1;
  }
  .office__line {
    top: 25%;
  }
}

/* //////////////////////////////// 
PC
//////////////////////////////////*/
@media screen and (width>=870px) {
  /* -------------------------------- 
  挨拶
  -----------------------------------*/
  .greeting {
    background-position: 15% 100%, 95% 0%;
    background-size: 20%, 30%;
  }
  /* -------------------------------- 
  会社概要
  -----------------------------------*/
  table {
    max-width: 850px;
    margin: 0 auto;
  }
  th {
    width: fit-content;
    padding: 1.5em 0 1.5em 2em;
  }
  td {
    padding: 2em 1.5em 2em 3rem;
  }
  /* -------------------------------- 
  オフィス画像
  -----------------------------------*/
  .office1 {
    width: 40%;
    margin-left: 10%;
  }
  .office2 {
    width: 30%;
    margin-right: 10%;
    bottom: 15vh;
  }
  .office__line {
    top: 30%;
  }
  .office__line img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }
}