@import "./variables.css";

/* ==============================================================
   about us Page
   ============================================================== */

/*　-------------FVセクション-------------　*/

.about-us__fv {
   background: linear-gradient(to bottom,
         var(--background-color) calc(100% - 280px),
         #ffffff calc(100% - 280px));
   margin-bottom: 120px;
}

.about-us__fv>div {
   padding-top: 40px;
   padding-bottom: 48px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 40px;
}

.about-us__fv-img {
   width: 100%;
}

.about-us__fv-img img {
   width: 100%;
}

@media (max-width: 767px) {
   .about-us__fv {
      margin-bottom: 40px;
   }

   .c-page-title-simple__text {
      font-size: var(--font-size-h2);
   }
}

/*　-------------元気キッズの想い-------------　*/

.about-us__our-thoughts {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 120px;
   gap: 40px;
}

.about-us__our-thoughts .p-visual-card_3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: transparent;
   padding: 0;
}

.about-us__our-thoughts .p-visual-card_3__image {
   aspect-ratio: 1/1;
   max-width: 473px;
   width: auto;
   height: auto;
}

.about-us__our-thoughts .p-visual-card_3__image img {
   width: 100%;
   object-fit: cover;
}

@media (max-width: 767px) {
   .about-us__our-thoughts {
      flex-direction: column;
      margin-bottom: 80px;
   }

   .c-section-heading {
      gap: 24px;
   }

   .c-section-heading__text {
      font-size: var(--font-size-md);
   }

   .about-us__our-thoughts .p-visual-card_3__image {
      aspect-ratio: 1.618/1;
      max-width: none;
      width: 100%;
   }

   .about-us__our-thoughts .p-visual-card_3__image img {
      object-position: top center;
   }
}

/*　-------------元気キッズの保育・サービス紹介-------------　*/

.about-us__service-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 120px;
   gap: 64px;
}

.about-us__service-section .c-nav-buttons {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 32px;
   flex-wrap: wrap;
}

@media (max-width: 767px) {
   .about-us__service-section {
      margin-bottom: 80px;
      gap: 32px;
   }

   .c-section-heading__text {
      font-size: var(--font-size-sm);
   }

   .about-us__service-section .c-nav-buttons {
      gap: 24px;
   }
}

@media (max-width: 374px) {
   .c-nav-button {
      width: 100%;
      min-width: 0;
   }
}

/*　-------------私たちの考えるGENKI-------------　*/

.about-us__our-idea-of-GENKI {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 120px;
   gap: 64px;
}

.about-us__our-idea-of-GENKI>div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.p-feature-cards {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 40px;
}

.p-feature-card {
   width: calc((100% - 80px) / 3);
}

.p-feature-card__image {
   aspect-ratio: 1.414/1;
}

.p-feature-card__image img {
   object-fit: cover;
   width: 100%;
}

.about-us__our-idea-of-GENKI .p-visual-card_3 {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: transparent;
   padding: 0;
}

.c-section-heading {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
}

.p-visual-card_3__image {
   aspect-ratio: 673/150;
   width: auto;
   height: auto;
   max-width: 673px;
}

.p-visual-card_3__image img {
   width: 100%;
   object-fit: cover;
}

.p-visual-card_3 .c-buttons {
   background-color: #fff;
}

@media (max-width: 767px) {
   .about-us__our-idea-of-GENKI {
      margin-bottom: 80px;
      gap: 32px;
   }

   .p-feature-cards {
      flex-direction: column;
      align-items: center;
   }

   .p-feature-card {
      width: 100%;
   }

   .p-feature-card__heading {
      font-size: var(--font-size-h3);
   }

   .c-section-heading {
      font-size: var(--font-size-sm);
   }

   .p-visual-card_3 {
      gap: 32px;
   }
}

/*　-------------代表メッセージ、以下、類似テキストセクション-------------　*/

.p-visual-card_5-group {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 40px;
   margin-bottom: 120px;
}

.p-visual-card_5 {
   align-items: center;
}

.p-visual-card_5__image {
   width: 50%;
   min-height: 420px;
}

.p-visual-card_5__image img {
   object-fit: cover;
}

.p-visual-card_5__content {
   width: 50%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.p-visual-card_5__content-inner {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: fit-content;
   gap: 40px;
}

.p-visual-card_5__text {
   font-weight: var(--font-weight-normal);
}

@media (max-width: 767px) {
   .p-visual-card_5-group {
      margin-bottom: 80px;
   }

   .p-visual-card_5 {
      flex-direction: column;
   }

   .p-visual-card_5__image {
      width: 100%;
      min-height: 0;
   }

   .p-visual-card_5__content {
      width: 100%;
      padding: 24px;
   }

   .p-visual-card_5__content-inner {
      align-items: center;
      gap: 24px;
   }

   .p-visual-card_5__heading {
      font-size: var(--font-size-sm);
   }
}