@charset "UTF-8";

/* ==========================================
   DESKTOP STYLES (Base)
   ========================================== */

/* Make 3 items equal width */
#new_part + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(3),
#new_part + .composite_box01 .inner_item:nth-of-type(2):nth-last-of-type(2),
#new_part + .composite_box01 .inner_item:nth-of-type(3):nth-last-of-type(1) {
  width: 100%;
  margin-left: 0 !important;
}

/* Main content wrapper */
#new_part + .composite_box01 .content_wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 1300px !important;
}

/* ==========================================
   MAIN 3-STEP WRAPPER
   ========================================== */

#new_part + .composite_box01 .wrapper_item {
  display: flex;
  justify-content: space-between;

  /* IMPORTANT:
     Keep all circles aligned to the same top position */
  align-items: flex-start;

  gap: 24px;
  counter-reset: step-counter;
  box-sizing: border-box;
  width: 100%;
}

/* ==========================================
   EACH STEP
   ========================================== */

#new_part + .composite_box01 .inner_item {
  flex: 1;

  display: flex;
  flex-direction: row;

  /* IMPORTANT:
     Do NOT use center here.
     This keeps all circles aligned horizontally. */
  align-items: flex-start;

  gap: 16px;
  position: relative;
  box-sizing: border-box;
}

/* ==========================================
   CIRCLE / IMAGE CONTAINER
   ========================================== */

#new_part + .composite_box01 .inner_item > a {
  position: relative;
  flex-shrink: 0;

  width: 130px;
  height: 130px;

  border-radius: 50%;
  border: 1.5px solid #E2E8F0;
  background-color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  box-sizing: border-box;
  overflow: visible;
}

/* ==========================================
   STEP NUMBER BADGE
   ========================================== */

#new_part + .composite_box01 .inner_item > a::before {
  counter-increment: step-counter;
  content: counter(step-counter);

  position: absolute;
  top: 0;
  left: 0;

  width: 28px;
  height: 28px;

  background-color: var(--i_btn_color);
  color: #ffffff;

  border-radius: 50%;

  font-size: 14px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 5;
}

/* ==========================================
   ICON CONTAINER
   ========================================== */

#new_part + .composite_box01 .inner_item_img {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
  box-sizing: border-box;
}

/* Icon image */
#new_part + .composite_box01 .inner_item_img img {
  width: 100% !important;
  height: 100% !important;

  max-height: none !important;

  object-fit: contain;
  display: block;
}

/* ==========================================
   TEXT CONTAINER
   ========================================== */

#new_part + .composite_box01 .inner_item_txt {
  flex: 1;

  /*
   * Give all text areas the same height as the circle.
   * This prevents different text lengths from affecting
   * the vertical positioning.
   */
  min-height: 130px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  position: relative;

  padding: 0 25px 0 0;

  box-sizing: border-box;
}

/* ==========================================
   HEADING
   ========================================== */

#new_part + .composite_box01 .heading {
  padding: 0;

  color: #0B43A4;

  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}

/* ==========================================
   DESCRIPTION
   ========================================== */

#new_part + .composite_box01 .inner_item_txt p {
  margin-top: 0;
}

/* ==========================================
   HORIZONTAL ARROW
   ========================================== */

#new_part + .composite_box01
.inner_item:not(:last-child)
.inner_item_txt::after {
  content: "••••►";

  position: absolute;

  right: -8px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--i_btn_color);

  font-size: 11px;
  letter-spacing: 1px;

  pointer-events: none;
}


/* ==========================================
   LAPTOP / SMALL MONITORS
   ========================================== */

@media (max-width: 1200px) {

  #new_part + .composite_box01 .inner_item > a {
    width: 110px;
    height: 110px;
  }

  #new_part + .composite_box01 .inner_item_txt {
    min-height: 110px;
  }
}


/* ==========================================
   TABLETS
   ========================================== */

@media (max-width: 992px) {

  #new_part + .composite_box01 .inner_item > a {
    width: 95px;
    height: 95px;
  }

  #new_part + .composite_box01 .inner_item_img {
    padding: 12px;
  }

  #new_part + .composite_box01 .inner_item_txt {
    min-height: 95px;
    padding-right: 20px;
  }

  #new_part + .composite_box01
  .inner_item:not(:last-child)
  .inner_item_txt::after {
    right: -12px;
    font-size: 9px;
  }
}


/* ==========================================
   MOBILE / SP
   ========================================== */

