@import "./variables.css";

/* ==============================================================
   concept Page
   ============================================================== */

.concept-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 80px;
   width: 100%;
   padding-bottom: 120px;
}
.concept__fv {
   padding-top: 40px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.concept__fv-img {
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
}

.concept__fv-img img {
   width: 100%;
   object-fit: cover;
}

@media (max-width: 480px) {
   .concept__fv-img {
      width: 100%;
      aspect-ratio: 1.618/1;
   }

   .concept__fv-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
}

.concept__first-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.p-visual-card_2-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
}

.concept__first-section .p-visual-card_2__content {
   max-width: 50%;
}


@media (max-width: 767px) {
   .concept__first-section .p-visual-card_2 {
      flex-direction: column;
      width: 100%;
      gap: 24px;
   }

   .p-visual-card_2-group {
      gap: 64px;
   }

   .concept__first-section .p-visual-card_2__image {
      width: 100%;
   }

   .concept__first-section .p-visual-card_2__content {
      width: 100%;
      max-width: none;
   }
}

.concept__second-section {
   width: 100%;
}

.concept__second-section .p-visual-card_2-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 32px;
   background-color: #fff;
   border-radius: 10px;
   width: 100%;
   padding: 56px 64px;
}

.concept__second-section .p-visual-card_2 {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
}

.concept__second-section .p-visual-card_2__image {
   max-width: 378px;
   aspect-ratio: 1.414/1;
   width: auto;
   height: auto;
}

.concept__second-section .p-visual-card_2__image img {
   width: 100%;
   object-fit: cover;
   aspect-ratio: 1.414/1;
   height: auto;
}

.concept__second-section .p-visual-card_2__content {
   max-width: 50%;
}

.concept__second-section .p-visual-card_2__heading {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.concept__second-section .p-visual-card_2__heading h3 {
   line-height: 1.8;
   color: var(--genki-brown);
}

.concept__second-section .p-visual-card_2__heading h2 {
   line-height: 1.8;
   font-size: 25.6px;
   color: var(--genki-brown);
}

.p-books-card-group,
.p-seminar-Introduction {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   border: 1px solid var(--genki-brown);
   border-radius: 10px;
   overflow: hidden;
}

.p-books-card-group__heading,
.p-seminar-Introduction__heading {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px 0;
   background-color: var(--genki-brown);
}

.p-books-card-group h2,
.p-seminar-Introduction h2 {
   color: #fff;
}

.p-books-cards {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 80px;
   padding: 16px;
}

.p-books-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.p-books-card img {
   max-height: 167px;
}

.p-books-card p {
   font-size: var(--font-size-small);
   text-align: center;
}

.p-seminar-Introduction__contents {
   display: flex;
   flex-direction: column;
   padding: 32px 40px;
   gap: 16px;
   align-items: center;
}

.p-seminar-Introduction__contents p {
   color: var(--genki-brown);
}

.p-seminar-Introduction__contents .c-button {
   font-size: 12.8px;
   font-weight: var(--font-weight-medium);
   padding: 8px 16px;
   min-height: 0;
}

@media (max-width: 767px) {
   .concept-wrapper {
      padding-bottom: 40px;

   }

   .concept__second-section .p-visual-card_2__heading {
      gap: 0;
   }

   .concept__second-section .p-visual-card_2 {
      flex-direction: column;
      gap: 16px;
   }

   .concept__second-section .p-visual-card_2__image {
      width: 100%;
      max-width: none;
   }

   .concept__second-section .p-visual-card_2__image img {
      width: 100%;
   }

   .concept__second-section .p-visual-card_2-group {
      padding: 24px;
   }

   .concept__second-section .p-visual-card_2__content {
      max-width: none;
   }

   .p-books-cards {
      flex-direction: column;
      gap: 24px;
      padding-bottom: 24px;
   }

   .p-books-card {
      gap: 0;
   }
   .p-books-card p {
      font-size: var(--font-size-xs);
   }
   .p-books-card img {
      max-height: none;
   }
}