@font-face {
  font-family: "Noto Sans JP";
  src: url("./fonts/NotoSansJP-v3.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --lp-ink: #113f31;
  --lp-ink-deep: #0b3429;
  --lp-body: #23332d;
  --lp-muted: #596963;
  --lp-green: #16533f;
  --lp-green-soft: #eff6f0;
  --lp-yellow: #ffca37;
  --lp-amber: #fff0cb;
  --lp-paper: #fff;
  --lp-edge: #dce5dd;
  font-family: "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  color: var(--lp-body);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; font-size: 16px; line-height: 1.75; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid #1a6c9d; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; inset: 10px auto auto 10px; padding: 8px 14px; transform: translateY(-160%); background: white; color: var(--lp-ink); }
.skip-link:focus { transform: none; }

.lp-hero { position: relative; min-height: min(940px, 69vw); min-height: clamp(700px, 64vw, 940px); overflow: hidden; isolation: isolate; background: #e9f1eb; }
.lp-hero-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lp-header { position: absolute; z-index: 1; inset: 20px 4.8% auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lp-brand { color: var(--lp-ink); font-size: 25px; font-weight: 900; letter-spacing: -.055em; line-height: 1.25; text-decoration: none; }
.lp-header-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.lp-header-links a { padding: 6px 2px; color: #183d32; font-size: 14px; font-weight: 700; text-decoration: none; }
.lp-header-links a:hover, .lp-footer nav a:hover, .lp-price-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-hero-meta { position: absolute; top: 24px; right: 4.8%; display: flex; gap: 12px; margin: 0; padding: 4px 11px; background: rgb(255 255 255 / 87%); color: #25352f; font-size: 12px; line-height: 1.5; }
.lp-hero-copy { width: min(900px, 70%); padding: 140px 0 82px 4.8%; color: var(--lp-ink-deep); }
.lp-hero h1 { margin: 0; font-size: clamp(58px, 7.6vw, 108px); font-weight: 900; letter-spacing: -.075em; line-height: 1.14; }
.lp-hero-lede { margin: 22px 0 30px; font-size: clamp(25px, 2.6vw, 35px); font-weight: 700; letter-spacing: -.025em; line-height: 1.55; }
.lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 76px; padding: 15px 29px; border: 0; border-radius: 999px; color: #1f2b23; font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.lp-button:hover { background-color: #f1b915; transform: translateY(-1px); }
.lp-button img { width: 21px; height: 21px; }
.lp-button-yellow { background: var(--lp-yellow); }
.lp-hero-cta { width: min(650px, 48vw); }

.lp-organize { position: relative; overflow: hidden; padding: 40px 4.5% 44px; isolation: isolate; }
.lp-organize-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lp-organize::before { position: absolute; z-index: -1; inset: 0; content: ""; background: rgb(33 31 24 / 18%); }
.lp-organize-inner { width: min(1430px, 100%); min-height: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.05fr); align-items: center; gap: clamp(12px, 2vw, 30px); }
.lp-state-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; color: #fff; }
.lp-state-heading strong { flex: 0 0 auto; padding: 8px 18px 10px; border-radius: 12px; background: #29302e; font-size: 32px; font-weight: 900; line-height: 1.25; }
.lp-state-heading p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 4px #181b18; }
.lp-after-heading strong { background: var(--lp-green); }
.lp-document-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: center; }
.lp-document-stack figure { min-width: 0; margin: 0; padding: 10px; background: #fff; box-shadow: 0 5px 14px rgb(20 25 22 / 22%); transform: rotate(-1.1deg); }
.lp-document-stack figure:nth-child(even) { transform: rotate(1.2deg); }
.lp-document-stack img { width: 100%; height: clamp(130px, 17vw, 220px); object-fit: cover; }
.lp-document-stack figcaption { overflow: hidden; padding: 7px 2px 0; color: #1e2d26; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lp-organize-step { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #1b2d24; text-align: center; }
.lp-organize-step img { width: 112px; height: 112px; }
.lp-organize-step p { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.35; white-space: nowrap; }
.lp-image-note { margin: -26px 0 14px; color: #fff; font-size: 11px; text-shadow: 0 1px 4px #18211a; }
.lp-folder-window { min-height: 680px; padding: 17px 20px 20px; overflow: hidden; border: 1px solid #d4ddd4; border-radius: 10px; background: #fff; box-shadow: 0 7px 20px rgb(25 30 25 / 20%); color: #18231d; font-size: 20px; }
.lp-folder-title { display: flex; align-items: center; gap: 9px; min-height: 38px; padding-bottom: 9px; border-bottom: 1px solid var(--lp-edge); }
.lp-folder-title img, .lp-folder-row img { flex: 0 0 auto; width: 24px; height: 24px; }
.lp-tree, .lp-tree ul, .lp-files { margin: 0; padding: 0; list-style: none; }
.lp-tree { display: grid; gap: 8px; padding-top: 9px; }
.lp-tree > li { padding: 6px 8px; }
.lp-tree > li > ul { padding-left: 26px; }
.lp-tree > li > ul > li { padding: 5px 2px; }
.lp-folder-row { display: flex; align-items: center; gap: 9px; min-height: 33px; }
.lp-folder-row img:first-child:not(:last-child) { width: 16px; height: 16px; }
.lp-folder-row strong { font-size: 18px; }
.lp-files { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 5px 0 5px 28px; }
.lp-files li { display: flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; font-size: 16px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.lp-files img { flex: 0 0 auto; width: 19px; height: 19px; }
.lp-review-row { margin-top: 4px; border-radius: 7px; background: var(--lp-amber); }

.lp-product { width: min(1320px, 90%); margin: 0 auto; padding: 64px 0 60px; display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; gap: clamp(24px, 3vw, 42px); }
.lp-product-copy h2 { margin: 0 0 16px; color: var(--lp-ink); font-size: clamp(35px, 4vw, 50px); font-weight: 900; letter-spacing: -.055em; line-height: 1.32; }
.lp-product-copy > p { margin: 0; font-size: 18px; line-height: 1.9; }
.lp-format-panel { margin-top: 22px; padding: 15px 17px; border-radius: 12px; background: var(--lp-green-soft); }
.lp-format-panel h3 { margin: 0 0 10px; color: #183e30; font-size: 15px; font-weight: 800; }
.lp-format-list, .lp-option-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.lp-format-list li, .lp-option-list li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.lp-format-list img { width: 27px; height: 27px; }
.lp-option-list { display: grid; gap: 5px; margin-top: 14px; }
.lp-option-list img { width: 18px; height: 18px; }
.lp-format-note { margin: 11px 0 0; color: #52645a; font-size: 11px; line-height: 1.65; }
.lp-product-screen { margin: 0; }
.lp-product-screen a { display: block; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 19px rgb(20 30 25 / 16%); }
.lp-product-screen img { width: 100%; height: auto; }
.lp-product-screen figcaption { margin-top: 8px; color: #596761; font-size: 11px; text-align: right; }

.lp-privacy { position: relative; min-height: 360px; overflow: hidden; display: flex; align-items: center; isolation: isolate; background: var(--lp-ink); color: #fff; }
.lp-privacy-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lp-privacy::before { position: absolute; z-index: -1; inset: 0; content: ""; background: rgb(8 57 42 / 8%); }
.lp-privacy-copy { width: min(1300px, 90%); margin: 0 auto; padding: 54px 0; }
.lp-privacy-copy h2 { max-width: 780px; margin: 0 0 15px; font-size: clamp(34px, 4.2vw, 54px); font-weight: 900; letter-spacing: -.05em; line-height: 1.35; }
.lp-privacy-copy p { max-width: 660px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.85; }

.lp-price { width: min(1300px, 90%); margin: 0 auto; padding: 52px 0 49px; text-align: center; }
.lp-price > h2 { margin: 0 0 22px; color: var(--lp-ink); font-size: clamp(32px, 4vw, 45px); font-weight: 900; letter-spacing: -.045em; line-height: 1.35; }
.lp-price-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; background: #f0f6f1; }
.lp-price-option { padding: 18px 22px 16px; }
.lp-price-trial { border-right: 1px solid #cbd8cd; }
.lp-price-option h3 { margin: 0 0 2px; color: #26372e; font-size: 17px; font-weight: 800; }
.lp-price-amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; color: var(--lp-ink); line-height: 1.15; }
.lp-price-amount strong { font-size: clamp(40px, 5.5vw, 64px); font-weight: 900; letter-spacing: -.07em; }
.lp-price-amount span { font-size: clamp(21px, 2.7vw, 32px); font-weight: 900; letter-spacing: -.045em; }
.lp-price-option > p:last-child { margin: 5px 0 0; font-size: 13px; }
.lp-price-cta { min-width: min(470px, 100%); margin-top: 17px; }
.lp-price-meta { margin: 6px 0 0; font-size: 13px; }
.lp-price-meta a { font-weight: 700; text-underline-offset: 3px; }
.lp-price-detail { max-width: 860px; margin: 12px auto 0; color: #57655f; font-size: 11px; line-height: 1.7; }

.lp-more { width: min(1120px, 90%); margin: 0 auto; padding: 8px 0 52px; }
.lp-faq { border-top: 1px solid var(--lp-edge); border-bottom: 1px solid var(--lp-edge); }
.lp-faq summary { padding: 15px 4px; color: var(--lp-ink); font-weight: 800; cursor: pointer; }
.lp-faq-body { padding: 0 4px 15px; }
.lp-faq-body h3 { margin: 14px 0 3px; font-size: 14px; }
.lp-faq-body p { margin: 0; color: var(--lp-muted); font-size: 13px; }
.lp-guide-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-top: 32px; }
.lp-guide-links h2 { grid-column: 1 / -1; margin: 0 0 4px; color: var(--lp-ink); font-size: 19px; }
.lp-guide-links a { display: grid; align-content: center; gap: 2px; min-height: 62px; padding: 9px 12px; border-bottom: 1px solid var(--lp-edge); color: var(--lp-ink); text-decoration: none; }
.lp-guide-links a:hover { background: var(--lp-green-soft); }
.lp-guide-links strong { font-size: 13px; }
.lp-guide-links span { color: var(--lp-muted); font-size: 11px; }
.lp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 5%; border-top: 1px solid var(--lp-edge); }
.lp-footer .lp-brand { font-size: 17px; }
.lp-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-footer nav a { color: #45564d; font-size: 12px; text-decoration: none; }
.lp-footer > p { margin: 0; color: #738078; font-size: 11px; }

.analytics-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--lp-edge); color: #53625a; font-size: 12px; }
.analytics-choice button { padding: 5px 10px; border: 1px solid #aab9ad; border-radius: 5px; background: #fff; color: var(--lp-ink); font: inherit; cursor: pointer; }
.analytics-choice a { color: var(--lp-ink); }

@media (max-width: 900px) {
  .lp-hero { min-height: 760px; }
  .lp-header { inset: 18px 4%; }
  .lp-header-links { gap: 16px; }
  .lp-hero-meta { top: 70px; right: 4%; }
  .lp-hero-copy { width: 75%; padding: 170px 0 66px 4%; }
  .lp-hero h1 { font-size: clamp(48px, 8vw, 72px); }
  .lp-organize { padding: 34px 4%; }
  .lp-organize-inner { min-height: 700px; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 12px; }
  .lp-state-heading { gap: 10px; }
  .lp-state-heading strong { padding: 8px 12px; font-size: 24px; }
  .lp-state-heading p { font-size: 12px; }
  .lp-organize-step img { width: 60px; height: 60px; }
  .lp-organize-step p { font-size: 15px; }
  .lp-folder-window { padding: 9px; }
  .lp-folder-window { min-height: 650px; font-size: 17px; }
  .lp-folder-row strong { font-size: 16px; }
  .lp-files li { font-size: 14px; }
  .lp-files { grid-template-columns: 1fr; gap: 2px; }
  .lp-product { width: 90%; grid-template-columns: 1fr 1.1fr; gap: 28px; padding: 52px 0; }
  .lp-product-copy h2 { font-size: clamp(30px, 3.8vw, 34px); }
  .lp-format-list { gap: 7px 12px; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .lp-hero { min-height: 740px; }
  .lp-hero-photo { object-position: 61% center; }
  .lp-header { inset: 15px 18px auto; }
  .lp-brand { font-size: 19px; }
  .lp-header-links { gap: 10px; }
  .lp-header-links a { padding: 4px 0; font-size: 11px; }
  .lp-hero-meta { top: 58px; right: 18px; display: grid; gap: 1px; padding: 5px 8px; font-size: 10px; }
  .lp-hero-copy { width: 100%; padding: 132px 18px 35px; }
  .lp-hero h1 { max-width: 540px; font-size: clamp(39px, 10vw, 58px); letter-spacing: -.07em; line-height: 1.18; }
  .lp-hero-lede { margin: 15px 0 21px; font-size: 18px; }
  .lp-hero-cta { min-width: 0; width: 100%; min-height: 54px; padding: 12px 14px; font-size: 16px; }
  .lp-organize { padding: 25px 15px 30px; }
  .lp-organize-inner { min-height: 0; grid-template-columns: 1fr; gap: 20px; }
  .lp-state-heading { margin-bottom: 11px; }
  .lp-state-heading strong { padding: 7px 11px; font-size: 22px; }
  .lp-state-heading p { font-size: 12px; }
  .lp-document-stack { gap: 8px; }
  .lp-document-stack figure { padding: 6px; }
  .lp-document-stack img { height: 135px; }
  .lp-document-stack figcaption { padding-top: 5px; font-size: 10px; }
  .lp-organize-step { flex-direction: row; gap: 8px; }
  .lp-organize-step img { width: 42px; height: 42px; transform: rotate(90deg); }
  .lp-organize-step p { font-size: 16px; }
  .lp-folder-window { padding: 10px; }
  .lp-files { grid-template-columns: 1fr; gap: 7px; }
  .lp-files li { font-size: 14px; line-height: 1.6; }
  .lp-product { width: 100%; grid-template-columns: 1fr; gap: 24px; padding: 40px 18px; }
  .lp-product-copy h2 { margin-bottom: 12px; font-size: clamp(28px, 8.5vw, 33px); }
  .lp-product-copy > p { font-size: 14px; }
  .lp-format-panel { margin-top: 17px; padding: 13px; }
  .lp-format-list { justify-content: space-between; gap: 8px; }
  .lp-format-list li { gap: 5px; font-size: 12px; }
  .lp-format-list img { width: 23px; height: 23px; }
  .lp-option-list li { align-items: flex-start; font-size: 12px; }
  .lp-option-list img { margin-top: 3px; }
  .lp-product-screen figcaption { font-size: 10px; }
  .lp-privacy { min-height: 430px; align-items: flex-start; }
  .lp-privacy-photo { object-position: 65% center; }
  .lp-privacy::before { background: rgb(8 57 42 / 8%); }
  .lp-privacy-photo { object-position: 40% center; }
  .lp-privacy-copy { width: auto; margin: 0 18px; padding: 38px 0; }
  .lp-privacy-copy h2 { max-width: 480px; font-size: 34px; }
  .lp-privacy-copy p { max-width: 480px; font-size: 14px; }
  .lp-price { width: auto; margin: 0 16px; padding: 38px 0; }
  .lp-price > h2 { margin-bottom: 15px; font-size: 30px; }
  .lp-price-grid { grid-template-columns: 1fr; }
  .lp-price-option { padding: 15px 12px; }
  .lp-price-trial { border-right: 0; border-bottom: 1px solid #cbd8cd; }
  .lp-price-option h3 { font-size: 14px; }
  .lp-price-amount strong { font-size: 48px; }
  .lp-price-amount span { font-size: 24px; }
  .lp-price-option > p:last-child { font-size: 11px; }
  .lp-price-cta { width: 100%; min-height: 54px; margin-top: 14px; padding-inline: 12px; font-size: 15px; }
  .lp-price-meta { font-size: 11px; }
  .lp-price-detail { font-size: 10px; text-align: left; }
  .lp-more { width: auto; margin: 0 18px; padding: 0 0 36px; }
  .lp-guide-links { grid-template-columns: 1fr; gap: 2px; margin-top: 22px; }
  .lp-guide-links h2 { font-size: 17px; }
  .lp-footer { align-items: flex-start; flex-direction: column; gap: 11px; padding: 17px 18px; }
  .lp-footer nav { gap: 8px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}