@charset "UTF-8";

/* =====================================================
   REASON SECTION – full consolidated CSS
   ===================================================== */

/* theme rule kept as-is */
#reason_section + section .contents_box01 .inner_item_txt:nth-of-type(1):nth-last-of-type(1){
  text-align: center;
}


/* =====================================================
   1. CARDS → tall portrait cards with vertical text
   ===================================================== */

/* container: centered, small gaps, always one row */
#reason_section + div .wrapper_item {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 12px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

/* card: portrait ratio, no rounded corners */
#reason_section + div .inner_item,
#reason_section + div .inner_item:nth-of-type(1),
#reason_section + div .inner_item:nth-of-type(2),
#reason_section + div .inner_item:nth-of-type(3) {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* link + image fill the card */
#reason_section + div .inner_item > a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#reason_section + div .inner_item_img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#reason_section + div .inner_item_img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* dark overlay on the photo */
#reason_section + div .inner_item_img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* vertical text, centered on the card */
#reason_section + div .inner_item_txt {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
  pointer-events: none;
}
#reason_section + div .inner_item_txt .heading {
  margin: 0 !important;
  padding: 0 !important;
}
#reason_section + div .inner_item_txt .h {
  writing-mode: vertical-rl !important;
  text-orientation: upright;
  font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  line-height: 1.4 !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

/* subtle hover zoom */
#reason_section + div .inner_item_img img {
  transition: transform 0.6s ease !important;
}
#reason_section + div .inner_item:hover .inner_item_img img {
  transform: scale(1.06);
}

/* remove the dark box behind the text (normal + hover) */
#reason_section + div .inner_item_txt,
#reason_section + div .inner_item_txt .heading,
#reason_section + div .inner_item_txt .h,
#reason_section + div .inner_item:hover .inner_item_txt,
#reason_section + div .inner_item:hover .inner_item_txt .heading,
#reason_section + div .inner_item:hover .inner_item_txt .h,
#reason_section + div .inner_item > a:hover ~ .inner_item_txt,
#reason_section + div .inner_item_txt:hover {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
#reason_section + div .inner_item_txt::before,
#reason_section + div .inner_item_txt::after,
#reason_section + div .inner_item_txt .h::before,
#reason_section + div .inner_item_txt .h::after {
  background: none !important;
  display: none !important;
}

/* SP (≤900px): keep 3 in a row, smaller text and gaps */
@media (max-width: 900px) {
  #reason_section + div .wrapper_item {
    gap: 6px !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  #reason_section + div .inner_item,
  #reason_section + div .inner_item:nth-of-type(1),
  #reason_section + div .inner_item:nth-of-type(2),
  #reason_section + div .inner_item:nth-of-type(3) {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
  }

  #reason_section + div .inner_item_txt .h {
    font-size: 14px !important;
    letter-spacing: 0.15em !important;
  }
}


/* =====================================================
   2. PARAGRAPH SECTION (below the cards)
      same width as the card row, text centered
   ===================================================== */

/* keep the theme's grid out of the way: single full-width column */
#reason_section + div + section .content_wrapper {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  align-items: stretch !important;
  position: relative !important;
  overflow: visible !important;
  padding-left: var(--i_padding, 20px) !important;
  padding-right: var(--i_padding, 20px) !important;
  box-sizing: border-box !important;
}

/* text block = same width as the card row (640px, centered) */
#reason_section + div + section .wrapper_item {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 640px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  order: 1;
}

#reason_section + div + section .inner_item_txt,
#reason_section + div + section .inner_item_txt p {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}


/* =====================================================
   3. SIDE IMAGE (worker with chainsaw)
   ===================================================== */

/* desktop: floats at the right, scales with the screen */
#reason_section + div + section .content_wrapper::before {
  --sz: clamp(110px, 24vw, 300px);
  width: var(--sz) !important;
  height: var(--sz) !important;
  background-size: contain !important;
  background-position: right bottom !important;
  top: calc(var(--sz) * -0.55) !important;
  right: clamp(-120px, -6vw, 0px) !important;
}

/* SP (≤900px): small image placed BELOW the paragraph, never covers text */
@media (max-width: 900px) {
  #reason_section + div + section .wrapper_item {
    padding: 0 12px !important;   /* same side padding as the card row */
  }

  #reason_section + div + section .content_wrapper::before {
    --sz: clamp(80px, 40vw, 150px);
    position: relative !important;
    order: 2;
    top: auto !important;
    right: auto !important;
    align-self: flex-end !important;
    width: var(--sz) !important;
    height: var(--sz) !important;
    margin: 8px 12px 0 0 !important;
    background-size: contain !important;
    background-position: right bottom !important;
  }
}


/* =====================================================
   0. HEADING (title area above the cards)
   ===================================================== */

/* remove the underline (all possible sources) */
#reason_section + div .heading p::before,
#reason_section + div .heading p::after,
#reason_section + div .heading .h::before,
#reason_section + div .heading .h::after {
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
}
#reason_section + div .heading p {
  background: none !important;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* heading = positioning base */
#reason_section + div .content_wrapper > .heading.block_header_1 {
  position: relative;
  padding: 40px 0;
}

/* English title (REASON) → smaller green background watermark */
#reason_section + div .content_wrapper > .heading.block_header_1 .h {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 !important;
  font-size: 80px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--i_main_color) !important;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Japanese title → black, in front */
#reason_section + div .content_wrapper > .heading.block_header_1 p {
  position: relative;
  z-index: 1;
  color: #000 !important;
  font-weight: 700;
}

/* SP */
@media (max-width: 900px) {
  #reason_section + div .content_wrapper > .heading.block_header_1 {
    padding: 28px 0;
  }
  #reason_section + div .content_wrapper > .heading.block_header_1 .h {
    font-size: 48px !important;
  }
}


/* heading = positioning base (same as STEP) */
#reason_section + div .content_wrapper > .heading.block_header_1 {
  position: relative;
  margin-bottom: 60px;
  padding: 40px 0 0;
}

/* English title (REASON) → same position / size / color as the STEP watermark */
#reason_section + div .content_wrapper > .heading.block_header_1 .h {
  position: absolute !important;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 0 !important;
  font-size: 110px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #8db184 !important;   /* same as --step-cyan in the STEP section */
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* SP (same values as STEP) */
@media (max-width: 900px) {
  #reason_section + div .content_wrapper > .heading.block_header_1 {
    margin-bottom: 36px;
    padding: 28px 0 0;
  }
  #reason_section + div .content_wrapper > .heading.block_header_1 .h {
    font-size: 64px !important;
    top: -4px;
  }
}