@font-face {
  font-family:Noto;
  src:url('fonts/NotoSansJP-variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('fonts/Manrope-variable.woff2') format('woff2');
  font-weight:200 800;
  font-display:swap
}
:root {
  --ink:#23454F;
  --olive:#627048;
  --rust:#9A4A31;
  --blue:#008afb;
  --sky:#27bdf1;
  --yellow:#fff849;
  --coral:#ff556a;
  --paper:#fffefa;
  --font:Noto,'Hiragino Kaku Gothic ProN',sans-serif;
  --radius:22px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:18px
}
body {
  margin:0;
  background:#e8f7fc;
  color:var(--ink);
  font-family:var(--font);
  font-synthesis:none
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
h1,h2,h3,p,ul,ol {
  margin:0
}
ul,ol {
  padding:0;
  list-style:none
}
h1,h2,h3 {
  color:#080c14;
  line-height:1.45;
  font-weight:900
}
p {
  line-height:1.75
}
mark {
  color:inherit;
  background:linear-gradient(transparent 72%,var(--yellow) 72%)
}
em {
  color:var(--yellow);
  font-style:normal
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #23454f;
  outline-offset:5px
}
.skip {
  position:fixed;
  left:12px;
  top:-70px;
  z-index:100;
  background:white;
  padding:12px
}
.skip:focus {
  top:12px
}
.page {
  max-width:1200px;
  margin:auto;
  container-type:inline-size;
  background:var(--paper);
  box-shadow:0 0 70px #23454f12
}
.header {
  height:5.15cqw;
  min-height:62px;
  display:flex;
  align-items:center;
  padding:0 5.8%;
  gap:2%;
  position:relative;
  z-index:10;
  background:#fff
}
.brand {
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  line-height:1.1;
  color:#080c14
}
.brand strong {
  font-family:Manrope,sans-serif;
  font-size:1.8cqw;
  font-weight:800;
  letter-spacing:-.07em
}
.brand small {
  font-size:.65cqw;
  font-weight:800;
  margin-top:3px
}
.desktop-nav {
  display:flex;
  gap:1.1cqw;
  margin-left:auto;
  font-size:.88cqw;
  font-weight:700;
  white-space:nowrap
}
.desktop-nav a:hover,.footer a:hover {
  color:var(--blue)
}
.cta {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
  padding:.55em 1.2em;
  border:2px solid white;
  border-radius:100px;
  color:white;
  background:linear-gradient(110deg,#ff6778,#ff4d62);
  box-shadow:0 4px 8px #913b2830;
  font-weight:800;
  white-space:nowrap;
  line-height:1.5;
  transition:transform .18s,box-shadow .18s
}
.cta:hover {
  transform:translateY(-3px);
  box-shadow:0 7px 14px #913b2840
}
.threads-mark {
  font-family:Arial,sans-serif;
  font-size:1.8em;
  line-height:1
}
.header-cta {
  font-size:.93cqw;
  padding:.45em .9em
}
.menu-toggle,.mobile-menu,.mobile-only,.mobile-art,.hero-mobile-note,.hero-after,.mobile-character {
  display:none
}
.hand {
  font-family:'Hiragino Maru Gothic ProN',Noto,sans-serif;
  font-style:italic;
  font-weight:500;
  color:var(--blue);
  line-height:1.5;
  letter-spacing:.025em;
  transform:rotate(-7deg)
}
.section-script {
  display:block;
  color:var(--blue);
  font-family:cursive;
  font-size:3.1cqw;
  font-style:italic;
  font-weight:400;
  line-height:1.1;
  transform:rotate(-12deg);
  transform-origin:left center
}
.scene {
  position:absolute;
  inset:0 0 auto;
  height:calc(var(--h) * 100cqw / 836);
  overflow:hidden;
  z-index:0;
  pointer-events:none
}
.scene img {
  position:absolute;
  width:100%;
  height:auto;
  max-width:none;
  top:calc(var(--y) * -100cqw / 836);
  left:0
}
section {
  position:relative;
  isolation:isolate
}
section>*:not(.scene):not(.mobile-art) {
  position:relative;
  z-index:1
}
.hero {
  height:61.96cqw;
  color:#111
}
.hero>*:not(.scene):not(.mobile-art) {
  position:absolute
}
.hero-lead {
  top:4.7%;
  left:7.2%;
  font-size:2.5cqw
}
.hero h1 {
  top:24.6%;
  left:5.75%;
  font-size:5.65cqw;
  line-height:1.14;
  letter-spacing:-.06em;
  transform:rotate(-4deg);
  font-weight:900
}
.hero-desc {
  top:47%;
  left:14.4%;
  font-size:1.73cqw;
  font-weight:700;
  line-height:1.5
}
.hero-service {
  top:56%;
  left:11%;
  width:30%;
  text-align:center;
  color:#007ae8;
  font-weight:900;
  line-height:1.2
}
.hero-service strong {
  display:block;
  font-size:4.1cqw
}
.hero-service span {
  font-size:1.95cqw
}
.hero-cta {
  left:6.45%;
  top:69.1%;
  width:34.5%
}
.hero-cta .cta {
  width:100%;
  font-size:1.85cqw;
  padding:.48em .9em
}
.benefits {
  left:5.7%;
  top:90.1%;
  width:35.8%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  color:white;
  text-align:center;
  font-size:1.1cqw;
  font-weight:800
}
.poster-top {
  top:5.1%;
  left:45.5%;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:4.3cqw;
  color:#000;
  letter-spacing:-.065em;
  transform:rotate(-6deg)
}
.poster-bottom {
  top:78.7%;
  left:52%;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:4.1cqw;
  line-height:1.15;
  color:#000;
  letter-spacing:-.055em;
  transform:rotate(-5deg)
}
.poster-bottom small {
  display:block;
  font-size:1.1cqw;
  text-align:center;
  letter-spacing:.2em
}
.hero-note {
  top:12.2%;
  left:81.5%;
  font-size:2.2cqw;
  color:#0b1119;
  line-height:1.45;
  transform:rotate(-12deg)
}
.hero-love {
  top:35.4%;
  left:87.4%;
  font-family:cursive;
  font-size:2.55cqw
}
.hero-future {
  top:59%;
  left:87%;
  font-size:2cqw;
  text-align:center
}
.worries {
  min-height:19.26cqw
}
.worries h2 {
  position:absolute!important;
  top:20%;
  left:5%;
  font-size:2.8cqw;
  line-height:1.2;
  transform:rotate(-6deg)
}
.worries ul {
  position:absolute!important;
  left:26%;
  top:15%;
  width:49%;
  height:72%;
  font-size:1.3cqw;
  font-weight:600;
  line-height:1.6;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1%
}
.worries li {
  text-align:center
}
.worries li:nth-child(4) {
  grid-column:2;
  margin-top:1.5cqw
}
.worries>.hand {
  position:absolute!important;
  left:78%;
  top:12%;
  font-size:2.4cqw;
  text-align:center
}
.about {
  min-height:20.34cqw;
  color:white;
  display:grid;
  grid-template-columns:14% 41% 21% 24%;
  align-items:center
}
.about>.section-script {
  color:white;
  align-self:start;
  margin:6cqw 0 0 4cqw
}
.about-copy {
  padding:1.3cqw 0
}
.about h2 {
  color:white;
  font-size:2.9cqw;
  line-height:1.5;
  white-space:nowrap
}
.about-copy p {
  font-size:1.28cqw;
  margin-top:.9cqw;
  line-height:1.65
}
.about-bubble {
  grid-column:4;
  align-self:start;
  text-align:center;
  margin-top:5.5cqw;
  margin-right:1.4cqw;
  font-size:2.15cqw
}
.features {
  min-height:29.67cqw;
  padding:1.25cqw 0 2cqw
}
.features>.section-script {
  position:absolute!important;
  top:2.5cqw;
  left:4cqw
}
.features>h2 {
  text-align:center;
  font-size:2.55cqw;
  line-height:1.2;
  margin:0 0 2.1cqw
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.55cqw;
  width:74.9%;
  margin-left:5.85%;
  padding-top:1.1cqw
}
.feature-grid article {
  padding:0 2cqw .8cqw;
  position:relative
}
.number {
  display:block;
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:1.7cqw;
  line-height:1.2;
  margin-bottom:2.6cqw
}
.feature-grid h3 {
  font-size:1.85cqw;
  color:#00528c;
  line-height:1.55;
  text-align:center
}
.feature-grid p {
  font-size:1.29cqw;
  line-height:1.7;
  margin-top:1.2cqw
}
.feature-note {
  position:absolute!important;
  right:3.3%;
  top:29%;
  font-size:2.3cqw;
  text-align:center
}
.support {
  min-height:20.22cqw;
  display:grid;
  grid-template-columns:34% 29% 31%;
  gap:1%;
  padding:1.6cqw 5% 1.5cqw 6.3%
}
.support-intro .section-script {
  margin-left:-3cqw;
  font-size:3cqw
}
.support h2 {
  font-size:2.1cqw;
  line-height:1.5
}
.support-intro>p {
  font-size:1.25cqw;
  margin-top:.8cqw;
  line-height:1.65;
  padding-right:1cqw
}
.support-card {
  padding:1.5cqw 1cqw
}
.support-card h3 {
  font-size:1.55cqw;
  color:white;
  padding-left:1cqw;
  line-height:1.25
}
.support-card ul {
  margin:3.2cqw 0 0 6.3cqw;
  white-space:nowrap;
  font-size:1.27cqw;
  line-height:2.2
}
.support-card li::before {
  content:'✓ ';
  color:var(--blue);
  font-weight:900
}
.future {
  min-height:21.29cqw;
  display:grid;
  grid-template-columns:36% 49% 15%;
  padding:1.4cqw 3.5% 1.5cqw 7.8%
}
.future .section-script {
  margin-left:-3.5cqw
}
.future h2 {
  font-size:2.3cqw;
  line-height:1.4;
  margin-top:.7cqw
}
.future-copy>p {
  font-size:1.14cqw;
  line-height:1.65;
  margin-top:.6cqw;
  padding-right:1.5cqw
}
.future-photos {
  position:relative
}
.future-photos span {
  position:absolute;
  top:1.7cqw;
  font-size:1.45cqw;
  text-align:center;
  color:var(--ink);
  line-height:1.4
}
.online-note {
  left:28%
}
.offline-note {
  left:84%;
  width:22%
}
.future-note {
  font-size:2.15cqw;
  text-align:center;
  margin-top:2cqw
}
.flow {
  min-height:10.29cqw;
  display:grid;
  grid-template-columns:19% 81%;
  padding:1.6cqw 3.5% 1cqw
}
.flow .section-script {
  margin-left:.5cqw
}
.flow h2 {
  font-size:1.95cqw;
  text-align:center
}
.flow ol {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5cqw;
  padding:0 .7cqw
}
.flow li {
  padding:.6cqw 0 0 3.2cqw;
  position:relative
}
.flow li b {
  position:absolute;
  left:-.7cqw;
  top:.4cqw;
  color:var(--blue);
  font-family:Manrope,sans-serif;
  font-weight:800;
  font-size:2cqw;
  background:#e7faff
}
.flow h3 {
  font-size:1.2cqw;
  white-space:nowrap
}
.flow li p {
  font-size:.99cqw;
  line-height:1.65;
  margin-top:.6cqw;
  white-space:nowrap
}
.price {
  min-height:7.42cqw;
  display:grid;
  grid-template-columns:17% 23% 38% 22%;
  align-items:center;
  padding:.8cqw 4%;
  background:#fbf8f0
}
.price>div {
  display:flex;
  align-items:center;
  gap:2cqw
}
.price h2 {
  font-size:2cqw
}
.price>p:not(.amount):not(.hand) {
  font-size:.98cqw;
  color:var(--rust)
}
.amount {
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  color:#000;
  line-height:1.2;
  justify-content:center;
  font-weight:900
}
.amount-number {
  font-family:Manrope,sans-serif;
  font-size:4.4cqw;
  letter-spacing:-.05em
}
.amount-unit {
  font-size:2.2cqw
}
.amount-condition {
  font-size:1.5cqw
}
.price>.hand {
  font-size:1.8cqw;
  text-align:center
}
.faq {
  display:flex;
  align-items:flex-start;
  gap:2%;
  padding:1.4cqw 3.5%;
  background:#fff;
  min-height:6.22cqw
}
.faq>div:first-child {
  display:flex;
  align-items:center;
  gap:1.2cqw;
  width:20%;
  flex-shrink:0
}
.faq h2 {
  font-size:1.8cqw;
  white-space:nowrap
}
.faq-items {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1cqw;
  flex:1;
  align-items:start
}
.faq details {
  border-left:1px solid #d6ebf6;
  padding:0 .5cqw 0 1cqw
}
.faq summary {
  position:relative;
  font-size:.8cqw;
  font-weight:700;
  line-height:1.55;
  list-style:none;
  cursor:pointer;
  min-height:32px;
  padding-left:1.5cqw;
  padding-right:1cqw;
  display:flex;
  align-items:center
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary::before {
  content:'Q';
  position:absolute;
  left:0;
  font-family:Manrope,sans-serif;
  font-size:1.7cqw;
  color:var(--blue)
}
.faq summary::after {
  content:'⌄';
  position:absolute;
  right:0;
  color:var(--blue);
  font-size:1.2cqw
}
.faq details[open] summary::after {
  content:'−'
}
.faq details p {
  font-size:1.05cqw;
  line-height:1.7;
  margin-top:1cqw
}
.follow {
  min-height:11.84cqw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8% 0 6%
}
.follow h2 {
  font-size:2.5cqw;
  color:white;
  font-weight:500;
  line-height:1.6
}
.follow .cta {
  font-size:1.8cqw;
  position:absolute!important;
  left:34%;
  width:33%
}
.follow>p {
  font-size:1.8cqw;
  color:var(--ink);
  margin-right:1%
}
.footer {
  display:flex;
  align-items:center;
  gap:3%;
  padding:2.3cqw 3.5%;
  background:white;
  color:#23454f
}
.footer .brand {
  flex-direction:row;
  align-items:center;
  gap:1cqw
}
.footer .brand strong {
  font-size:1.5cqw
}
.footer .brand small {
  font-size:.6cqw
}
.footer nav {
  display:flex;
  gap:1.5cqw;
  font-size:.82cqw;
  font-weight:600
}
.footer>small {
  font-size:.8cqw;
  margin-left:auto;
  color:var(--olive)
}
@media(min-width:768px) and (max-width:950px) {
  .header {
    padding:0 4%;
    min-height:48px
  }
  .desktop-nav {
    font-size:1cqw;
    gap:1cqw
  }
  .header-cta {
    font-size:1cqw
  }
  .brand strong {
    font-size:2cqw
  }
}
@media(max-width:767px) {
  html {
    scroll-padding-top:12px
  }
  .page {
    width:100%;
    box-shadow:none
  }
  .header {
    height:0;
    min-height:0;
    padding:0;
    background:transparent;
    position:relative
  }
  .header>.brand {
    position:absolute;
    top:3.5cqw;
    left:8.4cqw;
    z-index:3
  }
  .brand strong {
    font-size:6cqw;
    letter-spacing:-.055em
  }
  .brand small {
    font-size:2.5cqw;
    margin-top:2px
  }
  .desktop-nav,.header-cta {
    display:none
  }
  .menu-toggle {
    display:flex;
    position:absolute;
    top:3.5cqw;
    right:5.5cqw;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:6px;
    z-index:4;
    cursor:pointer
  }
  .menu-toggle span {
    width:100%;
    height:4px;
    border-radius:3px;
    background:#111
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(10px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-10px) rotate(-45deg)
  }
  .mobile-menu:not([hidden]) {
    display:flex;
    position:absolute;
    top:19cqw;
    left:4%;
    right:4%;
    padding:22px;
    background:#fffffff9;
    border:2px solid #c8effa;
    box-shadow:0 10px 35px #23454f26;
    border-radius:20px;
    flex-direction:column;
    gap:0;
    z-index:3;
    font-size:16px
  }
  .mobile-menu>a:not(.cta) {
    padding:12px;
    border-bottom:1px solid #def0f3
  }
  .mobile-menu .cta {
    margin-top:16px;
    font-size:14px
  }
  .hero {
    height:207.38cqw;
    background:#fffefa
  }
  .hero>.scene {
    display:none
  }
  .mobile-art {
    display:block;
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none
  }
  .mobile-art img {
    display:block;
    width:100%;
    height:auto;
    position:absolute;
    top:-8.793cqw
  }
  .hero-lead {
    top:8%;
    left:10%;
    font-size:5.35cqw;
    line-height:1.5;
    transform:rotate(-8deg)
  }
  .hero h1 {
    top:16.7%;
    left:9%;
    font-size:9.1cqw;
    line-height:1.28;
    letter-spacing:-.06em;
    transform:rotate(-6deg)
  }
  .hero-desc {
    top:28.1%;
    left:5.5%;
    font-size:3.35cqw;
    line-height:1.5;
    transform:rotate(-6deg)
  }
  .hero-service {
    top:35.5%;
    left:2.5%;
    width:33%;
    text-align:left;
    transform:rotate(-7deg)
  }
  .hero-service strong {
    font-size:6.5cqw;
    white-space:nowrap;
    letter-spacing:-.05em
  }
  .hero-service span {
    font-size:2.65cqw;
    display:block;
    white-space:nowrap
  }
  .hero-cta {
    left:7.8%;
    top:83.3%;
    width:84.4%
  }
  .hero-cta .cta {
    font-size:4.2cqw;
    padding:.5em 1em;
    min-height:54px;
    border-width:2px
  }
  .benefits {
    left:6.2%;
    top:77.55%;
    width:88%;
    font-size:3.15cqw;
    gap:2.1cqw;
    line-height:1.45
  }
  .poster-top,.poster-bottom {
    display:none
  }
  .hero-note {
    top:7.2%;
    left:74%;
    font-size:4.4cqw;
    line-height:1.45;
    transform:rotate(-11deg)
  }
  .hero-love {
    top:17.3%;
    left:81%;
    font-size:5.25cqw;
    line-height:1.2
  }
  .hero-future {
    top:47%;
    left:3.5%;
    font-size:4.25cqw;
    transform:rotate(-12deg)
  }
  .hero-mobile-note {
    display:block;
    top:49%;
    right:1.5%;
    font-size:3.8cqw;
    text-align:center
  }
  .hero-after {
    display:block;
    top:91.2%;
    width:100%;
    left:0;
    text-align:center;
    font-size:3.5cqw;
    transform:rotate(-4deg)
  }
  .pc-only {
    display:none
  }
  .mobile-only {
    display:block
  }
  .section-script {
    font-size:9cqw;
    line-height:1;
    margin-bottom:20px
  }
  .worries {
    min-height:0;
    padding:35px 22px 30px;
    background:#edf8fc;
    border-radius:28px 28px 0 0
  }
  .worries>.scene {
    display:none
  }
  .worries h2 {
    position:relative!important;
    top:auto;
    left:auto;
    font-size:26px;
    line-height:1.45;
    transform:rotate(-3deg);
    margin:0 0 25px
  }
  .worries ul {
    position:relative!important;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    font-size:14px;
    grid-template-columns:repeat(2,1fr);
    gap:14px
  }
  .worries li {
    padding:16px 6px;
    background:white;
    border-radius:50%;
    line-height:1.65;
    box-shadow:0 4px 20px #94c2d110
  }
  .worries li:nth-child(4) {
    grid-column:auto;
    margin:0
  }
  .worries>.hand {
    position:relative!important;
    left:auto;
    top:auto;
    font-size:22px;
    margin:26px 0 5px;
    text-align:right
  }
  .about {
    min-height:0;
    display:block;
    padding:32px 22px 245px;
    background:#0eaeed;
    color:white
  }
  .about>.scene {
    display:none
  }
  .about>.section-script {
    margin:0 0 22px;
    color:#fff
  }
  .about-copy {
    padding:0
  }
  .about h2 {
    font-size:25px;
    line-height:1.65;
    white-space:normal
  }
  .about-copy p {
    font-size:14px;
    line-height:1.9;
    margin-top:18px
  }
  .about-bubble {
    position:absolute!important;
    bottom:48px;
    right:16px;
    margin:0;
    padding:22px 16px;
    border-radius:50%;
    background:#fff;
    font-size:18px;
    line-height:1.5;
    transform:rotate(-7deg)
  }
  .mobile-character {
    display:block;
    position:absolute!important;
    bottom:0;
    left:3%;
    height:179px;
    width:192px;
    background-image:url('desktop-art.png');
    background-size:836px 1881px;
    background-position:-433px -752px;
    z-index:0!important
  }
  .features {
    min-height:0;
    padding:35px 22px;
    background:var(--paper)
  }
  .features>.scene {
    display:none
  }
  .features>.section-script {
    position:relative!important;
    top:auto;
    left:auto;
    margin-bottom:25px
  }
  .features>h2 {
    font-size:24px;
    text-align:left;
    line-height:1.65;
    margin:0 0 24px
  }
  .feature-grid {
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    margin:0;
    padding:0;
    gap:17px
  }
  .feature-grid article {
    padding:25px 24px 27px;
    border-radius:22px;
    background:linear-gradient(130deg,#eefaff,#d9f8fb);
    border:1px solid #dbf7f7
  }
  .feature-grid article:nth-child(2) {
    background:linear-gradient(130deg,#fffce9,#fffed9)
  }
  .feature-grid article:nth-child(3) {
    background:linear-gradient(130deg,#e9faff,#dcfbf4)
  }
  .number {
    font-size:22px;
    margin-bottom:14px;
    color:var(--olive)
  }
  .feature-grid h3 {
    font-size:20px;
    line-height:1.6;
    text-align:left
  }
  .feature-grid p {
    font-size:14px;
    line-height:1.9;
    margin-top:15px
  }
  .feature-note {
    position:relative!important;
    right:auto;
    top:auto;
    font-size:22px;
    text-align:right;
    margin-top:28px
  }
  .support {
    display:block;
    min-height:0;
    padding:35px 22px;
    background:#e8f8ff
  }
  .support>.scene {
    display:none
  }
  .support-intro .section-script {
    margin:0 0 25px;
    font-size:9cqw
  }
  .support h2 {
    font-size:23px;
    line-height:1.6
  }
  .support-intro>p {
    font-size:14px;
    line-height:1.9;
    margin-top:18px;
    padding:0
  }
  .support-card {
    position:relative;
    padding:24px 20px;
    margin-top:22px;
    background:white;
    border-radius:18px;
    min-height:165px
  }
  .support-card::after {
    content:'';
    position:absolute;
    top:10px;
    right:12px;
    width:90px;
    height:77px;
    background-image:url('desktop-art.png');
    background-size:836px 1881px;
    background-position:-427px -1180px
  }
  .support-card.offline::after {
    width:120px;
    background-position:-691px -1180px;
    right:8px
  }
  .support-card h3 {
    display:inline-block;
    background:var(--blue);
    padding:6px 13px;
    font-size:17px;
    color:white;
    border-radius:4px
  }
  .support-card ul {
    font-size:15px;
    line-height:2;
    margin:30px 0 0 15px;
    white-space:normal
  }
  .future {
    display:block;
    min-height:0;
    padding:35px 22px;
    background:#fffcf6
  }
  .future>.scene {
    display:none
  }
  .future .section-script {
    margin:0 0 24px
  }
  .future h2 {
    font-size:26px;
    line-height:1.5;
    margin:0
  }
  .future-copy>p {
    font-size:14px;
    line-height:1.9;
    margin-top:18px;
    padding:0
  }
  .future-photos {
    margin-top:24px;
    width:100%;
    height:calc((100cqw - 44px) * .445);
    background-image:url('desktop-art.png');
    background-size:calc((100cqw - 44px) * 836 / 407) auto;
    background-position:calc((100cqw - 44px) * -305 / 407) calc((100cqw - 44px) * -1347 / 407)
  }
  .future-photos span {
    top:13%;
    font-size:3cqw;
    line-height:1.3;
    transform:rotate(-5deg)
  }
  .online-note {
    left:30%
  }
  .offline-note {
    left:83%;
    width:17%
  }
  .future-note {
    font-size:22px;
    margin-top:22px;
    text-align:right
  }
  .flow {
    display:block;
    min-height:0;
    padding:35px 22px;
    background:white
  }
  .flow>.scene {
    display:none
  }
  .flow .section-script {
    margin:0 0 24px
  }
  .flow h2 {
    font-size:25px;
    text-align:left
  }
  .flow ol {
    grid-template-columns:1fr;
    margin-top:24px;
    padding:0;
    gap:14px
  }
  .flow li {
    padding:22px 18px 22px 75px;
    min-height:100px;
    background:#eaf8ff;
    border-radius:14px;
    position:relative
  }
  .flow li:not(:last-child)::after {
    content:'↓';
    position:absolute;
    left:50%;
    bottom:-18px;
    font-size:23px;
    color:var(--blue);
    z-index:2
  }
  .flow li b {
    font-size:26px;
    left:20px;
    top:20px;
    background:none
  }
  .flow h3 {
    font-size:18px;
    white-space:normal
  }
  .flow li p {
    font-size:14px;
    line-height:1.65;
    margin-top:7px;
    white-space:normal
  }
  .flow li p br {
    display:none
  }
  .price {
    display:block;
    min-height:0;
    padding:35px 22px;
    background:#faf6ec
  }
  .price>.scene {
    display:none
  }
  .price>div {
    display:block
  }
  .price .section-script {
    margin-bottom:23px
  }
  .price h2 {
    font-size:25px
  }
  .price>p:not(.amount):not(.hand) {
    font-size:14px;
    margin-top:20px;
    line-height:1.8
  }
  .price .amount {
    justify-content:flex-start;
    margin-top:22px;
    gap:.05em;
    line-height:1.2
  }
  .amount-number {
    font-size:49px
  }
  .amount-unit {
    font-size:25px
  }
  .amount-condition {
    font-size:17px
  }
  .price>.hand {
    font-size:22px;
    text-align:right;
    margin-top:22px
  }
  .faq {
    display:block;
    min-height:0;
    padding:35px 22px
  }
  .faq>div:first-child {
    display:block;
    width:auto
  }
  .faq .section-script {
    margin-bottom:24px
  }
  .faq h2 {
    font-size:25px
  }
  .faq-items {
    display:block;
    margin-top:24px
  }
  .faq details {
    border:0;
    border-top:1px solid #d6ebf6;
    padding:0
  }
  .faq details:last-child {
    border-bottom:1px solid #d6ebf6
  }
  .faq summary {
    font-size:14px;
    padding:19px 24px 19px 28px;
    min-height:64px;
    line-height:1.8
  }
  .faq summary::before {
    font-size:23px
  }
  .faq summary::after {
    font-size:22px
  }
  .faq details p {
    font-size:14px;
    line-height:1.85;
    margin:0;
    padding:0 5px 20px 28px
  }
  .follow {
    display:block;
    min-height:0;
    padding:34px 22px 40px;
    background:#27bdf1;
    overflow:hidden
  }
  .follow>.scene {
    display:none
  }
  .follow h2 {
    font-size:24px;
    line-height:1.65;
    text-align:center
  }
  .follow .cta {
    position:relative!important;
    left:auto;
    width:100%;
    margin-top:24px;
    font-size:16px;
    min-height:58px
  }
  .follow>p {
    font-size:18px;
    margin:24px 0 0;
    text-align:right;
    color:#fff
  }
  .footer {
    display:block;
    padding:30px 22px;
    background:#fff
  }
  .footer .brand {
    flex-direction:column;
    align-items:flex-start;
    gap:4px
  }
  .footer .brand strong {
    font-size:24px
  }
  .footer .brand small {
    font-size:10px
  }
  .footer nav {
    flex-wrap:wrap;
    gap:15px 20px;
    font-size:12px;
    margin:25px 0
  }
  .footer>small {
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}
/* 原画の画素を超えて引き伸ばさないデスクトップ幅。文字は独立して拡大可能。 */
@media(min-width:768px) {
  .page {
    max-width:836px
  }
  .header {
    height:56px;
    padding:0 4%;
    gap:12px
  }
  .brand strong {
    font-size:18px
  }
  .brand small {
    font-size:7px
  }
  .desktop-nav {
    gap:9px;
    font-size:9px
  }
  .header-cta {
    font-size:10px;
    padding:.45em .8em
  }
  .hero-future {
    font-size:1.8cqw;
    left:86.6%;
    width:13%
  }
  .poster-top {
    font-size:4.05cqw;
    top:3.9%;
    left:45.9%;
    letter-spacing:-.065em
  }
  .poster-bottom {
    font-size:4.2cqw;
    top:79%
  }
  .hero-desc {
    font-size:1.72cqw
  }
  .about-copy p {
    font-size:12px
  }
  .about h2 {
    font-size:2.85cqw
  }
  .feature-grid p {
    font-size:12px;
    line-height:1.65
  }
  .feature-grid h3 {
    font-size:15px
  }
  .support-card ul {
    margin-top:4cqw;
    margin-left:8cqw;
    font-size:10px
  }
  .support-card h3 {
    font-size:13px;
    padding-left:9px
  }
  .support-intro>p {
    font-size:11px
  }
  .future-copy>p {
    font-size:10px
  }
  .offline-note {
    left:77%;
    width:25%
  }
  .future-note {
    margin-top:4.4cqw;
    font-size:1.95cqw
  }
  .flow li b {
    font-size:17px;
    top:3px;
    background:#e7faff
  }
  .flow h3 {
    font-size:10px
  }
  .flow li p {
    font-size:9px
  }
  .price>p:not(.amount):not(.hand) {
    font-size:9px
  }
  .faq {
    padding:17px 4%;
    display:block
  }
  .faq>div:first-child {
    width:100%;
    gap:16px;
    margin-bottom:20px
  }
  .faq h2 {
    font-size:20px
  }
  .faq-items {
    grid-template-columns:repeat(2,1fr);
    gap:14px
  }
  .faq summary {
    font-size:12px;
    padding-left:25px;
    min-height:35px;
    padding-right:20px
  }
  .faq summary::before {
    font-size:19px
  }
  .faq summary::after {
    font-size:17px
  }
  .faq details p {
    font-size:12px;
    margin-top:10px
  }
  .footer {
    flex-wrap:wrap;
    gap:16px;
    padding:22px 4%
  }
  .footer .brand strong {
    font-size:16px
  }
  .footer .brand small {
    font-size:8px
  }
  .footer nav {
    font-size:10px;
    gap:13px
  }
  .footer>small {
    font-size:9px
  }
}
@media(min-width:768px) {
  .about-copy p {
    font-size:11px
  }
  .support-card {
    padding-top:2.2cqw
  }
}
@media(max-width:767px) {
  .hero-love {
    left:80%;
    font-size:4.6cqw;
    width:19%;
    letter-spacing:0
  }
  .hero-desc {
    left:4%;
    font-size:3.08cqw
  }
  .hero-mobile-note {
    top:48%;
    right:1.5%;
    font-size:3.25cqw;
    line-height:1.45;
    transform:rotate(-5deg)
  }
  .mobile-character {
    height:170px;
    background-position:-433px -760px
  }
}
@font-face {
  font-family:Yusei;
  src:url('fonts/YuseiMagic-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
.hand {
  font-family:Yusei,Noto,sans-serif;
  font-style:normal;
  font-weight:400
}
@media(min-width:768px) {
  .header {
    min-height:56px
  }
  .features>h2 {
    font-size:2.45cqw
  }
}
@media(max-width:767px) {
  .future-photos {
    height:calc((100cqw - 44px) * 179 / 427);
    background-size:calc((100cqw - 44px) * 836 / 427) auto;
    background-position:calc((100cqw - 44px) * -305 / 427) calc((100cqw - 44px) * -1347 / 427)
  }
  .future-photos .offline-note {
    left:76%;
    width:23%;
    font-size:2.85cqw
  }
}
@media(max-width:767px) {
  .about {
    padding-bottom:230px
  }
  .mobile-character {
    left:0;
    width:218px;
    height:218px;
    background-image:url('about-cutout.png');
    background-size:contain;
    background-position:center bottom;
    background-repeat:no-repeat
  }
}
@media(max-width:767px) {
  .future-photos {
    --photo-width:min(calc(100cqw - 44px),427px);
    width:var(--photo-width);
    height:calc(var(--photo-width) * 179 / 427);
    background-size:calc(var(--photo-width) * 836 / 427) auto;
    background-position:calc(var(--photo-width) * -305 / 427) calc(var(--photo-width) * -1347 / 427)
  }
}