/*
 * RESULTS / client tablet background, revised 2026-08-27.
 * Loaded after the previous RESULTS variants. The generated copy/DOM and
 * the existing .rr-bottom block stay intact; only the presentation changes.
 */

section[data-sec="07 RESULT 導入成果"].results-reference{
  position:relative!important;
  isolation:isolate;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  color:#111827;
  background:#fff!important;
  background-image:none!important;
  background-attachment:scroll!important;
}

/* A fixed 1920px design stage. Between 768px and 1919px it is clipped from
   both sides instead of responsively shrinking the tablet. */
section[data-sec="07 RESULT 導入成果"].results-reference::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:50%!important;
  display:block!important;
  width:1920px!important;
  height:100%!important;
  margin:0 0 0 -960px!important;
  background-color:#fff!important;
  background-image:url("results-reuse-counter-real-screen-20260911.png")!important;
  background-repeat:no-repeat!important;
  background-position:0 84px!important;
  background-size:1920px 1280px!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none;
}

section[data-sec="07 RESULT 導入成果"].results-reference::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  display:block!important;
  background:
    linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),
    linear-gradient(180deg,
    #fff 0%,
    rgba(255,255,255,.82) 5%,
    rgba(255,255,255,0) 14%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.62) 82%,
    #fff 94%,
    #fff 100%)!important;
  pointer-events:none;
}

section[data-sec="07 RESULT 導入成果"].results-reference .rr-photo,
section[data-sec="07 RESULT 導入成果"].results-reference .rr-product-logo{
  display:none!important;
}

@media (min-width:769px){
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-shell{
    position:relative!important;
    z-index:1!important;
    left:50%!important;
    width:1220px!important;
    max-width:none!important;
    min-height:0!important;
    margin:0 0 0 -610px!important;
    padding:94px 0 92px!important;
    box-sizing:border-box;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-main{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:394px 800px!important;
    grid-template-rows:auto auto!important;
    gap:0 26px!important;
    min-height:0!important;
    align-items:start!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-left{
    position:relative!important;
    z-index:4!important;
    grid-column:1 / -1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 48px!important;
    padding:0!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-kicker{
    margin:0 0 15px!important;
    color:#1e8fc9!important;
    text-shadow:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-title{
    max-width:none!important;
    margin:0!important;
    color:#17285f!important;
    font-size:58px!important;
    font-weight:800!important;
    line-height:1.24!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
    text-shadow:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-title br{
    display:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-grid{
    position:relative!important;
    z-index:3!important;
    grid-column:2!important;
    grid-row:2!important;
    display:grid!important;
    width:800px!important;
    grid-template-columns:repeat(2,387px)!important;
    grid-template-rows:repeat(2,448px)!important;
    gap:28px 26px!important;
    align-items:stretch!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-card{
    width:387px!important;
    height:448px!important;
    min-width:0!important;
    min-height:448px!important;
    padding:30px 34px 32px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    border:1px solid #d5e6f3!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,#fff 0%,#fff 42%,#f3f9fe 100%)!important;
    box-shadow:0 20px 48px -28px rgba(12,62,112,.34)!important;
    opacity:1!important;
    backdrop-filter:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-number{
    width:88px!important;
    height:72px!important;
    padding:10px 0 0 13px!important;
    font-size:36px!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-icon{
    width:88px!important;
    height:88px!important;
    margin:0 auto 7px!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-label{
    margin:0 auto 15px!important;
    padding:5px 20px 6px!important;
    font-size:16px!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-kick{
    margin:0 0 13px!important;
    font-size:14.5px!important;
    line-height:1.62!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-card h3{
    margin:0 0 12px!important;
    font-size:23px!important;
    line-height:1.5!important;
    letter-spacing:.003em!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-body{
    font-size:15.5px!important;
    line-height:1.78!important;
    letter-spacing:.003em!important;
  }

  /* Preserve the existing multi-store block below the enlarged card grid. */
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-bottom{
    position:relative!important;
    z-index:6!important;
    min-height:214px!important;
    margin-top:44px!important;
    background:linear-gradient(100deg,#fff 0%,#edf7ff 100%)!important;
    box-shadow:0 20px 48px -28px rgba(0,21,52,.24)!important;
    opacity:1!important;
    backdrop-filter:none!important;
  }
}

@media (max-width:768px){
  section[data-sec="07 RESULT 導入成果"].results-reference{
    background:linear-gradient(180deg,#fff 0%,#f4f9fd 100%)!important;
  }

  /* Place the enlarged, softened tablet photo in a dedicated band at the section bottom. */
  section[data-sec="07 RESULT 導入成果"].results-reference::before{
    top:auto!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:clamp(330px,94vw,430px)!important;
    margin:0!important;
    background-color:#f5f9fd!important;
    background-position:left 58%!important;
    background-size:auto clamp(430px,122vw,560px)!important;
    opacity:.5!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%)!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference::after{
    content:none!important;
    display:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-shell{
    position:relative!important;
    z-index:1!important;
    left:auto!important;
    width:calc(100% - 40px)!important;
    max-width:none!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:66px 0 clamp(360px,100vw,450px)!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-main{
    display:block!important;
    min-height:0!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-left{
    width:100%!important;
    margin:0 0 34px!important;
    padding:0!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-kicker{
    margin:0 0 14px!important;
    color:#1e8fc9!important;
    text-shadow:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-title{
    max-width:none!important;
    margin:0!important;
    color:#17285f!important;
    font-size:30px!important;
    line-height:1.35!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
    text-shadow:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-title br{
    display:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-grid{
    display:grid!important;
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 24px 31px!important;
    box-sizing:border-box!important;
    border:1px solid #d8e7f3!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,#fff 0%,#f4faff 100%)!important;
    box-shadow:0 14px 34px -24px rgba(12,62,112,.34)!important;
    opacity:1!important;
    backdrop-filter:none!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-number{font-size:30px!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-icon{width:82px!important;height:82px!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-label{font-size:15px!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-kick{font-size:15px!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-card h3{font-size:21px!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-body{font-size:15px!important;line-height:1.82!important}

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-bottom{
    grid-template-columns:1fr!important;
    margin-top:22px!important;
    padding:28px 22px!important;
    text-align:center!important;
    border-radius:26px!important;
    background:linear-gradient(100deg,#fff 0%,#edf7ff 100%)!important;
    opacity:1!important;
  }

  section[data-sec="07 RESULT 導入成果"].results-reference .rr-cloud{margin:0 auto!important}
  section[data-sec="07 RESULT 導入成果"].results-reference .rr-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}