/* v79 / 2026-11-05 / WBT-0275  WEB/LP の入口の完成見本を、v76 の深緑の舞台へつなげる（Kuro 候補） */

/* 舞台：プレビューと同じ深緑・光・床・ボッツ */
.studio-showcases{position:relative;isolation:isolate;overflow:hidden;margin:6px 0 34px;padding:44px 40px 152px;border-radius:20px;border:1px solid #ffffff1f;color:#f2f7ef;
  background:
    linear-gradient(#d9f2c62b,#d9f2c62b) left 34px bottom 30px/calc(100% - 68px) 1px no-repeat,
    radial-gradient(ellipse at 82% 4%,#7eae6c40,transparent 48%),
    radial-gradient(ellipse at 14% 82%,#28705740,transparent 52%),
    linear-gradient(160deg,#0d2d23,#071c16 72%);
  box-shadow:0 30px 80px -30px #04130d99}
.studio-showcases::before{content:'YOURS.';position:absolute;z-index:-1;right:3%;top:1%;font-family:Arial,sans-serif;font-size:clamp(70px,12vw,170px);line-height:1.1;letter-spacing:-.075em;font-weight:800;font-style:italic;color:#e0ffc908;pointer-events:none;white-space:nowrap}
.studio-showcases::after{content:'';position:absolute;z-index:1;left:34px;bottom:31px;width:126px;height:103px;background:url(/assets/img/m_wave.webp) no-repeat 5px 0/116px auto;filter:drop-shadow(0 5px 8px #00170d88);pointer-events:none;transform-origin:50% 75%;animation:studio-bots-breathe 6s ease-in-out infinite}

/* 見出し・説明・AI への入口 */
.studio-showcases>h2{color:#f2f7ef;font-weight:600;letter-spacing:-.035em;margin:0 0 10px}
.studio-showcases>p{color:#b9ccbd;margin:0 0 18px}
.studio-showcases .studio-showcases__ai{display:inline-flex;align-items:center;min-height:40px;margin:0 0 28px;padding:9px 16px;border-radius:9px;background:#d8efbc;color:#15351f;font-size:12px;font-weight:700;text-decoration:none}
.studio-showcases .studio-showcases__ai:hover{background:#e6f6d2}
.studio-showcases .studio-showcases__ai:focus-visible{outline:3px solid #d8efbc;outline-offset:4px}

/* ボッツの吹き出し（プレビューの「気になる文字や写真をクリック」と同じ形） */
.studio-showcases>h2::after{content:'気になる見本をクリック。';position:absolute;z-index:2;left:174px;bottom:54px;max-width:220px;padding:9px 12px;border-radius:12px 12px 12px 3px;background:#e7f3da;color:#214932;font-size:11px;font-weight:500;line-height:1.7;letter-spacing:0;box-shadow:0 5px 25px #00180c20;pointer-events:none}
.studio-showcases>h2:lang(en)::after{content:'Click a sample to try it.'}
.studio-showcases>h2:lang(th)::after{content:'คลิกตัวอย่างที่สนใจ'}
.studio-showcases>h2::before{content:'';position:absolute;z-index:2;left:169px;bottom:62px;border:5px solid transparent;border-right-color:#e7f3da;border-left:0;pointer-events:none}
.studio-showcases>p::after{content:'GROW, WILD. — WEBOT';position:absolute;z-index:2;right:30px;bottom:12px;color:#aec5b4;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.16em;pointer-events:none}

/* 強い一例から比較へ：カフェを主役に大きく、その下で美容室・会社を見比べる */
.studio-showcases .studio-showcases__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;align-items:start}
.studio-showcases .studio-showcases__card{gap:10px;padding:0;border:0;color:#f2f7ef;transition:transform .25s ease}
.studio-showcases .studio-showcases__card:first-child{grid-column:1/-1}
.studio-showcases .studio-showcases__card:first-child .sample-devices{width:100%;max-width:700px;margin:0 auto}
.studio-showcases .studio-showcases__card:last-child{grid-column:auto;max-width:none;width:auto;justify-self:stretch}
.studio-showcases .studio-showcases__card>span{color:#f2f7ef;font-size:17px;font-weight:600;letter-spacing:-.02em}
.studio-showcases .studio-showcases__card:first-child>span{font-size:22px}
.studio-showcases .studio-showcases__card>b{justify-self:start;padding:5px 12px;border:1px solid #d8efbc66;border-radius:999px;color:#d8efbc;font-size:11px;font-weight:600}
.studio-showcases .studio-showcases__card:hover{transform:translateY(-3px)}
.studio-showcases .studio-showcases__card:hover>b{background:#d8efbc;color:#15351f}
.studio-showcases .studio-showcases__card:focus-visible{outline:3px solid #d8efbc;outline-offset:6px;border-radius:16px}

/* 見本の台：プレビューの結果カードと同じ深緑。業種ごとに光の色だけ変える */
.studio-showcases .studio-showcases__card .studio-showcases__visual{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:26px 18px 14px;border-radius:15px;border:1px solid #244a32;box-shadow:inset 0 1px 0 #c6e8ad25;background:radial-gradient(ellipse at 78% 0,#49704b,#183e2c 50%,#09281c)}
.studio-showcases .studio-showcases__card:nth-child(1) .studio-showcases__visual{background:radial-gradient(ellipse at 84% 0,#c08a4f4d,transparent 52%),radial-gradient(ellipse at 78% 0,#49704b,#183e2c 50%,#09281c)}
.studio-showcases .studio-showcases__card:nth-child(2) .studio-showcases__visual{background:radial-gradient(ellipse at 84% 0,#c27f924d,transparent 52%),radial-gradient(ellipse at 78% 0,#49704b,#183e2c 50%,#09281c)}
.studio-showcases .studio-showcases__card:nth-child(3) .studio-showcases__visual{background:radial-gradient(ellipse at 84% 0,#6d8fe24d,transparent 52%),radial-gradient(ellipse at 78% 0,#49704b,#183e2c 50%,#09281c)}
.studio-showcases .studio-showcases__card:first-child .studio-showcases__visual{padding:34px 26px 18px}

/* 端末の枠：薄く、プレビューと同じ色 */
.studio-showcases .sample-device__label{color:#d8e6d0;font-weight:500;letter-spacing:.06em}
.studio-showcases .sample-device--desktop .sample-device__chrome{border-width:4px;border-color:#25362b;background:#eff1e9}
.studio-showcases .sample-device--desktop .sample-viewport{border:4px solid #25362b;border-top:0;border-bottom-width:7px;box-shadow:0 12px 22px -8px #0007}
.studio-showcases .sample-device--mobile .sample-viewport{border-color:#263a2d;box-shadow:0 14px 20px -8px #0009}
.studio-showcases .sample-device__base{background:linear-gradient(90deg,#8b9a83,#cad4bf 50%,#819278);height:17px}

/* タブレット以下：1列。主役を先に */
@media(max-width:860px){
  .studio-showcases .studio-showcases__grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:700px){
  .studio-showcases{padding:30px 16px 126px;border-radius:16px;
    background:
      linear-gradient(#d9f2c62b,#d9f2c62b) left 14px bottom 22px/calc(100% - 28px) 1px no-repeat,
      radial-gradient(ellipse at 82% 4%,#7eae6c40,transparent 48%),
      radial-gradient(ellipse at 14% 82%,#28705740,transparent 52%),
      linear-gradient(160deg,#0d2d23,#071c16 72%)}
  .studio-showcases::after{left:12px;bottom:23px;width:100px;height:82px;background-size:92px auto;background-position:4px 0}
  .studio-showcases>h2::after{left:118px;bottom:38px;max-width:calc(100% - 140px);font-size:10px;padding:8px 10px}
  .studio-showcases>h2::before{left:113px;bottom:46px}
  .studio-showcases>p::after{display:none}
  .studio-showcases .studio-showcases__card .studio-showcases__visual,.studio-showcases .studio-showcases__card:first-child .studio-showcases__visual{padding:22px 12px 12px}
  .studio-showcases .studio-showcases__card:first-child>span{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .studio-showcases::after{animation:none}
  .studio-showcases .studio-showcases__card{transition:none}
  .studio-showcases .studio-showcases__card:hover{transform:none}
}