*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#071a2b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.lp-container{width:min(1280px,calc(100% - 64px));margin:0 auto}.lp-header{position:sticky;top:0;z-index:100;height:72px;border-bottom:1px solid #e5eae2;background:rgba(255,255,255,.97);backdrop-filter:blur(14px)}.lp-header-inner{height:100%;display:flex;align-items:center;gap:28px}.lp-logo{width:170px;flex:0 0 auto}.lp-logo img{width:100%}.lp-nav{display:flex;align-items:center;gap:31px;margin-left:auto}.lp-nav a,.lp-login{font-size:.75rem;font-weight:800;color:#3f5361;transition:.18s}.lp-nav a:hover,.lp-login:hover{color:#6f8950}.lp-header-actions{display:flex;align-items:center;gap:19px}.lp-menu{display:none;width:42px;height:42px;border:0;border-radius:11px;background:#eef4e9}.lp-menu span{display:block;width:18px;height:2px;margin:4px auto;background:#071a2b}.lp-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;border-radius:12px;background:linear-gradient(135deg,#6e9548,#9fba72);color:#fff;font-size:.78rem;font-weight:850;box-shadow:0 8px 20px rgba(102,142,68,.17);transition:.18s}.lp-btn:hover{transform:translateY(-1px);box-shadow:0 11px 23px rgba(102,142,68,.23)}.lp-btn-header{min-height:40px;padding:0 17px;font-size:.71rem}.lp-btn-white{background:#fff;color:#071a2b;border:1px solid #dae4d6;box-shadow:0 7px 17px rgba(7,26,43,.055)}.lp-kicker{display:inline-block;color:#6c8a4e;font-size:.62rem;font-weight:900;letter-spacing:.145em}.lp-kicker-light{color:#d5e8b8}.lp-hero{position:relative;min-height:600px;overflow:hidden}.lp-hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),url("/public/yumekibou/landing/hero-botanical-background.webp");background-size:cover;background-position:center center}.lp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.87fr 1.13fr;gap:34px;align-items:center;min-height:600px}.lp-hero-copy{padding:50px 0 72px}.lp-hero-copy h1{margin:9px 0 16px;font-size:4.75rem;line-height:.9;letter-spacing:-.065em}.lp-hero-copy>p{max-width:520px;margin:0;color:#526879;font-size:.9rem;line-height:1.72}.lp-actions{display:flex;gap:11px;margin-top:24px}.lp-hero-features{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px;color:#4d6472;font-size:.64rem;font-weight:780}.lp-hero-features>span{display:flex;align-items:center;gap:6px}.lp-hero-features .icon{color:#6e914e}.lp-hero-visual{position:relative;height:570px;display:flex;align-items:flex-end;justify-content:center}.lp-hero-products{position:absolute;z-index:2;bottom:-12px;right:-24px;width:700px;max-width:none;height:570px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 20px rgba(46,71,39,.13))}.lp-stat-section{position:relative;z-index:7;margin-top:-26px}.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border-radius:16px;background:linear-gradient(90deg,#064d32 0%,#0e5c38 55%,#25582d 100%);box-shadow:0 15px 34px rgba(22,82,48,.18)}.lp-stats article{min-height:82px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:15px 24px;border-right:1px solid rgba(255,255,255,.12)}.lp-stats article:last-child{border-right:0}.lp-stats article>span{width:38px;height:38px;display:grid;place-items:center;color:#b8d48c}.lp-stats strong{display:block;color:#fff;font-size:1.55rem;line-height:1}.lp-stats small{display:block;margin-top:5px;color:#d2dfd5;font-size:.56rem}.lp-section{padding:76px 0}.lp-about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}.lp-family{margin:0;overflow:hidden;border-radius:18px;box-shadow:0 15px 34px rgba(7,26,43,.06)}.lp-family img{width:100%;height:380px;object-fit:cover}.lp-about-copy h2,.lp-section-heading h2,.lp-how h2,.lp-benefit-grid h2,.lp-contact-heading h2{margin:9px 0 13px;font-size:2.65rem;line-height:1.02;letter-spacing:-.05em}.lp-about-copy>p{max-width:650px;margin:0;color:#687a89;font-size:.78rem;line-height:1.72}.lp-about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}.lp-about-values article{display:grid;grid-template-columns:auto 1fr;gap:9px}.lp-about-values article>span{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:#dfeacb;color:#718c50}.lp-about-values strong{display:block;font-size:.64rem;line-height:1.3}.lp-about-values small{display:block;margin-top:4px;color:#84919b;font-size:.52rem;line-height:1.45}.lp-products{padding-top:44px}.lp-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:25px}.lp-section-heading>div{max-width:720px}.lp-inline-link{display:flex;align-items:center;gap:7px;color:#6e8e4d;font-size:.66rem;font-weight:850}.lp-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lp-product-showcase-grid{align-items:stretch}.lp-product-showcase-card{position:relative;overflow:hidden;border-radius:24px;border:1px solid #dbe4d5;background:#fff;box-shadow:0 16px 34px rgba(18,43,30,.08);transition:transform .18s ease,box-shadow .18s ease}.lp-product-showcase-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(18,43,30,.12)}.lp-product-showcase-card img{width:100%;height:100%;display:block;object-fit:cover}.lp-product-showcase-card::after{content:"";position:absolute;inset:auto 0 0 0;height:34px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(7,26,43,.03));pointer-events:none}
.lp-product-card{display:grid;grid-template-columns:.77fr 1.23fr;min-height:355px;overflow:hidden;border:1px solid #dbe5d6;border-radius:20px;background:#fff;box-shadow:0 14px 30px rgba(7,26,43,.045)}.lp-product-media{display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#eef5e7,#e3edd9)}.lp-product-media img{width:100%;height:300px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(32,55,35,.12))}.lp-product-copy{padding:30px 25px;display:flex;flex-direction:column;justify-content:center}.lp-product-brand{color:#718b51;font-size:.54rem;font-weight:900;letter-spacing:.12em}.lp-product-copy h3{margin:8px 0 9px;font-size:1.25rem;line-height:1.2}.lp-product-copy>p{margin:0;color:#768894;font-size:.64rem;line-height:1.65}.lp-member-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:21px;padding:15px 16px;border:1px solid #d7e4d2;border-radius:14px;background:linear-gradient(135deg,#f4f8ef,#edf5e6)}.lp-member-price span{display:block;color:#718291;font-size:.52rem;font-weight:750}.lp-member-price strong{display:block;margin-top:3px;color:#123322;font-size:1.28rem;letter-spacing:-.03em}.lp-member-price em{padding:6px 9px;border-radius:999px;background:#789c54;color:#fff;font-size:.5rem;font-style:normal;font-weight:850;white-space:nowrap}.lp-product-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.lp-product-bottom>span{padding:10px 12px;border-radius:12px;border:1px solid #e0e8dd;background:#fff}.lp-product-bottom small{display:block;color:#86939e;font-size:.46rem}.lp-product-bottom b{display:block;margin-top:3px;color:#183329;font-size:.62rem}.lp-repeat-reward{background:#fbfdf9!important;border-color:#d6e5cf!important}.lp-repeat-reward b{color:#668c45!important}.lp-how{padding:64px 0 72px}.lp-how h2{max-width:820px;margin-bottom:8px}.lp-how-intro{max-width:710px;margin:0 0 31px;color:#718390;font-size:.72rem;line-height:1.65}.lp-step-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:15px;align-items:center}.lp-step-row article{min-width:0;display:grid;grid-template-columns:84px 1fr;gap:13px;align-items:center}.lp-step-row article>img{width:84px;height:84px;object-fit:cover;border-radius:24px;box-shadow:0 8px 20px rgba(55,82,41,.12)}.lp-step-row article strong{display:block;font-size:.68rem;line-height:1.3}.lp-step-row article p{margin:5px 0 0;color:#7e8d98;font-size:.53rem;line-height:1.5}.lp-step-arrow{color:#9db77c}.lp-benefits{position:relative;overflow:hidden;padding:62px 0;background:linear-gradient(90deg,#f7faef,#f1f6e9)}.lp-benefits-leaf{position:absolute;width:260px;height:260px;background-image:url("/public/yumekibou/landing/hero-botanical-background.webp");background-size:cover;opacity:.17;filter:saturate(.7)}.lp-benefits-leaf-left{left:-140px;bottom:-120px;border-radius:0 100% 0 0}.lp-benefits-leaf-right{right:-140px;top:-100px;border-radius:0 0 0 100%}.lp-benefit-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.lp-benefit-items{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}.lp-benefit-items article{display:grid;grid-template-columns:auto 1fr;gap:10px}.lp-benefit-items article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#dce9ca;color:#688548}.lp-benefit-items strong{display:block;font-size:.62rem}.lp-benefit-items p{margin:4px 0 0;color:#778895;font-size:.51rem;line-height:1.48}.lp-join{padding:0 0 58px;background:linear-gradient(180deg,#f5f9ee 0,#fff 52%)}.lp-join-card{position:relative;display:grid;grid-template-columns:.43fr .57fr;min-height:315px;overflow:hidden;border-radius:22px;background:linear-gradient(90deg,#07462f 0%,#125036 46%,#2e5c31 100%);box-shadow:0 17px 38px rgba(7,60,39,.16)}.lp-join-family{position:relative;overflow:hidden}.lp-join-family img{width:115%;max-width:none;height:100%;object-fit:cover;object-position:center 48%;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 68%,rgba(0,0,0,.62) 80%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 68%,rgba(0,0,0,.62) 80%,transparent 100%)}.lp-join-copy{padding:42px 45px 42px 24px;color:#fff;display:flex;flex-direction:column;justify-content:center}.lp-join-copy h2{max-width:590px;margin:9px 0 10px;font-size:2rem;line-height:1.05;letter-spacing:-.04em}.lp-join-copy p{max-width:610px;margin:0;color:#d4dfd7;font-size:.68rem;line-height:1.6}.lp-join-actions{display:flex;gap:10px;margin-top:20px}.lp-btn-dark-outline{background:transparent;border:1px solid rgba(255,255,255,.34);box-shadow:none}.lp-contact{padding:20px 0 58px}.lp-contact-heading{max-width:680px;margin-bottom:27px}.lp-contact-heading p{margin:0;color:#778896;font-size:.65rem;line-height:1.6}.lp-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lp-contact-grid article{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:16px;border:1px solid #e1e8de;border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(7,26,43,.035)}.lp-contact-grid article>img{width:92px;height:92px;object-fit:cover;border-radius:24px}.lp-contact-grid strong{display:block;font-size:.69rem}.lp-contact-grid p{margin:4px 0;color:#7d8c98;font-size:.54rem;line-height:1.45}.lp-contact-grid small{color:#6f8d50;font-size:.48rem;line-height:1.4}.lp-footer{padding:40px 0 18px;background:linear-gradient(90deg,#06472f,#0b5135 50%,#154d31);color:#fff}.lp-footer-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr 1.4fr;gap:34px}.lp-footer-brand img{width:180px;filter:brightness(0) invert(1);opacity:.95}.lp-footer-brand p,.lp-footer p{color:#c7d5cc;font-size:.54rem;line-height:1.55}.lp-footer-grid>div:not(.lp-footer-brand){display:grid;align-content:start;gap:7px}.lp-footer strong{color:#d5e7b5;font-size:.57rem}.lp-footer a{color:#e4ece7;font-size:.54rem}.lp-footer-bottom{margin-top:25px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#aec0b5;font-size:.48rem}
@media(max-width:1200px){.lp-container{width:min(1160px,calc(100% - 44px))}.lp-nav{gap:21px}.lp-hero-copy h1{font-size:4.2rem}.lp-hero-products{right:-45px;width:650px}.lp-step-row article{grid-template-columns:72px 1fr}.lp-step-row article>img{width:72px;height:72px}}
@media(max-width:1000px){.lp-nav{gap:17px}.lp-header-actions .lp-login{display:none}.lp-hero-grid{grid-template-columns:.92fr 1.08fr}.lp-hero-products{right:-55px;width:590px}.lp-product-grid{grid-template-columns:1fr}.lp-product-card{grid-template-columns:.72fr 1.28fr}.lp-contact-grid{grid-template-columns:1fr}.lp-contact-grid article{grid-template-columns:86px 1fr}.lp-contact-grid article>img{width:86px;height:86px}.lp-footer-grid{grid-template-columns:1.4fr 1fr 1fr}.lp-footer-grid>div:last-child{grid-column:2/4}}
@media(max-width:820px){.lp-container{width:min(100% - 30px,720px)}.lp-header{height:66px}.lp-logo{width:150px}.lp-menu{display:block;margin-left:auto}.lp-nav{position:absolute;top:66px;left:15px;right:15px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid #dce5d8;border-radius:14px;background:#fff;box-shadow:0 15px 35px rgba(7,26,43,.12)}.lp-nav.open{display:flex}.lp-nav a{padding:11px;border-radius:9px}.lp-nav a:hover{background:#f4f7f1}.lp-header-actions{display:none}.lp-hero{min-height:auto}.lp-hero-grid{grid-template-columns:1fr;gap:0}.lp-hero-copy{text-align:center;padding:46px 0 10px}.lp-hero-copy h1{font-size:4.25rem}.lp-hero-copy>p{margin:0 auto}.lp-actions,.lp-hero-features{justify-content:center}.lp-hero-visual{height:455px}.lp-hero-products{left:50%;right:auto;bottom:-11px;width:570px;height:455px;transform:translateX(-50%)}.lp-stat-section{margin-top:-12px}.lp-stats{grid-template-columns:1fr 1fr}.lp-stats article:nth-child(2){border-right:0}.lp-stats article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}.lp-about-grid,.lp-benefit-grid{grid-template-columns:1fr}.lp-family img{height:390px}.lp-about-values{grid-template-columns:repeat(3,1fr)}.lp-section-heading{align-items:flex-start}.lp-step-row{grid-template-columns:1fr 1fr;gap:17px}.lp-step-arrow{display:none}.lp-step-row article{grid-template-columns:76px 1fr;padding:13px;border:1px solid #e2e9df;border-radius:16px;background:#fff}.lp-step-row article>img{width:76px;height:76px}.lp-join-card{grid-template-columns:1fr}.lp-join-family{height:295px}.lp-join-family img{width:100%;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.72) 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.72) 80%,transparent 100%)}.lp-join-copy{padding:25px 30px 35px}.lp-footer-grid{grid-template-columns:1fr 1fr}.lp-footer-brand{grid-column:1/-1}.lp-footer-grid>div:last-child{grid-column:auto}}
@media(max-width:600px){.lp-container{width:calc(100% - 26px)}.lp-hero-copy{padding-top:35px}.lp-hero-copy h1{font-size:3.25rem}.lp-hero-copy>p{font-size:.75rem}.lp-actions{display:grid}.lp-btn{width:100%}.lp-hero-features{display:grid;grid-template-columns:1fr;text-align:left;gap:10px;max-width:225px;margin-left:auto;margin-right:auto}.lp-hero-visual{height:355px}.lp-hero-products{width:440px;height:365px}.lp-stats{padding:0 4px}.lp-stats article{min-height:68px;padding:11px}.lp-stats article>span{width:30px;height:30px}.lp-stats strong{font-size:1.18rem}.lp-stats small{font-size:.45rem}.lp-section{padding:54px 0}.lp-family img{height:280px}.lp-about-copy h2,.lp-section-heading h2,.lp-how h2,.lp-benefit-grid h2,.lp-contact-heading h2{font-size:2rem}.lp-about-values{grid-template-columns:1fr}.lp-section-heading{display:grid;gap:8px}.lp-product-card{grid-template-columns:1fr}.lp-product-media{min-height:295px}.lp-product-media img{height:265px}.lp-product-copy{padding:22px 18px}.lp-member-price{align-items:center}.lp-member-price strong{font-size:1.18rem}.lp-product-bottom{grid-template-columns:1fr}.lp-step-row{grid-template-columns:1fr}.lp-step-row article{grid-template-columns:76px 1fr}.lp-benefit-items{grid-template-columns:1fr}.lp-join-copy{padding:24px 20px 30px}.lp-join-actions{display:grid}.lp-contact-grid article{grid-template-columns:78px 1fr;padding:13px}.lp-contact-grid article>img{width:78px;height:78px}.lp-footer-grid{grid-template-columns:1fr 1fr}.lp-footer-grid>div:last-child{grid-column:1/-1}}
@media(max-width:410px){.lp-hero-copy h1{font-size:2.85rem}.lp-hero-visual{height:315px}.lp-hero-products{width:390px;height:325px}.lp-footer-grid{grid-template-columns:1fr}.lp-footer-grid>div:last-child{grid-column:auto}}
/* ================================================================
YUMEKIBOU V27 — stronger reference match / larger hero composition
================================================================ */
/* Reference uses a tighter centered canvas rather than an overly wide
page. This makes the hero typography and product relate better. */
.lp-container{
width:min(1200px,calc(100% - 48px))!important;
}
/* Header refinement */
.lp-header{
height:70px!important;
}
.lp-logo{
width:166px!important;
}
.lp-nav{
gap:27px!important;
}
.lp-nav a,
.lp-login{
font-size:.72rem!important;
}
.lp-btn-header{
min-height:42px!important;
padding-inline:18px!important;
border-radius:12px!important;
}
/* Hero proportions closer to supplied design */
.lp-hero{
min-height:625px!important;
}
.lp-hero-grid{
min-height:625px!important;
grid-template-columns:.86fr 1.14fr!important;
gap:20px!important;
}
.lp-hero-copy{
padding:48px 0 82px!important;
}
.lp-hero-copy h1{
font-size:4.25rem!important;
line-height:.91!important;
max-width:590px!important;
}
.lp-hero-copy>p{
max-width:500px!important;
font-size:.84rem!important;
}
.lp-actions{
margin-top:25px!important;
gap:12px!important;
}
.lp-actions .lp-btn{
min-height:50px!important;
padding-inline:22px!important;
border-radius:13px!important;
font-size:.76rem!important;
}
.lp-actions .lp-btn:first-child{
background:linear-gradient(135deg,#5f873c 0%,#87aa59 100%)!important;
border:1px solid rgba(70,111,42,.14)!important;
box-shadow:0 12px 26px rgba(79,124,48,.19)!important;
}
.lp-actions .lp-btn-white{
border:1px solid rgba(201,215,195,.95)!important;
box-shadow:0 10px 22px rgba(7,26,43,.065)!important;
}
/* Make the supplied transparent PNG the major hero visual.
The asset is portrait shaped, so the previous fixed height made
the bottle group appear too narrow. We intentionally allow it
to extend vertically and anchor the wood stage at the hero base. */
.lp-hero-visual{
height:625px!important;
overflow:visible!important;
}
.lp-hero-products{
width:auto!important;
height:700px!important;
max-width:none!important;
max-height:none!important;
right:-18px!important;
bottom:-58px!important;
object-fit:contain!important;
object-position:center bottom!important;
filter:drop-shadow(0 26px 24px rgba(39,65,35,.15))!important;
}
/* Keep hero product visually above background while avoiding any card. */
.lp-hero-visual::before{
content:"";
position:absolute;
z-index:1;
width:490px;
height:180px;
right:0;
bottom:34px;
border-radius:50%;
background:radial-gradient(ellipse,rgba(89,117,68,.15),rgba(89,117,68,0) 70%);
filter:blur(10px);
pointer-events:none;
}
/* Statistics overlap the hero like the reference. */
.lp-stat-section{
margin-top:-34px!important;
}
.lp-stats{
border-radius:15px!important;
box-shadow:0 18px 38px rgba(15,75,45,.18)!important;
}
/* Keep content closer together like the reference */
.lp-about{
padding-top:74px!important;
padding-bottom:58px!important;
}
.lp-products{
padding-top:42px!important;
padding-bottom:54px!important;
}
.lp-how{
padding-top:50px!important;
padding-bottom:61px!important;
}
/* More refined product cards */
.lp-product-card{
border-radius:18px!important;
border-color:#d9e4d5!important;
box-shadow:0 12px 30px rgba(7,26,43,.05)!important;
}
.lp-product-media{
background:
radial-gradient(circle at 50% 38%,rgba(255,255,255,.72),transparent 48%),
linear-gradient(145deg,#edf4e6,#e3edd9)!important;
}
.lp-member-price{
border-radius:13px!important;
padding:14px 15px!important;
}
.lp-member-price strong{
font-size:1.38rem!important;
}
.lp-member-price em{
background:linear-gradient(135deg,#638941,#87a95d)!important;
box-shadow:0 5px 12px rgba(80,124,49,.14);
}
/* Slightly more luxurious How It Works row */
.lp-step-row{
gap:17px!important;
}
.lp-step-row article{
position:relative;
}
.lp-step-row article>img{
border-radius:22px!important;
box-shadow:
0 9px 22px rgba(56,84,42,.12),
inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.lp-step-row article strong{
font-size:.72rem!important;
}
.lp-step-row article p{
font-size:.55rem!important;
}
.lp-step-arrow{
opacity:.72;
}
/* NEW lower CTA image:
use the second family image as the full-card visual with a long
green gradient. No duplicated family and no visible vertical seam. */
.lp-join-card{
display:block!important;
min-height:320px!important;
position:relative!important;
overflow:hidden!important;
isolation:isolate;
background:
linear-gradient(
90deg,
rgba(5,54,36,.06) 0%,
rgba(5,54,36,.08) 26%,
rgba(5,65,42,.48) 43%,
rgba(7,72,46,.90) 58%,
rgba(20,80,49,.98) 74%,
rgba(42,91,47,1) 100%
),
url("/public/yumekibou/landing/family-cta-second.webp") center/cover no-repeat!important;
}
.lp-join-card::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(2,40,27,.06));
pointer-events:none;
}
.lp-join-family{
display:none!important;
}
.lp-join-copy{
width:58%!important;
min-height:320px!important;
margin-left:auto!important;
padding:48px 54px 46px 34px!important;
position:relative;
z-index:2;
}
.lp-join-copy h2{
max-width:600px!important;
font-size:2.08rem!important;
}
.lp-join-copy p{
max-width:560px!important;
}
.lp-join-actions .lp-btn{
min-height:48px!important;
border-radius:12px!important;
}
.lp-btn-dark-outline{
background:rgba(5,52,35,.18)!important;
border-color:rgba(255,255,255,.42)!important;
}
.lp-btn-dark-outline:hover{
background:rgba(255,255,255,.08)!important;
}
/* Support area — keep custom art but make it feel less like icon cards */
.lp-contact-grid article{
padding:18px!important;
border-radius:18px!important;
box-shadow:0 10px 26px rgba(7,26,43,.04)!important;
}
.lp-contact-grid article>img{
border-radius:22px!important;
}
/* Large desktop: product should remain visually dominant. */
@media(min-width:1350px){
.lp-container{
width:min(1240px,calc(100% - 72px))!important;
}
.lp-hero{
min-height:650px!important;
}
.lp-hero-grid{
min-height:650px!important;
}
.lp-hero-visual{
height:650px!important;
}
.lp-hero-products{
height:735px!important;
right:-8px!important;
bottom:-64px!important;
}
.lp-hero-copy h1{
font-size:4.45rem!important;
}
}
/* Tablet */
@media(max-width:1000px){
.lp-container{
width:min(940px,calc(100% - 38px))!important;
}
.lp-hero{
min-height:590px!important;
}
.lp-hero-grid{
min-height:590px!important;
grid-template-columns:.92fr 1.08fr!important;
}
.lp-hero-visual{
height:590px!important;
}
.lp-hero-products{
height:650px!important;
right:-58px!important;
bottom:-52px!important;
}
}
/* Mobile hero remains large, but never clips the product. */
@media(max-width:820px){
.lp-container{
width:min(100% - 30px,720px)!important;
}
.lp-hero{
min-height:auto!important;
}
.lp-hero-grid{
min-height:0!important;
}
.lp-hero-copy{
padding:42px 0 6px!important;
}
.lp-hero-copy h1{
font-size:4rem!important;
max-width:none!important;
}
.lp-hero-visual{
height:500px!important;
overflow:hidden!important;
}
.lp-hero-products{
left:50%!important;
right:auto!important;
width:auto!important;
height:535px!important;
bottom:-38px!important;
transform:translateX(-50%)!important;
}
.lp-stat-section{
margin-top:-12px!important;
}
.lp-join-card{
min-height:540px!important;
background:
linear-gradient(
180deg,
rgba(5,54,36,.02) 0%,
rgba(5,54,36,.08) 36%,
rgba(7,71,46,.85) 63%,
rgba(24,81,48,.98) 100%
),
url("/public/yumekibou/landing/family-cta-second.webp") 39% center/cover no-repeat!important;
}
.lp-join-copy{
width:100%!important;
min-height:540px!important;
justify-content:flex-end!important;
padding:270px 28px 32px!important;
margin:0!important;
}
}
@media(max-width:600px){
.lp-container{
width:calc(100% - 26px)!important;
}
.lp-hero-copy h1{
font-size:3.15rem!important;
}
.lp-hero-visual{
height:390px!important;
}
.lp-hero-products{
height:430px!important;
bottom:-32px!important;
}
.lp-actions .lp-btn{
min-height:48px!important;
}
.lp-join-card{
min-height:500px!important;
}
.lp-join-copy{
min-height:500px!important;
padding:245px 20px 27px!important;
}
}
@media(max-width:410px){
.lp-hero-copy h1{
font-size:2.8rem!important;
}
.lp-hero-visual{
height:350px!important;
}
.lp-hero-products{
height:385px!important;
bottom:-28px!important;
}
}
/* ================================================================
YUMEKIBOU V29 — matched product artwork + improved readability
================================================================ */
/* Keep both generated product showcase artworks identical in footprint. */
.lp-product-showcase-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:22px!important;
}
.lp-product-showcase-card{
aspect-ratio:1586 / 992!important;
border-radius:22px!important;
border:1px solid #d9e3d4!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 16px 36px rgba(18,43,30,.075)!important;
}
.lp-product-showcase-card img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* More readable global landing typography on desktop. */
.lp-kicker{
font-size:.70rem!important;
letter-spacing:.14em!important;
}
.lp-nav a,
.lp-login{
font-size:.82rem!important;
}
.lp-hero-copy>p{
max-width:560px!important;
font-size:1.03rem!important;
line-height:1.72!important;
}
.lp-hero-features{
font-size:.78rem!important;
gap:22px!important;
}
.lp-hero-features .icon{
width:18px!important;
height:18px!important;
}
.lp-stats small{
font-size:.66rem!important;
line-height:1.35!important;
}
.lp-about-copy>p{
font-size:.94rem!important;
line-height:1.72!important;
}
.lp-about-values strong{
font-size:.76rem!important;
line-height:1.35!important;
}
.lp-about-values small{
font-size:.64rem!important;
line-height:1.48!important;
}
.lp-inline-link{
font-size:.75rem!important;
}
.lp-how-intro{
max-width:790px!important;
font-size:.88rem!important;
line-height:1.68!important;
}
.lp-step-row article strong{
font-size:.81rem!important;
line-height:1.35!important;
}
.lp-step-row article p{
font-size:.66rem!important;
line-height:1.55!important;
}
.lp-benefit-items strong{
font-size:.72rem!important;
}
.lp-benefit-items p{
font-size:.61rem!important;
line-height:1.5!important;
}
.lp-join-copy p{
font-size:.78rem!important;
line-height:1.62!important;
}
.lp-contact-heading p{
font-size:.76rem!important;
line-height:1.6!important;
}
.lp-contact-grid strong{
font-size:.78rem!important;
}
.lp-contact-grid p{
font-size:.64rem!important;
line-height:1.5!important;
}
.lp-contact-grid small{
font-size:.56rem!important;
line-height:1.45!important;
}
.lp-footer strong{
font-size:.66rem!important;
}
.lp-footer a,
.lp-footer-brand p,
.lp-footer p{
font-size:.61rem!important;
line-height:1.55!important;
}
.lp-footer-bottom{
font-size:.55rem!important;
}
/* The product section itself should feel like a marketing feature, not thumbnails. */
.lp-products{
padding-bottom:66px!important;
}
.lp-section-heading{
margin-bottom:30px!important;
}
.lp-section-heading h2{
font-size:2.85rem!important;
}
@media(max-width:1000px){
.lp-product-showcase-grid{
grid-template-columns:1fr!important;
gap:18px!important;
}
.lp-product-showcase-card{
max-width:820px;
width:100%;
margin-inline:auto;
}
.lp-hero-copy>p{
font-size:.94rem!important;
}
.lp-about-copy>p{
font-size:.88rem!important;
}
}
@media(max-width:820px){
.lp-nav a{
font-size:.82rem!important;
}
.lp-hero-copy>p{
font-size:.90rem!important;
}
.lp-hero-features{
font-size:.72rem!important;
}
.lp-about-copy>p{
font-size:.84rem!important;
}
.lp-about-values strong{
font-size:.72rem!important;
}
.lp-about-values small{
font-size:.62rem!important;
}
.lp-how-intro{
font-size:.82rem!important;
}
.lp-step-row article strong{
font-size:.78rem!important;
}
.lp-step-row article p{
font-size:.64rem!important;
}
}
@media(max-width:600px){
.lp-section-heading h2{
font-size:2.15rem!important;
}
.lp-product-showcase-card{
border-radius:16px!important;
}
.lp-hero-copy>p,
.lp-about-copy>p,
.lp-how-intro{
font-size:.82rem!important;
}
.lp-hero-features{
font-size:.70rem!important;
}
.lp-about-values strong,
.lp-step-row article strong{
font-size:.74rem!important;
}
.lp-about-values small,
.lp-step-row article p,
.lp-benefit-items p,
.lp-contact-grid p{
font-size:.61rem!important;
}
}
/* ================================================================
YUMEKIBOU V30 — mobile-first hero refinement
================================================================ */
@media(max-width:820px){
.lp-hero{
min-height:0!important;
overflow:visible!important;
padding-bottom:0!important;
}
.lp-hero-bg{
background-position:55% top!important;
background-size:auto 100%!important;
}
.lp-hero-grid{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
gap:0!important;
padding-top:0!important;
}
.lp-hero-copy{
width:100%!important;
text-align:left!important;
padding:34px 0 4px!important;
}
.lp-kicker{
font-size:.68rem!important;
line-height:1.35!important;
}
.lp-hero-copy h1{
max-width:100%!important;
margin:8px 0 14px!important;
font-size:3.35rem!important;
line-height:.93!important;
letter-spacing:-.055em!important;
}
.lp-hero-copy>p{
max-width:100%!important;
margin:0!important;
font-size:.91rem!important;
line-height:1.64!important;
text-align:left!important;
color:#496171!important;
}
.lp-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
margin-top:20px!important;
justify-content:stretch!important;
}
.lp-actions .lp-btn{
width:100%!important;
min-height:50px!important;
padding:0 13px!important;
border-radius:13px!important;
font-size:.76rem!important;
white-space:nowrap!important;
}
.lp-hero-features{
width:100%!important;
max-width:none!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
margin:17px 0 0!important;
text-align:center!important;
}
.lp-hero-features>span{
min-width:0!important;
min-height:62px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
padding:8px 5px!important;
border:1px solid rgba(125,155,94,.20)!important;
border-radius:12px!important;
background:rgba(255,255,255,.55)!important;
backdrop-filter:blur(4px)!important;
color:#3f5963!important;
font-size:.62rem!important;
line-height:1.25!important;
box-shadow:0 7px 18px rgba(55,84,38,.045)!important;
}
.lp-hero-features .icon{
width:18px!important;
height:18px!important;
flex:0 0 auto!important;
}
.lp-hero-visual{
order:2!important;
width:100%!important;
height:330px!important;
margin-top:4px!important;
overflow:hidden!important;
position:relative!important;
}
.lp-hero-products{
content:url('/public/yumekibou/landing/hero-products-mobile.png')!important;
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:-18px!important;
width:min(420px,94vw)!important;
height:auto!important;
max-width:none!important;
transform:translateX(-50%)!important;
object-fit:contain!important;
filter:drop-shadow(0 18px 18px rgba(42,68,34,.16))!important;
}
.lp-stat-section{
margin-top:0!important;
padding-top:0!important;
transform:translateY(-6px)!important;
}
.lp-stats{
border-radius:15px!important;
box-shadow:0 13px 30px rgba(17,75,45,.18)!important;
}
}
@media(max-width:600px){
.lp-container{
width:calc(100% - 28px)!important;
}
.lp-header{
height:62px!important;
}
.lp-logo{
width:154px!important;
}
.lp-menu{
width:42px!important;
height:42px!important;
}
.lp-nav{
top:62px!important;
}
.lp-hero-copy{
padding-top:28px!important;
}
.lp-hero-copy h1{
font-size:3.05rem!important;
line-height:.94!important;
}
.lp-hero-copy>p{
font-size:.86rem!important;
line-height:1.62!important;
}
.lp-actions{
grid-template-columns:1fr 1fr!important;
}
.lp-actions .lp-btn{
min-height:48px!important;
font-size:.72rem!important;
}
.lp-hero-features>span{
min-height:58px!important;
font-size:.58rem!important;
}
.lp-hero-visual{
height:300px!important;
margin-top:2px!important;
}
.lp-hero-products{
width:min(380px,93vw)!important;
bottom:-15px!important;
}
.lp-stats article{
min-height:70px!important;
padding:11px 12px!important;
}
.lp-stats strong{
font-size:1.28rem!important;
}
.lp-stats small{
font-size:.52rem!important;
line-height:1.25!important;
}
}
@media(max-width:420px){
.lp-hero-copy h1{
font-size:2.72rem!important;
}
.lp-actions{
grid-template-columns:1fr!important;
}
.lp-actions .lp-btn{
min-height:47px!important;
}
.lp-hero-features{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
}
.lp-hero-features>span{
min-height:56px!important;
padding:7px 3px!important;
font-size:.54rem!important;
}
.lp-hero-visual{
height:272px!important;
}
.lp-hero-products{
width:min(350px,94vw)!important;
bottom:-13px!important;
}
.lp-stats article{
padding:10px!important;
}
.lp-stats article>span{
width:28px!important;
height:28px!important;
}
}
/* ================================================================
YUMEKIBOU V31 — mobile product-first hero
================================================================ */
/* The three generic hero benefit chips were removed from markup. */
@media(max-width:820px){
.lp-hero{
overflow:hidden!important;
padding:0!important;
}
.lp-hero-grid{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
gap:0!important;
padding-top:0!important;
}
/* Product is the first thing visitors see on mobile. */
.lp-hero-visual{
order:1!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:18px 0 2px!important;
overflow:visible!important;
display:block!important;
position:relative!important;
}
.lp-hero-visual::before{
display:none!important;
}
.lp-hero-products{
content:url('/public/yumekibou/landing/hero-products-mobile.png')!important;
position:relative!important;
inset:auto!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
top:auto!important;
display:block!important;
width:min(410px,94vw)!important;
height:auto!important;
max-width:100%!important;
max-height:none!important;
margin:0 auto!important;
transform:none!important;
object-fit:contain!important;
object-position:center!important;
filter:drop-shadow(0 17px 18px rgba(42,68,34,.14))!important;
}
/* Marketing message follows the product instead of fighting for space. */
.lp-hero-copy{
order:2!important;
width:100%!important;
padding:17px 0 28px!important;
text-align:center!important;
}
.lp-hero-copy .lp-kicker{
display:block!important;
margin:0 auto 7px!important;
font-size:.68rem!important;
line-height:1.35!important;
text-align:center!important;
}
.lp-hero-copy h1{
max-width:100%!important;
margin:0 0 13px!important;
font-size:3.25rem!important;
line-height:.92!important;
letter-spacing:-.055em!important;
text-align:center!important;
}
.lp-hero-copy>p{
max-width:560px!important;
margin:0 auto!important;
font-size:.9rem!important;
line-height:1.62!important;
color:#496171!important;
text-align:center!important;
}
.lp-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
margin:19px auto 0!important;
width:100%!important;
max-width:520px!important;
}
.lp-actions .lp-btn{
width:100%!important;
min-height:50px!important;
padding:0 14px!important;
border-radius:13px!important;
font-size:.75rem!important;
white-space:nowrap!important;
}
.lp-stat-section{
margin-top:0!important;
padding-top:0!important;
transform:none!important;
}
}
@media(max-width:600px){
.lp-hero-visual{
padding-top:14px!important;
}
.lp-hero-products{
width:min(385px,94vw)!important;
}
.lp-hero-copy{
padding:14px 0 24px!important;
}
.lp-hero-copy h1{
font-size:2.95rem!important;
}
.lp-hero-copy>p{
font-size:.86rem!important;
line-height:1.62!important;
}
}
@media(max-width:420px){
.lp-hero-products{
width:min(350px,94vw)!important;
}
.lp-hero-copy h1{
font-size:2.68rem!important;
}
.lp-actions{
grid-template-columns:1fr!important;
gap:9px!important;
}
.lp-actions .lp-btn{
min-height:48px!important;
}
}
/* ================================================================
YUMEKIBOU V32 — desktop stats polish + cleaner primary CTA
================================================================ */
/* The primary hero CTA intentionally has no arrow/icon. */
.lp-actions .lp-btn:first-child{
gap:0!important;
}
/* Desktop rewards strip: stronger hierarchy without changing content. */
@media(min-width:821px){
.lp-stat-section{
margin-top:-36px!important;
}
.lp-stats{
overflow:hidden!important;
border:1px solid rgba(157,189,125,.20)!important;
border-radius:18px!important;
background:
radial-gradient(circle at 9% 20%,rgba(171,203,120,.10),transparent 22%),
linear-gradient(100deg,#06472f 0%,#0b5b38 48%,#245c30 100%)!important;
box-shadow:
0 18px 42px rgba(16,76,45,.18),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.lp-stats article{
min-height:96px!important;
grid-template-columns:52px minmax(0,1fr)!important;
gap:15px!important;
padding:18px 24px!important;
position:relative!important;
border-right:1px solid rgba(255,255,255,.12)!important;
transition:background .18s ease,transform .18s ease!important;
}
.lp-stats article:last-child{
border-right:0!important;
}
.lp-stats article:hover{
background:rgba(255,255,255,.035)!important;
}
.lp-stats article>span{
width:48px!important;
height:48px!important;
display:grid!important;
place-items:center!important;
border-radius:15px!important;
color:#d5e9a6!important;
background:rgba(207,231,169,.10)!important;
border:1px solid rgba(216,238,183,.16)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.lp-stats article>span svg{
width:25px!important;
height:25px!important;
stroke-width:1.8!important;
}
.lp-stats strong{
display:block!important;
margin:0!important;
color:#fff!important;
font-size:1.9rem!important;
line-height:.98!important;
letter-spacing:-.035em!important;
font-weight:850!important;
}
.lp-stats small{
display:block!important;
margin-top:7px!important;
color:#d5e0d8!important;
font-size:.66rem!important;
line-height:1.3!important;
font-weight:650!important;
letter-spacing:.005em!important;
}
}
/* Keep tablet/mobile 2 × 2 statistics compact and readable. */
@media(max-width:820px){
.lp-stats{
border-radius:17px!important;
background:linear-gradient(100deg,#06472f,#1d5c31)!important;
box-shadow:0 13px 30px rgba(15,74,43,.15)!important;
}
.lp-stats article>span{
color:#d2e79f!important;
}
}