@charset "utf-8";

:root{
  --page-bg:#f6d3e0;      
  --night:#080d13;        
  --pink-top:#fce5ee;     
  --ink:#4a3640;          
  --rose:#c8336f;         
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

html{background:var(--page-bg)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block}
h1,h2,p{margin:0}

.page{
  min-height:100vh;
  min-height:100dvh;
  background:var(--page-bg);
}
.wrap{
  width:100%;
  max-width:480px;
  margin:0 auto;
}
.stage{
  
  --u:calc(min(100vw, 480px) / 430);
  position:relative;
  overflow:hidden;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","BIZ UDPGothic",sans-serif;
  font-weight:500;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.nb{display:inline-block}   

.hero{
  position:relative;
  height:calc(452 * var(--u));
  background:var(--night);
}
.hero-photo{
  position:absolute;
  left:0; right:0; bottom:0;
  height:calc(287 * var(--u));   
}
.hero-photo img{width:100%;height:100%;object-fit:cover}

.hero-photo::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:calc(56 * var(--u));
  background:linear-gradient(var(--night), rgba(8,13,19,0));
}

.title{
  position:absolute;
  left:0; right:0;
  top:calc(30 * var(--u));
  text-align:center;
  font-weight:800;
  font-size:calc(32 * var(--u));
  line-height:1.28;
  letter-spacing:.02em;
  color:#fff;
  transform:skewX(-7deg);
  text-shadow:
    0 0 calc(2 * var(--u)) #fff,
    0 0 calc(7 * var(--u)) #ff5fa8,
    0 0 calc(14 * var(--u)) #ff4f9a,
    0 0 calc(24 * var(--u)) rgba(255,79,154,.55);
}
.t-line{display:block;white-space:nowrap}
.t-heart{
  display:inline-block;
  width:calc(38 * var(--u));
  height:auto;
  margin-left:calc(4 * var(--u));
  vertical-align:calc(-2 * var(--u));
  transform:rotate(12deg);
  fill:none;
  stroke:#fff;
  stroke-width:2.6;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 calc(3 * var(--u)) #ff5fa8) drop-shadow(0 0 calc(7 * var(--u)) #ff4f9a);
}
.t-rule{
  position:absolute;
  left:calc(35 * var(--u));
  top:calc(116 * var(--u));
  width:calc(360 * var(--u));
  height:calc(14 * var(--u));
  overflow:visible;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 calc(3 * var(--u)) #ff6fae);
}
.lead{
  position:absolute;
  left:0; right:0;
  top:calc(136 * var(--u));
  text-align:center;
  font-weight:800;
  font-size:calc(16 * var(--u));
  line-height:1.6;
  color:#fff;
  transform:skewX(-7deg);
  text-shadow:0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.7), 0 0 calc(10 * var(--u)) rgba(255,95,168,.55);
  white-space:nowrap;
}

