@charset "UTF-8";

/* ===== MESSAGE section (targets the section right after #seo_section) ===== */
#seo_section + section {
  --message-bg: none;                            /* client material (transparent PNG/WebP), e.g. url("/images/xxxx.png") */
  --overlap: 40px;                               /* how far the card goes over the photo */
  /* x position where the photo starts */
  --split: calc(50% - var(--overlap) / 2);   /* both boxes are equal, so the photo starts left of the exact center */
  position: relative;
  box-sizing: border-box;
  width: 100% !important;       /* the background is always full width, on every device */
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  background: transparent;      /* client material (::before) shows through the transparent left half of ::after */
}

/* layer 1: blue base + client-provided material on top (full width) */
#seo_section + section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--message-bg) center / cover no-repeat, #3aa5dc;   /* blue base shows until/unless the material covers it */
  pointer-events: none;
  z-index: 0;
}
/* layer 2: left half fully transparent (shows the client material), right side solid bright blue */
#seo_section + section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0, transparent var(--split), #00a7e1 var(--split), #00a7e1 100%);
  pointer-events: none;
  z-index: 0;
}

/* content: keeps the normal width and is always centered */
#seo_section + section > .content_wrapper {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 var(--i_padding, 20px) 45px;   /* same side padding as the rest of the site; bottom space lives here because .wrapper_item has an inline padding-bottom:0 */
}

/* "- MESSAGE" label */
#seo_section + section > .content_wrapper > .heading {
  position: absolute;
  top: 78px;
  left: calc(var(--i_padding, 20px) + 60px);
  z-index: 3;
  margin: 0;
  padding: 0;
  text-align: left;
}
#seo_section + section > .content_wrapper > .heading h2 { display: none; }
#seo_section + section > .content_wrapper > .heading p {
  margin: 0;
  color: #fff;
  font-size: 28px;
  letter-spacing: .05em;
}
#seo_section + section > .content_wrapper > .heading p::before { content: "- "; }

/* content area: only reserves space for the card */
#seo_section + section .wrapper_item {
  position: static;
  display: block;
  width: 100% !important;
  max-width: none !important;
  padding: 145px 0 0;
  margin: 0;
}

/* PHOTO: top-right corner of the centered content */
#seo_section + section .inner_item_img {
  position: absolute;
  top: 0;
  right: var(--i_padding, 20px);
  width: calc((100% - 2 * var(--i_padding, 20px) + var(--overlap)) / 2);   /* same width as the card */
  height: 61%;
  margin: 0;
  padding: 0;
  z-index: 1;
}
#seo_section + section .inner_item_img a,
#seo_section + section .inner_item_img img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
}
#seo_section + section .inner_item_img img {
  object-fit: cover;
 // object-position: center top;
}

/* WHITE CARD: always overlaps the photo's left edge */
#seo_section + section .inner_item_txt {
  position: relative;
  z-index: 2;
  width: calc((100% + var(--overlap)) / 2) !important;   /* same width as the photo -> they overlap by exactly --overlap */
  max-width: none !important;                       /* beats the theme's w50 width */
  margin: 0;
  padding: 50px 60px 60px;
  background: #fff;
  border: 0;
  box-shadow: none;
  color: #444;
  text-align: left;
  box-sizing: border-box;
}
/* card headline = your existing h3 (no generated text) */
#seo_section + section .inner_item_txt .heading {
  position: static;
  margin: 0 0 30px;
  padding: 0;
  text-align: left;
}
#seo_section + section .inner_item_txt .heading .h {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  text-align: left;
  color: #333;
}
#seo_section + section .inner_item_txt .heading .h::before,
#seo_section + section .inner_item_txt .heading .h::after { display: none; }

#seo_section + section .inner_item_txt p {
  margin: 0 0 1.6em;
  font-size: 13px;
  line-height: 2.2;
  color: #555;
}

/* YOUR button -> dark, no border, hangs off the card's bottom-left */
#seo_section + section .inner_item_txt .contents_btn01 {
  position: absolute;
  left: 60px;
  bottom: -30px;
  width: 316px;
  margin: 0;
  padding: 0;
}
#seo_section + section .inner_item_txt .contents_btn01 .content_wrapper {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}



/* mobile: photo on top, card below */
@media (max-width: 768px) {
  #seo_section + section::after { background: transparent; }
  #seo_section + section > .content_wrapper > .heading { position: static; padding: 30px 20px 20px; }
  #seo_section + section .wrapper_item { padding: 0; }
  #seo_section + section .inner_item_img { position: static; width: 100%; height: auto; }
  #seo_section + section .inner_item_img img { height: auto; }
  #seo_section + section .inner_item_txt { width: 92% !important; margin: -30px auto 0; padding: 30px 20px 60px; }
  #seo_section + section .inner_item_txt .contents_btn01 { left: 20px; width: calc(100% - 40px); }
}

@media screen and (max-width: 900px) {
    .contents_box01.block_image_text_3.valign-center .inner_item_txt {
        padding: 20px 20px 30px !important;
    }
}

@media (max-width: 768px) {
    #seo_section + section .inner_item_txt {
        padding: 11px 15px 16px !important;
    }
}


/* remove the blue overlays */
#seo_section + section::before,
#seo_section + section::after {
  display: none !important;
}

/* make the background image cover the whole section */
#seo_section + section {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#seo_section + section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
padding: 40px;
}

#seo_section + section {
  background-image:
    linear-gradient(rgb(51 177 241 / 90%), rgb(51 177 241 / 90%)),
    url(/images/convert/kinomori-kuroobijp/20261001171438.jpg/image.webp) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}