/* Pelica home page bespoke styles (header/footer kept from base.css) */

:root{
  --hero-bg:#f6fff8;
  --accent:#3CC70F;
  --accent-2:#00844D;
  --feature-card-h:200px;
  --card-pad:22px;
  --card-measure:48ch;
  --reward-h:92px;
}

.home{background:#ffffff}
.home{position:relative;z-index:1}
.home .section{padding:64px 0}
.home .hero{position:relative;background:linear-gradient(180deg,#f3fff7 0%,#ebf9ef 50%,#e5f3e9 100%);padding:72px 0 56px}
.home .hero .bg3d{position:absolute;inset:0;z-index:0;pointer-events:none}
.home .hero-inner{position:relative;z-index:1}
.home .hero-inner{display:grid;grid-template-columns:1.12fr 1fr;gap:28px;align-items:center}
/* FV alignment tuning: make columns equal-height and bottom-align the last card in各カラム */
.home .hero-inner > *{min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.home .hero-copy{row-gap:10px}
.home .hero-inner > div:last-child{row-gap:14px}
.home .right-headline{margin:0 0 8px}
.home .reward-list{align-items:start}
.home .hero-copy h1{font-size:44px;line-height:1.2;margin:0 0 12px;color:var(--accent-2)}
.home .hero-copy p{margin:0 0 16px}
.home .hero-cta{display:flex;gap:12px;margin-top:8px}

/* FV specific */
.fv-label{display:inline-block;margin-bottom:8px;color:#0a7b4b;font-weight:800;letter-spacing:.08em}
.fv-sub{color:#6b7280;font-weight:700;font-size:22px;margin-top:10px}
.fv-box{background:#fff;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.08);padding:16px 18px;max-width:520px;margin-top:14px;position:relative;overflow:visible}
.fv-box{border:1px solid #d7efe0;border-radius:16px}

.right-headline{font-weight:900;color:#25a043;font-size:56px;line-height:1.06;letter-spacing:-.02em;position:relative;text-shadow:0 1px 0 #ffffff,0 6px 14px rgba(0,0,0,.05);white-space:nowrap;margin-top:28px}
.right-headline:after{content:"";display:block;width:84px;height:4px;background:linear-gradient(90deg,#00844D,#3CC70F);border-radius:9999px;margin-top:10px}
.reward-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.reward{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;border:1px solid #e5efe8;height:var(--reward-h)}
.reward .icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(180deg,#e7f9ee,#def5e7);display:grid;place-items:center}
.reward .icon img{width:28px;height:28px;object-fit:contain}
.reward .txt{font-size:14px;line-height:1.35}

.value-panel{margin-top:14px;background:#fff;border:1px solid #d7efe0;border-radius:16px;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:16px;position:relative;overflow:visible}
.fv-box,.value-panel{min-height:96px}
.value-panel .pill{display:inline-block;padding:2px 10px;border-radius:9999px;background:rgba(0,132,77,.08);color:#00844D;font-weight:700;font-size:12px}
.value-panel .fv-icon{width:100px;height:100px;border-radius:0;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.06)}
.value-panel .title{font-weight:800;color:#25a043;font-size:22px}
.value-panel p{margin:4px 0 0;color:#374151;font-size:14px}

.home .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.home .card{border:1px solid var(--border);border-radius:14px;padding:var(--card-pad);background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.06);display:grid;grid-template-columns:64px 1fr;grid-auto-rows:auto;gap:10px 14px;align-items:start;position:relative;overflow:visible;min-height:var(--feature-card-h)}
.home .card .card-icon{position:absolute;top:-18px;left:-18px;width:84px;height:84px;border-radius:18px;object-fit:contain;background:linear-gradient(180deg,#e7f9ee,#def5e7);padding:10px;box-shadow:0 12px 24px rgba(0,0,0,.12);transform:rotate(-6deg);z-index:2}
.home .card .heading{grid-column:2;margin:0;max-width:var(--card-measure)}
.home .card p{grid-column:2;margin-top:2px;max-width:var(--card-measure)}
.home .card .muted{grid-column:2;color:#6b7280;font-size:12px}
.home .card .feat-img{width:100%;height:160px;border-radius:8px;margin-bottom:8px;object-fit:cover;background:#fff}

/* Feature overlay cards */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{position:relative;height:340px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.10)}
.feature-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s ease;z-index:0}
.feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.50) 55%,rgba(0,0,0,.72) 100%);z-index:1;pointer-events:none}
.feature-card .content{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;z-index:2}
.feature-card .label{display:inline-block;padding:2px 8px;border-radius:9999px;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:12px}
.feature-card h3{margin:6px 0 6px;font-size:20px;line-height:1.3;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.38)}
.feature-card p{margin:0;color:#fff;font-size:13px;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.feature-card:hover .bg{transform:scale(1.07)}

@media (max-width: 1200px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 960px){
  .feature-grid{grid-template-columns:1fr}
  .feature-card{height:300px}
}
.home .badge{display:inline-block;padding:4px 10px;border-radius:9999px;background:rgba(60,199,15,.12);color:var(--accent);font-weight:600;font-size:12px}
.home .heading{font-size:24px;margin:0 0 16px;color:var(--accent-2)}

/* coupons grid */
.home .coupons{background:#f9fdf9}
.home .coupon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* ECカード風 */
.home .coupon{display:flex;flex-direction:column;gap:10px;align-items:stretch;border:1px solid var(--border);border-radius:12px;background:#fff;padding:12px;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.home .coupon img{width:100%;height:160px;object-fit:contain;border-radius:10px;background:#ffffff;padding:8px}
.home .coupon .title{font-weight:800;color:#111;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(1.4em * 2)}
.home .coupon .price{color:#0a7b4b;font-weight:900;font-size:18px}
.home .coupon .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.home .coupon .pelica-pill{padding:2px 8px;border-radius:9999px;background:rgba(0,132,77,.08);color:#00844D;font-weight:700;font-size:11px}
.home .coupon .actions{margin-top:auto}
.home .coupon .actions .btn{width:auto;padding:10px 14px;border-radius:10px}
.home .coupon .deal{margin-top:2px;font-size:12px}
.home .coupon .deal .orig{color:#9aa7b3;text-decoration:line-through;margin-right:6px;font-size:12px}
.home .coupon .deal .now{color:#0a7b4b;font-weight:700;font-size:14px}

/* value-change section */
.home .value{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.home .pill{display:inline-block;padding:2px 10px;border-radius:9999px;background:rgba(0,132,77,.08);color:var(--accent-2);font-size:12px}

/* services/blog */
.home .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.home .list{display:grid;gap:12px}

/* Exchange cards */
.exchange .info-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.exchange .info-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 8px 20px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:10px}
.exchange .info-card img{width:100%;aspect-ratio:4 / 3;object-fit:cover;background:#ffffff;border-radius:8px}
.exchange .info-card h3{margin:8px 0 4px;color:var(--accent-2);font-weight:800;font-size:18px;line-height:1.4;white-space:normal}
.exchange .info-card p{margin:0;color:#374151;line-height:1.7;font-size:14px}

/* World series */
.world-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px}
.world-card{position:relative;border-radius:16px;overflow:hidden;min-height:220px;background:linear-gradient(135deg,#e8fff3,#f8fffb);border:1px solid #d7efe0;box-shadow:0 10px 26px rgba(0,0,0,.08)}
.world-card.released{background:linear-gradient(135deg,#e6fff1,#f4fffb)}
.world-card.coming{background:linear-gradient(135deg,#f7fff9,#f9fffd)}
.world-card .world-logo{position:absolute;top:12px;left:12px;width:128px;height:auto;object-fit:contain;background:#fff;border-radius:12px;padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.08);border:1px solid #e6efe9;z-index:2}
.world-card .world-content{padding:16px; padding-top:72px}
.world-card .tag{display:inline-block;background:rgba(0,132,77,.08);color:#00844D;border-radius:9999px;padding:2px 8px;font-size:12px;font-weight:700}
.world-card h3{margin:8px 0 6px;color:#0a7b4b;font-weight:900;letter-spacing:-.01em}
.world-card p{margin:0;color:#374151;line-height:1.7}
.world-card .actions{margin-top:12px}
.world-card .ribbon{position:absolute;top:10px;right:-36px;transform:rotate(18deg);background:linear-gradient(90deg,#00844D,#3CC70F);color:#fff;padding:6px 48px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,.18);font-weight:800;letter-spacing:.08em}

/* CTA bars */
.home .cta-center{text-align:center;margin-top:20px}

/* Decoration layer */
#decor-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;perspective:1000px}
#decor-layer .decor{position:absolute;will-change:transform,opacity;filter:drop-shadow(0 6px 16px rgba(0,0,0,.06));opacity:var(--op,0.6)}
#decor-layer .decor img{display:block;width:100%;height:100%;object-fit:contain}

@keyframes decor-float {
  0% { transform: translate3d(var(--x,0), calc(var(--y,0) - var(--amp,20px)), var(--z,0)) rotate(var(--r,0deg)) scale(var(--s,1)); }
  100% { transform: translate3d(var(--x,0), calc(var(--y,0) + var(--amp,20px)), var(--z,0)) rotate(calc(var(--r,0deg) + var(--rot,12deg))) scale(var(--s,1)); }
}

@media (prefers-reduced-motion: reduce){
  #decor-layer .decor{animation:none !important}
}

/* Corner decorations tied to cards */
.decor-corner{position:absolute;width:72px;height:auto;pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.12));z-index:2}
.decor-corner.small{width:56px}
/* position variants */
.decor-corner.pos-tr{top:-12px;right:-12px}
.decor-corner.pos-br{bottom:-12px;right:-12px}
.decor-corner.pos-bl{bottom:-12px;left:-12px}
.decor-corner.pos-tl{top:-12px;left:-12px}
/* animation variants */
.anim-bob{animation:corner-bob var(--dur,7s) ease-in-out infinite alternate}
.anim-sway{animation:corner-sway var(--dur,8s) ease-in-out infinite alternate}
.anim-drift{animation:corner-drift var(--dur,9s) ease-in-out infinite alternate}
.anim-tilt{animation:corner-tilt var(--dur,10s) ease-in-out infinite alternate}
@keyframes corner-bob{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(6px) rotate(3deg)}}
@keyframes corner-sway{from{transform:translateX(-6px) rotate(2deg)}to{transform:translateX(6px) rotate(-2deg)}}
@keyframes corner-drift{from{transform:translate(-4px,-4px) rotate(-3deg)}to{transform:translate(4px,4px) rotate(3deg)}}
@keyframes corner-tilt{from{transform:rotate(-8deg) scale(1)}to{transform:rotate(8deg) scale(1.02)}}

@media (max-width: 960px){
  .home .hero-inner{grid-template-columns:1fr}
  .right-headline{font-size:32px;line-height:1.2;white-space:normal;margin-top:12px}
  .home .section{padding:44px 0}
  .home .hero{padding:56px 0 32px}
  .home .card-grid{grid-template-columns:1fr;gap:12px}
  /* Exchange heading width control for nicer wraps */
  .exchange .heading{max-width:18em;margin:0 auto 12px}
  /* Reward list text/layout tuning for SP */
  .reward-list{grid-template-columns:1fr;gap:12px}
  .reward{padding:12px 14px}
  .reward .icon{width:44px;height:44px}
  .reward{height:auto;min-height:var(--reward-h)}
  .reward .txt{font-size:13px;line-height:1.45}
  .reward .txt b{font-size:16px}
  /* Value panel: stack vertically on SP for better readability */
  .value-panel{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:12px;
    padding:20px 16px;
    text-align:left;
  }
  .value-panel .fv-icon{
    width:140px;
    height:140px;
    margin:0 auto 4px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
    object-fit:contain;
  }
  .value-panel .pill{
    margin:2px auto 6px;
    align-self:center;
    text-align:center;
    display:block;
    width:fit-content;
  }
  .value-panel .title{
    font-size:clamp(18px,5.2vw,22px);
    line-height:1.35;
    margin-top:2px;
  }
  .value-panel p{
    font-size:13px;
    line-height:1.7;
    margin-top:8px;
  }
  /* reward cards unified height on SP */
  :root{ --reward-h:84px; --feature-card-h:160px; --card-pad:16px; --card-measure:40ch; }
  /* Card icon overflow fix on SP */
  .home .card{
    overflow:hidden;
    grid-template-columns:56px 1fr;
    padding-top:16px;
    padding-left:var(--card-pad);
    padding-right:var(--card-pad);
    position:relative;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    border-left:4px solid var(--accent-2);
    border-radius:12px;
  }
  .home .card .card-icon{
    position:static;
    width:56px;
    height:56px;
    transform:none;
    top:auto;left:auto;
    margin-top:-6px;
  }
  /* Headings: prevent auto line-break on SP */
  .home .card .heading{
    white-space:nowrap;
    overflow:visible;
    font-size:clamp(16px,4.6vw,18px);
    letter-spacing:-.01em;
    font-weight:800;
  }
  .home .card .heading,
  .home .card p,
  .home .card .muted{grid-column:2}
  /* Body should sit under the row of icon + heading */
  .home .card p{grid-column:1 / -1}
  /* Card description text smaller on SP */
  .home .card p{
    font-size:13px;
    line-height:1.6;
  }
  /* Decorative corners can cause overflow on small screens */
  .decor-corner{display:none}
  .home .coupon-grid{grid-template-columns:1fr}
  .home .coupon{grid-template-columns:100px 1fr;box-shadow:0 2px 6px rgba(0,0,0,.04)}
  .home .coupon .price{font-size:16px}
  .home .coupon img{height:150px}
  .home .value{grid-template-columns:1fr}
  /* Exchange section: media-card style on SP */
  .exchange .info-card-grid{gap:12px}
  .exchange .info-card{display:grid;grid-template-columns:96px 1fr;align-items:flex-start;padding:12px 14px;gap:10px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
  .exchange .info-card img{width:96px;height:96px;aspect-ratio:auto;object-fit:cover;grid-column:1;grid-row:1 / span 2;border-radius:8px}
  .exchange .info-card h3{grid-column:2;margin:0 0 4px;font-size:15px;line-height:1.45;white-space:normal}
  .exchange .info-card p{grid-column:2;margin:0;font-size:13px;line-height:1.7}
  .home .two-col{grid-template-columns:1fr}
  .exchange .info-card-grid{grid-template-columns:1fr}
  .world-grid{grid-template-columns:1fr}
}

@media (min-width: 961px) and (max-width: 1200px){
  .home .coupon-grid{grid-template-columns:repeat(2,1fr)}
  .exchange .info-card-grid{grid-template-columns:repeat(2,1fr)}
  .world-grid{grid-template-columns:repeat(2,1fr)}
}

/* =========================
   Value Explanation (1Pelica≠1円)
   ========================= */
.value-explain{position:relative;background:linear-gradient(180deg,#f1fff6 0%,#eaf8f0 45%,#e5f3e9 100%);overflow:hidden}
.value-explain .heading-wrap{text-align:center;margin-bottom:24px;max-width:980px;margin-left:auto;margin-right:auto}
.value-explain .lead-pill{display:inline-block;margin-bottom:8px;padding:4px 12px;border-radius:9999px;background:rgba(0,132,77,.08);color:#00844D;font-weight:800;font-size:12px;letter-spacing:.06em}
.value-explain h2{font-size:44px;margin:0 0 10px;color:var(--accent-2);line-height:1.1}
.value-explain h2 .em{background:linear-gradient(90deg,#00844D,#3CC70F);-webkit-background-clip:text;background-clip:text;color:transparent}
.value-explain .sub{color:#374151;margin-top:6px;font-size:16px;letter-spacing:.01em}
.value-explain .lead-paragraph{max-width:780px;margin-left:auto;margin-right:auto;line-height:1.8}

/* background graph on left */
.value-explain .bg-graph{position:absolute;left:0;top:40px;bottom:40px;width:50%;pointer-events:none}
.value-explain .bg-graph svg{width:100%;height:100%}

.value-explain .layout{position:relative;z-index:1}
.value-explain .stage{position:relative;max-width:1200px;margin:0 auto;padding:20px 0 80px}

/* new explain grid */
.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.explain-grid .info,.explain-grid .example{background:#fff;border:1px solid #d7efe0;border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:18px}
.mini{margin:0 0 8px;color:#0a7b4b;font-weight:800}
.bullets{margin:0;padding-left:18px;color:#374151}
.bullets li{margin:6px 0}
.mini-sub{margin:10px 0 4px;color:#0a7b4b;font-weight:800;font-size:13px}
.examples{margin:0 0 8px;padding-left:18px;color:#374151}
.examples li{margin:4px 0}
.formula{margin-top:6px;color:#0a7b4b;font-weight:800}
.formula .f-l{background:rgba(0,132,77,.08);color:#00844D;border-radius:6px;padding:2px 6px}
.formula .f-k{background:#e7f6ee;color:#0a7b4b;border-radius:6px;padding:2px 6px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-block;padding:4px 10px;border-radius:9999px;background:#e7f6ee;color:#006c3f;font-weight:800;font-size:12px;border:1px solid #cfeadd;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chip.ok{background:linear-gradient(90deg,#00844D,#3CC70F);color:#fff;border:none;box-shadow:0 2px 6px rgba(0,0,0,.15)}

/* three.js visual box */
#value3d{position:relative;width:100%;height:260px;margin-top:10px;border:1px solid #d7efe0;border-radius:14px;background:#fff;overflow:hidden}
#value3d .value3d-overlay{position:absolute;inset:0;padding:10px;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.value3d-overlay .headline{color:#0a7b4b;font-weight:800;font-size:14px}
.value3d-overlay .legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;color:#374151;font-size:12px}
.value3d-overlay .legend .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:#e7f6ee;color:#006c3f;font-weight:800;border:1px solid #cfeadd}
.value3d-overlay .legend .pill.ok{background:linear-gradient(90deg,#00844D,#3CC70F);color:#fff;border:none}
.value3d-overlay .dot{width:10px;height:10px;border-radius:9999px;display:inline-block}
.value3d-overlay .dot.a{background:#5f6b6b}
.value3d-overlay .dot.b{background:#3CC70F}
.value3d-overlay .dot.win{background:linear-gradient(90deg,#00844D,#3CC70F)}
.value3d-overlay .summary{align-self:flex-end;background:linear-gradient(90deg,#00844D,#3CC70F);color:#fff;border-radius:9999px;padding:6px 12px;font-weight:800;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.value3d-overlay .axis{position:absolute;right:8px;bottom:8px;color:#6b7280;font-size:12px}

/* arrows from def-box to lower boxes */
.value-explain .arrows{position:absolute;left:50%;transform:translateX(-50%);top: calc(52% - 20px);width:900px;height:200px;pointer-events:none}

/* right-half clouds layout */
.value-explain .clouds .lower{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:static;height:auto;margin-top:18px}
.value-explain .clouds .value-box{position:static;width:auto;border-radius:24px}
.value-explain .clouds .arrows{position:absolute;left:50%;transform:translateX(-50%);top: 88px;width:100%;height:160px}
.value-explain .arrows svg{width:100%;height:100%}

@media (max-width: 960px){
  .value-explain h2{font-size:28px}
  .value-explain h2{margin:0 0 24px}
  .value-explain .heading-wrap{margin-bottom:32px;padding:0 22px}
  .value-explain .lead-paragraph{max-width:42ch;line-height:1.9}
  .value-explain .layout{padding-left:22px;padding-right:22px}
  .value-explain .stage{padding:52px 0 96px}
  .value-explain{border-top:1px solid #e6efe9;border-bottom:1px solid #e6efe9}
  .explain-grid{gap:16px}
  .explain-grid .info,.explain-grid .example{padding:16px}
  .value-explain p{line-height:1.9}
  .bullets li{margin:10px 0;line-height:1.8}
  .examples li{margin:8px 0;line-height:1.8}
  .mini-sub{margin:14px 0 6px}
  .value-explain .bg-graph{display:none}
  .value-explain .arrows{display:none}
  .explain-grid{grid-template-columns:1fr}
  #value3d{height:220px}
}

/* ========== Enhancement Patch for Ideal Visual ========== */
.value-explain {background: linear-gradient(90deg, #dff8e8 0%, #f5fff9 100%);} 
.value-explain .bg-graph svg rect:nth-child(n+3) {opacity: 0.85;}
.value-explain .bg-graph svg polyline {
  stroke: #2fbf79;
  stroke-width: 10;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(47,191,121,0.4));
}
.value-explain .bg-graph svg text {opacity:.7}
.value-explain .def-box,
.value-explain .value-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8fefb 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: none;
}
.value-explain .heading-wrap {margin-bottom: 40px;}
.value-explain .stage {padding-bottom: 100px;}
.value-explain .def-box.main-def {margin-bottom: 30px;}
.value-explain .arrows line {
  stroke: #2fbf79;
  stroke-width: 5;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(47,191,121,0.4));
}

/* =========================
   Value Explain - Ideal Visual Final Tuning
   ========================= */

/* 背景をより立体的に */
.value-explain {
  background: linear-gradient(90deg, #dff8e8 0%, #f5fff9 100%);
  position: relative;
  overflow: hidden;
}

/* 背景グラフの濃度と立体感 */
.value-explain .bg-graph svg rect:nth-child(2) {
  fill: #aef2cc;
  opacity: 0.85;
}
.value-explain .bg-graph svg rect:nth-child(3) {
  fill: #9beec4;
  opacity: 0.9;
}
.value-explain .bg-graph svg rect:nth-child(4) {
  fill: #7de5b5;
  opacity: 1;
}
.value-explain .bg-graph svg polyline {
  stroke: #2fbf79;
  stroke-width: 10;
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(47,191,121,0.4));
}
.value-explain .bg-graph svg text {
  fill: rgba(255,255,255,0.85);
  font-weight: 900;
  letter-spacing: -1px;
}

/* ボックスをより浮かせて階層を明確に */
.value-explain .def-box,
.value-explain .value-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8fefb 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-explain .def-box:hover,
.value-explain .value-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* 中央ボックス間の余白・呼吸を広くする */
.value-explain .heading-wrap {
  margin-bottom: 50px;
}
.value-explain .stage {
  padding: 40px 0 120px;
}
.value-explain .def-box.main-def {
  margin-bottom: 40px;
}

/* 下段ボックスの位置微調整 */
.value-explain .left-box {
  top: 40px;
  transform: translate(-12px, -10px);
}
.value-explain .right-box {
  bottom: 20px;
  transform: translate(12px, 10px);
}

/* 矢印をより明るくクリアに */
.value-explain .arrows line {
  stroke: #25a043;
  stroke-width: 5;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(47,191,121,0.4));
}
.value-explain .arrows marker path { fill: #25a043; }