:root{--bg:#F4E4D4;--ink:#44342C;--sub:#5C4C44;--accent:#DC843C;--white:#FCFCFC;--line:#E6D9CC;--tint:#FBF1E7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--accent)}
img{max-width:100%}
.maru{font-family:"Zen Maru Gothic",sans-serif;font-weight:700}
.wrap{max-width:1280px;margin:0 auto;padding:0 64px}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:48px;height:48px;border-radius:12px;box-shadow:0 2px 6px rgba(68,52,44,.25),0 0 0 1px rgba(68,52,44,.08)}
.brand span{font:700 30px "Zen Maru Gothic";letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:36px;font-weight:700;font-size:17px}
.nav a{text-decoration:none}
.btn-dark{padding:12px 24px;border-radius:999px;background:var(--ink);color:var(--white)!important}
.btn-dark:hover{background:var(--accent);color:var(--ink)!important}

/* common */
.pill{display:inline-flex;padding:8px 22px;border-radius:999px;background:var(--white);border:3px solid var(--ink);font-weight:700;font-size:17px}
.hl{display:inline-block;padding:2px 26px 10px;border-radius:22px;background:var(--accent);border:5px solid var(--ink);box-shadow:0 9px 0 var(--ink);transform:rotate(-2.5deg)}
.hl.r{transform:rotate(2deg)}
.lead{margin:0;font-size:19px;line-height:1.8;color:var(--sub);text-wrap:pretty}
.phone{padding:8px;border-radius:42px;background:var(--ink);box-shadow:12px 14px 0 rgba(68,52,44,.16)}
.phone img{display:block;width:100%;border-radius:34px}
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stores img{display:block;height:56px;border-radius:10px}
.sec-title{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.sec-title h2{margin:0;font:700 46px/1.3 "Zen Maru Gothic"}
.sec-title p{margin:0;font-size:18px;color:var(--sub)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:40px;align-items:center;padding:60px 0 100px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;font:700 68px/1.2 "Zen Maru Gothic";letter-spacing:.02em}
.hero-phones{position:relative;height:640px}
.hero-phones .p1{position:absolute;left:0;top:80px;width:270px;transform:rotate(-5deg)}
.hero-phones .p2{position:absolute;left:200px;top:20px;width:250px;transform:rotate(8deg)}

/* features */
.features{padding:100px 0;display:flex;flex-direction:column;gap:110px}
.feature{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:80px;align-items:center;padding:0 60px}
.feature.rev{grid-template-columns:360px minmax(0,1fr)}
.feature.rev .feature-img{order:-1}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.feature-copy .tag{display:inline-flex;padding:6px 18px;border-radius:999px;background:var(--bg);border:3px solid var(--ink);font-weight:700;font-size:16px}
.feature-copy h3{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font:700 50px/1.25 "Zen Maru Gothic"}
.feature-copy h3 .hl{padding:0 18px 6px;border-radius:16px;border-width:4px;box-shadow:0 7px 0 var(--ink);transform:rotate(-2deg)}
.feature-copy h3 .hl.r{transform:rotate(2deg)}
.feature-img{width:300px;justify-self:center;transform:rotate(4deg)}
.feature.rev .feature-img{transform:rotate(-4deg)}
.feature-img .phone{box-shadow:12px 14px 0 rgba(68,52,44,.14)}

/* steps */
.steps{padding:100px 0;display:flex;flex-direction:column;gap:56px}
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.card{background:var(--white);border:4px solid var(--ink);border-radius:26px;box-shadow:0 7px 0 var(--ink);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.num{width:52px;height:52px;border-radius:50%;background:var(--accent);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 26px "Zen Maru Gothic"}
.card h4{margin:0;font:700 24px/1.4 "Zen Maru Gothic"}
.card p{margin:0;font-size:16px;line-height:1.8;color:var(--sub)}

/* pricing */
.pricing{padding:100px 0 0;scroll-margin-top:20px}
.pricing-head{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding-bottom:50px}
.pricing-head h2{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;font:700 56px/1.25 "Zen Maru Gothic"}
.pricing-head h2 .hl{padding:0 22px 8px;border-radius:18px;box-shadow:0 8px 0 var(--ink);transform:rotate(-2deg)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;padding:20px 76px 0;align-items:start}
.plan{position:relative;background:var(--white);border:4px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink);padding:40px;display:flex;flex-direction:column;gap:26px}
.plan.premium{border-width:5px;box-shadow:0 10px 0 var(--accent);transform:translateY(-14px)}
.plan .badge{position:absolute;top:-22px;right:32px;padding:6px 20px;border-radius:999px;background:var(--accent);border:4px solid var(--ink);font-weight:700;font-size:17px;transform:rotate(4deg)}
.plan-name{font:700 22px "Zen Maru Gothic"}
.premium .plan-name{color:var(--accent)}
.price{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.price b{font:700 60px/1 "Zen Maru Gothic"}
.price span{font-weight:700;font-size:18px;color:var(--sub)}
.yearly{align-self:flex-start;margin-top:8px;padding:4px 14px;border-radius:999px;background:var(--bg);font-weight:700;font-size:15px}
.plan hr{margin:0;border:0;height:3px;background:var(--line)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.plan li{display:flex;align-items:center;gap:12px;font-size:17px}
.plan li::before{content:"";width:26px;height:26px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.5l2.6 2.5L11 4.5' fill='none' stroke='%2344342C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat}
.premium li::before{background-color:var(--accent)}
.note{margin:46px auto 0;max-width:760px;text-align:center;font-size:17px;line-height:1.9;color:var(--sub);text-wrap:pretty}
.compare{margin:60px 76px 0;background:var(--white);border:4px solid var(--ink);border-radius:26px;overflow:hidden}
.compare table{width:100%;border-collapse:collapse;font-size:17px}
.compare th{background:var(--ink);color:var(--white);font:700 18px "Zen Maru Gothic";padding:18px 28px;text-align:center}
.compare th:first-child{text-align:left}
.compare th:last-child{background:var(--accent);color:var(--ink)}
.compare td{padding:16px 28px;border-top:2px solid var(--line);text-align:center;color:var(--sub)}
.compare td:first-child{text-align:left;font-weight:700;color:var(--ink)}
.compare td:last-child{font-weight:700;color:var(--ink);background:var(--tint)}

/* cta / footer */
.cta{margin:100px 0 80px;background:var(--accent);border:5px solid var(--ink);border-radius:36px;box-shadow:0 10px 0 var(--ink);padding:64px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta h2{margin:0 0 12px;font:700 44px/1.3 "Zen Maru Gothic"}
.cta p{margin:0;font-weight:700;font-size:18px}
.qrs{display:flex;gap:20px}
.qr{display:flex;flex-direction:column;align-items:center;gap:10px}
.qr .code{width:120px;height:120px;background:var(--white);border:4px solid var(--ink);border-radius:14px;padding:4px}
.qr .code img{display:block;width:100%;height:100%}
.qr .store{display:block;height:44px;border-radius:8px}
.cta .stores{display:none}
.footer{background:var(--ink);color:var(--bg);font-size:15px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:36px;padding-bottom:36px;flex-wrap:wrap}
.footer nav{display:flex;flex-wrap:wrap;gap:28px}
.footer a{color:var(--bg);text-decoration:none}.footer a:hover{color:var(--accent)}

/* /go download page */
.go{min-height:100svh;max-width:480px;margin:0 auto;padding:54px 28px 0;display:flex;flex-direction:column;align-items:center;gap:26px;overflow:hidden}
.go .brand img{width:76px;height:76px;border-radius:19px;box-shadow:0 4px 12px rgba(68,52,44,.25),0 0 0 1px rgba(68,52,44,.08)}
.go .brand div{display:flex;flex-direction:column;gap:4px}
.go .brand small{font-weight:700;font-size:14px;color:var(--sub)}
.go .brand b{font:700 40px/1 "Zen Maru Gothic";letter-spacing:.06em}
.go h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;font:700 30px/1.3 "Zen Maru Gothic";text-align:center}
.go h1 .hl{padding:0 16px 5px;border-radius:14px;border-width:4px;box-shadow:0 6px 0 var(--ink);transform:rotate(-2deg)}
.go-stores{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
.go-stores img{display:block;height:60px;border-radius:10px}
.go-stores p{margin:6px 0 0;font-weight:700;font-size:14px;color:var(--sub)}
.go-phones{position:relative;width:340px;height:300px;margin-top:16px}
.go-phones .phone{padding:5px;border-radius:28px;box-shadow:6px 8px 0 rgba(68,52,44,.16)}
.go-phones .phone img{border-radius:23px}
.go-phones .p1{position:absolute;left:20px;top:20px;width:160px;transform:rotate(-7deg)}
.go-phones .p2{position:absolute;left:182px;top:0;width:150px;transform:rotate(9deg)}

/* legal pages */
.legal-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:50px 0 30px}
.legal-head h1{margin:0;font:700 56px/1.2 "Zen Maru Gothic"}
.lang{padding:8px 18px;border-radius:999px;border:3px solid var(--ink);text-decoration:none;font-weight:700;font-size:16px}
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:20px 0 90px;align-items:start}
.toc{position:sticky;top:24px;background:var(--white);border:4px solid var(--ink);border-radius:24px;padding:24px 22px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 48px);overflow:auto}
.toc b{font:700 17px "Zen Maru Gothic"}
.toc a{font-size:14px;line-height:1.5;color:var(--sub);text-decoration:none}.toc a:hover{color:var(--accent)}
.doc{background:var(--white);border:4px solid var(--ink);border-radius:30px;box-shadow:0 8px 0 var(--ink);padding:52px 56px;display:flex;flex-direction:column;gap:48px;min-width:0}
.doc>p{margin:0;font-size:17px;line-height:2}
.doc section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:24px}
.doc h2{margin:0;display:flex;align-items:center;gap:14px;font:700 26px/1.4 "Zen Maru Gothic"}
.doc h2::before{content:"";width:10px;height:30px;border-radius:5px;background:var(--accent);flex:none}
.doc h3{margin:6px 0 0;font:700 19px "Zen Maru Gothic"}
.doc p{margin:0;font-size:16px;line-height:1.95;text-wrap:pretty}
.doc ol{margin:0;padding:0;list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:10px}
.doc ol>li{counter-increment:n;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.85}
.doc ol>li::before{content:counter(n);width:26px;height:26px;flex:none;margin-top:2px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;line-height:1}
.doc ol>li>div{display:flex;flex-direction:column;gap:6px}
.doc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.doc ul li{font-size:15px;line-height:1.8;color:var(--sub)}
.doc ul li::before{content:"・"}
.doc .tbl{border:3px solid var(--ink);border-radius:16px;overflow:auto}
.doc table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.doc th{background:var(--ink);color:var(--white);text-align:left;padding:12px 18px;white-space:nowrap}
.doc td{padding:12px 18px;border-top:2px solid var(--line)}
.doc a{color:#B8631F}
.notice{background:var(--accent);border:4px solid var(--ink);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.8}
.notice b{font:700 17px "Zen Maru Gothic"}

/* invite / in-app browser */
.mini{min-height:100svh;max-width:480px;margin:0 auto;padding:70px 28px 50px;display:flex;flex-direction:column;align-items:center;gap:28px;position:relative;overflow:hidden}
.mini .icon{width:88px;height:88px;border-radius:22px;box-shadow:0 4px 12px rgba(68,52,44,.25),0 0 0 1px rgba(68,52,44,.08)}
.mini h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font:700 30px/1.3 "Zen Maru Gothic";text-align:center}
.mini h1 small{font:700 14px "Zen Kaku Gothic New";color:var(--sub)}
.mini h1 .hl{padding:0 16px 5px;border-radius:14px;border-width:4px;box-shadow:0 6px 0 var(--ink);transform:rotate(-2deg)}
.code-box{width:100%;background:var(--white);border:4px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.code-box small{font-weight:700;font-size:13px;color:var(--sub)}
.code-box b{font:700 44px/1 "Zen Maru Gothic";letter-spacing:.18em}
.opening{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mini .help{margin:0;text-align:center;font-size:14px;line-height:1.8;color:var(--sub)}
.btn-main{width:100%;text-align:center;padding:18px 0;border-radius:999px;background:var(--accent);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);font:700 18px "Zen Maru Gothic";color:var(--ink);text-decoration:none;margin-top:auto}
.btn-main:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.tap{position:absolute;top:14px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tap span{margin-right:30px;padding:6px 16px;border-radius:999px;background:var(--accent);border:3px solid var(--ink);font-weight:700;font-size:15px;transform:rotate(-4deg)}
.inapp{padding-top:150px;gap:34px}
.inapp .brand img{width:76px;height:76px;border-radius:19px;box-shadow:0 4px 12px rgba(68,52,44,.25),0 0 0 1px rgba(68,52,44,.08)}
.inapp .brand div{display:flex;flex-direction:column;gap:4px}
.inapp .brand small{font-weight:700;font-size:14px;color:var(--sub)}
.inapp .brand b{font:700 40px/1 "Zen Maru Gothic";letter-spacing:.06em}
.step{width:100%;background:var(--white);border:4px solid var(--ink);border-radius:24px;box-shadow:0 6px 0 var(--ink);padding:20px;display:flex;align-items:center;gap:16px}
.step .num{flex:none}
.step div{display:flex;flex-direction:column;gap:6px}
.step small{font-weight:700;font-size:12px;color:var(--sub);letter-spacing:.1em}
.step p{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:700 19px "Zen Maru Gothic"}
.step mark{padding:2px 10px;border-radius:8px;background:var(--bg);color:var(--ink)}
.steps-col{width:100%;display:flex;flex-direction:column;gap:18px}

/* responsive */
@media (max-width:1024px){
  .wrap{padding:0 32px}
  .hero{grid-template-columns:1fr;padding-bottom:60px}
  .hero-phones{height:520px;max-width:460px;margin:0 auto;width:100%}
  .feature,.feature.rev{grid-template-columns:1fr;gap:48px;padding:0}
  .feature.rev .feature-img{order:0}
  .plans{padding:20px 0 0}
  .compare{margin:60px 0 0}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .nav a:not(.btn-dark){display:none}
  .brand span{font-size:24px}
  .btn-dark{padding:10px 18px;font-size:14px}
  .hero{padding-top:30px;gap:20px}
  .hero h1{font-size:40px;gap:10px}
  .hl{padding:0 16px 6px;border-width:4px;box-shadow:0 6px 0 var(--ink)}
  .lead{font-size:16px}
  .lead br{display:none}
  .stores img{height:48px}
  .hero-phones{height:420px;max-width:340px}
  .hero-phones .p1{width:190px;top:50px}
  .hero-phones .p2{width:175px;left:150px;top:0}
  .features,.steps{padding:70px 0;gap:70px}
  .sec-title h2{font-size:32px}
  .sec-title p{font-size:15px}
  .feature-copy h3{font-size:34px}
  .feature-img{width:230px}
  .steps-grid{grid-template-columns:1fr}
  .pricing-head h2{font-size:38px}
  .plans{grid-template-columns:1fr;gap:44px}
  .plan{padding:30px 24px}
  .plan.premium{transform:none;order:-1}
  .price b{font-size:48px}
  .compare{border-radius:20px}
  .compare table{font-size:14px}
  .compare th,.compare td{padding:12px 10px}
  .cta{flex-direction:column;align-items:flex-start;padding:36px 24px;margin:70px 0 50px}
  .cta h2{font-size:30px}
  .qrs{display:none}
  .cta .stores{display:flex}
  .footer .wrap{flex-direction:column;align-items:flex-start}
  .legal-head{padding:24px 0 20px;gap:14px}
  .legal-head h1{font-size:38px}
  .legal{grid-template-columns:1fr;gap:0;padding:0 0 50px}
  .toc{display:none}
  .doc{padding:28px 20px;border-radius:24px;gap:36px;box-shadow:0 6px 0 var(--ink)}
  .doc>p,.doc p,.doc ol>li{font-size:14px}
  .doc h2{font-size:20px;gap:10px}
  .doc h2::before{width:8px;height:24px}
  .doc h3{font-size:16px}
  .doc ul li{font-size:13px}
  .doc table{font-size:13px}
  .doc th,.doc td{padding:10px 12px}
  .notice{font-size:14px;margin-bottom:22px}
}

/* ストアのバッジはApple/Googleの公式アートワークを各社のURLから読み込む
   (両社ともガイドラインで公式バッジをそのまま使うことを求めている)。
   Google Playの公式PNGは周りに透明な余白を持っていて、同じ高さで並べると
   App Storeより一回り小さく見えるので、そのぶん大きく描いて余白を打ち消す。
   倍率は実機のスクショでApp Storeと見えている高さが揃うように測った値
   (余白は上下左右とも高さの約12%) */
.stores,.go-stores,.qr{--badge-h:56px}
.go-stores{--badge-h:60px}
.qr{--badge-h:44px}
.stores img.gp,.go-stores img.gp,.qr img.gp{height:calc(var(--badge-h)*1.28);margin:calc(var(--badge-h)*-.14);border-radius:0}
@media (max-width:720px){.stores{--badge-h:48px}}

/* /go のバッジは横並び(2026-10-18の指示)。説明文だけ次の行へ回す。
   幅の狭いスマホでも1行に収まるよう、バッジの高さを少し下げる */
.go-stores{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:14px}
.go-stores img{height:var(--badge-h)}
.go-stores p{flex-basis:100%;text-align:center}
@media (max-width:440px){.go-stores{--badge-h:48px;column-gap:10px}}