/* CSS Document */
/**********************************/
body:before {
  content: "";
  position: absolute;
  inset: -40px;
  background: url("../images/workplace/bg.png") center top no-repeat;
  background-size: 100% auto;
  transform: translate3d(var(--bg-x), var(--bg-y), 0);
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1715/790;
  width: 100%;
  max-width: 1715px;
  left: 10%;
  top: 0;
  height: auto;
  z-index: -1; }

@media (min-width: 1980px) {
  body:before {
    width: 100%;
    max-width: 100%;
    left: 0;
    background: url("../images/workplace/bg.svg") center top no-repeat;
    background-size: 1715px; } }
@media (max-width: 1280px) {
  body:before {
    left: 0; } }
@media (max-width: 768px) {
  body:before {
    left: 0;
    background: url("../images/workplace/bg_tb.svg") center top no-repeat;
    background-size: 100% auto;
    aspect-ratio: 768/527;
    width: 100%; } }
/*max-width:768px*/
@media (max-width: 480px) {
  body:before {
    transform: translateX(0);
    background-size: 390px;
    aspect-ratio: 390/268;
    max-width: 480px; } }
/*max-width:480px*/
/**********************************/
.content_top h1 {
  margin-bottom: 40px; }

@media (max-width: 768px) {
  section {
    padding: 0 0 120px; } }
/**********************************/
.office {
  padding: 100px 0 200px;
  max-width: 1620px;
  width: calc(100% - 100px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  position: relative; }
  .office .left {
    width: 340px; }
    .office .left h2 {
      font: 7rem/1em "Inter Tight", sans-serif;
      font-weight: 500;
      position: sticky;
      top: 100px;
      letter-spacing: 0.04em; }
      .office .left h2 span {
        margin: 10px 0 0 0;
        position: relative;
        font: 2.2rem/1em "Noto Sans JP", sans-serif;
        font-weight: 700;
        display: block;
        padding: 0 0 0 30px; }
        .office .left h2 span:before {
          position: absolute;
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          background-color: #5A4398;
          border-radius: 50%;
          left: 8px;
          top: 8px; }
  .office .right {
    max-width: 1280px;
    width: calc(100% - 340px); }
    .office .right ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 2.5vw, 55px); }
    .office .right li {
      border-radius: 15px;
      overflow: hidden;
      aspect-ratio: 390/260;
      width: 100%;
      max-width: 100%;
      height: auto;
      position: relative; }
      .office .right li img {
        object-fit: cover;
        width: 100%;
        transition: .3s;
        height: 100%; }

#lightbox {
  position: fixed !important;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0 !important;
  left: 0 !important;
  transform: none !important; }

#lightbox .lb-close {
  position: fixed !important;
  top: 20px;
  right: 20px;
  z-index: 999999; }

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 40px 20px; }

.modal.active {
  display: flex; }

.modal-content {
  position: relative;
  max-width: 1280px;
  width: fit-content;
  max-width: min(1280px, 100%);
  text-align: center;
  color: #fff;
  padding: 35px 40px;
  margin: 0 auto;
  transition: width 0.3s ease, height 0.3s ease; }

.modal-inner {
  margin: 0 auto;
  text-align: left; }

.modal-img-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto 20px; }

.modal-inner img {
  max-width: min(1280px, 100%);
  max-height: 75vh;
  width: auto;
  height: auto;
  display: block; }

.modal-inner .title,
.modal-inner .sub {
  width: 100%;
  text-align: left; }

.modal .title {
  font: 1.8em/1.5em "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-weight: bold;
  margin: 0 0 8px; }

.modal .sub {
  font: 1.5rem/1.5em "Noto Sans JP", sans-serif;
  font-weight: 400;
  margin: 0; }

.modal .close,
.modal .prev,
.modal .next {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 25px; }

.modal .close {
  top: 20px;
  right: 25px;
  position: absolute;
  top: 0;
  right: 40px; }

.modal .prev,
.modal .next {
  top: 50%;
  transform: translateY(-50%); }

.modal .prev {
  left: -40px; }

