{"id":10169,"date":"2026-05-06T22:48:03","date_gmt":"2026-05-06T13:48:03","guid":{"rendered":"https:\/\/www.learnal.website\/?post_type=service&#038;p=10169"},"modified":"2026-05-07T09:55:22","modified_gmt":"2026-05-07T00:55:22","slug":"10169","status":"publish","type":"service","link":"https:\/\/www.learnal.website\/?service=10169","title":{"rendered":""},"content":{"rendered":"\n\n<!-- Learnal LP: WordPress Custom HTML\u7528\u3002script\/JSON\u306a\u3057 -->\n<style>\n:root {\n  --navy: #06245c;\n  --deep: #001644;\n  --blue: #0d4d95;\n  --teal: #008e9b;\n  --aqua: #12aeb5;\n  --red: #e61519;\n  --line: #06c755;\n  --line-dark: #00a83f;\n  --orange: #ff8a00;\n  --yellow: #ffc400;\n  --sky: #dff7ff;\n  --fresh: #2bd4c8;\n  --paper: #ffffff;\n  --mist: #eef9ff;\n  --ink: #071b45;\n  --muted: #42526e;\n  --shadow: 0 16px 34px rgba(0, 24, 76, 0.16);\n  --soft-shadow: 0 10px 22px rgba(6, 36, 92, 0.1);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  scroll-padding-top: 128px;\n}\n\nbody {\n  margin: 0;\n  color: var(--ink);\n  font-family:\n    \"Hiragino Kaku Gothic ProN\", \"Yu Gothic\", \"YuGothic\", \"Noto Sans JP\",\n    system-ui, sans-serif;\n  background:\n    radial-gradient(circle at 50% -8%, rgba(255, 196, 0, 0.28), transparent 22%),\n    radial-gradient(circle at 18% 8%, rgba(43, 212, 200, 0.2), transparent 24%),\n    radial-gradient(circle at 82% 2%, rgba(255, 196, 0, 0.18), transparent 18%),\n    linear-gradient(135deg, rgba(0, 142, 155, 0.08) 0 2px, transparent 2px 32px),\n    linear-gradient(160deg, #f9fdff 0%, #eaf8ff 44%, #ffffff 78%);\n  letter-spacing: 0;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\nimg {\n  display: block;\n  max-width: 100%;\n}\n\n.site-header {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  min-height: 70px;\n  padding: 10px clamp(16px, 4vw, 42px);\n  color: #fff;\n  background:\n    linear-gradient(90deg, rgba(43, 212, 200, 0.12), transparent 32%),\n    linear-gradient(90deg, var(--deep), var(--navy) 68%, #063874);\n  box-shadow: 0 4px 14px rgba(0, 18, 63, 0.26);\n}\n\n.brand {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  min-width: max-content;\n  font-size: clamp(1.45rem, 2.2vw, 2rem);\n  font-weight: 800;\n}\n\n.brand-logo {\n  width: clamp(220px, 30vw, 340px);\n  height: auto;\n  max-height: 76px;\n  object-fit: contain;\n}\n\n.site-header .brand-logo,\n.footer .brand-logo {\n  filter: brightness(0) invert(1);\n}\n\n.book-icon {\n  position: relative;\n  width: 36px;\n  height: 30px;\n  border: 4px solid currentColor;\n  border-radius: 6px 6px 3px 3px;\n}\n\n.book-icon::before {\n  position: absolute;\n  left: 50%;\n  top: -4px;\n  width: 4px;\n  height: 30px;\n  background: currentColor;\n  content: \"\";\n  transform: translateX(-50%);\n}\n\n.nav {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  width: 100%;\n}\n\n.nav a,\n.header-cta {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  padding: 9px 24px;\n  border-radius: 999px;\n  font-weight: 800;\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.nav a {\n  color: var(--navy);\n  background: #fff;\n  box-shadow: inset 0 -3px 0 rgba(0, 36, 94, 0.12);\n}\n\n.header-cta {\n  color: #fff;\n  background: var(--red);\n  box-shadow: inset 0 -3px 0 rgba(111, 0, 0, 0.28);\n}\n\nmain {\n  overflow: hidden;\n}\n\n#campaign,\n#benefits,\n#flow,\n#contact {\n  scroll-margin-top: 128px;\n}\n\n.section-frame {\n  width: min(1160px, calc(100% - 32px));\n  margin-inline: auto;\n}\n\n.hero {\n  position: relative;\n  isolation: isolate;\n  display: grid;\n  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.85fr);\n  gap: clamp(20px, 3vw, 44px);\n  min-height: 640px;\n  padding: clamp(32px, 5vw, 66px) 0 26px;\n}\n\n.hero::before {\n  position: absolute;\n  inset: 22px -42px auto;\n  z-index: -1;\n  height: min(470px, 78%);\n  border: 1px solid rgba(255, 255, 255, 0.78);\n  border-radius: 18px;\n  background:\n    linear-gradient(115deg, rgba(255, 255, 255, 0.9), rgba(223, 247, 255, 0.56)),\n    radial-gradient(circle at 14% 20%, rgba(255, 196, 0, 0.2), transparent 20%),\n    radial-gradient(circle at 80% 10%, rgba(43, 212, 200, 0.18), transparent 20%);\n  box-shadow: 0 22px 54px rgba(6, 36, 92, 0.08);\n  content: \"\";\n}\n\n.hero::after {\n  position: absolute;\n  right: min(43%, 440px);\n  top: 88px;\n  z-index: -1;\n  width: 96px;\n  height: 96px;\n  border-radius: 50%;\n  background:\n    radial-gradient(circle, var(--yellow) 0 5px, transparent 6px),\n    radial-gradient(circle at 75% 25%, var(--fresh) 0 4px, transparent 5px),\n    radial-gradient(circle at 35% 78%, rgba(255, 255, 255, 0.92) 0 5px, transparent 6px);\n  content: \"\";\n}\n\n.hero-copy {\n  position: relative;\n  align-self: center;\n  padding-left: clamp(0px, 1.4vw, 18px);\n}\n\n.eyebrow {\n  position: relative;\n  display: inline-block;\n  margin: 0 0 18px;\n  padding: 10px 22px;\n  color: #fff;\n  background: linear-gradient(90deg, var(--deep), var(--navy) 18%, #0c3982 72%, #008e9b);\n  box-shadow: 8px 8px 0 rgba(43, 212, 200, 0.9);\n  font-size: clamp(1.05rem, 2vw, 1.55rem);\n  font-weight: 900;\n}\n\n.eyebrow::after {\n  position: absolute;\n  right: -18px;\n  top: -10px;\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background: var(--yellow);\n  box-shadow: 18px 18px 0 -3px var(--fresh);\n  content: \"\";\n}\n\nh1,\nh2,\nh3,\np {\n  margin-top: 0;\n}\n\n.hero-title {\n  position: relative;\n  isolation: isolate;\n  margin-bottom: 18px;\n  color: var(--navy);\n  font-size: clamp(4.4rem, 12vw, 9.2rem);\n  font-weight: 950;\n  line-height: 0.98;\n}\n\n.hero-title::before {\n  position: absolute;\n  left: 0;\n  top: 0.08em;\n  z-index: -1;\n  width: 0.18em;\n  height: 0.72em;\n  border-radius: 999px;\n  background: linear-gradient(var(--yellow), var(--orange));\n  box-shadow: 0.17em 0.1em 0 rgba(18, 174, 181, 0.82);\n  content: \"\";\n  transform: rotate(-16deg);\n}\n\n.hero-title span {\n  display: block;\n}\n\n.title-main {\n  width: fit-content;\n  letter-spacing: 0;\n  white-space: nowrap;\n  text-shadow:\n    0.025em 0.025em 0 #fff,\n    0.055em 0.06em 0 rgba(0, 37, 96, 0.15);\n}\n\n.title-punch {\n  position: relative;\n  width: fit-content;\n  color: var(--teal);\n  letter-spacing: 0;\n  white-space: nowrap;\n  text-shadow:\n    0.028em 0.03em 0 #fff,\n    0.072em 0.07em 0 rgba(0, 27, 82, 0.13);\n}\n\n.title-punch::before {\n  position: absolute;\n  left: -0.08em;\n  right: -0.06em;\n  bottom: 0.05em;\n  z-index: -1;\n  height: 0.28em;\n  border-radius: 999px;\n  background: linear-gradient(90deg, rgba(18, 174, 181, 0.95), rgba(18, 174, 181, 0.35));\n  content: \"\";\n  transform: rotate(-2deg);\n}\n\n.title-punch::after {\n  position: absolute;\n  right: -0.16em;\n  top: 0.02em;\n  width: 0.16em;\n  height: 0.16em;\n  border-radius: 50%;\n  background: var(--yellow);\n  box-shadow:\n    -0.22em 0.18em 0 -0.04em #fff,\n    -0.22em 0.18em 0 0 var(--yellow),\n    0.17em 0.26em 0 -0.04em #fff,\n    0.17em 0.26em 0 0 var(--orange);\n  content: \"\";\n}\n\nh1 span:last-child {\n  color: var(--teal);\n}\n\n.hero-lead {\n  position: relative;\n  width: fit-content;\n  margin-bottom: 26px;\n  padding: 0 6px 7px 0;\n  color: var(--navy);\n  font-size: clamp(1.3rem, 3vw, 2rem);\n  font-weight: 900;\n}\n\n.hero-lead::after {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: 6px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, var(--yellow), var(--fresh));\n  content: \"\";\n}\n\n.hero-actions {\n  display: grid;\n  gap: 14px;\n  width: min(520px, 100%);\n}\n\n.mobile-actions {\n  display: none;\n}\n\n.line-button,\n.sub-button,\n.phone-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  min-height: 66px;\n  padding: 14px 26px;\n  border-radius: 999px;\n  font-weight: 950;\n  line-height: 1.15;\n}\n\n.line-button {\n  color: #fff;\n  background:\n    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 38%),\n    linear-gradient(#08d85f, var(--line) 52%, var(--line-dark));\n  border: 3px solid #fff;\n  box-shadow: 0 8px 0 rgba(0, 120, 50, 0.24), 0 18px 32px rgba(6, 199, 85, 0.24);\n  font-size: clamp(1.18rem, 2.7vw, 2rem);\n}\n\n.line-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: var(--line);\n  background: #fff;\n  font-size: 0.72rem;\n  font-weight: 950;\n}\n\n.sub-button {\n  color: var(--navy);\n  background: linear-gradient(180deg, #fff, #f3fbff);\n  border: 3px solid var(--navy);\n  box-shadow: var(--soft-shadow);\n  font-size: clamp(1.05rem, 2vw, 1.35rem);\n}\n\n.chevron {\n  width: 13px;\n  height: 13px;\n  border-top: 3px solid currentColor;\n  border-right: 3px solid currentColor;\n  transform: rotate(45deg);\n}\n\n.teacher-panel {\n  position: relative;\n  align-self: end;\n  min-height: 580px;\n}\n\n.teacher-photo {\n  position: absolute;\n  inset: 0 0 88px 46px;\n  overflow: hidden;\n  border: 5px solid #fff;\n  border-radius: 10px;\n  box-shadow: 0 22px 44px rgba(6, 36, 92, 0.18);\n}\n\n.teacher-photo::after {\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(6, 36, 92, 0.08)),\n    linear-gradient(115deg, rgba(255, 255, 255, 0.28), transparent 38%);\n  content: \"\";\n  pointer-events: none;\n}\n\n.teacher-photo img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: 58% 50%;\n}\n\n.ribbon {\n  position: absolute;\n  left: 8px;\n  top: 96px;\n  display: grid;\n  place-items: center;\n  width: 128px;\n  height: 128px;\n  color: var(--red);\n  background: #fff;\n  border: 8px solid var(--yellow);\n  border-radius: 50%;\n  box-shadow: var(--shadow);\n  font-weight: 950;\n  line-height: 1;\n}\n\n.ribbon strong {\n  font-size: 3.3rem;\n}\n\n.speech {\n  position: absolute;\n  right: 0;\n  bottom: 18px;\n  width: min(360px, 86%);\n  padding: 24px 22px;\n  border: 1px solid rgba(0, 142, 155, 0.22);\n  border-left: 7px solid var(--teal);\n  border-radius: 10px;\n  color: var(--navy);\n  background:\n    linear-gradient(90deg, rgba(18, 174, 181, 0.1), transparent 34%),\n    rgba(255, 255, 255, 0.96);\n  box-shadow:\n    0 1px 0 rgba(255, 255, 255, 0.85) inset,\n    0 18px 34px rgba(6, 36, 92, 0.14);\n  text-align: left;\n}\n\n.speech strong {\n  display: block;\n  margin-bottom: 10px;\n  color: var(--navy);\n  font-size: clamp(1.08rem, 2vw, 1.45rem);\n  line-height: 1.45;\n}\n\n.speech span {\n  display: block;\n  font-weight: 800;\n  line-height: 1.55;\n}\n\n.campaign-grid {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 14px;\n  width: min(1160px, calc(100% - 32px));\n  margin: 0 auto 32px;\n  padding: 30px 22px 26px;\n  border: 9px solid #7d5f35;\n  border-radius: 6px;\n  background:\n    linear-gradient(9deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px),\n    linear-gradient(94deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 22px),\n    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.1), transparent 20%),\n    linear-gradient(160deg, #2a5b4f, #173f38 58%, #102f2d);\n  box-shadow:\n    inset 0 0 0 2px rgba(255, 255, 255, 0.08),\n    inset 0 0 46px rgba(0, 0, 0, 0.28),\n    0 18px 34px rgba(6, 36, 92, 0.16);\n  font-family:\n    \"Chalk-S\", \"TsukuARdGothic-Regular\", \"YuKyokasho\", \"Hiragino Sans\",\n    \"Yu Gothic\", \"Noto Sans JP\", sans-serif;\n}\n\n.campaign-grid::before {\n  grid-column: 1 \/ -1;\n  width: fit-content;\n  margin: -6px auto 8px;\n  color: rgba(247, 255, 250, 0.7);\n  content: \"\u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u8a73\u7d30\";\n  font-size: clamp(1.7rem, 4vw, 2.6rem);\n  font-weight: 700;\n  line-height: 1.18;\n  letter-spacing: 0.02em;\n  text-shadow:\n    0 0 1px rgba(255, 255, 255, 0.24),\n    0.018em 0.018em 0 rgba(255, 255, 255, 0.04);\n}\n\n.campaign-card {\n  position: relative;\n  display: grid;\n  place-items: center;\n  min-height: 144px;\n  padding: 30px 12px 18px;\n  border: 2px solid rgba(245, 255, 248, 0.76);\n  border-radius: 7px 4px 8px 5px;\n  background:\n    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 34%),\n    transparent;\n  box-shadow:\n    0 0 0 1px rgba(245, 255, 248, 0.14) inset,\n    0 0 12px rgba(255, 255, 255, 0.05);\n  text-align: center;\n  overflow: visible;\n  transform: rotate(-1.2deg);\n}\n\n.campaign-card::before {\n  position: absolute;\n  left: 14px;\n  right: 14px;\n  bottom: 10px;\n  height: 4px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.22);\n  content: \"\";\n  transform: rotate(-1deg);\n}\n\n.campaign-card::after {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background:\n    radial-gradient(circle at 20% 32%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 13px),\n    radial-gradient(circle at 77% 62%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 11px);\n  content: \"\";\n  pointer-events: none;\n}\n\n.campaign-card:nth-child(2),\n.campaign-card:nth-child(5) {\n  transform: rotate(1deg);\n}\n\n.campaign-card:nth-child(3) {\n  transform: rotate(-0.4deg);\n}\n\n.campaign-card:nth-child(4) {\n  transform: rotate(0.6deg);\n}\n\n.campaign-card p::before {\n  position: absolute;\n  left: 10px;\n  top: 10px;\n  display: inline-grid;\n  place-items: center;\n  min-width: 32px;\n  height: 22px;\n  margin: 0;\n  padding: 0 7px;\n  border-radius: 999px;\n  color: #173f38;\n  background: rgba(247, 255, 250, 0.92);\n  border: 1px solid rgba(247, 255, 250, 0.6);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);\n  font-size: 0.72rem;\n  font-weight: 700;\n  line-height: 1;\n}\n\n.campaign-card:nth-child(1) p::before {\n  content: \"\u7279\u5178\";\n}\n\n.campaign-card:nth-child(2) p::before {\n  content: \"\u671f\u9593\";\n}\n\n.campaign-card:nth-child(2) p {\n  font-size: 0;\n  line-height: 0;\n  margin: 0;\n}\n\n.campaign-card:nth-child(3) p,\n.campaign-card:nth-child(4) p {\n  font-size: 0;\n  line-height: 0;\n  margin: 0;\n}\n\n.campaign-card:nth-child(2) p::before,\n.campaign-card:nth-child(3) p::before,\n.campaign-card:nth-child(4) p::before {\n  font-size: 0.72rem;\n  line-height: 1;\n}\n\n.campaign-card:nth-child(3) p::before {\n  content: \"\u5bfe\u8c61\";\n}\n\n.campaign-card:nth-child(4) p::before {\n  content: \"\u6642\u9593\";\n}\n\n.campaign-card:nth-child(5) p::before {\n  content: \"\u7d39\u4ecb\";\n}\n\n.campaign-card p {\n  margin: 4px 0 5px;\n  color: rgba(247, 255, 250, 0.82);\n  font-weight: 700;\n  line-height: 1.45;\n  letter-spacing: 0.01em;\n  text-shadow:\n    0 0 1px rgba(255, 255, 255, 0.34),\n    0.014em 0.014em 0 rgba(255, 255, 255, 0.04);\n}\n\n.campaign-card strong {\n  color: rgba(255, 255, 255, 0.86);\n  font-size: clamp(1.18rem, 2vw, 1.55rem);\n  line-height: 1.38;\n  font-weight: 700;\n  letter-spacing: 0.01em;\n  text-shadow:\n    0 0 1px rgba(255, 255, 255, 0.38),\n    0.014em 0.014em 0 rgba(255, 255, 255, 0.04);\n}\n\n.campaign-card:nth-child(4) strong {\n  font-size: clamp(0.9rem, 1.42vw, 1.1rem);\n  line-height: 1.45;\n  white-space: nowrap;\n}\n\n.campaign-card small,\n.gift-card strong {\n  color: var(--red);\n}\n\n.card-icon {\n  display: none;\n}\n\n.card-icon.book {\n  border: 4px solid currentColor;\n  border-radius: 6px 6px 2px 2px;\n}\n\n.card-icon.book::after,\n.card-icon.calendar::after,\n.card-icon.clock::after,\n.card-icon.gift::after,\n.card-icon.user::after,\n.phone-icon::after {\n  position: absolute;\n  content: \"\";\n}\n\n.card-icon.calendar {\n  border: 4px solid currentColor;\n  border-top-width: 11px;\n  border-radius: 6px;\n}\n\n.card-icon.user {\n  border-radius: 50% 50% 8px 8px;\n  background:\n    radial-gradient(circle at 50% 28%, currentColor 0 9px, transparent 10px),\n    linear-gradient(currentColor 0 0) 50% 90% \/ 34px 22px no-repeat;\n}\n\n.card-icon.clock {\n  border: 4px solid currentColor;\n  border-radius: 50%;\n}\n\n.card-icon.clock::after {\n  left: 18px;\n  top: 8px;\n  width: 12px;\n  height: 16px;\n  border-left: 4px solid currentColor;\n  border-bottom: 4px solid currentColor;\n}\n\n.card-icon.gift {\n  border: 4px solid currentColor;\n  color: var(--teal);\n}\n\n.card-icon.gift::after {\n  inset: -4px 15px;\n  border-left: 4px solid currentColor;\n  border-right: 4px solid currentColor;\n}\n\n.recommend {\n  padding: 30px clamp(16px, 4vw, 44px) 46px;\n  color: #fff;\n  background:\n    radial-gradient(circle at 12% 12%, rgba(255, 196, 0, 0.34) 0 2px, transparent 3px 16px),\n    linear-gradient(95deg, #008794, #00a8b8 58%, #007d92);\n}\n\n.recommend h2,\n.benefits h2,\n.flow h2 {\n  position: relative;\n  width: fit-content;\n  margin-inline: auto;\n  margin-bottom: 24px;\n  font-size: clamp(1.8rem, 4vw, 3rem);\n  font-weight: 950;\n  text-align: center;\n}\n\n.recommend h2::before,\n.benefits h2::before,\n.flow h2::before {\n  display: block;\n  width: fit-content;\n  margin: 0 auto 7px;\n  padding: 4px 12px;\n  border-radius: 999px;\n  color: var(--navy);\n  background: #fff;\n  box-shadow: inset 0 -3px 0 rgba(255, 196, 0, 0.65);\n  content: \"CAMPAIGN\";\n  font-size: 0.72rem;\n  font-weight: 950;\n  line-height: 1.2;\n}\n\n.benefits h2::before {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.16);\n  box-shadow: inset 0 -3px 0 rgba(43, 212, 200, 0.6);\n  content: \"POINT\";\n}\n\n.flow h2::before {\n  content: \"STEP\";\n}\n\n.recommend h2::after,\n.benefits h2::after,\n.flow h2::after {\n  display: block;\n  width: 72%;\n  height: 5px;\n  margin: 8px auto 0;\n  border-radius: 999px;\n  background: linear-gradient(90deg, transparent, var(--yellow), var(--fresh), transparent);\n  content: \"\";\n}\n\n.recommend-grid,\n.benefit-grid,\n.flow-grid {\n  display: grid;\n  gap: 18px;\n  width: min(1160px, 100%);\n  margin-inline: auto;\n}\n\n.recommend-grid {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.recommend article {\n  overflow: hidden;\n  border: 4px solid #fff;\n  border-radius: 8px;\n  background: #fff;\n  box-shadow: var(--shadow);\n}\n\n.recommend p {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 72px;\n  margin: 0;\n  padding: 14px 18px;\n  color: var(--navy);\n  font-size: clamp(1rem, 2vw, 1.32rem);\n  font-weight: 900;\n  line-height: 1.35;\n}\n\n.check {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 auto;\n  border: 3px solid var(--navy);\n  border-radius: 3px;\n  background:\n    linear-gradient(135deg, transparent 47%, var(--navy) 48% 60%, transparent 61%) 6px 5px \/ 14px 14px\n      no-repeat;\n}\n\n.crop {\n  position: relative;\n  overflow: hidden;\n  background: var(--mist);\n}\n\n.crop img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.recommend .crop {\n  aspect-ratio: 16 \/ 9;\n}\n\n.benefits {\n  padding: 42px clamp(16px, 4vw, 44px) 34px;\n  color: #fff;\n  background:\n    radial-gradient(circle at 8% 18%, rgba(43, 212, 200, 0.28) 0 2px, transparent 3px 14px),\n    linear-gradient(180deg, var(--deep), #062b70);\n}\n\n.benefit-grid {\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.benefit-card {\n  position: relative;\n  min-height: 370px;\n  padding: 26px 18px 20px;\n  border-radius: 10px;\n  color: var(--ink);\n  background: linear-gradient(180deg, #fff, #f9fdff);\n  box-shadow: 0 16px 32px rgba(0, 15, 52, 0.16);\n}\n\n.number {\n  position: absolute;\n  left: 18px;\n  top: 0;\n  display: grid;\n  place-items: start center;\n  width: 54px;\n  height: 74px;\n  padding-top: 9px;\n  color: #fff;\n  background: var(--yellow);\n  font-size: 1.5rem;\n  font-weight: 950;\n  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);\n}\n\n.benefit-card h3 {\n  min-height: 76px;\n  margin: 0 0 12px 72px;\n  color: var(--teal);\n  font-size: clamp(1.2rem, 2.3vw, 1.58rem);\n  font-weight: 950;\n  line-height: 1.3;\n}\n\n.benefit-card .crop {\n  aspect-ratio: 16 \/ 9;\n  margin-bottom: 16px;\n  border-radius: 6px;\n}\n\n.benefit-card p {\n  margin: 0;\n  font-weight: 700;\n  line-height: 1.65;\n}\n\n.flow {\n  padding: 34px clamp(16px, 4vw, 44px) 30px;\n  background:\n    linear-gradient(180deg, #fff, #f5fbff);\n}\n\n.flow h2 {\n  color: var(--navy);\n}\n\n.flow-grid {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n.flow article {\n  position: relative;\n  min-height: 260px;\n  padding: 16px;\n  border: 2px solid rgba(13, 77, 149, 0.14);\n  border-radius: 10px;\n  background: linear-gradient(180deg, #fff, #f9fdff);\n  box-shadow: var(--soft-shadow);\n}\n\n.flow article > span {\n  display: inline-grid;\n  place-items: center;\n  min-width: 42px;\n  height: 36px;\n  padding: 0 8px;\n  border-radius: 999px;\n  color: #fff;\n  background: linear-gradient(135deg, var(--orange), var(--yellow) 42%, var(--teal));\n  font-weight: 950;\n}\n\n.flow h3 {\n  min-height: 44px;\n  margin: 10px 0 12px;\n  color: var(--teal);\n  font-size: 1rem;\n  line-height: 1.35;\n}\n\n.flow .crop {\n  aspect-ratio: 16 \/ 9;\n  margin-bottom: 12px;\n  border-radius: 6px;\n}\n\n.flow p {\n  margin: 0;\n  font-size: 0.93rem;\n  font-weight: 700;\n  line-height: 1.55;\n}\n\n.final-cta {\n  width: min(1160px, calc(100% - 32px));\n  margin: 22px auto 38px;\n  padding: clamp(24px, 4vw, 42px);\n  border: 4px solid var(--teal);\n  border-radius: 14px;\n  outline: 4px solid var(--yellow);\n  background:\n    linear-gradient(115deg, rgba(255, 255, 255, 0.94), rgba(239, 250, 255, 0.98)),\n    radial-gradient(circle at 92% 18%, rgba(255, 196, 0, 0.32), transparent 18%);\n  text-align: center;\n}\n\n.final-cta p {\n  margin-bottom: 2px;\n  color: var(--navy);\n  font-size: clamp(1.1rem, 2vw, 1.55rem);\n  font-weight: 900;\n}\n\n.final-cta h2 {\n  margin-bottom: 24px;\n  color: var(--navy);\n  font-size: clamp(2rem, 5vw, 4rem);\n  font-weight: 950;\n}\n\n.final-actions {\n  display: flex;\n  justify-content: center;\n  gap: 18px;\n  flex-wrap: wrap;\n}\n\n.line-button.compact,\n.phone-button {\n  min-height: 62px;\n  min-width: min(360px, 100%);\n  font-size: clamp(1rem, 2vw, 1.45rem);\n}\n\n.phone-button {\n  color: var(--navy);\n  background: #fff;\n  border: 3px solid var(--navy);\n}\n\n.phone-icon {\n  position: relative;\n  width: 28px;\n  height: 28px;\n  border: 4px solid currentColor;\n  border-right-color: transparent;\n  border-top-color: transparent;\n  border-radius: 50%;\n  transform: rotate(-42deg);\n}\n\n.phone-icon::after {\n  right: -5px;\n  bottom: -4px;\n  width: 14px;\n  height: 8px;\n  border-radius: 3px;\n  background: currentColor;\n}\n\n.final-cta .note {\n  margin: 20px 0 0;\n  color: var(--navy);\n  font-size: clamp(1.05rem, 2vw, 1.35rem);\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: clamp(18px, 5vw, 60px);\n  padding: 28px 16px 34px;\n  color: #fff;\n  background:\n    radial-gradient(circle at 12% 45%, rgba(18, 174, 181, 0.45) 0 2px, transparent 3px 12px),\n    linear-gradient(90deg, var(--deep), #052869 55%, var(--deep));\n}\n\n.footer p {\n  margin: 0;\n  color: #fff;\n  font-size: clamp(1.8rem, 5vw, 4rem);\n  font-weight: 950;\n}\n\n.footer p::first-letter {\n  color: var(--yellow);\n}\n\n.mobile-sticky-cta {\n  display: none;\n}\n\n@media (max-width: 980px) {\n  .site-header {\n    flex-wrap: wrap;\n  }\n\n  .nav {\n    order: 3;\n    justify-content: flex-start;\n    overflow-x: auto;\n    padding-bottom: 4px;\n  }\n\n  .hero {\n    grid-template-columns: 1fr;\n    min-height: auto;\n    padding-top: 34px;\n  }\n\n  .desktop-actions {\n    display: none;\n  }\n\n  .mobile-actions {\n    display: grid;\n    width: min(520px, 100%);\n    margin-inline: auto;\n  }\n\n  .hero-copy {\n    align-self: start;\n  }\n\n  .teacher-panel {\n    min-height: 520px;\n  }\n\n  .teacher-photo {\n    inset: 0 0 72px;\n  }\n\n  .campaign-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .gift-card {\n    grid-column: 1 \/ -1;\n  }\n\n  .recommend-grid,\n  .benefit-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .flow-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 620px) {\n  html {\n    scroll-padding-top: 74px;\n  }\n\n  #campaign,\n  #benefits,\n  #flow,\n  #contact {\n    scroll-margin-top: 74px;\n  }\n\n  body {\n    padding-bottom: 82px;\n  }\n\n  .site-header {\n    min-height: auto;\n    gap: 8px;\n    padding: 7px 10px;\n  }\n\n  .brand {\n    font-size: 1.12rem;\n  }\n\n  .brand-logo {\n    width: 214px;\n    max-height: 58px;\n  }\n\n  .book-icon {\n    width: 26px;\n    height: 23px;\n    border-width: 3px;\n  }\n\n  .header-cta {\n    margin-left: auto;\n  }\n\n  .nav {\n    display: none;\n  }\n\n  .header-cta {\n    min-height: 34px;\n    padding: 8px 13px;\n    font-size: 0.82rem;\n  }\n\n  .site-header::after {\n    position: absolute;\n    left: 10px;\n    right: 10px;\n    bottom: -6px;\n    height: 6px;\n    border-radius: 999px;\n    background: linear-gradient(90deg, var(--orange), var(--yellow), var(--fresh));\n    content: \"\";\n  }\n\n  .section-frame,\n  .campaign-grid,\n  .final-cta {\n    width: min(100% - 20px, 1160px);\n  }\n\n  .hero {\n    gap: 12px;\n    padding-top: 10px;\n  }\n\n  .hero::before {\n    inset: 6px -10px auto;\n    height: 78%;\n    border-radius: 12px;\n  }\n\n  .eyebrow {\n    margin-bottom: 12px;\n    padding: 8px 13px;\n    box-shadow: 5px 5px 0 var(--yellow);\n    font-size: 0.92rem;\n  }\n\n  .hero-title {\n    margin-bottom: 12px;\n    font-size: clamp(2.55rem, 13.8vw, 4.05rem);\n    padding-left: 4px;\n  }\n\n  .hero-lead {\n    margin-bottom: 14px;\n    font-size: 1rem;\n  }\n\n  .line-button,\n  .sub-button,\n  .phone-button {\n    min-height: 54px;\n    padding: 10px 14px;\n  }\n\n  .line-badge {\n    width: 36px;\n    height: 36px;\n  }\n\n  .teacher-panel {\n    min-height: 292px;\n  }\n\n  .teacher-photo {\n    inset: 0 0 52px;\n    border-width: 4px;\n    border-radius: 8px;\n  }\n\n  .teacher-photo img {\n    object-position: 58% 44%;\n  }\n\n  .ribbon {\n    left: 0;\n    top: 12px;\n    width: 82px;\n    height: 82px;\n    border-width: 5px;\n    font-size: 0.82rem;\n  }\n\n  .ribbon strong {\n    font-size: 2rem;\n  }\n\n  .speech {\n    right: 0;\n    bottom: 0;\n    width: 94%;\n    padding: 13px 14px;\n    border-width: 1px;\n    border-left-width: 6px;\n    border-radius: 8px;\n    text-align: left;\n    box-shadow:\n      0 1px 0 rgba(255, 255, 255, 0.85) inset,\n      0 12px 22px rgba(6, 36, 92, 0.12);\n  }\n\n  .speech strong {\n    margin-bottom: 6px;\n    font-size: 0.9rem;\n    line-height: 1.35;\n  }\n\n  .speech span {\n    display: block;\n    font-size: 0.76rem;\n    line-height: 1.35;\n  }\n\n  .campaign-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 10px;\n    padding: 20px 10px 12px;\n    border-width: 6px;\n    border-radius: 10px;\n  }\n\n  .campaign-card {\n    min-height: 118px;\n    padding: 30px 8px 14px;\n  }\n\n  .campaign-card p {\n    margin: 2px 0 3px;\n    font-size: 0.76rem;\n    line-height: 1.35;\n  }\n\n  .campaign-card p::before {\n    left: 8px;\n    top: 8px;\n    min-width: 28px;\n    height: 20px;\n    padding-inline: 6px;\n    font-size: 0.62rem;\n  }\n\n  .campaign-card:nth-child(2) p::before,\n  .campaign-card:nth-child(3) p::before,\n  .campaign-card:nth-child(4) p::before {\n    font-size: 0.62rem;\n  }\n\n  .campaign-card strong {\n    font-size: 1.02rem;\n    line-height: 1.35;\n  }\n\n  .campaign-card:nth-child(4) strong {\n    font-size: 0.68rem;\n    line-height: 1.45;\n    white-space: nowrap;\n  }\n\n  .gift-card {\n    grid-column: 1 \/ -1;\n  }\n\n  .card-icon {\n    width: 34px;\n    height: 34px;\n  }\n\n  .card-icon.user {\n    background:\n      radial-gradient(circle at 50% 28%, currentColor 0 7px, transparent 8px),\n      linear-gradient(currentColor 0 0) 50% 90% \/ 28px 18px no-repeat;\n  }\n\n  .card-icon.clock::after {\n    left: 14px;\n    top: 6px;\n    width: 10px;\n    height: 13px;\n    border-left-width: 3px;\n    border-bottom-width: 3px;\n  }\n\n  .flow-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .recommend {\n    padding: 26px 10px 34px;\n  }\n\n  .recommend h2,\n  .benefits h2,\n  .flow h2 {\n    margin-bottom: 18px;\n    font-size: 1.55rem;\n  }\n\n  .recommend h2::before,\n  .benefits h2::before,\n  .flow h2::before {\n    margin-bottom: 6px;\n    padding: 4px 10px;\n    font-size: 0.66rem;\n  }\n\n  .benefits,\n  .flow {\n    padding-inline: 10px;\n  }\n\n  .benefits {\n    padding-top: 34px;\n    padding-bottom: 28px;\n  }\n\n  .benefit-card {\n    min-height: auto;\n    padding: 22px 14px 18px;\n  }\n\n  .benefit-card h3 {\n    min-height: auto;\n    margin-left: 66px;\n    font-size: 1.14rem;\n  }\n\n  .flow article {\n    min-height: auto;\n  }\n\n  .final-cta {\n    margin-bottom: 24px;\n    padding: 22px 14px;\n    border-width: 3px;\n    outline-width: 3px;\n  }\n\n  .final-cta h2 {\n    font-size: 1.75rem;\n  }\n\n  .footer {\n    flex-direction: column;\n    gap: 10px;\n    text-align: center;\n  }\n\n  .footer p {\n    font-size: 1.55rem;\n  }\n\n  .mobile-sticky-cta {\n    position: fixed;\n    left: 10px;\n    right: 10px;\n    bottom: 10px;\n    z-index: 30;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    min-height: 58px;\n    padding: 10px 16px;\n    border: 3px solid #fff;\n    border-radius: 999px;\n    color: #fff;\n    background:\n      linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 34%),\n      linear-gradient(#08d85f, var(--line) 52%, var(--line-dark));\n    box-shadow: 0 10px 24px rgba(6, 36, 92, 0.22), 0 6px 0 rgba(0, 120, 50, 0.24);\n    font-weight: 950;\n    font-size: 1.08rem;\n  }\n}\n\n<\/style>\n\n<header class=\"site-header\">\n      <a class=\"brand\" href=\"#top\" aria-label=\"Learnal \u30c8\u30c3\u30d7\">\n        <img decoding=\"async\" class=\"brand-logo\" src=\".\/assets\/learnal-logo.png\" alt=\"Learnal\" \/>\n      <\/a>\n      <nav class=\"nav\" aria-label=\"\u30da\u30fc\u30b8\u5185\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\">\n        <a href=\"#top\">TOP<\/a>\n        <a href=\"#benefits\">\u7279\u9577<\/a>\n        <a href=\"#campaign\">\u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u8a73\u7d30<\/a>\n        <a href=\"#flow\">\u53c2\u52a0\u306e\u6d41\u308c<\/a>\n      <\/nav>\n      <a class=\"header-cta\" href=\"#contact\">\u7121\u6599\u76f8\u8ac7<\/a>\n    <\/header>\n\n    <main id=\"top\">\n      <section class=\"hero section-frame\">\n        <div class=\"hero-copy\">\n          <p class=\"eyebrow\">\u5b9a\u671f\u30c6\u30b9\u30c8\u5bfe\u7b56\u30ad\u30e3\u30f3\u30da\u30fc\u30f3<\/p>\n          <h1 class=\"hero-title\">\n            <span class=\"title-main\">\u539f\u5148\u751f\u304c<\/span>\n            <span class=\"title-punch\">\u4e00\u808c\u8131\u3050\u3002<\/span>\n          <\/h1>\n          <p class=\"hero-lead\">\u5b9a\u671f\u30c6\u30b9\u30c8\u524d\u306e\u5b66\u7fd2\u3092\u5fb9\u5e95\u30b5\u30dd\u30fc\u30c8<\/p>\n          <div class=\"hero-actions desktop-actions\">\n            <a class=\"line-button\" href=\"https:\/\/lin.ee\/YiJbHj1\" target=\"_blank\" rel=\"noreferrer\">\n              <span class=\"line-badge\">LINE<\/span>\n              LINE\u3067\u7121\u6599\u76f8\u8ac7\u3059\u308b\n              <span class=\"chevron\" aria-hidden=\"true\"><\/span>\n            <\/a>\n            <a class=\"sub-button\" href=\"#campaign\">\n              \u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u8a73\u7d30\u3092\u898b\u308b\n              <span class=\"chevron dark\" aria-hidden=\"true\"><\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"teacher-panel\" aria-label=\"\u539f\u5148\u751f\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\">\n          <div class=\"teacher-photo\">\n            <img decoding=\"async\" src=\".\/assets\/top-teacher.jpeg\" alt=\"\u9762\u8ac7\u3067\u751f\u5f92\u306b\u5411\u304d\u5408\u3046\u539f\u5148\u751f\" \/>\n          <\/div>\n          <div class=\"ribbon\">\n            <span>\u5148\u7740<\/span>\n            <strong>30<\/strong>\n            <span>\u540d<\/span>\n          <\/div>\n          <div class=\"speech\">\n            <strong>\u3042\u306e\u539f\u5148\u751f\u304c<br \/>\u307f\u3093\u306a\u306e\u305f\u3081\u306b<br \/>\u81ea\u7fd2\u5bfe\u5fdc\u3092\u884c\u3044\u307e\u3059!<\/strong>\n            <span>\u308f\u304b\u3089\u306a\u3044\u554f\u984c\u3092\u805e\u3044\u3066\u3001\u30c6\u30b9\u30c8\u306e\u6210\u7e3e\u4e0a\u3052\u3061\u3083\u304a\u3046!!<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"hero-actions mobile-actions\">\n          <a class=\"line-button\" href=\"https:\/\/lin.ee\/YiJbHj1\" target=\"_blank\" rel=\"noreferrer\">\n            <span class=\"line-badge\">LINE<\/span>\n            LINE\u3067\u7121\u6599\u76f8\u8ac7\u3059\u308b\n            <span class=\"chevron\" aria-hidden=\"true\"><\/span>\n          <\/a>\n          <a class=\"sub-button\" href=\"#campaign\">\n            \u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u8a73\u7d30\u3092\u898b\u308b\n            <span class=\"chevron dark\" aria-hidden=\"true\"><\/span>\n          <\/a>\n        <\/div>\n      <\/section>\n\n      <section id=\"campaign\" class=\"campaign-grid\" aria-label=\"\u30ad\u30e3\u30f3\u30da\u30fc\u30f3\u6982\u8981\">\n        <article class=\"campaign-card\">\n          <span class=\"card-icon book\" aria-hidden=\"true\"><\/span>\n          <p>\u65b0\u898f\u306e\u65b9\u306b\u306f<br \/>\u81ea\u7fd2+\u500b\u5225\u6388\u696d<\/p>\n          <strong>4\u56de <small>(\u7121\u6599)<\/small><\/strong>\n        <\/article>\n        <article class=\"campaign-card\">\n          <span class=\"card-icon calendar\" aria-hidden=\"true\"><\/span>\n          <p>\u671f\u9593<\/p>\n          <strong>5\u670825\u65e5\u301c<br \/>6\u670811\u65e5<\/strong>\n        <\/article>\n        <article class=\"campaign-card\">\n          <span class=\"card-icon user\" aria-hidden=\"true\"><\/span>\n          <p>\u5bfe\u8c61<\/p>\n          <strong>\u4e2d1\u301c\u4e2d3<\/strong>\n        <\/article>\n        <article class=\"campaign-card\">\n          <span class=\"card-icon clock\" aria-hidden=\"true\"><\/span>\n          <p>\u6642\u9593<\/p>\n          <strong>\u5e73\u65e5 18:00\u301c22:00<br \/>\u4f11\u65e5 9:00\u301c18:00<\/strong>\n        <\/article>\n        <article class=\"campaign-card gift-card\">\n          <span class=\"card-icon gift\" aria-hidden=\"true\"><\/span>\n          <p>\u5185\u90e8\u751f\u7279\u5178<\/p>\n          <strong>\u500b\u5225\u6388\u696d1\u56de<br \/>\u30d7\u30ec\u30bc\u30f3\u30c8<\/strong>\n        <\/article>\n      <\/section>\n\n      <section class=\"recommend\">\n        <h2>\u3053\u3093\u306a\u4e2d\u5b66\u751f\u306b\u304a\u3059\u3059\u3081<\/h2>\n        <div class=\"recommend-grid\">\n          <article>\n            <div class=\"crop crop-student-one\">\n              <img decoding=\"async\" src=\".\/assets\/student-focus.jpg\" alt=\"\u96c6\u4e2d\u3067\u304d\u305a\u60a9\u3080\u4e2d\u5b66\u751f\" \/>\n            <\/div>\n            <p><span class=\"check\"><\/span>\u5bb6\u3067\u306f\u96c6\u4e2d\u3067\u304d\u306a\u3044<\/p>\n          <\/article>\n          <article>\n            <div class=\"crop crop-student-two\">\n              <img decoding=\"async\" src=\".\/assets\/student-question.jpg\" alt=\"\u4f55\u304b\u3089\u52c9\u5f37\u3059\u308c\u3070\u3044\u3044\u304b\u8ff7\u3046\u4e2d\u5b66\u751f\" \/>\n            <\/div>\n            <p><span class=\"check\"><\/span>\u4f55\u304b\u3089\u52c9\u5f37\u3059\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u3044<\/p>\n          <\/article>\n          <article>\n            <div class=\"crop crop-student-three\">\n              <img decoding=\"async\" src=\".\/assets\/student-unsolved.png\" alt=\"\u308f\u304b\u3089\u306a\u3044\u554f\u984c\u306b\u60a9\u3080\u4e2d\u5b66\u751f\" \/>\n            <\/div>\n            <p><span class=\"check\"><\/span>\u308f\u304b\u3089\u306a\u3044\u554f\u984c\u3092\u305d\u306e\u307e\u307e\u306b\u3057\u3066\u3044\u308b<\/p>\n          <\/article>\n        <\/div>\n      <\/section>\n\n      <section id=\"benefits\" class=\"benefits\">\n        <h2>\u3057\u3063\u304b\u308a\u3068\u3057\u305f\u30b5\u30dd\u30fc\u30c8\u4f53\u52e2\u3067<br \/>\u5b9a\u671f\u8a66\u9a13\u307e\u3067\u30d5\u30a9\u30ed\u30fc<\/h2>\n        <div class=\"benefit-grid\">\n          <article class=\"benefit-card\">\n            <span class=\"number\">01<\/span>\n            <h3>\u81ea\u7fd2\u74b0\u5883\u3067<br \/>\u5b66\u7fd2\u91cf\u3092\u78ba\u4fdd<\/h3>\n            <div class=\"crop crop-reason-one\">\n              <img decoding=\"async\" src=\".\/assets\/reason-study.jpeg\" alt=\"\u81ea\u7fd2\u30b9\u30da\u30fc\u30b9\u3067\u52c9\u5f37\u3059\u308b\u751f\u5f92\" \/>\n            <\/div>\n            <p>\u9759\u304b\u3067\u96c6\u4e2d\u3067\u304d\u308b\u81ea\u7fd2\u30b9\u30da\u30fc\u30b9\u3092\u5b8c\u5099\u3002\u308f\u304b\u3089\u306a\u3044\u554f\u984c\u306f\u3059\u3050\u306b\u8cea\u554f\u3067\u304d\u307e\u3059\u3002<\/p>\n          <\/article>\n          <article class=\"benefit-card\">\n            <span class=\"number\">02<\/span>\n            <h3>\u8cea\u554f\u3057\u3084\u3059\u3044\u304b\u3089<br \/>\u3064\u307e\u305a\u304b\u306a\u3044<\/h3>\n            <div class=\"crop crop-reason-two\">\n              <img decoding=\"async\" src=\".\/assets\/reason-teach.jpeg\" alt=\"\u5148\u751f\u306b\u8cea\u554f\u3059\u308b\u751f\u5f92\" \/>\n            <\/div>\n            <p>\u539f\u5148\u751f\u304c\u5e38\u99d0\u3059\u308b\u304b\u3089\u3001\u3044\u3064\u3067\u3082\u8cea\u554fOK\u3002\u7406\u89e3\u3067\u304d\u308b\u307e\u3067\u4e01\u5be7\u306b\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n          <\/article>\n          <article class=\"benefit-card\">\n            <span class=\"number\">03<\/span>\n            <h3>\u500b\u5225\u6388\u696d4\u56de\u3067<br \/>\u4ed5\u4e0a\u3052\u307e\u3067\u30b5\u30dd\u30fc\u30c8<\/h3>\n            <div class=\"crop crop-reason-three\">\n              <img decoding=\"async\" src=\".\/assets\/reason-support.jpeg\" alt=\"\u500b\u5225\u6388\u696d\u3067\u8aac\u660e\u3092\u53d7\u3051\u308b\u751f\u5f92\" \/>\n            <\/div>\n            <p>\u4e00\u4eba\u3072\u3068\u308a\u306e\u8ab2\u984c\u306b\u5408\u308f\u305b\u305f\u500b\u5225\u6388\u696d\u3067\u3001\u30c6\u30b9\u30c8\u3067\u5f97\u70b9\u3067\u304d\u308b\u529b\u3092\u3064\u3051\u307e\u3059\u3002<\/p>\n          <\/article>\n        <\/div>\n      <\/section>\n\n      <section id=\"flow\" class=\"flow\">\n        <h2>\u53c2\u52a0\u307e\u3067\u306e\u6d41\u308c<\/h2>\n        <div class=\"flow-grid\">\n          <article>\n            <span>01<\/span>\n            <h3>\u7121\u6599\u76f8\u8ac7<\/h3>\n            <div class=\"crop crop-flow-one\">\n              <img decoding=\"async\" src=\".\/assets\/flow-consult.jpeg\" alt=\"\u7121\u6599\u76f8\u8ac7\u306e\u69d8\u5b50\" \/>\n            <\/div>\n            <p>LINE\u307e\u305f\u306f\u304a\u96fb\u8a71\u3067\u304a\u6c17\u8efd\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044\u3002<\/p>\n          <\/article>\n          <article>\n            <span>02<\/span>\n            <h3>\u5b66\u7fd2\u72b6\u6cc1\u3092\u78ba\u8a8d<\/h3>\n            <div class=\"crop crop-flow-two\">\n              <img decoding=\"async\" src=\".\/assets\/flow-check.jpeg\" alt=\"\u5b66\u7fd2\u72b6\u6cc1\u3092\u78ba\u8a8d\u3059\u308b\u9762\u8ac7\" \/>\n            <\/div>\n            <p>\u73fe\u5728\u306e\u5b66\u7fd2\u72b6\u6cc1\u3084\u8ab2\u984c\u3092\u30d2\u30a2\u30ea\u30f3\u30b0\u30fb\u5206\u6790\u3057\u307e\u3059\u3002<\/p>\n          <\/article>\n          <article>\n            <span>03<\/span>\n            <h3>\u81ea\u7fd2+\u500b\u5225\u6388\u696d\u30b9\u30bf\u30fc\u30c8<\/h3>\n            <div class=\"crop crop-flow-three\">\n              <img decoding=\"async\" src=\".\/assets\/flow-start.jpeg\" alt=\"\u81ea\u7fd2\u3068\u500b\u5225\u6388\u696d\u306e\u958b\u59cb\" \/>\n            <\/div>\n            <p>\u81ea\u7fd2\u3067\u5b66\u7fd2\u7fd2\u6163\u3092\u6574\u3048\u306a\u304c\u3089\u3001\u500b\u5225\u6388\u696d\u3067\u7406\u89e3\u3092\u6df1\u3081\u307e\u3059\u3002<\/p>\n          <\/article>\n          <article>\n            <span>04<\/span>\n            <h3>\u30c6\u30b9\u30c8\u672c\u756a\u3078\u5411\u3051\u3066\u4ed5\u4e0a\u3052<\/h3>\n            <div class=\"crop crop-flow-four\">\n              <img decoding=\"async\" src=\".\/assets\/flow-finish.jpeg\" alt=\"\u30c6\u30b9\u30c8\u672c\u756a\u3078\u5411\u3051\u3066\u4ed5\u4e0a\u3052\u308b\u751f\u5f92\" \/>\n            <\/div>\n            <p>\u30c6\u30b9\u30c8\u76f4\u524d\u307e\u3067\u5fb9\u5e95\u30b5\u30dd\u30fc\u30c8\u3002\u81ea\u4fe1\u3092\u6301\u3063\u3066\u672c\u756a\u3078\u9032\u307f\u307e\u3059\u3002<\/p>\n          <\/article>\n        <\/div>\n      <\/section>\n\n      <section id=\"contact\" class=\"final-cta\">\n        <div>\n          <p>\u5b9a\u671f\u30c6\u30b9\u30c8\u524d\u306b\u3001<\/p>\n          <h2>\u52c9\u5f37\u306e\u6d41\u308c\u3092\u6574\u3048\u307e\u305b\u3093\u304b?<\/h2>\n        <\/div>\n        <div class=\"final-actions\">\n          <a class=\"line-button compact\" href=\"https:\/\/lin.ee\/YiJbHj1\" target=\"_blank\" rel=\"noreferrer\">\n            <span class=\"line-badge\">LINE<\/span>\n            LINE\u3067\u7121\u6599\u76f8\u8ac7\u3059\u308b\n            <span class=\"chevron\" aria-hidden=\"true\"><\/span>\n          <\/a>\n          <a class=\"phone-button\" href=\"tel:0944552108\">\n            <span class=\"phone-icon\" aria-hidden=\"true\"><\/span>\n            \u96fb\u8a71\u3067\u554f\u3044\u5408\u308f\u305b\u308b\n          <\/a>\n        <\/div>\n        <p class=\"note\">\u5148\u774030\u540d\u306e\u305f\u3081\u3001\u304a\u65e9\u3081\u306b\u3054\u76f8\u8ac7\u304f\u3060\u3055\u3044!<\/p>\n      <\/section>\n    <\/main>\n\n    <footer class=\"footer\">\n      <div class=\"brand footer-brand\">\n        <img decoding=\"async\" class=\"brand-logo\" src=\".\/assets\/learnal-logo.png\" alt=\"Learnal\" \/>\n      <\/div>\n      <p>\u5b66\u3073\u3092\u6210\u529f\u30fb\u6210\u9577\u306b<\/p>\n    <\/footer>\n\n    <a class=\"mobile-sticky-cta\" href=\"https:\/\/lin.ee\/YiJbHj1\" target=\"_blank\" rel=\"noreferrer\">\n      <span class=\"line-badge\">LINE<\/span>\n      \u7121\u6599\u76f8\u8ac7\u3059\u308b\n      <span class=\"chevron\" aria-hidden=\"true\"><\/span>\n    <\/a>\n\n","protected":false},"featured_media":0,"template":"","class_list":["post-10169","service","type-service","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.learnal.website\/index.php?rest_route=\/wp\/v2\/service\/10169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.learnal.website\/index.php?rest_route=\/wp\/v2\/service"}],"about":[{"href":"https:\/\/www.learnal.website\/index.php?rest_route=\/wp\/v2\/types\/service"}],"wp:attachment":[{"href":"https:\/\/www.learnal.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}