@charset "UTF-8";

/* ============================================
   FUKUOKA LINK Nextパッケージ - Stylesheet
   流用fukuoka_style.css
   ============================================ */
   :root {
    --color-accent-bg: #f8f9fa;
   }
   .d-ib {
    display: inline-block;
   }

   .outline-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        width: 100%;
        max-width: 840px;
   }

   .outline-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
   }
@media screen and (min-width:500px) {
    /* PCの時の見た目 */
    .outline-card__sm {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .card2 .outline-card__body {
       display: grid;
        grid-template-rows: subgrid;
        grid-row: span 9;
        background: #fff;
    }
    .outline-cards {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "card1 card2"
            "card3 card3"
            "card4 card4";

   }
   .card1 { grid-area: card1; }
   .card2 { grid-area: card2; }
   .card3 { grid-area: card3; }
   .card4 { grid-area: card4; }
}

.outline-card {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100%;

    gap: 10px;
    background: var(--color-card-bg);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 34px;
}
@media screen and (max-width:767px) {
    .outline-card {
        padding: 16px;
    }
}
.outline-card__number-area {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.outline-card__circle {
  width: 80px;
  height: 80px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 5.25px -4px rgba(0, 0, 0, 0.1),
    0 10px 13.125px -3px rgba(0, 0, 0, 0.1);
}

.outline-card__number {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5;
}
.outline-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 2px;
  line-height: 1.83;
}
.outline-card__body {
    width: 100%;
    margin-top: 16px;

    border-radius: 15px;
    background: #fff;
}
   .outline-card__body--inner {
        width: 100%;
        padding: 16px;
        text-align: left;
   }
   .outline-card__desc {
        text-align: left;
        padding-left: 1.25em;
        text-indent: -1em;
   }
@media screen and (min-width:500px) {
   .d-pc-col2 {
        display: flex;
        gap: 24px;
   }
}
/* FUKUOKA LINK  NEXTパッケージ */
/* ---------- nextpackage Section ---------- */
.nextpackage-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 840px;
  }
  
  .nextpackage-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .nextpackage-heading__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.8px;
    text-align: center;
  }
  
  .nextpackage-heading__logo {
    width: 332px;
    height: 59px;
    object-fit: contain;
  }
  @media (max-width: 767px) {
    .nextpackage-heading__title {
        font-size: 22px;
      }
      .nextpackage-description p {
        font-size: 14px;
      }

  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .nextpackage-heading__title {
        font-size: 28px;
      }
  }
  /* ---------- Description ---------- */
  .nextpackage-description {
    width: 100%;
    text-align: center;
  }
  
  .nextpackage-description p {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-secondary);
    letter-spacing: 0.8px;
    line-height: 1.75;
  }
  

/* シームレスな支援体制の整備 */
.outline-card__flow--box {
    padding: 16px  16px 10% 16px;
    min-height: 200px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%, 0% 65%);
}
.--box1 {
    background-color: #f8f9fa;
    z-index: 5;
    
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%, 0% 50%);

}
.--box2 {
    background: #dfe4ed;
    z-index: 4;
    padding-top: calc(15% + 10px);
    margin-top: -15%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%, 0% 50%);
}
.--box3 {
    background: #c6d0e0;
    z-index: 3;

    padding-top: calc(20% + 10px);
    margin-top: -20%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
}
.outline-card__flow--inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media screen and (min-width:768px) {
   .outline-card__flow--inner {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       grid-auto-rows: 1fr; 
       gap: 0px;
       align-items: stretch;
    }
    .outline-card__flow--box {
        padding: 16px 15% 16px 16px;
        min-height: auto;
    }
    .--box1 {
        clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 50%);
    }
    .--box2 {
        width: calc(100% + 11%);
        
        padding-left: 15%;
        margin-left: -10%;
        margin-top: 0;
        clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
    }
    .--box3 {
        width: calc(100% + 10%);
        padding: 16px 16px 16px 15%;

        margin-top: 0;
        margin-left: -10%;
       clip-path:  polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 10% 50%);
    }
}
.outline-card__flow--ttl {
    text-align: center;
    font-size: 16px;
}
.out-line-card__flow-txt {
    width: fit-content;
    margin-inline: auto;
    text-align: left;
}
.card4 .outline-card__body {
    background: transparent;
}
.card4 .outline-card__body--inner {
    background: #fff;
    border-radius: 15px;
}
.d-mt10 {
    margin-top: 10px;
}