/* Language switch: only the current language's elements are shown. */
html[lang="ja"] .en, html[lang="en"] .ja { display: none !important; }

:root {
  --cream: #fff6e6;
  --paper: #ffffff;
  --brown: #5c3821;
  --orange: #f7862a;
  --orange-deep: #e0641a;
  --yellow: #ffcc33;
  --sky-top: #7cc8ff;
  --sky-bottom: #d8f1ff;
  --leaf: #5cc46b;
  --shadow: 0 10px 26px rgba(92, 56, 33, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "M PLUS Rounded 1c", system-ui, sans-serif;
  font-weight: 500;
  color: var(--brown);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 214, 153, .35) 0 2px, transparent 3px) 0 0 / 28px 28px,
    var(--cream);
  line-height: 1.8;
}

img { max-width: 100%; display: block; }
a { color: var(--orange-deep); }

.lang-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  font: inherit; font-weight: 800; color: var(--brown);
  background: #fff; border: none; border-radius: 999px; padding: 8px 18px;
  box-shadow: var(--shadow); cursor: pointer;
}

section { padding: 56px 16px; max-width: 1100px; margin: 0 auto; }

h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 2.3rem);
  text-align: center;
  margin: 0 0 1em;
  line-height: 1.3;
}

/* Section titles with little yellow sparkle strokes on both sides. */
h2.deco::before, h2.deco::after {
  content: "";
  display: inline-block;
  width: 26px; height: 26px;
  vertical-align: middle;
  background:
    linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 5px 11px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 70% / 11px 5px no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 100% / 9px 5px no-repeat;
  margin: 0 12px;
}
h2.deco::after { transform: scaleX(-1); }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; }
.sky {
  position: relative;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  padding: 56px 16px 120px;
  text-align: center;
}
.cloud {
  position: absolute; background: #fff; border-radius: 999px; opacity: .92;
  box-shadow: 40px -18px 0 6px #fff, 86px 2px 0 -4px #fff;
}
.c1 { width: 120px; height: 46px; top: 60px; left: 5%; }
.c2 { width: 90px; height: 36px; top: 150px; right: 14%; }
.c3 { width: 140px; height: 52px; top: 300px; left: 12%; opacity: .75; }
.c4 { width: 100px; height: 40px; top: 40px; right: 30%; opacity: .7; }
.leaf { position: absolute; width: 44px; height: 44px; }
.l1 { top: 120px; right: 8%; transform: rotate(25deg); }
.l2 { top: 380px; left: 6%; transform: rotate(-120deg); width: 36px; height: 36px; }
.l3 { top: 250px; right: 18%; transform: rotate(160deg); width: 28px; height: 28px; opacity: .8; }

.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.icon-wrap { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.icon {
  width: 112px; height: 112px; border-radius: 28px;
  border: 5px solid #fff; box-shadow: var(--shadow);
}
.spark { width: 34px; height: 34px; background:
  linear-gradient(var(--yellow), var(--yellow)) 50% 0 / 6px 14px no-repeat,
  linear-gradient(var(--yellow), var(--yellow)) 0 75% / 14px 6px no-repeat,
  linear-gradient(var(--yellow), var(--yellow)) 100% 100% / 12px 6px no-repeat; }
.s-right { transform: scaleX(-1); }

.logo { margin: 0; line-height: 1.1; font-weight: 800; }
.logo span {
  display: block;
  -webkit-text-stroke: 12px #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 6px rgba(92, 56, 33, .18));   /* soft lift, no hard extrusion */
}
.t1 { color: var(--orange); font-size: clamp(3rem, 11vw, 5.4rem); }
.t2 { color: var(--brown); font-size: clamp(2.8rem, 10.5vw, 5.1rem); }
.sub { margin: 2px 0 14px; font-weight: 800; letter-spacing: .04em; font-size: .95rem; }

/* Orange ribbon banner with notched ends. */
.ribbon {
  display: inline-block;
  margin: 6px 0 14px;
  padding: 12px 56px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  line-height: 1.4;
  background: linear-gradient(var(--orange), var(--orange-deep));
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  filter: drop-shadow(0 5px 0 rgba(150, 60, 10, .35));
}
.lead { font-size: clamp(.98rem, 2.8vw, 1.15rem); margin: 0 0 18px; word-break: keep-all; overflow-wrap: anywhere; }

.cta .soon { margin: 0 0 4px; font-weight: 800; color: var(--orange-deep); font-size: 1.1rem; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; }
.badge.appstore img { height: 58px; width: auto; }
.badge.googleplay img { height: 76px; width: auto; margin: -9px; }   /* Google's PNG carries its own padding; sized so the visible badge matches Apple's height */

.scene { margin-top: -90px; position: relative; padding: 0 16px; }
/* Slides crossfade with a slow zoom on the active one (slides.js toggles .active). */
.slides {
  position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 36px; border: 8px solid #fff; box-shadow: 0 18px 40px rgba(60, 90, 120, .25);
  background: #bfe6ff; touch-action: pan-y;
}
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.0); transition: transform 6s ease-out; }
.slide.active { opacity: 1; }
.slide.active img { transform: scale(1.07); }
.chip {
  position: absolute; left: 18px; bottom: 16px; margin: 0;
  background: rgba(255, 255, 255, .94); color: var(--brown); font-weight: 800;
  padding: 6px 18px; border-radius: 999px; box-shadow: var(--shadow); font-size: clamp(.85rem, 2.6vw, 1.1rem);
}
.nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--orange-deep); box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.nav.prev { left: 12px; }
.nav.next { right: 12px; }
.dots { display: flex; justify-content: center; gap: 10px; margin: 14px 0 0; }
.dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: none; background: #e3d3bd; cursor: pointer; }
.dots button.on { background: var(--orange); width: 28px; border-radius: 999px; }
@media (max-width: 600px) {
  .nav { width: 38px; height: 38px; }
  .chip { left: 10px; bottom: 10px; padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide img { transition: none; }
  .slide.active img { transform: none; }
}

/* ===== Cards ===== */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--paper); border-radius: 32px; padding: 26px 22px 28px;
  box-shadow: var(--shadow); text-align: center;
}
.pic { height: 104px; display: grid; place-items: center; position: relative; }
.pic img { width: 96px; height: 96px; object-fit: contain; }
.pic .heart { position: absolute; top: 2px; right: calc(50% - 74px); width: 34px; height: 34px; transform: rotate(12deg); }
.pic .bigstar { width: 92px; height: 92px; }
.card h3 { margin: 10px 0 8px; font-weight: 800; color: var(--orange); font-size: 1.35rem; line-height: 1.35; }
.card p { margin: 0; font-size: .95rem; word-break: keep-all; overflow-wrap: anywhere; }