.neon{
  position:absolute;
  height:auto;
  fill:none;
  stroke:#fff;
  stroke-width:2.4;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 calc(2 * var(--u)) #ff7ab8) drop-shadow(0 0 calc(6 * var(--u)) #ff4f9a);
}
.neon-1{left:calc(372 * var(--u)); top:calc(262 * var(--u)); width:calc(30 * var(--u)); transform:rotate(-12deg)}
.neon-2{left:calc(396 * var(--u)); top:calc(232 * var(--u)); width:calc(20 * var(--u)); transform:rotate(10deg)}
.twinkle{
  position:absolute;
  height:auto;
  fill:#fff;
  filter:drop-shadow(0 0 calc(4 * var(--u)) #fff);
}
.tw-1{left:calc(22 * var(--u)); top:calc(64 * var(--u)); width:calc(13 * var(--u))}
.tw-2{left:calc(396 * var(--u)); top:calc(40 * var(--u)); width:calc(10 * var(--u))}
.tw-3{left:calc(30 * var(--u)); top:calc(206 * var(--u)); width:calc(11 * var(--u))}

.pink > .wave{
  left:0; right:0;
  top:calc(-48 * var(--u));
  width:100%;
  height:calc(50 * var(--u));
  overflow:visible;
}
.wave-fill{fill:var(--pink-top)}
.wave-glow{filter:drop-shadow(0 0 3px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,170,205,.8))}
.wave-line{
  fill:none;
  stroke:#fff;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}

.pink{
  position:relative;
  
  margin-top:calc(-28 * var(--u));
  
  padding:calc(14 * var(--u)) calc(22 * var(--u)) calc(72 * var(--u));
  
  background:
    linear-gradient(var(--pink-top), rgba(252,229,238,0)) center top / 100% calc(40 * var(--u)) no-repeat,
    url(assets/bg-plain.webp) center top / 100% 100% no-repeat,
    var(--pink-top);
}
.pink > :not(.deco), .cta > :not(.deco), .story > :not(.deco){position:relative;z-index:1}

.p-ribbon > .deco, .p-spark > .deco{z-index:-1}

.deco{position:absolute;height:auto;pointer-events:none;z-index:0}
.d-crown{left:calc(4 * var(--u)); top:calc(2 * var(--u)); width:calc(50 * var(--u))}
.d-spark-2{left:calc(2 * var(--u)); top:calc(58 * var(--u)); width:calc(34 * var(--u))}
.d-spark-3{right:calc(2 * var(--u)); top:calc(-6 * var(--u)); width:calc(36 * var(--u))}

.profile{
  display:flex;
  align-items:center;
  gap:calc(16 * var(--u));
  padding-left:calc(34 * var(--u));
}
.avatar{
  flex:none;
  width:calc(104 * var(--u));
  height:calc(104 * var(--u));
  border-radius:50%;
  overflow:hidden;
  border:calc(4 * var(--u)) solid #fff;
  box-shadow:0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(214,96,146,.3);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.bubble{
  position:relative;
  flex:1;
  padding:calc(10 * var(--u)) calc(12 * var(--u));
  background:rgba(255,255,255,.88);
  border-radius:calc(16 * var(--u));
  box-shadow:0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(214,96,146,.18);
  font-weight:700;
  font-size:max(12.5px, calc(13 * var(--u)));
  line-height:1.6;
  color:#3f2d35;
}
.bubble::before{   
  content:"";
  position:absolute;
  left:calc(-6 * var(--u));
  top:50%;
  width:calc(14 * var(--u));
  height:calc(14 * var(--u));
  background:rgba(255,255,255,.88);
  transform:translateY(-50%) rotate(45deg);
  border-radius:calc(2 * var(--u));
}

.cta{
  position:relative;
  margin-top:calc(26 * var(--u));
  text-align:center;
}
.d-heart-l{left:calc(-16 * var(--u)); top:calc(-14 * var(--u)); width:calc(54 * var(--u))}
.d-heart-r{right:calc(-18 * var(--u)); top:calc(-20 * var(--u)); width:calc(66 * var(--u))}
.d-spark-1{left:calc(-18 * var(--u)); top:calc(52 * var(--u)); width:calc(38 * var(--u))}
.consult{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(8 * var(--u));
  top:calc(2.7 * var(--u));
}

.consult-txt{
  display:inline-flex;
  align-items:center;
  gap:calc(6 * var(--u));
  font-weight:800;
  font-size:calc(18 * var(--u));
  line-height:1.4;
  color:var(--rose);
  text-shadow:0 0 calc(4 * var(--u)) #fff, 0 0 calc(8 * var(--u)) rgba(255,255,255,.8);
}
.ico-talk{width:calc(21 * var(--u));height:auto;fill:none;stroke:var(--rose);stroke-width:2;stroke-linejoin:round}
.burst{width:calc(24 * var(--u));height:auto;fill:none;stroke:#ec7fab;stroke-width:2.2;stroke-linecap:round}

.line-btn{
  display:flex;
  align-items:center;
  gap:calc(9 * var(--u));
  width:100%;
  max-width:calc(380 * var(--u));
  margin:calc(10 * var(--u)) auto 0;
  
  padding:calc(12 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
  border-radius:999px;
  background:linear-gradient(#16d066, #06c755 55%, #05b84e);
  
  box-shadow:0 calc(4 * var(--u)) 0 #049a40, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(6,150,70,.28);
  height:calc(65.4 * var(--u));
  top:calc(8 * var(--u));
}
.line-btn:active{transform:translateY(calc(3 * var(--u)));box-shadow:0 calc(1 * var(--u)) 0 #049a40, 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(6,150,70,.25)}
.line-ico{flex:none;width:calc(36 * var(--u));height:auto}
.line-txt{
  flex:1;
  min-width:0;
  font-weight:800;
  font-size:calc(15.5 * var(--u));
  line-height:1.3;
  color:#fff;
  
  text-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,80,35,.5);
  white-space:nowrap;
}
.chev{flex:none;width:calc(9 * var(--u));height:calc(15 * var(--u));fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

.story{
  position:relative;
  
  margin-top:calc(58 * var(--u));
  text-align:center;
}
.d-heart-pink{left:calc(-8 * var(--u)); top:calc(-14 * var(--u)); width:calc(34 * var(--u))}
.story-h{
  display:inline-block;
  margin-bottom:calc(18 * var(--u));
  padding:0 calc(6 * var(--u)) calc(6 * var(--u));
  font-weight:800;
  font-size:calc(19 * var(--u));
  line-height:1.4;
  color:var(--rose);
  background:linear-gradient(90deg, rgba(236,127,171,0), rgba(236,127,171,.75) 20%, rgba(236,127,171,.75) 80%, rgba(236,127,171,0)) left bottom / 100% calc(2 * var(--u)) no-repeat;
  top:calc(-1.8 * var(--u));
}
.story p{
  margin-bottom:1.15em;
  font-size:max(14px, calc(14.5 * var(--u)));
  line-height:1.95;
  
  text-shadow:0 0 3px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.6);
}
.story p:last-of-type{margin-bottom:0}
.p-ribbon, .p-spark{position:relative}

.d-ribbon{right:calc(-34 * var(--u)); top:calc(-40 * var(--u)); width:calc(96 * var(--u))}
.d-petals-l{left:calc(-22 * var(--u)); top:calc(70 * var(--u)); width:calc(70 * var(--u))}
.d-spark-4{left:calc(-16 * var(--u)); top:calc(-10 * var(--u)); width:calc(36 * var(--u))}
.d-spark-5{right:calc(-10 * var(--u)); top:calc(40 * var(--u)); width:calc(28 * var(--u))}

.d-roses{left:0; bottom:calc(-26 * var(--u)); width:calc(126 * var(--u))}
.d-petals-r{right:calc(4 * var(--u)); bottom:calc(2 * var(--u)); width:calc(84 * var(--u))}