.modal .next {
  right: -40px; }

@media (hover: hover) {
  .office .right li:hover img {
    transform: scale(1.1); } }
/*min-width:1980px*/
@media (max-width: 1280px) {
  .office {
    padding: 0 0 100px;
    display: block; }
    .office .left {
      width: 100%; }
      .office .left h2 {
        font: 6rem/1em "Inter Tight", sans-serif;
        font-weight: 500;
        position: relative;
        top: auto;
        margin: 0 0 40px; }
        .office .left h2 span {
          font: 1.9rem/1em "Noto Sans JP", sans-serif;
          font-weight: 700; }
          .office .left h2 span:before {
            left: 8px;
            top: 7px; }
    .office .right {
      max-width: 1280px;
      width: 100%; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .office {
    padding: 30px 0 100px;
    display: block;
    width: calc(100% - 80px); }
    .office .left {
      width: 100%; }
      .office .left h2 {
        font: 6rem/1em "Inter Tight", sans-serif;
        font-weight: 500;
        position: relative;
        top: auto;
        margin: 0 0 40px; }
        .office .left h2 span {
          font: 1.9rem/1em "Noto Sans JP", sans-serif;
          font-weight: 700; }
          .office .left h2 span:before {
            left: 8px;
            top: 7px; }

  .modal {
    padding: 0 10px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .office {
    padding: 30px 0 70px;
    width: calc(100% - 60px); }
    .office .left {
      width: 100%; }
      .office .left h2 {
        font: 4.5rem/1em "Inter Tight", sans-serif;
        font-weight: 500;
        position: relative;
        top: auto;
        margin: 0 0 40px; }
        .office .left h2 span {
          font: 1.8rem/1em "Noto Sans JP", sans-serif;
          font-weight: 700; }
          .office .left h2 span:before {
            left: 8px;
            top: 6px; }
    .office .right ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: unset; }
    .office .right li {
      width: calc((100% - 15px)/2);
      max-width: 332px;
      margin: 0 0 15px; }

  .modal-img-wrap {
    margin-bottom: 10px; }

  .modal-inner .title,
  .modal-inner .sub {
    width: 100%;
    text-align: left; }

  .modal .title {
    font: 1.6em/1.5em "Noto Sans JP", sans-serif;
    font-weight: 600;
    font-weight: bold;
    margin: 0 0 8px; }

  .modal .sub {
    font: 1.4rem/1.5em "Noto Sans JP", sans-serif;
    font-weight: 400;
    margin: 0; }

  .modal .close {
    right: 30px; }

  .modal .prev,
  .modal .next {
    font-size: 20px; }

  .modal .prev {
    left: -30px; }

  .modal .next {
    right: -30px; }

  .modal-content {
    padding: 30px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .office {
    padding: 20px 0 70px;
    width: calc(100% - 40px);
    max-width: 330px; }
    .office .left h2 {
      font: 3.2rem/1em "Inter Tight", sans-serif;
      font-weight: 500;
      margin: 0 0 30px; }
      .office .left h2 span {
        font: 1.6rem/1em "Noto Sans JP", sans-serif;
        font-weight: 700;
        padding: 0 0 0 25px; }
        .office .left h2 span:before {
          width: 8px;
          height: 8px;
          left: 8px;
          top: 5px; }
    .office .right ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: unset; }
    .office .right li {
      width: calc((100% - 10px)/2);
      max-width: 332px;
      margin: 0 0 10px; } }
/*max-width:480px*/
/**********************************/
.welfare {
  padding: 160px 0;
  background-color: #F9F9F9;
  border-radius: 80px; }
  .welfare .flex {
    max-width: 1620px;
    width: calc(100% - 100px);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    position: relative; }
  .welfare .left {
    width: 340px; }
    .welfare .left h2 {
      font: 7rem/1em "Inter Tight", sans-serif;
      font-weight: 500;
      position: sticky;
      top: 100px;
      letter-spacing: 0.04em; }
      .welfare .left h2 span {
        margin: 10px 0 0 0;
        position: relative;
        font: 2.2rem/1em "Noto Sans JP", sans-serif;
        font-weight: 700;
        display: block;
        padding: 0 0 0 30px; }
        .welfare .left h2 span:before {
          position: absolute;
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          background-color: #5A4398;
          border-radius: 50%;
          left: 8px;
          top: 8px; }
  .welfare .right {
    max-width: 1280px;
    width: calc(100% - 340px); }
    .welfare .right ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(30px, 2.5vw, 70px); }
    .welfare .right li {
      width: auto;
      margin: 0;
      max-width: 380px; }
    .welfare .right .pic {
      aspect-ratio: 3/2;
      width: 100%;
      max-width: 300px;
      margin: 0 auto 15px;
      height: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; }
      .welfare .right .pic img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; }
    .welfare .right h3 {
      font: 2.2rem/1.5em "Noto Sans JP", sans-serif;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-align: center;
      margin-bottom: 13px; }
    .welfare .right p {
      text-align: justify;
      text-justify: inter-ideograph;
      overflow-wrap: anywhere;
      word-break: break-all;
      font: 1.5rem/2em "Noto Sans JP", sans-serif;
      font-weight: 400;
      letter-spacing: 0.06em;
      margin: 0 0 20px; }
      .welfare .right p:last-of-type {
        margin: 0; }

