/*==============================================================
for-family
==============================================================*/
.for-family {
  position: relative;
  z-index: 1;

  .message {
    .cont {
      .box {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 32px;

        @media screen and (max-width: 991px) {
          max-width: 80%;
        }

        @media screen and (max-width: 560px) {
          max-width: 100%;
        }

        .item {
          display: flex;
          gap: 80px;

          @media screen and (max-width: 991px) {
            gap: 28px;
            flex-direction: column-reverse;
          }

          @media screen and (max-width: 560px) {
            gap: 8px;
          }

          .left {
            display: flex;
            flex-direction: column;
            gap: 24px;
            flex: 1.2;

            .ttl {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .jp {
                font-size: clamp(1.5rem, 1.1912rem + 0.8824vw, 2.25rem);
                font-weight: 600;
                line-height: 1;
              }

              .en {
                font-size: clamp(1rem, 0.7941rem + 0.5882vw, 1.5rem);
                font-weight: 600;
                line-height: 1;
              }
            }

            .name-cont {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: flex-end;
              gap: 8px;

              .role {
                font-family: "ab-ootori", sans-serif;
                font-weight: 400;
                font-style: normal;
                line-height: 1;
                font-size: clamp(0.875rem, 0.7917rem + 0.1736vw, 1rem);
              }

              .name {
                font-family: "ab-ootori", sans-serif;
                font-weight: 400;
                font-style: normal;
                line-height: 1;
                font-size: clamp(1.5rem, 1.1667rem + 0.6944vw, 2rem);
              }
            }
          }

          .right {
            flex: 1;
          }
        }
      }
    }
  }

  .benefit {
    background-image: url("../assets/img/recruit/for-family/benefit-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    .cont {
      .box {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 32px;

        @media screen and (max-width: 991px) {
          max-width: 80%;
        }

        @media screen and (max-width: 560px) {
          max-width: 100%;
        }

        .item {
          display: flex;
          flex-direction: column;
          gap: 24px;

          .ttl {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            overflow: hidden;

            .left {
              display: flex;
              align-items: center;
              gap: 16px;
              background-color: #ff9900;
              flex: 1;
              min-width: 0;
              align-self: stretch;
              padding: 24px 16px 0;

              .img {
                flex: 0 0 auto;
                width: 100%;
                max-width: 220px;
              }

              .ttl {
                flex: 1;
                min-width: 0;
                display: flex;
                flex-direction: column;
                align-items: center;

                .en {
                  font-size: clamp(2rem, 1.1765rem + 2.3529vw, 4rem);
                  font-weight: 900;
                  line-height: 1;
                  font-family: Arial, Helvetica, sans-serif;
                }

                .jp {
                  font-size: clamp(1rem, 0.7941rem + 0.5882vw, 1.5rem);
                  font-weight: 600;
                  line-height: 1;
                }
              }
            }

            .right {
              flex: 1;
              align-self: stretch;

              .img {
                height: 100%;
              }
            }
          }

          .item-list {
            display: grid;
            grid-template-columns: repeat(2, 2fr);
            gap: 24px;

            @media screen and (max-width: 560px) {
              grid-template-columns: repeat(1, 2fr);
            }

            .list {
              background: #ff9900;
              padding: 0 8px 16px;
              border-radius: 10px;

              .right {
                display: flex;
                flex-direction: column;
                gap: 4px;
                align-items: flex-start;
                padding: 16px;

                .ttl {
                  color: #fff;
                  font-weight: 600;
                  font-size: 18px;
                }

                .des {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }

  .work {
    background-image: url("../assets/img/recruit/for-family/work-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    .cont {
      .box {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 64px;

        @media screen and (max-width: 991px) {
          max-width: 80%;
        }

        @media screen and (max-width: 560px) {
          max-width: 100%;
        }

        .item {
          display: flex;
          gap: 60px;
          align-items: flex-end;

          @media screen and (max-width: 991px) {
            gap: 28px;
            flex-direction: column-reverse;
          }

          @media screen and (max-width: 560px) {
            flex-direction: column;
            gap: 24px;
          }

          &.reverse {
            align-items: flex-start;

            @media screen and (max-width: 560px) {
              flex-direction: column;
            }

            .right {
              flex: 1;
              padding-left: 2rem;
              padding-right: 0;
              align-items: flex-end;

              @media screen and (max-width: 560px) {
                padding-left: 0rem;
              }
            }
          }

          .left {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            gap: 16px;

            .ttl {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .jp {
                color: #0479ff;
                font-weight: 600;
                font-size: clamp(1.5rem, 1.1912rem + 0.8824vw, 2.25rem);
                line-height: 1;
              }

              .en {
                font-size: clamp(1rem, 0.8971rem + 0.2941vw, 1.25rem);
                font-weight: 900;
                font-family: Arial, Helvetica, sans-serif;
              }
            }

            .des {
              padding-left: 2rem;

              @media screen and (max-width: 560px) {
                padding-left: 0rem;
              }
            }
          }

          .right {
            flex: 1;
            padding-right: 2rem;

            @media screen and (max-width: 560px) {
              padding-left: 0rem;
            }
          }
        }
      }
    }
  }

  .faq {
    .cont {
      .box {
        max-width: 70%;
        display: flex;
        flex-direction: column;
        gap: 64px;

        @media screen and (max-width: 991px) {
          max-width: 80%;
        }

        @media screen and (max-width: 560px) {
          max-width: 100%;
        }

        .ttl {
          display: flex;
          flex-direction: column;
          background-image: url("../assets/img/recruit/for-family/faq-bg.png");
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          padding: 40px 0;
          gap: 4px;

          .jp {
            font-weight: 600;
            font-size: clamp(1.5rem, 1.1912rem + 0.8824vw, 2.25rem);
            line-height: 1;
          }

          .en {
            font-size: clamp(1rem, 0.8971rem + 0.2941vw, 1.25rem);
            font-weight: 900;
            font-family: Arial, Helvetica, sans-serif;
          }
        }

        .item {
          margin-top: 24px;
        }
      }
    }

    .faq-item {
      border-bottom: 1px solid #ddd;
    }

    .faq-item:first-child {
      border-top: 1px solid #ddd;
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 8px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font: inherit;
      color: inherit;

      .icon {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #1a73e8;
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .txt {
        flex: 1;
        font-weight: 700;
        font-size: 18px;
      }

      .plus {
        flex: 0 0 auto;
        position: relative;
        width: 18px;
        height: 18px;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background-color: #333;
          transition: transform 0.3s ease;
        }

        &::before {
          top: 50%;
          left: 0;
          width: 100%;
          height: 2px;
          transform: translateY(-50%);
        }

        &::after {
          left: 50%;
          top: 0;
          width: 2px;
          height: 100%;
          transform: translateX(-50%);
        }
      }
    }

    .faq-item.active .faq-q .plus::after {
      transform: translateX(-50%) rotate(90deg);
      opacity: 0;
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-a-inner {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 0 40px 20px;

      .icon {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #f5a623;
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .txt {
        flex: 1;
        line-height: 1.7;
      }
    }
  }
}