:root{
  --bg:#ffffff;
  --max:480px;
  --line-green:#06C755;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
.section{width:100%;display:block;margin:0;padding:0}
.section img{width:100%;height:auto;display:block}

/* Floating LINE button */
.fab{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  z-index:9999;
  width:min(92vw, 420px);
  max-width:420px;
  text-decoration:none;
  border-radius:18px;
  background:var(--line-green);
  color:#fff;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px;
  font-weight:800;
  letter-spacing:.02em;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}

/* Icon */
.fab .icon{
  width:26px;
  height:26px;
  border-radius:8px;
  background:rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:11px;
  line-height:1;
}
.fab .label{font-size:16px}

/* breathing */
@keyframes breathe{
  0%{ transform:translateX(-50%) scale(1); box-shadow:0 10px 30px rgba(0,0,0,.18); }
  50%{ transform:translateX(-50%) scale(1.035); box-shadow:0 14px 40px rgba(0,0,0,.22); }
  100%{ transform:translateX(-50%) scale(1); box-shadow:0 10px 30px rgba(0,0,0,.18); }
}
.fab{ animation:breathe 1.8s ease-in-out infinite; }

/* press feedback */
.fab:active{
  transform:translateX(-50%) scale(.985);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* prevent FAB covering */
.spacer{height:96px}

@media (max-width:360px){
  .fab{border-radius:16px;padding:13px 14px}
  .fab .label{font-size:15px}
}