@media (hover: hover) {
  .welfare .right a:hover {
    color: #5A4398;
    text-decoration: underline; } }
/*min-width:1980px*/
@media (max-width: 1280px) {
  .welfare .flex {
    display: block; }
  .welfare .left {
    width: 100%; }
    .welfare .left h2 {
      font: 6rem/1em "Inter Tight", sans-serif;
      font-weight: 500;
      position: relative;
      top: auto;
      margin: 0 0 40px; }
      .welfare .left h2 span {
        font: 1.9rem/1em "Noto Sans JP", sans-serif;
        font-weight: 700; }
        .welfare .left h2 span:before {
          left: 8px;
          top: 7px; }
  .welfare .right {
    max-width: 1280px;
    width: 100%; }
    .welfare .right ul {
      max-width: 895px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch; }
    .welfare .right li {
      width: calc((100% - 60px)/2);
      max-width: 380px;
      margin: 0 0 60px; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .welfare {
    padding: 100px 0; }
    .welfare .flex {
      width: calc(100% - 80px); }
    .welfare .right ul {
      max-width: 768px; }
    .welfare .right li {
      margin: 0 0 40px; }
    .welfare .right h3 {
      font: 2rem/1.5em "Noto Sans JP", sans-serif;
      font-weight: 700; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .welfare {
    border-radius: 30px;
    padding: 70px 0; }
    .welfare .flex {
      display: block;
      width: calc(100% - 60px); }
    .welfare .left {
      width: 100%; }
      .welfare .left h2 {
        font: 4.5rem/1em "Inter Tight", sans-serif;
        font-weight: 500;
        position: relative;
        top: auto;
        margin: 0 0 40px; }
        .welfare .left h2 span {
          font: 1.8rem/1em "Noto Sans JP", sans-serif;
          font-weight: 700; }
          .welfare .left h2 span:before {
            left: 8px;
            top: 6px; }
    .welfare .right li {
      width: calc((100% - 30px)/2); }
    .welfare .right h3 {
      font: 1.8rem/1.5em "Noto Sans JP", sans-serif;
      font-weight: 700; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .welfare .flex {
    max-width: 330px;
    width: calc(100% - 40px); }
  .welfare .left h2 {
    font: 3.2rem/1em "Inter Tight", sans-serif;
    font-weight: 500;
    margin: 0 0 20px; }
    .welfare .left h2 span {
      font: 1.6rem/1em "Noto Sans JP", sans-serif;
      font-weight: 700;
      padding: 0 0 0 25px; }
      .welfare .left h2 span:before {
        width: 8px;
        height: 8px;
        left: 8px;
        top: 5px; }
  .welfare .right ul {
    display: block; }
  .welfare .right li {
    width: 100%;
    max-width: 290px;
    margin: 0 auto 40px; } }
/*max-width:480px*/