@media (max-width: 900px) {

  /* Stack items vertically */
  #new_part + .composite_box01 .wrapper_item {
    flex-direction: column;
    gap: 0;
  }

  /* Each item */
  #new_part + .composite_box01 .inner_item {
    width: 100%;

    padding-bottom: 48px;

    /*
     * On mobile we DO want the image and text
     * to be vertically centered relative to each other.
     */
    align-items: center;
  }

  /* Circle */
  #new_part + .composite_box01 .inner_item > a {
    width: 120px;
    height: 120px;
  }

  /* Icon */
  #new_part + .composite_box01 .inner_item_img {
    padding: 16px;
  }

  /* Text */
  #new_part + .composite_box01 .inner_item_txt {
    min-height: 120px;

    padding-right: 0;

    justify-content: center;
  }

  /* Remove horizontal arrow */
  #new_part + .composite_box01
  .inner_item:not(:last-child)
  .inner_item_txt::after {
    display: none;
  }

  /* ==========================================
     VERTICAL ARROW
     ========================================== */

  #new_part + .composite_box01
  .inner_item:not(:last-child)::after {

    content: "•\A•\A•\A▼";

    white-space: pre;

    position: absolute;

    left: 50%;
    bottom: 8px;

    transform: translateX(-50%);

    color: #0B43A4;

    font-size: 10px;
    line-height: 0.7;

    text-align: center;

    pointer-events: none;
  }
}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 480px) {

  #new_part + .composite_box01 .inner_item > a {
    width: 100px;
    height: 100px;
  }

  #new_part + .composite_box01 .inner_item_img {
    padding: 12px;
  }

  #new_part + .composite_box01 .inner_item_txt {
    min-height: 100px;
  }
}
#new_part + .composite_box01 .inner_item:nth-child(3) .inner_item_txt {
    padding: 0;
}
































/* Container Background & Spacing Overrides */
#without-image + .composite_box01 {
  background-color: #BFCBDF !important;
  padding: 40px 20px;
}

#without-image + .composite_box01 .content_wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

/* Override existing theme positional rules for these specific items */
#without-image + .composite_box01 .inner_item:nth-of-type(1):nth-last-of-type(5), 
#without-image + .composite_box01 .inner_item:nth-of-type(2):nth-last-of-type(4), 
#without-image + .composite_box01 .inner_item:nth-of-type(3):nth-last-of-type(3), 
#without-image + .composite_box01 .inner_item:nth-of-type(4):nth-last-of-type(2), 
#without-image + .composite_box01 .inner_item:nth-of-type(5):nth-last-of-type(1) {
  width: auto !important;
  margin-left: 0 !important;
}

/* Hide empty/unused image links in HTML structure */
#without-image + .composite_box01 .inner_item > a {
  display: none;
}

/* Section Main Heading */
#without-image + .composite_box01 .block_header_1 {
  text-align: left;
  margin-bottom: 30px;
}

#without-image + .composite_box01 .block_header_1 p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

#without-image + .composite_box01 .block_header_1 p::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 28px;
  background-color: #0B43A4;
  border-radius: 2px;
}

/* Cards Wrapper Flex Layout */
#without-image + .composite_box01 .wrapper_item {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center; /* Centers remaining items on partial rows (e.g. tablet bottom row) */
}

/* Base Card Styles (Desktop: 5 items equal size in 1 row) */
#without-image + .composite_box01 .inner_item {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 20px;
  flex: 1 1 calc(20% - 13px); /* 5 columns equal width */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* Card Heading & Check Icon */
#without-image + .composite_box01 .block_header_4 {
  margin-bottom: 16px;
}

#without-image + .composite_box01 .block_header_4 .h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.8rem;
  color: #0B43A4;
}

#without-image + .composite_box01 .block_header_4 .h::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url('/common/upload_data/gotemba-baikyakucom/image/20260828184150.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Card Description Text */
#without-image + .composite_box01 .inner_item_txt p {
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Styles */

/* Tablet View (3 items on top row, 2 centered on bottom row) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  #without-image + .composite_box01 .inner_item {
    flex: 0 0 calc(33.333% - 11px); /* Fixed 3-column width */
  }
}

/* Mobile SP View (1 item per row, 100% width) */
@media screen and (max-width: 768px) {
  #without-image + .composite_box01 .inner_item {
    flex: 1 1 100%;
    margin-bottom: 0px !important;
  }
  
}




@media screen and (max-width: 900px) {
      #without-image +  .composite_box01:not(.block_images_7):not(.block_images_8):not(.block_images_10):not(.block_images_11):not(.block_images_12):not(.block_images_13):not(.block_images_15):not(.block_images_17):not(.block_images_21):not(.block_images_22):not(.block_images_23):not(.block_images_24) .inner_item
 {
        margin-bottom: 0px !important;
    }
}