/* ===== Clear moment ===== */
.feature { display: grid; gap: 34px; grid-template-columns: 1.15fr 1fr; align-items: center; }
.photo { position: relative; }
.photo video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ffe0b0;
  border-radius: 34px; border: 10px solid #fff; box-shadow: var(--shadow);
  transform: rotate(-3deg);
}
/* Paper confetti scattered around the photo. */
.confetti i {
  position: absolute; width: 14px; height: 9px; border-radius: 2px;
  animation: flutter 3s ease-in-out infinite;
}
.confetti i:nth-child(1) { top: -14px; left: 12%; background: #ff7aa2; transform: rotate(20deg); }
.confetti i:nth-child(2) { top: 6%; left: -10px; background: #ffcc33; animation-delay: .4s; }
.confetti i:nth-child(3) { top: -20px; left: 46%; background: #5ab8f5; animation-delay: .8s; }
.confetti i:nth-child(4) { top: -8px; right: 14%; background: #6cc96b; animation-delay: 1.2s; }
.confetti i:nth-child(5) { top: 18%; right: -12px; background: #b07cf0; animation-delay: .2s; }
.confetti i:nth-child(6) { bottom: 10%; right: -14px; background: #ffcc33; animation-delay: 1s; }
.confetti i:nth-child(7) { bottom: -12px; left: 30%; background: #ff7aa2; animation-delay: 1.6s; }
.confetti i:nth-child(8) { top: 40%; left: -16px; background: #5ab8f5; animation-delay: 2s; }
@keyframes flutter {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) { .confetti i { animation: none; } }
.feature-text h2 { text-align: left; color: var(--orange-deep); }
.feature-text em {
  font-style: normal;
  text-decoration: underline wavy var(--yellow) 4px;
  text-underline-offset: 10px;
}
@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
  .feature-text h2 { text-align: center; }
}

/* ===== Areas: 3 + 2 ===== */
.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
figure {
  position: relative; margin: 0; flex: 0 1 calc(33.333% - 14px); min-width: 260px;
  background: var(--paper); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow);
}
.thumb { position: relative; }
.thumb > img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
/* The area name sits on the photo's bottom edge; the caption starts below it. */
.tag {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: max-content;   /* left:50% would otherwise cap the pill at half the card */
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: linear-gradient(var(--orange), var(--orange-deep)); color: #fff; font-weight: 800;
  padding: 3px 18px 3px 12px; border-radius: 999px; border: 3px solid #fff; line-height: 1.6;
}
.tag img { width: 22px; height: 22px; }
figcaption { padding: 30px 14px 16px; text-align: center; font-size: .95rem; word-break: keep-all; overflow-wrap: anywhere; }

/* ===== How to ===== */
.howto ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.howto li {
  background: var(--paper); border-radius: 999px; padding: 12px 22px 12px 14px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); font-weight: 800; line-height: 1.4;
}
.howto .num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--leaf); color: #fff; display: grid; place-items: center; font-size: 1.2rem;
}
.howto svg, .howto img { flex: none; }

/* ===== Free ===== */
.free-card {
  position: relative; display: flex; align-items: center; gap: 24px;
  background: linear-gradient(#fff, #fff3dc); border-radius: 36px; padding: 28px 32px; box-shadow: var(--shadow);
}
.free-card h2 { text-align: left; color: var(--orange-deep); margin-bottom: .4em; }
.free-card p { margin: 0; }
.mascot { position: relative; flex: none; }
.mascot img { width: 120px; height: 120px; object-fit: contain; }
.bubble {
  position: absolute; top: -10px; right: -12px; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; box-shadow: var(--shadow);
}
.bubble img { width: 26px; height: 26px; }
.hearts { position: absolute; right: 26px; top: -20px; display: flex; gap: 4px; }
.hearts img { width: 34px; height: 34px; }
.hearts img:last-child { width: 26px; height: 26px; transform: rotate(14deg) translateY(-8px); }
@media (max-width: 640px) {
  .free-card { flex-direction: column; text-align: center; }
  .free-card h2 { text-align: center; }
}
.cta.bottom { text-align: center; margin-top: 36px; }

/* ===== Footer ===== */
footer {
  background: var(--brown); color: #fff; text-align: center; padding: 22px 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .92rem;
}
footer a { color: #ffd699; }
.sep { opacity: .5; }

/* ===== Privacy page ===== */
.doc { max-width: 820px; margin: 0 auto; padding: 48px 16px 64px; }
.doc h1 { font-size: 1.9rem; margin-bottom: .2em; }
.doc h2 { text-align: left; font-size: 1.3rem; margin: 2em 0 .6em; }
.doc .back { display: inline-block; margin-bottom: 24px; }